/* ==========================================================================
   Mamma Mia — Vorschau 2026-09 · basis.css
   Fundament: Tokens, Reset, Typografie, Knöpfe, Kopf, Fuß, Handy-Leiste.
   Reines CSS, keine Bibliothek, kein Build.  Schriften liegen lokal in
   ../fonts/ — es geht KEINE Anfrage nach draußen.
   Farben und Kontraste sind in ../DESIGNSYSTEM.md gerechnet und belegt.
   ========================================================================== */

/* ---------- 1. Schriften (lokal) ---------------------------------------- */

/* Cormorant Garamond · variabel 300–700 · Headlines und Zitate */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Inter Tight · variabel 100–900 · alles andere */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Runde 9: Ersatzschriften mit angeglichenen Maßen.  Bis die eigenen
   Schriften da sind, steht der Text in einer Systemschrift; die ist
   breiter (Arial 6 %, Georgia 12 %, gemessen in Chrome an Kopf, Knopf und
   Einstieg).  Beim Tausch rückten Kopfleiste und Knopf dadurch um bis zu
   26 px (CLS 0,0004).  size-adjust und die Höhenwerte aus den woff2
   (Inter Tight 0,969/0,241, Cormorant 0,924/0,287) gleichen das aus. */
@font-face {
  font-family: "Inter Tight Ersatz";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 95%;
  ascent-override: 102%;
  descent-override: 25.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Ersatz";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 89%;
  ascent-override: 103.8%;
  descent-override: 32.2%;
  line-gap-override: 0%;
}

/* ---------- 2. Tokens ---------------------------------------------------- */

:root {
  /* Farben — Markenpalette (Espresso, Weinrot, Sand).  Die grüne
     Umfärbung vom 23.09.2026 ist auf Wunsch des Auftraggebers wieder raus
     („nicht dieses Grün überall, die Seite war an sich schon gut"). */
  --elfenbein: #f6f1e8;
  --espresso: #28231f;
  --weinrot: #7b302d;
  --oliv: #65694f;
  --sand: #ddd2c3;

  /* abgeleitete Töne (nur zum Abstufen, nie als neue Markenfarbe) */
  --weinrot-tief: #662724;     /* Hover auf gefülltem Knopf */
  --espresso-weich: #6b635b;   /* Nebentext auf Elfenbein — 5,24:1 */
  --sand-hell: #ebe3d7;        /* Flächen, die sich kaum abheben sollen */
  --linie: #cfc2b1;            /* feine Linie auf hellem Grund */
  --linie-dunkel: #4a423b;     /* feine Linie auf Espresso */
  --auf-dunkel-weich: #c9beb0; /* Nebentext auf Espresso — 7,0:1 */

  /* ---- Flächen · dezentes Farbspiel (Ansage Auftraggeber 21.09.2026) -------------
     „Die jeweiligen Seiten sollen nicht immer gleiche Hintergründe haben."
     Vier helle Töne plus Espresso.  Alle bleiben INNERHALB der Palette:
     Sand ist --sand aufgehellt, Rosé ist --weinrot auf 4 % über Elfenbein,
     Oliv ist --oliv auf 4 % über Elfenbein.  Gerechnet am 21.09.2026 gegen
     --espresso (Fließtext) und --espresso-weich (Nebentext):

       Fläche            Hex       Text    Nebentext  Weinrot
       elfenbein         #f6f1e8   13,82    5,24       8,11
       sand              #efe6d6   12,56    4,76       7,36
       rosé              #f3eae4   13,11    4,97       7,69
       oliv              #edefe6   13,40    5,08       7,86

     Der schlechteste Wert ist 4,76:1 und liegt damit über 4,5:1.
     --flaeche-jetzt trägt die Farbe der GERADE geltenden Fläche weiter; davon
     leben Knoten am Zeitstrahl und alles andere, was sich vor den Grund legen
     und ihn wieder aufnehmen muss. */
  --flaeche-sand: #efe6d6;
  --flaeche-rose: #f3eae4;
  --flaeche-oliv: #edefe6;
  --flaeche-jetzt: var(--elfenbein);

  /* Rollen */
  --grund: var(--elfenbein);
  --text: var(--espresso);
  --text-leise: var(--espresso-weich);
  --titel: var(--espresso);    /* Überschriften: Espresso auf Elfenbein */
  --akzent: var(--weinrot);
  --fokus: var(--weinrot);

  /* Schrift */
  --serif: "Cormorant Garamond", "Cormorant Ersatz", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", "Inter Tight Ersatz", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Typo-Skala — fließend, Basis 17→18 px */
  --t-klein: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --t-basis: clamp(1.0625rem, 1.03rem + 0.18vw, 1.125rem);
  --t-gross: clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);
  --t-h3: clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --t-h2: clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);
  --t-h1: clamp(2.375rem, 1.75rem + 3.1vw, 4.25rem);
  --t-riese: clamp(2.75rem, 1.9rem + 4.2vw, 5.25rem);

  --zeile-eng: 1.12;
  --zeile-text: 1.62;
  --sperr-weit: 0.14em;

  /* Abstände — 4-px-Raster */
  --a1: 0.25rem;
  --a2: 0.5rem;
  --a3: 0.75rem;
  --a4: 1rem;
  --a5: 1.5rem;
  --a6: 2rem;
  --a7: 3rem;
  --a8: 4rem;
  --a9: 6rem;
  --a10: clamp(3.5rem, 2rem + 7vw, 8rem);      /* Abschnitts-Luft, weit */
  --a10-eng: clamp(2.5rem, 1.6rem + 4.2vw, 5rem); /* Abschnitts-Luft, dicht */

  /* Inhaltsbreiten */
  --breit: 1240px;
  --mittel: 980px;
  --schmal: 680px;
  --rand: clamp(1.25rem, 5vw, 3rem);

  /* Form */
  --radius: 3px;
  --radius-gross: 5px;
  --strich: 1px;

  /* Bewegung */
  --zeit: 220ms;
  --kurve: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* Handy-Leiste: Höhe als Variable, damit body-padding stimmt */
  --leiste-h: 3.5rem;
}

