/* =========================================================
   Barrio Cocina - eine gedruckte Zeitschrift, digital

   Drei Farben und kein Verlauf: Papier, Rot, Tinte. Was nach Hand aussieht,
   ist gezeichnet (assets/striche.svg), nicht gerechnet. Bewegung gibt es
   fast keine - nur dort, wo ein Link zeigt, dass er einer ist.

   Kein Inline-Stil, kein Inline-Skript: Die Seite laeuft unter einer
   strengen Inhaltsrichtlinie (style-src 'self').
========================================================= */

@font-face {
  font-family: 'Big Shoulders';
  src: url('../fonts/big-shoulders.woff2') format('woff2');
  font-weight: 500 900;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-kursiv.woff2') format('woff2');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/courier-prime-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Courier Prime';
  src: url('../fonts/courier-prime-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/caveat-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --papel: #EFE6D2;
  --papel-tief: #E4D7BC;
  /* 5,99 : 1 auf Papier, 5,22 : 1 auf dem tieferen Papier - auch kleine
     Schrift darf rot sein. Umgekehrt Papier auf Rot ebenso 5,99 : 1.
     Tinte auf Rot sind nur 2,50 : 1 - das gibt es auf dieser Seite nicht. */
  --rojo: #A3241A;
  --tinta: #17120E;
  --tinta-suave: #5C5147;   /* 6,21 : 1 */
  --linea: rgba(23, 18, 14, 0.22);

  --rand: clamp(16px, 3.6vw, 60px);
  --spalt: clamp(14px, 1.8vw, 28px);

  --gross: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --mono: 'Courier Prime', 'Courier New', monospace;
  --hand: 'Caveat', 'Segoe Print', cursive;

  /* Der Schriftzug fuellt die Breite. Gemessen im Browser, je Schriftgroesse:
     BARRIO 2,585 + Abstand 0,28 + COCINA 2,697 - zusammen 5,56. */
  --marke: calc((100vw - 2 * var(--rand)) / 5.6);
}

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

html {
  background: var(--papel) url('../assets/papier.webp') repeat;
  background-size: 512px;
  color: var(--tinta);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  /* Ohne sie wirkt Fraunces glatt. WONK kippt einzelne Buchstaben. */
  font-variation-settings: 'WONK' 1;
  overflow-x: clip;
}

::selection { background: var(--rojo); color: var(--papel); }

a { color: inherit; }
a:focus-visible, .knopf:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 4px;
}
.carta a:focus-visible, .fuss a:focus-visible { outline-color: var(--papel); }

img { max-width: 100%; display: block; }

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

.sprung {
  position: absolute; left: var(--rand); top: -100px; z-index: 10;
  background: var(--tinta); color: var(--papel);
  font: 700 14px var(--mono); padding: 10px 14px; text-decoration: none;
}
.sprung:focus { top: 10px; }

/* Abgenutzte Druckfarbe auf allem, was gross in Rot steht */
.titel__marke, .carta__titel, .gang__titel, .rellenos__titel, .besuch__titel,
.stempel, .initial::first-letter {
  -webkit-mask-image: url('../assets/abnutzung.png');
  mask-image: url('../assets/abnutzung.png');
  -webkit-mask-size: 480px;
  mask-size: 480px;
}

/* Grundregel der Bildplaetze - hier oben, weil die Abschnitte sie mit
   eigenen Raendern ueberschreiben (das Titelbild blutet nach rechts). */
.foto { position: relative; margin: 0; }

/* ---------- Die Laufzeile einer Seite: p. 03 .......... La Carta ---- */

