/* ==========================================================================
   Unterseiten: Speisekarte, Galerie, Impressum, Datenschutz
   Nur das, was auf der Hauptseite nicht vorkommt. Alles Uebrige erbt aus
   styles.css und tokens.css. Kein Farbwert in dieser Datei.

   Alle Unterseiten stehen auf demselben dunklen Grund wie die Startseite:
   Flaeche --bg-dunkel, Ueberschriften --text-hell, Fliesstext
   --text-gedaempft. Keine weissen Flaechen mehr.
   ========================================================================== */

.unterseite { background: var(--bg-dunkel); color: var(--text-gedaempft); }

/* ------------------------------------------------------------- Kopfleiste */
.uskopf {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10);
  padding: var(--sp-5) var(--sp-10);
  padding-top: calc(var(--sp-5) + env(safe-area-inset-top, 0px));
  background: var(--bg-tief);
  border-bottom: var(--hairline) solid var(--linie-rose);
}
.uskopf__zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap-min); padding-inline: var(--sp-5);
  font-size: var(--fs-small); letter-spacing: var(--ls-wide);
  text-transform: uppercase; text-decoration: none; color: var(--akzent-orange);
}
.uskopf__zurueck .staebchen-pfeil { color: var(--akzent-orange); }
@media (hover: hover) and (pointer: fine) { .uskopf__zurueck:hover .staebchen-pfeil, .uskopf__zurueck:hover { color: var(--akzent-rose); } }
.uskopf__zurueck:focus-visible .staebchen-pfeil { color: var(--akzent-rose); }
.uskopf .sprache__btn { color: var(--text-hell); }

.usinhalt { padding-block: var(--sp-30) var(--sp-50); }
.usinhalt .titel { font-size: var(--fs-h2); }
.us-aktion { margin-top: var(--sp-30); }
.us-fussnote { margin-top: var(--sp-30); max-width: var(--measure); }

/* ------------------------------------------------------- Speisekarte: PDFs
   Keine Karten. Jede Zeile ist eine Zeile, getrennt durch eine Haarlinie. */
.pdfs { margin: var(--sp-30) 0 var(--sp-15); border-top: var(--hairline) solid var(--linie-rose); }

.pdf {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--sp-3) var(--sp-15);
  min-height: 84px; padding: var(--sp-10) 0;
  border-bottom: var(--hairline) solid var(--linie-rose);
  text-decoration: none; color: var(--text-hell);
  transition: padding-inline-start var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.pdf::after {
  content: ""; grid-row: 1 / span 2; grid-column: 2;
  width: 12px; height: 12px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pdf:hover { padding-inline-start: var(--sp-5); color: var(--akzent-rose); }
  .pdf:hover::after { transform: rotate(45deg) translate(3px, -3px); }
}
.pdf__name {
  grid-column: 1;
  font-family: var(--font-display); font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}
.pdf__meta { grid-column: 1; font-size: var(--fs-small); color: var(--text-gedaempft); }

/* Die Unterseiten sind hell: Ueberschriften in Tinte, nicht in --text-hell */
.usinhalt .titel, .usinhalt h1, .usinhalt h2, .usinhalt h3 { color: var(--text-hell); }
.usinhalt { color: var(--text-gedaempft); }
.usinhalt a:not(.btnx):not(.pdf) { color: var(--akzent-rose); }
.usinhalt strong, .usinhalt b { color: var(--text-hell); font-weight: var(--fw-bold); }
.usinhalt :focus-visible { outline-color: var(--akzent-rose); }

/* ------------------------------------------------------------- Galerie
   Das Raster waechst mit der Zahl der Bilder: auto-fill legt so viele
   Spalten an, wie hineinpassen, und 1fr teilt den Rest gleichmaessig auf.
   Damit funktioniert es mit fuenf Bildern genauso wie mit fuenfunddreissig,
   ohne dass jemand eine Spaltenzahl nachpflegen muss. Gleiche Abstaende,
   gleiches Seitenverhaeltnis, keine Fuellkacheln. */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));   /* 768 px: zwei Spalten */
  gap: var(--sp-10);
  margin: var(--sp-30) 0 0;
}

.kachel {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; overflow: hidden;
  border-radius: var(--radius-flaeche);
}
.kachel img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .kachel:hover img { transform: scale(1.03); opacity: .92; }
}

