/* ============================================================================
   BATH Immobilienmanagement GmbH — Designsystem
   Grundlage: BATH Markenhandbuch, Stand August 2026 (13 Seiten)
   Bausteine: Plakette · Kupfernaht · Signet
   Prinzip:   Fläche, Kante, Achse, Linie. Kein Dach, kein Schlüssel, keine Skyline.
   ==========================================================================*/

/* ---------- 1. Schriften (lokal, keine externen Requests) ---------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/PlexMono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- 2. Marken-Token ---------------------------------------------- */
:root {
  /* Markenfarben — verbindlich laut Handbuch Seite 05 */
  --graphit:      #1C1D1F;   /* Pantone Black 6 C   — trägt rund 80 % der Fläche */
  --kupfer:       #9C5F3C;   /* Pantone 7573 C      — nur Naht, Linie, Marker   */
  --bone:         #F2EFE9;   /* Pantone 9224 C      — Papier-/Hellfläche        */
  --stein:        #8A8C8F;   /* Pantone Cool Gray 8 — Sekundärtext, Bildflächen */

  /* Barrierefreie Ableitungen desselben Farbtons.
     Begründung siehe Übergabebericht, Kapitel 6 und 11.
     Reine Markentöne bleiben für Flächen, Linien und Naht verbindlich. */
  --kupfer-auf-dunkel: #C88A5E; /* Kupfer-Text auf Graphit  — 5,9:1 */
  --kupfer-auf-hell:   #8A5335; /* Kupfer-Text auf Bone     — 5,4:1 */
  --stein-auf-hell:    #5C5E61; /* Sekundärtext auf Bone    — 5,7:1 */
  --graphit-linie:     #34363A; /* Trennlinie auf Graphit                */
  --bone-linie:        #D8D3C9; /* Trennlinie auf Bone                   */

  /* Zustände */
  --fokus: #C88A5E;

  /* Kontextabhängige Textrollen — werden von .hell und .dunkel umgesetzt.
     Als Variablen gelöst, weil sie auch auf dem tragenden Element selbst
     gelten müssen und nicht nur auf dessen Nachfahren. */
  --text-sekundaer: var(--stein);
  --text-kupfer:    var(--kupfer-auf-dunkel);
  --text-linie:     var(--graphit-linie);

  /* Typografie */
  --schrift: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Raster und Achsen */
  --bahn: 1360px;          /* maximale Inhaltsbreite   */
  --rand: clamp(20px, 5vw, 64px);
  --naht: 3px;             /* Stärke der Kupfernaht    */
  --schutzraum: 12px;      /* = Naht × 4, Logo-Schutzraum laut Seite 03 */

  /* Abstände — architektonische Sprünge, keine Zufallswerte */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
}

/* ---------- 3. Grundlagen ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--graphit);
  color: var(--bone);
  font-family: var(--schrift);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { max-width: 100%; display: block; }
img { height: auto; }

/* Grundsatz: keine gerundeten Ecken. Die Marke ist kantig. */
a, button, input, select, textarea, .karte, .flaeche { border-radius: 0; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }

:focus-visible {
  outline: var(--naht) solid var(--fokus);
  outline-offset: 3px;
}

/* ---------- 4. Layout-Bausteine ------------------------------------------ */
.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: clamp(56px, 9vw, 112px); }
.abschnitt--eng { padding-block: clamp(40px, 6vw, 72px); }

.hell {
  background: var(--bone); color: var(--graphit);
  --text-sekundaer: var(--stein-auf-hell);
  --text-kupfer:    var(--kupfer-auf-hell);
  --text-linie:     var(--bone-linie);
}
.dunkel {
  background: var(--graphit); color: var(--bone);
  --text-sekundaer: var(--stein);
  --text-kupfer:    var(--kupfer-auf-dunkel);
  --text-linie:     var(--graphit-linie);
}

/* Achsenmarker: die Kupfernaht als wiederkehrendes Ordnungsprinzip */
.naht {
  display: block;
  width: 56px;
  height: var(--naht);
  background: var(--kupfer);
  margin-bottom: var(--s3);
}
.naht--voll { width: 100%; }

/* ---------- 5. Typografie ------------------------------------------------ */
h1, h2, h3, h4 { margin: 0 0 var(--s3); font-weight: 800; overflow-wrap: break-word; letter-spacing: -0.03em; line-height: 1.02; }

