/* ──────────────────────────────────────────────────────────────
   Gemeinsames Stylesheet für die Unterseiten von faimex.de
   Entwurf, Sebastian, 2026-09-26

   Farbregeln (geprüft in kunden/faimex-de/farbpalette-2026-09-26.md):
   - Gold #C8A84B ist FLÄCHENFARBE, nie Schriftfarbe
     (auf Silbergrau nur 2,12:1 — durchgefallen)
   - Gold als Fläche mit Anthrazit-Schrift: 6,56:1 — erlaubt
   - Weiße Schrift auf Gold: 2,29:1 — verboten
   - Für Links, die golden wirken sollen: #7E6520 (5,02:1)
   - Trennlinien und Rahmen: #7E8891 (3,02:1 gegen #E9EBED)
   Schrift: Inter, wie auf der Startseite
   ────────────────────────────────────────────────────────────── */

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

:root {
  --clr-bg:      #E9EBED;  /* Seitengrau */
  --clr-surface: #FFFFFF;
  --clr-card:    #FFFFFF;
  --clr-border:  #7E8891;  /* 3,02:1 — Mindestwert für Linien ist 3:1 */
  --clr-accent:  #C8A84B;  /* Marken-Gold: nur Fläche, Linie, Symbol */
  --clr-link:    #7E6520;  /* goldwirkender Link, 5,02:1 */
  --clr-text:    #23272B;  /* Anthrazit, 13,54:1 auf Seitengrau */
  --clr-muted:   #5A6068;
  --radius: 12px;
  --seite: 1080px;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Menüleiste: identisch zur Startseite ── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 2rem;
  background: rgba(233,235,237,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--clr-border);
}
.nav-links { display: flex; gap: 1.25rem; list-style: none; }
.nav-links a { color: var(--clr-text); text-decoration: none; font-size: .9rem; }
.nav-links a:hover { color: var(--clr-link); text-decoration: underline; }
.nav-links a[aria-current="page"] { font-weight: 600; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer;
  color: var(--clr-text); font-size: 1.4rem; }
.lang-switcher { display: flex; gap: .4rem; align-items: center; }
.lang-btn {
  background: none; border: 2px solid transparent; border-radius: 6px;
  padding: 3px; cursor: pointer; display: flex; align-items: center;
  transition: transform .15s, border-color .2s, background .2s;
}
.lang-btn svg { display: block; border-radius: 3px; }
.lang-btn:hover { transform: scale(1.12); border-color: rgba(200,168,75,.45); }
.lang-btn.active { border-color: var(--clr-accent); background: rgba(200,168,75,.16); }

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--clr-surface); border: 1px solid var(--clr-border);
    padding: 1rem 2rem; gap: 1rem;
  }
  .nav-links.open { display: flex; }
}

/* ── Seitenkopf ── */
.kopf { padding: 4rem 1.5rem 2.5rem; }
.kopf-inner, .inhalt-inner { max-width: var(--seite); margin: 0 auto; }
.kruemel { font-size: .82rem; color: var(--clr-muted); margin-bottom: .9rem; }
.kruemel a { color: var(--clr-link); }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.2; }
/* Goldene Linie statt goldener Schrift — das ist der erlaubte Weg */
h1::after {
  content: ""; display: block; width: 72px; height: 4px;
  background: var(--clr-accent); border-radius: 2px; margin-top: 1rem;
}
.einleitung { margin-top: 1.4rem; max-width: 62ch; color: var(--clr-muted); font-size: 1.05rem; }

/* ── Inhalt ── */
.inhalt { padding: 1rem 1.5rem 4rem; }
h2 { font-size: 1.35rem; font-weight: 600; margin-bottom: 1.2rem; }
.karten { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.karte {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.karte h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
.karte p { color: var(--clr-muted); font-size: .95rem; }
.karte .themen { margin-top: .9rem; padding-left: 1.1rem; color: var(--clr-muted); font-size: .9rem; }
.karte .themen li { margin-bottom: .25rem; }

/* Status-Kennzeichen: goldene Fläche mit Anthrazit-Schrift, 6,56:1 */
.status {
  display: inline-block; margin-bottom: .8rem;
  padding: .2rem .65rem; border-radius: 999px;
  background: var(--clr-accent); color: var(--clr-text);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.status.leise { background: transparent; color: var(--clr-muted); border: 1px solid var(--clr-border); }

.hinweis {
  margin-top: 2.5rem; padding: 1.5rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-accent);
  border-radius: var(--radius);
}
.hinweis p { color: var(--clr-muted); max-width: 70ch; }
.hinweis a { color: var(--clr-link); }

/* Schaltflaeche: goldene Flaeche, Anthrazit-Schrift.
   Selektor a.knopf, damit er .hinweis a schlaegt — sonst erbt der Knopf
   die goldene Linkfarbe und steht Gold auf Gold (gemessen 2,43:1). */
a.knopf {
  display: inline-block; margin-top: 1.1rem;
  padding: .7rem 1.4rem; border-radius: 8px;
  background: var(--clr-accent); color: var(--clr-text);
  font-weight: 600; text-decoration: none;
}
a.knopf:hover { background: #d8bb63; }

/* ── Fußzeile ── */
footer {
  border-top: 1px solid var(--clr-border);
  padding: 2rem 1.5rem; text-align: center;
  color: var(--clr-muted); font-size: .88rem;
}
footer a { color: var(--clr-link); }

/* ── Rechtstexte: Impressum, Datenschutz ──
   Nur der Rahmen ist neu, der Text bleibt unangetastet. */
.page-wrap { max-width: 860px; margin: 0 auto; padding: 3.5rem 1.5rem 4rem; }
.page-label {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--clr-muted); margin-bottom: .7rem;
}
.page-title { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.2; }
.page-title::after {
  content: ""; display: block; width: 72px; height: 4px;
  background: var(--clr-accent); border-radius: 2px; margin: 1rem 0 2.2rem;
}
.card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.card h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: .9rem; }
.card h3 { font-size: 1.02rem; font-weight: 600; margin: 1.2rem 0 .5rem; }
.card p { margin-bottom: .7rem; color: var(--clr-text); }
.card p:last-child { margin-bottom: 0; }
.card ul, .card ol { margin: .4rem 0 .9rem 1.4rem; color: var(--clr-text); }
.card li { margin-bottom: .35rem; }
.card a { color: var(--clr-link); }
.card strong { font-weight: 600; }
/* Trennlinie: 3,02:1 gegen die weisse Karte ist nicht noetig,
   aber sichtbar muss sie sein — deshalb der Rahmenton. */
.divider { border: 0; border-top: 1px solid var(--clr-border); margin: 1.1rem 0; }