/* Lokal eingebundene Schriften — Dateien liegen im Ordner fonts/ */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ------------------------------------------------------------------
   Landingpage — Stylesheet
   Erzeugt mit dem Landingpage-Generator
   Alle Farben, Schriftgrößen und Maße stecken in den Variablen unter :root
------------------------------------------------------------------ */

:root{
  /* Farben */
  --c-primary:#1C66DC;
  --c-primary-ink:#FFFFFF;
  --c-primary-soft:#E4EDFB;
  --c-accent:#0EA5A5;
  --c-link:#1C66DC;
  --c-icon:#1C66DC;
  --c-header:#FFFFFF;
  --c-header-ink:#0F1B2A;
  --c-tint:#F3F7FC;
  --c-usps:#F3F7FC;
  --c-cta:#0F1B2A;
  --c-cta-btn:#1C66DC;
  --c-cta-btn-ink:#FFFFFF;
  --c-bg:#FFFFFF;
  --c-surface:#F3F7FC;
  --c-text:#0F1B2A;
  --c-muted:#5A6B80;
  --c-heading:#1C66DC;
  --c-body:#0F1B2A;
  --c-cta-heading:#0F1B2A;
  --c-cta-body:#5A6B80;
  --c-dark:#0F1B2A;
  --c-border:#DDDFE1;
  /* Schrift */
  --font-head:"Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --fs-body:17px;
  --lh-body:1.65;
  --fw-head:700;
  --lh-head:1.14;
  --ls-head:-0.02em;
  /* Maße */
  --btn-shadow:0 6px 18px rgba(28,102,220,0.22);
  --btn-shadow-hover:0 12px 26px rgba(28,102,220,0.3);
  --cta-btn-shadow:0 6px 18px rgba(28,102,220,0.22);
  --cta-btn-shadow-hover:0 12px 26px rgba(28,102,220,0.3);
  --c-feature:#FFFFFF;
  --c-icon-bg:#E4EDFB;
  --scroll-off:96px;
  --hero-img-opacity:0.42;
  --cta-img-opacity:0.42;
  --logo-h:40px;
  --radius:6px;
  /* Abgeleitete Rundungen. Früher stand dafür calc(var(--radius) + 4px)
     direkt in der Regel — bei „eckig“ (0) blieben so 4 px Rundung stehen.
     Ist die Grundrundung 0, sind auch die abgeleiteten Werte 0. */
  --radius-img:10px;
  --radius-card:14px;
  --radius-xl:16px;
  --maxw:1280px;
  --gap:clamp(28px,5vw,64px);
  --sect:clamp(56px,8vw,112px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--c-bg);color:var(--c-text);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-link)}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Überschriften tragen --c-heading, lange Texte --c-body. Was das im
   Einzelfall heißt, entscheidet die Wahl im Schritt „Layout“. Eine im
   Schritt „Typografie“ gesetzte Farbe je Ebene steht danach und gewinnt. */
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);line-height:var(--lh-head);
  letter-spacing:var(--ls-head);margin:0 0 .55em;font-weight:var(--fw-head);
  overflow-wrap:break-word;color:var(--c-heading)}
h1{font-size:clamp(2.1rem, 1.424rem + 2.844vw, 3.7rem)}
h2{font-size:clamp(1.65rem, 1.249rem + 1.689vw, 2.6rem)}
h3{font-size:clamp(1.15rem, 1.044rem + 0.444vw, 1.4rem)}
h4{font-size:clamp(1.05rem, 0.987rem + 0.267vw, 1.2rem)}
h5{font-size:clamp(0.95rem, 0.908rem + 0.178vw, 1.05rem)}
h6{font-size:clamp(0.85rem, 0.808rem + 0.178vw, 0.95rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.05rem, 0.953rem + 0.409vw, 1.28rem);color:var(--c-body);max-width:62ch}
/* Eine Einleitung darf eine Überschrift SEIN, ohne wie eine auszusehen.
   Sonst überschriebe die h1–h6-Regel Schrift, Stärke und Abstände, und
   die Größenangabe für Einleitungen liefe ins Leere. */
h2.lead,h3.lead,h4.lead,h5.lead,h6.lead{font-family:var(--font-body);
  font-weight:400;line-height:var(--lh-body);letter-spacing:normal;margin:0 0 1.1em}
