/* ═══════════════════════════════════════════════════════════════════
   Gemüsebau Höhl GbR – Homepage
   Angelegt 27.08.2026.

   Farben: Das Orange ist exakt das Markenorange aus dem Logo und der
   Titellinie auf den Lieferscheinen (#E2670C). Das Grün ist als zweite
   Stimme gesetzt, nicht als Dekoration – es trägt die dunklen Flächen.
   Neutraltöne sind bewusst leicht warm gestimmt statt grau, damit sie
   neben dem Orange nicht kalt wirken.

   Schriften liegen LOKAL unter schrift/. Bewusst keine Einbindung von
   Google Fonts: das lädt bei jedem Aufruf von einem fremden Server und
   überträgt die IP-Adresse der Besucher dorthin – ein Widerspruch zur
   eigenen Datenschutzerklärung und in Deutschland abmahnfähig.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Bitter';
  src: url('schrift/Bitter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bitter';
  src: url('schrift/Bitter-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SourceSans';
  src: url('schrift/SourceSans3-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SourceSans';
  src: url('schrift/SourceSans3-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Das reine Markenorange bleibt für Flächen und GROSSE Schrift (Überschriften,
     Kennzahlen) – dort genügen 3:1, und die erreicht es. Für Knöpfe mit weißer
     Schrift reicht es NICHT (nur 3,4:1), deshalb gibt es dafür einen dunkleren
     Ton. Die Marke bleibt erkennbar, der Text wird lesbar. */
  --orange:      #E2670C;
  --orange-knopf:#B0490A;
  --orange-tief: #A8490A;
  --blatt:       #4A7623;
  --blatt-tief:  #2E4F16;
  --erde:        #2A211A;
  --erde-weich:  #55483E;
  --gedaempft:   #7F7164;
  --papier:      #FDFBF8;
  --sand:        #F5EFE7;
  --linie:       #E6DBCC;
  --bahn:        1180px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--erde);
  font-family: SourceSans, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Bitter, Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(38px, 5.6vw, 58px); letter-spacing: -.015em; }
h2 { font-size: clamp(27px, 3.6vw, 38px); letter-spacing: -.01em; }
/* Fester Umbruch in zweiteiligen Überschriften („A bis B, von C bis D") – der
   liest sich wie ein Zweizeiler statt wie ein durchlaufender Satz. Auf
   schmalen Geräten wird die zweite Hälfte ohnehin umbrochen; dort ist der
   feste Umbruch im Weg und `text-wrap: balance` verteilt besser. */
@media (max-width: 560px) {
  br.umbruch-breit { display: none; }
}
h3 { font-size: 19px; font-weight: 600; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

a { color: var(--orange-tief); }
a:focus-visible, .knopf:focus-visible, .knopf-rand:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}

.bahn { max-width: var(--bahn); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--erde); color: #fff; padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* ── Kopf ──────────────────────────────────────────────────────── */
.kopf {
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 50;
}
.kopf-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 12px; padding-bottom: 12px;
}
/* Der Login-Knopf steht im Quelltext hinter der Navigation, soll aber am rechten
   Rand sitzen – auf dem Handy rutscht er per grid-area nach oben neben das Logo. */
.kopf-innen > .knopf-klein.login { margin-left: auto; }
/* Marke im Kopf: Logo größer, Firmenname in klarer Schrift daneben.
   Der Schriftzug IM Logo ist gestaltet und bei kleiner Darstellung kaum zu
   entziffern – ohne den gesetzten Namen sieht ein Besucher nicht auf einen
   Blick, wo er gelandet ist. Das Logo trägt deshalb ein leeres alt-Attribut:
   der Name steht direkt daneben als Text, eine Wiederholung würde
   Vorleseprogramme nur doppelt ansagen. */
