@charset "utf-8";

/* ==========================================================================
   Lidstein — gemeinsames Fundament.

   Wird von JEDER Seite als erstes geladen. Danach ergänzt jede Seite nur
   noch das, was ihr allein gehört (home.css, blog/blog.css, legal.css).

   Hier stehen: Schriften, Tokens, Reset, Typo-Skala, Kopfleiste, Fußzeile,
   Knöpfe. Diese Bausteine dürfen NUR hier definiert werden — sonst driften
   die Seiten wieder auseinander.

   Die Farben stammen aus dem Wappen: Gold der Krone und des Eichenlaubs,
   Smaragd des Schriftbands, Karmesin und Azur des Schilds.
   ========================================================================== */

/* --- Schriften: lokal, kein Fremdserver (DSGVO) -------------------------- */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-500-italic-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("assets/fonts/plexmono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("assets/fonts/plexmono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Dunkle Bühne */
  --nacht: #0b0906;
  --nacht-hoch: #151009; /* gehobene Flächen, Karten */
  --nacht-tief: #070604; /* Fußzeile, Vertiefungen */

  /* Helle Bühne */
  --pergament: #f7f3ea;
  --pergament-hoch: #fffdf8;
  --pergament-tief: #efe7d6;

  /* Wappenfarben */
  --gold: #c9a44f;
  --gold-hell: #e2c47f;
  --gold-tief: #7a5d21; /* 5,6:1 auf Pergament */
  --smaragd: #1e5b3f;
  --smaragd-hell: #2b7a56;
  --karmesin: #9d2b38;
  --azur: #21356e;

  /* Text */
  --elfenbein: #f3ede0; /* 16,8:1 auf Nacht */
  --elfenbein-2: #c4bcab; /* 9,6:1 auf Nacht */
  --elfenbein-3: #9a9384; /*  5,6:1 auf Nacht — kleinste erlaubte Stufe */
  --tinte: #211b12; /* 15,3:1 auf Pergament */
  --tinte-2: #55503f; /*  6,3:1 auf Pergament */
  --tinte-3: #6d6653; /*  4,6:1 auf Pergament — kleinste erlaubte Stufe */

  /* Linien */
  --linie-dunkel: rgba(226, 196, 127, 0.16);
  --linie-hell: rgba(33, 27, 18, 0.14);

  /* Zustände */
  --fehler: #a3202c;
  --erfolg: #1e5b3f;

  /* Schriftfamilien */
  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Typo-Skala — diese Stufen, sonst keine.
     Vorher standen allein auf der Startseite 21 verschiedene Größen im Umlauf,
     zehn davon zwischen 11,5 und 16,4 px — Unterschiede, die niemand sehen,
     aber jeder pflegen muss. */
  --t-xs: 0.75rem; /* 12 — Mono-Label, Meta, Tabellenkopf */
  --t-sm: 0.875rem; /* 14 — Nebentext, Bildunterschrift, Quelle */
  --t-base: 1rem; /* 16 — Fließtext auf Übersichtsseiten */
  --t-md: 1.125rem; /* 18 — Einleitung, Artikel-Fließtext */
  --t-lg: 1.375rem; /* 22 — Kartenüberschrift, Zitat */
  --t-xl: 1.75rem; /* 28 — Überschrift dritter Ordnung */
  --t-2xl: 2.125rem; /* 34 — Überschrift zweiter Ordnung */
  --t-3xl: clamp(2.25rem, 4.4vw, 3.4rem); /* 36–54 — Abschnittsüberschrift */
  --t-display: clamp(2.9rem, 8vw, 5.6rem); /* 46–90 — nur der Auftritt */

  /* Cormorant-Gewichte, optische Regel:
     ab --t-2xl (34 px) laeuft die Serif in 600, darunter in 700. Grosse Grade
     wirken sonst zu fett, kleine zu duenn. Vorher war die Verteilung zufaellig:
     die H2 der Startseite lief leichter als die kleinere H3 darunter. */

  /* Zeilenhöhen */
  --lh-eng: 1.08; /* Display */
  --lh-kurz: 1.25; /* Überschriften */
  --lh-text: 1.65; /* Fließtext */

  /* Abstände — 4-px-Raster */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --s10: 8rem;
  --abschnitt-y: clamp(4rem, 8vw, 7.5rem);

  /* Radien — zwei Werte, sonst keine. Vorher waren 5, 6, 8 und 10 px im
     Umlauf, was jede Hierarchie zwischen Knopf und Karte eingeebnet hat. */
  --r-klein: 4px; /* Knöpfe, Eingaben, Chips */
  --r-gross: 8px; /* Karten, Tafeln */

  /* Maße */
  --container: min(1140px, 100% - 2 * clamp(1rem, 4vw, 2.75rem));
  --mass: 68ch; /* Lesebreite Fließtext */
  --leiste-h: 4.25rem;

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

/* ==========================================================================
   FARBREGEL — bitte einhalten:

     --gold / --gold-hell   sprechen NUR auf --nacht*
     --gold-tief            spricht NUR auf --pergament*
     --elfenbein*           nur auf --nacht*
     --tinte*               nur auf --pergament*

   Text auf --smaragd und --karmesin ist IMMER #fff.
   Ein Verstoß dagegen hat den WhatsApp-Knopf im Ratgeber auf 1,36:1
   gebracht — dunkles Gold auf Grün, praktisch unlesbar.
   ========================================================================== */

/* --- Reset --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: var(--lh-text);
  color: var(--elfenbein);
  background: var(--nacht);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* Helle Seiten kippen die Bühne, nicht das System. */
body.hell {
  color: var(--tinte);
  background: var(--pergament);
}

/* Seite steht still, solange das Menü sie überdeckt. */
body.ist-gesperrt {
  overflow: hidden;
}

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

h1,
h2,
h3,
h4,
p,
figure,
figcaption,
dl,
dd,
blockquote,
ul,
ol {
  margin: 0;
}

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

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-klein);
}

