/* =========================================================================
   IZIZI NUNNAK - Foc de Moll
   Ein Scheinwerfer wirft ein hartes, flaches Lichtfeld auf eine schwarze
   Flaeche. Was gezeigt wird, steht im Licht; alles andere bleibt dunkel.
   Kein Leuchten, kein Verlauf, keine weiche Kante - Licht ist hier Geometrie.
   Die Positionslichter rot und gruen sind das Zustandssystem.

   1. Schriften        7. Lichtfeld und Baender    13. Fakten und Karte
   2. Marken           8. Kopf, Streifen, Nav      14. Bewertungen
   3. Grundlagen       9. Held                     15. Formular
   4. Typografie      10. Emblem                   16. Fuss und Dock
   5. Knoepfe         11. Karte der Speisen        17. Bewegung
   6. Signallampe     12. Bilder                   18. Druck
   ========================================================================= */

/* 1. Schriften ----------------------------------------------------------- */

@font-face {
  font-family: "Anybody";
  src: url("assets/fonts/anybody-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 75% 100%;
  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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anybody";
  src: url("assets/fonts/anybody-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 75% 100%;
  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;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("assets/fonts/schibsted-latin.woff2") format("woff2");
  font-weight: 400 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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("assets/fonts/schibsted-latin-ext.woff2") format("woff2");
  font-weight: 400 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;
}
@font-face {
  font-family: "Martian Mono";
  src: url("assets/fonts/martian-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono";
  src: url("assets/fonts/martian-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  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;
}

/* 2. Marken -------------------------------------------------------------- */

:root {
  /* Grund und Licht - beide vollkommen flach, nie Verlauf, nie Textur */
  --dark: #0b0c0e;
  --dark-up: #14161a;
  --dark-line: #272b33;
  --light: #f4f0e6;
  --light-up: #fbf9f4;
  --light-line: #d6d0c1;

  /* Tinte */
  --ink: #f4f0e6;
  --ink-dim: #a2a9b4;
  --ink-dark: #101216;
  --ink-dark-dim: #57554e;

  /* Marke des Hauses */
  --pink: #ecc6c4;
  --pink-ink: #8a4a4e;

  /* Positionslichter: gruen offen, rot geschlossen */
  --starboard: #46b076;
  --starboard-ink: #1c6b41;
  --port: #e86a62;
  --port-ink: #9c2b24;

  /* Preview-Streifen */
  --stripe-bg: #6c3bd1;
  --stripe-ink: #f6f2ff;

  --display: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --text: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --shell: 78rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --band-y: clamp(4rem, 8vw, 8rem);
  --stripe: 34px;
  --headbar: 74px;

  /* Der eine Winkel des Hauses, als Tangente. Jede geneigte Kante leitet ihre
     Geometrie hieraus ab: Bandkante und Lichtfeld ueber Laenge mal Tangente,
     der Kegel ueber ein festes Seitenverhaeltnis. Ein Wert, drei Kanten,
     derselbe Winkel. */
  --tan: 0.16;
  --slant-run: 40vw;
  --slant-rise: calc(var(--slant-run) * var(--tan));
  --panel-run: 20rem;
  --panel-rise: calc(var(--panel-run) * var(--tan));

  --fs-micro: 0.6875rem;
  --fs-small: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-h3: clamp(1.25rem, 1.9vw, 1.6rem);
  --fs-h2: clamp(1.9rem, 4.2vw, 3.2rem);
  --fs-h1: clamp(2.4rem, 6.4vw, 5.4rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

@media (max-width: 47.99em) {
  :root {
    --stripe: 48px;
    --headbar: 58px;
    --slant-run: 62vw;
    --panel-run: 13rem;
  }
}

/* 3. Grundlagen ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--stripe) + var(--headbar) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: calc(var(--stripe) + var(--headbar));
  background: var(--dark);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}
.on-light :where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--ink-dark);
}

.u-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.shell {
  width: min(var(--shell), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { width: min(52rem, 100%); }

.skip {
  position: fixed;
  left: 50%;
  top: -6rem;
  z-index: 90;
  transform: translateX(-50%);
  padding: 0.7rem 1.2rem;
  background: var(--light);
  color: var(--ink-dark);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus-visible { top: calc(var(--stripe) + 8px); }

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 82%;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 {
  font-size: var(--fs-h3);
  font-stretch: 88%;
  letter-spacing: 0.005em;
}

p { margin: 0 0 1.05em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 46ch;
  text-wrap: pretty;
}

.dim { color: var(--ink-dim); }
.on-light .dim { color: var(--ink-dark-dim); }

.meta {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-stretch: 80%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.on-light .meta { color: var(--ink-dark-dim); }

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-stretch: 80%;
}

/* 5. Knoepfe ------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--fs-small);
  font-stretch: 84%;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
/* Der Knopf geht an wie eine Lampe: harte Kante wischt von links durch. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }
.btn:hover,
.btn:focus-visible { color: var(--dark); }

.btn--primary {
  background: var(--ink);
  color: var(--ink-dark);
}
.btn--primary::before { background: var(--pink); }
.btn--primary:hover,
.btn--primary:focus-visible { color: var(--ink-dark); }

.on-light .btn { border-color: var(--ink-dark); color: var(--ink-dark); }
.on-light .btn::before { background: var(--ink-dark); }
.on-light .btn:hover,
.on-light .btn:focus-visible { color: var(--light); }
.on-light .btn--primary { background: var(--ink-dark); color: var(--light); }
.on-light .btn--primary::before { background: var(--pink-ink); }
.on-light .btn--primary:hover,
.on-light .btn--primary:focus-visible { color: var(--light); }

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.8rem;
}

.link {
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 700;
  font-stretch: 84%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s var(--ease);
}
.link:hover { color: var(--pink); }
.on-light .link:hover { color: var(--pink-ink); }

/* 6. Signallampe --------------------------------------------------------- */

.lamp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: var(--fs-small);
  font-stretch: 80%;
  letter-spacing: 0.05em;
}
.lamp__dot {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink-dim);
}
.lamp[data-state="open"] .lamp__dot { background: var(--starboard); }
.lamp[data-state="closed"] .lamp__dot { background: var(--port); }
.lamp__main { font-weight: 700; text-transform: uppercase; }
.lamp[data-state="open"] .lamp__main { color: var(--starboard); }
.lamp[data-state="closed"] .lamp__main { color: var(--port); }
.lamp__sub { color: var(--ink-dim); }
.on-light .lamp__sub { color: var(--ink-dark-dim); }
.on-light .lamp[data-state="open"] .lamp__main { color: var(--starboard-ink); }
.on-light .lamp[data-state="closed"] .lamp__main { color: var(--port-ink); }

/* 7. Lichtfeld und Baender ----------------------------------------------- */

.band { padding-block: var(--band-y); }
.band--dark { background: var(--dark); }
.band--raise { background: var(--dark-up); }

/* Das Lichtfeld: eine flache helle Flaeche mit einer geneigten Oberkante,
   so als faende der Strahl dort seine Kante. */
.band--light {
  position: relative;
  background: var(--light);
  color: var(--ink-dark);
  clip-path: polygon(0 var(--slant-rise), var(--slant-run) 0, 100% 0,
                     100% 100%, 0 100%);
  margin-top: calc(var(--slant-rise) * -1);
  padding-top: calc(var(--band-y) + var(--slant-rise));
}
.band--light + .band--light {
  clip-path: none;
  margin-top: 0;
  padding-top: 0;
}
.band--lightflat {
  background: var(--light);
  color: var(--ink-dark);
}

.band__head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}
.band__head p { max-width: 54ch; }
.band__head--tight { margin-bottom: 0; }

/* Der kleine Leuchtkoerper vor jeder Ueberschrift: das Emblem als Marke,
   nicht als Nummer und nicht als Kicker. */
.band__head h2 { display: flex; align-items: baseline; gap: 0.7rem; }
.band__head h2::before {
  content: "";
  flex: none;
  width: 0.62em;
  height: 0.3em;
  background: var(--pink);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  translate: 0 -0.12em;
}
.on-light .band__head h2::before { background: var(--pink-ink); }

.rule {
  border: 0;
  border-top: 1px solid var(--dark-line);
  margin: clamp(2.4rem, 5vw, 4rem) 0;
}
.on-light .rule { border-top-color: var(--light-line); }

/* 8. Kopf, Streifen, Navigation ------------------------------------------ */

.stripe {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: var(--stripe);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.9rem;
  background: var(--stripe-bg);
  color: var(--stripe-ink);
  font-family: var(--text);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-align: center;
}

.head {
  position: fixed;
  inset: var(--stripe) 0 auto 0;
  z-index: 60;
  height: var(--headbar);
  background: var(--dark);
  border-bottom: 1px solid var(--dark-line);
}
.head__in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.head__home {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.head__home .mark { width: 44px; color: var(--ink); }
.head__word {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 0.2rem; }
.nav__link {
  display: inline-block;
  padding: 0.55rem 0.7rem;
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 700;
  font-stretch: 84%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  transition: color 0.18s var(--ease);
}
.nav__link:hover { color: var(--ink); }
@media (min-width: 62em) {
  .nav__link { white-space: nowrap; }
  .nav > .btn { display: none; }
}
.nav__link[aria-current="page"] { color: var(--pink); }

.langs {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: 0.5rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--dark-line);
}
.langs__link {
  padding: 0.4rem 0.4rem;
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 700;
  font-stretch: 84%;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--ink-dim);
}
.langs__link:hover { color: var(--ink); }
.langs__link[aria-current="true"] { color: var(--ink); border-bottom: 1px solid var(--pink); }

.head .btn { min-height: 40px; padding: 0.45rem 1rem; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--dark-line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.burger span,
.burger span::before,
.burger span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.24s var(--ease), opacity 0.16s linear;
}
.burger span { margin: 0 auto; position: relative; }
.burger span::before,
.burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.nav[data-open="true"] ~ .burger span { background: transparent; }
.nav[data-open="true"] ~ .burger span::before { transform: translateY(6px) rotate(45deg); }
.nav[data-open="true"] ~ .burger span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 61.99em) {
  .burger { display: block; }
  .head .head__cta { display: none; }
  .nav {
    position: fixed;
    inset: calc(var(--stripe) + var(--headbar)) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.6rem;
    background: var(--dark);
    border-bottom: 1px solid var(--dark-line);
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform 0.34s var(--ease), visibility 0s linear 0.34s;
  }
  .nav[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.34s var(--ease), visibility 0s;
  }
  .nav__link {
    padding: 0.95rem 0;
    font-size: var(--fs-small);
    border-bottom: 1px solid var(--dark-line);
  }
  .nav .btn { margin-top: 1.1rem; }
  .langs {
    margin: 1.1rem 0 0;
    padding-left: 0;
    border-left: 0;
  }
  .langs__link { padding: 0.5rem 0.7rem 0.5rem 0; }
}

/* 9. Held ---------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--dark);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
}
.hero__in {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
.hero__lamp { margin-bottom: 1.6rem; }
.hero h1 { margin-bottom: 1.5rem; }

.hero__where {
  margin-top: 1.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--dark-line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.6rem;
}
.hero__where .meta { margin: 0; }

/* Der Kegel: das Foto steht im Licht, der Text steht daneben im Dunkeln. */
.cone {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--pink);
  clip-path: polygon(12.8% 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
.cone__inner {
  height: 100%;
  background: var(--light);
  clip-path: polygon(calc(12.8% + 2px) 0, calc(100% - 2px) 0,
                     calc(100% - 2px) 100%, 2px 100%);
}
.cone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cone__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.7rem 1rem;
  background: var(--dark);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-stretch: 80%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 62em) {
  .hero { padding-block: clamp(3rem, 5vw, 5.5rem) clamp(5rem, 9vw, 9rem); }
  .hero__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
  }

}

