/* ==========================================================================
   FolienMaxx – Themen-Landingpages (Arbeitsschutz, Förderung)
   --------------------------------------------------------------------------
   Ergänzt main.css, ersetzt nichts. Header, Footer, Buttons, Karten, FAQ und
   Kontakt kommen unverändert aus main.css. Hier stehen nur die Bausteine, die
   es auf der Startseite nicht gibt, und die Sektionsflächen als Klassen –
   auf der Startseite hängen sie an IDs, die hier nicht vorkommen.

   1 Hero · 2 Sektionsflächen · 3 Paragraphen-Karten · 5 Temperatur-Check · 6 TOP-Prinzip · 7 Vergleichstabelle · 8 Schritte
   11 Hinweisbox · 12 Unterlagen · 13 Bildsprache · 14 Förderung Sachsen
   ========================================================================== */

/* 1 — Hero ================================================================= */
.lp-hero .hero__stage { min-height: min(94svh, 860px); }
.lp-hero .hero__title { max-width: 16ch; font-size: clamp(2.5rem, 6.2vw, 5.6rem); }
.lp-hero .hero__frame { object-position: 62% 50%; }
.lp-hero .hero__frame--end { opacity: 1; animation: none; }

/* Info-Karte im Hero: gleiche Hülle wie die Preis-Karte, aber Liste statt Preis. */
.lp-infocard__liste { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.lp-infocard__liste li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3); align-items: start;
  font-size: var(--fs-small); color: var(--c-text); line-height: 1.5;
}
.lp-infocard__liste svg { width: 18px; height: 18px; color: var(--c-accent-text); margin-top: 2px; }
.lp-infocard__wert {
  margin-top: var(--sp-3);
  font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  font-size: clamp(3rem, 6vw, 4.25rem); font-variant-numeric: tabular-nums;
}
.lp-infocard__wert--text { font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.08; letter-spacing: -0.035em; }
.lp-infocard__wert small { font-size: .38em; letter-spacing: 0; color: var(--c-accent-text); margin-left: .1em; }

/* 2 — Sektionsflächen ======================================================
   Dieselbe Elevation-Ladder wie auf der Startseite (README §6b). */
.lp-white { background: var(--e-00); }
.lp-base  { background: var(--e-05); }
.lp-cool  { background: radial-gradient(85% 70% at 4% 12%, var(--wash-cool), transparent 64%), var(--e-10); }
.lp-warm  { background: radial-gradient(72% 80% at 96% 20%, var(--wash-warm), transparent 62%), var(--e-00); }
.lp-band  { background: var(--e-teal); border-block: 1px solid var(--c-line); }

.lp-white, .lp-base, .lp-cool, .lp-warm { position: relative; }
.lp-white::before, .lp-base::before, .lp-cool::before, .lp-warm::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--c-line); pointer-events: none;
}

/* Dunkle Markensektion – identisch zur Vorteile-Sektion der Startseite. */
.lp-dark {
  position: relative;
  color: #F4FBFB;
  background:
    radial-gradient(95% 70% at 5% 0%, rgba(0, 156, 148, .20), transparent 62%),
    radial-gradient(75% 85% at 100% 100%, rgba(0, 119, 113, .26), transparent 66%),
    linear-gradient(135deg, #004F4B 0%, #00625E 54%, #007771 100%);
}
.lp-dark .h2 { color: #F4FBFB; }
.lp-dark .lead, .lp-dark .overline { color: #F4FCFC; }
.lp-dark .overline::before { background: #66C9C2; opacity: 1; }
.lp-dark .card {
  background: #F7FBFB;
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 18px 45px rgba(3, 45, 43, .2);
}
.lp-dark .card__title { color: #123735; }
.lp-dark .card__text  { color: #466362; }
.lp-dark .card__num   { color: #557573; }
.lp-dark .card__icon  { border-color: rgba(0, 119, 113, .5); background: #E1F4F3; color: #004F4B; }
.lp-dark .card:hover  { border-color: #8DCECB; }

.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
@media (min-width: 1100px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* 3 — Paragraphen-Karten ==================================================== */
.paras { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.para {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--c-surface); border: var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--c-accent);
}
.para__quelle {
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-text);
}
.para__titel { font-size: 1.2rem; letter-spacing: -0.015em; }
.para__text  { color: var(--c-text-mute); font-size: var(--fs-small); line-height: 1.65; }
.para__folie {
  margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--c-line);
  display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3);
  font-size: var(--fs-small); color: var(--c-text);
}
.para__folie svg { width: 18px; height: 18px; color: var(--c-accent-text); margin-top: 3px; }

/* 5 — Temperatur-Check (Regler) ============================================ */
.tcheck {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--c-surface); border: 1px solid var(--c-accent-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 900px) { .tcheck { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; } }
.tcheck__label { font-weight: 600; font-size: var(--fs-small); display: block; margin-bottom: var(--sp-3); }
.tcheck__wert {
  font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  font-size: clamp(3.4rem, 8vw, 5.6rem); font-variant-numeric: tabular-nums;
  color: var(--tc, var(--c-text)); transition: color var(--t-base) var(--ease);
}
.tcheck__wert small { font-size: .4em; letter-spacing: 0; color: var(--c-text-mute); }
.tcheck__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin-top: var(--sp-4); background: transparent; cursor: pointer;
}
.tcheck__range::-webkit-slider-runnable-track {
  height: 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, #4FB3AD 0%, #4FB3AD 33%, #D9A441 33%, #D9A441 55%, #D9772A 55%, #D9772A 83%, #C0392B 83%);
}
.tcheck__range::-moz-range-track {
  height: 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, #4FB3AD 0%, #4FB3AD 33%, #D9A441 33%, #D9A441 55%, #D9772A 55%, #D9772A 83%, #C0392B 83%);
}
.tcheck__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -10px; border-radius: 50%;
  background: #FFFFFF; border: 3px solid var(--c-cta); box-shadow: var(--shadow-md);
}
.tcheck__range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #FFFFFF; border: 3px solid var(--c-cta); box-shadow: var(--shadow-md);
}
.tcheck__range:focus-visible { outline: none; }
.tcheck__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--c-cta); outline-offset: 3px; }
.tcheck__range:focus-visible::-moz-range-thumb { outline: 2px solid var(--c-cta); outline-offset: 3px; }
/* Die Marken stehen proportional zum Wertebereich 20–38 °C, damit 26, 30 und 35
   genau unter den Farbwechseln der Spur liegen. 15px = halbe Griffbreite. */
.tcheck__skala {
  position: relative; height: 1.4em; margin: var(--sp-1) 15px 0;
  font-family: var(--ff-mono); font-size: 11px; color: var(--c-text-dim);
}
.tcheck__skala span { position: absolute; left: calc(var(--p) * 100%); transform: translateX(-50%); white-space: nowrap; }
.tcheck__skala span:first-child { transform: none; margin-left: -15px; }
.tcheck__skala span:last-child  { transform: translateX(-100%); margin-left: 15px; }
.tcheck__ergebnis { display: grid; gap: var(--sp-3); }
.tcheck__stufe {
  justify-self: start;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px var(--sp-3); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tc, var(--c-accent)) 14%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--tc, var(--c-accent)) 45%, #FFFFFF);
}
.tcheck__titel { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.tcheck__text  { color: var(--c-text-mute); }
.tcheck__folie {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-sm);
  background: var(--e-teal); border: 1px solid var(--c-accent-line);
  font-size: var(--fs-small);
}
.tcheck__folie svg { width: 20px; height: 20px; color: var(--c-accent-text); margin-top: 2px; }
.tcheck__quelle { font-size: var(--fs-micro); color: var(--c-text-dim); }

/* 6 — TOP-Prinzip ========================================================== */
.top { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.top__item {
  position: relative; padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--c-surface); border: var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.top__item--aktiv { border-color: var(--c-accent); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--c-accent); }
.top__item .top__buchstabe {
  font-family: var(--ff-display); font-weight: 800; font-size: 3.4rem; line-height: 1;
  letter-spacing: -0.05em; color: var(--c-text-dim); opacity: .5;
}
.top__item--aktiv .top__buchstabe,
.top__item.top__item--aktiv .top__buchstabe { color: var(--c-accent); opacity: 1; }
.top__item h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: 1.2rem; }
.top__item p { color: var(--c-text-mute); font-size: var(--fs-small); }
.top__flag {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--c-accent-fill); color: #FFFFFF; padding: 4px var(--sp-3); border-radius: var(--r-pill);
}

/* 7 — Vergleichstabelle ==================================================== */
.vgl {
  background: var(--c-surface); border: var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); overflow-x: auto;
}
.vgl table { min-width: 720px; font-size: var(--fs-small); }
.vgl th, .vgl td { padding: var(--sp-4) var(--sp-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.vgl thead th { background: var(--e-15); color: var(--c-text-mute); font-weight: 600; white-space: nowrap; }
.vgl tbody th { font-weight: 600; color: var(--c-text); white-space: nowrap; }
.vgl td { color: var(--c-text-mute); }
.vgl tbody tr:last-child > * { border-bottom: 0; }
.vgl .is-folie { background: var(--c-accent-soft); }
.vgl thead .is-folie { background: var(--c-accent-fill); color: #FFFFFF; }
.vgl__wert { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-text); font-weight: 600; }
.vgl__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.vgl__dot--gut  { background: var(--c-accent); }
.vgl__dot--mit  { background: #D9A441; }
.vgl__dot--weak { background: #B9C6C9; }
/* Schmale Displays: Kriterienspalte bleibt beim Wischen stehen, der Rest
   scrollt im eigenen Rahmen. Der Hinweis darüber sagt, dass es weitergeht. */
.vgl__wisch { display: none; }
@media (max-width: 760px) {
  .vgl__wisch { display: block; margin-bottom: var(--sp-3); font-size: var(--fs-micro); color: var(--c-text-dim); }
  .vgl table { min-width: 640px; }
  .vgl th, .vgl td { padding: var(--sp-3) var(--sp-4); }
  .vgl tbody th, .vgl thead th:first-child {
    position: sticky; left: 0; z-index: 1;
    width: 7.5rem; min-width: 7.5rem; white-space: normal;
    background: #FFFFFF; box-shadow: 1px 0 0 var(--c-line);
  }
  .vgl thead th:first-child { background: var(--e-15); }
}
.vgl__hinweis { margin-top: var(--sp-4); font-size: var(--fs-micro); color: var(--c-text-dim); max-width: 90ch; }

/* 8 — Schritte (statisch) ================================================== */
.lp-steps { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); counter-reset: s; }
@media (min-width: 1200px) { .lp-steps--5 { grid-template-columns: repeat(5, 1fr); } }
.lp-step {
  position: relative; padding: clamp(1.4rem, 2.4vw, 2rem);
  background: #FFFFFF; border: var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.lp-step__idx {
  display: block; margin-bottom: var(--sp-4);
  font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); color: var(--c-accent-text);
}
.lp-step h3 { font-size: 1.15rem; margin-bottom: var(--sp-2); }
.lp-step p { color: var(--c-text-mute); font-size: var(--fs-small); }
.lp-step--wichtig { border-color: var(--c-accent); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--c-accent); }
/* Das Etikett sitzt auf der oberen Kante: In schmalen Karten (fünf Spalten)
   würde es sonst die Schrittnummer überdecken. */
.lp-step__flag {
  position: absolute; top: -11px; right: var(--sp-4);
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--c-accent-fill); color: #FFFFFF; padding: 3px var(--sp-3); border-radius: var(--r-pill);
}

