/* ==========================================================================
   Booking (stage 2, B4a) – booking page, homepage check, range picker.
   Source: accepted draft docs/design/entwuerfe/b1-*.html (B1, 15.10.);
   form rules as the contact form (page-kontakt.css, kf-*). Tokens only.
   ========================================================================== */

/* --- Form basics (as the contact form) ---------------------------------- */
.kf { display: grid; gap: var(--space-4); }
.kf-hinweis, .kf-datenschutz { margin: 0; font-size: var(--fs-small); color: var(--color-muted); }
.kf-datenschutz a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.kf-feld { margin: 0; padding: 0; border: 0; min-width: 0; }
.kf-feld > label:not(.kf-option), .kf-feld legend, .kf-zeitraum-felder label, .gaeste-zeile label {
  display: block; margin-bottom: var(--space-1); padding: 0; font-weight: 600;
}
.kf input[type="text"], .kf input[type="email"], .kf input[type="tel"], .kf input[type="date"], .kf textarea, .kf select, .check-panel select {
  display: block; width: 100%; min-height: 48px; padding: 0 var(--space-2);
  border: 1px solid var(--color-ink); border-radius: 0; background: var(--color-bg); color: var(--color-ink);
  font: 400 var(--fs-body)/1.4 var(--font-body);
}
.kf textarea { padding-block: 12px; resize: vertical; min-height: 8rem; }
.kf-optional { font-weight: 400; color: var(--color-muted); }
.kf-pflicht { color: var(--color-error); }
.kf [aria-invalid="true"] { border: 2px solid var(--color-error); }
.kf-option { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; }
.kf-option input { width: 24px; height: 24px; margin: 0; accent-color: var(--color-ink); flex: none; } /* 24 px: WCAG 2.2 target size (backlog 2026-10-25) */
.kf-zeitraum-felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.kf-zeitraum-felder label { font-weight: 400; font-size: var(--fs-small); }
.kf-fehler { margin: 0 0 var(--space-1); font-size: var(--fs-small); font-weight: 600; color: var(--color-error); }
.kf-fehler:empty { display: none; }
.kf-zeitraum .kf-fehler { margin: var(--space-1) 0 0; }
.kf-zusammenfassung { margin-block: var(--space-4); padding: var(--space-3); border-left: 4px solid var(--color-error); background: var(--color-bg); }
.kf-zusammenfassung h2, .kf-erfolg h2 { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.kf-zusammenfassung ul { margin: 0; padding-left: 1.2em; }
.kf-zusammenfassung a { color: var(--color-error); text-decoration: underline; text-underline-offset: 3px; }
.kf-erfolg { padding: var(--space-4); border-left: 4px solid var(--color-ink); background: var(--color-surface); }
.kf-zusammenfassung:focus, .kf-erfolg:focus { outline: none; }
.kf .btn-pill { justify-self: start; }
.kf .btn-pill[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.kf-honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kf-layout { row-gap: var(--space-6); align-items: start; }
.kf-intro { grid-column: 1 / span 5; }
.kf-intro h2 { font-size: var(--fs-h2); }
.kf-body { grid-column: 7 / span 6; }
.text-link-button {
  min-height: 44px; padding: 0 var(--space-1); border: 0; background: none; color: var(--color-ink);
  font: 600 var(--fs-body)/1 var(--font-body); text-decoration: underline; text-underline-offset: 6px; cursor: pointer;
}
.text-link-button:hover { text-decoration-thickness: 3px; }

/* --- Booking page layout (P2: two months stacked, sidebar beside) -------- */
.buchung-kopf { padding-block: var(--space-6) var(--space-4); }
.buchung-kopf h1 { font-size: var(--fs-h2); }
.buchung-kopf .prose { margin-top: var(--space-2); max-width: 60ch; }
.booking { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-10); }
.booking .side { display: grid; gap: var(--space-4); align-content: start; }
@media (min-width: 900px) {
  .booking { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); align-items: start; }
  .booking .side { position: sticky; top: calc(var(--header-h) + var(--space-2)); }
  .booking .cal { max-width: 520px; }
}
.gaeste { display: grid; gap: var(--space-2); }
.gaeste-zeile { display: grid; grid-template-columns: 1fr 7rem; align-items: center; gap: var(--space-2); }
.gaeste-zeile label { margin: 0; }
.gaeste-zeile small { display: block; font-weight: 400; color: var(--color-muted); font-size: var(--fs-small); }


