/* steakhouse.lu — Forge & Ember
   Palette aus dem Logo: Schmiedeschwarz, gebürsteter Stahl, Glutrot, Maillard-Braun
   Schriften liegen selbst auf dem Server: keine Verbindung zu Google, keine
   IP-Übermittlung an Dritte, kein Hinweis in der Datenschutzerklärung nötig. */

@font-face{
  font-family:"Big Shoulders Display";
  src:url("../fonts/bigshoulders-var.woff2") format("woff2-variations"),
      url("../fonts/bigshoulders-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-var.woff2") format("woff2-variations"),
      url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-italic-var.woff2") format("woff2-variations"),
      url("../fonts/newsreader-italic-var.woff2") format("woff2");
  font-weight:200 800; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plexmono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plexmono-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  --ink:#0B0B0C; --ink-2:#111214; --ink-3:#17191C; --ink-4:#1F2226;
  --steel:#C7CCD2; --steel-dim:#8A9199; --steel-line:#2A2E34;
  --ember:#C0141E; --ember-bright:#E8232F; --sear:#8A4A24;
  --bone:#F4EFE7; --marbling:#E3D9C8;
  --display:"Big Shoulders Display",'Arial Narrow',sans-serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --wrap:1180px; --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--steel);
  font-family:var(--body);font-size:1.0625rem;line-height:1.68;
  font-synthesis-weight:none;
  background-image:radial-gradient(1100px 520px at 78% -8%,rgba(192,20,30,.13),transparent 62%);
  background-repeat:no-repeat;background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bone);text-decoration-color:rgba(192,20,30,.55);text-underline-offset:3px}
a:hover{color:#fff;text-decoration-color:var(--ember-bright)}
:focus-visible{outline:2px solid var(--ember-bright);outline-offset:3px}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem,820px);margin-inline:auto}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--bone);font-weight:700;
  line-height:.94;letter-spacing:.005em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.9rem,7.4vw,5.6rem);text-transform:uppercase;font-weight:800}
h2{font-size:clamp(2rem,4.4vw,3.3rem);text-transform:uppercase}
h3{font-size:clamp(1.35rem,2.2vw,1.75rem);text-transform:uppercase;letter-spacing:.02em}
h4{font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;color:var(--marbling)}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.1rem,1.9vw,1.32rem);color:#D8DCE1;line-height:1.6}
strong{color:var(--bone);font-weight:600}
em{color:var(--marbling)}
small{font-size:.8125rem}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel-dim);display:flex;align-items:center;gap:.6rem;margin:0 0 1rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--ember);flex:none}
.sear-rule{height:2px;border:0;margin:0;
  background:linear-gradient(90deg,var(--ember) 0%,var(--sear) 26%,rgba(138,74,36,.25) 55%,transparent 100%)}
.mono{font-family:var(--mono)}
.dim{color:var(--steel-dim)}

/* ---------- Kopfzeile ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(11,11,12,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--steel-line)}
.topbar__in{display:flex;align-items:center;gap:1.25rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand img{width:38px;height:auto}
.brand b{font-family:var(--display);font-size:1.32rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--bone);font-weight:800;line-height:1}
.brand b i{color:var(--ember-bright);font-style:normal}
.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
.nav a{font-family:var(--mono);font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--steel-dim);text-decoration:none;padding:.55rem .62rem;border-radius:var(--r)}
.nav a:hover{color:var(--bone);background:var(--ink-3)}
.nav a[aria-current="page"]{color:var(--bone);box-shadow:inset 0 -2px 0 var(--ember)}
.nav .btn{margin-left:.5rem}
.burger{display:none;margin-left:auto;background:var(--ink-3);border:1px solid var(--steel-line);
  color:var(--bone);width:44px;height:40px;border-radius:var(--r);cursor:pointer;font-size:1.1rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.13em;text-transform:uppercase;padding:.82rem 1.35rem;border-radius:var(--r);
  border:1px solid var(--ember);background:var(--ember);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .18s,transform .18s,border-color .18s}
.btn:hover{background:var(--ember-bright);border-color:var(--ember-bright);color:#fff;transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:var(--steel-line);color:var(--steel)}
.btn--ghost:hover{background:var(--ink-3);border-color:var(--steel-dim);color:var(--bone)}
.btn--sm{padding:.55rem .9rem;font-size:.7rem}

/* ---------- Abschnitte ---------- */
section{padding-block:clamp(3.2rem,7vw,5.6rem)}
section.tight{padding-block:clamp(2rem,4vw,3rem)}
.section-head{max-width:70ch;margin-bottom:2.4rem}
.alt{background:var(--ink-2);border-block:1px solid var(--steel-line)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--steel-line);
  padding-block:clamp(3rem,8vw,6.5rem)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{margin-bottom:.35em}
