/* Schriften lokal — keine Verbindung zu Google-Servern (DSGVO). */
@font-face{ font-family:"Alfa Slab One"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/alfa-slab-one-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Alfa Slab One"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/alfa-slab-one-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/karla-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/karla-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/karla-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root{
  --noche:#16154E; --noche-2:#1D1C60; --noche-3:#262471; --line:#35337F;
  --maiz:#FCC900; --jade:#2CBFC0; --sangre:#E8404F; --naranja:#F4761F; --rosa:#EE5D8F;
  --cal:#F6F1E4; --cal-dim:#B9B4CE;
  --shell:min(1080px, 100% - 2.5rem); --r:14px;
  --f-display:"Alfa Slab One",Georgia,serif;
  --f-body:"Karla",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--noche); color:var(--cal); font:400 1rem/1.6 var(--f-body); overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--maiz); outline-offset:3px; border-radius:4px; }
.shell{ width:var(--shell); margin-inline:auto; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* header */
.top{ position:sticky; top:0; z-index:60; background:rgba(22,21,78,.94); border-bottom:1px solid var(--line); }
@supports (backdrop-filter:blur(6px)){ .top{ backdrop-filter:blur(8px); } }
.top__in{ display:flex; align-items:center; gap:1rem; min-height:60px; padding-block:.5rem; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; }
.brand img{ width:38px; height:38px; object-fit:cover; border-radius:8px; }
.brand b{ font:400 1.05rem/1 var(--f-display); color:var(--maiz); }
.top nav{ display:flex; gap:1.3rem; }
.top nav a{ font:500 .82rem/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--cal-dim); text-decoration:none; padding-block:.4rem; }
.top nav a:hover, .top nav a[aria-current="page"]{ color:var(--maiz); }
.tel{ display:inline-flex; align-items:center; gap:.45rem; background:var(--maiz); color:var(--noche); text-decoration:none;
  font:600 .85rem/1 var(--f-mono); padding:.65rem .95rem; border-radius:999px; white-space:nowrap; }
.tel:hover{ background:#fff; }
@media (max-width:900px){ .top nav{ display:none; } }

/* status */
.status{ background:var(--noche-2); border-bottom:1px solid var(--line); font:500 .8rem/1.4 var(--f-mono); letter-spacing:.03em; }
.status__in{ display:flex; align-items:center; gap:.6rem; padding:.6rem 0; flex-wrap:wrap; }
.status__live{ display:inline-flex; align-items:center; gap:.55rem; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--cal-dim); flex:none; }
.dot--on{ background:var(--jade); }
.dot--soon{ background:var(--maiz); }
.dot--off{ background:var(--sangre); }
.status__sep{ color:var(--line); }
.status em{ font-style:normal; color:var(--cal-dim); }

/* picado */
.picado{ display:block; width:100%; height:52px; }
.picado--flip{ transform:rotate(180deg); }

/* hero */
.hero{ padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(1.8rem,4vw,2.6rem); text-align:center; }
.hero__art{ width:min(280px,58%); margin:0 auto clamp(.6rem,2vw,1.1rem); }
.hero h1{ font:400 clamp(2rem,7vw,3.9rem)/0.98 var(--f-display); margin:0 0 1rem; }
.hero h1 span{ color:var(--maiz); display:block; }
.hero__sub{ max-width:44ch; margin:0 auto 1.1rem; color:var(--cal-dim); font-size:clamp(1rem,2.4vw,1.12rem); }
.hero__meta{ display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem .85rem;
  font:500 .74rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--jade); margin-bottom:1.9rem; }
.hero__meta i{ font-style:normal; color:var(--line); }
.cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; padding:.85rem 1.5rem; border-radius:999px;
  border:2px solid transparent; font:600 .9rem/1 var(--f-mono); cursor:pointer; transition:transform .15s ease,background .15s ease,color .15s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:var(--maiz); color:var(--noche); }
.btn--solid:hover{ background:#fff; }
.btn--ghost{ border-color:var(--line); color:var(--cal); background:none; }
.btn--ghost:hover{ border-color:var(--maiz); color:var(--maiz); }

/* page heading */
.phead{ padding:clamp(2rem,5vw,3rem) 0 1.4rem; }
.phead h1{ font:400 clamp(1.9rem,5.5vw,3rem)/1.05 var(--f-display); color:var(--maiz); margin:0 0 .7rem; }
.phead p{ margin:0; color:var(--cal-dim); max-width:62ch; }

/* Speisekarte: die eingescannten Seiten */
.karte{ padding:0 0 3rem; }
.karte__page{ margin:0 0 1.6rem; }
.karte__page figcaption{ font:500 .74rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--cal-dim); margin-bottom:.55rem; }
.karte__page img{ width:100%; border-radius:10px; border:1px solid var(--line); }
.karte__switch{ display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 2rem; }

/* info */
.info{ background:var(--noche-2); padding:3rem 0; border-block:1px solid var(--line); }
.info__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2.4rem; }
.info h2{ font:500 .78rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--jade); margin:0 0 1rem; }
.hours{ list-style:none; margin:0; padding:0; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; padding:.42rem 0; border-bottom:1px solid rgba(53,51,127,.45); font-size:.93rem; }
.hours b{ font:500 .9rem/1.3 var(--f-mono); color:var(--cal); font-variant-numeric:tabular-nums; }
.hours .shut{ color:var(--sangre); font-family:var(--f-mono); font-size:.85rem; }
.info p{ margin:0 0 .8rem; color:var(--cal-dim); font-size:.94rem; }
.info a{ color:var(--maiz); }
.addr{ font-style:normal; line-height:1.75; }
.addr strong{ color:var(--cal); }
.callout{ border-left:3px solid var(--maiz); padding:.2rem 0 .2rem 1rem; margin:1.2rem 0 0; font-size:.92rem; color:var(--cal-dim); }

/* prose (Impressum) */
.prose{ padding:0 0 3rem; max-width:70ch; }
.prose h2{ font:400 1.3rem/1.2 var(--f-display); color:var(--maiz); margin:2rem 0 .7rem; }
.prose p{ margin:0 0 .9rem; color:var(--cal-dim); }
.prose strong{ color:var(--cal); }

/* footer */
footer{ padding:3rem 0 5rem; font-size:.86rem; color:var(--cal-dim); }
.foot__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2rem; }
footer h2{ font:500 .74rem/1 var(--f-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--cal); margin:0 0 .7rem; }
footer p{ margin:0 0 .5rem; line-height:1.65; }
footer a:hover{ color:var(--maiz); }
.foot__bar{ margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid var(--line); font-size:.8rem; }

@media (max-width:560px){
  .status{ font-size:.72rem; }
  .status__sep, .status em{ display:none; }
  .tel{ font-size:.78rem; padding:.6rem .8rem; }
  .brand b{ font-size:.95rem; }
  .brand img{ width:32px; height:32px; }
  .hero__meta{ font-size:.66rem; }
}
@media (prefers-reduced-motion:reduce){ *{ transition-duration:.01ms !important; } html{ scroll-behavior:auto; } }