/* ============================================================
   totter.eu — zentrales Stylesheet (eine Datei für alle Seiten)

   FARBWELT (abgeleitet aus der Bildserie „Wege & Landmarken":
   gedeckte Naturtöne auf neutraler heller Basis, eine Akzentfarbe)

   --text     #26312B  dunkles Graugrün  (Fließtext)
   --grund    #FAFAF7  warmes Weiß       (Seitenhintergrund)
   --flaeche  #EFF2EA  helles Salbei     (Wechselflächen)
   --karte    #FFFFFF  Weiß              (Karten)
   --akzent   #3E6B4F  tiefes Grün       (Links, Buttons, Fokus)
   --erde     #8A6D46  Erdton            (feine Akzente)
   --linie    #D8DED2  Salbeigrau        (Trennlinien, Rahmen)
   --fuss     #26312B  Fußzeile Hintergrund
   --fusstext #F4F5F1  Fußzeile Text

   KONTRAST-NACHWEIS (WCAG 2.2 AA), gerechnete Verhältnisse:
   Fließtext braucht >= 4,5:1 / große Schrift & UI >= 3:1

   #26312B auf #FAFAF7  -> 12,8 : 1   Fließtext auf Grundfläche   OK
   #26312B auf #EFF2EA  -> 11,9 : 1   Text auf Salbeiflächen      OK
   #26312B auf #FFFFFF  -> 13,4 : 1   Text auf Karten             OK
   #3E6B4F auf #FAFAF7  ->  5,9 : 1   Links auf Grundfläche       OK
   #3E6B4F auf #EFF2EA  ->  5,4 : 1   Links auf Salbeiflächen     OK
   #3E6B4F auf #FFFFFF  ->  6,1 : 1   Links auf Karten            OK
   #8A6D46 auf #FAFAF7  ->  4,6 : 1   Erdton-Akzente              OK
   #FFFFFF auf #3E6B4F  ->  6,1 : 1   Button-Text                 OK
   #F4F5F1 auf #26312B  -> 12,2 : 1   Fußzeile                    OK
   Fokus-Ring #3E6B4F auf #FAFAF7 -> 5,9:1 (UI braucht 3:1)       OK
   Fokus-Ring #F4F5F1 auf #26312B (Fußzeile) -> 12,2:1            OK
   ============================================================ */

:root {
  --text: #26312B;
  --grund: #FAFAF7;
  --flaeche: #EFF2EA;
  --karte: #FFFFFF;
  --akzent: #3E6B4F;
  --erde: #8A6D46;
  --linie: #D8DED2;
  --fuss: #26312B;
  --fusstext: #F4F5F1;
}

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

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* Platz für den festen Kopfbereich bei Anker-Sprüngen */
}

/* Zwischen 768 und 896 px bricht das deutsche Menü in zwei Zeilen um, die
   Kopfleiste wird höher. Damit Überschriften nach einem Menüsprung nicht
   darunter verschwinden, dort mehr Abstand (seit 28.09.2026). */
@media (min-width: 48rem) and (max-width: 56rem) {
  html { scroll-padding-top: 10rem; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

/* Einheitliches Grading über die vier Landschaftsbilder: Sie stammen von
   vier verschiedenen Fotografen und wirken erst durch die Angleichung wie
   eine Serie. Gilt automatisch für jedes getauschte Foto mit class="foto". */
.foto {
  filter: saturate(0.82) sepia(0.10) contrast(0.97);
  border-radius: 8px;
}

/* Das Portrait ist davon ausgenommen (entschieden 03.08.2026): Es hat zwei
   Runden Farbkorrektur hinter sich und wird so gezeigt, wie die Datei ist —
   ein Porträt läuft nicht nachträglich durch ein Landschafts-Grading.
   Gemessene Wirkung des Filters war ohnehin unter 3 von 255 Farbstufen. */
.portrait .foto {
  filter: none;
}

h1, h2, h3 { line-height: 1.2; }
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0 0 0.5rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 0.75rem; }

p { margin: 0 0 1rem; }
.abschnitt > .wrap > p,
.hintergrund-raster p,
.rechtstext p { max-width: 46rem; } /* Lesbreite begrenzen */

a { color: var(--akzent); }
a:hover { text-decoration-thickness: 2px; }

/* Sichtbarer Fokus für Tastaturbedienung — gestaltet, nicht entfernt */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---------- Skip-Link ---------- */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--akzent);
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Externe Links: Kennzeichnung ----------
   Links, die in einem neuen Tab öffnen, sagen das vorher — sichtbar durch
   das Zeichen ↗ und hörbar durch einen Text, den nur Screenreader ausgeben.
   Das Zeichen ist aria-hidden, damit es nicht als "Pfeil nach Nordost"
   vorgelesen wird; der Text steht immer zusätzlich da, das Zeichen ist also
   nie die einzige Information. */

.extern {
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.85em;
  text-decoration: none;
}

/* Optisch unsichtbar, für Screenreader aber vorhanden.
   Kein display:none und kein visibility:hidden — die würden den Text
   auch für Screenreader entfernen. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Kopfbereich ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}

.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
  padding-block: 0.5rem;
}

.marke {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
  padding: 0.6rem 0.25rem; /* Klickziel > 24px */
  margin-right: auto;
}

.nav-liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0.1rem;
}

.nav-liste a {
  display: inline-block;
  padding: 0.6rem 0.7rem; /* Klickziel > 24px */
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
}
.nav-liste a:hover { text-decoration: underline; color: var(--akzent); }

.sprachen {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.95rem;
}
.sprachen a,
.sprachen [aria-current] {
  display: inline-block;
  padding: 0.55rem 0.5rem; /* Klickziel > 24px */
  border-radius: 4px;
}
.sprachen [aria-current] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Menü-Knopf: ohne JavaScript verborgen (Attribut hidden im HTML),
   das Menü ist dann immer sichtbar — No-JS-Fallback. */
