/* ==========================================================================
   AI Digital Consulting – Bremen
   Einziges Stylesheet der Website.

   Gestaltungsidee "Werkblatt"
   ---------------------------
   Die Seite tritt auf wie ein technisches Dossier: warmer Papierton statt
   Weiss, harte Kanten statt Rundungen, Haarlinien statt Schatten. Die Ordnung
   kommt aus Linien und einer Monospace-Beschriftung, nicht aus Kästen. Farbe
   wird sparsam eingesetzt – tiefes Petrolgrün für Struktur und Verweise,
   Terrakotta als einziges Signal, Tinte für Handlungsknöpfe.

   Aufbau
   00  Tokens
   00b Abgleich mit assets/theme.css
   01  Reset & Grundtypografie
   02  Fokus, Skip-Link, Screenreader
   03  Layout (wrap, section)
   04  Typografische Bausteine
   05  Buttons
   06  Karten
   07  Listen, Schritte, Kennzahlen
   08  Header & Navigation
   09  Trustbar
   10  Formulare
   11  FAQ
   12  Tabellen & Prosa
   13  Footer
   14  Kleinteile (Badge, Figur, Pfeil-Link)
   15  Schwebende Bedienelemente (Mobil-CTA, Nach-oben)
   16  Bewegung / Scroll-Reveal
   17  Utility-Ebene  << Layoutklassen des Markups. Es ist KEIN Tailwind
                         eingebunden – diese Ebene ist die Umsetzung.
   18  Druck

   Hinweis: Das Markup nutzt Tailwind-ähnliche Klassennamen. Ohne Abschnitt 17
   kollabiert jedes Grid. Beim Ergänzen neuer Klassen im HTML hier nachziehen.
   ========================================================================== */

/* == 00  Tokens =========================================================== */
:root {
  /* Schrift auf Papier */
  --ink: #12191a;
  --text-secondary: #4d5c5e;
  --text-tertiary: #76837f;

  /* Petrolgrün – Struktur, Verweise, Rubriken */
  --primary: #0e5450;
  --primary-hover: #0a3e3b;
  --primary-light: #e6ece8;
  --primary-border: #c3d3ce;

  /* Tinte – Handlungsknöpfe und dunkle Bänder */
  --cta: #172221;
  --cta-hover: #0e5450;
  --dark-surface: #101a1b;
  --dark-surface-2: #1a2827;

  /* Terrakotta – einziges Signal: Marken, Kennzahlen, Fokus */
  --accent: #bd3f1d;
  --accent-hover: #9c3116;
  --accent-light: #f7ece7;

  --success: #2a6b4f;
  --danger: #a02a1c;

  /* Papier */
  --bg: #f6f4ef;
  --bg-alt: #ecebe3;
  --surface: #fffefb;
  --border: #dcd8ce;
  --border-strong: #bfb9ab;

  /* Auf Dunkelflächen */
  --on-dark: #e7ebe8;
  --on-dark-muted: #9fb0ad;
  --on-dark-accent: #8fc4bb;
  --on-dark-line: rgba(255, 255, 255, 0.15);

  --font-heading: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Harte Kanten. Der Radius ist da, um nicht zu schneiden – nicht als Form. */
  --radius: 2px;
  --radius-sm: 2px;
  --radius-lg: 2px;

  /* Keine weichen Wolken: Tiefe entsteht durch versetzte Kanten. */
  --shadow-sm: none;
  --shadow-md: 6px 6px 0 -1px rgba(18, 25, 26, 0.08);
  --shadow-lg: 12px 12px 0 -1px rgba(18, 25, 26, 0.1);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-height: 76px;
}

/* == 00b  Abgleich mit assets/theme.css =================================== */
/* Der Hausstil (assets/theme.css) wird vor dieser Datei geladen und ist die
   Basisebene. Er belegt einige Klassennamen, die hier anders aufgebaut sind.
   Dieser Block stellt genau die Eigenschaften zurück, die der Hausstil setzt,
   dieses Stylesheet aber nicht selbst überschreibt. Er steht bewusst vor allen
   weiteren Abschnitten, damit Bausteine und Utility-Ebene wie gewohnt greifen. */

/* Absätze erben die Textfarbe – sonst stünde dunkler Fliesstext auf den
   dunklen Abschnitten. */
p {
  color: inherit;
}