.hero h1 span{display:block;color:var(--ember-bright)}
.hero__media{position:relative}
.hero__media img{border-radius:var(--r);border:1px solid var(--steel-line);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95)}
.hero__stat{position:absolute;left:-14px;bottom:-18px;background:var(--ink);
  border:1px solid var(--steel-line);border-left:3px solid var(--ember);padding:.85rem 1.15rem;border-radius:var(--r)}
.hero__stat b{font-family:var(--display);font-size:2.1rem;color:var(--bone);display:block;line-height:.9}
.hero__stat span{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim)}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}

/* ---------- Raster & Karten ---------- */
.grid{display:grid;gap:1.1rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--ink-3);border:1px solid var(--steel-line);border-radius:var(--r);
  padding:1.5rem;position:relative;transition:border-color .2s,transform .2s,background .2s}
a.card{text-decoration:none;color:inherit;display:block}
a.card:hover{border-color:rgba(192,20,30,.55);transform:translateY(-2px);background:var(--ink-4)}
.card h3{margin-bottom:.35em}
.card p{margin-bottom:0;font-size:.97rem;color:var(--steel-dim)}
.card__no{font-family:var(--mono);font-size:.7rem;color:var(--ember);letter-spacing:.16em;display:block;margin-bottom:.7rem}
.card__img{margin:-1.5rem -1.5rem 1.25rem;border-bottom:1px solid var(--steel-line);
  border-radius:var(--r) var(--r) 0 0;overflow:hidden;aspect-ratio:16/9}