.preis { background: var(--color-surface); padding: var(--space-3); }
.preis h2, .preis h3 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.preis-liste { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--space-2); margin: 0; }
.preis-liste dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.preis-liste .zwischensumme { border-top: var(--line); padding-top: var(--space-1); font-weight: 600; }
.preis-liste .total { border-top: 1px solid var(--color-ink); padding-top: var(--space-1); font-weight: 700; font-size: 1.125rem; }
.preis-inkl, .preis-leer { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--color-muted); }
.preis-leer { margin: 0; }
.hinweis-vorlaeufig { margin-top: var(--space-2); padding: var(--space-2); border-left: 4px dashed var(--color-ink); background: var(--color-bg); font-size: var(--fs-small); }
.buchung-angaben .art-text { margin: 0 0 var(--space-2) calc(24px + var(--space-2)); }
.buchung-angaben .kf-body { display: grid; gap: var(--space-4); } /* space between fields, hint and button (operator, 15.10.) */
.zf-liste { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-4); }
.zf-liste dt { font-weight: 600; }
.zf-liste dd { margin: 0; overflow-wrap: anywhere; }
.art-kennung { margin-top: var(--space-2); font-weight: 600; }
.zf-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
/* Short booking overview at the binding button (§ 312j Abs. 2 BGB, operator 20.10.) */
.zf-letzte { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-hairline); background: var(--color-surface); }
.zf-letzte h3 { margin: 0; font-size: var(--fs-body); }
.zf-letzte-liste { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; }
.zf-letzte-liste dt { color: var(--color-muted); }
.zf-letzte-liste dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.zf-letzte-preis { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--color-hairline); font-weight: 600; }
.zf-letzte-preis strong { font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.zf-letzte-hinweis { margin: 0; font-size: var(--fs-small); color: var(--color-muted); }
.zf-letzte .btn-pill { justify-self: stretch; }
.buchung-zusammenfassung .preis { margin-bottom: var(--space-4); }
.buchung-danke .zf-liste { margin-block: var(--space-3); }
@media (max-width: 960px) {
  .kf-intro, .kf-body { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .zf-liste { grid-template-columns: 1fr; }
  .zf-liste dd { margin-bottom: var(--space-1); }
}

/* --- Calendar (b1-kalender.js → buchung.js) ------------------------------ */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.cal-head .icon-btn { width: 44px; height: 44px; border: 1px solid var(--color-ink); border-radius: var(--radius-circle); background: var(--color-bg); color: var(--color-ink); cursor: pointer; display: grid; place-items: center; }
.cal-head .icon-btn:disabled { border-color: var(--color-hairline); color: var(--color-hairline); cursor: not-allowed; }
.cal-head .icon-btn svg { width: 18px; height: 18px; }
.cal-hint { font-size: var(--fs-small); color: var(--color-muted); text-align: center; }
.months { display: grid; gap: var(--space-4) var(--space-6); }
.month h2, .month h3 { font-size: 1.5rem; margin-bottom: var(--space-1); }
.month table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.month th { font: 600 var(--fs-small)/1 var(--font-body); color: var(--color-muted); padding: 6px 0; }
.month abbr { text-decoration: none; }
.month td { padding: 0; border: 1px solid var(--color-bg); }
.day { --am: transparent; --pm: transparent; position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 0.9; min-height: 44px; padding: 0; border: 0; background: var(--color-bg); color: var(--color-ink); font: 600 1rem/1 var(--font-body); cursor: pointer; isolation: isolate; box-shadow: inset 0 0 0 1px var(--color-hairline); }
.day::before, .day::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.day::before { background: var(--am); clip-path: polygon(0 0, 100% 0, 0 100%); }
.day::after { background: var(--pm); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.am-busy { --am: var(--color-surface); } .pm-busy { --pm: var(--color-surface); }
.am-prov { --am: repeating-linear-gradient(135deg, var(--color-hairline) 0 2px, var(--color-bg) 2px 7px); }
.pm-prov { --pm: repeating-linear-gradient(135deg, var(--color-hairline) 0 2px, var(--color-bg) 2px 7px); }
.day.full-busy { color: var(--color-muted); text-decoration: line-through; cursor: not-allowed; }
.day.is-out { color: var(--color-muted); box-shadow: none; cursor: not-allowed; } /* past days: readable (6:1), no frame, aria-disabled */
.day.in-range { --am: var(--color-hairline); --pm: var(--color-hairline); }
.day.is-start, .day.is-end { --am: var(--color-ink); --pm: var(--color-ink); background: var(--color-ink); color: #fff; text-decoration: none; }
.day:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; z-index: 1; }
.day:not(.is-out):not(.full-busy):hover { box-shadow: inset 0 0 0 2px var(--color-ink); }
.empty { display: block; aspect-ratio: 1 / 0.9; min-height: 44px; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); list-style: none; padding: 0; margin: var(--space-3) 0 0; font-size: var(--fs-small); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 22px; height: 22px; box-shadow: inset 0 0 0 1px var(--color-hairline); display: inline-block; }
.legend .l-free { background: var(--color-bg); }
.legend .l-prov { background: repeating-linear-gradient(135deg, var(--color-hairline) 0 2px, var(--color-bg) 2px 7px); }
.legend .l-busy { background: var(--color-surface); }
.legend .l-half { background: linear-gradient(135deg, var(--color-surface) 50%, var(--color-bg) 50%); }
.legend .l-sel { background: var(--color-ink); }
.cal-msg { margin-top: var(--space-2); }
.uebernahme { margin-bottom: var(--space-3); }

/* --- Homepage check in the title band ------------------------------------ */
.hero.mit-pruefung { display: flex; flex-direction: column; justify-content: space-between; height: auto; min-height: calc(100svh - var(--header-h)); }
.hero .check { position: relative; z-index: 1; margin-top: var(--space-8); padding-bottom: var(--space-4); }
.check-panel { background: var(--color-surface); padding: var(--space-3); }
.check-panel h2 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.check-grid { display: grid; grid-template-columns: 1fr 1fr 7.5rem 7.5rem 7.5rem; gap: var(--space-2); align-items: end; }
.check-grid small { display: block; font-weight: 400; color: var(--color-muted); }
.check-grid .field { display: flex; flex-direction: column; gap: 6px; }
.check-grid .label, .check-grid label { font-size: var(--fs-small); font-weight: 600; }
.check-result { margin-top: var(--space-2); }
.check-result:empty { display: none; }
.check-note { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--color-muted); }
.msg { border-left: 4px solid var(--color-ink); background: var(--color-bg); padding: var(--space-2) var(--space-3); }
.msg h3 { font-size: 1.25rem; margin-bottom: 4px; }
.msg.is-busy { border-left-color: var(--color-error); }
.msg.is-prov { border-left-style: dashed; }
.msg .actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-2); }
.date-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--color-ink); border-radius: 0; background: var(--color-bg); color: var(--color-ink); font: 400 var(--fs-body)/1 var(--font-body); text-align: left; cursor: pointer; }
.date-btn .leer { color: var(--color-muted); font-size: var(--fs-small); white-space: nowrap; }
.date-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.date-btn:hover { box-shadow: inset 0 0 0 1px var(--color-ink); }
@media (max-width: 1000px) { .check-grid { grid-template-columns: 1fr 1fr; } .check-grid .field:nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 420px) { .check-panel { padding: var(--space-2); } }

