/* Seitenwelt Wien — GRILL&Co Erlebniswelt Wien Süd (Firma 3).
   Hell und klassisch wie grillco.at (Nutzer-Entscheid 03.09.2026): weißer
   Grund, große Fotos in Farbe, schwarze Schrift, Rot nur für Knöpfe, Preise
   und Hinweise. Schrift und Tokens kommen aus ds.css (Archivo, 0 px Radius,
   2-px-Linien) — derselbe Baukasten wie der neue GrillCo-Onlineshop, damit
   Website und Shop als ein Haus wirken. Diese Datei ersetzt public/site.css
   nur in der Wien-Instanz; die Kaufstrecke (Shop, Reservierung, Gutschein)
   nutzt dieselben Klassennamen und wird damit automatisch mitgestaltet. */
:root {
  --color-bg: #ffffff;
  --color-surface: #f3f2f2;
  --color-text: #1b1918;
  --color-accent: #e3141c;           /* Flammenrot der Wortmarke */
  --color-divider: color-mix(in srgb, #1b1918 22%, transparent);
  --color-line: color-mix(in srgb, #1b1918 12%, transparent);
  --color-accent-100: #fdeceb;
  --color-accent-200: #f9cfcd;
  --color-accent-300: #f3a5a3;
  --color-accent-400: #ec6f6c;
  --color-accent-500: #e3141c;
  --color-accent-600: #c30f16;
  --color-accent-700: #9d0c12;
  --color-accent-800: #6f0a0e;
  --color-accent-900: #45080a;
  --color-neutral-100: #f8f7f7;
  --color-neutral-200: #ebeae9;
  --color-neutral-300: #d8d6d4;
  --color-neutral-400: #b9b6b3;
  --color-neutral-500: #9a9693;
  --color-neutral-600: #7b7774;
  --color-neutral-700: #5f5b58;
  --color-neutral-800: #423f3d;
  --color-neutral-900: #2b2927;
  --schwarz: #0d0c0c;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
input[type="checkbox"] { accent-color: var(--color-accent); width: 16px; height: 16px; }
a { color: var(--color-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent-600); }
h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: clamp(36px, 5vw, 62px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 20px; }
h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 14px; }
h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 8px; }
p { text-wrap: pretty; }
.btn { white-space: nowrap; font-size: 15px; padding: 12px 20px; letter-spacing: 0.005em; min-height: 44px; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); color: #fff; }
.btn-secondary { border: 2px solid var(--color-text); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-text); color: #fff; }
.btn-ghost { border: 2px solid var(--color-divider); color: var(--color-text); }
.btn-ghost:hover { border-color: var(--color-text); }
.btn-hell { background: #fff; color: var(--color-text); }
.btn-hell:hover { background: var(--color-neutral-200); color: var(--color-text); }
.btn-dunkel { background: var(--schwarz); color: #fff; }
.btn-dunkel:hover { background: #2b2927; color: #fff; }
::selection { background: var(--color-accent); color: #fff; }
::marker { color: var(--color-accent); }
.zahl, .preis { font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; }
.preis { color: var(--color-accent-600); font-family: var(--font-heading); font-weight: 800; }
@keyframes gcPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Wiederkehrende Muster, die auch Shop/Reservierung/Gutschein verwenden */
.kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-600); font-weight: 800; }
.lbl { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.microlbl { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.choice { border: 2px solid var(--color-divider); padding: 9px 14px; cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 13px; text-align: left; background: transparent; color: var(--color-text); }
.choice.on { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.choice:disabled { opacity: .4; cursor: default; }
.choice:hover:not(.on):not(:disabled) { border-color: var(--color-text); }
.imgslot { position: absolute; inset: 0; background: var(--color-surface); display: flex; align-items: center; justify-content: center; color: var(--color-neutral-600); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border: 0; }
.okbox { border: 2px solid var(--color-text); background: var(--color-surface); padding: 18px 20px; }
.errbox { border: 2px solid var(--color-accent); background: var(--color-accent-100); padding: 12px 16px; font-size: 14px; }
.input { background: #fff; border: 2px solid var(--color-divider); }
.input:focus { border-color: var(--color-text); }
.stepper { padding: 4px 10px; min-width: 30px; justify-content: center; }
table.table td, table.table th { padding: 8px 10px; border-bottom: 1px solid var(--color-neutral-300); }
.grayscale, .grayscale img { filter: none !important; }
.text-muted { color: var(--color-neutral-700); }
figcaption { color: var(--color-neutral-700); }

/* ---------- Kopfzeile ---------- */
.topbar { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 10px 40px; border-bottom: 2px solid var(--color-text); background: var(--color-bg); }
.topbar-logo img { width: 150px; height: auto; display: block; }
.topbar .topnav { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.topbar .navlink { font-family: var(--font-heading); font-size: 14px; font-weight: 800; letter-spacing: .01em; padding: 8px 10px; border: 0; background: transparent; color: var(--color-text); cursor: pointer; text-decoration: none; border-bottom: 2px solid transparent; }
.topbar .navlink:hover { color: var(--color-accent-600); }
.topbar .navlink.on { border-bottom-color: var(--color-accent); }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.topbar-kunde { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--color-text); padding: 0 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-login-desktop { display: inline-flex; align-items: center; gap: 8px; }
.topbar-login-mobil { display: none; }
.nav-burger { display: none; }
.staffbar { position: sticky; top: 0; z-index: 50; background: var(--schwarz); color: #fff; display: flex; align-items: center; gap: 20px; padding: 0 20px; height: 52px; flex-wrap: wrap; }
.staffbar .snav { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 8px 14px; border: 0; cursor: pointer; text-align: left; background: transparent; color: rgba(255,255,255,.7); }
.staffbar .snav.on { background: var(--color-accent); color: #fff; }
.staffbar .ghost { font-family: var(--font-heading); font-weight: 700; font-size: 13px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; cursor: pointer; }

/* ---------- Fußzeile ---------- */
.footer { padding: 44px 40px 36px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; font-size: 14px; border-top: 2px solid var(--color-text); }
.footer a { cursor: pointer; color: var(--color-text); text-decoration: none; }
.footer a:hover { color: var(--color-accent-600); }
.footer-logo { width: 170px; height: auto; margin-bottom: 12px; }
.footer-firma { font-family: var(--font-heading); font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.footer-h { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.footer-link { display: block; margin-top: 8px; font-weight: 700; }
.footer-rechts { display: flex; flex-direction: column; gap: 4px; }
.footer-intern { color: var(--color-neutral-500) !important; font-size: 12px; margin-top: 6px; }
@media (max-width: 900px) { .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px 22px; } }
@media (max-width: 520px) { .footer { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Seitenraster der Website ---------- */
.sec { padding: 64px 40px; border-bottom: 2px solid var(--color-text); }
.sec-hell { background: var(--color-surface); }
.sec-schwarz { background: var(--schwarz); color: #fff; }
.sec-schwarz .text-muted { color: rgba(255,255,255,.72); }
.sec-schwarz a { color: #fff; }
.sec-rot { background: var(--color-accent); color: #fff; }
.sec-rot .text-muted { color: rgba(255,255,255,.85); }
.sec-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 32px; }
.sec-kopf h2 { margin: 0; max-width: 22ch; }
.sec-kopf p { margin: 0; max-width: 52ch; color: var(--color-neutral-700); }
.lead { font-size: 18px; line-height: 1.5; max-width: 50ch; color: var(--color-neutral-800); margin: 0 0 28px; }
.aktionen { display: flex; gap: 12px; flex-wrap: wrap; }
.zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); border-bottom: 2px solid var(--color-text); }
.zwei > .text { padding: 64px 40px 56px; display: flex; flex-direction: column; justify-content: center; }
.zwei > .bild { position: relative; min-height: 420px; }
.zwei > .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .zwei > .text { border-right: 2px solid var(--color-text); } .zwei.bild-links > .text { border-right: 0; border-left: 2px solid var(--color-text); } .zwei.bild-links > .bild { order: -1; } }

/* Held der Startseite: Foto rechts, Wortmarke im Bild */
.zwei > .bild img.held-foto { object-position: 50% 42%; }
.zwei > .bild img.held-marke { position: absolute; inset: auto; left: 28px; bottom: 24px; width: min(26%, 150px); height: auto; object-fit: contain; }
.stempel { position: absolute; right: 28px; top: 28px; width: 128px; height: 128px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--font-heading); font-weight: 800; line-height: 1; transform: rotate(-8deg); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.stempel b { font-size: 34px; letter-spacing: -0.02em; }
.stempel span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.stempel small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }

/* Fakten-Leiste (Bistro) */
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fakten > div { padding: 24px 28px; border-right: 1px solid var(--color-line); }
.fakten > div:last-child { border-right: 0; }
.fakten .f-titel { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); margin-bottom: 8px; }
.fakten .f-wert { font-family: var(--font-heading); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.fakten .f-text { font-size: 14px; color: var(--color-neutral-700); margin-top: 6px; }
@media (max-width: 700px) { .fakten > div { border-right: 0; border-bottom: 1px solid var(--color-line); padding: 18px 22px; } .fakten > div:last-child { border-bottom: 0; } }

/* Wochenmenü */
.menue-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.menue-tab { font-family: var(--font-heading); font-weight: 800; font-size: 14px; padding: 9px 16px; cursor: pointer; border: 2px solid var(--color-text); background: transparent; color: var(--color-text); }
.menue-tab.on { background: var(--color-text); color: #fff; }
.menue { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border: 2px solid var(--color-text); }
.menue-tag { padding: 18px 18px 14px; border-right: 1px solid var(--color-line); position: relative; }
.menue-tag:last-child { border-right: 0; }
.menue-tag.heute { background: var(--color-accent-100); }
.menue-tag.heute::before { content: 'Heute'; position: absolute; top: 0; right: 0; background: var(--color-accent); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; }
.menue-tag.zu { color: var(--color-neutral-600); }
.menue-tagname { font-family: var(--font-heading); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; }
.menue-datum { font-size: 12.5px; color: var(--color-neutral-700); margin-bottom: 12px; }
.menue-pos { padding: 10px 0; border-top: 1px solid var(--color-line); }
.menue-pos .microlbl { color: var(--color-neutral-700); }
.menue-pos .name { font-size: 14.5px; line-height: 1.35; margin: 3px 0 4px; }
.menue-pos .preis { font-size: 14px; }
.menue-pos s { color: var(--color-neutral-600); margin-right: 6px; font-weight: 400; }
/* Wochenkarte (Matthias 14.09.2026): Allergene, Einzelpreis-Hinweis, Dauergerichte als eigene Spalte */
.menue-pos .allergene { font-size: 12.5px; color: var(--color-neutral-700); margin: -2px 0 4px; }
.menue-hinweis { margin-top: 6px; font-weight: 700; color: var(--color-accent-700, var(--color-accent)); }
.menue-immer { background: var(--color-surface); }
/* Hausmarken BBQ 1952 + We love BBQ in Kopf- und Fußzeile */
.topbar-marken { display: none; align-items: center; gap: 14px; }
.topbar-marken img { height: 44px; width: auto; display: block; }
@media (min-width: 1280px) { .topbar-marken { display: flex; } }
.footer-marken { display: flex; align-items: center; gap: 18px; margin: 4px 0 14px; }
.footer-marken img { height: 58px; width: auto; display: block; }
@media (max-width: 700px) { .menue-tag { border-right: 0; border-bottom: 1px solid var(--color-line); } .menue-tag:last-child { border-bottom: 0; } }
.leer { border: 2px dashed var(--color-divider); padding: 28px 24px; max-width: 640px; }
.leer b { font-family: var(--font-heading); font-weight: 800; font-size: 17px; display: block; margin-bottom: 6px; }

/* Events: Plakate — kompakt als Zeile: kleines Plakat links, Text rechts (Nutzer 03.09.: „die Sonderevents sind sehr groß“) */
.plakate { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.plakat { display: flex; flex-direction: row; text-decoration: none; color: inherit; border: 2px solid var(--color-text); background: #fff; min-width: 0; }
.plakat:hover { color: inherit; }
.plakat .bild { position: relative; flex: none; width: 132px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--schwarz); border-right: 1px solid var(--color-line); }
.plakat .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.plakat:hover .bild img { transform: scale(1.03); }
.plakat .datum { position: absolute; left: 0; top: 0; background: #fff; color: var(--color-text); font-family: var(--font-heading); font-weight: 800; padding: 6px 9px; line-height: 1; text-align: center; border-right: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); }
.plakat .datum b { display: block; font-size: 20px; letter-spacing: -0.03em; }
.plakat .datum span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.plakat .info { padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.plakat h3 { margin: 0; font-size: 19px; }
.plakat .meta { font-size: 13.5px; color: var(--color-neutral-700); }
.plakat .beschreibung { margin: 2px 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--color-neutral-800); }
.plakat .fuss { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--color-line); }
.plakat .fuss .preis { font-size: 19px; }
.plakat .fuss .link { font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.plakat .fuss .preis, .plakat .fuss .link { white-space: nowrap; }
@media (max-width: 640px) { .plakat .bild { width: 104px; } .plakat .info { padding: 12px 12px; } .plakat h3 { font-size: 17px; } .plakat .fuss .preis { font-size: 17px; } .plakat .fuss .link { font-size: 12px; } }

/* Termine der Eventplattform */
.termine { border: 2px solid var(--color-text); }
.termin { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto auto; gap: 8px 20px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--color-line); text-decoration: none; color: inherit; }
.termin:last-child { border-bottom: 0; }
.termin .t-datum { white-space: nowrap; }
.termin:hover { color: inherit; background: var(--color-surface); }
.termin .t-datum { font-family: var(--font-heading); font-weight: 800; font-size: 15px; line-height: 1.15; }
.termin .t-datum small { display: block; font-weight: 600; font-size: 12px; color: var(--color-neutral-700); letter-spacing: .04em; }
.termin .t-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; }
.termin .t-ort { font-size: 13px; color: var(--color-neutral-700); }
.termin .t-frei { font-size: 13px; color: var(--color-neutral-700); white-space: nowrap; }
.termin .t-frei.knapp { color: var(--color-accent-600); font-weight: 700; }
.termin .t-preis { font-size: 17px; white-space: nowrap; }
@media (max-width: 640px) { .termin { grid-template-columns: 96px minmax(0, 1fr); padding: 12px 14px; } .termin .t-frei, .termin .t-preis { grid-column: 2; } }

/* Pakete / Preislisten */
.pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); border: 2px solid var(--color-text); }
.paket { padding: 22px 22px 20px; border-right: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.paket:last-child { border-right: 0; }
.paket h3 { margin: 0 0 2px; font-size: 20px; }
.paket .p-text { font-size: 14px; color: var(--color-neutral-700); line-height: 1.5; }
.paket .p-preis { margin-top: auto; padding-top: 12px; font-family: var(--font-heading); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.paket .p-preis small { display: block; font-size: 12px; font-weight: 600; color: var(--color-neutral-700); letter-spacing: .02em; margin-top: 2px; }
.paket ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }
@media (max-width: 700px) { .paket { border-right: 0; border-bottom: 1px solid var(--color-line); } .paket:last-child { border-bottom: 0; } }
.preisliste { width: 100%; border-collapse: collapse; font-size: 15px; }
.preisliste th { text-align: left; font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); padding: 0 12px 10px 0; border-bottom: 2px solid var(--color-text); }
.preisliste td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.preisliste td.p { text-align: right; white-space: nowrap; font-family: var(--font-heading); font-weight: 800; font-feature-settings: 'tnum' 1; }
.preisliste th.p { text-align: right; padding-right: 0; }

/* Foto-Reihen */
.fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 2px; background: var(--color-text); border: 2px solid var(--color-text); }
.fotos figure { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface); }
.fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotos figcaption { position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,.92); color: var(--color-text); font-size: 12px; padding: 5px 10px; margin: 0; }

/* Bereiche der Startseite: eine Liste mit Tintenlinien, je Zeile ein Foto */
.bereichsliste { border: 2px solid var(--color-text); }
.bereich-zeile { display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; gap: 0 32px; align-items: center; text-decoration: none; color: inherit; border-bottom: 1px solid var(--color-line); }
.bereich-zeile:last-child { border-bottom: 0; }
.bereich-zeile:hover { color: inherit; background: var(--color-surface); }
.bereich-zeile .bild { aspect-ratio: 3 / 2; overflow: hidden; border-right: 1px solid var(--color-line); }
.bereich-zeile .bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.bereich-zeile:hover .bild img { transform: scale(1.03); }
.bereich-zeile .info { padding: 20px 0; }
.bereich-zeile h3 { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 30px); }
.bereich-zeile .info p { margin: 0; font-size: 15px; color: var(--color-neutral-700); line-height: 1.5; max-width: 56ch; }
.bereich-zeile .pfeil { padding: 0 28px 0 0; color: var(--color-accent-600); display: flex; }
@media (max-width: 900px) { .bereich-zeile { grid-template-columns: 200px minmax(0, 1fr) auto; gap: 0 18px; } .bereich-zeile .pfeil { padding-right: 16px; } }
@media (max-width: 640px) { .bereich-zeile { grid-template-columns: minmax(0, 1fr) auto; } .bereich-zeile .bild { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--color-line); aspect-ratio: 16 / 9; } .bereich-zeile .info { padding: 16px 16px 18px; } }
/* Bereichs-Kacheln (Unterseiten) */
.bereiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; }
.bereich { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 2px solid var(--color-text); background: #fff; min-width: 0; }
.bereich:hover { color: inherit; }
.bereich .bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.bereich .bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.bereich:hover .bild img { transform: scale(1.03); }
.bereich .info { padding: 16px 18px 18px; }
.bereich h3 { margin: 0 0 6px; font-size: 20px; }
.bereich .info p { margin: 0 0 10px; font-size: 14px; color: var(--color-neutral-700); line-height: 1.5; }
.bereich .weiter { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent-600); }

/* Schritte (So funktioniert's) */
.schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0; border: 2px solid var(--color-text); }
.schritt { padding: 22px; border-right: 1px solid var(--color-line); }
.schritt:last-child { border-right: 0; }
.schritt b { font-family: var(--font-heading); font-weight: 800; font-size: 18px; display: block; margin: 0 0 6px; }
.schritt p { margin: 0; font-size: 14px; color: var(--color-neutral-700); line-height: 1.5; }
@media (max-width: 700px) { .schritt { border-right: 0; border-bottom: 1px solid var(--color-line); } .schritt:last-child { border-bottom: 0; } }

/* Text-Spalten */
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px 40px; }
.spalten h3 { margin-bottom: 8px; }
.spalten p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--color-neutral-800); }
.spalten ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.6; }
.rechts { max-width: 760px; }
.rechts h3 { margin-top: 28px; }
.rechts p, .rechts li { font-size: 15.5px; line-height: 1.6; color: var(--color-neutral-800); }
.hinweis { border: 2px solid var(--color-accent); background: var(--color-accent-100); padding: 12px 16px; font-size: 14px; display: inline-block; }

