/* Arties Studios Vorlagen: gemeinsame Basis. Jede Vorlage setzt eigene Farben, Schriften und Formen. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-t); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-d); font-weight: var(--d-weight, 600); line-height: 1.08; letter-spacing: var(--d-track, -0.01em); text-transform: var(--d-case, none); margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.weite { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .weite { padding: 0 40px; } }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hinweisleiste: das ist eine Vorlage */
.vt-bar { background: #111; color: #f2f0ea; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: .8125rem; line-height: 1.4; }
.vt-bar .weite { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; padding-top: 9px; padding-bottom: 9px; }
.vt-bar a { color: #c9b48f; text-decoration: none; font-weight: 600; white-space: nowrap; margin-left: 16px; }
.vt-bar a:hover { text-decoration: underline; }
.vt-bar b { color: #c9b48f; font-weight: 600; }

/* Kopf */
.kopf { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; background: var(--kopf-bg, var(--bg)); color: var(--kopf-fg, var(--fg)); border-bottom: 1px solid var(--line); }
.kopf .weite { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; min-height: 68px; }
.marke { text-decoration: none; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; }
.marke__name { font-family: var(--font-d); font-weight: var(--d-weight, 600); font-size: 1.35rem; line-height: 1; letter-spacing: var(--d-track, 0); text-transform: var(--d-case, none); }
.marke__zeichen { width: 34px; height: 34px; margin-right: 10px; -ms-flex-negative: 0; flex-shrink: 0; }
.nav { display: none; }
.nav a { text-decoration: none; font-size: .9375rem; font-weight: 500; padding: 8px 0; margin-left: 26px; opacity: .85; }
.nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.kopf__rechts { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; }
.kopf__menue { background: none; border: 0; color: inherit; font: inherit; font-size: .9375rem; font-weight: 600; padding: 10px 0 10px 14px; cursor: pointer; }
@media (min-width: 960px) { .nav { display: -webkit-box; display: flex; } .kopf__menue { display: none; } .kopf .knopf { margin-left: 26px; } }
.menue { display: none; background: var(--kopf-bg, var(--bg)); border-top: 1px solid var(--line); }
.menue a { display: block; padding: 14px 20px; text-decoration: none; font-size: 1.125rem; border-bottom: 1px solid var(--line); }
body.menue-offen .menue { display: block; }
@media (min-width: 960px) { body.menue-offen .menue { display: none; } }

/* Knöpfe */
.knopf { display: inline-block; text-decoration: none; text-align: center; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: .9375rem; line-height: 1.2; padding: 14px 22px; border-radius: var(--radius-knopf, 0); border: 2px solid var(--accent); transition: transform .2s, background-color .2s, color .2s; }
.knopf:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
.knopf--rand { background: transparent; color: inherit; border-color: currentColor; }
.knopf--klein { padding: 10px 16px; font-size: .875rem; }
.knopfreihe { display: -webkit-box; display: flex; flex-wrap: wrap; margin: -6px; }
.knopfreihe .knopf { margin: 6px; }

/* Abschnitte */
.sektion { padding: 72px 0; }
@media (min-width: 768px) { .sektion { padding: 104px 0; } }
.sektion--fl { background: var(--surface); }
.sektion--dunkel { background: var(--dark, #111); color: var(--on-dark, #fff); }
.augen { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text, var(--accent)); margin-bottom: 14px; }
.titel { font-size: 2.1rem; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
.einl { font-size: 1.125rem; color: var(--muted); max-width: 620px; margin-top: 18px; }
.kopfzeile { margin-bottom: 44px; }
.kopfzeile--mitte { text-align: center; }
.kopfzeile--mitte .einl { margin-left: auto; margin-right: auto; }

/* Raster */
.raster { display: grid; grid-gap: 20px; gap: 20px; }
@media (min-width: 700px) { .raster--2 { grid-template-columns: 1fr 1fr; } .raster--3 { grid-template-columns: 1fr 1fr; } .raster--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .raster--3 { grid-template-columns: repeat(3, 1fr); } .raster--4 { grid-template-columns: repeat(4, 1fr); } }
.zwei { display: grid; grid-gap: 40px; gap: 40px; -webkit-box-align: center; align-items: center; }
@media (min-width: 900px) { .zwei { grid-template-columns: 1fr 1fr; grid-gap: 72px; gap: 72px; } .zwei--um > :first-child { -webkit-box-ordinal-group: 3; order: 2; } }
.bild { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.foto { overflow: hidden; border-radius: var(--radius-bild, 0); background: var(--surface); }
.foto img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.h-s { height: 260px; } .h-m { height: 360px; } .h-l { height: 460px; }
@media (min-width: 900px) { .h-m { height: 440px; } .h-l { height: 580px; } }
.text-fluss p + p { margin-top: 14px; }
.text-fluss p { color: var(--muted); }

/* Karten */
.karte { background: var(--card, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius, 0); padding: 28px; }
.karte h3 { font-size: 1.4rem; margin-bottom: 10px; }
.karte p { color: var(--muted); }
.karte__icon { width: 44px; height: 44px; margin-bottom: 18px; color: var(--accent-text, var(--accent)); }

/* Karte mit Preisen */
.tabs { display: -webkit-box; display: flex; flex-wrap: wrap; margin: 0 -4px 28px; }
.gang-tab { font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; margin: 4px; padding: 10px 18px; border-radius: var(--radius-knopf, 0); border: 1.5px solid var(--line-strong, var(--line)); background: transparent; color: inherit; }
.gang-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.posten { display: -webkit-box; display: flex; -webkit-box-align: baseline; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.posten__text { -webkit-box-flex: 1; flex: 1 1 auto; min-width: 0; padding-right: 16px; }
.posten__name { font-family: var(--font-d); font-weight: var(--d-weight, 600); font-size: 1.2rem; text-transform: var(--d-case, none); letter-spacing: var(--d-track, 0); }
.posten__info { display: block; color: var(--muted); font-size: .9375rem; margin-top: 2px; }
.posten__preis { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.liste-2 { display: grid; grid-column-gap: 56px; column-gap: 56px; }
@media (min-width: 900px) { .liste-2 { grid-template-columns: 1fr 1fr; } }
.hinweis { font-size: .875rem; color: var(--muted); margin-top: 22px; }

/* Zeiten und Status */
.status { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; font-size: .9375rem; font-weight: 600; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #c0392b; margin-right: 9px; -ms-flex-negative: 0; flex-shrink: 0; }
.status.ist-offen::before { background: #2ecc71; box-shadow: 0 0 0 4px rgba(46, 204, 113, .25); }
.zeiten { width: 100%; border-collapse: collapse; }
.zeiten th, .zeiten td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; }
.zeiten tr.ist-heute th, .zeiten tr.ist-heute td { font-weight: 700; color: var(--accent-text, var(--accent)); }

/* Laufband */
.laufband { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }
.laufband__spur { display: inline-block; -webkit-animation: lauf 40s linear infinite; animation: lauf 40s linear infinite; font-family: var(--font-d); font-size: 1.6rem; text-transform: var(--d-case, none); }
.laufband__spur span { margin: 0 24px; }
@-webkit-keyframes lauf { to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } }
@keyframes lauf { to { -webkit-transform: translateX(-50%); transform: translateX(-50%); } }

/* Kontakt */
.kontakt-raster { display: grid; grid-gap: 32px; gap: 32px; }
@media (min-width: 900px) { .kontakt-raster { grid-template-columns: 1fr 1fr 1fr; } }
.kontakt-raster h3 { font-size: 1.25rem; margin-bottom: 12px; }
.kontakt-raster p, .kontakt-raster address { font-style: normal; color: var(--muted); }
.karte-platz { margin-top: 40px; height: 280px; border-radius: var(--radius, 0); background: var(--surface); border: 1px solid var(--line); display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; text-align: center; color: var(--muted); padding: 20px; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; }

/* Fuß */
.fuss { padding: 40px 0; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--muted); }
.fuss .weite { display: grid; grid-gap: 14px; gap: 14px; }
@media (min-width: 768px) { .fuss .weite { grid-template-columns: 1fr auto; -webkit-box-align: center; align-items: center; } }
.fuss a { margin-right: 18px; }

/* Anruf Knopf unten auf dem Handy */
.anruf-mobil { position: fixed; right: 16px; bottom: 16px; z-index: 60; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
@media (min-width: 960px) { .anruf-mobil { display: none; } }

/* Einblenden */
[data-reveal] { opacity: 0; -webkit-transform: translateY(18px); transform: translateY(18px); transition: opacity .7s ease, -webkit-transform .7s ease; transition: opacity .7s ease, transform .7s ease; }
[data-reveal].ist-da { opacity: 1; -webkit-transform: none; transform: none; }
.no-js [data-reveal] { opacity: 1; -webkit-transform: none; transform: none; }

/* Versteckte Reiter wirklich verstecken */
[hidden] { display: none !important; }
/* Auf kleinen Handys reicht der Anruf Knopf unten */
.kopf__rechts .knopf { display: none; }
@media (min-width: 560px) { .kopf__rechts .knopf { display: inline-block; } }