, deshalb sitzt die Flex-Reihe auf .et_pb_text_inner. Bewusst nur auf diesen Block begrenzt: auf den anderen Seiten stehen die CTA-Reihen zentriert im Inline-Fluss, und das soll so bleiben. Ergebnis: Hauptaktion volle Breite, darunter die beiden Nebenwege nebeneinander — auf schmalen Spalten stapeln sie sich von selbst. */ .dbzdg2-mappe .dbzdf-ctas .et_pb_text_inner{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch} .dbzdg2-mappe .dbzdf-ctas .dbzdf-btn{flex:1 0 100%;justify-content:center;text-align:center} .dbzdg2-mappe .dbzdf-ctas .dbzdf-btn-ghost{flex:1 1 auto;justify-content:center;text-align:center} /* Cover bündig mit dem Faktenkasten. Divi stapelt in Spalte 2 Kicker, Überschrift, Kasten und Buttons untereinander — das Cover in Spalte 1 startet dadurch 132 px weiter oben als der Kasten. Loesung: die Reihe wird ein Grid, Spalte 2 gibt ihre Kinder per display:contents direkt an dieses Grid ab. Dann laesst sich das Cover exakt in die Zeile des Kastens setzen — ohne Zahlenwert, der bei jeder Schriftgroesse neu stimmen muss. Spaltenmasse wie bei Divi 2_5/3_5: 36,6667 % + 5,5555 % Rinne + 57,7778 %. */ @media(min-width:981px){ .dbzdg2-mappe{display:grid;grid-template-columns:36.6667% 57.7778%;column-gap:5.5555%;align-items:start} .dbzdg2-mappe>.et_pb_column{width:auto !important;margin:0 !important;float:none !important} .dbzdg2-mappe>.et_pb_column:nth-child(2){display:contents} .dbzdg2-mappe>.et_pb_column:nth-child(2)>*{grid-column:2} .dbzdg2-mappe>.et_pb_column:first-child{grid-column:1;grid-row:3/span 2;align-self:start} } /* ---------- Trittstein-Pills (Leitsatz) ---------- */ .dbzdf-steine .et_pb_text_inner{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .dbzdf-steine span{font-family:var(--f-display);font-weight:600;font-size:clamp(1rem,1.9vw,1.16rem); color:var(--f-petrol);background:linear-gradient(160deg,#EAF2E0,#D8E7CC); border:1px solid rgba(91,127,63,.32);border-radius:38% 62% 55% 45%/58% 42% 58% 42%; padding:15px 28px;box-shadow:0 14px 28px -20px rgba(30,75,68,.9);animation:dbzdfWiegen 7s ease-in-out infinite} .dbzdf-steine span:nth-child(2){animation-delay:-2.3s;border-radius:55% 45% 42% 58%/45% 58% 42% 55%} .dbzdf-steine span:nth-child(3){animation-delay:-4.6s;border-radius:48% 52% 60% 40%/52% 45% 55% 48%} @keyframes dbzdfWiegen{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-5px) rotate(.8deg)}} /* ---------- Quint als wiederkehrender Begleiter ---------- */ .dbzdf-guide .et_pb_code_inner,.dbzdf-guide{display:flex;align-items:center;gap:18px;justify-content:center} .dbzdf-guide img{width:clamp(58px,8vw,86px);height:auto;flex:none; filter:drop-shadow(0 14px 14px rgba(22,50,63,.22));animation:dbzdfAtmen 6.5s ease-in-out infinite;transform-origin:50% 100%} .dbzdf-guide .sagt{font-family:var(--f-hand);font-size:clamp(1.25rem,2.4vw,1.62rem);color:var(--f-wasser-mittel); background:#fff;border:2px solid rgba(30,75,68,.18);border-radius:22px 22px 22px 6px; padding:12px 22px;box-shadow:var(--f-schatten);position:relative;max-width:28em} .dbzdf-tief .dbzdf-guide .sagt{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:var(--f-gold-blass)} @keyframes dbzdfAtmen{0%,100%{scale:1 1}45%{scale:1.02 1.032}} /* ===================== HERO — Nachthimmel ===================== */ .dbzdf-hero.et_pb_section{background:linear-gradient(172deg,var(--f-nacht) 0%,#0E1E3E 55%,var(--f-nacht-tief) 100%); padding-bottom:clamp(210px,26vw,330px) !important} .dbzdf-hero .et_pb_row{z-index:6} .dbzdf-sterne{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .dbzdf-stern{position:absolute;background:#fff;border-radius:50%;opacity:.5;animation:dbzdfFunkeln 3.6s ease-in-out infinite} @keyframes dbzdfFunkeln{0%,100%{opacity:.18;transform:scale(.85)}50%{opacity:.85;transform:scale(1.15)}} .dbzdf-hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.35rem)} .dbzdf-hero .sub .et_pb_text_inner{font-size:clamp(1.05rem,1.9vw,1.25rem);color:#C7D6EE;max-width:30em} .dbzdf-hero .vorwort .et_pb_text_inner{font-size:.9rem;color:var(--f-gold-blass);border-left:3px solid var(--f-gold); padding-left:14px;line-height:1.5} .dbzdf-hero .trust .et_pb_text_inner{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:6px} .dbzdf-hero .trust p{margin:0;padding:0;font-size:.86rem;color:#A9BEDD} /* Cover / 3D-Mockup */ .dbzdf-coverwrap{position:relative;display:flex;justify-content:center;align-items:flex-end;z-index:6} .dbzdf-glow{position:absolute;left:50%;top:46%;translate:-50% -50%;width:132%;aspect-ratio:1; background:radial-gradient(closest-side,rgba(217,164,65,.42),rgba(217,164,65,.14) 52%,transparent 72%); filter:blur(6px);pointer-events:none;z-index:0;animation:dbzdfGlow 7s ease-in-out infinite} @keyframes dbzdfGlow{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}} .dbzdf-cover{position:relative;z-index:2;width:min(430px,78vw); filter:drop-shadow(0 34px 40px rgba(3,10,26,.6)) drop-shadow(0 8px 14px rgba(3,10,26,.4)); animation:dbzdfSchweben 9s ease-in-out infinite} @keyframes dbzdfSchweben{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-12px) rotate(.5deg)}} .dbzdf-siegel{position:absolute;right:-2%;bottom:8%;width:clamp(84px,12vw,118px);z-index:4; filter:drop-shadow(0 10px 18px rgba(3,10,26,.55));animation:dbzdfWiegen 8s ease-in-out infinite} .dbzdf-siegel img{width:100%} /* Badge-Reihe */ .dbzdf-badges{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px} .dbzdf-badges img{width:76px;height:76px;object-fit:contain;flex:none; filter:drop-shadow(0 8px 16px rgba(3,10,26,.5))} .dbzdf-badges .lbl{font-size:.8rem;color:#A9BEDD;line-height:1.35;max-width:15em} .dbzdf-badges .lbl b{display:block;font-family:var(--f-display);color:var(--f-gold-blass);font-size:.92rem} /* ===================== TEICH am Hero-Fuß ===================== */ .dbzdf-teich{position:absolute;left:0;right:0;bottom:0;height:clamp(200px,25vw,320px);z-index:4;pointer-events:none} .dbzdf-teich>svg.wasser{position:absolute;left:0;bottom:0;width:100%;height:100%} .dbzdf-teich .welle{animation:dbzdfDriften 16s linear infinite} .dbzdf-teich .welle.b{animation-duration:23s;animation-direction:reverse} .dbzdf-teich .welle.c{animation-duration:30s} @keyframes dbzdfDriften{from{transform:translateX(0)}to{transform:translateX(-50%)}} .dbzdf-libelle{position:absolute;z-index:8;width:clamp(40px,5.5vw,60px);top:8%;right:11%; animation:dbzdfSchwirren 12s ease-in-out infinite;opacity:.9} @keyframes dbzdfSchwirren{ 0%{transform:translate(0,0) rotate(-6deg)}25%{transform:translate(-46px,28px) rotate(5deg)} 50%{transform:translate(-98px,-16px) rotate(-4deg)}75%{transform:translate(-34px,36px) rotate(7deg)} 100%{transform:translate(0,0) rotate(-6deg)}} /* Quint-Szene auf dem Seerosenblatt */ .dbzdf-szene{position:absolute;left:clamp(4%,8vw,12%);bottom:clamp(38px,5vw,72px); width:clamp(150px,20vw,250px);z-index:9;pointer-events:auto} .dbzdf-szene .blatt{position:absolute;left:50%;bottom:-8%;width:120%;translate:-50% 0; animation:dbzdfSchaukeln 8s ease-in-out infinite;z-index:1} .dbzdf-quint{position:relative;z-index:3;display:block;width:66%;margin:0 auto 12%;cursor:pointer; -webkit-tap-highlight-color:transparent; filter:drop-shadow(0 22px 20px rgba(3,10,26,.45)); animation:dbzdfAtmen 6.5s ease-in-out infinite,dbzdfSchaukeln 8s ease-in-out infinite;transform-origin:50% 100%} @keyframes dbzdfSchaukeln{0%,100%{translate:0 0;rotate:-.9deg}50%{translate:0 -7px;rotate:.9deg}} .dbzdf-quint.blubb{animation:dbzdfHupf .7s cubic-bezier(.3,1.6,.5,1)} @keyframes dbzdfHupf{0%{translate:0 0}35%{translate:0 -32px;rotate:-3deg}100%{translate:0 0}} .dbzdf-ring{position:absolute;left:50%;bottom:2%;width:64%;aspect-ratio:3/1;translate:-50% 0; border:2px solid rgba(255,255,255,.75);border-radius:50%;opacity:0;pointer-events:none;z-index:2} .dbzdf-ring.los{animation:dbzdfRingen 1.7s ease-out forwards} .dbzdf-ring.los:nth-of-type(2){animation-delay:.22s} @keyframes dbzdfRingen{0%{opacity:.85;scale:.35}100%{opacity:0;scale:1.8}} .dbzdf-blase{position:absolute;bottom:96%;left:50%;translate:-50% 0;z-index:12; font-family:var(--f-hand);font-size:1.32rem;color:var(--f-petrol);background:#fff; border:2px solid rgba(30,75,68,.2);border-radius:18px;padding:7px 16px;white-space:nowrap; box-shadow:0 14px 30px -18px rgba(0,0,0,.9);opacity:0;transition:opacity .3s ease,translate .3s ease} .dbzdf-blase::after{content:"";position:absolute;bottom:-9px;left:50%;translate:-50% 0;width:15px;height:15px; background:#fff;border-right:2px solid rgba(30,75,68,.2);border-bottom:2px solid rgba(30,75,68,.2);rotate:45deg} .dbzdf-blase.sichtbar{opacity:1;translate:-50% -8px} .dbzdf-tipp{position:absolute;bottom:-16%;left:50%;translate:-50% 0;white-space:nowrap; font-family:var(--f-hand);font-size:1.05rem;color:var(--f-wasser-licht);opacity:.85} /* ===================== IDENTIFIKATION ===================== */ .dbzdf-illu{position:relative;border-radius:var(--f-radius);overflow:hidden;box-shadow:var(--f-schatten-tief)} .dbzdf-illu img{display:block;width:100%} .dbzdf-illu.rand{border:8px solid #fff} .dbzdf-gedanken{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px} .dbzdf-gedanken span{font-family:var(--f-hand);font-size:clamp(1.2rem,2.4vw,1.55rem);color:var(--f-tinte); background:#fff;border:2px solid rgba(34,64,76,.14);border-radius:22px;padding:10px 22px;position:relative; box-shadow:0 12px 26px -20px rgba(22,50,63,.9);animation:dbzdfSchweb 6s ease-in-out infinite} .dbzdf-gedanken span:nth-child(2){animation-delay:-2s;rotate:1.4deg} .dbzdf-gedanken span:nth-child(3){animation-delay:-4s;rotate:-1.2deg} @keyframes dbzdfSchweb{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} /* ===================== PROBLEM-KARTEN (Umdeutung) ===================== */ .dbzdf-umdeutung{background:#fff;border-radius:var(--f-radius);padding:26px 24px;height:100%; box-shadow:var(--f-schatten);border:1px solid rgba(30,75,68,.1);text-align:center} .dbzdf-umdeutung .oben{font-family:var(--f-display);font-weight:600;font-size:1.02rem;color:var(--f-wasser-mittel)} .dbzdf-umdeutung .pfeil{display:block;font-size:1.5rem;color:var(--f-gold);line-height:1;margin:10px 0} .dbzdf-umdeutung .unten{font-family:var(--f-display);font-weight:800;font-size:clamp(1.1rem,2.1vw,1.35rem); color:var(--f-ton)} .dbzdf-umdeutung p{font-size:.9rem;color:var(--f-tinte);opacity:.82;margin:12px 0 0} /* ===================== WUNSCH-LISTE ===================== */ .dbzdf-wunsch{background:rgba(255,255,255,.72);border:1px solid rgba(30,75,68,.14);border-radius:var(--f-radius); padding:28px 30px;box-shadow:var(--f-schatten);backdrop-filter:blur(2px)} .dbzdf-wunsch p{display:flex;align-items:flex-start;gap:14px;margin:0 0 14px;font-size:1.02rem;padding:0} .dbzdf-wunsch p:last-child{margin-bottom:0} .dbzdf-wunsch p::before{content:"✓";flex:none;width:26px;height:26px;border-radius:50%; background:linear-gradient(150deg,var(--f-gruen-hell),var(--f-gruen-tief));color:#fff; font-weight:700;font-size:.9rem;display:grid;place-items:center;margin-top:.15em; box-shadow:0 8px 16px -10px rgba(91,127,63,1)} .dbzdf-zitat-gross{font-family:var(--f-display);font-weight:700;font-size:clamp(1.35rem,3vw,2rem); color:var(--f-petrol);line-height:1.24;text-wrap:balance} /* ===================== LÖSUNG / KLAPPENTEXT ===================== */ .dbzdf-klappe{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2); border-left:4px solid var(--f-gold);border-radius:16px;padding:26px 28px;backdrop-filter:blur(3px)} .dbzdf-klappe p{font-size:1.06rem;line-height:1.68} .dbzdf-klappe .schluss{font-family:var(--f-hand);font-size:1.5rem;color:var(--f-gold-blass);margin-top:14px} /* ===================== MECHANISMUS ===================== */ .dbzdf-schritt{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px; padding:24px 22px;height:100%;backdrop-filter:blur(3px);position:relative;overflow:hidden} .dbzdf-schritt .nr{font-family:var(--f-display);font-weight:800;font-size:2.6rem;line-height:1; color:rgba(217,164,65,.45);display:block;margin-bottom:6px} .dbzdf-schritt h3{color:#fff} .dbzdf-schritt p{font-size:.95rem;opacity:.86;margin:0} .dbzdf-zug{border-radius:18px;overflow:hidden;box-shadow:var(--f-schatten-tief);background:#fff;height:100%} .dbzdf-zug img{display:block;width:100%;aspect-ratio:1300/920;object-fit:cover} .dbzdf-zug .txt{padding:20px 22px 22px;background:#fff} .dbzdf-zug h3{color:var(--f-petrol);margin:0} .dbzdf-zug .num{font-family:var(--f-hand);font-size:1.3rem;color:var(--f-gruen-tief)} .dbzdf-zug p{color:var(--f-tinte);font-size:.95rem;margin:6px 0 0;opacity:.88} .dbzdf-kernsatz{text-align:center;font-family:var(--f-display);font-weight:800; font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.1;color:#fff;text-wrap:balance} .dbzdf-kernsatz .gold{color:var(--f-gold)} /* ===================== BLICK INS BUCH — Slider ===================== */ .dbzdf-slider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; padding:6px 4px 22px;scrollbar-width:thin;scrollbar-color:var(--f-wasser-hell) transparent} .dbzdf-slider::-webkit-scrollbar{height:8px} .dbzdf-slider::-webkit-scrollbar-thumb{background:var(--f-wasser-hell);border-radius:999px} .dbzdf-slider::-webkit-scrollbar-track{background:rgba(30,75,68,.1);border-radius:999px} /* Einrasten am linken Rand statt mittig: bei Scrollposition 0 ist "center" fuer die erste Karte keine gueltige Rastposition — der Browser zog deshalb jede kleine Bewegung wieder auf den Anfang zurueck, und die Blaetterpfeile sprangen gleich zwei Karten weit. */ .dbzdf-seite{flex:0 0 min(430px,80vw);scroll-snap-align:start;background:#fff;border-radius:16px; overflow:hidden;box-shadow:var(--f-schatten-tief);transition:transform .25s ease} .dbzdf-seite:hover{transform:translateY(-5px)} .dbzdf-seite img{display:block;width:100%;aspect-ratio:1300/920;object-fit:cover} .dbzdf-seite p{margin:0;padding:16px 20px 18px;font-size:.95rem;color:var(--f-tinte)} .dbzdf-seite p b{font-family:var(--f-display);color:var(--f-petrol);display:block;font-size:1.02rem;margin-bottom:2px} .dbzdf-wisch{font-family:var(--f-hand);font-size:1.15rem;color:var(--f-wasser-mittel);text-align:center;opacity:.8} /* ===================== NUTZEN + FAKTEN ===================== */ .dbzdf-nutzen{background:#fff;border-radius:var(--f-radius);padding:24px 22px;height:100%; box-shadow:var(--f-schatten);border:1px solid rgba(30,75,68,.09)} .dbzdf-nutzen .ikon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center; background:linear-gradient(150deg,#EAF2E0,#D8E7CC);border:1px solid rgba(91,127,63,.3); font-size:1.3rem;margin-bottom:12px} .dbzdf-nutzen h4{color:var(--f-petrol);margin:0 0 6px} .dbzdf-nutzen p{font-size:.92rem;margin:0;opacity:.85} .dbzdf-fakten{background:linear-gradient(150deg,var(--f-petrol),var(--f-wasser));border-radius:var(--f-radius); padding:32px 34px;box-shadow:var(--f-schatten-tief)} .dbzdf-fakten h3{color:#fff;margin-bottom:14px} .dbzdf-fakten .et_pb_text_inner>p,.dbzdf-fakten p{color:#DCEBE4;display:flex;gap:12px;align-items:flex-start; margin:0 0 10px;font-size:.96rem;padding:0} .dbzdf-fakten p:last-child{margin-bottom:0} .dbzdf-fakten p b{color:#fff;font-family:var(--f-display)} .dbzdf-fakten p::before{content:"♟";flex:none;color:var(--f-gold);font-size:1rem;margin-top:.1em} /* ===================== ZIELGRUPPEN ===================== */ .dbzdf-ziel .et_pb_text_inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px} .dbzdf-ziel span{display:block;background:#fff;border-radius:16px;padding:22px 20px;text-align:center; box-shadow:var(--f-schatten);border:1px solid rgba(30,75,68,.09); font-family:var(--f-display);font-weight:700;color:var(--f-petrol);font-size:1.02rem} .dbzdf-ziel span em{display:block;font-size:1.9rem;font-style:normal;margin-bottom:6px} .dbzdf-ziel span small{display:block;font-family:var(--f-text);font-weight:400;color:var(--f-tinte); font-size:.85rem;margin-top:5px;opacity:.82} /* ===================== STIMMEN ===================== */ .dbzdf-stimme{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.17);border-radius:18px; padding:26px 26px 24px;height:100%;backdrop-filter:blur(3px);position:relative} .dbzdf-stimme .tag{display:inline-block;font-family:var(--f-display);font-weight:700;font-size:.72rem; letter-spacing:.09em;text-transform:uppercase;color:#2A1D06;background:var(--f-gold); padding:4px 12px;border-radius:999px;margin-bottom:12px} .dbzdf-stimme .zitat{font-family:var(--f-display);font-weight:500;font-size:1.06rem;line-height:1.5;color:#fff;margin:0} .dbzdf-stimme .zitat::before{content:"„";color:var(--f-gold);font-size:1.4em;line-height:0;vertical-align:-.15em} .dbzdf-stimme .wer{font-family:var(--f-display);font-weight:700;color:var(--f-gold-blass);margin:14px 0 2px;font-size:1rem} .dbzdf-stimme .rolle{font-size:.85rem;opacity:.78;margin:0} .dbzdf-platzhalter{border:2px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.04)} .dbzdf-platzhalter .tag{background:rgba(255,255,255,.18);color:#fff} .dbzdf-platzhalter .zitat{opacity:.6;font-style:italic} /* ===================== DIFFERENZIERUNG ===================== */ .dbzdf-diff{background:linear-gradient(150deg,#fff,var(--f-creme-hell));border-radius:24px; padding:clamp(30px,4.5vw,52px);box-shadow:var(--f-schatten-tief);border:1px solid rgba(217,164,65,.32); text-align:center;position:relative;overflow:hidden} .dbzdf-diff::before{content:"♟";position:absolute;right:-.1em;bottom:-.35em;font-size:11rem; color:rgba(30,75,68,.05);line-height:1;pointer-events:none} .dbzdf-diff .satz{font-family:var(--f-display);font-weight:700;font-size:clamp(1.3rem,3.2vw,2.15rem); line-height:1.2;color:var(--f-navy);text-wrap:balance;position:relative} .dbzdf-diff .satz .hell{color:var(--f-tinte);opacity:.62;font-weight:600;display:block;margin-bottom:.35em} .dbzdf-diff .satz .gold{color:var(--f-gold)} /* ===================== ECHTE GESCHICHTE ===================== */ .dbzdf-story-img .et_pb_image_wrap{border-radius:var(--f-radius);overflow:hidden;box-shadow:var(--f-schatten-tief);display:block} .dbzdf-story-img img{width:100%;display:block} .dbzdf-story-fakten .et_pb_text_inner>p,.dbzdf-story-fakten p{display:flex;gap:12px;align-items:flex-start; margin:0 0 11px;font-size:.96rem;padding:0} .dbzdf-story-fakten p::before{content:"🐸";flex:none;font-size:.95rem;margin-top:.1em} .dbzdf-story-fakten p b{font-family:var(--f-display);color:var(--f-petrol)} /* ===================== ANGEBOT / TURNIERTASCHE ===================== */ .dbzdf-setcard{background:rgba(255,255,255,.09);border:2px solid rgba(255,255,255,.18);border-radius:18px; padding:22px 24px;margin-bottom:16px;cursor:pointer;position:relative; transition:border-color .18s ease,background .18s ease,transform .18s ease} .dbzdf-setcard:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)} .dbzdf-setcard.aktiv{border-color:var(--f-gold);background:rgba(217,164,65,.14)} .dbzdf-setcard h4{color:#fff;margin:0 0 6px} .dbzdf-setcard p{font-size:.92rem;opacity:.85;margin:0} .dbzdf-setcard .preis{font-family:var(--f-display);font-weight:800;font-size:1.35rem;color:var(--f-gold); margin-top:10px;opacity:1} .dbzdf-setcard .preis .alt{font-size:.95rem;color:#B6CBC3;text-decoration:line-through;margin-right:8px;font-weight:600} .dbzdf-setcard .eck{position:absolute;top:-11px;right:16px;font-family:var(--f-display);font-weight:700; font-size:.72rem;letter-spacing:.05em;padding:4px 12px;border-radius:999px;color:#2A1D06;background:var(--f-gold)} .dbzdf-setcard .eck.rot{background:var(--f-ton);color:#fff} .dbzdf-tasche{background:#fff;border-radius:20px;padding:26px 26px 24px;box-shadow:var(--f-schatten-tief)} .dbzdf-tasche h4{color:var(--f-petrol);margin:0 0 4px;font-size:1.2rem} .dbzdf-tasche .hint{font-family:var(--f-hand);font-size:1.15rem;color:var(--f-gruen-tief);margin-bottom:14px} .dbzdf-tasche label{display:flex;align-items:flex-start;gap:11px;font-size:.93rem;color:var(--f-tinte); padding:10px 12px;border-radius:12px;cursor:pointer;transition:background .15s ease;line-height:1.4} .dbzdf-tasche label:hover{background:#F4F9F2} .dbzdf-tasche label input{flex:none;width:19px;height:19px;margin:.15em 0 0;accent-color:var(--f-gruen-tief);cursor:pointer} .dbzdf-tasche label input:disabled{cursor:default;opacity:.75} .dbzdf-tasche label b{margin-left:auto;font-family:var(--f-display);color:var(--f-petrol);white-space:nowrap;padding-left:10px} .dbzdf-tasche .spar{display:none;background:linear-gradient(150deg,#EAF2E0,#D8E7CC);border:1px solid rgba(91,127,63,.3); border-radius:12px;padding:11px 16px;margin:12px 0 0;font-family:var(--f-display);font-weight:600; color:var(--f-gruen-tief);font-size:.95rem;text-align:center} .dbzdf-tasche .spar.an{display:block} .dbzdf-tasche .summe{display:flex;justify-content:space-between;align-items:baseline; border-top:2px dashed rgba(30,75,68,.2);margin-top:16px;padding-top:16px; font-family:var(--f-display);font-weight:800;font-size:1.55rem;color:var(--f-petrol)} .dbzdf-tasche .summe .alt{font-size:1rem;color:#8B9C97;text-decoration:line-through;margin-right:10px;font-weight:600} .dbzdf-tasche .kaufen{display:block;text-align:center;margin-top:16px;justify-content:center} .dbzdf-tasche .lega{font-size:.78rem;color:#6E8480;text-align:center;margin-top:12px;line-height:1.45} .dbzdf-versandbalken{margin-top:14px} .dbzdf-versandbalken .schiene{height:9px;border-radius:999px;background:rgba(30,75,68,.13);overflow:hidden} .dbzdf-versandbalken .fuell{height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--f-gruen-hell),var(--f-gruen-tief));transition:width .35s ease} .dbzdf-versandbalken .txt{font-size:.82rem;color:var(--f-gruen-tief);margin-top:7px;text-align:center;font-weight:600} /* ===================== HERZENSPROJEKT ===================== */ .dbzdf-logo-row{text-align:center;margin-bottom:14px} .dbzdf-logo-row img{max-width:230px;margin:0 auto;display:block} .dbzdf-band{background:linear-gradient(150deg,var(--f-petrol),var(--f-wasser));border-radius:20px; padding:32px 34px;text-align:center;box-shadow:var(--f-schatten-tief)} .dbzdf-band .gross{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,5vw,2.9rem); color:var(--f-gold);line-height:1.05;margin-bottom:8px} .dbzdf-band h3{color:#fff;margin:0 0 8px} .dbzdf-band p{color:#CFE0DA;max-width:640px;margin:0 auto;font-size:.98rem} .dbzdf-verwendung{background:#fff;border-radius:16px;padding:24px 20px;height:100%;text-align:center; box-shadow:var(--f-schatten);border:1px solid rgba(30,75,68,.09)} .dbzdf-verwendung .ikon{font-size:1.9rem;margin-bottom:8px} .dbzdf-verwendung h4{color:var(--f-petrol);margin:0 0 6px;font-size:1rem} .dbzdf-verwendung p{font-size:.89rem;margin:0;opacity:.85} /* ===================== NETZWERK / RABATT / LEAD ===================== */ .dbzdf-netz{background:#fff;border-radius:var(--f-radius);padding:26px 24px;height:100%; box-shadow:var(--f-schatten);border:1px solid rgba(30,75,68,.09)} .dbzdf-netz h4{color:var(--f-petrol)} .dbzdf-netz p{font-size:.92rem;opacity:.85;margin:0 0 12px} .dbzdf-netz ul{list-style:none;margin:0;padding:0} .dbzdf-netz li{padding:7px 0;border-bottom:1px solid rgba(30,75,68,.1);font-size:.92rem} .dbzdf-netz li:last-child{border-bottom:0} .dbzdf-netz a{color:var(--f-wasser-mittel);text-decoration:none;border-bottom:1px solid rgba(44,111,102,.3)} .dbzdf-netz a:hover{color:var(--f-petrol);border-color:var(--f-petrol)} .dbzdf-netz .folgt{font-size:.75rem;color:#8B9C97;font-style:italic} .dbzdf-rabatt{background:linear-gradient(140deg,var(--f-petrol),var(--f-wasser-mittel));border-radius:22px; padding:clamp(28px,4vw,44px);box-shadow:var(--f-schatten-tief);position:relative;overflow:hidden} .dbzdf-rabatt h2{color:#fff} .dbzdf-rabatt h2 .gold{color:var(--f-gold)} .dbzdf-rabatt p{color:#CFE0DA} .dbzdf-code{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,.09); border:2px dashed var(--f-gold);border-radius:14px;padding:11px 20px;margin:14px 0} .dbzdf-code b{font-family:var(--f-display);font-weight:800;font-size:1.6rem;letter-spacing:.14em;color:var(--f-gold)} .dbzdf-code button{background:var(--f-gruen-tief);color:#fff;border:none;border-radius:999px; font-family:var(--f-display);font-weight:600;padding:9px 17px;cursor:pointer;font-size:.9rem} .dbzdf-code button:hover{background:var(--f-gruen)} /* Abgrenzung zum eigenen Shop. Der Code steht hier gross und mit Kopier-Knopf daneben — ein Kunde hat ihn am 10.09.2026 folgerichtig in unseren Warenkorb getippt, zwei Minuten vor dem Zahlversuch, und eine nackte WooCommerce-Fehlermeldung bekommen. */ .dbzdf-codehinweis{display:block;font-size:.86rem;line-height:1.5;color:#BFD4CD !important; max-width:46em;margin:-4px 0 0} .dbzdf-codehinweis b{color:#FBE8C4} .dbzdf-codehinweis a{color:#FBE8C4;text-decoration:underline;text-underline-offset:2px} .dbzdf-codehinweis a:hover{color:#fff} .dbzdf-partner{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} .dbzdf-partner a{display:block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); border-radius:14px;padding:18px;text-decoration:none;transition:background .15s} .dbzdf-partner a:hover{background:rgba(255,255,255,.14)} .dbzdf-partner b{display:block;font-family:var(--f-display);font-size:1.1rem;color:var(--f-gold)} .dbzdf-partner small{color:#CFE0DA;font-size:.84rem} .dbzdf-lead-karte{background:#fff;border-radius:22px;padding:clamp(28px,4vw,44px); box-shadow:var(--f-schatten-tief);border:1px solid rgba(217,164,65,.3);text-align:center} .dbzdf-lead-karte h2{margin-bottom:.3em} .dbzdf-lead-karte .feld{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px} .dbzdf-lead-karte input{flex:1 1 260px;max-width:340px;border:2px solid rgba(30,75,68,.2);border-radius:999px; padding:14px 22px;font-family:var(--f-text);font-size:1rem;color:var(--f-tinte)} .dbzdf-lead-karte input:focus{outline:none;border-color:var(--f-gruen-tief)} .dbzdf-lead-karte .klein{font-size:.8rem;color:#6E8480;margin-top:12px} /* ===================== FAQ ===================== */ .dbzdf-faq .et_pb_toggle{background:#fff !important;border:1px solid rgba(30,75,68,.12) !important; border-radius:16px !important;margin-bottom:12px;padding:6px 24px 4px !important;box-shadow:var(--f-schatten)} .dbzdf-faq .et_pb_toggle_title{font-family:var(--f-display) !important;font-weight:700 !important; color:var(--f-petrol) !important;font-size:1.04rem !important;padding:16px 34px 16px 0 !important} .dbzdf-faq .et_pb_toggle_content{color:var(--f-tinte);font-size:.96rem;padding-bottom:14px} .dbzdf-faq .et_pb_toggle_content a{color:var(--f-wasser-mittel);border-bottom:1px solid rgba(44,111,102,.35)} .dbzdf-faq .et_pb_toggle_open{background:#fff !important;border-color:rgba(217,164,65,.45) !important} .dbzdf-faq .et_pb_toggle_title::before{color:var(--f-gold) !important;font-size:22px !important;top:14px !important} /* ===================== ABSCHLUSS / MUTBAND ===================== */ .dbzdf-mut{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:22px; padding:clamp(28px,4vw,46px);text-align:center;backdrop-filter:blur(3px)} .dbzdf-mut .figur{font-size:2.4rem;color:var(--f-gold);line-height:1} .dbzdf-mut h2{margin:.2em 0 .1em} .dbzdf-mut .wer{font-family:var(--f-hand);font-size:1.35rem;color:var(--f-gold-blass)} .dbzdf-finale-illu{border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.9); border:6px solid rgba(255,255,255,.12)} .dbzdf-finale-illu img{display:block;width:100%} /* ---------- Scroll-Reveal ---------- */ .dbzdf-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease} .dbzdf-reveal.da{opacity:1;transform:none} /* ---------- Header/Footer auf der F-Seite ---------- */ .page-dbzdf .dbzd-header.et_pb_section{background:transparent !important;position:absolute !important; top:0;left:0;right:0;z-index:50} .page-dbzdf .dbzd-header .dbzd-logo{color:#fff !important} .page-dbzdf .dbzd-header .dbzd-logo small{color:#A9BEDD !important} .page-dbzdf .dbzd-header .dbzd-menu .et-menu>li>a{color:#DCE7F7 !important} .page-dbzdf .dbzd-header .dbzd-menu .et-menu>li>a:hover{color:#fff !important} .page-dbzdf .dbzd-header .et-cart-info{color:#DCE7F7 !important} .page-dbzdf .dbzdf-hero.et_pb_section{padding-top:clamp(110px,13vw,160px) !important} .page-dbzdf .dbzd-sticky-cta{display:none} /* ---------- Sektions-Innenabstände ---------- */ .dbzdf.et_pb_section{padding-top:clamp(70px,9vw,110px);padding-bottom:clamp(70px,9vw,110px)} .dbzdf.dbzdf-anschluss.et_pb_section{padding-top:clamp(30px,4vw,48px)} /* ---------- Mobile ---------- */ @media(max-width:980px){ .dbzdf-szene{left:50%;translate:-50% 0;width:clamp(140px,32vw,200px);bottom:clamp(28px,4vw,48px)} .dbzdf-partner{grid-template-columns:1fr} .dbzdf-coverwrap{margin-top:34px} } @media(max-width:767px){ .dbzdf-hero.et_pb_section{padding-bottom:clamp(230px,42vw,300px) !important} .dbzdf-badges img{width:60px;height:60px} .dbzdf-tasche{padding:22px 18px} .dbzdf-tasche label{font-size:.88rem;padding:9px 8px} .dbzdf-tasche label b{font-size:.9rem} .dbzdf-libelle{display:none} .dbzdf .et_pb_row{padding-left:5vw !important;padding-right:5vw !important} } /* ---------- Bewegungsarmut ---------- */ @media(prefers-reduced-motion:reduce){ .dbzdf *,.dbzdf *::before,.dbzdf *::after{animation:none !important;transition:none !important} .dbzdf-reveal{opacity:1;transform:none} } /* ============ Variante F — Korrekturpass 1 ============ */ /* Vertikaler Rhythmus: Divi-Row-Padding raus, eigener Abstand */ .dbzdf .et_pb_row{padding-top:0 !important;padding-bottom:0 !important;margin-bottom:clamp(26px,3.2vw,44px)} .dbzdf .et_pb_row:last-of-type{margin-bottom:0} .dbzdf .et_pb_column{margin-bottom:0} .dbzdf .et_pb_module{margin-bottom:18px} .dbzdf .et_pb_column>.et_pb_module:last-child{margin-bottom:0} /* Unter 981 px stellt Divi die Spalten untereinander. Die Null oben gilt dann weiter — und Bild und nachfolgende Textspalte stossen aneinander. Auf dem Handy klebten dadurch Kicker wie „Die Lösung" oder „Immer griffbereit" direkt unter der Abbildung, und im Fragenbereich fehlte die Luecke genau an der Spaltennaht. Deshalb hier ein Abstand fuer jede Spalte, auf die noch eine folgt. */ @media (max-width:980px){ .dbzdf .et_pb_row>.et_pb_column:not(:last-child){margin-bottom:clamp(20px,4.5vw,30px)} } /* Wellen hängen per JS an der Sektion — Sektionen mit Welle brauchen Luft */ .dbzdf.dbzdf-hatwelle.et_pb_section{padding-top:clamp(104px,12vw,158px)} /* Lead-Absatz erbt die Sektionsfarbe (war vorher dunkel auf Petrol) */ .dbzdf-lead .et_pb_text_inner,.dbzdf-lead{color:inherit;opacity:.88} .dbzdf-tief .dbzdf-lead .et_pb_text_inner,.dbzdf-nacht .dbzdf-lead .et_pb_text_inner{color:#DCEBE4;opacity:.9} /* Display-Sätze brauchen den inneren Selektor (Divi-Textmodule ohne
) */ .dbzdf-zitat-gross .et_pb_text_inner{font-family:var(--f-display);font-weight:700; font-size:clamp(1.35rem,3vw,2.05rem);line-height:1.24;color:var(--f-petrol); text-wrap:balance;max-width:22em;margin-inline:auto} .dbzdf-kernsatz .et_pb_text_inner{font-family:var(--f-display);font-weight:800; font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.1;color:#fff;text-wrap:balance} .dbzdf-kernsatz .et_pb_text_inner .gold{color:var(--f-gold)} .dbzdf-wisch .et_pb_text_inner{font-family:var(--f-hand);font-size:1.15rem; color:var(--f-wasser-mittel);opacity:.8} /* Fakten-/Story-Listen: Marker absolut statt Flex (sonst zerreißt ) */ .dbzdf-fakten p,.dbzdf-story-fakten .et_pb_text_inner>p{display:block;position:relative; padding-left:24px;margin:0 0 11px} .dbzdf-fakten p::before{position:absolute;left:0;top:.05em;content:"♟"} .dbzdf-story-fakten .et_pb_text_inner>p::before{position:absolute;left:0;top:.05em;content:"🐸";font-size:.9rem} /* Blick-ins-Buch: Slider bündig zum Textraster, kein Anschnitt */ .dbzdf-slider{padding-left:max(5vw,calc((100vw - 1080px)/2)); padding-right:max(5vw,calc((100vw - 1080px)/2));padding-bottom:16px;scroll-padding-inline:max(5vw,calc((100vw - 1080px)/2))} /* Hero: Quint tiefer ins Wasser, damit er die Badge-Reihe nicht anschneidet */ .dbzdf-hero.et_pb_section{padding-bottom:clamp(250px,30vw,400px) !important} .dbzdf-szene{width:clamp(140px,17vw,212px);bottom:clamp(34px,4vw,52px);left:clamp(3%,6vw,9%)} /* Siegel an die obere linke Coverecke (überdeckte vorher das gedruckte Badge) */ .dbzdf-siegel{left:-9%;top:-5%;right:auto;bottom:auto} /* Wortmarke im dunklen Header: Gold statt grünem Kasten */ .page-dbzdf .dbzd-header a.dbzd-logo em{color:var(--f-gold-hell) !important;background:none !important} /* Toggle-Icons im FAQ dürfen nicht auf dem Titel liegen */ .dbzdf-faq .et_pb_toggle_title{padding-right:44px !important} /* ============ Variante F — 3D-Cover-Mockup (freigestellt) ============ */ /* Das Mockup bringt Perspektive und Buchrücken schon mit: kein Rahmen, nur ein weicher Schlagschatten und der Gold-Schein dahinter. */ .dbzdf-cover{width:min(400px,76vw);height:auto; filter:drop-shadow(0 40px 44px rgba(3,10,26,.55)) drop-shadow(0 10px 16px rgba(3,10,26,.38))} .dbzdf-tief .dbzdf-cover{filter:drop-shadow(0 34px 40px rgba(8,32,28,.5)) drop-shadow(0 8px 14px rgba(8,32,28,.35))} .dbzdf-glow{width:118%;top:50%} /* Siegel an die vordere obere Ecke des stehenden Buchs */ .dbzdf-siegel{left:auto;right:-4%;top:-3%;bottom:auto} /* Seerosenblatt: eigene Keyframes, die die -50%-Zentrierung mitführen. Sonst überschreibt die translate-Animation das Zentrieren und das Blatt rutscht um die halbe Breite nach rechts. */ @keyframes dbzdfBlattSchaukeln{ 0%,100%{translate:-50% 0;rotate:-.9deg} 50%{translate:-50% -7px;rotate:.9deg} } .dbzdf-szene .blatt{animation:dbzdfBlattSchaukeln 8s ease-in-out infinite} .dbzdf-hero.et_pb_section{padding-bottom:clamp(230px,27vw,360px) !important} /* ============ Variante F — Kontrast-Audit (WCAG AA) ============ */ /* Alle Werte gegen den tatsächlich gerenderten Untergrund gemessen. */ .dbzdf{--f-gold-dunkel:#98690D} /* CTA: helles Grün trug Weiß nur mit 3,0:1 */ .dbzdf-btn{background:linear-gradient(150deg,#4F7C34,#375A25)} .dbzdf-btn:hover,.dbzdf-btn:focus-visible{background:linear-gradient(150deg,#5E9040,#2F4D1F)} /* Handschrift-Kicker auf Creme/Papier abgedunkelt (war 3,8–4,2:1) */ .dbzdf-kicker{color:#4A6A31} /* Gold auf hellem Grund braucht den dunklen Ton */ .dbzdf-creme .gold,.dbzdf-papier .gold,.dbzdf-diff .gold,.dbzdf-lead-karte .gold{color:var(--f-gold-dunkel)} .dbzdf-umdeutung .pfeil{color:#A87718} /* Schritt-Ziffern waren als Deko zu blass, tragen aber die Reihenfolge */ .dbzdf-schritt .nr{color:rgba(237,187,94,.8)} /* Vergleichspreise und „Link folgt" waren zu hell */ .dbzdf-tasche .summe .alt,.dbzdf-netz .folgt,.dbzdf-tasche .lega,.dbzdf-lead-karte .klein{color:#5F726D} /* Partnernamen auf Petrol: helles Gold statt sattem */ .dbzdf-partner b{color:var(--f-gold-blass)} /* Differenzierung: die Pointe muss größer sein als der Vergleichssatz */ .dbzdf-diff .satz .hell{font-size:.74em;line-height:1.3} /* Gold-Button trägt beide Klassen — .dbzdf-btn stand später und färbte ihn grün */ .dbzdf-btn.dbzdf-btn-gold{background:linear-gradient(150deg,var(--f-gold-hell),var(--f-gold));color:#33240A !important} .dbzdf-btn.dbzdf-btn-gold:hover,.dbzdf-btn.dbzdf-btn-gold:focus-visible{background:linear-gradient(150deg,#F5CC7A,#C9942F)} /* Höher spezifizierte Altregel überschrieb den dunklen Goldton */ .dbzdf-diff .satz .gold{color:var(--f-gold-dunkel)} /* Slider läuft jetzt in der normalen Rasterbreite — bündig zum Fließtext. Der Überhang nach rechts zeigt, dass es weitergeht. */ .dbzdf-slider{padding-left:0;padding-right:0;scroll-padding-inline:0;margin-right:-6px} /* Mobil: Quint gehört in die Mitte des Teichs. Die spätere left-Regel hatte die Zentrierung der Media-Query halb ausgehebelt (translate blieb stehen). */ @media(max-width:980px){ .dbzdf-szene{left:50%;translate:-50% 0} } /* Der Header liegt transparent über dem Hero. Seine Höhe wechselt je nach Breakpoint (mobil bricht das Menü um), deshalb misst das Seiten-JS sie und legt sie als --f-kopf ab — feste Werte hatten den Kicker verdeckt. */ .page-dbzdf .dbzdf-hero.et_pb_section{ padding-top:calc(var(--f-kopf,120px) + clamp(26px,4vw,52px)) !important} @media(max-width:767px){ .dbzdf-hero h1{font-size:1.78rem} .dbzdf-hero .sub .et_pb_text_inner{font-size:1rem} .dbzdf-ctas .et_pb_text_inner>p{flex-direction:column;align-items:stretch} .dbzdf-ctas .dbzdf-btn,.dbzdf-ctas .dbzdf-btn-ghost{justify-content:center;text-align:center} } /* Mobil steht das Siegel sonst hinter dem Header — nach unten links ans Buch */ @media(max-width:980px){ .dbzdf-siegel{left:-2%;right:auto;top:auto;bottom:4%;width:clamp(72px,16vw,100px)} } /* ===================================================================== VARIANTE G — „Teichwelt mit neuen Grafiken" Erbt das komplette F-Design; hier steht nur, was die neue Bildwelt anders braucht: echte Buchseiten im Hochformat, 4:3-Illustrationen, der meditierende Quint und das Turniersaal-Band. ===================================================================== */ /* Blick ins Buch zeigt jetzt echte Buchseiten (544x768, Hochformat) */ .dbzdg .dbzdf-seite{flex:0 0 min(310px,68vw)} .dbzdg .dbzdf-seite img{aspect-ratio:544/768;object-fit:contain;background:#fff; border-bottom:1px solid rgba(30,75,68,.12)} .dbzdg .dbzdf-seite p{font-size:.9rem;padding:14px 18px 16px} /* Die drei Züge kommen im 4:3-Schnitt */ .dbzdg .dbzdf-zug img{aspect-ratio:4/3} /* Differenzierung und Finale zeigen ebenfalls Buchseiten — ohne Beschnitt */ .dbzdg .dbzdf-illu img[src*="g-blick-"], .dbzdg .dbzdf-finale-illu img[src*="g-blick-"]{background:#fff} .dbzdg .dbzdf-illu:has(img[src*="g-blick-"]){max-width:420px;margin-inline:auto} /* Quint als Begleiter ist jetzt ein Kopfmotiv — etwas größer im Anschnitt */ .dbzdg .dbzdf-guide img{width:clamp(74px,10vw,112px)} /* Wunschtrance: meditierender Quint auf dem Seerosenblatt statt Rahmenbild */ .dbzdg-atem{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;padding:26px 20px;position:relative} .dbzdg-atem::before{content:"";position:absolute;left:50%;top:44%;translate:-50% -50%; width:min(300px,80%);aspect-ratio:1;border-radius:50%; background:radial-gradient(closest-side,rgba(127,191,174,.34),rgba(127,191,174,.1) 60%,transparent 74%); animation:dbzdgAtemring 6.5s ease-in-out infinite} @keyframes dbzdgAtemring{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.12);opacity:1}} .dbzdg-atem img{position:relative;z-index:2;width:min(300px,72%);height:auto; filter:drop-shadow(0 18px 20px rgba(22,50,63,.22)); animation:dbzdfAtmen 6.5s ease-in-out infinite;transform-origin:50% 100%} .dbzdg-atem .wort{position:relative;z-index:2;margin:0;font-family:var(--f-hand); font-size:clamp(1.5rem,3vw,2rem);color:var(--f-gruen-tief)} /* Turniersaal-Band über den Zielgruppen */ .dbzdg-band{border-radius:var(--f-radius);overflow:hidden;box-shadow:var(--f-schatten-tief); margin-bottom:clamp(22px,3vw,34px)} .dbzdg-band img{display:block;width:100%;aspect-ratio:1600/1138;object-fit:cover} @media(max-width:767px){ .dbzdg-band img{aspect-ratio:16/11} .dbzdg .dbzdf-seite{flex:0 0 min(260px,74vw)} } /* Die Regeln der Fassung G-V2 liegen in css/g-v2.css und werden von der Seite selbst geladen — siehe Kopf jener Datei. */ /* ---------- Cookie-Schaltflaeche von Borlabs ---------------------------- Das Widget sitzt fest unten links, 72 x 72 px ohne Abstand zur Ecke. Auf dem Handy ist der Bestellknopf ueber die volle Breite — sobald die Safari-Leiste Hoehe wegnimmt, liegt das Symbol mitten darauf. Kleiner und in die Ecke gerueckt bleibt es bedienbar (46 px, ueber der Mindestgroesse fuer Tippziele) und verdeckt nur noch eine Ecke. -------------------------------------------------------------------- */ @media(max-width:980px){ .brlbs-cmpnt-widget{width:46px !important;height:46px !important; inset:auto auto 10px 10px !important;opacity:.85; transition:opacity .18s ease} .brlbs-cmpnt-widget:hover,.brlbs-cmpnt-widget:focus-within{opacity:1} .brlbs-cmpnt-widget img,.brlbs-cmpnt-widget svg, .brlbs-cmpnt-widget button{width:100% !important;height:100% !important} } /* ---------- Blaetterpfeile am Slider „Blick ins Buch" ------------------ Die Karten liessen sich nur wischen oder mit der Tastatur bewegen; macOS blendet die waagerechte Bildlaufleiste aus, mit einer normalen Maus kam man also nicht weiter. Die Pfeile setzt js/quint-seite.js. -------------------------------------------------------------------- */ .dbzdf-blaetterbox{position:relative} .dbzdf-blaettern{ position:absolute;top:calc(50% - 26px);z-index:6; width:48px;height:48px;border-radius:999px;border:0;cursor:pointer; display:grid;place-items:center;font-size:26px;line-height:1; background:rgba(255,255,255,.94);color:var(--f-petrol); box-shadow:0 10px 26px -12px rgba(22,50,63,.7); transition:opacity .18s ease,scale .18s ease} .dbzdf-blaettern.zurueck{left:6px} .dbzdf-blaettern.vor{right:6px} .dbzdf-blaettern:hover{scale:1.06} .dbzdf-blaettern:focus-visible{outline:3px solid var(--f-gold);outline-offset:2px} /* Am Anfang bzw. Ende bleibt der jeweilige Pfeil stehen, aber blass — das ist ruhiger als ein Knopf, der verschwindet und wiederkommt. */ .dbzdf-blaettern:disabled{opacity:.28;cursor:default;box-shadow:none} /* Gibt es nichts zu blaettern, braucht es auch keine Pfeile. */ .dbzdf-blaetterbox.ohne .dbzdf-blaettern{display:none} @media(max-width:600px){ /* Auf dem Handy wischt man ohnehin — die Pfeile wuerden nur die Karten verdecken. */ .dbzdf-blaettern{display:none} }