/* ==========================================================================
   Sprachschule Durlach – Firmenkurse
   Stylesheet, handgeschrieben. Reihenfolge:
   Schrift · Tokens · Reset · Typografie · Buttons · Header · Hero · Sektionen
   · Karten · Feature-Blöcke · Mock-Grafiken · Marquee · Ablauf · Dunkle Karte
   · FAQ · Formular · Footer · Animationen · Responsive · Druck
   ========================================================================== */

/* --- Schrift (selbst gehostet, kein Google-CDN -> keine US-Übertragung) --- */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/inter-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:100 900;
  font-display:swap;
  src:url("../fonts/inter-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+2074,U+20AC,U+2122,
                U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* Markenfarben */
  --blau:#1f3a93;
  --blau-dark:#16285f;
  --blau-hell:#3556c9;
  --navy:#0e1a3d;
  --rot:#e2001a;
  --rot-dark:#b80015;
  --weiss:#fff;

  /* Abgeleitete Tönungen für Flächen */
  --tint-blau:#e8edfb;
  --tint-blau-2:#f3f5fd;
  --tint-rot:#fdeaed;
  --tint-gruen:#e7f6ee;
  --tint-gelb:#fff3df;

  /* Neutral */
  --text:#0f172a;
  --grau:#5b6475;
  --grau-hell:#8a92a3;
  --hell:#f6f7fa;
  --rand:#e6eaf2;
  --rand-2:#d9dfeb;

  /* Radien, Schatten, Layout */
  --r-xl:36px;
  --r-l:24px;
  --r-m:16px;
  --r-s:10px;
  --schatten-s:0 3px 4px rgba(20,45,82,.03),0 13px 22px rgba(20,45,82,.05);
  --schatten-m:0 20px 50px rgba(31,58,147,.10);
  --schatten-l:0 40px 80px rgba(31,58,147,.16);
  --max:1220px;
  --header-h:76px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{
  margin:0;
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--text);
  background:var(--weiss);
  font-feature-settings:"cv05","ss01","cv11";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0;padding:0}
button{font:inherit}
svg{display:block}
.ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* --- Fokus & Reduced Motion ---------------------------------------------- */
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--rot);color:#fff;padding:.7rem 1.2rem;
  border-radius:0 0 var(--r-s) 0;font-weight:600;
}
.skip-link:focus{left:0;text-decoration:none;outline:3px solid #fff;outline-offset:-6px}

/* --- Layout --------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:24px}
.wrap--schmal{max-width:900px}
.wrap--mittel{max-width:1040px}

/* --- Typografie ----------------------------------------------------------- */
h1,h2,h3,h4{
  margin:0 0 .5em;
  line-height:1.1;
  letter-spacing:-.025em;
  font-weight:800;
  color:var(--text);
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(2rem,4.2vw,3.15rem);line-height:1.05;letter-spacing:-.03em}
h3{font-size:1.3rem;letter-spacing:-.015em;font-weight:700;line-height:1.25}
h4{font-size:1.05rem;letter-spacing:-.01em;font-weight:700}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--grau);line-height:1.55;text-wrap:pretty}
.muted{color:var(--grau)}
.small{font-size:.92rem}
.hl--blau{color:var(--blau)}
.hl--rot{color:var(--rot)}
.nowrap{white-space:nowrap}