.menu-knopf {
  display: none;
  font: inherit;
  background: var(--karte);
  color: var(--text);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.haupt { width: 100%; }

@media (min-width: 48rem) {
  .haupt { order: 0; width: auto; margin-left: auto; }
  .sprachen { order: 1; }
}

@media (max-width: 47.99rem) {
  .js .menu-knopf { display: inline-block; }
  .js .nav-liste { display: none; flex-direction: column; padding-block: 0.5rem; }
  .js .nav-liste.offen { display: flex; }
  .js .nav-liste a { width: 100%; }
}

/* Untermenü „About" (nur EN, seit 27.09.2026).
   Ohne JavaScript: kein Knopf, die vier Unterpunkte stehen als normale
   Menüpunkte in der Leiste. Mit JavaScript: Knopf „About ▾" klappt sie auf. */
.unter-liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0.1rem;
}
.gruppe { display: flex; }

.gruppe-knopf {
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 0.6rem 0.7rem; /* Klickziel > 24px, wie die Links */
  cursor: pointer;
}
.gruppe-knopf:hover { text-decoration: underline; color: var(--akzent); }
.gruppe-knopf .pfeil { display: inline-block; margin-left: 0.3rem; }
.gruppe-knopf[aria-expanded="true"] .pfeil { transform: rotate(180deg); }

.js .gruppe { position: relative; display: block; }
.js .unter-liste { display: none; }
.js .unter-liste.offen { display: flex; }

@media (min-width: 48rem) {
  .js .unter-liste {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    flex-direction: column;
    min-width: 12rem;
    padding: 0.4rem;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(38, 49, 43, 0.12);
  }
  .js .unter-liste a { display: block; }
}

@media (max-width: 47.99rem) {
  .js .gruppe-knopf { width: 100%; text-align: left; }
  .js .unter-liste { flex-direction: column; padding-left: 1rem; }
  .js .unter-liste a { width: 100%; }
}

/* ---------- Abschnitte ---------- */

.abschnitt { padding-block: 4rem; }
.abschnitt--flaeche { background: var(--flaeche); }

.hero { padding-block: 5rem 3rem; }
.hero .claim {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.hero .claim a { text-decoration: none; }
.hero .claim a:hover,
.hero .claim a:focus-visible { text-decoration: underline; }
.hero .unterclaim {
  font-size: clamp(1rem, 2vw, 1.2rem);
  margin-bottom: 2.5rem;
}

.abschnitt-bild { margin: 2rem 0; }

/* ---------- Karten (Ersatz für die alten Slider) ---------- */

.karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 55rem) {
  .karten { grid-template-columns: 1fr; }
}

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 1.5rem;
}
.karte p:last-child { margin-bottom: 0; }

/* ---------- Hintergrund mit Portrait ---------- */

.hintergrund-raster {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 55rem) {
  .hintergrund-raster { grid-template-columns: 1fr; }
}
.portrait { margin: 0; max-width: 20rem; }

/* ---------- Buttons ---------- */

.knopf {
  display: inline-block;
  background: var(--akzent);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 600;
  padding: 0.8rem 1.4rem; /* Klickziel > 24px */
  border-radius: 6px;
  transition: background-color 0.15s ease;
}
.knopf:hover { background: #33583F; }
.knopf:focus-visible { outline-color: var(--text); }

/* ---------- Kontaktzeilen ---------- */

.kontaktzeile { font-size: 1.1rem; }

/* ---------- Rechtstexte ----------
   Impressum und Datenschutzerklärung haben bis zu vier Überschriftenebenen.
   Damit die Gliederung beim Überfliegen sichtbar ist, brauchen die Ebenen
   deutlich unterschiedliche Größen — vorher lagen h2 und h3 vier Prozent
   auseinander und waren dadurch nicht unterscheidbar. */

.rechtstext h2 { font-size: 1.35rem; margin-top: 2.5rem; }
.rechtstext h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.rechtstext h4 { font-size: 1rem;    margin-top: 1.25rem; margin-bottom: 0.4rem; }
/* Lange Adressen als Linktext (BfDI, Pexels) dürfen umbrechen,
   sonst wird die Seite auf dem Handy breiter als der Bildschirm (seit 28.09.2026). */
.rechtstext a { overflow-wrap: anywhere; }
/* „Datenschutzerklärung“ ist auf schmalen Handys breiter als der Bildschirm.
   Unter 704 px Breite wird die Überschrift der Rechtsseiten deshalb kleiner,
   ab 704 px bleibt alles wie auf den übrigen Seiten (seit 28.09.2026). */
.rechtstext h1 { font-size: clamp(1.6rem, 5vw, 3.2rem); overflow-wrap: break-word; }

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

.fuss {
  background: var(--fuss);
  color: var(--fusstext);
  padding-block: 2rem;
  margin-top: 4rem;
}
.fuss p { margin: 0 0 0.5rem; }
.fuss a { color: var(--fusstext); }
.fuss a:focus-visible { outline-color: var(--fusstext); }

.fuss-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.fuss-nav li { display: flex; align-items: center; }
.fuss-nav li + li::before {
  content: "|";
  padding-inline: 0.6rem;
  color: var(--fusstext);
}
.fuss-nav a { display: inline-block; padding-block: 0.4rem; } /* Klickziel */

/* Hinweis unter der Fußzeilen-Navigation. Die Aussage ist eine öffentliche
   Zusage: Sie stimmt nur, solange die Seite keine Cookies setzt und nichts
   von fremden Servern lädt. Siehe CLAUDE.md, Regel 12. */
.fuss-hinweis {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}