h2.lead:last-child,h3.lead:last-child,h4.lead:last-child,
h5.lead:last-child,h6.lead:last-child{margin-bottom:0}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-primary);background:var(--c-primary-soft);padding:6px 12px;
  border-radius:min(999px, calc(var(--radius) * 3));margin-bottom:18px}
.section{padding:var(--sect) 0}
/* Der Kopfbereich läuft mit — Sprungziele müssen darunter freibleiben,
   sonst verschwinden flache Abschnitte wie die Vorteilsleiste dahinter. */
body > header,body > section,body > footer,[id],[data-lp]{scroll-margin-top:var(--scroll-off)}
body > header{scroll-margin-top:0}
.section--surface{background:var(--c-tint)}
.section__head{max-width:64ch;margin:0 0 clamp(28px,4vw,52px)}

/* ---------- Textausrichtung ---------- */
.ta-left{text-align:left}
.ta-center{text-align:center}
.ta-right{text-align:right}
.section__head.ta-center{margin-left:auto;margin-right:auto}
.section__head.ta-right{margin-left:auto;margin-right:0}
.ta-center .lead{margin-left:auto;margin-right:auto}
.ta-right .lead{margin-left:auto;margin-right:0}
.ta-center .btn-row{justify-content:center}
.ta-right .btn-row{justify-content:flex-end}
.ta-center .feature__icon{margin-left:auto;margin-right:auto}
.ta-right .feature__icon{margin-left:auto;margin-right:0}
/* Listen behalten ihre linksbündige Lesart, rücken aber als Block mit */
.ta-center .iconlist,.ta-center .rte ul,.ta-center .rte ol{
  width:fit-content;margin-left:auto;margin-right:auto;text-align:left}
.ta-right .iconlist,.ta-right .rte ul,.ta-right .rte ol{
  width:fit-content;margin-left:auto;margin-right:0;text-align:left}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-head);font-weight:600;font-size:1rem;line-height:1;
  padding:16px 28px;border-radius:var(--radius);border:2px solid transparent;
  background:var(--c-primary);color:var(--c-primary-ink);text-decoration:none;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:var(--btn-shadow)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--btn-shadow-hover)}
.btn:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
.btn--ghost{background:transparent;color:var(--c-primary);border-color:var(--c-border);box-shadow:none}
.btn--ghost:hover{border-color:var(--c-primary);box-shadow:none}
.btn--light{background:var(--c-bg);color:var(--c-text);box-shadow:none}
.btn--sm{padding:11px 18px;font-size:.92rem;box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.center .btn-row{justify-content:center}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,0.92);color:var(--c-header-ink);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid rgba(15,27,42,0.16)}
.site-header .hdr{display:grid;align-items:center;gap:16px;min-height:72px}
/* Ohne feste Zeile rutscht ein Element, dessen Spalte „vor“ dem vorherigen
   liegt, in die nächste Rasterzeile — genau das passierte bei „Logo rechts“. */
.site-header .hdr > *{grid-row:1}
.hdr--left{grid-template-columns:auto 1fr}
.hdr--left .logo{grid-column:1}
.hdr--left .hdr__cta{grid-column:2;justify-self:end}
.hdr--center{grid-template-columns:1fr auto 1fr}
.hdr--center .logo{grid-column:2;justify-self:center}
.hdr--center .hdr__cta{grid-column:3;justify-self:end}
.hdr--right{grid-template-columns:1fr auto}
.hdr--right .hdr__cta{grid-column:1;justify-self:start}
.hdr--right .logo{grid-column:2;justify-self:end}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  font-family:var(--font-head);font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.logo img{max-height:var(--logo-h);width:auto}

/* ---------- Hero ---------- */
.hero{padding:clamp(56px,7vw,104px) 0 clamp(40px,6vw,84px)}
/* Die Rundung folgt der Layout-Rundung — bei „0 px — kantig“ ist auch das
   Bild kantig. Vorher lag sie 6 px darüber und blieb dadurch immer rund. */
.hero__media img{width:100%;border-radius:var(--radius);object-fit:cover;object-position:center center}
.hero__text .lead{margin-top:-.2em}

