/* 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/hosting-tarife.css */
/* ============================================================
   ZERO ONE IT — Managed-Hosting-Tarife

   Umschalter Monatlich/Jaehrlich und Preisdarstellung der
   Hosting-Karten. Bewusst nach dem Vorbild der Datenschutz-
   Preistafel gebaut (assets/css/preistafel-karten.css): gleiche
   Bahn, gleicher Schieber, gleiche Marke, gleiche Masse.

   Alle Farben kommen aus theme.css. Kein eigener Farbwert steht
   hier fest verdrahtet, damit Hell und Dunkel ohne Doppelpflege
   funktionieren.
   ============================================================ */

/* ===================================================================
   1. Umschalter
   =================================================================== */

.hosting-schalter{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:0 0 clamp(34px,4.6vw,52px)}
.hosting-schalter[hidden]{display:none}

.hts-fieldset{border:0;padding:0;margin:0;min-width:0}

.hts-bahn{position:relative;display:inline-flex;align-items:stretch;padding:4px;
  background:var(--surface);border:1px solid var(--border);border-radius:100px}

.hts-radio{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

.hts-option{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;min-height:44px;padding:0 22px;border-radius:100px;font-family:var(--font-display);
  font-size:.9375rem;font-weight:600;color:var(--text-2);cursor:pointer;white-space:nowrap;
  transition:color .28s var(--ease-out)}
.hts-option:hover{color:var(--text-1)}
.hts-radio:checked + .hts-option{color:var(--accent-ink)}
.hts-radio:focus-visible + .hts-option{outline:2px solid var(--accent);outline-offset:3px}

/* Breite und Versatz setzt das Skript - auch nach dem Nachladen der
   Schrift, sonst sitzt der Schieber neben der Beschriftung. */
.hts-schieber{position:absolute;top:4px;left:4px;bottom:4px;width:0;border-radius:100px;
  background:var(--accent);
  transition:transform .34s var(--ease-out),width .34s var(--ease-out),box-shadow .5s var(--ease-out)}

/* Der Teal-Glanz beim Wechsel in den Jahresmodus. Kein Dauerpuls:
   Der Schein gehoert zum Zustand, nicht zu einer laufenden Schleife. */
.hosting-schalter.ist-jahr .hts-schieber{
  box-shadow:0 0 0 1px var(--border-accent), 0 0 22px -4px var(--accent)}

.hts-marke{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 9px;border-radius:100px;background:var(--accent-dim);
  border:1px solid var(--border-accent);color:var(--accent-text);
  transition:background .28s,border-color .28s,color .28s}
.hts-radio:checked + .hts-option .hts-marke{
  background:rgba(0,38,31,.14);border-color:rgba(0,38,31,.3);color:var(--accent-ink)}

.hts-notiz{font-size:.8125rem;color:var(--text-3);text-align:center;max-width:58ch;
  line-height:1.6;margin:0}
.hts-notiz b{color:var(--text-2);font-weight:500}

.hts-still{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- Das kurze Spar-Element beim Umschalten ---
   Sitzt in einer Zeile, die dauerhaft Platz belegt. Dadurch
   entsteht beim Ein- und Ausblenden kein Layoutsprung. */
.hts-fanfare-zeile{min-height:26px;display:flex;align-items:center;justify-content:center}
.hts-fanfare{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-text);
  opacity:0;transform:translateY(3px);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out)}
.hts-fanfare.ist-an{opacity:1;transform:translateY(0)}
.hts-fanfare svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.hts-fanfare.ist-an svg{animation:htsFunke .6s var(--ease-out) 1}
@keyframes htsFunke{
  0%{opacity:.3;transform:scale(.7)}
  55%{opacity:1;transform:scale(1.14)}
  100%{opacity:1;transform:scale(1)}}

/* ===================================================================
   2. Preisdarstellung in den Karten
   =================================================================== */

/* Die Zeile unter dem Betrag traegt in beiden Modi Text und behaelt
   ihre Hoehe. Die Spar-Marke ist im Monatsmodus nicht entfernt,
   sondern nur unsichtbar - sonst wuerde die Karte beim Umschalten
   springen. Genau das soll nicht passieren. */
.rate-freq{display:flex;flex-direction:column;gap:5px;min-height:46px;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3)}

.ht-jahrpreis{color:var(--text-2);font-weight:500;
  opacity:0;transition:opacity .3s var(--ease-out)}
.rate-col.ist-jahr .ht-jahrpreis{opacity:1}

.ht-spar{align-self:flex-start;
  font-size:.625rem;padding:3px 9px;border-radius:100px;
  background:var(--accent-dim);border:1px solid var(--border-accent);color:var(--accent-text);
  visibility:hidden;opacity:0;
  transition:opacity .3s var(--ease-out)}
.rate-col.ist-jahr .ht-spar{visibility:visible;opacity:1}

/* --- Der kurze Zahlenwechsel ---
   Nur waehrend der Klasse ht-wechsel, danach wieder still. */
.ht-wechsel .rate-betrag{animation:htWechsel .38s var(--ease-out) 1}
@keyframes htWechsel{
  0%{opacity:.35;transform:translateY(-3px) scale(.965)}
  60%{opacity:1;transform:translateY(0) scale(1.012)}
  100%{opacity:1;transform:translateY(0) scale(1)}}

/* Dezenter Teal-Rand an der Tafel, solange der Jahresmodus laeuft. */
#hostingRate.ist-jahr .rate-col.featured{border-color:var(--border-accent)}

/* Die Grundregel reserviert drei Zeilen Beschreibung. Business
   Enterprise braucht vier - ohne diese Anhebung saessen Preis,
   Hinweiszeile und Schaltflaeche dieser Karte 22 px tiefer als bei
   den beiden anderen. Gilt nur, solange die Karten nebeneinander
   stehen; gestapelt gibt es nichts auszurichten. */
@media (min-width:901px){
  #hostingRate .rate-desc{min-height:calc(1.7em * 4)}
}

/* Die Enterprise-Schaltflaeche ist bewusst ein Link statt eines
   Knopfes - sie fuehrt ins Kontaktformular und loest keine Buchung
   aus. Als <a> erbt sie allerdings die Zeilenhoehe des Fliesstextes
   und stuende dadurch 6 px hoeher und 6 px zu hoch. Diese Regel gleicht
   sie exakt an die beiden Knoepfe daneben an. */
#hostingRate .rate-col > a.btn{line-height:normal;margin-top:6px}

/* ===================================================================
   3. Schmale Fenster
   =================================================================== */

@media (max-width:460px){
  .hts-option{padding:0 14px;font-size:.875rem;gap:6px}
  .hts-marke{padding:3px 7px;font-size:.5625rem}
  .hts-notiz{font-size:.75rem}
}

/* ===================================================================
   4. Bewegung reduzieren
   Der Zustand bleibt vollstaendig ablesbar - es entfaellt nur die
   Bewegung. Die Spar-Marke und der Jahrespreis bleiben sichtbar.
   =================================================================== */

@media (prefers-reduced-motion: reduce){
  .hts-schieber,.hts-option,.hts-marke,
  .ht-jahrpreis,.ht-spar{transition:none}
  .ht-wechsel .rate-betrag{animation:none}
  .hts-fanfare{transition:none}
  .hts-fanfare.ist-an svg{animation:none}
  .hosting-schalter.ist-jahr .hts-schieber{box-shadow:0 0 0 1px var(--border-accent)}
}

/* assets/css/preis-flip.css */
/* ============================================================
   ZERO ONE IT — Preiskarten mit 3D-Wendung

   Erweitert die beiden bestehenden Preistafeln, ohne ihr Aussehen
   zu ersetzen:
     #pricingRate  Datenschutzpakete (index.html, .preiskarte)
     #hostingRate  Managed Hosting   (webdesign.html, .rate-col)

   Die Karten behalten Farben, Typografie, Abstaende, Rahmen und
   Schaltflaechen. Neu ist ausschliesslich die Bewegung: Die
   Leistungsliste, die bisher aufgeklappt wurde, sitzt jetzt auf der
   Rueckseite.

   Alle Farben kommen aus theme.css. Kein Wert ist hier fest
   verdrahtet, damit Hell und Dunkel weiter ohne Doppelpflege
   funktionieren.

   Die Struktur (pf-buehne / pf-innen / pf-seite) baut
   assets/js/preis-flip.js beim Start aus dem vorhandenen Markup auf -
   die Leistungen stehen also weiterhin im HTML und bleiben dort
   pflegbar.
   ============================================================ */

/* ===================================================================
   1. Buehne und Wendung
   =================================================================== */

.pf-buehne{
  position:relative;
  perspective:1600px;
  /* Die Hoehe setzt das Skript auf das Maximum aus Vorder- und
     Rueckseite. Dadurch aendert sich beim Wenden nichts am Layout. */
}

.pf-innen{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.22,.68,.24,1);
  will-change:transform;
  /* Der Dreher selbst nimmt keine Klicks entgegen. Ohne das kann er
     bei 3D-Transformationen den Treffertest abfangen und Klicks auf
     die Schaltflaeche der Rueckseite schlucken. Die beiden Seiten
     holen sich die Klicks unten ausdruecklich zurueck. */
  pointer-events:none}

.pf-seite{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  /* Verhindert das Durchscheinen der Rueckseitenkanten in Safari. */
  transform:translateZ(0)}

.pf-hinten{transform:rotateY(180deg) translateZ(0)}

/* Das Empfohlen-Schild bleibt direktes Kind der Buehne, damit es sich
   weiter am Kartenrand ausrichtet. Ohne z-index legt sich die
   Vorderseite davor - sie hat durch translateZ(0) einen eigenen
   Stapelkontext. */
.pf-buehne > .pk-schild,
.pf-buehne > .rate-popular{z-index:3}

/* Gewendet wird auf zwei Wegen, die sich nicht in die Quere kommen:
   per Zeigegeraet ueber :hover, per Tastatur, Klick und Tippen ueber
   die Klasse. Beide fuehren zur selben Drehung. */
@media (hover:hover) and (pointer:fine){
  .pf-buehne:hover .pf-innen{transform:rotateY(180deg)}
}
.pf-buehne.ist-gewendet .pf-innen{transform:rotateY(180deg)}

/* Solange die Karte vorne liegt, darf die Rueckseite weder Fokus noch
   Scrollen aufnehmen - sonst springt der Tabulator in unsichtbare
   Inhalte. Das Skript setzt zusaetzlich inert/aria-hidden. */
/* Die jeweils sichtbare Seite holt sich die Klicks zurueck, die
   .pf-innen abgegeben hat. Die verdeckte bleibt aussen vor. */
.pf-vorn{pointer-events:auto}
.pf-buehne:not(.ist-gewendet) .pf-hinten{pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .pf-buehne:hover .pf-hinten{pointer-events:auto}
  .pf-buehne:hover .pf-vorn{pointer-events:none}
}
.pf-buehne.ist-gewendet .pf-hinten{pointer-events:auto}
.pf-buehne.ist-gewendet .pf-vorn{pointer-events:none}

/* Das Schild muss ebenfalls wieder anklickbar/sichtbar bleiben. */
.pf-buehne > .pk-schild,
.pf-buehne > .rate-popular{pointer-events:none}

/* ===================================================================
   2. Tiefe auf der Vorderseite
   Sehr zurueckhaltend: ein Hauch Schatten, ein Hauch Staffelung.
   Lesbarkeit geht vor Effekt.
   =================================================================== */

.pf-buehne .pk-name,
.pf-buehne .rate-name{
  text-shadow:0 1px 0 rgba(var(--schatten-rgb),.45),
              0 2px 10px rgba(var(--schatten-rgb),.28);
  transform:translateZ(14px)}

.pf-buehne .pk-preis,
.pf-buehne .rate-amount{
  text-shadow:0 1px 0 rgba(var(--schatten-rgb),.5),
              0 3px 18px rgba(var(--schatten-rgb),.34);
  transform:translateZ(26px)}

.pf-buehne .pk-text,
.pf-buehne .rate-desc{transform:translateZ(8px)}

/* Der Lichtverlauf ueber der Oberflaeche. Liegt still, bis der Zeiger
   kommt, und wandert dann einmal weich durch - kein Dauerlauf. */
.pf-seite::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg,
    transparent 38%,
    rgba(var(--akzent-rgb),.055) 48%,
    transparent 58%);
  opacity:0;transition:opacity .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .pf-buehne:hover .pf-seite::after{opacity:1}
}

/* Dezenter Teal-Schein am Rand der aktiven Karte. */
.pf-buehne .pf-seite{
  transition:box-shadow .5s var(--ease-out),border-color .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .pf-buehne:hover .pf-seite{
    box-shadow:0 0 0 1px var(--border-accent),
               0 26px 64px -34px rgba(var(--schatten-rgb),.7)}
}
.pf-buehne.ist-gewendet .pf-seite{
  box-shadow:0 0 0 1px var(--border-accent),
             0 26px 64px -34px rgba(var(--schatten-rgb),.7)}

/* ===================================================================
   3. Rueckseite
   =================================================================== */

.pf-hinten{
  background:var(--surface-up,var(--surface));
  border:1px solid var(--border);
  border-radius:inherit;
  padding:clamp(22px,2.6vw,30px);
  gap:14px;
  overflow:hidden}

.pf-hinten-kopf{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex:0 0 auto;
  padding-bottom:12px;border-bottom:1px solid var(--border)}

.pf-hinten-name{
  font-family:var(--font-display);font-weight:700;font-size:1.0625rem;
  letter-spacing:-.01em;color:var(--text-1)}

.pf-hinten-preis{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-text);white-space:nowrap}

/* Der Bereich, in den die vorhandene Leistungsliste einzieht.
   Scrollt nur, wenn eine Liste laenger ist als die Karte hoch - die
   Enterprise-Karte mit 15 Punkten ist genau dieser Fall. */
.pf-hinten-inhalt{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.pf-hinten-inhalt::-webkit-scrollbar{width:6px}
.pf-hinten-inhalt::-webkit-scrollbar-thumb{
  background:var(--border);border-radius:100px}

/* Die eingezogenen Listen sollen auf der Rueckseite etwas kompakter
   sitzen als im aufgeklappten Zustand vorher.

   Das !important ist hier noetig und nicht bequem: preistafel-karten.css
   wird NACH dieser Datei geladen und haelt den Koerper mit
   .ptf-aktiv .pk-koerper{grid-template-rows:0fr} zusammengeklappt -
   bei gleicher Spezifitaet gewinnt die spaetere Datei. Auf der
   Rueckseite gibt es kein Aufklappen mehr, der Koerper ist immer
   offen. */
.pf-hinten-inhalt .pk-koerper,
.pf-hinten-inhalt .rate-body{
  display:block !important;
  grid-template-rows:1fr !important;
  overflow:visible !important;
  transition:none !important}
.pf-hinten-inhalt .pk-koerper-innen,
.pf-hinten-inhalt .rate-body-inner{overflow:visible !important}
.pf-hinten-inhalt .pk-koerper-innen,
.pf-hinten-inhalt .rate-body-inner{padding:0}
.pf-hinten-inhalt .pk-liste,
.pf-hinten-inhalt .rate-features{margin-top:0}

/* --- Kompakte Vorschau auf der Rueckseite --- */
.pf-vorschau{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pf-vorschau li{display:flex;align-items:flex-start;gap:9px;
  color:var(--text-2);font-size:.875rem;line-height:1.5}
.pf-vorschau svg{width:15px;height:15px;flex:0 0 15px;margin-top:3px;
  stroke:var(--accent-text);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pf-vorschau-rest{margin:12px 0 0;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3)}

/* Die Listenquelle bleibt im Dokument, wird aber nie angezeigt -
   sie ist die Vorlage fuer das Fenster. */
.pf-quelle{display:none !important}

.pf-hinten-fuss{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:8px;
  padding-top:14px;border-top:1px solid var(--border)}
/* Der CTA ist jetzt der Hauptweg aus der Karte heraus und darf die
   volle Breite nehmen. Die Spezifitaet gleicht die Regeln aus
   hosting-tarife.css aus, die dort einen eigenen Abstand setzen. */
.pf-hinten-fuss > .btn,
#hostingRate .pf-hinten-fuss > a.btn,
#hostingRate .pf-hinten-fuss > button.btn{
  margin-top:0;width:100%;justify-content:center}
.pf-hinten-fuss > .pf-zurueck{align-self:center}

/* Der Weg zurueck. Bewusst schlicht - er ist eine Nebensache. */
.pf-zurueck{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);
  transition:color .2s}
.pf-zurueck:hover{color:var(--accent-text)}
.pf-zurueck svg{width:13px;height:13px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===================================================================
   4. Die Umschaltflaeche
   Liegt als eigener Knopf ueber der Vorderseite. Dadurch ist die
   Wendung mit Tastatur bedienbar, ohne dass die Karte selbst zum
   Knopf wird - die Schaltflaeche darin bleibt eigenstaendig
   erreichbar.
   =================================================================== */

/* Die Vorderseite fuellt die Buehne. Damit die Karte nicht oben
   zusammengedraengt wirkt, wandern Schaltflaeche und Schalter an den
   unteren Rand - der Preis bleibt oben, dazwischen atmet die Karte.
   Die ID-Selektoren sind noetig, weil hosting-tarife.css den Abstand
   der Enterprise-Schaltflaeche bereits mit hoher Spezifitaet setzt. */
.pf-vorn > .pf-schalter{margin-top:auto;align-self:flex-start}

/* Der alte Aufklapp-Hinweis samt Chevron wird durch den Schalter
   abgeloest. Sein display:flex aus der Grundregel wuerde das
   hidden-Attribut sonst uebersteuern - deshalb hier ausdruecklich. */
.pf-buehne .pk-tipp[hidden],
.pf-buehne .rate-hint[hidden]{display:none}

.pf-schalter{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);
  transition:color .22s}
