/* =========================================================================
   Cafe Glockenspiel — ein Stylesheet für alle Seiten
   Hausschrift Geometric 231 BT (Roman, Bold) · Orange, Weiß, Bordeaux
   Maßstab ist die bisherige Website: gleiche Bausteine, nur ordentlicher.
   ========================================================================= */

@font-face{font-family:'Geometric 231';src:url(/assets/fonts/geometric231-roman.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geometric 231';src:url(/assets/fonts/geometric231-bold.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --orange:#f39000; --orange-hell:#ffa524; --orange-text:#9a5400; --auf-orange:#1f1300;
  --bordeaux:#5a0f0a; --anthrazit:#3a3a3a;
  --ink:#2b2b2b; --grau:#666; --linie:#e3e0dc; --papier:#f7f5f2;
}

/* ---- Grundlage ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:6rem}
body{margin:0;background:#fff;color:var(--ink);font-family:'Geometric 231',Futura,'Century Gothic',sans-serif;font-weight:400;font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure,address{margin:0}
ul[role=list]{list-style:none;padding:0}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
address{font-style:normal}
strong{font-weight:700}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{width:min(100% - 2rem,74rem);margin-inline:auto}
@media (min-width:48em){.wrap{width:min(100% - 4rem,74rem)}}
.skip{position:absolute;left:1rem;top:-4rem;z-index:10;padding:.75rem 1rem;background:#000;color:#fff}
.skip:focus{top:1rem}
.nur-l{display:none}
@media (min-width:62em){.nur-l{display:revert}.nur-s{display:none}}

/* Überschriften in Versalien wie auf der gedruckten Karte */
h1,h2,h3{font-weight:400;text-transform:uppercase;letter-spacing:.035em;line-height:1.22}
h2{font-size:clamp(1.55rem,2.7vw,2.15rem)}
.rule{display:block;width:2.75rem;height:3px;background:var(--orange);margin:1.1rem 0 1.4rem}
.kicker{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-text);margin-bottom:.6rem}
.vers{text-transform:uppercase;letter-spacing:.04em;font-size:.95rem}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.8rem 1.7rem;background:var(--orange);color:var(--auf-orange);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .2s}
.btn:hover{background:var(--orange-hell)}

/* ---- Leiste ganz oben: Telefon, Öffnungszeiten, Adresse --------------- */
.topbar{background:var(--papier);border-bottom:1px solid var(--linie);font-size:.9rem;line-height:1.45;padding:.6rem 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:1.5rem}
.topbar-info{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;align-items:center;width:100%}
.topbar-info span{grid-column:1}
.topbar-tel{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .9rem;border:1px solid currentColor;text-decoration:none;white-space:nowrap}
.topbar a{text-decoration:none}
@media (min-width:62em){
  .topbar{font-size:.85rem;padding:.45rem 0}
  .topbar-info{display:flex;gap:0;width:auto}
  .topbar-tel{min-height:0;padding:0;border:0}
  .topbar-info span::before{content:"|";margin:0 .9rem;color:#b9b4ad}
}
.hinweis{background:var(--orange);color:var(--auf-orange);padding:.6rem 0;font-size:.95rem}
.hinweis .wrap{display:block}

/* ---- Kopf ------------------------------------------------------------ */
.hdr{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.97);border-bottom:1px solid var(--linie)}
.hdr .wrap{display:flex;align-items:center;gap:.75rem;min-height:4.5rem;position:relative}
.logo{margin-right:auto;flex:0 1 12rem;min-width:7.5rem}
.nav{display:none}
.nav a,.menu nav a{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.nav a{padding:.75rem 0}
.nav a:hover,.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--orange)}
.hdr-cta{padding-inline:1rem;min-height:2.75rem}
.menu summary{display:flex;align-items:center;min-height:2.75rem;padding:0 .9rem;border:1px solid var(--ink);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;left:-1rem;right:-1rem;top:100%;background:#fff;border-bottom:1px solid var(--linie);padding:.5rem 1rem 1rem;box-shadow:0 12px 24px rgba(0,0,0,.08)}
.menu nav a{display:block;padding:.9rem 0;border-bottom:1px solid var(--linie)}
.menu nav a[aria-current]{color:var(--orange-text)}
@media (min-width:75em){
  .hdr .wrap{gap:1.5rem;min-height:4.75rem}
  .nav{display:flex;gap:1.5rem}
  .menu{display:none}
  .hdr-cta{padding-inline:1.7rem;min-height:3rem}
}

/* ---- Einstieg -------------------------------------------------------- */
.hero{display:grid}
.hero-txt{padding:2.25rem 1rem 2.5rem;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(1.8rem,3.5vw,3rem);line-height:1.2}
.hero h1 span{display:block;color:var(--grau)}
.hero .rule{margin:1.4rem 0}
.lead{max-width:32rem;font-size:1.1rem}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:2rem;max-width:30rem}
.thumbs a{display:block;text-decoration:none;text-align:center}
.thumbs img{width:100%;aspect-ratio:3/2;object-fit:cover}
.thumbs span{display:block;margin-top:.5rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase}
.thumbs a:hover span{color:var(--orange-text)}
.fade{position:relative;aspect-ratio:3/2;overflow:hidden}
.fade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:fade 24s infinite}
.fade img:nth-child(1){opacity:1;animation-name:fade1}
.fade img:nth-child(2){animation-delay:8s}
.fade img:nth-child(3){animation-delay:16s}
@keyframes fade{0%{opacity:0}5%{opacity:1}33%{opacity:1}38%{opacity:0}100%{opacity:0}}
@keyframes fade1{0%{opacity:1}33%{opacity:1}38%{opacity:0}95%{opacity:0}100%{opacity:1}}
.fade::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(3rem,7vw,5.5rem);background:url(/assets/img/brush.webp) bottom/100% 100% no-repeat;pointer-events:none}
@media (min-width:56em){
  .hero{grid-template-columns:1fr 1fr;min-height:min(78vh,46rem)}
  .hero-txt{padding:4rem clamp(2rem,5vw,4.5rem)}
  .fade{aspect-ratio:auto}
  .fade::after{display:none}
}

