/*
Theme Name: BenefitCheckin
Theme URI: https://www.benefitcheckin.de/
Author: Redesign 2026
Description: Massgeschneidertes Theme fuer benefitcheckin.de. Farben: Orange #FFA600, Blau #2F4A71. Schrift: Poppins 300/600.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: proprietaer
Text Domain: benefitcheckin
*/

/* Poppins wird lokal ausgeliefert (DSGVO). Dateien unter assets/fonts/,
   Lizenz SIL Open Font License 1.1, siehe LICENSE.txt daneben.
   Nur Latin-Subset, damit die Dateien klein bleiben. */
@font-face{
  font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;
  src:url("assets/fonts/poppins-300.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:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/poppins-400.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:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("assets/fonts/poppins-600.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;
}

/* BenefitCheckin – Designsystem
   Farben: Orange #FFA600 (Akzent), Blau #2F4A71 (Marke), Tiefblau #16263D (Text)
   Schrift: Poppins 300 / 600
   Hinweis: Orange traegt auf Weiss keinen Text (Kontrast ~2:1).
   Orange nur als Flaeche mit dunkelblauer Schrift oder auf dunklem Grund. */

:root{
  --orange:#FFA600;
  --orange-hover:#EE9A00;
  --blue:#2F4A71;
  --ink:#16263D;
  --soft:#5B6C85;
  --paper:#FFFFFF;
  --mist:#F1F4F8;
  --line:#DCE3EB;
  --pad:clamp(1.25rem,5vw,2rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;font-size:17px;line-height:1.65;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:600;line-height:1.12;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.05rem,4.6vw,3.35rem)}
h2{font-size:clamp(1.55rem,2.7vw,2.15rem)}
h3{font-size:1.1rem;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding-inline:var(--pad)}
.lede{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--soft);max-width:56ch}
.prose{max-width:68ch}
.prose p+p{margin-top:1.1rem}
.prose h2{margin:2.6rem 0 1rem}
.prose h3{margin:2rem 0 .7rem}
.prose ul{margin:1.1rem 0;padding-left:0}
.prose li{position:relative;padding-left:1.6rem;padding-block:.3rem}
.prose li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.8rem 1.2rem;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* ---------- Kopf ---------- */
.head{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:50}
.head__in{display:flex;align-items:center;gap:1.5rem;min-height:82px}
.logo{height:34px;width:auto;flex:none}
.head__nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem;font-size:.95rem}
.head__nav a{text-decoration:none;color:var(--blue);padding-block:.4rem;border-bottom:2px solid transparent}
.head__nav a:hover,.head__nav a[aria-current="page"]{border-bottom-color:var(--orange)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:7px;padding:.55rem .7rem;cursor:pointer}

/* ---------- Aufklappmenue, zweite Ebene ---------- */
.head__nav li{list-style:none;position:relative}
.head__nav .menu-item-has-children>a::after{
  content:"";display:inline-block;width:.42em;height:.42em;margin-left:.45em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-.15em) rotate(45deg);opacity:.6;
}
.head__nav .sub-menu{
  position:absolute;top:100%;left:-.6rem;z-index:60;
  min-width:250px;margin:0;padding:.45rem;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 14px 34px rgba(22,38,61,.14);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .14s,transform .14s,visibility .14s;
}
.head__nav li:hover>.sub-menu,
.head__nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.head__nav .sub-menu a{
  display:block;padding:.5rem .7rem;border-bottom:0;border-radius:5px;
  font-size:.92rem;line-height:1.35;
}
.head__nav .sub-menu a:hover,
.head__nav .sub-menu a:focus-visible{background:var(--mist)}
/* Unsichtbare Bruecke, damit der Zeiger die Luecke ueberqueren kann */
.head__nav .menu-item-has-children::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:.7rem;
}

