/* ============================================================
   Stadtwerke Stadtroda GmbH – Haupt-Stylesheet
   Modern · Responsive · Barrierefrei (WCAG 2.1 AA)
   Marke: Grün #1C5E3B · Fonts: Instrument Sans/Serif (lokal, DSGVO)
   ============================================================ */

/* ---- Schriften (lokal gehostet – kein Google-CDN, DSGVO-konform) ---- */
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"),
       url("/assets/fonts/instrument-sans-latin-400-normal.woff") format("woff");
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"),
       url("/assets/fonts/instrument-sans-latin-500-normal.woff") format("woff");
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"),
       url("/assets/fonts/instrument-sans-latin-600-normal.woff") format("woff");
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-700-normal.woff2") format("woff2"),
       url("/assets/fonts/instrument-sans-latin-700-normal.woff") format("woff");
}
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"),
       url("/assets/fonts/instrument-serif-latin-400-normal.woff") format("woff");
}

/* ---- Design-Tokens ---- */
:root {
  --green-900: #103a24;
  --green-800: #14472c;
  --green-700: #1c5e3b;   /* Primär */
  --green-600: #24734a;
  --green-100: #e5efe9;
  --green-050: #f1f6f3;
  --fehler:    #c62828;   /* Schriftfarbe fuer Fehlertexte (Paket 183) */
  /* Gegenstueck zu --fehler fuer bestaetigende Meldungen (Paket 200).
     Dunkel genug fuer 4,5:1 auf Weiss - ein helleres Gruen sieht
     freundlicher aus und ist auf weisser Flaeche nicht mehr lesbar. */
  --ok:        #1b7a3d;
  --accent:    #d98c1f;   /* warmes Akzent-Orange für CTA-Hervorhebung */
  --accent-dark:#b5710f;

  --ink:      #1a1f1c;
  --ink-soft: #47514b;
  --muted:    #6b756f;
  --line:     #dbe3de;
  --bg:       #ffffff;
  --bg-soft:  #f6f8f7;

  --ok-bg:#e6f4ea; --ok-fg:#1c5e3b;
  --err-bg:#fbe9e9; --err-fg:#a12525;

  /* Hover- und Fokusfarbe der klickbaren Karten. Bis Paket 159 stand an den
     drei Verwendungsstellen `var(--brand, #003366)`, die Variable selbst war
     aber nirgends definiert - es griff also immer der Rueckfallwert. Auf
     weissem Grund faellt das nicht auf, in der dunklen Fassung kam der
     Fokusrahmen damit auf 1,28:1 und war praktisch unsichtbar. Jede
     Design-Datei setzt den Wert jetzt selbst. */
  --brand: var(--green-700);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 14px rgba(16,58,36,.08);
  --shadow-lg: 0 10px 34px rgba(16,58,36,.14);
  --container: 1180px;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}

/* ---- Reset / Grundlagen ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-sans); color: var(--ink);
  background: var(--bg); line-height: 1.6; font-size: 1.02rem;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 2px; }
/* Knoepfe ausdruecklich ausgenommen (Paket 164). Ein Knopf traegt seine
   Schriftfarbe passend zu seiner Flaeche; faerbt die allgemeine Regel sie beim
   Ueberfahren um, steht die Beschriftung in der Hoverfarbe auf der Hoverflaeche
   - im Zweifel unsichtbar. Gemessen in der dunklen Fassung: "Zum Kundenportal"
   kam so auf 1,06:1. */
a:not(.btn):not(.mainnav__cta):hover { color: var(--green-800); }
h1, h2, h3, h4 { line-height: 1.2; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1rem; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }

/* Fokus – deutlich sichtbar (Barrierefreiheit) */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Dunkle Baender: Topbar und Fusszeile sind in beiden Fassungen dunkel.
   Der Akzentgelbton misst dort ueber 10:1 gegen den Untergrund, die
   Markenfarbe nur 1,3 bis 2,8:1. (Paket 182) */
.topbar :focus-visible,
.footer :focus-visible,
.footer__legal :focus-visible { outline-color: var(--accent); }

/* Skip-Link */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--green-700); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color:#fff; }

