@charset "UTF-8";
/* ==========================================================================
   Restaurant Mediteran, Hagen — Stilblatt
   ==========================================================================
   Uebernommen aus dem Webelux-Websitebuilder, Kategorie Gastronomie
   (branchen/gastronomie/assets/css/main.css), und mit _tools/css-anpassen.py
   auf diesen Betrieb zugeschnitten.  Dort steht Eingriff fuer Eingriff, was
   sich gegenueber der Vorlage geaendert hat.

   Der wichtigste Unterschied betrifft die Medien.  Die Vorlage stellt ihre
   Motive per mix-blend-mode auf schwarzem Grund frei und passt sie mit
   object-fit: contain in feste Kaesten ein; wo das nicht aufgeht, bleiben
   schwarze Raender stehen.  Hier bringt jedes Medium sein eigenes
   Seitenverhaeltnis mit (--ar) und fuellt seinen Kasten mit cover.  Weder
   Mischmodus noch Maske, und rechnerisch kein Balken.
   ========================================================================== */

/* ---------- Fonts: Xenon Nue ---------- */
@font-face {
  font-family: 'Xenon Nue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/xenon-nue-regular.woff2?v=4f174ea9') format('woff2');
}
@font-face {
  font-family: 'Xenon Nue';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/xenon-nue-medium.woff2?v=030a063a') format('woff2');
}
@font-face {
  font-family: 'Xenon Nue';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/xenon-nue-semibold.woff2?v=daf005cf') format('woff2');
}
@font-face {
  font-family: 'Xenon Nue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/xenon-nue-bold.woff2?v=8385d3df') format('woff2');
}
@font-face {
  font-family: 'Xenon Nue';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/xenon-nue-extrabold.woff2?v=be4d1dba') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --bg: #070a10;
  --bg-2: #0b1017;
  --bg-3: #10161f;
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);

  --text: #eef2f7;
  --text-2: #a7b2c2;
  --text-3: #6f7b8c;

  --accent: #3b82f6;
  --accent-2: #60a5fa;
  --accent-3: #1d4ed8;
  --accent-soft: rgb(var(--accent-rgb) / .13);
  --accent-glow: rgb(var(--accent-rgb) / .35);

  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;

  --shell: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(4.5rem, 10vw, 8rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  --shadow-accent: 0 18px 46px -16px rgb(var(--accent-rgb) / .55);

  /* Glaskanten nach Vorbild der Vorlage: heller Lichtsaum oben, Tiefe unten */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 100%);
  --glass-edge:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    0 10px 30px -18px rgba(0, 0, 0, .9);


  /* --- Kanaltripel: erlauben rgb(var(--x) / alpha) und machen damit jede
     themenabhaengige Klartextfarbe ausserhalb von :root ueberfluessig. --- */
  --bg-rgb: 7 10 16;                /* Kopfleiste, Heroschleier, Mobilnavigation */
  --bg-deep: #05070b;               /* Grund hinter dem Herovideo, dunkler als --bg */
  --accent-rgb: 59 130 246;         /* Knopfschatten, Kartenverlaeufe, Lichtschein */
  --accent-2-rgb: 96 165 250;       /* helle Akzentkante im Logoeffekt */
  --surface-opaque-rgb: 20 27 38;   /* deckende Flaechen unter 1024px */

  /* Lichtfarben des Logoeffekts. Sie sind bewusst einzeln gefuehrt und nicht
     zusammengelegt: es sind Verlaufsstufen, die aufeinander abgestimmt sind. */
  --fx-beam: 224 242 255;           /* Kern des wandernden Lichtbands */
  --fx-core: 233 245 255;           /* Kern des Kopfaufleuchtens */
  --fx-core-2: 137 196 255;         /* Mittelstufe desselben Verlaufs */
  --fx-halo: 160 205 255;           /* Lichthof um den Kopf */

  /* Schriftfarbe auf dem Akzentknopf -- als Token gefuehrt, weil Weiss
     darauf nicht die lesbarere Wahl ist. Nachgerechnet auf dem Terrakotta
     Weinrot #b22f42 vom Dateiende: Weiss ergibt darauf 6.22:1 und ist
     damit die klar bessere Wahl. (Auf dem frueheren Terrakotta #df5400
     war es umgekehrt -- dort kam Weiss nur auf 3.88:1.) Der Wert hier
     gilt ohnehin nur, bis der Farbblock am Dateiende ihn ersetzt. */
  --btn-ink: #fff;

  --font: 'Xenon Nue', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  overflow-x: clip;
}

body {
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--accent); color: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4.6rem); font-weight: 800; letter-spacing: -.04em; }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3.1rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.06rem, .99rem + .38vw, 1.28rem);
  color: var(--text-2);
  line-height: 1.65;
  max-width: 60ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.grad {
  background: linear-gradient(105deg, #fff 20%, var(--accent-2) 62%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
/* Video schliesst unmittelbar an den Seiten-Hero an */
.section--hero-video { padding-top: 0; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head p { margin-top: 1.15rem; }

.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: .8rem 1.2rem;
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 var(--radius-s) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgb(var(--bg-rgb) / .82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 88px;
}

.brand { display: inline-flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.brand picture { display: flex; flex-shrink: 0; }
.brand__mark { width: 56px; height: auto; transition: transform .3s var(--ease); }
.brand:hover .brand__mark { transform: scale(1.04); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-size: 1.32rem; font-weight: 700; letter-spacing: -.03em; }
/* Hervorgehobene Silbe der Wortmarke */
.brand__akzent { color: var(--accent-2); }
.brand__sub {
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: .34rem;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .1rem; }
.nav__cta { display: none; }
.nav__link {
  position: relative;
  display: block;
  padding: .55rem .78rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  border-radius: var(--radius-s);
  transition: color .22s, background .22s;
}
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link[aria-current='page'] { color: var(--text); }
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: .78rem;
  right: .78rem;
  bottom: .28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.header__cta { margin-left: .6rem; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-s);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span + span { margin-top: 4.5px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.1px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.1px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--btn-solid, var(--accent));
  --btn-fg: var(--btn-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
    background .25s, border-color .25s, color .25s;
  box-shadow: var(--shadow-accent);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 22px 54px -14px rgb(var(--accent-rgb) / .7); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-2);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: none;
}
.btn--sm { padding: .6rem 1.15rem; font-size: .88rem; }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.02rem; }

/* Volle Breite ist auf schmalen Displays gutes Tap-Target-Design,
   auf dem Desktop wirkt ein 830px breiter Knopf dagegen unruhig. */
.btn--block { width: 100%; }
@media (min-width: 700px) {
  .btn--block { width: auto; }
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94svh, 940px);
  padding-top: 7.5rem;
  padding-bottom: clamp(6.75rem, 8vw, 8.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--bg-deep);
}
.hero__media img, .hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
/* Erst einblenden, wenn wirklich Bilder laufen - sonst kurzer Schwarzblitz */
.hero__media.is-playing video { opacity: 1; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(125% 95% at 20% 14%, rgb(var(--bg-rgb) / .30) 0%, rgb(var(--bg-rgb) / .74) 58%, rgb(var(--bg-rgb) / .95) 100%),
    linear-gradient(180deg, rgb(var(--bg-rgb) / .62) 0%, rgb(var(--bg-rgb) / .22) 32%, rgb(var(--bg-rgb) / .78) 80%, var(--bg) 100%);
}
.hero__inner { position: relative; width: 100%; }
.hero__content { max-width: 52rem; }
.hero h1 { margin-bottom: 1.35rem; max-width: 20ch; }
.hero .lead { max-width: 40rem; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .42rem 1rem .42rem .55rem;
  margin-bottom: 1.6rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.hero__badge b { color: var(--text); font-weight: 600; }
.dot {
  width: 7px; height: 7px;
  margin-left: .35rem;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
}

/* Hero-Leistungen — bewusst ohne Kacheln:
   keine Flaeche, kein Rahmen, kein Schatten pro Eintrag,
   nur Icon, Titel, Kurztext und feine Trennlinien dazwischen. */
.hero__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2.25rem, 5vw, 3rem);
  max-width: 62rem;
}
.hero__mail { margin-top: 2rem; }

.svclink {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: .15rem 1.4rem;
  min-width: 0;
  color: inherit;
}
.svclink:first-child { padding-left: 0; }
.svclink:last-child { padding-right: 0; }

