/* assets/css/fonts.css */
/* Zero One IT – Lokale Schriftarten
 * Phase 03A / 03A.1: Vorbereitung. Diese Datei ist noch NICHT in den HTML-Seiten eingebunden.
 * Auslieferung zur Laufzeit ausschliesslich lokal (keine externen Requests).
 * Quellen, Versionen, Lizenzen und SHA-256-Pruefsummen: ../fonts/FONT-SOURCES.md
 *
 * Strategie (nach Performance-Gate 03A.1):
 *   - Space Grotesk: Variable (1 Datei, 300–700) – kleinste offizielle Loesung.
 *   - Inter: STATISCH je genutztem Schnitt (400, 500, 400-italic) – geringere reale
 *     Erstladung, da site-weit real nur diese Schnitte gerendert werden.
 *   - JetBrains Mono: statisch (400, 500) – offiziell nur statisch als WOFF2.
 */

/* ===== Space Grotesk – Variable Font (Gewichtsachse 300–700) ===== */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk/space-grotesk-variable.woff2") format("woff2");
}

/* ===== Inter – Regular (400), statisch ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-regular.woff2") format("woff2");
}

/* ===== Inter – Medium (500), statisch ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-medium.woff2") format("woff2");
}

/* ===== Inter – kursiv (400), statisch (Rechtsseiten: .note font-style:italic) ===== */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter/inter-italic.woff2") format("woff2");
}

/* ===== JetBrains Mono – Regular (400), statisch ===== */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-regular.woff2") format("woff2");
}

/* ===== JetBrains Mono – Medium (500), statisch ===== */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-medium.woff2") format("woff2");
}

/* assets/css/cookie-consent.css */
/* ============================================================
   ZERO ONE IT — Cookie-/Consent-Center
   Eigenstaendiges, praefixiertes Stylesheet (.cookie-consent / .cc-*),
   damit nichts mit bestehenden Klassen der Seiten kollidiert.
   Nutzt die vorhandenen Design-Tokens (--bg, --accent, --surface, ...),
   die in jeder Seite bereits im :root definiert sind.
   ============================================================ */

.cookie-consent{position:fixed;inset:0;z-index:900;display:none;visibility:hidden;
  --cc-icon-size:88px;--cc-shell-pad:calc(var(--cc-icon-size) * .84)}
.cookie-consent.cc-visible{display:block;visibility:visible}

.cc-backdrop{position:absolute;inset:0;background:var(--schleier);opacity:0;transition:opacity .38s ease;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cookie-consent.cc-open .cc-backdrop{opacity:1}

/* align-items/justify-content werden bewusst zweimal deklariert: die "safe"-Variante
   verhindert, dass zentrierter, ueberlaufender Inhalt am oberen Rand abgeschnitten wird
   (klassisches Flexbox-Centering-Problem). Browser ohne Unterstuetzung ignorieren die
   ungueltige Deklaration und behalten die vorherige "center"-Zeile als Fallback. */
.cc-viewport{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  align-items:safe center;justify-content:safe center;
  padding:20px;overflow-y:auto;overscroll-behavior:contain}

/* ===== Shell: reserviert echten Platz fuer das Icon, damit weder die Zentrierung
   in .cc-viewport noch das overflow:auto von .cc-dialog es beschneiden. Das Icon liegt
   als Geschwister VOR .cc-dialog, ausserhalb von dessen Clipping-/Scroll-Box. ===== */
.cc-shell{position:relative;width:100%;max-width:540px;overflow:visible;
  padding-top:var(--cc-shell-pad)}

.cc-dialog{position:relative;width:100%;z-index:1;
  background:linear-gradient(165deg,rgba(var(--hoch-rgb),0.94) 0%,rgba(var(--grund-rgb),0.97) 100%);
  border:1px solid var(--border-accent);border-radius:22px;
  padding:52px 40px 36px;
  box-shadow:0 40px 90px -24px rgba(var(--schatten-rgb),.65),0 0 0 1px rgba(var(--waesche-rgb),.03),0 0 70px -18px var(--accent-glow);
  opacity:0;transform:translateY(22px) scale(.98);
  transition:opacity .42s var(--ease-out,cubic-bezier(.23,1,.32,1)),transform .42s var(--ease-out,cubic-bezier(.23,1,.32,1)),border-color .3s ease;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  max-height:calc(100dvh - 40px - var(--cc-shell-pad));overflow-y:auto}
.cookie-consent.cc-open .cc-dialog{opacity:1;transform:translateY(0) scale(1)}
.cc-dialog:focus{outline:none}
.cc-dialog:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ===== Icon: liegt VOLLSTAENDIG innerhalb der von .cc-shell reservierten Flaeche
   (top:0 = oberste Kante der Shell selbst, keine negative Verschiebung nach oben -
   dadurch kennt die Flexbox-Zentrierung in .cc-viewport die tatsaechliche Gesamthoehe
   und das Icon kann nie ueber den sichtbaren Viewport hinausragen). Der Ueberlapp auf
   die obere Dialog-Kante entsteht allein dadurch, dass --cc-shell-pad kleiner ist als
   --cc-icon-size (Dialog beginnt, bevor das Icon endet).
   .cc-icon uebernimmt NUR die Positionierung (nie animiert) - .cc-icon-visual
   NUR die Eintritts-Animation (Opacity/Scale). So ueberschreiben sich Positions-
   und Animations-Transform nie gegenseitig. */
.cc-icon{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:var(--cc-icon-size);height:var(--cc-icon-size);z-index:2;pointer-events:none}
.cc-icon-visual{display:block;width:100%;height:100%;opacity:0;transform:scale(.92);
  transition:opacity .4s ease .1s,transform .4s var(--ease-out,cubic-bezier(.23,1,.32,1)) .1s}
.cookie-consent.cc-open .cc-icon-visual{opacity:1;transform:scale(1)}
.cc-icon-visual svg{display:block;width:100%;height:100%}
.cc-icon-pulse{animation:cc-pulse 3.6s ease-in-out infinite}

@keyframes cc-pulse{
  0%,100%{opacity:.16;transform:scale(1)}
  50%{opacity:.32;transform:scale(1.045)}
}

/* ===== Inhalt ===== */
.cc-panes{position:relative}
.cc-pane{opacity:1;transform:translateX(0);transition:opacity .22s var(--ease-out,cubic-bezier(.23,1,.32,1)),transform .22s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.cc-pane[hidden]{display:none}
.cc-panes.cc-switching-fwd .cc-pane-main{opacity:0;transform:translateX(-14px)}
.cc-panes.cc-switching-fwd .cc-pane-settings{opacity:0;transform:translateX(14px)}
.cc-panes.cc-switching-back .cc-pane-settings{opacity:0;transform:translateX(14px)}
.cc-panes.cc-switching-back .cc-pane-main{opacity:0;transform:translateX(-14px)}

.cc-overline{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);text-align:center;margin-bottom:14px}
.cc-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.375rem,3vw,1.625rem);line-height:1.2;letter-spacing:-.01em;color:var(--text-1);text-align:center;margin-bottom:14px}
.cc-text{font-size:.9375rem;line-height:1.65;color:var(--text-2);text-align:center;margin-bottom:28px}

.cc-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}

.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:50px;padding:14px 24px;border-radius:100px;border:none;cursor:pointer;
  font-family:var(--font-display);font-size:.9375rem;font-weight:600;
  transition:background .2s,color .2s,border-color .2s,transform .16s var(--ease-out,cubic-bezier(.23,1,.32,1)),box-shadow .25s ease}
.cc-btn:active{transform:scale(.98)}
.cc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.cc-btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -10px rgba(0,201,167,.45)}
.cc-btn-primary:hover{background:var(--accent-hell);transform:translateY(-1px);box-shadow:0 14px 36px -10px rgba(0,201,167,.6)}