.linklike {
  background: none; border: none; color: inherit; font: inherit;
  text-decoration: underline; cursor: pointer; padding: 0;
}
.visually-hidden {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: var(--shadow); }
.topbar { background: var(--green-800); color: #eaf3ee; font-size: .86rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; flex-wrap: wrap; }
.topbar__slogan { font-family: var(--font-serif); font-size: 1.05rem; color: #d7e8de; }
.topbar__links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.topbar__links a { color: #eaf3ee; text-decoration: none; font-weight: 500; }
.topbar__links a:hover { color: #fff; text-decoration: underline; }
.topbar__stoerung { background: var(--accent); color:#2a1c05!important; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.topbar__stoerung:hover { background:#e79b2f; text-decoration:none; }

.header__main { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo__mark { display: flex; align-items: center; }
.logo__svg { width: 74px; height: 44px; display: block; }
/* Bildmarke (assets/img/logo-regenbogen.png, 285x320). Seit Paket 154 wird sie
   in beiden Farbfassungen gezeigt, deshalb steht die Regel hier statt - wie
   zuvor - in jeder Design-Datei einzeln. Seitenverhaeltnis bleibt erhalten,
   vorgegeben wird nur die Hoehe, analog zum frueheren SVG-Logo. */
/* Hoehe 65px seit Paket 177 (vorher 44px). Sie passt in die bestehende
   Kopfzeile: .header__main hat min-height 76px, nachgemessen bleibt die
   Kopfzeile bei allen Breiten genau 76px hoch - das Logo waechst also, ohne
   die Zeile aufzublaehen. Breite ergibt sich aus dem Seitenverhaeltnis
   285x320 und betraegt damit 58px. */
.logo__img { height: 65px; width: auto; display: block; }
.logo__text { display: flex; flex-direction: column; line-height: 1.04; }
.logo__l1 { font-weight: 700; color: var(--ink); font-size: 1.18rem; letter-spacing: -.01em; }
.logo__l2 { font-weight: 700; color: var(--green-600, #3AAA35); font-size: 1.18rem; letter-spacing: -.01em; }
@media (max-width: 480px) {
  .logo__svg { width: 60px; height: 36px; }
  /* Auf dem Telefon bleibt das Verhaeltnis zur Desktopfassung gewahrt:
     vorher 44/36, jetzt 65/53. Ohne diese Anpassung waere der Sprung von 65
     auf 36 px sprunghaft gross geworden. */
  .logo__img { height: 53px; }
  .logo__l1, .logo__l2 { font-size: 1.02rem; }
}

/* ─── Hauptnavigation + Mega-Menü ─── */
.mainnav { display: flex; align-items: center; gap: 8px; }
.mainnav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mainnav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 13px; border-radius: 8px; text-decoration: none;
  /* Paket 159: Menuepunkte von .95rem auf 1.10rem. Die Leiste wird dadurch
     spuerbar breiter - bei acht Rubriken lohnt ein Blick, ab welcher
     Fensterbreite sie in die mobile Darstellung kippt. */
  color: var(--ink-soft); font-weight: 600; font-size: 1.10rem; white-space: nowrap;
}
.mainnav__link:hover,
.mainnav__item:hover > .mainnav__link,
.mainnav__item:focus-within > .mainnav__link { background: var(--green-050); color: var(--green-800); }
.mainnav__link[aria-current="page"] { background: var(--green-700); color: #fff; }
.mainnav__caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .65; transition: transform .18s;
}
.mainnav__item:hover .mainnav__caret,
.mainnav__item:focus-within .mainnav__caret { transform: rotate(180deg); }

.mainnav__cta {
  margin-left: 6px; padding: 10px 18px; border-radius: 8px;
  background: var(--green-700); color: #fff; font-weight: 700; font-size: .95rem;
  text-decoration: none; white-space: nowrap;
}
.mainnav__cta:hover { background: var(--green-800); }

/* Aufklappmenü – Breite folgt dem Inhalt (Paket 175)
 *
 * Vorher lief das Panel über die volle Fensterbreite. Gedacht war ein
 * Mega-Menü, und für "Privatkunden" mit vier gefüllten Spalten trägt das auch.
 * Die übrigen drei Rubriken haben aber nur eine oder zwei Spalten: Dort stand
 * ein weisses Band über den ganzen Bildschirm, in dem links oben drei Wörter
 * hingen. Das wirkt nicht grosszügig, sondern nach einem Ladefehler.
 *
 * Jetzt bestimmt der Inhalt die Breite. Privatkunden bleibt ein breites
 * Mega-Menü, Geschäftskunden wird ein schmales Aufklappmenü unter seinem
 * Menüpunkt.
 */
.mainnav__item.has-mega { position: relative; }
.mega {
  position: absolute; left: 0; right: auto; top: 100%;
  width: max-content;
  /* Die Obergrenze ist gemessen, nicht geschätzt: Das Panel haengt am
     Menüpunkt, und der linkeste hat bei 1024 px Fensterbreite noch rund
     730 px Platz bis zum rechten Rand. Mehr als 720 px duerfte das Panel also
     nirgends beanspruchen, sonst laeuft "Privatkunden" dort aus dem Bild -
     nachgemessen: 290 px + 838 px = 1128 px bei 1024 px Fenster.
     Breitere Inhalte brechen stattdessen in eine zweite Zeile um. */
  max-width: min(720px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--green-700);
  border-radius: 0 0 12px 12px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 90;
}
/* Rubriken in der rechten Fensterhälfte klappen nach links auf, sonst liefe
   das Panel aus dem Bild. Welche das sind, hängt von der Zahl der Rubriken ab -
   deshalb über die Position von hinten gezählt statt über feste Namen. */
.mainnav__item.has-mega:nth-last-child(-n+2) .mega { left: auto; right: 0; }
.mainnav__item.has-mega:hover .mega,
.mainnav__item.has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* Mit Escape weggedrueckt (Paket 182). Steht bewusst NACH der oeffnenden
   Regel: gleiche Spezifitaet, die spaetere gewinnt. */
.mainnav__item.has-mega.is-dismissed .mega { opacity: 0; visibility: hidden; transform: translateY(-8px); }
.mega .mega__inner.container {
  max-width: none; margin-inline: 0;
  /* Flex statt Raster - und das ist kein Geschmacksurteil: In einem Kasten mit
     width:max-content ist repeat(auto-fit, minmax(…, max-content)) zirkulär.
     Die Breite des Kastens haengt dann von der Spaltenzahl ab und umgekehrt;
     der Browser loest das auf, indem er auf EINE Spalte zusammenfaellt.
     Gemessen: "Privatkunden" schrumpfte damit von 904 auf 246 px.
     Flex mit Umbruch kennt dieses Henne-Ei-Problem nicht: Die Spalten stehen
     nebeneinander, solange sie passen, und brechen um, sobald die max-width
     des Kastens greift. */
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 20px 34px; padding: 22px 26px 26px;
}
.mega .mega__col { flex: 0 1 auto; min-width: 170px; max-width: 260px; }
.mega__col { min-width: 0; }
.mega__title {
  display: block; font-weight: 700; color: var(--green-800); font-size: 1rem;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--green-100); text-decoration: none;
}
a.mega__title:hover { color: var(--brand); border-color: var(--green-600); }
.mega__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.mega__links a { display: block; padding: 6px 8px; margin-left: -8px; border-radius: 6px; text-decoration: none; color: var(--ink-soft); font-size: .93rem; }
.mega__links a:hover { background: var(--green-050); color: var(--green-800); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 2px solid var(--line); border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.nav-toggle span { width: 22px; height: 2.5px; background: var(--green-800); border-radius: 2px; }

/* ─── Mobile ─── */
@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .header__main { position: relative; flex-wrap: wrap; }
  .mainnav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; box-shadow: var(--shadow-lg); border-top: 1px solid var(--line);
    max-height: 80vh; overflow-y: auto;
  }
  .mainnav.is-open { display: flex; }
  .mainnav__list { flex-direction: column; padding: 8px; gap: 0; width: 100%; }
  .mainnav__link { padding: 14px; border-radius: 8px; justify-content: space-between; }
  .mainnav__caret { transition: none; }
  .mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-radius: 0; display: none;
    width: auto; max-width: none;
  }
  /* Die Rechtsausrichtung der Desktop-Fassung zuruecknehmen. */
  .mainnav__item.has-mega:nth-last-child(-n+2) .mega { left: auto; right: auto; }
  .mainnav__item.has-mega.is-expanded .mega { display: block; }
  .mainnav__item.has-mega.is-expanded .mainnav__caret { transform: rotate(180deg); }
  .mega .mega__inner.container { grid-template-columns: 1fr; gap: 12px; padding: 2px 10px 12px; }
  .mega__title { font-size: .95rem; }
  .mainnav__cta { margin: 8px; text-align: center; justify-content: center; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; cursor: pointer; border: 2px solid transparent;
  padding: 12px 22px; border-radius: 10px; text-decoration: none; line-height: 1.1;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.btn--primary:hover { background: var(--green-800); border-color: var(--green-800); color:#fff; }
.btn--accent { background: var(--accent); color: #241802; border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color:#241802; }
.btn--ghost { background: #fff; color: var(--green-800); border-color: var(--line); }
.btn--ghost:hover { background: var(--green-050); border-color: var(--green-600); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ============================================================
   HERO / SECTIONS
   ============================================================ */
.hero {
  background: linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 55%, var(--green-600) 100%);
  color: #fff; padding: 56px 0;
}
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero h1 { color: #fff; }
.hero p.lead { font-size: 1.18rem; color: #e4f0e9; max-width: 52ch; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hero__card {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius); padding: 22px; backdrop-filter: blur(2px);
}
.hero__card h2 { color: #fff; font-size: 1.15rem; }
.hero__card .quick { display: grid; gap: 10px; }
.hero__card .quick a {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; color: var(--green-800); padding: 13px 16px; border-radius: 10px;
  text-decoration: none; font-weight: 600;
}
.hero__card .quick a:hover { background: var(--green-050); }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }

.section { padding: 52px 0; }
.section--soft { background: var(--bg-soft); }
.section__head { margin-bottom: 26px; }
/* Paket 159: von .8rem auf 1.20rem. Die Zeile steht in Versalien mit weitem
   Sperrsatz - bei dieser Groesse traegt sie deutlich mehr Gewicht als zuvor und
   konkurriert bewusst mit der Ueberschrift darunter. */
.section__head .eyebrow { color: var(--green-600); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 1.20rem; }
.section__head h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.7rem,3vw,2.4rem); }

/* Karten-Raster (Aktuelles) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card__media { aspect-ratio: 16/9; background: var(--green-100); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__date { color: var(--muted); font-size: .82rem; }
.card__body h3 { margin: 0; }
.card__body p { color: var(--ink-soft); margin: 0; }
.card__body .btn { margin-top: auto; align-self: flex-start; }

/* Kachel mit seitlichem Bild – Text links, Bild rechts */
.card--mit-bild { flex-direction: row; align-items: stretch; }
.card--mit-bild .card__body { flex: 1 1 auto; min-width: 0; }
.card__seitenbild { flex: 0 0 38%; max-width: 170px; background: var(--green-100); }
.card__seitenbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 520px) {
  .card--mit-bild { flex-direction: column; }
  .card__seitenbild { flex-basis: auto; max-width: none; aspect-ratio: 16/9; order: -1; }
}

/* Info-Boxen */
.infobox { background: var(--green-050); border: 1px solid var(--green-100); border-radius: var(--radius); padding: 22px 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Öffnungszeiten-Tabelle */
.opening { width: 100%; border-collapse: collapse; }
.opening th, .opening td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--line); }
.opening th { font-weight: 600; color: var(--ink); width: 40%; }

/* ============================================================
   BREADCRUMB / PAGE HEADER
   ============================================================ */
.page-hero { background: var(--green-050); border-bottom: 1px solid var(--green-100); padding: 32px 0; }
.breadcrumb { font-size: .86rem; color: var(--muted); margin-bottom: 8px; }
.breadcrumb a { color: var(--brand); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__current { color: var(--ink-soft); }
.page-hero h1 { font-family: var(--font-serif); font-weight: 400; }
.page-hero__sub { margin: 6px 0 0; color: var(--ink-soft); font-size: 1.05rem; }

/* Inhaltsbreite (Paket 202, angepasst in 204)
   Die Zahl hat sich zweimal bewegt, und beide Male aus einem Grund:

     bis 201   74ch      ~600 px   klassisches Lesemass, aber die Formulare
                                   erbten es und wurden dadurch zu eng
     202       100%      ~1140 px  volle Containerbreite; die Formulare
                                   passten, der Fliesstext lief auf 157
                                   Zeichen je Zeile
     204       800px               der Mittelweg, ausdruecklich gewuenscht

   800 px sind rund 100 Zeichen je Zeile. Das liegt ueber der Empfehlung von
   60-80, aber unter der Obergrenze von WCAG 1.4.8 (80 Zeichen als Richtwert
   fuer Textbloecke) nur knapp - und deutlich unter den 157 aus Paket 202.
   Fuer die Formulare bleiben knapp 750 px nutzbare Breite, genug fuer zwei
   Felder nebeneinander.

   Der Block bleibt LINKSBUENDIG, nicht zentriert: Er soll an derselben
   senkrechten Kante beginnen wie Menue, Ueberschrift und Brotkrume. Ein
   zentrierter Textblock stuende gegen alles andere auf der Seite versetzt. */
.prose { max-width: 800px; }
/* Rueckfahrkarte fuer einzelne Textbloecke, in denen die Lesbarkeit wichtiger
   ist als die Flaeche – etwa lange Rechtstexte. */
.prose .schmal, .schmal { max-width: 74ch; }
/* Und die Gegenrichtung: ein einzelner Block, der die volle Breite braucht –
   eine breite Tabelle etwa oder eine Kachelreihe. */
.prose .breit, .breit { max-width: 100%; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose a { font-weight: 500; }

/* ============================================================
   WOHNUNGEN – Suche & Karten
   ============================================================ */
.woh-search {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); margin-bottom: 28px;
}
.woh-search__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; align-items: end; }
.woh-search .actions { display: flex; gap: 10px; grid-column: 1/-1; flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-weight: 600; font-size: .88rem; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; padding: 11px 12px; border-radius: 9px;
  /* Eigene Rahmenfarbe statt --line (Paket 182). Die Umrandung eines
     Bedienelements braucht 3:1 gegen ihre Umgebung (WCAG 1.4.11); --line
     erreichte 1,43:1 in der hellen und 1,28:1 in der dunklen Fassung. Der
     Rahmen ist hier das einzige, was das Feld begrenzt.
     #767676 misst 4,5:1 gegen die weisse Feldflaeche, 3,9:1 gegen den hellen
     und 4,1:1 gegen den dunklen Seitenhintergrund - traegt also ueberall. */
  border: 1.5px solid #767676;
  /* Die Feldflaeche ist in beiden Fassungen fest weiss. Die Schriftfarbe kam
     bisher aus dem Thema - in der dunklen Fassung stand die Eingabe damit in
     #eaf3ef auf Weiss, gemessene 1,13:1: Man sah nicht, was man tippte.
     Feste Flaeche verlangt feste Schrift. (Paket 182) */
  background: #fff; color: #111111; caret-color: #111111; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: #6a6a6a; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-600); }
.field .hint { font-size: .78rem; color: var(--muted); }
.checkline { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0; line-height: 1.55; }
.checkline input { width: auto; flex: none; margin-top: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   FORMULARE – Abschnitte, Pflichtfelder, Inline-Prüfung   (Paket 183)
   ═══════════════════════════════════════════════════════════════════════ */

/* Ein Abschnitt je Themenblock. <fieldset> statt <div>, damit die
   Überschrift als <legend> zum Block gehört und Screenreader sie beim
   Betreten jedes Feldes mitlesen. Der Rahmen des fieldset ist entfernt –
   er würde die Seite unruhig machen, die Gruppierung bleibt trotzdem. */
.form-abschnitt { border: none; padding: 0; margin: 0 0 30px; }
.form-abschnitt > legend {
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  padding: 0 0 6px; margin: 0 0 14px; width: 100%;
  border-bottom: 2px solid var(--green-100);
}
.form-abschnitt .row { margin-bottom: 16px; }
.form-abschnitt .row:last-child, .form-abschnitt > .field:last-child { margin-bottom: 0; }

/* Pflichtkennzeichnung. Das Sternchen ist reine Optik und deshalb vor
   Screenreadern verborgen – für sie trägt das required-Attribut die
   Information, und zwar zuverlässiger: ein „*" wird je nach Programm als
   „Stern", „mal" oder gar nicht vorgelesen. */
.pflicht { color: var(--fehler); font-weight: 700; }
.form-legende { font-size: .82rem; color: var(--muted); margin: 0 0 22px; }
.optional { font-weight: 400; color: var(--muted); }

/* Fehlerzustand eines einzelnen Feldes */
/* Auswahlgruppe (Strom/Gas). Die Optionen liegen in einem fieldset, damit
   die Frage zur Gruppe gehört; das <legend> wird beim Betreten jeder Option
   mitgelesen. Der Rahmen des fieldset ist entfernt. */
.form-gruppe { border: none; padding: 0; margin: 0 0 20px; }   /* 16 -> 20: gleicher Rhythmus wie .field/.row seit Paket 203 */
.form-gruppe > legend { font-weight: 600; font-size: .88rem; color: var(--ink-soft); padding: 0; margin-bottom: 8px; }
.form-gruppe__optionen { display: flex; gap: 10px; flex-wrap: wrap; }
/* Die ganze Fläche ist anklickbar, nicht nur der kleine Kreis – ein
   Ziel von 44 px Kantenlänge ist auf dem Telefon der Unterschied zwischen
   „geht" und „geht meistens". */
.form-gruppe__option {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 14px; min-height: 44px;
  border: 1.5px solid #767676; border-radius: 9px;
  background: #fff; color: #111111; font-weight: 500; cursor: pointer;
}
.form-gruppe__option:hover { border-color: var(--brand); }
.form-gruppe__option:has(input:checked) { border-color: var(--brand); border-width: 2px; padding: 10.5px 17.5px 10.5px 13.5px; }
.form-gruppe__option input { width: auto; margin: 0; flex: none; accent-color: var(--brand); }
.form-gruppe.hat-fehler .form-gruppe__option { border-color: #c62828; }
/* Der Fokusrahmen des Auswahlknopfes liegt INNERHALB der Kachel, und die
   ist in beiden Fassungen fest weiss. Die Markenfarbe der dunklen Fassung
   (helles Gruen) misst darauf 1,77:1 – deshalb hier eine feste, dunkle
   Farbe: 6,75:1 auf Weiss, in beiden Fassungen gleich. (Paket 183) */
.form-gruppe__option :focus-visible { outline-color: #0a5ca8; }

.field.hat-fehler input,
.field.hat-fehler select,
.field.hat-fehler textarea { border-color: #c62828; }
.feld-fehler {
  display: none; font-size: .8rem; font-weight: 600; color: var(--fehler);
  line-height: 1.4;
}
.field.hat-fehler .feld-fehler,
.checkline.hat-fehler .feld-fehler { display: block; }
.checkline.hat-fehler { color: var(--fehler); }

/* Meldungsflächen. Beide tragen eine feste Fläche und deshalb auch feste
   Schriftfarben – sonst stünde in der dunklen Fassung helle Schrift auf
   hellem Grund (die Lehre aus Paket 182). Statt jede Zeile einzeln zu
   färben, wird das Farbwerk für den Innenraum neu belegt. */
/* Doppelte Klasse mit Absicht: Die dunkle Fassung setzt `.infobox` neu
   (Fläche = var(--green-700)). Bei gleicher Spezifität gewinnt die später
   geladene Datei – die Meldung stünde dann in dunkelroter Schrift auf
   dunklem Grund, gemessen 1,08:1. Mit `.infobox.infobox--fehler` (0,2,0)
   schlägt diese Regel `.infobox` (0,1,0) unabhängig von der Ladereihenfolge. */
.infobox.infobox--ok,
.infobox.infobox--fehler { --ink-soft: inherit; --muted: inherit; }
.infobox.infobox--ok {
  background: #e8f5e9; border: 1px solid #a5d6a7; color: #14401f;
}
.infobox.infobox--fehler {
  background: #fdecea; border: 1px solid #c62828; color: #5c1a15;
}
.infobox.infobox--ok a, .infobox.infobox--fehler a { color: #0a5ca8; }

/* Sammelmeldung über dem Formular: bekommt beim Absenden den Fokus, damit
   ein Screenreader sie vorliest und die Tastatur an der richtigen Stelle
   steht. Der Rahmen des Fokus soll dabei nicht stören. */
.form-sammelfehler:focus { outline: none; }
.form-sammelfehler:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Knopfzeile: nebeneinander, auf schmalen Geräten untereinander. Der
   Zurücksetzen-Knopf steht bewusst rechts und zurückhaltend – er verwirft
   Eingaben und soll nicht versehentlich getroffen werden. */
.form-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.form-knoepfe .btn--primary { flex: 1 1 240px; }
@media (max-width: 560px) { .form-knoepfe .btn { flex: 1 1 100%; } }

.woh-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 22px; }
.woh-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column; transition: transform .12s, box-shadow .12s; }
.woh-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.woh-card__media { aspect-ratio: 4/3; background: var(--green-100); position: relative; }
.woh-card__media img { width:100%; height:100%; object-fit:cover; }
.woh-card__badge {
  position:absolute; top:12px; left:12px; padding:4px 11px; border-radius:20px;
  font-size:.78rem; font-weight:700; color:#fff;
}
.badge--frei { background: var(--green-700); }
.badge--reserviert { background: var(--accent-dark); }
.badge--vermietet { background: var(--muted); }
.woh-card__body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.woh-card__body h3 { font-size:1.1rem; margin:0; }
.woh-card__addr { color: var(--muted); font-size:.88rem; margin:0; }
.woh-facts { display:flex; gap:14px; flex-wrap:wrap; font-size:.9rem; color: var(--ink-soft); }
.woh-facts strong { color: var(--ink); }
.woh-price { font-size:1.25rem; font-weight:700; color: var(--green-800); }
.woh-price small { font-weight:500; font-size:.8rem; color: var(--muted); }
.woh-tags { display:flex; gap:6px; flex-wrap:wrap; }
.woh-tag { background: var(--green-050); color: var(--green-800); border:1px solid var(--green-100); padding:3px 9px; border-radius:20px; font-size:.76rem; font-weight:600; }
.woh-card__body .btn { margin-top:auto; }

.result-count { margin: 0 0 16px; color: var(--ink-soft); font-weight:600; }
.empty-state { text-align:center; padding:48px 20px; background:var(--bg-soft); border-radius:var(--radius); border:1px dashed var(--line); }

/* Wohnungsdetail */
.woh-detail__grid { display:grid; grid-template-columns: 1.4fr .9fr; gap: 32px; align-items:start; }
@media (max-width: 900px){ .woh-detail__grid { grid-template-columns:1fr; } }
.gallery { display:grid; gap:10px; }
.gallery__main { aspect-ratio:16/10; background:var(--green-100); border-radius:var(--radius); overflow:hidden; }
.gallery__main img { width:100%; height:100%; object-fit:cover; }
.gallery__thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.gallery__thumbs img { width:88px; height:66px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.factbox { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; position:sticky; top:96px; }
.factbox dl { display:grid; grid-template-columns: auto 1fr; gap:8px 16px; margin:0 0 16px; }
.factbox dt { color: var(--muted); font-size:.9rem; }
.factbox dd { margin:0; font-weight:600; text-align:right; }

/* ============================================================
   FORMULARE / STATUS
   ============================================================ */
/* Zum vierten Mal dieselbe Falle (182, 190, 216, 229): eine fest
   verdrahtete Flaeche unter Schrift, die aus dem Thema kommt. `#fff` blieb
   auch im dunklen Design weiss, waehrend die Beschriftungen dort hell
   werden – gemessen 1,92:1, also praktisch unlesbar. Betroffen war jedes
   Formular in einer `.form-card`: SEPA, Widerruf und das Papierlos-Formular.
   Mit `var(--bg)` bleibt hell unveraendert (dort ist `--bg` ebenfalls weiss)
   und dunkel wird 9,36:1. */
.form-card { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .form-row { grid-template-columns:1fr; } }
.form-status { margin-top:14px; padding:0; font-weight:600; }
.form-status--ok { background:var(--ok-bg); color:var(--ok-fg); padding:12px 14px; border-radius:9px; }
.form-status--err { background:var(--err-bg); color:var(--err-fg); padding:12px 14px; border-radius:9px; }
.req { color: var(--err-fg); }

/* ============================================================
   FAQ-Akkordeon
   ============================================================ */
.faq-cat { margin-bottom: 30px; }
.faq-cat > h2 { font-family: var(--font-serif); font-weight:400; }
.accordion { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.accordion__item { border-bottom:1px solid var(--line); }
.accordion__item:last-child { border-bottom:none; }
.accordion__trigger {
  /* Durchsichtig statt fest weiss (Paket 182): Die Flaeche kommt so von
     .accordion und folgt damit dem Thema. Fest weiss stand hier die Schrift
     der dunklen Fassung auf Weiss - gemessene 1,13:1. Auf hellem Grund
     aendert sich nichts, .accordion ist dort weiss. */
  width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
  padding:16px 20px; font:inherit; font-weight:600; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.accordion__trigger:hover { background:var(--green-050); }
.accordion__trigger::after { content:"+"; font-size:1.4rem; color:var(--brand); flex:none; }
.accordion__trigger[aria-expanded="true"]::after { content:"–"; }
.accordion__panel { padding: 0 20px 18px; color: var(--ink-soft); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--green-900); color: #d6e2da; margin-top: 60px; }
.footer__grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 32px; padding: 46px 20px; }
@media (max-width:820px){ .footer__grid { grid-template-columns:1fr; gap:26px; } }
.footer__title { color:#fff; font-size:1.05rem; font-weight:700; margin-bottom:12px; }
.footer__content, .footer__content p { color:#c3d3ca; }
/* Knoepfe ausgenommen (Paket 164): Diese beiden Regeln sind spezifischer als
   .btn--primary und faerbten deshalb auch die Beschriftung des Knopfes
   "Kontakt aufnehmen" im Fussbereich hell ein - in der dunklen Fassung weisse
   Schrift auf hellgruener Flaeche, gemessen 1,52:1. */
.footer__content a:not(.btn):not(.mainnav__cta) { color:#e9f2ec; }
.footer__content a:not(.btn):not(.mainnav__cta):hover { color:#fff; }
.footer__content ul { list-style:none; padding:0; margin:0; }
.footer__content li { margin-bottom:8px; }
.footer__legal { background: var(--green-900); border-top:1px solid rgba(255,255,255,.12); }
.footer__legal-inner { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 20px; flex-wrap:wrap; }
.footer__legal-nav { display:flex; gap:18px; flex-wrap:wrap; }
.footer__legal-nav a, .footer__legal-nav .linklike { color:#c3d3ca; text-decoration:none; font-size:.9rem; }
.footer__legal-nav a:hover, .footer__legal-nav .linklike:hover { color:#fff; text-decoration:underline; }
.footer__copy { color:#9fb3a8; font-size:.85rem; margin:0; }

/* ============================================================
   COOKIE-BANNER
   ============================================================ */
.cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 300;
  background: rgba(16,58,36,.55); display:flex; justify-content:center;
  padding: 16px; opacity:0; transition: opacity .2s;
}
.cookie-banner.is-visible { opacity:1; }
.cookie-banner[hidden] { display:none; }
.cookie-banner__inner {
  background:#fff; border-radius:16px; max-width:680px; width:100%;
  padding:24px 26px; box-shadow: var(--shadow-lg); max-height: 90vh; overflow:auto;

  /* Die Flaeche ist in BEIDEN Fassungen fest weiss. Die Schriftfarben kamen
     bisher aus dem Thema - in der dunklen Fassung standen deshalb helle
     Schriften auf Weiss: die Ueberschrift mit gemessenen 1,13:1, die
     Erlaeuterungen mit 3,12:1. Das Banner ist das Erste, was ein Besucher
     sieht, und es war praktisch unlesbar.

     Statt jede Zeile einzeln zu faerben, wird hier das Farbwerk fuer den
     Innenraum des Banners neu gesetzt. Alles darin rechnet damit gegen eine
     helle Flaeche - unabhaengig vom gewaehlten Thema und auch fuer Elemente,
     die spaeter dazukommen. Die Werte entsprechen genau der hellen Fassung,
     die helle Darstellung aendert sich also nicht. (Paket 182) */
  color: #111111;
  --ink:      #111111;
  --ink-soft: #454545;
  --muted:    #6a6a6a;
  --line:     #cccccc;
  --brand:    #0a5ca8;
}
.cookie-banner__title { font-size:1.3rem; margin:0 0 8px; }
.cookie-banner__text { color:var(--ink-soft); font-size:.95rem; }
.cookie-banner__text a { color: var(--brand); font-weight:600; }
.cookie-cats { display:grid; gap:12px; margin:16px 0; }
.cookie-cat { border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0; }
.cookie-cat legend { padding:0; }
.cookie-cat label { display:flex; align-items:center; gap:10px; cursor:pointer; }
.cookie-cat p { margin:6px 0 0 28px; font-size:.86rem; color:var(--muted); }
.cookie-banner__actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.cookie-banner__actions .btn { flex: 1 1 auto; min-width: 150px; }
@media (max-width:560px){ .cookie-banner__actions .btn { flex-basis:100%; } }
body.cookie-open { overflow: hidden; }

/* ============================================================
   Integrations-Hinweiskarten (Tarifrechner / Umzug)
   ============================================================ */
.module-tiles { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:760px){ .module-tiles { grid-template-columns:1fr; } }
.module-tile { position:relative; overflow:hidden; border-radius:var(--radius); padding:30px; color:#fff; box-shadow:var(--shadow); }
.module-tile--tarif { background: linear-gradient(135deg,#14472c,#24734a); }
.module-tile--umzug { background: linear-gradient(135deg,#1c5e3b,#3f8f63); }
.module-tile h3 { color:#fff; font-size:1.4rem; font-family:var(--font-serif); font-weight:400; }
.module-tile p { color:#e4f0e9; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ── Formular-Hilfsklassen (u. a. Widerrufsformular) ── */
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row .field { flex: 1 1 220px; }
.field--plz { flex: 0 1 120px !important; }
/* Feldbreiten, die dem Inhalt entsprechen (Paket 183). Ein Feld, das
   erkennbar zu gross fuer seinen Inhalt ist, laesst den Nutzer raten, ob
   er etwas vergessen hat. */
.field--hausnr  { flex: 0 1 120px !important; }
.field--anrede  { flex: 0 1 150px !important; }
.field--datum   { flex: 0 1 220px !important; }
.field--strasse { flex: 3 1 240px !important; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; line-height: 1.5; cursor: pointer; }
.check input[type="checkbox"] { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--brand); }
.help { color: var(--ink-soft); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.widerruf-empfaenger { background: var(--green-050); border: 1px solid var(--green-100); border-radius: 8px; padding: 12px 16px; font-size: .92rem; color: var(--ink-soft); }
.widerruf-intro { margin: 16px 0 8px; font-weight: 600; }
.widerruf-form-wrap { margin-top: 8px; }

/* ── Downloads / Dokumente (Frontend) ── */
.downloads { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--green-100); }
.downloads h2 { font-size: 1.2rem; margin: 0 0 14px; }
.download-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Nebenbefund aus Paket 216: Hier stand `background: #fff` fest, die Schrift
   kam aber aus dem Thema (`--ink`). In der dunklen Fassung ergab das helle
   Schrift auf Weiss – gemessene 1,13:1, praktisch unlesbar. Dasselbe Muster
   wie in Paket 182 und 190. `--bg` ist in der hellen Fassung ebenfalls
   #ffffff, dort aendert sich also nichts; die dunkle bekommt ihren eigenen
   Grund und damit wieder Kontrast. */
.download-liste a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); background: var(--bg); }
.download-liste a:hover { border-color: var(--green-600); background: var(--green-050); }
.dl-ext { flex: none; min-width: 46px; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--green-700); border-radius: 5px; padding: 5px 7px; }

/* ── Themen-Kacheln auf Übersichtsseiten ── */
.uebersicht-kacheln { margin-top: 28px; }

/* ── Footer-Bildzeichen ── */
.footer__brand .footer__logo { width: 92px; height: auto; display: block; margin-bottom: 10px; }

/* ── Startseiten-Kacheln: Akzent-Presets + Bild-Hintergrund ── */
.module-tile--gruen-dunkel { background: linear-gradient(135deg,#14472c,#24734a); }
.module-tile--gruen { background: linear-gradient(135deg,#1c5e3b,#3f8f63); }
/* Kachel mit seitlichem Bild – Text links, Bild rechts (wie die Service-Kacheln) */
.module-tile--bild { display:flex; gap:26px; align-items:stretch; padding-right:0; }
.module-tile--bild .module-tile__inhalt { flex:1 1 auto; min-width:0; }
.module-tile__bild { flex:0 0 40%; max-width:240px; align-self:stretch; overflow:hidden;
                     border-radius:0 var(--radius) var(--radius) 0; }
.module-tile__bild img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:760px){
  .module-tile--bild { flex-direction:column; padding-right:30px; gap:18px; }
  .module-tile__bild { flex-basis:auto; max-width:none; aspect-ratio:16/9;
                       border-radius:var(--radius); }
}
.module-tile__text { color:#e4f0e9; margin-bottom:18px; }
.module-tile__text p { color:#e4f0e9; margin:0 0 .8em; }
.module-tile__text p:last-child { margin-bottom:0; }

/* ── Hero-Slider ── */
.hero { position: relative; overflow: hidden; }
.hero__bgs { position: absolute; inset: 0; z-index: 0; }
.hero__bg { position: absolute; inset: 0; opacity: 0; transition: opacity var(--hero-fade,.8s) ease; background: linear-gradient(135deg,#14472c,#1c5e3b); background-size: cover; background-position: center; }
.hero__bg.is-active { opacity: 1; }
.hero__bg--image::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(20,67,42, var(--hero-overlay,.85)), rgba(28,94,59, calc(var(--hero-overlay,.85) * .78))); }
.hero__grid { position: relative; z-index: 1; }
.hero__slides { position: relative; }
.hero__slide { opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; right: 0; transition: opacity var(--hero-fade,.8s) ease; }
.hero__slide.is-active { opacity: 1; visibility: visible; position: relative; }
.hero__slide .lead p { color: inherit; margin: 0 0 .6em; }
.hero__slide .lead p:last-child { margin-bottom: 0; }
.hero__btn2 { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.hero__btn2:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.8); }
.hero__dots { display: flex; gap: 9px; margin-top: 24px; }
.hero__dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: transparent; cursor: pointer; padding: 0; transition: background .2s, border-color .2s; }
.hero__dot.is-active { background: #fff; border-color: #fff; }
.hero__dot:hover { border-color: #fff; }


/* ── Übersichtskacheln vollflächig klickbar ────────────────────────────────
   Der Link um den Titel wird über ::after auf die ganze Karte ausgedehnt.
   Vorteil gegenüber einem <a> um die Karte: Die Markup-Struktur bleibt gültig,
   der Fokusrahmen sitzt am Titel, und Text lässt sich weiterhin markieren. */
.card--klickbar { position: relative; cursor: pointer; }
.card--klickbar .card__link {
  color: inherit;
  text-decoration: none;
}
.card--klickbar .card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card--klickbar:hover  { border-color: var(--brand); }
.card--klickbar:hover h3,
.card--klickbar:hover .btn--ghost { color: var(--brand); }

/* Sichtbarer Fokusrahmen um die ganze Karte, nicht nur um den Titel */
.card--klickbar:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.card--klickbar .card__link:focus { outline: none; }

/* Der Öffnen-Knopf ist nur noch Beschriftung – der Klick geht über die Karte */
.card--klickbar .btn--ghost { pointer-events: none; }

/* ── Inhaltsblöcke einer Seite (Paket 192) ──────────────────────────────
   Eine Seite besteht seit Paket 192 aus mehreren Blöcken. Sie brauchen
   Luft dazwischen, sonst laufen zwei Texte optisch zu einem zusammen.
   Die Überschrift folgt dem Maß der Inhaltsspalte (74 Zeichen, siehe
   .prose) – sie gehört zum Text, nicht über die ganze Seitenbreite. */
/* Die Ueberschrift eines Inhaltsblocks (Paket 216).
   Sie ist der einzige Trenner zwischen zwei Bloecken – ohne Absetzung liest
   sich eine Seite aus vier Bloecken wie ein durchlaufender Text mit ein paar
   fetten Zeilen darin.

   Uebernommen wird das Muster, das im Projekt schon steht: die Legende eines
   Formularabschnitts (`.form-abschnitt > legend`, Paket 183) – Hausfarbe plus
   duenne Linie darunter. Kein neues Aussehen erfinden, wo eines vorhanden ist.

   `--brand` traegt in beiden Fassungen: 7,74:1 in der hellen (#1c5e3b auf
   Weiss), 10,17:1 in der dunklen (#3ddc97 auf #0d1917). Fuer eine Ueberschrift
   verlangt WCAG 1.4.3 nur 3:1 – hier ist es auch als Fliesstext ausreichend. */
.block-titel {
  margin: 1.8em 0 .6em;
  color: var(--brand);
  padding-bottom: .25em;
  border-bottom: 2px solid var(--green-100);
}
.block-titel:first-child { margin-top: 0; }
.prose + .block-titel { margin-top: 2em; }
.accordion--block { margin: 1.2em 0; }
/* Ein aufklappbarer Block traegt seine Ueberschrift im Schalter. Damit beide
   Blockarten auf derselben Seite gleich aussehen, bekommt der Text dort
   dieselbe Farbe – aber KEINE Linie: Der Schalter hat bereits einen Rahmen,
   eine zweite Kante darin waere Unruhe ohne Aussage. */
.accordion--block .accordion__trigger { color: var(--brand); }

/* ── Farbiger Kopf, solange der Block zu ist (Paket 217) ────────────────
   Gewuenscht war #ffde71, das Hausgelb – aber „dezent, pastell". Genommen
   ist deshalb derselbe Farbton (46°) mit heruntergezogener Saettigung:
   #fbf1d0. Das Gelb bleibt erkennbar, die Seite wird nicht zum Textmarker.

   NUR im zugeklappten Zustand: So ist die Farbe zugleich die Zustandsangabe
   – farbiger Streifen heisst „hier steckt noch etwas drin". Beim Aufklappen
   geht der Kopf zurueck auf die ruhige Fassung und laesst dem Inhalt den
   Vortritt.

   Die Flaeche ist Schmuck, kein Bedienhinweis: Erkennbar ist der Schalter
   weiterhin an Text, Rahmen und dem +/– Zeichen. Deshalb gilt hier nicht die
   3:1-Regel fuer Bedienelement-Umrandungen (WCAG 1.4.11) – wohl aber die
   Regel fuer den Text darauf, und die ist mit 5,98:1 (Markenblau auf dem
   Pastellgelb) erfuellt.

   Der senkrechte Balken links gibt dem Streifen eine Kante, ohne dass die
   Flaeche kraeftiger werden muss – dasselbe Mittel wie beim SEPA-Kopf und
   beim Stellenhinweis. */
.accordion--block .accordion__trigger[aria-expanded="false"] {
  background: #fbf1d0;
  box-shadow: inset 4px 0 0 #e0b84a;
}
/* Beim Ueberfahren etwas kraeftiger, damit der Schalter antwortet. */
.accordion--block .accordion__trigger[aria-expanded="false"]:hover {
  background: #f8e9bb;
}
/* Zwei Ziehharmonikas hintereinander sollen wie eine Liste wirken und
   nicht wie zwei zufällig benachbarte Kästen. */
.accordion--block + .accordion--block { margin-top: -.4em; }

/* Downloadliste innerhalb eines Inhaltsblocks (Paket 193).
   Sie steht direkt unter dem Text des Blocks und braucht deshalb weniger
   Vorspann als die große Liste am Seitenende – dort trennt eine Überschrift,
   hier reicht Abstand. */
.download-liste--block { margin-top: 1em; }

/* ══════════════════════════════════════════════════════════════════════
   Bilder im Seiteninhalt  (Paket 195)

   Die Redaktion setzt Breite und Ausrichtung im Editor; hier stehen die
   zugehörigen Klassen. Bewusst Klassen und keine style-Attribute: Ein
   fester Pixelwert im Markup ließe sich später nirgends mehr anfassen,
   und auf dem Telefon liefe er über.
   ══════════════════════════════════════════════════════════════════════ */
.prose .bild--w25  { max-width: 25%; }
.prose .bild--w33  { max-width: 33%; }
.prose .bild--w50  { max-width: 50%; }
.prose .bild--w75  { max-width: 75%; }
.prose .bild--w100 { max-width: 100%; }

.prose .bild--links  { float: left;  margin: .2em 1.4em .9em 0; }
.prose .bild--rechts { float: right; margin: .2em 0 .9em 1.4em; }
.prose .bild--mitte  { margin-left: auto; margin-right: auto; }

.prose figure.bild { display: block; }
.prose figure.bild img { width: 100%; max-width: none; }
.prose figcaption {
  font-size: .85rem; color: var(--muted); line-height: 1.45;
  margin-top: .45em;
}
/* Ein umflossenes Bild darf nicht aus seinem Abschnitt herauslaufen und
   den nächsten Block anschieben. */
.prose::after { content: ""; display: table; clear: both; }

/* Auf schmalen Anzeigen ist ein umflossenes Bild bei 25 % Breite eine
   Briefmarke neben zwei Wörtern je Zeile. Dort steht es voll und für sich. */
@media (max-width: 560px) {
  .prose .bild--links,
  .prose .bild--rechts { float: none; margin-left: 0; margin-right: 0; }
  .prose .bild--w25,
  .prose .bild--w33,
  .prose .bild--w50,
  .prose .bild--w75 { max-width: 100%; }
}

/* ── SEPA-Lastschriftmandat (Paket 198) ──────────────────────────────────
   Das Formular ist das erste im Portal, das mit <fieldset> gliedert. Drei
   Abschnitte - Person, Bank, Ermaechtigung - sind ohne diese Gliederung
   eine Kolonne aus 17 Feldern, und Vorleseprogramme kuendigen die Gruppe
   ueber das <legend> an. */
.sepa-form fieldset {
  /* Ohne diese Zeile scrollt die Seite auf dem Handy waagerecht: Ein
     fieldset hat im Browser min-width:min-content und schrumpft NICHT
     unter die Breite seines breitesten Inhalts - anders als jedes andere
     Element. Bei 390 px ragten 15 px heraus. */
  min-width: 0;
  /* Ein fieldset erbt box-sizing nicht immer aus dem globalen Reset; ohne
     diese Zeile addieren sich Rahmen und Innenabstand zur vollen Breite
     und die Seite scrollte um genau 1 px. */
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  /* Unten derselbe Innenabstand wie oben: Seit Paket 203 traegt der
     letzte Block im Abschnitt keinen eigenen Rand mehr, sonst stuende er
     4 px vor der Umrandung. */
  padding: 14px 16px;
  margin: 0 0 18px;
}
.sepa-form legend {
  padding: 0 8px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
}
.sepa-kopf {
  border-left: 3px solid var(--brand);
  padding: 2px 0 2px 14px;
  margin: 0 0 20px;
}
.sepa-kopf p { margin: 0 0 8px; }
.sepa-kopf code { font-size: .9em; word-break: break-all; }
/* Der Ermaechtigungstext ist der rechtlich verbindliche Teil - er soll
   sich vom Beiwerk abheben, ohne wie ein Warnhinweis auszusehen. */
.sepa-text {
  background: var(--flaeche, rgba(127, 127, 127, .07));
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 16px;
}
.sepa-text p { margin: 0 0 10px; font-size: .92rem; line-height: 1.55; }
.sepa-text p:last-child { margin-bottom: 0; }
/* IBAN und BIC bleiben auch bei kleinen Schriftgroessen eindeutig lesbar;
   O und 0 sind hier keine Geschmacksfrage. */
.sepa-form input[name="iban"],
.sepa-form input[name="bic"] {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  letter-spacing: .04em;
}

/* ── Bewerbungsformular (Paket 199) ──────────────────────────────────────
   Erbt die fieldset-Regeln des SEPA-Formulars; hier nur, was dazukommt. */
.bewerbung-form fieldset {
  min-width: 0; box-sizing: border-box; max-width: 100%;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin: 0 0 18px;
}
.bewerbung-form legend { padding: 0 8px; font-weight: 700; font-size: .95rem; }
.bewerbung-titel { margin: 0 0 6px; }
.bewerbung-stelle { margin: 0 0 20px; border-left: 3px solid var(--brand); padding: 2px 0 2px 14px; }
.bewerbung-hinweis { margin: 12px 0; }
.bewerbung-form textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; font: inherit; resize: vertical;
}
/* Dateifelder ohne eigene Gestaltung sehen je nach Browser sehr
   unterschiedlich aus; der Rahmen bindet sie an die uebrigen Felder an. */
.bewerbung-form input[type="file"] {
  width: 100%; box-sizing: border-box; padding: 8px;
  border: 1px dashed var(--line); border-radius: 8px; background: transparent;
  font-size: .9rem;
}
.bewerbung-groesse { margin-top: 10px; font-size: .88rem; color: var(--muted); min-height: 1.2em; }
.bewerbung-groesse--fehler { color: var(--err, #b00020); font-weight: 600; }

/* ── Rückmeldung der IBAN-Prüfziffer (Paket 200) ─────────────────────────
   Der Zustand steht IMMER im Text, nicht nur in der Farbe – Farbe allein
   waere nach WCAG 1.4.1 kein zulaessiges Mittel, und bei einer Rot-Gruen-
   Schwaeche schlicht wirkungslos. Das Zeichen davor ist ein zweiter,
   nichtfarblicher Traeger derselben Aussage. */
.iban-stand {
  display: block; margin-top: 6px; font-size: .84rem; font-weight: 600;
  line-height: 1.45;
}
.iban-stand::before { margin-right: .45em; font-weight: 700; }
.iban-stand--unvollstaendig { color: var(--muted); font-weight: 500; }
.iban-stand--unvollstaendig::before { content: "…"; }
.iban-stand--fehler { color: var(--fehler, #c62828); }
.iban-stand--fehler::before { content: "✕"; }
/* Gruen aus dem Hausfarbwerk, nicht das Systemgruen: Es muss in beiden
   Designs auf der jeweiligen Flaeche 4,5:1 erreichen. */
.iban-stand--ok { color: var(--ok, #1b7a3d); }
.iban-stand--ok::before { content: "✓"; }

/* Ein geprueftes Feld bekommt zusaetzlich einen ruhigen Rahmen. Bewusst
   dezent: Das Feld ist richtig ausgefuellt, das ist der Normalfall und
   kein Anlass zum Feiern. */
.sepa-form input[data-pruefung="iban"] { transition: border-color .15s; }

/* ── Bewerbungsformular: aufklappbar (Paket 201) ─────────────────────────
   Der Kopf ist der Schalter. Er muss aussehen wie einer - eine Ueberschrift
   allein laedt niemanden zum Klicken ein. */
details.bewerbung-wrap { padding: 0; }
.bewerbung-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 20px 24px; cursor: pointer;
  border-radius: var(--radius);
  list-style: none;                 /* Standarddreieck weg, wir zeichnen selbst */
}
.bewerbung-kopf::-webkit-details-marker { display: none; }
.bewerbung-kopf:hover { background: var(--flaeche, rgba(127,127,127,.05)); }
/* Der Fokusrahmen gehoert an den ganzen Kopf, nicht an ein Wort darin -
   sonst weiss niemand mit Tastatur, was gerade ausgeloest wuerde. */
.bewerbung-kopf:focus-visible {
  outline: 3px solid var(--brand); outline-offset: -3px;
}
.bewerbung-kopf__text { flex: 1 1 20rem; }
.bewerbung-wrap .bewerbung-titel {
  display: block; font-size: 1.3rem; font-weight: 700; margin: 0 0 8px;
}
.bewerbung-wrap .bewerbung-stelle {
  display: block; margin: 0; border-left: 3px solid var(--brand);
  padding: 2px 0 2px 14px; font-size: .95rem;
}

/* Der Schalter traegt beide Beschriftungen; sichtbar ist die zum Zustand. */
.bewerbung-schalter {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--brand); border-radius: 999px;
  color: var(--brand); font-weight: 600; font-size: .92rem; white-space: nowrap;
}
.bewerbung-schalter::after {
  content: "▾"; transition: transform .15s;
}
details[open] .bewerbung-schalter::after { transform: rotate(180deg); }
.bewerbung-schalter__auf { display: none; }
details[open] .bewerbung-schalter__zu  { display: none; }
details[open] .bewerbung-schalter__auf { display: inline; }
.bewerbung-kopf:hover .bewerbung-schalter { background: var(--brand); color: #fff; }

.bewerbung-inhalt { padding: 4px 24px 24px; }
details[open] .bewerbung-kopf { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }

@media (max-width: 560px) {
  .bewerbung-kopf { padding: 16px; }
  .bewerbung-inhalt { padding: 4px 16px 18px; }
  .bewerbung-schalter { width: 100%; justify-content: center; }
}

/* ── Feldbreiten nach erwarteter Eingabe (Paket 202) ─────────────────────
   Mit der vollen Inhaltsbreite werden auch die Eingabefelder breit – ein
   Feld fuer 22 Zeichen IBAN war zuletzt gut 1000 px lang. Die Laenge eines
   Feldes ist aber eine Aussage darueber, was hineingehoert: Wer ein
   handbreites Feld fuer die Postleitzahl sieht, stutzt zu Recht.

   Betroffen sind nur Felder mit BEKANNTER Laenge. Name, Strasse, Ort oder
   E-Mail behalten die volle Breite, denn dort ist jede Grenze geraten. */
.sepa-form input[name="iban"]      { max-width: 26rem; }
.sepa-form input[name="bic"]       { max-width: 12rem; }
.bewerbung-form input[name="plz"],
.sepa-form  input[name="plz"]      { max-width: 8rem; }
.bewerbung-form input[name="telefon"],
.sepa-form  input[name="telefon"]  { max-width: 18rem; }
.bewerbung-form input[name="geburtsdatum"],
.bewerbung-form input[name="erfahrung_jahre"] { max-width: 12rem; }
.bewerbung-form input[name="gehalt_jahr"],
.bewerbung-form input[name="gehalt_monat"]    { max-width: 16rem; }
/* Auf schmalen Geraeten hebt die volle Breite diese Grenzen wieder auf –
   dort ist der Platz ohnehin knapp und jede Verengung nur hinderlich. */
@media (max-width: 620px) {
  .sepa-form input, .bewerbung-form input { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FORMULARE – Abstand zwischen Beschriftung und Feld        (Paket 203)
   ═══════════════════════════════════════════════════════════════════════

   Gemessen im Bestand: zwischen dem Eingabefeld einer Zeile und der
   Beschriftung der naechsten lagen 0 px, zwischen dieser Beschriftung und
   ihrem EIGENEN Feld 5 px. Jede Beschriftung stand damit naeher am fremden
   Feld darueber als am eigenen darunter. Das Auge gruppiert nach Naehe und
   ordnete sie folglich falsch zu.

   Betroffen waren 22 der 30 Beschriftungen im Bewerbungsformular, alle im
   Kontaktformular sowie je zwei in Kuendigung und Widerruf. Ueberall dort,
   wo eine `.row` auf die naechste folgte, war der Abstand exakt null - die
   Felder stiessen aneinander und nur der Zeilendurchschuss der Schrift
   liess noch ein paar Pixel Luft.

   Die beiden Abstaende muessen sich deutlich unterscheiden, nicht nur ein
   wenig: 20 gegen 5. Bei 12 gegen 5 bliebe die Zuordnung eine Frage des
   genauen Hinsehens.

   Warum die Regeln an den Behaeltern haengen und nicht an `.field` allein:
   Im Tarifrechner ist `field` eine Klasse auf dem <input> selbst
   (`<select class="field">`). Eine Regel `.field { margin-bottom }` wuerde
   dort jede einzelne Eingabe auseinanderziehen. `.form-card` und
   `.form-abschnitt` kommen ausschliesslich in den vier Portalformularen
   vor - Umzug und Tarifrechner bleiben unberuehrt. */

.form-card .field,
.form-abschnitt .field,
.form-card .row,
.form-card .form-row,
.form-abschnitt .row { margin-bottom: 20px; }

/* Innerhalb einer Zeile trennt der Abstand der Zeile selbst; ein zweiter
   Rand darunter wuerde sich dazuaddieren. Beim Umbruch auf schmalen
   Geraeten uebernimmt der Zeilenabstand des Behaelters dieselbe Aufgabe -
   deshalb wird er von 16 auf 20 px angehoben, damit auch untereinander
   stehende Felder denselben Rhythmus haben. */
.form-card .row > .field,
.form-card .form-row > .field,
.form-abschnitt .row > .field { margin-bottom: 0; }
.form-card .row,
.form-card .form-row,
.form-abschnitt .row { row-gap: 20px; }

/* Ein Hinweistext erklaert das, was UEBER ihm steht. Also dicht an das
   Feld davor heran und mit vollem Abstand zum naechsten - sonst gehoert
   er optisch zur falschen Frage. */
.form-card .field:has(+ .help),
.form-card .row:has(+ .help),
.form-abschnitt .field:has(+ .help),
.form-abschnitt .row:has(+ .help) { margin-bottom: 6px; }
.form-card fieldset > .help,
.form-card form > .help { margin: 0 0 20px; }

/* Beim Ankreuzfeld steht die Beschriftung DANEBEN, nicht darueber. Dort
   gibt es nichts zu verwechseln, und 20 px zwischen vier Haken reissen
   die Gruppe auseinander, die zusammengehoert. */
.form-card .field:has(> .check) { margin-bottom: 12px; }
/* `.checkline` bringt ihren eigenen Abstand von 22 px bereits mit. */
.form-card .field:has(> .checkline) { margin-bottom: 0; }

/* Der letzte Block eines Abschnitts traegt keinen eigenen Rand - den
   Abstand zur Umrandung macht der Innenabstand des Abschnitts. */
.form-card fieldset > :last-child,
.form-card form > :last-child,
.form-abschnitt > :last-child { margin-bottom: 0; }