/* ---- Abschnitte ------------------------------------------------------ */
.sec{padding:clamp(3.5rem,8vw,6.5rem) 0}
.sec-grau{background:var(--papier)}
.sec p+p{margin-top:1rem}
.split{display:grid;gap:2.5rem;align-items:center}
@media (min-width:56em){.split{grid-template-columns:1fr 1fr;gap:5rem}}

.jahre{display:grid;grid-template-columns:minmax(9rem,.6fr) 1fr;align-items:end}
.jahre-box{background:var(--orange);color:var(--auf-orange);padding:1.75rem 1.25rem;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end}
.jahre-box strong{font-weight:400;font-size:1.6rem;line-height:1.2}
.jahre-box span{margin-top:.6rem;font-size:.95rem;line-height:1.5}
.jahre img{width:100%;aspect-ratio:5/4;object-fit:cover}

.karte-box{background:var(--papier);padding:clamp(1.5rem,4vw,2.75rem)}

.band img{width:100%;height:clamp(13rem,30vw,26rem);object-fit:cover;object-position:50% 70%}

.kontakt{display:grid;gap:2.5rem}
@media (min-width:56em){.kontakt{grid-template-columns:22rem 1fr;gap:5rem;align-items:start}}
.kcard{background:var(--orange);color:var(--auf-orange)}
.kcard img{width:100%;aspect-ratio:3/2;object-fit:cover}
.kcard>div{padding:1.75rem}
.kcard-name{font-size:1.15rem;margin:.9rem 0 .6rem}
.kcard a{display:inline-block;padding:.2rem 0}
.anfahrt address{font-size:1.1rem}
.anfahrt .btn{margin-top:1.75rem}

