/* ============================================================================
   1ki-theme — zentrales Design-System für alle 1.ki-Webauftritte
   ----------------------------------------------------------------------------
   Single Source of Truth. Quelle: Staging/_ui/theme/1ki-theme.css
   Brandquelle: 00 Kontext/Skills/03 Geschaeftswissen/Branding.md
   Governance:  08 Bereiche/Website & Webspace/UI-Module_Standard.md

   Apps binden diese Datei ein und kopieren sie NICHT in eigenen Code.
   App-eigene Regeln kommen in eine zweite Datei, die nach dem Theme lädt.
   Wer hier etwas ändert, rollt es in derselben Session auf alle nutzenden
   Apps aus (Nutzungs-Register im UI-Module-Standard).

   Ausrollmechanik ab Version 1.1 (2026-08-05, Christian-Auftrag): _ui/ wird
   zusätzlich unveraendert auf die eigene Subdomain ui.1.ki gespiegelt. Jede
   App unter web.1.ki bindet ab dann https://ui.1.ki/theme/1ki-theme.css statt
   einer lokalen Kopie ein (CSP je App um genau diese eine Origin erweitert).
   Eine Aenderung an dieser Datei wirkt dadurch ohne weiteren Kopier-Schritt
   auf jeder einbindenden Seite. Siehe UI-Module_Standard.md Abschnitt 2a.

   Version: 1.1 (2026-08-05)
   ========================================================================= */

/* ---------------------------------------------------------------------------
   0 Schrift: Montserrat, selbst gehostet
   Kein Google-Fonts-Aufruf. Die Schrift kommt vom eigenen Server, damit beim
   Seitenaufruf keine IP-Adresse an einen Dritten geht. Genau das sagt auch
   Abschnitt 10 der Datenschutzerklärung zu.
   Ablageort ab Version 1.1: _ui/fonts/ (vorher je App unter <app>/assets/fonts/,
   jetzt Teil derselben zentralen Auslieferung wie das Theme selbst).
   Fehlt eine Gewichtsdatei, fällt der Browser auf das nächstliegende
   vorhandene Gewicht zurück. Die Seite bleibt lesbar, sie wirkt nur flacher.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   1 Tokens
   Jede Farbe, jeder Abstand und jede Schriftgröße kommt aus diesem Block.
   In App-Code stehen keine rohen Hex-Werte mehr.
   ------------------------------------------------------------------------ */
