/* Gestaltungsgrundlage klyro: Tokens, Raster, Komponenten, Sections. */

@font-face{
  font-family:'Schibsted Grotesk';
  src:url('../fonts/schibsted-grotesk-latin-var.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Public Sans';
  src:url('../fonts/public-sans-latin-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --gruen:#034916; --gruen-dunkel:#023610;
  --grund:#06140C; --grund-hoch:#0E2417;
  --signal:#F5E867; --handel:#07526F;
  --flaeche:#FFFFFF; --flaeche-ab:#F4F6F3;
  --linie:#DDE3DD; --linie-dunkel:#1C3325;
  --t-head:#06140C; --t-body:#26332B; --t-muted:#5B6A61;
  --t-hell:#FFFFFF; --t-hell-muted:#C6D2CA;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --breite:1200px; --achse:32px;
  --r-chip:4px; --r-karte:12px; --r-bild:20px; --r-geraet:28px; --r-pille:999px;
  --sh-chip:0 1px 2px rgba(6,20,12,.06);
  --sh-geraet:0 24px 60px rgba(6,20,12,.18);

  --dauer-kurz:160ms; --dauer:300ms; --dauer-lang:500ms;
  --easing:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body.klyro{
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;color:var(--t-body);background:var(--flaeche);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.klyro h1,.klyro h2,.klyro h3{
  font-family:'Schibsted Grotesk',system-ui,sans-serif;color:var(--t-head);text-wrap:balance;
  overflow-wrap:break-word;
}
.klyro h1{font-size:clamp(38px,5.2vw,68px);font-weight:800;line-height:1.04;letter-spacing:-.022em}
.klyro h2{font-size:clamp(30px,3.4vw,44px);font-weight:800;line-height:1.10;letter-spacing:-.018em}
.klyro h3{font-size:clamp(21px,1.7vw,24px);font-weight:700;line-height:1.25;letter-spacing:-.01em}

:focus-visible{outline:3px solid var(--signal);outline-offset:2px;box-shadow:0 0 0 5px var(--grund)}

/* ── Divi-Abbildung ────────────────────────────────────────────────────────
   Bildet das Raster oben auf die Divi-Ausgabe ab: Section > Row > Column.
   Divi setzt Section-Padding, Row-Breite und einen Spalten-Gap; beides wird
   hier je Bereich bewusst zurueckgenommen. Selektoren sind klassenbasiert,
   nie indexgebunden. */

body.klyro .et_pb_section{padding:0}
body.klyro .et_pb_row{width:100%;max-width:none;margin:0;padding:0;gap:0}
body.klyro .et_pb_column{margin:0;float:none}
/* Divi gibt jedem Modul einen prozentualen Aussenabstand mit — je nach Spaltenbreite
   7,5 bis 22,8 Prozent. In einer zwoelfspaltigen Kachel waren das 258 px Loch zwischen
   Ueberschrift und Text. Die Regel dort hat vier Klassen, ein schlichtes
   `body.klyro .et_pb_module` verliert dagegen. Deshalb hier auf derselben Ebene.
   Abstaende werden anschliessend je Bereich bewusst gesetzt. */
body.klyro .et_pb_module{margin-bottom:0}
body.klyro.et_pb_gutters3 .et_pb_column .et_pb_module,
body.klyro.et_pb_gutters2 .et_pb_column .et_pb_module,
body.klyro.et_pb_gutters1 .et_pb_column .et_pb_module,
body.klyro.et_pb_gutters4 .et_pb_column .et_pb_module{margin-bottom:0}

/* Kopf */
body.klyro .et-l--header{position:sticky;top:0;z-index:60}
body.klyro .et_pb_section.kopf{
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie);
}
body.klyro .et_pb_row.kopf-inner{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--achse);
  min-height:76px;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s6);
}
body.klyro .kopf-inner > .et_pb_column{width:auto!important;flex:0 0 auto}
body.klyro .kopf-inner > .et_pb_column:nth-child(2){flex:1 1 auto}
body.klyro .kopf-marke img{height:30px;width:auto}
body.klyro .kopf-marke .et_pb_image_wrap{display:block}

body.klyro .kopf-menue,
body.klyro .kopf-menue .et_pb_menu_inner_container,
body.klyro .kopf-menue .et_pb_menu__wrap,
body.klyro .kopf-menue .et_pb_menu__menu{position:static;background:none}
body.klyro .kopf-menue,
body.klyro .kopf-menue .et_pb_menu_inner_container{width:100%}
body.klyro .kopf-menue .et_pb_menu__wrap{display:flex;justify-content:center}
body.klyro .kopf-menue .et-menu,
body.klyro .kopf-menue .et-menu > li{list-style:none}
body.klyro .kopf-menue .et-menu > li::marker{content:none}
body.klyro .kopf-menue .et-menu{display:flex;align-items:center;gap:var(--s5);padding:0}
body.klyro .kopf-menue .et-menu > li{margin:0;padding:0}
body.klyro .kopf-menue .et-menu > li > a{
  position:relative;display:inline-block;padding:10px 2px;
  font-family:'Public Sans',system-ui,sans-serif;font-size:16px;font-weight:500;
  color:var(--t-body);opacity:1;
}
body.klyro .kopf-menue .et-menu > li > a::after{
  content:"";position:absolute;left:0;right:100%;bottom:6px;height:2px;
  background:var(--gruen);transition:right 180ms ease-out;
}
body.klyro .kopf-menue .et-menu > li > a:hover::after,
body.klyro .kopf-menue .et-menu > li > a:focus-visible::after{right:0}
body.klyro .kopf-menue .et_mobile_nav_menu{margin:0}
body.klyro .kopf-menue .mobile_menu_bar::before{color:var(--gruen);font-size:28px}
body.klyro .kopf-menue .et_mobile_menu{
  border-top:1px solid var(--linie);background:var(--flaeche);padding:0;
}
body.klyro .kopf-menue .et_mobile_menu li a{
  padding:16px var(--achse);font-size:17px;font-weight:500;color:var(--t-body);
  border-bottom:1px solid var(--linie);
}

body.klyro a.et_pb_button.kopf-cta{
  display:inline-flex;align-items:center;min-height:48px;padding:12px 28px;
  border-radius:var(--r-pille);background:var(--gruen);color:#fff;border:0;
  font-family:'Public Sans',system-ui,sans-serif;font-size:16px;font-weight:600;
  line-height:1.2;white-space:nowrap;transition:background-color var(--dauer-kurz) ease-out;
}
body.klyro a.et_pb_button.kopf-cta::after{display:none}
body.klyro a.et_pb_button.kopf-cta:hover{background:var(--gruen-dunkel);padding:12px 28px;border:0}

/* Fuss */
body.klyro .et_pb_section.fuss{
  background:var(--grund);color:var(--t-hell-muted);
  padding-block:var(--s8) var(--s6);
}
body.klyro .et_pb_row.fuss-raster,
body.klyro .et_pb_row.fuss-schluss{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--achse);
}
/* Vier Spalten, aber nicht vier gleiche — das Raster ist projektweit asymmetrisch
   (Designkonzept §5: 58/42, 7/5, 8/4). Die Markenspalte traegt am meisten und bekommt
   entsprechend mehr Platz. */