.folio {
  display: flex; justify-content: space-between; gap: 1em;
  margin: 0; padding-top: 8px;
  border-top: 1px solid var(--tinta);
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.folio--hell { border-top-color: var(--papel); }

/* ---------- Handschrift -------------------------------------------- */

.notiz {
  display: inline-block;
  margin: 0;
  font: 600 clamp(24px, 2.3vw, 34px)/1 var(--hand);
  color: var(--rojo);
  rotate: -4deg;
}

/* ---------- Kopf ---------------------------------------------------- */

.kopf {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  column-gap: clamp(18px, 2.4vw, 40px);
  padding: 14px var(--rand) 10px;
  border-bottom: 4px double var(--tinta);
}
.kopf__marke {
  font: 900 26px/1 var(--gross);
  text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--rojo); text-decoration: none;
}
.kopf__ausgabe {
  margin: 0; font: 400 12px var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.kopf__nav { display: flex; gap: clamp(14px, 2vw, 28px); }
.kopf__nav a, .kopf__reservieren {
  font: 700 12.5px var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
}
.kopf__nav a:hover { color: var(--rojo); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.kopf__reservieren {
  color: var(--rojo);
  border: 2px solid var(--rojo);
  padding: 5px 10px 4px;
  border-radius: 3px 6px 4px 5px;
  rotate: -1.5deg;
}
.kopf__reservieren:hover { background: var(--rojo); color: var(--papel); }

/* ---------- 01 Titelseite ----------------------------------------- */

.titel { padding: clamp(10px, 1.6vw, 26px) var(--rand) clamp(70px, 9vw, 140px); }

.titel__marke {
  display: flex; align-items: flex-end; justify-content: space-between; column-gap: 0.28em;
  margin: 0;
  font: 900 var(--marke)/0.78 var(--gross);
  text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--rojo);
}

.titel__zeile {
  display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap;
  margin: clamp(12px, 1.4vw, 20px) 0 0; padding: 8px 0 7px;
  border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--tinta);
  font: 400 12.5px/1.3 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase;
}

.titel__raster {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: var(--spalt);
  margin-top: clamp(28px, 4vw, 60px);
}

.themen {
  grid-column: 1 / span 4; grid-row: 1;
  list-style: none; margin: 0; padding: 0;
}
.themen__eintrag {
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--linea);
}
.themen__eintrag:first-child { padding-top: 0; }
.themen__nr {
  grid-row: span 2;
  font: 800 clamp(44px, 4.6vw, 72px)/0.8 var(--gross);
  color: var(--rojo);
}
.themen__link {
  font: 600 clamp(20px, 1.9vw, 28px)/1.12 var(--serif);
  text-decoration: none;
}
.themen__link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--rojo); text-underline-offset: 4px; }
.themen__seite {
  margin-top: 6px;
  font: 400 11.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-suave);
}

.notiz--titel {
  grid-column: 2 / span 3; grid-row: 2;
  justify-self: end; align-self: start;
  margin-top: clamp(22px, 3vw, 44px);
  white-space: nowrap;
}
.notiz__pfeil {
  display: inline-block; vertical-align: top;
  width: 1.9em; height: 1.35em;
  margin: 0.35em 0 0 0.1em;
  rotate: -12deg;
}

.titel__aktion {
  grid-column: 1 / span 4; grid-row: 3;
  align-self: end;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  padding-bottom: 6px;
}

.foto--titel {
  grid-column: 5 / -1; grid-row: 1 / 4;
  margin-right: calc(-1 * var(--rand));
}
.foto--titel .foto__bild { height: clamp(460px, 76vh, 860px); }

/* Der Stempel sitzt auf der Kante zwischen Text und Bild */
.stempel {
  position: absolute; z-index: 2;
  left: calc(33.3% - clamp(56px, 6vw, 96px));
  bottom: clamp(-60px, -4vw, -30px);
  width: clamp(120px, 12vw, 190px); height: auto;
  color: var(--rojo);
  rotate: -14deg;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.stempel__rand { fill: none; stroke: currentColor; stroke-width: 3.2; }
.stempel__rand--innen { stroke-width: 1.6; }
.stempel__text {
  fill: currentColor;
  font: 800 19.5px var(--gross);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.stempel__mitte {
  fill: currentColor; text-anchor: middle;
  font: 900 40px var(--gross);
}

/* ---------- Knopf und Textlink --------------------------------------
   Kein abgerundeter Standardknopf: ein Gutschein vom Block, mit
   gestrichelter Abreisskante innen. */

.knopf {
  display: inline-block;
  padding: 0.62em 1.1em 0.55em;
  background: var(--rojo); color: var(--papel);
  font: 800 clamp(18px, 1.5vw, 22px)/1 var(--gross);
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  outline: 1.5px dashed var(--papel); outline-offset: -6px;
  rotate: -1.2deg;
}
.knopf:hover { background: var(--tinta); }
.knopf:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }

.textlink {
  font: italic 600 clamp(18px, 1.5vw, 21px) var(--serif);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--rojo); text-underline-offset: 5px;
}
.textlink:hover { color: var(--rojo); }