/* 11 — Hinweisbox ========================================================== */
.hinweis {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-4); align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: var(--sp-5);
  background: #FFF6E5; border: 1px solid #E0A94A; border-radius: var(--r-md);
  font-size: var(--fs-small); color: #5A3E06; line-height: 1.6;
}
.hinweis svg { width: 22px; height: 22px; color: #8A5D08; margin-top: 1px; }
.hinweis b { color: #4A3205; }
.hinweis a { color: #4A3205; text-decoration: underline; text-underline-offset: 2px; }

/* 12 — Unterlagen-Liste ===================================================== */
.docs { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 960px) { .docs { grid-template-columns: 1fr 1fr; } }
.docs__bild img { border-radius: var(--r-md); border: var(--border); width: 100%; box-shadow: var(--shadow-md); }
.docs__body > * + * { margin-top: var(--sp-5); }

/* Sprungmarken-Zeile unter dem Hero ------------------------------------------ */
.lp-jump { border-block: 1px solid var(--c-line); background: var(--e-15); }
.lp-jump__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-4); }
.lp-jump__liste a {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 600; color: var(--c-text-mute);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.lp-jump__liste a:hover { color: var(--c-text); background: rgba(16, 23, 25, .06); }
.lp-jump__liste svg { width: 14px; height: 14px; color: var(--c-accent-text); }

.lp-stand { margin-top: var(--sp-4); font-size: var(--fs-micro); color: var(--c-text-dim); }

@media (prefers-reduced-motion: reduce) {
  .tcheck__wert { transition: none; }
}

/* ==========================================================================
   13 — BILDSPRACHE
   Alle Fotos der Themenseiten liegen unter assets/img/themen/ mit festem
   Dateinamen je Bildplatz. Neue Motive unter demselben Namen ablegen –
   am HTML ändert sich nichts. Prompts: prompts-images-themenseiten.json
   ========================================================================== */

/* --- 13.1 Piktogramm-Kachel ---------------------------------------------- */
.pikto {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--e-teal); border: 1px solid var(--c-accent-line);
  color: var(--c-accent-text);
}
.pikto svg { width: 24px; height: 24px; }
.para__kopf { display: flex; align-items: center; gap: var(--sp-4); }

/* --- 13.2 Vorher/Nachher-Sektion (Regler aus main.css §10/§31) ----------- */
.lp-ba { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 1024px) { .lp-ba { grid-template-columns: 1.25fr .75fr; } }
.lp-ba__copy > * + * { margin-top: var(--sp-5); }

/* --- 13.3 Thermometer im Temperatur-Check -------------------------------- */
.tcheck__anzeige { display: flex; align-items: center; gap: var(--sp-5); }
.thermo { width: 64px; height: auto; flex: none; overflow: visible; }
.thermo__fill, .thermo__bulb { fill: var(--tc, var(--c-accent)); transition: fill var(--t-base) var(--ease); }
.thermo__fill { transition: y 260ms var(--ease-out), height 260ms var(--ease-out), fill var(--t-base) var(--ease); }
.thermo__glas { fill: #FFFFFF; stroke: #C3D0D3; stroke-width: 2; }
.thermo__marke { stroke: #9AAAB0; stroke-width: 1.5; }
.thermo__text { font: 600 10px var(--ff-mono); fill: var(--c-text-dim); }

/* --- 13.4 Bild in Karten (TOP, Schritte) --------------------------------- */
.top__item--bild { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.top__bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.top__inhalt { padding: clamp(1.25rem, 2.4vw, 1.9rem); }
.top__item--bild .top__flag { top: var(--sp-4); }

.lp-step--bild { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.lp-step__bild { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--e-10); }
.lp-step__body { padding: clamp(1.2rem, 2.2vw, 1.7rem); }
.lp-step--bild .lp-step__flag { top: var(--sp-3); }

/* --- 13.5 Bildband in der dunklen Sektion -------------------------------- */
.lp-banner {
  position: relative; margin-bottom: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45);
}
.lp-banner img { width: 100%; aspect-ratio: 7 / 3; object-fit: cover; }
@media (max-width: 700px) { .lp-banner img { aspect-ratio: 4 / 3; } }
.lp-banner__cap {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4); max-width: calc(100% - 2rem);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .94); color: var(--c-text);
  font-size: var(--fs-small); box-shadow: var(--shadow-sm);
}
.lp-banner__cap b { color: var(--c-accent-text); }

/* --- 13.6 Galerie: Einsatzorte ------------------------------------------- */
.galerie { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.galerie__item {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: var(--r-md); box-shadow: var(--shadow-md);
}
.galerie__item img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.galerie__item::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 26, 25, 0) 30%, rgba(6, 26, 25, .55) 58%, rgba(6, 26, 25, .9) 100%);
}
.galerie__item:hover img { transform: scale(1.04); }
.galerie__body { position: absolute; inset: auto 0 0 0; padding: var(--sp-5); color: #FFFFFF; }
.galerie__typ { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: #BDEDEA; }
.galerie__titel { font-size: 1.2rem; color: #FFFFFF; margin: var(--sp-2) 0; letter-spacing: -0.015em; }
.galerie__text { font-size: var(--fs-small); color: rgba(255, 255, 255, .9); line-height: 1.55; }
@media (max-width: 559px) { .galerie__item { aspect-ratio: 4 / 3; } }

/* --- 13.7 Piktogramme im Tabellenkopf ------------------------------------ */
.vgl__kopf { display: grid; justify-items: start; gap: var(--sp-2); }
.vgl__pikto { width: 44px; height: 44px; color: var(--c-text-mute); }
.vgl thead .is-folie .vgl__pikto { color: #FFFFFF; }

/* --- 13.9 Zeitstrahl: Antrag vor Auftrag ---------------------------------
   Eine Zeile statt fünf Karten: dieselben Inhalte, ein Drittel der Höhe. */
.zeit {
  padding: clamp(1.25rem, 2.6vw, 2rem);
  background: #FFFFFF; border: var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.zeit__reihe { position: relative; display: grid; gap: var(--sp-4); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.zeit__reihe::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: 19px; height: 2px;
  background: var(--c-accent-line);
}
.zeit__punkt { position: relative; display: grid; gap: var(--sp-1); align-content: start; }
.zeit__dot {
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: var(--sp-2);
  display: grid; place-items: center;
  background: #FFFFFF; border: 2px solid var(--c-accent); color: var(--c-accent-text);
  font: 700 var(--fs-small) var(--ff-mono);
}
.zeit__punkt--key .zeit__dot { background: var(--c-accent); color: #FFFFFF; box-shadow: 0 0 0 6px var(--c-accent-soft); }
.zeit__punkt b { font-size: .98rem; line-height: 1.3; }
.zeit__punkt small { font-size: var(--fs-small); color: var(--c-text-mute); line-height: 1.5; }
.zeit__chip {
  justify-self: start; margin-top: var(--sp-1);
  font: 700 10px var(--ff-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px var(--sp-3); border-radius: var(--r-pill);
  background: var(--e-teal); border: 1px solid var(--c-accent-line); color: var(--c-accent-text);
}
.zeit__warnung {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  background: #FFF4F2; border: 1px solid #EBC3BC; border-radius: var(--r-sm);
  font-size: var(--fs-small); color: #6E2219;
}
.zeit__warnung svg { width: 20px; height: 20px; flex: none; color: var(--c-danger); margin-top: 1px; }
.zeit__warnung b { color: #5A1A13; }

@media (max-width: 860px) {
  .zeit__reihe { grid-template-columns: 1fr; gap: var(--sp-4); }
  .zeit__reihe::before { left: 19px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; }
  .zeit__punkt { grid-template-columns: 40px 1fr; column-gap: var(--sp-4); }
  .zeit__punkt > :not(.zeit__dot) { grid-column: 2; }
  .zeit__dot { grid-row: span 3; margin-bottom: 0; }
}

/* --- 13.11 Unterlagen-Mappe (Illustration aus HTML) ---------------------- */
.mappe { position: relative; min-height: 420px; display: grid; place-items: center; padding: var(--sp-6) var(--sp-4); }
.mappe::before {
  content: ""; position: absolute; inset: 8% 4%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--wash-teal), transparent);
}
.mappe__blatt {
  position: absolute; width: min(74%, 340px); padding: var(--sp-5);
  background: #FFFFFF; border: 1px solid var(--c-line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
}
.mappe__blatt--1 { transform: translate(-16%, -10%) rotate(-7deg); }
.mappe__blatt--2 { transform: translate(14%, -2%) rotate(5deg); }
.mappe__blatt--3 { position: relative; transform: translate(-2%, 10%) rotate(-1deg); }
.mappe__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 2px solid var(--c-accent); }
.mappe__kopf b { font-size: var(--fs-small); }
.mappe__kopf span { font: 600 10px var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-text); }
.mappe__zeile { display: flex; justify-content: space-between; gap: var(--sp-3); padding-block: 6px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-micro); color: var(--c-text-mute); }
.mappe__zeile b { color: var(--c-text); font-variant-numeric: tabular-nums; }
.mappe__linie { height: 7px; border-radius: 4px; background: var(--e-15); margin-block: 9px; }
.mappe__linie--kurz { width: 60%; }
.mappe__stempel {
  position: absolute; right: -14px; bottom: -16px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs);
  border: 2px solid var(--c-accent); color: var(--c-accent-text); background: #FFFFFF;
  font: 700 11px var(--ff-mono); letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-6deg); box-shadow: var(--shadow-sm);
}
@media (max-width: 559px) { .mappe { min-height: 360px; } .mappe__blatt--1, .mappe__blatt--2 { display: none; } .mappe__blatt--3 { transform: none; } }

