/* ═══════════════════════════════════════════════════════════════════════════
   Julian's – Speisekarte
   Handgeschriebenes CSS, kein Build-Schritt. Bearbeiten und pushen.

   Die Seite zeigt die vier Menütafeln aus dem Laden als Bilder. Jeder Rahmen
   und jeder Strich ist Kreide: ein SVG-Filter verzieht die Kanten und bröselt
   Lücken hinein, damit nichts nach glattem Vektor aussieht.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   0. Schriften – selbst gehostet in fonts/, kein Request an Google
   ─────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-400-latin-ext.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-400-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  /* Variable Font – eine Datei deckt den ganzen Bereich ab. Die getrennten
     500er- und 600er-Dateien waren byteidentisch und wurden doppelt geladen. */
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/caveat-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  /* Variable Font – eine Datei deckt den ganzen Bereich ab. Die getrennten
     500er- und 600er-Dateien waren byteidentisch und wurden doppelt geladen. */
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/caveat-latin-ext.woff2') format('woff2');
  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;
}

/* ───────────────────────────────────────────────────────────────────────────
   1. Farben und Grundmaße
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --ink: #030303;          /* Tafelschwarz – neutral, ohne Blaustich */
  --ink-deep: #000000;     /* Fußbereich */
  --chalk: #efe9dc;        /* Kreide – nie reinweiß */
  --chalk-soft: rgba(239, 233, 220, 0.62);
  --chalk-faint: rgba(239, 233, 220, 0.34);
  --flame: #a3241a;        /* das Rot der Tafel-Banner */
  --gold: #ffc848;

  --hand: 'Caveat', 'Segoe Script', cursive;
  --body: 'Barlow', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --page: 68rem;
  --gutter: 1.25rem;
}

@media (min-width: 640px) {
  :root { --gutter: 2rem; }
}

/* ───────────────────────────────────────────────────────────────────────────
   2. Grundlagen
   ─────────────────────────────────────────────────────────────────────────── */

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background-color: var(--ink);
  color: var(--chalk);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Kreidestaub über der ganzen Seite */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--chalk); }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

::selection { background: var(--flame); color: var(--chalk); }

.sr-only {
  /* ohne dies fordert das versteckte h1 einen fetten Schnitt an, den niemand sieht */
  font-weight: 400;
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Die Filterdefinitionen selbst dürfen keinen Platz einnehmen */
.filters {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   2a. Icons
   ─────────────────────────────────────────────────────────────────────────── */

/* Von Hand gezeichnet, nur Striche. Bewusst OHNE Kreidefilter: bei 17 px
   zeigt die Textur nichts, sie frisst die dünnen Striche nur an und lässt
   die Icons blass wirken. Sie nehmen über currentColor exakt die Farbe des
   Textes an, neben dem sie stehen. */
.ico {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ───────────────────────────────────────────────────────────────────────────
   3a. Navigation
   ─────────────────────────────────────────────────────────────────────────── */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgb(3 3 3 / 0.94);
  backdrop-filter: blur(10px);
}

/* Kreidestrich als untere Kante statt einer glatten Border */
.site-nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background-color: var(--chalk-faint);
  filter: url(#chalk-line);
  clip-path: polygon(0 42%, 14% 12%, 29% 58%, 46% 18%, 63% 60%, 81% 22%, 94% 56%, 100% 28%, 100% 74%, 0 80%);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.7rem;
}

.site-nav__logo {
  flex-shrink: 0;
  display: block;
}

.site-nav__logo img {
  height: 2.1rem;
  width: auto;
}

.site-nav a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--hand);
  font-size: 1.15rem;
  color: var(--chalk-soft);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-nav a:hover { color: var(--chalk); }

.site-nav__actions a { color: var(--gold); }
.site-nav__actions a:hover { color: var(--chalk); }

/* ── Umschalter ──────────────────────────────────────────────────────────── */

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.6rem;
  color: var(--chalk-soft);
  transition: color 0.15s ease;
}

.site-nav__toggle:hover { color: var(--chalk); }
.site-nav__toggle .ico { width: 1.55em; height: 1.55em; }

.site-nav__toggle .ico--close { display: none; }
.site-nav__toggle[aria-expanded="true"] .ico--menu { display: none; }
.site-nav__toggle[aria-expanded="true"] .ico--close { display: inline-block; }