@media (prefers-reduced-motion: no-preference) {
  .knopf, .kopf__reservieren, .textlink, .themen__link { transition: background-color .2s, color .2s; }
}

/* ---------- Fotos -------------------------------------------------
   Aufbereitet mit tools/fotos.py: eng beschnitten, Tinte bis Papier,
   Korn. Hier wird nur noch eingepasst - jede Flaeche hat ihr Format,
   das Bild fuellt sie (object-fit), und <picture> liefert am Telefon
   einen anderen Ausschnitt als am Rechner. */

.foto picture { display: block; height: 100%; }
.foto__bild {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  background: var(--papel-tief);   /* solange das Bild laedt */
}

.bildzeile {
  margin-top: 12px;
  font: 400 12.5px/1.5 var(--mono); letter-spacing: 0.04em;
}
.bildzeile span { color: var(--rojo); font-weight: 700; }

/* ---------- 02 Editorial ------------------------------------------ */

.editorial {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalt);
  padding: clamp(80px, 11vw, 170px) var(--rand) 0;
}
.editorial > .folio { grid-column: 1 / -1; }

.editorial__titel {
  grid-column: 1 / span 9;
  margin: clamp(26px, 3vw, 44px) 0 0;
  font: 900 clamp(64px, 11.5vw, 200px)/0.8 var(--gross);
  text-transform: uppercase; letter-spacing: -0.01em;
}
.editorial__titel span { display: block; }
.editorial__einzug { padding-left: 1.1em; color: var(--rojo); }

.editorial__vorspann {
  grid-column: 2 / span 6;
  margin: clamp(26px, 3vw, 44px) 0 0;
  font: 500 clamp(22px, 2.2vw, 31px)/1.25 var(--serif);
}

.foto--portraet {
  grid-column: 10 / -1; grid-row: 2 / span 3;
  align-self: start;
  margin-top: clamp(30px, 6vw, 110px);
}

.editorial__text {
  grid-column: 2 / span 7;
  margin-top: clamp(34px, 4vw, 60px);
  columns: 2; column-gap: calc(var(--spalt) * 1.6);
  hyphens: auto;
}
.editorial__text p { margin: 0 0 1em; }
.initial::first-letter {
  float: left;
  margin: 0.06em 0.09em 0 0;
  font: 900 5.3em/0.78 var(--gross);
  color: var(--rojo);
}
.zitat {
  column-span: all;
  margin: 1.1em 0 1.3em -0.6em;
  padding: 0;
}
.zitat p {
  margin: 0; max-width: 17em;
  font: italic 600 clamp(28px, 3.3vw, 48px)/1.08 var(--serif);
  color: var(--rojo);
  text-indent: -0.42em;
}
.notiz--zitat { margin-top: 10px; margin-left: 1.4em; color: var(--tinta); }

/* ---------- 03 La Carta ------------------------------------------- */

.carta {
  position: relative;
  margin-top: clamp(90px, 12vw, 180px);
  padding: clamp(56px, 8vw, 130px) var(--rand);
  background: var(--rojo);
}

.carta__blatt {
  position: relative;
  max-width: 1340px; margin: 0 auto;
  padding: clamp(26px, 4vw, 66px);
  background: var(--papel) url('../assets/papier.webp') repeat;
  background-size: 512px;
  border: 2px solid var(--tinta);
  outline: 1px solid var(--tinta); outline-offset: -11px;
  /* ein Blatt, das auf dem Tisch liegt - leicht schief, harter Schatten */
  rotate: -0.4deg;
  box-shadow: 12px 14px 0 rgba(23, 18, 14, 0.34);
}

.carta__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--spalt);
  padding-bottom: clamp(18px, 2vw, 28px);
  border-bottom: 4px double var(--tinta);
}
.carta__kopf .folio { grid-column: 1 / -1; margin-bottom: clamp(16px, 2vw, 26px); }
.carta__titel {
  margin: 0;
  font: 900 clamp(76px, 12.5vw, 210px)/0.78 var(--gross);
  text-transform: uppercase; color: var(--rojo);
}
.carta__unterzeile {
  grid-column: 1; margin: 16px 0 0;
  font: 400 12.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.carta__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(30px, 3.5vw, 50px);
}
.gang { padding: 0 clamp(18px, 2.4vw, 40px); }
.gang:first-child { padding-left: 0; }
.gang:last-child { padding-right: 0; }
.gang + .gang { border-left: 1px solid var(--linea); }