:root {
  /* Markenfarben nach Branding.md */
  --sky: #44A8DE;            /* Primärfarbe */
  --pulse: #FF00D4;          /* Energie-Akzent */
  --circuit: #55FF00;        /* Digital-Akzent */
  --flash: #FFF700;          /* Aufmerksamkeit */
  --wave: #47A9A6;           /* Sekundär */
  --sage: #5BB18D;           /* Sekundär, Positives */
  --cosmos: #211757;         /* Gradient-Anker */
  --voltage: #2E09EE;        /* starker Akzent */
  --midnight: #001023;       /* Dark-Mode-Hintergrund */
  --ink: #000000;
  --paper: #FFFFFF;
  --anthracite: #545454;
  --stone: #737373;
  --mist: #A6A6A6;

  /* Abgeleitete Flächen auf dunklem Grund */
  --surface-0: #001023;                       /* Seitenhintergrund */
  --surface-1: #02182c;                       /* Kopf- und Fußleiste */
  --surface-2: #0a1c31;                       /* Menüs, Popover */
  --glass: rgba(255, 255, 255, 0.045);        /* Inhaltspanel über dem Emblem */
  --glass-strong: rgba(2, 18, 38, 0.82);      /* Panel für lange Lesetexte */
  --line: rgba(255, 255, 255, 0.12);          /* Trennlinien, Rahmen */
  --line-strong: #1d3350;

  /* Textfarben */
  --text: #DCE8F2;                            /* Fließtext auf dunkel */
  --text-strong: #F2F8FC;                     /* Überschriften */
  --text-muted: #93A9BC;                      /* Meta, Captions */
  --text-on-light: #16202b;                   /* Fließtext auf hell */

  /* Statusfarben */
  --danger: #FF8A8A;
  --success: #8CE6A8;
  --warning: #FFC96B;

  /* Typografie */
  /* Montserrat zuerst, danach Arial Narrow als vom Styleguide gesetzte erste
     Alternative, danach geometrische Grotesken mit ähnlicher Anmutung, die auf
     macOS, iOS, Windows und Android ohnehin vorliegen.
     Verbindlich nach 09 Ressourcen/Assets/Brand Styleguide.md, Abschnitt Typografie. */
  --font-sans: "Montserrat", "Arial Narrow", "Avenir Next", Avenir, "Century Gothic",
               "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fs-xs: 12.5px;
  --fs-sm: 14.5px;
  --fs-base: 17px;
  --fs-lg: 19px;
  --fs-h3: clamp(17px, 2.2vw, 20px);
  --fs-h2: clamp(20px, 3vw, 25px);
  --fs-h1: clamp(28px, 5vw, 40px);
  --lh-tight: 1.22;
  --lh-base: 1.65;

  /* Raster */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --measure: 780px;                           /* Lesebreite Fließtext */
  --measure-wide: 1120px;                     /* Lesebreite Listen, Tabellen */
  --pad-page: clamp(16px, 5vw, 40px);
  --pad-stage: clamp(16px, 4vw, 48px);        /* Bühnen-Innenabstand wie web.1.ki */

  /* Form */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);

  /* Verläufe
     cta ist eine Ergänzung zu den beiden in Branding.md dokumentierten
     Verläufen, abgeleitet aus dem HubSpot-Theme Brightlane (Christian-Input
     2026-08-04). Solange Branding.md sie nicht führt, gilt sie als Vorschlag. */
  /* Zwei Verläufe mit unterschiedlicher Aufgabe.
     cta trägt Text und ist deshalb abgedunkelt: Weiß erreicht auf allen drei
     Stützstellen mindestens 6,2:1. Die hellen Markenwerte Sky und Pulse
     schaffen mit Weiß nur 2,7:1 und 3,4:1 und fallen damit unter die
     Lesbarkeitsschwelle, sie bleiben deshalb dem dekorativen Verlauf
     vorbehalten, auf dem kein Text liegt. */
  --gradient-cta: linear-gradient(90deg, #176693 0%, var(--voltage) 48%, #A30086 100%);
  --gradient-accent: linear-gradient(90deg, var(--sky) 0%, var(--pulse) 100%);
  --gradient-cosmos: linear-gradient(135deg, var(--cosmos), var(--pulse));
  --gradient-circuit: linear-gradient(135deg, var(--circuit), var(--anthracite));

  /* Bewegung */
  --t-fast: 0.16s;
  --t-med: 0.2s;
  --t-base: 0.24s;

  /* Hintergrundbild mit Embossed-Logo.
     Jede App überschreibt nur diese eine Variable mit ihrem Pfad. */
  --theme-bg: none;

  /* Das feine Linienraster liegt seit 2026-08-10 in CSS statt im Bild.

     Grund (Christian-Befund, iPad): das Raster war in bg.jpg eingebacken, und
     `background-size: cover` zieht ein 2560×1440-Bild auf einem iPad im
     Hochformat auf 4198 Gerätepixel Breite — 1,64-fach hochskaliert. Aus 19 px
     Linienabstand wurden gut 32, die Linien wirkten dick und weit auseinander.
     Am Schreibtisch fiel das nie auf, auf dem Tablet sofort.

     Als CSS-Verlauf ist das Raster auflösungsunabhängig: 1 px Linie alle 4 px,
     auf jedem Gerät gleich fein, egal wie groß das Fenster ist. Das
     HintergrundBILD trägt ab jetzt nur noch Verlauf und Emblem
     (assets/bg-emblem.jpg), das Raster ist herausgerechnet.

     Multiplikativ gedacht, nicht additiv: eine sehr schwache helle Linie auf
     dunklem Grund, kein Grauschleier über der Fläche. */
  --theme-raster: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.030) 0 1px,
    rgb(255 255 255 / 0) 1px 4px);

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background-color: var(--surface-0);
  /* Zwei Ebenen: das Raster liegt ÜBER dem Bild und skaliert nie mit. */
  background-image: var(--theme-raster), var(--theme-bg);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: repeat, no-repeat;
  /* fixed statt scroll: sonst skaliert cover auf die volle Dokumenthöhe und
     das Emblem wirkt auf langen Seiten hineingezoomt (Befund 2026-07-25). */
  background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom);
}

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