.pf-schalter:hover{color:var(--accent-text)}
.pf-schalter svg{width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s var(--ease-out)}
.pf-schalter:hover svg{transform:rotate(180deg)}

/* Fokus muss auf beiden Seiten deutlich sichtbar sein. */
.pf-buehne :is(button,a,input):focus-visible{
  outline:2px solid var(--accent-text);outline-offset:3px;border-radius:8px}

/* Wird die Karte per Tastatur erreicht, soll sie sich wenden, ohne dass
   der Zeiger beteiligt ist. */
.pf-buehne:focus-within .pf-seite{
  box-shadow:0 0 0 1px var(--border-accent)}

/* ===================================================================
   5. Zeigerlose Geraete
   Ohne echten Hover gibt es nur den Knopf. Die Karte selbst wendet
   sich nicht bei Beruehrung - sonst dreht sie beim Scrollen mit.
   =================================================================== */

@media (hover:none),(pointer:coarse){
  .pf-schalter{color:var(--accent-text)}
  .pf-buehne .pf-seite::after{opacity:0}
}

/* ===================================================================
   6. Bewegung reduzieren
   Statt der Drehung ein einfacher Wechsel. Der Inhalt bleibt
   vollstaendig erreichbar - nur die Raeumlichkeit entfaellt.
   =================================================================== */

@media (prefers-reduced-motion: reduce){
  .pf-innen{transition:none}
  .pf-buehne:hover .pf-innen,
  .pf-buehne.ist-gewendet .pf-innen{transform:none}

  .pf-seite{
    backface-visibility:visible;-webkit-backface-visibility:visible;
    transition:opacity .2s linear}
  .pf-hinten{transform:none;opacity:0;pointer-events:none}
  .pf-vorn{opacity:1}

  .pf-buehne.ist-gewendet .pf-hinten{opacity:1;pointer-events:auto}
  .pf-buehne.ist-gewendet .pf-vorn{opacity:0;pointer-events:none}

  /* Ohne Zeigerbewegung kein Wenden per Hover - sonst flackerte die
     Karte beim blossen Darueberfahren. */
  @media (hover:hover) and (pointer:fine){
    .pf-buehne:hover .pf-hinten{opacity:0;pointer-events:none}
    .pf-buehne:hover .pf-vorn{opacity:1;pointer-events:auto}
    .pf-buehne.ist-gewendet:hover .pf-hinten{opacity:1;pointer-events:auto}
    .pf-buehne.ist-gewendet:hover .pf-vorn{opacity:0;pointer-events:none}
  }

  .pf-buehne .pk-name,.pf-buehne .rate-name,
  .pf-buehne .pk-preis,.pf-buehne .rate-amount,
  .pf-buehne .pk-text,.pf-buehne .rate-desc{transform:none}
  .pf-seite::after{display:none}
  .pf-schalter svg{transition:none}
  .pf-schalter:hover svg{transform:none}
}


/* ===================================================================
   7. Leistungsfenster
   Gleiche Bauart wie die uebrigen Fenster der Website: transparenter
   <dialog>, darin eine eigene Schale mit Rahmen, Radius und Schatten.
   =================================================================== */

/* Der <dialog> selbst spannt die ganze Flaeche auf und zentriert die
   Schale darin. Der naheliegende Weg ueber margin:auto scheitert hier:
   Mit inset:0 und width:auto wird der Dialog so breit wie das Fenster,
   und die schmalere Schale klebt dann am linken Rand. Ein Raster mit
   place-items:center ist der zuverlaessige Weg.
   display gilt bewusst nur fuer [open] - sonst wuerde das Raster die
   Voreinstellung display:none des geschlossenen Dialogs aushebeln und
   das Fenster staende dauerhaft offen. */
.pf-dialog{width:100%;height:100%;max-width:none;max-height:none;
  inset:0;margin:0;padding:0;border:0;
  background:transparent;color:var(--text-1);overflow:visible}
.pf-dialog[open]{display:grid;place-items:center}
.pf-dialog::backdrop{background:var(--schleier);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.pf-dialog-schale{
  position:relative;
  width:min(620px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(26px,4vw,40px);
  border:1px solid var(--border-accent);border-radius:20px;
  background:var(--surface);
  box-shadow:0 28px 100px rgba(var(--schatten-rgb),.5)}

.pf-dialog-zu{position:absolute;top:16px;right:16px;
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--border);border-radius:12px;
  background:var(--bg);color:var(--text-2);
  font:400 1.5rem/1 var(--font-body);cursor:pointer;
  transition:border-color .2s,color .2s,transform .16s var(--ease-out)}
.pf-dialog-zu:hover{border-color:var(--accent-text);color:var(--accent-text)}
.pf-dialog-zu:active{transform:scale(.97)}
.pf-dialog-zu:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}

.pf-dialog-kopf{margin:0 56px 22px 0;padding-bottom:18px;
  border-bottom:1px solid var(--border)}
.pf-dialog-name{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,3vw,1.625rem);letter-spacing:-.02em;
  color:var(--text-1);margin:0}
.pf-dialog-preis{margin:8px 0 0;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-text)}

/* Der eingezogene Koerper darf hier vollstaendig aufklappen. */
.pf-dialog-inhalt .pk-koerper,
.pf-dialog-inhalt .rate-body{
  display:block !important;grid-template-rows:1fr !important;
  overflow:visible !important;transition:none !important}
/* Und der Inhalt darin muss auch sichtbar sein. Die Karte blendet ihn
   beim Aufklappen ein (opacity 0 -> 1, 8px von unten); im Fenster gibt es
   kein Aufklappen, auf das dieser Uebergang warten koennte - ohne die
   naechsten beiden Zeilen stuende die Liste vollstaendig da, nur eben auf
   opacity:0. Genau das war der Fall: Ueberschrift und Preis sichtbar,
   darunter leer.

   Das !important ist noetig, nicht bequem. Die Gegenregeln stehen im
   Seitenkopf (.js .rate-body-inner in webdesign.html,
   .ptf-aktiv .pk-koerper-innen in preistafel-karten.css) und haben mit
   0,2,0 dasselbe Gewicht wie der Selektor hier. Der Seitenkopf wird nach
   dieser Datei geladen und gewaenne den Gleichstand. */
.pf-dialog-inhalt .pk-koerper-innen,
.pf-dialog-inhalt .rate-body-inner{
  padding:0;overflow:visible !important;
  opacity:1 !important;transform:none !important;transition:none !important}
.pf-dialog-inhalt .pk-liste,
.pf-dialog-inhalt .rate-features{margin-top:0}
.pf-dialog-inhalt .pk-koerper-innen>:last-child{margin-bottom:0}

@media (prefers-reduced-motion: reduce){
  .pf-dialog-zu{transition:none}
  .pf-dialog-zu:active{transform:none}
}

/* assets/css/content-f3c9b1f9d229.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}
}

/* ===== 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}}

/* ===== HERO =====
   Vollflaechige Installation statt Zweispalte mit kleiner Grafik daneben: die
   Kopfzeile wird selbst zum architektonischen Element, die Anlage traegt den
   ganzen ersten Bildschirm statt in einer 420px-Box zu stehen.
   Die Schriftgroesse der Kopfzeile haengt an min(vw,vh): auf flachen Fenstern
   (Notebook, iPad quer) schrumpft sie mit der Hoehe mit, damit Unterzeile,
   Handlungsaufforderung und Vertrauensleiste im ersten Bildschirm bleiben. */
.hero-epic{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-top:72px}
.hero-epic-install{position:absolute;inset:0;width:100%;height:100%}
/* Tiefenraster und ruhiger Lichtkern: reine CSS-Verlaeufe, keine zusaetzliche
   Grafik und kein weiterer Request. Die Maske laesst beides zu den Raendern
   ausklingen - das erzeugt Raum, ohne mit dem Text zu konkurrieren. */
.hero-epic-raster{position:absolute;inset:-8% -8% 10% -8%;pointer-events:none;
  background-image:linear-gradient(rgba(0,201,167,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,167,.05) 1px,transparent 1px);
  background-size:clamp(54px,6vw,92px) clamp(54px,6vw,92px);
  -webkit-mask-image:radial-gradient(ellipse 72% 58% at 64% 26%,#000,rgba(0,0,0,.45) 52%,transparent 80%);
  mask-image:radial-gradient(ellipse 72% 58% at 64% 26%,#000,rgba(0,0,0,.45) 52%,transparent 80%)}
.hero-epic-kern{position:absolute;top:-16%;right:-8%;width:min(820px,88vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(0,201,167,.10),rgba(0,201,167,.035) 44%,transparent 70%)}
/* Verlauf statt harter Kante: der untere Bildschirmbereich, in dem die riesige
   Kopfzeile steht, wird zu reinem --bg, damit der Text immer voll lesbar bleibt -
   der obere Bereich zeigt die Anlage klar. */
.hero-epic-scrim{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,rgba(var(--grund-rgb),.86) 32%,rgba(var(--grund-rgb),.30) 60%,transparent 84%);pointer-events:none}
.hero-epic-inner{position:relative;z-index:2;padding:0 clamp(20px,5vw,64px) clamp(40px,5.4vw,64px)}
.hero-epic-eyebrow{display:flex;align-items:center;gap:10px;row-gap:6px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,30px);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.hero-epic-eyebrow strong{color:var(--accent-text);font-weight:500}
.hero-epic-eyebrow .hero-line{width:32px;height:1px;background:var(--text-3);flex-shrink:0}
.hero-epic-title{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:.9;max-width:1500px;overflow-wrap:break-word}
.hero-epic-title .zeile{display:block;font-size:clamp(3.25rem,min(10vw,13.6vh),9rem)}
.hero-epic-title .zeile.akzent{color:var(--accent-text)}
.hero-epic-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:clamp(28px,3.6vw,44px);max-width:1120px}
.hero-epic-sub{max-width:540px;color:var(--text-2);font-size:1.0625rem;line-height:1.6;overflow-wrap:break-word}
.hero-epic-sub span{color:var(--text-1);font-weight:500}
.hero-epic-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
/* Genau eine Handlung soll dominieren: der primaere Weg ist groesser und traegt
   eine weiche Tiefe, der sekundaere bleibt eine ruhige Flaeche ueber der Anlage. */
.hero-epic-actions .btn-primary{padding:16px 30px;font-size:1rem;box-shadow:0 14px 34px -16px rgba(0,201,167,.6)}
.hero-epic-actions .btn-outline{padding:15px 28px;background:rgba(var(--flaeche-rgb),.55)}
.hero-epic-actions .btn-outline:hover{background:rgba(var(--hoch-rgb),.7)}
/* Vertrauensleiste im ersten Bildschirm: vier nachpruefbare Punkte als Zeile,
   nicht als Kachelreihe - sie stuetzen die Kopfzeile, statt mit ihr zu konkurrieren. */
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:clamp(24px,3vw,34px);padding-top:clamp(18px,2.4vw,24px);border-top:1px solid var(--border);list-style:none}
.hero-proof li{display:flex;align-items:center;gap:9px;font-size:.8125rem;line-height:1.35;color:var(--text-2)}
.hero-proof strong{color:var(--text-1);font-weight:500}
.hero-proof svg{width:16px;height:16px;flex:0 0 auto;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Gestaffelter Aufbau: nur Deckkraft und Transform, damit die Bewegung auf der
   GPU bleibt und kein Layout neu berechnet wird. Ohne JS (kein .js am <html>)
   ist der gesamte Hero sofort und vollstaendig sichtbar. */
.js .hero-anlauf{opacity:0;transform:translate3d(0,18px,0);animation:heroAnlauf .85s var(--ease-out) forwards}
.js .hero-anlauf-1{animation-delay:.05s}
.js .hero-anlauf-2{animation-delay:.13s}
.js .hero-anlauf-3{animation-delay:.21s}
.js .hero-anlauf-4{animation-delay:.30s}
.js .hero-anlauf-5{animation-delay:.40s}
.js .hero-anlauf-6{animation-delay:.50s}
@keyframes heroAnlauf{to{opacity:1;transform:none}}
.hero-social{position:absolute;right:clamp(20px,4vw,48px);top:96px;display:flex;flex-direction:column;gap:12px;align-items:center;z-index:3}
@media(max-width:1180px){.hero-social{display:none}}
.social-link{width:44px;height:44px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:0.875rem;transition:border-color .2s,color .2s,transform .2s var(--ease-out)}
.social-link:hover{border-color:var(--accent-text);color:var(--accent-text);transform:scale(1.1)}
.social-link svg{width:16px;height:16px;fill:currentColor}
.social-divider{width:1px;height:48px;background:var(--border);margin:4px 0}

.hero-ticker{border-top:1px solid var(--border);overflow:hidden;padding:20px 0;position:relative;background:var(--bg)}
.hero-ticker::before,.hero-ticker::after{content:"";position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.hero-ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.hero-ticker::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.ticker-track{display:flex;gap:0;animation:ticker 34s linear infinite;width:max-content}
.ticker-item{display:flex;align-items:center;gap:32px;padding:0 40px;white-space:nowrap;font-family:var(--font-display);font-size:clamp(0.8125rem,1.5vw,0.9375rem);font-weight:500;color:var(--text-2)}
.ticker-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.ticker-label{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-text);padding-right:16px}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Flache Fenster (iPad quer, kleine und mittlere Notebooks): die Kopfzeile
   haengt ohnehin an min(vw,vh), hier wird die Hoehe staerker gewichtet und die
   Abstaende ziehen nach - damit Unterzeile, Knoepfe, Vertrauensleiste und
   Laufband gemeinsam in den ersten Bildschirm passen. */
@media(max-height:840px) and (min-width:721px){
  .hero-epic{padding-top:64px}
  .hero-epic-title .zeile{font-size:clamp(2.75rem,min(9vw,12vh),6.5rem)}
  .hero-epic-inner{padding-bottom:clamp(24px,3vw,36px)}
  .hero-epic-eyebrow{margin-bottom:15px}
  .hero-epic-foot{margin-top:20px}
  .hero-epic-sub{font-size:1rem}
  .hero-proof{margin-top:16px;padding-top:13px;gap:7px 22px}
  .hero-ticker{padding:13px 0}
  .hero-social{display:none}
}
/* Sehr flache Desktop-Fenster (z. B. 900x600): eine weitere Stufe enger,
   damit auch das Laufband noch in den ersten Bildschirm faellt. */
@media(max-height:640px) and (min-width:721px){
  .hero-epic{padding-top:56px}
  .hero-epic-title .zeile{font-size:clamp(2.25rem,min(8vw,11vh),4.5rem)}
  .hero-epic-inner{padding-bottom:18px}
  .hero-epic-eyebrow{margin-bottom:12px}
  .hero-epic-foot{margin-top:16px}
  .hero-proof{margin-top:12px;padding-top:10px}
  .hero-ticker{padding:10px 0}
}
/* Mobil ist der Hero kein verkleinerter Desktop: Unterzeile, Handlungen und
   Vertrauensleiste stehen untereinander, der primaere Weg liegt als volle
   Flaeche im Daumenbereich und bleibt ohne zusaetzliches Scrollen erreichbar. */
@media(max-width:720px){
  .hero-epic{padding-top:56px}
  .hero-epic-raster{background-size:46px 46px;inset:-6% -6% 16% -6%}
  .hero-epic-kern{top:-8%;right:-26%;width:min(560px,124vw)}
  .hero-epic-scrim{background:linear-gradient(0deg,var(--bg) 0%,rgba(var(--grund-rgb),.9) 38%,rgba(var(--grund-rgb),.44) 66%,rgba(var(--grund-rgb),.12) 88%)}
  .hero-epic-inner{padding:0 20px 24px}
  .hero-epic-eyebrow{font-size:.5625rem;letter-spacing:.1em;gap:8px;row-gap:4px;margin-bottom:16px;line-height:1.55}
  .hero-epic-eyebrow .hero-line{width:18px}
  .hero-epic-title .zeile{font-size:clamp(2.125rem,10.2vw,3rem)}
  .hero-epic-foot{flex-direction:column;align-items:stretch;gap:20px;margin-top:20px}
  .hero-epic-sub{max-width:none;font-size:.9375rem;line-height:1.55}
  .hero-epic-actions{flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .hero-epic-actions .btn{width:100%;justify-content:center;min-height:52px;padding:14px 22px;font-size:.9375rem}
  .hero-proof{gap:8px 18px;margin-top:18px;padding-top:14px}
  .hero-proof li{font-size:.75rem;gap:7px}
  .hero-proof svg{width:14px;height:14px}
  .hero-proof-lang{display:none}
  .hero-ticker{padding:13px 0}
  .ticker-item{gap:22px;padding:0 26px}
}
/* Sehr flache Telefone (z. B. iPhone SE): eine Stufe kleiner, damit der
   primaere Knopf ohne Scrollen sichtbar bleibt. */
@media(max-width:720px) and (max-height:700px){
  .hero-epic-title .zeile{font-size:clamp(1.875rem,8.8vw,2.4rem)}
  .hero-epic-sub{font-size:.875rem}
  .hero-epic-foot{margin-top:16px;gap:16px}
  .hero-proof{margin-top:14px;padding-top:12px}
  .hero-proof li:nth-child(n+4){display:none}
}

/* ===== AUSGANGSLAGE -> ERGEBNIS =====
   Der Einstieg in den Verkaufsablauf: erst die Lage, die Unternehmen selbst
   kennen, dann das Ergebnis der Zusammenarbeit - bewusst kein Leistungstext. */
.lage-head{max-width:820px;margin-bottom:clamp(36px,5vw,56px)}
.lage-head p{color:var(--text-2);margin-top:20px;font-size:1.0625rem;line-height:1.7}
.lage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.lage-karte{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;overflow:hidden;transition:border-color .25s ease,transform .3s var(--ease-out),background .25s ease}
.lage-karte::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;background:linear-gradient(180deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s ease}
@media(hover:hover) and (pointer:fine){
  .lage-karte:hover{border-color:var(--border-accent);background:var(--surface-up);transform:translateY(-3px)}
  .lage-karte:hover::before{opacity:1}
}
.lage-ist{color:var(--text-2);font-size:.9375rem;line-height:1.65;font-style:italic}
.lage-trenner{display:flex;align-items:center;gap:10px;margin:20px 0;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.lage-trenner::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border-accent),transparent)}
.lage-soll{color:var(--text-1);font-size:1rem;line-height:1.65}
@media(max-width:900px){.lage-grid{grid-template-columns:minmax(0,1fr)}}
/* Auf dem Telefon wuerde die globale Mindestgroesse der Abschnittsueberschrift
   einzelne Woerter in eine eigene Zeile druecken - hier eine Stufe kleiner. */
