/* ═══════════════════════════════════════════════════════════
   webdesign.schoscho.at – style.css
   Showcase-Landingpage: Die Seite selbst ist die Referenz.

   Aufbau:
   1. Farbpalette & Basis
   1b. Betriebsurlaubs-Hinweisleiste
   2. Schwebende Bedienelemente (Nach-oben-Button, Schnellnavigation)
   3. Partikel-Hintergrund der Hero-Sektion
   4. Hero-Sektion (Headline, Subline, CTA, Scroll-Hinweis)
   5. Anfrage-Sektion (mehrstufiges Formular)
   6. USP-Sektion (Baukasten-Vergleich)
   6b. Vertrauens-Sektion
   6c. Vorteile-Sektion (Ihre Vorteile auf einen Blick)
   7. Leistungen-Sektion (Karten mit Detail-Ausklappung)
   8. Live-Demo-Sektion (Konfigurator + Vorher/Nachher-Slider)
   8a. Referenzen-Sektion (eigene Projekte als Screenshot-Karten)
   8b. Pflegewege-Sektion (Ihre Webseite ist fertig. Und dann?)
   8c. Kundenservice-Sektion
   9. Ablauf-Sektion (Timeline)
   10. FAQ-Sektion
   11. Über-mich-Sektion
   12. Scroll-Reveal (gemeinsame Klassen)
   13. Footer
   14. Rechtstexte (Impressum/Datenschutz, eigene Seiten)
   14b. 404-Fehlerseite
   15. Responsive
   16. Barrierefreiheit (reduzierte Bewegung)

   Neuaufbau 2026-07-19: Ablösung der bisherigen Cyberpunk-
   "Demnächst"-Seite durch die echte Landingpage laut Briefing
   (_projekt/Briefing_Landingpage_webdesign-schoscho-at.md).
   Der Cyberpunk-Stil bleibt exklusiv der Hauptseite schoscho.at
   vorbehalten – hier: dunkle, edle Basis + Flieder als Akzent.
   Erweitert 2026-07-20: USP-, Leistungen-, Ablauf- und FAQ-Sektion
   (Rest von Phase 1). Phase 2 ab 2026-07-20: Dark/Light-Umschalter,
   Live-Demo-Sektion (Konfigurator + Vorher/Nachher-Slider).
   Erweitert 2026-08-13 (Cowork-Masterpaket 2.0): Betriebsurlaubs-
   Hinweisleiste, Vorteile-Sektion, Pflegewege-Sektion und
   Kundenservice-Sektion neu ergänzt – siehe
   _projekt/Aenderungsplan_2026-08-13.md.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Farbpalette ─────────────────────────────────────────── */
/* Nur Dark-Theme (bewusste Entscheidung, kein Umschalter – siehe
   memory.md Abschnitt 6r). Die "-rgb"-Varianten sind dieselbe Farbe
   als "r,g,b"-Tripel für rgba()-Verläufe/Glows. */
:root {
  /* 2026-08-30: Basisfarben auf OKLCH umgestellt (Schritt 2/5 der
     Feature-Review, siehe memory.md). Rechnerisch exakt aus den
     bisherigen Hex-Werten umgerechnet (sRGB -> Linear -> OKLab ->
     OKLCH) und per Rückrechnung (OKLCH -> Hex) geprüft - optisch
     identische Farben, nur zukunftsfähigeres, wahrnehmungsgleich-
     mäßigeres Farbmodell. Die "-rgb"-Begleitvariablen (--flieder-rgb,
     --erfolg-rgb, --fehler-rgb) bleiben bewusst unverändert bestehen:
     sie werden an rund 40 Stellen im Stylesheet für rgba()-Verläufe/
     Glows verwendet - deren Umstellung wäre ein eigener, größerer
     Schritt mit entsprechend mehr Prüfaufwand, bewusst NICHT Teil
     dieser Änderung. */
  --bg-void:     oklch(20.2% 0.0183 274.9);  /* Anthrazit/Tiefblau, Basisfläche */
  --bg-void-tief:oklch(16.6% 0.0148 278.3);  /* für sanfte Tiefe in Verläufen */
  --bg-panel:    oklch(23.4% 0.0233 277.1);  /* Karten, Formular-Panel */
  --bg-panel-2:  oklch(26.0% 0.0227 277.3);  /* Eingabefelder, leicht abgesetzt */

  --flieder:      oklch(76.4% 0.0993 297.3); /* Akzentfarbe: Flieder, Ton "Hell" */
  --flieder-glanz:oklch(83.6% 0.0680 299.2); /* für Hover/Glow, etwas heller */
  --flieder-tief: oklch(52.7% 0.1488 292.3); /* für Text/Icons auf hellem Grund */
  --flieder-rgb:  185,165,234;

  --text-haupt:  oklch(95.9% 0.0095 299.2);  /* Fließtext auf dunklem Grund */
  --text-gedaempft: oklch(72.9% 0.0202 295.7);
  --text-leise:  oklch(60.7% 0.0260 299.0);  /* WCAG-geprüft: reicht für kleine Schrift auf --bg-void-tief */

  --grenze:      rgba(var(--flieder-rgb),0.16);
  --grenze-stark:rgba(var(--flieder-rgb),0.36);

  --erfolg:      oklch(81.5% 0.1121 158.8);  /* Live-Validierung: gültige Eingabe */
  --erfolg-rgb:  127,217,168;
  --fehler:      oklch(70.5% 0.1220 24.3);   /* Live-Validierung: Fehler */
  --fehler-rgb:  226,128,122;

  color-scheme: dark;
}

/* ── Reset & Basis ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; scroll-behavior: smooth; }

body {
  min-height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-void);
  color: var(--text-haupt);
  overflow-x: hidden;
  line-height: 1.5;
}

a { color: inherit; }

/* Wiederverwendete Akzent-Hervorhebung in Überschriften */
.akzent { color: var(--flieder); }

/* ── Moderne CSS-Features, Schritt 1/5 (Wunsch 2026-08-30, siehe
   memory.md "Feature-Review Vorlagensammlung"): bessere
   Zeilenumbrüche bei Überschriften/Fließtext + sanfter Übergang beim
   Wechsel zwischen den Seiten (index.html/impressum.html/
   datenschutz.html). Beides reine Verbesserung ohne Nachteil in
   nicht unterstützenden Browsern - dort gilt einfach der bisherige
   Normalzustand weiter, kein eigenes Fallback-CSS nötig.
   Korrektur (noch am selben Tag, Geris Live-Test): "pretty" stand
   zuerst nur auf dem Selektor "p" - die Karten-/FAQ-Texte auf dieser
   Seite stecken aber fast überall in <div>s (z.B. .vo-text,
   .faq-antwort), nicht in echten <p>-Absätzen, und blieben dadurch
   unberührt. text-wrap ist eine vererbte Eigenschaft - jetzt auf
   body gesetzt, damit sie automatisch bis in jedes verschachtelte
   Textelement durchgereicht wird. h1/h2/h3 überschreiben das für
   Überschriften weiterhin gezielt mit "balance". */
body { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

@view-transition {
  navigation: auto;
}

/* ── 1b. Betriebsurlaubs-Hinweisleiste ─────────────────────────
   Standardmäßig per [hidden] unsichtbar. Wird nur eingeblendet, wenn
   in js/betriebsurlaub.js STATUS auf 'vorab' oder 'aktuell' gesetzt
   ist (siehe Kommentar dort). Ganz oben, vor der Schnellnavigation. */
.betriebsurlaub-leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px;
  padding: 12px 24px;
  background: rgba(var(--flieder-rgb),0.12);
  border-bottom: 1px solid var(--grenze);
  font-size: 0.85rem; line-height: 1.5;
  color: var(--text-haupt);
  text-align: center;
}
.betriebsurlaub-leiste[hidden] { display: none; }
.betriebsurlaub-leiste .bu-link {
  flex: none;
  font-weight: 700;
  color: var(--flieder-glanz);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── 2. Schwebende Bedienelemente ────────────────────────────── */
body, section, footer, .formular-karte, .leistungs-karte,
.vergleich-karte, .auswahl-karte, .ablauf-nummer, .faq-item,
.hero-kicker, input, textarea, button, a {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* Nach-oben-Button: unten rechts, blendet sich erst nach dem
   Herunterscrollen ein (siehe js/nach-oben.js) */
.nach-oben-button {
  position: fixed;
  bottom: 18px; right: 18px;
  z-index: 50;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--grenze);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s ease;
}
.nach-oben-button.sichtbar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nach-oben-button:hover { border-color: var(--grenze-stark); }
.nach-oben-button svg {
  width: 19px; height: 19px;
  stroke: var(--flieder); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Schwebende Schnellnavigation (nur index.html) – ersetzt dort den
   einfachen .nach-oben-button durch Nach-oben-Button + Menü-Button
   mit Dropdown zu allen Sektionen. Vorlage: Geris marianne-Projekt
   (_projekt/floating-nav-standalone.html), Farben auf unser
   Flieder/Anthrazit-System übertragen. */
.float-nav {
  position: fixed;
  bottom: 18px; right: 18px;
  z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px;
}

/* Frosted-Glass, Schritt 3/5 (Wunsch 2026-08-30, siehe memory.md
   "Feature-Review Vorlagensammlung"): Nach-oben-Button, Menü-Button
   und Menü-Panel bekommen einen durchscheinenden statt vollständig
   deckenden Hintergrund + Weichzeichner, damit die schwebende
   Navigation beim Scrollen elegant über dem Inhalt schwebt statt nur
   solide dunkel zu wirken. Die Transparenzstufe kommt bewusst über
   color-mix() aus derselben --bg-panel-Variable (kein separater
   Hex-/RGB-Wert nötig) - Anschluss an die OKLCH-Umstellung aus
   Schritt 2. @supports-Fallback weiter unten sorgt dafür, dass
   Browser ohne backdrop-filter-Unterstützung stattdessen den
   bisherigen, vollständig deckenden Hintergrund bekommen (sonst
   bliebe dort nur ein zu durchsichtiges, schwer lesbares Element). */
.float-nav__oben, .float-nav__btn {
  background: color-mix(in oklch, var(--bg-panel) 75%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--grenze);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s ease;
}
/* Nach-oben-Button bleibt ein rundes Icon (Pfeil nach oben ist
   selbsterklärend). Der Menü-Button ist bewusst ein längliches,
   abgerundetes Feld MIT Textbeschriftung statt nur eines
   Burger-Icons – ältere Besucher erkennen ein reines Balken-Icon
   nicht immer als Navigation (Rückmeldung von Geri, 2026-07-20). */
.float-nav__oben {
  width: 44px; height: 44px;
  border-radius: 50%;
}
.float-nav__btn {
  height: 44px;
  padding: 0 18px 0 16px;
  border-radius: 22px;
  gap: 9px;
}
.float-nav__oben.sichtbar, .float-nav__btn.sichtbar {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.float-nav__oben:hover, .float-nav__btn:hover { border-color: var(--grenze-stark); }
.float-nav__oben svg, .float-nav__btn svg {
  width: 19px; height: 19px;
  stroke: var(--flieder); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s ease;
  flex: none;
}
.float-nav__btn-text {
  font-family: inherit;
  font-size: 0.86rem; font-weight: 600;
  color: var(--flieder-glanz);
  white-space: nowrap;
}
.float-nav__btn.offen svg { transform: rotate(90deg); }

.float-nav__menue {
  background: color-mix(in oklch, var(--bg-panel) 80%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--grenze);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  min-width: 230px;
}

/* Fallback für Browser ohne backdrop-filter-Unterstützung: wieder
   vollständig deckender Hintergrund statt zu durchsichtigem Element. */
@supports not (backdrop-filter: blur(1px)) {
  .float-nav__oben, .float-nav__btn, .float-nav__menue {
    background: var(--bg-panel);
  }
}
.float-nav__menue.offen {
  max-height: 70vh;
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
}
.float-nav__menue-kopf {
  padding: 13px 16px 9px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-leise);
  border-bottom: 1px solid var(--grenze);
}
.float-nav__menue a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  font-size: 0.86rem; font-weight: 500;
  color: var(--text-haupt);
  border-bottom: 1px solid var(--grenze);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.float-nav__menue a:last-child { border-bottom: none; }
.float-nav__menue a svg {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  opacity: 0.6;
}
.float-nav__menue a:hover { background: rgba(var(--flieder-rgb),0.08); color: var(--flieder-glanz); }
.float-nav__menue a.aktiv {
  background: rgba(var(--flieder-rgb),0.1);
  color: var(--flieder-glanz);
  font-weight: 600;
}
.float-nav__menue a.aktiv svg { opacity: 1; }
.float-nav__menue a.float-nav__hervorgehoben {
  background: rgba(var(--flieder-rgb),0.06);
  color: var(--flieder);
  font-weight: 600;
}

.sr-nur {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 3. Partikel-Hintergrund der Hero-Sektion ─────────────────
   Anders als bei der alten Cyberpunk-Seite gilt der Effekt hier
   NUR der Hero-Sektion (kein globales Grid/Scanlines) – dezent,
   wie im Briefing gefordert. */
.hero-sektion {
  position: relative;
  overflow: hidden;
  min-height: 100vh;   /* Fallback */
  min-height: 100svh;  /* stabil auf iOS/Android trotz Adressleiste */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 32px;
  padding: 100px 24px 90px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(var(--flieder-rgb),0.10), transparent 55%),
    linear-gradient(180deg, var(--bg-void) 0%, var(--bg-void-tief) 100%);
}

#heroCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

.hero-sektion > * { position: relative; z-index: 1; }

/* ── 4. Hero-Sektion: Inhalt ───────────────────────────────── */
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--flieder-glanz);
  background: rgba(var(--flieder-rgb),0.08);
  border: 1px solid var(--grenze);
  border-radius: 30px;
  padding: 8px 18px;
}
.hero-kicker::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--flieder-glanz);
  box-shadow: 0 0 8px var(--flieder-glanz);
}

.hero-titel {
  font-size: clamp(2rem, 5.6vw, 3.6rem);
  font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 16ch;
  /* Explizit statt nur geerbt von body – verhindert, dass die
     Überschrift im Light-Theme blass/kontrastarm wirkt, falls eine
     ältere zwischengespeicherte CSS-Version geladen wird (siehe
     memory.md Abschnitt 6l). */
  color: var(--text-haupt);
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 400;
  color: var(--text-gedaempft);
  line-height: 1.65;
  max-width: 46ch;
}

/* Der eine, wiederkehrende Conversion-Button */
.cta-button {
  display: inline-block;
  font-family: inherit;
  font-size: 1rem; font-weight: 600;
  color: var(--bg-void);
  background: var(--flieder);
  border: none; border-radius: 10px;
  padding: 18px 40px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 0 0 rgba(var(--flieder-rgb),0);
}
.cta-button:hover {
  background: var(--flieder-glanz);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px -8px rgba(var(--flieder-rgb),0.45);
}
.cta-button:active { transform: translateY(0) scale(0.98); }

/* Scroll-Hinweis: dezenter, wippender Pfeil.
   Sichtbar bewusst klein/leise, die Klickfläche (padding) ist aber
   deutlich größer als der Text – mindestens 44×44px Trefferfläche
   für Touch, siehe WCAG-Empfehlung für Zielgrößen. */
.scroll-hinweis {
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 26px;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-gedaempft); /* etwas präsenter als text-leise, aber weiterhin klar zweitrangig zum CTA-Button */
  text-decoration: none;
  border-radius: 30px;
  animation: hinweisWippen 1.8s ease-in-out infinite;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.scroll-hinweis:hover,
.scroll-hinweis:focus-visible {
  color: var(--flieder-glanz);
  background: rgba(var(--flieder-rgb),0.08);
}
.scroll-hinweis svg { width: 18px; height: 18px; stroke: currentColor; }
@keyframes hinweisWippen {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(9px); }
}

/* ── 5. Anfrage-Sektion: mehrstufiges Formular ────────────────── */
.anfrage-sektion {
  padding: 90px 24px 100px;
  background: var(--bg-void-tief);
}

