@font-face{font-family:"Gabarito";src:url(../fonts/gabarito-latin-wght-normal.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../fonts/source-sans-3-latin-wght-normal.woff2) format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
/* FCE Workshop "Mehr Energie fuer dein Leben"
   Farben sind vorlaeufig (Navy und Tuerkis laut Briefing), bis das freigegebene Logo vorliegt.
   Alles Markenfarbige haengt an den Variablen in :root. */

:root {
  --navy: #0F2D4E;
  --tief: #0A2038;
  --petrol: #0B5A68;
  --tuerkis: #22C7CC;
  --tuerkis-hell: #5FDCE0;
  --eis: #E3F2F3;
  --sonne: #FFCB47;
  --weiss: #FFFFFF;
  --tinte: #12283F;
  --tinte-leise: #3A5166;
  --rand: #5B7286;
  --fehler: #A3211A;

  --schrift-titel: "Gabarito", "Trebuchet MS", Verdana, sans-serif;
  --schrift-text: "Source Sans 3", "Segoe UI", Verdana, sans-serif;

  --seite: clamp(16px, 4vw, 56px);
  --spalte: clamp(16px, 2vw, 28px);
  --band: clamp(64px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  overflow-wrap: break-word;
  hyphens: manual;
}

p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.45rem, 12vw, 7.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 0.7em;
}

h3 {
  font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  line-height: 1.2;
  margin-bottom: 0.4em;
}

a { color: inherit; text-underline-offset: 0.16em; }
/* Zusammengehöriges bleibt in einer Zeile. Ist die Zeile schmaler als das Wort (sehr große Schrift), darf es umbrechen. */
.nb { display: inline-block; max-width: 100%; overflow-wrap: anywhere; vertical-align: baseline; }

:focus-visible {
  outline: 3px solid var(--fokus, var(--navy));
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: min(1280px, 100% - 2 * var(--seite));
  margin-inline: auto;
}

/* Farbbaender */
.band {
  padding-block: var(--band);
  background: var(--flaeche);
  color: var(--text);
  scroll-margin-top: 72px;
}

.band-navy {
  --flaeche: var(--navy);
  --text: var(--weiss);
  --leise: #C7D9E6;
  --btn: var(--tuerkis);
  --btn-text: var(--tief);
  --btn-hover: var(--tuerkis-hell);
  --fokus: var(--sonne);
}

.band-petrol {
  --flaeche: var(--petrol);
  --text: var(--weiss);
  --leise: #D4E9EC;
  --btn: var(--weiss);
  --btn-text: var(--tief);
  --btn-hover: var(--eis);
  --fokus: var(--sonne);
}

.band-eis, .band-weiss {
  --text: var(--tinte);
  --leise: var(--tinte-leise);
  --btn: var(--navy);
  --btn-text: var(--weiss);
  --btn-hover: var(--petrol);
  --fokus: var(--navy);
}
.band-eis { --flaeche: var(--eis); }
.band-weiss { --flaeche: var(--weiss); }

.band-tuerkis {
  --flaeche: var(--tuerkis);
  --text: var(--tief);
  --leise: var(--tief);
  --btn: var(--navy);
  --btn-text: var(--weiss);
  --btn-hover: var(--tief);
  --fokus: var(--tief);
}

/* Sieben Spalten, sieben Tage: das Raster der ganzen Seite */
.raster7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--spalte);
  row-gap: clamp(40px, 6vw, 64px);
}
.raster7 > * { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 960px) {
  .sp-1-2 { grid-column: 1 / span 2; }
  .sp-1-3 { grid-column: 1 / span 3; }
  .sp-3-7 { grid-column: 3 / span 5; }
  .sp-4-7 { grid-column: 4 / span 4; }
  .sp-1-4 { grid-column: 1 / span 4; }
  .sp-5-7 { grid-column: 5 / span 3; }
  .raster7.mitte { align-items: center; }
}

