/* ---------- CI-Schrift K2D ----------
   Bewusst selbst ausgeliefert und nicht ueber fonts.googleapis.com
   eingebunden: Eine Einbindung per URL uebertraegt die IP-Adresse jedes
   Besuchers an Google. Das LG Muenchen I hat dafuer 2022 Schadensersatz
   zugesprochen (Az. 3 O 17493/20), und es passt auch nicht zu der Aussage
   "keine Drittanbieter" auf dieser Seite. Die Dateien sind auf Latin
   beschnitten, deshalb je rund 14 KB statt 96 KB.
   Lizenz: SIL Open Font License 1.1, siehe assets/fonts/K2D-OFL.txt */
@font-face {
  font-family: "K2D";
  src: url("/assets/fonts/k2d-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "K2D";
  src: url("/assets/fonts/k2d-extrabold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ============================================================
   WindinX GmbH – windinx.de
   Hybrid Design System · CI-Farben (Logo: Hellblau/Rot/Anthrazit)
   Heller Grundton + dunkle Anthrazit-Sektionen · keine ext. Fonts
   ============================================================ */

:root {
  /* CI-Farben aus dem Logo */
  --blue: #acc7dc;        /* Logo-Hellblau (CI) */
  --blue-deep: #5d8db5;   /* kräftigeres Blau für Links/Akzente */
  --red: #c96e7a;         /* Logo-Rot (CI) */
  --red-deep: #ad4f59;
  --anthracite: #333d40;  /* Logo-Anthrazit (CI) */
  --anthracite-2: #2a3234;

  /* Helles Grundthema */
  --bg: #f6f8fa;
  --surface: #ffffff;
  --ink: #2e363c;
  --muted: #5f6b74;
  --border: #dfe6ec;
  --border-strong: #c9d4dd;

  /* Dunkle Sektionen */
  --d-ink: #eef2f5;
  --d-muted: #b4bfc8;
  --d-border: rgba(255, 255, 255, 0.13);
  --d-card: rgba(255, 255, 255, 0.05);

  --ok: #3f9d6f;
  --grad: linear-gradient(100deg, var(--blue-deep), var(--blue));
  --radius: 16px;
  --shadow: 0 10px 34px rgba(46, 54, 60, 0.09);
  --font-ci: "K2D", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(143, 179, 209, 0.4); }

img { max-width: 100%; display: block; }

a { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Dezentes Hintergrundraster im hellen Bereich */
.bg-glow {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(700px 500px at 88% -5%, rgba(143, 179, 209, 0.16), transparent 65%),
    radial-gradient(600px 450px at -8% 45%, rgba(196, 96, 106, 0.07), transparent 60%);
}
.bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6;
  background-image:
    linear-gradient(rgba(46, 54, 60, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 54, 60, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ---------- Header ---------- */
/* Kopf- und Fussleiste tragen dieselbe CI-Flaeche. Das rahmt die Seite oben
   und unten in der Hausfarbe. Halbtransparentes Weiss ueber einem dunklen
   Hero war vorher genau der Grund, warum die Leiste grau wirkte: Sie hat die
   Flaeche darunter durchgereicht. Deckend kann das nicht mehr passieren. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--anthracite-2);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.35s, border-color 0.35s;
}
.site-header.scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 6px 26px rgba(28, 36, 40, 0.22);
}
.site-header .nav-links a { color: var(--d-muted); }
.site-header .nav-links a:hover { color: #fff; }
/* Die Schaltflaeche muss sich vom Anthrazit abheben, deshalb hell statt dunkel. */
.site-header .nav > .btn-primary {
  background: #fff; color: var(--anthracite);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.site-header .nav > .btn-primary:hover { background: var(--blue); color: var(--anthracite); }
.site-header .nav-toggle { border-color: rgba(255, 255, 255, 0.28); color: var(--d-ink); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
}
.logo { display: inline-flex; align-items: center; }
.logo img { height: 46px; width: auto; }
.logo:hover { text-decoration: none; }

.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  color: var(--muted); font-size: 0.95rem; font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 12px;
  font-weight: 600; font-size: 0.98rem; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary {
  background: var(--anthracite); color: #fff;
  box-shadow: 0 6px 20px rgba(58, 66, 73, 0.28);
}
.btn-primary:hover { background: var(--anthracite-2); box-shadow: 0 10px 28px rgba(58, 66, 73, 0.38); }
.btn-ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--blue-deep); color: var(--blue-deep); }
.btn-sm { padding: 9px 18px; font-size: 0.9rem; border-radius: 10px; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--border-strong);
  border-radius: 10px; width: 42px; height: 42px; cursor: pointer; color: var(--ink);
  font-size: 1.2rem;
}

/* ---------- Dunkle Sektionen (Anthrazit wie Logo-Variante) ---------- */
.dark {
  background: linear-gradient(180deg, var(--anthracite) 0%, var(--anthracite-2) 100%);
  color: var(--d-ink);
}
.dark a { color: var(--blue); }
.dark .kicker { color: var(--blue); }
.dark .section-head p, .dark p { color: var(--d-muted); }
.dark .btn-ghost {
  background: rgba(255, 255, 255, 0.06); color: var(--d-ink);
  border-color: var(--d-border);
}
.dark .btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- Hero ----------
   Das Bild traegt keinen Text mehr, der steht im Kasten darueber. Genau
   deshalb darf es scharf, farbig und ungedimmt bleiben. Ein Foto, das eine
   Ueberschrift lesbar halten soll, muss zwangslaeufig zugedeckt werden - und
   dieses Zudecken war der graue Schleier der ersten Fassungen. Der noetige
   Kontrast steckt jetzt im Kasten, nicht ueber der ganzen Flaeche. */
.hero {
  position: relative; min-height: 88vh;
  display: flex; align-items: center;
  padding: 152px 0 100px;
  overflow: hidden;
  background: var(--anthracite-2);
  color: var(--d-ink);
}
/* Die Startansicht darf breiter laufen als der Rest der Seite. Sonst
   bleiben die Fenster auf einem grossen Schirm klein, weil der Inhalt bei
   1180 Pixeln endet. */
.hero .wrap {
  position: relative; z-index: 1; max-width: min(1460px, 94vw);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 3vw, 60px); align-items: center;
}

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(143, 179, 209, 0.16); border: 1px solid rgba(143, 179, 209, 0.42);
  color: var(--blue); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  margin-bottom: 22px;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

.hero h1 {
  font-family: var(--font-ci);
  font-size: clamp(2.5rem, 5.4vw, 4.2rem);
  line-height: 1.02; letter-spacing: -0.012em; font-weight: 800;
  margin-bottom: 22px; color: #fff;
}
/* Weiss, Blau, Weiss - so war es richtig. Drei Farben in einer Zeile wirken
   unruhig, und das Logo-Rot traegt in dieser Schriftgroesse nicht. */
.hero h1 .grad-blue { color: var(--blue); }
.hero h1 .grad-red { color: #fff; }
.hero .sub { color: var(--d-muted); font-size: 1.16rem; max-width: 520px; margin-bottom: 34px; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* Die Startansicht arbeitet jetzt mit PowerShell-Fenstern, das alte
   Terminal im macOS-Stil ist ersatzlos entfallen. Nur die Blinkanimation
   bleibt, sie treibt den Cursor in den Fenstern. */
@keyframes blink { 50% { opacity: 0; } }

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  color: rgba(46, 54, 60, 0.38); font-size: 1.4rem; z-index: 1;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

/* ---------- Stats (hell) ---------- */
.stats { border-bottom: 1px solid var(--border); background: var(--surface); }
.stats .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding-top: 44px; padding-bottom: 44px; text-align: center;
}
.stat b {
  display: block; font-size: 2.3rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--blue-deep);
}
.stat span { color: var(--muted); font-size: 0.92rem; }

/* ---------- Sections ---------- */
section { padding: 100px 0; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.kicker {
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue-deep); margin-bottom: 14px; display: block;
}
h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 16px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }

/* ---------- Karten ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 28px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(320px 200px at var(--mx, 50%) var(--my, 0%), rgba(143, 179, 209, 0.14), transparent 65%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: var(--blue); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card .icon {
  width: 50px; height: 50px; border-radius: 13px; margin-bottom: 20px;
  background: rgba(143, 179, 209, 0.14); border: 1px solid rgba(143, 179, 209, 0.4);
  display: grid; place-items: center; font-size: 1.4rem;
}
.card h3 { font-size: 1.22rem; margin-bottom: 10px; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 0.96rem; margin-bottom: 16px; }
.card ul { list-style: none; margin-bottom: 18px; }
.card ul li {
  color: var(--muted); font-size: 0.9rem; padding: 4px 0 4px 22px; position: relative;
}
.card ul li::before {
  content: "▸"; position: absolute; left: 4px; color: var(--blue-deep); font-size: 0.8rem;
}
.card .more { font-weight: 600; font-size: 0.93rem; display: inline-flex; align-items: center; gap: 6px; color: var(--blue-deep); }
.card .more::after { content: "→"; transition: transform 0.25s; }
.card:hover .more::after { transform: translateX(5px); }

/* ---------- Tech Marquee ---------- */
.marquee-section {
  padding: 40px 0; overflow: hidden;
  background: var(--surface);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.marquee { display: flex; gap: 16px; width: max-content; animation: scrollX 42s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(-50%); } }
.chip {
  padding: 10px 22px; border-radius: 999px; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--border);
  font-family: var(--mono); font-size: 0.88rem; color: var(--muted);
  transition: color 0.2s, border-color 0.2s;
}
.chip:hover { color: var(--blue-deep); border-color: var(--blue); }


/* ---------- Zitat ---------- */
.quote-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  background: linear-gradient(140deg, rgba(143, 179, 209, 0.14), rgba(143, 179, 209, 0.05));
  border: 1px solid var(--border-strong); border-radius: 22px; padding: 48px;
  margin-top: 52px;
}
.quote-card blockquote { font-size: 1.35rem; line-height: 1.5; font-weight: 600; letter-spacing: -0.01em; }
.quote-card .who { margin-top: 18px; color: var(--muted); font-size: 0.95rem; }
.quote-card .who b { color: var(--ink); display: block; font-size: 1.02rem; }