h1, h2, h3, h4 {
  color: var(--text-strong);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
strong, b { font-weight: var(--fw-semibold); }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-top: var(--space-7); scroll-margin-top: var(--space-5); }
h3 { font-size: var(--fs-h3); margin-top: var(--space-5); }

p, li { margin: 0 0 var(--space-4); }
ol { padding-left: 22px; margin: 0 0 var(--space-5); }
li { margin-bottom: var(--space-2); }

/* Aufzählungen tragen die Infinity Cloud von 1mpact als Markierung, dieselbe
   Form wie im Favicon der Seiten. Umgesetzt als Maske, damit die Marke die
   gewünschte Farbe annimmt und in jeder Größe scharf bleibt.
   Seitenverhältnis der Marke ist 1361:1052, daraus die Kastenmaße. */
ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-5);
}
ul > li {
  position: relative;
  padding-left: 30px;
}
ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 17px;
  height: 13px;
  background: var(--sky);
  -webkit-mask: url("mark-1mpact.svg") center / contain no-repeat;
  mask: url("mark-1mpact.svg") center / contain no-repeat;
}
/* Verschachtelte Ebenen treten zurück */
ul ul > li::before { background: var(--text-muted); width: 14px; height: 11px; top: 0.5em; }
ul ul { margin-top: var(--space-2); }

/* Listen, die ihre Markierung selbst setzen, bleiben unberührt */
.toc ul > li::before, .anchor-links > li::before,
.site-nav ul > li::before, .list-plain > li::before { content: none; }
.toc ul > li, .anchor-links > li, .site-nav ul > li, .list-plain > li { padding-left: 0; }

a {
  color: var(--sky);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--paper); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 3px;
}

address { font-style: normal; }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }

::selection { background: var(--sky); color: var(--midnight); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sky); color: var(--midnight);
  padding: var(--space-2) var(--space-4); font-weight: bold;
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* ---------------------------------------------------------------------------
   3 Seitengerüst
   ------------------------------------------------------------------------ */
/* Gerüst identisch zu web.1.ki und Portal: Kopf- und Fußzeile tragen keine
   eigene Fläche, sie sitzen in der Bühnen-Innenabstand über dem Emblem. */
.stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--pad-stage);
  padding-top: max(var(--pad-stage), env(safe-area-inset-top));
  padding-bottom: max(var(--pad-stage), env(safe-area-inset-bottom));
  gap: clamp(24px, 5vh, 48px);
}

.page {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
}

.page-wide { max-width: var(--measure-wide); }

/* Lesepanel und Karte übernehmen die Glas-Optik der Portal-Box
   (rgba-Weiß auf dem Emblem, 1px helle Kante, 16px Radius).
   Das Panel liegt bewusst eine Spur dichter als die Karte, weil darunter
   mehrere Bildschirmseiten Fließtext stehen und das Emblem sonst durch den
   Text hindurchschlägt. Kurze Inhalte nutzen die leichtere Karte. */
.panel {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 44px);
  backdrop-filter: blur(7px);
}

.card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 40px);
}

/* ---------------------------------------------------------------------------
   4 Kopfleiste mit Burger-Menü
   Muster identisch zu portal_header.php, admin_layout.php und me.1.ki:
   Hover klappt auf, Klick bleibt für Touch und Tastatur aktiv,
   :focus-within hält es für Tastaturnutzer offen.
   ------------------------------------------------------------------------ */