/* Deutsche Komposita sind länger als eine schmale Spalte. Ohne Trennung bricht
   der Browser mitten im Wort ("Digitalisierungsst|rategie"); mit Trennung fällt
   der Umbruch auf eine Silbenfuge. Der harte Bruch bleibt als letzte Reserve. */
h1,
h2,
h3,
h4 {
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Erst ab 14 Zeichen trennen: "Digitalisierungsstrategie" ja, "Fragen" nein.
     Ohne diese Schwelle trennt der Browser auch dort, wo ein sauberer
     Wortumbruch möglich wäre. */
  hyphenate-limit-chars: 14 6 5;
  overflow-wrap: break-word;
}

/* .grid ist hier eine reine Anzeigeklasse; die Abstände kommen aus .gap-*. */
.grid {
  gap: 0;
}

/* Der Schritt ist ein Block mit Trennlinie, kein Flex-Container – sonst
   schrumpft das innere Raster auf Inhaltsbreite. */
.step {
  display: block;
  gap: normal;
  align-items: normal;
}

/* Karten tragen keinen Schatten aus dem Hausstil; die Zeichnung entsteht in
   Abschnitt 06 über Linien. */
.card {
  box-shadow: none;
}

.card:hover {
  box-shadow: none;
  border-color: var(--border);
}

.card--tint:hover {
  border-color: var(--primary-border);
}

.card--dark:hover {
  border-color: var(--on-dark-line);
}

.card__icon {
  margin-bottom: 0;
}

/* Die Kopfzeile zeigt ihren Handlungsknopf selbst an bzw. blendet ihn über die
   Utility-Klassen der Leiste aus. */
.site-header .btn {
  display: inline-flex;
}

/* Der Menüknopf trägt hier eine Beschriftung und darf nicht auf 44px fixiert
   werden. */
.nav-toggle {
  width: auto;
  height: auto;
}

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

.site-footer {
  margin-top: 0;
}

.site-footer p,
.site-footer li {
  color: inherit;
}

.prose li {
  margin-bottom: 0;
}

/* == 01  Reset & Grundtypografie ========================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* Display-Grade: gross, eng, tief gesetzt. Das trägt die Seite. */
h1 {
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(1.875rem, 1.3rem + 2vw, 2.875rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.032em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.014em;
}

h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--primary);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s var(--ease);
}

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

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

svg {
  flex: none;
}

strong {
  font-weight: 600;
  color: var(--ink);
}

.section--dark strong,
.on-dark strong {
  color: #ffffff;
}

::selection {
  background: var(--accent);
  color: #ffffff;
}

/* == 02  Fokus, Skip-Link, Screenreader =================================== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0;
}

.on-dark :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible {
  outline-color: #ff9d6b;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--accent);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: none;
  transition: top 0.15s ease-in;
}

.skip-link:focus {
  top: 1rem;
  color: #ffffff;
}

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

/* == 03  Layout =========================================================== */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 768px) {
  .wrap {
    padding-inline: 2.5rem;
  }
}

.section {
  position: relative;
  padding-block: 4.5rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .section {
    padding-block: 6.5rem;
  }
}

.section--alt {
  background: var(--bg-alt);
}

/* Zwei gleichfarbige Flächen hintereinander brauchen keine Trennlinie. */
.section--alt + .section--alt,
.section--dark + .section--dark {
  border-top-color: transparent;
}

.section--dark {
  background: var(--dark-surface);
  border-top-color: var(--dark-surface);
  color: var(--on-dark);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: #ffffff;
}

/* Feines Linienraster auf den dunklen Bändern – nah am Millimeterpapier,
   fast unsichtbar, aber es nimmt der Fläche das Tote. */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 88px 88px;
}

.section--dark > * {
  position: relative;
}

.section--flush {
  border-top: 0;
}

/* Der Kopfbereich jeder Seite: Papier mit einem hauchfeinen Raster, das nach
   unten ausläuft. Ein Werkblatt, auf das geschrieben wurde. */
.section--flush:first-of-type {
  padding-top: 3.5rem;
  background: var(--bg);
}

.section--flush:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14, 84, 80, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 84, 80, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

.section--flush:first-of-type > * {
  position: relative;
}

@media (min-width: 768px) {
  .section--flush:first-of-type {
    padding-top: 5.5rem;
  }
}

.measure {
  max-width: 66ch;
}

