/* Hallmark · direction: custom (the owner's brief: earthy greens, cream, terracotta, serif heads) · genre: editorial · job: visit and call, the action in the header and the hero · hero: photograph full-bleed on phones with the claim set on it, split on desktop · nav: wordmark, links, a call button that never leaves · footer: wordmark, legal links, maker credit · imagery: Unsplash stand-ins stored locally in /images, swapped later for the shop's own photos · signature: the opening-hours card that knows the season and says if the shop is open right now · axes: light/old-style-serif/warm · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the stand-in photos are generic until the shop's own pictures arrive */

/* ---------- Schriften (selbst gehostet, SIL Open Font License) ---------- */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --c-papier: #faf6ef;
  --c-creme: #f0e8d9;
  --c-creme-linie: #ddd2bd;
  --c-moos: #2f3d2b;
  --c-moos-tief: #232e20;
  --c-salbei: #8a9875;
  --c-tinte: #2a2723;
  --c-tinte-weich: #5b554c;
  --c-terra: #a3512e;
  --c-terra-tief: #853f22;
  --c-rose: #ecc8b8;
  --c-auf-moos: #f4efe5;
  --c-auf-moos-weich: #cfd3c3;
  --c-weiss: #fffdf9;
  --c-linie-moos: rgb(244 239 229 / 0.16);
  --c-schatten: rgb(35 46 32 / 0.14);
  --c-verlauf: rgb(24 30 21 / 0.82);
  --c-offen: #2f6b3a;
  --c-offen-grund: #e1eddc;
  --c-zu: #8c3a2a;
  --c-zu-grund: #f6e1da;
  --c-fehler: #a12a1a;

  --f-kopf: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.25rem;
  --t-h3: 1.625rem;
  --t-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --t-h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;

  --rad-klein: 6px;
  --rad: 14px;
  --rad-knopf: 999px;

  --kopf-hoehe: 64px;
  --breite: 1160px;
  --rand: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + var(--s-4)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-papier);
  color: var(--c-tinte);
  font-family: var(--f-text);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--f-kopf); font-weight: 600; line-height: 1.08; margin: 0; overflow-wrap: break-word; min-width: 0; text-wrap: balance; color: inherit; }
h3 { font-size: var(--t-h3); line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--c-terra); outline-offset: 3px; border-radius: var(--rad-klein); transition: none; }
.abschnitt--moos :focus-visible, .fuss :focus-visible, .hero :focus-visible { outline-color: var(--c-rose); }

.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--c-moos); color: var(--c-auf-moos); padding: var(--s-3) var(--s-4); border-radius: var(--rad-klein); }
.skip:focus-visible { top: var(--s-3); }

.behaelter { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: var(--s-3) var(--s-5);
  border: 2px solid var(--c-terra); border-radius: var(--rad-knopf);
  background: var(--c-terra); color: var(--c-weiss);
  font: 600 var(--t-md)/1.2 var(--f-text);
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.knopf:active { transform: scale(.97); }
.knopf:disabled { background: var(--c-creme-linie); border-color: var(--c-creme-linie); color: var(--c-tinte-weich); cursor: progress; transform: none; }
.knopf--rand { background: transparent; color: var(--c-terra); }
.knopf--klein { min-height: 44px; padding: var(--s-2) var(--s-4); font-size: var(--t-sm); }
.knopf--voll { width: 100%; }
@media (hover: hover) {
  .knopf:hover { background: var(--c-terra-tief); border-color: var(--c-terra-tief); }
  .knopf--rand:hover { background: var(--c-terra); border-color: var(--c-terra); color: var(--c-weiss); }
}
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.textlink { color: var(--c-terra); font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (hover: hover) { .textlink:hover { color: var(--c-terra-tief); text-decoration-thickness: 2px; } }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-papier);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.kopf.ist-gescrollt { border-bottom-color: var(--c-creme-linie); box-shadow: 0 6px 20px -14px var(--c-schatten); }
.kopf__innen { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); height: var(--kopf-hoehe); display: flex; align-items: center; gap: var(--s-4); }
.marke { display: flex; flex-direction: column; text-decoration: none; line-height: 1; margin-right: auto; color: var(--c-moos); }
.marke__name { font-family: var(--f-kopf); font-weight: 600; font-size: 1.75rem; letter-spacing: 0; }
.marke__zusatz { font-size: 0.8125rem; color: var(--c-tinte-weich); margin-top: var(--s-1); }
.kopf__aktionen { display: flex; align-items: center; gap: var(--s-2); }
.menue-knopf {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--c-creme-linie); border-radius: var(--rad-knopf); background: transparent; color: var(--c-moos); cursor: pointer;
}
.menue-knopf .ico { width: 22px; height: 22px; }