/* ---------- Prozess ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px;
}
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--mono); font-size: 2.2rem; font-weight: 700;
  color: var(--blue-deep);
  display: block; margin-bottom: 14px;
}
.step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
.contact-card { text-align: center; padding: 36px 24px; }
.contact-card .icon { margin: 0 auto 18px; }
.contact-card h3 { margin-bottom: 6px; }
.contact-card a { font-size: 1.02rem; font-weight: 600; }
.contact-card p { margin-bottom: 0; }

/* ---------- CTA-Band (dunkel) ---------- */
.cta-band {
  text-align: center; padding: 90px 24px;
  background:
    radial-gradient(600px 320px at 25% 0%, rgba(143, 179, 209, 0.16), transparent 62%),
    linear-gradient(140deg, var(--anthracite), var(--anthracite-2));
  border-radius: 26px;
  max-width: calc(var(--maxw) - 48px); margin: 0 auto;
  color: var(--d-ink);
  box-shadow: 0 24px 60px rgba(46, 54, 60, 0.25);
}
.cta-band h2 { margin-bottom: 14px; color: #fff; }
.cta-band p { color: var(--d-muted); max-width: 560px; margin: 0 auto 30px; }

/* ---------- Footer (dunkel) ---------- */
.site-footer {
  background: var(--anthracite-2); color: var(--d-ink);
  padding: 56px 0 36px; margin-top: 40px;
}
.site-footer .logo img { height: 52px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.footer-grid h4 { font-size: 0.95rem; margin-bottom: 14px; color: #fff; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: var(--d-muted); font-size: 0.92rem; }
.footer-grid a:hover { color: var(--blue); }
.footer-grid .about { color: var(--d-muted); font-size: 0.92rem; max-width: 300px; margin-top: 14px; }
.footer-bottom {
  border-top: 1px solid var(--d-border); padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: var(--d-muted); font-size: 0.85rem;
}
.footer-bottom a { color: var(--d-muted); }
.footer-bottom a:hover { color: var(--blue); }

/* ---------- Unterseiten ---------- */
.page-hero {
  padding: 175px 0 75px; position: relative;
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(143, 179, 209, 0.18), transparent 60%),
    linear-gradient(180deg, #eef3f7 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.breadcrumb { font-size: 0.86rem; color: var(--muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue-deep); }
.page-hero .badge {
  background: rgba(143, 179, 209, 0.16); border-color: rgba(93, 141, 181, 0.4);
  color: var(--blue-deep);
}
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 18px; max-width: 800px; }
.page-hero h1 .accent { color: var(--blue-deep); }
.page-hero .sub { color: var(--muted); font-size: 1.15rem; max-width: 700px; }

.content-section { padding: 60px 0; }
.content-section h2 { font-size: 1.7rem; margin-bottom: 18px; }
.content-section p { color: var(--muted); margin-bottom: 18px; max-width: 780px; }
.content-section strong { color: var(--ink); }

.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 26px 0; list-style: none; max-width: 860px; }
.feature-list li {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px 14px 44px; position: relative; color: var(--ink); font-size: 0.95rem;
}
.feature-list li::before {
  content: "✓"; position: absolute; left: 17px; color: var(--ok); font-weight: 700;
}

/* FAQ */
.faq { max-width: 820px; }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 12px; overflow: hidden; transition: border-color 0.25s;
}
.faq details[open] { border-color: var(--blue); }
.faq summary {
  padding: 18px 22px; cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--blue-deep); transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 22px 20px; color: var(--muted); }

/* ---------- Reveal Animationen ---------- */
/* Sicherheitsnetz: Inhalt ist standardmäßig SICHTBAR. Erst wenn JS aktiv ist
   (html.js), wird er für die Scroll-Animation ausgeblendet. Fällt JS aus,
   bleibt der Inhalt sichtbar (statt für immer unsichtbar). */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; } .reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.40s; }

