/* styles.css
   CloudManager Marketing-Website — Dark-only, kein Build-Schritt.
   Custom Properties statt Tailwind, System-Schriftstapel, mobile-first.
*/

:root {
  color-scheme: dark;

  /* Farben — an der Anwendung orientiert (Dark-UI, primary = Blau #3b82f6) */
  --bg: #0b1020;
  --bg-elevated: #10162a;
  --bg-card: #131b32;
  --bg-card-hover: #16203c;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #e8eaf0;
  --text-muted: #9aa3b8;
  --text-faint: #6b7488;
  --accent: #3b82f6;
  --accent-strong: #60a5fa;
  --accent-soft: rgba(59, 130, 246, 0.14);
  --accent-border: rgba(59, 130, 246, 0.35);
  --focus-ring: #93c5fd;

  /* Layout */
  --max-width: 1140px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --gap: 1.25rem;

  /* Fließende Typografie */
  --fs-h1: clamp(2.1rem, 1.55rem + 2.6vw, 3.6rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2.3rem);
  --fs-h3: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-lede: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-small: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --fs-stat: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);

  --font-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

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

html {
  scroll-padding-top: 4.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--accent-strong);
  text-decoration-color: rgba(96, 165, 250, 0.4);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-color: currentColor;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

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

/* Layout-Hilfen */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

section {
  padding-block: clamp(3rem, 2.4rem + 3vw, 6rem);
  border-bottom: 1px solid var(--border);
}

section:last-of-type {
  border-bottom: none;
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.6rem + 2vw, 3rem);
}

.section-head .eyebrow {
  margin-bottom: 0.5rem;
}

.section-head h2 {
  font-size: var(--fs-h2);
  margin-bottom: 0.75rem;
}

.section-head p {
  color: var(--text-muted);
  font-size: var(--fs-lede);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

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

/* Skip-Link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top 0.15s ease;
}

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

/* Header / Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 16, 32, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 4rem;
}

.brand {
  display: flex;
  align-items: baseline;
  /* ⚠️ Kein Abstand: "levit" und "-cloud" sind ein Wort. Der frueher hier
     stehende Abstand von 0.4rem trennte "Cloud" und "Manager" — bei
     "levit -cloud" liest er sich wie ein Setzfehler. */
  gap: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
}

.brand__mark {
  color: var(--accent-strong);
}

.brand__suffix {
  display: none;
  font-weight: 400;
  color: var(--text-faint);
  font-size: 0.85rem;
  white-space: nowrap;
}

@media (min-width: 1280px) {
  .brand__suffix {
    display: inline;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
}

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

.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.nav-toggle:not([aria-expanded="true"]) .icon-close {
  display: none;
}

.main-nav {
  display: none;
}

.main-nav.is-open {
  display: block;
  position: absolute;
  top: 4rem;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 1.25rem 1.25rem;
}

.main-nav ul {
  display: flex;
  flex-direction: column;
}

.main-nav a {
  display: block;
  padding: 0.85rem 0.25rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  font-size: 0.98rem;
}

.main-nav a:hover {
  color: var(--accent-strong);
}

/* Höhere Spezifität als .btn (das sonst gleichrangige display:inline-flex
   gewinnt, weil es später im Stylesheet steht) — .header-cta muss unterhalb
   des Nav-Breakpoints zuverlässig ausgeblendet bleiben. */
.site-header .header-cta {
  display: none;
}

@media (min-width: 1040px) {
  .nav-toggle {
    display: none;
  }

  .main-nav {
    display: block;
  }

  .main-nav.is-open {
    position: static;
    background: none;
    border: none;
    padding: 0;
  }

  .main-nav ul {
    flex-direction: row;
    gap: 1.1rem;
  }

  .main-nav a {
    padding: 0.4rem 0.1rem;
    border-bottom: none;
    font-size: 0.92rem;
    color: var(--text-muted);
    white-space: nowrap;
  }

  .main-nav a:hover {
    color: var(--text);
  }

  .site-header .header-cta {
    display: inline-flex;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-strong);
}

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

.btn--ghost:hover {
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

.btn--small {
  min-height: 38px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
}

/* Hero */
.hero {
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(2.5rem, 2rem + 2vw, 4rem);
  background:
    radial-gradient(
      60rem 30rem at 15% -10%,
      rgba(59, 130, 246, 0.16),
      transparent 60%
    ),
    radial-gradient(
      50rem 26rem at 100% 0%,
      rgba(59, 130, 246, 0.09),
      transparent 55%
    );
}

.hero__inner {
  max-width: 52rem;
}

.hero h1 {
  font-size: var(--fs-h1);
  margin-block: 0.9rem 1.1rem;
}

.hero__lede {
  font-size: var(--fs-lede);
  color: var(--text-muted);
  max-width: 44rem;
}

.hero__since {
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 40rem;
}

.stat-tile {
  background: var(--bg-card);
  padding: 1.1rem 1.2rem;
}

.stat-tile dt {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: 0 0 0.35rem;
}

.stat-tile dd {
  margin: 0;
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hero__screenshot {
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0;
  max-width: 62rem;
}

/* Platzhalter-Flächen für Screenshots */
.screenshot-placeholder {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.02) 10px,
      transparent 10px,
      transparent 20px
    ),
    var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: var(--fs-small);
  text-align: center;
  padding: 1rem;
}

.screenshot-placeholder--wide {
  aspect-ratio: 21 / 9;
}

.screenshot-placeholder--square {
  aspect-ratio: 4 / 3;
}

/* Funktionen — Lebenszyklus-Timeline */
.timeline {
  display: grid;
  gap: 1.5rem;
  counter-reset: step;
}

@media (min-width: 760px) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
  }
}