/* --- Range picker dialog (operator, 15.10.) ------------------------------ */
.picker { width: min(560px, calc(100vw - 32px)); max-height: min(92vh, 900px); padding: 0; border: 1px solid var(--color-ink); border-radius: 0; background: var(--color-bg); color: var(--color-ink); }
.picker[open] { display: flex; flex-direction: column; }
.picker::backdrop { background: rgb(47 46 46 / 0.6); }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--line); }
.picker-head h2 { font-size: 1.5rem; }
.picker-head .icon-btn { width: 44px; height: 44px; border: 0; border-radius: var(--radius-circle); background: none; color: var(--color-ink); cursor: pointer; display: grid; place-items: center; }
.picker-head .icon-btn:hover { background: var(--color-surface); }
.picker-head .icon-btn svg { width: 22px; height: 22px; }
.picker-body { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-3); overscroll-behavior: contain; }
.picker-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border-top: var(--line); background: var(--color-bg); }
.picker-foot .sum { flex: 1 1 100%; font-weight: 600; min-height: 1.5em; margin: 0; }
.picker-foot .btn-pill { margin-left: auto; }
.btn-pill[aria-disabled="true"] { background: var(--color-hairline); color: var(--color-ink); cursor: not-allowed; }
@media (max-width: 600px) {
  .picker { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; }
  .picker-head, .picker-body, .picker-foot { padding-inline: var(--space-2); }
}