.cc-btn-outline{background:transparent;color:var(--text-1);border:1px solid var(--border)}
.cc-btn-outline:hover{border-color:var(--accent-text);color:var(--accent-text);background:var(--accent-dim)}

.cc-settings-link{display:block;width:100%;text-align:center;background:none;border:none;cursor:pointer;
  margin-top:18px;padding:10px;font-family:var(--font-body);font-size:.875rem;font-weight:500;
  color:var(--text-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:color .2s,text-decoration-color .2s}
.cc-settings-link:hover{color:var(--accent-text);text-decoration-color:var(--accent-text)}
.cc-settings-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.cc-privacy-link{text-align:center;margin-top:16px}
.cc-privacy-link a{font-size:.8125rem;color:var(--text-3);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.cc-privacy-link a:hover{color:var(--accent-text);text-decoration-color:var(--accent-text)}
.cc-privacy-link a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ===== Einstellungen-Ansicht ===== */
.cc-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  color:var(--text-2);font-family:var(--font-body);font-size:.8125rem;font-weight:500;padding:6px 4px;margin-bottom:18px;
  transition:color .2s}
.cc-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.cc-back:hover{color:var(--accent-text)}
.cc-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.cc-categories{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:24px}
.cc-category{padding:18px 20px;border-bottom:1px solid var(--border)}
.cc-category:last-child{border-bottom:none}
.cc-category-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.cc-category-name{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--text-1)}
.cc-lock-icon{width:14px;height:14px;stroke:var(--text-3);fill:none;stroke-width:1.6;flex:0 0 auto}
.cc-locked-badge{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
  background:var(--surface-up);border:1px solid var(--border);border-radius:100px;padding:4px 10px;white-space:nowrap}
.cc-category-desc{font-size:.8125rem;line-height:1.6;color:var(--text-2)}

/* Toggle */
.cc-toggle{position:relative;width:44px;height:26px;border-radius:100px;border:1px solid var(--border);
  background:var(--surface-up);cursor:pointer;flex:0 0 auto;padding:0;transition:background .22s ease,border-color .22s ease}
.cc-toggle-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text-3);
  transition:transform .22s var(--ease-out,cubic-bezier(.23,1,.32,1)),background .22s ease}
.cc-toggle[aria-checked="true"]{background:var(--accent);border-color:var(--accent-text)}
.cc-toggle[aria-checked="true"] .cc-toggle-knob{transform:translateX(18px);background:var(--accent-ink)}
.cc-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.cc-actions-settings{margin-top:4px}

/* ===== Responsive ===== */
@media(max-width:560px){
  .cookie-consent{--cc-icon-size:72px}
  .cc-dialog{padding:46px 22px 28px;border-radius:20px}
  .cc-title{font-size:1.25rem}
}
@media(max-height:700px){
  .cookie-consent{--cc-icon-size:68px}
  .cc-dialog{padding-top:42px}
  .cc-text{margin-bottom:20px}
}

/* ===== prefers-reduced-motion ===== */
@media(prefers-reduced-motion:reduce){
  .cc-backdrop,.cc-dialog,.cc-icon-visual,.cc-pane,.cc-btn,.cc-toggle,.cc-toggle-knob{transition:none!important}
  .cc-icon-pulse{animation:none!important}
  .cookie-consent.cc-open .cc-dialog{transform:none}
  .cc-icon-visual{transform:none!important}
}

/* ===== Footer-Link (dezent, blendet sich in bestehende Footer-Stile ein) ===== */
button.cc-footer-link{background:none;border:none;padding:0;margin:0;font:inherit;cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px}

/* assets/css/theme.css */
/* =========================================================================
   Zero One IT - Themenwerte fuer Dunkel und Hell
   =========================================================================
   Diese Datei haelt ALLE farblichen Stellschrauben beider Themen an einem
   Ort. Die Seiten bringen ihren eigenen :root-Block mit den bekannten
   Dunkelwerten mit; der bleibt unangetastet. Hier stehen zwei Dinge:

   1. Die zusaetzlichen Grundtoene, die es vorher nur hartkodiert gab
      (Schatten, Schleier, Waesche, Warnfarben). Sie stehen auf :root mit
      genau den Werten, die bisher im Stylesheet standen - das Dunkelbild
      aendert sich dadurch um kein Pixel.
   2. Der komplette Hellsatz auf :root[data-theme="light"]. Das
      Attributselektor-Gewicht (0,2,0) liegt ueber dem blanken :root (0,1,0),
      deshalb gewinnt Hell unabhaengig davon, in welcher Reihenfolge die
      Seite ihre Stylesheets laedt.

   Grundsatz bei den Alphawerten: statt jeden einzelnen rgba-Aufruf zu
   verdoppeln, steht nur das Farbtripel in einer Variablen. Die Deckkraft
   bleibt an der Fundstelle. Aus
       rgba(9,13,24,.46)
   wird
       rgba(var(--grund-rgb),.46)
   und beide Themen behalten ihre eigene Abstufung, ohne dass irgendeine
   Komponente doppelt gepflegt werden muss.
   ========================================================================= */

:root{
  /* --- Grundtoene als Tripel, damit die Deckkraft an der Fundstelle bleibt --- */
  --grund-rgb:9,13,24;          /* Seitengrund; traegt Schleier und Textschatten */
  --flaeche-rgb:16,23,42;       /* --surface als Tripel */
  --hoch-rgb:26,36,56;          /* --surface-up als Tripel */
  --schatten-rgb:0,0,0;         /* Schlagschatten */
  --waesche-rgb:240,245,255;    /* feine Aufhellungen und Haarlinien auf dunklem Grund */
  --akzent-rgb:0,201,167;       /* identisch in beiden Themen, nur hier zentral */

  /* --- Abgeleitete Flaechen --- */
  --bg-tief:#070B14;            /* tiefer als --bg, fuer Verlaufsenden */
  --bg-tief-2:#0B1120;
  --schleier:rgba(3,7,14,.78);  /* Hintergrund hinter Dialogen */
  --schleier-weich:rgba(5,8,16,.7);

  /* --- Akzent in seinen Rollen --- */
  --accent-text:#00C9A7;        /* Akzent als Schriftfarbe */
  --accent-hell:#00E4C0;        /* aufgehellter Akzent, Hover und Verlaufsspitzen */
  --accent-ink:#00261F;         /* Schrift auf gefuellter Akzentflaeche */
  --accent-ink-2:#003328;

  /* --- Neutrale Zwischentoene --- */
  --gedaempft:#3D4F6A;          /* sehr zurueckgenommene Linien und Ziffern */
  --keks-scheibe:#141C30;       /* Traegerkreis des Keks-Symbols im Consent-Dialog */

  /* --- Signalfarben --- */
  --warn:#FFA94D;
  --warn-rgb:255,169,77;
  --fehler:#FF6B6B;
  --fehler-hell:#FF8B8B;
  --fehler-zart:#FFC9C9;
  --fehler-rand:#5C2B2B;
  --fehler-rgb:255,107,107;
  --fehler-hell-rgb:255,139,139;

  /* --- Bewegung des Schalters --- */
  --thema-kurve:cubic-bezier(.4,.16,.2,1);
  color-scheme:dark;
}

/* =========================================================================
   HELL - eigenstaendiges Zero One IT Tagbild
   =========================================================================
   Kein Weiss auf Schwarz umgedreht. Der Grund ist ein kuehles Off-White mit
   leichtem Blaustich, die Flaechen heben sich nach oben hin auf, bis Weiss.
   Der Akzent bleibt Teal - nur eine Spur tiefer, weil #00C9A7 auf hellem
   Grund als Schrift nur auf 2,9:1 kommt. Ueberschriften und Fliesstext
   sitzen im Marken-Navy.

   Kontraste (WCAG, auf --bg gemessen):
     --text-1  #0B1426 auf #EEF1F7 = 16,8:1
     --text-2  #53658A auf #EEF1F7 =  5,0:1
     --text-3  #59698A auf #EEF1F7 =  4,9:1
     --accent-text #00786A auf #EEF1F7 = 4,7:1
   ========================================================================= */

