/* Bronk Residential Services – Gestaltung aller Seiten.
   Werte als Tokens gesammelt. */

/* --- Tokens ------------------------------------------------------------ */

:root {
  /* Farben (Kontrast von --farbe-text in Klammern) */
  --farbe-papier: #f7f4ee;      /* Seitenhintergrund (13,3:1) */
  --farbe-flaeche: #efe9df;     /* abgesetzte Abschnitte (12,1:1) */
  --farbe-karte: #fcfbf8;       /* Karten (14,1:1) */
  --farbe-text: #1d2a38;        /* Text, Links, Linien, Fokus */
  --farbe-text-hover: #2c3d50;  /* Link-Hover (10,1:1 auf Papier, 9,2:1 auf Fläche, 8,4:1 auf Textauswahl) */
  --farbe-linie: #d9d0bf;       /* Trennlinien, dekorativ */
  --farbe-raster: #e2dacb;      /* Fugen im Kartenraster, dekorativ */
  --farbe-auswahl: #e8dfcf;     /* Textauswahl */

  /* Schriften */
  --schrift-titel: "Newsreader", Georgia, serif;
  --schrift-text: "Hanken Grotesk", system-ui, sans-serif;

  /* Schriftgrößen in rem, damit Zoom und die eingestellte Schriftgröße des
     Browsers wirken. Fließende Größen: fester rem-Anteil plus vw-Anteil, so
     gewählt, dass bei 375 und 1280 px die Werte der Vorlage herauskommen
     (dort: clamp(46px, 7vw, 100px) usw.). Der rem-Anteil wächst beim Zoomen mit.
     Überschriften erreichen die doppelte Größe erst bei 222–390 % Zoom (bewusst
     so gelassen). Fließtext (lead) erreicht sie bei
     200 % Zoom im 1280-px-Fenster: Er wächst nur bis 640 px und bleibt dann bis
     1280 px (80em) gleich, darüber wie in der Vorlage. */
  --groesse-h1-start: clamp(2.875rem, 1.746rem + 4.818vw, 6.25rem);  /* 46–100px */
  --groesse-h1: clamp(2.625rem, 1.724rem + 3.845vw, 5rem);           /* 42–80px */
  --groesse-h2: clamp(2.125rem, 1.68rem + 1.901vw, 3.375rem);        /* 34–54px */
  --groesse-objekt: clamp(1.75rem, 1.481rem + 1.149vw, 2.5rem);      /* 28–40px */
  --groesse-zusatz: clamp(1.75rem, 1.348rem + 1.715vw, 2.75rem);     /* 28–44px */
  --groesse-mail: clamp(1.625rem, 1.314rem + 1.326vw, 2.375rem);     /* 26–38px */
  --groesse-h2-recht: clamp(1.625rem, 1.47rem + 0.663vw, 2rem);      /* 26–32px */
  --groesse-karte: clamp(1.5rem, 1.396rem + 0.442vw, 1.75rem);       /* 24–28px */
  --groesse-h2-impr: clamp(1.375rem, 1.246rem + 0.553vw, 1.6875rem); /* 22–27px */
  --groesse-h3-recht: clamp(1.3125rem, 1.235rem + 0.332vw, 1.5rem);  /* 21–24px */
  --groesse-lead: clamp(1.0625rem, 0.8671rem + 0.834vw, 1.2004rem);  /* 17px bei 375, 19,2px ab 640 */
  --groesse-text: 1.0625rem;     /* 17px */
  --groesse-text-klein: 1rem;    /* 16px */
  --groesse-fakt: 0.96875rem;    /* 15.5px */
  --groesse-nav: 0.9375rem;      /* 15px */
  --groesse-meta: 0.90625rem;    /* 14.5px */
  --groesse-fuss: 0.84375rem;    /* 13.5px */
  --groesse-kicker: 0.75rem;     /* 12px */
  --groesse-dt: 0.71875rem;      /* 11.5px */
  --groesse-claim: 0.6875rem;    /* 11px */
  --groesse-marke: 1.5625rem;    /* 25px */

  /* Breiten */
  --breite-seite: 1440px;
  --breite-lesen: 760px;
  --breite-intro: 820px;
  --breite-lead: 640px;
  --breite-schmal: 560px;
  --breite-zeile: 33em;         /* Fließtext in Rechts- und Objekttexten: höchstens etwa 75 Zeichen */
  --rand: clamp(20px, 3vw, 48px);

  /* Höhe der Kopfzeile (.kopf): 28 + 24 + 1 + 3 px Abstände, Schriftzug und
     Untertitel mit festen Zeilenhöhen. Damit endet der Hero an der Fensterkante. */
  --hoehe-kopf: calc(56px + 1.5625rem + 0.6875rem * 1.25);

  /* Abstände */
  --abstand-abschnitt: clamp(80px, 10vw, 128px);
  --abstand-hero-oben: clamp(72px, 10vw, 144px);
  --abstand-hero-unten: clamp(80px, 10vw, 136px);
  --abstand-seite-oben: clamp(64px, 9vw, 128px);
  --abstand-h2: clamp(32px, 4vw, 48px);
  --abstand-intro: clamp(48px, 6vw, 88px);
  --abstand-karte: clamp(28px, 3.5vw, 44px);
  --abstand-summary: clamp(22px, 2.6vw, 32px);
  --abstand-details: clamp(28px, 3vw, 40px);
}

