/* ==========================================================================
   OSTERIA MARCELLI — Konzeptstudie
   Gestaltung: gesetzt wie eine Speisekarte. Warmes Papier, Haarlinien,
   Kapitälchen, Punktführung, Ziffern in Tabellenbreite.
   ========================================================================== */

/* --- Schriften lokal: keine Verbindung zu Google, keine Besucher-IP in die USA --- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


/* --------------------------------------------------------------------------
   1. GRUNDWERTE
   -------------------------------------------------------------------------- */
:root{
  /* Papier und Tinte */
  --papier:      #F4EEE3;
  --papier-tief: #E9DFCC;
  --papier-warm: #FBF7EF;
  --tinte:       #191411;
  --tinte-2:     #4E4239;
  --tinte-3:     #8A7B6B;

  /* Akzente – sparsam */
  --terra:       #A23B26;
  --terra-tief:  #82301F;
  --oliv:        #4F5A3C;

  --linie:       rgba(25,20,17,.14);
  --linie-fein:  rgba(25,20,17,.08);
  --linie-hell:  rgba(244,238,227,.20);

  --anzeige: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --text:    'Karla', 'Helvetica Neue', Arial, sans-serif;

  --rand:     clamp(20px, 5vw, 72px);
  --spalte:   1280px;
  --luft:     clamp(72px, 11vw, 148px);

  --weich: cubic-bezier(.22,1,.36,1);
  --zeit: 520ms var(--weich);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--papier);
  color:var(--tinte-2);
  font-family:var(--text);
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Feines Korn über der ganzen Seite – nimmt dem Bildschirm das Sterile */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.42'/%3E%3C/svg%3E");
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

::selection{background:var(--terra);color:var(--papier-warm)}

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


/* --------------------------------------------------------------------------
   2. TYPOGRAFIE
   -------------------------------------------------------------------------- */
/* Zur WONK-Achse von Fraunces: Sie stellt einzelne Buchstaben absichtlich
   schief. Bei kleinen Schriftgraden gibt das Charakter, bei großen wirkt es
   unsauber — besonders bei J, K und z. Deshalb überall auf 0.
   SOFT rundet die Ecken und bleibt drin, das macht die Wärme aus. */
h1,h2,h3,h4{
  font-family:var(--anzeige);
  font-variation-settings:'SOFT' 34,'WONK' 0,'opsz' 60;
  font-weight:600;
  color:var(--tinte);
  line-height:1.12;
  letter-spacing:-.022em;
  overflow-wrap:break-word;
  hyphens:auto;
}

.riesig{font-size:clamp(2.9rem,8.4vw,6.6rem);line-height:1.02;letter-spacing:-.032em;
  font-variation-settings:'SOFT' 36,'WONK' 0,'opsz' 120}
h1{font-size:clamp(2.3rem,5vw,4rem);font-variation-settings:'SOFT' 34,'WONK' 0,'opsz' 88}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem);font-variation-settings:'SOFT' 32,'WONK' 0,'opsz' 56}
h3{font-size:clamp(1.15rem,2vw,1.5rem);font-variation-settings:'SOFT' 28,'WONK' 0,'opsz' 24;line-height:1.25}
h4{font-size:1rem;font-variation-settings:'SOFT' 20,'WONK' 0,'opsz' 14}

p{max-width:64ch}

/* Kapitälchen-Marke – das wiederkehrende Signal der Seite */
.marke{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-family:var(--text);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--terra);
}
.marke::before{
  content:'';
  width:26px;
  height:1px;
  background:currentColor;
  flex-shrink:0;
}
.marke--hell{color:rgba(244,238,227,.72)}
.marke--ohne::before{display:none}

.vorspann{
  font-size:clamp(1.0625rem,1.6vw,1.28rem);
  line-height:1.62;
  color:var(--tinte-2);
}

.kursiv{
  font-family:var(--anzeige);
  font-style:italic;
  font-variation-settings:'SOFT' 40,'WONK' 0,'opsz' 40;
  color:var(--terra);
}


/* --------------------------------------------------------------------------
   3. RASTER
   -------------------------------------------------------------------------- */