:root[data-theme="light"]{
  color-scheme:light;

  --bg:#EEF1F7;
  --surface:#F8FAFD;
  --surface-up:#FFFFFF;
  --accent:#00A98F;
  --accent-dim:rgba(0,169,143,0.10);
  --accent-glow:rgba(0,169,143,0.07);
  --text-1:#0B1426;
  --text-2:#53658A;
  --text-3:#59698A;
  --border:#D6DEEB;
  --border-accent:rgba(0,169,143,0.34);

  --grund-rgb:238,241,247;
  --flaeche-rgb:248,250,253;
  --hoch-rgb:255,255,255;
  --schatten-rgb:25,39,66;
  --waesche-rgb:11,20,38;
  --akzent-rgb:0,169,143;

  --bg-tief:#E3E8F1;
  --bg-tief-2:#E8ECF4;
  --schleier:rgba(20,30,52,.42);
  --schleier-weich:rgba(20,30,52,.34);

  --accent-text:#00786A;
  --accent-hell:#00C0A2;
  --accent-ink:#00261F;
  --accent-ink-2:#00261F;

  --gedaempft:#93A1B8;
  --keks-scheibe:#C9D3E3;

  --warn:#A65A00;
  --warn-rgb:166,90,0;
  --fehler:#C02626;
  --fehler-hell:#A81F1F;
  --fehler-zart:#7A1616;
  --fehler-rand:#E9B9B9;
  --fehler-rgb:192,38,38;
  --fehler-hell-rgb:168,31,31;
}

/* Schatten wirken auf hellem Grund schnell schmutzig. Die Deckkraft steht
   an der Fundstelle und laesst sich dort nicht pro Thema aendern - deshalb
   nimmt Hell die Staerke global um gut die Haelfte zurueck. */
:root[data-theme="light"] body{
  --schatten-rgb:25,39,66;
}

/* =========================================================================
   TAG-/NACHT-SCHALTER
   =========================================================================
   Eine Pille mit gleitendem Knopf. Dunkel zeigt sie einen Mond, hell eine
   Sonne. Der Mond entsteht nicht als Bild, sondern als Kreis, aus dem ein
   zweiter Kreis in Spurfarbe eine Sichel schneidet - beim Wechsel faehrt
   dieser Schneidekreis heraus und der Mond wird zur vollen Sonnenscheibe.

   Die Pille ist 56x30. Die Schaltflaeche darum ist 44x44 gross, damit das
   Beruehrungsziel auch am Daumen die uebliche Mindestgroesse hat.
   ========================================================================= */

.thema-schalter{
  --spur-b:56px;
  --spur-h:30px;
  --knopf:22px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--spur-b);
  min-width:var(--spur-b);
  height:44px;
  padding:0;
  background:transparent;
  border:none;
  cursor:pointer;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}

.thema-spur{
  position:relative;
  display:block;
  width:var(--spur-b);
  height:var(--spur-h);
  border-radius:100px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 3px rgba(var(--schatten-rgb),.28);
  transition:background .45s var(--thema-kurve),
             border-color .45s var(--thema-kurve),
             box-shadow .45s var(--thema-kurve);
}

/* Der Akzentring der Vorlage: hier in Teal, und er wird nur bei Hover,
   Fokus und waehrend des Umschaltens sichtbar - im Ruhezustand bleibt der
   Schalter zurueckhaltend. */
.thema-spur::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:100px;
  border:2px solid rgba(var(--akzent-rgb),.55);
  opacity:0;
  transform:scale(.88);
  transition:opacity .3s var(--thema-kurve),transform .3s var(--thema-kurve);
  pointer-events:none;
}
.thema-schalter:hover .thema-spur::after{opacity:.6;transform:scale(1)}
.thema-schalter:focus-visible .thema-spur::after{opacity:1;transform:scale(1)}
.thema-schalter:focus-visible{outline:none}
.thema-schalter:focus-visible .thema-spur{border-color:var(--accent)}

.thema-knopf{
  position:absolute;
  top:50%;
  left:3px;
  width:var(--knopf);
  height:var(--knopf);
  margin-top:calc(var(--knopf) / -2);
  border-radius:50%;
  background:#E7EDFB;
  box-shadow:0 2px 6px rgba(var(--schatten-rgb),.45);
  overflow:hidden;
  transition:transform .55s var(--thema-kurve),
             background .45s var(--thema-kurve),
             box-shadow .45s var(--thema-kurve);
}

/* Der Schneidekreis, der aus der Scheibe eine Sichel macht. */
.thema-knopf::before{
  content:"";
  position:absolute;
  top:-28%;
  right:-32%;
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--surface);
  transition:transform .55s var(--thema-kurve),background .45s var(--thema-kurve);
}

.thema-krater{
  position:absolute;
  border-radius:50%;
  background:rgba(var(--schatten-rgb),.16);
  transition:opacity .3s var(--thema-kurve);
}
.thema-krater-a{width:4px;height:4px;left:22%;top:52%}
.thema-krater-b{width:3px;height:3px;left:44%;top:72%}

/* --- Zustand HELL: Knopf rechts, Sichel weg, Scheibe wird zur Sonne --- */
.thema-schalter[aria-checked="true"] .thema-knopf{
  transform:translateX(calc(var(--spur-b) - var(--knopf) - 6px));
  background:var(--accent);
  box-shadow:0 2px 10px rgba(var(--akzent-rgb),.55),
             0 0 0 4px rgba(var(--akzent-rgb),.16);
}
.thema-schalter[aria-checked="true"] .thema-knopf::before{transform:translate(120%,-120%)}
.thema-schalter[aria-checked="true"] .thema-krater{opacity:0}
.thema-schalter[aria-checked="true"] .thema-spur{
  background:var(--surface-up);
  border-color:var(--border);
}

/* Die Pille sitzt in der Navigation neben anderen runden Elementen und
   bekommt dort denselben Abstand wie der Intern-Knopf. */
/* Die Rechtsseiten bringen keine eigene .nav-cta-Regel mit. */
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-cta .thema-schalter{margin-right:-2px}
.mobile-nav-top .thema-schalter{margin-right:auto}

@media(prefers-reduced-motion:reduce){
  .thema-spur,.thema-spur::after,.thema-knopf,.thema-knopf::before,.thema-krater{
    transition:none !important;
  }
}

/* =========================================================================
   LOGO-PAAR
   =========================================================================
   Der Schriftzug des Logos ist weiss. Auf hellem Grund verschwindet er.
   Deshalb liegt daneben dieselbe Datei mit dem Schriftzug im Marken-Navy -
   Bildzeichen, Form und Teal bleiben unangetastet, es ist die uebliche
   Positiv-/Negativfassung eines Logos. Die Umschaltung laeuft ueber CSS
   und nicht ueber JavaScript: so blitzt beim Laden nichts auf und es
   stimmt auch, wenn kein Skript laeuft.
   ========================================================================= */
/* Die Seiten setzen .logo-img{display:block} in ihrem eigenen Stylesheet,
   und das steht im Dokument NACH dieser Datei. Bei gleichem Gewicht
   gewaenne dort die spaetere Regel und es waeren beide Logos gleichzeitig
   zu sehen. Das vorangestellte :root hebt das Gewicht auf (0,2,0) und
   entscheidet die Sache unabhaengig von der Ladereihenfolge. */
:root .logo-hell{display:none}
:root[data-theme="light"] .logo-dunkel{display:none}
:root[data-theme="light"] .logo-hell{display:block}