/* Ein zweiter Schnitt Licht, dort wo er etwas bedeutet: auf der Uhrzeit.
   Oberkante geneigt, Winkel aus derselben Tangente, rosa Kante wie am Kegel. */
.lit {
  max-width: 30rem;
  background: var(--pink);
  clip-path: polygon(0 var(--panel-rise), var(--panel-run) 0, 100% 0,
                     100% 100%, 0 100%);
}
.lit__in {
  background: var(--light);
  color: var(--ink-dark);
  clip-path: polygon(2px calc(var(--panel-rise) + 3px),
                     calc(var(--panel-run) + 3px) 2px,
                     calc(100% - 2px) 2px,
                     calc(100% - 2px) calc(100% - 2px),
                     2px calc(100% - 2px));
  padding: calc(var(--panel-rise) + 1.4rem) clamp(1.4rem, 3vw, 2.2rem)
           clamp(1.5rem, 2.4vw, 1.9rem);
}
.lit__in h3 { margin-bottom: 1rem; }
.lit__in .lamp { margin-top: 1.3rem; }

/* 10. Emblem ------------------------------------------------------------- */

.mark { width: 100%; height: auto; }
.mark__a,
.mark__b {
  font-family: var(--display);
  font-weight: 800;
  fill: var(--dark);
  text-transform: uppercase;
}
.mark__a { font-size: 40px; font-stretch: 88%; letter-spacing: 1px; }
.mark__b { font-size: 21px; font-stretch: 78%; letter-spacing: 2.4px; }
.on-light .mark__a,
.on-light .mark__b { fill: var(--light); }
/* Bei 44 px ist die Innenschrift Matsch: dort traegt nur die Silhouette. */
.head .mark__a,
.head .mark__b { display: none; }