.bahn{
  width:100%;
  max-width:var(--spalte);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.bahn--eng{max-width:820px}

.abschnitt{padding-block:var(--luft)}
.abschnitt--knapp{padding-block:calc(var(--luft) * .58)}

.dunkel{
  background:var(--tinte);
  color:rgba(244,238,227,.76);
}
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel h4{color:var(--papier-warm)}
.dunkel .vorspann{color:rgba(244,238,227,.72)}

.regal{background:var(--papier-tief)}

/* Haarlinie als wiederkehrendes Trennelement */
.strich{height:1px;background:var(--linie);border:0}
.strich--hell{background:var(--linie-hell)}


/* --------------------------------------------------------------------------
   4. SCHALTFLÄCHEN
   -------------------------------------------------------------------------- */
.knopf{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:15px 30px;
  border:1px solid var(--tinte);
  border-radius:2px;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tinte);
  background:transparent;
  position:relative;
  overflow:hidden;
  transition:color 340ms var(--weich), border-color 340ms var(--weich);
  cursor:pointer;
}
.knopf::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--tinte);
  transform:translateY(101%);
  transition:transform 420ms var(--weich);
  z-index:-1;
}
.knopf span,.knopf svg{position:relative;z-index:1}
.knopf:hover{color:var(--papier-warm)}
.knopf:hover::before{transform:translateY(0)}

.knopf--voll{
  background:var(--terra);
  border-color:var(--terra);
  color:var(--papier-warm);
}
.knopf--voll::before{background:var(--terra-tief)}
.knopf--voll:hover{color:var(--papier-warm);border-color:var(--terra-tief)}

.knopf--hell{border-color:rgba(244,238,227,.42);color:var(--papier-warm)}
.knopf--hell::before{background:var(--papier-warm)}
.knopf--hell:hover{color:var(--tinte);border-color:var(--papier-warm)}

.knopf svg{width:15px;height:15px;flex-shrink:0}

.knopfreihe{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Textlink mit wachsender Unterlänge */
.pfeil{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tinte);
  padding-bottom:4px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size 400ms var(--weich);
}
.pfeil:hover{background-size:100% 1px}
.pfeil svg{width:14px;height:14px;transition:transform 400ms var(--weich)}
.pfeil:hover svg{transform:translateX(4px)}
.pfeil--hell{color:var(--papier-warm)}


/* --------------------------------------------------------------------------
   5. STUDIEN-LEISTE UND KOPF
   -------------------------------------------------------------------------- */
.studie{
  background:var(--tinte);
  color:rgba(244,238,227,.62);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  padding:9px var(--rand);
  position:relative;
  z-index:60;
}
.studie a{color:var(--papier-warm);border-bottom:1px solid rgba(244,238,227,.36)}
.studie a:hover{border-color:var(--papier-warm)}
.studie b{color:rgba(244,238,227,.86);font-weight:700}

.kopf{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(244,238,227,.90);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie-fein);
  transition:box-shadow 300ms var(--weich);
}
.kopf.geschoben{box-shadow:0 1px 22px rgba(25,20,17,.09)}
.kopf__innen{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:74px;
}

.logo{
  font-family:var(--anzeige);
  font-variation-settings:'SOFT' 34,'WONK' 0,'opsz' 30;
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--tinte);
  line-height:1;
  flex-shrink:0;
}
.logo small{
  display:block;
  font-family:var(--text);
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--terra);
  margin-top:5px;
}

.menue{display:flex;gap:30px;align-items:center}
.menue a{
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinte-2);
  padding-bottom:3px;
  background-image:linear-gradient(var(--terra),var(--terra));
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size 360ms var(--weich),color 260ms;
}
.menue a:hover,.menue a.hier{color:var(--tinte);background-size:100% 1px}

.kopf__rechts{display:flex;align-items:center;gap:18px}
.kopf__tel{
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--tinte);
  white-space:nowrap;
}

