/* =====================================================================
   DIVA GmbH – Stylesheet
   Gestaltungsidee: das Logo der Visitenkarte (kräftiges Braun, geometrische
   Versalien, Balken unter dem Wortzeichen). Die Seite ist daraus abgeleitet:
   warme Sandflächen, tiefbraune Bänder, ein waagerechter Balken als
   wiederkehrendes Zeichen. Akzent ist ein gedecktes Messinggold.
   ===================================================================== */

/* ------------------------------ 1. Tokens ------------------------------ */
:root {
  /* Braun – aus dem Logo der Visitenkarte */
  --braun-900: #241609;
  --braun-850: #2E1D0E;
  --braun-800: #3B2614;
  --braun-700: #6B4423;   /* Logo-Braun */
  --braun-600: #855634;
  --braun-500: #A06E45;
  --braun-300: #C4A183;

  /* Sand / Papier */
  --sand-50:  #FBF8F3;
  --sand-100: #F5EFE5;
  --sand-200: #EDE3D3;
  --sand-300: #DFD0B8;
  --sand-400: #C9B597;

  /* Messing */
  --gold-600: #A8761F;
  --gold-700: #8A6015;   /* kleine Schrift auf hellem Grund – erreicht 4,5:1 */
  --gold-500: #C8912F;
  --gold-400: #DCAA4B;
  --gold-200: #F0DDB4;

  --weiss: #FFFFFF;

  /* Funktionsfarben – ausschließlich für Status und Fehler */
  --ok:     #2F6E45;
  --ok-bg:  #E6F1E9;
  --warn:   #9A6212;
  --warn-bg:#FBF0DA;
  --err:    #A3271F;
  --err-bg: #F8E7E5;

  /* Rollen */
  --grund:      var(--sand-50);
  --text:       var(--braun-900);
  --text-leise: #6E5C4A;
  --linie:      rgba(107, 68, 35, .18);
  --linie-fest: rgba(107, 68, 35, .30);

  --r:    10px;
  --r-s:  6px;
  --r-l:  16px;

  --schatten-1: 0 1px 2px rgba(36,22,9,.06), 0 2px 8px rgba(36,22,9,.05);
  --schatten-2: 0 2px 6px rgba(36,22,9,.08), 0 12px 32px rgba(36,22,9,.10);
  --schatten-3: 0 4px 12px rgba(36,22,9,.10), 0 24px 60px rgba(36,22,9,.16);

  --display: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --kopf-h: 96px;
  --breite: 1200px;
  --breite-schmal: 780px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@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(--grund);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--braun-700); text-decoration-color: rgba(107,68,35,.35); text-underline-offset: 3px; }
a:hover { color: var(--gold-600); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  color: var(--braun-900);
}
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: clamp(1.85rem, 4vw, 2.85rem); letter-spacing: -.022em; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Zahlen sind durchgängig kräftig und tabellarisch gesetzt */
.zahl, .stat__wert, .preis, .rech-summe__wert, td.num, .obj-fakt__wert {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.02em;
}

::selection { background: var(--gold-200); color: var(--braun-900); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--braun-900); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

.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;
}

/* --------------------------- 3. Layout -------------------------------- */
.wrap {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}
.wrap--schmal { width: min(100% - 2.5rem, var(--breite-schmal)); }

.band { padding: clamp(4rem, 8vw, 7rem) 0; position: relative; }
.band--eng   { padding: clamp(2.75rem, 5vw, 4rem) 0; }
.band--papier  { background: var(--sand-50); }
.band--papier2 { background: var(--sand-100); }
.band--papier3 { background: var(--sand-200); }
.band--tinte   { background: var(--braun-900); }
.band--tinte2  { background: var(--braun-800); }
.band--tinte, .band--tinte2 { color: var(--sand-100); }
.band--tinte h1, .band--tinte h2, .band--tinte h3, .band--tinte h4,
.band--tinte2 h1, .band--tinte2 h2, .band--tinte2 h3, .band--tinte2 h4 { color: var(--weiss); }
/* Nur echte Fließtext-Verweise einfärben. Schaltflächen und Kacheln
   bringen ihre eigene Farbgebung mit – sonst steht Gold auf Gold
   beziehungsweise Gold auf einer weißen Kachel. */
.band--tinte  a:not(.btn):not(.kontakt-k):not(.merkblatt):not(.obj):not(.kachel):not(.logo),
.band--tinte2 a:not(.btn):not(.kontakt-k):not(.merkblatt):not(.obj):not(.kachel):not(.logo) {
  color: var(--gold-400);
}
.band--tinte .leise, .band--tinte2 .leise { color: rgba(245,239,229,.72); }

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

.kopfzeile { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.kopfzeile--mitte { margin-inline: auto; text-align: center; }
.kopfzeile p { font-size: 1.09rem; }

/* Kicker mit Balken – das Logo-Motiv als wiederkehrendes Zeichen */
.kicker {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--display);
  font-size: .84rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--braun-700);
  margin-bottom: 1.1rem;
}
.kicker::before {
  content: ""; width: 42px; height: 3px; background: var(--gold-500); flex: none;
}
.band--tinte .kicker, .band--tinte2 .kicker { color: var(--gold-400); }
.kopfzeile--mitte .kicker { justify-content: center; }

.gitter { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ----------------------------- 4. Logo -------------------------------- */
/* Das Original-Logo der DIVA GmbH als Bilddatei (PNG mit Transparenz).
   Auf dunklem Grund wird die weiße Fassung eingebunden; über dem Hero
   genügt eine Umkehr der Farbwerte, dann bleibt es bei einer Datei. */
.logo {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  flex: none;
}
.logo img {
  display: block;
  height: var(--logo-h, 54px);
  width: auto;
}
.logo--gross img { height: clamp(84px, 17vw, 210px); }

.logo-zusatz {
  font-family: var(--body);
  font-size: 11px; font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-leise);
  margin-top: 4px;
}

/* --------------------------- 5. Kopfleiste ---------------------------- */
.hinweis {
  background: var(--braun-700); color: var(--sand-100);
  font-size: .9rem; text-align: center; padding: .55rem 1rem;
  display: none;
}
.hinweis.an { display: block; }
.hinweis strong { color: var(--gold-400); }