.h-riesig {
  font-size: clamp(2.35rem, 5.1vw, 4.15rem);
  line-height: 1.0;
  overflow-wrap: break-word;
  hyphens: manual;
}
h2, .h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3, .h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
h4, .h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s3); max-width: 74ch; }
.fliess { font-size: 1.0625rem; line-height: 1.62; }
.fliess--gross { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; }

/* Auszeichnung: Archivo Medium 500, Tracking +30 % (Handbuch Seite 06) */
.auszeichnung {
  font-family: var(--schrift);
  text-wrap: balance;
  /* Das große Tracking macht lange Fachwörter breiter als schmale Spalten.
     Ohne diese Regel liefe die Auszeichnung auf 390 px aus dem Raster. */
  overflow-wrap: anywhere;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 var(--s3);
  display: block;
}
.auszeichnung--kupfer { color: var(--text-kupfer); }
.auszeichnung--stein { color: var(--text-sekundaer); }

/* Zahlen, Beträge, Kennzahlen, Aktenzeichen: IBM Plex Mono */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.sekundaer { color: var(--text-sekundaer); }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 6. Sprungmarke ----------------------------------------------- */
.sprungmarke {
  position: absolute; left: var(--rand); top: -100px; z-index: 100;
  background: var(--bone); color: var(--graphit);
  padding: 12px 20px; font-weight: 600;
  border-left: var(--naht) solid var(--kupfer);
  transition: top .15s ease;
}
.sprungmarke:focus { top: 12px; }

/* ---------- 7. Kopfbereich ----------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--graphit);
  border-bottom: 1px solid var(--graphit-linie);
}
.kopf__inhalt {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  min-height: 76px;
  padding-block: var(--s2);
}
@media (max-width: 1150px) {
  .kopf__inhalt { flex-wrap: wrap; }
  .nav { width: 100%; }
  .nav[data-js="an"] { width: auto; }
}
.kopf__marke { display: flex; align-items: center; flex-shrink: 0; padding: var(--schutzraum) 0; }
.kopf__marke img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); }
.nav__liste {
  display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none;
  color: var(--bone); padding: 8px 0;
  border-bottom: var(--naht) solid transparent;
  white-space: nowrap;
}
.nav__link:hover { border-bottom-color: var(--kupfer); }
.nav__link[aria-current="page"] { border-bottom-color: var(--kupfer); }

.nav__schalter {
  display: none;
  background: none; border: 1px solid var(--graphit-linie); color: var(--bone);
  font-family: var(--schrift); font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 12px 16px; cursor: pointer;
}
.nav__schalter:hover { border-color: var(--kupfer); }

@media (max-width: 1150px) {
  .nav { position: static; }

  /* Grundzustand ohne JavaScript: die Liste steht sichtbar unter der Marke und
     bricht um. Alle Verweise sind erreichbar, der Schalter bleibt verborgen. */
  .nav__liste {
    display: flex; flex-wrap: wrap;
    flex-direction: column; align-items: stretch; gap: 0;
    position: static;
    width: 100%;
    background: var(--graphit);
    border-top: 1px solid var(--graphit-linie);
    padding: var(--s2) 0 0;
  }

  /* Erst wenn JavaScript die Bedienung übernimmt, wird eingeklappt. */
  .nav[data-js="an"] .nav__schalter { display: inline-flex; align-items: center; gap: 10px; }
  .nav[data-js="an"] .nav__liste {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    width: auto;
    border-bottom: var(--naht) solid var(--kupfer);
    padding: var(--s2) var(--rand) var(--s4);
  }
  .nav[data-js="an"] .nav__liste[data-offen="true"] { display: flex; }
  .nav__link {
    padding: 16px 0; font-size: 0.8rem;
    border-bottom: 1px solid var(--graphit-linie);
    border-left: var(--naht) solid transparent; padding-left: 0;
  }
  .nav__link:hover, .nav__link[aria-current="page"] {
    border-bottom-color: var(--graphit-linie);
    border-left-color: var(--kupfer); padding-left: 12px;
  }
  .nav .kopf__cta { display: none; }
  .nav__liste .nav__cta-mobil { display: block; }
}
@media (min-width: 1151px) { .nav__cta-mobil { display: none; } }

