@charset "utf-8";

/* ==========================================================================
   Haus & Grund Bad Mergentheim
   Farben nach dem Corporate-Design-Handbuch von Haus & Grund Deutschland.
   Hausfarbe HKS 47, Beratungsbereiche HKS 43 / 60 / 6 / 15.
   ========================================================================== */

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Das Farbschema ist hell entworfen. Die Angabe verhindert, dass Browser
     die Seite automatisch invertieren und dabei Markenfarben zerstören. */
  color-scheme: light;

  /* Marke */
  --hg-blau:      #009DE0;   /* Hausfarbe, HKS 47 */
  --hg-blau-dkl:  #0086C1;
  --recht:        #00509D;   /* HKS 43 */
  --finanzen:     #219C2D;   /* HKS 60 */
  --bauen:        #F49E00;   /* HKS 6  */
  --technik:      #DB0031;   /* HKS 15 */

  /* Flaechen und Schrift */
  --tinte:        #10243A;
  --tinte-weich:  #4A5C6E;
  --papier:       #FFFFFF;
  --papier-kuehl: #F2F6FA;
  --papier-tief:  #E4EDF5;
  --linie:        #D3DFEA;
  --dunkel:       #0B2E52;

  /* Aktueller Bereich, wird per data-bereich umgesetzt */
  --akzent:       var(--hg-blau);
  --akzent-tief:  #E5F5FC;

  /* Typografie: Basis 18px, damit die Seite auch fuer aeltere Leser gut liegt */
  --schrift: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-xs:  0.8125rem;
  --t-s:   0.9375rem;
  --t-m:   1.0625rem;
  --t-l:   clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  --t-xl:  clamp(1.375rem, 1.1vw + 1.05rem, 1.75rem);
  --t-2xl: clamp(1.6875rem, 1.9vw + 1.15rem, 2.375rem);
  --t-3xl: clamp(2rem, 3.2vw + 1.15rem, 3.25rem);

  /* Raster */
  --wrap: 74rem;
  --gasse: clamp(1.25rem, 4vw, 2.5rem);
  --luft-s: 1.5rem;
  --luft-m: clamp(2.5rem, 5vw, 4rem);
  --luft-l: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 3px;
}


body[data-bereich="recht"]    { --akzent: var(--recht);    --akzent-tief: #E6EDF5; }
body[data-bereich="finanzen"] { --akzent: var(--finanzen); --akzent-tief: #E8F5E9; }
body[data-bereich="bauen"]    { --akzent: #8A5A00;         --akzent-tief: #FDF2DF; }
body[data-bereich="technik"]  { --akzent: var(--technik);  --akzent-tief: #FCE8EC; }

/* ==========================================================================
   Grundlagen
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Grundlage fuer die Schriftskalierung der Bedienleiste. Alle Groessen
     rechnen in rem, deshalb wirkt eine Aenderung hier auf die ganze Seite. */
  font-size: calc(100% * var(--bf-schrift, 1));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-l); font-weight: 600; }

p, ul, ol, dl, address, figure, table { margin: 0 0 1.1em; }
p { max-width: 68ch; }
address { font-style: normal; }
strong, b { font-weight: 700; }

a { color: var(--recht); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--hg-blau-dkl); }

:focus-visible {
  outline: 3px solid var(--hg-blau);
  outline-offset: 2px;
  border-radius: 2px;
}

img, picture, svg { max-width: 100%; }
/* Die Beitragsmotive sind Vektorgrafiken im Seitenverhaeltnis 3:2 */
.bild-vektor { width: 100%; height: auto; display: block; }
.beitrag-bild .bild-vektor { aspect-ratio: 3 / 2; object-fit: cover; }
img { height: auto; display: block; }
picture { display: block; }

hr { border: 0; border-top: 1px solid var(--linie); margin: var(--luft-m) 0; }

.wrap {
  width: min(100% - 2 * var(--gasse), var(--wrap));
  margin-inline: auto;
}
.wrap--schmal { width: min(100% - 2 * var(--gasse), 46rem); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--recht); color: #fff; padding: .8rem 1.2rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }

.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Kopf
   ========================================================================== */

.kopf { position: relative; z-index: 50; background: var(--papier); }

.kopf-service {
  background: var(--dunkel);
  color: #C3D6E8;
  font-size: var(--t-s);
}
.kopf-service .wrap {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  justify-content: space-between; align-items: center;
  min-height: 2.5rem; padding-block: .35rem;
}
.kopf-service p { margin: 0; }
.kopf-kontakt { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.kopf-service a { color: #fff; text-decoration: none; font-weight: 600; }
.kopf-service a:hover { color: var(--hg-blau); text-decoration: underline; }
@media (max-width: 40rem) { .kopf-adresse { display: none; } }

.kopf-haupt .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.1rem;
}

/* Der Ortszusatz steht unter der Wortmarke, linksbündig zum Schriftzug.
   So schreibt es das Corporate-Design-Handbuch für Ortsvereine vor. */
/* Der Schriftzug beginnt im Logo bei 31 Prozent der Bildbreite. Der Ortszusatz
   startet bündig darunter, so wie im Corporate Design.
   Der Einzug wird aus der Logobreite berechnet, nicht in Prozent angegeben:
   prozentuale Innenabstände beziehen sich in CSS auf das Elternelement, nicht
   auf das Element selbst, und säßen sonst versetzt. */
.marke {
  --marke-breite: clamp(11rem, 22vw, 15.5rem);
  display: block;
  text-decoration: none;
  flex-shrink: 0;
}
.marke picture { display: block; }
.marke img { width: var(--marke-breite); height: auto; }
.marke-ort {
  display: block;
  width: var(--marke-breite);
  padding-left: calc(var(--marke-breite) * 0.31);
  margin-top: .1rem;
  font-weight: 700;
  font-size: clamp(.8125rem, 1.15vw, .9375rem);
  color: var(--tinte);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
@media (max-width: 34rem) {
  .marke-ort { font-size: .8125rem; }
}

/* Ab hier wird es eng: iPhone SE und ältere Android-Geräte mit 320 px.
   Ohne diese Regel schiebt die Kombination aus Wortmarke und Menüknopf
   die Seite um wenige Pixel seitwärts. */
@media (max-width: 22.5rem) {
  :root { --gasse: 0.9rem; }
  .marke { --marke-breite: 9.5rem; }
  .marke-ort { font-size: .875rem; }
  .nav-schalter { padding: .55rem .7rem; }
  .nav-schalter-text { font-size: var(--t-s); }
  .kopf-service .wrap { font-size: var(--t-xs); }
}

/* Navigation */
.nav-schalter {
  display: none; align-items: center; gap: .6rem;
  background: var(--papier-kuehl); border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--tinte); font: inherit; font-weight: 600; font-size: var(--t-m);
  padding: .6rem .95rem; cursor: pointer;
}
.nav-schalter-balken {
  width: 1.25rem; height: 2px; background: currentColor; position: relative; display: block;
}
.nav-schalter-balken::before, .nav-schalter-balken::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
}
.nav-schalter-balken::before { top: -6px; }
.nav-schalter-balken::after  { top: 6px; }
.nav-schalter[aria-expanded="true"] .nav-schalter-balken { background: transparent; }
.nav-schalter[aria-expanded="true"] .nav-schalter-balken::before { top: 0; transform: rotate(45deg); }
.nav-schalter[aria-expanded="true"] .nav-schalter-balken::after  { top: 0; transform: rotate(-45deg); }

.nav-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.6rem);
}
.nav-liste > li { position: relative; }
.nav-liste > li > a {
  display: block; padding: .55rem .25rem;
  color: var(--tinte); text-decoration: none;
  font-weight: 600; font-size: var(--t-m);
  border-bottom: 3px solid transparent;
}
.nav-liste > li > a:hover { color: var(--recht); border-bottom-color: var(--linie); }
.nav-liste > li.ist-aktiv > a { border-bottom-color: var(--akzent); color: var(--recht); }