@media(max-width:560px){.lage-head .section-heading{font-size:clamp(2rem,8.2vw,2.75rem)}.lage-head p{font-size:.9375rem}}

/* ===== AI-ACT-STREIFEN (eigener Abschnitt direkt unter dem Hero, nicht mehr darin) ===== */
.alert-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(100deg,rgba(0,201,167,.05),transparent 60%)}
.ai-alert{display:flex;align-items:center;gap:clamp(14px,2.5vw,22px);padding:clamp(18px,2.8vw,24px) 0;position:relative;overflow:hidden;text-decoration:none;transition:transform .25s var(--ease-out)}
.ai-alert:hover{transform:translateY(-1px)}
.ai-alert-icon{flex-shrink:0;width:42px;height:42px;border-radius:11px;background:var(--accent-dim);border:1px solid var(--border-accent);display:grid;place-items:center}
.ai-alert-icon svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8}
.ai-alert-body{min-width:0}
.ai-alert-title{font-family:var(--font-display);font-weight:700;font-size:clamp(0.9375rem,2.2vw,1.0625rem);color:var(--text-1);line-height:1.3;overflow-wrap:break-word}
.ai-alert-title em{font-style:normal;color:var(--accent-text)}
.ai-alert-text{font-size:clamp(0.8125rem,1.8vw,0.875rem);color:var(--text-2);margin-top:4px;line-height:1.5;overflow-wrap:break-word}
.ai-alert-arrow{flex-shrink:0;width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2;transition:transform .25s var(--ease-out)}
.ai-alert:hover .ai-alert-arrow{transform:translateX(4px)}
@media(max-width:560px){.ai-alert{align-items:flex-start}.ai-alert-arrow{display:none}}

/* ===== SERVICES KONZEPT B =====
   Grosser Index statt Zeilenliste: Namen sind das dominante Element, ein Panel
   zeigt jeweils die Beschreibung des gerade gewaehlten Feldes - "ein Service
   dominiert, waehrend erkundet wird" statt fuenf gleich grosser Zeilen. */
.services-head{max-width:640px;margin-bottom:clamp(40px,6vw,64px)}
.services-head p{color:var(--text-2);font-size:1.0625rem;line-height:1.6;margin-top:20px}
.services-epic{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
@media(max-width:900px){.services-epic{grid-template-columns:minmax(0,1fr);gap:32px}}
.services-index{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.service-idx-btn{all:unset;box-sizing:border-box;cursor:pointer;width:100%;padding:clamp(14px,2.4vw,24px) 4px;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:clamp(14px,2.4vw,24px);font-family:var(--font-display);font-weight:700;font-size:clamp(1.375rem,3.6vw,3rem);letter-spacing:-.01em;color:var(--text-3);line-height:1.1;transition:color .25s var(--ease-out)}
.service-idx-btn .num{font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:var(--text-3);flex-shrink:0;letter-spacing:.05em;padding-bottom:.3em}
.service-idx-btn .lbl{min-width:0;overflow-wrap:break-word;hyphens:auto}
.service-idx-btn:hover{color:var(--text-2)}
.service-idx-btn[aria-expanded="true"]{color:var(--text-1)}
.service-idx-btn[aria-expanded="true"] .num{color:var(--accent-text)}
.services-panel{position:sticky;top:104px;padding:clamp(28px,4vw,44px);background:var(--surface);border-radius:22px;border:1px solid var(--border);min-height:260px}
@media(max-width:900px){.services-panel{position:static}}
.services-panel-icon{width:52px;height:52px;border-radius:13px;background:var(--accent-dim);border:1px solid var(--border-accent);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.services-panel-icon svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.5}
.services-panel p{color:var(--text-2);font-size:1.0625rem;line-height:1.75;overflow-wrap:break-word}
.services-panel-link{margin-top:24px}
.services-panel-link[hidden]{display:none}

/* ===== UEBER MICH & QUALIFIKATIONEN =====
   Zu einem redaktionellen Block zusammengefuehrt statt zwei getrennter umrandeter
   Abschnitte - dasselbe DEKRA-Siegel wurde zuvor auf zwei Abschnitte verteilt erwaehnt.
   Kennzahlen und Qualifikationen stehen jetzt als schlichte, durch Haarlinien getrennte
   Reihen statt als umrandete Kacheln. */
.about{background:var(--surface);border-radius:24px;padding:clamp(48px,7vw,96px)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:clamp(48px,6vw,80px);align-items:start}
@media(max-width:860px){.about-grid{grid-template-columns:minmax(0,1fr);gap:48px}}
.about-text{color:var(--text-2);font-size:1.0625rem;line-height:1.7;margin:24px 0 36px;overflow-wrap:break-word}

.cred-list{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.cred-item{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--border);align-items:flex-start}
@media(max-width:328.98px){.cred-item{flex-direction:column;gap:8px}}
.cred-num{font-family:var(--font-mono);font-size:0.6875rem;color:var(--accent-text);letter-spacing:0.1em;flex-shrink:0;padding-top:3px}
.cred-body{min-width:0}
.cred-body h5{font-size:1rem;font-weight:600;font-family:var(--font-display);margin-bottom:4px;overflow-wrap:break-word}
.cred-body p{font-size:0.8125rem;color:var(--text-2);line-height:1.5;overflow-wrap:break-word}
.cred-badge{margin-top:8px;display:inline-block;background:var(--accent-dim);color:var(--accent-text);border:1px solid var(--border-accent);border-radius:100px;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:0.08em;padding:3px 10px}
/* DEKRA-Siegel: Originalgrafik unveraendert (kein Filter, keine Farbaenderung, kein
   Zuschnitt, kein Radius). max-width 150px bei 300px Quellbreite ergibt bei DPR 2
   exakt 1:1 Geraetepixel, also volle Retina-Schaerfe. */
.cert-seal{margin-top:8px;padding-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cert-seal img{width:100%;max-width:150px;height:auto;display:block}
.cert-seal figcaption{font-size:0.8125rem;line-height:1.55;color:var(--text-2)}
.cert-seal figcaption strong{display:block;color:var(--text-1);font-weight:600;font-family:var(--font-display)}

.stats-rail{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.stat-row{padding:26px 0;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:20px;justify-content:space-between}
.stat-row .number{font-family:var(--font-display);font-size:clamp(2.5rem,5.4vw,4rem);font-weight:700;color:var(--accent-text);line-height:1;letter-spacing:-0.02em;flex-shrink:0}
.stat-row .label{font-size:0.875rem;color:var(--text-2);line-height:1.4;text-align:right;max-width:230px}
@media(max-width:400px){.stat-row{flex-direction:column;align-items:flex-start;gap:6px}.stat-row .label{text-align:left}}

/* ===== PROCESS =====
   Verbundene Ablaufkette statt umrandeter Kartenreihe: vier echte, aufeinander
   folgende Schritte - Nummerierung ist hier inhaltlich begruendet, anders als bei
   den Leistungen. Bewusst anderer Massstab als die AI-Act-Zeitleiste (grosse
   Rundmarken statt Punkte), damit sich beide Abschnitte nicht gleich anfuehlen. */
.process-intro{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:72px}
.process-intro p{max-width:500px;color:var(--text-2);font-size:1.0625rem;line-height:1.6;margin-top:20px}
.process-rail{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:40px 28px}
.process-rail::before{content:"";position:absolute;left:0;right:0;top:23px;height:1px;background:linear-gradient(90deg,var(--border-accent),var(--border) 85%,transparent);z-index:0}
@media(max-width:720px){.process-rail::before{display:none}}
.step{position:relative}
.step-num{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;border:1.5px solid var(--border-accent);background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.375rem;color:var(--accent-text);margin-bottom:28px;transition:border-color .25s,background .25s}
.step:hover .step-num{background:var(--accent-dim)}
.step h4{font-size:clamp(1.5rem,2.6vw,1.875rem);font-weight:700;font-family:var(--font-display);margin-bottom:12px;overflow-wrap:break-word}
.step p{color:var(--text-2);font-size:0.9375rem;line-height:1.6;overflow-wrap:break-word;max-width:34ch}

/* ===== PRICING KONZEPT B =====
   Reine typografische Preistafel statt umrandeter Karten: nur Haarlinien
   trennen die drei Stufen, Premium dominiert allein durch Groesse und Farbe. */
.pricing-intro{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:64px}
.pricing-intro p{max-width:520px;color:var(--text-2);font-size:1.0625rem;line-height:1.6;margin-top:20px}
/* Die Tafel ist bewusst keine Kartenreihe: ein zusammenhaengendes Raster mit
   senkrechten Haarlinien. Deshalb align-items:stretch (statt start wie bei
   getrennten Karten) - nur so laufen die Trennlinien ueber die volle Hoehe
   durch, auch wenn eine Spalte geoeffnet ist und die anderen zwei nicht. */
.pricing-rate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;border-top:1px solid var(--border)}
@media(max-width:900px){.pricing-rate{grid-template-columns:minmax(0,1fr)}}
.rate-col{padding:clamp(32px,4vw,48px) clamp(20px,2.6vw,36px);border-right:1px solid var(--border);display:flex;flex-direction:column;position:relative;min-width:0}
.rate-col:last-child{border-right:none}
@media(max-width:900px){.rate-col{border-right:none;border-bottom:1px solid var(--border)}.rate-col:last-child{border-bottom:none}}
.rate-col.featured{background:linear-gradient(180deg,rgba(0,201,167,.06),transparent 65%)}
/* Das Schild liegt absolut ueber der Kopfzone und nimmt keinen Platz im Fluss
   ein. Im Fluss wuerde es die hervorgehobene Spalte um seine Hoehe nach unten
   schieben, und Punkte, Name und Preis staenden dort tiefer als nebenan.
   Den Platz halten stattdessen alle drei Kopfzonen ueber padding-top frei. */
.rate-popular{position:absolute;top:clamp(32px,4vw,48px);left:clamp(20px,2.6vw,36px);display:inline-flex;background:var(--accent);color:var(--accent-ink-2);border-radius:100px;font-family:var(--font-mono);font-size:0.625rem;font-weight:500;letter-spacing:0.1em;padding:4px 14px}

/* ===== KOPFZONE ALS DISCLOSURE =====
   <button> in einer <h3>: Punkte, Name, Kurztext, Preis und Hinweiszeile sind
   eine einzige Klickflaeche, die Spalte bleibt semantisch Ueberschrift + Button.
   Der Anfragen-Knopf steht ausserhalb - verschachtelte Buttons sind ungueltig.

   Die Kopfzone waechst ausdruecklich NICHT mit (flex:0 0 auto). Mit flex-grow
   wuerde sie die Hoehe schlucken, die das Raster der Spalte gibt, sobald eine
   Nachbarspalte geoeffnet ist: die Hinweiszeile rutschte dann ueber 200 px vom
   Preis weg, und die eigene Aufklappflaeche - overflow:hidden, also
   min-height:auto = 0 - wuerde auf null zusammengedrueckt. Ausgeglichen werden
   die drei Kopfzonen stattdessen ueber Mindesthoehen (Kurztext, Preisfeld,
   Jahreszeile); den Rest der Spaltenhoehe nimmt der Anfragen-Knopf auf. */
.rate-heading{margin:0;display:flex;flex-direction:column;flex:0 0 auto}
.rate-summary{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;width:100%;background:transparent;border:none;text-align:left;font-family:var(--font-body);font-size:1rem;font-weight:400;line-height:1.7;color:var(--text-1);cursor:default;padding:36px 0 0;-webkit-tap-highlight-color:transparent}
.js .rate-summary{cursor:pointer}
.rate-summary:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:8px}
.rate-scope{display:flex;gap:5px;margin-bottom:18px}
.rate-scope span{width:6px;height:6px;border-radius:50%;background:var(--border)}
.rate-scope span.an{background:var(--accent)}
.rate-name{display:block;font-size:1.0625rem;font-weight:700;font-family:var(--font-display);line-height:1.1;margin-bottom:8px;color:var(--text-2);transition:color .25s ease}
.rate-col.featured .rate-name{color:var(--text-1)}
.js .rate-summary:hover .rate-name{color:var(--text-1)}
/* Drei Zeilen Mindesthoehe: der laengste Kurztext (Individual) braucht sie bei
   28ch Zeilenbreite, die beiden anderen kommen mit zwei aus. Ohne die
   Mindesthoehe stuenden die drei Preise auf unterschiedlicher Hoehe. */
.rate-desc{display:block;font-size:0.8125rem;color:var(--text-3);margin-bottom:28px;overflow-wrap:break-word;max-width:28ch;min-height:calc(1.7em * 3)}
/* Das Preisfeld ist so hoch wie der hervorgehobene Preis in zwei Zeilen: Zahl
   plus Zeitangabe. Der Faktor 1.34 ergibt sich aus line-height .92 fuer die
   Zahl und .92 * .42em fuer die Einheit. justify-content:flex-end setzt die
   kleiner gesetzten Nachbarpreise auf dieselbe Unterkante - dadurch beginnt
   die Zeile darunter in allen drei Spalten auf derselben Hoehe. */
.rate-amount{display:flex;flex-direction:column;justify-content:flex-end;font-family:var(--font-display);font-weight:700;color:var(--text-1);line-height:.92;letter-spacing:-.02em;overflow-wrap:break-word;min-height:calc(clamp(3.25rem,6.4vw,5.25rem) * 1.34)}
.rate-betrag{display:block}
.rate-col:not(.featured) .rate-amount{font-size:clamp(2.25rem,4vw,2.75rem)}
.rate-col.featured .rate-amount{font-size:clamp(3.25rem,6.4vw,5.25rem);color:var(--accent-text)}
/* Die Zeitangabe steht auf einer eigenen Zeile. In der hervorgehobenen Spalte
   braucht "590 €/Monat" bei 5.25rem rund 340 px, die Spalte bietet innen aber
   nur etwa 282 px - einzeilig bricht der Browser mitten im Wort um ("/Mon" /
   "at"). Die Zahl kleiner zu setzen waere der falsche Hebel: sie laege dann
   fast auf der Groesse der Nachbarspalten und verloere ihre Betonung. */
.rate-unit{display:block;font-size:.42em;color:var(--text-2);font-weight:400}
.rate-freq{display:block;font-size:0.8125rem;color:var(--text-2);margin:12px 0 28px;min-height:calc(1.7em * 2)}

/* Hinweiszeile: Text statt blossem Pfeil. Auf einer Preisspalte muss im
   geschlossenen Zustand sichtbar bleiben, dass dahinter die Leistungen stecken -
   sonst sucht sie niemand. Die Zahl davor sagt, wie viele es sind.
   margin-top:auto drueckt die Zeile an die Unterkante der Kopfzone. */
.rate-hint{display:none;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:18px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.6875rem;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);transition:color .25s ease,border-color .25s ease}
.js .rate-hint{display:flex}
.rate-hint-zahl{color:var(--accent-text);font-weight:600}
.rate-hint-auf{display:none}
.rate-col.open .rate-hint-zu{display:none}
.rate-col.open .rate-hint-auf{display:inline}
.js .rate-summary:hover .rate-hint{color:var(--text-1);border-color:var(--border-accent)}
.rate-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)}
.rate-chevron svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .3s var(--ease-out)}
.js .rate-summary:hover .rate-chevron{border-color:var(--border-accent);color:var(--accent-text)}
.rate-col.open .rate-chevron{background:var(--accent);border-color:var(--accent-text);color:var(--accent-ink)}
.rate-col.open .rate-chevron svg{transform:rotate(180deg)}