.kopf {
  position: sticky; top: 0; z-index: 90;
  height: var(--kopf-h);
  /* stretch statt center: so reicht die Innenspalte über die volle Höhe
     und Ausklappmenüs beginnen unterhalb der Leiste, nicht in ihr. */
  display: flex; align-items: stretch;
  background: rgba(251,248,243,.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.kopf__inner {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
}
.kopf.gescrollt { border-bottom-color: var(--linie); box-shadow: var(--schatten-1); }

/* Über dem Hero transparent und hell */
.kopf--ueber {
  position: fixed; left: 0; right: 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Über dem Hero wird die dunkle Fassung umgekehrt – eine Datei genügt. */
.kopf--ueber:not(.gescrollt) .logo img { filter: invert(1) brightness(1.12); }
.kopf--ueber .nav > a:not(.btn), .kopf--ueber .nav__knopf { color: var(--sand-100); }
.kopf--ueber .burger span { background: var(--weiss); }
.kopf--ueber.gescrollt {
  position: fixed;
  background: rgba(251,248,243,.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.kopf--ueber.gescrollt .nav > a:not(.btn), .kopf--ueber.gescrollt .nav__knopf { color: var(--braun-800); }
.kopf--ueber.gescrollt .burger span { background: var(--braun-800); }

.kopf .logo { --logo-h: 54px; }

/* Die Leiste füllt die volle Kopfhöhe, damit Ausklappmenüs
   sauber unterhalb der Leiste beginnen. */
.nav { margin-left: auto; align-self: stretch; display: flex; align-items: center; gap: .35rem; }
.nav > a:not(.btn), .nav__knopf {
  font-family: var(--display);
  font-size: .97rem; font-weight: 500;
  color: var(--braun-800);
  text-decoration: none;
  padding: .55rem .8rem; border-radius: var(--r-s);
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.nav > a:not(.btn):hover, .nav__knopf:hover { background: rgba(107,68,35,.09); color: var(--braun-700); }
.nav > a[aria-current="page"] {
  color: var(--braun-700); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--gold-500);
  border-radius: 0;
}

/* Ausklappmenü – die Gruppe füllt die volle Höhe der Kopfleiste aus,
   damit das Menü darunter aufklappt und nicht in die Leiste hineinragt. */
.nav__grp {
  position: relative;
  align-self: stretch;
  display: flex; align-items: center;
}
.nav__pfeil { width: 9px; height: 9px; transition: transform .2s; }
.nav__grp.offen .nav__pfeil { transform: rotate(180deg); }
.nav__auf {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 265px; padding: .5rem;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--schatten-3);
  display: none; flex-direction: column;
}
.nav__grp.offen .nav__auf { display: flex; }
.nav__auf a {
  display: block; padding: .6rem .7rem; border-radius: var(--r-s);
  color: var(--braun-800); text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: .96rem;
}
.nav__auf a small {
  display: block; font-family: var(--body); font-weight: 400;
  font-size: .8rem; color: var(--text-leise); line-height: 1.4; margin-top: 1px;
}
.nav__auf a:hover { background: var(--sand-100); color: var(--braun-700); }

.kopf .btn { margin-left: .4rem; }

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px; padding: 0 8px;
}
.burger span {
  display: block; height: 2px; background: var(--braun-800); border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.burger.offen span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.offen span:nth-child(2) { opacity: 0; }
.burger.offen span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: flex; }
  .nav { align-self: auto; }
  .nav__grp { align-self: auto; display: block; }
  .nav {
    position: fixed; inset: var(--kopf-h) 0 auto 0;
    background: var(--sand-50);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-3);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem 1.25rem 1.75rem;
    max-height: calc(100vh - var(--kopf-h)); overflow-y: auto;
    display: none;
  }
  .nav.offen { display: flex; }
  .kopf--ueber .nav > a:not(.btn), .kopf--ueber .nav__knopf { color: var(--braun-800); }
  .nav > a:not(.btn), .nav__knopf { padding: .8rem .5rem; font-size: 1.05rem; width: 100%; justify-content: space-between; }
  .nav__auf {
    position: static; display: flex; box-shadow: none; border: 0;
    border-left: 2px solid var(--gold-500); border-radius: 0;
    margin: 0 0 .5rem .5rem; padding: 0 0 0 .75rem;
    max-height: 0; overflow: hidden; transition: max-height .3s;
  }
  .nav__grp.offen .nav__auf { max-height: 460px; }
  .kopf .btn { margin: .75rem 0 0; width: 100%; justify-content: center; }
}

/* --------------------------- 6. Schaltflächen ------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--display); font-size: 1rem; font-weight: 600;
  letter-spacing: .005em;
  padding: .85rem 1.6rem;
  border-radius: var(--r-s); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--gold {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--braun-900);
  box-shadow: 0 2px 0 var(--gold-600);
}
.btn--gold:hover { background: var(--gold-400); border-color: var(--gold-400); color: var(--braun-900); }

.btn--braun {
  background: var(--braun-700); border-color: var(--braun-700); color: var(--weiss);
}
.btn--braun:hover { background: var(--braun-800); border-color: var(--braun-800); color: var(--weiss); }

.btn--linie {
  background: transparent; border-color: var(--linie-fest); color: var(--braun-800);
}
.btn--linie:hover { border-color: var(--braun-700); background: rgba(107,68,35,.06); color: var(--braun-700); }

.btn--hell {
  background: transparent; border-color: rgba(255,255,255,.45); color: var(--weiss);
}
.btn--hell:hover { background: rgba(255,255,255,.14); border-color: var(--weiss); color: var(--weiss); }

.btn--klein { padding: .55rem 1.05rem; font-size: .9rem; }
.btn--gross { padding: 1.05rem 2.1rem; font-size: 1.08rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-reihe { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ------------------------------ 7. Hero ------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  padding: calc(var(--kopf-h) + 3rem) 0 3.25rem;
  overflow: hidden;
  background: var(--braun-900);
  isolation: isolate;
}
.hero__video, .hero__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
/* Grundabdunklung über dem gesamten Video, damit Kopfleiste und Logo
   in jeder Einstellung hell lesbar bleiben. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(36,22,9,.62) 0%, rgba(36,22,9,.18) 26%, rgba(36,22,9,.16) 46%, rgba(36,22,9,.78) 100%);
}
.hero__inner { position: relative; width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
/* Zusätzlicher Abdunkler direkt hinter dem Textblock – er sitzt immer dort,
   wo auch die Schrift steht, unabhängig von der Fensterhöhe. */
.hero__text { position: relative; max-width: 44rem; }
.hero__text::before {
  content: ""; position: absolute;
  inset: -2.5rem -3rem -2rem -3rem;
  background: radial-gradient(120% 130% at 20% 60%, rgba(36,22,9,.80) 0%, rgba(36,22,9,.55) 45%, rgba(36,22,9,0) 100%);
  z-index: -1; pointer-events: none;
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--display); font-size: .88rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-400); margin-bottom: 1.35rem;
}
.hero__kicker::before { content: ""; width: 48px; height: 3px; background: var(--gold-500); }
.hero h1 { color: var(--weiss); text-shadow: 0 2px 24px rgba(36,22,9,.45); margin-bottom: .38em; }
.hero__lead {
  font-size: clamp(1.06rem, 1.7vw, 1.24rem);
  color: rgba(255,255,255,.94);
  max-width: 40rem; margin-bottom: 0;
  text-shadow: 0 1px 12px rgba(36,22,9,.55);
}
.hero .btn-reihe { margin: 3rem 0; gap: 1rem; }