.nav-unter {
  list-style: none; margin: 0; padding: .4rem 0;
  position: absolute; top: 100%; left: -1rem; min-width: 15rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--recht);
  box-shadow: 0 12px 28px -12px rgba(16, 36, 58, .35);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.nav-liste > li:hover > .nav-unter,
.nav-liste > li:focus-within > .nav-unter { opacity: 1; visibility: visible; transform: none; }
.nav-unter a {
  display: block; padding: .55rem 1.1rem;
  color: var(--tinte); text-decoration: none; font-size: var(--t-m);
}
.nav-unter a:hover, .nav-unter a:focus { background: var(--papier-kuehl); color: var(--recht); }

/* Bereichsfarben in der Untermenue-Navigation: die Farbe ist die Information */
.nav-unter--bereiche a { border-left: 4px solid transparent; padding-left: .95rem; }
.nav-unter--bereiche a[data-farbe="recht"]    { border-left-color: var(--recht); }
.nav-unter--bereiche a[data-farbe="finanzen"] { border-left-color: var(--finanzen); }
.nav-unter--bereiche a[data-farbe="bauen"]    { border-left-color: var(--bauen); }
.nav-unter--bereiche a[data-farbe="technik"]  { border-left-color: var(--technik); }

.nav-cta { margin-left: .5rem; }

/* Der Aufruf im Menü ist ein Knopf, keine Navigationsebene.
   Ohne diese Regel gewinnt .nav-liste > li > a (Spezifität 0,1,2)
   gegen .knopf (0,1,0) und färbt die Beschriftung dunkel. */
.nav-liste > li > a.knopf {
  color: #fff; border-bottom: 0; padding: .6rem 1.1rem;
}
.nav-liste > li > a.knopf:hover,
.nav-liste > li > a.knopf:focus-visible {
  color: #fff; border-bottom: 0; background: var(--dunkel); border-color: var(--dunkel);
}

/* Das Vierfarbband: Signatur der Marke, sitzt unter dem Kopf */
.bereichsband { display: flex; height: 5px; }
.bereichsband span { flex: 1; }
.bereichsband-recht    { background: var(--recht); }
.bereichsband-finanzen { background: var(--finanzen); }
.bereichsband-bauen    { background: var(--bauen); }
.bereichsband-technik  { background: var(--technik); }