/* Aufklappflaeche: dieselbe Grid-Zeilen-Technik wie FAQ und Referenzfaelle
   (0fr -> 1fr), damit die Hoehe der tatsaechlichen Listenlaenge folgt statt
   einem geratenen max-height-Deckel. Ohne JavaScript (kein .js am <html>)
   bleibt die Liste offen: die Leistungen sind kaufentscheidend und duerfen
   nicht hinter einem Schalter verschwinden, der dann nicht existiert. */
.rate-body{flex:0 0 auto;display:grid;grid-template-rows:1fr;overflow:hidden}
.js .rate-body{grid-template-rows:0fr;transition:grid-template-rows .44s var(--ease-out)}
.js .rate-col.open .rate-body{grid-template-rows:1fr}
.rate-body-inner{min-height:0;overflow:hidden}
.js .rate-body-inner{opacity:0;transform:translateY(8px);transition:opacity .28s ease,transform .34s var(--ease-out)}
.js .rate-col.open .rate-body-inner{opacity:1;transform:none;transition:opacity .28s ease .1s,transform .34s var(--ease-out) .1s}
/* In der Aufklappflaeche der Hosting-Spalten folgen auf die erste Liste noch
   ein zweiter Titel und die Ausschlussliste - deshalb haengt der untere Abstand
   am letzten Element und nicht pauschal an jeder Liste. */
.rate-features{list-style:none;display:flex;flex-direction:column;gap:11px;padding:22px 0 0}
.rate-body-inner>:last-child{margin-bottom:32px}
.rate-listen-titel{margin-top:22px;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.rate-listen-titel:first-child{margin-top:0}
.rate-listen-titel+.rate-features{padding-top:12px}
/* Nicht enthaltene Leistungen: gedaempft und mit kuerzerem, mattem Strich -
   der Unterschied soll ohne Ueberschrift erkennbar sein. */
.rate-features-aus li{color:var(--text-3)}
.rate-features-aus li::before{background:var(--muted,var(--gedaempft))}
.rate-col.featured .rate-features-aus li::before{background:var(--muted,var(--gedaempft))}
.rate-listen-hinweis{margin-top:16px;font-size:.75rem;line-height:1.55;color:var(--text-3)}
.rate-features li{font-size:0.8125rem;color:var(--text-2);line-height:1.5;padding-left:17px;position:relative;overflow-wrap:break-word}
.rate-features li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--text-3)}
.rate-col.featured .rate-features li::before{background:var(--accent)}
/* Der Knopf nimmt die Resthoehe der Spalte auf (margin-top:auto). Dadurch
   stehen die drei Knoepfe immer auf einer Linie - auch wenn nur eine Spalte
   geoeffnet ist und die anderen beiden vom Raster mitgestreckt werden. */
.rate-col>.btn{margin-top:auto}
/* Unter 900 px stehen die Spalten untereinander. Dort gibt es nichts mehr
   auszurichten - die Mindesthoehen waeren nur noch Leerraum, beim Preisfeld
   der nicht hervorgehobenen Pakete rund 55 px. */
@media(max-width:900px){
  .rate-desc,.rate-freq,.rate-jahr,.rate-amount{min-height:0}
}
.rate-col .btn{width:100%;justify-content:center}

/* ===== ABRECHNUNGSUMSCHALTER (monatlich / jaehrlich) =====
   Zwei echte Radiofelder in einem Fieldset: Pfeiltasten wechseln die Auswahl,
   Screenreader melden Gruppe und Zustand von sich aus. Sichtbar ist nur die
   gestaltete Beschriftung; die Felder bleiben fokussierbar im DOM.
   Ohne JavaScript bleibt der Umschalter aus - dann stehen im Markup die
   monatlichen Grundpreise, also genau der Zustand, den er sonst zeigt. */
.billing{display:none;flex-direction:column;align-items:center;gap:16px;margin:-28px 0 44px}
.js .billing{display:flex}
.billing-fieldset{border:0;padding:0;margin:0;min-width:0}
.billing-track{position:relative;display:inline-flex;align-items:stretch;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:100px}
.billing-radio{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.billing-option{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 22px;border-radius:100px;font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--text-2);cursor:pointer;white-space:nowrap;transition:color .28s var(--ease-out)}
.billing-option:hover{color:var(--text-1)}
.billing-radio:checked + .billing-option{color:var(--accent-ink)}
.billing-radio:focus-visible + .billing-option{outline:2px solid var(--accent);outline-offset:3px}
/* Breite und Position kommen aus dem Skript, damit der Schieber exakt unter
   der jeweiligen Beschriftung sitzt - auch wenn beide unterschiedlich breit
   sind oder die Schrift spaeter nachlaedt. */
.billing-thumb{position:absolute;top:4px;left:4px;bottom:4px;width:0;border-radius:100px;background:var(--accent);transition:transform .34s var(--ease-out),width .34s var(--ease-out)}
.billing-badge{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px;background:var(--accent-dim);border:1px solid var(--border-accent);color:var(--accent-text);transition:background .28s,border-color .28s,color .28s}
.billing-radio:checked + .billing-option .billing-badge{background:rgba(0,38,31,.14);border-color:rgba(0,38,31,.3);color:var(--accent-ink)}
.billing-note{font-size:.8125rem;color:var(--text-3);text-align:center;max-width:56ch;line-height:1.6;margin:0}
.billing-note b{color:var(--text-2);font-weight:500}
.billing-still{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:400px){
  .billing-option{padding:0 14px;font-size:.875rem;gap:6px}
  .billing-badge{padding:3px 7px;font-size:.5625rem}
}

/* Jahreszeile unter dem Preis: erscheint nur in der Jahresansicht. */
/* Mindesthoehe fuer drei Zeilen: in der Jahresansicht steht in Basic und
   Premium eine zweizeilige Ersparnis, in Individual ein dreizeiliger Hinweis.
   Ohne die Mindesthoehe saesse die Hinweiszeile dort tiefer als nebenan. */
.rate-jahr{display:block;font-size:.8125rem;line-height:1.55;color:var(--text-2);margin:-18px 0 28px;overflow-wrap:break-word;min-height:calc(1.55em * 3)}
.rate-jahr b{color:var(--accent-text);font-weight:500}
.rate-jahr[hidden]{display:none}
.rate-jahr-hinweis{color:var(--text-3)}

/* ===== MANAGED HOSTING =====
   Eigenstaendige Leistung innerhalb derselben Designsprache. Die Karten sind
   nur hier sinnvoll, weil drei klar vergleichbare Tarife gegenueberstehen. */
.hosting-section{position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(var(--flaeche-rgb),.34),rgba(var(--grund-rgb),0) 44%)}
.hosting-intro{max-width:760px;margin-bottom:clamp(40px,6vw,64px)}
.hosting-intro .section-heading{margin-bottom:20px}
.hosting-intro p{max-width:690px;color:var(--text-2);font-size:1.0625rem;line-height:1.65}
.hosting-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.hosting-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(28px,3.2vw,38px);border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,rgba(var(--hoch-rgb),.7),rgba(var(--flaeche-rgb),.92));box-shadow:0 24px 70px rgba(var(--schatten-rgb),.22);transition:border-color .2s ease,transform .2s var(--ease-out),background-color .2s ease}
.hosting-card-care{border-color:rgba(0,201,167,.62);background:linear-gradient(180deg,rgba(0,201,167,.075),rgba(var(--flaeche-rgb),.96) 38%);box-shadow:0 28px 80px rgba(0,201,167,.07)}
.hosting-card-care::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:2px;background:var(--accent)}
@media(hover:hover) and (pointer:fine){
  .hosting-card:hover{transform:translateY(-3px);border-color:var(--border-accent)}
  .hosting-card-care:hover{border-color:var(--accent-text)}
}
.hosting-badge{align-self:flex-start;margin-bottom:18px;padding:4px 11px;border-radius:100px;background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.hosting-plan-name{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:12px;letter-spacing:-.02em}
.hosting-positioning{min-height:5.5em;margin-bottom:28px;color:var(--text-2);font-size:.875rem;line-height:1.55}
.hosting-price{display:flex;align-items:flex-end;gap:9px;margin-bottom:26px;font-family:var(--font-display)}
.hosting-price strong{color:var(--accent-text);font-size:clamp(2.75rem,5vw,4rem);line-height:.9;letter-spacing:-.045em;white-space:nowrap}
.hosting-price span{padding-bottom:4px;color:var(--text-2);font-size:.8125rem;white-space:nowrap}
.hosting-rule{height:1px;margin-bottom:24px;background:var(--border)}
.hosting-list-title{margin-bottom:13px;color:var(--text-1);font-family:var(--font-display);font-size:.8125rem;font-weight:600}
.hosting-feature-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.hosting-feature-list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;color:var(--text-2);font-size:.8125rem;line-height:1.5;overflow-wrap:break-word}
.hosting-feature-mark{color:var(--accent-text);font-weight:700;line-height:1.5}
.hosting-feature-list-excluded{margin-top:-8px}
.hosting-feature-list-excluded li{color:var(--text-3)}
.hosting-feature-list-excluded .hosting-feature-mark{color:var(--text-3)}
.hosting-limit-note{margin:-6px 0 26px;padding:14px 15px;border-left:2px solid var(--border-accent);background:rgba(var(--grund-rgb),.46);color:var(--text-3);font-size:.75rem;line-height:1.55}
.hosting-card .hosting-cta{width:100%;justify-content:center;margin-top:auto;white-space:nowrap}
.hosting-service-note{margin-top:22px;padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:rgba(var(--flaeche-rgb),.62);color:var(--text-2);font-size:.8125rem;line-height:1.65}
.hosting-service-note strong{color:var(--text-1);font-family:var(--font-display);font-weight:600}
@media(max-width:1040px) and (min-width:721px){
  .hosting-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hosting-card-business{grid-column:1/-1;max-width:calc(50% - 9px);width:100%;justify-self:center}
}
@media(max-width:720px){
  .hosting-grid{grid-template-columns:minmax(0,1fr)}
  .hosting-positioning{min-height:0}
}
@media(max-width:420px){
  .hosting-card{padding:26px 22px}
  .hosting-price strong{font-size:2.75rem}
}

/* Anfragefenster: natives dialog-Element fuer Fokusbindung, Escape und
   einen fuer assistive Technologien echten modalen Zustand. */
body.hosting-modal-open{overflow:hidden}
.hosting-dialog{width:fit-content;max-width:none;margin:auto;padding:0;border:0;background:transparent;color:var(--text-1);overflow:visible}
.hosting-dialog::backdrop{background:var(--schleier);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hosting-dialog-shell{position:relative;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(26px,4vw,44px);border:1px solid var(--border-accent);border-radius:20px;background:var(--surface);box-shadow:0 28px 100px rgba(var(--schatten-rgb),.5);color-scheme:dark}
.hosting-dialog-close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text-2);font:400 1.5rem/1 var(--font-body);cursor:pointer;transition:border-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.hosting-dialog-close:hover{border-color:var(--accent-text);color:var(--accent-text)}
.hosting-dialog-close:active{transform:scale(.97)}
.hosting-dialog-close:disabled,.hosting-form-actions .btn:disabled{opacity:.62;cursor:not-allowed;transform:none}
.hosting-dialog-head{padding-right:50px;margin-bottom:26px}
/* ===== BUCHUNGSFENSTER ===== */
.buchung-pruefungen{display:flex;flex-direction:column;gap:14px;margin:24px 0 18px}
.buchung-pruefung{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  font-size:.875rem;line-height:1.6;color:var(--text-2)}
.buchung-pruefung input{flex-shrink:0;width:20px;height:20px;margin-top:1px;accent-color:var(--accent-text);cursor:pointer}
.buchung-pruefung input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.buchung-pruefung strong{color:var(--text-1);font-weight:600}
.buchung-pruefung a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
/* Die Hinweiszeile bleibt im Fluss stehen, auch wenn sie leer ist - sonst
   springen die Knoepfe darunter, sobald eine Meldung erscheint. */
.buchung-hinweis{min-height:1.5em;font-size:.8125rem;line-height:1.5;color:var(--text-3);margin-bottom:18px}
.buchung-hinweis.ist-warnung{color:var(--accent-text)}
.buchung-tasten{display:flex;flex-wrap:wrap;gap:12px}
.buchung-tasten .btn{flex:1 1 200px;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{transform:none;background:var(--accent)}
@media(max-width:520px){.buchung-tasten .btn{flex:1 1 100%}}
.hosting-dialog-head h2{font-size:clamp(1.625rem,4vw,2.25rem);margin-bottom:9px}
.hosting-dialog-head p{max-width:570px;color:var(--text-2);font-size:.875rem;line-height:1.6}
.hosting-selection{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end;margin-bottom:28px;padding:18px 20px;border:1px solid var(--border-accent);border-radius:14px;background:var(--accent-dim)}
.hosting-selection-label{display:block;margin-bottom:4px;color:var(--text-3);font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase}
.hosting-selection output{display:block;color:var(--text-1);font-family:var(--font-display);font-size:1.0625rem;font-weight:700}
.hosting-selection-price{text-align:right}
.hosting-selection-price output{color:var(--accent-text)}
.hosting-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.hosting-form-grid .form-group{min-width:0}
.hosting-form-full{grid-column:1/-1}
.hosting-form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.hosting-form-actions .btn{justify-content:center;white-space:nowrap}
.hosting-form-alert{display:none;margin-bottom:20px;padding:14px 16px;border:1px solid var(--fehler-rand);border-radius:10px;background:rgba(var(--fehler-rgb),.08);color:var(--fehler-zart);font-size:.875rem;line-height:1.55}
.hosting-form-alert.sichtbar{display:block}
.hosting-form-alert a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hosting-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.hosting-success{padding:18px 0 4px;text-align:center}
.hosting-success[hidden]{display:none}
.hosting-success-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 22px;border:1px solid var(--border-accent);border-radius:50%;background:var(--accent-dim);color:var(--accent-text);font-family:var(--font-display);font-size:1.75rem;font-weight:700}
.hosting-success h2{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:12px}
.hosting-success p{max-width:520px;margin:0 auto;color:var(--text-2);font-size:.9375rem;line-height:1.65}
.hosting-success-plan{margin-top:18px!important;color:var(--accent-text)!important;font-family:var(--font-display);font-weight:600}
.hosting-success .btn{margin-top:28px}
@media(max-width:620px){
  .hosting-dialog-shell{width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);padding:26px 20px;border-radius:16px}
  .hosting-dialog-close{top:10px;right:10px}
  .hosting-dialog-head{padding-right:42px}
  .hosting-selection{grid-template-columns:minmax(0,1fr);gap:10px}
  .hosting-selection-price{text-align:left}
  .hosting-form-grid{grid-template-columns:minmax(0,1fr)}
  .hosting-form-full{grid-column:auto}
  .hosting-form-actions{flex-direction:column}
  .hosting-form-actions .btn{width:100%}
}

/* ===== TESTIMONIALS ===== */
.testimonials-header{text-align:center;margin-bottom:64px}
.testimonials-header p{max-width:500px;margin:16px auto 0;color:var(--text-2);font-size:17px;line-height:1.6}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.testimonials-grid{grid-template-columns:1fr}}
.testimonial{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:40px;display:flex;flex-direction:column;gap:28px}
.testimonial-quote{font-size:16px;line-height:1.65;color:var(--text-2);font-style:italic}
.testimonial-quote::before{content:"\201E";font-size:48px;color:var(--accent-text);font-family:var(--font-display);line-height:0.6;display:block;margin-bottom:12px;opacity:0.6}
.testimonial-author{display:flex;align-items:center;gap:14px}
.author-avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--border-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--accent-text);flex-shrink:0}
.author-name{font-weight:600;font-size:14px;margin-bottom:2px;font-family:var(--font-display)}
.author-title{font-size:12px;color:var(--text-2)}

/* ===== FAQ ===== */
.faq-inner{display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start}
@media(max-width:800px){.faq-inner{grid-template-columns:1fr;gap:40px}}
.faq-intro p{color:var(--text-2);font-size:1rem;line-height:1.6;margin:16px 0 24px}
.faq-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq-item{position:relative;border-bottom:1px solid var(--border);transition:background .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.faq-item:last-child{border-bottom:none}
/* Premium-Signatur statt Standard-Akkordeon: eine hauchduenne Teal-Linie zieht sich beim
   Oeffnen ueber die volle Breite ein (gleiches Zeichnungsmuster wie .boundary-draw) und
   ein sehr dezenter Glow legt sich unter das Element - kein Farbwechsel, keine harte Kante. */
.faq-item::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 20%,var(--accent) 80%,transparent);transform:scaleX(0);transform-origin:center;opacity:0;transition:transform .6s var(--ease-out),opacity .3s ease;pointer-events:none}
.faq-item.open{background:var(--accent-glow);box-shadow:0 16px 40px -30px rgba(0,201,167,.6)}
.faq-item.open::before{transform:scaleX(1);opacity:1}
.faq-question{width:100%;background:transparent;border:none;cursor:pointer;padding:24px 28px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--text-1);font-family:var(--font-display);font-size:1rem;font-weight:600;transition:background .3s var(--ease-out),color .3s var(--ease-out)}
.faq-question > span{min-width:0;overflow-wrap:break-word}
.faq-question:hover{background:var(--surface)}
.faq-item.open .faq-question{background:var(--surface);color:var(--accent-text)}
.faq-chevron{width:20px;height:20px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out);color:var(--text-3)}
.faq-chevron svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform .45s var(--ease-out)}
.faq-item.open .faq-chevron{background:var(--accent);border-color:var(--accent-text);color:var(--accent-ink-2);box-shadow:0 0 14px -2px rgba(0,201,167,.6)}
.faq-item.open .faq-chevron svg{transform:rotate(180deg)}
/* Aufklappen ueber die Grid-Zeile 0fr -> 1fr statt ueber einen festen max-height-Deckel:
   die Zeile nimmt exakt die tatsaechliche Inhaltshoehe an, unabhaengig von Textlaenge,
   Schriftgroesse und Viewport. Der 400px-Deckel schnitt bereits bei 125% Textgroesse und
   320px Breite 258px Inhalt ab. Das Padding unten liegt bewusst nur im geoeffneten
   Zustand an: als Padding des Grid-Items wuerde es sonst die eingeklappte Hoehe auf
   24px anheben (Border-Box kann nicht unter das eigene Padding schrumpfen).
   Der Inhalt blendet zusaetzlich per opacity/translateY ein, zeitversetzt zum Aufziehen
   der Zeile, statt schlagartig mit ihr zu erscheinen - das ergibt den gestaffelten,
   hochwertigen Reveal. Beim Schliessen faellt diese Verzoegerung weg, damit es nicht traege wirkt. */