/* == 04  Typografische Bausteine ========================================== */
/* Die Rubrik ist eine gesetzte Marke, kein Fliesstext: Vollton-Quadrat,
   dann die Nummer. Sie gliedert die Seite wie eine Positionsnummer. */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.125rem;
}

.eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
  flex: none;
}

.section--dark .eyebrow {
  color: var(--on-dark-accent);
}

.lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  .lead {
    font-size: 1.3125rem;
  }
}

.section--dark .lead {
  color: #bfcecb;
}

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

.section--dark .muted,
.on-dark .muted {
  color: var(--on-dark-muted);
}

.meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.section--dark .meta,
.on-dark .meta {
  color: var(--on-dark-muted);
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Datenblatt-Leiste: Merkmal und Wert auf je einer Zeile, durch Haarlinien
   getrennt. Ab der mittleren Breite steht das Merkmal in der linken Spalte. */
.spec {
  margin: 0;
  border-top: 1px solid var(--border);
}

.spec > div {
  display: grid;
  gap: 0.125rem 1.5rem;
  padding-block: 0.8125rem;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 640px) {
  .spec > div {
    grid-template-columns: 8.5rem 1fr;
    align-items: baseline;
  }
}

.spec dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.spec dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.section--dark .spec,
.on-dark .spec {
  border-top-color: var(--on-dark-line);
}

.section--dark .spec > div,
.on-dark .spec > div {
  border-bottom-color: var(--on-dark-line);
}

.section--dark .spec dt,
.on-dark .spec dt {
  color: var(--on-dark-accent);
}

.section--dark .spec dd,
.on-dark .spec dd {
  color: var(--on-dark-muted);
}

/* == 05  Buttons ========================================================== */
/* Rechteckig, mit Vollton-Tinte. Der Wechsel auf Petrol beim Zeigen ist die
   einzige Bewegung – kein Heben, kein Schatten. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.8125rem 1.625rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn--primary {
  background: var(--cta);
  color: #ffffff;
  border-color: var(--cta);
}

.btn--primary:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  color: #ffffff;
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: rgba(18, 25, 26, 0.045);
}

/* Auf den dunklen Bändern kehrt sich der Hauptknopf um: die Tinte verschwände
   sonst im Hintergrund. Hell und deckend bleibt er die stärkste Handlung. */
.section--dark .btn--primary,
.on-dark .btn--primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--dark-surface);
}

.section--dark .btn--primary:hover,
.on-dark .btn--primary:hover {
  background: var(--on-dark-accent);
  border-color: var(--on-dark-accent);
  color: var(--dark-surface);
}

/* Der Ladekreis sitzt dann auf hellem Grund und braucht dunkle Striche. */
.section--dark .btn--primary .spinner,
.on-dark .btn--primary .spinner {
  border-color: rgba(16, 26, 27, 0.28);
  border-top-color: var(--dark-surface);
}

/* Der Nebenknopf bleibt eine Umrisslinie – sonst wären beide gleich laut. */
.btn--onDark {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--onDark:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #ffffff;
  color: #ffffff;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* == 06  Karten =========================================================== */
/* Kein Kasten mit Schlagschatten, sondern ein aufgezogenes Feld: Haarlinie
   rundum, oben eine kräftige Kante, die beim Zeigen die Signalfarbe annimmt. */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-strong);
  border-radius: 0;
  padding: 1.75rem 1.625rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

/* Nur Karten mit weiterführendem Link in der Fusszeile reagieren auf den
   Zeiger. Reine Text-, Formular- und Linklisten-Karten bleiben ruhig. */
.card:has(.card__footer a):hover {
  border-color: var(--border);
  border-top-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.card--tint {
  background: var(--primary-light);
  border-color: var(--primary-border);
  border-top-color: var(--primary);
}

.card--dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--on-dark-line);
  border-top-color: var(--on-dark-accent);
}

.card--dark:has(.card__footer a):hover {
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.28);
}

/* Die Marke der Karte: quadratischer Rahmen, Strichzeichnung darin. */
.card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary-border);
  border-radius: 0;
  flex: none;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}

.card:hover .card__icon {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.card__icon svg {
  width: 22px;
  height: 22px;
}

.card__footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.card--tint .card__footer {
  border-top-color: var(--primary-border);
}

.card--dark .card__footer {
  border-top-color: var(--on-dark-line);
}

/* Definitionslisten in Karten: Label/Wert-Paare ohne Einzug. */
.card dl {
  margin: 0;
}

.card dd {
  margin-left: 0;
}

/* == 07  Listen, Schritte, Kennzahlen ===================================== */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.875rem;
}