/* Kennzahlen unter dem Hero-Text */
.hero__zahlen {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid rgba(255,255,255,.24);
  padding-top: 1.4rem;
}
.hero__zahl {
  padding-right: clamp(1.5rem, 4vw, 3.25rem);
  margin-right: clamp(1.5rem, 4vw, 3.25rem);
  border-right: 1px solid rgba(255,255,255,.20);
}
.hero__zahl:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__zahl b {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1;
  color: var(--weiss); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.hero__zahl span {
  display: block; font-size: .84rem; margin-top: .4rem;
  color: rgba(255,255,255,.80); letter-spacing: .02em;
}

/* Video-Abbinder: am Ende des Trailers dunkelt das Bild ab und das Logo
   blendet mittig ein – als echter Text, nicht als eingebranntes Bild.
   Damit nicht zwei Absender gleichzeitig sprechen, tritt der Textblock
   für diese Sekunden zurück. */
.hero__text { transition: opacity .5s; }
.hero.abbinder .hero__text { opacity: .10; }

.hero__sting {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; text-align: center; padding: 1.5rem;
  background: rgba(36,22,9,.62);
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease, visibility .55s;
  pointer-events: none;
}
.hero.abbinder .hero__sting { opacity: 1; visibility: visible; }
.hero__sting .logo { transform: translateY(10px); transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.hero.abbinder .hero__sting .logo { transform: none; }
.hero__sting-zusatz {
  font-family: var(--body); font-size: .88rem; font-weight: 500;
  letter-spacing: .06em; color: rgba(255,255,255,.80);
}
@media (max-width: 620px) { .hero__sting-zusatz { font-size: .74rem; } }

/* Steht am rechten Rand der Inhaltsspalte, damit es nie mit den
   Kennzahlen darunter kollidiert. Auf schmalen Fenstern entfällt es. */
.hero__runter {
  position: absolute; z-index: 3;
  right: max(1.25rem, calc((100vw - var(--breite)) / 2));
  bottom: 3.25rem; left: auto; transform: none;
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.55);
  border-radius: 14px; background: none; cursor: pointer;
  display: grid; place-items: start center; padding-top: 7px;
}
@media (max-width: 900px) { .hero__runter { display: none; } }
.hero__runter::after {
  content: ""; width: 3px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.9);
  animation: rad 1.9s ease-in-out infinite;
}
@keyframes rad {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(13px); opacity: 0; }
}
.hero__runter:hover { border-color: #fff; }

@media (max-width: 700px) {
  /* Auf dem Telefon darf die Leiste nicht zu viel Bildhöhe kosten */
  :root { --kopf-h: 74px; }
  .kopf .logo { --logo-h: 42px; }
  .fuss .logo { --logo-h: 62px; }
}

@media (max-width: 620px) {
  .hero { min-height: 88vh; padding-bottom: 2.5rem; }
  .hero__zahl { padding-right: 1.1rem; margin-right: 1.1rem; }
  .hero__zahl b { font-size: 1.45rem; }
  .hero__zahl span { font-size: .76rem; }
}

/* Kleiner Seitenkopf für Unterseiten */
.seitenkopf {
  position: relative;
  background: var(--braun-900);
  color: var(--sand-100);
  padding: calc(var(--kopf-h) + 3.5rem) 0 3.5rem;
  overflow: hidden;
}
.seitenkopf__bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .30; z-index: 0;
}
.seitenkopf::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(36,22,9,.94) 0%, rgba(36,22,9,.70) 55%, rgba(36,22,9,.45) 100%);
}
.seitenkopf .wrap { position: relative; z-index: 2; }
.seitenkopf h1 { color: var(--weiss); font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.seitenkopf p { color: rgba(255,255,255,.88); max-width: 52ch; font-size: 1.08rem; }
.seitenkopf .kicker { color: var(--gold-400); }

.brotkrumen {
  font-size: .85rem; color: rgba(255,255,255,.68);
  margin-bottom: 1.2rem; display: flex; gap: .5rem; flex-wrap: wrap;
}
.brotkrumen a { color: rgba(255,255,255,.82); text-decoration: none; }
.brotkrumen a:hover { color: var(--gold-400); }

/* ------------------------- 8. Leistungskacheln ------------------------ */
.kachel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 268px; padding: 1.5rem;
  border-radius: var(--r); border: 1px solid var(--linie);
  background: var(--weiss);
  color: var(--braun-900); text-decoration: none;
  isolation: isolate;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.kachel:hover, .kachel:focus-visible { transform: translateY(-4px); box-shadow: var(--schatten-3); border-color: transparent; }
.kachel__bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; opacity: 0; transform: scale(1.06);
  transition: opacity .4s, transform .6s cubic-bezier(.2,.7,.3,1);
}
.kachel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(180deg, rgba(36,22,9,.30) 0%, rgba(36,22,9,.60) 55%, rgba(36,22,9,.88) 100%);
  transition: opacity .4s;
}
.kachel:hover .kachel__bild, .kachel:focus-visible .kachel__bild { opacity: 1; transform: scale(1); }
.kachel:hover::after, .kachel:focus-visible::after { opacity: 1; }
.kachel:hover, .kachel:focus-visible { color: var(--weiss); }
.kachel:hover h3, .kachel:focus-visible h3 { color: var(--weiss); }
.kachel:hover p, .kachel:focus-visible p { color: rgba(255,255,255,.90); }

