/* ══════════════════════════════════════════════════════════════════
   Direktbuchung, Widerrufsformular und Markenband

   Alle drei kamen aus Renés Fragebogen. Der gemeinsame Nenner:
   der Gast soll auf der Seite bleiben, auf der er gerade ist.
   ══════════════════════════════════════════════════════════════════ */

/* ── Direktbuchung ────────────────────────────────────────────── */

.direktbuchung{
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line);border-radius:var(--r,18px);
  padding:clamp(22px,3vw,34px);
  scroll-margin-top:calc(var(--nav-h) + 26px);
}
.db-kopf{margin-bottom:clamp(18px,2.4vw,26px)}
.db-kopf .kicker{display:block;margin-bottom:9px}
.db-kopf h2{margin:0 0 8px}
.db-kopf .lead{margin:0;max-width:56ch}

.db-gitter{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.db-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
/* Die Anmerkung bekommt die volle Breite — sonst steht ein
   zweizeiliges Textfeld neben einem einzeiligen Datumsfeld und das
   Raster kippt. */
.db-feld--text{grid-column:1/-1}
.db-feld label{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--soft);
}
.db-pflicht{color:var(--flut)}
.db-feld input,.db-feld select,.db-feld textarea{
  width:100%;box-sizing:border-box;         /* ohne border-box wird 100% + Padding zu breit */
  min-height:46px;padding:11px 13px;
  border-radius:10px;border:1px solid var(--line);
  background:rgba(0,0,0,.24);color:var(--snow);
  font-family:inherit;font-size:.95rem;
}
.db-feld textarea{min-height:70px;resize:vertical}
.db-feld input:focus-visible,.db-feld select:focus-visible,.db-feld textarea:focus-visible{
  outline:2px solid var(--ice);outline-offset:2px;border-color:transparent;
}
/* Ein fehlendes Pflichtfeld wird gezeigt, nicht angeschrien. */
.db-feld.fehlt input,.db-feld.fehlt select,.db-feld.fehlt textarea,
.db-agb.fehlt{border-color:rgba(255,138,138,.75)}

.db-agb{margin-top:16px;padding:8px 13px;border-radius:10px;border:1px solid transparent}
/* Das ganze Label ist das Tippziel, nicht nur das Kästchen — deshalb
   die Mindesthöhe hier und das Padding, das den Rand um das Kästchen
   mitschaltbar macht. Ein 22-px-Kästchen allein trifft auf einem
   Handy niemand zuverlässig. */
.db-check{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:.9rem;color:var(--text);min-height:44px;padding:9px 0;
}
.db-check input{
  width:24px;height:24px;flex:none;margin:0;accent-color:var(--ice);cursor:pointer;
  /* Die Trefferfläche wird auf 44 px aufgeblasen, ohne dass das
     Kästchen optisch wächst. */
  outline-offset:3px;
}
.db-check > span{padding-top:3px}
/* Die beiden Rechtslinks standen früher IM Label. Zwei Probleme auf
   einmal: sie waren 17 px hoch (Tippziel verfehlt man), und wer sie
   verfehlte, schaltete stattdessen das Häkchen — also genau das
   Gegenteil dessen, was er wollte. Jetzt stehen sie als eigene Zeile
   darunter, mit voller Tipphöhe und außerhalb des Label-Bereichs. */
.db-agb-links{
  display:flex;flex-wrap:wrap;gap:4px 22px;margin:2px 0 0;padding-left:35px;
}
.db-agb-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ice);
  text-decoration:underline;text-underline-offset:4px;
}
.db-agb-links a:hover{color:var(--snow)}
@media(max-width:560px){.db-agb-links{padding-left:0}}

.db-hin{margin:12px 0 0;color:var(--dim)}

/* Der zweite Weg neben dem Formular. René: „eine Reservierungs-Anfrage
   geht nur via E-Mail oder telefonisch" — beide Wege gleichrangig, also
   steht die Nummer direkt unter dem Kasten und nicht erst im Fuß. */
.anfrage-tel{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin:18px 0 0;color:var(--soft);font-size:.94rem;
}

