/* ============================================================================
   Ramsauer Radsport — Unterseiten (58 Seiten aus seiten_bau.py) und die
   Verstaerkungen, die alle Seiten betreffen. Wird als LETZTES geladen.

   Richtung: Ramsauers Plakatsprache, aber lauter — Versalien gross, ein Wort
   als Kontur hinter dem Hero, Fotos, die ueber Sektionskanten ragen, Gold
   nur als Akzent. Kein Verlauf als Fläche, keine Glaskarten, keine drei
   gleichen Kästen mit Icon oben.
   ========================================================================== */

/* ------------------------------------------------- Typografie, lauter */
h2 { font-size: clamp(2.05rem, 5.2vw, 4.4rem); line-height: .96; letter-spacing: -.024em; }
.abschnitt { padding: clamp(66px, 9vw, 150px) 0; }
.kopfzeile { max-width: 52rem; }
.kopfzeile .lead { margin-top: 6px; }

/* Brotkrumen */
.brotkrumen { background: var(--grund); border-bottom: 1px solid var(--linie-fein); }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0; padding: 0; font-size: .8rem; color: var(--schrift-3); }
.brotkrumen li { display: inline-flex; align-items: center; min-height: 44px; }
.brotkrumen li + li::before { content: "/"; margin: 0 8px; opacity: .5; }
.brotkrumen a { color: var(--schrift-2); text-decoration: none; font-weight: 600; }
.brotkrumen a:hover { color: var(--gold); }
.brotkrumen [aria-current] { color: var(--schrift); font-weight: 600; }

/* ------------------------------------------------- Hero der Unterseiten */
.seite-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(56px, 8vw, 118px) 0 clamp(90px, 12vw, 160px);
  background: var(--grund);
}
.seite-hero-in { position: relative; z-index: 2; display: grid; gap: clamp(30px, 4.4vw, 70px); align-items: center; }
@media (min-width: 960px) { .seite-hero--bild .seite-hero-in { grid-template-columns: 1.02fr .98fr; } }
.seite-hero h1 { font-size: clamp(2.35rem, 6.2vw, 5.4rem); max-width: 15ch; margin-bottom: clamp(18px, 2.6vw, 30px); }
.seite-hero h1.h1--lang { font-size: clamp(2rem, 4.6vw, 3.9rem); max-width: 20ch; }
.seite-hero .lead { max-width: 56ch; font-size: clamp(1.08rem, 1.5vw, 1.26rem); }
.seite-hero .knoepfe { margin-top: 24px; }

/* Konturwort hinter dem Hero — das erste Wort des Titels, riesig. */
.hero-kontur {
  position: absolute; left: -.04em; top: clamp(12px, 3vw, 40px); z-index: 0; margin: 0;
  font-family: var(--display); font-variation-settings: "wght" 800; text-transform: uppercase;
  font-size: clamp(5rem, 22vw, 21rem); line-height: .8; letter-spacing: -.05em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(245,194,0,.16);
  pointer-events: none; user-select: none;
}

/* Hero-Bild: schraeg beschnitten, mit goldenem Versatzrahmen, ragt unten ueber die Kante. */
.seite-hero-bild { position: relative; z-index: 2; padding: 0 18px 18px 0; }
.seite-hero-bild .hero-bild {
  position: relative; margin: 0; overflow: hidden;
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}
.seite-hero-bild .hero-bild.form--hoch { max-width: 28rem; margin-left: auto; }
.seite-hero-bild .hero-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.8,.3,1); }
.seite-hero-bild:hover .hero-bild img { transform: scale(1.04); }
.seite-hero-bild::before {
  content: ""; position: absolute; inset: 18px 0 0 18px; z-index: -1;
  border: 1.5px solid rgba(245,194,0,.55);
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}
@media (min-width: 960px) {
  .seite-hero-bild { margin-bottom: clamp(-70px, -7vw, -120px); }
}
.seite-hero .hero-kante { z-index: 1; }