.kachel__nr {
  font-family: var(--display); font-weight: 700; font-size: .8rem;
  letter-spacing: .14em; color: var(--gold-700); margin-bottom: auto;
}
.kachel:hover .kachel__nr, .kachel:focus-visible .kachel__nr { color: var(--gold-400); }
.kachel h3 { margin: 0 0 .35rem; font-size: 1.28rem; transition: color .3s; }
.kachel p  { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--text-leise); transition: color .3s; }
.kachel__pfeil {
  position: absolute; top: 1.3rem; right: 1.3rem; width: 26px; height: 26px;
  color: var(--braun-500);
  animation: wink 2.6s ease-in-out infinite;
  transition: color .3s;
}
.kachel:hover .kachel__pfeil { color: var(--gold-400); }
@keyframes wink {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(3px,-3px); }
}
@media (hover: none) {
  .kachel__bild { opacity: 1; transform: none; }
  .kachel::after { opacity: 1; }
  .kachel { color: var(--weiss); border-color: transparent; }
  .kachel h3 { color: var(--weiss); }
  .kachel p  { color: rgba(255,255,255,.90); }
  .kachel__nr { color: var(--gold-400); }
}

/* ----------------------------- 9. Karten ------------------------------ */
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: clamp(1.4rem, 2.4vw, 2rem);
}
.karte--flach { background: transparent; border: 0; padding: 0; }
.karte--sand  { background: var(--sand-100); }
.karte--tinte { background: var(--braun-800); border-color: rgba(255,255,255,.14); color: var(--sand-100); }
.karte--tinte h3 { color: var(--weiss); }
.karte h3 { margin-bottom: .55rem; }
.karte > p:last-child { margin-bottom: 0; }

.karte__ikon {
  width: 46px; height: 46px; border-radius: var(--r-s);
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--sand-200); color: var(--braun-700);
}
.karte__ikon svg { width: 23px; height: 23px; }
.karte--tinte .karte__ikon { background: rgba(200,145,47,.20); color: var(--gold-400); }

/* Leistungsblock mit Liste */
.leistung {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
}
.leistung__kopf {
  padding: 1.4rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--linie);
  background: var(--sand-50);
}
.leistung__kopf h3 { margin: 0; }
.leistung__kopf p { margin: .3rem 0 0; font-size: .92rem; color: var(--text-leise); }
.leistung__liste { padding: 1.25rem 1.5rem 1.5rem; margin: 0; list-style: none; flex: 1; }
.leistung__liste li {
  position: relative; padding-left: 1.7rem; margin-bottom: .62rem;
  font-size: .96rem; line-height: 1.55;
}
.leistung__liste li:last-child { margin-bottom: 0; }
.leistung__liste li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 11px; height: 2px; background: var(--gold-500);
}

/* Häkchenliste */
.haken { list-style: none; padding: 0; margin: 0; }
.haken li {
  position: relative; padding-left: 2rem; margin-bottom: .7rem; line-height: 1.6;
}
.haken li::before {
  content: ""; position: absolute; left: 0; top: .38em;
  width: 15px; height: 8px;
  border-left: 2.5px solid var(--gold-500); border-bottom: 2.5px solid var(--gold-500);
  transform: rotate(-45deg);
}
.haken--hell li::before { border-color: var(--gold-400); }

/* ---------------------------- 10. Kennzahlen -------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--sand-50); padding: 1.6rem 1.3rem; text-align: center; }
.band--tinte .stat, .band--tinte2 .stat { background: var(--braun-800); }
.stat__wert { display: block; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; color: var(--braun-700); }
.band--tinte .stat__wert, .band--tinte2 .stat__wert { color: var(--gold-400); }
.stat__text { display: block; font-size: .87rem; color: var(--text-leise); margin-top: .55rem; line-height: 1.45; }
.band--tinte .stat__text, .band--tinte2 .stat__text { color: rgba(245,239,229,.75); }

/* ------------------------------ 11. Ablauf ---------------------------- */
.ablauf { counter-reset: schritt; display: grid; gap: 0; }
.schritt {
  counter-increment: schritt;
  display: grid; grid-template-columns: 68px 1fr; gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--linie);
}
.schritt:last-child { border-bottom: 0; }
.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--display); font-weight: 700; font-size: 1.55rem;
  color: var(--gold-600); font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.band--tinte .schritt { border-color: rgba(255,255,255,.14); }
.band--tinte .schritt::before { color: var(--gold-400); }
.schritt h3 { margin-bottom: .3rem; font-size: 1.18rem; }
.schritt p { margin: 0; color: var(--text-leise); font-size: .96rem; }
.band--tinte .schritt p { color: rgba(245,239,229,.78); }
@media (max-width: 560px) { .schritt { grid-template-columns: 46px 1fr; gap: 1rem; } }

/* ------------------------------- 12. FAQ ------------------------------ */
.faq { border-top: 1px solid var(--linie); }
.faq__pos { border-bottom: 1px solid var(--linie); }
.faq__frage {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.35rem .25rem;
  font-family: var(--display); font-size: 1.08rem; font-weight: 600;
  color: var(--braun-900); line-height: 1.4;
}
.faq__frage:hover { color: var(--braun-700); }
.faq__zeichen {
  flex: none; width: 22px; height: 22px; margin-top: .18em; position: relative;
}
.faq__zeichen::before, .faq__zeichen::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--gold-600);
  transform: translate(-50%, -50%); transition: transform .25s, opacity .25s;
}
.faq__zeichen::before { width: 15px; height: 2.5px; }
.faq__zeichen::after  { width: 2.5px; height: 15px; }
.faq__pos.offen .faq__zeichen::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__antwort {
  overflow: hidden; max-height: 0; transition: max-height .32s cubic-bezier(.2,.7,.3,1);
}
.faq__pos.offen .faq__antwort { max-height: 640px; }
.faq__antwort > div { padding: 0 3rem 1.5rem .25rem; color: var(--text-leise); }
.band--tinte .faq, .band--tinte .faq__pos { border-color: rgba(255,255,255,.15); }
.band--tinte .faq__frage { color: var(--weiss); }
.band--tinte .faq__antwort > div { color: rgba(245,239,229,.80); }