body.hell :focus-visible {
  outline-color: var(--gold-tief);
}

::selection {
  color: var(--nacht);
  background: var(--gold-hell);
}

[id] {
  scroll-margin-block-start: calc(var(--leiste-h) + var(--s5));
}

/* --- Bausteine ----------------------------------------------------------- */

.container {
  width: var(--container);
  margin-inline: auto;
}

.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--s3);
  left: var(--s3);
  padding: var(--s3) var(--s4);
  color: var(--nacht);
  background: var(--gold-hell);
  border-radius: var(--r-klein);
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 160ms var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Mono-Label über Überschriften */
.kicker {
  margin-bottom: var(--s4);
  color: var(--gold);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* `:where()` zählt bei der Spezifität als null. Die Hell-Variante gilt damit
   als Voreinstellung, die eine Seite mit einer gewöhnlichen Regel überschreiben
   kann — ohne dass jemand Selektoren aufblähen muss. Ohne das gewann
   `body.hell .kicker` gegen `.legal-kopf .kicker` und setzte dunkles Gold
   mitten in das dunkle Kopfband des Impressums. */
body.hell :where(.kicker) {
  color: var(--gold-tief);
}

/* --- Kopfleiste ---------------------------------------------------------- */

.leiste {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--leiste-h);
  padding-inline: clamp(1rem, 4vw, 2.75rem);
  border-bottom: 1px solid transparent;
  transition:
    background-color 200ms var(--ease),
    border-color 200ms var(--ease);
}

.leiste.ist-fest {
  background: rgba(11, 9, 6, 0.92);
  border-bottom-color: var(--linie-dunkel);
  backdrop-filter: blur(12px);
}

/* Auf hellen Seiten steht die Leiste von Anfang an dunkel — sonst stünde
   elfenbeinfarbene Schrift auf Pergament, also nichts Lesbares. Der dunkle
   Balken mit dem Wappen bleibt so auf jeder Seite derselbe Anker. */
body.hell .leiste {
  background: var(--nacht);
  border-bottom-color: var(--linie-dunkel);
}

/* Bei geöffnetem Menü ebenfalls: das Menü beginnt erst unter der Leiste, und
   eine durchsichtige Leiste ließ oben am Seitenanfang den Seiteninhalt durch
   den Balken scheinen. */
body.ist-gesperrt .leiste {
  background: var(--nacht);
  border-bottom-color: var(--linie-dunkel);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-right: auto;
  text-decoration: none;
}

/* Im Markup steht der Menü-Knopf vor Instagram, damit die Tastatur-
   Reihenfolge stimmt; sichtbar gehört er ans Ende. */
.leiste .nav-schalter {
  order: 3;
}

.leiste .instagram {
  order: 2;
}

.leiste-nav {
  order: 1;
}

.marke img {
  width: 34px;
  height: auto;
}

.marke b {
  color: var(--elfenbein);
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.leiste-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--s3), 2.2vw, var(--s6));
  font-size: var(--t-sm);
}

.leiste-nav a {
  color: var(--elfenbein-2);
  text-decoration: none;
  transition: color 160ms var(--ease);
}

.leiste-nav a:hover,
.leiste-nav a:focus-visible {
  color: var(--gold-hell);
}

.leiste-nav a[aria-current="page"] {
  color: var(--gold);
}

