:root {
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: 'Noto Sans', sans-serif;
  --accent-hover: #385347;
  --accent-link: #49633b;
  --on-dark: #f7f4eb;
  --on-dark-muted: #e1e6de;
  --on-dark-label: #d2d8bd;
  --dark-card: #304a3e;
  --hero-tint: 12 32 23;
  --focus: #936124;
}
:root[data-palette='see'] {
  --forest: #234c60;
  --ink: #243e4c;
  --muted: #536671;
  --paper: #f8fbfc;
  --sand: #e7f0f3;
  --line: #c4d4dc;
  --accent-hover: #31627a;
  --accent-link: #26566c;
  --on-dark: #f3f9fc;
  --on-dark-muted: #e0edf3;
  --on-dark-label: #c9e0eb;
  --dark-card: #2d586b;
  --hero-tint: 11 31 46;
  --focus: #a36727;
}
:root[data-palette='ton'] {
  --forest: #82432f;
  --ink: #493529;
  --muted: #715b4f;
  --paper: #fffaf5;
  --sand: #f3e7db;
  --line: #dcc9ba;
  --accent-hover: #94563f;
  --accent-link: #7a402c;
  --on-dark: #fff7ed;
  --on-dark-muted: #f9e9dc;
  --on-dark-label: #f3d6bc;
  --dark-card: #914e39;
  --hero-tint: 43 23 15;
  --focus: #25677b;
}
:root[data-palette='stein'] {
  --forest: #343e47;
  --ink: #2e3740;
  --muted: #5c646b;
  --paper: #fafafa;
  --sand: #eceef0;
  --line: #cbd0d5;
  --accent-hover: #46535f;
  --accent-link: #3d5264;
  --on-dark: #f5f7fa;
  --on-dark-muted: #e2e7ed;
  --on-dark-label: #cfd9e5;
  --dark-card: #404d58;
  --hero-tint: 19 26 33;
  --focus: #96601f;
}
:root[data-palette='beere'] {
  --forest: #634052;
  --ink: #46313d;
  --muted: #705e68;
  --paper: #fdf8fa;
  --sand: #f0e6eb;
  --line: #d9c7d0;
  --accent-hover: #795268;
  --accent-link: #6b3a53;
  --on-dark: #fff6fa;
  --on-dark-muted: #f0e0e8;
  --on-dark-label: #e9cbdc;
  --dark-card: #72495f;
  --hero-tint: 34 17 29;
  --focus: #256779;
}
:root[data-typeface='modern'] { --font-heading: 'Noto Sans', sans-serif; }
:root[data-typeface='elegant'] { --font-heading: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; }
:root[data-typeface='leicht'] { --font-heading: 'Trebuchet MS', Arial, sans-serif; --font-body: Arial, sans-serif; }

body { font-family: var(--font-body); }
h1, h2, h3, .brand > span, .facts-strip strong, .image-label, .apartment-photo span, .footer-brand, .footer-brand small { font-family: var(--font-heading); }
.brand small, .legal-content h3 { font-family: var(--font-body); }
:root[data-typeface='modern'] h1,
:root[data-typeface='modern'] h2,
:root[data-typeface='modern'] h3 { font-weight: 700; letter-spacing: -.045em; }
:root[data-typeface='modern'] .brand > span { font-weight: 700; }
.site-header { border-color: var(--line); }
.button:hover { background: var(--accent-hover); }
.button-light:hover { background: var(--sand); }
.text-link:hover, .contact-links a:hover { color: var(--accent-link); }
.hero-shade { background: linear-gradient(90deg, rgb(var(--hero-tint) / .74), rgb(var(--hero-tint) / .22)), linear-gradient(0deg, rgb(var(--hero-tint) / .38), transparent 35%); }
.hero-content .eyebrow { color: var(--on-dark-muted); }
.apartment-photo span { background: var(--paper); }
.info-card, .booking-note, .legal-section details { border-color: var(--line); }
.card-number { color: var(--accent-link); }
.gallery-item::after { background: linear-gradient(transparent, rgb(var(--hero-tint) / .7)); }
.region-section { color: var(--on-dark); }
.region-section .eyebrow { color: var(--on-dark-label); }
.region-section .section-heading > p, .season-card p { color: var(--on-dark-muted); }
.season-card { background: var(--dark-card); }
#lightbox, #lightbox-image { background: var(--paper); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: var(--focus); }