/* ── Schmale Geräte: alles klappt hinter dem Knopf auf ───────────────────── */

@media (max-width: 639px) {
  .site-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    padding: 0.5rem var(--gutter) 1rem;
    /* Volldeckend: auf so dunklem Grund schimmert selbst bei 98 % noch der
       Seiteninhalt durch und macht die Rubriken unlesbar. */
    background-color: var(--ink);
  }

  .site-nav__menu.is-open { display: flex; }

  .site-nav__menu.is-open::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background-color: var(--chalk-faint);
    filter: url(#chalk-line);
    clip-path: polygon(0 42%, 14% 12%, 29% 58%, 46% 18%, 63% 60%, 81% 22%, 94% 56%, 100% 28%, 100% 74%, 0 80%);
  }

  .site-nav__links,
  .site-nav__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav__menu a {
    gap: 0.75rem;
    padding: 0.8rem 0.3rem;
    font-size: 1.35rem;
  }

  .site-nav__menu a + a,
  .site-nav__actions {
    border-top: 1px solid rgb(239 233 220 / 0.09);
  }
}

/* ── Ab 640px: der Behälter löst sich auf, es bleiben drei Blöcke ────────── */

@media (min-width: 640px) {
  .site-nav__inner {
    justify-content: space-evenly;
    gap: 1rem;
    padding-block: 0.85rem;
  }

  /* display:contents macht Rubriken und Aktionen zu direkten Flex-Kindern
     der Leiste – nur so greift space-evenly auf drei Blöcke. */
  .site-nav__menu { display: contents; }

  .site-nav__links,
  .site-nav__actions {
    display: flex;
    align-items: center;
  }

  .site-nav__links { gap: 0.75rem; }
  .site-nav__actions { gap: 0.5rem; }

  .site-nav__logo img { height: 2.6rem; }
  .site-nav a { font-size: 1.3rem; }
  .site-nav__toggle { display: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   4. Die Tafeln
   ─────────────────────────────────────────────────────────────────────────── */

.boards {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-block: 2.5rem 4rem;
}

.board {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  /* Die sticky Navigationsleiste darf beim Ankersprung nichts verdecken */
  scroll-margin-top: 4.5rem;
}

/* Der Knopf trägt das Bild, der Rahmen liegt als eigene Ebene darüber –
   sonst würde der Kreidefilter auch das Foto verzerren. */
.board__frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.7rem;
}

.board__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--chalk-soft);
  filter: url(#chalk-edge);
  pointer-events: none;
}

.board__frame img {
  width: 100%;
  transition: opacity 0.2s ease;
}

.board__frame:hover::before { border-color: var(--chalk); }
.board__frame:hover img { opacity: 0.92; }

.board__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding-left: 0.3rem;
  font-family: var(--hand);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--chalk);
}

.board__hint {
  /* var(--chalk-faint) ist Deko-Farbe und erreicht als Text nur 2,6:1.
     Dieser Hinweis ist die einzige Auskunft, dass die Tafeln anklickbar sind. */
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk-soft);
}

@media (min-width: 640px) {
  .boards { gap: 4rem; padding-block: 3.5rem 5rem; }
  .board__title { font-size: 1.95rem; }
}

/* ───────────────────────────────────────────────────────────────────────────
   5. Vergrößerte Ansicht
   ─────────────────────────────────────────────────────────────────────────── */

.viewer {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--ink-deep);
  overflow: hidden;
}

.viewer::backdrop { background-color: rgb(0 0 0 / 0.94); }

/* Die Bühne füllt den Schirm. Im Normalzustand passt das Bild hinein,
   erst der Umschalter macht daraus eine scrollbare 1:1-Ansicht. */