.timeline__item {
  position: relative;
  padding-top: 2.75rem;
}

.timeline__item::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 760px) {
  .timeline__item {
    padding-top: 0;
    padding-left: 0;
  }

  .timeline__item::before {
    position: static;
    margin-bottom: 1rem;
  }
}

.timeline__item h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.4rem;
}

.timeline__item p {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.kernaussage {
  margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-small);
  color: var(--text);
}

.kernaussage strong {
  color: var(--accent-strong);
}

/* Bestellung — 4-Schritte-Ablauf */
.order-flow {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 760px) {
  .order-flow {
    /* ⚠️ Bewusst ZWEI Spalten, seit die Schritte echte Screenshots tragen.
       Bei vier nebeneinander war jedes Bild rund 220 px breit — man sah, DASS
       da eine Oberflaeche ist, aber nichts davon. Zwei Spalten geben rund
       440 px, und damit sind Beschriftungen und Preise lesbar. */
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    align-items: start;
  }
}

/* Der Schritt „Individuelle Loesungen“ auf der Startseite traegt keine Bilder —
   dort bleiben vier Spalten richtig. */
@media (min-width: 760px) {
  #individuell .order-flow {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

.order-step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.order-step .screenshot-placeholder {
  margin-bottom: 1rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
}

.order-step__num {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--accent-strong);
  margin-bottom: 0.5rem;
}