/* Unter 375px etwas kleinere h1 auf der Startseite (42px bei 320, 46px bei
   375), damit „Hausverwaltung“ bei normaler Darstellung in eine Zeile passt
   (ab etwa 300px). Der weiche Trennstrich bleibt Rückfall für größere Schrift. */
@media (max-width: 23.4375em) {
  :root {
    --groesse-h1-start: clamp(2.625rem, 1.1705rem + 7.273vw, 2.875rem);
  }
}

@media (min-width: 80em) {
  :root {
    --groesse-lead: clamp(1.0625rem, 1.006rem + 0.243vw, 1.25rem);   /* 19,2px bei 1280, 20px ab 1607 */
  }
}

/* --- Grundlagen ---------------------------------------------------------- */

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--farbe-papier);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  -webkit-font-smoothing: antialiased;
  /* Lange Wörter („Hausverwaltung“, „Wohnberechtigungsschein“, Adressen) brechen
     nur um, wenn sie nicht in die Zeile passen, z. B. mit Textabständen nach
     WCAG 1.4.12 oder großer Grundschrift auf dem Smartphone. Ändert keine
     Mindestbreiten, etwa der Textspalte im zweispaltigen Hero. */
  overflow-wrap: break-word;
}

main {
  flex: 1;
}

a {
  color: var(--farbe-text);
  text-underline-offset: 4px;
}

a:hover {
  color: var(--farbe-text-hover);
}

:focus-visible {
  outline: 2px solid var(--farbe-text);
  outline-offset: 3px;
}

::selection {
  background: var(--farbe-auswahl);
}

/* Wort mit weichem Trennstrich in einer Überschrift: rutscht als Ganzes in die
   nächste Zeile, wenn es dort Platz hat, und wird nur getrennt, wenn es allein
   nicht in die Zeile passt. Ohne den Kasten trennt der Browser schon, sobald der
   erste Teil noch in die laufende Zeile passt („Ihre Haus- / verwaltung“). */
.wort {
  display: inline-block;
  max-width: 100%;
}

/* --- Kopfbereich mit Schriftzug ------------------------------------------ */

.kopf {
  max-width: var(--breite-seite);
  width: 100%;
  margin: 0 auto;
  padding: 28px var(--rand) 0;
}

.kopf-innen {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--farbe-linie);
}

.marke {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: fit-content;
  text-decoration: none;
}

.marke-name {
  font-family: var(--schrift-titel);
  font-size: var(--groesse-marke);
  line-height: 1;
}

.marke-claim {
  font-size: var(--groesse-claim);
  line-height: 1.25;
  letter-spacing: 0.04em;
}

/* --- Startseite: Hero ---------------------------------------------------- */

