/* ============================================================
   SIEGFRIED SCHÖFFAUER Ges.m.b.H.
   Stylesheet — alle Design-Tokens stehen unter :root.
   Farben oder Abstände ändern? Nur dort anfassen.
   ============================================================ */

/* --- Schrift: lokal gehostet, keine externen Requests ------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

/* --- Design-Tokens ----------------------------------------- */
:root {
  --bg: #faf9f7;
  --surface: #ffffff;
  --ink: #16181a;
  --ink-muted: #6b6864;
  /* Kupfer. Kontrast gegen --bg: 4,99:1 — erfuellt WCAG AA (4,5:1)
     auch fuer normal grossen Text wie die Mailadressen. */
  --accent: #8f6244;
  --accent-deep: #6f4a32;
  /* Die beiden Enden des Verlaufs in der Bildmarke: --accent rund 18 Prozent
     heller beziehungsweise dunkler. Wer --accent aendert, muss beide mitziehen. */
  --mark-light: #a97450;
  --mark-dark: #74503a;
  --rule: #e4e0d9;
  /* --bg mit Alpha 0. Wird fuer den weichen Bildrand gebraucht und muss
     mitgeaendert werden, wenn --bg sich aendert. */
  --bg-fade: rgb(250 249 247 / 0);
  --radius: 2px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;

  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 11vh, 8.5rem);
  /* Hoehe der klebenden Kopfzeile. Steht hier, weil ausser dem Header
     auch die Sprungmarken damit rechnen muessen. */
  --header-h: 4.75rem;
  --max-w: 1140px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* verhindert, dass Anker unter dem Sticky-Header verschwinden */
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* --- Fokus: immer sichtbar, nie wegoptimiert ---------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* --- Layout-Bausteine --------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--rule);
  /* Beim Sprung aus der Navigation soll nicht die Oberkante des
     Abschnitts landen, sondern seine Rubrik: sonst steht die
     Trennlinie sichtbar unter der Kopfzeile und darunter die vollen
     --section-y leerer Grund. Der negative Wert zieht den Sprung um
     die eigene Polsterung weiter, abzueglich 2rem Luft. */
  scroll-margin-top: calc(2rem - var(--section-y));
}

.section__label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.75rem;
}

.section__title {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 1.5rem;
}

.prose p {
  max-width: 62ch;
  color: #33363a;
}
.prose p + p {
  margin-top: 1.15rem;
}

/* ============================================================
   Kopfzeile
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 247, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--rule);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1.15;
}

/* Bildmarke: die Form stammt unveraendert aus der Vorlage des Auftraggebers
   (aus der Rastergrafik vektorisiert), nur die Farbe ist auf die Palette der
   Seite umgestellt. Das zweite Band ist die 180-Grad-Drehung des ersten,
   deshalb genuegt ein Pfad. Der Verlauf bildet die Schattierung der Vorlage
   nach; er ist als linearGradient #fold im Markup jeder Seite definiert. */