/* senkrechte Haarlinie als Trenner statt Kachelkante */
.svclink::before {
  content: '';
  position: absolute;
  left: 0;
  top: .1rem;
  bottom: .1rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.svclink:first-child::before { content: none; }

.svclink__icon {
  color: var(--accent-2);
  transition: transform .35s var(--ease);
}
.svclink__icon svg { display: block; width: 24px; height: 24px; }

.svclink__title {
  position: relative;
  display: inline-block;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.02em;
  transition: color .3s;
}
.svclink__title::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -.28rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.svclink__desc {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-3);
}
/* Nur fuer die Handyansicht gedacht: dort ersetzt der Hinweis den
   ausgeblendeten Beschreibungstext und macht sichtbar, dass die Zeile
   auf die Leistungsseite fuehrt. Am Desktop uebernimmt das die
   Unterstreichung beim Ueberfahren, deshalb hier ausgeblendet. */
.svclink__more { display: none; }
.svclink:hover .svclink__title,
.svclink:focus-visible .svclink__title { color: var(--accent-2); }
.svclink:hover .svclink__title::after,
.svclink:focus-visible .svclink__title::after { transform: scaleX(1); }
.svclink:hover .svclink__icon { transform: translateY(-3px); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.9rem;
  transform: translateX(-50%);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}
.scroll-hint i {
  width: 1px; height: 34px;
  background: linear-gradient(var(--accent), transparent);
  animation: drop 2.2s var(--ease) infinite;
}
@media (max-height: 780px) { .scroll-hint { display: none; } }
@keyframes drop {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .3; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* ---------- Page hero (sub pages) ---------- */
.phero {
  position: relative;
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.phero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -30%; left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 62%);
  opacity: .5;
  filter: blur(30px);
}
.phero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
/* Seiten ohne Hero-Bild: zentrierter, einspaltiger Textblock */
.phero__grid--text-only {
  grid-template-columns: 1fr;
  max-width: 54rem;
  text-align: center;
}
.phero__grid--text-only .eyebrow::before { display: none; }
.phero__grid--text-only .lead { margin-inline: auto; }
.phero__grid--text-only .cta__actions { justify-content: center; }
.phero__visual {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--bg-2);
}
.phero__visual img { width: 100%; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--surface);
  background-image: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-edge);
  transition: transform .35s var(--ease), border-color .3s, background .3s, box-shadow .35s var(--ease);
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  background: var(--surface-2);
  box-shadow: var(--glass-edge), 0 26px 50px -28px rgba(0, 0, 0, .95);
}
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--text-2); font-size: .95rem; }
.card p a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.card p a:hover { color: var(--text); }
.card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-2);
  margin-bottom: 1.25rem;
}
.card__icon svg { width: 22px; height: 22px; }
.card--link { cursor: pointer; }
.card--link .card__more {
  margin-top: 1.35rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: gap .25s var(--ease);
}
.card--link:hover .card__more { gap: .68rem; }

/* Sanfter Akzentverlauf statt eigener Kachelfarbe - liegt in der CSS-Datei
   und nicht im style-Attribut, damit die Handy-Ansicht ihn abschalten kann. */
.card--accent { background-image: linear-gradient(160deg, rgb(var(--accent-rgb) / .16), transparent 65%); }

.card--feature { padding: 0; }
.card--feature .card__body { padding: clamp(1.5rem, 2.6vw, 2rem); }
.card--feature figure { background: var(--bg-3); border-bottom: 1px solid var(--line); }

/* Bullet list */
.checks { display: grid; gap: .85rem; }
.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .8rem;
  align-items: start;
  color: var(--text-2);
  font-size: .97rem;
}
.checks svg { width: 22px; height: 22px; color: var(--accent); margin-top: .18rem; }
.checks b { color: var(--text); font-weight: 600; }

/* Steps */
.steps { counter-reset: s; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { counter-increment: s; padding: clamp(1.5rem, 2.6vw, 2rem); background: var(--bg-2); transition: background .3s; }
.step:hover { background: var(--bg-3); }
.step::before {
  content: counter(s, decimal-leading-zero);
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: .9rem;
}
.step h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.step p { font-size: .92rem; color: var(--text-3); }

/* ---------- Zahlenreihe ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.stat {
  text-align: center;
  padding: 1.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  background-image: var(--glass);
  box-shadow: var(--glass-edge);
}
.stat b { display: block; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; color: var(--text); line-height: 1.05; }
.stat span { font-size: .82rem; color: var(--text-3); }

/* Split section */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
/* Abschnitte ohne Bild: eine zentrierte Spalte, Liste zweispaltig */
.split--text-only {
  grid-template-columns: 1fr;
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}
.split--text-only .eyebrow::before { display: none; }
.split--text-only .lead { margin-inline: auto; }
.split--text-only .checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .95rem clamp(1.5rem, 3vw, 2.5rem);
  max-width: 48rem;
  margin-inline: auto;
  text-align: left;
}
.split--rev .split__media { order: -1; }
.split__media {
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--bg-3);
}

/* Accordion / FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-size: 1.03rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-2); }
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq p { padding-bottom: 1.5rem; color: var(--text-2); max-width: 72ch; font-size: .97rem; }

/* Price cards */
.price { display: flex; flex-direction: column; }
.price__tag { font-size: .82rem; color: var(--text-3); margin-bottom: .35rem; }
.price__amount { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -.04em; margin-bottom: 1.2rem; }
.price__amount small { font-size: .95rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.price .btn { margin-top: auto; }
.price ul { margin-bottom: 1.6rem; }

.badge {
  display: inline-block;
  padding: .28rem .7rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-soft);
  border-radius: 999px;
}

/* Einzugsgebiet: Ortsliste als ruhige Marken, nach Naehe gruppiert */
.places__title {
  margin: 1.6rem 0 .7rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.places {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.places li {
  padding: .3rem .68rem;
  font-size: .82rem;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ---------- CTA band ---------- */
.cta {
  position: relative;
  padding: clamp(3rem, 6vw, 4.75rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 12% 0%, rgb(var(--accent-rgb) / .22) 0%, transparent 58%),
    linear-gradient(160deg, var(--bg-3), var(--bg-2));
  overflow: hidden;
  text-align: center;
}
.cta h2 { margin-bottom: 1rem; }
.cta p { margin-inline: auto; margin-bottom: 2rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* ---------- Form ---------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .5rem; }
.field label { font-size: .86rem; font-weight: 600; color: var(--text-2); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .82rem 1rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text);
  font-size: .96rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field select { appearance: none; cursor: pointer; background-image: none; }
.field select option { background: var(--bg-2); color: var(--text); }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: .75rem; align-items: start; font-size: .86rem; color: var(--text-3); }
.consent input { width: 18px; height: 18px; margin-top: .18rem; accent-color: var(--accent); }
.consent a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.contact-list { display: grid; gap: 1.5rem; }
.contact-item { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.contact-item .card__icon { width: 44px; height: 44px; margin: 0; }
.contact-item b { display: block; font-size: .95rem; margin-bottom: .15rem; }
.contact-item span, .contact-item a { color: var(--text-2); font-size: .93rem; }
.contact-item a:hover { color: var(--accent-2); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); margin-bottom: 3rem; }
.footer__brand p { color: var(--text-3); font-size: .92rem; margin-top: 1.1rem; max-width: 34ch; }
/* Anschrift in der Fusszeile: einheitliche Angabe auf allen Seiten,
   wichtiges Signal fuer die lokale Google-Suche. */
.footer__nap {
  font-style: normal;
  color: var(--text-2);
  font-size: .92rem;
  line-height: 1.75;
  margin-top: 1.1rem;
}
.footer__nap strong { color: var(--text); font-weight: 600; }
.footer__brand .footer__area {
  color: var(--text-3);
  font-size: .84rem;
  line-height: 1.7;
  margin-top: .9rem;
  max-width: 42ch;
}
.footer h4 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.1rem; font-weight: 600; }
.footer li + li { margin-top: .65rem; }
.footer a { color: var(--text-2); font-size: .93rem; transition: color .2s; }
.footer a:hover { color: var(--accent-2); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--text-3);
}
.footer__bottom nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- Videoblock ----------
   Die Vorlage stellte hier ein Motiv per mix-blend-mode: lighten von einem
   eingebackenen schwarzen Grund frei. Der Trick setzt voraus, dass der
   Grund pixelgenau zur Seitenfarbe passt -- was Videokompression nicht
   garantieren kann, und was jede Maske aushebelt, die den Mischmodus
   zurueckstellt. Uebrig blieb dann ein schwarzes Rechteck um das Motiv.

   Hier zeigen die Aufnahmen keine freigestellten Objekte, sondern volle
   Bilder: Steak in der Pfanne, Gastraum, Gemuese ueber der Flamme. Sie
   brauchen keinen Grund, der verschwinden muss. Der Kasten bekommt das
   Verhaeltnis der Datei (--ar), das Video fuellt ihn mit cover. Kein
   Mischmodus, keine Maske, und keine Kante, an der etwas stehen bleiben
   koennte.

   Der Wechsel Standbild -> Video passiert INNERHALB dieses Elements, damit
   nicht beide gleichzeitig durchscheinen. */
