/* Scorpion Host — Schaufenster.
   Tokens: docs\specs\2026-10-11-kundenseiten-darstellung.md §3.1 (belegt) und §3.2 (Vorschlag).
   Marken-Hexwerte primaer aus ~\.claude\skills\scorpion-design\SKILL.md Z. 39-41 (Rot, Dark BG,
   Weiss) und Z. 80 (Hell-Werte der IT-Site). Kein Cyan, kein Orange: Spec §3.1 — fuer Host ist
   keine Markerfarbe belegt, Host fuehrt keinen Marker.
   Regel (Spec §3.3): die Zustandstokens stehen je Modus; ausserhalb der :root-Bloecke steht kein
   Hexwert. Ein Hexwert in einer Komponentenregel ist ein Fehler, keine Abkuerzung. */

:root {
  /* themeunabhaengig */
  --red: #E41E26;                 /* die eine Primaer-Aktion (SKILL.md Z.39) */
  --text-auf-rot: #FFFFFF;        /* Buttontext, 4,6:1 auf Rot (Spec §4.3) — darum nie < 16 px */

  /* Zustandstokens — Dunkel ist Standard (Spec §3.3) */
  --bg-1: #0F0F11;                /* Seitenhintergrund (SKILL.md Z.40 "Dark BG") */
  --bg-2: #17171B;                /* Kartenflaeche (Spec §3.2, Vorschlag) */
  --text: #FFFFFF;                /* Text auf Dunkel (SKILL.md Z.41) */
  --mut: #B3B3B8;                 /* gedaempfter Text, ~10:1 (Spec §3.2, Vorschlag) */
  --mut-2: #2A2A30;               /* Haarlinien, Rahmen (Spec §3.2, Vorschlag) */
  --focus: #FFFFFF;               /* Fokusring Dunkel (Spec §3.2) */
  --schatten: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);

  /* Abstaende 4er-Raster (Spec §3.2) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Radien, Schriftgroessen, Masse (Spec §3.2) */
  --radius-s: 6px; --radius-m: 10px;
  --fs-xs: 12px;   /* Boden der Barrierefreiheit, nie kleiner (SKILL.md Z.109-110) */
  --fs-s: 14px; --fs-m: 16px; --fs-l: 20px; --fs-xl: 24px; --fs-xxl: 44px;
  --lh: 1.5; --lh-eng: 1.2;
  --measure: 75ch;                /* belegt (Spec §3.2) */
  --tap: 32px;                    /* Mindest-Klickziel, belegt (SKILL.md Z.110) */
  --dauer: 150ms;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-1: #EAF0FA;              /* Hell-Token der IT-Site (SKILL.md Z.80) */
    --bg-2: #FFFFFF;              /* Kartenflaeche Hell (Spec §3.2) */
    --text: #0B1220;              /* SKILL.md Z.80 */
    --mut: #46536E;               /* SKILL.md Z.80 */
    --mut-2: #C9D3E3;             /* Haarlinien Hell (Spec §3.2) */
    --focus: #0B1220;             /* Fokusring Hell (Spec §3.2) */
    --schatten: 0 1px 2px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.08);
  }
}

/* Poppins, lokal. Keine Fremdressource, kein Google-CDN (Spec §3.6).
   Quelle der Dateien: Websites\_neubau-it-2026-10-11\...\scorpion\fonts\ — kopiert, nicht verlinkt. */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/poppins-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/poppins-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("schrift/poppins-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("schrift/poppins-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schrift/poppins-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schrift/poppins-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Grundlage ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg-1); }

body {
  margin: 0;
  background: var(--bg-1);
  color: var(--text);
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: var(--fs-m);
  line-height: var(--lh);
  -webkit-text-size-adjust: 100%;
}

p, li, dd { max-width: var(--measure); }

a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }

.sprung {
  position: absolute; left: var(--space-3); top: calc(var(--space-3) * -4);
  z-index: 10000;
  background: var(--bg-2); color: var(--text);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--mut-2); border-radius: var(--radius-s);
  transition: top var(--dauer) ease;
}
.sprung:focus { top: var(--space-3); }