.gang__titel {
  margin: 0;
  font: 900 clamp(40px, 4.2vw, 62px)/0.86 var(--gross);
  text-transform: uppercase; color: var(--rojo);
}
.gang__titel--folgend { margin-top: clamp(40px, 4vw, 60px); }
.gang__hinweis {
  margin: 8px 0 0;
  font: 400 11.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.gang__liste { list-style: none; margin: 14px 0 0; padding: 0; }

.gericht {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(1.2em, 1fr) auto;
  align-items: baseline;
  column-gap: 0.45em;
  padding: 0.8em 0 0.85em;
}
.gericht + .gericht { border-top: 1px solid var(--linea); }
.gericht__name {
  font: 800 clamp(21px, 1.85vw, 27px)/1 var(--gross);
  text-transform: uppercase; letter-spacing: 0.015em;
}
.gericht__punkte {
  align-self: end; margin-bottom: 0.32em;
  border-bottom: 2.5px dotted var(--tinta-suave);
}
.gericht__preis { font: 700 17px var(--mono); }
.gericht__text {
  grid-column: 1 / -1;
  margin-top: 0.3em;
  font: italic 400 16.5px/1.4 var(--serif);
  color: var(--tinta-suave);
}
/* Aufpreis direkt am Gericht, wie auf der Karte des Betriebs */
.gericht__extra {
  grid-column: 1 / -1;
  margin-top: 0.4em;
  font: 700 12.5px var(--mono); letter-spacing: 0.06em;
  color: var(--rojo);
}

/* Der Schraegstrich zwischen Burritos und Bowls - schwarz, wie im Schriftzug */
.gang__schraeg { color: var(--tinta); margin: 0 0.06em; }

/* Was in jedem Burrito und jeder Bowl steckt: ein gerahmter Kasten,
   wie ein eingeklebter Zettel auf einer gedruckten Karte */
.beilagen {
  display: flex; flex-wrap: wrap; row-gap: 2px;
  list-style: none; margin: 16px 0 0; padding: 16px 18px 15px;
  border: 1.5px solid var(--tinta);
  outline: 1px solid var(--tinta); outline-offset: -6px;
  font: italic 400 16.5px/1.5 var(--serif);
  rotate: -0.6deg;
}
.beilagen li:not(:last-child)::after { content: '·'; margin: 0 0.45em; color: var(--rojo); font-style: normal; }

.gang__unter {
  margin: 28px 0 0;
  font: 800 22px/1 var(--gross); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--rojo);
}
.gang__liste--klein { margin-top: 4px; }
.gang__liste--klein .gericht { padding: 0.5em 0 0.45em; }
.gang__liste--klein .gericht__name { font-size: 19px; }

.notiz--gang { display: block; width: fit-content; margin: 22px 0 0 auto; rotate: -5deg; }

.notiz--karte {
  position: absolute; right: 2.6em; top: -0.35em;
  font-size: clamp(22px, 1.9vw, 28px);
  rotate: -7deg;
  pointer-events: none;
}

.carta__fuss {
  margin: clamp(26px, 3vw, 40px) 0 0; padding-top: 14px;
  border-top: 1px solid var(--tinta);
  font: 400 12.5px/1.5 var(--mono); letter-spacing: 0.04em;
}

/* ---------- 04 Rellenos ------------------------------------------ */

.rellenos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalt);
  padding: clamp(90px, 12vw, 180px) var(--rand) 0 0;
}
.foto--rellenos { grid-column: 1 / span 6; }
.foto--rellenos .foto__bild { height: clamp(520px, 94vh, 960px); }

