/* Theme Name: AquaPassion Theme URI: https://aquapassion.example Author: AquaPassion — Public Management & Consulting Description: Theme für AquaPassion. Beratung für kommunale Bäderbetriebe. Helle Ruhe: Knochen trägt die Seite, Sand schichtet, Tiefblau schreibt, Aqua zeigt. Version: 1.18.37 Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 8.0 License: proprietär Text Domain: aquapassion Tags: blog, custom-logo, custom-menu, featured-images, translation-ready */ /* ============================================================ AquaPassion — Website-Stylesheet Grundlage: AquaPassion Design System (Token- und Komponenten- dateien werden importiert, keine Werte werden überschrieben). Eigene Klassen tragen das Präfix "site-" und setzen ausschließlich Layout: Raster, Abstände, Zusammenstellungen aus Token. Mobile-first. Umbruchpunkte 1200 / 900 / 600 px. ============================================================ */ @import url("ds/styles.css"); /* Seitlicher Innenabstand der Bleed-Abschnitte; folgt .site-container. */ :root{--site-gutter:var(--space-3)} /* Grundschriftfarbe: --text-body wird im Design-System von typography.css mit einem Schriftgrad überschrieben, taugt dort also nicht als Farbe. */ body{color:var(--tiefblau)} /* --- Grundgerüst ------------------------------------------------ */ .site-container{max-width:var(--container-max);margin:0 auto;padding-left:var(--space-3);padding-right:var(--space-3)} .site-container--narrow{max-width:var(--container-narrow)} .site-measure{max-width:var(--measure)} .site-measure--narrow{max-width:var(--measure-narrow)} .site-skip{position:absolute;left:-9999px} .site-skip:focus{position:static;display:inline-block;margin:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--surface-bright);color:var(--tiefblau)} /* --- Kopfbereich und Navigation --------------------------------- */ .site-header{position:sticky;top:0;z-index:40;background:transparent} .site-header__inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-2) var(--space-3);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)} .site-logo{display:flex;text-decoration:none} .site-logo img{display:block;height:28px;width:auto} .site-nav{display:flex;align-items:center;gap:var(--space-3)} .site-nav__list{display:flex;align-items:center;gap:var(--space-3);list-style:none;margin:0;padding:0} .site-nav__link{color:var(--tiefblau);text-decoration:none;font-size:var(--body-md);padding:var(--space-1) 0} .site-nav__link{transition:var(--transition-ui)} .site-nav__link:hover{color:var(--aqua-tief);text-decoration:none} .site-nav__link[aria-current="page"]{color:var(--tiefblau);font-weight:var(--weight-medium)} /* Burger ohne JavaScript: details/summary */ .site-burger{display:none} .site-burger__schalter{position:absolute;opacity:0;width:44px;height:44px;margin:0;pointer-events:none} .site-burger>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:44px;height:44px;padding:0 var(--space-3);border-radius:var(--radius-lg);background:var(--surface-container-low);color:var(--tiefblau)} .site-burger>summary::-webkit-details-marker{display:none} .site-burger>summary:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .site-burger__panel{display:grid;gap:var(--space-2)} /* --- Abschnittsflächen und Raster ------------------------------- */ .site-section{padding:var(--section-y-tight) 0} .site-section--tight{padding:var(--space-10) 0} .site-section--knochen{background:var(--surface)} .site-section--leinen{background:var(--surface-container-low)} .site-section--sand{background:var(--surface-container-high)} .site-section--tone-container{background:var(--surface-container)} .site-section--dunkel{background:var(--surface-dark);color:var(--text-on-dark)} .site-eyebrow{font-family:var(--font-body);font-size:var(--label-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-warm)} .site-section--dunkel .site-eyebrow{color:var(--text-on-dark-accent)} .site-h2{font-size:var(--headline-lg);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);color:var(--tiefblau);margin:var(--space-4) 0 0;max-width:26ch} .site-section--dunkel .site-h2{color:var(--sand-hell)} .site-lead{font-size:var(--body-lg);line-height:var(--leading-loose);color:var(--text-secondary);margin-top:var(--space-4);max-width:var(--measure-narrow)} .site-section--dunkel .site-lead{color:var(--text-on-dark-secondary)} .site-grid{display:grid;grid-auto-rows:1fr;gap:var(--space-3);margin-top:var(--space-10)} .site-grid--2{grid-template-columns:1fr} .site-grid--3{grid-template-columns:1fr} .site-grid--split{display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:start} .site-grid--themen{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:start} .site-grid--themen>*:first-child{flex:1 1 200px;max-width:260px} .site-grid--themen>.site-themen{flex:2 1 440px;grid-template-rows:repeat(3,auto);grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr)} .site-grid--hero{display:grid;grid-template-columns:1fr;gap:var(--space-10);align-items:start} .site-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)} /* --- Hero ------------------------------------------------------- */ .site-hero{background:var(--surface-container-low);padding:var(--space-12) 0} .site-hero__title{font-size:clamp(2.125rem,4.4vw,3.25rem);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--tiefblau);margin:var(--space-4) 0 0;max-width:22ch} .site-fakt{display:flex;align-items:baseline;gap:var(--space-3)} .site-fakt__wert{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--kennzahl-md);font-weight:var(--weight-medium);letter-spacing:var(--tracking-display);color:var(--tiefblau);min-width:3.6em} .site-fakt__label{display:block;font-size:var(--body-md);color:var(--tiefblau)} .site-fakt__meta{font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted)} /* --- Karten: Produkt, Thema, Beitrag ---------------------------- */ .site-produkt{display:flex;flex-direction:column;gap:var(--space-2);height:100%} .site-produkt__frage{font-family:var(--font-quote);font-size:var(--body-lg);line-height:var(--leading-title);color:var(--lehm-tief);margin:0} .site-produkt__nutzen{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-secondary);margin:0} .site-produkt__meta{font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted)} .site-produkt__link{margin-top:auto;margin-bottom:0} .site-produkt__link a{display:inline-flex;align-items:center;gap:var(--space-1);text-decoration:none;color:var(--aqua-tief)} .site-produkt__link a:hover{color:var(--tiefblau);gap:var(--space-2);text-decoration:none} .site-produkt__link svg{flex:0 0 16px} .site-themen{display:grid;grid-template-columns:1fr;gap:var(--space-2)} .site-thema{color:var(--link);font-size:var(--body-md)} .site-thema-kachel{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);background:var(--surface-container-lowest);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);text-decoration:none;color:var(--tiefblau);font-size:var(--body-md);line-height:var(--leading-title);transition:var(--transition-ui)} .site-thema-kachel:hover{background:var(--surface-bright);box-shadow:var(--shadow-ambient-soft);color:var(--aqua-tief);text-decoration:none} .site-thema-kachel svg{flex:0 0 16px} .site-slider{display:flex;gap:var(--space-3);margin-top:var(--space-10);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-2)} .site-slider:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .site-slider__karte{flex:0 0 calc((100% - var(--space-3) * 2) / 3);min-width:262px;scroll-snap-align:start} .site-slider__karte .site-bild{margin:calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-3)} .site-slider__karte .site-bild figcaption{margin:var(--space-1) var(--space-5) 0} .site-slider__hinweis{font-size:var(--label-sm);color:var(--text-muted);margin-top:var(--space-2)} .site-bild__titelbild{aspect-ratio:16 / 9;border-radius:var(--radius-xl) var(--radius-xl) 0 0} .site-beitrag__meta{font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted);margin-bottom:var(--space-2)} /* --- Faktenbox, Selbstcheck, Ablauf ----------------------------- */ .site-faktenbox{background:var(--surface-container-lowest);border-radius:var(--radius-xl);padding:var(--space-5)} .site-faktenbox__titel{font-family:var(--font-body);font-size:var(--label-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2)} .site-faktenbox__liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)} .site-faktenbox__liste li{display:grid;grid-template-columns:14ch 1fr;gap:var(--space-3);font-size:var(--body-md)} .site-faktenbox__liste dt,.site-faktenbox__liste .site-faktenbox__key{font-family:var(--font-data);font-size:var(--label-md);color:var(--text-muted)} .site-faktenbox--aqua{background:var(--aqua-still,#E6F9FA)} .site-faktenbox--aqua .site-faktenbox__titel{color:var(--tiefblau)} .site-faktenbox--aqua .site-faktenbox__liste,.site-faktenbox--aqua .site-faktenbox__liste .site-faktenbox__key{color:var(--tiefblau)} .site-faktenbox--aqua a{color:var(--tiefblau);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .site-faktenbox--aqua a:hover{color:var(--tiefblau);text-decoration-thickness:2px} .site-selbstcheck{background:var(--surface-accent-quiet);border-radius:var(--radius-xl);padding:var(--space-5) var(--space-6)} .site-selbstcheck__titel{font-size:var(--headline-sm);line-height:var(--leading-title);color:var(--tiefblau);margin:0 0 var(--space-3)} .site-selbstcheck__liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)} .site-selbstcheck__liste li{display:flex;gap:var(--space-2);font-size:var(--body-md);line-height:var(--leading-loose);color:var(--tiefblau)} .site-ablauf{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-8);grid-template-columns:1fr} .site-ablauf__nr{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--kennzahl-md);font-weight:var(--weight-medium);letter-spacing:var(--tracking-display);color:var(--text-muted);display:block;margin-top:var(--space-4)} .site-ablauf__titel{font-size:var(--headline-sm);line-height:var(--leading-title);margin:var(--space-2) 0} .site-ablauf__dauer{font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted);display:block;margin-bottom:var(--space-1)} .site-ablauf__text{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-secondary);margin:0} /* --- Vergleichstabelle, Aufklappelement ------------------------- */ .site-tabelle-wrap{overflow-x:auto} .site-details{background:var(--surface-container-lowest);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-4)} .site-details+.site-details{margin-top:var(--space-2)} .site-details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:var(--body-lg);font-weight:var(--weight-medium);color:var(--tiefblau);padding:var(--space-1) 0} .site-details>summary::-webkit-details-marker{display:none} .site-details>summary::after{content:"";flex:0 0 10px;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-bottom:4px} .site-details[open]>summary::after{transform:rotate(-135deg);margin-bottom:0} .site-details>summary:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .site-details__body{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-secondary);padding:var(--space-2) 0 var(--space-2)} /* --- Formular: Label über dem Feld, Fehler über :invalid -------- */ .site-form{display:grid;gap:var(--space-3)} .site-form__row{display:grid;gap:var(--space-3);grid-template-columns:1fr} .site-feld{display:flex;flex-direction:column;gap:var(--space-1)} .site-feld__label{font-size:var(--label-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)} .site-feld__hinweis{font-size:var(--label-sm);color:var(--text-muted)} .site-feld__fehler{font-size:var(--label-sm);font-weight:var(--weight-semibold);color:var(--kritisch);display:none} .site-feld input:not([type="checkbox"]):not([type="radio"]),.site-feld select,.site-feld textarea{background:var(--surface-container-lowest);box-shadow:inset 0 0 0 1px var(--border-ghost)} .site-feld input:not([type="checkbox"]):not([type="radio"]):hover,.site-feld select:hover,.site-feld textarea:hover{background:var(--surface-container-lowest);box-shadow:inset 0 0 0 1px var(--border-ghost-strong)} .site-feld input:not([type="checkbox"]):not([type="radio"]):focus,.site-feld select:focus,.site-feld textarea:focus{background:var(--surface-bright);box-shadow:inset 0 0 0 2px var(--aqua-tief),var(--shadow-ambient-soft)} .site-feld input:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown):invalid,.site-feld textarea:not(:placeholder-shown):invalid{box-shadow:inset 0 0 0 2px var(--kritisch)} .site-form .ap-check input{background:var(--surface-container-lowest);box-shadow:inset 0 0 0 1px var(--border-ghost-strong)} .site-form .ap-check input:hover{background:var(--surface-container-lowest);box-shadow:inset 0 0 0 1px var(--tiefblau)} .site-form .ap-check input:checked{background:var(--tiefblau);box-shadow:none} .site-feld input:not([type="checkbox"]):not([type="radio"]):not(:placeholder-shown):invalid~.site-feld__fehler,.site-feld textarea:not(:placeholder-shown):invalid~.site-feld__fehler{display:block} /* Auswahlkarten: gestylte Radio-Eingaben */ .site-auswahl{display:grid;gap:var(--space-2);grid-template-columns:1fr} .site-auswahl__karte{position:relative;display:block;background:var(--surface-container-lowest);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-4);cursor:pointer;transition:var(--transition-ui)} .site-auswahl__karte:hover{background:var(--surface-bright);box-shadow:var(--shadow-ambient-soft)} .site-auswahl__karte input{position:absolute;opacity:0;width:0;height:0} .site-auswahl__titel{display:block;font-size:var(--body-lg);color:var(--tiefblau)} .site-auswahl__text{display:block;font-size:var(--body-md);color:var(--text-secondary);margin-top:var(--space-0h)} .site-auswahl__karte:has(input:checked){background:var(--surface-accent-quiet);box-shadow:inset 0 0 0 2px var(--aqua-tief)} .site-auswahl__karte:has(input:focus-visible){outline:var(--focus-ring);outline-offset:var(--focus-offset)} /* --- Bildplatzhalter, Brotkrumen, CTA-Band ---------------------- */ .site-bild{margin:0} .site-bild__flaeche{background:var(--surface-container-high);border-radius:var(--radius-lg);aspect-ratio:16 / 9} .site-bild__flaeche--portrait{aspect-ratio:4 / 5} .site-bild__flaeche--quadrat{aspect-ratio:1 / 1} .site-bild__flaeche--dunkel{background:var(--surface-dark)} .site-bild figcaption,.site-bild__caption{font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted);margin-top:var(--space-2)} .site-krumen{font-size:var(--label-md);color:var(--text-muted);padding-block:var(--space-3)} .site-krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0} .site-krumen li+li::before{content:"·";margin-right:var(--space-1);color:var(--text-muted)} .site-cta{background:var(--surface-container-high);padding:var(--space-10) 0} .site-cta__inner{display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:center} .site-cta__titel{font-size:var(--headline-md);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);color:var(--tiefblau);margin:0;max-width:26ch} .site-cta__hinweis{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--lehm-tief);margin-top:var(--space-2)} /* --- Footer ----------------------------------------------------- */ .site-footer{background:var(--surface-dark);color:var(--text-on-dark)} .site-footer__grid{max-width:var(--container-max);margin:0 auto;padding:var(--space-12) var(--space-3) var(--space-6);display:grid;grid-template-columns:1fr;gap:var(--space-8)} .site-footer__titel{font-size:var(--label-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-on-dark-secondary)} .site-footer__liste{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-2);font-size:var(--body-sm);list-style:none;padding:0} .site-footer__kontakt{font-family:var(--font-data);font-size:var(--label-md);color:var(--sand-hell);line-height:2;margin-top:var(--space-2)} .site-footer__liste a,.site-footer__recht a,.site-footer__kontakt a,.site-footer p>a{color:var(--text-on-dark);text-decoration:none} .site-footer__liste a:hover,.site-footer__recht a:hover,.site-footer__kontakt a:hover,.site-footer p>a:hover{color:var(--aqua);text-decoration:underline;text-underline-offset:3px} .site-footer__schluss{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-3) var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;font-size:var(--label-sm);color:var(--text-on-dark-secondary)} .site-footer__recht{display:flex;flex-wrap:wrap;gap:var(--space-3);list-style:none;margin:0;padding:0} .site-footer .site-feld__label{color:var(--text-on-dark-secondary)} .site-footer__logo img{display:block;height:40px;width:auto} /* --- Umbruchpunkte ---------------------------------------------- */ @media (min-width:600px){ .site-grid--2{grid-template-columns:repeat(2,1fr)} .site-themen{grid-template-columns:repeat(2,1fr)} .site-auswahl{grid-template-columns:repeat(2,1fr)} .site-form__row{grid-template-columns:repeat(2,1fr)} } @media (min-width:900px){ .site-section{padding:var(--space-15) 0} .site-hero{padding:var(--space-15) 0 var(--space-12)} .site-grid--3{grid-template-columns:repeat(3,1fr)} .site-grid--split{grid-template-columns:0.9fr 1.1fr} .site-grid--hero{grid-template-columns:1.15fr 0.85fr} .site-ablauf{grid-template-columns:repeat(3,1fr)} .site-themen{grid-template-columns:repeat(3,1fr)} .site-cta__inner{grid-template-columns:1.2fr auto} .site-footer__grid{grid-template-columns:1.4fr 1fr 1fr} } @media (min-width:1200px){ .site-section{padding:var(--section-y) 0} } @media (max-width:899px){ .site-nav__list{display:none} .site-burger{display:block;position:relative} .site-cta__inner .site-actions{justify-content:flex-start} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important} } /* --- Runder Pfeilverweis in Kartenecken -------------------------- */ .site-pfeil{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:var(--surface-container-high);color:var(--tiefblau);text-decoration:none};transition:var(--transition-ui)} .site-pfeil:hover{background:var(--surface-container-highest);box-shadow:var(--shadow-ambient-soft);color:var(--tiefblau);text-decoration:none} .site-pfeil:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} button.site-pfeil{border:0;padding:0;cursor:pointer;font:inherit} /* Pfeilverweis mit Beschriftung, gleiche Fläche wie der runde Pfeil. */ .site-pfeil--breit{width:auto;gap:var(--space-2);padding:0 var(--space-4);font-size:var(--body-md);line-height:1} /* --- Dunkle Kachel: Hover nur als Schatten ----------------------- */ .ap-card--dark.ap-card--interactive{transition:var(--transition-ui)} .ap-card--dark.ap-card--interactive:hover{background:var(--tiefblau);box-shadow:var(--shadow-ambient-strong)} /* --- Handlungsfeld-Kacheln mit laufender Nummer ------------------ */ .site-problem{display:grid;gap:var(--space-3);align-content:start;height:100%} .site-problem__nr{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-data);font-size:var(--label-md);letter-spacing:var(--tracking-label);color:var(--lehm-tief);margin:0} .site-problem__strich{height:var(--accent-rule);width:var(--accent-rule-width);background:var(--aqua)} .site-problem__text{font-size:var(--body-lg);line-height:var(--leading-title);color:var(--tiefblau);margin:0} /* --- Pfeil in der Kartenecke ------------------------------------ */ .site-produkt__link--pfeil{display:flex;justify-content:flex-end;margin-top:auto;margin-bottom:0;padding-top:var(--space-4)} .site-produkt__link--pfeil a:hover{gap:0} /* Scrollbalken der Slider ausblenden: geblättert wird ueber die Pfeile, gewischt wird auf dem Touchgeraet. Wischen, Tastatur und Einrasten bleiben unberuehrt — nur die Leiste verschwindet. */ .site-slider,.site-grid--slider,.site-grid--slider-mobil{scrollbar-width:none;-ms-overflow-style:none} .site-slider::-webkit-scrollbar, .site-grid--slider::-webkit-scrollbar, .site-grid--slider-mobil::-webkit-scrollbar{width:0;height:0;display:none} /* --- Beitrags-Slider: Blätterpfeile, feste Kachelhöhe ----------- */ .site-slider__nav{display:flex;gap:var(--space-2);margin-top:var(--space-6)} .site-slider__nav+.site-slider{margin-top:var(--space-4)} /* Blaetterpfeile stehen rechts UNTER dem Slider, auf einer Zeile mit einem dort vorhandenen Verweis ("Alle Beitraege") — dieser links, die Pfeile rechts. Im Markup liegen die Pfeile vor dem Slider (das Skript findet ihn ueber das Elternelement); die Reihenfolge dreht der Container per order, ohne Markup-Umbau in 15 Vorlagen. Der Container wird dazu eine umbrechende Reihe: jedes Kind nimmt eine ganze Zeile, nur Verweis und Pfeile teilen sich die letzte. */ .site-container:has(> .site-slider__nav){display:grid;grid-template-columns:1fr auto;align-items:center} /* Im Grid entfaellt das Zusammenfallen der Raender; jedes Kind hier bringt seinen Abstand als margin-top mit, darum unten auf 0. */ .site-container:has(> .site-slider__nav) > *{grid-column:1 / -1;min-width:0;margin-bottom:0} .site-container:has(> .site-slider__nav) > .site-slider__hinweis{order:98;grid-column:1;justify-self:start;display:flex;align-items:center;line-height:1;margin:var(--space-2) 0 0} .site-container:has(> .site-slider__nav) > .site-slider__nav{order:99;grid-column:2;justify-self:end;margin:var(--space-2) 0 0} /* min-height statt height: die Kachel darf wachsen, wenn Thema oder Titel mehr Zeilen brauchen — sonst schiebt der nicht schrumpfende Anriss den Pfeil aus der Kachel. Reihen bleiben ueber align-items: stretch gleich hoch. */ .site-slider__karte{flex:0 0 clamp(340px,calc((100% - var(--space-3) * 2) / 3),460px);min-width:0;min-height:600px;display:flex;flex-direction:column} .site-slider__karte>.site-produkt__link--pfeil{margin-top:auto} /* flex:none ist wesentlich: als schrumpfender Flex-Kasten wuerde der Absatz von der Kachel gekappt statt von der Zeilenbegrenzung — und nur die Begrenzung setzt das Auslassungszeichen. */ .site-beitrag__anriss{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;flex:none;text-overflow:ellipsis} /* --- Themenkacheln: kräftigerer Hover, drei Spalten ------------- */ .site-thema-kachel:hover{background:var(--surface-container-highest);box-shadow:var(--shadow-ambient);color:var(--tiefblau)} @media (min-width:900px){ .site-themen--drei{grid-template-columns:repeat(3,minmax(0,1fr))} .site-grid--themen>.site-themen--drei{grid-template-rows:none;grid-auto-flow:row} } /* --- Raster: drei Spalten bleiben stehen, auch bei einer Karte --- Feste Spuren statt auto-fit: eine oder zwei Karten füllen dann eine Spaltenbreite, rechts bleibt Weißraum. minmax(0,1fr) verhindert, dass lange Titel eine Spur breiter machen. */ .site-grid--3{grid-template-columns:minmax(0,1fr)} @media (min-width:1024px){ .site-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} } .ap-card__title{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word} /* --- Beitragskarte im Raster (ohne Slider) ---------------------- */ .site-beitrag{display:flex;flex-direction:column;height:100%} .site-beitrag>.site-bild{margin:calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-3)} .site-beitrag>.site-bild figcaption{margin:var(--space-1) var(--space-5) 0} /* --- Zeitstrahl mit fünf Schritten ------------------------------ */ .site-ablauf--fuenf{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-4)} .site-ablauf__titel{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word} /* --- Ganze Karte klickbar: Pfeilverweis überdeckt die Karte ------ */ .ap-card--interactive{position:relative} .ap-card--interactive .site-pfeil::after{content:"";position:absolute;inset:0;z-index:1} .ap-card--interactive a:not(.site-pfeil),.ap-card--interactive button{position:relative;z-index:2} /* --- Zitatkästen der Geschäftsführung --------------------------- */ .site-zitate{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-3);margin-top:var(--space-8)} .site-zitat{background:var(--surface-container-lowest);border-radius:var(--radius-xl);padding:var(--space-5) var(--space-6);margin:0} .site-zitat::before{content:"";display:block;height:var(--accent-rule);width:var(--accent-rule-width);background:var(--aqua);margin-bottom:var(--space-3)} .site-zitat__text{font-family:var(--font-quote);font-size:var(--body-lg);line-height:var(--leading-title);color:var(--tiefblau);margin:0} .site-zitat__quelle{font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted);margin:var(--space-3) 0 0} /* --- Fehlerdarstellung für Auswahl und Kontrollkästchen --------- */ .site-feld select:invalid:focus-visible{box-shadow:inset 0 0 0 2px var(--kritisch)} .site-feld:has(select:invalid:focus-visible) .site-feld__fehler,.site-feld:has(input[type="checkbox"]:invalid:focus-visible) .site-feld__fehler{display:block} /* --- Rubrikenzeile im Wissensbereich ---------------------------- */ .site-rubriken{margin-bottom:var(--space-6)} .site-rubriken__zeile{display:flex;flex-wrap:wrap;gap:var(--space-1)} .site-rubriken__auswahl{display:none} .site-rubriken + .site-grid{margin-top:0} .site-rubrik{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);border-radius:var(--radius-lg);background:var(--surface-container-lowest);color:var(--tiefblau);text-decoration:none;font-size:var(--body-md);line-height:var(--leading-title);transition:var(--transition-ui)} .site-rubrik:hover{background:var(--surface-container-high);color:var(--tiefblau);text-decoration:none} .site-rubrik--aktiv{background:var(--surface-container-high);color:var(--tiefblau)} .site-rubrik:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} /* --- Beitragsfuß: Datum und Lesezeit, durch Mittelpunkt getrennt -- */ .site-beitrag__fuss{display:flex;flex-wrap:wrap;gap:var(--space-2);font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted);margin:0} .site-beitrag__fuss > span + span::before{content:"·";margin-right:var(--space-2)} /* --- Beitragsseite: einspaltiger Lesefluss ---------------------- */ .site-artikel{padding:var(--space-8) 0 var(--space-12)} .site-artikel__titel{font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);color:var(--tiefblau);margin:var(--space-4) 0 0} .site-artikel__daten{margin-top:var(--space-4);gap:var(--space-3)} .site-artikel__inhalt{margin-top:var(--space-8)} .site-artikel__inhalt h2{font-size:var(--headline-sm);line-height:var(--leading-title);color:var(--tiefblau);margin:var(--space-8) 0 var(--space-2)} .site-artikel__inhalt p{font-size:var(--body-lg);line-height:var(--leading-loose);color:var(--tiefblau);margin:0 0 var(--space-3)} .site-artikel__quelle{font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted);margin-top:var(--space-6)} .site-artikel__inhalt .site-artikel__quelle{font-size:var(--label-sm);color:var(--text-muted)} /* --- Teilen-Bereich -------------------------------------------- */ .site-teilen{display:grid;gap:var(--space-2);margin-top:var(--space-6)} .site-teilen__titel{font-size:var(--label-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin:0} .site-teilen__reihe{display:flex;flex-wrap:wrap;gap:var(--space-1)} .site-teilen__link{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);border-radius:var(--radius-lg);background:var(--surface-container-lowest);color:var(--tiefblau);text-decoration:none;font-size:var(--body-md);transition:var(--transition-ui)} .site-teilen__link:hover{background:var(--surface-container-high);color:var(--tiefblau);text-decoration:none} .site-teilen__link:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} /* --- Autorenblock ---------------------------------------------- */ .site-autor{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:start;margin-top:var(--space-2)} .site-autor__bild{flex:0 0 120px;width:120px;aspect-ratio:1 / 1;border-radius:var(--radius-xl)} /* --- Zweispaltiger Fließtext (SEO-Abschnitt) -------------------- Spaltensatz per CSS-Mehrspaltigkeit: die Absätze bleiben eine Textfolge, der Umbruch richtet sich nach der Breite. */ .site-spalten{columns:2;column-gap:var(--space-8)} .site-spalten>p{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-body);margin:0 0 var(--space-3);break-inside:avoid-column} .site-spalten>p:last-child{margin-bottom:0} @media (max-width:899px){.site-spalten{columns:1}} /* --- Rechtstexte: einspaltig, nur Typografie -------------------- */ .site-recht{padding:var(--space-10) 0 var(--space-12)} .site-recht__titel{font-size:var(--headline-lg);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);color:var(--tiefblau);margin:0} .site-recht__stand{font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted);margin-top:var(--space-2)} .site-recht__inhalt{margin-top:var(--space-8)} .site-recht__inhalt-titel{font-size:var(--label-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-2)} .site-recht__inhalt ol{display:grid;gap:var(--space-1);margin:0;padding-left:var(--space-3);font-size:var(--body-md)} .site-recht h2{font-size:var(--headline-sm);line-height:var(--leading-title);color:var(--tiefblau);margin:var(--space-8) 0 var(--space-2);scroll-margin-top:var(--space-12)} .site-recht h3{font-size:var(--body-lg);font-weight:var(--weight-medium);line-height:var(--leading-title);color:var(--tiefblau);margin:var(--space-5) 0 var(--space-1)} .site-recht h4{font-size:var(--body-md);font-weight:var(--weight-semibold);line-height:var(--leading-title);color:var(--text-secondary);margin:var(--space-3) 0 var(--space-1)} .site-recht__liste{list-style:none;margin:0 0 var(--space-2);padding:0;display:grid;gap:var(--space-2);max-width:var(--measure);font-size:var(--body-md);line-height:var(--leading-loose);color:var(--tiefblau)} .site-recht__liste li{padding-left:var(--space-3);position:relative} .site-recht__liste li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:2px;background:var(--aqua)} .site-recht p{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--tiefblau);margin:0 0 var(--space-2);max-width:var(--measure)} /* --- Beitragskopf: Titel links, Metadaten rechts ---------------- */ .site-artikel__kopf{display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:end} .site-artikel__meta{display:grid;gap:var(--space-1)} .site-artikel__rubrik{font-size:var(--body-md);color:var(--tiefblau);margin:0} .site-artikel__bild--breit{aspect-ratio:16 / 9;border-radius:var(--radius-xl)} .site-artikel .site-container+.site-container{margin-top:var(--space-8)} .site-teilen__icon{width:44px;height:44px} .site-teilen--kopf{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)} .site-teilen--kopf .site-teilen__titel{font-size:var(--label-sm,var(--label-md))} .site-teilen--kopf .site-teilen__icon{width:32px;height:32px} .site-teilen--kopf .site-teilen__icon svg{width:16px;height:16px} .site-teilen--kopf .site-teilen__reihe{gap:var(--space-1);align-items:center} .site-teilen__hinweis{font-family:var(--font-mono);font-size:var(--label-md);color:var(--aqua-tief,#0B5F66)} button.site-teilen__icon{border:0;cursor:pointer;font:inherit} .site-teilen--gross{gap:0;margin-top:var(--space-12)} .site-autorblock{display:grid;grid-template-columns:1fr;gap:var(--space-5);margin-top:var(--space-6);align-items:start} .site-autorblock__bild{aspect-ratio:4 / 5;border-radius:var(--radius-xl)} .site-autorblock__name{font-size:var(--headline-lg);font-weight:var(--weight-medium);letter-spacing:var(--tracking-display);margin:0} .site-autorblock__rolle{font-family:var(--font-mono);font-size:var(--label-md);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--lehm-tief,#6B5140);margin:var(--space-2) 0 0} .site-autorblock__vita{font-size:var(--body-lg);line-height:1.75;margin:var(--space-3) 0 0} .site-autorblock__cta{align-self:stretch} .site-autorblock__aktion{margin-top:var(--space-4)} .site-autorblock__aktion{display:flex;justify-content:flex-start} .site-autorblock__aktion .ap-btn{gap:var(--space-2);align-self:auto;width:auto;flex:0 0 auto} @media (min-width:700px){ .site-autorblock{grid-template-columns:200px 1fr;gap:var(--space-6)} .site-autorblock__cta{grid-column:1 / -1} } @media (min-width:1000px){ .site-autorblock{grid-template-columns:180px minmax(0,1fr) 0.85fr;gap:var(--space-6)} .site-autorblock__cta{grid-column:auto} } .site-teilen--gross .site-teilen__headline{font-size:var(--headline-lg);font-weight:var(--weight-medium);letter-spacing:var(--tracking-display);margin:var(--space-4) 0 0} .site-teilen--gross .site-teilen__text{font-size:var(--body-lg);color:var(--text-secondary);margin:var(--space-2) 0 0;max-width:var(--measure-narrow)} .site-teilen--gross .site-teilen__reihe{margin-top:var(--space-5);gap:var(--space-2);align-items:center} .site-teilen--gross .site-teilen__icon{width:56px;height:56px} @media (min-width:900px){ .site-artikel__kopf{grid-template-columns:1.15fr 0.85fr;gap:var(--space-8)} .site-artikel__meta{justify-items:start} } /* --- Personenkopf, Kurzprofil, Zeitstrahl (Seite ueber-uns) ------ */ .site-personkopf{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:start} .site-personkopf__zeile{font-family:var(--font-data);font-size:var(--label-md);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--lehm-tief);margin:var(--space-3) 0 0} .site-social{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)} .site-social__link{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4) var(--space-2) var(--space-3);background:var(--surface-container-lowest);color:var(--tiefblau);border-radius:var(--radius-lg);font-size:var(--label-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:none;transition:var(--transition-ui)} .site-social__link svg{flex:0 0 18px;color:var(--aqua-tief)} .site-social__link:hover{background:var(--tiefblau);color:var(--sand-hell);text-decoration:none} .site-social__link:hover svg{color:var(--aqua)} .site-social__link:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .site-faktenbox .site-social__link{text-decoration:none} .site-faktenbox .site-social__link:hover{background:var(--tiefblau);color:var(--sand-hell);text-decoration:none} .site-kennzahlen{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);margin-top:var(--space-6)} .site-kennzahl{background:var(--surface-container-high);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-5)} .site-kennzahl--sand{background:var(--sand)} .site-kennzahl--aqua{background:var(--aqua)} .site-kennzahl--lehm{background:var(--lehm)} .site-kennzahl--tiefblau{background:var(--tiefblau)} .site-kennzahl--tiefblau .site-kennzahl__label{color:var(--sand)} .site-kennzahl--tiefblau .site-kennzahl__wert{color:var(--sand-hell)} .site-kennzahl--aqua .site-kennzahl__label,.site-kennzahl--lehm .site-kennzahl__label{color:var(--tiefblau);opacity:.72} .site-kennzahl__label{font-family:var(--font-body);font-size:var(--label-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--lehm-tief);margin:0;overflow-wrap:break-word} .site-kennzahl__wert{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--kennzahl-md);font-weight:var(--weight-medium);letter-spacing:var(--tracking-display);color:var(--tiefblau);margin:var(--space-2) 0 0} .site-zeitstrahl{list-style:none;margin:var(--space-8) 0 0;padding:var(--space-6) 0 var(--space-8) var(--space-5);position:relative;display:grid;gap:var(--space-8)} .site-zeitstrahl::before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--surface-container-highest)} .site-station{position:relative;max-width:var(--measure)} .site-station::before{content:"";position:absolute;left:calc(var(--space-5) * -1 - 4px);top:6px;width:9px;height:9px;background:var(--tiefblau)} .site-station--letzte::before{background:var(--aqua)} .site-station__zeit{font-family:var(--font-data);font-size:var(--label-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin:0} .site-station__rolle{font-family:var(--font-quote);font-size:var(--headline-sm);line-height:var(--leading-title);color:var(--tiefblau);margin:var(--space-2) 0 0} .site-station__org{font-size:var(--body-md);color:var(--text-secondary);margin:var(--space-1) 0 0} .site-station__text{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--tiefblau);margin:var(--space-3) 0 0} .site-station__zahlen{font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted);margin:var(--space-2) 0 0} .site-zitate--3{grid-template-columns:1fr} @media (min-width:640px){.site-zitate--3{grid-template-columns:repeat(2,1fr)}} @media (min-width:1000px){.site-zitate--3{grid-template-columns:repeat(3,1fr)}} .site-schnitt{background:var(--surface-dark);color:var(--text-on-dark);padding:var(--space-8) 0} .site-schnitt__satz{font-family:var(--font-quote);font-size:var(--headline-md);line-height:var(--leading-title);color:var(--sand-hell);margin:0;max-width:26ch} @media (min-width:600px){ .site-kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:900px){ .site-personkopf{grid-template-columns:0.85fr 1.15fr;gap:var(--space-8)} .site-kennzahlen{grid-template-columns:repeat(4,minmax(0,1fr))} .site-zeitstrahl{padding-left:var(--space-8)} .site-station::before{left:calc(var(--space-8) * -1 - 4px)} } .site-footer__social{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-top:var(--space-4)} .site-footer__social a{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:rgba(244,239,231,.06);color:var(--sand-hell);border-radius:var(--radius-lg);font-size:var(--label-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:none;transition:var(--transition-ui)} .site-footer__social a svg{flex:0 0 18px;color:var(--aqua)} .site-footer p.site-footer__social>a:hover{background:var(--aqua);color:var(--tiefblau);text-decoration:none} .site-footer p.site-footer__social>a:hover svg{color:var(--tiefblau)} .site-footer__social a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} /* --- Tablet- und Mobilansicht ----------------------------------- */ html{-webkit-text-size-adjust:100%} body{overflow-x:hidden} img,svg{max-width:100%} /* Tablet: 600–1023 px */ @media (min-width:600px) and (max-width:1023px){ :root{--site-gutter:var(--space-4)} .site-container,.site-header__inner,.site-footer__grid{padding-left:var(--space-4);padding-right:var(--space-4)} .site-section{padding:var(--space-12) 0} .site-hero{padding:var(--space-12) 0 var(--space-10)} .site-hero__title{max-width:26ch} .site-slider__karte{flex:0 0 calc((100% - var(--space-3)) / 2)} .site-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} .site-ablauf,.site-ablauf--fuenf{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)} .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)} .site-footer__grid>*:first-child{grid-column:1 / -1} .site-kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))} .site-cta__inner{grid-template-columns:1fr;gap:var(--space-5)} } /* Mobil: bis 599 px */ @media (max-width:599px){ .site-container,.site-header__inner,.site-footer__grid{padding-left:var(--space-3);padding-right:var(--space-3)} .site-section{padding:var(--space-10) 0} .site-section--tight{padding:var(--space-8) 0} .site-hero{padding:var(--space-8) 0 var(--space-8)} .site-hero__title{font-size:clamp(1.75rem,7.6vw,2.25rem);max-width:100%;text-wrap:pretty} .site-h2{font-size:var(--headline-md);max-width:100%} .site-lead{font-size:var(--body-md)} .site-grid{margin-top:var(--space-6)} .site-grid--hero,.site-grid--split,.site-grid--2,.site-grid--3,.site-personkopf,.site-artikel__kopf{grid-template-columns:minmax(0,1fr)} .site-grid--hero{gap:var(--space-5)} .site-grid--themen>.site-themen,.site-grid--themen>*:first-child{flex:1 1 100%;min-width:0;max-width:none} .site-themen,.site-themen--drei{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-rows:none} .site-eyebrow,.site-hero__title,.site-h2,.site-produkt__titel{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word} .site-actions{gap:var(--space-2)} .site-actions>.ap-btn,.site-hero .site-actions>a,.site-cta__inner .site-actions>a{width:100%;justify-content:center} .site-autorblock__aktion>.ap-btn{width:auto;justify-content:flex-start} .ap-card{padding:var(--space-5)} .site-slider{margin-inline:calc(var(--space-3) * -1);padding-inline:var(--space-3)} .site-slider__karte{flex:0 0 84%;min-width:0} .site-fakt{flex-wrap:wrap;gap:var(--space-2)} .site-fakt__wert{font-size:var(--headline-md)} .site-kennzahl{padding:var(--space-3) var(--space-4)} .site-zeitstrahl{padding-left:var(--space-4)} .site-station::before{left:calc(var(--space-4) * -1 - 4px)} .site-station__text,.site-zitat{font-size:var(--body-md)} .site-zitat{padding:var(--space-4) var(--space-4)} .site-schnitt{padding:var(--space-6) 0} .site-schnitt__satz{font-size:var(--headline-sm);max-width:100%} .site-artikel__kopf{gap:var(--space-3)} /* Mobil war der Vorlauf ueber dem Titel rund 120 px hoch (Krumen, Artikelpolster und Titelabstand addiert). Hier auf ein Drittel. */ .site-artikel{padding-top:var(--space-4)} .site-artikel__titel{margin-top:0} .site-teilen--gross .site-teilen__icon{width:48px;height:48px} .site-teilen__reihe{flex-wrap:wrap} .site-autorblock__bild{max-width:200px} .site-cta{padding:var(--space-8) 0} .site-cta__titel{font-size:var(--headline-sm)} .site-footer__grid{padding-top:var(--space-10);gap:var(--space-6)} .site-footer__social a{padding:var(--space-2)} .site-faktenbox{padding:var(--space-4)} .site-faktenbox__liste li{grid-template-columns:minmax(0,1fr);gap:var(--space-1)} .site-krumen{font-size:var(--label-sm)} .site-krumen ol{row-gap:0} .ap-table,.site-tabelle{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} } /* --- Burgermenü: eigene Reihe unter der Kopfzeile, eine Glasfläche -- */ .site-header__inner{position:relative;z-index:0;flex-wrap:wrap} .site-header::before{content:"";position:absolute;inset:0;background:var(--glass-surface);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);z-index:-1} .site-burger{cursor:pointer;align-items:center;justify-content:center;gap:var(--space-2);min-width:44px;height:44px;padding:0 var(--space-3);border-radius:var(--radius-lg);background:var(--surface-container-low);color:var(--tiefblau);transition:var(--transition-ui)} .site-burger:hover{background:var(--surface-container-high)} .site-burger__schalter:focus-visible+.site-nav .site-burger{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .site-burger__icon{width:20px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;transition:var(--transition-ui)} .site-burger__wort{font-size:var(--label-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase} .site-burger__panel{display:none} /* Kopf-CTA und Men\u00fc-Schaltfl\u00e4che gleich hoch, damit der Radius gleich wirkt */ .site-nav__cta{height:44px;padding-inline:var(--space-3)} .site-burger__schalter:checked~.site-nav .site-burger{background:var(--tiefblau);color:var(--sand-hell)} .site-burger__schalter:checked~.site-nav .site-burger__icon{height:0;border-bottom-color:transparent} @media (max-width:899px){ .site-nav{gap:var(--space-2)} .site-burger{display:inline-flex;order:2;margin-left:auto} .site-nav__cta{order:1} .site-burger__schalter:checked~.site-burger__panel{display:grid;position:static;flex:0 0 100%;width:100%;background:none;box-shadow:none;padding:var(--space-2) 0 var(--space-3);gap:0} .site-header:has(.site-burger__schalter:checked)::before{box-shadow:var(--shadow-ambient)} .site-burger__panel a{display:flex;align-items:center;min-height:52px;padding:0 var(--space-2);font-size:var(--body-lg);text-decoration:none;color:var(--tiefblau);border-radius:var(--radius-md)} .site-burger__panel a:hover{background:var(--surface-container-low)} .site-burger__panel .site-burger__cta{justify-content:center;margin-top:var(--space-3);min-height:48px;border-radius:var(--radius-lg);color:var(--tiefblau)} .site-burger__panel .site-burger__cta:hover{color:var(--tiefblau)} } @media (max-width:599px){ .site-nav__cta{display:none} .site-burger__wort{display:none} .site-burger{padding:0;width:44px} } /* --- Rubrikenfilter als Schaltfläche ----------------------------- */ .site-rubriken button.site-rubrik{border:0;font:inherit;font-size:var(--body-md);cursor:pointer;min-height:36px} /* --- Beitragstitel als Link ------------------------------------- */ .ap-card__title > a{color:inherit;text-decoration:none} .ap-card__title > a:hover{color:var(--tiefblau);text-decoration:none} .ap-card__title > a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} /* --- Hinweis auf noch nicht gesetzten Fließtext ------------------ */ .site-artikel__inhalt p.site-artikel__hinweis{background:var(--surface-container-low);color:var(--text-muted);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-6);font-size:var(--label-sm);line-height:var(--leading-body)} /* --- Rubriken auf dem Telefon: Auswahlliste statt Zeile ---------- */ @media (max-width:599px){ .site-rubriken__zeile{display:none} .site-rubriken--frei .site-rubriken__zeile{display:flex} .site-rubriken__auswahl{display:grid;gap:var(--space-1)} .site-rubriken__label{font-size:var(--label-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)} .site-rubriken__select{appearance:none;width:100%;min-height:44px;padding:0 var(--space-5) 0 var(--space-3);border:0;border-radius:var(--radius-md);background:var(--surface-container-high);color:var(--tiefblau);font-family:inherit;font-size:var(--body-md)} .site-rubriken__select{background-image:linear-gradient(45deg,transparent 50%,var(--tiefblau) 50%),linear-gradient(135deg,var(--tiefblau) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat} .site-rubriken__select:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} } /* --- Blätterung ------------------------------------------------- */ .site-blaettern{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin-top:var(--space-10)} .site-blaettern__nr,.site-blaettern__pfeil{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--space-2);border:0;border-radius:var(--radius-lg);background:var(--surface-container-lowest);color:var(--tiefblau);font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--body-md);cursor:pointer;transition:var(--transition-ui)} .site-blaettern__nr:hover,.site-blaettern__pfeil:hover:not(:disabled){background:var(--surface-container-high)} .site-blaettern__nr--aktiv{background:var(--surface-container-high);font-weight:var(--weight-medium)} .site-blaettern__pfeil:disabled{opacity:.4;cursor:default} .site-blaettern__nr:focus-visible,.site-blaettern__pfeil:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} /* --- WordPress: Blätterung ohne Ziel, Widgets, Editor-Klassen ----- */ .site-blaettern__pfeil[data-aus]{opacity:.4;cursor:default} .site-seitenleiste{margin-top:var(--space-10)} .site-widget__titel{font-size:var(--headline-sm);line-height:var(--leading-title);color:var(--tiefblau);margin:0 0 var(--space-2)} .site-artikel__inhalt img,.site-artikel__inhalt iframe{max-width:100%;height:auto;border-radius:var(--radius-xl)} .site-artikel__inhalt figure{margin:var(--space-6) 0} .site-artikel__inhalt figcaption{font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted);margin-top:var(--space-2)} .site-artikel__inhalt ul,.site-artikel__inhalt ol{display:grid;gap:var(--space-2);margin:0 0 var(--space-4);padding-left:var(--space-4);font-size:var(--body-lg);line-height:var(--leading-loose);color:var(--tiefblau)} .site-artikel__inhalt blockquote{font-family:var(--font-quote);font-size:var(--headline-sm);line-height:var(--leading-title);color:var(--tiefblau);background:var(--surface-container-low);border-radius:var(--radius-xl);padding:var(--space-6);margin:var(--space-8) 0} .site-artikel__inhalt blockquote p{font-family:inherit;font-size:inherit} .alignleft{float:left;margin:0 var(--space-4) var(--space-3) 0} .alignright{float:right;margin:0 0 var(--space-3) var(--space-4)} .aligncenter{display:block;margin-left:auto;margin-right:auto} .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .sticky .ap-card__title::before{content:"Angepinnt";display:block;font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted);margin-bottom:var(--space-1)} /* --- WordPress: Bilder statt Platzhalterflächen ------------------- Die Bildflächen des Entwurfs waren
mit festem Seitenverhältnis. Als braucht es height:auto, sonst gewinnen die width/height- Attribute von WordPress und das Bild wird gestaucht. */ img.site-bild__flaeche,img.site-bild__titelbild{display:block;width:100%;height:auto;object-fit:cover} img.site-bild__titelbild{aspect-ratio:16 / 9} /* Das Titelbild im Beitrag behält sein echtes Seitenverhältnis. */ img.site-artikel__bild--breit{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain} /* --- Kopf-CTA fett, in allen Breiten ----------------------------- */ .site-nav__cta,.site-burger__cta{font-weight:var(--weight-semibold)} /* --- WordPress-Block "Details" als Akkordeon -------------------- Der Kernblock gibt
… aus. Hier bekommt er die Gestaltung des Aufklappelements der Seite: weiße Fläche, Radius 24, Winkel statt Plus, kein Trennstrich. */ .wp-block-details{background:var(--surface-container-lowest);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-5);margin:0} .wp-block-details+.wp-block-details{margin-top:var(--space-2)} .wp-block-details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-family:var(--font-body);font-size:var(--body-lg);font-weight:var(--weight-medium);line-height:var(--leading-title);color:var(--tiefblau);transition:var(--transition-ui)} .wp-block-details>summary::-webkit-details-marker,.wp-block-details>summary::marker{display:none;content:""} .wp-block-details>summary::after{content:"";flex:0 0 10px;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-bottom:4px;transition:var(--transition-ui)} .wp-block-details[open]>summary::after{transform:rotate(-135deg);margin-bottom:0} .wp-block-details>summary:hover{color:var(--aqua-tief)} .wp-block-details>summary:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .wp-block-details>:not(summary){font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-secondary)} .wp-block-details>:not(summary):first-of-type{margin-top:var(--space-3)} .site-artikel__inhalt .wp-block-details>p{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-secondary);margin:0 0 var(--space-2)} .site-artikel__inhalt .wp-block-details>p:last-child{margin-bottom:0} .wp-block-details>summary+*,.site-artikel__inhalt .wp-block-details>summary+*{margin-top:var(--space-3)} /* --- WPForms auf die Formulargestaltung des Systems bringen ------ Zwei Wege, weil WPForms zwei Markup-Fassungen ausliefert: 1. Die Variablen unten steuern die "moderne" Fassung ab 1.8 — WPForms setzt Feld- und Buttonstile daraus selbst. 2. Die Regeln danach greifen in der klassischen Fassung. Sie tragen bewusst "div.wpforms-container .wpforms-form" vor dem Element, damit sie das plugin-eigene Stylesheet überbieten; ohne diese Gewichtung gewinnt WPForms und die Felder bleiben weiß mit Rahmen. Ziel in beiden Fällen: Label in Versalien, Feld in Sand, Radius 12, Fokus als vollumlaufende 2-px-Kante, Absenden als Tiefblau-Button. */ .wpforms-container,.wpforms-container-full{ margin:0;max-width:none; --wpforms-field-background-color:var(--surface-container-lowest); --wpforms-field-border-color:transparent; --wpforms-field-border-style:none; --wpforms-field-border-size:0px; --wpforms-field-border-radius:var(--radius-md); --wpforms-field-text-color:var(--tiefblau); --wpforms-field-menu-color:var(--surface-container-lowest); --wpforms-label-color:var(--text-muted); --wpforms-label-sublabel-color:var(--text-muted); --wpforms-label-error-color:var(--kritisch); --wpforms-button-background-color:var(--tiefblau); --wpforms-button-text-color:var(--sand-hell); --wpforms-button-border-color:transparent; --wpforms-button-border-style:none; --wpforms-button-border-size:0px; --wpforms-button-border-radius:var(--radius-lg); --wpforms-field-size-input-height:44px; --wpforms-field-size-input-spacing:var(--space-3); --wpforms-field-size-font-size:var(--body-md); --wpforms-field-size-line-height:var(--leading-body); --wpforms-field-size-padding-h:var(--space-3); --wpforms-field-size-checkbox-size:20px; --wpforms-field-size-sublabel-spacing:var(--space-1); --wpforms-field-size-icon-size:1; --wpforms-button-size-height:52px; --wpforms-button-size-font-size:var(--body-md); --wpforms-button-size-padding-h:var(--space-6); --wpforms-button-size-margin-top:var(--space-2); } div.wpforms-container .wpforms-form{display:grid;gap:var(--space-3)} div.wpforms-container .wpforms-form .wpforms-field-container{display:grid;gap:var(--space-3)} div.wpforms-container .wpforms-form .wpforms-field-container>.wpforms-field{margin:0} div.wpforms-container .wpforms-form .wpforms-field{padding:0;display:flex;flex-direction:column;gap:var(--space-1);border:0} div.wpforms-container .wpforms-form .wpforms-field-label{font-family:var(--font-body);font-size:var(--label-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin:0} div.wpforms-container .wpforms-form :is(.wpforms-field-label,.wpforms-field-sublabel).wpforms-label-hide{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} div.wpforms-container .wpforms-form .wpforms-required-label{color:var(--kritisch);font-weight:var(--weight-semibold)} div.wpforms-container .wpforms-form :is(.wpforms-field-sublabel,.wpforms-field-description,.wpforms-field-limit-text){font-family:var(--font-body);font-size:var(--label-sm);color:var(--text-muted);margin:0} div.wpforms-container .wpforms-form :is( input[type="text"],input[type="email"],input[type="tel"],input[type="url"], input[type="number"],input[type="date"],input[type="password"],select,textarea ){width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:var(--body-md);line-height:var(--leading-body);color:var(--tiefblau);background:var(--surface-container-lowest);border:0;box-shadow:inset 0 0 0 1px var(--border-ghost);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);min-height:44px;height:auto;transition:var(--transition-ui)} div.wpforms-container .wpforms-form textarea{min-height:132px;resize:vertical} div.wpforms-container .wpforms-form :is(input,textarea)::placeholder{color:var(--text-muted);opacity:1} div.wpforms-container .wpforms-form :is(input,select,textarea):hover{background:var(--surface-container-lowest);box-shadow:inset 0 0 0 1px var(--border-ghost-strong)} div.wpforms-container .wpforms-form :is(input,select,textarea):focus{outline:0;border:0;background:var(--surface-bright);box-shadow:inset 0 0 0 2px var(--aqua-tief),var(--shadow-ambient-soft)} div.wpforms-container .wpforms-form select{appearance:none;padding-right:var(--space-6);background-image:linear-gradient(45deg,transparent 50%,var(--tiefblau) 50%),linear-gradient(135deg,var(--tiefblau) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat} div.wpforms-container .wpforms-form :is(.wpforms-field-checkbox,.wpforms-field-radio,.wpforms-field-gdpr-checkbox) ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)} div.wpforms-container .wpforms-form :is(.wpforms-field-checkbox,.wpforms-field-radio,.wpforms-field-gdpr-checkbox) li{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-body)} div.wpforms-container .wpforms-form :is(.wpforms-field-checkbox,.wpforms-field-radio,.wpforms-field-gdpr-checkbox) :is(input[type="checkbox"],input[type="radio"]){appearance:none;-webkit-appearance:none;flex:0 0 20px;width:20px;height:20px;min-height:0;margin:4px 0 0;padding:0;border:0;background:var(--surface-container-lowest);box-shadow:inset 0 0 0 1px var(--border-ghost-strong);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-ui)} div.wpforms-container .wpforms-form :is(.wpforms-field-checkbox,.wpforms-field-radio,.wpforms-field-gdpr-checkbox) input[type="radio"]{border-radius:50%} div.wpforms-container .wpforms-form :is(.wpforms-field-checkbox,.wpforms-field-radio,.wpforms-field-gdpr-checkbox) :is(input[type="checkbox"],input[type="radio"]):hover{background:var(--surface-container-lowest);box-shadow:inset 0 0 0 1px var(--tiefblau)} div.wpforms-container .wpforms-form :is(.wpforms-field-checkbox,.wpforms-field-radio,.wpforms-field-gdpr-checkbox) :is(input[type="checkbox"],input[type="radio"]):checked{background:var(--tiefblau);box-shadow:none} div.wpforms-container .wpforms-form :is(.wpforms-field-checkbox,.wpforms-field-gdpr-checkbox) input[type="checkbox"]:checked::after{content:"";display:block;width:100%;height:100%;background:var(--weiss);clip-path:polygon(18% 50%,40% 72%,82% 28%,82% 42%,40% 86%,18% 64%)} div.wpforms-container .wpforms-form .wpforms-field-radio input[type="radio"]:checked::after{content:"";display:block;width:7px;height:7px;margin:6.5px auto;border-radius:50%;background:var(--weiss)} div.wpforms-container .wpforms-form :is(.wpforms-field-checkbox,.wpforms-field-radio,.wpforms-field-gdpr-checkbox) :is(input[type="checkbox"],input[type="radio"]):focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} div.wpforms-container .wpforms-form :is(.wpforms-field-checkbox,.wpforms-field-radio,.wpforms-field-gdpr-checkbox) label{font-family:var(--font-body);font-size:var(--body-md);font-weight:var(--weight-regular);letter-spacing:0;text-transform:none;color:var(--text-body)} div.wpforms-container .wpforms-form :is(.wpforms-field-checkbox,.wpforms-field-radio,.wpforms-field-gdpr-checkbox) label a{color:var(--aqua-tief);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} div.wpforms-container .wpforms-form :is(.wpforms-field-checkbox,.wpforms-field-radio,.wpforms-field-gdpr-checkbox) label a:hover{color:var(--tiefblau);text-decoration-thickness:2px} div.wpforms-container .wpforms-form .wpforms-submit-container{margin:var(--space-2) 0 0;padding:0} div.wpforms-container .wpforms-form button.wpforms-submit{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:52px;padding:0 var(--space-6);border:0;border-radius:var(--radius-lg);background:var(--tiefblau);color:var(--sand-hell);font-family:var(--font-body);font-size:var(--body-md);font-weight:var(--weight-semibold);text-transform:none;letter-spacing:0;cursor:pointer;transition:var(--transition-ui)} div.wpforms-container .wpforms-form button.wpforms-submit:hover{background:var(--surface-dark-container);box-shadow:var(--shadow-ambient-soft)} div.wpforms-container .wpforms-form button.wpforms-submit:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} div.wpforms-container .wpforms-form :is(.wpforms-error,label.wpforms-error,em.wpforms-error){font-family:var(--font-body);font-size:var(--label-sm);font-weight:var(--weight-semibold);color:var(--kritisch);text-transform:none;letter-spacing:0} div.wpforms-container .wpforms-form .wpforms-field.wpforms-has-error :is(input,textarea,select){box-shadow:inset 0 0 0 2px var(--kritisch)} /* Weiße Felder brauchen einen wärmeren Grund: die Karte, die ein Formular trägt, liegt in Sand hell statt Weiß. */ .ap-card:has(.wpforms-container),.ap-card:has(.site-form){background:var(--surface-container-low)} .wpforms-confirmation-container-full,div.wpforms-confirmation-container{background:var(--surface-container-low);border:0;border-radius:var(--radius-xl);padding:var(--space-5);color:var(--tiefblau);font-size:var(--body-md);line-height:var(--leading-loose)} /* --- WPConsent: Cookie-Banner auf die Systemwerte bringen -------- Der Banner liegt im Shadow DOM, Klassenregeln greifen dort nicht. Die Gestaltung läuft deshalb über die Variablen des Plugins, die von #wpconsent-container nach innen vererbt werden. Zuordnung: Knochen als Fläche, Tiefblau als Schrift, Zustimmen als Tiefblau-Button, Ablehnen und Einstellungen als Tonflächen, Ambient-Schatten statt Materialschatten, Radius 24. */ #wpconsent-container{ --wpconsent-background:var(--surface-container-lowest); --wpconsent-text:var(--tiefblau); --wpconsent-border:var(--border-ghost); --wpconsent-outline-color:var(--border-ghost); --wpconsent-border-radius:var(--radius-xl); --wpconsent-padding:var(--space-4) var(--space-5); --wpconsent-shadow:var(--shadow-ambient); --wpconsent-min-width:560px; --wpconsent-accept-bg:var(--tiefblau); --wpconsent-accept-color:var(--sand-hell); --wpconsent-cancel-bg:var(--surface-container-high); --wpconsent-cancel-color:var(--tiefblau); --wpconsent-preferences-bg:var(--surface-container-low); --wpconsent-preferences-color:var(--tiefblau); --wpconsent-font-size:var(--body-md); --wpconsent-title-size:var(--headline-sm,20px); --wpconsent-line-height:var(--leading-loose); --wpconsent-close-color:var(--text-secondary); --wpconsent-focus-outline-color:var(--aqua-tief); --wpconsent-focus-outline-width:2px; --wpconsent-focus-outline-offset:3px; } :root{ --wpconsent-floating-button-bg:var(--tiefblau); --wpconsent-floating-button-color:var(--sand-hell); } /* --- Cookie-Übersicht von WPConsent (Shortcode im Fließtext) ---- Der Shortcode liefert eine Tabelle. Sie wird auf die Tabellenform des Systems gebracht: Kopf in Sand, Zeilen im Wechsel, keine Linien. */ .site-recht p.site-recht__quelle{font-family:var(--font-data);font-size:var(--label-sm);color:var(--text-muted)} .site-cookie-policy{margin:var(--space-4) 0} .site-cookie-policy .site-cookie-policy__hinweis{background:var(--surface-container-low);border-radius:var(--radius-md);padding:var(--space-3);font-size:var(--label-md);color:var(--text-muted);margin:0} .site-cookie-policy table{width:100%;border-collapse:separate;border-spacing:0 2px;font-size:var(--body-md)} .site-cookie-policy th{font-family:var(--font-body);font-size:var(--label-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--tiefblau);background:var(--surface-container-high);text-align:left;padding:var(--space-2) var(--space-3);border:0} .site-cookie-policy th:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)} .site-cookie-policy th:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0} .site-cookie-policy td{padding:var(--space-2) var(--space-3);background:var(--surface-container-lowest);color:var(--text-body);border:0;vertical-align:top} .site-cookie-policy tr:nth-child(even) td{background:var(--surface-container-low)} .site-cookie-policy td:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);font-family:var(--font-data)} .site-cookie-policy td:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0} .site-cookie-policy h2,.site-cookie-policy h3{font-size:var(--headline-sm);color:var(--tiefblau);margin:var(--space-4) 0 var(--space-2)} /* --- Knapper Abschnitt: nur Chips oder eine Zeile Inhalt --------- */ .site-section--knapp{padding:var(--space-6) 0} @media (max-width:599px){.site-section--knapp{padding:var(--space-5) 0}} /* --- WordPress-Block "Accordion" (Kern, ab 6.9) ----------------- Aufbau: .wp-block-accordion > .wp-block-accordion-item (.is-open) > h3.wp-block-accordion-heading > button.…__toggle > span.…__toggle-title + span.…__toggle-icon, dann div.wp-block-accordion-panel. Der Kern setzt Hintergrund und Farbe des Knopfes mit !important — deshalb liegt die Fläche auf dem Item, nicht auf dem Knopf. Die Abstände werden über höhere Spezifität gesetzt statt mit !important. Das Plus des Kerns wird ausgeblendet und durch den Winkel des Systems ersetzt. */ .wp-block-accordion{display:grid;gap:var(--space-2)} .wp-block-accordion.is-layout-flow>.wp-block-accordion-item+.wp-block-accordion-item{margin-top:0} .wp-block-accordion-item{background:var(--surface-container-lowest);border-radius:var(--radius-xl);padding:0 var(--space-5);color:var(--tiefblau)} .wp-block-accordion-heading{margin:0} .wp-block-accordion-item>.wp-block-accordion-heading>.wp-block-accordion-heading__toggle{padding:var(--space-4) 0;font-family:var(--font-body);font-size:var(--body-lg);font-weight:var(--weight-medium);line-height:var(--leading-title);letter-spacing:0;gap:var(--space-3)} .wp-block-accordion-item>.wp-block-accordion-heading>.wp-block-accordion-heading__toggle:hover, .wp-block-accordion-item>.wp-block-accordion-heading>.wp-block-accordion-heading__toggle:focus{padding:var(--space-4) 0} .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title{text-decoration:none} .wp-block-accordion-heading__toggle:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .wp-block-accordion-heading__toggle-icon{position:relative;flex:0 0 1.2em;font-size:0;color:transparent} .wp-block-accordion-heading__toggle-icon::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border-right:1.5px solid var(--tiefblau);border-bottom:1.5px solid var(--tiefblau);transform:translate(-50%,-70%) rotate(45deg);transition:var(--transition-ui)} .wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon{transform:none} .wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::after{transform:translate(-50%,-30%) rotate(-135deg)} .wp-block-accordion-panel{padding-bottom:var(--space-4);font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-secondary)} .site-artikel__inhalt .wp-block-accordion-panel>p{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-secondary);margin:0 0 var(--space-2)} .site-artikel__inhalt .wp-block-accordion-panel>p:last-child{margin-bottom:0} /* --- Accordion: Abstand zur Antwort und Hover-Farbe -------------- */ .wp-block-accordion-panel{padding-top:var(--space-3)} /* Der Kern setzt am Knopf color:inherit!important — die Hover-Farbe gehört daher auf die Überschrift, der Knopf erbt sie. */ .wp-block-accordion-item>.wp-block-accordion-heading:hover{color:var(--aqua)} .wp-block-accordion-item>.wp-block-accordion-heading:hover .wp-block-accordion-heading__toggle-icon::after{border-color:var(--aqua)} /* --- Blockstil "Merksatz" für den Zitat-Block -------------------- Sandfläche, Akzentstrich und Rubrikenlabel oben, Satz in der Serifenschrift — die eine Stelle, an der sie erscheint. Der Strich ist eine Hintergrundfläche, damit das ::before das Label tragen kann. */ .wp-block-quote.is-style-merksatz{background-color:var(--surface-container-low);background-image:linear-gradient(var(--aqua),var(--aqua));background-repeat:no-repeat;background-size:40px 2px;background-position:var(--space-6) var(--space-6);border:0;border-radius:var(--radius-xl);padding:calc(var(--space-6) + var(--space-4)) var(--space-6) var(--space-6);margin:var(--space-8) 0} .wp-block-quote.is-style-merksatz::before{content:"Merksatz";display:block;font-family:var(--font-body);font-size:var(--label-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-warm);margin-bottom:var(--space-3)} .wp-block-quote.is-style-merksatz p{font-family:var(--font-quote);font-size:var(--headline-sm);line-height:var(--leading-title);color:var(--tiefblau);margin:0} .wp-block-quote.is-style-merksatz p+p{margin-top:var(--space-2)} .wp-block-quote.is-style-merksatz cite{display:block;font-family:var(--font-data);font-style:normal;font-size:var(--label-sm);color:var(--text-muted);margin-top:var(--space-3)} .site-artikel__inhalt .wp-block-quote.is-style-merksatz p{font-family:var(--font-quote);font-size:var(--headline-sm);line-height:var(--leading-title);color:var(--tiefblau);margin:0} /* --- Beitragsraster als einreihiger Slider unter 1024 px -------- Drei Kacheln stehen auf großen Ansichten im Raster; auf Tablet und Telefon laufen sie in einer Reihe und werden seitlich geblättert. Die Pfeile erscheinen nur dort. */ .site-slider__nav--kompakt{display:none} @media (max-width:1023px){ .site-slider__nav--kompakt{display:flex} .site-slider__nav--kompakt+.site-grid--slider{margin-top:var(--space-4)} .site-grid--slider{display:flex;grid-template-columns:none;grid-auto-rows:auto;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding-bottom:var(--space-2)} .site-grid--slider:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .site-grid--slider>*{flex:0 0 calc((100% - var(--space-3)) / 2);min-width:0;scroll-snap-align:start} } /* --- Slider auf dem Telefon: Abstand links und rechts wie im Container. Der frühere Randausbruch fiel mit dem Einrasten zusammen, dadurch klebte die erste Kachel am Rand. */ @media (max-width:599px){ .site-slider,.site-grid--slider{margin-inline:calc(var(--space-4) * -1);padding-inline:var(--space-4);scroll-padding-inline:var(--space-4)} .site-slider__karte,.site-grid--slider>*{flex:0 0 90%} .site-beitrag__anriss{-webkit-line-clamp:4} } @media (min-width:600px) and (max-width:1023px){ .site-grid--slider{margin-inline:calc(var(--space-4) * -1);padding-inline:var(--space-4);scroll-padding-inline:var(--space-4)} } /* --- Themenkacheln auf dem Telefon: eine je Zeile, gleich hoch --- Die Spaltenführung des Zweispalters (grid-auto-flow:column) war spezifischer als die Umbruchregel und blieb deshalb auf dem Telefon aktiv — dadurch standen zwei zu schmale Spalten übereinander und längere Namen wurden beschnitten. */ @media (max-width:599px){ .site-grid--themen>.site-themen, .site-grid--themen>.site-themen--drei, .site-themen, .site-themen--drei{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;grid-auto-rows:1fr;gap:var(--space-2)} .site-thema-kachel{min-width:0;width:100%;height:100%;align-items:center;padding:var(--space-3) var(--space-4)} .site-thema-kachel>span,.site-thema-kachel{overflow-wrap:break-word;hyphens:auto} } /* --- Kachelraster auf dem Telefon als Slider --------------------- Handlungsfelder und Beratungsprodukte laufen unter 600 px in einer Reihe, damit die Seite nicht in die Länge wächst. Ab Tablet bleibt das Raster. */ .site-slider__nav--mobil{display:none} @media (max-width:599px){ .site-slider__nav--mobil{display:flex} .site-slider__nav--mobil+.site-grid--slider-mobil{margin-top:var(--space-4)} .site-grid--slider-mobil{display:flex;grid-template-columns:none;grid-auto-rows:auto;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-2);margin-inline:calc(var(--space-4) * -1);padding-inline:var(--space-4);scroll-padding-inline:var(--space-4)} .site-grid--slider-mobil:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .site-grid--slider-mobil>*{flex:0 0 90%;min-width:0;scroll-snap-align:start} /* Wischbare Kacheln mobil mit knapperem Innenabstand — der Text bekommt dadurch rund 16 px mehr Breite. */ .site-grid--slider-mobil>.ap-card,.site-grid--slider>.ap-card,.site-slider__karte{padding:var(--space-4)} /* .site-karten steht später in der Datei und würde sonst gewinnen. */ .site-karten.site-grid--slider-mobil{display:flex;grid-template-columns:none} } /* --- Slider-Kacheln: gleiche Höhe, Pfeil unten rechts ------------ Als Flexspalte füllt jede Kachel die Reihenhöhe; der Pfeil sitzt über margin-top:auto fest am unteren Rand. */ @media (max-width:1023px){ .site-grid--slider,.site-grid--slider-mobil{align-items:stretch} .site-grid--slider>*,.site-grid--slider-mobil>*{display:flex;flex-direction:column;height:auto} .site-grid--slider>*>.site-produkt__link--pfeil, .site-grid--slider-mobil>*>.site-produkt__link--pfeil{margin-top:auto;justify-content:flex-end} } /* --- Warum es AquaPassion gibt: Prinzipien und Vielfaltskarte ----- */ .site-warum{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8)} .site-warum__intro .site-lead{max-width:46ch} .site-prinzipien{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:prinzip} .site-prinzip{counter-increment:prinzip;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-4);row-gap:var(--space-1);padding:var(--space-4) 0;border-top:1px solid rgba(16,42,67,.14)} .site-prinzip:last-child{border-bottom:1px solid rgba(16,42,67,.14)} .site-prinzip::before{content:counter(prinzip,decimal-leading-zero);grid-row:1 / span 2;font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--label-md);letter-spacing:var(--tracking-label);color:var(--aqua-tief);padding-top:.35em} .site-prinzip__titel{grid-column:2;margin:0;font-size:var(--body-lg);line-height:var(--leading-title);color:var(--tiefblau)} .site-prinzip__text{grid-column:2;margin:0;font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-secondary);max-width:60ch} .site-warum__karte{background:var(--surface-accent-quiet);border-radius:var(--radius-xl);padding:var(--space-5)} .site-warum__karte-titel{font-size:var(--headline-sm);line-height:var(--leading-title);color:var(--tiefblau);margin:0 0 var(--space-3)} .site-warum__karte-text{display:grid;gap:var(--space-3)} @media (min-width:640px){ .site-prinzip{padding:var(--space-5) 0} .site-warum__karte{padding:var(--space-6)} } @media (min-width:1024px){ .site-warum{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:var(--space-10);row-gap:var(--space-10)} .site-warum__intro{align-self:start} .site-warum__karte{grid-column:1 / -1;padding:var(--space-8)} .site-warum__karte-text{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)} } /* --- Kennzahlenkacheln: gleiche Höhe, keine umbrechenden Werte ---- */ .site-kennzahl{display:flex;flex-direction:column;gap:var(--space-2);justify-content:space-between} .site-kennzahl__label{min-height:2.8em;margin:0} .site-kennzahl__wert{font-size:clamp(1.5rem,3.4vw,2.375rem);min-height:2.1em;text-wrap:balance} /* --- Wirkungskette: durchlaufendes Band, keine Kacheln ----------- */ .site-kette{list-style:none;margin:var(--space-10) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)} .site-kette__glied{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-data);font-size:var(--label-md);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-warm)} .site-kette__glied::after{content:"";flex:0 0 28px;height:var(--accent-rule);background:var(--aqua)} .site-kette__glied--ergebnis{color:var(--tiefblau);background:var(--sand);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-3)} .site-kette__glied--ergebnis::after{display:none} @media (max-width:639px){ .site-kette{flex-direction:column;align-items:flex-start;gap:var(--space-2)} .site-kette__glied{flex-direction:column;align-items:flex-start;gap:var(--space-2)} .site-kette__glied::after{flex:0 0 auto;width:2px;height:16px;margin-left:var(--space-2)} } /* --- Zentrale Frage als Sandkasten ------------------------------ */ .site-frage{background:var(--sand);border-radius:var(--radius-xl);padding:var(--space-6);margin:0} .site-frage__label{font-family:var(--font-body);font-size:var(--label-sm);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--tiefblau);opacity:.7;margin:0 0 var(--space-3)} .site-frage__satz{font-family:var(--font-quote);font-size:var(--headline-sm);line-height:var(--leading-title);color:var(--tiefblau);margin:0} /* Raster ohne Zwangshöhe: Karten so hoch wie ihr Inhalt. */ .site-grid--auto{grid-auto-rows:auto;align-items:start} /* --- Mehrspaltige Aufzählung ------------------------------------- */ .site-liste--spalten{grid-template-columns:1fr} @media (min-width:700px){.site-liste--spalten{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1080px){.site-liste--spalten{grid-template-columns:repeat(3,minmax(0,1fr))}} /* --- Befundkarten: Akzentstrich, Serifentitel -------------------- */ .site-befund{background:var(--surface-container-lowest);border-radius:var(--radius-xl);padding:var(--space-5)} .site-befund::before{content:"";display:block;height:var(--accent-rule);width:var(--accent-rule-width);background:var(--aqua);margin-bottom:var(--space-4)} .site-befund__titel{font-family:var(--font-quote);font-size:var(--headline-sm);line-height:var(--leading-title);color:var(--tiefblau);margin:0} .site-befund__text{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-secondary);margin:var(--space-3) 0 0} /* --- Ergebnisliste mit Ziffern ----------------------------------- */ .site-ergebnis{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-1)} .site-ergebnis li{display:grid;grid-template-columns:3ch 1fr;gap:var(--space-3);align-items:baseline;padding:var(--space-2) 0;border-top:1px solid rgba(16,42,67,.10)} .site-ergebnis li:first-child{border-top:0} .site-ergebnis__nr{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--label-md);color:var(--aqua-tief)} .site-ergebnis__text{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--tiefblau)} /* --- Zäsur: Sandband mit der zentralen Frage --------------------- */ .site-section--sand{background:var(--sand)} .site-zaesur__satz{font-family:var(--font-quote);font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.28;letter-spacing:-.01em;color:var(--tiefblau);background:var(--surface-container-lowest);border-radius:var(--radius-xl);padding:var(--space-8);margin:var(--space-8) 0 0;max-width:44ch;text-wrap:pretty} .site-zaesur__text{display:grid;gap:var(--space-4);margin-top:var(--space-10)} .site-zaesur__text p{font-size:var(--body-lg);line-height:var(--leading-loose);color:var(--tiefblau);opacity:.82;margin:0} @media (min-width:820px){.site-zaesur__text{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}} /* --- Bildspalte im Rahmen, wie im Hero -------------------------- */ .site-bleed{max-width:var(--container-max);margin:0 auto;padding:0 var(--site-gutter);display:grid;grid-template-columns:1fr;gap:var(--space-6)} .site-bleed__bild{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0} .site-bleed__bild > *{border-radius:var(--radius-xl);overflow:hidden} @media (min-width:960px){ .site-bleed{grid-template-columns:minmax(0,42%) minmax(0,58%);gap:var(--space-10);align-items:center} .site-bleed__bild{grid-column:1;grid-row:1} .site-bleed__text{grid-column:2;grid-row:1} } /* --- Bildband über Containerbreite ------------------------------- */ .site-bildband{max-width:var(--container-max);margin:0 auto;padding:0 var(--site-gutter)} .site-bildband > *{border-radius:var(--radius-xl);overflow:hidden} /* --- Fragen als kompaktes Satzbild ------------------------------- */ .site-fragen{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-3)} .site-fragen li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:baseline;padding-top:var(--space-3);border-top:1px solid rgba(16,42,67,.10)} .site-fragen__nr{font-family:var(--font-data);font-size:var(--label-sm);color:var(--aqua-tief)} .site-fragen__text{font-family:var(--font-quote);font-size:var(--body-lg);line-height:1.4;color:var(--tiefblau);text-wrap:pretty} /* --- Merksatz gross, Erläuterung als Nebenspalte ----------------- */ .site-grid--satz{display:grid;gap:var(--space-8)} @media (min-width:960px){.site-grid--satz{grid-template-columns:minmax(0,58%) minmax(0,42%);gap:var(--space-12);align-items:start}} .site-satz--gross{font-family:var(--font-quote);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.28;color:var(--tiefblau);background:var(--sand);border-radius:var(--radius-xl);padding:var(--space-8);margin:var(--space-6) 0 0;text-wrap:pretty} .site-nebenspalte p{font-size:var(--body-md);line-height:var(--leading-loose);color:var(--text-secondary);margin:0 0 var(--space-4)} .site-nebenspalte p:last-child{margin-bottom:0} .site-section--sand .site-lead,.site-section--sand .site-nebenspalte p{color:var(--tiefblau);opacity:.82} /* --- Kartenraster, drei Spalten ---------------------------------- */ .site-karten{display:grid;gap:var(--space-2);grid-template-columns:1fr;margin-top:var(--space-10)} @media (min-width:700px){.site-karten{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1080px){.site-karten{grid-template-columns:repeat(3,minmax(0,1fr))}} .site-karten__nr{font-family:var(--font-data);font-size:var(--label-md);color:var(--aqua-tief);margin:0 0 var(--space-3)} .ap-card--sand .site-karten__nr{color:var(--tiefblau);opacity:.72} .site-karten__frage{font-size:var(--body-lg);line-height:var(--leading-title);color:var(--tiefblau);margin:0} /* Zweispalter, dessen Bildspalte die Texthöhe mitgeht. */ .site-grid--split--stretch{align-items:stretch} .site-grid--split--stretch .site-bild{display:grid;grid-template-columns:minmax(0,1fr);margin:0;height:100%} .site-grid--split--stretch .site-bild > *{height:100%;border-radius:var(--radius-xl);overflow:hidden} /* Ergebnisliste über die volle Breite, zweispaltig. */ @media (min-width:820px){.site-ergebnis--zwei{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-10)}} /* --- Marken: kompakte Aufzählung ohne Listencharakter ------------ */ .site-marken{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-1)} .site-marken li{font-family:var(--font-data);font-size:var(--label-md);line-height:1.5;color:var(--tiefblau);background:var(--surface-container-lowest);border-radius:var(--radius-sm);padding:6px var(--space-3)} /* Zweispalter mit breiterer Textspalte. */ @media (min-width:900px){.site-grid--split--textbreit{grid-template-columns:minmax(0,58%) minmax(0,42%)}} /* --- Zukunftswege: Richtung und Fragestellung nebeneinander ------ */ .site-wege{list-style:none;margin:var(--space-10) 0 0;padding:0;display:grid;gap:var(--space-1)} .site-wege li{display:grid;grid-template-columns:1fr;gap:var(--space-1);background:var(--surface-container-lowest);border-radius:var(--radius-md);padding:var(--space-4)} @media (min-width:820px){.site-wege li{grid-template-columns:minmax(0,32%) minmax(0,68%);gap:var(--space-6);align-items:baseline;padding:var(--space-4) var(--space-5)}} .site-wege__richtung{font-size:var(--body-lg);line-height:var(--leading-title);color:var(--tiefblau);margin:0} .site-wege__frage{font-family:var(--font-quote);font-size:var(--body-lg);line-height:1.45;color:var(--text-secondary);margin:0;text-wrap:pretty} /* Ergebnisliste mobil kompakter: enge Ziffernspalte, weniger Zeilenluft. */ @media (max-width:599px){ .site-selbstcheck{padding:var(--space-4)} .site-ergebnis{gap:0} .site-ergebnis li{grid-template-columns:2.4ch 1fr;gap:var(--space-2);padding:var(--space-1) 0} .site-ergebnis__nr{font-size:var(--label-sm)} .site-ergebnis__text{font-size:var(--body-md);line-height:1.45} .site-selbstcheck__liste{gap:var(--space-1)} .site-selbstcheck__liste li{line-height:1.45} .site-fragen{gap:var(--space-2)} .site-fragen li{padding-top:var(--space-2)} } /* --- Hero der Spezialthemen: Text über die Breite, Bild darunter ---- */ .site-hero--breit .site-hero__title{max-width:30ch} .site-hero--breit .site-lead{max-width:var(--measure)} .site-hero__bild{margin:var(--space-10) 0 0} .site-hero__bild > *{display:block;width:100%;border-radius:var(--radius-xl);overflow:hidden} @media (max-width:599px){.site-hero__bild{margin-top:var(--space-6)}} /* --- Visitenkarten-Seite (QR-Ziel) ------------------------------- */ /* Eigene Seite ohne Kopfnavigation und Fußzeile: eine Spalte, mobil gedacht, Ziel eines QR-Codes auf der gedruckten Visitenkarte. */ .site-karte{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-6) var(--space-3) var(--space-10)} .site-karte__spalte{width:100%;max-width:440px;display:flex;flex-direction:column;gap:var(--space-5)} .site-karte__kopf{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center} .site-karte__marke{display:block} .site-karte__marke img{display:block;height:26px;width:auto} .site-karte__portraet{width:124px;height:124px;border-radius:var(--radius-xl);object-fit:cover;object-position:center 18%;display:block} .site-karte__name{font-size:var(--headline-lg);line-height:var(--leading-title);letter-spacing:var(--tracking-title);font-weight:var(--weight-medium);color:var(--tiefblau);margin:0} .site-karte__rolle{font-size:var(--label-md);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--lehm-tief);margin:0} .site-karte__satz{font-size:var(--body-md);line-height:var(--leading-body);color:var(--text-secondary);margin:0;max-width:34ch;text-wrap:pretty} .site-karte__aktion .ap-btn{width:100%;justify-content:center} .site-karte__hinweis{font-family:var(--font-mono);font-size:var(--label-sm);line-height:1.5;color:var(--text-secondary);text-align:center;margin:0} .site-karte__liste{list-style:none;margin:0;padding:0} .site-karte__zeile{display:flex;align-items:center;gap:var(--space-3);min-height:64px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--surface-container-lowest);color:var(--tiefblau);text-decoration:none;transition:var(--transition-ui)} .site-karte__zeile:hover{background:var(--surface-bright);box-shadow:var(--shadow-ambient);color:var(--tiefblau);text-decoration:none} .site-karte__zeile:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .site-karte__symbol{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);background:var(--surface-container-low);color:var(--aqua-tief)} .site-karte__text{display:flex;flex-direction:column;gap:2px;min-width:0} .site-karte__label{font-size:var(--body-md);font-weight:var(--weight-medium);line-height:1.3} .site-karte__wert{font-family:var(--font-mono);font-size:var(--label-sm);color:var(--text-secondary);line-height:1.4;overflow-wrap:anywhere} .site-karte__pfeil{flex:0 0 auto;margin-left:auto;color:var(--text-secondary)} .site-karte__fuss{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-4);font-size:var(--label-sm)} @media (min-width:600px){ .site-karte__portraet{width:140px;height:140px} } /* LinkedIn und Xing als halbbreite Kacheln, die übrigen Zeilen voll. */ .site-karte__liste{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)} .site-karte__punkt--voll{grid-column:1 / -1} .site-karte__zeile--stapel{flex-direction:column;justify-content:center;text-align:center;gap:var(--space-2);min-height:116px} .site-karte__zeile--stapel .site-karte__text{align-items:center} .site-karte__zeile--stapel .site-karte__pfeil{display:none} /* Ablaufliste "So unterstützt AquaPassion": auf dem Telefon eine wischbare Reihe statt einer sehr langen Spalte. .site-wege steht später in der Datei und würde das Flex-Layout sonst überschreiben. */ @media (max-width:599px){ .site-wege.site-grid--slider-mobil{display:flex;grid-template-columns:none;gap:var(--space-3)} .site-wege.site-grid--slider-mobil>li{flex:0 0 90%;min-width:0;scroll-snap-align:start;padding:var(--space-4);border-radius:var(--radius-xl)} } /* --- Wasserweg: kompakte nummerierte Prozessfolge ---------------- */ .site-wasserweg{margin-top:var(--space-6);column-gap:var(--space-8)} .site-wasserweg li:first-child{border-top:1px solid rgba(16,42,67,.10)} .site-wasserweg .site-ergebnis__text{hyphens:manual;min-width:0} .site-wasserweg li:last-child .site-ergebnis__text{font-weight:var(--weight-semibold)} @media (min-width:600px){.site-wasserweg{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto);grid-auto-flow:column}} /* --- Mobil: alle Slider laufen bis an den Bildschirmrand ---------- */ @media (max-width:599px){ .site-container .site-grid--slider-mobil,.site-container .site-grid--slider,.site-container .site-slider{margin-left:calc(var(--space-3) * -1);margin-right:calc(var(--space-3) * -1);padding-left:var(--space-3);padding-right:var(--space-3);scroll-padding-inline:var(--space-3)} } /* Slider-Kacheln: Inhalt oben bündig, kein Luftraum zwischen Titel und Text */ @media (max-width:1023px){ .site-grid--slider>*,.site-grid--slider-mobil>*{align-content:start;justify-content:flex-start} } /* --- Mobil: mittlere Kacheln zentriert, Nachbarn beidseitig angeschnitten */ @media (max-width:599px){ .site-container .site-grid--slider-mobil>*,.site-container .site-grid--slider>*,.site-container .site-slider>*,.site-wege.site-grid--slider-mobil>li{flex:0 0 84%;scroll-snap-align:center} .site-container .site-grid--slider-mobil>:first-child,.site-container .site-grid--slider>:first-child,.site-container .site-slider>:first-child,.site-wege.site-grid--slider-mobil>li:first-child{scroll-snap-align:start} .site-container .site-grid--slider-mobil>:last-child,.site-container .site-grid--slider>:last-child,.site-container .site-slider>:last-child,.site-wege.site-grid--slider-mobil>li:last-child{scroll-snap-align:end} } /* --- Slider-Pfeile: ohne Funktion treten sie zurück --------------- */ button.site-pfeil:disabled,button.site-pfeil:disabled:hover{opacity:.4;cursor:default;box-shadow:none;background:var(--surface-container-high)} /* --- Mobil: Beitragsbild passend zum knapperen Karteninnenabstand -- */ @media (max-width:599px){ .site-grid--slider>.ap-card>.site-bild,.site-grid--slider-mobil>.ap-card>.site-bild,.site-slider__karte>.site-bild{margin:calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3)} .site-grid--slider>.ap-card>.site-bild figcaption,.site-grid--slider-mobil>.ap-card>.site-bild figcaption,.site-slider__karte>.site-bild figcaption{margin:var(--space-1) var(--space-4) 0} } /* --- Mobil: Satzraster ohne Lücke zwischen Vorlauf und Nebenspalte -- */ @media (max-width:599px){ .site-grid--satz{gap:var(--space-4)} .site-grid--satz .site-lead,.site-grid--satz .site-nebenspalte p{font-size:var(--body-md);line-height:1.65} .site-grid--satz>div>.site-lead:last-child{margin-bottom:0} } /* --- Inhalt nach einem Slider bleibt unter den Blätterpfeilen ------- */ .site-container:has(> .site-slider__nav) > :is(.site-slider,.site-grid--slider,.site-grid--slider-mobil) ~ :not(.site-slider__nav):not(.site-slider__hinweis){order:100} /* --- Nach oben --------------------------------------------------- */ .site-nachoben{position:fixed;right:32px;bottom:32px;z-index:1000;text-decoration:none;width:48px;height:48px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:#102A43;color:#F4EFE7;box-shadow:0 16px 40px rgba(16,42,67,0.08);cursor:pointer;opacity:0;visibility:hidden;transition:opacity 220ms cubic-bezier(0.2,0,0.38,0.9),visibility 0s linear 220ms,background-color 220ms cubic-bezier(0.2,0,0.38,0.9),color 120ms cubic-bezier(0.2,0,0.38,0.9)} .site-nachoben.is-sichtbar{opacity:1;visibility:visible;transition-delay:0s} .site-nachoben:not(.is-sichtbar){pointer-events:none} .site-nachoben:hover{background:#0A1C2E} .site-nachoben:focus-visible{outline:2px solid #0B5F66;outline-offset:3px} .site-nachoben.is-auf-dunkel{background:#F4EFE7;color:#102A43} .site-nachoben.is-auf-dunkel:hover{background:#E3D5C1} .site-nachoben.is-auf-dunkel:focus-visible{outline-color:#5CEBED} @media (max-width:599px){.site-nachoben{right:16px;bottom:16px;width:44px;height:44px}} @media (prefers-reduced-motion:reduce){.site-nachoben{transition:none}} @media print{.site-nachoben{display:none}}