.faq-answer{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .5s var(--ease-out)}
.faq-answer-inner{overflow:hidden;min-height:0;padding:0 28px;color:var(--text-2);font-size:0.9375rem;line-height:1.7;overflow-wrap:break-word;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s var(--ease-out)}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.faq-item.open .faq-answer-inner{padding-bottom:24px;opacity:1;transform:translateY(0);transition:opacity .4s ease .12s,transform .5s var(--ease-out) .12s}

/* ===== CONTACT ===== */
.contact-wrap{background:var(--surface);border-radius:24px;overflow:hidden}
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-info{padding:clamp(40px,6vw,72px);background:linear-gradient(160deg,var(--surface) 0%,rgba(0,201,167,0.06) 100%);border-right:1px solid var(--border);position:relative;overflow:hidden}
/* Eckmarken statt beliebiger Groszahl "01": greift dieselbe Messsprache wie das
   Hero-Signaturmotiv auf, statt reiner Dekoration ohne Bedeutung. */
.contact-info::before,.contact-info::after{content:"";position:absolute;width:28px;height:28px;border:1px solid rgba(0,201,167,.16);pointer-events:none}
.contact-info::before{right:24px;bottom:24px;border-width:0 1px 1px 0}
.contact-info::after{right:44px;bottom:44px;border-width:0 1px 1px 0;width:16px;height:16px}
.contact-tagline{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:700;font-family:var(--font-display);line-height:1.15;letter-spacing:-0.02em;margin:20px 0 28px;overflow-wrap:break-word}
.contact-tagline em{font-style:normal;color:var(--accent-text)}
.contact-info p{color:var(--text-2);font-size:0.9375rem;line-height:1.65;margin-bottom:48px}
.contact-details{display:flex;flex-direction:column;gap:16px}

/* ===== KARTE (Zwei-Klick-Loesung) =====
   Die Vorschau ist vollstaendig selbst gezeichnet: Raster aus CSS-Verlaeufen,
   Nadel als Inline-SVG. Kein Bild, kein Request, keine Uebermittlung - erst
   der Klick tauscht sie gegen den Google-Rahmen. */
.karte{margin:28px 0 0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.karte-vorschau{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:clamp(28px,4vw,40px) 22px;min-height:260px;
  background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(0,201,167,.08),transparent 70%)}
/* Andeutung eines Kartenrasters, zu den Raendern ausgeblendet. */
.karte-raster{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,201,167,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,167,.07) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000,transparent 78%)}
.karte-nadel{position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--border-accent);background:var(--accent-dim);color:var(--accent-text)}
.karte-nadel svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Ruhiger Puls unter der Nadel - ein Signal, kein Blinken. */
.karte-nadel::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--accent);
  opacity:0;animation:kartePuls 3.4s ease-out infinite}
@keyframes kartePuls{0%{transform:scale(.85);opacity:.5}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.karte-anschrift{position:relative;font-size:.9375rem;line-height:1.6;color:var(--text-2)}
.karte-anschrift strong{display:block;font-family:var(--font-display);font-size:1.0625rem;color:var(--text-1);margin-bottom:4px}
.karte-laden{position:relative}
.karte-hinweis{position:relative;max-width:42ch;font-size:.75rem;line-height:1.55;color:var(--text-3)}
.karte-hinweis a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.karte-hinweis a:hover{color:var(--accent-text)}
/* Nach dem Laden fuellt der Rahmen dieselbe Flaeche wie die Vorschau. */
.karte-rahmen{display:block;width:100%;height:clamp(260px,34vw,340px);border:0}
.karte-fuss{display:flex;justify-content:center;border-top:1px solid var(--border);background:var(--bg)}
.karte-fuss a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;
  font-family:var(--font-display);font-size:.8125rem;font-weight:600;color:var(--text-2);transition:color .2s}
.karte-fuss a:hover{color:var(--accent-text)}
.karte-fuss svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
/* Der Text braucht das span: als blosser Textknoten waere er ein anonymes Flexitem ohne
   Selektor und koennte sein automatisches Mindestmass nicht aufgeben. */
.contact-detail{display:flex;align-items:center;gap:12px;font-size:0.875rem;color:var(--text-2)}
.contact-detail > span{min-width:0;overflow-wrap:break-word}
.contact-detail-icon{width:36px;height:36px;border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-detail-icon svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.5}
.contact-detail a{color:var(--text-1);transition:color .2s;display:inline-flex;align-items:center;min-height:44px}
.contact-detail a:hover{color:var(--accent-text)}
.contact-form-wrap{padding:clamp(40px,6vw,72px)}
.form-title{font-size:1.375rem;font-weight:700;font-family:var(--font-display);margin-bottom:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.form-group label{font-size:0.75rem;font-weight:500;color:var(--text-2);font-family:var(--font-mono);letter-spacing:0.05em;text-transform:uppercase}
/* 16px ist die Schwelle, unterhalb derer iOS Safari beim Fokussieren automatisch in das
   Feld hineinzoomt. Bewusst unbedingt und nicht nur mobil: der Auto-Zoom haengt am Geraet,
   nicht an der Viewportbreite, und die Feldhoehe waechst dadurch nur um 2px (46->48). */
.form-group input,.form-group textarea,.form-group select{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:13px 16px;color:var(--text-1);font-family:var(--font-body);font-size:max(1rem, 16px);transition:border-color .2s;outline:none;width:100%}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-3)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent-text);box-shadow:0 0 0 3px rgba(0,201,167,0.08)}
.form-group textarea{min-height:120px;resize:vertical}
.form-group select option{background:var(--surface)}
.form-submit{margin-top:8px}
.form-note{font-size:0.75rem;color:var(--text-3);margin-top:12px}
.form-note a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}

/* ===== 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}

/* ===== SMARTPHONE-TYPOGRAFIE & KOMPAKTERE KARTEN =====
   Abstaende (430px-Block): bewusste Stufe auf das kompaktere Mobilmass; oberhalb 430px
   gelten die Basiswerte unveraendert weiter.
   Schriftgroessen (400px-Block): stufenlos — die clamp()-Maxima entsprechen bei genau
   400px exakt den Basiswerten (52px bzw. 22px), daher kein Sprung am Breakpoint.
   .about/.creds/.stats-grid/.cert-badge: ohne diese Regeln erzwingt die 2-spaltige
   .stats-grid (min-content 301.7px) bzw. .cert-badge (min-content 272.8px) in der nur
   184px breiten .about-Innenflaeche einen echten Ueberlauf — bei 320px 49px, die von
   body{overflow-x:hidden} sichtbar abgeschnitten werden. Messwerte siehe Run 04C-QA. */
@media(max-width:430px){
  .service-card{padding:28px}
  .plan{padding:28px}
  .step{padding:28px 24px}
  .stat-card{padding:24px}
  .cred-item{padding:20px;gap:16px}
  .faq-question{padding:20px}
  .faq-answer-inner{padding:0 20px}
  .faq-item.open .faq-answer-inner{padding-bottom:20px}
  .about{padding:20px}
  .creds{padding:20px}
  .stats-grid{grid-template-columns:1fr}
  /* Zweispaltiges Raster statt flex-wrap: der Punkt bliebe sonst als einziges Element
     allein in der ersten Zeile, weil das Textelement mit seiner max-content-Breite
     umbricht. Hier haelt Spalte 1 den Punkt, Spalte 2 Text und Zusatz untereinander. */
  .cert-badge{display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:12px;row-gap:4px}
  .cert-badge-dot{margin-top:8px}
  .cert-badge-label{grid-column:2;margin-left:0}
}
@media(max-width:400px){
  .display{font-size:clamp(2.625rem,13vw,3.25rem)}
  .service-card h4{font-size:clamp(1.0625rem,5.5vw,1.375rem);overflow-wrap:break-word}
}

/* ===== AI-ACT-BEREICH ===== */
.aiact{position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg),var(--bg-tief-2) 50%,var(--bg))}
/* Der Halter spannt die volle Sektionshoehe auf, ohne Platz im Fluss zu belegen.
   Die Zeichenflaeche darin bleibt genau einen Bildschirm hoch und klebt beim
   Scrollen oben fest. Frueher war die Canvas so hoch wie die ganze Sektion -
   das ergab bei 1440x900 einen Puffer von 13,5 Megapixeln (rund 52 MB), der
   in jedem Frame geleert und neu bemalt wurde. Jetzt sind es rund 5 Megapixel,
   und der Hintergrund wirkt zugleich wie ein System, das hinter dem Inhalt
   weiterlaeuft, statt mit ihm wegzuscrollen. */
.aiact-canvas-halter{position:absolute;inset:0;z-index:0;pointer-events:none}
.aiact-canvas-wrap{position:sticky;top:0;height:100svh}
.aiact-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.42}
.aiact-inner{position:relative;z-index:1}
.aiact-head{max-width:760px;margin-bottom:clamp(40px,6vw,64px)}
.aiact-head h2{margin-bottom:20px}
.aiact-head p{color:var(--text-2);font-size:clamp(1rem,2.2vw,1.0625rem)}
.aiact-lead{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.aiact-lead-pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(0,201,167,.6);animation:aiPulse 2.6s ease-out infinite}
@keyframes aiPulse{0%{box-shadow:0 0 0 0 rgba(0,201,167,.55)}70%{box-shadow:0 0 0 12px rgba(0,201,167,0)}100%{box-shadow:0 0 0 0 rgba(0,201,167,0)}}
/* Die drei Kopfzeilen als Bloecke statt <br>: gleiche Umbrueche, aber jede
   Zeile ist einzeln ansprechbar. Der Text selbst bleibt unveraendert. */
.ai-zeile{display:block}

/* ===== EINTRITTSCHOREOGRAFIE =====
   Der Ausgangszustand haengt an .js: ohne JavaScript ist alles sofort sichtbar,
   und es gibt kein Aufblitzen vor dem Start. Das Skript setzt nur eine Klasse
   je Abschnitt - alle Verzoegerungen stehen hier, nicht im JavaScript. */
.js .ai-anim .aiact-lead,
.js .ai-anim .ai-zeile,
.js .ai-anim .ai-text{opacity:0;transform:translateY(24px);filter:blur(5px)}
.js .ai-anim.ai-los .aiact-lead,
.js .ai-anim.ai-los .ai-zeile,
.js .ai-anim.ai-los .ai-text{opacity:1;transform:none;filter:blur(0);
  transition:opacity .72s var(--ease-out) var(--verzug,0s),
             transform .82s var(--ease-out) var(--verzug,0s),
             filter .6s var(--ease-out) var(--verzug,0s)}
.js .ai-anim.ai-los .aiact-lead{--verzug:0s}
.js .ai-anim.ai-los .ai-zeile:nth-child(1){--verzug:.16s}
.js .ai-anim.ai-los .ai-zeile:nth-child(2){--verzug:.28s}
.js .ai-anim.ai-los .ai-zeile:nth-child(3){--verzug:.40s}
.js .ai-anim.ai-los .ai-text{--verzug:.60s}
/* Einmaliger Lichtimpuls auf "vorbereitet?" - kein Dauerleuchten. */
@keyframes aiLichtimpuls{
  0%{text-shadow:0 0 0 rgba(0,201,167,0)}
  24%{text-shadow:0 0 30px rgba(0,201,167,.8),0 0 10px rgba(0,201,167,.55)}
  100%{text-shadow:0 0 0 rgba(0,201,167,0)}
}
.js .ai-anim.ai-los .ai-zeile:nth-child(3) em{animation:aiLichtimpuls 1.7s var(--ease-out) .62s 1 both}

/* Risikostufen als durchgehende Skala statt vier gleicher Karten - knuepft an das
   Kalibrierungsmotiv aus dem Hero an. Gleich breite Zonen: es gibt keine belastbare
   Angabe, wie viele Systeme real in welche Stufe fallen, daher wird das nicht suggeriert. */
.risk-intro{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.risk-intro h3{font-size:clamp(1.25rem,3vw,1.5rem)}
.risk-status{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);transition:color .4s ease}
.risk-status.ai-prueft{color:var(--accent-text)}
/* Vier volle Baender statt Balken+Legende: der Stufenname selbst ist die Skala,
   Typografie und Messwerkzeug sind eins. */
.risk-stack{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.risk-band{position:relative;padding:clamp(22px,3.4vw,36px) 0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;overflow:hidden;opacity:1;background-color:transparent;transition:opacity .55s var(--ease-out),background-color .35s var(--ease-out)}
/* Vor dem Scan gedaempft - aber nur, wenn JavaScript den Scan auch ausfuehren
   kann. Ohne JS stehen die Baender von Anfang an voll lesbar da. */
.js .ai-anim.risk-stack .risk-band{opacity:.3}
.js .risk-stack .risk-band.ist-aktiv,
.js .risk-stack .risk-band.geprueft{opacity:1}
/* Linke Farbkante: laedt sich von oben auf und leuchtet einmal kurz. */
.risk-band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--stufe);transform:scaleY(var(--kante-y,1)) scaleX(var(--kante-x,1));transform-origin:top left;transition:transform .5s var(--ease-out)}
.js .ai-anim.risk-stack .risk-band::before{--kante-y:0}
.js .risk-stack .risk-band.ist-aktiv::before,
.js .risk-stack .risk-band.geprueft::before{--kante-y:1}
@keyframes aiKanteGlut{
  0%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
  35%{box-shadow:0 0 22px 1px var(--stufe)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.js .risk-stack .risk-band.ist-aktiv::before{animation:aiKanteGlut 1.15s var(--ease-out) 1 both}
/* Scannerlinie: ein Element ueber die volle Bandbreite, dessen Verlauf nur an
   einer schmalen Stelle hell ist. Verschoben wird per transform - dadurch
   laeuft die Linie ohne Layout- oder Groessenmessung sauber durch, auf jeder
   Bandbreite gleich, und der Browser kann sie auf der GPU bewegen. */
.risk-band::after{content:"";position:absolute;top:0;bottom:0;left:0;width:100%;pointer-events:none;opacity:0;
  /* Der helle Kern ist rund zwei Pixel breit, dahinter liegt eine kurze
     Lichtspur, davor faellt es hart ab - dadurch liest sich die Bewegung als
     Richtung und nicht als leuchtende Saeule. Die Prozentwerte skalieren mit
     der Bandbreite, das Verhaeltnis bleibt auf jedem Bildschirm gleich. */
  background:linear-gradient(90deg,transparent 46%,var(--stufe) 49.8%,rgba(var(--waesche-rgb),.95) 50%,var(--stufe) 50.2%,transparent 51.2%);
  transform:translateX(-100%)}
@keyframes aiScanlinie{
  0%{opacity:0;transform:translateX(-100%)}
  10%{opacity:.7}
  78%{opacity:.55}
  100%{opacity:0;transform:translateX(100%)}
}
.js .risk-stack .risk-band.ist-aktiv::after{animation:aiScanlinie .9s cubic-bezier(.36,0,.2,1) 1 both}
.risk-band-label{font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,5.6vw,4.25rem);line-height:.95;color:var(--stufe);letter-spacing:-.02em;padding-left:clamp(20px,3vw,32px);white-space:nowrap}
.risk-band-body{min-width:0;padding-right:clamp(12px,2vw,24px)}
.risk-band-body h4{font-size:1.0625rem;margin-bottom:6px;overflow-wrap:break-word}
.risk-band-body p{font-size:0.9375rem;color:var(--text-2);line-height:1.65;max-width:58ch;overflow-wrap:break-word}
.js .ai-anim.risk-stack .risk-band-label{opacity:0;transform:translateX(-16px)}
.js .ai-anim.risk-stack .risk-band-body{opacity:0;transform:translateY(12px)}
.js .risk-stack .risk-band.ist-aktiv .risk-band-label,
.js .risk-stack .risk-band.geprueft .risk-band-label{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .62s var(--ease-out)}
/* Die Erklaerung folgt dem Stufennamen bewusst um gut eine Zehntelsekunde
   versetzt - erst die Einordnung, dann die Begruendung. */
.js .risk-stack .risk-band.ist-aktiv .risk-band-body,
.js .risk-stack .risk-band.geprueft .risk-band-body{opacity:1;transform:none;transition:opacity .5s var(--ease-out) .12s,transform .58s var(--ease-out) .12s}
/* Mikroreaktion beim Zeigen - nur mit echter Maus, erst nach dem Scan und
   ohne jede Layoutverschiebung. */
@media(hover:hover) and (pointer:fine){
  .js .risk-stack.ai-fertig .risk-band:hover{background-color:rgba(var(--waesche-rgb),.03)}
  .js .risk-stack.ai-fertig .risk-band:hover::before{--kante-x:1.6}
}
@media(max-width:760px){.risk-band{grid-template-columns:minmax(0,1fr);padding-left:16px}.risk-band-label{white-space:normal;padding-left:16px}}
.risk-note{margin-top:24px;font-size:0.8125rem;color:var(--text-3);line-height:1.6}

/* Fristen des AI Act */
.aiact-timeline{margin-top:clamp(48px,7vw,72px)}
.aiact-timeline h3{font-size:clamp(1.25rem,3vw,1.5rem);margin-bottom:8px}
.aiact-timeline>p{color:var(--text-2);font-size:0.9375rem;margin-bottom:28px;max-width:640px}
/* overflow:hidden klammert den Impuls, der links und rechts ueber die Leiste
   hinauslaeuft. Die Punkte selbst liegen innerhalb und bleiben unberuehrt. */
.tl{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:20px 18px}
.tl::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,var(--border-accent),var(--border) 70%,transparent);transform:scaleX(1);transform-origin:left center}
.js .ai-anim.aiact-timeline .tl::before{transform:scaleX(0)}
.js .ai-anim.aiact-timeline.ai-los .tl::before{transform:scaleX(1);transition:transform 1.05s var(--ease-in-out)}
/* Ein einzelner Impuls laeuft die Linie einmal entlang - dieselbe Technik wie
   die Scannerlinie: schmale helle Stelle in einem sonst leeren Verlauf. */