/* ------------------------------------------------------------------ Lupe */
.lupe {
  width: 100%; max-width: 100vw; height: 100%; max-height: 100dvh;
  padding: 0; border: 0;
  background: var(--c-backdrop); color: var(--c-surface);
}
.lupe::backdrop { background: var(--c-backdrop); }
.lupe[open] {
  display: grid;
  grid-template-columns: var(--tap-min) 1fr var(--tap-min);
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-15);
  padding-top: calc(var(--sp-15) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--sp-15) + env(safe-area-inset-bottom, 0px));
}
.lupe__figur { grid-column: 2; margin: 0; display: grid; gap: var(--sp-10); justify-items: center; }
.lupe__figur img { max-width: 100%; max-height: 74dvh; object-fit: contain; }
.lupe__figur figcaption { font-size: var(--fs-small); text-align: center; max-width: 60ch; color: var(--c-overlay-light-soft); }

.lupe__zu {
  position: absolute; top: calc(var(--sp-5) + env(safe-area-inset-top, 0px)); right: var(--sp-5);
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  border: 0; background: transparent; color: var(--c-surface); cursor: pointer;
}
.lupe__pfeil {
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  border: var(--hairline) solid var(--c-overlay-light-soft);
  border-radius: var(--radius-interaktiv);
  background: transparent; color: var(--c-surface); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lupe__pfeil--vor { grid-column: 1; }
.lupe__pfeil--zurueck { grid-column: 3; }
/* Die Pfeile der Lightbox sind der Staebchen-Pfeil aus styles.css */
.lupe .staebchen-pfeil { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) {
  .lupe__pfeil:hover, .lupe__zu:hover { background: rgba(232, 196, 204, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
  .kachel img, .pdf, .pdf::after { transition: none; }
}

/* ------------------------------------------------- Fliesstext-Seiten
   Impressum, Datenschutz, AGB, Widerruf. Eine Spalte, Lesebreite,
   keine Kaesten – nur Haarlinien und Luft. */
.fliesstext { max-width: 680px; }
.fliesstext h1 { font-size: var(--fs-h3); }
.fliesstext h2 {
  font-size: var(--fs-h4);
  margin-top: var(--sp-30); padding-top: var(--sp-10);
  border-top: var(--hairline) solid var(--linie-rose);
}
.fliesstext h3 { font-size: var(--fs-h5); margin: var(--sp-15) 0 var(--sp-5); }
.fliesstext p, .fliesstext li { max-width: var(--measure); }
.fliesstext ul, .fliesstext ol { margin-bottom: var(--sp-10); padding-left: var(--sp-15); }
.fliesstext ul li { list-style: disc; padding: 2px 0; }
.fliesstext ol li { list-style: decimal; padding: 2px 0; }
.fliesstext dl { margin: 0 0 var(--sp-10); }
.fliesstext dt {
  font-size: var(--fs-small); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-hell); margin-top: var(--sp-5);
}
.fliesstext dd { margin: 0; }

.warnung {
  padding: var(--sp-10) 0 var(--sp-10) var(--sp-10);
  margin-bottom: var(--sp-15);
  border-left: var(--hairline) solid var(--c-accent);
  font-size: var(--fs-small); color: var(--text-gedaempft);
}
/* Die Unterstrich-Zeilen im Musterformular sind ein einziges langes Wort
   und sprengten bei 320 px den Viewport. */
.muster { overflow-wrap: anywhere; }
.muster {
  padding: var(--sp-15) 0;
  margin: var(--sp-10) 0;
  border-top: var(--hairline) solid var(--linie-rose);
  border-bottom: var(--hairline) solid var(--linie-rose);
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------ Fussbereich
   Der schlichte Fuss der Unterseiten. Er stand frueher im Buch-Block von
   styles.css und ist mit ihm entfallen; hier steht er auf dunklem Grund. */
.footer {
  padding-block: var(--sp-30);
  border-top: var(--hairline) solid var(--linie-rose);
  color: var(--text-gedaempft);
  background: var(--bg-tief);
}
.footer a { color: var(--text-hell); }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--akzent-rose); } }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-15); margin: 0; padding: 0; list-style: none; }
.footer__nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--fs-small); letter-spacing: var(--ls-wide); text-transform: uppercase; text-decoration: none; }
.footer__copy { font-size: var(--fs-micro); letter-spacing: var(--ls-wide); margin: var(--sp-10) 0 0; max-width: none; }

