:root {
  --kopf-h: 57px;
  --t-2: 0.786rem; --t-1: 0.887rem; --t0: 1rem; --t1: 1.128rem; --t2: 1.272rem; --t3: 1.435rem;
  --t4: 1.618rem; --t5: 1.825rem; --t6: 2.058rem; --t7: 2.321rem; --t8: 2.618rem; --t9: 2.953rem;
  --satzbreite: 60ch;
  --satzbreite-lead: 52ch;
  scroll-padding-block-start: calc(var(--kopf-h) + var(--space-4));
}
@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }
@media (pointer: coarse) { :root { --finger: 44px; } .button { --button-height: var(--finger); } .site-nav-switch { height: var(--finger); } .brand { min-block-size: var(--finger); min-inline-size: var(--finger); } }
.brand:has(> .lockup) { flex: none; }
@media (max-width: 30rem) { .brand > .lockup { width: var(--space-6); height: var(--space-6); } }
.site-nav a[aria-current="page"] { text-decoration: underline 2px; text-underline-offset: 6px; }
:where(body) { min-block-size: 100dvh; line-height: 1.55; }
:where(h1, h2, h3) { margin: 0; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
:where(p, li, dt, dd, figcaption, td, label) { text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 16 6 6; }
:where(p, ul, ol, dl, figure) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(img, video, svg) { display: block; max-inline-size: 100%; }
:where(picture) { display: contents; }
picture.dunkel, :root[data-theme="dark"] picture.hell { display: none; }
:root[data-theme="dark"] picture.dunkel { display: contents; }
:where(source) { display: none; }
:where(a) { color: var(--text-accent); text-decoration: none; }
:where(a:hover) { text-decoration: underline; text-underline-offset: 3px; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
:where(code, kbd) { font-family: var(--font-mono); font-size: 0.92em; }
:where(::selection) { background: var(--bg-accent-soft); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition: none !important; }
}
.skip-link {
  position: absolute; inset-inline-start: var(--space-2); inset-block-start: var(--space-2); z-index: 100;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius);
  background: var(--bg-accent); color: var(--text-on-accent); transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.breite, .vorstellung { max-inline-size: 1200px; margin-inline: auto; padding-inline: var(--space-6); }
.vorstellung {
  padding-block: var(--space-4) var(--space-16);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}
.vorstellung h2 { font-size: clamp(var(--t4), 1.5vw + 1.25rem, var(--t6)); line-height: 1.2; }
.vorstellung :is(h3, .formate dt) { font-size: var(--t2); line-height: 1.3; }
.vorstellung p { max-inline-size: var(--satzbreite); }
.vorstellung .klein { font-size: var(--t-1); color: var(--text-muted); }
.vorstellung .klein a { text-decoration: underline; text-underline-offset: 3px; }
.vorstellung .unter { font-size: var(--t1); color: var(--text-muted); margin-block-end: var(--space-6); }
.vorstellung section > :not(.klein) + .klein { margin-block-start: var(--space-2); }
@media (min-width: 960px) { .vorstellung :is(ul, dl) ~ .klein { max-inline-size: none; } }

.fluss, .angebot, .beitrag section, section:where(.vorstellung:not(.beitrag) > *) { display: grid; gap: var(--space-4); align-content: start; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spalte, 20rem)), 1fr)); gap: var(--space-6); }
.raster:has(> :nth-child(3):last-child) { grid-template-columns: repeat(auto-fit, minmax(clamp(min(100%, var(--spalte, 20rem)), (3 * var(--spalte, 20rem) + 2 * var(--space-6) - 100%) * 999, 100%), 1fr)); }
.griffe { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.versprechen { display: grid; gap: var(--space-6); padding-block-start: var(--space-8); }
.versprechen h1 { font-size: min(clamp(var(--t6), 2.4vw + 1.5rem, var(--t9)), 8.6vw); line-height: 1.1; max-inline-size: 22ch; }
.versprechen h1 em { font-style: normal; color: var(--text-accent); }
.versprechen .lead,
.versprechen .satz { font-size: clamp(var(--t1), 0.5vw + 1rem, var(--t2)); max-inline-size: var(--satzbreite-lead); }
.auftakt { grid-template-areas: "text" "szene" "griffe"; }
.auftakt > .fluss { grid-area: text; }
.auftakt > .scene { grid-area: szene; }
.auftakt > .griffe { grid-area: griffe; }
.auftakt h1 em { display: block; }
@media (min-width: 960px) {
  .auftakt { grid-template-columns: minmax(0, 1fr) minmax(0, min(520px, 48%)); grid-template-areas: "text szene" "griffe szene"; gap: var(--space-8) var(--space-12); }
  .auftakt > .fluss { align-self: end; }
  .auftakt > .griffe { align-self: start; }
  .auftakt h1 { font-size: clamp(var(--t7), 2.5vw + 0.75rem, var(--t9)); }
}
@media (min-width: 1248px) {
  .auftakt { grid-template-columns: minmax(0, 1fr) 520px; }
}

.schaufenster { display: grid; gap: var(--space-8) var(--space-12); align-items: center; padding-block: var(--space-4); }
@media (min-width: 960px) {
  .schaufenster { grid-template-columns: minmax(0, min(520px, 48%)) minmax(0, 1fr); }
  .schaufenster > .scene { grid-area: 1 / 1; }
}
@media (min-width: 1248px) {
  .schaufenster { grid-template-columns: 520px minmax(0, 1fr); }
}
.schaufenster h3 { font-size: clamp(var(--t3), 1vw + 1rem, var(--t5)); line-height: 1.2; text-wrap: balance; }
.schaufenster .angebot > p:not(.eyebrow, .griffe) { font-size: var(--t1); color: var(--text-muted); max-inline-size: 46ch; }

.buehne { margin-block-start: var(--space-6); }
.buehne, .anfrage { max-inline-size: 48rem; }
.buehne img {
  inline-size: 100%; block-size: auto;
  border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow-small);
  background: var(--bg-raised);
}

