/* ============================================================
   GÄRTNEREI HOHN — BASIS & LAYOUT
   Aufbau der Broschüre 2026 in Web übersetzt:
   viel Weiß · tiefgrüne Flächen · weit gesperrte dünne Headlines
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;   /* damit Anker nicht unter dem Header liegen */
}

body {
  font-family: var(--schrift);
  font-size: var(--fs-basis);
  line-height: 1.7;
  color: var(--hohn-tinte);
  background: var(--hohn-weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--hohn-sand); }   /* kein Weiß-Blitz beim Laden */

/* ---------- Skip-Link (WCAG 2.4.1) ---------- */
.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--hohn-gruen); color: #fff;
  padding: .85rem 1.5rem; font-weight: 700; font-size: var(--fs-klein);
  letter-spacing: var(--sperr-mittel); text-decoration: none;
  transition: top var(--tempo);
}
.skip:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
h1, h2, h3, h4 { font-weight: 200; line-height: 1.22; color: var(--hohn-gruen); }

h1 { font-size: var(--fs-h1); letter-spacing: var(--sperr-eng); }
h2 { font-size: var(--fs-h2); letter-spacing: .06em; }
h3 { font-size: var(--fs-h3); letter-spacing: var(--sperr-mittel); font-weight: 700;
     text-transform: uppercase; color: var(--hohn-tinte); }
h4 { font-size: var(--fs-klein); letter-spacing: var(--sperr-weit); font-weight: 700;
     text-transform: uppercase; color: var(--hohn-gruen); }

/* Der zweite Teil der Headline steht IMMER in einer eigenen Zeile.
   Ohne display:block klebten die Sätze aneinander:
   „Die Inseldes ewigen Frühlings." — genau das war der Fehler. */
h1 b, h2 b { font-weight: 700; letter-spacing: var(--sperr-eng); display: block; }

p { max-width: var(--max-text); }

.dach {           /* die kleine Zeile über der Headline */
  font-size: var(--fs-mikro);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hohn-erde);
  margin-bottom: 1rem;
}
.blei {           /* Vorspann */
  font-size: var(--fs-blei);
  font-weight: 300;
  color: var(--hohn-grau);
  line-height: 1.75;
  margin-top: 1.5rem;
}

a { color: var(--hohn-gruen); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--hohn-gruen-tief); }

/* ============================================================
   RASTER
   ============================================================ */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--rand); }
section { padding-block: var(--luft); }
section.eng  { padding-block: var(--luft-s); }
section.weit { padding-block: var(--luft-l); }