.design-picker {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 180px;
  max-width: calc(100vw - 32px);
  z-index: 30;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 32px #0000001f;
  font: 12px/1.5 'Noto Sans', sans-serif;
  border-radius: 12px;
}
.design-picker[open] { width: 354px; }
.design-picker > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; font-weight: 700; min-height: 48px; }
.design-picker > summary::-webkit-details-marker { display: none; }
.design-picker > summary > span:first-child { font-size: 20px; line-height: 1; color: var(--forest); }
.design-picker-chevron { margin-left: auto; font-size: 20px; font-weight: 400; }
.design-picker[open] .design-picker-chevron { transform: rotate(45deg); }
.design-picker-content { padding: 0 18px 18px; max-height: min(650px, calc(100svh - 150px)); overflow-y: auto; overscroll-behavior: contain; }
.design-picker-intro { color: var(--muted); font-size: 11px; margin: 0 0 16px; }
.design-picker fieldset { padding: 0; border: 0; min-width: 0; margin: 0 0 18px; }
.design-picker legend { font-size: 11px; font-weight: 700; padding: 0; margin-bottom: 9px; }
.design-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.design-option { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; min-width: 0; min-height: 58px; }
.color-options .design-option { flex-wrap: wrap; }
.design-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.design-option:has(input:checked) { border-color: var(--forest); background: var(--sand); box-shadow: inset 0 0 0 1px var(--forest); }
.design-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.design-option:hover { background: var(--sand); }
.design-option > span:last-child { min-width: 0; }
.design-option strong { display: block; font-size: 10px; }
.design-option small { display: block; font-size: 8px; color: var(--muted); line-height: 1.6; }
.palette-preview { display: flex; width: 100%; gap: 3px; }
.palette-preview i { width: 24px; height: 12px; border-radius: 3px; border: 1px solid #00000018; }
.preview-wald i:nth-child(1) { background: #243c32; }
.preview-wald i:nth-child(2) { background: #efede4; }
.preview-wald i:nth-child(3) { background: #fbfaf6; }
.preview-see i:nth-child(1) { background: #234c60; }
.preview-see i:nth-child(2) { background: #e7f0f3; }
.preview-see i:nth-child(3) { background: #f8fbfc; }
.preview-ton i:nth-child(1) { background: #82432f; }
.preview-ton i:nth-child(2) { background: #f3e7db; }
.preview-ton i:nth-child(3) { background: #fffaf5; }
.preview-stein i:nth-child(1) { background: #343e47; }
.preview-stein i:nth-child(2) { background: #eceef0; }
.preview-stein i:nth-child(3) { background: #fafafa; }
.preview-beere i:nth-child(1) { background: #634052; }
.preview-beere i:nth-child(2) { background: #f0e6eb; }
.preview-beere i:nth-child(3) { background: #fdf8fa; }
.font-preview { font-size: 23px; line-height: 1; flex-shrink: 0; }
.preview-klassisch { font-family: Georgia, 'Times New Roman', serif; }
.preview-modern { font-family: 'Noto Sans', sans-serif; font-weight: 700; }
.preview-elegant { font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; }
.preview-leicht { font-family: 'Trebuchet MS', Arial, sans-serif; }
.design-picker-actions { display: flex; gap: 10px; justify-content: space-between; }
.design-picker-actions button { border: 1px solid var(--line); border-radius: 6px; padding: 10px 13px; background: transparent; color: var(--ink); min-height: 44px; font-size: 11px; }
.design-picker-actions button:last-child { background: var(--forest); color: white; border-color: var(--forest); }
.design-picker-actions button:hover { background: var(--sand); }
.design-picker-actions button:last-child:hover { background: var(--accent-hover); }
.design-status { margin: 14px 0 4px; font-size: 10px; font-weight: 700; }
.design-picker-note { font-size: 9px; color: var(--muted); }
.site-footer { padding-bottom: 94px; }
@media (max-width: 760px) {
  .hero-shade { background: linear-gradient(90deg, rgb(var(--hero-tint) / .74), rgb(var(--hero-tint) / .3)), linear-gradient(0deg, rgb(var(--hero-tint) / .33), transparent); }
  .design-picker { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  :root[data-typeface='modern'] h1 { font-size: clamp(43px, 9vw, 65px); }
  :root[data-typeface='modern'] h2 { font-size: 34px; }
  :root[data-typeface='modern'] .brand > span { font-size: 20px; }
}
@media print { .design-picker { display: none; } }