.hero {
  max-width: var(--breite-seite);
  width: 100%;
  margin: 0 auto;
  padding: var(--abstand-hero-oben) var(--rand) var(--abstand-hero-unten);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(48px, 8vw, 72px);
}

/* Ab 1100px Text links, Zeichnung rechts wie in der Vorlage. Die Textspalte ist
   mindestens so breit wie ihr längstes Wort („Hausverwaltung“). Der Hero füllt
   das Fenster unter der Kopfzeile (höchstens 1000px), damit der nächste
   Abschnitt nicht in den ersten Bildschirm ragt.
   Darunter steht die Zeichnung unter dem Text. */
@media (min-width: 68.75em) {
  .hero {
    --abstand-hero-unten: clamp(56px, 6vw, 96px);
    --abstand-hero-oben: clamp(48px, 5vw, 80px);
    --spalten-abstand: clamp(32px, 3.5vw, 56px);
    --luft-unten: 16px;  /* Grundlinie der Zeichnung etwa 20px über der Unterkante */
    min-height: min(calc(100svh - var(--hoehe-kopf)), 62.5rem);
    padding-top: var(--abstand-hero-oben);
    grid-template-columns: 1fr minmax(0, 1fr);
    column-gap: var(--spalten-abstand);
  }

  /* Text oben. Darunter bleibt immer Platz für den linken Baum der Zeichnung,
     der als einziger Teil in die Textspalte ragt (oberstes Ende bei 37 % der
     Zeichnungshöhe über ihrer Unterkante; die Zeichnung ist höchstens 0,75-mal
     so hoch wie die Textspalte breit, also reichen 30 % der Spaltenbreite plus
     24px Luft plus der Abstand der Zeichnung zur Unterkante). In niedrigen
     Fenstern entfällt der Platz (siehe unten). */
  .hero-inhalt {
    position: relative;
    z-index: 1;
    align-self: start;
    padding-bottom: max(0px, calc(30% + 24px + var(--luft-unten) - var(--abstand-hero-unten)));
  }

  /* Ohne Trennung zählt „Hausverwaltung“ als ein Wort, und die Textspalte wird
     mindestens so breit wie das ganze Wort statt nur wie „verwaltung“. */
  .hero h1 {
    hyphens: none;
  }
}

.hero-inhalt {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero h1 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 300;
  font-size: var(--groesse-h1-start);
  line-height: 1;
  letter-spacing: -0.025em;
}

.lead {
  margin: 0;
  max-width: var(--breite-lead);
  font-size: var(--groesse-lead);
  line-height: 1.6;
  text-wrap: pretty;
}

.hero-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-top: 8px;
  font-size: var(--groesse-nav);
  font-weight: 500;
}

.hero-nav a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* --- Startseite: Strichzeichnung im Hero ------------------------------------
   Jedes Element zeichnet sich nacheinander (Verzögerungen aus der Vorlage),
   die drei Baumkronen füllen sich danach mit der Papierfarbe. */

@keyframes bz-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes bz-fill {
  to {
    fill-opacity: 1;
  }
}

/* Rechtsbündig, Bodenlinie wie in der Vorlage auf der Unterkante des Hero
   (negativer Abstand in Höhe des unteren Innenabstands). */
.zeichnung {
  display: block;
  justify-self: end;
  align-self: end;
  width: min(100%, 560px);
  height: auto;
  margin-bottom: calc(-1 * var(--abstand-hero-unten));
  opacity: 0.9;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%);
  mask-image: linear-gradient(to right, transparent 0%, #000 35%);
}

/* Ab 1100px ragt die Zeichnung um 20 % ihrer Breite nach links aus ihrer
   Spalte, wie in der Vorlage. Dort ist sie leer: Dach und Obergeschoss beginnen
   erst bei 24 %, die Balkone bei 16 % ihrer Breite (dazu der Spaltenabstand),
   nur der linke Baum (ab 3 %) reicht in die Textspalte, und zwar unter die
   Navigation (siehe .hero-inhalt). Die Grundlinie steht --luft-unten über der
   Unterkante des Hero. check_browser.py prüft jede gezeichnete Linie gegen jede
   Textzeile. (viewBox 606 breit, damit die rechte Baumkrone bis x = 604,5 nicht
   abgeschnitten wird.) */