/* ---------- 3. Reset ----------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-basis);
  line-height: var(--zeile-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  /* Ligaturen und Kerning an, aber KEIN font-variant-ligatures:common mit
     diskretionären — Inter Tight bringt sonst Zierformen, die im Fließtext
     nichts zu suchen haben.  Ziffern im Text laufen proportional; wo sie in
     einer Spalte stehen (Preise, Uhrzeiten), schaltet --ziffer-tabelle um. */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* Textauszeichnung im Haus: Weinrot auf Elfenbein */
::selection { background: var(--weinrot); color: var(--elfenbein); }

/* Tabellenziffern überall dort, wo Zahlen untereinander stehen */
.preis, .teller__preis, .zeiten span + span, .weg__jahr, .leist__nr,
.karte__preis, .stimmen-zahl {
  font-variant-numeric: tabular-nums lining-nums;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- 4. Typografie ------------------------------------------------ */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--titel);
  line-height: var(--zeile-eng);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p + p { margin-top: var(--a4); }

/* Fließtext: keine Hurenkinder, Zeilenlänge im Lesebereich 55–70 Zeichen.
   text-wrap:pretty greift nur, wo der Browser es kann; sonst passiert nichts. */
p, li, blockquote, address, figcaption { text-wrap: pretty; }
main p:not(.vorspann):not(.beleg):not(.bildwort):not(.leist__d) { max-width: 66ch; }

.vorspann {
  font-size: var(--t-gross);
  line-height: 1.55;
  color: var(--text-leise);
  max-width: 54ch;
}

.leise { color: var(--text-leise); }

/* Kicker — kleine Vorzeile über einer Überschrift */
.kicker {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: var(--a3);
}
.abschnitt--dunkel .kicker { color: var(--sand); }

/* Zitat — die einzige Stelle, an der kursiv vorkommt */
.zitat {
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-style: italic;
  line-height: 1.38;
  max-width: 34ch;
}
.zitat cite {
  display: block;
  margin-top: var(--a4);
  font-family: var(--sans);
  font-size: var(--t-klein);
  font-style: normal;
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--text-leise);
}
.abschnitt--dunkel .zitat cite { color: var(--auf-dunkel-weich); }

/* ---------- 5. Links ----------------------------------------------------- */

a { color: var(--akzent); }

a:not(.knopf):not(.kopf__marke):not(.nav__punkt):not(.leiste__punkt) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--zeit) var(--kurve);
}
a:not(.knopf):hover { text-decoration-color: currentColor; }

.abschnitt--dunkel a { color: var(--sand); }