.klapper{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  border:1px solid var(--linie);
  border-radius:2px;
  flex-shrink:0;
}
.klapper span{
  display:block;width:19px;height:1.5px;background:var(--tinte);
  position:relative;transition:background 200ms;
}
.klapper span::before,.klapper span::after{
  content:'';position:absolute;left:0;width:19px;height:1.5px;background:var(--tinte);
  transition:transform 380ms var(--weich);
}
.klapper span::before{top:-6px}
.klapper span::after{top:6px}
.klapper[aria-expanded="true"] span{background:transparent}
.klapper[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.klapper[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.schublade{
  position:fixed;
  inset:0;
  z-index:45;
  background:var(--papier);
  padding:120px var(--rand) 40px;
  display:flex;
  flex-direction:column;
  gap:4px;
  transform:translateY(-100%);
  transition:transform 620ms var(--weich);
  overflow-y:auto;
}
.schublade.offen{transform:translateY(0)}
/* :not(.knopf) ist nötig — sonst erbt die Schaltfläche im Menü die
   Aufmachung der Menüpunkte: riesiger Serifentext ohne Polster. */
.schublade a:not(.knopf){
  font-family:var(--anzeige);
  font-variation-settings:'SOFT' 34,'WONK' 0,'opsz' 48;
  font-size:clamp(1.9rem,9vw,2.6rem);
  color:var(--tinte);
  padding:11px 0;
  border-bottom:1px solid var(--linie-fein);
}
.schublade .knopf{margin-top:28px;align-self:flex-start}


/* --------------------------------------------------------------------------
   6. BÜHNE
   -------------------------------------------------------------------------- */
.buehne{
  position:relative;
  min-height:min(88vh,860px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--tinte);
}
.buehne__bild{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.62;
  transform:scale(1.06);
  animation:ruhen 2600ms var(--weich) forwards;
}
@keyframes ruhen{to{transform:scale(1)}}
.buehne::after{
  content:'';
  position:absolute;inset:0;
  /* Der Stopp bei 38 % lag auf .22 — genau dort steht der Vorspann, und ueber
     dem hellen Gewoelbe kam selbst reines Weiss nicht auf das Kontrastminimum. */
  background:linear-gradient(180deg,rgba(25,20,17,.62) 0%,rgba(25,20,17,.45) 38%,rgba(25,20,17,.88) 100%);
}
.buehne__inhalt{
  position:relative;
  z-index:2;
  width:100%;
  padding-block:clamp(48px,9vw,96px);
}
.buehne h1{
  color:var(--papier-warm);
  max-width:15ch;
  margin-top:22px;
}
.buehne .vorspann{
  /* .80 lag ueber dem Foto knapp unter dem Kontrastminimum fuer Fliesstext. */
  color:rgba(244,238,227,.94);
  max-width:46ch;
  margin-top:24px;
}
.buehne .knopfreihe{margin-top:38px}

/* Öffnungsstatus in der Bühne */
.jetzt{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:30px;
  padding:9px 17px;
  border:1px solid rgba(244,238,227,.28);
  border-radius:2px;
  font-size:.75rem;
  letter-spacing:.09em;
  color:rgba(244,238,227,.84);
  background:rgba(25,20,17,.34);
}
.jetzt__punkt{
  width:7px;height:7px;border-radius:50%;
  background:#7BAE5E;
  box-shadow:0 0 0 0 rgba(123,174,94,.7);
  animation:pulsen 2400ms ease-out infinite;
  flex-shrink:0;
}
.jetzt__punkt.zu{background:var(--terra);animation:none}
@keyframes pulsen{
  70%{box-shadow:0 0 0 8px rgba(123,174,94,0)}
  100%{box-shadow:0 0 0 0 rgba(123,174,94,0)}
}


/* --------------------------------------------------------------------------
   7. VERSATZ — asymmetrische Text-Bild-Blöcke
   -------------------------------------------------------------------------- */
.versatz{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
.versatz > *{min-width:0}
/* grid-row:1 ist nötig: Grid platziert automatisch nur vorwärts. Ohne die
   Angabe rutscht ein Textblock, der links vom vorher notierten Bild steht,
   in die nächste Zeile statt daneben. */
.versatz__bild{grid-column:1 / span 7;grid-row:1;position:relative}
.versatz__text{grid-column:9 / span 4;grid-row:1}
.versatz--kehrt .versatz__bild{grid-column:7 / span 6;grid-row:1}
.versatz--kehrt .versatz__text{grid-column:1 / span 5;grid-row:1}

.versatz__bild img{
  width:100%;
  aspect-ratio:7/5;
  object-fit:cover;
  border-radius:2px;
}
.versatz__bild--hoch img{aspect-ratio:4/5}

/* Bildunterschrift wie im Druck */
.bu{
  margin-top:12px;
  font-size:.75rem;
  line-height:1.5;
  color:var(--tinte-3);
  letter-spacing:.02em;
  max-width:34ch;
}
.bu::before{content:'↑  ';opacity:.5}


/* --------------------------------------------------------------------------
   8. SPEISEKARTE — das Herzstück
   -------------------------------------------------------------------------- */
.karte{max-width:760px;scroll-margin-top:120px}
.karte + .karte{margin-top:clamp(48px,7vw,78px)}

/* Sprungmarken über der Karte */
.sprung{
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  padding-bottom:26px;
  margin-bottom:clamp(30px,4vw,44px);
  border-bottom:1px solid var(--linie);
}
.sprung a{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tinte-3);
  padding-bottom:3px;
  background-image:linear-gradient(var(--terra),var(--terra));
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size 360ms var(--weich),color 240ms;
}
.sprung a:hover{color:var(--tinte);background-size:100% 1px}

.karte__kopf{
  display:flex;
  align-items:baseline;
  gap:18px;
  padding-bottom:14px;
  border-bottom:1.5px solid var(--tinte);
  margin-bottom:8px;
}
.karte__kopf h3{
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  font-variation-settings:'SOFT' 32,'WONK' 0,'opsz' 40;
  white-space:nowrap;
}
.karte__kopf em{
  font-family:var(--text);
  font-style:normal;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tinte-3);
  margin-left:auto;
  text-align:right;
}

.gericht{
  padding:17px 0;
  border-bottom:1px solid var(--linie-fein);
}
.gericht:last-child{border-bottom:0}

/* Punktführung wie auf einer gedruckten Karte: Name — Punkte — Preis.
   Als Flexzeile, damit die Punkte exakt den Zwischenraum füllen. */
.gericht__zeile{
  display:flex;
  align-items:baseline;
}
.gericht__name{
  font-family:var(--anzeige);
  font-variation-settings:'SOFT' 30,'WONK' 0,'opsz' 20;
  font-size:1.0625rem;
  font-weight:600;
  line-height:1.35;
  color:var(--tinte);
  min-width:0;
}
.gericht__punkte{
  flex:1 1 auto;
  min-width:22px;
  align-self:baseline;
  border-bottom:1px dotted rgba(25,20,17,.34);
  margin:0 10px;
  transform:translateY(-5px);
}
.gericht__preis{
  font-family:var(--anzeige);
  font-variation-settings:'SOFT' 30,'WONK' 0,'opsz' 20;
  font-size:1.0625rem;
  font-weight:600;
  color:var(--tinte);
  font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;
  flex-shrink:0;
}
.gericht__zutaten{
  font-size:.875rem;
  line-height:1.55;
  color:var(--tinte-3);
  margin-top:5px;
  max-width:58ch;
}
.gericht__zeichen{
  font-size:.75rem;
  color:var(--tinte-3);
  letter-spacing:.04em;
}

.hinweis-karte{
  margin-top:34px;
  padding-top:20px;
  border-top:1px solid var(--linie);
  font-size:.8125rem;
  line-height:1.7;
  color:var(--tinte-3);
  max-width:62ch;
}


/* --------------------------------------------------------------------------
   9. MITTAGSTISCH
   -------------------------------------------------------------------------- */
.mittag{
  border:1px solid var(--tinte);
  border-radius:2px;
  padding:clamp(28px,4.5vw,46px);
  background:var(--papier-warm);
  position:relative;
}
.mittag::before{
  content:'';
  position:absolute;
  inset:7px;
  border:1px solid var(--linie);
  border-radius:2px;
  pointer-events:none;
}
.mittag__zeile{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:13px 0;
  border-bottom:1px solid var(--linie-fein);
  font-variant-numeric:tabular-nums lining-nums;
}
.mittag__zeile:last-of-type{border-bottom:0}
.mittag__zeile b{
  font-family:var(--anzeige);
  font-variation-settings:'SOFT' 30,'opsz' 20;
  font-size:1.0625rem;
  font-weight:600;
  color:var(--tinte);
}
.mittag__zeile span{
  font-family:var(--anzeige);
  font-weight:600;
  color:var(--tinte);
  white-space:nowrap;
}


/* --------------------------------------------------------------------------
   10. ÖFFNUNGSZEITEN
   -------------------------------------------------------------------------- */
.zeiten{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
.zeiten th,.zeiten td{
  padding:13px 0;
  border-bottom:1px solid var(--linie-fein);
  text-align:left;
  vertical-align:baseline;
}
.zeiten th{
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tinte);
  width:34%;
  white-space:nowrap;
}
.zeiten td{text-align:right;color:var(--tinte-2)}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:0}
.zeiten .ruhetag td{color:var(--terra);font-weight:700}
.dunkel .zeiten th{color:var(--papier-warm)}
.dunkel .zeiten td{color:rgba(244,238,227,.72)}
.dunkel .zeiten th,.dunkel .zeiten td{border-color:var(--linie-hell)}


