/* ============================================================================
   1ki-sections v1 (Entwurf, noch nicht deployt)
   ----------------------------------------------------------------------------
   Acht wiederverwendbare Landingpage-Bausteine für die Kampagnenzone
   (1mpct.de), einsetzbar auf jeder Seite, die das zentrale Theme lädt.
   Single Source of Truth: Staging/_ui/sections/sections.css
   Governance: 08 Bereiche/Website & Webspace/UI-Module_Standard.md
   Projekt: 00_Projektplan_LandingpageEngine.md, Paket S1

   Bausteine (Klassen-Präfix .sec):
     1  .sec-hero          Hero mit CTA
     2  .sec-symptome      Symptom-Checkliste
     3  .sec-phasen        Phasen-Strecke mit Bild
     4  .sec-ablauf        Ablauf-Tabelle
     5  .sec-deliverables  Deliverable-Liste
     6  .sec-person        Personen-Block mit Porträt
     7  .sec-faq           FAQ-Accordion (details/summary, ohne JavaScript)
     8  .sec-schluss       Abschluss-CTA
     9  .sec-spalten       Mehrspaltiges Raster (2, 3, oder 2/3+1/3), portiert
                           aus dem bewährten Portal-Muster .paket-mehrspaltig
                           (P5-Nachfassung, web.1.ki/portal/assets/paket.css)

   Grundsätze (UI-Module_Standard Abschnitte 1, 6h):
   - Kein eigener Farbwert. Ausschließlich Theme-Variablen (--sky, --pulse,
     --glass, --line, --text ...). Wer hier eine Farbe braucht, die es nicht
     gibt, ergänzt sie im Theme.
   - Kein JavaScript. Alle acht Bausteine sind reines CSS, das FAQ-Accordion
     läuft nativ über <details>/<summary>.
   - Mobile-first: Basis gilt für schmale Geräte, min-width-Queries erweitern.
   - prefers-reduced-motion: reduce schaltet jede Bewegung dieses Moduls ab
     (zusätzlich zum globalen Guard im Theme).
   - Höchstens eine primäre Schaltfläche (.btn) je Abschnitt, Regel aus
     Abschnitt 6a1 des Standards.

   Markup-Muster: siehe demo.html in diesem Ordner. Die Sections liegen als
   <section class="sec sec-..."> direkt in .stage bzw. .page-wide.
   ========================================================================= */

/* ---------------------------------------------------------------- Gerüst -- */

.sec {
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-block: clamp(40px, 8vw, 88px);
}

.sec + .sec { border-top: 1px solid var(--line); }

/* Abschnittskopf: Eyebrow + Überschrift + Einleitung, auf Lesebreite. */
.sec-kopf { max-width: var(--measure); margin: 0 0 var(--space-6); }
.sec-kopf h2 { margin-top: 0; }
.sec-kopf p { color: var(--text-muted); max-width: 60ch; }

/* --------------------------------------------------- 9 Mehrspaltiges Raster
   Entwurf 2026-08-24, Landingpage-Engine S2-Nacharbeit Runde 3. Portiert das
   bereits von Christian abgenommene Portal-Muster .paket-mehrspaltig 1:1 in
   das sections-Modul, damit auch 1mpct.de-Seiten davon profitieren, statt
   es doppelt zu bauen. Mobile-first einspaltig (Christian-Vorgabe im Portal,
   23.08.: "auf dem Handy UNTEREINANDER"), ab 700px in Spalten. Neutral
   benannt (nicht "video-avatar"), damit jede künftige Seite es für beliebige
   Inhaltspaare nutzen kann. -- */

.sec-spalten {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-4), 2.5vw, var(--space-6));
  align-items: start;
}

@media (min-width: 700px) {
  .sec-spalten-2 { grid-template-columns: 1fr 1fr; }
  .sec-spalten-3 { grid-template-columns: 1fr 1fr 1fr; }
  /* Zwei Drittel plus ein Drittel, z.B. Video neben einem schmaleren
     Begleitelement (Avatar-Platzhalter, Zitat, Kennzahl). */
  .sec-spalten-zweidrittel { grid-template-columns: 2fr 1fr; }
}

.sec-spalten > * { min-width: 0; }

/* ------------------------------------------------------- 1 Hero mit CTA -- */

.sec-hero {
  border-top: none;
  padding-block: clamp(48px, 10vw, 112px);
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.sec-hero-titel {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--text-strong);
}

.sec-hero .lede { margin: var(--space-4) 0 0; }

.sec-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
}