.kacheln li { display: grid; gap: var(--space-2); align-content: start; }
.kacheln svg {
  inline-size: 28px; block-size: 28px; margin-block-end: var(--space-2);
  fill: none; stroke: var(--text-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.kacheln p { color: var(--text-muted); }
@media (min-width: 1025px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.werkstatt { display: grid; gap: var(--space-4) var(--space-6); margin-block-start: var(--space-6); }
@media (min-width: 1025px) {
  .werkstatt { grid-template-columns: auto max-content minmax(0, 1fr); }
  .werkstatt li { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: var(--space-6); align-items: center; }
  .werkstatt svg { margin-block-end: 0; }
}

.rundgang, .fassade {
  display: block; inline-size: 100%; aspect-ratio: 16 / 10; overflow: clip;
  background: #000; border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow-small);
}
.fassade, .spieler { position: relative; }
.fassade img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.spieler { display: grid; }
.spieler > * { grid-area: 1 / 1; }
.spieler > .rundgang { cursor: pointer; }
.spieler:fullscreen { background: #000; }
.spieler:fullscreen .rundgang { block-size: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.spieler-leiste {
  align-self: end; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / 0.7)); border-radius: 0 0 var(--radius-large) var(--radius-large);
}
.spieler-leiste .button { color: inherit; }
.spieler-leiste .button:hover, .spieler-leiste .button-small[aria-pressed="true"] { background: rgb(255 255 255 / 0.2); }
.spieler-stelle { flex: 1; min-inline-size: 0; accent-color: var(--bg-accent); }
.spieler-zeit { font-size: var(--t-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 40rem) { .spieler-zeit { display: none; } }
.fassade::after, .spieler[data-pausiert] .spieler-abspielen {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  inline-size: 84px; block-size: 84px; border-radius: 50%;
  background: color-mix(in oklab, var(--bg-accent) 88%, transparent) center / 34px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l10.5-6.5z'/%3E%3C/svg%3E");
  box-shadow: 0 8px 24px rgba(15, 38, 65, .35);
  transition: scale 120ms;
}
.fassade::after { content: ""; }
.spieler[data-pausiert] .spieler-abspielen svg { display: none; }
.fassade:hover::after, .spieler[data-pausiert] .spieler-abspielen:hover { scale: 1.06; }
.kapitel-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-2); margin-block-start: var(--space-2); }
.kapitel-liste a {
  display: flex; gap: var(--space-4); align-items: baseline; min-block-size: 44px;
  padding: var(--space-2) var(--space-4); color: var(--text);
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color 120ms, background 120ms;
}
.kapitel-liste a:hover { border-color: var(--border-accent); background: var(--bg-hover); text-decoration: none; }
.kapitel-liste time, .transkript time { flex: none; inline-size: 3.2em; font-family: var(--font-mono); font-size: var(--t-1); color: var(--text-accent); font-variant-numeric: tabular-nums; }
.kapitel-liste a[aria-current="true"] { border-color: var(--border-accent); box-shadow: inset 3px 0 0 var(--border-accent); background: var(--bg-hover); }
.transkript { display: grid; gap: var(--space-2); max-inline-size: var(--satzbreite); }
.transkript h3 { display: flex; gap: var(--space-4); align-items: baseline; margin-block-start: var(--space-4); }

.zeichen { display: none; }

.blicke { display: grid; gap: var(--space-24); margin-block-start: var(--space-6); }
.blicke figure { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); align-items: center; }
.blicke figure:nth-child(even) { flex-direction: row-reverse; }
.blicke figure:nth-child(even) figcaption { margin-inline-end: auto; }
.blicke svg { flex: 1 1 30rem; min-inline-size: 0; max-inline-size: 42rem; }
.blicke figcaption { flex: 0 1 29rem; color: var(--text-muted); }
.blicke figcaption b { display: block; font-size: var(--t2); font-weight: 600; line-height: 1.3; color: var(--text); margin-block-end: var(--space-2); }

.stufen li { display: grid; gap: var(--space-2); align-content: start; }
.stufen li[data-hervor] { box-shadow: 0 0 0 1px var(--border-accent), var(--shadow-small), inset 0 3px 0 var(--border-accent); }
.stufen { --spalte: 16rem; }
.stufen small { display: block; color: var(--text-muted); font-weight: 500; font-size: var(--t-2); letter-spacing: 0.06em; text-transform: uppercase; }
.stufen ul { display: grid; gap: var(--space-2); margin-block-start: var(--space-2); color: var(--text-muted); }
.stufen ul li { display: flex; gap: var(--space-2); align-items: baseline; }
.stufen ul li::before { content: ""; flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--bg-accent); transform: translateY(-2px); }