/* ---- Zweispaltiger Hero: Bild neben Text ----------------------------
   Das Bild liegt absolut in seiner Spalte. Dadurch hat die Spalte selbst
   keine eigene Höhe, die Zeilenhöhe kommt allein aus dem Textblock — und
   das Bild wird genau so hoch wie dieser. Ohne das bestimmte das
   Seitenverhältnis des Bildes die Höhe und beide Spalten endeten
   verschieden hoch. Die Variable --hero-mh setzt bei Bedarf eine eigene
   Höhe. */
.hero--zwei .hero__media{position:relative;min-height:var(--hero-mh, 220px);
  height:var(--hero-mh, auto);align-self:stretch}
.hero--zwei .hero__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
/* Reihenfolge nur optisch drehen — im Quelltext bleibt der Text vorn,
   damit Vorleseprogramme und Suchmaschinen ihn zuerst bekommen. */
.hero--media-left .hero__media{order:-1}
/* Bei „Split“ ist die erste Spalte die breitere. Steht das Bild links,
   müssen die Breiten mitwandern — sonst bekäme der Text die schmale. */
.layout-split .hero--media-left .hero__inner{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.hero__text{min-width:0}

/* ---------- USP strip ---------- */
.usps{border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);background:var(--c-usps)}
.usps ul{list-style:none;margin:0;padding:22px 0;display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center}
.usps li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem;color:var(--c-text)}
.usps__ico{flex:none;display:grid;place-items:center;color:var(--c-icon);font-size:1.05rem;min-width:20px}
.usps__ico--check{width:20px;height:20px;border-radius:min(10px, calc(var(--radius) * 2));background:var(--c-primary-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C66DC' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat}

/* ---------- Features ---------- */
/* minmax(0,1fr) statt 1fr: „1fr“ heißt in Wirklichkeit minmax(auto,1fr) —
   eine Spalte mit breitem Inhalt (langes Wort, breites Bild) wächst dann
   über ihren Anteil hinaus und drückt die übrigen zusammen. Mit der
   Untergrenze 0 sind alle Spalten exakt gleich breit; die Abstände aus
   der gap-Angabe bleiben unverändert und werden von 100 % abgezogen. */
.features__grid{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-1{grid-template-columns:minmax(0,1fr)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* Gleiches gilt für jede weitere Spaltenaufteilung der Seite */
.features__grid > *,.gallery__grid > *{min-width:0}
/* Symbol, Überschrift und Text liegen in drei Zeilen des ÜBERGEORDNETEN
   Rasters (subgrid). Dadurch ist jede der drei Zeilen in allen Boxen einer
   Rasterzeile gleich hoch — der Text beginnt überall auf derselben Höhe,
   auch wenn eine Überschrift zweizeilig wird. Die Zeilen werden fest
   zugewiesen, damit eine Box ohne Symbol nicht nach oben rutscht.
   Der geerbte Zeilenabstand wird auf 0 gesetzt: die Abstände innerhalb
   einer Box kommen wie bisher aus den Rändern der Elemente. */
.feature{background:var(--c-feature);border:1px solid var(--c-border);border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px);transition:transform .18s ease,box-shadow .18s ease;min-width:0}
/* Nur wo subgrid da ist. Ohne die Abfrage bliebe in alten Browsern zwar
   die Zeilenangabe stehen, aber ohne die geerbten Zeilen — die Kästen
   fielen auseinander. So bleibt es dort beim bisherigen Fluss. */
@supports (grid-template-rows: subgrid){
  .feature{display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
  .feature > .feature__icon{grid-row:1}
  .feature > h1,.feature > h2,.feature > h3,
  .feature > h4,.feature > h5,.feature > h6{grid-row:2;align-self:start}
  .feature > .feature__text{grid-row:3}
}
/* Lange Wörter in einer schmalen Spalte umbrechen, statt aus der Box zu
   laufen. Getrennt wird nur, wenn es sonst nicht passt. */
/* „anywhere“ statt „break-word“: nur damit schrumpft auch die kleinste
   angenommene Breite des Textes. Mit „break-word“ bricht die Zeile zwar,
   der Kasten selbst bleibt aber so breit wie das längste Wort. */
.feature > h1,.feature > h2,.feature > h3,.feature > h4,.feature > h5,.feature > h6,
.feature__text{overflow-wrap:anywhere;hyphens:auto;min-width:0}
.feature:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,27,42,0.09)}
.feature__icon{width:46px;height:46px;border-radius:max(0px, calc(var(--radius) - 2px));display:grid;place-items:center;margin-bottom:18px;
  background:var(--c-icon-bg);color:var(--c-primary);font-family:var(--font-head);font-weight:700;font-size:1.15rem}
.feature__icon .fa{font-size:1.25rem;color:var(--c-icon)}
.feature h3{margin-bottom:.4em}
.feature__text{color:var(--c-body)}
.feature__text > :last-child{margin-bottom:0}

/* ---------- Fließtext aus dem Editor ---------- */
.rte h3,.rte h4{margin-top:1.4em}
.rte h3:first-child,.rte h4:first-child{margin-top:0}
.rte ul,.rte ol{margin:0 0 1.1em;padding-left:1.35em}
.rte li{margin-bottom:.4em}
.rte ul{list-style:disc}
.rte ol{list-style:decimal}
.rte strong{font-weight:700}
.rte a{text-decoration:underline;text-underline-offset:2px}
.rte > :last-child{margin-bottom:0}
/* Einleitung aus dem vollen Editor: der Kasten ersetzt den früheren
   Absatz, Größe und Farbe kommen weiter aus .lead */
.lead.rte > :last-child{margin-bottom:0}
.lead.rte h3,.lead.rte h4{font-size:1em;color:inherit}

/* ---------- Text/Bild-Blöcke ---------- */
/* Früher stand hier „.block + .block{padding-top:0}“ — das sollte den
   doppelten Abstand zwischen zwei Blöcken vermeiden, ließ den zweiten und
   jeden weiteren Block aber oben bündig am vorigen kleben. Jeder Block ist
   ein eigener Abschnitt mit eigener Überschrift und behält daher seinen
   Innenabstand, genau wie jede andere Abschnittsfolge auch. */
.block__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.block--noimg .block__inner{grid-template-columns:1fr;max-width:78ch}
/* Bildseite */
.block--left .block__media{order:-1}
/* Senkrechte Ausrichtung in der Zeile */
.block--top    .block__media,.block--top    .block__text{align-self:start}
.block--middle .block__media,.block--middle .block__text{align-self:center}
.block--bottom .block__media,.block--bottom .block__text{align-self:end}
.block__media img{width:100%;border-radius:var(--radius-img);object-fit:cover}
/* Mehrere Bilder je Block */
.block__media{display:grid;gap:14px}
.block__media--stack{grid-template-columns:1fr}
.block__media--duo{grid-template-columns:repeat(2,minmax(0,1fr))}
.block__media--grid{grid-template-columns:repeat(2,1fr)}
.block__media--grid > figure:first-child:nth-last-child(odd){grid-column:1 / -1}
.block__media figure{margin:0}
.block__media figcaption{font-size:.86rem;color:var(--c-muted);margin-top:8px}
/* ---------- Icon-Liste (früher Häkchenliste) ----------
   Das Symbol ist jetzt ein echtes Element statt eines ::before — nur so
   lässt sich je Punkt ein eigenes Zeichen setzen. Das Häkchen bleibt die
   Vorgabe und sieht unverändert aus. */
.iconlist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
/* Icon-Liste im Grid-Abschnitt: steht unter den Boxen und rückt mit der
   Ausrichtung des Abschnittskopfes mit. Ohne Boxen darüber schließt sie
   direkt an die Einleitung an. */
.features__liste{margin-top:clamp(28px,4vw,48px)}
.features__grid + .features__liste{margin-top:clamp(28px,4vw,48px)}
.section__head + .features__liste{margin-top:0}
.features__liste .iconlist{max-width:78ch}
.iconlist li{display:grid;grid-template-columns:18px 1fr;gap:12px;
  align-items:start;color:var(--c-text)}
.iconlist__ico{flex:none;width:18px;display:grid;place-items:center;
  margin-top:.28em;color:var(--c-icon);font-size:1rem;line-height:1}
.iconlist__ico--txt{font-weight:700;font-size:.95rem;color:var(--c-primary)}
.iconlist__ico--haken{height:18px;border-radius:50%;
  background:var(--c-primary);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}

/* ---------- Bildergalerie ---------- */
.gallery__grid{display:grid;gap:clamp(10px,1.4vw,18px)}
.gal{margin:0}
.gal__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--radius);overflow:hidden;line-height:0;position:relative}
.gal__btn img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease}
.gal__btn:hover img{transform:scale(1.04)}
.gal__btn:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.gal figcaption{font-size:.92rem;color:var(--c-muted);margin-top:9px;line-height:1.45}

