/* Stapelweise (dok.land)
   Aus dem Entwurfs-Wireframe ausgelagert. Regeln, die nur den simulierten
   Browserrahmen des Entwurfs betrafen, sind entfernt. Sonst unverändert.

   Neu gegenüber dem Entwurf: body und .seite. Im Entwurf steckten Grundschrift,
   Textfarbe und Seitenbreite in .wire-app und .browser-frame, also in Elementen,
   die es hier nicht mehr gibt. .seite hält die Inhaltsbreite von 960 px, auf die
   das gesamte Layout ausgelegt ist.

   Eine Fläche, eine Farbe: body und .seite tragen beide paper-surface. Vorher lag
   die Spalte als helleres Blatt auf dem dunkleren paper — der sichtbare Rand
   ringsum war das Erbe des Entwurfs, in dem ein Browserrahmen nachgebaut war.
   Ohne ihn hört die Seite am Fensterrand nicht mehr auf.

   --paper ist damit nicht überflüssig, es wechselt die Rolle: es ist nur noch der
   zurückgesetzte Ton auf der Fläche — Kopfzeile und Zeilenwechsel der
   Vergleichstabelle (table.cmp), in der Demo dasselbe als --muted. Wer die Spalte
   wieder absetzen will, ändert genau diese eine Zeile zurück. */

