/* ============================================================
   König Kebap Imbiss — P0001
   Auslage: die Kategorie ist das Bild.
   Grund warm anthrazit, Granatapfelrot als einziger
   Handlungston, Pistaziengrün nur für Frisches.
   ============================================================ */

@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/gabarito-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: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/gabarito-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/schibsted-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/schibsted-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;
}

:root {
  --grund:      #1b1512;
  --grund-hoch: #241c18;
  --grund-tief: #120d0b;
  --linie:      #3d2f28;

  /* Flächen liegen durchscheinend auf der Holzplatte, damit die
     Maserung durch die ganze Seite trägt statt nur oben. */
  --flaeche:      rgba(255, 255, 255, 0.055);
  --flaeche-hoch: rgba(255, 255, 255, 0.085);

  --creme:       #f6efe6;
  --creme-leise: #bcaa9b;

  --rot:      #d2213f;
  --rot-hoch: #b81a35;
  --rot-hell: #ff7d8e;
  --gruen:    #9ccb63;

  --mass: 74rem;
  --luft: clamp(1.15rem, 4vw, 3rem);
  --rund: 14px;
  --rund-klein: 9px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Der Grund: warme Tischplatte, vollständig aus Verläufen gebaut.
   Bewusst kein Rasterbild — ein zweites großflächiges Bild neben
   den zehn Fotos kostet Decode-Budget, und die Maserung entsteht
   hier billiger und schärfer als jedes JPEG sie liefern würde.
   Die feine Streifung läuft senkrecht wie Holzfaser, der warme
   Schein oben hebt den Kopfbereich, die Ecken fallen ab. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--grund);
  background-image:
    radial-gradient(120% 46rem at 50% 0%, rgba(126, 72, 44, 0.30), transparent 68%),
    radial-gradient(85% 55rem at 12% 32%, rgba(93, 48, 32, 0.20), transparent 70%),
    radial-gradient(80% 50rem at 92% 74%, rgba(70, 38, 30, 0.22), transparent 72%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 236, 210, 0.021) 0px,
      rgba(255, 236, 210, 0.021) 1px,
      transparent 1px,
      transparent 4px,
      rgba(0, 0, 0, 0.05) 4px,
      rgba(0, 0, 0, 0.05) 5px,
      transparent 5px,
      transparent 11px
    );
  background-attachment: scroll, scroll, scroll, scroll;
}