/* ---------- Kopf und Fuss ---------- */

.kopf, .fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  max-width: 1200px; margin: 0 auto;
}
.kopf { border-bottom: 1px solid var(--mut-2); }
.fuss { border-top: 1px solid var(--mut-2); margin-top: var(--space-8); color: var(--mut); font-size: var(--fs-s); }
.fuss a { color: var(--mut); min-height: var(--tap); display: inline-flex; align-items: center; }

/* Klickziel nicht unter 32 px, auch bei der Wortmarke (Spec §4.1, SKILL.md Z.110). */
.marke {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-weight: 700; font-size: var(--fs-l); text-decoration: none; letter-spacing: .01em;
}
.untertitel { color: var(--mut); font-size: var(--fs-s); font-weight: 500; }

/* ---------- Inhalt ---------- */

main { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }

section { padding: var(--space-7) 0; border-bottom: 1px solid var(--mut-2); }
section:last-child { border-bottom: 0; }

h1 { font-size: var(--fs-xxl); font-weight: 700; line-height: var(--lh-eng); margin: 0 0 var(--space-4); letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-eng); margin: 0 0 var(--space-4); }
h3 { font-size: var(--fs-l); font-weight: 500; line-height: var(--lh-eng); margin: 0 0 var(--space-1); }

.vorspann { font-size: var(--fs-l); color: var(--mut); }

/* Die eine Primaer-Aktion. Rot ist Flaeche, nie Schrift (Spec §4.3). */
.aktion {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: var(--tap);
  padding: 0 var(--space-5);
  background: var(--red); color: var(--text-auf-rot);
  font-weight: 500; font-size: var(--fs-m); text-decoration: none;
  border: 0; border-radius: var(--radius-s);
  transition: box-shadow var(--dauer) ease;
}
.aktion:hover, .aktion:focus-visible { box-shadow: 0 0 0 2px var(--text); text-decoration: underline; }

.verweis { min-height: var(--tap); display: inline-flex; align-items: center; font-weight: 500; }

/* ---------- Karten ---------- */

.karten { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }

.karte {
  background: var(--bg-2);
  border: 1px solid var(--mut-2); border-radius: var(--radius-m);
  box-shadow: var(--schatten);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.karte > :last-child { margin-top: auto; }

.fuer-wen { color: var(--mut); font-size: var(--fs-s); margin: 0; }

/* Preiszeile: groesste Zahl der Karte, Farbe --text, nie Rot (Spec §2.3). */
.preiszeile { font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-eng); margin: 0; }
.preiszeile .einheit { display: block; font-size: var(--fs-s); font-weight: 400; color: var(--mut); }

.kennzahlen { margin: 0; display: grid; gap: var(--space-3); }
.kennzahlen dt { color: var(--mut); font-size: var(--fs-s); }
.kennzahlen dd { margin: 0; font-size: var(--fs-m); }
.kennzahlen .wert { font-size: var(--fs-l); font-weight: 700; line-height: var(--lh-eng); }
.kennzahlen .einheit { font-size: var(--fs-s); color: var(--mut); font-weight: 400; }

.kleingedruckt { font-size: var(--fs-xs); color: var(--mut); }

.stand { font-size: var(--fs-xs); color: var(--mut); }

/* ---------- Fristen ---------- */

.fristen { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.fristen li {
  border-left: 2px solid var(--mut-2); padding-left: var(--space-4);
}
.fristen .zahl { display: block; font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-eng); }
.fristen .bezeichnung { color: var(--mut); font-size: var(--fs-s); }

/* ---------- Breiten ---------- */

@media (min-width: 768px) {
  .karten { grid-template-columns: repeat(2, 1fr); }
  .fristen { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 480px) {
  h1 { font-size: var(--fs-xl); }
  .aktion { width: 100%; }
  section { padding: var(--space-6) 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}