.check-list li {
  position: relative;
  padding-left: 1.875rem;
  color: var(--text-secondary);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}

.section--dark .check-list li,
.on-dark .check-list li {
  color: #bfcecb;
}

.section--dark .check-list li::before,
.on-dark .check-list li::before {
  border-color: #6bc39a;
}

/* Der Schritt hängt an einer kräftigen Oberkante mit gesetzter Marke – die
   Reihenfolge ist damit auch ohne Nummernkreise ablesbar. */
.step {
  border-top: 1px solid var(--on-dark-line);
  padding-top: 1.375rem;
  position: relative;
}

.step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 3rem;
  height: 3px;
  background: var(--on-dark-accent);
}

.step-number {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-accent);
  display: block;
  margin-bottom: 0.625rem;
}

.step--light {
  border-top-color: var(--border-strong);
}

.step--light::before {
  background: var(--accent);
}

.step--light .step-number {
  color: var(--accent);
}

/* Kennzahlen im Werkblatt-Ton: grosse Monospace-Ziffer über einer Linie. */
.metric__value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 2rem + 3.4vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
  display: block;
}

.metric__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 2px solid var(--ink);
}

.section--dark .metric__value {
  color: #ffffff;
}

.section--dark .metric__label {
  color: var(--on-dark-accent);
  border-top-color: var(--on-dark-line);
}

/* == 08  Header & Navigation ============================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 244, 239, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

/* Wird von main.js beim Scrollen gesetzt. */
.site-header.is-stuck {
  border-bottom-color: var(--border-strong);
}

.header-bar {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Vor dem Namen steht eine Vollton-Marke – dasselbe Quadrat wie in der
   Rubrikzeile, damit Kopf und Inhalt dieselbe Sprache sprechen. */
.brand {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.03em;
  flex: none;
  padding-left: 1.125rem;
}

.brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
}

.brand span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

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

.nav-link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 0.125rem;
  white-space: nowrap;
}

/* Unterstrich wächst von links – ersetzt den harten Border-Sprung. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s var(--ease);
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-link[aria-current="page"] {
  color: var(--primary);
}

.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Die Rufnummer in der Kopfzeile steht auf einer Zeile und trägt statt der
   Unterstreichung eine eigene Grundlinie – sonst zerreisst die Sperrung der
   Monospace den Block in zwei Zeilen. */