body.klyro .et_pb_row.fuss-raster{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s6);
}
body.klyro .fuss-raster > .et_pb_column{width:auto!important}
body.klyro .fuss p,body.klyro .fuss li{color:var(--t-hell-muted)}
body.klyro .fuss a{color:var(--t-hell-muted)}
body.klyro .fuss a:hover{color:var(--t-hell)}
body.klyro .fuss-marke img{height:32px;width:auto;filter:brightness(0) invert(1)}
body.klyro .fuss-anschrift{margin-top:var(--s4)}
body.klyro .fuss-titel h3{
  color:var(--t-hell);font-size:16px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:var(--s4);
}
body.klyro .fuss-liste ul{list-style:none;padding:0;display:grid;gap:10px}
body.klyro .fuss-liste li{margin:0}
/* Anschrift als Standortmarke — Leitmotiv Marker, Designkonzept §1 und §7:
   „Marke und Anschrift mit Marker". Punkt, Winkel, Beschriftung, dieselbe Mechanik wie im
   Hero und im Ablaufband, nur auf dunklem Grund. Auf dunkel traegt der Punkt den
   Signalton als harte Kante; die Leitlinie bleibt gedaempft. */
body.klyro .fuss-anschrift{position:relative;padding-left:26px}
body.klyro .fuss-anschrift::before{
  content:"";position:absolute;left:0;top:9px;width:10px;height:10px;
  border-radius:var(--r-pille);background:var(--signal);
}
body.klyro .fuss-anschrift::after{
  content:"";position:absolute;left:4px;top:19px;bottom:9px;width:1px;
  background:var(--linie-dunkel);
}
body.klyro .fuss-badge{margin-bottom:var(--s3)}
/* Schlusszeile: Copyright links, Urheberangabe rechts — eine Zeile statt drei
   untereinander gestapelter Absaetze. */
