/* ==========================================================================
   SALZ & ASCHE — Steakhaus Hannover
   Kohle, gerissenes Papier, ein einziges Rot.
   ========================================================================== */

:root{
  --kohle:#0A0A0B;
  --tinte:#141416;
  --tinte-hell:#1C1C1F;
  --papier:#F2F0EC;
  --papier-tief:#E4E0D8;
  --creme:#FCF7F3;
  --rot:#D8342A;
  --rot-text:#E04A3E;
  --grau:#8C877E;
  --grau-hell:rgba(242,240,236,.62);
  --linie:rgba(242,240,236,.22);
  --blatt:1280px;
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#050506 url("img/kohle.webp") center center / cover no-repeat;
  background-attachment:fixed;
  color:var(--papier);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.62;
  font-weight:300;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
.masken{position:absolute}

.sprung{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--papier);color:var(--tinte);padding:12px 20px;
}
.sprung:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--rot);outline-offset:3px}

/* Das Blatt: die Seite liegt als Bahn auf der Kohle ------------------------ */
.blatt{
  max-width:var(--blatt);
  margin:0 auto;
  position:relative;
  background:var(--kohle);
  box-shadow:0 0 120px rgba(0,0,0,.85);
}

/* ============================== KOPF ===================================== */
.kopf{
  position:relative;
  min-height:min(92vh,860px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}
.kopf-bild{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.kopf::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(6,6,7,.92) 0%,rgba(6,6,7,.72) 34%,rgba(6,6,7,0) 62%);
  pointer-events:none;
}
.kopf-papier{
  position:absolute;inset:0;z-index:2;
  background:var(--papier);
  -webkit-clip-path:url(#riss-ecke);clip-path:url(#riss-ecke);
}
.kopf-papier::after{
  content:"";position:absolute;inset:0;
  background-image:var(--korn);opacity:.06;mix-blend-mode:multiply;
}

/* Navigation --------------------------------------------------------------*/
.navi{
  position:relative;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:26px clamp(20px,3.4vw,44px);
}
.marke{
  font-family:'Playfair Display',Georgia,serif;
  font-size:19px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--papier);
}
.navi-liste{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.navi-liste a{
  font-size:14.5px;letter-spacing:.01em;text-decoration:none;
  color:var(--tinte);padding:4px 0;position:relative;
}
.navi-liste a:not(.pille)::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--rot);transition:right .28s ease;
}
.navi-liste a:not(.pille):hover::after{right:0}
.pille{
  border:1px solid var(--tinte);border-radius:999px;
  padding:11px 24px !important;display:inline-flex;gap:12px;align-items:center;
  transition:background .25s ease,color .25s ease;
}
.pille:hover{background:var(--tinte);color:var(--papier)}
.navi-schalter{display:none}

/* Kopfinhalt ---------------------------------------------------------------*/
.kopf-inhalt{
  position:relative;z-index:4;
  margin-top:auto;
  padding:0 clamp(20px,3.4vw,52px) clamp(48px,6vw,88px);
  max-width:760px;
}
.kopf-titel{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:400;
  line-height:.84;
  letter-spacing:-.015em;
  margin-bottom:clamp(28px,4vw,46px);
  color:var(--papier);
  text-shadow:0 10px 60px rgba(0,0,0,.6);
}
.kopf-titel span{display:block;font-size:clamp(3.4rem,10.5vw,9.5rem)}
.kopf-titel span:first-child{font-size:clamp(2.9rem,8.6vw,7.6rem);letter-spacing:-.01em}

.zitat{
  position:relative;margin:0 0 clamp(34px,5vw,54px);
  max-width:460px;padding-left:62px;
}
.anfuehrung{
  position:absolute;font-family:'Playfair Display',Georgia,serif;
  color:var(--rot);font-size:104px;line-height:1;font-weight:700;
}
.anfuehrung-auf{left:0;top:-18px}
.anfuehrung-zu{right:-96px;bottom:-70px}
.zitat blockquote{
  margin:0;font-size:clamp(15px,1.15vw,16.5px);line-height:1.68;
  color:rgba(242,240,236,.9);
}
.zitat blockquote em{color:var(--rot-text);font-style:normal}
.zitat figcaption{
  margin-top:18px;font-size:13.5px;font-weight:500;letter-spacing:.02em;
  color:var(--papier);
}
.zitat figcaption small{display:block;font-weight:300;font-size:12px;color:var(--grau-hell)}
.unterschrift{
  position:absolute;right:-30px;bottom:-26px;width:118px;height:auto;opacity:.95;
}