.card__img img{width:100%;height:100%;object-fit:cover}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.85rem 0 0;padding:0;list-style:none}
.tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel-dim);border:1px solid var(--steel-line);padding:.28rem .5rem;border-radius:var(--r)}
.tag--hot{color:#F0B9BC;border-color:rgba(192,20,30,.5);background:rgba(192,20,30,.1)}

/* ---------- Teilstückkarte ---------- */
.cutmap-shell{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:start}
.cutmap-stage{background:var(--ink-2);border:1px solid var(--steel-line);border-radius:var(--r);padding:.5rem}
.cutmap{width:100%;height:auto;display:block;touch-action:manipulation}
.cw-deco{fill:#33383F}.cw-deco--far{fill:#24272C}.cw-eye{fill:var(--ink)}
.cw-region .cw-shape{fill:#464C54;stroke:var(--ink);stroke-width:3;transition:fill .16s}
.cw-region{cursor:pointer}
.cw-region:hover .cw-shape,.cw-region:focus-visible .cw-shape{fill:#5C646E}
.cw-region.is-active .cw-shape{fill:var(--ember)}
.cw-region--filet .cw-shape{fill:#6E3038}
.cw-region--filet.is-active .cw-shape{fill:var(--ember-bright)}
.cw-label{fill:#EAEDF0;font-family:var(--display);font-weight:700;letter-spacing:.09em;
  text-anchor:middle;dominant-baseline:middle;pointer-events:none;text-transform:uppercase}
.cutmap-panel{background:var(--ink-3);border:1px solid var(--steel-line);
  border-left:3px solid var(--ember);border-radius:var(--r);padding:1.6rem;min-height:340px}
.cutmap-panel h3{margin-bottom:.25em}
.cutmap-panel .kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember);margin-bottom:.8rem}
.cutmap-panel ul{margin:.9rem 0 0;padding-left:1.05rem}
.cutmap-panel li{margin-bottom:.45rem;font-size:.97rem}
.cutmap-panel li b{color:var(--bone)}
.region-detail[hidden]{display:none}
.cutmap-hint{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--steel-dim);
  text-transform:uppercase;margin-top:.9rem;text-align:center}

/* ---------- Garstufen-Skala ---------- */
.donenessscale{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin:2rem 0 0;
  border:1px solid var(--steel-line);border-radius:var(--r);overflow:hidden}
.dz{background:var(--ink-3);padding:1.1rem .9rem;text-align:center;position:relative}
.dz__core{width:100%;aspect-ratio:2.6/1;border-radius:1px;margin-bottom:.8rem;
  border:3px solid #4A3226;background:var(--core,#B3212C)}
.dz b{display:block;font-family:var(--display);font-size:1.18rem;text-transform:uppercase;color:var(--bone);line-height:1}
.dz span{font-family:var(--mono);font-size:.72rem;color:var(--ember);display:block;margin-top:.4rem}
.dz small{display:block;color:var(--steel-dim);font-size:.76rem;margin-top:.35rem;line-height:1.4}

/* ---------- Tabellen ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--steel-line);border-radius:var(--r);background:var(--ink-2)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.94rem}
th,td{text-align:left;padding:.78rem 1rem;border-bottom:1px solid var(--steel-line);vertical-align:top}
th{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel-dim);background:var(--ink-3);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.02)}
td b{color:var(--bone)}
td .mono{color:var(--marbling)}

/* ---------- Prosa ---------- */
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.9rem;color:var(--marbling)}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1.2em}
.prose li{margin-bottom:.5rem}
.prose figure{margin:2rem 0}
.prose figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--steel-dim);margin-top:.7rem;text-transform:uppercase}
blockquote{margin:2rem 0;padding:1.2rem 1.5rem;background:var(--ink-3);
  border-left:3px solid var(--sear);font-style:italic;color:var(--marbling)}
.callout{background:var(--ink-3);border:1px solid var(--steel-line);border-top:2px solid var(--ember);
  padding:1.4rem 1.5rem;border-radius:var(--r);margin:2rem 0}
.callout h4{margin-bottom:.5em}
.callout p:last-child{margin-bottom:0}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--steel-line);padding:.35rem 0}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;position:relative;
  font-family:var(--display);font-size:1.22rem;text-transform:uppercase;color:var(--bone);letter-spacing:.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.85rem;color:var(--ember);
  font-family:var(--mono);font-size:1.35rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:.6rem;margin-bottom:.4rem;color:var(--steel-dim)}

/* ---------- Verzeichnis ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.6rem}
.chip{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink-3);border:1px solid var(--steel-line);color:var(--steel-dim);
  padding:.5rem .85rem;border-radius:var(--r);cursor:pointer;transition:.16s}
.chip:hover{color:var(--bone);border-color:var(--steel-dim)}
.chip[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:#fff}
.searchbar{display:flex;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.searchbar input{flex:1;min-width:240px}
.venue{background:var(--ink-3);border:1px solid var(--steel-line);border-radius:var(--r);
  padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.55rem}
.venue[hidden]{display:none}
.venue h3{margin:0;font-size:1.3rem}
.venue__meta{font-family:var(--mono);font-size:.74rem;color:var(--steel-dim);letter-spacing:.04em}
.venue p{margin:0;font-size:.95rem;color:var(--steel-dim)}
.venue__links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.35rem;
  font-family:var(--mono);font-size:.73rem;letter-spacing:.09em;text-transform:uppercase}
.venue__links a{color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(192,20,30,.6);padding-bottom:2px}
.venue__links a:hover{border-color:var(--ember-bright)}
.count{font-family:var(--mono);font-size:.74rem;color:var(--steel-dim);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:1.2rem;display:block}
.empty-state{border:1px dashed var(--steel-line);padding:2rem;text-align:center;border-radius:var(--r)}

/* ---------- Formulare ---------- */
form{display:grid;gap:1.1rem}
.field{display:grid;gap:.45rem}
.field--row{grid-template-columns:1fr 1fr;gap:1.1rem;display:grid}
label{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-dim)}
label .req{color:var(--ember)}
input,select,textarea{width:100%;background:var(--ink-2);border:1px solid var(--steel-line);
  color:var(--bone);padding:.8rem .9rem;border-radius:var(--r);font-family:var(--body);
  font-size:1rem;transition:border-color .16s}
