/* =============================================================
   Zülfi’s — gemeinsame Komponenten
   Setzt _shared/tokens.css voraus.
   ============================================================= */

/* ---------- Schriften, selbst gehostet ---------- */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrumentsans-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:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrumentsans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Lexend';font-style:normal;font-weight:500 800;font-display:swap;
  src:url('../fonts/lexend-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:'Lexend';font-style:normal;font-weight:500 800;font-display:swap;
  src:url('../fonts/lexend-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/playfairdisplay-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:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/playfairdisplay-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Allura';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/allura-latin.woff2') format('woff2');}

/* Ersatzmetrik für Playfair Display.
   -------------------------------------------------------------------------
   Bis die Webschrift geladen ist, zeigt der Browser Georgia. Beim Wechsel
   sprang der Claim um — bei 104 px Grad ist das kein Detail, sondern ein
   sichtbarer Ruck, und er geht als CLS in die Bewertung ein.

   Gemessen wurde an acht echten Überschriften dieser Seite. Zwei Messungen
   waren nötig, weil die erste die falsche Schrift erwischte:

   · Georgia hat keinen Schnitt 800. Verlangt man ihn direkt, rechnet der
     Browser einen Fettschnitt dazu — Georgia läuft dann 10 % breiter als
     Playfair, und daraus folgte ein size-adjust von 89,8 %.
   · Über @font-face mit local() nimmt Chrome aber Georgia Regular und
     rechnet nichts dazu, auch nicht mit font-weight:100 900. Der Wert 89,8 %
     traf deshalb den falschen Schnitt: 14 % zu schmal statt 0 %.

   Maßgeblich ist, was wirklich gezeigt wird — Georgia Regular. Dagegen misst
   Playfair 800 im Mittel 104,6 % (Streuung 103,4 – 106,6 %).

   Die Höhenwerte stehen in der Schriftdatei (ascent 1082, descent 251 bei
   1000 upm) und werden durch den size-adjust geteilt, weil er die Höhen
   mitskaliert:  1082 / 1000 / 1.046 = 103,4 %   ·   251 / 1000 / 1.046 = 24,0 %

   Dass dabei kurz ein magerer Schnitt steht, ist der Preis: Eine Breite, die
   stimmt, ist mehr wert als ein Gewicht, das für 50 ms stimmt — Springen
   sieht man, den Schnitt in dieser Zeitspanne kaum.

   Nachmessen: `node tools/schrift-metrik.mjs`. */
@font-face{
  font-family:'Playfair Ersatz';
  src:local('Georgia'),local('Times New Roman'),local('Times');
  font-weight:100 900;font-style:normal;
  size-adjust:104.61%;
  ascent-override:103.4%;
  descent-override:24%;
  line-gap-override:0%;
}

/* ---------- Grundgerüst ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,picture,svg,video{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--orange);color:var(--navy)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
/* Safari behandelt einen angeklickten Link als „per Tastatur fokussiert"
   und zeigt den Ring auch nach einem Mausklick — im Menü blieb ein
   oranger Rahmen um den zuletzt angeklickten Punkt stehen.

   Deshalb merkt sich motion.js, womit zuletzt bedient wurde, und setzt
   data-zeiger am <html>. Solange das steht, bleibt der Ring aus; die
   erste Tabulatortaste nimmt das Attribut wieder weg.

   Ohne JavaScript gibt es das Attribut nie — dann greift die Regel
   darüber unverändert, und der Ring ist immer da. Das ist die richtige
   Richtung für einen Rückfall. */
html[data-zeiger] :focus-visible{outline:none}
html[data-zeiger] .menue__punkt a:focus-visible .menue__name{color:inherit}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--luft-m)}
/* Abwechslung statt überall dasselbe: Ein Abschnitt, der nur eine Zeile
   trägt, braucht weniger Raum als einer, der eine Geschichte erzählt. */
.section--eng{padding-block:var(--luft-s)}
.section--weit{padding-block:var(--luft-l)}