.tl-puls{position:absolute;top:8px;left:0;width:100%;height:3px;pointer-events:none;opacity:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 46.5%,rgba(0,201,167,.4) 49.3%,var(--accent) 50%,rgba(0,201,167,.4) 50.7%,transparent 53.5%)}
@keyframes aiTlPuls{
  0%{opacity:0;transform:translateX(-100%)}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;transform:translateX(100%)}
}
.js .ai-anim.aiact-timeline.ai-los .tl-puls{animation:aiTlPuls 1.5s cubic-bezier(.4,0,.2,1) .55s 1 both}
.tl-item{position:relative;padding-top:30px}
.tl-dot{position:absolute;top:4px;left:0;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--border);transition:border-color .3s,box-shadow .3s}
.js .ai-anim.aiact-timeline .tl-dot{opacity:0;transform:scale(.35)}
.js .ai-anim.aiact-timeline.ai-los .tl-dot{opacity:1;transform:none;
  transition:opacity .38s var(--ease-out) var(--tlv,0s),transform .5s var(--ease-out) var(--tlv,0s),border-color .3s,box-shadow .3s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(1) .tl-dot{--tlv:.35s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(2) .tl-dot{--tlv:.47s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(3) .tl-dot{--tlv:.59s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(4) .tl-dot{--tlv:.71s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(5) .tl-dot{--tlv:.83s}
.js .ai-anim.aiact-timeline.ai-los .tl-item:nth-child(6) .tl-dot{--tlv:.95s}
.tl-item.aktiv .tl-dot{border-color:var(--accent-text);box-shadow:0 0 0 4px var(--accent-glow)}
.tl-date{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.05em;color:var(--accent-text);margin-bottom:6px}
.tl-item:not(.aktiv) .tl-date{color:var(--text-3)}
.tl-item h5{font-size:0.9375rem;margin-bottom:5px;line-height:1.35;overflow-wrap:break-word}
.tl-item p{font-size:0.8125rem;color:var(--text-2);line-height:1.55}
.tl-tag{display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:100px;border:1px solid var(--border);color:var(--text-3)}
.tl-item.aktiv .tl-tag{border-color:var(--border-accent);color:var(--accent-text);background:var(--accent-dim)}

.aiact-cta{margin-top:clamp(44px,6vw,64px);padding:clamp(28px,4vw,40px);border:1px solid var(--border-accent);border-radius:var(--radius);background:linear-gradient(120deg,rgba(0,201,167,.08),transparent 60%);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.aiact-cta h4{font-size:clamp(1.125rem,2.6vw,1.375rem);margin-bottom:6px;overflow-wrap:break-word}
.aiact-cta p{color:var(--text-2);font-size:0.9375rem;max-width:520px}

/* ===== BUSSGELDRISIKEN ===== */
.fines-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(32px,5vw,48px);align-items:start}
@media(max-width:820px){.fines-grid{grid-template-columns:1fr}}
.fine-card{padding:clamp(26px,4vw,36px);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);position:relative;overflow:hidden;transition:border-color .3s}
.fine-card:hover{border-color:var(--border-accent)}
.fine-card-head{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.fine-card-head svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;flex-shrink:0}
.fine-card-head h3{font-size:1.0625rem;overflow-wrap:break-word}
.fine-tier+.fine-tier{margin-top:22px;padding-top:22px;border-top:1px dashed var(--border)}
.fine-amount{font-family:var(--font-display);font-weight:700;font-size:clamp(1.875rem,5vw,2.75rem);line-height:1.05;letter-spacing:-.02em;color:var(--text-1);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.fine-amount .fine-unit{font-size:clamp(1rem,2.4vw,1.25rem);color:var(--accent-text)}
.fine-or{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:6px 0 4px}
.fine-pct{font-family:var(--font-display);font-weight:700;font-size:clamp(1.125rem,2.8vw,1.375rem);color:var(--accent-text)}
.fine-desc{font-size:0.875rem;color:var(--text-2);line-height:1.6;margin-top:10px}
.fine-basis{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.05em;color:var(--text-3);margin-top:10px}
.fine-hint{margin-top:clamp(24px,4vw,32px);padding:20px 22px;border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:10px;background:var(--surface);font-size:0.875rem;color:var(--text-2);line-height:1.65}
.fine-hint strong{color:var(--text-1)}

/* ===== REFERENZFAELLE ===== */
.cases-head{max-width:880px;margin-bottom:clamp(32px,5vw,48px)}
/* Die Einleitung bleibt auf angenehmer Zeilenlaenge; nur die Ueberschrift darf
   die volle Breite nutzen, sonst bricht "Datenschutzverstoesse" mitten im Wort. */
.cases-head p{max-width:720px}
.cases-head h2{margin-bottom:18px}
.cases-head p{color:var(--text-2)}
.case-list{display:grid;gap:18px}
.case{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;transition:border-color .35s var(--ease-out),box-shadow .35s var(--ease-out),transform .3s}
.case:hover{border-color:var(--border-accent);transform:translateY(-2px)}
/* Kopfzeile ist ein <button> in einer <h3>: komplette Kopfzone (Badge, Betrag,
   Titel, Chevron) ist eine einzige Klickflaeche, bleibt aber semantisch eine
   ueberschrift + ein Button statt eines klickbaren div. */
.case-heading{margin:0}
.case-summary{width:100%;display:flex;flex-direction:column;gap:14px;background:transparent;border:none;cursor:pointer;text-align:left;padding:clamp(24px,3.5vw,34px);font:inherit;color:inherit;transition:background .3s var(--ease-out)}
.case-summary:hover{background:var(--surface-up)}
/* .case hat overflow:hidden fuer die runden Ecken und die Akzentlinie; dadurch
   wuerde ein aussen liegender Fokusring abgeschnitten (gleiches Problem wie beim
   FAQ-Button) - nach innen bleibt er vollstaendig sichtbar. */
.case-summary:focus-visible{outline-offset:-3px}
.case-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.case-kind{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);padding:4px 11px;border-radius:100px;border:1px solid var(--border-accent);background:var(--accent-dim)}
.case-sum{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,3.4vw,1.75rem);color:var(--text-1);letter-spacing:-.01em;white-space:nowrap}
.case-summary-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.case-title-text{font-family:var(--font-display);font-weight:700;font-size:clamp(1.0625rem,2.4vw,1.1875rem);line-height:1.35;overflow-wrap:break-word;color:var(--text-1)}
.case-chevron{width:28px;height:28px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-3);transition:background .32s var(--ease-out),border-color .32s var(--ease-out),color .32s var(--ease-out),box-shadow .35s var(--ease-out)}
.case-chevron svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .32s var(--ease-out)}
.case-summary:hover .case-chevron{border-color:var(--border-accent);color:var(--accent-text)}
/* Teal-Akzentlinie faehrt beim Oeffnen von links nach rechts ein (transform-origin:
   left) statt mittig wie beim FAQ - eigene Signatur fuer diesen Kartentyp. */
.case-line{height:1px;margin:0 clamp(24px,3.5vw,34px);background:var(--accent);transform:scaleX(0);transform-origin:left;opacity:0;transition:transform .4s var(--ease-out),opacity .3s ease}
.case.open{border-color:var(--border-accent);box-shadow:0 0 0 1px rgba(0,201,167,.15),0 8px 30px rgba(0,201,167,.06)}
.case.open .case-line{transform:scaleX(1);opacity:.6}
.case.open .case-chevron{background:var(--accent);border-color:var(--accent-text);color:var(--accent-ink);box-shadow:0 0 12px -2px rgba(0,201,167,.55)}
.case.open .case-chevron svg{transform:rotate(180deg)}
/* Gleiche Grid-Zeilen-Technik wie beim FAQ (0fr -> 1fr): die Detailflaeche nimmt
   exakt die tatsaechliche Inhaltshoehe an, unabhaengig von Textlaenge. Der Inhalt
   blendet zusaetzlich zeitversetzt per opacity/translateY ein; ein sehr dezenter
   Teal-Wash gibt dem Detailbereich das Gefuehl einer zusaetzlichen Interface-Ebene.
   Padding wird nur im offenen Zustand angelegt, sonst haette das eingeklappte
   Grid-Item eine Mindesthoehe durch sein eigenes Padding. */
.case-body{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .44s var(--ease-out)}
.case.open .case-body{grid-template-rows:1fr}
.case-body-inner{overflow:hidden;min-height:0;padding:0 clamp(24px,3.5vw,34px);opacity:0;transform:translateY(10px);background:linear-gradient(180deg,rgba(0,201,167,.04),transparent 55%);transition:opacity .3s ease,transform .36s var(--ease-out)}
.case-body-inner>p{font-size:0.9375rem;color:var(--text-2);line-height:1.65}
.case.open .case-body-inner{opacity:1;transform:translateY(0);padding:22px clamp(24px,3.5vw,34px) clamp(24px,3.5vw,34px);transition:opacity .3s ease .12s,transform .36s var(--ease-out) .12s}
.case-relevanz{margin-top:14px;padding:14px 16px;border-radius:10px;background:var(--bg);border:1px solid var(--border);font-size:0.875rem;color:var(--text-2);line-height:1.6}
.case-relevanz strong{color:var(--accent-text);font-weight:600}
.case-meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 20px}
.case-meta div{min-width:0}
.case-meta dt{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:3px}
.case-meta dd{font-size:0.8125rem;color:var(--text-2);overflow-wrap:break-word}
.case-meta a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.case-meta a:hover{color:var(--text-1)}
.cases-note{margin-top:24px;font-size:0.8125rem;color:var(--text-3);line-height:1.65}

/* ===== KI-BERATUNG KONZEPT B: immersives Kapitel =====
   Text steht direkt ueber dem Netz (Textschatten statt Karte/Blur-Box) - Inhalt
   ist Teil der Installation, nicht eine Ebene darueber. Kuerzere Schritte
   (statt 100vh) ergeben ein rund 350vh-Kapitel ueber fuenf Zustaende. */
.neural{position:relative;background:var(--bg)}
.neural-stage{position:relative}
.neural-canvas-wrap{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.neural-canvas{position:absolute;inset:0;width:100%;height:100%}
/* Zwei Lesbarkeitsebenen ueber dem Netz. Beide sind reine Verlaeufe ohne
   Layout-Einfluss und ohne Filter: die Vignette nimmt den Raendern die Unruhe,
   der seitliche Verlauf sichert den Textkontrast dort, wo die Spalte steht.
   Der Inhalt bleibt damit auch bei voller Netzdichte klar fuehrend. */
.neural-canvas-wrap::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(var(--grund-rgb),.82) 0%,rgba(var(--grund-rgb),.54) 32%,rgba(var(--grund-rgb),.14) 58%,rgba(var(--grund-rgb),0) 76%)}
.neural-canvas-wrap::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 80% 72% at center,transparent 30%,rgba(var(--grund-rgb),.5) 74%,var(--bg) 97%)}
.neural-steps{position:relative;z-index:3}
.neural-step{min-height:66vh;display:flex;align-items:center;pointer-events:none;padding:0 clamp(20px,6vw,120px)}
.neural-content{max-width:640px;pointer-events:auto;opacity:var(--fokus,0);filter:brightness(calc(.45 + var(--fokus,0) * .55));transform:translateY(calc((1 - var(--fokus,0)) * 26px));transition:opacity .18s linear,filter .18s linear,transform .18s linear}
.js .neural-content{will-change:opacity,filter,transform}
.neural-num{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.14em;color:var(--accent-text);margin-bottom:16px;text-shadow:0 2px 16px rgba(var(--grund-rgb),.9)}
.neural-content h3{font-size:clamp(2.25rem,6.2vw,4.5rem);margin-bottom:18px;line-height:.98;letter-spacing:-.02em;overflow-wrap:break-word;text-shadow:0 4px 28px rgba(var(--grund-rgb),.85),0 1px 3px rgba(var(--grund-rgb),.9)}
.neural-content p{color:var(--text-1);opacity:.88;font-size:1.0625rem;line-height:1.7;max-width:52ch;text-shadow:0 2px 20px rgba(var(--grund-rgb),.9)}
.neural-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.neural-tag{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-1);padding:5px 12px;border:1px solid rgba(var(--waesche-rgb),.28);border-radius:100px;background:rgba(var(--grund-rgb),.42);backdrop-filter:blur(6px)}
.neural-head{position:relative;z-index:3;padding-bottom:clamp(20px,4vw,32px)}
.neural-head h2{margin-bottom:18px}
.neural-head p{color:var(--text-2);max-width:620px}
/* Ohne JavaScript oder bei reduzierter Bewegung: normale Liste statt Reise. */
.neural-fallback{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.js .neural-fallback{display:none}
/* Unter 900px steht der Text nicht mehr in einer eigenen Spalte, sondern ueber
   der vollen Breite. Dann traegt ein senkrechter Verlauf den Kontrast. */
@media(max-width:899.98px){
  .neural-canvas-wrap::before{background:linear-gradient(180deg,rgba(var(--grund-rgb),.28) 0%,rgba(var(--grund-rgb),.5) 55%,rgba(var(--grund-rgb),.7) 100%)}
}
@media(max-width:720px){
  .neural-canvas-wrap{height:100svh}
  .neural-step{min-height:78vh}
}

/* ===== KONTAKTFORMULAR ===== */
.form-hint{font-size:0.75rem;color:var(--text-3);font-family:var(--font-body);letter-spacing:0;text-transform:none;font-weight:400}
.form-group label .form-hint{margin-left:6px}
.form-group input[aria-invalid="true"],.form-group textarea[aria-invalid="true"],.form-group select[aria-invalid="true"]{border-color:var(--fehler)}
.field-error{display:none;font-size:0.75rem;color:var(--fehler-hell);line-height:1.45;margin-top:-2px}
.field-error.sichtbar{display:block}
.form-required{color:var(--accent-text);margin-left:2px}

/* Bedarfsauswahl als anklickbare Marken */
.need-group{border:0;padding:0;margin:0 0 20px;min-width:0}
.need-legend{font-size:0.75rem;font-weight:500;color:var(--text-2);font-family:var(--font-mono);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:12px;padding:0}
.need-chips{display:flex;flex-wrap:wrap;gap:9px}
.need-chip{position:relative}
.need-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.need-chip span{display:inline-block;cursor:pointer;font-size:0.8125rem;color:var(--text-2);padding:8px 14px;border:1px solid var(--border);border-radius:100px;background:var(--bg);transition:border-color .2s,color .2s,background .2s;user-select:none}
.need-chip span:hover{border-color:var(--border-accent);color:var(--text-1)}
.need-chip input:checked+span{border-color:var(--accent-text);color:var(--accent-text);background:var(--accent-dim)}
.need-chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* Einwilligung */
.consent{display:flex;align-items:flex-start;gap:11px;margin:4px 0 18px;font-size:0.8125rem;color:var(--text-2);line-height:1.55}
.consent input{flex-shrink:0;width:17px;height:17px;margin-top:2px;accent-color:var(--accent-text);cursor:pointer}
.consent a{color:var(--text-1);text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--accent-text)}

/* Sende- und Fehlerzustaende */
.form-submit .btn[disabled]{opacity:.62;cursor:not-allowed;transform:none}
.btn-spinner{width:15px;height:15px;border:2px solid rgba(0,38,31,.28);border-top-color:var(--accent-ink);border-radius:50%;animation:btnDreh .7s linear infinite;flex-shrink:0}
@keyframes btnDreh{to{transform:rotate(360deg)}}
.form-alert{display:none;margin-bottom:18px;padding:14px 16px;border-radius:10px;font-size:0.875rem;line-height:1.55;border:1px solid var(--fehler-rand);background:rgba(var(--fehler-rgb),.08);color:var(--fehler-zart)}
.form-alert.sichtbar{display:block}