/* Formulare */
.formular { max-width: 620px; }
.formular .field { margin-bottom: 16px; }
.formular .input { width: 100%; }
.formular textarea.input { resize: vertical; font-family: var(--font-body); }
.formular .reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 16px; }

/* Newsletter */
.newsletter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); border-bottom: 2px solid var(--color-text); }
.newsletter > div { padding: 44px 40px; }
.newsletter > div:first-child { border-right: 2px solid var(--color-text); }
.newsletter form { display: flex; flex-direction: column; gap: 10px; justify-content: center; height: 100%; }
.newsletter .reihe { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .newsletter > div:first-child { border-right: 0; border-bottom: 2px solid var(--color-text); } }

/* ---------- Mobil & Tablet ---------- */
@media (max-width: 900px) {
  .sec { padding: 44px 22px; }
  .zwei > .text { padding: 44px 22px 40px; }
  .zwei > .bild { min-height: 320px; }
  .newsletter > div { padding: 32px 22px; }
  .topbar { padding: 10px 18px; gap: 10px 16px; }
}
@media (max-width: 640px) {
  .sec { padding: 36px 16px; }
  .zwei > .text { padding: 36px 16px 32px; }
  .newsletter > div { padding: 28px 16px; }
  .topbar { padding: 9px 14px; }
  .zwei > .bild img.held-marke { left: 16px; bottom: 14px; width: 120px; }
  .stempel { width: 104px; height: 104px; right: 14px; top: 14px; }
  .stempel b { font-size: 28px; }
}