body.klyro .et_pb_row.fuss-schluss{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--linie-dunkel);
}
body.klyro .fuss-schluss > .et_pb_column{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s3) var(--s6);
}
body.klyro .fuss-copy p{font-size:16px;color:var(--t-hell-muted)}
body.klyro .fuss-badge-apple{margin-top:var(--s3)}
body.klyro .fuss-urheber{text-align:right}
/* Divi haengt jedem Absatz ein padding-bottom von 1em an. Ohne das Zuruecknehmen stehen die
   beiden Urheberzeilen so weit auseinander wie zwei getrennte Bloecke. */
body.klyro .fuss-urheber p{font-size:16px;color:var(--t-hell-muted);padding-bottom:0}
body.klyro .fuss-urheber p + p{margin-top:var(--s2)}

@media (max-width:1023px){
  body.klyro .et_pb_row.fuss-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:979px){
  body.klyro .kopf-menue .et-menu{display:none}
  body.klyro .et_pb_row.kopf-inner{min-height:64px;gap:var(--s4)}
  body.klyro .kopf-cta .et_pb_button{padding:12px 20px}
}
@media (max-width:767px){
  body.klyro .et_pb_row.fuss-raster{grid-template-columns:1fr}
}

/* ── Klickziele ────────────────────────────────────────────────────────────
   Gemessen am 03.08.2026: Menuepunkte 34 px hoch, Fuss- und Verzeichnislinks
   19 bis 20 px. Der Hausstandard verlangt 44 px. Die Flaeche waechst ueber
   Innenabstand, der negative Aussenabstand haelt das Schriftbild an Ort und
   Stelle — die Zeilen ruecken also nicht auseinander. */
body.klyro .kopf-menue .et-menu > li > a,
body.klyro .fuss a,
body.klyro .verzeichnis a{
  display:inline-block;padding-block:15px;margin-block:-15px;
}
body.klyro .kopf-marke a{display:inline-block;padding-block:7px;margin-block:-7px}
body.klyro .fuss a{padding-inline:6px;margin-inline:-6px}
/* Divi legt den Link um ein Bild als Inline-Element an. Sein Kasten misst dann die Zeile
   statt des Bildes — der Play-Store-Link stand mit 145x20 in der Messung, obwohl das Badge
   646x250 gross ist. Als Block deckt sich Klickflaeche und Sichtbares. */
body.klyro .et_pb_image > a{display:block}
/* Anschrift und Kontaktzeilen sind keine Links im Satz, sondern eigene Eintraege. */
body.klyro address a{display:inline-block;padding-block:12px;margin-block:-12px}
body.klyro .verzeichnis ul{gap:2px}
body.klyro .fuss ul{display:grid;gap:4px}

/* ── Bewegung auf Wunsch aus ───────────────────────────────────────────────
   klyro-motion.js schaltet seine eigenen Auftritte ab. Divis Uebergaenge und
   das weiche Scrollen bleiben davon unberuehrt und werden hier abgeraeumt. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.klyro *,
  body.klyro *::before,
  body.klyro *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  body.klyro .kachel,
  body.klyro .ablauf-geraet .blende.aktiv{opacity:1}
}

/* ── Divi-Abbildung Startseite ─────────────────────────────────────────── */

body.klyro .et_pb_text .et_pb_text_inner > p:last-child{margin-bottom:0}
body.klyro .eyebrow p{
  font-size:13px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  color:var(--gruen);
}
body.klyro .eyebrow.hell p{color:var(--signal)}
body.klyro .section-titel h2{margin-top:var(--s3);max-width:20ch}
body.klyro .lead p{font-size:clamp(18px,1.4vw,20px);line-height:1.6;max-width:58ch}
body.klyro .lead{margin-top:var(--s5)}
body.klyro .lead-hell p{color:var(--t-hell-muted)}
body.klyro .et_pb_row.abschnitt-kopf{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--achse);
}

/* Hero */
body.klyro .et_pb_section.hero{
  position:relative;overflow:hidden;isolation:isolate;background:var(--flaeche-ab);
}
/* Die Kante zwischen hellem Grund und Weiss haengt an der Badge-Zeile, nicht an einer
   Prozentzahl. Oben steht das Versprechen, unten die Handlung — und die Kante sitzt auf
   jeder Breite an derselben Stelle. Der Block laeuft ueber die volle Breite und wird von
   overflow:hidden der Section beschnitten. */