/* -------------------------- 13. Objekte / Immobilien ------------------ */
.obj-filter {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: 1rem 1.15rem; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--r);
  margin-bottom: 2rem;
}
.obj-filter__gruppe { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  font-family: var(--display); font-size: .9rem; font-weight: 500;
  padding: .45rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--linie-fest); background: var(--weiss);
  color: var(--braun-800); cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.chip:hover { border-color: var(--braun-700); }
.chip[aria-pressed="true"], .chip.an {
  background: var(--braun-700); border-color: var(--braun-700); color: var(--weiss);
}
.obj-filter__zahl { margin-left: auto; font-size: .9rem; color: var(--text-leise); }

.obj-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1000px) { .obj-gitter { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .obj-gitter { grid-template-columns: 1fr; } }

.obj {
  display: flex; flex-direction: column;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); overflow: hidden; text-decoration: none;
  color: var(--braun-900);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.obj:hover { transform: translateY(-4px); box-shadow: var(--schatten-3); color: var(--braun-900); }
.obj__bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-200); }
.obj__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.obj:hover .obj__bild img { transform: scale(1.05); }
.obj__marke {
  position: absolute; top: .8rem; left: .8rem;
  font-family: var(--display); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: var(--r-s);
  background: rgba(36,22,9,.86); color: var(--weiss);
  backdrop-filter: blur(4px);
}
.obj__marke--frei       { background: var(--gold-500); color: var(--braun-900); }
.obj__marke--reserviert { background: var(--warn); color: #fff; }
.obj__marke--vermietet  { background: rgba(36,22,9,.86); color: rgba(255,255,255,.9); }
.obj__typ {
  position: absolute; top: .8rem; right: .8rem;
  font-family: var(--display); font-size: .74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: var(--r-s);
  background: rgba(255,255,255,.92); color: var(--braun-800);
}
.obj__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.obj__ort {
  font-size: .84rem; color: var(--gold-700); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; font-family: var(--display);
  margin-bottom: .4rem;
}
.obj__titel { font-size: 1.2rem; margin: 0 0 .3rem; line-height: 1.25; }
.obj__adresse { font-size: .93rem; color: var(--text-leise); margin: 0 0 1rem; }
.obj__fakten {
  display: flex; gap: 0; margin-top: auto;
  border-top: 1px solid var(--linie); padding-top: .9rem;
}
.obj__fakt { flex: 1; text-align: center; border-right: 1px solid var(--linie); }
.obj__fakt:last-child { border-right: 0; }
.obj-fakt__wert { display: block; font-size: 1.15rem; color: var(--braun-800); }
.obj__fakt small { display: block; font-size: .74rem; color: var(--text-leise); margin-top: .1rem; letter-spacing: .03em; }

.obj-leer {
  grid-column: 1 / -1; text-align: center; padding: 3.5rem 1rem;
  background: var(--sand-100); border: 1px dashed var(--linie-fest); border-radius: var(--r);
  color: var(--text-leise);
}

/* Objektdetail */
.galerie { display: grid; grid-template-columns: 2fr 1fr; gap: .75rem; margin-bottom: 2.5rem; }
@media (max-width: 760px) { .galerie { grid-template-columns: 1fr; } }
.galerie__haupt {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden;
  background: var(--sand-200); cursor: zoom-in; border: 0; padding: 0; width: 100%;
}
.galerie__haupt img { width: 100%; height: 100%; object-fit: cover; }
.galerie__neben { display: grid; grid-template-rows: repeat(2, 1fr); gap: .75rem; }
@media (max-width: 760px) { .galerie__neben { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); } }
.galerie__klein {
  position: relative; border-radius: var(--r); overflow: hidden; background: var(--sand-200);
  cursor: zoom-in; border: 0; padding: 0; aspect-ratio: 3/2;
}
.galerie__klein img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.galerie__klein:hover img { transform: scale(1.06); }
.galerie__mehr {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(36,22,9,.66); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.2rem;
}

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(20,12,5,.94); place-items: center; padding: 2rem;
}
.lightbox.offen { display: grid; }
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: var(--r-s); }
.lightbox__zu, .lightbox__vor, .lightbox__zurueck {
  position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  font-size: 1.4rem; line-height: 1;
}
.lightbox__zu { top: 1.5rem; right: 1.5rem; }
.lightbox__zurueck { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__vor { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__zu:hover, .lightbox__vor:hover, .lightbox__zurueck:hover { background: rgba(255,255,255,.25); }
.lightbox__zaehler {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.8); font-family: var(--display); font-variant-numeric: tabular-nums;
}

.eckdaten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--linie); border: 1px solid var(--linie);
  border-radius: var(--r); overflow: hidden; margin-bottom: 2rem;
}
.eckdaten div { background: var(--weiss); padding: 1.1rem 1.2rem; }
.eckdaten dt { font-size: .8rem; color: var(--text-leise); letter-spacing: .04em; text-transform: uppercase; margin-bottom: .25rem; }
.eckdaten dd {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.16rem;
  color: var(--braun-800); font-variant-numeric: tabular-nums;
}

/* ------------------------ 14. Verwaltungsrechner ---------------------- */
.rechner { display: grid; grid-template-columns: 1fr 400px; gap: 2rem; align-items: start; }
@media (max-width: 1040px) { .rechner { grid-template-columns: 1fr; } }

.rech-schritt {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.5rem 1.6rem; margin-bottom: 1.25rem;
}
.rech-schritt__kopf {
  display: flex; align-items: center; gap: .85rem; margin-bottom: 1.35rem;
}
.rech-schritt__nr {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--braun-700); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .92rem;
}
.rech-schritt__kopf h3 { margin: 0; font-size: 1.16rem; }

.feld { margin-bottom: 1.15rem; }
.feld:last-child { margin-bottom: 0; }
.feld > label, .feld__label {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: .93rem; margin-bottom: .45rem; color: var(--braun-800);
}
.feld small { display: block; font-size: .82rem; color: var(--text-leise); margin-top: .3rem; line-height: 1.45; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], select, textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--text);
  background: var(--sand-50); border: 1.5px solid var(--linie-fest);
  border-radius: var(--r-s); padding: .72rem .9rem;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
input[type="number"] { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold-500); background: var(--weiss);
  box-shadow: 0 0 0 3px rgba(200,145,47,.20);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B4423' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px;
  padding-right: 2.5rem;
}