/* Bleibt beim Scrollen oben stehen, wie im Portal-Header. Damit der Inhalt
   nicht sichtbar darunter durchläuft, bekommt die Leiste eine leicht
   abgedunkelte, weichgezeichnete Fläche, die den Embossed-Hintergrund
   durchscheinen lässt. Der negative Rand hebt den Bühnen-Innenabstand auf,
   damit die Fläche über die volle Breite trägt. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: calc(-1 * var(--pad-stage));
  margin-bottom: 0;
  padding: 12px var(--pad-stage);
  padding-top: max(12px, env(safe-area-inset-top));
  background: linear-gradient(180deg,
    rgba(0, 12, 26, 0.9) 0%,
    rgba(0, 12, 26, 0.78) 70%,
    rgba(0, 12, 26, 0.6) 100%);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
@media print { .topbar { position: static; } }

.topbar .brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.topbar .brand img {
  display: block;
  height: clamp(28px, 4vw, 40px);
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
/* Zwei Markenfassungen, hell für dunklen Grund, dunkel für hellen.
   Umgeschaltet wird in a11y.css, damit hier keine Stufenlogik steht.
   Die Auswahl braucht dieselbe Spezifität wie die Regel darüber, sonst
   gewinnt deren display:block und beide Fassungen stehen nebeneinander. */
.topbar .brand .brand-dunkel { display: none; }

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.topbar .app-name {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding-left: var(--space-3);
  border-left: 1px solid var(--line);
}

/* Icon-Schaltfläche, gleiche Optik wie Zahnrad und Personen-Icon im Portal */
.icon-btn, .nav-toggle {
  position: relative;
  z-index: 30;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover, .icon-btn:focus-visible,
.nav-toggle:hover, .nav-toggle:focus-visible {
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.5);
}

.nav-toggle { flex-direction: column; gap: 5px; }
.nav-toggle span {
  display: block; width: 20px; height: 2px;
  background: var(--paper);
  transition: transform var(--t-base), opacity var(--t-base);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Der Menüpanel selbst ist ein eigenes Modul, weil er mehrere Ebenen,
   Klappverhalten und eine Sichtbarkeitssteuerung nach Nutzerrolle mitbringt.
   Siehe _ui/nav/nav.css und _ui/nav/nav.js. Der Theme liefert nur den
   Auslöser (Burger) und den Positionierungsrahmen. */
.nav-wrap { position: relative; flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   5 Schaltflächen
   ------------------------------------------------------------------------ */
/* Vier Stufen, klare Rangfolge. Primär ist der Verlauf, alles andere ordnet
   sich unter. Anmutung übernommen aus dem HubSpot-Theme Brightlane, damit
   Landingpages und eigene Seiten dieselbe Sprache sprechen. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 0.78em 1.7em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--gradient-cta);
  background-size: 200% 100%;
  background-position: 0% 0%;
  color: var(--paper);
  font: inherit;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-position var(--t-base), transform var(--t-fast),
              border-color var(--t-fast), color var(--t-fast);
}
.btn:hover, .btn:focus-visible { background-position: 100% 0%; color: var(--paper); }
.btn:active { transform: translateY(1px); }

/* Sekundär: heller Umriss, keine Fläche */
.btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--paper);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: transparent;
  border-color: var(--sky);
  color: var(--sky);
}

/* Tertiär: volle Fläche in Ink, für helle oder farbige Bänder */
.btn-tertiary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.btn-tertiary:hover, .btn-tertiary:focus-visible {
  background: var(--midnight);
  border-color: var(--midnight);
  color: var(--sky);
}

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); color: var(--paper); }

.btn-sm { padding: 0.6em 1.3em; font-size: var(--fs-xs); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Text-CTA: die vierte Stufe. Unterstrichen und in Versalien, damit sie ohne
   Fläche als Handlungsaufforderung lesbar bleibt und sich klar von einem
   gewöhnlichen Link im Fließtext unterscheidet. */
.link-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--sky);
}
.link-cta::after {
  content: "→";
  transition: transform var(--t-fast);
}
.link-cta:hover { color: var(--sky); }
.link-cta:hover::after { transform: translateX(4px); }

.link-cta-light { color: var(--ink); text-decoration-color: var(--ink); }
.link-cta-light:hover { color: var(--ink); text-decoration-color: var(--pulse); }