body.klyro .hero-text .badge{position:relative}
body.klyro .hero-text .badge::before{
  content:"";position:absolute;z-index:-1;
  top:0;left:50%;translate:-50% 0;width:100vw;height:1400px;
  background:var(--flaeche);
}
body.klyro .et_pb_row.hero-raster{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--achse);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:end;padding-top:var(--s9);
}
body.klyro .hero-raster > .et_pb_column{width:auto!important}
body.klyro .et_pb_column.hero-text{padding-bottom:var(--s10)}
body.klyro .hero-titel h1{margin-top:var(--s3)}
/* Der obere Abstand steht an beiden Badges, sonst laufen sie um genau diesen Betrag
   auseinander. Der seitliche Abstand nur am zweiten. */
body.klyro .hero-text .badge,body.klyro .hero-text .badge-apple,
body.klyro .laden-text .badge,body.klyro .laden-text .badge-apple{margin-top:var(--s6)}
body.klyro .hero-text .badge-apple,
body.klyro .laden-text .badge-apple{margin-left:var(--s4)}
/* Beide Store-Badges stehen sichtbar gleich hoch.
   Gemessen an den Originalvorlagen: Googles PNG hat 29 px transparenten Rand oben und unten,
   sichtbar sind 76,8 Prozent der Bildhoehe (646x250, davon 646x192 deckend). Apples WebP ist
   randlos (282x95, davon 282x95 deckend). Gleiche Bildhoehe ergaebe deshalb ungleiche
   Schaltflaechen — die Apple-Bildhoehe betraegt daher 76,8 Prozent der Google-Bildhoehe.
   Ergebnis: sichtbare Hoehe beide 43 px im Inhalt, 37 px im Fuss. */
body.klyro .badge,body.klyro .badge-apple{display:inline-block;vertical-align:middle}
body.klyro .badge img{height:56px;width:auto}
body.klyro .badge-apple img{height:43px;width:auto}
body.klyro .badge > a,body.klyro .badge-apple > a{display:block;line-height:0}
body.klyro .fuss-badge img{height:48px;width:auto}
body.klyro .fuss-badge-apple img{height:37px;width:auto}
body.klyro .hinweis p{font-size:16px;color:var(--t-muted)}
body.klyro .hinweis{margin-top:var(--s4)}

body.klyro .et_pb_column.gestell{position:relative;justify-self:center;width:330px!important}
body.klyro .geraet-bild{
  position:relative;background:var(--grund);border-radius:var(--r-geraet);
  padding:10px 10px 0;box-shadow:var(--sh-geraet);
}
body.klyro .geraet-bild img{
  border-radius:20px 20px 0 0;aspect-ratio:9/15;object-fit:cover;object-position:top;width:100%;
}
/* Divi umschliesst jedes Bild mit einem inline-block. Dessen Breite steht erst fest, wenn die
   Bilddatei da ist — bis dahin greift width:100% am Bild ins Leere und der Kasten springt.
   Als Block ist die Breite von der Spalte her definiert, die Hoehe folgt dem Seitenverhaeltnis. */
body.klyro .geraet-bild .et_pb_image_wrap,
body.klyro .ablauf-geraet .blende .et_pb_image_wrap,
body.klyro .kachel-bild .et_pb_image_wrap{display:block}
body.klyro .marker{position:absolute;z-index:3;pointer-events:none}
body.klyro .marker .marker-inhalt{display:flex;align-items:flex-start}
body.klyro .marker .punkt{
  width:12px;height:12px;border-radius:var(--r-pille);background:var(--gruen);
  box-shadow:0 0 0 3px #fff;flex:0 0 auto;margin-top:6px;
}
body.klyro .marker .linie{
  width:46px;height:1px;background:var(--gruen);opacity:.5;margin-top:11px;flex:0 0 auto;
}
body.klyro .marker .etikett{
  background:#fff;border-radius:var(--r-chip);box-shadow:0 8px 24px rgba(6,20,12,.12);
  border-left:3px solid var(--signal);padding:10px 16px;
}
body.klyro .marker.links .etikett{border-left:0;border-right:3px solid var(--signal);text-align:right}
body.klyro .marker .etikett b{
  display:block;font-size:15px;font-weight:600;color:var(--t-head);line-height:1.3;white-space:nowrap;
}
body.klyro .marker .etikett span{
  display:block;font-size:15px;font-weight:600;color:var(--handel);font-variant-numeric:tabular-nums;
}
body.klyro .marker.m1{left:64%;top:30%}
body.klyro .marker.m2{right:70%;top:58%}
body.klyro .kennzahl{position:absolute;left:50%;bottom:0;translate:-50% 50%;z-index:4}
body.klyro .kennzahl .kennzahl-inhalt{
  display:flex;gap:var(--s6);background:var(--grund);border-radius:var(--r-karte);
  padding:var(--s5) var(--s6);box-shadow:var(--sh-geraet);white-space:nowrap;
}
body.klyro .kennzahl .posten{display:grid;gap:2px}
body.klyro .kennzahl b{
  font-family:'Schibsted Grotesk',sans-serif;font-size:17px;font-weight:700;color:var(--t-hell);
}
body.klyro .kennzahl .posten > span{font-size:16px;color:var(--t-hell-muted)}