.videoblock {
  position: relative;
  /* Das Verhaeltnis bringt jedes Medium selbst mit, als blanke Zahl.
     Es ist exakt das Verhaeltnis, auf das medien-build.py die Datei
     zugeschnitten hat -- deshalb deckt cover den Kasten immer voll ab,
     ohne etwas wegzuschneiden. */
  aspect-ratio: var(--ar, 1.5);
  width: 100%;
  max-width: var(--vb-w, 54rem);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--bg-2);
}
.videoblock > picture,
.videoblock > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.videoblock video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.videoblock.is-playing video { opacity: 1; }
/* Wenn der Browser Autostart verweigert (z. B. iOS Stromsparmodus) */
.videoblock.is-blocked::before,
.hero__media.is-blocked::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.videoblock--wide { grid-column: 1 / -1; }
.video-caption {
  margin-top: 1rem;
  font-size: .87rem;
  color: var(--text-3);
  text-align: center;
}

/* ---------- Reveal animation ---------- */
/* Nur wenn JS aktiv ist ausblenden - ohne JS bleibt alles sichtbar. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-d='1'] { transition-delay: .07s; }
.js .reveal[data-d='2'] { transition-delay: .14s; }
.js .reveal[data-d='3'] { transition-delay: .21s; }
.js .reveal[data-d='4'] { transition-delay: .28s; }

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.75rem; }
.mt-3 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--text-3); }
.small { font-size: .87rem; }
.glow-bg { position: relative; isolation: isolate; overflow: hidden; }
.glow-bg::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 8%; left: 50%;
  width: min(900px, 120vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgb(var(--accent-rgb) / .17) 0%, transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}

.prose h2 { margin-top: 2.75rem; margin-bottom: .9rem; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.65rem); }
.prose h3 { margin-top: 1.9rem; margin-bottom: .6rem; font-size: 1.06rem; }
.prose p, .prose li { color: var(--text-2); font-size: .96rem; }
.prose p + p { margin-top: .9rem; }
.prose ul { margin-top: .8rem; display: grid; gap: .5rem; }
.prose li { padding-left: 1.1rem; position: relative; }
.prose li::before { content: '\002013'; position: absolute; left: 0; color: var(--accent); }
.prose a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.prose > :first-child { margin-top: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  /* Zwischen 960 und 1080 px muessen 6 Links plus zwei Knoepfe in die
     Kopfleiste passen - dort wird enger geschnuert statt umgebrochen. */
  .header__inner { gap: .75rem; }
  .nav__link { padding-inline: .5rem; font-size: .88rem; }
  .nav__link[aria-current='page']::after { left: .5rem; right: .5rem; }
  .header__cta { margin-left: .25rem; padding-inline: .95rem; }

  /* Leistungs-Reihe zweispaltig: Trenner nur dort, wo sie Sinn ergeben */
  .hero__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; }
  .svclink { padding: 1.15rem 1.4rem; }
  .svclink:nth-child(odd) { padding-left: 0; }
  .svclink:nth-child(even) { padding-right: 0; }
  .svclink:nth-child(odd)::before { content: none; }
  .svclink:nth-child(-n+2) { padding-top: 0; }
  .svclink:nth-child(n+3)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: var(--line);
  }
}

@media (max-width: 960px) {
  html { scroll-padding-top: 88px; }
  .header__inner { min-height: 76px; }
  .burger { display: flex; }
  .header__cta { display: none; }
  .brand__mark { width: 48px; }
  .brand__name { font-size: 1.2rem; }

  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    margin: 0;
    padding: 1rem var(--gutter) 1.75rem;
    background: rgb(var(--bg-rgb) / .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    max-height: calc(100svh - 76px);
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__link { padding: .85rem .75rem; font-size: 1rem; border-radius: var(--radius-s); }
  .nav__link[aria-current='page']::after { display: none; }
  .nav__link[aria-current='page'] { background: var(--accent-soft); color: var(--accent-2); }
  .nav__cta { display: block; margin-top: .85rem; }
  .nav__cta .btn { width: 100%; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .phero__grid { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: auto; padding-top: 7.5rem; }
}

@media (max-width: 720px) {
  /* Kopfbereich am Telefon: nebeneinander statt uebereinander
     ------------------------------------------------------------------
     Auf dem Rechner liegt die Schrift IM Bild -- dort ist rechts neben
     dem Steak genug ruhige Flaeche dafuer. Im Hochformat gibt es diese
     Flaeche nicht: das Bild fuellt die ganze Breite, und die Zeile
     kaeme ueber brutzelndes Fett zu liegen. Weiss auf einem bewegten,
     stellenweise fast weissen Grund ist weder lesbar noch messbar --
     der Kontrast wechselt mit jedem Bild.

     Deshalb hier zwei klar getrennte Zonen: oben das Bild ueber die
     volle Breite, darunter die Schrift auf ruhigem Grund. Der Verlauf
     an der Unterkante fuehrt beide zusammen, damit es eine Komposition
     bleibt und nicht zwei gestapelte Kaesten. */
  .hero {
    display: block;
    min-height: 0;
    padding-top: 0;
    padding-bottom: clamp(2.75rem, 9vw, 3.75rem);
  }
  .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    /* Etwas flacher als die Aufnahme selbst (900x1200 sind 3:4). cover
       nimmt oben und unten je gut drei Prozent weg -- das Steak sitzt in
       der Mitte, es fehlt nichts. Dafuer beginnt der Text 33 Punkte
       frueher, und der erste Knopf steht auch dann noch im Bild, wenn
       das Telefon seine Adressleiste zeigt. Balken kann es nicht geben:
       der Kasten wird gefuellt, nicht eingepasst. Hochkant bleibt es --
       daran erkennt main.js, dass die hochkante Fassung gemeint ist. */
    aspect-ratio: 4 / 5;
  }
  /* Der Schleier des Rechners lag ueber der ganzen Sektion. Hier gehoert
     er ins Bild und hat zwei Aufgaben: oben den Kopf lesbar halten,
     solange er noch durchsichtig ueber dem Bild liegt, unten in den
     Textgrund ueberleiten. */
  .hero::before { content: none; }
  .hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgb(var(--bg-rgb) / .82) 0%, rgb(var(--bg-rgb) / .34) 20%, rgb(var(--bg-rgb) / 0) 40%),
      linear-gradient(0deg, var(--bg) 0%, rgb(var(--bg-rgb) / .58) 16%, rgb(var(--bg-rgb) / 0) 38%);
    pointer-events: none;
  }
  /* Die Schrift rutscht in die ausgeblendete Unterkante hinein. Dort ist
     der Grund bereits voll deckend, der Abstand wirkt aber nicht wie eine
     Fuge zwischen zwei Bloecken. Je breiter das Telefon, desto hoeher das
     Bild und desto tiefer darf die Schrift hineinreichen. */
  .hero__inner { margin-top: clamp(-3.5rem, -12vw, -3rem); }
  .hero__content, .hero h1, .hero .lead { max-width: none; }
  /* Zeigt auf dem Rechner an den unteren Rand der Sektion. Der liegt hier
     hinter dem Text, nicht mehr am Bild. */
  .scroll-hint { display: none; }

  /* Leistungen einspaltig: kompakte Zeilen mit waagerechten Trennlinien */
  .hero__actions { grid-template-columns: 1fr; max-width: 30rem; }
  .hero__actions .svclink {
    flex-direction: row;
    align-items: center;
    gap: .95rem;
    padding: .95rem 0;
  }
  .svclink::before { content: none; }
  .svclink:nth-child(n+2)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: var(--line);
  }
  .hero__actions .svclink:first-child { padding-top: 0; }
  .svclink__desc { display: none; }
  .svclink__icon svg { width: 22px; height: 22px; }

  /* „Mehr erfahren" rechts in der Zeile. Es liegt innerhalb desselben
     <a>, ist also mit angetippt - kein zweites Ziel, das den Finger
     teilt. Der Titel schiebt es per margin-left:auto nach rechts,
     statt selbst zu wachsen; sonst zoege die Unterstreichung aus
     .svclink__title::after ueber die ganze Zeilenbreite. */
  .hero__actions .svclink__title { margin-right: auto; }
  .hero__actions .svclink__more {
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    flex: 0 0 auto;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--accent-2);
    white-space: nowrap;
  }
  .hero__actions .svclink__more::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 1.7px solid currentColor;
    border-right: 1.7px solid currentColor;
    transform: rotate(45deg);
    transition: transform .3s var(--ease);
  }
  .hero__actions .svclink:active .svclink__more::after { transform: rotate(45deg) translate(2px, -2px); }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  /* Leistungen auf dem Handy: zwei je Reihe, ohne Kacheloptik.
     Statt fuenf hohen Karten untereinander (2000 px Scrollweg) ein
     kompaktes Raster aus Symbol und Bezeichnung - auf einen Blick
     erfassbar. Das Symbol traegt hier die Bedeutung, deshalb ist es
     groesser als am Rechner; die Beschreibungstexte stehen weiterhin
     im Quelltext und auf der jeweiligen Leistungsseite. */
  .svcgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .svcgrid .card {
    padding: 1.4rem .7rem 1.3rem;
    align-items: center;
    text-align: center;
    background: none;
    background-image: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .svcgrid .card:nth-child(odd) { border-right: 1px solid var(--line); }
  .svcgrid .card:hover,
  .svcgrid .card:active {
    transform: none;
    background: none;
    box-shadow: none;
    border-color: var(--line);
  }
  .svcgrid .card__icon {
    width: 56px; height: 56px;
    border-radius: 17px;
    margin-bottom: .85rem;
  }
  .svcgrid .card__icon svg { width: 28px; height: 28px; }
  .svcgrid .card h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
  .svcgrid .card p,
  .svcgrid .card__more { display: none; }
  .split--text-only .checks { grid-template-columns: 1fr; }
  /* Einzugsgebiet auf kleinen Displays kompakter, damit die Liste
     trotz der vielen Orte auf einen Blick erfassbar bleibt */
  .places { gap: .38rem; }
  .places li { padding: .26rem .58rem; font-size: .76rem; }
  .places__title { margin: 1.3rem 0 .55rem; }
  .steps--4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }

  /* Fusszeile kompakt: die drei Linkspalten stehen nebeneinander statt
     als ein langer Stapel. „Leistungen“ hat fuenf Eintraege und laeuft
     deshalb ueber beide Zeilen, rechts daneben „Unternehmen“ und
     darunter „Direkt“ - kein leeres Feld, kein unnoetiger Scrollweg.
     Aufbau damit so nah wie moeglich an der Rechner-Ansicht. */
  .footer { padding-block: 2.8rem 1.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.9rem 1.2rem; margin-bottom: 1.9rem; }
  .footer__col--svc { grid-column: 1; grid-row: 2 / span 2; }
  .footer__col--co { grid-column: 2; grid-row: 2; }
  .footer__col--dir { grid-column: 2; grid-row: 3; }
  .footer__brand p { margin-top: .85rem; }
  .footer__nap { margin-top: .9rem; line-height: 1.65; }
  .footer__brand .footer__area { margin-top: .75rem; line-height: 1.6; }
  .footer h4 { margin-bottom: .75rem; }
  .footer li + li { margin-top: .5rem; }
  .footer__bottom { padding-top: 1.4rem; }

  .scroll-hint { display: none; }
  .cta__actions .btn { width: 100%; }

}