/* Ankerleiste: mehrere gleichrangige Sprungziele nebeneinander */
.anchor-links {
  display: flex; flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-6);
  padding: 0; list-style: none;
}
.anchor-links li { margin: 0; }
.anchor-links a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--line);
}
.anchor-links a:hover { color: var(--paper); text-decoration-color: var(--sky); }

/* ---------------------------------------------------------------------------
   6 Formulare
   ------------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field > span { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.85); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="date"],
select, textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  color: var(--paper);
  padding: 0.7em 0.9em;
  font: inherit;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }

.form-error { color: var(--danger); font-size: var(--fs-sm); }
.form-success { color: var(--success); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------------
   7 Hinweisboxen
   ------------------------------------------------------------------------ */
/* Fünf Typen, jeder mit eigenem Zeichen und eigener Signalfarbe.
   Glasoptik statt Pastellfläche: dunkler Grund, farbiger Lichtschein von
   oben links, feine helle Oberkante. Das trägt auf dem Embossed-Hintergrund
   und bleibt lesbar, während eine helle Pastellfläche dort ausbleicht. */
.note {
  --note-color: var(--sky);
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--space-4);
  align-items: start;
  border: 1px solid var(--line);
  border-left: 3px solid var(--note-color);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(120% 140% at 0% 0%,
      color-mix(in srgb, var(--note-color) 26%, transparent) 0%,
      color-mix(in srgb, var(--note-color) 7%, transparent) 42%,
      transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(2, 18, 38, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
  font-size: var(--fs-sm);
  overflow: hidden;
}
.note > :last-child { margin-bottom: 0; }

/* Zeichen als Maske, damit es die Signalfarbe des jeweiligen Typs annimmt */
.note::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--note-color);
  box-shadow: 0 0 18px color-mix(in srgb, var(--note-color) 45%, transparent);
  -webkit-mask: var(--note-icon) center / 30px 30px no-repeat;
  mask: var(--note-icon) center / 30px 30px no-repeat;
}

/* Information */
.note {
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 11v5.4'/%3E%3Cpath d='M12 7.6v.05'/%3E%3C/svg%3E");
}
/* Achtung */
.note-warn {
  --note-color: var(--warning);
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 21.4 20H2.6z'/%3E%3Cpath d='M12 9.6v4.8'/%3E%3Cpath d='M12 17.3v.05'/%3E%3C/svg%3E");
}
/* Frage */
.note-ask {
  --note-color: var(--wave);
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M9.4 9.3a2.7 2.7 0 1 1 3.5 2.6c-.6.2-.9.7-.9 1.3v.7'/%3E%3Cpath d='M12 16.6v.05'/%3E%3C/svg%3E");
}
/* Kritisch: Achteck, das Stoppzeichen, deutlich abgesetzt vom Dreieck */
.note-danger {
  --note-color: var(--danger);
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 2.9h7.6l5.3 5.3v7.6l-5.3 5.3H8.2L2.9 15.8V8.2z'/%3E%3Cpath d='M15 9 9 15'/%3E%3Cpath d='M9 9l6 6'/%3E%3C/svg%3E");
}
/* Erledigt */
.note-ok {
  --note-color: var(--success);
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='m8 12.3 2.8 2.8L16.3 9.6'/%3E%3C/svg%3E");
}

/* Ohne Zeichen, wenn eine Box rein textlich bleiben soll */
.note-plain { grid-template-columns: 1fr; }
.note-plain::before { content: none; }

/* Offener Platzhalter, der vor dem Deployment ersetzt werden muss */
.todo {
  background: var(--flash);
  color: var(--ink);
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px dashed #b3ad00;
}

/* ---------------------------------------------------------------------------
   8 Tabellen
   Header-Zeile in Markenblau, Vorgabe aus Schreibstil.md für Dokumente.
   ------------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; margin: 0 0 var(--space-5); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
th, td {
  text-align: left; vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
thead th { background: var(--sky); color: var(--midnight); font-weight: bold; }
tbody tr:hover { background: rgba(255, 255, 255, 0.035); }

/* ---------------------------------------------------------------------------
   9 Inhaltsverzeichnis
   ------------------------------------------------------------------------ */
