/*
Datei: css/g-v2.css
Zweck: Sämtliche Regeln der Fassung G-V2 (/start-g-v2/).
Warum: An dieser Instanz arbeiten mehrere Sitzungen parallel an derselben
style.css. Diese Datei wird ausschließlich von der V2-Seite geladen
und von niemandem sonst angefasst — dadurch kann keine parallele
Bearbeitung V2 überschreiben, und V2 überschreibt niemanden.
Laden: per im ersten Code-Modul der Seite 180, nicht über
functions.php (die ist ebenfalls geteilt).
Regel: Alles hier gehört unter .page-dbzdg2 oder trägt einen dbzdg2-Namen.
*/
/* =====================================================================
VARIANTE G-V2 — Arbeitsstand (/start-g-v2/)
G bleibt eingefroren. Jede Stiländerung ab hier wird unter .dbzdg2
bzw. .page-dbzdg2 gekapselt, sonst schlüge sie auf G und F durch.
Schnappschuss des eingefrorenen Stands:
install/schnappschuesse/*_eingefroren_2026-08-23.*
===================================================================== */
/* ---------- V2: heller Above-the-fold nach Vorbild H ---------------------
Aufbau und Texte aus H, Schrift und Farbwelt aus G. Der Teich bleibt und
wird hell, damit der Wellenübergang in die nächste Sektion trägt. */
.page-dbzdg2 .dbzdf-hero.et_pb_section{
background:
/* unten weich in die Creme-Flaeche ausblenden, bevor der Teich beginnt */
linear-gradient(180deg, rgba(250,243,227,0) 52%, rgba(250,243,227,.88) 86%, var(--f-creme) 100%),
/* links deckend fuer die Lesbarkeit, nach rechts freigeben */
linear-gradient(95deg, rgba(250,243,227,.96) 0%, rgba(250,243,227,.90) 30%,
rgba(250,243,227,.58) 57%, rgba(250,243,227,.20) 100%),
var(--f-herobild, none) center top / cover no-repeat,
var(--f-creme) !important;
}
@media(max-width:900px){
/* schmal steht der Text ueber dem ganzen Bild — dann durchgehend deckend */
.page-dbzdg2 .dbzdf-hero.et_pb_section{
background:
linear-gradient(180deg, rgba(250,243,227,.90) 0%, rgba(250,243,227,.93) 60%, var(--f-creme) 100%),
var(--f-herobild, none) center top / cover no-repeat,
var(--f-creme) !important;
}
}
/* Hier stand ein Hero-Hintergrundbild aus einem frueheren Entwurf
(g2-hero-aquarell.webp bzw. g2-hero-foto.webp). Beide Dateien gibt es
nicht — der Browser hat sie bei jedem Aufruf der Startseite zweimal
erfolglos angefordert. Der Hero lebt von der Creme-Flaeche und dem Cover;
die Variable bleibt ungesetzt, das Fallback `none` greift. */
/* Quint stand zu tief: unter dem Above-the-fold klaffte eine leere Creme-
Flaeche. Weniger Fussraum im Hero zieht Teich, Quint und Welle gemeinsam
nach oben — die Abstaende untereinander bleiben, wie sie waren. */
.page-dbzdg2 .dbzdf-hero.et_pb_section{
padding-bottom:clamp(150px,18vw,235px) !important}
/* Kopfzeile: dunkle Schrift statt weißer */
.page-dbzdg2 .dbzd-header a.dbzd-logo{color:var(--f-navy) !important}
.page-dbzdg2 .dbzd-header a.dbzd-logo em{color:var(--f-gruen-tief) !important}
.page-dbzdg2 .dbzd-header a.dbzd-logo small{color:#4A5C68 !important}
.page-dbzdg2 .dbzd-header .dbzd-menu .et-menu>li>a{color:#22404C !important}
.page-dbzdg2 .dbzd-header .dbzd-menu .et-menu>li>a:hover{color:var(--f-gruen-tief) !important}
.page-dbzdg2 .dbzd-header .et-cart-info,
.page-dbzdg2 .dbzd-header .mobile_menu_bar::before{color:#22404C !important}
/* Textspalte */
.page-dbzdg2 .dbzdg2-hero-text h1{
color:var(--f-navy);
font-size:clamp(1.95rem,4.1vw,3.05rem);
line-height:1.14;
max-width:15em;
padding-bottom:.14em;
}
.page-dbzdg2 .dbzdg2-hero-text h1 .zwei{color:#4F7C34}
.page-dbzdg2 .dbzdg2-hero-text .lead{
font-size:clamp(1.02rem,1.7vw,1.16rem);
color:#3E5160;
max-width:28em;
margin:0 0 15px;
}
/* Die Stimmen-Zeile besteht aus zwei Teilen. Auf dem Desktop steht jeder
in einer eigenen Zeile — das ersetzt den frueheren harten Umbruch. */
.page-dbzdg2 .dbzdg2-trust .teil{display:block}
/* Für-wen-Reihe */
/* Divi setzt .et-l--body ul{padding-left:1em} — das ruecke ich hier zurueck,
damit die Icon-Zeile exakt auf der Kante von Text und Button steht. */
.page-dbzdg2 ul.dbzdg2-fuer{list-style:none;display:flex;flex-wrap:wrap;
gap:10px 24px;margin:0 0 18px;padding-left:0;padding-right:0}
.dbzdg2-fuer li{display:inline-flex;align-items:center;gap:9px;
font-family:var(--f-display);font-weight:600;font-size:.98rem;color:#2F4652}
.dbzdg2-fuer svg{width:21px;height:21px;flex:none;fill:none;stroke:#4F7C34;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dbzdf .dbzdg2-fuer img.dbzdg2-ikon{width:24px;height:24px;flex:none;display:block;
object-fit:contain;border-radius:0}
.page-dbzdg2 .dbzdg2-hero-text .cta{margin:0 0 14px}
/* Fürsprecher-Zeile (bewusst keine Sterne — dazu fehlen echte Bewertungen) */
.dbzdg2-trust{display:flex;align-items:center;gap:13px;margin:0;
font-size:.9rem;line-height:1.5;color:#3E5160;max-width:34em}
.dbzdg2-trust .schild{width:34px;height:34px;flex:none;fill:none;
stroke:#4F7C34;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dbzdg2-trust b{font-family:var(--f-display);font-weight:700;color:var(--f-navy)}
/* Rundes Siegel am Cover */
.dbzdg2-rund{position:absolute;right:-10%;bottom:-2%;z-index:5;
width:clamp(120px,15vw,166px);aspect-ratio:1;border-radius:50%;
display:grid;place-items:center;text-align:center;
background:var(--f-navy);color:#fff;
font-family:var(--f-display);font-weight:600;
font-size:clamp(.72rem,1.05vw,.86rem);line-height:1.32;
padding:14px;box-shadow:0 18px 34px -18px rgba(22,50,63,.9);
animation:dbzdfWiegen 9s ease-in-out infinite}
/* Cover auf hellem Grund: weicher Schatten statt Gold-Schein */
.page-dbzdg2 .dbzdf-cover{
filter:drop-shadow(0 34px 40px rgba(22,50,63,.28)) drop-shadow(0 8px 14px rgba(22,50,63,.16))}
/* Heller Teich */
.page-dbzdg2 .dbzdf-tipp{color:var(--f-wasser-mittel);opacity:.95}
.page-dbzdg2 .dbzdf-quint{filter:drop-shadow(0 22px 20px rgba(22,50,63,.24))}
.page-dbzdg2 .dbzdf-ring{border-color:rgba(255,255,255,.9)}
.page-dbzdg2 .dbzdf-libelle{opacity:.7}
@media(max-width:980px){
/* aspect-ratio ist keine harte Zusage: passt der Text nicht in die Breite,
waechst der Kasten in die Hoehe und aus dem Kreis wird eine Ellipse — auf
einem 430-px-Bildschirm waren es 105 x 130 px, der Text stiess oben und
unten an den Rand. Deshalb hier Breite UND Hoehe gleich setzen und die
Schrift so waehlen, dass die sechs Zeilen hineinpassen. */
.dbzdg2-rund{right:-6%;bottom:-4%;
width:clamp(142px,35vw,166px);height:clamp(142px,35vw,166px);aspect-ratio:auto;
/* Der Rand ist bewusst grosszuegig: in einen Kreis passt nur das
einbeschriebene Quadrat (rund 71 % des Durchmessers). Mit knappem Rand
ragen die erste und die letzte Zeile seitlich aus der Rundung. */
padding:23px;line-height:1.28}
/* Die Schriftgroesse steht in der Regel weiter unten: die ist
spezifischer (.page-dbzdg2 davor) und wuerde jeden Wert hier
ueberschreiben. */
}
@media(max-width:767px){
.page-dbzdg2 .dbzdg2-hero-text h1{font-size:1.82rem}
/* Vier Marken zu je zwei. Mit Flex brach die Reihe je nach Geraetebreite
erst nach der dritten um und liess „Für Vereine" allein stehen — auf
einem 430 px breiten Bildschirm gut sichtbar, auf 375 px nicht. Ein
festes Zweierraster sieht auf jeder Breite gleich aus. */
.page-dbzdg2 ul.dbzdg2-fuer{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.dbzdg2-fuer li{font-size:.9rem}
}
/* ============ Hero-Anordnung (06.09.2026) ================================
Auf dem Handy stapelte Divi erst die ganze Textspalte und dann das Cover.
Der Bestellknopf stand damit bei 412 px, das Buch begann erst bei 646 —
man wurde also zum Klicken aufgefordert, bevor man das Produkt gesehen
hatte. Deshalb liegt der Hero jetzt in drei Spalten:
1 Text (Überschrift + Vorspann) 2 Cover 3 Aktion (Knopf, Zielgruppen, Stimmen)
Auf dem Handy ergibt die Reihenfolge im Quelltext von allein
Text → Cover → Aktion. Auf dem Desktop legt das Raster unten alles
zurück an seinen Platz: Text oben links, Aktion darunter, Cover rechts
über beide Zeilen. Die Werte sind Divis eigene für 3_5 / 2_5 bei
Rinnenbreite 3 — nachgemessen 624 px, 59,4 px, 396 px bei 1080 px Zeile.
======================================================================== */
@media(min-width:981px){
.dbzdg2-heroraster{
display:grid !important;
grid-template-columns:57.7778% 36.6667%;
column-gap:5.5555%;
grid-template-areas:"text cover" "aktion cover";
/* Das Cover ueberspannt beide Zeilen. Ohne feste Zeilenhoehen verteilt
das Raster seine Mehrhoehe auf beide — der Aktionsblock rutschte
dadurch 23 px nach unten. min-content war der falsche Griff: ein
zeilenuebergreifendes Element speist seine Mindesthoehe gerade in
solche Zeilen ein, der Block sass danach 229 px zu tief. Mit
auto/1fr bekommt Zeile 1 genau den Text und die Mehrhoehe des
Covers landet vollstaendig in Zeile 2. */
grid-template-rows:auto 1fr;
align-items:start}
.dbzdg2-heroraster>.et_pb_column{
width:auto !important;max-width:none !important;
margin:0 !important;float:none !important}
.dbzdg2-heroraster>.heroteil-text {grid-area:text}
.dbzdg2-heroraster>.heroteil-cover {grid-area:cover}
.dbzdg2-heroraster>.heroteil-aktion{grid-area:aktion}
}
@media(max-width:980px){
/* Das Cover darf hier nicht die halbe Seite fuellen, sonst rutscht der
Knopf wieder unter die Falz. Hoehe statt Breite vorgeben, weil das
Cover hochkant ist. */
/* Enge Abstaende, weil oben jeder Pixel zaehlt: Ziel ist, dass
Ueberschrift, Cover UND Knopf zusammen ueber die Falz passen. Auf
430 x 932 liegt die bei etwa 750 px. */
.dbzdg2-heroraster>.et_pb_column:not(:last-child){margin-bottom:16px !important}
/* Der Versatz von 34 px nach oben ist ein Desktop-Kniff (das Cover soll
dort etwas ueber den Text hinausragen). Hier kostet er nur Hoehe. */
.dbzdg2-heroraster .dbzdf-coverwrap{width:auto;display:flex;margin-top:0 !important;
flex-direction:column;align-items:center;gap:12px}
.dbzdg2-heroraster .dbzdf-cover{height:clamp(240px,32vh,285px);width:auto;max-width:70%}
}
/* Tablet: gestapelt wie auf dem Handy, aber mit dem Platz eines grossen
Bildschirms. Ein 185 px hohes Cover wirkte auf 834 px Breite verloren. */
@media(min-width:768px) and (max-width:980px){
.dbzdg2-heroraster .dbzdf-cover{height:clamp(340px,42vh,440px);max-width:52%}
.dbzdg2-heroraster .dbzdg2-rund{font-size:.86rem;max-width:min(460px,72%)}
/* Aus dem runden Siegel wird hier eine Zeile unter dem Cover. Auf einem
schmalen Cover bliebe fuer einen Kreis nur ein Durchmesser, in den der
Satz nicht mehr lesbar hineinpasst — als Zeile steht er ruhig da. */
.dbzdg2-heroraster .dbzdg2-rund{
position:static;width:auto;height:auto;aspect-ratio:auto;
border-radius:999px;padding:10px 18px;max-width:min(340px,88%);
font-size:.82rem;line-height:1.35;animation:none;
box-shadow:0 10px 22px -14px rgba(22,50,63,.75)}
/* Alles im Hero mittig: Cover, Siegel und Knopf stehen ohnehin zentriert,
linksbuendiger Text daneben wirkt versetzt. Gilt nur hier und nur
unterhalb von 981 px — der Desktop bleibt linksbuendig. */
.dbzdg2-heroraster .dbzdg2-hero-text{text-align:center}
/* Beide haben eine max-width (Ueberschrift 512 px, Vorspann 28em). Ohne
automatische Seitenraender bleibt der Kasten links stehen, waehrend der
Text darin mittig sitzt — auf einem 834 px breiten Tablet standen links
83 px und rechts 238 px. */
.dbzdg2-heroraster .dbzdg2-hero-text h1,
.dbzdg2-heroraster .dbzdg2-hero-text .lead{margin-inline:auto}
.dbzdg2-heroraster .dbzdg2-fuer{justify-items:center}
/* Die Stimmen-Zeile ist ein Flex-Paar aus Schild und Text ueber die volle
Breite — justify-content hat dort keinen Spielraum. Zentriert wird
deshalb der Text selbst. */
.dbzdg2-heroraster .dbzdg2-trust{text-align:center}
/* Statt zweier halbvoller Zeilen ein durchlaufender Satz. Der harte
Umbruch (frueher ein ) gilt nur noch auf dem Desktop; hier
trennt ein Mittelpunkt. */
.dbzdg2-heroraster .dbzdg2-trust .teil{display:inline}
.dbzdg2-heroraster .dbzdg2-trust .teil + .teil::before{content:" · "}
/* Auf dem Desktop stehen die Zielgruppen ueber dem Knopf — dort ist Platz.
Auf dem Handy kommt zuerst die Handlung, dann die Einordnung. */
.dbzdg2-hero-aktion{display:flex;flex-direction:column}
.dbzdg2-hero-aktion .cta {order:1;margin-top:0}
.dbzdg2-hero-aktion .dbzdg2-fuer {order:2}
.dbzdg2-hero-aktion .dbzdg2-trust{order:3}
}
/* V2: Sprechblase über Quints Kopf statt darauf.
Vorher bottom:96% — die Blase begann 4 % unterhalb der Szenenoberkante und
überdeckte damit die Augen. Fester Abstand lässt Platz für die Spitze. */
.page-dbzdg2 .dbzdf-blase{bottom:calc(100% + 14px)}
.page-dbzdg2 .dbzdf-blase.sichtbar{translate:-50% -4px}
/* V2: zweifarbige Überschrift — zweiter Satz als eigener Block in Grün,
gleiche Aufteilung wie die Hero-Headline. */
.page-dbzdg2 .dbzdg2-zweiton .zwei{display:block;color:#4F7C34;margin-top:.22em}
/* ---------- V2: Quints Atemzug (portiert aus dem Neustart-Projekt) -------
Vier Takte, Einatmen 4 s, Ausatmen 6 s. Der laengere Ausatem ist der Punkt
der Uebung — deshalb steuert die Transition-Dauer die Zeit, nicht ein Timer. */
.page-dbzdg2 .dbzdg-atem{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
padding:clamp(26px,3.4vw,40px) clamp(20px,2.6vw,32px);position:relative;
background:rgba(255,255,255,.72);border:1px solid rgba(30,75,68,.14);
border-radius:var(--f-radius);box-shadow:var(--f-schatten);backdrop-filter:blur(2px)}
.page-dbzdg2 .dbzdg-atem::before{content:none}
.atemring{position:relative;width:clamp(215px,30vw,305px);aspect-ratio:1;
display:grid;place-items:center;margin:0 auto}
.atempuls{position:absolute;inset:0;border-radius:50%;
background:rgba(127,166,91,.16);border:2px solid rgba(91,127,63,.40);
transform:scale(.62);transition:transform 4s cubic-bezier(.4,0,.5,1)}
.atempuls.aus{transform:scale(1);transition-duration:6s}
.atemring img{position:relative;z-index:2;width:88%;height:auto;
filter:drop-shadow(0 16px 18px rgba(22,50,63,.20))}
.atemwort{font-family:var(--f-display);font-weight:700;
font-size:clamp(1.15rem,2vw,1.5rem);color:var(--f-gruen-tief);
min-height:1.4em;margin:16px 0 0}
.atemsatz{font-size:clamp(.94rem,1.4vw,1.05rem);color:var(--f-tinte);
min-height:2.6em;margin:6px 0 0;max-width:26em}
.atempunkte{display:flex;gap:8px;justify-content:center;margin-top:12px}
.atempunkte i{width:9px;height:9px;border-radius:50%;background:rgba(91,127,63,.24);
transition:background .3s ease,transform .3s ease}
.atempunkte i.an{background:var(--f-gruen-tief);transform:scale(1.25)}
.atemknopf{margin-top:16px;font-family:var(--f-display);font-weight:700;font-size:1rem;
color:#fff;background:linear-gradient(150deg,#4F7C34,#375A25);
border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:12px 26px;cursor:pointer;
box-shadow:0 14px 26px -16px rgba(30,75,68,.95);
transition:transform .18s ease,box-shadow .18s ease}
.atemknopf:hover{transform:translateY(-2px);box-shadow:0 20px 32px -14px rgba(30,75,68,1)}
.atemknopf:focus-visible{outline:3px solid var(--f-gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
.atempuls{transition:none}
}
/* ---------- V2: echtes Logo in Kopf- und Fußzeile ------------------------
Der Theme-Builder-Header und -Footer sind global (F, G, H teilen sie).
Statt sie anzufassen, ersetze ich die Wortmarke hier nur optisch — der
Linktext bleibt für Screenreader erhalten. */
.page-dbzdg2 .dbzd-header a.dbzd-logo{
display:block;width:clamp(178px,17vw,226px);height:clamp(70px,6.7vw,89px);
font-size:0;line-height:0;
background:url("/wp-content/uploads/2026/08/der-beste-zug-danach-logo.png") no-repeat left center/contain}
.page-dbzdg2 .dbzd-header a.dbzd-logo small{display:none}
/* Fußzeile steht auf Nachtblau — dort die weiße Fassung */
/* Divi setzt im Footer eine eigene h4-Groesse — der Text stand sonst
sichtbar ueber dem Logo. Bildersatz statt blossem font-size:0. */
.page-dbzdg2 .dbzd-footer .et_pb_column:first-child h4{
display:block;width:min(250px,72%);height:98px;margin-bottom:14px;
font-size:0 !important;line-height:0 !important;color:transparent !important;
text-indent:-9999px;overflow:hidden;white-space:nowrap;
background:url("/wp-content/uploads/2026/08/der-beste-zug-danach-logo-weiss.png") no-repeat left center/contain}
@media(max-width:767px){
.page-dbzdg2 .dbzd-footer .et_pb_column:first-child h4{height:80px}
}
/* Kopfzeile bekommt ab dem Hero einen Grund — transparent bleibt sie nur dort,
wo der helle Hero dahinterliegt. */
.page-dbzdg2.dbzdg2-kopf-fest .dbzd-header.et_pb_section{
background:rgba(250,243,227,.94) !important;
box-shadow:0 8px 24px -18px rgba(22,50,63,.8);
backdrop-filter:blur(6px)}
.page-dbzdg2 .dbzd-header.et_pb_section{transition:background .25s ease,box-shadow .25s ease}
/* ---------- V2: Nutzen-Karten mit Linien-Icons ---------------------------
Ersetzt die Emoji — gleiche Sprache wie die Icon-Reihe im Hero. */
.page-dbzdg2 .dbzdf-nutzen .ikon.linie{
width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
background:linear-gradient(150deg,#EAF2E0,#D8E7CC);border:1px solid rgba(91,127,63,.3);
margin-bottom:12px}
.page-dbzdg2 .dbzdf-nutzen .ikon.linie svg{
width:25px;height:25px;fill:none;stroke:#4F7C34;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.page-dbzdg2 .dbzdf-nutzen h4{line-height:1.28}
/* „Und dazu im Buch" steht jetzt allein und darf die volle Breite nutzen */
.page-dbzdg2 .dbzdf-fakten.breit{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.page-dbzdg2 .dbzdf-fakten.breit h3{grid-column:1/-1;margin-bottom:4px}
@media(max-width:767px){
.page-dbzdg2 .dbzdf-fakten.breit{grid-template-columns:1fr}
}
/* ---------- V2: Portraets bei den Fürsprechern -------------------------- */
.dbzdg2-person{display:flex;align-items:center;gap:14px;margin:16px 0 2px}
.dbzdg2-portraet{flex:none;width:56px;height:56px;border-radius:50%;
display:grid;place-items:center;position:relative;
background:linear-gradient(150deg,#DCE9E2,#B9D2C6);
border:2px solid rgba(255,255,255,.5);
box-shadow:0 8px 18px -10px rgba(22,50,63,.8)}
.dbzdg2-portraet::after{content:attr(data-init);font-family:var(--f-display);font-weight:700;
font-size:1.05rem;color:#2C6F66;letter-spacing:.02em}
.dbzdg2-wer{display:flex;flex-direction:column;line-height:1.3}
.dbzdg2-wer b{font-family:var(--f-display);font-weight:700;color:var(--f-gold-blass);font-size:1rem}
.dbzdg2-wer em{font-style:normal;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
color:rgba(226,240,233,.82);margin-top:2px}
/* Echte Aquarellportraets (28.08.2026). Das Bild fuellt den Kreis, die
Initialen aus ::after entfallen. Der Name steht direkt daneben im Text —
deshalb bleibt alt leer und der Kreis aria-hidden: sonst lesen
Screenreader denselben Namen zweimal vor.
Der dunkle Grund entspricht dem Aquarellhintergrund und verhindert ein
helles Aufblitzen, solange das Bild noch laedt. */
.dbzdg2-portraet.foto{overflow:hidden;background:#22384F;padding:0}
.dbzdg2-portraet.foto::after{content:none}
.dbzdg2-portraet.foto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
/* ---------- V2: Leserstimmen (noch unbefüllt) --------------------------- */
.dbzdg2-rezension{background:#fff;border-radius:var(--f-radius);padding:24px 24px 22px;height:100%;
box-shadow:var(--f-schatten);border:1px solid rgba(30,75,68,.1);position:relative}
.dbzdg2-rezension .kopf{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.dbzdg2-rezension .dbzdg2-portraet{width:52px;height:52px;border-color:rgba(30,75,68,.12)}
.dbzdg2-sterne{font-size:1.15rem;letter-spacing:.12em;color:var(--f-gold)}
.dbzdg2-rezension .zitat{font-size:.96rem;color:var(--f-tinte);margin:0;line-height:1.6}
.dbzdg2-rezension .wer{font-family:var(--f-display);font-weight:700;color:var(--f-petrol);
font-size:.95rem;margin:14px 0 0}
/* Unbefüllter Zustand: als Platzhalter erkennbar, keine erfundene Bewertung.
Sobald echte Stimmen mit Freigabe vorliegen, entfällt die Klasse „offen". */
.dbzdg2-rezension.offen{border:2px dashed rgba(30,75,68,.28);background:rgba(255,255,255,.55);
box-shadow:none}
.dbzdg2-rezension.offen .dbzdg2-sterne{color:rgba(30,75,68,.34)}
/* Die ungefüllten Sterne sind reine Form ohne Aussage (aria-hidden) —
sie dürfen und sollen zurücktreten, bis eine echte Bewertung vorliegt. */
.dbzdg2-rezension.offen .zitat{font-style:italic;color:#5F726D}
.dbzdg2-rezension.offen .wer{color:#5F726D}
.dbzdg2-rezension .marke{position:absolute;top:-11px;left:20px;
font-family:var(--f-display);font-weight:700;font-size:.68rem;letter-spacing:.09em;
text-transform:uppercase;color:#3E4F46;background:#E4DCC8;padding:4px 12px;border-radius:999px;
border:1px solid rgba(30,75,68,.2)}
.dbzdg2-rezension:not(.offen) .marke{display:none}
.dbzdg2-hinweis{background:rgba(30,75,68,.06);border:1px dashed rgba(30,75,68,.3);
border-radius:14px;padding:14px 18px;font-size:.84rem;color:#3E5160;line-height:1.55}
.dbzdg2-hinweis code{background:rgba(30,75,68,.1);padding:1px 6px;border-radius:5px;font-size:.92em}
/* Der Arbeitshinweis gehört nicht auf die Besucherseite — WordPress setzt
bei angemeldeten Nutzern die Body-Klasse „logged-in". */
.dbzdg2-hinweis{display:none}
body.logged-in .dbzdg2-hinweis{display:block}
/* ---------- V2: Nutzen-Karten als echtes Raster -------------------------
Vorher lagen sie in drei Divi-Spalten — dort richtet sich die Höhe nur
innerhalb einer Spalte aus. grid-auto-rows:1fr zieht alle sechs gleich. */
.dbzdg2-nutzenraster{display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(18px,2.2vw,28px);grid-auto-rows:1fr}
.dbzdg2-nutzenraster .dbzdf-nutzen{height:100%;display:flex;flex-direction:column}
/* Text bleibt direkt unter der Überschrift — die gleiche Höhe kommt vom Raster,
nicht davon, den Absatz nach unten zu druecken. */
@media(max-width:980px){.dbzdg2-nutzenraster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dbzdg2-nutzenraster{grid-template-columns:1fr;grid-auto-rows:auto}}
/* Vier kurze Karten stehen in einer Zeile statt drei plus einer Waise. */
.dbzdg2-nutzenraster.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.dbzdg2-nutzenraster.vier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dbzdg2-nutzenraster.vier{grid-template-columns:1fr;grid-auto-rows:auto}}
/* Grüne Karte: Begriff auf die erste Zeile, Erklärung darunter */
.page-dbzdg2 .dbzdf-fakten.breit p b{display:block;margin-bottom:2px}
.page-dbzdg2 .dbzdf-fakten.breit p span{display:block;color:#CFE0DA;font-size:.93rem;line-height:1.5}
.page-dbzdg2 .dbzdf-fakten.breit p{margin-bottom:16px}
/* ---------- V2: Quint als Avatar, solange kein Foto vorliegt ------------- */
.dbzdg2-portraet.quint{overflow:hidden;background:linear-gradient(150deg,#EAF2E0,#CFE3C6)}
.dbzdg2-portraet.quint::after{content:none}
.dbzdg2-portraet.quint img{width:118%;height:auto;margin-top:14%;display:block}
/* Leserstimmen als Raster — gleiche Hoehe wie bei den Nutzen-Karten */
.dbzdg2-rezensionsraster{display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(18px,2.2vw,28px);grid-auto-rows:1fr}
.dbzdg2-rezensionsraster .dbzdg2-rezension{height:100%}
@media(max-width:980px){.dbzdg2-rezensionsraster{grid-template-columns:1fr;grid-auto-rows:auto}}
/* Eine echte Stimme ohne Sternebewertung: der Kopf traegt dann nur das Bild */
.dbzdg2-rezension:not(.offen) .kopf{margin-bottom:16px}
/* Eine echte Stimme mit langem Text liegt ueber der ganzen Zeile: in einem
Drittel der Breite waere ihre Karte dreimal so hoch wie die daneben. Das ist
eine Frage der Textlaenge, keine Rangfolge — sobald mehrere echte Stimmen
vorliegen, faellt die Klasse weg. */
.dbzdg2-rezension.breit{grid-column:1/-1}
.dbzdg2-rezensionsraster:has(> .breit){grid-auto-rows:auto}
/* ---------- V2: Kartendeck (aus dem Neustart-Projekt portiert) -----------
Die zwanzig gedruckten Affirmationskarten als Deck: Rückseite farbig mit
Vignette, Vorderseite Papier mit dem Satz. Antippen dreht, „Neu mischen"
zieht drei andere. */
.dbzdg2-deck{background:linear-gradient(150deg,var(--f-petrol),var(--f-wasser));
border-radius:22px;padding:clamp(28px,4vw,46px) clamp(20px,3vw,40px);
text-align:center;box-shadow:var(--f-schatten-tief);position:relative;overflow:hidden}
.dbzdg2-deck h3{color:#fff;margin:0}
.dbzdg2-deck .unter{color:#CFE0DA;max-width:40ch;margin:8px auto 0;font-size:1rem}
/* Der Vergleichspreis muss durchgestrichen sein — sonst stehen zwei Preise
nebeneinander und niemand weiss, welcher gilt. Die Set-Karte der Startseite
(.dbzdf-setcard .preis .alt) und der Konfigurator machen das laengst so,
in diesem Kasten fehlte es. Die Farbe kommt weiter aus dem Kontrastblock
weiter unten. */
.dbzdg2-deck .unter .alt{
text-decoration:line-through;text-decoration-thickness:1px;
font-weight:600;margin-right:4px}
.dbzdg2-deckreihe{display:flex;justify-content:center;flex-wrap:wrap;
gap:clamp(12px,2vw,22px);margin-top:clamp(20px,3vw,30px);perspective:1100px}
.dbzdg2-karte3d{width:clamp(132px,17vw,178px);aspect-ratio:74/105;position:relative;
transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1);
background:none;border:0;padding:0;cursor:pointer}
.dbzdg2-karte3d.um{transform:rotateY(180deg)}
.dbzdg2-karte3d:focus-visible{outline:3px solid var(--f-gold);outline-offset:5px;border-radius:14px}
.dbzdg2-karte3d .seite{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
padding:16px 14px;box-shadow:0 16px 30px -16px rgba(0,0,0,.65);overflow:hidden}
.dbzdg2-karte3d .rueck{color:#F6F9F0}
.dbzdg2-karte3d .rueck .vignette{width:46px;color:#F6F9F0;opacity:.9}
/* Vorderseite nach dem Vorbild der gedruckten Karte: doppelte Haarlinie mit
gekappten Ecken, Vignette oben, meditierender Quint unten. */
.dbzdg2-karte3d .vorn{transform:rotateY(180deg);background:#FBF4E6;color:var(--f-navy);
text-align:center;justify-content:flex-start;gap:0;padding:14px 12px 16px}
.dbzdg2-karte3d .vorn .rahmen{position:absolute;inset:9px;border:1px solid rgba(91,127,63,.55);
border-radius:4px;pointer-events:none}
.dbzdg2-karte3d .vorn .rahmen::after{content:"";position:absolute;inset:3px;
border:1px solid rgba(91,127,63,.3);border-radius:3px}
.dbzdg2-karte3d .vorn .vig{position:relative;z-index:2;display:block;width:38px;
margin:-4px auto 0;color:#5B7F3F;background:#FBF4E6;padding:0 6px}
.dbzdg2-karte3d .vorn .vig svg{width:100%;height:auto}
.dbzdg2-karte3d .vorn strong{position:relative;z-index:2;font-family:var(--f-display);
font-weight:600;font-size:.93rem;line-height:1.28;margin:auto 0 0;padding:0 4px}
.dbzdg2-karte3d .vorn em{position:relative;z-index:2;font-style:normal;font-size:.68rem;
color:#4F6058;line-height:1.35;margin:5px 0 auto;padding:0 4px}
.dbzdg2-karte3d .vorn .froschlein{position:relative;z-index:2;width:44px;height:auto;
margin:0 auto;opacity:.9}
.dbzdg2-karte3d .band{position:absolute;left:0;right:0;bottom:0;height:7px}
.dbzdg2-deck .hinweis{font-family:var(--f-hand);font-size:1.15rem;color:var(--f-gold-blass);
margin:18px 0 0}
.dbzdg2-mischen{margin-top:14px;font-family:var(--f-display);font-weight:700;font-size:.95rem;
color:var(--f-petrol);background:#F6F9F0;border:1px solid rgba(255,255,255,.5);
border-radius:999px;padding:11px 24px;cursor:pointer;
transition:transform .18s ease,background .18s ease}
.dbzdg2-mischen:hover{transform:translateY(-2px);background:#fff}
.dbzdg2-mischen:focus-visible{outline:3px solid var(--f-gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.dbzdg2-karte3d{transition:none}}
/* ---------- V2: Fürsprecher als Raster (jetzt sechs Stimmen) ------------ */
.dbzdg2-stimmenraster{display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(18px,2.4vw,28px);grid-auto-rows:1fr}
/* grid-auto-rows:1fr zieht auch die zweite Zeile auf die Hoehe der ersten —
sonst waere die Karte mit dem laengsten Zitat sichtbar groesser als die
anderen drei, und genau das soll hier niemand sein. */
.dbzdg2-stimmenraster .dbzdf-stimme{height:100%;margin:0}
.dbzdg2-stimmenraster .rolle{margin-top:10px}
/* Einspaltig waere die gemeinsame Hoehe nur Leerraum. */
@media(max-width:900px){.dbzdg2-stimmenraster{grid-template-columns:1fr;grid-auto-rows:auto}}
/* Bleibt in der letzten Zeile eine einzelne Karte uebrig (drei Stimmen in zwei
Spalten), richtet sich deren Hoehe nach dem Inhalt — 1fr wuerde sie auf die
volle Zeilenhoehe aufblasen. Bei vier Karten greift die Regel nicht. */
.dbzdg2-stimmenraster:has(> :last-child:nth-child(odd)){grid-auto-rows:auto}
/* Stimme ohne freigegebenes Zitat — sichtbar als Platzhalter, damit sie
nicht versehentlich als echte Aussage gelesen oder veröffentlicht wird. */
.dbzdg2-zitat-offen{border-style:dashed;border-width:2px;border-color:rgba(255,255,255,.34);
background:rgba(255,255,255,.04)}
.dbzdg2-zitat-offen .zitat{font-style:italic;opacity:.72}
.dbzdg2-zitat-offen .zitat::before{opacity:.5}
.dbzdg2-zitat-offen .tag{background:rgba(255,255,255,.2);color:#fff}
/* ---------- V2: „Warum es dieses Buch gibt" ----------------------------
Vorher stand die Faktenliste in derselben Spalte wie der Fließtext —
dadurch war die Textspalte doppelt so hoch wie das Bild. Die Fakten
laufen jetzt als eigenes Band über die volle Breite darunter. */
.dbzdg2-storyfakten{display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(14px,1.8vw,22px);margin-top:clamp(20px,3vw,32px)}
.dbzdg2-fakt{background:#fff;border-radius:16px;padding:20px 22px;
border:1px solid rgba(30,75,68,.1);box-shadow:var(--f-schatten);
position:relative;padding-left:56px}
.dbzdg2-fakt::before{content:"🐸";position:absolute;left:20px;top:19px;font-size:1.15rem}
.dbzdg2-fakt.breit{grid-column:1/-1}
.dbzdg2-fakt b{display:block;font-family:var(--f-display);font-weight:700;
color:var(--f-petrol);font-size:1rem;line-height:1.3;margin-bottom:3px}
.dbzdg2-fakt span{display:block;font-size:.93rem;color:var(--f-tinte);opacity:.88;line-height:1.5}
/* Bild und Text nebeneinander gleich hoch halten */
.page-dbzdg2 .dbzdf-story-img .et_pb_image{height:100%;display:flex}
.page-dbzdg2 .dbzdf-story-img .et_pb_image_wrap{height:100%;width:100%}
.page-dbzdg2 .dbzdf-story-img img{height:100%;object-fit:cover}
@media(max-width:767px){
.dbzdg2-storyfakten{grid-template-columns:1fr}
.page-dbzdg2 .dbzdf-story-img img{height:auto}
}
/* ---------- V2: Partnerkacheln mit echten Logos ------------------------
Beide Wortmarken sind dunkel (Chessence zu 100 %) — auf dem Petrolgrund
waeren sie unsichtbar. Deshalb weisse Kacheln. Logos liegen lokal im
Theme, nicht per Hotlink: sonst laedt jeder Seitenaufruf von fremden
Servern (DSGVO) und ein Relaunch dort bricht uns die Seite. */
.dbzdg2-partner{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.dbzdg2-partner-kachel{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
background:#fff;border-radius:16px;padding:22px 24px;text-decoration:none;
border:1px solid rgba(255,255,255,.5);box-shadow:0 14px 30px -18px rgba(0,0,0,.55);
transition:transform .18s ease,box-shadow .18s ease}
.dbzdg2-partner-kachel:hover{transform:translateY(-3px);
box-shadow:0 22px 38px -18px rgba(0,0,0,.7)}
.dbzdg2-partner-kachel:focus-visible{outline:3px solid var(--f-gold);outline-offset:3px}
/* Beide Logos auf dieselbe Kastenhoehe bringen. Vorher war nur die Breite
begrenzt — das gestapelte chessemy-Logo skalierte dadurch viel groesser
als die einzeilige Chessence-Wortmarke. */
.dbzdg2-partner-kachel .logo{display:flex;align-items:center;height:58px;width:100%}
.dbzdg2-partner-kachel img{width:auto;height:auto;max-height:100%;max-width:100%;
object-fit:contain;object-position:left center;display:block}
/* chessemy ist zweizeilig gesetzt und wirkt bei gleicher Hoehe schwerer */
.dbzdg2-partner-kachel img[src*="chessemy"]{max-height:88%}
/* Der Rabatt-Hinweis sitzt in beiden Kacheln auf gleicher Hoehe */
.dbzdg2-partner-kachel .code{margin-top:auto}
.dbzdg2-partner-kachel .wer{font-size:.9rem;color:#3E5160;line-height:1.5}
.dbzdg2-partner-kachel .code{font-family:var(--f-display);font-weight:700;font-size:.92rem;
color:var(--f-petrol);background:#EAF2E0;border-radius:999px;padding:5px 14px;
border:1px solid rgba(91,127,63,.3)}
.dbzdg2-partner-kachel .code b{color:#3F6529;letter-spacing:.06em}
@media(max-width:680px){.dbzdg2-partner{grid-template-columns:1fr}}
/* ---------- V2: einheitlicher Sektionsrhythmus --------------------------
Vorher liefen drei Abstaende nebeneinander: 158 px (Anschluss), 220 px
(normal) und 268 px (Sektion mit Welle). Jetzt gibt es einen Wert.
Der Kniff bei den Wellen: die Welle liegt IM oberen Innenabstand und
fuellt ihn optisch aus. Wuerde man ueberall denselben padding-top setzen,
saehen Wellen-Sektionen enger aus als der Rest. Deshalb bekommen sie
Grundluft PLUS Wellenhoehe — dann ist der freie Raum ueber dem Inhalt
ueberall gleich gross. */
.page-dbzdg2{--f-luft:clamp(52px,5.8vw,80px);--f-welle-h:clamp(44px,5.5vw,86px)}
.page-dbzdg2 .dbzdf.et_pb_section{
padding-top:var(--f-luft);
padding-bottom:var(--f-luft)}
.page-dbzdg2 .dbzdf.dbzdf-hatwelle.et_pb_section{
padding-top:calc(var(--f-luft) + var(--f-welle-h))}
.page-dbzdg2 .dbzdf-welle{height:var(--f-welle-h)}
/* Anschluss-Sektionen setzen dieselbe Flaeche fort wie die Sektion darueber
und lesen sich als ein Block — halbe Luft, aber aus demselben Wert. */
.page-dbzdg2 .dbzdf.dbzdf-anschluss.et_pb_section{
padding-top:calc(var(--f-luft) * .5)}
/* Der Hero braucht unten Platz fuer den Teich — das ist Funktion, kein Rhythmus. */
.page-dbzdg2 .dbzdf-hero.et_pb_section{
padding-bottom:clamp(230px,27vw,360px) !important}
/* ---------- V2: Abschluss — Ausblick + Bestellung ----------------------
Der Nachthimmel war das Gegenstueck zum dunklen Hero. Seit der Hero hell
ist, schloss er keinen Kreis mehr. Jetzt endet die Seite im Abendlicht:
heller Morgen oben, Teich und Tiefe in der Mitte, warmer Abend zum Schluss. */
.dbzdg2-abend.et_pb_section{
background:linear-gradient(180deg,var(--f-creme-hell) 0%,#F7EBD8 55%,#F1DFC4 100%) !important}
.dbzdg2-abend h2,.dbzdg2-abend h3{color:var(--f-navy)}
.dbzdg2-abend p,.dbzdg2-abend li{color:var(--f-tinte)}
/* Ausblick-Banner: Bild traegt die Sektion, Text steht im freien Himmel rechts */
.dbzdg2-ausblick{position:relative;margin:0;border-radius:var(--f-radius);overflow:hidden;
box-shadow:var(--f-schatten-tief)}
.dbzdg2-ausblick img{display:block;width:100%;height:auto}
.dbzdg2-ausblick figcaption{position:absolute;inset:0;display:flex;flex-direction:column;
justify-content:center;align-items:flex-end;text-align:right;
padding:clamp(20px,4vw,56px) clamp(20px,4vw,60px) clamp(20px,4vw,56px) 45%}
.dbzdg2-ausblick figcaption blockquote{margin:0;padding:0;border:0;
/* Divi gibt blockquote einen linken Balken — der stuende hier frei im Bild */
color:var(--f-navy);
font-family:var(--f-display);font-weight:700;
font-size:clamp(1.15rem,2.6vw,2.15rem);line-height:1.2;text-wrap:balance}
.dbzdg2-ausblick figcaption .wer{margin:clamp(10px,1.4vw,18px) 0 0;
font-family:var(--f-hand);color:#47702E;
font-size:clamp(.95rem,1.7vw,1.35rem);line-height:1.3}
@media(max-width:767px){
/* Schmal wird der Text ueber dem Bild unlesbar — dann darunter setzen. */
.dbzdg2-ausblick figcaption{position:static;padding:18px 4px 0;text-align:center;
align-items:center}
.dbzdg2-ausblick{box-shadow:none;overflow:visible}
.dbzdg2-ausblick img{border-radius:var(--f-radius);box-shadow:var(--f-schatten-tief)}
}
/* Bestell-Leiste */
.dbzdg2-bestellleiste{display:grid;grid-template-columns:auto 1fr auto;
gap:clamp(18px,3vw,40px);align-items:center;
background:#fff;border-radius:22px;padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,40px);
box-shadow:var(--f-schatten-tief);border:1px solid rgba(30,75,68,.1)}
.dbzdg2-bestellleiste .cover img{width:clamp(96px,11vw,150px);height:auto;display:block;
filter:drop-shadow(0 16px 22px rgba(22,50,63,.28))}
.dbzdg2-bestellleiste h3{margin:0;color:var(--f-navy);font-size:clamp(1.2rem,2.2vw,1.6rem)}
.dbzdg2-bestellleiste .unter{margin:2px 0 12px;color:#3E5160;font-size:.98rem}
.dbzdg2-bestellleiste .haken{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.dbzdg2-bestellleiste .haken li{display:flex;align-items:flex-start;gap:9px;
font-size:.95rem;color:var(--f-tinte);line-height:1.45}
.dbzdg2-bestellleiste .haken svg{width:19px;height:19px;flex:none;margin-top:.1em;fill:none;
stroke:#4F7C34;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dbzdg2-bestellleiste .kauf{text-align:center}
.dbzdg2-bestellleiste .preis{font-family:var(--f-display);font-weight:800;
font-size:clamp(1.7rem,3vw,2.3rem);color:var(--f-navy);line-height:1}
.dbzdg2-bestellleiste .mwst{font-size:.78rem;color:#5F726D;margin:4px 0 14px}
.dbzdg2-bestellleiste .trust{grid-column:1/-1;display:flex;flex-wrap:wrap;
gap:12px clamp(18px,3vw,36px);justify-content:center;
border-top:1px solid rgba(30,75,68,.12);margin-top:clamp(14px,2vw,20px);
padding-top:clamp(14px,2vw,20px)}
.dbzdg2-bestellleiste .trust span{display:inline-flex;align-items:center;gap:8px;
font-size:.88rem;color:#3E5160}
.dbzdg2-bestellleiste .trust svg{width:20px;height:20px;flex:none;fill:none;
stroke:#4F7C34;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
.dbzdg2-bestellleiste{grid-template-columns:auto 1fr;text-align:left}
.dbzdg2-bestellleiste .kauf{grid-column:1/-1;text-align:center}
}
@media(max-width:560px){
.dbzdg2-bestellleiste{grid-template-columns:1fr;justify-items:center;text-align:center}
.dbzdg2-bestellleiste .haken li{text-align:left}
}
/* Weicher Schleier hinter dem Bannertext. Ohne ihn faellt die Unterzeile in
die goldenen Huegel und verliert den Kontrast — der Himmel allein traegt
nur die Ueberschrift. */
.dbzdg2-ausblick figcaption::before{content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(255,250,240,0) 34%,rgba(255,250,240,.72) 62%,rgba(255,250,240,.92) 100%);
pointer-events:none}
.dbzdg2-ausblick figcaption>*{position:relative}
/* Der Schlusssatz traegt die Pointe — kraeftiger und im Markengruen.
Etwas dunkler als das ueblich verwendete #4F7C34, weil er bei 17 px auf
dem hellen Himmel sonst nur 4,4:1 erreicht und damit knapp unter AA liegt. */
.dbzdg2-ausblick figcaption p{margin-top:clamp(6px,.9vw,14px);color:#47702E;font-family:var(--f-display);
font-weight:700;font-size:clamp(1.15rem,2.5vw,2.05rem);line-height:1.18}
/* Die Mut-Karte stammt aus der Nachtfassung: weisse Flaeche mit 6 % Deckkraft
und blassgoldene Schrift. Auf dem hellen Abendgrund war beides unsichtbar. */
.dbzdg2-abend .dbzdf-mut{background:#fff;border:1px solid rgba(30,75,68,.12);
box-shadow:var(--f-schatten);backdrop-filter:none}
.dbzdg2-abend .dbzdf-mut h2{color:var(--f-navy)}
.dbzdg2-abend .dbzdf-mut .figur{color:var(--f-gold-dunkel)}
.dbzdg2-abend .dbzdf-mut .wer{color:#5F726D}
.dbzdg2-abend .dbzdf-finale-illu{border-color:rgba(30,75,68,.12);
box-shadow:var(--f-schatten-tief)}
@media(max-width:767px){
.dbzdg2-ausblick figcaption::before{content:none}
}
/* Mutband steht jetzt allein — die Widmungskarte daneben ist entfallen. */
.dbzdg2-abend .dbzdf-mut{max-width:44rem;margin-inline:auto}
/* ---------- V2: Mechanismus-Karten gleich hoch -------------------------
Wie bei den Nutzen-Karten: in Divi-Spalten richtet sich die Hoehe nur
innerhalb einer Spalte aus, nie ueber alle vier. */
.dbzdg2-schrittraster{display:grid;grid-template-columns:repeat(4,1fr);
gap:clamp(16px,2vw,26px);grid-auto-rows:1fr}
.dbzdg2-schrittraster .dbzdf-schritt{height:100%}
@media(max-width:980px){.dbzdg2-schrittraster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dbzdg2-schrittraster{grid-template-columns:1fr;grid-auto-rows:auto}}
.dbzdg2-schrittraster.drei{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.dbzdg2-schrittraster.drei{grid-template-columns:1fr}}
/* Zwei Karten sollen die Zeile teilen, nicht in einem Vierer-Raster links kleben. */
.dbzdg2-schrittraster.zwei{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.dbzdg2-schrittraster.zwei{grid-template-columns:1fr;grid-auto-rows:auto}}
/* Mehr Luft vor dem Kernsatz — er soll als eigener Moment stehen,
nicht als Bildunterschrift der Karten darueber. */
.page-dbzdg2 .dbzdf-kernsatz{margin-top:clamp(26px,4vw,58px)}
/* ---------- V2: Trittsteine deutlicher in Bewegung ---------------------
Sie sollen wie Seerosenblaetter auf Wasser wippen. Die geerbte Animation
war mit 5 px Hub und 0,8 Grad kaum wahrnehmbar. Jetzt groesserer Hub,
mehr Neigung und ein mitatmender Schatten — versetzt, damit die drei
nicht im Gleichschritt laufen. */
@keyframes dbzdgWippen{
0%,100%{transform:translateY(0) rotate(-1.8deg) scale(1);
box-shadow:0 10px 20px -14px rgba(30,75,68,.85)}
30% {transform:translateY(-13px) rotate(1.4deg) scale(1.025);
box-shadow:0 22px 30px -16px rgba(30,75,68,.75)}
65% {transform:translateY(-4px) rotate(2.2deg) scale(1.01);
box-shadow:0 15px 24px -15px rgba(30,75,68,.8)}
}
.page-dbzdg2 .dbzdf-steine span{
animation:dbzdgWippen 4.6s ease-in-out infinite;
will-change:transform}
.page-dbzdg2 .dbzdf-steine span:nth-child(2){animation-delay:-1.5s;animation-duration:5.2s}
.page-dbzdg2 .dbzdf-steine span:nth-child(3){animation-delay:-3.1s;animation-duration:4.9s}
/* Antippen laesst den Stein kurz einsinken — wie ein Tritt aufs Blatt */
.page-dbzdg2 .dbzdf-steine span:active{transform:translateY(3px) scale(.97)}
/* ---------- V2: Konfigurator-Zeilen sauber ausrichten -------------------
Vorher lag die Beschriftung als nackter Textknoten zwischen Kaestchen und
Preis. Sobald sie zweizeilig wurde, rutschte der Preis mit in die naechste
Zeile — daher das unruhige Bild. Jetzt drei feste Spalten: Kaestchen,
Beschriftung (darf umbrechen), Preis (bleibt rechts oben stehen). */
.page-dbzdg2 .dbzdf-tasche label{display:grid;grid-template-columns:auto 1fr auto;
align-items:start;column-gap:11px;row-gap:0}
.page-dbzdg2 .dbzdf-tasche label input{margin-top:.2em}
.page-dbzdg2 .dbzdf-tasche label .was{min-width:0;line-height:1.45}
.page-dbzdg2 .dbzdf-tasche label b{margin-left:0;padding-left:14px;white-space:nowrap;
line-height:1.45}
/* ---------- V2: randloser Ausblick als Schluss-Sektion -------------------
Das Bild laeuft von Kante zu Kante und braucht deshalb keinen Rahmen und
keine Ecken mehr. Oben blendet es in den Ton der Sektion darueber, damit
die Kante nicht als Bruch gelesen wird. */
.dbzdg2-schlussbild-sektion.et_pb_section{padding:0 !important;overflow:hidden}
.dbzdg2-vollbreit{width:100% !important;max-width:none !important;padding:0 !important}
.dbzdg2-vollbreit .et_pb_column{padding:0 !important;margin:0 !important;width:100% !important}
.dbzdg2-schlussbild-sektion .dbzdg2-ausblick{border-radius:0;box-shadow:none;margin:0}
.dbzdg2-schlussbild-sektion .dbzdg2-ausblick img{width:100%;height:auto;display:block}
/* Farbuebergang: die Sektion darueber endet auf #F1DFC4 */
.dbzdg2-schlussbild-sektion .dbzdg2-ausblick::before{content:"";position:absolute;
left:0;right:0;top:0;height:22%;z-index:2;pointer-events:none;
background:linear-gradient(180deg,#F1DFC4 0%,rgba(241,223,196,.72) 38%,rgba(241,223,196,0) 100%)}
.dbzdg2-schlussbild-sektion .dbzdg2-ausblick figcaption{z-index:3}
@media(max-width:767px){
.dbzdg2-schlussbild-sektion .dbzdg2-ausblick img{border-radius:0;box-shadow:none}
.dbzdg2-schlussbild-sektion .dbzdg2-ausblick figcaption{padding:18px 6vw 26px}
}
/* Die Trittsteine schliessen jetzt die Abend-Sektion ab — Luft darunter,
damit sie nicht auf der Bildkante sitzen. */
.page-dbzdg2 .dbzdg2-abend .dbzdf-steine{margin-top:clamp(20px,3vw,38px)}
.page-dbzdg2 .dbzdg2-abend.et_pb_section{padding-bottom:clamp(46px,5.2vw,72px)}
/* =====================================================================
V2 · Mobile Optimierung
---------------------------------------------------------------------
Ausgangslage: Divi gibt Zeilen 80 % Breite, dazu kam aus dem F-Design
nochmal 5vw Innenabstand je Seite. Auf 375 px blieben davon 263 px
Inhalt übrig — knapp 70 % des Bildschirms. Auf kleinen Geräten ist das
verschenkter Platz, gerade bei Karten mit Fließtext.
===================================================================== */
@media(max-width:767px){
.page-dbzdg2 .dbzdf .et_pb_row{
width:92% !important;max-width:92% !important;
padding-left:0 !important;padding-right:0 !important}
/* Die randlose Schluss-Sektion bleibt randlos */
.page-dbzdg2 .dbzdg2-vollbreit{width:100% !important;max-width:100% !important}
/* Ein einziger Kartenabstand statt vier verschiedener (18/16/14/16). */
.page-dbzdg2{--f-kartenluft:14px}
.page-dbzdg2 .dbzdg2-nutzenraster,
.page-dbzdg2 .dbzdg2-schrittraster,
.page-dbzdg2 .dbzdg2-stimmenraster,
.page-dbzdg2 .dbzdg2-rezensionsraster,
.page-dbzdg2 .dbzdg2-storyfakten,
.page-dbzdg2 .dbzdg2-partner{gap:var(--f-kartenluft)}
/* Innenabstände der Karten: auf schmalem Schirm zählt jeder Millimeter,
aber unter 18 px wirkt der Text angeklebt. */
.page-dbzdg2 .dbzdf-nutzen,
.page-dbzdg2 .dbzdf-schritt,
.page-dbzdg2 .dbzdf-stimme,
.page-dbzdg2 .dbzdg2-rezension,
.page-dbzdg2 .dbzdf-netz,
.page-dbzdg2 .dbzdf-umdeutung{padding:20px 18px}
.page-dbzdg2 .dbzdf-tasche{padding:20px 16px}
.page-dbzdg2 .dbzdg2-bestellleiste{padding:22px 18px}
.page-dbzdg2 .dbzdf-fakten{padding:24px 20px}
.page-dbzdg2 .dbzdg2-deck{padding:26px 16px}
.page-dbzdg2 .dbzdf-rabatt,
.page-dbzdg2 .dbzdg2-partner-kachel{padding:20px 18px}
/* Die Faktkarte traegt ihren Frosch als absolutes ::before und braucht
links Platz dafuer — die Sammelregel darueber haette ihn auf die
Ueberschrift gesetzt. */
.page-dbzdg2 .dbzdg2-fakt{padding:20px 18px 20px 50px}
.page-dbzdg2 .dbzdg2-fakt::before{left:17px;top:20px}
}
@media(max-width:767px){
/* Die randlose Sektion darf die 92-Prozent-Regel nicht mitbekommen —
hoehere Spezifitaet als .page-dbzdg2 .dbzdf .et_pb_row noetig. */
.page-dbzdg2 .dbzdf .et_pb_row.dbzdg2-vollbreit{
width:100% !important;max-width:100% !important}
/* Das runde Siegel stand bei breiterem Raster ueber dem Bildschirmrand.
Auf schmalem Schirm darf es weiter aufs Cover ruecken. */
.dbzdg2-rund{right:-2%;bottom:-3%}
}
@media(max-width:767px){
/* Tippziele: WCAG 2.2 verlangt 24x24 px. Die Listenlinks im Netzwerk und
im Fussmenue lagen bei 21 px Hoehe. */
.page-dbzdg2 .dbzdf-netz li{padding:0}
.page-dbzdg2 .dbzdf-netz li a{display:inline-block;padding:6px 0;min-height:24px}
.quint-fussmenue ul.et-menu>li>a{display:inline-block;padding:6px 0;min-height:24px}
.quint-fuss .quint-kontakt a{display:inline-block;padding:4px 0;min-height:24px}
/* Kleinstschrift anheben: unter 12 px wird es auf dem Handy muehsam. */
.page-dbzdg2 .dbzdf-stimme .tag,
.page-dbzdg2 .dbzdg2-rezension .marke,
.page-dbzdg2 .dbzdf-setcard .eck{font-size:.76rem}
.page-dbzdg2 .dbzdg2-rund{font-size:.74rem}
/* Buchseiten-Slider nutzt die neue Breite mit: eine Karte fast voll,
die naechste blitzt an — so ist sichtbar, dass es weitergeht. */
.dbzdg .dbzdf-seite{flex:0 0 min(300px,84vw)}
/* Kartendeck: drei Karten passen nebeneinander, wenn Abstand und
Innenrand des Blocks etwas zurueckgenommen werden. */
.page-dbzdg2 .dbzdg2-deck{padding:26px 10px}
.page-dbzdg2 .dbzdg2-deckreihe{gap:8px;flex-wrap:nowrap}
.page-dbzdg2 .dbzdg2-karte3d{width:calc((100% - 16px)/3);min-width:0}
.page-dbzdg2 .dbzdg2-karte3d .vorn{padding:10px 7px 12px}
.page-dbzdg2 .dbzdg2-karte3d .vorn strong{font-size:.72rem;line-height:1.22}
.page-dbzdg2 .dbzdg2-karte3d .vorn em{font-size:.6rem;line-height:1.28}
.page-dbzdg2 .dbzdg2-karte3d .vorn .vig{width:26px}
.page-dbzdg2 .dbzdg2-karte3d .vorn .froschlein{width:30px}
.page-dbzdg2 .dbzdg2-karte3d .rueck .vignette{width:32px}
.page-dbzdg2 .dbzdg2-karte3d .vorn .rahmen{inset:6px}
}
@media(max-width:767px){
/* Drei Karten nebeneinander druecken den Satz auf 9,6 px — unlesbar.
Stattdessen wischbar mit lesbaren Karten: eineinhalb sind zu sehen,
das laedt zum Weiterschieben ein. */
.page-dbzdg2 .dbzdg2-deck{padding:26px 0 26px 16px}
.page-dbzdg2 .dbzdg2-deckreihe{flex-wrap:nowrap;justify-content:flex-start;
overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
padding:4px 16px 12px 0;scrollbar-width:none}
.page-dbzdg2 .dbzdg2-deckreihe::-webkit-scrollbar{display:none}
.page-dbzdg2 .dbzdg2-karte3d{width:152px;flex:0 0 152px;scroll-snap-align:center}
.page-dbzdg2 .dbzdg2-karte3d .vorn{padding:12px 10px 14px}
.page-dbzdg2 .dbzdg2-karte3d .vorn strong{font-size:.86rem;line-height:1.26}
.page-dbzdg2 .dbzdg2-karte3d .vorn em{font-size:.7rem;line-height:1.34}
.page-dbzdg2 .dbzdg2-karte3d .vorn .vig{width:34px}
.page-dbzdg2 .dbzdg2-karte3d .vorn .froschlein{width:40px}
.page-dbzdg2 .dbzdg2-karte3d .rueck .vignette{width:40px}
.page-dbzdg2 .dbzdg2-deck h3,
.page-dbzdg2 .dbzdg2-deck .unter,
.page-dbzdg2 .dbzdg2-deck .hinweis,
.page-dbzdg2 .dbzdg2-deck .dbzdg2-mischen{margin-right:16px}
/* „Foto folgt" lag bei 11,8 px */
.page-dbzdg2 .dbzdg2-wer em{font-size:.75rem}
}
@media(max-width:980px){
/* Der Hero reservierte oben Platz fuer eine Kopfzeile, die ueber ihm lag
(--f-kopf, Fallback 120 px). Die Kopfzeile steht seit dem Theme Builder
im Fluss darueber — der Platz war also doppelt vergeben und liess auf
dem Handy 146 px leere Flaeche vor der Ueberschrift. */
.page-dbzdg2 .dbzdf-hero.et_pb_section{padding-top:clamp(26px,7vw,42px) !important}
}
@media(max-width:767px){
/* Kartendeck: 11,2 px war der kleinste Satz der Seite. */
.page-dbzdg2 .dbzdg2-karte3d .vorn em{font-size:.76rem}
/* Netzwerk-Listen: Zeile und Link hatten je eine eigene Linie, die durch den
groesseren Tippbereich fast aufeinander lagen. Die Zeilentrennung reicht. */
.page-dbzdg2 .dbzdf-netz li a{border-bottom:0}
.page-dbzdg2 .dbzdf-netz li{border-bottom:1px solid rgba(30,75,68,.12)}
}
/* Auch auf dem Schirm reservierte der Hero oben die Hoehe einer Kopfzeile,
die dort einmal transparent darueber lag (--f-kopf, 120 px Fallback). Seit
Kopf- und Fusszeile aus dem Theme Builder kommen, steht die Kopfzeile im
Fluss: der Platz war doppelt vergeben, 171 px leere Flaeche vor der
Ueberschrift. Jetzt nur noch Luft, kein Platzhalter. */
@media(min-width:981px){
.page-dbzdg2 .dbzdf-hero.et_pb_section{
padding-top:clamp(48px,4.6vw,76px) !important}
}
@media(max-width:767px){
/* Schaltflaechen laufen auf dem Handy ueber die volle Breite. Zweizeiliger
Text stand darin linksbuendig und liess die Flaeche rechts leer wirken. */
.page-dbzdg2 .dbzdf-btn,
.page-dbzdg2 .dbzdf-btn-gold,
.page-dbzdg2 .dbzdf-btn-ghost{justify-content:center;text-align:center}
}
@media(max-width:767px){
/* Die Kaestchen im Konfigurator sassen bei 19 px. Die ganze Zeile ist ein