.rellenos__text {
  grid-column: 7 / -1; padding-left: calc(var(--spalt) * 0.5);
  container-type: inline-size;   /* fuer cqw unten */
}
.rellenos__titel {
  margin: clamp(26px, 3vw, 44px) 0 0;
  /* Fuellt genau die Textspalte: RELLENOS ist 3,611 Schriftgroessen breit
     (gemessen). Frueher ragte es mit negativem Rand ins Foto - das wirkte
     wie ein Versehen, nicht wie Absicht. */
  font: 900 calc(100cqw / 3.65)/0.76 var(--gross);
  text-transform: uppercase; color: var(--rojo);
  white-space: nowrap;
}
.rellenos__vorspann {
  max-width: 19em;
  margin: clamp(20px, 2.4vw, 34px) 0 0;
  font: 500 clamp(22px, 2.2vw, 31px)/1.25 var(--serif);
}

.schritte {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
  list-style: none; margin: clamp(36px, 4.4vw, 64px) 0 0; padding: 0;
}
.schritte__schritt { padding-top: 12px; border-top: 2px solid var(--tinta); }
.schritte__nr { display: block; font: 800 clamp(42px, 4.2vw, 64px)/0.8 var(--gross); color: var(--rojo); }
.schritte__titel {
  margin: 0.25em 0 0.2em;
  font: 800 clamp(24px, 2.2vw, 32px)/1 var(--gross);
  text-transform: uppercase;
}
.schritte__schritt p { margin: 0; font-size: 17px; line-height: 1.5; }

.notiz--rellenos { margin-top: clamp(36px, 4vw, 56px); font-size: clamp(30px, 2.8vw, 42px); rotate: -3deg; }
.notiz__strich { display: block; width: 5.4em; height: 0.42em; margin-top: 0.05em; }

/* ---------- 05 Kontaktabzug --------------------------------------- */

/* Abgeschnitten wird hier, am Abschnitt: Der Streifen ist breiter als die
   Seite und gedreht. Unten Platz fuer die Notiz unter dem Streifen. */
.abzug { padding: clamp(100px, 13vw, 190px) 0 90px; overflow: clip; }
.abzug__kopf { padding: 0 var(--rand); }
.abzug__titel {
  max-width: 16em;
  margin: clamp(22px, 2.6vw, 38px) 0 0;
  font: italic 600 clamp(30px, 3.8vw, 56px)/1.08 var(--serif);
}

.abzug__streifen {
  position: relative;
  width: 106vw; margin: clamp(40px, 5vw, 70px) 0 0 -3vw;
  padding: 22px 0 20px;
  background:
    url('../assets/perforation.svg') repeat-x 0 5px,
    url('../assets/perforation.svg') repeat-x 0 calc(100% - 5px),
    var(--tinta);
  background-size: 22px 10px, 22px 10px, auto;
  color: var(--papel);
  rotate: -1.3deg;
}
.abzug__rand {
  display: flex; justify-content: space-around;
  margin: 0; padding: 0 calc(3vw + var(--rand));
  font: 700 11px var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
}
.abzug__bilder {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
  list-style: none; margin: 10px 0; padding: 0 calc(3vw + var(--rand));
}
.abzug__bild { position: relative; }
/* Auf dem Telefon scrollt der Streifen seitlich - per Tastatur erreichbar */
.abzug__bilder:focus-visible { outline: 3px solid var(--papel); outline-offset: -3px; }
/* height: auto ist noetig: Das Attribut height="400" wirkt sonst wie eine
   CSS-Hoehe von 400 px und hebt das Seitenverhaeltnis auf - die Bilder
   standen hochkant im Streifen. */
.abzug__foto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--papel-tief); }

.abzug__kreis {
  position: absolute; z-index: 2;
  left: -12%; top: -24%; width: 124%; height: 148%;
  color: var(--rojo);
  overflow: visible;
  pointer-events: none;
}
.notiz--abzug {
  position: absolute; z-index: 2;
  right: 2%; bottom: -2.3em;
  font-size: clamp(30px, 2.8vw, 42px);
  rotate: -8deg;
}

/* ---------- 06 Visítanos ------------------------------------------ */