/* --------------------------------------------------------------------------
   11. ZITAT
   -------------------------------------------------------------------------- */
.zitat{position:relative;padding-left:clamp(0px,3vw,44px)}
.zitat blockquote{
  font-family:var(--anzeige);
  font-variation-settings:'SOFT' 44,'WONK' 0,'opsz' 72;
  font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.5rem);
  line-height:1.24;
  letter-spacing:-.015em;
  color:var(--papier-warm);
  max-width:20ch;
}
.zitat figcaption{
  margin-top:26px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(244,238,227,.56);
}


/* --------------------------------------------------------------------------
   12. INFOSPALTEN — bewusst ungleich, keine drei gleichen Kacheln
   -------------------------------------------------------------------------- */
.infos{
  display:grid;
  grid-template-columns:1.15fr 1fr 1.25fr;
  gap:clamp(32px,5vw,64px);
  align-items:start;
}
.infos > *{min-width:0}
.info h4{
  font-family:var(--text);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--terra);
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--linie);
}
.dunkel .info h4{border-color:var(--linie-hell)}
.info p,.info address{font-style:normal;line-height:1.8}
.info a:hover{color:var(--terra)}
.dunkel .info a:hover{color:var(--papier-warm)}


/* --------------------------------------------------------------------------
   13. FORMULAR
   -------------------------------------------------------------------------- */
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feldpaar > *{min-width:0}
.feld{margin-bottom:18px}
.feld label{
  display:block;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tinte-3);
  margin-bottom:8px;
}
.feld input,.feld select,.feld textarea{
  width:100%;
  padding:13px 0;
  border:0;
  border-bottom:1px solid var(--linie);
  background:transparent;
  color:var(--tinte);
  font-size:1rem;
  border-radius:0;
  transition:border-color 300ms var(--weich);
}
.feld select{cursor:pointer}
.feld textarea{min-height:100px;resize:vertical;line-height:1.6}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:0;
  border-bottom-color:var(--terra);
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--tinte-3);opacity:.7}
.feld.fehlt input,.feld.fehlt select,.feld.fehlt textarea{border-bottom-color:var(--terra)}
.feld__fehler{
  display:none;
  margin-top:7px;
  font-size:.75rem;
  color:var(--terra);
}
.feld.fehlt .feld__fehler{display:block}