.mark.mark-block {
  width: clamp(8rem, 13vw, 11rem);
  color: var(--pink);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.mark.foot__mark { width: 7.5rem; }

/* 11. Karte der Speisen -------------------------------------------------- */

/* Ein einziges, durchgehendes Blatt im Licht: Kopf, Reiter und Liste teilen
   sich dieselbe Flaeche, damit unter der klebenden Leiste kein dunkler Spalt
   aufreisst. */
.sheet {
  background: var(--light);
  color: var(--ink-dark);
  padding-bottom: var(--band-y);
}
.sheet__head {
  padding-top: var(--band-y);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: 1rem;
}
.sheet__head .meta { margin-top: 0.4rem; }
.sheet__body { padding-top: clamp(2rem, 4vw, 3rem); }

.jump {
  position: sticky;
  top: calc(var(--stripe) + var(--headbar));
  z-index: 40;
  background: var(--light);
  border-bottom: 1px solid var(--light-line);
}
.jump__in {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-block: 0.5rem;
}
.jump__link {
  flex: none;
  padding: 0.5rem 0.8rem;
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 700;
  font-stretch: 84%;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dark-dim);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.jump__link:hover { color: var(--ink-dark); }
.jump__link[aria-current="true"] {
  color: var(--ink-dark);
  border-bottom-color: var(--pink-ink);
}

.sect { margin-bottom: clamp(3rem, 6vw, 5rem); }
.sect > h2 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}
.sect > h2::before {
  content: "";
  flex: none;
  width: 0.62em;
  height: 0.3em;
  background: var(--pink-ink);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  translate: 0 -0.12em;
}
.sect__note {
  font-size: var(--fs-small);
  color: var(--ink-dark-dim);
  max-width: 58ch;
  margin: 0.8rem 0 0;
}
.sect__cols {
  display: flex;
  justify-content: flex-end;
  gap: 1.4rem;
  margin-bottom: 0.3rem;
  padding-top: 1.4rem;
}
.sect__col {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-stretch: 78%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dark-dim);
  width: 4.6rem;
  text-align: right;
}