/* ---------- 8. Schaltflächen: kantig, mit Kupfernaht --------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--schrift); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 17px 26px;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Primär: Bone-Fläche, Graphit-Text, Kupfernaht als linke Kante */
.knopf--primaer {
  background: var(--bone); color: var(--graphit);
  border-left: var(--naht) solid var(--kupfer);
}
.knopf--primaer:hover { background: #FFFFFF; }

/* Sekundär auf dunklem Grund */
.knopf--sekundaer {
  background: transparent; color: var(--bone);
  border: 1px solid var(--stein);
  border-left: var(--naht) solid var(--kupfer);
}
.knopf--sekundaer:hover { border-color: var(--bone); background: rgba(242,239,233,.06); }

/* Sekundär auf hellem Grund */
.hell .knopf--sekundaer { color: var(--graphit); border-color: var(--stein); }
.hell .knopf--sekundaer:hover { border-color: var(--graphit); background: rgba(28,29,31,.05); }

/* Primär auf hellem Grund: Graphit-Fläche */
.hell .knopf--primaer {
  background: var(--graphit); color: var(--bone);
  border-left: var(--naht) solid var(--kupfer);
}
.hell .knopf--primaer:hover { background: #000000; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Textlink mit Kupfermarker */
.textlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid var(--kupfer); padding-bottom: 3px;
}
.textlink:hover { border-bottom-width: var(--naht); }
.textlink::after { content: "→"; font-family: var(--mono); }

/* ---------- 9. Hero (Vorbild: Markenhandbuch Seite 11) ------------------- */
.hero { background: var(--graphit); border-bottom: 1px solid var(--graphit-linie); }
.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}
.hero__text {
  padding: clamp(48px, 7vw, 104px) clamp(28px, 4vw, 64px) clamp(48px, 7vw, 88px) 0;
  border-right: 1px solid var(--graphit-linie);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__bild {
  position: relative;
  min-height: clamp(320px, 46vw, 620px);
  background: #17181A;
  overflow: hidden;
}
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
/* Kupfernaht als senkrechte Achse zwischen Text und Bildfläche */
.hero__bild::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--naht); background: var(--kupfer); z-index: 2;
}
.hero__text p { max-width: 52ch; }
.hero__text .knopf { padding-inline: 22px; }

@media (max-width: 900px) {
  .hero__raster { grid-template-columns: 1fr; }
  .hero__text { border-right: 0; padding-right: 0; padding-bottom: var(--s5); }
  .hero__bild { min-height: 260px; }
  .hero__bild::before { left: 0; top: 0; bottom: auto; right: 0; width: auto; height: var(--naht); }
}

/* ---------- 10. Kennzahlenzeile ------------------------------------------ */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  border-top: 1px solid var(--graphit-linie);
}
.kennzahl {
  padding: var(--s4) var(--s3) var(--s4) 0;
  border-right: 1px solid var(--graphit-linie);
}
.kennzahl:last-child { border-right: 0; }
.kennzahl__wert {
  font-family: var(--schrift); font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -0.03em;
  line-height: 1.05; margin: 0 0 10px;
}
.kennzahl__wert .mono { font-weight: 400; }
.kennzahl__text {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stein); margin: 0;
}
@media (max-width: 640px) {
  .kennzahl { border-right: 0; border-bottom: 1px solid var(--graphit-linie); padding-block: var(--s3); }
  .kennzahl:last-child { border-bottom: 0; }
}

