/* Farben: hell (Standard) und dunkel */
:root {
  --bg:#ffffff; --surface:#ffffff; --soft:#f5f5f7; --ink:#1d1d1f; --muted:#6e6e73; --accent:#1d1d1f; --accent-ink:#ffffff; --accent-soft:#f0efec; --line:#e5e5ea; --shadow:0 4px 24px rgba(0,0,0,.06); color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#000000; --surface:#1c1c1e; --soft:#111113; --ink:#f5f5f7; --muted:#a1a1a6; --accent:#f5f5f7; --accent-ink:#111111; --accent-soft:#232325; --line:#2c2c2e; --shadow:0 4px 24px rgba(0,0,0,.5); color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#000000; --surface:#1c1c1e; --soft:#111113; --ink:#f5f5f7; --muted:#a1a1a6; --accent:#f5f5f7; --accent-ink:#111111; --accent-soft:#232325; --line:#2c2c2e; --shadow:0 4px 24px rgba(0,0,0,.5); color-scheme:dark;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:19px; line-height:1.7; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }
.container { max-width:1120px; margin:0 auto; padding:0 24px; }
h1, h2, h3 { line-height:1.2; margin:0 0 14px; }
h1, h2 { font-weight:700; letter-spacing:-.025em; }
h2 { font-size:clamp(30px,4.2vw,42px); }
h3 { font-size:21px; }
p { margin:0 0 16px; }
.lead { font-size:21px; color:var(--muted); max-width:62ch; }
.muted { color:var(--muted); }
.eyebrow { font-size:17px; font-weight:600; color:var(--accent); margin-bottom:10px; }
section { padding:120px 0; scroll-margin-top:80px; }
section.alt { background:var(--soft); }
.skip { position:absolute; left:-999px; top:8px; background:var(--accent); color:var(--accent-ink); padding:10px 16px; z-index:100; }
.skip:focus { left:8px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; min-height:52px; background:var(--accent); color:var(--accent-ink); padding:0 26px; border-radius:999px; font-weight:600; font-size:18px; text-decoration:none; border:0; cursor:pointer; font-family:inherit; transition:transform .15s, filter .15s; }
.btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn.ghost { background:transparent; color:inherit; border:2px solid currentColor; }
.btn.white { background:#fff; color:#1c2830; }

/* Header */
header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header .container { display:flex; align-items:center; gap:20px; height:76px; }
.logo { display:block; flex-shrink:0; color:var(--ink); }
.logo svg, .logo img { height:42px; width:auto; display:block; }
nav { display:flex; gap:24px; margin-left:auto; }
nav a { color:var(--ink); text-decoration:none; font-weight:500; font-size:17px; }
nav a:hover { color:var(--accent); }
.icon-btn { width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:20px; cursor:pointer; display:grid; place-items:center; }
header .btn { white-space:nowrap; flex-shrink:0; min-height:48px; padding:0 20px; font-size:17px; }
.menu-btn { display:none; }

/* Hero */
.hero { position:relative; min-height:min(86vh,760px); display:flex; align-items:flex-end; color:#fff; background:#1c2830 url(img/herborn.jpg) center/cover; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,16,24,.85) 0%, rgba(8,16,24,.35) 55%, rgba(8,16,24,.15) 100%); }
.hero .container { position:relative; padding-bottom:80px; padding-top:120px; }
.hero h1 { font-size:clamp(40px,6.5vw,72px); max-width:15ch; margin-bottom:18px; }
.hero p { font-size:clamp(19px,2.2vw,23px); max-width:44ch; opacity:.95; margin-bottom:30px; }
.hero .actions { display:flex; gap:14px; flex-wrap:wrap; }
.rating { display:inline-flex; gap:8px; align-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); padding:6px 14px; border-radius:999px; font-size:16px; margin-bottom:20px; }

/* Fakten-Leiste */
.facts { background:var(--surface); border-bottom:1px solid var(--line); }
.facts ul { list-style:none; margin:0 auto; padding:26px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.facts li { display:flex; gap:12px; align-items:center; font-size:17px; }
.facts b { display:block; font-size:18px; }
.facts .ico { font-size:28px; }

/* Zwei Spalten */
.split { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
.split.rev > :first-child { order:2; }
.photo { border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.photo img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.checks { list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.checks li { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 16px; font-weight:500; font-size:17px; }
.sign { font-size:20px; margin-top:20px; }

/* Zimmer */
.rooms-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:40px 0; }
.room { background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.room img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.room .body { padding:24px; display:flex; flex-direction:column; flex:1; }
.room .price { font-size:38px; font-weight:600; color:var(--accent); line-height:1; margin:8px 0 12px; }
.room .price small { font-size:16px; font-weight:400; color:var(--muted); }
.room p { color:var(--muted); font-size:17px; }
.room .btn { margin-top:auto; align-self:flex-start; }
details.prices { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:4px 24px; }
details.prices summary { cursor:pointer; font-weight:600; padding:16px 0; }
table { width:100%; border-collapse:collapse; font-size:17px; margin-bottom:16px; }
th, td { text-align:left; padding:12px 8px; border-bottom:1px solid var(--line); }
td:last-child, th:last-child { text-align:right; white-space:nowrap; }
.amenities { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; padding:0; list-style:none; }
.amenities li { background:var(--accent-soft); color:var(--ink); border-radius:999px; padding:6px 16px; font-size:16px; }

/* Frühstück */
.times { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0; }
.time { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.time b { display:block; font-size:24px; }

/* Galerie */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:12px; margin-top:36px; }
.gallery button { padding:0; border:0; border-radius:14px; overflow:hidden; cursor:zoom-in; background:var(--soft); }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.gallery button:hover img { transform:scale(1.04); }
.gallery .wide { grid-column:span 2; }
.gallery .tall { grid-row:span 2; }
dialog.lightbox { border:0; padding:0; background:transparent; max-width:94vw; max-height:92vh; }
dialog.lightbox::backdrop { background:rgba(0,0,0,.85); }
dialog.lightbox img { max-width:94vw; max-height:86vh; border-radius:10px; }
dialog.lightbox .close { position:fixed; top:16px; right:16px; background:#fff; color:#111; border:0; }

/* Anfrage-Formular */
.form-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:36px; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid .full { grid-column:1 / -1; }
label { display:block; font-weight:600; font-size:17px; margin-bottom:6px; }
input, select, textarea { width:100%; font:inherit; font-size:18px; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; min-height:52px; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.form-error { color:#c0392b; font-weight:600; min-height:1.5em; }
.form-note { font-size:15px; color:var(--muted); margin-top:12px; }

/* Kontakt */
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; }
.contact-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; }
.contact-card .label { font-size:14px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }
.contact-card a, .contact-card .big { display:block; font-size:22px; font-weight:600; color:var(--ink); text-decoration:none; margin-top:6px; word-break:break-word; }
.notruf { margin-top:28px; display:flex; flex-wrap:wrap; gap:10px 28px; font-size:16px; color:var(--muted); }
.notruf b { color:var(--ink); }

/* Footer */
footer { border-top:1px solid var(--line); padding:40px 0; font-size:16px; color:var(--muted); }
footer .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer nav { margin:0; gap:20px; flex-wrap:wrap; }
footer a { color:var(--muted); font-size:16px; }

/* Rechtstexte */
.legal { max-width:800px; padding:64px 24px 96px; }
.legal h1 { font-size:clamp(34px,5vw,46px); margin-bottom:28px; }
.legal h2 { font-family:inherit; font-size:22px; margin:36px 0 10px; }
.legal p, .legal li { color:var(--muted); }
.legal strong { color:var(--ink); }

/* Handy & Tablet */
@media (max-width: 960px) {
  .rooms-grid { grid-template-columns:1fr 1fr; }
  .facts ul { grid-template-columns:1fr 1fr; }
  .gallery { grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width: 1180px) {
  #theme { margin-left:auto; }
  .menu-btn { display:grid; }
  nav.main { display:none; position:absolute; top:76px; left:0; right:0; flex-direction:column; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:8px 24px 16px; box-shadow:var(--shadow); }
  nav.main.open { display:flex; }
  nav.main a { padding:14px 0; font-size:20px; border-bottom:1px solid var(--line); }
}
@media (max-width: 820px) {
  body { font-size:18px; }
  section { padding:64px 0; }
  .split { grid-template-columns:1fr; gap:32px; }
  .split.rev > :first-child { order:0; }
  .menu-btn { display:grid; }
  nav.main { display:none; position:absolute; top:76px; left:0; right:0; flex-direction:column; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:8px 24px 16px; }
  nav.main.open { display:flex; }
  nav.main a { padding:14px 0; font-size:20px; border-bottom:1px solid var(--line); }
  header .call span { display:none; }
  header .container { gap:10px; }
}
@media (max-width: 600px) {
  .container { padding:0 16px; }
  .rooms-grid, .form-grid, .times, .checks { grid-template-columns:1fr; }
  .facts ul { grid-template-columns:1fr; gap:12px; }
  .form-card { padding:22px; }
  .gallery .wide { grid-column:span 2; }
  .logo svg { height:36px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

/* Buchungs-Raster */
.form-grid.four { grid-template-columns:repeat(4,1fr); }
.grid-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; margin-top:12px; }
.room-grid { margin:0; font-size:15px; min-width:720px; }
.room-grid th, .room-grid td { text-align:center; padding:10px 6px; border:1px solid var(--line); }
.room-grid thead th { color:var(--accent); font-weight:600; line-height:1.2; background:var(--soft); }
.room-grid th[scope=row] { text-align:left; position:sticky; left:0; background:var(--surface); min-width:170px; font-size:15px; }
.room-grid th[scope=row] small { display:block; color:var(--muted); font-weight:400; }
.room-grid tbody tr { cursor:pointer; }
.room-grid tbody tr:hover td { background:var(--accent-soft); }
.room-grid td.stay { background:var(--accent-soft); }
.room-grid tr.sel td.stay { background:var(--accent); color:var(--accent-ink); font-weight:700; }
.room-grid tr.sel th { box-shadow:inset 4px 0 0 var(--accent); }
.total { margin-top:20px; text-align:right; font-size:clamp(22px,3vw,30px); font-weight:600; color:var(--accent); }
@media (max-width:960px) { .form-grid.four { grid-template-columns:1fr 1fr; } }

/* ruhiger, Apple-ähnlicher Feinschliff */
h2 { font-size:clamp(34px,5vw,52px); }
.hero h1 { font-weight:700; letter-spacing:-.03em; }
.checks li, .time, .contact-card, .room, .form-card, details.prices { border-color:transparent; background:var(--soft); box-shadow:none; }
section.alt .checks li, section.alt .time, section.alt .contact-card, section.alt .room, section.alt .form-card, section.alt details.prices { background:var(--surface); }
.room { box-shadow:var(--shadow); }
.facts { border-bottom:0; background:var(--soft); }
.facts li { display:block; }
.facts li span { color:var(--muted); }
.facts b { color:var(--ink); }
.price { letter-spacing:-.02em; }
.amenities li { background:var(--surface); border:1px solid var(--line); }
.total { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.total .sum-line { font-size:16px; font-weight:500; color:var(--muted); letter-spacing:0; }
.total .sum-total { font-size:clamp(30px,4vw,40px); font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.room-grid thead th:first-child { text-align:left; padding-left:14px; }
.room-grid th[scope=row] { padding-left:14px; }
.room-grid td { color:var(--muted); }
.room-grid td.stay { color:var(--ink); }
select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:40px; }
/* Formular: ruhiger, moderner */
input, select, textarea { background-color:var(--soft); border:1px solid transparent; border-radius:14px; }
section.alt .form-card input, section.alt .form-card select, section.alt .form-card textarea { background-color:var(--soft); }
.form-card { padding:clamp(22px,4vw,44px); border-radius:28px; }
.grid-wrap { border:0; border-radius:18px; background:var(--soft); }
.room-grid th, .room-grid td { border:0; border-bottom:1px solid var(--line); }
.room-grid thead th { background:transparent; color:var(--muted); font-size:13px; font-weight:600; }
.room-grid th[scope=row] { background:var(--soft); }
.room-grid tbody tr:hover td, .room-grid tbody tr:hover th { background:var(--accent-soft); }
.room-grid tr.sel th { box-shadow:inset 4px 0 0 var(--accent); background:var(--accent-soft); }
.room-grid tr.sel td { background:var(--accent-soft); }
.room-grid tr.sel td.stay { background:var(--accent); color:var(--accent-ink); border-radius:10px; }

/* Hero: ruhiger Text links, Schnellbuchung darunter */
.hero { min-height:min(88vh,820px); background-position:center 35%; }
.hero::before { background:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.1) 100%), linear-gradient(to top, rgba(0,0,0,.55), transparent 50%); }
.hero .container { padding-top:140px; padding-bottom:56px; width:100%; }
.hero-text { max-width:640px; }
.hero-kicker { font-size:18px; font-weight:600; opacity:.85; margin-bottom:10px; }
.hero h1 { font-size:clamp(42px,6.2vw,80px); line-height:1.04; max-width:none; margin-bottom:20px; }
.hero-text p:last-child { font-size:clamp(19px,2vw,22px); opacity:.9; max-width:36ch; margin-bottom:40px; }
.quick { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:12px; align-items:end; max-width:860px; padding:16px; border-radius:24px; background:rgba(255,255,255,.14); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); border:1px solid rgba(255,255,255,.22); }
.quick label { color:#fff; font-size:14px; font-weight:600; opacity:.9; margin:0 0 6px 4px; }
.quick input, .quick select { background-color:rgba(255,255,255,.95); color:#1d1d1f; border:0; color-scheme:light; }
.quick .btn { min-height:52px; }
@media (max-width:820px) {
  .quick { grid-template-columns:1fr 1fr; }
  .quick .btn { grid-column:1 / -1; justify-content:center; }
  .hero .container { padding-top:100px; }
}

/* Listen als ruhige Häkchen-Liste statt Kästen */
.checks li, section.alt .checks li { background:none; border:0; border-radius:0; padding:10px 0 10px 32px; position:relative; border-bottom:1px solid var(--line); font-weight:500; }
.checks li::before { content:""; position:absolute; left:2px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.checks { gap:0 28px; }
.split { align-items:start; }
.split .photo { position:sticky; top:100px; }
.split .photo img { aspect-ratio:4/5; }
#firmen .split, #fruehstueck .split { align-items:center; }
#firmen .split .photo, #fruehstueck .split .photo { position:static; }
#fruehstueck .photo img { aspect-ratio:4/3; }
.facts li { padding-left:18px; border-left:2px solid var(--line); }
.facts li:first-child { border-left-color:var(--accent); }
@media (max-width:820px) { .split .photo { position:static; } .split .photo img { aspect-ratio:4/3; } }
.quick > div, .form-grid > div { min-width:0; }
.quick input, .form-grid input { min-width:0; max-width:100%; }
@media (max-width:420px) { .quick { padding:12px; gap:10px; } .quick input { font-size:16px; padding:12px 10px; } }
.rules { margin:36px 0 0; border-top:1px solid var(--line); }
.rules > div { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); }
.rules dt { font-weight:600; }
.rules dd { margin:0; color:var(--muted); }
@media (max-width:600px) { .rules > div { grid-template-columns:1fr; gap:4px; } }

/* Feinschliff: ruhige, hochwertige Typografie */
body { font-size:18px; line-height:1.65; }
h1, h2 { font-weight:600; letter-spacing:-.035em; }
h3 { font-weight:600; letter-spacing:-.01em; }
.eyebrow { color:var(--muted); font-size:15px; font-weight:500; letter-spacing:.02em; margin-bottom:14px; }
.lead { font-size:20px; line-height:1.55; color:var(--ink); }
a { color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; }
.btn { font-weight:500; font-size:17px; letter-spacing:-.01em; }
.btn svg { flex-shrink:0; }
.hero .btn, .quick .btn { background:#fff; color:#1d1d1f; }
.hero-kicker { letter-spacing:.02em; font-weight:500; }
.icon-btn svg { display:block; }
header .call { gap:10px; }
nav a { font-size:16px; font-weight:400; }
.facts ul { padding:30px 24px; }
.facts li { display:flex; gap:14px; align-items:flex-start; border-left:0; padding-left:0; font-size:15px; }
.facts li:first-child { border-left:0; }
.facts li svg { width:24px; height:24px; margin-top:2px; color:var(--ink); opacity:.8; }
.facts li span { display:block; }
.facts b { font-size:16px; font-weight:600; }
.room .price { font-size:34px; font-weight:600; color:var(--ink); }
.room h3 { font-size:19px; }
.contact-card .small { font-size:16px; font-weight:400; color:var(--muted); margin-top:6px; }
.total .sum-total { font-weight:600; }
.time b { font-weight:600; letter-spacing:-.02em; }
#herborn .photo img { aspect-ratio:3/4; }
footer { font-size:15px; }
.checks li::before { background:none; border-radius:0; width:6px; height:11px; margin-top:-8px; left:6px; border:solid var(--ink); border-width:0 1.8px 1.8px 0; transform:rotate(45deg); }
footer .made { font-size:14px; opacity:.8; } footer .made span { color:#c8102e; }
.rating-line { font-size:18px; color:var(--muted); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.rating-line b { font-size:28px; color:var(--ink); font-weight:600; }
.rating-line span { color:#e3a008; letter-spacing:2px; }
.reviews { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; }
.review { margin:0; background:var(--soft); border-radius:22px; padding:32px; }
.review blockquote { margin:0 0 16px; font-size:20px; line-height:1.5; letter-spacing:-.01em; }
.review figcaption { color:var(--muted); font-size:15px; }
@media (max-width:820px) { .reviews { grid-template-columns:1fr; } }
#anfrage .form-card { background:var(--soft); } #anfrage .form-card input, #anfrage .form-card select, #anfrage .form-card textarea { background-color:var(--surface); } #anfrage .grid-wrap { background:var(--surface); } #anfrage .room-grid th[scope=row] { background:var(--surface); }
.lang { appearance:none; font:600 14px/1 inherit; letter-spacing:.02em; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:999px; height:48px; min-height:48px; width:auto; padding:0 34px 0 16px; cursor:pointer; background-color:transparent; }
.lang:hover { background:var(--soft); }
@media (max-width:1180px) { .lang { margin-left:auto; } #theme { margin-left:0; } }
/* Kopfzeile auf dem Handy: nichts quetschen, Design folgt dort automatisch dem Gerät */
header .container > * { flex-shrink:0; }
@media (max-width:600px) {
  header .container { gap:8px; }
  .logo svg { height:32px; }
  #theme { display:none; }
  .lang { height:44px; min-height:44px; padding:0 28px 0 12px; background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%; margin-left:auto; }
  .icon-btn, header .btn.call { width:44px; height:44px; min-height:44px; }
  header .btn.call { padding:0; justify-content:center; }
}
/* iPhone/Safari: Datumsfelder halten sich sonst nicht an die Breite */
input[type="date"] { -webkit-appearance:none; appearance:none; display:block; width:100%; min-width:0; max-width:100%; text-align:left; }
input[type="date"]::-webkit-date-and-time-value { text-align:left; margin:0; }
input[type="date"]::-webkit-calendar-picker-indicator { margin-left:0; }