/* Zahlenfeld mit Plus/Minus */
.zaehler { display: flex; align-items: stretch; max-width: 190px; }
.zaehler button {
  flex: none; width: 42px; border: 1.5px solid var(--linie-fest); background: var(--sand-100);
  color: var(--braun-800); cursor: pointer; font-size: 1.25rem; line-height: 1;
  font-family: var(--display); font-weight: 600;
}
.zaehler button:first-child { border-radius: var(--r-s) 0 0 var(--r-s); border-right: 0; }
.zaehler button:last-child  { border-radius: 0 var(--r-s) var(--r-s) 0; border-left: 0; }
.zaehler button:hover { background: var(--sand-200); color: var(--braun-700); }
.zaehler input { border-radius: 0; text-align: center; }

/* Auswahlkarten (Objektart, Umfang) */
.wahl { display: grid; gap: .6rem; }
.wahl--2 { grid-template-columns: repeat(2, 1fr); }
.wahl--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .wahl--2, .wahl--3 { grid-template-columns: 1fr; } }
.wahl label {
  display: block; cursor: pointer; position: relative;
  border: 1.5px solid var(--linie-fest); border-radius: var(--r-s);
  padding: .85rem 1rem; background: var(--sand-50);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl label:hover { border-color: var(--braun-600); }
.wahl label b {
  display: block; font-family: var(--display); font-weight: 600; font-size: .98rem;
  color: var(--braun-900);
}
.wahl label small { display: block; font-size: .81rem; color: var(--text-leise); margin-top: .15rem; line-height: 1.4; }
.wahl input:checked + b, .wahl label:has(input:checked) b { color: var(--braun-700); }
.wahl label:has(input:checked) {
  border-color: var(--gold-500); background: var(--weiss);
  box-shadow: 0 0 0 3px rgba(200,145,47,.18);
}
.wahl input:focus-visible + b { outline: 3px solid var(--gold-500); outline-offset: 3px; }

/* Ziehbare Zusatzleistungen */
.zieh-bereich { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 760px) { .zieh-bereich { grid-template-columns: 1fr; } }
.zieh-spalte__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--display); font-weight: 600; font-size: .88rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise);
  margin-bottom: .7rem;
}
.zieh-liste {
  display: flex; flex-direction: column; gap: .5rem;
  min-height: 130px; padding: .5rem;
  border: 1.5px dashed var(--linie-fest); border-radius: var(--r-s);
  background: var(--sand-50);
  transition: border-color .2s, background .2s;
}
.zieh-liste.ziel-aktiv { border-color: var(--gold-500); background: var(--gold-200); }
.zieh-liste__leer {
  margin: auto; text-align: center; font-size: .87rem; color: var(--text-leise); padding: 1rem;
}

.zieh {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .8rem; background: var(--weiss);
  border: 1.5px solid var(--linie); border-radius: var(--r-s);
  cursor: grab; user-select: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.zieh:hover { border-color: var(--braun-600); box-shadow: var(--schatten-1); }
.zieh:active { cursor: grabbing; }
.zieh.zieht { opacity: .45; transform: scale(.98); }
.zieh__griff { flex: none; width: 14px; color: var(--braun-300); }
.zieh__griff svg { width: 14px; height: 18px; }
.zieh__text { flex: 1; min-width: 0; }
.zieh__text b { display: block; font-family: var(--display); font-weight: 600; font-size: .95rem; line-height: 1.25; }
.zieh__text small { display: block; font-size: .79rem; color: var(--text-leise); line-height: 1.35; }
.zieh__preis {
  flex: none; font-family: var(--display); font-weight: 700; font-size: .95rem;
  color: var(--braun-700); font-variant-numeric: tabular-nums;
}
.zieh__knopf {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-s);
  border: 1.5px solid var(--linie-fest); background: var(--sand-50);
  color: var(--braun-700); cursor: pointer; font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center;
}
.zieh__knopf:hover { background: var(--braun-700); border-color: var(--braun-700); color: #fff; }
.zieh--gewaehlt { border-color: var(--gold-500); background: var(--weiss); }

/* Ergebnisspalte */
.rech-summe {
  position: sticky; top: calc(var(--kopf-h) + 1.25rem);
  background: var(--braun-900); color: var(--sand-100);
  border-radius: var(--r); padding: 1.6rem 1.6rem 1.75rem;
  box-shadow: var(--schatten-3);
}
@media (max-width: 1040px) { .rech-summe { position: static; } }
.rech-summe h3 { color: var(--weiss); font-size: 1.15rem; margin-bottom: 1.1rem; }
.rech-summe__wert {
  font-size: clamp(2.4rem, 6vw, 3.1rem); line-height: 1; color: var(--gold-400);
  display: block; margin-bottom: .2rem;
}
.rech-summe__einheit { font-size: .92rem; color: rgba(245,239,229,.72); display: block; margin-bottom: 1.3rem; }
.rech-summe__brutto {
  font-size: .89rem; color: rgba(245,239,229,.72);
  padding-top: .9rem; margin-top: .9rem; border-top: 1px solid rgba(255,255,255,.16);
}
.rech-summe__brutto b { color: var(--sand-100); font-variant-numeric: tabular-nums; }

.rech-posten { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .89rem; }
.rech-posten li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .42rem 0; border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(245,239,229,.86);
}
.rech-posten li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.rech-posten li.rech-posten--rabatt span { color: var(--gold-400); }
.rech-posten li.rech-posten--summe {
  border-bottom: 0; border-top: 1.5px solid rgba(255,255,255,.30);
  margin-top: .35rem; padding-top: .7rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--weiss);
}

.rech-hinweis {
  font-size: .82rem; color: rgba(245,239,229,.66); line-height: 1.55;
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.14);
}

/* Schnellpakete */
.pakete { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
@media (max-width: 860px) { .pakete { grid-template-columns: repeat(2, 1fr); } }
.paket {
  text-align: left; padding: .85rem 1rem; cursor: pointer;
  background: var(--sand-50); border: 1.5px solid var(--linie-fest);
  border-radius: var(--r-s); transition: border-color .18s, background .18s;
}
.paket:hover { border-color: var(--gold-500); background: var(--weiss); }
.paket b { display: block; font-family: var(--display); font-weight: 600; font-size: .96rem; color: var(--braun-900); }
.paket small { display: block; font-size: .79rem; color: var(--text-leise); margin-top: .1rem; line-height: 1.35; }

/* --------------------------- 15. Formulare ---------------------------- */
.form-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .form-gitter { grid-template-columns: 1fr; } }
.form-gitter .voll { grid-column: 1 / -1; }