/* Lightbox — ohne fremde Bibliothek */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,10,14,.96);
  display:grid;grid-template-rows:1fr auto;place-items:center;padding:clamp(12px,3vw,40px)}
.lb__stage{margin:0;display:grid;place-items:center;gap:14px;max-width:100%;max-height:100%}
.lb__stage img{max-width:min(1400px,92vw);max-height:76vh;width:auto;height:auto;
  border-radius:max(0px, calc(var(--radius) - 2px));background:#111}
.lb__cap{color:#f2f5f8;font-size:1.02rem;text-align:center;max-width:64ch;margin:0}
.lb__count{color:rgba(255,255,255,.62);font-size:.86rem;padding:10px 0 2px;
  font-variant-numeric:tabular-nums}
.lb button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;cursor:pointer;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:26px;line-height:1;
  transition:background .15s}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb__close{top:16px;right:16px;font-size:24px}
.lb__prev{left:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
.lb__next{right:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
.lb.is-single .lb__prev,.lb.is-single .lb__next{display:none}
@media (max-width:600px){
  .lb button{width:44px;height:44px;font-size:22px}
  .lb__stage img{max-height:66vh}
}

/* ---------- Zitat ---------- */
.quote{background:var(--c-tint)}
.quote__inner{max-width:820px;margin:0 auto;text-align:center}
.quote blockquote{margin:0;font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem);line-height:1.4;letter-spacing:-.015em}
.quote blockquote::before{content:"\201C";display:block;font-size:3.4rem;line-height:.6;color:var(--c-accent);margin-bottom:.18em}
.quote figcaption{margin-top:26px;display:flex;align-items:center;gap:12px;justify-content:center;color:var(--c-muted);font-size:.95rem}
.quote figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.quote figcaption b{color:var(--c-text);display:block;font-size:1rem}

/* ---------- FAQ ---------- */
.faq__list{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:4px 20px}
.faq summary{cursor:pointer;padding:16px 0;font-family:var(--font-head);font-weight:600;font-size:1.05rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--c-primary);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details .rte{color:var(--c-body);margin:0 0 16px}

/* ---------- CTA-Band ----------
   Wahlweise dunkles Band, eigene Fläche oder Hintergrundbild. Das Bild liegt
   hinter dem Inhalt und wird über seine Deckkraft auf die Bandfarbe abgedunkelt. */
.cta-band{background:var(--c-cta);text-align:center;position:relative;overflow:hidden}
.cta-band > .wrap{position:relative;z-index:1}
.cta-band__media{position:absolute;inset:0;z-index:0;margin:0}
.cta-band__media img{width:100%;height:100%;border-radius:0;object-fit:cover;
  object-position:center center;opacity:var(--cta-img-opacity)}
.cta-band p,.cta-band .cta__text{max-width:56ch;margin-left:auto;margin-right:auto}
/* Der CTA-Text kommt aus dem vollen Editor; Listen darin bleiben mittig
   ausgerichtet, damit das Band nicht auseinanderfällt. */
.cta-band .cta__text ul,.cta-band .cta__text ol{list-style-position:inside;padding-left:0}
.cta-band--ink-light{color:#C1C4C8}
.cta-band--ink-light h2{color:#F5F6F6}
.cta-band--ink-light p,.cta-band--ink-light .cta__text{color:rgba(207,209,212,0.88)}
.cta-band--ink-dark{color:var(--c-muted)}
.cta-band--ink-dark h2{color:var(--c-cta-heading)}
.cta-band--ink-dark p,.cta-band--ink-dark .cta__text{color:var(--c-cta-body)}
.cta-band .btn{background:var(--c-cta-btn);color:var(--c-cta-btn-ink);border-color:transparent;
  box-shadow:var(--cta-btn-shadow)}
.cta-band .btn:hover{box-shadow:var(--cta-btn-shadow-hover)}

/* ---------- Footer ---------- */
.site-footer{background:var(--c-dark);color:rgba(183,187,191,0.86);padding:44px 0;font-size:.92rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between}
.site-footer a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(183,187,191,0.34)}
.site-footer a:hover{color:#F3F4F4}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
/* Hinweis auf den Generator — eigene Zeile, bewusst zurückhaltend */
.site-footer .credit{flex-basis:100%;margin:0;font-size:.82rem;opacity:.72}
.site-footer--nur-credit{padding:22px 0}
.site-footer--nur-credit .wrap{justify-content:center;text-align:center}

/* ---------- Rechtstexte (Impressum, Datenschutz …) ----------
   Schmale Spalte, ruhige Abstände. Eingefügte Fremdtexte bringen oft
   Tabellen mit — die brauchen wenigstens eine Grundform. */
.legal{max-width:760px}
.legal h1{margin:0 0 .6em}
.legal h2{margin:1.8em 0 .5em}
.legal h3,.legal h4,.legal h5,.legal h6{margin:1.4em 0 .4em}
.legal p,.legal ul,.legal ol,.legal blockquote,.legal table{margin:0 0 1em}
.legal ul,.legal ol{padding-left:1.4em}
.legal li{margin-bottom:.35em}
.legal a{color:var(--c-link)}
.legal hr{border:0;border-top:1px solid var(--c-border);margin:2em 0}
.legal blockquote{border-left:3px solid var(--c-border);padding-left:16px;color:var(--c-muted)}
.legal small{color:var(--c-muted)}
.legal table{width:100%;border-collapse:collapse;font-size:.95rem;display:block;overflow-x:auto}
.legal th,.legal td{border:1px solid var(--c-border);padding:8px 10px;text-align:left;vertical-align:top}
.legal th{background:var(--c-surface);font-weight:600}
.legal__back{margin-top:2.4em;font-size:.94rem}
.legal__affi{margin-top:2.6em;padding-top:1.2em;border-top:1px solid var(--c-border);font-size:.92rem}
.legal__affi small{display:inline-block;margin-top:.35em;font-size:.84rem;color:var(--c-muted)}

/* =========================================================
   LAYOUT-VARIANTEN
   ========================================================= */

/* --- A: Classic — zentriert, Bild unter dem Text --- */
.layout-classic .hero__text{max-width:780px;margin:0 auto}
.layout-classic .hero__media{margin-top:clamp(34px,5vw,60px)}
.layout-classic .hero__media img{max-height:560px}

/* --- B: Split — Text links, Bild rechts --- */
.layout-split .hero__inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--gap);align-items:stretch}
/* Die Fläche kommt aus --c-feature; die Vorgabe dafür richtet sich nach
   der Layoutvariante (siehe featureBgDefault). Hier bleibt nur der Rahmen. */
.layout-split .feature{border-color:transparent}
.layout-split .section--features{background:var(--c-bg)}

/* --- C: Editorial — großes Bildbanner mit Overlay --- */
/* Bei einspaltigen Grid-Gruppen die typische Editorial-Zeile */
.layout-editorial .features__grid.cols-1{gap:0;text-align:left}
/* In einer Spalte steht das Symbol daneben statt darüber — hier gilt ein
   eigenes Raster, das subgrid wieder aufhebt. */
.layout-editorial .cols-1 .feature{border:0;border-top:1px solid var(--c-border);border-radius:0;
  display:grid;grid-template-rows:none;grid-row:auto;row-gap:0;
  grid-template-columns:72px 1fr;column-gap:24px;align-items:start;padding-left:0;padding-right:0}
.layout-editorial .cols-1 .feature > .feature__icon,
.layout-editorial .cols-1 .feature > h1,.layout-editorial .cols-1 .feature > h2,
.layout-editorial .cols-1 .feature > h3,.layout-editorial .cols-1 .feature > h4,
.layout-editorial .cols-1 .feature > h5,.layout-editorial .cols-1 .feature > h6,
.layout-editorial .cols-1 .feature > .feature__text{grid-row:auto}
.layout-editorial .cols-1 .feature:hover{transform:none;box-shadow:none}
.layout-editorial .cols-1 .feature h1,.layout-editorial .cols-1 .feature h2,
.layout-editorial .cols-1 .feature h3,.layout-editorial .cols-1 .feature h4,
.layout-editorial .cols-1 .feature h5,.layout-editorial .cols-1 .feature h6,
.layout-editorial .cols-1 .feature__text{grid-column:2}
.layout-editorial .cols-1 .feature__icon{grid-column:1;grid-row:1 / span 2 !important;width:auto;height:auto;background:none;
  font-size:2.4rem;line-height:1;color:var(--c-accent);margin:0;place-items:start}
.layout-editorial .cols-1 .feature__icon .fa{font-size:2rem;color:var(--c-icon)}
.layout-editorial .section--features{background:var(--c-bg)}

/* --- D: Cards — kompakt, alles auf Flächen --- */
.layout-cards{background:var(--c-surface)}
/* Das Polster gehört hier auf den Abschnitt, weil die Karte selbst das
   seitliche Polster von .wrap überschreibt — sonst klebt sie am Rand. */
.layout-cards .hero{padding-left:24px;padding-right:24px}
.layout-cards .hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:stretch;
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius-xl);
  padding:clamp(28px,4vw,56px);box-shadow:0 22px 60px rgba(15,27,42,0.07)}
