/* startseite.css — aus dem <style is:global> von HomePage.astro.
 *
 * Einmalig herausgeschnitten beim Rueckbau der Astro-Fassung. Wird NUR von
 * der Startseite geladen: der Block setzt `body { background: … !important }`,
 * und diese eine Zeile faerbte, als sie im allgemeinen Blatt stand, alle 244
 * Seiten hellblau statt weiss.
 *
 * Ab hier von Hand gepflegt — es gibt keine Quelle mehr.
 */
html { scroll-behavior: smooth; }
  /* ------------------------------------------------------------------
     Die Farbrampe dieser Seite.

     An :root, nicht an der Seitenhuelle: dieser Stilblock ist is:global
     und faerbt body und Navigation mit, die ausserhalb der Huelle stehen.
     An der Huelle definiert war var(--lh-ink) dort undefiniert, und die
     Navigation wurde schwarz.

     Sie stand als Hexwert an jedem Element: der Tintenton 13-mal, das
     Blaugrau 5-mal, das Hellgrau 8-mal. Eine Farbe zu aendern hiess, sie
     ueberall zu finden.

     Die Rampe hing bis zum 31.08.2026 an eigenen Hexwerten: #0C1A3C,
     #46536E, #64708A, #8492AD. Sie sind an die Tokens angeglichen, aus drei
     Gruenden:

       1. Das Design-System hatte es bereits entschieden. Seine
          Token-Luecken-Seite nennt den Tintenton "keine Luecke, sondern eine
          Abweichung" und empfiehlt ausdruecklich, "keinen Token aufzunehmen,
          sondern die Site anzugleichen" -- weil es derselbe Schriftzug auf
          demselben Produkt ist.

       2. JEDER Tokenwert hat mehr Kontrast als der bisherige:
          17.09 -> 18.72, 7.71 -> 10.35, 4.97 -> 7.58, 3.14 -> 4.76.

       3. Der letzte Wert war ein Zugaenglichkeitsfehler. #8492AD traegt die
          Hero-Metazeile bei 12px und erreichte auf dem tatsaechlichen
          Seitengrund #F1F5FB nur 2.87:1 -- WCAG AA verlangt 4.5:1.

          Der naheliegende Tausch gegen --wd-fg-muted (#64748B) haette
          NICHT gereicht: 4.35:1, immer noch darunter. Auf Weiss waeren es
          4.76:1 gewesen, und genau so hatte ich zuerst gerechnet -- gegen
          den falschen Hintergrund. Die Seite steht aber nicht auf Weiss.
          Es ist jetzt --wd-fg-secondary (#475569) mit 6.93:1.

     Gemessen mit CIEDE2000, nicht dE76: der erste Durchgang rechnete mit der
     aelteren Formel und ergab fuer den Tintenton 15.6 statt 8.90. dE76
     ueberschaetzt Unterschiede im Dunklen -- dieselbe Falle hatte das
     Design-System schon dokumentiert.

     Die Markenfarben dagegen decken sich und haengen deshalb an der
     Palette aus 01-base.css: --primary, --primary-dark, --primary-light,
     --success. Aendert sich die Marke, folgt diese Seite.
     ------------------------------------------------------------------ */
  :root {
    --lh-ink: var(--wd-fg);              /* Ueberschriften, Kartentitel */
    --lh-body: var(--wd-fg-body);        /* Fliesstext */
    --lh-muted: var(--wd-fg-secondary);  /* Nebentext, Haekchenzeile */
    --lh-subtle: var(--wd-fg-secondary); /* Beschriftungen, Hero-Metazeile */
    --lh-chip: #EEF1F6;       /* Fuellung kleiner Kaesten */


    --lh-on-deep: #EDF1F8;    /* Text auf der dunklen Tafel */
    --lh-on-deep-muted: #97A1B6;
  }


  /* ------------------------------------------------------------------
     Startseite: die wiederholten Bausteine.

     Sie standen als style-Attribut an jedem einzelnen Element. Eine
     Aenderung an der Abschnittsueberschrift hiess deshalb: drei Stellen
     suchen und alle drei gleich aendern. Schlimmer noch — ein
     style-Attribut schlaegt jede Regel aus dem Stylesheet, weshalb saemtliche
     Medienabfragen weiter unten mit !important arbeiten mussten, um
     ueberhaupt anzukommen.

     Die Deklarationen sind hier unveraendert uebernommen. Der
     Pixelvergleich vor und nach dem Umbau zeigt 0.000 % Abweichung; das
     ist die Abnahme dieses Schrittes.

     Was BEWUSST inline bleibt: die Hero-Zeichnung (Zeilen ~100-198). Dort
     sind die Werte Zeichenmasse eines einzelnen Bildes, keine
     wiederverwendbaren Entscheidungen. Eine Klasse .lh-punkt-9px waere
     kein Gewinn, sondern derselbe Wert mit einem Umweg.
     ------------------------------------------------------------------ */
  .lh-sect { position: relative; max-width: var(--wd-container); margin: 0 auto; }
  .lh-secthead { max-width: var(--wd-web-measure); margin-bottom: 44px; }
  .lh-sect--features { padding: 104px var(--wd-gutter) 30px; }
  .lh-sect--how { padding: 80px var(--wd-gutter); }
  .lh-sect--security { overflow: hidden; margin: 30px auto 0; padding: 0 var(--wd-gutter); }
  .lh-sect--compare { padding: 100px var(--wd-gutter) 80px; }
  .lh-sect--faq { padding: 20px var(--wd-gutter) 90px; }
  .lh-sect--cta { margin: 0 auto 80px; padding: 0 var(--wd-gutter); }
  .lh-secthead--wide { margin-bottom: 52px; }
  .lh-eyebrow { font-family: var(--font-mono); font-size: var(--wd-web-text-xs); letter-spacing: 3px; color: var(--primary); margin-bottom: 16px; }
  .lh-eyebrow--tight { letter-spacing: 2px; margin-bottom: 14px; }
  .lh-eyebrow--ondeep { color: #7DA2FF; }
  .lh-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--wd-leading-display); letter-spacing: -0.03em; margin: 0; color: var(--lh-ink); }
  .lh-h2--gap { margin: 0 0 14px; }
  .lh-h2--ondeep { margin: 0 0 16px; color: var(--lh-on-deep); }
  .lh-lead { font-size: var(--wd-web-text-base); line-height: var(--wd-leading-body); color: var(--lh-body); margin: 0; max-width: var(--wd-web-measure); }
  .lh-lead--full {  }
  .lh-lead--ondeep { color: var(--lh-on-deep-muted); margin: 0 0 28px; }
  .lh-card { position: relative; overflow: hidden; border-radius: 20px; padding: 26px; background: #fff; border: 1px solid rgba(12,26,60,0.08); box-shadow: 0 12px 30px rgba(20,40,80,0.06); display: flex; flex-direction: column; justify-content: space-between; }
  .lh-card-title { font-family: var(--font-display); font-weight: 600; font-size: var(--wd-web-text-lg); margin: 0 0 6px; color: var(--lh-ink); }
  .lh-card-title--row { margin: 0 0 7px; }
  .lh-card-text { font-size: var(--wd-web-text-sm); line-height: var(--wd-leading-body); color: var(--lh-muted); margin: 0; }
  .lh-card-text--measure { max-width: var(--wd-web-measure); }
  .lh-step-title { font-family: var(--font-display); font-weight: 600; font-size: var(--wd-web-text-lg); margin: 22px 0 9px; color: var(--lh-ink); }
  .lh-step-num { width: 68px; height: 68px; border-radius: 18px; background: #fff; border: 1px solid rgba(37,99,235,0.2); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--wd-web-text-xl); color: var(--primary); box-shadow: 0 12px 30px rgba(20,40,80,0.08); }
  .lh-step-num--done { border: 1px solid rgba(22,163,74,0.32); color: var(--success); }
  .lh-glyph { font-size: var(--wd-web-text-base); line-height: var(--wd-leading-none); }
  .lh-rel { position: relative; }
  .lh-flex1 { flex: 1; }
  .lh-bento { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 212px; gap: 18px; }
  .lh-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .lh-steps-line { position: absolute; top: 34px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg,transparent,rgba(37,99,235,0.3),transparent); pointer-events: none; }
  .lh-bento-hero { grid-column: span 2; grid-row: span 2; position: relative; overflow: hidden; border-radius: 20px; padding: 32px; background: linear-gradient(160deg,#FFFFFF,#EEF4FF); border: 1px solid rgba(12,26,60,0.08); box-shadow: 0 18px 44px rgba(20,40,80,0.08); display: flex; flex-direction: column; }
  .lh-bento-row { grid-column: span 2; position: relative; overflow: hidden; border-radius: 20px; padding: 26px 28px; background: #fff; border: 1px solid rgba(12,26,60,0.08); box-shadow: 0 12px 30px rgba(20,40,80,0.06); display: flex; align-items: center; gap: 24px; }
  .lh-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 480px; }
  .lh-sec-panel { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid rgba(12,26,60,0.12); background: radial-gradient(120% 130% at 82% 12%,#12203C 0%,#0A1120 52%,#070B14 100%); padding: 64px 56px; box-shadow: 0 34px 80px rgba(11,20,48,0.28); }
  .lh-sec-row { position: relative; display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
  /* min() statt der festen 360px: die Tafel hat 56px Polster je Seite, auf
     390px Schirmbreite blieben der Spalte damit rund 238px. Eine feste
     Mindestbreite von 360px passte da nicht hinein, und weil die Tafel
     overflow:hidden traegt, wurde der Text nicht umgebrochen, sondern
     abgeschnitten — Ueberschrift, Fliesstext und Haekchenliste, in allen
     vier Sprachen. Der Seitenumbruch-Waechter hat es nicht gesehen, weil die
     Seite selbst nicht ueberlief; abgeschnitten wurde INNERHALB der Tafel. */
  .lh-sec-col { flex: 1; min-width: min(360px, 100%); }

  body { background: #F1F5FB !important; color: var(--lh-ink); overflow-x: hidden; }
  body ::selection { background: rgba(37,99,235,0.16); }
  main#main-content { margin: 0; }
  @keyframes lhAurora1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(5%,-4%) scale(1.1); } }
  @keyframes lhAurora2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6%,4%) scale(1.12); } }
  @keyframes lhFlow { to { background-position: 220% 0; } }
  @keyframes lhRise { 0% { opacity:0; transform: translateY(52px); } 100% { opacity:1; transform: translateY(0); } }
  @keyframes lhFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes lhPop { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
  @keyframes lhSweep { 0% { transform: translateX(-140%) skewX(-14deg); } 18%,100% { transform: translateX(160%) skewX(-14deg); } }
  @keyframes lhRing { 0%,100% { opacity:.5; transform: translate(-50%,-50%) scale(1); } 50% { opacity:.85; transform: translate(-50%,-50%) scale(1.08); } }
  @keyframes lhSpin { to { transform: rotate(360deg); } }
  @keyframes lhMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  @keyframes lhSrc { 0%,100% { opacity:.5; transform: scale(1); } 50% { opacity:1; transform: scale(1.25); } }
  .lh-nav { color: var(--lh-body); font-weight: 500; font-size: var(--wd-web-text-sm); transition: color .2s; }
  .lh-nav:hover { color: var(--lh-ink); }
  .lh-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  /* Above-the-fold hero. Same motion as .lh-reveal, but driven by a CSS
     animation instead of the IntersectionObserver below.
     .lh-reveal holds opacity at 0 until JS runs, and the hero <h1> is the
     LCP element — that made LCP 4.3 s on mobile, of which 3.67 s (86 %) was
     pure render delay waiting for script. A CSS animation paints on the
     first frame after style resolution, with no JS on the path. Anything
     below the fold keeps the observer: there the delay is invisible and the
     scroll-triggered reveal is the point. */
  .lh-rise { animation: lhRise .8s cubic-bezier(.16,1,.3,1) both; }
  @keyframes lhRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  /* Deliberately NOT using content-visibility on the sections below the
     fold. It halves styleLayout (1223 ms -> ~600 ms) and TBT, but the
     unrendered sections report their placeholder height, so every in-page
     anchor lands off-target (#faq missed by ~290 px in testing). LCP was
     unchanged, so it bought nothing where it mattered. */
  .lh-faq.open .lh-faq-icon { transform: rotate(45deg); }
  .lh-fh { font-family: var(--font-display); font-weight: 600; font-size: var(--wd-web-text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: #C2CCDE; margin: 0 0 14px; }
  .lh-fl { display: block; font-size: var(--wd-web-text-sm); line-height: var(--wd-leading-body); color: #8A94A8; padding: 4px 0; text-decoration: none; transition: color .2s; }
  .lh-fl:hover { color: var(--lh-on-deep); }
  .lh-fl-inline { color: #8A94A8; text-decoration: none; transition: color .2s; }
  .lh-fl-inline:hover { color: var(--lh-on-deep); }
  .lh-footer-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 100px; font-size: var(--wd-web-text-xs); font-weight: 500; color: #B9C2D4; }
  .lh-social { color: var(--lh-muted); transition: color .2s; display: inline-flex; }
  .lh-social:hover { color: var(--lh-on-deep); }
  /* Das Merkmalsraster auf schmalen Schirmen.

     Es hatte keine: drei Spalten mit 212px festen Zeilen blieben bis auf
     390px stehen. Jede Karte war dort 110px breit, innen 26px Polster auf
     jeder Seite — 48px fuer eine Ueberschrift wie "Verbindung in
     Sekunden", die 112px braucht. Der Text lief aus den Karten heraus und
     ueber die Karte daneben.

     Das ist keine Frage der Schriftgroesse: bei 18px war es genauso
     kaputt, nur unwesentlich weniger weit. Die Regel steht trotzdem hier
     und nicht in einem eigenen Umbau, weil eine Abnahme, die
     Kollisionen ausschliesst, an dieser Stelle sonst nicht zu halten ist.

     minmax(0, 1fr) statt 1fr: ohne das kann eine Spalte durch ein langes
     Wort breiter werden als ihr Anteil, und das Raster schiebt die Seite
     nach rechts aus dem Bild. */
  @media (max-width: 900px) {
    /* Ohne !important. Bis zum Umbau stand die Rasterdefinition als
       style-Attribut am Element, und ein style-Attribut schlaegt jede Regel
       aus dem Stylesheet — diese Abfragen kamen nur mit !important an. Jetzt
       steht die Grundlage in .lh-bento, und #lhBento gewinnt hier ueber die
       Spezifitaet. */
    #lhBento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
    #lhBento > div { grid-row: auto; min-height: 208px; }
  }
  @media (max-width: 620px) {
    #lhBento { grid-template-columns: minmax(0, 1fr); }
    #lhBento > div { grid-column: auto; }
    /* Die eine Karte, die ihren Inhalt nebeneinander stellt: in einer
       Spalte bleiben der Textseite neben der 150px-Grafik rund 160px, und
       "Eigener Codec — fluessig & sparsam" bricht dort in vier Zeilen um.
       Untereinander statt nebeneinander. */
    .lh-bento-row { flex-direction: column; align-items: flex-start; }
  }
  /* Der Ablauf hatte ueberhaupt keine Medienabfrage: drei Spalten blieben
     bis 390px stehen. Dort waren die Spalten 110px breit, und weil
     `repeat(3,1fr)` -- ohne minmax(0,...) -- eine Spalte durch ein langes
     Wort ueber ihren Anteil hinauswachsen laesst, ragte die dritte 13px aus
     dem Raster heraus und wurde von der Seitenhuelle abgeschnitten. Das ist
     derselbe Fehler, der beim Merkmalsraster darueber schon behoben war.

     Die Verbindungslinie zwischen den Schritten wird mit ausgeblendet: sie
     verbindet waagrecht, was untereinander steht.

     700px ist gemessen, nicht gegriffen: darunter fallen die Spalten unter
     200px, und die Schrittueberschriften brechen in allen vier Sprachen
     zweizeilig um (Franzoesisch schon ab 640px, Deutsch ab 560px). Der
     Fliesstext darunter haette bei 175px Spaltenbreite rund zwanzig Zeichen
     je Zeile. */
  @media (max-width: 700px) {
    .lh-steps { grid-template-columns: 1fr; gap: 32px; }
    .lh-steps-line { display: none; }
  }

  /* Diese beiden Abfragen liefen ins Leere: .lh-fgrid stand im Stylesheet,
     aber kein Element trug die Klasse — sie ist bei einem frueheren Umbau
     verlorengegangen. Das Raster blieb deshalb bis 390px zweispaltig, mit
     173px breiten Zellen fuer Beschriftungen wie "AES-256-GCM Datenstrom".
     Jetzt haengt die Klasse wieder am Element. */
  @media (max-width: 900px) { .lh-fgrid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .lh-fgrid { grid-template-columns: 1fr; } }
  /* Die Tafel-Polsterung mitziehen: 56px je Seite sind auf einem Handy ein
     Drittel der Breite. */
  @media (max-width: 700px) { .lh-sec-panel { padding: 44px 24px; border-radius: 22px; } }
  @media (prefers-reduced-motion: reduce) { .lh-reveal { opacity: 1 !important; transform: none !important; } .lh-rise { animation: none !important; } }

/* ===== startseite-hero.css ===== */
/* startseite-hero.css — der Hero der Startseite nach der Vorlage
 * "Startseite-Hero" des Design-Systems (02.09.2026).
 *
 * Eigenes Blatt, weil der Hero ein eigenes Stueck ist: Markup in
 * resources/views/startseite-hero.blade.php, Ablauf in
 * public/js/startseite.js. pruefen/stylesheet-bauen.mjs haengt es an
 * startseite.css an — es wird also nur auf der Startseite geladen.
 *
 * Die Vorgabe hat ihre Werte als style-Attribute; hier stehen sie als
 * Regeln auf Klassen mit Vorsilbe sh-. Wo die Vorgabe eine Schriftgroesse
 * in Pixeln nennt, steht hier das Token der Leiter, das ihr entspricht;
 * die Groessen IM Fenster (#lhWin) bleiben Pixel, weil sie Bildmasse einer
 * Zeichnung sind.
 *
 * Zwei bewusste Abweichungen von der Vorgabe, beide wegen WCAG:
 *   - Die Vertrauenszeile unten steht in #8794AD statt #64748B. Auf dem
 *     dunkelsten Grund des Verlaufs erreicht #64748B nur 3.8:1; 12px
 *     Text braucht 4.5:1. #8794AD kommt auf 6.0:1.
 *   - Die Hinweistexte im Fenster stehen in #64748B statt #94A3B8. Das
 *     Fenster ist beim Kontrast-Waechter zwar ausgenommen — es ist eine
 *     Zeichnung —, aber ein Text, den man lesen kann, soll auch lesbar
 *     sein.
 */

/* --- Der Grund ------------------------------------------------------ */
.sh-hero {
  position: relative;
  overflow: hidden;
  background: var(--wd-canvas-deep);
  color: #E2E8F5;
  padding: 6.5rem var(--wd-gutter) 2.5rem;
}
.sh-raster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 70%);
}
.sh-glut {
  position: absolute;
  top: -160px;
  right: -80px;
  width: 900px;
  height: 700px;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--wd-canvas-glow, rgba(46, 110, 240, 0.40)), transparent);
  opacity: 0.55;
  animation: wd-puls 7s ease-in-out infinite;
}
.sh-inhalt {
  position: relative;
  max-width: var(--wd-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 56px;
  align-items: center;
}

/* --- Die Textspalte -------------------------------------------------- */
.sh-text { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.sh-text .hero-pille { align-self: flex-start; margin: 0; }
.sh-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: var(--wd-leading-display);
  letter-spacing: -0.026em;
  color: #fff;
  text-wrap: balance;
}
.sh-akzent { color: #60A5FA; }
.sh-lead {
  margin: 0;
  max-width: 34em;
  font-size: var(--wd-web-text-md);
  line-height: var(--wd-leading-body);
  color: #A9B6CE;
  text-wrap: pretty;
}
.sh-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2px; }
/* Beide Knoepfe gleich hoch und die Reihe darf umbrechen: die
   franzoesischen Beschriftungen sind laenger als die deutschen, und ein
   Knopf, der mitten im Wort umbricht, ist keiner. */
.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 58px;
  box-sizing: border-box;
  padding: 15px 26px;
  border-radius: 10px;
  font-size: var(--wd-web-text-base);
  font-weight: 600;
  line-height: var(--wd-leading-none);
  white-space: nowrap;
  text-decoration: none;
  transition: transform 180ms cubic-bezier(0.215, 0.61, 0.355, 1), background 180ms ease-out, border-color 180ms ease-out;
}
.sh-btn-weiss { background: #fff; color: #0C1526; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6); }
.sh-btn-weiss:hover { transform: translateY(-1px); color: #0C1526; background: #F1F5F9; }
.sh-btn-glas { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; padding: 15px 24px; }
.sh-btn-glas:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.34); color: #fff; }
.sh-pfeil { opacity: 0.5; }
.sh-haken {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px 28px;
  justify-content: start;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--wd-web-text-sm);
  line-height: var(--wd-leading-body);
  color: #B8C4DA;
}
.sh-haken li { display: flex; align-items: center; gap: 9px; }
.sh-haken li:last-child { grid-column: 1 / -1; }
.sh-haken-zeichen { color: #16A34A; font-weight: 700; }

/* --- Das Produktfenster ---------------------------------------------- */
.sh-buehne { min-width: 0; }
.sh-fenster {
  border-radius: 14px;
  overflow: hidden;
  background: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: #0F172A;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}
.sh-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #EEF2F7;
  border-bottom: 1px solid #E2E8F0;
  font-size: 13px;
  color: #475569;
}
.sh-titel-knoepfe { display: flex; gap: 14px; font-size: 12px; color: #94A3B8; }
.sh-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 1px solid #EEF2F7;
}
.sh-marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: #0F172A;
}
.sh-marke svg { width: 26px; height: 26px; border-radius: 7px; }
.sh-chips { display: flex; gap: 7px; }
.sh-chips span { width: 22px; height: 22px; border-radius: 6px; background: #EEF2F7; }

/* Der Aufbau: zwei Spalten, die rechte weicht, sobald die Session-ID
   steht — sie ist dann nicht mehr der Weg in die Sitzung. */
.sh-aufbau {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  background: #fff;
  min-height: 352px;
  transition: grid-template-columns 420ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.sh-aufbau.ohne-geraete { grid-template-columns: 1fr 0fr; }
.sh-aufbau.ohne-geraete .sh-geraete { opacity: 0; }
.sh-formular { padding: 26px 30px 30px; text-align: center; }
.sh-form-titel { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: #0F172A; }
.sh-form-hinweis { margin: 0 auto 20px; max-width: 30ch; font-size: 13px; line-height: 1.5; color: #64748B; }
.sh-felder { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.sh-feld { display: flex; flex-direction: column; gap: 6px; }
.sh-feld-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: #64748B; }
.sh-feld-wert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 19px;
  padding: 11px 13px;
  border: 1px solid #E2E8F0;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  color: #0F172A;
}
.sh-feld-wert.sh-pin { letter-spacing: 0.3em; }
.sh-caret { width: 2px; height: 17px; background: #2563EB; visibility: hidden; }
.sh-caret.ist-an { visibility: visible; animation: wd-caret 1.1s step-end infinite; }
.sh-verbinden {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
  padding: 13px;
  border-radius: 9px;
  background: #2563EB;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 10px 22px -12px rgba(37, 99, 235, 0.8);
}
.sh-spinner { display: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; }
.sh-verbinden.ist-aktiv .sh-spinner { display: block; animation: lhSpin 0.8s linear infinite; }
.sh-geraete {
  padding: 26px 26px 30px;
  border-left: 1px solid #EEF2F7;
  background: #FCFDFE;
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  transition: opacity 300ms ease-out;
}
.sh-geraete-titel { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #0F172A; }
.sh-geraete-hinweis { margin: 0 0 18px; font-size: 12px; line-height: 1.5; color: #64748B; }
.sh-geraete-form { display: flex; flex-direction: column; gap: 12px; }
.sh-geraete-feld { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #64748B; }
.sh-geraete-feld > span { height: 34px; border: 1px solid #E2E8F0; border-radius: 8px; background: #fff; }
.sh-anmelden { display: block; padding: 10px; border-radius: 8px; background: #DBEAFE; color: #1D4ED8; font-size: 13px; font-weight: 600; text-align: center; }
.sh-passkey { display: block; padding: 10px; border-radius: 8px; border: 1px solid #E2E8F0; background: #fff; color: #334155; font-size: 13px; text-align: center; }

/* Die Sitzung: erst sichtbar, wenn das Skript sie einschaltet. */
.sh-sitzung { display: none; flex-direction: column; background: #fff; min-height: 352px; }
.sh-fenster.ist-verbunden .sh-aufbau { display: none; }
.sh-fenster.ist-verbunden .sh-sitzung { display: flex; animation: wd-in 320ms cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.sh-sitzung-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid #EEF2F7;
}
.sh-host { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: #0F172A; white-space: nowrap; }
.sh-punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16); }
.sh-werkzeuge { display: flex; flex-wrap: wrap; gap: 7px; font-size: 12px; }
.sh-werkzeuge span { padding: 6px 11px; border-radius: 7px; background: #F1F5F9; color: #475569; white-space: nowrap; }
.sh-werkzeuge .sh-beenden { background: #FEE2E2; color: #B91C1C; }
.sh-schirm {
  position: relative;
  flex: 1;
  min-height: 286px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 20% 0%, #1E3A8A 0%, #0F2557 55%, #0A1734 100%);
}
.sh-explorer {
  position: absolute;
  top: 26px;
  left: 34px;
  width: 268px;
  max-width: calc(100% - 68px);
  border-radius: 9px;
  overflow: hidden;
  background: #F8FAFC;
  box-shadow: 0 22px 40px -20px rgba(0, 0, 0, 0.6);
}
.sh-explorer-kopf { display: flex; justify-content: space-between; padding: 7px 10px; background: #E9EEF5; font-size: 11px; color: #475569; }
.sh-explorer-kopf span { color: #94A3B8; }
.sh-explorer-zeilen { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.sh-explorer-zeilen > span { display: flex; justify-content: space-between; font-size: 11px; color: #334155; }
.sh-explorer-zeilen > span > span { color: #64748B; }
.sh-terminal {
  position: absolute;
  bottom: 52px;
  right: 30px;
  width: 236px;
  max-width: calc(100% - 60px);
  border-radius: 9px;
  overflow: hidden;
  background: #0B1220;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 22px 40px -20px rgba(0, 0, 0, 0.7);
  font-family: var(--font-mono);
}
.sh-terminal-kopf { padding: 7px 10px; background: rgba(255, 255, 255, 0.05); font-size: 10px; letter-spacing: 0.08em; color: #94A3B8; }
.sh-terminal-zeilen { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 10px; color: #86EFAC; white-space: pre; }
.sh-terminal-zeilen .sh-blau { color: #BFDBFE; }
.sh-zeiger { position: absolute; top: 96px; left: 150px; animation: wd-zeiger 9s ease-in-out infinite; }
.sh-zeiger span {
  display: block;
  width: 0;
  height: 0;
  border-left: 7px solid #fff;
  border-bottom: 11px solid transparent;
  transform: rotate(-20deg);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.sh-taskleiste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: rgba(8, 13, 24, 0.72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.sh-taskleiste > span { width: 18px; height: 18px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); }
.sh-taskleiste > span:first-child { background: rgba(255, 255, 255, 0.16); }
.sh-taskleiste > .sh-uhr { margin-left: auto; width: auto; height: auto; border-radius: 0; background: none; font-family: var(--font-mono); font-size: 10px; color: #94A3B8; }
.sh-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  background: #F8FAFC;
  border-top: 1px solid #EEF2F7;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #64748B;
}
.sh-status-links { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.sh-status-links .sh-punkt { width: 6px; height: 6px; }

/* --- Die Kette unter dem Fenster ------------------------------------- */
.sh-kette {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 35px;
}
.sh-pille {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-none);
}
.sh-pille.ist-an { display: inline-flex; animation: wd-pill 300ms cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.sh-pille-rot { background: rgba(239, 51, 64, 0.10); border-color: rgba(239, 51, 64, 0.35); color: #FCA5A5; }
.sh-pille-blau { background: rgba(96, 165, 250, 0.10); border-color: rgba(96, 165, 250, 0.32); color: #BFDBFE; font-family: var(--font-mono); }
.sh-pille-gruen { background: rgba(22, 163, 74, 0.10); border-color: rgba(22, 163, 74, 0.35); color: #86EFAC; }
.sh-pille-gruen .sh-punkt { width: 6px; height: 6px; box-shadow: none; }

/* --- Die Vertrauenszeile --------------------------------------------- */
.sh-fuss {
  position: relative;
  max-width: var(--wd-container);
  margin: 72px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--wd-web-text-xs);
  line-height: var(--wd-leading-body);
  letter-spacing: 0.16em;
  color: #8794AD;
}

/* --- Bewegung -------------------------------------------------------- */
@keyframes wd-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes wd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wd-pill { from { opacity: 0; transform: translateY(4px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes wd-zeiger {
  0% { transform: translate(0, 0); }
  30% { transform: translate(96px, 42px); }
  45% { transform: translate(96px, 42px); }
  75% { transform: translate(28px, 120px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sh-glut, .sh-zeiger, .sh-caret.ist-an, .sh-pille.ist-an, .sh-fenster.ist-verbunden .sh-sitzung { animation: none; }
  .sh-aufbau, .sh-geraete { transition: none; }
}

/* --- Schmale Schirme ------------------------------------------------- */
@media (max-width: 768px) {
  .sh-hero { padding: 3.5rem var(--wd-gutter) 2rem; }
  .sh-inhalt { gap: 40px; }
  .sh-text { text-align: left; }
  .sh-haken { grid-template-columns: 1fr; }
  .sh-haken li:last-child { grid-column: auto; }
  /* Unter 768px haette "Meine Geraete" neben dem Formular rund 130px —
     zu wenig fuer eine Spalte, die nicht umbricht. Sie faellt weg; das
     Formular bekommt die ganze Breite. */
  .sh-aufbau { grid-template-columns: 1fr; }
  .sh-geraete { display: none; }
  .sh-fuss { margin-top: 44px; }
}
@media (max-width: 480px) {
  .sh-formular { padding: 22px 18px 24px; }
  .sh-explorer { left: 16px; top: 18px; }
  .sh-terminal { right: 16px; bottom: 46px; }
  .sh-werkzeuge span:not(.sh-beenden) { display: none; }
}