.honig { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.zustimmung {
  display: flex; gap: .8rem; align-items: flex-start;
  font-size: .88rem; line-height: 1.55; color: var(--text-leise);
}
.zustimmung input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin-top: .18em; accent-color: var(--braun-700);
}

.meldung {
  padding: .95rem 1.15rem; border-radius: var(--r-s); font-size: .93rem;
  margin-top: 1rem; display: none; line-height: 1.55;
}
.meldung.an { display: block; }
.meldung--ok  { background: var(--ok-bg);  color: var(--ok);  border: 1px solid rgba(47,110,69,.28); }
.meldung--err { background: var(--err-bg); color: var(--err); border: 1px solid rgba(163,39,31,.28); }
.meldung--info{ background: var(--warn-bg);color: var(--warn);border: 1px solid rgba(154,98,18,.28); }

/* Dringlichkeits- und Kategorie-Chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips label {
  position: relative; cursor: pointer;
  font-family: var(--display); font-size: .9rem; font-weight: 500;
  padding: .5rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--linie-fest); background: var(--sand-50); color: var(--braun-800);
  transition: background .18s, border-color .18s, color .18s;
}
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips label:hover { border-color: var(--braun-700); }
.chips label:has(input:checked) { background: var(--braun-700); border-color: var(--braun-700); color: #fff; }
.chips label.dringend:has(input:checked) { background: var(--err); border-color: var(--err); }

/* Foto-Ablage */
.fotos {
  border: 1.5px dashed var(--linie-fest); border-radius: var(--r-s);
  padding: 1.5rem; text-align: center; background: var(--sand-50);
  transition: border-color .2s, background .2s; cursor: pointer;
}
.fotos:hover, .fotos.ziel-aktiv { border-color: var(--gold-500); background: var(--gold-200); }
.fotos__text { font-size: .92rem; color: var(--text-leise); }
.fotos__text b { color: var(--braun-700); font-family: var(--display); }
.foto-liste { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.foto-liste figure {
  position: relative; margin: 0; width: 96px; height: 96px;
  border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--linie);
}
.foto-liste img { width: 100%; height: 100%; object-fit: cover; }
.foto-liste button {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
  border-radius: 50%; border: 0; background: rgba(36,22,9,.82); color: #fff;
  cursor: pointer; font-size: .8rem; line-height: 1; display: grid; place-items: center;
}

/* ---------------- 15b. Formulare auf dunklem Grund -------------------- */
/* Beschriftungen, Hilfstexte und die Zustimmungszeile stehen sonst in
   Dunkelbraun auf Dunkelbraun und sind praktisch unsichtbar. */
.band--tinte .feld > label,  .band--tinte .feld__label,
.band--tinte2 .feld > label, .band--tinte2 .feld__label,
.karte--tinte .feld > label, .karte--tinte .feld__label {
  color: var(--sand-100);
}
.band--tinte .feld small,  .band--tinte2 .feld small,  .karte--tinte .feld small,
.band--tinte .zustimmung,  .band--tinte2 .zustimmung,  .karte--tinte .zustimmung {
  color: rgba(245,239,229,.80);
}
.band--tinte .zustimmung a, .band--tinte2 .zustimmung a, .karte--tinte .zustimmung a {
  color: var(--gold-400);
}
.band--tinte .zustimmung input[type="checkbox"],
.band--tinte2 .zustimmung input[type="checkbox"],
.karte--tinte .zustimmung input[type="checkbox"] { accent-color: var(--gold-500); }

.band--tinte details > summary, .band--tinte2 details > summary,
.karte--tinte details > summary { color: var(--sand-100); }

/* Auswahlkarten des Rechners, falls sie einmal auf dunklem Grund stehen */
.band--tinte .wahl label b, .karte--tinte .wahl label b { color: var(--braun-900); }

/* ------------------------- 16. Kontaktkacheln ------------------------- */
.kontakte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .kontakte { grid-template-columns: 1fr; } }
.kontakt-k {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.5rem; border-radius: var(--r);
  background: var(--weiss); border: 1px solid var(--linie);
  text-decoration: none; color: var(--braun-900);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.kontakt-k:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); border-color: var(--gold-500); color: var(--braun-900); }
.kontakt-k__ikon { width: 40px; height: 40px; border-radius: var(--r-s); background: var(--sand-200); color: var(--braun-700); display: grid; place-items: center; margin-bottom: .7rem; }
.kontakt-k__ikon svg { width: 20px; height: 20px; }
.kontakt-k small { font-size: .82rem; color: var(--text-leise); letter-spacing: .05em; text-transform: uppercase; }
.kontakt-k b { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.kontakt-k span { font-size: .89rem; color: var(--text-leise); }

/* Notrufnummern */
.notruf { display: grid; gap: 1px; background: rgba(255,255,255,.16); border-radius: var(--r); overflow: hidden; }
.notruf a, .notruf div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--braun-800); padding: 1.05rem 1.3rem;
  color: var(--sand-100); text-decoration: none;
}
.notruf a:hover { background: var(--braun-700); color: var(--weiss); }
.notruf b { font-family: var(--display); font-weight: 500; font-size: 1rem; }
.notruf span {
  font-family: var(--display); font-weight: 700; font-size: 1.22rem;
  color: var(--gold-400); font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.notruf .dringend span { color: #FF8A7A; }

/* Merkblätter */
.merkblatt {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.3rem; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--r);
  text-decoration: none; color: var(--braun-900);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.merkblatt:hover { border-color: var(--gold-500); box-shadow: var(--schatten-2); transform: translateY(-2px); color: var(--braun-900); }
.merkblatt__ikon { flex: none; width: 38px; height: 46px; border-radius: 3px; background: var(--sand-200); color: var(--braun-700); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: .04em; }
.merkblatt b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.merkblatt small { display: block; font-size: .85rem; color: var(--text-leise); line-height: 1.45; }
.merkblatt__pfeil { margin-left: auto; color: var(--braun-500); flex: none; }

/* ------------------------ 16b. Stadt / Chemnitz ----------------------- */
/* Ein Band mit Stadtansicht im Hintergrund. Der Abdunkler ist kräftig
   genug, dass die Schrift auf jedem Bildausschnitt sicher steht. */
.band--stadt {
  position: relative;
  background: var(--braun-900);
  color: var(--sand-100);
  overflow: hidden;
  isolation: isolate;
}
.stadt__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.band--stadt::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(36,22,9,.90) 0%, rgba(36,22,9,.72) 40%, rgba(36,22,9,.92) 100%);
}
.band--stadt h2, .band--stadt h3 { color: var(--weiss); }
.band--stadt .kicker { color: var(--gold-400); }
.band--stadt .leise { color: rgba(245,239,229,.82); }

