@font-face{font-family:"Super Grotesk";src:url("../fonts/super-grotesk-regular.woff2") format("woff2"),url("../fonts/super-grotesk-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Super Grotesk";src:url("../fonts/super-grotesk-bold.woff2") format("woff2"),url("../fonts/super-grotesk-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/inter-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
:root {
  --schwarz: #000;
  --weiss: #fff;
  --serif: "Super Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif; /* Display-Schrift Kaffeemitte */
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Einheitlicher Pfeil als CSS-Maske (currentColor fuellt ihn — funktioniert schwarz wie weiss) */
  --pf-vor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20width='24'%20height='24'%3E%3Cpath%20d='M4%2012h15M13%206l6%206-6%206'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --pf-zur: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20width='24'%20height='24'%3E%3Cpath%20d='M20%2012H5M11%206l-6%206%206%206'%20fill='none'%20stroke='%23000'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 400;
  background: var(--weiss);
  color: var(--schwarz);
  line-height: 1.65;
}
img { display: block; max-width: 100%; height: auto; }

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--weiss);
  border-bottom: 2px solid var(--schwarz);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
}
header .logo img { height: 26px; width: auto; }
nav { display: flex; gap: 28px; align-items: center; }
nav a {
  color: var(--schwarz);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
nav a.aktiv { text-decoration: underline; text-underline-offset: 4px; }
nav a + a::before {
  content: "|";
  display: inline-block;
  margin-right: 28px;
  font-weight: 400;
}

/* ---------- Mobile-Menü ---------- */
.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  padding: 4px 8px;
  color: var(--schwarz);
}
.mobil-menue {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--weiss);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 40px;
}
.mobil-menue.offen { display: flex; }
.mobil-menue .schliessen {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
  color: var(--schwarz);
}
.mobil-menue .m-home {
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--schwarz);
  text-decoration: none;
  opacity: 0.55;
}
.mobil-menue .m-home:hover { opacity: 1; }
.mobil-menue a.m-punkt { text-decoration: none; color: var(--schwarz); }
.mobil-menue .m-titel {
  display: block;
  font-family: var(--serif);
  font-size: clamp(38px, 10vw, 54px);
  font-weight: 600;
  line-height: 1.05;
}
.mobil-menue .m-sub {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ---------- Sektionen ---------- */
section { padding: 96px 24px; position: relative; }
.s-weiss { background: var(--weiss); color: var(--schwarz); }
.s-schwarz { background: var(--schwarz); color: var(--weiss); }
.inner { max-width: 1200px; margin: 0 auto; }
.inner-schmal { max-width: 760px; margin: 0 auto; }

.label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0.55;
}
h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 600;
  line-height: 1.08;
  margin-bottom: 32px;
}
.text-gross {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 300;
  max-width: 62ch;
}
.text-gross + .text-gross { margin-top: 22px; }

/* ---------- Seiten-Kopf ---------- */
.seitenkopf {
  background: var(--schwarz);
  color: var(--weiss);
  padding: 120px 24px 96px;
}
.seitenkopf h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 8vw, 96px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.seitenkopf p {
  margin-top: 20px;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---------- Speisekarte ---------- */
.karte-kat { margin-top: 72px; }
.karte-kat:first-child { margin-top: 0; }
.kat-kopf {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 2px solid currentColor;
}
.kat-kopf svg { width: 44px; height: 44px; flex: 0 0 44px; }
.kat-kopf h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  line-height: 1;
}

/* Liste der Gerichte/Getränke */
.gerichte { list-style: none; }
.gerichte.zweispaltig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
}
.gericht {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.s-schwarz .gericht { border-bottom-color: rgba(255,255,255,0.18); }
.gericht-kopf {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.gericht-name { font-weight: 600; font-size: clamp(15px, 1.3vw, 17px); }
.gericht-fueller {
  flex: 1;
  border-bottom: 1px dotted currentColor;
  opacity: 0.35;
  transform: translateY(-4px);
}
.gericht-preis { font-weight: 600; font-size: clamp(15px, 1.3vw, 17px); white-space: nowrap; }
.gericht-beschr {
  font-weight: 300;
  font-size: 14px;
  margin-top: 4px;
  max-width: 52ch;
  opacity: 0.85;
}
.gericht-allergene {
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-top: 6px;
  opacity: 0.5;
}

/* ---------- Lieferanten ---------- */
.lieferanten {
  list-style: none;
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 56px;
}
.lieferanten li {
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.22);
  font-weight: 300;
  font-size: 15px;
}
.lieferanten strong { font-weight: 600; }

.hinweis-allergene {
  margin-top: 48px;
  font-size: 13px;
  font-weight: 300;
  opacity: 0.6;
  max-width: 62ch;
}

/* ---------- Footer ---------- */
footer {
  background: var(--schwarz);
  color: var(--weiss);
  padding: 64px 24px 32px;
  border-top: 2px solid var(--weiss);
}
footer .inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  font-size: 14px;
}
footer a { color: var(--weiss); }
footer .logo-gross { width: 100%; margin-top: 48px; filter: invert(1); opacity: .95; }

.entwurf-hinweis {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--schwarz);
  color: var(--weiss);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 14px;
  z-index: 999;
  border: 1px solid var(--weiss);
}

/* ====================================================================
   LINKS & BUTTONS — einheitliches System (3 Bausteine)
   1) Textlink: unterstrichen, erbt Farbe   2) Pfeil-Link: nackter Pfeil
   3) Aktiv-Nav: unterstrichen (siehe nav a.aktiv oben)
   ==================================================================== */

/* Baustein 1 — Textlinks im Fliesstext erben die Textfarbe (kein Lila mehr) */
.kontext a, .hero-text a, .tw-fliess a, .vk-interview a, .kurator-text a,
.text-gross a, .caw-comment a, .interview-box a, .matus-fazit a,
.slg-q a, .video-cap a, .film-ref a, .tlink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.kontext a:hover, .hero-text a:hover, .tw-fliess a:hover, .vk-interview a:hover,
.kurator-text a:hover, .text-gross a:hover, .tlink:hover { opacity: .65; }

/* Baustein 2 — Pfeil-Link (Navigation). Pfeil = Inline-SVG (.pf-ic) im Markup,
   stroke = currentColor -> passt sich automatisch an Schwarz/Weiss an. */
.pf-ic {
  width: 1.3em;
  height: 1.3em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.pf-link {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  color: inherit;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 13px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
}
.pf-link:hover .pf-ic { transform: translateX(4px); }
.pf-link--zur:hover .pf-ic { transform: translateX(-4px); }
/* Grosse Variante in der Display-Schrift (z.B. Back to Archive) */
.pf-link--gross {
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}
.pf-link--gross .pf-ic { width: .9em; height: .9em; }

/* ---------- Mobil ---------- */
@media (max-width: 800px) {
  nav { display: none; }
  .burger { display: block; }
  .gerichte.zweispaltig { grid-template-columns: 1fr; column-gap: 0; }
  .lieferanten { grid-template-columns: 1fr; }
  section { padding: 64px 24px; }
  .seitenkopf { padding: 80px 24px 64px; }
  footer .inner a { display: inline-block; padding: 5px 0; }
}