.nav { display: none; }
.nav a { text-decoration: none; color: var(--c-tinte); font-size: var(--t-sm); font-weight: 600; padding: var(--s-2) 0; display: block; }
@media (hover: hover) { .nav a:hover { color: var(--c-terra); } }

/* Menü am Handy: klappt unter dem Kopf auf */
.js .nav.ist-offen {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-papier); border-bottom: 1px solid var(--c-creme-linie);
  box-shadow: 0 18px 30px -20px var(--c-schatten);
  padding: var(--s-2) var(--rand) var(--s-5);
}
.js .nav.ist-offen a { font-size: var(--t-lg); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-creme); }
.kopf__innen { position: relative; }

@media (min-width: 960px) {
  :root { --kopf-hoehe: 76px; --rand: 32px; }
  .nav, .js .nav.ist-offen { display: block; position: static; background: none; border: 0; box-shadow: none; padding: 0; }
  .nav ul { display: flex; gap: var(--s-5); }
  .js .nav.ist-offen a { font-size: var(--t-sm); padding: var(--s-2) 0; border: 0; }
  .menue-knopf { display: none; }
  .marke { margin-right: var(--s-5); }
  .nav { margin-right: auto; }
}

/* ---------- Hero ---------- */
.hero { position: relative; display: grid; min-height: calc(100svh - var(--kopf-hoehe)); background: var(--c-moos-tief); color: var(--c-auf-moos); }
.hero__bild { margin: 0; grid-area: 1 / 1; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__text {
  grid-area: 1 / 1; align-self: end; position: relative;
  padding: var(--s-9) var(--rand) calc(var(--s-6) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--c-verlauf) 0%, var(--c-verlauf) 62%, transparent 100%);
}
.hero h1 { font-size: var(--t-h1); font-weight: 500; max-width: 10em; hyphens: manual; }
.hero__satz { font-size: var(--t-lg); line-height: 1.45; margin-top: var(--s-4); max-width: 34ch; color: var(--c-auf-moos); }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.hero__knoepfe .knopf { flex: 1 1 auto; }
.hero .knopf--rand { color: var(--c-auf-moos); border-color: var(--c-auf-moos); }
@media (hover: hover) { .hero .knopf--rand:hover { background: var(--c-auf-moos); border-color: var(--c-auf-moos); color: var(--c-moos); } }

@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(calc(100svh - var(--kopf-hoehe)), 820px); background: var(--c-papier); color: var(--c-tinte); }
  .hero__bild { grid-area: 1 / 2; }
  .hero__text {
    grid-area: 1 / 1; align-self: center; background: none;
    padding: var(--s-8) var(--s-8) var(--s-8) max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  }
  .hero h1 { color: var(--c-moos); }
  .hero__satz { color: var(--c-tinte-weich); }
  .hero__knoepfe .knopf { flex: 0 0 auto; }
  .hero .knopf--rand { color: var(--c-terra); border-color: var(--c-terra); }
  @media (hover: hover) { .hero .knopf--rand:hover { background: var(--c-terra); border-color: var(--c-terra); color: var(--c-weiss); } }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--s-8); }
.abschnitt__titel { font-size: var(--t-h2); font-weight: 500; color: var(--c-moos); max-width: 18ch; margin-bottom: var(--s-6); }
.abschnitt--moos { background: var(--c-moos); color: var(--c-auf-moos); }
.abschnitt--moos .abschnitt__titel { color: var(--c-auf-moos); }
.abschnitt--creme { background: var(--c-creme); }
@media (min-width: 960px) { .abschnitt { padding-block: var(--s-9); } .abschnitt__titel { margin-bottom: var(--s-7); } }

/* Bereiche */
.bereiche { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.bereich { background: var(--c-weiss); border-radius: var(--rad); overflow: hidden; box-shadow: 0 1px 0 var(--c-creme-linie), 0 20px 40px -30px var(--c-schatten); display: flex; flex-direction: column; }
.bereich img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bereich__text { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.bereich h3 { font-size: 2rem; color: var(--c-moos); }
.bereich__ort { color: var(--c-tinte-weich); font-size: var(--t-sm); margin-top: calc(var(--s-2) * -1); }
.bereich .textlink { margin-top: auto; padding-top: var(--s-2); }
@media (min-width: 720px) { .bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } .bereich__text { padding: var(--s-6); } }

/* Anlässe */
.anlaesse { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.anlass { align-content: start; padding: var(--s-5) 0; border-top: 1px solid var(--c-linie-moos); display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-2); }
.anlass__ico { grid-row: span 2; width: 40px; height: 40px; fill: none; stroke: var(--c-rose); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.anlass h3 { color: var(--c-auf-moos); }
.anlass p { color: var(--c-auf-moos-weich); }
@media (min-width: 720px) { .anlaesse { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); } }
@media (min-width: 1100px) {
  .anlaesse { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-6); }
  .anlass { grid-template-columns: minmax(0, 1fr); padding-top: var(--s-6); }
  .anlass__ico { grid-row: auto; margin-bottom: var(--s-2); }
}