@media (min-width: 68.75em) {
  .zeichnung {
    --breite-zeichnung: calc(100% / 0.8);
    justify-self: start;
    width: var(--breite-zeichnung);
    margin-left: calc(100% - var(--breite-zeichnung));
    margin-bottom: calc(var(--luft-unten) - var(--abstand-hero-unten));
  }
}

/* Niedrige Fenster (unter 780px Höhe): Hier reicht der Platz unter dem Text
   nicht für den Baum, ohne dass der Hero höher als das Fenster wird und die
   Grundlinie unter der Kante liegt. Deshalb bleibt die Zeichnung in ihrer Spalte
   und ragt höchstens in den Spaltenabstand (minus 8px; der linke Baum beginnt bei
   3 % ihrer Breite, liegt also immer rechts der Textspalte). Sie ist höchstens so
   hoch wie der Hero unter dem oberen Abstand (606/364 ist das Seitenverhältnis
   der viewBox). Kleinere Abstände oben und unten. Grundlinie so ab etwa 520px
   Fensterhöhe sichtbar. */
@media (min-width: 68.75em) and (max-height: 48.6875em) {
  .hero {
    --abstand-hero-oben: clamp(32px, 6svh, 80px);
    --abstand-hero-unten: clamp(32px, 6svh, 96px);
  }

  .hero-inhalt {
    padding-bottom: 0;
  }

  .zeichnung {
    --breite-zeichnung: min(calc(100% + var(--spalten-abstand) - 8px),
      calc((100svh - var(--hoehe-kopf) - var(--abstand-hero-oben) - var(--luft-unten)) * 606 / 364));
  }
}

.zeichnung > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: bz-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.zeichnung > .krone {
  fill: var(--farbe-papier);
  fill-opacity: 0;
  animation-name: bz-draw, bz-fill;
  animation-duration: 1.6s, 0.8s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1), ease;
  animation-fill-mode: forwards;
}