.header-bar .mono {
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 3px;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.header-bar .mono:hover {
  color: var(--primary);
  border-bottom-color: var(--accent);
}

/* Der Knopf in der Leiste ist kompakter als im Fliesstext und bricht nie um. */
.header-bar .btn {
  min-height: 44px;
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.nav-toggle {
  min-height: 46px;
  min-width: 46px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

.nav-toggle:hover {
  border-color: var(--ink);
}

.nav-toggle[aria-expanded="true"] {
  background: var(--cta);
  border-color: var(--cta);
  color: #ffffff;
}

.mobile-nav {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding-block: 0.5rem 1.5rem;
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  animation: nav-in 0.2s var(--ease);
}

@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.mobile-nav a {
  display: block;
  padding: 0.9375rem 0.25rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.mobile-nav a:hover {
  color: var(--primary);
}

.mobile-nav a[aria-current="page"] {
  color: var(--primary);
  border-left: 3px solid var(--accent);
  padding-left: 0.75rem;
  margin-left: -0.75rem;
}

/* Buttons im Mobilmenü behalten ihre eigene Gestalt. */
.mobile-nav .btn {
  border-bottom: 0;
  padding-block: 0.875rem;
}

/* == 09  Trustbar ========================================================= */
/* Das erste dunkle Band der Seite, direkt unter dem Kopfbereich: eine Zeile
   harte Fakten in Versalien, wie ein Stempel unter der Zeichnung. */
.trustbar {
  background: var(--dark-surface);
  color: var(--on-dark);
  border-top: 1px solid var(--dark-surface);
  border-bottom: 1px solid var(--dark-surface);
}

.trustbar ul {
  list-style: none;
  margin: 0;
  padding: 1.125rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
}

.trustbar li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Trennstriche zwischen den Angaben, sobald sie nebeneinander stehen. */
@media (min-width: 768px) {
  .trustbar ul {
    gap: 0.75rem 0;
  }

  .trustbar li + li {
    margin-left: 1.75rem;
    padding-left: 1.75rem;
    border-left: 1px solid var(--on-dark-line);
  }
}

.star {
  color: var(--accent);
}

.trustbar .star {
  color: #e8763f;
}

/* == 10  Formulare ======================================================== */
.field {
  display: block;
  margin-bottom: 1.375rem;
}

.field > label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.section--dark .field > label,
.on-dark .field > label {
  color: #ffffff;
}

.field .hint {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  margin-top: 0.375rem;
}

.on-dark .field .hint,
.section--dark .field .hint {
  color: var(--on-dark-muted);
}

/* Eingabefelder ohne Rahmen ringsum: nur eine kräftige Grundlinie, wie ein
   ausfüllbares Formular auf Papier. */
.input,
.textarea,
.select {
  width: 100%;
  min-height: 50px;
  padding: 0.6875rem 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(18, 25, 26, 0.03);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.on-dark .input,
.on-dark .textarea,
.on-dark .select,
.section--dark .input,
.section--dark .textarea,
.section--dark .select {
  background: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
}

.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5c5e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 18px;
  cursor: pointer;
}

.textarea {
  min-height: 150px;
  resize: vertical;
}

.input:hover,
.textarea:hover,
.select:hover {
  border-bottom-color: var(--ink);
}

.on-dark .input:hover,
.on-dark .textarea:hover,
.section--dark .input:hover,
.section--dark .textarea:hover {
  border-bottom-color: #ffffff;
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  background: var(--surface);
  border-bottom-color: var(--accent);
  border-bottom-width: 2px;
  padding-bottom: calc(0.6875rem - 1px);
}

.on-dark .input:focus,
.on-dark .textarea:focus,
.on-dark .select:focus,
.section--dark .input:focus,
.section--dark .textarea:focus,
.section--dark .select:focus {
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: #ff9d6b;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-tertiary);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-bottom-color: var(--danger);
  border-bottom-width: 2px;
  padding-bottom: calc(0.6875rem - 1px);
}

.on-dark .input[aria-invalid="true"],
.on-dark .textarea[aria-invalid="true"],
.section--dark .input[aria-invalid="true"],
.section--dark .textarea[aria-invalid="true"] {
  border-bottom-color: #ffb3a3;
}

.error-text {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--danger);
}

.error-text.is-visible {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
}

/* Warnzeichen vor der Fehlermeldung – Fehler nicht nur über Farbe zeigen. */
.error-text.is-visible::before {
  content: "!";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15em;
  background: var(--danger);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
}

.on-dark .error-text,
.section--dark .error-text {
  color: #ffb3a3;
}

.on-dark .error-text.is-visible::before,
.section--dark .error-text.is-visible::before {
  background: #ffb3a3;
  color: var(--dark-surface);
}

.form-status {
  margin-top: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 0;
  background: var(--primary-light);
  color: var(--ink);
  font-size: 0.9375rem;
}

.form-status[hidden] {
  display: none;
}

.form-status:focus-visible {
  outline-offset: 3px;
}

.form-status--success {
  border-left-color: var(--success);
  background: #e6f0ea;
  border-color: #c3ddcf;
}

.form-status--error {
  border-left-color: var(--danger);
  background: #f9e9e6;
  border-color: #eecac3;
}

.checkbox-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1.375rem;
}

.checkbox-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.checkbox-row label {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.on-dark .checkbox-row label,
.section--dark .checkbox-row label {
  color: #bfcecb;
}

/* In zweispaltigen Feldgruppen sind die Beschriftungen unterschiedlich hoch –
   eine mit Hinweistext, eine ohne. Dann stehen die Eingabezeilen versetzt.
   Das Feld wird zur Spalte, die Eingabe rutscht an deren Fuss. */
@media (min-width: 768px) {
  .grid > .field {
    display: flex;
    flex-direction: column;
  }

  .grid > .field > .input,
  .grid > .field > .select,
  .grid > .field > .textarea {
    margin-top: auto;
  }
}

/* Honeypot – für Menschen und Screenreader ausgeblendet. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner[hidden] {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* == 11  FAQ ============================================================== */
/* Die Fragenliste ist ein Verzeichnis: Haarlinien zwischen den Einträgen,
   Marke rechts, kein Kasten. */
.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item:first-of-type {
  border-top: 1px solid var(--border);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.375rem 3rem 1.375rem 0.75rem;
  margin-inline: -0.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  position: relative;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Plus-Zeichen aus zwei Strichen: dreht sich beim Öffnen zum Minus. */
.faq-item summary::after,
.faq-item summary::before {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.75rem;
  height: 2px;
  background: var(--accent);
  transition: transform 0.2s var(--ease);
}

.faq-item summary::before {
  transform: translateY(-50%);
}

.faq-item summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(0deg);
}

.faq-item summary:hover {
  color: var(--primary);
  background: rgba(18, 25, 26, 0.035);
}

.faq-item[open] summary {
  color: var(--primary);
}

.faq-answer {
  padding: 0 0 1.5rem;
  color: var(--text-secondary);
  max-width: 66ch;
  animation: faq-in 0.22s var(--ease);
}

@keyframes faq-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* == 12  Tabellen & Prosa ================================================= */
/* Tabellen ohne Gitternetz: nur waagerechte Linien, Kopfzeile in Versalien. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.9375rem 1.25rem 0.9375rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* Beschriftungen – Spaltenkopf wie Zeilenkopf – stehen in Versalien. */
.data-table th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink);
}

/* Nur die Kopfzeile trägt die kräftige Linie. Zeilenköpfe sind eine
   Beschriftungsspalte und bleiben auf der Haarlinie. */
.data-table thead th {
  border-bottom: 2px solid var(--ink);
}

.data-table td {
  color: var(--text-secondary);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover td {
  background: rgba(18, 25, 26, 0.03);
}

/* Scrollbare Tabellen bekommen einen sichtbaren Rahmen. */
.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prose {
  max-width: 66ch;
}

.prose h2 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-top: 3rem;
  margin-bottom: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.prose h3 {
  font-size: 1.125rem;
  margin-top: 1.875rem;
  margin-bottom: 0.5rem;
}

.prose p,
.prose ul,
.prose ol {
  color: var(--text-secondary);
  margin-top: 0.75rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li {
  margin-top: 0.375rem;
}

.prose li::marker {
  color: var(--accent);
}

.prose dl {
  margin-top: 0.75rem;
  color: var(--text-secondary);
}

.prose dt {
  font-weight: 600;
  color: var(--ink);
  margin-top: 0.75rem;
}

.prose a {
  text-decoration: underline;
}

/* == 13  Footer =========================================================== */
.site-footer {
  position: relative;
  background: var(--dark-surface);
  color: #bfcecb;
  padding-block: 4.5rem 2rem;
}

.site-footer h2,
.site-footer h3 {
  color: var(--on-dark-accent);
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--on-dark-line);
}

.site-footer a {
  color: #dbe4e1;
  text-decoration: none;
}

.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.site-footer address {
  font-style: normal;
  line-height: 1.85;
}

.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--on-dark-line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--on-dark-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}

/* == 14  Kleinteile ======================================================= */
.hairline {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

.section--dark .hairline,
.on-dark .hairline {
  border-top-color: var(--on-dark-line);
}

/* Das Ergebnis-Etikett: eckig, mit Vollton-Marke davor. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--primary-border);
  border-radius: 0;
  padding: 0.4375rem 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.badge::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  background: var(--accent);
  flex: none;
}

.section--dark .badge,
.on-dark .badge {
  color: #d3e3df;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.24);
}

.section--dark .badge::before,
.on-dark .badge::before {
  background: var(--on-dark-accent);
}

/* Bilder sitzen in einem harten Rahmen mit versetzter Kante – wie eine
   aufgezogene Tafel, nicht wie eine schwebende Karte. */
.figure-frame {
  position: relative;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: var(--shadow-md);
}

.figure-frame img {
  width: 100%;
}

.figure-frame figcaption {
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
}

.section--dark .figure-frame,
.on-dark .figure-frame {
  border-color: var(--on-dark-line);
  box-shadow: none;
}

/* Bewusst inline statt inline-flex: bei einer zweizeiligen Beschriftung wäre
   der Pfeil ein eigenes Flex-Element und bliebe am rechten Rand zurück,
   während der Text darunter umbricht. Inline läuft er mit dem letzten Wort. */
.arrow-link {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: none;
  display: inline;
}

.arrow-link span:not(.sr-only) {
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.18s var(--ease);
}

.arrow-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.arrow-link:hover span:not(.sr-only) {
  transform: translateX(4px);
}

/* == 15  Schwebende Bedienelemente ======================================== */
/* Beide Elemente werden von main.js eingefügt: reine Zusatzhilfen, die
   Inhalte lediglich doppeln – ohne JavaScript fehlt nichts. */

.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 45;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cta);
  color: #ffffff;
  border: 1px solid var(--cta);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
    background-color 0.2s var(--ease), visibility 0.2s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--primary);
  border-color: var(--primary);
}