.toc {
  background: rgba(255, 255, 255, 0.04);
  border-left: 4px solid var(--sky);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5) var(--space-2);
  margin: 0 0 var(--space-6);
  font-size: var(--fs-sm);
}
.toc > p { font-weight: bold; color: var(--text-strong); margin-bottom: var(--space-3); }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 6px; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--sky); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   10 Fußleiste
   ------------------------------------------------------------------------ */
/* Wie web.1.ki: keine eigene Fläche, nur gedämpfter Text unter dem Inhalt. */
/* Fußtext in --text-muted statt --stone: Stone erreicht auf dem dunklen
   Grund nur 4,0:1 und verfehlt die Lesbarkeitsschwelle knapp. */
/* Fußleiste, Neufassung 2026-08-06 (Christian-Vorgabe): "sehr schmal,
   weniger als der Header, alles in einer Zeile" -- Copyright mittig, Links
   rechtsbündig, im Stil der 1mpact.ai-Landingpage (per echtem Chrome-Tab dort
   nachgemessen: weiße Schrift, Hover per CSS-Variable, kein Underline im
   Ruhezustand). Bei uns Hover in --sky statt dem dortigen Gelb (#fff700).
   Der Darstellungsstufen-Umschalter zieht mit dieser Fassung aus dem Footer
   in den Header um (Christian-Go 2026-08-06) -- .a11y-switch ist deshalb
   hier kein Thema mehr, siehe Abschnitt "9b Kopfleiste, Darstellungsstufen".

   Layout: dreispaltiges Grid (1fr/auto/1fr). Copyright sitzt in der
   mittleren, inhaltsbreiten Spalte und ist dadurch UNABHÄNGIG von der
   Breite der Linkliste wirklich mittig -- die klassische Lösung für
   "Mitte" neben einem rechtsbündigen Block unterschiedlicher Länge. */
/* Nachfassung 2026-08-06 (Christian: "warum hast Du es nicht wie von mir
   gefordert auch mit einem Gleichen Balken wie beim Header? das soll genau
   so aussehen und die Seite optisch Schliessen, der Header soll sie
   beginnen"). Die Leiste trägt jetzt dieselbe Fläche wie .topbar, nur am
   unteren Rand gespiegelt: derselbe Verlauf in die Gegenrichtung, dieselbe
   Weichzeichnung, dieselbe Randstärke. Kopf und Fuß klammern die Seite
   dadurch sichtbar ein.
   Zusätzlich weiter kondensiert (Christian: "immer noch zu hoch und die
   Inhalte zu weit oben"): Innenabstand von 8px auf 5px, Zeilenhöhe von 1.4
   auf 1.25, Schrift eine Spur kleiner. align-items:center zentriert die
   Zeile in der verbleibenden Höhe. */
/* Der Fußbalken klebt am unteren Rand, so wie .topbar am oberen klebt.
   ----------------------------------------------------------------------------
   Christian-Vorgabe 2026-08-18, wörtlich: "orientiere Dich doch bitte am Design
   der Seite mit dem Leitfaden, da ist der Balken unten im Footer doch ganz
   anders. das muss auch in das Frame eingebaut werden, damit es nicht jedesmal
   gefordert werden muss."

   Was gemessen wurde, bevor hier etwas geändert wurde: Markup und Gestaltung des
   Balkens waren auf Leitfaden, AGB und Paketseite bereits identisch -- gleiche
   Fläche, gleiche Oberkante, gleiche Schrift. Anders war allein die POSITION.
   Der Leitfaden trägt am body die Klasse .frame-feste-buehne, seine .stage ist
   auf Viewporthöhe festgenagelt, der Balken steht deshalb immer am unteren
   Bildrand. Auf jeder normal scrollenden Seite wuchs die .stage dagegen mit dem
   Dokument, und der Balken lag am Dokumentende: auf der AGB-Seite 7547 px
   Scrollweg entfernt, auf der Paketseite 2874 px. Derselbe Balken, nur nie zu
   sehen.

   Bisher war das Gerüst also unsymmetrisch: oben sticky (.topbar, z-index 50),
   unten nicht. Genau diese Asymmetrie hat dazu geführt, dass der Fußbalken bei
   jeder neuen Seite einzeln nachgefordert werden musste. Er wird deshalb hier
   sticky, an EINER Stelle, für jede Seite, die das Theme lädt.

   Warum sticky und nicht fixed: sticky klebt nur, solange darunter noch Inhalt
   kommt, und reiht sich am Dokumentende ganz normal in den Fluss ein. Fixed
   würde die letzten Zeilen jeder Seite dauerhaft verdecken.

   z-index 40 liegt unter .topbar (50) und unter den Klappmenüs für Teilen und
   Kontakt (65, frame.css) -- ein aufgeklapptes Menü darf nie hinter dem Balken
   verschwinden. Auf .frame-feste-buehne-Seiten ändert sich nichts: dort steht
   der Balken ohnehin schon unten. */
