/* Pizzeria Draxler, Wildon
   Farben vom Haus: das Ockergelb der Fassade, das Rotbraun der Schriftzüge
   "PIZZERIA" und "CAFÉ". Georgia für Überschriften und Sortennamen, System-Sans
   für den Text. Keine Netz-Schriften, ein kleines Skript für die Fotoreihe. */

:root {
  --ocker: #e3a23a;
  --rotbraun: #6e2a1a;
  --rotbraun-tief: #4f1d12;
  --braun: #2a1610;
  --tinte: #1a1512;
  --leise: #5b4f42;
  --papier: #f6efe6;
  --papier-tief: #ebe2d4;
  --linie: #d6c9b4;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Stufen 1.25: 14 (Labels) / 17 / 21 / 26 / 33 / 42 */
  --t-klein: 0.875rem;
  --t-text: 1.0625rem;
  --t-1: 1.3125rem;
  --t-2: 1.625rem;
  --t-3: 2.0625rem;
  --t-4: 2.625rem;

  /* 4-px-Raster */
  --a1: 4px;
  --a2: 8px;
  --a3: 12px;
  --a4: 16px;
  --a6: 24px;
  --a8: 32px;
  --a12: 48px;
  --a16: 64px;

  --rand: 20px;
  --abschnitt: 48px;
  --blatt: 78vw;
}
@media (min-width: 600px)  { :root { --blatt: 42vw; } }
@media (min-width: 768px)  { :root { --rand: 32px; --t-text: 1.125rem; } }
@media (min-width: 900px)  { :root { --blatt: 30vw; } }
@media (min-width: 1024px) { :root { --abschnitt: 80px; } }
@media (min-width: 1120px) { :root { --rand: 48px; } }
@media (min-width: 1440px) { :root { --rand: 64px; --blatt: 23vw; } }
@media (min-width: 1920px) { :root { --rand: 96px; } }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 var(--t-text)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 2.2vw + 1rem, var(--t-4)); }
h2 { font-size: clamp(var(--t-2), 1.6vw + 1.1rem, var(--t-3)); }
h3 { font-size: var(--t-1); }

p { margin: 0; }
img { max-width: 100%; }

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

.sprung {
  position: absolute;
  left: var(--a2);
  top: -100px;
  z-index: 5;
  padding: var(--a2) var(--a3);
  background: var(--braun);
  color: var(--papier);
}
.sprung:focus { top: var(--a2); }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--rotbraun);
  outline-offset: 3px;
}

/* --- Der Tassenring: sitzt neben dem Schlüsselwort jeder Überschrift --------- */

.ring {
  position: relative;
  display: inline-block;
  padding-right: 0.62em;
  white-space: nowrap;
}
.ring::after {
  content: "";
  position: absolute;
  right: 0.04em;
  top: 0.2em;
  width: 0.42em;
  height: 0.42em;
  border: 2px solid var(--rotbraun);
  border-radius: 50%;
  transform: rotate(-12deg) scaleY(0.82);
}

/* Drei Dampffäden über dem Ring in der Hauptüberschrift; ohne Bewegung unsichtbar. */
.dampf {
  position: absolute;
  right: 0.06em;
  top: -0.14em;
  width: 0.42em;
  height: 0.3em;
  pointer-events: none;
}
.dampf i {
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 0.26em;
  border-radius: 1px;
  background: var(--rotbraun);
  opacity: 0;
}
.dampf i:nth-child(1) { left: 12%; }
.dampf i:nth-child(2) { left: 46%; }
.dampf i:nth-child(3) { left: 80%; }

/* --- Links -------------------------------------------------------------------- */

.faden {
  color: var(--rotbraun);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 1px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
}
@media (hover: hover) {
  .faden:hover { color: var(--rotbraun-tief); background-size: 100% 1px; }
}
.faden:focus-visible { background-size: 100% 1px; }

/* --- Anruf-Buttons: bewegen sich nie, wechseln nur die Farbe ------------------ */