/* Handlungsleiste am unteren Rand – nur auf schmalen Displays. */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 46;
  display: none;
  gap: 0.625rem;
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
  background: rgba(246, 244, 239, 0.96);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--border-strong);
  transform: translateY(110%);
  transition: transform 0.25s var(--ease);
}

.action-bar.is-visible {
  transform: none;
}

.action-bar .btn {
  flex: 1 1 0;
  min-height: 46px;
  padding-inline: 0.75rem;
  font-size: 0.875rem;
}

@media (max-width: 1023px) {
  .action-bar {
    display: flex;
  }

  /* Platz schaffen, damit die Leiste nichts verdeckt. */
  body.has-action-bar .site-footer {
    padding-bottom: 5.5rem;
  }

  .to-top {
    bottom: 5.25rem;
  }
}

/* == 16  Bewegung / Scroll-Reveal ========================================= */
/* main.js setzt .reveal auf Abschnittsinhalte und .is-in beim Sichtbarwerden. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Bewegungsreduktion: alles ruhig stellen, nichts darf unsichtbar bleiben. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .arrow-link:hover span:not(.sr-only) {
    transform: none;
  }
}

/* == 17  Utility-Ebene ==================================================== */
/* Umsetzung der im Markup verwendeten Layoutklassen. Breakpoints:
   sm 640px, md 768px, lg 1024px. */