input:focus,select:focus,textarea:focus{border-color:var(--ember);outline:none}
input::placeholder,textarea::placeholder{color:#5C636B}
textarea{min-height:150px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--steel-dim) 50%),
  linear-gradient(135deg,var(--steel-dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.5rem}
.check{display:flex;gap:.7rem;align-items:flex-start}
.check input{width:18px;height:18px;flex:none;margin-top:.2rem;accent-color:var(--ember)}
.check label{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.9rem;color:var(--steel-dim)}
.formnote{font-size:.85rem;color:var(--steel-dim)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{padding:1rem 1.2rem;border-radius:var(--r);font-size:.95rem;display:none}
.formmsg.ok{display:block;background:rgba(40,120,70,.16);border:1px solid rgba(70,170,110,.45);color:#B6E3C8}
.formmsg.err{display:block;background:rgba(192,20,30,.14);border:1px solid rgba(192,20,30,.5);color:#F2BFC2}

/* ---------- Brotkrumen ---------- */
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel-dim);padding-top:1.6rem}
.crumbs a{color:var(--steel-dim);text-decoration:none}
.crumbs a:hover{color:var(--bone)}
.crumbs span{margin:0 .5rem;color:var(--ember)}

/* ---------- Seitenkopf ---------- */
.pagehead{padding-block:clamp(2rem,5vw,3.4rem) clamp(1.6rem,4vw,2.6rem);
  border-bottom:1px solid var(--steel-line)}
.pagehead .lede{max-width:62ch}

/* ---------- CTA-Band ---------- */
.band{background:linear-gradient(120deg,#17191C 0%,#1F1113 62%,#2A0E11 100%);
  border-block:1px solid var(--steel-line)}
.band__in{display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{margin-bottom:.25em}
.band p{margin:0;color:var(--steel-dim);max-width:52ch}

/* ---------- Fußzeile ---------- */
.foot{border-top:1px solid var(--steel-line);background:var(--ink-2);padding-block:3.4rem 2rem;margin-top:0}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:2rem}
.foot h4{color:var(--bone);font-size:.78rem;letter-spacing:.16em;margin-bottom:1rem;font-family:var(--mono);font-weight:600}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.5rem}
.foot a{color:var(--steel-dim);text-decoration:none;font-size:.92rem}
.foot a:hover{color:var(--bone)}
.foot__bottom{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--steel-line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:#666C74;text-transform:uppercase}
.foot__brand p{font-size:.92rem;color:var(--steel-dim);max-width:34ch}

.visually-hidden,caption.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;background:var(--ember);color:#fff;padding:.8rem 1.2rem;z-index:99}
.skip:focus{left:1rem;top:.6rem}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

/* ---------- Responsiv ---------- */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{order:-1}
  .cutmap-shell{grid-template-columns:1fr}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr 1fr}
}
/* --- Kopfzeile: Platz reicht nicht fuer alles auf einmal ----------------
   Bis 1180 px wuerde die Navigation umbrechen und die Kopfzeile doppelt so
   hoch werden. Zuerst faellt daher die Schaltflaeche weg — sie steht ohnehin
   im Hero, im Zwischenband und in der Fusszeile. Ab 1040 px abwaerts wandert
   alles ins Klappmenue.                                                     */
/* Volle Beschriftung, wo Platz ist; Kurzform, wo es eng wird. */
.nur-eng{display:none}
@media (max-width:1400px){
  .nur-weit{display:none}
  .nur-eng{display:inline}
}
@media (max-width:1180px){
  .topbar__cta{display:none}
  .nav{gap:.05rem}
  .nav > a{padding-inline:.55rem;font-size:.74rem}
}
@media (max-width:1040px){
  .nav{position:fixed;inset:68px 0 auto 0;background:var(--ink-2);border-bottom:1px solid var(--steel-line);
    flex-direction:column;align-items:stretch;gap:0;padding:.6rem 1.25rem 1.2rem;display:none}
  .nav.open{display:flex}
  .nav > a{padding:.85rem .4rem;font-size:.86rem;border-bottom:1px solid var(--steel-line)}
  /* Im Klappmenue ist Platz genug — dort wieder die volle Beschriftung */
  .topbar__cta{display:inline-flex;margin:.9rem 0 0;justify-content:center}
  .nur-weit{display:inline}
  .nur-eng{display:none}
  .nav .langswitch{align-self:flex-start;margin:.9rem 0 0}
  .nav .langswitch a{border-bottom:0;padding:.6rem .75rem;font-size:.72rem}
  .burger{display:block}
}
@media (max-width:860px){
  .grid--3,.grid--2{grid-template-columns:1fr}
  .donenessscale{grid-template-columns:repeat(3,1fr)}
  section{padding-block:3rem}
}
@media (max-width:560px){
  .grid--4{grid-template-columns:1fr}
  .field--row{grid-template-columns:1fr}
  .donenessscale{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr}
  .hero__stat{position:static;margin-top:1rem;display:inline-block}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}
@media print{
  /* Bildschirm-Navigation, Interaktion und Werbeflächen fliegen raus */
  .topbar,.foot,.band,.btn,.skip,.crumbs,.burger,
  .chips,.filterbar,.searchbox,.cutmap-hint,.empty,
  form,.formcard,.cta,.teaser,.pdfbox-wrap,.langswitch,.notice{display:none!important}

  @page{size:A4;margin:16mm 15mm 18mm}

  html,body{background:#fff!important;color:#111!important}
  body{font-size:10.5pt;line-height:1.5}
  .rv{opacity:1!important;transform:none!important}
  .wrap{max-width:none;padding:0}
  section{padding:0;margin:0 0 8mm}

  /* Alles, was am Bildschirm hell auf dunkel steht, muss auf Papier dunkel werden */
  main, main *:not(.eyebrow):not(.card__no):not(.kicker){color:#111!important}
  .alt,.band,section,.tablewrap,.donenessscale,.prose,.faq{
    background:transparent!important;border-block:0!important}
  .lede{font-size:11.5pt;color:#333!important}
  .dim,.dz small,.muted{color:#444!important}
  .dz{background:#fff!important;border:.4pt solid #BBB!important;
    break-inside:avoid;page-break-inside:avoid}
  .dz b{color:#000!important;font-size:12pt}
  .dz span,.eyebrow,.card__no,.kicker{color:#8A0F16!important}
  .dz__core{border:.3pt solid #BBB;height:16mm!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .donenessscale{display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;gap:3mm!important}
  .sear-rule{border-top:.6pt solid #999;background:none!important;height:0!important;
    margin:5mm 0!important}
  .pagehead,.section-head{padding:0!important;background:none!important}
  .callout{background:#F6F4F1!important;border:.4pt solid #BBB!important;
    border-top:1.2pt solid #8A0F16!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}

  h1,h2,h3,h4{color:#000!important;break-after:avoid;page-break-after:avoid}
  h1{font-size:24pt;margin:0 0 4mm}
  h2{font-size:15pt;margin:7mm 0 2mm;border-bottom:.4pt solid #999;padding-bottom:1mm}
  h3{font-size:11.5pt;margin:4mm 0 1.5mm}
  p,li{orphans:3;widows:3}
  .eyebrow{color:#8A0F16!important;font-size:7.5pt}
  .lead{font-size:11.5pt}

  /* Tabellen sind der eigentliche Grund zum Ausdrucken */
  table{width:100%;border-collapse:collapse;font-size:9pt;break-inside:auto}
  thead{display:table-header-group}
  tr{break-inside:avoid;page-break-inside:avoid}
  th{background:#EDEDED!important;color:#000!important;
     border-bottom:.6pt solid #666;font-size:7.5pt;padding:1.5mm 2mm;
     -webkit-print-color-adjust:exact;print-color-adjust:exact}
  td{border-bottom:.3pt solid #CCC;padding:1.5mm 2mm;color:#111!important}

  /* Karten und Kästen als leichte Rahmen statt dunkler Flächen */
  .card,.dz,.venue,.callout,.cutmap-panel,figure{
    background:#fff!important;border:.4pt solid #BBB!important;
    color:#111!important;break-inside:avoid;page-break-inside:avoid;
    padding:3mm;margin:0 0 3mm}
  .grid,.cards,.venues{display:block!important}
  .card__no,.dz span,.kicker{color:#8A0F16!important}
  .tag{border:.3pt solid #999!important;color:#333!important;background:#fff!important}

  /* Aufklappbare FAQ im Druck immer offen */
  details{break-inside:avoid}
  details>summary{list-style:none;font-weight:600}
  details[open]>summary,details>summary{color:#000!important}
  details>*{display:block!important}

  /* Die Teilstückkarte bleibt drin, aber hell */
  .cutmap{background:#fff!important;border:.4pt solid #BBB!important}
  .cw-region path,.cw-region polygon{fill:#E4E4E4!important;stroke:#666!important}
  .cw-region.is-active path,.cw-region.is-active polygon{fill:#D8D8D8!important}
  .cw-label{fill:#111!important}
  .cutmap svg{max-height:110mm}

  /* Detailpanels der Cutmap alle zeigen, nicht nur das aktive */
  .cutmap-panel{display:block!important}

  img{max-width:100%!important;height:auto!important;break-inside:avoid}

  /* Zieladressen von Links sichtbar machen — auf Papier sonst wertlos */
  a{color:#111!important;text-decoration:none}
  main a[href^="http"]::after{content:" (" attr(href) ")";
    font-size:7.5pt;color:#666;word-break:break-all}
  main a[href^="/"]::after,main a[href^="#"]::after,
  main a[href$=".html"]::after{content:""}

  /* Fußzeile auf jedem Blatt */
  .printfoot{display:block!important;position:running(fuss)}
}

.printfoot{display:none}

/* --- Responsive-Korrekturen ---------------------------------------------
   1. Grid-Kinder dürfen nicht von ihrem Inhalt aufgeblasen werden. Ohne
      min-width:0 setzt ein 1800 px breites Bild die ganze Spalte auf 1800 px,
      was das Layout unterhalb von 1000 px sprengt.
   2. Bilder skalieren grundsätzlich mit.
   3. Tippziele in Fußzeile und Fließtext auf mindestens 24 px Höhe bringen
      (WCAG 2.2, Erfolgskriterium 2.5.8).                                    */
img,svg,video{max-width:100%;height:auto}
.grid>*,.hero__grid>*,.cutmap-shell>*,.foot__grid>*,.band__in>*{min-width:0}
.hero__grid,.grid,.cutmap-shell{grid-template-columns:minmax(0,1fr)}
@media(min-width:1001px){
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .cutmap-shell{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:861px) and (max-width:1000px){
  .grid--3,.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.foot ul a,.prose a,.venue__links a,.region-detail a,.foot__brand a,
.card p a,.formnote a,.check label a{display:inline-block;padding-block:.35rem}
.foot ul li{margin-bottom:.1rem}
@media(max-width:560px){
  .langswitch a{padding:.6rem .7rem}
  table{font-size:.88rem}
}

/* --- Kachel im Verzeichnis ---------------------------------------------
   Solange keine freigegebenen Fotos der Betriebe vorliegen, bekommt jeder
   Eintrag eine erzeugte Kachel: Rostmuster, Glutschimmer und das Monogramm
   des Hauses. Alles aus CSS — keine zusaetzliche Datei, kein Serverabruf.
   Die Farbe richtet sich nach dem Konzept aus data-kind.                  */
.venue{display:grid;grid-template-columns:5.25rem 1fr;gap:1.15rem;align-items:start}
/* display:grid schlaegt das UA-Stylesheet — sonst blieben ausgefilterte
   Eintraege trotz hidden-Attribut sichtbar. */
.venue[hidden],.region-detail[hidden],[hidden]{display:none!important}
.venue > :not(.venue__thumb){grid-column:2}

.venue__thumb{
  grid-column:1; grid-row:1 / span 5; position:relative; overflow:hidden;
  width:5.25rem; aspect-ratio:1; border-radius:var(--r);
  border:1px solid var(--steel-line); background:var(--ink-4);
  display:grid; place-items:center;
  --glut:var(--ember);
}
/* Rost: feine waagerechte Stäbe */
.venue__thumb::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(
    180deg, rgba(255,255,255,.055) 0 1px, transparent 1px 6px);
}
/* Glut, die von unten durch den Rost scheint */
.venue__thumb::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 118%,
             var(--glut) 0%, rgba(0,0,0,0) 62%);
  opacity:.55;
}
.venue__thumb img{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover; display:block;
}
.venue__thumb span{
  position:relative; z-index:1;
  font-family:var(--display); font-weight:700; font-size:1.42rem;
  letter-spacing:.04em; color:var(--bone); line-height:1;
  text-shadow:0 1px 6px rgba(0,0,0,.65);
}
.venue:hover .venue__thumb::after{opacity:.78}
.venue__thumb::after{transition:opacity .25s ease}

/* Konzeptfarben */
.venue[data-kind~="dryaged"]     .venue__thumb{--glut:#7E1B18}
.venue[data-kind~="grill"]       .venue__thumb{--glut:#C0141E}
.venue[data-kind~="suedamerika"] .venue__thumb{--glut:#B4531C}
.venue[data-kind~="hotstone"]    .venue__thumb{--glut:#6E747C}
.venue[data-kind~="halal"]       .venue__thumb{--glut:#8A4A24}

@media(max-width:620px){
  /* Auf schmalen Bildschirmen wuerde die Kachel die Textspalte erdruecken.
     Sie wird deshalb zum flachen Streifen ueber dem Eintrag. */
  .venue{display:block}
  .venue > *{grid-column:auto}
  .venue__thumb{
    width:100%; aspect-ratio:auto; height:3rem;
    margin:0 0 1rem; place-items:center start; padding-inline:.9rem;
  }
  .venue__thumb::after{
    background:radial-gradient(80% 160% at 12% 130%,
               var(--glut) 0%, rgba(0,0,0,0) 68%);
  }
  .venue__thumb span{font-size:1.15rem}
  .venue__thumb img{filter:brightness(.62)}
}
@media print{
  .venue__thumb{display:none}
  .venue{display:block}
}

/* --- Video-Hero -------------------------------------------------------- */
.hero--video{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(30rem, 76vh, 46rem);
  display:flex; align-items:center;
  padding-block:clamp(3rem,8vh,6rem);
  border-bottom:1px solid var(--steel-line);
}
.hero__media{position:absolute; inset:0; z-index:-2; background:var(--ink)}
.hero__media img,.hero__media video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Das Standbild liegt unter dem Video und trägt die erste Bildschirmseite,
   bis der Film geladen ist. Erst dann wird das Video sichtbar geschaltet. */
.hero__poster{position:absolute; inset:0; display:block}
.hero__poster img{width:100%; height:100%; object-fit:cover; display:block}
.hero__video{position:absolute; inset:0; opacity:0; transition:opacity .9s ease}
.hero__video.is-ready{opacity:1}

/* Abdunklung: links kräftig für die Schrift, rechts offen für die Glut */
.hero--video::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    /* Links deckend für die Schrift, ab der Mitte schnell aufklaren,
       damit das Fleisch nicht im Schleier verschwindet. */
    linear-gradient(90deg, var(--ink) 0%, rgba(11,11,12,.94) 26%,
                    rgba(11,11,12,.62) 46%, rgba(11,11,12,.16) 70%,
                    rgba(11,11,12,.04) 100%),
    linear-gradient(180deg, rgba(11,11,12,.62) 0%, rgba(11,11,12,.02) 22%,
                    rgba(11,11,12,.02) 68%, var(--ink) 100%);
}
/* Breite und Seitenabstand kommen von .wrap — hier nichts überschreiben */
.hero__inner{position:relative}
.hero__inner h1{margin-bottom:1.1rem}
.hero__inner .lede{max-width:34rem}
.hero__inner .hero__cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem}

.hero--video .hero__stat{
  /* Die alte Regel positionierte den Wert absolut über dem Bild.
     Im Video-Hero läuft er im Textfluss unter den Schaltflächen mit. */
  position:static; inset:auto; transform:none;
  display:inline-flex; align-items:baseline; gap:.7rem; margin:2.6rem 0 0;
  padding:.6rem 1rem; border-left:2px solid var(--ember);
  background:rgba(11,11,12,.55); backdrop-filter:blur(3px); border-radius:var(--r);
}
.hero--video .hero__stat b{
  font-family:var(--display); font-size:1.5rem; color:var(--bone); line-height:1;
}
.hero--video .hero__stat span{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel-dim);
}

@media(max-width:860px){
  .hero--video{min-height:clamp(28rem,80vh,40rem)}
  .hero--video::before{
    background:
      linear-gradient(180deg, rgba(11,11,12,.80) 0%, rgba(11,11,12,.52) 28%,
                      rgba(11,11,12,.78) 72%, var(--ink) 100%);
  }
  .hero__inner .lede{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .hero__video{display:none}
}
@media print{
  .hero--video{min-height:0;padding-block:0;border:0}
  .hero__media,.hero--video::before{display:none}
}

/* --- Sprachumschalter --------------------------------------------------- */
.topbar__end{display:flex;align-items:center;gap:1rem}
.langswitch{display:flex;gap:.1rem;border:1px solid var(--steel-line);border-radius:var(--r)}
.langswitch a{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  padding:.42rem .55rem;color:var(--steel-dim);text-decoration:none;line-height:1}
.langswitch a:hover,.langswitch a:focus{color:var(--bone);background:var(--ink-4)}
.langswitch a[aria-current]{color:var(--ember-bright);background:var(--ink-4)}
.foot__brand .langswitch{margin-top:1.2rem;display:inline-flex}

.notice{border:1px solid var(--steel-line);border-left:3px solid var(--sear);
  background:var(--ink-3);padding:.9rem 1.1rem;font-size:.9rem;color:var(--steel-dim);
  border-radius:var(--r);margin:1.5rem 0 0}

/* --- PDF-Download-Kasten ------------------------------------------------ */
.pdfbox-wrap{padding:0 0 clamp(2.5rem,6vw,4.5rem)}
.pdfbox{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  background:var(--ink-3);border:1px solid var(--steel-line);
  border-left:3px solid var(--ember);border-radius:var(--r);padding:1.5rem 1.7rem}
.pdfbox__icon{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  color:var(--ember);border:1px solid var(--ember);border-radius:var(--r);
  padding:.55rem .6rem;flex:none}
.pdfbox__body{flex:1 1 18rem;min-width:0}
.pdfbox h2{font-size:1.15rem;margin:0 0 .3rem;letter-spacing:.02em}
.pdfbox p{margin:0;font-size:.95rem;color:var(--steel-dim)}
@media(max-width:560px){.pdfbox{padding:1.2rem}.pdfbox .btn{width:100%;justify-content:center}}