.ruf {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  padding: var(--a3) var(--a4);
  background: var(--rotbraun);
  color: var(--papier);
  border: 2px solid var(--rotbraun);
  border-radius: 2px;
  font: 400 1rem/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.ruf__nummer { font-weight: 600; }
@media (hover: hover) {
  .ruf:hover { background: var(--rotbraun-tief); border-color: var(--rotbraun-tief); }
}
.ruf:focus-visible {
  background: var(--rotbraun-tief);
  border-color: var(--rotbraun-tief);
  outline-color: var(--braun);
}
.ruf--gross { min-height: 56px; padding: var(--a3) var(--a6); font-size: var(--t-text); }
.ruf--band  { min-height: 56px; padding: var(--a4) var(--a6); font-size: var(--t-1); }

/* --- Kopfband im Ockergelb der Fassade --------------------------------------- */

.kopf { background: var(--ocker); color: var(--braun); }
.kopf__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3);
  padding: var(--a3) var(--rand);
}
.schild {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--braun);
  text-decoration: none;
  font-family: var(--serif);
  line-height: 1.1;
}
.schild__zusatz { font-style: italic; font-size: 1rem; }
.schild__name {
  font-weight: 600;
  font-size: clamp(1.15rem, 1.4vw + 0.85rem, 1.75rem);
  letter-spacing: 0.01em;
}
.schild:focus-visible { outline-color: var(--braun); }
.ruf--kopf { flex: none; }
.ruf--kopf .ruf__wort { display: none; }
@media (min-width: 600px) {
  .kopf__reihe { padding-block: var(--a4); }
  .schild { flex-direction: row; align-items: baseline; gap: 0.35em; }
  .schild__zusatz { font-size: var(--t-1); }
  .ruf--kopf .ruf__wort { display: inline; }
}

/* --- Auftakt: was das Haus ist, wo es steht, der Anruf ----------------------- */

.auftakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a4);
  align-items: center;
  padding: var(--a6) var(--rand);
}
.ortszeile {
  margin-bottom: var(--a2);
  font-size: var(--t-klein);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leise);
}
.auftakt h1 { margin-bottom: var(--a3); }
.auftakt__satz {
  margin-bottom: var(--a4);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(var(--t-text), 0.8vw + 1rem, var(--t-1));
  line-height: 1.4;
}
.auftakt__tun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a3) var(--a6);
}
.auftakt__weiter { display: none; }
/* Drei Fakten vom Haus: am Handy ein Satz mit Beistrichen, ab 600px mit Trennlinien. */
.hausliste {
  margin: var(--a4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-klein);
  color: var(--leise);
}
.hausliste li { display: inline; }
.hausliste li:not(:last-child)::after { content: ","; }

.auftakt__foto { margin: 0; }
.auftakt__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  object-position: 50% 55%;
  border: 1px solid var(--braun);
}
.auftakt__foto figcaption,
.besuch__foto figcaption {
  padding-top: var(--a1);
  font-size: var(--t-klein);
  line-height: 1.5;
  color: var(--leise);
}
@media (min-width: 600px) {
  .auftakt { gap: var(--a8); padding-block: var(--a12); }
  .auftakt h1 { margin-bottom: var(--a4); }
  .auftakt__satz { margin-bottom: var(--a6); }
  .auftakt__weiter { display: inline; }
  .hausliste { display: flex; flex-wrap: wrap; margin-top: var(--a6); }
  .hausliste li {
    margin-right: var(--a3);
    padding-right: var(--a3);
    border-right: 1px solid var(--linie);
  }
  .hausliste li:last-child { margin-right: 0; padding-right: 0; border-right: 0; }
  .hausliste li:not(:last-child)::after { content: none; }
  .auftakt__foto img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
  .auftakt__foto figcaption, .besuch__foto figcaption { padding-top: var(--a2); }
}
@media (min-width: 900px) {
  .auftakt {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--a12);
    padding-block: var(--a16);
  }
}
/* Breite Fenster: Text und Foto teilen sich die Breite, damit die Mitte nicht leer bleibt. */
@media (min-width: 1440px) {
  .auftakt { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--a16); }
}

/* --- Abschnitte: ein Seitengrund, getrennt durch Linie und Luft -------------- */