/* Verbindungsband */
body.klyro .et_pb_section.band{background:var(--grund);padding-block:var(--s9)}
body.klyro .et_pb_section.band-hell{background:var(--flaeche-ab)}
body.klyro .et_pb_row.band-raster{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--achse);
  display:grid;grid-template-columns:58fr 42fr;gap:var(--s7);align-items:center;
}
body.klyro .band-raster > .et_pb_column{width:auto!important}
body.klyro .band .band-titel h2{color:var(--t-hell);max-width:20ch;margin-top:var(--s3)}
body.klyro .band-hell .band-titel h2{color:var(--t-head)}
body.klyro .band .band-satz{margin-top:var(--s5)}
body.klyro .band .band-satz p{color:var(--t-hell-muted);max-width:52ch}
body.klyro .band-hell .band-satz p{color:var(--t-body)}
body.klyro .kette{display:grid;gap:var(--s4);list-style:none;padding:0;margin:0}
body.klyro .kette li{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--s4);
  background:var(--grund-hoch);border-left:3px solid var(--signal);border-radius:var(--r-chip);
  padding:var(--s4) var(--s5);margin:0;list-style:none;
}
body.klyro .kette li + li{margin-left:var(--s6)}
body.klyro .kette .nr{
  font-family:'Schibsted Grotesk',sans-serif;font-weight:800;font-size:14px;
  letter-spacing:.10em;color:var(--signal);
}
body.klyro .kette .was b{font-size:17px;font-weight:600;color:var(--t-hell);display:block}
body.klyro .kette .was > span{font-size:16px;color:var(--t-hell-muted)}
body.klyro .band-schau{display:flex;justify-content:center}
body.klyro .etikett-schau{
  display:inline-block;background:#fff;border-radius:var(--r-chip);
  border-left:3px solid var(--signal);padding:var(--s4) var(--s5);box-shadow:var(--sh-chip);
}
body.klyro .etikett-schau b{display:block;font-size:17px;font-weight:600;color:var(--t-head)}
body.klyro .etikett-schau span{
  display:block;font-size:17px;font-weight:600;color:var(--handel);font-variant-numeric:tabular-nums;
}

/* Ablaufband */
body.klyro .et_pb_section.ablauf{padding-block:var(--s10)}
body.klyro .et_pb_row.ablauf-raster{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--achse);
  display:grid;grid-template-columns:42fr 58fr;gap:var(--s7);margin-top:var(--s7);
}
body.klyro .ablauf-raster > .et_pb_column{width:auto!important}
body.klyro .et_pb_column.ablauf-geraet{
  position:sticky;top:100px;align-self:start;justify-self:center;width:300px!important;
  background:var(--grund);border-radius:var(--r-geraet);padding:10px 10px 0;
  box-shadow:var(--sh-geraet);
}
body.klyro .ablauf-geraet .blende{
  position:absolute;inset:10px 10px 0;opacity:0;transition:opacity var(--dauer) ease-in-out;
}
body.klyro .ablauf-geraet .blende:first-child{position:relative;inset:auto}
body.klyro .ablauf-geraet .blende.aktiv{opacity:1}
body.klyro .ablauf-geraet .blende img{
  border-radius:20px 20px 0 0;aspect-ratio:9/15;object-fit:cover;object-position:top;width:100%;
}
body.klyro .schritt{padding-block:var(--s8);border-top:1px solid var(--linie)}
body.klyro .schritt.schritt-1{border-top:0;padding-top:0}
body.klyro .schritt .zahl p{
  font-family:'Schibsted Grotesk',sans-serif;font-size:14px;font-weight:800;
  letter-spacing:.10em;text-transform:uppercase;color:var(--t-muted);
}
body.klyro .schritt.aktiv .zahl p{color:var(--gruen)}
body.klyro .schritt h3{margin-block:var(--s3)}
body.klyro .schritt p{max-width:52ch}

