/* ============================================================
   Besichtigungstage April 2027 — Anmeldeseite + Hinweis auf der Startseite
   Baut auf styles.css auf (Farben, Schriften, .btn, .wrap, .section).
   ============================================================ */

/* styles.css kennt keine [hidden]-Regel; ohne sie schlagen die display-Werte
   unten das hidden-Attribut. */
.bes-body [hidden], .bes-modal [hidden] { display:none !important; }

.bes-skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--paper); padding:10px 16px; border-radius:8px; }
.bes-skip:focus { left:16px; top:16px; }

/* ---------- Hero ---------- */
.bes-hero { position:relative; color:#fff; overflow:hidden; }
.bes-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bes-hero::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(26,35,22,.84), rgba(26,35,22,.5) 70%, rgba(26,35,22,.3)); }
.bes-hero-in { position:relative; z-index:1; display:grid; gap:14px; padding-top:56px; padding-bottom:60px; }
.bes-hero-in > * { max-width:640px; }
.bes-hero-script { font-family:'Sacramento', cursive; font-size:clamp(48px, 5vw + 20px, 64px); line-height:.8; color:#F0CDB9; }
.bes-hero h1 { color:#fff; font-size:clamp(34px, 3.4vw + 14px, 56px); line-height:1.05; text-wrap:balance; }
.bes-hero p { color:rgba(255,255,255,.92); font-weight:300; font-size:clamp(16px, .6vw + 13px, 18px); line-height:1.65; max-width:56ch; }
.bes-hero-facts { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.bes-hero-facts li { border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:5px 13px; font-size:13.5px; letter-spacing:.03em; }
@media (min-width:900px) { .bes-hero-in { padding-top:80px; padding-bottom:84px; } }

/* ---------- Inhalt ---------- */
.bes-body { display:grid; gap:36px; max-width:1040px; }
.bes-h3 { font-size:clamp(26px, 2vw + 14px, 38px); }
.bes-h4 { font-family:'Jost', sans-serif; font-size:16px; font-weight:500; color:var(--green); letter-spacing:0; }
.bes-what { display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.bes-what > div { display:grid; gap:6px; align-content:start; }
.bes-what p { margin:0; color:var(--muted); font-size:15.5px; line-height:1.6; }
.bes-lbl { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

.bes-cal-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; }
.bes-cal-head:focus { outline:none; }
.bes-cal-head .eyebrow { display:block; margin-bottom:4px; }
.bes-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.bes-legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.lg-free { background:var(--paper); border:1px solid var(--sage); }
.lg-full { background:#E4DED0; border:1px solid #A89E84; }

.bes-notice { border:1px solid var(--accent); background:#F3E2D8; color:var(--accent-deep); border-radius:12px; padding:14px 18px; font-size:15px; }
.bes-loading { color:var(--muted); }

.bes-days { display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:780px) { .bes-days { grid-template-columns:1fr 1fr; } }
.bes-day { border:1px solid var(--line); border-radius:14px; background:var(--cream); padding:18px; }
.bes-day-h { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.bes-day-d { font-family:'Cormorant Garamond', serif; font-size:46px; line-height:.9; color:var(--accent); font-weight:400; }
.bes-day-w { font-weight:500; color:var(--green); letter-spacing:.03em; display:block; }
.bes-day-m { font-size:13px; color:var(--muted); }
.bes-day-left { margin-left:auto; font-size:13px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; line-height:1.4; }
.bes-slots { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; }
.bes-slot { appearance:none; border:1px solid var(--sage); background:var(--paper); border-radius:10px; padding:9px 6px 8px;
  cursor:pointer; display:grid; gap:2px; text-align:center; font-family:'Jost', sans-serif; color:var(--green);
  transition:border-color .12s, background .12s, transform .12s; min-height:52px; }
.bes-slot .t { font-size:16px; font-weight:500; font-variant-numeric:tabular-nums; }
.bes-slot .c { font-size:12px; color:var(--muted); }
.bes-slot:hover { border-color:var(--accent); transform:translateY(-1px); }
.bes-slot:disabled { background:#E4DED0; border-color:#D2CAB6; color:#7D7563; cursor:not-allowed; transform:none; }
.bes-slot:disabled .t { text-decoration:line-through; text-decoration-thickness:1px; }
.bes-slot:disabled .c { color:#7D7563; }
.bes-slot.is-mine { background:#E6E9DD; border-color:var(--sage); color:var(--green); cursor:default; }
.bes-slot.is-mine .t { text-decoration:none; }
.bes-slot[aria-pressed="true"] { background:var(--green); border-color:var(--green); color:#fff; }
.bes-slot[aria-pressed="true"] .c { color:rgba(255,255,255,.85); }

.bes-booking { border:1px solid var(--line); border-radius:14px; background:var(--paper); padding:22px; display:grid; gap:18px; }
.bes-sel { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.bes-sel-val { font-family:'Cormorant Garamond', serif; font-size:26px; color:var(--green); }
.bes-sel-val.none { font-size:19px; color:var(--muted); font-style:italic; }

.bes-form { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:680px) { .bes-form { grid-template-columns:1fr 1fr; } .bes-form .wide, .bes-form .bes-chips { grid-column:1 / -1; } }
.bes-field { display:grid; gap:6px; border:0; margin:0; padding:0; min-width:0; }
.bes-field label, .bes-field legend { font-size:13.5px; font-weight:500; color:var(--green); letter-spacing:.02em; padding:0; margin-bottom:6px; }
.bes-field .opt { font-weight:400; color:var(--muted); }
.bes-field input, .bes-field textarea { font:16px 'Jost', sans-serif; color:var(--ink); background:var(--cream); border:1px solid var(--line);
  border-radius:8px; padding:11px 12px; width:100%; }
.bes-field input:focus, .bes-field textarea:focus { outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
.bes-field input[aria-invalid="true"] { border-color:var(--error); }
.bes-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.bes-chip { position:relative; }
.bes-chip input { position:absolute; opacity:0; width:1px; height:1px; }
.bes-chip span { display:inline-flex; align-items:center; min-height:40px; padding:8px 16px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--ink); font-size:14.5px; cursor:pointer; transition:border-color .12s, background .12s; }
.bes-chip span:hover { border-color:var(--accent); }
.bes-chip input:checked + span { background:var(--green); border-color:var(--green); color:#fff; }
.bes-chip input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.bes-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.bes-check { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted); line-height:1.5; }
.bes-check input { width:18px; height:18px; margin-top:2px; accent-color:var(--accent); flex:none; }
.bes-check a { color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px; }
.bes-form-foot { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.bes-hint { margin:0; font-size:13.5px; color:var(--muted); flex:1 1 260px; }
.bes-hint.err { color:var(--error); }
.bes-form .btn[aria-disabled="true"] { background:#A89E84; cursor:not-allowed; opacity:.85; }

.bes-done { display:grid; gap:10px; text-align:center; padding:18px 8px; }
.bes-done:focus { outline:none; }
.bes-done-script { font-family:'Sacramento', cursive; color:var(--accent); font-size:52px; line-height:.9; }
.bes-done p { color:var(--muted); max-width:54ch; margin:0 auto; }

.bes-mine { border:1px solid var(--sage); background:#EEF0E7; border-radius:14px; padding:18px 20px; display:grid; gap:12px; }
@media (min-width:720px) { .bes-mine { grid-template-columns:1fr auto; align-items:center; } .bes-confirm { grid-column:1 / -1; } }
.bes-mine-termin { margin:4px 0 0; font-family:'Cormorant Garamond', serif; font-size:26px; color:var(--green); }
.bes-mine-text { margin:2px 0 0; font-size:14.5px; color:var(--muted); }
.bes-confirm { border-top:1px solid var(--line); padding-top:12px; display:grid; gap:10px; }
.bes-confirm p { margin:0; }
.bes-confirm-actions, .bes-mine-actions { display:flex; flex-wrap:wrap; gap:10px; }

@media (prefers-reduced-motion:reduce) { .bes-slot, .bes-chip span { transition:none; } .bes-slot:hover { transform:none; } }

/* ---------- Startseite: Band + Fenster ---------- */
.bes-band { background:var(--green); color:#fff; font-size:14px; text-align:center; padding:10px 16px; line-height:1.45; }
.bes-band a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.bes-modal { position:fixed; inset:0; z-index:200; background:rgba(26,35,22,.6); display:flex; align-items:center; justify-content:center;
  padding:16px; padding-top:max(16px, env(safe-area-inset-top)); padding-bottom:max(16px, env(safe-area-inset-bottom)); }
.bes-modal-box { position:relative; width:min(460px, 100%); max-height:100%; overflow:auto; background:var(--paper); border-radius:16px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5); text-align:center; }
.bes-modal-box:focus { outline:none; }
.bes-modal-img { height:150px; width:100%; object-fit:cover; display:block; }
.bes-modal-body { padding:22px 24px 24px; display:grid; gap:12px; }
.bes-modal-script { font-family:'Sacramento', cursive; color:var(--accent); font-size:44px; line-height:.9; }
.bes-modal h2 { font-size:30px; line-height:1.1; }
.bes-modal-when { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.bes-modal-chip { display:inline-flex; align-items:baseline; gap:6px; border:1px solid var(--line); border-radius:999px; padding:6px 14px;
  font-size:14px; color:var(--green); background:var(--cream); }
.bes-modal-chip b { font-family:'Cormorant Garamond', serif; font-size:19px; font-weight:500; }
.bes-modal p { margin:0; color:var(--muted); font-size:15px; }
.bes-modal-actions { display:grid; gap:6px; margin-top:4px; }
.bes-modal-later { background:none; border:0; color:var(--muted); font:14px 'Jost', sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:10px; }
.bes-modal-close { position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,254,249,.92);
  color:var(--green); font-size:22px; line-height:1; cursor:pointer; }
body.bes-modal-open { overflow:hidden; }

/* Menüpunkt nur im Handy-Menü: am Desktop ist die Leiste schon voll (das Logo
   würde verdrängt), dort übernimmt das grüne Band den Hinweis. */
@media (min-width:900px) { .nav a.bes-nav { display:none; } }