@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .brand__sub { display: none; }
}

/* ---------- Motion / contrast preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Performance auf Handy und Tablet
   backdrop-filter ueber laufendem Video kostet auf mobilen GPUs sehr viel
   Rechenzeit und laesst das Video ruckeln. Deshalb dort deckende Flaechen.
   ========================================================================== */
@media (max-width: 1024px) {
  .tile,
  .hero__badge,
  .btn--ghost,
  .videoblock.is-blocked::before,
  .hero__media.is-blocked::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .tile { background: rgb(var(--surface-opaque-rgb) / .92); }
  .hero__badge { background: rgb(var(--surface-opaque-rgb) / .92); }
  .btn--ghost { background: rgb(var(--surface-opaque-rgb) / .55); }

  /* Blur-Flaechen im Hintergrund sind auf Mobilgeraeten teuer */
  .glow-bg::before,
  .phero::before { filter: none; }
}

/* Video niemals Scrollen blockieren lassen */
.hero__media video,
.videoblock video { pointer-events: none; }

/* Offenes Menue: Hintergrund nicht mitscrollen */
body.nav-open { overflow: hidden; }

@media print {
  .header, .footer, .hero__media, .scroll-hint, .btn, .videoblock { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   Farben des Hauses
   ==========================================================================
   Der Baukasten bot fuenf Farbstellungen zur Auswahl und schaltete sie ueber
   ein Attribut auf <html> um. Hier ist eine davon gesetzt und die anderen
   vier sind entfernt: Terrakotta, die Farbe von Glut und gebratenem Fleisch.

   Der Block steht bewusst am Dateiende und nicht oben im ersten :root. Beide
   haben dieselbe Spezifitaet, also gewinnt der spaetere -- er ueberschreibt
   vom Grundgeruest genau die Werte, die Farbe tragen, und laesst Abstaende,
   Radien und Schatten unberuehrt. Die abgeleiteten Token (--accent-soft,
   --accent-glow, --shadow-accent) rechnen sich von selbst mit, weil sie ueber
   var(--accent-rgb) formuliert sind und Custom Properties erst beim Gebrauch
   eingesetzt werden.
   ========================================================================== */

:root {
  --bg-deep: #0a0605;
  --bg: #0f0806;
  --bg-2: #160d0b;
  --bg-3: #1e130f;
  --bg-rgb: 15 8 6;
  --surface-opaque-rgb: 36 23 19;

  --text: #f6f0ee;
  --text-2: #c0aca6;
  --text-3: #937e77;

  /* Weinrot statt Terrakotta. Nur der Akzent wechselt -- Grund, Flaechen
     und die weisse Schrift bleiben unberuehrt.

     Echtes Bordeaux (#722F37 und dunkler) waere auf diesem fast schwarzen
     Grund nicht mehr zu sehen: es kaeme auf 1,9:1. Die Werte hier sind
     deshalb angehobene Weinroene -- nachgerechnet gegen --bg #0f0806:

       --accent   #b22f42   3,19:1  Flaechen, Haken, Sterne, Anfuehrungs-
                                    zeichen. Ueber der 3:1-Schwelle, die
                                    fuer Nicht-Text und grosse Schrift gilt.
       --accent-2 #cf5165   4,74:1  Verweise und Akzentworte, also kleine
                                    Schrift. Ueber der AA-Schwelle 4,5:1.

     Auf dem Knopf kehrt sich das Verhaeltnis um: Weiss auf #b22f42 ergibt
     6,22:1 (auf dem alten Terrakotta waren es nur 3,88:1, weshalb dort
     dunkle Tinte stand). --btn-ink wechselt deshalb mit auf Weiss. */
  --accent: #b22f42;
  --accent-2: #cf5165;
  --accent-3: #7c1b2a;
  --accent-rgb: 178 47 66;
  --accent-2-rgb: 207 81 101;
  --btn-ink: #ffffff;

  /* Die Lichteffekte um Kopf und Wortmarke tragen dieselbe Familie --
     sonst leuchtete Orange in eine weinrote Seite hinein. */
  --fx-beam: 255 232 237;
  --fx-core: 255 241 244;
  --fx-core-2: 244 160 176;
  --fx-halo: 240 170 186;
}

/* Bausteine fuer die Inhaltsseiten
   ==========================================================================
   Bildblock mit Unterschrift, Galerie, Preisliste, Oeffnungszeiten,
   Wortmarke. Diese Regeln stammen aus dem Anbau, den der Websitebuilder
   den Branchenseiten mitgibt; sie stehen bewusst hinter dem Grundgeruest,
   damit sie es ergaenzen statt es zu ueberschreiben.
   ========================================================================== */


/* ---------- Bildblock mit Unterschrift ----------
   .split__media aus der Basis waere der naheliegende Platz fuer ein Foto,
   bringt aber ein eigenes Raster fuer Text daneben mit. .motiv traegt nur
   Bild und Unterschrift und laesst sich deshalb ueberall einsetzen, auch
   allein in einer Sektion. */
.motiv {
  display: grid;
  gap: 1.05rem;
  width: 100%;
  max-width: var(--vb-w, 54rem);
  margin-inline: auto;
}
.motiv__bild {
  display: block;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.motiv__bild img { width: 100%; display: block; }

/* .video-caption bringt aus der Basis margin-top: 1rem mit. Im Raster von
   .motiv liegt darueber schon gap: 1.05rem -- zusammen waeren das gut zwei
   Zeilen Abstand, und die Unterschrift geriete ausser Reichweite des Bildes,
   auf das sie sich bezieht. */
.motiv .video-caption { margin-top: 0; }

/* Luft ringsum: ein grosses Motiv braucht Abstand, sonst stossen Text und
   Bild aneinander und die Sektion wirkt gedraengt. */
.section--luft { padding-block: calc(var(--section) * 1.2); }
.motiv + .motiv { margin-top: clamp(3rem, 7vw, 5.5rem); }


/* ---------- Galerie ----------
   Kein dichtes Raster: Essensfotos brauchen Abstand, sonst liest sich die
   Seite wie ein Katalog und das einzelne Gericht geht unter. */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.galerie .motiv { max-width: none; }


/* ==========================================================================
   Listen fuer Preise und Zeiten
   ==========================================================================
   Beide stehen in Karten: hier zaehlt Ablesbarkeit, nicht Atmosphaere. */

.preisliste { display: grid; }
.preisliste > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1.5rem;
  align-items: baseline;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}
.preisliste > div:first-child { padding-top: 0; }
.preisliste > div:last-child { padding-bottom: 0; border-bottom: 0; }
.preisliste dt { display: grid; gap: .18rem; }
.preisliste dt b { font-weight: 600; color: var(--text); }
.preisliste dt span { font-size: .88rem; color: var(--text-3); line-height: 1.5; }
.preisliste dd {
  font-weight: 700;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.zeiten { display: grid; }
.zeiten > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .62rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.zeiten > div:first-child { padding-top: 0; }
.zeiten > div:last-child { padding-bottom: 0; border-bottom: 0; }
.zeiten dt { color: var(--text-2); }
.zeiten dd { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
/* „Geschlossen" ist kein Wert, sondern dessen Abwesenheit -- es tritt zurueck. */
.zeiten .zu { color: var(--text-3); font-weight: 500; }


/* ==========================================================================
   Wortmarke -- der Rueckfall
   ==========================================================================
   Der Betrieb hat ein Bildzeichen; es haengt im Kopfbereich und im
   Fussbereich (siehe marke() in _tools/seiten-build.py). Fehlt die Datei,
   baut die Seite auf diese Fassung zurueck: Schrift und eine Akzentkante
   statt eines Bildes. Der Aufbau bleibt der der Vorlage (.brand__name mit
   farbiger Silbe, .brand__sub darunter), nur das Bild entfaellt -- .brand
   ist inline-flex mit gap, bei einem einzigen Kind entsteht kein
   Zwischenraum. */
.brand--wort .brand__text { position: relative; padding-left: .95rem; }
.brand--wort .brand__text::before {
  content: '';
  position: absolute;
  left: 0;
  top: .1em;
  bottom: .1em;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
}

@media (max-width: 720px) {
  .motiv { gap: .85rem; }
  .galerie { gap: 2.5rem 1.5rem; }
}

@media (max-width: 460px) {
  .brand--wort .brand__name { font-size: 1.14rem; }
  .brand--wort .brand__text { padding-left: .8rem; }
}


/* >>> ergaenzt von _tools/css-ergaenzen.py -- nicht von Hand aendern */

/* ==========================================================================
   §6 — Bausteine dieses Betriebs
   ==========================================================================
   Was hier steht, gibt es im Baukasten nicht: ein Restaurant hat einen
   Betriebsstatus, Gerichte haben Fotos und Preise, und ein Zitat aus der
   Speisekarte gehoert nicht in eine Karte mit Symbol.
   ========================================================================== */

/* ---------- hidden heisst hidden ----------
   Der Browser blendet ein Element mit dem Merkmal hidden aus, indem er ihm
   display:none gibt -- aus seinem eigenen Stilblatt, und das steht ganz
   unten in der Rangfolge. Jede eigene Regel mit einem display davor sticht
   es. Genau das ist auf der Verwaltungsseite passiert: der Kasten
   "Angemeldet" trug hidden und stand trotzdem da, weil .zugang__offen ihm
   display:grid gab. Der Betrieb sah also vor jeder Anmeldung schon den
   Knopf "Pflegewerkzeug oeffnen" -- und der zeigte zu diesem Zeitpunkt auf
   "#", tat beim Klicken nichts und erklaerte auch nicht, warum.

   Ein !important ist selten richtig. Hier ist es das: hidden ist keine
   Gestaltungsfrage, sondern eine Aussage ueber den Zustand der Seite. */
[hidden] { display: none !important; }

/* ---------- Betriebsstatus ----------
   „Jetzt geoeffnet" oder „Gerade geschlossen", gerechnet gegen die Uhr in
   Europe/Berlin.  Ohne JavaScript bleibt die Zeile stehen und zeigt die
   Zeiten im Klartext -- deshalb steht der Satz im Markup und wird von
   main.js nur ersetzt, nicht erzeugt. */
.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem 1.25rem;
  max-width: 62rem;
  margin-inline: auto;
  padding: 1rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  background-image: var(--glass);
  box-shadow: var(--glass-edge);
  text-align: center;
}
/* Sobald die Zeile umbricht, ist die Pillenform falsch: die Rundung sitzt
   dann an den Ecken eines mehrzeiligen Kastens. */
@media (max-width: 860px) {
  .status { border-radius: var(--radius-l); padding: 1.15rem 1.35rem; }
}
.status__lampe {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-3);
  box-shadow: 0 0 0 3px rgb(255 255 255 / .07);
}
.status.is-offen .status__lampe { background: #34d399; box-shadow: 0 0 0 3px rgb(52 211 153 / .18); }
.status.is-zu .status__lampe { background: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18); }
.status__wort { font-weight: 600; color: var(--text); }
.status__text { color: var(--text-2); font-size: .93rem; }
.status__hinweis { color: var(--text-3); font-size: .88rem; }
.status__hinweis::before { content: '\0000B7\000020'; }
.status a {
  color: var(--accent-2);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.status a:hover { color: var(--text); }

/* ---------- Merkmalleiste ----------
   .places bringt die Marken schon mit; hier kommen nur Symbol und Mitte
   dazu. Kein zweites Pillendesign fuer dieselbe Sache. */
.places--merkmale { justify-content: center; }
.places--merkmale li { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .95rem; }
.places--merkmale svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent-2); }

/* ---------- Karte mit Foto ----------
   .card--feature aus der Vorlage traegt bereits figure + .card__body. Was
   fehlt, ist ein festes Verhaeltnis: die Fotos sind unterschiedlich hoch,
   nebeneinander sollen die Kanten aber eine Linie ergeben. Zugeschnitten
   wird mit cover -- eingepasst wird nichts, sonst waeren wir wieder bei
   den Balken, die diese Seite gerade beseitigt hat. */
.card--feature figure { aspect-ratio: 4 / 3; overflow: hidden; }
.card--feature figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.card--link:hover figure img { transform: scale(1.045); }
/* Der Textteil muss selbst eine Spalte sein, sonst hat der Preis unten
   nichts, wogegen er sich mit margin-top:auto stemmen koennte -- und die
   Preise stuenden in einer Reihe Karten auf verschiedenen Hoehen. */
.card--feature .card__body { flex: 1; display: flex; flex-direction: column; }
.card__preis {
  margin-top: auto;
  padding-top: 1.1rem;
  font-weight: 700;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.card__marke { align-self: flex-start; margin-bottom: .7rem; }

/* Mehrere Wechselbild-Zeilen untereinander brauchen Abstand; die Vorlage
   kennt nur eine je Abschnitt und hat deshalb keine Regel dafuer. */
.split + .split { margin-top: clamp(3.5rem, 8vw, 6rem); }

/* Dritte Zeile in der Zahlenkachel: der Zusatz erklaert die Zahl. */
.stat i {
  display: block;
  margin-top: .45rem;
  font-style: normal;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-3);
}

/* ---------- Bildpaar ----------
   Zwei Aufnahmen nebeneinander, die groessere fuehrt. Kein Ueberlappen:
   das braucht feste Hoehen, und die gibt es hier nicht. */
.bildduo { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(.7rem, 1.6vw, 1.1rem); }
.bildduo > * {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--bg-3);
  box-shadow: var(--shadow);
}
.bildduo img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ---------- Zitat ---------- */
.zitat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: center;
  max-width: 60rem;
  margin-inline: auto;
}
.zitat__bild {
  width: clamp(104px, 16vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line);
}
.zitat__bild img { width: 100%; height: 100%; display: block; object-fit: cover; }
.zitat blockquote {
  font-size: clamp(1.28rem, 1.05rem + 1.05vw, 1.85rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.zitat blockquote::before { content: '\201E'; color: var(--accent); }
.zitat blockquote::after { content: '\201C'; color: var(--accent); }
.zitat figcaption { margin-top: 1.15rem; font-size: .9rem; color: var(--text-3); }
.zitat figcaption b { color: var(--text-2); font-weight: 600; }
@media (max-width: 620px) {
  .zitat { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ---------- Sprungmarken der Speisekarte ----------
   24 Kategorien sind zu viele fuer eine Seite ohne Wegweiser. Der Sprung
   landet dank scroll-padding-top aus dem Reset unter der Kopfleiste. */
.kartennav { display: flex; flex-wrap: wrap; gap: .45rem; }
.kartennav a {
  display: inline-block;
  padding: .38rem .8rem;
  font-size: .84rem;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color .2s, border-color .2s, background .2s;
}
.kartennav a:hover { color: var(--text); border-color: var(--accent); background: var(--surface-2); }

/* Lange Listen zweispaltig -- eine Spalte mit 29 Weinen laeuft sonst
   ueber zwei Bildschirmhoehen. */
@media (min-width: 900px) {
  .preisliste--zwei { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .preisliste--zwei > div:nth-child(2) { padding-top: 0; }
}
/* Kennzeichnung am Gericht: Empfehlung des Hauses, vegetarisch. */
.preisliste em {
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.preisliste em.ist-empfehlung { color: var(--accent-2); }
.preisliste em.ist-vegetarisch { color: #6ea86a; }

/* Nummer des Gerichts, so wie sie auf dem gedruckten Blatt davorsteht.
   Feste Mindestbreite und Ziffern gleicher Laufweite, damit die Namen
   untereinander an derselben Stelle beginnen -- sonst wandert jeder
   zweistellige Eintrag gegen die einstelligen. */
.preisliste .kartennr {
  display: inline-block;
  min-width: 2.4em;
  padding-right: .45em;
  color: var(--text-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Buchstaben und Ziffern fuer Allergene und Zusatzstoffe. Sie duerfen nie
   umbrechen: "2,3,C" ist eine Angabe, keine Aufzaehlung, und eine
   abgetrennte Ziffer in der naechsten Zeile liest sich wie ein Preis. */
.preisliste .kennz {
  font-style: normal;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--text-3);
  white-space: nowrap;
}

/* Drei Merkmale unter der Kopfzeile statt der vier Leistungen der Vorlage. */
.hero__actions--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 52rem; }

/* Zwischen 721 und 1080 Punkten stellt die Vorlage ihre Leistungen auf
   zwei Spalten und zieht die Trenner entsprechend: senkrecht vor jedem
   geraden Eintrag, waagerecht ueber allem ab dem dritten. Diese Reihe hat
   dort aber weiter drei Spalten. Der dritte Eintrag steht also neben den
   anderen und bekam trotzdem die Linie einer neuen Zeile ueber sich --
   samt Abstand, der ihn gegen seine Nachbarn versetzte. Hier stehen die
   Trenner deshalb noch einmal so, wie eine einzeilige Reihe sie braucht. */
@media (min-width: 721px) and (max-width: 1080px) {
  .hero__actions--3 .svclink { padding: 0 1.4rem; }
  .hero__actions--3 .svclink:first-child { padding-left: 0; }
  .hero__actions--3 .svclink:last-child { padding-right: 0; }
  .hero__actions--3 .svclink::after { content: none; }
  .hero__actions--3 .svclink:not(:first-child)::before { content: ''; }
}

@media (max-width: 720px) {
  .hero__actions--3 { grid-template-columns: 1fr; max-width: 30rem; }
}

/* Die Knoepfe oben auf der Startseite. .cta__actions gibt es schon, die
   zentriert aber -- im Kopfbereich steht der Text linksbuendig, und die
   Knoepfe muessen an derselben Kante beginnen. */
.hero__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
@media (max-width: 520px) {
  /* Nebeneinander wird jeder Knopf zu schmal fuer seine Beschriftung.
     Untereinander brauchen sie dafuer 135 Punkte Hoehe -- der Abstand
     darueber faellt kleiner aus, damit der erste Knopf noch im ersten
     Bildschirm steht. */
  .hero__knoepfe { flex-direction: column; align-items: stretch; max-width: 24rem; margin-top: 1rem; }
  .hero__knoepfe .btn { justify-content: center; }
}

/* Abstand zwischen den 24 Abteilungen der Speisekarte. Groesser als der
   Zeilenabstand innerhalb einer Abteilung, sonst verschwimmen sie. */
.karte-liste { display: grid; gap: clamp(2.75rem, 6vw, 4.25rem); margin-top: clamp(2rem, 4vw, 3rem); }
.karte-liste h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -.02em; }
.karte-liste h2::after {
  content: '';
  display: block;
  width: 3.25rem;
  height: 2px;
  margin-top: .85rem;
  border-radius: 2px;
  background: var(--accent);
}

/* ---------- Abholband ----------
   „Alle Gerichte auch zum Mitnehmen" ist die Nachricht, mit der dieser
   Betrieb gefunden werden will. Sie steht deshalb ganz oben -- und zwar
   innerhalb der Kopfleiste, nicht davor: die Kopfleiste liegt fest am
   oberen Rand (position: fixed), ein Band davor waere nach dem ersten
   Blaettern verschwunden und ein Band dahinter laege unter Logo und
   Navigation.

   Damit waechst die Kopfleiste um die Bandhoehe. Alles, was sich bisher
   an ihrer Hoehe ausgerichtet hat -- der Kopfbereich, die Sprungmarken,
   die aufklappende Navigation -- rechnet die Hoehe deshalb unten mit.
   Sie steht als eigenes Token da, damit sie an einer Stelle steht und
   nicht an fuenf. */
:root { --band-h: 38px; }

.band { background: var(--accent); color: var(--btn-ink); }
.band__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem 1rem;
  min-height: var(--band-h);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-align: center;
}
.band__text--kurz { display: none; }
.band__knopf {
  flex-shrink: 0;
  color: inherit;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.band__knopf:hover { color: inherit; opacity: .72; }

/* Die Hoehen, die bisher gegen die Kopfleiste gerechnet wurden. Die Werte
   stehen so schon weiter oben in dieser Datei; hier kommt nur die
   Bandhoehe dazu. Spaeter in der Datei heisst: gleiche Spezifitaet, diese
   Fassung gewinnt. */
html { scroll-padding-top: calc(104px + var(--band-h)); }
.hero { padding-top: calc(7.5rem + var(--band-h)); }
.phero { padding-top: calc(clamp(8rem, 14vw, 11rem) + var(--band-h)); }

/* Schmale Geraete: der lange Satz braeuchte zwei Zeilen, und ein
   zweizeiliges Band waere hoeher als --band-h -- dann saesse alles
   darunter um den Fehlbetrag zu hoch. Also der kurze Satz. Die
   Rufnummer faellt dabei weg; sie steckt im Knopf daneben, und der ist
   auf dem Telefon ohnehin der bessere Weg. */
@media (max-width: 780px) {
  .band__text--lang { display: none; }
  .band__text--kurz { display: inline; }
}
@media (max-width: 960px) {
  :root { --band-h: 34px; }
  html { scroll-padding-top: calc(88px + var(--band-h)); }
  /* Die aufklappende Navigation haengt unter der Kopfleiste, nicht unter
     der Bildschirmkante -- beides stand bisher bei 76px. */
  .nav { inset: calc(76px + var(--band-h)) 0 auto 0; max-height: calc(100svh - 76px - var(--band-h)); }
}

/* ---------- Gaestestimmen ----------
   Fuenf Sterne, ein laengerer Satz, Name und Herkunft. Kein Foto: es gibt
   keins, das dem Gast gehoert, und ein Platzhalterkopf waere gelogen. */
.stimmen { align-items: start; }
.stimme { gap: 0; }
.sterne { display: inline-flex; gap: .12rem; color: var(--accent); }
/* Die Symbole dieser Seite sind Umrisse. Ein Stern wirkt so wie ein
   halbes Versprechen -- gefuellt liest er sich als Wertung. */
.sterne svg { width: 15px; height: 15px; fill: currentColor; }
.stimme blockquote {
  margin-top: .9rem;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--text-2);
}
.stimme blockquote::before { content: '\201E'; color: var(--accent); }
.stimme blockquote::after { content: '\201C'; color: var(--accent); }
.stimme figcaption {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--text-3);
}
.stimme figcaption b { display: block; color: var(--text); font-weight: 600; }
@media (max-width: 900px) {
  .stimmen { grid-template-columns: 1fr; }
}

/* ---------- Speisekarte sichern ----------
   Zwei Wege nebeneinander: die Druckfassung des Betriebs als PDF, und
   diese Seite selbst ueber den Druckdialog. */
.kartenknoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.kartenknoepfe .btn svg { width: 16px; height: 16px; }

/* ---------- Verwaltung ----------
   Die Anmeldeseite fuer den Betrieb. Sie steht in keiner Navigation und
   in keiner Seitenkarte; wer sie sieht, hat den Weg gekannt. Deshalb ist
   sie schmal, ruhig und ohne jede Werbung -- ein Formular auf einer
   Karte, sonst nichts. */
.zugang { max-width: 30rem; margin-inline: auto; }
.zugang .card { padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.zugang .form { gap: 1rem; }
.zugang .btn { width: 100%; justify-content: center; }

/* Die Rueckmeldung steht immer im Aufbau, auch wenn sie nichts sagt --
   sonst huepft das Formular beim ersten Fehlversuch nach unten. */
.zugang__meldung {
  min-height: 1.4rem;
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent-2);
}
.zugang__meldung.ist-fehler { color: #ff8a73; }

.zugang__offen { display: grid; gap: 1rem; }
.zugang__offen p { color: var(--text-2); font-size: .95rem; margin: 0; }

/* Die Lage des Werkzeugs: laeuft es gerade, oder fehlt das schwarze
   Fenster? Frueher stand hier ein Knopf, der in beiden Faellen gleich
   aussah -- und im zweiten Fall auf eine Fehlerseite des Browsers
   fuehrte, aus der niemand ablesen konnte, was zu tun ist. Jetzt wird
   vorher nachgesehen, und die Farbe sagt das Ergebnis schon von weitem:
   gruen bereit, gelb wird geprueft, rot fehlt noch. */
.zugang__lage {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  font-size: .92rem;
  line-height: 1.5;
}
.zugang__lage::before {
  content: '';
  flex: 0 0 auto;
  width: .6rem;
  height: .6rem;
  margin-top: .45rem;
  border-radius: 50%;
  background: currentColor;
}
.zugang__lage.ist-bereit { color: #7ddc9a; border-color: #2f5c3f; }
.zugang__lage.ist-fehlt  { color: #ff8a73; border-color: #6b3226; }
.zugang__lage.ist-pruefe { color: var(--text-3); }
/* Ein leises Pulsieren, solange nachgesehen wird -- damit die Anzeige
   nicht wie ein Ergebnis aussieht, bevor eines da ist. */
.zugang__lage.ist-pruefe::before { animation: lagepuls 1.1s ease-in-out infinite; }
@keyframes lagepuls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .zugang__lage.ist-pruefe::before { animation: none; }
}

.zugang__schritte { margin: 0; padding-left: 1.15rem; color: var(--text-3); font-size: .88rem; }
.zugang__schritte li { margin-bottom: .3rem; }
.zugang__schritte code {
  padding: .1em .4em;
  border-radius: 5px;
  background: var(--bg-3);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .92em;
  color: var(--text-2);
}

/* Der zweite Weg: die Ansicht im Netz. Sie steht immer da, auch wenn das
   Werkzeug auf dem Rechner gerade laeuft -- deshalb eine eigene Abteilung
   mit Trennlinie und nicht bloss ein weiterer Knopf in der Reihe. Wer
   nicht am Rechner mit dem Ordner sitzt, findet hier sein Ziel. */
.zugang__zweitweg {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .75rem;
}
/* Der erste Block im offenen Bereich ist der Hauptweg (Online-Verwaltung)
   und braucht deshalb keine Trennlinie ueber sich. */
.zugang__zweitweg--erst { margin-top: 0; border-top: none; padding-top: 0; }
.zugang__zweitweg p { margin: 0; color: var(--text-2); font-size: .92rem; }
.zugang__zweitweg .zugang__klein { color: var(--text-3); font-size: .84rem; }

.zugang__hilfe {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--text-3);
}.zugang__hilfe code {
  padding: .1em .4em;
  border-radius: 5px;
  background: var(--bg-3);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .92em;
  color: var(--text-2);
}

/* Ein unauffaelliger Weg im Fussbereich. Er soll dem Gast nicht ins Auge
   springen, aber auffindbar sein, ohne die Adresse auswendig zu koennen. */
.footer__bottom a.intern { color: var(--text-3); }
.footer__bottom a.intern:hover { color: var(--text-2); }

/* ---------- Das Zeichen des Betriebs ----------
   Die Grundfassung war auf ein quadratisches Sinnbild ausgelegt und gibt
   dem Bild eine Breite (56px). Hier haengt eine Wortmarke: gut dreieinhalb
   mal so breit wie hoch. Auf 56px Breite waere sie 16px hoch und nicht
   mehr zu lesen. Gesteuert wird deshalb ueber die Hoehe -- die ist bei
   einer Marke das Mass, das zur Zeile daneben passen muss.

   Der geschriebene Name faellt daneben weg (siehe marke() in
   seiten-build.py); .brand--wort mit der Akzentkante bleibt trotzdem im
   Stilblatt stehen, denn ohne Bilddatei baut die Seite genau darauf
   zurueck. */
.brand__mark { width: auto; height: 46px; }
/* Nur fuers Papier: dieselbe Marke in dunkler Tinte. */
.brand__mark--druck { display: none; }

@media (max-width: 960px) {
  .brand__mark { height: 38px; }
}
@media (max-width: 460px) {
  .brand__mark { height: 34px; }
}

/* ---------- Tagesangebot im Kopfbereich ----------
   Der Schnitzeltag unter den beiden grossen Knoepfen. Der Auftrag war
   „auffallen, jedoch nicht stoerend" -- das sind zwei gegenlaeufige
   Wuensche, und geloest werden sie hier nicht ueber die Groesse, sondern
   ueber den Unterschied: der Streifen ist der einzige Kasten im ganzen
   Kopfbereich, der eine eigene Flaeche und einen farbigen Rand hat. Er
   faellt auf, weil er anders ist, und stoert nicht, weil er klein bleibt
   und niemandem im Weg steht.

   Die Farbe kommt aus --accent-rgb mit wenig Deckkraft: ein Hauch
   Terrakotta ueber dem Foto, kein Farbblock. Ein voll gefuellter oranger
   Balken saehe an dieser Stelle aus wie Werbung und wuerde genau das,
   was der Betrieb nicht wollte.

   Warum kein `position: sticky` und kein eigenes Band ueber der Seite:
   ganz oben steht schon der Abholhinweis in der Kopfleiste. Ein zweites
   dauerhaftes Band darunter waere ein Streifen zu viel -- dann liest
   niemand mehr eines von beiden. */
.tagesangebot {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: fit-content;
  max-width: 34rem;
  margin-top: 1.1rem;
  padding: .7rem 1rem .7rem .8rem;
  border: 1px solid rgb(var(--accent-rgb) / .45);
  border-radius: var(--radius-s);
  background: rgb(var(--accent-rgb) / .10);
  backdrop-filter: blur(10px);
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .2s var(--ease);
}
.tagesangebot:hover {
  border-color: rgb(var(--accent-rgb) / .8);
  background: rgb(var(--accent-rgb) / .18);
  transform: translateY(-1px);
}
.tagesangebot__ikon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / .22);
  color: var(--accent-2);
}
.tagesangebot__ikon svg { width: 19px; height: 19px; }
.tagesangebot__text { display: block; line-height: 1.3; }
.tagesangebot__text b { display: block; font-size: 1rem; font-weight: 700; }
.tagesangebot__text > span {
  display: block;
  margin-top: .15rem;
  font-size: .84rem;
  color: var(--text-2);
}
/* „Mittwochs" traegt die Farbe, „Schnitzeltag" das Gewicht. Beides in
   Orange waere ein Wort zu viel in Signalfarbe. Zwischen beiden steht im
   Markup ein echtes Leerzeichen -- sonst liest ein Vorleseprogramm
   „MittwochsSchnitzeltag" in einem Stueck. Der Rand hier setzt nur
   obendrauf. */
.tagesangebot__tag {
  margin-right: .15rem;
  color: var(--accent-2);
  font-weight: 700;
}
.tagesangebot__knopf {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
  margin-left: auto;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
}
.tagesangebot__knopf svg { width: 15px; height: 15px; }

@media (max-width: 620px) {
  /* Nebeneinander bleiben fuer den Text keine 12 Zeichen uebrig. Der
     Knopf rutscht deshalb unter den Text und ueber die volle Breite --
     dort ist er zugleich das groessere Ziel fuer den Daumen. */
  .tagesangebot {
    flex-wrap: wrap;
    width: auto;
    max-width: 24rem;
    row-gap: .7rem;
  }
  .tagesangebot__text { flex: 1 1 10rem; }
  .tagesangebot__knopf { flex-basis: 100%; margin-left: 0; justify-content: center; }
}

/* ---------- Betriebsurlaub ----------
   Das Fenster, das beim Oeffnen der Seite ueber allem steht. Es ist der
   einzige Baustein dieser Website, der den Besucher aufhaelt -- deshalb
   ist er auch der einzige mit z-index ueber der Kopfleiste (die liegt bei
   50) und der einzige mit einem Schleier darunter.

   Sichtbar wird es von main.js, nicht von hier: das Datum entscheidet, und
   ein Stilblatt kann nicht rechnen. Bis dahin haelt es das Merkmal hidden
   und die Regel [hidden] weiter oben unten. */
.urlaub {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.urlaub__schleier {
  position: absolute;
  inset: 0;
  background: rgb(var(--bg-rgb) / .82);
  backdrop-filter: blur(8px);
}
.urlaub__kasten {
  position: relative;
  width: min(34rem, 100%);
  max-height: calc(100vh - 2 * var(--gutter));
  overflow: auto;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  text-align: center;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  /* Deckend und nicht durchscheinend: hinter dem Kasten liegt je nach
     Seite ein Foto oder ein Video, und durch eine Glasflaeche waere der
     eine Satz, auf den es ankommt, schlechter zu lesen als der Hintergrund. */
  background: var(--bg-2);
  box-shadow: var(--shadow);
  animation: urlaub-auf .28s var(--ease) both;
}
.urlaub__kasten:focus { outline: none; }
.urlaub__kasten::before {
  /* Ein Streifen in der Hausfarbe am oberen Rand -- er ordnet den Kasten
     dem Betrieb zu, ohne dass dafuer das Logo hineinmuss. */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
@keyframes urlaub-auf {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .urlaub__kasten { animation: none; }
}

.urlaub__augenbraue {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.urlaub__titel {
  margin: 0 0 1.1rem;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  line-height: 1.15;
}

/* Der Zeitraum ist die Auskunft, wegen der das Fenster da ist. Er steht
   deshalb als eigener Block und nicht als Nebensatz im Fliesstext.

   Drei Zeilen statt einer: auf einem Telefon von 360 Punkten Breite bricht
   "1. September 2026 bis einschliesslich 22. September 2026" mitten im
   zweiten Datum um, und die Zeile "bis einschliesslich 22." allein liest
   sich falsch. Jedes Datum steht so auf seiner eigenen Zeile, das Wort
   dazwischen kleiner -- die beiden Zahlen sind die Auskunft. */
.urlaub__zeitraum {
  margin: 0 0 1.2rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  line-height: 1.35;
}
.urlaub__tag {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}
.urlaub__wort {
  display: block;
  margin: .25rem 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.urlaub__text {
  margin: 0 0 1rem;
  color: var(--text-2);
}
.urlaub__wieder {
  margin: 0 0 1.4rem;
  color: var(--text);
}
.urlaub__wieder b { color: var(--accent-2); }
.urlaub__anruf {
  margin: -.6rem 0 1.4rem;
  font-size: .9rem;
  color: var(--text-3);
}
.urlaub__anruf a { color: var(--text-2); white-space: nowrap; }
.urlaub__knopf { width: 100%; justify-content: center; }

/* ---------- Gedruckte Speisekarte ----------
   Wer „Als PDF speichern" waehlt, will die Gerichte, nicht die Website.
   Die Grundfassung blendet oben schon Kopfleiste, Fussbereich und Knoepfe
   aus; hier kommt dazu, was diese Seite eigens mitbringt.

   Wichtig ist die erste Regel: .reveal ist mit JavaScript unsichtbar und
   wird erst beim Heranblaettern eingeblendet. Ohne sie waere alles leer,
   was der Besucher vor dem Drucken nicht gesehen hat -- und das ist bei
   27 Abteilungen fast die ganze Karte. */
@media print {
  .js .reveal, .js .reveal.is-in { opacity: 1 !important; transform: none !important; }
  .kartennav, .kartenknoepfe, .status, .band { display: none !important; }
  /* Das Urlaubsfenster gehoert nicht aufs Papier: wer druckt, hat es
     laengst weggeklickt, und ein Schleier ueber der ganzen Seite wuerde
     als grauer Kasten mitkommen. */
  .urlaub { display: none !important; }
  .karte-liste { gap: 1.6rem; }
  .karte-liste h2 { break-after: avoid; page-break-after: avoid; }
  .preisliste > div, .stimme { break-inside: avoid; page-break-inside: avoid; }
  .preisliste--zwei { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .preisliste em.ist-empfehlung, .preisliste em.ist-vegetarisch { color: #000; }
  /* Grau auf Papier wird blass bis unlesbar -- Nummer und Kennzeichen
     gehoeren aber zur Angabe und muessen mitkommen. */
  .preisliste .kartennr, .preisliste .kennz { color: #000; }
  .section { padding-block: 0; }

  /* Die Marke zurueck aufs Blatt. Die Grundfassung blendet den ganzen
     Kopfbereich aus -- gedruckt kaeme sonst eine Speisekarte heraus, auf
     der nicht steht, aus welchem Haus sie ist. Zurueck kommt nur das
     Zeichen: Navigation, Knoepfe und das Abholband gehoeren nicht aufs
     Papier. position wird zurueckgesetzt, sonst laege der feste
     Kopfbereich ueber der ersten Abteilung. */
  .header {
    display: block !important;
    position: static !important;
    background: none !important;
    border: 0 !important;
  }
  .header__inner { display: block; min-height: 0; padding-block: 0 1.2rem; }
  .nav, .burger, .header__cta { display: none !important; }
  .brand__mark { display: none; }
  .brand__mark--druck { display: block; height: 52px; }
  .brand__sub { color: #444; }

  /* Der Vorspann der Seite haelt am Bildschirm Abstand zum festen
     Kopfbereich und zum Abholband -- gut 11rem plus Bandhoehe. Auf dem
     Papier gibt es weder das eine noch das andere; die Luft blieb aber
     stehen und schob die erste Abteilung 721 Punkte nach unten, also
     ueber die halbe erste Seite. Ueberschrift und Vorspann bleiben, der
     Leerraum darum geht weg. Der Schein hinter dem Vorspann ebenso: ein
     weicher Farbfleck wird im Druck zum grauen Schleier. */
  .phero { padding-top: 0; padding-bottom: 1.4rem; }
  .phero::before { display: none; }
  .phero h1 { font-size: 2.1rem; line-height: 1.15; }
  .phero .lead { font-size: 1rem; }
}

/* <<< Ende der Ergaenzung */