:root {
  /* Warme Galerie: Leinen statt Weiß, Farben aus Dinos Bildern */
  --bg: #f5efe6;             /* Leinen */
  --paper: #fbf8f3;
  --ink: #1b1512;            /* warmes Schwarz */
  --ink-2: #675c52;          /* Sekundärtext, 5.6:1 auf Leinen */
  --line: #e3d8ca;
  --muted: #b9ab9b;          /* nur dekorativ */
  --accent: #d7262e;         /* Glut-Rot */
  --red: #d7262e;
  --turq: #11857a;
  --turq-deep: #0d4f4a;
  --gold: #e0a12a;
  --blue: #2350b8;
  --night: #17110e;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --light: #fbf8f3;          /* Schrift auf farbigen/dunklen Flächen, in beiden Designs gleich */
  --on-ink: #ffffff;         /* Text auf Flächen in --ink */
  --header-bg: rgba(245, 239, 230, 0.95);
  --header-bg-0: rgba(245, 239, 230, 0);
  --stage-bg: radial-gradient(120% 90% at 50% 40%, #fbf7f0 0%, #f2eadf 60%, #e9dfd1 100%);
  --surface: rgba(251, 248, 243, 0.92);
  --hover: #f3eadf;
  --placeholder: #ebe2d6;
  --frame-bg: radial-gradient(80% 70% at 50% 35%, #fffaf2 0%, #efe4d5 70%, #e6d8c5 100%);
  --bar-bg: rgba(245, 239, 230, 0.94);
  --tooltip-bg: #17110e;
  --sold-text: #6b6b6b;
  --avail-text: #15803d;
  --gold-text: #b87a0c;
  --compass-line: #cfcfcf;
  --field-bg: #fffdf9;
  --blob-opacity: 0.6;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --avail: #15803d;          /* verfügbar, 5:1 auf Weiß */
  --sold: #8f8f8f;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: 'Funnel Display', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grain), var(--bg);
  color: var(--ink);
  font: 400 15px/1.6 var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.has-detail { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
ul { list-style: none; margin: 0; padding: 0; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  background: var(--ink); color: #fff; padding: 8px 12px; text-decoration: none;
  transform: translateY(-150%); transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

.label {
  font: 500 11px/1.4 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.display {
  font: 600 56px/1 var(--display);
  letter-spacing: -0.03em;
  margin: 0;
}

/* ---------- Kopfzeile ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px var(--gutter) 22px;
  font-size: 14px;
  background: linear-gradient(var(--header-bg) 45%, var(--header-bg-0));
  pointer-events: none;
}
.site-header a { pointer-events: auto; text-decoration: none; }
.brand { font-weight: 500; white-space: nowrap; }
.brand-sub { color: var(--ink-2); }
.site-header ul { display: flex; gap: clamp(14px, 2.4vw, 28px); }
.site-header nav a { position: relative; }
.site-header nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.site-header nav a:hover::after { transform: scaleX(1); }

/* ---------- Bühne (WebGL) ---------- */
.stage {
  position: fixed; inset: 0; z-index: 0;
  background: var(--grain), var(--stage-bg);
  overflow: hidden;
  transition: opacity 0.6s var(--ease), filter 0.6s var(--ease);
}
.stage canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.stage canvas.is-dragging { cursor: grabbing; }
.stage.is-backdrop { opacity: 0.08; filter: blur(10px); }
.stage.is-backdrop canvas { pointer-events: none; }
.stage.is-hidden { opacity: 0; pointer-events: none; }
.no-webgl .stage canvas { display: none; }

/* ---------- Hero ---------- */
/* main liegt über der Kugel: nur die Abschnitte selbst fangen Maus und Touch ab */
main { position: relative; z-index: 1; pointer-events: none; overflow-x: clip; }
main > section:not(.hero) { pointer-events: auto; }
.hero {
  position: relative;
  height: 100vh; height: 100svh; min-height: 520px;
  pointer-events: none;
}
.hero button, .hero a, .hero .list-view { pointer-events: auto; }

.sphere-ui { position: absolute; inset: 0; transition: opacity 0.4s var(--ease); }
.hero[data-view='liste'] .sphere-ui { opacity: 0; visibility: hidden; }
.sphere-focus { position: absolute; inset: 120px var(--gutter) 96px; border-radius: 12px; }
.sphere-focus:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }

.intro {
  position: absolute; left: 50%; top: 50%;
  width: min(760px, calc(100% - 2 * var(--gutter)));
  transform: translate(-50%, -50%);
  margin: 0; text-align: center;
  font: 600 56px/1 var(--display); letter-spacing: -0.03em;
  text-shadow: 0 0 24px var(--bg), 0 0 48px var(--bg), 0 0 80px var(--bg);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.intro em {
  font: italic 400 1.12em/1 var(--serif); letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--red) 10%, var(--gold) 50%, var(--turq) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  padding: 0 0.04em;
}
.intro.is-gone { opacity: 0; transform: translate(-50%, -46%); }
.no-webgl .intro { display: none; }

.hint {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 500 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--surface); padding: 8px 12px 8px 8px; border-radius: 999px;
  box-shadow: 0 6px 20px -10px rgba(60, 35, 15, 0.35);
}
.compass { position: relative; width: 22px; height: 22px; border: 1px solid var(--compass-line); border-radius: 50%; }
.compass-dot {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--accent);
}
.centre-label {
  position: absolute; left: 50%; bottom: 68px; transform: translateX(-50%);
  margin: 0; text-align: center; white-space: nowrap;
  background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 13px;
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.centre-label.is-on { opacity: 1; }
.centre-label small { display: block; font-size: 11px; color: #c9c9c9; letter-spacing: 0.08em; }

.toolbar {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 64px; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.filters { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; pointer-events: auto; padding: 2px; }
.filters::-webkit-scrollbar { display: none; }
.chips { display: flex; gap: 6px; }
.chip-avail { margin-right: 6px; }
.chip-avail .dot-avail { background: var(--avail); }
.chip-avail[aria-pressed='true'] { background: var(--avail); border-color: var(--avail); --c-text: #fff; }
.chip-avail[aria-pressed='true'] .dot-avail { background: #fff; }
.chip, .view-toggle button {
  flex: none; cursor: pointer;
  font: 500 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chip:hover, .view-toggle button:hover { border-color: var(--ink); }
.chip[aria-pressed='true'], .view-toggle button[aria-pressed='true'] { background: var(--c, var(--ink)); border-color: var(--c, var(--ink)); color: var(--c-text, var(--on-ink)); }
.chip[aria-pressed='true'] .dot { background: var(--c-text, var(--on-ink)) !important; }
.chip .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.view-toggle { display: flex; gap: 4px; flex: none; }

/* ---------- Liste ---------- */
.list-view {
  position: absolute; inset: 116px var(--gutter) 24px; overflow: auto;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
  background: var(--grain), var(--paper); border-radius: 14px; padding: 8px 20px 20px;
  box-shadow: 0 30px 60px -35px rgba(60, 35, 15, 0.35);
}
.hero[data-view='liste'] .list-view { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease) 0.1s; }
.list-view:focus { outline: none; }
.works-table { width: 100%; border-collapse: collapse; }
.works-table th {
  text-align: left; font: 500 11px/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); padding: 0 12px 12px 0; border-bottom: 1px solid var(--ink);
  position: sticky; top: 0; background: var(--paper); padding-top: 12px;
}
.works-table td { padding: 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.works-table td > a, .works-table td > span { display: block; padding: 14px 12px 14px 0; text-decoration: none; }
.works-table .t-title a { font: 600 22px/1.15 var(--display); letter-spacing: -0.02em; }
.works-table tr { transition: background 0.2s var(--ease); }
.works-table tbody tr:hover { background: var(--hover); }
.works-table .t-num, .works-table .col-year, .works-table .col-tech, .works-table .col-size, .works-table .col-price { color: var(--ink-2); white-space: nowrap; }
.works-table tr.is-sold .t-title a { color: var(--ink-2); }
.works-table .col-price { text-align: right; }
.works-table th:last-child { text-align: right; padding-right: 0; }
.list-empty { padding: 32px 0; color: var(--ink-2); }

/* Verkaufsstatus */
.status { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status.is-avail { color: var(--avail-text); }
.status.is-avail .dot { background: var(--avail); box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15); }
.status.is-sold { color: var(--sold-text); }
.status.is-sold .dot { background: var(--sold); }
.hover-label .status, .centre-label .status { margin-left: 10px; vertical-align: 1px; }
.hover-label .status.is-avail, .centre-label .status.is-avail { color: #6ee7a0; }
.hover-label .status.is-avail .dot, .centre-label .status.is-avail .dot { background: #4ade80; box-shadow: none; }
.hover-label .status.is-sold, .centre-label .status.is-sold { color: #c9c9c9; }
.works-table .t-title a:focus-visible { outline-offset: -2px; }
.list-preview {
  position: fixed; left: 0; top: 0; z-index: 40; width: 220px; aspect-ratio: 0.77; object-fit: cover;
  pointer-events: none; opacity: 0; transform: translate3d(-999px, -999px, 0);
  transition: opacity 0.2s var(--ease); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}
.list-preview.is-on { opacity: 1; }

.hover-label {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  background: var(--ink); color: #fff; font-size: 12px; line-height: 1.3; padding: 6px 10px; border-radius: 3px;
  opacity: 0; transition: opacity 0.2s var(--ease); white-space: nowrap;
}
.hover-label.is-on { opacity: 1; }
.hover-label small { color: #c9c9c9; margin-left: 6px; }

/* ---------- Abschnitte ---------- */
.about, .rooms, .contact { padding: clamp(96px, 14vw, 180px) var(--gutter) 0; max-width: 1360px; margin: 0 auto; }
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.portrait img, .atelier img, .room img { width: 100%; object-fit: cover; background: var(--placeholder); }
.portrait img { aspect-ratio: 4 / 5; }
.about-text { padding-top: 24px; display: grid; gap: 22px; max-width: 620px; }
.lead { font-size: 19px; line-height: 1.55; margin: 0; }
.about-text p { margin: 0; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 12px; border-top: 1px solid var(--line); }
.facts h3 { margin-bottom: 10px; }
.facts li { padding: 4px 0; }
.triad { font: 600 22px/1.2 var(--display); letter-spacing: -0.02em; }
.triad { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; letter-spacing: 0; }
.c-red { color: var(--red); }
.c-turq { color: var(--turq); }
.c-gold { color: var(--gold-text); }
.atelier { margin: clamp(64px, 9vw, 120px) 0 0 auto; width: min(560px, 100%); }
.atelier img { aspect-ratio: 4 / 5; }
figcaption { margin-top: 10px; font: 500 11px/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }

.section-head { display: grid; gap: 16px; max-width: 640px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head p { margin: 0; }
.room-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.room { margin: 0; }
.room-a { grid-column: 1 / span 5; }
.room-a img { aspect-ratio: 3 / 4; }
.room-b { grid-column: 7 / span 6; margin-top: 18%; }
.room-b img { aspect-ratio: 3 / 4; }
.room-c { grid-column: 2 / span 4; }
.room-c img { aspect-ratio: 9 / 16; }
.room-d { grid-column: 8 / span 4; margin-top: -10%; }
.room-d img { aspect-ratio: 9 / 16; }

.contact { padding-bottom: clamp(96px, 12vw, 160px); }
.contact-lead { max-width: 520px; margin: 20px 0 28px; font-size: 17px; }
.email {
  display: inline-block; text-decoration: none; position: relative;
  font: 600 56px/1.05 var(--display); letter-spacing: -0.03em; overflow-wrap: anywhere;
}
.email span { background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 3px no-repeat; background-size: 0% 3px; transition: background-size 0.3s var(--ease); padding-bottom: 4px; }
.email:hover span, .email:focus-visible span { background-size: 100% 3px; }
.socials { display: flex; gap: 20px; margin-top: 28px; }
.socials a { text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.socials a:hover { border-color: var(--ink); }

.site-footer {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 24px var(--gutter); border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px;
  max-width: 1360px; margin: 0 auto;
}
.site-footer p { margin: 0; }

/* ---------- Werkseite ---------- */
.detail {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain;
  background: var(--grain), var(--bg); opacity: 0; transition: opacity 0.35s var(--ease);
}
.detail.is-open { opacity: 1; }
.detail-bar {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--gutter); background: var(--bar-bg);
}
.back { background: none; border: 0; padding: 8px 0; cursor: pointer; font-size: 14px; }
.back:hover { text-decoration: underline; text-underline-offset: 4px; }
.detail-body { max-width: 1240px; margin: 0 auto; padding: 8px var(--gutter) 96px; transition: opacity 0.25s var(--ease); }
.detail-body.is-swapping { opacity: 0; }
.detail-hero {
  margin: 0; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); border-radius: 18px;
  background: var(--grain), var(--frame-bg);
}
.detail-hero img { max-height: 78vh; width: auto; object-fit: contain; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); padding: clamp(40px, 6vw, 72px) 0; }
.detail-grid .label { margin-bottom: 14px; }
.detail-status { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.detail-status .status { font-size: 12px; }
.status-note { color: var(--ink-2); font-size: 14px; }
.detail-price { margin: 10px 0 0; font: 600 28px/1.1 var(--display); letter-spacing: -0.02em; }
.detail-price:empty { display: none; }
.detail-text { display: grid; gap: 20px; align-content: start; max-width: 560px; }
.detail-text blockquote { margin: 0; font: italic 400 30px/1.2 var(--serif); color: var(--ink); }
.detail-text blockquote:empty, .detail-text p:empty { display: none; }
.detail-text p { margin: 0; }
.detail-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.detail-facts dt { color: var(--ink-2); }
.detail-facts dd { margin: 0; }
.cta {
  justify-self: start; text-decoration: none; background: var(--red); color: #fff;
  box-shadow: 0 12px 26px -12px rgba(215, 38, 46, 0.7); transition: background 0.2s var(--ease), transform 0.2s var(--ease);
  padding: 14px 20px; border-radius: 999px; font-weight: 500; position: relative;
}
.cta::after { content: '→'; margin-left: 10px; }
.cta:hover { background: #b81c24; transform: translateY(-1px); }
.cta.is-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
.cta.is-secondary::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: 1px; }
.cta.is-secondary::after { background: var(--sold); }
.cta.is-secondary:hover { background: var(--hover); }
.detail-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); max-width: 1100px; gap: clamp(16px, 3vw, 40px); }
.detail-gallery:empty { display: none; }
.detail-gallery figure { margin: 0; }
.detail-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--placeholder); border-radius: 10px; }
.detail-gallery figure.is-wide { grid-column: 1 / -1; }
.detail-gallery figure.is-wide img { aspect-ratio: auto; height: auto; }
.detail-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--ink); }
.detail-nav a { text-decoration: none; max-width: 48%; }
.detail-nav a:last-child { text-align: right; }
.detail-nav strong { display: block; font: 600 24px/1.15 var(--display); letter-spacing: -0.02em; margin-top: 6px; }
.detail-nav a:hover strong { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }

/* ---------- Farbe & Wärme ---------- */
.display em, .detail-grid h2 em { font: italic 400 1.08em/0.9 var(--serif); letter-spacing: -0.01em; color: var(--red); }

/* Farbschlieren hinter der Kugel, wandern langsam wie nasse Farbe.
   Weiche Verläufe statt Weichzeichner: liegt unter der Kugel und fängt keine Klicks ab. */
.blobs { position: absolute; inset: -10%; z-index: 0; opacity: var(--blob-opacity); pointer-events: none; }
.blobs span { position: absolute; border-radius: 50%; will-change: transform; animation: drift 38s ease-in-out infinite alternate; }
.blobs span:nth-child(1) { width: 46vmax; height: 40vmax; left: -6%; top: 2%; background: radial-gradient(circle, rgba(215, 38, 46, 0.55), transparent 70%); }
.blobs span:nth-child(2) { width: 50vmax; height: 44vmax; right: -10%; top: -8%; background: radial-gradient(circle, rgba(17, 133, 122, 0.5), transparent 70%); animation-duration: 46s; animation-delay: -12s; }
.blobs span:nth-child(3) { width: 42vmax; height: 38vmax; left: 30%; bottom: -14%; background: radial-gradient(circle, rgba(224, 161, 42, 0.6), transparent 70%); animation-duration: 52s; animation-delay: -20s; }
.blobs span:nth-child(4) { width: 34vmax; height: 30vmax; right: 6%; bottom: 0; background: radial-gradient(circle, rgba(35, 80, 184, 0.4), transparent 70%); animation-duration: 60s; animation-delay: -30s; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vw, -4vh, 0) scale(1.12); }
  100% { transform: translate3d(-5vw, 5vh, 0) scale(0.94); }
}

/* Shop im Menü hervorheben */
.site-header .nav-shop { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; margin: -4px 0; border-radius: 999px; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.site-header .nav-shop::after { left: 10px; right: 10px; }
.site-header .nav-shop .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
/* Nur hervorgehoben, wenn die Shop-Ansicht offen ist */
.site-header .nav-shop[aria-current='page'] { background: var(--ink); color: var(--on-ink); }
.site-header .nav-shop[aria-current='page']::after { display: none; }

/* Werke im Rahmen mit Farbfläche dahinter */
.portrait, .atelier { position: relative; isolation: isolate; }
.portrait::before, .atelier::before { content: ''; position: absolute; z-index: -1; border-radius: 4px; }
.portrait::before { inset: 28px -22px -22px 28px; background: var(--gold); }
.atelier::before { inset: -22px 28px 28px -22px; background: var(--turq); }
.portrait img, .atelier img { border-radius: 4px; box-shadow: 0 30px 50px -30px rgba(40, 20, 10, 0.5); }
.facts { border-top-color: var(--line); }
.facts h3.label { color: var(--red); }

/* Galerie bei Nacht */
.rooms {
  max-width: none; margin: clamp(96px, 12vw, 160px) 0 0; padding: clamp(96px, 12vw, 150px) max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter))) clamp(96px, 12vw, 150px);
  background:
    radial-gradient(50% 40% at 20% 10%, rgba(224, 161, 42, 0.16), transparent 70%),
    radial-gradient(45% 35% at 85% 40%, rgba(17, 133, 122, 0.18), transparent 70%),
    var(--grain), var(--night);
  color: var(--light);
}
.rooms .label, .rooms figcaption { color: #c9b9a6; }
.rooms .section-head p { color: #ddd0bf; }
.rooms .room img { border-radius: 6px; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.8); }

/* Pinselstrich unter einem Wort */
.brush { position: relative; isolation: isolate; white-space: nowrap; }
.brush::after {
  content: ''; position: absolute; z-index: -1; left: -4%; right: -6%; bottom: -0.02em; height: 0.36em;
  background: var(--c, var(--gold)); transform-origin: left; transform: scaleX(0);
  transition: transform 0.9s var(--ease) 0.35s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 17C42 7 96 5 152 8s108 3 145-2l-2 10c-44 6-98 4-150 6S54 25 6 28z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 17C42 7 96 5 152 8s108 3 145-2l-2 10c-44 6-98 4-150 6S54 25 6 28z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.reveal.is-in .brush::after, .brush.is-in::after { transform: scaleX(1); }
.rooms .brush { --c: var(--red); }

/* Kontakt in Türkis */
.contact {
  max-width: none; margin: 0; padding: clamp(96px, 12vw, 160px) max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter)));
  background:
    radial-gradient(40% 50% at 90% 10%, rgba(224, 161, 42, 0.35), transparent 70%),
    radial-gradient(35% 45% at 5% 95%, rgba(215, 38, 46, 0.3), transparent 70%),
    var(--grain), var(--turq-deep);
  color: var(--light);
}
.contact .label { color: #a9e3d9; }
.contact .display { margin-top: 14px; }
.contact .display, .rooms .display { color: var(--light); }
.contact .display em, [data-theme='anthrazit'] .contact .display em { color: #ffd27a; }
.contact-lead { color: #dcefe9; }
.contact .email span { background-image: linear-gradient(var(--gold), var(--gold)); }
.contact .socials a { border-bottom-color: rgba(251, 248, 243, 0.35); }
.contact .socials a:hover { border-color: var(--gold); }
.contact :focus-visible { outline-color: var(--light); }

.site-footer { max-width: none; background: var(--night); color: #c9b9a6; border-top: 0; padding-left: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter))); }

.hover-label, .centre-label { background: var(--tooltip-bg); color: #f3eee6; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }
.compass-dot { background: var(--red); }

/* ---------- Design „Anthrazit“: bläuliches Dunkelgrau, helle Schrift ---------- */
[data-theme='anthrazit'] {
  color-scheme: dark;
  --bg: #20252d;
  --paper: #272d36;
  --ink: #ece6dc;
  --ink-2: #a9b1bc;          /* 7:1 auf Anthrazit */
  --line: #39414d;
  --muted: #5a6370;
  --night: #15191f;
  --on-ink: #1b1f25;
  --header-bg: rgba(32, 37, 45, 0.95);
  --header-bg-0: rgba(32, 37, 45, 0);
  --stage-bg: radial-gradient(120% 90% at 50% 40%, #2d343f 0%, #232930 60%, #1a1e25 100%);
  --surface: rgba(39, 45, 54, 0.9);
  --hover: #2e353f;
  --placeholder: #2c333d;
  --frame-bg: radial-gradient(80% 70% at 50% 35%, #333b47 0%, #272d36 70%, #20252d 100%);
  --bar-bg: rgba(32, 37, 45, 0.94);
  --tooltip-bg: #3a4350;
  --sold-text: #a3aab3;
  --avail-text: #5ee08f;
  --gold-text: var(--gold);
  --compass-line: #4a5360;
  --field-bg: #1b2027;
  --blob-opacity: 0.45;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.75 0 0 0 0 0.8 0 0 0 0 0.9 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme='anthrazit'] .display em, [data-theme='anthrazit'] .detail-grid h2 em { color: #ff5a5f; }
[data-theme='anthrazit'] .facts h3.label { color: #ff7a7e; }
[data-theme='anthrazit'] .c-red { color: #ff6b70; }
[data-theme='anthrazit'] .c-turq { color: #3fd1c1; }
[data-theme='anthrazit'] .portrait img, [data-theme='anthrazit'] .atelier img { box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.8); }
[data-theme='anthrazit'] .detail-hero img { box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.85); }

/* Umschalter Hell / Anthrazit */
.theme-toggle { width: 26px; height: 26px; margin: -4px 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: grid; place-items: center; pointer-events: auto; }
.theme-toggle span { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); border: 1.5px solid var(--ink); }
.theme-toggle:hover { border-color: var(--ink); }

/* ---------- Anfrageformular ---------- */
.inquiry { margin-top: 4px; }
.inquiry-form { display: grid; gap: 12px; padding: 20px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.if-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.if-field { display: grid; gap: 5px; font-size: 13px; font-weight: 500; }
.if-field input, .if-field textarea {
  width: 100%; font: 400 15px/1.4 var(--body); color: var(--ink); background: var(--field-bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.if-field textarea { resize: vertical; min-height: 96px; }
.if-field input:focus, .if-field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 15%, transparent); }
.if-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.if-privacy { margin: 0; font-size: 12px; color: var(--ink-2); }
.if-error { margin: 0; color: #e5484d; font-size: 14px; }
.if-error:empty { display: none; }
.inquiry-form .cta { border: 0; cursor: pointer; font: 500 15px/1 var(--body); }
.inquiry-form .cta:disabled { opacity: 0.6; cursor: progress; }
.if-done { padding: 18px 20px; border-radius: 14px; background: color-mix(in srgb, var(--avail) 18%, var(--paper)); border: 1px solid color-mix(in srgb, var(--avail) 45%, transparent); }
.if-done:focus { outline: none; }
.detail-text .cta { border: 0; cursor: pointer; font: 500 15px/1 var(--body); }

.inquiry-static p { margin: 0; }
.inquiry-static .is-contact { font: 600 22px/1.35 var(--display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.inquiry-static .is-contact a { text-decoration: none; }
.inquiry-static .is-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.inquiry-static .cta { font: 500 15px/1 var(--body); }
.inquiry-static .cta.is-secondary { cursor: pointer; }
.contact .inquiry-static .cta.is-secondary { color: var(--light); border-color: rgba(255, 255, 255, 0.5); }

/* Kontaktformular auf Türkis */
.inquiry-contact { max-width: 640px; margin: 8px 0 28px; }
.contact .inquiry-form { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: var(--light); }
.contact .if-field input, .contact .if-field textarea { background: rgba(0, 0, 0, 0.18); border-color: rgba(255, 255, 255, 0.22); color: #fbf8f3; }
.contact .if-field input:focus, .contact .if-field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 161, 42, 0.3); }
.contact .if-privacy { color: #bfe3dc; }
.contact .if-error { color: #ffb4b4; }
.contact .if-done { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); color: #fbf8f3; }
.contact-alt { margin: 0; color: #cfe9e3; font-size: 15px; }
.contact-alt .email { font-family: var(--body); font-weight: 500; font-size: 15px; line-height: inherit; letter-spacing: 0; }
.contact-alt .email span { padding-bottom: 2px; }

/* ---------- Rechtliches ---------- */
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; }
.footer-links a:hover, .footer-links a[aria-current='page'] { text-decoration: underline; text-underline-offset: 3px; }
.price-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.list-note { margin: 18px 0 0; font-size: 13px; color: var(--ink-2); }
.if-privacy a { color: inherit; }

.legal-page { min-height: 100vh; display: flex; flex-direction: column; }
.legal-header {
  position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px var(--gutter); background: var(--bar-bg); font-size: 14px;
}
.legal-header a { text-decoration: none; }
.legal-header nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 24px); }
.legal-header nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal { flex: 1; width: min(760px, 100%); margin: 0 auto; padding: clamp(40px, 8vw, 96px) var(--gutter) 96px; }
.legal .display { margin: 12px 0 28px; overflow-wrap: anywhere; }
.legal .lead { font-size: 18px; margin: 0 0 12px; }
.legal section { padding: 26px 0; border-top: 1px solid var(--line); }
.legal h2 { font: 600 20px/1.25 var(--display); letter-spacing: -0.01em; margin: 0 0 10px; }
.legal p { margin: 0 0 12px; max-width: 68ch; }
.legal p:last-child { margin-bottom: 0; }
.legal a { text-underline-offset: 3px; }
.legal-stand { margin-top: 24px !important; color: var(--ink-2); font-size: 13px; }
mark.todo { background: color-mix(in srgb, var(--gold) 30%, transparent); color: inherit; padding: 1px 6px; border-radius: 4px; font-size: 0.9em; }

/* ---------- Einblendungen ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsiv ---------- */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-text { padding-top: 0; }
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .display, .intro { font-size: 32px; }
  .email { font-size: 30px; }
  .brand-sub { display: none; }
  .toolbar { top: 56px; flex-direction: column; align-items: stretch; gap: 8px; }
  .filters { margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
  .view-toggle { align-self: flex-end; }
  .list-view { top: 150px; }
  .col-tech, .col-size, .col-year, .works-table .t-num, .works-table th:first-child { display: none; }
  .works-table .t-title a { font-size: 18px; }
  .sphere-focus { inset: 150px var(--gutter) 110px; }
  .facts { grid-template-columns: 1fr; }
  .room-grid { grid-template-columns: 1fr 1fr; }
  .room-a, .room-b { grid-column: 1 / -1; margin-top: 0; }
  .room-c { grid-column: 1; }
  .room-d { grid-column: 2; margin-top: 32px; }
  .list-preview { display: none; }
  .detail-nav strong { font-size: 18px; }
  .triad { font-size: 24px; }
  .portrait::before { inset: 16px -10px -10px 16px; }
  .atelier::before { inset: -10px 16px 16px -10px; }
  .site-header ul { gap: 12px; }
  .if-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .site-header { font-size: 13px; gap: 10px; }
  .site-header ul { gap: 10px; align-items: center; }
  .site-header li:first-child { display: none; } /* „Werke“: der Name links führt ebenfalls nach oben */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blobs span { animation: none !important; }
  .brush::after { transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}