.viewer__stage {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.viewer__img {
  max-width: 100%;
  max-height: 100dvh;
  object-fit: contain;
  cursor: zoom-in;
}

.viewer__stage.is-zoomed {
  place-items: start;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.viewer__stage.is-zoomed .viewer__img {
  width: 1920px;
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

.viewer__close,
.viewer__zoom {
  position: fixed;
  z-index: 2;
  border: 1.5px solid var(--chalk-faint);
  background-color: rgb(0 0 0 / 0.82);
  color: var(--chalk);
  backdrop-filter: blur(6px);
  transition: border-color 0.15s ease;
}

.viewer__close {
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.viewer__zoom {
  bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-family: var(--hand);
  font-size: 1.15rem;
}

.viewer__close:hover,
.viewer__zoom:hover { border-color: var(--gold); }

.viewer__close svg { width: 1.35rem; height: 1.35rem; }
.viewer__zoom svg { width: 1.15rem; height: 1.15rem; }

.viewer__label {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background-color: rgb(0 0 0 / 0.82);
  backdrop-filter: blur(6px);
  font-family: var(--hand);
  font-size: 1.15rem;
  color: var(--chalk-soft);
}

/* ───────────────────────────────────────────────────────────────────────────
   6. Fußbereich
   ─────────────────────────────────────────────────────────────────────────── */

.site-footer {
  position: relative;
  background-color: var(--ink-deep);
  padding-block: 2.5rem 3rem;
  color: var(--chalk-soft);
  font-size: 0.9rem;
}

/* Kreidestrich als Trennlinie statt einer glatten Border */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background-color: var(--chalk-faint);
  filter: url(#chalk-line);
  clip-path: polygon(0 45%, 12% 15%, 27% 60%, 44% 20%, 61% 62%, 79% 25%, 93% 58%, 100% 30%, 100% 72%, 0 78%);
}

.footer__cols {
  display: grid;
  gap: 1.75rem;
  margin-bottom: 2rem;
}

.footer__col h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  font-family: var(--hand);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--chalk);
}

.footer__col address { font-style: normal; line-height: 1.6; }
.footer__col a { color: var(--gold); }
.footer__col a:hover { color: var(--chalk); }

.footer__hours { display: grid; gap: 0.2rem; }
.footer__hours > div { display: flex; gap: 0.9rem; }
.footer__hours dt { width: 5.5rem; flex-shrink: 0; }
.footer__hours dd { margin: 0; font-variant-numeric: tabular-nums; }

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(239 233 220 / 0.12);
}

@media (min-width: 640px) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}

.footer__note {
  margin-top: 1.5rem;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--chalk-soft);
}

/* ───────────────────────────────────────────────────────────────────────────
   7. Fehlerseite

   Aufgebaut wie ein Eintrag auf der Menütafel, den jemand durchgestrichen
   hat – dieselben Führungspunkte wie auf der echten Karte.
   ─────────────────────────────────────────────────────────────────────────── */

.lost {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  gap: 1.6rem;
  padding: 2rem var(--gutter) 3rem;
  text-align: center;
}

.lost__logo img { width: 11.5rem; }

.lost__heading {
  width: 100%;
  max-width: 34rem;
  font-weight: 400;
}

/* Die Zeile selbst: Gericht … Preis, wie auf der Tafel */
.lost__row {
  position: relative;
  display: flex;
  align-items: baseline;
  width: 100%;
  font-family: var(--hand);
  font-size: 1.6rem;
  color: var(--chalk);
}

.lost__dish,
.lost__price { white-space: nowrap; }

.lost__leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  margin-inline: 0.55rem;
  margin-top: 20px;
  align-self: center;
  border-bottom: 2px dotted rgb(239 233 220 / 0.26);
  transform: translateY(0.08em);
}

.lost__price { color: var(--gold); }

/* Der Strich durch die ganze Zeile */
.lost__strike {
  position: absolute;
  left: -2%;
  right: -2%;
  width: 104%;
  height: 0.9rem;
  translate: 0 -50%;
  color: var(--flame);
  pointer-events: none;
}

.lost__code {
  font-family: var(--hand);
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 0.9;
  color: var(--chalk-faint);
}

.lost__lead {
  font-family: var(--hand);
  font-size: 1.35rem;
  color: var(--chalk-soft);
}

/* Der Knopf trägt denselben aufgerauten Rahmen wie die Tafeln */
.lost__back {
  position: relative;
  padding: 0.85rem 1.8rem;
  font-family: var(--hand);
  font-size: 1.4rem;
  color: var(--chalk);
}

.lost__back::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--chalk-soft);
  filter: url(#chalk-edge);
}

.lost__back:hover { color: var(--gold); }
.lost__back:hover::before { border-color: var(--gold); }

@media (min-width: 640px) {
  .lost { gap: 2rem; }
  .lost__logo img { width: 15rem; }
  .lost__row { font-size: 2.1rem; }
  .lost__code { font-size: 5.5rem; }
  .lost__lead { font-size: 1.6rem; }
}