.leiste-nav .nav-cta {
  padding: var(--s2) var(--s4);
  color: #fff;
  background: var(--smaragd);
  border-radius: var(--r-klein);
  font-weight: 700;
}

.leiste-nav .nav-cta:hover,
.leiste-nav .nav-cta:focus-visible {
  color: #fff;
  background: var(--smaragd-hell);
}

.nav-schalter {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-klein);
  cursor: pointer;
}

.nav-schalter-balken {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 1px;
  background: var(--elfenbein);
}

.nav-schalter-balken::before,
.nav-schalter-balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--elfenbein);
  transition: transform 200ms var(--ease);
}

.nav-schalter-balken::before {
  transform: translateY(-6px);
}

.nav-schalter-balken::after {
  transform: translateY(6px);
}

.nav-schalter[aria-expanded="true"] .nav-schalter-balken {
  background: transparent;
}

.nav-schalter[aria-expanded="true"] .nav-schalter-balken::before {
  transform: rotate(45deg);
}

.nav-schalter[aria-expanded="true"] .nav-schalter-balken::after {
  transform: rotate(-45deg);
}

/* --- Instagram ----------------------------------------------------------- */

/* Steht bewusst AUSSERHALB von .leiste-nav: im eingeklappten Menü wäre der
   Knopf auf dem Handy hinter dem Hamburger versteckt. So bleibt er immer
   sichtbar — auf jeder Breite, auf jeder Seite. */

.instagram {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--elfenbein-2);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-klein);
  transition:
    color 160ms var(--ease),
    border-color 160ms var(--ease),
    background-color 160ms var(--ease);
}

.instagram:hover,
.instagram:focus-visible {
  color: var(--nacht);
  background: var(--gold-hell);
  border-color: var(--gold-hell);
}

/* --- Sprachumschalter ---------------------------------------------------- */

/* Als <details> gebaut: klappt ohne JavaScript auf, ist mit der Tastatur
   bedienbar und braucht kein ARIA-Gerüst. base.js ergänzt nur Escape und
   das Schließen bei Klick daneben. */

.sprache {
  position: relative;
  flex: none;
}

.sprache > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  color: var(--elfenbein-2);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-klein);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  list-style: none;
  cursor: pointer;
  transition:
    color 160ms var(--ease),
    border-color 160ms var(--ease);
}

/* Safari zeigt sonst ein eigenes Dreieck vor dem Inhalt. */
.sprache > summary::-webkit-details-marker {
  display: none;
}

.sprache > summary:hover,
.sprache[open] > summary {
  color: var(--gold-hell);
  border-color: var(--gold);
}

.flagge {
  flex: none;
  border-radius: 1.5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.sprache-pfeil {
  transition: rotate 160ms var(--ease);
}

.sprache[open] .sprache-pfeil {
  rotate: 180deg;
}

.sprache-liste {
  position: absolute;
  z-index: 50;
  top: calc(100% + var(--s2));
  right: 0;
  min-width: 11rem;
  padding: var(--s1);
  background: var(--nacht-hoch);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-klein);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.sprache-liste a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  color: var(--elfenbein-2);
  border-radius: var(--r-klein);
  font-size: var(--t-sm);
  text-decoration: none;
}

.sprache-liste a:hover,
.sprache-liste a:focus-visible {
  color: var(--elfenbein);
  background: rgba(226, 196, 127, 0.1);
}

.sprache-liste a[aria-current="true"] {
  color: var(--gold);
}

.sprache-liste a[aria-current="true"]::after {
  content: "✓";
  margin-left: auto;
}

/* --- Knöpfe -------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 3rem;
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-klein);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease),
    border-color 160ms var(--ease),
    color 160ms var(--ease);
}

/* Jede Variante setzt `color` selbst — sonst erbt der Knopf die Linkfarbe
   der Seite, und genau so entstand der unlesbare grüne WhatsApp-Knopf. */
.knopf-whatsapp {
  color: #fff;
  background: var(--smaragd);
}

.knopf-whatsapp:hover,
.knopf-whatsapp:focus-visible {
  color: #fff;
  background: var(--smaragd-hell);
}

.knopf-gold {
  color: var(--nacht);
  background: var(--gold);
}

.knopf-gold:hover,
.knopf-gold:focus-visible {
  color: var(--nacht);
  background: var(--gold-hell);
}

.knopf-geist {
  color: var(--elfenbein);
  border-color: var(--linie-dunkel);
  background: transparent;
}

.knopf-geist:hover,
.knopf-geist:focus-visible {
  color: var(--gold-hell);
  border-color: var(--gold);
}

body.hell .knopf-geist {
  color: var(--tinte);
  border-color: var(--linie-hell);
}