/* Advent */
.advent__raster { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr); }
.advent__bilder { position: relative; padding-bottom: var(--s-7); }
.advent__bild { border-radius: var(--rad); object-fit: cover; }
.advent__bild--gross { width: 88%; aspect-ratio: 4 / 5; }
.advent__bild--klein { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 1; border: 6px solid var(--c-papier); box-shadow: 0 20px 40px -24px var(--c-schatten); }
.advent__inhalt > p { color: var(--c-tinte-weich); max-width: 46ch; }
.advent .abschnitt__titel { margin-bottom: var(--s-4); }
@media (min-width: 960px) {
  .advent__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: start; }
}

/* Formular */
.formular { margin-top: var(--s-6); display: grid; gap: var(--s-5); background: var(--c-weiss); border-radius: var(--rad); padding: var(--s-5); box-shadow: 0 1px 0 var(--c-creme-linie), 0 20px 40px -30px var(--c-schatten); }
@media (min-width: 720px) { .formular { padding: var(--s-6); } }
.feld { display: grid; gap: var(--s-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.feld label, .feld legend { font-weight: 600; font-size: var(--t-sm); padding: 0; }
.feld__optional { font-weight: 400; color: var(--c-tinte-weich); }
.feld input[type="text"], .feld input[type="tel"], .feld input[type="date"], .feld textarea {
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4);
  font: 400 1rem/1.4 var(--f-text); color: var(--c-tinte);
  background: var(--c-papier); border: 1.5px solid var(--c-creme-linie); border-radius: var(--rad-klein);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.feld input[type="date"] { display: block; }
.feld textarea { resize: vertical; min-height: 96px; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--c-tinte-weich); opacity: .8; }
@media (hover: hover) { .feld input:hover, .feld textarea:hover { border-color: var(--c-salbei); } }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--c-terra); outline-offset: 1px; border-color: var(--c-terra); background: var(--c-weiss); }
.feld input[aria-invalid="true"] { border-color: var(--c-fehler); }
.feld__fehler { color: var(--c-fehler); font-size: var(--t-sm); font-weight: 600; }
.feld input:disabled, .feld textarea:disabled { background: var(--c-creme); color: var(--c-tinte-weich); cursor: not-allowed; }

.wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-1); }
.wahl__option { position: relative; display: block; cursor: pointer; }
.wahl__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl__option span {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: var(--s-2);
  border: 1.5px solid var(--c-creme-linie); border-radius: var(--rad-klein); background: var(--c-papier);
  font-weight: 600; text-align: center;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.wahl__option input:checked + span { background: var(--c-moos); border-color: var(--c-moos); color: var(--c-auf-moos); }
.wahl__option input:focus-visible + span { outline: 3px solid var(--c-terra); outline-offset: 2px; }
@media (hover: hover) { .wahl__option:hover input:not(:checked) + span { border-color: var(--c-salbei); } }

.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__hinweis { font-size: var(--t-sm); color: var(--c-tinte-weich); }
.formular__hinweis a { color: var(--c-terra); }
.formular__status { font-size: var(--t-sm); font-weight: 600; color: var(--c-fehler); }
.formular__status:empty { display: none; }

.bestaetigung { margin-top: var(--s-6); padding: var(--s-6); background: var(--c-offen-grund); border-radius: var(--rad); display: grid; gap: var(--s-4); justify-items: start; }
.bestaetigung h3 { color: var(--c-moos); }
.bestaetigung a { color: var(--c-moos); font-weight: 600; }
.bestaetigung:focus-visible { outline-offset: 4px; }

/* Öffnungszeiten */
.zeiten__saison { margin-top: calc(var(--s-4) * -1); margin-bottom: var(--s-6); color: var(--c-tinte-weich); }
.zeiten__saison:empty { display: none; }
.zeiten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 720px) { .zeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
.zeitkarte { background: var(--c-papier); border-radius: var(--rad); padding: var(--s-5); box-shadow: 0 1px 0 var(--c-creme-linie); }
@media (min-width: 720px) { .zeitkarte { padding: var(--s-6); } }
.zeitkarte h3 { color: var(--c-moos); margin-bottom: var(--s-3); }
.zeitkarte__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.zeitkarte__kopf h3 { margin: 0; }
.status { display: inline-flex; align-items: center; padding: var(--s-1) var(--s-3); border-radius: var(--rad-knopf); font-size: var(--t-sm); font-weight: 600; }
.status--offen { background: var(--c-offen-grund); color: var(--c-offen); }
.status--zu { background: var(--c-zu-grund); color: var(--c-zu); }
.status__weiter { display: block; width: 100%; font-size: var(--t-sm); color: var(--c-tinte-weich); }
.woche { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.woche th, .woche td { text-align: left; padding: var(--s-2) var(--s-2); border-top: 1px solid var(--c-creme); vertical-align: top; }
.woche th { font-weight: 600; width: 4.5em; }
.woche td { text-align: right; white-space: nowrap; }
.woche tr.heute { background: var(--c-creme); }
.woche tr.heute th, .woche tr.heute td { font-weight: 600; color: var(--c-moos); }
.woche tr.heute th { border-radius: var(--rad-klein) 0 0 var(--rad-klein); }
.woche tr.heute td { border-radius: 0 var(--rad-klein) var(--rad-klein) 0; }
.woche .zu { color: var(--c-tinte-weich); }
.heute-tag { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--c-terra); }
.zeitkarte__ausnahme { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--c-zu); font-weight: 600; }