/* ---------- 11. Leistungsfelder ------------------------------------------ */
.felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--bone-linie);
  border: 1px solid var(--bone-linie);
}
.feld {
  background: var(--bone); color: var(--graphit);
  padding: var(--s4) var(--s3) var(--s5);
  display: flex; flex-direction: column;
  text-decoration: none;
  position: relative;
  transition: background-color .15s ease;
}
.feld:hover { background: #FFFFFF; }
.feld--dunkel {
  background: var(--graphit); color: var(--bone);
  --text-sekundaer: var(--stein);
  --text-kupfer:    var(--kupfer-auf-dunkel);
  --text-linie:     var(--graphit-linie);
}
.feld--dunkel:hover { background: #232427; }
.feld__nummer {
  font-family: var(--mono); font-weight: 400; font-size: 0.72rem;
  letter-spacing: 0.2em; color: var(--text-kupfer); margin-bottom: var(--s3);
  display: block;
}
.feld h3 { margin-bottom: var(--s2); }
.feld__text { font-size: 0.95rem; line-height: 1.55; color: var(--text-sekundaer); margin: 0 0 var(--s3); }
.feld__marker { margin-top: auto; font-family: var(--mono); font-size: 0.8rem; }
a.feld::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: var(--naht); background: var(--kupfer);
  transition: width .2s ease;
}
a.feld:hover::after, a.feld:focus-visible::after { width: 100%; }

/* ---------- 12. Zweispaltiger Textblock ---------------------------------- */
.spalten {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
/* Trägt eine Spalte eine Bildfläche, werden beide Spalten gleich breit —
   sonst quetscht die schmale Randspalte das Bild zusammen. */
.spalten--bild { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 860px) {
  .spalten, .spalten--bild { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ---------- 13. Ablauf / Prozessachse ------------------------------------ */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ablauf__schritt {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s4) 0;
  border-top: 1px solid var(--text-linie);
}
.ablauf__schritt:last-child { border-bottom: 1px solid var(--text-linie); }
.ablauf__nr {
  font-family: var(--mono); font-weight: 400; font-size: 0.85rem;
  letter-spacing: 0.16em; color: var(--text-kupfer);
  border-left: var(--naht) solid var(--kupfer); padding-left: 14px;
}
.ablauf__schritt h3 { margin-bottom: 10px; }
.ablauf__schritt p { margin: 0; font-size: 0.98rem; }
@media (max-width: 560px) {
  .ablauf__schritt { grid-template-columns: 1fr; gap: var(--s2); }
}

/* ---------- 14. Karten / Merkmalliste ------------------------------------ */
.raster-3 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.raster-2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
.karte {
  border-top: var(--naht) solid var(--kupfer);
  padding-top: var(--s3);
}
.karte h3 { margin-bottom: 10px; }
.karte p { margin: 0; font-size: 0.98rem; }

/* Aufzählung mit Kupfermarker */
.liste { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.liste li {
  position: relative; padding-left: 22px; margin-bottom: 12px;
  font-size: 0.98rem; line-height: 1.55;
}
.liste li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 12px; height: 2px; background: var(--kupfer);
}

/* ---------- 15. Hinweisfeld ---------------------------------------------- */
.hinweis {
  border-left: var(--naht) solid var(--kupfer);
  background: rgba(156, 95, 60, .08);
  padding: var(--s3);
  font-size: 0.95rem;
}
.hell .hinweis { background: rgba(156, 95, 60, .07); }
.hinweis :last-child { margin-bottom: 0; }/* ---------- 16. Datenliste (Impressum, Kontakt) -------------------------- */
.daten { margin: 0; display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 0; }
.daten dt {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-sekundaer);
  padding: 14px 0; border-top: 1px solid var(--text-linie);
}
.daten dd {
  margin: 0; padding: 14px 0; border-top: 1px solid var(--text-linie);
  font-size: 0.98rem;
}
@media (max-width: 620px) {
  .daten { grid-template-columns: 1fr; }
  .daten dd { border-top: 0; padding-top: 0; }
}

/* ---------- 17. Formular -------------------------------------------------- */
.formular { max-width: 720px; }
.feldgruppe { margin-bottom: var(--s4); }
.feldgruppe > legend {
  font-family: var(--schrift); font-weight: 500; font-size: 0.75rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  padding: 0 0 var(--s3); color: var(--text-kupfer);
}
fieldset { border: 0; margin: 0; padding: 0; }

.feldzeile { margin-bottom: var(--s3); }
.feldzeile--paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.feldzeile--paar > .feldzeile { margin-bottom: 0; }

label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
.label-zusatz { font-weight: 400; color: var(--text-sekundaer); font-size: 0.85rem; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  font-family: var(--schrift); font-size: 1rem; color: var(--graphit);
  background: #FFFFFF;
  border: 1px solid var(--stein);
  border-left: var(--naht) solid var(--stein);
  padding: 14px 15px;
  transition: border-color .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--graphit); }
input:focus, select:focus, textarea:focus { border-left-color: var(--kupfer); border-color: var(--graphit); }
textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--graphit) 50%),
                    linear-gradient(135deg, var(--graphit) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.wahl { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.wahl input { margin: 3px 0 0; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--kupfer); }
.wahl label { margin: 0; font-weight: 400; font-size: 0.95rem; }

/* Feldfehler */
.feldfehler {
  display: none;
  font-family: var(--mono); font-size: 0.82rem;
  color: var(--text-kupfer); margin-top: 8px;
  padding-left: 12px; border-left: var(--naht) solid var(--kupfer);
}
[data-fehler="true"] .feldfehler { display: block; }
[data-fehler="true"] input, [data-fehler="true"] select, [data-fehler="true"] textarea {
  border-color: var(--kupfer-auf-hell); border-left-color: var(--kupfer);
}

/* Honigtopf: für Menschen unsichtbar, für Bots sichtbar */
.honigtopf {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Meldungen */
.meldung { padding: var(--s3); margin-bottom: var(--s4); border-left: var(--naht) solid var(--kupfer); }
.meldung--erfolg { background: rgba(28,29,31,.06); }
.meldung--fehler { background: rgba(156,95,60,.10); }
.dunkel .meldung--erfolg { background: rgba(242,239,233,.07); }
.meldung h2 { font-size: 1.3rem; margin-bottom: 10px; }
.meldung :last-child { margin-bottom: 0; }

/* ---------- 18. Bildflächen ---------------------------------------------- */
.bildflaeche { position: relative; background: #17181A; overflow: hidden; }
.bildflaeche img { width: 100%; height: 100%; object-fit: cover; }
.bildflaeche--breit { aspect-ratio: 16 / 9; }
.bildflaeche--hoch { aspect-ratio: 3 / 4; }
.bildflaeche__naht { position: absolute; left: 0; top: 0; bottom: 0; width: var(--naht); background: var(--kupfer); z-index: 2; }
.bildunterschrift {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  color: var(--text-sekundaer); margin-top: 12px;
}

/* ---------- 19. Fußbereich ----------------------------------------------- */
.fuss { background: var(--graphit); color: var(--bone); border-top: var(--naht) solid var(--kupfer); }
.fuss__raster {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-block: var(--s6) var(--s5);
}
@media (max-width: 900px) { .fuss__raster { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.fuss__marke img { height: 42px; width: auto; margin-bottom: var(--s3); }
.fuss h2, .fuss h3 {
  font-family: var(--schrift); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--stein);
  margin-bottom: var(--s3);
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 12px; }
.fuss a { font-size: 0.92rem; text-decoration: none; border-bottom: 1px solid transparent; }
.fuss a:hover { border-bottom-color: var(--kupfer); }
.fuss address { font-style: normal; font-size: 0.92rem; color: var(--stein); line-height: 1.7; }
.fuss__zeile {
  border-top: 1px solid var(--graphit-linie);
  padding-block: var(--s3) var(--s4);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--stein);
}
.fuss__zeile a { text-decoration: none; border-bottom: 1px solid transparent; }
.fuss__zeile a:hover { border-bottom-color: var(--kupfer); }

/* ---------- 20. Seitenkopf für Unterseiten ------------------------------- */
.seitenkopf { background: var(--graphit); border-bottom: 1px solid var(--graphit-linie); }
.seitenkopf__inhalt { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px); max-width: 900px; }
.seitenkopf h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.seitenkopf p { color: var(--stein); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 62ch; margin-bottom: 0; }

/* Brotkrumenpfad */
.pfad { padding-block: var(--s3) 0; }
.pfad ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0; padding: 0;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--stein);
}
.pfad a { text-decoration: none; border-bottom: 1px solid transparent; }
.pfad a:hover { border-bottom-color: var(--kupfer); }
.pfad li + li::before { content: "/ "; color: var(--kupfer-auf-dunkel); }