body{
  margin:0;
  background:var(--paper-surface);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.seite{
  max-width:960px;
  margin:0 auto;
  min-height:100vh;
  background:var(--paper-surface);
  position:relative;
}

/* Im Entwurf waren Wortmarke, Menü, Branchenkacheln und Fußleiste noch span- und
   div-Elemente. Jetzt sind es echte Links und würden sonst blau und unterstrichen
   erscheinen. Bei der Wortmarke liefe der Strich quer über den orangen Schwung. */
a.nav-logo, a.nav-item, a.branch-tile, a.nav-link, .footer-mock a{
  color:inherit;
  text-decoration:none;
}

@font-face{
    font-family:"Bricolage Grotesque";
    src:url("../fonts/bricolage-grotesque.woff2") format('woff2');
    font-weight:200 800;
    font-style:normal;
    font-display:swap;
  }

  :root{
    --paper:#F5F1E8;
    --paper-surface:#FBF9F3;
    --ink:#172832;
    --ink-soft:#172832b3;
    --ink-mute:#17283280;
    --orange:#E8612C;
    --orange-fill:#E8612C1a;
    --sky:#86B8C7;
    --sky-fill:#86B8C733;
    --gray:#D8D6CF;
    --good-text:var(--ink);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --paper:#141f26;
      --paper-surface:#1b2830;
      --ink:#F5F1E8;
      --ink-soft:#F5F1E8b3;
      --ink-mute:#F5F1E880;
      --orange:#FF7A45;
      --orange-fill:#FF7A4526;
      --sky:#9FD1E0;
      --sky-fill:#9FD1E029;
      --gray:#2d3d46;
    }}
  :root[data-theme="dark"]{
    --paper:#141f26; --paper-surface:#1b2830; --ink:#F5F1E8; --ink-soft:#F5F1E8b3; --ink-mute:#F5F1E880;
    --orange:#FF7A45; --orange-fill:#FF7A4526; --sky:#9FD1E0; --sky-fill:#9FD1E029; --gray:#2d3d46;
  }
  :root[data-theme="light"]{
    --paper:#F5F1E8; --paper-surface:#FBF9F3; --ink:#172832; --ink-soft:#172832b3; --ink-mute:#17283280;
    --orange:#E8612C; --orange-fill:#E8612C1a; --sky:#86B8C7; --sky-fill:#86B8C733; --gray:#D8D6CF;
  }


  /* Diese drei tragen ihre Zeichnung als eingebettetes <img>, nicht als
     Sprite-<use> — currentColor greift dort nicht, die SVG-Datei bringt ihre
     Strichfarbe (immer #E8612C, ein einzelner stroke, keine Fläche) fest mit.
     Im Dunkelmodus bliebe das Orange sonst unverändert und wäre auf dunklem
     Papier schwer zu erkennen. brightness(0) macht die Zeichnung schwarz,
     invert(1) dreht sie auf Weiß — unabhängig von der Ursprungsfarbe, weil
     jede Datei einfarbig ist. */
  @media (prefers-color-scheme: dark){
    img.ic, .illu-hosting, .type-ic{filter:brightness(0) invert(1);}
   }


  *{box-sizing:border-box;}
  body{margin:0;}
  .display{font-family:"Bricolage Grotesque",-apple-system,sans-serif;}
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;}

  /* ---- Deutsche Wörter auf schmalen Bildschirmen ----
     Der Text ist deutsch, und Komposita wie "Hochschulzugangsberechtigung" oder
     "Nebenkostenabrechnungen" sind breiter als eine Telefonspalte. Ein Wort, das
     nicht umbrechen kann, schiebt nicht nur seine Zeile hinaus, sondern die ganze
     Seite: der Kasten selbst bleibt schmal, aber document.scrollWidth wächst, und
     der Besucher kann waagerecht wischen. Genau das war auf sieben Seiten zu sehen.

     overflow-wrap:break-word greift genau dann und nur dann, wenn ein Wort allein
     nicht in seine Zeile paßt. An allen anderen Umbrüchen ändert sich nichts —
     deshalb steht hier bewußt nicht hyphens:auto: das würde auch dort trennen, wo
     die Zeile nur besser gefüllt werden könnte, und damit das Schriftbild jeder
     Überschrift und jedes Absatzes verändern. Das ist eine Gestaltungsfrage, keine
     Fehlerbehebung. Wo eine Spalte so schmal ist, daß ein harter Bruch mitten im
     Wort auffiele, steht hyphens:auto einzeln dabei (Vergleichstabelle, Kacheln). */
  @media (max-width:640px){
    .seite{overflow-wrap:break-word;}}

  /* ---- squiggle accent, reused under key words ---- */
  .squiggle{position:relative; display:inline-block;}
  .squiggle svg{position:absolute; left:-2%; bottom:-.14em; width:104%; height:.3em; overflow:visible;}
  .squiggle svg path{fill:none; stroke:var(--orange); stroke-width:3; stroke-linecap:round;}

  /* ---- soft blob, decorative only ---- */
  .blob{position:absolute; border-radius:50%; background:var(--sky); filter:blur(38px); opacity:.4; z-index:0; pointer-events:none;}
  /* ---- Zeichnungen im Dunkelmodus ----
     Die GIF unter assets/img/ sind schwarze Strichgrafik auf durchsichtigem Grund
     und verschwinden auf dunklem Papier. Neben jeder Datei liegt deshalb eine
     Cremefassung <name>-dunkel.gif (node tools/gif-dunkelmodus.mjs), die ein
     <picture> um das <img> per Medienabfrage einsetzt.

     display:contents nimmt das <picture> aus dem Layout heraus: ohne die Regel
     wäre nicht mehr das <img> das Flex-Element in .funktion-step, sondern der
     Umschlag, und .hero-gif bekäme im Hero eine leere Inline-Box. So bleibt jede
     Regel weiter unten unverändert richtig — sie zielt auf das <img>. */
  picture{display:contents;}

  .hero-gif{
    position:absolute; top:45px; right:150px; width:300px; height:auto; z-index:1;
    pointer-events:none; display:block;
  }
  /* .hero-illu ist der Umschlag um das Trichter-GIF auf der Startseite und traegt die
     Positionierung, die .hero-gif sonst allein traegt; innerhalb des Umschlags fuellt das
     GIF nur noch seinen Platz. Hier stand bis zuletzt auch eine Bildunterschrift
     ("90% Zeitersparnis", die im Takt des GIF aufblendete) — die Aussage steht jetzt als
     .stat-inline unter den beiden Lede-Zeilen, wie auf den Branchenseiten. Der Umschlag
     bleibt: an ihm haengt die Regel, die das GIF auf dem Telefon aus der absoluten
     Positionierung nimmt (weiter unten, @media max-width:640px). */
  .hero-illu{
    position:absolute; top:45px; right:90px; width:300px; z-index:1; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .hero-illu .hero-gif{position:static; top:auto; right:auto; width:100%;}
  /* Auf dem Telefon derselbe Deckel wie bei den Branchenseiten (.hero.mit-gif
     .hero-gif, weiter unten): das Trichter-Motiv ist quadratisch, 340px Breite hieß
     294px Höhe. Seit die Punkteliste im Hero entfallen ist, steht dort ohnehin mehr
     Luft als Text. */
  @media (max-width:640px){
    .hero-illu{
      position:static; width:90%; max-width:230px; margin:18px auto 2px;
    }
  }
  /* .mit-gif fuer Heroes, deren Ueberschrift ueber die ganze Spalte laeuft.
     Auf der Startseite erzwingen <span class="hline"> den Umbruch, die Zeile endet
     also von selbst links vom Bild. Wo das nicht so ist (loesungen.html), lief die
     Ueberschrift unter die Zeichnung. Sie weicht jetzt aus: 470px sind die Breite
     des Bildes plus sein Abstand zum rechten Rand.
     Unterhalb von 860px waere der Rest zu schmal fuer eine Ueberschrift — dort
     rutscht das Bild unter den Text, wie es die 640px-Regel oben ohnehin vorsieht. */
  .hero.mit-gif h1{max-width:calc(100% - 470px);}
  /* .hero traegt position:static, das Bild bezieht sich also auf .seite und nicht
     auf den Hero: top:45px liegt damit im 67px hohen Menuband. Bei den meisten
     Motiven faellt das nicht auf, weil oben im Bild nichts gezeichnet ist — beim
     Haus auf lokale-ki.html reichen die Wolken hinauf. 88px setzen den Kasten
     unter das Menuband. */
  .hero.mit-gif .hero-gif{top:88px;}
  @media (max-width:860px){
    .hero.mit-gif h1{max-width:none;}
    .hero.mit-gif .hero-gif{
      position:static; display:block; width:90%; max-width:340px; height:auto;
      margin:28px auto 4px;
    }
  }
  /* Auf dem Telefon kleiner: die Motive der Branchenseiten sind nahezu quadratisch,
     340px breit heißt also 294px Höhe allein für die Zeichnung — ein halber
     Bildschirm, bevor der erste Satz kommt. Strichgrafik verträgt die Verkleinerung;
     bei 230px ist sie noch klar zu lesen. */
  @media (max-width:640px){
    .hero.mit-gif .hero-gif{max-width:230px; margin:18px auto 2px;}
    .role-illu{height:104px;}
  }

  section{padding:42px 24px 38px; border-bottom:1px solid var(--gray); position:relative; z-index:1;}
  section:last-of-type{border-bottom:none;}

  .nav-mock{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px 24px; border-bottom:1px solid var(--gray); flex-wrap:wrap;
    position:sticky; top:0; z-index:50; background:var(--paper-surface);
  }
  .nav-logo{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:20.5px; color:var(--ink);}
  .nav-links{display:flex; gap:22px; font-size:16px; color:var(--ink-mute); flex-wrap:wrap;}
  .nav-ctas{display:flex; gap:8px;}
  .nav-burger{
    display:none; align-items:center; justify-content:center;
    width:34px; height:34px; padding:0; border:none; background:none; color:var(--ink);
    cursor:pointer;
  }
  /* Alle .btn sind inzwischen Links: auf /demo/, auf kontakt.html, auf einen Anker.
     Einen funktionslosen <button> gibt es auf der Website nicht mehr.
     Damit beides gleich aussieht, stehen hier die drei Eigenschaften, die ein Button
     vom Browser geschenkt bekommt und ein <a> nicht: Blockdarstellung (sonst greifen
     die senkrechte Polsterung und die Breite in .price-card .btn nicht), zentrierter
     Text und keine Unterstreichung. Zeilenhöhe braucht es nicht — body setzt keine,
     also gilt für beide `normal`. Vgl. den Reset für a.nav-item weiter oben. */
  .btn{
    font-family:inherit; font-size:15.5px; font-weight:600;
    border-radius:7px; padding:8px 14px; border:1.5px solid var(--ink);
    background:transparent; color:var(--ink); white-space:nowrap;
    display:inline-block; text-align:center; text-decoration:none;
  }
  .btn.primary{background:var(--orange); color:var(--paper-surface); border-color:var(--orange);}
  .breadcrumb{font-size:15px; color:var(--ink-mute); padding:10px 24px 0;}
  .breadcrumb .sep{margin:0 6px; opacity:.6;}
  .breadcrumb a{color:inherit; text-decoration:none;}
  .breadcrumb a:hover{color:var(--orange);}

  .hero{padding-top:40px; padding-bottom:36px; position:static;}
  .hero h1{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:38.5px; line-height:1.2; margin:0 0 16px; max-width:36ch;}
  .hero p.lede{font-size:18.5px; color:var(--ink-soft); max-width:46ch; margin:0 0 20px; line-height:1.55;}
  /* Ausnahme fuer lange Lede-Texte, die ueber die volle Spaltenbreite laufen sollen.
     Als Modifikator wie p.sec-sub.breit, weil .hero p.lede auf 18 Seiten sitzt. */
  .hero p.lede.breit{max-width:none;}
  .hero .btn-row{display:flex; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
  .cta-option-row{display:flex; gap:32px; justify-content:center; flex-wrap:wrap;}
  .cta-option{display:flex; flex-direction:column; align-items:center; gap:8px;}
  .cta-caption{font-size:14px; color:var(--ink-mute); max-width:30ch; text-align:center; line-height:1.4;}
  .stat-inline{font-size:17px; color:var(--ink); background:var(--sky-fill); display:inline-flex; gap:7px; align-items:center; padding:7px 14px; border-radius:99px; margin-top:14px; font-weight:600;}
  /* Das Häkchen hier statt über die width/height-Attribute im HTML: es steht auf zehn
     Branchenseiten und soll überall gleich groß sein. CSS gewinnt gegen die Attribute,
     die dort weiter als Rückfallwert stehen bleiben. flex-shrink:0, damit es beim
     Umbruch der Zeile nicht zusammengedrückt wird. */
  .stat-inline svg{width:18px; height:18px; flex-shrink:0;}
  .hero-points{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
  .hero-points li{display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; color:var(--ink);}
  .hero-points svg{color:var(--orange); flex-shrink:0;}

  .showroom{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1px;
    background:var(--gray); border:1px solid var(--gray); border-radius:10px; overflow:hidden;
    margin-top:26px; position:relative;
  }
  .showroom > div{background:var(--paper-surface); padding:16px;}
  .showroom h4{margin:0 0 10px; font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-mute);}
  .doc-lines{display:flex; flex-direction:column; gap:7px;}
  .doc-lines .ln{height:8px; background:var(--gray); border-radius:3px;}
  .kv-list{display:flex; flex-direction:column; gap:9px;}
  .kv{display:flex; justify-content:space-between; font-size:15px; gap:12px;}
  .kv .k{color:var(--ink-mute);}
  .kv .v{font-weight:600; font-family:ui-monospace,monospace; font-size:14.5px;}

  .trust-row{display:flex; gap:14px; flex-wrap:wrap;}
  .trust-tile{
    flex:1; min-width:150px;
    background:var(--paper-surface); border:1px solid var(--gray); border-radius:10px; padding:16px;
    display:flex; flex-direction:column; gap:4px;
  }
  .trust-tile .big{font-family:"Bricolage Grotesque",sans-serif; font-size:25px; font-weight:800;}
  .trust-tile .lbl{font-size:15px; color:var(--ink-mute);}

  /* text-wrap:balance gegen den einzelnen Waisen-Wort in der zweiten Zeile: bricht
     eine zweizeilige Überschrift an einer Stelle, die beide Zeilen etwa gleich lang
     macht, statt eine fast volle erste Zeile und ein einzelnes Wort darunter stehen
     zu lassen (z. B. "So läuft die" / "Zusammenarbeit" auf schmalen Bildschirmen). */
  h2.sec-title{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:24px; margin:0 0 6px; text-wrap:balance;}
  /* 52ch war zu knapp: Sätze wie "Stapelweise steht in drei Betriebsvarianten zur
     Verfügung." (~58 Zeichen) oder "Von der ersten Frage bis zum laufenden Betrieb —
     in vier Schritten." (~67 Zeichen) brachen dadurch um, obwohl die Spalte bis 960px
     breit ist und beide Sätze längst reinpassen. 70ch deckt diese Fälle ab, ohne die
     wirklich langen Absätze (die ohnehin .breit tragen oder eigenes max-width mitbringen)
     zu einer einzigen, unleserlich breiten Zeile zu machen. */
  p.sec-sub{font-size:17px; color:var(--ink-mute); margin:0 0 18px; max-width:70ch;}
  /* Ausnahme fuer lange Untertitel, die ueber die volle Spaltenbreite laufen sollen.
     Als Modifikator, weil .sec-sub auf fuenfzehn Seiten sitzt. */
  p.sec-sub.breit{max-width:none;}

  /* umbrechend: die drei Reiter ("Nach Branche/Dokumentart/Anwendungsfall") passen
     auf einem 320px-Telefon nicht in eine Zeile. Wo Platz ist, ändert das nichts. */
  .subtabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
  .subtab{
    font-size:15px; padding:6px 12px; border-radius:99px; background:var(--gray); color:var(--ink-mute);
    cursor:pointer; transition:background .15s ease, color .15s ease;
  }
  .subtab:hover{background:var(--orange-fill); color:var(--orange); font-weight:700;}
  .subtab.active{background:var(--orange-fill); color:var(--orange); font-weight:700;}
  .tile-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
  .tile{
    border:1.5px dashed var(--gray); border-radius:9px; padding:14px 10px;
    display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  }
  .tile .ic{color:var(--ink-mute);}
  .tile .t{font-size:14.5px; font-weight:600;}

  .branch-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
  .branch-tile{
    background:var(--paper-surface); border:1px solid var(--gray); border-radius:10px; padding:16px 12px;
    display:flex; flex-direction:column; gap:10px; align-items:flex-start;
    cursor:pointer; transition:background .18s ease, border-color .18s ease, transform .5s cubic-bezier(.25,1,.4,1);
  }
  .branch-tile:hover{background:var(--orange-fill); border-color:var(--orange);}
  .branch-tile:active{transform:scale(.96);}
  .branch-tile .t{font-size:15.5px; font-weight:600; line-height:1.3;}
  .branch-tile .ic{color:var(--orange);}
  .branch-tile:nth-child(even) .ic{transform:rotate(-4deg);}
  .branch-tile:nth-child(odd) .ic{transform:rotate(3deg);}

  .lsg-panel[hidden]{display:none;}
  .mini-tile-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;}
  .mini-tile{
    background:var(--paper-surface); border:1px dashed var(--gray); border-radius:8px; padding:10px 10px;
    display:flex; align-items:center; gap:8px; cursor:pointer;
    transition:transform .5s cubic-bezier(.25,1,.4,1), background .18s ease, border-color .18s ease;
  }
  .mini-tile:hover{background:var(--orange-fill); border-color:var(--orange); border-style:solid;}
  .mini-tile:active{transform:scale(.94);}
  .mini-tile .ic{color:var(--orange); flex-shrink:0;}
  /* Ein Flex-Element schrumpft nicht unter seinen Mindestinhalt, und der ist hier
     ein einzelnes langes Wort ("Nebenkostenabrechnungen"). min-width:0 gibt es frei,
     Trennung und Notumbruch machen es dann klein genug — nötig nicht nur auf dem
     Telefon, sondern überall, wo vier Kacheln nebeneinander stehen. */
  .mini-tile .t{font-size:14px; font-weight:600; line-height:1.25; min-width:0; hyphens:auto; overflow-wrap:break-word;}
  .mini-tile-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Zwei sehr schmale Spalten: hier ist die deutsche Trennung besser als der
     harte Bruch, den overflow-wrap sonst mitten in "Nebenkostenabrechnungen" setzt. */
  @media (max-width:640px){
    .mini-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

  .doc-channel-grid{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(14px, 3cqw, 36px); align-items:center;
    min-height:clamp(140px, 18cqw, 210px);
    container-type:inline-size;
  }
  .doc-channel-right{display:flex; align-items:center; justify-content:center;}
  /* Der Eingangsweg ist ein Schreibmaschineneffekt und trägt deshalb white-space:nowrap
     — ein Umbruch mitten im Tippen ließe die Zeile bei jedem Zeichen springen. Damit
     muß die Schriftgröße so gewählt sein, daß auch der längste Weg in seine Spalte
     paßt: "über das Campus-Management-System", 34 Zeichen. Bei den früheren 2,9cqw
     lief er auf jeder Breite über seine Spalte hinaus und schob die Seite auf — nur
     sah man es selten, weil der Effekt die Wege durchwechselt und meist ein kürzerer
     stand. Wer hier einen längeren Weg einträgt, prüft das nach. */
  .channel-type{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
    font-size:clamp(20.5px, 2.6cqw, 29px); color:var(--orange); text-align:center; line-height:1.15;
  }

  .health-steps{display:flex; flex-direction:column;}

  /* Illustrationsfläche rechts vom Gesundheits-Stepper */
  .illu-slot{
    width:100%; min-height:210px; border:1.5px dashed var(--gray); border-radius:12px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-size:14px; color:var(--ink-mute); line-height:1.5; padding:16px;
  }
  .illu-slot[hidden]{display:none;}
  /* Kleine Variante für die Hosting-Karten auf lokale-ki.html: dort sitzt der
     Platzhalter zwischen Überschrift und Fließtext und darf die Karte nicht
     auseinanderziehen. 210px wie im Regelfall wären dort mehr als der Text. */
  .illu-slot.klein{min-height:88px; font-size:13px; padding:10px;}
  /* Fertige Strichgrafik in einer Hosting-Karte. Ersetzt dort den gestrichelten
     Platzhalter, deshalb ohne Rahmen. */
  .illu-hosting{display:block; width:100%; height:auto; margin:4px auto 8px;}

  /* Fallstudie: Logo links (1/4), Teaser rechts (3/4) */
  .case-study-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:22px; align-items:center;}
  .case-study-logo{display:flex; align-items:center; justify-content:center; padding:8px;}
  .case-study-logo img{max-width:100%; height:auto;}
  .case-study-logo .case-scribble{width:100%; max-width:260px; height:auto;}
  .case-label{
    font-size:13px; text-transform:uppercase; letter-spacing:.09em;
    color:var(--ink-mute); font-weight:600;
  }
  .case-logo-img{height:40px; display:flex; align-items:center;}
  .case-logo-img img, .case-logo-img svg{max-height:100%; max-width:100%; width:auto; height:auto;}
  /* Hier standen .logo-on-light und .logo-fallback. Das Trägerplättchen brauchte das
     Nürburgring-Logo, solange es seinen Grund als Karomuster fest im Bild trug — es ist
     jetzt freigestellt (logo-nuerburgring.png) und hat eine Dunkelfassung. Der
     Text-Ersatz („Mittelständisches Unternehmen") stand dort, wo noch kein Logo
     vorlag; auch diese Stelle trägt jetzt das Nürburgring-Logo. */

  /* Rollen: vier Spalten mit Illustration */
  .role-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;}
  .role-col{display:flex; flex-direction:column; gap:8px;}
  .role-illu{height:132px; width:auto; max-width:100%; object-fit:contain; align-self:center; margin-bottom:4px;}
  .role-col h5{margin:0; font-size:17px; font-weight:700; color:var(--ink);}
  .role-col p{margin:0; font-size:15px; color:var(--ink-mute); line-height:1.5;}
  .role-result{display:flex; align-items:flex-start; gap:6px;}
  .role-result .arrow{color:var(--orange); font-weight:800; flex-shrink:0;}

  /* Rollenkarten mit Icon statt Illustrationsplatzhalter, plus Rollen-Pill */
  .role-illu-icon{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    background:var(--orange-fill); color:var(--orange);
    display:flex; align-items:center; justify-content:center; margin-bottom:2px;
  }
  .role-pill{
    display:inline-block; background:var(--orange-fill); color:var(--orange);
    font-size:14px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
    padding:4px 10px; border-radius:99px;
  }

  /* Bahnhofsanzeige-Klappeffekt */

  /* Hauptmenü. Das frühere Aufklappmenü („Lösungen ▾") ist ersetzt durch einen
     normalen Link auf loesungen.html; seine Spalten leben jetzt im Fuß der Seite
     (.footer-cols) und auf der Lösungsübersicht. */
  .nav-item{cursor:pointer;}
  .nav-item.current{color:var(--ink); font-weight:600;}
  .nav-item:hover{color:var(--ink);}

  /* Betriebsmodelle */
  .model-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
  .model-card{
    background:var(--paper-surface); border:1px solid var(--gray); border-radius:12px;
    padding:18px; display:flex; flex-direction:column; gap:8px;
    transition:border-color .18s ease, border-width .18s ease;
  }
  .model-card:hover{border-color:var(--orange); border-width:1.5px;}
  .model-kicker{font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-mute); font-weight:600;}
  .model-card h4{font-family:"Bricolage Grotesque",sans-serif; margin:0; font-size:19px; font-weight:800;}
  .model-card p{margin:0; font-size:15px; color:var(--ink-soft); line-height:1.55;}
  .model-for{margin-top:auto; font-size:14px; color:var(--ink-mute); border-top:1px solid var(--gray); padding-top:8px;}
  .model-price{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin:2px 0 2px;}
  .model-price .amount{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:31px; line-height:1; color:var(--orange);}
  .model-price .unit{font-size:14.5px; color:var(--ink-mute); font-weight:600;}
  .model-tiers{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:5px;}
  .model-tiers li{display:flex; justify-content:space-between; gap:10px; font-size:14.5px; color:var(--ink-soft); border-bottom:1px dotted var(--gray); padding-bottom:4px;}
  .model-tiers li:last-child{border-bottom:0;}
  /* Die Staffelpreise der KI-Box tragen dasselbe Bild wie die einzelne Zahl der
     beiden anderen Varianten (.model-price .amount), damit die drei Karten
     preislich gleich gewichtet gelesen werden. */
  .model-tiers .tier-price{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:31px;
    line-height:1; color:var(--orange); white-space:nowrap;
  }
  .model-tiers li{align-items:baseline;}
  .price-note{font-size:14px; color:var(--ink-mute); margin:14px 0 0;}
  /* Setup-Gebuehr unter den Paketkarten: eigene Zwischenueberschrift und derselbe
     Preiskopf wie in den Karten (.price-head), damit die einmalige Gebuehr im
     gleichen Bild gelesen wird wie die Monatspreise darueber. */
  .setup-block{margin-top:26px; padding-top:20px; border-top:1px solid var(--gray);}
  .setup-titel{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:24px;
    margin:0 0 10px;
  }
  /* Zusatz hinter dem Strich in einer Ueberschrift, in normaler Strichstaerke */
  .h-zusatz{font-weight:400;}
  @media (max-width:640px){
    .model-row{grid-template-columns:minmax(0,1fr);}}

  .stat-note{font-size:14px; color:var(--ink-mute); margin:8px 0 0;}
  .stat-wrap{display:inline-flex; flex-direction:column; align-items:center;}
  .stat-wrap .stat-note{text-align:center;}
  .stat-asterisk{vertical-align:super; font-size:.75em; margin-right:1px;}
  .context-block{border-left:3px solid var(--orange); padding:2px 0 2px 22px; max-width:70ch;}
  .context-kicker{
    display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--orange); font-weight:700; margin-bottom:8px;
  }
  .context-text{font-size:17px; color:var(--ink-soft); line-height:1.6; margin:0 0 10px;}
  .context-text .arrow{color:var(--orange); font-weight:800;}
  .context-text:last-child{margin-bottom:0;}
  .case-sub{font-size:15.5px; font-weight:600; color:var(--ink); margin:0; line-height:1.45;}
  .case-para{font-size:15px; color:var(--ink-mute); line-height:1.55; margin:0;}
  .case-results{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px;}
  .case-results .result{margin-top:0;}
  .role-grid-wide{grid-template-columns:repeat(3,minmax(0,1fr));}
  @media (max-width:640px){ .role-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media (min-width:481px) and (max-width:640px){ .role-col h5, .role-col p{hyphens:auto;}}
  /* Wie bei .problem-grid: unter 480px eine Spalte, sonst wird der Absatz
     unter der Illustration zur Schnipselspalte. */
  @media (max-width:480px){ .role-grid-wide{grid-template-columns:minmax(0,1fr);}}

  /* Ausgangslage: vier Problem-Kacheln mit Icon */
  .problem-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
  .problem-tile{
    background:var(--paper-surface); border:1px solid var(--gray); border-radius:12px;
    padding:18px; display:flex; flex-direction:column; gap:10px;
  }
  .problem-illu-slot{
    height:72px; background:var(--orange-fill); border-radius:10px;
    display:flex; align-items:center; justify-content:center; color:var(--orange);
  }
  .problem-tile h4{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:17.5px; margin:0; color:var(--ink);}
  .problem-tile p{margin:0; font-size:15px; color:var(--ink-mute); line-height:1.55;}
  @media (max-width:640px){
    .problem-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  /* Trennung nur im Zweispalter zwischen 480 und 640px, wo eine Spalte rund 230px
     mißt. Auf dem Telefon steht unten eine Spalte, dort braucht es sie nicht — und
     ungefragt getrennter Fließtext ist eine Gestaltungsänderung, keine Behebung. */
  @media (min-width:481px) and (max-width:640px){
    .problem-tile h4, .problem-tile p{hyphens:auto;}}
  /* Auf dem Telefon eine Spalte. Zwei Kacheln nebeneinander sind dort rund 150px
     breit — ein Fließtext bekommt darin vier, fünf Wörter je Zeile und wird in
     jeder zweiten Zeile getrennt. Zwischen 480 und 640px (Tablet hochkant, großes
     Telefon quer) bleiben zwei Spalten, dort ist der Platz da. */
  /* Icon neben den Text statt darüber: einspaltig ist das Kachelband sonst vier
     Blöcke hoch, in denen die Icon-Fläche jedes Mal 72px Höhe für sich nimmt. Die
     Bereiche kommen ohne zusätzliches Markup aus — das Icon steht über beide
     Zeilen, Überschrift und Absatz daneben. */
  @media (max-width:480px){
    .problem-grid{grid-template-columns:minmax(0,1fr);}
    .problem-tile{
      display:grid; grid-template-columns:auto minmax(0,1fr);
      grid-template-areas:"icon titel" "icon text";
      column-gap:14px; row-gap:5px; align-items:start; padding:16px;
    }
    .problem-illu-slot{grid-area:icon; width:56px; height:56px;}
    .problem-illu-slot svg{width:30px; height:30px;}
    .problem-tile h4{grid-area:titel;}
    .problem-tile p{grid-area:text;}}
  .doc-target{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17.5px;
    color:var(--ink); margin:18px 0 0;
  }
  .doc-flap{display:flex; align-items:center; justify-content:center; gap:clamp(8px, 1.6cqw, 18px);}
  .doc-flap .flap-ic-img{
    width:clamp(96px, 19cqw, 215px); height:clamp(74px, 14.6cqw, 165px);
    object-fit:contain; flex-shrink:0;
  }
  .doc-flap .flap-ic{
    color:var(--orange); width:clamp(62px, 11.7cqw, 132px); height:clamp(62px, 11.7cqw, 132px);
    stroke-width:1.05; flex-shrink:0;
  }
  /* hidden wirkt bei SVG nicht überall, deshalb hier ausdrücklich */
  .doc-flap [hidden]{display:none !important;}
  .author-photo-slot{
    width:52px; height:52px; border-radius:50%; flex-shrink:0;
    border:1.5px dashed var(--gray); display:flex; align-items:center; justify-content:center;
    text-align:center; font-size:11px; line-height:1.2; color:var(--ink-mute);
  }
  .role-illu-slot{
    height:132px; border:1.5px dashed var(--gray); border-radius:10px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-size:13px; line-height:1.4; color:var(--ink-mute); margin-bottom:4px;
  }
  /* Dokumentart und Eingangsweg sind die zwei Hälften desselben Satzes und tragen
     deshalb dieselbe Größe — dieselbe clamp() wie .channel-type oben, dort steht die
     Begründung für die Werte. Vorher lief sie bis 32px und stand damit größer da als
     die Abschnittsüberschrift darüber (h2.sec-title, feste 20px); jetzt bleibt sie mit
     rund 20px auf deren Höhe. Wer eine der beiden ändert, ändert beide. */
  .doc-flap .flap-label{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
    font-size:clamp(20.5px, 2.6cqw, 29px);
    color:var(--ink); line-height:1.15;
    /* Flex-Elemente schrumpfen von sich aus nicht unter ihren Mindestinhalt. Bei
       "Hochschulzugangsberechtigung" in 17px sind das 272px — auf einem 320px-Telefon
       schob das Wort die Seite hinaus. min-width:0 gibt es frei, hyphens:auto trennt
       es dann deutsch statt hart mitten im Wort. */
    min-width:0;
  }
  @media (max-width:640px){
    .doc-flap .flap-label{hyphens:auto;}}

  /* ---- "Vielfalt an Dokumenten. Über vielfältige Wege." auf dem Telefon ----
     Nebeneinander sind das zwei Hälften eines Satzes: links das Dokument, rechts
     der Weg. Untereinander blieben beide mittig stehen, dazwischen die 140px
     Mindesthöhe — die Dokumentart schwebte links, der Eingangsweg allein darunter,
     und zwischen beiden stand Leere. Zusammengerückt und links bündig lesen sie
     sich wieder als das, was sie sind: "Überleitungsbogen — per Upload —
     direkt in Ihre Pflegesoftware."

     Beide Zeilen stehen links bündig, ohne Einrückung: der Eingangsweg ist ein
     Schreibmaschineneffekt und darf deshalb nicht umbrechen — "über das
     Campus-Management-System" braucht die volle Spaltenbreite. Eingerückt liefe er
     rechts hinaus. Die Schriftgröße folgt der Spalte statt einem festen Wert, damit
     auch der längste Weg auf einem 320px-Telefon in seine Zeile paßt. */
  /* Untereinander schon ab 860px, nicht erst ab 640: zwischen 640 und 860 wären die
     beiden Spalten so schmal, daß der längste Eingangsweg auch bei 17px nicht mehr
     hineinpaßt (siehe .channel-type). Einspaltig hat er die ganze Breite. */
  @media (max-width:860px){
    .doc-channel-grid{grid-template-columns:minmax(0,1fr);}}
  @media (max-width:640px){
    .doc-channel-grid{
      --flap-ic:64px; --flap-abstand:12px;
      gap:4px; min-height:0;
    }
    .doc-flap{justify-content:flex-start; gap:var(--flap-abstand);}
    .doc-flap .flap-ic-img{width:var(--flap-ic); height:var(--flap-ic);}
    .doc-flap .flap-ic{width:calc(var(--flap-ic) - 16px); height:calc(var(--flap-ic) - 16px);}
    .doc-flap .flap-label{font-size:clamp(15.5px, 5.8cqw, 24px);}
    .doc-channel-right{justify-content:flex-start;}
    .channel-type{font-size:clamp(15.5px, 5.8cqw, 24px); text-align:left;}
    .doc-target{margin-top:12px;}}
  .sec-title + .linelist-row{margin-top:22px;}
  .sec-title + .btn-row{margin-top:22px;}
  .mini-tile.flap, .doc-flap.flap{animation:flapFlip .44s ease-in-out;}
  @keyframes flapFlip{
    0%{transform:perspective(320px) rotateX(0deg);}
    48%{transform:perspective(320px) rotateX(-88deg);}
    52%{transform:perspective(320px) rotateX(88deg);}
    100%{transform:perspective(320px) rotateX(0deg);}
  }
  @media (prefers-reduced-motion: reduce){
    .mini-tile.flap, .doc-flap.flap{animation:none;}}

  @media (max-width:640px){
    .case-study-row{grid-template-columns:minmax(0,1fr);}
    .role-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media (max-width:480px){ .role-grid{grid-template-columns:minmax(0,1fr);}}

  .linelist-row{display:flex; gap:28px; flex-wrap:wrap;}
  /* Vier statt drei Punkte: als Flex-Zeile bekam der vierte eine eigene Zeile fuer sich
     und wuchs dank flex:1 auf die volle Breite — drei schmale Spalten, darunter ein
     breiter Block. Als Raster stehen sie in festen Spuren: vier nebeneinander, ab 860px
     zwei mal zwei, auf dem Telefon untereinander. Nur fuer diese eine Reihe, die
     Dreier-Reihen auf den Branchenseiten bleiben Flex. */
  .linelist-row.vierer{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));}
  @media (max-width:860px){ .linelist-row.vierer{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:480px){ .linelist-row.vierer{grid-template-columns:minmax(0,1fr);} }
  .linelist-item{flex:1; min-width:150px; border-left:2px solid var(--orange); padding-left:14px; overflow-wrap:break-word;}
  .linelist-item h4{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:18.5px; margin:0 0 8px;}
  .linelist-item p{margin:0; font-size:15px; color:var(--ink-mute); line-height:1.55;}
  .linelist-item.stat h4{font-size:36px;}
  /* "Warum Stapelweise?": vier gleichrangige Punkte ohne Titel/Satz-Trennung — ein
     Fließtext je Punkt, eine Schrift, schwarz statt gedämpft. Kein Kasten, kein
     Rahmen — das erste Wort jedes Punkts trägt den Akzent stattdessen in Orange.
     Größe und Gewicht wie .badge-bar .lead ("Wir glauben an 100% digitale
     Souveränität…") weiter unten auf der Seite, aber System-Sans statt Bricolage
     Grotesque — Fließtext bleibt bei der Systemschrift. Nur für .vierer, die
     Dreier-Listen anderswo (Titel groß, Satz gedämpft, Strich links) bleiben
     unangetastet. */
  .linelist-row.vierer .linelist-item{border-left:0; padding-left:0;}
  .linelist-row.vierer .linelist-item p{font-size:17.5px; font-weight:700; line-height:1.4; color:var(--ink); text-wrap:balance;}
  .linelist-row.vierer .linelist-item p .hl{color:var(--orange);}
  /* „Dafür verbinden wir … mit …“ auf ueber-uns.html ist ein Satz über zwei
     Wertegruppen. Das Wörtchen steht zwischen den beiden .linelist-row und macht
     sichtbar, dass es zwei Hälften sind und keine Liste aus fünf Punkten. */
  .verbund-fuge{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:18.5px;
    color:var(--ink-mute); margin:20px 0; padding-left:16px;
  }

  /* Ansprechpartner: rundes Bild, Name, Rolle. Dieselbe Bildform wie beim Zitat
     (.author-photo), nur größer — ein Gesicht ist ein Gesicht, egal an welcher
     Stelle der Website. */
  .team-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:22px;}
  .team-member{display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
  .team-photo{
    width:96px; height:96px; border-radius:50%; object-fit:cover;
    border:2px solid var(--orange); filter:grayscale(.15); margin-bottom:10px;
  }
  .team-name{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:18.5px;}
  .team-role{font-size:15px; color:var(--ink-mute); line-height:1.5;}
  /* Auf dem Telefon Bild links, Name und Rolle rechts daneben — über
     grid-template-areas wie bei .problem-tile, damit das Bild über beide Zeilen
     steht und keine Randabstände nachgerechnet werden müssen. */
  @media (max-width:640px){
    .team-row{grid-template-columns:minmax(0,1fr); gap:18px;}
    .team-member{
      display:grid; grid-template-columns:auto minmax(0,1fr);
      grid-template-areas:"foto name" "foto rolle";
      column-gap:14px; row-gap:2px; align-items:center;
    }
    .team-photo{grid-area:foto; width:64px; height:64px; margin-bottom:0;}
    .team-name{grid-area:name; align-self:end;}
    .team-role{grid-area:rolle; align-self:start;}
  }

  .role-list{display:flex; flex-direction:column; gap:18px;}
  .role-list .substep h5{font-size:17.5px;}
  .role-list .substep p{font-size:15.5px; margin-top:4px;}

  .security-block{
    background:var(--sky-fill); border-radius:10px; padding:20px;
    display:flex; gap:16px; align-items:flex-start;
  }
  .security-block .ic{color:var(--ink); flex-shrink:0; margin-top:2px;}
  .security-block h3{font-family:"Bricolage Grotesque",sans-serif; margin:0 0 6px; font-size:18.5px; font-weight:700;}
  .security-block p{margin:0 0 8px; font-size:16px; color:var(--ink-soft); line-height:1.55;}
  .link-ghost{font-size:15px; font-weight:700; color:var(--orange); text-decoration:none;}

  .case-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;}
  .case-card{
    border:1px solid var(--gray); background:var(--paper-surface); border-radius:10px; padding:16px;
    display:flex; flex-direction:column; gap:10px;
  }
  .case-logo{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:16px; color:var(--ink); letter-spacing:-.01em;}
  .case-logo.placeholder{font-family:inherit; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); border:1px dashed var(--gray); border-radius:5px; padding:3px 7px; display:inline-block; width:fit-content;}
  .case-card .kicker{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute);}
  .case-card h4{font-family:"Bricolage Grotesque",sans-serif; margin:0; font-size:17.5px; font-weight:700; line-height:1.35;}
  .case-card .result{
    margin-top:auto; font-size:15px; font-weight:700; color:var(--ink);
    background:var(--sky-fill); padding:6px 10px; border-radius:7px; align-self:flex-start;
  }
  .case-link{font-size:14.5px; font-weight:700; color:var(--orange); text-decoration:none;}
  .case-link:hover{text-decoration:underline;}
  /* Der CTA unter dem Bartels-Zitat: derselbe Textlink wie "Ganze Fallstudie lesen →",
     nur größer, damit er unter dem großen Zitat nicht untergeht. Kein Knopf — nur an
     dieser einen Stelle, deshalb Modifikator statt Änderung an .case-link selbst. */
  .case-link.gross{font-size:19px; margin-top:4px; display:inline-block;}

  /* ---- Vergleichstabelle ----
     Karten-Rahmen um die ganze Tabelle statt nur Zeilenlinien, Kopf farblich
     abgesetzt, die Stapelweise-Spalte als "Gewinner" hervorgehoben — dieselbe
     Sprache wie die hervorgehobene Karte auf der Preisseite (.price-card.highlight:
     Rand in --orange), nur spaltenweise per nth-child statt pro Karte. */
  .cmp-wrap{
    overflow-x:auto; border:1px solid var(--gray); border-radius:14px;
    background:var(--paper-surface);
  }
  table.cmp{width:100%; min-width:640px; border-collapse:collapse; font-size:15px; table-layout:fixed;}
  /* Spaltenbreiten fest statt nach Inhalt: die Merkmalsspalte links trägt nur
     Stichworte und braucht keine Breite, die drei Vergleichsspalten tragen Sätze
     und sollen gleich breit nebeneinander stehen — sonst zieht der längste Satz
     seine Spalte auf und die Tabelle liest sich schief. Mit table-layout:fixed
     genügt eine Angabe: die erste Spalte bekommt 20 %, die restlichen 80 % teilen
     sich die drei anderen von selbst zu gleichen Teilen. Gilt für beide Tabellen
     mit .cmp — die auf der Startseite und die Hosting-Tabelle auf lokale-ki.html,
     beide vier Spalten mit Merkmal links. */
  table.cmp th:first-child, table.cmp td:first-child{width:20%;}
  table.cmp th, table.cmp td{padding:14px 16px; text-align:left; vertical-align:top;}
  table.cmp thead th{
    background:var(--paper); color:var(--ink-mute); font-weight:700; font-size:13px;
    text-transform:uppercase; letter-spacing:.05em; border-bottom:1.5px solid var(--gray);
  }
  /* Kein white-space:nowrap mehr: das hielt die Merkmale einzeilig und zwang die
     erste Spalte auf die Breite von "Kontrolle und Nachvollziehbarkeit". Umbrechen
     dürfen sie jetzt, und lange Komposita trennt der Browser deutsch (<html lang="de">),
     damit auch bei 640px kein Wort aus seiner Zelle läuft. */
  table.cmp tbody th{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:15.5px;
    color:var(--ink); hyphens:auto; overflow-wrap:break-word;
  }
  table.cmp tbody td{color:var(--ink-soft); line-height:1.5;}
  table.cmp tbody tr{border-bottom:1px solid var(--gray); transition:background .15s ease;}
  table.cmp tbody tr:last-child{border-bottom:none;}
  table.cmp tbody tr:hover{background:var(--paper);}
  /* .cmp-featured markiert Tabellen mit einer einzelnen, durchgängigen
     "Gewinner"-Spalte (Startseite: immer Stapelweise) — anders als die
     Hosting-Vergleichstabelle auf lokale-ki.html, die dieselbe .cmp-Basis nutzt,
     aber je Zeile unterschiedliche Spalten als .win markiert und daher keine
     fest eingefärbte 2. Spalte verträgt. Zellenhintergrund gewinnt sichtbar
     gegen den Zeilenhover, weil <td> seine eigene Fläche über der des <tr>
     zeichnet — die Orange-Spalte bleibt also auch beim Hover einer Zeile klar
     als eigene Spalte erkennbar. */
  table.cmp-featured th:nth-child(2), table.cmp-featured td:nth-child(2){background:var(--orange-fill);}
  table.cmp-featured thead th:nth-child(2){color:var(--orange); font-weight:800;}
  table.cmp td.win{color:var(--orange); font-weight:700;}
  table.cmp td.win::before{content:"\2713"; margin-right:6px; font-weight:800;}

  .step-row{display:flex; gap:14px; counter-reset:step;}
  .step{flex:1; background:var(--paper-surface); border:1px solid var(--gray); border-radius:10px; padding:16px; position:relative;}
  .step::before{
    counter-increment:step; content:counter(step);
    font-family:"Bricolage Grotesque",sans-serif; font-size:14.5px; font-weight:800;
    color:var(--paper-surface); background:var(--orange);
    width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; margin-bottom:10px;
  }
  .step p{margin:0; font-size:15.5px; line-height:1.5;}

  /* narrative triptych, adapted from styleguide scribble panels */
  .narrative-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
  .narrative-card{
    background:var(--paper-surface); border:1px solid var(--gray); border-radius:12px;
    padding:20px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  }
  .narrative-card .ic-wrap{
    width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--sky-fill); color:var(--ink);
  }
  /* .akzent färbt den Icon-Kreis im Markenorange statt im neutralen Sky. Die
     Kontaktseite nimmt das für alle drei Karten — dort sind die drei Wege
     gleichrangig, ein hervorgehobener mittlerer Schritt wäre dort sinnlos.
     (Ersetzt die früheren .step2/.step3, die niemand mehr benutzt hat.) */
  .narrative-card.akzent .ic-wrap{background:var(--orange-fill); color:var(--orange);}
  .narrative-card h4{font-family:"Bricolage Grotesque",sans-serif; margin:0; font-size:17.5px; font-weight:700;}
  .narrative-card p{margin:0; font-size:15px; color:var(--ink-mute); line-height:1.5;}

  /* Ablauf als Flussdiagramm: vier nummerierte Karten mit Pfeil dazwischen.
     Der Pfeil ist reines CSS, kein Bild — damit geht er den Dunkelmodus mit und
     haengt nicht am Icon-Sprite (der unter file:// nicht laedt). */
  .ablauf-flow{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:26px;
  }
  .ablauf-schritt{
    position:relative; background:var(--paper-surface);
    border:1px solid var(--gray); border-radius:12px; padding:18px 16px 16px;
    display:flex; flex-direction:column; gap:8px;
  }
  .ablauf-schritt.ablauf-ziel{border-width:1.5px; border-color:var(--orange); background:var(--orange-fill);}
  .ablauf-nr{
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:99px;
    background:var(--orange); color:#FBF9F3;
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:17px; line-height:normal;
  }
  .ablauf-titel{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
    font-size:17.5px; line-height:1.3; margin:0;
  }
  .ablauf-text{margin:0; font-size:15px; color:var(--ink-soft); line-height:1.55;}
  /* Verbindungspfeil in die Luecke zwischen zwei Karten. left/top der Pfeilspitze
     mit Sicherheitsabstand zur Kartenkante gewaehlt: die Spitze ist ein um 45°
     gedrehtes Quadrat, dessen sichtbare Ecke durch die Drehung ueber die eigene
     Box hinausragt — bei den vorherigen Werten (-9px, 7px breit) landete diese
     Ecke praktisch auf der Kartenkante (0px) und ragte je nach Rundung/Antialiasing
     sichtbar hinein. */
  .ablauf-schritt + .ablauf-schritt::before{
    content:""; position:absolute; top:32px; left:-24px;
    width:14px; height:2px; background:var(--gray);
  }
  .ablauf-schritt + .ablauf-schritt::after{
    content:""; position:absolute; top:28px; left:-13px;
    width:7px; height:7px; border-top:2px solid var(--gray); border-right:2px solid var(--gray);
    transform:rotate(45deg);
  }
  @media (max-width:860px){
    .ablauf-flow{grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px 26px;}
    /* In zwei Spalten stimmt der waagerechte Pfeil nur noch beim zweiten und
       vierten Kaestchen; bei den Zeilenanfaengen faellt er weg. */
    .ablauf-schritt:nth-child(odd) + .ablauf-schritt::before,
    .ablauf-schritt:nth-child(odd) + .ablauf-schritt::after{display:none;}
  }
  @media (max-width:620px){
    .ablauf-flow{grid-template-columns:minmax(0,1fr); gap:28px;}
    .ablauf-schritt + .ablauf-schritt::before{
      top:-25px; left:28px; width:2px; height:14px;
    }
    .ablauf-schritt + .ablauf-schritt::after{
      top:-16px; left:25px; transform:rotate(135deg);
    }
    .ablauf-schritt:nth-child(odd) + .ablauf-schritt::before,
    .ablauf-schritt:nth-child(odd) + .ablauf-schritt::after{display:block;}
  }

  /* Handlungsaufruf mittig: Frage in Orange, Nachsatz gedaempft, darunter der Knopf.
     Loest die fruehere Sprechblase (.bubble) ab. */
  .cta-frage{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;}
  .cta-frage-h{
    margin:0; max-width:560px; color:var(--orange);
    font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
    font-size:26.5px; line-height:1.3;
  }
  .cta-frage-sub{margin:0; font-size:16px; color:var(--ink-mute); line-height:1.5;}
  .cta-frage .btn{margin-top:6px;}
  @media (max-width:640px){
    .cta-frage-h{font-size:23px;}
  }

  .testimonial-block{
    border-left:3px solid var(--orange); padding:2px 0 2px 22px;
  }
  .quote-mark{
    display:block; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:53px;
    color:var(--orange); line-height:1; opacity:.7; margin-bottom:-4px;
  }
  .testimonial-quote{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:23px; line-height:1.5;
    color:var(--ink); margin:0 0 14px; max-width:62ch;
  }
  .testimonial-author{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
  .testimonial-author .author-photo{
    width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0;
    border:2px solid var(--orange); filter:grayscale(.15);
  }
  /* Gezeichneter Platzhalter statt Foto: die Strichzeichnung soll ganz zu sehen
     sein (contain statt cover) und nicht entfaerbt werden. */
  .testimonial-author .author-photo-illu{
    object-fit:contain; filter:none; background:var(--paper-surface); padding:2px;
  }
  /* filter:none oben gilt fürs Hellmodus-"nicht entfärben"; im Dunkelmodus geht es
     nicht um Entfärbung, sondern um Lesbarkeit — dieselbe fest-orange Zeichnung
     wie bei img.ic weiter oben, daher dieselbe Umkehrung auf Weiß. */
  @media (prefers-color-scheme: dark){
    .testimonial-author .author-photo-illu{filter:brightness(0) invert(1);}
  }
  .testimonial-author-text{display:flex; flex-direction:column; gap:2px;}
  .testimonial-author .author-name{font-weight:700; font-size:16px;}
  .testimonial-author .author-role{font-size:15px; color:var(--ink-mute);}

  /* Fußleiste. Trägt seit dem Umbau das frühere Aufklappmenü: drei Listen-Spalten
     (Branchen vollständig, Dokumentarten/Anwendungsfälle gekürzt mit „Weitere →"
     zur Lösungsübersicht) plus eine Spalte mit den allgemeinen Verweisen.
     Tote Einträge bleiben <span> und bekommen absichtlich keine Hover-Farbe. */
  .footer-mock{padding:26px 24px 22px; font-size:15px; color:var(--ink-mute); border-top:1px solid var(--gray);}
  .footer-cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;}
  .footer-col{display:flex; flex-direction:column; gap:6px;}
  .footer-col-title{
    font-size:12px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--orange); font-weight:700; margin-bottom:3px;
  }
  .footer-link{font-size:14.5px; color:var(--ink-mute); line-height:1.4;}
  a.footer-link:hover{color:var(--orange);}
  .footer-link.more{color:var(--orange); font-weight:700; margin-top:2px;}

  .footer-legal{display:flex; gap:22px; margin-top:20px; padding-top:14px; border-top:1px solid var(--gray);}
  /* Impressum und Datenschutz sind seit impressum.html/datenschutz.html echte Links.
     Farbe und Unterstreichung nimmt ihnen schon der Reset für .footer-mock a weiter
     oben, sie sehen also aus wie die <span>, die vorher hier standen. */
  .footer-legal a:hover{color:var(--orange);}
  @media (max-width:640px){
    .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));}}

  /* Lösungsübersicht (loesungen.html): Filterfeld und Kachel-Varianten */
  .lsg-filter{position:relative; max-width:420px; margin-top:20px;}
  .lsg-filter .ic{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-mute); pointer-events:none;}
  .lsg-filter input{
    width:100%; font-family:inherit; font-size:16px; color:var(--ink);
    background:var(--paper-surface); border:1.5px solid var(--ink); border-radius:7px;
    padding:10px 14px 10px 36px;
  }
  .lsg-filter input:focus{outline:none; border-color:var(--orange);}
  .lsg-filter input::placeholder{color:var(--ink-mute);}
  .filter-empty{font-size:15px; color:var(--ink-mute); margin:8px 0 0;}
  /* Mini-Kacheln gibt es verlinkt (führen zur Branche, in der die Dokumentart zu
     Hause ist) und unverlinkt (.plain, branchenübergreifend): Verlinktes behält
     den Orange-Hover, .plain bleibt bewusst stumm und gedämpft. */
  a.mini-tile{color:inherit; text-decoration:none;}
  .mini-tile.plain{cursor:default;}
  .mini-tile.plain:hover{background:var(--paper-surface); border-color:var(--gray); border-style:dashed;}
  .mini-tile.plain .ic{color:var(--ink-mute);}
  .mini-tile.plain .t{color:var(--ink-mute);}
  /* Der Filter versteckt per hidden-Attribut; display:flex der Kacheln würde das
     UA-Stylesheet sonst überstimmen. */
  .branch-tile[hidden], .mini-tile[hidden]{display:none;}

  /* Dokumentgalerie: alle Beispieldokumente als Bild + Name */
  .doc-gallery{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;}
  .doc-gallery-item{
    background:var(--paper-surface); border:1px solid var(--gray); border-radius:10px;
    padding:12px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  }
  .doc-gallery-item img{width:100%; height:90px; object-fit:contain;}
  .doc-gallery-item .t{font-size:14px; font-weight:600; line-height:1.3;}
  .doc-gallery-item[hidden]{display:none;}

  .doc-search-lead{font-size:17.5px; font-weight:600; color:var(--ink); margin:0 0 10px;}
  .doc-search{
    width:100%; max-width:360px; font-family:inherit; font-size:16px;
    padding:9px 14px; border:1.5px solid var(--gray); border-radius:7px;
    background:var(--paper-surface); color:var(--ink); margin-bottom:18px;
  }
  .doc-search::placeholder{color:var(--ink-mute);}
  .doc-search:focus{border-color:var(--orange); outline:none;}
  .doc-search-empty{font-size:15.5px; color:var(--ink-mute); margin:0 0 18px;}
  .doc-search-empty[hidden]{display:none;}

  @media (max-width:640px){
    .tile-row, .branch-grid, .narrative-row, .doc-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
    .case-row{grid-template-columns:minmax(0,1fr);}
    .showroom{grid-template-columns:minmax(0,1fr);}
    .step-row{flex-direction:column;}
    .nav-burger{display:flex;}
    /* Logo, Showroom/Kontakt und Burger sollen in dieser Reihenfolge in einer Zeile
       stehen, statt umzubrechen. Der Burger steht im HTML zwischen Wortmarke und
       CTAs (Baustein-Reihenfolge, am Desktop ohnehin unsichtbar) — order sortiert
       ihn hier nur fürs Auge ans Ende. .nav-links bekommt die höchste Ordnungszahl,
       damit das Dropdown weiterhin als eigene Zeile darunter aufklappt statt die
       Reihe zu sprengen. Schmalere Polsterung/Abstände plus verkleinerte Wortmarke
       und CTA-Knöpfe schaffen dafür den nötigen Platz. */
    .nav-mock{padding:14px 16px; gap:8px;}
    .nav-logo{order:1; font-size:clamp(13px,4vw,17px); flex-shrink:0;}
    .nav-ctas{order:2; gap:6px; flex-shrink:0;}
    .nav-ctas .btn{padding:6px clamp(6px,2vw,10px); font-size:clamp(11px,3vw,13.5px);}
    .nav-burger{order:3; width:28px; height:28px; flex-shrink:0;}
    .nav-burger svg{width:18px; height:18px;}
    /* flex-basis:100% erzwingt eine eigene Zeile unterhalb der Kopfreihe; die
       negativen Außenränder ziehen sie bis an den Rand der Kopfzeile, deren eigene
       Polsterung (14px 16px, siehe .nav-mock oben) sie damit aufhebt statt
       verdoppelt — bei einer Änderung an der Polsterung hier mitziehen. */
    .nav-links{
      order:4; display:none; flex-basis:100%;
      flex-direction:column; gap:0;
      margin:12px -16px -14px; padding:4px 16px 12px; border-top:1px solid var(--gray);
    }
    .nav-mock.nav-open .nav-links{display:flex;}
    .nav-links .nav-item{padding:11px 0; border-bottom:1px solid var(--gray);}
    .nav-links .nav-item:last-child{border-bottom:none;}}

  /* Der 640er-Block darüber stellt .narrative-row auf zwei Spalten. Das trägt für die
     Kontaktseite nicht: ihre Karten enthalten einen .btn, und der ist white-space:nowrap.
     "Freien Termin wählen" und die E-Mail-Adresse sind damit rund 165px breit und heben
     die automatische Mindestbreite der 1fr-Spalte über die verfügbaren 327px — die Reihe
     liefe auf dem Telefon rechts aus dem Bild. Unter 560px deshalb einspaltig. Muss nach
     dem 640er-Block stehen, sonst gewinnt bei gleicher Spezifität die spätere Regel. */
  @media (max-width:560px){
    .narrative-row{grid-template-columns:minmax(0,1fr);}}

  /* ================= NEW: hero typewriter / carousel ================= */
  .hero h1 .hline{display:block;}
  .type{display:inline-block; white-space:nowrap;}
  .caret{
    display:inline-block; width:3px; height:.9em; background:var(--orange);
    margin-left:2px; opacity:0;
  }
  .type.typing .caret{opacity:1; animation:caretBlink .7s step-end infinite;}
  @keyframes caretBlink{50%{opacity:0;}}
  .lede-line{font-size:18.5px; color:var(--ink-soft); margin:0 0 6px; line-height:1.55;}
  .lede-line .type, .lede-line .carousel{font-weight:700; color:var(--ink);}
  .type-ic{color:var(--orange); vertical-align:-2px; margin-right:4px;}
  .carousel{
    display:inline-block; position:relative; overflow:hidden; vertical-align:bottom;
    white-space:nowrap; transition:width .45s cubic-bezier(.65,0,.35,1);
  }
  .car-cur{display:inline-block; transition:transform .45s cubic-bezier(.65,0,.35,1); will-change:transform;}
  .car-next{position:absolute; left:0; top:0; transform:translateX(120%); transition:transform .45s cubic-bezier(.65,0,.35,1); will-change:transform;}
  @media (prefers-reduced-motion: reduce){
    .carousel, .car-cur, .car-next{transition:none;}
    .type.typing .caret{animation:none;}
    .scan-view, .viewer-fields{animation:none;}
    .pill-rail{scroll-behavior:auto;}}

  /* ================= NEW: trust badge bar ================= */
  .badge-bar{
    display:flex; align-items:center; gap:22px; flex-wrap:wrap;
    background:var(--paper-surface); border:1px solid var(--gray); border-radius:12px;
    padding:18px 22px;
  }
  .badge-bar .lead{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17.5px; flex:1; min-width:220px;}
  .badge-bar .lead-hl{color:var(--orange);}
  .badge-row{display:flex; gap:10px; flex-wrap:wrap;}
  .cert-badge{
    display:flex; align-items:center; gap:7px;
    border:1.5px solid var(--ink); border-radius:99px; padding:7px 13px 7px 10px;
    font-size:14.5px; font-weight:700; white-space:nowrap;
  }
  .cert-badge .ic{color:var(--orange); flex-shrink:0;}

  /* Banken: Zeile darüber, Badges gleichmäßig in einer Reihe darunter */
  .badge-bar.badge-bar-stack{flex-direction:column; align-items:stretch;}
  .badge-row.badge-row-equal{flex-wrap:nowrap;}
  .badge-row.badge-row-equal .cert-badge{
    flex:1 1 0; min-width:0; white-space:normal; justify-content:center; text-align:center;
  }
  @media (max-width:640px){
    .badge-row.badge-row-equal{flex-wrap:wrap;}
    .badge-row.badge-row-equal .cert-badge{flex:1 1 auto;}}
  .cert-badge.standout{
    border:none; padding:0; background:none;
    color:var(--orange); font-family:"Bricolage Grotesque",sans-serif; font-size:17.5px; font-weight:800;
  }
  .cert-badge .placeholder-tag{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-mute); font-weight:600; margin-left:4px;}

  /* Betriebsmodell-Hinweis unter den Vorteilen: kein Strich, Pfeil vor dem Titel */
  .model-note h4{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:18.5px;
    margin:0 0 8px; display:flex; align-items:center; gap:8px;
  }
  .model-note h4 .arrow{color:var(--orange);}
  .model-note p{margin:0; font-size:15px; color:var(--ink-mute); line-height:1.55;}

  /* ================= NEW: Beispiele (docupipe-style, links/rechts + Callout-Mitte) ================= */
  .examples-head{margin-bottom:22px;}
  .eyebrow{font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--orange); margin-bottom:10px;}
  .examples-h2{font-family:"Bricolage Grotesque",sans-serif; font-size:27.5px; font-weight:800; line-height:1.25; margin:0 0 12px; text-wrap:balance;}
  .examples-h2 .hl{color:var(--orange);}
  .examples-head p.desc{font-size:17px; color:var(--ink-soft); line-height:1.6; margin:0 0 8px;}
  .sign-off{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:18px; margin:0 0 4px;}

  .examples-wrap{position:relative;}
  /* minmax(0,…) statt der nackten fr: die nachgebaute Dokumentseite in .scan-col hat
     einen Mindestinhalt von gut 400px, und eine fr-Spur schrumpft nicht darunter.
     Ab 960px fällt das nicht auf, dazwischen (Tablet hochkant, schmales Fenster)
     schob die mittlere Spur die beiden anderen aus dem Fenster. */
  .examples-3col{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr) minmax(0,1fr); gap:0 22px; align-items:start;}
  .pill-col{display:flex; flex-direction:column; gap:8px;}
  /* Der Wagen um die Pillen ist am Schreibtisch nicht da: display:contents nimmt ihn
     aus dem Layout, die .pill-row bleiben direkte Flex-Kinder von .pill-col wie zuvor.
     Auf dem Telefon (unten) wird er zur waagerecht rollenden Leiste. Derselbe Kniff
     wie bei <picture> und .funktion-text. */
  .pill-rail{display:contents;}
  .pill-hint{display:none;}
  @keyframes docSwap{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
  .pill-row{display:flex; align-items:center; gap:9px; position:relative; z-index:2;}
  .doc-pill{
    flex:1; text-align:left; font-family:inherit; font-size:15px; font-weight:600;
    background:var(--paper-surface); color:var(--ink-soft); border:1.5px solid var(--gray);
    border-radius:8px; padding:9px 11px; cursor:pointer; transition:border-color .15s, color .15s;
  }
  .doc-pill.active{border-color:var(--orange); color:var(--ink); background:var(--orange-fill);}
  .pill-dot{width:7px; height:7px; border-radius:50%; background:var(--gray); flex-shrink:0; transition:background .15s, transform .15s;}
  .pill-row:has(.doc-pill.active) .pill-dot{background:var(--orange); transform:scale(1.7); box-shadow:0 0 0 4px var(--orange-fill);}

  .connector-line{
    position:absolute; height:2px; background:var(--orange); opacity:.6;
    top:0; left:0; width:0; display:none; pointer-events:none; z-index:1;
    transition:top .25s ease, left .25s ease, width .25s ease;
  }
  @media (min-width:641px){
    .connector-line{display:block;}}

  .viewer-card{
    background:var(--paper-surface); border:1px solid var(--gray); border-radius:12px; overflow:hidden;
  }
  .viewer-tabbar{padding:10px 14px; border-bottom:1px solid var(--gray); background:var(--gray); display:flex; align-items:center; gap:8px;}
  .viewer-tabbar .file-label{font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); font-weight:600;}
  .file-chip{font-size:14px; font-family:ui-monospace,monospace; background:var(--paper-surface); border:1px solid var(--gray); border-radius:6px; padding:4px 9px;}
  /* ---- Eingescanntes Dokument mit Fundstellen ----
     Der Scan ist ein gewoehnliches <img>, die Marken liegen als absolut gesetzte
     Kaesten darueber. Ihre Koordinaten stehen in app.js in Prozent der Bildmasse —
     deshalb braucht der Umschlag position:relative und sonst nichts: das Bild
     skaliert mit der Spalte, die Marken skalieren mit. */
  .scan-view{line-height:0; background:var(--paper-surface);}
  /* Bezugsrahmen der Marken ist das Blatt, nicht .scan-view: auf dem Telefon ist
     .scan-view gedeckelt und rollt in sich, seine Hoehe ist dann nicht mehr die des
     Bildes — Prozentwerte haetten sich auf den Ausschnitt bezogen und die Marken
     waeren ueber die Seite verrutscht. */
  .scan-blatt{position:relative;}
  .scan-img{display:block; width:100%; height:auto;}
  .scan-mark{
    position:absolute; border:1.5px solid var(--orange); border-radius:3px;
    background:var(--orange-fill); pointer-events:none;
    transition:background .15s ease, box-shadow .15s ease;
  }
  /* Die zugehoerige JSON-Zeile ueberfahren: die Fundstelle tritt hervor. */
  .scan-mark.hit{background:var(--orange); opacity:.34; box-shadow:0 0 0 3px var(--orange-fill);}

  /* ---- Extrahierte Daten: eine Zeile je Feld ----
     Schluessel klein und zurueckgenommen, Wert nichtproportional und rechtsbuendig —
     so liest sich die Spalte als Datensatz und nicht als Fliesstext. Jede Zeile
     traegt ihren data-fkey und hebt beim Ueberfahren ihre Fundstelle im Scan hervor
     (und umgekehrt, siehe app.js). */
  .viewer-fields{padding:14px 16px; display:flex; flex-direction:column; gap:11px; min-height:170px;}
  .viewer-fields .kv{
    display:flex; justify-content:space-between; gap:12px; font-size:15px;
    border-bottom:1px dashed var(--gray); padding-bottom:8px; transition:background .15s ease;
  }
  .viewer-fields .kv:last-child{border-bottom:none;}
  /* Kein min-width:0 auf der Beschriftung: sonst schrumpft sie unter ihren
     Mindestinhalt und bricht mitten im Wort („DIAG / NOSE"). Den Platz gibt der
     Wert her — der darf umbrechen, notfalls auch innerhalb einer Belegnummer. */
  .viewer-fields .kv .k{
    color:var(--ink-mute); text-transform:uppercase; font-size:12.5px;
    letter-spacing:.04em; font-weight:600; flex:0 1 auto;
  }
  .viewer-fields .kv .v{
    font-weight:700; font-family:ui-monospace,monospace; font-size:14.5px;
    text-align:right; min-width:0; overflow-wrap:anywhere;
  }
  .viewer-fields .kv:hover, .viewer-fields .kv.hit{
    background:var(--orange-fill); border-radius:6px;
    padding-left:6px; padding-right:6px; margin:0 -6px;
  }

  /* Hier stand der ganze .pdf-*-Block: eine in HTML nachgebaute Dokumentseite, aus
     `docData` gerendert, mit den Werten als <mark class="pdf-hit"> darin. Entfallen,
     seit die Mitte den echten Scan zeigt — siehe .scan-view oben. Die Attrappe hatte
     drei Layouts (Brief, Tabelle, Formular) und rund 120 Zeilen JavaScript; wer sie
     zurueckholen will, findet sie in der Historie. */

  /* ================= NEW: Wie es funktioniert (vertikaler Stepper) ================= */
  .stepper-wrap{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:36px; align-items:stretch;}
  .stepper-left{display:flex; flex-direction:column;}
  .step-block{padding:10px 4px; border-top:1px solid var(--gray); cursor:pointer; opacity:.45; transition:opacity .25s ease;}
  .step-block:first-child{border-top:none;}
  .step-block.active{opacity:1;}
  .step-head{display:flex; align-items:center; gap:12px;}
  .step-ic{
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--gray); color:var(--ink-mute);
    transition:border-color .25s, color .25s;
  }
  .step-block.active .step-ic{border-color:var(--orange); color:var(--orange);}
  .step-head h4{font-family:"Bricolage Grotesque",sans-serif; margin:0; font-size:18.5px; font-weight:700;}
  .step-body{
    max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease, opacity .25s ease;
  }
  .step-block.active .step-body{max-height:1400px; opacity:1;}
  .step-desc{margin:4px 0 0 48px; font-size:15.5px; color:var(--ink-mute); line-height:1.5;}
  .step-desc + .step-desc{margin-top:8px;}
  .step-list{margin:8px 0 0 48px; padding-left:18px; display:flex; flex-direction:column; gap:3px;}
  .step-list li{font-size:15px; color:var(--ink-mute); line-height:1.5;}
  .substep-list{margin:6px 0 0 48px; display:flex; flex-direction:column; gap:10px;}
  .substep h5{margin:0; font-size:16px; font-weight:700; color:var(--ink);}
  .substep p{margin:2px 0 0; font-size:15px; color:var(--ink-mute); line-height:1.5;}

  .stepper-right{position:relative;}
  .stepper-sticky{
    position:sticky; top:96px; height:calc(100% - 96px); background:var(--paper-surface); border:1px solid var(--gray);
    border-radius:14px; padding:32px; display:flex; align-items:center; justify-content:center;
    min-height:280px;
  }

  @media (max-width:640px){
    .stepper-wrap{grid-template-columns:minmax(0,1fr);}
    .stepper-sticky{position:relative; top:0; height:auto; margin-bottom:20px;}}

  /* ================= NEW: Wie es funktioniert (Icon-Hover-Ablauf) ================= */
  .funktion-section{padding-top:64px; padding-bottom:58px; border-top:1px solid var(--gray);}
  .funktion-head{display:flex; align-items:flex-start; gap:36px; margin-bottom:46px;}
  .funktion-head-text{flex:0 0 auto; max-width:270px;}
  .funktion-head-text .sec-title, .funktion-head-text .sec-sub{margin-bottom:0;}
  .funktion-head-text .sec-sub{margin-top:6px;}
  .funktion-detail{flex:1; min-width:0; border-left:1.5px solid var(--gray); padding-left:30px; min-height:92px;}
  .funktion-detail-title{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:24px; margin:0 0 8px; color:var(--orange);
    animation:funktionFade .35s ease;
  }
  .funktion-detail-text{
    font-size:16px; color:var(--ink-mute); line-height:1.55; margin:0;
    animation:funktionFade .35s ease;
  }
  @keyframes funktionFade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

  .funktion-row{position:relative; display:flex; justify-content:space-between; align-items:flex-start; --funktion-progress:0;}
  .funktion-row::before{
    content:""; position:absolute; left:39px; right:39px; top:39px; height:1px; background:var(--gray); z-index:0;
  }
  .funktion-row::after{
    content:""; position:absolute; left:39px; top:39px; height:1px; background:var(--orange); z-index:0;
    width:calc((100% - 78px) * var(--funktion-progress)); transition:width .3s ease;
  }
  .funktion-step{display:flex; flex-direction:column; align-items:center; gap:13px; cursor:default;}
  .funktion-text{display:contents;}
  /* Der Beschreibungssatz steht im Schritt selbst — am Schreibtisch zeigt ihn der
     .funktion-detail-Kasten oben beim Überfahren, hier wäre er doppelt. Auf dem
     Telefon (unten) kippt das: dort gibt es kein Überfahren, und jeder Schritt
     trägt seinen Satz gleich neben dem Icon. */
  .funktion-desc{display:none;}
  .funktion-ic{
    position:relative; z-index:1; width:78px; height:78px; object-fit:contain; border-radius:8px;
    background:var(--paper-surface); transition:transform .25s ease;
  }
  .funktion-step:hover .funktion-ic{transform:scale(1.6);}
  .funktion-label{
    font-size:17.5px; color:var(--ink-mute); text-align:center; white-space:nowrap;
    transition:color .2s ease, font-weight .2s ease, transform .25s ease;
  }
  .funktion-step:hover .funktion-label{transform:translateY(10px);}
  .funktion-step.active .funktion-label{color:var(--orange); font-weight:700;}

  /* Auf dem Telefon aus der Icon-Reihe eine Liste machen: Icons untereinander,
     Beschriftung und Satz rechts daneben. Die Reihe nebeneinander funktioniert
     dort nicht — fünf 78px-Icons passen nicht in 375px, sie brachen bisher in
     zwei Zeilen um, und der .funktion-detail-Kasten blieb stumm, weil es kein
     Überfahren gibt. Deshalb entfällt er hier ganz, und jeder Schritt trägt
     seinen eigenen Satz. Auch die Verbindungslinie entfällt: sie ist waagerecht
     gedacht und liefe quer durch die Liste. */
  @media (max-width:640px){
    .funktion-head{flex-direction:column; gap:16px;}
    .funktion-detail{display:none;}
    .funktion-row{flex-direction:column; align-items:stretch; gap:20px;}
    .funktion-row::before, .funktion-row::after{display:none;}
    .funktion-step{flex-direction:row; align-items:center; gap:16px; text-align:left;}
    .funktion-ic{flex:0 0 auto; width:60px; height:60px;}
    .funktion-step:hover .funktion-ic{transform:none;}
    .funktion-text{display:flex; flex-direction:column; gap:3px; min-width:0;}
    .funktion-label{white-space:normal; text-align:left; font-size:17px; font-weight:700; color:var(--ink);}
    .funktion-step:hover .funktion-label{transform:none;}
    .funktion-step.active .funktion-label{color:var(--orange);}
    .funktion-desc{display:block; margin:0; font-size:15px; line-height:1.5; color:var(--ink-soft);}
  }

  /* Gestapelt braucht das Widget einen Zeilenabstand: oben steht gap:0 22px,
     also nur zwischen den Spalten. In einer Spalte klebten Pillen, Dokument und
     Datenkasten dadurch aneinander.
     minmax(0,1fr) statt 1fr: eine 1fr-Spur schrumpft nicht unter den
     Mindestinhalt ihrer Kinder — das war frueher die nachgebaute Dokumentseite in
     .scan-col, die eine Spur zog damit die ganze Seite auf 374px auf. Der Scan
     skaliert von sich aus mit, die Spur bleibt trotzdem ausdruecklich schrumpffaehig. */
  @media (max-width:640px){
    .examples-3col{grid-template-columns:minmax(0,1fr); gap:20px;}

    /* ---- Dokumentart wählen: Leiste statt Liste ----
       Untereinander brauchten die zehn Pillen 330px, und was sich beim Antippen
       änderte, stand darunter außerhalb des Bildschirms — man wählte ins Blinde.
       Waagerecht rollend ist die Auswahl eine Zeile hoch, und die Karte mit dem
       Dokument steht unmittelbar darunter. */
    .pill-hint{display:block; margin:0 0 10px; font-size:14.5px; color:var(--ink-mute); line-height:1.45;}
    .pill-rail{
      display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
      scroll-snap-type:x proximity; padding-bottom:8px; scroll-behavior:smooth;
      /* macht die Leiste zum offsetParent der .pill-row (die tragen position:relative).
         Erst dadurch ist deren offsetLeft eine Koordinate im Inhalt der Leiste — der
         Wert, den app.js zum Zentrieren braucht, unabhängig davon, wo gerade gerollt
         wird. Ohne das bezöge er sich auf .examples-wrap. */
      position:relative;
    }
    .pill-rail .pill-row{flex:0 0 auto; scroll-snap-align:center;}
    /* Der Punkt ist der Ankerpunkt der Verbindungslinie, und die gibt es nur am
       Schreibtisch — in der Leiste wäre er ein Fleck ohne Bedeutung. */
    .pill-rail .pill-dot{display:none;}
    .pill-rail .doc-pill{flex:0 0 auto; white-space:nowrap;}
    /* Der nachgebaute Brief ist bis zu 500px hoch; gedeckelt rückt der Datenkasten
       in Sichtweite, und das Dokument bleibt in sich lesbar. */
    /* Der Scan ist eine ganze DIN-A4-Seite und waere sonst 460px hoch — gedeckelt
       rueckt der Datenkasten in Sichtweite, und das Blatt bleibt in sich lesbar. */
    .scan-view{max-height:340px; overflow-y:auto; overscroll-behavior-y:contain;}
    /* Beim Wechsel blenden beide Seiten kurz neu ein — sonst sieht ein Antippen
       aus, als sei nichts passiert (app.js startet die Animation neu). */
    .scan-view, .viewer-fields{animation:docSwap .28s ease;}
    .badge-bar{flex-direction:column; align-items:flex-start;}
    /* white-space:nowrap steht bei beiden aus gutem Grund: am Schreibtisch sollen
       Pillen und Knöpfe einzeilig bleiben. Auf dem Telefon paßt der längste Text
       ("Europäischer Cloudbetrieb oder lokale Installation", "Unverbindliches
       Beratungsgespräch und Probelauf vereinbaren") aber in keine Zeile und
       schiebt die Seite über den Rand. Dort darf umbrochen werden. */
    .cert-badge, .btn{white-space:normal;}}

  /* Abschluss-Aufruf: Button mit erklärender Zeile darunter */
  .cta-row{display:flex; gap:30px; flex-wrap:wrap; justify-content:center; margin-top:24px; text-align:center;}
  .cta-item{display:flex; flex-direction:column; align-items:center; gap:10px; max-width:290px;}
  .cta-note{font-size:14.5px; color:var(--ink-mute); line-height:1.5; margin:0;}

  /* ============ Preisseite ============ */
  .price-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch;}
  .price-card{
    position:relative; background:var(--paper-surface); border:1px solid var(--gray); border-radius:14px;
    padding:22px 20px; display:flex; flex-direction:column; gap:10px;
  }
  .price-card.highlight{border-color:var(--orange); border-width:1.5px;}
  .price-badge{
    position:absolute; top:-11px; left:20px; background:var(--orange); color:#fff;
    font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    padding:4px 10px; border-radius:99px;
  }
  .price-kicker{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); font-weight:700;}
  .price-head{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;}
  .price-from{font-size:15px; color:var(--ink-mute); font-weight:600;}
  .price-amount{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:41px; line-height:1; color:var(--orange); letter-spacing:-.02em;}
  .price-unit{font-size:15px; color:var(--ink-mute); font-weight:600;}
  .price-headline{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:17px; color:var(--ink); margin:8px 0 4px; line-height:1.3;}
  .price-for{margin:0; font-size:15px; color:var(--ink-soft); line-height:1.55; min-height:3.1em;}
  .price-list{list-style:none; margin:6px 0 14px; padding:0; display:flex; flex-direction:column; gap:7px;}
  .price-list li{display:flex; gap:8px; font-size:15px; color:var(--ink-soft); line-height:1.5;}
  .price-list li::before{
    content:"\2713"; flex:0 0 auto; color:var(--orange); font-weight:800; font-size:13px; margin-top:2px;
  }
  .price-card .btn{margin-top:auto; width:100%;}

  .calc-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
  .calc-card{border:1px solid var(--gray); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:10px;}
  .calc-who{font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.4; min-height:2.8em;}
  .calc-lines{display:flex; flex-direction:column; gap:6px;}
  .calc-line{display:flex; justify-content:space-between; gap:10px; font-size:15px; color:var(--ink-mute);}
  .calc-sum{
    display:flex; justify-content:space-between; gap:10px; align-items:baseline;
    border-top:1px solid var(--gray); padding-top:9px; margin-top:auto; font-size:14.5px; color:var(--ink-mute);
  }
  .calc-total{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:19px; color:var(--orange); white-space:nowrap;}

  @media (max-width:820px){
    .price-grid{grid-template-columns:minmax(0,1fr);}
    .calc-row{grid-template-columns:minmax(0,1fr);}
    .price-for, .calc-who{min-height:0;}}

  /* ============ Fallstudien-Layout ============ */
  /* Eigenes, redaktionelles Layout. Vorlage für weitere Fallstudien. */
  .cs-page{padding:0 0 30px;}
  .cs-band{padding:44px 34px;}
  .cs-band.tint{background:var(--paper-surface); border-top:1px solid var(--gray); border-bottom:1px solid var(--gray);}
  .cs-band.ink{background:var(--ink); color:var(--paper);}
  .cs-col{max-width:660px; margin:0 auto;}
  .cs-col.wide{max-width:900px;}

  .cs-eyebrow{
    display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
    text-transform:uppercase; letter-spacing:.09em; color:var(--orange);
    border:1px solid var(--orange); border-radius:99px; padding:4px 12px; margin-bottom:18px;
  }
  .cs-h1{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:45.5px;
    line-height:1.1; letter-spacing:-.02em; margin:0 0 16px; max-width:20ch;
  }
  .cs-sub{font-size:19px; color:var(--ink-soft); line-height:1.5; margin:0 0 26px; max-width:52ch;}
  .cs-hero-foot{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px;}
  /* Partnerlogo im Kopf einer Fallstudie. Freigestellte Datei, deshalb ohne Kasten;
     die Hoehe traegt es, nicht ein Rahmen. */
  .cs-hero-logo{display:flex; align-items:center;}
  .cs-hero-logo img{height:92px; width:auto; max-width:100%;}
  /* Kopf einer Fallstudie: Text links, Partnerlogo rechts daneben. Unterhalb von
     760px ist neben der Ueberschrift kein Platz mehr, dann rutscht das Logo darunter. */
  .cs-hero-split{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center;}
  @media (max-width:760px){
    .cs-hero-split{grid-template-columns:minmax(0,1fr); gap:22px;}
    .cs-hero-split .cs-hero-logo{justify-content:flex-start;}
    .cs-hero-logo img{height:70px;}
  }

  .cs-facts{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
    border:1px solid var(--gray); border-radius:12px; overflow:hidden; margin:30px 0 0;
    background:var(--paper-surface);
  }
  .cs-fact{padding:14px 16px; border-right:1px solid var(--gray);}
  .cs-fact:last-child{border-right:0;}
  .cs-fact dt{font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-mute); font-weight:700; margin:0 0 4px;}
  .cs-fact dd{margin:0; font-size:15.5px; font-weight:600; line-height:1.35;}

  .cs-bignum{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
  .cs-bignum .num{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:89px;
    line-height:.9; color:var(--orange); letter-spacing:-.03em;
  }
  .cs-bignum .num-label{font-size:18px; line-height:1.4; max-width:26ch; color:inherit; opacity:.85;}

  .cs-h2{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:30px;
    line-height:1.2; letter-spacing:-.015em; margin:0 0 14px;
  }
  .cs-p{font-size:17.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 14px;}
  .cs-p:last-child{margin-bottom:0;}
  .cs-p strong{color:var(--ink); font-weight:700;}

  .cs-figure{margin:0;}
  .cs-figure img{width:100%; height:auto; display:block;}
  .cs-caption{font-size:14px; color:var(--ink-mute); margin-top:8px; text-align:center;}

  .cs-check{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px;}
  .cs-check li{display:flex; gap:10px; font-size:17px; line-height:1.55; color:var(--ink-soft);}
  .cs-check li::before{
    content:"\2713"; flex:0 0 auto; width:19px; height:19px; margin-top:1px; border-radius:50%;
    background:var(--orange-fill); color:var(--orange); font-size:13px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
  }

  .cs-quote{display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start;}
  .cs-quote .cs-quote-photo{width:78px; height:78px; border-radius:50%; object-fit:cover; border:2px solid var(--orange);}
  .cs-quote blockquote{
    margin:0; font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
    font-size:26.5px; line-height:1.35; letter-spacing:-.01em;
  }
  .cs-quote .cs-quote-by{margin:12px 0 0; font-size:15px; opacity:.75;}

  .cs-steps{counter-reset:csstep; display:flex; flex-direction:column; gap:2px; margin-top:22px;}
  .cs-step{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; padding:16px 0; border-top:1px solid var(--gray);}
  .cs-step:last-child{border-bottom:1px solid var(--gray);}
  .cs-step::before{
    counter-increment:csstep; content:counter(csstep);
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:24px;
    color:var(--orange); width:34px; text-align:right; line-height:1.3;
  }
  .cs-step h4{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:18.5px; margin:0 0 5px;}
  .cs-step p{margin:0; font-size:15.5px; color:var(--ink-mute); line-height:1.6;}

  .cs-results{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px;}
  .cs-result{border-left:2px solid var(--orange); padding:2px 0 2px 14px;}
  .cs-result h4{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:18px; margin:0 0 6px; display:flex; align-items:center; gap:8px;}
  .cs-result h4 .arrow{color:var(--orange); flex-shrink:0;}
  .cs-result p{margin:0; font-size:15px; color:var(--ink-mute); line-height:1.55;}
  /* Fünf statt vier Karten: einspaltig untereinander statt im unausgewogenen Zweispalter. */
  .cs-results-5{grid-template-columns:minmax(0,1fr);}
  /* Pfeil im Titel ersetzt den Strich als Marker. */
  .cs-results-arrows .cs-result{border-left:none; padding-left:0;}

  /* Steckbrief einer Fallstudie: Merkmal links, Angabe rechts, eine Zeile je Merkmal.
     Anders als .cs-facts (vier Kacheln nebeneinander) traegt er beliebig viele
     Zeilen und ist zum Vergleichen mit der eigenen Lage gedacht. */
  .cs-steckbrief{
    margin:26px 0 0; padding:0; border:1px solid var(--gray); border-radius:12px;
    background:var(--paper-surface); overflow:hidden;
  }
  .cs-steckbrief > div{
    display:grid; grid-template-columns:210px minmax(0,1fr); gap:16px;
    padding:11px 16px; border-top:1px solid var(--gray);
  }
  .cs-steckbrief > div:first-child{border-top:0;}
  .cs-steckbrief dt{
    font-size:13px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-mute); font-weight:700; margin:0; line-height:1.5;
  }
  .cs-steckbrief dd{margin:0; font-size:16px; line-height:1.5; color:var(--ink);}

  /* Vorher/Nachher einer Fallstudie.
     `table-layout:fixed` mit gesetzten Spaltenbreiten, damit die beiden
     Vergleichsspalten gleich breit sind: bei automatischer Breite bekommt die
     Spalte mit den laengeren Saetzen mehr Platz, und die Paare stehen dann
     nicht mehr auf gleicher Hoehe nebeneinander. Ausserdem laeuft eine
     automatisch breite Tabelle auf schmalen Bildschirmen aus der Spalte heraus. */
  .cs-vergleich{
    width:100%; table-layout:fixed; border-collapse:collapse;
    margin-top:20px; font-size:16px;
  }
  .cs-vergleich th, .cs-vergleich td{
    text-align:left; vertical-align:top; padding:11px 14px;
    border-bottom:1px solid var(--gray); line-height:1.5;
  }
  /* Aussen buendig zur Textspalte, innen ein Feld zwischen den Spalten. */
  .cs-vergleich th:first-child, .cs-vergleich td:first-child{padding-left:0;}
  .cs-vergleich th:last-child, .cs-vergleich td:last-child{padding-right:0;}
  .cs-vergleich thead th{
    font-size:13px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-mute); font-weight:700;
  }
  /* Bei `table-layout:fixed` entscheidet die erste Zeile ueber die Breiten,
     also die Kopfzeile — auf tbody gesetzte Breiten blieben wirkungslos. */
  .cs-vergleich thead th:nth-child(1){width:30%;}
  .cs-vergleich thead th:nth-child(2), .cs-vergleich thead th:nth-child(3){width:35%;}
  .cs-vergleich tbody th{font-weight:600; color:var(--ink-soft);}
  .cs-vergleich .nachher{color:var(--orange); font-weight:700;}

  /* Auf dem Telefon reichen drei Spalten nicht: die Zellen tragen ganze Saetze,
     jede Zeile waere vier Zeilen hoch. Deshalb wird aus jeder Tabellenzeile ein
     Block — Merkmal als Ueberschrift, darunter die beiden Angaben untereinander.
     Der Spaltentitel steht in `data-label` an der Zelle, weil der Tabellenkopf
     entfaellt.

     Die Titel stehen dabei NEBEN der Angabe, nicht darueber, und heissen nur noch
     "ohne"/"mit". Vorher nahm jeder eine eigene Zeile in Versalien ein: bei vier
     Merkmalen waren das acht Beschriftungszeilen gegenueber acht Inhaltszeilen —
     die Wiederholung trug mehr Gewicht als das, was sich unterscheidet. Jetzt
     traegt jede Angabe ihre Marke in einer schmalen Spalte links daneben, das
     Nachher in Orange. Aus zwoelf Zeilen je Merkmal werden drei. */
  @media (max-width:640px){
    .cs-vergleich, .cs-vergleich tbody, .cs-vergleich tbody tr,
    .cs-vergleich tbody th{display:block; width:auto;}
    .cs-vergleich thead{display:none;}
    .cs-vergleich tbody tr{padding:13px 0; border-bottom:1px solid var(--gray);}
    .cs-vergleich tbody th, .cs-vergleich tbody td{border-bottom:0; padding:0;}
    .cs-vergleich tbody th{
      font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px;
      color:var(--ink); margin-bottom:7px;
    }
    .cs-vergleich tbody td{
      display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px;
      width:auto; margin-top:5px; align-items:baseline;
    }
    .cs-vergleich tbody td::before{
      content:attr(data-label);
      font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
      color:var(--ink-mute); font-weight:700;
    }
    .cs-vergleich tbody td.nachher::before{color:var(--orange);}
  }

  /* Einordnung einer Kennzahl. Steht bewusst direkt neben der Zahl und nicht in
     den Fragen am Seitenende: eine Prozentangabe ohne Bezugsgroesse liest sich
     als Werbung, mit Bezugsgroesse als Beleg. */
  .cs-einordnung{
    margin:20px 0 0; padding:14px 16px; border-left:2px solid var(--orange);
    background:var(--paper-surface); font-size:15.5px; line-height:1.6; color:var(--ink-soft);
  }
  .cs-einordnung b{color:var(--ink);}
  .cs-einordnung-flach{border-left:none; padding-left:0;}

  @media (max-width:640px){
    .cs-steckbrief > div{grid-template-columns:minmax(0,1fr); gap:3px;}
  }

  .cs-faq{margin-top:20px; border-top:1px solid var(--gray);}
  .cs-faq details{border-bottom:1px solid var(--gray);}
  .cs-faq summary{
    cursor:pointer; list-style:none; padding:15px 0; font-family:"Bricolage Grotesque",sans-serif;
    font-weight:700; font-size:18px; display:flex; justify-content:space-between; gap:14px; align-items:center;
  }
  .cs-faq summary::-webkit-details-marker{display:none;}
  .cs-faq summary::after{content:"+"; color:var(--orange); font-size:23px; font-weight:800; line-height:1;}
  .cs-faq details[open] summary::after{content:"\2212";}
  .cs-faq .cs-answer{padding:0 0 15px; font-size:16px; line-height:1.65; color:var(--ink-soft); margin:0; max-width:60ch;}

  .cs-seo{
    border:1px dashed var(--gray); border-radius:10px; padding:14px 16px; margin-top:30px;
    font-size:14.5px; color:var(--ink-mute); line-height:1.6;
  }
  .cs-seo b{color:var(--ink-soft); font-weight:700;}

  @media (max-width:820px){
    .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
    .cs-fact:nth-child(2){border-right:0;}
    .cs-fact:nth-child(1),.cs-fact:nth-child(2){border-bottom:1px solid var(--gray);}}
  @media (max-width:640px){
    .cs-band{padding:32px 20px;}
    .cs-h1{font-size:35px;}
    .cs-bignum .num{font-size:67px;}
    .cs-quote{grid-template-columns:minmax(0,1fr);}
    .cs-results{grid-template-columns:minmax(0,1fr);}}

  /* Rechtstexte (impressum.html, datenschutz.html)

     Der Rest der Website ist Kachel, Karte und Kurzsatz — hier ist es einmal wirklich
     Fließtext über mehrere Bildschirmhöhen. Deshalb eine eigene, schmale Spalte: 68
     Zeichen, nicht die vollen 960px, sonst wandert das Auge beim Zeilenwechsel.

     Gestaltung wie überall: Bricolage nur in den Überschriften, ein Akzent (Orange) für
     Links, kein Kursiv. Die Trennlinie über h2 ist dieselbe Haarlinie, die auch
     zwischen den Abschnitten der übrigen Seiten steht. */
  .rechtstext{max-width:68ch;}
  /* Ausnahme für die Anschrift auf der Kontaktseite: dort soll der Text über die
     volle Spaltenbreite laufen, anders als bei Impressum und Datenschutz, deren
     schmale Lesespalte bleiben soll. Als Modifikator wie p.lede.breit/.sec-sub.breit. */
  .rechtstext.breit{max-width:none;}
  .rechtstext > h2{
    font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:23px;
    margin:0; padding-top:26px; margin-top:30px; border-top:1px solid var(--gray);
  }
  .rechtstext > h2:first-child{margin-top:0; padding-top:0; border-top:none;}
  .rechtstext h3{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:18px; margin:20px 0 4px;}
  .rechtstext h4{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:16px; margin:16px 0 4px; color:var(--ink-soft);}
  .rechtstext p{font-size:17px; line-height:1.65; color:var(--ink-soft); margin:10px 0;}
  .rechtstext ul{font-size:17px; line-height:1.65; color:var(--ink-soft); margin:10px 0; padding-left:19px;}
  .rechtstext li{margin-bottom:3px;}
  .rechtstext strong{color:var(--ink); font-weight:600;}
  .rechtstext a{color:var(--orange); text-decoration:none; border-bottom:1px solid var(--orange-fill);}
  .rechtstext a:hover{border-bottom-color:var(--orange);}
  /* Anschriften stehen aufrecht — Kursiv kommt auf dieser Website nicht vor. */
  .rechtstext address{font-style:normal; font-size:17px; line-height:1.65; color:var(--ink-soft); margin:10px 0;}

  /* Angabenblock des Impressums: Bezeichnung und Wert nebeneinander, auf schmalen
     Bildschirmen untereinander. Nicht .kv-list — die drückt den Wert mit
     space-between an den rechten Rand, was bei einer Anschrift auseinanderfällt. */
  .rechtsangaben{display:grid; grid-template-columns:13rem minmax(0,1fr); gap:10px 20px; margin:14px 0 0; font-size:17px; line-height:1.65;}
  .rechtsangaben dt{color:var(--ink-mute);}
  .rechtsangaben dd{margin:0; color:var(--ink); }
  @media (max-width:640px){
    .rechtsangaben{grid-template-columns:minmax(0,1fr); gap:2px;}
    .rechtsangaben dd{margin-bottom:10px;}}

  /* Hinweiskasten für das, was auf dieser Website auffällig anders ist als üblich
     (keine Cookies, keine Zählpixel). Radius 12px wie die übrigen Karten. */
  .rechtsnote{
    border:1px solid var(--gray); border-radius:12px; padding:14px 16px; margin:16px 0;
    background:var(--sky-fill); font-size:16px; line-height:1.6; color:var(--ink);
  }
  .rechtsnote p{font-size:16px; color:var(--ink); margin:0;}
  .rechtsnote p + p{margin-top:8px;}

  /* Kontaktseite: Calendly-Einbettung (eingehängt von app.js)

     Der Rahmen trägt die Flächenfarbe, damit hell wie dunkel kein heller Streifen um
     das iframe stehen bleibt, solange Calendly noch lädt. Das Widget bringt seinen
     eigenen Innenabstand mit, deshalb hat .cal-embed keinen. */
  .cal-embed{
    border:1px solid var(--gray); border-radius:14px; overflow:hidden;
    background:var(--paper-surface);
  }
  /* Calendlys Rahmen ist von Haus aus inline und saesse damit auf der Textgrundlinie,
     was darunter drei Pixel fuer Unterlaengen frei laesst. */
  .cal-embed iframe{display:block;}

  /* Fußnotenzeichen an den Preisen (preise.html)

     Hochgestellt und im Akzent, damit es neben der großen Zahl auffällt, ohne sie zu
     stören. Als <a> ein Sprung auf #preisfaktoren, als <span> das Zeichen vor der
     Fußnote selbst — beide sollen gleich aussehen, deshalb steht die Farbe auf der
     Klasse und nicht auf dem Element. */
  .fn-ref{
    color:var(--orange); font-size:.62em; font-weight:700; vertical-align:super;
    line-height:0; margin-left:2px; text-decoration:none;
  }
  a.fn-ref:hover{text-decoration:underline;}
  .fn-note{font-size:14px; color:var(--ink-mute); line-height:1.5; margin:14px 0 0;}
  .fn-note a{color:var(--orange); font-weight:700; text-decoration:none;}
  .fn-note a:hover{text-decoration:underline;}