/* ============================================================
   AURORA PASTELL — weich und hell
   Ueberschriften: Inter Bold · Fliesstext: Inter Regular
   ============================================================ */
:root{
  --cream:#FEFBF6;
  --sand:#F6EBD8;
  --mint:#BCEBD6;
  --sky:#BEE4E8;
  --blush:#FBE2D3;
  --lime-pale:#DFEDB6;

  --green:#438770;          /* OnlineOrdner Gruen — primaerer Markenwert */
  --green-rgb:67,135,112;   /* Kanalwerte fuer rgba() */
  --ink-rgb:18,49,42;
  --green-deep:#0B5C43;   /* ≥4.5:1 auch über dem gesättigtsten Feld */
  --green-darker:#0B4B37;
  --brand-deep:#2F6552;   /* dunkle Variante von #438770 fuer Text auf Hell */
  --accent-mint:#5CA48C;  /* Akzent: Wort "Beratung" und CTA in der Kopfleiste */
  --accent-mint-dark:#4E8E78;
  --lime:#9EC12E;

  --ink:#12312A;          /* Überschriften */
  --ink-body:#33544A;     /* Fliesstext */
  --ink-soft:#3F5D53;     /* Meta — dunkel genug für Text ohne Panel */

  --panel:rgba(255,255,255,.80);
  --panel-solid:#FFFFFF;
  --panel-quiet:rgba(255,255,255,.62);
  --edge:rgba(255,255,255,.92);
  --edge-ink:rgba(var(--ink-rgb),.10);

  --r-xl:38px;
  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;

  --shadow-soft:0 2px 4px rgba(var(--ink-rgb),.03), 0 12px 28px -12px rgba(var(--ink-rgb),.10);
  --shadow-lift:0 4px 10px rgba(var(--ink-rgb),.04), 0 30px 60px -28px rgba(var(--ink-rgb),.20);

  --maxw:1280px;
  --pad:clamp(18px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* Traegt die Hintergrundebene, die sich ueber die volle Seitenlaenge spannt */
  position:relative;
  background:var(--cream);
  color:var(--ink-body);
  font-family:'Inter',ui-sans-serif,sans-serif;
  font-size:clamp(16px,.4vw + 15px,17.5px);
  line-height:1.68;
  letter-spacing:.001em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:'Inter',ui-sans-serif,sans-serif;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.018em;
  line-height:1.12;
  margin:0;
  text-wrap:balance;
}
p{margin:0}

/* ---------- Hintergrund ----------
   Eine einzige Ebene ueber die volle Seitenlaenge statt eigener Hintergruende
   je Sektion. Sehr grosse, stark transparente Lichtflaechen in den beiden
   Markengruenen, abwechselnd links und rechts, mit ruhigen Strecken dazwischen.
   Die Prozentwerte beziehen sich auf die Dokumenthoehe, die Flaechen liegen
   deshalb bewusst nicht auf den Grenzen einzelner Bereiche.
   Weil der Verlauf nach aussen auf Deckkraft 0 derselben Farbe laeuft und nicht
   auf "transparent", entstehen keine graustichigen Kanten. */
.aurora{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(min(1250px,150vw) 820px at  4%  3%, rgba(92,164,140,.11),  rgba(92,164,140,0) 66%),
    radial-gradient(min(1100px,140vw) 760px at 97% 12%, rgba(67,135,112,.075), rgba(67,135,112,0) 64%),
    radial-gradient(min(1200px,150vw) 800px at  2% 26%, rgba(92,164,140,.07),  rgba(92,164,140,0) 65%),
    radial-gradient(min(1100px,140vw) 780px at 99% 43%, rgba(67,135,112,.065), rgba(67,135,112,0) 64%),
    radial-gradient(min(1250px,150vw) 820px at  5% 62%, rgba(92,164,140,.06),  rgba(92,164,140,0) 65%),
    radial-gradient(min(1100px,140vw) 760px at 98% 79%, rgba(67,135,112,.055), rgba(67,135,112,0) 64%),
    radial-gradient(min(1200px,150vw) 800px at  6% 93%, rgba(92,164,140,.065), rgba(92,164,140,0) 65%);
}
/* Die frueheren Farbflaechen, das Rauschen und die Aufhellungsebene entfallen.
   Das Markup bleibt unveraendert, die Elemente werden nur nicht mehr gezeichnet. */
.aurora span{display:none}
.aurora-veil{display:none}
/* Auf kleinen Schirmen genuegen vier Flaechen */
@media (max-width:640px){
  .aurora{
    background-image:
      radial-gradient(150vw 620px at  6%  3%, rgba(92,164,140,.10),  rgba(92,164,140,0) 66%),
      radial-gradient(150vw 600px at 96% 26%, rgba(67,135,112,.06),  rgba(67,135,112,0) 64%),
      radial-gradient(150vw 620px at  4% 55%, rgba(92,164,140,.055), rgba(92,164,140,0) 65%),
      radial-gradient(150vw 600px at 96% 84%, rgba(67,135,112,.05),  rgba(67,135,112,0) 64%);
  }
}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(56px,7vw,104px)}
.eyebrow{
  font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-deep);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--lime))}
.sec-head{max-width:64ch;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.7rem);margin:.5em 0 .42em}
.sec-head p{font-size:clamp(1rem,.5vw + .9rem,1.13rem);color:var(--ink-body);max-width:58ch}

/* ---------- Glas ---------- */
.glass{
  background:var(--panel);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid var(--edge);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9);
  border-radius:var(--r-lg);
}
.plate{ /* ohne backdrop-filter — kostengünstig */
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.74));
  border:1px solid var(--edge);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9);
  border-radius:var(--r-lg);
}

/* ---------- Buttons ---------- */
.btn{
  font-family:'Inter',sans-serif;font-weight:500;font-size:.98rem;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.86em 1.5em;border-radius:18px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .25s;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(158deg,#17805C,var(--green-deep));
  color:#fff;box-shadow:0 8px 22px -10px rgba(15,107,79,.75), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(15,107,79,.8), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{background:rgba(255,255,255,.72);color:var(--green-darker);border-color:rgba(var(--ink-rgb),.12);box-shadow:var(--shadow-soft)}
.btn-ghost:hover{transform:translateY(-2px);background:#fff}
.btn-sm{padding:.62em 1.1em;font-size:.9rem}

/* ---------- Navigation ----------
   Heller Sticky-Header ueber die volle Breite, keine Pille.
   Logo links, Sprungnavigation mittig, Login und CTA rechts. */
.nav-outer{
  position:sticky;top:0;z-index:60;padding:0;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid rgba(var(--ink-rgb),.08);
  transition:box-shadow .25s;
}
/* beim Scrollen minimal kompakter und mit einer Spur Schatten */
.nav-outer.is-stuck{box-shadow:0 1px 10px -6px rgba(var(--ink-rgb),.30)}
.nav{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(14px,1.8vw,30px);
  padding-inline:var(--pad);
  height:76px;
  background:none;border:0;border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:height .25s;
}
.nav-outer.is-stuck .nav{height:64px}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.nav-logo img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.5vw,28px);min-width:0}
.nav-links > a{
  font-family:'Inter',sans-serif;font-size:.94rem;font-weight:500;color:var(--ink-body);
  text-decoration:none;padding:.5em .1em;background:none;border:0;border-radius:0;white-space:nowrap;
  position:relative;transition:color .2s;
}
.nav-links > a:hover{color:var(--green)}
/* aktiver Abschnitt: nur Farbe und eine feine Linie, keine Pille */
.nav-links > a[aria-current]{color:var(--green)}
.nav-links > a[aria-current]::after{
  content:"";position:absolute;left:.1em;right:.1em;bottom:.05em;
  height:2px;border-radius:2px;background:var(--green);
}
/* enger Abstand, damit Login und CTA als ein Aktionsbereich gelesen werden */
.nav-actions{display:flex;align-items:center;gap:clamp(7px,.7vw,12px);justify-self:end}
.nav-login{
  font-family:'Inter',sans-serif;font-size:.94rem;font-weight:500;color:var(--ink-body);
  text-decoration:none;padding:.5em .2em;white-space:nowrap;transition:color .2s;
}
.nav-login:hover{color:var(--green)}
/* Rundung kommt jetzt einheitlich aus .btn; der CTA ist der einzige starke Akzent */
.nav .btn-primary{background:var(--accent-mint);color:#fff;box-shadow:none}
.nav .btn-primary:hover{background:var(--accent-mint-dark);transform:none;box-shadow:none}
/* Sprungziele nicht unter den Sticky-Header laufen lassen */
main section[id],main [id]{scroll-margin-top:92px}
.nav-drop{position:relative}
.nav-drop>button::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.nav-drop[data-open="true"]>button::after{transform:rotate(-135deg) translateY(-1px)}
.drop-panel{
  position:absolute;top:calc(100% + 12px);left:0;right:auto;width:min(560px,calc(100vw - 48px));
  padding:16px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--edge);box-shadow:var(--shadow-lift);
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.28s cubic-bezier(.2,.8,.3,1);
}
.nav-drop[data-open="true"] .drop-panel{opacity:1;visibility:visible;transform:none}
.drop-panel a{display:block;white-space:normal;padding:11px 13px;border-radius:var(--r-sm);text-decoration:none}
.drop-panel a:hover{background:rgba(var(--green-rgb),.09)}
.drop-panel strong{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.95rem;color:var(--ink)}
.drop-panel span{display:block;font-size:.82rem;line-height:1.45;color:var(--ink-soft);margin-top:2px}
.nav-links a.nav-login-alt{display:none}
.nav-tel{font-family:'Inter',sans-serif;font-size:.92rem;color:var(--green-darker);text-decoration:none;padding:.5em .7em;border-radius:999px;white-space:nowrap}
.nav-tel:hover{background:rgba(var(--green-rgb),.10)}
.burger{display:none;margin-left:auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--edge-ink);background:rgba(255,255,255,.7);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger i{display:block;width:16px;height:1.8px;border-radius:2px;background:var(--ink);transition:.25s}
.mobile-menu{display:none}

/* ---------- Hero ---------- */
/* Kein eigener Hintergrund mehr — der Kopfbereich liegt transparent auf der
   gemeinsamen Hintergrundebene der Seite. */
.hero{
  padding-top:clamp(40px,4.4vw,72px);padding-bottom:clamp(22px,2.4vw,34px);
}
/* Grundstellung bis 1199px: einspaltig, Screenshot unter dem Text.
   Ab 1200px zweigeteilt, siehe weiter unten. */
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.2vw,42px);align-items:start}
.badge{
  display:inline-flex;align-items:center;gap:.6em;padding:.5em 1em .5em .6em;border-radius:999px;
  background:rgba(255,255,255,.88);border:1px solid rgba(var(--green-rgb),.22);box-shadow:none;
  font-size:.85rem;color:var(--brand-deep);font-weight:600;
}
.badge b{display:inline-flex;align-items:center;justify-content:center;padding:.25em .7em;border-radius:999px;background:rgba(var(--green-rgb),.13);color:var(--brand-deep);font-size:.78rem;font-weight:700;letter-spacing:.02em}
/* Der Zeilenumbruch nach "Beratung." steckt als <br class="h1-br"> im Markup.
   Die Schriftgroesse ist so gedeckelt, dass die laengere der beiden Zeilen
   ("Weniger Zeit im System.", 23 Zeichen) auf Desktop nicht nochmals umbricht. */
