/* Theme Name: Daniela Schär - DS Design (Astra Child) Theme URI: https://danielaschaer.com Description: Child-Theme fuer Astra. Enthaelt das komplette DS-Designsystem in der Nachtglas-Fassung v14 (8.9.2026): dunkle Waldgruen-Welt, Naturbilder, Glas an genau drei Stellen, Pillen-Knoepfe, Cormorant Garamond + Nunito Sans, ruhige Bewegung, Cal.com-Overlay. Quelle der Regeln: Projekte\DESIGN_DS.md. Seiteninhalt: seiten/startseite-v14-editor.html (native Gutenberg-Bloecke, im Editor bearbeitbar) oder als Alternative die HTML-Block-Fassung seiten/startseite-v14.html. Author: Daniela Schär Template: astra Version: 1.5.4 Text Domain: ds-design */ /* ========================================================================= DS-DESIGNSYSTEM 1.2.0 = Startseite v14 (Nachtglas), 8.9.2026 Alle Klassen tragen das Praefix ds-. Die Element-Regeln sind auf den Wrapper .ds-bereich begrenzt (jeder Block der Startseite traegt ihn), damit Seelenblog und Elementor-Seiten unberuehrt bleiben. Kopfzeile und Fusszeile kommen aus Elementor, nicht aus diesem Theme. Aufbau: 1 Tokens und Grundlagen 2 v14-Bausteine 3 Leitsatz-Band 4 WordPress- und Astra-Anpassungen 5 Kopfzeile (Elementor) 6 Schrift-Durchsetzung (gewinnt die Kaskade gegen Astras Customizer) 7 Block-Editor 8 Gutenberg-Bloecke (1.3.0) ========================================================================= */ :root{ --ds-header-h:56px; /* wird per JS an die echte Hoehe der Elementor-Kopfzeile angepasst */ --ds-forest:#0e4647; --ds-petrol:#205455; --ds-forest-deep:#0b3536; --ds-footer:#092f30; --ds-gold:#c99227; --ds-blitz:#e9c884; --ds-gold-mittel:#d8a94c; /* Zwischenton, NUR grosse kursive Ueberschriften ab 24px */ --ds-sand:#f5f0e8; --ds-cream:#fdfbf7; --ds-ink:#20201e; --ds-cream-text:#f3ede1; --ds-line:#d8d2c7; --ds-line-dark:rgba(245,240,232,.16); --ds-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --ds-sans:"Nunito Sans",Arial,Helvetica,sans-serif; --ds-r-pille:999px; --ds-r-glas:18px; --ds-r-flach:2px; --ds-bezier:cubic-bezier(.32,.72,0,1); } body.ds-seite .ds-bereich,body.ds-seite .ds-bereich *{box-sizing:border-box} body.ds-seite .ds-bereich :is(h1,h2){font-family:var(--ds-serif);font-weight:400;line-height:1.12;margin:0} body.ds-seite .ds-bereich h3{font-family:var(--ds-serif);font-weight:500;line-height:1.2;margin:0} body.ds-seite .ds-bereich p{margin:0 0 1em} body.ds-seite .ds-bereich img{max-width:100%;display:block} /* Hintergrundbilder fuellen ihre Flaeche immer ganz (1.3.1: vorher schlug height:auto die v14-Regel, auf dem Handy blieb unter dem Hero-Foto eine leere Flaeche). */ body.ds-seite .ds-bereich :is(.ds-hero__bild,.ds-vollbild__bild,.ds-wege__bild,.ds-kompass-band__bild) img{width:100%;height:100%;object-fit:cover} body.ds-seite .ds-bereich :is(.ds-ueber__bild,.ds-kompass__bild) img{height:auto} body.ds-seite .ds-bereich .ds-ueber__bild img{aspect-ratio:4/5;height:auto;object-fit:cover} body.ds-seite .ds-bereich :is(ul,ol){margin:0;padding:0;list-style:none} body.ds-seite .ds-bereich a{color:inherit;text-decoration:none} body.ds-seite .ds-bereich [id],body.ds-seite .ds-bereich[id]{scroll-margin-top:calc(var(--ds-header-h) + 12px)} /* ---------- 1 Grundlagen ---------- */ .ds-seite{font-family:var(--ds-sans);color:var(--ds-ink);font-size:1.02rem;line-height:1.65;-webkit-font-smoothing:antialiased} /* Feine Koernung ueber der ganzen Seite. Signatur der DS-Welt. */ .ds-seite::after{ content:"";position:fixed;inset:0;z-index:70;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity:.05; } /* Dunkle Flaechen: Text in Creme, nie Weiss. Helle Flaechen setzen Tinte selbst. */ body.ds-seite .ds-bereich{font-family:var(--ds-sans);font-size:1.02rem;line-height:1.65;color:var(--ds-cream-text);overflow-x:clip} body.ds-seite .ds-bereich.ds-hell,body.ds-seite .ds-bereich.ds-creme{color:var(--ds-ink)} /* ---------- 2 v14-Bausteine ---------- */ /* ---------- Fokus, sichtbar auf jeder Flaeche ---------- */ a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{ outline:2px solid var(--ds-cream-text);outline-offset:3px;border-radius:var(--ds-r-flach); } .ds-hell a:focus-visible,.ds-hell button:focus-visible,.ds-hell input:focus-visible, .ds-creme a:focus-visible,.ds-creme button:focus-visible,.ds-creme input:focus-visible{ outline:2px solid var(--ds-petrol); } /* ---------- Raster und Flaechen ---------- */ .ds-innen{width:min(1140px,calc(100% - 48px));margin-inline:auto;position:relative;z-index:2} @media (max-width:600px){ .ds-innen{width:calc(100% - 36px)} } .ds-abschnitt{padding:112px 0;position:relative;overflow:hidden} @media (max-width:960px){ .ds-abschnitt{padding:76px 0} } .ds-tief{background:var(--ds-forest-deep)} .ds-gruen{background:var(--ds-forest)} .ds-hell{background:var(--ds-sand);color:var(--ds-ink)} .ds-creme{background:var(--ds-cream);color:var(--ds-ink)} .ds-mitte{text-align:center} h1 em,h2 em,h3 em{font-style:italic} /* Grosse kursive Ueberschriften-Teile: auf dunkel Zwischenton, auf hell #c99227 */ h1 em,h2 em{color:var(--ds-gold-mittel)} .ds-hell h2,.ds-creme h2,.ds-hell h3,.ds-creme h3{color:var(--ds-forest)} .ds-hell h2 em,.ds-creme h2 em{color:var(--ds-gold)} /* ---------- Ueberschriften-Stufen ---------- */ .ds-h-b{font-size:clamp(1.9rem,3.6vw,2.9rem)} .ds-h-c{font-size:clamp(1.6rem,2.8vw,2.3rem)} /* ---------- Knoepfe ---------- */ .ds-knopf{ display:inline-flex;align-items:center;justify-content:center; min-height:50px;padding:0 30px;border-radius:var(--ds-r-pille);border:0; font-family:var(--ds-sans);font-weight:700;font-size:.8rem; letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer; background:var(--ds-gold);color:#16120b; transition:transform .5s var(--ds-bezier),filter .5s var(--ds-bezier); } .ds-knopf:hover{transform:translateY(-2px);filter:brightness(1.06)} .ds-knopf:active{transform:translateY(1px)} .ds-knopf-hell{background:transparent;border:1px solid rgba(245,240,232,.75);color:var(--ds-cream-text)} .ds-knopf-hell:hover{background:rgba(245,240,232,.08);filter:none} .ds-knopf-pille{min-height:42px;padding:0 22px;font-size:.7rem} .ds-notiz{font-size:.88rem;color:rgba(243,237,225,.82);margin:0} /* ---------- Hero ---------- */ .ds-hero{ position:relative;overflow:hidden;background:var(--ds-forest); margin-top:0; /* 1.3.4: Hero + Leiste = genau ein Bildschirm. Mindesthoehe 640px statt 820px, sonst rutscht die Leiste auf Laptops unter die Falz. */ min-height:max(640px,min(calc(100dvh - var(--ds-header-h)),960px)); display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start; padding-bottom:160px; /* Platz fuer die Leiste (126px) plus Rand, 1.3.5 */ } .ds-hero__bild{position:absolute;inset:0;z-index:0} .ds-hero__bild img{width:100%;height:100%;object-fit:cover;object-position:74% 18%} /* Der Schleier liegt NUR auf der Textseite. Auf Daniela liegt keine Farbe. */ .ds-hero__schleier{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(97deg, rgba(9,40,41,.92) 0%, rgba(9,40,41,.84) 28%, rgba(9,40,41,.5) 46%, rgba(9,40,41,.14) 60%, rgba(9,40,41,0) 70%); } .ds-hero__aus{ position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(14,70,71,0) 0%,rgba(14,70,71,.45) 40%,rgba(14,70,71,.92) 78%,var(--ds-forest) 100%); } .ds-hero__innen{padding:clamp(40px,7vh,140px) 0 0} .ds-hero__text{max-width:660px} .ds-hero h1{font-size:clamp(2.5rem,5.6vw,4.5rem);line-height:1.12;color:var(--ds-cream-text);margin:0} .ds-hero h1 em{display:inline} .ds-hero__sub{margin:24px 0 34px;font-size:1.06rem;max-width:560px;color:rgba(243,237,225,.9)} /* Glasstelle 1: Hero-Leiste mit den vier Belegen */ .ds-leiste{position:absolute;left:0;right:0;bottom:clamp(10px,1.4vw,20px);z-index:6} .ds-leiste__glas{ display:grid;grid-template-columns:repeat(4,1fr);gap:2px; background:rgba(245,240,232,.13);border:1px solid rgba(255,255,255,.3); border-radius:var(--ds-r-glas);overflow:hidden; -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.32); } .ds-leiste__zelle{padding:20px 22px;color:var(--ds-cream-text);text-align:center} .ds-leiste__zelle + .ds-leiste__zelle{border-left:1px solid rgba(255,255,255,.16)} .ds-leiste__zelle b{display:block;font-weight:700;font-size:.83rem;letter-spacing:.04em;color:var(--ds-blitz)} .ds-leiste__zelle span{display:block;font-size:.8rem;color:rgba(243,237,225,.82);margin-top:4px;line-height:1.45} @media (max-width:960px){ .ds-hero{min-height:0;display:block;padding-bottom:36px} .ds-hero__innen{padding:96px 0 24px} .ds-leiste{position:static;animation:none} .ds-leiste__glas{grid-template-columns:repeat(2,1fr)} .ds-leiste__zelle:nth-child(3){border-left:0} .ds-leiste__zelle:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)} } /* Mobil: Schleier senkrecht von unten, Gesicht bleibt oben frei, der Text steht im unteren Drittel auf dunklem Grund. Hoehe max. 100dvh. */ @media (max-width:700px){ /* 1.5.1: Bild oben als Band, Text darunter. Vorher 100dvh-Kasten: auf echten Handys passten Text und Leiste nicht hinein, der Text rutschte unter die Kopfzeile und das Bild zoomte auf das Gesicht. */ .ds-hero{display:block;min-height:0;max-height:none;padding-bottom:0} /* Band hoeher (volle Breite als Hoehe), geklippt und ohne Zoom: der Zoom liess auf dem Handy einen Bildstreifen unter dem Band langsam verschwinden (Daniela 9.9.: "Spalt, der sich fuellt") */ .ds-hero__bild{position:absolute;top:0;left:0;right:0;bottom:auto;height:min(100vw,520px);overflow:hidden} .ds-hero__bild img{object-position:62% 12%;animation:none;transform:none} .ds-hero__schleier{display:none} .ds-hero__aus{ top:0;bottom:auto;height:min(100vw,520px); background:linear-gradient(180deg,rgba(14,70,71,0) 0%,rgba(14,70,71,0) 36%,rgba(14,70,71,.6) 62%,rgba(14,70,71,.92) 84%,var(--ds-forest) 100%); } .ds-hero__innen{padding:calc(min(100vw,520px) - 104px) 0 14px} .ds-hero h1{font-size:clamp(1.85rem,7.4vw,2.5rem)} .ds-hero__sub{margin:12px 0 18px;font-size:.94rem;line-height:1.5} .ds-hero .ds-knopf{min-height:44px;padding:0 22px;font-size:.7rem} .ds-leiste{padding-bottom:12px} .ds-leiste__zelle{padding:9px 12px} .ds-leiste__zelle b{font-size:.7rem;letter-spacing:.02em} .ds-leiste__zelle span{font-size:.66rem;line-height:1.35;margin-top:2px} } /* ---------- Spiegel: klebende Ueberschrift links, Liste rechts ---------- */ .ds-spiegel__raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);gap:64px} .ds-spiegel__kopf{position:sticky;top:calc(var(--ds-header-h) + 44px);align-self:start} .ds-spiegel__kopf h2{color:var(--ds-cream-text)} .ds-spiegel__liste li{ padding:26px 0;border-bottom:1px solid var(--ds-line-dark); font-size:1.04rem;color:rgba(243,237,225,.86); } .ds-spiegel__liste li:first-child{border-top:1px solid var(--ds-line-dark)} .ds-spiegel__liste strong{color:var(--ds-blitz);font-weight:600} @media (max-width:960px){ .ds-spiegel__raster{grid-template-columns:1fr;gap:34px} .ds-spiegel__kopf{position:static} } /* ---------- Vollbild-Abschnitte ---------- */ .ds-vollbild{position:relative;overflow:hidden;background:var(--ds-forest-deep)} .ds-vollbild__bild{position:absolute;inset:0;z-index:0} .ds-vollbild__bild img{width:100%;height:100%;object-fit:cover} .ds-vollbild__schleier{position:absolute;inset:0;z-index:1;pointer-events:none} .ds-vollbild__inhalt{position:relative;z-index:2} /* Schwelle: ein Blitzsatz, mittig und breit (Ueberschriften-Stufe A) */ .ds-schwelle{min-height:min(84vh,760px);display:flex;align-items:center;padding:96px 0} .ds-schwelle .ds-vollbild__bild img{object-position:50% 45%} .ds-schwelle .ds-vollbild__schleier{ background:linear-gradient(180deg,rgba(9,40,41,.32) 0%,rgba(9,40,41,.58) 50%,rgba(9,40,41,.38) 100%); } .ds-schwelle .ds-innen{display:flex;flex-direction:column;align-items:center;text-align:center} .ds-schwelle .ds-satz{ font-family:var(--ds-serif);font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.22; max-width:34ch;margin:0 auto;color:var(--ds-cream-text); } .ds-schwelle .ds-satz em{font-style:italic;color:var(--ds-gold-mittel)} @media (max-width:900px){ .ds-schwelle{min-height:60vh;padding:72px 0} } /* ---------- Wege: zwei Tueren auf Nebelwald ---------- */ .ds-wege{background:var(--ds-forest)} .ds-wege__bild{position:absolute;inset:0;z-index:0;overflow:hidden} .ds-wege__bild img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 30%; } .ds-wege__bild::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(11,53,54,.72) 0%,rgba(11,53,54,.5) 26%,rgba(14,70,71,.32) 55%,rgba(14,70,71,.62) 100%); } .ds-wege__kopf{max-width:44ch;margin-bottom:44px} .ds-wege__kopf h2{color:var(--ds-cream-text);margin-bottom:16px} .ds-wege__kopf p{font-size:1.08rem;color:rgba(243,237,225,.9);margin:0} .ds-tueren{ display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:clamp(22px,3.4vw,40px);align-items:stretch; } /* Glasstelle 2: die zwei Tueren */ .ds-tuer{ display:flex;flex-direction:column;padding:clamp(28px,3.4vw,42px); border-radius:var(--ds-r-glas); -webkit-backdrop-filter:blur(28px) saturate(1.25);backdrop-filter:blur(28px) saturate(1.25); } .ds-tuer--fuehrt{ background:rgba(32,84,85,.55);border:1px solid rgba(233,200,132,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 34px 74px rgba(4,22,23,.5); } .ds-tuer--zweite{ background:rgba(245,240,232,.06);border:1px solid rgba(255,255,255,.22); box-shadow:0 24px 56px rgba(4,22,23,.36); } .ds-tuer__ueber{ font-size:.7rem;font-weight:700;letter-spacing:.2em;line-height:1.65; text-transform:uppercase;color:var(--ds-blitz);margin:0 0 12px; } .ds-tuer h3{font-size:clamp(1.3rem,2.1vw,1.7rem);max-width:none;color:var(--ds-cream-text);margin:0} .ds-tuer p{margin:16px 0 0;font-size:.97rem;color:rgba(243,237,225,.86)} .ds-tuer__liste{margin:20px 0 22px} .ds-tuer__liste li{ position:relative;padding:11px 0 11px 28px;font-size:.95rem; color:rgba(243,237,225,.9);border-top:1px solid var(--ds-line-dark); } .ds-tuer__liste li::before{ content:"";position:absolute;left:0;top:20px;width:12px;height:1px; background:var(--ds-blitz);border-radius:var(--ds-r-flach); } .ds-tuer p:last-of-type{margin-bottom:22px} .ds-tuer .ds-knopf{margin-top:auto;align-self:flex-start;min-height:44px;padding:0 22px;font-size:.7rem;letter-spacing:.13em} .ds-wege__schluss{margin:38px 0 0;font-family:var(--ds-serif);font-size:1.28rem;color:var(--ds-cream-text)} @media (max-width:900px){ .ds-tueren{grid-template-columns:1fr} } /* ---------- Ueber mich: Passepartout statt Schattenkarte ---------- */ .ds-ueber__raster{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.1fr);gap:60px;align-items:center} .ds-ueber__bild{ margin:0;padding:14px;border:1px solid var(--ds-line-dark); background:rgba(245,240,232,.05);border-radius:var(--ds-r-flach); } .ds-ueber__bild img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--ds-r-flach)} .ds-ueber h2{color:var(--ds-cream-text);margin-bottom:18px} .ds-ueber__stimme{ font-family:var(--ds-serif);font-style:italic;font-size:1.36rem;line-height:1.4; color:var(--ds-blitz);margin:0 0 24px; } .ds-ueber p{color:rgba(243,237,225,.86)} .ds-ueber__belege{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px} .ds-ueber__belege li{ font-size:.8rem;letter-spacing:.04em;padding:9px 16px;border-radius:var(--ds-r-pille); border:1px solid rgba(255,255,255,.22);background:rgba(245,240,232,.08);color:var(--ds-cream-text); } @media (max-width:900px){ .ds-ueber__raster{grid-template-columns:1fr;gap:36px} } /* ---------- Drei Schritte: keine Karten, drei versetzte Spalten ---------- */ .ds-schritte h2{color:var(--ds-cream-text);margin-bottom:48px} .ds-schritte__raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,52px);align-items:start} .ds-schritt{padding-top:22px;border-top:1px solid var(--ds-line-dark)} .ds-schritt:nth-child(2){margin-top:0} .ds-schritt:nth-child(3){margin-top:0} .ds-schritt__ziffer{ display:block;font-family:var(--ds-serif);font-weight:400;font-size:3rem;line-height:1; color:rgba(243,237,225,.6);margin-bottom:16px; } .ds-schritt h3{font-size:1.42rem;color:var(--ds-cream-text);margin-bottom:10px} .ds-schritt p{font-size:.96rem;color:rgba(243,237,225,.84);margin:0} .ds-schritte__fuss{ margin-top:56px;display:flex;align-items:center;gap:24px;flex-wrap:wrap; } @media (max-width:900px){ .ds-schritte__raster{grid-template-columns:1fr;gap:32px} .ds-schritt:nth-child(2),.ds-schritt:nth-child(3){margin-top:0} .ds-schritte__fuss{margin-top:40px} } /* ---------- Stimmen, helle Atempause ---------- */ .ds-stimmen h2{margin-bottom:14px} .ds-stimmen__vor{max-width:56ch;margin:0 auto 54px;color:var(--ds-petrol);font-size:.98rem} .ds-stimmen__raster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(30px,4vw,54px);text-align:left} .ds-stimmen__paar{display:grid;gap:34px;align-content:start} .ds-stimme{margin:0} .ds-stimme blockquote{margin:0 0 16px;font-family:var(--ds-serif);font-size:1.14rem;line-height:1.45;color:var(--ds-ink)} .ds-stimme--gross blockquote{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.38} .ds-stimme cite{ font-style:normal;font-size:.84rem;letter-spacing:.06em;display:block; padding-top:14px;border-top:1px solid var(--ds-line);color:var(--ds-petrol); } .ds-stimme cite strong{color:var(--ds-ink);font-weight:700;letter-spacing:.02em;font-size:.95rem} @media (max-width:900px){ .ds-stimmen__raster{grid-template-columns:1fr;gap:34px} } /* ---------- Kompass-Text, hell und mittig ---------- */ .ds-kompass-text{padding-bottom:clamp(72px,8vw,110px)} .ds-kompass-text h2{max-width:22ch;margin-inline:auto} .ds-kompass-text p{max-width:56ch;margin:24px auto 0;color:var(--ds-ink)} /* ---------- Sonnenaufgang-Streifen mit Schluss-Panel ---------- */ .ds-kompass-band{ position:relative;height:clamp(560px,52vw,720px);background:var(--ds-forest-deep); display:flex;align-items:center;justify-content:center;padding:56px 0; } .ds-kompass-band__bild{position:absolute;inset:0;overflow:hidden} .ds-kompass-band__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%} .ds-kompass-band__bild::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(9,40,41,.30) 0%,rgba(9,40,41,.42) 55%,rgba(9,40,41,.62) 100%); } .ds-kompass-panel-halter{position:relative;z-index:6;display:flex;justify-content:center;width:100%} /* Glasstelle 3: Schluss-Panel */ .ds-kompass-panel{ width:min(680px,calc(100% - 40px));padding:52px 46px;text-align:center; border-radius:var(--ds-r-glas); background:rgba(245,240,232,.10);border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 30px 70px rgba(4,22,23,.48); } .ds-kompass-panel h2{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.12;color:var(--ds-cream-text);margin:0 0 20px} .ds-kompass-panel p.ds-frage{ font-family:var(--ds-serif);font-style:italic;font-size:1.42rem;line-height:1.35; color:var(--ds-cream-text);margin:0 0 30px; } .ds-kompass-panel p.ds-notiz{margin:16px 0 0} @media (max-width:600px){ .ds-kompass-band{height:auto;padding:70px 0} .ds-kompass-panel{padding:34px 22px} .ds-kompass-panel h2{font-size:clamp(1.6rem,6.4vw,2rem)} .ds-kompass-panel p.ds-frage{font-size:1.12rem;margin-bottom:24px}/* Bildschleier im Panelbereich dunkler, damit Creme 4,5:1 haelt */ .ds-kompass-band__bild::after{ background:linear-gradient(180deg,rgba(9,40,41,.45) 0%,rgba(9,40,41,.55) 50%,rgba(9,40,41,.62) 100%); } .ds-kompass-panel{background:rgba(9,40,41,.34)} } /* ---------- 8 Fragen: helle Atempause mit echtem Formular ---------- */ .ds-fragen__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(36px,5vw,72px);align-items:start} .ds-fragen h2{max-width:24ch;margin-bottom:20px} .ds-fragen__text p{color:var(--ds-ink);max-width:46ch} .ds-fragen h3{font-size:1.3rem;margin:0 0 20px} .ds-form{max-width:420px} .ds-form__feld{display:block;margin-bottom:18px} .ds-form label{display:block;font-size:.84rem;font-weight:600;letter-spacing:.04em;color:var(--ds-forest);margin-bottom:8px} .ds-form .ds-pflicht{color:var(--ds-petrol)} .ds-form input[type=email]{ width:100%;min-height:50px;padding:0 16px;border-radius:var(--ds-r-flach); border:1px solid var(--ds-line);background:var(--ds-cream);color:var(--ds-ink); font-family:var(--ds-sans);font-size:.96rem; } .ds-form input[type=email]:focus{outline:2px solid var(--ds-petrol);outline-offset:2px} .ds-form__zustimmung{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;font-size:.86rem;color:var(--ds-ink)} .ds-form__zustimmung input{margin:4px 0 0;width:16px;height:16px;accent-color:var(--ds-petrol);flex:0 0 auto} .ds-form__zustimmung a{color:var(--ds-petrol)} .ds-form__fehler{display:block;min-height:0;margin:6px 0 0;font-size:.82rem;color:#8a2f22} .ds-form__fehler:empty{margin:0} .ds-danke{ font-family:var(--ds-serif);font-size:1.3rem;line-height:1.4; color:var(--ds-forest);margin:0;max-width:420px; } @media (max-width:900px){ .ds-fragen__raster{grid-template-columns:1fr;gap:34px} } /* ---------- Bewegung ---------- */ .ds-r{ opacity:0;transform:translateY(26px);filter:blur(6px); transition:opacity .8s var(--ds-bezier),transform .8s var(--ds-bezier),filter .8s var(--ds-bezier); transition-delay:var(--d,0s); } .ds-r.ds-da{opacity:1;transform:none;filter:none} @keyframes ds-auf{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes ds-hoch{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}} @keyframes ds-zoom{from{transform:scale(1.06)}to{transform:scale(1)}} .ds-hero__bild img{animation:ds-zoom 6s var(--ds-bezier) both} .ds-hero h1{animation:ds-auf .9s var(--ds-bezier) .3s both} .ds-hero__sub{animation:ds-auf .9s var(--ds-bezier) .5s both} .ds-hero__knopf{animation:ds-auf .9s var(--ds-bezier) .65s both} .ds-leiste{animation:ds-hoch .9s var(--ds-bezier) .95s both} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important} .ds-r{opacity:1;transform:none;filter:none} } /* ---------- Ergaenzungen 8.9. (Daniela): Portrait am Ende, Leitsatz als Abschied ---------- */ .ds-kompass-text{text-align:left} .ds-kompass__raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,88px);align-items:center} .ds-kompass-text h2{margin-inline:0;max-width:18ch} .ds-kompass-text p{margin:24px 0 0} .ds-kompass__bild{margin:0;padding:14px;border:1px solid var(--ds-line);background:rgba(14,70,71,.04);border-radius:var(--ds-r-flach);max-width:440px;justify-self:end} .ds-kompass__bild img{display:block;width:100%;height:auto;border-radius:var(--ds-r-flach)} @media (max-width:860px){ .ds-kompass__raster{grid-template-columns:1fr;gap:34px} .ds-kompass__bild{max-width:360px;justify-self:start} } .ds-hero__ahnung{font-family:var(--ds-serif);font-style:italic;font-size:clamp(1.35rem,2.1vw,1.7rem);line-height:1.3;color:var(--ds-blitz);margin:22px 0 34px;max-width:30ch;animation:ds-auf .9s var(--ds-bezier) .42s both} .ds-hero__sub{margin-top:16px} @media (max-width:700px){ .ds-hero__ahnung{font-size:1.15rem;margin-top:14px} } @media (prefers-reduced-motion:reduce){ .ds-hero__ahnung{animation:none} } /* ---------- 8 Fragen als Creme-Panel auf Nachtgruen (Optik der v3-Impuls-Box, 8.9.) ---------- */ .ds-fragen{background:var(--ds-forest-deep)} .ds-fragen__panel{background:var(--ds-cream);color:var(--ds-ink);border-radius:var(--ds-r-flach); box-shadow:0 34px 90px rgba(5,26,27,.4);padding:clamp(36px,5vw,64px); display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,56px);align-items:start} .ds-fragen__label{display:block;letter-spacing:.15em;text-transform:uppercase;font-size:.74rem;font-weight:700;color:var(--ds-forest);margin:0 0 14px} .ds-fragen h2{color:var(--ds-ink);max-width:24ch;margin:0 0 16px} .ds-fragen__lede{color:var(--ds-ink);opacity:.82;max-width:46ch;margin:0 0 12px} .ds-form{max-width:none} .ds-form input[type=text]{width:100%;min-height:52px;padding:0 14px;border-radius:var(--ds-r-flach);border:1px solid #a9a396;background:#fff;color:var(--ds-ink);font-family:var(--ds-sans);font-size:.96rem} .ds-form input[type=email]{min-height:52px;border:1px solid #a9a396;background:#fff} .ds-form input[type=text]:focus{outline:2px solid var(--ds-petrol);outline-offset:2px} .ds-form__zustimmung{font-size:.83rem;color:var(--ds-ink);opacity:.9} @media (max-width:900px){ .ds-fragen__panel{grid-template-columns:1fr;padding:36px 22px;gap:32px} } /* ---------- Anpassungen 8.9. (Daniela): Groessen wie 13c, Stakes zurueck, Stimmen wie Live, Portrait ohne Rahmen, Leitsatz einzeilig ---------- */ .ds-hero h1 em{display:inline} .ds-hero__sub{margin:22px 0 32px;font-size:1.06rem;max-width:560px;color:rgba(243,237,225,.9);animation:ds-auf .9s var(--ds-bezier) .5s both} @media (max-width:700px){ .ds-hero__sub{margin:14px 0 20px;font-size:.96rem} } /* Ueberschriften allgemein wieder auf der 13c-Groesse, keine drei Stufen mehr */ .ds-h-b,.ds-h-c,.ds-spiegel__kopf h2,.ds-ueber h2,.ds-schritte h2,.ds-stimmen h2,.ds-fragen h2,.ds-kompass-text h2{font-size:clamp(1.9rem,3.4vw,2.9rem)} .ds-spiegel__kopf h2{font-size:clamp(1.9rem,3.4vw,2.9rem)} .ds-ueber h2{font-size:clamp(1.9rem,3.4vw,2.8rem)} .ds-schritte h2{font-size:clamp(1.9rem,3.6vw,2.9rem)} .ds-ueber__stimme{font-size:1.36rem} .ds-fragen h2{font-size:clamp(1.8rem,3vw,2.5rem)} /* Tueren-Label wie 13c */ .ds-tuer p.ds-tuer__ueber{font-size:.7rem;letter-spacing:.2em;font-weight:700;text-transform:uppercase;color:var(--ds-gold-mittel)} /* Stakes (13c) */ .ds-stakes{background:var(--ds-forest-deep)} .ds-stakes .ds-innen{display:flex;justify-content:center} .ds-stakes__panel{width:min(720px,100%);padding:52px 48px;text-align:center;border-radius:var(--ds-r-glas)} .ds-stakes h2{font-size:clamp(1.9rem,3.6vw,2.9rem);color:var(--ds-cream-text);margin-bottom:18px} .ds-stakes p{max-width:46ch;margin:0 auto 28px;color:rgba(243,237,225,.84)} @media (max-width:600px){ .ds-stakes__panel{padding:36px 24px} } /* Stimmen wie Live 5180-2 */ .ds-stimmen__vor{max-width:56ch;margin:16px auto 0;font-size:.92rem;color:var(--ds-petrol)} .ds-stimme-haupt{max-width:840px;margin:64px auto 0;text-align:center} .ds-stimme-haupt blockquote{margin:0 0 26px;font-family:var(--ds-serif);font-style:italic;font-size:clamp(1.4rem,2.5vw,2rem);line-height:1.45;color:#33403b} .ds-stimmen--neben{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;max-width:980px;margin:48px auto 0;text-align:left} .ds-stimme{margin:0;border-top:1px solid var(--ds-line);padding:26px 0 0} .ds-stimme blockquote{margin:0 0 18px;font-family:var(--ds-serif);font-style:italic;font-size:1.18rem;line-height:1.5;color:#33403b} .ds-stimme cite,.ds-stimme-haupt cite{font-style:normal;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ds-petrol);display:block;border:0;padding:0} .ds-stimme cite strong,.ds-stimme-haupt cite strong{color:var(--ds-forest);font-weight:700;font-size:.74rem;letter-spacing:.18em} @media (max-width:760px){ .ds-stimmen--neben{grid-template-columns:1fr;gap:40px} } /* Portrait ohne Rahmen */ .ds-kompass__bild--frei{padding:0;border:0;background:none} /* 8.9.: Belege-Leiste groesser, Ueber-mich-Bild ohne Passepartout */ .ds-leiste__zelle{padding:24px 26px} .ds-leiste__zelle b{font-size:1rem;letter-spacing:.03em} .ds-leiste__zelle span{font-size:.94rem;margin-top:6px;opacity:.88} @media (max-width:960px){ .ds-leiste__zelle b{font-size:.95rem} .ds-leiste__zelle span{font-size:.9rem} } .ds-ueber__bild{padding:0;border:0;background:none} /* 8.9.: Ueber mich gespiegelt, Bild rechts vom Text */ @media (min-width:901px){.ds-ueber__raster{grid-template-columns:minmax(0,1.1fr) minmax(0,.82fr)}} .ds-ueber__bild{order:2} @media (max-width:900px){ .ds-ueber__bild{order:0} } /* ---------- 3 Leitsatz-Band ueber der Elementor-Fusszeile ---------- */ .ds-leitsatz{background:var(--ds-footer);padding:56px 0 44px;text-align:center} .ds-leitsatz p{font-family:var(--ds-serif);font-size:clamp(1.1rem,1.6vw,1.45rem);line-height:1.3;color:var(--ds-cream-text);margin:0 auto 26px;white-space:nowrap} .ds-leitsatz p em{font-style:italic;color:var(--ds-blitz)} .ds-leitsatz hr{width:120px;height:1px;background:var(--ds-gold);margin:0 auto;border:0} @media (max-width:900px){.ds-leitsatz p{white-space:normal;max-width:30ch}} /* ========================================================================= 4 WORDPRESS- UND ASTRA-ANPASSUNGEN ========================================================================= */ /* Astra setzt die Wurzel-Schriftgroesse auf ~85.5 Prozent. Auf DS-Seiten gilt 1rem = 16px. */ html:has(body.ds-seite .ds-bereich){font-size:16px !important} /* Volle Breite auf Seiten mit DS-Bausteinen: Astras Container, Seitentitel und Innenabstaende raus (Vorlage "DS Vollbreite" ODER Astra "Gedehnt"). */ .ds-vollbreite .site-content .ast-container, .ast-page-builder-template .site-content .ast-container, body:has(.ds-bereich) .site-content .ast-container{max-width:none;padding-left:0;padding-right:0} body:has(.ds-bereich) .entry-header, body:has(.ds-bereich) .entry-title{display:none} body:has(.ds-bereich) .site-content{padding-bottom:0;padding-top:0} body:has(.ds-bereich) .site-content .ast-container .content-area, body:has(.ds-bereich) .site-main, body:has(.ds-bereich) .ds-artikel, body:has(.ds-bereich) .entry-content{margin:0;padding:0;max-width:none} /* WordPress schiebt zwischen Bloecke 24px Abstand, Astra gibt Bloecken ein Standard-Padding. Beides wuerde helle Streifen zwischen die dunklen Abschnitte reissen. */ body.ds-seite .entry-content > .ds-bereich, body.ds-seite .entry-content > .wp-block-html{margin-block:0 !important} body.ds-seite .entry-content > *{ --wp--custom--ast-default-block-top-padding:0; --wp--custom--ast-default-block-right-padding:0; --wp--custom--ast-default-block-bottom-padding:0; --wp--custom--ast-default-block-left-padding:0; } body.ds-seite .ds-bereich > *{margin-block:0} /* Falls ein Baustein doch in einem Block-Wrapper landet (Editor-Ansicht, Gruppe): kein Polster, kein Rand. */ body.ds-seite .entry-content > :is(.wp-block-html,.wp-block-group):has(> .ds-bereich){padding:0 !important;margin-block:0 !important;max-width:none} /* Astra-Reststile in DS-Bausteinen: Listen, Zitate, Links, Formulare. */ body.ds-seite .ds-bereich :is(ul,ol){list-style:none !important;margin:0 !important;padding:0 !important} body.ds-seite .ds-bereich li{margin:0} body.ds-seite .ds-bereich li::marker{content:none} body.ds-seite .ds-bereich blockquote{border:0 !important;background:transparent !important;padding:0 !important;font-style:italic} body.ds-seite .ds-bereich a{text-decoration:none !important} body.ds-seite .ds-bereich figure{margin:0} body.ds-seite .ds-bereich input[type=text],body.ds-seite .ds-bereich input[type=email]{box-shadow:none} body.ds-seite .ds-bereich .ds-knopf{text-decoration:none !important;border:0;line-height:1} body.ds-seite .ds-bereich .ds-knopf-hell{border:1px solid rgba(245,240,232,.75)} body.ds-seite .ds-bereich button.ds-knopf{appearance:none;-webkit-appearance:none} /* Fusszeile aus Elementor: kein heller Streifen zwischen Leitsatz und Fusszeile. */ body:has(.ds-bereich) footer.elementor-location-footer, body:has(.ds-bereich) .site-footer{margin-top:0} /* ========================================================================= 5 KOPFZEILE (Elementor), Logo, Sprachumschalter - unveraendert aus 1.1.2 ========================================================================= */ /* ---------- Kopfzeile in Waldgruen ---------- Astras Kopfzeile bekommt den dunklen Grund, damit sie den Hero fortsetzt statt ihn abzuschneiden. Gilt auf allen Seiten, damit die Navigation ueberall gleich aussieht. */ .site-header, .ast-primary-header-bar, .main-header-bar, .ast-header-break-point .main-header-bar{ background-color:var(--ds-forest) !important; border-bottom:1px solid rgba(245,240,232,.12) !important; } .site-header .site-title, .site-header .site-title a, .site-header .site-description, .ast-site-identity .site-title a{ color:var(--ds-cream-text) !important; font-family:var(--ds-serif); } .site-header .site-description{color:var(--ds-gold-soft) !important;letter-spacing:.16em;text-transform:uppercase;font-family:var(--ds-sans)} .main-header-menu > li > a, .main-navigation ul li a, .ast-header-break-point .main-header-menu a{ color:rgba(243,237,225,.88) !important; } .main-header-menu > li > a:hover, .main-navigation ul li a:hover, .main-header-menu .current-menu-item > a{ color:var(--ds-blitz) !important; } /* Untermenues bleiben dunkel, damit nichts aufblitzt */ .main-header-menu .sub-menu{ background-color:var(--ds-forest-deep) !important; border-color:rgba(245,240,232,.12) !important; } /* Burger-Symbol und mobiles Menue */ .ast-mobile-menu-buttons .menu-toggle, .ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-minimal{ background:transparent !important;color:var(--ds-cream-text) !important; } .ast-mobile-menu-buttons svg, .menu-toggle .ast-mobile-svg{fill:var(--ds-cream-text) !important} .ast-header-break-point .ast-mobile-header-wrap .main-header-bar, .ast-mobile-popup-drawer .ast-mobile-popup-inner{ background-color:var(--ds-forest) !important; } /* Ein Knopf im Menue bleibt Gold */ .main-header-menu .ast-menu-toggle, .main-header-menu li.ds-menue-knopf > a{ background:var(--ds-gold) !important;color:#16120b !important; border-radius:var(--ds-r-flach);padding:11px 20px !important;font-weight:700; } .main-header-menu li.ds-menue-knopf > a:hover{filter:brightness(1.06)} /* ---------- Logo und Hoehe der Kopfzeile ---------- Gemessen am Live-Stand (19.8.2026): die Kopfzeile kommt NICHT von Astra, sondern aus einer Elementor-Header-Vorlage (header.elementor-location-header). Sie war 106px hoch. Getrieben hat das das Logobild mit 85px Hoehe, dazu eine Container-Mindesthoehe von 73px. Deshalb setzt dieser Block beides: die Bildhoehe des Logos und die Hoehe der Leiste. Groesse aendern: NUR die beiden Werte --ds-logo-h und --ds-kopf-h anpassen, unten stehen die Stufen fuer Tablet und Handy. Die Astra-Regeln am Ende greifen nur, falls eine Seite ohne die Elementor-Vorlage ausgeliefert wird. Astra selbst setzt das Logo per Inline-CSS auf 80px Breite, unter 544px sogar auf 151px - auf dem Handy war es also breiter als am Rechner. */ :root{ --ds-logo-h:40px; /* Hoehe des Logobildes */ --ds-kopf-h:56px; /* Hoehe der Kopfzeile */ } @media (max-width:1024px){ :root{ --ds-logo-h:36px; --ds-kopf-h:52px; } } @media (max-width:544px){ :root{ --ds-logo-h:32px; --ds-kopf-h:48px; } } /* ---------- Elementor-Kopfzeile, sanft angepasst (1.4.3/1.4.4, Daniela 8.9.) ---------- Der gruene Grund bleibt volle Breite (er liegt auf dem Container). Innen rueckt der Inhalt auf die Textbreite der Seite (1140px wie .ds-innen), damit Logo links und Social-Symbole rechts buendig mit dem Seitentext stehen. Logo etwas kleiner (64px) mit mehr Luft oben und unten. */ header.elementor-location-header > .e-con.e-parent{ padding-top:16px !important;padding-bottom:16px !important; padding-left:max(24px,calc((100% - 1140px) / 2)) !important; padding-right:max(24px,calc((100% - 1140px) / 2)) !important; } header.elementor-location-header .elementor-widget-image img, header.elementor-location-header .elementor-widget-theme-site-logo img{ height:64px !important;width:auto !important;max-width:none !important; } /* 1.4.4: Das Logo-Widget darf im Flex-Kopf nicht schrumpfen, sonst wird das Logo in der Breite gestaucht (das Menue-Widget hat 100 % Breite). */ header.elementor-location-header .elementor-widget-image, header.elementor-location-header .elementor-widget-theme-site-logo{ flex:0 0 auto !important;width:auto !important;max-width:none !important; } header.elementor-location-header .elementor-widget-image > .elementor-widget-container{padding:0 !important;line-height:0} @media (max-width:1024px){ header.elementor-location-header .elementor-widget-image img, header.elementor-location-header .elementor-widget-theme-site-logo img{height:52px !important} header.elementor-location-header > .e-con.e-parent{padding-top:12px !important;padding-bottom:12px !important} } @media (max-width:600px){ header.elementor-location-header .elementor-widget-image img, header.elementor-location-header .elementor-widget-theme-site-logo img{height:44px !important} header.elementor-location-header > .e-con.e-parent{padding-left:18px !important;padding-right:18px !important} } /* Astra-Kopfzeile: Rueckfall fuer Seiten ohne Elementor-Vorlage. */ .site-header .custom-logo-link img, .ast-site-identity .custom-logo-link img, .site-header .astra-logo-svg, .ast-mobile-header-wrap .custom-logo-link img{ height:var(--ds-logo-h) !important; max-height:var(--ds-logo-h) !important; width:auto !important; max-width:100% !important; } .site-header .site-logo-img, .ast-site-identity .site-logo-img{ padding:0 !important; } .ast-primary-header-bar, .ast-primary-header-bar .site-primary-header-wrap{ min-height:var(--ds-kopf-h) !important; } .ast-primary-header-bar .main-header-menu > .menu-item{ line-height:var(--ds-kopf-h) !important; } @media (min-width:922px){ .main-header-bar{ padding:0 !important; } } /* ---------- Sprachumschalter (TranslatePress) ---------- Damit DE und EN im DS-Ton erscheinen und nicht wie ein Fremdkoerper. */ .trp-language-switcher-container, #trp-floater-ls{font-family:var(--ds-sans)} .trp-language-switcher>div{ background:transparent;border:1px solid var(--ds-line); border-radius:var(--ds-r-flach);padding:6px 12px; font-size:.82rem;letter-spacing:.06em;text-transform:uppercase; color:var(--ds-forest); } .ds-flaeche-gruen .trp-language-switcher>div, .ds-flaeche-tief .trp-language-switcher>div, .ds-hero .trp-language-switcher>div{ border-color:var(--ds-line-dark);color:var(--ds-cream-text); } .trp-language-switcher .trp-ls-shortcode-language a{color:inherit;text-decoration:none} .trp-language-switcher .trp-ls-shortcode-language a:hover{color:var(--ds-gold)} /* ========================================================================= 6 SCHRIFT- UND FARB-DURCHSETZUNG (ganz am Ende, gewinnt die Kaskade) Astra druckt sein Customizer-CSS NACH diesem Stylesheet und wuerde sonst Schriften und Farben der DS-Bereiche ueberschreiben. ========================================================================= */ body.ds-seite .ds-bereich :is(p,li,a,cite,span,small,strong,b,label,input,button){font-family:var(--ds-sans) !important} body.ds-seite .ds-bereich :is(h1,h2,h3,blockquote,.ds-satz,.ds-frage,.ds-ueber__stimme,.ds-wege__schluss,.ds-schritt__ziffer,.ds-danke,.ds-leitsatz p,.ds-leitsatz__text){font-family:var(--ds-serif) !important} body.ds-seite .ds-bereich :is(h1,h2){font-weight:400 !important} body.ds-seite .ds-bereich h3{font-weight:500 !important} body.ds-seite .ds-bereich :is(h1,h2,h3){text-transform:none !important;letter-spacing:0 !important} body.ds-seite .ds-bereich .ds-knopf{font-family:var(--ds-sans) !important;text-transform:uppercase !important;letter-spacing:.16em !important;font-weight:700 !important} body.ds-seite .ds-bereich .ds-knopf-pille{letter-spacing:.13em !important} body.ds-seite .ds-bereich.ds-hero h1, body.ds-seite .ds-bereich :is(.ds-tief,.ds-gruen) h2, body.ds-seite .ds-bereich.ds-tief h2,body.ds-seite .ds-bereich.ds-gruen h2,body.ds-seite .ds-bereich.ds-wege h2, body.ds-seite .ds-kompass-panel h2,body.ds-seite .ds-stakes h2{color:var(--ds-cream-text) !important} body.ds-seite .ds-bereich :is(h1,h2) em{color:var(--ds-gold-mittel) !important} body.ds-seite .ds-bereich.ds-hell :is(h2,h3),body.ds-seite .ds-bereich.ds-creme :is(h2,h3){color:var(--ds-forest) !important} body.ds-seite .ds-bereich.ds-hell h2 em,body.ds-seite .ds-bereich.ds-creme h2 em{color:var(--ds-gold) !important} body.ds-seite .ds-bereich.ds-tief.ds-fragen h2,body.ds-seite .ds-fragen h2{color:var(--ds-ink) !important} body.ds-seite .ds-bereich.ds-tief.ds-fragen h2 em,body.ds-seite .ds-fragen h2 em{color:var(--ds-gold) !important} body.ds-seite .ds-bereich .ds-knopf,body.ds-seite .ds-bereich .ds-knopf:hover{color:#16120b !important;background:var(--ds-gold) !important} body.ds-seite .ds-bereich .ds-knopf-hell,body.ds-seite .ds-bereich .ds-knopf-hell:hover{color:var(--ds-cream-text) !important;background:transparent !important} body.ds-seite .ds-bereich .ds-knopf-hell:hover{background:rgba(245,240,232,.08) !important} /* ========================================================================= 7 BLOCK-EDITOR (1.2.1, 8.9.2026) Im Editor laeuft ds.js nicht. Ohne diese Regeln bleiben alle Elemente mit der Klasse ds-r unsichtbar (Einblend-Startzustand), und die Seite wirkt leer. Ausserdem gibt es dort kein .entry-content, sondern .editor-styles-wrapper; die Grundregeln gelten deshalb auch dort. ========================================================================= */ .editor-styles-wrapper .ds-r, .block-editor-block-preview__content .ds-r{opacity:1 !important;transform:none !important;filter:none !important} .editor-styles-wrapper .ds-hero__bild img, .editor-styles-wrapper .ds-hero h1, .editor-styles-wrapper .ds-hero__sub, .editor-styles-wrapper .ds-hero__knopf, .editor-styles-wrapper .ds-leiste{animation:none !important;opacity:1 !important;transform:none !important} .editor-styles-wrapper .ds-bereich{font-family:var(--ds-sans);font-size:1.02rem;line-height:1.65;color:var(--ds-cream-text)} .editor-styles-wrapper .ds-bereich.ds-hell,.editor-styles-wrapper .ds-bereich.ds-creme{color:var(--ds-ink)} .editor-styles-wrapper .ds-bereich :is(h1,h2){font-family:var(--ds-serif);font-weight:400;line-height:1.12;margin:0} .editor-styles-wrapper .ds-bereich h3{font-family:var(--ds-serif);font-weight:500;line-height:1.2;margin:0} .editor-styles-wrapper .ds-bereich :is(ul,ol){list-style:none;margin:0;padding:0} .editor-styles-wrapper .ds-bereich img{max-width:100%;display:block} .editor-styles-wrapper .ds-bereich :is(.ds-hero__bild,.ds-vollbild__bild,.ds-wege__bild,.ds-kompass-band__bild) img{width:100%;height:100%;object-fit:cover} .editor-styles-wrapper .ds-bereich :is(.ds-ueber__bild,.ds-kompass__bild) img{height:auto} .editor-styles-wrapper .ds-bereich a{color:inherit;text-decoration:none} .editor-styles-wrapper .ds-hero{min-height:720px} /* ========================================================================= 8 GUTENBERG-BLOECKE (1.3.0, 8.9.2026) Seit 1.3.0 steht die Startseite als native Bloecke in der Seite (seiten/startseite-v14-editor.html), damit Daniela Texte anklicken und Bilder ueber die Mediathek tauschen kann. Damit wechseln drei Dinge: - jeder Wrapper ist jetzt ein .wp-block-group statt eines
, - der Knopf ist ein
mit einem darin (vorher war das selbst der Knopf), - Bilder sind
, Zitate sind
mit

darin. Diese Schicht bringt die Optik exakt auf den Stand der HTML-Fassung zurueck. Die Grundregeln stehen bewusst in :where(...), damit sie Spezifitaet 0 haben: sie schlagen WordPress' Layout-Standard, aber JEDE DS-Regel mit einer Klasse schlaegt sie. ========================================================================= */ /* ---------- 8.1 Block-Wrapper neutral ---------- */ :where(body.ds-seite .ds-bereich .wp-block-group), :where(.editor-styles-wrapper .ds-bereich .wp-block-group){ --wp--custom--ast-default-block-top-padding:0; --wp--custom--ast-default-block-right-padding:0; --wp--custom--ast-default-block-bottom-padding:0; --wp--custom--ast-default-block-left-padding:0; padding:0;max-width:none; } /* WordPress setzt zwischen Bloecke 24px. Auf DS-Flaechen kommt jeder Abstand aus dem Designsystem, nicht aus dem Editor. */ :where(body.ds-seite .ds-bereich) :where(.wp-block-group,.wp-block-buttons) > *, :where(.editor-styles-wrapper .ds-bereich) :where(.wp-block-group,.wp-block-buttons) > *{margin-block:0} :where(body.ds-seite .ds-bereich) :where(.is-layout-flow,.is-layout-constrained) > * + *, :where(.editor-styles-wrapper .ds-bereich) :where(.is-layout-flow,.is-layout-constrained) > * + *{margin-block-start:0} /* Dieselbe Aussage noch einmal hart fuer die Wrapper, die im Designsystem keinen eigenen Aussenabstand haben - unabhaengig von der Ladereihenfolge. */ body.ds-seite .ds-bereich :is(.wp-block-buttons,.wp-block-image,.wp-block-separator, .ds-innen,.ds-hero__innen,.ds-hero__text,.ds-leiste,.ds-leiste__glas, .ds-spiegel__raster,.ds-spiegel__kopf,.ds-vollbild__inhalt,.ds-stakes__panel, .ds-tueren,.ds-tuer,.ds-ueber__raster,.ds-schritte__raster,.ds-schritt, .ds-kompass__raster,.ds-kompass__text,.ds-kompass-panel-halter,.ds-kompass-panel, .ds-fragen__panel,.ds-fragen__text,.ds-fragen__aktion), .editor-styles-wrapper .ds-bereich :is(.wp-block-buttons,.wp-block-image,.wp-block-separator, .ds-innen,.ds-hero__innen,.ds-hero__text,.ds-leiste,.ds-leiste__glas, .ds-spiegel__raster,.ds-spiegel__kopf,.ds-vollbild__inhalt,.ds-stakes__panel, .ds-tueren,.ds-tuer,.ds-ueber__raster,.ds-schritte__raster,.ds-schritt, .ds-kompass__raster,.ds-kompass__text,.ds-kompass-panel-halter,.ds-kompass-panel, .ds-fragen__panel,.ds-fragen__text,.ds-fragen__aktion){margin-block:0} /* Die Abschnitte selbst sind jetzt direkte Kinder von .entry-content. */ body.ds-seite .entry-content > .ds-bereich.wp-block-group{margin-block:0 !important;max-width:none;padding-inline:0} /* WordPress gibt jeder Gruppe box-sizing:border-box. Bei den drei Abschnitten mit fester Hoehe (Hero, Schwelle, Sonnenaufgang-Band) waere der Abschnitt dadurch um sein eigenes Polster kuerzer als in der HTML-Fassung. Der aeussere Abschnitt rechnet deshalb wie vorher. */ body.ds-seite .ds-bereich.wp-block-group, /* ---------- 8.2 Abstaende der Bausteine zurueckholen ---------- */ body.ds-seite .ds-bereich .ds-wege__kopf, .editor-styles-wrapper .ds-bereich .ds-wege__kopf{margin:0 0 44px} body.ds-seite .ds-bereich .ds-schritte__fuss, .editor-styles-wrapper .ds-bereich .ds-schritte__fuss{margin:56px 0 0} body.ds-seite .ds-bereich .ds-stimmen--neben, .editor-styles-wrapper .ds-bereich .ds-stimmen--neben{margin:48px auto 0} /* Ueberschriften */ body.ds-seite .ds-bereich.ds-ueber h2, .editor-styles-wrapper .ds-bereich.ds-ueber h2{margin:0 0 18px} body.ds-seite .ds-bereich.ds-schritte h2, .editor-styles-wrapper .ds-bereich.ds-schritte h2{margin:0 0 48px} body.ds-seite .ds-bereich.ds-stimmen h2, .editor-styles-wrapper .ds-bereich.ds-stimmen h2{margin:0 0 14px} body.ds-seite .ds-bereich.ds-stakes h2, .editor-styles-wrapper .ds-bereich.ds-stakes h2{margin:0 0 18px} body.ds-seite .ds-bereich.ds-fragen h2, .editor-styles-wrapper .ds-bereich.ds-fragen h2{margin:0 0 16px} body.ds-seite .ds-bereich .ds-wege__kopf h2, .editor-styles-wrapper .ds-bereich .ds-wege__kopf h2{margin:0 0 16px} body.ds-seite .ds-bereich .ds-kompass-panel h2, .editor-styles-wrapper .ds-bereich .ds-kompass-panel h2{margin:0 0 20px} body.ds-seite .ds-bereich .ds-schritt h3, .editor-styles-wrapper .ds-bereich .ds-schritt h3{margin:0 0 10px} /* Absaetze mit eigener Klasse */ body.ds-seite .ds-bereich p.ds-hero__sub{margin:22px 0 32px} body.ds-seite .ds-bereich p.ds-satz{margin:0 auto} body.ds-seite .ds-bereich p.ds-wege__schluss{margin:38px 0 0} body.ds-seite .ds-bereich p.ds-ueber__stimme{margin:0 0 24px} body.ds-seite .ds-bereich p.ds-stimmen__vor{margin:16px auto 0} body.ds-seite .ds-bereich p.ds-frage{margin:0 0 30px} body.ds-seite .ds-bereich p.ds-notiz{margin:0} body.ds-seite .ds-bereich p.ds-fragen__label{margin:0 0 14px} body.ds-seite .ds-bereich p.ds-fragen__lede{margin:0 0 12px} body.ds-seite .ds-bereich p.ds-leitsatz__text{margin:0 0 1em} body.ds-seite .ds-bereich .ds-kompass-panel p.ds-notiz{margin:16px 0 0} .editor-styles-wrapper .ds-bereich p.ds-hero__sub{margin:22px 0 32px} .editor-styles-wrapper .ds-bereich p.ds-satz{margin:0 auto} .editor-styles-wrapper .ds-bereich p.ds-wege__schluss{margin:38px 0 0} .editor-styles-wrapper .ds-bereich p.ds-ueber__stimme{margin:0 0 24px} .editor-styles-wrapper .ds-bereich p.ds-stimmen__vor{margin:16px auto 0} .editor-styles-wrapper .ds-bereich p.ds-frage{margin:0 0 30px} .editor-styles-wrapper .ds-bereich p.ds-notiz{margin:0} .editor-styles-wrapper .ds-bereich p.ds-fragen__label{margin:0 0 14px} .editor-styles-wrapper .ds-bereich p.ds-fragen__lede{margin:0 0 12px} .editor-styles-wrapper .ds-bereich p.ds-leitsatz__text{margin:0 0 1em} .editor-styles-wrapper .ds-bereich .ds-kompass-panel p.ds-notiz{margin:16px 0 0} /* Absaetze ohne eigene Klasse */ body.ds-seite .ds-bereich.ds-ueber p, .editor-styles-wrapper .ds-bereich.ds-ueber p{margin:0 0 1em} body.ds-seite .ds-bereich.ds-ueber p.ds-ueber__stimme, .editor-styles-wrapper .ds-bereich.ds-ueber p.ds-ueber__stimme{margin:0 0 24px} body.ds-seite .ds-bereich .ds-stakes__panel p, .editor-styles-wrapper .ds-bereich .ds-stakes__panel p{margin:0 auto 28px;max-width:46ch} body.ds-seite .ds-bereich .ds-wege__kopf p, .editor-styles-wrapper .ds-bereich .ds-wege__kopf p{margin:0} body.ds-seite .ds-bereich .ds-schritt p, .editor-styles-wrapper .ds-bereich .ds-schritt p{margin:0} body.ds-seite .ds-bereich .ds-kompass__text p, .editor-styles-wrapper .ds-bereich .ds-kompass__text p{margin:24px 0 0;max-width:56ch} body.ds-seite .ds-bereich .ds-tuer p, .editor-styles-wrapper .ds-bereich .ds-tuer p{margin:16px 0 0} body.ds-seite .ds-bereich .ds-tuer p:last-of-type, .editor-styles-wrapper .ds-bereich .ds-tuer p:last-of-type{margin-bottom:22px} body.ds-seite .ds-bereich .ds-tuer p.ds-tuer__ueber, .editor-styles-wrapper .ds-bereich .ds-tuer p.ds-tuer__ueber{margin:0 0 12px} /* ---------- 8.3 Knoepfe: der Knopf ist jetzt das im Block-Wrapper ---------- */ body.ds-seite .ds-bereich .wp-block-buttons, .editor-styles-wrapper .ds-bereich .wp-block-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:0} /* Der Wrapper darf nicht selbst wie ein Knopf aussehen. */ body.ds-seite .ds-bereich .wp-block-button.ds-knopf, body.ds-seite .ds-bereich .wp-block-button.ds-knopf:hover, .editor-styles-wrapper .ds-bereich .wp-block-button.ds-knopf, .editor-styles-wrapper .ds-bereich .wp-block-button.ds-knopf:hover{ display:inline-block;min-height:0;padding:0;border:0 !important;border-radius:0; background:none !important;color:inherit !important;box-shadow:none; font-size:inherit;line-height:inherit; letter-spacing:normal !important;text-transform:none !important; transform:none;filter:none; } body.ds-seite .ds-bereich .wp-block-button.ds-knopf > .wp-block-button__link, .editor-styles-wrapper .ds-bereich .wp-block-button.ds-knopf > .wp-block-button__link{ display:inline-flex;align-items:center;justify-content:center; min-height:50px;height:auto;padding:0 30px !important; border:0 !important;border-radius:var(--ds-r-pille) !important; font-family:var(--ds-sans) !important;font-weight:700 !important;font-size:.8rem;line-height:1; letter-spacing:.16em !important;text-transform:uppercase !important;text-decoration:none !important; background:var(--ds-gold) !important;color:#16120b !important;box-shadow:none;cursor:pointer; transition:transform .5s var(--ds-bezier),filter .5s var(--ds-bezier); } body.ds-seite .ds-bereich .wp-block-button.ds-knopf > .wp-block-button__link:hover{transform:translateY(-2px);filter:brightness(1.06)} body.ds-seite .ds-bereich .wp-block-button.ds-knopf > .wp-block-button__link:active{transform:translateY(1px)} body.ds-seite .ds-bereich .wp-block-button.ds-knopf-hell > .wp-block-button__link, .editor-styles-wrapper .ds-bereich .wp-block-button.ds-knopf-hell > .wp-block-button__link{ background:transparent !important;border:1px solid rgba(245,240,232,.75) !important;color:var(--ds-cream-text) !important; } body.ds-seite .ds-bereich .wp-block-button.ds-knopf-hell > .wp-block-button__link:hover{background:rgba(245,240,232,.08) !important;filter:none} /* Sitz der Knopfleisten in den einzelnen Bausteinen */ body.ds-seite .ds-bereich .ds-tuer .wp-block-buttons, .editor-styles-wrapper .ds-bereich .ds-tuer .wp-block-buttons{margin-top:auto;align-self:flex-start} body.ds-seite .ds-bereich .ds-tuer .wp-block-button.ds-knopf > .wp-block-button__link, .editor-styles-wrapper .ds-bereich .ds-tuer .wp-block-button.ds-knopf > .wp-block-button__link{ min-height:44px;padding:0 22px !important;font-size:.7rem; } /* Hinweis: .ds-tuer .ds-knopf schreibt zwar letter-spacing:.13em, die Durchsetzungsschicht 6 setzt aber .16em mit !important. Die HTML-Fassung zeigt daher .16em - der Block-Knopf ebenso. */ body.ds-seite .ds-bereich .ds-stakes__panel .wp-block-buttons, body.ds-seite .ds-bereich .ds-kompass-panel .wp-block-buttons, .editor-styles-wrapper .ds-bereich .ds-stakes__panel .wp-block-buttons, .editor-styles-wrapper .ds-bereich .ds-kompass-panel .wp-block-buttons{justify-content:center} /* ---------- 8.4 Bilder als

---------- */ body.ds-seite .ds-bereich .wp-block-image, .editor-styles-wrapper .ds-bereich .wp-block-image{margin:0} body.ds-seite .ds-bereich .wp-block-image:is(.ds-hero__bild,.ds-vollbild__bild,.ds-wege__bild,.ds-kompass-band__bild), .editor-styles-wrapper .ds-bereich .wp-block-image:is(.ds-hero__bild,.ds-vollbild__bild,.ds-wege__bild,.ds-kompass-band__bild){ position:absolute;inset:0;margin:0;padding:0; } body.ds-seite .ds-bereich .wp-block-image:is(.ds-hero__bild,.ds-vollbild__bild,.ds-wege__bild,.ds-kompass-band__bild) img, .editor-styles-wrapper .ds-bereich .wp-block-image:is(.ds-hero__bild,.ds-vollbild__bild,.ds-wege__bild,.ds-kompass-band__bild) img{ width:100%;object-fit:cover; } body.ds-seite .ds-bereich .wp-block-image:is(.ds-ueber__bild,.ds-kompass__bild), .editor-styles-wrapper .ds-bereich .wp-block-image:is(.ds-ueber__bild,.ds-kompass__bild){margin:0} /* ---------- 8.5 Belege-Zellen und Ziffern sind jetzt Absaetze ---------- */ body.ds-seite .ds-bereich p.ds-leiste__zelle, .editor-styles-wrapper .ds-bereich p.ds-leiste__zelle{ margin:0;padding:24px 26px;font-size:.94rem;line-height:1.45;color:rgba(243,237,225,.72); } body.ds-seite .ds-bereich p.ds-leiste__zelle strong, .editor-styles-wrapper .ds-bereich p.ds-leiste__zelle strong{ display:block;font-weight:700;font-size:1rem;letter-spacing:.03em;line-height:1.65; color:var(--ds-blitz);margin:0 0 6px; } body.ds-seite .ds-bereich p.ds-leiste__zelle br, .editor-styles-wrapper .ds-bereich p.ds-leiste__zelle br{display:none} body.ds-seite .ds-bereich p.ds-schritt__ziffer, .editor-styles-wrapper .ds-bereich p.ds-schritt__ziffer{ display:block;font-family:var(--ds-serif) !important;font-weight:400;font-size:3rem;line-height:1; color:rgba(243,237,225,.6);margin:0 0 16px; } /* ---------- 8.6 Stimmen sind jetzt Zitat-Bloecke ---------- */ body.ds-seite .ds-bereich blockquote.ds-stimme-haupt, .editor-styles-wrapper .ds-bereich blockquote.ds-stimme-haupt, body.ds-seite .ds-bereich figure.ds-stimme-haupt{ max-width:840px;margin:64px auto 0 !important;text-align:center; border:0 !important;padding:0 !important;background:none !important; } body.ds-seite .ds-bereich blockquote.ds-stimme, .editor-styles-wrapper .ds-bereich blockquote.ds-stimme{ margin:0;background:none !important;border:0 !important; border-top:1px solid var(--ds-line) !important;padding:26px 0 0 !important; } body.ds-seite .ds-bereich .wp-block-quote p, .editor-styles-wrapper .ds-bereich .wp-block-quote p{font-family:var(--ds-serif) !important;font-style:italic} body.ds-seite .ds-bereich blockquote.ds-stimme-haupt p, .editor-styles-wrapper .ds-bereich blockquote.ds-stimme-haupt p{ margin:0 0 26px;font-size:clamp(1.4rem,2.5vw,2rem);line-height:1.45;color:#33403b; } body.ds-seite .ds-bereich blockquote.ds-stimme p, .editor-styles-wrapper .ds-bereich blockquote.ds-stimme p{ margin:0 0 18px;font-size:1.18rem;line-height:1.5;color:#33403b; } /* ---------- 8.7 Trennlinie im Leitsatz-Band ---------- */ body.ds-seite .ds-bereich.ds-leitsatz .wp-block-separator, .editor-styles-wrapper .ds-bereich.ds-leitsatz .wp-block-separator{ width:120px !important;max-width:120px;height:1px;background:var(--ds-gold); border:0 !important;margin:0 auto;opacity:1; } /* ---------- 8.8 Kleine Bildschirme ---------- */ @media (max-width:960px){ body.ds-seite .ds-bereich p.ds-leiste__zelle{font-size:.9rem} body.ds-seite .ds-bereich p.ds-leiste__zelle strong{font-size:.95rem} } @media (max-width:900px){ body.ds-seite .ds-bereich .ds-schritte__fuss{margin:40px 0 0} } @media (max-width:700px){ body.ds-seite .ds-bereich p.ds-hero__sub{margin:14px 0 20px} body.ds-seite .ds-bereich p.ds-leiste__zelle{padding:9px 12px;font-size:.66rem;line-height:1.35} body.ds-seite .ds-bereich p.ds-leiste__zelle strong{font-size:.7rem;letter-spacing:.02em;margin-bottom:2px} body.ds-seite .ds-bereich.ds-hero .wp-block-button.ds-knopf > .wp-block-button__link{min-height:44px;padding:0 22px !important;font-size:.7rem} } @media (max-width:600px){ body.ds-seite .ds-bereich .ds-kompass-panel p.ds-frage{margin-bottom:24px} } /* ---------- 8.9 Block-Editor: volle Breite, keine Editor-Begrenzung ---------- */ .editor-styles-wrapper .ds-bereich .wp-block-group{max-width:none} .editor-styles-wrapper .is-root-container > .ds-bereich{max-width:none;margin-block:0} .editor-styles-wrapper .ds-bereich .wp-block{max-width:none;margin-block:0} .editor-styles-wrapper .ds-bereich p{margin:0 0 1em} .editor-styles-wrapper .ds-bereich figure{margin:0} .editor-styles-wrapper .ds-bereich blockquote{font-style:italic} /* ---------- 8.9 Handy (1.3.1): Belege-Leiste der Blockfassung wie in der HTML-Fassung ---------- Die HTML-Fassung ueberschreibt ihre eigene 700px-Regel spaeter im Stylesheet (Belege groesser, 8.9.); die Blockfassung bekam nur die kleine Fassung. Hier gleichgezogen. */ @media (max-width:960px){ body.ds-seite .ds-bereich p.ds-leiste__zelle, .editor-styles-wrapper .ds-bereich p.ds-leiste__zelle{padding:24px 26px;font-size:.9rem;line-height:1.45} body.ds-seite .ds-bereich p.ds-leiste__zelle strong, .editor-styles-wrapper .ds-bereich p.ds-leiste__zelle strong{font-size:.95rem;letter-spacing:.03em;margin:0 0 6px} } /* ========================================================================= 9 ABSCHNITTS-POLSTER DER BLOCKFASSUNG (1.3.2, 8.9.2026) Astra gibt jeder Gruppe direkt unter .entry-content ein Polster ueber --wp--custom--ast-default-block-*-padding. Schicht 4 setzt die Variable auf null (sonst helle Raender), aber Astras Regel `.entry-content > .wp-block-group{padding:var(...)}` schlaegt damit auch das eigene Polster der Abschnitte (.ds-abschnitt 112px). Live-Befund auf /5180-2/: alle Abschnitte klebten aneinander. Hier verbindlich wiederhergestellt, Werte exakt wie in der HTML-Fassung. ========================================================================= */ body.ds-seite .entry-content > .wp-block-group.ds-abschnitt{padding:112px 0 !important} body.ds-seite .entry-content > .wp-block-group.ds-hero{padding:0 0 160px !important} body.ds-seite .entry-content > .wp-block-group.ds-schwelle{padding:96px 0 !important} body.ds-seite .entry-content > .wp-block-group.ds-kompass-band{padding:56px 0 !important} body.ds-seite .entry-content > .wp-block-group.ds-leitsatz{padding:56px 0 44px !important} @media (max-width:960px){ body.ds-seite .entry-content > .wp-block-group.ds-abschnitt{padding:76px 0 !important} body.ds-seite .entry-content > .wp-block-group.ds-hero{padding:0 0 36px !important} } @media (max-width:900px){ body.ds-seite .entry-content > .wp-block-group.ds-schwelle{padding:72px 0 !important} } @media (max-width:700px){ body.ds-seite .entry-content > .wp-block-group.ds-hero{padding:0 !important} } @media (max-width:600px){ body.ds-seite .entry-content > .wp-block-group.ds-kompass-band{padding:70px 0 !important} } /* Leitsatz: Abstand zur Goldlinie wie in der HTML-Fassung */ body.ds-seite .ds-leitsatz p.ds-leitsatz__text{margin:0 auto 26px} /* 1.3.3: das grosse Zitat steht mittig (Astra/WordPress setzen figure- und blockquote-Margen auf null, damit fehlte auto-Zentrierung und die Luft zum Vorspann) */ body.ds-seite .ds-bereich :is(figure,blockquote).ds-stimme-haupt{margin:64px auto 0 !important;text-align:center} body.ds-seite .ds-bereich .ds-stimmen--neben{margin:48px auto 0 !important} /* 1.3.5: Abschnitte rechnen wie im Mockup mit border-box, sonst ist der Hero um sein unteres Polster (Platz der Leiste) hoeher als der Bildschirm. */ body.ds-seite .entry-content > .ds-bereich,body.ds-seite .entry-content > .wp-block-group.ds-bereich{box-sizing:border-box !important} /* 1.3.6: Hero-Text steht mittig im Raum ueber der Leiste (kein leeres Band auf hohen Bildschirmen); eingeloggt zieht die Adminleiste die Seite 32px nach unten, das misst jetzt das Skript. */ body.ds-seite .ds-hero .ds-hero__innen{margin-block:auto} /* Startseite: Text beginnt hoeher im Band (Daniela 9.9., iPhone: Knopf war gerade noch 2px sichtbar); Programme behaelt -30px */ @media (max-width:700px){body.ds-seite .ds-hero .ds-hero__innen{margin-block:0;padding:calc(min(100vw,520px) - 104px) 0 14px}} body.admin-bar.ds-seite .ds-hero{min-height:max(640px,min(calc(100dvh - var(--ds-header-h)),960px))} /* ========================================================================= 10 ABGLEICH MIT DEM MOCKUP (1.3.8, 8.9.2026) Berechnete Stile von startseite-v14.html und der WordPress-Fassung wurden Element fuer Element verglichen. Diese Regeln schliessen die verbliebenen Unterschiede. ========================================================================= */ /* Belege-Leiste: Zeilenhoehe und Farbe der Unterzeile wie im Mockup */ body.ds-seite .ds-bereich p.ds-leiste__zelle{line-height:1.45;color:rgba(243,237,225,.82)} body.ds-seite .ds-bereich p.ds-leiste__zelle strong{line-height:1.65;margin:0 0 6px} /* Tueren: Absatzabstaende exakt wie im Mockup (16px oben, letzter Absatz 22px unten) */ body.ds-seite .ds-bereich .ds-tuer p{margin:16px 0 0} body.ds-seite .ds-bereich .ds-tuer p.ds-tuer__ueber{margin:16px 0 0} body.ds-seite .ds-bereich .ds-tuer p:last-of-type{margin-bottom:22px} body.ds-seite .ds-bereich .ds-tuer .ds-tuer__liste{margin:20px 0 22px !important} /* Kompass-Text: kuerzeres unteres Polster wie im Mockup */ body.ds-seite .entry-content > .wp-block-group.ds-kompass-text{padding-bottom:clamp(72px,8vw,110px) !important} /* Leitsatz-Band: Abstand zur Goldlinie und Polster wie im Mockup-Fuss */ body.ds-seite .ds-leitsatz p.ds-leitsatz__text{margin:0 auto 44px} body.ds-seite .entry-content > .wp-block-group.ds-leitsatz{padding:56px 0 48px !important} /* 1.3.9 (Daniela): Belege-Leiste zentriert, Tueren-Titel ohne Breitenbegrenzung (zwei Zeilen statt drei) */ body.ds-seite .ds-bereich p.ds-leiste__zelle,.editor-styles-wrapper .ds-bereich p.ds-leiste__zelle{text-align:center} body.ds-seite .ds-bereich .ds-tuer h3{max-width:none} /* ========================================================================= 12 ANGEBOTSSEITE "Programme und Begleitung", Karten-Fassung (1.5.0, 8.9.2026) Vorlage: seiten/angebote-karten-editor.html (native Bloecke). Mockup: Projekte\ds-startseite-varianten\angebote-karten.html. Neue Bausteine: kurzer Hero (ds-hero--kurz), klebende Sprungleiste (ds-sprung), "So arbeite ich" (ds-arbeit), Karten (ds-karten/ds-karte), Fragen als Aufklapper (ds-faq mit wp:details). Alle anderen Bausteine (Tueren, Schwelle, Stimmen, Ablauf, Sonnenaufgang-Band, Leitsatz) kommen aus den Schichten 2 und 8 bis 10. ========================================================================= */ /* ---------- 12.1 Hero, kuerzer als auf der Startseite (keine Belege-Leiste) ---------- */ body.ds-seite .ds-bereich.ds-hero.ds-hero--kurz, .editor-styles-wrapper .ds-bereich.ds-hero.ds-hero--kurz{ min-height:min(72vh,680px); justify-content:flex-end; } body.ds-seite .entry-content > .wp-block-group.ds-hero.ds-hero--kurz{padding:clamp(90px,12vh,130px) 0 clamp(46px,6vw,74px) !important} body.ds-seite .ds-hero--kurz .ds-hero__innen{margin-block:0;padding:0} body.ds-seite .ds-bereich .ds-hero--kurz .ds-hero__bild img{object-position:56% 46%} body.ds-seite .ds-bereich .ds-hero--kurz .ds-hero__schleier{ background:linear-gradient(97deg, rgba(9,40,41,.92) 0%, rgba(9,40,41,.84) 30%, rgba(9,40,41,.54) 50%, rgba(9,40,41,.18) 66%, rgba(9,40,41,0) 78%); } body.ds-seite .ds-bereich .ds-hero--kurz .ds-hero__aus{ height:52%; background:linear-gradient(180deg,rgba(14,70,71,0) 0%,rgba(14,70,71,.42) 42%,rgba(14,70,71,.9) 80%,var(--ds-forest) 100%); } body.ds-seite .ds-bereich.ds-hero--kurz h1{font-size:clamp(2.3rem,5.2vw,4.1rem)} body.ds-seite .ds-bereich .ds-hero--kurz p.ds-hero__sub{max-width:540px} @media (max-width:700px){ body.ds-seite .ds-bereich.ds-hero.ds-hero--kurz{min-height:0;max-height:none;display:block} body.ds-seite .entry-content > .wp-block-group.ds-hero.ds-hero--kurz{padding:0 0 28px !important} body.ds-seite .ds-bereich .ds-hero--kurz .ds-hero__bild img{object-position:56% 62%} body.ds-seite .ds-bereich .ds-hero--kurz .ds-hero__schleier{display:none; background:linear-gradient(180deg, rgba(9,40,41,.2) 0%, rgba(9,40,41,.34) 30%, rgba(9,40,41,.72) 56%, rgba(9,40,41,.92) 100%); } /* kurzer Hero auf dem Handy: dieselbe Bandlogik wie der Startseiten-Hero (Band oben, Text darunter) */ body.ds-seite .ds-bereich .ds-hero--kurz .ds-hero__aus{ top:0;bottom:auto;height:min(100vw,520px); background:linear-gradient(180deg,rgba(14,70,71,0) 0%,rgba(14,70,71,0) 36%,rgba(14,70,71,.6) 62%,rgba(14,70,71,.92) 84%,var(--ds-forest) 100%); } body.ds-seite .ds-hero--kurz .ds-hero__innen{margin-block:0;padding:calc(min(100vw,520px) - 30px) 0 14px} } /* ---------- 12.2 Sprungleiste: klebt unter der Kopfzeile, markiert den aktiven Abschnitt (Skript) ---------- */ :root{--ds-sprung-h:48px} body.ds-seite .entry-content > .wp-block-group.ds-sprung, .editor-styles-wrapper .ds-bereich.ds-sprung{ position:sticky;top:var(--ds-sprung-top,0px);z-index:40; background:rgba(9,47,48,.95);border-bottom:1px solid var(--ds-line-dark); padding:0 !important;margin:0 !important; } /* sticky braucht Vorfahren ohne overflow:hidden */ body.ds-seite .site-content,body.ds-seite #content,body.ds-seite .ast-container, body.ds-seite #primary,body.ds-seite .site-main,body.ds-seite .ds-artikel,body.ds-seite .entry-content{overflow:visible;overflow-x:clip} body.ds-seite .ds-sprung .ds-sprung__innen, .editor-styles-wrapper .ds-sprung .ds-sprung__innen{ width:min(1140px,calc(100% - 48px));margin-inline:auto; height:var(--ds-sprung-h);display:flex;align-items:stretch;gap:26px; white-space:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; } body.ds-seite .ds-sprung .ds-sprung__innen::-webkit-scrollbar{display:none} body.ds-seite .ds-sprung .ds-sprung__innen a, .editor-styles-wrapper .ds-sprung .ds-sprung__innen a{ flex:0 0 auto;display:flex;align-items:center; font-family:var(--ds-sans);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase; text-decoration:none;color:rgba(243,237,225,.76);border-bottom:1px solid transparent; transition:color .4s var(--ds-bezier),border-color .4s var(--ds-bezier); } body.ds-seite .ds-sprung .ds-sprung__innen a:hover{color:var(--ds-blitz)} body.ds-seite .ds-sprung .ds-sprung__innen a.ds-aktiv{color:var(--ds-cream-text);border-bottom-color:var(--ds-gold)} @media (max-width:700px){ body.ds-seite .ds-sprung .ds-sprung__innen{width:calc(100% - 36px);gap:18px} body.ds-seite .ds-sprung .ds-sprung__innen a{font-size:.7rem;letter-spacing:.1em} } /* Anker landen unter Kopfzeile und Sprungleiste */ body.ds-seite:has(.ds-sprung) .ds-bereich [id],body.ds-seite:has(.ds-sprung) .ds-bereich[id]{scroll-margin-top:calc(var(--ds-sprung-top,0px) + var(--ds-sprung-h) + 16px)} /* ---------- 12.3 So arbeite ich: Dreispalter ohne Ziffern, Satz in Gold ---------- */ body.ds-seite .ds-bereich p.ds-arbeit__satz, .editor-styles-wrapper .ds-bereich p.ds-arbeit__satz{ font-family:var(--ds-serif);font-style:italic;line-height:1.35; font-size:clamp(1.15rem,2.1vw,1.36rem);color:var(--ds-blitz); max-width:46ch;margin:clamp(40px,4.4vw,56px) 0 0; } body.ds-seite .ds-bereich.ds-arbeit .ds-schritte__fuss, .editor-styles-wrapper .ds-bereich.ds-arbeit .ds-schritte__fuss{margin:34px 0 0} /* ---------- 12.4 Abschnittskopf: dieselbe Klasse wie auf der Startseite (ds-wege__kopf), hier nur ergaenzt um die helle Flaeche und die Blitzzeile. Breite fuer beide Seiten 62ch. ---------- */ body.ds-seite .ds-bereich .ds-wege__kopf, .editor-styles-wrapper .ds-bereich .ds-wege__kopf{max-width:62ch} body.ds-seite .ds-bereich.ds-hell .ds-wege__kopf h2, .editor-styles-wrapper .ds-bereich.ds-hell .ds-wege__kopf h2{color:var(--ds-forest)} body.ds-seite .ds-bereich.ds-hell .ds-wege__kopf p, .editor-styles-wrapper .ds-bereich.ds-hell .ds-wege__kopf p{color:var(--ds-ink)} body.ds-seite .ds-bereich .ds-wege__kopf p.ds-blitzzeile, .editor-styles-wrapper .ds-bereich .ds-wege__kopf p.ds-blitzzeile{ font-family:var(--ds-serif) !important;font-style:italic;line-height:1.32; font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ds-petrol);margin:0 0 18px; } /* ---------- 12.5 Karten: drei nebeneinander, Zeilen per Subgrid buendig ---------- Karte = Gruppe mit sechs Kindern: Kicker, Name, Text, Label "Fuer wen ist dies", Liste, Fuss. Der Fuss hat feste Hoehen (Fakten, Notiz, Aktion), damit Fakten-Linie und Knopf in allen drei Karten auf derselben Hoehe stehen. */ body.ds-seite .ds-bereich .ds-karten, .editor-styles-wrapper .ds-bereich .ds-karten{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(18px,2.2vw,28px);row-gap:0;align-items:stretch;margin:0; } body.ds-seite .ds-bereich .ds-karte, .editor-styles-wrapper .ds-bereich .ds-karte{ display:flex;flex-direction:column;margin:0; padding:clamp(26px,2.8vw,36px) clamp(22px,2.4vw,30px); background:rgba(253,251,247,.05);border:1px solid var(--ds-line-dark);border-radius:var(--ds-r-glas); box-sizing:border-box; } @supports (grid-template-rows: subgrid){ body.ds-seite .ds-bereich .ds-karten{grid-template-rows:repeat(6,auto)} body.ds-seite .ds-bereich .ds-karte{display:grid;grid-template-rows:subgrid;grid-row:span 6;align-content:start} } body.ds-seite .ds-bereich p.ds-karte__kicker, .editor-styles-wrapper .ds-bereich p.ds-karte__kicker{ font-family:var(--ds-sans);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--ds-gold);margin:0 0 10px; } body.ds-seite .ds-bereich h3.ds-karte__name, .editor-styles-wrapper .ds-bereich h3.ds-karte__name{ font-family:var(--ds-serif);font-size:clamp(1.55rem,2.1vw,1.95rem);font-weight:500;line-height:1.12; color:var(--ds-cream-text);margin:0 0 12px;max-width:none; } body.ds-seite .ds-bereich p.ds-karte__text, .editor-styles-wrapper .ds-bereich p.ds-karte__text{font-size:.95rem;line-height:1.62;color:rgba(243,237,225,.86);margin:0 0 8px;max-width:none} body.ds-seite .ds-bereich p.ds-karte__label, .editor-styles-wrapper .ds-bereich p.ds-karte__label{ font-family:var(--ds-sans);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:rgba(243,237,225,.62);margin:18px 0 6px; } body.ds-seite .ds-bereich ul.ds-karte__fuerwen, .editor-styles-wrapper .ds-bereich ul.ds-karte__fuerwen{margin:0 0 28px;padding:0;list-style:none} body.ds-seite .ds-bereich ul.ds-karte__fuerwen li, .editor-styles-wrapper .ds-bereich ul.ds-karte__fuerwen li{ position:relative;padding:4px 0 4px 18px;margin:0;font-size:.92rem;line-height:1.45;color:rgba(243,237,225,.9); } body.ds-seite .ds-bereich ul.ds-karte__fuerwen li::before, .editor-styles-wrapper .ds-bereich ul.ds-karte__fuerwen li::before{ content:"";position:absolute;left:0;top:14px;width:9px;height:1px;background:var(--ds-blitz); } body.ds-seite .ds-bereich .ds-karte__fuss, .editor-styles-wrapper .ds-bereich .ds-karte__fuss{margin:auto 0 0;padding:16px 0 0;border-top:1px solid var(--ds-line-dark)} body.ds-seite .ds-bereich .ds-karte__fakten, .editor-styles-wrapper .ds-bereich .ds-karte__fakten{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;min-height:34px} body.ds-seite .ds-bereich p.ds-karte__dauer,body.ds-seite .ds-bereich p.ds-karte__preis, .editor-styles-wrapper .ds-bereich p.ds-karte__dauer,.editor-styles-wrapper .ds-bereich p.ds-karte__preis{ font-family:var(--ds-serif) !important;font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.2;color:var(--ds-cream-text);margin:0; } body.ds-seite .ds-bereich p.ds-karte__preis::before, .editor-styles-wrapper .ds-bereich p.ds-karte__preis::before{content:"\00B7";color:var(--ds-blitz);margin-right:10px} body.ds-seite .ds-bereich p.ds-karte__preis em, .editor-styles-wrapper .ds-bereich p.ds-karte__preis em{ font-family:var(--ds-sans) !important;font-style:normal;font-size:.76rem;color:rgba(243,237,225,.66);margin-left:5px;white-space:nowrap; } body.ds-seite .ds-bereich p.ds-karte__notiz, .editor-styles-wrapper .ds-bereich p.ds-karte__notiz{margin:8px 0 0;height:2.9em;overflow:hidden;font-size:.8rem;line-height:1.45;color:rgba(243,237,225,.62)} body.ds-seite .ds-bereich .ds-karte__aktion, .editor-styles-wrapper .ds-bereich .ds-karte__aktion{margin:18px 0 0;height:92px} body.ds-seite .ds-bereich .ds-karte__aktion .wp-block-buttons, .editor-styles-wrapper .ds-bereich .ds-karte__aktion .wp-block-buttons{flex-direction:column;align-items:flex-start;gap:12px} body.ds-seite .ds-bereich .ds-karte .wp-block-button.ds-knopf > .wp-block-button__link, .editor-styles-wrapper .ds-bereich .ds-karte .wp-block-button.ds-knopf > .wp-block-button__link{ padding:0 20px !important;font-size:.68rem;letter-spacing:.11em;white-space:nowrap; } /* "Mehr erfahren" ist ein Knopf-Block, sieht aber aus wie ein Textlink mit Goldlinie */ body.ds-seite .ds-bereich .wp-block-button.ds-mehr, .editor-styles-wrapper .ds-bereich .wp-block-button.ds-mehr{display:inline-block;margin:0;padding:0;background:none;border:0;border-radius:0} body.ds-seite .ds-bereich .wp-block-button.ds-mehr > .wp-block-button__link, .editor-styles-wrapper .ds-bereich .wp-block-button.ds-mehr > .wp-block-button__link{ display:inline-block;min-height:0;padding:0 0 4px;background:none !important;border:0;border-bottom:1px solid var(--ds-gold);border-radius:0; box-shadow:none;font-family:var(--ds-sans);font-size:.86rem;font-weight:700;letter-spacing:.06em;text-transform:none; line-height:1.3;color:var(--ds-cream-text);text-decoration:none; transition:border-color .5s var(--ds-bezier),color .5s var(--ds-bezier); } body.ds-seite .ds-bereich .wp-block-button.ds-mehr > .wp-block-button__link:hover{color:var(--ds-blitz);border-bottom-color:var(--ds-blitz);filter:none} /* betonte Karte: auf Waldgruen ein Petrol-Panel */ body.ds-seite .ds-bereich .ds-karte--betont, .editor-styles-wrapper .ds-bereich .ds-karte--betont{background:var(--ds-petrol);border-color:rgba(243,237,225,.18);box-shadow:0 30px 70px rgba(5,26,27,.42)} body.ds-seite .ds-bereich .ds-karte--betont p.ds-karte__kicker{color:var(--ds-blitz)} body.ds-seite .ds-bereich .ds-karte--betont h3.ds-karte__name{font-size:clamp(1.7rem,2.3vw,2.15rem)} /* helle Flaeche: Creme-Karten, betonte Karte in Waldgruen */ body.ds-seite .ds-bereich.ds-hell .ds-karte{background:var(--ds-cream);border-color:var(--ds-line)} body.ds-seite .ds-bereich.ds-hell h3.ds-karte__name{color:var(--ds-forest)} body.ds-seite .ds-bereich.ds-hell p.ds-karte__label{color:#5d6763} body.ds-seite .ds-bereich.ds-hell ul.ds-karte__fuerwen li{color:var(--ds-ink)} body.ds-seite .ds-bereich.ds-hell ul.ds-karte__fuerwen li::before{background:var(--ds-gold)} body.ds-seite .ds-bereich.ds-hell p.ds-karte__text{color:var(--ds-ink)} body.ds-seite .ds-bereich.ds-hell .ds-karte__fuss{border-top-color:var(--ds-line)} body.ds-seite .ds-bereich.ds-hell p.ds-karte__dauer,body.ds-seite .ds-bereich.ds-hell p.ds-karte__preis{color:var(--ds-forest)} body.ds-seite .ds-bereich.ds-hell p.ds-karte__preis::before{color:var(--ds-gold)} body.ds-seite .ds-bereich.ds-hell p.ds-karte__preis em,body.ds-seite .ds-bereich.ds-hell p.ds-karte__notiz{color:#5d6763} body.ds-seite .ds-bereich.ds-hell .wp-block-button.ds-mehr > .wp-block-button__link{color:var(--ds-forest)} body.ds-seite .ds-bereich.ds-hell .wp-block-button.ds-mehr > .wp-block-button__link:hover{color:var(--ds-petrol);border-bottom-color:var(--ds-petrol)} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont{background:var(--ds-forest);border-color:transparent;box-shadow:0 30px 70px rgba(32,60,58,.28)} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont p.ds-karte__kicker{color:var(--ds-blitz)} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont h3.ds-karte__name{color:var(--ds-cream-text) !important} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont p.ds-karte__label{color:rgba(243,237,225,.7)} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont p.ds-karte__text{color:rgba(243,237,225,.88)} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont ul.ds-karte__fuerwen li{color:rgba(243,237,225,.9)} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont ul.ds-karte__fuerwen li::before{background:var(--ds-blitz)} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont .ds-karte__fuss{border-top-color:var(--ds-line-dark)} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont p.ds-karte__dauer,body.ds-seite .ds-bereich.ds-hell .ds-karte--betont p.ds-karte__preis{color:var(--ds-cream-text)} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont p.ds-karte__preis::before{color:var(--ds-blitz)} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont p.ds-karte__preis em,body.ds-seite .ds-bereich.ds-hell .ds-karte--betont p.ds-karte__notiz{color:rgba(243,237,225,.66)} body.ds-seite .ds-bereich.ds-hell .ds-karte--betont .wp-block-button.ds-mehr > .wp-block-button__link{color:var(--ds-cream-text)} @media (max-width:1000px){ body.ds-seite .ds-bereich .ds-karten{grid-template-columns:1fr;grid-template-rows:none;row-gap:18px} body.ds-seite .ds-bereich .ds-karte{display:flex;flex-direction:column;grid-row:auto} body.ds-seite .ds-bereich p.ds-karte__notiz{height:auto} body.ds-seite .ds-bereich p.ds-karte__notiz:empty{display:none} body.ds-seite .ds-bereich .ds-karte__aktion{height:auto} } /* ---------- 12.6 Fragen und Antworten: wp:details als Aufklapper ---------- */ body.ds-seite .ds-bereich.ds-faq h2, .editor-styles-wrapper .ds-bereich.ds-faq h2{color:var(--ds-cream-text);margin:0 0 14px;font-size:clamp(1.9rem,3.4vw,2.9rem)} body.ds-seite .ds-bereich p.ds-faq__vor, .editor-styles-wrapper .ds-bereich p.ds-faq__vor{max-width:56ch;margin:0 auto;font-size:.94rem;color:rgba(243,237,225,.8)} body.ds-seite .ds-bereich .ds-faq__liste, .editor-styles-wrapper .ds-bereich .ds-faq__liste{max-width:820px;margin:clamp(38px,5vw,56px) auto 0;text-align:left} body.ds-seite .ds-bereich .ds-faq__liste details, .editor-styles-wrapper .ds-bereich .ds-faq__liste details{border:0;border-top:1px solid var(--ds-line-dark);border-radius:0;margin:0;padding:0;background:none;box-shadow:none} body.ds-seite .ds-bereich .ds-faq__liste details:last-of-type{border-bottom:1px solid var(--ds-line-dark)} body.ds-seite .ds-bereich .ds-faq__liste summary, .editor-styles-wrapper .ds-bereich .ds-faq__liste summary{ list-style:none;cursor:pointer;display:flex;gap:24px;align-items:flex-start;justify-content:space-between; padding:22px 0;font-family:var(--ds-sans);font-weight:700;font-size:1.02rem;line-height:1.45;color:var(--ds-cream-text); } body.ds-seite .ds-bereich .ds-faq__liste summary::-webkit-details-marker{display:none} body.ds-seite .ds-bereich .ds-faq__liste summary::after{ content:"+";font-family:var(--ds-serif);font-size:1.7rem;line-height:.9;color:var(--ds-blitz);flex:0 0 auto; } body.ds-seite .ds-bereich .ds-faq__liste details[open] summary::after{content:"\2212"} body.ds-seite .ds-bereich p.ds-faq__a, .editor-styles-wrapper .ds-bereich p.ds-faq__a{margin:0;padding:0 0 26px;max-width:68ch;font-size:.98rem;color:rgba(243,237,225,.82)} /* ========================================================================= 13 LIVE-BEFUNDE HANDY (1.5.1, 8.9.2026, /programme-und-mentoring-2/) ========================================================================= */ /* 13.1 Schmaler hellgruener Rand auf dem Handy: Astra gibt dem Container unter 921px wieder ein Polster, und der Seitengrund der Website ist hellgruen. DS-Seiten laufen randlos, der Grund dahinter ist Nachtgruen. */ body.ds-seite{background-color:var(--ds-forest-deep)} body.ds-seite .site-content .ast-container, body.ds-seite .site-content .ast-container .content-area{padding-left:0 !important;padding-right:0 !important;max-width:none !important} /* Astra gibt #primary oben und unten 73px Polster: leeres Band zwischen Leitsatz und Fusszeile (Live-Befund 9.9.) */ body.ds-seite #primary,body.ds-seite .content-area,body.ds-seite .site-main,body.ds-seite .ds-artikel{padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important} body.ds-seite .site-content{padding:0 !important} /* 13.2 Schrift auf dem Handy eine Stufe groesser (Daniela): Wurzel 18px statt 16px, alle rem-Werte wachsen mit, Bilder und Raster bleiben. */ @media (max-width:700px){ html:has(body.ds-seite .ds-bereich){font-size:18px !important} /* Ueberschriften behalten dabei ihre bisherige Groesse (Daniela 9.9.: "so fett"), nur der Fliesstext waechst. Werte = bisherige rem-Werte mal 16/18. */ body.ds-seite .ds-bereich h1{font-size:clamp(1.64rem,7.4vw,2.22rem) !important} body.ds-seite .ds-bereich h2{font-size:1.69rem !important} body.ds-seite .ds-bereich h3{font-size:1.26rem !important} body.ds-seite .ds-bereich .ds-tuer h3{font-size:1.16rem !important} body.ds-seite .ds-bereich h3.ds-karte__name{font-size:1.38rem !important} body.ds-seite .ds-bereich .ds-karte--betont h3.ds-karte__name{font-size:1.51rem !important} body.ds-seite .ds-bereich p.ds-karte__kicker,body.ds-seite .ds-bereich p.ds-karte__label{font-size:.6rem !important} } /* 13.3 Fusszeilen-Menue (Elementor): das X und die Links beim Oeffnen nicht grasgruen (#00ce1b aus der Elementor-Einstellung "Hover/Fokus"), sondern Blitz-Gold wie alle Akzente. */ .elementor-location-footer .elementor-menu-toggle:hover, .elementor-location-footer .elementor-menu-toggle:focus, .elementor-location-footer .elementor-menu-toggle.elementor-active, .elementor-location-footer div.elementor-menu-toggle:hover, .elementor-location-footer div.elementor-menu-toggle:focus{color:var(--ds-blitz) !important} .elementor-location-footer .elementor-menu-toggle:hover svg, .elementor-location-footer .elementor-menu-toggle:focus svg, .elementor-location-footer .elementor-menu-toggle.elementor-active svg, .elementor-location-footer div.elementor-menu-toggle:hover svg, .elementor-location-footer div.elementor-menu-toggle:focus svg{fill:var(--ds-blitz) !important} /* 13.4 Bildunterschriften: In der Mediathek eingetragene "Beschriftungen" landen als
unter jedem Bild (Live-Befund Startseite: Alt-Text stand als Unterschrift im Hero und im Ueber-Block). DS-Bilder tragen nie eine sichtbare Unterschrift, der Alt-Text bleibt fuer Suche und Screenreader. */ body.ds-seite .ds-bereich figure.wp-block-image figcaption, .editor-styles-wrapper .ds-bereich figure.wp-block-image figcaption{display:none !important}