.marke {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit; min-width: 0;
}
.marke img { height: 66px; width: auto; display: block; flex-shrink: 0; }
.marke-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.marke-name {
  font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 20px;
  color: var(--erde); letter-spacing: -.01em; white-space: nowrap;
}
.marke-zusatz { font-size: 13px; color: var(--gedaempft); white-space: nowrap; }
.marke:hover .marke-name { color: var(--orange-tief); }
.nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.nav a {
  color: var(--erde-weich); text-decoration: none; font-weight: 600; font-size: 15.5px;
}
.nav a:hover { color: var(--orange-tief); }
.knopf-klein {
  background: var(--orange-knopf); color: #fff !important;
  padding: 9px 16px; border-radius: 6px; white-space: nowrap;
}
.knopf-klein:hover { background: var(--orange-tief); }

/* Kunden-Login im Kopf: Schloss und Text als eine Einheit, damit sie beim
   Umbrechen auf schmalen Bildschirmen nicht auseinanderfallen. */
/* Schloss und Beschriftung sind die einzigen beiden Flex-Kinder. Die
   Beschriftung MUSS in einem eigenen Element stecken: läge „Kunden-" als
   eigenes <span> direkt im Knopf, wäre es ein zweites Flex-Kind und die
   7 px Abstand fielen mitten ins Wort – „Kunden- Login". */
.knopf-klein.login { display: inline-flex; align-items: center; gap: 7px; }
.login-text { white-space: nowrap; }
.schloss { flex: 0 0 auto; }

/* Der Anmeldeknopf im Kundenabschnitt darf größer sein als die übrigen –
   es ist die einzige Handlung, die dort wirklich zählt. */
.knopf.gross { font-size: 17.5px; padding: 15px 30px; }

/* ── Aufmacher ─────────────────────────────────────────────────── */
.held { background: var(--sand); border-bottom: 1px solid var(--linie); }
.held-innen {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
  padding-top: 72px; padding-bottom: 72px;
}
.held-text { display: flex; flex-direction: column; gap: 22px; }
/* Eine Spur tiefer als das reine Markenorange: auf dem Sandgrund des Aufmachers
   käme #E2670C nur auf genau 3,0:1 und läge damit exakt auf der Grenze für große
   Schrift. Ein Hauch dunkler, und die Überschrift hat Luft. */
