/* Theme terrazza – modern und hell. Farben/Schriften überschreibt assets/optionen.css (Pflegemaske „Gestaltung“).
   Pfad: themes/terrazza/assets/terrazza.css */
:root{
  --bg:#fff;--bg-2:#f5f6f4;--ink:#1f2328;--ink-2:#5b6168;--linie:#e4e6e2;
  --primaer:#1d8b32;--primaer-2:#17742a;--akzent:#c8102e;
  --sans:"Montserrat",system-ui,"Segoe UI",Roboto,Arial,sans-serif;--titel:var(--sans);
  --rund:14px;--schatten:0 6px 24px rgba(0,0,0,.08)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--primaer)}
a:hover{color:var(--primaer-2)}
svg{width:1.1em;height:1.1em;flex:none;vertical-align:-.15em}
h1,h2,h3{font-family:var(--titel);line-height:1.2;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(30px,5.4vw,54px);font-weight:700}
h2{font-size:clamp(24px,3.4vw,34px);font-weight:700}
h3{font-size:19px;font-weight:600}
p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:100;background:#fff;padding:8px 12px}
.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:600;color:var(--primaer);margin-bottom:.6em}
.lead{font-size:clamp(17px,2vw,20px);color:var(--ink-2)}
.klein,.hinweis{font-size:14px;color:var(--ink-2)}
.knopf{display:inline-flex;align-items:center;gap:8px;background:var(--primaer);color:#fff;border:2px solid var(--primaer);padding:11px 22px;border-radius:999px;text-decoration:none;font-weight:600;transition:background .15s,color .15s}
.knopf:hover{background:var(--primaer-2);border-color:var(--primaer-2);color:#fff}
.knopf.hell{background:#fff;color:var(--primaer)}
.knopf.hell:hover{background:var(--bg-2);color:var(--primaer-2)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;gap:16px;min-height:72px}
.marke{font-weight:700;font-size:20px;color:var(--ink);text-decoration:none;margin-right:auto}
.marke img{height:56px;width:auto}
.haupt{display:flex;flex-wrap:wrap;gap:4px 22px}
.haupt a,.menue nav a{color:var(--ink);text-decoration:none;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.haupt a:hover,.haupt a[aria-current]{color:var(--primaer);border-bottom-color:var(--primaer)}
.haupt .sprache,.menue .sprache{font-size:13px;font-weight:700;border:1px solid var(--linie);border-radius:6px;padding:4px 8px}
.menue{display:none}
.menue summary{list-style:none;cursor:pointer;padding:10px;border-radius:10px}
.menue summary::-webkit-details-marker{display:none}
.menue summary svg{width:26px;height:26px}
.menue nav{position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--linie);box-shadow:var(--schatten);display:flex;flex-direction:column;padding:8px 16px 16px}
.menue nav a{padding:12px 0;border-bottom:1px solid var(--linie)}
.menue nav a[aria-current]{color:var(--primaer)}
.menue nav .sprache{align-self:flex-start;margin-top:12px}
.klein-knopf{padding:8px 16px;font-size:15px}
@media (max-width:900px){
  .haupt{display:none}
  .menue{display:block;order:3}
  .klein-knopf span{display:none}
  .marke img{height:44px}
}
@media (max-width:420px){.kopf .klein-knopf{padding:8px 12px;font-size:14px}}

/* Startseite */
.held{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;color:#fff;background:#2b2f2c;overflow:hidden}
.held-bild{position:absolute;inset:0}
.held-bild img{width:100%;height:100%;object-fit:cover}
.held::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.1) 70%),linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55))}
.held-text{position:relative;z-index:1;padding-top:96px;padding-bottom:64px;width:100%}
.held h1{max-width:16em;color:#fff}
.held .lead{color:rgba(255,255,255,.92);max-width:38em}
.held .kicker{color:#fff;opacity:.9}
.vorteile{background:var(--primaer);color:#fff}
.vorteile ul{list-style:none;margin:0 auto;padding-top:28px;padding-bottom:28px;display:grid;gap:18px 28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.vorteile li{display:flex;gap:12px;align-items:flex-start}
.vorteile li svg{width:22px;height:22px;margin-top:2px}
.vorteile b{display:block}.vorteile span{font-size:14px;opacity:.9}
.abschnitt{padding:clamp(48px,8vw,96px) 0}
.flaeche{background:var(--bg-2)}
.zweispaltig{display:grid;gap:clamp(24px,5vw,64px);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.zweispaltig{grid-template-columns:1fr 1fr}.zweispaltig.tausch>:first-child{order:2}}
.bild-rund img{border-radius:var(--rund);box-shadow:var(--schatten);width:100%;aspect-ratio:4/3;object-fit:cover}
.bild-rund:empty{display:none}
.text p:last-child{margin-bottom:1.4em}
.empfehlungen{list-style:none;padding:0;margin:0 0 24px;max-width:640px}
.empfehlungen li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--linie);font-weight:500}
.karten{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:24px}
.dreispaltig{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.besuch h2{font-size:22px}
address{font-style:normal;margin-bottom:1em}

/* Aus unserer Küche (Galerie-Bereich „Speisen“) */
.kueche-raster{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin:8px 0 28px}
@media (min-width:900px){.kueche-raster{grid-template-columns:repeat(3,1fr)}}
.kueche-raster figure{margin:0;position:relative;overflow:hidden;border-radius:var(--rund)}
.kueche-raster img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .4s}
.kueche-raster figure:hover img{transform:scale(1.04)}
.kueche-raster figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;color:#fff;font-size:14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
.mitte{text-align:center}

/* Unterseiten (auch Kern-Standardvorlagen) */
main.seite{padding-top:40px;padding-bottom:72px;min-height:50vh}
main.seite h1{margin-bottom:.4em}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--rund);padding:20px;margin:0 0 20px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.karte img{border-radius:10px;margin-bottom:14px;width:100%;aspect-ratio:4/3;object-fit:cover}
.angebot{border-left:4px solid var(--akzent)}
.spalten{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.raster{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.raster figure{margin:0}.raster img{border-radius:10px;width:100%;aspect-ratio:4/3;object-fit:cover}
[data-galerie] figure{cursor:zoom-in}
[data-galerie] figure[hidden]{display:none}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.filter button{font:inherit;font-size:14px;font-weight:500;padding:7px 16px;border-radius:999px;border:1px solid var(--linie);background:var(--bg-2);color:var(--ink);cursor:pointer}
.filter button[aria-pressed="true"],.filter button:hover{background:var(--primaer);border-color:var(--primaer);color:#fff}
/* Großansicht */
.lb{position:fixed;inset:0;z-index:200;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0e0c0a;color:#fff}
.lb::backdrop{background:transparent}
.lb[open]{display:grid;grid-template-rows:auto 1fr auto}
.lb-kopf{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:15px}
.lb-buehne{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 70px;touch-action:pan-y}
.lb-buehne img{max-width:100%;max-height:100%;object-fit:contain;user-select:none}
.lb button{border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;width:46px;height:46px;border-radius:50%;font:400 30px/1 var(--sans);display:grid;place-items:center}
.lb button:hover{background:rgba(255,255,255,.25)}
.lb-zurueck,.lb-weiter{position:absolute;top:50%;margin-top:-23px}
.lb-zurueck{left:12px}.lb-weiter{right:12px}
.lb-unter{margin:0;padding:12px 16px 20px;text-align:center;font-size:15px;color:rgba(255,255,255,.85)}
@media (max-width:600px){.lb-buehne{padding:0 6px}.lb .lb-zurueck,.lb .lb-weiter{display:none}}
table.zeiten{border-collapse:collapse;width:100%;max-width:420px}
table.zeiten th,table.zeiten td{text-align:left;padding:5px 12px 5px 0;font-weight:400;vertical-align:top}
table.zeiten th{font-weight:600;white-space:nowrap}
table.zeiten tr.zu{color:var(--ink-2)}
.sonder{font-size:14px;color:var(--akzent)}
.kontakt ul{list-style:none;padding:0}
mark.todo{background:#fde2e1;color:#8c1d18}
.veg{font-size:12px;color:var(--primaer);border:1px solid currentColor;border-radius:999px;padding:1px 8px;margin-left:6px;font-weight:600}

/* Speisekarte */
.sprungleiste{position:sticky;top:72px;z-index:10;margin:8px 0 24px;background:var(--bg);border-bottom:1px solid var(--linie)}
.sprung-in{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none;scroll-padding-inline:56px;overscroll-behavior-x:contain}
.sprung-in::-webkit-scrollbar{display:none}
.sprung-in.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}
.sprung-in.mehr-links{-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px);mask-image:linear-gradient(90deg,transparent,#000 64px)}
.sprung-in.mehr-links.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent)}
.sprung-gruppe{flex:none;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primaer);padding:0 4px 0 14px;margin-left:8px;border-left:1px solid var(--linie);line-height:30px}
.sprung-gruppe:first-child{margin-left:0;padding-left:2px;border-left:0}
.sprung-gruppe:empty{padding-left:6px}
.sprung-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--linie);background:var(--bg);color:var(--ink);font:600 20px/1 var(--sans,sans-serif);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08);display:grid;place-items:center}
.sprung-pfeil[hidden]{display:none}
.sprung-pfeil.zurueck{left:0}
.sprung-pfeil.weiter{right:0}
@media (hover:none),(max-width:760px){.sprung-pfeil{display:none}.sprung-in{scroll-padding-inline:24px}}
.sprungleiste a{flex:none;text-decoration:none;color:var(--ink);background:var(--bg-2);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:500}
.sprungleiste a:hover,.sprungleiste a[aria-current]{background:var(--primaer);color:#fff}
h2.gruppe{margin-top:48px;padding-bottom:8px;border-bottom:3px solid var(--primaer);display:inline-block}
.kategorie{margin:32px 0}
.kategorie h3{font-size:22px}
.kategorie .it{font-weight:400;font-style:italic;color:var(--ink-2);font-size:.8em}
.karte-liste{list-style:none;margin:0;padding:0}
.karte-liste li{padding:12px 0;border-bottom:1px dashed var(--linie)}
.karte-liste .zeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.karte-liste .name{font-weight:600}
.karte-liste .nr{display:inline-block;min-width:2em;color:var(--ink-2);font-weight:500;font-size:14px}
.karte-liste .preis{white-space:nowrap;font-weight:600;color:var(--primaer);display:flex;gap:14px}
.karte-liste .klein{margin:4px 0 0}
.karte-liste li>.klein{padding-left:0}
sup.al,.karte-liste sup{font-size:11px;color:var(--ink-2);font-weight:400}
.legende{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:14px}
.legende dt{font-weight:600}.legende dd{margin:0}
.allergene{margin-top:56px;padding-top:24px;border-top:1px solid var(--linie)}
.pdf-bild{max-width:420px;border:1px solid var(--linie);border-radius:8px}
@media (max-width:600px){.karte-liste .zeile{flex-wrap:wrap}.karte-liste .preis{gap:10px}}

/* Fuß */
.fuss{background:#1f2328;color:#d9dcd8;font-size:15px;padding-top:56px}
.fuss a{color:#fff;text-decoration:none}.fuss a:hover{text-decoration:underline}
.fuss-raster{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding-bottom:40px}
.fuss nav{display:flex;flex-direction:column;gap:6px}
.fuss p a{display:inline-flex;gap:8px;align-items:center}
.fuss-name{font-weight:700;font-size:18px;color:#fff}
.fuss-titel{font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.1em;font-size:13px}
.fuss table.zeiten{font-size:14px}.fuss table.zeiten tr.zu{color:#9aa09c}
.fuss .sonder{color:#ffb3bd}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;padding-bottom:24px;font-size:13px;color:#9aa09c}
.fuss-unten .credits a{color:#d9dcd8}
@media print{.kopf,.fuss,.sprungleiste{display:none}}