/* Bestaetigung nach dem Absenden */
.form-done{display:none;text-align:center;padding:clamp(12px,3vw,26px) 0}
.form-done.sichtbar{display:block;animation:doneRein .5s ease both}
@keyframes doneRein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.done-ring{width:66px;height:66px;margin:0 auto 22px;border-radius:50%;border:1px solid var(--border-accent);background:var(--accent-dim);display:grid;place-items:center}
.done-ring svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.js .form-done.sichtbar .done-haken{stroke-dasharray:32;stroke-dashoffset:32;animation:hakenZeichnen .5s .18s ease forwards}
@keyframes hakenZeichnen{to{stroke-dashoffset:0}}
.form-done h3{font-size:clamp(1.25rem,3vw,1.5rem);margin-bottom:12px}
.form-done>p{color:var(--text-2);font-size:0.9375rem;max-width:420px;margin:0 auto;line-height:1.65}
.done-nummer{margin:24px auto;padding:18px 22px;border:1px solid var(--border-accent);border-radius:12px;background:var(--bg);display:inline-block}
.done-nummer-label{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px}
.done-nummer-wert{font-family:var(--font-mono);font-size:clamp(1.0625rem,3vw,1.375rem);font-weight:500;color:var(--accent-text);letter-spacing:.04em;overflow-wrap:break-word}
.done-copy{margin-top:12px;background:none;border:none;color:var(--text-3);font-family:var(--font-body);font-size:0.75rem;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:4px}
.done-copy:hover{color:var(--accent-text)}
.done-mail{font-size:0.8125rem;color:var(--text-3);margin-top:6px}
.done-neu{margin-top:20px}

/* ===== ANMELDEFENSTER (INTERNER BEREICH) - SECURE ACCESS =====
   Dieselben Farben, Schriften und Radien wie die uebrige Seite. Der Rahmen ist
   sehr fein, der Teal-Akzent zurueckhaltend - das Fenster soll wie ein Teil der
   Website wirken, nicht wie ein Browser-Dialog.

   Aufbau von aussen nach innen:
     .anmeldung          Buehne, fest ueber der Seite
     .anmeldung-schleier abgedunkelter, weichgezeichneter Hintergrund
     .anmeldung-box      das eigentliche Panel
     .anmeldung-raster   rein dekorative Technik-Ebene (Gitter, Punkte, Linien)
     .anmeldung-bahn     "Secure Action Track" mit dem Anmeldeknopf darin

   Der Knopf sitzt nicht direkt in der Bahn, sondern in einer Schiene. Die
   Schiene uebernimmt die Bewegung nach links und rechts (translateX), der
   Knopf nur seine eigenen Microinteractions (Hover, Aktiv). Dadurch koennen
   sich beide Bewegungen nie gegenseitig ueberschreiben. */
.anmeldung{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;padding:max(20px,env(safe-area-inset-top,0px)) 20px max(20px,env(safe-area-inset-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;
  --ease-panel:cubic-bezier(.16,1,.3,1);--ease-lauf:cubic-bezier(.22,1,.36,1)}
.anmeldung.ist-sichtbar{display:flex}

.anmeldung-schleier{position:fixed;inset:0;background:var(--schleier-weich);
  -webkit-backdrop-filter:blur(12px) saturate(115%);backdrop-filter:blur(12px) saturate(115%);
  opacity:0;transition:opacity .42s var(--ease-out),-webkit-backdrop-filter .4s ease,backdrop-filter .4s ease}
.anmeldung.ist-offen .anmeldung-schleier{opacity:1}

.anmeldung-box{position:relative;width:100%;max-width:512px;margin:auto;
  background:linear-gradient(180deg,rgba(var(--hoch-rgb),.95),rgba(var(--flaeche-rgb),.97));
  border:1px solid rgba(var(--waesche-rgb),.07);border-radius:22px;
  box-shadow:0 40px 100px -24px rgba(var(--schatten-rgb),.6),0 0 0 1px rgba(0,201,167,.05),0 0 90px -34px rgba(0,201,167,.4);
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .5s var(--ease-panel),transform .54s var(--ease-panel)}
.anmeldung.ist-offen .anmeldung-box{opacity:1;transform:none}

/* Abgang nach erfolgreicher Anmeldung: das Panel tritt einen Hauch nach vorn
   und loest sich auf, der Schleier gibt den Blick wieder frei. Danach uebernimmt
   die bestehende Weiterleitung. */
.anmeldung.ist-autorisiert .anmeldung-box{opacity:0;transform:scale(1.015);
  transition:opacity .34s ease,transform .42s var(--ease-out)}
.anmeldung.ist-autorisiert .anmeldung-schleier{opacity:.55;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* Sehr feines technisches Raster, wenige Netzknoten, zwei langsam wandernde
   Datenlinien und ein ruhiger Lichtherd oben. Rein dekorativ und deutlich
   unter der Lesbarkeitsschwelle der Formularelemente. */
.anmeldung-raster{position:absolute;inset:0;border-radius:22px;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 74% at 50% -6%,rgba(0,201,167,.12),transparent 60%),
    radial-gradient(90% 60% at 108% 106%,rgba(0,201,167,.06),transparent 68%),
    radial-gradient(circle at 16% 24%,rgba(0,201,167,.42) 0 1.3px,transparent 1.9px),
    radial-gradient(circle at 82% 17%,rgba(0,201,167,.3) 0 1.3px,transparent 1.9px),
    radial-gradient(circle at 68% 61%,rgba(0,201,167,.22) 0 1.2px,transparent 1.8px),
    radial-gradient(circle at 27% 79%,rgba(0,201,167,.26) 0 1.2px,transparent 1.8px),
    repeating-linear-gradient(90deg,rgba(var(--waesche-rgb),.022) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(0deg,rgba(var(--waesche-rgb),.022) 0 1px,transparent 1px 34px)}
.anmeldung-raster::before,.anmeldung-raster::after{content:"";position:absolute;left:-30%;width:160%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,201,167,.45),transparent)}
.anmeldung-raster::before{top:29%;opacity:.5;animation:anmeldungLinie 16s linear infinite}
.anmeldung-raster::after{top:71%;opacity:.3;animation:anmeldungLinie 23s linear infinite reverse}
@keyframes anmeldungLinie{from{transform:translateX(-40%)}to{transform:translateX(40%)}}

.anmeldung-inhalt{position:relative;padding:clamp(26px,5vw,38px)}

/* --- Kopf: vollstaendiges Logo links, Sicherheitskennung rechts --- */
.anmeldung-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-right:46px;margin-bottom:26px}
.anmeldung-marke{display:flex;align-items:center;min-width:0}
.anmeldung-logo{height:56px;width:auto;max-width:100%;object-fit:contain;display:block;flex:0 0 auto}
.anmeldung-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);
  background:var(--accent-dim);border:1px solid var(--border-accent);border-radius:100px;padding:5px 12px}
.anmeldung-punkt{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(0,201,167,.14)}

.anmeldung-titel{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,4.6vw,1.8rem);
  line-height:1.15;letter-spacing:-.02em;margin-bottom:8px}
.anmeldung-unter{color:var(--text-2);font-size:.9375rem;line-height:1.6;margin-bottom:10px}
.anmeldung-kennung{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3);margin:4px 0 26px}

.anmeldung-meldung{border-radius:12px;padding:11px 14px;font-size:.875rem;line-height:1.5;
  margin-bottom:20px;background:rgba(var(--fehler-hell-rgb),.09);border:1px solid rgba(var(--fehler-hell-rgb),.3);color:var(--fehler-hell)}
.anmeldung-meldung[hidden]{display:none}
/* Hinweis in der lokalen Vorschau - erklaerend, nicht alarmierend. */
.anmeldung-meldung.ist-hinweis{background:rgba(var(--warn-rgb),.09);border-color:rgba(var(--warn-rgb),.32);color:var(--warn)}
.anmeldung-meldung.ist-erfolg{background:var(--accent-dim);border-color:var(--border-accent);color:var(--accent-text)}
.anmeldung-meldung small{display:block;margin-top:5px;font-size:.8125rem;opacity:.85}

/* --- Eingabefelder --- */
.anmeldung-feld{margin-bottom:16px}
.anmeldung-form label{display:block;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:8px}
.anmeldung-eingabe{position:relative}
.anmeldung-eingabe input[type=text],.anmeldung-eingabe input[type=password]{width:100%;background:var(--bg-tief-2);
  border:1px solid var(--border);border-radius:13px;color:var(--text-1);font-family:var(--font-body);
  font-size:1rem;padding:14px 46px 14px 44px;
  transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease}
.anmeldung-eingabe input:hover{border-color:var(--surface-up)}
.anmeldung-eingabe input:focus{border-color:var(--accent-text);background:var(--bg-tief-2);
  box-shadow:0 0 22px -9px rgba(0,201,167,.6)}
.anmeldung-symbol{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  stroke:var(--text-3);fill:none;stroke-width:1.5;pointer-events:none;transition:stroke .22s ease}
.anmeldung-eingabe:focus-within .anmeldung-symbol{stroke:var(--accent)}

/* Der Haken erscheint, sobald das Feld ausgefuellt ist - klein, teal, ohne
   Erfolgsmeldung. */
.anmeldung-check{position:absolute;right:16px;top:50%;width:16px;height:16px;stroke:var(--accent);
  fill:none;stroke-width:2;pointer-events:none;opacity:0;transform:translateY(-50%) scale(.7);
  transition:opacity .2s ease,transform .28s var(--ease-lauf)}
.anmeldung-eingabe.ist-gefuellt .anmeldung-check{opacity:1;transform:translateY(-50%) scale(1)}

/* Das Auge sitzt im Feld, die Eingabe bekommt rechts Platz dafuer. */
.anmeldung-pwfeld input{padding-right:78px}
.anmeldung-pwfeld .anmeldung-check{right:50px}
.anmeldung-auge{position:absolute;top:0;right:0;width:46px;height:100%;display:flex;align-items:center;
  justify-content:center;background:transparent;border:0;color:var(--text-3);cursor:pointer;
  border-radius:13px;padding:0;transition:color .2s}
.anmeldung-auge:hover{color:var(--accent-text)}
.anmeldung-auge svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}
.anmeldung-auge-aus{display:none}
.anmeldung-auge[aria-pressed="true"] .anmeldung-auge-an{display:none}
.anmeldung-auge[aria-pressed="true"] .anmeldung-auge-aus{display:block}
.anmeldung-auge[aria-pressed="true"]{color:var(--accent-text)}

/* --- Secure Action Track --- */
.anmeldung-bahn{position:relative;height:62px;margin-top:24px;padding:6px;border-radius:999px;
  background:linear-gradient(180deg,var(--bg-tief),var(--bg-tief-2));border:1px solid var(--border);overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(var(--schatten-rgb),.45),inset 0 0 0 1px rgba(var(--waesche-rgb),.015);
  transition:box-shadow .35s ease,border-color .35s ease}
.anmeldung-bahn.ist-bereit{border-color:rgba(0,201,167,.22);
  box-shadow:inset 0 2px 4px rgba(var(--schatten-rgb),.45),0 0 34px -14px rgba(0,201,167,.75)}
/* Einmaliger Lichtimpuls, sobald die Anmeldung freigegeben ist. */
.anmeldung-bahn::after{content:"";position:absolute;top:0;bottom:0;left:-55%;width:48%;pointer-events:none;
  opacity:0;background:linear-gradient(90deg,transparent,rgba(0,201,167,.22),transparent)}
.anmeldung-bahn.ist-impuls::after{animation:anmeldungImpuls .9s var(--ease-out) 1}
@keyframes anmeldungImpuls{0%{opacity:0;transform:translateX(0)}20%{opacity:1}100%{opacity:0;transform:translateX(330%)}}

.anmeldung-schiene{position:absolute;top:6px;bottom:6px;left:6px;width:clamp(140px,45%,168px);
  transition:transform .32s var(--ease-lauf),width .32s var(--ease-lauf)}
/* Sehr zurueckhaltender Lichtsaum waehrend des Ausweichens. */
.anmeldung-schiene::before{content:"";position:absolute;inset:-8px;border-radius:999px;pointer-events:none;
  background:radial-gradient(58% 100% at 50% 50%,rgba(0,201,167,.22),transparent 72%);
  opacity:0;transition:opacity .3s ease}
.anmeldung-schiene.ist-weicht::before{opacity:1}
.anmeldung-bahn.ist-arbeitet .anmeldung-schiene{width:calc(100% - 12px)}

.anmeldung-senden{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:100%;padding:0 16px;border:1px solid var(--surface-up);border-radius:999px;
  background:var(--surface-up);color:var(--text-2);white-space:nowrap;overflow:hidden;
  font-family:var(--font-display);font-size:.9375rem;font-weight:600;cursor:default;
  transition:background-color .32s ease,color .32s ease,border-color .32s ease,box-shadow .32s ease,
             opacity .32s ease,transform .2s var(--ease-lauf)}
.anmeldung-senden[aria-disabled="true"]{opacity:.7}
.anmeldung-bahn.ist-bereit .anmeldung-senden{opacity:1;cursor:pointer;border-color:transparent;
  background:linear-gradient(135deg,#00C9A7 0%,var(--accent-hell) 100%);color:var(--accent-ink);
  box-shadow:0 8px 22px -10px rgba(0,201,167,.9)}
@media(hover:hover) and (pointer:fine){
  .anmeldung-bahn.ist-bereit .anmeldung-senden:hover{transform:scale(1.015);
    background:linear-gradient(115deg,var(--accent-hell) 0%,#00C9A7 100%);
    box-shadow:0 10px 28px -10px rgba(0,201,167,1)}
  .anmeldung-bahn.ist-bereit .anmeldung-senden:hover .anmeldung-pfeil{transform:translateX(3px)}
}
.anmeldung-bahn.ist-bereit .anmeldung-senden:active{transform:scale(.985)}
.anmeldung-senden[disabled]{cursor:default}
.anmeldung-senden .btn-arrow,.anmeldung-pfeil{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2;flex:0 0 auto;transition:transform .2s}
.anmeldung-spinner{display:none;width:15px;height:15px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(0,38,31,.28);border-top-color:var(--accent-ink);animation:anmeldungDreht .7s linear infinite}
@keyframes anmeldungDreht{to{transform:rotate(360deg)}}
.anmeldung-haken{display:none;width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 auto}
.anmeldung-senden.ist-laedt .anmeldung-spinner{display:block}
.anmeldung-senden.ist-laedt .anmeldung-pfeil{display:none}
.anmeldung-senden.ist-fertig .anmeldung-haken{display:block}
.anmeldung-senden.ist-fertig .anmeldung-pfeil,.anmeldung-senden.ist-fertig .anmeldung-spinner{display:none}

/* --- Statuszeile unter dem Track --- */
.anmeldung-status{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:15px;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.05em;color:var(--text-3);
  text-align:center;transition:color .32s ease}
.anmeldung-status-punkt{width:7px;height:7px;border-radius:50%;background:var(--gedaempft);flex:0 0 auto;
  transition:background-color .32s ease,box-shadow .32s ease}
.anmeldung-status.ist-bereit{color:var(--accent-text)}
.anmeldung-status.ist-bereit .anmeldung-status-punkt{background:var(--accent);
  box-shadow:0 0 0 4px rgba(0,201,167,.14);animation:anmeldungAtmet 2.6s ease-in-out infinite}
@keyframes anmeldungAtmet{0%,100%{box-shadow:0 0 0 3px rgba(0,201,167,.10)}50%{box-shadow:0 0 0 6px rgba(0,201,167,.03)}}

/* --- Fuss --- */
.anmeldung-fuss{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:11px}
.anmeldung-schild{width:17px;height:17px;stroke:var(--text-3);fill:none;stroke-width:1.4;flex:0 0 auto}
.anmeldung-fuss-text{font-size:.75rem;line-height:1.45;color:var(--text-2)}
.anmeldung-fuss-text small{display:block;font-size:.6875rem;color:var(--text-3)}
.anmeldung-sitzung{margin-left:auto;font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);white-space:nowrap;opacity:.8}

.anmeldung-schliessen{position:absolute;top:14px;right:14px;width:38px;height:38px;display:flex;
  align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);
  border-radius:11px;color:var(--text-2);cursor:pointer;padding:0;transition:border-color .2s,color .2s}
.anmeldung-schliessen:hover{border-color:var(--accent-text);color:var(--accent-text)}
.anmeldung-schliessen svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Fehlversuch: eine sehr kleine seitliche Bewegung, kein Ruetteln. */
@keyframes anmeldungStoss{0%,100%{transform:translateX(0)}22%{transform:translateX(-4px)}
  48%{transform:translateX(4px)}74%{transform:translateX(-2px)}}
.anmeldung.ist-offen .anmeldung-box.ist-stoss{animation:anmeldungStoss .2s ease-in-out 1}

/* Auf kleinen Geraeten nahezu volle Breite und ein Fenster, das mit der
   Tastatur mitwaechst: 100dvh beruecksichtigt die eingeblendete Tastatur,
   dadurch bleibt der Anmeldeknopf erreichbar. */