/* ---------- 6. Fokus ----------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 2px;
}
.abschnitt--dunkel :focus-visible,
.kopf__panel :focus-visible { outline-color: var(--sand); }

/* Skip-Link */
.springen {
  position: absolute;
  left: var(--a4);
  top: var(--a4);
  z-index: 200;
  transform: translateY(-160%);
  padding: var(--a3) var(--a5);
  background: var(--weinrot);
  color: var(--elfenbein);
  text-decoration: none;
  border-radius: var(--radius);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: transform var(--zeit) var(--kurve);
}
.springen:focus-visible { transform: translateY(0); }

/* ---------- 7. Knöpfe — genau zwei Varianten ---------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a2);
  /* Ansage Auftraggeber 22.09.2026: 40 bis 44 px hoch.  Vorher 2.875rem = 46 px. */
  min-height: 2.75rem;
  /* Runde 5: 0.7rem oben/unten ergab gemessen 45,5 px.  Mit 0.5rem trägt
     min-height allein die Höhe: genau 44 px. */
  padding: 0.5rem 1.5rem;
  border: var(--strich) solid var(--weinrot);
  border-radius: var(--radius);
  background: var(--weinrot);
  color: var(--elfenbein);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--zeit) var(--kurve),
    border-color var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}
.knopf:hover {
  background: var(--weinrot-tief);
  border-color: var(--weinrot-tief);
  color: var(--elfenbein);
}

.knopf--linie {
  background: transparent;
  color: var(--weinrot);
  border-color: var(--linie);
}
.knopf--linie:hover {
  background: transparent;
  border-color: var(--weinrot);
  color: var(--weinrot-tief);
}

.abschnitt--dunkel .knopf--linie {
  color: var(--sand);
  border-color: var(--linie-dunkel);
}
.abschnitt--dunkel .knopf--linie:hover {
  color: var(--elfenbein);
  border-color: var(--sand);
}

/* ---------- 8. Hilfsklassen --------------------------------------------- */

.innen {
  width: 100%;
  max-width: var(--breit);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.innen--mittel { max-width: var(--mittel); }
.innen--schmal { max-width: var(--schmal); }

.abschnitt {
  padding-block: var(--a10);
  background: var(--flaeche-jetzt);
}
/* Takt statt Gleichmaß (Befund A3): dichte Lesezonen ziehen sich zusammen,
   der Auftritt des Zitats und die Atmosphäre bleiben luftig. */
.abschnitt--eng { padding-block: var(--a10-eng); }

.abschnitt--sand { --flaeche-jetzt: var(--flaeche-sand); }
.abschnitt--rose { --flaeche-jetzt: var(--flaeche-rose); }
.abschnitt--oliv { --flaeche-jetzt: var(--flaeche-oliv); }

.abschnitt--dunkel {
  --flaeche-jetzt: var(--espresso);
  --titel: var(--elfenbein);
  color: var(--elfenbein);
}
.abschnitt--dunkel .leise,
.abschnitt--dunkel .vorspann { color: var(--auf-dunkel-weich); }

/* feine Linie statt Kasten */
.linie {
  border: 0;
  border-top: var(--strich) solid var(--linie);
  margin: 0;
}
.abschnitt--dunkel .linie { border-top-color: var(--linie-dunkel); }

/* ---------- Bildmarke: die sizilianische Trinacria ------------------------
   Ansage Auftraggeber 2026-09-20: Das Zeichen BLEIBT IN SEINEN FARBEN.  Nicht
   einfärben, nicht invertieren, nicht abdunkeln, nie als Kachel oder Muster.
   Es erscheint an genau drei Stellen: Kopf, Fuß, Favicon — dazu als ruhiges
   Zeichen über dem Zitat im dunklen Abschnitt.
   Die Dateien liegen als PNG und WebP in 1x und 2x (bilder-bauen.py). */

.marke__zeichen {                 /* Kopf: Handy 36 px */
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
}
@media (min-width: 62rem) {       /* Desktop 44 px */
  .marke__zeichen { width: 2.75rem; height: 2.75rem; }
}

.fuss__zeichen {                  /* Fuß: etwas größer als im Kopf */
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
}

.trinacria {                      /* Zeichen über dem Zitat, dunkler Grund */
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  /* img ist im Reset ein Block — ohne auto-Rand bliebe das Zeichen links
     stehen, auch wenn der Abschnitt mittig gesetzt ist. */
  margin-inline: auto;
}

/* <picture> ist im Reset ebenfalls ein Block: im Flex-Kopf/-Fuß darf es
   nicht wachsen, im mittigen Abschnitt nicht links kleben. */
.kopf__marke > picture,
.fuss__marke > picture { flex: none; }

/* Bild, das eine Fläche füllt — Fokuspunkt kommt per style aus bilder.json */
.bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.figur { margin: 0; }
.figur figcaption {
  margin-top: var(--a3);
  font-size: var(--t-klein);
  color: var(--text-leise);
}

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

/* ---------- 9. Reveal ---------------------------------------------------- */
/* Ohne JS und ohne Bewegungswunsch ist ALLES sichtbar: die Klasse wirkt erst,
   wenn js/basis.js <html class="js"> gesetzt hat. */

.zeig { /* Grundzustand: sichtbar */ }

/* Zügig: der Inhalt ist da, sobald er hereinkommt — 300 ms, nicht 620.
   Das Sicherheitsnetz (1,2 s bzw. verborgener Tab) steht in js/basis.js. */
html.js .zeig {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms var(--kurve), transform 300ms var(--kurve);
}
html.js .zeig.ist-da {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .zeig,
  html.js .zeig.ist-da {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 10. Kopfbereich --------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--elfenbein);
  border-bottom: var(--strich) solid var(--linie);
}

.kopf__reihe {
  display: flex;
  align-items: center;
  gap: var(--a5);
  min-height: 4.25rem;
}

.kopf__marke {
  display: inline-flex;
  align-items: center;
  gap: var(--a3);
  text-decoration: none;
  color: var(--espresso);
  margin-right: auto;
}
.kopf__wort {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}
.kopf__bei {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--text-leise);
  margin-top: 0.2rem;
  white-space: nowrap;          /* darf nie umbrechen */
}
@media (max-width: 26rem) {      /* 416 px: Beizeile enger stellen */
  .kopf__wort { font-size: 1.3125rem; }
  .kopf__bei { font-size: 0.625rem; letter-spacing: 0.1em; }
}