/* =========================================================================
   WEICHES SCROLLEN (Lenis)
   =========================================================================
   Die wenigen Regeln, die die Bibliothek braucht. Sie stehen hier statt in
   einer eigenen Datei, damit keine zusaetzliche Anfrage entsteht.

   Wichtig ist die erste: Solange Lenis laeuft, muss das native weiche
   Scrollen des Browsers aus sein. Sonst animieren zwei Mechanismen
   denselben Sprung und es ruckelt. Ohne Lenis - auf dem Telefon und bei
   reduzierter Bewegung - bleibt scroll-behavior:smooth aus dem Seitenkopf
   unveraendert in Kraft.
   ========================================================================= */
html.lenis{scroll-behavior:auto !important}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* assets/css/content-3f9ed4ba183f.css */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#090D18;
  --surface:#10172A;
  --surface-up:#1A2438;
  --accent:#00C9A7;
  --accent-dim:rgba(0,201,167,0.12);
  --accent-glow:rgba(0,201,167,0.06);
  --text-1:#F0F5FF;
  --text-2:#7F90B0;
  --text-3:#7089A8;
  --border:#1E2D3D;
  --border-accent:rgba(0,201,167,0.3);
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --radius:14px;
  --container:1160px;
  --gap:clamp(48px,8vw,96px);
  /* Gemeinsames Bewegungsvokabular: kraeftigere Kurven statt der schwachen CSS-Standards. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
html{font-size:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;scroll-padding-top:88px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--text-1);font-family:var(--font-body);font-size:1rem;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.section{padding:var(--gap) 0}
.mono{font-family:var(--font-mono);font-size:0.6875rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-text)}
/* Scroll-gekoppelte Lesbarkeit: nur an ausgewaehlten Stellen (AI Act, Prozess, Preise),
   nicht ueberall. Ohne JS/IntersectionObserver bleibt der Inhalt voll sichtbar (siehe
   .js-Gate). --fokus kommt von IntersectionObserver-Ratio, kein Scroll-Handler. */
.scroll-fokus{opacity:1}
.js .scroll-fokus{opacity:calc(.64 + var(--fokus,.36) * .36);filter:brightness(calc(.8 + var(--fokus,.36) * .2));transition:opacity .25s linear,filter .25s linear}
/* Zwei bewusste Uebergangsmomente (Hero->Inhalt, AI Act->Netzwerk) statt vieler
   kleiner: eine Grenzlinie zieht sich einmalig ueber die volle Breite, sobald der
   Abschnitt erreicht wird, und bleibt danach als ruhiger Akzent stehen. */
.boundary-draw{position:relative}
.boundary-draw::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 15%,var(--accent) 85%,transparent);transform:scaleX(0);transform-origin:center;opacity:0;pointer-events:none}
.js .boundary-draw::before{transition:transform 1.1s var(--ease-in-out),opacity .4s ease}
.boundary-draw.gezogen::before{transform:scaleX(1);opacity:.6}
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--accent-dim);border:1px solid var(--border-accent);border-radius:100px;padding:5px 14px;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-text);margin-bottom:28px;overflow-wrap:break-word}
.tag::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--accent)}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.1;color:var(--text-1)}
.display{font-size:clamp(3.25rem,7.5vw,6rem);line-height:1.0;font-weight:700;letter-spacing:-0.02em;overflow-wrap:break-word}
.display em{font-style:normal;color:var(--accent-text)}
.section-heading{font-size:clamp(2.75rem,6.2vw,4.75rem);line-height:1.04;letter-spacing:-0.025em;overflow-wrap:break-word;max-width:100%}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:100px;font-family:var(--font-display);font-size:0.9375rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .16s var(--ease-out);border:none}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hell);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text-1);border:1px solid var(--border);padding:13px 28px}
.btn-outline:hover{border-color:var(--accent-text);color:var(--accent-text)}
/* Druckgefuehl: minimale, sofort einsetzende Stauchung bestaetigt den Klick. */
.btn:active{transform:scale(.97)}
.btn svg,.btn-arrow{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}
.btn-primary:hover .btn-arrow{transform:translateX(3px)}
hr.divider{border:none;border-top:1px solid var(--border);margin:0}


/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 clamp(20px,4vw,48px);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(var(--grund-rgb),0.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--border)}
.nav-inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2vw,28px);height:72px}
/* Fortschrittslinie: spiegelt die tatsaechliche Scrollposition, keine Deko-Animation.
   transform statt width, damit nur Compositing noetig ist (kein Layout/Paint pro Frame). */
.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;pointer-events:none}
.nav-progress span{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .1s linear}
.js .nav-progress span{transition:transform .1s linear}
/* min-height 44px: Touch-Zielgroesse. Ohne visuelle Wirkung, da die Leiste 72px hoch ist
   und den Inhalt zentriert; Markup und Verhalten der Navigation bleiben unberuehrt. */
.logo{display:flex;flex:0 0 auto;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-0.01em;color:var(--text-1);min-height:44px}
.logo-mark{width:34px;height:34px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--accent-ink);letter-spacing:0}
/* Das offizielle Logo ist eine gestapelte Marke (Zeichen, Schriftzug, Claim).
   Deshalb steuert immer die HOEHE die Groesse, die Breite folgt dem Original -
   dadurch bleiben die Proportionen in jedem Bereich exakt erhalten und nichts
   wird beschnitten. Der Schriftzug steht im Bild selbst; daneben steht kein
   zweiter. */
.logo-img{display:block;flex:0 0 auto;height:62px;width:auto;max-width:100%;object-fit:contain;
  transition:opacity .25s var(--ease-out),filter .25s var(--ease-out)}
a.logo:hover .logo-img{opacity:.92;filter:drop-shadow(0 0 14px rgba(0,201,167,.3))}
@media(max-width:1199.98px){.logo-img{height:56px}}
@media(max-width:1023.98px){.logo-img{height:54px}}
@media(max-width:560px){.logo-img{height:46px}}
@media(max-width:400px){.logo-img{height:42px}}
@media (prefers-reduced-motion: reduce){.logo-img{transition:none}}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none}
/* min-height 44px: die Desktop-Navigation erscheint ab 1024px und damit auch auf iPads
   im Querformat, also auf reinen Touch-Geraeten. Ohne visuelle Wirkung in der 72px-Leiste. */
.nav-links a{position:relative;font-size:0.875rem;font-weight:500;color:var(--text-2);transition:color .2s;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.nav-links a::after{content:"";position:absolute;left:8px;right:8px;bottom:20px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .25s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.nav-links a:hover{color:var(--text-1)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:16px}

/* ===== KONTAKT-AUFKLAPPMENUE IN DER NAVIGATION =====
   Der Menuepunkt "Kontakt" ist kein Sprunglink mehr, sondern ein Schalter: er
   klappt drei Wege auf - Telefon, E-Mail, Standort. Bildsprache bewusst die des
   Cookie-Dialogs (derselbe Verlauf, derselbe Akzentrahmen, dieselbe weiche
   Tiefe), damit die Seite nur eine Sprache fuer aufgehende Flaechen spricht.

   Der Weg zum Formular bleibt erhalten: er steht als Fusszeile im Feld. Ohne
   ihn waere die Kontaktsektion aus der Navigation nicht mehr erreichbar. */
.nav-kontakt{position:relative}
.nav-kontakt-schalter{cursor:pointer}
.nav-kontakt.ist-offen .nav-kontakt-pfeil{transform:rotate(90deg)}
.nav-kontakt.ist-offen .nav-kontakt-schalter .btn-arrow{transform:rotate(90deg)}

/* Das Feld haengt am Menuepunkt, nicht am Fenster: so wandert es beim
   Umbrechen der Navigation automatisch mit. translateX(-50%) zentriert es
   unter dem Schalter, die Randsicherung weiter unten faengt den Fall ab,
   dass es dabei aus dem Bild laeuft. */
.nav-kontakt-feld{position:absolute;top:calc(100% + 12px);right:0;z-index:60;
  width:min(420px,calc(100vw - 32px));
  background:linear-gradient(165deg,rgba(var(--hoch-rgb),.94) 0%,rgba(var(--grund-rgb),.97) 100%);
  border:1px solid var(--border-accent);border-radius:18px;padding:20px;
  box-shadow:0 40px 90px -24px rgba(var(--schatten-rgb),.65),0 0 0 1px rgba(var(--waesche-rgb),.03),0 0 70px -18px var(--accent-glow);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  opacity:0;transform:translateY(-8px) scale(.98);
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);
  pointer-events:none}
.nav-kontakt-feld[hidden]{display:none}
.nav-kontakt.ist-offen .nav-kontakt-feld{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.nav-kontakt-titel{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-text);text-align:center;margin-bottom:14px}

/* Drei Kreise statt Kacheln, links E-Mail, mittig der Rueckruf, rechts der
   Standort. Der mittlere ist groesser: er traegt den Weg, der am ehesten zum
   Gespraech fuehrt, und die Groesse sagt das ohne ein Wort.
   align-items:center laesst die beiden kleinen auf der Mittelachse des grossen
   sitzen, sonst haengen sie oben. */
.nav-kontakt-kreise{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,26px)}
.nav-kontakt-kreis{display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;min-width:0}
.nav-kontakt-rund{--rund:58px;width:var(--rund);height:var(--rund);border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--border-accent);background:var(--accent-dim);color:var(--accent-text);
  transition:background .25s var(--ease-out),color .25s var(--ease-out),
             border-color .25s var(--ease-out),transform .25s var(--ease-out),
             box-shadow .3s var(--ease-out)}