.karte,
.woche,
.besuch {
  padding: var(--abschnitt) var(--rand);
  border-top: 1px solid var(--linie);
}
.randsatz {
  margin-top: var(--a2);
  font-family: var(--serif);
  font-style: italic;
  color: var(--leise);
}

/* --- Aus der Karte: Fotoreihe ------------------------------------------------- */

.karte__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--a4);
  margin-bottom: var(--a6);
}
.tasten { display: flex; gap: var(--a2); flex: none; }
.tasten[hidden] { display: none; }
.taste {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  color: var(--braun);
  border: 2px solid var(--braun);
  border-radius: 2px;
  cursor: pointer;
}
@media (hover: hover) {
  .taste:hover { background: var(--braun); color: var(--papier); }
}
.taste:focus-visible { background: var(--braun); color: var(--papier); }

.teller {
  display: flex;
  gap: var(--a4);
  margin-right: calc(-1 * var(--rand));
  padding-right: var(--rand);
  padding-bottom: var(--a3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--rotbraun) var(--papier-tief);
}
/* karte.js setzt diese Klasse zusammen mit den Tasten: dann keine Bildlaufleiste.
   Ohne Skript bleibt die Leiste des Browsers der Weg durch die Reihe. */
.teller--bereit {
  padding-bottom: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.teller--bereit::-webkit-scrollbar { display: none; width: 0; height: 0; }
.teller:focus-visible { outline: 3px solid var(--rotbraun); outline-offset: -3px; }

.teller__blatt {
  flex: 0 0 var(--blatt);
  width: var(--blatt);
  margin: 0;
  scroll-snap-align: start;
}
.teller__blatt img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--braun);
}
.teller__blatt img.mitte { object-position: 50% 66%; }
.teller__blatt figcaption {
  position: relative;
  padding: var(--a2) 0 0 1.7em;
  font-size: var(--t-klein);
  line-height: 1.5;
  color: var(--leise);
}
.teller__was { color: var(--tinte); font-weight: 600; }
/* Der kleine Ring vor jeder Bildunterschrift füllt sich wie eine Tasse. */
.teller__blatt figcaption::before,
.teller__blatt figcaption::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--a2) + 0.22em);
  width: 1em;
  height: 1em;
  border-radius: 50%;
}
.teller__blatt figcaption::before { border: 1.5px solid var(--rotbraun); }
.teller__blatt figcaption::after {
  background: var(--rotbraun);
  transform: scale(0.62);
  clip-path: inset(100% 0 0 0);
}
@media (hover: hover) {
  .teller__blatt:hover figcaption::after { clip-path: inset(0 0 0 0); }
}
.teller:focus-visible figcaption::after { clip-path: inset(0 0 0 0); }

/* --- Aus der Karte: Sorten und Speisen in ihren Worten ----------------------- */

.karte__listen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a8) var(--a12);
  margin-top: var(--a12);
}
@media (min-width: 900px) {
  .karte__listen { grid-template-columns: minmax(0, 5fr) minmax(0, 2fr); }
}
.karte__listen h3 {
  margin-bottom: var(--a2);
  padding-bottom: var(--a2);
  border-bottom: 1px solid var(--braun);
}
.sorten,
.posten {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--serif);
}
.sorten { columns: 2; column-gap: var(--a6); }
@media (min-width: 600px)  { .sorten { columns: 3; column-gap: var(--a8); } }
@media (min-width: 1280px) { .sorten { columns: 4; } }
.sorten li,
.posten li {
  padding: 6px 0;
  border-bottom: 1px solid var(--linie);
  break-inside: avoid;
}
.posten { margin-bottom: var(--a8); }
.posten:last-child { margin-bottom: 0; }
.steirisch { margin-top: var(--a6); max-width: 68ch; }
.steirisch strong { font-family: var(--serif); font-weight: 600; }

/* --- Die Woche am Platz ------------------------------------------------------- */

