/* Gedenkblüte — gemeinsames Fundament aller Seiten.
   Keine externen Schriften und keine externen Dienste: nichts, was beim
   Aufruf Daten an Dritte gibt. */

:root {
  --tinte: #16231b;
  --tinte-tief: #0c1611;
  --creme: #f4efe6;
  --creme-still: #cfc9bd;
  --gold: #c8a97e;
  --moos: #7d9078;
  /* Zwei Schriften mit klarer Aufgabenteilung: Cormorant ist fein und
     hochkontrastig — herrlich groß, zu zart für Fließtext. Den trägt Georgia. */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --display: "Cormorant", Georgia, "Palatino Linotype", serif;
  --fahrt: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rand: min(6vw, 5.5rem);
}

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

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

body {
  background: var(--tinte-tief);
  color: var(--creme);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: rgba(200, 169, 126, 0.32); }

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

.hueter { width: min(72rem, 100% - 2 * var(--rand)); margin-inline: auto; }
.hueter--schmal { width: min(46rem, 100% - 2 * var(--rand)); }

/* ---------- Die gläserne Fläche ---------- */

/* Das Bauteil, das die beiden Hälften des Ortes verbindet. Über der Landschaft
   trägt es die Schrift, ohne das Bild zuzudecken — man sieht die Wiese durch
   sie hindurch. In der App ist dieselbe Fläche die Karte um ein Formular.
   Ein Stil für Bildwelt und Bedienung, damit der Übergang keine Kante hat.

   Warum nicht einfach ein Schatten hinter der Schrift: Auf einem hellen,
   unruhigen Bild — Gräser im Gegenlicht — braucht heller Text so viel Schatten,
   dass er schmutzig wird. Die Fläche senkt stattdessen das Bild darunter ab. */
.glas {
  position: relative;
  background: rgba(12, 22, 17, 0.34);
  backdrop-filter: blur(20px) saturate(112%);
  -webkit-backdrop-filter: blur(20px) saturate(112%);
  border: 1px solid rgba(244, 239, 230, 0.16);
  border-radius: clamp(1.1rem, 2.4vw, 1.9rem);
  /* Der innere Lichtstrich oben ist das, was Glas von Milchfolie unterscheidet:
     eine Kante, auf die Licht fällt. */
  box-shadow:
    0 26px 70px rgba(9, 17, 13, 0.42),
    inset 0 1px 0 rgba(244, 239, 230, 0.11);
  padding: clamp(1.9rem, 4.5vw, 3.2rem) clamp(1.4rem, 4vw, 3rem);
}
/* Wo die Fläche trägt, braucht die Schrift keinen Schatten mehr — er würde sie
   nur wieder weich machen. */
.glas h1, .glas h2, .glas p { text-shadow: none; }

/* Ohne Weichzeichner hinter der Fläche (ältere Browser, abgeschaltete
   Verzierungen) würde man das Bild ungetrübt durchsehen und läse nichts.
   Dann wird die Fläche eben dichter — dasselbe Bauteil, nur weniger Glas. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas { background: rgba(11, 20, 15, 0.82); }
}

/* ---------- Schrift ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
}
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

/* ---------- Die Wortmarke ---------- */

.marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.7rem);
  margin: 0;
}
/* <picture> soll die Anordnung nicht stören — das Bild selbst ist das Element. */
.marke picture { display: contents; }
.marke__zeichen {
  width: clamp(160px, 22vw, 320px);
  height: auto;
  filter: drop-shadow(0 10px 46px rgba(12, 22, 17, 0.8));
}
.marke__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3.6rem, 12vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: var(--creme);
  /* Mehrere Schatten übereinander: ein enger für die Kante, ein weiter für die
     Ablösung vom Bild. Ein einzelner müsste so hart sein, dass er schmutzt. */
  text-shadow:
    0 1px 2px rgba(12, 22, 17, 0.9),
    0 3px 14px rgba(12, 22, 17, 0.85),
    0 8px 60px rgba(12, 22, 17, 0.95);
}
.marke__spruch {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.7rem);
  /* Näher an den Namen als der Abstand zwischen Zeichen und Name: Spruch und
     Name gehören zusammen, das Emblem steht für sich. Der Flex-Abstand wird
     hier also wieder ein Stück zurückgenommen. */
  margin-top: clamp(-1.05rem, -1.7vw, -0.45rem);
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.9vw, 2.25rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--creme);
  text-shadow:
    0 1px 2px rgba(12, 22, 17, 0.9),
    0 3px 16px rgba(12, 22, 17, 0.9),
    0 6px 44px rgba(12, 22, 17, 0.95);
}
/* Die feinen Striche links und rechts des Spruchs. */
.marke__spruch::before,
.marke__spruch::after {
  content: "";
  display: block;
  width: clamp(1.6rem, 5vw, 3.4rem);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(244, 239, 230, 0.55), transparent);
}

.ueberschrift-klein {
  font-size: 0.76rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.fliesstext { color: var(--creme-still); max-width: 40rem; }
.fliesstext + .fliesstext { margin-top: 1.2rem; }

/* ---------- Kopf ---------- */

/* Die Aktionsleiste steht auf jeder Seite an derselben Stelle und bleibt beim
   Scrollen oben. Über einem Bild ist sie zunächst unsichtbar — erst wenn Inhalt
   darunter durchläuft, legt sich ein dunkler Schleier darunter, damit die
   Schrift lesbar bleibt, ohne das Bild von Anfang an zu zerschneiden. */
.kopf {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.7rem, 1.6vw, 1.1rem) clamp(1.2rem, 3.5vw, 3rem);
  z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background 500ms ease, border-color 500ms ease, padding 400ms ease;
}
/* Die Leiste ist von Anfang an dunkel unterlegt — beim Scrollen wird sie
   nur noch etwas dichter. */