/* Lese-Hero (Ratgeber): Titel ueber die ganze Breite, Bild als breites Band darunter. */
.seite-hero--lesen .seite-hero-in { grid-template-columns: 1fr; }
.seite-hero--lesen h1 { max-width: 20ch; font-size: clamp(2.2rem, 5.4vw, 4.6rem); }
.seite-hero--lesen .seite-hero-bild { margin-bottom: clamp(-60px, -6vw, -110px); }
.seite-hero--lesen .seite-hero-bild .hero-bild { aspect-ratio: 16 / 9 !important; max-width: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); }
.seite-hero--lesen .seite-hero-bild::before { inset: 14px 0 0 14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); }

/* Schlichter Hero (Recht): kein Bild, ruhig. */
.seite-hero--schlicht { padding-bottom: clamp(56px, 7vw, 96px); }
.seite-hero--schlicht h1 { font-size: clamp(2rem, 4.6vw, 3.8rem); max-width: 22ch; }
.seite-hero--schlicht .hero-kontur { -webkit-text-stroke-color: rgba(255,255,255,.07); }

.hero-fakten-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; padding: 0; margin: 22px 0 0; }
.hero-fakten-chips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  font-size: .82rem; font-weight: 600; color: var(--schrift-2);
  border: 1px solid var(--linie); border-radius: 999px; background: rgba(18,18,17,.55);
}
.hero-fakten-chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }

/* ------------------------------------------------- Bausteine */
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; padding: 0; margin: 0 0 18px; }
.chips li, .chip {
  display: inline-flex; align-items: center; padding: 7px 13px;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--gold);
  background: rgba(245,194,0,.1); border-radius: 999px;
}
.chip-zeile { margin: 0 0 14px; }
.abschnitt--hell .chips li, .abschnitt--hell .chip { color: var(--gold-tief); background: rgba(212,168,0,.16); }

.haken { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 10px; }
.haken li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.haken .ico { width: 20px; height: 20px; color: var(--gold); margin-top: 3px; }
.abschnitt--hell .haken .ico { color: var(--gold-tief); }
.punkte { padding-left: 1.2em; }
.punkte li { margin-bottom: .45em; }
.nummern { list-style: none; counter-reset: n; padding: 0; margin: 0 0 1.2em; display: grid; gap: 12px; }
.nummern li { counter-increment: n; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: baseline; }
.nummern li::before {
  content: counter(n, decimal-leading-zero); font-family: var(--display); font-variation-settings: "wght" 800;
  font-size: 1.5rem; color: var(--gold); line-height: 1;
}
.abschnitt--hell .nummern li::before { color: var(--gold-tief); }

.zitat {
  margin: 28px 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--gold);
  font-family: var(--display); font-variation-settings: "wght" 500; font-style: italic;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.3; color: var(--schrift);
}
.zitat p { margin: 0; }
.abschnitt--hell .zitat { color: var(--tinte); }

/* Tabellen: rollen im eigenen Rahmen, nie die Seite. */
.tabelle-rahmen { overflow-x: auto; margin: 22px 0; border: 1px solid var(--linie-fein); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.tabelle { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .93rem; }
.tabelle th, .tabelle td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie-fein); }
.tabelle thead th { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); background: rgba(245,194,0,.07); }
.tabelle tbody th { color: var(--schrift); font-weight: 700; white-space: nowrap; }
.tabelle tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
.abschnitt--hell .tabelle thead th { color: var(--gold-tief); background: rgba(212,168,0,.12); }
.abschnitt--hell .tabelle tbody th { color: var(--tinte); }
.abschnitt--hell .tabelle tbody tr:nth-child(even) { background: rgba(18,18,17,.035); }
.abschnitt--hell .tabelle-rahmen { border-color: rgba(18,18,17,.12); }

/* Bilder: jedes mit Aufgabe, jedes mit anderer Proportion. */
.bild { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-gr); border: 1px solid var(--linie-fein); }
.bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.3,1); }
.bild:hover img { transform: scale(1.04); }
/* Der Rahmen folgt dem Bild: form--hoch, form--quer, form--band stehen an
   jeder Figur (aus dem Seitenverhaeltnis in bilder.json gerechnet). Ein
   Hochformat wird nie in ein Querformat geschnitten und umgekehrt
   (Befund Jairo, 06.09.2026). */