/* ---- Fuß ------------------------------------------------------------- */
.social{display:flex;justify-content:center;gap:.6rem;padding:3rem 0}
.social a{display:grid;place-items:center;width:3rem;height:3rem;background:var(--papier)}
.social a:hover{background:var(--orange)}
.social svg{width:1.15rem;height:1.15rem;fill:var(--ink)}
.ftr{background:var(--bordeaux);color:#f7ece8;padding:3.25rem 0;font-size:.95rem}
.ftr .wrap{display:grid;gap:2rem}
@media (min-width:36em){.ftr .wrap{grid-template-columns:1fr 1fr}}
@media (min-width:62em){.ftr .wrap{grid-template-columns:1.2fr 1.1fr 1.3fr .8fr}}
.ftr h2{font-size:1rem;font-weight:700;letter-spacing:.08em;margin-bottom:.8rem}
.ftr .vers{font-size:.9rem}
.ftr a{display:inline-block;padding:.2rem 0;text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr-unten{background:var(--anthrazit);color:#f2f0ed;font-size:.85rem;padding:1rem 0}
.ftr-unten a{display:inline-block;padding:.35rem 0}

/* ---- Ruhige Bewegung: sanft einblenden, sonst nichts -------------------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:ein linear both;animation-timeline:view();animation-range:entry 0 entry 9rem}
    @keyframes ein{from{opacity:0;transform:translateY(1rem)}}
  }
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .fade img{animation:none}
  .fade img:not(:first-child){display:none}
}

/* =========================================================================
   Unterseiten
   ========================================================================= */
.seite{padding:clamp(2.5rem,6vw,4.5rem) 0 0}
.seite h1{font-size:clamp(1.8rem,3.5vw,3rem)}
.seite .lead{max-width:46rem}
.seite p+p,.seite p+dl,.seite dl+p{margin-top:1rem}
.sec-eng{padding-top:clamp(2rem,5vw,3.5rem)}
.klein{font-size:.9rem;color:var(--grau)}
.todo{font-size:.9rem;color:#a3180f}
.abstand{margin-top:2.75rem}
.oben{align-items:start}
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.btn-hell{background:none;box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.btn-hell:hover{background:var(--ink);color:#fff}
.mehr{display:inline-block;padding:.6rem 0;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-text)}
.liste{margin:1rem 0 0;padding-left:1.2rem}
.split>img{width:100%}

.zeiten{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.5rem;margin:1.25rem 0 0}
.zeiten dt{text-transform:uppercase;letter-spacing:.04em;font-size:.95rem}
.zeiten dd{margin:0}

/* Rechtstexte, 404 */
.text{padding-bottom:clamp(3rem,7vw,5rem)}
.text>*{max-width:44rem}
.text h2{font-size:1.15rem;margin:2.25rem 0 .6rem}

/* drei Kacheln nebeneinander */
.drei{display:grid;gap:2.5rem}
@media (min-width:48em){.drei{grid-template-columns:repeat(3,1fr);gap:2rem}}
.drei img{width:100%;aspect-ratio:3/2;object-fit:cover}
.drei h2{font-size:1.3rem;margin:1.25rem 0 .6rem}

/* Räume */
.raum{display:grid;gap:1.5rem;padding:clamp(2.25rem,5vw,3.75rem) 0;border-top:1px solid var(--linie)}
.raum:first-child{border-top:0}
.raum h2{font-size:1.6rem}
.raum p+p{margin-top:.75rem}
@media (min-width:56em){.raum{grid-template-columns:18rem 1fr;gap:3.5rem}}
.bilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.75rem;align-content:start}
.bilder img{width:100%;aspect-ratio:3/2;object-fit:cover}
.bilder .hoch{aspect-ratio:auto;max-height:26rem;object-fit:contain;background:var(--papier);padding:1rem}
.plan{max-width:28rem;margin-inline:auto;mix-blend-mode:multiply}

/* Glockenspiel: Spielzeiten, Miniatur */
.spiel{display:grid;gap:.9rem;margin-top:1.75rem}
.spiel li{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;align-items:baseline;border-top:1px solid var(--linie);padding-top:.9rem}
.spiel strong{font-weight:400;font-size:1.25rem;color:var(--orange-text)}
.mini{display:grid;gap:2rem;align-items:center}
.mini img{max-height:26rem;width:auto;margin-inline:auto;mix-blend-mode:multiply}
@media (min-width:48em){.mini{grid-template-columns:16rem 1fr;gap:4rem}}

/* Reservierung */
.res{display:grid;gap:3rem;align-items:start}
@media (min-width:56em){.res{grid-template-columns:1.25fr 1fr;gap:4.5rem}}
.tisch{background:var(--papier);padding:clamp(2rem,6vw,4rem) 1.5rem;text-align:center}
.tisch .klein{max-width:24rem;margin:1rem auto 0}
.tisch.offen{padding:0}
.tisch iframe{display:block;width:100%;height:46rem;border:0;background:#fff}

/* ---- Speisekarte (aus data/menu.json, tools/render-menu.mjs) ---------- */
.karte{padding-bottom:clamp(3rem,7vw,5rem)}
.menu-nav{position:sticky;top:4.5rem;z-index:2;background:#fff;border-bottom:1px solid var(--linie);margin-top:2.5rem}
@media (min-width:75em){.menu-nav{top:4.75rem}}
.menu-nav ul{list-style:none;display:flex;gap:1.5rem;overflow-x:auto;margin:0;padding:0}
.menu-nav a{display:block;padding:1rem 0;white-space:nowrap;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.menu-nav a:hover{box-shadow:inset 0 -2px 0 var(--orange)}
.menu-group,.menu-section{scroll-margin-top:9rem}
.menu-group{padding-top:3rem}
.menu-group>h2{padding-bottom:.6rem;border-bottom:3px solid var(--orange)}
.menu-section{max-width:52rem}
.menu-section h3{font-size:1.15rem;font-weight:700;margin-top:2.5rem}
.menu-section .meta{font-size:.85rem;color:var(--grau);margin:.2rem 0 .75rem}
.menu-items{list-style:none;margin:0;padding:0}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:.1rem 1.25rem;padding:.7rem 0;border-bottom:1px solid var(--linie)}
.menu-item__name{text-transform:uppercase;letter-spacing:.03em}
.menu-item__desc{grid-column:1;font-size:.92rem;line-height:1.55;color:var(--grau)}
.menu-item__price{grid-column:2;grid-row:1;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.menu-item__price small{color:var(--grau)}
.tag{display:inline-block;margin-left:.5em;padding:0 .5em;border:1px solid currentColor;font-size:.68rem;letter-spacing:.08em;line-height:1.6;vertical-align:.12em;color:var(--grau)}
.tag--vegan{color:#2f5a1e}
.tag--abend{color:var(--orange-text)}
.menu-extras{list-style:none;margin:.75rem 0 0;padding:0;columns:16rem;column-gap:2.5rem;font-size:.92rem;color:var(--grau)}
.menu-extras li{break-inside:avoid;display:flex;justify-content:space-between;gap:1rem;padding:.15rem 0}
.menu-extras span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
sup.codes{margin-left:.15em;font-size:.62em;color:var(--grau);letter-spacing:0}