.db-cta{
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;
  margin-top:clamp(16px,2vw,22px);
}
.db-melde{margin:12px 0 0;font-size:.92rem;min-height:1.4em}
.db-melde.ok{color:var(--pine)}
.db-melde.warn{color:#FF9A9A}

@media(max-width:560px){
  .db-gitter{grid-template-columns:1fr}
  .db-cta{flex-direction:column;align-items:stretch}
  .db-cta .btn{width:100%;justify-content:center}
}

/* ── Widerrufsformular ────────────────────────────────────────── */

.wf{
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:var(--r,18px);padding:clamp(20px,3vw,32px);
  margin-top:clamp(22px,3vw,32px);
  /* Fußzeile und Suche verlinken direkt hierher — ohne scroll-margin
     landet der Kopf des Formulars unter der festen Leiste. */
  scroll-margin-top:calc(var(--nav-h) + 26px);
}
/* Die Labels sind verschieden lang. Bricht eins auf zwei Zeilen um,
   stünden die Eingabefelder daneben auf unterschiedlicher Höhe — eine
   Zeile, die nicht wie eine Zeile aussieht. Mit end-Ausrichtung stehen
   die Felder auf einer Linie und die Labels wachsen nach oben. */
.wf-gitter,.db-gitter{align-items:end}
.wf-vor{margin:0 0 20px;max-width:68ch}
.wf-an{
  display:flex;gap:16px;align-items:flex-start;
  padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.22);
  border-left:3px solid var(--ice);margin-bottom:20px;
}
.wf-label{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft);padding-top:3px;
}
.wf-an address{font-style:normal;line-height:1.65;color:var(--text)}
.wf-satz{margin:0 0 18px;max-width:68ch;color:var(--text)}

.wf-gitter{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.wf-breit{grid-column:1/-1}
.wf-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.wf-feld label{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--soft);
}
.wf-feld input{
  width:100%;box-sizing:border-box;min-height:46px;padding:11px 13px;
  border-radius:10px;border:1px solid var(--line);
  background:rgba(0,0,0,.24);color:var(--snow);font-family:inherit;font-size:.95rem;
}
.wf-feld input:focus-visible{outline:2px solid var(--ice);outline-offset:2px;border-color:transparent}
.wf-feld.fehlt input{border-color:rgba(255,138,138,.75)}
.wf-nach{margin:16px 0 0;color:var(--dim)}
.wf-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.wf-melde{margin:12px 0 0;font-size:.92rem;min-height:1.4em}
.wf-melde.ok{color:var(--pine)}
.wf-melde.warn{color:#FF9A9A}

@media(max-width:560px){
  .wf-gitter{grid-template-columns:1fr}
  .wf-an{flex-direction:column;gap:8px}
  .wf-cta{flex-direction:column}
  .wf-cta .btn{width:100%;justify-content:center}
}

/* Auf Papier bleibt nur das Formular — Navigation, Fußzeile und
   Knöpfe haben auf einem Widerruf nichts zu suchen. */
@media print{
  body *{visibility:hidden}
  .wf,.wf *{visibility:visible}
  .wf{position:absolute;inset:0 auto auto 0;width:100%;border:0;background:#fff;color:#000}
  .wf-cta,.wf-melde{display:none}
  .wf-feld input{border:0;border-bottom:1px solid #333;border-radius:0;background:transparent;color:#000}
  .wf-feld label,.wf-label{color:#333}
  .wf-an{background:transparent;border-left-color:#333}
  .wf-an address,.wf-satz,.wf-vor,.wf-nach{color:#000}
}

/* ── Markenband ───────────────────────────────────────────────── */

.markenband{
  border-top:1px solid var(--line);padding-top:clamp(20px,2.6vw,28px);
  margin-top:clamp(24px,3vw,38px);
  /* Das Kapitelverzeichnis springt auf diese id — ohne scroll-margin
     landet die Überschrift unter der festen Kopfleiste. */
  scroll-margin-top:calc(var(--nav-h) + 26px);
}
.mb-titel{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ice);margin:0 0 16px;
}
.mb-liste{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px 10px;
}
.mb-liste li{
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  color:var(--text);padding:8px 13px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);
  transition:border-color .25s,color .25s,background .25s;
}
.mb-liste li:hover{border-color:rgba(143,211,244,.45);color:var(--snow);background:rgba(143,211,244,.07)}
.mb-hin{margin:14px 0 0;color:var(--dim);max-width:62ch}

@media (prefers-reduced-motion:reduce){
  .mb-liste li{transition:none}
}

/* Kurz hervorheben, wenn ein Feld von außen gefüllt wurde — etwa
   durch „Diesen reservieren" im Schlittenband. Ohne das Aufblitzen
   übersieht man, dass oben schon etwas ausgewählt ist, und wählt
   ein zweites Mal. Nur ein Rahmen, keine Bewegung: die Regel gilt
   auch für Leute, die Animationen abgestellt haben. */
.db-frisch{
  border-color:var(--ice) !important;
  box-shadow:0 0 0 3px rgba(143,211,244,.22);
  transition:box-shadow .3s var(--ease),border-color .3s;
}