h1{font-size:clamp(2.1rem,3.15vw,3.1rem);max-width:none;font-weight:700;letter-spacing:-.032em;line-height:1.1;margin:.4em 0 0;text-wrap:normal}
h1 em{font-style:normal;font-weight:700;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--accent-mint)}
.hero-sub{margin-top:.85em;font-size:clamp(1.02rem,.6vw + .92rem,1.2rem);max-width:58ch;color:var(--ink-body)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.5em}
.hero-note{display:flex;flex-wrap:wrap;gap:.5em 1.4em;margin-top:1.1em;font-size:.9rem;color:var(--ink-soft)}
.hero-note span{display:inline-flex;align-items:center;gap:.45em}

/* Vertikale Hierarchie im linken Block: der Hinweis sitzt als kurze Einleitung
   dicht an der Ueberschrift, danach mittel, vor den Buttons am groessten,
   davor wieder mittel. */
.hero .badge{padding:.36em .85em .36em .48em;font-size:.82rem}
.hero h1{margin-top:clamp(8px,.9vw,15px)}          /* klein  */
.hero .hero-sub{margin-top:clamp(16px,1.7vw,28px)} /* mittel */
.hero .hero-cta{margin-top:clamp(24px,2.6vw,44px)} /* gross  */
.hero .hero-note{margin-top:clamp(16px,1.7vw,28px)}/* mittel */
/* ruhigeres Satzbild: kuerzere Zeilen und etwas engere Zeilenhoehe */
.hero .hero-sub{max-width:42ch;line-height:1.6}
.tick{width:18px;height:18px;border-radius:50%;background:linear-gradient(140deg,var(--mint),#DCEFDF);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.tick svg{width:10px;height:10px;stroke:var(--green-deep);stroke-width:2.6;fill:none}
/* im Kopfbereich ruhiger: einfarbige Markenflaeche statt Verlauf */
.hero .tick{background:rgba(var(--green-rgb),.15)}
.hero .tick svg{stroke:var(--brand-deep)}

.hero-visual{position:relative}

/* Kein Rahmen und keine Aufhellung — nur dezente Rundung und ein sehr
   zurueckhaltender Schatten. Das Bild bleibt in Farbe und Kontrast unveraendert. */
.shot-frame{
  padding:0;border-radius:16px;overflow:hidden;
  background:none;border:1px solid rgba(var(--ink-rgb),.07);
  box-shadow:0 18px 40px -28px rgba(var(--ink-rgb),.28);
}
.shot-frame img{border-radius:0;width:100%;height:auto;background:#EFF6F2}

.hero-visual{max-width:1250px;margin-inline:auto;width:100%}

/* ---------- Kopfbereich ab 1200: Text links, Screenshot rechts ----------
   Der Screenshot laeuft ueber die rechte Containerkante bis kurz vor den
   Bildschirmrand. Dadurch bleibt links genug Platz fuer die zweizeilige
   Ueberschrift, waehrend das Bild rechts grosszuegig Raum bekommt:
   rund 920 px auf grossen Schirmen, ~730 px bei 1440 px Fensterbreite. */
@media (min-width:1200px){
  /* Der Kopfbereich fuellt die Bildschirmhoehe abzueglich der Kopfleiste und
     sitzt darin vertikal mittig. Dadurch entsteht oben ein grosszuegiger
     Abstand zur Navigation und die Kennzahlenleiste schliesst spaetestens
     am unteren Bildschirmrand ab. */
  .hero{
    min-height:calc(100vh - 76px);
    min-height:calc(100svh - 76px);
    display:flex;align-items:center;
    /* oben und unten gleich, sonst sitzt der Inhalt nicht wirklich mittig */
    padding-block:clamp(36px,3.4vw,60px);
  }
  .hero > .wrap{width:100%}
  .hero-grid{
    grid-template-columns:minmax(0,clamp(460px,37.5vw,580px)) minmax(0,1fr);
    gap:clamp(26px,2.6vw,44px);
    /* Der linke Block und das Bild stehen als Ganzes mittig zueinander.
       Das jeweils hoehere Element gibt die Zeilenhoehe vor, das andere
       zentriert sich darin. */
    align-items:center;
  }
  .hero-visual{
    /* width:auto ist noetig, damit die negative Aussenkante das Bild
       tatsaechlich verbreitert und nicht nur verschiebt */
    max-width:950px;width:auto;margin-inline:0;
    /* Die rechte Kante loest sich ueber die letzten rund 38 Prozent der
       Bildbreite auf. Die Rampe faellt bewusst flach an und wird erst im
       letzten Fuenftel deutlich: bis 80 Prozent der Breite liegt die Deckkraft
       noch bei 78 Prozent, die Mitte und die linke Haelfte bleiben unberuehrt.
       Keine Unschaerfe. */
    --shot-fade:linear-gradient(90deg,#000 0 62%,rgba(0,0,0,.94) 72%,rgba(0,0,0,.78) 80%,rgba(0,0,0,.52) 88%,rgba(0,0,0,.24) 95%,transparent 100%);
    /* Eine Maske beschneidet alles ausserhalb der Rahmenbox, der weiche
       Schatten kann hier also ohnehin nicht mehr gezeichnet werden
       (mask-clip:no-clip wird zwar berechnet, aber nicht umgesetzt).
       Statt einer wirkungslosen Deklaration entfaellt er hier bewusst —
       die weich auslaufende Kante uebernimmt die Ablosung vom Hintergrund. */
    -webkit-mask-image:var(--shot-fade);
    mask-image:var(--shot-fade);
    /* kein eigener Oberrand mehr — sonst waere die Mitte des Bildes gegenueber
       der Mitte des Textblocks um den halben Rand verschoben */
    margin-top:0;
    margin-right:calc(-1 * ((100vw - min(100vw,var(--maxw))) / 2 + var(--pad) - 16px));
  }
  .shot-frame{box-shadow:none}
}

/* ---------- Kennzahlen: kompakte Trust-Leiste ---------- */
.kpis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(22px,2.4vw,32px);
  border-top:1px solid rgba(var(--ink-rgb),.11);
  border-bottom:1px solid rgba(var(--ink-rgb),.11);
}
.kpi{
  padding:clamp(14px,1.5vw,18px) clamp(14px,1.7vw,26px);
  text-align:left;border-radius:0;
  border-left:1px solid rgba(var(--ink-rgb),.09);
}
.kpi:first-child{border-left:0;padding-left:0}
.kpi .n{font-family:'Inter',sans-serif;font-size:clamp(1.2rem,1.5vw,1.5rem);font-weight:600;color:var(--accent-mint);letter-spacing:-.025em;line-height:1.1}
.kpi .l{margin-top:.3em;font-size:.86rem;color:var(--ink-soft);line-height:1.42}

/* ---------- Arbeitsbereiche ----------
   Editorialer Kopf: Ueberschrift links, Einleitung rechts daneben.
   Darunter vier Spalten auf einer gemeinsamen ruhigen Flaeche, getrennt
   nur durch feine Linien — bewusst keine einzelnen Karten. */
/* Kein eigener Hintergrund — liegt transparent auf der Hintergrundebene */
.areas{padding-block:clamp(46px,5.4vw,84px)}
.areas-head{
  display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,22px);
  margin-bottom:clamp(28px,3.4vw,48px);
}
.areas-head h2{font-size:clamp(1.7rem,2.9vw,2.5rem);letter-spacing:-.03em;max-width:16ch;margin-top:.5em}
.areas-head p{font-size:clamp(1rem,.5vw + .9rem,1.1rem);color:var(--ink-body);max-width:52ch;line-height:1.6}

.areas-grid{
  display:grid;grid-template-columns:1fr;
  border-top:1px solid rgba(var(--ink-rgb),.11);
  border-bottom:1px solid rgba(var(--ink-rgb),.11);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.30));
}
.area{padding:clamp(28px,2.8vw,38px) clamp(18px,1.8vw,26px)}
.area-top{display:flex;align-items:center;gap:.75em;margin-bottom:1.05em}
.area-ic svg{
  width:22px;height:22px;display:block;fill:none;
  stroke:var(--ink-soft);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .25s;
}
.area-num{
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:.10em;color:var(--accent-mint);
}
.area h3{font-size:clamp(1.02rem,1.05vw,1.16rem);font-weight:700;line-height:1.3;letter-spacing:-.015em}
.area p{margin-top:.6em;font-size:.92rem;line-height:1.6;color:var(--ink-soft)}