.nav { display: none; }

.nav__liste {
  display: flex;
  align-items: center;
  gap: var(--a5);
}
.nav__punkt {
  display: inline-block;
  padding-block: var(--a2);
  color: var(--espresso);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: var(--strich) solid transparent;
  transition: border-color var(--zeit) var(--kurve);
}
.nav__punkt:hover,
.nav__punkt[aria-current="page"] { border-bottom-color: var(--weinrot); }

.kopf__tat { display: none; }

/* Schalter für das Handy-Menü */
.kopf__schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--a2);
  min-height: 2.75rem;
  padding: var(--a2) var(--a3);
  color: var(--espresso);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kopf__balken {
  display: block;
  width: 22px;
  height: 9px;
  border-top: var(--strich) solid currentColor;
  border-bottom: var(--strich) solid currentColor;
}
.kopf__schalter[aria-expanded="true"] .kopf__balken {
  border-bottom-color: transparent;
}

/* Panel — kein Blur, klare Fläche */
.kopf__panel {
  display: none;
  border-top: var(--strich) solid var(--linie);
  background: var(--elfenbein);
  padding-block: var(--a5) var(--a6);
}
.kopf__panel[data-offen="ja"] { display: block; }

.kopf__panel .nav__liste {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.kopf__panel .nav__punkt {
  padding-block: var(--a4);
  font-size: var(--t-gross);
  font-family: var(--serif);
  letter-spacing: 0;
  text-transform: none;
  border-bottom: var(--strich) solid var(--linie);
}
.kopf__panel .nav__punkt:hover { border-bottom-color: var(--weinrot); }
.kopf__panel .knopf { width: 100%; margin-top: var(--a5); }

@media (min-width: 62rem) {          /* 992 px */
  .nav { display: block; }
  .kopf__tat { display: inline-flex; }
  .kopf__schalter,
  .kopf__panel { display: none !important; }
}

/* ---------- 11. Öffnungsstatus ------------------------------------------ */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--a2);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}
.status__punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--espresso-weich);
  flex: none;
}
.status[data-offen="ja"] .status__punkt { background: var(--oliv); }
.status[data-offen="nein"] .status__punkt { background: var(--weinrot); }
.abschnitt--dunkel .status { color: var(--auf-dunkel-weich); }

/* ---------- 12. Fußbereich ----------------------------------------------- */