.zeichnung > :nth-child(1) { animation-delay: 0.00s; }
.zeichnung > :nth-child(2) { animation-delay: 0.02s; }
.zeichnung > :nth-child(3) { animation-delay: 0.05s; }
.zeichnung > :nth-child(4) { animation-delay: 0.07s; }
.zeichnung > :nth-child(5) { animation-delay: 0.10s; }
.zeichnung > :nth-child(6) { animation-delay: 0.12s; }
.zeichnung > :nth-child(7) { animation-delay: 0.14s; }
.zeichnung > :nth-child(8) { animation-delay: 0.17s; }
.zeichnung > :nth-child(9) { animation-delay: 0.19s; }
.zeichnung > :nth-child(10) { animation-delay: 0.22s; }
.zeichnung > :nth-child(11) { animation-delay: 0.24s; }
.zeichnung > :nth-child(12) { animation-delay: 0.26s; }
.zeichnung > :nth-child(13) { animation-delay: 0.29s; }
.zeichnung > :nth-child(14) { animation-delay: 0.31s; }
.zeichnung > :nth-child(15) { animation-delay: 0.34s; }
.zeichnung > :nth-child(16) { animation-delay: 0.36s; }
.zeichnung > :nth-child(17) { animation-delay: 0.38s; }
.zeichnung > :nth-child(18) { animation-delay: 0.41s; }
.zeichnung > :nth-child(19) { animation-delay: 0.43s; }
.zeichnung > :nth-child(20) { animation-delay: 0.46s; }
.zeichnung > :nth-child(21) { animation-delay: 0.48s; }
.zeichnung > :nth-child(22) { animation-delay: 0.50s; }
.zeichnung > :nth-child(23) { animation-delay: 0.53s; }
.zeichnung > :nth-child(24) { animation-delay: 0.55s; }
.zeichnung > :nth-child(25) { animation-delay: 0.58s; }
.zeichnung > :nth-child(26) { animation-delay: 0.60s; }
.zeichnung > :nth-child(27) { animation-delay: 0.62s; }
.zeichnung > :nth-child(28) { animation-delay: 0.65s; }
.zeichnung > :nth-child(29) { animation-delay: 0.67s; }
.zeichnung > :nth-child(30) { animation-delay: 0.70s; }
.zeichnung > :nth-child(31) { animation-delay: 0.72s; }
.zeichnung > :nth-child(32) { animation-delay: 0.74s; }
.zeichnung > :nth-child(33) { animation-delay: 0.77s; }
.zeichnung > :nth-child(34) { animation-delay: 0.79s; }
.zeichnung > :nth-child(35) { animation-delay: 0.82s; }
.zeichnung > :nth-child(36) { animation-delay: 0.84s; }
.zeichnung > :nth-child(37) { animation-delay: 0.86s; }
.zeichnung > :nth-child(38) { animation-delay: 0.89s; }
.zeichnung > :nth-child(39) { animation-delay: 0.91s; }
.zeichnung > :nth-child(40) { animation-delay: 0.94s; }
.zeichnung > :nth-child(41) { animation-delay: 0.96s; }
.zeichnung > :nth-child(42) { animation-delay: 0.98s; }
.zeichnung > :nth-child(43) { animation-delay: 1.01s; }
.zeichnung > :nth-child(44) { animation-delay: 1.03s; }
.zeichnung > :nth-child(45) { animation-delay: 1.06s; }
.zeichnung > :nth-child(46) { animation-delay: 1.08s; }
.zeichnung > :nth-child(47) { animation-delay: 1.10s; }
.zeichnung > :nth-child(48) { animation-delay: 1.13s; }
.zeichnung > :nth-child(49) { animation-delay: 1.15s; }
.zeichnung > :nth-child(50) { animation-delay: 1.18s; }
.zeichnung > :nth-child(51) { animation-delay: 1.20s; }
.zeichnung > :nth-child(52) { animation-delay: 1.22s; }
.zeichnung > :nth-child(53) { animation-delay: 1.25s; }
.zeichnung > :nth-child(54) { animation-delay: 1.27s; }
.zeichnung > :nth-child(55) { animation-delay: 1.30s; }
.zeichnung > :nth-child(56) { animation-delay: 1.32s; }
.zeichnung > :nth-child(57) { animation-delay: 1.34s; }
.zeichnung > :nth-child(58) { animation-delay: 1.37s; }
.zeichnung > :nth-child(59) { animation-delay: 1.39s; }
.zeichnung > :nth-child(60) { animation-delay: 1.42s; }
.zeichnung > :nth-child(61) { animation-delay: 1.44s; }
.zeichnung > :nth-child(62) { animation-delay: 1.46s; }
.zeichnung > :nth-child(63) { animation-delay: 1.49s; }
.zeichnung > :nth-child(64) { animation-delay: 1.51s; }
.zeichnung > :nth-child(65) { animation-delay: 1.54s; }
.zeichnung > :nth-child(66) { animation-delay: 1.56s; }
.zeichnung > :nth-child(67) { animation-delay: 1.58s; }
.zeichnung > :nth-child(68) { animation-delay: 1.61s; }
.zeichnung > :nth-child(69) { animation-delay: 1.63s; }
.zeichnung > :nth-child(70) { animation-delay: 1.66s; }
.zeichnung > :nth-child(71) { animation-delay: 1.68s; }
.zeichnung > :nth-child(72) { animation-delay: 1.70s; }
.zeichnung > :nth-child(73) { animation-delay: 1.73s; }
.zeichnung > :nth-child(74) { animation-delay: 1.75s; }
.zeichnung > :nth-child(75) { animation-delay: 1.78s; }
.zeichnung > :nth-child(76) { animation-delay: 1.80s; }
.zeichnung > :nth-child(77) { animation-delay: 1.82s; }
.zeichnung > :nth-child(78) { animation-delay: 1.85s; }
.zeichnung > :nth-child(79) { animation-delay: 1.87s; }
.zeichnung > :nth-child(80) { animation-delay: 1.90s; }
.zeichnung > :nth-child(81) { animation-delay: 1.92s; }
.zeichnung > :nth-child(82) { animation-delay: 1.94s; }
.zeichnung > :nth-child(83) { animation-delay: 1.97s; }
.zeichnung > :nth-child(84) { animation-delay: 1.99s; }
.zeichnung > :nth-child(85) { animation-delay: 2.02s; }
.zeichnung > :nth-child(86) { animation-delay: 2.04s; }
.zeichnung > :nth-child(87) { animation-delay: 2.06s; }
.zeichnung > :nth-child(88) { animation-delay: 2.09s; }
.zeichnung > :nth-child(89) { animation-delay: 2.11s; }
.zeichnung > :nth-child(90) { animation-delay: 2.14s; }
.zeichnung > :nth-child(91) { animation-delay: 2.16s; }
.zeichnung > :nth-child(92) { animation-delay: 2.18s; }
.zeichnung > :nth-child(93) { animation-delay: 2.21s; }
.zeichnung > :nth-child(94) { animation-delay: 2.23s; }
.zeichnung > :nth-child(95) { animation-delay: 2.26s; }
.zeichnung > :nth-child(96) { animation-delay: 2.28s; }
.zeichnung > :nth-child(97) { animation-delay: 2.30s; }
.zeichnung > :nth-child(98) { animation-delay: 2.33s; }
.zeichnung > :nth-child(99) { animation-delay: 2.35s; }
.zeichnung > :nth-child(100) { animation-delay: 2.38s; }
.zeichnung > :nth-child(101) { animation-delay: 2.5s; }
.zeichnung > :nth-child(102) { animation-delay: 2.65s, 3.25s; }
.zeichnung > :nth-child(103) { animation-delay: 2.75s; }
.zeichnung > :nth-child(104) { animation-delay: 2.9s, 3.50s; }
.zeichnung > :nth-child(105) { animation-delay: 2.95s; }
.zeichnung > :nth-child(106) { animation-delay: 3.1s, 3.70s; }

