/*
Theme Name: DaheimGutschein
Theme URI: https://daheimgutschein.de
Description: Child-Theme der Produktseite daheimgutschein.de. Basiert auf GeneratePress.
Author: SW-Comnizept GmbH & Co. KG
Template: generatepress
Version: 1.0.0
Text Domain: daheimgutschein
*/
/* =========================================================
1. Schrift (selbst gehostet – kein Aufruf bei Google)
========================================================= */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/montserrat-800.woff2") format("woff2"); }
/* =========================================================
2. Design-Tokens – DaheimGutschein (Nachtblau, Orange)
========================================================= */
:root {
--dg-ink: #1B2A49;
--dg-ink-soft: #24365E;
--dg-red: #F26B21;
--dg-red-dark: #D95A14;
--dg-red-light: #FDEEE4;
--dg-gray: #F4F6FA;
--dg-gray-2: #E3E6EB;
--dg-line: #DCE1E9;
--dg-muted: #5B6578;
--dg-white: #ffffff;
--dg-green: #146c2e;
--dg-radius: 14px;
--dg-radius-sm: 9px;
--dg-shadow: 0 1px 2px rgba(17,20,24,.05), 0 14px 36px -14px rgba(17,20,24,.16);
--dg-shadow-lg: 0 2px 4px rgba(17,20,24,.06), 0 32px 64px -24px rgba(17,20,24,.32);
--dg-font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
--dg-wrap: 1180px;
--dg-section: clamp(64px, 8vw, 112px);
}
/* =========================================================
3. Grundlagen
========================================================= */
body {
font-family: var(--dg-font);
color: var(--dg-ink);
background: var(--dg-white);
font-size: 17px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--dg-font);
color: var(--dg-ink);
font-weight: 700;
line-height: 1.15;
letter-spacing: -.025em;
margin-top: 0;
}
h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
a { color: var(--dg-red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--dg-red-dark); }
p.dg-lead, .dg-lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.6; color: var(--dg-muted); }
.dg-muted { color: var(--dg-muted); }
/* GeneratePress-Container auf unser Raster bringen */
.site-content .content-area { padding: 0; }
.dg-main .site-content > .container,
.dg-main .site-content .grid-container { max-width: 100%; width: 100%; padding: 0; }
.dg-main .content-area { width: 100%; float: none; }
.dg-main .separate-containers .site-main { margin: 0; }
.dg-main .entry-content > * { margin-block: 0; }
.dg-main .entry-content { margin-top: 0; }
.dg-main .inside-article { padding: 0; }
.dg-main .entry-header { display: none; }
[class*="dg-"] > .wp-block-group__inner-container { display: contents; }
/* =========================================================
4. Kopf
========================================================= */
.site-header { background: var(--dg-white); border-bottom: 1px solid var(--dg-line); }
.site-header .site-branding, .site-header .site-title, .site-header .site-description { display: none; }
/* Marke und Navigation auf einer Höhe – GP lässt beide schwimmen, dann hängt
das Logo oben, weil die Navigation ihre eigene Zeilenhöhe mitbringt. */
.site-header .inside-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header .inside-header::before, .site-header .inside-header::after { display: none; }
.site-header .site-logo, .site-header .main-navigation { float: none; margin: 0; }
.site-header .site-logo { display: flex; align-items: center; }
.main-navigation, .main-navigation .inside-navigation, .main-navigation .main-nav > ul { background: transparent !important; }
.main-navigation .main-nav ul li a, .main-navigation .menu-toggle { color: var(--dg-ink) !important; background: transparent !important; }
.main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li.current-menu-item > a { color: var(--dg-red) !important; }
.site-header .inside-header.grid-container { padding: 14px 24px; max-width: var(--dg-wrap); box-sizing: border-box; } /* bündig mit dem Inhalt; acht Menüpunkte passen nur mit engem Raster (unten) */
.site-logo img { height: 30px; width: auto; }
.dg-marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--dg-ink); font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; }
.dg-marke:hover { color: var(--dg-ink); }
.dg-marke img { display: block; height: 34px; width: 34px; }
.dg-footer-brand strong::before { content: ""; display: inline-block; width: 26px; height: 26px; background: url("img/marke-invers.svg") center/contain no-repeat; }
.main-navigation, .main-navigation a { font-family: var(--dg-font); }
.main-navigation .main-nav ul li a {
font-size: .88rem; font-weight: 600; color: var(--dg-ink);
padding: 0 8px; line-height: 56px;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--dg-red); background: transparent; }
.main-navigation .main-nav ul li.dg-nav-cta > a {
background: var(--dg-red) !important; color: #fff !important; border-radius: 999px;
line-height: 40px; padding: 0 15px; margin-left: 2px; margin-top: 8px;
}
.main-navigation .main-nav ul li.dg-nav-cta > a:hover { background: var(--dg-red-dark) !important; color: #fff !important; }
.main-navigation .main-nav ul li.dg-nav-quiet > a { color: var(--dg-muted); font-weight: 500; }
.main-navigation .menu-toggle, .main-navigation .mobile-bar-items a { color: var(--dg-ink); }
.main-navigation.toggled .main-nav > ul { background: #fff; border-top: 1px solid var(--dg-line); }
.main-navigation.toggled .main-nav ul li a { line-height: 48px; }
.main-navigation.toggled .main-nav ul li.dg-nav-cta > a { margin: 8px 14px; display: inline-block; line-height: 40px; }
/* Bis 1240 px (siehe generate_mobile_menu_media_query in functions.php): Marke
links, Menüknopf rechts, aufgeklapptes Menü darunter */
@media (max-width: 1240px) {
.site-header .inside-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 16px; text-align: left; }
.site-header .site-logo { margin: 0; }
.site-header .inside-header { position: relative; }
.site-header .main-navigation, .site-header .main-navigation .inside-navigation { flex: 0 0 auto; position: static; }
.main-navigation .menu-toggle { padding: 8px 4px; font-weight: 600; text-align: right; }
/* Der Knopf bleibt rechts stehen, die Liste legt sich unter die Kopfzeile */
.main-navigation.toggled .main-nav { position: absolute; left: 0; right: 0; top: 100%; width: 100%; z-index: 50; background: #fff !important; padding: 8px 12px 12px; border-top: 1px solid var(--dg-line); box-shadow: 0 16px 32px -16px rgba(27, 42, 73, .25); }
.dg-marke { font-size: 1.2rem; }
.dg-marke img { height: 30px; width: 30px; }
}
/* =========================================================
5. Sektionen, Raster
========================================================= */
.dg-section { padding-top: var(--dg-section); padding-bottom: var(--dg-section); }
.dg-section--tight { padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 72px); }
.dg-wrap { max-width: var(--dg-wrap); margin-inline: auto; padding-inline: 24px; box-sizing: border-box; }
.dg-wrap-text { max-width: 800px; }
.dg-wrap-text h2 { font-size: 1.4rem; margin-top: 44px; margin-bottom: 12px; }
.dg-wrap-text h2:first-child { margin-top: 0; }
.dg-wrap-text h3 { font-size: 1.1rem; margin-top: 28px; margin-bottom: 8px; }
.dg-wrap-text p, .dg-wrap-text ul { margin-bottom: 16px; }
.dg-bg-gray { background: var(--dg-gray); }
.dg-bg-ink { background: var(--dg-ink); color: #fff; }
.dg-bg-ink h1, .dg-bg-ink h2, .dg-bg-ink h3, .dg-bg-ink p, .dg-bg-ink li { color: #fff; }
.dg-bg-ink p, .dg-bg-ink .dg-lead { color: rgba(255,255,255,.8); }
.dg-bg-red { background: var(--dg-red); color: #fff; }
.dg-bg-red h2, .dg-bg-red h3, .dg-bg-red p { color: #fff; }
.dg-eyebrow {
display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--dg-red); margin-bottom: 14px !important;
}
.dg-bg-ink .dg-eyebrow, .dg-bg-red .dg-eyebrow { color: rgba(255,255,255,.7); }
.dg-head { max-width: 760px; margin-bottom: 48px !important; }
.dg-head h2 { margin-bottom: 14px; }
.dg-head p { margin-bottom: 0; }
.dg-head--center { margin-inline: auto; text-align: center; }
.dg-grid { display: grid; gap: 22px; }
.dg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dg-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .dg-grid--3, .dg-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dg-grid--2, .dg-grid--3, .dg-grid--4 { grid-template-columns: 1fr; } }
.dg-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.dg-split--rev { direction: rtl; } .dg-split--rev > * { direction: ltr; }
@media (max-width: 900px) { .dg-split, .dg-split--rev { grid-template-columns: 1fr; direction: ltr; } }
/* =========================================================
6. Buttons
========================================================= */
.wp-block-buttons { gap: 12px; }
.dg-main .wp-block-buttons { margin-top: 30px; }
.dg-main .wp-block-button .wp-block-button__link, .dg-btn {
font-family: var(--dg-font); font-size: .98rem; font-weight: 600; line-height: 1.2;
padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
background: var(--dg-red); color: #fff; text-decoration: none; display: inline-block;
transition: transform .15s ease, background .15s ease, color .15s ease;
box-shadow: 0 10px 22px -12px rgba(242,107,33,.55);
}
.dg-main .wp-block-button .wp-block-button__link:hover, .dg-btn:hover { background: var(--dg-red-dark); color: #fff; transform: translateY(-1px); }
.dg-main .dg-btns .wp-block-button:not(:first-child) .wp-block-button__link {
background: transparent; color: var(--dg-ink); border-color: var(--dg-line); box-shadow: none;
}
.dg-main .dg-btns .wp-block-button:not(:first-child) .wp-block-button__link:hover { border-color: var(--dg-ink); color: var(--dg-ink); background: transparent; }
.dg-main .dg-bg-ink .dg-btns .wp-block-button:not(:first-child) .wp-block-button__link,
.dg-main .dg-bg-red .dg-btns .wp-block-button:not(:first-child) .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.35); }
.dg-main .dg-bg-red .dg-btns .wp-block-button:first-child .wp-block-button__link { background: #fff; color: var(--dg-red); box-shadow: none; }
.dg-main .dg-bg-red .dg-btns .wp-block-button:first-child .wp-block-button__link:hover { background: #FDEEE4; }
/* =========================================================
7. Hero
========================================================= */
.dg-hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); background:
radial-gradient(1200px 600px at 80% -10%, rgba(242,107,33,.10), transparent 60%), var(--dg-white); }
.dg-hero .dg-split { align-items: center; }
.dg-hero h1 { margin-bottom: 20px; }
.dg-hero h1 em { font-style: normal; color: var(--dg-red); }
.dg-hero .dg-lead { margin-bottom: 0; }
.dg-hero__note { font-size: .88rem; color: var(--dg-muted); margin-top: 18px; }
.dg-hero__note strong { color: var(--dg-ink); font-weight: 600; }
/* Geräte-Zeile unter der Attrappe */
.dg-devices { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.dg-devices span { font-size: .8rem; font-weight: 600; color: var(--dg-muted); background: var(--dg-gray); border-radius: 999px; padding: 6px 12px; }
/* =========================================================
8. Karten, Schritte, Zahlen
========================================================= */
.dg-card {
background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius);
padding: 28px 26px; box-shadow: var(--dg-shadow); display: flex; flex-direction: column; gap: 8px;
}
.dg-card h3 { margin: 0; }
.dg-card p { margin: 0; color: var(--dg-muted); font-size: .98rem; }
.dg-main .dg-card .wp-block-buttons { margin: 10px 0 6px; }
.dg-card--icon::before {
content: ""; width: 44px; height: 44px; border-radius: 12px; background: var(--dg-red-light); margin-bottom: 8px;
background-repeat: no-repeat; background-position: center; background-size: 24px;
}
.dg-bg-ink .dg-card { background: var(--dg-ink-soft); border-color: rgba(255,255,255,.1); box-shadow: none; }
.dg-bg-ink .dg-card p { color: rgba(255,255,255,.72); }
.dg-bg-ink .dg-card--icon::before { background-color: rgba(255,255,255,.08); }
.dg-ico-phone::before { background-image: url("data:image/svg+xml;utf8,"); }
.dg-ico-desktop::before { background-image: url("data:image/svg+xml;utf8,"); }
.dg-ico-server::before { background-image: url("data:image/svg+xml;utf8,"); }
.dg-ico-template::before { background-image: url("data:image/svg+xml;utf8,"); }
.dg-ico-law::before { background-image: url("data:image/svg+xml;utf8,"); }
.dg-ico-banner::before { background-image: url("data:image/svg+xml;utf8,"); }
.dg-ico-users::before { background-image: url("data:image/svg+xml;utf8,"); }
.dg-ico-cloud::before { background-image: url("data:image/svg+xml;utf8,"); }
.dg-ico-shield::before { background-image: url("data:image/svg+xml;utf8,"); }
.dg-ico-image::before { background-image: url("data:image/svg+xml;utf8,"); }
.dg-ico-sync::before { background-image: url("data:image/svg+xml;utf8,"); }
.dg-ico-handshake::before { background-image: url("data:image/svg+xml;utf8,"); }
/* Nummerierte Schritte */
.dg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: schritt; }
@media (max-width: 800px) { .dg-steps { grid-template-columns: 1fr; } }
.dg-step { position: relative; padding: 26px 26px 26px 26px; background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius); }
.dg-step::before {
counter-increment: schritt; content: counter(schritt);
display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
background: var(--dg-red); color: #fff; font-weight: 800; margin-bottom: 14px;
}
.dg-step h3 { margin: 0 0 6px; }
.dg-step p { margin: 0; color: var(--dg-muted); font-size: .98rem; }
.dg-step__time { display: inline-block; margin-top: 12px !important; font-size: .8rem !important; font-weight: 600; color: var(--dg-red) !important; }
/* Drei Wege */
.dg-way { border-top: 4px solid var(--dg-red); }
.dg-way p.dg-way__for { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dg-red); margin: 0 0 4px; }
.dg-way ul { margin: 6px 0 0; padding-left: 18px; color: var(--dg-muted); font-size: .95rem; }
.dg-way li { margin-bottom: 4px; }
/* Häkchenliste */
.dg-check { list-style: none; padding: 0; margin: 20px 0 0; }
.dg-check li { position: relative; padding-left: 32px; margin-bottom: 12px; }
.dg-check li::before {
content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
background: var(--dg-red-light) url("data:image/svg+xml;utf8,") center/14px no-repeat;
}
.dg-bg-ink .dg-check li::before { background-color: rgba(255,255,255,.1); }
/* Vergleichstabelle */
.dg-table { overflow-x: auto; }
.dg-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.dg-table th, .dg-table td { padding: 12px 14px; border-bottom: 1px solid var(--dg-line); text-align: left; vertical-align: top; }
.dg-table th { font-weight: 700; background: var(--dg-gray); }
.dg-table td:first-child { font-weight: 600; }
/* FAQ */
.dg-faq { margin-inline: auto; }
.dg-faq .wp-block-details { border-bottom: 1px solid var(--dg-line); padding: 6px 0; margin: 0; }
.dg-faq summary { font-weight: 600; cursor: pointer; padding: 12px 0; font-size: 1.04rem; list-style: none; position: relative; padding-right: 36px; }
.dg-faq summary::-webkit-details-marker { display: none; }
.dg-faq summary::after { content: "+"; position: absolute; right: 4px; top: 8px; font-size: 1.5rem; color: var(--dg-red); font-weight: 400; }
.dg-faq details[open] summary::after { content: "–"; }
.dg-faq details > p { margin: 0 0 14px; color: var(--dg-muted); }
/* CTA-Band */
.dg-cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 800px) { .dg-cta { grid-template-columns: 1fr; } }
.dg-cta h2 { margin-bottom: 10px; }
.dg-cta p { margin: 0; }
.dg-cta .wp-block-buttons { justify-content: flex-end; margin-top: 0; }
@media (max-width: 800px) { .dg-cta .wp-block-buttons { justify-content: flex-start; } }
/* Infobox */
.dg-infobox { background: var(--dg-red-light); border-left: 4px solid var(--dg-red); border-radius: var(--dg-radius-sm); padding: 20px 24px; margin-top: 28px; }
.dg-infobox h3 { margin: 0 0 6px; font-size: 1.05rem; }
.dg-infobox p { margin: 0; color: var(--dg-ink); }
.dg-infobox--quiet { background: var(--dg-gray); border-left-color: var(--dg-muted); }
/* Kontaktkarte */
.dg-contact { display: grid; gap: 6px; }
.dg-contact p { margin: 0; }
.dg-contact .dg-contact__big { font-size: 1.3rem; font-weight: 700; }
/* Formular */
.dg-formular { display: grid; gap: 16px; }
.dg-formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .dg-formular__reihe { grid-template-columns: 1fr; } }
.dg-formular label { display: block; font-size: .9rem; font-weight: 600; color: var(--dg-ink); }
.dg-formular input[type="text"], .dg-formular input[type="email"], .dg-formular input[type="tel"],
.dg-formular select, .dg-formular textarea {
display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; font-weight: 400; font-size: 1rem;
border: 1px solid var(--dg-line); border-radius: var(--dg-radius-sm); background: #fff; color: var(--dg-ink); box-sizing: border-box;
}
.dg-formular input:focus, .dg-formular select:focus, .dg-formular textarea:focus { outline: 2px solid var(--dg-red); outline-offset: 1px; border-color: var(--dg-red); }
.dg-formular textarea { resize: vertical; min-height: 120px; }
.dg-pflicht { color: var(--dg-red); }
.dg-formular__topf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dg-formular__haken { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: .88rem !important; color: var(--dg-muted) !important; }
.dg-formular__haken input { margin-top: 4px; flex: none; }
.dg-formular .dg-btn { justify-self: start; border: 0; cursor: pointer; }
.dg-formular__hinweis { font-size: .9rem; color: var(--dg-muted); }
.dg-formular--danke { background: var(--dg-red-light); border-left: 4px solid var(--dg-red); border-radius: var(--dg-radius-sm); padding: 22px 26px; }
.dg-formular--danke h3 { margin: 0 0 6px; }
.dg-formular--danke p { margin: 0; }
.dg-formular-fehler { background: #fdecec; border-left: 4px solid #b00; border-radius: var(--dg-radius-sm); padding: 14px 18px; margin: 0 0 16px; }
.dg-kontaktraster { display: grid; grid-template-columns: 1.3fr .9fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .dg-kontaktraster { grid-template-columns: 1fr; } }
/* =========================================================
9. Fuß
========================================================= */
.site-footer { background: var(--dg-ink); color: rgba(255,255,255,.75); font-size: .93rem; }
.footer-widgets-container, .inside-footer-widgets { background: transparent; }
.footer-widgets { background: transparent; padding: 56px 24px 24px; max-width: var(--dg-wrap); margin-inline: auto; }
.footer-widgets .widget-title { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.footer-widgets a { color: rgba(255,255,255,.8); text-decoration: none; }
.footer-widgets a:hover { color: #fff; text-decoration: underline; }
.footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets li { margin-bottom: 8px; }
.footer-widgets p { color: rgba(255,255,255,.75); }
.dg-footer-brand strong { color: #fff; font-size: 1.15rem; display: inline-flex; align-items: center; gap: 8px; }
.dg-footer-brand img { height: 26px; width: auto; }
.site-info { background: transparent; border-top: 1px solid rgba(255,255,255,.1); }
.inside-site-info { max-width: var(--dg-wrap); padding: 18px 24px; }
.copyright-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; color: rgba(255,255,255,.55); font-size: .85rem; }
.copyright-bar a { color: rgba(255,255,255,.75); text-decoration: none; }
.copyright-bar a:hover { color: #fff; }
/* =========================================================
10. DaheimGutschein-Bausteine
========================================================= */
/* Kopfmarke: fertiges Logo-SVG (Schriftzug in Kurven) */
.dg-marke img { height: 31px; width: auto; }
.dg-footer-brand strong::before { display: none; }
.dg-footer-brand img { height: 30px; width: auto; display: block; margin-bottom: 12px; }
.site-footer { background: var(--dg-ink); }
/* --- Hero: Gutscheinkarte + Kassen-Bon --- */
.dg-buehne { position: relative; padding: 24px 0 8px; }
.dg-karte {
position: relative; width: min(100%, 420px); aspect-ratio: 85.6 / 54; border-radius: 18px; margin-inline: auto;
background: linear-gradient(135deg, #24365E 0%, #1B2A49 55%, #15213B 100%);
color: #fff; box-shadow: var(--dg-shadow-lg); overflow: hidden; padding: 22px 24px; box-sizing: border-box;
display: flex; flex-direction: column; justify-content: space-between;
}
.dg-karte::before { /* Stadtsilhouette */
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; opacity: .14;
background: url("data:image/svg+xml;utf8,") bottom/100% 100% no-repeat;
}
.dg-karte__kopf { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.dg-karte__marke { font-family: var(--dg-font); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.dg-karte__marke small { display: block; font-weight: 500; font-size: .72rem; opacity: .75; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.dg-karte__qr { width: 58px; height: 58px; background: #fff; border-radius: 8px; padding: 5px; box-sizing: border-box; }
.dg-karte__qr svg { width: 100%; height: 100%; display: block; }
.dg-karte__fenster { position: absolute; right: 24px; bottom: 24px; width: 10px; height: 14px; background: var(--dg-red); border-radius: 2px; box-shadow: 0 0 18px 4px rgba(242,107,33,.55); }
.dg-karte__nr { position: relative; font-family: "Courier New", monospace; font-size: 1.15rem; letter-spacing: .08em; }
.dg-karte__nr small { display: block; font-family: var(--dg-font); font-size: .68rem; letter-spacing: .06em; opacity: .7; margin-bottom: 4px; }
.dg-karte__wert { position: relative; font-family: var(--dg-font); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; color: #FF8A4C; }
.dg-bon {
position: absolute; right: -6px; bottom: -18px; width: 200px; background: #fff; border: 1px solid var(--dg-line);
border-radius: 10px; box-shadow: var(--dg-shadow-lg); padding: 14px 16px; font-size: .74rem; color: var(--dg-ink);
transform: rotate(3deg);
}
.dg-bon b { display: block; font-family: var(--dg-font); font-weight: 700; margin-bottom: 4px; }
.dg-bon .z { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed var(--dg-line); }
.dg-bon .z:last-child { border-bottom: 0; font-weight: 700; }
.dg-bon .haken { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #E6F4EC; color: #1E5B38; font-size: .7rem; margin-right: 6px; }
@media (max-width: 480px) { .dg-bon { position: static; transform: none; width: auto; margin: 20px auto 0; } }
/* Hero-Häkchen inline */
.dg-main ul.dg-hero__checks { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: var(--dg-muted); }
.dg-hero__checks li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.dg-hero__checks li::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--dg-red-light) url("data:image/svg+xml;utf8,") center/12px no-repeat; border-radius: 50%; }
/* --- Kennzahlenband --- */
.dg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px) { .dg-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dg-stats { grid-template-columns: 1fr; } }
.dg-stat p { margin: 0; }
.dg-stat .zahl { font-family: var(--dg-font); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--dg-red); letter-spacing: -.03em; line-height: 1.1; }
.dg-stat .txt { color: var(--dg-muted); font-size: .95rem; margin-top: 4px; }
/* --- Rollen: Herausgeber / Händler / Kunden / Arbeitgeber --- */
.dg-rollen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 980px) { .dg-rollen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dg-rollen { grid-template-columns: 1fr; } }
.dg-rolle { background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 26px 24px; box-shadow: var(--dg-shadow); display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--dg-red); }
.dg-rolle p.wer { font-family: var(--dg-font); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dg-red); }
.dg-rolle h3 { margin: 0; font-size: 1.15rem; }
.dg-rolle p { margin: 0; color: var(--dg-muted); font-size: .95rem; }
.dg-rolle ul { margin: 6px 0 0; padding-left: 18px; color: var(--dg-muted); font-size: .92rem; }
.dg-rolle li { margin-bottom: 4px; }
/* --- Geldfluss: wer zahlt wem --- */
/* Immer untereinander: der Block steht in der halben Spalte (≈560 px), drei
Kästen nebeneinander brauchen 700 – nebeneinander bricht er Wörter. */
.dg-fluss { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; }
.dg-fluss .knoten { background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 18px 22px; box-shadow: var(--dg-shadow); text-align: center; overflow-wrap: normal; hyphens: manual; }
.dg-fluss .knoten p { margin: 0; }
.dg-fluss .knoten .titel { font-family: var(--dg-font); font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.dg-fluss .knoten .txt { color: var(--dg-muted); font-size: .88rem; }
.dg-fluss .knoten--mitte { border-color: var(--dg-ink); background: var(--dg-ink); color: #fff; }
.dg-fluss .knoten--mitte .titel { color: #fff; }
.dg-fluss .knoten--mitte .txt { color: rgba(255,255,255,.75); }
.dg-fluss p.pfeil { margin: 0; font-family: var(--dg-font); font-weight: 700; font-size: .78rem; color: var(--dg-red); text-align: center; line-height: 1.3; }
.dg-fluss .pfeil::after { content: "↓"; display: block; font-size: 1.5rem; line-height: 1; margin-top: 2px; }
/* --- Kassen-Mock (PWA) --- */
.dg-kasse { width: min(100%, 340px); margin-inline: auto; background: #fff; border-radius: 26px; border: 1px solid var(--dg-line); box-shadow: var(--dg-shadow-lg); overflow: hidden; font-family: var(--dg-font); }
.dg-kasse__kopf { background: var(--dg-ink); color: #fff; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .92rem; }
.dg-kasse__kopf small { display: block; font-weight: 400; font-size: .72rem; opacity: .75; }
.dg-kasse__scan { margin: 14px; aspect-ratio: 4 / 3; border-radius: 14px; background: linear-gradient(135deg, #24365E, #15213B); position: relative; display: grid; place-items: center; color: rgba(255,255,255,.7); font-size: .8rem; }
.dg-kasse__scan::before { content: ""; position: absolute; inset: 22px; border: 2px solid rgba(255,255,255,.35); border-radius: 12px; }
.dg-kasse__scan i { position: absolute; left: 22px; right: 22px; height: 2px; background: var(--dg-red); top: 50%; box-shadow: 0 0 12px var(--dg-red); }
.dg-kasse__saldo { margin: 0 14px 6px; display: flex; justify-content: space-between; align-items: baseline; }
.dg-kasse__saldo b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.dg-kasse__saldo span { font-size: .78rem; color: var(--dg-muted); }
.dg-kasse__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 14px 14px; }
.dg-kasse__knoepfe span { border-radius: 12px; padding: 12px 10px; text-align: center; font-weight: 700; font-size: .88rem; background: var(--dg-gray); color: var(--dg-ink); }
.dg-kasse__knoepfe span:first-child { background: var(--dg-red); color: #fff; }
/* --- Portal-Mock (Händler) --- */
.dg-mock { background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius); overflow: hidden; box-shadow: var(--dg-shadow-lg); font-family: var(--dg-font); }
.dg-mock__bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--dg-line); background: var(--dg-gray); }
.dg-mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--dg-gray-2); display: block; }
.dg-mock__bar b { margin-left: 8px; font-weight: 600; font-size: .8rem; color: var(--dg-muted); }
.dg-mock__nav { display: flex; gap: 2px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--dg-line); background: var(--dg-ink); }
.dg-mock__nav a { font-weight: 600; font-size: .72rem; color: rgba(255,255,255,.75); padding: 5px 9px; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.dg-mock__nav a.an { color: #fff; background: rgba(255,255,255,.14); }
.dg-mock__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.dg-mock__kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dg-mock__kachel { border: 1px solid var(--dg-line); border-radius: 10px; padding: 10px 12px; }
.dg-mock__kachel small { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dg-muted); }
.dg-mock__kachel b { font-size: 1.05rem; }
.dg-mock__kachel--navy { background: var(--dg-ink); border-color: var(--dg-ink); color: #fff; }
.dg-mock__kachel--navy small { color: rgba(255,255,255,.7); }
.dg-mock__kachel--orange { background: var(--dg-red); border-color: var(--dg-red); color: #fff; }
.dg-mock__kachel--orange small { color: rgba(255,255,255,.8); }
.dg-zeile { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--dg-line); border-radius: 9px; background: var(--dg-gray); font-size: .8rem; }
.dg-zeile .rest { margin-left: auto; color: var(--dg-muted); font-size: .74rem; }
.dg-tag { font-size: .62rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: #E6F4EC; color: #1E5B38; }
.dg-tag--auf { background: #FDEEE4; color: #8A4B08; }
/* --- Szenen (Fragen aus dem Alltag) --- */
.dg-szenen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .dg-szenen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dg-szenen { grid-template-columns: 1fr; } }
.dg-szene { background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 26px 24px; box-shadow: var(--dg-shadow); display: flex; flex-direction: column; gap: 14px; }
.dg-szene p { margin: 0; }
.dg-szene__marker { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dg-muted); }
.dg-szene__frage { font-weight: 700; font-size: 1.18rem; line-height: 1.3; letter-spacing: -.02em; color: var(--dg-ink); }
.dg-szene__frage::before { content: "\201E"; } .dg-szene__frage::after { content: "\201C"; }
.dg-szene__antwort { color: var(--dg-muted); font-size: .98rem; margin: 0; }
.dg-szene__antwort :is(b, strong) { color: var(--dg-ink); font-weight: 600; }
/* --- Warum-Kacheln (Fenster-Marker statt Punkt) --- */
.dg-warum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .dg-warum { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dg-warum { grid-template-columns: 1fr; } }
.dg-wkarte { background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 24px; box-shadow: var(--dg-shadow); display: flex; flex-direction: column; gap: 10px; }
.dg-wkarte::before { content: ""; width: 11px; height: 14px; border-radius: 2px; background: var(--dg-red); box-shadow: 0 0 0 5px var(--dg-red-light); }
.dg-wkarte h3 { margin: 0; font-size: 1.1rem; }
.dg-wkarte p { margin: 0; color: var(--dg-muted); font-size: .95rem; }
/* --- Gutschein-PDF-Attrappe (Shop) --- */
.dg-pdf { background: #fff; border: 1px solid var(--dg-line); border-radius: 12px; box-shadow: var(--dg-shadow-lg); overflow: hidden; display: grid; grid-template-columns: 38% 62%; aspect-ratio: 210 / 99; max-width: 520px; margin-inline: auto; font-family: var(--dg-font); }
.dg-pdf__links { background: var(--dg-ink); color: #fff; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.dg-pdf__links small { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.dg-pdf__links b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.dg-pdf__links span { font-size: .72rem; opacity: .85; }
.dg-pdf__rechts { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: .72rem; color: var(--dg-muted); position: relative; }
.dg-pdf__rechts .nr { font-family: "Courier New", monospace; font-size: 1rem; color: var(--dg-ink); letter-spacing: .06em; }
.dg-pdf__rechts .qr { position: absolute; right: 16px; top: 16px; width: 54px; height: 54px; }
.dg-pdf__rechts .qr svg { width: 100%; height: 100%; }
.dg-pdf__rechts em { font-style: italic; color: var(--dg-ink); margin-top: auto; }
/* --- Konditionen --- */
.dg-kond { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .dg-kond { grid-template-columns: 1fr; } }
.dg-kond .k { background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 26px 24px; box-shadow: var(--dg-shadow); }
.dg-kond .k p { margin: 0; color: var(--dg-muted); font-size: .95rem; }
.dg-kond .k p.wert { font-family: var(--dg-font); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; color: var(--dg-ink); margin-bottom: 4px; }
.dg-kond .k p.label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dg-red); font-weight: 700; margin-bottom: 10px; }
/* --- Zugänge (Anmelden-Seite): drei Karten mit Knopf zur Plattform --- */
.dg-zugaenge { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .dg-zugaenge { grid-template-columns: 1fr; } }
/* Subgrid: Symbol, Rolle, Titel, Text, Punkte, Knopf, Fußnote liegen in allen
drei Karten auf derselben Höhe – sonst wirkt die Reihe unruhig */
.dg-zugang { background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 26px 24px; box-shadow: var(--dg-shadow); display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 10px; }
.dg-zugang::before { content: ""; width: 44px; height: 44px; border-radius: 12px; background-color: var(--dg-red-light); background-repeat: no-repeat; background-position: center; background-size: 24px; margin-bottom: 4px; }
.dg-zugang p.wer { font-family: var(--dg-font); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dg-red); }
.dg-zugang h3 { margin: 0; font-size: 1.25rem; }
.dg-zugang p { margin: 0; color: var(--dg-muted); font-size: .95rem; }
.dg-zugang ul { margin: 4px 0 0; padding-left: 18px; color: var(--dg-muted); font-size: .92rem; }
.dg-zugang li { margin-bottom: 4px; }
.dg-main .dg-zugang .wp-block-buttons.dg-zugang__knopf { justify-self: start; align-self: end; margin: 10px 0 0; }
.dg-zugang p.dg-zugang__fuss { font-size: .85rem; padding-top: 12px; border-top: 1px solid var(--dg-line); margin-top: 4px; }
/* Zwei Überschriften in einer Fußspalte */
.footer-widgets ul + .widget-title { margin-top: 26px; }
/* --- Attrappen als Bild-Blöcke (Mediathek, im Editor tauschbar) ---
Die PNGs sind 2x gerendert (build/render-attrappen.sh); die Breiten hier
entsprechen der 1x-Fläche, damit sie nicht größer werden als die CSS-Attrappen. */
.dg-main figure.dg-attrappe { margin: 0 auto; width: 100%; }
.dg-main figure.dg-attrappe img { display: block; width: 100%; height: auto; margin-inline: auto; }
.dg-attrappe--karte img { max-width: 520px; }
.dg-attrappe--kasse img { max-width: 400px; }
.dg-attrappe--portal img { max-width: 640px; }
.dg-attrappe--pdf img { max-width: 640px; }