/* Kopfzeile mobil: Menü-Knopf + Konto-Icon (CSS-Umschalter, kein JS) */
@media (max-width: 960px) {
  .topbar { position: static; padding: 8px 14px; gap: 8px 12px; flex-wrap: wrap; align-items: center; }
  .zwei.held > .bild { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .zwei.held > .text { padding-top: 32px; }
  .topbar-logo img { width: 112px; }
  .topbar-login-desktop { display: none; }
  .topbar-login-mobil { display: inline-flex; align-items: center; justify-content: center; order: 2; margin-left: auto;
    padding: 8px 11px; border: 2px solid var(--color-text); cursor: pointer; background: var(--color-bg); color: var(--color-text); min-height: 42px; }
  .topbar-login-mobil.on { color: var(--color-accent-600); border-color: var(--color-accent); }
  .nav-burger { display: inline-flex; align-items: center; gap: 6px; order: 3; margin-left: 8px; min-height: 42px;
    font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
    padding: 8px 14px; border: 2px solid var(--color-text); cursor: pointer; background: var(--color-bg); color: var(--color-text); }
  .topbar .topnav { display: none; order: 5; width: 100%; flex-direction: column; gap: 0; }
  .nav-toggle:checked ~ .topnav { display: flex; }
  .topbar .topnav .navlink { padding: 12px 6px; border-bottom: 1px solid var(--color-line); font-size: 15px; }
  .topbar .topnav .navlink.on { border-bottom: 1px solid var(--color-line); color: var(--color-accent-600); }
  .topbar-actions { order: 6; width: 100%; margin-left: 0; flex-wrap: wrap; }
  .topbar-actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
  .topbar-kunde { width: 100%; max-width: none; justify-content: center; padding: 4px 0; }
}

/* ---------- Zugänglichkeit ---------- */
.skiplink { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--color-text); color: #fff; padding: 12px 18px; text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: 14px; }
.skiplink:focus { left: 0; }
main:focus { outline: none; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-bg); }
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (min-width: 961px) { .nav-toggle { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plakat .bild img, .bereich .bild img { transition: none; }
  @keyframes gcPulse { 0%, 100% { opacity: 1 } 50% { opacity: 1 } }
}
.wrap { width: 100%; max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; box-sizing: border-box; }
@media (max-width: 900px) { .wrap { padding-left: 22px; padding-right: 22px; } }
@media (max-width: 640px) { .wrap { padding-left: 14px; padding-right: 14px; } }

/* Einblenden beim ersten Zeichnen: eine ruhige Bewegung, nicht je Abschnitt */
@media (prefers-reduced-motion: no-preference) {
  .zwei > .bild img.held-marke { animation: heldMarke .9s cubic-bezier(.2,.8,.2,1) both .15s; }
  @keyframes heldMarke { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Terminkacheln wie im GRILL&Co-Shop (Nutzer 06.09.2026: „ident wie bei test.grillco.at")
   — Werte 1:1 aus homepage_grillco.at/app/src/index.css (.kf-felder, .tk-*); Eingabefelder
   tragen den Wiener .input-Rahmen (2 px, 0 px Radius). Raster: auto-fill ab 230 px,
   fünf je Reihe am Monitor, zwei am Handy; Bild quadratisch, Text linksbündig. */
.kf-leiste { display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); margin-bottom: 28px; }
.kf-felder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 12px; flex: 1 1 100%; min-width: 0; }
.kf-felder .input, .kf-felder input[type="date"] { width: 100%; min-height: 44px; box-sizing: border-box; }
.kf-felder select.input { cursor: pointer; }
.kf-felder input[type="date"] { padding: 0 12px; font-family: var(--font-body); font-size: 14px; color: var(--color-text); background: #fff; border: 2px solid var(--color-divider); border-radius: 0; font-feature-settings: 'tnum' 1; }
.kf-felder input[type="date"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.kf-reset { min-height: 40px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--color-neutral-700); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kf-reset-inline { min-height: 32px; padding: 0; font-size: 15px; color: var(--color-accent-700); }
.tk-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.tk-kopf h2 { margin: 0; }
.tk-kopf p { margin: 6px 0 0; font-size: 14px; color: var(--color-neutral-700); font-feature-settings: 'tnum' 1; }
.tk-leer { font-size: 15px; color: var(--color-neutral-700); max-width: 52ch; }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 32px 24px; }
.tk { display: flex; flex-direction: column; gap: 12px; min-width: 0; height: 100%; }
.tk-bild { position: relative; display: block; overflow: hidden; background: var(--color-neutral-900); aspect-ratio: 1 / 1; }
.tk-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.tk:hover .tk-bild img { transform: scale(1.04); }
.tk-marke { position: absolute; left: 8px; top: 8px; padding: 3px 8px; background: var(--color-text); color: #ffffff; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.tk-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
/* Name immer zwei Zeilen hoch und auf zwei Zeilen gekappt — Datum, Ort, Plätze springen
   nicht mit der Namenslänge (Nutzer 06.09.2026); voller Name im title des Links */
.tk-name { margin: 0; font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-name a { color: var(--color-text); text-decoration: none; }
.tk-name a:hover, .tk-name a:focus-visible { color: var(--color-accent-700); }
.tk-datum { font-family: var(--font-heading); font-weight: 800; font-size: 13.5px; font-feature-settings: 'tnum' 1; }
.tk-ort { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.tk-ort i { width: 8px; height: 8px; flex: none; }
.tk-plaetze { font-family: var(--font-heading); font-weight: 800; font-size: 13px; }
.tk-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.tk-preis { font-family: var(--font-heading); font-weight: 800; font-size: 18px; white-space: nowrap; color: var(--color-text); }
.tk-preis small { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.tk-fuss .btn { min-height: 44px; padding-inline: 16px; }
.tk-fuss .btn[disabled] { cursor: default; opacity: 0.55; }
.tk-fuss .btn[disabled]:hover { background: transparent; color: var(--color-text); }
.tk[data-voll="1"] .tk-name a, .tk[data-voll="1"] .tk-datum { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.tk[data-voll="1"] .tk-bild img { filter: grayscale(0.6); opacity: 0.8; }
.tk-mehr { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.tk-mehr .btn { min-height: 48px; padding-inline: 24px; }
.tk-mehr span { font-size: 14px; color: var(--color-neutral-700); font-feature-settings: 'tnum' 1; }
@media (max-width: 1100px) { .kf-felder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .kf-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .tk-name { font-size: 15px; }
  .tk-fuss { flex-direction: column; align-items: stretch; }
  .tk-fuss .btn { width: 100%; }
}
/* Feste Zeilen (Nutzer 06.09.2026): Name 2 Zeilen, Datum 1 (Handy 2), Ort 1, Plätze 1 —
   Datum, Ort, Plätze und Preis stehen in jeder Kachel exakt auf derselben Höhe */
.tk-name { height: 2.5em; min-height: 0; }
.tk-datum, .tk-plaetze { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; height: 1.3em; }
.tk-ort { display: flex; white-space: nowrap; overflow: hidden; line-height: 1.3; height: 1.3em; }
@media (max-width: 700px) { .tk-datum { white-space: normal; height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }

/* Inhaltsspalte wie im GRILL&Co-Shop (Nutzer 06.09.2026: „die Gesamtbreite von
   test.grillco.at ist optimal — 5 Kacheln nebeneinander, so soll es auch auf
   grillco.wien sein"): Inhalt höchstens 1296 px (Shop: --seite-max 1440 minus
   2 × 72 Rand), mittig; Hintergründe, Linien und Kopfzeile bleiben volle Breite.
   Der Rand rechnet aus der Breite des Elternblocks (nicht 100vw), damit die
   Bildlaufleiste die Mitte nicht verschiebt; die Hero-Textspalte ist die halbe
   Seite, deshalb dort 100 % − 648 px. Unter 900 px gelten die Mobil-Ränder. */
:root { --inhalt-max: 1296px; }
@media (min-width: 901px) {
  .sec, .footer, .newsletter > div { padding-inline: max(40px, calc((100% - var(--inhalt-max)) / 2)); }
  .zwei > .text { padding-left: max(40px, calc(100% - var(--inhalt-max) / 2)); }
  .zwei.bild-links > .text { padding-left: 40px; padding-right: max(40px, calc(100% - var(--inhalt-max) / 2)); }
}

/* ---------- Website-Inhalte aus dem Cockpit (Nutzer 07.09.2026) ----------
   Hinweisleiste über der Kopfzeile, Untergruppen in der Navigation und der
   Aktions-Slider unter dem Hero — gezeichnet aus window.__INHALTE
   (public/gc.js). Rot wie die Knöpfe, 2-px-Linien, 0 px Radius. */
.hinweisleiste { background: var(--color-accent); color: #fff; text-align: center; padding: 9px 40px; font-family: var(--font-heading); font-weight: 800; font-size: 13.5px; letter-spacing: .02em; line-height: 1.4; }
.hinweisleiste a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hinweisleiste a:hover { color: var(--color-accent-100); }
.navgruppe { position: relative; display: inline-block; }
.navgruppe > .navlink-gruppe::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.navklapp { display: none; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 220px; background: var(--color-bg); border: 2px solid var(--color-text); padding: 6px 0; flex-direction: column; }
.navklapp .navlink { display: block; border-bottom: 0; padding: 9px 14px; white-space: nowrap; }
.navgruppe:hover > .navklapp, .navgruppe:focus-within > .navklapp { display: flex; }
/* Hero-Slider (07.09.2026 abends): der Hero IST der Slider. Jede Folie ist
   ein .zwei.held (Aktion aus dem Cockpit oder der eingebaute Hero), die Spur
   schiebt waagrecht. Die Steuerung (Pfeil, Punkte, Pfeil) sitzt unten links
   in der Textspalte, im unteren Innenabstand — am Handy steht die Textspalte
   unter dem Bild, dort bekommt sie dafür mehr Abstand nach unten. */
.hero-slider { position: relative; overflow: hidden; }
.hero-spur { display: flex; transition: transform .45s ease; }
.hero-folie { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; }
.hero-folie > .zwei { flex: 1 1 auto; }
.aktion-folie .kicker { margin-bottom: 16px; }
.aktion-folie .held-titel { font-size: clamp(36px, 5vw, 62px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 20px; }
.aktion-folie .lead:last-child { margin-bottom: 0; }
.hero-steuer { position: absolute; left: 40px; bottom: 11px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.hero-pfeil { width: 34px; height: 34px; padding: 0; border: 2px solid var(--color-text); background: var(--color-bg); color: var(--color-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; }
.hero-pfeil:hover { background: var(--color-text); color: #fff; }
.hero-pfeil svg { width: 18px; height: 18px; }
.hero-punkte { display: flex; gap: 8px; padding: 0 4px; }
.hero-punkte button { width: 12px; height: 12px; border: 2px solid var(--color-text); background: var(--color-bg); padding: 0; cursor: pointer; }
.hero-punkte button[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); }
@media (max-width: 960px) {
  .hinweisleiste { padding: 8px 14px; font-size: 13px; }
  .navgruppe { display: block; }
  .navklapp { position: static; display: flex; border: 0; padding: 0 0 4px 14px; min-width: 0; }
  .navklapp .navlink { border-bottom: 1px solid var(--color-line); }
  .navgruppe > .navlink-gruppe::after { display: none; }
  /* Am Handy sind alle Folien so hoch wie die höchste (der eingebaute Hero): die
     Bildzeile nimmt den Rest, sonst bliebe zwischen Bild und Text Leerraum. */
  .hero-slider .zwei.held { grid-template-rows: 1fr auto; }
  /* Ein Bildfeld mit aspect-ratio dehnt sich in der Zeile nicht (Grid: stretch + Seitenverhältnis
     = start) — deshalb Mindesthöhe 75vw (= 4:3 der Breite, wie der Hero heute) und wachsen lassen. */
  .hero-slider .zwei.held > .bild { aspect-ratio: auto; min-height: 75vw; }
  .hero-slider .zwei.held > .text { padding-bottom: 76px; }
  .hero-steuer { left: 22px; bottom: 12px; }
  .hero-pfeil { width: 30px; height: 30px; }
}
@media (max-width: 640px) { .hero-slider .zwei.held > .text { padding-bottom: 68px; } .hero-steuer { left: 16px; bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .hero-spur { transition: none; } }

/* ---------- Team-Karten (Cockpit → Inhalte → Team, 07.09.2026) ----------
   Erscheinen im Bereich „Unser Team" der Store-Seite, sobald im Cockpit
   Personen gepflegt sind: Foto (assets/team/<id>.jpg) oder Initialen, Name,
   Rolle, Kurztext — Raster mit 2-px-Rahmen wie die Fotoleiste. */
.team-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2px; background: var(--color-line); border: 2px solid var(--color-text); margin-top: 32px; }
.team-karte { background: var(--color-bg); padding: 0 0 18px; min-width: 0; }
.team-karte .team-bild { aspect-ratio: 1 / 1; background: var(--color-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--color-line); }
.team-karte .team-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-karte .team-initialen { font-family: var(--font-heading); font-weight: 800; font-size: 44px; letter-spacing: -0.02em; color: var(--color-neutral-500); }
.team-karte .team-name { font-family: var(--font-heading); font-weight: 800; font-size: 18px; padding: 14px 18px 0; letter-spacing: -0.01em; }
.team-karte .team-rolle { font-size: 13px; color: var(--color-neutral-700); padding: 2px 18px 0; }
.team-karte .team-text { font-size: 14px; line-height: 1.5; color: var(--color-neutral-800); padding: 8px 18px 0; margin: 0; }

/* Handy ohne Maus (13.09.2026, Hausregel seit 06.09.): Eingabefelder 16 px, sonst
   zoomt iOS Safari beim Tippen in die Seite. Am Rechner bleiben 14 px. */
@media (hover: none) and (pointer: coarse) {
  .input, input:not([type="checkbox"]):not([type="radio"]), select, textarea, .kf-felder input[type="date"] { font-size: 16px; }
}
/* Breite Tabellen (Preisliste Location) rollen am Handy in ihrer Hülle, statt die Seite zu verbreitern. */
.tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }