/* ==========================================================================
   Marchesan Software Solutions: Website (Tactical und Leidang)
   Farben und Schrift nach dem Marchesan Designsystem (Werkstatt, Linie Militär)
   Raster 8px. Typo-Skala 1.25. Keine externen Ressourcen.

   Aufbau
    1  Schriften und Grundwerte
    2  Grundelemente
    3  Kopfzeile, Knöpfe, Abschnitte
    4  Startbereich (Hero), Seitenkopf, Screenshots
    5  Bausteine: Leiste, Blöcke, Karten, Schritte, Fakten, Person, Preise, Tabelle, FAQ, Aufruf
    6  Programme, Formulare, Rechtstexte, Fusszeile, Hilfsklassen
    7  Rollen, Produktseiten, Rollenseiten, mobile Leiste, Steckbrief
    8  Videos, Sicherheit, Glossar, Ratgeber, Login, Produktleiste, Linie Zivil
    9  Demo im Browser
   10  Startseite und Über mich: Produktreihen, Porträt, Geschichte
   11  Programme-Übersicht: Aufgabenfinder
   12  Programmseiten: Vom Auftrag zum Druck
   13  Bewegung, Fokus und Auswahl
   14  Druck
   Die Reihenfolge ist Teil der Kaskade: Abschnitte 13 und 14 stehen bewusst am Schluss.
   ========================================================================== */

/* 1  Schriften und Grundwerte
   -------------------------------------------------------------------------- */
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Ersatzschrift mit angeglichenen Massen: kein Springen der Zeilen, wenn Barlow nachlädt */
@font-face { font-family: "Barlow Ersatz"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); font-weight: 400; size-adjust: 95.8%; ascent-override: 104.4%; descent-override: 20.9%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Ersatz"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); font-weight: 500; size-adjust: 96.5%; ascent-override: 103.6%; descent-override: 20.7%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Ersatz"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); font-weight: 600 700; size-adjust: 91.2%; ascent-override: 109.7%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: "Barlow SC Ersatz"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); font-weight: 600 700; size-adjust: 83.5%; ascent-override: 119.8%; descent-override: 24%; line-gap-override: 0%; }

:root {
  /* Farben */
  --anthrazit: #384042;
  --nacht: #23292B;
  --nacht-2: #2C3335;
  --papier: #F5F4F0;
  --weiss: #FFFFFF;
  --linie: #DCDAD2;
  --linie-dunkel: #434B4D;
  --text: #1F2526;
  --text-2: #4E585A;
  --text-hell: #E9EBE7;
  --text-hell-2: #B3BAB8;
  --oliv: #56633A;
  --oliv-dunkel: #47522F;
  --oliv-hell: #A7B575;
  --oliv-flaeche: #EEF0E6;
  --rot: #C22127;

  /* Abstände (8er-Raster) */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px;

  /* Schrift */
  --f-text: "Barlow", "Barlow Ersatz", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-titel: "Barlow Semi Condensed", "Barlow SC Ersatz", "Barlow", system-ui, sans-serif;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: 1.5625rem;
  --t-xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem);
  --t-xxl: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);

  --breite: 1200px;
  --rand: 24px;
  --radius: 3px;
  --schatten: 0 6px 24px rgba(20,24,25,.10);
}

/* 2  Grundelemente
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--f-text);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--papier);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oliv); text-underline-offset: 3px; }
a:hover { color: var(--oliv-dunkel); }
p { margin: 0 0 var(--s3); }
ul, ol { margin: 0 0 var(--s3); padding-left: 1.25em; }
h1, h2, h3, h4 { font-family: var(--f-titel); font-weight: 700; line-height: 1.15; margin: 0 0 var(--s3); color: inherit; letter-spacing: -0.005em; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); font-weight: 600; line-height: 1.25; }
h4 { font-size: var(--t-md); font-weight: 600; line-height: 1.3; }
strong { font-weight: 600; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--weiss); color: var(--text); padding: var(--s2) var(--s3); z-index: 100; }
.skip:focus { left: var(--s3); top: var(--s3); }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.wrap--schmal { max-width: 800px; }
.lesetext { max-width: 68ch; }

/* 3  Kopfzeile
   -------------------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--anthrazit);
  border-bottom: 3px solid var(--oliv);
  color: var(--text-hell);
}
.kopf__inner { display: flex; align-items: center; gap: var(--s4); min-height: 72px; }
.marke { display: flex; align-items: center; gap: 12px; color: var(--weiss); text-decoration: none; margin-right: auto; }
.marke:hover { color: var(--weiss); }
.marke img { width: 44px; height: auto; }
.marke__text { display: flex; flex-direction: column; line-height: 1.1; }
.marke__name { font-family: var(--f-titel); font-weight: 700; font-size: 1.25rem; letter-spacing: .01em; }
.marke__sub { font-size: .75rem; color: var(--text-hell-2); letter-spacing: .04em; }

.nav { display: flex; align-items: center; gap: var(--s1); }
.nav a {
  color: var(--text-hell); text-decoration: none; font-weight: 500;
  padding: var(--s2) 12px; border-radius: var(--radius);
}
.nav a:hover { background: rgba(255,255,255,.08); color: var(--weiss); }
.nav a[aria-current="page"] { color: var(--weiss); box-shadow: inset 0 -2px 0 var(--oliv-hell); border-radius: 0; }
.nav .btn { margin-left: var(--s2); }

.menue-knopf {
  display: none; background: transparent; border: 1px solid var(--linie-dunkel); color: var(--weiss);
  border-radius: var(--radius); padding: 10px 14px; font: inherit; font-weight: 600; cursor: pointer;
  align-items: center; gap: 10px;
}
.menue-knopf__striche { width: 18px; height: 12px; position: relative; display: inline-block; }
.menue-knopf__striche::before, .menue-knopf__striche::after, .menue-knopf__striche span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.menue-knopf__striche::before { top: 0; }
.menue-knopf__striche span { top: 5px; }
.menue-knopf__striche::after { bottom: 0; }

@media (max-width: 1180px) {
  .menue-knopf { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--anthrazit); border-bottom: 3px solid var(--oliv);
    padding: var(--s2) var(--rand) var(--s4);
  }
  .nav.offen { display: flex; }
  .nav a { padding: 14px var(--s2); border-bottom: 1px solid var(--linie-dunkel); border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--oliv-hell); }
  .nav .btn { margin: var(--s3) 0 0; border-bottom: 0; text-align: center; justify-content: center; }
}

/* 3  Knöpfe (Übergänge: Abschnitt 13)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 12px 22px;
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none;
  border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
}
.btn--primaer { background: var(--oliv); color: var(--weiss); border-color: var(--oliv); }
.btn--primaer:hover { background: var(--oliv-dunkel); border-color: var(--oliv-dunkel); color: var(--weiss); }
.btn--sekundaer { background: transparent; color: var(--text); border-color: #B9B7AE; }
.btn--sekundaer:hover { border-color: var(--text); color: var(--text); }
.dunkel .btn--sekundaer { color: var(--text-hell); border-color: #6B7476; }
.dunkel .btn--sekundaer:hover { color: var(--weiss); border-color: var(--text-hell); }
.dunkel .btn--primaer { background: var(--oliv-hell); border-color: var(--oliv-hell); color: #161A12; }
.dunkel .btn--primaer:hover { background: #BAC78A; border-color: #BAC78A; color: #161A12; }
.kopf .btn--primaer { min-height: 40px; padding: 8px 16px; background: var(--oliv-hell); border-color: var(--oliv-hell); color: #161A12; }
.kopf .btn--primaer:hover { background: #BAC78A; color: #161A12; }
.btn--breit { width: 100%; }
.btn-reihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pfeil::after { content: "\2192"; display: inline-block; margin-left: 2px; }
.textlink { font-weight: 600; text-decoration: none; }
.textlink:hover { text-decoration: underline; }

/* 3  Abschnitte
   -------------------------------------------------------------------------- */
.abschnitt { padding: var(--s8) 0; }
.abschnitt--weiss { background: var(--weiss); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.abschnitt--eng { padding: var(--s7) 0; }
.dunkel { background: var(--nacht); color: var(--text-hell); }
.dunkel a:not(.btn) { color: var(--oliv-hell); }
.dunkel p { color: var(--text-hell-2); }
.dunkel h1, .dunkel h2, .dunkel h3, .dunkel h4, .dunkel strong { color: var(--weiss); }
@media (max-width: 720px) {
  .abschnitt { padding: var(--s7) 0; }
  .abschnitt--eng { padding: var(--s6) 0; }
  :root { --rand: 16px; }
}
.abschnitt--formular { padding-top: var(--s6); }
@media (max-width: 640px) { .abschnitt { padding: 56px 0; } }

.kicker {
  display: inline-block; font-size: var(--t-sm); font-weight: 600; letter-spacing: .055em; text-transform: uppercase;
  color: var(--oliv); margin-bottom: 12px;
}
.dunkel .kicker { color: var(--oliv-hell); }
h2.kicker { font-family: var(--f-text); line-height: inherit; }
.kopfteil { max-width: 720px; margin-bottom: var(--s6); }
.kopfteil--mitte { margin-left: auto; margin-right: auto; text-align: center; }
.kopfteil p { font-size: var(--t-md); color: var(--text-2); line-height: 1.55; margin: 0; }
.dunkel .kopfteil p { color: var(--text-hell-2); }

/* 4  Startbereich (Hero)
   -------------------------------------------------------------------------- */
.hero { background: var(--nacht); color: var(--text-hell); padding: 88px 0 72px; overflow: hidden; border-bottom: 5px solid #A7B575; }
.hero__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.hero h1 { color: var(--weiss); margin-bottom: var(--s4); font-size: clamp(2.5rem, 4.1vw, 4rem); max-width: 15ch; line-height: 1.08; letter-spacing: -.02em; }
.hero__lead { font-size: 1.2rem; line-height: 1.65; color: var(--text-hell-2); margin-bottom: var(--s5); max-width: 39ch; }
.hero__klein { font-size: var(--t-sm); color: var(--text-hell-2); margin: var(--s3) 0 0; }
.hero__punkte { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: 10px; }
.hero__punkte li { position: relative; padding-left: 28px; color: var(--text-hell); }
.hero__punkte li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px;
  border-left: 2px solid var(--oliv-hell); border-bottom: 2px solid var(--oliv-hell); transform: rotate(-45deg);
}
/* Drei Gründe unter den Knöpfen, auch im Kopf der Produktseiten */
.produkt-hero .hero__punkte, .hero .hero__punkte { margin: var(--s5) 0 0; gap: 8px; font-size: var(--t-sm, .95rem); }
@media (max-width: 1020px) {
  .hero__raster { grid-template-columns: 1fr; }
  .hero__lead { max-width: 55ch; }
}
@media (max-width: 640px) {
  .hero { padding: 48px 0; }
  .hero h1 { font-size: 2.7rem; max-width: 17ch; }
  .hero .btn-reihe { align-items: stretch; flex-direction: column; }
}

/* 4  Seitenkopf der Unterseiten
   -------------------------------------------------------------------------- */
.seitenkopf { background: var(--nacht); color: var(--text-hell); padding: var(--s7) 0 var(--s7); }
.seitenkopf h1 { color: var(--weiss); margin-bottom: var(--s3); font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.seitenkopf p { color: var(--text-hell-2); font-size: var(--t-md); max-width: 46em; margin: 0; }
.brotkrumen { font-size: var(--t-sm); color: var(--text-hell-2); margin-bottom: var(--s3); }
.brotkrumen a { color: var(--text-hell-2); }

/* 4  Screenshots
   -------------------------------------------------------------------------- */
.shot { margin: 0; }
.shot img {
  width: 100%; border-radius: 8px; border: 1px solid #C9C7BE; background: #1B2022;
  box-shadow: var(--schatten);
}
.dunkel .shot img, .hero .shot img { border-color: #4A5355; }
.dunkel .shot img { box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.hero .shot img { border-radius: 3px; box-shadow: 14px 14px 0 #384042; }
.shot figcaption { font-size: var(--t-sm); color: var(--text-2); margin-top: 12px; }
.dunkel .shot figcaption, .hero .shot figcaption { color: var(--text-hell-2); }
.hero .shot figcaption { margin-top: 24px; }
@media (max-width: 640px) { .hero .shot img { box-shadow: 6px 6px 0 #384042; } }

/* 5  Vertrauensleiste
   -------------------------------------------------------------------------- */
.leiste { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.leiste__liste { list-style: none; margin: 0; padding: var(--s4) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.leiste__liste li { display: flex; flex-direction: column; gap: 2px; padding-left: var(--s3); border-left: 3px solid var(--oliv); }
.leiste__zahl { font-family: var(--f-titel); font-weight: 700; font-size: 1.3rem; line-height: 1.1; }
.leiste__text { font-size: var(--t-sm); color: var(--text-2); }
@media (max-width: 860px) { .leiste__liste { grid-template-columns: repeat(2, 1fr); } }

/* 5  Titel links, Inhalt rechts
   -------------------------------------------------------------------------- */
.geteilt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
.geteilt__titel { position: sticky; top: 112px; }
.geteilt__titel p { color: var(--text-2); font-size: var(--t-md); }
@media (max-width: 900px) { .geteilt { grid-template-columns: 1fr; gap: var(--s5); } .geteilt__titel { position: static; } }

/* 5  Funktionsblöcke (Bild und Text)
   -------------------------------------------------------------------------- */
.block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: center; }
.block + .block { margin-top: var(--s8); }
.block__text h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 700; }
.block__text > p { color: var(--text-2); }
.block__text .btn-reihe { margin: var(--s3) 0 0; }
@media (max-width: 900px) {
  .block { grid-template-columns: 1fr; gap: var(--s5); }
  .block + .block { margin-top: var(--s7); }
}

.haken { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: 10px; }
.haken li { position: relative; padding-left: 28px; }
.haken li::before {
  content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px;
  border-left: 2px solid var(--oliv); border-bottom: 2px solid var(--oliv); transform: rotate(-45deg);
}
.dunkel .haken li::before { border-color: var(--oliv-hell); }

/* 5  Karten
   -------------------------------------------------------------------------- */
.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.karten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1020px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .karten, .karten--zwei { grid-template-columns: 1fr; } }

.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s4); display: flex; flex-direction: column; }
.karte h3 { font-size: var(--t-md); margin-bottom: var(--s2); }
.karte p { color: var(--text-2); margin-bottom: var(--s3); }
.karte > :last-child { margin-bottom: 0; }
.dunkel .karte { background: var(--nacht-2); border-color: var(--linie-dunkel); }

.progkarte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.progkarte:hover { border-color: var(--oliv); color: inherit; }
.progkarte img { aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border-bottom: 1px solid var(--linie); background: #1B2022; }
.progkarte__text { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; flex: 1; }
.progkarte__bereich { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: var(--s1); }
.progkarte h3 { font-size: var(--t-md); margin-bottom: var(--s2); }
.progkarte p { color: var(--text-2); margin: 0 0 var(--s3); font-size: 1rem; }
.progkarte .textlink { margin-top: auto; color: var(--oliv); }
.karte__preis { font-family: var(--f-titel); font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: var(--text); margin: var(--s2) 0 var(--s1); }
.karte__preis small { font-family: var(--f-text); font-weight: 500; font-size: 1rem; color: var(--text-2); }
.karte__rs { font-size: .9375rem; color: var(--text-2); margin: 0; }

/* 5  Schritte
   -------------------------------------------------------------------------- */
.schritte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); counter-reset: s; }
.schritte li { counter-increment: s; padding-top: var(--s4); border-top: 3px solid var(--oliv); }
.schritte li::before { content: "Schritt " counter(s); display: block; font-size: var(--t-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--oliv); margin-bottom: var(--s2); }
.schritte h3 { font-size: var(--t-md); margin-bottom: var(--s2); }
.schritte p { color: var(--text-2); margin: 0; }
@media (max-width: 860px) { .schritte { grid-template-columns: 1fr; } }

/* 5  Zwei Spalten und Fakten (Offline-Abschnitt)
   -------------------------------------------------------------------------- */
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); align-items: start; }
@media (max-width: 900px) { .raster-2 { grid-template-columns: 1fr; gap: var(--s5); } }
.fakten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); margin: 0; }
.fakten div { border-top: 1px solid var(--linie-dunkel); padding-top: var(--s3); }
.fakten dt { font-family: var(--f-titel); font-weight: 700; font-size: var(--t-md); color: var(--weiss); margin-bottom: var(--s1); }
.fakten dd { margin: 0; color: var(--text-hell-2); }
@media (max-width: 560px) { .fakten { grid-template-columns: 1fr; } }

/* 5  Person
   -------------------------------------------------------------------------- */
.person { display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start; }
.person h2 { max-width: 25ch; }
.person blockquote { margin: 0 0 var(--s4); font-family: var(--f-titel); font-weight: 600; font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem); line-height: 1.3; }
.person__name { font-weight: 600; margin: 0; }
.person__rolle { color: var(--text-2); margin: 0 0 var(--s4); }
.person__aussage { font: inherit; line-height: 1.65; margin-bottom: var(--s4); max-width: 65ch; }
.person__bild img { width: 200px; height: 200px; object-fit: cover; border-radius: var(--radius); filter: grayscale(1) contrast(1.05); box-shadow: var(--schatten); }
@media (max-width: 900px) { .person { gap: 28px; } }
@media (max-width: 720px) { .person__bild img { width: 120px; height: 120px; } }
@media (max-width: 640px) { .person { grid-template-columns: 1fr; } }

/* 5  Preise
   -------------------------------------------------------------------------- */
.umschalter { display: inline-flex; border: 1px solid #B9B7AE; border-radius: var(--radius); padding: 4px; background: var(--weiss); margin-bottom: var(--s5); }
.umschalter button { font: inherit; font-weight: 600; border: 0; background: transparent; color: var(--text-2); padding: 10px 18px; border-radius: 4px; cursor: pointer; min-height: 44px; }
.umschalter button[aria-pressed="true"] { background: var(--anthrazit); color: var(--weiss); }
.umschalter__hinweis { display: block; font-weight: 400; font-size: .8125rem; }
.preis-kopf { text-align: center; }

.preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
@media (max-width: 960px) { .preise { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.paket { position: relative; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s5) var(--s4) var(--s4); display: flex; flex-direction: column; }
.paket--empfohlen { border: 2px solid var(--oliv); box-shadow: var(--schatten); }
.paket__badge { position: absolute; top: -14px; left: var(--s4); background: var(--oliv); color: var(--weiss); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; }
.paket h3, .paket__titel { font-size: var(--t-lg); margin-bottom: var(--s1); }
.paket__fuer { color: var(--text-2); margin-bottom: var(--s4); min-height: 3.2em; }
.paket__preis { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: 2px; }
.paket__chf { font-weight: 600; color: var(--text-2); }
.paket__betrag { font-family: var(--f-titel); font-weight: 700; font-size: 2.75rem; line-height: 1; }
.paket__dauer { color: var(--text-2); font-size: var(--t-sm); margin-bottom: var(--s4); }
.paket__tag { font-size: var(--t-sm); color: var(--oliv); font-weight: 600; margin-bottom: var(--s4); min-height: 1.5em; }
.paket .haken { margin-bottom: var(--s5); }
.paket .btn { margin-top: auto; }
.preis-rs { display: none; }
.zeige-rs .preis-rs { display: inline; }
.zeige-rs .preis-wk { display: none; }

.anfrage-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s5); padding: var(--s4); background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.anfrage-zeile h3 { font-size: var(--t-md); margin: 0 0 var(--s1); }
.anfrage-zeile p { margin: 0; color: var(--text-2); }

.auswahl--vier { grid-template-columns: 1fr 1fr; }
.auswahl--paket { grid-template-columns: 1fr; gap: 10px; }
.auswahl--paket span em.paket-preis { font-style: normal; font-weight: 600; color: var(--text); }
.wahlblock { margin-top: var(--s4); padding: var(--s3) var(--s4) var(--s4); border: 1px solid var(--linie); border-radius: var(--radius); background: #F7F7F4; }
.wahlblock__titel { font-weight: 600; margin: 0 0 var(--s2); }
.wahlblock__text { color: var(--text-2); font-size: .9375rem; line-height: 1.5; margin: 0; }
.wahlblock .korb-gruppen + .korb-hinweis { margin-top: var(--s3); }
.korb-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s4); margin-top: var(--s3); }
.korb-gruppe__titel { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 0 0 var(--s2); }
.korb-zeile { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius); cursor: pointer; }
.korb-zeile:hover { background: #EDEDE8; }
.korb-zeile input { width: 18px; height: 18px; margin: 0; accent-color: var(--oliv); flex: none; }
.korb-name { flex: 1 1 auto; font-size: .9375rem; }
.korb-preis { color: var(--text-2); font-size: .875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.korb-zeile input:checked ~ .korb-name { font-weight: 600; }
.korb-hinweis { margin: var(--s3) 0 0; padding: 10px 14px; border-left: 3px solid var(--oliv); background: #EFF1E9; font-size: .9375rem; line-height: 1.5; }
.feld--schmal { max-width: 180px; }
.zusammenfassung dd[data-z="umfang"] { font-size: .9375rem; line-height: 1.45; }
.tab-klein { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--text-2); margin-top: 2px; }
.preis-notiz { text-align: center; color: var(--text-2); font-size: var(--t-sm); margin-top: var(--s4); }

/* 5  Tabelle
   -------------------------------------------------------------------------- */
.tabelle-huelle { position: relative; overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th, td { text-align: left; padding: 14px var(--s3); border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th { background: var(--anthrazit); color: var(--weiss); font-weight: 600; white-space: nowrap; }
tbody tr:nth-child(even) td, tbody tr:nth-child(even) th { background: #FAFAF7; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 500; }
td.mitte, th.mitte { text-align: center; }
.ja { color: var(--oliv); font-weight: 600; }
.nein { color: #5F6769; }

/* 5  FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 48px 20px 0; position: relative;
  font-family: var(--f-titel); font-weight: 600; font-size: var(--t-md); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--oliv); }
.faq__antwort { padding: 0 0 var(--s4); max-width: 68ch; color: var(--text-2); }
.faq__antwort p:last-child { margin-bottom: 0; }
.faq-gruppe + .faq-gruppe { margin-top: var(--s6); }
.faq-gruppe h2 { font-size: var(--t-lg); margin-bottom: var(--s3); }

/* 5  Schluss-Aufruf
   -------------------------------------------------------------------------- */
.aufruf { background: var(--anthrazit); color: var(--text-hell); padding: var(--s7) 0; border-top: 3px solid var(--oliv); }
.aufruf__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.aufruf h2 { color: var(--weiss); margin: 0 0 var(--s2); }
.aufruf p { margin: 0; color: var(--text-hell-2); max-width: 40em; }
/* Titel als Absatz (saubere Überschriften-Hierarchie) */
.aufruf .aufruf__titel { font-family: var(--f-titel); font-weight: 700; font-size: var(--t-xl); line-height: 1.15; color: var(--weiss); margin: 0 0 var(--s2); max-width: none; letter-spacing: -0.005em; }

/* 6  Programme-Seite
   -------------------------------------------------------------------------- */
.bereich + .bereich { margin-top: var(--s8); }
.bereich__kopf { border-bottom: 1px solid var(--linie); padding-bottom: var(--s3); margin-bottom: var(--s6); }
.bereich__kopf h2 { margin: 0 0 var(--s1); }
.bereich__kopf p { margin: 0; color: var(--text-2); }

.programm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: start; padding-bottom: var(--s7); }
.programm + .programm { padding-top: var(--s7); border-top: 1px solid var(--linie); }
.etikett { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--oliv-flaeche); color: var(--oliv-dunkel); border: 1px solid #D5DAC4; }
.etikett--neu { background: var(--rot); color: var(--weiss); border-color: var(--rot); }
@media (max-width: 900px) { .programm { grid-template-columns: 1fr; gap: var(--s4); } }

/* 6  Formular
   -------------------------------------------------------------------------- */
.formular-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s6); align-items: start; }
@media (max-width: 960px) { .formular-raster { grid-template-columns: 1fr; } }
.formular { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s5); }
@media (max-width: 560px) { .formular { padding: var(--s4) var(--s3); } }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); min-width: 0; }
legend { font-family: var(--f-titel); font-weight: 700; font-size: var(--t-md); padding: 0; margin-bottom: var(--s3); }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); }
.feld label, .feld .label { font-weight: 600; font-size: .9375rem; }
.feld .optional { font-weight: 400; color: var(--text-2); }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 1rem; color: var(--text); background: #F1F1EE; border: 1px solid #CFCDC5; border-radius: var(--radius);
  padding: 12px 14px; min-height: 48px; width: 100%;
}
.feld textarea { min-height: 140px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--oliv); background: var(--weiss); box-shadow: 0 0 0 3px rgba(86, 99, 58, .2); }
.feld input:user-invalid, .feld select:user-invalid, .feld textarea:user-invalid { border-color: #B3261E; }
.feld__hilfe { font-size: var(--t-sm); color: var(--text-2); margin: 0; }
.felder-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.felder-plz { display: grid; grid-template-columns: 140px 1fr; gap: 0 var(--s3); }
@media (max-width: 560px) { .felder-2, .felder-plz { grid-template-columns: 1fr; } }

.auswahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .auswahl, .auswahl--vier { grid-template-columns: 1fr; } }
.auswahl label { position: relative; display: block; cursor: pointer; }
.auswahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.auswahl span { display: block; border: 1px solid #CFCDC5; border-radius: var(--radius); padding: 14px 16px 14px 44px; background: #F7F7F4; height: 100%; }
.auswahl span strong { display: block; }
.auswahl span small { display: block; color: var(--text-2); font-size: .875rem; line-height: 1.4; margin-top: 2px; }
.auswahl span::before { content: ""; position: absolute; left: 16px; top: 18px; width: 16px; height: 16px; border: 2px solid #8C928F; border-radius: 50%; background: var(--weiss); }
.auswahl input:checked + span { border-color: var(--oliv); background: var(--oliv-flaeche); box-shadow: inset 0 0 0 1px var(--oliv); }
.auswahl input:checked + span::before { border-color: var(--oliv); background: radial-gradient(circle, var(--oliv) 0 4px, var(--weiss) 5px); }
.auswahl input:focus-visible + span { outline: 3px solid var(--oliv-hell); outline-offset: 2px; }

.kontrolle { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--s3); }
.kontrolle input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--oliv); flex: none; }
.ht { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.nur-bestellung, .nur-einzel { display: none; }
.ist-bestellung .nur-bestellung { display: block; }
.ist-einzel .nur-einzel { display: flex; }

.zusammenfassung { background: var(--oliv-flaeche); border: 1px solid #D5DAC4; border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s4); }
.zusammenfassung h3, .zusammenfassung__titel { font-size: var(--t-md); margin-bottom: var(--s2); }
.zusammenfassung dl { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s3); margin: 0; }
.zusammenfassung dt { color: var(--text-2); }
.zusammenfassung dd { margin: 0; font-weight: 600; }
.zusammenfassung__total { border-top: 1px solid #C9CFB6; padding-top: var(--s2); margin-top: var(--s2); font-size: var(--t-md); }

.meldung { border-radius: var(--radius); padding: var(--s3) var(--s4); margin-bottom: var(--s4); border: 1px solid; }
.meldung--fehler { background: #FBEDEC; border-color: #E2B4B1; color: #6F1712; }
.meldung[hidden] { display: none; }

.seitenblock { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s4); }
.seitenblock + .seitenblock { margin-top: var(--s4); }
.seitenblock h2, .seitenblock h3 { font-size: var(--t-md); margin-bottom: var(--s3); }
.kontaktliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.kontaktliste span { display: block; font-size: var(--t-sm); color: var(--text-2); }
.kontaktliste a, .kontaktliste strong { font-weight: 600; }
.ablauf { margin: 0; padding-left: 1.25em; }
.ablauf li { margin-bottom: 10px; color: var(--text-2); }
.ablauf li strong { color: var(--text); }

/* 6  Rechtstexte
   -------------------------------------------------------------------------- */
.recht { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s6) var(--s6); }
@media (max-width: 720px) { .recht { padding: var(--s4) var(--s3); } }
.recht h2 { font-size: var(--t-lg); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--linie); }
.recht h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.recht h3 { font-size: var(--t-md); margin-top: var(--s4); }
.recht p, .recht li { max-width: 72ch; }
.recht__stand { color: var(--text-2); font-size: var(--t-sm); }
.recht dl { display: grid; grid-template-columns: 220px 1fr; gap: 10px var(--s4); margin: 0 0 var(--s4); }
.recht dt { color: var(--text-2); }
.recht dd { margin: 0; font-weight: 500; }
@media (max-width: 640px) { .recht dl { grid-template-columns: 1fr; gap: 2px; } .recht dd { margin-bottom: 10px; } }
.inhalt { background: #F7F7F4; border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s6); }
.inhalt h2 { font-size: var(--t-md) !important; margin: 0 0 var(--s2) !important; padding: 0 !important; border: 0 !important; }
.inhalt ol { columns: 2; column-gap: var(--s5); margin: 0; }
@media (max-width: 640px) { .inhalt ol { columns: 1; } }

/* 6  Fusszeile
   -------------------------------------------------------------------------- */
.fuss { background: var(--nacht); color: var(--text-hell-2); padding: var(--s7) 0 var(--s4); font-size: .9375rem; }
.fuss a { color: var(--text-hell); text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
.fuss__raster { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s5); padding-bottom: var(--s6); border-bottom: 1px solid var(--linie-dunkel); }
.fuss h2 { font-family: var(--f-text); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-hell-2); margin-bottom: var(--s3); }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fuss__marke p { max-width: 34ch; margin: var(--s3) 0; }
.fuss__adresse { font-style: normal; line-height: 1.7; }
.fuss__social { display: flex; gap: 8px; margin: var(--s3) 0 0; }
.fuss__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linie-dunkel); border-radius: 50%; color: var(--text-hell); transition: color .2s, border-color .2s; }
.fuss__social a:hover { color: var(--oliv-hell); border-color: var(--oliv-hell); text-decoration: none; }
.fuss__social svg { display: block; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding-top: var(--s4); font-size: var(--t-sm); }
.fuss__unten p { margin: 0; }
@media (max-width: 900px) { .fuss__raster { grid-template-columns: 1fr 1fr; } .fuss__marke { grid-column: 1 / -1; } }
@media (max-width: 480px) { .fuss__raster { grid-template-columns: 1fr; } }