/* TOP: drei gleich große Kacheln, jede mit Bild oben. */
@media (min-width: 900px) { .top { grid-template-columns: repeat(3, 1fr); } }

/* --- 13.12 Split-Motiv: eine Scheibe, halb mit, halb ohne Folie ---------- */
.split { position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); }
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__tag {
  position: absolute; top: var(--sp-4);
  font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .94); box-shadow: var(--shadow-sm);
}
.split__tag--mit  { left: var(--sp-4); color: var(--c-accent-text); border: 1px solid var(--c-accent); font-weight: 700; }
.split__tag--ohne { right: var(--sp-4); color: var(--c-text); border: 1px solid var(--c-line-input); }

/* --- 13.13 Sachsen: Siegel im Hero, Ebenen Bund/Land, Städte ------------- */
.hero__copy .sachsen-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  background: #FFFFFF; border: 1px solid var(--c-accent);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-small); font-weight: 700; color: var(--c-text);
}
.sachsen-badge svg { width: 18px; height: 18px; color: var(--c-accent-text); }

.staedte { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.staedte__label { font-size: var(--fs-small); color: var(--c-text-mute); margin-bottom: var(--sp-4); }
.staedte__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.staedte__liste li {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: #FFFFFF; border: 1px solid var(--c-line-input);
  font-size: var(--fs-small); font-weight: 600; color: var(--c-text);
}

/* ==========================================================================
   14 — FÖRDERUNG SACHSEN (Aufbau wie Flyer Klimaanpassung DIN lang)
   ========================================================================== */

/* --- 14.1 Förderkarte im Hero ------------------------------------------- */
.foerderkarte__wert {
  margin-top: var(--sp-2);
  font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  font-size: clamp(3.6rem, 7vw, 5.2rem); color: var(--c-accent); font-variant-numeric: tabular-nums;
}
.foerderkarte__wert small { font-size: .5em; letter-spacing: 0; }
.foerderkarte__bis { display: block; font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--c-text-mute); margin-bottom: var(--sp-1); }
.foerderkarte__fakten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.foerderkarte__fakten div { padding: var(--sp-3); background: var(--e-teal); border-top: 3px solid var(--c-accent); border-radius: 0 0 var(--r-xs) var(--r-xs); }
.foerderkarte__fakten dt { font-family: var(--ff-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.foerderkarte__fakten dd { font-size: var(--fs-micro); color: var(--c-text-mute); line-height: 1.4; }

/* --- 14.2 Bild + Text nebeneinander ------------------------------------ */
.fl-split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 960px) { .fl-split { grid-template-columns: 1fr 1.1fr; } .fl-split--rechts { grid-template-columns: 1.1fr 1fr; } }
.fl-split > div > * + * { margin-top: var(--sp-5); }
.fl-split--rechts { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.fl-bild { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.fl-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.h2 .accent { color: var(--c-accent-gross); }

/* --- 14.3 Investiv / Nichtinvestiv ------------------------------------- */
.fl-spalten { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .fl-spalten { grid-template-columns: 1fr 1fr; } }
.fl-spalte__kopf {
  padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-2);
  background: var(--c-accent-fill); color: #FFFFFF;
  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.fl-liste li {
  position: relative; padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-text-mute);
}
.fl-liste li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 7px; height: 7px; background: var(--c-accent); }
.fl-liste li.is-folie b { color: var(--c-accent-text); }
.fl-folie {
  display: inline-block; margin-top: var(--sp-2);
  font: 700 10px var(--ff-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px var(--sp-3); border-radius: var(--r-pill);
  background: var(--e-teal); border: 1px solid var(--c-accent-line); color: var(--c-accent-text);
}

/* --- 14.4 Antragsberechtigte ------------------------------------------- */
.fl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fl-chips li {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: var(--e-teal); border: 1px solid var(--c-accent-line);
  font-size: var(--fs-small); font-weight: 700; color: var(--c-accent-text);
}
.fl-achtung {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); font-weight: 700; color: var(--c-accent-text);
}
.fl-achtung svg { width: 22px; height: 22px; color: var(--c-accent); flex: none; }
#antragsberechtigte .staedte { text-align: left; }
#antragsberechtigte .staedte__liste { justify-content: flex-start; }

/* --- 14.5 Förderhöhe ----------------------------------------------------- */
.fl-hoehe { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 960px) { .fl-hoehe { grid-template-columns: 1.4fr 1fr; } }
.fl-karte {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #FFFFFF; color: var(--c-text); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45);
}
.fl-balken {
  display: grid; grid-template-columns: 75fr 5fr 20fr; align-items: stretch;
  height: 48px; border-radius: var(--r-xs); overflow: hidden; background: var(--e-10);
}
.fl-balken__basis {
  display: flex; align-items: center; gap: var(--sp-2); padding-inline: var(--sp-4);
  background: var(--c-accent-fill); color: #FFFFFF; font-size: var(--fs-small);
}
.fl-balken__basis b { font-size: 1.05rem; }
.fl-balken__bonus {
  grid-column: 2 / 4; display: flex; align-items: center; justify-content: flex-end; padding-right: var(--sp-4);
  background: linear-gradient(90deg, #4FB3AD 0 20%, var(--e-teal) 20%);
  font-size: var(--fs-small); font-weight: 700; color: var(--c-accent-text);
}
.fl-balken__bonus { white-space: nowrap; }
/* Schmal: Balken bleibt maßstäblich (75 zu 80), nur die Beschriftung wird kürzer.
   Der Balken trägt role="img" mit aria-label, der Text ist rein visuell. */
@media (max-width: 480px) {
  .fl-balken__bonus { padding-right: var(--sp-2); font-size: 0; }
  .fl-balken__bonus::after { content: "80 %"; font-size: var(--fs-micro); }
}
.fl-karte__titel { margin-top: var(--sp-5); font-weight: 700; }
.fl-bedingungen { counter-reset: b; display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.fl-bedingungen li { counter-increment: b; display: grid; grid-template-columns: 1.6rem 1fr; font-size: var(--fs-small); color: var(--c-text-mute); }
.fl-bedingungen li::before { content: counter(b); font-weight: 800; color: var(--c-accent-text); }
.fl-ausgaben { margin-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.fl-ausgaben div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-4); padding-block: var(--sp-3); border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); }
.fl-ausgaben dt { font-weight: 700; }
.fl-ausgaben dd { color: var(--c-text-mute); }
.fl-ausgaben b { color: var(--c-accent-text); }
@media (max-width: 480px) { .fl-ausgaben div { grid-template-columns: 1fr; gap: var(--sp-1); } }

.fl-bild--hoch { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45); }
.fl-bild--hoch img { aspect-ratio: 4 / 5; height: 100%; }
@media (min-width: 960px) { .fl-hoehe { align-items: stretch; } }

/* --- 14.6 Voraussetzungen ------------------------------------------------ */
.fl-wichtig {
  padding: var(--sp-5) var(--sp-6);
  background: #FFF6E5; border-left: 5px solid #D9A441; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: #4A3205;
}
.fl-wichtig__kopf { font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A5D08; margin-bottom: var(--sp-2); }
.fl-wichtig p:last-child { font-size: 1.1rem; font-weight: 700; }
.fl-punkte { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); max-width: 70ch; }
.fl-punkte li { position: relative; padding-left: var(--sp-5); color: var(--c-text-mute); }
.fl-punkte li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--c-accent); }
.fl-punkte b { color: var(--c-text); }