.formate dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.formate dt { font-weight: 600; margin-block-end: var(--space-2); }
.formate dd { margin: 0; color: var(--text-muted); }
.formate .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-4); }
.formate .chips li {
  padding: 4px 12px; border-radius: 999px; font-size: var(--t-1); font-weight: 500;
  background: var(--bg-hover); border: 1px solid var(--border); color: var(--text);
}

.kachel-liste { --rand: clamp(var(--space-4), 4vw, var(--space-6)); --titel: var(--t2); --text: var(--t0); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: var(--space-6); }
.kachel-liste:has(.vorschau) { --rand: var(--space-4); --titel: var(--t1); --text: var(--t-1); grid-template-columns: repeat(auto-fill, minmax(min(100%, max(17rem, 50% - var(--space-3))), 1fr)); container: karten / inline-size; }
.kachel-liste li {
  position: relative; overflow: clip;
  display: grid; grid-template-columns: var(--rand) minmax(0, 1fr) var(--rand); align-content: start; row-gap: var(--space-2);
  padding-block: var(--rand);
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow-small);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, translate 0.2s ease;
}
.kachel-liste li > * { grid-column: 2; }
.kachel-liste:has(.vorschau) li { grid-row: span 4; grid-template-rows: subgrid; }
.kachel-liste:has(.vorschau) li:has(> dl) { grid-row: span 5; }
@container karten (min-width: 35.5rem) {
  .kachel-liste li:nth-child(odd):last-child {
    grid-column: 1 / -1; grid-row: auto; column-gap: var(--space-6);
    grid-template: "bild ." 1fr "bild kopf" "bild titel" "bild text" "bild ." 1fr / minmax(0, 1fr) minmax(0, 1fr);
  }
  .kachel-liste li:nth-child(odd):last-child:has(> dl) { grid-template-areas: "bild ." "bild kopf" "bild titel" "bild text" "bild mehr" "bild ."; grid-template-rows: 1fr repeat(4, auto) 1fr; }
  .kachel-liste li:nth-child(odd):last-child > * { margin-inline: var(--rand); }
  .kachel-liste li:nth-child(odd):last-child > .vorschau { grid-area: bild; align-self: stretch; block-size: auto; margin: calc(-1 * var(--rand)) 0; border-block-end: 0; border-inline-end: 1px solid var(--border); }
  .kachel-liste li:nth-child(odd):last-child > small { grid-area: kopf; }
  .kachel-liste li:nth-child(odd):last-child > a { grid-area: titel; }
  .kachel-liste li:nth-child(odd):last-child > p { grid-area: text; }
  .kachel-liste li:nth-child(odd):last-child > dl { grid-area: mehr; }
}
.kachel-liste li:hover {
  translate: 0 -2px; border-color: var(--border-accent-soft);
  box-shadow: 0 1px 2px rgba(15, 38, 65, .06), 0 16px 32px -16px rgba(15, 38, 65, .35);
}
.kachel-liste li:has(> a:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.kachel-liste small { font-family: var(--font-mono); font-size: var(--t-2); color: var(--text-muted); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.kachel-liste li > a { font-size: var(--titel); font-weight: 600; line-height: 1.3; color: var(--text); }
.kachel-liste li > a::after { content: ""; position: absolute; inset: 0; }
.kachel-liste li > a:focus-visible { outline: none; }
.kachel-liste li > a:hover { text-decoration: none; }
.kachel-liste li:hover > a { color: var(--text-accent); }
.kachel-liste p { font-size: var(--text); color: var(--text-muted); }
.kachel-liste dl { margin-block-start: var(--space-2); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); font-size: var(--text); }
.kachel-liste dt { font-family: var(--font-mono); font-size: var(--t-2); color: var(--text-muted); letter-spacing: 0.02em; }
.kachel-liste dd { margin: 0; }
.kachel-liste dd + dt { margin-block-start: var(--space-2); }
.kachel-liste dd a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-block-size: var(--finger, 24px); }