.nav-kontakt-rund svg{width:calc(var(--rund) * .38);height:calc(var(--rund) * .38);
  stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Der mittlere Kreis ist die Hauptsache: groesser, kraeftigerer Rahmen und eine
   ruhige Tiefe darunter - kein Leuchten, nur Abstand zur Flaeche. */
.nav-kontakt-kreis.ist-gross .nav-kontakt-rund{--rund:78px;border-color:var(--accent-text);
  background:rgba(0,201,167,.18);box-shadow:0 12px 28px -14px rgba(0,201,167,.75)}
.nav-kontakt-kreis:hover .nav-kontakt-rund{background:var(--accent);color:var(--accent-ink);
  border-color:var(--accent-text);transform:translateY(-3px)}
.nav-kontakt-kreis:focus-visible{outline:none}
.nav-kontakt-kreis:focus-visible .nav-kontakt-rund{outline:2px solid var(--accent);outline-offset:4px}
.nav-kontakt-art{font-family:var(--font-display);font-size:.75rem;font-weight:600;
  color:var(--text-2);line-height:1.2;transition:color .25s}
.nav-kontakt-kreis:hover .nav-kontakt-art{color:var(--text-1)}
.nav-kontakt-kreis.ist-gross .nav-kontakt-art{font-size:.8125rem;color:var(--text-1)}

/* Die Verbindungslinie vom Knopf herunter: sie macht sichtbar, dass die Kreise
   zu ihm gehoeren und nicht frei ueber dem Inhalt schweben. Nur in der
   Navigation, im Overlay-Menue stehen die Kreise ohnehin direkt darunter. */
.nav-kontakt-feld::before{content:"";position:absolute;top:-12px;right:96px;
  width:1px;height:12px;background:linear-gradient(180deg,transparent,var(--border-accent))}

/* Unter 640px blendet die Leiste den Knopf aus (bestehende Regel), damit fehlt
   auch der Schalter - dort uebernimmt das Overlay-Menue mit den offenen Kacheln. */

/* In der Mobil-Navigation gibt es keinen Schalter: dort stehen die drei Wege
   offen unter der Liste. Ein Aufklappmenue in einem bereits aufgeklappten
   Overlay waere eine Ebene zu viel, und Platz ist dort ohnehin vorhanden. */
.mobile-kontakt{margin-top:18px}
.mobile-kontakt .nav-kontakt-titel{text-align:left;margin-bottom:10px}
.mobile-kontakt .nav-kontakt-wege{gap:8px}
.mobile-kontakt .nav-kontakt-weg{padding:14px 8px}
@media(max-width:360px){
  .mobile-kontakt .nav-kontakt-art{font-size:.75rem}
  .mobile-kontakt .nav-kontakt-wert{font-size:.625rem}
}

/* ===== SICHTBARER EINSTIEG IN DEN INTERNEN BEREICH =====
   Bewusst als zurueckhaltender Ghost-Link neben dem Haupt-CTA: er ist ein
   Verwaltungsweg, kein Angebot an Besucherinnen und Besucher, und darf dem
   "Gespraech vereinbaren" optisch nie Konkurrenz machen. */
.nav-intern-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 15px;border-radius:100px;border:1px solid var(--border);background:transparent;font-family:var(--font-display);font-size:.8125rem;font-weight:600;color:var(--text-2);white-space:nowrap;transition:border-color .2s,color .2s,background-color .2s}
.nav-intern-link:hover{border-color:var(--border-accent);color:var(--accent-text);background:var(--accent-dim)}
.nav-intern-icon{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6}
/* Zwei Symbole liegen im Markup, sichtbar ist immer genau eines. Das erspart
   das Zusammenbauen von SVG im Skript. */
.nav-intern-person{display:none}
.ist-angemeldet .nav-intern-schloss{display:none}
.ist-angemeldet .nav-intern-person{display:block}
.nav-intern-link.ist-angemeldet{border-color:var(--border-accent);color:var(--accent-text)}
/* Offener Passwortwechsel: auffaellig genug, um erledigt zu werden, ohne die
   Leiste zu dominieren. */
.nav-intern-link.ist-wechsel{border-color:rgba(var(--warn-rgb),.45);color:var(--warn)}
.nav-intern-link.ist-wechsel:hover{border-color:var(--warn);color:var(--warn);background:rgba(var(--warn-rgb),.1)}
@media(max-width:1023.98px){.nav-intern-link{display:none}}
/* Zwischen 1024 und 1200 Pixeln wird die Leiste eng. Dort bleibt nur das
   Symbol stehen; der zugaengliche Name kommt weiterhin aus aria-label. */
@media(min-width:1024px) and (max-width:1199.98px){
  .nav-intern-link{padding:0 12px;gap:0}
  .nav-intern-link .nav-intern-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Nur fuer Screenreader und Suchmaschinen: haelt die Ueberschriftenebene
   vollstaendig, ohne das Layout zu veraendern. Gleiche Technik wie oben. */
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ===== INTERNE ZIELE IM MOBILEN MENUE =====
   Abgesetzt unter der oeffentlichen Navigation, damit klar bleibt: das ist
   Verwaltung, kein Teil des Angebots. */
.mobile-nav-intern{margin-top:22px;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.mobile-intern-link{display:flex;align-items:center;gap:11px;min-height:52px;padding:8px 2px;font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--text-2);transition:color .2s,padding-left .2s}
.mobile-intern-link:hover{color:var(--accent-text);padding-left:8px}
.mobile-intern-link .nav-intern-icon{width:16px;height:16px}
.mobile-intern-link.ist-angemeldet{color:var(--accent-text)}
.mobile-intern-link.ist-wechsel{color:var(--warn)}
.mobile-intern-marke{margin-left:auto;font-family:var(--font-mono);font-size:.5625rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-dim);border:1px solid var(--border-accent);border-radius:100px;padding:2px 8px;line-height:1.6}

/* Interner Menuepunkt "Tarifrechner". Er steht nur im Markup, wenn der Server
   die Sitzung als Rolle "admin" bestaetigt hat, und wird ans Listenende
   gehaengt - so verschiebt sich beim Einfuegen kein vorhandener Punkt.
   Die Kennzeichnung "intern" macht auf einen Blick klar, dass dieser Punkt
   nicht zur oeffentlichen Navigation gehoert. */