.kreis{
  display:grid;place-content:center;gap:10px;
  width:clamp(150px,15vw,186px);aspect-ratio:1;
  border:1px solid var(--linie);border-radius:50%;
  text-decoration:none;text-align:center;
  font-size:13.5px;letter-spacing:.03em;
  color:var(--papier);
  transition:border-color .3s ease,background .3s ease;
}
.kreis svg{width:40px;margin:0 auto;overflow:visible}
.kreis:hover{border-color:var(--papier);background:rgba(242,240,236,.06)}

/* ============================ ÜBERSCHRIFTEN ============================== */
.titel{
  font-family:'Playfair Display',Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.98;
}
.titel-hell,.titel-dunkel{
  text-align:center;
  font-size:clamp(2rem,3.9vw,3.5rem);
}
.titel-hell span,.titel-dunkel span{display:block}
.titel::first-letter{font-size:1.42em}
.titel-hell{color:var(--papier)}
.titel-dunkel{color:var(--tinte)}
.titel-rot{color:var(--rot);font-size:clamp(1.9rem,3.2vw,2.9rem)}
.titel-rot::first-letter{font-size:2.05em;letter-spacing:-.02em}

/* ========================= BELIEBTE GERICHTE ============================= */
.gerichte{padding:clamp(52px,6vw,84px) 0 clamp(64px,7vw,104px)}
.filter{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  max-width:830px;margin:clamp(28px,3.4vw,44px) auto 0;
  padding:0 20px;
}
.chip{
  font:inherit;font-size:13.5px;
  padding:9px 19px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--papier);
  border:1px solid var(--linie);
  transition:border-color .22s ease,background .22s ease,color .22s ease;
}
.chip:hover{border-color:rgba(242,240,236,.55)}
.chip.ist-aktiv{background:var(--papier);color:var(--tinte);border-color:var(--papier)}

.karussell{margin-top:clamp(30px,3.6vw,46px)}
.karussell-bahn{
  display:flex;gap:8px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 calc(50% - min(200px,31vw));
  scrollbar-width:none;
}
.karussell-bahn::-webkit-scrollbar{display:none}
.karussell-bahn li{
  flex:0 0 clamp(230px,31vw,400px);
  scroll-snap-align:center;
}
.karussell-bahn img{
  width:100%;height:clamp(210px,22vw,300px);object-fit:cover;
  filter:brightness(.82) saturate(.94);
  transition:filter .4s ease;
}
.karussell-bahn li:hover img{filter:brightness(1) saturate(1)}

.punkte{display:flex;justify-content:center;gap:12px;margin-top:26px}
.punkte button{
  width:11px;height:11px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(242,240,236,.55);background:transparent;
  transition:background .22s ease,transform .22s ease;
}
.punkte button[aria-selected="true"]{background:var(--papier);transform:scale(1.08)}