body {
  margin: 0;
  background: transparent;
  color: var(--creme);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Gabarito', system-ui, sans-serif;
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }
/* height:auto ist Pflicht, sonst gewinnt das height-Attribut
   aus dem HTML gegen jedes aspect-ratio. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

::selection { background: var(--rot); color: #fff; }
:root { caret-color: var(--rot); scrollbar-color: #4a3a32 var(--grund-tief); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--grund-tief); }
::-webkit-scrollbar-thumb { background: #4a3a32; border-radius: 99px; border: 3px solid var(--grund-tief); }
::-webkit-scrollbar-thumb:hover { background: #634d43; }

:focus-visible { outline: 3px solid var(--rot-hell); outline-offset: 3px; border-radius: 4px; }

.sprung { position: absolute; left: -9999px; }
.sprung:focus {
  left: 1rem; top: 1rem; z-index: 60;
  background: var(--creme); color: var(--grund);
  padding: 0.75rem 1rem; border-radius: var(--rund-klein);
  font-weight: 700; text-decoration: none;
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.35rem;
  border-radius: 99px;
  font-family: 'Gabarito', sans-serif;
  font-weight: 700;
  font-size: 0.975rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 140ms cubic-bezier(0.16,1,0.3,1), background-color 140ms ease-out;
}
.knopf svg { width: 19px; height: 19px; fill: currentColor; flex: none; }

.knopf--ruf {
  background: var(--rot);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.6);
}
.knopf--ruf:hover { background: var(--rot-hoch); transform: translateY(-2px); }
.knopf--ruf:active { transform: translateY(0); }

.knopf--leise {
  background: transparent;
  color: var(--creme);
  border: 1.5px solid var(--linie);
}
.knopf--leise:hover { border-color: var(--creme-leise); background: rgba(255,255,255,0.04); }

.knopf--gross { padding: 1.05rem 1.7rem; font-size: 1.1rem; }
.knopf--klein { padding: 0.6rem 1rem; font-size: 0.9rem; margin-top: auto; align-self: flex-start; }

/* ---------- Arbeitsproben-Band ---------- */
.band {
  display: flex;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem var(--luft);
  background: var(--gruen);
  color: #16200c;
  font-size: 0.83rem;
  line-height: 1.45;
}
.band strong {
  font-family: 'Gabarito', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- Leiste ---------- */
.leiste {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem var(--luft);
  background: rgba(27,21,18,0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
.leiste__marke { display: flex; align-items: baseline; gap: 0.5rem; text-decoration: none; margin-right: auto; }
.leiste__name {
  font-family: 'Gabarito', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.leiste__typ { font-size: 0.76rem; color: var(--creme-leise); letter-spacing: 0.02em; }
.leiste__ruf { padding: 0.6rem 1.1rem; font-size: 0.92rem; }

/* ---------- Statuspille ---------- */
.pille {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 99px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--creme-leise);
}
.pille__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--creme-leise); flex: none; }
.pille[data-zustand="offen"] { color: var(--gruen); border-color: rgba(156,203,99,0.4); }
.pille[data-zustand="offen"] .pille__punkt { background: var(--gruen); }

/* ---------- Kopf ---------- */
.kopf {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(76svh, 42rem);
  padding: clamp(3rem, 10vw, 6rem) var(--luft) clamp(2.4rem, 6vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.kopf__bild {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
  animation: heranfahren 1400ms cubic-bezier(0.16,1,0.3,1) both;
}
.kopf::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--grund) 4%, rgba(23,18,16,0.86) 38%, rgba(23,18,16,0.45) 72%, rgba(23,18,16,0.55) 100%);
}
@keyframes heranfahren {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

.kopf__inhalt { max-width: 44rem; }
.kopf__titel {
  font-size: clamp(2.6rem, 8.4vw, 5.4rem);
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.kopf__satz {
  margin-top: 1.1rem;
  max-width: 42ch;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: #e6dbd0;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.kopf__tasten { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.9rem; }

/* ---------- Bewertungsbeleg ---------- */
.beleg {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  font-size: 0.95rem;
  color: #e6dbd0;
}
.beleg__note { font-family: 'Gabarito', sans-serif; font-weight: 800; font-size: 1.35rem; }
/* Halbe Sterne: eine volle Reihe liegt beschnitten über einer leeren. */
.sterne { position: relative; display: inline-block; line-height: 0; }
.sterne span { display: inline-flex; gap: 2px; }
.sterne svg { width: 17px; height: 17px; }
.sterne__leer svg { fill: rgba(255,255,255,0.22); }
.sterne__voll {
  position: absolute;
  inset: 0;
  width: var(--anteil, 100%);
  overflow: hidden;
}
.sterne__voll svg { fill: #f5c518; }
.beleg__text strong { font-weight: 700; }

/* ---------- Hinweis ---------- */
.hinweis {
  max-width: var(--mass);
  margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
  padding: 1.1rem 1.3rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  margin-inline: max(var(--luft), calc((100% - var(--mass)) / 2));
}
.hinweis__wort {
  font-family: 'Gabarito', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--rot-hell);
  margin-bottom: 0.2rem;
}
.hinweis__text { color: var(--creme-leise); max-width: 68ch; }
.hinweis[hidden] { display: none; }

/* ---------- Felder ---------- */
.feld {
  max-width: var(--mass);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--luft) 0;
}
.feld__kopf { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.feld h2 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
}
.feld__satz { margin-top: 0.6rem; color: var(--creme-leise); max-width: 60ch; }
.vorbehalt {
  color: var(--rot-hell);
  border-bottom: 1px dashed currentColor;
}

/* ---------- Auslage ---------- */
.auslage {
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.kachel {
  appearance: none;
  font: inherit;
  color: inherit;
  width: 100%;
  padding: 0;
  border: 1.5px solid var(--linie);
  border-radius: var(--rund);
  background: var(--flaeche);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), border-color 180ms ease-out;
}
.kachel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.16,1,0.3,1);
}
.kachel__text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.8rem 0.9rem 0.85rem;
  margin-top: auto;
}
.kachel__name {
  font-family: 'Gabarito', sans-serif;
  font-weight: 800;
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.kachel__ab { font-size: 0.8rem; color: var(--creme-leise); white-space: nowrap; }

.kachel:hover { transform: translateY(-4px); border-color: #55403a; }
.kachel:hover img { transform: scale(1.055); }
.kachel[aria-pressed="true"] {
  border-color: var(--rot);
  box-shadow: inset 0 0 0 1px var(--rot);
}
.kachel[aria-pressed="true"] .kachel__ab { color: var(--rot-hell); }

.kachel--alle {
  min-height: 8rem;
  justify-content: flex-end;
  background: linear-gradient(180deg, var(--flaeche-hoch), rgba(0,0,0,0.22));
}

/* ---------- Speisekarte ---------- */
.gruppen { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); }
.gruppe[hidden] { display: none; }

.gruppe__kopf {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.5rem;
  border-bottom: 1.5px solid var(--linie);
}
.gruppe__kopf img {
  width: 58px; height: 58px;
  border-radius: var(--rund-klein);
  object-fit: cover;
  flex: none;
}
.gruppe__kopf h3 {
  font-size: clamp(1.3rem, 3.2vw, 1.75rem);
  font-weight: 800;
  text-transform: uppercase;
}

.posten {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(54,41,35,0.6);
}
.posten:last-child { border-bottom: none; }
.posten__name {
  font-weight: 600;
  font-size: 1.06rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.posten__zusatz {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--creme-leise);
  max-width: 52ch;
}
.posten__preis {
  font-family: 'Gabarito', sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  white-space: nowrap;
  border-bottom: 1px dashed rgba(255,125,142,0.55);
}
.marke {
  align-self: flex-start;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}
.marke--gruen { color: var(--gruen); background: rgba(156,203,99,0.13); }

/* ---------- Handwerk ---------- */
.handwerk {
  max-width: var(--mass);
  margin: clamp(3rem, 7vw, 5.5rem) auto 0;
  padding-inline: var(--luft);
  display: grid;
  gap: clamp(1.4rem, 3.5vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: center;
}
.handwerk__bild { width: 100%; border-radius: var(--rund); aspect-ratio: 4 / 3; object-fit: cover; }
.handwerk__text h2 {
  font-size: clamp(1.8rem, 4.4vw, 2.7rem);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.handwerk__text p { color: #ddd0c4; max-width: 54ch; }

/* ---------- Stimmen ---------- */
.stimmen {
  display: grid;
  gap: clamp(0.7rem, 1.6vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.stimme {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.4rem 1.5rem 1.3rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}
.stimme blockquote { margin: 0; }
.stimme blockquote p {
  font-family: 'Gabarito', sans-serif;
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.012em;
}
/* Anführungszeichen deutsch, nicht als Deko-Glyphe darüber */
.stimme blockquote p::before { content: '\201E'; }
.stimme blockquote p::after  { content: '\201C'; }
.stimme figcaption {
  margin-top: auto;
  font-size: 0.82rem;
  color: var(--creme-leise);
}

.feld__quelle {
  margin-top: 1.2rem;
  font-size: 0.86rem;
  color: var(--creme-leise);
}
.feld__quelle a { text-decoration-color: var(--rot); text-underline-offset: 4px; }
.feld__quelle a:hover { color: var(--rot-hell); }

/* ---------- Karte ---------- */
.karte-feld {
  margin-top: clamp(0.7rem, 1.6vw, 1rem);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--flaeche);
  line-height: 0;
}
.karte-feld iframe {
  display: block;
  width: 100%;
  height: clamp(17rem, 34vw, 24rem);
  border: 0;
  /* Google liefert eine helle Karte; leicht gedämpft passt sie
     zum warmen Grund, ohne unlesbar zu werden. */
  filter: saturate(0.88) contrast(1.02) brightness(0.94);
}

/* ---------- Kontakt ---------- */
.kontakt {
  display: grid;
  gap: clamp(0.7rem, 1.6vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.karteikarte {
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1.4rem 1.4rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}
.karteikarte h3 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--creme-leise);
  font-family: 'Schibsted Grotesk', sans-serif;
  margin-bottom: 0.6rem;
}
.karteikarte__wert {
  font-family: 'Gabarito', sans-serif;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.24;
}
.karteikarte__wert a { text-decoration-color: var(--rot); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.karteikarte__wert a:hover { color: var(--rot-hell); }
.karteikarte__zusatz { margin-top: 0.5rem; font-size: 0.86rem; color: var(--creme-leise); }

.zeiten { display: grid; gap: 0.2rem; }
.zeiten dt { font-size: 0.86rem; color: var(--creme-leise); }
.zeiten dd {
  margin: 0;
  font-family: 'Gabarito', sans-serif;
  font-size: 1.32rem;
  font-weight: 700;
}

/* ---------- Rechtstext ---------- */
.rechtstext { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.rechtstext h2 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin-top: 2.4rem;
}
.rechtstext .feld__kopf h2 { margin-top: 0; }
.rechtstext h3 {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--creme-leise);
  margin: 1.7rem 0 0.45rem;
}
.rechtstext p { max-width: 68ch; }
.rechtstext .luecke { color: var(--creme-leise); }
.rechtstext .warnung {
  margin-top: 0.7rem;
  padding: 0.85rem 1rem;
  border-left: 1px solid var(--rot);
  background: var(--flaeche);
  border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
  color: var(--creme);
}

/* ---------- Fuß ---------- */
.fuss {
  max-width: var(--mass);
  margin: clamp(3.5rem, 8vw, 6rem) auto 0;
  padding: clamp(1.8rem, 4vw, 2.4rem) var(--luft) clamp(6rem, 10vw, 4rem);
  border-top: 1px solid var(--linie);
  display: grid;
  gap: 0.5rem;
}
.fuss p { font-size: 0.83rem; color: var(--creme-leise); max-width: 76ch; }
.fuss__marke { color: var(--creme); font-weight: 600; }
.fuss__pflicht { color: var(--rot-hell); }
.fuss a { text-decoration-color: var(--rot); text-underline-offset: 3px; }

/* ---------- Ruf-Leiste, mobil ---------- */
.ruflei {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1rem calc(0.95rem + env(safe-area-inset-bottom));
  background: var(--rot);
  color: #fff;
  font-family: 'Gabarito', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.5);
}
.ruflei svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Anpassung ---------- */
@media (max-width: 52rem) {
  .leiste .pille { display: none; }
  .leiste__ruf { display: none; }
  .ruflei { display: flex; }
  .auslage { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .kachel__text { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
}

@media (max-width: 30rem) {
  .kopf__tasten .knopf { width: 100%; }
  .gruppe__kopf img { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}