/* ---------- 21. Aufruf-Abschnitt ----------------------------------------- */
.aufruf { border-top: var(--naht) solid var(--kupfer); }
.aufruf__inhalt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px); align-items: center;
  padding-block: clamp(48px, 6vw, 88px);
}
@media (max-width: 820px) { .aufruf__inhalt { grid-template-columns: 1fr; } }
.aufruf h2 { margin-bottom: var(--s2); }
.aufruf p { margin-bottom: 0; color: var(--text-sekundaer); }/* ---------- 23. Druck ---------------------------------------------------- */
@media print {
  .kopf, .fuss__raster, .aufruf, .sprungmarke { display: none; }
  body { background: #FFF; color: #000; }
}

/* ---------- 24. Hilfsklassen -------------------------------------------
   Ersetzen die früheren style-Attribute im Markup. Eine strikte
   Inhaltsrichtlinie (CSP) mit `style-src 'self'` verbietet Inline-Stile;
   ohne diese Klassen wäre die Seite unter der vorgeschlagenen
   Serverkonfiguration unbrauchbar. */
.klein  { font-size: 0.9rem; }
.mittel { font-size: 0.95rem; }

.abstand-oben        { margin-top: var(--s3); }
.abstand-oben-mittel { margin-top: var(--s4); }
.abstand-oben-gross  { margin-top: var(--s5); }
.abstand-unten-gross { margin-bottom: var(--s5); }
.ohne-abstand-unten  { margin-bottom: 0; }

/* Zwischenüberschrift in Rechtstexten */
.rechtstitel {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.25; margin-top: var(--s5);
}
.rechtstitel:first-child, .rechtstitel.ohne-abstand-oben { margin-top: 0; }

/* mittlere Überschrift zwischen h2 und h3 */
.h-mittel {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1;
}