/* Das Seitenverhaeltnis selbst steht als Inline-Stil an jeder Figur
   (aus bilder.json gerechnet); die Klassen begrenzen nur die Breite. */
.bild--inline.form--quadrat, .bild--karte.form--quadrat { max-width: 24rem; }
.seite-hero-bild .hero-bild.form--quadrat { max-width: 32rem; margin-left: auto; }
.bild--inline { margin: 26px 0; }
.bild--inline.form--hoch { max-width: min(100%, 26rem); }
.bild--seite.form--hoch { max-width: 26rem; }
.bild--karte { margin: 0 0 16px; border-radius: var(--radius); }
.bild--karte.form--hoch { max-width: 18rem; }
.bild--portrait { aspect-ratio: 1 !important; border-radius: var(--radius-gr); }
.bild--band { margin-top: clamp(28px, 3.6vw, 56px); }

/* Gold-Ecke als Signatur, nur an Seitenbildern. */
.bild--seite::after {
  content: ""; position: absolute; right: 0; top: 0; width: 64px; height: 64px;
  background: var(--gold); clip-path: polygon(100% 0, 0 0, 100% 100%); opacity: .95;
}

/* ------------------------------------------------- Sektionslayouts */
.sek-in { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 960px) {
  .sek-in--text-bild { grid-template-columns: 1.12fr .88fr; }
  .sek-in--bild-text { grid-template-columns: .88fr 1.12fr; }
  .sek-in--bild-text .sek-bild { order: -1; }
  .sek-in--text-bild .sek-bild { margin-top: clamp(24px, 4vw, 72px); }
  .sek-in--bild-text .sek-bild { margin-top: clamp(-90px, -8vw, -40px); }   /* ragt in die Sektion davor */
  .sek-in--fragen { grid-template-columns: 1.3fr .7fr; }
  .sek-in--formular { grid-template-columns: .8fr 1.2fr; }
}
.sek-in--bild-text .sek-bild { position: relative; z-index: 2; }
.sek-text .lead { max-width: 58ch; }
.sek-text > p, .sek-text > ul, .sek-text > ol { max-width: 66ch; }
.fluss { max-width: 72ch; }
.fluss .bild--inline { max-width: none; }
.sek--fluss .kopfzeile { margin-bottom: clamp(20px, 2.6vw, 36px); }
.einzel { max-width: 66ch; }
.einzel h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }

/* Ratgeber: Lesespalte, Bilder daneben kleiner. */
@media (min-width: 960px) {
  .seite--ratgeber .sek-in--text-bild { grid-template-columns: 1.35fr .65fr; }
  .seite--ratgeber .sek-in--bild-text { grid-template-columns: .65fr 1.35fr; }
}
.seite--ratgeber .sek-text > p { font-size: 1.04rem; }
.seite--ratgeber h2 { font-size: clamp(1.7rem, 3.6vw, 2.9rem); }