.h-breit { max-width: 20ch; }
.lead {
  margin: -0.2em 0 0;
  color: var(--leise);
  font-family: var(--schrift-titel);
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 600;
}

/* Knopf */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0.75em 1.5em;
  border: 0;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-text);
  font-family: var(--schrift-titel);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--btn-hover); }
.btn:disabled { cursor: progress; opacity: 0.75; }

.btn-klein {
  min-height: 44px;
  padding: 0.4em 1em;
  font-size: 0.9375rem;
  flex-shrink: 1;
  min-width: 0;
}
.btn-voll { width: 100%; }

/* Sprunglink, Kopf */
.sprung {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 50;
  padding: 0.6em 1em;
  background: var(--sonne);
  color: var(--tief);
  font-weight: 700;
  border-radius: 8px;
}
.sprung:focus { top: 8px; }

.kopf {
  background: var(--navy);
  color: var(--weiss);
  --btn: var(--tuerkis);
  --btn-text: var(--tief);
  --btn-hover: var(--tuerkis-hell);
  --fokus: var(--sonne);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-height: 560px) {
  .kopf { position: sticky; top: 0; z-index: 20; }
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
}
.marke {
  flex-shrink: 0;
  font-family: var(--schrift-titel);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.08;
  text-decoration: none;
}
.marke img { display: block; height: 40px; width: auto; max-width: 180px; }

/* 1 Hero */
.hero { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 64px); overflow-x: clip; }

.hero-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.hero-raster > * { min-width: 0; }
.hero-links, .hero-rechts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; }
.hero-links > *, .hero-rechts > * { min-width: 0; }

.hero-zeile {
  margin: 0;
  color: var(--sonne);
  font-family: var(--schrift-titel);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 600;
  text-wrap: balance;
}
.hero-unter {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(1.1875rem, 1.05rem + 0.65vw, 1.5rem);
  line-height: 1.38;
}
.hero-datum {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.4;
}
.hero-datum strong {
  font-family: var(--schrift-titel);
  font-size: 1.3125rem;
  font-weight: 700;
}
.hero-aktion .btn { width: 100%; }
.hinweis {
  margin: 10px 0 0;
  color: var(--leise);
  font-size: 1rem;
}
.platz-zaehler {
  min-height: 1.5em;
  margin: 6px 0 0;
  font-family: var(--schrift-titel);
  font-size: 1.0625rem;
  font-weight: 700;
}
.platz-zaehler:empty { display: block; }
.hero .platz-zaehler { color: var(--sonne); }
.platz-zaehler-form { margin-top: 12px; }
.platz-zaehler-form:empty { display: none; }

.hero-frage { padding-top: 8px; }
.frage {
  margin-bottom: 0.6em;
  font-family: var(--schrift-titel);
  font-size: clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem);
  font-weight: 600;
  line-height: 1.22;
  text-wrap: pretty;
}
.hero-frage p:not(.frage) { color: var(--leise); }

.hero-fakten {
  list-style: none;
  display: grid;
  gap: 14px;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.hero-fakten strong { font-family: var(--schrift-titel); font-size: 1.1875rem; }

/* Bildcollage: eigene Illustrationen, keine Fotos */
.collage {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 14px;
}
.teil { position: absolute; margin: 0; }
.teil img { display: block; width: 100%; height: auto; }
.teil-gross { left: 0; top: 0; width: 64%; }
.teil-gross img { border-radius: 22px; }
.teil-a { right: 0; top: 3%; width: 40%; }
.teil-b { right: 5%; bottom: 0; width: 46%; }
.rund {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 6px var(--navy);
}
.rund img { height: 100%; object-fit: cover; }
.chip {
  position: absolute;
  z-index: 2;
  padding: 0.2em 0.8em;
  border-radius: 999px;
  background: var(--sonne);
  color: var(--tief);
  font-family: var(--schrift-titel);
  font-size: clamp(0.8125rem, 0.72rem + 0.4vw, 1rem);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.teil-gross .chip { left: 14px; bottom: 14px; }
.teil-a .chip, .teil-b .chip { left: 50%; bottom: -9px; transform: translateX(-50%); }

@media (min-width: 480px) {
  .hero-aktion .btn { width: auto; }
}

@media (min-width: 960px) {
  .hero-raster {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--spalte);
    row-gap: 30px;
  }
  .hero-links { grid-column: 1 / span 4; }
  .hero-rechts { grid-column: 5 / span 3; }
  h1 { font-size: min(7.8vw, 7rem); white-space: nowrap; }
  .hero-frage { padding-top: 0; }
  .hero-fakten {
    grid-column: 1 / -1;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--spalte);
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }
}