.nav-intern{gap:8px}
.nav-intern-marke{font-family:var(--font-mono);font-size:.5625rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-dim);border:1px solid var(--border-accent);border-radius:100px;padding:2px 7px;line-height:1.5}
.mobile-nav-list .nav-intern{justify-content:flex-start;gap:12px}
.mobile-nav-list .nav-intern-marke{font-size:.625rem}
/* Mit dem zusaetzlichen Punkt wird die Leiste zwischen 1024 und 1200 Pixeln
   zu eng und Logo, Menue und Schaltflaeche wuerden umbrechen. Der engere
   Abstand faengt das auf. Die Klasse setzt das Skript nur dann, wenn der
   Punkt tatsaechlich eingefuegt wurde - fuer alle anderen bleibt die Leiste
   unveraendert. */
/* Im angemeldeten Admin-Zustand traegt die Leiste zwei zusaetzliche Elemente:
   den Punkt "Tarifrechner" im Menue und den Einstieg "Konto" neben dem CTA.
   Zusammen sprengen sie die Zeile, deshalb wird sie dann enger gefuehrt.
   Ohne interne Punkte bleibt die Navigation unveraendert - die Klasse setzt
   das Skript nur, wenn es den Tarifrechner tatsaechlich eingefuegt hat. */
@media(min-width:1024px){
  .nav-links.hat-intern{gap:26px}
  .nav-links.hat-intern a{min-width:0}
}
@media(min-width:1024px) and (max-width:1399.98px){
  /* Ab hier reicht der Platz nicht mehr fuer die Kennzeichnung am
     Tarifrechner. Sie entfaellt; im mobilen Menue steht sie unveraendert,
     und der Kontext "intern" ist durch den Konto-Einstieg ohnehin gesetzt. */
  .nav-links.hat-intern .nav-intern-marke{display:none}
}
@media(min-width:1024px) and (max-width:1199.98px){
  /* Engster Punkt der Desktopleiste. 16px reichen aus, damit Logo und CTA
     einzeilig bleiben - die Schriftgroesse der Menuepunkte bleibt dabei
     unveraendert, gekuerzt wird nur der Abstand. */
  .nav-links.hat-intern{gap:16px}
  /* Zusaetzlich etwas Aussenrand zurueckgewinnen, damit die Leiste nicht nur
     technisch passt, sondern auch atmet. Faellt :has() aus, bleibt schlicht
     der bisherige Rand - umbrechen wuerde die Leiste auch dann nicht. */
  nav:has(.nav-links.hat-intern){padding-left:24px;padding-right:24px}
}
@media(min-width:1024px) and (max-width:1120px){.nav-links{gap:20px}}
@media(max-width:1023.98px){.nav-links{display:none}}

/* ===== MOBILE NAV (Overlay, < 1024px) ===== */
.nav-toggle{display:none;width:48px;height:48px;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:1px solid var(--border);border-radius:12px;color:var(--text-1);cursor:pointer;padding:0;appearance:none;-webkit-appearance:none;font:inherit;transition:border-color .2s,color .2s}
.nav-toggle:hover{border-color:var(--accent-text);color:var(--accent-text)}
.nav-toggle-box{position:relative;display:block;width:20px;height:14px}
.nav-toggle-bar{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px}
.nav-toggle-bar:nth-child(1){top:0}
.nav-toggle-bar:nth-child(2){top:6px}
.nav-toggle-bar:nth-child(3){top:12px}
.nav-toggle[aria-expanded="true"]{border-color:var(--accent-text);color:var(--accent-text)}
.mobile-nav-close{border-color:var(--border-accent);color:var(--accent-text)}
.mobile-nav-close .nav-toggle-bar:nth-child(1){top:6px;transform:rotate(45deg)}
.mobile-nav-close .nav-toggle-bar:nth-child(2){opacity:0}
.mobile-nav-close .nav-toggle-bar:nth-child(3){top:6px;transform:rotate(-45deg)}

.mobile-nav{position:fixed;inset:0;z-index:150;background:var(--bg);display:none;opacity:0;pointer-events:none;transition:opacity .28s ease;overflow-y:auto;overscroll-behavior:contain;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));padding-left:calc(clamp(20px,4vw,48px) + env(safe-area-inset-left,0px));padding-right:calc(clamp(20px,4vw,48px) + env(safe-area-inset-right,0px))}
.mobile-nav.is-visible{display:block}
.mobile-nav.is-open{opacity:1;pointer-events:auto}
.mobile-nav-top{display:flex;justify-content:flex-end;align-items:center;height:56px}
/* position/border zuruecksetzen: die globale nav{position:fixed}-Regel gilt sonst auch hier */
.mobile-nav-inner{position:static;border-bottom:none;width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;min-height:calc(100% - 56px);padding:24px 0}
.mobile-nav-list{list-style:none;display:flex;flex-direction:column;margin-bottom:32px}
.mobile-nav-list a{display:flex;align-items:center;min-height:56px;padding:8px 2px;font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--text-1);border-bottom:1px solid var(--border);transition:color .2s,padding-left .2s}
.mobile-nav-list a:hover{color:var(--accent-text);padding-left:10px}
.mobile-nav-cta{width:100%;justify-content:center;min-height:56px}
.mobile-nav-mail{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:24px;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.08em;color:var(--text-2);transition:color .2s}
.mobile-nav-mail:hover{color:var(--accent-text)}
@media(max-width:1023.98px){.nav-toggle{display:inline-flex}}
@media(max-width:639.98px){.nav-cta .btn{display:none}}
@media(min-width:1024px){.mobile-nav,.mobile-nav.is-visible{display:none}}
@media(max-height:560px){.mobile-nav-inner{justify-content:flex-start;padding:8px 0}.mobile-nav-list a{min-height:48px;font-size:1.25rem}.mobile-nav-list{margin-bottom:20px}}


/* Aktiver Menuepunkt. Die Startseite arbeitet ohne aktiven Zustand, weil sie
   nur Sprungmarken hat - sobald es echte Unterseiten gibt, braucht es ihn.
   Ausgezeichnet wird er ueber aria-current, damit Hilfsmittel ihn ebenfalls
   melden und nicht nur die Farbe ihn traegt. */
.nav-links a[aria-current="page"]{color:var(--text-1)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.mobile-nav-list a[aria-current="page"]{color:var(--accent-text)}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--border);padding:64px 0 40px}
/* minmax(0,...) nimmt den Spuren ihren intrinsischen Boden; ohne das halten die
   Linkspalten bei grosser Nutzerschrift ihre laengsten Woerter und sprengen das Raster. */
.footer-grid{display:grid;grid-template-columns:2fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:48px;margin-bottom:64px}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.footer-grid{grid-template-columns:minmax(0,1fr)}}
.footer-brand .logo{margin-bottom:18px}
.footer-brand .logo-img{height:92px}
@media(max-width:900px){.footer-brand .logo-img{height:82px}}
@media(max-width:500px){.footer-brand .logo-img{height:76px}}
.footer-brand p{font-size:0.875rem;color:var(--text-2);line-height:1.6;max-width:280px;margin-bottom:28px;overflow-wrap:break-word}
.footer-socials{display:flex;gap:10px}
.footer-col h6{font-family:var(--font-mono);font-weight:500;font-size:0.625rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:20px}
/* Touch-Zielhoehe 44px; der bisherige 10px-Abstand entfaellt dafuer, sonst waechst die
   Spalte unnoetig. Zeilenabstand dadurch 37.2px -> 44px, keine ueberlappenden Flaechen. */
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0}
.footer-col li a{font-size:0.875rem;color:var(--text-2);transition:color .2s;display:flex;align-items:center;min-height:44px}
.footer-col li a:hover{color:var(--text-1)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:32px;border-top:1px solid var(--border);font-size:0.8125rem;color:var(--text-3);flex-wrap:wrap;gap:16px}
.footer-bottom a{color:var(--text-3);transition:color .2s}
.footer-bottom a:hover{color:var(--text-2)}
.footer-legal{display:flex;gap:24px;flex-wrap:wrap}
.footer-legal a{display:inline-flex;align-items:center;min-height:44px}

