/* ONAGER Compute — hell und dunkel, mit dunklen Bändern (Umbau 04.10.2026,
   design/hell-dunkel-2026-10-04/, Vertrag design/use-cases-2026-10-04/VERTRAG.md).
   :root = hell (Standard). data-theme="dark" an <html> = dunkel; das setzt
   preferences-init.js aus der gespeicherten Wahl, kein System-Listener.
   .band-dunkel (Hero, Kennzahlen, Fuß, Use-Cases-Menü) ist in beiden Themes
   dunkel: Die Klasse setzt dieselben Variablen lokal auf den dunklen Satz.
   Kontraste: design/hell-dunkel-2026-10-04/kontrast-tabelle.md. */
:root {
  /* Flächen. --bg-alt: jeder zweite Inhaltsabschnitt (.band-wechsel). */
  --bg: #ffffff;
  --bg-alt: #f5f5f5;
  --surface: #ffffff;
  --surface-muted: #f5f5f5;
  --surface-hover: #f5f5f5;
  --overlay: rgb(0 0 0 / 48%);

  /* Text */
  --text: #0a0a0a;
  --text-secondary: #525252;

  /* Linien. --border: Haarlinie für Karten und Trenner (dekorativ).
     --rule: Rahmen von Bedienelementen (Felder, Auswahl, Zweitknöpfe),
     Nicht-Text-Kontrast mindestens 3:1. */
  --border: #e5e5e5;
  --rule: #858585;

  /* Ein gefüllter Knopf je Bildschirm, in Tinte. Der Akzent ist das
     Logo-Blau, nur als Linie, Schrift oder Punkt; auf Weiß eine Stufe
     dunkler (#60a5fa hätte dort 2,54:1). */
  --primary: #0a0a0a;
  --primary-hover: #333333;
  --on-primary: #ffffff;
  --link: #2563eb;
  --chart: #2563eb;
  --focus: #2563eb;

  /* Status: nur für Zustände (frei, besetzt, Fehler), nie als Schmuck. */
  --success: #15803d;
  --success-bg: #f0fdf4;
  --warning: #a16207;
  --warning-bg: #fefce8;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;

  /* Schatten nur für das, was über der Seite schwebt (Menüs). */
  --shadow-pop: 0 16px 40px rgb(0 0 0 / 16%);

  /* Form */
  --radius-card: 6px;
  --radius-control: 4px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --content-max: 1280px;
  --header-h: 64px;
  --font: "Commissioner", "Noto Sans Georgian", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

/* Dunkles Theme und dunkle Bänder: ein Wertesatz (der von „nur schwarz“,
   03.10.2026). Hintergrund und Schrift setzt die Klasse gleich mit. */
:root[data-theme="dark"],
.band-dunkel {
  --bg: #000000;
  --bg-alt: #0a0a0a;
  --surface: #0a0a0a;
  --surface-muted: #171717;
  --surface-hover: #262626;
  --overlay: rgb(0 0 0 / 72%);
  --text: #ededed;
  --text-secondary: #a1a1a1;
  --border: #2e2e2e;
  --rule: #666666;
  --primary: #f5f5f5;
  --primary-hover: #d4d4d4;
  --on-primary: #000000;
  --link: #60a5fa;
  --chart: #60a5fa;
  --focus: #60a5fa;
  --success: #4ade80;
  --success-bg: #0b1f12;
  --warning: #fbbf24;
  --warning-bg: #1f1705;
  --danger: #f87171;
  --danger-bg: #260b0b;
  --shadow-pop: 0 16px 40px rgb(0 0 0 / 50%);
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
}

/* Zweite Inhaltsfläche im Wechsel (hell #f5f5f5, dunkel #0a0a0a). */
.band-wechsel {
  background: var(--bg-alt);
}

/* Selbst gehostete Schriften (SIL OFL 1.1, Lizenztexte in website/fonts/,
   Herkunft in website/fonts/HERKUNFT.md). font-src 'self' bleibt erfüllt. */
@font-face {
  font-family: "Commissioner";
  src: url("fonts/commissioner-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Commissioner";
  src: url("fonts/commissioner-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Commissioner";
  src: url("fonts/commissioner-cyrillic.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Noto Sans Georgian";
  src: url("fonts/noto-sans-georgian.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}

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

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

/* Der dunkle Fuß schließt die Seite ab: Spalte über die ganze Höhe, der
   Hauptteil füllt kurze Seiten auf, unter dem Fuß bleibt keine helle Fläche.
   (Die alten 88 px unten stammten vom entfernten Support-Widget.) */
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > main {
  flex: 1 0 auto;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

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

a:hover {
  color: var(--link);
}

:focus {
  outline: none;
}

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

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: -100px;
  z-index: 1000;
  background: var(--surface);
  color: var(--text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
}

.skip-link:focus {
  top: var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: min(100% - 32px, var(--content-max));
  margin-inline: auto;
}

@media (min-width: 800px) {
  .wrap {
    width: min(100% - 48px, var(--content-max));
  }
}

/* #1313 A5: Alt-Markup in konto.html vor dem ersten Zeichnen ausblenden.
   layout.js entfernt es anschließend; es wird kein Platz reserviert. */
.demo-banner {
  display: none;
}

/* Kopf: Seitenfarbe (hell weiß, dunkel schwarz), eine Haarlinie,
   Navigation ohne Flächen. */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  width: min(100% - 16px, var(--content-max));
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  padding-block: var(--space-1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.02em;
  min-height: 44px;
  flex-shrink: 0;
}

.brand:hover {
  color: var(--text);
}

.brand-logo {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* Logo als Inline-SVG: Strich = currentColor, Punkt und Bogen im Akzent.
   So passt es auf den weißen Kopf und den dunklen Fuß. */
.logo-punkt {
  fill: var(--link);
}

.logo-bogen {
  stroke: var(--link);
}

.brand-name {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

/* Links und Gruppen-Auslöser (native <button>) sehen gleich aus. */
.nav-desktop a,
.nav-ausklapp {
  color: var(--text-secondary);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.nav-desktop a:hover,
.nav-ausklapp:hover,
.nav-ausklapp[aria-expanded="true"] {
  color: var(--text);
}

/* Aktuelle Seite: Unterstrich im Akzent (auch der Use-Cases-Auslöser auf
   use-cases.html und dessen Gegenstück im Handy-Menü). */
.nav-desktop a[aria-current="page"],
.nav-ausklapp[aria-current="page"],
.nav-mobile [aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* „Use Cases“: Auslöser ist ein <button> (Disclosure, kein ARIA-Menü),
   das Panel trägt .band-dunkel und ist in beiden Themes dunkel. */
.nav-gruppe {
  position: relative;
  display: inline-flex;
}

.nav-ausklapp svg,
.nav-mobile-gruppe > summary svg {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform 0.15s ease;
}

.nav-ausklapp[aria-expanded="true"] svg,
.nav-mobile-gruppe[open] > summary svg {
  transform: rotate(180deg);
}

.nav-menue {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 40;
  inline-size: max-content;
  min-inline-size: 18rem;
  max-inline-size: min(26rem, calc(100vw - 32px));
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
  box-shadow: var(--shadow-pop);
  max-block-size: calc(100dvh - 120px);
  overflow-y: auto;
}

.nav-gruppe:last-child .nav-menue {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.nav-menue-gruppe {
  margin: var(--space-2) var(--space-3) var(--space-1);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.nav-menue ul {
  list-style: none;
  margin: 0 0 var(--space-1);
  padding: 0;
}

.nav-desktop .nav-menue a {
  display: flex;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: normal;
}

.nav-desktop .nav-menue a:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.lang-select {
  width: auto;
  flex: 0 0 auto;
  min-height: 44px;
  max-width: 4.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding-inline: var(--space-2);
}

[data-account-slot] {
  display: inline-flex;
  flex-shrink: 0;
  /* #1314: Platz auch für den georgischen Login und kurze Kontonamen. */
  min-width: 6rem;
  justify-content: flex-end;
}

/* Login im Kopf als Umrissknopf: der eine gefüllte Knopf je Bildschirm
   gehört dem eigentlichen Ziel (Warteliste, Buchen). */
[data-account-slot] .btn {
  min-width: 6rem;
  padding-inline: 12px;
  white-space: nowrap;
  background: transparent;
  color: var(--text);
  border-color: var(--rule);
}

[data-account-slot] .btn:hover {
  background: var(--surface-muted);
  color: var(--text);
}

/* Theme-Umschalter (Sonne/Mond) und Menüknopf: gleiche Umrissknöpfe.
   Das Symbol zeigt das Ziel: Mond im hellen Theme, Sonne im dunklen. */
.theme-toggle,
.nav-toggle {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle:hover,
.nav-toggle:hover {
  background: var(--surface-muted);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle .icon-sonne,
:root[data-theme="dark"] .theme-toggle .icon-mond {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sonne {
  display: block;
}

.nav-mobile {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding-block: var(--space-2);
  max-block-size: calc(100dvh - 120px);
  overflow-y: auto;
}

.nav-mobile a,
.nav-mobile button {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  width: 100%;
  text-align: start;
  cursor: pointer;
}

/* Handy-Menü: Use Cases als aufklappbare Gruppe. Gruppenzeilen und Listen
   tragen dieselbe Linie links, ohne Außenabstand, damit sie durchläuft. */
.nav-mobile-gruppe > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.nav-mobile-gruppe > summary::-webkit-details-marker {
  display: none;
}

.nav-mobile-gruppe > :not(summary) {
  margin: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--border);
}

.nav-mobile-gruppe ul {
  list-style: none;
  padding-block: 0;
}

.nav-mobile-gruppe .nav-menue-gruppe {
  padding-block: var(--space-3) var(--space-1);
}

.nav-mobile-gruppe > :last-child {
  margin-block-end: var(--space-2);
}

.nav-mobile-panel > ul {
  margin: 0;
  padding: 0;
}

@media (max-width: 899px) {
  .brand-name {
    display: none;
  }
}

/* #1314: Die reservierte Login-Breite passt auch in einen 320-px-Kopf. */
@media (max-width: 359px) {
  .header-tools { gap: var(--space-1); }
}

@media (min-width: 900px) {
  .header-inner {
    width: min(100% - 32px, var(--content-max));
    gap: var(--space-3);
  }

  .lang-select {
    max-width: 5.5rem;
  }

  .nav-desktop {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .nav-mobile {
    display: none !important;
  }
}

/* #1314: Eine gemeinsame Menü-Schwelle verhindert Sprünge bei 1200–1279 px. */
@media (min-width: 900px) and (max-width: 1279px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile:not([hidden]) { display: block !important; }
}

/* Georgisch und Russisch stehen enger, damit auch angemeldet (Downloads
   und Kontoname bis 10 rem) nichts die Sprachwahl überdeckt. */
@media (min-width: 1280px) {
  .nav-desktop:lang(ka),
  .nav-desktop:lang(ru) {
    gap: 0;
  }

  .nav-desktop > a:lang(ka),
  .nav-desktop > a:lang(ru),
  .nav-ausklapp:lang(ka),
  .nav-ausklapp:lang(ru) {
    padding-inline: var(--space-2);
    font-size: 0.9375rem;
  }
}

/* Knöpfe: gefüllt in Tinte (primär, einer je Bildschirm) oder Umriss (sekundär). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--primary-hover);
  color: var(--on-primary);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--rule);
}

.btn-secondary:hover {
  background: var(--surface-muted);
  color: var(--text);
  border-color: var(--text-secondary);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.field label {
  font-size: 13px;
  color: var(--text-secondary);
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

legend {
  padding: 0;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

/* Formularfelder: Seitenfarbe, Rahmen ≥ 3:1. */
input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

.form-error {
  color: var(--danger);
  font-size: 14px;
}

.muted {
  color: var(--text-secondary);
}

.hint {
  color: var(--text-secondary);
  font-size: 14px;
}

.page-main {
  padding-block: var(--space-8) var(--space-12);
}

.page-title,
.section h2,
h1 {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

/* Georgisch: keine negative Laufweite (Noto Sans Georgian läuft sonst
   zusammen), mehr Zeilenhöhe, lange Wörter dürfen umbrechen. */
h1:lang(ka),
.page-title:lang(ka) {
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

h2:lang(ka),
.section h2:lang(ka),
.btn:lang(ka) {
  letter-spacing: 0;
  overflow-wrap: break-word;
}

/* Kategorie-Label über einer Überschrift (NVIDIA-Muster): das Wort in
   Textfarbe, darüber eine kurze Akzentlinie. Nennt die Kategorie, nicht
   den Titel noch einmal. */
.kategorie,
.section .kategorie {
  display: block;
  margin: 0 0 var(--space-3);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.kategorie::before {
  content: "";
  display: block;
  inline-size: 24px;
  block-size: 2px;
  margin-block-end: var(--space-3);
  background: var(--link);
}

.kategorie:lang(ka),
.nav-menue-gruppe:lang(ka) {
  letter-spacing: 0;
}

/* Hero (Startseite) und Kopfband der Use-Case-Seite: dunkles Band mit
   Titel, Satz und höchstens einem Knopf. Unter dem Hero der Startseite
   folgen die Kennzahlen im selben Band, darum unten weniger Abstand. */
.hero {
  padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 72px);
}

/* A8: technische Katapult-Skizze rechts am Übergang zum Zahlenband.
   Absolut und ohne Platzbedarf; die linke Kennzahl und alle Hero-Texte
   bleiben außerhalb der Zeichnung. Das SVG begrenzt die Flugbahn selbst. */
.home-main .hero {
  position: relative;
  isolation: isolate;
  z-index: 1;
}

.hero-signal {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% - 40px);
  inline-size: min(64vw, 920px);
  block-size: auto;
  aspect-ratio: 3;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  opacity: 0.2;
  color: #c2cdd5;
}

.hero-signal path,
.hero-signal circle {
  vector-effect: non-scaling-stroke;
}

.hero-katapult-linie {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.hero-katapult-hilfe,
.hero-katapult-nachzug {
  opacity: 0.6;
}

.hero-katapult-flugbahn {
  opacity: 0.7;
}

.hero-katapult-arm {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: rotate(52deg);
}

.hero-katapult-ladung,
.hero-katapult-projektil {
  opacity: 0;
}

.hero-katapult-projektil {
  /* Gleiche Parabel wie der SVG-Pfad; Startpunkt am Arm bei -24 Grad.
     #1318: vier Wurfteile (GPU, Chat, Chip, Netz) starten gemeinsam,
     fliegen unterschiedlich schnell und drehen sich über offset-rotate. */
  offset-path: path("M234.445 62.683 Q565 -84.489 950 160");
  offset-distance: 0%;
  offset-rotate: 0deg;
}

@media (max-width: 768px) {
  .hero-signal { display: none; }
}

/* Ohne JS und bei reduced-motion: fertige Zeichnung. Alle Animationen
   teilen 16 s, ohne versetzte Schleifen oder Timer. Tab-Pause friert auch
   Zeichenmaske, Wurfarm und Projektil am aktuellen Zeitpunkt ein. */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .hero-signal[data-motion] * {
    animation-duration: 16s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
  }

  .hero-signal[data-motion] .hero-katapult-zyklus { animation-name: katapult-zyklus; }
  .hero-signal[data-motion] .hero-katapult-grund { animation-name: katapult-grund; }
  .hero-signal[data-motion] .hero-katapult-basis { animation-name: katapult-basis; }
  .hero-signal[data-motion] .hero-katapult-aufbau { animation-name: katapult-aufbau; }
  .hero-signal[data-motion] .hero-katapult-details { animation-name: katapult-details; }
  .hero-signal[data-motion] .hero-katapult-arm { animation-name: katapult-arm; }
  .hero-signal[data-motion] .hero-katapult-ladung { animation-name: katapult-ladung; }
  .hero-signal[data-motion] .hero-katapult-wurf-1 { animation-name: katapult-flug-1; }
  .hero-signal[data-motion] .hero-katapult-wurf-2 { animation-name: katapult-flug-2; }
  .hero-signal[data-motion] .hero-katapult-wurf-3 { animation-name: katapult-flug-3; }
  .hero-signal[data-motion] .hero-katapult-wurf-4 { animation-name: katapult-flug-4; }

  .hero-signal[data-motion="running"] * {
    animation-play-state: running;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-signal * { animation: none; }
}

@keyframes katapult-zyklus {
  0%, 94%, 100% { opacity: 0; }
  4%, 82% { opacity: 1; }
}

@keyframes katapult-grund {
  0% { stroke-dashoffset: 1; }
  14%, 100% { stroke-dashoffset: 0; }
}

@keyframes katapult-basis {
  0%, 8% { stroke-dashoffset: 1; }
  23%, 100% { stroke-dashoffset: 0; }
}

@keyframes katapult-aufbau {
  0%, 20% { stroke-dashoffset: 1; }
  34%, 100% { stroke-dashoffset: 0; }
}

@keyframes katapult-details {
  0%, 30% { stroke-dashoffset: 1; }
  40%, 100% { stroke-dashoffset: 0; }
}

@keyframes katapult-arm {
  0%, 40% { transform: rotate(-88deg); animation-timing-function: cubic-bezier(.4, 0, .8, .7); }
  46% { transform: rotate(-24deg); animation-timing-function: cubic-bezier(.25, .42, .5, 1); }
  54%, 100% { transform: rotate(52deg); }
}

@keyframes katapult-ladung {
  0%, 32% { opacity: 0; }
  38%, 45.99% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@keyframes katapult-flug-1 {
  0%, 45.99% { opacity: 0; offset-distance: 0%; offset-rotate: 0deg; }
  46% { opacity: 1; offset-distance: 0%; offset-rotate: 0deg; }
  68% { opacity: 1; offset-distance: 100%; offset-rotate: 200deg; }
  68.01%, 100% { opacity: 0; offset-distance: 100%; offset-rotate: 200deg; }
}

@keyframes katapult-flug-2 {
  0%, 45.99% { opacity: 0; offset-distance: 0%; offset-rotate: 0deg; }
  46% { opacity: 1; offset-distance: 0%; offset-rotate: 0deg; }
  71% { opacity: 1; offset-distance: 100%; offset-rotate: -160deg; }
  71.01%, 100% { opacity: 0; offset-distance: 100%; offset-rotate: -160deg; }
}

@keyframes katapult-flug-3 {
  0%, 45.99% { opacity: 0; offset-distance: 0%; offset-rotate: 0deg; }
  46% { opacity: 1; offset-distance: 0%; offset-rotate: 0deg; }
  74% { opacity: 1; offset-distance: 100%; offset-rotate: 260deg; }
  74.01%, 100% { opacity: 0; offset-distance: 100%; offset-rotate: 260deg; }
}

@keyframes katapult-flug-4 {
  0%, 45.99% { opacity: 0; offset-distance: 0%; offset-rotate: 0deg; }
  46% { opacity: 1; offset-distance: 0%; offset-rotate: 0deg; }
  77% { opacity: 1; offset-distance: 100%; offset-rotate: -220deg; }
  77.01%, 100% { opacity: 0; offset-distance: 100%; offset-rotate: -220deg; }
}

.uc-hero {
  padding-block: clamp(56px, 8vw, 112px);
}

.hero h1,
.uc-kopf h1 {
  margin: 0 0 var(--space-6);
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 600;
  max-width: 22ch;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.hero h1:lang(ka),
.uc-kopf h1:lang(ka) {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.18;
  letter-spacing: 0;
}

.hero .lead,
.uc-kopf .lead {
  margin: 0 0 var(--space-8);
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 54ch;
}

.hero-botschaft {
  min-width: 0;
  margin-block-end: var(--space-8);
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.hero-slogan span {
  display: block;
}

.hero-slogan {
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 500;
}

.hero .hero-botschaft .lead {
  margin-block-end: 0;
}

/* Erklärt die beiden Zustände einmal für die ganze Seite. */
.uc-statushinweis {
  margin: 0;
  max-width: 70ch;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.hero .aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}

.hero .aktionen .btn {
  min-height: 48px;
  padding-inline: var(--space-6);
}

@media (min-width: 1040px) {
  .hero .hero-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas: "titel text" "aktionen text";
    gap: var(--space-8) 56px;
    align-items: start;
  }

  .hero .hero-kopf h1 {
    grid-area: titel;
    margin-block-end: 0;
  }

  .hero .hero-kopf .hero-botschaft {
    grid-area: text;
    margin-block-end: 0;
    align-self: center;
  }

  .hero .hero-kopf .aktionen {
    grid-area: aktionen;
  }
}

.section {
  padding-block: var(--space-12);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.section-head h2 {
  margin: 0;
}

.steps {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 800px) {
  .steps {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-8);
  }
}

.step h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.0625rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.step p {
  margin: 0;
  color: var(--text-secondary);
}

.step-num {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.offer-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .offer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .offer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.offer-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  color: var(--text);
  min-width: 0;
  position: relative;
}

.offer-card p {
  margin: 0;
}

.offer-card h3 {
  margin: 0;
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.pill,
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
}

.status-verfuegbar {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success);
}

.status-pruefung {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning);
}

.status-offline {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}

.results-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

/* Marktplatz: der eine Hinweis über der Liste (statt auf jeder Karte). */
.markt-hinweis {
  max-width: 70ch;
  margin: 0 0 var(--space-6);
  color: var(--text-secondary);
  font-size: 14px;
}

.markt-hinweis p {
  margin: 0;
}

.markt-hinweis p + p {
  margin-block-start: var(--space-2);
}

.empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
}

/* Hinweis- und Ergebniskästen: neutrale Fläche, Zustand nur als 2-px-Kante. */
.note {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-inline-start: 2px solid var(--warning);
  border-radius: var(--radius-control);
  padding: var(--space-4);
}

.cal-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

@media (max-width: 499px) {
  .cal-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.cal-nav .btn {
  font-size: 13px;
  padding-inline: 8px;
}

.cal-caption {
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  font-size: 13px;
  margin-bottom: var(--space-4);
}

.leg-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.leg-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  border-radius: var(--radius-control);
  font-weight: 600;
  font-size: 12px;
}

.leg-swatch.is-frei,
.cal-cell.is-frei {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success);
}

.leg-swatch.is-reserviert,
.cal-cell.is-reserviert {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning);
}

.leg-swatch.is-gebucht,
.cal-cell.is-gebucht {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}

.cal-grid {
  display: grid;
  gap: 6px;
}

.cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.cal-grid-tage {
  display: block;
}

.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  min-width: 0;
  padding: 6px 4px;
  border: 1px solid currentColor;
  border-radius: var(--radius-card);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  overflow-wrap: anywhere;
  text-align: center;
}

.cal-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.cal-mark {
  font-size: 11px;
  font-weight: 600;
}

/* Fuß: dunkles Band (.band-dunkel) in beiden Themes. */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-12);
  color: var(--text-secondary);
  font-size: 14px;
}

/* Platz für den Cookie-Banner liegt im dunklen Fuß, nicht hell darunter.
   --cookie-height setzt layout.js an <html>. */
.has-cookie-banner .site-footer {
  padding-block-end: calc(var(--space-12) + var(--cookie-height, 220px));
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  align-items: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-company {
  flex-basis: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}

.footer-company a {
  color: inherit;
  text-underline-offset: 3px;
}

.footer-links a,
.footer-ph {
  color: var(--text-secondary);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.footer-links a:hover,
.footer-ph:hover {
  color: var(--text);
}

dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  max-width: 28rem;
  width: calc(100% - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  color: var(--text);
  background: var(--surface);
}

dialog::backdrop {
  background: var(--overlay);
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dialog-head h2,
.dialog-head h3 {
  margin: 0;
}

.dialog-x {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.cookie-banner {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 30;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding-block: var(--space-4);
}

.cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
}

.cookie-banner-title {
  font-weight: 600;
  margin: 0 0 var(--space-1);
}

.cookie-banner p {
  margin: 0;
  max-width: 48rem;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cookie-dialog {
  max-width: 32rem;
}

.cookie-cat {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.cookie-cat p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.cookie-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}

.cookie-toggle input {
  width: auto;
  min-height: 22px;
}

.faq-group {
  margin-bottom: var(--space-8);
}

.faq-group h2 {
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.faq-item p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
}

.legal-operator {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.legal-company {
  font-weight: 600;
}

.legal-company bdi,
.legal-details bdi {
  direction: ltr;
  unicode-bidi: isolate;
}

.legal-details {
  display: grid;
  gap: var(--space-4);
  /* #985/#1314: Unten genügt der Innenabstand des Rechtsträger-Kastens. */
  margin-block: var(--space-6) 0;
}

.legal-details dt {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.legal-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.legal-list article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}

.legal-operator h2,
.legal-list h2 {
  margin: 0 0 var(--space-2);
  font-size: 1.125rem;
}

.host-checks {
  display: grid;
  gap: var(--space-3);
}

.host-checks label,
.hw-plan {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 44px;
}

.hw-plan-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Echte Maschinen (echte-angebote.js): Karte mit Haarlinie, Marke als leise Zeile --- */
/* .onager-marke-eigen/-fremd sehen gleich aus; die Klassen bleiben im Markup. */
.onager-echt-marke {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

/* Zustand einer Maschine: Punkt in Statusfarbe + Wort in Textfarbe.
   Mac (Vertrag R9b): neutrale Marke „In Vorbereitung“ statt Live-Zustand,
   leerer Ring + Nebentext wie .uc-status auf der Use-Case-Seite. */
.onager-echt-zustand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 8px;
  font-weight: 500;
}
.onager-echt-prep { color: var(--text-secondary); }

/* Mac (Vertrag R6): statt Beschreibung und Buchungsformular ein leiser
   Satz mit Link auf use-cases.html#mac, so leise wie die Beschreibung. */
.onager-echt-zeile,
.markt-mac-hinweis { margin: 0 0 6px; color: var(--text-secondary); font-size: 14px; }
.onager-echt-preis { margin: 10px 0 6px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.onager-echt-hinweis { font-size: 13px; }

/* ---------------------------------------------------------------- Buchung, Downloads (27.09.2026) */
.onager-buchen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: flex-end;
  margin: var(--space-3) 0 0;
}
.onager-buchen label { min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.onager-buchen select { max-width: 100%; padding: 6px 8px; }
.onager-buchen .form-error { flex-basis: 100%; margin: 0; }
.onager-buchen[data-vm] > strong { flex-basis: 100%; }
.onager-buchen[data-vm] label { min-width: 0; max-width: 100%; }
.onager-buchen > .onager-dauer,
.onager-buchen > .note { flex-basis: 100%; margin: 0; }
.onager-buchen-hinweis { margin: var(--space-3) 0 0; }

.onager-buchung {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-inline-start: 2px solid var(--success);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin: 0 0 var(--space-6);
}
.onager-buchung h2 { margin: 0 0 var(--space-2); color: var(--text); }
.onager-buchung code { white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; }
/* Session-Keys dürfen nur nach einer vollständigen Gruppe samt Bindestrich
   umbrechen. <wbr> fügt keine Zeichen hinzu; kopiert wird der Original-Key. */
.onager-buchung code.onager-session-key { white-space: normal; word-break: normal; overflow-wrap: normal; }
.onager-session-key span { display: inline-block; white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.onager-buchung pre {
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: var(--space-3);
  font-size: 13px;
}
.onager-zugang { margin: var(--space-3) 0; }
.onager-zugang dt { font-weight: 600; margin-top: var(--space-2); }
.onager-zugang dd { margin: 0; overflow-wrap: anywhere; }
.onager-zugang .btn { margin-left: var(--space-2); }

.dl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin: 0 0 var(--space-6);
}
.dl-card h2 { margin-top: 0; }
.dl-card pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

/* Startseite und Use-Case-Seite: Abschnitte im Wechsel weiß/hellgrau
   (.band-wechsel), keine Kästen. Die Haarlinie oben trennt im dunklen Theme
   #000 von #0a0a0a; im hellen liegt sie unsichtbar auf der Farbkante. */
.home-main,
.uc-main {
  --home-content-max: 1160px;
}

.home-main .wrap,
.uc-main .wrap {
  max-width: var(--home-content-max);
}

.home-main .section,
.uc-main .section {
  padding-block: clamp(56px, 7vw, 96px);
  border-block-start: 1px solid var(--border);
}

/* Hero und Kennzahlen bilden ein dunkles Band: keine Linie dazwischen. */
.home-main .home-stats {
  padding-block: 0 clamp(48px, 6vw, 88px);
  border-block-start: 0;
}

.home-main .section-head {
  margin-bottom: var(--space-8);
}

.home-main h2,
.uc-main h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  text-wrap: balance;
}

.home-main p,
.uc-main p {
  line-height: 1.65;
}

.home-main a {
  overflow-wrap: anywhere;
}

/* Ein Feld für verfügbare Maschinen; keine Verhältnis- oder Gesamtanzeige. */
.home-stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 18rem;
  margin: 0;
}

.home-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4) 0 0;
  border-block-start: 2px solid var(--border);
}

.home-stat dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}

.home-stat dd {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  margin: 0;
}

/* Zustandspunkt (Marktplatzkarte und Kennzahlen). „Nicht erreichbar“ ist ein
   leerer Ring, damit der Zustand nicht nur an der Farbe hängt. */
.onager-echt-zustand::before,
.home-stat dt::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-pill);
  flex: none;
}

.onager-echt-ok::before,
.home-stat.st-frei dt::before {
  background: var(--success);
}

.onager-echt-warn::before {
  background: var(--warning);
}

.onager-echt-aus::before,
.onager-echt-prep::before {
  box-shadow: inset 0 0 0 1.5px var(--text-secondary);
}

/* Use Cases auf der Startseite: Raster aus Linien, jede Kachel ein Link mit
   Zustand, Menüname, Untertitel und Maschinen; der Beschreibungstext steht
   nur einmal auf use-cases.html. Beim Zeigen läuft die Akzentlinie über die
   Kachel. */
.home-uc .uc-lead {
  margin: var(--space-3) 0 0;
  max-width: 60ch;
}

.uc-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-6);
}

.uc-kachel {
  min-width: 0;
}

.uc-kachel a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-4) 0 var(--space-6);
  border-block-start: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.uc-kachel a::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 2px;
  background: var(--link);
  transition: inline-size 0.2s ease;
}

.uc-kachel a:hover::before,
.uc-kachel a:focus-visible::before {
  inline-size: 100%;
}

.uc-kachel h3 {
  margin: var(--space-2) 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Pfeil als Maske: Commissioner hat kein U+2192, ein Textpfeil käme aus
   einer Ersatzschrift. data: ist in der CSP (img-src) erlaubt. */
.uc-kachel h3::after {
  content: "";
  display: inline-block;
  vertical-align: -1px;
  margin-inline-start: var(--space-2);
  inline-size: 14px;
  block-size: 14px;
  background: var(--link);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.uc-kachel p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Zustand eines Use Cases (Startseite und use-cases.html): Punkt + Wort.
   „In Vorbereitung“ ist ein leerer Ring, damit es nicht nur an der Farbe
   hängt; das Wort bleibt in Text- bzw. Nebentextfarbe. */
.uc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.uc-status::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-pill);
  flex: none;
  box-shadow: inset 0 0 0 1.5px var(--text-secondary);
}

.uc-status[data-status="verfuegbar"] {
  color: var(--text);
}

.uc-status[data-status="verfuegbar"]::before {
  background: var(--success);
  box-shadow: none;
}

/* So funktioniert es: Haarlinie über jedem Schritt. */
.home-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.home-steps .step {
  min-width: 0;
  border-block-start: 1px solid var(--border);
  padding-block-start: 20px;
}

.home-steps .step-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  margin-bottom: var(--space-3);
}

.home-steps p {
  font-size: 0.9375rem;
}

/* Warteliste: ein Abschnitt wie die anderen, kein Kasten, keine Warnfarbe. */
.home-beta-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8) 56px;
  align-items: start;
}

@media (max-width: 700px) {
  .home-beta-box {
    grid-template-columns: minmax(0, 1fr);
  }
}

.home-beta-box h2 {
  margin: 0 0 var(--space-2);
}

.home-beta-copy p {
  max-width: 70ch;
  margin: 0;
  color: var(--text-secondary);
}

.home-form { display: grid; gap: var(--space-4); width: 100%; min-width: 0; }
.home-form textarea { min-height: 90px; resize: vertical; }
.home-form .btn { justify-self: start; }
.home-form p { margin: 0; }

@media (min-width: 640px) {
  .home-steps,
  .uc-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .uc-kachel a {
    padding-block-end: var(--space-8);
  }
}

@media (min-width: 900px) {
  .home-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* neun Use Cases: drei Spalten gehen ohne Rest auf */
  .uc-raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .hero .aktionen .btn {
    width: 100%;
  }

  .home-form .btn {
    justify-self: stretch;
  }
}

/* Use-Case-Seite (use-cases.html): je Gruppe ein Abschnitt. Der Gruppenkopf
   nennt Kategorie und Maschinen einmal (Vertrag R4a), darunter je Use Case
   ein Eintrag mit genau einem Knopf. Ab 900 px im Eintrag links Titel und
   Zustand, rechts Text, Grenze und Knopf. Floats statt Raster, damit die
   linke Spalte nicht von der Höhe des Textes rechts abhängt. */
.uc-gruppe-kopf {
  margin-block-end: var(--space-8);
}

/* Hinweis für die ganze Gruppe (VM): leise, kein Kasten. */
.uc-gruppe-hinweis {
  margin: var(--space-3) 0 0;
  max-width: 68ch;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.uc-eintrag {
  display: flow-root;
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--border);
  scroll-margin-block-start: var(--space-6);
}

.uc-eintrag + .uc-eintrag {
  margin-block-start: var(--space-12);
}

.uc-eintrag h2 {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.25;
}

.uc-eintrag .uc-status {
  margin: 0 0 var(--space-6);
}

.uc-text {
  margin: 0 0 var(--space-4);
  max-width: 68ch;
}

.uc-grenze {
  margin: 0 0 var(--space-2);
  max-width: 68ch;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.uc-label {
  font-weight: 600;
  color: var(--text);
}

/* Gaming-Hinweis (Vertrag R7): leise, Linie statt Kasten. */
.uc-hinweis {
  margin: var(--space-4) 0 0;
  max-width: 68ch;
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--rule);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.uc-aktionen {
  margin-block-start: var(--space-4);
}

/* Abschluss der Use-Case-Seite (Vertrag R4b): ein Wartelisten-Knopf statt einem je Eintrag. */
.cta-band .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
}

/* #1314: Überschrift im Abschlussband steht immer oben (Zeile so hoch wie der Knopf); der Knopf bleibt mit ihr mittig ausgerichtet. Die Höhe des Bandes regelt die Mindesthöhe (siehe „dunkle Bänder“ unten). */
.cta-band h2 {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 48px;
}

/* #1314: Dunkle Bänder behalten beim Sprachwechsel dieselbe Höhe. Mindesthöhe =
   Hüllkurve über die vier Sprachen (de/en/ka/ru), je Breitenbereich linear in vw;
   Inhalt bleibt oben ausgerichtet, die Überschrift steht überall auf gleicher Höhe.
   Gemessen bei frisch geladener Seite, mit und ohne Scrollbalken, mit geladenen Live-Zahlen, Schritt 10 px von 320 bis 1600 px (mehrere Versätze); bei geänderten
   Texten, Schriftgrößen oder Abständen im Band neu messen. */
@media (min-width: 320px) and (max-width: 359px) {
  .hero { min-height: calc(586px + 0.00vw); }
  .home-stats { min-height: calc(522px + 0.00vw); }
  .uc-hero { min-height: calc(590px + 0.00vw); }
  .cta-band { min-height: calc(237px + 0.00vw); }
}
@media (min-width: 360px) and (max-width: 399px) {
  .hero { min-height: calc(504px + 0.00vw); }
  .home-stats { min-height: calc(501px + 0.00vw); }
  .uc-hero { min-height: calc(532px + 0.00vw); }
  .cta-band { min-height: calc(237px + 0.00vw); }
}
@media (min-width: 400px) and (max-width: 439px) {
  .hero { min-height: calc(477px + 0.00vw); }
  .home-stats { min-height: calc(480px + 0.00vw); }
  .uc-hero { min-height: calc(506px + 0.00vw); }
  .cta-band { min-height: calc(237px + 0.00vw); }
}
@media (min-width: 440px) and (max-width: 479px) {
  .hero { min-height: calc(460px + 0.00vw); }
  .home-stats { min-height: calc(452px + 0.00vw); }
  .uc-hero { min-height: calc(456px + 0.00vw); }
  .cta-band { min-height: calc(237px + 0.00vw); }
}
@media (min-width: 480px) and (max-width: 559px) {
  .hero { min-height: calc(434px + 0.00vw); }
  .home-stats { min-height: calc(452px + 0.00vw); }
  .uc-hero { min-height: calc(447px + 0.00vw); }
  .cta-band { min-height: calc(227px + 0.00vw); }
}
@media (min-width: 560px) and (max-width: 599px) {
  .hero { min-height: calc(393px + 0.00vw); }
  .home-stats { min-height: calc(431px + 0.00vw); }
  .uc-hero { min-height: calc(403px + 0.00vw); }
  .cta-band { min-height: calc(227px + 0.00vw); }
}
@media (min-width: 600px) and (max-width: 767px) {
  .hero { min-height: calc(364px + 4.21vw); }
  .home-stats { min-height: calc(431px + 0.00vw); }
  .uc-hero { min-height: calc(403px + 0.00vw); }
  .cta-band { min-height: calc(227px + 0.00vw); }
}
@media (min-width: 768px) and (max-width: 919px) {
  .hero { min-height: calc(221px + 22.79vw); }
  .home-stats { min-height: calc(401px + 0.00vw); }
  .uc-hero { min-height: calc(231px + 21.19vw); }
  .cta-band { min-height: calc(72px + 12.31vw); }
}
@media (min-width: 920px) and (max-width: 1039px) {
  .hero { min-height: calc(216px + 23.37vw); }
  .home-stats { min-height: calc(196px + 10.01vw); }
  .uc-hero { min-height: calc(231px + 21.20vw); }
  .cta-band { min-height: calc(55px + 14.00vw); }
}
@media (min-width: 1040px) and (max-width: 1239px) {
  .hero { min-height: calc(86px + 30.12vw); }
  .home-stats { min-height: calc(200px + 9.65vw); }
  .uc-hero { min-height: calc(231px + 21.20vw); }
  .cta-band { min-height: calc(55px + 14.00vw); }
}
@media (min-width: 1240px) and (max-width: 1439px) {
  .hero { min-height: calc(283px + 14.80vw); }
  .home-stats { min-height: calc(244px + 6.00vw); }
  .uc-hero { min-height: calc(217px + 22.55vw); }
  .cta-band { min-height: calc(104px + 10.44vw); }
}
@media (min-width: 1440px) {
  .hero { min-height: calc(490px + 0.00vw); }
  .home-stats { min-height: calc(325px + 0.51vw); }
  .uc-hero { min-height: calc(533px + 0.00vw); }
  .cta-band { min-height: calc(247px + 0.00vw); }
}

@media (min-width: 900px) {
  .uc-eintrag > h2,
  .uc-eintrag > .uc-status {
    float: inline-start;
    clear: inline-start;
    inline-size: 36%;
  }

  .uc-eintrag > :not(h2, .uc-status) {
    margin-inline-start: 42%;
  }
}

/* ---- Marktplatz: Listenansicht (Umschalter Kacheln/Liste) ---- */
.view-toggle { display: inline-flex; gap: 4px; }
.view-toggle .btn { padding: 8px 12px; font-size: 14px; }
/* Gewählt: abgesetzte Fläche und Kante in Textfarbe; gefüllt ist nur der Primärknopf. */
.view-toggle .btn[aria-pressed="true"] {
  background: var(--surface-muted);
  color: var(--text);
  border-color: var(--text);
}
.offer-grid.offer-list { grid-template-columns: 1fr; gap: var(--space-2); }
.offer-list .offer-card.onager-echt { padding: 12px 16px; }
.offer-list .onager-echt-zeile { display: none; }
.offer-list .onager-echt-preis { margin: 0; font-size: 16px; }
.offer-list .onager-echt-zustand { margin: 0; }
.offer-list .offer-card h3 { margin: 0; font-size: 17px; }
.offer-list .onager-echt-marke { margin: 0 0 2px; }
.offer-list form.onager-buchen { gap: var(--space-2); margin: 0; }
.offer-list form.onager-buchen label { font-size: 12px; }
.offer-list .onager-buchen-hinweis,
.offer-list .markt-mac-hinweis { margin: 0; }
@media (min-width: 900px) {
  .offer-list .offer-card.onager-echt {
    display: grid;
    grid-template-columns: minmax(200px, 1.3fr) minmax(110px, 0.6fr) minmax(120px, 0.7fr) minmax(280px, 2fr);
    grid-template-areas: "marke zustand preis buchen" "titel zustand preis buchen" "belegung belegung belegung belegung";
    column-gap: 16px; row-gap: 2px; align-items: center;
  }
  .offer-list .belegung { grid-area: belegung; margin-top: var(--space-2); }
  .offer-list .onager-echt-marke { grid-area: marke; }
  .offer-list .offer-card h3 { grid-area: titel; }
  .offer-list .onager-echt-zustand { grid-area: zustand; }
  .offer-list .onager-echt-preis { grid-area: preis; }
  .offer-list form.onager-buchen, .offer-list .onager-buchen-hinweis, .offer-list .markt-mac-hinweis { grid-area: buchen; }
}

/* Belegungskalender echter Maschinen (29.09.2026) — website/belegung.js.
   Legende, Raster und Zellen (.cal-*, .leg-*) stehen weiter oben; hier der
   Aufklapper, die Statuszeilen und die Farbe für „vergangen“. */
.belegung {
  margin-top: var(--space-4);
}

.belegung-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: var(--space-3);
  margin-top: var(--space-2);
  background: var(--surface);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.belegung-panel h4 {
  margin: 0 0 var(--space-2);
  font-size: 15px;
}

.belegung-stand {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

.belegung-hinweis {
  font-size: 12px;
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
}

.belegung-notiz {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-inline-start: 2px solid var(--warning);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.leg-swatch.is-vergangen,
.cal-cell.is-vergangen {
  background: var(--surface-muted);
  color: var(--text-secondary);
  border-color: var(--border);
}

@media (max-width: 420px) {
  .belegung-panel { padding: var(--space-2); }
}
.dl-empfohlen { color: var(--text); font-weight: 600; }

/* #1313: Plattform- und Service-Seiten nutzen die vorhandenen Theme-Farben,
   dunklen Hero-Bänder, Linien und Abstände; keine zusätzliche Farbebene. */
.info-main .section { padding-block: clamp(40px, 6vw, 72px); }
.info-main .uc-kopf h1 { max-width: 26ch; }
.info-main p, .info-main dd { overflow-wrap: anywhere; }
.service-grid { display: grid; gap: var(--space-8) 56px; }
.service-grid > div { min-width: 0; }
.contact-wrap { max-width: 800px; }
.service-details { display: grid; gap: var(--space-6); margin: 0 0 var(--space-8); }
.service-details dt { margin-bottom: var(--space-2); font-weight: 600; }
.service-details dd { margin: 0; color: var(--text-secondary); max-width: 70ch; }
.service-faq-wrap { max-width: 960px; }
.service-faq { border-block-start: 1px solid var(--border); padding-block: var(--space-4); }
.service-faq:last-child { border-block-end: 1px solid var(--border); }
.service-faq summary { cursor: pointer; font-weight: 600; padding-block: var(--space-2); }
.service-faq p { max-width: 75ch; color: var(--text-secondary); }
.hardware-group { margin-block: var(--space-8); }
.hardware-group > h3 { font-size: 1.25rem; margin: 0 0 var(--space-4); }
.hardware-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); }
.hardware-grid > li { border-block-start: 1px solid var(--border); padding-top: var(--space-4); min-width: 0; }
.hardware-grid h4 { font-size: 1.0625rem; margin: 0 0 var(--space-4); overflow-wrap: anywhere; }
.hardware-description { margin: 0 0 var(--space-4); color: var(--text-secondary); }
.hardware-grid dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.hardware-grid dt { color: var(--text-secondary); }
.hardware-grid dd { margin: 0; }
.hardware-grid .hardware-id { font-size: 0.8125rem; color: var(--text-secondary); }
.contact-fields { display: grid; gap: var(--space-6); }
.contact-fields .field p { margin: 0; }
.contact-fields textarea { resize: vertical; }
.contact-fields [aria-invalid="true"] { border-color: var(--danger); }
.contact-privacy { margin-block: var(--space-8) var(--space-4); max-width: 78ch; }
#kontakt-status { min-height: 1.5em; overflow-wrap: anywhere; }
#kontakt-counter { font-variant-numeric: tabular-nums; }
#kontakt-submit:disabled { cursor: wait; opacity: 0.65; }
@media (min-width: 640px) {
  .contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-wide { grid-column: 1 / -1; }
  .hardware-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .service-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
  .provider-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .info-main .btn { width: 100%; white-space: normal; }
}


.rechtstext-wrap { max-width: 860px; }
.rechtstext-hinweis { margin: 0 0 var(--space-6); }
.rechtstext { display: none; overflow-wrap: anywhere; }
html[lang="en"] .rechtstext[lang="en"],
html[lang="de"] .rechtstext[lang="de"],
html[lang="ka"] .rechtstext[lang="ka"],
html[lang="ru"] .rechtstext[lang="ru"] { display: block; }
html[lang="de"]:not(:has(.rechtstext[lang="de"])) .rechtstext[lang="en"],
html[lang="ka"]:not(:has(.rechtstext[lang="ka"])) .rechtstext[lang="en"],
html[lang="ru"]:not(:has(.rechtstext[lang="ru"])) .rechtstext[lang="en"] { display: block; }
.rechtstext h1 { margin: 0 0 var(--space-4); }
.rechtstext h2 { margin: var(--space-8) 0 var(--space-3); font-size: 1.25rem; line-height: 1.3; scroll-margin-top: 90px; }
.rechtstext p, .rechtstext li { line-height: 1.65; }
.rechtstext p { margin: 0 0 var(--space-3); }
.rechtstext ul { margin: 0 0 var(--space-3); padding-inline-start: 1.25rem; }
.rechtstext blockquote { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--border); background: var(--surface); }
.rechtstext blockquote p { margin: 0; }
.rechtstext-tabelle { overflow-x: auto; margin: 0 0 var(--space-4); }
.rechtstext table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
.rechtstext th, .rechtstext td { border: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: start; vertical-align: top; }
.rechtstext th { background: var(--surface); }
.legal-docs-list { margin: 0 0 var(--space-6); padding-inline-start: 1.25rem; }