.layout-cards .section--surface{background:transparent}
.layout-cards .feature{box-shadow:0 10px 28px rgba(15,27,42,0.06)}
.layout-cards .block__inner{background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--radius-card);padding:clamp(24px,3.4vw,44px)}
.layout-cards .quote{background:transparent}
.layout-cards .quote__inner{background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--radius-card);padding:clamp(30px,4vw,56px)}

/* =========================================================
   HERO ALS HINTERGRUNDBILD
   Steht in jeder Layoutvariante zur Verfügung. Muss nach den
   Varianten stehen, damit deren Hero-Regeln überschrieben werden.
   ========================================================= */
.hero--bg{position:relative;padding:0;background:var(--c-dark);overflow:hidden}
.hero--bg .hero__media{position:absolute;inset:0;z-index:0;margin:0;display:block;gap:0}
.hero--bg .hero__media img{width:100%;height:100%;max-height:none;aspect-ratio:auto;
  object-fit:cover;border-radius:0;opacity:var(--hero-img-opacity)}
.hero--bg .hero__inner{display:block;padding:clamp(90px,15vw,190px) 24px;
  background:none;border:0;box-shadow:none;max-width:var(--maxw)}
.hero--bg .hero__text{max-width:760px;margin:0;position:relative;z-index:1}
.hero--bg .hero__text.ta-center{margin-left:auto;margin-right:auto}
.hero--bg .hero__text.ta-right{margin-left:auto;margin-right:0}