/* ===== BACK TO TOP ===== */
/* Safe Area: env() addiert nur auf Geraeten mit Notch/Home-Indikator etwas hinzu; ohne
   Safe Area loest der Fallback zu 0px auf und es bleiben exakt die bisherigen 32px. */
.back-to-top{position:fixed;bottom:calc(32px + env(safe-area-inset-bottom,0px));right:calc(32px + env(safe-area-inset-right,0px));width:44px;height:44px;background:var(--surface);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-2);opacity:0;visibility:hidden;pointer-events:none;transition:all .3s;z-index:50;cursor:pointer;appearance:none;-webkit-appearance:none;font:inherit;padding:0}
.back-to-top.visible{opacity:1;visibility:visible;pointer-events:all}
.back-to-top:hover{border-color:var(--accent-text);color:var(--accent-text)}
.back-to-top svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ===== REVEAL ANIMATION (Progressive Enhancement: nur bei aktivem JS aktiv) ===== */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}



/* ===== REFERENZEN =====
   Baut vollstaendig auf dem bestehenden System auf: Farbwerte, Schriften,
   Radius und Kurven kommen aus :root, die Karte uebernimmt die Flaechen- und
   Randlogik der uebrigen Karten der Website. Neu ist nur das Raster und die
   Aufklappflaeche - beides nach demselben Muster wie Preistafel und
   Referenzfaelle auf der Startseite (Grid-Zeile 0fr -> 1fr). */
.ref-hero{padding:calc(72px + clamp(56px,9vw,104px)) 0 clamp(40px,6vw,64px)}
.ref-hero .container{max-width:var(--container)}
.ref-hero-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.ref-hero-eyebrow::before{content:"";width:32px;height:1px;background:var(--text-3);flex-shrink:0}
.ref-hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2.5rem,min(7vw,9vh),4.75rem);max-width:16ch;overflow-wrap:break-word}
.ref-hero h1 .akzent{color:var(--accent-text)}
.ref-hero-sub{margin-top:clamp(20px,2.6vw,28px);max-width:62ch;color:var(--text-2);
  font-size:1.0625rem;line-height:1.7}

/* Hinweis auf den Aufbauzustand. Er faellt weg, sobald echte Projekte
   eingetragen sind - bis dahin sagt die Seite offen, was sie zeigt. */
.ref-aufbau{display:flex;align-items:flex-start;gap:14px;margin-top:clamp(26px,3vw,34px);
  padding:16px 20px;border:1px dashed var(--border-accent);border-radius:var(--radius);
  background:var(--accent-dim);font-size:.875rem;line-height:1.6;color:var(--text-2);max-width:64ch}
.ref-aufbau svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;stroke:var(--accent);fill:none;stroke-width:1.8}
.ref-aufbau strong{color:var(--text-1);font-weight:600}

/* Raster: drei Spalten am Schreibtisch, zwei auf dem Tablet, eine auf dem
   Telefon. align-items:start, damit eine geoeffnete Karte die Nachbarn nicht
   mitzieht - es sind getrennte Karten, keine zusammenhaengende Tafel. */
.ref-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;
  gap:clamp(18px,2.4vw,28px)}
@media(max-width:1100px){.ref-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.ref-raster{grid-template-columns:minmax(0,1fr)}}

.ref-karte{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  transition:border-color .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .35s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .ref-karte:hover{border-color:var(--border-accent);transform:translateY(-3px);
    box-shadow:0 18px 40px -26px rgba(0,201,167,.5)}
}
.ref-karte.ist-offen{border-color:var(--border-accent)}

/* Bildflaeche mit festem Seitenverhaeltnis: ohne das springt das Raster,
   sobald ein Bild spaeter nachgeladen wird. */
.ref-bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg);
  border-bottom:1px solid var(--border)}
.ref-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.ref-karte:hover .ref-bild img{transform:scale(1.05)}}
/* Logoflaeche. Das Logo wird eingepasst, nicht beschnitten: object-fit:contain
   haelt das Seitenverhaeltnis, width/height:auto verhindern das Strecken auf die
   Kachel. Der Abstand zum Rand gehoert zur Marke - ein Logo, das die Flaeche
   ausfuellt, wirkt gequetscht.
   Beide Logos liegen unveraendert vor: das codn-Zeichen in Rot auf
   durchsichtigem Grund, von Nexcal die offizielle helle Fassung fuer dunkle
   Flaechen. Deshalb braucht keines eine untergelegte Platte, und keines wurde
   umgefaerbt oder nachgebaut. Die Hoehen sind einzeln gesetzt, damit ein hohes
   und ein breites Logo optisch gleich gross wirken. */
.ref-bild-logo{position:absolute;inset:0;display:grid;place-items:center;
  padding:clamp(22px,3vw,34px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%,rgba(0,201,167,.07),transparent 72%),
    linear-gradient(180deg,var(--surface-up),var(--bg))}
.ref-bild-logo img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  transition:transform .5s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.ref-karte:hover .ref-bild-logo img{transform:scale(1.04)}}
/* Die Hoehen stehen bewusst mit .ref-bild-logo davor: sonst gewinnt die
   allgemeine Regel .ref-bild-logo img{max-height:100%} und das hohe
   codn-Zeichen laeuft aus der Kachel heraus. */
.ref-bild-logo img.ref-logo-codn{max-height:clamp(74px,9vw,104px)}
.ref-bild-logo img.ref-logo-nexcal{max-height:clamp(38px,4.6vw,56px)}
/* Originalfarben der neuen Logos brauchen jeweils einen passenden Hintergrund. */
.ref-bild-logo-csk{background:#f6f8fc}
.ref-bild-logo-energie{background:#10191c}
.ref-bild-logo img.ref-logo-csk{max-width:min(100%,270px);max-height:90px}
.ref-bild-logo img.ref-logo-energie{max-width:min(100%,270px);max-height:120px}


/* Platzhalterflaeche, solange kein Projektbild vorliegt: gezeichnet, kein Bild,
   also kein weiterer Request und nichts, was erst geladen werden muss. */
.ref-bild-platzhalter{position:absolute;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%,rgba(0,201,167,.10),transparent 70%),
    linear-gradient(180deg,var(--surface-up),var(--bg));
  color:var(--accent-text)}
.ref-bild-platzhalter::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,201,167,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,201,167,.06) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 45%,#000,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 75% at 50% 45%,#000,transparent 80%)}
.ref-bild-platzhalter svg{position:relative;width:38px;height:38px;stroke:currentColor;fill:none;stroke-width:1.4;opacity:.8}

.ref-kopf{padding:clamp(20px,2.4vw,26px) clamp(20px,2.4vw,26px) 0;display:flex;flex-direction:column;flex:1 1 auto;min-height:var(--ref-kopf-hoehe,0px)}
.ref-kategorie{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);background:var(--accent-dim);border:1px solid var(--border-accent);
  border-radius:100px;padding:4px 11px;margin-bottom:14px}
.ref-name{font-family:var(--font-display);font-weight:700;font-size:1.125rem;line-height:1.3;
  color:var(--text-1);margin-bottom:10px;overflow-wrap:break-word}
.ref-kurz{font-size:.875rem;line-height:1.65;color:var(--text-2);overflow-wrap:break-word}
/* Zwei Zeilen Mindesthoehe: sonst sitzt die Hinweiszeile in jeder Karte auf
   einer anderen Hoehe, sobald die Kurztexte unterschiedlich lang sind. */