/* Vorteile */
body.klyro .et_pb_section.vorteile{
  background:var(--flaeche-ab);padding-block:var(--s10);border-block:1px solid var(--linie);
}
body.klyro .et_pb_row.vorteile-raster{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--achse);
  display:grid;grid-template-columns:7fr 5fr;gap:var(--s7);margin-top:var(--s7);
}
body.klyro .vorteile-raster > .et_pb_column{width:auto!important}
body.klyro .et_pb_column.karte.gross{
  background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);
  overflow:hidden;display:flex;flex-direction:column;
}
body.klyro .gross .gross-bild{
  background:var(--grund);padding:var(--s7) var(--s6) 0;display:flex;
  justify-content:center;align-items:flex-end;flex:1;
}
body.klyro .gross .gross-bild img{
  width:236px;border-radius:16px 16px 0 0;aspect-ratio:9/13;object-fit:cover;object-position:top;
}
body.klyro .gross .gross-titel{padding:var(--s6) var(--s6) 0}
body.klyro .gross .gross-text{padding:var(--s3) var(--s6) var(--s6)}
body.klyro .et_pb_column.stapel{display:grid;gap:var(--s5);align-content:start}
body.klyro .stapel .karte{
  background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:var(--s6);
  transition:transform var(--dauer-kurz) ease-out,border-color var(--dauer-kurz) ease-out;
}
body.klyro .stapel .karte:hover{transform:translateY(-4px);border-color:#BFCBC1}
body.klyro .ikon svg{width:24px;height:24px;color:var(--gruen);display:block}
body.klyro .karte h3{margin-block:var(--s3)}
body.klyro .karte p{max-width:46ch}

/* Bento */
body.klyro .et_pb_section.bento{padding-block:var(--s10)}
body.klyro .et_pb_row.bento-raster{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--achse);
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);margin-top:var(--s7);
}
body.klyro .bento-raster > .et_pb_column{width:auto!important}
body.klyro .et_pb_column.kachel{
  background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s3);
  opacity:0;transform:translateY(14px);
}
body.klyro .et_pb_column.kachel.da{
  opacity:1;transform:none;
  transition:opacity var(--dauer-lang) ease-out,transform var(--dauer-lang) ease-out,
             border-color var(--dauer-kurz) ease-out;
}
body.klyro .et_pb_column.kachel:hover{border-color:#BFCBC1}
/* Der Abstand kommt aus dem Flex-Gap der Kachel, nicht zusaetzlich aus der Ueberschrift. */
body.klyro .kachel h3{margin-block:0}
body.klyro .kachel p{max-width:46ch}
body.klyro .k-4{grid-column:span 4}
body.klyro .k-5{grid-column:span 5}
body.klyro .k-7{grid-column:span 7}
body.klyro .k-8{grid-column:span 8}
body.klyro .k-12{grid-column:span 12}
body.klyro .et_pb_column.k-bild{
  padding:0;background:var(--grund);position:relative;overflow:hidden;min-height:280px;
  display:block;
}
body.klyro .k-bild .et_pb_heading{padding:var(--s6) var(--s6) 0;max-width:56%}
body.klyro .k-bild .et_pb_text{padding:var(--s3) var(--s6) var(--s6);max-width:56%}
body.klyro .k-bild h3{color:var(--t-hell)}
body.klyro .k-bild p{color:var(--t-hell-muted)}
body.klyro .k-bild .kachel-bild{
  position:absolute;right:var(--s6);bottom:0;width:210px;padding:0;max-width:none;
}
body.klyro .k-bild .kachel-bild img{
  border:9px solid var(--grund-hoch);border-bottom:0;border-radius:20px 20px 0 0;
  aspect-ratio:9/12;object-fit:cover;object-position:top;width:100%;
}

/* Zielgruppen */
body.klyro .et_pb_section.zielgruppen{padding-block:var(--s10)}
body.klyro .et_pb_row.zeile{
  max-width:var(--breite);margin-inline:auto;padding:var(--s7) var(--achse);
  display:grid;grid-template-columns:auto 5fr 7fr;gap:var(--s6);align-items:start;
  border-top:1px solid var(--linie);
}
body.klyro .et_pb_row.zeile-4{border-bottom:1px solid var(--linie)}
body.klyro .et_pb_row.zeile-2,body.klyro .et_pb_row.zeile-4{
  background:var(--flaeche-ab);border-radius:var(--r-karte);
}
body.klyro .zeile > .et_pb_column{width:auto!important}
body.klyro .zeile-ikon .ikon{
  width:44px;height:44px;border-radius:var(--r-pille);border:1px solid var(--linie);
  display:grid;place-items:center;color:var(--gruen);
}
body.klyro .zeile-ikon .ikon svg{width:22px;height:22px}
body.klyro .zeile-2 .ikon,body.klyro .zeile-4 .ikon{background:#fff}
body.klyro .zeile-text p{color:var(--t-muted)}
body.klyro .zeile-text b{color:var(--t-body);font-weight:600}

/* Sicherheit */
body.klyro .et_pb_section.sicherheit{background:var(--grund);padding-block:var(--s10)}
body.klyro .sicherheit h2{color:var(--t-hell)}
body.klyro .et_pb_row.fakten{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--achse);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7);
}
body.klyro .fakten > .et_pb_column{width:auto!important}
body.klyro .et_pb_column.fakt{
  background:var(--grund-hoch);border-radius:var(--r-karte);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s3);
}
body.klyro .et_pb_column.fakt-breit{grid-column:span 2}
body.klyro .fakt p{color:var(--t-hell-muted)}
body.klyro .fakt a{color:var(--t-hell);text-decoration:underline;text-underline-offset:3px}
body.klyro .etikett-fakt{
  display:inline-block;background:var(--grund);border-left:3px solid var(--signal);
  border-radius:var(--r-chip);padding:6px 12px;font-size:15px;font-weight:600;
  color:var(--t-hell);margin-bottom:var(--s3);
}