.dishes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--light-line);
}
.dish {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.2rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--light-line);
}
.dish__name {
  font-size: var(--fs-base);
  line-height: 1.45;
  max-width: 52ch;
}
.dish__sub {
  display: block;
  font-size: var(--fs-small);
  color: var(--ink-dark-dim);
  margin-top: 0.15rem;
  max-width: 52ch;
}
.dish__al {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-stretch: 78%;
  letter-spacing: 0.06em;
  color: var(--pink-ink);
  white-space: nowrap;
  vertical-align: 0.12em;
}
.dish__prices {
  display: flex;
  gap: 1.4rem;
  white-space: nowrap;
}
.dish__price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-stretch: 78%;
  font-size: var(--fs-small);
  width: 4.6rem;
  text-align: right;
}
.dish__price--sub { color: var(--ink-dark-dim); }
.dish.is-out { display: none; }
.dishes__empty {
  padding: 1.1rem 0;
  font-size: var(--fs-small);
  color: var(--ink-dark-dim);
}
.dishes__empty[hidden] { display: none; }

/* Allergenfilter */
.filter {
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--light-line);
}
.filter h2 { font-size: var(--fs-h3); font-stretch: 88%; letter-spacing: 0.005em; }
.filter > p { font-size: var(--fs-small); color: var(--ink-dark-dim); margin-top: 0.5rem; }
.filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.8rem;
}
.chip {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--light-line);
  background: transparent;
  color: var(--ink-dark-dim);
  font-family: var(--text);
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.chip:hover { border-color: var(--ink-dark); color: var(--ink-dark); }
.chip[aria-pressed="true"] {
  background: var(--ink-dark);
  border-color: var(--ink-dark);
  color: var(--light);
}
.filter__live {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-stretch: 78%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dark-dim);
  min-height: 1.2em;
}