.fuss {
  --titel: var(--elfenbein);
  background: var(--espresso);
  color: var(--elfenbein);
  padding-block: var(--a8) var(--a7);
  font-size: var(--t-klein);
}
/* Der Fuß steht auf Espresso, trägt aber nicht .abschnitt--dunkel. Ohne diese
   Zeile erbt .leise den Nebenton für HELLEN Grund und fällt auf dem dunklen
   Fuß durch (gemessen 21.09.2026 auf allen sieben Seiten).  Mit
   --auf-dunkel-weich sind es 8,50:1. Gleiche Regel wie .abschnitt--dunkel. */
.fuss .leise { color: var(--auf-dunkel-weich); }
.fuss__raster {
  display: grid;
  gap: var(--a6);
  grid-template-columns: 1fr;
}
.fuss__marke {
  display: flex;
  align-items: center;
  gap: var(--a4);
}
.fuss__wort {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
}
.fuss h2 {
  font-family: var(--sans);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--auf-dunkel-weich);
  margin-bottom: var(--a3);
}
.fuss address { font-style: normal; line-height: 1.75; }
.fuss a { color: var(--sand); }
/* Impressum und Datenschutz sind Pflichtlinks (§ 5 DDG). Sie standen mit
   22,7 px unter der Tippfläche aus WCAG 2.5.8 (24 px) — gemessen 21.09.2026,
   statisch und in der WordPress-Fassung gleich. Schriftgröße und Farbe
   bleiben unverändert; nur die Zeilenhöhe wächst von 1,62 auf 24 px.
   Kein Kasten, kein Rahmen: die Fußzeile sieht danach gleich aus. */
.fuss__schluss a { line-height: 24px; min-height: 24px; }

.fuss__schluss {
  margin-top: var(--a7);
  padding-top: var(--a5);
  border-top: var(--strich) solid var(--linie-dunkel);
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2) var(--a5);
  align-items: baseline;
  color: var(--auf-dunkel-weich);
}

@media (min-width: 48rem) {
  .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--a7); }
}

/* Hausstandard §14: die Credit-Zeile ganz unten, auf JEDER Seite genau
   einmal, als echter crawlbarer Link ohne nofollow.  Dezent, aber nicht
   unter 4,5:1 — --auf-dunkel-weich steht auf --espresso bei 7,0:1, der
   Link selbst in Elfenbein bei 11,9:1 (gerechnet 21.09.2026). */
.fuss__roema {
  margin-top: var(--a5);
  font-size: var(--t-klein);
  color: var(--auf-dunkel-weich);
}
.fuss__roema a {
  color: var(--elfenbein);
  text-decoration: none;
  line-height: 24px;
  min-height: 24px;
}
.fuss__roema a:hover,
.fuss__roema a:focus-visible { text-decoration: underline; }

/* Runde 5: am Handy 44 px Tippfläche für Fußlinks und Telefonnummern
   (Fuß und Adresse unter „Besuch").  Die Fläche wächst nach oben und unten,
   der negative Außenabstand nimmt genau das wieder heraus: Zeilen, Abstände
   und Schrift stehen wie vorher, nur der tippbare Bereich ist größer. */
@media (max-width: 47.9375rem) {
  .fuss address a,
  .fuss__schluss a,
  .fuss__roema a,
  .besuch address a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -0.625rem;
    margin-block: calc((1lh - 44px) / 2);
  }

  /* Runde 8 (Handy gründlich, 23.09.2026): in der Schlusszeile lagen die
     Reihen nur 32 px auseinander, die 44-px-Flächen griffen 12 px
     ineinander (gemessen 375 px).  Jetzt ist jede Reihe genau 44 px hoch,
     ohne Überlappung; das © steht als eigene Zeile darüber. */
  .fuss__schluss { row-gap: 0; column-gap: var(--a5); }
  .fuss__schluss > span { flex: 1 1 100%; margin-bottom: var(--a2); }
  .fuss__schluss a { margin-block: 0; }

  /* Nebeneinander statt untereinander: Besuch und Öffnungszeiten teilen
     sich die Breite, die Marke steht darüber. */
  .fuss__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--a5); }
  .fuss__marke { grid-column: 1 / -1; }
  .fuss ul li + li { margin-top: var(--a1); }
}

/* ---------- 13. Feste Handy-Leiste -------------------------------------- */
/* Nur unter 768 px.  body bekommt unten Platz, damit nichts verdeckt wird. */

.leiste { display: none; }