/* ==========================================================================
   Catch of the Day – die Menuekarte aus Papier.
   Die einzige Stelle der Seite mit einer Auftrittsfolge: sie laeuft einmal
   beim Oeffnen, danach steht alles still.
   ========================================================================== */
.catchseite { background: var(--bg-tief); }

/* Der Hintergrund: das Gericht selbst, stark weichgezeichnet. Er wird nie
   animiert – nur einmal eingeblendet. */
.catchgrund { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.catchgrund[hidden] { display: none; }
.catchgrund__bild {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.15);
  filter: blur(40px) brightness(0.32) saturate(1.2);
}
@media (max-width: 767px) { .catchgrund__bild { filter: blur(28px) brightness(0.32) saturate(1.2); } }
.catchgrund__schleier {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%,
              rgba(23, 18, 26, 0.20) 0%, rgba(23, 18, 26, 0.38) 55%, rgba(23, 18, 26, 0.55) 100%);
}

.catchmain {
  position: relative;
  display: grid; justify-items: center; align-content: start;
  gap: var(--sp-30);
  padding: clamp(4rem, 9vh, 6rem) 1.25rem clamp(3rem, 8vh, 5rem);
}
.karte-platz {
  width: min(100% - 2rem, 500px); aspect-ratio: 3 / 4;
  border: 1px solid var(--linie-rose); border-radius: var(--radius-klein); opacity: 0.25;
}
.karte-platz[hidden] { display: none; }

.karte {
  --karte-innen: clamp(1.8rem, 5vw, 2.8rem);   /* der Innenabstand der Textseite */
  position: relative;
  width: min(100% - 2.5rem, 500px);
  box-sizing: border-box;
  background: var(--papier-karte);
  color: #4A4048;
  /* zweilagig und leicht in der Hintergrundfarbe getoent statt neutralem Grau */
  box-shadow: 0 2px 6px rgba(12, 8, 14, 0.45), 0 26px 60px rgba(12, 8, 14, 0.55);
  text-align: center;
}
.karte[hidden] { display: none; }
/* Die Papierstruktur */
.karte__papier {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  filter: url(#papierstruktur); opacity: 0.06; mix-blend-mode: multiply;
  background: #FFF;
}
/* Die Huelle schneidet das Schriftzeichen am Kartenrand an */
.karte__huelle { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.karte__shun {
  position: absolute; right: -0.18em; bottom: -0.30em;
  font-family: var(--font-body); font-size: 260px; line-height: 1;
  color: #1A1418; opacity: 0.045;
  user-select: none;
}
@media (max-width: 767px) { .karte__shun { font-size: 180px; } }

/* --- Das Foto ist Teil der Karte: buendig, ohne Rand, ohne Schatten --- */
.karte__foto { position: relative; z-index: 1; margin: 0; }
.karte__foto[hidden] { display: none; }
.karte__foto img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
}

/* --- Die Textseite traegt den Innenabstand und die feine Rahmenlinie,
       die damit erst unter dem Foto beginnt. -------------------------- */
.karte__inhalt { position: relative; z-index: 1; padding: var(--karte-innen); }
.karte__inhalt::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(26, 20, 24, 0.15); pointer-events: none;
}

.karte__label {
  position: relative; z-index: 1;
  /* 0,68rem ergab 10,88 px – knapp unter der Grenze von 11 px */
  margin: 0; font-family: var(--font-ui); font-size: 0.6875rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: #94502F;
}
.karte__datum {
  position: relative; z-index: 1;
  margin: var(--sp-5) 0 0; font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; color: #4A4048; max-width: none;
}
.karte__strich { display: block; position: relative; z-index: 1; width: 40px; height: 1px; margin: var(--sp-15) auto; background: rgba(26, 20, 24, 0.3); }

