/* =====================================================================
   wohnbundt.de — Stylesheet
   ---------------------------------------------------------------------
   Aufbau (in dieser Reihenfolge):
     01  Schriften (@font-face, selbst gehostet)
     02  Design-Tokens (Farben, Typo, Abstände)   <- HIER Farben ändern
     03  Reset & Grundlagen
     04  Typografie
     05  Layout: Container, Sektionen, Full-Bleed
     06  Kopfbereich & Navigation
     07  Buttons & Links
     08  Hero
     09  Bausteine: Karten, Chips, Fakten, Hinweise, Galerie
     10  Wohnungs-Karten
     11  Accordion (<details>)
     12  Kontakt
     13  Fußbereich
     14  Bild-Platzhalter (nur solange Fotos fehlen)
     15  Lightbox
     16  Scroll-Reveal & Bewegungsreduktion
     17  Rechtsseiten (Impressum/Datenschutz/404)
     18  Druck
   ===================================================================== */


/* =====================================================================
   01  SCHRIFTEN
   Beide Schriften liegen unter assets/fonts/ und werden lokal geladen.
   Keine Verbindung zu Google Fonts o. Ä. — DSGVO-unkritisch.
   Es sind Variable Fonts: eine Datei deckt alle Schnitte 400–700 ab.
   Das Subset "latin-ext" wird dank unicode-range nur geladen, wenn ein
   Zeichen daraus tatsächlich vorkommt (bei deutschem Text also nie).
   ===================================================================== */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/source-serif-4-latin.woff2') format('woff2');
  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 Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/source-serif-4-latin-ext.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  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;
}


/* =====================================================================
   02  DESIGN-TOKENS  —  hier und nur hier Farben/Maße ändern
   ===================================================================== */

:root {
  /* --- Farbwelt ---------------------------------------------------- */
  --c-bg:            #FBFAF7;  /* warmes Off-White, nie reines Weiß      */
  --c-surface:       #F3EFE8;  /* Sand, für abgesetzte Blöcke            */
  --c-text:          #2A2724;  /* warmes Fast-Schwarz                    */
  --c-muted:         #6B655E;  /* Sekundärtext (5,5:1 auf --c-bg)        */
  --c-accent:        #6E7F5B;  /* Wald-/Salbeigrün, nur Flächen & Deko   */
  --c-accent-2:      #B5814A;  /* Holz/Terrakotta, nur Deko              */
  --c-line:          #DFD8CD;  /* Trennlinien, Rahmen                    */

  /* Dunklere Geschwister für Text und Buttons.
     Grund: --c-accent (4,2:1) und --c-accent-2 (3,3:1) erreichen auf
     hellem Grund KEIN WCAG-AA für normalen Text. Alles, was gelesen oder
     geklickt wird, nutzt daher diese beiden Werte (6,9:1 bzw. 5,4:1). */
  --c-accent-deep:   #4F5C41;
  --c-accent-2-deep: #8A5F31;

  /* Hinweis-/Platzhalterfarben (vor dem Livegang entfernt sich das
     zugehörige Markup, siehe README-Deploy.md) */
  --c-note-bg:       #FBF3E4;
  --c-note-line:     #E2C79A;
  --c-note-text:     #6B4B18;

  /* --- Typografie -------------------------------------------------- */
  --f-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             'Helvetica Neue', Arial, sans-serif;

  --fs-base:  1.125rem;                                  /* 18 px        */
  --fs-small: 1rem;
  --fs-h1:    clamp(2.15rem, 1.45rem + 2.9vw, 3.5rem);
  --fs-h2:    clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --fs-h3:    clamp(1.30rem, 1.10rem + 0.8vw, 1.70rem);
  --fs-lead:  clamp(1.20rem, 1.06rem + 0.6vw, 1.45rem);

  --lh-text: 1.65;
  --lh-head: 1.14;

  /* --- Maße -------------------------------------------------------- */
  --content-width: 68rem;   /* Hauptcontainer                            */
  --measure:       38rem;   /* max. Zeilenlänge Fließtext (~68 Zeichen)  */
  --gutter:        clamp(1.25rem, 0.85rem + 2vw, 2.5rem);
  --section-y:     clamp(4rem, 2.5rem + 7vw, 9rem);   /* Luft um eine Sektion  */
  --block-y:       clamp(2.25rem, 1.5rem + 3vw, 3.5rem); /* Luft zwischen Bausteinen */
  --radius:        14px;
  --radius-sm:     8px;
  --header-h:      4.5rem;

  --shadow-card: 0 1px 2px rgba(42, 39, 36, .05),
                 0 8px 28px -14px rgba(42, 39, 36, .22);
  /* Symbol für den Grundriss-Link, siehe .wohnung__grundriss */
  --icon-grundriss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M3 10h7V3M14 21v-7h7'/%3E%3C/svg%3E");
}