/* Überzeile → Überschrift → Lead → Inhalt. Die drei Abstände sind
   gestaffelt, damit die Gruppe als Gruppe liest und der Inhalt danach
   sichtbar abgesetzt beginnt. */
.eyebrow + .h1,.eyebrow + .h2,.eyebrow + .h3{margin-top:0}
.h1 + .lead,.h2 + .lead,.h3 + .lead{margin-top:var(--luft-h2-lead)}
.lead + *{margin-top:var(--luft-lead-inhalt)}
.section--alt{background:var(--surface-alt)}
.section--surface{background:var(--surface)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{
  position:fixed;top:.5rem;left:.5rem;z-index:300;transform:translateY(-160%);
  background:var(--orange);color:var(--navy);font-weight:700;
  padding:.7rem 1.1rem;border-radius:10px;text-decoration:none;
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ---------- Typografie ----------
   Zwei Ebenen, und jede Überschrift gehört genau einer an. Nicht die
   Rangfolge im Dokument entscheidet, sondern die Rolle im Text:

   Ebene 1 · Display — Playfair Display 800, var(--font-display)
     Der Hero-Claim und jede Überschrift, die etwas erzählt oder verspricht:
     „Zwei Dinge können wir seit 2007.", „Ein Familienbetrieb, keine
     Catering-Firma." Dazu Breaker-Sprüche und große Zitate.

   Ebene 2 · Funktional — Lexend, var(--font-head)
     Alles, was nur benennt und orientiert: „Öffnungszeiten", „Hierher
     finden", „Im Preis enthalten", dazu Knöpfe, Navigation, Labels, Zahlen,
     Formular und Preisrechner.

   Die Zuordnung je Sektion steht in _docs/styleguide.html. */
.h1,.h2,.h3{text-wrap:balance;overflow-wrap:break-word}
.h2,.h3{font-family:var(--font-head);letter-spacing:var(--ls-head)}
/* Deutsche Komposita wie „Datenschutzerklärung" sprengen schmale Viewports —
   gemessen 420 px bei 390 px Platz. Die Trennung ist dort nötig und richtig.
   In Schaugrößen richtet sie Schaden an: Auf /catering/ wurde daraus
   „Ein Famili-enbetrieb, keine Cate-ring-Firma." in 92 px Playfair.
   Deshalb nur unterhalb von 640 px. */
@media (max-width:639px){
  .h1,.h2,.h3{hyphens:auto}
}
/* H1 ist immer Ebene 1 — auf jeder Seite, mit und ohne Hero. */
.h1{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--fs-h1);
  line-height:var(--lh-display);letter-spacing:var(--ls-display);
}
/* Seitentitel von Unterseiten ohne Hero (Danke, 404, Impressum).
   Standen zwischenzeitlich in Lexend, weil die H1 der Hero-Seiten damals
   Lexend war und drei Display-Schriften auf einer Website zu viel sind.
   Seit die H1 überall Playfair ist, zieht diese mit — eine Schrift für eine
   Rolle, unabhängig davon, ob die Seite einen Hero hat. */
.h1--seite{font-size:clamp(2.4rem,1.6rem + 3.1vw,4rem)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-head);font-weight:700}
.h3{font-size:var(--fs-h3);line-height:1.3;font-weight:600}
.display{font-family:var(--font-display);font-size:var(--fs-display);line-height:1.05;font-weight:800;letter-spacing:-.025em}
.lead{font-size:var(--fs-lead);color:var(--text-muted);max-width:60ch}
.eyebrow{
  font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);
  margin-bottom:var(--luft-ueber-h2);
}
/* Überzeilen tragen dasselbe Orange wie die Knöpfe — Vorgabe des Kunden,
   damit die Akzentfarbe über alle Bereiche hinweg eine einzige ist.
   Gemessen auf den vier hellen Flächen des Projekts: 2,37:1 bis 2,76:1.
   WCAG AA verlangt 4,5:1 für Text dieser Größe; das vorherige --curry-700
   lag bei 4,96:1 bis 5,78:1. Bewusste Abweichung, hier festgehalten — ein
   Zurück ist eine Zeile. */