.anfrage-kopf {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}
.anfrage-titel {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.anfrage-text {
  color: var(--text-gedaempft);
  font-size: 1rem; line-height: 1.65;
}

.formular-karte {
  /* Wunsch 2026-08-06: breiter (600 → 720px), damit sich Besucher am
     PC, iPad UND iPhone beim Ausfüllen wohlfühlen – 720px ist bewusst
     gewählt, weil auf einem iPad im Hochformat (768px Viewport, siehe
     .anfrage-sektion-Padding von 24px links/rechts) die Karte dadurch
     fast randlos die volle Breite nutzt, ohne über den Bildschirmrand
     zu gehen. Zweiter Effekt: die "zwei-spalten"-Auswahlraster (z. B.
     "Haben Sie schon eine Webseite?") bekommen dadurch je Spalte gut
     60px mehr Platz – längere Antworttexte (z. B. "Ja, aber
     überarbeitungswürdig") brechen dadurch deutlich seltener/weniger
     "komisch" um.
     Update 2026-08-06 (Screenshot-Vergleich mit der Leistungen-Sektion,
     die dort 1080px nutzt): nochmal auf 1080px verbreitert, auf
     Geris ausdrücklichen Wunsch nach Abwägen der Nachteile (einzelne
     Auswahlkarten/Textfelder würden sonst unproportioniert groß). Die
     Basis-Auswahlraster (.auswahl-grid ohne Modifikator, autofit mit
     minmax(230px,...)) regeln sich dadurch selbst auf mehr statt
     größere Spalten - bleibt also gut proportioniert. Für die feste
     "zwei-spalten"-Variante (z. B. Ja/Nein) und die Eingabefelder
     unten eigene Breitenbegrenzungen ergänzt, damit die dort NICHT
     einfach riesig/leer werden (siehe .auswahl-grid.zwei-spalten und
     .feld-gruppe input/textarea weiter unten). */
  max-width: 1080px;
  margin: 0 auto;
  background: var(--bg-panel);
  border: 1px solid var(--grenze);
  border-radius: 18px;
  padding: 40px 34px;
}

/* Einstiegs-Weiche vor Schritt 1 (Wunsch 2026-08-29, siehe memory.md):
   zwei bewusst gleich große, gleich gewichtete Buttons – keiner soll
   wie die "bessere"/empfohlene Option wirken. Lehnt sich optisch an
   .auswahl-karte an (gleiche Familie), aber zentriert und größer, da
   es hier nur zwei statt fünf/sechs Optionen sind. */
.formular-weiche { text-align: center; }
.weiche-frage {
  font-size: 1.15rem; font-weight: 700;
  margin-bottom: 22px;
}
.weiche-optionen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.weiche-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  text-align: center;
  background: var(--bg-panel-2);
  border: 1.5px solid var(--grenze);
  border-radius: 14px;
  padding: 28px 20px;
  cursor: pointer;
  color: var(--text-haupt);
  font-family: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.weiche-btn:hover {
  border-color: var(--grenze-stark);
  transform: translateY(-2px);
}
.weiche-icon {
  flex: none; width: 26px; height: 26px;
  stroke: var(--flieder); fill: none; stroke-width: 1.6;
  margin-bottom: 2px;
}
.weiche-titel { font-weight: 700; font-size: 1.05rem; }
.weiche-text { font-size: 0.85rem; color: var(--text-gedaempft); line-height: 1.4; }
/* "Vorteil: ..."-Hervorhebung – gleiche Farbfamilie wie die
   Hinweis-Badges .vo-hinweis/.ablauf-hinweis, aber mit normalem statt
   rundem Radius, da hier ganze Sätze statt kurzer Stichworte stehen
   (ein voller Pill-Radius würde bei Zeilenumbruch seltsam wirken). */
.weiche-vorteil {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem; font-weight: 600;
  color: var(--flieder-glanz);
  background: rgba(var(--flieder-rgb),0.08);
  border: 1px solid var(--grenze);
  border-radius: 10px;
  padding: 8px 12px;
}

/* Fortschrittsanzeige */
.fortschritt-kopf {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--text-leise);
}
.fortschritt-kopf .schritt-label { color: var(--flieder-glanz); font-weight: 600; }
.fortschritt-leiste {
  position: relative;
  height: 5px; border-radius: 4px;
  background: var(--bg-panel-2);
  overflow: hidden;
  margin-bottom: 34px;
}
.fortschritt-fuellung {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 33.3%;
  background: linear-gradient(90deg, var(--flieder-tief), var(--flieder));
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* Formular-Schritte: nur der aktive ist sichtbar/klickbar,
   Wechsel per sanftem Slide + Fade (siehe formular.js) */
.formular-schritt {
  display: none;
}
.formular-schritt.aktiv {
  display: block;
  animation: schrittEin 0.4s ease both;
}
@keyframes schrittEin {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.schritt-frage {
  font-size: 1.15rem; font-weight: 700;
  margin-bottom: 22px;
}
/* Kennzeichnung optionaler Schritte/Felder (Schritte 3–6) */
.optional-hinweis {
  display: inline-block;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-leise);
  background: var(--bg-panel-2);
  border: 1px solid var(--grenze);
  border-radius: 999px;
  padding: 3px 9px;
  vertical-align: middle;
  margin-left: 6px;
}

/* Mehrere Unterfragen auf einer Formularseite (z. B. Schritt 4 „Ausstattung") */
.formular-untergruppe { margin-bottom: 26px; }
.formular-untergruppe:last-child { margin-bottom: 8px; }
.unter-frage {
  font-size: 0.88rem; font-weight: 600;
  color: var(--text-haupt);
  margin-bottom: 10px;
}

/* Auswahlkarten (Schritt 1 + 2) */
.auswahl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
/* Wunsch 2026-08-06: eigene Breitenbegrenzung + Zentrierung, seit die
   Formular-Karte auf 1080px verbreitert wurde. Ohne diese Bremse würde
   z. B. die Ja/Nein-Frage (nur 2 Karten mit je einer Textzeile) auf
   knapp 500px pro Karte aufgeblasen - wirkt dann leer statt großzügig.
   Das Basis-.auswahl-grid (auto-fit/minmax) braucht diese Bremse
   nicht, weil es bei mehr Platz automatisch mehr statt größere Spalten
   bildet. */
.auswahl-grid.zwei-spalten {
  grid-template-columns: repeat(2, 1fr);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
/* Dichtere Variante für Gruppen mit vielen/kurzen Optionen
   (Ausstattung, typspezifische Mehrfachauswahl).
   Wunsch 2026-08-06 (Live-Test iPad/PC): Mindestbreite von 160px auf
   200px angehoben. Ursache des gemeldeten Umbruch-Problems war NICHT
   zu wenig Höhe (die Karten dürfen ohnehin beliebig viele Zeilen
   haben, siehe min-height:0 unten), sondern zu wenig BREITE – bei
   z. B. 5–6 Karten pro Reihe blieben nur noch ~140px Textbreite,
   sodass selbst kurze Wörter wie "Praxis" oder "Anbindung" von der
   (bewusst aktiven, siehe unten) Silbentrennung zerlegt wurden. Bei
   200px min. passen weiterhin viele Karten pro Reihe (auto-fit
   reduziert die Spaltenzahl bei Bedarf automatisch), aber jede
   einzelne Karte hat spürbar mehr Luft für ihren Titel. */
.auswahl-grid.dicht {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.auswahl-grid.dicht .auswahl-karte { padding: 11px 12px; min-height: 0; }
.auswahl-grid.dicht .a-icon { width: 18px; height: 18px; }
/* Wunsch 2026-08-06 (Screenshot-Feedback "Referenzsei-te"): Silbentrennung
   (hyphens:auto) nur noch hier bei der schmalen "dicht"-Variante, wo
   sie für echte lange Wörter ohne Leerzeichen (z. B.
   "überarbeitungswürdig") gebraucht wird, um nicht über den Kartenrand
   zu laufen. Bei den breiteren Standard-Karten (.a-titel Basisregel
   weiter unten) macht sie mehrwortige Titel wie "Ja, ich habe eine
   Referenzseite" unnötig hässlich (trennt mitten im letzten Wort statt
   es einfach als Ganzes in die nächste Zeile umzubrechen). */
.auswahl-grid.dicht .a-titel { font-size: 0.85rem; margin-bottom: 0; hyphens: auto; }

.auswahl-karte {
  display: flex; align-items: flex-start; gap: 12px;
  text-align: left;
  background: var(--bg-panel-2);
  border: 1.5px solid var(--grenze);
  border-radius: 12px;
  /* Wunsch 2026-08-06: etwas großzügiger (war 16px 16px) – passt zur
     verbreiterten Formular-Karte und gibt am Touchscreen mehr Fläche. */
  padding: 18px 18px;
  /* Wunsch 2026-08-06 (Screenshot-Feedback): ohne Mindesthöhe wirkt
     eine Karte mit kurzem Text (z. B. "Sonstiges"/"Erzählen Sie mir
     davon") niedriger als die anderen, sobald sie allein in ihrer
     Grid-Reihe steht (Grid richtet Zeilenhöhe nur INNERHALB einer
     Reihe aneinander aus – bei einer Einzelkarte gibt es nichts zum
     Angleichen). Fester Wert statt Angleichung an Nachbarn, damit die
     Höhe unabhängig von der zufälligen Zeilen-Position immer gleich
     bleibt. 104px orientiert sich an einer typischen Karte mit
     zweizeiligem Beschreibungstext – kürzere Karten bekommen dadurch
     etwas Luft unten, längere wachsen wie gehabt über den Mindestwert
     hinaus. Für die "dicht"-Variante (viele kurze Optionen ohne
     Beschreibungstext) bewusst wieder aufgehoben, siehe oben. */
  min-height: 104px;
  cursor: pointer;
  color: var(--text-haupt);
  font-family: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.auswahl-karte:hover {
  border-color: var(--grenze-stark);
  transform: translateY(-2px);
}
.auswahl-karte.gewaehlt {
  border-color: var(--flieder);
  background: rgba(var(--flieder-rgb),0.08);
  box-shadow: 0 0 0 1px var(--flieder) inset;
}
.auswahl-karte .a-icon {
  flex: none; width: 22px; height: 22px;
  stroke: var(--flieder); fill: none; stroke-width: 1.6;
  margin-top: 2px;
}
/* Textspalte muss im Flex-Layout aktiv schrumpfen dürfen (sonst
   erzwingt ein einzelnes langes Wort wie "überarbeitungswürdig"
   die volle Breite und läuft über den Kartenrand hinaus). */
.auswahl-karte > div { min-width: 0; }
.auswahl-karte .a-titel {
  font-weight: 600; font-size: 0.95rem; margin-bottom: 3px;
  /* hyphens:auto hier bewusst NICHT gesetzt (siehe .auswahl-grid.dicht
     .a-titel oben) - overflow-wrap/word-break bleiben als Notbremse
     für den (bei diesen breiteren Karten unwahrscheinlichen) Fall
     eines einzelnen zu langen Worts ohne Leerzeichen. */
  overflow-wrap: break-word; word-break: break-word;
}
.auswahl-karte .a-text {
  font-size: 0.82rem; color: var(--text-gedaempft); line-height: 1.4;
  overflow-wrap: break-word; word-break: break-word;
}

/* Erweiterbares Feld (z. B. bestehende Webseiten-URL bei "Ja") */
.erweiterung {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, margin-top 0.35s ease;
}
.erweiterung.offen { max-height: 120px; margin-top: 16px; }

/* Textfelder */
.feld-gruppe { margin-bottom: 18px; }
.feld-gruppe label {
  display: block;
  font-size: 0.82rem; color: var(--text-gedaempft);
  margin-bottom: 7px;
}
.feld-gruppe input[type="text"],
.feld-gruppe input[type="email"],
.feld-gruppe input[type="tel"],
.feld-gruppe input[type="url"],
.feld-gruppe input[type="date"],
.feld-gruppe textarea {
  width: 100%;
  /* Wunsch 2026-08-06: Deckel gegen die 1080px-Kartenbreite - ein
     einzeiliges Eingabefeld über die volle Kartenbreite wirkt eher
     seltsam als großzügig, 560px bleibt komfortabel lesbar/tippbar
     und füllt auf schmaleren Bildschirmen (Handy/iPad) weiterhin die
     volle verfügbare Breite (width:100% greift dort, weil der
     Container selbst schon schmaler als 560px ist). */
  max-width: 560px;
  font-family: inherit; font-size: 0.95rem;
  color: var(--text-haupt);
  background: var(--bg-panel-2);
  border: 1.5px solid var(--grenze);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.feld-gruppe textarea { resize: vertical; min-height: 90px; }
/* Wunsch 2026-08-06 (Live-Test-Feedback): Das Datumsfeld
   ("Gewünschtes Datum" bei Fixtermin) war bei der Feldliste oben
   bis jetzt vergessen worden und blieb dadurch beim winzigen,
   unformatierten Browser-Standard hängen - auf iPad nur ein kaum
   sichtbarer grauer Balken, am PC ein unauffällig kleines Feld ohne
   erkennbaren Hinweis, dass hier etwas einzutragen ist. Jetzt in der
   Liste oben mit dabei (volle Feldbreite/-höhe, Rahmen, dunkler
   Hintergrund wie alle anderen Felder). Zusätzlich: eigene
   Mindesthöhe, da native Datums-Eingaben (v. a. Safari/iOS) sonst
   trotz Padding kompakter bleiben als Text-Eingaben, sowie
   color-scheme:dark, damit der native Kalender-Button selbst hell
   auf dunklem Grund erscheint statt kaum sichtbar dunkel-auf-dunkel
   (globales color-scheme:dark in :root reicht dafür allein nicht in
   jedem Browser). */
.feld-gruppe input[type="date"] {
  min-height: 46px;
  color-scheme: dark;
  cursor: pointer;
}
/* Wunsch 2026-08-06 (Live-Test-Feedback Runde 2): Das Feld selbst ist
   jetzt klar als Eingabefeld erkennbar, aber Geri wies darauf hin,
   dass der kleine Kalender-Button rechts (öffnet die native
   Datumsauswahl als Alternative zum Eintippen) nicht gleich als
   eigenes, klickbares Werkzeug auffällt. Der Button bekommt daher
   eine eigene, sichtbar abgesetzte "Chip"-Fläche in der Akzentfarbe
   (Hintergrund + abgerundete Ecken) statt nur als nacktes kleines
   Icon zu wirken, plus deutlich mehr Größe. Nur für
   Chrome/Edge/Safari (auch iPad) stylebar – Firefox nutzt weiterhin
   sein eigenes UI-Icon, das dort von Haus aus schon gut erkennbar
   ist, die Regel greift dort einfach nicht (kein Fehler). */
.feld-gruppe input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 6px;
  margin-right: -2px;
  border-radius: 7px;
  background-color: rgba(var(--flieder-rgb), 0.16);
  zoom: 1.35;
  transition: background-color 0.18s ease;
}
.feld-gruppe input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(var(--flieder-rgb), 0.28);
}
.feld-gruppe input:focus,
.feld-gruppe textarea:focus {
  outline: none;
  border-color: var(--flieder);
  box-shadow: 0 0 0 3px rgba(var(--flieder-rgb),0.18);
}
/* Live-Validierung: grün bei gültiger Eingabe (nach Verlassen des Felds) */
.feld-gruppe input.gueltig,
.feld-gruppe textarea.gueltig {
  border-color: var(--erfolg);
  box-shadow: 0 0 0 3px rgba(var(--erfolg-rgb),0.15);
}
.feld-gruppe input.ungueltig,
.feld-gruppe textarea.ungueltig {
  border-color: var(--fehler);
  box-shadow: 0 0 0 3px rgba(var(--fehler-rgb),0.15);
}
.feld-fehlertext {
  display: none;
  font-size: 0.78rem; color: var(--fehler);
  margin-top: 6px;
}
.feld-gruppe.zeigt-fehler .feld-fehlertext { display: block; }

/* DSGVO-Checkbox */
.dsgvo-zeile {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 26px;
  font-size: 0.82rem; color: var(--text-gedaempft); line-height: 1.5;
  /* Wunsch 2026-08-06: gleicher Grund wie bei den Eingabefeldern oben -
     der DSGVO-Fließtext soll bei 1080px Kartenbreite nicht zu einer
     einzigen, sehr langen Zeile werden. */
  max-width: 560px;
}
.dsgvo-zeile input {
  margin-top: 3px; flex: none;
  width: 16px; height: 16px;
  accent-color: var(--flieder);
}
.dsgvo-zeile a { color: var(--flieder-glanz); text-decoration: underline; }

/* Honeypot: für Menschen unsichtbar, für Formulare/Screenreader
   nicht ansprechbar – reines Spam-Fallenfeld */
.hp-feld {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Navigation innerhalb des Formulars */
.schritt-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 8px;
}
.btn-zurueck {
  font-family: inherit; font-size: 0.85rem;
  color: var(--text-gedaempft);
  background: none; border: none;
  cursor: pointer;
  /* Wunsch 2026-08-06: größere Tipp-Fläche (war 10px 4px) - am iPad/
     iPhone leichter zu treffen, ohne den zurückhaltenden Text-Link-
     Look zu verlieren. */
  padding: 12px 10px;
  border-radius: 8px;
  transition: color 0.15s ease;
}
.btn-zurueck:hover { color: var(--text-haupt); }
/* Zurück-Link auf Schritt 1 (Wunsch 2026-08-30): steht allein vor der Frage,
   nicht in .schritt-nav - Randausgleich, damit der Text bündig mit der
   Frage darunter beginnt (gleicht die 10px Innenabstand von .btn-zurueck
   aus), plus etwas Luft nach unten. */
.schritt1-zurueck { display: block; margin: -12px 0 4px -10px; }
.btn-zurueck:disabled { visibility: hidden; }

.schritt-nav-rechts { display: flex; align-items: center; gap: 18px; }

.btn-ueberspringen {
  font-family: inherit; font-size: 0.82rem;
  color: var(--text-leise);
  background: none; border: none;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
  /* Wunsch 2026-08-06: größere Tipp-Fläche (war 10px 2px), gleiches
     Prinzip wie bei .btn-zurueck. */
  padding: 12px 10px;
  border-radius: 8px;
  transition: color 0.15s ease;
}
.btn-ueberspringen:hover { color: var(--text-gedaempft); }

.btn-weiter, .btn-absenden {
  font-family: inherit; font-weight: 600;
  color: var(--bg-void);
  background: var(--flieder);
  border: none; border-radius: 10px;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
  /* Wunsch 2026-08-06: kräftiger/breiter (war 0.92rem, Padding 13px
     30px) – wirkt am Touchscreen "griffiger" und der Text (z. B.
     "Anfrage absenden") hat mehr Luft. Dazu ein dezenter, dauerhafter
     Glow (siehe Absprache: statischer Glow statt Dauer-Pulsieren, das
     bei 7 Formularschritten auf Dauer eher stören würde) – lenkt den
     Blick klar auf den nächsten Schritt. */
  font-size: 0.98rem;
  padding: 16px 40px;
  box-shadow: 0 0 22px rgba(var(--flieder-rgb),0.28);
}
.btn-weiter:hover, .btn-absenden:hover {
  background: var(--flieder-glanz);
  transform: translateY(-1px);
  box-shadow: 0 0 34px rgba(var(--flieder-rgb),0.42);
}
.btn-weiter:disabled {
  opacity: 0.4; cursor: not-allowed; transform: none;
  box-shadow: none;
}

/* Schritt 4/5 (Wunsch 2026-08-30, siehe memory.md "Feature-Review
   Vorlagensammlung"): Absenden-Button optisch gesperrt, solange ein
   Pflichtfeld in Schritt 7 (Name, E-Mail, DSGVO-Zustimmung) ungültig
   bzw. nicht angehakt ist - reine CSS-Ergänzung zusätzlich zur
   bestehenden JS-Prüfung beim tatsächlichen Absenden (siehe
   formular.js, submit-Listener), die unverändert bleibt und weiterhin
   die eigentliche Absicherung ist: pointer-events:none verhindert nur
   die Maus-/Touch-Bedienung, ein Tastatur-Enter auf dem fokussierten
   Button würde weiterhin vom bestehenden JS abgefangen. Gleiche Optik
   wie .btn-weiter:disabled oben, zur Wiedererkennung. Scope bewusst
   auf [data-schritt="7"] begrenzt, nicht das ganze Formular - dort
   liegen die einzigen relevanten Pflichtfelder für diesen Button. */
.formular-schritt[data-schritt="7"]:has(input:required:invalid) .btn-absenden {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Tastendruck-Blitz (Wunsch 2026-08-06, gleiches Prinzip wie bereits
   bewährt auf 100.schoscho.at): garantiert sichtbare, "spielerische"
   Druck-Rückmeldung für ALLE Formular-Buttons (Auswahl-Karten,
   Weiter/Zurück/Überspringen/Absenden) – siehe pointerdown-Logik in
   formular.js (ein einziger delegierter Listener für alle Buttons im
   Formular, Klasse bleibt per festem 250ms-Timeout mindestens so lange
   sichtbar, unabhängig von der tatsächlichen Tipp-Dauer). Zwei
   Endzustände je nach Button: die Haupt-Buttons haben einen
   dauerhaften Glow (siehe oben) und kehren dahin zurück
   (formularBlitzGlow), alle anderen haben normalerweise gar keinen
   Schatten und kehren zu "nichts" zurück (formularBlitz) – dadurch
   kein sichtbarer "Sprung", wenn die Klasse nach 250ms wieder entfernt
   wird. */
.formular-karte button.tastendruck {
  transform: scale(0.95);
  transition: transform 0.08s ease-out;
  animation: formularBlitz 0.25s ease-out;
}
.formular-karte .btn-weiter.tastendruck,
.formular-karte .btn-absenden.tastendruck {
  animation-name: formularBlitzGlow;
}
@keyframes formularBlitz {
  0%   { box-shadow: 0 0 34px var(--flieder-glanz), 0 0 70px rgba(var(--flieder-rgb),0.5); }
  100% { box-shadow: 0 0 0 rgba(var(--flieder-rgb),0); }
}
@keyframes formularBlitzGlow {
  0%   { box-shadow: 0 0 34px var(--flieder-glanz), 0 0 70px rgba(var(--flieder-rgb),0.5); }
  100% { box-shadow: 0 0 22px rgba(var(--flieder-rgb),0.28); }
}

/* Erfolgs-/Fehler-Ansicht nach dem Absenden */
.formular-ergebnis {
  display: none;
  text-align: center;
  padding: 20px 0 6px;
}
.formular-ergebnis.aktiv { display: block; animation: schrittEin 0.4s ease both; }
.formular-ergebnis .e-icon {
  width: 46px; height: 46px;
  margin: 0 auto 18px;
  stroke: var(--flieder); fill: none; stroke-width: 1.6;
}
.formular-ergebnis h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.formular-ergebnis p { color: var(--text-gedaempft); font-size: 0.92rem; line-height: 1.6; }
.formular-ergebnis.fehler .e-icon { stroke: var(--fehler); }
.formular-ergebnis a.mail-link { color: var(--flieder-glanz); }
.fehler-detail {
  margin-top: 10px;
  font-size: 0.78rem; color: var(--text-leise);
  font-family: 'Courier New', monospace;
}
.fehler-detail:empty { display: none; }

/* Erfolgs-Dialog (Wunsch 2026-08-30, Feature-Review Vorlagensammlung,
   Schritt 5/5): natives <dialog> statt eigenem Overlay-Markup - Fokusfalle,
   ESC-zum-Schließen und die Top-Layer-Darstellung kommen dadurch kostenlos
   vom Browser. Die Ein-/Ausblend-Animation kommt allein von @starting-style
   + der Übergangsdeklaration unten, ganz ohne JavaScript (Vorbild: Vorlage
   hinweise-bei-klick-starting-style.html aus der Vorlagensammlung). Rein
   additiv zu #ergebnisErfolg oben - siehe dortiger Kommentar.
   WICHTIG (Korrektur nach Live-Test, Geris "doppelt prüfen"-Vorgabe): Die
   Vorlage selbst verwendet für die Basis-Regel den nackten Selektor
   ("dialog {...}") und für @starting-style den spezifischeren Selektor mit
   [open] ("dialog[open] {...}"). Im Live-Test in einem aktuellen Chromium
   blieb der Dialog dadurch dauerhaft bei den Start-Werten (opacity:0) hängen
   - unsichtbar! Grund: [open] erhöht die Spezifität, wodurch die eigentlich
   nur für den ersten Frame gedachte @starting-style-Regel die Basis-Regel
   dauerhaft überstimmt. Fix: Basis- und @starting-style-Regel verwenden
   hier bewusst denselben Selektor ".erfolg-dialog[open]" - mehrfach live
   getestet (Öffnen- UND Schließen-Übergang), funktioniert zuverlässig. */
.erfolg-dialog[open] {
  /* Korrektur (Geris Live-Test, 2026-08-30): Die globale Reset-Regel
     "*, *::before, *::after { margin: 0; }" (siehe weiter oben in dieser
     Datei) setzt ungewollt auch das "margin: auto", auf das sich der
     Browser für die automatische Zentrierung eines modalen <dialog>
     verlässt (UA-Regel: position:fixed + inset-block:0 + margin:auto).
     Ohne dieses Gegenstück klebt der Dialog links oben in der Ecke -
     genau das hat Geri live gesehen. Deshalb hier explizit wieder
     gesetzt. */
  margin: auto;
  background: var(--bg-panel);
  color: var(--text-haupt);
  border: 1px solid var(--grenze-stark);
  border-radius: 18px;
  padding: 32px 30px 28px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);

  /* Zielzustand: sichtbar, an Ort und Stelle */
  opacity: 1;
  transform: translateY(0) scale(1);

  /* display/overlay müssen mit-transitioniert werden, sonst springt der
     Dialog ohne Animation weg/heran (siehe MDN @starting-style). */
  transition: opacity 0.3s ease, transform 0.3s ease,
              display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}
@starting-style {
  .erfolg-dialog[open] { opacity: 0; transform: translateY(16px) scale(0.96); }
}
/* Zustand beim Schließen (kein [open] mehr): wieder unsichtbar */
.erfolg-dialog:not([open]) {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
}
.erfolg-dialog[open]::backdrop {
  background: rgba(10, 8, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 1;
  transition: opacity 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}
@starting-style {
  .erfolg-dialog[open]::backdrop { opacity: 0; }
}
.erfolg-dialog .e-icon {
  width: 46px; height: 46px;
  margin: 0 auto 16px;
  stroke: var(--flieder); fill: none; stroke-width: 1.6;
}
.erfolg-dialog h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; }
.erfolg-dialog p { color: var(--text-gedaempft); font-size: 0.9rem; line-height: 1.6; margin: 0 0 22px; }
.erfolg-dialog-schliessen {
  font-family: inherit; font-weight: 600; font-size: 0.85rem;
  color: var(--bg-void);
  background: var(--flieder);
  border: none; border-radius: 10px;
  padding: 11px 26px;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}
.erfolg-dialog-schliessen:hover { background: var(--flieder-glanz); transform: translateY(-1px); }

/* ── 6. USP-Sektion: Baukasten-Vergleich ──────────────────────
   Umschalter zwischen zwei Ansichten (Baukasten / Individual-
   programmierung) statt einer starren Gegenüberstellung – macht
   den Unterschied erlebbar statt nur zu behaupten. */
.usp-sektion {
  padding: 100px 24px 90px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.sektion-titel {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.sektion-intro {
  color: var(--text-gedaempft);
  font-size: 1rem; line-height: 1.65;
  max-width: 52ch; margin: 0 auto 40px;
}

.vergleich-umschalter {
  display: inline-flex;
  background: var(--bg-panel);
  border: 1px solid var(--grenze);
  border-radius: 30px;
  padding: 5px;
  margin-bottom: 30px;
}
.u-tab {
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--text-gedaempft);
  background: none; border: none; border-radius: 24px;
  padding: 11px 24px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.u-tab:hover:not(.aktiv) {
  background: rgba(var(--flieder-rgb),0.1);
  color: var(--text-haupt);
}
.u-tab.aktiv {
  background: var(--flieder);
  color: var(--bg-void);
}

.vergleich-karte {
  background: var(--bg-panel);
  border: 1px solid var(--grenze);
  border-radius: 16px;
  padding: 34px 30px;
  text-align: left;
}
.vergleich-ansicht { display: none; }
.vergleich-ansicht.aktiv {
  display: block;
  animation: schrittEin 0.35s ease both;
}
.vergleich-liste { list-style: none; }
.vergleich-liste li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.95rem; line-height: 1.6;
  color: var(--text-haupt);
  padding: 10px 0;
  border-bottom: 1px solid var(--grenze);
}
.vergleich-liste li:last-child { border-bottom: none; }
.v-icon {
  flex: none; width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
  margin-top: 1px;
}
.v-icon.minus { background: rgba(var(--fehler-rgb),0.14); color: var(--fehler); }
.v-icon.plus  { background: rgba(var(--flieder-rgb),0.16); color: var(--flieder); }

/* ── 6b. Vertrauens-Sektion (Design & Animation, Responsive, ─────
   Performance, Sichtbarkeit, Kontakt & Formulare, Sicherheit).
   Übernommen (inhaltlich neu formuliert, Flieder-Design statt
   Cyberpunk-Neon) von der alten Demnächst-Seite auf Wunsch von Geri,
   siehe memory.md Abschnitt 6k. Bewusst kompakt und ohne
   Klapp-Mechanik – reine Vertrauens-/Qualitätsargumente, direkt nach
   dem Baukasten-Vergleich, bevor es konkret um Leistungen geht. */
.vertrauen-sektion {
  padding: 70px 24px 90px;
  max-width: 1080px;
  margin: 0 auto;
}
.vertrauen-grid {
  display: grid;
  /* Min-Breite bewusst wie .leistungen-grid gewählt: bei
     max-width:1080px passen dadurch genau 3 Spalten (nicht 4) –
     bei 6 Karten ergibt das die gewünschten zwei Dreierreihen
     statt einer unruhigen 4+2-Aufteilung. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.vertrauen-karte {
  background: var(--bg-panel);
  border: 1px solid var(--grenze);
  border-radius: 14px;
  padding: 22px 22px 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.vertrauen-karte:hover {
  border-color: var(--grenze-stark);
  transform: translateY(-3px);
}
.vertrauen-karte .v-titel-icon {
  width: 22px; height: 22px;
  stroke: var(--flieder); fill: none; stroke-width: 1.7;
  margin-bottom: 12px;
}
.vertrauen-karte .v-titel {
  font-size: 0.95rem; font-weight: 700;
  margin-bottom: 6px;
}
.vertrauen-karte .v-text {
  font-size: 0.85rem; line-height: 1.6;
  color: var(--text-gedaempft);
}

/* ── 6c. Vorteile-Sektion: "Ihre Vorteile auf einen Blick" ──────
   Ergänzt die Vertrauens-Sektion oben (6b, technische Qualitäts-
   merkmale) um die sechs Kundenvorteile aus dem Cowork-Masterpaket
   2.0 (2026-08-13) – Geschäftsmodell/Eigentum statt Technik, daher
   bewusst als eigene, betitelte Sektion statt Vermischung mit 6b.
   2026-08-17: eigenes Hintergrundband (--bg-void-tief) ergänzt, damit
   die zwölf Karten von 6b+6c direkt hintereinander nicht wie eine
   einzige, zu lange Wand aus Argumenten wirken (Reihenfolge-Check mit
   Geri). Gleiches Muster wie Anfrage-Sektion/Kundenservice-Sektion/
   Footer: Breitenbegrenzung liegt jetzt auf einem inneren Wrapper
   (.vorteile-inhalt), die Sektion selbst ist volle Breite mit Farbe. */
.vorteile-sektion {
  padding: 90px 24px;
  background: var(--bg-void-tief);
}
.vorteile-inhalt {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.vorteile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 44px;
  text-align: left;
}
.vorteile-karte {
  background: var(--bg-panel);
  border: 1px solid var(--grenze);
  border-radius: 14px;
  padding: 22px 22px 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.vorteile-karte:hover {
  border-color: var(--grenze-stark);
  transform: translateY(-3px);
}
.vorteile-karte .vo-icon {
  width: 22px; height: 22px;
  stroke: var(--flieder); fill: none; stroke-width: 1.7;
  margin-bottom: 12px;
}
.vorteile-karte .vo-titel {
  font-size: 0.95rem; font-weight: 700;
  margin-bottom: 6px;
}
.vorteile-karte .vo-text {
  font-size: 0.85rem; line-height: 1.6;
  color: var(--text-gedaempft);
}
/* Wunsch 2026-08-18: kleines, gut sichtbares Badge für den
   Kleinunternehmer-USt-Vorteil in der Kachel "Transparent kalkuliert" –
   Verkaufsargument soll stärker ins Auge fallen als reiner Fließtext.
   Gleiches Pill-Muster wie .ablauf-hinweis (Timeline-Sektion), nur auf
   die Vorteile-Karte skaliert. */
.vorteile-karte .vo-hinweis {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--flieder-glanz);
  background: rgba(var(--flieder-rgb),0.08);
  border: 1px solid var(--grenze);
  border-radius: 20px;
  padding: 5px 14px;
}

/* ── 7. Leistungen-Sektion ─────────────────────────────────────── */
.leistungen-sektion {
  padding: 90px 24px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 44px;
  text-align: left;
}
.leistungs-karte {
  background: var(--bg-panel);
  border: 1px solid var(--grenze);
  border-radius: 16px;
  padding: 26px 26px 22px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.leistungs-karte:hover {
  border-color: var(--grenze-stark);
  transform: translateY(-3px);
}
.leistungs-karte .l-icon {
  width: 26px; height: 26px;
  stroke: var(--flieder); fill: none; stroke-width: 1.6;
  margin-bottom: 16px;
}
.leistungs-karte .l-titel {
  font-size: 1.02rem; font-weight: 700;
  margin-bottom: 8px;
}
.leistungs-karte .l-text {
  font-size: 0.88rem; line-height: 1.6;
  color: var(--text-gedaempft);
}
.l-mehr {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  color: var(--flieder-glanz);
  background: none; border: none;
  padding: 14px 0 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.l-mehr:hover, .l-mehr:focus-visible { color: var(--flieder); }
.l-mehr svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2;
  transition: transform 0.25s ease;
}
.leistungs-karte.offen .l-mehr svg { transform: rotate(180deg); }
.l-detail {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease, margin-top 0.35s ease;
  font-size: 0.85rem; line-height: 1.65;
  color: var(--text-gedaempft);
}
.leistungs-karte.offen .l-detail { max-height: 200px; margin-top: 12px; }

/* ── 8. Live-Demo-Sektion: Konfigurator + Vorher/Nachher ───────── */
.demo-sektion {
  padding: 90px 24px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.demo-block { margin-top: 52px; text-align: left; }
.demo-block:first-of-type { margin-top: 44px; }
.demo-block-titel { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.demo-block-text { font-size: 0.9rem; color: var(--text-gedaempft); margin-bottom: 24px; }

/* Mini-Konfigurator */
.demo-konfigurator {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 26px;
  align-items: start;
}
.demo-gruppe { margin-bottom: 20px; }
.demo-label {
  display: block;
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-leise);
  margin-bottom: 10px;
}
.demo-branchen { display: flex; flex-direction: column; gap: 8px; }
.demo-branche-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  font-family: inherit; font-size: 0.86rem; font-weight: 600;
  color: var(--text-haupt);
  background: var(--bg-panel);
  border: 1.5px solid var(--grenze);
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer; text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.demo-branche-btn svg {
  width: 17px; height: 17px; flex: none;
  stroke: var(--flieder); fill: none; stroke-width: 1.7;
}
.demo-branche-btn:hover:not(.aktiv) {
  border-color: var(--grenze-stark);
  background: var(--bg-panel-2);
}
.demo-branche-btn.aktiv {
  border-color: var(--flieder);
  background: rgba(var(--flieder-rgb),0.08);
}
.demo-akzente { display: flex; gap: 10px; }
.demo-akzent-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer; padding: 0; position: relative;
  transition: transform 0.18s ease;
}
.demo-akzent-swatch:hover { transform: scale(1.12); }
.demo-akzent-swatch.aktiv::after {
  content: '';
  position: absolute; inset: -5px;
  border: 1.5px solid var(--text-haupt);
  border-radius: 50%; opacity: 0.45;
}

.demo-vorschau-rahmen {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--grenze);
  background: var(--bg-panel);
}
.demo-browserleiste {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--bg-panel-2);
}
.demo-browserleiste span { width: 9px; height: 9px; border-radius: 50%; background: var(--grenze-stark); }
.demo-url { flex: 1; text-align: center; font-size: 0.74rem; color: var(--text-leise); }

/* Vorschau-Inhalt ist bewusst IMMER hell, unabhängig vom
   Seiten-Theme – sie stellt "irgendeine Webseite" dar, kein Teil
   der eigentlichen Landingpage. */
.demo-vorschau {
  background: #fbfaff; color: #221c33;
  padding: 46px 34px;
  min-height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center;
}
.demo-icon {
  width: 36px; height: 36px;
  stroke: var(--demo-akzent, #7c5cbf); fill: none; stroke-width: 1.6;
  transition: stroke 0.3s ease;
}
.demo-headline { font-size: 1.25rem; font-weight: 800; max-width: 24ch; }
.demo-text { font-size: 0.88rem; color: #5b5468; max-width: 32ch; line-height: 1.6; }
.demo-cta {
  margin-top: 4px;
  font-family: inherit; font-size: 0.84rem; font-weight: 600;
  color: #fff;
  background: var(--demo-akzent, #7c5cbf);
  border: none; border-radius: 8px;
  padding: 11px 24px;
  cursor: default;
  transition: background 0.3s ease;
}

/* Vorher/Nachher-Schieberegler */
.vn-slider {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--grenze);
  user-select: none;
  touch-action: pan-y;
}
.vn-bild { position: absolute; inset: 0; }
.vn-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vorher-Bild liegt exakt über dem Nachher-Bild, wird aber per
   clip-path auf den linken Teil begrenzt (Grenze = Reglerposition).
   clip-path statt Breiten-Trick, damit das Bild selbst nie skaliert
   werden muss – nur der sichtbare Ausschnitt ändert sich. */
.vn-vorher { clip-path: inset(0 50% 0 0); }

.vn-label {
  position: absolute; top: 14px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 5px 12px; border-radius: 20px;
  pointer-events: none;
}
.vn-label-vorher { left: 14px; }
.vn-label-nachher { right: 14px; }

.vn-regler {
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  cursor: ew-resize;
}
.vn-griff {
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.vn-griff svg { width: 18px; height: 18px; stroke: #221c33; fill: none; stroke-width: 2; }
.vn-regler:focus-visible { outline: 2px solid var(--flieder); outline-offset: 2px; }

/* ── 8a. Referenzen-Sektion (2026-08-13) ───────────────────────────
   Eigene Projekte (schoscho.at, 100.schoscho.at) als Beleg der
   Programmier-Bandbreite. Vorher als kleine Text-/Bild-Zeile in der
   Über-mich-Sektion, jetzt eigene Sektion mit Nav-Eintrag, damit sie
   den Platz bekommt, den sie verdient. Kartenformat wie
   .leistungs-karte (gleiche Sektionsbreite 1080px), aber mit
   Screenshot oben. Layout bewusst offen für weitere Karten (z. B.
   eine künftige echte Kundenreferenz) – einfach eine weitere
   .referenz-karte im Grid ergänzen, kein Umbau nötig.
   2026-08-13, zweiter Durchgang (Geris Wunsch): die ganze Karte ist
   jetzt der Link (nicht mehr nur ein kleiner Text unten), dazu
   Bild-Zoom + Pfeil-Nudge beim Hover als Feedback, dass die ganze
   Fläche klickbar ist.
   2026-08-13, dritter Durchgang (Geris Wunsch): den "Seite ansehen"-
   Text ganz entfernt (überflüssig, da eh die ganze Karte verlinkt
   ist), stattdessen nur noch der größere Pfeil direkt neben dem
   Titel – bleibt so auch auf Touch-Geräten ohne Hover als Hinweis
   auf einen externen Link sichtbar. */
.referenzen-sektion {
  padding: 90px 24px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.referenzen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
  text-align: left;
}
.referenz-karte {
  display: block;
  background: var(--bg-panel);
  border: 1px solid var(--grenze);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.referenz-karte:hover, .referenz-karte:focus-visible {
  border-color: var(--grenze-stark);
  transform: translateY(-5px);
  box-shadow: 0 16px 32px -14px rgba(var(--flieder-rgb),0.4);
  outline: none;
}
.referenz-bild {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: 50% 0%;
  transition: transform 0.4s ease;
}
.referenz-karte:hover .referenz-bild, .referenz-karte:focus-visible .referenz-bild {
  transform: scale(1.06);
}
.referenz-inhalt { padding: 20px 22px 22px; }
.referenz-titel {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.02rem; font-weight: 700;
  margin-bottom: 8px;
}
.referenz-text {
  font-size: 0.88rem; line-height: 1.6;
  color: var(--text-gedaempft);
}
/* Pfeil statt "Seite ansehen"-Text (2026-08-13, dritter Durchgang):
   Geri fand den Text-Button überflüssig, da ja die ganze Karte schon
   der Link ist – gleichzeitig soll auf Touch-Geräten (kein Hover)
   trotzdem sichtbar bleiben, dass es ein externer Link ist. Deshalb
   bewusst größer (1.2rem) direkt neben dem Titel statt als kleiner
   Text unten. */
.referenz-pfeil {
  display: inline-block;
  font-size: 1.2rem; line-height: 1;
  color: var(--flieder-glanz);
  transition: transform 0.25s ease, color 0.2s ease;
}
.referenz-karte:hover .referenz-pfeil, .referenz-karte:focus-visible .referenz-pfeil {
  color: var(--flieder);
  transform: translate(3px, -3px);
}

/* Featured-Karte für echte Kundenprojekte (2026-08-17, erste:
   internist-moedling.at). Bewusst deutlich größer und als
   Bild-neben-Text-Layout statt Bild-über-Text wie bei den eigenen
   Projekten – schafft eine klare visuelle Rangfolge (echte
   Kundenarbeit zuerst, eigene Tools als Ergänzung darunter unter der
   Zwischenüberschrift "Eigene Projekte"). "Kundenprojekt"-Kicker
   macht die Einordnung zusätzlich auch textlich eindeutig. Erweiterbar
   für weitere Kundenreferenzen: einfach eine weitere .referenz-featured
   davor oder danach einfügen. */
.referenz-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--bg-panel);
  border: 1px solid var(--grenze);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  margin-top: 40px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.referenz-featured:hover, .referenz-featured:focus-visible {
  border-color: var(--grenze-stark);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -16px rgba(var(--flieder-rgb),0.4);
  outline: none;
}
.referenz-featured-bild-rahmen { overflow: hidden; min-height: 240px; }
.referenz-featured-bild {
  display: block;
  width: 100%; height: 100%;
  min-height: 240px;
  object-fit: cover;
  object-position: 50% 0%;
  transition: transform 0.4s ease;
}
.referenz-featured:hover .referenz-featured-bild, .referenz-featured:focus-visible .referenz-featured-bild {
  transform: scale(1.06);
}
.referenz-featured-inhalt {
  padding: 36px 40px;
  display: flex; flex-direction: column; justify-content: center;
}
.referenz-kicker {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg-void);
  background: var(--flieder);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 16px;
}
.referenz-featured-titel {
  font-size: 1.28rem; font-weight: 800;
  margin-bottom: 4px;
}
.referenz-featured-unter {
  font-size: 0.86rem; font-weight: 600;
  color: var(--flieder-glanz);
  margin-bottom: 16px;
}
.referenz-featured-text {
  font-size: 0.94rem; line-height: 1.7;
  color: var(--text-gedaempft);
  margin-bottom: 22px;
}
.referenz-featured-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.92rem; font-weight: 700;
  color: var(--flieder-glanz);
  transition: color 0.2s ease;
}
.referenz-featured:hover .referenz-featured-link, .referenz-featured:focus-visible .referenz-featured-link {
  color: var(--flieder);
}
.referenz-featured-pfeil { display: inline-block; transition: transform 0.25s ease; }
.referenz-featured:hover .referenz-featured-pfeil, .referenz-featured:focus-visible .referenz-featured-pfeil {
  transform: translateX(5px);
}
.referenzen-unterueberschrift {
  font-size: 1.08rem; font-weight: 700;
  text-align: center;
  margin: 56px 0 8px;
}
.referenzen-unterintro {
  font-size: 0.9rem; line-height: 1.6;
  color: var(--text-gedaempft);
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

/* ── 8b. Pflegewege-Sektion: "Ihre Webseite ist fertig. Und dann?" ──
   Drei bewusst GLEICHWERTIGE Karten (keine "featured"-Hervorhebung) –
   verbindliche Vorgabe aus dem Cowork-Masterpaket 2.0 (2026-08-13):
   KI-Selbstverwaltung, persönliche Pflege/Support und Unterstützung
   nur bei Bedarf sind drei gleichrangige, unverbindliche Wege. */
.pflege-sektion {
  padding: 90px 24px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.pflege-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 44px;
  text-align: left;
}
.pflege-karte {
  background: var(--bg-panel);
  border: 1px solid var(--grenze);
  border-radius: 16px;
  padding: 28px 26px 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.pflege-karte:hover {
  border-color: var(--grenze-stark);
  transform: translateY(-3px);
}
.pflege-nummer {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--flieder-glanz);
  margin-bottom: 12px;
}
.pflege-titel { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.pflege-unter {
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-leise);
  margin-bottom: 12px;
}
.pflege-text { font-size: 0.88rem; line-height: 1.65; color: var(--text-gedaempft); }
.pflege-hinweis {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--flieder-glanz);
  background: rgba(var(--flieder-rgb),0.08);
  border: 1px solid var(--grenze);
  border-radius: 20px;
  padding: 6px 12px;
}
.pflege-statement {
  margin-top: 48px;
  font-size: 1.15rem; font-weight: 700;
  color: var(--text-haupt);
}

/* ── 8c. Kundenservice-Sektion ─────────────────────────────────
   Kompakter Bereich für Bestandskunden. Der Button verweist auf die
   künftige eigene Subdomain service.schoscho.at (eigener Ordner
   schoscho.at/service/, siehe _projekt/Aenderungsplan_2026-08-13.md);
   dort vorerst nur eine schlichte Platzhalterseite ohne Login. */
.kundenservice-sektion {
  padding: 80px 24px;
  background: var(--bg-void-tief);
}
.kundenservice-inhalt {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.kundenservice-text {
  color: var(--text-gedaempft);
  font-size: 0.98rem; line-height: 1.65;
  margin: 16px 0 10px;
}
.kundenservice-hinweis {
  color: var(--text-leise);
  font-size: 0.86rem; line-height: 1.6;
  margin-bottom: 22px;
}
.kundenservice-button {
  display: inline-block;
  font-family: inherit; font-weight: 600; font-size: 0.95rem;
  color: var(--bg-void);
  background: var(--flieder);
  border-radius: 10px;
  padding: 14px 30px;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.kundenservice-button:hover {
  background: var(--flieder-glanz);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(var(--flieder-rgb),0.4);
}

/* ── 9. Ablauf-Sektion (Timeline) ──────────────────────────────── */
.ablauf-sektion {
  padding: 90px 24px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.ablauf-timeline {
  position: relative;
  margin-top: 50px;
  text-align: left;
}
/* Durchgehende Verbindungslinie hinter den Nummern-Kreisen */
.ablauf-timeline::before {
  content: '';
  position: absolute;
  left: 19px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--flieder-tief), var(--grenze));
}
.ablauf-schritt {
  position: relative;
  display: flex; gap: 22px;
  padding-bottom: 40px;
}
.ablauf-schritt:last-child { padding-bottom: 0; }
.ablauf-nummer {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1.5px solid var(--flieder);
  color: var(--flieder-glanz);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem;
  position: relative; z-index: 1;
}
.ablauf-inhalt { padding-top: 6px; }
.ablauf-titel { font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; }
.ablauf-text { font-size: 0.9rem; line-height: 1.65; color: var(--text-gedaempft); }
.ablauf-hinweis {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--flieder-glanz);
  background: rgba(var(--flieder-rgb),0.08);
  border: 1px solid var(--grenze);
  border-radius: 20px;
  padding: 5px 14px;
}

/* ── 10. FAQ-Sektion ─────────────────────────────────────────────── */
.faq-sektion {
  padding: 90px 24px 100px;
  max-width: 720px;
  margin: 0 auto;
}
.faq-sektion .sektion-titel { text-align: center; }
.faq-liste { margin-top: 40px; }
.faq-item {
  border-bottom: 1px solid var(--grenze);
}
.faq-frage {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-family: inherit; font-size: 0.98rem; font-weight: 600;
  color: var(--text-haupt);
  background: none; border: none;
  padding: 20px 0;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq-frage:hover, .faq-frage:focus-visible { color: var(--flieder-glanz); }
.faq-frage svg {
  flex: none; width: 16px; height: 16px;
  stroke: var(--flieder-glanz); fill: none; stroke-width: 2;
  transition: transform 0.25s ease;
}
.faq-item.offen .faq-frage svg { transform: rotate(180deg); }
.faq-antwort {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease, padding-bottom 0.35s ease;
  font-size: 0.9rem; line-height: 1.7;
  color: var(--text-gedaempft);
}
/* Wunsch/Anpassung 2026-08-13: von 220px auf 280px erhöht – seit der
   Erweiterung auf 11 FAQ-Einträge (Cowork-Masterpaket 2.0) sind
   manche Antworten (z. B. zu Projektbestandteilen) länger und wurden
   bei 220px auf kleineren Bildschirmen ganz knapp abgeschnitten.
   Anpassung 2026-08-18: von 280px auf 340px erhöht – die neue,
   zweiabsätzige Antwort zu "Was kostet eine Webseite?" (Preisspanne +
   Kleinunternehmer-Hinweis) braucht rechnerisch rund 300–320px und
   wäre bei 280px am Ende abgeschnitten worden. Mit Geri abgestimmt
   (Alternative wäre Textkürzung gewesen).
   Anpassung 2026-08-18 (zweite Runde): von 340px auf 390px erhöht –
   der zweite Absatz wurde auf Geris Wunsch um eine explizite
   "Sie sparen sich effektiv ein Fünftel"-Formulierung ergänzt
   (Verständlichkeits-Feedback), braucht dadurch rechnerisch rund
   358–380px statt vorher ~303–323px. */
.faq-item.offen .faq-antwort { max-height: 390px; padding-bottom: 20px; }

/* ── 11. Über-mich-Sektion ──────────────────────────────────────── */
.ueber-sektion {
  padding: 90px 24px;
  max-width: 880px;
  margin: 0 auto;
}
.ueber-inhalt {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 44px;
  align-items: start;
}
.ueber-bild { display: flex; justify-content: center; }
.ueber-monogramm {
  width: 170px; height: 170px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1.5px solid var(--grenze-stark);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 800;
  color: var(--flieder);
  letter-spacing: 0.02em;
}
.ueber-foto {
  width: 170px; height: 170px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 0%;
  border: 1.5px solid var(--grenze-stark);
}
.ueber-text p {
  color: var(--text-gedaempft);
  font-size: 0.95rem; line-height: 1.75;
  margin-bottom: 14px;
}
.ueber-text p a {
  color: var(--flieder);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ueber-text p a:hover, .ueber-text p a:focus-visible { color: var(--flieder-glanz); }
/* Kleine Zwischenüberschrift innerhalb des Über-mich-Texts, z.B. für
   den Absatz zur Zusammenarbeit vor Ort/online */
.ueber-untertitel {
  font-size: 1rem; font-weight: 700;
  color: var(--text-haupt);
  margin: 22px 0 10px;
}
.ueber-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 20px;
}
/* Schriftgröße/Padding bewusst etwas kleiner als bei anderen Badges/Pills
   der Seite (2026-08-13): so passen alle drei Fakten-Badges in die
   knapp 600px breite Textspalte der Über-mich-Sektion in eine Zeile,
   statt umzubrechen (Rückmeldung Geri per Screenshot). */
.ueber-badge {
  font-size: 0.74rem; font-weight: 600;
  color: var(--flieder-glanz);
  background: rgba(var(--flieder-rgb),0.08);
  border: 1px solid var(--grenze);
  border-radius: 20px;
  padding: 6px 12px;
  white-space: nowrap;
}
/* Referenzseiten sind seit 2026-08-13 eine eigene Sektion
   (.referenzen-sektion, siehe Abschnitt "8a." weiter oben) mit
   eigener Nav-Anbindung statt einer Zeile hier in Über-mich. Die
   frühere Text-Pill- bzw. Screenshot-Kachel-Variante an dieser
   Stelle (.ueber-referenzen/.ueber-badge-link/.ueber-referenz-*)
   wurde entfernt; der Cross-Link im Fließtext nutzt die bereits
   vorhandene .ueber-text-p-a-Verlinkung. */

/* ── 12. Scroll-Reveal: gemeinsame Klassen ─────────────────────
   Elemente starten unsichtbar/verschoben und werden per
   IntersectionObserver eingeblendet (js/inhalte-interaktionen.js). */
.anim-versteckt {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.anim-sichtbar {
  opacity: 1;
  transform: translateY(0);
}

/* ── 13. Footer ──────────────────────────────────────────────── */
footer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-leise);
  padding: 30px 20px 34px;
  background: var(--bg-void-tief);
}
footer a { color: var(--text-gedaempft); text-decoration: none; }
footer a:hover { color: var(--flieder-glanz); }
footer .trenner { margin: 0 10px; opacity: 0.5; }
/* 2026-08-29 (Wunsch Geri): der bisherige reine Text-Link (siehe
   Historie 2026-08-27/28 oben, jetzt überholt) wurde durch einen
   Bild-Button ersetzt - zwei deckungsgleiche WebP-Grafiken
   (grau/weißer Schriftzug + blauer Schriftzug, images/linkedin-
   button-*.webp), die beim Hover ineinander überblendet werden.
   Eigene Zeile unter Impressum/Datenschutz, siehe index.html. */
.footer-linkedin-zeile {
  margin-top: 14px;
}

/* Button-Rahmen: definiert die Klickfläche/Größe (130x45px, siehe
   img-width/height in index.html), rundet die an sich rechteckigen
   Grafiken ab und hebt sie als eigenständigen "Chip" vom sehr dunklen
   Footer-Hintergrund ab (die Bilder selbst haben einen mittelgrauen
   Hintergrund, der NICHT nahtlos in den Footer übergeht - bewusst so,
   siehe memory.md). */
.footer-linkedin-btn {
  display: inline-block;
  position: relative;
  width: 130px;
  height: 45px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
footer .footer-linkedin-btn:hover {
  /* kein Farbwechsel hier - der passiert über die Bild-Überblendung
     unten, nicht über color (es ist kein Text mehr) */
  box-shadow: 0 5px 16px rgba(0,0,0,0.45);
}
/* Klick-Animation (Wunsch Geri): kurzes "Eindrücken" beim Antippen/
   Klicken, federt beim Loslassen wieder zurück. */
footer .footer-linkedin-btn:active {
  transform: scale(0.94);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Beide Bild-Ebenen liegen exakt deckungsgleich übereinander (Original
   im Fließtext oben, Blau absolut positioniert obendrauf) - die
   Überblendung passiert rein über opacity, kein Bild bewegt sich. */
.footer-linkedin-img {
  display: block;
  width: 130px;
  height: 45px;
}
.footer-linkedin-blau {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.footer-linkedin-btn:hover .footer-linkedin-blau,
.footer-linkedin-btn:focus-visible .footer-linkedin-blau {
  opacity: 1;
}

/* ── 14. Rechtstexte (Impressum/Datenschutz) ──────────────────
   Eigene, schlanke Seiten außerhalb der One-Page-Landingpage. */
.rechts-header {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 24px 0;
  display: flex;
  justify-content: center;
}
.rechts-zurueck {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--flieder);
  background: var(--bg-panel);
  border: 1px solid var(--grenze);
  border-radius: 999px;
  padding: 10px 24px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: background-color 0.22s ease, color 0.22s ease,
    border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.rechts-zurueck:hover, .rechts-zurueck:focus-visible {
  background: var(--flieder);
  color: var(--bg-void);
  border-color: var(--flieder);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(var(--flieder-rgb),0.45);
}
.rechts-zurueck:active { transform: translateY(0); }
.rechts-inhalt {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 24px 90px;
}
.rechts-inhalt h1 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800; letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.rechts-inhalt h2 {
  font-size: 1.05rem; font-weight: 700;
  color: var(--text-haupt);
  margin: 34px 0 10px;
}
.rechts-inhalt p, .rechts-inhalt li {
  font-size: 0.92rem; line-height: 1.75;
  color: var(--text-gedaempft);
  margin-bottom: 12px;
}
.rechts-inhalt ul { padding-left: 20px; margin-bottom: 16px; }
.rechts-inhalt strong { color: var(--text-haupt); }
.rechts-inhalt a { color: var(--flieder-glanz); text-decoration: underline; }

/* WKO-Badge im Impressum (2026-08-16): die amtliche Grafik hat einen
   weißen Hintergrund und wird bewusst NICHT ins Dark-Theme eingefärbt
   (offizielles Prüfsiegel, keine Design-Freiheit) – deshalb eigene
   weiße Karte mit Schatten, damit es nicht wie ein Darstellungsfehler
   auf dunklem Grund wirkt, sondern wie ein bewusst gesetztes Siegel. */
.wko-badge {
  display: inline-block;
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  line-height: 0;
  margin-top: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wko-badge:hover, .wko-badge:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(0,0,0,0.4);
}
.wko-badge img { display: block; height: 24px; width: auto; }
.rechts-inhalt p.wko-badge-hinweis {
  font-size: 0.8rem;
  color: var(--text-leise);
  margin-top: 8px;
}

/* ── 14b. 404-Fehlerseite ──────────────────────────────────────
   Eigenes Motiv (von Geri per ChatGPT/DALL·E erstellt, images/404.png):
   groSSe "404"-Zahl mit Flieder-Verlauf + Konstellations-Punkten,
   passend zum Rest der Seite (kein Cyberpunk-Glitch). Bild hat einen
   eigenen dunklen Hintergrund, der schon nah an --bg-void liegt –
   per radialer Masken-Verlauf werden die Bildränder weich in den
   Seitenhintergrund eingeblendet, damit keine harte Bildkante
   sichtbar ist (siehe memory.md Abschnitt 6m). */
.fehler404-sektion {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  padding: 100px 24px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(var(--flieder-rgb),0.10), transparent 55%),
    linear-gradient(180deg, var(--bg-void) 0%, var(--bg-void-tief) 100%);
}
.fehler404-sektion > * { position: relative; z-index: 1; }
.fehler404-bild {
  width: min(100%, 620px);
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
}
.fehler404-titel {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
  margin-top: -20px;
}
.fehler404-text {
  color: var(--text-gedaempft);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 44ch;
  margin-bottom: 6px;
}

/* ── 15. Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-sektion { padding: 80px 20px 90px; gap: 26px; }
  .formular-karte { padding: 30px 22px; }
  /* Wunsch 2026-08-18 (Screenshot-Feedback iPhone): "Individualprogrammierung"
     ist ein einzelnes langes Wort ohne Leerzeichen und lief auf schmalen
     Bildschirmen über den rechten Rand hinaus, statt umzubrechen – der
     Umschalter wirkte dadurch nicht mehr zentriert. max-width bremst den
     Umschalter auf die verfügbare Breite, min-width:0 erlaubt den Buttons
     trotz Flexbox tatsächlich zu schrumpfen.
     Erste Fassung nutzte hyphens:auto (automatische Wörterbuch-Trennung) –
     Geris Live-Test am iPhone zeigte aber einen unschön lesbaren
     Trennpunkt ("Individualprogram-mierung"), weil der Browser sich die
     Stelle selbst aussucht statt der naheliegenden Wortfuge. Deshalb auf
     hyphens:manual umgestellt: Die einzige erlaubte Trennstelle steht
     jetzt als weicher Trennstrich (&shy;) direkt im HTML zwischen
     "Individual" und "programmierung" (siehe index.html), der Browser
     trennt nur genau dort und nur bei echtem Platzmangel. Auf breiteren
     Bildschirmen (Tablet, Desktop) bleibt alles einzeilig wie bisher. */
  .vergleich-umschalter { max-width: 100%; }
  .u-tab {
    min-width: 0;
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: break-word;
  }
  .auswahl-grid.zwei-spalten { grid-template-columns: 1fr; }
  .auswahl-grid.dicht { grid-template-columns: 1fr; }
  .weiche-optionen { grid-template-columns: 1fr; }
  .schritt-nav { flex-direction: row; flex-wrap: wrap; row-gap: 10px; }
  .schritt-nav-rechts { gap: 12px; }
  .vergleich-karte { padding: 26px 20px; }
  .ablauf-timeline::before { left: 15px; }
  .ablauf-nummer { width: 32px; height: 32px; font-size: 0.85rem; }
  .ablauf-schritt { gap: 16px; }
  .ueber-inhalt { grid-template-columns: 1fr; text-align: center; }
  .ueber-badges { justify-content: center; }
  .referenz-featured { grid-template-columns: 1fr; }
  .referenz-featured-bild-rahmen { min-height: 0; height: 220px; }
  .referenz-featured-bild { min-height: 0; height: 220px; }
  .referenz-featured-inhalt { padding: 28px 24px; }
  .demo-konfigurator { grid-template-columns: 1fr; }
  .demo-akzente { justify-content: center; }
  .vn-slider { aspect-ratio: 4/3; }
  .float-nav { bottom: 12px; right: 12px; }
  .float-nav__menue { min-width: 0; width: min(78vw, 250px); }
}

/* ── 16. Barrierefreiheit: reduzierte Bewegung ────────────────
   Dauer-Animationen abschalten, Inhalte bleiben voll nutzbar.
   Das Partikel-Canvas wird zusätzlich per JS gar nicht erst
   gestartet (siehe hero-hintergrund.js). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hinweis,
  .cta-button,
  .formular-schritt.aktiv,
  .formular-ergebnis.aktiv,
  .vergleich-ansicht.aktiv { animation: none; }
  .erfolg-dialog,
  .erfolg-dialog::backdrop { transition: none; }
  .cta-button:hover { transform: none; }
  .rechts-zurueck:hover, .rechts-zurueck:focus-visible { transform: none; }
  .anim-versteckt { opacity: 1; transform: none; transition: none; }
  .nach-oben-button,
  .float-nav__oben, .float-nav__btn { transition: opacity 0.15s ease; transform: none !important; }
}