/* --- Anzeige --- */
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

/* --- Flex --- */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }

/* --- Grid --- */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* --- Abstände zwischen Rasterfeldern --- */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-2 { row-gap: 0.5rem; }

/* --- Aussenabstand --- */
.m-0 { margin: 0; }
.ml-0 { margin-left: 0; }
.ml-8 { margin-left: 2rem; }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.my-2 { margin-block: 0.5rem; }

/* --- Innenabstand --- */
.p-0 { padding: 0; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-4 { padding-inline: 1rem; }
.py-3 { padding-block: 0.75rem; }
.pt-6 { padding-top: 1.5rem; }

/* --- Rahmen --- */
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }

/* --- Grösse --- */
.w-full { width: 100%; }
.max-w-3xl { max-width: 50rem; }

/* --- Schriftgrösse --- */
.text-xs { font-size: 0.75rem; line-height: 1.5; }
.text-base { font-size: 1rem; line-height: 1.6; }
.text-xl { font-size: 1.25rem; line-height: 1.5; }

/* --- Sonstiges --- */
.list-none { list-style: none; padding-left: 0; }
.not-italic { font-style: normal; }

/* --- ab 640px (sm) --- */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:w-auto { width: auto; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
}

/* --- ab 768px (md) --- */
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
  .md\:hidden { display: none; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:p-8 { padding: 2rem; }
  .md\:p-10 { padding: 2.5rem; }
}

/* --- ab 1024px (lg) --- */
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
  .lg\:hidden { display: none; }
  .lg\:items-center { align-items: center; }
  .lg\:items-start { align-items: flex-start; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }
}

/* == 18  Druck ============================================================ */
@media print {
  .site-header,
  .action-bar,
  .to-top,
  .mobile-nav,
  .skip-link,
  .trustbar {
    display: none !important;
  }

  body {
    font-size: 11pt;
    color: #000000;
    background: #ffffff;
  }

  .section {
    padding-block: 1.5rem;
    border-top: 0;
    background: none !important;
    color: #000000 !important;
  }

  .section--dark::before,
  .section--flush:first-of-type::before {
    display: none !important;
  }

  .section--dark h2,
  .section--dark h3,
  .section--dark .lead,
  .section--dark .muted {
    color: #000000 !important;
  }

  .card {
    border-color: #999999;
    box-shadow: none;
    break-inside: avoid;
  }

  .faq-answer {
    display: block !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}