.flaeche-gruen { background: var(--hohn-gruen); color: #fff; }
.flaeche-gruen h2, .flaeche-gruen h4 { color: #fff; }
.flaeche-gruen h3 { color: #fff; }
.flaeche-gruen .blei { color: rgba(255,255,255,.82); }
.flaeche-gruen .dach { color: rgba(255,255,255,.78); }   /* .6 war 4,03:1 — durchgefallen. .78 = 5,4:1 */
.flaeche-gruen a { color: #fff; }

.flaeche-sand  { background: var(--hohn-sand); }
.flaeche-nacht { background: var(--hohn-gruen-nacht); color: #fff; }
.flaeche-nacht h2, .flaeche-nacht h4 { color: #fff; }
.flaeche-nacht .blei { color: rgba(255,255,255,.75); }
.flaeche-nacht .dach { color: var(--hohn-erde-hell); }   /* dunkles Terrakotta wäre nur 3,0:1 */
.flaeche-nacht h3    { color: #fff; }

/* ============================================================
   KNÖPFE
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 2rem;
  font-size: var(--fs-klein); font-weight: 700;
  letter-spacing: var(--sperr-mittel); text-transform: uppercase;
  text-decoration: none; border: 1.5px solid var(--hohn-gruen);
  color: var(--hohn-gruen); background: transparent;
  cursor: pointer; transition: all var(--tempo);
  border-radius: var(--radius);
}
.btn:hover, .btn:focus-visible { background: var(--hohn-gruen); color: #fff; }
.btn--voll { background: var(--hohn-gruen); color: #fff; }
.btn--voll:hover, .btn--voll:focus-visible { background: transparent; color: var(--hohn-gruen); }
.btn--hell { border-color: #fff; color: #fff; }
.btn--hell:hover, .btn--hell:focus-visible { background: #fff; color: var(--hohn-gruen); }
.btn--hell-voll { background: #fff; color: var(--hohn-gruen); border-color: #fff; }
.btn--hell-voll:hover, .btn--hell-voll:focus-visible { background: transparent; color: #fff; }
.btn--dark { background: var(--hohn-gruen-nacht); color: #fff; border-color: var(--hohn-gruen-nacht); }

/* Der Baukasten schreibt im Consent-Dialog .btn-primary / .btn-outline.
   Wir übersetzen das hier auf unsere Knöpfe, statt den Baukasten anzufassen.
   Ohne diese zwei Zeilen wäre "Alle akzeptieren" von "Nur notwendige"
   nicht zu unterscheiden. */
.btn-primary { background: var(--hohn-gruen); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--hohn-gruen-tief); border-color: var(--hohn-gruen-tief); color: #fff; }
.btn-outline { background: transparent; color: var(--hohn-gruen); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }

/* ============================================================
   KOPF
   ============================================================ */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hohn-linie);
}
.kopf__innen {
  max-width: var(--max); margin-inline: auto; padding: .9rem var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.marke { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.marke img { height: 52px; width: auto; background: none; }
.marke__text { line-height: 1.1; }
.marke__name {
  display: block; font-size: 1.35rem; font-weight: 800;
  letter-spacing: .14em; color: var(--hohn-gruen);
}
.marke__zeile {
  display: block; font-size: .5rem; font-weight: 700;
  letter-spacing: .16em; color: var(--hohn-grau); margin-top: 2px;
}

.nav ul { display: flex; gap: 1.6rem; list-style: none; }
.nav a {
  font-size: var(--fs-mikro); font-weight: 700;
  letter-spacing: var(--sperr-mittel); text-transform: uppercase;
  color: var(--hohn-grau); text-decoration: none;
  padding: .5rem 0; border-bottom: 2px solid transparent;
  transition: all var(--tempo);
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] {
  color: var(--hohn-gruen); border-color: var(--hohn-gruen);
}

.sprachen { display: flex; gap: .35rem; align-items: center; font-size: var(--fs-mikro); font-weight: 700; letter-spacing: var(--sperr-mittel); }
.sprachen a { color: var(--hohn-grau-hell); text-decoration: none; padding: .25rem; }
.sprachen a[aria-current="true"] { color: var(--hohn-gruen); }
.sprachen span { color: var(--hohn-linie); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: .6rem; }
.burger span { display: block; width: 24px; height: 2px; background: var(--hohn-gruen); margin: 5px 0; transition: all var(--tempo); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   BÜHNE
   ============================================================ */
.buehne { display: grid; grid-template-columns: minmax(0,42%) minmax(0,58%); min-height: min(88vh, 780px); }
.buehne__text {
  background: var(--hohn-gruen); color: #fff;
  padding: var(--luft) var(--rand);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.buehne__text::after {
  content: ""; position: absolute; right: -160px; bottom: -160px;
  width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%;
}
.buehne__innen { max-width: 34rem; margin-left: auto; position: relative; z-index: 1; }
.claim {
  font-size: var(--fs-mikro); letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: 1.75rem;
}
.buehne h1 { color: #fff; }
.buehne__text p { color: rgba(255,255,255,.9); font-weight: 300; font-size: var(--fs-blei); margin-top: 1.5rem; }

.buehne__bild { position: relative; background: var(--hohn-gruen-nacht); min-height: 340px; }
.buehne__bild img, .buehne__bild video { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   FAKTENBAND  (der GEO-Baustein)
   ============================================================ */
.fakten { background: var(--hohn-sand); border-block: 1px solid var(--hohn-sand-tief); }
.fakten__innen {
  max-width: var(--max); margin-inline: auto; padding: var(--luft-s) var(--rand);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; text-align: center;
}
.fakt__zahl {
  font-size: var(--fs-zahl); font-weight: 200; color: var(--hohn-gruen);
  letter-spacing: var(--sperr-eng); line-height: 1.1;
}
.fakt__wort {
  font-size: var(--fs-mikro); letter-spacing: var(--sperr-weit); text-transform: uppercase;
  color: var(--hohn-grau); font-weight: 700; margin-top: .5rem;
}

/* ============================================================
   ZEITLEISTE
   ============================================================ */
.zeit { position: relative; margin-top: var(--luft-s); }
.zeit::before {
  content: ""; position: absolute; inset-inline: 0; top: 6px; height: 1px;
  background: linear-gradient(90deg, var(--hohn-gruen), var(--hohn-gruen-hell));
}
.zeit__reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.zeit__punkt::before {
  content: ""; display: block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--hohn-gruen); margin-bottom: 1.75rem;
  box-shadow: 0 0 0 6px var(--hohn-weiss);
}
.zeit__punkt:last-child::before { background: var(--hohn-erde); }
.zeit__jahr { font-size: 1.9rem; font-weight: 200; color: var(--hohn-gruen); letter-spacing: var(--sperr-eng); }
.zeit__punkt h3 { margin: .5rem 0 .75rem; }
.zeit__punkt p { font-size: var(--fs-klein); color: var(--hohn-grau); font-weight: 300; }

/* ============================================================
   SORTIMENT
   ============================================================ */
.kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: var(--luft-s); }
.kachel { position: relative; aspect-ratio: 3/4; overflow: hidden; display: block;
          text-decoration: none; background: var(--hohn-gruen-nacht); }
.kachel img { width: 100%; height: 100%; object-fit: cover; opacity: .88;
              transition: transform var(--tempo-lang), opacity var(--tempo); }
.kachel:hover img, .kachel:focus-visible img { transform: scale(1.06); opacity: 1; }
.kachel__text {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1.75rem 1.5rem;
  background: linear-gradient(transparent, rgba(28,34,31,.92));
}
.kachel__name {
  display: block; font-size: var(--fs-klein); letter-spacing: var(--sperr-weit);
  text-transform: uppercase; color: #fff; font-weight: 700;
}
.kachel__bot {
  display: block; font-size: var(--fs-mikro); color: rgba(255,255,255,.7);
  margin-top: .35rem; font-weight: 300; font-style: italic;
}

/* ============================================================
   ZWEISPALTER (Amir, Broschüre)
   ============================================================ */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luft-s); align-items: center; }
.zitat {
  border-left: 3px solid var(--hohn-erde); padding-left: 1.5rem; margin-top: 2rem;
  font-size: var(--fs-blei); font-weight: 300; font-style: italic; color: var(--hohn-tinte);
}
.zitat cite {
  display: block; font-size: var(--fs-mikro); letter-spacing: var(--sperr-eng);
  color: var(--hohn-grau); margin-top: .9rem; font-style: normal;
}

/* ============================================================
   NACHHALTIGKEIT
   ============================================================ */
.gruen-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: var(--luft-s); }
.gruen-feld { background: #fff; padding: 2.25rem 2rem; border-top: 3px solid var(--hohn-gruen); }
.gruen-feld h3 { color: var(--hohn-gruen); margin-bottom: .75rem; font-size: var(--fs-klein); }
.gruen-feld p { font-size: var(--fs-klein); color: var(--hohn-grau); font-weight: 300; }
.siegel { display: flex; gap: 1rem; margin-top: var(--luft-s); flex-wrap: wrap; }
.siegel span {
  border: 1.5px solid var(--hohn-gruen); color: var(--hohn-gruen);
  padding: .7rem 1.4rem; font-size: var(--fs-mikro);
  letter-spacing: var(--sperr-weit); font-weight: 700;
}

/* ============================================================
   BROSCHÜRE — der Kopf des Abschnitts
   ------------------------------------------------------------
   ⛔ HIER STAND EINE ATTRAPPE.
   Ein nachgebautes Buch aus leeren Kästen mit grauen Strichen,
   das im Kreis blätterte: `.buch`, `.buch__seite`, `.buch__zeile`
   und die Animation `blaettern`. Ein Bild von einem Buch.

   Sie ist ersetzt durch das ECHTE Blätterbuch — 36 Seiten aus
   der Druckdatei, zum Durchblättern. Es wohnt in
   `10-blaetterbuch.css` und wird nur auf der Startseite geladen.
   Die alten Regeln sind ersatzlos weg; sie hatten keinen
   Verwender mehr (geprüft, nicht vermutet).
   ============================================================ */
.bro-kopf {
  max-inline-size: 46rem;
  margin-inline: auto;
  text-align: center;
}
.bro-kopf .blei { margin-inline: auto; }

/* ============================================================
   FUSS
   ============================================================ */
.fuss { background: var(--hohn-gruen-nacht); color: rgba(255,255,255,.72); padding-block: var(--luft) 2.5rem; }
.fuss__raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; }
.fuss h4 { color: #fff; margin-bottom: 1.1rem; }
.fuss a { color: rgba(255,255,255,.72); text-decoration: none; }
.fuss a:hover, .fuss a:focus-visible { color: #fff; text-decoration: underline; }
.fuss strong { color: #fff; font-weight: 700; }
.fuss ul { list-style: none; }
.fuss li { margin-bottom: .3rem; font-size: var(--fs-klein); }
.fuss address { font-style: normal; font-size: var(--fs-klein); }

.sozial { display: flex; gap: .6rem; margin-top: 1.5rem; flex-wrap: wrap; }
.sozial a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.26);
  transition: all var(--tempo); border-radius: var(--radius);
}
.sozial a:hover, .sozial a:focus-visible { background: #fff; border-color: #fff; }
.sozial svg { width: 18px; height: 18px; fill: rgba(255,255,255,.8); transition: fill var(--tempo); }
.sozial a:hover svg, .sozial a:focus-visible svg { fill: var(--hohn-gruen-nacht); }

.fuss__note {
  margin-top: var(--luft-s); padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.13);
  font-size: var(--fs-mikro); color: rgba(255,255,255,.5);
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.fuss__note a { color: rgba(255,255,255,.5); }

/* ============================================================
   MOBIL
   ============================================================ */
@media (max-width: 1024px) {
  .buehne { grid-template-columns: 1fr; }
  .buehne__text { order: 2; padding: var(--luft-s) var(--rand); }
  .buehne__innen { margin-left: 0; }
  .buehne__bild { order: 1; min-height: 52vh; }
  .fakten__innen { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .zeit::before { display: none; }
  .zeit__reihe { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; }
  .gruen-raster { grid-template-columns: 1fr 1fr; }
  .fuss__raster { grid-template-columns: 1fr 1fr; }

  .burger { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px);
    background: #fff; padding: 6rem 2rem 2rem;
    transform: translateX(100%); transition: transform var(--tempo);
    box-shadow: var(--shadow-lg); overflow-y: auto; z-index: 55;
  }
  .nav[data-offen="true"] { transform: translateX(0); }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-bottom: 1px solid var(--hohn-linie); }
  .nav a { display: block; padding: 1.1rem 0; font-size: var(--fs-klein); border: 0; }
}

@media (max-width: 640px) {
  .fakten__innen { grid-template-columns: repeat(2, 1fr); }
  .zeit__reihe   { grid-template-columns: 1fr; }
  .kacheln       { grid-template-columns: 1fr; }
  .gruen-raster  { grid-template-columns: 1fr; }
  .fuss__raster  { grid-template-columns: 1fr; }
  .kachel        { aspect-ratio: 4/3; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .nav, .a11y-toggle, .a11y-panel, .sozial, .buehne__bild { display: none !important; }
  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ============================================================
   UTILITY-KLASSEN  (ersetzen alle Inline-Styles)
   CLAUDE.md §5: Farben kommen aus Tokens, nicht aus style=""
   ============================================================ */
.buehne          { padding-block: 0; }
.duo--luft       { margin-top: var(--luft-s); }
.fig             { margin: 0; }
.bildtext        { margin-top: 1.25rem; }
.klein           { font-size: var(--fs-klein); color: var(--hohn-grau);
                   font-weight: 300; margin-top: .5rem; }
.mt              { margin-top: 1.25rem; }
.klein.mt        { margin-top: 1.25rem; }
.zeit__reihe,
.sozial,
.fuss ul         { list-style: none; }
.fuss__logo      { background: none; margin-bottom: 1.25rem; }
.buch__zeilen    { margin-top: 1rem; }

/* Footer-Überschriften: semantisch <h2> (contentinfo-Landmark),
   optisch die kleine gesperrte Zeile. Beseitigt den H-Sprung h2->h4. */
.fuss__titel {
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
}
.fuss__titel.mt { margin-top: 1.5rem; }

/* Auf dunklem Grund muss der Fokusring hell sein, sonst säuft er ab. */
.flaeche-gruen :focus-visible,
.flaeche-nacht :focus-visible,
.buehne-voll   :focus-visible,
.fuss          :focus-visible,
.band          :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.flaeche-gruen :focus-visible,
.flaeche-nacht :focus-visible,
.buehne__text  :focus-visible,
.fuss          :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}