/* ---------- Mobiles Menue, zweite Ebene ---------- */
.mnav li{list-style:none}
.mnav .sub-menu{margin:0;padding:0 0 .4rem 1rem;border-left:2px solid var(--line)}
.mnav .sub-menu a{font-size:.93rem;color:var(--soft);border-bottom:0;padding:.5rem 0}
.mnav .menu-item-has-children>a{font-weight:600}
.burger span{display:block;width:20px;height:2px;background:var(--blue);margin:4px 0}
.mnav{display:none;border-top:1px solid var(--line);background:var(--paper);padding:1rem var(--pad) 1.5rem}
.mnav.open{display:block}
.mnav a{display:block;text-decoration:none;color:var(--blue);padding:.65rem 0;border-bottom:1px solid var(--line)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:600;font-size:.98rem;text-decoration:none;cursor:pointer;
  padding:.78rem 1.3rem;border-radius:8px;border:1px solid transparent;
  transition:background .15s,border-color .15s;
}
.btn--primary{background:var(--orange);color:var(--ink)}
.btn--primary:hover{background:var(--orange-hover)}
.btn--ghost{background:transparent;color:var(--blue);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue)}
.btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- Netto-Zeile: tragendes Bauteil ---------- */
.nl{display:flex;align-items:baseline;gap:.6rem;padding-block:.55rem}
.nl__key{font-weight:300}
.nl__lead{flex:1 1 auto;min-width:1.5rem;border-bottom:1px dotted #B9C4D2;transform:translateY(-.28em)}
.nl__val{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.nl--sum{border-top:2px solid var(--ink);margin-top:.4rem;padding-top:.9rem}
.nl--sum .nl__key{font-weight:600}
.nl--sum .nl__val{font-size:1.6rem;color:var(--blue)}
.pending{color:var(--soft);font-style:italic;font-weight:300;font-size:.92rem}

/* ---------- Hero, vollflaechig mit dunkler Textflaeche ---------- */
.hero{position:relative;display:flex;align-items:center;
  min-height:clamp(480px,58vh,640px);padding-block:clamp(2.5rem,6vw,4.5rem)}
.hero--short{min-height:clamp(340px,40vh,440px)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(22,38,61,.3) 0%,rgba(22,38,61,.08) 55%,rgba(22,38,61,.22) 100%)}
.hero>.wrap{position:relative;z-index:2;width:100%}
.hero__panel{
  max-width:660px;padding:clamp(1.6rem,3.6vw,2.9rem);
  background:rgba(22,38,61,.8);color:#fff;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border-radius:8px;box-shadow:0 18px 50px rgba(11,20,33,.38);
}
.hero__panel--short{max-width:600px}
.hero__panel h1{color:#fff}
.hero__panel .num{color:var(--orange)}
.hero__panel .lede{color:rgba(255,255,255,.84);margin-top:1.3rem}
.hero__claim{font-size:.95rem;font-weight:600;color:var(--orange);margin-bottom:1.1rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero__panel .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.hero__panel .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero__strip{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  border-top:1px solid rgba(255,255,255,.24);margin-top:1.7rem;padding-top:1.1rem}
.hero__strip .nl__key{color:rgba(255,255,255,.84)}
.hero__strip .nl__lead{border-bottom-color:rgba(255,255,255,.35)}
.hero__strip .nl__val{color:#fff;font-size:1.35rem}
@supports not ((backdrop-filter:blur(7px)) or (-webkit-backdrop-filter:blur(7px))){
  .hero__panel{background:rgba(22,38,61,.9)}
}
/* Textflaeche verschieben. Der Verlauf dreht mit, damit die dunkle Seite
   immer unter der Flaeche liegt und das Motiv frei bleibt. */
.hero--center .hero__panel{margin-inline:auto}
.hero--right .hero__panel{margin-left:auto}
.hero--right::after{
  background:linear-gradient(260deg,rgba(22,38,61,.3) 0%,rgba(22,38,61,.08) 55%,rgba(22,38,61,.22) 100%);
}
.hero--center::after{
  background:linear-gradient(180deg,rgba(22,38,61,.2) 0%,rgba(22,38,61,.3) 100%);
}
/* Zusaetzliche gleichmaessige Abdunkelung fuer ueberstrahlte Motive.
   Eigene Ebene, damit sie unabhaengig von der Ausrichtung wirkt. */
.hero--dim-medium::before,
.hero--dim-strong::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
}
.hero--dim-medium::before{background:rgba(22,38,61,.34)}
.hero--dim-strong::before{background:rgba(22,38,61,.5)}

/* ---------- Baender ---------- */
.band{padding-block:clamp(3.2rem,6vw,5rem)}
.band--mist{background:var(--mist)}
.band--ink{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.band--ink h2,.band--ink h3{color:#fff}
.band--ink .lede{color:rgba(255,255,255,.8)}
.band--photo{position:relative;overflow:hidden;background:var(--blue);color:#fff}
.band--photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.band--photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--blue) 32%,rgba(47,74,113,.55))}
.band--photo h2,.band--photo h3{color:#fff}
.band--photo .lede{color:rgba(255,255,255,.82)}
.band--photo .wrap{position:relative;z-index:2}
.band__mark{position:absolute;right:-4%;bottom:-32%;width:min(430px,48%);opacity:.09;pointer-events:none}
.band__mark svg{width:100%;height:auto}
.head2{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:end;justify-content:space-between;margin-bottom:2.4rem}

/* ---------- Bilder ---------- */
.figure{position:relative;border-radius:6px;overflow:hidden;background:var(--mist)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure--sq{aspect-ratio:1/1}
.figure--wide{aspect-ratio:16/10}

/* ---------- Vertrauen ---------- */
.proof{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.proof__slot{flex:1 1 150px;height:62px;border:1px dashed #C3CEDC;border-radius:5px;
  display:grid;place-items:center;font-size:.76rem;color:#94A2B4}

/* ---------- Benefit-Liste ---------- */
.rows{border-top:1px solid var(--line);background:var(--paper)}
.row{display:grid;grid-template-columns:minmax(190px,1.05fr) 1.45fr auto;
  gap:.4rem 1.75rem;align-items:baseline;
  padding:1.35rem 1.1rem 1.35rem .9rem;border-bottom:1px solid var(--line);
  text-decoration:none;position:relative;transition:background .14s}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .14s}
.row:hover{background:var(--mist)}
.row:hover::before{background:var(--orange)}
.row__name{font-weight:600;color:var(--blue);font-size:1.06rem}
.row__desc{color:var(--soft);font-size:.95rem;line-height:1.55}
.row__val{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}

/* ---------- Abrechnungskarte ---------- */
.slip{background:var(--mist);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.slip__top{background:var(--blue);color:#fff;padding:.9rem 1.4rem;font-size:.88rem}
.slip__body{padding:1.4rem}
.slip__foot{border-top:1px solid var(--line);padding:1.3rem 1.4rem;background:var(--paper)}
.slip__sub{font-size:.82rem;color:var(--soft);margin-top:.9rem;line-height:1.5}
.range{width:100%;margin:.9rem 0 .3rem;accent-color:var(--orange)}
.range__row{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--soft)}
.big{font-size:clamp(1.9rem,3.5vw,2.5rem);font-weight:600;color:var(--blue);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}

/* ---------- Schritte, Merkmale, Splits ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);counter-reset:s}
.steps--4{grid-template-columns:repeat(4,1fr)}
.step{counter-increment:s;border-top:2px solid var(--blue);padding-top:1.1rem}
.band--ink .step,.band--photo .step{border-top-color:var(--orange)}
.step::before{content:counter(s);display:block;font-weight:600;font-size:.85rem;color:var(--orange);margin-bottom:.5rem}
.step h3{margin-bottom:.45rem}
.step p{font-size:.95rem;color:var(--soft);line-height:1.6}
.band--ink .step p,.band--photo .step p{color:rgba(255,255,255,.78)}
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.6rem,3vw,2.6rem)}
.feat{display:flex;gap:1rem;align-items:flex-start}
.feat__dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--orange);margin-top:.55rem}
.feat h3{margin-bottom:.35rem}
.feat p{color:var(--soft);font-size:.95rem}
.band--ink .feat p,.band--photo .feat p{color:rgba(255,255,255,.78)}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split--rev{grid-template-columns:1.1fr 1fr}

/* ---------- App-Store-Buttons ----------
   Badges duerfen nicht veraendert, eingefaerbt oder beschnitten werden.
   Beide werden auf dieselbe Hoehe gebracht, wie es die Richtlinien
   beider Anbieter verlangen. */
.stores{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:1.4rem}
.stores--badges{gap:1rem}
.stores__badge{display:inline-block;line-height:0}
.stores__badge img{width:auto;display:block}

/* Die beiden Badge-Dateien sind unterschiedlich aufgebaut: Apples Grafik
   fuellt ihre Datei vollstaendig aus, Googles bringt oben und unten
   transparenten Rand mit und nutzt nur 76,8 Prozent der Dateihoehe.
   Bei gleicher CSS-Hoehe waere Googles Badge sichtbar kleiner. Deshalb
   wird die Datei um den Kehrwert groesser skaliert - die Grafik bleibt
   unveraendert und proportional, nur der Rahmen waechst mit.
   Wird spaeter eine andere Datei hinterlegt, ist --badge-fuellung
   entsprechend anzupassen. */
.stores{--badge-hoehe:52px;--badge-fuellung:.768}
.stores__badge--apple img{height:var(--badge-hoehe)}
.stores__badge--google img{height:calc(var(--badge-hoehe) / var(--badge-fuellung))}
.stores__hinweis{
  flex:1 1 100%;margin:.2rem 0 0;font-size:.82rem;color:var(--soft);
  border-left:3px solid var(--orange);padding-left:.7rem;
}
.foot .stores{margin-top:1.1rem}
.foot .stores{--badge-hoehe:44px}
.foot .btn--ghost{color:#fff;border-color:rgba(255,255,255,.32);padding:.55rem 1rem;font-size:.9rem}
.foot .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.foot .stores__hinweis{color:rgba(255,255,255,.5)}

/* ---------- Screenshots nebeneinander ---------- */
.shots{display:flex;flex-wrap:wrap;gap:clamp(1rem,2.5vw,2rem);justify-content:center;align-items:flex-start}
.shots__item{flex:0 1 210px;margin:0;text-align:center}
.shots__item img{
  width:100%;height:auto;display:block;border-radius:22px;
  border:1px solid var(--line);box-shadow:0 16px 40px rgba(22,38,61,.16);
}
.shots__item figcaption{margin-top:.8rem;font-size:.88rem;color:var(--soft)}
.embed--live{padding:0;background:none;border:0;min-height:0;display:block}

/* ---------- Produktflaeche ---------- */
.shot{border:1px solid var(--line);border-radius:6px;background:var(--paper);overflow:hidden}
.shot__bar{display:flex;gap:6px;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--mist)}
.shot__bar i{width:9px;height:9px;border-radius:50%;background:#CBD5E1}
.shot__img{display:block;width:100%;height:auto}
.shot__ph{aspect-ratio:16/10;display:grid;place-items:center;color:#94A2B4;font-size:.85rem;
  text-align:center;padding:1rem;
  background:repeating-linear-gradient(135deg,#FAFCFE 0 12px,#F3F6FA 12px 24px)}

/* ---------- Weiche / Hinweis ---------- */
.switchbox{display:grid;grid-template-columns:190px 1fr auto;gap:2rem;align-items:center;
  background:var(--mist);border-left:4px solid var(--orange);padding:clamp(1.6rem,3vw,2.4rem)}
.notice{background:#FFF6E3;border-left:3px solid var(--orange);padding:.95rem 1.2rem;font-size:.93rem}

/* ---------- Eckdaten ---------- */
.keyfacts{display:flex;flex-wrap:wrap;gap:0 3rem;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);padding-block:1.4rem}
.kf{flex:1 1 170px}
.kf__v{font-size:1.6rem;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1.2}
.kf__k{font-size:.87rem;color:var(--soft)}

/* ---------- Video, FAQ ---------- */
.video{border:1px solid var(--line);border-radius:6px;aspect-ratio:16/9;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,#FAFCFE 0 12px,#F3F6FA 12px 24px);color:#94A2B4;font-size:.88rem}
.qa{border-top:1px solid var(--line)}
.qa__i{border-bottom:1px solid var(--line)}
.qa__q{width:100%;background:none;border:0;font:inherit;font-weight:600;color:var(--blue);
  text-align:left;padding:1.2rem 2.5rem 1.2rem 0;cursor:pointer;position:relative}
.qa__q::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  font-size:1.4rem;color:var(--orange)}
.qa__i.open .qa__q::after{content:"–"}  /* Gedankenstrich direkt, kein CSS-Escape */
.qa__a{display:none;padding-bottom:1.3rem;color:var(--soft);font-size:.97rem;max-width:70ch}
.qa__i.open .qa__a{display:block}
.qa__a p{margin:0}
.qa__a p+p{margin-top:.8rem}
.qa__a a{color:var(--blue);text-decoration:underline}

/* ---------- Brotkrumen, Formular ---------- */
.crumbs{font-size:.86rem;color:var(--soft);padding-block:1.4rem}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.field{margin-bottom:1.2rem}
.field label{display:block;font-size:.92rem;font-weight:600;color:var(--blue);margin-bottom:.4rem}
.field input,.field textarea,.field select{
  width:100%;font:inherit;padding:.75rem .9rem;border:1px solid var(--line);
  border-radius:7px;background:var(--paper);color:var(--ink)}
.field input:focus,.field textarea:focus{border-color:var(--blue)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--soft)}
.embed{border:1px solid var(--line);border-radius:6px;min-height:520px;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,#FAFCFE 0 12px,#F3F6FA 12px 24px);
  color:#94A2B4;font-size:.9rem;text-align:center;padding:2rem}

/* ---------- CTA ---------- */
.cta__in{max-width:52ch}
.cta__btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

/* ---------- Fuss ---------- */
.foot{background:var(--ink);color:rgba(255,255,255,.72);font-size:.92rem;
  padding-block:clamp(2.8rem,5vw,4rem) 1.5rem}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2.5rem}
.foot h4{color:#fff;font-size:.95rem;margin-bottom:.9rem}
.foot a{text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot li{padding-block:.22rem}
.foot__bar{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.16);margin-top:2.6rem;padding-top:1.4rem;
  font-size:.85rem;color:rgba(255,255,255,.55)}
.foot__bar ul{display:flex;flex-wrap:wrap;gap:1.2rem}
.disc{margin-top:.8rem;font-size:.8rem;color:rgba(255,255,255,.42)}

@media(max-width:900px){
  .hero{min-height:0;padding-block:clamp(2rem,7vw,3rem)}
  .hero::after{background:rgba(22,38,61,.35)}
  .hero__panel{max-width:none}
  .split,.split--rev,.feats,.foot__grid{grid-template-columns:1fr}
  .steps,.steps--4{grid-template-columns:1fr 1fr}
  .head__nav{display:none}
  .burger{display:block}
  .row{grid-template-columns:1fr auto;gap:.3rem 1rem}
  .row__desc{grid-column:1/-1}
  .switchbox{grid-template-columns:1fr}
  .switchbox>.figure{display:none}
}
@media(max-width:560px){
  .steps,.steps--4{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}


/* ---------- WordPress-Standardklassen ---------- */
.alignleft{float:left;margin:.4rem 1.4rem 1rem 0}
.alignright{float:right;margin:.4rem 0 1rem 1.4rem}
.aligncenter{margin-inline:auto}
.wp-caption{max-width:100%}
.wp-caption-text,.screen-reader-text{font-size:.85rem;color:var(--soft)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.admin-bar .head{top:32px}
@media(max-width:782px){.admin-bar .head{top:46px}}

/* ---------- Kundenlogos ----------
   Wichtig: .proof__slot bringt fuer die leeren Platzhalter eine feste Hoehe
   und einen gestrichelten Rahmen mit. Beides muss hier ausdruecklich
   zurueckgenommen werden, sonst ragt das Logo aus dem Kaestchen heraus und
   dessen Umrandung bleibt als Linie sichtbar. */
.proof{gap:1.5rem;justify-content:space-between;align-items:center}
.proof__slot--logo{
  flex:0 0 200px;
  height:auto;min-height:0;
  padding:0;
  border:0;border-radius:0;background:none;
  display:grid;place-items:center;
}
.proof__slot--logo img{
  width:200px;max-width:100%;height:auto;object-fit:contain;
}
@media(max-width:900px){
  .proof{justify-content:center;gap:1.5rem 2rem}
  .proof__slot--logo{flex:0 1 200px}
}