/* Die Woche: das eine auffaellige Element der Seite */
.woche {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(3px, 0.7vw, 10px);
  font-family: var(--schrift-titel);
}
.tag {
  padding: clamp(8px, 1.2vw, 16px) 2px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #C7D9E6;
  text-align: center;
  line-height: 1.05;
}
.tag span { display: block; font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1.0625rem); font-weight: 500; }
.tag b { display: block; margin-top: 3px; font-size: clamp(1.1875rem, 0.9rem + 1.5vw, 2.5rem); font-weight: 700; }
.tag-workshop { background: var(--sonne); color: var(--tief); }

@media (prefers-reduced-motion: no-preference) {
  .woche-hero .tag {
    animation: tag-durchlauf 0.42s ease-out both;
    animation-delay: calc(var(--n) * 0.11s + 0.15s);
  }
  .woche-hero .tag-workshop {
    animation-name: tag-ankommen;
    animation-duration: 0.5s;
  }
  @keyframes tag-durchlauf {
    0%, 100% { background: rgba(255, 255, 255, 0.08); }
    45% { background: rgba(34, 199, 204, 0.55); }
  }
  @keyframes tag-ankommen {
    0% { background: rgba(255, 255, 255, 0.08); color: #C7D9E6; }
    100% { background: var(--sonne); color: var(--tief); }
  }
}

/* 2 Wiedererkennung */
.situationen {
  display: grid;
  gap: clamp(28px, 4vw, 44px) var(--spalte);
}
.situationen article { border-top: 4px solid var(--navy); padding-top: 16px; }
.situationen p { color: var(--leise); }
.schlusssatz {
  margin-top: clamp(36px, 5vw, 56px);
  max-width: 44ch;
  font-family: var(--schrift-titel);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  font-weight: 600;
  line-height: 1.28;
}
@media (min-width: 680px) {
  .situationen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 3 Perspektive: Bild oder spaeter Erklaervideo */
.bildrahmen { margin: 0; }
.bildrahmen img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  border-radius: 24px;
}
.video { margin: 0; }
.video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: var(--tief);
}
.video figcaption { margin-top: 12px; color: var(--leise); font-size: 1rem; }
.video details { margin-top: 12px; }
.video summary { cursor: pointer; font-weight: 700; }
.video details div { padding-top: 8px; }

/* 4 Was du mitnimmst */
.ergebnisse { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; counter-reset: ergebnis; }
.ergebnisse li { position: relative; padding-left: 3.5rem; counter-increment: ergebnis; }
.ergebnisse li::before {
  content: counter(ergebnis);
  position: absolute;
  left: 0;
  top: -0.05rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--sonne);
  color: var(--tief);
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 800;
}
.ergebnisse h3 { color: var(--sonne); }
.ergebnisse p { color: var(--text); }
.kleingedruckt { margin-top: 28px; color: var(--leise); font-size: 1rem; }