/* --- Startseite: Abschnitte ------------------------------------------------ */

.abschnitt-flaeche {
  background: var(--farbe-flaeche);
}

.abschnitt-innen {
  max-width: var(--breite-seite);
  width: 100%;
  margin: 0 auto;
  padding: var(--abstand-abschnitt) var(--rand);
}

.abschnitt h2 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 300;
  font-size: var(--groesse-h2);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.text {
  margin: 0;
  font-size: var(--groesse-text);
  line-height: 1.65;
  text-wrap: pretty;
}

.text-mittel {
  max-width: var(--breite-lead);
}

.text-schmal {
  max-width: var(--breite-schmal);
}

strong {
  font-weight: 600;
}

/* Wofür wir zuständig sind */

.abschnitt h2.zustaendigkeiten-titel {
  margin-bottom: var(--abstand-h2);
}

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  background: var(--farbe-raster);
  border: 1px solid var(--farbe-raster);
}

.karte {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--abstand-karte);
  background: var(--farbe-karte);
}

.karte h3 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: var(--groesse-karte);
  line-height: 1.15;
}

.karte p {
  margin: 0;
  font-size: var(--groesse-text-klein);
  line-height: 1.7;
  text-wrap: pretty;
}

/* Unsere Objekte */

.objekte-kopf {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: var(--breite-intro);
  margin-bottom: var(--abstand-intro);
}

.objekte-liste {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--farbe-linie);
}

.objekt {
  border-bottom: 1px solid var(--farbe-linie);
}

.objekt summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 24px;
  padding: var(--abstand-summary) 0;
  list-style: none;
  cursor: pointer;
}

.objekt summary::-webkit-details-marker {
  display: none;
}