body.hell .knopf-geist:hover,
body.hell .knopf-geist:focus-visible {
  color: var(--gold-tief);
  border-color: var(--gold-tief);
}

.knopf[disabled] {
  cursor: progress;
  opacity: 0.6;
}

.knopf svg {
  flex: none;
}

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

.fussbereich {
  padding-block: var(--s8) var(--s7);
  color: var(--elfenbein-2);
  background: var(--nacht-tief);
  border-top: 1px solid var(--linie-dunkel);
  font-size: var(--t-sm);
}

.fussbereich-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s7);
}

.fussbereich .marke {
  margin-bottom: var(--s4);
}

.fussbereich address {
  font-style: normal;
  line-height: 1.8;
}

.fussbereich nav {
  display: grid;
  align-content: start;
  gap: var(--s3);
}

.fussbereich .instagram {
  margin-top: var(--s4);
}

.fussbereich a {
  color: var(--elfenbein-2);
  text-decoration: none;
}

.fussbereich a:hover,
.fussbereich a:focus-visible {
  color: var(--gold-hell);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

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

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* --- Schmale Viewports --------------------------------------------------- */

@media (max-width: 61.99rem) {
  .fussbereich-gitter {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }

  /* Ohne JavaScript bleibt die Navigation eine umbrechende Zeile: sichtbar
     und benutzbar. Sie einzuklappen wäre nur zulässig, wenn auch jemand da
     ist, der sie wieder aufklappen kann. */
  .leiste {
    flex-wrap: wrap;
    padding-block: var(--s2);
  }

  .leiste-nav {
    flex-wrap: wrap;
    width: 100%;
    gap: var(--s3) var(--s4);
  }
}

@media (max-width: 61.99rem) and (scripting: enabled) {
  .leiste {
    flex-wrap: nowrap;
    padding-block: 0;
  }

  .nav-schalter {
    display: grid;
  }

  .leiste-nav {
    position: fixed;
    inset: var(--leiste-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s2) clamp(1rem, 4vw, 2.75rem) var(--s5);
    background: rgba(11, 9, 6, 0.98);
    border-bottom: 1px solid var(--linie-dunkel);
    backdrop-filter: blur(12px);
    font-size: var(--t-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    /* Sichtbarkeit springt beim Öffnen sofort (sonst sind die Links für die
       halbe Animation nicht fokussierbar) und verzögert erst beim Schließen. */
    transition:
      opacity 200ms var(--ease),
      transform 200ms var(--ease),
      visibility 0s linear 200ms;
  }

  .leiste-nav[data-offen="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 200ms var(--ease),
      transform 200ms var(--ease),
      visibility 0s;
  }

  .leiste-nav a {
    padding-block: var(--s4);
    border-bottom: 1px solid var(--linie-dunkel);
  }

  .leiste-nav a:last-child {
    border-bottom: 0;
  }

  .leiste-nav .nav-cta {
    margin-top: var(--s4);
    text-align: center;
  }

  /* Im ausgeklappten Menü fließt der Sprachwähler mit, statt als schwebende
     Karte über den Einträgen zu liegen. */
  .leiste-nav .sprache {
    order: 10;
    margin-top: var(--s4);
  }

  .leiste-nav .sprache > summary {
    justify-content: center;
    padding-block: var(--s3);
  }

  .leiste-nav .sprache-liste {
    position: static;
    margin-top: var(--s2);
    box-shadow: none;
  }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
  .leiste,
  .nav-schalter,
  .skip-link,
  .schnellkontakt {
    display: none !important;
  }

  body,
  body.hell {
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}

/* --- Kontakt-Blasen: scrollen auf jeder Seite mit ------------------------- */

.kontakt-blasen {
  position: fixed;
  z-index: 40;
  right: clamp(12px, 2vw, 22px);
  bottom: max(clamp(14px, 3vh, 26px), env(safe-area-inset-bottom));
  display: grid;
  gap: 12px;
}

.blase {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  transition: transform 160ms ease;
}

.blase:hover,
.blase:focus-visible {
  transform: translateY(-3px) scale(1.05);
}

.blase svg {
  width: 26px;
  height: 26px;
}

.blase-whatsapp {
  background: #25d366;
}

.blase-instagram {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.blase-telefon {
  background: var(--gold);
  color: var(--nacht);
}

@media (max-width: 640px) {
  .blase {
    width: 50px;
    height: 50px;
  }

  .blase svg {
    width: 24px;
    height: 24px;
  }

  .kontakt-blasen {
    gap: 10px;
  }
}

@media print {
  .kontakt-blasen {
    display: none;
  }
}