/* Tag / Eyebrow: kleines Label über einer Überschrift */
.tag{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.4rem .85rem .4rem .7rem;
  border-radius:9px;
  background:var(--tint-blau);
  color:var(--blau);
  font-size:.86rem;font-weight:600;letter-spacing:.005em;
  margin-bottom:1.25rem;
}
.tag::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--rot)}
.tag--weiss{background:#fff;box-shadow:var(--schatten-s)}
.tag--dunkel{background:rgba(255,255,255,.1);color:#fff}
/* Karten sind Flex-Spalten. Ohne das wuerde das Label auf die volle
   Kartenbreite gedehnt statt sich an den Text zu schmiegen. */
.card > .tag{align-self:flex-start}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  min-height:54px;
  padding:.75rem 1.6rem;
  border:2px solid transparent;
  border-radius:999px;
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,
             transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{transition:none}

/* Button mit Icon-Kreis links (Stil der Referenz) */
/* Innenabstand so gewaehlt, dass 38px Icon + 12px Abstand + 4px Rahmen genau
   die 54px aus min-height ergeben. Sonst steht die Schaltflaeche 1px hoeher
   als die Umriss-Schaltflaeche daneben. */
.btn--icon{padding:.375rem 1.5rem .375rem .45rem}
.btn__ic{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:rgba(255,255,255,.2);
  transition:transform .25s var(--ease);
}
.btn__ic .ic{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover .btn__ic .ic{transform:translateX(3px)}

.btn--rot{background:var(--rot);color:#fff;box-shadow:0 10px 26px rgba(226,0,26,.22)}
.btn--rot:hover{background:var(--rot-dark);box-shadow:0 14px 30px rgba(226,0,26,.28)}
.btn--rot:focus-visible{
  outline-color:#fff;outline-offset:-5px;
  box-shadow:0 0 0 3px var(--rot),0 0 0 6px rgba(22,40,95,.85);
}
.btn--blau{background:var(--blau);color:#fff;box-shadow:0 10px 26px rgba(31,58,147,.22)}
.btn--blau:hover{background:var(--blau-dark)}
.btn--weiss{background:#fff;color:var(--text);box-shadow:var(--schatten-s)}
.btn--weiss:hover{background:#fff;box-shadow:var(--schatten-m)}
.btn--weiss .btn__ic{background:var(--tint-blau);color:var(--blau)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--rand-2)}
.btn--ghost:hover{border-color:var(--blau);color:var(--blau);background:var(--tint-blau-2)}
.btn--ghost .btn__ic{background:var(--tint-blau);color:var(--blau)}
.btn--ghost-weiss{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn--ghost-weiss:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn--klein{min-height:44px;padding:.55rem 1.15rem;font-size:.93rem}
.btn--klein.btn--icon{padding:.25rem 1.1rem .25rem .3rem} /* 32 + 8 + 4 = 44px */
.btn--klein .btn__ic{width:32px;height:32px}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;margin:1.8rem 0 0}
.btn-row--center{justify-content:center}

/* Textlink mit Pfeil */
.arrow-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;color:var(--blau);
}
.arrow-link .ic{width:1.1em;height:1.1em;transition:transform .25s var(--ease)}
.arrow-link:hover{text-decoration:none;color:var(--blau-dark)}
.arrow-link:hover .ic{transform:translateX(4px)}
.arrow-link--rot{color:var(--rot)}
.arrow-link--rot:hover{color:var(--rot-dark)}

/* Als Link gestalteter Button (E-Mail-Schutz) */
.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;
  color:inherit;font-size:inherit;font-weight:inherit;
  text-decoration:underline;text-underline-offset:3px;
}
.linkbtn:hover{color:#fff}
.section .linkbtn,.rechtstext .linkbtn{color:var(--blau);font-weight:600}
.section .linkbtn:hover,.rechtstext .linkbtn:hover{color:var(--blau-dark)}

/* --- Header (schwebende Leiste) ------------------------------------------ */
.header{
  position:sticky;top:0;z-index:100;
  padding:14px 0 0;
  margin-bottom:calc(-1 * (var(--header-h) + 14px));
  pointer-events:none;
}
.header__bar{
  pointer-events:auto;
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  min-height:var(--header-h);
  padding:.5rem .6rem .5rem 1.1rem;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-radius:18px;
  box-shadow:0 20px 50px rgba(31,58,147,.10),0 0 0 1px rgba(31,58,147,.04);
  transition:box-shadow .3s ease,background-color .3s ease;
}
.header.is-scrolled .header__bar{
  box-shadow:0 14px 40px rgba(14,26,61,.16),0 0 0 1px rgba(31,58,147,.06);
}
.logo{flex:0 0 auto;display:block;border-radius:8px}
.logo:hover{text-decoration:none}

/* --- Logo ------------------------------------------------------------------
   images/logo.png ist freigestellt (transparenter Hintergrund, kein weisser
   Rand). Dadurch scheint hinter dem Logo die leicht durchsichtige Menueleiste
   durch, auch ueber dunklen Sektionen. Die Groesse ist die sichtbare Hoehe. */
.logo img{height:50px;width:auto}

.nav{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;justify-content:flex-end}
.nav__list{display:flex;align-items:center;gap:.15rem;list-style:none;margin-right:auto;margin-left:.5rem}
.nav__link,.nav__toggle{
  position:relative;
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.55rem .8rem;
  border-radius:10px;
  color:var(--text);
  font-size:.95rem;font-weight:600;
  white-space:nowrap;
  background:none;border:0;cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.nav__link:hover,.nav__toggle:hover,
.nav__item--drop:hover .nav__toggle{background:var(--tint-blau-2);color:var(--blau);text-decoration:none}
.nav__link[aria-current="page"]{color:var(--blau)}
.nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:2px;
  border-radius:2px;background:var(--rot);
}
.nav__toggle::after{
  content:"";width:.4em;height:.4em;margin-top:-.15em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.nav__item--drop:hover .nav__toggle::after,
.nav__toggle[aria-expanded="true"]::after{transform:translateY(.15em) rotate(-135deg)}

/* Dropdown */
.nav__item--drop{position:relative}
.nav__drop{
  position:absolute;top:calc(100% + 12px);left:0;
  min-width:300px;
  background:#fff;
  border-radius:var(--r-m);
  box-shadow:var(--schatten-l),0 0 0 1px rgba(31,58,147,.05);
  list-style:none;
  padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .25s var(--ease),visibility .2s;
}
.nav__drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav__item--drop:hover .nav__drop,
.nav__item--drop:focus-within .nav__drop,
.nav__drop.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.nav__drop a{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .85rem;align-items:center;
  padding:.7rem .8rem;border-radius:12px;
  color:var(--text);
}
.nav__drop a:hover{background:var(--tint-blau-2);text-decoration:none}
.nav__drop a[aria-current="page"] strong{color:var(--blau)}
.nav__drop .ic{grid-row:span 2;width:38px;height:38px;padding:9px;border-radius:11px;background:var(--tint-blau);color:var(--blau)}
.nav__drop strong{font-size:.95rem;font-weight:700}
.nav__drop span{font-size:.84rem;color:var(--grau)}

.nav__cta{display:flex;align-items:center;gap:.25rem;margin-left:.25rem}
.nav__cta .nav__link{font-weight:600}

.burger{
  display:none;
  width:46px;height:46px;
  background:var(--tint-blau-2);border:0;border-radius:12px;
  cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{
  display:block;position:relative;
  width:20px;height:2px;background:var(--text);border-radius:2px;
  transition:background .15s ease;
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--text);border-radius:2px;
  transition:transform .2s ease,top .2s ease;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* --- Hero ----------------------------------------------------------------- */
.hero{
  position:relative;
  padding:calc(var(--header-h) + 14px + clamp(3.5rem,8vw,7rem)) 0 clamp(2rem,5vw,4rem);
  background:
    radial-gradient(60% 50% at 15% 10%,rgba(31,58,147,.14),transparent 70%),
    radial-gradient(45% 40% at 90% 15%,rgba(226,0,26,.10),transparent 70%),
    linear-gradient(180deg,#eef2fc 0%,#f8f9fd 55%,#fff 100%);
  overflow:hidden;
}
.hero__inner{text-align:center;max-width:62rem;margin-inline:auto}
.hero h1{margin-bottom:1.4rem}
.hero .lead{max-width:44em;margin-inline:auto}
.hero .btn-row{justify-content:center;margin-top:2rem}
.hero__trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;
  list-style:none;margin:1.6rem 0 0;
  font-size:.9rem;color:var(--grau);
}
.hero__trust li{display:inline-flex;align-items:center;gap:.45rem}
.hero__trust .ic{width:1.1em;height:1.1em;color:var(--rot)}

/* Visual: Foto im abgerundeten Rahmen mit schwebenden Karten */
.hero__visual{
  position:relative;
  max-width:1080px;margin:clamp(2.5rem,5vw,4rem) auto 0;
}
.hero__frame{
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:var(--schatten-l);
  background:#fff;
  padding:8px;
}
.hero__frame img{border-radius:calc(var(--r-l) - 8px);width:100%;aspect-ratio:16/8.5;object-fit:cover}

.float{
  position:absolute;z-index:2;
  background:#fff;
  border-radius:var(--r-m);
  box-shadow:0 20px 50px rgba(14,26,61,.18),0 0 0 1px rgba(31,58,147,.05);
  padding:.9rem 1rem;
  font-size:.86rem;
  min-width:210px;
  animation:float 7s ease-in-out infinite;
}
.float--1{left:-3%;top:8%}
.float--2{right:-3%;top:22%;animation-delay:-2.5s}
.float--3{left:6%;bottom:8%;animation-delay:-4.5s;min-width:250px}
.float__head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.55rem}
.float__title{font-weight:700;font-size:.9rem}
.float__meta{color:var(--grau);font-size:.8rem}
.float__badge{
  font-size:.72rem;font-weight:700;padding:.2rem .5rem;border-radius:6px;
  background:var(--tint-gruen);color:#1c7a45;white-space:nowrap;
}
.float__badge--blau{background:var(--tint-blau);color:var(--blau)}
.float__badge--rot{background:var(--tint-rot);color:var(--rot)}
.float__row{display:flex;align-items:center;gap:.6rem;padding:.35rem 0;color:var(--text)}
.float__row + .float__row{border-top:1px solid var(--hell)}
.float__row .ic{width:1.1em;height:1.1em;color:var(--blau)}
.float__row time{margin-left:auto;color:var(--grau);font-variant-numeric:tabular-nums}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Niveau-Leiste (in Karten und Mock-Grafiken) */
.levels{display:flex;gap:.3rem;margin:.4rem 0 .2rem}
.levels span{
  flex:1;text-align:center;font-size:.72rem;font-weight:700;
  padding:.3rem 0;border-radius:6px;background:var(--hell);color:var(--grau-hell);
}
.levels .is-done{background:var(--tint-blau);color:var(--blau)}
.levels .is-now{background:var(--blau);color:#fff}
.levels .is-goal{background:var(--tint-rot);color:var(--rot);outline:2px dashed rgba(226,0,26,.35);outline-offset:-2px}

/* Avatare */
.avatars{display:flex}
.avatars span{
  width:28px;height:28px;border-radius:50%;border:2px solid #fff;
  display:grid;place-items:center;font-size:.68rem;font-weight:700;color:#fff;
  background:var(--blau);margin-left:-8px;
}
.avatars span:first-child{margin-left:0}
.avatars span:nth-child(2){background:var(--rot)}
.avatars span:nth-child(3){background:var(--blau-hell)}
.avatars span:nth-child(4){background:#3a4a6b}

/* Persona-Karten unter dem Hero-Visual */
.personas{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  max-width:1080px;margin:clamp(1.5rem,3vw,2.2rem) auto 0;
  list-style:none;
}
.persona{
  display:flex;align-items:center;gap:.85rem;
  background:#fff;border-radius:var(--r-m);padding:.9rem 1rem;
  box-shadow:var(--schatten-s);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.persona:hover{transform:translateY(-3px);box-shadow:var(--schatten-m)}
.persona__av{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--tint-blau);color:var(--blau);
}
.persona__av .ic{width:20px;height:20px}
.persona strong{display:block;font-size:.93rem}
.persona span{font-size:.82rem;color:var(--grau)}

/* Kompakter Seitenkopf für Unterseiten */
.pagehead{
  position:relative;
  padding:calc(var(--header-h) + 14px + clamp(3rem,6vw,5rem)) 0 clamp(2.5rem,5vw,4rem);
  background:
    radial-gradient(60% 60% at 10% 0%,rgba(31,58,147,.13),transparent 70%),
    radial-gradient(40% 40% at 95% 10%,rgba(226,0,26,.09),transparent 70%),
    linear-gradient(180deg,#eef2fc 0%,#fff 100%);
  text-align:center;
}
.pagehead__inner{max-width:56rem;margin-inline:auto}
.pagehead h1{font-size:clamp(2.3rem,5vw,3.8rem);margin-bottom:1.2rem}
.pagehead .lead{margin-inline:auto;max-width:40em}
.pagehead .btn-row{justify-content:center;margin-top:1.8rem}
.pagehead--links{text-align:left}
.pagehead--links .pagehead__inner{margin-inline:0}
.pagehead--links .lead{margin-inline:0}
.pagehead--links .btn-row{justify-content:flex-start}
.pagehead--rechts{text-align:left}
.pagehead--rechts .pagehead__inner{max-width:calc(52rem - 48px);margin-inline:auto}
.pagehead--rechts .lead{margin-inline:0}

/* --- Faktenband ----------------------------------------------------------- */
.facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  margin-top:clamp(1.5rem,3vw,2.2rem);
}
.facts__item{
  background:#fff;border-radius:var(--r-m);padding:1.2rem 1.3rem;
  box-shadow:var(--schatten-s);
}
.facts__num{
  display:block;font-size:1.7rem;font-weight:800;
  letter-spacing:-.03em;line-height:1.1;color:var(--blau);
}
.facts__label{display:block;font-size:.88rem;color:var(--grau);margin-top:.25rem}

/* --- Sektionen ------------------------------------------------------------ */
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section--eng{padding:clamp(2.5rem,5vw,4rem) 0}
.section--hell{background:var(--hell)}
.section--tint{background:var(--tint-blau-2)}
.section--rund{border-radius:var(--r-xl);margin-inline:auto;max-width:calc(100% - 2*clamp(0px,2vw,24px))}
.section__head{max-width:50rem;margin:0 auto clamp(2rem,4vw,3.5rem);text-align:center}
.section__head .lead{margin-inline:auto}
.section__head p:last-child{margin-bottom:0}
.section__head--links{text-align:left;margin-inline:0}
.section__head--links .lead{margin-inline:0}

/* --- Karten-Grids --------------------------------------------------------- */
.grid{display:grid;gap:1.25rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;
  background:#fff;
  border:1px solid var(--rand);
  border-radius:var(--r-l);
  padding:1.8rem;
  box-shadow:var(--schatten-s);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--schatten-m);border-color:#cfd8ee}
.card h3{margin-bottom:.55rem}
.card p{color:var(--grau);margin-bottom:1rem}
.card p:last-child{margin-bottom:0}
.card--tint{background:var(--tint-blau-2);border-color:transparent;box-shadow:none}
.card--tint:hover{box-shadow:var(--schatten-s)}
.card--flach{box-shadow:none}
.card--flach:hover{transform:translateY(-3px);box-shadow:var(--schatten-s)}
.card--rot{background:var(--tint-rot);border-color:transparent}
.card--blau{background:var(--tint-blau);border-color:transparent}
.card--gross{padding:clamp(1.8rem,3.5vw,2.8rem)}
.card__icon{
  width:52px;height:52px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:15px;
  background:var(--tint-blau);
  color:var(--blau);
  margin-bottom:1.2rem;
}
.card__icon .ic{width:24px;height:24px}
.card__icon--rot{background:var(--tint-rot);color:var(--rot)}
.card__icon--gruen{background:var(--tint-gruen);color:#1c7a45}
.card__icon--gelb{background:var(--tint-gelb);color:#a15c00}
.card__icon--buchstabe{font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.card__link{margin-top:auto;padding-top:1.2rem}
.card__num{
  position:absolute;top:1.4rem;right:1.5rem;
  font-size:.8rem;font-weight:700;color:var(--grau-hell);letter-spacing:.06em;
}
.card ul.dots{margin-top:.2rem}

/* Vorteile-Karten: Icon links, Text rechts */
.benefit{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  background:#fff;border:1px solid var(--rand);border-radius:var(--r-m);
  padding:1.2rem 1.3rem;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.benefit:hover{transform:translateY(-3px);box-shadow:var(--schatten-s)}
.benefit__ic{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--tint-gruen);color:#1c7a45;
}
.benefit__ic .ic{width:20px;height:20px}
.benefit strong{display:block;margin-bottom:.15rem}
.benefit span{font-size:.92rem;color:var(--grau)}

/* --- Problem / Lösung ---------------------------------------------------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.compare__col{
  border-radius:var(--r-l);padding:clamp(1.6rem,3vw,2.2rem);
}
.compare__col--ohne{background:var(--tint-rot)}
.compare__col--mit{background:var(--tint-blau)}
.compare__label{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:1.2rem;
}
.compare__col--ohne .compare__label{color:var(--rot)}
.compare__col--mit .compare__label{color:var(--blau)}
.compare__list{list-style:none;display:grid;gap:.8rem}
.compare__list li{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  background:rgba(255,255,255,.75);border-radius:var(--r-m);padding:1rem 1.1rem;
}
.compare__list .ic{width:26px;height:26px;padding:5px;border-radius:8px;margin-top:.1rem}
.compare__col--ohne .compare__list .ic{background:var(--rot);color:#fff}
.compare__col--mit .compare__list .ic{background:var(--blau);color:#fff}
.compare__list strong{display:block;font-size:1.05rem;letter-spacing:-.01em}
.compare__list span{font-size:.92rem;color:var(--grau)}

/* --- Feature-Blöcke (Text + Grafik im Wechsel) --------------------------- */
.feature{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5.5rem);align-items:center;
  padding:clamp(2rem,4.5vw,3.5rem) 0;
}
.feature + .feature{border-top:1px solid var(--rand)}
.feature--flip .feature__visual{order:-1}
.feature h2{font-size:clamp(1.7rem,3vw,2.35rem);letter-spacing:-.025em}
.feature h2 .hl--blau,.feature h2 .hl--rot{white-space:normal}
.feature__text > p{color:var(--grau);font-size:1.05rem}
.feature__points{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  list-style:none;margin:1.6rem 0 0;
}
.feature__points li{
  background:var(--tint-blau-2);border-radius:var(--r-m);padding:1rem 1.1rem;
}
.feature__points strong{display:block;margin-bottom:.2rem;font-size:.98rem}
.feature__points span{font-size:.9rem;color:var(--grau)}
.feature__text .btn-row{margin-top:1.6rem}

/* Mock-Grafiken: abstrakte Darstellungen in Markenfarben */
.visual{
  position:relative;
  min-height:400px;
  border-radius:var(--r-l);
  background:var(--tint-blau-2);
  padding:clamp(1.4rem,3vw,2.4rem);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.visual--rot{background:linear-gradient(160deg,var(--tint-rot),#fff5f6)}
.visual--blau{background:linear-gradient(160deg,var(--tint-blau),#f3f5fd)}
.visual--gruen{background:linear-gradient(160deg,var(--tint-gruen),#f4fbf7)}
.visual--gelb{background:linear-gradient(160deg,var(--tint-gelb),#fffaf1)}
.visual__stack{position:relative;width:100%;max-width:420px}
.mock{
  background:#fff;border-radius:var(--r-m);
  box-shadow:0 14px 40px rgba(14,26,61,.10),0 0 0 1px rgba(31,58,147,.05);
  padding:1.1rem 1.2rem;font-size:.9rem;
}
.mock + .mock{margin-top:.9rem}
.mock--offset{margin-left:2.5rem}
.mock--offset-l{margin-right:2.5rem}
.mock__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.mock__title{font-weight:700}
.mock__sub{font-size:.8rem;color:var(--grau)}
.mock__row{display:flex;align-items:center;gap:.7rem;padding:.5rem 0}
.mock__row + .mock__row{border-top:1px solid var(--hell)}
.mock__row .ic{width:1.15em;height:1.15em;color:var(--blau)}
.mock__row time,.mock__row .mock__end{margin-left:auto;font-size:.82rem;color:var(--grau);white-space:nowrap}
.mock__bar{height:8px;border-radius:4px;background:var(--hell);overflow:hidden;margin:.5rem 0 .3rem}
.mock__bar span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blau),var(--blau-hell))}
.mock__bar--rot span{background:linear-gradient(90deg,var(--rot),#ff5a6b)}
.mock__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.mock__chips span{
  padding:.3rem .65rem;border-radius:7px;font-size:.8rem;font-weight:600;
  background:var(--tint-blau);color:var(--blau);
}
.mock__chips .is-rot{background:var(--tint-rot);color:var(--rot)}
.mock__chips .is-gruen{background:var(--tint-gruen);color:#1c7a45}
.mock__chips .is-grau{background:var(--hell);color:var(--grau)}

/* Sprechblasen */
.bubble{
  max-width:85%;padding:.65rem .9rem;border-radius:14px;
  font-size:.88rem;line-height:1.45;margin:.45rem 0;
  background:var(--hell);color:var(--text);
}
.bubble--me{margin-left:auto;background:var(--blau);color:#fff;border-bottom-right-radius:4px}
.bubble--they{border-bottom-left-radius:4px}
.bubble__who{display:block;font-size:.72rem;font-weight:700;opacity:.7;margin-bottom:.15rem}

/* Wochenraster */
.week{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin-top:.6rem}
.week__day{font-size:.72rem;font-weight:700;color:var(--grau-hell);text-align:center;margin-bottom:.2rem}
.week__slot{
  height:44px;border-radius:8px;background:var(--hell);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;text-align:center;line-height:1.15;padding:.2rem;
}
.week__slot--praesenz{background:var(--tint-rot);color:var(--rot)}
.week__slot--online{background:var(--tint-blau);color:var(--blau)}

/* --- Marquee (Branchen / Bausteine) ------------------------------------- */
.marquee{
  /* Container, Laufband und Karten sind gleich hoch. Ohne Luft nach oben und
     unten wuerde overflow:hidden beim Ueberfahren mit der Maus die Anhebung
     und den Schatten der Karten abschneiden. 40px Innenabstand geben dem
     Schatten (reicht rund 26px nach unten) genug Platz, der negative
     Aussenabstand nimmt sie aus dem Layout wieder heraus, damit sich die
     Abstaende der Sektion nicht verschieben. Seitlich wird weiterhin exakt
     am Rand geschnitten, es entsteht also kein Ueberlauf.
     position + z-index sorgen dafuer, dass der Schatten ueber die naechste
     Sektion faellt, statt von deren Hintergrund verdeckt zu werden. */
  position:relative;z-index:1;
  overflow:hidden;
  padding-block:40px;
  margin-block:-40px;
  /* Der (unsichtbare) Innenabstand ueberlappt Text davor und danach. Ohne
     das Folgende wuerde er dort Klicks und Textauswahl abfangen. */
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{pointer-events:auto} /* Anhalten bei Mauskontakt weiter moeglich */
/* Gewuenschter Abstand zwischen zwei Laufbaendern minus die 2x40px
   Innenabstand, die jetzt zwischen den Karten liegen. */
.marquee + .marquee{margin-top:calc(.8rem - 80px)}
.marquee__track{
  display:flex;gap:.8rem;width:max-content;
  animation:marquee 45s linear infinite;
}
.marquee--rueck .marquee__track{animation-direction:reverse;animation-duration:52s}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track > *{flex:0 0 auto}
@keyframes marquee{to{transform:translateX(-50%)}}
.chip{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.65rem 1.1rem .65rem .75rem;
  border-radius:12px;
  background:#fff;border:1px solid var(--rand);
  font-size:.93rem;font-weight:600;color:var(--text);
  white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.chip:hover{transform:translateY(-2px);box-shadow:var(--schatten-s)}
.chip .ic{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--tint-blau);color:var(--blau)}
.chip--rot .ic{background:var(--tint-rot);color:var(--rot)}
.chip small{font-weight:500;color:var(--grau);font-size:.82rem}
.tags{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;justify-content:center}
.tags li{
  background:#fff;border:1px solid var(--rand);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.92rem;font-weight:600;color:var(--text);
}

/* --- Ablauf (Zeitleiste) -------------------------------------------------- */
.timeline{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;
  position:relative;counter-reset:step;
}
.tl{
  position:relative;
  background:#fff;border:1px solid var(--rand);border-radius:var(--r-l);
  padding:1.6rem 1.5rem 1.5rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.tl:hover{transform:translateY(-4px);box-shadow:var(--schatten-m)}
/* display:block und line-height:1 machen die Hoehe eindeutig (= .76rem).
   Nur so trifft die Verbindungslinie weiter unten die Mitte des Nummernfelds. */
.tl__dur{
  display:block;line-height:1;
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rot);margin-bottom:1rem;
}
.tl__num{
  counter-increment:step;
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:14px;
  background:var(--blau);color:#fff;
  font-weight:800;font-size:1.05rem;
  margin-bottom:1rem;
}
.tl__num::before{content:counter(step)}
.tl h3{font-size:1.15rem;margin-bottom:.4rem}
.tl p{color:var(--grau);font-size:.95rem;margin-bottom:0}
/* Mitte des Nummernfelds: Innenabstand oben + Zeile .tl__dur + deren Abstand
   nach unten + halbe Hoehe des Nummernfelds (44px / 2). */
.tl::after{
  content:"";position:absolute;top:calc(1.6rem + .76rem + 1rem + 22px);right:-1.2rem;width:1.2rem;height:2px;
  background:var(--rand-2);
}
.tl:last-child::after{display:none}

/* --- Häkchenlisten -------------------------------------------------------- */
.checks{list-style:none;display:grid;gap:.85rem}
.checks--2{grid-template-columns:repeat(2,1fr)}
.checks li{position:relative;padding-left:2.1rem;color:var(--grau)}
.checks li::before{
  content:"";position:absolute;left:0;top:.2em;
  width:1.35rem;height:1.35rem;border-radius:50%;background:var(--tint-gruen);
}
.checks li::after{
  content:"";position:absolute;left:.44rem;top:.5em;
  width:.34rem;height:.62rem;
  border-right:2px solid #1c7a45;border-bottom:2px solid #1c7a45;
  transform:rotate(42deg);
}
.checks strong{color:var(--text)}
.dots{list-style:none;display:grid;gap:.55rem}
.dots li{position:relative;padding-left:1.15rem;color:var(--grau)}
.dots li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--blau);
}

/* --- Dunkle Karte (Verbindlichkeit / CTA) -------------------------------- */
.dark-card{
  background:var(--navy);color:rgba(255,255,255,.82);
  border-radius:var(--r-xl);
  padding:clamp(2.2rem,5vw,4.5rem);
  position:relative;overflow:hidden;
}
.dark-card::before{
  content:"";position:absolute;inset:auto -10% -40% auto;width:60%;height:80%;
  background:radial-gradient(closest-side,rgba(31,58,147,.55),transparent);
  pointer-events:none;
}
.dark-card::after{
  content:"";position:absolute;left:-10%;top:-30%;width:40%;height:60%;
  background:radial-gradient(closest-side,rgba(226,0,26,.28),transparent);
  pointer-events:none;
}
.dark-card > *{position:relative;z-index:1}
.dark-card h2,.dark-card h3{color:#fff}
.dark-card .section__head{margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.dark-card .lead{color:rgba(255,255,255,.72)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.tile{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-m);
  padding:1.4rem 1.3rem;
  transition:background-color .25s ease,transform .25s var(--ease);
}
.tile:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.tile__ic{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;margin-bottom:1rem;
}
.tile__ic .ic{width:20px;height:20px}
.tile h3{font-size:1.05rem;margin-bottom:.35rem}
.tile p{font-size:.92rem;margin:0;color:rgba(255,255,255,.7)}
.dark-card .small{color:rgba(255,255,255,.55)}

/* --- Kundenstimmen -------------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.quote{
  background:#fff;border:1px solid var(--rand);border-radius:var(--r-l);
  padding:1.8rem;display:flex;flex-direction:column;gap:1.2rem;
}
.quote blockquote{margin:0;font-size:1.08rem;font-weight:600;letter-spacing:-.01em;line-height:1.45}
.quote blockquote::before{content:"\201E"}
.quote blockquote::after{content:"\201C"}
.quote footer{display:flex;align-items:center;gap:.8rem;margin-top:auto;font-size:.9rem}
.quote footer strong{display:block}
.quote footer span{color:var(--grau)}

/* --- FAQ (Trennlinien-Stil) ---------------------------------------------- */
.faq-split{display:grid;grid-template-columns:.9fr 1.4fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.faq-split .section__head{margin-bottom:1.5rem}
.faq{border-top:1px solid var(--rand)}
.faq details{border-bottom:1px solid var(--rand)}
.faq summary{
  cursor:pointer;list-style:none;
  padding:1.35rem 3.2rem 1.35rem 0;
  font-weight:700;font-size:1.08rem;letter-spacing:-.01em;
  position:relative;color:var(--text);
  transition:color .18s ease;
}
.faq summary:hover{color:var(--blau)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:0;top:50%;translate:0 -50%;
  width:34px;height:34px;border-radius:50%;
  background:var(--tint-blau);
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:12px 2px,2px 12px;background-position:center;background-repeat:no-repeat;
  color:var(--blau);
  transition:transform .3s var(--ease),background-color .2s ease;
}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--blau);color:#fff}
.faq__body{padding:0 3.2rem 1.4rem 0;color:var(--grau)}
.faq__body p:last-child{margin-bottom:0}

/* --- Info-Box ------------------------------------------------------------- */
.box{
  background:var(--tint-blau-2);
  border-radius:var(--r-m);
  padding:1.5rem 1.7rem;
  border-left:4px solid var(--rot);
}
.box h3{margin-bottom:.5rem;font-size:1.1rem}
.box p{color:var(--grau)}
.box p:last-child{margin-bottom:0}

/* --- Formular ------------------------------------------------------------- */
.form-card{
  background:#fff;border:1px solid var(--rand);border-radius:var(--r-l);
  padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--schatten-m);
}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--voll{grid-column:1/-1}
.field label{font-weight:600;font-size:.92rem;color:var(--text)}
.field .hint{font-weight:400;color:var(--grau)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;
  padding:.8rem .95rem;
  border:1px solid var(--rand-2);border-radius:12px;
  background:#fff;color:var(--text);
  transition:border-color .15s ease,box-shadow .15s ease;
  width:100%;
}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6475' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.6rem;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blau);
  box-shadow:0 0 0 4px rgba(31,58,147,.12);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--rot);outline-offset:1px;
}
.field--check{grid-column:1/-1;flex-direction:row;align-items:flex-start;gap:.7rem}
.field--check input{width:1.2rem;height:1.2rem;margin-top:.3rem;flex:0 0 auto;accent-color:var(--rot)}
.field--check label{font-weight:400;font-size:.92rem;color:var(--grau);line-height:1.55}
.pflicht{color:var(--rot)}
.form-hinweis{font-size:.86rem;color:var(--grau);margin:1.2rem 0 0}

/* --- Footer (dunkel, oben abgerundet) ------------------------------------ */
.footer{
  position:relative;
  background:var(--navy);color:rgba(255,255,255,.72);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  /* Der Footer schiebt sich um seinen Eckradius ueber die Sektion davor.
     Dadurch scheint hinter den abgerundeten Ecken deren Hintergrund durch
     (hellgrau, weiss, getoent) statt immer Weiss, und es entsteht kein
     Spalt. Der Innenabstand oben gleicht die Ueberlappung wieder aus. */
  margin-top:calc(var(--r-xl) * -1);
  padding:calc(clamp(3.5rem,7vw,6rem) + var(--r-xl)) 0 1.8rem;
  overflow:hidden;
}
.footer::before{
  content:"";position:absolute;right:-15%;top:-20%;width:55%;height:70%;
  background:radial-gradient(closest-side,rgba(31,58,147,.5),transparent);pointer-events:none;
}
.footer::after{
  content:"";position:absolute;left:-10%;bottom:-30%;width:40%;height:60%;
  background:radial-gradient(closest-side,rgba(226,0,26,.22),transparent);pointer-events:none;
}
.footer .wrap{position:relative;z-index:1}
.footer__cta{
  text-align:center;max-width:46rem;margin:0 auto clamp(3rem,6vw,5rem);
}
.footer__cta h2{color:#fff;font-size:clamp(2.1rem,4.5vw,3.4rem)}
.footer__cta p{color:rgba(255,255,255,.72);font-size:1.1rem;max-width:36em;margin-inline:auto}
.footer__cta .btn-row{justify-content:center;margin-top:2rem}
.footer__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;
  padding-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid rgba(255,255,255,.12);
}
.footer h4{color:#fff;font-size:.92rem;margin-bottom:1rem;letter-spacing:.02em}
.footer ul{list-style:none;display:grid;gap:.55rem}
/* :not(.btn) haelt die Schaltflaechen im Footer heraus. Sonst wuerde diese
   Regel deren weisse Schrift auf 72 % abblassen und beim Ueberfahren der
   Umriss-Schaltflaeche weisse Schrift auf weissen Grund legen. */
.footer a:not(.btn){color:rgba(255,255,255,.72);font-size:.95rem;transition:color .15s ease}
.footer a:not(.btn):hover{color:#fff;text-decoration:none}
.footer__claim{font-size:.95rem;line-height:1.7;margin-bottom:0;max-width:30em}
/* Die weisse Kachel liegt dank des Ausschnitts oben eng um die Zeichnung. */
/* Auf dem dunklen Footer braucht die schwarze Zeichnung eine helle Kachel. */
.footer__logo{background:#fff;border-radius:14px;padding:.55rem .8rem;display:inline-block;margin-bottom:1.2rem}
.footer__logo img{height:58px;width:auto}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:2.6rem;padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  font-size:.86rem;color:rgba(255,255,255,.55);
}
.footer__bottom ul{display:flex;flex-wrap:wrap;gap:1.2rem}
.footer__bottom a{font-size:.86rem}

/* --- Rechtstexte ---------------------------------------------------------- */
.rechtstext{max-width:52rem}
.rechtstext h2{
  font-size:1.35rem;letter-spacing:-.015em;
  margin:2.4rem 0 .7rem;
  padding-top:1.6rem;
  border-top:1px solid var(--rand);
}
.rechtstext h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.rechtstext h3{font-size:1.08rem;margin:1.6rem 0 .5rem}
.rechtstext p,.rechtstext li{color:var(--grau)}
.rechtstext ul,.rechtstext ol{margin:0 0 1rem 1.2rem;padding-left:.6rem}
.rechtstext li{margin-bottom:.4rem}
.rechtstext ul{list-style:disc}
.rechtstext ol{list-style:decimal}
.rechtstext strong{color:var(--text)}
.rechtstext .box{margin:1.5rem 0}
.rechtstext dl{margin:0 0 1rem}
.rechtstext dt{font-weight:600;color:var(--text);margin-top:.8rem}
.rechtstext dd{margin:0;color:var(--grau)}
.stand{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--rand);
  font-size:.9rem;color:var(--grau);
}

/* --- Hilfsklassen --------------------------------------------------------- */
.mt-0{margin-top:0}
.mt-2{margin-top:1rem}
.mt-3{margin-top:2rem}
.mt-4{margin-top:3rem}
.mb-0{margin-bottom:0}
.text-center{text-align:center}
.stack > * + *{margin-top:1.25rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.split--breit{grid-template-columns:1.15fr .85fr}
.split--center{align-items:center}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --- Einblenden beim Scrollen -------------------------------------------- */
.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s ease,transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Zwischen 1100 und 1260 Pixel wird die Navigation schmaler gesetzt, sonst
   passt sie nicht neben das Logo. Darunter greift das Burger-Menue. */
@media (max-width:1260px){
  .nav__link,.nav__toggle{padding:.5rem .6rem;font-size:.9rem}
  .nav__cta .btn{padding:.25rem 1.1rem .25rem .3rem;min-height:46px}
  .nav__cta .btn__ic{width:32px;height:32px}
  .logo img{height:44px}
}

/* Unterhalb von 1200 Pixel ist der Bildrahmen so breit wie der Inhaltsbereich.
   Die Schwebekarten muessen dann nach innen ruecken, sonst schneidet der
   Hero-Bereich sie am Fensterrand ab. */
@media (max-width:1200px){
  .float--1{left:2%}
  .float--2{right:2%}
  .float--3{left:8%}
}

/* Die Desktop-Navigation braucht rund 1150 Pixel (schmale Variante). Der Wert muss mit der
   Konstanten MOBIL in js/main.js uebereinstimmen. */
@media (max-width:1160px){
  :root{--header-h:68px}
  .burger{display:inline-flex}
  .header__bar{padding:.4rem .5rem .4rem .8rem}
  .nav{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    display:none;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;
    border-radius:18px;
    box-shadow:var(--schatten-l),0 0 0 1px rgba(31,58,147,.06);
    padding:.6rem .8rem 1rem;
    max-height:calc(100vh - var(--header-h) - 40px);
    overflow-y:auto;
  }
  .nav.is-open{display:flex}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;margin:0}
  .nav__list > li{border-bottom:1px solid var(--rand)}
  .nav__list > li:last-child{border-bottom:0}
  .nav__link,.nav__toggle{
    display:flex;width:100%;padding:.95rem .5rem;font-size:1rem;border-radius:0;
  }
  .nav__link:hover,.nav__toggle:hover{background:none}
  .nav__link[aria-current="page"]::after{display:none}
  .nav__toggle{justify-content:space-between}
  .nav__drop{
    position:static;transform:none;
    opacity:1;visibility:visible;
    box-shadow:none;border-radius:0;
    min-width:0;padding:0 0 .6rem .5rem;
    display:none;
  }
  .nav__drop.is-open{display:block}
  .nav__item--drop:hover .nav__drop{display:none}
  .nav__item--drop:hover .nav__drop.is-open{display:block}
  .nav__cta{flex-direction:column;align-items:stretch;gap:.5rem;margin:.8rem 0 0}
  .nav__cta .nav__link{justify-content:center;border:1px solid var(--rand);border-radius:12px}
  .nav__cta .btn{width:100%}

  .hero__visual{margin-inline:auto}
  .float{display:none}
  .float--2{display:block;right:2%;top:auto;bottom:6%}
  .personas{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .compare{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr;gap:2rem}
  .feature--flip .feature__visual{order:0}
  .visual{min-height:0}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .tl::after{display:none}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
  .faq-split{grid-template-columns:1fr;gap:1.5rem}
  .split,.split--breit{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  body{font-size:1rem}
  .wrap{padding-inline:16px}
  .header{padding-top:10px}
  .logo img{height:42px}
  h1{font-size:clamp(2.1rem,9vw,2.8rem)}
  h2{font-size:clamp(1.7rem,7vw,2.3rem)}
  .hero .btn-row,.pagehead .btn-row,.footer__cta .btn-row{flex-direction:column;align-items:stretch}
  .hero .btn,.pagehead .btn,.footer__cta .btn{width:100%}
  .hero__frame img{aspect-ratio:4/3}
  .float--2{display:none}
  .personas{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr;gap:.7rem}
  .facts__item{padding:1rem}
  .facts__num{font-size:1.4rem}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .checks--2{grid-template-columns:1fr}
  .feature__points{grid-template-columns:1fr}
  .mock--offset,.mock--offset-l{margin-inline:0}
  .timeline{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column}
  .section--rund{border-radius:var(--r-l)}
  .dark-card{border-radius:var(--r-l)}
  .faq summary{font-size:1rem;padding-right:2.8rem}
  .faq__body{padding-right:0}
}

/* --- Druck ---------------------------------------------------------------- */
@media print{
  .header,.footer,.btn,.marquee,.float{display:none!important}
  body{color:#000}
  .hero,.pagehead{background:none;padding-top:1rem}
}