/* Gasthaus Kreuz Schongau
   =======================
   Mobile zuerst. Ein Umbruchpunkt bei 640 px (zweispaltige Listen), einer bei
   900 px (Hero und Kopfzeile werden zweispaltig), einer bei 1100 px.

   Die Seite laedt nichts von fremden Rechnern. Schriften liegen unter
   /assets/fonts/, Bilder unter /assets/img/. Die Content-Security-Policy in
   deploy/nginx.conf verbietet style-Attribute - es wird deshalb
   ausschliesslich mit Klassen gearbeitet, nie mit style="...".
*/

/* --- Schriften ----------------------------------------------------------- */
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* --- Farben und Masse ---------------------------------------------------- */
:root {
  --papier: #fbf8f2;
  --papier-2: #f2ebdd;
  --tinte: #23201b;
  --tinte-leise: #5c544a;
  --gruen: #2c3a2e;
  --gruen-hell: #3b4d3e;
  --kupfer: #8a4f1e;
  --kupfer-dunkel: #6f3f17;
  --linie: #ded4c2;
  /* Fuer Ränder an Bedienelementen: WCAG verlangt dort 3:1 gegen den Grund,
     die feine --linie reicht dafuer nicht. */
  --linie-stark: #8c7f68;

  --serif: 'Lora', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --breit: 1140px;
  --schmal: 720px;
  /* Das einzige echte Foto des Hauses ist 644 px breit. Es wird nie groesser
     angezeigt, sonst franst es aus. */
  --haus-max: 560px;
  --rand: clamp(1.15rem, 5vw, 2.5rem);
}

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

/* Eigene display-Regeln schlagen sonst das hidden-Attribut, und ein Menue,
   das geschlossen sein soll, bleibt offen. Diese Zeile zuerst. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 6.2vw, 3.45rem); }
h2 { font-size: clamp(1.65rem, 4.2vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.4rem); }
h4 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--kupfer); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--kupfer-dunkel); }

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

:focus-visible {
  outline: 3px solid var(--kupfer);
  outline-offset: 3px;
  border-radius: 2px;
}

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; left: var(--rand); top: 0.4rem; z-index: 60;
  transform: translateY(-250%);
  background: var(--gruen); color: var(--papier);
  padding: 0.6rem 1rem; border-radius: 3px; text-decoration: none;
}
.sprung:focus { transform: translateY(0); color: var(--papier); }

/* --- Raster -------------------------------------------------------------- */
.huelle { width: 100%; max-width: var(--breit); margin-inline: auto; padding-inline: var(--rand); }
.huelle-schmal { max-width: var(--schmal); }

