/* ==========================================================================
   nr87.de — KI-Automatisierung für kleine und mittlere Betriebe
   Gestaltung nach VORBILD-SYSTEM.md (Apple Store + Tesla, gemessen 21.10.2026),
   dazu designer-hausstil. Bei Widerspruch gewinnt VORBILD-SYSTEM.
   Regeln: Systemschrift 48/40/17, ruhige Fläche #F5F5F7, Text #1D1D1F statt
   Schwarz, EINE Akzentfarbe (#1A73E8) OHNE Verlauf, Ecken Kachel 18 px /
   Knopf 4 px, KEINE Schatten und keine Zier-Effekte, Abstände auf dem
   8-px-Raster, reduced-motion schaltet Bewegung ab.
   ========================================================================== */

:root {
  /* Farben (helles Thema — Kunden-Webseite nr87.de, Hausstil Abschnitt 1) */
  --grund:          #F5F5F7;   /* Apples ruhiges Hellgrau — VORBILD-SYSTEM §2 */
  --flaeche:        #FFFFFF;
  --flaeche-glas:   rgba(255, 255, 255, 0.82);  /* nur Kopfleiste (Glas wie apple.com) */
  --flaeche-leise:  #E8E8ED;   /* Zwischenfläche statt Schatten */
  --text:           #1D1D1F;   /* kein reines Schwarz */
  --text-leise:     #6E6E73;   /* 4,66:1 auf #F5F5F7, 5,07:1 auf #FFFFFF */
  --text-leise-2:   #5F5F66;   /* nur auf #E8E8ED: 5,19:1 */
  --akzent:         #1A73E8;   /* Flaechenfarbe, weisse Schrift 4,51:1 */
  --akzent-text:    #0B62D6;   /* Akzent ALS TEXT/Link: 5,17:1 auf #F5F5F7 */
  --akzent-tief:    #0B62D6;   /* nur für :hover, weisse Schrift 5,63:1 */
  --knopf-text:     #FFFFFF;
  --linie:          rgba(0, 0, 0, 0.10);

  /* Dunkler Kontrastabschnitt (KI-Bilder) */
  --dunkel:         #12161C;   /* VORBILD-SYSTEM §2, dunkler Grund */
  --dunkel-flaeche: #1E242C;   /* dunkle Karte */
  --dunkel-text:    #F5F5F7;
  --dunkel-leise:   #A6A9B1;   /* 7,72:1 auf #12161C */

  --r-klein:  4px;    /* sachlicher Knopf — Tesla-Regel */
  --r-mittel: 8px;
  --r-gross:  18px;   /* Kachel/Produktkarte — Apple-Regel */

  --t-schnell: 200ms;
  --t-normal:  320ms;
  --kurve:     cubic-bezier(0.16, 1, 0.3, 1);

  --breite: 1080px;
  --luft:   96px;    /* Abschnitts-Rhythmus: Vielfaches von 32 aus dem 8-px-Raster */
  --luft-xl: 128px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:          #12161C;   /* Najibs dunkler Grund */
    --flaeche:        #1E242C;   /* Najibs dunkle Karte */
    --flaeche-glas:   rgba(30, 36, 44, 0.82);
    --flaeche-leise:  #262D36;
    --text:           #F5F5F7;
    --text-leise:     #A6A9B1;
    --text-leise-2:   #A6A9B1;
    --akzent:         #8AB4F8;   /* Flaechenfarbe, dunkle Schrift 8,61:1 */
    --akzent-text:    #8AB4F8;   /* Akzent als Text: 8,61:1 auf #12161C */
    --akzent-tief:    #A9C8FA;   /* :hover, dunkle Schrift 10,65:1 */
    --knopf-text:     #12161C;
    --linie:          rgba(255, 255, 255, 0.12);
    --dunkel:         #12161C;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  /* Kein overflow-x: hidden am body! Gemessen am 21.10.2026: dadurch wird der
     body selbst zum Scrollbehälter, window.scrollY bleibt 0 und der
     IntersectionObserver für die Scroll-Einblendung feuert nicht mehr.
     Die Verläufe werden stattdessen am jeweiligen Abschnitt beschnitten. */
}

/* ---------- Typografie: wenige Größen, klare Hierarchie ---------- */