/* Helle oder dunkle Schrift im Hero — gilt in beiden Darstellungen */
.hero--ink-light h1,.hero--ink-light h2{color:#F5F6F6}
.hero--ink-light .eyebrow{color:#F1F1F2;background:rgba(231,232,234,0.16)}
.hero--ink-light .lead{color:rgba(217,219,221,0.9)}
.hero--ink-light .btn--ghost{color:#F1F1F2;border-color:rgba(221,223,225,0.5)}
.hero--ink-dark h1,.hero--ink-dark h2{color:var(--c-heading)}
.hero--ink-dark .eyebrow{color:var(--c-primary);background:var(--c-primary-soft)}

.hero--ink-dark .lead{color:var(--c-body)}
.hero--ink-dark .btn--ghost{color:var(--c-primary);border-color:var(--c-border)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .cols-5,.cols-6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .cols-3,.cols-4,.cols-5,.cols-6{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  :root{--fs-body:16px}
  .cols-2,.cols-3,.cols-4,.cols-5,.cols-6{grid-template-columns:1fr}
  .block__inner,
  .block__media--duo,.block__media--grid,
  .layout-split .hero__inner,
  .layout-split .hero--media-left .hero__inner,
  .layout-cards .hero__inner{grid-template-columns:1fr}
  /* Untereinander gibt es keine Nachbarspalte mehr, an der sich das Bild
     ausrichten könnte — es kehrt in den normalen Fluss zurück. */
  .hero--zwei .hero__media{position:static;height:auto;min-height:0}
  .hero--zwei .hero__media img{position:static;height:auto;aspect-ratio:16/10}
  .hero--media-left .hero__media{order:0}
  .block--left .block__media{order:0}
  :root{--scroll-off:84px}
  .site-header .hdr{min-height:64px;gap:10px}
  .btn{width:100%}
  .btn--sm{width:auto;white-space:nowrap;font-size:.86rem;padding:10px 14px}
  .logo{font-size:1rem;min-width:0}
  .logo img{max-height:min(var(--logo-h), 40px)}
  .logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .btn-row{flex-direction:column}
  .site-footer .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:460px){
  .site-header .logo span{display:none}
  .site-header .logo img{max-height:min(var(--logo-h), 36px)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}