.block { padding-block: clamp(3rem, 8vw, 5.5rem); }
.block-eng { padding-block: clamp(2.25rem, 5vw, 3.25rem); }
.block-getoent { background: var(--papier-2); }
.block-dunkel { background: var(--gruen); color: var(--papier); }
.block-dunkel h2, .block-dunkel h3 { color: var(--papier); }
.block-dunkel a { color: #e6c9a8; }
.block-dunkel a:hover { color: #fff; }

.mass { max-width: 62ch; }

/* --- Wortmarke ----------------------------------------------------------- */
/* Das SVG wird direkt in die Seite geschrieben (kein <img>), damit es die
   Textfarbe des Umfelds annimmt - im hellen Kopf dunkel, im dunklen Fuss
   hell. Ein PNG braeuchte dafuer zwei Dateien. */
.wortmarke { display: block; width: 100%; height: auto; color: inherit; }
/* Die Marke ist rund 2:1 breit zu hoch (viewBox 364x190). Die Breite
   bestimmt also die Hoehe der Kopfzeile - 210 px waeren 110 px hoch und die
   klebende Kopfzeile damit 134 px hoch. 124/160 px ergeben 65/84 px. */
.marke { display: inline-block; width: 124px; line-height: 0; color: var(--tinte); }
.marke:hover { color: var(--gruen); }
@media (min-width: 900px) { .marke { width: 160px; } }

/* --- Kopfzeile ----------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 248, 242, 0.96);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: blur(8px);
}
/* Eine Zeile: Marke – Menue – Telefon. Auf dem Handy bricht das Menue als
   dritte Reihe um (flex-basis 100%), auf dem Rechner steht alles nebeneinander.
   Zwei feste Reihen waeren in einer klebenden Kopfzeile zu viel Hoehe. */
.kopf-zeile {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0 1rem; min-height: 64px; padding-block: 0.45rem;
}
@media (min-width: 900px) {
  .kopf-zeile { min-height: 86px; flex-wrap: nowrap; gap: 1.5rem; }
}

.kopf-rechts { display: flex; align-items: center; gap: 0.6rem; }
.marke-verweis { line-height: 0; flex: none; }

.menue-knopf {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  background: none; border: 1px solid var(--linie-stark); border-radius: 3px;
  color: var(--tinte); padding: 0.55rem 0.8rem; cursor: pointer;
}
.menue-knopf:hover { background: var(--papier-2); }
.menue-strich { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menue-strich::before, .menue-strich::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.menue-strich::before { top: -6px; }
.menue-strich::after { top: 6px; }

/* Navigation: auf dem Handy eine eigene Reihe unter der Marke, ab 900 px in
   derselben Zeile. */
.nav { flex-basis: 100%; order: 3; }
@media (min-width: 900px) {
  /* Reihenfolge auf dem Rechner: Marke ganz links, Menue rechts davon,
     die Telefonschaltflaeche als letztes ganz aussen. Im Quelltext steht
     die Schaltflaeche vor dem Menue, damit sie auf dem Handy neben der
     Marke sitzt - dort ist sie die wichtigste Handlung. */
  .nav { flex-basis: auto; order: 2; margin-left: auto; }
  .kopf-rechts { order: 3; }
}
.nav-liste {
  list-style: none; margin: 0; padding: 0 0 0.75rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.nav a {
  display: block; padding: 0.7rem 0.2rem; text-decoration: none;
  color: var(--tinte); font-weight: 500;
  border-bottom: 1px solid var(--linie);
}
.nav a:hover { color: var(--kupfer); }
.nav a[aria-current='page'] { color: var(--kupfer); font-weight: 700; }

@media (max-width: 899px) {
  .nav { border-top: 1px solid var(--linie); }
}
@media (min-width: 900px) {
  .menue-knopf { display: none; }
  /* Ab hier ist das Menue immer sichtbar. Das hidden-Attribut, das die
     Schaltflaeche auf dem Handy setzt, muss hier ausser Kraft - sonst bleibt
     die Navigation auf dem Rechner verschwunden, wenn jemand das Fenster
     vom Handy- auf Rechnerformat zieht. Darum !important, passend zur
     Regel [hidden] oben. */
  .nav[hidden] { display: block !important; }
  .nav-liste { flex-direction: row; align-items: center; gap: 1.6rem; padding: 0; }
  .nav a { padding: 0.3rem 0; border-bottom: 2px solid transparent; }
  .nav a[aria-current='page'] { border-bottom-color: var(--kupfer); }
  .nav a:hover { border-bottom-color: var(--linie-stark); }
}

/* --- Schaltflaechen ------------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.2;
  padding: 0.85rem 1.4rem; border-radius: 3px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.knopf-haupt { background: var(--kupfer); color: #fff; border-color: var(--kupfer); }
/* Die Abschnittsregel fuer Verweise wuerde sonst die Schriftfarbe des
   Knopfes ueberschreiben - Farbe hier noch einmal, mit gleicher Herkunft. */
.knopf-haupt:hover { background: var(--kupfer-dunkel); border-color: var(--kupfer-dunkel); color: #fff; }
.knopf-rand { background: transparent; color: var(--tinte); border-color: var(--linie-stark); }
.knopf-rand:hover { background: var(--papier-2); color: var(--tinte); border-color: var(--tinte); }
/* .block-dunkel a faerbt JEDEN Verweis im dunklen Block (0,2,0) und schlaegt
   damit .knopf-haupt (0,1,0) - der Hauptknopf stand dort in Beige auf
   Kupfer, 4.13:1 statt der noetigen 4.5:1. Auffallen kann das nur einer
   Messung; von Hand sieht man den Unterschied zu Weiss kaum. Darum beide
   Knopfarten hier mit derselben Spezifitaet nachziehen. */
.block-dunkel .knopf-haupt { color: #fff; }
.block-dunkel .knopf-rand { color: var(--papier); border-color: rgba(251, 248, 242, .45); }
.block-dunkel .knopf-rand:hover { background: var(--gruen-hell); color: var(--papier); border-color: var(--papier); }
.block-dunkel .knopf-haupt:hover { color: #fff; }
@media (hover: hover) {
  .knopf:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .knopf { transition: none; }
  .knopf:hover { transform: none; }
}

.knopf-reihe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.kopf-tel {
  display: none; font-weight: 700; font-size: 1rem; white-space: nowrap;
  padding: 0.6rem 1.1rem;
}
@media (min-width: 620px) { .kopf-tel { display: inline-flex; } }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-top: clamp(2.25rem, 6vw, 4rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.hero-raster { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .hero-raster { grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.hero h1 { margin-bottom: 0.35em; }
.hero-vor {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinte-leise); margin: 0 0 1.1rem;
}
.hero-lead { font-size: clamp(1.08rem, 2.2vw, 1.25rem); color: var(--tinte-leise); max-width: 38ch; }
.hero-bild { border-radius: 4px; overflow: hidden; }
.hero-bild img { width: 100%; }

/* --- Merkmalsleiste ------------------------------------------------------ */
.leiste { border-block: 1px solid var(--linie); background: var(--papier-2); }
.leiste-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.1rem 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .leiste-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .leiste-liste { grid-template-columns: repeat(4, 1fr); } }
.leiste-liste strong { display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; }
.leiste-liste span { color: var(--tinte-leise); font-size: 0.95rem; }

/* --- Abschnittskopf ------------------------------------------------------ */
.auge {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--kupfer); margin: 0 0 0.7rem;
}
.block-dunkel .auge { color: #e6c9a8; }

/* Das Keilzeichen der Wortmarke als Trennlinie. */
.keil { display: block; width: 100%; max-width: 220px; height: 14px; margin: 0 0 1.6rem; color: var(--linie-stark); }
.block-dunkel .keil { color: rgba(251, 248, 242, .5); }

/* --- Zweispalter --------------------------------------------------------- */
.paar { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .paar { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
  .paar-gedreht > .paar-bild { order: -1; }
}
.paar-bild { border-radius: 4px; overflow: hidden; }
.paar-bild img { width: 100%; }
/* Das Hausfoto ist nur 644 px breit - nie groesser zeigen. */
.paar-bild-klein { max-width: var(--haus-max); margin-inline: auto; }

/* --- Karten -------------------------------------------------------------- */
.karten { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .karten-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .karten-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .karten-3 { grid-template-columns: repeat(3, 1fr); } }

.karte {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 4px;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  display: flex; flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.block-getoent .karte { background: var(--papier); }
.karte:hover { border-color: var(--linie-stark); box-shadow: 0 2px 14px rgba(35, 32, 27, .07); }
.karte h3 { margin-bottom: 0.45em; }
.karte p { color: var(--tinte-leise); }
@media (prefers-reduced-motion: reduce) { .karte { transition: none; } }

.karte-bild { margin: calc(-1 * clamp(1.3rem, 3vw, 1.9rem)); margin-bottom: 1.3rem; border-radius: 4px 4px 0 0; overflow: hidden; }
.karte-bild img { width: 100%; }

/* --- Listen -------------------------------------------------------------- */
.strichliste { list-style: none; margin: 0; padding: 0; }
.strichliste li { padding: 0.7rem 0 0.7rem 1.6rem; border-bottom: 1px solid var(--linie); position: relative; }
.strichliste li:last-child { border-bottom: 0; }
.strichliste li::before {
  content: ''; position: absolute; left: 0; top: 1.35em;
  width: 0.8rem; height: 1px; background: var(--kupfer);
}
.block-dunkel .strichliste li { border-color: rgba(251, 248, 242, .22); }
.block-dunkel .strichliste li::before { background: #e6c9a8; }

/* --- Oeffnungszeiten ----------------------------------------------------- */
.zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten caption { text-align: left; font-weight: 600; padding-bottom: 0.6rem; }
.zeiten th, .zeiten td { text-align: left; padding: 0.62rem 0; border-bottom: 1px solid var(--linie); vertical-align: baseline; }
/* Der Tagname darf umbrechen ("Mittwoch bis Samstag" ist lang), die Uhrzeit
   nicht. Mit nowrap auf BEIDEN war die Tabelle bei 320 px 341 px breit und
   die ganze Seite schob sich waagrecht - 40 px, die man auf 360 px und
   breiter nie sieht. */
.zeiten th { font-weight: 500; padding-right: 1rem; hyphens: auto; }
.zeiten td { text-align: right; white-space: nowrap; }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 0; }
.zeiten .heute th, .zeiten .heute td { font-weight: 700; color: var(--kupfer); }
.block-dunkel .zeiten th, .block-dunkel .zeiten td { border-color: rgba(251, 248, 242, .22); }
.block-dunkel .zeiten .heute th, .block-dunkel .zeiten .heute td { color: #f0d3b2; }

.status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.95rem;
  padding: 0.35rem 0.8rem; border-radius: 100px;
  background: var(--papier-2); color: var(--tinte);
  border: 1px solid var(--linie-stark);
}
.status-punkt { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tinte-leise); flex: none; }
.status-offen .status-punkt { background: #2f7a43; }
.status-zu .status-punkt { background: #9a3412; }

/* --- Kontaktangaben ------------------------------------------------------ */
.angaben { list-style: none; margin: 0; padding: 0; }
.angaben li { margin-bottom: 1.1rem; }
.angaben dt, .angaben-kopf {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tinte-leise); margin-bottom: 0.15rem;
}
.block-dunkel .angaben-kopf, .block-dunkel .angaben dt { color: rgba(251, 248, 242, .72); }
.angaben-wert { font-size: 1.1rem; font-weight: 600; }
.angaben a { text-decoration: none; }
.angaben a:hover { text-decoration: underline; }

/* --- Anfrageformular ----------------------------------------------------- */
/* Das Formular schickt nichts an einen Server. Es setzt eine vorbereitete
   E-Mail im Programm des Gastes zusammen (mailto). Damit verlaesst kein
   Datum die Seite, es braucht keinen Dienst und keine Einwilligung.
   Ohne JavaScript bleibt die E-Mail-Adresse daneben sichtbar. */
.formular { display: grid; gap: 1rem; }
@media (min-width: 640px) { .formular-paar { grid-template-columns: 1fr 1fr; display: grid; gap: 1rem; } }
.feld { display: flex; flex-direction: column; gap: 0.3rem; }
.feld label { font-size: 0.9rem; font-weight: 600; }
.feld input, .feld textarea, .feld select {
  font: inherit; font-size: 1rem; color: var(--tinte);
  background: var(--papier);
  border: 1px solid var(--linie-stark); border-radius: 3px;
  padding: 0.7rem 0.8rem; width: 100%;
}
.feld textarea { min-height: 7.5rem; resize: vertical; }
.feld-hinweis { font-size: 0.85rem; color: var(--tinte-leise); }

/* --- Fuss ---------------------------------------------------------------- */
.fuss { background: var(--gruen); color: var(--papier); padding-block: clamp(2.75rem, 6vw, 4rem) 2rem; }
.fuss a { color: #e6c9a8; }
.fuss a:hover { color: #fff; }
.fuss .marke { color: var(--papier); width: 190px; }
.fuss-raster { display: grid; gap: 2rem; }
@media (min-width: 700px) { .fuss-raster { grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem; } }
.fuss-liste + .fuss-titel { margin-top: 1.6rem; }
.fuss-titel { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(251, 248, 242, .72); margin: 0 0 0.8rem; }
.fuss-liste { list-style: none; margin: 0; padding: 0; }
.fuss-liste li { margin-bottom: 0.45rem; }
.fuss-liste a { text-decoration: none; }
.fuss-liste a:hover { text-decoration: underline; }
.fuss-schluss {
  margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(251, 248, 242, .22);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.9rem; color: rgba(251, 248, 242, .78);
}

/* --- Ruf-Leiste auf dem Handy -------------------------------------------- */
/* Die wichtigste Handlung ist der Anruf: reserviert wird telefonisch. Auf
   kleinen Geraeten bleibt sie darum immer erreichbar. */
.rufleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--linie-stark);
  border-top: 1px solid var(--linie-stark);
  padding-bottom: env(safe-area-inset-bottom);
}
.rufleiste a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 0.5rem; text-decoration: none; font-weight: 700; font-size: 1rem;
  background: var(--papier); color: var(--tinte);
}
.rufleiste a.ruf-haupt { background: var(--kupfer); color: #fff; }
@media (min-width: 620px) { .rufleiste { display: none; } }
/* Platz, damit die Leiste den Fuss nicht verdeckt. */
@media (max-width: 619px) { body { padding-bottom: 3.9rem; } }

/* --- Auftritt beim Scrollen ---------------------------------------------- */
/* Wichtig: ohne JavaScript ist ALLES sichtbar. Erst wenn das Skript laeuft,
   setzt es .js-auftritt auf <html> und blendet die Elemente zunaechst aus.
   Andersherum bliebe bei einem Skriptfehler die halbe Seite unsichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .js-auftritt .auftritt { opacity: 0; transform: translateY(14px); }
  .js-auftritt .auftritt.da {
    opacity: 1; transform: none;
    transition: opacity .55s ease, transform .55s ease;
  }
}

/* --- Druck --------------------------------------------------------------- */
@media print {
  .kopf, .rufleiste, .knopf-reihe, .sprung { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .block-dunkel { background: #fff; color: #000; }
  .block-dunkel a, .fuss a { color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}