h1, h2, h3 {
  margin: 0 0 16px;
  font-weight: 500;              /* Tesla bleibt leise — nie 700 */
  letter-spacing: -0.003em;
  line-height: 1.1;
  text-wrap: balance;
}

/* VORBILD-SYSTEM §2: Seitentitel 48/52 w600 · Abschnitt 40/48 w500 · Karte 28/34 w500 */
h1 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -0.15px; line-height: 1.083; font-weight: 600; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.2; }
h3 { font-size: 1.75rem; line-height: 1.21; }

p { margin: 0 0 16px; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

/* Standard-Rand des figure-Elements wegnehmen. Bewusst als Element-Selektor:
   er muss von den figure-Klassen (.hero-figur, .figur) überstimmt werden
   können. Als Klasse hier definiert, hätte er die zentrierenden Ränder von
   .hero-figur aufgehoben — das Bild stand dadurch links statt mittig. */
figure { margin: 0; }

a { color: var(--akzent-text); }
strong, b { font-weight: 600; }

.bild-text {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-leise);
  letter-spacing: 0.01em;
  margin-top: 12px;
}

/* ---------- Layout ---------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 24px;
}

.huelle--schmal { max-width: 760px; }

.abschnitt { position: relative; padding: var(--luft) 0; }

.abschnitt--leise {
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.abschnitt--eng { padding: 48px 0; }

/* Dunkler Kontrastabschnitt: hier stehen die KI-Bilder */
.abschnitt--dunkel {
  background: var(--dunkel);
  color: var(--dunkel-text);
  border: 0;
  overflow: hidden;
}
/* Der frühere Strahlenkreis hinter diesem Abschnitt ist entfernt
   (VORBILD-SYSTEM: kein Zierrat) — die Deklaration ist deshalb geloescht,
   nicht nur ausgeblendet; ein offener Block hätte alle Regeln darunter
   verschluckt. */
.abschnitt--dunkel > .huelle { position: relative; }
.abschnitt--dunkel h2,
.abschnitt--dunkel h3,
.abschnitt--dunkel strong { color: var(--dunkel-text); }
.abschnitt--dunkel p,
.abschnitt--dunkel .bild-text,
.abschnitt--dunkel .bild-hinweis { color: var(--dunkel-leise); }

.abschnitt-kopf { margin-bottom: 48px; max-width: 68ch; }
.abschnitt-kopf p { color: var(--text-leise); margin-bottom: 0; font-size: 1.125rem; }
.abschnitt--dunkel .abschnitt-kopf p { color: var(--dunkel-leise); }

/* ---------- Kopfzeile: schmale Glasleiste ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--flaeche-glas);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--linie);
}
/* Kein Schatten beim Scrollen (VORBILD-SYSTEM: keine Schatten) — die
   Trennlinie der Kopfleiste wird lediglich deutlicher. */
.kopf--gescrollt { border-bottom-color: rgba(0, 0, 0, 0.22); }

.kopf .huelle {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;               /* VORBILD-SYSTEM: Navigationsleiste 48 px */
}

.marke {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
  border-radius: var(--r-klein);
  min-height: 44px;               /* Hausstil: Klickfläche mindestens 44 px */
  padding: 8px 10px 8px 0;
}
.marke:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.marke-zeichen {
  /* Bis Najib ein Zeichen freigibt, steht nur der Schriftzug
     (VORBILD-SYSTEM §5: kein erfundenes Logo). Das Pfeilzeichen im
     Akzentquadrat war eine Erfindung und ist deshalb ausgeblendet. */
  display: none;
}
.marke-zeichen svg { width: 15px; height: 15px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* Hausstil: Klickfläche mindestens 44 px */
  color: var(--text-leise);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 8px 12px;
  border-radius: var(--r-klein);
  transition: color var(--t-schnell) ease-out, background var(--t-schnell) ease-out;
}
.nav a:hover { color: var(--text); background: var(--flaeche-leise); }
.nav a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.knopf--kopf { padding: 8px 16px; font-size: 0.875rem; }