/* Standorte */
.standorte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 720px) { .standorte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
.standort { display: grid; gap: var(--s-4); align-content: start; }
.standort h3 { color: var(--c-moos); }
.standort address { color: var(--c-tinte-weich); font-size: var(--t-lg); line-height: 1.4; }
.karte {
  aspect-ratio: 4 / 3; border-radius: var(--rad); background: var(--c-creme); border: 1px solid var(--c-creme-linie);
  display: grid; place-content: center; justify-items: center; gap: var(--s-3); padding: var(--s-5); text-align: center; overflow: hidden;
}
.karte p { font-size: var(--t-sm); color: var(--c-tinte-weich); max-width: 28ch; }
.karte iframe { width: 100%; height: 100%; border: 0; display: block; }
.karte.ist-geladen { padding: 0; display: block; }

/* Kontakt */
.kontakt { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.kontakt__text p { color: var(--c-auf-moos-weich); max-width: 40ch; margin-top: calc(var(--s-3) * -1); }
.kontakt__knoepfe { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
.kachel {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--s-4); align-items: center;
  min-height: 72px; padding: var(--s-4) var(--s-5);
  background: var(--c-moos-tief); border: 1px solid var(--c-linie-moos); border-radius: var(--rad);
  color: var(--c-auf-moos); text-decoration: none;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.kachel .ico { grid-row: span 2; width: 24px; height: 24px; color: var(--c-rose); }
.kachel__wert { font-weight: 600; font-size: var(--t-lg); overflow-wrap: anywhere; }
.kachel__info { font-size: var(--t-sm); color: var(--c-auf-moos-weich); }
.kachel:active { transform: scale(.98); }
@media (hover: hover) { .kachel:hover { background: var(--c-terra); border-color: var(--c-terra); } .kachel:hover .ico { color: var(--c-auf-moos); } }
@media (min-width: 960px) {
  .kontakt { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7); align-items: start; }
  .kontakt__knoepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel__wert { font-size: var(--t-md); }
}

/* Footer */
.fuss { background: var(--c-moos-tief); color: var(--c-auf-moos-weich); padding-block: var(--s-7) calc(var(--s-7) + env(safe-area-inset-bottom)); font-size: var(--t-sm); }
.fuss__innen { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.fuss__marke { font-family: var(--f-kopf); font-size: 1.75rem; font-weight: 600; color: var(--c-auf-moos); margin-bottom: var(--s-2); }
.fuss__links { display: flex; gap: var(--s-5); }
.fuss__links a { color: var(--c-auf-moos); display: inline-block; padding: var(--s-2) 0; }
.fuss__klein a { color: var(--c-rose); }
@media (hover: hover) { .fuss a:hover { color: var(--c-rose); } }
@media (min-width: 720px) { .fuss__innen { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .fuss__klein { grid-column: 1 / -1; padding-top: var(--s-4); border-top: 1px solid var(--c-linie-moos); } }

/* ---------- Scroll-Animation (nur mit JS, nie bei reduzierter Bewegung) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.ist-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .knopf, .kachel, .kopf, .feld input, .wahl__option span { transition: none; }
  .knopf:active, .kachel:active { transform: none; }
}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.rechtliches { padding-block: var(--s-8); max-width: 72ch; }
.rechtliches h1 { font-size: var(--t-h2); font-weight: 500; color: var(--c-moos); margin-bottom: var(--s-6); }
.rechtliches h2 { font-size: var(--t-h3); color: var(--c-moos); margin: var(--s-6) 0 var(--s-3); }
.rechtliches p { margin-bottom: var(--s-3); }
.rechtliches a { color: var(--c-terra); }