.knopf-hell{
  display:block;width:max-content;margin:clamp(34px,4vw,52px) auto 0;
  background:var(--papier);color:var(--tinte);
  text-decoration:none;font-size:15px;letter-spacing:.01em;
  padding:19px 44px;
  transition:background .25s ease,transform .25s ease;
}
.knopf-hell:hover{background:#fff;transform:translateY(-2px)}

/* ============================== PAPIERBLOCK ============================== */
.papier{
  position:relative;
  background:var(--papier);
  color:var(--tinte);
  padding:clamp(74px,8vw,120px) 0 clamp(64px,7vw,104px);
  margin-top:-14px;
}
.papier::before,.papier::after{
  content:"";position:absolute;left:0;right:0;height:34px;z-index:2;
  background-repeat:no-repeat;background-size:100% 100%;pointer-events:none;
}
.papier::before{top:0;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='34' viewBox='0 0 1200 34' preserveAspectRatio='none'><path d='M0,0 L0.0,18.49997062370619 L11.3,28.4 L22.9,12.9 L37.2,11.0 L51.7,33.9 L64.2,5.7 L69.0,5.2 L78.7,26.7 L89.2,22.9 L106.2,29.9 L114.3,13.8 L128.3,17.4 L144.7,30.8 L154.8,29.6 L167.0,25.3 L175.3,29.2 L182.6,33.2 L193.8,18.4 L199.5,22.5 L206.3,14.7 L214.2,27.6 L229.4,22.5 L236.1,14.4 L244.0,10.5 L251.1,21.6 L267.6,19.2 L274.0,12.2 L281.2,13.0 L287.8,29.0 L297.3,33.9 L310.4,14.4 L318.2,12.7 L325.2,20.7 L332.8,3.9 L342.6,10.3 L354.1,11.8 L370.8,22.8 L376.6,33.6 L393.2,9.4 L406.7,15.7 L417.8,24.5 L430.9,25.7 L443.8,27.9 L458.1,27.1 L467.1,21.2 L479.4,29.9 L488.4,24.4 L503.3,6.2 L513.6,13.8 L525.6,4.1 L538.4,13.3 L551.0,18.3 L563.6,13.2 L579.5,27.5 L587.6,11.9 L602.6,23.9 L608.8,18.5 L618.2,22.1 L633.1,29.6 L637.5,32.8 L645.6,30.5 L649.9,26.4 L654.5,22.2 L667.0,26.0 L673.6,5.3 L686.9,12.8 L700.0,19.9 L709.1,25.6 L725.2,24.2 L737.3,28.1 L752.8,25.7 L765.2,13.3 L777.6,24.1 L794.3,29.5 L802.5,28.1 L807.6,18.3 L817.9,9.6 L832.3,12.6 L838.1,12.1 L853.0,23.5 L869.4,10.8 L877.1,24.3 L892.1,20.8 L907.1,27.9 L923.7,20.0 L934.7,8.8 L945.4,17.4 L955.7,32.2 L972.2,28.4 L977.8,18.1 L988.0,15.7 L1004.1,3.4 L1011.0,23.4 L1023.1,11.2 L1033.7,14.3 L1043.4,16.9 L1049.5,13.3 L1060.3,26.9 L1067.4,24.6 L1075.5,15.6 L1092.5,27.6 L1105.9,14.4 L1115.4,25.6 L1128.3,9.4 L1144.1,29.3 L1158.0,19.6 L1162.9,32.2 L1174.3,12.1 L1189.2,29.8 L1194.0,29.0 L1200,18.8 L1200,0 Z' fill='%230A0A0B'/></svg>")}
.papier::after{bottom:0;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='34' viewBox='0 0 1200 34' preserveAspectRatio='none'><path d='M0,34 L0.0,13.5 L8.5,7.3 L17.0,16.3 L26.7,20.3 L35.0,12.2 L44.8,21.4 L59.1,13.2 L67.0,14.3 L81.2,14.2 L92.9,11.5 L107.0,22.9 L112.8,21.8 L122.0,16.3 L138.1,11.2 L151.2,4.7 L157.9,25.5 L173.7,22.1 L190.2,6.7 L198.2,24.8 L214.5,3.3 L221.5,24.4 L227.2,26.5 L242.4,20.8 L249.6,18.0 L261.7,8.3 L274.6,2.7 L290.1,18.9 L299.0,14.5 L308.1,21.8 L320.5,4.0 L336.3,15.7 L352.3,21.4 L358.5,28.2 L375.1,15.3 L383.0,18.3 L394.9,9.9 L410.9,24.8 L417.9,20.4 L426.2,16.8 L439.8,9.0 L447.1,4.3 L454.0,22.3 L467.8,17.3 L475.5,22.8 L490.0,9.4 L498.7,6.0 L507.2,5.9 L511.4,20.1 L524.6,20.6 L535.6,0.6 L548.8,18.3 L555.7,14.4 L569.0,19.9 L577.0,8.8 L586.5,22.0 L599.6,11.5 L604.5,23.1 L616.6,18.7 L632.1,18.3 L637.6,2.0 L641.6,4.1 L655.6,8.5 L663.7,22.8 L677.3,11.4 L682.4,2.9 L697.7,11.2 L704.4,18.0 L711.1,18.2 L717.9,16.9 L723.5,12.8 L733.3,12.4 L738.7,5.2 L745.3,14.5 L754.6,29.0 L761.5,5.8 L770.1,25.5 L782.0,9.5 L788.9,9.0 L796.9,24.6 L813.9,6.1 L826.3,14.8 L835.3,5.2 L845.1,14.6 L856.5,4.2 L865.0,17.9 L880.1,10.0 L895.2,24.4 L902.2,26.2 L909.2,4.5 L913.8,29.9 L922.5,14.9 L931.3,18.0 L946.8,13.4 L954.5,10.3 L962.0,18.2 L978.0,15.6 L985.3,7.3 L991.2,25.8 L996.0,24.1 L1006.1,19.9 L1022.1,8.7 L1038.7,2.6 L1048.2,7.1 L1056.4,23.8 L1065.8,24.3 L1072.4,15.4 L1088.0,2.0 L1103.9,11.0 L1115.2,8.7 L1121.6,5.6 L1134.7,28.4 L1141.4,23.8 L1146.1,11.0 L1154.3,14.8 L1168.0,9.2 L1184.8,16.1 L1189.2,10.5 L1196.7,2.1 L1200,8.3 L1200,34 Z' fill='%230A0A0B'/></svg>")}
.papier-korn{
  position:absolute;inset:0;pointer-events:none;
  background-image:var(--korn);opacity:.055;mix-blend-mode:multiply;
}
.papier > section{position:relative;z-index:1}

/* Unser Standard -----------------------------------------------------------*/
.standard{padding:0 clamp(20px,4vw,64px)}
.vorlauf{
  max-width:720px;margin:clamp(24px,3vw,36px) auto 0;
  text-align:center;font-size:16.5px;line-height:1.72;color:#3A3A3C;
}
.standard-satz{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,3vw,48px);align-items:center;
  max-width:1120px;margin:clamp(34px,4vw,54px) auto 0;
}
.schnittliste li{display:flex;gap:18px;padding:20px 0}
.schnittliste li + li{border-top:1px solid rgba(20,20,22,.1)}
.ziffer{
  flex:0 0 auto;display:grid;place-content:center;
  width:34px;height:34px;border:1px solid var(--tinte);border-radius:50%;
  font-size:15px;font-weight:400;
}
.schnittliste h3{
  font-size:19px;font-weight:500;letter-spacing:.005em;margin-bottom:8px;
}
.schnittliste p{font-size:14.5px;line-height:1.66;color:#4A4A4C;max-width:52ch}

.rind{position:relative}
.rind img{width:100%;height:auto}
.marke-punkt{
  position:absolute;display:grid;place-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--papier);border:1px solid var(--tinte);
  font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.marke-1{left:41%;top:27%}
.marke-2{left:66%;top:23%}
.marke-3{left:56%;top:47%}

/* Unsere Schnitte ----------------------------------------------------------*/
.schnitte{padding:clamp(58px,7vw,96px) clamp(20px,4vw,64px) 0}
.schnitt-raster{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(28px,3.4vw,56px) clamp(24px,3vw,48px);
  max-width:1080px;margin:clamp(34px,4vw,56px) auto 0;
}
.schnitt-raster li{flex:0 1 clamp(240px,27%,300px);text-align:center}
.schnitt-raster img{
  width:100%;height:clamp(180px,17vw,236px);object-fit:contain;
  margin:0 auto 18px;
}
.schnitt-raster h3{font-size:17px;font-weight:500;line-height:1.35;margin-bottom:10px}
.schnitt-raster p{font-size:13px;line-height:1.6;color:#555557}
.preis{margin-top:14px !important;font-size:13px}
.preis strong{
  font-family:'Jost',sans-serif;font-size:27px;font-weight:500;
  color:var(--tinte);letter-spacing:-.01em;
}
.preis span{color:#666668}

.zaehler{
  text-align:center;margin-top:clamp(46px,5vw,72px) !important;
  font-size:14.5px;color:#4A4A4C;
}
.zaehler::after{
  content:"";display:block;width:230px;height:2px;margin:18px auto 0;
  background:#D3CFC7;
  background-image:linear-gradient(var(--tinte),var(--tinte));
  background-size:38px 2px;background-repeat:no-repeat;background-position:left center;
}
.blaettern{
  display:flex;justify-content:center;align-items:center;gap:6px;
  margin-top:22px;
}
.blaettern a,.blaettern span,.blaettern-pfeil{
  display:grid;place-content:center;min-width:36px;height:36px;
  font:inherit;font-size:14.5px;text-decoration:none;color:var(--tinte);
  border:1px solid transparent;background:transparent;
}
.blaettern a{transition:border-color .2s ease}
.blaettern a:hover{border-color:rgba(20,20,22,.35)}
.blaettern a[aria-current]{border-color:var(--tinte)}
.blaettern-pfeil{cursor:pointer;color:#666668}
.blaettern-pfeil:disabled{opacity:.3;cursor:default}

/* ============================== ÜBER UNS ================================= */
.ueber{
  position:relative;
  padding:clamp(72px,9vw,140px) clamp(20px,4vw,64px) clamp(56px,7vw,96px);
}
.pfanne{
  position:absolute;left:clamp(-190px,-11vw,-90px);top:clamp(40px,7vw,110px);
  width:clamp(280px,38vw,560px);height:auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));
  pointer-events:none;
}
.ueber-text{margin-left:auto;width:min(620px,58%)}
.ueber-text .titel-rot{margin-bottom:clamp(22px,2.6vw,32px)}
.ueber-text p{
  font-size:15px;line-height:1.78;color:rgba(242,240,236,.78);
}
.ueber-text p + p{margin-top:18px}
.ueber-text strong{font-weight:500;color:var(--papier)}

.raum-streifen{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:0 clamp(0px,1vw,10px);
}
.raum-streifen img{
  width:100%;height:clamp(150px,15vw,215px);object-fit:cover;
  filter:brightness(.88);transition:filter .4s ease;
}
.raum-streifen li:hover img{filter:brightness(1.05)}

/* ============================== NEUES ==================================== */
.neues{padding:clamp(66px,8vw,110px) clamp(20px,4vw,64px)}
.neues-liste{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,36px);
  max-width:1080px;margin:clamp(34px,4vw,54px) auto 0;
}
.neues-liste li{
  border:1px solid var(--linie);padding:clamp(24px,2.6vw,34px);
  transition:border-color .3s ease,background .3s ease;
}
.neues-liste li:hover{border-color:rgba(242,240,236,.42);background:rgba(242,240,236,.03)}
.datum{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot-text);margin-bottom:14px !important;
}
.neues-liste h3{
  font-family:'Playfair Display',Georgia,serif;font-size:24px;margin-bottom:12px;
}
.neues-liste p{font-size:14.5px;line-height:1.7;color:rgba(242,240,236,.72)}
.preis-klein{
  margin-top:18px !important;font-size:15px;font-weight:500;color:var(--papier);
}

/* ============================ RESERVIERUNG =============================== */
.reservierung{
  padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,110px);
  overflow:hidden;
}
.reservierung-satz{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  align-items:center;gap:clamp(20px,3vw,40px);
}
.reservierung-text{padding-left:clamp(20px,4vw,64px)}
.reservierung .titel-hell{text-align:left;margin-bottom:clamp(30px,3.6vw,44px)}
.reservierung .titel-hell span{display:inline}
.tisch{
  width:min(100%,660px);height:auto;justify-self:end;
  margin-right:clamp(-150px,-8vw,-40px);
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.55));
}