.plan-figur { margin: 0; align-self: center; }
.plan-figur figcaption {
  margin-top: 18px;
  color: var(--leise);
  font-size: 1rem;
}
.plan {
  padding: clamp(18px, 3vw, 40px);
  border-radius: 6px;
  background: var(--weiss);
  color: var(--tinte);
  box-shadow: 0 24px 60px rgba(4, 16, 30, 0.45);
  transform: rotate(-1.1deg);
}
.plan-titel {
  margin-bottom: 18px;
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
}
.plan-zeile { padding-block: 14px; border-top: 2px solid var(--navy); }
.plan-zeile:last-child { padding-bottom: 0; }
.plan-name {
  display: block;
  margin-bottom: 26px;
  border-bottom: 2px dotted var(--rand);
  padding-bottom: 6px;
  font-weight: 700;
  font-size: 1rem;
}
.plan-tage {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--tinte-leise);
}
.plan-punkt {
  display: block;
  width: min(100%, 34px);
  aspect-ratio: 1;
  margin: 6px auto 0;
  border: 2px solid var(--rand);
  border-radius: 50%;
}
.plan-punkt.ab {
  border-color: var(--sonne);
  background: var(--sonne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230A2038' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}

/* 5 Ansatz */
.scheiben-spalte { max-width: 460px; width: 100%; justify-self: center; }
.scheiben { display: block; width: 100%; height: auto; }
.scheiben text {
  font-family: var(--schrift-titel);
  font-weight: 700;
  fill: var(--tief);
  text-anchor: middle;
}
.bereiche { margin: 28px 0 0; display: grid; gap: 18px; }
.bereiche dt { font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.bereiche dd { margin: 4px 0 0; color: var(--leise); max-width: 56ch; }

/* 6 Ablauf */
.minuten {
  display: flex;
  gap: 3px;
  height: 14px;
  margin-bottom: 8px;
}
.minuten span { border-radius: 3px; background: rgba(255, 255, 255, 0.32); }
.minuten span.plan-teil { background: var(--sonne); }
.agenda { list-style: none; }
.agenda li {
  display: grid;
  grid-template-columns: 4.1rem minmax(0, 1fr);
  gap: 4px 14px;
  padding-block: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.agenda time {
  font-family: var(--schrift-titel);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.agenda h3 { font-size: 1.1875rem; line-height: 1.25; margin-bottom: 4px; }
.agenda p { margin: 0; color: var(--leise); }
.agenda li.hervor h3, .agenda li.hervor time { color: var(--sonne); }
.agenda li.ende { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 960px) and (min-height: 700px) {
  #ablauf .sp-1-3, #fragen .sp-1-3 { position: sticky; top: 96px; align-self: start; }
}

/* 7 Fuer wen */
.personen {
  display: grid;
  gap: 18px var(--spalte);
  margin-top: clamp(28px, 4vw, 44px);
}
.person {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px;
  border-radius: 16px;
  background: var(--eis);
}
.person img { display: block; width: 76px; height: 76px; border-radius: 50%; }
.person h3 { margin: 2px 0 6px; font-size: 1.25rem; }
.person p { margin: 0; color: var(--leise); }
@media (min-width: 680px) {
  .personen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .personen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.eher-nicht {
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(20px, 3vw, 32px);
  border: 2px solid var(--navy);
  border-radius: 16px;
}
.eher-nicht h3 { margin-bottom: 0.6em; }
.eher-nicht ul { padding-left: 1.1em; }
.eher-nicht li { margin-top: 8px; }

/* 8 Menschen und Studio */
.referent-rolle {
  margin: 6px 0 14px;
  font-family: var(--schrift-titel);
  font-size: 1.0625rem;
  color: var(--petrol);
}
.referent-foto { margin: 0; align-self: start; max-width: 240px; }
@media (min-width: 960px) {
  .referent-foto { max-width: 340px; }
}
.referent-foto img { display: block; width: 100%; height: auto; border-radius: 16px; }
.menschen-text { display: grid; gap: 32px var(--spalte); align-content: start; }
.menschen-text article { border-top: 4px solid var(--navy); padding-top: 18px; }
@media (min-width: 860px) {
  .menschen-text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Angebot fuer Interessenten (erscheint erst nach Freigabe) */
.haken { list-style: none; display: grid; gap: 14px; }
.haken li {
  position: relative;
  padding-left: 2.3rem;
  font-family: var(--schrift-titel);
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
}
.haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--tuerkis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230A2038' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.bedingungen { margin-top: 24px; border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); }
.bedingungen summary {
  padding: 16px 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  cursor: pointer;
}
.bedingungen div { padding-bottom: 16px; }
.angebot-frist { margin-top: 16px; color: var(--leise); font-size: 1rem; }

/* 9 Anmeldung */
.anmelde-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.anmelde-raster > * { min-width: 0; }
.anmelde-eckdaten:last-child { margin-bottom: 0; }
@media (min-width: 960px) {
  .anmelde-raster {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--spalte);
    row-gap: 20px;
  }
  .anmelde-kopf { grid-column: 1 / span 3; grid-row: 1; }
  .anmelde-info { grid-column: 1 / span 3; grid-row: 2; }
  .anmelde-form { grid-column: 4 / span 4; grid-row: 1 / span 2; }
}
.anmelde-eckdaten { line-height: 1.45; }
.anmelde-eckdaten strong { font-family: var(--schrift-titel); font-size: 1.3125rem; }
.anmelde-kopf .platz-zaehler { color: var(--tief); }
.anmelde-info h3 { margin-top: 1.4em; }
.anmelde-info h3:first-child { margin-top: 0; }
.schritte { padding-left: 1.3em; margin-bottom: 1em; }
.schritte li { margin-top: 8px; padding-left: 4px; }

.formular {
  padding: clamp(20px, 3.4vw, 44px);
  border-radius: 14px;
  background: var(--weiss);
  color: var(--tinte);
  --fokus: var(--navy);
}
#anmeldung .formular-titel {
  margin: 0 0 18px;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  font-weight: 800;
}
.feld { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.feld label, .feld legend {
  display: block;
  padding: 0;
  margin-bottom: 6px;
  font-weight: 700;
}
.feld input[type="text"], .feld input[type="email"] {
  width: 100%;
  min-height: 54px;
  padding: 0.55em 0.8em;
  border: 2px solid var(--rand);
  border-radius: 10px;
  background: var(--weiss);
  color: var(--tinte);
  font: inherit;
  font-size: 1.125rem;
}
.feld input[aria-invalid="true"] { border-color: var(--fehler); border-width: 3px; }
.feld-hinweis { margin: 6px 0 0; font-size: 1rem; color: var(--tinte-leise); }
.fehler { margin: 6px 0 0; color: var(--fehler); font-weight: 700; font-size: 1rem; }

.wahl-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 12px; }
.wahl-paar label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  margin: 0;
  padding: 0.4em 0.7em;
  border: 2px solid var(--rand);
  border-radius: 10px;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.wahl-paar label:has(input:checked) { border-color: var(--navy); background: var(--eis); font-weight: 700; }
.wahl-paar input { width: 22px; height: 22px; margin: 0; accent-color: var(--navy); flex-shrink: 0; }
.wahl.ungueltig .wahl-paar label { border-color: var(--fehler); }

.feld .haken-zeile {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: var(--eis);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.42;
  cursor: pointer;
}
.haken-zeile input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--navy); }

.formular .btn {
  --btn: var(--navy);
  --btn-text: var(--weiss);
  --btn-hover: var(--petrol);
}
.formular .btn-leise {
  --btn: var(--eis);
  --btn-text: var(--navy);
  --btn-hover: #CCE5E7;
  min-height: 50px;
  font-size: 1.0625rem;
}
.formular-info { margin: 14px 0 0; font-size: 1rem; line-height: 1.45; color: var(--tinte-leise); max-width: none; }

.stand {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 6px solid var(--petrol);
  background: var(--eis);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}
.stand p { margin: 0; max-width: none; }
.stand-warteliste { border-left-color: #C28A00; background: #FFF4D1; }
.stand-zu { border-left-color: var(--rand); background: #EEF2F5; }

.status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--eis);
  font-weight: 700;
}
.status-vorschau { background: #FFF4D1; color: #5B4200; border: 2px dashed #C28A00; }
.status-fehler { background: #FBE9E7; color: var(--fehler); }
.status-sichtbar { display: block; }

.erfolg { padding: 4px 0 0; }
.erfolg h3 { margin-bottom: 0.5em; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); font-weight: 800; }
.erfolg p { margin-bottom: 1.2em; max-width: none; }
.erfolg:focus { outline: none; }
.kontakt-alternativ { margin-top: 16px; }
.kontakt-alternativ p { max-width: none; }

.koeder { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 10 Fragen */
.fragen details { border-top: 2px solid var(--navy); }
.fragen details:last-child { border-bottom: 2px solid var(--navy); }
.fragen summary {
  position: relative;
  padding: 18px 44px 18px 0;
  font-family: var(--schrift-titel);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::before, .fragen summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--navy);
}
.fragen summary::after { transform: rotate(90deg); }
.fragen details[open] summary::after { transform: rotate(0deg); }
.fragen details > div { padding-bottom: 20px; }

/* 11 Schluss */
.schluss h2 { font-size: clamp(2.25rem, 1rem + 3.9vw, 4.25rem); line-height: 1.03; margin-bottom: 0; }
.woche-schluss { margin-block: clamp(24px, 4vw, 44px); }
.schluss-zeile { display: grid; gap: 24px; }
.schluss-zeile .btn { width: 100%; }
@media (min-width: 480px) {
  .schluss-zeile .btn { width: auto; justify-self: start; }
}
@media (min-width: 960px) {
  .schluss-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .schluss-zeile .btn { justify-self: end; }
}

/* Fuss */
.fuss {
  padding-block: clamp(40px, 6vw, 72px) 28px;
  background: var(--tief);
  color: #D5E2EC;
  --fokus: var(--sonne);
  font-size: 1.0625rem;
}
.fuss a { color: var(--weiss); }
.fuss-raster { display: grid; gap: 28px var(--spalte); }
.fuss h2 {
  margin-bottom: 8px;
  color: var(--weiss);
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: 0;
}
.fuss a { display: inline-block; min-height: 28px; }
.fuss-marke {
  margin-bottom: 6px;
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 700;
}
.fuss-marke img { display: block; height: 44px; width: auto; max-width: 200px; }
.fuss-unten {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 1rem;
}
.fuss-unten p { margin-bottom: 8px; }
@media (min-width: 760px) {
  .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Rechtstexte (Impressum, Datenschutz) */
.recht { padding-block: clamp(36px, 6vw, 80px); }
.recht .wrap { max-width: 860px; }
.recht h1 {
  margin-bottom: 0.6em;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  line-height: 1.05;
  white-space: normal;
}
.recht h2 { margin: 1.8em 0 0.5em; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.15; }
.recht h3 { margin: 1.4em 0 0.3em; font-size: 1.1875rem; }
.recht p, .recht li { max-width: 70ch; }
.recht ul { margin: 0 0 1em; padding-left: 1.2em; }
.recht li { margin-bottom: 0.4em; }
.recht .zurueck { display: inline-block; margin-bottom: 24px; font-weight: 700; }
.recht-eingebettet { border-top: 8px solid var(--navy); background: var(--weiss); color: var(--tinte); }
.recht-eingebettet .wrap > h2:first-child { margin-top: 0; font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height: 1.05; }

@media (max-width: 400px) {
  .marke { font-size: 0.9375rem; }
  .btn-klein { font-size: 0.875rem; padding-inline: 0.8em; }
}
@media (max-width: 340px) {
  body { hyphens: auto; }
}

@media print {
  .kopf { position: static; }
  .woche-hero .tag { animation: none; }
}