.key {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.35rem 1.4rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-size: var(--fs-small);
}
.key li { display: flex; gap: 0.45rem; }
.key b {
  font-family: var(--mono);
  font-stretch: 78%;
  font-weight: 400;
  color: var(--pink-ink);
  min-width: 1.4rem;
}

/* Vorschau der Karte auf der Startseite */
.taste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--dark-line);
}
.taste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--dark-line);
}
.taste .num { font-size: var(--fs-small); color: var(--ink-dim); }
.on-light .taste { border-top-color: var(--light-line); }
.on-light .taste li { border-bottom-color: var(--light-line); }
.on-light .taste .num { color: var(--ink-dark-dim); }

/* Die sechs Kreationen der Bar */
.drinks {
  display: grid;
  gap: 1px;
  background: var(--dark-line);
  border: 1px solid var(--dark-line);
  margin-top: 2rem;
}
.drink {
  background: var(--dark);
  padding: 1.4rem 1.3rem 1.5rem;
}
.drink h3 { color: var(--pink); margin-bottom: 0.55rem; }
.drink p { font-size: var(--fs-small); color: var(--ink-dim); margin: 0; }
.drink__price {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-stretch: 78%;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 40em) { .drinks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .drinks { grid-template-columns: repeat(3, 1fr); } }