/* --- Status link (B4b, SV-04-011) ------------------------------------------ */
.buchung-kopf .lead { margin-top: var(--space-2); font-weight: 600; }
.buchung-status { padding-block: var(--space-6) var(--space-10); }
.buchung-status .kf-body { display: grid; gap: var(--space-4); align-content: start; }
.buchung-status .kf-erfolg, .buchung-status .kf-zusammenfassung { margin: 0; }
.st-status { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-left: 4px solid var(--color-ink); background: var(--color-surface); font-weight: 600; }
.st-status.st-provisional, .st-status.st-open, .st-status.st-in_bestaetigung { border-left-style: dashed; }
.st-status.st-rejected, .st-status.st-withdrawn, .st-status.st-expired, .st-status.st-cancelled { border-left-color: var(--color-muted); }
.st-frage { padding: var(--space-3); border-left: 4px solid var(--color-error); background: var(--color-bg); }
.st-frage:focus { outline: none; }
.st-frage h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.st-frage .zf-knoepfe { margin-top: var(--space-3); }
.st-frage--neutral { border-left-color: var(--color-ink); }
.st-frage .zf-liste { margin: var(--space-2) 0; }
.st-warnung { margin-top: var(--space-3); color: var(--color-error); }
.st-storno-abschnitt { padding: var(--space-3); background: var(--color-surface); }
.st-storno-abschnitt h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.st-storno-abschnitt .zf-liste { margin-bottom: var(--space-2); }
.st-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.st-aktionen .kf-hinweis { flex-basis: 100%; }
.st-sprache { gap: var(--space-1); }
.st-sprache .text-link-button { justify-self: start; }
.st-unter { font-size: var(--fs-h2); margin-top: var(--space-6); }
.buchung-form > .container > .kf-hinweis { margin-top: var(--space-2); max-width: 60ch; }
.st-vergleich-rahmen { overflow-x: auto; margin-bottom: var(--space-4); }
.st-vergleich { width: 100%; border-collapse: collapse; }
.st-vergleich th, .st-vergleich td { padding: var(--space-1) var(--space-2); text-align: left; vertical-align: top; border-bottom: var(--line); overflow-wrap: anywhere; }
.st-vergleich thead th { font-weight: 600; }
.st-vergleich tbody th { font-weight: 600; white-space: nowrap; overflow-wrap: normal; padding-left: 0; }
.st-vergleich .is-geaendert td:last-child { background: var(--color-surface); font-weight: 600; }
.st-marke { display: inline-block; margin-left: var(--space-1); padding: 0 6px; border: 1px solid var(--color-ink); font-size: var(--fs-small); font-weight: 600; }
.st-link { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-ink); }
.st-link h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.st-link > p { margin: var(--space-3) 0 0; }           /* text – button – rest: clear gaps (operator, 16.10.) */
.st-link > h3 + p { margin-top: 0; }
.st-link > p.st-link-url { margin-top: var(--space-1); } /* the URL belongs to the button above it */
.st-link-url { font-size: var(--fs-small); color: var(--color-muted); overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .st-vergleich th, .st-vergleich td { padding-inline: 6px; font-size: var(--fs-small); }
  .st-vergleich tbody th { padding-left: 0; }
}