/* Mobil: untereinander, waagrechte Linie zwischen den Bereichen */
@media (max-width:639.98px){
  .area + .area{border-top:1px solid rgba(var(--ink-rgb),.09)}
}
/* Tablet: zwei mal zwei, Trennlinie senkrecht in der Mitte und waagrecht
   zwischen den Zeilen. Der Bereich ist bewusst nach oben abgegrenzt, sonst
   wuerden die nth-child-Regeln die Vierspalter-Regeln ueberstimmen. */
@media (min-width:640px) and (max-width:999.98px){
  .areas-grid{grid-template-columns:1fr 1fr}
  .area:nth-child(even){border-left:1px solid rgba(var(--ink-rgb),.09)}
  .area:nth-child(n+3){border-top:1px solid rgba(var(--ink-rgb),.09)}
}
/* Grosser Desktop: vier gleich breite Spalten, nur senkrechte Linien */
@media (min-width:1000px){
  .areas-grid{grid-template-columns:repeat(4,1fr)}
  .area{border-left:1px solid rgba(var(--ink-rgb),.09)}
  .area:first-child{border-left:0}
  .areas-head{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    align-items:end;gap:clamp(30px,4vw,72px);
  }
  .areas-head p{padding-bottom:.35em}
}
/* Sehr zurueckhaltender Hover, nur wo es einen echten Zeiger gibt.
   Bewegt werden nur die Inhalte, nicht die Zelle selbst — sonst wuerden
   die Trennlinien mitwandern und die gemeinsame Flaeche aufreissen. */
@media (min-width:1000px) and (hover:hover){
  .area{transition:background-color .25s}
  .area > *{transition:transform .25s cubic-bezier(.2,.8,.3,1)}
  .area:hover{background-color:rgba(var(--green-rgb),.055)}
  .area:hover > *{transform:translateY(-2px)}
  .area:hover .area-ic svg{stroke:var(--green)}
}

/* ---------- Leistungsstarke Funktionen ----------
   Zwei Ebenen in einer Sektion: oben vier grosse Funktionsbereiche mit echten
   Screenshots, darunter der vollstaendige Funktionsumfang nach Themen. */
.feat{padding-block:clamp(46px,5.4vw,84px)}

.feat-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,28px)}
.feat-card{
  display:flex;flex-direction:column;
  border:1px solid rgba(var(--ink-rgb),.09);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  box-shadow:none;overflow:hidden;
}
.feat-text{padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px) clamp(16px,1.8vw,22px)}
.feat-ic{display:block;margin-bottom:.95em}
.feat-ic svg{
  width:22px;height:22px;display:block;fill:none;
  stroke:var(--green);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.feat-card h3{font-size:clamp(1.12rem,1.35vw,1.35rem);font-weight:700;letter-spacing:-.02em;line-height:1.25}
.feat-text p{margin-top:.6em;font-size:.94rem;line-height:1.6;color:var(--ink-soft)}
/* Der Screenshot nimmt den unteren, groesseren Teil der Flaeche ein.
   Beschnitten wird ausschliesslich der sichtbare Ausschnitt, das Bild selbst
   bleibt unveraendert. */
.feat-shot{
  /* margin-top:auto haelt die Aufnahme am unteren Kartenrand, auch wenn die
     Nachbarkarte in derselben Reihe mehr Text hat */
  margin:auto clamp(20px,2.2vw,30px) clamp(20px,2.2vw,30px);
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(var(--ink-rgb),.07);
  background:#EFF6F2;
}
.feat-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* Einheitliches Bildfenster fuer alle vier Aufnahmen: gleiches Format,
   gleiche Rahmung, gleicher Ausschnitt aus der Mitte. Die Aufnahmen liegen
   zwischen 1.78 und 2.07, der Beschnitt bleibt dadurch gering. */
.feat-shot{aspect-ratio:2/1}
.feat-shot img{object-position:center center}
@media (min-width:900px){
  .feat-grid{grid-template-columns:1fr 1fr}
}

/* ---------- Vollstaendiger Funktionsumfang ----------
   Kompaktes Verzeichnis, keine Einzelkarten je Funktion. Die Themenbereiche
   sitzen auf einer gemeinsamen Flaeche und werden nur durch feine Linien
   getrennt, passend zu den Arbeitsbereichen weiter oben. */
/* Ein gemeinsamer Container fuer den gesamten Ueberblick, stilistisch an die
   grossen Funktionskarten darueber angelehnt. Innen bleibt die reduzierte
   Linienstruktur, es entstehen keine Einzelkarten je Thema oder Funktion. */
.fcat-grid{
  display:grid;grid-template-columns:1fr;
  margin-top:clamp(28px,3.2vw,50px);
  padding:clamp(14px,1.6vw,24px);
  border:1px solid rgba(var(--ink-rgb),.09);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  box-shadow:none;
}
.fcat,.fcat-intro{padding:clamp(22px,2.2vw,30px) clamp(16px,1.7vw,26px)}
/* Der Einleitungsteil sitzt als erste Zelle im Raster und traegt bewusst
   keine eigene Flaeche, keine Kontur und keinen Schatten. Er ist eine
   untergeordnete Ebene, seine Ueberschrift daher deutlich kleiner als die
   Hauptueberschrift der Sektion. */
.fcat-intro{background:none;border:0}
/* Ueberschrift und Text duerfen die volle Breite des Einleitungsfeldes
   nutzen, damit die Zeile ruhiger laeuft und weniger umbricht. */
.fcat-intro h3{
  font-size:clamp(1.15rem,1.5vw,1.5rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.28;margin-top:.6em;max-width:none;
}
.fcat-intro p{margin-top:.7em;font-size:.92rem;line-height:1.6;color:var(--ink-soft);max-width:46ch}
.fcat-ic{display:block;margin-bottom:.85em}
.fcat-ic svg{
  width:20px;height:20px;display:block;fill:none;
  stroke:var(--accent-mint);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .25s;
}
.fcat h4{font-size:1rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.fcat ul{list-style:none;margin:.9em 0 0;padding:0}
.fcat li{border-top:1px solid rgba(var(--ink-rgb),.075)}
.fcat li:first-child{border-top:0}

/* ---------- Funktionen zum Aufklappen ----------
   Semantisch details/summary: mehrere koennen gleichzeitig offen bleiben,
   das Oeffnen schliesst nichts anderes, und es funktioniert ohne JavaScript.
   Die Beschreibungen stehen vollstaendig im HTML. */
/* Der gesamte Eintrag ist eine zusammenhaengende Flaeche: die Zusammenfassung
   spannt die volle Spaltenbreite, der geoeffnete Text schliesst per Klick
   wieder (siehe oo-landing.js). */
.fcat details{cursor:pointer}
.fcat summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:.7em;
  padding:.5em 0;
  font-size:.9rem;line-height:1.45;color:var(--ink-body);
  list-style:none;transition:color .2s,font-weight .2s;
}
.fcat summary::-webkit-details-marker{display:none}
.fcat summary::marker{content:""}
/* Chevron als reine Rahmenform, dreht sich beim Oeffnen */
.fcat summary::after{
  content:"";flex:0 0 auto;width:6px;height:6px;margin-top:.42em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.45;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .2s;
}
.fcat details[open] > summary::after{transform:rotate(-135deg);opacity:.9}
.fcat li:hover summary{color:var(--brand-deep)}
.fcat li:hover summary::after{opacity:.7}
.fcat summary:focus-visible{outline:2px solid rgba(var(--green-rgb),.55);outline-offset:2px;border-radius:3px}
/* Aktiver Zustand ohne Flaeche: nur Schrift, Chevron und eine feine
   Akzentlinie links am aufgeklappten Text. */
.fcat details[open] > summary{color:var(--green);font-weight:600}
.fcat details > p{
  margin:0 0 .7em;padding:.15em 1.4em .05em .85em;
  border-left:1.5px solid rgba(92,164,140,.5);
  font-size:.84rem;line-height:1.5;color:var(--ink-soft);
}
/* Weiches Auf- und Zuklappen. Wo ::details-content noch nicht unterstuetzt
   wird, faellt die Regel weg und der Inhalt erscheint ohne Uebergang. */
@media (prefers-reduced-motion:no-preference){
  .fcat details{interpolate-size:allow-keywords}
  .fcat details::details-content{
    block-size:0;overflow:hidden;opacity:0;
    transition:block-size .28s cubic-bezier(.2,.8,.3,1),opacity .22s ease,
               content-visibility .28s allow-discrete;
  }
  .fcat details[open]::details-content{block-size:auto;opacity:1}
}
/* Sehr zurueckhaltender Hover: nur eine leichte Toenung, das Icon wechselt
   vom helleren auf das primaere Gruen. Keine Bewegung, kein Schatten. */
@media (hover:hover){
  .fcat{transition:background-color .25s}
  .fcat:hover{background-color:rgba(var(--green-rgb),.045)}
  .fcat:hover .fcat-ic svg{stroke:var(--green)}
}
/* Mobil: alles untereinander, waagrechte Trennung */
@media (max-width:639.98px){
  .fcat-grid > * + *{border-top:1px solid rgba(var(--ink-rgb),.09)}
}
/* Tablet: zwei Spalten, der Einleitungsteil nimmt die erste Reihe ein */
@media (min-width:640px) and (max-width:1049.98px){
  .fcat-grid{grid-template-columns:1fr 1fr}
  .fcat-intro{grid-column:span 2}
  .fcat-grid > :nth-child(odd):not(:first-child){border-left:1px solid rgba(var(--ink-rgb),.09)}
  .fcat-grid > :nth-child(n+2){border-top:1px solid rgba(var(--ink-rgb),.09)}
}
/* Desktop: vier Spalten. Reihe 1 = Einleitung ueber zwei Spalten plus zwei
   Themenbereiche, Reihe 2 = vier gleichwertige Themenbereiche. */
@media (min-width:1050px){
  .fcat-grid{grid-template-columns:repeat(4,1fr)}
  /* Das Einleitungsfeld reicht etwas weiter nach rechts, indem sein rechter
     Innenabstand kleiner ist als der der Themenbereiche. Die vier Spalten
     bleiben dadurch gleich breit und die zweite Reihe gleichmaessig. */
  .fcat-intro{grid-column:span 2;padding-right:clamp(28px,3vw,52px)}
  .fcat-grid > :not(:nth-child(1)):not(:nth-child(4)){border-left:1px solid rgba(var(--ink-rgb),.09)}
  .fcat-grid > :nth-child(n+4){border-top:1px solid rgba(var(--ink-rgb),.09)}
}

/* ---------- Warum / Säulen ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.pillar{padding:clamp(22px,2.4vw,32px);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:.9em;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.pillar h3{font-size:1.2rem;font-weight:500}
.pillar p{font-size:.96rem;color:var(--ink-body)}
.p-icon{width:56px;height:56px;border-radius:20px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px -10px rgba(var(--ink-rgb),.4)}
.p-icon img{width:30px;height:30px;object-fit:contain}
.p1{background:linear-gradient(150deg,#CFEEDF,#E8F6EC)}
.p2{background:linear-gradient(150deg,#CFE8EE,#E9F4F6)}
.p3{background:linear-gradient(150deg,#F4E8D2,#FBF3E6)}

.warum-strip{margin-top:clamp(18px,2.4vw,28px);display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(14px,1.8vw,24px);align-items:stretch}
.warum-shot{padding:10px;border-radius:var(--r-lg);overflow:hidden}
.warum-shot img{border-radius:calc(var(--r-lg) - 11px);width:100%;height:100%;object-fit:cover;object-position:top left;background:#EFF6F2}
.warum-quote{padding:clamp(22px,2.4vw,34px);border-radius:var(--r-lg);display:flex;flex-direction:column;justify-content:center;gap:1em}
.warum-quote p{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.4;color:var(--ink);letter-spacing:-.015em}
.warum-quote .who{font-size:.86rem;color:var(--ink-soft);font-family:'Inter',sans-serif}

/* ---------- Module ---------- */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.module{padding:clamp(18px,2vw,26px);border-radius:var(--r-lg);display:flex;gap:14px;align-items:flex-start;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.module:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.m-icon{width:46px;height:46px;border-radius:16px;background:#fff;border:1px solid rgba(var(--ink-rgb),.09);display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 4px 12px -8px rgba(var(--ink-rgb),.5)}
.m-icon img{width:26px;height:26px;object-fit:contain}
.module h3{font-size:1.03rem;font-weight:500;margin-bottom:.25em}
.module p{font-size:.9rem;color:var(--ink-soft);line-height:1.5}

/* ---------- Funktionen (Wechselzeilen) ---------- */
.frow{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(22px,3.2vw,54px);align-items:center;margin-top:clamp(30px,4vw,58px)}
.frow:nth-child(even) .frow-text{order:2}
.frow-shot{padding:10px;border-radius:var(--r-xl)}
.frow-shot img{border-radius:calc(var(--r-xl) - 11px);width:100%;height:auto;background:#EFF6F2}
.frow h3{font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:500;margin:.55em 0 .5em}
.frow p{font-size:1rem;color:var(--ink-body);max-width:48ch}
.frow-shot.is-stack{display:grid;gap:10px}
.frow-shot.is-stack img{border-radius:calc(var(--r-xl) - 14px);border:1px solid rgba(var(--ink-rgb),.07)}
.chiplist{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.4em}
.chip{font-size:.83rem;padding:.42em .9em;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid rgba(var(--ink-rgb),.09);color:var(--ink-body);box-shadow:0 2px 6px -4px rgba(var(--ink-rgb),.4)}

/* ---------- KI ---------- */
.ki-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);align-items:start}
.ki-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,16px)}
.ki-card{padding:clamp(18px,2vw,24px);border-radius:var(--r-md)}
.ki-card.is-wide{grid-column:1/-1}
.ki-card h3{font-size:1rem;font-weight:500;margin-bottom:.4em;display:flex;align-items:center;gap:.55em}
.ki-card p{font-size:.89rem;color:var(--ink-soft);line-height:1.5}
.ki-dot{width:26px;height:26px;border-radius:9px;background:linear-gradient(140deg,var(--mint),var(--sky));display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;color:var(--green-darker)}
.ki-list{list-style:none;padding:0;margin:1em 0 0;display:grid;gap:8px}
.ki-list li{position:relative;padding-left:1.5em;font-size:.89rem;color:var(--ink-soft);line-height:1.5}
.ki-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(140deg,var(--green),var(--lime))}
.ki-list b{font-weight:600;color:var(--ink)}
.ki-card .chiplist{margin-top:1em}
.ki-shot{padding:10px;border-radius:var(--r-xl);position:sticky;top:96px}
.ki-shot img{border-radius:calc(var(--r-xl) - 11px);width:100%;height:auto;background:#EFF6F2}




/* ---------- Themenraeume (Vernetzt, Variante B) ---------- */
.zonemap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,250px) minmax(0,1fr);
  gap:clamp(16px,2.6vw,38px);align-items:center;margin-top:clamp(14px,2vw,24px)}