/* Hilfsklassen */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); } .mt-7 { margin-top: var(--s7); }
.mb-4 { margin-bottom: var(--s4); } .mb-5 { margin-bottom: var(--s5); } .mb-6 { margin-bottom: var(--s6); }
.text-2 { color: var(--text-2); }
.zentriert { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   7  Erweiterungen: Programmseiten, Rollen, Formulare, mobile Leiste
   ========================================================================== */
.btn--gross { min-height: 56px; padding: 16px 28px; font-size: 1.0625rem; }
.btn-reihe--mitte { justify-content: center; }
.raster-2--mitte { align-items: center; }
.seitenkopf a:not(.btn) { color: var(--oliv-hell); }
.seitenkopf .brotkrumen a { color: var(--text-hell-2); }
.seitenkopf--eng { padding: var(--s6) 0; }
.lesetext .gross { font-size: var(--t-md); line-height: 1.55; color: var(--text); }
b.gratis { color: var(--rot); font-weight: 600; }

/* Rollenwahl (Übergänge: Abschnitt 13) */
.rollen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.rolle {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--s4); padding-right: var(--s6); padding-left: 0;
  border-top: 2px solid var(--oliv); text-decoration: none; color: var(--text);
}
.rolle:hover { border-color: var(--oliv); color: var(--text); background: #EEF0E6; }
.rolle__ich { font-size: var(--t-sm); color: var(--text-2); font-weight: 500; }
.rolle__name { font-family: var(--f-titel); font-weight: 700; font-size: var(--t-lg); line-height: 1.15; }
.rolle__text { color: var(--text-2); font-size: .9375rem; line-height: 1.45; margin-top: 4px; }
.rolle__pfeil { position: absolute; right: var(--s4); top: 50%; width: 12px; height: 12px; margin-top: -6px; border-right: 2px solid var(--oliv); border-top: 2px solid var(--oliv); transform: rotate(45deg); }
.rollen--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rolle--klein { padding: var(--s3) var(--s6) var(--s3) 0; }
.rolle--klein .rolle__name { font-size: var(--t-md); }
@media (max-width: 1020px) { .rollen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rollen, .rollen--klein { grid-template-columns: 1fr; } }

/* Tabellen schmal: keine Zebrastreifen */
@media (max-width: 640px) {
  tbody tr:nth-child(even) td, tbody tr:nth-child(even) th { background: transparent; }
}

/* Karten */
.karte--betont { position: relative; border: 2px solid var(--oliv); }
.karte--betont .paket__badge { top: -13px; }
.progkarte__titel { display: block; font-family: var(--f-titel); font-weight: 600; font-size: var(--t-md); line-height: 1.3; margin-bottom: var(--s2); }
.progkarte__beschr { display: block; color: var(--text-2); font-size: 1rem; margin-bottom: var(--s3); }

/* Produktseiten */
.produkt-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: var(--s7); align-items: center; }
.produkt-hero h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.produkt-hero .kicker .etikett { margin-left: 8px; vertical-align: 1px; }
.seitenkopf--produkt { padding: var(--s7) 0 var(--s8); }
@media (max-width: 1020px) { .produkt-hero { grid-template-columns: 1fr; gap: var(--s5); } }
.eckdaten { list-style: none; margin: 0; padding: var(--s4) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.eckdaten li { display: flex; flex-direction: column; padding-left: var(--s3); border-left: 3px solid var(--oliv); }
.eckdaten span { font-size: var(--t-sm); color: var(--text-2); }
.eckdaten strong { font-weight: 600; }
.eckdaten a { color: var(--text); }
@media (max-width: 860px) { .eckdaten { grid-template-columns: repeat(2, 1fr); } }
.funktionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.funktionsgruppe h3 { font-size: var(--t-md); padding-bottom: var(--s2); border-bottom: 2px solid var(--oliv); margin-bottom: var(--s3); }
@media (max-width: 960px) { .funktionen { grid-template-columns: 1fr; gap: var(--s4); } }
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
@media (max-width: 760px) { .galerie { grid-template-columns: 1fr; } }
.shot--hoch img { max-height: 640px; width: auto; max-width: 100%; margin: 0 auto; }
.schritte--vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .schritte--vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .schritte--vier { grid-template-columns: 1fr; } }
.drucke h3 { font-size: var(--t-md); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips li { background: var(--weiss); border: 1px solid var(--linie); border-radius: 999px; padding: 6px 14px; font-size: .9375rem; }

.preisbox { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: center; background: var(--oliv-flaeche); border: 1px solid #D5DAC4; border-radius: var(--radius); padding: var(--s6); }
.preisbox h2 { font-size: var(--t-xl); }
.preisbox p { margin: 0; color: var(--text-2); }
.preisbox__knoepfe { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.preisbox__knoepfe .textlink { text-align: center; }
.preisbox--gratis { align-items: start; }
.formular--kompakt { padding: var(--s4); }
@media (max-width: 860px) { .preisbox { grid-template-columns: 1fr; padding: var(--s4); gap: var(--s4); } }

/* Rollenseiten */
.aufgaben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.aufgabe { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s5) var(--s4); }
.aufgabe h2 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.aufgabe > p { color: var(--text-2); }
.proglinks { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s2); }
.proglinks a { display: block; padding: 12px 40px 12px 14px; border: 1px solid var(--linie); border-radius: var(--radius); text-decoration: none; color: var(--text); position: relative; }
.proglinks a::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--oliv); border-top: 2px solid var(--oliv); transform: rotate(45deg); }
.proglinks a:hover { border-color: var(--oliv); }
.proglinks strong { display: block; }
.proglinks span { display: block; font-size: .9375rem; color: var(--text-2); }
@media (max-width: 860px) { .aufgaben { grid-template-columns: 1fr; } }

/* Formulare */
.auswahl--drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .auswahl--drei { grid-template-columns: 1fr; } }
.seitenblock--ruhig { background: transparent; }
.seitenblock p:last-child { margin-bottom: 0; }

/* Fusszeile mit 5 Spalten */
@media (max-width: 1020px) { }
@media (max-width: 480px) { }