/* --- Guest area (stage 3, G3; SV-09-*) ---------------------------------------
   From the accepted draft docs/design/entwuerfe/g1-gaestebereich.html. */
.gb-kopf .gb-fakten { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); }
.gb-kopf .gb-fakten span { white-space: nowrap; }
.gb-banner { margin-top: var(--space-3); border-left: 4px solid var(--color-ink); background: var(--color-bg); padding: var(--space-2) var(--space-3); max-width: 68ch; }
.gb { padding-block: var(--space-4) 0; }
.gb-karten { display: grid; gap: var(--space-2); }
@media (min-width: 720px) { .gb-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gb-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gb-karte { border: 1px solid var(--color-hairline); padding: var(--space-3); display: grid; gap: var(--space-1); align-content: start; }
.gb-karte h2 { font-size: 1.5rem; }
.gb-karte.is-locked { background: var(--color-surface); border-style: dashed; }
.gb-code { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; letter-spacing: 0.15em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gb-klein { color: var(--color-muted); font-size: var(--fs-small); }
.gb-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-ink); font: 600 var(--fs-body)/1 var(--font-body); text-decoration: none; cursor: pointer; }
.btn-line:hover { background: var(--color-surface); }
.gb-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-2); margin: 0; }
.gb-kv dt { color: var(--color-muted); }
.gb-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.gb-notiz { margin-top: var(--space-4); background: var(--color-surface); border-left: 4px solid var(--color-ink); padding: var(--space-3); display: grid; gap: var(--space-1); }
.gb-notiz h2 { font-size: 1.5rem; }
.gb-persoenlich { margin-block: var(--space-3) var(--space-4); max-width: 68ch; }
.gb-sprung { position: sticky; top: var(--header-h); z-index: 20; background: var(--color-bg); border-block: var(--line); }
.gb-sprung ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.gb-sprung ul::-webkit-scrollbar { display: none; }
.gb-sprung a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-1); white-space: nowrap; color: var(--color-ink); text-decoration: none; font-weight: 600; }
.gb-sprung a span { border-bottom: 1px solid transparent; padding: 4px 0; }
.gb-sprung a:hover span { border-bottom-color: var(--color-ink); }
.gb-abschnitt, .gb-buchung { scroll-margin-top: calc(var(--header-h) + 56px); }
.gb-abschnitt { padding-block: var(--space-6); }
.gb-abschnitt + .gb-abschnitt { border-top: var(--line); }
.gb-abschnitt > h2 { font-size: var(--fs-h3-featured); margin-bottom: var(--space-3); }
.gb-abschnitt h3 { font-size: var(--fs-h3); margin-bottom: var(--space-1); }
.gb-spalten { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .gb-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gb-text { display: grid; gap: var(--space-2); max-width: 68ch; align-content: start; }
.gb-text ul { margin: 0; padding-left: 1.2em; }
.gb-anleitungen { margin-bottom: var(--space-3); }
.gb-anleitung { border-top: var(--line); }
.gb-anleitung:last-child { border-bottom: var(--line); }
.gb-anleitung summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 56px; cursor: pointer; font-weight: 700; list-style: none; }
.gb-anleitung summary::-webkit-details-marker { display: none; }
.gb-anleitung summary::after { content: "+"; font: 400 1.75rem/1 var(--font-body); }
.gb-anleitung[open] summary::after { content: "\2212"; }
.gb-anleitung .gb-text { padding-bottom: var(--space-3); }
.gb-ostseecard { margin-bottom: var(--space-3); }
.gb-tipps { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-3); }
@media (min-width: 720px) { .gb-tipps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gb-tipps li { border: 1px solid var(--color-hairline); padding: var(--space-2) var(--space-3); display: grid; gap: 4px; }
.gb-tipps a { font-weight: 700; color: var(--color-ink); }
.gb-telefone, .gb-dokumente { display: grid; gap: var(--space-1); list-style: none; padding: 0; margin: 0; }
.gb-telefone a, .gb-dokumente a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: 56px; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-hairline); color: var(--color-ink); text-decoration: none; }
.gb-telefone a:hover, .gb-dokumente a:hover { border-color: var(--color-ink); }
.gb-telefone b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.04em; white-space: nowrap; }
.gb-dokumente a { font-weight: 600; }
.gb-dokumente small { font-weight: 400; color: var(--color-muted); white-space: nowrap; }
.gb-dateien, .gb-anfahrt-links { margin-top: var(--space-2); } /* files of the guest area under a text (G3b-2), directions with photos */
/* Directions with photos (operator 25.10.): one step per photo, numbered */
.gb-weg { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.gb-schritt { display: grid; gap: var(--space-2); scroll-margin-top: var(--header-h); }
@media (min-width: 900px) { .gb-schritt { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); align-items: start; } }
.gb-schritt img { display: block; width: 100%; height: auto; border: 1px solid var(--color-hairline); }
.gb-schritt h2 { font-size: var(--fs-h3); display: flex; gap: var(--space-1); align-items: baseline; }
.gb-schritt-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2em; height: 2em; border-radius: 50%; background: var(--color-ink); color: var(--color-bg); font: 700 1rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.gb-weg-ende { margin-top: var(--space-6); max-width: 68ch; font-weight: 600; }
.gb-weg-knoepfe { margin-bottom: var(--space-6); }
.gb-buchung { border-top: var(--line); }

/* Feedback (stage 3 part B, G6d; draft g6-feedback.html) */
.fb { display: grid; gap: var(--space-4); max-width: 46rem; }
.fb-form { gap: var(--space-5); }
.fb-sterne { display: flex; gap: 4px; }
.fb-sterne input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-sterne label { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; cursor: pointer; font-size: 2.4rem; line-height: 1; color: var(--color-muted); } /* non-text contrast ≥ 3:1 (sv-pruefer Teil B/H3) */
/* stars up to the chosen one, without JavaScript */
.fb-sterne label::before { content: "☆"; content: "☆" / ""; } /* outline = not chosen, filled = chosen (also without JS) */
.fb-sterne input:checked + label, .fb-sterne label:has(~ input:checked) { color: var(--color-ink); }
.fb-sterne input:checked + label::before, .fb-sterne label:has(~ input:checked)::before { content: "★"; content: "★" / ""; }
.fb-sterne input:focus-visible + label { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.fb-sterne-text { min-height: 1.5em; }
.fb-zustimmung { border: 1px solid var(--color-ink); padding: var(--space-3); display: grid; gap: var(--space-2); }
.fb-zustimmung-feld { align-items: flex-start; font-weight: 600; }
.fb-zustimmung-feld input { margin-top: 1px; }
.fb-mit { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .fb-mit { grid-template-columns: 1fr 1fr; } .fb-vorschau { grid-column: 1 / -1; } }
.fb-mit[hidden] { display: none; }
.fb-auswahl { display: grid; gap: var(--space-3); align-content: start; }
.fb-auswahl select { max-width: 20rem; }
.fb-vorschau { border: 1px dashed var(--color-hairline); padding: var(--space-3); display: grid; gap: var(--space-2); }
.fb-vorschau[hidden] { display: none; }
.fb-bewertung { margin: 0; border-top: 1px solid var(--color-ink); padding-top: var(--space-2); display: grid; gap: var(--space-1); }
.fb-bewertung-sterne { font-size: 1.4rem; letter-spacing: 2px; }
.fb-bewertung blockquote { margin: 0; }
.fb-bewertung-text { margin: 0; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.35; white-space: pre-line; }
.fb-bewertung-wer { font-size: var(--fs-small); color: var(--color-muted); }
.fb-datenschutz { background: var(--color-surface); padding: var(--space-3); font-size: var(--fs-small); display: grid; gap: var(--space-1); }
.fb-datenschutz h2 { font-size: 1.15rem; margin: 0; }
.fb-datenschutz p { margin: 0; }
.fb-einmal { margin-top: var(--space-1); }
.fb-abmelden { margin-top: var(--space-3); }