.zustimmung{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin:26px 0 24px;
  font-size:.8125rem;
  line-height:1.6;
  color:var(--tinte-3);
  cursor:pointer;
  position:relative;
}
.zustimmung input{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.zustimmung__kasten{
  width:19px;height:19px;
  flex-shrink:0;
  margin-top:2px;
  border:1px solid var(--tinte-3);
  border-radius:1px;
  position:relative;
  transition:all 240ms var(--weich);
}
.zustimmung__kasten::after{
  content:'';
  position:absolute;
  left:6px;top:2px;
  width:5px;height:10px;
  border:solid var(--papier-warm);
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) scale(0);
  transition:transform 240ms var(--weich);
}
.zustimmung input:checked + .zustimmung__kasten{background:var(--terra);border-color:var(--terra)}
.zustimmung input:checked + .zustimmung__kasten::after{transform:rotate(45deg) scale(1)}
.zustimmung input:focus-visible + .zustimmung__kasten{outline:2px solid var(--terra);outline-offset:3px}
.zustimmung a{color:var(--tinte);border-bottom:1px solid var(--linie)}
.zustimmung.fehlt .zustimmung__kasten{border-color:var(--terra)}

.rueckmeldung{
  display:none;
  margin-top:22px;
  padding:17px 20px;
  border:1px solid var(--terra);
  border-radius:2px;
  background:rgba(162,59,38,.06);
  font-size:.875rem;
  line-height:1.6;
  color:var(--tinte-2);
}
.rueckmeldung.sichtbar{display:block}