.brand__mark {
  height: 2.125rem;
  width: auto;
  flex: none;
  fill: url(#fold);
}
.brand__mark-light {
  stop-color: var(--mark-light);
}
.brand__mark-dark {
  stop-color: var(--mark-dark);
}

.brand__name {
  display: block;
  font-size: clamp(0.8125rem, 2.1vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__suffix {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}

/* --- Navigation --------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  /* Als Variable, weil der Sprachumschalter seinen Trenner mittig in
     diese Luecke setzt — beide Werte muessen zusammen bleiben. */
  --nav-gap: 2.25rem;
  gap: var(--nav-gap);
}

.nav__link {
  position: relative;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  transition: color 0.2s var(--ease);
  padding-block: 0.25rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__link:hover {
  color: var(--ink);
}
.nav__link:hover::after,
/* Die aktive Sprache traegt denselben Strich, den die uebrigen Reiter
   beim Ueberfahren zeigen — dauerhaft statt auf Zuruf. */
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav__link[aria-current="page"] {
  color: var(--ink);
}


.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: var(--ink);
}
.nav-toggle__bar {
  display: block;
  width: 21px;
  height: 1.5px;
  margin: 5px auto;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  /* Hoehe der Rubrik samt ihrem Abstand nach unten: Schriftgroesse mal
     geerbter Zeilenhoehe plus margin-bottom. Genau um diesen Betrag
     sitzt die Ueberschrift tiefer als der Beginn der Textspalte —
     das Luftbild bekommt denselben Versatz und steht damit auf einer
     Linie mit "Flaechen fuer". */
  --eyebrow-block: calc(0.6875rem * 1.65 + 1.5rem);
  padding-top: clamp(2.75rem, 8vh, 5.5rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

.hero__inner {
  display: grid;
  /* Der Zeilenabstand steht fest, statt aus der Spaltenluecke zu kommen:
     er traegt jetzt den Abstand zwischen Fliesstext und Adresszeile, der
     frueher als margin-top an .hero__meta hing. */
  column-gap: clamp(2.75rem, 6vw, 4rem);
  row-gap: 2.75rem;
  align-items: center;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
}
.hero__eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.hero__title {
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 16ch;
}
.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__lede {
  margin-top: 1.75rem;
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: #33363a;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.hero__meta span[aria-hidden] {
  color: var(--rule);
}

/* --- Luftbild im Hero --------------------------------------- */
.hero__frame {
  position: relative;
}

/* Die entsaettigte Umgebung am Bildrand laeuft in den Seitengrund aus,
   statt an einer harten Kante zu enden. */
.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--bg), var(--bg-fade) 12%,
                    var(--bg-fade) 88%, var(--bg)),
    linear-gradient(to bottom, var(--bg), var(--bg-fade) 10%,
                    var(--bg-fade) 90%, var(--bg));
}

.hero__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.hero__caption {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ============================================================
   Kennzahlen
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 3.5rem;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.stat {
  background: var(--bg);
  padding: 1.6rem 1.5rem;
}
.stat__value {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1.2;
}
.stat__label {
  /* dd bringt vom Browser 40px Einzug mit; der Reset weiter oben deckt
     dd nicht ab. Ohne diese Zeile stehen die Beschriftungen nicht unter
     ihrem Wert, sondern eingerueckt daneben. Vgl. .legal__data dd. */
  margin-left: 0;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ============================================================
   Team
   ============================================================ */
.team {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 3rem;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.member {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: var(--surface);
  padding: 2rem 1.75rem;
  transition: background 0.3s var(--ease);
}
.member:hover {
  background: #fdfcfb;
}

.member__mono {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: 50%;
}

.member__name {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.member__role {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.member__mail {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
  overflow-wrap: anywhere;
}
.member__mail:hover {
  color: var(--accent-deep);
  border-bottom-color: currentColor;
}

/* ============================================================
   Verbundene Unternehmen
   ============================================================ */
.partner {
  display: block;
  margin-top: 2.5rem;
  padding: 2.25rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.partner:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.partner__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.partner__name {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.partner__arrow {
  flex: none;
  color: var(--accent);
  font-size: 1.05rem;
  transition: transform 0.3s var(--ease);
}
.partner:hover .partner__arrow {
  transform: translate(3px, -3px);
}
.partner__text {
  display: block;
  margin-top: 0.85rem;
  max-width: 58ch;
  color: #33363a;
}
.partner__url {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* ============================================================
   Kontakt
   ============================================================ */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.contact__key {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.9rem;
}

.contact__mail {
  display: inline-block;
  font-size: clamp(1.25rem, 3.2vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2rem;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
  overflow-wrap: anywhere;
}
.contact__mail:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.contact__address {
  font-style: normal;
  line-height: 1.8;
  color: #33363a;
}

/* ============================================================
   Fußzeile
   ============================================================ */
.footer {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer__links a {
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer__links a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ============================================================
   Rechtstexte (Impressum / Datenschutz)
   ============================================================ */
.legal {
  padding-top: clamp(2.25rem, 5.5vh, 3.75rem);
  padding-bottom: var(--section-y);
}
.legal__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.legal__intro {
  margin-top: 1rem;
  max-width: 62ch;
  color: var(--ink-muted);
}
/* Der Verweis auf die andere Sprachfassung steht in der Einleitung und
   waere in --ink-muted nicht als Verweis erkennbar — gleiche Farbe wie
   der Fliesstext, kein Unterstrich. Deshalb dieselbe Behandlung wie im
   Textkoerper: Kupfer, Unterstrich beim Ueberfahren. */
.legal__intro a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
}
.legal__intro a:hover {
  border-bottom-color: currentColor;
}
.legal__body {
  max-width: 68ch;
  margin-top: 3rem;
}
.legal__body h2 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.legal__body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.legal__body h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-top: 1.75rem;
}
.legal__body p,
.legal__body ul {
  margin-top: 0.85rem;
  color: #33363a;
}
.legal__body ul {
  padding-left: 1.15rem;
  list-style: disc;
}
.legal__body li {
  margin-top: 0.4rem;
}
.legal__body a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
  overflow-wrap: anywhere;
}
.legal__body a:hover {
  border-bottom-color: currentColor;
}

.legal__data {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 1.5rem;
}
.legal__data dt {
  overflow-wrap: anywhere;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 1rem;
}
.legal__data dd {
  margin: 0;
  color: #33363a;
}

/* Noch offene Angaben — sichtbar markiert, damit sie vor dem
   Livegang nicht übersehen werden. Siehe README.md.          */
.todo {
  background: #fdf3e7;
  border-bottom: 1px dashed var(--accent);
  padding: 0.1rem 0.4rem;
  color: var(--accent-deep);
  font-size: 0.9375rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3.5rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  transition: color 0.2s var(--ease);
}
.back-link:hover {
  color: var(--accent);
}

/* ============================================================
   Scroll-Reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Ohne JavaScript bleibt nichts unsichtbar. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Breakpoints
   ============================================================ */
/* Das Burger-Menue reicht bis 899 px. Mit sieben Eintraegen passt die
   ausgeschriebene Navigation erst ab 900 px neben die Wortmarke; bei
   720 px blieben nur rund 19 Pixel Reserve. assets/js/main.js prueft
   dieselbe Breite und muss mitwandern. */
@media (max-width: 899px) {
  .nav-toggle {
    display: block;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--pad-x) 1.5rem;
    display: none;
  }
  .nav.is-open {
    display: flex;
  }
  .nav__link {
    padding-block: 0.9rem;
    font-size: 1.0625rem;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .nav__link:last-child {
    border-bottom: 0;
  }
  .nav__link::after {
    display: none;
  }
  /* Im Menue sind alle Zeilen --ink, und der Unterstrich ist aus — die
     aktive Sprache waere sonst nicht von der anderen zu unterscheiden.
     Kupfer ist dieselbe Farbe, die am Desktop den Strich traegt. */
  .nav__link[aria-current="page"] {
    color: var(--accent);
  }

  /* Sieben Kacheln lassen im Zweispalter eine Zelle frei. Die Luecke waere
     kein Weissraum: der 1px-Gap liegt ueber dem Rasterhintergrund, eine leere
     Zelle zeigt sich also als grauer Block. Die letzte Kachel fuellt sie.
     Ab 900 px geht das Raster ohne Rest auf, dort darf die Regel nicht
     mehr greifen — :last-child schluege sonst die Zeilenregeln. */
  .stat:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 719px) {
  .brand__mark {
    height: 1.75rem;
  }

  /* Gestapelt statt nebeneinander — sonst bleibt der Trennstrich
     beim Umbruch allein am Zeilenende stehen. */
  .hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
  }
  .hero__meta span[aria-hidden] {
    display: none;
  }
}

@media (min-width: 720px) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .member {
    padding: 2.5rem 2.25rem;
  }
  .partner {
    padding: 2.75rem 2.5rem;
  }
  .contact {
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
  }
  .legal__data {
    grid-template-columns: 13.5rem 1fr;
  }
  .legal__data dt {
    margin-top: 0.55rem;
  }
  .legal__data dd {
    margin-top: 0.55rem;
  }
}

/* Sieben Eintraege plus Wortmarke werden am unteren Ende der
   Desktop-Breite eng: mit der grossen Luecke blieben bei 900 px nur
   24 Pixel Reserve — zu wenig, solange die Ersatzschrift vor Inter noch
   breiter baut. Ab 1000 px ist wieder Platz fuer den vollen Wert. */
@media (min-width: 900px) and (max-width: 999px) {
  .nav {
    --nav-gap: 1.75rem;
  }
}

/* Ab hier passen Text und Luftbild nebeneinander. */
@media (min-width: 900px) {
  /* Zwei Zeilen mit ungleicher Kachelzahl: oben die drei Objektzahlen,
     unten die vier Belegangaben. Zwoelf Spalten sind der kleinste Nenner —
     oben belegt jede Kachel vier davon, unten drei. 3x4 und 4x3 ergeben
     beide genau zwoelf, damit sind die Zeilen gleich lang und innerhalb
     einer Zeile alle Kacheln gleich breit. Die Fugen im Inneren einer
     spannenden Kachel deckt sie mit ihrem eigenen Hintergrund ab, es
     bleiben also keine grauen Reststriche stehen.

     Mehrspaltig erst ab 900 px, nicht schon ab 560 px. Massgeblich ist
     die schmale zweite Zeile; bei 900 px sind ihre Kacheln 153 px breit
     im Inneren. Gemessen: "Gesellschafter" 125 px, "FN 176805 h" 135 px —
     18 px Reserve, und das ist der engste Fall, weil Wert und Kachel
     darueber gemeinsam mit der Fensterbreite wachsen. Bei 560 px waere
     davon nichts zu halten. */
  .stats {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  /* Zeile 1: Grundstueck, Ausbaupotenzial, Moegliche Stellplaetze */
  .stat:nth-child(-n + 3) {
    grid-column: span 4;
  }
  /* Zeile 2: Gegruendet, Wien-Liesing, Gesellschafter, Firmenbuch */
  .stat:nth-child(n + 4) {
    grid-column: span 3;
  }

  /* Zwei Spalten und zwei Zeilen: Rubrik, Ueberschrift und Fliesstext in
     Zeile 1, die Adresszeile darunter, das Luftbild in Zeile 1 rechts.
     Die Bildspalte wird auf Zeilenhoehe gedehnt und die Bildunterschrift
     per margin-top: auto an deren Unterkante gedrueckt. Damit endet sie
     bei jeder Breite genau dort, wo auch der Fliesstext endet — die
     Bildhoehe haengt am Seitenverhaeltnis, die Texthoehe am Umbruch,
     ein gerechneter Versatz wuerde deshalb nur bei einer Breite stimmen. */
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
  }
  .hero__text {
    grid-column: 1;
    grid-row: 1;
  }
  .hero__meta {
    grid-column: 1;
    grid-row: 2;
  }
  .hero__media {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    margin-top: var(--eyebrow-block);
  }
  .hero__caption {
    margin-top: auto;
    /* haelt den bisherigen Mindestabstand, falls die Bildspalte einmal
       die laengere sein sollte */
    padding-top: 1.25rem;
  }

  /* Gleiche Begruendung wie unter 720 px: In der schmaleren Textspalte
     bricht die Zeile um, und der Trennstrich bliebe allein am Ende stehen. */
  .hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
  }
  .hero__meta span[aria-hidden] {
    display: none;
  }
}

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

/* ============================================================
   Druck
   ============================================================ */
@media print {
  .header,
  .nav-toggle,
  .skip-link,
  .back-link {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  /* Der weiche Bildrand ist auf --bg abgestimmt und wuerde auf
     weissem Papier als cremefarbener Rahmen erscheinen. */
  .hero__frame::after {
    display: none;
  }
}

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