/* App laden */
body.klyro .et_pb_section.laden{
  background:var(--flaeche-ab);padding-block:var(--s10);border-top:1px solid var(--linie);
}
body.klyro .et_pb_row.laden-raster{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--achse);
  display:grid;grid-template-columns:7fr 5fr;gap:var(--s7);align-items:center;
}
body.klyro .laden-raster > .et_pb_column{width:auto!important}
body.klyro .et_pb_column.qr{
  background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);
  padding:var(--s6);justify-self:end;text-align:center;
}
body.klyro .qr-bild img{width:220px;height:220px;margin-inline:auto}
body.klyro .qr-text{margin-top:var(--s4)}
body.klyro .qr-text p{font-size:16px;color:var(--t-muted)}

@media (max-width:1199px){
  body.klyro .marker.m1{left:56%}
  body.klyro .marker.m2{right:76%}
}
@media (max-width:1023px){
  body.klyro .hero-text .badge::before{display:none}
  body.klyro .et_pb_row.hero-raster{grid-template-columns:1fr;gap:var(--s8);padding-bottom:var(--s9)}
  body.klyro .et_pb_column.hero-text{padding-bottom:0}
  body.klyro .marker.m1{left:58%}
  body.klyro .marker.m2{right:auto;left:6%;top:62%}
  body.klyro .kennzahl{position:static;translate:none;margin-top:var(--s7)}
  body.klyro .kennzahl .kennzahl-inhalt{flex-wrap:wrap;white-space:normal;justify-content:center}
  body.klyro .et_pb_row.band-raster,
  body.klyro .et_pb_row.ablauf-raster,
  body.klyro .et_pb_row.vorteile-raster,
  body.klyro .et_pb_row.laden-raster{grid-template-columns:1fr;gap:var(--s7)}
  body.klyro .kette li + li{margin-left:0}
  body.klyro .et_pb_column.ablauf-geraet{position:static}
  body.klyro .et_pb_row.bento-raster{grid-template-columns:repeat(6,1fr)}
  body.klyro .k-4,body.klyro .k-5,body.klyro .k-7,
  body.klyro .k-8,body.klyro .k-12{grid-column:span 6}
  body.klyro .et_pb_row.zeile{grid-template-columns:auto 1fr;gap:var(--s5)}
  body.klyro .zeile-text{grid-column:2}
  body.klyro .et_pb_row.fakten{grid-template-columns:1fr 1fr}
  body.klyro .et_pb_column.qr{justify-self:start}
}
@media (max-width:767px){
  body.klyro .et_pb_section.band,
  body.klyro .et_pb_section.ablauf,
  body.klyro .et_pb_section.vorteile,
  body.klyro .et_pb_section.bento,
  body.klyro .et_pb_section.zielgruppen,
  body.klyro .et_pb_section.sicherheit,
  body.klyro .et_pb_section.laden{padding-block:var(--s8)}
  body.klyro .et_pb_column.gestell{width:min(330px,100%)!important}
  /* Auf schmalen Breiten stehen die Badges untereinander. Der obere Abstand bleibt an
     beiden gleich, sonst kippt die Ausrichtung, sobald sie doch nebeneinander passen. */
  body.klyro .hero-text .badge,body.klyro .hero-text .badge-apple,
  body.klyro .laden-text .badge,body.klyro .laden-text .badge-apple{margin-top:var(--s4)}
  body.klyro .hero-text .badge-apple,
  body.klyro .laden-text .badge-apple{margin-left:0}
  body.klyro .et_pb_column.k-bild{min-height:0}
  body.klyro .k-bild .et_pb_heading,body.klyro .k-bild .et_pb_text{max-width:none}
  body.klyro .k-bild .kachel-bild{position:static;width:190px;margin:0 var(--s6)}
  body.klyro .marker .etikett b{white-space:normal}
  body.klyro .et_pb_row.fakten{grid-template-columns:1fr}
  body.klyro .et_pb_column.fakt-breit{grid-column:span 1}
}