.besuch { padding: clamp(40px, 6vw, 110px) var(--rand) 0; overflow-x: clip; }
.besuch__titel {
  margin: clamp(18px, 2vw, 30px) 0 0;
  /* Hoehere Zeile als ueberall sonst: Der Akzent auf dem I ragt ueber die
     Grossbuchstaben, und die Maske der abgenutzten Farbe schneidet ab, was
     ausserhalb der Box liegt - bei 0,76 fehlte er. */
  padding-top: 0.14em;
  /* Gemessen (Textbreite, nicht Box): 3,79 Schriftgroessen. So gross, dass
     das Wort genau die Seite fuellt - ganz, mit dem S. Der fruehere Anschnitt
     am Rand sah aus wie ein Fehler. */
  font: 900 calc((100vw - 2 * var(--rand)) / 3.83)/0.76 var(--gross);
  text-transform: uppercase; color: var(--rojo);
  white-space: nowrap;
}

.besuch__raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalt); row-gap: 40px;
  margin-top: clamp(40px, 5vw, 70px);
}
.besuch__ort { grid-column: 1 / span 5; }
.besuch__zeiten { grid-column: 6 / span 3; }
.besuch__reservieren { grid-column: 9 / -1; }

.besuch__marke {
  margin: 0 0 14px; padding-top: 8px;
  border-top: 2px solid var(--tinta);
  font: 700 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rojo);
}
/* Die Adresse wie auf einem Schild: gross, schmal, zum Abschreiben */
.besuch__adresse {
  display: grid; justify-items: start; gap: 0.08em;
  font: normal 800 clamp(32px, 3.3vw, 50px)/0.95 var(--gross);
  text-transform: uppercase; letter-spacing: 0.01em;
}
.besuch__karte { margin: 16px 0 0; }
.besuch__marke--folgend { margin-top: clamp(30px, 3vw, 44px); }
.besuch__insta { margin: 0; }
.besuch__insta a, .besuch__telefon a {
  font: 800 clamp(24px, 2.2vw, 32px)/1 var(--gross);
  letter-spacing: 0.02em; text-decoration: underline;
  text-decoration-thickness: 2px; text-decoration-color: var(--rojo); text-underline-offset: 5px;
}
.besuch__insta a:hover, .besuch__telefon a:hover { color: var(--rojo); }
.besuch__text { margin: 0; }
.besuch__telefon { margin: 16px 0 0; }
.notiz--besuch { margin-top: 26px; }

.zeiten { width: 100%; border-collapse: collapse; }
.zeiten th, .zeiten td { padding: 8px 0; border-bottom: 1px dotted var(--tinta-suave); }
.zeiten th { text-align: left; font: 500 16px var(--serif); }
.zeiten td { text-align: right; font: 700 15px var(--mono); white-space: nowrap; }
.zeiten__zu td { color: var(--rojo); }

.foto--strasse {
  margin: clamp(60px, 8vw, 120px) calc(-1 * var(--rand)) 0;
}
.foto--strasse .foto__bild { aspect-ratio: 21 / 9; }

/* ---------- 07 Kolophon ------------------------------------------- */

.fuss {
  margin-top: clamp(100px, 12vw, 180px);
  padding: clamp(50px, 6vw, 90px) var(--rand) clamp(50px, 6vw, 90px);
  background: var(--rojo); color: var(--papel);
}
.kolophon {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--spalt); row-gap: 24px;
  margin: 26px 0 0;
}
.kolophon dt {
  font: 700 11.5px var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.kolophon dd { margin: 6px 0 0; font-size: 17px; line-height: 1.45; }
.fuss__links { display: flex; gap: 28px; margin-top: 36px; }
.fuss__links a {
  font: 700 13px var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  text-underline-offset: 4px;
}
/* ---------- Mittlere Breite --------------------------------------- */

@media (max-width: 1100px) {
  .kopf__ausgabe { display: none; }
  .kopf { grid-template-columns: auto 1fr auto; }
  .kopf__nav { justify-self: end; }
  .carta__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 50px; }
  .gang:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 40px); }
  .gang:nth-child(3) > * { grid-column: 1; }
  .gang:nth-child(3) > .gang__titel--folgend,
  .gang:nth-child(3) > .gang__titel--folgend ~ * { grid-column: 2; }
  .gang:nth-child(3) > .gang__titel--folgend { grid-row: 1; margin-top: 0; }
  .gang:nth-child(3) > .gang__titel--folgend ~ .gang__liste { grid-row: 2 / span 2; }
  .gang:nth-child(2) { padding-right: 0; }
}

/* ---------- Schmal: Tablet hochkant und Telefon ------------------- */