.stadtteile {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 900px) { .stadtteile { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stadtteile { grid-template-columns: 1fr; } }

.stadtteil {
  background: rgba(36,22,9,.62);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r);
  padding: 1.15rem 1.3rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .25s, background .25s, transform .25s;
}
.stadtteil:hover { border-color: var(--gold-500); background: rgba(36,22,9,.78); transform: translateY(-2px); }
.stadtteil b {
  display: flex; align-items: baseline; gap: .6rem;
  font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  color: var(--weiss); margin-bottom: .3rem;
}
.stadtteil b span {
  font-family: var(--body); font-size: .74rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-400); white-space: nowrap;
}
.stadtteil p { margin: 0; font-size: .92rem; line-height: 1.55; color: rgba(245,239,229,.80); }

/* Bildpaar für den Abschnitt zum Baubestand */
.bildpaar { display: grid; grid-template-columns: 1.6fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .bildpaar { grid-template-columns: 1fr; } }
.bildpaar figure { margin: 0; }
.bildpaar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.bildpaar figure:first-child img { aspect-ratio: 4 / 3; }
.bildpaar figure:last-child img  { aspect-ratio: 3 / 4; }
@media (max-width: 560px) { .bildpaar figure:last-child img { aspect-ratio: 16 / 9; } }

/* --------------------------- 17. Einsatzgebiet ------------------------ */
.plz-check { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 440px; }
.plz-check input { flex: 1; min-width: 150px; }
.plz-antwort { margin-top: 1rem; }

.gebiet-liste {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem;
}
.gebiet-liste span {
  font-size: .85rem; padding: .32rem .75rem; border-radius: var(--r-s);
  background: rgba(255,255,255,.10); color: rgba(245,239,229,.86);
}

/* ------------------------------ 18. Fuß ------------------------------- */
.fuss { background: var(--braun-900); color: rgba(245,239,229,.80); padding: 4rem 0 0; }
.fuss__oben {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (max-width: 940px) { .fuss__oben { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .fuss__oben { grid-template-columns: 1fr; } }
.fuss h4 {
  font-size: .84rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-400); margin-bottom: 1.1rem; font-weight: 600;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .55rem; }
.fuss a { color: rgba(245,239,229,.80); text-decoration: none; font-size: .95rem; }
.fuss a:hover { color: var(--gold-400); }
.fuss .logo { --logo-h: 84px; display: block; margin-bottom: 1.35rem; }
.fuss__claim {
  font-family: var(--display); font-size: 1.12rem; font-weight: 500;
  color: rgba(255,255,255,.90); line-height: 1.45; margin-bottom: 1.25rem; max-width: 26ch;
}
.fuss__adr { font-size: .93rem; line-height: 1.7; font-style: normal; }
.fuss__adr b { color: var(--sand-100); font-weight: 600; }
.fuss__unten {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 1.4rem 0 1.75rem;
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center;
  font-size: .86rem; color: rgba(245,239,229,.60);
}
.fuss__unten a { font-size: .86rem; }
.fuss__unten .rechts { margin-left: auto; }
@media (max-width: 640px) { .fuss__unten .rechts { margin-left: 0; } }

/* ------------------------- 19. Cookie-Hinweis ------------------------- */
.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 150;
  max-width: 520px; margin-inline: auto;
  background: var(--weiss); border: 1px solid var(--linie-fest);
  border-radius: var(--r); box-shadow: var(--schatten-3);
  padding: 1.35rem 1.5rem;
  display: none;
}
.cookie.an { display: block; }
.cookie h4 { margin: 0 0 .5rem; font-size: 1.05rem; }
.cookie p { font-size: .88rem; color: var(--text-leise); margin-bottom: 1.1rem; line-height: 1.55; }
.cookie .btn-reihe { gap: .6rem; }
.cookie .btn { flex: 1; }

/* --------------------------- 20. Kleinkram ---------------------------- */
.trenner { height: 1px; background: var(--linie); border: 0; margin: 0; }
.balken { width: 64px; height: 4px; background: var(--gold-500); margin-bottom: 1.5rem; }
.band--tinte .balken { background: var(--gold-400); }

.zitat {
  border-left: 4px solid var(--gold-500); padding: .3rem 0 .3rem 1.5rem;
  font-family: var(--display); font-size: 1.22rem; font-weight: 400;
  line-height: 1.5; color: var(--braun-800); font-style: normal;
  margin: 0;
}
.band--tinte .zitat { color: rgba(255,255,255,.92); border-color: var(--gold-400); }

.bild-rahmen {
  border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten-2);
  position: relative;
}
.bild-rahmen img { width: 100%; }
.bild-rahmen figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(36,22,9,0), rgba(36,22,9,.85));
  color: rgba(255,255,255,.92); padding: 2.5rem 1.25rem .95rem; font-size: .85rem;
}

.rechtstext { max-width: 74ch; }
.rechtstext h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.rechtstext h3 { font-size: 1.12rem; margin-top: 1.75rem; }
.rechtstext ul { padding-left: 1.3rem; }
.rechtstext li { margin-bottom: .4rem; }

.tabelle { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabelle th, .tabelle td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--linie); }
.tabelle th { font-family: var(--display); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }
/* Auf dunklem Grund brauchen Kopfzeile und Linien helle Werte */
.band--tinte .tabelle th, .band--tinte2 .tabelle th,
.karte--tinte .tabelle th { color: rgba(245,239,229,.78); }
.band--tinte .tabelle th, .band--tinte .tabelle td,
.band--tinte2 .tabelle th, .band--tinte2 .tabelle td,
.karte--tinte .tabelle th, .karte--tinte .tabelle td { border-bottom-color: rgba(255,255,255,.16); }
.tabelle td.num { text-align: right; }
.tabelle-scroll { overflow-x: auto; }

/* Einblenden beim Scrollen */
.auf { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.auf.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .auf { opacity: 1; transform: none; } }

.lade {
  display: inline-block; width: 17px; height: 17px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

@media print {
  .kopf, .fuss, .cookie, .hero__runter, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .band { padding: 1rem 0; }
}