.karte__name {
  position: relative; z-index: 1;
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: 0.01em; line-height: 1.12;
  color: #1A1418; text-transform: none;
}
.karte__name em { font-style: italic; }
.karte__herkunft {
  position: relative; z-index: 1;
  margin: var(--sp-5) 0 0; font-family: var(--font-ui); font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: #94502F; max-width: none;
}
.karte__herkunft[hidden], .karte__notiz[hidden], .karte__koch[hidden],
.karte__preiszeile[hidden], .karte__vorrat[hidden] { display: none; }
.karte__text { position: relative; z-index: 1; margin: var(--sp-10) auto 0; max-width: 34ch; min-width: 0;
  /* auf dem Handy nie unter 16 px, sonst liest es sich muehsam */
  font-size: max(1rem, var(--fs-base)); text-wrap: pretty; color: #4A4048; }
.karte__notiz { position: relative; z-index: 1; margin: var(--sp-10) auto 0; max-width: 34ch; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: #4A4048; }
.karte__koch {
  position: relative; z-index: 1;
  margin: var(--sp-15) auto 0; max-width: none;
  font-family: var(--font-display); font-style: italic; font-size: 1.02rem;
  color: #94502F;
}

.karte__preiszeile {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; gap: 8px;
  margin: var(--sp-30) 0 0; max-width: none;
}
.karte__punkte { flex: 1; border-bottom: 1px dotted rgba(26, 20, 24, 0.4); transform: translateY(-4px); }
.karte__preis { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; color: #1A1418; font-variant-numeric: tabular-nums; }
.karte__tel { color: #1A1418; font-family: var(--font-display); font-size: 1.3rem; }
.karte__vorrat { position: relative; z-index: 1; margin: var(--sp-10) 0 0; font-size: 0.72rem; color: rgba(74, 64, 72, 0.85); max-width: none; }

/* --- Der Stempel: das einzige gedrehte Element auf der Karte ----------
   Er sitzt innerhalb der Karte, je 16 px von oben und rechts. Der Name
   ist das Hauptelement, das Schriftzeichen tritt zurueck. */
.stempel {
  position: absolute; z-index: 2;
  top: 16px; right: 16px; width: 84px; height: 84px;
  transform: rotate(12deg); mix-blend-mode: multiply; pointer-events: none;
}
@media (max-width: 767px) { .stempel { width: 68px; height: 68px; top: 14px; right: 14px; } }
/* Die Groessen sind Anteile des Durchmessers: viewBox 64 = 100 Prozent */
.stempel__zeichen { font-family: var(--font-body); font-size: 16.6px; font-weight: 700; fill: #B8322A; text-anchor: middle; }
.stempel__linie   { stroke: #B8322A; stroke-width: 1.2; }
.stempel__name {
  font-family: var(--font-ui); font-size: 15.4px; font-weight: 700;
  letter-spacing: 0.06em; fill: #B8322A; text-anchor: middle;
}

.catchlinks { display: flex; flex-wrap: wrap; gap: var(--sp-10); justify-content: center; }

/* --- Die Auftrittsfolge. Nur transform und opacity, keine Drehung. ------ */
.js .catchgrund { opacity: 0; }
.js .catchgrund.ist-da { opacity: 1; transition: opacity 600ms var(--ease-out); }
.js .karte { opacity: 0; transform: translateY(60px); }
.js .karte.ist-da {
  opacity: 1; transform: translateY(0);
  transition: opacity 900ms cubic-bezier(0.34, 1.35, 0.64, 1), transform 900ms cubic-bezier(0.34, 1.35, 0.64, 1);
}
/* Beim Aufdruecken federt die Karte kurz senkrecht nach */
.js .karte.federt { transform: translateY(2px); transition: transform 200ms var(--ease-out); }
.js .karte__foto img { opacity: 0; }
.js .karte.foto-da .karte__foto img { opacity: 1; transition: opacity 600ms var(--ease-out); }
.js .stempel { opacity: 0; transform: rotate(12deg) scale(1.6); }
.js .karte.stempel-da .stempel { opacity: 1; transform: rotate(12deg) scale(1); animation: stempel-auf 320ms var(--ease-out); }
@keyframes stempel-auf {
  0%   { opacity: 0; transform: rotate(12deg) scale(1.6); }
  56%  { opacity: 1; transform: rotate(12deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(12deg) scale(1); }
}
.js .catchlinks { opacity: 0; }
.js .catchlinks.ist-da { opacity: 1; transition: opacity 500ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .js .karte, .js .karte__foto img, .js .stempel, .js .catchlinks, .js .catchgrund { opacity: 1; transition: none; animation: none; }
  .js .karte { transform: none; }
  .js .stempel { transform: rotate(12deg) scale(1); }
}