.formular{max-width:520px}
.feld-reihe{display:flex;flex-wrap:wrap;gap:16px}
.feld{
  display:flex;align-items:stretch;flex:1 1 220px;
  border:1px solid var(--linie);
  transition:border-color .25s ease;
}
.feld:focus-within{border-color:rgba(242,240,236,.6)}
.feld-name{
  display:grid;place-content:center;padding:0 16px;
  border-right:1px solid var(--linie);
  font-size:14.5px;white-space:nowrap;
}
.feld input{
  flex:1;min-width:0;font:inherit;font-size:14.5px;
  background:transparent;border:0;color:var(--papier);
  padding:15px 16px;
}
.feld input::placeholder{color:rgba(242,240,236,.4)}
.feld input:focus{outline:none}

.wahl-reihe{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px}
.wahl{display:flex;flex-direction:column;gap:7px;flex:1 1 140px}
.wahl > span{font-size:12px;letter-spacing:.06em;color:var(--grau-hell)}
.wahl select{
  font:inherit;font-size:14.5px;color:var(--papier);
  background:var(--tinte-hell);
  border:1px solid var(--linie);border-radius:0;
  padding:13px 38px 13px 15px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F2F0EC' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.wahl select:focus{outline:none;border-color:rgba(242,240,236,.6)}

.haken{
  display:flex;align-items:flex-start;gap:12px;margin-top:26px;
  font-size:13.5px;color:rgba(242,240,236,.76);cursor:pointer;
}
.haken input{
  flex:0 0 auto;width:17px;height:17px;margin:3px 0 0;
  -webkit-appearance:none;appearance:none;
  border:1px solid var(--linie);background:transparent;cursor:pointer;
}
.haken input:checked{
  background:var(--papier);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.4' fill='none' stroke='%23141416' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.haken a{color:var(--papier)}

.knopf-creme{
  margin-top:28px;font:inherit;font-size:15px;cursor:pointer;
  background:var(--creme);color:var(--tinte);border:0;
  padding:18px 46px;
  transition:background .25s ease,transform .25s ease;
}
.knopf-creme:hover{background:#fff;transform:translateY(-2px)}
.hinweis{margin-top:14px !important;font-size:13.5px;color:var(--rot);min-height:1.2em}
.hinweis.ist-gut{color:#8FCB9B}

/* ============================== KONTAKT ================================== */
.papier-kontakt{margin-top:clamp(-30px,-2vw,-14px)}
.kontakt{padding:0 clamp(20px,4vw,64px)}
.kontakt .titel-rot{margin-bottom:clamp(28px,3.4vw,44px)}
.kontakt-satz{
  display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px);align-items:start;
}
.kontakt-daten dt{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#666668;font-weight:500;
}
.kontakt-daten dd{
  font-size:16px;line-height:1.62;color:var(--tinte);margin-bottom:26px;
}
.kontakt-daten dd:last-child{margin-bottom:0}
.kontakt-daten a{text-decoration:none;border-bottom:1px solid rgba(20,20,22,.25)}
.kontakt-daten a:hover{border-color:var(--rot);color:var(--rot)}
.karte{position:relative}
.karte svg{width:100%;height:auto;display:block}
/* Der Punkt auf der Karte schlaegt ruhig wie ein Radarsignal */
.karte .puls{
  transform-box:fill-box;transform-origin:center;
  animation:puls 2.6s cubic-bezier(.2,.6,.3,1) infinite backwards;
}
.karte .puls-2{animation-delay:1.3s}
.karte .pin-punkt{
  transform-box:fill-box;transform-origin:center;
  animation:pin-atmen 2.6s ease-in-out infinite;
}
@keyframes puls{
  0%{transform:scale(.5);opacity:.55}
  70%{opacity:0}
  100%{transform:scale(2);opacity:0}
}
.karte .pin-schild{
  transform-box:fill-box;transform-origin:center;
  animation:schild-atmen 2.6s ease-in-out infinite;
}
@keyframes pin-atmen{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.16)}
}
@keyframes schild-atmen{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

.anfahrt{
  position:absolute;left:38%;top:59%;
  font-size:13.5px;color:var(--tinte);
  border-bottom:1px solid rgba(20,20,22,.4);text-decoration:none;
}
.anfahrt:hover{color:var(--rot);border-color:var(--rot)}

/* =============================== FUSS ==================================== */
.fuss{
  padding:clamp(52px,6vw,84px) clamp(20px,4vw,64px) clamp(40px,4vw,60px);
  text-align:center;border-top:1px solid rgba(242,240,236,.1);
}
.fuss-marke{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.5rem,2.6vw,2.1rem);text-transform:uppercase;letter-spacing:.05em;
}
.fuss-liste{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;
  margin:26px 0 30px;
}
.fuss-liste a{font-size:14px;text-decoration:none;color:rgba(242,240,236,.72)}
.fuss-liste a:hover{color:var(--papier)}
.fuss-fein{font-size:12.5px;line-height:1.8;color:rgba(242,240,236,.42)}

/* ============================== SCHMAL =================================== */
@media (max-width:1080px){
  .standard-satz{grid-template-columns:1fr;gap:34px}
  .rind{max-width:560px;margin:0 auto}
  .kontakt-satz{grid-template-columns:1fr}
  .neues-liste{grid-template-columns:1fr 1fr}
}

/* Schmaler Schreibtisch: die Navigation muss sicher auf dem Papier liegen */
@media (min-width:901px) and (max-width:1180px){
  .navi{padding-inline:24px}
  .navi-liste{gap:16px}
  .navi-liste a{font-size:13.5px}
  .pille{padding:9px 18px !important;gap:8px}
}

@media (max-width:900px){
  .kopf{min-height:auto}
  .kopf-papier{display:none}
  .kopf::after{
    background:linear-gradient(180deg,rgba(6,6,7,.9) 0%,rgba(6,6,7,.4) 42%,rgba(6,6,7,.92) 100%);
  }
  .navi{background:rgba(10,10,11,.82);backdrop-filter:blur(6px);padding:16px 20px}
  .navi-schalter{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:38px;padding:0;cursor:pointer;
    background:transparent;border:1px solid var(--linie);
  }
  .navi-schalter span{display:block;width:20px;height:1px;background:var(--papier);margin:0 auto}
  .navi-schalter em{position:absolute;left:-9999px}
  .navi-liste{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--tinte);
    max-height:0;overflow:hidden;transition:max-height .34s ease;
  }
  .navi-liste.ist-offen{max-height:420px}
  .navi-liste li{border-top:1px solid rgba(242,240,236,.1)}
  .navi-liste a{display:block;color:var(--papier);padding:16px 20px;font-size:15px}
  .pille{border:0;border-radius:0;justify-content:space-between}
  .pille:hover{background:rgba(242,240,236,.06);color:var(--papier)}

  .kopf-inhalt{padding-top:clamp(56px,12vw,110px)}
  .kopf-titel{text-shadow:0 6px 40px rgba(0,0,0,.8)}
  .anfuehrung{font-size:74px}
  .anfuehrung-zu{right:-16px;bottom:-52px}
  .unterschrift{right:0;bottom:-40px;width:96px}

  .ueber{padding-top:clamp(268px,70vw,400px)}
  .pfanne{
    left:50%;transform:translateX(-50%);top:clamp(28px,7vw,64px);
    width:min(74%,380px);
  }
  .ueber-text{width:100%;margin-left:0}
  .raum-streifen{grid-template-columns:1fr 1fr}
  .reservierung-satz{grid-template-columns:1fr;gap:44px}
  .reservierung-text{padding:0 20px}
  .tisch{justify-self:center;margin-right:0;width:min(88%,460px)}
  .neues-liste{grid-template-columns:1fr}
  .anfahrt{left:30%;top:62%}
}

@media (max-width:560px){
  .zitat{padding-left:46px;max-width:none}
  .anfuehrung-auf{top:-10px}
  .schnitt-raster li{flex:0 1 100%;max-width:300px}
  .feld-reihe,.wahl-reihe{flex-direction:column}
  .feld,.wahl{flex:0 0 auto}
  .blaettern a,.blaettern span,.blaettern-pfeil{min-width:32px;height:32px;font-size:13.5px}
  .kontakt-daten dd{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  /* der Kartenpunkt darf nicht flackern - er steht dann einfach still */
  .karte .puls,.karte .pin-punkt,.karte .pin-schild{animation:none !important;transform:none}
  .karte .puls{opacity:.35}
  .karte .puls-2{display:none}
}
html{scroll-behavior:smooth}