@media (max-width: 47.9375rem) {
  body { padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom, 0px)); }

  .leiste {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 120;
    background: var(--elfenbein);
    border-top: var(--strich) solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .leiste__punkt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--a2);
    min-height: var(--leiste-h);
    color: var(--espresso);
    font-size: var(--t-klein);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: none;
  }
  .leiste__punkt + .leiste__punkt {
    border-left: var(--strich) solid var(--linie);
    background: var(--weinrot);
    color: var(--elfenbein);
  }
  .leiste__punkt:focus-visible { outline-offset: -4px; }
}

/* ---------- 14. Bausteine für Abschnitte -------------------------------- */

/* Kopf eines Abschnitts */
.abschnitt__kopf { max-width: 44ch; margin-bottom: var(--a7); }
.abschnitt__kopf .vorspann { margin-top: var(--a4); }

/* Zweispalter: Bild + Text, ohne Kasten */
.paar {
  display: grid;
  gap: var(--a6);
  align-items: center;
}
@media (min-width: 52rem) {
  .paar { grid-template-columns: 1fr 1fr; gap: var(--a8); }
  .paar--bild-rechts > :first-child { order: 2; }
}

/* Bildrahmen mit festem Seitenverhältnis */
.rahmen {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-gross);
  background: var(--sand);
}
.rahmen--hoch { aspect-ratio: 3 / 4; }
.rahmen--quer { aspect-ratio: 4 / 3; }
.rahmen--breit { aspect-ratio: 16 / 9; }
/* Damit Kompositionen verschiedene Seitenverhältnisse mischen können: */
.rahmen--quadrat { aspect-ratio: 1 / 1; }
.rahmen--hochgrad { aspect-ratio: 4 / 5; }
.rahmen--schmalhoch { aspect-ratio: 2 / 3; }
.rahmen--band { aspect-ratio: 5 / 2; }

/* Raster für Galerie / Gerichte */
.raster {
  display: grid;
  gap: var(--a5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

/* Liste mit feiner Trennlinie statt Kasten */
.zeilen > li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2) var(--a5);
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--a4);
  border-bottom: var(--strich) solid var(--linie);
}
.zeilen > li:first-child { border-top: var(--strich) solid var(--linie); }
.abschnitt--dunkel .zeilen > li { border-bottom-color: var(--linie-dunkel); }
.abschnitt--dunkel .zeilen > li:first-child { border-top-color: var(--linie-dunkel); }

/* Gruppe aus Knöpfen */
.tat-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a3) var(--a5);
  margin-top: var(--a6);
}

/* Der zweite Weg eines Abschnitts steht als stiller Textverweis, nicht als
   zweiter Knopf (Ansage Auftraggeber 22.09.2026: höchstens ein Knopf je
   Abschnitt).  Tippfläche 24 px nach WCAG 2.5.8 für schlichte Verweise. */
.tat-link {
  display: inline-flex;
  align-items: center;
  /* Er steht in einer Knopfreihe, also ist er eine Bedienstelle und keine
     Fundstelle im Fliesstext: Tippflaeche 44 px wie beim Knopf.  Der Strich
     liegt am Wort, nicht am Kasten — darum Unterstreichung statt Rahmen. */
  min-height: 2.75rem;
  padding: 0.7rem 0;
  color: var(--weinrot);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: var(--strich);
  text-underline-offset: 0.35em;
  text-decoration-color: var(--linie);
  transition: text-decoration-color var(--zeit) var(--kurve),
    color var(--zeit) var(--kurve);
}
.tat-link:hover { color: var(--weinrot-tief); text-decoration-color: var(--weinrot); }

/* Druck: Navigation und Leiste weg */
@media print {
  .kopf, .leiste, .springen { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; }
}

/* ==========================================================================
   15. FEINSCHLIFF (Runde 3, 21.09.2026)
   Nur transform, opacity und clip-path.  Jede Bewegung fällt bei
   prefers-reduced-motion weg; die Regeln dafür stehen gesammelt am Ende.
   ========================================================================== */

/* ---- a) Knöpfe: Hover, Active und Fokus sind drei verschiedene Zustände -- */
.knopf { transform: translateZ(0); }
.knopf:active { transform: translateY(1px); }
.knopf--linie:active { background: color-mix(in srgb, var(--weinrot) 8%, transparent); }
/* Befund C1: der Zweit-Knopf hatte im Ruhezustand fast keine Kante. */
.knopf--linie { border-color: color-mix(in srgb, var(--weinrot) 42%, transparent); }
.abschnitt--dunkel .knopf--linie {
  border-color: color-mix(in srgb, var(--sand) 45%, transparent);
}