/* Karten, gebrochen: nie drei gleiche nebeneinander. */
.karten-gitter { display: grid; gap: clamp(14px, 1.8vw, 22px); }
@media (min-width: 640px) { .karten-gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .karten-gitter--3, .karten-gitter--4 { grid-template-columns: repeat(6, 1fr); align-items: start; }
  .karten-gitter--3 > :nth-child(3n+1) { grid-column: span 3; }
  .karten-gitter--3 > :nth-child(3n+2) { grid-column: span 3; margin-top: clamp(20px, 2.8vw, 44px); }
  .karten-gitter--3 > :nth-child(3n+3) { grid-column: span 6; }
  .karten-gitter--3 > :nth-child(3n+3):last-child { grid-column: span 6; }
  .karten-gitter--4 > * { grid-column: span 2; }
  .karten-gitter--4 > :nth-child(4n+2) { margin-top: clamp(20px, 2.8vw, 44px); }
  .karten-gitter--4 > :nth-child(4n+3) { margin-top: clamp(-10px, -.8vw, 0px); }
  .karten-gitter--4 > :nth-child(4n+1) { grid-column: span 2; }
  .karten-gitter--4 > :nth-child(4n) { grid-column: span 2; margin-top: clamp(12px, 1.6vw, 24px); }
}
.kachel { gap: 9px; }
.kachel h3 { font-size: clamp(1.14rem, 1.7vw, 1.36rem); }
.kachel > p:last-of-type { margin-bottom: 0; }
.karte-mehr {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-top: auto; padding-top: 6px;
  font-weight: 700; font-size: .9rem; color: var(--gold); text-decoration: none;
}
.karte-mehr .ico { width: 15px; height: 15px; transition: transform .22s ease; }
.karte-mehr:hover .ico { transform: translateX(5px); }
.abschnitt--hell .karte-mehr { color: var(--gold-tief); }