/* Divi blendet Bilder per Opazitaet ein; die Einblendung steuert hier das eigene
   Motion-Konzept, deshalb bleiben die Bilder selbst sichtbar. */
body.klyro .et_pb_image .et_pb_image_wrap img{opacity:1}
body.klyro .et_pb_heading.section-titel{max-width:none}
/* ── Divi-Abbildung Rechtsseiten ───────────────────────────────────────── */

body.klyro .et_pb_section.rechtsseite{padding-block:var(--s8) var(--s10)}
body.klyro .et_pb_row.rechts-kopf,
body.klyro .et_pb_row.rechts-raster{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--achse);
}
body.klyro .rechts-titel h1{font-size:clamp(30px,4.4vw,52px);hyphens:auto}
body.klyro .et_pb_row.rechts-raster{
  display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s8);
  align-items:start;margin-top:var(--s7);
}
body.klyro .rechts-raster > .et_pb_column{width:auto!important;min-width:0}
body.klyro .et_pb_column.inhalt-verzeichnis{
  position:sticky;top:100px;border-left:1px solid var(--linie);padding-left:var(--s5);
}
body.klyro .verzeichnis-titel{
  font-family:'Schibsted Grotesk',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--t-muted);
}
body.klyro .verzeichnis ul{list-style:none;padding:0;display:grid;gap:10px;margin-top:var(--s4)}
body.klyro .verzeichnis li{margin:0;list-style:none}
body.klyro .verzeichnis a{font-size:16px;color:var(--t-body)}
body.klyro .verzeichnis a:hover{color:var(--gruen)}

body.klyro .prosa .et_pb_text{margin-top:var(--s8)}
body.klyro .prosa .et_pb_text:first-child{margin-top:0}
body.klyro .prosa .et_pb_text_inner{overflow-wrap:break-word}
body.klyro .prosa h2{
  font-size:clamp(24px,2vw,30px);scroll-margin-top:100px;margin-bottom:var(--s4);
}
body.klyro .prosa h3{margin-top:var(--s6);margin-bottom:var(--s3)}
body.klyro .prosa p,
body.klyro .prosa ul,
body.klyro .prosa ol,
body.klyro .prosa address{margin-top:var(--s4)}
body.klyro .prosa ul,body.klyro .prosa ol{padding-left:var(--s5)}
body.klyro .prosa ul li{list-style:disc}
body.klyro .prosa ol li{list-style:decimal}
body.klyro .prosa li{margin-top:var(--s2)}
body.klyro .prosa address{font-style:normal}
body.klyro .prosa a{color:var(--gruen);text-decoration:underline;text-underline-offset:3px}

@media (max-width:1023px){
  body.klyro .et_pb_row.rechts-raster{grid-template-columns:1fr;gap:var(--s7)}
  body.klyro .et_pb_column.inhalt-verzeichnis{
    position:static;border-left:0;border-bottom:1px solid var(--linie);
    padding-left:0;padding-bottom:var(--s5);
  }
}