.zn-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.zn-col{display:grid;gap:clamp(12px,1.6vw,18px);position:relative;z-index:1}
.zone{position:relative;padding:clamp(16px,1.9vw,23px);border-radius:var(--r-lg);
  background:var(--zbg);border:1.5px dashed var(--zbd);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.zone:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.zn-head{display:flex;align-items:center;gap:13px;margin-bottom:.9em}
.zn-ic{width:48px;height:48px;border-radius:16px;background:#fff;border:1px solid var(--zbd);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -10px rgba(var(--ink-rgb),.65)}
.zn-ic svg{width:24px;height:24px;stroke:var(--green-darker);stroke-width:1.75;fill:none}
.zn-head b{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(1.06rem,1.5vw,1.32rem);
  color:var(--ink);letter-spacing:-.022em;line-height:1.15}
.zn-items{display:flex;flex-wrap:wrap;gap:7px}
.zn-items span{font-size:.85rem;line-height:1.35;color:var(--ink-body);padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.88);border:1px solid rgba(var(--ink-rgb),.08)}
.zn-core{position:relative;z-index:2;justify-self:center;text-align:center;width:100%;
  padding:clamp(24px,2.8vw,36px) 22px;border-radius:30px;background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--edge);box-shadow:var(--shadow-lift)}
.zn-core::before{content:;position:absolute;inset:-14px;border-radius:44px;border:1px dashed rgba(var(--green-rgb),.30);pointer-events:none}
.zn-core img{width:min(100%,200px);height:auto;margin:0 auto}
.zn-core span{display:block;font-size:.84rem;color:var(--ink-soft);margin-top:.85em;line-height:1.45}
.z1{--zbg:rgba(188,235,214,.30);--zbd:rgba(var(--green-rgb),.34)}
.z2{--zbg:rgba(223,237,182,.32);--zbd:rgba(158,193,46,.46)}
.z3{--zbg:rgba(246,235,216,.40);--zbd:rgba(224,160,90,.42)}
.z4{--zbg:rgba(190,228,232,.32);--zbd:rgba(57,169,180,.38)}
.z5{--zbg:rgba(214,226,220,.46);--zbd:rgba(90,130,115,.32)}
.z6{--zbg:rgba(222,217,242,.32);--zbd:rgba(142,123,192,.38)}
.z7{--zbg:rgba(203,222,240,.34);--zbd:rgba(90,140,190,.36);grid-column:1/-1;margin-top:clamp(6px,1vw,12px);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,2.4vw,32px)}
.z7 .zn-head{margin-bottom:0;flex:0 0 auto}
.z7 .zn-items{flex:1 1 340px}
.z7 .zn-repl{flex:1 1 100%;margin-top:.2em}


/* "entfaellt"-Markierung in den Themenraeumen */
.zn-repl{display:flex;align-items:center;gap:14px;margin-top:1.05em;padding:12px 15px;border-radius:var(--r-md);
  background:rgba(255,255,255,.78);border:1px solid rgba(var(--ink-rgb),.11)}
.zr-tile{position:relative;width:54px;height:54px;flex:0 0 auto;border-radius:16px;
  display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid rgba(var(--ink-rgb),.10);box-shadow:0 5px 14px -9px rgba(var(--ink-rgb),.7)}
.zr-tile img{width:34px;height:34px;object-fit:contain;filter:grayscale(.25)}
/* generischer Ersatz statt Fremdlogo */
.zr-tile.is-generisch svg{width:30px;height:30px;stroke:var(--ink-soft);stroke-width:1.7;fill:none;display:block}
.zr-tile::after{content:"";position:absolute;left:-5px;right:-5px;top:50%;height:2.6px;margin-top:-1.3px;
  border-radius:3px;background:rgba(193,84,62,.88);transform:rotate(-32deg);
  box-shadow:0 0 0 1.6px rgba(255,255,255,.92)}
.zr-txt{min-width:0}
.zr-txt b{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:1.02rem;color:var(--ink);
  line-height:1.25;text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:rgba(193,84,62,.75)}
.zr-txt > span{display:block;font-size:.84rem;color:var(--ink-soft);line-height:1.4;margin-top:.2em}



/* ---------- Kundenportal: Webplattform + App ---------- */
.pv{margin:0 0 clamp(18px,2.4vw,30px);position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,220px);gap:clamp(14px,2vw,26px);align-items:end}
.pv-web{padding:10px;border-radius:var(--r-xl);background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--edge);box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.95)}
.pv-web img{width:100%;height:auto;border-radius:calc(var(--r-xl) - 11px);background:#EFF6F2;display:block}
/* Das PNG bringt den Geraeterahmen selbst mit und hat transparente Ecken:
   kein eigener Rahmen, keine Hintergrundfarbe — Schatten per drop-shadow der Silhouette folgen lassen. */
.pv-app{padding:0;border:0;background:none;border-radius:0;
  filter:drop-shadow(0 16px 30px rgba(var(--ink-rgb),.26)) drop-shadow(0 3px 8px rgba(var(--ink-rgb),.12))}
.pv-app img{width:100%;height:auto;display:block;background:none}
.pv-cap{grid-column:1/-1;margin-top:.2em;font-size:.85rem;color:var(--ink-soft);line-height:1.5;max-width:82ch}
.pv-cap b{font-family:'Inter',sans-serif;font-weight:600;color:var(--green-deep)}
/* Piktogramme statt PNG-Icons in den Saeulen */
.pillar .p-icon svg{width:26px;height:26px;stroke:var(--green-darker);stroke-width:1.7;fill:none;display:block}


/* ---------- Formulare, Schulungen, Kontakt ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.5vw,16px)}
.fld{display:flex;flex-direction:column;gap:.4em;min-width:0}
.fld.is-wide{grid-column:1/-1}
.fld > span{font-family:'Inter',sans-serif;font-size:.85rem;font-weight:500;color:var(--ink)}
.fld > span i{font-style:normal;color:var(--green)}
.fld input,.fld select,.fld textarea{
  width:100%;padding:11px 14px;border-radius:12px;font:inherit;font-size:.93rem;color:var(--ink);
  background:#fff;border:1px solid rgba(var(--ink-rgb),.14);
  transition:border-color .2s,box-shadow .2s;
}
.fld textarea{resize:vertical;min-height:120px;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:rgba(var(--green-rgb),.55);box-shadow:0 0 0 3px rgba(var(--green-rgb),.16)}
.fld input::placeholder,.fld textarea::placeholder{color:#9AAEA6}
.form-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(14px,1.8vw,20px)}
.form-hinweis{font-size:.87rem;color:var(--ink-soft);line-height:1.45;margin:0;min-height:1.4em}
.form-hinweis.is-ok{color:var(--green-deep);font-weight:600}
.form-hinweis.is-fehler{color:#B4543C;font-weight:600}

.schul-form{margin:0}
.schul-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,18px)}
.schul-karte{padding:clamp(18px,2vw,24px);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.80));
  border:1px solid var(--edge);box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9)}
.schul-karte h3{font-size:1.02rem;font-weight:500;line-height:1.3}
.schul-karte p{font-size:.87rem;color:var(--ink-soft);line-height:1.5;margin-top:.4em}
.schul-termine{display:grid;gap:8px;margin-top:1em}
.termin{position:relative;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.7);border:1px solid rgba(var(--ink-rgb),.09);cursor:pointer;
  transition:background .2s,border-color .2s,box-shadow .2s}
.termin:hover{background:#fff;box-shadow:var(--shadow-soft)}
.termin input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.termin .box{width:20px;height:20px;flex:0 0 auto;margin-top:1px;border-radius:6px;background:#fff;
  border:1.6px solid rgba(var(--ink-rgb),.22);display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,box-shadow .2s}
.termin .box svg{width:11px;height:11px;stroke:#fff;stroke-width:3.2;fill:none;opacity:0;transition:opacity .2s}
.termin input:focus-visible + .box{box-shadow:0 0 0 3px rgba(var(--green-rgb),.35)}
.termin-txt{min-width:0}
.termin-txt b{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.9rem;color:var(--ink);line-height:1.3}
.termin-txt > span{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.15em}
.termin.on{background:linear-gradient(160deg,rgba(188,235,214,.55),rgba(255,255,255,.96));
  border-color:rgba(var(--green-rgb),.42);box-shadow:0 0 0 1px rgba(var(--green-rgb),.2)}
.termin.on .box{background:var(--green);border-color:var(--green)}
.termin.on .box svg{opacity:1}

.schul-foot{margin-top:clamp(16px,2vw,24px);padding:clamp(20px,2.4vw,30px);border-radius:var(--r-xl);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--edge);box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9)}
.schul-sel{margin-bottom:clamp(14px,1.8vw,20px);padding-bottom:clamp(12px,1.6vw,16px);border-bottom:1px solid var(--edge-ink)}
.sf-lab{font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-deep)}
#schulAuswahl{margin-top:.45em;font-size:.92rem;color:var(--ink);line-height:1.5}
#schulAuswahl.is-leer{color:var(--ink-soft)}

.kontakt-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.65fr);gap:clamp(16px,2.4vw,32px);align-items:start}
.kontakt-form{padding:clamp(20px,2.6vw,34px);border-radius:var(--r-xl)}
.kontakt-info{display:grid;gap:clamp(14px,1.8vw,20px);padding:clamp(20px,2.4vw,28px);border-radius:var(--r-xl);
  background:linear-gradient(160deg,rgba(188,235,214,.45),rgba(255,255,255,.85));
  border:1px solid rgba(var(--green-rgb),.18);box-shadow:var(--shadow-soft)}
.ki-block h3{font-family:'Inter',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-deep);margin-bottom:.6em}
.ki-block p{font-size:.93rem;color:var(--ink-body);line-height:1.65}
.ki-block a{color:var(--green-deep);text-decoration:none}
.ki-block a:hover{text-decoration:underline}

/* ---------- Datenhoheit ---------- */
.dh-panel{padding:clamp(18px,2.4vw,32px);border-radius:var(--r-xl)}
.dh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px)}
.dh-card{padding:clamp(18px,2vw,24px);border-radius:var(--r-lg);
  background:rgba(255,255,255,.74);border:1px solid rgba(var(--ink-rgb),.08);
  display:flex;flex-direction:column;gap:.5em}
.dh-ic{width:46px;height:46px;border-radius:16px;flex:0 0 auto;margin-bottom:.4em;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--mint),#E4F4EC)}
.dh-ic svg{width:23px;height:23px;stroke:var(--green-darker);stroke-width:1.75;fill:none;display:block}
.dh-card h3{font-size:1.03rem;font-weight:500;line-height:1.3}
.dh-card p{font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.dh-badge{align-self:flex-start;margin-top:.35em;font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.02em;padding:.42em .9em;border-radius:999px;color:var(--green-darker);
  background:rgba(188,235,214,.55);border:1px solid rgba(var(--green-rgb),.22)}
.dh-ai{display:flex;gap:16px;align-items:flex-start;margin-top:clamp(14px,1.8vw,20px);
  padding:clamp(18px,2vw,24px);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(188,235,214,.42),rgba(255,255,255,.86));
  border:1px solid rgba(var(--green-rgb),.20)}
.dh-ai-ic{width:50px;height:50px;border-radius:16px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(var(--green-rgb),.20);box-shadow:0 5px 14px -9px rgba(var(--ink-rgb),.7)}
.dh-ai-ic svg{width:25px;height:25px;stroke:var(--green-darker);stroke-width:1.7;fill:none;display:block}
.dh-ai b{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:1.05rem;color:var(--ink);margin-bottom:.35em}
.dh-ai p{font-size:.92rem;color:var(--ink-body);line-height:1.55;max-width:82ch}

/* ---------- Umstieg / Datenuebernahme ---------- */
.mig-panel{padding:clamp(18px,2.4vw,32px);border-radius:var(--r-xl)}
.migflow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(14px,2vw,26px);align-items:center;padding:clamp(8px,1.4vw,18px) 0 clamp(18px,2.2vw,26px)}
.mig-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.mig-src{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.mig-chip{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 15px;border-radius:999px;
  font-size:.88rem;color:var(--ink-body);background:var(--panel-solid);border:1px solid rgba(var(--ink-rgb),.10);box-shadow:var(--shadow-soft)}
.mig-chip img{width:18px;height:18px;object-fit:contain;border-radius:5px;flex:0 0 auto}
.mig-chip.is-any{border-style:dashed;border-color:rgba(var(--green-rgb),.42);color:var(--green-darker);font-weight:600;background:rgba(188,235,214,.24)}
.mig-engine{position:relative;z-index:1;justify-self:center;text-align:center;padding:clamp(18px,2vw,26px) clamp(14px,1.8vw,22px);
  border-radius:var(--r-lg);background:rgba(255,255,255,.94);border:1px solid var(--edge);box-shadow:var(--shadow-lift)}
.mig-engine::before{content:;position:absolute;inset:-12px;border-radius:calc(var(--r-lg) + 10px);border:1px dashed rgba(var(--green-rgb),.28);pointer-events:none}
.mig-eng-ic{width:44px;height:44px;margin:0 auto .7em;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--mint),#DCEFDF)}
.mig-eng-ic svg{width:22px;height:22px;stroke:var(--green-darker);stroke-width:1.8;fill:none}
.mig-engine b{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:1rem;color:var(--ink)}
/* Icon-Kaestchen ausnehmen, sonst ueberschreibt display:block sein display:flex */
.mig-engine span:not(.mig-eng-ic){display:block;font-size:.83rem;color:var(--ink-soft);margin-top:.25em}
.mig-target{position:relative;z-index:1;justify-self:center;text-align:center;padding:clamp(20px,2.2vw,28px) clamp(16px,2vw,24px);
  border-radius:var(--r-lg);background:rgba(255,255,255,.94);border:1px solid var(--edge);box-shadow:var(--shadow-lift);width:100%}
.mig-target img{width:min(100%,190px);height:auto;margin:0 auto}
.mig-target span{display:block;font-size:.83rem;color:var(--ink-soft);margin-top:.7em}

.mig-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(16px,2.2vw,28px);
  align-items:start;padding-top:clamp(16px,2vw,24px);border-top:1px solid var(--edge-ink)}
.mig-facts{display:grid;gap:12px}
.mig-fact{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.70);border:1px solid rgba(var(--ink-rgb),.07)}
.mf-ic{width:46px;height:46px;border-radius:16px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--mint),#E4F4EC)}
.mf-ic svg{width:23px;height:23px;stroke:var(--green-darker);stroke-width:1.8;fill:none;display:block}
.mig-fact b{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.97rem;color:var(--ink);line-height:1.35;margin-top:.28em}
/* nur das Text-Span im div — sonst ueberschreibt die Regel das Icon-Kaestchen .mf-ic */
.mig-fact div span{display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.5;margin-top:.25em}
.mig-price{padding:clamp(20px,2.2vw,28px);border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(160deg,rgba(188,235,214,.55),rgba(255,255,255,.9));
  border:1px solid rgba(var(--green-rgb),.20);box-shadow:var(--shadow-soft)}
.mp-lab{font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--green-deep)}
.mp-amt.is-wort{font-size:clamp(1.75rem,2.8vw,2.2rem);letter-spacing:-.02em}
.mp-amt{font-family:'Inter',sans-serif;font-size:clamp(2.1rem,3.6vw,2.8rem);font-weight:600;color:var(--green-deep);letter-spacing:-.04em;line-height:1;margin:.35em 0}
.mp-sub{font-size:.86rem;color:var(--ink-soft);line-height:1.5}
.mig-price .btn{width:100%;margin-top:1.2em}
.mig-fine{margin-top:clamp(14px,1.8vw,20px);padding-top:clamp(12px,1.6vw,16px);border-top:1px solid var(--edge-ink);
  font-size:.82rem;color:var(--ink-soft);line-height:1.55;max-width:88ch}


/* Bedienleiste des Karten-Sliders — nur am Handy sichtbar */
.tgrid-nav{display:none;align-items:center;gap:10px;margin-bottom:14px}
.tg-count{font-family:'Inter',sans-serif;font-size:.86rem;color:var(--ink-soft);margin-right:auto}
.tg-count b{font-weight:600;color:var(--green-deep)}
.tg-btn{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(var(--ink-rgb),.12);
  background:rgba(255,255,255,.9);color:var(--green-deep);font-family:'Inter',sans-serif;font-size:1.5rem;
  line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--shadow-soft);transition:background .2s,opacity .2s,transform .2s}
.tg-btn:hover:not(:disabled){background:var(--mint);transform:translateY(-1px)}
.tg-btn:disabled{opacity:.32;cursor:default}

/* ---------- Themen-Karten ---------- */
/* Karussell: zwei Zeilen, waagrecht scrollend. Zeilenzahl steuert auch die
   Schrittweite der Buttons — das JS liest sie aus grid-template-rows. */