.order-step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.order-step p {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.order-note {
  margin-top: 1.5rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
}

/* Unterschiede — Karten */
.card-grid {
  display: grid;
  gap: 1.25rem;
  /* s. Anmerkung weiter unten zu min(…, 100%) — dieselbe Falle. */
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
}

.diff-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.diff-card:hover {
  border-color: var(--accent-border);
  background: var(--bg-card-hover);
}

.diff-card__num {
  font-size: var(--fs-small);
  color: var(--text-faint);
  font-weight: 700;
}

.diff-card h3 {
  font-size: 1.1rem;
}

.diff-card p {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.diff-card__beleg {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--accent-strong);
  font-weight: 600;
}

.diff-card__beleg span {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

/* Sicherheit */
.security-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 860px) {
  .security-layout {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

.security-list li {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.security-list li:last-child {
  border-bottom: none;
}

.security-list strong {
  color: var(--text);
  font-weight: 600;
}

.security-list svg {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  color: var(--accent-strong);
}

.stat-callout {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
}

.stat-callout__value {
  font-size: var(--fs-stat);
  font-weight: 700;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.stat-callout__label {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* Architektur */
.architecture-diagram {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 0.7rem + 1.2vw, 2rem);
  margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
}

.architecture-diagram svg {
  color: var(--text-muted);
  width: 100%;
}

.architecture-diagram figcaption {
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
  text-align: center;
}

.architecture-notes {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.architecture-notes h3 {
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
  color: var(--text);
}

.architecture-notes p {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.architecture-lede {
  font-size: var(--fs-lede);
  color: var(--text);
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}

/* Zahlen */
.figures-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.figures-table {
  min-width: 32rem;
}

.figures-table th,
.figures-table td {
  text-align: left;
  padding: 0.9rem 1.25rem;
  font-size: var(--fs-small);
  border-bottom: 1px solid var(--border);
}

.figures-table thead th {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  font-weight: 600;
}

.figures-table tbody td:first-child {
  color: var(--text-muted);
}

.figures-table tbody td:last-child {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.figures-table tbody tr:last-child td {
  border-bottom: none;
}

.figures-note {
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
}

/* Zielgruppe */
.audience-grid {
  display: grid;
  gap: 1.5rem;
}

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

.audience-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.audience-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
  color: var(--accent-strong);
}

.audience-card ul li {
  padding: 0.4rem 0;
  padding-left: 1.1rem;
  position: relative;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.audience-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Kontakt */
.contact-section {
  text-align: center;
}

.contact-section .section-head {
  margin-inline: auto;
  text-align: center;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.contact-note {
  margin-top: 1.75rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
  max-width: 34rem;
  margin-inline: auto;
}

/* Footer */
.site-footer {
  padding-block: 2.5rem;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
}

@media (min-width: 640px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-faint);
}

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


/* ---------------------------------------------------------------------------
   Rechtsseiten (Impressum, Datenschutz)
   Bewusst schmal gesetzt: Fliesstext ist ab etwa 70 Zeichen je Zeile schwer zu
   lesen, und genau diese Seiten liest jemand, der etwas Bestimmtes sucht.
--------------------------------------------------------------------------- */
.legal {
  padding: 3rem 0 4rem;
}

.legal__inner {
  max-width: 46rem;
}

.legal h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin-bottom: 2rem;
}

.legal h2 {
  font-size: 1.15rem;
  margin: 2.25rem 0 0.6rem;
}

.legal p {
  line-height: 1.7;
  margin: 0 0 1rem;
}

.legal code {
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
}

.legal__back {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ───────────────────────────────────────────────────────────────
   Firmenauftritt: Saeulen, Unterseiten-Hero, Abschnitts-Abschluesse
   Ergaenzt am 03.09.2026, als aus der CloudManager-Produktseite ein
   Firmenauftritt mit vier Angeboten wurde.
   ─────────────────────────────────────────────────────────────── */

/* Vier Kennzahlen statt drei — bei 40rem wird die Zahl sonst umbrochen. */
.stat-tiles--four {
  max-width: 46rem;
}

/* Der Hero einer Unterseite traegt keine Kennzahlen und darf flacher sein. */
.hero--sub {
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

/* Spaltenzahl nach Kartenanzahl waehlen, nicht dem Zufall ueberlassen:
   `auto-fit` mit 19rem ergab bei VIER Karten 3+1 — eine Karte allein in der
   zweiten Reihe. Zwei Breiten, passend zu den beiden vorkommenden Faellen. */
/* ⚠️ `min(…, 100%)` ist hier nicht Zierde, sondern der ganze Punkt: ein nacktes
   `minmax(24rem, 1fr)` erzwingt eine Spur von 384 px — auf einem 390-px-Geraet
   ist der Inhaltsbereich aber nur 350 px breit. Gemessen am 03.09.2026: die Seite
   war 405 px breit und schob sich waagerecht ueber den Rand. Mit `min()` faellt
   die Mindestbreite auf die verfuegbare Breite zurueck. */
.card-grid--two,
.pillar-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
.card-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.pillar-card:hover {
  border-color: var(--accent-border);
  background: var(--bg-card-hover);
}
.pillar-card h3 {
  font-size: 1.15rem;
}
.pillar-card p {
  color: var(--text-muted);
  font-size: var(--fs-small);
}
.pillar-card__num {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: 0.08em;
  margin: 0;
}
/* `margin-top: auto` haelt den Verweis am unteren Rand — sonst steht er in
   jeder Karte auf einer anderen Hoehe, je nach Textlaenge. */
.pillar-card__link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: none;
}
.pillar-card__link:hover {
  text-decoration: underline;
}
/* Ohne Nummer und ohne Verweis — fuer die dichten Merkmalsgitter. */
.pillar-card--flat {
  padding: 1.35rem;
}

/* Ein Abschnitt endet mit einem Weg tiefer, nicht mit dem letzten Absatz. */
.section-cta {
  margin-top: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
}

.section-note {
  margin-top: 1.5rem;
  max-width: 46rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
}

/* Einleitungssatz direkt vor einer Kartenreihe braucht Abstand nach unten. */
.section-note + .card-grid {
  margin-top: 1.25rem;
}

/* Zwischenueberschrift innerhalb eines Abschnitts (z. B. „Neu seit September“),
   damit die Kartenreihe darunter nicht wie eine Fortsetzung der Zeitleiste wirkt. */
.subhead {
  font-size: var(--fs-h3);
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 1.25rem;
}

/* Die Fusszeile traegt jetzt vier Verweise statt zwei. */
.site-footer__inner .footer-links {
  flex-wrap: wrap;
}

/* Sprungmarken innerhalb einer Unterseite. Waagerecht scrollbar, damit die
   Leiste auf schmalen Geraeten nicht umbricht und das Layout aufreisst. */
.page-nav {
  border-block: 1px solid var(--border);
  background: var(--bg-elevated);
  position: sticky;
  top: 3.5rem;
  z-index: 5;
}
.page-nav__inner {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.7rem;
  /* Beim Sprung auf einen Abschnitt scrollt der Browser die Leiste mit, damit der
     aktive Punkt sichtbar wird. Ohne diesen Rand steht der Nachbar dann halb
     abgeschnitten am Bildrand und sieht nach einem Fehler aus. */
  scroll-padding-inline: 1rem;
  scroll-snap-type: x proximity;
}
.page-nav a {
  scroll-snap-align: start;
}
.page-nav__inner::-webkit-scrollbar {
  display: none;
}
.page-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
}
.page-nav a:hover {
  color: var(--accent-strong);
}

/* Screenshots aus dem laufenden System. Gerahmt statt randlos, damit die dunkle
   Oberflaeche der Anwendung nicht mit dem dunklen Seitenhintergrund verschwimmt. */
.hero__shot,
.section-shot {
  margin: clamp(2rem, 1.6rem + 1.5vw, 3rem) 0 0;
}
.hero__shot img,
.section-shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  /* Der Schatten setzt die Aufnahme von der Seite ab — ohne ihn sieht ein
     dunkler Screenshot auf dunklem Grund wie ein Teil des Layouts aus. */
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
}
.hero__shot figcaption,
.section-shot figcaption {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
  max-width: 46rem;
}

/* Zahlen-Tabelle auf schmalen Geraeten: Zeilen stapeln statt seitwaerts scrollen.
   ⚠️ Der `overflow-x: auto`-Rahmen war technisch korrekt — die Tabelle liess sich
   schieben — aber gemessen 512 px breit in einem 390-px-Fenster. Sichtbar war
   davon „596 — davon 479 erfolg“, abgeschnitten mitten im Wort. Ein Beleg, den
   man erst freischieben muss, wird nicht gelesen. */
@media (max-width: 40rem) {
  .figures-table,
  .figures-table thead,
  .figures-table tbody,
  .figures-table tr,
  .figures-table th,
  .figures-table td {
    display: block;
    min-width: 0;
  }
  /* Die Kopfzeile benennt nur "Kennzahl" und "Stand" — gestapelt steht das
     ohnehin untereinander, die Zeile waere reine Wiederholung. */
  .figures-table thead {
    display: none;
  }
  .figures-table tbody tr {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--border);
  }
  .figures-table tbody tr:last-child {
    border-bottom: none;
  }
  .figures-table tbody td {
    padding: 0;
    border-bottom: none;
  }
  .figures-table tbody td:first-child {
    margin-bottom: 0.2rem;
  }
  .figures-table tbody td:last-child {
    font-size: var(--fs-body);
  }
}

/* Zwei aufeinanderfolgende Hero-Absaetze brauchen einen Abstand — ohne ihn lesen
   sich Frage und Antwort als ein einziger Block. */
.hero__lede + .hero__lede {
  margin-top: 1rem;
}

/* Screenshots im Bestellweg: vier Schritte nebeneinander, jeder mit Bild. */
.order-step__shot {
  width: 100%;
  height: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  margin-bottom: 0.9rem;
  background: var(--bg);
}

/* Der Kernaussage-Block traegt seit dem AVV-Abschnitt auch Ueberschrift und
   mehrere Absaetze — vorher war er ein einzelner Satz. */
.kernaussage h3 {
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
}
.kernaussage p {
  margin: 0 0 0.7rem;
}
.kernaussage p:last-child {
  margin-bottom: 0;
}
/* Der Vorbehalt steht bewusst im selben Block wie die Zusage, nicht als
   Fussnote weiter unten: Wer die Zusage liest, soll die Einschraenkung
   mitlesen muessen. */
.kernaussage__hinweis {
  padding-top: 0.7rem;
  border-top: 1px solid var(--accent-border);
  color: var(--text-muted);
}

/* ───────────────────────────────────────────────────────────────
   Bild-Album (Lightbox)
   ─────────────────────────────────────────────────────────────── */

/* Der Ausloeser ist ein Knopf, damit das Bild mit der Tastatur erreichbar ist.
   Er darf aber nicht wie ein Knopf aussehen — nur der Zeiger verraet ihn. */
.album-ausloeser {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-sm);
}
.album-ausloeser:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.album-ausloeser img {
  transition: transform 0.15s ease, border-color 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .album-ausloeser img {
    transition: none;
  }
}
.album-ausloeser:hover img {
  border-color: var(--accent-border);
}

/* Der Hintergrund der Seite soll nicht mitscrollen, solange das Album offen ist. */
body.album-offen {
  overflow: hidden;
}

/* ⚠️ MUSS vor der display-Angabe stehen und sie ueberstimmen: `.album { display:
   flex }` schlaegt die Browser-Regel `[hidden] { display: none }`, weil eine
   Klassenregel staerker wiegt als die Vorgabe des Browsers. Ohne diese Zeile lag
   das Overlay mit 94 % Deckkraft ueber JEDER Seite — ausgeliefert am 03.09.2026
   und erst im Screenshot aufgefallen. Die Pruefung davor hatte `element.hidden`
   abgefragt und true bekommen: Das Attribut sagt nichts darueber, ob CSS es
   respektiert. */
.album[hidden] {
  display: none;
}

.album {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(0.75rem, 0.5rem + 2vw, 2.5rem);
  background: rgba(4, 7, 16, 0.94);
  backdrop-filter: blur(3px);
}

.album__buehne {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  /* Dieselbe Falle eine Ebene hoeher — sonst waechst die Buehne mit dem Bild. */
  min-width: 0;
  max-width: 100%;
  /* Bild und Text teilen sich die Hoehe — der Text wird nie abgeschnitten,
     das Bild schrumpft stattdessen. */
  max-height: 100%;
  min-width: 0;
}

.album__bild {
  max-width: 100%;
  /* `min-height: 0` ist noetig, damit das Bild in einem Flex-Element wirklich
     schrumpfen darf — ohne das laeuft es auf schmalen Geraeten unten heraus. */
  min-height: 0;
  object-fit: contain;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
}

.album__text {
  max-width: 46rem;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-muted);
  overflow-y: auto;
}
.album__zaehler {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.album__schliessen,
.album__blaettern {
  flex: none;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  /* 44 px: die kleinste Flaeche, die sich auf einem Beruehrungsgeraet zuverlaessig
     treffen laesst. */
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.5rem;
}
.album__schliessen:hover,
.album__blaettern:hover {
  border-color: var(--accent-border);
  background: var(--bg-card-hover);
}
.album__schliessen:focus-visible,
.album__blaettern:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.album__schliessen {
  position: absolute;
  top: clamp(0.75rem, 0.5rem + 2vw, 2.5rem);
  right: clamp(0.75rem, 0.5rem + 2vw, 2.5rem);
}

/* Auf schmalen Geraeten stehen die Pfeile unter dem Bild statt daneben —
   seitlich blieben sonst rund 6 rem weniger Platz fuer das Bild selbst. */
@media (max-width: 48rem) {
  .album {
    flex-direction: column;
    justify-content: center;
  }
  .album__buehne {
    order: 1;
  }
  .album__blaettern--zurueck {
    order: 2;
  }
  .album__blaettern--vor {
    order: 3;
  }
  .album {
    padding-top: 4rem;
  }
}

/* Eingepasst ↔ Originalgroesse. Der Rahmen wird beim Umschalten scrollbar,
   damit sich ein breiter Screenshot auf einem schmalen Geraet schieben laesst. */
.album__rahmen {
  display: flex;
  min-height: 0;
  max-width: 100%;
  /* ⚠️ `min-width: 0` ist der Punkt, an dem es haengt: Ein Flex-Element schrumpft
     ohne diese Angabe NICHT unter seine Inhaltsbreite. Ohne sie wuchs der Rahmen
     in Originalgroesse auf 1128 px und ragte auf BEIDEN Seiten aus dem Fenster —
     die Raender waren unerreichbar, und der Scrollbalken entstand nie. */
  min-width: 0;
}
.album__rahmen--original {
  width: 100%;
  overflow: auto;
  /* Schwungvolles Schieben auf Beruehrungsgeraeten. */
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}
.album__bild--original {
  max-width: none;
  width: auto;
  height: auto;
  /* Nicht schrumpfen — sonst passt der Flex-Rahmen das Bild wieder ein und die
     Umschaltung bliebe wirkungslos. */
  flex: none;
}

/* Der Telefon-Screenshot im Taschenmonitor-Block. Schmaler als der Textblock —
   ein Hochkant-Bild in voller Spaltenbreite waere fast bildschirmhoch. */
.pocket-shot {
  margin: 1.2rem 0 0;
  max-width: 19rem;
}
.pocket-shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.5);
}
.pocket-shot figcaption {
  margin-top: 0.6rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
}