.foot {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--space-4);
  padding: 5px var(--pad-stage);
  padding-bottom: max(5px, env(safe-area-inset-bottom));
  margin: 0 calc(-1 * var(--pad-stage));
  margin-top: auto;
  background: linear-gradient(0deg,
    rgba(0, 12, 26, 0.9) 0%,
    rgba(0, 12, 26, 0.78) 70%,
    rgba(0, 12, 26, 0.6) 100%);
  backdrop-filter: blur(9px);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 0.74rem;
  line-height: 1.25;
}
.foot p { margin: 0; white-space: nowrap; }
.foot .copy { grid-column: 2; justify-self: center; }
.foot .foot-links { grid-column: 3; justify-self: end; }
/* Rückfallregel: Seiten ohne .copy/.foot-links (aktuell nur der interne
   Styleguide, der eigenen Versions-/Quellentext statt Rechtslinks zeigt)
   sollen trotzdem sauber mittig bleiben statt unstyled in Spalte 1 zu
   landen. */
.foot > p:not(.copy):not(.foot-links) { grid-column: 1 / -1; justify-self: center; white-space: normal; }
.foot a { color: #fff; text-decoration: none; transition: color 0.2s ease-in-out; }
.foot a:hover, .foot a:focus-visible { color: var(--sky); text-decoration: underline; }
.foot .meta { opacity: 0.8; font-size: 0.72rem; }

/* Herz in Magenta wie auf der 1mpact.ai-Landingpage (Christian-Vorgabe
   2026-08-06: "Das Herz habe ich auf der LP in unserem magenta"). */
.foot .heart { color: var(--pulse); }

/* Im Druck nicht kleben, sonst steht der Balken auf jeder Seite mitten im
   Text. Gleiche Regel wie für .topbar (Zeile weiter oben). */
@media print { .foot { position: static; } }

/* Schmale Geräte: die drei Spalten passen nicht mehr nebeneinander.
   Rechtslinks zuerst (sie sind der Pflichtteil), Copyright darunter --
   und beide dürfen jetzt umbrechen, sonst schiebt die lange Linkzeile
   den Balken waagerecht auf. Vorher stand hier white-space:nowrap auch
   im schmalen Fall, das war die Ursache des Überstands. */
@media (max-width: 720px) {
  .foot {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 2px;
    text-align: center;
    padding: 6px var(--pad-stage);
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .foot .copy, .foot .foot-links {
    grid-column: 1;
    justify-self: center;
    white-space: normal;
  }
  .foot .foot-links { order: 1; }
  .foot .copy { order: 2; }
}

/* Sehr schmal: die Linkzeile bekommt etwas mehr Luft zwischen den
   Trennpunkten, damit die Tippziele nicht aneinanderkleben. */
@media (max-width: 420px) {
  .foot { font-size: 0.7rem; }
  .foot .foot-links a { display: inline-block; padding: 2px 0; }
}

/* ---------------------------------------------------------------------------
   hidden schlägt jede Komponenten-Regel
   ----------------------------------------------------------------------------
   Das hidden-Attribut wird vom Browser nur über eine Standardregel mit sehr
   geringer Spezifität umgesetzt (`[hidden] { display: none }`). JEDE eigene
   display-Angabe an derselben Klasse gewinnt dagegen -- und dann steht ein
   Element sichtbar da, obwohl im Markup `hidden` steht und im JavaScript
   `el.hidden = true` ausgeführt wurde.

   Genau das ist am 2026-08-06 passiert (Christian-Screenshot): auf der
   Kontaktseite blieb der Ersatzblock "Das Nachrichtenformular wird gerade
   eingerichtet" sichtbar, obwohl das Formular längst geladen war und
   `ersatz.hidden = true` lief. Ursache war `.note { display: grid }` --
   dieselbe Falle wie bei der Fußzeilen-Einrückung, nur diesmal gegen eine
   Browser-Standardregel statt gegen eine eigene.

   Deshalb hier einmal zentral und mit !important. Das ist einer der wenigen
   Fälle, in denen !important richtig ist: `hidden` ist eine Zusage des
   Markups, keine Gestaltungsfrage, und darf von keiner Komponente überstimmt
   werden. Dieselbe Regel steht aus demselben Grund in normalize.css und in
   den meisten Design-Systemen.
   ------------------------------------------------------------------------ */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   11 Hilfsklassen
   ------------------------------------------------------------------------ */
/* Eyebrow: kleine Versalzeile über einer Überschrift, ordnet sie ein */
.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-2);
}