.kachel-liste .vorschau {
  grid-column: 1 / -1; inline-size: 100%; block-size: auto; aspect-ratio: 2 / 1;
  margin-block: calc(-1 * var(--rand)) var(--space-2);
  border-block-end: 1px solid var(--border);
  background:
    radial-gradient(ellipse 80% 90% at 50% 50%, transparent 45%, var(--bg-page) 100%),
    radial-gradient(circle, color-mix(in oklab, var(--bg-accent) 14%, transparent) 1px, transparent 1.6px) 0 0 / 16px 16px,
    radial-gradient(ellipse 55% 65% at 50% 45%, color-mix(in oklab, var(--bg-accent) 18%, transparent), transparent 75%),
    var(--bg-page);
}
.kachel-liste .kuerzel { aspect-ratio: 4 / 1; container-type: inline-size; display: grid; place-items: center; }
.kuerzel b { display: inline-flex; align-items: center; gap: 0.3em; font-size: min(8cqw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; color: var(--text-accent); }
.kuerzel .icon { inline-size: 0.75em; block-size: 0.75em; }
.vorschau text { font: 500 12px var(--font-mono); letter-spacing: 0.02em; fill: var(--text-muted); }
.vorschau .vb-tinte { fill: var(--text-accent); font-weight: 650; }
.vorschau .vb-hell { fill: var(--bg-raised); font-weight: 650; }
.vb-karte { fill: var(--bg-raised); stroke: color-mix(in oklab, var(--bg-accent) 24%, transparent); }
.vb-leise { fill: var(--bg-hover); }
.vb-marke { fill: var(--bg-accent); }
.vb-akzent { fill: var(--bg-accent); }
.vb-linie, .vb-netz, .vb-rand, .vb-fliessen { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vb-linie { stroke: color-mix(in oklab, var(--text-muted) 40%, transparent); stroke-width: 1.25; }
.vb-netz { stroke: color-mix(in oklab, var(--bg-accent) 32%, transparent); }
.vb-rand { stroke: color-mix(in oklab, var(--text-muted) 45%, transparent); stroke-dasharray: 4 5; stroke-linecap: butt; }
.vb-fliessen { stroke: var(--bg-accent); stroke-width: 2; stroke-dasharray: 2 6; }
.vb-knopf { fill: var(--bg-raised); stroke: var(--bg-accent); stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) {
  .kachel-liste li:hover .vb-fliessen { animation: vb-fliessen 0.8s linear infinite; }
}
@keyframes vb-fliessen { to { stroke-dashoffset: -8; } }

.ihr-haus { justify-items: center; gap: var(--space-6); }
.ihr-haus > * { inline-size: 100%; max-inline-size: 48rem; margin: 0; }
.ihr-haus > .card { display: grid; gap: var(--space-4); padding: var(--space-8); background: var(--bg-accent-soft); box-shadow: 0 0 0 1px var(--border-accent-soft); container-type: inline-size; }
@media (min-width: 1025px) {
  .ihr-haus { grid-template-columns: minmax(0, 4fr) minmax(28rem, 3fr); align-items: center; gap: var(--space-12); }
  .ihr-haus > * { max-inline-size: none; }
}

.kontakt { padding-block: 0 var(--space-12); font-size: var(--t-1); color: var(--text-muted); }
.kontakt p { border-block-start: 1px solid var(--border); padding-block-start: var(--space-6); }

.angaben { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); }
.angaben dt { color: var(--text-muted); }
.angaben dd { margin: 0; }

.angebot { justify-items: start; }
.angebot h2, .mehr h2 { font-size: var(--t3); }

@media (max-width: 720px) {
  .breite, .vorstellung { padding-inline: var(--space-4); }
  .vorstellung { gap: var(--space-16); }
  .angaben { grid-template-columns: 1fr; gap: 0; }
  .angaben dd { margin-block-end: var(--space-4); }
  .griffe .button { flex: 1 1 100%; }
  .auftakt { padding-block-start: 0; gap: var(--space-4); }
  .auftakt > .fluss { gap: var(--space-3); }
  .ihr-haus > .card { padding: var(--space-6); }
}

@media print {
  :root { --bg-page: #fff; --bg-raised: #fff; }
  .site-header, .kontakt, .skip-link, .griffe, .button, .spieler, .rundgang, .fassade, .angebot, .mehr { display: none; }
  .vorstellung { display: block; padding: 0; max-inline-size: none; }
  .vorstellung > * { margin-block-end: var(--space-8); }
  .card, .kachel-liste li { box-shadow: none; }
  tr, dt, dd, li, figure { break-inside: avoid; }
  h2, h3, dt { break-after: avoid; }
  h2 + *, h3 + * { break-before: avoid; }
}

.anfrage { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.anfrage label { display: grid; gap: 6px; min-inline-size: 0; font-weight: 600; font-size: 0.92rem; }
.anfrage label small { font-weight: 400; }
.anfrage .falle { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.anfrage [data-anfrage-status]:empty { display: none; }
.ihr-haus .anfrage [data-anfrage-status] { font-weight: 600; }
@container (min-width: 24rem) {
  .anfrage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anfrage .breit { grid-column: 1 / -1; }
}