/* Mobile Leiste unten */
.leiste-mobil { display: none; }
@media (max-width: 720px) {
  body.mit-leiste { padding-bottom: 76px; }
  .leiste-mobil {
    display: grid; grid-template-columns: 2fr 1fr; gap: var(--s2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
    background: var(--anthrazit); border-top: 3px solid var(--oliv);
  }
  .leiste-mobil .btn { min-height: 48px; padding: 10px 12px; }
  .leiste-mobil .btn--primaer { background: var(--oliv-hell); border-color: var(--oliv-hell); color: #161A12; }
  .leiste-mobil .btn--sekundaer { color: var(--weiss); border-color: #6B7476; }
}
.seitenkopf .hero__lead { margin: 0 0 var(--s5); }
.seitenkopf .hero__klein { margin: var(--s3) 0 0; font-size: var(--t-sm); }
.steckbrief { background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--oliv); border-radius: var(--radius); padding: var(--s5); }
.steckbrief h2 { font-size: var(--t-lg); margin-bottom: var(--s3); }
.steckbrief dl { display: grid; grid-template-columns: 140px 1fr; gap: 10px var(--s4); margin: 0; }
.steckbrief dt { color: var(--text-2); font-weight: 500; }
.steckbrief dd { margin: 0; }
.steckbrief__hinweis { font-size: var(--t-sm); color: var(--text-2); margin: var(--s4) 0 0; }
@media (max-width: 560px) { .steckbrief { padding: var(--s4) var(--s3); } .steckbrief dl { grid-template-columns: 1fr; gap: 2px; } .steckbrief dd { margin-bottom: 10px; } }

/* ==========================================================================
   8  Videos, Sicherheit, Glossar, Ratgeber
   ========================================================================== */
.video { position: relative; margin: 0; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: var(--nacht); border-radius: var(--radius); box-shadow: var(--schatten); }
.video figcaption { font-size: var(--t-sm); color: var(--text-2); margin-top: 10px; }
.abschnitt--video .video { max-width: 960px; }
.videos { display: grid; gap: var(--s4); }
.videos .video--gross { max-width: none; }

.hinweis-band { background: var(--oliv-flaeche); border-left: 4px solid var(--oliv); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.hinweis-band--aktion { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.hinweis-band--aktion > div { flex: 1 1 320px; }
.fakten-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.fakten-raster h2 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.fakten-raster p { color: var(--text-2); margin: 0; }
@media (max-width: 760px) { .fakten-raster { grid-template-columns: 1fr; gap: var(--s4); } }
td.r, th.r { text-align: right; white-space: nowrap; }
code { font-family: ui-monospace, Consolas, Menlo, monospace; background: var(--oliv-flaeche); padding: 1px 5px; border-radius: 3px; font-size: .9em; }

.glossar { margin: 0; }
.glossar > div { display: grid; grid-template-columns: 220px 1fr; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--linie); scroll-margin-top: 90px; }
.glossar dt { font-family: var(--f-titel); font-weight: 700; font-size: var(--t-md); }
.glossar dd { margin: 0; color: var(--text-2); }
.glossar > div:target { background: var(--oliv-flaeche); }
@media (max-width: 640px) { .glossar > div { grid-template-columns: 1fr; gap: 4px; } }

.artikel__meta { font-size: var(--t-sm); opacity: .85; margin-top: var(--s3); }
.artikel__inhalt { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s6); }
.artikel__inhalt h2 { font-size: var(--t-md); margin-bottom: var(--s2); }
.artikel__inhalt ol { margin: 0; padding-left: 1.25em; }
.artikel__inhalt li { margin-bottom: 4px; }
.artikel__teil { margin-bottom: var(--s6); scroll-margin-top: 90px; }
.artikel__teil h2 { font-size: var(--t-xl); margin-bottom: var(--s3); }
.artikel__teil p { max-width: 68ch; }
.kreuze { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: 10px; }
.kreuze li { position: relative; padding-left: 28px; }
.kreuze li::before { content: "\00D7"; position: absolute; left: 2px; top: -2px; color: var(--rot); font-weight: 700; font-size: 1.3em; }
.linkliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.karte--link { text-decoration: none; color: var(--text); }
.karte--link:hover { border-color: var(--oliv); box-shadow: var(--schatten); }
.karte--link h2 { font-size: var(--t-lg); margin: var(--s2) 0; }
.karte--link .textlink { margin-top: auto; }
.video__rahmen { position: relative; }
.video__start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%;
  border: 0; background: rgba(194, 33, 39, .92); color: #fff; cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.35); display: grid; place-items: center; }
.video__start::before { content: ""; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; margin-left: 6px; }
.video__start:hover { background: #a51b20; }
.video__start:focus-visible { outline: 3px solid var(--oliv-hell); outline-offset: 3px; }
.video.laeuft .video__start { display: none; }

.tabelle-huelle:focus-visible { outline: 3px solid var(--oliv); outline-offset: 2px; }
.video__text { margin-top: 6px; }
.video__text summary { cursor: pointer; font-weight: 600; color: var(--text); }
.video__text ol { margin: 8px 0 0; padding-left: 1.25em; }
.video__text li { margin-bottom: 4px; }

/* Login-Seite */
.login-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
@media (max-width: 860px) { .login-raster { grid-template-columns: 1fr; } }
.login-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s5); scroll-margin-top: 96px; }
.login-karte h2 { margin-bottom: 4px; }
.login-karte__sub { color: var(--text-2); margin: 0 0 var(--s4); }
.login-karte .formular { box-shadow: none; border: 0; padding: 0; background: transparent; }
.login-meldung { min-height: 1.5em; margin: 0 0 var(--s3); font-size: .95rem; }
.login-meldung--fehler { color: var(--rot); font-weight: 600; }
.login-meldung--ok { color: var(--oliv); font-weight: 600; }
.login-registrierung { margin: var(--s4) 0; border-top: 1px solid var(--linie); padding-top: var(--s3); }
.login-registrierung summary { cursor: pointer; font-weight: 600; color: var(--oliv-dunkel); }
.login-registrierung[open] summary { margin-bottom: var(--s3); }

/* Produktleiste: Tactical und Leidang auf jeder Seite erreichbar */
.produkte { background: var(--nacht); color: var(--text-hell-2); font-size: var(--t-sm); border-bottom: 1px solid var(--linie-dunkel); }
.produkte__inner { display: flex; align-items: stretch; gap: var(--s4); min-height: 36px; }
.produkte__link, .produkte__login { display: inline-flex; align-items: center; color: var(--text-hell-2); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; padding: 0 2px; }
.produkte__link:hover, .produkte__login:hover { color: var(--weiss); }
.produkte__link[aria-current] { color: var(--weiss); border-bottom-color: var(--rot); }
.produkte__fuer { font-weight: 400; margin-left: 4px; }
.produkte__login { margin-left: auto; }
@media (max-width: 600px) { .produkte__fuer { display: none; } .produkte__inner { gap: var(--s3); min-height: 40px; } }

/* Leidang-Band */
.leidang-band { background: var(--weiss); border-top: 4px solid var(--rot); border-bottom: 1px solid var(--linie); }
.leidang-band .kicker { color: var(--rot); }
.leidang-band h2 { font-size: var(--t-xl); }
.leidang-band__klein { font-size: var(--t-sm); color: var(--text-2); margin: var(--s3) 0 0; }
.leidang-band .video { margin: 0; }
.leidang-band .btn--primaer { background: var(--rot); border-color: var(--rot); }
.leidang-band .btn--primaer:hover { background: #A11B20; border-color: #A11B20; }

/* Linie Zivil (Leidang): gleiche Bausteine, Akzent Rot nach MDS */
.linie-zivil {
  --oliv: #C22127;
  --oliv-dunkel: #A11B20;
  --oliv-hell: #F29B9E;
  --oliv-flaeche: #FBEDEE;
}
.linie-zivil .etikett, .linie-zivil .zusammenfassung, .linie-zivil .preisbox { border-color: #F0C9CB; }
.linie-zivil .feld input:focus, .linie-zivil .feld select:focus, .linie-zivil .feld textarea:focus { box-shadow: 0 0 0 3px rgba(194, 33, 39, .2); }
.linie-zivil .dunkel .btn--primaer, .linie-zivil .kopf .btn--primaer, .linie-zivil .leiste-mobil .btn--primaer { background: var(--rot); border-color: var(--rot); color: var(--weiss); }
.linie-zivil .dunkel .btn--primaer:hover, .linie-zivil .kopf .btn--primaer:hover, .linie-zivil .leiste-mobil .btn--primaer:hover { background: #A11B20; border-color: #A11B20; color: var(--weiss); }
.linie-zivil .hero__punkte li::before { border-color: #E5484D; }
body:not(.linie-zivil) .produkte__link[aria-current] { border-bottom-color: var(--oliv-hell); }

/* ==========================================================================
   9  Demo im Browser: schmale Leiste oben, Programm im Rahmen darunter
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.demo-seite { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--nacht); }
.demo-leiste {
  flex: none; position: relative; z-index: 10;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "marke text link knopf";
  align-items: center; column-gap: var(--s3); min-height: 56px; padding: 6px var(--s3);
  background: var(--anthrazit); color: var(--text-hell); border-bottom: 3px solid var(--oliv);
}
.demo-leiste__marke { grid-area: marke; display: flex; align-items: center; gap: 10px; color: var(--weiss); text-decoration: none; min-height: 44px; }
.demo-leiste__marke:hover { color: var(--weiss); }
.demo-leiste__marke img { width: 36px; height: auto; }
.demo-leiste__name { font-family: var(--f-titel); font-weight: 700; font-size: 1.125rem; line-height: 1.1; white-space: nowrap; }
.demo-leiste__etikett { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--oliv-hell); color: #161A12; }
.linie-zivil .demo-leiste__etikett { background: var(--rot); color: var(--weiss); }
.demo-leiste__text, .demo-leiste__meldung { grid-area: text; margin: 0; font-size: var(--t-sm); line-height: 1.35; color: var(--text-hell-2); min-width: 0; }
.demo-leiste__meldung { color: var(--weiss); font-weight: 600; padding-left: 10px; border-left: 3px solid var(--oliv-hell); }
.linie-zivil .demo-leiste__meldung { border-left-color: var(--rot); }
.demo-leiste__text[hidden], .demo-leiste__meldung[hidden] { display: none; }
.demo-leiste__link { grid-area: link; display: inline-flex; align-items: center; min-height: 44px; color: var(--text-hell); font-size: var(--t-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.demo-leiste__link:hover { color: var(--weiss); text-decoration: underline; }
.demo-leiste__kurz { display: none; }
.demo-leiste .btn--primaer { grid-area: knopf; min-height: 44px; padding: 8px 16px; white-space: nowrap; background: var(--oliv-hell); border-color: var(--oliv-hell); color: #161A12; }
.demo-leiste .btn--primaer:hover { background: #BAC78A; border-color: #BAC78A; color: #161A12; }
.linie-zivil .demo-leiste .btn--primaer { background: var(--rot); border-color: var(--rot); color: var(--weiss); }
.linie-zivil .demo-leiste .btn--primaer:hover { background: #A11B20; border-color: #A11B20; color: var(--weiss); }
.demo-leiste.ist-meldung .btn--primaer { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.demo-leiste :focus-visible { outline-color: var(--oliv-hell); }
.demo-buehne { flex: 1 1 auto; position: relative; min-height: 0; }
.demo-rahmen { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--nacht); }
.linie-zivil .demo-rahmen { background: var(--papier); }
.demo-laden {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s2); padding: var(--s4); text-align: center; background: var(--nacht); color: var(--text-hell); transition: opacity .25s ease;
}
.demo-laden.ist-fertig { opacity: 0; pointer-events: none; }
.demo-laden__titel { margin: var(--s3) 0 0; font-family: var(--f-titel); font-weight: 700; font-size: var(--t-lg); }
.demo-laden__klein { margin: 0; max-width: 520px; font-size: var(--t-sm); color: var(--text-hell-2); }
.demo-laden__handy { display: none; }
.demo-laden__kreis { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--linie-dunkel); border-top-color: var(--oliv-hell); animation: demo-drehen 1s linear infinite; }
.linie-zivil .demo-laden__kreis { border-top-color: var(--rot); }
@keyframes demo-drehen { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .demo-leiste__text, .demo-leiste__meldung { font-size: .8125rem; } }
@media (max-width: 760px) {
  .demo-leiste { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marke knopf" "text link"; row-gap: 2px; column-gap: var(--s2); padding: 4px 12px 2px; }
  .demo-leiste__marke img { width: 30px; }
  .demo-leiste__name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
  .demo-leiste .btn--primaer { padding: 8px 12px; font-size: .9375rem; }
  .demo-leiste__text, .demo-leiste__meldung { font-size: .75rem; }
  .demo-leiste__link { font-size: .8125rem; }
  .demo-laden__handy { display: block; }
  .demo-leiste__etikett { display: none; }
  .demo-leiste__lang { display: none; }
  .demo-leiste__kurz { display: inline; }
}

/* Übersicht «Programme im Browser testen» und Einstiege */
.demo-karte img { border-radius: 4px; border: 1px solid var(--linie); margin-bottom: var(--s3); }
.demo-karte h3 { margin-bottom: var(--s2); }
.demo-karte .btn-reihe { margin-top: auto; }
.demo-karte__groesse { font-size: var(--t-sm); color: var(--text-2); }

/* Beschriftungen ohne Überschrift-Tag (saubere Überschriften-Hierarchie) */
.fuss__titel { font-family: var(--f-text); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-hell-2); margin: 0 0 var(--s3); }
.fuss__titel.mt-5 { margin-top: var(--s5); }
.inhalt__titel { font-family: var(--f-titel); font-weight: 700; font-size: var(--t-md); margin: 0 0 var(--s2); }
.seitenblock__titel { font-family: var(--f-titel); font-weight: 700; font-size: var(--t-md); line-height: 1.15; margin: 0 0 var(--s3); }
.fakten-raster h3 { font-size: var(--t-lg); margin-bottom: var(--s2); }

/* ==========================================================================
   10 Startseite und Über mich: Produktreihen, Porträt, Geschichte
   ========================================================================== */
/* Produktreihen der Startseite: Bild und Text im Wechsel, flache Zeilen */
.v4-produkte { display: block; }
.v4-produkt { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 36px 0; border-top: 1px solid var(--linie); }
.v4-produkt:nth-child(even) > a { order: 2; }
.v4-produkt:nth-child(even) > div { order: 1; }
.v4-produkt img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--linie); border-radius: 3px; box-shadow: var(--schatten); }
.v4-produkt > div { padding: 12px 0; }
.v4-produkt h3 { font-size: 2rem; }
.v4-produkt p { max-width: 46ch; color: var(--text-2); }
.v4-weiter { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; border-top: 1px solid var(--linie); padding-top: 28px; }
.v4-weiter p { margin-bottom: 0; }
.v4-video { max-width: 900px; margin: auto; }
.v4-cross { background: #E8E9DF; border-top: 1px solid #D0D3C4; }
.v4-cross .v4-weiter { margin-top: 0; }
.v4-cross h2 { font-size: 1.8rem; }
@media (max-width: 900px) { .v4-produkt { gap: 28px; } }
@media (max-width: 640px) {
  .v4-produkt { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
  .v4-produkt:nth-child(even) > a, .v4-produkt:nth-child(even) > div { order: initial; }
  .v4-produkt h3 { font-size: 1.6rem; }
  .v4-weiter { align-items: flex-start; flex-direction: column; }
}

/* Über mich: Porträt, Geschichte, Werkstatt */
.m5-portrait-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, .7fr); gap: 80px; align-items: center; }
.m5-portrait { margin: 0; max-width: 340px; }
.m5-portrait img { width: 100%; height: auto; border-radius: 2px; }
.m5-portrait figcaption { margin-top: 16px; font-size: .94rem; color: var(--text-hell-2); }
.m5-about h1 { max-width: 15ch; font-size: clamp(2.6rem, 4vw, 4rem); }
.m5-story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 72px; }
.m5-story h2 { max-width: 20ch; }
.m5-story p { line-height: 1.8; }
.m5-maker { display: grid; grid-template-columns: 160px minmax(0, 680px); gap: 40px; align-items: center; }
.m5-maker img { width: 160px; height: 214px; object-fit: cover; object-position: 50% 20%; }
.m5-maker h2 { font-size: 2rem; }
@media (max-width: 900px) {
  .m5-portrait-grid { gap: 36px; grid-template-columns: 1.2fr .8fr; }
  .m5-story { grid-template-columns: 1fr; gap: 24px; }
  .m5-story h2 { max-width: none; }
}
@media (max-width: 640px) {
  .m5-portrait-grid { grid-template-columns: 1fr; gap: 32px; }
  .m5-portrait { max-width: 260px; }
  .m5-about h1 { font-size: 2.7rem; }
  .m5-maker { grid-template-columns: 1fr; gap: 24px; }
  .m5-maker img { width: 120px; height: 160px; }
}

/* ==========================================================================
   11 Programme-Übersicht: Aufgabenfinder (ohne Skript les- und bedienbar)
   ========================================================================== */
#aufgabenfinder, [id^="finden-"], #b-einsatz, #b-mittel, #b-kanzlei { scroll-margin-top: 110px; }
.aufgabenfinder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; margin-top: 32px; }
.finder-gruppe { border-top: 2px solid var(--oliv); padding-top: 20px; min-width: 0; }
.finder-gruppe h3 { font-size: 1.3rem; line-height: 1.35; margin: 0 0 16px; }
.finder-programme { list-style: none; padding: 0; margin: 0; }
.finder-programme li { margin: 0 0 16px; }
.finder-programme a { font-weight: 700; display: inline-block; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
.finder-programme p { font-size: .94rem; margin: 0; line-height: 1.6; }
.finder-rollen { font-size: .9rem; border-top: 1px solid var(--linie); padding-top: 12px; }
.finder-rollen a { display: inline-block; padding: 8px 0; }
.finder-katalog, .finder-rueckweg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 28px; padding-bottom: 28px; }
.finder-katalog { margin-top: 24px; border-top: 1px solid var(--linie); }
.finder-katalog a, .finder-rueckweg a { padding: 10px 0; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .aufgabenfinder { grid-template-columns: 1fr; gap: 24px; }
  .finder-katalog, .finder-rueckweg { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* ==========================================================================
   12 Programmseiten: Vom Auftrag zum Druck (Ablauf und vollständige Ausdrucke)
   ========================================================================== */
#vom-auftrag-zum-druck { scroll-margin-top: 110px; }
.beleg-ablauf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-left: 24px; margin: 32px 0; }
.beleg-ablauf li { padding-left: 6px; }
.beleg-ablauf li::marker { font-weight: 700; color: var(--oliv); }
.beleg-ablauf h3 { font-size: 1.25rem; }
.beleg-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.beleg-bilder figure { margin: 0; min-width: 0; }
.beleg-bilder img { display: block; width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 3px; }
.beleg-bilder figcaption { margin-top: 12px; font-size: .95rem; line-height: 1.6; }
.beleg-test { border-top: 1px solid var(--linie); margin-top: 40px; padding-top: 28px; max-width: 760px; }
.beleg-test .btn { margin: 8px 0 12px; }
@media (max-width: 800px) {
  .beleg-ablauf, .beleg-bilder { grid-template-columns: 1fr; }
  .beleg-ablauf { gap: 12px; }
}

/* ==========================================================================
   15 Kompakte Fusszeile, Aufgabenkarten, Aktuelles
   ========================================================================== */
.fuss { padding: var(--s6) 0 var(--s3); }
.fuss__raster { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s5) 40px; padding-bottom: var(--s5); border-bottom: 1px solid var(--linie-dunkel); }
.fuss__marke { flex: 1 1 260px; max-width: 320px; }
.fuss__marke p { max-width: 36ch; margin: 14px 0 12px; }
.fuss__adresse { line-height: 1.7; font-size: .9rem; }
.fuss__raster > div:not(.fuss__marke) { flex: 0 0 auto; min-width: 0; }
.fuss__titel { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linie-dunkel); }
.fuss ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: max-content; gap: 10px 32px; }
.fuss ul li { margin: 0; }
.fuss ul a { display: inline-block; padding: 3px 0; line-height: 1.35; }
.fuss__recht { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.fuss__recht a { padding: 3px 0; }
.fuss__unten { padding-top: var(--s3); gap: 6px var(--s4); font-size: .8125rem; color: var(--text-hell-2); }
@media (max-width: 1100px) {
  .fuss__marke { flex: 1 1 100%; max-width: none; }
  .fuss__marke p { max-width: 60ch; }
}
@media (max-width: 640px) {
  .fuss__raster { flex-direction: column; gap: var(--s4); }
  .fuss__raster > div:not(.fuss__marke) { width: 100%; }
  .fuss ul, .fuss__raster > div:last-child ul { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: 6px 20px; }
}

/* Aufgabenfinder: Karten statt Textliste */
.aufgabenfinder { counter-reset: fg; gap: var(--s4); }
.finder-gruppe { counter-increment: fg; display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie); border-top: 4px solid var(--oliv); border-radius: var(--radius); padding: var(--s4); box-shadow: 0 1px 2px rgba(35, 41, 43, .06); }
.finder-gruppe h3 { display: flex; align-items: center; gap: 14px; font-size: 1.25rem; margin: 0 0 var(--s3); }
.finder-gruppe h3::before { content: counter(fg, decimal-leading-zero); display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--oliv-flaeche); color: var(--oliv-dunkel); border: 2px solid var(--oliv); font-size: .9rem; font-weight: 700; letter-spacing: .02em; }
.finder-programme li { position: relative; margin: 0; padding: 14px 44px 14px 14px; border-top: 1px solid var(--linie); border-radius: var(--radius); transition: background-color .18s ease; }
.finder-programme li:first-child { border-top: 0; }
.finder-programme li:hover { background: var(--oliv-flaeche); }
.finder-programme li::after { content: "\2192"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--oliv); font-weight: 700; transition: transform .18s ease; }
.finder-programme li:hover::after { transform: translate(5px, -50%); }
.finder-programme a { display: block; padding: 0; margin-bottom: 4px; font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none; }
.finder-programme a::after { content: ""; position: absolute; inset: 0; }
.finder-programme a:focus-visible { outline: none; }
.finder-programme a:focus-visible::after { outline: 3px solid var(--oliv); outline-offset: -3px; border-radius: var(--radius); }
.finder-programme p { font-size: .92rem; color: var(--text-2); }
.finder-rollen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--linie); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); }
.finder-rollen span { margin-right: 4px; font-weight: 600; }
.finder-rollen a { display: inline-block; padding: 6px 14px; border: 1px solid var(--linie); border-radius: 999px; font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--oliv-dunkel); transition: background-color .18s ease, border-color .18s ease; }
.finder-rollen a:hover { background: var(--oliv-flaeche); border-color: var(--oliv); }
.finder-programme + .finder-rollen { margin-top: auto; }