/* =====================================================================
   03  RESET & GRUNDLAGEN
   ===================================================================== */

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

html {
  /* Sanftes Scrollen ohne JS; wird bei prefers-reduced-motion abgeschaltet */
  scroll-behavior: smooth;
  /* Anker landen nicht unter der klebenden Kopfzeile */
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-text);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  /* Verhindert horizontales Scrollen auch bei 200 % Zoom */
  overflow-x: hidden;
}

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

ul, ol { padding-left: 1.25em; }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--section-y) 0;
}

/* Sichtbarer Fokus — nirgends outline:none.
   Doppelter Ring, damit er auf hellem UND dunklem Grund sichtbar bleibt. */
:focus-visible {
  outline: 3px solid var(--c-accent-2-deep);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: 0 0 0 6px rgba(251, 250, 247, .9);
}

::selection { background: #DCE3D2; color: var(--c-text); }

/* Nur für Screenreader */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Sprunglink zum Hauptinhalt */
.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 200;
  background: var(--c-accent-deep);
  color: #fff;
  padding: .85rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease-out;
}
.skip-link:focus { top: 0; }


/* =====================================================================
   04  TYPOGRAFIE
   ===================================================================== */

h1, h2, h3, h4 {
  font-family: var(--f-serif);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0 0 .6em;
  color: var(--c-text);
}

h1 { font-size: var(--fs-h1); letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.15rem; font-family: var(--f-sans); font-weight: 600; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Fließtext-Spalte: begrenzte Zeilenlänge, weil die Seite viel Text hat
   und die Zielgruppe ihn tatsächlich liest. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-text);
  max-width: 34rem;
}

.muted { color: var(--c-muted); }
.small { font-size: var(--fs-small); }

