/* Peace Food – Essen · Stylesheet */
@import url('schriften/schriften.css');

:root{
  --papier:#faf5ec;
  --papier-2:#f2e9da;
  --tinte:#2b2119;
  --tinte-weich:#6f5f4c;
  --gold:#b8862b;
  --gold-hell:#e0b45e;
  --gruen:#1e4034;
  --gruen-hell:#2f6a52;
  --chili:#bf4526;
  --linie:rgba(43,33,25,.14);
  --schatten:0 18px 50px -22px rgba(43,33,25,.4);
  --rand:clamp(20px,5vw,56px);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopfhoehe,79px) + 74px)}
body{
  background:var(--papier);color:var(--tinte);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.mitte{max-width:1140px;margin:0 auto;padding:0 var(--rand)}
.schmal{max-width:760px;margin:0 auto;padding:0 var(--rand)}

/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.siegel{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(150deg,var(--gold-hell),var(--gold));
  color:#fff;display:grid;place-content:center;text-align:center;
  font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.1em;line-height:1.25;
  box-shadow:0 4px 14px -4px rgba(184,134,43,.6)
}
.siegel span{display:block;padding:2px 0}
.siegel span+span{border-top:1.2px solid rgba(255,255,255,.85)}
.logo b{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.logo i{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-top:-2px}

/* ---------- Kopf ----------
   Eine einzige Zeile: Logo · Navigation · Anrufen. Nichts darf umbrechen –
   deshalb wird die Navigation ab 1180px enger gesetzt und ab 1024px zum
   Klappmenue (siehe .burger weiter unten).                                   */
.kopf{
  position:sticky;top:0;z-index:60;background:rgba(250,245,236,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)
}
.kopf .mitte{display:flex;align-items:center;flex-wrap:nowrap;gap:26px;padding-block:12px}
.kopf .navi{margin-left:auto}
.navi{display:flex;gap:2px;align-items:center;flex-wrap:nowrap}
.navi a{
  text-decoration:none;font-size:15px;font-weight:500;padding:9px 11px;border-radius:99px;
  color:var(--tinte-weich);transition:background .16s,color .16s;white-space:nowrap
}
.navi a:hover{background:var(--papier-2);color:var(--tinte)}
.navi a[aria-current]{background:var(--gruen);color:#fff}
.kopf .tel{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;white-space:nowrap;
  background:var(--gold);color:#fff;font-size:15px;font-weight:600;padding:9px 17px;border-radius:99px;
  transition:background .16s;flex-shrink:0
}
.kopf .tel:hover{background:#a3751f}
.kopf .tel .kurz{display:none}

/* Klapp-Knopf – nur auf schmalen Bildschirmen sichtbar */
.burger{
  display:none;align-items:center;gap:9px;flex-shrink:0;cursor:pointer;
  background:none;border:1px solid var(--linie);border-radius:99px;
  padding:8px 14px 8px 12px;color:var(--tinte);font:inherit;font-size:14px;font-weight:600;
  transition:background .16s,border-color .16s
}
.burger:hover{background:var(--papier-2)}
.burger .striche{
  position:relative;display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:background .16s
}
.burger .striche::before,.burger .striche::after{
  content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .18s
}
.burger .striche::before{top:-6px}
.burger .striche::after{top:6px}
.kopf.offen .burger{background:var(--gruen);border-color:var(--gruen);color:#fff}
.kopf.offen .burger .striche{background:transparent}
.kopf.offen .burger .striche::before{transform:translateY(6px) rotate(45deg)}
.kopf.offen .burger .striche::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Held ---------- */
.held{position:relative;min-height:min(76vh,620px);display:grid;align-items:end;overflow:hidden}
.held img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.held::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(28,20,13,.5) 0%,rgba(28,20,13,.34) 30%,rgba(28,20,13,.92) 100%),
    linear-gradient(96deg,rgba(28,20,13,.62) 0%,rgba(28,20,13,.3) 45%,transparent 72%)
}
.held .inhalt{position:relative;z-index:2;color:#fff;padding-block:clamp(40px,7vw,74px);width:100%}
.held .marke{
  display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-hell);font-weight:600;margin-bottom:16px
}
.held h1{
  font-family:var(--serif);font-weight:600;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(33px,7.5vw,80px);text-wrap:balance;max-width:15ch;
  overflow-wrap:break-word;hyphens:auto
}
.held p{margin-top:18px;font-size:clamp(17px,2.2vw,21px);color:rgba(255,255,255,.9);max-width:52ch}
.held .knoepfe{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:99px;background:var(--gold);color:#fff;border:1.5px solid var(--gold);
  transition:transform .14s,background .16s,box-shadow .16s;box-shadow:0 8px 22px -10px rgba(184,134,43,.9)
}
.knopf:hover{background:#a3751f;border-color:#a3751f;transform:translateY(-2px)}
.knopf.klar{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none}
.knopf.klar:hover{background:rgba(255,255,255,.14);border-color:#fff}
.knopf.dunkel{background:var(--gruen);border-color:var(--gruen);box-shadow:none}
.knopf.dunkel:hover{background:#173428;border-color:#173428}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf{background:var(--gruen);color:#fff;padding-block:clamp(46px,7vw,76px);position:relative;overflow:hidden}
.seitenkopf::before{
  content:"";position:absolute;inset:0;opacity:.28;
  background:radial-gradient(60% 90% at 88% 10%,rgba(224,180,94,.6),transparent 60%)
}
.seitenkopf .mitte{position:relative}
.seitenkopf .oben{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hell);font-weight:600}
.seitenkopf h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,6vw,58px);line-height:1.06;margin-top:12px;letter-spacing:-.02em}
.seitenkopf p{margin-top:14px;color:rgba(255,255,255,.82);max-width:58ch;font-size:17px}

/* ---------- Abschnitte ---------- */
.band{padding-block:clamp(56px,8vw,96px)}
.band.hell{background:var(--papier-2)}
.band.gruen{background:var(--gruen);color:#fff}
.band.gruen h2,.band.gruen h3{color:#fff}

.ueberschrift{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:14px}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(29px,4.6vw,44px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.25}
.vorspann{margin-top:16px;font-size:18px;color:var(--tinte-weich);max-width:62ch}
.band.gruen .vorspann{color:rgba(255,255,255,.8)}

/* ---------- Kacheln ---------- */
.raster{display:grid;gap:22px;margin-top:40px}
.raster.drei{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.raster.zwei{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.kachel{
  background:#fff;border:1px solid var(--linie);border-radius:18px;padding:28px;
  box-shadow:0 2px 10px -6px rgba(43,33,25,.2)
}
.band.gruen .kachel{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff}
.kachel .zeichen{font-size:26px;margin-bottom:12px;display:block}
.kachel p{margin-top:9px;color:var(--tinte-weich);font-size:16px}
.kachel .ueberschrift{margin-top:0;font-size:12px;color:var(--gold)}
.band.gruen .kachel p{color:rgba(255,255,255,.78)}

/* ---------- Speisekarte ---------- */
.kartennavi{
  position:sticky;top:var(--kopfhoehe,79px);z-index:40;background:rgba(250,245,236,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linie);padding-block:12px
}
.kartennavi .mitte{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kartennavi .mitte::-webkit-scrollbar{display:none}
.kartennavi a{
  text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;padding:8px 15px;
  border-radius:99px;border:1px solid var(--linie);color:var(--tinte-weich);transition:.16s
}
.kartennavi a:hover{background:var(--gruen);border-color:var(--gruen);color:#fff}

.gruppe{padding-top:clamp(44px,6vw,70px)}
.gruppe-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-bottom:2px solid var(--gruen);padding-bottom:12px;margin-bottom:8px}
.gruppe-kopf h2{font-size:clamp(26px,3.6vw,34px)}
.gruppe-kopf .note{font-size:14px;font-weight:600;color:var(--gold);letter-spacing:.02em}

.gerichte{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:0 42px}
.gericht{padding:20px 0;border-bottom:1px solid var(--linie)}
.gericht .zeile{display:flex;align-items:baseline;gap:10px}
.gericht .name{font-family:var(--serif);font-weight:600;font-size:19.5px;line-height:1.3}
.gericht .fuellung{flex:1;border-bottom:1.5px dotted rgba(43,33,25,.28);transform:translateY(-4px);min-width:14px}
.gericht .preis{font-weight:600;font-size:17px;color:var(--gruen);white-space:nowrap;font-variant-numeric:tabular-nums}
.gericht .text{margin-top:5px;color:var(--tinte-weich);font-size:15.5px;line-height:1.55;max-width:52ch}
.marken{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.marke-scharf,.marke-allergen{font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:99px}
.marke-scharf{background:rgba(191,69,38,.12);color:var(--chili)}
.marke-allergen{background:var(--papier-2);color:var(--tinte-weich)}

.hinweiskasten{
  margin-top:36px;background:#fff;border:1px solid var(--linie);border-left:4px solid var(--gold);
  border-radius:14px;padding:22px 26px
}
.hinweiskasten h3{font-size:18px;margin-bottom:8px}
.hinweiskasten p,.hinweiskasten li{color:var(--tinte-weich);font-size:15.5px}
.allergenliste{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px}
.allergenliste li::before{content:attr(data-nr);display:inline-grid;place-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--gruen);color:#fff;font-size:11px;font-weight:600;margin-right:8px;vertical-align:-4px}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:40px}
.galerie.paar{grid-template-columns:repeat(2,1fr);gap:22px}
.bildkachel{
  position:relative;border-radius:18px;overflow:hidden;background:var(--papier-2);cursor:zoom-in;
  border:1px solid var(--linie);box-shadow:var(--schatten);aspect-ratio:1/1
}
.bildkachel img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.bildkachel:hover img{transform:scale(1.06)}
.bildkachel figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;color:#fff;font-size:14.5px;font-weight:500;
  background:linear-gradient(transparent,rgba(30,22,15,.85));line-height:1.4
}
.kartenblatt{aspect-ratio:auto;background:var(--papier-2)}
/* Kartenfotos vollstaendig zeigen – sonst faellt eine halbe Seite weg */
.kartenblatt img{aspect-ratio:4/3;object-fit:contain;object-position:center}

/* ---------- Leuchtkasten ---------- */
.leuchtkasten{
  position:fixed;inset:0;z-index:200;background:rgba(24,18,12,.94);display:none;
  place-content:center;padding:24px;backdrop-filter:blur(6px)
}
.leuchtkasten[open]{display:grid}
.leuchtkasten img{max-width:min(1200px,94vw);max-height:84vh;object-fit:contain;border-radius:10px;margin:0 auto}
.leuchtkasten .bu{color:rgba(255,255,255,.85);text-align:center;margin-top:16px;font-size:15px}
.lk-knopf{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;cursor:pointer;transition:background .16s
}
.lk-knopf:hover{background:rgba(255,255,255,.3)}
.lk-zu{top:22px;right:22px;transform:none;font-size:22px}
.lk-vor{right:22px}.lk-zurueck{left:22px}

/* ---------- Zeiten ---------- */
.zeiten{list-style:none;margin-top:8px}
.zeiten li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--linie);font-size:16px}
.zeiten li:last-child{border-bottom:0}
.zeiten .tag{font-weight:500}
.zeiten .zu{color:var(--chili)}
.zeiten li.heute{font-weight:600}
.zeiten li.heute .tag::after{
  content:"heute";margin-left:9px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--gold);color:#fff;padding:2px 8px;border-radius:99px;font-weight:600;vertical-align:1px
}
.band.gruen .zeiten li{border-color:rgba(255,255,255,.16)}
.band.gruen .zeiten .zu{color:var(--gold-hell)}

/* ---------- Kontaktliste ---------- */
.daten{list-style:none;margin-top:6px}
.daten li{padding:13px 0;border-bottom:1px solid var(--linie)}
.daten li:last-child{border-bottom:0}
.daten .label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:3px}
.daten a{font-weight:500;text-decoration:none;border-bottom:1.5px solid rgba(184,134,43,.5);padding-bottom:1px}
.daten a:hover{border-bottom-color:var(--gold)}

.gross-zitat{
  font-family:var(--serif);font-size:clamp(21px,3vw,29px);line-height:1.4;font-weight:400;
  text-wrap:balance;letter-spacing:-.01em
}
.brief p{margin-top:16px;color:var(--tinte-weich);font-size:17px}
.brief .ueberschrift{margin-top:0;font-size:12px;color:var(--gold)}
.brief .anrede{color:var(--tinte);font-weight:600;font-family:var(--serif);font-size:20px}
.brief .unterschrift{margin-top:26px;font-family:var(--serif);font-size:19px;color:var(--gruen);font-weight:600}

/* ---------- Rechtsseiten ---------- */
.recht h2{font-size:22px;margin-top:34px}
.recht h2:first-child{margin-top:0}
.recht p,.recht address{margin-top:10px;color:var(--tinte-weich);font-size:16px;font-style:normal;line-height:1.6}
.recht address{color:var(--tinte)}
.recht a{color:var(--gruen);font-weight:500}
mark.todo{background:#fff2a8;color:var(--tinte);padding:0 4px;border-radius:4px}
.fuss .unten a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Fuß ---------- */
.fuss{background:#241b13;color:rgba(255,255,255,.72);padding-block:56px 34px;margin-top:0}
.fuss a{color:rgba(255,255,255,.72);text-decoration:none}
.fuss a:hover{color:#fff}
.fuss .raster{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px;margin-top:0}
.fuss h4{font-family:var(--serif);color:#fff;font-size:18px;font-weight:600;margin-bottom:12px}
.fuss .logo b{color:#fff}
.fuss ul{list-style:none;display:grid;gap:7px;font-size:15.5px}
.fuss .unten{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.5)
}

@media (max-width:1180px){
  /* mittlere Breiten: Untertitel im Logo weg, Navigation enger – bleibt eine Zeile */
  .logo i{display:none}
  .kopf .mitte{gap:18px}
  .navi a{font-size:14px;padding:8px 9px}
  .kopf .tel{font-size:14.5px;padding:9px 15px}
}
@media (max-width:1024px){
  /* ab hier klappt die Navigation unter die Kopfzeile – kein Umbruch, kein Wischen */
  .kopf .mitte{gap:10px;padding-block:11px}
  .kopf .tel{margin-left:auto;padding:9px 16px}
  .kopf .tel .nr{display:none}
  .kopf .tel .kurz{display:inline}
  .burger{display:inline-flex}
  .kopf .navi{
    position:absolute;left:0;right:0;top:100%;z-index:59;
    display:none;flex-direction:column;align-items:stretch;gap:2px;margin:0;
    padding:10px var(--rand) 16px;
    background:var(--papier);border-bottom:1px solid var(--linie);box-shadow:var(--schatten)
  }
  .kopf.offen .navi{display:flex}
  .navi a{font-size:16px;padding:12px 14px;border-radius:12px}
}
@media (max-width:820px){
  .siegel{width:46px;height:46px;font-size:8.5px}
  .logo b{font-size:20px}
  .gerichte{grid-template-columns:1fr}
  .galerie.paar{grid-template-columns:1fr}
  /* Kategorieleiste: rechts ausfaden = wischbar */
  .kartennavi .mitte{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.15));
    mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.15))
  }
}
@media (max-width:520px){
  .siegel{width:42px;height:42px;font-size:8px}
  .logo{gap:10px}
  .logo b{font-size:18.5px}
  .kopf .tel{font-size:14px;padding:9px 14px;gap:6px}
  .burger{font-size:13.5px;padding:8px 12px 8px 11px;gap:8px}
}
@media (max-width:430px){
  /* Handys: „Anrufen“ bleibt lesbar, das Menü wird zum reinen Knopf */
  .burger{width:40px;height:40px;padding:0;justify-content:center}
  .burger .wort{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap
  }
}
@media (max-width:369px){
  /* sehr schmale Handys: auch Anrufen nur noch als runder Knopf mit Hörer */
  .kopf .tel{width:40px;height:40px;padding:0;font-size:17px;border-radius:50%}
  .kopf .tel .kurz{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Gerichtnummern ---------- */
.gericht .zeile .gnr{
  flex:0 0 auto;min-width:2.1em;font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:600;color:var(--gold);padding-top:3px
}

/* ---------- Reservierung ---------- */
.schritte{
  display:flex;gap:10px;list-style:none;margin:0 0 26px;padding:0;flex-wrap:wrap;
  font-size:15px;font-weight:500;color:var(--tinte-weich)
}
.schritte li{display:flex;align-items:center;gap:9px}
.schritte li+li{margin-left:6px}
.schritte li+li::before{content:"";width:26px;height:1px;background:var(--linie);margin-right:6px}
.schritte .ziffer{
  width:25px;height:25px;border-radius:50%;display:grid;place-content:center;flex-shrink:0;
  background:var(--papier-2);color:var(--tinte-weich);
  font-size:13px;font-weight:700;border:1px solid var(--linie)
}
.schritte .aktiv{color:var(--tinte);font-weight:600}
.schritte .aktiv .ziffer{background:var(--gruen);color:#fff;border-color:var(--gruen)}
.schritte .erledigt .ziffer{background:var(--gold);color:#fff;border-color:var(--gold)}

.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.res-karte{
  background:#fff;border:1px solid var(--linie);border-radius:18px;
  padding:clamp(20px,4vw,30px);box-shadow:var(--schatten)
}
.res-karte+.res-karte{margin-top:18px}
.res-felder{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);align-items:start}
.res-felder.zwei{grid-template-columns:repeat(2,1fr)}
.reservierung .feld{display:block}
/* Abstand nur fuer die UNTEREINANDER stehenden Felder. Vorher galt die Regel auch
   fuer die Felder im Raster — die bekamen zusaetzlich zum gap noch 14px margin-top
   und standen dadurch tiefer als das Datumsfeld. */
.res-karte>.feld+.feld,
.res-felder+.feld{margin-top:14px}
.feldname{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinte-weich);margin-bottom:6px
}
.feldname i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;opacity:.75}
.reservierung input,.reservierung select,.reservierung textarea{
  /* display:block ist wichtig: als inline-Element bekaeme jedes Feld unter sich noch
     die Unterlaenge der Textzeile dazu — beim Datumsfeld waren das 12px, wodurch die
     drei Kaestchen nicht mehr auf einer Linie standen. */
  display:block;
  width:100%;font:inherit;font-size:16px;line-height:1.4;color:var(--tinte);background:var(--papier);
  border:1px solid var(--linie);border-radius:11px;padding:13px 14px;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none
}
/* feste Hoehe, damit Datumsfeld und Auswahlfelder exakt gleich hoch sind:
   Browser rechnen die Hoehe sonst je Feldtyp unterschiedlich aus (56 vs. 54 px). */
.reservierung input,.reservierung select{height:50px}
.reservierung textarea{resize:vertical;height:auto;min-height:84px;line-height:1.55}
.reservierung select{
  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='%236f5f4c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px
}
.reservierung input:focus,.reservierung select:focus,.reservierung textarea:focus{
  outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px rgba(47,106,82,.16)
}
.reservierung input:disabled,.reservierung select:disabled{opacity:.5}
.knopf.gross{width:100%;justify-content:center;margin-top:20px;padding:16px 24px;font-size:16.5px}
.res-zurueck{
  background:none;border:none;padding:0 0 14px;font:inherit;font-size:15px;font-weight:500;
  color:var(--gruen);cursor:pointer
}
.res-zurueck:hover{text-decoration:underline}
.res-hinweis{
  margin-top:14px;padding:11px 14px;border-radius:11px;font-size:15px;
  background:rgba(191,69,38,.08);color:var(--chili);border:1px solid rgba(191,69,38,.22)
}
.res-zusammenfassung{
  margin-bottom:18px;padding:13px 16px;border-radius:11px;background:var(--papier-2);
  border:1px solid var(--linie);font-weight:600;font-size:16px
}
.res-fussnote{margin-top:14px;font-size:14px;color:var(--tinte-weich)}
.res-fussnote a{color:var(--gruen);font-weight:600}
.res-erfolg{
  background:#fff;border:1px solid var(--linie);border-radius:18px;
  padding:clamp(26px,5vw,38px);box-shadow:var(--schatten);text-align:center
}
.res-erfolg .haken{
  display:grid;place-content:center;width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  background:var(--gruen);color:#fff;font-size:26px;line-height:1
}
.res-erfolg h2{margin-bottom:10px}
.res-erfolg p{color:var(--tinte-weich)}

@media (max-width:640px){
  .res-felder,.res-felder.zwei{grid-template-columns:1fr}
  .schritte{font-size:14px;gap:6px}
  .schritte li+li::before{width:16px}
}
#res-form,.res-erfolg,#schritte{scroll-margin-top:calc(var(--kopfhoehe,79px) + 18px)}