/* Aktuelles */
.neuigkeiten { margin-top: var(--s4); }
.neuigkeit { display: grid; grid-template-columns: 170px 1fr; gap: 6px var(--s5); padding: var(--s4) 0; border-top: 1px solid var(--linie); scroll-margin-top: 110px; }
.neuigkeit:last-child { border-bottom: 1px solid var(--linie); }
.neuigkeit__meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.neuigkeit time { font-weight: 700; color: var(--oliv-dunkel); font-variant-numeric: tabular-nums; }
.neuigkeit__tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--oliv-flaeche); border: 1px solid var(--oliv); color: var(--oliv-dunkel); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.neuigkeit h2, .neuigkeit h3 { font-size: 1.3rem; margin: 0 0 var(--s2); }
.neuigkeit p { margin: 0 0 var(--s2); max-width: 70ch; }
.neuigkeit .textlink { display: inline-block; }
.aktuell-teaser { display: grid; gap: 0; margin-top: var(--s4); }
.aktuell-teaser a { display: grid; grid-template-columns: 120px 1fr auto; gap: var(--s3); align-items: center; padding: 14px 8px; border-top: 1px solid var(--linie); text-decoration: none; color: var(--text); transition: background-color .18s ease; }
.aktuell-teaser a:last-child { border-bottom: 1px solid var(--linie); }
.aktuell-teaser a:hover { background: var(--oliv-flaeche); }
.aktuell-teaser time { font-weight: 700; color: var(--oliv-dunkel); font-variant-numeric: tabular-nums; }
.aktuell-teaser strong { font-weight: 600; }
.aktuell-teaser span[aria-hidden] { color: var(--oliv); font-weight: 700; }
@media (max-width: 700px) {
  .neuigkeit { grid-template-columns: 1fr; gap: 6px; }
  .neuigkeit__meta { flex-direction: row; align-items: center; gap: 12px; }
  .aktuell-teaser a { grid-template-columns: 1fr auto; }
  .aktuell-teaser time { grid-column: 1 / -1; }
}