/* Zitat von der Speisekarte */
.quote {
  padding-block: clamp(4rem, 9vw, 8rem);
  background: var(--dark);
  text-align: center;
}
.quote blockquote {
  margin: 0 auto;
  max-width: 26ch;
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 88%;
  font-size: clamp(1.5rem, 3.6vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.quote figcaption { margin-top: 1.4rem; }

/* 12. Bilder ------------------------------------------------------------- */

.fig { margin: 0; }
.fig img { width: 100%; }
.fig figcaption {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-stretch: 80%;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.on-light .fig figcaption { color: var(--ink-dark-dim); }

.duo {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;
}
.duo--mid { align-items: center; }
@media (min-width: 62em) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .duo--flip > :first-child { order: 2; }
}

.strip {
  display: grid;
  gap: 1px;
  background: var(--dark-line);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 48em) { .strip { grid-template-columns: repeat(3, 1fr); } }

/* 13. Fakten und Karte --------------------------------------------------- */

.facts {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
@media (min-width: 48em) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .facts { grid-template-columns: repeat(3, 1fr); } }

.facts--pair {
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  align-content: center;
}
@media (min-width: 40em) and (max-width: 61.99em) {
  .facts--pair { grid-template-columns: repeat(2, 1fr); }
}

.fact h3 { margin-bottom: 0.7rem; }
.fact p { font-size: var(--fs-base); }
.fact address { font-style: normal; font-size: var(--fs-base); }

.hours {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.2rem;
  font-size: var(--fs-base);
}
.hours dt { color: var(--ink-dim); }
.on-light .hours dt { color: var(--ink-dark-dim); }
.hours dd {
  margin: 0;
  font-family: var(--mono);
  font-stretch: 78%;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.mapwrap {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--dark-line);
  background: var(--dark-up);
}
.on-light .mapwrap { border-color: var(--light-line); background: var(--light-up); }
.map { width: 100%; height: auto; }
.map__sea { fill: var(--dark-up); stroke: none; }
.map__coast { fill: none; stroke: var(--pink); stroke-width: 2.2; }
.map__pier { fill: none; stroke: var(--ink-dim); stroke-width: 1.4; }
.map__big { fill: none; stroke: var(--ink-dim); stroke-width: 2.6; }
.map__mid { fill: none; stroke: #4a505c; stroke-width: 1.7; }
.map__small { fill: none; stroke: #343945; stroke-width: 1; }
.map__beach { fill: none; stroke: var(--ink-dim); stroke-width: 1.2; stroke-dasharray: 6 5; }
.map__park { fill: none; stroke: #343945; stroke-width: 1; }
.map__dot { fill: var(--pink); }
.map__ring { fill: none; stroke: var(--pink); stroke-width: 2; }
.map__scale path { fill: none; stroke: var(--ink-dim); stroke-width: 1.4; }
.map__scale text {
  fill: var(--ink-dim);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 1px;
}
.on-light .map__sea { fill: #e6e0d0; }
.on-light .map__big,
.on-light .map__pier { stroke: #8d8677; }
.on-light .map__mid { stroke: #b9b2a0; }
.on-light .map__small,
.on-light .map__park { stroke: #d2ccbb; }
.on-light .map__beach { stroke: #9a9384; }
.on-light .map__coast,
.on-light .map__ring { stroke: var(--pink-ink); }
.on-light .map__dot { fill: var(--pink-ink); }
.on-light .map__scale path { stroke: var(--ink-dark-dim); }
.on-light .map__scale text { fill: var(--ink-dark-dim); }
.mapwrap__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--dark-line);
}
.on-light .mapwrap__foot { border-top-color: var(--light-line); }

/* 14. Bewertungen ------------------------------------------------------- */

.rates {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--dark-line);
  max-width: 48rem;
}
.rate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 0.15rem 1.8rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--dark-line);
}
.rate__src { font-size: var(--fs-base); }
.rate__src a { text-decoration: none; border-bottom: 1px solid var(--dark-line); }
.rate__src a:hover { border-bottom-color: var(--pink); }
.rate__val,
.rate__count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-stretch: 78%;
  font-size: var(--fs-small);
  white-space: nowrap;
}
.rate__count { color: var(--ink-dim); }
@media (max-width: 33em) {
  .rate { grid-template-columns: minmax(0, 1fr) auto; }
  .rate__count { grid-column: 1 / -1; text-align: left; }
}

/* 15. Formular ----------------------------------------------------------- */

.form { display: grid; gap: 1.15rem; }
.form .btns { margin-top: 0.5rem; }
.row {
  display: grid;
  gap: 1.15rem;
}
@media (min-width: 40em) { .row--3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 40em) { .row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.35rem; }
.field > label {
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 700;
  font-stretch: 84%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.on-light .field > label { color: var(--ink-dark-dim); }
.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.85rem;
  border: 1px solid #3b4150;
  border-radius: 0;
  background: var(--dark-up);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-base);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-dim); }
.field input:hover,
.field textarea:hover { border-color: var(--ink-dim); }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: var(--port); }
.field__err {
  font-family: var(--text);
  font-size: var(--fs-small);
  color: var(--port);
  min-height: 1.1em;
}
.field__hint {
  font-size: var(--fs-small);
  color: var(--ink-dim);
}
.form__ok {
  padding: 1rem 1.1rem;
  border: 1px solid var(--starboard);
  color: var(--starboard);
  font-size: var(--fs-base);
}
.form__ok[hidden] { display: none; }

.direct {
  display: grid;
  gap: 1px;
  background: var(--dark-line);
  border: 1px solid var(--dark-line);
}
@media (min-width: 48em) { .direct { grid-template-columns: repeat(3, 1fr); } }
.direct__cell {
  background: var(--dark);
  padding: 1.3rem;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.direct__cell a {
  font-family: var(--mono);
  font-stretch: 78%;
  font-size: var(--fs-small);
  text-decoration: none;
  border-bottom: 1px solid var(--dark-line);
  justify-self: start;
}
.direct__cell a:hover { border-bottom-color: var(--pink); }

/* 16. Fuss und Dock ------------------------------------------------------ */

.foot {
  background: var(--dark);
  border-top: 1px solid var(--dark-line);
  padding-block: clamp(2.6rem, 5vw, 4rem) 2rem;
}
.foot__cols {
  display: grid;
  gap: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 2.4rem;
}
@media (min-width: 48em) { .foot__cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h2 {
  font-size: var(--fs-small);
  font-family: var(--display);
  font-stretch: 84%;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--ink-dim);
  margin-bottom: 0.9rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.foot a { text-decoration: none; font-size: var(--fs-base); }
.foot a:hover { color: var(--pink); }
.foot__mark { color: var(--pink); margin-bottom: 1.2rem; }
.foot__end {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--dark-line);
  font-size: var(--fs-small);
  color: var(--ink-dim);
}
.foot__made a { color: var(--ink); font-size: inherit; }

.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 55;
  display: none;
  background: var(--dark);
  border-top: 1px solid var(--dark-line);
}
.dock a {
  flex: 1;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 700;
  font-stretch: 84%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.dock a + a { border-left: 1px solid var(--dark-line); }
.dock a.is-primary { background: var(--pink); color: var(--ink-dark); }
@media (max-width: 47.99em) {
  .dock { display: flex; }
  body { padding-bottom: 54px; }
}

/* 17. Bewegung ----------------------------------------------------------- */

/* Ohne JavaScript ist alles sichtbar: die Klasse setzt erst das Skript.
   Der eine Auftritt der Seite gehoert dem Lichtkegel. .rise traegt nur noch
   ein einziges nachgeordnetes Element je Seite: die Karte. */
.js-lit .rise {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.85s var(--ease), translate 0.85s var(--ease);
}
.js-lit .rise.is-lit { opacity: 1; translate: 0 0; }
.js-lit .rise[data-delay="1"] { transition-delay: 0.09s; }
.js-lit .rise[data-delay="2"] { transition-delay: 0.18s; }

/* Der eine Moment der Seite: der Strahl faellt herein und das Foto steht im Licht. */
.js-lit .cone__inner {
  translate: 0 -100%;
  transition: translate 0.95s var(--ease);
}
.js-lit .hero.is-lit .cone__inner { translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-lit .rise,
  .js-lit .cone__inner {
    opacity: 1;
    translate: 0;
    transition: none;
  }
  .btn::before,
  .btn,
  .nav,
  .nav__link,
  .chip,
  .burger span,
  .burger span::before,
  .burger span::after { transition: none; }
}

/* 18. Druck -------------------------------------------------------------- */

@media print {
  .stripe, .head, .dock, .jump, .filter, .btns, .cone { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
  .band--dark, .band--raise, .quote, .foot { background: #fff; color: #000; }
  .dish { break-inside: avoid; }
}