/* --------------------------------------------------------------------------
   14. FUSS
   -------------------------------------------------------------------------- */
.fuss{background:var(--tinte);color:rgba(244,238,227,.62);padding-block:clamp(56px,8vw,86px) 34px}
.fuss__raster{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(28px,4vw,54px);
}
.fuss__raster > *{min-width:0}
.fuss .logo{color:var(--papier-warm)}
.fuss h4{
  font-family:var(--text);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(244,238,227,.44);
  margin-bottom:16px;
}
.fuss a:hover{color:var(--papier-warm)}
.fuss__spalte{display:flex;flex-direction:column;gap:9px;font-size:.9375rem}
.fuss__unten{
  margin-top:clamp(40px,6vw,66px);
  padding-top:24px;
  border-top:1px solid var(--linie-hell);
  display:flex;
  flex-wrap:wrap;
  gap:14px 26px;
  justify-content:space-between;
  font-size:.75rem;
  letter-spacing:.05em;
  color:rgba(244,238,227,.44);
}
.fuss__unten a{border-bottom:1px solid rgba(244,238,227,.24)}


/* --------------------------------------------------------------------------
   15. FLIESSTEXT (Rechtsseiten)
   -------------------------------------------------------------------------- */
.satz h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:44px 0 14px}
.satz h2:first-child{margin-top:0}
.satz p{margin-bottom:15px;max-width:70ch}
.satz ul{margin:0 0 18px 20px;list-style:disc}
.satz li{margin-bottom:7px;max-width:68ch}
.satz a{color:var(--terra);border-bottom:1px solid rgba(162,59,38,.34)}
.satz a:hover{border-color:var(--terra)}
.satz strong{color:var(--tinte);font-weight:700}


/* --------------------------------------------------------------------------
   16. EINBLENDEN BEIM SCROLLEN
   -------------------------------------------------------------------------- */
[data-auf]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 900ms var(--weich),transform 900ms var(--weich);
}
[data-auf].da{opacity:1;transform:none}


/* --------------------------------------------------------------------------
   17. SCHMALE BILDSCHIRME
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .menue,.kopf__tel{display:none}
  .klapper{display:flex}

  .versatz{grid-template-columns:1fr;gap:32px}
  /* Untereinander: Spalten- und Zeilenangaben zurücknehmen, sonst liegen
     Bild und Text übereinander. Gilt auch für die im HTML gesetzten Spalten. */
  .versatz > *{grid-column:1 / -1 !important;grid-row:auto !important}
  .versatz__bild img{aspect-ratio:3/2}
  .versatz__bild--hoch img{aspect-ratio:3/2}

  .infos{grid-template-columns:1fr 1fr}
  .fuss__raster{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  body{font-size:16px}

  /* Logo, Schaltfläche und Menüknopf passen nebeneinander nicht mehr.
     Die Reservierung steht im aufgeklappten Menü. */
  .kopf__rechts .knopf{display:none}
  .logo{font-size:1.15rem}
  .kopf__innen{min-height:64px}
  .studie{font-size:.625rem;letter-spacing:.07em;line-height:1.5;padding:8px 16px}
  .infos,.fuss__raster,.feldpaar{grid-template-columns:1fr}
  .knopfreihe .knopf{flex:1 1 auto;justify-content:center}
  .karte__kopf{flex-wrap:wrap;gap:6px}
  .karte__kopf em{margin-left:0;width:100%;text-align:left}
  .buehne{min-height:min(84vh,720px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  [data-auf]{opacity:1;transform:none}
  .buehne__bild{animation:none;transform:none}
}