@media (max-width: 860px) {
  /* Zwei Zeilen, BARRIO links, COCINA rechts - COCINA ist das breitere (2,697) */
  :root { --marke: calc((100vw - 2 * var(--rand)) / 2.72); }

  .kopf { grid-template-columns: 1fr auto; row-gap: 10px; }
  .kopf__nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: space-between; }

  /* Der Schriftzug in zwei Zeilen: BARRIO / (Strich) COCINA, versetzt */
  .titel__marke { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.04em; }
  .titel__wort:first-child { flex-basis: 100%; }

  .titel__raster, .editorial, .rellenos, .besuch__raster { grid-template-columns: minmax(0, 1fr); }
  .titel__raster { grid-template-rows: none; }
  .foto--titel { grid-column: 1; grid-row: 1; margin: 0 calc(-1 * var(--rand)); }
  .foto--titel .foto__bild { height: auto; aspect-ratio: 1000 / 1236; }
  .themen { grid-column: 1; grid-row: 2; margin-top: 40px; }
  .notiz--titel { grid-column: 1; grid-row: 3; justify-self: end; margin-top: 18px; }
  .titel__aktion { grid-column: 1; grid-row: 4; margin-top: 26px; }
  .stempel { left: auto; right: 4%; top: calc(min(125vw, 900px) - 70px); bottom: auto; width: 116px; }

  .editorial > * { grid-column: 1 !important; grid-row: auto !important; }
  .editorial__text { columns: 1; }
  .foto--portraet { margin: 40px 0 0; width: 78%; justify-self: end; }
  .zitat { margin-left: 0; }

  .carta { padding: 48px 10px; }
  /* Keine Drehung: Das Blatt ist hier fuenfmal so hoch wie breit, und schon
     0,6 Grad schoben seine Ecken 50 px ueber den Bildschirmrand. */
  .carta__blatt { rotate: none; box-shadow: 7px 8px 0 rgba(23, 18, 14, 0.34); }
  .carta__kopf { grid-template-columns: 1fr; }
  .carta__spalten { grid-template-columns: 1fr; row-gap: 46px; }
  .gang, .gang:nth-child(n) { padding: 0; border-left: 0; display: block; }
  .gang__titel--folgend { margin-top: 46px !important; }

  .rellenos { padding: 100px var(--rand) 0; }
  .foto--rellenos { grid-column: 1; margin: 0 calc(-1 * var(--rand)); }
  .foto--rellenos .foto__bild { height: auto; aspect-ratio: 4 / 5; }
  .rellenos__text { grid-column: 1; padding: 0; }
  .rellenos__titel { margin-left: 0; }
  .schritte { grid-template-columns: 1fr; }

  .abzug__bilder {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 60px;
  }
  .abzug__bild { scroll-snap-align: center; }
  .abzug__rand { justify-content: space-between; gap: 1em; overflow: hidden; }

  .besuch__ort, .besuch__zeiten, .besuch__reservieren { grid-column: 1; }
  .foto--strasse .foto__bild { aspect-ratio: 900 / 671; }

  .kolophon { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .kopf__nav a { font-size: 11px; letter-spacing: 0.08em; }
  .titel__zeile > span:last-child { display: none; }
  .kolophon { grid-template-columns: 1fr; }
}

/* ---------- Impressum und Datenschutz ------------------------------ */

.kopf--schlicht { grid-template-columns: 1fr auto; }
.rechtlich {
  max-width: 760px; margin: 0 auto;
  padding: clamp(50px, 7vw, 100px) var(--rand) 120px;
}
.rechtlich__titel {
  margin: 0.35em 0 0.5em;
  /* Hier soll das Wort ganz stehen: DATENSCHUTZ ist 5,4 Schriftgroessen
     breit, die Spalte 760 px - bei 120 px passt es noch. */
  font: 900 clamp(56px, 9vw, 120px)/0.8 var(--gross);
  text-transform: uppercase; color: var(--rojo);
  -webkit-mask-image: url('../assets/abnutzung.png');
  mask-image: url('../assets/abnutzung.png');
  -webkit-mask-size: 480px; mask-size: 480px;
}
.rechtlich h2 {
  margin: 1.8em 0 0.4em;
  font: 800 24px/1.1 var(--gross); text-transform: uppercase;
}
.rechtlich p { margin: 0 0 1em; }