/* Preisseite */
.preis-weg { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.preis-weg a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--linie); border-left: 4px solid var(--oliv); border-radius: var(--radius); background: var(--weiss); text-decoration: none; color: var(--text); transition: background-color .18s ease, border-color .18s ease; height: 100%; }
.preis-weg a:hover { background: var(--oliv-flaeche); border-color: var(--oliv); }
.preis-weg span { font-size: .875rem; color: var(--oliv-dunkel); font-weight: 600; }
.preis-fokus { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s5); background: var(--nacht); color: var(--text-hell); border-top: 4px solid var(--oliv-hell); border-radius: var(--radius); padding: var(--s6) var(--s5) var(--s5); box-shadow: var(--schatten); scroll-margin-top: 110px; }
.preis-fokus .paket__badge { top: -14px; left: var(--s5); background: var(--oliv-hell); color: var(--nacht); }
.preis-fokus h3 { color: var(--weiss); font-size: var(--t-xl); margin-bottom: var(--s2); }
.preis-fokus p { color: var(--text-hell-2); }
.preis-fokus .haken li { color: var(--text-hell); }
.preis-fokus__preis { display: flex; flex-direction: column; gap: 10px; padding: var(--s4); background: rgba(255, 255, 255, .05); border: 1px solid var(--linie-dunkel); border-radius: var(--radius); }
.preis-fokus .paket__chf { color: var(--text-hell-2); }
.preis-fokus .paket__betrag { color: var(--weiss); font-size: 3.5rem; }
.preis-fokus .paket__dauer, .preis-fokus .preis-vorher { margin: 0; color: var(--text-hell-2); }
.preis-fokus .paket__tag { color: var(--oliv-hell); margin: 0; min-height: 0; }
.preis-fokus .textlink { color: var(--text-hell); text-align: center; }
.preis-vorher s { text-decoration-thickness: 2px; }
.preis-spar { align-self: flex-start; margin: 0; padding: 4px 12px; border-radius: 4px; background: var(--oliv); color: var(--weiss) !important; font-weight: 700; font-size: .875rem; }
.preis-rollen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.preis-karte { display: flex; flex-direction: column; gap: 6px; background: var(--weiss); border: 1px solid var(--linie); border-top: 3px solid var(--oliv); border-radius: var(--radius); padding: var(--s4); box-shadow: 0 1px 2px rgba(35, 41, 43, .06); }
.preis-karte h4 { font-size: 1.2rem; margin: 0; }
.preis-karte__fuer { color: var(--text-2); font-size: .93rem; margin: 0 0 var(--s2); min-height: 3.2em; }
.preis-karte .paket__betrag { font-size: 2.5rem; }
.preis-karte .paket__dauer { margin: 0; }
.preis-karte__wert { font-size: .85rem; color: var(--text-2); margin: 4px 0 0; }
.preis-karte__wert strong { color: var(--oliv-dunkel); }
.preis-karte .paket__tag { margin: 0 0 var(--s3); min-height: 0; }
.preis-karte .btn { margin-top: auto; }
.preis-karte .textlink { text-align: center; margin-top: 6px; }
.preis-weitere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.preis-karte--quer { flex-direction: row; gap: var(--s4); border-top-color: var(--anthrazit); }
.preis-karte--quer > div { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.preis-karte--quer .preis-karte__fuer { min-height: 0; }
@media (max-width: 1100px) { .preis-rollen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .preis-weg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .preis-fokus { grid-template-columns: 1fr; padding: var(--s5) var(--s4) var(--s4); } .preis-weitere { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .preis-rollen, .preis-weg { grid-template-columns: 1fr; } .preis-karte--quer { flex-direction: column; } .preis-fokus .paket__betrag { font-size: 3rem; } }

/* ==========================================================================
   16 Bewegung mit Zweck: Orientierung und Rückmeldung, nie Dekoration
   Sichtbar, aber kurz: 0,25 bis 0,7 Sekunden. Mit eingestellter reduzierter Bewegung
   schaltet Abschnitt 13 alles ab.
   ========================================================================== */
/* Erste Ansicht sofort lesbar: keine verzoegerte Einblendung von Titel, Bild und CTA. */
.hero .kicker, .hero h1, .hero__lead, .hero .btn-reihe, .hero__punkte, .hero__bild, .hero figure,
.seitenkopf .kicker, .seitenkopf h1, .seitenkopf .wrap > p, .seitenkopf .btn-reihe { animation: none; }

/* Eintritt beim Scrollen: JS markiert nur Blöcke unterhalb des Bildschirms (.m5-vor) */
.m5-vor { opacity: 0; transform: translateY(32px); }
.m5-vor.m5-arrive { opacity: 1; transform: none; animation: none; transition: opacity .65s ease-out, transform .65s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--m5-delay, 0ms); }

/* Kopfzeile und Lesefortschritt */
.kopf { transition: box-shadow .25s ease; }
.kopf--scroll { box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.lese-balken { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--oliv-hell); box-shadow: 0 0 8px rgba(167, 181, 117, .7); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; pointer-events: none; transition: transform .12s linear; }

/* Preise: Wechsel WK / RS sichtbar machen */
@keyframes preis-ein { 0% { opacity: 0; transform: translateY(-16px) scale(.9); } 60% { opacity: 1; transform: translateY(2px) scale(1.04); } 100% { opacity: 1; transform: none; } }
.preis-wechsel .paket__betrag, .preis-wechsel .preis-vorher, .preis-wechsel .preis-spar, .preis-wechsel .paket__tag, .preis-wechsel .preis-karte__wert, .preis-wechsel td strong { animation: preis-ein .5s cubic-bezier(.2, .7, .2, 1); }

/* Aufklappen, Ziel-Hervorhebung, Menü */
@keyframes faq-auf { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.faq details[open] > .faq__antwort { animation: faq-auf .3s ease-out; }
.faq summary { transition: background-color .18s ease, color .18s ease; }
.faq summary:hover { background: var(--oliv-flaeche); }
@keyframes ziel-blitz { 0% { background-color: #D9E1BE; box-shadow: -12px 0 0 #D9E1BE, 12px 0 0 #D9E1BE; } 100% { background-color: transparent; box-shadow: none; } }
.neuigkeit:target, .artikel__teil:target, .glossar > div:target { animation: ziel-blitz 2.2s ease-out; }
@keyframes nav-ein { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1180px) { .nav.offen { animation: nav-ein .25s ease-out; } }

/* Rückmeldung bei Hover und Klick: Farbe, Rand, Schatten, kein Springen */
.btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease; }
.btn:hover { box-shadow: 0 6px 16px rgba(35, 41, 43, .22); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.pfeil::after { transition: transform .2s ease; }
.pfeil:hover::after, a:hover > .pfeil::after, .karte--link:hover .pfeil::after { transform: translateX(6px); }
.preis-karte, .preis-weg a, .progkarte, .karte--link, .finder-gruppe, .aufgabe, .rolle, .paket { transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease; }
.preis-karte:hover, .finder-gruppe:hover, .aufgabe:hover, .paket:hover { border-color: var(--oliv); box-shadow: 0 12px 28px rgba(35, 41, 43, .14); }
.progkarte:hover, .karte--link:hover, .rolle:hover { border-color: var(--oliv); box-shadow: 0 10px 24px rgba(35, 41, 43, .12); }
.aktuell-teaser span[aria-hidden] { transition: transform .2s ease; }
.aktuell-teaser a:hover span[aria-hidden] { transform: translateX(6px); }
.fuss__social a { transition: color .2s ease, border-color .2s ease, transform .2s ease, background-color .2s ease; }
.fuss__social a:hover { transform: translateY(-3px) scale(1.08); background: rgba(167, 181, 117, .12); }
.umschalter button { transition: background-color .25s ease, color .25s ease; }
@media print { .m5-vor { opacity: 1 !important; transform: none !important; } }

/* Ratgeber: die fünf wichtigsten oben */
.top5 { counter-reset: t5; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4); }
.top5 .karte { counter-increment: t5; position: relative; grid-column: span 2; padding-top: var(--s6); border-top: 4px solid var(--oliv); background: var(--weiss); }
.top5 .karte:nth-child(n+4) { grid-column: span 3; }
.top5 .karte::before { content: counter(t5); position: absolute; top: var(--s4); left: var(--s4); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--oliv); color: var(--weiss); font-weight: 700; font-size: .95rem; }
.top5 .karte .kicker { margin-left: 46px; }
.top5 .karte h3 { font-size: 1.3rem; }
@media (max-width: 1020px) { .top5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .top5 .karte, .top5 .karte:nth-child(n+4) { grid-column: span 1; } .top5 .karte:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .top5 { grid-template-columns: 1fr; } .top5 .karte:last-child { grid-column: auto; } }

/* ==========================================================================
   17 Suche
   ========================================================================== */
.suche-knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin-left: var(--s2); flex: none; background: transparent; border: 1px solid var(--linie-dunkel); border-radius: var(--radius); color: var(--text-hell); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.suche-knopf:hover { background: rgba(255, 255, 255, .06); border-color: var(--oliv-hell); color: var(--weiss); }
.suche-knopf svg { flex: none; }
.suche-knopf__text { display: none; }
@media (min-width: 1181px) { .nav a:not(.btn) { padding-left: 7px; padding-right: 7px; } .kopf__inner { gap: var(--s3); } }
@media (max-width: 1180px) { .suche-knopf { margin-left: auto; margin-right: var(--s2); } .marke { margin-right: 0; } }
@media (max-width: 600px) {
  .kopf__inner { gap: 8px; }
  .kopf .marke { min-width: 0; gap: 8px; }
  .kopf .marke img { width: 32px; flex: none; }
  .kopf .marke__text { min-width: 0; }
  .suche-knopf { margin-right: 0; }
  .menue-knopf { flex: none; padding: 10px; gap: 6px; }
}
@media (max-width: 380px) {
  .kopf .marke__sub { display: none; }
  .kopf .marke__name { font-size: 1.1rem; }
  .suche-knopf { width: 40px; }
}
.suche-offen { overflow: hidden; }
.suche { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 10vh var(--s3) var(--s3); }
.suche[hidden] { display: none; }
.suche__hintergrund { position: absolute; inset: 0; background: rgba(22, 25, 26, .72); }
.suche__box { position: relative; width: min(680px, 100%); max-height: 78vh; display: flex; flex-direction: column; background: var(--weiss); border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); border-top: 4px solid var(--oliv); overflow: hidden; animation: suche-ein .18s ease-out; }
@keyframes suche-ein { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.suche__zeile { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linie); }
.suche__feld { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; font: inherit; font-size: 1.1rem; color: var(--text); background: var(--papier); border: 2px solid var(--linie); border-radius: var(--radius); }
.suche__feld:focus { outline: none; border-color: var(--oliv); background: var(--weiss); }
.suche__zu { min-height: 44px; padding: 0 12px; font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--text-2); background: transparent; border: 1px solid var(--linie); border-radius: var(--radius); cursor: pointer; }
.suche__zu:hover { background: var(--oliv-flaeche); }
.suche__liste { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.suche__titel { padding: 8px 12px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.suche__leer { padding: 18px 14px; color: var(--text-2); }
.suche__treffer { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius); text-decoration: none; color: var(--text); border-left: 3px solid transparent; }
.suche__treffer:hover, .suche__treffer.ist-aktiv { background: var(--oliv-flaeche); border-left-color: var(--oliv); }
.suche__ttitel { font-weight: 700; }
.suche__ttitel mark { background: #E3EAC7; color: inherit; border-radius: 2px; padding: 0 1px; }
.suche__text { font-size: .88rem; color: var(--text-2); line-height: 1.45; }
.suche__fuss { margin: 0; padding: 8px 16px; font-size: .78rem; color: var(--text-2); border-top: 1px solid var(--linie); background: var(--papier); }
@media (max-width: 640px) { .suche { padding-top: 4vh; } .suche__fuss { display: none; } }

/* Gleich hohe Karten im Raster (Danke-Seite): kein Versatz durch den Abstand zwischen Geschwistern */
.raster-2 > .seitenblock + .seitenblock { margin-top: 0; }
.raster-2:has(> .seitenblock) { align-items: stretch; }
.raster-2 > .seitenblock { height: 100%; }

/* ==========================================================================
   13 Bewegung, Fokus und Auswahl
   ========================================================================== */
/* Gemeinsame Rückmeldung: nur Farbe und Schatten, keine Verschiebung */
.btn, .progkarte, .karte--link, .rolle, .paket, .demo-karte, .aufgabe { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
/* Ein kurzer Eintritt (js/motion.js setzt .m5-arrive) */
@keyframes marchesan-enter { from { transform: translateY(6px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) { .m5-arrive { animation: marchesan-enter .35s ease-out; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Fokus sichtbar und einheitlich; steht nach den Bausteinen, damit Ring und Rundung Vorrang haben */
:focus-visible { outline: 3px solid var(--oliv-hell, #8A9A5B); outline-offset: 3px; border-radius: 4px; }
.rolle:focus-visible { border-radius: 0; }
.linie-zivil :focus-visible { outline-color: #E5484D; }
::selection { background: rgba(138, 154, 91, .35); }
.linie-zivil ::selection { background: rgba(194, 33, 39, .22); }

/* ==========================================================================
   14 Druck
   ========================================================================== */
@media print {
  .kopf, .fuss, .aufruf, .menue-knopf, .leiste-mobil { display: none !important; }
  body { background: #fff; }
  .recht { border: 0; padding: 0; }
  .demo-leiste, .demo-laden { display: none; }
  .demo-seite { height: auto; overflow: visible; }
}

/* ===== Schritt 7: Formulare ===== */
/* Schritt 7: Formulare (Hinweise beim Feld, Pflichtfeld-Hinweis, Bestellung ohne JavaScript) */
.formular__pflicht { margin-bottom: var(--s3); }
.feld__fehler { font-size: var(--t-sm); font-weight: 600; color: var(--rot); margin: 0; }
.kontrolle + .feld__fehler { margin: calc(-1 * var(--s2)) 0 var(--s3) 32px; }
fieldset > .feld__fehler { margin-top: var(--s2); }
.feld input[aria-invalid="true"], .feld select[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--rot); }
.kontrolle input[aria-invalid="true"] { outline: 2px solid var(--rot); outline-offset: 2px; }
.meldung a { color: inherit; font-weight: 600; text-decoration: underline; }
/* Ohne JavaScript: Programmauswahl trotzdem zeigen, wenn Einzelprogramm gewählt ist */
.formular:has(input[name="paket"][value="einzel"]:checked) .nur-einzel { display: flex; }
.seitenkopf [data-danke-nr] { margin-top: var(--s4); }

/* ===== Schritt 9: Barrierefreiheit und mobile Nutzung ===== */
/* ==========================================================================
   Schritt 9: Barrierefreiheit und mobile Nutzung (Ergänzung, wird an style.css angehängt)
   ========================================================================== */

/* Fokusrahmen mit mindestens 3:1 Kontrast: auf hellen Flächen Oliv, auf dunklen Flächen Hell-Oliv */
:focus-visible { outline-color: var(--oliv); }
.dunkel :focus-visible, .hero :focus-visible, .seitenkopf :focus-visible, .kopf :focus-visible, .produkte :focus-visible,
.fuss :focus-visible, .leiste-mobil :focus-visible, .aufruf :focus-visible, .demo-leiste :focus-visible { outline-color: var(--oliv-hell); }
.video__start:focus-visible { outline-color: var(--oliv); }
.dunkel .video__start:focus-visible { outline-color: var(--oliv-hell); }
.skip:focus { outline: 3px solid var(--oliv); outline-offset: 2px; }

/* Formularfelder: deutlicher Fokusrahmen statt nur 20 % Schatten */
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid var(--oliv); outline-offset: 1px; }

/* Fokus nicht unter der festen Leiste unten oder dem Kopf verstecken */
@media (max-width: 720px) { html { scroll-padding-bottom: 96px; } }

/* Mobiles Menü: bei wenig Höhe scrollbar, Schnellzugriff ausblenden, solange das Menü offen ist */
@media (max-width: 1180px) {
  .nav.offen { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
}
body.menue-offen .leiste-mobil { display: none; }

/* Wenig Höhe (Querformat, 200 % Zoom und mehr): Kopf und Schnellzugriff nicht fixieren */
@media (max-height: 500px) {
  .kopf { position: relative; }
  html { scroll-padding-top: 16px; }
  .nav.offen { max-height: none; overflow-y: visible; }
}
@media (max-height: 500px) and (max-width: 720px) {
  body.mit-leiste { padding-bottom: 0; }
  .leiste-mobil { position: static; }
  html { scroll-padding-bottom: 0; }
}

/* Vergrösserter Text auf breiten Bildschirmen: Navigation bricht um statt seitlich hinauszulaufen */
@media (min-width: 1181px) {
  .kopf__inner { flex-wrap: wrap; }
  .nav { flex-wrap: wrap; justify-content: flex-end; }
}
.leiste-mobil > .btn { min-width: 0; overflow-wrap: anywhere; }
h1, h2, h3, .btn { overflow-wrap: break-word; }
@media (min-width: 1021px) {
  .fuss a, .fuss p { overflow-wrap: break-word; }
}

/* Zielgrössen: Textlinks in Listen und alleinstehende Textlinks mindestens 24 px hoch */
.fuss a, .inhalt a, .artikel__inhalt a, .eckdaten a, .linkliste a, .recht a, .textlink { padding-top: 3px; padding-bottom: 3px; }
.video__text summary { padding: 4px 0; }
.kontrolle input { width: 24px; height: 24px; margin-top: 1px; }
@media (max-width: 600px) { .produkte__inner { min-height: 44px; } }

/* Druck: Produktleiste und Schnellzugriff weglassen, zugeklappte Antworten mitdrucken */
@media print {
  .produkte, .leiste-mobil, .skip, .video__start { display: none !important; }
  details::details-content { content-visibility: visible; display: block; }
}

/* Ohne JavaScript: Menüknopf wirkungslos, deshalb Hauptnavigation direkt anzeigen (unterstützt ab Chrome 120, Firefox 113, Safari 17) */
@media (scripting: none) and (max-width: 1180px) {
  .kopf { position: relative; }
  .kopf__inner { flex-wrap: wrap; }
  .menue-knopf { display: none; }
  .nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; flex-basis: 100%; gap: var(--s1); padding: 0 0 var(--s3); border-bottom: 0; background: transparent; }
  .nav a { border-bottom: 0; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; }
  .nav .btn { margin: 0; }
}

/* Zusammenspiel der Programme: Schemaplan, Auswahl, Tabelle */
.zp-kpi { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); max-width: 880px; }
.zp-kpi li { border-left: 3px solid var(--oliv-hell); padding: 2px 0 2px var(--s3); min-width: 0; }
.zp-kpi b { display: block; font-family: var(--f-titel); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.05; color: var(--weiss); font-weight: 700; }
.zp-kpi span { display: block; font-size: var(--t-sm); color: var(--text-hell-2); margin-top: 4px; }
@media (max-width: 640px) { .zp-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); } }

.zp-hinweis { margin: 0 0 var(--s4); color: var(--text-2); max-width: 46em; }

/* Auswahl per Knopf (Handy, Tablet) */
.zp-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.zp-gruppe { background: var(--weiss); border: 1px solid var(--linie); border-top: 3px solid var(--oliv); border-radius: var(--radius); padding: var(--s3); min-width: 0; }
.zp-gruppe h3 { margin: 0 0 var(--s2); font-size: var(--t-sm); font-family: var(--f-text); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.zp-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.zp-chip { font: inherit; font-weight: 600; font-size: var(--t-sm); min-height: 44px; padding: 0 var(--s3); color: var(--text); background: var(--papier); border: 1px solid #B9BDB8; border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.zp-chip:hover { border-color: var(--oliv); background: var(--oliv-flaeche); }
.zp-chip:focus-visible { outline: 3px solid var(--oliv); outline-offset: 2px; }
.zp-chip[aria-pressed="true"] { background: var(--oliv); border-color: var(--oliv); color: var(--weiss); }
.zp-chip .zp-punkt { width: 6px; height: 6px; }
.zp-chip[aria-pressed="true"] .zp-punkt { background: var(--weiss); }

/* Plan (nur ab 960 px) */
.zp-plan { margin: 0; display: none; }
.zp-dia { border: 1px solid #000; border-radius: var(--radius); background: var(--nacht); padding: var(--s3); box-shadow: var(--schatten); }
.zp-dia svg { display: block; width: 100%; height: auto; }
.zp-plan figcaption { font-size: var(--t-sm); color: var(--text-2); margin-top: var(--s3); max-width: 70em; }
@media (min-width: 960px) { .zp-plan { display: block; } .zp-wahl { display: none; } }
@media (max-width: 700px) { .zp-wahl { grid-template-columns: minmax(0, 1fr); } }
.zp-leg { display: flex; flex-wrap: wrap; gap: 6px var(--s4); font-size: var(--t-sm); color: var(--text-2); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.zp-leg li { display: flex; align-items: center; gap: 8px; }
.zp-sw { display: inline-block; width: 22px; height: 3px; border-radius: 2px; background: #8A9294; flex: none; }
.zp-sw--out { background: var(--oliv); }
.zp-sw--in { background: #2B6CB0; }
.zp-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--oliv); flex: none; }

.zp-colband { fill: #2C3335; }
.zp-coltitle { fill: var(--text-hell-2); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-family: var(--f-text); }
.zp-node { cursor: pointer; }
.zp-node rect { fill: #23292B; stroke: #5B6567; stroke-width: 1.2; transition: fill .12s, stroke .12s; }
.zp-node text { fill: var(--text-hell); font-size: 13px; font-weight: 600; font-family: var(--f-text); pointer-events: none; }
.zp-node:hover rect { fill: #3A4345; stroke: var(--oliv-hell); }
.zp-node:focus { outline: none; }
.zp-node:focus-visible rect { stroke: var(--weiss); stroke-width: 3; }
.zp-node.zp-sel rect { stroke: var(--oliv-hell); stroke-width: 2.5; fill: #46522E; }
.zp-node.zp-sel text { fill: var(--weiss); }
.zp-node.zp-rel rect { stroke: var(--oliv-hell); }
.zp-node.zp-dim { opacity: .3; }
.zp-dot { fill: var(--oliv-hell); pointer-events: none; }

.zp-edge { fill: none; stroke: #8A9294; stroke-width: 1; opacity: .2; pointer-events: stroke; transition: opacity .12s; }
.zp-edge.zp-out { stroke: #B8C98A; stroke-width: 2; opacity: 1; }
.zp-edge.zp-inn { stroke: #6FA8E0; stroke-width: 2; opacity: 1; }
.zp-edge.zp-hov { stroke-width: 3.5; opacity: 1; }
.zp-hid { display: none; }
.zp-elabel rect { fill: var(--nacht); stroke: var(--oliv-hell); }
.zp-elabel text { fill: var(--text-hell); font-size: 12px; font-weight: 500; font-family: var(--f-text); }

#zp-panel { margin-top: var(--s5); scroll-margin-top: 90px; }
.zp-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.zp-kopf h3 { margin: 0; }
.zp-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
.zp-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s3) var(--s4); min-width: 0; }
.zp-karte h3, .zp-karte h4 { margin: 0 0 var(--s2); font-size: var(--t-base); display: flex; align-items: center; gap: var(--s2); }
.zp-liste { list-style: none; margin: 0; padding: 0; }
.zp-liste li { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--s3); padding: 8px 6px; border-top: 1px solid var(--linie); font-size: var(--t-sm); }
.zp-liste li:first-child { border-top: 0; }
.zp-liste li:hover { background: var(--oliv-flaeche); }
.zp-liste a { font-weight: 600; overflow-wrap: anywhere; }
.zp-liste span { color: var(--text-2); overflow-wrap: anywhere; }
.zp-leer { color: var(--text-2); font-size: var(--t-sm); margin: 0 0 var(--s2); }
.zp-badge { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: .75rem; font-weight: 600; color: var(--weiss); background: var(--oliv); margin-right: 6px; }
@media (max-width: 760px) {
  .zp-paar { grid-template-columns: minmax(0, 1fr); }
  .zp-liste li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Rollen */
.zp-rollen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.zp-rolle { background: var(--weiss); border: 1px solid var(--linie); border-top: 4px solid var(--oliv); border-radius: var(--radius); padding: var(--s4); min-width: 0; transition: transform .2s, box-shadow .2s; }
.zp-rolle:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.zp-rolle svg { width: 44px; height: 44px; color: var(--oliv); margin-bottom: var(--s3); }
.zp-rolle h3 { margin: 0 0 var(--s2); }
.zp-rolle p { margin: 0; color: var(--text-2); }
.zp-rolle ul { margin: var(--s3) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.zp-rolle li { font-size: .8125rem; font-weight: 600; background: var(--oliv-flaeche); color: var(--oliv-dunkel); border: 1px solid #D5DAC4; border-radius: 4px; padding: 2px 8px; }
.zp-band { margin-top: var(--s4); background: var(--nacht); color: var(--text-hell); border-radius: var(--radius); border-left: 4px solid var(--oliv-hell); padding: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; justify-content: space-between; }
.zp-band p { margin: 0; max-width: 46em; }
.zp-band a { color: var(--oliv-hell); font-weight: 600; }
@media (max-width: 900px) { .zp-rollen { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .zp-rolle, .zp-edge, .zp-node rect { transition: none; } .zp-rolle:hover { transform: none; } }

/* Tabelle */
.zp-werkzeug { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s3); }
.zp-werkzeug label { font-weight: 600; }
.zp-suche { font: inherit; min-height: 44px; padding: 0 var(--s3); color: var(--text); background: var(--weiss); border: 1px solid #B9BDB8; border-radius: var(--radius); max-width: 100%; width: min(100%, 340px); }
.zp-suche:focus-visible { outline: 3px solid var(--oliv); outline-offset: 2px; }
.zp-tabelle { max-height: 560px; overflow: auto; }
.zp-tabelle thead th { position: sticky; top: 0; }
.zp-tabelle td { overflow-wrap: anywhere; }
.zp-tabelle td:nth-child(3) { color: var(--text-2); }
.zp-zahl { color: var(--text-2); font-size: var(--t-sm); }
@media (max-width: 640px) { .zp-tabelle th, .zp-tabelle td { padding: 10px var(--s2); font-size: var(--t-sm); } }

/* Hinweis auf der Programme-Seite */
.zp-teaser { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: center; }
.zp-teaser__bild { background: var(--nacht); border-radius: var(--radius); padding: var(--s3); box-shadow: var(--schatten); }
.zp-teaser__bild svg { display: block; width: 100%; height: auto; }
.zp-mini { fill: #2C3335; stroke: #5B6567; stroke-width: 1.2; }
.zp-mini-pfeil { fill: none; stroke: var(--oliv-hell); stroke-width: 1.4; opacity: .7; }
@media (max-width: 900px) { .zp-teaser { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }