/* Gästeseiten (Anfrageformular, Kundenportal) im Look von strozzis.ch – je Betrieb bzw. Strandhaus-Saison.
   Die Funktion bleibt unverändert: Es werden nur die Farbvariablen aus style.css/event.css pro Thema überschrieben.
   Überarbeitet nach UX- und Barrierefreiheits-Review (WCAG 2.1 AA). */

/* Schriften lokal (SIL Open Font License, via Fontsource) – keine Anfragen an Google */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("schrift/cormorant-garamond-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("schrift/jost-latin-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("schrift/jost-latin-400.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("schrift/jost-latin-600.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}

body.gast {
  /* Titel: Baskerville-Anmutung wie auf der Website; Text: Futura Light-Anmutung (Jost) */
  --titel: "Cormorant Garamond", "Baskerville", "Baskerville Old Face", Georgia, serif;
  --text: "Jost", "Futura", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif;
  --bg: #faf8f5;
  --linie: #e6e1d8;
  --rand: #8f8778;                          /* Feldränder: ≥ 3:1 auf Weiss (WCAG 1.4.11) */
  --radius: 14px;
  font-family: var(--text);
  font-weight: 300;
  background: var(--bg);
}
body.gast strong, body.gast b { font-weight: 600; }

/* ---------- Themen (Farben aus strozzis.ch) */
body.gast.thema-neutral           { --dunkel: #1f3a37; --gold: #47706a; --gold-dunkel: #365a55; --gold-hell: #e7f1ef; --akzent: #b9e6df; }
body.gast.thema-pelikan           { --dunkel: #293b23; --gold: #293b23; --gold-dunkel: #1b2a17; --gold-hell: #fbe9e6; --akzent: #f69e94; }
body.gast.thema-strandhaus-sommer { --dunkel: #1f4541; --gold: #3f6b65; --gold-dunkel: #2f524d; --gold-hell: #e4f4f1; --akzent: #b9e6df; }
body.gast.thema-strandhaus-wild   { --dunkel: #2e1d14; --gold: #65472d; --gold-dunkel: #4d3521; --gold-hell: #f3ebe1; --akzent: #d8b98f; }
body.gast.thema-strandhaus-winter { --dunkel: #3a0d0b; --gold: #4f1210; --gold-dunkel: #3a0d0b; --gold-hell: #f5ecea; --akzent: #beb493; }

/* ---------- Kopfbild */
.gast-hero {
  position: relative; display: grid; place-items: center; text-align: center; color: #fff;
  min-height: clamp(270px, 44vh, 440px); padding: 3.5rem 1rem 4.5rem;
  background: var(--dunkel) center / cover no-repeat;
}
.gast-hero::before {                      /* Abdunkeln, damit Logo und Schrift immer lesbar sind (≥ 4.5:1) */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.62) 100%);
}
.thema-neutral .gast-hero           { background-image: url("../kopfbild/neutral.jpg"); }
.thema-pelikan .gast-hero           { background-image: url("../kopfbild/pelikan.jpg"); }
.thema-strandhaus-sommer .gast-hero { background-image: url("../kopfbild/strandhaus-sommer.jpg"); background-position: center 70%; }
.thema-strandhaus-wild .gast-hero   { background-image: url("../kopfbild/strandhaus-wild.jpg"); }
.thema-strandhaus-winter .gast-hero { background-image: url("../kopfbild/strandhaus-winter.jpg"); }

.gast-hero-inhalt { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; max-width: 640px; }
.gast-s { position: absolute; top: -2.6rem; width: 22px; height: auto; opacity: .95; }
.gast-marke { display: none; height: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.gast-marke.strozzis { width: min(300px, 70vw); }
.gast-marke.strandhaus { width: min(360px, 78vw); }
.thema-neutral .gast-marke.strozzis, .thema-pelikan .gast-marke.strozzis { display: block; }
.thema-strandhaus-sommer .gast-marke.strandhaus, .thema-strandhaus-wild .gast-marke.strandhaus,
.thema-strandhaus-winter .gast-marke.strandhaus { display: block; }

.gast-zeile, .gast-rubrik { margin: 0; text-transform: uppercase; text-wrap: balance;
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 12px rgba(0,0,0,.5); }
.gast-zeile { font-size: .85rem; font-weight: 600; letter-spacing: .12em; }
.gast-zeile span { display: none; }
.thema-pelikan .gast-zeile .ort-pelikan,
.thema-strandhaus-sommer .gast-zeile .ort-strandhaus, .thema-strandhaus-wild .gast-zeile .ort-strandhaus,
.thema-strandhaus-winter .gast-zeile .ort-strandhaus, .thema-neutral .gast-zeile .ort-neutral { display: inline; }
.gast-linie { width: 90px; height: 1px; background: rgba(255,255,255,.8); margin: .35rem 0; }
.gast-rubrik { font-size: .88rem; font-weight: 400; letter-spacing: .12em; }
body.gast .gast-kontakt { position: absolute; top: .9rem; right: 1rem; z-index: 1; font-size: .85rem; letter-spacing: .04em;
  color: #fff; text-decoration: none; text-shadow: 0 1px 6px rgba(0,0,0,.6); padding: .6rem .2rem; }
body.gast .gast-kontakt:hover { text-decoration: underline; }

/* Inhalt beginnt als Karte über dem Kopfbild */
body.gast main.inhalt, body.gast main.schmal { position: relative; padding-top: 0; margin-top: -3rem; }

/* ---------- Typografie */
body.gast h1, body.gast h2 { font-family: var(--titel); font-weight: 600; letter-spacing: .02em; color: var(--dunkel); }
body.gast h1 { font-size: 2.3rem; line-height: 1.1; }
body.gast h2 { font-size: 1.45rem; text-transform: uppercase; letter-spacing: .06em; }
body.gast h2:has(.schritt-nr) { display: flex; align-items: center; gap: .6rem; }
body.gast .schritt-nr { flex: none; margin: 0; }
body.gast .hero h1 { font-size: 2.4rem; }
body.gast .hero > .gedaempft:first-child { text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
body.gast label, body.gast .label, body.gast legend { font-weight: 500; letter-spacing: .02em; }
body.gast .auswahl-titel, body.gast .gang legend { font-family: var(--titel); font-size: 1.2rem; font-weight: 600;
  color: var(--dunkel); letter-spacing: .03em; }
body.gast .eckdaten dt { font-size: .8rem; letter-spacing: .08em; }
body.gast .eckdaten dd { font-family: var(--titel); font-size: 1.25rem; color: var(--dunkel); }
body.gast .paket-hinweis, body.gast .rubrik { font-size: .82rem; }
body.gast a { color: var(--gold-dunkel); }
body.gast .pflicht-hinweis { font-size: .85rem; color: var(--gedaempft); margin: 0 0 .75rem; }

/* Feldgruppen (fieldset/legend statt nur optischer Beschriftung) */
body.gast fieldset.feldgruppe, fieldset.feldgruppe { border: 0; padding: 0; margin: 0 0 .75rem; min-width: 0; }
fieldset.feldgruppe > legend { padding: 0; margin-bottom: .45rem; }

/* ---------- Flächen & Bedienelemente */
body.gast .hero, body.gast .karte {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}
body.gast .hero { padding: 1.5rem 1.5rem 1rem; }
/* Sprachwahl Anfrageformular (Deutsch / English) */
body.gast .sprachwahl { float: right; margin: 0 0 .5rem 1rem; }
body.gast .sprachwahl a { display: inline-block; padding: .35rem .2rem; min-height: 44px; line-height: 2.2; }
body.gast input:not([type=radio]):not([type=checkbox]), body.gast select, body.gast textarea,
body.gast .sigpad, body.gast .paket, body.gast .bereich { border-color: var(--rand); }

/* Knöpfe wie auf strozzis.ch: Pille, gesperrte Grossbuchstaben */
body.gast .knopf, body.gast button.knopf {
  border-radius: 999px; padding-inline: 1.5rem; min-height: 46px; font-weight: 600; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; background: var(--gold); border-color: var(--gold); color: #fff;
}
body.gast .knopf.klein { min-height: 44px; font-size: .78rem; }
body.gast .knopf:hover { background: var(--gold-dunkel); border-color: var(--gold-dunkel); }
body.gast .knopf.zweit { background: #fff; color: var(--gold-dunkel); border-color: var(--gold); }
body.gast .knopf.zweit:hover { background: var(--gold-hell); }
body.gast button.link { min-height: 44px; padding-block: .6rem; }

/* Auswahlkarten: Restaurant, Bereiche, Pakete */
body.gast .betriebswahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.gast .pakete { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
body.gast .paket-kopf { flex-wrap: wrap; }
body.gast .bereich { border-radius: var(--radius); border-width: 1.5px; padding: .75rem .9rem; }
body.gast .paket:has(input:checked), body.gast .bereich:has(input:checked) {
  box-shadow: 0 0 0 1px var(--gold), inset 4px 0 0 var(--akzent);
}
/* Ausser Saison, aber bereits gewählt: nicht ausbleichen (Kontrast), sondern ruhige Fläche + Hinweis */
body.gast .paket.ausser-saison, body.gast .gericht.ausser-saison { opacity: 1; background: var(--flaeche-2); }

/* Nummern und Akzent je Thema (Altrosa, Mint, Holz, Beige) */
body.gast .schritt-nr { background: var(--akzent); color: var(--dunkel); font-family: var(--text); font-weight: 600; }

/* ---------- Fokus (sichtbar bei Tastaturbedienung) */
body.gast input:is([type=radio], [type=checkbox]):focus { outline: none; }
body.gast input:not([type=radio]):not([type=checkbox]):focus-visible, body.gast select:focus-visible,
body.gast textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
body.gast :is(a, button, summary):focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
body.gast .knopf:focus-visible { outline: 3px solid var(--dunkel); outline-offset: 3px; }
body.gast .gast-kontakt:focus-visible { outline-color: #fff; }
body.gast :is(.paket, .bereich, .check, .anzahl-zeile):has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
body.gast .sigpad:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Hinweise & Status ohne alten Gold/Gelb-Look */
body.gast .status-info { border-radius: 10px; }
body.gast .status-info.blau, body.gast .status-info.gelb { background: var(--gold-hell); border-color: var(--gold); }
body.gast .hinweis.info { background: var(--gold-hell); border-color: var(--linie); color: var(--dunkel); }
body.gast .zaehler, body.gast .pruefliste .offen { background: var(--gold-hell); color: var(--gold-dunkel); }
body.gast .zaehler.ok, body.gast .badge.gruen, body.gast .vegi, body.gast .pruefliste .ok { color: #1d5234; }
body.gast .badge.gelb { color: #6d4c00; }
body.gast .kunde-leiste { background: rgba(255,255,255,.96); box-shadow: 0 -6px 20px rgba(0,0,0,.06); }
body.gast .warn-text { color: #7a5500; }

/* ---------- Fusszeile */
.gast-fuss { text-align: center; padding: 2rem 1rem 2.5rem; color: var(--gedaempft); font-size: .85rem; letter-spacing: .04em;
  line-height: 1.7; }
.gast-fuss img { width: 18px; height: auto; display: block; margin: 0 auto .6rem; opacity: .6; }
.gast-fuss a { color: inherit; }

@media (max-width: 560px) {
  body.gast h1, body.gast .hero h1 { font-size: 1.85rem; }
  body.gast h2 { font-size: 1.15rem; letter-spacing: .05em; }
  body.gast main.inhalt, body.gast main.schmal { margin-top: -2rem; }
  .gast-hero { min-height: 250px; padding: 3.2rem 1rem 3.5rem; }
  .gast-zeile { font-size: .78rem; letter-spacing: .1em; }
  body.gast .gast-kontakt { top: .5rem; right: .6rem; font-size: .78rem; }
  body.gast .eckdaten { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
}
@media (max-width: 480px) {
  body.gast .betriebswahl { grid-template-columns: 1fr; }
}

/* Online-Zahlung (Stripe) in der Rechnungsliste */
.online-zahlung { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin-top: .4rem; width: 100%; }

/* Handy: wichtige Knöpfe volle Breite und einzeilig */
@media (max-width: 560px) {
  body.gast .aktionen .knopf, body.gast .online-zahlung .knopf { width: 100%; letter-spacing: .06em; }
}
/* Status in der festen Leiste (was fehlt noch?) */
body.gast .leiste-status { font-size: .85rem; color: var(--gedaempft); flex-basis: 100%; order: -1; }
body.gast .leiste-status.ok { color: #1d5234; font-weight: 600; }
/* Eingebettet auf strozzis.ch: ohne Kopfbild, Formular sofort sichtbar */
body.eingebettet .gast-hero { display: none; }
body.eingebettet main.inhalt, body.eingebettet main.schmal { margin-top: 0; }

.bereich-exklusiv-wahl { border-width: 2px; }
.bereich-exklusiv-wahl strong { font-size: 1.02rem; }