/* Handy: die Sprungmarken bleiben als scrollbare Zeile erhalten */
@media (max-width: 900px) {
  .kopf .huelle { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; gap: 8px 16px; }
  .marke { order: 1; }
  .knopf--kopf { order: 2; }
  .nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 6px 10px; }
  /* Rechts Luft lassen: sonst läuft der letzte Menüpunkt in die weiche Kante
     und wirkt abgeschnitten (gemessen: "Referenzen" endete genau im Verlauf). */
  .nav { padding-right: 32px; }
}

/* ---------- Knöpfe: genau EINE Hauptaktion je Ansicht ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;               /* Hausstil: Klickfläche mindestens 44 px */
  background-color: var(--akzent);
  color: var(--knopf-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: 12px 24px;
  border-radius: var(--r-klein);   /* Tesla: 4 px, bewusst fast eckig */
  border: 1px solid transparent;
  transition: background-color var(--t-schnell) ease-out, color var(--t-schnell) ease-out;
}
.knopf:hover { background-color: var(--akzent-tief); }
.knopf:active { background-color: var(--akzent-tief); }
.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.knopf--gross { padding: 16px 32px; font-size: 1.0625rem; }

.knopf--leise {
  background-color: transparent;
  color: var(--akzent-text);
  border: 1px solid var(--linie);
  box-shadow: none;
  font-weight: 500;
}
.knopf--leise:hover { background-color: var(--flaeche-leise); color: var(--text); }

/* ---------- Hero: EINE kurze, zentrierte Aussage ---------- */

.hero {
  position: relative;
  padding: var(--luft-xl) 0 var(--luft);
  text-align: center;
}
/* Der fruehere Strahlenkreis hinter dem Titel ist entfernt
   (VORBILD-SYSTEM: kein Zierrat). */

.hero-mitte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
}
.hero-mitte p { margin-left: auto; margin-right: auto; }
.hero-mitte .einleitung { max-width: 56ch; }

.hero-vorzeile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;             /* Label: 12 px, Grossbuchstaben, 0,6 px gesperrt */
  font-weight: 600;
  color: var(--akzent-text);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Zeichen eines laufenden Agenten: ruhiger Puls, kein Blinken */
.puls {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--akzent);
  flex: 0 0 auto;
}

.hero h1 { margin-bottom: 24px; }
.hero p.einleitung { font-size: 1.125rem; color: var(--text-leise); margin-bottom: 0; }

.hero-taten {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}

/* Bewusst schmaler als die Textmitte: ein 560 px breites Hochformat-Bild ragte
   über den ersten Bildschirm hinaus und ließ die Startansicht kopflastig wirken. */
.hero-figur { margin: 64px auto 0; max-width: 400px; }
.hero-bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-gross);
}

/* ---------- Karten: abgerundete Glasflächen ---------- */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: 32px;
  transition: border-color var(--t-normal) ease-out;
}
.karte h3 { margin-bottom: 8px; }
.karte p { color: var(--text-leise); margin-bottom: 0; }
.karte .karte-frage { color: var(--text); font-weight: 600; margin-bottom: 8px; }
.karte--flach { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; }

/* Kein Hüpfen, kein Schatten — nur die Kante wird beim Zeigen deutlicher. */
@media (hover: hover) {
  .karte:hover { border-color: rgba(0, 0, 0, 0.22); }
}

/* ---------- Leistungs-Kachel: Grafik oben, Link unten (VORBILD §3.3) ---------- */

/* Die Grafik erklärt den Vorgang, sie schmückt nicht — deshalb ohne Schrift
   darin: in einer schmalen Kachel würde sie unlesbar klein. Farbe der Linien
   ist die Textfarbe (currentColor), der eine wichtige Schritt bekommt die
   Akzentfarbe als Text — nicht die Flächenfarbe, die hat als Linie zu wenig
   Kontrast auf hellem Grund. */
.karte-grafik { margin: 0 0 20px; }
.karte-grafik svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 320px;
  color: var(--text-leise);
}
.karte-grafik .g-akzent { color: var(--akzent-text); stroke: var(--akzent-text); }

/* §3.3 verlangt je Kachel „Preis/Link". Solange es keine Paketpreise gibt,
   zeigt der eine Link jeder Kachel auf den Preisabschnitt. Gleicher Text,
   gleiche Stelle, gleiche Klickhöhe 44 px — wie Apple es bei Karten macht. */