[data-site="main"] .eyebrow,[data-site="catering"] .eyebrow{color:var(--accent-text)}
.muted{color:var(--text-muted)}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:.85rem 1.6rem;
  font-family:var(--font-head);font-size:.94rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;text-align:center;
  border:2px solid transparent;border-radius:var(--radius-pill);cursor:pointer;
  transition:background-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease),color .22s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* Weiße Schrift auf Orange — Vorgabe des Kunden, damit alle drei Bereiche
   dieselbe Knopfgestaltung tragen wie die Weihnachts-Seite.
   Gemessen: Weiß auf #EF7D00 ergibt 2,76:1 und liegt damit unter den
   4,5:1, die WCAG AA für normalen Text verlangt (Navy ergab 4,92:1).
   Weiß würde erst ab einem Orange wie #B75F00 tragen — das ist bräunlich
   und kein Markenton mehr. Bewusste Entscheidung, hier festgehalten. */
/* Weiß auf Orange — Entscheidung des Kunden, siehe tokens.css. 2,76:1. */
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-card)}
.btn--primary:hover{background:var(--orange-hi)}
.btn--secondary{background:var(--brand);color:var(--cream)}
.btn--secondary:hover{background:var(--navy-deep)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--brand);background:rgba(20,47,78,.05)}
.btn--lg{min-height:60px;padding:1rem 2rem;font-size:1rem}
.btn--sm{min-height:44px;padding:.6rem 1.15rem;font-size:.84rem}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- Karten ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.card__body{padding:clamp(1.25rem,2.4vw,1.75rem)}
.card__title{font-family:var(--font-head);font-weight:700;font-size:var(--fs-h3);margin-bottom:.4rem}
.card__text{color:var(--text-muted);font-size:var(--fs-sm)}

/* Bildkachel: dunkles Foto auf hellem Grund, bewusst als Fläche gesetzt */
.tile{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--navy-deep);box-shadow:var(--shadow-card);
}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tile--tall img{aspect-ratio:3/4}
.tile--wide img{aspect-ratio:16/9}
.tile__caption{
  position:absolute;inset-inline:0;bottom:0;padding:1.5rem 1.25rem .95rem;
  background:linear-gradient(transparent,rgba(14,35,64,.88));
  color:var(--cream);font-family:var(--font-head);font-weight:600;
}
.tile__price{
  position:absolute;top:.85rem;right:.85rem;
  background:var(--orange);color:var(--navy);
  font-family:var(--font-head);font-weight:800;font-size:.95rem;
  padding:.35rem .7rem;border-radius:var(--radius-pill);
  font-variant-numeric:tabular-nums;
}