/* Hakenliste statt Aufzählungspunkten, wenn es um Nutzen geht */
.list-check { list-style: none; padding: 0; }
.list-check li {
  position: relative;
  padding-left: 30px;
  margin-bottom: var(--space-3);
}
.list-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.34em;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--pulse);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
           linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
        linear-gradient(#000, #000);
  mask-composite: exclude;
}

/* Zitat mit gesetztem Anführungszeichen in Flash */
.quote { text-align: center; margin: var(--space-7) 0; }
.quote::before {
  content: "\201C";
  display: block;
  font-size: 76px;
  line-height: 0.7;
  color: var(--flash);
  margin-bottom: var(--space-3);
}
.quote p { font-size: var(--fs-lg); }
.quote cite { display: block; font-style: normal; font-size: var(--fs-sm); color: var(--text-muted); }

/* Herausgehobene Karte. Bewusst zurückhaltend: dichtere Fläche für Kontrast,
   der Verlauf nur als schmale Kante links und als angedeuteter Schattenwurf
   nach unten rechts. Eine vollflächig hinterlegte Verlaufsplatte war zu laut
   und nahm dem Inhalt die Lesbarkeit (Christian-Befund 2026-08-04). */
.card-offset {
  position: relative;
  background: rgba(2, 18, 38, 0.78);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.card-offset::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gradient-accent);
}
.card-offset::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 100% 100%,
    color-mix(in srgb, var(--pulse) 16%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.card-offset > * { position: relative; z-index: 1; }

.lede { font-size: var(--fs-lg); color: var(--text); }
.meta { font-size: var(--fs-xs); color: var(--text-muted); }
.accent { color: var(--sky); }
.rule-top { border-top: 3px solid var(--sky); padding-top: var(--space-5); }
.rule-bottom { border-bottom: 3px solid var(--sky); padding-bottom: var(--space-5); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack > * + * { margin-top: var(--space-5); }

/* ---------------------------------------------------------------------------
   12 Druck
   Rechtstexte und Angebote werden ausgedruckt und abgelegt. Auf Papier gilt
   Hell auf Dunkel nicht, deshalb wird hier vollständig invertiert.
   ------------------------------------------------------------------------ */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  .topbar, .toc, .nav-wrap, .skip-link, .foot { display: none !important; }
  .page { max-width: none; padding: 0; }
  .panel, .card, .note {
    background: none !important;
    border: 0;
    box-shadow: none;
    padding: 0;
    backdrop-filter: none;
  }
  h1, h2, h3 { color: #000 !important; }
  a { color: #000 !important; text-decoration: none; }
  thead th { background: none !important; color: #000 !important; border-bottom: 2px solid #000; }
  .todo { background: none; border: 1px solid #000; }
}