.kopf {
  background: rgba(9, 17, 13, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.kopf[data-gescrollt="true"], .kopf--fest {
  background: rgba(9, 17, 13, 0.93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(244, 239, 230, 0.14);
}
.kopf__logo { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.kopf__logo img { height: clamp(38px, 4vw, 52px); width: auto; }
.kopf__text { display: flex; flex-direction: column; gap: 0.15rem; }
.kopf__name {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--creme);
  white-space: nowrap;
}
.kopf__spruch {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  letter-spacing: 0.13em;
  line-height: 1.1;
  color: var(--creme-still);
  white-space: nowrap;
}
.kopf__werkzeuge { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.4rem); }

/* Auf der Eingangsseite trägt das Emblem in der Bildmitte die Marke — die Leiste
   führt dort kein Zeichen. Ohne zweites Element würde 'space-between' die Wege
   an den linken Rand drücken; sie stehen stattdessen mittig. */
.kopf--ohne-zeichen { justify-content: center; }

/* ---------- Menü ---------- */

.menue-knopf {
  display: none;
  background: none; border: 0;
  color: var(--creme);
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 0.7rem 0.4rem;
  align-items: center; gap: 0.6rem;
}
.menue-knopf__striche { display: block; width: 22px; height: 10px; position: relative; }
.menue-knopf__striche::before,
.menue-knopf__striche::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: currentColor;
  transition: transform 400ms var(--fahrt);
}
.menue-knopf__striche::before { top: 0; }
.menue-knopf__striche::after { bottom: 0; }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { transform: translateY(4.5px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { transform: translateY(-4.5px) rotate(-45deg); }

.menue {
  position: fixed; inset: 0;
  z-index: 39;
  background: rgba(9, 17, 13, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(1.1rem, 3vh, 2rem);
  opacity: 0; visibility: hidden;
  transition: opacity 500ms ease, visibility 500ms;
}
.menue[data-offen="true"] { opacity: 1; visibility: visible; }
.menue a {
  font-family: var(--display);
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  color: var(--creme);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 300ms ease;
}
.menue a:hover, .menue a:focus-visible { opacity: 1; }
.menue__rechtliches {
  margin-top: clamp(1rem, 3vh, 2rem);
  display: flex; gap: 1.6rem;
}
.menue__rechtliches a { font-family: var(--serif); font-size: 0.95rem; opacity: 0.6; }

@media (max-width: 900px) {
  .kopf__werkzeuge .nur-weit { display: none; }
  .menue-knopf { display: inline-flex; }
}
@media (max-width: 640px) {
  .kopf__spruch { display: none; }
}
@media (max-width: 460px) {
  .kopf__text { display: none; }
}

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

/* Alle Knöpfe teilen sich Schrift, Schreibweise, Laufweite und Höhe.
   Unterschiedlich ist allein die Füllung — nie die Beschriftung. */
.knopf-still, .knopf-rand, .knopf-voll {
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  text-transform: none;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 999px;
}

.knopf-still {
  background: none;
  color: var(--creme);
  opacity: 0.74;
  padding: 0.9rem 0.35rem;
  transition: opacity 400ms ease;
  text-shadow: 0 2px 18px rgba(12, 22, 17, 0.9);
}
.knopf-still:hover, .knopf-still:focus-visible { opacity: 1; }

.knopf-rand {
  border-color: rgba(244, 239, 230, 0.42);
  padding: 0.9rem 1.9rem;
  backdrop-filter: blur(7px);
  background: rgba(12, 22, 17, 0.22);
  transition: opacity 400ms ease, border-color 400ms ease, background 400ms ease;
}
.knopf-rand:hover { border-color: rgba(244, 239, 230, 0.9); background: rgba(12, 22, 17, 0.4); }

.knopf-voll {
  background: var(--creme);
  color: var(--tinte);
  padding: 0.9rem 1.9rem;
  transition: transform 400ms var(--fahrt), background 400ms ease;
}
.knopf-voll:hover { transform: translateY(-2px); background: #fff; }

:focus-visible { outline: 1px solid rgba(244, 239, 230, 0.6); outline-offset: 5px; }

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

.fuss {
  border-top: 1px solid rgba(244, 239, 230, 0.1);
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  margin-top: clamp(3rem, 8vw, 6rem);
}
.fuss__reihe {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem;
  align-items: center; justify-content: space-between;
}
.fuss__zeichen img { height: 34px; width: auto; opacity: 0.75; }
.fuss__wege { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.fuss__wege a {
  color: var(--creme-still); text-decoration: none;
  font-size: 0.88rem; letter-spacing: 0.06em;
  opacity: 0.8; transition: opacity 300ms ease;
}
.fuss__wege a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.fuss__wort { font-size: 0.85rem; color: var(--creme-still); opacity: 0.62; margin-top: 1.8rem; }

/* ---------- Sanftes Erscheinen beim Scrollen ---------- */

.kommt { opacity: 0; transform: translateY(22px); transition: opacity 1100ms var(--fahrt), transform 1100ms var(--fahrt); }
.kommt[data-da="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kommt { opacity: 1; transform: none; transition: none; }
}