@media (max-width: 62rem) {
  .nav-schalter { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papier); border-bottom: 1px solid var(--linie);
    box-shadow: 0 18px 30px -18px rgba(16, 36, 58, .4);
    display: none;
  }
  .nav.ist-offen { display: block; }
  .nav-liste {
    flex-direction: column; align-items: stretch; gap: 0;
    width: min(100% - 2 * var(--gasse), var(--wrap)); margin-inline: auto;
    padding-block: .5rem 1.5rem;
  }
  .nav-liste > li { border-bottom: 1px solid var(--papier-tief); }
  .nav-liste > li > a { padding: .95rem .25rem; border-bottom: 0; border-left: 4px solid transparent; padding-left: .75rem; }
  .nav-liste > li > a.knopf { border-left: 0; padding: .85rem 1.6rem; }
  .nav-liste > li.ist-aktiv > a { border-left-color: var(--akzent); background: var(--papier-kuehl); }
  .nav-unter {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 .6rem .75rem; min-width: 0;
  }
  .nav-unter a { padding: .6rem .75rem; }
  .nav-cta { border-bottom: 0 !important; padding-top: 1rem; }
  .nav-cta .knopf { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Knoepfe
   ========================================================================== */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem;
  background: var(--recht); color: #fff;
  font: inherit; font-weight: 700; font-size: var(--t-m); line-height: 1.2;
  text-decoration: none; border: 2px solid var(--recht); border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.knopf:hover { background: var(--dunkel); border-color: var(--dunkel); color: #fff; }
.knopf--klein { padding: .6rem 1.1rem; font-size: var(--t-s); }
.knopf--gross { padding: 1rem 2rem; font-size: var(--t-l); }
.knopf--offen { background: transparent; color: var(--recht); }
.knopf--offen:hover { background: var(--recht); color: #fff; }
.knopf--hell { background: #fff; color: var(--dunkel); border-color: #fff; }
.knopf--hell:hover { background: var(--hg-blau); border-color: var(--hg-blau); color: #fff; }
.knopf--rand-hell { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.knopf--rand-hell:hover { background: #fff; color: var(--dunkel); border-color: #fff; }

/* ==========================================================================
   Startseite: Hero und Bereichseinstiege
   ========================================================================== */

.hero { position: relative; background: var(--dunkel); color: #fff; overflow: hidden; }
.hero-bild { position: absolute; inset: 0; }
.hero-bild picture, .hero-bild img { width: 100%; height: 100%; object-fit: cover; }
.hero-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(11,46,82,.94) 0%, rgba(11,46,82,.86) 42%, rgba(11,46,82,.35) 100%);
}
.hero-text {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem);
  max-width: 40rem;
}
.hero-vorspann {
  font-size: var(--t-m); font-weight: 600; color: var(--hg-blau);
  margin: 0 0 .9rem;
}
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero-lead { font-size: var(--t-l); color: #DCE8F2; max-width: 34rem; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* Die vier Bereiche liegen halb im Hero. Farbkante oben statt Karten-Schatten. */
.bereichsraster {
  display: grid; gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  background: var(--linie);
  border: 1px solid var(--linie);
  margin-top: clamp(-3.5rem, -5vw, -2.5rem);
  position: relative; z-index: 2;
}
.bereichskarte {
  display: flex; flex-direction: column;
  background: var(--papier);
  padding: 1.6rem 1.4rem 1.5rem;
  text-decoration: none; color: var(--tinte);
  border-top: 6px solid var(--kartenfarbe, var(--hg-blau));
  transition: background-color .15s ease;
}
.bereichskarte:hover, .bereichskarte:focus-visible { background: var(--papier-kuehl); color: var(--tinte); }
.bereichskarte h2 { font-size: var(--t-l); margin-bottom: .35em; color: var(--kartenfarbe); }
.bereichskarte p { font-size: var(--t-s); color: var(--tinte-weich); margin: 0; max-width: none; }
.bereichskarte-mehr {
  margin-top: auto; padding-top: 1rem;
  font-weight: 700; font-size: var(--t-s); color: var(--recht);
}
.bereichskarte:hover .bereichskarte-mehr { text-decoration: underline; }

.bereichskarte[data-farbe="recht"]    { --kartenfarbe: var(--recht); }
.bereichskarte[data-farbe="finanzen"] { --kartenfarbe: #1B7F25; }
.bereichskarte[data-farbe="bauen"]    { --kartenfarbe: #8A5A00; }
.bereichskarte[data-farbe="technik"]  { --kartenfarbe: var(--technik); }

@media (max-width: 62rem) { .bereichsraster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .bereichsraster { grid-template-columns: 1fr; margin-top: 0; } }

/* ==========================================================================
   Seitenkopf der Unterseiten
   ========================================================================== */

.seitenkopf {
  background: var(--akzent-tief);
  border-bottom: 1px solid var(--linie);
  padding-block: clamp(2rem, 5vw, 3.25rem);
}
.seitenkopf h1 { margin-bottom: .35em; }
.seitenkopf .lead { font-size: var(--t-l); color: var(--tinte-weich); max-width: 46rem; margin: 0; }
.seitenkopf-marke {
  display: block; width: 3.5rem; height: 6px;
  background: var(--akzent); margin-bottom: 1.4rem;
}

.crumbs { border-bottom: 1px solid var(--linie); font-size: var(--t-s); background: var(--papier); }
.crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .75rem;
  margin: 0; padding: .7rem 0;
}
.crumbs li + li::before { content: "›"; margin-right: .75rem; color: var(--tinte-weich); }
.crumbs a { color: var(--tinte-weich); text-decoration: none; }
.crumbs a:hover { color: var(--recht); text-decoration: underline; }
.crumbs [aria-current] { color: var(--tinte); font-weight: 600; }

/* ==========================================================================
   Abschnitte und Textblöcke
   ========================================================================== */

.abschnitt { padding-block: var(--luft-l); }
.abschnitt--kuehl { background: var(--papier-kuehl); }
.abschnitt--eng { padding-block: var(--luft-m); }

.abschnitt-kopf { max-width: 44rem; margin-bottom: var(--luft-m); }
.abschnitt-kopf p { font-size: var(--t-l); color: var(--tinte-weich); margin-bottom: 0; }

.fliess h2 { margin-top: 2.2em; }
.fliess h2:first-child { margin-top: 0; }
.fliess h3 { margin-top: 1.8em; color: var(--recht); }
.fliess ul, .fliess ol { padding-left: 1.3em; max-width: 66ch; }
.fliess li { margin-bottom: .45em; }
.fliess li::marker { color: var(--akzent); font-weight: 700; }

.satzung h3 { margin-top: 2em; font-size: var(--t-l); color: var(--tinte); }
.satzung ol { padding-left: 1.5em; }

/* Zweispalter Text plus Bild */
.duo {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 55rem) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--bild-links .duo-bild { order: -1; }
  .duo--schmal-bild { grid-template-columns: 5fr 4fr; }
}
.duo-bild img { width: 100%; }

/* Bereichsblöcke der Leistungsübersicht. Farbe über Datenattribut statt inline,
   damit der Dunkelmodus sie überschreiben kann. */
.bereichsblock { margin-bottom: var(--luft-l); }
.bereichsblock[data-farbe="recht"]    { --akzent: var(--recht);   --block: var(--recht); }
.bereichsblock[data-farbe="finanzen"] { --akzent: #1B7F25;        --block: #1B7F25; }
.bereichsblock[data-farbe="bauen"]    { --akzent: #8A5A00;        --block: #8A5A00; }
.bereichsblock[data-farbe="technik"]  { --akzent: var(--technik); --block: var(--technik); }
.bereichsblock-titel { color: var(--block); }

.beitrag-marke--link { text-decoration: none; }
.beitrag-marke--link:hover { text-decoration: underline; }

/* ==========================================================================
   Karten und Listen
   ========================================================================== */

.kachelraster {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.kachel {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 5px solid var(--akzent);
  padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column;
}
.kachel h3 { font-size: var(--t-l); margin-bottom: .4em; }
.kachel h3 a { color: var(--tinte); text-decoration: none; }
.kachel h3 a:hover { color: var(--recht); text-decoration: underline; }
.kachel p { font-size: var(--t-m); color: var(--tinte-weich); margin-bottom: 0; max-width: none; }
.kachel-fuss { margin-top: auto; padding-top: 1rem; font-weight: 700; font-size: var(--t-s); }

/* Beitragsliste: bewusst andere Struktur als die Kacheln, mit Datumsspalte */
.beitragsliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.beitragsliste > li { border-bottom: 1px solid var(--linie); }
.beitrag-zeile {
  display: grid; gap: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
}
@media (min-width: 46rem) {
  .beitrag-zeile { grid-template-columns: 13rem 1fr; }
}
@media (min-width: 62rem) {
  .beitrag-zeile { grid-template-columns: 13rem 1fr 9rem; }
}
.beitrag-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.beitrag-inhalt h3 { font-size: var(--t-xl); margin-bottom: .3em; }
.beitrag-inhalt h3 a { color: var(--tinte); text-decoration: none; }
.beitrag-inhalt h3 a:hover { color: var(--recht); text-decoration: underline; }
.beitrag-inhalt p { margin-bottom: 0; color: var(--tinte-weich); }
.beitrag-meta { font-size: var(--t-s); color: var(--tinte-weich); }
.beitrag-stand { font-size: var(--t-s); color: var(--tinte-weich); margin-top: .6em !important; }
.beitrag-datum { display: block; font-weight: 600; }
.beitrag-marke {
  display: inline-block; margin-top: .5rem; padding: .15rem .55rem;
  font-size: var(--t-xs); font-weight: 700; color: #fff; background: var(--marke, var(--recht));
}
.beitrag-marke[data-farbe="recht"]    { --marke: var(--recht); }
.beitrag-marke[data-farbe="finanzen"] { --marke: #1B7F25; }
.beitrag-marke[data-farbe="bauen"]    { --marke: #8A5A00; }
.beitrag-marke[data-farbe="technik"]  { --marke: var(--technik); }

/* ==========================================================================
   Hinweise, Downloads, Fakten
   ========================================================================== */

.hinweis {
  border: 1px solid var(--linie);
  border-left: 5px solid var(--akzent);
  background: var(--papier-kuehl);
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.5rem;
}
.hinweis :last-child { margin-bottom: 0; }
.hinweis--mitglied { border-left-color: var(--finanzen); background: #F1F8F2; }
.hinweis--stand    { border-left-color: var(--bauen);    background: #FDF6E8; font-size: var(--t-m); }
.hinweis--fehler   { border-left-color: var(--technik);  background: #FCEEF1; }
.hinweis--erfolg   { border-left-color: var(--finanzen); background: #EFF8F0; }

.downloads { list-style: none; margin: 1.5rem 0; padding: 0; }
.downloads li { border-bottom: 1px solid var(--linie); }
.downloads li:first-child { border-top: 1px solid var(--linie); }
.downloads a {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .9rem .25rem; text-decoration: none; color: var(--tinte); font-weight: 600;
}
.downloads a:hover { color: var(--recht); background: var(--papier-kuehl); }
.downloads a::before {
  content: "PDF"; flex-shrink: 0;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--technik); padding: .1rem .4rem; border-radius: 2px;
}

.fakten { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.faktum { background: var(--papier); padding: 1.5rem 1.4rem; }
.faktum b { display: block; font-size: var(--t-2xl); line-height: 1.05; color: var(--recht); }
.faktum span { font-size: var(--t-s); color: var(--tinte-weich); }

.kontaktbox {
  background: var(--papier-kuehl); border: 1px solid var(--linie);
  border-top: 5px solid var(--akzent); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.kontaktbox h2 { font-size: var(--t-xl); }
.kontaktbox :last-child { margin-bottom: 0; }

/* Mitgliedschafts-Aufruf, breites Band mit Bild */
.aufruf { position: relative; background: var(--dunkel); color: #fff; overflow: hidden; }
.aufruf-bild { position: absolute; inset: 0; }
.aufruf-bild picture, .aufruf-bild img { width: 100%; height: 100%; object-fit: cover; }
.aufruf-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,46,82,.95) 0%, rgba(11,46,82,.88) 55%, rgba(11,46,82,.55) 100%);
}
.aufruf-text { position: relative; padding-block: var(--luft-l); max-width: 40rem; }
.aufruf h2 { color: #fff; }
.aufruf p { color: #DCE8F2; font-size: var(--t-l); }
.aufruf .knopf { margin-top: .75rem; }

/* Vorstand */
.personenraster { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.person { border: 1px solid var(--linie); border-top: 5px solid var(--recht); padding: 1.5rem; }
.person img, .person .person-bild {
  width: 8rem; height: 8rem; object-fit: cover; object-position: 50% 20%;
  border-radius: 50%; margin-bottom: 1.1rem; background: var(--papier-kuehl);
}
.person h2 { font-size: var(--t-xl); margin-bottom: .15em; }
.person-rolle { font-weight: 700; color: var(--recht); margin-bottom: .4em; }
.person-zusatz { color: var(--tinte-weich); font-size: var(--t-m); }

/* Partnerlogos */
.partner { display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: center; }
.partner img { max-height: 3.25rem; width: auto; }

/* ==========================================================================
   Formulare
   ========================================================================== */

.formular { max-width: 44rem; }
.feldgruppe { border: 0; padding: 0; margin: 0 0 var(--luft-m); }
.feldgruppe > legend {
  font-size: var(--t-xl); font-weight: 700; padding: 0;
  margin-bottom: 1.1rem; padding-bottom: .5rem;
  border-bottom: 3px solid var(--akzent); width: 100%;
}
.feld { margin-bottom: 1.25rem; }
.feld > label, .feld > .feld-titel { display: block; font-weight: 600; margin-bottom: .35rem; }
.feld-hilfe { display: block; font-size: var(--t-s); color: var(--tinte-weich); margin-top: .3rem; }
.pflicht { color: var(--technik); font-weight: 700; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%; font: inherit; font-size: var(--t-m); color: var(--tinte);
  background: var(--papier);
  border: 1px solid #9FB3C6; border-radius: var(--radius);
  padding: .7rem .85rem;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--recht); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--technik); background: #FDF5F6;
}
.feld-fehler { display: block; color: #B3001B; font-weight: 600; font-size: var(--t-s); margin-top: .3rem; }

.feld-reihe { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .feld-reihe--2 { grid-template-columns: 1fr 1fr; }
  .feld-reihe--plz { grid-template-columns: 8rem 1fr; }
}

.wahl { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .6rem; }
.wahl input { margin-top: .35rem; width: 1.15rem; height: 1.15rem; flex-shrink: 0; accent-color: var(--recht); }
.wahl label { font-weight: 400; }

.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.suchzeile { display: flex; gap: .6rem; max-width: 34rem; }
.suchzeile input { flex: 1; }

/* ==========================================================================
   Karte
   Statisches Bild vom eigenen Server. Kein eingebetteter Fremddienst,
   damit beim Aufruf der Seite nichts an Dritte übertragen wird.
   ========================================================================== */

.karte { margin: 0 0 1.25rem; }
.karte img { width: 100%; border: 1px solid var(--linie); }
.bild-quelle {
  font-size: var(--t-s); color: var(--tinte-weich); margin-top: .6rem;
}
.karte figcaption {
  font-size: var(--t-s); color: var(--tinte-weich); margin-top: .6rem;
}

/* ==========================================================================
   Fuss
   ========================================================================== */

.fuss { background: var(--dunkel); color: #C3D6E8; margin-top: var(--luft-l); }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { color: var(--hg-blau); text-decoration: underline; }
.fuss h2 { font-size: var(--t-m); color: #fff; margin-bottom: .9em; }

.fuss-raster {
  display: grid; gap: 2.25rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: var(--luft-m);
}
@media (min-width: 42rem) { .fuss-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.fuss-spalte--marke { --marke-breite: 13rem; }
.fuss-logo { width: var(--marke-breite); height: auto; display: block; }
.fuss-ort {
  font-weight: 700; color: #fff; margin: .1rem 0 1rem;
  width: var(--marke-breite);
  padding-left: calc(var(--marke-breite) * 0.31);
  font-size: var(--t-s);
}
.fuss-claim { font-size: var(--t-m); max-width: 24rem; }
.fuss-direkt { font-weight: 600; }
.fuss-liste { list-style: none; margin: 0; padding: 0; }
.fuss-liste li { margin-bottom: .5rem; }

.fuss-schluss { border-top: 1px solid rgba(255,255,255,.16); font-size: var(--t-s); }
.fuss-schluss .wrap {
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
  justify-content: space-between; align-items: center; padding-block: 1.1rem;
}
.fuss-verband { margin: 0; max-width: 40rem; }
.fuss-recht { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; }

/* ==========================================================================
   Häufige Fragen
   ========================================================================== */

.fragen { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.05rem .25rem;
  font-weight: 600; font-size: var(--t-l); line-height: 1.35;
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::before {
  content: ""; flex-shrink: 0; margin-top: .5em;
  width: .7rem; height: .7rem;
  border-right: 3px solid var(--akzent); border-bottom: 3px solid var(--akzent);
  transform: rotate(45deg); transition: transform .15s ease;
}
.frage[open] > summary::before { transform: rotate(-135deg); margin-top: .75em; }
.frage > summary:hover { color: var(--recht); }
.frage-antwort { padding: 0 .25rem 1.2rem 1.6rem; }
.frage-antwort p { margin: 0; color: var(--tinte-weich); }

/* ==========================================================================
   Partner
   ========================================================================== */

.partnerraster { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 50rem) { .partnerraster { grid-template-columns: 1fr 1fr; } }

.partnerkarte {
  display: grid; gap: 1.25rem;
  grid-template-columns: 9.5rem 1fr;
  align-items: start;
  border: 1px solid var(--linie);
  border-top: 5px solid var(--hg-blau);
  padding: 1.5rem;
}
@media (max-width: 34rem) { .partnerkarte { grid-template-columns: 1fr; } }

.partnerkarte-marke {
  display: flex; align-items: center; justify-content: center;
  min-height: 4.5rem; padding: .5rem;
  background: var(--papier-kuehl);
}
.partnerkarte-marke img { max-height: 3.5rem; max-width: 100%; width: auto; }
.partnerkarte-wortmarke {
  margin: 0; text-align: center; font-weight: 700; font-size: var(--t-s);
  color: var(--tinte-weich); line-height: 1.3;
}
.partnerkarte-rolle {
  margin: 0 0 .2em; font-size: var(--t-s); font-weight: 700; color: var(--recht);
}
.partnerkarte h2 { font-size: var(--t-l); margin-bottom: .4em; }
.partnerkarte p { font-size: var(--t-m); color: var(--tinte-weich); margin-bottom: 0; max-width: none; }
.partnerkarte-links { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin-top: .9rem !important; }
.partnerkarte-links a { font-weight: 600; font-size: var(--t-s); }

/* ==========================================================================
   Preisträger
   ========================================================================== */

.preistraeger { list-style: none; margin: 1.5rem 0; padding: 0; }
.preistraeger li {
  display: grid; gap: .3rem 1.5rem; grid-template-columns: 6rem 1fr;
  padding: 1rem .25rem; border-bottom: 1px solid var(--linie);
}
.preistraeger li:first-child { border-top: 1px solid var(--linie); }
.preistraeger b { color: var(--recht); }
@media (max-width: 34rem) { .preistraeger li { grid-template-columns: 1fr; } }

/* ==========================================================================
   Barrierefreiheits-Leiste
   Schwebender Schalter unten links, Bedientafel darueber. Die Einstellungen
   wirken ueber Attribute am <html>-Element, siehe Abschnitt weiter unten.
   ========================================================================== */

.bf { position: fixed; left: 0; bottom: 0; z-index: 95; }

.bf-schalter {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 0 calc(1rem + var(--hinweis-hoehe, 0px)) 1rem;
  padding: .7rem 1.05rem;
  background: var(--recht); color: #fff;
  border: 2px solid var(--recht); border-radius: 999px;
  font: inherit; font-weight: 700; font-size: var(--t-s);
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(16, 36, 58, .55);
}
.bf-schalter:hover { background: var(--dunkel); border-color: var(--dunkel); }
.bf-symbol { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
@media (max-width: 34rem) {
  .bf-schalter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bf-schalter { padding: .75rem; }
}

.bf-tafel {
  position: absolute; bottom: 100%; left: 1rem;
  width: min(20rem, calc(100vw - 2rem));
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 5px solid var(--recht);
  box-shadow: 0 18px 40px -16px rgba(16, 36, 58, .5);
  padding: 1.1rem 1.15rem 1.25rem;
}
.bf-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.bf-kopf h2 { font-size: var(--t-l); margin: 0 0 .7em; }
.bf-zu {
  background: none; border: 0; cursor: pointer; color: var(--tinte-weich);
  font-size: 1.6rem; line-height: 1; padding: 0 .2rem; margin-top: -.2rem;
}
.bf-zu:hover { color: var(--recht); }

.bf-gruppe { margin-bottom: .95rem; }
.bf-titel { font-weight: 700; font-size: var(--t-s); margin: 0 0 .45rem; }

.bf-knoepfe { display: grid; grid-template-columns: 1fr auto 1fr; gap: .4rem; align-items: stretch; }
.bf-knoepfe--drei { grid-template-columns: repeat(3, 1fr); }
.bf-wert {
  display: flex; align-items: center; justify-content: center;
  min-width: 3.6rem; font-weight: 700; font-size: var(--t-s);
}

.bf-tafel button:not(.bf-zu) {
  font: inherit; font-size: var(--t-s); font-weight: 600;
  padding: .5rem .6rem; min-height: 2.35rem;
  background: var(--papier); color: var(--tinte);
  border: 1px solid #9FB3C6; border-radius: var(--radius);
  cursor: pointer; text-align: center;
}
.bf-tafel button:not(.bf-zu):hover { border-color: var(--recht); color: var(--recht); }
.bf-tafel button[aria-pressed="true"] {
  background: var(--recht); border-color: var(--recht); color: #fff;
}

.bf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.bf-liste button { width: 100%; text-align: left !important; }
.bf-liste button[aria-pressed="true"]::after { content: " ✓"; }

.bf-fuss { margin: 0 0 .7rem; }
.bf-zuruecksetzen { width: 100%; }
.bf-hinweis { font-size: var(--t-xs); color: var(--tinte-weich); margin: 0; line-height: 1.45; }

/* Die Hinweisleiste darf den Schalter nicht verdecken. Ihre Höhe hängt vom
   Textumbruch ab, deshalb misst das Skript sie und setzt --hinweis-hoehe. */

/* ---- Wirkung der Einstellungen ------------------------------------------ */

/* Höherer Kontrast wirkt über die Farbtokens, nicht über feste Farben.
   So bleibt er mit hellem wie dunklem Schema verträglich. Die dunkle
   Entsprechung steht in den beiden Dunkelmodus-Abschnitten weiter unten. */
html[data-bf-kontrast] {
  --tinte: #000000;
  --tinte-weich: #1C2A35;
  --linie: #5A6E7E;
  --papier-kuehl: #EFF3F7;
  --papier-tief: #DCE6EE;
  --recht: #003D7A;
  --akzent-tief: #E7EEF5;
}
html[data-bf-kontrast] .kachel,
html[data-bf-kontrast] .partnerkarte,
html[data-bf-kontrast] .hinweis,
html[data-bf-kontrast] .kontaktbox { border-color: var(--linie); }

html[data-bf-links] main a,
html[data-bf-links] .fuss a,
html[data-bf-links] .kopf-service a {
  text-decoration: underline !important;
  text-underline-offset: .18em;
}

html[data-bf-abstand] body { line-height: 1.95; letter-spacing: .012em; word-spacing: .08em; }
html[data-bf-abstand] p, html[data-bf-abstand] li { margin-bottom: 1.5em; }
html[data-bf-abstand] h1, html[data-bf-abstand] h2,
html[data-bf-abstand] h3, html[data-bf-abstand] h4 { line-height: 1.35; }

html[data-bf-ruhe] *, html[data-bf-ruhe] *::before, html[data-bf-ruhe] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* ==========================================================================
   Hinweisleiste
   Kein Overlay, keine Modalsperre: die Leiste informiert, sie blockiert nichts.
   ========================================================================== */

.hinweisleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--papier);
  border-top: 5px solid var(--hg-blau);
  box-shadow: 0 -10px 30px -14px rgba(16, 36, 58, .45);
  transform: translateY(102%);
  transition: transform .25s ease;
}
.hinweisleiste.ist-sichtbar { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hinweisleiste { transition: none; }
}
.hinweisleiste-inhalt {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.1rem;
}
.hinweisleiste h2 { font-size: var(--t-m); margin-bottom: .25em; }
.hinweisleiste p { margin: 0; font-size: var(--t-s); max-width: 62ch; color: var(--tinte-weich); }
.hinweisleiste-knopf { flex-shrink: 0; }
@media (max-width: 46rem) {
  .hinweisleiste-knopf { width: 100%; }
  .hinweisleiste-knopf .knopf { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Dunkelmodus
   Muss am Ende stehen: die Regeln haben dieselbe Spezifität wie die
   Komponentenregeln darüber und gewinnen nur über ihre Position.
   ========================================================================== */

/* Dunkelmodus. Die Marken- und Bereichsfarben bleiben erkennbar, werden aber
   so weit aufgehellt, dass sie auf dunklem Grund die Kontrastanforderung
   erfüllen. Getestet mit axe-core gegen WCAG 2.2 AA. */
/* Dunkelmodus in zwei Fassungen, erzeugt aus einer Quelle:
   1. automatisch nach Systemeinstellung, sofern der Besucher nicht ausdruecklich
      "Hell" in der Bedienleiste gewaehlt hat
   2. manuell, wenn in der Bedienleiste "Dunkel" gewaehlt wurde
   Beide Faelle lassen sich in CSS nicht in einem Selektor zusammenfassen,
   deshalb steht der Regelsatz zweimal. Aenderungen immer in beiden vornehmen. */

@media (prefers-color-scheme: dark) {
  html:not([data-bf-schema="hell"]) {
    color-scheme: dark;

    --hg-blau:      #4FC3F7;
    --hg-blau-dkl:  #81D4FA;
    --recht:        #6FA8E0;
    --finanzen:     #6BCB77;
    --bauen:        #F2B441;
    --technik:      #FF7A8A;

    --tinte:        #E8EEF4;
    --tinte-weich:  #AFC0D0;
    --papier:       #101B25;
    --papier-kuehl: #17242F;
    --papier-tief:  #1E2E3B;
    --linie:        #2C3E4E;
    --dunkel:       #0A131B;

    --akzent:       var(--hg-blau);
    --akzent-tief:  #16232E;
  }
  html:not([data-bf-schema="hell"]) body[data-bereich="recht"] { --akzent: #6FA8E0; --akzent-tief: #15222E;
  }
  html:not([data-bf-schema="hell"]) body[data-bereich="finanzen"] { --akzent: #6BCB77; --akzent-tief: #14251A;
  }
  html:not([data-bf-schema="hell"]) body[data-bereich="bauen"] { --akzent: #F2B441; --akzent-tief: #261E10;
  }
  html:not([data-bf-schema="hell"]) body[data-bereich="technik"] { --akzent: #FF7A8A; --akzent-tief: #271418;
  }
  html:not([data-bf-schema="hell"]) .kopf, html:not([data-bf-schema="hell"]) .kopf-haupt { background: var(--papier);
  }
  html:not([data-bf-schema="hell"]) .kopf-service { background: #060D13; color: #A8BECE;
  }
  html:not([data-bf-schema="hell"]) .nav-unter { border-top-color: var(--hg-blau);
  }
  html:not([data-bf-schema="hell"]) .bereichskarte[data-farbe="recht"] { --kartenfarbe: #6FA8E0;
  }
  html:not([data-bf-schema="hell"]) .bereichskarte[data-farbe="finanzen"] { --kartenfarbe: #6BCB77;
  }
  html:not([data-bf-schema="hell"]) .bereichskarte[data-farbe="bauen"] { --kartenfarbe: #F2B441;
  }
  html:not([data-bf-schema="hell"]) .bereichskarte[data-farbe="technik"] { --kartenfarbe: #FF7A8A;
  }
  html:not([data-bf-schema="hell"]) .beitrag-marke { color: #0A131B;
  }
  html:not([data-bf-schema="hell"]) .beitrag-marke[data-farbe="recht"] { --marke: #6FA8E0;
  }
  html:not([data-bf-schema="hell"]) .beitrag-marke[data-farbe="finanzen"] { --marke: #6BCB77;
  }
  html:not([data-bf-schema="hell"]) .beitrag-marke[data-farbe="bauen"] { --marke: #F2B441;
  }
  html:not([data-bf-schema="hell"]) .beitrag-marke[data-farbe="technik"] { --marke: #FF7A8A;
  }
  html:not([data-bf-schema="hell"]) .knopf { background: var(--recht); border-color: var(--recht); color: #0A131B;
  }
  html:not([data-bf-schema="hell"]) .knopf:hover { background: var(--hg-blau); border-color: var(--hg-blau); color: #0A131B;
  }
  html:not([data-bf-schema="hell"]) .knopf--offen { background: transparent; color: var(--hg-blau); border-color: var(--hg-blau);
  }
  html:not([data-bf-schema="hell"]) .knopf--offen:hover { background: var(--hg-blau); color: #0A131B;
  }
  html:not([data-bf-schema="hell"]) .knopf--hell { background: var(--hg-blau); border-color: var(--hg-blau); color: #0A131B;
  }
  html:not([data-bf-schema="hell"]) .nav-liste > li > a.knopf { color: #0A131B;
  }
  html:not([data-bf-schema="hell"]) .nav-liste > li > a.knopf:hover, html:not([data-bf-schema="hell"]) .nav-liste > li > a.knopf:focus-visible { background: var(--hg-blau); border-color: var(--hg-blau); color: #0A131B;
  }
  html:not([data-bf-schema="hell"]) .hinweis { background: var(--papier-kuehl);
  }
  html:not([data-bf-schema="hell"]) .hinweis--mitglied { background: #142218;
  }
  html:not([data-bf-schema="hell"]) .hinweis--stand { background: #241D11;
  }
  html:not([data-bf-schema="hell"]) .hinweis--fehler { background: #2A151A;
  }
  html:not([data-bf-schema="hell"]) .hinweis--erfolg { background: #142218;
  }
  html:not([data-bf-schema="hell"]) .feld-fehler { color: #FF9FAC;
  }
  html:not([data-bf-schema="hell"]) input[type="text"], html:not([data-bf-schema="hell"]) input[type="email"], html:not([data-bf-schema="hell"]) input[type="tel"], html:not([data-bf-schema="hell"]) input[type="date"], html:not([data-bf-schema="hell"]) input[type="number"], html:not([data-bf-schema="hell"]) select, html:not([data-bf-schema="hell"]) textarea {
    background: var(--papier-kuehl); color: var(--tinte); border-color: #405566;
  }
  html:not([data-bf-schema="hell"]) input[aria-invalid="true"], html:not([data-bf-schema="hell"]) textarea[aria-invalid="true"], html:not([data-bf-schema="hell"]) select[aria-invalid="true"] {
    background: #2A151A; border-color: var(--technik);
  }
  html:not([data-bf-schema="hell"]) .bereichsblock[data-farbe="recht"] { --akzent: #6FA8E0; --block: #6FA8E0;
  }
  html:not([data-bf-schema="hell"]) .bereichsblock[data-farbe="finanzen"] { --akzent: #6BCB77; --block: #6BCB77;
  }
  html:not([data-bf-schema="hell"]) .bereichsblock[data-farbe="bauen"] { --akzent: #F2B441; --block: #F2B441;
  }
  html:not([data-bf-schema="hell"]) .bereichsblock[data-farbe="technik"] { --akzent: #FF7A8A; --block: #FF7A8A;
  }
  html:not([data-bf-schema="hell"]) .partnerkarte-marke { background: #EEF3F7;
  }
  html:not([data-bf-schema="hell"]) .partnerkarte .partnerkarte-wortmarke { color: #33465A;
  }
  html:not([data-bf-schema="hell"]) .downloads a::before { color: #0A131B;
  }
  html:not([data-bf-schema="hell"]) .hinweisleiste { background: var(--papier-kuehl);
  }
  html:not([data-bf-schema="hell"]) .fuss { background: #060D13;
  }
  html:not([data-bf-schema="hell"])[data-bf-kontrast] {
    --tinte: #FFFFFF;
    --tinte-weich: #DCE6EE;
    --papier: #000000;
    --papier-kuehl: #0B141C;
    --papier-tief: #16222C;
    --linie: #8CA3B5;
    --recht: #9CCBFF;
    --hg-blau: #8FD4FF;
    --akzent: #8FD4FF;
    --akzent-tief: #0B141C;
  }
  html:not([data-bf-schema="hell"])[data-bf-kontrast] .knopf { background: #9CCBFF; border-color: #9CCBFF; color: #000; }
  html:not([data-bf-schema="hell"])[data-bf-kontrast] .fuss,
  html:not([data-bf-schema="hell"])[data-bf-kontrast] .kopf-service { background: #000; color: #E8EEF4; }
  /* Bedienleiste: im Dunkelmodus ist --recht ein helles Blau, deshalb braucht
     die Beschriftung auf farbiger Fläche dunkle Schrift. */
  html:not([data-bf-schema="hell"]) .bf-schalter { background: var(--recht); border-color: var(--recht); color: #0A131B; }
  html:not([data-bf-schema="hell"]) .bf-schalter:hover { background: var(--hg-blau); border-color: var(--hg-blau); color: #0A131B; }
  html:not([data-bf-schema="hell"]) .bf-tafel { background: var(--papier-kuehl); border-top-color: var(--recht); }
  html:not([data-bf-schema="hell"]) .bf-tafel button:not(.bf-zu) { background: var(--papier); color: var(--tinte); border-color: #405566; }
  html:not([data-bf-schema="hell"]) .bf-tafel button[aria-pressed="true"] { background: var(--recht); border-color: var(--recht); color: #0A131B; }


}

  html[data-bf-schema="dunkel"] {
  color-scheme: dark;

  --hg-blau:      #4FC3F7;
  --hg-blau-dkl:  #81D4FA;
  --recht:        #6FA8E0;
  --finanzen:     #6BCB77;
  --bauen:        #F2B441;
  --technik:      #FF7A8A;

  --tinte:        #E8EEF4;
  --tinte-weich:  #AFC0D0;
  --papier:       #101B25;
  --papier-kuehl: #17242F;
  --papier-tief:  #1E2E3B;
  --linie:        #2C3E4E;
  --dunkel:       #0A131B;

  --akzent:       var(--hg-blau);
  --akzent-tief:  #16232E;
}
html[data-bf-schema="dunkel"] body[data-bereich="recht"] { --akzent: #6FA8E0; --akzent-tief: #15222E;
}
html[data-bf-schema="dunkel"] body[data-bereich="finanzen"] { --akzent: #6BCB77; --akzent-tief: #14251A;
}
html[data-bf-schema="dunkel"] body[data-bereich="bauen"] { --akzent: #F2B441; --akzent-tief: #261E10;
}
html[data-bf-schema="dunkel"] body[data-bereich="technik"] { --akzent: #FF7A8A; --akzent-tief: #271418;
}
html[data-bf-schema="dunkel"] .kopf, html[data-bf-schema="dunkel"] .kopf-haupt { background: var(--papier);
}
html[data-bf-schema="dunkel"] .kopf-service { background: #060D13; color: #A8BECE;
}
html[data-bf-schema="dunkel"] .nav-unter { border-top-color: var(--hg-blau);
}
html[data-bf-schema="dunkel"] .bereichskarte[data-farbe="recht"] { --kartenfarbe: #6FA8E0;
}
html[data-bf-schema="dunkel"] .bereichskarte[data-farbe="finanzen"] { --kartenfarbe: #6BCB77;
}
html[data-bf-schema="dunkel"] .bereichskarte[data-farbe="bauen"] { --kartenfarbe: #F2B441;
}
html[data-bf-schema="dunkel"] .bereichskarte[data-farbe="technik"] { --kartenfarbe: #FF7A8A;
}
html[data-bf-schema="dunkel"] .beitrag-marke { color: #0A131B;
}
html[data-bf-schema="dunkel"] .beitrag-marke[data-farbe="recht"] { --marke: #6FA8E0;
}
html[data-bf-schema="dunkel"] .beitrag-marke[data-farbe="finanzen"] { --marke: #6BCB77;
}
html[data-bf-schema="dunkel"] .beitrag-marke[data-farbe="bauen"] { --marke: #F2B441;
}
html[data-bf-schema="dunkel"] .beitrag-marke[data-farbe="technik"] { --marke: #FF7A8A;
}
html[data-bf-schema="dunkel"] .knopf { background: var(--recht); border-color: var(--recht); color: #0A131B;
}
html[data-bf-schema="dunkel"] .knopf:hover { background: var(--hg-blau); border-color: var(--hg-blau); color: #0A131B;
}
html[data-bf-schema="dunkel"] .knopf--offen { background: transparent; color: var(--hg-blau); border-color: var(--hg-blau);
}
html[data-bf-schema="dunkel"] .knopf--offen:hover { background: var(--hg-blau); color: #0A131B;
}
html[data-bf-schema="dunkel"] .knopf--hell { background: var(--hg-blau); border-color: var(--hg-blau); color: #0A131B;
}
html[data-bf-schema="dunkel"] .nav-liste > li > a.knopf { color: #0A131B;
}
html[data-bf-schema="dunkel"] .nav-liste > li > a.knopf:hover, html[data-bf-schema="dunkel"] .nav-liste > li > a.knopf:focus-visible { background: var(--hg-blau); border-color: var(--hg-blau); color: #0A131B;
}
html[data-bf-schema="dunkel"] .hinweis { background: var(--papier-kuehl);
}
html[data-bf-schema="dunkel"] .hinweis--mitglied { background: #142218;
}
html[data-bf-schema="dunkel"] .hinweis--stand { background: #241D11;
}
html[data-bf-schema="dunkel"] .hinweis--fehler { background: #2A151A;
}
html[data-bf-schema="dunkel"] .hinweis--erfolg { background: #142218;
}
html[data-bf-schema="dunkel"] .feld-fehler { color: #FF9FAC;
}
html[data-bf-schema="dunkel"] input[type="text"], html[data-bf-schema="dunkel"] input[type="email"], html[data-bf-schema="dunkel"] input[type="tel"], html[data-bf-schema="dunkel"] input[type="date"], html[data-bf-schema="dunkel"] input[type="number"], html[data-bf-schema="dunkel"] select, html[data-bf-schema="dunkel"] textarea {
  background: var(--papier-kuehl); color: var(--tinte); border-color: #405566;
}
html[data-bf-schema="dunkel"] input[aria-invalid="true"], html[data-bf-schema="dunkel"] textarea[aria-invalid="true"], html[data-bf-schema="dunkel"] select[aria-invalid="true"] {
  background: #2A151A; border-color: var(--technik);
}
html[data-bf-schema="dunkel"] .bereichsblock[data-farbe="recht"] { --akzent: #6FA8E0; --block: #6FA8E0;
}
html[data-bf-schema="dunkel"] .bereichsblock[data-farbe="finanzen"] { --akzent: #6BCB77; --block: #6BCB77;
}
html[data-bf-schema="dunkel"] .bereichsblock[data-farbe="bauen"] { --akzent: #F2B441; --block: #F2B441;
}
html[data-bf-schema="dunkel"] .bereichsblock[data-farbe="technik"] { --akzent: #FF7A8A; --block: #FF7A8A;
}
html[data-bf-schema="dunkel"] .partnerkarte-marke { background: #EEF3F7;
}
html[data-bf-schema="dunkel"] .partnerkarte .partnerkarte-wortmarke { color: #33465A;
}
html[data-bf-schema="dunkel"] .downloads a::before { color: #0A131B;
}
html[data-bf-schema="dunkel"] .hinweisleiste { background: var(--papier-kuehl);
}
html[data-bf-schema="dunkel"] .fuss { background: #060D13;
}
html[data-bf-schema="dunkel"][data-bf-kontrast] {
  --tinte: #FFFFFF;
  --tinte-weich: #DCE6EE;
  --papier: #000000;
  --papier-kuehl: #0B141C;
  --papier-tief: #16222C;
  --linie: #8CA3B5;
  --recht: #9CCBFF;
  --hg-blau: #8FD4FF;
  --akzent: #8FD4FF;
  --akzent-tief: #0B141C;
}
html[data-bf-schema="dunkel"][data-bf-kontrast] .knopf { background: #9CCBFF; border-color: #9CCBFF; color: #000; }
html[data-bf-schema="dunkel"][data-bf-kontrast] .fuss,
html[data-bf-schema="dunkel"][data-bf-kontrast] .kopf-service { background: #000; color: #E8EEF4; }
/* Bedienleiste: im Dunkelmodus ist --recht ein helles Blau, deshalb braucht
   die Beschriftung auf farbiger Fläche dunkle Schrift. */
html[data-bf-schema="dunkel"] .bf-schalter { background: var(--recht); border-color: var(--recht); color: #0A131B; }
html[data-bf-schema="dunkel"] .bf-schalter:hover { background: var(--hg-blau); border-color: var(--hg-blau); color: #0A131B; }
html[data-bf-schema="dunkel"] .bf-tafel { background: var(--papier-kuehl); border-top-color: var(--recht); }
html[data-bf-schema="dunkel"] .bf-tafel button:not(.bf-zu) { background: var(--papier); color: var(--tinte); border-color: #405566; }
html[data-bf-schema="dunkel"] .bf-tafel button[aria-pressed="true"] { background: var(--recht); border-color: var(--recht); color: #0A131B; }



/* ==========================================================================
   Druck
   ========================================================================== */

@media print {
  .kopf-service, .nav, .nav-schalter, .bereichsband, .fuss, .crumbs, .aufruf, .hinweisleiste, .bf { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .seitenkopf { background: none; border-bottom: 1pt solid #000; }
}