/* Schritte: versetzt, mit grosser Nummer. */
.schritte-reihe { display: grid; gap: clamp(22px, 2.8vw, 34px); }
@media (min-width: 860px) {
  .schritte-reihe { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .schritte-reihe > :nth-child(3n+2) { margin-top: clamp(24px, 3.4vw, 54px); }
  .schritte-reihe > :nth-child(3n+3) { margin-top: clamp(48px, 6.6vw, 108px); }
}
.schritt .bild { margin-top: 14px; }
.schritt .karte-mehr { display: inline-flex; }

/* Zeitstrahl */
.zeitstrahl { position: relative; display: grid; gap: clamp(22px, 3vw, 40px); padding-left: clamp(24px, 4vw, 48px); border-left: 1px solid var(--linie); max-width: 62rem; }
.zeit { position: relative; display: grid; gap: 10px 28px; }
@media (min-width: 720px) { .zeit { grid-template-columns: 8rem 1fr; } }
.zeit::before { content: ""; position: absolute; left: calc(-1 * clamp(24px, 4vw, 48px) - 6px); top: .55em; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px var(--grund); }
.abschnitt--ab .zeit::before { box-shadow: 0 0 0 5px var(--grund-2); }
.abschnitt--hell .zeit::before { box-shadow: 0 0 0 5px var(--hell); }
.zeit-jahr {
  margin: 0; font-family: var(--display); font-variation-settings: "wght" 800;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.03em; color: var(--gold);
}
.abschnitt--hell .zeit-jahr { color: var(--gold-tief); }
.zeit h3 { margin-bottom: 6px; }
.zeit p:last-child { margin-bottom: 0; }

/* Team: drei Portraits, leicht gegeneinander gedreht. */
.personen { display: grid; gap: clamp(18px, 2.6vw, 34px); }
@media (min-width: 640px) { .personen { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.person { text-align: left; }
.person .bild--portrait { margin-bottom: 16px; }
.person:nth-child(2) { margin-top: clamp(18px, 3vw, 48px); }
/* Kein Drehen: ein gedrehtes Kind hebt den Inhaltsueberlauf seines Kastens (gemessen 06.09.2026,
   334 > 318 px). Stattdessen ein goldener Versatzrahmen wie im Hero. */
.person .bild--portrait { overflow: visible; border: 0; }
.person .bild--portrait img { border-radius: var(--radius-gr); }
.person .bild--portrait::after { content: ""; position: absolute; inset: 12px 0 0 12px; z-index: 2; pointer-events: none; border: 1.5px solid rgba(245,194,0,.55); border-radius: var(--radius-gr); }
.person { position: relative; }
.person h3 { margin-bottom: 4px; }
.person p { font-size: .94rem; margin: 0; }

/* Zahlenband */
.zahlen { display: grid; gap: clamp(18px, 2.4vw, 30px); margin: clamp(10px, 2vw, 24px) 0 clamp(30px, 4vw, 56px); }
@media (min-width: 640px) { .zahlen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .zahlen { grid-template-columns: repeat(4, 1fr); } }
.zahl-block { padding: 20px 0 0; border-top: 2px solid var(--gold); }
.zahl-block .zahl { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.abschnitt--hell .zahl { color: var(--gold-tief); }
.abschnitt--hell .zahl-text { color: #4A463D; }

/* Fragen: Aufklapper mit Bild daneben */
.sek--fragen .faq-liste { max-width: 66rem; margin-top: clamp(8px, 1.4vw, 20px); }
.abschnitt--hell .faq-frage { color: var(--tinte); }
.abschnitt--hell .faq-frage:hover { color: var(--gold-tief); }
.abschnitt--hell .faq-punkt { border-color: rgba(18,18,17,.12); }
.abschnitt--hell .faq-zeichen { color: var(--gold-tief); }

/* Formulare auf hellem Grund */
.abschnitt--hell .karte { background: #fff; border-color: rgba(18,18,17,.1); }
.abschnitt--hell .feld > span { color: var(--tinte); }
.abschnitt--hell .feld input, .abschnitt--hell .feld select, .abschnitt--hell .feld textarea { color: var(--tinte); background: #fff; border-color: rgba(18,18,17,.2); }
.abschnitt--hell .feld select option { background: #fff; color: var(--tinte); }
.abschnitt--hell .zustimmung { color: #4A463D; }
.abschnitt--hell .zustimmung-recht { color: var(--gold-tief); }
.wahl { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.wahl legend { font-weight: 600; font-size: .88rem; color: var(--schrift); margin-bottom: 8px; }
.abschnitt--hell .wahl legend { color: var(--tinte); }
.wahl label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .95rem; cursor: pointer; }
.wahl input { width: 22px; height: 22px; accent-color: #F5C200; }
.feld--pflicht.wahl legend::after { content: " *"; color: #FF9C8E; }

/* Helle Sektionen: Text und Verweise lesbar */
.abschnitt--hell { color: #3E3B34; }
.abschnitt--hell p, .abschnitt--hell li, .abschnitt--hell td { color: #3E3B34; }
.abschnitt--hell a:not(.btn):not(.karte-mehr) { color: var(--gold-tief); }
.abschnitt--hell .hero-fakten-chips li { color: #3E3B34; border-color: rgba(18,18,17,.2); background: #fff; }
.abschnitt--hell .kachel h3, .abschnitt--hell .schritt h3, .abschnitt--hell .zeit h3, .abschnitt--hell .person h3 { color: var(--tinte); }
.abschnitt--hell .schritt { border-top-color: var(--gold-warm); }
.abschnitt--hell .schritt-nr { color: var(--gold-tief); }
.abschnitt--hell .schritt-ico { color: var(--gold-tief); background: rgba(212,168,0,.17); }
.abschnitt--hell .zeitstrahl { border-color: rgba(18,18,17,.15); }
.abschnitt--hell .bild { border-color: rgba(18,18,17,.1); }
.abschnitt--hell .brotkrumen a { color: #3E3B34; }
p a, li a, td a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Anruf- und Mail-Verweise im Fliesstext: Trefferflaeche 44 px ohne den Zeilenfall zu aendern. */
p a[href^="tel:"], li a[href^="tel:"], td a[href^="tel:"], p a[href^="mailto:"], li a[href^="mailto:"], td a[href^="mailto:"],
h2 a, h3 a, h4 a, .chip a, .chips a { display: inline-block; padding: 9px 0; margin: -9px 0; min-height: 44px; }
.brotkrumen a { display: inline-flex; align-items: center; min-height: 44px; }
p a:hover, li a:hover, td a:hover { color: #FFD426; }

/* Schlusssektion mit Zeiten */
.abschluss { background: var(--grund-2); border-top: 1px solid var(--linie-fein); }
.abschluss-in { display: grid; gap: clamp(26px, 3.4vw, 52px); align-items: center; }
@media (min-width: 900px) { .abschluss-in { grid-template-columns: 1.2fr .8fr; } }
.abschluss-zeiten { list-style: none; padding: clamp(20px, 2.4vw, 30px); margin: 0; background: var(--karte); border: 1px solid var(--linie-fein); border-radius: var(--radius-gr); }
.abschluss-zeiten li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie-fein); font-size: .95rem; font-variant-numeric: tabular-nums; }
.abschluss-zeiten li:last-child { border-bottom: 0; }
.abschluss-zeiten li span:last-child { color: var(--schrift); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.abschluss-zeiten a { color: var(--schrift); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.abschluss-zeiten a:hover { color: var(--gold); }

/* Icons zeichnen sich beim Erscheinen, drehen beim Hover */
.kachel-ico .ico, .schritt-ico .ico, .gegen-ico .ico { stroke-dasharray: 70; stroke-dashoffset: 0; }
.vorbereitet .auf:not(.ist-da) .kachel-ico .ico,
.vorbereitet .auf:not(.ist-da) .schritt-ico .ico { stroke-dashoffset: 70; }
.auf.ist-da .kachel-ico .ico, .auf.ist-da .schritt-ico .ico { animation: zeichnen 1.1s cubic-bezier(.2,.8,.3,1) both; }
@keyframes zeichnen { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .auf.ist-da .kachel-ico .ico, .auf.ist-da .schritt-ico .ico { animation: none; }
  .bild img, .seite-hero-bild .hero-bild img { transition: none; }
  .person .bild--portrait img { transition: none; }
}

/* Lange Adressen und Mailadressen brechen im Kasten, nie darueber hinaus. */
.lead, .sek-text p, .fluss p, .kopfzeile p, .tabelle td, .haken li, .punkte li, .abschluss-zeiten li { overflow-wrap: anywhere; }
/* Bilder ragen nie ueber ihren Kasten: Kinder duerfen schrumpfen. */
.sek-in > *, .karten-gitter > *, .schritte-reihe > *, .personen > *, .zahlen > *, .abschluss-in > * { min-width: 0; }
@media (max-width: 27rem) { .seite-hero h1, .kachel h3, .zeit h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } }

/* Vorschau-Stempel: nur auf preview-winwebdesign.com (per Skript eingesetzt). */
.vorschau-stempel {
  position: fixed; left: 0; right: 0; top: 0; z-index: 200; margin: 0;
  padding: 6px 12px; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  background: var(--gold); color: var(--tinte); pointer-events: none;
}
.vorschau-stempel ~ .site-head, body:has(.vorschau-stempel) .site-head { top: 26px; }
body:has(.vorschau-stempel) { padding-top: 26px; }

/* ------------------------------------------------- WPForms im Theme-Stil
   Die Formulare kommen aus WPForms (Termin 96, Amflow 98, Newsletter 100).
   Ihre eigenen Stile liefern dunkle Beschriftungen auf dunklem Grund (gemessen
   08.09.2026: 1,07:1) und 43-px-Felder. Hier bekommen sie das Aussehen der
   handgebauten Formulare. */
.wpforms-container { --wpforms-field-size-input-height: 52px; --wpforms-label-color: #FFFFFF; --wpforms-label-sublabel-color: #B4B0A8;
  --wpforms-field-text-color: #FFFFFF; --wpforms-field-background-color: rgba(255,255,255,.05); --wpforms-field-border-color: rgba(255,255,255,.13);
  --wpforms-field-border-radius: 6px; --wpforms-button-background-color: #F5C200; --wpforms-button-text-color: #121211;
  --wpforms-button-border-radius: 999px; --wpforms-button-size-height: 54px; --wpforms-button-size-font-size: 1rem; --wpforms-field-size-font-size: 1rem;
  --wpforms-label-size-font-size: .88rem; --wpforms-label-size-sublabel-font-size: .8rem; --wpforms-field-size-padding-h: 15px; --wpforms-field-size-input-spacing: 17px;
  --wpforms-field-border-style: solid; --wpforms-field-border-size: 1px; --wpforms-page-break-color: #F5C200; }
.wpforms-container .wpforms-field-label, .wpforms-container legend.wpforms-field-label { color: #FFFFFF !important; font-weight: 600 !important; font-size: .88rem !important; }
.wpforms-container .wpforms-field-sublabel { color: #B4B0A8 !important; font-size: .8rem !important; }
.wpforms-container .wpforms-required-label { color: #FF9C8E !important; }
.wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"], .wpforms-container input[type="date"],
.wpforms-container select, .wpforms-container textarea {
  min-height: 52px !important; color: #FFFFFF !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 6px !important; font: inherit !important; font-size: 1rem !important; padding: 13px 15px !important; }
.wpforms-container textarea { min-height: 122px !important; }
.wpforms-container select option { background: #212120; color: #FFFFFF; }
.wpforms-container input:focus, .wpforms-container select:focus, .wpforms-container textarea:focus { border-color: #F5C200 !important; outline: 2px solid rgba(245,194,0,.34) !important; outline-offset: 1px; box-shadow: none !important; }
.wpforms-container input::placeholder, .wpforms-container textarea::placeholder { color: #8A857B; }
/* Auswahlfelder: Trefferflaeche 44 px ueber die Zeile, nicht ueber das 16-px-Kaestchen */
.wpforms-container ul.wpforms-field-required li, .wpforms-container .wpforms-field-radio li, .wpforms-container .wpforms-field-checkbox li { margin: 0 !important; }
.wpforms-container .wpforms-field-radio li label, .wpforms-container .wpforms-field-checkbox li label { display: flex !important; align-items: center; gap: 12px; min-height: 44px; color: #B4B0A8 !important; font-size: .95rem !important; cursor: pointer; }
.wpforms-container .wpforms-field-radio input, .wpforms-container .wpforms-field-checkbox input { width: 22px !important; height: 22px !important; min-height: 0 !important; margin: 0 !important; accent-color: #F5C200; flex: none; }
.wpforms-container button[type="submit"], .wpforms-container .wpforms-submit {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 54px !important; padding: 15px 28px !important;
  background: #F5C200 !important; color: #121211 !important; font-family: var(--text) !important; font-weight: 700 !important; font-size: 1rem !important;
  border: 1.5px solid #F5C200 !important; border-radius: 999px !important; cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.3,1), background-color .2s ease; }
.wpforms-container button[type="submit"]:hover { background: #FFD426 !important; border-color: #FFD426 !important; transform: translateY(-2px); }
.wpforms-container .wpforms-error, .wpforms-container label.wpforms-error { color: #FF9C8E !important; }
.wpforms-container .wpforms-confirmation-container-full { background: rgba(245,194,0,.12) !important; border: 1px solid rgba(245,194,0,.5) !important; color: #FFFFFF; border-radius: 6px; }
.abschnitt--hell .wpforms-container { --wpforms-label-color: #121211; --wpforms-label-sublabel-color: #4A463D; --wpforms-field-text-color: #121211; --wpforms-field-background-color: #fff; --wpforms-field-border-color: rgba(18,18,17,.2); }
.abschnitt--hell .wpforms-container .wpforms-field-label, .abschnitt--hell .wpforms-container legend.wpforms-field-label { color: #121211 !important; }
.abschnitt--hell .wpforms-container .wpforms-field-sublabel, .abschnitt--hell .wpforms-container .wpforms-field-radio li label, .abschnitt--hell .wpforms-container .wpforms-field-checkbox li label { color: #4A463D !important; }
.abschnitt--hell .wpforms-container input[type="text"], .abschnitt--hell .wpforms-container input[type="email"], .abschnitt--hell .wpforms-container input[type="tel"], .abschnitt--hell .wpforms-container input[type="date"], .abschnitt--hell .wpforms-container select, .abschnitt--hell .wpforms-container textarea { color: #121211 !important; background: #fff !important; border-color: rgba(18,18,17,.2) !important; }
.sek-form .wpforms-container, .news-in .wpforms-container { max-width: 100%; }
.news-in .wpforms-container .wpforms-field-container { display: grid; gap: 12px; }