.tgrid{
  display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(2,1fr);
  grid-auto-columns:clamp(260px,22vw,320px);
  gap:clamp(12px,1.5vw,18px);
  overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);
  scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1);padding:2px var(--pad) 10px;
}
.tgrid::-webkit-scrollbar{display:none}
.tgrid-nav{display:flex}
.tcard{scroll-snap-align:start;
  padding:clamp(20px,2.1vw,26px);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.80));
  border:1px solid var(--edge);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9);
  display:flex;flex-direction:column;gap:.55em;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;
}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.tc-ic{
  width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;margin-bottom:.5em;border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 5px 14px -10px rgba(var(--ink-rgb),.6);
}
.tc-ic svg{width:20px;height:20px;stroke:var(--green-darker);stroke-width:1.75;fill:none}
.t1{background:linear-gradient(150deg,#CFEEDF,#E8F6EC)}
.t2{background:linear-gradient(150deg,#E4EFC4,#F1F7DF)}
.t3{background:linear-gradient(150deg,#CFE8EE,#E9F4F6)}
.t4{background:linear-gradient(150deg,#F4E8D2,#FBF3E6)}
.t5{background:linear-gradient(150deg,#DED9F2,#EFEDF9)}
.tcard h3{font-size:1.02rem;font-weight:500;line-height:1.3}
.tcard p{font-size:.9rem;color:var(--ink-soft);line-height:1.5}

/* ---------- Netzwerk-Map / Nahtlos vernetzt ----------
   Desktop: radial gespreizte Karte, Knoten frei über --x / --y positioniert.
   Unter 1000px: Fallback auf gestapelte Gruppenkarten.            */
.netmap{position:relative;width:100%;aspect-ratio:100/85.9;margin-top:clamp(12px,1.8vw,24px)}
/* weiches Zentrumslicht */
.netmap::before{
  content:"";position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(188,235,214,.55),rgba(190,228,232,.20) 54%,transparent 72%);
}
/* zartes Raster, zum Rand hin ausgeblendet */
.netmap::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(var(--ink-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 68% 66% at 50% 50%,#000 34%,transparent 80%);
  mask-image:radial-gradient(ellipse 68% 66% at 50% 50%,#000 34%,transparent 80%);
}
.nm-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.nm-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:min(27%,300px);padding:clamp(22px,2.6vw,34px) 22px;border-radius:30px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--edge);box-shadow:var(--shadow-lift);
}
.nm-center::before{content:"";position:absolute;inset:-16px;border-radius:44px;border:1px dashed rgba(var(--green-rgb),.30);pointer-events:none}
.nm-center img.wm{width:min(100%,240px);height:auto}   /* Breite fuehrt, sonst staucht max-width:100% das Logo */

.nm-group{display:contents}
.nm-cat,.nm-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:2}
.nm-cat{
  font-family:'Inter',sans-serif;font-size:clamp(.68rem,.72vw,.75rem);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-darker);white-space:nowrap;
  padding:.75em 1.4em;border-radius:999px;
  background:rgba(255,255,255,.95);border:1.4px solid var(--cat);
  box-shadow:0 4px 14px -8px rgba(var(--ink-rgb),.55), inset 0 1px 0 rgba(255,255,255,.9);
}
.nm-node{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;line-height:1.3;
  font-size:clamp(.78rem,.88vw,.87rem);color:var(--ink-body);
  padding:8px 15px 8px 9px;border-radius:999px;
  background:var(--panel-solid);border:1px solid rgba(var(--ink-rgb),.10);
  box-shadow:0 2px 6px -3px rgba(var(--ink-rgb),.22), 0 16px 30px -22px rgba(var(--ink-rgb),.55);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;
}
.nm-node:hover{transform:translate(-50%,-50%) translateY(-3px);box-shadow:var(--shadow-lift)}
.nm-ic{width:32px;height:32px;border-radius:10px;background:var(--tint);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.nm-ic svg{width:17px;height:17px;stroke:var(--green-darker);stroke-width:1.85;fill:none}
.nm-ic img{height:19px;width:auto;max-width:22px;object-fit:contain}
.nm-node img.logo{height:21px;width:auto;max-width:112px;object-fit:contain}
.nm-node img.chegg{filter:invert(1) brightness(.34);height:17px}
.g1{--cat:rgba(var(--green-rgb),.55); --tint:linear-gradient(140deg,var(--mint),#E4F4EC)}
.g2{--cat:rgba(158,193,46,.70); --tint:linear-gradient(140deg,var(--lime-pale),#EFF7DE)}
.g3{--cat:rgba(57,169,180,.55); --tint:linear-gradient(140deg,var(--sky),#E3F2F4)}
.g4{--cat:rgba(224,160,90,.62); --tint:linear-gradient(140deg,var(--blush),#FBEEE4)}
.g5{--cat:rgba(142,123,192,.58); --tint:linear-gradient(140deg,#DED9F2,#EFEDF9)}

.logo-tiles{margin-top:clamp(28px,3.6vw,46px)}
.logo-tiles .lt-cap{font-size:.86rem;color:var(--ink-soft);margin-bottom:14px;text-align:center}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.1vw,14px);max-width:880px;margin-inline:auto}
.tile{
  background:var(--panel-solid);border:1px solid rgba(var(--ink-rgb),.10);
  border-radius:var(--r-md);padding:8px;overflow:hidden;
  box-shadow:0 2px 6px -3px rgba(var(--ink-rgb),.16), 0 12px 24px -18px rgba(var(--ink-rgb),.4);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.tile img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:calc(var(--r-md) - 9px);background:#fff}

/* ---------- Dashboard ---------- */
.dash-panel{padding:clamp(16px,2.2vw,30px);border-radius:var(--r-xl)}
.dash-top{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(18px,2vw,26px)}
.dash-top h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.dash-top p{font-size:1rem;max-width:52ch;margin-top:.6em}
.dash-shot{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(var(--ink-rgb),.10);box-shadow:var(--shadow-lift);background:#EFF6F2}
.dash-shot img{width:100%;height:auto;display:block}
.dash-side{position:absolute;right:16px;bottom:16px;width:min(210px,34%);border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-lift);background:#fff}
.dash-side img{width:100%;height:auto}
.dash-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(16px,2vw,24px)}
.dfact{padding:16px 18px;border-radius:var(--r-md);background:rgba(255,255,255,.72);border:1px solid var(--edge)}
.dfact b{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.98rem;color:var(--ink)}
.dfact span{font-size:.86rem;color:var(--ink-soft)}

/* ---------- Preisrechner ---------- */
.calc{border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,rgba(240,249,245,.92),rgba(247,252,250,.88) 45%,rgba(243,250,247,.92));}
.calc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  padding:clamp(14px,1.7vw,20px) clamp(16px,2vw,26px);border-bottom:1px solid var(--edge);
  background:rgba(255,255,255,.5)}
.calc-head h3{font-size:clamp(1.08rem,1.6vw,1.32rem);font-weight:500;margin-top:.35em}
.calc-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.cp-lab{font-family:'Inter',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.cp-row{display:flex;align-items:baseline;justify-content:flex-end;flex-wrap:wrap;gap:.5em}
.cp-old{font-family:'Inter',sans-serif;font-size:1rem;color:#93A9A0;text-decoration:line-through;display:none;line-height:1.05}
.cp-now{font-family:'Inter',sans-serif;font-size:clamp(2.1rem,3.4vw,2.7rem);font-weight:600;color:var(--green-deep);letter-spacing:-.04em;line-height:1.05}
.cp-badge{display:inline-block;visibility:hidden;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:700;padding:.3em .8em;border-radius:999px;background:linear-gradient(140deg,var(--mint),#DCEFDF);color:var(--green-darker);align-self:center}
.cp-note{font-size:.78rem;color:var(--ink-soft);line-height:1.3}

.calc-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.5vw,18px);
  padding:clamp(14px,1.8vw,22px) clamp(16px,2vw,26px)}
.calc-col{padding:clamp(14px,1.7vw,20px);border-radius:var(--r-lg);border:1px solid rgba(var(--ink-rgb),.08);background:rgba(255,255,255,.92)}
.cb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.cb-head h4{font-size:1.02rem;font-weight:500;margin:0}
.cb-sub{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.25em}
.cb-price{font-family:'Inter',sans-serif;font-weight:600;font-size:1.08rem;color:var(--green-deep);white-space:nowrap}
.cb-price span{font-size:.76rem;font-weight:400;color:var(--ink-soft)}

.price-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.price-list li{display:flex;gap:.5em;align-items:flex-start;font-size:.84rem;color:var(--ink-body);line-height:1.4}
.price-list svg{width:14px;height:14px;flex:0 0 auto;margin-top:.22em;stroke:var(--green);stroke-width:2.4;fill:none}
.mwst{font-size:.82rem;color:var(--ink-soft);margin:0}

.stepper-wrap{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(var(--ink-rgb),.12)}
.stepper-wrap>label{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.88rem;color:var(--ink);margin-bottom:.55em}
.stepper{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stepper .sbtn{width:36px;height:36px;border-radius:11px;border:1px solid rgba(var(--ink-rgb),.10);background:#fff;color:var(--green-deep);font-family:'Inter',sans-serif;font-size:1.15rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.stepper .sbtn:hover{background:var(--mint)}
.stepper .sbtn:disabled{opacity:.4;cursor:not-allowed}
.stepper input{width:58px;height:36px;border-radius:11px;border:1px solid rgba(var(--ink-rgb),.12);background:#fff;text-align:center;font-family:'Inter',sans-serif;font-weight:600;font-size:.95rem;color:var(--ink);-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper .sinfo{font-size:.84rem;color:var(--ink-soft)}
.hint{font-size:.8rem;color:var(--ink-soft);margin-top:.6em;line-height:1.4}

.calc-disc{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(var(--ink-rgb),.12);display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.calc-disc h5{margin:0;font-family:'Inter',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep)}
.dtier{display:inline-flex;align-items:center;gap:.45em;min-height:32px;font-size:.82rem;color:var(--ink-body)}
.dtier b{font-family:'Inter',sans-serif;font-size:.7rem;font-weight:700;color:#fff;background:rgba(var(--green-rgb),.5);border-radius:7px;padding:.24em .55em;transition:background .2s}
.dtier.is-active{color:var(--green-darker);font-weight:700}
.dtier.is-active b{background:var(--green-deep)}
.cdisc{display:none;align-items:center;gap:.4em}
.cdisc input{width:52px;height:27px;border-radius:8px;border:1px solid rgba(var(--green-rgb),.45);background:#fff;text-align:center;font-family:'Inter',sans-serif;font-weight:600;font-size:.82rem;color:var(--ink);-moz-appearance:textfield}
.cdisc input::-webkit-outer-spin-button,.cdisc input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.mod-grid{display:grid;grid-template-columns:1fr;gap:8px}
.mod{position:relative;display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:14px;
  background:#fff;border:1px solid rgba(var(--ink-rgb),.09);cursor:pointer;
  transition:border-color .2s,background .2s,box-shadow .2s}
.mod:hover{box-shadow:var(--shadow-soft)}
.mod input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.mod .box{width:20px;height:20px;border-radius:6px;border:1.6px solid rgba(var(--ink-rgb),.22);background:#fff;flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin-top:2px;transition:background .2s,border-color .2s,box-shadow .2s}
.mod .box svg{width:11px;height:11px;stroke:#fff;stroke-width:3.2;fill:none;opacity:0;transition:opacity .2s}
.mod input:focus-visible + .box{box-shadow:0 0 0 3px rgba(var(--green-rgb),.35)}
.mod .m-body{min-width:0;flex:1 1 auto}
.mod .m-name{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-family:'Inter',sans-serif;font-weight:500;font-size:.92rem;color:var(--ink)}
.mod .m-name b{font-family:'Inter',sans-serif;font-weight:600;font-size:.88rem;color:var(--green-deep);white-space:nowrap}
.mod .m-desc{font-size:.8rem;color:var(--ink-soft);line-height:1.4;margin-top:.18em}
.mod.on{border-color:rgba(var(--green-rgb),.45);background:linear-gradient(160deg,rgba(188,235,214,.4),#fff)}
.mod.on .box{background:var(--green);border-color:var(--green)}
.mod.on .box svg{opacity:1}

.calc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  padding:clamp(14px,1.7vw,20px) clamp(16px,2vw,26px);border-top:1px solid var(--edge-ink);background:rgba(255,255,255,.5)}
.cf-text{min-width:0;max-width:58ch}
.cf-text b{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.98rem;color:var(--ink);margin-bottom:.25em}
.calc-cta{display:flex;flex-wrap:wrap;gap:10px}
.calc-cta .btn{flex:0 0 auto}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:900px}
details.q{border-radius:var(--r-md);padding:0;overflow:hidden;transition:box-shadow .3s}
details.q[open]{box-shadow:var(--shadow-lift)}
details.q summary{
  list-style:none;cursor:pointer;padding:clamp(16px,1.8vw,22px) clamp(50px,6vw,64px) clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(.98rem,1.2vw,1.08rem);color:var(--ink);
  position:relative;line-height:1.4;
}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{
  content:"";position:absolute;right:clamp(18px,2vw,24px);top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  background:linear-gradient(140deg,var(--mint),var(--sky));
}
details.q summary::before{
  content:"";position:absolute;right:calc(clamp(18px,2vw,24px) + 8px);top:50%;width:10px;height:10px;margin-top:-7px;z-index:1;
  border-right:2px solid var(--green-darker);border-bottom:2px solid var(--green-darker);
  transform:rotate(45deg);transition:transform .3s;
}
details.q[open] summary::before{transform:rotate(-135deg);margin-top:-3px}
details.q .a{padding:0 clamp(50px,6vw,64px) clamp(18px,2vw,24px) clamp(18px,2vw,26px);font-size:.95rem;color:var(--ink-body)}

/* ---------- Closing ---------- */
.closing{
  padding:clamp(32px,4.4vw,64px);border-radius:var(--r-xl);text-align:center;position:relative;overflow:hidden;
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid var(--edge);box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.95);
}
.closing::before{content:"";position:absolute;inset:-40% -10% auto;height:70%;background:radial-gradient(60% 100% at 50% 0%,rgba(158,193,46,.22),transparent 70%);pointer-events:none}
.closing h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:400;letter-spacing:-.03em}
.closing p{margin:1em auto 0;max-width:52ch;font-size:1.05rem}
.closing .hero-cta{justify-content:center}
.closing .hero-note{justify-content:center}

/* ---------- Footer ---------- */
footer{padding-block:clamp(34px,4vw,56px) 40px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(18px,2.4vw,34px);padding-bottom:26px}
.foot img.wm{height:26px;width:auto;margin-bottom:14px}
.foot p{font-size:.9rem;color:var(--ink-soft);max-width:34ch}
.foot h4{font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);margin-bottom:.9em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot a{font-size:.9rem;color:var(--ink-body);text-decoration:none}
.foot a:hover{color:var(--green-deep)}
.foot-bottom{border-top:1px solid rgba(var(--ink-rgb),.10);padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.83rem;color:var(--ink-soft)}

/* ---------- Reveal (fail-safe) ---------- */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.js .reveal.in.d1{transition-delay:.07s}
.js .reveal.in.d2{transition-delay:.14s}
.js .reveal.in.d3{transition-delay:.21s}
.js .reveal.in.d4{transition-delay:.28s}
.img-fail{background:linear-gradient(140deg,#E7F2EC,#F4EEE2)!important;min-height:60px}

/* ---------- Responsive ---------- */
/* Kopfleiste: unter 1000px auf das Burger-Menue, sonst passen die Punkte nicht mehr nebeneinander */
@media (max-width:1000px){
  .nav{grid-template-columns:1fr auto}
  .nav-links{display:none}
  .nav-actions{display:none}
  .burger{display:flex;justify-self:end;margin-left:0}
  /* Das Ausklappmenue gehoert an denselben Breakpoint wie der Burger.
     Vorher stand es auf 900px, zwischen 901 und 1000px war der Burger
     dadurch ohne Wirkung. */
  .mobile-menu{
    display:block;max-width:var(--maxw);margin:0 var(--pad) 12px;padding:16px;border-radius:var(--r-lg);
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border:1px solid var(--edge);box-shadow:var(--shadow-lift);
    max-height:0;opacity:0;visibility:hidden;overflow:hidden;padding-block:0;transition:.3s cubic-bezier(.2,.8,.3,1);
  }
  .mobile-menu[data-open="true"]{max-height:78vh;opacity:1;visibility:visible;padding-block:16px;overflow:auto}
  .mobile-menu a{display:block;padding:11px 12px;border-radius:12px;text-decoration:none;font-family:'Inter',sans-serif;font-size:.98rem;font-weight:500;color:var(--ink)}
  .mobile-menu a:hover{background:rgba(var(--green-rgb),.09);color:var(--green)}
  .mobile-menu .btn{width:100%;margin-top:12px;background:var(--accent-mint);color:#fff;box-shadow:none}
}
/* Netzwerk-Map: unter 1000px keine freie Positionierung mehr, sondern Gruppenkarten */
@media (max-width:1000px){
  .netmap{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
  .netmap::before,.netmap::after,.nm-lines{display:none}
  .nm-center{position:relative;left:auto;top:auto;transform:none;width:auto;grid-column:1/-1;padding:clamp(26px,3.4vw,38px) 22px}
  .nm-center::before{inset:-11px;border-radius:40px}
  .nm-center img.wm{width:min(100%,230px);height:auto}
  .nm-group{
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;
    padding:clamp(16px,2vw,22px);border-radius:var(--r-lg);
    background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.74));
    border:1px solid var(--edge);box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .netmap > .nm-group:last-child{grid-column:1/-1}   /* 5 Gruppen: die letzte ueber beide Spalten */
  .nm-cat,.nm-node{position:static;transform:none;white-space:normal}
  .nm-cat{margin-bottom:4px}
  .nm-node{width:100%;border-radius:14px}
  .nm-node:hover{transform:translateY(-2px)}
}
@media (max-width:1180px){
  .nav-links{gap:clamp(6px,1.1vw,18px)}
  .nav-links > a{font-size:.9rem}
}
@media (max-width:1080px){
  .tiles{grid-template-columns:repeat(4,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  /* zweite Zeile bekommt eine eigene Trennlinie, erste Spalte bleibt ohne */
  .kpi:nth-child(3){border-left:0;padding-left:0}
  .kpi:nth-child(n+3){border-top:1px solid rgba(var(--ink-rgb),.09)}
}
@media (max-width:900px){

  .hero-grid{grid-template-columns:1fr;gap:34px}
  .pv{grid-template-columns:1fr;justify-items:center}
  .pv-app{max-width:260px}
  .pillars{grid-template-columns:1fr}
  .warum-strip{grid-template-columns:1fr}
  .warum-shot img{max-height:340px}
  .modules{grid-template-columns:1fr 1fr}
  .tgrid{grid-auto-columns:clamp(240px,34vw,300px)}
  .frow{grid-template-columns:1fr;gap:24px}
  .frow:nth-child(even) .frow-text{order:0}
  .ki-wrap{grid-template-columns:1fr}
  .ki-shot{position:static;order:-1}
  .zonemap{grid-template-columns:1fr;gap:14px}
  .z7{display:flex;flex-direction:column;align-items:flex-start;margin-top:0}
  .z7 .zn-head{margin-bottom:4px}
  /* in Spaltenrichtung wirkt flex-basis auf die Hoehe -> zurueckdrehen, sonst strecken sich die Chips */
  .z7 .zn-items{flex:0 1 auto;width:100%}
  .z7 .zn-repl{flex:0 1 auto;width:100%;margin-top:.95em}
  .zn-lines{display:none}
  .zn-core{order:-1}
  .schul-grid{grid-template-columns:1fr 1fr}
  .kontakt-wrap{grid-template-columns:1fr}
  .dh-grid{grid-template-columns:1fr}
  .dh-ai{flex-direction:column;gap:12px}
  .migflow{grid-template-columns:1fr;gap:16px}
  .mig-lines{display:none}
  .mig-body{grid-template-columns:1fr}
  .mig-src{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .calc-body{grid-template-columns:1fr}
  .calc-foot{grid-template-columns:1fr}
  .calc-head{flex-direction:column;align-items:stretch}
  .calc-price{min-width:0;align-items:flex-start;text-align:left}
  .cp-row{justify-content:flex-start}
  /* immer eigene Zeile, sonst springt die Spalte je nach Textlaenge um ~30px */
  .stepper .sinfo{flex:1 0 100%;margin-top:2px}
  .calc-foot{flex-direction:column;align-items:stretch}
  .calc-cta{width:100%}
  .calc-cta .btn{flex:1 1 100%}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  :root{--r-xl:26px;--r-lg:22px;--r-md:16px}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tgrid{grid-template-rows:1fr;grid-auto-columns:80%;scroll-snap-type:x mandatory;gap:12px}
  .tcard{scroll-snap-align:center}
  .schul-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-send .btn{width:100%}
  .netmap{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .modules{grid-template-columns:1fr}
  .ki-cards{grid-template-columns:1fr}
  .mod-grid{grid-template-columns:1fr}
  .price-list{grid-template-columns:1fr}
  .calc-disc{flex-direction:column;align-items:flex-start;gap:9px}
  .dash-facts{grid-template-columns:1fr}
  .dash-side{display:none}
  .foot{grid-template-columns:1fr}
  .hero-cta .btn{flex:1 1 100%}
  h1{font-size:clamp(1.95rem,8.4vw,2.6rem)}
  /* auf schmalen Schirmen fliesst die Ueberschrift frei um */
  .h1-br{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1!important;transform:none!important}
}

/* ---------- Updates ---------- */
.upd-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(16px,2vw,22px)}
.upd-filter{font-family:'Inter',sans-serif;font-size:.87rem;font-weight:500;color:var(--ink-body);
  padding:.55em 1.1em;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.8);border:1px solid rgba(var(--ink-rgb),.11);
  transition:background .2s,border-color .2s,color .2s}
.upd-filter:hover{background:#fff}
.upd-filter.is-aktiv{background:var(--green-deep);border-color:var(--green-deep);color:#fff}

.upd-liste{display:grid;gap:clamp(10px,1.3vw,14px)}
.upd{border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.80));
  border:1px solid var(--edge);box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow .3s}
.upd[open]{box-shadow:var(--shadow-lift)}
.upd summary{list-style:none;cursor:pointer;position:relative;
  padding:clamp(18px,2vw,24px) clamp(52px,6vw,66px) clamp(18px,2vw,24px) clamp(18px,2.1vw,26px)}
.upd summary::-webkit-details-marker{display:none}
.upd summary::after{content:"";position:absolute;right:clamp(18px,2vw,24px);top:clamp(24px,2.6vw,32px);
  width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,var(--mint),var(--sky))}
.upd summary::before{content:"";position:absolute;right:calc(clamp(18px,2vw,24px) + 9px);
  top:calc(clamp(24px,2.6vw,32px) + 9px);width:10px;height:10px;z-index:1;
  border-right:2px solid var(--green-darker);border-bottom:2px solid var(--green-darker);
  transform:rotate(45deg);transition:transform .3s}
.upd[open] summary::before{transform:rotate(-135deg);margin-top:4px}
.upd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:.6em}
.upd-kat{font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.06em;
  padding:.36em .85em;border-radius:999px}
.k-neu{background:rgba(188,235,214,.7);color:var(--green-darker)}
.k-sys{background:rgba(190,228,232,.7);color:#155E66}
.k-soft{background:rgba(223,237,182,.75);color:#4C6114}
.upd-datum{font-size:.82rem;color:var(--ink-soft)}
.upd summary h3{font-size:clamp(1.05rem,1.5vw,1.24rem);font-weight:500;line-height:1.3}
.upd-teaser{font-size:.92rem;color:var(--ink-soft);line-height:1.55;margin-top:.45em;max-width:76ch}
.upd-body{padding:0 clamp(18px,2.1vw,26px) clamp(20px,2.4vw,28px);border-top:1px solid var(--edge-ink);
  margin:0 clamp(18px,2.1vw,26px);padding-inline:0}
.upd-body > *{margin-top:1em}
.upd-body > *:first-child{margin-top:1.2em}
.upd-body p{font-size:.94rem;color:var(--ink-body);line-height:1.7;max-width:76ch}
.upd-body h4{font-family:'Inter',sans-serif;font-size:1.02rem;font-weight:500;color:var(--ink);margin-top:1.5em}
.upd-body ul{list-style:none;padding:0;display:grid;gap:7px;max-width:76ch}
.upd-body li{position:relative;padding-left:1.4em;font-size:.94rem;color:var(--ink-body);line-height:1.6}
.upd-body li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(140deg,var(--green),var(--lime))}
.upd-body blockquote{margin-inline:0;padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,24px);
  border-radius:var(--r-md);background:rgba(188,235,214,.34);border:1px solid rgba(var(--green-rgb),.18);
  font-family:'Inter',sans-serif;font-weight:400;font-size:1.02rem;line-height:1.5;color:var(--ink);max-width:76ch}
.upd-body img{width:100%;height:auto;border-radius:var(--r-md);background:#EFF6F2;
  border:1px solid rgba(var(--ink-rgb),.07)}

/* Vorschaubild im zugeklappten Zustand */
.upd summary{display:flex;gap:clamp(14px,2vw,22px);align-items:flex-start}
.upd-vorschau{flex:0 0 clamp(140px,20%,240px);border-radius:var(--r-md);overflow:hidden;
  border:1px solid rgba(var(--ink-rgb),.08);background:#EFF6F2;aspect-ratio:16/10}
.upd-vorschau img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.upd:hover .upd-vorschau img{transform:scale(1.04)}
.upd-kopf{min-width:0;flex:1 1 auto}
@media (max-width:640px){
  .upd summary{flex-direction:column;gap:12px}
  .upd-vorschau{flex:none;width:100%;aspect-ratio:16/9}
}

/* ===== Rechtsseiten (Impressum / Datenschutz / Barrierefreiheit) ===== */
.legal-body{max-width:800px}
.legal-body h3{font-family:'Inter',sans-serif;font-size:clamp(1.05rem,1.4vw,1.2rem);font-weight:600;
  color:var(--green-deep);margin:2.2em 0 .6em}
.legal-body h3:first-child{margin-top:0}
.legal-body p{margin:0 0 1em;color:var(--ink-body);line-height:1.65}
.legal-body ul{margin:0 0 1em;padding-left:1.25em;color:var(--ink-body);line-height:1.65}
.legal-body li{margin-bottom:.35em}
.legal-body a{color:var(--green-deep);word-break:break-word}
.legal-body .legal-version{margin-top:2.5em;font-size:.85rem;color:var(--ink-soft)}
.foot-legal a{color:var(--ink-soft);text-decoration:none}
.foot-legal a:hover{color:var(--green-deep)}