/* ---------- Legal ---------- */
.legal { max-width: 820px; padding: 170px 24px 90px; margin: 0 auto; }
.legal h1 { font-size: 2.3rem; margin-bottom: 30px; letter-spacing: -0.02em; }
.legal h2 { font-size: 1.35rem; margin: 36px 0 12px; }
.legal p, .legal li { color: var(--muted); margin-bottom: 12px; }
.legal ul { padding-left: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .quote-card { grid-template-columns: 1fr; padding: 36px 28px; }
}
@media (max-width: 700px) {
  .nav-links {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: flex-start;
    background: var(--anthracite-2);
    padding: 24px; gap: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 18px 40px rgba(28, 36, 40, 0.28);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  /* Die Schaltflaeche in der Kopfzeile bleibt auch auf dem Telefon stehen.
     Wer eine Stoerung hat, sucht den Remotesupport, und zwar sofort. Nur
     der Text wird kuerzer gesetzt, damit Logo, Schaltflaeche und Menue
     nebeneinander passen. */
  .nav > .btn-primary { padding: 8px 13px; font-size: 0.82rem; border-radius: 9px; }
  .nav { height: 68px; }
  html { scroll-padding-top: 80px; }

  section { padding: 70px 0; }
  .hero { min-height: auto; padding: 128px 0 76px; }
  .hero .sub { font-size: 1.06rem; }
  .grid-3 { grid-template-columns: 1fr; }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .steps { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .feature-list { grid-template-columns: 1fr; }
  .quote-card { padding: 30px 22px; }
  .quote-card blockquote { font-size: 1.15rem; }
  .cta-band { padding: 64px 22px; border-radius: 20px; }
  .legal { padding: 140px 20px 70px; }
  .page-hero { padding: 140px 0 60px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   TOOLS / CHECKS
   ============================================================ */
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tool {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; transition: border-color 0.25s, box-shadow 0.25s;
}
.tool:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.tool-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.tool-head .icon {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px;
  background: rgba(143, 179, 209, 0.14); border: 1px solid rgba(143, 179, 209, 0.4);
  display: grid; place-items: center; font-size: 1.35rem;
}
.tool-head h3 { font-size: 1.18rem; margin-bottom: 4px; }
.tool-head p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.tool-form { display: flex; gap: 10px; flex-wrap: wrap; }
.tool-form input[type="text"] {
  flex: 1; min-width: 180px; padding: 12px 16px; font-size: 0.98rem;
  border: 1px solid var(--border-strong); border-radius: 11px;
  background: var(--bg); color: var(--ink); font-family: var(--font);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tool-form input[type="text"]:focus {
  outline: none; border-color: var(--blue-deep);
  box-shadow: 0 0 0 3px rgba(143, 179, 209, 0.25);
}
.tool-note { font-size: 0.82rem; color: var(--muted); margin-top: 12px; }

/* Ergebnisbereich */
.result { margin-top: 20px; display: none; }
.result.show { display: block; animation: fadeUp 0.4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.result-score {
  display: flex; align-items: center; gap: 18px; padding: 18px 20px;
  border-radius: 13px; margin-bottom: 16px; border: 1px solid var(--border);
}
.gauge {
  --v: 0; --c: var(--blue-deep);
  width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--border) 0);
  display: grid; place-items: center; position: relative;
}
.gauge::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface);
}
.gauge b { position: relative; z-index: 1; font-size: 1.1rem; }
.result-score .st b { font-size: 1.05rem; display: block; }
.result-score .st span { color: var(--muted); font-size: 0.9rem; }

.check-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.check-item:last-child { border-bottom: none; }
.badge-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: #fff;
}
.badge-dot.ok { background: var(--ok); }
.badge-dot.warn { background: #d9a441; }
.badge-dot.fail { background: var(--red); }
.badge-dot.info { background: var(--blue-deep); }
.check-item .ci-title { font-weight: 600; font-size: 0.96rem; }
.check-item .ci-detail { color: var(--muted); font-size: 0.85rem; word-break: break-word; }

.spinner {
  width: 20px; height: 20px; border: 2.5px solid var(--border-strong);
  border-top-color: var(--blue-deep); border-radius: 50%;
  animation: spin 0.7s linear infinite; display: inline-block; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.result-msg {
  padding: 14px 18px; border-radius: 11px; font-size: 0.92rem;
  background: rgba(143, 179, 209, 0.12); border: 1px solid rgba(143, 179, 209, 0.35);
  color: var(--ink);
}
.result-msg.warn { background: rgba(217, 164, 65, 0.12); border-color: rgba(217, 164, 65, 0.4); }
.result-msg.fail { background: rgba(196, 96, 106, 0.1); border-color: rgba(196, 96, 106, 0.4); }

.api-warning {
  background: rgba(217, 164, 65, 0.1); border: 1px solid rgba(217, 164, 65, 0.4);
  border-radius: 12px; padding: 14px 18px; font-size: 0.9rem; color: var(--ink);
  margin-bottom: 30px;
}

@media (max-width: 760px) { .tools-grid { grid-template-columns: 1fr; } }

/* ============================================================
   BILDSPRACHE / MEDIA-KOMPONENTEN  (v2)
   ============================================================ */

/* ---------- Bildrahmen ---------- */
.media-frame {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 26px 60px rgba(46, 54, 60, 0.16);
  background: var(--anthracite-2);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.media-frame.ar-4x3 { aspect-ratio: 4 / 3; }
.media-frame.ar-3x2 { aspect-ratio: 3 / 2; }
.media-frame.ar-16x9 { aspect-ratio: 16 / 9; }

/* Dezente Bildunterschrift/Quellenangabe */
.media-note { font-size: 0.78rem; color: var(--muted); margin-top: 10px; }

/* ---------- Hintergrund: Betriebs-Dashboard ----------
   Kein Foto. Das Dashboard ist reines HTML und CSS, es zeigt den Vorgang,
   um den es geht: Schwachstellen gehen zurueck, der Patchstand steigt, am
   Ende steht alles auf gruen. Helle Flaeche mit Kacheln im CI-Anthrazit,
   damit die Startansicht nicht duester wirkt und die Kacheln trotzdem
   Gewicht haben. */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Nur so viel Schleier, dass die Kulisse hinter Kasten und Fenstern
   zurueckbleibt, plus ein weicher Uebergang in die Sektion darunter. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(104deg, rgba(238, 244, 249, 0.34) 0%, rgba(238, 244, 249, 0.14) 48%, rgba(238, 244, 249, 0.06) 100%),
    linear-gradient(180deg, transparent 0%, transparent 90%, rgba(246, 248, 250, 0.92) 100%);
}

.dash {
  /* Alles im Dashboard haengt an diesen vier Werten. Sie wachsen mit der
     Fensterbreite, damit die Kulisse auf einem 27-Zoll-Schirm nicht wie
     eine geschrumpfte Version der Handyansicht wirkt. */
  --dash-gap: clamp(12px, 1.1vw, 22px);
  --dash-pad: clamp(13px, 1.05vw, 22px);
  --dash-sm: clamp(0.68rem, 0.62vw, 0.86rem);
  --dash-xs: clamp(0.64rem, 0.56vw, 0.8rem);

  position: absolute; inset: 0; z-index: 1;
  padding: clamp(84px, 6.4vw, 110px) clamp(18px, 2.1vw, 44px) clamp(26px, 2.4vw, 44px);
  display: flex; flex-direction: column;
  font-family: var(--font);
  opacity: 0; transition: opacity 0.9s ease;
  background:
    radial-gradient(1000px 560px at 80% 2%, rgba(93, 141, 181, 0.16), transparent 62%),
    radial-gradient(820px 520px at 4% 100%, rgba(201, 110, 122, 0.08), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #eef4f9 100%);
}
.dash.on { opacity: 1; }
/* Kasten und Fenster liegen in der Mitte, die Kacheln deshalb oben und
   unten, wo nichts sie verdeckt. Die mittlere Reihe fuellt den Rest.
   Alle Groessen skalieren mit der Fensterbreite, sonst bleibt auf einem
   grossen Schirm ein winziges Diagramm in einer riesigen Kachel stehen. */
.dash-mid {
  flex: 1; min-height: 0; margin-top: var(--dash-gap);
  display: grid;
  /* Der Kuchen bekommt die grosse Kachel, die Angriffserkennung eine
     gedeckelte Breite - ueber etwa 520 Pixel wirken drei Zeilen darin
     verloren. */
  grid-template-columns: 1.15fr 1fr minmax(320px, 0.92fr);
  gap: var(--dash-gap);
}

/* Kuchendiagramm: Es nimmt die Hoehe, die die Reihe hergibt, und waechst
   damit auf grossen Schirmen mit. Legende darunter. */
.panel-pie { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
/* Legende direkt hinter der Ueberschrift, nicht am rechten Rand: dort
   liegt der Textkasten darueber. */
.panel-pie .panel-label { gap: 14px; }
.pie-key {
  list-style: none; display: flex; gap: 10px;
  text-transform: none; letter-spacing: 0;
}
.pie-key li {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--dash-xs); color: #c3cfd8;
}
.pie-key li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.k-crit::before { background: #c96e7a; }
.k-high::before { background: #d8a455; }
.k-done::before { background: #4fb488; }
.pie-key b { font-variant-numeric: tabular-nums; color: #dbe4ea; font-weight: 600; }
/* Der Kreis fuellt die Kachel aus. Absolut positioniert, damit ein SVG mit
   Seitenverhaeltnis die Zeilenhoehe nicht von innen aufdruecken kann. */
.pie-wrap { position: relative; min-height: 0; overflow: hidden; }
.pie { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Gedreht wird innerhalb des SVG, nicht das Element selbst. Ein gedrehtes
   Rechteck haette sonst eine breitere Umgrenzung als die Kachel. */
.pie-rot { transform: rotate(-90deg); transform-origin: 50px 50px; }
.pie .seg {
  fill: none; stroke-width: 50;
  transition: stroke-dasharray 0.9s ease, stroke-dashoffset 0.9s ease;
}
.seg-done { stroke: #4fb488; }
.seg-high { stroke: #d8a455; }
.seg-crit { stroke: #c96e7a; }

/* ---- VPN und Datenvolumen ---- */
/* Zwei Kennzahlen nebeneinander in einer Kachel: VPN-Sitzungen und das
   Datenvolumen des Tages. */
.panel-betrieb { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.betrieb { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.2vw, 24px); min-height: 0; }
.betrieb > div { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; }
.b-label { font-size: var(--dash-xs); color: #8e9ba6; }
.big { display: flex; align-items: baseline; gap: 7px; margin: 3px 0 8px; }
.big b {
  font-family: var(--font-ci); font-weight: 800; line-height: 1;
  font-size: clamp(1.4rem, 1.8vw, 2.4rem);
  color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.big i { font-style: normal; font-size: var(--dash-sm); color: var(--d-muted); }
.panel-foot { font-size: var(--dash-xs); color: #8e9ba6; margin-top: 8px; }
.panel-foot em { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.dot-in { background: var(--blue); }
.dot-out { background: #7fb79a; }

.spark { display: flex; align-items: flex-end; gap: 4px; min-height: 0; }
.spark i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: rgba(172, 199, 220, 0.55); }

.split { display: grid; gap: 7px; align-content: center; min-height: 0; }
.split span { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.split u { display: block; height: 100%; width: 10%; border-radius: 4px; transition: width 1.1s ease; }
.split-in u { background: var(--blue); }
.split-out u { background: #7fb79a; }

/* ---- Sicherung und Wiederherstellung ----
   Backup ist bei KMU das Thema mit der groessten Angst. Entscheidend ist
   aber nicht die gruene Meldung am Morgen, sondern der Test, ob sich die
   Sicherung auch zurueckspielen laesst. Genau der laeuft hier mit. */
.panel-backup { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.bkp { list-style: none; display: grid; gap: 4px; align-content: center; min-height: 0; }
.bkp li {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 9px;
  align-items: center; font-size: var(--dash-sm); color: #c3cfd8;
}
.bkp b { font-family: var(--mono); font-size: var(--dash-xs); color: #dbe4ea; font-weight: 600; }
.bkp span { color: #8e9ba6; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkp em { font-style: normal; font-size: var(--dash-xs); color: #9fb0bd; font-variant-numeric: tabular-nums; }
.bkp i {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: rgba(95, 211, 160, 0.18); border: 1px solid rgba(95, 211, 160, 0.5);
  position: relative;
}
.bkp i::before {
  content: "\2713"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 9px; color: #5fd3a0; line-height: 1;
}
.bkp-test {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: var(--dash-xs);
}
.bkp-name { color: #9fb0bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkp-bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.bkp-bar u {
  display: block; height: 100%; width: 12%; border-radius: 4px;
  background: var(--blue); transition: width 1.1s ease, background 0.6s ease;
}
.bkp-test em { font-style: normal; font-weight: 600; color: #e3c07a; }
.dash.clean .bkp-bar u { background: #5fd3a0; }
.dash.clean .bkp-test em { color: #5fd3a0; }

/* ---- Angriffserkennung ----
   Waehrend des Ablaufs laeuft hier ein Exploit-Versuch auf genau die
   Schwachstelle auf, die im Fenster daneben gepatcht wird. */
.panel-ids { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ids { list-style: none; display: grid; gap: 6px; align-content: start; min-height: 0; overflow: hidden; }
.ids li {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px;
  align-items: center; color: #c3cfd8;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.45s ease, border-color 0.45s ease;
}
.ids b { font-variant-numeric: tabular-nums; color: #8e9ba6; font-weight: 500; font-size: var(--dash-xs); }
.ids span {
  font-family: var(--mono); font-size: var(--dash-xs); color: #dbe4ea; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ids i { font-style: normal; color: #9fb0bd; font-size: var(--dash-xs); }
.ids em { font-style: normal; font-size: var(--dash-xs); font-weight: 600; }
.ids li.done { border-color: rgba(95, 211, 160, 0.26); }
.ids li.done em { color: #5fd3a0; }
.ids li.live {
  background: rgba(201, 110, 122, 0.18); border-color: rgba(201, 110, 122, 0.55);
  animation: idsPulse 1s ease-in-out infinite;
}
.ids li.live em { color: #f0b3bb; }
@keyframes idsPulse { 50% { background: rgba(201, 110, 122, 0.32); } }
.ids li.fixed { border-color: rgba(95, 211, 160, 0.45); background: rgba(63, 157, 111, 0.12); }
.ids li.fixed em { color: #5fd3a0; }

.dash-top {
  display: flex; align-items: center; gap: 16px;
  color: var(--muted); font-size: var(--dash-sm);
  padding-bottom: 9px; margin-bottom: var(--dash-gap);
  border-bottom: 1px solid var(--border);
}
.dash-brand { font-weight: 700; color: var(--ink); letter-spacing: 0.07em; text-transform: uppercase; font-size: var(--dash-xs); }
.dash-live { display: inline-flex; align-items: center; gap: 7px; color: var(--ok); font-size: var(--dash-xs); }
.dash-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 2s infinite; }
.dash-time { margin-left: auto; font-size: var(--dash-xs); }
/* Die Zahlen sind Beispielwerte. Das gehoert sichtbar dazu, sonst liest
   sich die Kulisse wie eine Betriebsauskunft. */
.dash-time em {
  font-style: normal; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--muted);
  font-size: var(--dash-xs);
}

/* ---- Kacheln: CI-Anthrazit auf hellem Grund ---- */
.kpi, .panel {
  background: linear-gradient(170deg, var(--anthracite) 0%, var(--anthracite-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(46, 54, 60, 0.16);
  min-width: 0;
}

/* ---- Obere Kennzahlenreihe ---- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dash-gap); }
/* Flach halten: Der Textkasten beginnt direkt darunter. */
.kpi {
  padding: var(--dash-pad);
  display: grid; grid-template-columns: auto 1fr; gap: 5px 10px;
  align-content: start;
}
.kpi-label {
  grid-column: 1 / -1;
  font-size: var(--dash-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--d-muted);
}
.kpi-value { grid-column: 1; display: flex; align-items: baseline; gap: 7px; }
.kpi-value b {
  font-family: var(--font-ci); font-weight: 800; line-height: 1;
  font-size: clamp(1.6rem, 2.1vw, 3rem);
  color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.kpi-value i { font-style: normal; font-size: var(--dash-sm); color: var(--d-muted); }
.kpi-tag, .kpi-meter { grid-column: 2; align-self: center; }
.kpi-tag {
  justify-self: end; font-size: var(--dash-xs); padding: 3px 10px; border-radius: 999px;
  background: rgba(201, 110, 122, 0.24); color: #f0b3bb;
  border: 1px solid rgba(201, 110, 122, 0.45);
  transition: background 0.5s, color 0.5s, border-color 0.5s;
}
.kpi-tag.good {
  background: rgba(63, 157, 111, 0.26); color: #8fe0b9;
  border-color: rgba(63, 157, 111, 0.5);
}
.kpi-meter { height: clamp(5px, 0.5vw, 9px); border-radius: 5px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.kpi-meter u {
  display: block; height: 100%; width: 62%; border-radius: 3px;
  background: var(--blue); transition: width 0.9s ease, background 0.9s ease;
}
.dash.clean .kpi-meter u { background: #5fd3a0; }

/* ---- Untere Reihe ---- */
.dash-bottom { display: grid; grid-template-columns: 1fr 1.15fr 0.82fr 1fr; gap: var(--dash-gap); margin-top: var(--dash-gap); }
@media (max-width: 1180px) {
  /* Drei Panels nebeneinander werden hier zu schmal. Die Ereignisliste
     ist das, was am wenigsten fehlt. */
  .dash-bottom { grid-template-columns: 1fr 1.2fr; }
  .panel-betrieb, .panel-log { display: none; }
}
.panel { padding: var(--dash-pad); }
.panel-label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--dash-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--d-muted); margin-bottom: 10px;
}
.panel-label em { font-style: normal; letter-spacing: 0; text-transform: none; color: #8e9ba6; }
.log-live { margin-left: auto; color: #8fe0b9 !important; }

/* Standorte: Name links, Balken in der Mitte, Zahl rechts. Keiner der
   Standorte landet bei null - das gibt es in der Praxis nicht, und eine
   Kulisse, die es behauptet, verliert genau bei den Lesern, auf die es
   ankommt. */
.sites { list-style: none; display: grid; gap: clamp(5px, 0.55vh, 12px); height: clamp(96px, 11vh, 150px); align-content: center; }
.sites li {
  display: grid; grid-template-columns: clamp(74px, 6vw, 110px) 1fr clamp(22px, 2vw, 34px); gap: 10px;
  align-items: center; font-size: var(--dash-sm); color: #c3cfd8;
}
.sites li > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #9fb0bd; }
.sites li > i { height: clamp(7px, 0.7vw, 12px); border-radius: 6px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.sites li > i > u {
  display: block; height: 100%; width: var(--w); border-radius: 4px;
  background: linear-gradient(90deg, #8f4a54, #d4808b);
  transition: width 1.0s cubic-bezier(0.22, 0.61, 0.36, 1), background 1.0s ease;
}
.dash.clean .sites li > i > u { background: linear-gradient(90deg, #2f7d5c, #5fd3a0); }
.sites li > b {
  font-weight: 600; text-align: right; color: #dbe4ea;
  font-variant-numeric: tabular-nums; font-size: var(--dash-sm);
}

/* Serverliste: erfundene, aber plausible Namen. Der Haken erscheint erst,
   wenn der Server im Ablauf wirklich an der Reihe war. */
.srvlist {
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3px, 0.5vh, 10px) 18px;
  height: clamp(96px, 11vh, 150px); align-content: center;
}
.srvlist li {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--dash-sm); line-height: 1.5; color: #c3cfd8;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  padding-bottom: 2px; min-width: 0;
}
.srvlist b {
  font-family: var(--mono); font-weight: 600; font-size: var(--dash-xs);
  color: #dbe4ea; flex: none;
}
.srvlist span {
  color: #8e9ba6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srvlist em {
  margin-left: auto; font-style: normal; flex: none;
  font-size: var(--dash-xs); color: #d8a455;
}
.srvlist em::before { content: "wartet"; }
.srvlist li.busy em { color: #e3c07a; }
.srvlist li.busy em::before { content: "patcht"; }
.srvlist li.up { border-bottom-color: rgba(95, 211, 160, 0.30); }
.srvlist li.up em { color: #5fd3a0; }
.srvlist li.up em::before { content: "\2713 bereit"; }

/* Ereignisse: die Zeilen laufen synchron zu den Fenstern ein. */
.log { list-style: none; height: clamp(96px, 11vh, 150px); overflow: hidden; display: grid; align-content: center; gap: 3px; }
.log li {
  display: flex; gap: 9px; align-items: baseline;
  font-size: var(--dash-sm); color: #c3cfd8; line-height: 1.55;
  opacity: 0; transform: translateY(5px);
  animation: logIn 0.4s ease forwards;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.log li b { font-weight: 600; color: #8e9ba6; font-variant-numeric: tabular-nums; flex: none; }
.log li.ok span { color: #8fe0b9; }
.log li.warn span { color: #e3c07a; }
.log li.bad span { color: #f0b3bb; }
@keyframes logIn { to { opacity: 1; transform: none; } }

/* ---------- Textkasten ---------- */
/* Der Kasten liegt auf einer Kulisse voller Kacheln. Abgegrenzt wird er
   ueber den Rand in der CI-Farbe und einen tiefen, weichen Schatten, der
   ihn ueber die Flaeche hebt. Kein heller Absatz mehr - der hat den Kasten
   aufgeklebt wirken lassen statt schwebend. */
.hero-card {
  position: relative;
  background: linear-gradient(168deg, rgba(26, 33, 38, 0.975) 0%, rgba(18, 24, 28, 0.975) 100%);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border: 1px solid var(--blue);
  border-radius: 24px;
  padding: clamp(32px, 3vw, 46px) clamp(30px, 3.1vw, 46px) clamp(34px, 3.2vw, 48px);
  box-shadow:
    0 2px 6px rgba(18, 26, 34, 0.18),
    0 18px 34px rgba(18, 26, 34, 0.24),
    0 48px 96px rgba(18, 26, 34, 0.42),
    0 0 44px rgba(172, 199, 220, 0.16);
}

.hero-visual { position: relative; }

.hero .scroll-hint { z-index: 2; }

/* ---------- PowerShell-Fenster, kaskadiert ----------
   Bewusst Windows und nicht macOS: Die Kunden arbeiten mit Windows Server,
   also gehoert in die Startansicht eine Konsole, die sie wiedererkennen.
   Titelleiste dunkel, Schaltflaechen rechts, eckige Ecken, und im Fenster
   das Blau der klassischen PowerShell. */
.winstack {
  position: relative;
  height: clamp(392px, 43vh, 512px);
  perspective: 1400px;
}
.ps-win {
  position: absolute; left: 0; top: 0;
  /* Platz fuer den Versatz der beiden hinteren Fenster lassen, sonst
     schiebt die Kaskade das oberste Fenster aus dem Raster. */
  width: calc(100% - 62px);
  border: 1px solid rgba(61, 255, 122, 0.18);
  border-radius: 6px;                      /* Windows rundet nur minimal */
  overflow: hidden;
  box-shadow: 0 26px 56px rgba(10, 18, 14, 0.46), 0 0 22px rgba(61, 255, 122, 0.08);
  opacity: 0;
  transform: translate3d(-18px, 22px, 0) scale(0.97);
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease;
}
.ps-win.show { opacity: 1; }
/* Jedes weitere Fenster liegt versetzt darueber, wie beim Kaskadieren
   in Windows selbst. */
.ps-win[data-win="1"].show { transform: translate3d(0, 0, 0) scale(1); }
.ps-win[data-win="2"].show { transform: translate3d(31px, 27px, 0) scale(1); }
.ps-win[data-win="3"].show { transform: translate3d(62px, 54px, 0) scale(1); }
.ps-win[data-win="1"] { z-index: 1; }
.ps-win[data-win="2"] { z-index: 2; }
.ps-win[data-win="3"] { z-index: 3; }
/* Verdeckte Fenster treten zurueck, sonst konkurrieren drei Textflaechen. */
.ps-win.behind { filter: brightness(0.66) saturate(0.8); }

.ps-bar {
  display: flex; align-items: center; gap: 9px;
  height: clamp(34px, 2.6vw, 42px); padding: 0 0 0 clamp(11px, 0.9vw, 16px);
  background: rgba(26, 26, 26, 0.92);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-bottom: 1px solid rgba(70, 255, 130, 0.14);
}
.ps-ico {
  display: grid; place-items: center;
  width: 17px; height: 17px; border-radius: 3px;
  background: #0d2a16; color: #4dff88; border: 1px solid rgba(77, 255, 136, 0.45);
  font-family: var(--mono); font-size: 0.56rem; font-weight: 700;
  letter-spacing: -0.04em;
}
.ps-title {
  font-family: var(--font); font-size: clamp(0.76rem, 0.66vw, 0.9rem); color: #cfd6d1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-btns { margin-left: auto; display: flex; height: 100%; }
.ps-btns b {
  position: relative; width: 44px; height: 100%;
  display: grid; place-items: center;
}
.ps-btns b::before {
  content: ""; display: block; background: #b9c2bc;
}
.ps-min::before { width: 10px; height: 1px; }
.ps-max::before { width: 9px; height: 9px; border: 1px solid #b9c2bc; background: none !important; }
.ps-close::before {
  width: 11px; height: 11px; background: none !important;
  background-image:
    linear-gradient(45deg, transparent 45%, #b9c2bc 45%, #b9c2bc 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #b9c2bc 45%, #b9c2bc 55%, transparent 55%) !important;
}

/* Gruener Text auf fast schwarzem Grund. Der Leuchtschleier kommt vom
   Textschatten, die Zeilenstruktur von einem feinen Streifenmuster darueber -
   beides ist reines CSS und kostet keine Datei. */
.ps-body {
  position: relative;
  /* Leicht durchscheinend, damit das Dashboard dahinter zu ahnen ist. Mehr
     als diese Deckung vertraegt gruene Schrift nicht, ohne unruhig zu werden,
     und der Weichzeichner dahinter haelt den Untergrund ruhig. */
  background: rgba(5, 9, 10, 0.88);
  backdrop-filter: blur(7px) saturate(0.9);
  -webkit-backdrop-filter: blur(7px) saturate(0.9);
  color: #3dff7a;
  font-family: var(--mono); font-size: clamp(0.78rem, 0.88vw, 0.94rem); line-height: 1.62;
  padding: clamp(12px, 1vw, 18px) clamp(14px, 1.1vw, 20px);
  height: clamp(268px, 30vh, 372px); overflow: hidden;
  white-space: pre-wrap; word-break: break-word;
  text-shadow: 0 0 7px rgba(61, 255, 122, 0.30);
}
.ps-body::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.42) 100%);
  opacity: 0.55;
}
.ps-body > * { position: relative; z-index: 1; }
/* Zwei Toene genuegen: die Ausgabe der Shell und das, was jemand tippt.
   Mehr Farben lassen ein Terminal wie eine Leuchtreklame aussehen. */
.ps-body .p { color: #35e86f; }
.ps-body .cmd { color: #d5ffe6; text-shadow: 0 0 9px rgba(160, 255, 200, 0.5); }
.ps-body .dim { color: #1a8a40; }
.ps-caret {
  display: inline-block; width: 8px; height: 14px;
  background: #5cff8f; box-shadow: 0 0 8px rgba(92, 255, 143, 0.7);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}


/* ---------- SVG-Icons ---------- */
.card .icon svg, .tool-head .icon svg, .contact-card .icon svg {
  width: 24px; height: 24px; stroke: var(--blue-deep);
  stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.card .icon, .tool-head .icon { background: rgba(143,179,209,0.16); }

/* ---------- Karten mit Bildkopf ---------- */
.card.has-media { padding: 0; display: flex; flex-direction: column; }
.card-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--anthracite-2);
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.card.has-media:hover .card-media img { transform: scale(1.06); }
.card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(58,66,73,0.10), rgba(58,66,73,0.34));
}
.card.has-media .card-body {
  padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1;
}
.card.has-media .card-body > .icon {
  margin-top: -51px; margin-bottom: 18px; position: relative; z-index: 2;
  background: var(--surface); border-color: var(--border-strong);
  box-shadow: 0 10px 24px rgba(46,54,60,0.20);
}
.card.has-media .card-body .more { margin-top: auto; }

/* ---------- Split: Text + Bild ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.split.media-left .split-media { order: -1; }
.split-text h2 { margin-bottom: 16px; }
.split-text p { color: var(--muted); }
.split-list { list-style: none; margin-top: 22px; display: grid; gap: 10px; }
.split-list li { position: relative; padding-left: 30px; color: var(--ink); font-size: 0.97rem; }
.split-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(63,157,111,0.14);
  border: 1px solid rgba(63,157,111,0.5);
}
.split-list li::after {
  content: ""; position: absolute; left: 6px; top: 12px;
  width: 6px; height: 3px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}

/* ---------- Unterseiten-Hero mit Bild ---------- */
.page-hero.has-media .wrap {
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 52px; align-items: center;
}
.page-hero.has-media .media-frame { box-shadow: 0 30px 66px rgba(46,54,60,0.20); }

/* ---------- CTA-Band mit Bild ---------- */
.cta-band.has-media { position: relative; overflow: hidden; }
.cta-band.has-media > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55; z-index: 0;
}
.cta-band.has-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(45,52,58,0.80), rgba(45,52,58,0.88)),
    radial-gradient(620px 340px at 22% 0%, rgba(143,179,209,0.22), transparent 62%);
}
.cta-band.has-media > *:not(img) { position: relative; z-index: 2; }

/* ---------- Bildband (volle Breite, dunkel) ---------- */
.image-band {
  position: relative; height: 340px; overflow: hidden;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.image-band img { width: 100%; height: 100%; object-fit: cover; }
.image-band .band-caption {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 0 24px;
  background: linear-gradient(180deg, rgba(45,52,58,0.84), rgba(45,52,58,0.90));
  color: #fff;
}
.image-band .band-caption p { color: var(--d-muted); max-width: 620px; margin: 10px auto 0; }
.image-band .band-caption h3 { font-size: clamp(1.3rem, 3vw, 1.9rem); letter-spacing: -0.02em; }

/* ---------- Zitat mit Bild ---------- */
.quote-card.has-media { grid-template-columns: 0.85fr 1.15fr; }
.quote-card .quote-media { border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--border-strong); }
.quote-card .quote-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Responsive Ergänzungen ---------- */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split.media-left .split-media { order: 0; }
  .page-hero.has-media .wrap { grid-template-columns: 1fr; gap: 34px; }
  .quote-card.has-media { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .image-band { height: 260px; }
  .card.has-media .card-body { padding: 38px 22px 26px; }
}

/* Heller Primaerbutton auf dunklen Flaechen */
.cta-band .btn-primary, .dark .btn-primary, .hero-card .btn-primary {
  background: #ffffff; color: var(--anthracite);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
}
.cta-band .btn-primary:hover, .dark .btn-primary:hover, .hero-card .btn-primary:hover {
  background: var(--blue); color: #1f262b;
}
.btn-ic {
  width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Ghost-Button auf dem dunklen Hero */
.cta-band .btn-ghost, .hero-card .btn-ghost {
  background: rgba(255, 255, 255, 0.07); color: var(--d-ink);
  border-color: rgba(255, 255, 255, 0.28);
}
.cta-band .btn-ghost:hover, .hero-card .btn-ghost:hover {
  border-color: var(--blue); color: var(--blue); background: rgba(255, 255, 255, 0.12);
}

/* Unterseiten-Hero: Textspalte */
.page-hero.has-media .page-hero-text { min-width: 0; }
.page-hero.has-media .media-frame { aspect-ratio: 4 / 3; }
@media (max-width: 980px) {
  .page-hero.has-media .media-frame { max-width: 560px; }
}

/* Icons: Farbe auch ohne CSS-Variablen-Kontext korrekt (currentColor-Fallback) */
.card .icon, .tool-head .icon, .contact-card .icon { color: var(--blue-deep); }
.card .icon svg, .tool-head .icon svg, .contact-card .icon svg { stroke: var(--blue-deep); }

/* Bildband ohne Foto: traegt nur die Aussage */
.image-band.no-media {
  height: auto;
  background:
    radial-gradient(620px 320px at 20% 0%, rgba(172, 199, 220, 0.16), transparent 62%),
    linear-gradient(140deg, var(--anthracite), var(--anthracite-2));
}
.image-band.no-media .band-caption {
  position: static;
  background: none;
  padding: 64px 24px;
}

/* ---------- Rückruf-Formular ---------- */
.callback {
  margin-top: 54px;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px 40px;
  box-shadow: 0 18px 46px rgba(46, 54, 60, 0.07);
}
.callback-intro h3 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 12px; }
.callback-intro p { color: var(--muted); margin-bottom: 18px; }
.callback-points { list-style: none; display: grid; gap: 10px; }
.callback-points li {
  position: relative; padding-left: 26px; color: var(--muted); font-size: 0.95rem;
}
.callback-points li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue-deep);
}

.callback-box { min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > span { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.field > span em { color: var(--red); font-style: normal; }
.field input, .field select {
  font: inherit; font-size: 0.97rem; color: var(--ink);
  padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0; width: 100%;
}
.field input::placeholder { color: #9aa5ad; }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--blue-deep);
  box-shadow: 0 0 0 3px rgba(143, 179, 209, 0.25);
}

/* Honigtöpfe. Nicht display:none - manche Bots überspringen genau das. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.check { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 20px; }
.check input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--blue-deep); }
.check span { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.check a { color: var(--blue-deep); text-decoration: underline; }

.callback-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.callback-hint { font-size: 0.8rem; color: var(--muted); max-width: 320px; line-height: 1.45; }
#callback-submit[disabled] { opacity: 0.65; cursor: progress; }

.form-msg {
  margin-top: 18px; padding: 13px 16px; border-radius: 10px;
  font-size: 0.92rem; line-height: 1.5;
  border: 1px solid var(--border); background: #f6f8f9; color: var(--ink);
}
.form-msg a { color: var(--blue-deep); }
.form-msg.info { border-color: rgba(143, 179, 209, 0.55); background: rgba(143, 179, 209, 0.12); }
.form-msg.ok { border-color: rgba(58, 160, 110, 0.45); background: rgba(58, 160, 110, 0.10); }
.form-msg.warn { border-color: rgba(201, 110, 122, 0.5); background: rgba(201, 110, 122, 0.10); }

@media (max-width: 900px) {
  .callback { grid-template-columns: 1fr; gap: 28px; padding: 30px 24px; }
}
@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; gap: 14px; }
  .callback-actions { align-items: flex-start; }
  .callback-hint { max-width: none; }
}
.cta-row-center { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }


/* ---------- Startansicht auf schmalen Schirmen ----------
   Steht am Dateiende, weil bei gleicher Spezifitaet die spaetere Regel
   gewinnt und die Hero-Regeln weiter oben stehen.

   Hochkant ist kein Platz fuer beides. Das Dashboard schrumpft auf die
   Kennzahlenreihe ueber dem Textkasten, die untere Reihe entfaellt. Die
   Fenster ruecken enger zusammen: Eine Kaskade quer ueber ein Telefon
   waere nur abgeschnitten. */
@media (max-width: 980px) {
  .hero { min-height: 0; padding: 116px 0 66px; }
  .hero .wrap { gap: 34px; }

  .dash { padding: 80px 16px 18px; }
  .dash-top { font-size: 0.72rem; padding-bottom: 8px; margin-bottom: 9px; }
  .dash-time { display: none; }
  /* Hochkant liegt der Textkasten direkt unter der Kopfzeile. Die
     Kennzahlen wandern deshalb ans untere Ende des Hero, dort ist frei. */
  /* Hochkant liegt der Textkasten direkt unter der Kopfzeile. Die
     Kennzahlen wandern deshalb ans untere Ende des Hero, dort ist frei.
     Zwei davon genuegen: Sie tragen die Aussage, alles Weitere waere nur
     halb verdeckt. */
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 9px; order: 3; }
  .kpi:nth-child(2), .kpi:nth-child(4) { display: none; }
  .kpi { padding: 9px 12px 10px; }
  .kpi-value b { font-size: 1.45rem; }
  .kpi-label { font-size: 0.62rem; }
  /* Hochkant laegen Kuchen und Netzlast vollstaendig hinter dem Kasten,
     und die untere Reihe passt nicht mehr unter die Fenster. Die mittlere
     Reihe bleibt als leerer Platzhalter stehen, damit die Kennzahlen
     weiterhin an den unteren Rand rutschen. */
  .dash-mid { grid-template-columns: 1fr; margin-top: 0; order: 2; }
  .panel-pie, .panel-ids { display: none; }
  .dash-bottom { display: none; }

  .winstack { height: 296px; }
  .ps-win { width: calc(100% - 26px); border-radius: 5px; }
  .ps-win[data-win="2"].show { transform: translate3d(13px, 12px, 0) scale(1); }
  .ps-win[data-win="3"].show { transform: translate3d(26px, 24px, 0) scale(1); }
  .ps-bar { height: 30px; }
  .ps-title { font-size: 0.7rem; }
  .ps-btns b { width: 34px; }
  .ps-body { height: 206px; font-size: 0.68rem; line-height: 1.55; padding: 9px 11px 11px; }

  .hero-card { padding: 30px 24px 32px; border-radius: 20px; }
  .hero .scroll-hint { display: none; }
}
@media (max-width: 460px) {
  .hero-card { padding: 26px 19px 28px; }
  /* Die Ortsangabe bricht sonst unschoen um. */
  .hero .badge { font-size: 0.76rem; padding: 6px 13px; line-height: 1.35; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi-tag { font-size: 0.62rem; padding: 2px 7px; }
  .winstack { height: 272px; }
  .ps-body { height: 186px; font-size: 0.62rem; }
  .ps-title { font-size: 0.66rem; }
}

/* ---------- Eindringling und Uebergang zum Textkasten ----------
   Beide liegen in derselben Rasterzelle und wechseln sich ab. Ohne
   JavaScript ist der Kasten sichtbar und die Figur gar nicht da, sonst
   waere die Ueberschrift der Seite unsichtbar. */
.hero-stage { display: grid; min-width: 0; }
.hero-stage > * { grid-area: 1 / 1; }

.intruder { display: none; }
.intruder.on {
  display: grid; justify-items: center; align-content: center; gap: 18px;
  transform-origin: 50% 46%;
}
/* Der Abgang: nach hinten weg, im Strudel, und dabei unscharf werden. */
.intruder.out {
  animation: strudel 1.05s cubic-bezier(0.55, 0, 0.9, 0.45) forwards;
  pointer-events: none;
}
@keyframes strudel {
  0%   { transform: rotate(0) scale(1); opacity: 1; filter: blur(0); }
  55%  { transform: rotate(280deg) scale(0.42); opacity: 0.85; filter: blur(2px); }
  100% { transform: rotate(680deg) scale(0.02); opacity: 0; filter: blur(9px); }
}

.intruder-svg { width: min(100%, clamp(210px, 21vw, 330px)); height: auto; display: block; }

/* Zwei gegenlaeufige Ringe plus ein feiner Teilkreis. Reines SVG, die
   Drehung uebernimmt CSS. */
.ring { fill: none; transform-origin: 160px 160px; }
.ring-a {
  stroke: var(--blue); stroke-width: 3; opacity: 0.9;
  stroke-dasharray: 118 46 32 46;
  animation: spin 14s linear infinite;
}
.ring-b {
  stroke: var(--red); stroke-width: 2.5; opacity: 0.75;
  stroke-dasharray: 8 22;
  animation: spin 22s linear infinite reverse;
}
.ring-c {
  stroke: rgba(172, 199, 220, 0.35); stroke-width: 1.5;
  stroke-dasharray: 2 12; stroke-linecap: round;
  animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.disc { fill: rgba(12, 17, 20, 0.62); }
.shoulder { fill: #1b2327; }
.hood { fill: url(#hoodG); stroke: rgba(172, 199, 220, 0.45); stroke-width: 1.5; }
.face { fill: #080c0e; }
.eye { fill: url(#glowEye); animation: eyeBlink 4.2s ease-in-out infinite; }
@keyframes eyeBlink { 0%, 92%, 100% { ry: 7px; } 96% { ry: 1px; } }
.lid { fill: url(#lidG); stroke: rgba(172, 199, 220, 0.35); stroke-width: 1.5; }
.base { fill: #55636b; }
.skull-head, .bone-end { fill: #eef3f6; }
.bone { stroke: #eef3f6; stroke-width: 11; stroke-linecap: round; }
.socket, .nose { fill: #2c353b; }

.intruder-note {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: clamp(0.78rem, 0.8vw, 0.92rem); font-weight: 600; letter-spacing: 0.01em;
  color: #f0b3bb;
  background: rgba(201, 110, 122, 0.16);
  border: 1px solid rgba(201, 110, 122, 0.5);
  border-radius: 999px; padding: 8px 18px;
}
.blip {
  width: 9px; height: 9px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 10px var(--red); animation: pulse 1.1s infinite;
}

/* Der Kasten kommt herein, sobald der Eindringling weg ist. */
.hero-card.tarnen { opacity: 0; transform: scale(0.92) translateY(26px); pointer-events: none; }
.hero-card.rein {
  animation: kastenRein 0.72s cubic-bezier(0.18, 0.84, 0.31, 1.06) forwards;
  pointer-events: auto;
}
@keyframes kastenRein {
  0%   { opacity: 0; transform: scale(0.92) translateY(26px); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ring, .eye, .blip { animation: none; }
}

/* Sitzungsprotokoll des Mailserver-Tests. Eingeklappt, weil es die meisten
   nicht brauchen und die, die es brauchen, es ganz brauchen. */
.transcript { margin-top: 14px; }
.transcript summary {
  cursor: pointer; font-size: 0.85rem; color: var(--blue-deep);
  font-weight: 600; padding: 6px 0;
}
.transcript summary:hover { text-decoration: underline; }
.transcript pre {
  margin-top: 8px; padding: 14px 16px; border-radius: 10px;
  background: var(--anthracite-2); color: #cfe3d6;
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.6;
  overflow-x: auto; white-space: pre; max-height: 320px; overflow-y: auto;
}

/* ---------- Schwebende Anfrage-Schaltfläche ----------
   Die Kopfzeile trägt jetzt den Remotesupport, weil ein Kunde mit einer
   Störung sofort dorthin muss. Die Projektanfrage läuft dafür unten rechts
   mit. Sie kommt erst nach dem ersten Scrollen und geht wieder weg, sobald
   der Kontaktbereich im Bild ist. */
.fab {
  --fab-bg: var(--anthracite);
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 90;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 20px 13px 17px;
  border-radius: 999px;
  background: var(--fab-bg); color: #fff;
  font-weight: 600; font-size: 0.95rem; line-height: 1;
  box-shadow: 0 10px 28px rgba(28, 36, 40, 0.30), 0 2px 6px rgba(28, 36, 40, 0.18);
  opacity: 0; transform: translateY(14px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1),
              background 0.2s, box-shadow 0.2s;
}
.fab.show { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover {
  text-decoration: none; background: var(--anthracite-2);
  box-shadow: 0 14px 34px rgba(28, 36, 40, 0.38), 0 2px 6px rgba(28, 36, 40, 0.20);
}
.fab:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.fab-icon { width: 28px; height: 28px; flex: none; display: block; }
/* Die hintere Blase steht zurueck, die vordere traegt das Terminalzeichen.
   Die Symbole sind in der Farbe der Schaltflaeche ausgespart, dadurch
   bleiben sie auch bei 26 Pixeln lesbar. */
.bub-back { fill: currentColor; opacity: 0.58; }
.bub-front { fill: currentColor; }
.bub-sym {
  fill: none; stroke: var(--fab-bg); stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 560px) {
  /* Nur das Zeichen, der Text braucht auf einem Telefon zu viel Breite. */
  .fab { padding: 15px; gap: 0; }
  .fab span { display: none; }
  .fab-icon { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab { transition: opacity 0.2s ease; transform: none; }
  .fab.show { transform: none; }
}

/* Lange deutsche Komposita brechen auf schmalen Schirmen um. Ohne das ragte
   die Ueberschrift "Datenschutzerklaerung" bei 360 px aus der Seite heraus und
   die ganze Seite liess sich seitlich schieben. */
.legal h1, .legal h2, .legal p, .legal li { overflow-wrap: break-word; hyphens: auto; }

@media (max-width: 560px) {
  .legal { padding-left: 18px; padding-right: 18px; }
  .legal h1 { font-size: 1.72rem; }
  .legal h2 { font-size: 1.18rem; }
}

/* Auf Telefonen laeuft die Startansicht im Schnelldurchlauf: main.js kuerzt
   die Wartezeiten, hier ziehen die reinen CSS-Uebergaenge nach. Sonst bliebe
   der Eindringling laenger im Bild als die Shells brauchen, und der Speed
   Index misst genau diese Zeit, bis sich oben nichts mehr bewegt. */
@media (max-width: 760px) {
  .ps-win { transition-duration: 0.22s; }
  .intruder.out { animation-duration: 0.6s; }
  .hero-card.rein { animation-duration: 0.45s; }
}