.objekt-ort {
  grid-column: 1;
  font-size: var(--groesse-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.objekt h3 {
  grid-column: 1;
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 300;
  font-size: var(--groesse-objekt);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.objekt-symbol {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
}

.strich-h,
.strich-v {
  position: absolute;
  background: var(--farbe-text);
}

.strich-h {
  left: 0;
  right: 0;
  top: 10.5px;
  height: 1px;
}

.strich-v {
  top: 0;
  bottom: 0;
  left: 10.5px;
  width: 1px;
  transition: transform 0.25s;
}

.objekt[open] .strich-v {
  transform: scaleY(0);
}

/* Windows-Kontrastmodus entfernt Hintergründe: Plus/Minus in der Systemtextfarbe */
@media (forced-colors: active) {
  .strich-h,
  .strich-v {
    background: CanvasText;
  }
}

.objekt-inhalt {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: var(--breite-lesen);
  padding: 0 0 var(--abstand-details);
}

/* Höchstens etwa 70–75 Zeichen pro Zeile (wie bei .recht-block) */
.objekt-inhalt .text {
  max-width: var(--breite-zeile);
}

.fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin: 0;
  border-top: 1px solid var(--farbe-linie);
}

.fakten > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px 14px 0;
}

.fakten dt {
  font-size: var(--groesse-dt);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fakten dd {
  margin: 0;
  font-size: var(--groesse-fakt);
  line-height: 1.5;
}

/* Kontakt */

.kontakt {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kontakt-mail {
  align-self: flex-start;
  max-width: 100%;
  font-family: var(--schrift-titel);
  font-weight: 300;
  font-size: var(--groesse-mail);
  line-height: 1.2;
}

/* Satz, der nur als Ganzes in die nächste Zeile rutscht; ist er breiter als die
   Zeile (schmale Fenster, große Schrift), bricht er normal um. */
.satz {
  display: inline-block;
  max-width: 100%;
}

/* „immer“: fett wie die übrigen Hervorhebungen im Satz statt unterstrichen
   (Abweichung von der Vorlage, damit es nicht wie ein Link aussieht). */
.hervorhebung {
  font-style: normal;
  font-weight: 600;
}

/* --- Unterseiten: Impressum, Datenschutz (und 404) ------------------------ */

.unterseite {
  max-width: var(--breite-seite);
  width: 100%;
  margin: 0 auto;
  padding: var(--abstand-seite-oben) var(--rand) var(--abstand-hero-unten);
}

.unterseite-inhalt {
  display: flex;
  flex-direction: column;
  max-width: var(--breite-lesen);
}

.zurueck {
  width: fit-content;
  margin-bottom: 28px;
  font-size: var(--groesse-meta);
  font-weight: 500;
  text-decoration: none;
}

.zurueck:hover {
  text-decoration: underline;
}

.unterseite h1 {
  margin: 0 0 20px;
  font-family: var(--schrift-titel);
  font-weight: 300;
  font-size: var(--groesse-h1);
  line-height: 1;
  letter-spacing: -0.025em;
}

.recht-zusatz {
  margin: 0 0 clamp(36px, 5vw, 56px);
  font-family: var(--schrift-titel);
  font-weight: 300;
  font-size: var(--groesse-zusatz);
  line-height: 1.1;
}

.recht-stand {
  margin: 0 0 clamp(20px, 3vw, 36px);
  font-size: var(--groesse-meta);
}

.recht-block {
  display: flex;
  flex-direction: column;
  padding: 28px 0;
  border-top: 1px solid var(--farbe-linie);
}

.recht-block p {
  margin: 0 0 12px;
  max-width: var(--breite-zeile);
  font-size: var(--groesse-text-klein);
  line-height: 1.7;
  text-wrap: pretty;
}

.recht-block h2 {
  margin: 0 0 14px;
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: var(--groesse-h2-impr);
  line-height: 1.2;
}

.recht-block h3 {
  margin: 14px 0 10px;
  font-family: var(--schrift-titel);
  font-weight: 400;
  font-size: var(--groesse-h3-recht);
  line-height: 1.25;
}

.recht-block h4 {
  margin: 6px 0;
  font-size: var(--groesse-text-klein);
  font-weight: 600;
  line-height: 1.5;
}

.recht-block ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: var(--breite-zeile);
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: var(--groesse-text-klein);
  line-height: 1.7;
}

/* Datenschutzerklärung: größere Abschnitte und Überschriften als im Impressum */
.recht-datenschutz .recht-block {
  padding: 36px 0 22px;
}

.recht-datenschutz .recht-block p {
  margin-bottom: 14px;
}

.recht-datenschutz .recht-block h2 {
  margin-bottom: 22px;
  font-size: var(--groesse-h2-recht);
  line-height: 1.15;
}

/* 404-Seite */

.fehler {
  gap: 24px;
}

.fehler h1 {
  margin: 0;
}

.kicker {
  margin: 0;
  font-size: var(--groesse-kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fehler-link {
  width: fit-content;
  font-size: var(--groesse-nav);
  font-weight: 500;
}

/* Reduzierte Bewegung: Zeichnung sofort fertig, keine Übergänge */

@media (prefers-reduced-motion: reduce) {
  .zeichnung > *,
  .zeichnung > .krone {
    animation: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }

  .strich-v {
    transition: none;
  }
}

/* --- Startseite: Einblenden beim Scrollen -----------------------------------
   site.js setzt „js-einblenden“ am html-Element und „sichtbar“ an jedem Element
   mit „einblenden“, sobald es ins Bild kommt. Ohne Skript und bei reduzierter
   Bewegung greift nichts davon, alles ist sofort sichtbar.
   Karten und Objekte blenden als Ganzes ein (Raster und Trennlinien bleiben
   zusammen); ihr Inhalt folgt je Karte bzw. Objekt etwas später. */

@media (prefers-reduced-motion: no-preference) {
  .js-einblenden .einblenden {
    opacity: 0;
    translate: 0 36px;
    transition:
      opacity 0.8s ease-out,
      translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .js-einblenden .karten .karte > *,
  .js-einblenden .objekte-liste .objekt summary > * {
    opacity: 0;
    translate: 0 16px;
    transition:
      opacity 0.7s ease-out,
      translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .js-einblenden .einblenden.sichtbar,
  .js-einblenden .karten.sichtbar .karte > *,
  .js-einblenden .objekte-liste.sichtbar .objekt summary > * {
    opacity: 1;
    translate: none;
  }

  /* Fokus immer sofort sichtbar: Ein per Tab fokussiertes Element (oder ein
     Element, das es enthält) ist voll sichtbar, auch wenn es noch nicht
     eingeblendet wurde, z. B. ganz unten am Fensterrand. */
  .js-einblenden .einblenden:focus-within,
  .js-einblenden .objekte-liste:focus-within .objekt summary > * {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .js-einblenden .karten.sichtbar .karte > * { transition-delay: 0.15s; }
  .js-einblenden .karten.sichtbar .karte:nth-child(2) > * { transition-delay: 0.3s; }
  .js-einblenden .karten.sichtbar .karte:nth-child(3) > * { transition-delay: 0.45s; }
  .js-einblenden .objekte-liste.sichtbar .objekt summary > * { transition-delay: 0.15s; }
  .js-einblenden .objekte-liste.sichtbar .objekt:nth-child(2) summary > * { transition-delay: 0.3s; }
}

/* Beim Drucken immer alles zeigen */
@media print {
  .js-einblenden .einblenden,
  .js-einblenden .karten .karte > *,
  .js-einblenden .objekte-liste .objekt summary > * {
    opacity: 1;
    translate: none;
  }
}

/* --- Fußzeile -------------------------------------------------------------- */

.fuss {
  background: var(--farbe-papier);
  border-top: 1px solid var(--farbe-linie);
}

.fuss-innen {
  max-width: var(--breite-seite);
  margin: 0 auto;
  padding: 28px var(--rand);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  font-size: var(--groesse-fuss);
  line-height: 1.65;
}

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.fuss a {
  text-decoration: none;
}

.fuss a:hover {
  text-decoration: underline;
}

/* Link der aktuellen Seite: fett, weil Unterstreichen schon der Hover-Zustand ist. */
.fuss a[aria-current="page"] {
  font-weight: 600;
}