.akzent { color: #D25F0B; }
.fuehrung { font-size: 19.5px; color: var(--erde-weich); max-width: 56ch; }
.fuehrung.mitte { margin-left: auto; margin-right: auto; text-align: center; }

.augenbraue {
  font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blatt); margin: 0;
}
.augenbraue.hell-auf-dunkel { color: #A9CE7C; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }
.knopf, .knopf-rand, .knopf-rand-hell {
  display: inline-block; padding: 13px 24px; border-radius: 7px;
  font-weight: 600; text-decoration: none; font-size: 16px;
}
.knopf { background: var(--orange-knopf); color: #fff; }
.knopf:hover { background: var(--orange-tief); }
.knopf-rand { border: 2px solid var(--linie); color: var(--erde); }
.knopf-rand:hover { border-color: var(--orange); color: var(--orange-tief); }
.knopf-rand-hell { border: 2px solid rgba(255,255,255,.35); color: #fff; }
.knopf-rand-hell:hover { border-color: #fff; }

/* ── Bausteine anstelle von Fotos ──────────────────────────────────
   Die Seite kommt ohne Bildmaterial aus. Statt Platzhalterflächen steht
   dort, wo sonst ein Foto wäre, echte Information: Zahlen aus dem Betrieb,
   das Zertifikat, die Anfahrt. Das ist ehrlicher als ein Stimmungsbild und
   gibt dem Leser tatsächlich etwas mit.                                */

/* Tafel: heller Kasten mit Kennwerten. Trägt die rechte Spalte da, wo
   vorher ein Foto stand. */
.tafel {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--orange);
  border-radius: 10px;
  padding: 26px 28px;
  box-shadow: 0 18px 40px -30px rgba(42,33,26,.45);
}
.abschnitt.hell .tafel { background: #fff; }
.tafel-titel {
  font-family: Bitter, Georgia, serif; font-size: 17px; font-weight: 700;
  margin: 0 0 16px;
}
.tafel-text { font-size: 15.5px; color: var(--erde-weich); margin-bottom: 16px; }
.tafel-liste { margin: 0; display: grid; }
.tafel-liste > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 9px 0; border-top: 1px solid var(--linie);
}
.tafel-liste > div:first-child { border-top: 0; }
.tafel-liste dt { color: var(--gedaempft); font-size: 14.5px; }
.tafel-liste dd {
  margin: 0; font-family: Bitter, Georgia, serif; font-weight: 700;
  font-size: 18px; text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Siegel: das Zertifikat als Blickfang. Kein nachgemachtes Logo – nur
   Schrift, Linien und die Nummer, die den Betrieb eindeutig macht. */
.siegel {
  background: var(--papier);
  border: 2px solid var(--blatt);
  border-radius: 12px;
  padding: 32px 30px;
  text-align: center;
}
.abschnitt.hell .siegel { background: #fff; }
.siegel-oben {
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gedaempft); margin: 0 0 6px;
}
.siegel-name {
  font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 27px;
  color: var(--blatt); margin: 0; letter-spacing: -.01em; line-height: 1.1;
}
.siegel-name span { color: var(--erde); }
.siegel-linie {
  height: 2px; width: 54px; background: var(--blatt);
  margin: 18px auto; border-radius: 1px;
}
.siegel-lbl {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gedaempft); margin: 0 0 4px;
}
.siegel-nr {
  font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 25px;
  letter-spacing: .03em; font-variant-numeric: tabular-nums; margin: 0 0 18px;
  word-break: break-all;
}
.siegel-fuss {
  font-size: 14.5px; color: var(--erde-weich); margin: 0;
  max-width: 34ch; margin-left: auto; margin-right: auto;
}
/* Trennlinie zwischen den beiden Nachweisen im selben Feld – zwei getrennte
   Kästen nebeneinander sähen aus, als konkurrierten sie miteinander. */
.siegel-trenner {
  height: 1px; background: var(--linie);
  margin: 26px -14px 24px;
}


/* Amtliche Bildmarken im Siegel-Feld (Geprüfte Qualität Hessen).
   Das Zeichen ist hochformatig (311 × 447) – die Breite wird begrenzt, damit
   es neben dem GLOBALG.A.P.-Block nicht die ganze Spalte füllt. width/height
   im <img> halten den Platz beim Laden frei, sonst springt das Feld.
   ⚠️ Zeichen NICHT umfärben, beschneiden oder verzerren. */
.siegel-bild {
  display: block; margin: 18px auto 4px;
  width: 132px; max-width: 100%; height: auto;
}

/* Einspaltiger Aufmacher: ohne Foto daneben trägt die Schrift allein.
   Deshalb MITTIG statt linksbündig – ein schmaler Textblock am linken Rand einer
   1180 px breiten Bahn sieht aus, als fehle rechts etwas. Genau das war der erste
   Versuch, und genau so wirkte er auch. Mittig gesetzt ist die leere Fläche
   symmetrisch und liest sich als Absicht.
   Die Abschnittsüberschriften weiter unten stehen ohnehin mittig – so bekommt die
   Seite eine durchgehende Achse. */
.held-innen.einspaltig {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 92px; padding-bottom: 84px;
}
.held-innen.einspaltig .held-text {
  align-items: center; text-align: center;
  /* Absolut, nicht in ch: .held-text läuft mit 17px, dort wären 46ch nur rund
     430 px – schmaler als der linksbündige Versuch, den es zu ersetzen gilt.
     Die Einheit ch bezieht sich immer auf die Schriftgröße des Elements selbst.
     880 px, weil die längere Überschriftszeile („Frische aus der Region.") bei
     voller Größe schon rund 730 px belegt – mit 800 px wäre der Abstand so knapp,
     dass sie je nach Schriftrendering umbricht. */
  max-width: 880px; gap: 26px;
}
/* Die Überschrift bricht über das <br> im Text um; text-wrap: balance fängt den Rest.
   Eine zusätzliche Breitenbegrenzung würde nur unkontrolliert dazwischenfunken. */
.held-innen.einspaltig .fuehrung { max-width: 62ch; margin: 0 auto; }
.held-innen.einspaltig .knopfreihe { justify-content: center; }

/* Mittig gesetzter Abschnitt (Kundenbereich ohne Bild daneben) */
.mittig { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: center; }
.mittig .knopfreihe { justify-content: center; }
.mittig .augenbraue { text-align: center; }

/* ── Hofverkauf-Rosette ────────────────────────────────────────────
   Aufgebaut wie eine Turnierrosette: gefältelter Kranz, Medaillon mit der
   Angabe, zwei Bänder darunter.

   Der Fächer entsteht durch einen sich wiederholenden Kegelverlauf (je 9°
   ein Streifen in zwei Orangetönen). Das ist eine einzige Regel und braucht
   weder Bild noch vierzig Einzelelemente.

   Die Bänder liegen HINTER dem Kranz (z-index), damit sie darunter
   hervorzukommen scheinen; der V-Ausschnitt am Ende ist ein clip-path.   */
.rosette {
  position: relative;
  width: 176px; height: 250px;
  margin: 36px auto 0;
  transform: rotate(-4deg);
  flex-shrink: 0;
}

.rosette-kranz {
  position: absolute; left: 0; top: 0;
  width: 176px; height: 176px; border-radius: 50%;
  z-index: 2;
  background: repeating-conic-gradient(from 4deg, #E2670C 0deg 9deg, #B85408 9deg 18deg);
  box-shadow: 0 6px 16px -8px rgba(42,33,26,.55);
}

.rosette-mitte {
  position: absolute; left: 30px; top: 30px;
  width: 116px; height: 116px; border-radius: 50%;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 11px; text-align: center;
  background: var(--papier);
  box-shadow: 0 0 0 2px #A8490A, inset 0 1px 3px rgba(42,33,26,.14);
  color: var(--orange-tief);
}
.rosette-titel {
  font-family: Bitter, Georgia, serif; font-weight: 700;
  font-size: 13px; letter-spacing: .02em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.rosette-tag {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--erde-weich); line-height: 1; margin-top: 3px;
}
.rosette-zeit {
  font-family: Bitter, Georgia, serif; font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap;
  margin-top: 1px;
}

.rosette-band {
  position: absolute; z-index: 1;
  top: 118px; width: 34px; height: 128px;
  background: linear-gradient(180deg, #C25708 0%, #E2670C 45%, #B85408 100%);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
}
.rosette-band.links  { left: 52px; transform: rotate(9deg);  transform-origin: top center; }
.rosette-band.rechts { left: 90px; transform: rotate(-9deg); transform-origin: top center; }

/* Nach rechts oben erst ab 1240 px: darunter reicht der Platz neben der
   Überschrift nicht, die längste Zeile belegt rund 734 px. */
@media (min-width: 1240px) {
  .rosette {
    position: absolute; right: 4px; top: 30px;
    margin: 0; transform: rotate(-5deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .rosette { transition: transform .25s ease; }
  .rosette:hover { transform: rotate(-1deg) scale(1.02); }
}

/* ── Kennzahlenband ────────────────────────────────────────────── */
.band { background: var(--erde); color: #F6F1EA; }
.zahlen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding-top: 40px; padding-bottom: 40px;
}
.zahl { display: flex; flex-direction: column; gap: 4px; }
.zahl strong {
  font-family: Bitter, Georgia, serif; font-size: 40px; line-height: 1;
  color: var(--orange); font-weight: 700;
}
.zahl span { font-size: 15px; color: #C9BDB0; }

/* ── Abschnitte ────────────────────────────────────────────────── */
.abschnitt { padding: 84px 0; }
.abschnitt.hell { background: var(--sand); }
.abschnitt.dunkel { background: var(--blatt-tief); color: #EDF3E2; }
.abschnitt.dunkel h2 { color: #fff; }
.abschnitt.dunkel p { color: #D3E0C2; }
.abschnitt.dunkel .klein { color: #A9BE92; }

.abschnitt-kopf {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  text-align: center; margin-bottom: 48px;
}

.zweispalt {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.zweispalt.umgekehrt > *:first-child { order: 2; }
.zweispalt.umgekehrt > *:last-child { order: 1; }

/* ── Sortimentskarten ──────────────────────────────────────────── */
.karten {
  /* min() ist hier entscheidend: ohne das erzwingt minmax(310px,…) eine Spalte von
     310 px, auch wenn nur 272 px Platz sind – auf einem 320-px-Handy schiebt sich
     dann die GANZE Seite seitlich weg. Mit min(…, 100%) wird die Spalte notfalls
     schmaler als der Wunschwert. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 20px;
}
.karte {
  background: var(--papier); border: 1px solid var(--linie);
  border-top: 4px solid var(--orange);
  border-radius: 10px; padding: 24px 26px;
}
.karte h3 { margin-bottom: 10px; color: var(--erde); }
.liste { color: var(--erde-weich); font-size: 16px; line-height: 1.8; }
.liste strong { color: var(--orange-tief); }

.fussnote {
  margin-top: 34px; text-align: center; color: var(--erde-weich);
  max-width: 68ch; margin-left: auto; margin-right: auto;
}

/* ── Liefergebiete ─────────────────────────────────────────────── */
/* Flex statt Raster, damit die letzte Zeile mittig steht.
   Bei sieben Karten bleibt sonst je nach Breite eine allein am linken Rand.
   Vorher lag zusätzlich die Linienfarbe als Hintergrund unter dem Block und die
   4-px-Lücken bildeten die Trennlinien – der leere Platz in der letzten Zeile
   erschien dadurch als farbiger Klotz. Jetzt trägt jede Karte ihren eigenen
   Rahmen, und Leerraum bleibt Leerraum.
   Feste Breiten je Umbruch statt flex-grow: sonst würden die Karten der letzten
   Zeile breiter als die darüber. */
.gebiete {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px;
}
.gebiet {
  flex: 0 1 calc((100% - 48px) / 4);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 20px 22px;
}
@media (max-width: 1000px) { .gebiet { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 760px)  { .gebiet { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 520px)  { .gebiet { flex-basis: 100%; } }
.gebiet h3 { color: var(--orange-tief); margin-bottom: 6px; }
.gebiet p { color: var(--erde-weich); font-size: 15.5px; }

/* ── Kontakt ─────────────────────────────────────────────────────
   Vier gleichwertige Felder über die volle Breite statt einer schmalen
   Liste neben einem Kasten. Telefon und E-Mail sind anklickbar – auf dem
   Handy wählt bzw. schreibt ein Tippen direkt. */
.kontaktfelder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 16px;
}
.kontaktfeld {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--papier); border: 1px solid var(--linie);
  border-top: 4px solid var(--orange);
  border-radius: 10px; padding: 20px 22px;
  text-decoration: none; color: inherit;
}
a.kontaktfeld:hover { border-color: var(--orange); background: #fff; }
.kf-lbl {
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gedaempft);
}
.kf-wert {
  font-family: Bitter, Georgia, serif; font-weight: 600; font-size: 17px;
  line-height: 1.45; word-break: break-word;
}
a.kontaktfeld .kf-wert { color: var(--orange-tief); }

/* ── Kontakt ───────────────────────────────────────────────────── */

.klein { font-size: 14.5px; color: var(--gedaempft); }

/* ── Fuß ───────────────────────────────────────────────────────── */
.fuss { background: var(--erde); color: #C9BDB0; padding: 44px 0; }
.fuss-innen {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 32px; flex-wrap: wrap;
}
.fuss .klein { color: #A0917F; }
.fuss-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.fuss-nav a { color: #E4DACD; text-decoration: none; font-weight: 600; font-size: 15.5px; }
.fuss-nav a:hover { color: var(--orange); }

/* ── Rechtstexte (Impressum, Datenschutz) ──────────────────────── */
.rechtstext { padding: 64px 0 84px; }
.rechtstext .bahn { max-width: 760px; }
.rechtstext h1 { font-size: clamp(30px, 4.5vw, 40px); margin-bottom: 10px; }
.rechtstext h2 {
  font-size: 21px; margin: 38px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--linie);
}
.rechtstext h2:first-of-type { border-top: 0; padding-top: 0; }
.rechtstext p, .rechtstext li { color: var(--erde-weich); }
.rechtstext ul { padding-left: 22px; margin: 0 0 18px; }
.rechtstext li { margin-bottom: 7px; }
.rechtstext address {
  font-style: normal; background: var(--sand); border: 1px solid var(--linie);
  border-radius: 8px; padding: 18px 20px; margin: 0 0 18px;
}

/* ── Schmale Bildschirme ───────────────────────────────────────────
   Eine Seite für alles, keine getrennte Handyfassung: getrennte Seiten
   bedeuten doppelte Pflege, auseinanderlaufende Inhalte und Nachteile bei
   Suchmaschinen. Die Umbrüche unten sind an echten Gerätebreiten gerechnet
   (320 / 360 / 390 / 412 px), nicht an runden Wunschzahlen.            */

@media (max-width: 900px) {
  .held-innen, .zweispalt { grid-template-columns: 1fr; gap: 36px; }
  .zweispalt.umgekehrt > *:first-child,
  .zweispalt.umgekehrt > *:last-child { order: 0; }
  .zahlen { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .abschnitt { padding: 60px 0; }
  .held-innen { padding-top: 48px; padding-bottom: 48px; }
}

/* Zwischenstufe für kleine Notebooks und Tablets im Querformat.
   Der gesetzte Firmenname kostet rund 200 px Breite; zwischen 720 und 1040 px
   reicht die Zeile sonst nicht für Marke + Navigation + Anmeldeknopf, und die
   Navigation bräche in eine zweite Reihe um. Statt umzubrechen wird die Marke
   kleiner – erkennbar bleibt sie trotzdem. */
@media (max-width: 1040px) {
  .marke img { height: 54px; }
  .marke { gap: 11px; }
  .marke-name { font-size: 17.5px; }
  .marke-zusatz { display: none; }
  .kopf-innen { gap: 16px; }
  .nav { gap: 17px; }
}

/* Unterhalb von 950 px reicht eine Zeile nicht mehr für Marke, Navigation und
   Anmeldeknopf. Der Kopf geht deshalb schon hier in die zweizeilige Anordnung,
   die sonst erst auf dem Handy greift: oben Marke und Anmeldung, darunter die
   Navigation über die volle Breite. Sonst bräche die Navigation mitten in der
   Zeile um und stünde eingerückt unter dem Anmeldeknopf. */
@media (max-width: 950px) {
  .kopf-innen {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "marke login" "nav nav";
    align-items: center;
    gap: 10px 16px;
  }
  .marke { grid-area: marke; }
  .kopf-innen > .knopf-klein.login { grid-area: login; margin-left: 0; }
  .nav { grid-area: nav; }
}

@media (max-width: 720px) {
  /* Kopfzeile zweizeilig: oben Logo und Login (die einzige Handlung, die auf
     dem Handy wirklich zählt), darunter die Abschnittslinks. Der Kopf bleibt
     klebend, damit der Login beim Scrollen erreichbar bleibt. */
  .kopf-innen {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "marke login" "nav nav";
    align-items: center;
    gap: 10px 12px;
  }
  .marke { grid-area: marke; }
  .kopf-innen > .knopf-klein.login { grid-area: login; margin-left: 0; }
  .nav { grid-area: nav; gap: 8px; }
  .marke img { height: 48px; }
  .marke { gap: 10px; }
  .marke-name { font-size: 17px; }
  /* Auf schmalen Geräten weicht die Unterzeile – Name und Login
     brauchen die Breite. */
  .marke-zusatz { display: none; }

  /* Auf dem Handy NICHT klebend. Zweizeilig wäre der Kopf rund 115 px hoch und
     bliebe dauerhaft stehen – auf einem 667-px-Bildschirm ein Sechstel der Fläche,
     dauerhaft belegt. Die Seite ist kurz, die Links springen ohnehin nur innerhalb
     der Seite, und der Anmeldeknopf steht zusätzlich im Kundenabschnitt und im Fuß. */
  .kopf { position: static; }

  /* Abschnittslinks als Pillen – Fingerkuppen brauchen Fläche, nicht Text.
     44 px Höhe ist das übliche Mindestmaß für Berührungsziele. */
  .nav a:not(.knopf-klein) {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 0 13px;
    background: var(--sand); border: 1px solid var(--linie);
    border-radius: 20px; font-size: 15px;
  }
  .nav a:not(.knopf-klein):hover { background: #fff; border-color: var(--orange); }
  .knopf-klein { min-height: 42px; padding: 0 15px; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  /* 12 px mehr Inhaltsbreite – auf einem 320-px-Gerät sind das über vier Prozent. */
  .bahn { padding: 0 18px; }
  h1 { font-size: clamp(30px, 8.5vw, 44px); }
  .fuehrung { font-size: 18px; }
  .zahlen { grid-template-columns: 1fr; gap: 22px; }
  .karte { padding: 20px 20px; }
  .tafel { padding: 22px 20px; }
  .siegel { padding: 26px 20px; }
  .siegel-nr { font-size: 21px; }
  .held-innen.einspaltig { padding-top: 52px; padding-bottom: 48px; align-items: stretch; }
  /* Handy: linksbündig. Mittig gesetzter Fließtext über mehrere Zeilen liest sich
     auf schmalen Displays merklich schlechter – dort gibt es auch keine leere
     Fläche, die ausgeglichen werden müsste. */
  .held-innen.einspaltig .held-text { max-width: none; align-items: flex-start; text-align: left; }
  .held-innen.einspaltig .fuehrung { margin: 0; }
  .gebiet { padding: 18px 20px; }
  .abschnitt { padding: 48px 0; }
  .abschnitt-kopf { margin-bottom: 32px; }

  /* Die GGN-Zeile ist mit 13 Ziffern in 22 px die breiteste feste Einheit der
     Seite und sprengt sonst schmale Displays. */

  /* Knöpfe über die volle Breite: leichter zu treffen, ruhigeres Bild. */
  .knopfreihe { flex-direction: column; align-items: stretch; }
  .knopf, .knopf-rand, .knopf-rand-hell { text-align: center; }
  .knopf.gross { font-size: 17px; padding: 15px 22px; }

  .fuss-innen { flex-direction: column; gap: 22px; }
}

/* Sehr schmale Geräte (320 px): letzte Reserve holen. */
/* Sehr schmale Geräte (unter ca. 400 px). Logo, Firmenname und Anmeldeknopf
   passen dort nicht mehr nebeneinander. Zwei Zugeständnisse statt eines
   Umbruchs: der Knopf heißt nur noch „Login" (das Schloss daneben sagt den
   Rest), und der Firmenname darf auf zwei Zeilen umbrechen – er bleibt damit
   niedriger als das Logo und kostet keine zusätzliche Höhe. */
@media (max-width: 420px) {
  .nur-breit { display: none; }
  .marke-name { white-space: normal; line-height: 1.15; }
}

@media (max-width: 360px) {
  .bahn { padding: 0 14px; }
  .nav { gap: 6px; }
  .nav a:not(.knopf-klein) { padding: 0 11px; font-size: 14.5px; }
  .marke img { height: 38px; }
  .marke-name { font-size: 14.5px; }
}