/* Unbounded lokal gehostet (keine Verbindung zu Google) – Lizenz: assets/fonts/OFL.txt */
@font-face{ font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/newsreader-italic.woff2") format("woff2"); }   /* Strichstaerke an Unbounded Regular angepasst */
@font-face{ font-family:"Unbounded"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/unbounded-400.woff2") format("woff2"); }
@font-face{ font-family:"Unbounded"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/unbounded-500.woff2") format("woff2"); }

  :root{
    --bg: #dcdcda;
    --pill: #ffffff;
    --menu: #6b6b6b;
    --ink: #111111;
    box-sizing: border-box;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html, body{ background: var(--bg); }
  body{
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    overflow-x: hidden;
  }

  /* ================= Linien-Raster =================
     --u ist das Grundmaß: Höhe des Kopfbereichs = Breite der linken Spalte.
     Dadurch entsteht links oben ein Quadrat, in dem das Logo mittig sitzt.
     Alle Linien laufen durchgehend über die ganze Seite. */
  :root{
    --u: 78px;              /* Grundmaß: Kopfhöhe = linke Spaltenbreite = Quadrat */
    --gap: 16px;            /* gleicher Abstand des CTA-Buttons nach oben, rechts und unten */
    --col-r: 130px;         /* senkrechte Linie rechts: liegt genau auf der Mitte des Buttons (per JS gesetzt) */
    --panel-w: clamp(540px, 46vw, 700px);   /* Breite des Menü-Blocks */
    --mid: 86%;             /* Hero: mehr Luft zwischen Querlinie und unterem Text */
    /* Woran sich das LAYOUT ausrichtet. Beim Oeffnen des Menues wandert --mid
       animiert nach unten; --mid-layout bleibt stehen, damit der Footer dabei
       nicht mitwaechst. Beim Scrollen setzen beide denselben Wert. */
    --mid-layout: 78%;
    --mid-rest: 14svh;
    /* Inhalt sitzt so weit von der Linie entfernt wie die Linie vom Bildschirmrand */
    --pad-l: calc(var(--u) * 2);
    --pad-r: calc(var(--col-r) * 2);
    --line: rgba(0,0,0,0.18);
    /* Eine Hoehe und ein Innenabstand fuer ALLE Buttons - auf jeder Breite.
       Vorher gab es das nur unter 760px; darueber hatte jeder Button seine
       eigene Zahl: Header 46px (und mit der Fensterbreite wandernd, weil aus
       --u minus 2x --gap gerechnet), Sections 44px. Bei 1000px war der Header
       dadurch kleiner als die Section-Buttons, bei 1440px groesser. */
    --btn-h: 46px;
    --btn-pad: 22px;
  }
  .grid-frame{ position: fixed; inset: 0; pointer-events: none; z-index: 50; }
  .grid-frame span{ position: absolute; background: var(--line); }
  .gl-head{ left: 0; right: 0; top: var(--u); height: 1px; }                 /* Querlinie unter dem Kopfbereich */
  .gl-vleft{ top: 0; bottom: 0; left: var(--u); width: 1px; }                /* trennt die linke Spalte ab */
  .gl-vright{ top: var(--u); bottom: 0; right: var(--col-r); width: 1px; }   /* beginnt erst an der Kopflinie, läuft also nicht hinter dem Button durch */
  .gl-mid{ left: 0; right: 0; top: var(--mid); height: 1px; }                /* waagerechte Linie mit den Punkten */
  .gl-mid, .grid-frame i{ transform: translateY(var(--problem-line-shift, 0px)); opacity: var(--problem-line-opacity, 1); }
  /* zusätzliche Linie, die erst mit dem Menü erscheint und den Menü-Kasten schließt */
  .gl-vmenu{
    top: 0; bottom: 0; left: calc(var(--panel-w) - var(--u)); width: 1px;
    opacity: 0; transition: opacity .35s ease .15s;
  }
  body.menu-open .gl-vmenu{ opacity: 1; }
  .grid-frame i{
    position: absolute; top: var(--mid); width: 9px; height: 9px; margin-top: -4px;
    background: #111; border-radius: 999px;
  }
  .dot-l{ left: var(--u); margin-left: -4px; }
  .dot-r{ right: var(--col-r); margin-right: -4px; }

  /* Kopfbereich zeichnet dauerhaft weich, was darunter durchscrollt,
     damit sich Inhalte nie mit Logo, Umschalter und Button überlagern */
  .head-blur{
    position: fixed; top: 0; left: var(--u); right: 0; height: var(--u);
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    background: rgba(220,220,218,0.55);
    pointer-events: none; z-index: 30;
  }

  /* ---------------- Header ---------------- */
  .site-header{
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--u);
    display: flex; align-items: center;
    z-index: 60;
    pointer-events: none;
  }
  .site-header > *{ pointer-events: auto; }
  .site-header, .side-panel{ font-family: "Unbounded", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

  /* Logo mittig im Quadrat links oben */
  .brand{
    display: flex; align-items: center; justify-content: center;
    width: var(--u); height: var(--u); text-decoration: none; color: #111;
  }
  .brand-logo{ height: calc(var(--u) * 0.2); width: auto; display: block; }   /* kleiner, mit Luft ringsum, mittig im Quadrat */

  /* Umschalter mittig im Kopfbereich: reiner Text, aktive Leistung größer und schwarz */
  .service-toggle{
    position: fixed; left: 50%; top: 0; transform: translateX(-50%);
    height: var(--u); display: flex; align-items: center; gap: 9px;
    z-index: 35;                       /* liegt unter dem Menü-Block, wird also verdeckt */
    font-family: "Unbounded", "Inter", sans-serif;
    transition: filter .55s ease;
  }
  body.menu-open .service-toggle{ filter: blur(18px); pointer-events: none; }   /* verschwimmt zusammen mit dem Hintergrund */
  .service-toggle a{ font-size: var(--t-small); font-weight: 400; letter-spacing: 0.01em;
    color: var(--menu); text-decoration: none; white-space: nowrap;
    transition: color .25s ease, font-size .25s ease, font-weight .25s ease;
  }
  .service-toggle a.active{ color: #111; font-weight: 500; font-size: var(--t-h4); }
  .service-sep{ color: var(--menu); font-size: var(--t-small); font-weight: 400; }

  /* CTA rechts: eckig, mit dem gleichen Abstand nach oben, rechts und unten */
  .cta-btn{
    position: absolute; right: var(--gap);
    top: calc((var(--u) - var(--btn-h)) / 2);   /* mittig im Kopfquadrat, unabhaengig von --u */
    height: var(--btn-h);
    display: flex; align-items: center; padding: 0 var(--btn-pad);
    background: #111; color: #fff; font-size: var(--t-small); font-weight: 400; letter-spacing: 0.01em;
    text-decoration: none; white-space: nowrap;
    transition: background .25s ease;
  }
  .cta-btn:hover{ background: #000; }

  /* Dauerlauf für beide Buttons: ein heller Balken wischt durch und dreht dabei
     die Schrift um (Difference-Blend), damit der Button Aufmerksamkeit zieht. */
  /* wichtig: position hier NICHT anfassen, die Buttons sind absolut gesetzt */
  .cta-btn{ overflow: hidden; isolation: isolate; }
  /* Endlosband aus abwechselnd hellen und leeren Feldern, jedes genau so breit wie der
     Button. Die Animation läuft über genau eine Musterperiode, dadurch ist der Neustart
     unsichtbar und es kommt ohne Stocken immer die nächste Farbe nach. */
  .cta-btn::after{
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 400%;
    background: linear-gradient(100deg,
      rgba(255,255,255,0) 44%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 56%); z-index: 2; pointer-events: none;
    will-change: transform; backface-visibility: hidden;
    animation: btn-sweep 4.4s linear infinite;
  }
  @keyframes btn-sweep{
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce){
    .cta-btn::after{ animation: none; opacity: 0; }
  }

  /* Menü-Kästchen: gleicher Abstand nach oben, links und rechts zu den Linien bzw. zum Seitenrand.
     Beim Öffnen wird aus den vier Quadraten ein Dreieck mit der Spitze nach links. */
  .menu-fab{
    position: fixed; left: 0; top: var(--u);
    width: var(--u); height: var(--u);
    padding: 0; border: 0; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 60;
  }
  .fab-squares{
    display: grid; grid-template-columns: 6px 6px; grid-template-rows: 6px 6px; gap: 3px;
    transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .fab-squares i{ width: 6px; height: 6px; background: #111; border-radius: 0; display: block; }
  .fab-triangle{
    position: absolute; width: 11px; height: 13px; background: #111;
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);   /* Spitze nach links */
    opacity: 0; transform: scale(.5);
    transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .menu-fab.open .fab-squares{ opacity: 0; transform: scale(.5); }
  .menu-fab.open .fab-triangle{ opacity: 1; transform: scale(1); }

  /* Hintergrund weichzeichnen, solange das Seiten-Panel offen ist */
  #pageContent{ transition: filter .55s ease; }
  /* Menue offen: EINE feste Weichzeichner-Ebene ueber dem sichtbaren Bereich (statt Filter auf der gesamten, sehr hohen Seite) */
  #pageContent.blurred{ pointer-events: none; user-select: none; }
  .menu-veil{ position: fixed; inset: 0; z-index: 39; pointer-events: none; opacity: 0;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  /* unsichtbar = aus dem Rendering (visibility), sonst rechnet der Browser den Weichzeichner staendig mit */
  .menu-veil{ visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
  body.menu-open .menu-veil{ opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .5s ease, visibility 0s; }
  html{ scroll-behavior: auto; }

  /* ---------------- Hero / Scroll-Bühne ---------------- */
  .scroll-wrapper{ position: relative; height: 600vh; height: 600svh; }
  .stage{
    position: sticky; top: 0;
    height: 100vh; height: 100svh; width: 100%;   /* svh: bleibt auf dem Handy stabil, wenn die Adressleiste ein-/ausfährt */
    overflow: hidden;
    background: var(--bg);
  }
  canvas#stageCanvas, canvas#figGL{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  canvas#figGL{ pointer-events:none; }
  canvas#fxGL{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; visibility:hidden; image-rendering: pixelated; }
  /* Feste Oberfläche und Hero-Text nutzen dieselbe räumliche Wellenverzerrung. */
  .ui-wave-root{position:fixed;inset:0;height:100svh;z-index:40;pointer-events:none;}
  .ui-wave-root .service-toggle,.ui-wave-root .menu-fab,.ui-wave-root .side-panel{pointer-events:auto;}
  .wave-refracting{filter:url(#surfaceWarp);}
  .text-layer.wave-refracting{mix-blend-mode:difference;}
  .text-layer.wave-refracting .scroll-text{mix-blend-mode:normal;}
  canvas#rippleCanvas{
    position:fixed; inset:0; width:100%; height:100svh; display:block;
    z-index:71; pointer-events:none;
  }

  .text-layer{ position:absolute; inset:0; pointer-events:none; }
  .scroll-text{
    position: absolute;
    top: 0;
    font-family: "Unbounded", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #C6B444;
    mix-blend-mode: difference;
    visibility: hidden;
  }
  /* Rechte Seite: die vier Sätze laufen rechtsbündig, Kante mit gleichem Abstand
     zur rechten Linie wie der Claim links zur linken Linie */
  .scroll-text{ left: auto; right: 0; width: min(34vw, 520px); text-align: right; font-size: var(--t-h1); will-change: transform, opacity; }
  /* Fester Claim links unten im Linienrechteck */
  .hero-claim{
    margin: 0;
    position: absolute; left: 0; top: 0; width: min(34vw, 560px);
    font-family: "Unbounded", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--t-hero); line-height: 1.2; letter-spacing: -0.01em;
    color: #C6B444; mix-blend-mode: difference; will-change: transform, opacity;
    visibility: hidden;
  }
  .text-layer.wave-refracting .hero-claim{ mix-blend-mode: normal; }
  /* Standort ueber dem Claim: Stecknadel + Dresden, Regular, kleiner, gleiche Farbwirkung wie der Claim */
  .hero-loc{ position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.45em;
    font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-style: normal; font-size: var(--t-body); line-height: 1; letter-spacing: 0;
    color: #162896; visibility: hidden; will-change: transform, opacity; }   /* entspricht dem Blau des Claims auf dem Grau */
  .hero-loc svg{ width: 0.95em; height: 1.55em; display: block; flex: none; overflow: visible; }
  /* Lichtwelle auf dem blauen Hero-Text: jeder Buchstabe wird einzeln mitverschoben */
  .tw-word{ display: inline-block; white-space: nowrap; }
  .tw-char{ display: inline-block; will-change: transform; }


  /* ---------------- Menü-Block: weißer, eckiger Kasten von links ----------------
     Die Breite ist so gewählt, dass rechts oben - zwischen der Menü-Linie und der
     rechten Kante des Blocks - wieder genau so ein Quadrat entsteht wie links oben. */
  .side-panel{
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--panel-w);
    background: #fff; border-radius: 0; z-index: 40;
    padding: calc(var(--u) * 2) var(--u) 0 calc(var(--u) * 2);   /* gleicher Abstand zu den Linien wie die Linien zum Bildschirmrand */
    display: flex; flex-direction: column;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .6s cubic-bezier(.2,.8,.2,1), visibility 0s linear .6s;
  }
  .side-panel.open{ transform: none; visibility: visible; transition: transform .6s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  /* Markenname mittig im Kopffeld des Menü-Kastens (zwischen linker Linie und Menü-Linie) */
  .panel-brand{
    position: absolute; top: 0; left: var(--u); right: var(--u); height: var(--u);
    display: flex; align-items: center; justify-content: center; font-size: var(--t-h4); font-weight: 400; letter-spacing: 0; color: #111;
    opacity: 0; transition: opacity .35s ease;
  }
  .side-panel.open .panel-brand{ opacity: 1; transition-delay: .22s; }
  .side-panel ul{ list-style: none; display: flex; flex-direction: column; }
  .side-panel li{
    opacity: 0; transform: translateY(8px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .side-panel.open li{ opacity: 1; transform: none; transition-delay: calc(.18s + var(--i) * .06s); }
  /* Seiten: Regular in Grau; Überfahren und aktive Seite: Medium in Schwarz */
  .side-panel a{
    display: block; padding: 11px 0; font-size: var(--t-h4); font-weight: 400; letter-spacing: 0;
    color: var(--menu); text-decoration: none;
    transition: color .25s ease;
  }
  .side-panel a:hover, .side-panel a.active{ color: #111; }/* CTA unten: gleiche eckige Form wie oben rechts, mittig im Menü-Kasten *//* waagerecht mittig zwischen linker Linie und Menü-Linie, senkrecht mittig
     zwischen der Mittellinie und dem unteren Seitenende *//* Bild im unteren Rechteck des Menue-Kastens: zwischen linker Linie, Menue-Linie und Mittellinie *//* beim Oeffnen langsam von 0 auf 100 % einblenden, wie die Schrift */
  /* Markentext unten links im Menü-Kasten: eine Grundeinheit Abstand zur linken Linie,
     zur Menü-Linie und zur Mittellinie mit den Punkten */
  .panel-note{
    position: absolute; left: calc(var(--u) * 2); right: calc(var(--u) * 2);
    bottom: calc(100% - var(--mid) + var(--u));
    margin: 0; font-size: var(--t-body); font-weight: 400; line-height: 1.65; color: var(--menu);
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
  }
  /* Desktop: Text eine Grundeinheit unter der Querlinie (die Linie richtet sich per JS danach).
     Er fliegt erst ein, wenn das Panel steht – so nur von unten, nicht von links mitgezogen. */
  @media (min-width: 761px){
    .panel-note{
      bottom: auto;
      top: calc(var(--mid) + var(--u));
      left: calc(var(--u) * 2); right: calc(var(--u) * 2);
    }
    .side-panel.open p.panel-note{ transition-delay: .55s; }
  }
  .panel-note strong{ display: block; font-weight: 500; color: #111; margin-bottom: 6px; }
  .side-panel.open .panel-note{ opacity: 1; transform: none; transition-delay: .3s; }


  @media (max-width: 1000px){
    :root{ --u: 66px; --gap: 13px; --panel-w: clamp(460px, 56vw, 600px); }
    .cta-btn{ padding: 0 20px; font-size: var(--t-small); }
    .service-toggle a{ font-size: var(--t-small); }
    .service-toggle a.active{ font-size: var(--t-h4); }
  }
  /* Handy/Tablet: Umschalter zeigt nur die aktive Leistung + Pfeil, tippen klappt die andere darunter auf */
  @media (max-width: 760px){
    :root{ --gap: 11px; }
    .brand-logo{ height: 20px; }
    .service-toggle{ gap: 4px; }
    .service-toggle a:not(.active){ display: none; }
    .service-sep{ display: none; }
    .service-toggle a.active{ display: flex; align-items: center; gap: 6px; }
    .service-toggle a.active::after{
      content: ""; width: 6px; height: 6px; margin-top: -2px;
      border-right: 1.6px solid #111; border-bottom: 1.6px solid #111;
      transform: rotate(45deg); transition: transform .2s ease;
    }
    .service-toggle.open a.active::after{ transform: rotate(-135deg); }
    .service-toggle.open a:not(.active){
      display: flex; position: absolute; left: 50%; transform: translateX(-50%);
      top: calc(100% + 14px); background: #fff; color: var(--ink); font-weight: 500;
      padding: 12px 20px; border-radius: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }

  }
  @media (max-width: 560px){                       /* wenig Platz: der CTA lebt dann nur noch im Menü */
  }

  /* laengere Leistungs-Texte: auf kleineren Bildschirmen etwas engere Abstaende, damit alles zwischen Kopf- und Mittellinie bleibt */
  @media (min-width: 761px) and (max-width: 1279px){
    .s2-wrapper .s2-icon{ width: 60px; height: 60px; margin-bottom: 22px; }
    .s2-wrapper .s2-grid{ margin-top: clamp(24px, 4vh, 48px); }
  }

  @media (max-width: 760px) and (max-height: 740px){
    .s2-wrapper .s2-icon{ width: 32px; height: 32px; }

    .s2-wrapper .s2-item p{ line-height: 1.4; }
    .s2-wrapper .s2-item h3{ margin-bottom: 3px; }

  }
  /* ---------------- Intro-Section: Positionierungstext + Zitat ---------------- */
  .si-wrapper{ position: relative; height: 560vh; height: 560svh;
    margin-top: 0; }   /* (der direkte Anschluss an den Hero liegt jetzt bei der Problem-Section) */
  .si-stage{
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
    padding: calc(var(--u) * 2) var(--pad-r) var(--mid-rest) var(--pad-l);   /* oben links, gleicher Abstand wie ueberall */
  }
  /* Statue, die per Scroll vom Baum nach links laeuft (freigestelltes Video als Einzelbilder) */
  .si-walker{ position: absolute; z-index: 1; left: 0; bottom: 0; height: calc(var(--tree-h) * 0.46);   /* waechst mit dem Baum */ width: auto; aspect-ratio: 390 / 560;   /* breiter, weil die Figur ueber den Knien abgeschnitten und rangezoomt ist */
    opacity: 0; pointer-events: none; will-change: transform, opacity; }
  @media (max-width: 760px){ .si-walker{ height: 20%; } }
  /* Spalten-Aufteilung: Baum rechts (unten fixiert, rechts angeschnitten), Text links daneben.
     Die Textspalte endet immer vor dem Baum -> nie eine Ueberlagerung. */
  .si-stage{
    /* Baum passt sich an: begrenzt durch die Hoehe UND so, dass links immer mind. 540 px fuer den Text bleiben.
       Auf kleineren Bildschirmen schrumpft also der Baum, nicht die Schrift. */
    /* hoechstens so gross wie auf einem MacBook (ca. 840 px), damit der Baum auf grossen Monitoren nicht riesig wird */
    --tree-h: max(260px, min(calc((100vh - var(--u)) * 0.85), calc((100vw - var(--pad-l) - 540px) / 0.86), 840px));
    --tree-h: max(260px, min(calc((100svh - var(--u)) * 0.85), calc((100vw - var(--pad-l) - 540px) / 0.86), 840px));
    --tree-vis: 0.86;   /* sichtbarer Anteil des Baums, der Rest ragt rechts aus dem Bild */
    --col-w: calc(100vw - var(--pad-l) - var(--tree-h) * var(--tree-vis) - 48px);
  }
  .si-inner{ position: relative; z-index: 2; max-width: min(1100px, calc(100vw - var(--pad-l) - var(--col-r) - var(--u)));
    will-change: transform, opacity; }
  /* Unsichtbare Form, um die der Text fliesst: folgt der Kontur der Baumkrone (per JS berechnet) */
  .si-shape{ float: right; width: 0; height: 0; pointer-events: none; }
  /* Feste Stufen statt stufenlosem Mitschrumpfen */
  @media (min-width: 761px) and (max-width: 1279px){ .si-stage .si-text{ font-size: var(--t-h3); } }
  @media (min-width: 761px) and (max-width: 999px){ .si-stage .si-text{ font-size: var(--t-h3); } }
  /* Groesser als MacBook Pro 16": mehr Platz -> groessere Schrift und breitere Spalte */
  @media (min-width: 1800px) and (min-height: 1000px){
    .si-stage .si-inner{ max-width: min(1400px, calc(100vw - var(--pad-l) - var(--col-r) - var(--u))); }
  }
  @media (min-width: 2200px) and (min-height: 1150px){
    .si-stage .si-inner{ max-width: min(1680px, calc(100vw - var(--pad-l) - var(--col-r) - var(--u))); }
  }
  .si-tree{
    position: absolute; z-index: 1; bottom: 0;
    height: var(--tree-h); width: var(--tree-h);
    right: calc(var(--tree-h) * (var(--tree-vis) - 1));
    background: var(--tree-art, none) center bottom / contain no-repeat;
    opacity: 0; will-change: transform, opacity; pointer-events: none;
  }
  /* Zweiter Text unten links, mittig zwischen Mittellinie und Seitenende, endet ebenfalls vor dem Baum */
  .si-note{
    position: fixed; z-index: 30; left: var(--pad-l); max-width: 520px;
    top: calc(var(--mid-layout, var(--mid)) + (100% - var(--mid-layout, var(--mid))) / 2); pointer-events: none;
    display: grid;   /* beide Texte liegen uebereinander und werden ueberblendet */
    margin: 0; font-family: "Unbounded", "Inter", sans-serif; font-style: normal; font-size: var(--t-body); font-weight: 400; line-height: 1.55; letter-spacing: -0.005em;
    color: #2c5cff; opacity: 0; will-change: transform, opacity;
  }
  .si-note > span{ grid-area: 1 / 1; align-self: center; }/* Zitat unten im Streifen: gleiche Gestaltung wie vorher oben *//* Apfel-Text oben unter dem grossen Text: gleiche Gestaltung wie vorher unten */


  .si-note .si-p{ display: block; }
  .si-note .si-p + .si-p{ margin-top: 0.9em; }   /* sichtbarer Absatz */
  .si-note .si-note-b{ opacity: 0; }
  .si-note{ transition: filter .55s ease; }
  body.menu-open .si-note{ filter: blur(18px); }
  .si-text{
    font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-size: var(--t-h3); line-height: 1.22; letter-spacing: -0.015em;
    margin: 0; max-width: 1180px; opacity: 0; will-change: opacity, transform;
  }
  .si-text span{ color: rgb(176,176,173); }


  /* ---------------- Footer ---------------- */
  .site-footer{ position: relative; z-index: 2; margin-top: -65vh; margin-top: -65svh;   /* ueberlappt den Auslauf der letzten Section */
    height: 100vh; height: 100svh; background: var(--bg); overflow: hidden;
    font-family: "Unbounded", "Inter", sans-serif; color: var(--ink); }
  .ft-inner{ position: absolute; left: var(--pad-l); right: var(--pad-r);
    top: calc(var(--u) * 2); bottom: calc(100% - var(--mid-layout, var(--mid)) + var(--u) * 0.55);
    display: flex; flex-direction: column; }
  .ft-lead{ margin: 0; max-width: 780px; font-size: var(--t-h2); font-weight: 400; line-height: 1.3; letter-spacing: -0.015em; }
  .ft-mail{ margin-top: auto; align-self: flex-start; color: var(--ink); text-decoration: none;
    font-size: min(clamp(34px, 5.4vw, 104px), calc((100vw - var(--pad-l) - var(--pad-r)) / 12.9));   /* nie breiter als die Inhaltsspalte */
    font-weight: 400; line-height: 1.05; letter-spacing: -0.035em;
    transition: color .25s ease; }
  /* Link nur auf dem Text selbst (inline), damit er nicht schon im leeren Raum daneben blau wird */
  .ft-mail a{ color: inherit; text-decoration: none; transition: color .25s ease; }
  .ft-mail a:hover{ color: #2c5cff; }
  .ft-row{ margin-top: clamp(24px, 4.5vh, 52px); display: grid; grid-template-columns: auto 1fr 1fr 1fr; column-gap: clamp(32px, 5vw, 96px); font-size: var(--t-small); line-height: 1.75; color: var(--menu); }
  .ft-row a{ color: var(--menu); text-decoration: none; transition: color .2s ease; }
  .ft-row a:hover{ color: var(--ink); }
  .ft-row strong{ color: var(--ink); font-weight: 500; }
  .ft-row ul{ list-style: none; margin: 0; padding: 0; }
  .ft-social{ display: flex; gap: 22px; align-items: flex-start; padding-top: 3px; }
  .ft-social a{ color: var(--ink); display: block; width: 24px; height: 24px; }
  .ft-social a:hover{ color: #2c5cff; }
  .ft-social svg{ width: 100%; height: 100%; display: block; }
  /* Nach-oben-Button: untere Haelfte der rechten Spalte zwischen Kopf- und Mittellinie */
  .ft-top{ position: absolute; right: 0; width: var(--col-r);
    top: calc(var(--u) + (var(--mid-layout, var(--mid)) - var(--u)) / 2); bottom: calc(100% - var(--mid-layout, var(--mid)));
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #111; border: 0; padding: 0; cursor: pointer;
    transition: background .25s ease, color .25s ease; }
  .ft-top svg{ width: 34%; max-width: 30px; height: auto; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .ft-top:hover{ background: #111; color: #fff; }
  .ft-top:hover svg{ transform: translateY(-4px); }
  .ft-top:focus-visible{ outline: 2px solid #2c5cff; outline-offset: -4px; }
  /* Wortmarke ueber die ganze Breite im unteren Streifen */
  .ft-mark{ position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% - var(--mid-layout, var(--mid)));
    display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }
  .ft-mark span{ display: block; white-space: nowrap; font-weight: 500; line-height: 1; letter-spacing: -0.045em;
    font-size: 100px; will-change: transform, opacity; }
  .ft-mark i{ font-style: normal; color: #2c5cff; }
  [data-ft]{ will-change: transform, opacity; }
  @media (min-width: 1800px) and (min-height: 1000px){ .ft-lead{ max-width: 980px; } }
  @media (min-width: 761px) and (max-width: 1279px){ .ft-lead{ font-size: var(--t-h2); } }
  @media (max-width: 760px){
    .ft-inner{ top: calc(var(--u) + 28px); }
    .ft-social a{ width: 18px; height: 18px; }
  }

  /* ---------------- Section 2: Leistungen ---------------- */
  .s2-wrapper{ position: relative; height: 320vh; height: 320svh;
    margin-top: -100vh; margin-top: -100svh; }   /* startet genau, wenn die Intro-Section oben raus ist */
  .s2-stage{
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
    padding: var(--u) var(--pad-r) var(--mid-rest) var(--pad-l);   /* Inhalt sitzt mittig in der Box zwischen Kopf- und Mittellinie */
    display: flex; flex-direction: column; justify-content: center;   /* Überschrift + Spalten als ein Block vertikal mittig */
    will-change: opacity;
  }
  .s2-layout{ display: contents; }
  .s2-title{
    font-family: "Unbounded", "Inter", sans-serif; font-size: var(--t-h1); line-height: 1.18; letter-spacing: -0.015em;
    color: var(--ink); opacity: 0;
    text-align: left; margin: 0;                   /* Überschrift linksbündig über den Spalten */
  }
  .s2-grid{
    margin-top: clamp(40px, 7vh, 80px); width: 100%;
    display: grid; grid-template-columns: repeat(4, 1fr);
  }
  .s2-item{
    position: relative; padding: 4px 30px 8px 0;
    font-family: "Unbounded", "Inter", sans-serif;
  }
  .s2-content{ opacity: 0; will-change: opacity, transform; }
  .s2-icon{ width: 76px; height: 76px; margin-bottom: 40px; }
  .s2-icon svg{ width: 100%; height: 100%; display: block; }
  .s2-item h3{ font-size: var(--t-h4); font-weight: 500; letter-spacing: -0.005em; margin-bottom: 14px; color: var(--ink); }
  .s2-item p{ font-size: var(--t-small); font-weight: 400; line-height: 1.7; }

  @media (max-width: 1080px){
    .s2-grid{ grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  }
  @media (max-width: 760px){
    /* Handy: Section bleibt stehen wie am Desktop, Überschrift fest, Felder fliegen nacheinander ein.
       Kompakt (Icon links, Text rechts), damit alle vier Felder auf einen iPhone-Bildschirm passen. */
    .s2-stage{ padding: var(--u) var(--pad-r) var(--mid-rest) var(--pad-l); }
    .s2-title{ line-height: 1.25; }

    .si-text{ line-height: 1.3; }
    /* Handy: Baum klein im unteren Streifen rechts, Text links daneben */


    .si-tree{ height: calc(100% - var(--mid-layout, var(--mid)) + 24px); width: auto; aspect-ratio: 1 / 1; right: -6px; max-width: 60vw; }
    .si-note{ left: calc(var(--u) + 20px); max-width: calc(100vw - var(--u) - 20px - 150px); }
    .s2-grid{ grid-template-columns: 1fr; row-gap: 18px; margin-top: 30px; }
    .s2-item{ padding: 2px 4px 2px 0; }
    .s2-content{ display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; }
    .s2-icon{ width: 40px; height: 40px; margin: 2px 0 0; grid-row: span 2; }
    .s2-item h3{ grid-column: 2; margin-bottom: 6px; }
    .s2-item p{ grid-column: 2; line-height: 1.55; }
  }

  /* ---------------- Section 3: Organisches Wachstum ---------------- */
  .s3-wrapper{ position: relative; height: 760vh; height: 760svh; margin-top: -62vh; margin-top: -62svh; }
  .s3-stage{
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
    background: transparent; color: var(--ink);
  }
  .s3-image{
    position: absolute; z-index: 3; left: 0; bottom: 0; width: 100%; height: auto;
    display: block; pointer-events: none; user-select: none; will-change: transform, opacity; opacity: 0;
  }
  @media (max-width: 760px){
    .s3-image{ width: 150%; left: -25%; }
  }

  /* Referenz-Karten: laufen als eigene Ebene hinter Schrift, Figuren und Linien mit dem Text durch */
  .s3-cards{
    position: absolute; z-index: 1; left: 0; top: 0; height: 100%; width: 0;
    transform: translate3d(100vw, 0, 0); will-change: transform, opacity; pointer-events: none;
  }
  .s3-card{ top: var(--y); margin: 0;
    height: min(48vh, 540px); height: min(48svh, 540px); aspect-ratio: 3 / 5; overflow: hidden; background: #cfcfcc;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  }/* Der Schatten folgt jedem animierten Buchstaben, nicht einem Rechteck. */
  .s3-card video, .s3-card img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .s3-card img{ object-position: 50% 0; }
  .s3-card--fit{ background: #f5f5f5; }
  .s3-card--fit img{ object-fit: contain; object-position: 50% 0; }
  .s3-card video.s3-reel { object-position: 50% 50%; }
  .s3-card video.s3-reel{ background: #111; }
  @media (max-width: 760px){
    .s3-card{ height: 30vh; height: 30svh; top: var(--y-m); }
  }
  /* Der neue Inhalt wird nur innerhalb des vorhandenen Linienrahmens sichtbar.
     Section 3 bleibt als eine einzige feststehende Scrollbühne erhalten. */
  .s4-overlay{ position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .s4-field{ position: absolute; z-index: 2; left: var(--u); right: var(--col-r);
    top: var(--u); bottom: calc(100% - var(--mid-layout, var(--mid))); display: grid;
    grid-template-columns: 57% 43%; opacity: 0; transform: translate3d(0,18px,0);
    will-change: opacity, transform; }
  .s4-left{ display: flex; min-width: 0; }
  .s4-photo{ position: relative; min-width: 0; height: 100%; }
  .s4-landscape{ width: 100%; height: 100%; object-fit: cover;
    object-position: center 52%; display: block; }
  .s4-accordion{ width: min(85%, 790px); margin-left: 9%; display: grid;
    gap: clamp(18px, 3vh, 34px); font-family: "Unbounded", "Inter", sans-serif; }
  .s4-item{ display: grid; grid-template-columns: 32px 2px minmax(0,1fr);
    column-gap: clamp(16px, 2vw, 40px); align-items: start;
    color: #a9a9a9; transition: color .3s ease; }
  .s4-item.is-active{ color: #171717; }
  .s4-item.is-active .s4-trigger{ font-weight: 500; }
  .s4-number{ font-size: var(--t-h4); line-height: 1.45; font-weight: 400; }
  .s4-track{ position: relative; align-self: stretch; min-height: 44px; background: #bcbcbc; }
  .s4-track::after{ content: ""; position: absolute; inset: 0; background: #111;
    transform: scaleY(var(--fill, 0)); transform-origin: top; }
  .s4-trigger{ appearance: none; display: block; width: 100%; border: 0; padding: 0;
    background: none; color: inherit; cursor: pointer; text-align: left;
    font-family: "Unbounded", "Inter", sans-serif; font-weight: 400;
    font-size: var(--t-h3); line-height: 1.45;
    letter-spacing: -0.015em; }
  .s4-trigger:focus-visible{ outline: 2px solid #2C5CFF; outline-offset: 5px; }
  .s4-detail{ display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows .42s ease, opacity .3s ease; }
  .s4-item.is-active .s4-detail{ grid-template-rows: 1fr; opacity: 1; }
  .s4-detail-inner{ min-height: 0; overflow: hidden; }
  .s4-detail p{ max-width: 650px; padding: clamp(16px, 2.5vh, 28px) 0 8px;
    color: #666; font-family: "Unbounded", "Inter", sans-serif; font-weight: 400;
    font-size: var(--t-small); line-height: 1.65; letter-spacing: 0; }
  .s4-portrait{ position: absolute; z-index: 4; left: 50%;
    bottom: calc(-1 * var(--mid-rest)); height: 83svh; width: auto;
    transform: translate3d(-50%,24px,0); opacity: 0; pointer-events: none;
    will-change: transform, opacity; }
  .s4-caption{ position: absolute; z-index: 1; left: var(--u); right: var(--col-r);
    top: var(--mid-layout, var(--mid)); bottom: 0; flex-direction: column;
    align-items: center; padding: clamp(20px, 5svh, 60px) 5% 0 0;
    font-family: "Unbounded", "Inter", sans-serif;
    opacity: 0; transform: translate3d(0,14px,0);
    will-change: opacity, transform; }
  /* Punkt 2 "Was gibt's Neues?": Statuen-Gruppe rechts unten statt Foto und Portraet */
  .s4-statues{ position: fixed; z-index: 41; right: 0; bottom: 0;
    height: 68svh; width: auto; max-width: 50vw; object-fit: contain; object-position: right bottom;
    opacity: 0; transform: translate3d(0,24px,0); pointer-events: none; will-change: transform, opacity; }
  .s4-photo{ will-change: opacity; }
  .s4-statues{ transition: filter .55s ease; }
  body.menu-open .s4-statues{ filter: blur(18px); z-index: 39; }   /* liegt dann unter dem Menue-Kasten */
  .s4-photo, .s4-portrait, .s4-caption{ display: none !important; }   /* Foto, Portraet und Signatur entfernt */
  .s4-caption h2{ font-size: var(--t-h3); line-height: 1.35;
    font-weight: 500; letter-spacing: -0.015em; white-space: nowrap; }
  .s4-signature{ display: block; width: clamp(180px, 15vw, 300px); height: auto;
    margin: 5px 0 0 10%; }
  @media(max-width: 760px){
    .s4-field{ display: block; bottom: 19svh; }
    .s4-photo{ position: absolute; top: 0; left: 0; right: 0; height: 42svh; }
    .s4-landscape{ object-position: center 55%; }
    .s4-left{ position: absolute; inset: 42svh 0 0; display: block; }
    .s4-accordion{ width: 95%; margin: 10px 0 0 2%; gap: 9px; }
    .s4-item{ grid-template-columns: 23px 2px minmax(0,1fr); column-gap: 14px; }
    .s4-detail p{ padding: 7px 0 3px; line-height: 1.55; }
    .s4-portrait{ height: 40svh; bottom: 0; }
    .s4-caption{ top: 81svh; padding: 9px 0 0; }
    .s4-signature{ width: 170px; margin: 0 0 0 12%; }
    /* Handy: Statuen sitzen dort, wo bei Punkt 1 das Foto ist */
    .s4-statues{ top: calc(var(--u) + 2svh); bottom: auto; left: 4vw; right: auto; width: 92vw; max-width: none; height: 30svh; object-position: center bottom; }
    .s4-field .s4-left{ inset: 32svh 0 0; }
  }
  ::-webkit-scrollbar{ width:0; height:0; }

  /* ================= Handy-Layout nach Vorbild pear.no =================
     Linien enger am Rand (--ml), Kopfzeile 64 px, Logo klein oben links,
     Menue-Knopf oben rechts, kein Umschalter in der Mitte. */
  @media (max-width: 760px){
    :root{ --ml: 21px; --pad-l: calc(var(--ml) + 14px); --pad-r: calc(var(--ml) + 14px); --panel-w: 100vw; }
    .gl-vright{ top: 0; }                 /* rechte Linie laeuft wie die linke bis ganz nach oben */
    .gl-vleft{ left: var(--ml); }
    .dot-l{ left: var(--ml); }
    .gl-vmenu{ display: none; }            /* Menue ueber die ganze Seite: keine zusaetzliche Linie */
    .head-blur{ left: 0; }
    .service-toggle{ display: none !important; }
    .cta-btn{ display: none; }
    .site-header .brand{ position: absolute; top: 0; width: auto; height: var(--u); justify-content: flex-start; }
    .site-header .brand-logo{ height: 14px; }
    .menu-fab{ left: auto; top: 0; height: var(--u); }
    /* Inhalte: gleicher Abstand zur Linie wie die Linie zum Rand (plus etwas Luft) */
    .side-panel{ padding: calc(var(--u) + 28px) var(--pad-r) 0 var(--pad-l); }
    .panel-note{ left: var(--pad-l); right: var(--pad-r); }
    .s2-wrapper .s2-stage{ padding: var(--u) var(--pad-r) var(--mid-rest) var(--pad-l); }
    .ft-inner{ left: var(--pad-l); right: var(--pad-r); }
    .si-stage{ padding: calc(var(--u) + 24px) var(--pad-r) var(--mid-rest) var(--pad-l); }
    body .si-note{ left: var(--pad-l); }
    .s4-field{ left: var(--ml); right: var(--ml); }
    .scroll-text, .hero-claim{ width: calc(100vw - 2 * var(--pad-l)); }
  }

  @media (max-width: 760px){
    .si-note .si-note-a{ visibility: hidden !important; }                  /* Zitat entfaellt auf dem Handy */
    .si-stage .si-tree{ height: calc((100% - var(--mid-layout, var(--mid)) + 24px) * 1.5); width: auto; aspect-ratio: 1 / 1; right: -18px; max-width: none; }
    .si-stage .si-walker{ height: 23%; }
  }

  @media (max-width: 760px){
    :root{ --safe-t: env(safe-area-inset-top, 0px);
           --safe-b: env(safe-area-inset-bottom, 0px);
           --u: calc(64px + var(--safe-t)); }
    .site-header .brand, .menu-fab{ box-sizing: border-box; padding-top: var(--safe-t); }
  }

  @media (max-width: 760px){
    .panel-brand{ box-sizing: border-box; padding-top: var(--safe-t); left: var(--ml); right: var(--ml); }
    /* Logo und Menue-Knopf: seitlich derselbe Abstand zur Linie wie nach unten zur Kopflinie */
    .site-header .brand{ left: var(--pad-l); }                  /* buendig mit dem Text darunter */
    .menu-fab{ width: 44px; right: calc(var(--pad-r) - 16px); }   /* Quadrate (12 px) enden buendig mit dem Text */
    .fab-squares{ grid-template-columns: 5px 5px; grid-template-rows: 5px 5px; gap: 2px; }
    .fab-squares i{ width: 5px; height: 5px; }
    .fab-triangle{ width: 9px; height: 11px; }
  }

  @media (max-width: 760px){
    .s3-stage .s3-image{ width: 182%; left: -76.4%; }   /* zeigt die Figur mit blauem Kranz, die Frau und den Helm */
  }

  @media (max-width: 760px){
    /* Footer: Nach-oben-Button entfaellt, Wortmarke zweizeilig ueber volle Breite */
    .site-footer .ft-top{ display: none; }
    .ft-mark{ justify-content: flex-start; padding-left: 12px; }
    .ft-mark span{ white-space: normal; line-height: 0.9; }
    .ft-mark span:not([data-two]){ white-space: nowrap; line-height: 1; }   /* Ausweich-Fall: einzeilig ueber die volle Breite */
    .ft-mark b{ display: block; font-weight: 500; white-space: nowrap; }
    /* Fragen-Section: Statuen gross unten am Bildschirmrand, aussen staerker angeschnitten;
       Akkordeon mittig im Rechteck zwischen Kopflinie und Statuen */
    .s4-statues{ top: auto !important; bottom: 0 !important; left: -14vw !important; right: auto !important;
      width: 128vw !important; height: auto !important; max-width: none !important; object-position: center bottom !important; }
    .s4-field{ bottom: calc(128vw * 0.7688); }
    .s4-field .s4-left{ inset: 0; display: flex; align-items: center; }
    /* Referenz-Karten groesser */
    .s3-stage .s3-card{ height: 36vh; height: 36svh; }
  }/* Baum-Section: Apfel-Text als zweiter grosser Text (blau, medium) */


  #siText, #siNoteA{ will-change: filter; }

  /* Lichtwelle liegt bei geoeffnetem Menue unter dem Menue und wird mit weichgezeichnet */
  canvas#rippleCanvas{ transition: filter .55s ease; }
  body.menu-open canvas#rippleCanvas{ z-index: 39; }

  .viewport-measure{
    position: fixed; top: 0; left: 0; width: 0; height: 100vh; height: 100svh;
    visibility: hidden; pointer-events: none; contain: strict;
  }
  /* Zweite Messhilfe: sichtbare Hoehe im jetzigen Zustand der Browserleiste (100dvh). Ist sie
     groesser als 100svh, hat Safari seine Leiste eingeklappt – site-1.js laesst die Querlinie
     und alles, was an ihr haengt, um diesen Gewinn nach unten gleiten (barShift). */
  .viewport-measure--dvh{ height: 100vh; height: 100dvh; }
  /* Bildszenen werden einmal auf die große Viewport-Höhe ausgelegt.
     Safari beschneidet nur den unteren Ausschnitt beim Öffnen seiner Leiste. */
  @media (max-width: 760px){
    :root{ --mid: 75svh; --mid-layout: 75svh; --mid-rest: calc(100lvh - 75svh); }
    .stage, .si-stage, .s2-stage, .s3-stage,
    .ui-wave-root, .grid-frame, canvas#rippleCanvas{
      bottom: auto; height: 100vh; height: 100lvh;
    }
    .grid-frame .gl-vleft, .grid-frame .gl-vright{ bottom: 0; }
    .s4-statues{ top: 100lvh !important; bottom: auto !important; translate: 0 -100%; }
    .si-inner{ display: grid; width: 100%; max-width: none; }
    .si-shape{ display: none; }
    .si-stage .si-text{
      grid-area: 1 / 1; align-self: start; margin: 0; max-width: none; line-height: 1.28;
      overflow-wrap: anywhere;
    }
    .si-stage .si-tree, .si-stage .si-walker{ bottom: 0; }
    body .si-note{ top: calc(var(--mid-layout, var(--mid)) + 24px); bottom: auto; }
    .si-note.si-note--above{ top: calc(var(--mid-layout, var(--mid)) + 24px); bottom: auto; }
    .si-note .si-p + .si-p{ margin-top: .75em; }
    .s2-wrapper .s2-grid{ margin-top: 20px; row-gap: 12px; }
    .s2-layout{ display: block; width: 100%; flex-shrink: 0;
      transform: scale(var(--services-scale, 1)); transform-origin: left center; }   /* links buendig bleiben, auch wenn verkleinert */
    /* Wenig Platz: eine Stufe runter statt eines eigenen Zwischenwerts. */
    .services-compact .s2-title{ font-size: var(--t-h2); }
    .services-compact .s2-grid{ margin-top: 14px; row-gap: 10px; }
    .services-compact .s2-content{ grid-template-columns: 30px 1fr; column-gap: 12px; }
    .services-compact .s2-icon{ width: 30px; height: 30px; }
    .services-compact .s2-item h3{ margin-bottom: 4px; }
    .services-compact .s2-item p{ line-height: 1.45; }
    .services-compact .si-note{ font-size: 11px; line-height: 1.4; }
    /* Der Footer endet an der sichtbaren Kante. Seine Textgrößen und der
       Abstand zur festen Querlinie hängen nicht von der Browserleiste ab. */
    .site-footer{ height: 100svh; height: 100dvh; }
    .site-footer .ft-inner{ top: calc(var(--u) + 28px); bottom: auto;
      height: calc(var(--mid-layout, var(--mid)) - var(--u) - 56px); }
    .ft-inner > *{ flex-shrink: 0; }
    .site-footer .ft-mark{ top: calc(var(--mid-layout, var(--mid)) + 24px); bottom: 24px; height: auto;
      align-items: center; }   /* gleicher Abstand nach oben zur Linie und nach unten zum Seitenende */
  }

  /* Vorletzte Section: Video der Statue mit Apfelnetz statt Statuen-Gruppe.
     Liegt hinter dem Text, rechts und unten fixiert. Scroll steuert das Bild. */
  .s4-statues{ display: none !important; }
  .s4-video{ position: fixed; z-index: 0; right: 0; bottom: 0;
    width: 80vw; height: auto; aspect-ratio: 16 / 9;
    opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity;
    /* weiche Kanten links und oben, damit kein Bildrand sichtbar wird */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%), linear-gradient(to bottom, transparent 0, #000 10%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 10%), linear-gradient(to bottom, transparent 0, #000 10%);
    mask-composite: intersect;
    transition: filter .55s ease; }
  /* s4-video: Weichzeichner beim Menue kommt jetzt von .menu-veil */
  /* Handy: Video gross, rechts angeschnitten, die Figur fuellt den unteren Bereich.
     Hoehe richtet sich nach dem Platz; der Text sitzt mittig darueber. */
  @media (max-width: 760px){
    :root{ --s4v-h: max(30svh, min(58svh, 125vw, calc(100svh - var(--u) - 470px))); }   /* kleinere Displays: Video etwas kleiner, damit Ueberschrift + Akkordeon Platz haben */
    .s4-video{ width: calc(var(--s4v-h) * 16 / 9); height: var(--s4v-h); aspect-ratio: auto;
      right: calc(var(--s4v-h) * 16 / 9 * -0.09);    /* Figur weiter links, rechts nur minimal angeschnitten */
      top: 100vh; top: 100svh; bottom: auto; translate: 0 -100%;   /* Unterkante des sichtbaren Bereichs bei eingeblendeter Leiste; klappt sie ein, rueckt site-1.js das Bild um barShift mit */
      -webkit-mask-image: none; mask-image: none; }

  }
  /* Desktop: Footer schiebt sich mit weicher statt harter Oberkante ueber die vorletzte Section */
  .site-footer{
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 min(18vh, 150px));
    mask-image: linear-gradient(to bottom, transparent 0, #000 min(18vh, 150px));
  }
  @media (max-width: 760px){
    .site-footer{ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px);
      mask-image: linear-gradient(to bottom, transparent 0, #000 72px); }
  }

  /* Intro: Philosophie-Block (Ueberschrift, blauer Leitsatz, grauer Erklaertext).
     Liegt am Desktop ueber dem Leistungstext und wird vor ihm ausgeblendet. */
  .si-phil{ position: absolute; z-index: 3; top: 0; left: 0; max-width: 100%;
    opacity: 0; visibility: hidden; will-change: opacity, transform; }
  /* Ueberschrift im selben Stil wie die anderen Section-Ueberschriften (z. B. Leistungen) */
  .si-kicker{ margin: 0 0 var(--phil-gap, clamp(24px, 3.6vh, 40px));
    font-family: "Unbounded", "Inter", sans-serif; line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); }
  .si-phil-text{ margin: 0; font-family: "Unbounded", "Inter", sans-serif; }
  .si-phil-text span{ color: rgb(190,203,245); }
  .si-phil-sub{ margin: var(--phil-gap, clamp(24px, 3.6vh, 40px)) 0 0; max-width: 620px; opacity: 0; will-change: opacity, transform;
    font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-size: var(--t-small); line-height: 1.6; color: #6f6f6c; }
  .si-text{ visibility: hidden; }
  @media (min-width: 1800px) and (min-height: 1000px){ .si-phil-sub{ max-width: 760px; } }
  @media (min-width: 761px) and (max-width: 1279px){ .si-phil-sub{ font-size: var(--t-small); } }
  @media (max-width: 760px){
    .si-stage .si-phil{ position: relative; grid-area: 1 / 1; align-self: start; width: auto !important; }

    .si-kicker{ line-height: 1.25; }
    .si-phil-text{ overflow-wrap: anywhere; }
    .si-phil-sub{ line-height: 1.55; }
  }

  /* Tablet und kleiner: Ueberschrift der Leistungen ueber die ganze Breite */


  /* Menue Handy: Umschalter Social Media | Mitarbeitergewinnung direkt ueber dem Bild */
  .panel-switch{ display: none; }
@media (max-width: 760px){
  /* Handy-Menue: unten die zwei Bereiche als normale Buttons - gleiche Hoehe,
     Schrift und Form wie jeder andere Button. Vorher waren es zwei grosse
     Vollflaechen-Felder; die Groesse kommt jetzt aus --btn-h im Schlussblock. */
  .panel-switch{ position: absolute; z-index: 1;
    left: var(--ml); right: var(--ml); top: auto; bottom: 0;
    display: flex; align-items: center;
    opacity: 0; transform: translateY(8px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
  .side-panel.open .panel-switch{ opacity: 1; transform: none; transition-delay: .45s; }
  .side-panel .panel-switch a{ display: inline-flex; align-items: center; justify-content: center;
    text-align: center; hyphens: manual; }
  .panel-note{ bottom: calc(100% - var(--mid) + 72px); }
}

  /* Footer, schmalere Desktop-/Tablet-Breiten: Social-Icons in eigener Zeile, die drei Link-Spalten darunter */
  @media (min-width: 761px) and (max-width: 1279px){
    /* Spalten umbrechen statt ueber den rechten Rand hinaus zu laufen */
    .ft-row{ display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: clamp(28px, 4.5vw, 56px); row-gap: clamp(18px, 2.6vh, 28px); }
    .ft-row > *{ flex: 0 0 auto; }
    .ft-row .ft-social{ flex-basis: 100%; }
  }
  /* Handy: Akkordeon mit denselben Seitenabstaenden wie die uebrigen Inhalte */
  @media (max-width: 760px){
    body .s4-field{ left: var(--pad-l); right: var(--pad-r); }
  }

  /* Ueberschrift der Partnerschafts-Section: gleicher Stil wie die anderen Section-Ueberschriften */
  .s4-left{ flex-direction: column; justify-content: center; align-items: stretch; }
  .s4-title{ margin: 0 0 clamp(28px, 5vh, 56px) 9%; font-family: "Unbounded", "Inter", sans-serif; font-size: var(--t-h1); line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); }
  @media (max-width: 760px){
    body .s4-field .s4-left{ flex-direction: column; justify-content: flex-start; align-items: stretch; padding-top: 24px; }   /* oben an der Kopflinie wie die anderen Sections */
    .s4-title{ margin: 0 0 16px 0; line-height: 1.25; }
    body .s4-accordion{ margin-left: 0; }
    body .s4-field{ top: var(--u); bottom: auto; }

    body .s4-detail p{ padding: 7px 0 3px; }
  }

  /* sehr kleine Handys (z. B. iPhone SE): Akkordeon-Text etwas kompakter */
  @media (max-width: 760px) and (max-height: 700px){


    .s4-title{ margin-bottom: 12px; }
    .s4-accordion{ gap: 6px; }
  }

  /* Hohe/schmale Desktop-Fenster (z. B. hochkant): Baum und Video nach der Hoehe skalieren statt nur nach der Breite,
     damit die Figuren gross bleiben und kein leerer Raum entsteht */
  @media (min-width: 761px) and (max-aspect-ratio: 5/4){
    .si-stage{
      --tree-h: min(840px, max(260px, min(calc((100vh - var(--u)) * 0.85), calc((100vw - var(--pad-l) - 540px) / 0.86)), min(calc((100vh - var(--u)) * 0.62), calc(100vw * 0.8))));
      --tree-h: min(840px, max(260px, min(calc((100svh - var(--u)) * 0.85), calc((100vw - var(--pad-l) - 540px) / 0.86)), min(calc((100svh - var(--u)) * 0.62), calc(100vw * 0.8))));
    }
  }
  @media (min-width: 761px){
    .s4-video{ width: max(80vw, calc(66vh * 16 / 9)); width: max(80vw, calc(66svh * 16 / 9)); }
  }
  /* Hohe Fenster: Figur weiter nach rechts (rechts minimal angeschnitten), damit das Akkordeon breiter bleibt */
  @media (min-width: 761px) and (max-aspect-ratio: 5/4){
    .s4-video{ right: calc(max(80vw, calc(66svh * 16 / 9)) * -0.12); }
  }

  /* Handy: Leistungen oben an der Kopflinie; die Querlinie rueckt direkt darunter (eingerahmte Box),
     darunter steht der blaue Text etwas groesser */
  @media (max-width: 760px){
    body .s2-wrapper .s2-stage{ justify-content: flex-start; padding-top: calc(var(--u) + 24px); }
    body .s2-layout{ transform-origin: left top; }
    body .si-note{ line-height: 1.5; }
    body.services-compact .si-note{ font-size: 12px; line-height: 1.45; }
  }

  /* Leistungen auf breiteren Handy-/Tablet-Ansichten: Icons ueber dem Text (fuellt die Hoehe besser) */
  @media (max-width: 760px){
    body.s2-stack .s2-content{ display: block; }
    body.s2-stack .s2-icon{ width: 46px; height: 46px; margin: 0 0 12px; }
    body.s2-stack .s2-item h3{ margin-bottom: 8px; }
    body.s2-stack .s2-item p{ line-height: 1.6; }
    body.s2-stack .s2-wrapper .s2-grid{ row-gap: 26px; }
    body.s2-stack2 .s2-wrapper .s2-grid{ grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 30px; }
  }

  /* Weichzeichner waehrend des Scrollens per Button/Menue */
  .nav-veil{ position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0;
    background: rgba(220,220,218,.22);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    transition: opacity .14s ease-out, visibility 0s linear .14s; }            /* am Ziel schnell wieder scharf */
  .nav-veil{ visibility: hidden; }
  .nav-veil.on{ opacity: 1; visibility: visible; transition: opacity .28s ease, visibility 0s; }

  /* Handy-Hero: "Jetzt anfragen" unter der Querlinie, durchsichtig mit Glas-Weichzeichner, weisse Schrift */
  .hero-cta{ display: none; }
  @media (max-width: 760px){
    .hero-cta{ display: inline-flex; position: absolute; top: 0; left: 0; z-index: 5; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: auto; visibility: hidden;
      font-family: "Unbounded", "Inter", sans-serif; font-weight: 500; letter-spacing: .01em; text-decoration: none;
      will-change: transform, opacity; }

  }

  /* ===== Organisches Wachstum: Ueberschrift + Referenz-Karussell ===== */
  .s3-head{ position: absolute; z-index: 4; left: var(--pad-l); right: var(--pad-r); top: calc(var(--u) * 2);
    display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: end;
    opacity: 0; visibility: hidden; will-change: transform, opacity; }
  .s3-title{ grid-column: 1; margin: 0; font-family: "Unbounded", "Inter", sans-serif; font-size: var(--t-h1); line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); }
  .s3-sub{ grid-column: 1; margin: clamp(10px, 1.6vh, 16px) 0 0; font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-size: var(--t-small); line-height: 1.5; }/* eckige, helle Pfeil-Buttons im Stil der Seite */
  .s3-viewport img{ user-select: none; -webkit-user-drag: none; }
  .s3-viewport{ position: absolute; z-index: 1; right: 0; overflow: hidden; opacity: 0; visibility: hidden;
    will-change: transform, opacity;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade, 160px)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--fade, 160px)), transparent); }
  .s3-viewport .s3-cards{ position: absolute; left: 0; top: 0; height: 100%; opacity: 1;
    transform: translate3d(0,0,0); pointer-events: none; }
  .s3-viewport .s3-card{ top: 0; aspect-ratio: auto; }
  .s3-image{ transform: translate3d(0, calc(110% + var(--drop, 0%)), 0); }
  @media (max-width: 760px){
    .s3-head{ top: calc(var(--u) + 24px); column-gap: 14px; }
    .s3-title{ line-height: 1.25; }
    .s3-sub{ margin-top: 8px; }

  }
  /* hohe Desktop-Fenster: Statuen groesser, damit zwischen Ueberschrift und Karten kein Loch entsteht */
  @media (min-width: 761px) and (max-aspect-ratio: 5/4){ .s3-image{ width: 140%; left: -20%; } }

  /* Laufschrift ueber dem Footer */
  .s5-wrapper{ position: relative; height: 420vh; height: 420svh; }   /* langsamer: mehr Scrollweg fuer den Satz */
  .s5-stage{ position: relative; height: 100%; }
  /* fest in der Bildschirmmitte: bewegt sich nur waagerecht, schwebt nicht von unten herein */
  .s5-copy{ position: fixed; z-index: 2; top: 50%; left: 0; visibility: hidden; margin: 0; width: max-content; white-space: nowrap;
    transform: translate3d(100vw,-50%,0); will-change: transform;
    font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-size: clamp(64px, 10vw, 180px);
    line-height: 1.08; letter-spacing: -0.045em; color: var(--ink); pointer-events: none; }
  .s5-copy span{ display: inline-block; will-change: transform; }
  @media (max-width: 760px){ .s5-copy{ font-size: clamp(46px, 15vw, 76px); } }

  /* ===== Lade-Animation ===== */
  html.is-loading, html.is-loading body{ overflow: hidden; }
  /* Forum Romanum als Hintergrund der ganzen Lade-Seite, der Schriftzug ganz normal darauf */
  .site-loader{ position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
    background: #fff url("../images/loader-forum.webp") center / cover no-repeat;
    transition: opacity .6s ease, transform .75s cubic-bezier(.7,0,.2,1), visibility 0s linear .75s; }
  .site-loader.is-done{ opacity: 0; transform: translateY(-4%); visibility: hidden; }
  /* leichter weisser Schleier hinter dem Schriftzug, damit er auf dem Bild gut lesbar bleibt */
  .site-loader::before{ content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 46% 30% at 50% 50%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%); }
  .site-loader .sl-mark{ position: relative; }
  @media (max-width: 760px){
    .site-loader{ background-image: url("../images/loader-forum-s.webp"); }
    .site-loader::before{ background: radial-gradient(ellipse 80% 24% at 50% 50%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%); }
  }
  .sl-mark{ display: flex; align-items: flex-end; font-family: "Unbounded", "Inter", sans-serif; font-weight: 500;
    font-size: clamp(30px, 6.2vw, 84px); line-height: 1; letter-spacing: -0.045em; color: #111; }
  .sl-text{ display: flex; overflow: hidden; padding: .22em 0 .2em; margin: -.22em 0 -.2em; }   /* Platz fuer Ober-/Unterlaengen, nichts wird abgeschnitten */
  /* Forum Romanum als Textur IN den Buchstaben (Position je Buchstabe per JS, damit das Bild durchgaengig wirkt) */
  .sl-text span{ display: inline-block; transform: translateY(105%); opacity: 0;
    animation: slReveal .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.12s + var(--i) * .055s); }
  .sl-dot{ display: block; width: .2em; height: .2em; margin: 0 0 .14em .06em; border-radius: 50%; background: #2c5cff;
    transform-origin: 50% 100%; animation: slBounce .62s cubic-bezier(.3,0,.3,1) infinite; }
  @keyframes slReveal{ to{ transform: translateY(0); opacity: 1; } }
  @keyframes slBounce{
    0%  { transform: translateY(0) scale(1.18,.82); }
    18% { transform: translateY(-.1em) scale(.92,1.08); }
    50% { transform: translateY(-.9em) scale(1,1); }
    82% { transform: translateY(-.1em) scale(.94,1.06); }
    100%{ transform: translateY(0) scale(1.18,.82); }
  }
  @media (prefers-reduced-motion: reduce){
    .sl-text span{ animation: none; transform: none; opacity: 1; }
    .sl-dot{ animation: none; }
  }

  /* ===== Ueberschriften: kursive Serifen-Akzente + Verlauf von Markenblau zu dunklem Blau ===== */
  .h-it{ font-family: "Newsreader", "Times New Roman", serif; font-style: italic; font-weight: 400;
    font-size: 1.26em; letter-spacing: 0; line-height: 0; }       /* optisch gleich gross wie Unbounded (kleinere x-Hoehe ausgeglichen) */
  .h-grad{ background: linear-gradient(to top right, #2c5cff 0%, #1d3fd0 55%, #0c2380 100%);   /* schraeg: von links unten nach rechts oben */
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  /* mindestens zwei Zeilen: Breite der Ueberschriften begrenzen */
  .si-kicker{ max-width: 17em; }
  .s2-title{ max-width: none; }   /* Desktop: genau zwei Zeilen (Umbruch im HTML) */
  .s3-title{ max-width: 17em; }
  .s4-title{ max-width: 21em; }
  /* Philosophie-Ueberschrift ist jetzt laenger: etwas kleiner als die anderen, damit der blaue Satz darunter Platz hat */
  .si-kicker{ font-size: var(--t-h1); }   /* gleiche Groesse wie die anderen Section-Ueberschriften */

  /* Section-Ueberschriften in Regular statt Medium */
  .si-kicker, .s2-title, .s3-title, .s4-title{ font-weight: 400; }

  /* blauer Leitsatz unter "Unsere Philosophie": Regular und klar kleiner als die Ueberschrift */
  .si-phil-text{ font-weight: 400; font-size: var(--t-h3); line-height: 1.4; letter-spacing: -0.005em; }
  @media (max-width: 760px){ .si-phil-text{ line-height: 1.45; } }

  /* kursiv + Verlauf kombiniert: Verlauf auf der Kursiven sauber sichtbar (Ausschlaege der Buchstaben nicht abschneiden) */
  .h-it.h-grad{ padding: 0 .06em; margin: 0 -.06em; }

  @media (max-width: 760px){ .br-d{ display: none; } .s2-title{ max-width: 19em; } }
  /* Organisches Wachstum: Erklaertext rechts neben der Ueberschrift, rechtsbuendig, unten auf einer Linie mit der Ueberschrift
     (ab 1280 px; schmaler steht er darunter, damit die Ueberschrift zweizeilig bleibt) */
  @media (min-width: 1280px){
    .s3-head{ column-gap: clamp(32px, 4vw, 80px); align-items: end; }
    .s3-sub{ align-self: end; }   /* Grundlinie auf Hoehe der letzten Ueberschriftenzeile */
  }

  /* ===== Einheitliche Schriftgroessen: nur drei Stufen =====
     H = Ueberschriften, M = mittlerer Text (Leitsaetze, Zitate, Fragen), S = kleiner Erklaertext */
  /* Ueberschriften gross, alles darunter bewusst klein und Regular (nur Unterueberschriften Medium) */
/* ============================================================
   SCHRIFT-LEITER - die einzige Quelle fuer alle Textgroessen
   ------------------------------------------------------------
   Feste Ganzzahlen pro Breitenstufe, Faktor rund 1,33. Keine
   vw-abhaengigen clamp-Werte: die hatten vorher Groessen wie
   11,52px oder 13,02px erzeugt, also Zwischenwerte, die zu
   keiner Stufe gehoeren.

     --t-hero    Hero-Claim
     --t-h1      Section-Ueberschriften
     --t-h2      grosse Aussagen (Footer-Lead, Problem-Ueberschrift)
     --t-h3      Zwischenueberschriften (Baum-Text, Prozess-Schritte)
     --t-h4      Kartentitel, h3, Menuepunkte
     --t-body    Fliesstext und der Satz im Band unter der Querlinie
     --t-small   Kleintext - ueberall derselbe Wert, auch in
                 Buttons, Menue und Footer

   Wer eine Groesse aendern will, aendert hier eine Zahl.
   ============================================================ */
:root{
  --t-hero:  48px;
  --t-h1:    32px;
  --t-h2:    27px;
  --t-h3:    20px;
  --t-h4:    15px;
  --t-body:  13px;
  --t-small: 11px;
}
@media (max-width: 760px){
  :root{
    --t-hero:  28px;
    --t-h1:    20px;
    --t-h2:    17px;
    --t-h3:    15px;
    --t-h4:    14px;
    --t-body:  12px;
    --t-small: 11px;
  }
}
/* Tablet. Die alten clamp-Werte waren breitenabhaengig und lieferten hier
   deutlich kleinere Groessen als am Desktop (Ueberschrift 24px statt 40px).
   Ohne eigene Stufe waeren die Ueberschriften hier zu gross und liefen
   oben aus dem Bild. */
@media (min-width: 761px) and (max-width: 1279px){
  :root{
    --t-hero:  30px;
    --t-h1:    24px;
    --t-h2:    20px;
    --t-h3:    17px;
    --t-h4:    14px;
    --t-body:  12px;
    --t-small: 11px;
  }
}

@media (min-width: 1800px){
  :root{
    --t-hero:  54px;
    --t-h1:    36px;
    --t-h2:    30px;
    --t-h3:    22px;
    --t-h4:    17px;
    --t-body:  14px;
    --t-small: 12px;
  }
}

/* Altnamen zeigen auf die Leiter, damit kein Aufrufer ins Leere laeuft. */
:root{
  --fs-h: var(--t-h1);
  --fs-m: var(--t-h4);
  --fs-s: var(--t-small);
  --fs-band: var(--t-body);
  --ui-1: var(--t-small);
  --ui-2: var(--t-small);
}
/* Die zwei Bandtexte unter der Querlinie - der graue Satz "100.000 Aufrufe"
   und der blaue Rom-Satz - laufen auf einem gemeinsamen Wert: ab 1280px auf
   der Textstufe, darunter auf der Kleintextstufe. Ein Knopf fuer beide. */
@media (max-width: 1279px){
  :root{ --fs-band: var(--t-small); }
}
  body .si-kicker, body .s2-title, body .s3-title, body .s4-title{ font-size: var(--t-h1); }
  body .si-phil-text{ font-size: var(--t-h3); }
  body .si-text, body .s4-trigger{ font-size: var(--t-h3); }
  body .ft-lead{ font-size: var(--t-h2); }
  body .s2-item h3{ font-size: var(--t-h4); }
  body .si-phil-sub,
  body .s2-item p,
  body .s3-sub,
  body .s4-detail p { font-size: var(--t-small); }


  body .si-phil-sub, body .s2-item p, body .s3-sub, body .s4-detail p{ line-height: 1.6; }
  /* Handy mit wenig Platz (kompakte Leistungen): Rom-Text eine Stufe kleiner,
     damit die Ueberschrift klar groesser bleibt. Die beiden Media-Regeln hier
     reichen dafuer. Davor stand eine dritte Regel ohne Media-Bedingung mit
     var(--fs-m) - die machte den Text GROESSER statt kleiner und griff nur
     auf dem Desktop, wo die Kompakt-Klasse gar nicht gedacht ist. */
  @media (max-width: 760px){ body.services-compact .si-note .si-note-b{ line-height: 1.5; } body.services-compact .s2-title{ font-size: var(--fs-h); } }

  body .si-phil-text,
  body .si-text,
  body .si-note .si-note-b,
  body .ft-lead,
  body .si-phil-sub,
  body .s2-item p,
  body .s3-sub,
  body .s4-detail p { font-weight: 400; }

  body .s4-trigger{ font-weight: 400; }

  body .si-phil-text, body .si-note .si-note-b, body .ft-lead{ line-height: 1.55; letter-spacing: -0.005em; }
  body .s2-item h3{ margin-bottom: 8px; }
  body .s4-trigger{ letter-spacing: -0.005em; }/* Feinschliff: Zitat am Apfelbaum klein wie Erklaertext; Leistungstext am Baum und Footer-Einleitung groesser */
  body .si-text{ font-size: var(--t-h3); line-height: 1.4; letter-spacing: -0.01em; }
  body .ft-lead{ font-size: var(--t-h2); line-height: 1.35; letter-spacing: -0.012em; }
  /* Partnerschaftsprozess (Desktop): Ueberschrift oben an derselben Stelle wie die anderen Section-Ueberschriften,
     darunter deutlich mehr Luft bis zu den drei Punkten */
  @media (min-width: 761px){
    body .s4-field .s4-left{ justify-content: flex-start; padding-top: var(--u); padding-left: calc(var(--pad-l) - var(--u)); }
    body .s4-title, body .s4-field .s4-accordion{ margin-left: 0; }   /* linke Kante wie alle anderen Ueberschriften */
    body .s4-title{ margin-bottom: clamp(48px, 9vh, 104px); }
  }

  /* Laufschrift: "Expertise"/"Wachstum" im schraegen Verlauf (links unten -> rechts oben) wie die Ueberschriften */
  .s5-copy .s5-g{ background-image: linear-gradient(to top right, #2c5cff 0%, #1d3fd0 55%, #0c2380 100%); background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
  /* Rom-Text bei den Leistungen: kleiner, wie das Zitat am Apfelbaum */
  body .si-note .si-note-b{ font-size: var(--fs-band); line-height: 1.6; }
  /* Partnerschaftsprozess bei schmaleren Desktop-Fenstern: Akkordeon darf bis ca. 2/3 der Breite gehen */


  /* Handy: mehr Luft zwischen Ueberschrift und Inhalt (doppelt so viel wie vorher) */
  @media (max-width: 760px){
    body .s2-wrapper .s2-grid, body.services-compact .s2-wrapper .s2-grid, body.s2-stack .s2-wrapper .s2-grid{ margin-top: 36px; }
    body .s4-title{ margin-bottom: 36px; }
    .si-phil{ --phil-gap: 36px; }
  }

  /* Handy: grauer Philosophie-Text neben der Baumkrone (Position/Form per JS) */
  .si-phil-sub.is-floating{ position: absolute; z-index: 3; margin: 0; max-width: none; color: transparent; pointer-events: none; }
  .si-phil-sub.is-floating .si-sub-arc{ position: absolute; left: 0; top: 0; overflow: visible; }
  .si-sub-arc text{ font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-size: inherit; fill: #6f6f6c; }
  .si-sub-shape{ float: right; }
  /* Rom-Text: auf dem Handy die kurze Fassung */
  .si-note .txt-short{ display: none; }
  @media (max-width: 760px){ .si-note .txt-long{ display: none; } .si-note .txt-short{ display: inline; } }
  /* Alle Ueberschriften Regular (auch Hero, Leistungs-Titel, geoeffnete Frage) */
  body .hero-claim, body .s2-item h3, body .s4-item.is-active .s4-trigger{ font-weight: 400; }
  /* Handy: Laufschrift schneller durch (etwa halber Scrollweg) */
  @media (max-width: 760px){ .s5-wrapper{ height: 240vh; height: 240svh; } }

  /* Handy: grauer Erklaertext der Philosophie komplett ausgeblendet */
  @media (max-width: 760px){ .si-phil-sub, .si-sub-arc{ display: none !important; } }

  /* ===== Info-Sections (Problem, Grundsaetze, Messen, Kundenfall, Ueber praeco, Warum praeco, FAQ) =====
     gleiche Logik wie die uebrigen Sections: Buehne bleibt stehen, Ueberschrift oben links an derselben Stelle,
     Inhalt darunter, ergaenzender Text im Streifen unter der Querlinie */
  .ix-wrapper{ position: relative; height: 230vh; height: 230svh; }
  .ix-stage{ position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .ix-top{ position: absolute; left: var(--pad-l); right: var(--pad-r); top: calc(var(--u) * 2);
    transform-origin: left top; opacity: 0; will-change: opacity, transform; }
  .ix-head{ display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .ix-title{ margin: 0; max-width: 18em; font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-size: var(--t-h1); line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); }
  .ix-lead{ margin: 0; max-width: 34em; font-size: var(--t-small); line-height: 1.6; }
  @media (min-width: 1280px){
    .ix-head{ grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 4vw, 80px); align-items: end; }
    .ix-lead{ grid-column: 2; grid-row: 1; max-width: 24em; text-align: right; padding-bottom: .28em; }
  }
  .ix-body{ margin-top: var(--u); }
  .ix-grid{ display: grid; column-gap: clamp(24px, 3vw, 56px); row-gap: clamp(20px, 3vh, 36px); }
  .ix-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ix-item h3{ margin: 0 0 8px; font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-size: var(--t-h4);
    line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); }
  .ix-item p{ margin: 0; font-size: var(--t-small); line-height: 1.6; max-width: 30em; }
  .ix-item{ padding-top: 14px; border-top: 1px solid rgba(17,17,17,.14); }
  /* Streifen unter der Querlinie */
  .ix-band{ position: absolute; left: var(--pad-l); right: var(--pad-r); top: var(--mid-layout, var(--mid)); bottom: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; opacity: 0; will-change: opacity, transform; }
  .ix-bandtext{ margin: 0; max-width: 40em; line-height: 1.5; }
  /* Buttons im Seitenstil (eckig) */
  .ix-btn{ display: inline-flex; align-items: center; height: var(--btn-h); padding: 0 var(--btn-pad); background: #111; color: #fff; text-decoration: none;
    font-family: "Unbounded", "Inter", sans-serif; font-size: var(--t-small); letter-spacing: .01em; transition: background .25s ease; }
  .ix-btn:hover{ background: #2c5cff; }
  .ft-btn{ margin-top: 22px; align-self: flex-start; }/* Platzhalter fuer Bilder */
  .ix-case{ display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: clamp(24px, 3vw, 56px); align-items: start; }
  .ix-media{ aspect-ratio: 4 / 5; width: 100%; max-height: 46vh; }
  .s2-list{ margin: 10px 0 0; padding: 0; list-style: none; }
  .s2-list li{ position: relative; padding-left: 14px; font-size: var(--t-small); line-height: 1.55; }
  .s2-list li::before{ content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #2c5cff; }
  .s3-card{ position: absolute; }
  /* Prozess: Ergebniszeile */
  .s4-result{ display: block; margin-top: 6px; color: #111; }
  @media (max-width: 760px){
    .ix-top{ top: calc(var(--u) + 24px); }
    .ix-body{ margin-top: 36px; }
    .ix-title{ max-width: none; } .ix-grid--3{ grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
    .ix-case{ grid-template-columns: minmax(0, 1fr); }
    .ix-media{ aspect-ratio: 16 / 9; max-height: 22vh; }
    .ix-band{ gap: 10px; }
  }

  /* Hero: Satz und Button unter der Querlinie (Desktop und Handy) */
  .hero-sub{ position: absolute; left: 0; top: 0; margin: 0; max-width: min(34em, calc(100vw - 2 * var(--pad-l))); visibility: hidden;
    font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-size: var(--t-h4); line-height: 1.45;
    color: #C6B444; mix-blend-mode: difference; will-change: transform, opacity; pointer-events: none; }
  @media (min-width: 761px){
    .hero-cta{ position: absolute; top: 0; left: 0; z-index: 5; align-items: center; justify-content: center;
      height: 52px; padding: 0 22px; box-sizing: border-box; pointer-events: auto; visibility: hidden;
      font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-size: var(--t-small); letter-spacing: .01em; text-decoration: none; will-change: transform, opacity; transition: background .25s ease; }

  }
  @media (max-width: 760px){ .hero-sub{ max-width: calc(100vw - 2 * var(--pad-l)); } }

  /* Bewegtes blaues Glas nur auf dem CTA in der ersten Statue-Section. */
  .hero-cta{ isolation: isolate; overflow: hidden; background: #1644bd; color: #fff;
    border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-cta::before{ content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
    background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.04) 48%, rgba(21,46,135,.18));
    -webkit-backdrop-filter: blur(7px) saturate(1.25); backdrop-filter: blur(7px) saturate(1.25);
    box-shadow: none; }
  .hero-cta-label{ position: relative; z-index: 2; color: #fff; text-shadow: 0 1px 3px rgba(0,20,75,.3); }
  .hero-cta:hover, .hero-cta:active{ background: #1644bd; }
  .hero-cta:hover::before{ background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.07) 48%, rgba(21,46,135,.15)); }

  .ix-wrapper :not(.h-it),
  .s2-list,
  .s4-result,
  .ft-btn { font-family: "Unbounded", "Inter", sans-serif; }
  .ix-wrapper .h-it{ font-family: "Newsreader", "Times New Roman", serif; }
  

  /* Problem-Section: etwas kompakter, damit nichts verkleinert werden muss */


  /* ===== Problem-Section: Reiter links, Aussage in der Mitte, Illustration rechts ===== */
  .pb{ display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.05fr) minmax(0, 1.3fr); gap: clamp(20px, 2.6vw, 48px);
    align-items: stretch; background: rgba(255,255,255,.28);
    border: 1px solid rgba(17,17,17,.06); pointer-events: auto; }
  .pb-tabs{ display: flex; flex-direction: column; gap: 4px; padding: 8px; background: rgba(255,255,255,.45); }
  .pb-tab{ appearance: none; border: 0; background: transparent; text-align: left; cursor: pointer; padding: 12px 16px;
    display: flex; flex-direction: column; gap: 4px; color: #8a8a87; font-family: "Unbounded", "Inter", sans-serif; transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
  .pb-tn{ font-size: var(--t-small); letter-spacing: .02em; }
  .pb-tl{ font-size: var(--t-small); line-height: 1.4; }
  .pb-tab:hover{ color: #111; }

  .pb-main{ position: relative; display: grid; align-items: center; }
  .pb-pane{ grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.22,.8,.2,1); pointer-events: none; }
  .pb-pane.is-active{ opacity: 1; transform: none; pointer-events: auto; }
  .pb-h{ margin: 0 0 14px; font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-size: var(--t-h2); line-height: 1.28; letter-spacing: -0.015em; color: var(--ink); }
  .pb-p{ margin: 0; font-size: var(--t-small); line-height: 1.65; max-width: 34em; }
  .pb-num{ display: block; margin-top: 16px; font-size: var(--t-small); color: #111; letter-spacing: .02em; }
  .pb-visual{ position: relative; overflow: hidden; aspect-ratio: 1 / 1; max-height: 42vh; max-height: 42svh; justify-self: end; width: 100%; }
  .pb-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }

  @media (min-width: 761px) and (max-width: 900px){ .pb{ grid-template-columns: minmax(160px, .9fr) minmax(0, 1.4fr); } .pb-visual{ display: none; } }
  @media (max-width: 760px){
    .pb{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .pb-tabs{ flex-direction: row; gap: 4px; padding: 4px; }
    .pb-tab{ flex: 1 1 0; padding: 8px 6px; align-items: center; }

    .pb-tl{ display: none; }
    .pb-main{ padding: 0 6px; }
    .pb-h{ margin-bottom: 10px; }
    .pb-visual{ max-height: none; width: 44%; aspect-ratio: 1 / 1; justify-self: start; margin: 0 6px 6px; }
    .ix--problem .ix-lead{ display: block; }
  }

  /* Problem-Section setzt direkt nach dem Hero ein (wie vorher die Philosophie) */
  .ix-wrapper.ix--problem{ margin-top: -75vh; margin-top: -75svh; }
  .ix-wrapper .ix-stage{ z-index: 2; }
  /* Ueberschrift der Problem-Section: Desktop genau zwei Zeilen */
  .ix--problem .ix-title{ max-width: none; }
  /* Problem-Bereich mit zwei grossen Handlungsflaechen rechts daneben. */
  .ix--problem .ix-lead, .ix--problem .pb-p{ max-width: none; }
  .ix--problem .ix-head{ grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .ix--problem .ix-lead{ grid-column: 1; grid-row: 2; text-align: left; padding: 0;
    max-width: 72em; font-size: var(--t-body); color: #6f6f6c; }
  .ix--problem .ix-lead span{ display: block; }
  .ix--problem .ix-top{ top: calc(var(--u) * 2);
    display: flex; flex-direction: column; }
  .ix--problem .ix-body{ flex: 1; min-height: 0; margin-top: calc(var(--u) * .5); }
  .ix--problem .pb-layout{ display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 18vw, 280px);
    gap: clamp(16px, 1.6vw, 26px); height: 100%; min-height: 0; }
  .ix--problem .pb{ min-height: 0; grid-template-columns: minmax(145px, .75fr) minmax(0, 1.35fr) var(--pb-image-width, 240px);
    gap: clamp(14px, 1.4vw, 24px); }
  .pb-actions{ display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); min-height: 0; }
  .pb-action{ text-decoration: none; font-family: "Unbounded", "Inter", sans-serif; letter-spacing: -.01em;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
  .pb-action:hover{ transform: translateY(-3px); }


  .pb-action-arrow{ font-family: "Inter", sans-serif; line-height: 1; font-weight: 300; }
  .pb-action:focus-visible{ outline: 2px solid #111; outline-offset: 3px; }
  @media (min-width: 761px){
    .ix--problem .pb{ grid-template-rows: minmax(0, 1fr); }
    .ix--problem .ix-top{ right: calc(var(--col-r) + var(--u)); }
    .ix--problem .pb-tabs{ justify-content: flex-start; }
    .ix--problem .pb-tabs{ padding: 6px; }
    .ix--problem .pb-tab{ padding: 10px 11px; }
    .ix--problem .pb-tn{ font-size: var(--t-small); }
    .ix--problem .pb-tl{ font-size: var(--t-small); line-height: 1.35; }
    .ix--problem .pb-visual{ align-self: stretch; justify-self: end; width: var(--pb-image-width, 240px); max-width: none; height: 100%;
      aspect-ratio: auto; max-height: none; overflow: visible; }
  }

  @media (min-width: 761px) and (max-width: 900px){
    .ix--problem .pb{ grid-template-columns: minmax(0, 1fr) var(--pb-image-width, 180px); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
    .ix--problem .pb-tabs{ grid-column: 1; grid-row: 1; flex-direction: row; padding: 4px; }
    .ix--problem .pb-tab{ flex: 1; align-items: center; padding: 8px 4px; }
    .ix--problem .pb-tl{ display: none; }
    .ix--problem .pb-main{ grid-column: 1; grid-row: 2; }
    .ix--problem .pb-visual{ display: block; grid-column: 2; grid-row: 1 / span 2; }
  }
  @media (max-width: 760px){
    .ix--problem .ix-lead span + span{ display: none; }
    .ix--problem .ix-body{ margin-top: 18px; }
    .ix--problem .pb-layout{ display: flex; flex-direction: column; height: auto; gap: 12px; }
    .ix--problem .pb-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 10px; }


    .ix--problem .pb-action{ min-height: 70px; }
    .ix--problem .pb{ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 12px; }
    .ix--problem .pb-tabs{ display: grid; gap: 3px; padding: 5px; }

    .ix--problem .pb-tl{ line-height: 1.3; }
    .ix--problem .pb-main{ grid-column: 1; grid-row: 2; min-height: 0; padding: 4px 6px 10px; }
    .ix--problem .pb-p{ line-height: 1.5; }
    .ix--problem .pb-visual{ display: block; grid-column: 1; grid-row: 3; align-self: start; justify-self: center; height: auto; max-height: none; margin: 0; }
  }

  /* Zahlen als eigenstaendige, ruhige Scroll-Section nach den Problemen. */
  .stats-section{ position: relative; z-index: 2; min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center; padding: calc(var(--u) * 1.5) calc(var(--col-r) + var(--u)) var(--u) var(--pad-l); }
  .stats-inner{ width: 100%; font-family: "Unbounded", "Inter", sans-serif; }

  .stats-num{ color: var(--ink); font-size: clamp(44px, 5.4vw, 100px); line-height: 1.08; letter-spacing: -.055em; white-space: nowrap; }
  .stats-num i{ font-style: normal; color: #8a8a87; }
  .stats-num b{ font-weight: 400; }
  .stats-cap{ max-width: 37em; margin-top: 22px; color: #4a4a48; font-size: var(--t-small); line-height: 1.55; }
  .stats-src{ margin-top: clamp(48px, 8vh, 100px); font-size: var(--t-small); line-height: 1.5; }

  @media (max-width: 760px){
    /* Block statt Flex-Zeile: unter den Karten liegt die Laufstrecke zum Anhalten (Abschnitt "Handy: Sections anhalten") */
    .stats-section{ display: block; padding: calc(var(--u) + 24px) var(--pad-r) calc(var(--u) + 36px) var(--pad-l); }   /* oben wie die uebrigen Sections */

    .stats-num{ font-size: clamp(32px, 8vw, 56px); }
    .stats-cap{ margin-top: 14px; }
    .stats-src{ margin-top: 10px; }   /* Abstand wie zwischen den Karten (.stats-grid gap) */
  }

/* Feste Claim-Zeilen und klare Gewichtung der Kennzahlen. */
.hero-claim-line{ display: block; width: max-content; white-space: nowrap; }
.stats-num{ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 2.85em; gap: .15em; text-align: left; }
.stats-baseline{ font-size: .5em; }
.stats-num b{ font-size: 2em; }


@media(min-width: 761px){
  body .s4-field{ grid-template-columns: minmax(0, calc(66.667vw - var(--u))) minmax(0, 1fr); bottom: auto; }
  body .s4-field .s4-accordion{ width: 100%; max-width: none; }
  body .s4-detail p{ max-width: none; }
}

/* Die folgenden Inhalte beginnen bereits während des Ausblendens. */
.stats-section{ margin-top: 0; }
.stats-inner{ opacity: 0; visibility: hidden; will-change: opacity, transform; }
#sIntro{ margin-top: -10vh; margin-top: -10svh; }

/* Die drei Grundsätze stehen kompakt unter dem schwarzen Philosophie-Text. */
.si-principles{ display: flow-root; list-style: none; margin: 48px 0 0; padding: 0;
  font-family: "Unbounded", "Inter", sans-serif; font-size: var(--t-h4); font-weight: 400; line-height: 1.45; color: var(--ink); }
.si-principle{ display: flex; min-height: 32px; opacity: 0; visibility: hidden; will-change: opacity, transform; }

.si-principle-icon{ display: block; flex: 0 0 28px; }
.si-principle-icon svg{ display: block; width: 100%; height: 100%; }
@media(max-width: 760px){
  .si-principles{ grid-row: 2; margin-top: 36px; }
  .si-principle{ min-height: 28px; }


}

/* Normales Durchscrollen: keine angeheftete Problem-Bühne und kein Halteweg.
   Am Handy haelt sie an und blaettert die vier Probleme durch (Abschnitt "Handy: Sections anhalten"). */
.ix-wrapper.ix--problem{ height: 100vh; height: 100svh; }
.ix-wrapper.ix--problem .ix-stage{ position: relative; top: auto; height: 100%; }
.ix--problem .ix-top{ bottom: var(--u); opacity: 0; visibility: hidden; }
@media(max-width:760px){
  .ix-wrapper.ix--problem{ height: auto; min-height: 100svh; }
  .ix-wrapper.ix--problem .ix-stage{ position: sticky; top: var(--pin-top, 0px); height: auto; min-height: 100svh; overflow: visible;
    box-sizing: border-box; padding: calc(var(--u) + 24px) var(--pad-r) 24px var(--pad-l); }
  .ix--problem .ix-top{ position: relative; left: auto; right: auto; top: auto; bottom: auto; }
}
/* Prozentzeichen direkt neben den Ziffern, ohne reservierte Leerfläche. */
.stats-count{ display: inline-block; text-align: left; font-variant-numeric: tabular-nums; }
.stats-percent{ font-size: .5em; letter-spacing: -.025em; margin-left: .04em; }
/* Dieselben Schriftgrößen und Gewichte wie die Leistungen darunter. */
.si-principles{ max-width: 640px; }
.si-principle{ align-items: flex-start; gap: 16px; }
.si-principle + .si-principle{ margin-top: 18px; }
.si-principle-icon{ width: 42px; height: 42px; flex-basis: 42px; }
.si-principle-copy{ min-width: 0; }
.si-principle h3{ margin: 0 0 8px; font-size: var(--t-h4); font-weight: 400; line-height: 1.4; letter-spacing: -.005em; }
.si-principle p{ margin: 0; font-size: var(--t-small); font-weight: 400; line-height: 1.6; }
@media(max-width:760px){
  .si-principle{ gap: 12px; }
  .si-principle + .si-principle{ margin-top: 14px; }
  .si-principle-icon{ width: 34px; height: 34px; flex-basis: 34px; }
}

@media(max-width: 1200px){ .stats-num{ min-height: 0; } }

/* Organisches Wachstum: Karten lassen sich zusaetzlich mit der Maus ziehen. */
.s3-viewport{ cursor: grab; touch-action: pan-y; }
.s3-viewport.is-dragging{ cursor: grabbing; }

/* Die beiden Grundsaetze erscheinen nur am Desktop, nicht auf Handy oder Tablet. */


/* Handy, "Kennst du das auch?": die vier Reiter in einer Reihe, nur die Zahlen,
   der Text des gewaehlten Reiters steht darunter. */
@media (max-width: 760px){
  .ix--problem .pb-tabs{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ix--problem .pb-tab{ min-height: 0; align-items: center; justify-content: center; padding: 10px 4px; }
  .ix--problem .pb-tl{ display: none; }
}
/* Handy: die Illustrationen liegen im Querformat vor und brauchen weniger Hoehe. */
@media (max-width: 760px){
  .ix--problem .pb-visual{ width: min(100%, 460px); aspect-ratio: 872 / 640; }
  .ix--problem .pb-img{ object-position: center bottom; }
}

/* Reiter 01-04: Der schwarze Hintergrund liegt auf einer eigenen Ebene und
   blendet weich aus, statt als Rechteck stehen zu bleiben. */
.pb-tab{ position: relative; overflow: hidden; }
.pb-tab::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  transition: opacity .42s cubic-bezier(.22,.8,.2,1); }
.pb-tab.is-active{ background: transparent; box-shadow: none; }
.pb-tab.is-active::before{ opacity: 1; }
.pb-tn, .pb-tl{ position: relative; z-index: 1; }


/* Die beiden Buttons stehen ohne Rahmen. */
.pb-action--primary, .pb-action--secondary{ border: 0; }

/* Handy: die drei Stichpunkte je Leistung wie am Desktop mitzeigen. */
@media (max-width: 760px){
  /* Pro Leistung nur Ueberschrift und Beschreibung. Die zwei Detailzeilen
     entfallen: Sie waren der Grund, warum die Section nicht auf einen
     Bildschirm passte und deshalb verkleinert wurde. */
  .s2-list{ display: none; }
}

/* Der Hero-Button steht nur in der Handy-Ansicht. */
@media (min-width: 761px){ .hero-cta{ display: none; } }

/* Handy-Hero-Button: farbloses Glas, nur weichgezeichnet – kein blauer Grund. */
@media (max-width: 760px){
  .hero-cta{
    -webkit-backdrop-filter: blur(7px) saturate(1.3); backdrop-filter: blur(7px) saturate(1.3); }
  .hero-cta::before{ display: none; }

}

/* "Was wir messen": Punktstrom ueber den drei Stufen. */
.ms-flow{ position: relative; width: 100%; height: clamp(104px, 15vh, 180px);
  margin: 0 0 clamp(16px, 2.2vh, 28px); }
.ms-flow canvas{ display: block; width: 100%; height: 100%; }
@media (max-width: 760px){
  .ms-flow{ height: 92px; margin-bottom: 12px; }
}/* "Was wir messen": grosse Ziffern in der Kursiven unter dem Punktstrom. */


/* "Was wir messen": ohne Trennstriche, grosse Ziffern, Punktstrom darunter. */
#sMeasure .ix-item{ border-top: 0; padding-top: 0; }


/* "Was wir messen": Kopfzeile links untereinander, Ziffer haengt in der Null. */
#sMeasure .ix-head{ grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
#sMeasure .ix-lead{ grid-column: 1; grid-row: 2; text-align: left; padding: 0;
  max-width: min(100%, 60em); }


/* Organisches Wachstum: Unterzeile immer unter der Ueberschrift, nicht rechts daneben. */
@media (min-width: 1280px){
  .s3-head{ grid-template-columns: minmax(0, 1fr); }
  .s3-sub{ grid-column: 1; grid-row: 2; margin: clamp(10px, 1.6vh, 16px) 0 0;
    max-width: min(100%, 48em); text-align: left; padding-bottom: 0; }
}

/* "Was wir messen": Ueberschrift und Stufen nutzen die volle Breite,
   der Satz im Band bleibt auf zwei Dritteln. */
#sMeasure .ix-title{ max-width: none; }
#sMeasure .ix-item p{ max-width: none; }
#sMeasure .ix-bandtext{ max-width: 66%; }
@media (max-width: 760px){
  #sMeasure .ix-bandtext{ max-width: none; }
}/* Null und Ziffer sind eigene Elemente und werden von der Grotesk-Regel der
   ix-Sections erfasst – darum hier ausdruecklich die Kursive setzen. *//* Die Null sitzt tiefer: um die Haelfte des Raums unter ihr nach unten gerueckt. */

/* Handy: die drei Abschnitte ruecken nach rechts, der Punktstrom laeuft
   links daneben senkrecht von oben nach unten. */
@media (max-width: 760px){
  #sMeasure .ix-body{ display: grid; grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 14px; align-items: stretch; }
  #sMeasure .ms-flow{ grid-column: 1; grid-row: 1; }
  #sMeasure .ix-grid{ grid-column: 2; grid-row: 1; }
}
/* Mehr Luft zwischen Kopfbereich und den drei Stufen. */


/* Hero-Button auf dem Handy: kein Schatten an der Schrift, kein Farbwechsel beim
   Beruehren oder Hovern – die Glasflaeche bleibt in jedem Zustand gleich. */
@media (max-width: 760px){
  .hero-cta-label{ text-shadow: none; }
  .hero-cta, .hero-cta:hover, .hero-cta:active, .hero-cta:focus, .hero-cta:focus-visible{
    background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.12)); }
}

/* Zahlen als drei Karten: die erste breit und tiefblau, die beiden anderen hell.
   Statt eines Karorasters liegt ein Punktraster darauf, das nach unten ausblendet. */
.stats-grid{ display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(8px, .9vw, 14px); align-items: end; }
.stats-card:not(.is-lead){ min-height: 0; }
.stats-card{ position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(230px, 27vw, 340px); padding: clamp(18px, 1.7vw, 30px);
  background: linear-gradient(180deg, #eef1fa 0%, #e2e8f8 55%, #dbe3f7 100%);
  color: #12245f; }
/* Das Punktraster liegt auf einer Zeichenflaeche, damit es dem Zeiger ausweichen kann. */
.stats-dots{ position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 45%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 45%, transparent 80%); }
.stats-card.is-lead{ background: linear-gradient(165deg, #0a1c56 0%, #112d85 60%, #143aa6 100%);
  color: #a9c0ff; }

.stats-card .stats-num{ display: block; min-height: 0; color: inherit; letter-spacing: -.05em;
  font-size: clamp(34px, 3.6vw, 56px); line-height: 1; }
.stats-card .stats-num b{ font-size: 1em; font-weight: 400; color: inherit; }
.stats-card.is-lead .stats-num{ display: flex; flex-direction: column; align-items: flex-end;
  font-size: clamp(56px, 7.4vw, 124px); gap: .06em; }
.stats-card.is-lead .stats-num b{ color: #8fb0ff; }
.stats-card.is-lead .stats-baseline{ font-size: .32em; color: #7b93d8; letter-spacing: -.02em; }
.stats-card.is-lead .stats-baseline i{ color: #7b93d8; }
.stats-card .stats-cap{ margin-top: clamp(10px, 1vw, 16px); max-width: 26em;
  color: #46548c; font-size: var(--t-small); line-height: 1.5; }
.stats-card.is-lead .stats-cap{ margin-left: auto; text-align: right; max-width: 16em; color: #9db6f5; }

@media (max-width: 1200px){
  .stats-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stats-card.is-lead{ grid-column: 1 / -1; min-height: clamp(220px, 46vw, 320px); }
}
@media (max-width: 760px){
  .stats-grid{ grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .stats-card{ min-height: 150px; padding: 16px; }
  .stats-card.is-lead{ min-height: 230px; }
  .stats-card .stats-num{ font-size: 40px; }
  .stats-card.is-lead .stats-num{ font-size: 76px; }
  .stats-card .stats-cap{ margin-top: 10px; }
}
/* Ueberschrift ueber den drei Zahlen-Karten. */
.stats-title{ margin: 0 0 clamp(22px, 3.4vh, 48px);
  font-family: "Unbounded", "Inter", sans-serif; font-weight: 400; font-size: var(--t-h1);
  line-height: 1.14; letter-spacing: -.02em; color: var(--ink); }
@media (max-width: 760px){ .stats-title{ margin-bottom: 22px; } }
/* Jede Ziffer traegt eine Kontur in der eigenen Textfarbe. Ihre Staerke setzt das
   Skript je nach Abstand zum Zeiger – damit wird nur die Ziffer darunter kraeftiger,
   stufenlos statt in Schriftschnitt-Spruengen. */
.stats-digit, .stats-card .stats-percent{ display: inline-block;
  -webkit-text-stroke: 0 currentColor; paint-order: stroke fill; }

/* Gemeinsame Karten-Sprache fuer "Kennst du das auch?" und die Zahlen:
   dieselbe Rundung, dieselben Blautoene. Hier schrauben, nicht an den
   Einzelstellen weiter unten. */
:root{
  --card-deep: linear-gradient(165deg, #0a1c56 0%, #112d85 60%, #143aa6 100%);
  --card-ink: #12245f;
  --card-ink-soft: #46548c;
}


.pb-tab::before{ background: var(--card-deep); }
.pb-tab.is-active{ color: #fff; }
.pb-action, .ix--problem .pb-action{ border-radius: var(--r-inner); }


/* Die hellen Flaechen stehen in Weiss statt im hellen Blau. */
:root{ --card-light: #fff; }

/* Auch die beiden kleinen Zahlen-Karten stehen auf Weiss. */

/* Die Ueberschrift der Zahlen laeuft ueber die volle Breite, damit der feste
   Umbruch genau zwei Zeilen ergibt statt drei. */
.stats-title{ max-width: none; }
/* "Kennst du das auch?": Text und Buttons bleiben schwarz, der Hover nur grau. */
.pb-pane h3, .pb-action--primary, .pb-action--secondary{ color: var(--ink); }
.pb-action-arrow{ color: #8a8a87; }

/* Buttons: Beschriftung im tiefen Blau der Zahlen, Hover etwas deutlicher grau. */
.pb-action--primary, .pb-action--secondary{ color: var(--card-ink); }

/* "Was wir messen": Inhalt bis zur rechten Rasterlinie, wie in den anderen Sections,
   statt bis zur doppelten Spaltenbreite. */
@media (min-width: 761px){
  #sMeasure .ix-top, #sMeasure .ix-band{ right: var(--col-r); }
}
/* Die Ziffern sind entfallen; der Punktstrom steht wieder ueber den drei Stufen. */
#sMeasure .ms-flow{ margin: 0 0 clamp(10px, 1.4vh, 18px); height: clamp(120px, 17vh, 200px); }

/* Der Punktstrom laeuft ueber die ganze Seitenbreite ein und aus und rueckt
   dichter an die Ueberschriften. */
@media (min-width: 761px){
  #sMeasure .ms-flow{ margin: 0 calc(var(--col-r) * -1) clamp(2px, .5vh, 8px) calc(var(--pad-l) * -1); }
}
/* "Was wir messen": weniger Luft ueber dem Punktband, etwas mehr darunter. */
#sMeasure .ix-body{ margin-top: calc(var(--u) * .7); }


/* Die Ueberschrift der Zahlen laeuft ohne festen Umbruch und verteilt ihre
   Zeilen gleichmaessig, damit kein einzelnes Wort allein steht. */
.stats-title{ text-wrap: balance; }
/* Handy, "Was wir messen": mehr Luft zwischen Kopfbereich und Inhalt und zwischen
   den drei Stufen – dadurch wird der Punktstrom links hoeher und besser lesbar. */
@media (max-width: 760px){

  #sMeasure .ix-grid--3{ row-gap: 32px; }
}
/* Handy: Das Band laeuft ueber die volle Hoehe des Textblocks, damit jeder Kreis
   auf der Hoehe seiner Ueberschrift sitzt. */
@media (max-width: 760px){
  #sMeasure .ms-flow{ height: auto; align-self: stretch; margin: 0; }
}

/* Alle kleinen Erklaertexte laufen in einem helleren Grau. Hier aendern, nicht
   an den Einzelstellen weiter oben. */
:root{ --muted: #7d7d7a; --muted-soft: #9a9a96; }
.ix-lead,
  .ix-item p,
  .s2-item p,
  .s2-list li,
  .s3-sub,
  .pb-p,
  .si-principle p,
  .stats-card:not(.is-lead) .stats-cap { color: var(--muted); } .stats-src, .ix-bandtext{ color: var(--muted-soft); }

/* Die beiden Buttons stehen groesser, der Pfeil sitzt unter dem Text. */
.pb-action{ padding: clamp(20px, 2.2vw, 32px); font-size: var(--t-h3);
  line-height: 1.28; }
.pb-action > span:not(.pb-action-arrow){ order: 1; }
.pb-action-arrow{ font-size: 34px; }
@media (max-width: 760px){
  .ix--problem .pb-action{ padding: 14px; }
  .ix--problem .pb-action-arrow{ font-size: 22px; }
}
/* Der Pfeil steht direkt unter dem Text, nicht an der Unterkante des Buttons. */
.pb-action{ display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; }
.pb-action-arrow{ order: 2; align-self: flex-start; margin-top: 14px; }
@media (max-width: 760px){ .ix--problem .pb-action-arrow{ margin-top: 8px; } }
/* Handy: Auch hier steht der Pfeil unter dem Text, nicht daneben. */
@media (max-width: 760px){
  .ix--problem .pb-action{ flex-direction: column; align-items: flex-start;
    justify-content: flex-start; }
}

/* "Was wir messen": Der Zitattext laeuft in der kleinen Schrift der Seite. Das Band
   fuellt den Raum zwischen Kopfbereich und den drei Stufen, die dadurch tiefer stehen. */
#sMeasure .ix-bandtext{ font-size: var(--fs-band); line-height: 1.6; }
@media (min-width: 761px){
  #sMeasure .ix-top{ display: flex; flex-direction: column; }
  #sMeasure .ix-body{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #sMeasure .ms-flow{ flex: 1 1 auto; min-height: 150px; }
  #sMeasure .ix-grid--3{ margin-bottom: clamp(8px, 1.6vh, 22px); }
}

/* Zitatband in der kleinen Schriftgroesse der Seite. */
.ix-bandtext{ font-size: var(--fs-band); }
/* "Was wir messen": die drei Stufen tiefer, dafuer mehr Raum fuer den Punktstrom. */
@media (min-width: 761px){

  #sMeasure .ms-flow{ height: clamp(160px, 25vh, 290px); margin-bottom: clamp(18px, 2.6vh, 34px); }
}
/* Handy: Das Band beginnt oberhalb des ersten Abschnitts, damit man sieht,
   wie die Punkte zum grossen Kreis stroemen. */
@media (max-width: 760px){
  #sMeasure .ix-body{ margin-top: 96px; }
  #sMeasure .ms-flow{ margin-top: -88px; }
}
/* "Was wir messen": Der Punktstrom rueckt wieder dichter an den Kopfbereich. */
@media (min-width: 761px){
  #sMeasure .ix-body{ margin-top: calc(var(--u) * .55); }
}

/* Lesefortschritt: Die linke Rasterlinie faerbt sich von oben blau ein, ein Punkt
   markiert die aktuelle Stelle. */
.gl-progress{ position: absolute; top: 0; left: var(--u); width: 1px;
  height: calc(var(--read, 0) * 100%); background: #2c5cff;
  transform-origin: top; will-change: height; }
.gl-progress::after{ content: ""; position: absolute; left: 50%; bottom: 0;
  width: 7px; height: 7px; margin-left: -3.5px; margin-bottom: -3.5px;
  border-radius: 50%; background: #2c5cff;
  box-shadow: 0 0 0 3px rgba(44,92,255,.16); }
@media (max-width: 760px){
  .gl-progress{ left: var(--ml); }
  .gl-progress::after{ width: 6px; height: 6px; margin-left: -3px; margin-bottom: -3px; }
}
/* .grid-frame span faerbt alle Linien grau und ist spezifischer als .gl-progress –
   deshalb hier mit demselben Gewicht dagegenhalten. */
.grid-frame .gl-progress{ background: #2c5cff; }

/* Die beiden Grundsaetze stehen als zwei weisse Karten nebeneinander. */
#siPrinciples{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px); max-width: 720px; margin: clamp(26px, 3.2vh, 48px) 0 0; }
#siPrinciples .si-principle{ margin: 0; align-items: flex-start;
  min-height: 0; }
/* Inhalt der beiden Karten kleiner – und sie erscheinen nur am Rechner,
   nicht auf Handy oder Tablet. */
#siPrinciples .si-principle h3{ font-size: var(--t-h4); line-height: 1.3; }
#siPrinciples .si-principle p{ font-size: var(--t-small); line-height: 1.45; margin-top: 3px; }
#siPrinciples .si-principle-icon{ width: 22px; height: 22px; flex: 0 0 22px; }
#siPrinciples .si-principle{ gap: 10px; padding: clamp(12px, 1vw, 16px); }
@media (max-width: 1100px), (hover: none) and (pointer: coarse){
  #siPrinciples{ display: none; margin: 0; }
}
/* Kopf-Button, Menue-Button und die Videokarten bekommen dieselbe Rundung
   wie die uebrigen Flaechen. */


/* Buttons mit dezenterer Rundung als die Karten. */


/* Die beiden Grundsatz-Karten stehen auf einem leicht abgesetzten Grau. */
#siPrinciples .si-principle{ background: #E6E6E4; }
/* Die beiden Buttons in "Kennst du das auch?" im selben Grau wie die
   Grundsatz-Karten; beim Hovern wird die Flaeche weiss. */

.pb-action--primary:hover, .pb-action--secondary:hover{ background: #fff; }
/* Buttons und die beiden kleinen Zahlen-Karten in einem sehr hellen Grau. */
.pb-action--primary, .pb-action--secondary{ background: #F1F1F0; }
.stats-card:not(.is-lead){ background: #F1F1F0; }
/* Wird das Fenster schmaler, stehen die beiden Grundsatz-Karten untereinander,
   statt nebeneinander gequetscht zu werden. */
@media (max-width: 1400px){
  #siPrinciples{ grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}

/* "Kennst du das auch?": Die Buttons wandern schon frueher unter den Text,
   damit er in schmalen Fenstern nicht eingequetscht wird. */
@media (min-width: 761px) and (max-width: 1400px){
  .ix--problem .pb-layout{ grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 104px; }
  .ix--problem .pb-actions{ grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr); }
  .ix--problem .pb-action{ flex-direction: column; align-items: flex-start;
    justify-content: flex-start; font-size: var(--t-h3); padding: 12px 16px; }
  .ix--problem .pb-action-arrow{ font-size: 20px; margin-top: 6px; }
}

/* Zahlen-Karten: die blaue deutlich groesser, die beiden hellen kleiner und
   leicht unterschiedlich hoch. Alle stehen auf einer gemeinsamen Unterkante. */
@media (min-width: 761px){
  .stats-grid{ align-items: end; }
  .stats-card.is-lead{ min-height: clamp(300px, 34vw, 440px);
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: clamp(18px, 2.2vw, 44px); }
  .stats-card.is-lead .stats-cap{ order: 1; margin: 0 0 .35em; text-align: left;
    max-width: 17em; flex: 1 1 auto; }
  .stats-card.is-lead .stats-num{ order: 2; flex: 0 0 auto; align-items: flex-end;
    font-size: clamp(74px, 9.6vw, 170px); }
  .stats-card:nth-child(2){ min-height: clamp(168px, 20vw, 248px); }
  .stats-card:nth-child(3){ min-height: clamp(190px, 23vw, 286px); }
  .stats-card:not(.is-lead) .stats-num{ font-size: clamp(30px, 3.1vw, 48px); }
}
/* Ab Tablet steht die Quellenangabe direkt unter der Ueberschrift,
   auf dem Handy bleibt sie unter den Karten. */
@media (min-width: 761px){
  .stats-inner{ display: flex; flex-direction: column; }
  .stats-title{ order: 1; margin-bottom: clamp(8px, 1.2vh, 14px); }
  .stats-src{ order: 2; margin: 0 0 clamp(24px, 3.6vh, 50px); max-width: 68em; }
  .stats-grid{ order: 3; }
}

/* Alles wieder kantig: Karten, Buttons, Reiter und Videokarten ohne Rundung.
   Beim Bild in "Kennst du das auch?" fuellt der Hintergrund die runden Ecken
   der Grafik auf, damit die Flaeche eckig wirkt. */
:root{ --r-card: 0px; --r-inner: 0px; --r-btn: 0px; }
.pb-tab, .pb-tab.is-active, .s3-card, .s3-viewport .s3-card,
.stats-card, .pb, .pb-tabs, .pb-visual, .pb-action,
#siPrinciples .si-principle, .cta-btn, .menu-fab{
  border-radius: 0; }

@media (max-width: 760px){
  .pb-tab, .pb-tab.is-active, .s3-card, .s3-viewport .s3-card, .stats-card{ border-radius: 0; }
}
/* Mehr Luft zwischen Rahmen und Inhalt im grossen Kasten. */
.pb{ padding: clamp(18px, 1.8vw, 30px); }
@media (max-width: 760px){ .pb{ padding: 14px; } }
/* .ix--problem .pb-visual setzt den Kasten weiter oben auf transparent und ist
   spezifischer – deshalb hier mit demselben Gewicht die Flaeche fuellen, damit
   die runden Ecken der Grafik im selben Ton verschwinden. */

/* Hinter dem Bild in "Kennst du das auch?" bleibt die Flaeche frei – die
   abgerundeten Ecken der Grafik sollen sichtbar sein. */
.pb-visual, .ix--problem .pb-visual{ background: transparent; }

/* Kundenfall: die drei Abschnitte als Karten, in derselben Flaeche wie die
   Zahlen-Karten. Die Trennlinien oben entfallen dafuer. */
#sCase .ix-case{ gap: clamp(12px, 1.3vw, 22px); }


/* Kundenfall als Bento: Das Medium steht gross links, die drei Karten fuellen
   die Flaeche rechts und darunter. Der Block nutzt die volle Breite. */
@media (min-width: 761px){


  #sCase .ix-media{
    aspect-ratio: auto; width: 100%; max-height: none; }
}
/* Kundenfall: Ueberschrift zweizeilig ueber die volle Breite, der Satz darunter,
   und weniger Abstand zum Inhalt. */
#sCase .ix-title{ max-width: none; }
@media (min-width: 761px){
  #sCase .ix-head{ grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  #sCase .ix-lead{ grid-column: 1; grid-row: 2; text-align: left; padding: 0;
    max-width: min(100%, 60em); }
  #sCase .ix-body{ margin-top: calc(var(--u) * .5); }
}
@media (max-width: 760px){
  /* Handy: Ueberschrift, Bild und Tafeln in einem Raster; der Satz steht unten im Bild auf
     einem dunklen Verlauf und spart so seine eigene Zeile. Kopf, Inhalt und Fall geben ihre
     Kinder dafuer an das Raster ab (display: contents). Abstaende wie vorher: 20 px von der
     Ueberschrift zum Bild, 10 px vom Bild zu den Tafeln. */
  #sCase .ix-top{ display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  #sCase .ix-head, #sCase .ix-body, #sCase .ix-case{ display: contents; }
  #sCase .ix-title{ grid-row: 1; margin-bottom: 10px; }
  #sCase .ix-media{ grid-row: 2; grid-column: 1; width: 100%; max-width: none; }
  #sCase .ix-lead{ grid-row: 2; grid-column: 1; align-self: end; position: relative; z-index: 1; max-width: none;
    padding: 36px 14px 12px; color: #fff; background: linear-gradient(to top, rgba(8,10,18,.82), rgba(8,10,18,0)); }
  #sCase .case-acc{ grid-row: 3; }
}
/* Kundenfall: Abstand zur rechten Rasterlinie halten, Bild fuellt sein Feld,
   und auf dem Handy nimmt es wirklich die volle Breite ein. */
@media (min-width: 761px){
  #sCase .ix-top { right: calc(var(--col-r) + var(--u)); }
}
#sCase .ix-media{ margin: 0; overflow: hidden; background: #F1F1F0; }
#sCase .ix-media img{ display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px){
  /* max-height zusammen mit festem Seitenverhaeltnis schrumpft sonst die Breite */
  #sCase .ix-media{ max-height: none; aspect-ratio: 16 / 10; }
}

/* Kundenfall: die Ergebnisse als grosse Zahlen, in derselben Sprache wie die
   Zahlen-Karten weiter oben. */
.case-figures{ list-style: none; margin: clamp(12px, 1.4vh, 20px) 0 clamp(10px, 1.2vh, 16px);
  padding: 0; display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 54px); }
.case-figures li{ min-width: 0; }
.case-figures b{ display: block; font-family: "Unbounded", "Inter", sans-serif;
  font-weight: 400; letter-spacing: -.05em; line-height: 1;
  font-size: clamp(30px, 3.4vw, 54px); color: var(--ink); }
.case-figures .cf-unit{ font-size: .46em; letter-spacing: -.02em; margin-left: .12em; }
.case-figures .cf-label{ display: block; margin-top: 6px; color: var(--muted); font-size: var(--t-small); line-height: 1.4; }
@media (max-width: 760px){
  .case-figures{ gap: 16px 26px; }
  .case-figures b{ font-size: 28px; }
}

/* Kundenfall: Der Block muss ueber die Querlinie passen, sonst verkleinert ihn
   die Section automatisch – und wird dadurch auch schmaler als die Seite.
   Deshalb flacheres Bild, kompaktere Karten. Die Ergebnis-Karte traegt die
   Farbwelt der grossen Zahlen-Karte. */

/* Kundenfall kompakter, damit der Block ueber die Querlinie passt und nicht
   automatisch verkleinert wird – sonst bleibt rechts Platz frei. */
@media (min-width: 761px){

  #sCase .case-figures{ margin: 10px 0 8px; gap: clamp(16px, 2.2vw, 44px); }

  #sCase .case-figures .cf-label{ margin-top: 4px; }
}
/* Kundenfall: Bild etwas schmaler, Block flacher. Ohne Zitatband darunter bleibt
   genug Luft bis zur Querlinie. */

/* Mehr Luft zwischen den Ergebniszahlen und dem Satz darunter. */
#sCase .case-figures{ margin-bottom: clamp(16px, 2.2vh, 28px); }
@media (min-width: 761px){
  #sCase .case-figures b{ font-size: clamp(38px, 4.6vw, 86px); }
}

/* ============================================================
   Kundenfall als Reihe von Tafeln: Links bleibt das Bild stehen,
   daneben vier Tafeln. Eine ist offen, die anderen zeigen nur Icon
   und senkrechte Beschriftung. Ein Klick oeffnet die naechste.
   ============================================================ */
.case-acc{ display: flex; gap: clamp(8px, .9vw, 14px); min-width: 0; }
.case-panel{ position: relative; overflow: hidden; display: flex;
  gap: clamp(10px, 1vw, 18px); color: var(--card-ink); cursor: pointer;
  flex: 0 0 clamp(54px, 4.6vw, 72px); min-width: 0;
  transition: flex-basis .55s cubic-bezier(.22,.8,.2,1),
              flex-grow .55s cubic-bezier(.22,.8,.2,1),
              background-color .45s ease, color .45s ease; }
.case-panel:focus-visible{ outline: 2px solid #2c5cff; outline-offset: 2px; }
.case-panel.is-open{ flex: 1 1 0; cursor: default; }
.cp-rail{ display: flex; flex-direction: column;
  flex: 0 0 auto; height: 100%; }
.cp-ico{ display: block; width: 22px; height: 22px; color: #2c5cff; }
.cp-ico svg{ display: block; width: 100%; height: 100%; }
.cp-label{ margin-top: auto; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: "Unbounded", "Inter", sans-serif; font-size: var(--t-h4);
  letter-spacing: -.01em; white-space: nowrap; }
.cp-body{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  justify-content: flex-end; opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,.8,.2,1);
  pointer-events: none; }
.case-panel.is-open .cp-body{ opacity: 1; transform: none; pointer-events: auto; }
.cp-body p{ margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--muted); }
.cp-body blockquote{ margin: 0; }
.cp-body blockquote p{ color: var(--ink); }
.cp-body cite{ display: block; margin-top: 8px; font-style: normal;
  color: var(--muted); font-size: var(--t-small); }
.case-panel--result{ color: #a9c0ff; }
.case-panel--result .cp-ico{ color: #8fb0ff; }
.case-panel--result .cp-body p{ color: #9db6f5; }
.case-panel--result .case-figures{ margin: 0 0 clamp(14px, 1.8vh, 24px); }
.case-panel--result .case-figures b{ color: #8fb0ff; }
.case-panel--result .case-figures .cf-label{ color: #7b93d8; }

@media (min-width: 761px){
  #sCase .ix-case{ display: grid; gap: clamp(10px, 1.1vw, 18px); }

  .case-acc{ grid-column: 2; grid-row: 1; }
  .case-panel--result .case-figures b{ font-size: clamp(30px, 3.6vw, 64px); }
}
@media (max-width: 760px){
  /* Hochkant stehen die Tafeln untereinander, die offene wird hoeher. */

  .case-panel{ gap: 12px; align-items: center; }
  .case-panel.is-open{ flex: 1 1 auto; align-items: stretch; }


  .case-panel.is-open .cp-label{ margin-top: 0; }
  .cp-body{ justify-content: flex-start; }
}
/* Hoehe der Tafelreihe sicher festlegen: Das Bild belegt nur die erste Zeile,
   die Reihe fuellt die Hoehe des Rasters. */
@media (min-width: 761px){
  #sCase .ix-case{ grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  #sCase .ix-media{ grid-column: 1; grid-row: 1 / 2; }
  #sCase .case-acc{ grid-column: 2; grid-row: 1 / 2; }
  .case-panel{ height: 100%; }
  .cp-rail{ height: auto; align-self: stretch; }
}
/* Die Rasterzeile braucht eine feste Hoehe. Sonst waechst sie mit dem Bild mit,
   die Tafeln werden riesig und ihre Beschriftung rutscht aus dem Bild. */
@media (min-width: 761px){

  #sCase .case-acc{ height: 100%; min-height: 0; }
  #sCase .ix-media{ height: 100%; min-height: 0; }
  #sCase .ix-media img{ height: 100%; object-fit: cover; }
}
/* Der Block fuellt die Hoehe bis zur Querlinie aus und haelt dort denselben
   Abstand wie links zur senkrechten Linie: eine Grundeinheit. */
@media (min-width: 761px){
  #sCase .ix-top{ display: flex; flex-direction: column;
    height: calc(100vh - var(--u) * 4); height: calc(100svh - var(--u) * 4); }
  #sCase .ix-body{ flex: 1 1 auto; min-height: 0; }
  /* Die Tafeln fuellen die Hoehe bis zur Querlinie, wachsen aber nicht
     unbegrenzt mit: auf hohen Bildschirmen werden sie sonst sehr hoch und
     der Text der offenen Tafel steht allein in einer grossen leeren Flaeche. */
  #sCase .ix-case{ height: min(100%, 46vh); height: min(100%, 46svh); min-height: 0;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 2.4fr); }
}

/* Tafeln: Der schmale Streifen bleibt grau, der Inhalt sitzt als eigene weisse
   Flaeche daneben – mit doppeltem Innenabstand und kleiner Ueberschrift. */

.cp-rail{ align-items: center; }
.cp-label{ text-align: center; }

.cp-title{ margin: 0 0 clamp(10px, 1.2vh, 16px); font-family: "Unbounded", "Inter", sans-serif;
  font-weight: 400; font-size: var(--t-h4); line-height: 1.25; letter-spacing: -.02em;
  color: var(--ink); }

/* ============================================================
   Durchlaufende Info-Sections: Sie bleiben nicht oben stehen, sondern
   scrollen normal durch und blenden nach denselben Regeln ein und aus.
   Ausnahme am Handy: Messen und Kundenfall halten an (folgender Abschnitt).
   ============================================================ */
.ix--flow{ height: auto; min-height: 0; }
.ix--flow .ix-stage{ position: relative; height: auto; overflow: visible;
  padding: calc(var(--u) * 2) var(--pad-r) calc(var(--u) * 2) var(--pad-l); }
.ix--flow .ix-top{ position: static; left: auto; right: auto; top: auto; height: auto; }
.ix--flow .ix-band{ position: static; left: auto; right: auto;
  margin-top: clamp(28px, 4vh, 60px); }
@media (max-width: 760px){
  .ix--flow .ix-stage{ padding: calc(var(--u) + 24px) var(--pad-r) 40px var(--pad-l); }
}

/* ============================================================
   Handy: Sections anhalten und Schritt fuer Schritt zeigen
   Problem, Zahlen, Was wir messen und Kundenfall bleiben oben stehen, waehrend unter
   ihrer Buehne eine leere Laufstrecke vorbeizieht: --pin-steps Schritte zu je
   --pin-step. Den Schritt schaltet site-1.js (pins): naechster Reiter, naechste Karte,
   naechste Tafel. Wo die Buehne anhaelt, setzt site-1.js als --pin-top: an ihrer Ruhelage,
   oder hoeher, wenn sonst die Karten bzw. Tafeln nicht ganz ins Bild passen.
   ============================================================ */
@media (max-width: 760px){
  #sProblem, #sStats, #sMeasure, #sCase{ --pin-step: 60svh; }
  #sProblem{ --pin-steps: 4; }   /* vier Probleme */
  #sStats{ --pin-steps: 3; }     /* drei Karten; die Quellen kommen danach mit dem Weiterscrollen */
  #sMeasure{ --pin-steps: 3; }   /* drei Punkte */
  #sCase{ --pin-steps: 4; }      /* vier Tafeln */
  #sProblem::after, #sStats::after, #sMeasure::after, #sCase::after{ content: ""; display: block;
    height: calc(var(--pin-steps) * var(--pin-step)); }
  #sStats .stats-inner, #sMeasure .ix-stage, #sCase .ix-stage{ position: sticky; top: var(--pin-top, 0px); }
  /* Noch nicht gezeigte Karten, Quellen und Punkte; pin-on setzt site-1.js, ohne Skript ist alles sichtbar */
  #sStats.pin-on .stats-card, #sStats.pin-on .stats-src, #sMeasure.pin-on .ix-item{
    transition: opacity .5s ease, transform .6s cubic-bezier(.22,.8,.2,1); }
  #sStats.pin-on .stats-card:not(.is-shown), #sStats.pin-on .stats-src:not(.is-shown),
  #sMeasure.pin-on .ix-item:not(.is-shown){ opacity: 0; transform: translateY(16px); }
}

/* Tafeln: Streifen fast weiss, Inhaltsflaeche ohne sichtbaren Rahmen. */
.case-panel{ background: #F4F4F3; padding: 0; }
.cp-rail{ padding: clamp(12px, 1vw, 18px); }
.cp-body{ background: #fff; padding: clamp(24px, 2vw, 40px); }
.case-panel--result{ background: #0b2064; }
.case-panel--result .cp-body{ background: #0e2570; }

@media (max-width: 760px){
  /* Handy: alle Tafeln offen, Text jeweils unter der Beschriftung. */


  .cp-body{ pointer-events: auto; }
}

/* Der Text in den Tafeln behaelt seine Breite, damit er beim Auf- und Zuklappen
   nicht neu umbricht. */
@media (min-width: 761px){
  .cp-body{ width: var(--cp-body-w, auto); flex: 0 0 auto; max-width: none; }
  .case-panel:not(.is-open) .cp-body{ pointer-events: none; }
}

/* Handy: alle Tafeln weiss, Icon und Beschriftung in einer Zeile, der Text
   klappt darunter auf. Keine Farbunterschiede zwischen den Tafeln. */
@media (max-width: 760px){
  .case-acc{ flex-direction: column; gap: 8px; }
  .case-panel, .case-panel--result{ display: block; flex: 0 0 auto; padding: 0;
    background: #fff; color: var(--ink); cursor: pointer; height: auto; }
  .cp-rail{ display: flex; flex-direction: row; align-items: center; gap: 12px;
    padding: 14px; height: auto; }
  .case-panel.is-open .cp-rail{ flex-direction: row; align-items: center; }
  .cp-label{ margin: 0; writing-mode: horizontal-tb; transform: none;
    text-align: left; color: var(--ink); }
  .cp-ico, .case-panel--result .cp-ico{ color: #2c5cff; }
  .cp-body{ display: none; width: auto; background: #fff; opacity: 1; transform: none;
    padding: 0 14px 16px; }
  .case-panel.is-open .cp-body{ display: block; }


}

/* "Was wir messen": Die Zeile im unteren Rahmen bleibt stehen, waehrend der
   Inhalt darueber weiterscrollt. */
@media (min-width: 761px){
  /* Das Band steht fest im unteren Rechteck zwischen Querlinie und Seitenrand.
     Sichtbar ist es nur, solange die Section im Bild ist – das steuert die Deckkraft. */
  .ix--flow .ix-stage{ padding-bottom: clamp(40px, 8vh, 90px); }
  /* Das Band fuellt das untere Rechteck und steht darin mittig – genau wie der
     Rom-Text in der Philosophie-Section. */
  /* Das Band sitzt im Rechteck UNTER der Querlinie. Deren Hoehe steht in --mid,
     sie liegt nicht bei 100vh minus Grundeinheit. */
  /* Regel wie ueberall: Der Abstand vom Text zu den Linien ist genauso gross wie
     der Abstand der Linien zum Bildschirmrand – eine Grundeinheit, auf allen Seiten. */
  .ix--flow .ix-band{ position: fixed; z-index: 3; margin: 0;
    left: calc(var(--u) * 2); right: calc(var(--col-r) + var(--u));
    display: flex; flex-direction: column; align-items: flex-start; }

}

/* Kundenfall: Der Streifen fuellt die Breite der geschlossenen Tafel aus, damit
   Icon und Beschriftung mittig stehen. */
.cp-rail{ width: clamp(54px, 4.6vw, 72px); box-sizing: border-box; }

@media (max-width: 760px){
  /* Ergebnis-Tafel ohne Blau, und weniger Abstand zwischen Kopfzeile und Text. */

  .case-panel.is-open .cp-body{ padding-top: 14px; }
  .cp-rail{ width: auto; }
}
/* Der Rom-Text laeuft am Desktop eine Stufe kleiner. */


/* Kundenfall: Punktraster im oberen Teil der Tafeln, wie auf der grossen
   Zahlen-Karte. Auf dem Handy bleibt die Ergebnis-Tafel blau. */
/* Das Punktraster liegt auf der Inhaltsflaeche, nicht auf dem schmalen Streifen. */
.cp-body{ position: relative; isolation: isolate; }
.cp-body::before{ content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(18,36,95,.16) 1.2px, transparent 1.3px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 45%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 45%, transparent 80%); }
.case-panel--result .cp-body::before{
  background-image: radial-gradient(circle, rgba(150,180,255,.28) 1.3px, transparent 1.4px);
  background-size: 17px 17px; }
@media (max-width: 760px){
  .case-panel--result, .case-panel--result .cp-body{ background: #0e2570; }
  .case-panel--result .cp-label { color: #fff; }
  .case-panel--result .cp-ico{ color: #8fb0ff; }
  .case-panel--result .cp-body p{ color: #9db6f5; }
  .case-panel--result .case-figures b{ color: #8fb0ff; }
  .case-panel--result .case-figures .cf-label{ color: #7b93d8; }
}
/* Das Band steht auf derselben Textkante wie der Inhalt darueber. */
.ix--flow .ix-band{ padding: 0; }
.ix--flow .ix-band .ix-bandtext{ max-width: min(100%, 68em); margin: 0; }
/* Der Rom-Text folgt derselben Regel wie alle Texte in den Rahmen: eine
   Grundeinheit Abstand zu Querlinie, Seitenlinien und Unterkante. */
@media (min-width: 761px){
  .si-note{ left: calc(var(--u) * 2); right: calc(var(--col-r) + var(--u));
    max-width: none; height: auto; }
}

/* Band und Rom-Text sitzen mittig im Rechteck unter der Querlinie – oben und
   unten derselbe Abstand, seitlich die uebliche Einrueckung. */
@media (min-width: 761px){
  .ix--flow .ix-band{ height: auto;
    justify-content: center; }
  .si-note{ top: var(--mid-layout, var(--mid)); bottom: 0; align-content: center; }
  .si-note .si-note-a, .si-note .si-note-b{ align-self: center; }
}

/* Handy: Die Zeile steht auch dort fest im unteren Rechteck. */
@media (max-width: 760px){
  .ix--flow .ix-band{ position: fixed; z-index: 3; margin: 0;
    left: var(--pad-l); right: var(--pad-r);
    display: flex; flex-direction: column;
    align-items: flex-start; }
}
/* Handy: Die Zeile bleibt mittig im Rechteck unter der Querlinie. */

/* Die Zeile sitzt eng im Rechteck: nur ein kleiner Rand zur Linie und zum
   Seitenende, der Rest ist Text. */
/* Desktop bleibt wie zuvor: mittig im Rechteck unter der Linie, ohne Zusatzrand. */
.ix--flow .ix-band{ top: var(--mid-layout, var(--mid)); bottom: 0; }
@media (max-width: 760px){
  /* Abstand oben/unten kommt ausschliesslich aus --band-gap:
     siehe Block "Handy - feste Abstandsregel" am Ende der Datei. */
}

/* Handy: im Rom-Text nur der erste Absatz, und die Tafeln im Kundenfall
   ohne Punktraster. */
@media (max-width: 760px){
  .si-note .si-note-b .si-p + .si-p{ display: none; }
  .cp-body::before{ display: none; }
}
/* Handy: der Satz sitzt enger im Rechteck – Abstand oben zur Linie und unten
   zum Displayrand je auf 12,5 % der Flaeche unter der Linie halbiert. */
@media (max-width: 760px){
  .si-note{ top: calc(var(--mid-layout, var(--mid)) + (100% - var(--mid-layout, var(--mid))) * 0.125);
    bottom: calc((100% - var(--mid-layout, var(--mid))) * 0.125); align-content: center; }
}
/* "Marketing für den Mittelstand" fett. Von Unbounded liegen nur 400 und 500 lokal
   vor, die 700 rechnet der Browser daraus hoch. */

/* Der Button im Footer entfaellt am Desktop. */
@media (min-width: 761px){ .ft-btn{ display: none; } }
/* Mehr Menuepunkte: etwas enger gesetzt, Groesse bleibt wie gehabt. */
.side-panel ul{ gap: 2px; }
.side-panel ul li a{ padding: 8px 0; }
/* Deutlich fetter: Unbounded hat lokal nur 400 und 500, deshalb verdickt zusaetzlich
   eine Kontur in der eigenen Textfarbe die Buchstaben. */
.hero-claim{ font-weight: 700; -webkit-text-stroke: .022em currentColor;
  paint-order: stroke fill; }/* Ueberschrift fuer Suchmaschinen und Screenreader: im Quelltext vorhanden,
   optisch uebernimmt die animierte Zeile im Hero. */

/* Fragen: offene Flaeche mit feiner Kante, geoeffnet heller und mit blauen Ecken. */

/* ============================================================
   Haeufige Fragen – eine einzige, vollstaendige Fassung.
   Zwei gleich breite Spalten: links die Ueberschrift, der
   Kontaktkasten unten buendig, rechts die Fragen ueber die volle Hoehe.
   ============================================================ */
#sFaq .ix-top{ display: block; }
#sFaq .ix-head{ display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
#sFaq .ix-title{ max-width: 24em; }
#sFaq .ix-lead{ grid-column: 1; grid-row: 2; text-align: left; padding: 0; max-width: 42em; }
#sFaq .ix-body{ margin-top: clamp(20px, 3vh, 40px); }

/* Huelle um die Fragen. Normal ist sie nicht vorhanden (display:contents),
   erst im Andock-Betrieb wird sie zum Fenster, in dem die Liste laeuft. */
.faq-scroll{ display: contents; }
.faq-list{ display: grid; gap: 10px; }
.faq-item{ background: transparent; border: var(--faq-line) solid rgba(17,17,17,.09);
  overflow: visible; position: relative;
  /* Flaeche und Rahmen gleiten mit derselben Kurve und Dauer wie die Hoehe
     (siehe DUR/EASE in site-1.js). Ohne das springt die helle Flaeche beim
     Zuklappen abrupt weg, waehrend die Box noch gleitet. */
  transition: background-color .48s cubic-bezier(.4,0,.15,1),
              border-color .48s cubic-bezier(.4,0,.15,1); }

.faq-item summary{ list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 18px; padding: clamp(16px, 1.4vw, 22px) clamp(18px, 1.6vw, 28px); }
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary h3{ margin: 0; font-family: "Unbounded", "Inter", sans-serif;
  font-weight: 400; font-size: var(--t-small); line-height: 1.35; letter-spacing: -.01em;
  color: var(--ink); }
.faq-item summary::after{ content: ""; flex: 0 0 auto; margin-left: auto;
  width: 7px; height: 7px; border-right: 2px solid rgba(17,17,17,.42); border-bottom: 2px solid rgba(17,17,17,.42);
  transform: translateY(-2px) rotate(45deg); transition: transform .3s ease; }
.faq-item[open] summary::after{ transform: translateY(2px) rotate(-135deg); }
.faq-item p{ margin: 0; padding: 0 clamp(18px, 1.6vw, 28px) clamp(18px, 1.6vw, 24px);
  color: var(--muted); font-size: var(--t-small); line-height: 1.6; }
/* Geoeffnet: hellere Flaeche, grauer Rahmen bleibt, blaue Punkte auf allen vier Ecken. */
.faq-item[open]{ background-color: #e8e8e6; border-color: rgba(17,17,17,.14); }
/* Die Punkte sitzen mittig auf den Ecken, ragen also um ihren halben Durchmesser
   nach aussen. Das Mass steht einmal hier: Das Fenster der Fragenspalte haelt im
   Andock-Betrieb genau diesen Ueberstand als Innenabstand frei, sonst schneidet
   es die Punkte an den Spaltenkanten ab. */
#sFaq{ --faq-dot: 6px; --faq-line: 1px; --faq-dot-out: calc(var(--faq-dot) / 2); }
.faq-dot{ position:absolute; width:var(--faq-dot); height:var(--faq-dot); border-radius:50%;
  background:#2c5cff; pointer-events:none; z-index:2;
  opacity:0; transition: opacity .2s ease; }
.faq-item[open] .faq-dot{ opacity:1; }
/* Waehrend des Zuklappens: Der Zustand [open] bleibt bis zum Ende der
   Hoehen-Animation gesetzt, deshalb nimmt diese Klasse das Aussehen schon
   zu Beginn zurueck - Farbe und Hoehe laufen so gemeinsam aus. */
.faq-item.is-closing{ background-color: transparent; border-color: rgba(17,17,17,.09); }
.faq-item.is-closing .faq-dot{ opacity: 0; }
.faq-item.is-closing summary::after{ transform: translateY(-2px) rotate(45deg); }
.faq-dot--tl{ top: calc((var(--faq-dot-out) + var(--faq-line)) * -1); left: calc((var(--faq-dot-out) + var(--faq-line)) * -1); }
.faq-dot--tr{ top: calc((var(--faq-dot-out) + var(--faq-line)) * -1); right: calc((var(--faq-dot-out) + var(--faq-line)) * -1); }
.faq-dot--bl{ bottom: calc((var(--faq-dot-out) + var(--faq-line)) * -1); left: calc((var(--faq-dot-out) + var(--faq-line)) * -1); }
.faq-dot--br{ bottom: calc((var(--faq-dot-out) + var(--faq-line)) * -1); right: calc((var(--faq-dot-out) + var(--faq-line)) * -1); }

.faq-ask{ background: #F1F1F0; padding: clamp(18px, 1.6vw, 28px); }
.faq-ask-title{ margin: 0 0 8px; font-family: "Unbounded", "Inter", sans-serif;
  font-weight: 400; font-size: var(--t-h4); color: var(--ink); }
.faq-ask-text{ margin: 0 0 14px; font-size: var(--t-small); line-height: 1.55; color: var(--muted); }
.faq-ask-mail{ display: inline-block; font-family: "Unbounded", "Inter", sans-serif; font-size: var(--t-small); color: #2c5cff; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; }

@media (min-width: 1100px){
  /* Der Spaltenabstand steht als Wert: Das Fenster der Fragen leitet unten seine
     linke Kante daraus ab. Zwei Quellen fuer dieselbe Zahl liefen auseinander. */
  #sFaq{ --faq-gap: clamp(32px, 3.4vw, 64px); }
  #sFaq .ix-body{ display: grid; grid-template-columns: 1fr 1fr;
    column-gap: var(--faq-gap); align-items: stretch; }
  .faq-aside{ grid-column: 1; display: flex; flex-direction: column; }
  .faq-aside .ix-head{ margin-bottom: clamp(18px, 2.4vh, 28px); }
  .faq-aside .faq-ask{ margin-top: auto; }
  .faq-list{ grid-column: 2; }
}
@media (max-width: 1099px){
  #sFaq .ix-body{ display: flex; flex-direction: column; }
  .faq-aside{ display: contents; }
  .faq-aside .ix-head{ order: 1; }
  .faq-list{ order: 2; margin-top: clamp(20px, 3vh, 40px); }
  .faq-ask{ order: 3; margin-top: 20px; }
}

/* ============================================================
   FAQ: Andocken ab der zweispaltigen Anordnung (ab 1100 px)
   Die Buehne haelt oben an, wie bei den uebrigen Sections. Links
   stehen Ueberschrift und Kontaktkasten in den Ecken des grauen
   Rahmens: oben derselbe Abstand zur Kopflinie wie links zur
   Seitenlinie (je --u), unten derselbe Abstand zur Querlinie.
   Rechts laufen nur die Fragen durch. Erst wenn die letzte Frage
   auf Hoehe der Kastenunterkante steht, scrollt die Section weiter.
   Die Hoehe der Section (= Laufweg) setzt das Skript, weil sie von
   der Hoehe der Fragenliste abhaengt und sich beim Auf- und
   Zuklappen aendert. Unter 1100 px rutschen die Fragen unter die
   Ueberschrift - dann greift wieder das normale Durchscrollen.
   ============================================================ */
@media (min-width: 1100px){
  #sFaq.is-docked .ix-stage{ position: sticky; top: 0;
    height: 100vh; height: 100svh; overflow: hidden; padding: 0; }
  /* Der Rahmen: oben --u unter der Kopflinie, unten --u ueber der Ruhelage der
     Querlinie. Bewusst aus --u gerechnet und NICHT an --mid gehaengt: Die
     Querlinie gleitet (midSmooth) und reagiert ausserdem auf die Hoehe dieser
     Section - beim Aufklappen einer Frage wanderte der Kontaktkasten sonst
     sichtbar mit, gemessen 714 -> 743 px. Die Ruhelage der Linie ist --u ueber
     dem unteren Rand, --u darueber sind also genau --u * 2. */
  #sFaq.is-docked .ix-top{ position: absolute; left: var(--pad-l); right: var(--pad-r);
    top: calc(var(--u) * 2); height: auto; bottom: calc(var(--u) * 2); }
  #sFaq.is-docked .ix-body{ margin-top: 0; height: 100%; }
  /* Fenster fuer die Fragen. Es wird aus dem Raster geloest - sonst macht seine
     Hoehe die Rasterzeile hoch und schiebt den Kontaktkasten nach unten.
     Bezug ist .ix-top, also der Rahmen: 50 % seiner Breite plus halber
     Spaltenabstand ist genau die linke Kante der zweiten Spalte. Oben um
     --u * 2 nach oben versetzt, damit es am Bildrand beginnt, und eine
     Bildhoehe hoch, also bis zur Unterkante. Statt einer harten Schnittkante
     blenden beide Enden weich aus: oben kurz vor der Kopflinie, unten ueber ein
     laengeres Stueck, damit Fragen von unten hereinkommen statt aufzutauchen. */
  #sFaq.is-docked .faq-scroll{ display: block; position: absolute;
    left: calc(50% + var(--faq-gap) / 2 - var(--faq-dot-out) - var(--faq-line));
    right: calc((var(--faq-dot-out) + var(--faq-line)) * -1);
    padding: 0 calc(var(--faq-dot-out) + var(--faq-line));
    top: calc(var(--u) * -2); height: 100vh; height: 100svh;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0,
      #000 var(--u), #000 calc(100% - var(--u) * 2), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0,
      #000 var(--u), #000 calc(100% - var(--u) * 2), transparent 100%); }
  /* Anlauf oben: Die erste Frage steht auf derselben Hoehe wie die Ueberschrift. */
  #sFaq.is-docked .faq-list{ padding-top: calc(var(--u) * 2); will-change: transform; }
  #sFaq.is-docked .faq-ask{ will-change: opacity, transform; }
}

/* Sehr niedrige Bildschirme (z. B. iPhone SE, 320x568): der Prozess ragte dort
   rund 17 px unter den Rand – Abstaende und Zeilenhoehe leicht enger. */
@media (max-height: 600px){
  body .s4-trigger{ font-size: var(--t-h3); }
  .s4-accordion{ gap: 4px; }
  body .s4-detail p{ line-height: 1.5; }
  .s4-detail{ padding-bottom: 4px; }
  .s4-title{ margin-bottom: 10px; }
}

/* Sehr niedrige Bildschirme: Menueliste enger. Unter 620 px Hoehe reicht der Platz
   fuer den Markentext nicht mehr – dort entfaellt er, damit nichts ueberlappt. */
@media (max-height: 660px){
  .side-panel a{ padding: 6px 0; }
  .side-panel{ padding-top: var(--u); }
}
@media (max-height: 620px){
  .panel-note{ display: none; }
}

/* ============================================================
   HANDY - FESTE ABSTANDSREGEL (letzter Block, gilt vor allem davor)
   ------------------------------------------------------------
   Ein einziger Stellwert fuer die Texte im Rechteck unter der
   Querlinie: --band-gap. Er gilt oben zur Querlinie und unten zum
   Displayrand. Vorher 42px, jetzt halbiert auf 21px.
   Dieselbe Zahl steht als MOB_BAND_GAP in assets/js/site-1.js und
   bestimmt dort, wohin die Querlinie rueckt.
   Wichtig: Die Texte haengen mit festem Abstand UNTER der Linie
   (bottom:auto, keine senkrechte Zentrierung). Nur so ist der
   Abstand verlaesslich - zentriert im Rechteck wurde er sonst
   immer groesser als der Stellwert.
   ============================================================ */
@media (max-width: 760px){
  :root{ --band-gap: 21px; --mob-gap: 24px; --mob-gap-below: 36px; }

  /* Grauer Satz in "Was wir messen" (und allen ix--flow-Sections) */
  .ix--flow .ix-band,
  #sMeasure .ix-band{
    top: calc(var(--mid-layout, var(--mid)) + var(--band-gap));
    bottom: auto;
    height: auto;
    justify-content: flex-start;
  }

  /* Blauer Rom-Text unter den Leistungen - gleiche Regel.
     Das JS setzt top/bottom zusaetzlich inline; die Werte dort
     stammen aus derselben Konstante. */
  body .si-note:not(.si-note--above){
    bottom: auto;
    height: auto;
    align-content: start;
  }
  body .si-note:not(.si-note--above) > span{ align-self: start; }

  /* Footer-Mobilregeln stehen jetzt im Schlussblock "HANDY - UI-STUFENLEITER". */
}

/* ============================================================
   HANDY - EINE ZEILENHOEHE FUER ALLE SECTION-UEBERSCHRIFTEN
   Die Groesse kommt ueberall aus --fs-h, die Zeilenhoehe stand
   dagegen auf drei verschiedenen Werten (1.14 / 1.18 / 1.25).
   Auf dreizeiligen Ueberschriften sind das rund 8 px Unterschied.
   ============================================================ */
@media (max-width: 760px){
  body .ix-title,
  body .stats-title,
  body .si-kicker,
  body .s2-title,
  body .s3-title,
  body .s4-title{ line-height: 1.22; }
}

/* ============================================================
   HANDY - UI-STUFENLEITER (verbindlicher Schlussblock)
   ------------------------------------------------------------
   Zwei Groessen fuer allen Bedienungstext auf dem Handy, mehr
   nicht. Vorher standen hier sieben verschiedene Werte
   (13,5 / 13 / 12 / 11,7 / 11,5 / 11), verteilt auf acht
   Media-Queries, die sich gegenseitig ueberschrieben.

   Es gibt dafuer KEINE eigene Leiter mehr: Bedienungstext ist
   Kleintext und nimmt --t-small aus der Schrift-Leiter. Damit hat
   die kleine Schrift ueberall exakt dieselbe Groesse - in Buttons,
   im Menue, im Footer und im Fliesstext.
   Die Tippflaeche bleibt unberuehrt: die kommt aus dem Innenabstand
   (--btn-h, 8px oben und unten in den Menuezeilen), nicht aus der
   Schriftgroesse.
   ============================================================ */
@media (max-width: 760px){
  :root{
    /* Eine Hoehe fuer alle freistehenden Buttons: Hero, Footer und die
       zwei Bereichsschalter im Menue. Vorher 44 / 40 / 38 px und im Menue
       zwei Vollflaechen von 175 px. */
    /* Innenraum senkrecht um die Haelfte mehr: Der Textblock ist 13,5px hoch,
       es blieben 24,5px Luft (12,25 oben und unten). Jetzt 36,5px (18,25 je
       Seite) - darum 50px statt 38px. Die Buttons waren zu flach. */
    --btn-h: 50px;
    /* Ein Innenabstand fuer alle Buttons. Mitwachsend, damit die beiden
       Bereichsschalter auch auf schmalen Geraeten nebeneinander passen:
       "Social Media" ist 90px breit, "Mitarbeitergewinnung" 154px. */
    --btn-pad: clamp(12px, 4vw, 18px);
  }

  /* Bedienungstext = Kleintext. Ein Wert fuer alles davon. */
  .side-panel a,
  .cta-btn,
  .ix-btn,
  .hero-cta,
  .service-toggle a,
  .service-toggle a.active,
  .side-panel .panel-switch a,
  .panel-note{ font-size: var(--t-small); }

  /* Buttons: eine Hoehe, ein Innenabstand, eine Form - ueberall. */
  .hero-cta{ height: var(--btn-h); padding: 0 var(--btn-pad); }

  /* Die zwei Bereichsschalter unten im Menue: je genau die Haelfte der
     Breite, buendig an der Unterkante, ohne Zwischenraum. Schrift und Hoehe
     wie bei jedem anderen Button; der aktive schwarz, der andere hell. */
  .side-panel .panel-switch a{
    flex: 1 1 0; min-width: 0; width: 50%;
    height: auto; white-space: nowrap;
    /* Der seitliche Innenabstand ist hier nur Sicherheitsrand: Die Breite
       kommt aus der Haelfte des Bildschirms, der Text steht mittig.
       "Mitarbeitergewinnung" ist 154px breit und braucht deshalb Platz. */
    padding: 0 6px var(--safe-b, 0px);
    background: #F1F1F0; color: var(--ink); font-weight: 400;
    transition: background .25s ease, color .25s ease;
  }
  .side-panel .panel-switch a.active{ background: #111; color: #fff; font-weight: 500; }

  /* ---- Footer ----
     Die E-Mail-Adresse entfaellt hier; sie steht bereits im Button
     darueber und im Menue. Der gewonnene Platz geht an die Abstaende
     (--ft-air, von layoutFooter berechnet).
     Aufbau: Icons, darunter linksbuendig die Anschrift, darunter
     alle elf Links in genau zwei Spalten - Seitenlinks und
     Rechtliches zusammen in einem Fluss. */
  .site-footer .ft-mail{ display: none; }

  .site-footer .ft-row{
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(12px + var(--ft-air, 0px));
    column-gap: 0;
    margin-top: calc(14px + var(--ft-air, 0px));
    line-height: 1.55;
  }
  .site-footer .ft-row > *{ grid-column: 1; }
  .site-footer .ft-social{
    align-items: center; padding-top: 0; gap: 16px;
  }
  .site-footer .ft-social a{ width: 18px; height: 18px; }

  /* Seiten- und Rechtslinks fliessen als ein Raster: links sechs,
     rechts fuenf. Die beiden Listen verschwinden dafuer als Kasten
     (display: contents), ihre Eintraege werden direkte Rasterfelder. */
  .site-footer .ft-links{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: 18px;
    row-gap: calc(2px + var(--ft-air, 0px) * 0.4);
  }
  .site-footer .ft-links .ft-nav,
  .site-footer .ft-links .ft-legal{ display: contents; }

  .site-footer .ft-btn{ margin-top: calc(12px + var(--ft-air, 0px) * 0.6); }
}

/* Desktop bleibt unberuehrt: Der Wrapper verschwindet, damit .ft-nav und
   .ft-legal weiter direkte Felder von .ft-row sind (eigene Spalten). */
@media (min-width: 761px){
  .site-footer .ft-links{ display: contents; }
}

/* ============================================================
   HANDY - MENUE HAENGT NICHT MEHR AN DER SCROLL-LINIE
   ------------------------------------------------------------
   Die Trennung im Menue (Notiz oben, die zwei Felder unten) war
   an --mid gehaengt. --mid ist aber die Linie der Scroll-
   Choreografie und hatte drei verschiedene Quellen:

     site-1.js   Startseite, aus dem Scrollstand gerechnet -> 521px
     chrome.js   Unterseiten, pauschal vh * 0.78            -> 569px
     CSS         ohne JS: --mid: 75svh                      -> 548px

   Dasselbe Menue sass damit auf jeder Seite 48px anders - und
   verschob sich sogar innerhalb einer Unterseite, sobald das JS
   nachlief. Es bekommt deshalb sein eigenes Mass: die zwei Felder
   unten haben eine feste Hoehe, die Notiz sitzt darueber. Gleich
   auf jeder Seite, unabhaengig vom Scrollstand.
   ============================================================ */
@media (max-width: 760px){
  /* Band = genau die Buttonhoehe. Es fuellt die volle Breite und liegt
     buendig an der Unterkante; die Querlinie sitzt auf seiner Oberkante.
     Die Trennung zwischen beiden Buttons liegt dadurch genau mittig. */
  .side-panel{ --panel-switch-h: calc(var(--btn-h) + var(--safe-b, 0px)); }
  .side-panel .panel-switch{
    /* Seitlich bis an die senkrechten Rasterlinien, nicht bis zum
       Displayrand: links die Menuelinie (--ml), rechts dieselbe Lage,
       die auch die rechte Rasterlinie benutzt (--col-r). */
    left: var(--ml); right: var(--col-r); bottom: 0; top: auto;
    height: var(--panel-switch-h);
    gap: 0; align-items: stretch;
  }
  .side-panel .panel-note{ bottom: calc(var(--panel-switch-h) + 72px); }
}

/* Gemessen: "Mitarbeitergewinnung" ist 153,4px breit. Mit 6px Luft je Seite
   braucht eine Haelfte 165,4px, das Band also 331px - bei 21px Einzug links
   und rechts entspricht das 373px Bildschirmbreite. Darunter stehen die
   beiden untereinander, jeder ueber die volle Bandbreite. Die Querlinie
   folgt von selbst, weil frame.js die Bandhoehe misst. */
@media (max-width: 372px){
  .side-panel .panel-switch{ flex-direction: column; }
  .side-panel .panel-switch a{ width: 100%; }
  .side-panel{ --panel-switch-h: calc(2 * var(--btn-h) + var(--safe-b, 0px)); }
}

/* ============================================================
   KLEINE, KURZE DISPLAYS (z.B. iPhone SE, 360x640)
   Dieselbe Anordnung wie auf jedem Handy - nur alles proportional
   eine Stufe kleiner: Grundmass, Abstaende, Buttons, Schrift.
   Grund: Unterhalb von ~740px Hoehe passt die Leistungs-Section
   sonst nicht zwischen Kopflinie und Querlinie und wurde dann
   verzerrt heruntergerechnet (bis 0,62) - das unterlief die Leiter.
   ============================================================ */
@media (max-width: 760px) and (max-height: 740px){
  :root{
    --u: calc(52px + var(--safe-t));
    --t-hero:  24px;
    --t-h1:    18px;
    --t-h2:    15px;
    --t-h3:    13px;
    --t-h4:    12px;
    --t-body:  11px;
    --t-small: 10px;
    --btn-h:   42px;
    --band-gap: 16px;
    --mob-gap: 18px;
    --mob-gap-below: 26px;
  }
}