.woche__kopf { margin-bottom: var(--a6); }
.tage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--a2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag--so { grid-column: span 2; }
.tag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--a1);
  padding: var(--a4) 0 var(--a3);
}
.tag::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--rotbraun);
  transform-origin: 50% 0;
}
.tag__name {
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leise);
}
.tag__zeit {
  font-family: var(--serif);
  font-size: var(--t-1);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.tag--zu::before { background: var(--linie); }
.tag--zu .tag__zeit { font-size: var(--t-text); font-style: italic; color: var(--leise); line-height: 1.5; }
@media (hover: hover) {
  .tag:not(.tag--zu):hover::before { transform: scaleY(2.4); }
}
@media (min-width: 600px) {
  .tage { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--a3); }
  .tag--so { grid-column: auto; }
  .tag__zeit { font-size: var(--t-2); }
  .tag--zu .tag__zeit { font-size: var(--t-1); line-height: 1.6; }
}
.woche__fuss { margin-top: var(--a6); max-width: 68ch; color: var(--leise); }

/* --- Vorbeikommen ------------------------------------------------------------- */

.besuch {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a8);
}
@media (min-width: 900px) {
  .besuch {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--a12);
    align-items: start;
  }
}
.besuch__adresse {
  margin: var(--a4) 0;
  font-family: var(--serif);
  font-size: clamp(var(--t-1), 1.2vw + 1rem, var(--t-2));
  line-height: 1.25;
}
.besuch__adresse span { display: block; }
.besuch__weg { max-width: 40ch; margin-bottom: var(--a4); color: var(--leise); }
.besuch__draht { line-height: 2; }
.besuch__fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a4);
}
.besuch__foto { margin: 0; }
.besuch__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--braun);
}

/* --- Rufstreifen im Ockergelb, dann der Fuß ---------------------------------- */

.rufband { background: var(--ocker); color: var(--braun); }
.rufband__reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a4) var(--a8);
  padding: var(--a8) var(--rand);
}
.rufband__satz {
  font-family: var(--serif);
  font-size: clamp(var(--t-1), 1.4vw + 1rem, var(--t-2));
  line-height: 1.25;
  text-wrap: balance;
}

.fuss { padding: var(--a12) var(--rand) var(--a8); }
.fuss__spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--a6) var(--a8);
}
@media (min-width: 560px) { .fuss__spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 900px) { .fuss__spalten { grid-template-columns: 1.1fr 0.9fr 1.2fr 1.2fr; } }
.fuss__spalte p { font-size: 1rem; line-height: 1.6; }
.fuss__spalte .fuss__titel,
.fuss__recht {
  font-size: var(--t-klein);
  color: var(--leise);
}
.fuss__spalte .fuss__titel {
  margin-bottom: var(--a2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fuss__recht {
  margin-top: var(--a8);
  padding-top: var(--a4);
  border-top: 1px solid var(--linie);
  line-height: 1.6;
}

/* --- Bewegung: nur wenn sie erwünscht ist ------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .teller { scroll-behavior: smooth; }

  .faden { transition: background-size 180ms ease-out; }
  .teller__blatt figcaption::after { transition: clip-path 400ms ease-out; }
  .tag::before { transition: transform 300ms ease-out; }

  /* Einmal beim Laden, rund 1,5 s: die Tasse setzt auf, drei Dampffäden steigen. */
  .ring--setzt::after { animation: tasse-setzt-auf 700ms cubic-bezier(0.2, 0.7, 0.3, 1) 100ms both; }
  .dampf i { animation: dampf-steigt 700ms ease-out both; }
  .dampf i:nth-child(1) { animation-delay: 550ms; }
  .dampf i:nth-child(2) { animation-delay: 700ms; }
  .dampf i:nth-child(3) { animation-delay: 850ms; }

  @keyframes tasse-setzt-auf {
    from { opacity: 0; transform: rotate(-70deg) scale(1.6, 1.3); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: rotate(-12deg) scaleY(0.82); }
  }
  @keyframes dampf-steigt {
    0%   { opacity: 0; transform: translateY(0) scaleY(0.6); }
    35%  { opacity: 0.75; }
    100% { opacity: 0; transform: translateY(-0.5em) scaleY(1.3); }
  }
}