@media(max-width:560px){
  .anmeldung{padding-left:18px;padding-right:18px;align-items:flex-start}
  .anmeldung-box{max-width:none;margin:0 auto}
  .anmeldung-inhalt{padding:24px 20px}
  .anmeldung-schliessen{top:10px;right:10px}
  .anmeldung-kopf{padding-right:42px;margin-bottom:22px;gap:10px}
  .anmeldung-logo{height:48px}
  .anmeldung-kennung{margin-bottom:22px}
  .anmeldung-bahn{height:58px}
  .anmeldung-schiene{width:clamp(132px,46%,160px)}
  .anmeldung-sitzung{display:none}
}
@media(max-width:400px){
  .anmeldung-eyebrow{font-size:.5rem;letter-spacing:.1em;gap:6px;padding:4px 10px}
  .anmeldung-logo{height:44px}
}
@supports (height:100dvh){
  .anmeldung{max-height:100dvh}
}
@media(max-height:660px){
  .anmeldung{align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){
  .anmeldung-schleier,.anmeldung-box,.anmeldung-schiene,.anmeldung-senden,
  .anmeldung-check,.anmeldung-bahn,.anmeldung-status,.anmeldung-status-punkt{transition:none!important}
  .anmeldung-box{transform:none!important}
  .anmeldung-spinner,.anmeldung-raster::before,.anmeldung-raster::after,
  .anmeldung-bahn::after,.anmeldung-status.ist-bereit .anmeldung-status-punkt{animation:none!important}
  .anmeldung.ist-offen .anmeldung-box.ist-stoss{animation:none!important}
  .anmeldung.ist-autorisiert .anmeldung-box{transform:none!important}
  .anmeldung-bahn.ist-bereit .anmeldung-senden:hover,
  .anmeldung-bahn.ist-bereit .anmeldung-senden:active{transform:none!important}
}

/* ===== 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}
}

/* assets/css/content-a1a81172578f.css */

/* =========================================================================
   Nur fuer webdesign.html
   =========================================================================
   Alles andere kommt aus dem gemeinsamen Stylesheet der Seite. Hier stehen
   ausschliesslich die Bausteine, die es auf der Startseite nicht gibt -
   und auch die greifen nur auf vorhandene Themenwerte zu, damit Hell und
   Dunkel ohne eine einzige zusaetzliche Regel funktionieren.
   ========================================================================= */

/* Aktiver Navigationspunkt. Ausgezeichnet ueber aria-current, damit
   Hilfsmittel ihn ebenfalls als aktuelle Seite melden. */
.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)}

/* --- Kopfbereich mit Horizontbogen ------------------------------------
   Die Startseite traegt die Knotenkugel, diese Seite bekommt ein eigenes
   Zeichen: den unteren Rand einer sehr grossen Kugel, die zum groessten
   Teil oberhalb des Bildausschnitts liegt. Sichtbar bleibt nur ihre
   leuchtende Kante - ein Horizont, unter dem die Ueberschrift steht.

   Reines CSS: ein Kreis, eine Kante, zwei Verlaeufe. Keine Leinwand, kein
   Bild, keine Bibliothek, nichts, was beim Scrollen gerechnet werden muss.
   Deshalb kostet es auch auf dem Telefon nichts. */
.wd-hero{position:relative;padding:clamp(150px,19vw,240px) 0 clamp(64px,8vw,104px);overflow:hidden;
  border-bottom:1px solid var(--border);isolation:isolate}

/* Der Bogen. Der Kreis ist breiter als das Fenster und um 78 Prozent nach
   oben geschoben - sichtbar bleibt nur die untere Kappe. */
.wd-hero-bogen{position:absolute;left:50%;top:0;width:min(2400px,250vw);aspect-ratio:1;
  transform:translate(-50%,-78%);border-radius:50%;pointer-events:none;z-index:0;
  border:1px solid rgba(var(--akzent-rgb),.30);
  background:radial-gradient(circle at 50% 100%,
    rgba(var(--akzent-rgb),.11) 0%,rgba(var(--akzent-rgb),.035) 36%,transparent 60%);
  box-shadow:0 26px 150px -16px rgba(var(--akzent-rgb),.26),
             inset 0 -26px 90px -44px rgba(var(--akzent-rgb),.60)}

/* Der helle Punkt am Scheitel: dort, wo die Kante dem Betrachter am
   naechsten ist, wird sie kraeftiger und blueht aus. */
.wd-hero-bogen::after{content:"";position:absolute;left:50%;bottom:-1px;
  width:min(760px,62vw);height:3px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(var(--akzent-rgb),.85),transparent);
  filter:blur(1px)}

/* Sehr sparsames Sternenfeld. Sieben Streuungen an unregelmaessigen
   Stellen, damit kein Raster erkennbar wird. */
.wd-hero-sterne{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%,rgba(var(--waesche-rgb),.55),transparent),
    radial-gradient(1.2px 1.2px at 71% 14%,rgba(var(--waesche-rgb),.42),transparent),
    radial-gradient(1.6px 1.6px at 43% 34%,rgba(var(--akzent-rgb),.50),transparent),
    radial-gradient(1.1px 1.1px at 88% 30%,rgba(var(--waesche-rgb),.38),transparent),
    radial-gradient(1.3px 1.3px at 9% 46%,rgba(var(--waesche-rgb),.30),transparent),
    radial-gradient(1.5px 1.5px at 62% 44%,rgba(var(--akzent-rgb),.34),transparent),
    radial-gradient(1.1px 1.1px at 30% 8%,rgba(var(--waesche-rgb),.34),transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 78%)}

/* Sehr langsames Atmen des Scheins: kein Blinken, keine Bewegung im
   Sichtfeld, nur eine Helligkeit, die sich ueber zehn Sekunden hebt und
   senkt. Bei reduzierter Bewegung steht es still - dafuer sorgt der
   globale Block am Ende des Stylesheets. */
@keyframes wdBogenAtem{0%,100%{opacity:.82}50%{opacity:1}}
.js .wd-hero-bogen{animation:wdBogenAtem 10s var(--ease-in-out) infinite}

.wd-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(var(--flaeche-rgb),.45) 0%,transparent 66%)}
.wd-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.42;
  background:
    repeating-linear-gradient(90deg,rgba(var(--waesche-rgb),.028) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,rgba(var(--waesche-rgb),.028) 0 1px,transparent 1px 46px);
  -webkit-mask-image:radial-gradient(ellipse 86% 64% at 50% 18%,#000,transparent 74%);
  mask-image:radial-gradient(ellipse 86% 64% at 50% 18%,#000,transparent 74%)}

/* Auf hellem Grund ist ein Leuchten fehl am Platz - dort wird aus dem
   Schein ein farbiger Saum. Das ist die eine Stelle, an der sich die
   Themen nicht nur im Farbwert unterscheiden, sondern im Mittel: Licht
   gibt es nur im Dunkeln. */
:root[data-theme="light"] .wd-hero-bogen{
  border-color:rgba(var(--akzent-rgb),.40);
  background:radial-gradient(circle at 50% 100%,
    rgba(var(--akzent-rgb),.10) 0%,rgba(var(--akzent-rgb),.04) 34%,transparent 58%);
  box-shadow:0 22px 90px -26px rgba(var(--akzent-rgb),.34),
             inset 0 -20px 70px -50px rgba(var(--akzent-rgb),.40)}
:root[data-theme="light"] .wd-hero-sterne{opacity:.30}
:root[data-theme="light"] .wd-hero-bogen::after{
  background:linear-gradient(90deg,transparent,rgba(var(--akzent-rgb),.70),transparent)}
.wd-hero>.container{position:relative;z-index:1}
.wd-hero-eyebrow{display:flex;align-items:center;gap:10px;row-gap:6px;flex-wrap:wrap;
  margin-bottom:clamp(18px,2.4vw,26px);font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.wd-hero-eyebrow .hero-line{width:32px;height:1px;background:var(--text-3);flex-shrink:0}
.wd-hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2.375rem,6.4vw,4.5rem);max-width:17ch;overflow-wrap:break-word}
.wd-hero h1 .akzent{color:var(--accent-text)}
.wd-hero-sub{margin-top:clamp(20px,2.8vw,28px);max-width:62ch;color:var(--text-2);
  font-size:clamp(1rem,1.6vw,1.125rem);line-height:1.7}
.wd-hero-sub strong{color:var(--text-1);font-weight:500}
.wd-hero-aktionen{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.6vw,40px)}
.wd-hero-fakten{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(30px,4vw,44px);
  padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--border)}
.wd-hero-fakt{display:flex;align-items:center;gap:9px;font-size:.8125rem;color:var(--text-3);min-width:0}
.wd-hero-fakt svg{width:15px;height:15px;flex-shrink:0;stroke:var(--accent-text);fill:none;stroke-width:1.7}
.wd-hero-fakt strong{color:var(--text-2);font-weight:500}

/* --- Nutzenraster --- */
.wd-nutzen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,26px)}
.wd-nutzen-karte{padding:clamp(24px,3vw,32px);border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);min-width:0;
  transition:border-color .3s var(--ease-out),background .3s var(--ease-out),transform .35s var(--ease-out)}
.wd-nutzen-karte:hover{border-color:var(--border-accent);background:var(--surface-up);transform:translateY(-3px)}
.wd-nutzen-karte .num{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  color:var(--accent-text);display:block;margin-bottom:14px}
.wd-nutzen-karte h3{font-size:1.125rem;margin-bottom:10px;overflow-wrap:break-word}
.wd-nutzen-karte p{color:var(--text-2);font-size:.9375rem;line-height:1.7}

/* --- Bauformen: was ueberhaupt gebaut wird --- */
.wd-formen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,22px)}
.wd-form{display:flex;gap:18px;padding:clamp(22px,2.8vw,30px);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);min-width:0}
.wd-form-symbol{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--accent-dim);border:1px solid var(--border-accent)}
.wd-form-symbol svg{width:20px;height:20px;stroke:var(--accent-text);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.wd-form-text{min-width:0}
.wd-form-text h3{font-size:1.0625rem;margin-bottom:8px;overflow-wrap:break-word}
.wd-form-text p{color:var(--text-2);font-size:.9375rem;line-height:1.68}

/* --- Leistungsliste mit Haarlinien, wie die Preistafel --- */
.wd-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(32px,5vw,72px);border-top:1px solid var(--border)}
.wd-liste>div{padding:clamp(20px,2.6vw,26px) 0;border-bottom:1px solid var(--border);min-width:0}
.wd-liste h3{font-size:1rem;margin-bottom:8px;display:flex;align-items:baseline;gap:10px;overflow-wrap:break-word}
.wd-liste h3 span{font-family:var(--font-mono);font-size:.6875rem;color:var(--accent-text);flex-shrink:0}
.wd-liste p{color:var(--text-2);font-size:.9375rem;line-height:1.68}

/* --- Verzahnung Website und Hosting --- */
.wd-kette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,24px);
  counter-reset:kette}
.wd-kette-glied{position:relative;padding:clamp(22px,2.8vw,30px);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);min-width:0}
.wd-kette-glied::before{counter-increment:kette;content:counter(kette,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--accent-text);
  display:block;margin-bottom:12px}
.wd-kette-glied h3{font-size:1.0625rem;margin-bottom:9px;overflow-wrap:break-word}
.wd-kette-glied p{color:var(--text-2);font-size:.9375rem;line-height:1.68}
.wd-kette-pfeil{position:absolute;top:50%;right:calc(clamp(16px,2.2vw,24px) / -2 - 7px);
  width:14px;height:14px;transform:translateY(-50%);stroke:var(--text-3);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

/* --- Datenschutzblock: der eine Abschnitt mit farbiger Flaeche --- */
.wd-recht{border:1px solid var(--border-accent);border-radius:18px;
  background:linear-gradient(165deg,rgba(var(--akzent-rgb),.055),var(--surface) 46%);
  padding:clamp(28px,4vw,52px)}
.wd-recht-kopf{max-width:70ch;margin-bottom:clamp(26px,3.4vw,36px)}
.wd-recht-kopf h2{font-size:clamp(1.625rem,3.4vw,2.375rem);margin-bottom:14px;letter-spacing:-.02em;
  overflow-wrap:break-word}
.wd-recht-kopf p{color:var(--text-2);font-size:1rem;line-height:1.72}
.wd-recht-punkte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,24px)}
.wd-recht-punkt{display:flex;gap:13px;min-width:0}
.wd-recht-punkt svg{flex:0 0 auto;width:17px;height:17px;margin-top:3px;stroke:var(--accent-text);
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wd-recht-punkt strong{display:block;font-size:.9375rem;margin-bottom:5px;color:var(--text-1);font-weight:600}
.wd-recht-punkt p{color:var(--text-2);font-size:.875rem;line-height:1.65}
.wd-recht-fuss{margin-top:clamp(22px,3vw,30px);padding-top:clamp(18px,2.4vw,24px);
  border-top:1px solid var(--border);color:var(--text-3);font-size:.8125rem;line-height:1.65;max-width:78ch}

/* --- Tools & Technologien ------------------------------------------------
   Eine Liste mit Haarlinien statt einer Logowand: Die Marken sollen den
   Text stuetzen, nicht die Seite uebernehmen. Das Markenfeld links ist
   56x56 gross und nimmt spaeter das offizielle Logo genau dort auf, wo
   jetzt die Ziffer steht - das Layout aendert sich dadurch nicht. */
.tool-liste{border-top:1px solid var(--border)}
.tool-zeile{display:grid;grid-template-columns:56px minmax(0,1fr);gap:clamp(16px,2.4vw,28px);
  align-items:start;padding:clamp(22px,2.8vw,30px) 0;border-bottom:1px solid var(--border)}
.tool-marke{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  border:1px solid var(--border);border-radius:13px;background:var(--surface);overflow:hidden;
  flex-shrink:0;transition:border-color .3s var(--ease-out),background .3s var(--ease-out)}
.tool-zeile:hover .tool-marke{border-color:var(--border-accent);background:var(--surface-up)}
.tool-nummer{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;color:var(--text-3)}
/* GitHub und OpenAI fuehren ihre Marke bewusst einfarbig. Sie liegen deshalb
   direkt im Markup statt als <img> und erben ueber currentColor die
   Schriftfarbe - dunkel auf hellem Grund, hell auf dunklem. Als Bilddatei
   waere die Marke in einem der beiden Themen unsichtbar. */
.tool-marke{color:var(--text-1)}
.tool-logo-einfarbig{width:26px;height:26px;display:block}
/* Logos werden nur eingepasst, nie beschnitten oder verzerrt: object-fit
   contain haelt das Originalverhaeltnis, das Polster haelt den Freiraum. */
.tool-logo{display:block;width:auto;height:auto;max-width:calc(100% - 16px);max-height:calc(100% - 16px);
  object-fit:contain}
.tool-text{min-width:0}
.tool-gruppe{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);font-weight:500;
  margin:clamp(30px,4vw,44px) 0 clamp(10px,1.4vw,14px)}
.tool-gruppe:first-of-type{margin-top:clamp(22px,2.8vw,30px)}
.tool-text h4{font-size:1.0625rem;margin-bottom:8px;display:flex;align-items:baseline;gap:10px;
  flex-wrap:wrap;overflow-wrap:break-word}
.tool-text h3{font-size:1.0625rem;margin-bottom:8px;display:flex;align-items:baseline;gap:10px;
  flex-wrap:wrap;overflow-wrap:break-word}
.tool-haus{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);font-weight:400;padding:3px 8px;border:1px solid var(--border);border-radius:100px;
  flex-shrink:0}
.tool-text p{color:var(--text-2);font-size:.9375rem;line-height:1.68;max-width:74ch}
.tool-premium{margin:0 0 clamp(26px,3.4vw,34px);padding:clamp(16px,2vw,20px) clamp(18px,2.2vw,22px);
  border:1px solid var(--border-accent);border-radius:14px;background:var(--accent-dim);
  color:var(--text-2);font-size:.9375rem;line-height:1.7;max-width:80ch}
.tool-premium strong{display:block;color:var(--text-1);font-weight:600;margin-bottom:4px}
.tool-hinweis{margin-top:clamp(22px,3vw,30px);padding-left:clamp(14px,2vw,18px);
  border-left:2px solid var(--border-accent);color:var(--text-3);font-size:.8125rem;
  line-height:1.65;max-width:84ch}
@media(max-width:560px){
  .tool-zeile{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .tool-marke{width:44px;height:44px;border-radius:11px}
  .tool-logo{max-width:calc(100% - 12px);max-height:calc(100% - 12px)}
  .tool-logo-einfarbig{width:21px;height:21px}
  .tool-text h3{gap:8px}
}

/* --- Abschluss --- */
.wd-schluss{text-align:center;max-width:720px;margin:0 auto}
.wd-schluss h2{font-size:clamp(1.75rem,4vw,2.75rem);margin-bottom:16px;letter-spacing:-.02em;
  overflow-wrap:break-word}
.wd-schluss p{color:var(--text-2);font-size:1.0625rem;line-height:1.7;margin-bottom:clamp(26px,3.4vw,34px)}
.wd-schluss-aktionen{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* --- Schmalere Bildschirme --- */
@media(max-width:1000px){
  .wd-nutzen,.wd-kette{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wd-kette-pfeil{display:none}
}
@media(max-width:760px){
  .wd-nutzen,.wd-formen,.wd-liste,.wd-kette,.wd-recht-punkte{grid-template-columns:minmax(0,1fr)}
  .wd-liste>div:first-child{border-top:none}
  .wd-hero h1{max-width:none}
  .wd-hero-aktionen .btn,.wd-schluss-aktionen .btn{width:100%;justify-content:center}
}
@media(max-width:420px){
  .wd-form{flex-direction:column;gap:14px}
}