.sec-hero-visual { margin: 0; }
.sec-hero-visual img,
.sec-hero-visual svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.sec-hero-visual figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (min-width: 880px) {
  .sec-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* ------------------------------------------------ 2 Symptom-Checkliste -- */

.sec-symptome-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.sec-symptome-liste li {
  position: relative;
  padding: var(--space-4) var(--space-5);
  padding-left: calc(var(--space-5) + 30px);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sec-symptome-liste li::before {
  content: "✔";
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  color: var(--pulse);
  font-weight: var(--fw-bold);
}

.sec-symptome-liste strong {
  display: block;
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}

.sec-symptome-liste span {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (min-width: 720px) {
  .sec-symptome-liste { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}

/* -------------------------------------------- 3 Phasen-Strecke mit Bild -- */

.sec-phasen-bild { margin: 0 0 var(--space-6); }
.sec-phasen-bild img,
.sec-phasen-bild svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.sec-phasen-bild figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.sec-phasen-strecke {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: phase;
  display: grid;
  gap: var(--space-4);
}

.sec-phasen-strecke li {
  counter-increment: phase;
  position: relative;
  overflow: hidden;
  padding: var(--space-5);
  padding-top: calc(var(--space-5) + var(--space-4));
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Akzentlinie oben, Zählnummer darunter. */
.sec-phasen-strecke li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-accent);
}

.sec-phasen-strecke li::after {
  content: counter(phase, decimal-leading-zero);
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--sky);
}

.sec-phasen-strecke h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-base);
  color: var(--text-strong);
}

.sec-phasen-strecke p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (min-width: 720px) {
  .sec-phasen-strecke { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1060px) {
  .sec-phasen-strecke { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------ 4 Ablauf-Tabelle -- */

/* Basis-Tabellenoptik kommt aus dem Theme. Hier nur: waagerecht scrollen
   statt umbrechen (UI-Module_Standard Abschnitt 6e, gleiche Begründung). */
.sec-ablauf .table-wrap { overflow-x: auto; }
.sec-ablauf table { min-width: 560px; }
.sec-ablauf td:first-child,
.sec-ablauf th:first-child { white-space: nowrap; }

/* --------------------------------------------------- 5 Deliverable-Liste -- */

.sec-deliverables-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.sec-deliverable {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sec-deliverable h3 {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--text-strong);
}

.sec-deliverable p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.sec-deliverable-format {
  justify-self: start;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}

@media (min-width: 720px) {
  .sec-deliverables-raster { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1060px) {
  .sec-deliverables-raster { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------- 6 Personen-Block mit Porträt -- */

.sec-person-karte {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  padding: clamp(24px, 5vw, 44px);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.sec-person-portraet {
  width: clamp(112px, 20vw, 176px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--line-strong);
  background: var(--glass-strong);
}

.sec-person-portraet img,
.sec-person-portraet svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-person-name {
  margin: 0;
  font-size: var(--fs-h3);
  color: var(--text-strong);
}

.sec-person-rolle {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.sec-person-text p { margin: 0 0 var(--space-3); }
.sec-person-text p:last-child { margin-bottom: 0; }

@media (min-width: 720px) {
  .sec-person-karte {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
  }
}

/* ------------------------------------------------------- 7 FAQ-Accordion -- */

/* Nativ über <details>/<summary>. Ohne JavaScript voll bedienbar,
   tastaturzugänglich, vom Browser mit Zustand versehen. */
.sec-faq details {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.sec-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

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

.sec-faq summary::after {
  content: "+";
  flex: none;
  width: 1.4em;
  height: 1.4em;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--sky);
  font-weight: var(--fw-normal);
  transition: transform var(--t-base);
}

.sec-faq details[open] summary::after { transform: rotate(45deg); }
.sec-faq details[open] summary { color: var(--sky); }

.sec-faq summary:hover { background: var(--glass); }
.sec-faq summary:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: -2px;
}

.sec-faq-antwort { padding: 0 var(--space-5) var(--space-5); }
.sec-faq-antwort p { margin: 0 0 var(--space-3); color: var(--text); }
.sec-faq-antwort p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- 8 Abschluss-CTA -- */

.sec-schluss { text-align: center; }

.sec-schluss-box {
  position: relative;
  overflow: hidden;
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(32px, 6vw, 64px);
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.sec-schluss-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-accent);
}

.sec-schluss-box h2 { margin-top: 0; }

.sec-schluss-box .lede {
  margin: var(--space-4) auto var(--space-6);
  max-width: 46ch;
}

.sec-schluss-hinweis {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---------------------------------------------------------- Bewegung aus -- */

@media (prefers-reduced-motion: reduce) {
  .sec *,
  .sec *::before,
  .sec *::after {
    transition: none !important;
    animation: none !important;
  }
}

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

@media print {
  .sec { padding-block: var(--space-6); }
  .sec-faq details { break-inside: avoid; }
  /* Bewusste Grenze: zugeklappte <details> lassen sich per CSS nicht für den
     Druck aufklappen (der Inhalt wird vom Browser nicht gerendert), und ein
     Skript dafür widerspräche dem No-JS-Grundsatz dieses Moduls. Wer eine
     FAQ druckreif braucht, klappt vorher auf. */
}