.karte-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  color: var(--akzent-text);
  font-weight: 500;
  text-decoration: none;
}
.karte-link::after { content: "\203A"; margin-left: 6px; }
.karte-link:hover { text-decoration: underline; }
.karte-link:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------- Ablauf ----------
   Form nach VORBILD-SYSTEM §3 Zeile 59: „eine Zeile pro Position, Bedingung
   darunter in Grau". Die Positionszeile trägt den Namen, die Dauer steht als
   eigene graue Wertzeile darunter — sie ist ein Wert, kein Name.
   Gemessen 21.10.2026: vorher stand die Dauer in der Überschrift, dadurch war
   die Positionszeile bei 1440 px einzeilig (5 von 5), bei 390 px aber
   zweizeilig (5 von 5). Statt Blockluft ein ruhiger Zeilenabstand. */

.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte li {
  position: relative;
  padding: 0 0 20px 64px;
  border-left: 1px solid var(--linie);
  margin-left: 16px;
}
.schritte li:last-child { border-left-color: transparent; padding-bottom: 0; }
.schritte li::before {
  counter-increment: schritt;
  content: counter(schritt);
  position: absolute;
  left: -17px;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--knopf-text);
  font-size: 0.875rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.schritte h3 { margin-bottom: 4px; font-size: 1.0625rem; }
.schritte p { color: var(--text-leise); margin-bottom: 0; font-size: 0.9375rem; }
/* Wertzeile (Dauer/Bedingung) direkt unter der Positionszeile. Höhere
   Spezifität als „.schritte p", sonst greift dort margin-bottom: 0. */
.schritte p.schritt-wert { margin: 0 0 8px; font-weight: 500; }

/* ---------- Preise ---------- */

.pakete {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: start;
}
.paket {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: 32px;
}
/* Hervorhebung ohne Verlauf und ohne Schatten: die Kante traegt die Betonung. */
.paket--haupt { border: 1px solid var(--akzent); }
.paket-name { font-weight: 600; margin-bottom: 4px; }
.paket-preis { font-size: 1.0625rem; color: var(--text-leise); margin-bottom: 16px; }
.paket ul { margin: 0; padding-left: 20px; color: var(--text-leise); font-size: 0.9375rem; }
.paket li { margin-bottom: 8px; }
.paket li:last-child { margin-bottom: 0; }

.hinweis {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--flaeche-leise);
  border-radius: var(--r-mittel);
  font-size: 0.9375rem;
  color: var(--text-leise-2);
}
.hinweis strong { color: var(--text); }

/* ---------- Ehrlicher Platzhalter (Entwurf) ---------- */

.entwurf {
  border-left: 3px solid var(--akzent);
  padding: 8px 0 8px 24px;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* ---------- Zwei Spalten ---------- */

.zwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) { .zwei { grid-template-columns: 1fr; gap: 32px; } }

.zwei ul { margin: 0 0 16px; padding-left: 20px; }
.zwei li { margin-bottom: 8px; }
.zwei li:last-child { margin-bottom: 0; }

.ueber-bild {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-gross);
}

/* ---------- FAQ ---------- */

.faq { max-width: 72ch; }
.faq details { border-bottom: 1px solid var(--linie); padding: 20px 0; }
.faq details:first-child { border-top: 1px solid var(--linie); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.0625rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-radius: var(--r-klein);
  min-height: 44px;               /* Hausstil: Klickfläche mindestens 44 px */
  padding: 12px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-leise); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover::after { color: var(--akzent-text); }
.faq summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.faq details p { color: var(--text-leise); margin: 12px 0 0; }

/* ---------- Kontakt ---------- */

.kontakt-kasten {
  position: relative;
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: 64px 48px;
  text-align: center;
}
/* Strahlenkreis entfernt (VORBILD-SYSTEM: kein Zierrat). */
.kontakt-kasten > * { position: relative; }
.kontakt-kasten p { margin-left: auto; margin-right: auto; color: var(--text-leise); }
.kontakt-kasten h2 { margin-bottom: 16px; }
.kontakt-text { max-width: 56ch; font-size: 1.125rem; }
@media (max-width: 900px) { .kontakt-kasten { padding: 40px 24px; } }

.wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--linie);
  text-align: left;
}
.wege h3 { font-size: 1rem; margin-bottom: 4px; }
.wege p { font-size: 0.9375rem; color: var(--text-leise); margin-bottom: 8px; }
/* Hausstil: Klickfläche mindestens 44 px — gilt auch für Links im Fließtext,
   nicht nur für die Randspalten. Der E-Mail-Link war sonst nur 20 px hoch. */
.wege a, .kontakt-kasten a:not(.knopf), main a:not(.knopf) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
}

/* ---------- Fuß ---------- */

.fuss {
  border-top: 1px solid var(--linie);
  padding: 48px 0;
  color: var(--text-leise);
  font-size: 0.9375rem;
}
.fuss .huelle { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss a {
  color: var(--text-leise);
  text-decoration: none;
  border-radius: 4px;
  display: inline-flex;           /* Hausstil: Klickfläche mindestens 44 px */
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
}
.fuss a:hover { color: var(--text); text-decoration: underline; }
.fuss a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.fuss .klein { flex-basis: 100%; font-size: 0.8125rem; }

/* ---------- Einblick: die drei KI-Bilder im dunklen Abschnitt ---------- */

.bilder-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.bilder-reihe .figur { margin: 0; }
.szene-bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-gross);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--dunkel-flaeche);
}
.bilder-reihe .bild-text { margin-top: 12px; }
.bild-hinweis {
  margin-top: 32px;
  font-size: 0.8125rem;
  color: var(--dunkel-leise);
  max-width: 68ch;
}

/* ---------- Scroll-Inszenierung: ruhig, 14 px Versatz, 320 ms ---------- */

html.js [data-reveal] { opacity: 0; transform: translateY(14px); }
html.js [data-reveal].sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-normal) var(--kurve), transform var(--t-normal) var(--kurve);
}
/* Staffelung innerhalb einer Reihe — nur Übergangsverzögerung, keine Position */
html.js .karten > [data-reveal]:nth-child(2),
html.js .pakete > [data-reveal]:nth-child(2),
html.js .bilder-reihe > [data-reveal]:nth-child(2) { transition-delay: 80ms; }
html.js .karten > [data-reveal]:nth-child(3),
html.js .pakete > [data-reveal]:nth-child(3),
html.js .bilder-reihe > [data-reveal]:nth-child(3) { transition-delay: 160ms; }
html.js .karten > [data-reveal]:nth-child(4) { transition-delay: 240ms; }
html.js .schritte > [data-reveal]:nth-child(2) { transition-delay: 60ms; }
html.js .schritte > [data-reveal]:nth-child(3) { transition-delay: 120ms; }
html.js .schritte > [data-reveal]:nth-child(4) { transition-delay: 180ms; }
html.js .schritte > [data-reveal]:nth-child(5) { transition-delay: 240ms; }

/* ---------- Bewegung aus, wenn der Nutzer es so will ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Handy ---------- */

@media (max-width: 640px) {
  :root { --luft: 64px; --luft-xl: 96px; }
  .abschnitt-kopf { margin-bottom: 32px; }
  .karte, .paket { padding: 24px; }
  .hero-figur { margin-top: 48px; }
  .hero-taten .knopf { width: 100%; }
  .schritte li { padding-left: 48px; }
}

/* ---------- Druck ---------- */

@media print {
  .kopf { display: none; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Nachtrag 21.10.2026 — fehlende Klassen der Rechtsseiten
   impressum.html und datenschutz.html benutzen .h2-klein und
   .hinweis--entwurf. Beim Umbau auf den Apple-Look sind genau diese zwei
   Regeln verloren gegangen; die Seiten waren dadurch ungestaltet (Zwischen-
   überschriften in Fließtextgröße, kein Rand am Entwurfs-Hinweis).
   Gemessen, nicht geschätzt: werkzeuge/klassen_pruefen.py
   ========================================================================== */

/* Zwischenüberschrift in den Rechtstexten (kleiner als ein <h2>) */
.h2-klein { font-size: 1.125rem; line-height: 1.35; }

/* Entwurfs-Hinweis: erkennbar abgesetzt, gleiche Akzentfarbe wie .entwurf */
.hinweis--entwurf {
  border-left: 3px solid var(--akzent);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-bottom: 32px;
}