/* Kleine Überschrift über der eigentlichen h2 */
.kicker {
  display: block;
  font-family: var(--f-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin-bottom: .9rem;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 1.75rem; height: 2px;
  background: var(--c-accent-2);
  vertical-align: .3em;
  margin-right: .6rem;
}

strong, b { font-weight: 600; }

/* Lange, umbruchlose Zeichenketten — Dateipfade, E-Mail-Adressen, URLs —
   sonst schieben sie auf schmalen Displays die ganze Seite auseinander.
   Der Überhang wäre dabei nicht am Element messbar, sondern nur am Text
   selbst: eine Fehlerquelle, die man leicht übersieht.

   Bewusst NICHT am body, sondern nur an Fließtextelementen: Eine globale
   Regel bricht auch Überschriften mitten im Wort auf ("Wohngenossenschaf-
   t"), und gerade dort fallen lange deutsche Komposita an. */
p, li, dd, dt, figcaption, .mail-adresse { overflow-wrap: break-word; }

/* Überschriften trennen stattdessen nach den Regeln der deutschen
   Silbentrennung. Das setzt das lang="de" am <html>-Element voraus, das
   ohnehin da ist. Wo der Browser keine Trennmuster hat, bleibt das Wort
   ungetrennt — schlimmstenfalls wird die Zeile etwas eng, nie falsch. */
h1, h2, h3, h4 { overflow-wrap: normal; hyphens: auto; }

code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  background: rgba(42, 39, 36, .06);
  padding: .1em .35em;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

/* Zahlen in Fließtext gleich breit setzen (Preise, m²) */
.tabular { font-variant-numeric: tabular-nums; }


/* =====================================================================
   05  LAYOUT
   ===================================================================== */

.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--surface { background: var(--c-surface); }
.section__head { max-width: var(--measure); margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* --- Senkrechter Rhythmus innerhalb einer Sektion --------------------
   Eine Sektion besteht aus flach nebeneinanderliegenden Bausteinen:
   Überschriftenblock, Textspalte, Bild, Zwischenüberschrift,
   Kachelraster, Kasten, Akkordeon. Ohne Regel kleben sie aneinander,
   weil weder <figure> noch .grid noch h3 von sich aus einen Abstand
   nach oben haben.

   Deshalb eine einzige Regel statt vieler Einzelabstände: Jeder
   Baustein außer dem ersten bekommt Luft nach oben. Das erste Kind
   bleibt unberührt — der Abstand zum Sektionsrand kommt allein aus
   .section { padding-block }.

   Wo ein Baustein bereits einen eigenen Abstand mitbringt (etwa
   .section__head nach unten), fallen beide Werte zusammen; benachbarte
   senkrechte Außenabstände addieren sich in CSS nicht, der größere
   gewinnt. Doppelte Lücken entstehen also nicht.                      */
.section > .container > * + * { margin-top: var(--block-y); }

/* Ausnahme: Eine Zwischenüberschrift und ihr Einleitungssatz gehören
   zusammen und dürfen nicht durch den vollen Blockabstand getrennt
   werden. */
.section > .container > :is(h2, h3, h4) + p { margin-top: .6em; }

/* Zweispaltig ab Tablet: Text + Beiwerk */
.split {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 56em) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--text-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* Full-Bleed: bricht aus dem Container bis an die Fensterkanten aus.
   Bewusst NUR über negative Außenabstände gelöst und nicht über
   "margin-left: 50%; transform: translateX(-50%)". Grund: Ein Element
   kann nur EIN transform haben. Die Reveal-Animation weiter unten setzt
   ebenfalls ein transform und würde die Zentrierung überschreiben — das
   Bild landet dann eine halbe Fensterbreite zu weit rechts. Mit
   Außenabständen gibt es diesen Konflikt nicht.
   Der Sicherheitsgurt dazu ist "overflow-x: hidden" am body: Auf Systemen
   mit klassischer Bildlaufleiste ist 100vw um deren Breite größer als der
   sichtbare Bereich; dieser Rest wird abgeschnitten statt scrollbar. */
.full-bleed {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}

figure { margin: 0; }

figcaption {
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin-top: .7rem;
  max-width: var(--measure);
}

.bild img { border-radius: var(--radius); }

/* Randlose Bilder laufen über die ganze Fensterbreite. Ohne width: 100%
   bliebe ein Foto, das schmaler ist als das Fenster, mittig klein stehen —
   die Seite sähe dann an dieser Stelle kaputt aus. */
.bild--bleed img { border-radius: 0; width: 100%; }


/* =====================================================================
   06  KOPFBEREICH & NAVIGATION
   ===================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 247, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-serif);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  letter-spacing: -.01em;
  padding: .4rem 0;
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__ort {
  display: none;
  font-family: var(--f-sans);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--c-muted);
  letter-spacing: 0;
}
@media (min-width: 30em) { .brand__ort { display: inline; } }

/* --- Navigationsliste --- */
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem;
}

.nav__link {
  display: block;
  padding: .7rem .6rem;             /* zusammen mit line-height >= 44 px */
  min-height: 44px;
  line-height: 1.6;
  font-size: .9375rem;
  color: var(--c-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav__link:hover { background: var(--c-surface); color: var(--c-accent-deep); }
.nav__link[aria-current="true"] {
  color: var(--c-accent-deep);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--c-accent-2);
}

.nav__link--cta {
  background: var(--c-accent-2-deep);
  color: #fff;
  font-weight: 600;
  margin-left: .35rem;
  padding-inline: 1rem;
}
.nav__link--cta:hover { background: #75501f; color: #fff; }
.nav__link--cta[aria-current="true"] { color: #fff; box-shadow: none; }

/* Burger-Button: standardmäßig aus dem Markup heraus ausgeblendet
   (Attribut hidden) und wird nur von main.js eingeblendet. */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .5rem .85rem;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav__toggle:hover { background: var(--c-surface); }
.nav__toggle[hidden] { display: none; }

.nav__burger { width: 20px; height: 14px; position: relative; flex: none; }
.nav__burger span {
  position: absolute; left: 0;
  display: block; width: 100%; height: 2px;
  background: var(--c-text); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 6px; }
.nav__burger span:nth-child(3) { top: 12px; }
[aria-expanded="true"] .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav__burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Ohne JavaScript bleibt die Navigation eine ganz normale, umbrechende
   Linkliste — nichts ist versteckt. Erst wenn main.js läuft (Klasse .js
   am <html>), wird daraus auf schmalen Displays ein Klappmenü. */
@media (max-width: 61.99em) {
  .js .nav__panel {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 18px 40px -24px rgba(42, 39, 36, .5);
    padding: .75rem var(--gutter) 1.5rem;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .js .nav__panel[hidden] { display: none; }
  .js .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav__link {
    padding: .95rem .75rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    white-space: normal;
  }
  .js .nav__list li:last-child .nav__link { border-bottom: 0; }
  .js .nav__link--cta {
    margin: .9rem 0 0;
    border-radius: var(--radius-sm);
    text-align: center;
    padding: 1rem;
  }
}

@media (min-width: 62em) {
  .nav__panel { display: block !important; }
  .nav__panel[hidden] { display: block !important; }
}


/* =====================================================================
   07  BUTTONS & LINKS
   ===================================================================== */

a { color: var(--c-accent-deep); text-underline-offset: .18em; }
a:hover { color: var(--c-accent-2-deep); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;                  /* großzügiges Touch-Ziel */
  padding: .85rem 1.6rem;
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn--primary { background: var(--c-accent-2-deep); color: #fff; }
.btn--primary:hover { background: #75501f; color: #fff; }

.btn--secondary {
  background: transparent;
  color: var(--c-accent-deep);
  border-color: var(--c-accent);
}
.btn--secondary:hover { background: var(--c-surface); color: var(--c-accent-deep); }

.btn--ghost {
  background: var(--c-bg);
  color: var(--c-text);
  border-color: var(--c-line);
  min-height: 44px;
  font-size: 1rem;
  padding: .6rem 1.1rem;
}
.btn--ghost:hover { background: var(--c-surface); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}


/* =====================================================================
   08  HERO
   ===================================================================== */

.hero { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

.hero__text { max-width: 44rem; }

.hero__ort {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-accent-deep);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: .45rem 1rem;
  margin-bottom: 1.5rem;
}

.hero h1 { margin-bottom: .45em; }

.hero__figure { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.hero__figure img { width: 100%; }


/* =====================================================================
   09  BAUSTEINE
   ===================================================================== */

/* --- Karten-Raster --- */
.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 44em)  { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 44em)  { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66em)  { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 2.5vw, 2rem);
}
.section--surface .card { background: var(--c-bg); }

/* --- Merkmal-Chips --- */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-block;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-accent-deep);
  background: #EDF0E7;
  border: 1px solid #D6DDC9;
  border-radius: 999px;
  padding: .35rem .75rem;
}

/* --- Fakten-Kacheln (Zahlen) --- */
.fakten {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);   /* wie .grid, damit alle Kacheln gleich atmen */
  grid-template-columns: 1fr;
  margin: 0;                          /* Abstand nach oben kommt aus dem Rhythmus */
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) { .fakten { grid-template-columns: repeat(3, 1fr); } }
.fakt {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.25rem;
}
.fakt__wert {
  display: block;
  font-family: var(--f-serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.fakt__label { display: block; font-size: .9375rem; color: var(--c-muted); margin-top: .3rem; }

/* --- Erklär- und Zitatkasten (redaktionell, bleibt online) --- */
.kasten {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 2.5vw, 2rem);
}
.kasten h3 { margin-bottom: .5em; }
.section--surface .kasten { background: var(--c-bg); }

/* --- Hinweiskasten: markiert Platzhalter und offene Punkte -----------
   Diese Kästen sind bewusst auffällig. Sie sind KEIN Seiteninhalt,
   sondern Arbeitsnotizen und müssen vor dem Livegang entfernt werden.
   Suche im HTML nach:  class="hinweis"                                */
.hinweis {
  background: var(--c-note-bg);
  border: 1px dashed var(--c-note-line);
  border-left: 5px solid var(--c-note-line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  color: var(--c-note-text);
  font-size: var(--fs-small);
  line-height: 1.55;
  margin: 1.5rem 0;
  max-width: var(--measure);
}
.hinweis > :first-child { margin-top: 0; }
.hinweis > :last-child { margin-bottom: 0; }
.hinweis__titel {
  display: block;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .75rem;
  margin-bottom: .4rem;
}
.hinweis ul { margin: .5rem 0 0; padding-left: 1.15em; }
.hinweis li + li { margin-top: .3rem; }

/* --- Schlichte Merkmalsliste mit Haken --- */
.liste { list-style: none; padding: 0; margin: 0; }
.liste li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .75rem;
}
.liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 1.05rem; height: .52rem;
  border-left: 2.5px solid var(--c-accent);
  border-bottom: 2.5px solid var(--c-accent);
  transform: rotate(-45deg);
}

/* --- Nummerierte Schritte (Sektion "So läuft's ab") --- */
.schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 0; display: grid; gap: 1rem; }
.schritt {
  counter-increment: schritt;
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem 1.35rem 4.5rem;
}
.schritt::before {
  content: counter(schritt);
  position: absolute;
  left: 1.35rem; top: 1.25rem;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  font-family: var(--f-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  background: var(--c-accent-deep);
  border-radius: 50%;
}
.schritt h3 { font-size: 1.15rem; font-family: var(--f-sans); margin-bottom: .35em; }
.schritt p { font-size: var(--fs-small); color: var(--c-muted); }

/* --- Galerie --- */
/* minmax(0, 1fr) statt 1fr: Ohne die 0 als Untergrenze darf eine Spalte
   nicht schmaler werden als der Mindestplatzbedarf ihres Inhalts. Die
   Platzhalter haben eine Mindesthöhe und ein festes Seitenverhältnis und
   fordern daraus eine Mindestbreite an — auf schmalen Displays sprengt
   das sonst das Raster und erzeugt Querscrollen. */
.galerie {
  display: grid;
  gap: clamp(.75rem, 1.5vw, 1.15rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Der Abstand nach oben kommt aus dem Rhythmus der Sektion. */
  list-style: none; padding: 0; margin: 0;
}
@media (min-width: 52em) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galerie a { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Personen (Sektion "Die Menschen") --- */
.person { text-align: left; }
.person__name { font-family: var(--f-serif); font-size: 1.25rem; font-weight: 600; margin: 0 0 .35em; }
.person__satz { font-size: var(--fs-small); color: var(--c-muted); margin: 0; }


/* =====================================================================
   10  WOHNUNGS-KARTEN
   ===================================================================== */

.wohnung {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.wohnung__medien { border-bottom: 1px solid var(--c-line); }
.wohnung__body { padding: clamp(1.35rem, 2.2vw, 1.85rem); display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.wohnung__nr {
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-accent-2-deep);
}
.wohnung__titel { font-size: 1.45rem; margin: .25rem 0 0; }
.wohnung__eckdaten {
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
  margin: 0;
}
.wohnung__text { font-size: var(--fs-small); margin: 0; }
.wohnung__hinweis {
  font-size: .9375rem;
  color: var(--c-muted);
  border-left: 3px solid var(--c-line);
  padding-left: .85rem;
  margin: 0;
}

/* Verweis auf den Grundriss unter jeder Wohnungskarte */
.wohnung__grundriss {
  font-size: var(--fs-small);
  margin: 0;
}
.wohnung__grundriss a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
}
.wohnung__grundriss a::before {
  content: "";
  width: 1.05em; height: 1.05em;
  flex: none;
  background: currentColor;
  /* Blattsymbol mit Faltecke, als Maske — kein zusätzlicher Bilddownload. */
  -webkit-mask: var(--icon-grundriss) center / contain no-repeat;
          mask: var(--icon-grundriss) center / contain no-repeat;
}

.wohnung__passt {
  font-size: var(--fs-small);
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  margin: 0;
}
.wohnung__passt strong { color: var(--c-accent-deep); }

/* Rechenbeispiel — sitzt am Kartenfuß, damit die Karten optisch enden */
.rechnung {
  margin: auto 0 0;
  border-top: 1px solid var(--c-line);
  padding-top: 1rem;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.rechnung dl { display: grid; grid-template-columns: 1fr auto; gap: .3rem .75rem; margin: 0; }
.rechnung dt { color: var(--c-muted); }
.rechnung dd { margin: 0; text-align: right; }
.rechnung .rechnung__summe { border-top: 1px solid var(--c-line); padding-top: .45rem; margin-top: .2rem; font-weight: 600; }
.rechnung .rechnung__summe dt { color: var(--c-text); }
.rechnung__fuss { font-size: .8125rem; color: var(--c-muted); margin: .7rem 0 0; }


/* =====================================================================
   11  ACCORDION  (<details>/<summary> — funktioniert ohne JavaScript)
   ===================================================================== */

.akkordeon { border-top: 1px solid var(--c-line); }

.frage {
  border-bottom: 1px solid var(--c-line);
}
.frage > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 1rem .25rem;
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after {
  content: "";
  flex: none;
  width: .7rem; height: .7rem;
  border-right: 2px solid var(--c-accent-deep);
  border-bottom: 2px solid var(--c-accent-deep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.frage[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.frage > summary:hover { color: var(--c-accent-deep); }
.frage__inhalt { padding: 0 .25rem 1.35rem; max-width: var(--measure); }
.frage__inhalt > :first-child { margin-top: 0; }


/* =====================================================================
   12  KONTAKT
   ===================================================================== */

.kontakt { background: var(--c-surface); }

.kontakt__karte {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.mail-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}
.mail-adresse {
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  word-break: break-word;
}
.kopier-status { font-size: .9375rem; color: var(--c-accent-deep); font-weight: 600; }

.leitfragen { margin-top: 2.5rem; }
.leitfragen ol { padding-left: 1.3em; }
.leitfragen li { margin-bottom: .6rem; }


/* =====================================================================
   13  FUSSBEREICH
   ===================================================================== */

.site-footer {
  background: var(--c-text);
  color: #E8E3DB;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  font-size: var(--fs-small);
}
.site-footer a { color: #E8E3DB; text-decoration: underline; }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { box-shadow: 0 0 0 6px rgba(42, 39, 36, .9); }

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer__name { font-family: var(--f-serif); font-size: 1.15rem; color: #fff; margin: 0 0 .35rem; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.site-footer nav a { display: inline-block; padding: .6rem 0; min-height: 44px; }
.site-footer__copy { color: #B8B1A7; margin: 0; }


/* =====================================================================
   14  BILD-PLATZHALTER
   ---------------------------------------------------------------------
   Nur solange die echten Fotos fehlen. Jeder Platzhalter hat exakt das
   Seitenverhältnis des späteren Bildes, damit sich beim Austausch am
   Layout nichts verschiebt. Ersetzt wird jeweils das ganze
   <div class="ph">…</div> durch den <picture>-Block aus dem darüber
   stehenden HTML-Kommentar.
   ===================================================================== */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ph-ar, 16 / 3);
  min-height: 5rem;
  padding: 1.25rem;
  background: #EFEBE3;
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
}
.bild--bleed .ph, .ph--bleed { border-radius: 0; }

/* Seitenverhältnisse als Klassen statt als style-Attribut — damit im
   HTML kein einziges Inline-CSS steht und die strenge CSP greift. */
.ph--21x9 { --ph-ar: 21 / 9; }
.ph--16x9 { --ph-ar: 16 / 9; }
.ph--3x2  { --ph-ar: 3 / 2; }
.ph--4x3  { --ph-ar: 4 / 3; }
.ph--1x1  { --ph-ar: 1 / 1; }

/* Schraffur + Rahmen als Inline-SVG, rein dekorativ */
.ph__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.ph__text {
  position: relative;
  max-width: 30rem;
  color: #6B655E;
  font-size: clamp(.8125rem, .72rem + .35vw, .9375rem);
  line-height: 1.5;
  background: rgba(251, 250, 247, .88);
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
}
.ph__id {
  display: block;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-note-text);
  margin-bottom: .2rem;
}
.ph__datei {
  display: block;
  margin-top: .35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8em;
  color: #6B655E;
  word-break: break-all;
}


/* =====================================================================
   15  LIGHTBOX  (nur mit JavaScript; ohne JS öffnen die Galeriebilder
       als ganz normale Links im Browser-Tab)
   ===================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(26, 24, 22, .95);
  padding: 1rem;
}
.lightbox[hidden] { display: none; }
.lightbox__bar { display: flex; justify-content: flex-end; gap: .5rem; }
.lightbox__btn {
  min-width: 48px; min-height: 48px;
  display: grid; place-items: center;
  font: inherit; font-size: 1.5rem; line-height: 1;
  color: #fff; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  cursor: pointer;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox :focus-visible { box-shadow: 0 0 0 6px rgba(26, 24, 22, .9); }
.lightbox__figure { display: grid; grid-template-rows: 1fr auto; gap: .75rem; min-height: 0; margin: 0; padding: .5rem 0 1rem; }
/* justify-self/align-self: center verhindert, dass das Bild als
   Raster-Element auf die volle Zellengröße gedehnt wird. Sonst deckt seine
   Box auch die leeren Flächen links und rechts ab, und der Klick auf den
   vermeintlichen Hintergrund landet auf dem Bild statt zu schließen. */
.lightbox__figure img {
  max-height: 100%;
  max-width: 100%;
  justify-self: center;
  align-self: center;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.lightbox__caption { color: #E8E3DB; text-align: center; font-size: var(--fs-small); }
.lightbox__nav { position: absolute; inset: auto 1rem 1rem; display: flex; justify-content: center; gap: .75rem; }
body.lightbox-offen { overflow: hidden; }


/* =====================================================================
   16  SCROLL-REVEAL & BEWEGUNGSREDUKTION
   ---------------------------------------------------------------------
   Der Ausgangszustand (unsichtbar) wird NUR gesetzt, wenn JavaScript
   läuft (Klasse .js am <html>). Sonst wäre die Seite ohne JS leer.
   ===================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.js .reveal.is-sichtbar { opacity: 1; transform: none; }

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


/* =====================================================================
   17  RECHTSSEITEN (Impressum, Datenschutz, 404)
   ===================================================================== */

.rechtstext { max-width: var(--measure); }
.rechtstext h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); margin-top: 2.5rem; }
.rechtstext h3 { font-size: 1.2rem; margin-top: 1.75rem; }
/* Schriftart und -schnitt kommen aus der globalen h4-Regel. */
.rechtstext h4 { font-size: 1.0625rem; margin-top: 1.4rem; margin-bottom: .35rem; }

/* Abgesetzter Kasten für Hinweise, die sich laut Gesetz vom übrigen Text
   abheben müssen — derzeit das Widerspruchsrecht nach Art. 21 Abs. 4 DSGVO.
   Anders als .hinweis bleibt dieser Kasten dauerhaft stehen und wird auch
   mitgedruckt. */
.hervorhebung {
  border: 2px solid var(--c-accent-2-deep);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  padding: clamp(1rem, 2.5vw, 1.4rem);
  margin: 1.25rem 0 1.5rem;
}
.hervorhebung > :last-child { margin-bottom: 0; }
.rechtstext ul, .rechtstext ol { margin: 0 0 1.15em; }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext dl { margin: 0 0 1.15em; }
.rechtstext dt { font-weight: 600; margin-top: .8rem; }
.rechtstext dd { margin: .1rem 0 0; }

.seite-404 { text-align: center; padding-block: clamp(4rem, 12vw, 9rem); }
.seite-404 .btn-row { justify-content: center; }


/* =====================================================================
   18  DRUCK
   ===================================================================== */

@media print {
  .site-header, .nav__panel, .lightbox, .btn-row, .hinweis, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.5rem; }
  .full-bleed { width: auto; margin-left: 0; transform: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  .frage__inhalt { display: block !important; }
}