.ref-kurz{min-height:calc(1.65em * 2)}
.ref-leistungen{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.ref-leistungen span{font-size:.6875rem;line-height:1.4;color:var(--text-2);
  border:1px solid var(--border);border-radius:100px;padding:4px 10px}

/* Hinweiszeile als Schalter - dasselbe Muster wie bei der Preistafel:
   Text statt blossem Pfeil, damit erkennbar bleibt, was dahintersteckt. */
.ref-schalter{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;background:transparent;border:0;border-top:1px solid var(--border);
  margin-left:0;margin-right:0;padding:16px 0;cursor:pointer;
  font-family:var(--font-mono);font-size:.6875rem;line-height:1.4;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);text-align:left;
  transition:color .25s ease,border-color .25s ease}
.ref-kopf{padding-bottom:0}
.ref-schalter:hover{color:var(--text-1);border-color:var(--border-accent)}
.ref-schalter:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:6px}
.ref-schalter .zu{display:inline}
.ref-schalter .auf{display:none}
.ref-karte.ist-offen .ref-schalter .zu{display:none}
.ref-karte.ist-offen .ref-schalter .auf{display:inline}
.ref-chevron{width:26px;height:26px;flex-shrink:0;border:1px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--text-3);
  transition:background .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out)}
.ref-chevron svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;
  transition:transform .3s var(--ease-out)}
.ref-schalter:hover .ref-chevron{border-color:var(--border-accent);color:var(--accent-text)}
.ref-karte.ist-offen .ref-chevron{background:var(--accent);border-color:var(--accent-text);color:var(--accent-ink)}
.ref-karte.ist-offen .ref-chevron svg{transform:rotate(180deg)}

/* Aufklappflaeche: Grid-Zeile 0fr -> 1fr, damit die Hoehe der tatsaechlichen
   Inhaltsmenge folgt statt einem geratenen max-height-Deckel. Ohne JavaScript
   (kein .js am <html>) bleibt alles offen - die Angaben duerfen nicht hinter
   einem Schalter verschwinden, den es dann nicht gibt. */
.ref-detail{display:grid;grid-template-rows:1fr;overflow:hidden}
.js .ref-detail{grid-template-rows:0fr;transition:grid-template-rows .44s var(--ease-out)}
.js .ref-karte.ist-offen .ref-detail{grid-template-rows:1fr}
.ref-detail-inner{min-height:0;overflow:hidden;padding:0 clamp(20px,2.4vw,26px)}
.js .ref-detail-inner{opacity:0;transform:translateY(8px);
  transition:opacity .28s ease,transform .34s var(--ease-out)}
.js .ref-karte.ist-offen .ref-detail-inner{opacity:1;transform:none;
  transition:opacity .28s ease .1s,transform .34s var(--ease-out) .1s}
.ref-detail dl{display:flex;flex-direction:column;gap:14px;padding:20px 0 24px;margin:0}
.ref-detail dt{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.ref-detail dd{margin:0;font-size:.875rem;line-height:1.65;color:var(--text-2);overflow-wrap:break-word}
.ref-detail dd ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.ref-detail dd li{position:relative;padding-left:16px}
.ref-detail dd li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent)}
.ref-detail .ref-extern{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-family:var(--font-display);font-size:.8125rem;font-weight:600;color:var(--accent-text)}
.ref-detail .ref-extern svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.ref-detail .ref-extern:hover{color:var(--accent-hell)}
/* Externe Verweise werden ausdruecklich als solche benannt - nicht nur ueber
   das Pfeilsymbol, das Screenreader nicht vorlesen. */
.ref-extern-hinweis{font-family:var(--font-body);font-size:.75rem;font-weight:400;color:var(--text-3)}

/* Abschluss: derselbe Handlungsaufruf wie auf der Startseite. */
.ref-schluss{margin-top:clamp(48px,6vw,72px);padding:clamp(28px,3.4vw,40px);
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,36px);flex-wrap:wrap}
.ref-schluss h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.375rem,2.6vw,1.75rem);
  line-height:1.25;margin-bottom:8px;overflow-wrap:break-word}
.ref-schluss p{color:var(--text-2);font-size:.9375rem;line-height:1.6;max-width:52ch}
@media(max-width:620px){.ref-schluss{flex-direction:column;align-items:stretch}.ref-schluss .btn{justify-content:center}}

@media(max-width:560px){
  .ref-hero h1{font-size:clamp(2rem,9vw,2.75rem);max-width:none}
  .ref-hero-sub{font-size:.9375rem}
  .ref-kurz{min-height:0}
}

/* ===== ACCESSIBILITY: Skip-Link, Fokus-Sichtbarkeit, Reduced Motion ===== */
.skip-link{position:fixed;left:16px;top:-80px;z-index:1000;background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-weight:600;font-size:0.875rem;padding:12px 20px;border-radius:0 0 12px 12px;transition:top .2s ease}
.skip-link:focus{top:0}
a:focus-visible,button:focus-visible,.btn:focus-visible,.faq-question:focus-visible,.social-link:focus-visible,.back-to-top:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Die FAQ-Buttons fuellen die Liste randlos aus; deren overflow:hidden (fuer den Radius)
   wuerde einen aussen liegenden Fokusring abschneiden. Nach innen bleibt er vollstaendig sichtbar. */
.faq-question:focus-visible{outline-offset:-3px}
.form-group input:focus-visible,.form-group textarea:focus-visible,.form-group select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#main:focus{outline:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ticker-track{animation:none!important;transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
  /* Hero: keine Staffelung, keine Parallaxe - der erste Bildschirm steht sofort. */
  .js .hero-anlauf{opacity:1!important;transform:none!important;animation:none!important}
  .hero-epic-install{transform:none!important}
  .lage-karte:hover{transform:none!important}
  .aiact-lead-pulse{animation:none!important}
  /* AI-Act: alles sofort sichtbar, keine Scanner, keine Impulse, kein Canvas.
     Die Sektion ist damit ohne jede Bewegung vollstaendig verstaendlich - es
     haengt keine Information an einer Animation. */
  .aiact-canvas-halter{display:none}
  .js .ai-anim .aiact-lead,.js .ai-anim .ai-zeile,.js .ai-anim .ai-text{opacity:1!important;transform:none!important;filter:none!important}
  .js .ai-anim.ai-los .ai-zeile:nth-child(3) em{animation:none!important;text-shadow:none!important}
  .js .ai-anim.risk-stack .risk-band{opacity:1!important}
  .js .ai-anim.risk-stack .risk-band::before{--kante-y:1!important}
  .js .risk-stack .risk-band.ist-aktiv::before{animation:none!important;box-shadow:none!important}
  .risk-band::after{display:none!important}
  .js .ai-anim.risk-stack .risk-band-label,.js .ai-anim.risk-stack .risk-band-body{opacity:1!important;transform:none!important}
  .js .ai-anim.aiact-timeline .tl::before{transform:scaleX(1)!important}
  .js .ai-anim.aiact-timeline .tl-dot{opacity:1!important;transform:none!important}
  .tl-puls{display:none!important}
  .risk-band{opacity:1!important}
  .hero-scale .hs-marker-group,.hero-scale .hs-node,.hero-scale .hs-node-main,.hero-scale .hs-link,.hero-scale .hs-bound-outer{opacity:1!important;transform:none!important}
  .hero-scale{transform:none!important}
  .hero-scale .hs-pulse,.hero-scale .hs-sweep{animation:none!important;opacity:0!important}
  .neural-canvas-wrap{position:static;height:auto}
  .neural-canvas{display:none}
  .neural-step{min-height:0;padding:22px 0}
  .neural-content{opacity:1!important;filter:none!important;transform:none!important;max-width:none;background:var(--surface);padding:24px;border-radius:16px;border:1px solid var(--border)}
  .neural-content h3,.neural-content p,.neural-num{text-shadow:none!important}
  .btn-spinner{animation:none!important}
  .done-haken{animation:none!important;stroke-dashoffset:0!important}
}