/*
Theme Name: Brickwall Senderwahl
Theme URI: https://brickwallstudio.de/
Author: Chinese Berlin
Description: Homepage von Brickwall Studio mit laufenden Räumen im Hero. Fotos, Filme, Clips und Schriften liegen im Theme, nichts muss in die Mediathek.
Version: 1.0.14
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: brickwall-senderwahl
*/

/* Senderwahl. Fast schwarz, weiss, ein Signalrot. Barlow Condensed fuer alles Grosse, Barlow fuer den Text.
   Regel der ganzen Seite: keine Blende, keine Uebergaenge. Was sich aendert, aendert sich im naechsten Bild.
   Hochkant (max-aspect-ratio: 1/1) ist der Normalfall, quer kommt danach. */
@font-face { font-family: "Barlow Condensed"; font-weight: 500; src: url("assets/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; src: url("assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow"; font-weight: 400; src: url("assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow"; font-weight: 500; src: url("assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); font-display: swap; }

:root {
  --grund: #0a0a0b;
  --weiss: #fff;
  --leise: rgba(255, 255, 255, .64);
  --linie: rgba(255, 255, 255, .24);
  --signal: #e5262a;
  --schmal: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --breit: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --rand: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --kopf: 56px;
  --fuge: 4px;
  --luft: clamp(72px, 10vw, 176px);
  --luft-k: clamp(44px, 6vw, 104px);
  --leiste: calc(76px + env(safe-area-inset-bottom));
  --band-mitte: 50%;
  --knopf-b: 172px;

  /* Der Film ist weich, milchig und bei Tag gedreht, die Fotos sind scharf, satt und bei Nacht. Das zieht ihn an sie heran. */
  --g-film: contrast(1.22) saturate(1.25) brightness(.93);
  --g-tag: contrast(1.22) saturate(1.2) brightness(.84);

  /* Unter dem Namen: Hochkant steht noch die Zeile mit Flaeche und Knopf darunter */
  --sockel: 62px;
  --verlauf: linear-gradient(to top, rgba(10, 10, 11, .94) 0, rgba(10, 10, 11, .84) calc(var(--sockel) + var(--riese) * .5), rgba(10, 10, 11, .5) calc(var(--sockel) + var(--riese) * .82), rgba(10, 10, 11, 0) calc(var(--sockel) + var(--riese) * 1.3));

  /* Name des Raums: die breiteste Fassung (STUDIO B) misst 3,17 em */
  --riese: min(calc((100vw - 2 * var(--rand)) / 3.24), 17vh);
}
@supports (height: 1svh) { :root { --riese: min(calc((100vw - 2 * var(--rand)) / 3.24), 17svh); } }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: var(--kopf); background: var(--grund); }
html:has(dialog[open]), html.menue-offen { overflow: hidden; }
body { margin: 0; background: var(--grund); color: var(--weiss); font: 400 18px/1.45 var(--breit); font-kerning: normal; overflow-x: clip; }
img, video, svg, picture { display: block; }
img, video { max-width: 100%; }
h1, h2, h3, h4, p, ul, figure { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
address { font-style: normal; }
.nb { white-space: nowrap; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg { fill: currentColor; }
::selection { background: var(--signal); color: #fff; }

:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px #000; }
.kopf :focus-visible, .leiste :focus-visible, .knopf.gross:focus-visible { outline-offset: -5px; box-shadow: inset 0 0 0 5px #000; }
.foto:focus-visible { outline: none; box-shadow: none; }
.foto:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 5px solid #fff; outline: 3px solid #000; outline-offset: -8px; }
/* Schwarzblende bei Spruengen innerhalb der Seite. Der Kopf bleibt darueber stehen. */
.schwarzblende { position: fixed; inset: 0; z-index: 19; background: var(--grund); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .42s ease-out, visibility 0s linear .42s; }
.schwarzblende.zu { opacity: 1; visibility: visible; transition: opacity .26s ease-in, visibility 0s; }
.schwarzblende.sofort { transition: none; }
.skip { position: fixed; left: var(--rand); top: -80px; z-index: 50; background: #fff; color: #000; padding: 12px 16px; font-weight: 500; }
.skip:focus { top: 8px; }

/* ---------- Kopf ---------- */
.kopf { position: fixed; z-index: 20; left: 0; right: 0; top: 0; height: var(--kopf); display: flex; align-items: stretch; background: var(--grund); }
/* Ueber dem Film ist der Kopf durchsichtig und auch fuer den Finger durchlaessig: Raeume ansehen liegt hochkant in seiner Zeile */
.js .kopf.ueber-film { background: none; pointer-events: none; }
.js .kopf.ueber-film > * { pointer-events: auto; }
.marke { display: flex; align-items: center; gap: 10px; padding: 0 var(--rand); margin-right: auto; color: #fff; }
.logo-zeichen { width: 30px; aspect-ratio: 808 / 660; flex: none; }
.logo-wort { width: 118px; aspect-ratio: 3768 / 504; flex: none; }
.haupt { display: none; }
.haupt a { text-decoration: none; }
.menue-direkt { display: none; }
.buchen { display: flex; align-items: center; padding: 0 14px; background: var(--signal); color: #fff; font: 600 20px/1 var(--schmal); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.js .kopf.ohne-buchen .buchen { display: none; }
.menue-knopf { display: none; }
.js .menue-knopf { display: flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--rand) 0 14px; font: 600 20px/1 var(--schmal); text-transform: uppercase; white-space: nowrap; }
.js.menue-offen .kopf { background: var(--grund); }
.js.menue-offen .kopf .buchen { display: none; }
.js.menue-offen .haupt { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; position: fixed; left: 0; right: 0; top: var(--kopf); bottom: 0; background: var(--grund); padding: 12px var(--rand) calc(var(--rand) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.js.menue-offen .haupt ul a { display: flex; align-items: center; min-height: 52px; font: 600 min(13.5vw, 9.2svh)/1.02 var(--schmal); text-transform: uppercase; }
.js.menue-offen .haupt ul a[aria-current="true"] { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 4px; text-underline-offset: .12em; }
.js.menue-offen .menue-direkt { display: grid; }
.menue-direkt a { display: block; padding: 12px 0; border-top: 1px solid var(--linie); font: 600 min(calc((100vw - 2 * var(--rand)) / 9), 44px)/1.08 var(--schmal); white-space: nowrap; }
.menue-direkt a span { display: block; font: 500 16px/1.3 var(--breit); color: var(--leise); }
html:not(.js) .kopf { position: static; flex-wrap: wrap; height: auto; }
html:not(.js) .haupt { display: block; flex: 0 0 100%; order: 5; }
html:not(.js) .haupt ul { display: flex; flex-wrap: wrap; }
html:not(.js) .haupt ul a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--rand); font: 500 20px/1 var(--schmal); }

@media (max-width: 389px) { .logo-zeichen { display: none; } }
@media (max-width: 359px) {
  .logo-wort { width: 96px; }
  .buchen { padding: 0 10px; font-size: 18px; }
  .js .menue-knopf { padding: 0 12px 0 10px; font-size: 18px; }
}

/* ---------- Die Buehne ---------- */
.sender, .raum-held { position: relative; display: flex; flex-direction: column; justify-content: flex-end; background: var(--grund); overflow: hidden; touch-action: pan-y pinch-zoom; }
.sender { height: 100vh; height: 100svh; min-height: 460px; }
.raum-held { height: calc(100vh - var(--kopf)); height: calc(100svh - var(--kopf)); min-height: 420px; }
.film { position: absolute; left: 0; right: 0; top: 0; bottom: var(--leiste); overflow: hidden; background: var(--grund); }
/* Dunkel nur, wo Schrift steht. Die Werte sind gemessen, siehe KONZEPT.md */
.sender .film::after, .raum-held .film::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 10, 11, .82) 0, rgba(10, 10, 11, .6) calc(var(--kopf) * .8), rgba(10, 10, 11, 0) calc(var(--kopf) * 1.9)),
    var(--verlauf);
}
.raum-held .film::after { background: var(--verlauf); }
.stand, .stand img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stand img { object-fit: cover; object-position: var(--fok-q, 50% 50%); }
.stand.gefilmt img { filter: var(--g-film); }
.stand.gefilmt.tag img { filter: var(--g-tag); }
.lage { position: absolute; inset: 0; z-index: 1; background: var(--grund); overflow: hidden; }
.lage.an { z-index: 2; }
.lage video, .lage img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fok, 50% 50%); user-select: none; -webkit-user-drag: none; }
.lage.an.lage-film video, .lage.an.lage-film img { filter: var(--g-film); }
.lage.an.lage-film.tag video, .lage.an.lage-film.tag img { filter: var(--g-tag); }
.lage-foto img { will-change: transform; }
.fenster { position: absolute; left: 0; top: var(--band-mitte); width: calc(100% / var(--band)); aspect-ratio: 16 / 9; translate: 0 -50%; }

/* Am Telefon fuellt jedes Bild den ganzen Schirm, ohne schwarze Balken */
@media (max-aspect-ratio: 1/1) {
  .stand img { object-position: var(--fok-h, 50% 50%); }
}

.sender-oben { position: absolute; z-index: 6; left: 0; right: var(--rand); top: calc(var(--kopf) + 2px); }
/* Bauchbinden: harte Platten statt Verlauf. So bleibt der Film oben hell, und die Schrift steht auf jedem Bild gleich sicher. */
.sender-oben h1 { font: 500 clamp(26px, 7.4vw, 56px)/1.2 var(--schmal); max-width: calc(9.4em + var(--rand)); }
.platte { background: var(--grund); padding: 0 .28em 0 var(--rand); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.zusatz { margin-top: 4px; font: 500 16px/1 var(--breit); display: flex; flex-wrap: wrap; gap: 4px; align-items: stretch; }
.zusatz > span { display: flex; align-items: center; min-height: 30px; padding: 0 .55em 0 var(--rand); background: var(--grund); }
.zusatz strong { font-weight: 500; margin-right: .3em; }
/* Hochkant steht Raeume ansehen in der Zeile des Kopfs, so bleibt mehr vom Film frei */
.sprung { position: absolute; top: calc(-2px - var(--kopf)); right: calc(74px - var(--rand)); display: flex; align-items: center; height: var(--kopf); min-height: 44px; padding: 0 2px; font-weight: 500; text-underline-offset: 4px; text-decoration-thickness: 2px; white-space: nowrap; }

.sender-unten { position: relative; z-index: 6; }
.kennung { position: relative; z-index: 6; display: block; padding: 0 var(--rand) 8px; color: #fff; text-decoration: none; }
.kennung-name { display: block; margin: -.05em 0 .05em; text-indent: calc(var(--l, .032) * -1em); font: 600 var(--riese)/.7 var(--schmal); text-transform: uppercase; letter-spacing: -.012em; white-space: nowrap; }
.kennung-flaeche { display: flex; align-items: center; min-height: 52px; margin-top: 10px; font: 500 calc(var(--riese) * .36)/1 var(--schmal); white-space: nowrap; }
.kennung-klein { display: block; font: 500 calc(var(--riese) * .3)/1 var(--schmal); margin-bottom: .16em; }

/* ---------- Der Schalter ---------- */
.leiste { position: relative; z-index: 6; flex: none; display: grid; grid-template-columns: minmax(0, 1fr); height: var(--leiste); padding: 0 var(--rand) env(safe-area-inset-bottom); background: var(--grund); }
.schalter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; min-width: 0; height: 100%; }
.leiste-licht .schalter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kanal { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 44px; color: var(--leise); text-decoration: none; text-align: left; }
.balken { flex: none; display: block; width: 100%; height: 3px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; }
.balken.vorbei i { background: rgba(255, 255, 255, .7); }
.kanal-name { flex: 1; display: flex; align-items: center; font: 600 min(calc((100vw - 2 * var(--rand) - 12px) / 3 / 3.5), 48px)/1 var(--schmal); text-transform: uppercase; white-space: nowrap; }
.kanal[aria-pressed="true"], .kanal[aria-current="true"] { color: #fff; }
.kanal[aria-pressed="true"] .balken i, .kanal[aria-current="true"] .balken i { background: var(--signal); }
.leiste-licht .kanal[aria-pressed="true"] .balken i, html:not(.js) .kanal[aria-pressed="true"] .balken i, html:not(.js) .kanal[aria-current="true"] .balken i { transform: scaleX(1); }
/* Im Stand laeuft nichts: Der aktuelle Raum zeigt seine Linie ganz. Die Linie setzt sonst das Skript. */
.im-stand .kanal[aria-pressed="true"] .balken i, .im-stand .kanal[aria-current="true"] .balken i { transform: scaleX(1) !important; }
.halt { position: absolute; right: var(--rand); bottom: calc(100% + 12px); display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; color: #fff; background: var(--grund); border: 1px solid rgba(255, 255, 255, .5); }
.sender .halt { right: calc(var(--knopf-b) + 8px); }
.halt svg { width: 16px; height: 16px; flex: none; }
.halt .i-spiel { display: none; }
.halt.steht .i-pause { display: none; }
.halt.steht .i-spiel { display: block; }
.halt-text { display: none; font: 500 20px/1 var(--schmal); }
html:not(.js) .halt { display: none; }

.knopf, .formular-cf7 .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 18px; background: var(--signal); color: #fff; font: 600 26px/1 var(--schmal); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.knopf.gross { position: absolute; z-index: 7; right: 0; bottom: calc(var(--leiste) + 8px); width: var(--knopf-b); height: 52px; padding: 0; }

/* ---------- Unter dem Film ---------- */
.willkommen { padding: var(--luft) var(--rand); display: grid; gap: 28px; }
.block-kopf h2, .kuenstler h2, .gear h3 { text-indent: -.054em; }
.willkommen h2, .block-kopf h2, .kuenstler h2, .gear h3 { font: 600 clamp(52px, 15vw, 96px)/.92 var(--schmal); text-transform: uppercase; letter-spacing: -.006em; }
.willkommen p { font: 400 21px/1.36 var(--breit); max-width: 34em; }

.raum-text { padding: var(--luft-k) var(--rand); display: grid; gap: 32px; }
.gross-text { font: 400 clamp(23px, 6.3vw, 30px)/1.24 var(--breit); }
.lead { font: 600 clamp(40px, 11.4vw, 64px)/.98 var(--schmal); margin-bottom: .34em; text-transform: uppercase; }
.zeilen { display: grid; align-content: start; }
.zeile { display: flex; align-items: center; min-height: 58px; padding: 10px 0; border-top: 1px solid var(--linie); font: 500 25px/1.1 var(--schmal); color: #fff; text-decoration: none; }
.zeilen .zeile:last-child { border-bottom: 1px solid var(--linie); }
.ausstattung { display: flex; flex-wrap: wrap; gap: 4px 22px; font: 500 25px/1.3 var(--schmal); }

.reihe { display: grid; gap: var(--fuge); margin-bottom: var(--fuge); }
.foto { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; cursor: zoom-in; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.t-hoch { aspect-ratio: 4 / 5; }
.t-ganz { aspect-ratio: 3 / 2; }

.tagnacht { margin-bottom: var(--fuge); }
.tn { position: relative; overflow: hidden; background: #000; container-type: size; height: min(calc(100svh - var(--kopf) - var(--leiste)), 118vw); min-height: 280px; }
.tn-platte { --s: 1.22; --fx: .3; --fy: .66; --b: max(calc(100cqw * var(--s)), calc(150cqh * var(--s))); position: absolute; width: var(--b); aspect-ratio: 3 / 2; left: calc((100cqw - var(--b)) * var(--fx)); top: calc((100cqh - var(--b) / 1.5) * var(--fy)); }
.tn-platte .foto { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; overflow: visible; }
/* Registrierung: LD1 bleibt, L1Night wird eingepasst */
.lage-nacht { transform: translate(1.714%, 3.644%) rotate(1.9deg) scale(.946); }
.js .tn[data-licht="nacht"] .lage-tag, .js .tn[data-licht="tag"] .lage-nacht { visibility: hidden; }
.tn:has(.foto:focus-visible)::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 5px solid #fff; outline: 3px solid #000; outline-offset: -8px; pointer-events: none; }
.tn .foto:focus-visible::after { content: none; }
html:not(.js) .tn { height: auto; min-height: 0; container-type: normal; overflow: visible; }
html:not(.js) .tn-platte { position: static; width: auto; display: grid; gap: var(--fuge); aspect-ratio: auto; }
html:not(.js) .tn-platte .foto { position: relative; inset: auto; aspect-ratio: 3 / 2; height: auto; transform: none; overflow: hidden; }
html:not(.js) .leiste-licht { display: none; }

.alle-zeile { display: flex; align-items: center; min-height: 72px; padding: 14px var(--rand); margin-bottom: var(--luft-k); border-bottom: 1px solid var(--linie); font: 600 clamp(32px, 9vw, 96px)/1 var(--schmal); text-transform: uppercase; text-decoration: none; color: #fff; }
.rundgang { padding: 0 var(--rand) var(--luft-k); display: grid; gap: 12px; scroll-margin-top: 24px; }
.rundgang figcaption { font: 500 25px/1.1 var(--schmal); }
.rundgang video { width: 100%; height: auto; background: #000; }

.gear { padding: var(--luft-k) var(--rand); }
.gear h3 { margin-bottom: 28px; }
.blatt { display: grid; gap: 36px; }
.blatt-spalte { display: grid; gap: 36px; align-content: start; }
.gruppe h4 { font: 600 24px/1.1 var(--schmal); padding-bottom: 8px; border-bottom: 2px solid #fff; overflow-wrap: anywhere; }
.gruppe li { display: grid; grid-template-columns: 2em minmax(0, 1fr); padding: 7px 0; border-bottom: 1px solid var(--linie); font: 400 17px/1.3 var(--breit); }
.anzahl { font-weight: 500; font-variant-numeric: tabular-nums; }

.leistungen { padding: var(--luft) var(--rand); display: grid; gap: 28px; border-top: 1px solid var(--linie); }
.block-kopf p { font: 400 21px/1.36 var(--breit); margin-top: 14px; }
.leistung-liste li { padding: .16em 0; border-top: 1px solid var(--linie); font: 500 min(12vw, 56px)/1.06 var(--schmal); }
.leistung-liste li:last-child { border-bottom: 1px solid var(--linie); }

.kuenstler { padding: 0 var(--rand) var(--luft); }
.kuenstler h2 { margin-bottom: 14px; }
.kuenstler p { font: 400 21px/1.36 var(--breit); margin-bottom: 28px; }
.namen li { overflow-wrap: anywhere; text-indent: calc(var(--l, .04) * -1em); padding: .14em 0; border-top: 1px solid var(--linie); font: 600 calc((100vw - 2 * var(--rand)) / 5.9 * var(--namen-faktor, 1))/1.02 var(--schmal); text-transform: uppercase; }
.namen li:last-child { border-bottom: 1px solid var(--linie); }

.schluss { position: relative; height: 72vh; height: 72svh; background: var(--grund); }
.schluss .film { bottom: 0; }

.kontakt { padding: var(--luft) var(--rand); }
.kontakt h2 { text-indent: -.017em; font: 600 calc((100vw - 2 * var(--rand)) / 4.99)/.8 var(--schmal); text-transform: uppercase; letter-spacing: -.012em; white-space: nowrap; margin-bottom: 36px; }
.kontakt-raster { display: grid; gap: 44px; }
.kontakt-direkt { display: grid; gap: 0; align-content: start; }
.grosslink { display: block; padding: 10px 0 12px; border-top: 1px solid var(--linie); font: 600 min(calc((100vw - 2 * var(--rand)) / 8.8), 76px)/1.06 var(--schmal); color: #fff; text-decoration: none; white-space: nowrap; }
.grosslink span { display: block; font: 500 16px/1.4 var(--breit); color: var(--leise); }
.daten { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--linie); font: 400 18px/1.45 var(--breit); }
.daten-links { display: grid; justify-items: start; }
.daten-links a { display: flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.kontakt-lead { font: 400 21px/1.36 var(--breit); margin-bottom: 24px; }
.formular { display: grid; gap: 18px; overflow-anchor: none; }
.feld label { display: block; margin-bottom: 6px; font: 500 22px/1.15 var(--schmal); }
.feld label span { color: var(--leise); }
.feld input, .feld textarea, .formular-cf7 input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]), .formular-cf7 textarea { display: block; width: 100%; min-height: 54px; padding: 12px 14px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); border-radius: 0; font: 400 18px/1.35 var(--breit); }
.feld textarea, .formular-cf7 textarea { resize: vertical; min-height: 7em; }
.feld input:focus-visible, .feld textarea:focus-visible, .formular-cf7 input:focus-visible, .formular-cf7 textarea:focus-visible { outline-offset: 0; box-shadow: none; }
.feld [aria-invalid="true"] { border: 2px solid var(--signal); }
.fehler { display: inline-block; margin-top: 8px; padding: 3px 8px; background: var(--signal); color: #fff; font: 500 16px/1.3 var(--breit); }
.fehler[hidden] { display: none; }
.senden, .formular-cf7 .wpcf7-submit { min-height: 60px; width: 100%; justify-content: flex-start; font-size: 30px; }
.hinweis { font: 400 16px/1.4 var(--breit); color: var(--leise); }

.fuss { display: grid; gap: 14px; padding: 28px var(--rand) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); font: 400 16px/1.4 var(--breit); }
.fuss-logo { display: flex; align-items: center; gap: 10px; width: fit-content; color: #fff; min-height: 44px; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.fuss-links a { display: flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.fuss-recht { color: var(--leise); }

/* ---------- Galerie ---------- */
.galerie { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; height: 100dvh; max-height: 100dvh; background: #000; color: #fff; overflow: hidden; touch-action: pinch-zoom; }
.galerie.gezoomt { touch-action: auto; }
.galerie[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.galerie::backdrop { background: #000; }
.g-kopf, .g-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px var(--rand); }
.g-fuss { align-items: flex-end; }
.g-zaehler { font: 600 clamp(32px, 4vw, 64px)/1 var(--schmal); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-bild { min-height: 0; padding: 0 var(--rand); display: flex; align-items: center; justify-content: center; container-type: size; }
.g-rahmen { --r: 1.5; width: min(100%, calc((100vh - 240px) * var(--r))); width: min(100cqw, calc(100cqh * var(--r))); aspect-ratio: var(--r); position: relative; overflow: hidden; }
.g-rahmen img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.g-text { font: 400 clamp(16px, 1.25vw, 20px)/1.3 var(--breit); max-width: 62ch; min-height: var(--text-h, 0); }
.g-pfeile { display: flex; gap: 8px; flex: none; }
.g-knopf { width: clamp(52px, 4.4vw, 72px); height: clamp(52px, 4.4vw, 72px); display: grid; place-items: center; border: 1px solid #fff; color: #fff; flex: none; }
.g-knopf svg { width: 44%; height: 44%; }
@media (max-height: 500px) {
  .g-zaehler { font-size: 28px; }
  .g-knopf { width: 44px; height: 44px; }
  .g-kopf, .g-fuss { padding-block: 4px; }
  .g-text { font-size: 14px; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1001/1000) {
  .galerie[open] { grid-template-columns: minmax(0, 1fr) clamp(190px, 30vw, 300px); grid-template-rows: auto minmax(0, 1fr); }
  .g-bild { grid-column: 1; grid-row: 1 / -1; padding: 0; }
  .g-kopf { grid-column: 2; grid-row: 1; }
  .g-fuss { grid-column: 2; grid-row: 2; flex-direction: column; align-items: stretch; justify-content: flex-end; min-height: 0; }
  .g-pfeile { justify-content: flex-end; }
}

/* ---------- Unterseite ---------- */
.unterseite main { padding-top: var(--kopf); }
.recht-block { padding: var(--luft-k) var(--rand) 0; display: grid; gap: 20px; }
.recht-block:last-child { padding-bottom: var(--luft); }
.recht-block h1, .recht-block h2 { font: 600 clamp(52px, 15vw, 96px)/.92 var(--schmal); text-transform: uppercase; }
.recht-text { display: grid; gap: 16px; max-width: 40em; font: 400 19px/1.45 var(--breit); }
.recht-text a { overflow-wrap: anywhere; }
.entwurf { padding: 14px 16px; border: 1px solid var(--linie); }

/* ---------- Quer ---------- */
@media (min-aspect-ratio: 1001/1000) {
  :root {
    --rand: max(clamp(16px, 2.8vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right));
    --leiste: calc(clamp(60px, 10.5vh, 112px) + env(safe-area-inset-bottom));
    --riese: min(calc((100vw - 2 * var(--rand)) / 4.72), 27vh);
    --sockel: 0px;
    --verlauf: linear-gradient(to top, rgba(10, 10, 11, .86) 0, rgba(10, 10, 11, .72) calc(var(--riese) * .5), rgba(10, 10, 11, .34) calc(var(--riese) * .84), rgba(10, 10, 11, 0) calc(var(--riese) * 1.26));
  }
  @supports (height: 1svh) { :root { --riese: min(calc((100vw - 2 * var(--rand)) / 4.72), 27svh); } }
  .sender-oben h1 { font-size: clamp(28px, 3.1vw, 56px); max-width: none; }
  .zusatz { font-size: clamp(16px, 1.25vw, 22px); }
  .zusatz > span { min-height: 44px; }
  .sprung { position: static; height: auto; padding: 0 .55em; background: var(--grund); }
  .sender-unten { --knopf-breite: clamp(170px, 20vw, 340px); }
  .kennung { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: clamp(8px, 1.6vh, 18px); }
  .kennung-flaeche { display: block; min-height: 0; margin: 0; font-size: calc(var(--riese) * .5); line-height: .7; }
  .kennung-klein { position: absolute; left: var(--rand); bottom: calc(var(--riese) * .7 + clamp(8px, 1.6vh, 18px) + .3em); font-size: calc(var(--riese) * .2); margin: 0; }
  .raum-held .kennung { padding-bottom: clamp(8px, 1.6vh, 18px); }
  .sender .leiste { padding-right: calc(var(--knopf-breite) + 12px); }
  .leiste { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .leiste-licht { grid-template-columns: minmax(0, 1fr); }
  .halt, .sender .halt { position: static; align-self: center; }
  .kanal-name { font-size: min(calc(var(--leiste) * .5), calc((100vw - 2 * var(--rand) - var(--knopf-breite, 0px) - 150px) / 3 / 3.3)); }
  .raum-held .kanal-name, .leiste-licht .kanal-name { font-size: min(calc(var(--leiste) * .5), calc((100vw - 2 * var(--rand) - 150px) / 3 / 3.3)); }
  .knopf.gross { right: 0; bottom: 0; height: var(--leiste); width: var(--knopf-breite); padding-bottom: env(safe-area-inset-bottom); font-size: clamp(22px, 3vw, 54px); }
  .halt { padding: 0 12px; height: 48px; }
  .reihe { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .r-voll > .foto { grid-column: 1 / -1; }
  .v-weit { aspect-ratio: 16 / 9; max-height: calc(100vh - var(--kopf)); width: 100%; }
  .v-band { aspect-ratio: 21 / 9; }
  .t-hoch { aspect-ratio: auto; }
  .r-8-4 > :first-child { grid-column: span 8; aspect-ratio: 3 / 2; } .r-8-4 > :last-child { grid-column: span 4; height: 100%; }
  .r-4-8 > :first-child { grid-column: span 4; height: 100%; } .r-4-8 > :last-child { grid-column: span 8; aspect-ratio: 3 / 2; }
  .r-7-5 > :first-child { grid-column: span 7; aspect-ratio: 3 / 2; } .r-7-5 > :last-child { grid-column: span 5; height: 100%; }
  .r-5-7 > :first-child { grid-column: span 5; height: 100%; } .r-5-7 > :last-child { grid-column: span 7; aspect-ratio: 3 / 2; }
  .tn { height: calc(100svh - var(--kopf) - var(--leiste)); }
  .tn-platte { --s: 1.17; --fx: .76; }
}

/* ---------- Ab hier reicht der Platz fuer Spalten ---------- */
@media (min-width: 700px) {
  .willkommen h2, .block-kopf h2, .kuenstler h2, .gear h3, .recht-block h1, .recht-block h2 { font-size: clamp(64px, 8.4vw, 148px); }
  .blatt { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 44px); }
  .formular { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .formular .ganz, .formular .hinweis { grid-column: 1 / -1; }
  .senden, .formular-cf7 .wpcf7-submit { width: auto; min-width: 260px; grid-column: 1 / -1; justify-self: start; }
  .fuss { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 28px; }
  .fuss-recht { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  :root { --kopf: 72px; }
  .js .menue-knopf { display: none; }
  .haupt, .js .haupt { display: flex; }
  .haupt ul { display: flex; align-items: stretch; height: 100%; }
  .haupt li { display: flex; }
  .haupt ul a { position: relative; display: flex; align-items: center; padding: 0 clamp(8px, 1.1vw, 20px); font: 500 clamp(24px, 1.75vw, 28px)/1 var(--schmal); }
  .haupt ul a[aria-current="true"]::after { content: ""; position: absolute; left: clamp(8px, 1.1vw, 20px); right: clamp(8px, 1.1vw, 20px); bottom: 0; height: 4px; background: var(--signal); }
  .kopf.ohne-buchen .haupt { padding-right: calc(var(--rand) - clamp(8px, 1.1vw, 20px)); }
  .logo-zeichen { width: 38px; }
  .logo-wort { width: clamp(130px, 11vw, 170px); }
  .buchen { padding: 0 clamp(16px, 1.8vw, 30px); font-size: clamp(22px, 1.8vw, 28px); }
}
@media (min-width: 900px) {
  .halt-text { display: inline; }
  .halt, .sender .halt { min-width: 118px; } /* Pause und Abspielen brauchen denselben Platz, sonst springen die Linien */
  .willkommen { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 44px); align-items: end; }
  .willkommen h2 { grid-column: 1 / span 8; }
  .willkommen p { grid-column: 9 / -1; font-size: clamp(19px, 1.6vw, 26px); }
  .raum-text { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 44px); row-gap: 28px; align-items: start; }
  .gross-text { grid-column: 1 / span 8; font-size: clamp(26px, 2.9vw, 50px); line-height: 1.2; }
  .lead { font-size: clamp(48px, 6vw, 104px); }
  .zeilen { grid-column: 9 / -1; }
  .zeile { font-size: clamp(22px, 1.9vw, 30px); }
  .ausstattung { grid-column: 1 / span 8; font-size: clamp(25px, 2.2vw, 36px); }
  .rundgang { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 44px); align-items: start; }
  .rundgang figcaption { grid-column: 1 / span 4; font-size: clamp(25px, 2.4vw, 42px); }
  .rundgang video { grid-column: 5 / -1; }
  .alle-zeile { font-size: clamp(44px, 6.4vw, 112px); }
  .blatt { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gruppe h4 { font-size: clamp(22px, 1.8vw, 28px); }
  .gruppe li { font-size: clamp(16px, 1.2vw, 20px); }
  .leistungen { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 44px); }
  .block-kopf { grid-column: 1 / span 4; }
  .block-kopf h2 { font-size: clamp(64px, 6.6vw, 120px); }
  .block-kopf p { font-size: clamp(19px, 1.6vw, 26px); }
  .leistung-liste { grid-column: 5 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2.4vw, 44px); align-content: start; }
  .leistung-liste li { font-size: clamp(38px, 4.3vw, 76px); }
  .leistung-liste li:nth-last-child(2) { border-bottom: 1px solid var(--linie); }
  .namen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 44px); }
  .namen li { font-size: calc(((100vw - 2 * var(--rand)) - 2 * clamp(20px, 2.4vw, 44px)) / 3 / 5.95 * var(--namen-faktor, 1)); }
  .namen li:nth-last-child(-n+3) { border-bottom: 1px solid var(--linie); }
  .schluss { height: auto; aspect-ratio: 16 / 9; max-height: 100vh; }
  .kontakt-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 44px); }
  .kontakt-direkt { grid-column: 1 / span 6; }
  .kontakt-form { grid-column: 7 / -1; }
  .grosslink { font-size: min(calc(((100vw - 2 * var(--rand)) / 2 - 24px) / 8.8), 84px); }
  .kontakt-lead { font-size: clamp(19px, 1.6vw, 26px); }
  .recht-block { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 44px); }
  .recht-block h1, .recht-block h2 { grid-column: 1 / span 6; font-size: clamp(64px, 6vw, 110px); }
  .recht-text { grid-column: 7 / -1; }
}

/* ---------- Flache Fenster: Telefon quer ---------- */
@media (max-height: 500px) and (min-aspect-ratio: 1001/1000) {
  :root { --riese: min(calc((100vw - 2 * var(--rand)) / 4.72), 26vh); --leiste: calc(56px + env(safe-area-inset-bottom)); }
  .sender-oben h1 { font-size: 26px; max-width: none; }
  .zusatz { margin-top: 0; font-size: 15px; }
  .sprung { min-height: 44px; }
  .sender, .raum-held { min-height: 320px; }
}

/* ---------- Hover nur mit Maus. Hart, ohne Uebergang. ---------- */
@media (hover: hover) {
  .kanal:hover { color: #fff; }
  .haupt ul a:hover, .zeile:hover, .alle-zeile:hover, .fuss-links a:hover, .daten-links a:hover, .grosslink:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
  .sprung:hover { background: #fff; color: #000; }
  .knopf:hover, .buchen:hover, .formular-cf7 .wpcf7-submit:hover { background: #fff; color: #000; }
  .halt:hover { background: #fff; color: #000; }
  .g-knopf:hover { background: #fff; color: #000; }
  .kennung:hover .kennung-name { text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .06em; }
}
.knopf:active, .buchen:active, .halt:active, .g-knopf:active { background: #fff; color: #000; }

/* ---------- Erzwungene Farben ---------- */
@media (forced-colors: active) {
  .knopf, .buchen, .halt, .g-knopf { border: 2px solid transparent; }
  .balken { background: CanvasText; }
  .balken i { background: Highlight; }
  .kanal[aria-pressed="true"], .kanal[aria-current="true"] { color: Highlight; }
}

/* Telefon hochkant: das Mikrofon darf gross sein */
@media (max-aspect-ratio: 1/1) {
  .t-hoch-1 { aspect-ratio: 4 / 5; }
}

/* Der Ring um den Schalter liegt aussen: Innen wuerde er die Schrift an der Kante schneiden */
.leiste .kanal:focus-visible { outline-offset: 3px; box-shadow: none; }

/* Tablet hochkant: mehr Platz, groessere Bedienung. Ab 1000 px Breite steht die Navigation im Kopf, Raeume ansehen geht zurueck unter den Claim. */
@media (max-aspect-ratio: 1/1) and (min-width: 700px) {
  :root { --rand: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); --knopf-b: 260px; --sockel: 90px; --leiste: calc(96px + env(safe-area-inset-bottom)); }
  .knopf.gross { height: 72px; font-size: 38px; }
  .kennung-flaeche { min-height: 72px; }
  .halt, .sender .halt { bottom: calc(100% + 22px); }
  .zusatz { font-size: 18px; }
}
@media (min-width: 1000px) {
  .sprung { position: static; height: auto; padding: 0 .55em; background: var(--grund); }
}

/* WordPress: Werkzeugleiste für angemeldete Nutzer */
.admin-bar .kopf { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .kopf { top: 46px; }
  /* Sonst bricht die Leiste um und der Avatar liegt auf dem Menü Knopf */
  #wpadminbar #wp-admin-bar-customize, #wpadminbar #wp-admin-bar-duplicate-post { display: none; }
}

/* WordPress: Contact Form 7 im Stil des Formulars */
.formular-cf7 form { display: grid; gap: 18px; overflow-anchor: none; }
.formular-cf7 form > p { margin: 0; }
.formular-cf7 label { display: block; font: 500 22px/1.15 var(--schmal); }
.formular-cf7 label br { display: none; }
.formular-cf7 .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.formular-cf7 .hidden-fields-container { display: none; }
.formular-cf7 .wpcf7-submit { border: 0; cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; }
.formular-cf7 .wpcf7-not-valid { border-color: var(--signal); }
@media (min-width: 700px) {
  .formular-cf7 form { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .formular-cf7 form > p:nth-of-type(n+3), .formular-cf7 form > .wpcf7-response-output { grid-column: 1 / -1; }
}
.formular-cf7 .wpcf7-spinner { margin-left: 12px; }
.formular-cf7 .wpcf7-not-valid-tip { display: inline-block; margin-top: 8px; padding: 3px 8px; background: var(--signal); color: #fff; font: 500 16px/1.3 var(--breit); }
.formular-cf7 .wpcf7 form .wpcf7-response-output { margin: 0; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .55); color: #fff; font: 400 18px/1.4 var(--breit); }

/* WordPress: Cookie Hinweis in Weiss, mittig im Fenster */
.cookie-hinweis { position: fixed; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; width: min(440px, calc(100vw - 2 * var(--rand))); padding: 12px 14px; background: #fff; color: var(--grund); font: 400 15px/1.35 var(--breit); text-align: left; }
.cookie-hinweis[hidden] { display: none; }
.cookie-hinweis p { flex: 1 1 auto; margin: 0; }
.cookie-hinweis button { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 18px; border: 0; border-radius: 0; background: var(--signal); color: #fff; font: 600 22px/1 var(--schmal); text-transform: uppercase; cursor: pointer; }
.cookie-hinweis button:focus-visible { outline: 3px solid var(--grund); outline-offset: 2px; }
@media (hover: hover) { .cookie-hinweis button:hover { background: #000; color: #fff; } }

/* WordPress: bestehende Seiten wie das Impressum, Inhalt aus dem alten Seitenbauer */
.recht-wp h1 a { color: inherit; text-decoration: none; }
.recht-inhalt { display: block; overflow-wrap: anywhere; }
.recht-inhalt p, .recht-inhalt ul, .recht-inhalt ol { margin: 0 0 16px; text-align: left !important; }
.recht-inhalt h2, .recht-inhalt h3, .recht-inhalt h4 { margin: 32px 0 12px; font: 600 clamp(26px, 3vw, 34px)/1.05 var(--schmal); text-transform: uppercase; text-align: left !important; }
.recht-inhalt strong, .recht-inhalt b { font-weight: 500; }
.recht-inhalt .vc_row, .recht-inhalt .vc_column_container, .recht-inhalt .vc_column-inner, .recht-inhalt .wpb_wrapper, .recht-inhalt .inner, .recht-inhalt .wpb_content_element { float: none; width: 100%; margin: 0; padding: 0; }
.recht-inhalt .vc_column-inner { padding: 0 !important; }
.recht-inhalt .vc_empty_space, .recht-inhalt [class*="yasr"] { display: none; }
#datenschutz { scroll-margin-top: calc(var(--kopf, 64px) + 16px); }