/* ---- b) Kopf wird beim Scrollen minimal kompakter, ohne Blur ------------- */
/* Runde 5: min-height und width/height wechseln beim Scrollen nicht mehr
   (Layout-Eigenschaften; die Prüfung meldete „div.innen animiert min-height").
   Die Kopfzeile behält ihre Höhe, der Inhalt springt nicht mehr.  Kompakter
   wirkt der Kopf nur noch über das Zeichen: am Desktop per transform von
   44 auf 36 px, am Handy ist es ohnehin 36 px. */
.marke__zeichen { transition: transform 240ms var(--kurve); }
@media (min-width: 62rem) {
  html.gescrollt .marke__zeichen { transform: scale(0.818); }
}

/* ---- c) Auftakt: kurze gestaffelte Einblendung, zusammen ≤ 600 ms -------- */
html.js .auftakt > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: auftakt 420ms var(--kurve) forwards;
}
html.js .auftakt > *:nth-child(1) { animation-delay:  20ms; }
html.js .auftakt > *:nth-child(2) { animation-delay:  70ms; }
html.js .auftakt > *:nth-child(3) { animation-delay: 110ms; }
html.js .auftakt > *:nth-child(4) { animation-delay: 150ms; }
html.js .auftakt > *:nth-child(5) { animation-delay: 180ms; }
html.js .auftakt > *:nth-child(6) { animation-delay: 180ms; }
@keyframes auftakt { to { opacity: 1; transform: none; } }

/* ---- d) Bilder: Clip-Reveal statt bloßem Einblenden ---------------------- */
/* Befund B3: es gab genau eine Reveal-Bewegung auf der ganzen Seite.  Jetzt
   drei: Textblöcke steigen auf (.zeig), Bilder öffnen sich (.zeig--bild),
   das große Zitat kommt aus der Tiefe (.zeig--tief). */
html.js .zeig--bild {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 520ms var(--kurve);
}
html.js .zeig--bild.ist-da { clip-path: inset(0 0 0 0); }

html.js .zeig--tief {
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 420ms var(--kurve), transform 520ms var(--kurve);
}
html.js .zeig--tief.ist-da { opacity: 1; transform: none; }

/* ---- e) Bildhover: sehr dezent, nie mehr als 2 % ------------------------- */
.rahmen > .bild,
.rahmen > picture > .bild { transition: transform 400ms var(--kurve); }
a:hover > .rahmen > .bild,
a:hover > .rahmen > picture > .bild { transform: scale(1.02); }

/* ---- f) Sanfter Seitenwechsel, nur wo der Browser ihn kann -------------- */
@view-transition { navigation: auto; }

/* ---- g) Alles aus, wenn Bewegung unerwünscht ist ------------------------ */
@media (prefers-reduced-motion: reduce) {
  html.js .auftakt > * { opacity: 1; transform: none; animation: none; }
  html.js .zeig--bild,
  html.js .zeig--bild.ist-da { clip-path: none; transition: none; }
  html.js .zeig--tief,
  html.js .zeig--tief.ist-da { opacity: 1; transform: none; transition: none; }
  .kopf__reihe { transition: none; }
  a:hover > .rahmen > .bild,
  a:hover > .rahmen > picture > .bild { transform: none; }
  @view-transition { navigation: none; }
}

/* 2.20.12 (Auftraggeber 18.10.2026, pruef.py): Textlinks im Fliesstext und im Fuss
   bekommen innen Luft nach oben und unten. Bei Inline-Elementen verschiebt das
   die Zeilen nicht, vergroessert aber die Tippflaeche auf mindestens 24 px. */
main p a:not(.knopf), main li a:not(.knopf), .fuss a:not(.knopf) { padding-block: 0.4em; }
main p.lage__vermerk a { padding-block: 0.75em; }
main a[href^="tel:"]:not(.knopf) { display: inline-flex; align-items: center; min-height: 44px; }
.fuss address a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 47.9375rem), (pointer: coarse) {
  /* Ein Link, der allein in seinem Absatz steht, wird am Handy eine volle Tippflaeche. */
  main p > a:only-child:not(.knopf) { display: inline-flex; align-items: center; min-height: 44px; }
}