/* ---------- Tabellen ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
caption{
  text-align:left;padding:.9rem 1rem;font-family:var(--font-head);
  font-weight:700;color:var(--text);border-bottom:1px solid var(--line);
}
th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm)}
thead th{background:var(--surface-alt)}
td:not(:first-child),th:not(:first-child){text-align:right}
tbody tr:last-child td{border-bottom:0}

/* ---------- Kassenbon: Signatur-Komponente ---------- */
.bon{
  --zacke:10px;
  background:var(--surface);
  padding:1.5rem 1.35rem;
  font-variant-numeric:tabular-nums;
  box-shadow:var(--shadow-card);
  /* gezackte Ober- und Unterkante */
  -webkit-mask:
    radial-gradient(var(--zacke) at 50% 0,#0000 98%,#000) repeat-x 0 0/calc(2*var(--zacke)) var(--zacke),
    radial-gradient(var(--zacke) at 50% 100%,#0000 98%,#000) repeat-x 0 100%/calc(2*var(--zacke)) var(--zacke),
    linear-gradient(#000,#000) no-repeat 0 var(--zacke)/100% calc(100% - 2*var(--zacke));
  mask:
    radial-gradient(var(--zacke) at 50% 0,#0000 98%,#000) repeat-x 0 0/calc(2*var(--zacke)) var(--zacke),
    radial-gradient(var(--zacke) at 50% 100%,#0000 98%,#000) repeat-x 0 100%/calc(2*var(--zacke)) var(--zacke),
    linear-gradient(#000,#000) no-repeat 0 var(--zacke)/100% calc(100% - 2*var(--zacke));
}
.bon__kopf{
  text-align:center;font-family:var(--font-head);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;font-size:var(--fs-xs);
  color:var(--text-muted);padding-bottom:.9rem;margin-bottom:.9rem;
  border-bottom:1px dashed var(--line);
}
.bon__zeile{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;font-size:var(--fs-sm)}
.bon__zeile span:last-child{white-space:nowrap}
.bon__summe{
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--line);
  font-family:var(--font-head);font-weight:800;font-size:1.15rem;
}
.bon__fuss{margin-top:.8rem;font-size:var(--fs-xs);color:var(--text-muted);text-align:center}

/* ---------- Formular ---------- */
.feld{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.feld label{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:600}
.feld .pflicht{color:var(--accent)}
[data-site="main"] .feld .pflicht,[data-site="catering"] .feld .pflicht{color:#A45804}
.feld .optional{font-weight:400;color:var(--text-muted);font-size:.86em}
.feld input,.feld select,.feld textarea{
  width:100%;min-height:52px;padding:.8rem 1rem;
  font:inherit;font-size:1rem;color:var(--text);
  background:var(--surface);border:1.5px solid var(--line);border-radius:12px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);appearance:none;
}
.feld textarea{min-height:120px;resize:vertical;line-height:1.55}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--text-muted)}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(239,125,0,.25);
}
.feld__fehler{display:none;font-size:var(--fs-sm);font-weight:500;color:#B3350F}
.feld.hat-fehler input,.feld.hat-fehler select,.feld.hat-fehler textarea{border-color:#B3350F;background:rgba(179,53,15,.05)}
.feld.hat-fehler .feld__fehler{display:block}
.feld__hinweis{font-size:var(--fs-sm);color:var(--text-muted)}
.honeypot{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Family-Bar ---------- */
.family-bar{background:var(--navy-deep);color:var(--cream);font-size:var(--fs-xs)}
.family-bar__inner{display:flex;align-items:center;gap:.25rem;min-height:40px;overflow-x:auto;scrollbar-width:none}
.family-bar__inner::-webkit-scrollbar{display:none}
.family-bar a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 .85rem;
  color:rgba(255,247,239,.72);text-decoration:none;white-space:nowrap;
  font-family:var(--font-head);font-weight:600;letter-spacing:.03em;
  transition:color .2s var(--ease);
}
.family-bar a:hover{color:var(--cream)}
.family-bar a[aria-current="page"]{color:var(--orange)}
.family-bar__saison{color:var(--gold)}

/* ---------- Bewegung zurückhaltend ---------- */
[data-reveal]{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-reveal].ist-sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- Druck ---------- */
@media print{
  .family-bar,.nav,.btn,.skip-link,footer{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:1rem}
  .tile img{max-height:6cm}
  table{page-break-inside:avoid}
}

/* ---------- Mindestgröße für Zielflächen (WCAG 2.5.8) ----------
   Links, die als Liste oder Sprungmarke stehen, brauchen 24 px Höhe.
   Links mitten im Fließtext sind davon ausgenommen (Regel „Inline"),
   deshalb steht hier keine pauschale Regel für jedes a-Element. */
.liste-links a,
.inhaltsverzeichnis a,
.karte__liste a,
.footer__liste a,
.footer__kontakt a,
address a,
dd > a:only-child{
  display:inline-block;
  min-height:24px;
  padding-block:.22rem;
}