/* ==========================================================================
   Live Sax – Stylesheet (Design A+ „Bühnenlicht verbessert“)
   Farben: Grund #0F0E0D · Fläche #191715 · Linien #2E2A26 · Text #F3EEE6
           Grau #B3AA9E · Messing #D2A65A
   Schriften: Bodoni Moda (Überschriften, kursiv für Akzente) · Manrope (Text)
   Fonts liegen selbst gehostet unter /assets/fonts/ (SIL Open Font License).
   ========================================================================== */

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/assets/fonts/bodoni-moda-latin-opsz-normal.woff2) format("woff2-variations"),
       url(/assets/fonts/bodoni-moda-latin-opsz-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url(/assets/fonts/bodoni-moda-latin-opsz-italic.woff2) format("woff2-variations"),
       url(/assets/fonts/bodoni-moda-latin-opsz-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2-variations"),
       url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0F0E0D;
  --surface: #191715;
  --line: #2E2A26;
  --line-strong: #756D62;
  --text: #F3EEE6;
  --text-soft: #D9D2C7;
  --muted: #B3AA9E;
  --accent: #D2A65A;
  --on-accent: #17130D;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1280px;
  --gutter: 32px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
p a, .prose li a, .subs li a, dd a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
p a:hover, .prose li a:hover, .subs li a:hover, dd a:hover { color: var(--text); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { text-wrap: balance; }
[id] { scroll-margin-top: 88px; }
strong { font-weight: 700; color: var(--text); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--accent); color: var(--on-accent); padding: 12px 16px; font-weight: 700; }
.skip:focus { left: 16px; color: var(--on-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Typografie ---------- */
.eyebrow {
  margin: 0 0 16px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent);
}
.h1 {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 76px); line-height: 1.05; letter-spacing: -0.01em;
}
.h1-home { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.06; }
.h1 .h1-sub { display: block; margin-top: 12px; font-style: italic; font-size: 0.6em; line-height: 1.2; color: var(--accent); }
.h2 {
  margin: 0 0 24px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4vw, 54px); line-height: 1.1;
}
.h2-lg { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05; }
.h2-sm { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.15; }
.h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; }
.h3-sans { margin: 16px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.35; }
.it { font-style: italic; }
.acc { color: var(--accent); }
.nowrap { white-space: nowrap; }
.lead { margin: 32px 0 0; max-width: 34em; font-size: 19px; color: var(--text-soft); }
.soft { color: var(--text-soft); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.prose p { margin: 0 0 20px; color: var(--text-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 20px; padding-left: 1.1em; color: var(--text-soft); }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--accent); }
.measure { max-width: 42em; }

/* ---------- Buttons & Links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 28px;
  font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--text);
  transition: background .25s, color .25s, border-color .25s;
}
.btn-lg { min-height: 56px; padding: 0 30px; }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover { background: #E0BC7A; border-color: #E0BC7A; color: var(--on-accent); }
.btn-outline { border-color: var(--line-strong); color: var(--text); font-weight: 600; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-accent-outline { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.btn-accent-outline:hover { background: var(--accent); color: var(--on-accent); }
.btn svg { flex: none; }
.cta-row { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }
.cta-note { margin: 24px 0 0; font-size: 14px; color: var(--muted); }
.more {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
}
.more:hover { color: var(--text); }
.more-soft { color: var(--text-soft); }
.more-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }

/* ---------- Header & Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(15, 14, 13, 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand span { font-family: var(--serif); font-size: 25px; letter-spacing: 0.02em; }

.main-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 30px; }
.main-nav a, .nav-parent {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text); background: none; border: 0; padding: 0; cursor: pointer;
}
.main-nav a:hover, .nav-parent:hover { color: var(--accent); }
.main-nav .is-active > a, .main-nav .is-active > .nav-parent, .main-nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.nav-parent svg { transition: transform .25s; }
.has-sub { position: relative; }
.sub {
  list-style: none; margin: 0; padding: 10px 0;
  position: absolute; top: 100%; left: -20px; min-width: 250px;
  background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.sub a { display: flex; width: 100%; padding: 8px 20px; min-height: 40px; letter-spacing: 0.08em; }
.sub a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.is-open > .sub { opacity: 1; visibility: visible; transform: none; }
.has-sub:hover > .nav-parent svg, .has-sub.is-open > .nav-parent svg { transform: rotate(180deg); }
.main-nav .nav-cta { background: var(--accent); color: var(--on-accent) !important; padding: 0 22px !important; box-shadow: none !important; }
.main-nav .nav-cta:hover { background: #E0BC7A; }

.mob-actions { display: none; align-items: center; gap: 10px; }
.mob-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mob-cta:hover { color: var(--on-accent); }
.nav-toggle { width: 44px; height: 44px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }

@media (max-width: 1060px) {
  .main-nav > ul { gap: 22px; }
}
@media (max-width: 960px) {
  .mob-actions { display: flex; }
  .main-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 73px); overflow-y: auto;
    padding: 8px var(--gutter) 28px;
  }
  .main-nav.is-open { display: block; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li { border-bottom: 1px solid var(--line); }
  .main-nav a, .nav-parent { width: 100%; min-height: 52px; font-size: 14px; }
  .main-nav .is-active > a, .main-nav .is-active > .nav-parent, .main-nav a[aria-current="page"] { box-shadow: none; }
  .nav-parent { justify-content: space-between; }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: 0; background: none; padding: 0 0 12px 16px; min-width: 0; }
  .has-sub.is-open > .sub { display: block; }
  .has-sub:hover > .sub { display: none; }
  .has-sub.is-open:hover > .sub { display: block; }
  .sub a { padding: 6px 0; min-height: 44px; letter-spacing: 0.06em; text-transform: none; font-size: 16px; font-weight: 500; }
  .nav-cta-item { border-bottom: 0 !important; margin-top: 20px; }
  .main-nav .nav-cta { justify-content: center; min-height: 52px; }
}

/* ---------- Brotkrumen ---------- */
.crumbs { position: relative; padding-top: 28px; font-size: 14px; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(closest-side, rgba(210,166,90,0.15), rgba(210,166,90,0) 70%); pointer-events: none; }
.glow-tr { top: -260px; right: -140px; }
.glow-tl { top: -280px; left: -220px; }
.hero-grid { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 64px; padding-top: 48px; padding-bottom: 104px; }
.hero-home .hero-grid { padding-top: 72px; padding-bottom: 96px; gap: 56px; }
.hero-text { flex: 1 1 520px; min-width: 0; }
.hero-media { flex: 1 1 380px; min-width: 0; position: relative; padding: 0 0 24px 24px; }
.hero-media::before { content: ""; position: absolute; left: 0; bottom: 0; width: 82%; height: 88%; border: 1px solid var(--accent); }
.hero-media img { position: relative; width: 100%; height: 620px; object-fit: cover; object-position: 50% 25%; }
.hero-home .hero-media img { height: 640px; object-position: 50% 30%; }
.hero-text .sublead { margin: 20px 0 0; max-width: 34em; color: var(--muted); }

/* ---------- Abschnitte ---------- */
.sec { padding-top: 128px; }
.sec-sm { padding-top: 104px; }
.band-surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-pad { padding-top: 112px; padding-bottom: 112px; }
.mt-band { margin-top: 136px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.sec-head .h2 { margin: 0; max-width: 15em; }
.sec-head > p { margin: 0; max-width: 26em; color: var(--muted); }
main > :last-child { margin-bottom: 0; }

/* Faktenleiste */
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 40px; padding-top: 32px; padding-bottom: 32px; font-size: 15px; color: var(--muted); }
.facts-grid b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.3; color: var(--text); }

/* Karten (Besetzungen) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); overflow: hidden; color: var(--text); }
.card:hover { color: var(--text); }
.card-feature { border-color: var(--accent); }
.card-img { overflow: hidden; }
.card-img img { width: 100%; height: 300px; object-fit: cover; transition: transform .6s ease; }
.card:hover .card-img img { transform: scale(1.03); }
.card-body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.card-num { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--accent); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 4px 10px; }
.card h3 { margin: 6px 0 10px; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.15; }
.card p { margin: 0 0 18px; color: var(--muted); }
.card .fits { margin-bottom: 24px; font-size: 14px; }
.card .card-more { margin-top: auto; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.card:hover .card-more { color: var(--text); }

/* Drei Akte */
.acts-wrap { position: relative; }
.acts-line { position: absolute; left: 32px; right: 0; top: 32px; height: 1px; background: linear-gradient(90deg, var(--accent), rgba(210,166,90,0.15)); }
.acts { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px 56px; }
.acts li { display: flex; flex-direction: column; gap: 10px; }
.act-num { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--accent); background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--accent); }
.act-time { margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.acts h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.15; }
.act-time + h3 { margin-top: 0; }
.act-num + h3 { margin-top: 14px; }
.acts p { margin: 0 0 8px; color: var(--text-soft); }
.acts .rec { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.acts .rec span { color: var(--accent); }

/* Split: Text + Bild */
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.split-top { align-items: flex-start; }
.split > .split-text { flex: 1 1 460px; min-width: 0; }
.split > .split-media { flex: 1 1 480px; min-width: 0; }
.split-media img { width: 100%; height: 440px; object-fit: cover; }
.split-media.tall img { height: 580px; object-position: 50% 25%; }
.split-text > p { margin: 0 0 20px; color: var(--text-soft); }
.split-text > p.muted { color: var(--muted); }

/* Panel: Fläche mit Bild und Text */
.panel { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); }
.panel-media { flex: 1 1 420px; min-width: 0; }
.panel-media img { width: 100%; height: 100%; min-height: 460px; max-height: 620px; object-fit: cover; }
.panel-body { flex: 1 1 460px; min-width: 0; padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.panel-body > p { margin: 0 0 20px; color: var(--text-soft); }

/* Info-Kacheln / Raster mit Linien */
.occ { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.occ > a, .occ > div { display: flex; flex-direction: column; gap: 8px; padding: 28px; min-height: 150px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background .3s; }
.occ > a:hover { background: var(--surface); color: var(--text); }
.occ .bar { display: block; width: 32px; height: 2px; margin-bottom: 12px; background: var(--accent); }
.occ .t { font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.occ .d { color: var(--muted); font-size: 15px; }
.occ .m { margin-top: auto; padding-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.occ > a:hover .m { color: var(--text); }
.occ-who > div { padding: 32px 28px; }
.occ-who h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; }
.occ-who p { margin: 0; font-size: 16px; color: var(--muted); }

/* Feature-Raster (drei Spalten mit Linie oben) */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px 48px; }
.features > div { border-top: 1px solid var(--accent); padding-top: 24px; }
.features h3 { margin: 10px 0 10px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2; }
.features p { margin: 0; color: var(--muted); }
.features .num { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--accent); }
.features-plain > div { border-top: 0; padding-top: 0; }
.features-plain h3 { font-family: var(--sans); font-size: 19px; font-weight: 700; margin-top: 18px; }

/* Definitionsliste */
.dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 40px; }
.dl > div { padding: 20px 0; border-top: 1px solid var(--line); }
.dl dt { font-family: var(--serif); font-size: 22px; margin-bottom: 6px; }
.dl dd { margin: 0; font-size: 16px; color: var(--muted); }

/* Liste mit fettem Einstieg */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.points li { padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--text-soft); }
.points li strong { display: block; margin-bottom: 4px; font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.3; color: var(--text); }
.points li .more { margin-top: 4px; }
.points-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); column-gap: 48px; }

/* Unterabschnitte mit H3 */
.subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px 48px; }
.subs > div { border-top: 1px solid var(--line); padding-top: 24px; }
.subs > div.feature { border-top-color: var(--accent); }
.subs h3 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2; }
.subs p { margin: 0 0 14px; color: var(--text-soft); }
.subs ul { margin: 0 0 14px; padding-left: 1.1em; color: var(--text-soft); }
.subs li { margin-bottom: 8px; }
.subs li::marker { color: var(--accent); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.chips li { border: 1px solid var(--line); padding: 6px 14px; font-size: 14px; color: var(--text-soft); }

/* Zitat */
.quote { margin: 0 0 24px; font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.4; color: var(--text); }
.quote::before { content: "“"; display: block; font-size: 64px; line-height: 0.6; color: var(--accent); margin-bottom: 8px; }
.quote p { margin: 0; }

/* Hinweisband */
.note-band { border-top: 1px solid var(--accent); border-bottom: 1px solid var(--line); padding: 48px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 56px; }
.note-band > div { flex: 1 1 520px; min-width: 0; }
.note-band p { margin: 0; max-width: 40em; color: var(--text-soft); }

/* Preis-Box */
.price-box { border: 1px solid var(--accent); padding: 44px 40px; background: radial-gradient(circle at 100% 0%, rgba(210,166,90,0.14), rgba(210,166,90,0) 60%); }
.price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; }
.price b { font-family: var(--serif); font-weight: 400; font-size: 76px; line-height: 1; }
.box { background: var(--surface); border: 1px solid var(--line); padding: 36px 40px; }
.box p { margin: 0; color: var(--muted); font-size: 16px; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.row-2 { display: flex; flex-wrap: wrap; gap: 24px; }
.row-2 > * { min-width: 0; }

/* Schritte */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }
.steps li { border-top: 1px solid var(--accent); padding-top: 24px; }
.steps .n { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--accent); }
.steps p { margin: 0; color: var(--muted); }
.after-steps { margin: 40px 0 0; max-width: 46em; color: var(--muted); }

/* FAQ */
.faq-sec { display: flex; flex-wrap: wrap; gap: 48px 72px; }
.faq-sec > .faq-head { flex: 1 1 320px; min-width: 0; }
.faq-sec > .faq-list { flex: 2 1 560px; min-width: 0; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; min-height: 44px; font-family: var(--serif); font-size: 23px; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq .plus { flex: none; transition: transform .3s; }
.faq[open] .plus { transform: rotate(45deg); }
.faq .a { margin: 0 0 24px; max-width: 40em; color: var(--muted); }
.faq .a p { margin: 0 0 12px; }
.faq .a p:last-child { margin: 0; }

/* ---------- Video- und Audio-Facade ---------- */
.media-stack { display: flex; flex-direction: column; gap: 20px; }
.vid { position: relative; background: var(--surface); overflow: hidden; }
.vid iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.facade { all: unset; box-sizing: border-box; cursor: pointer; display: block; position: relative; width: 100%; color: var(--text); }
.facade:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.play { flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(210,166,90,0.18); transition: transform .3s; }
.facade:hover .play { transform: scale(1.06); }
.vid-lg .facade { aspect-ratio: 16 / 9; }
.vid-lg .facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.vid-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,14,13,0.92), rgba(15,14,13,0.1) 62%); }
.vid-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 28px; display: flex; align-items: center; gap: 20px; }
.vid-title { display: block; font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.vid-note { display: block; font-size: 14px; color: var(--muted); }

.vid-stage .facade { height: 460px; }
.vid-stage .facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.vid-stage .vid-shade { background: radial-gradient(closest-side, rgba(15,14,13,0.82), rgba(15,14,13,0.25)); }
.vid-stage .stage-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; padding: 32px; }
.vid-stage .play { width: 104px; height: 104px; box-shadow: 0 0 0 12px rgba(210,166,90,0.18); }
.vid-stage .stage-title { font-family: var(--serif); font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; }
.vid-stage .pill { padding: 6px 14px; background: rgba(15,14,13,0.8); }
.vid-stage .pill-sm { padding: 4px 12px; background: rgba(15,14,13,0.8); font-size: 14px; color: var(--text-soft); }
.vid-stage iframe { height: auto; }

.vid-row { border: 1px solid var(--line); }
.vid-row .facade { display: flex; align-items: center; gap: 20px; padding: 14px; }
.vid-row .facade img { flex: none; width: 140px; height: 88px; object-fit: cover; }
.vid-row .vid-txt { flex: 1; min-width: 0; }
.vid-row .vid-title { font-size: 20px; line-height: 1.25; }
.vid-row .play { width: 52px; height: 52px; background: transparent; border: 1px solid var(--accent); color: var(--accent); box-shadow: none; }

.vid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.vid-tile { border: 1px solid var(--line); }
.vid-tile .facade { aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px; background: radial-gradient(circle at 100% 0%, rgba(210,166,90,0.12), rgba(210,166,90,0) 60%), var(--surface); }
.vid-tile .play { width: 52px; height: 52px; box-shadow: 0 0 0 8px rgba(210,166,90,0.14); }
.vid-tile .vid-title { font-size: 22px; }
.vid-tile:hover { border-color: var(--accent); }
.vid-group { margin-top: 56px; }
.vid-group h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 30px; }
.vid-group > p { margin: 0 0 24px; color: var(--muted); }
.media-note { margin: 0 0 32px; max-width: 46em; color: var(--muted); }

.sc { border: 1px solid var(--line); background: var(--surface); }
.sc .facade { display: flex; align-items: center; gap: 24px; padding: 28px; }
.sc iframe { display: block; width: 100%; height: 300px; border: 0; }
.sc .tracks { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; color: var(--muted); }
.sc .tracks li::before { content: "♪ "; color: var(--accent); }

/* ---------- Anfrage / Formular ---------- */
.anfrage { margin-top: 128px; background: var(--surface); border-top: 1px solid var(--line); }
.anfrage-grid { display: flex; flex-wrap: wrap; gap: 64px; padding-top: 112px; padding-bottom: 112px; }
.anfrage-info { flex: 1 1 360px; min-width: 0; }
.anfrage-info .h2 { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.05; }
.anfrage-info > p { margin: 0 0 36px; color: var(--muted); }
.contact-lines { display: flex; flex-direction: column; gap: 12px; }
.contact-lines a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--text); text-decoration: none; }
.contact-lines a:hover { color: var(--accent); }
.form { flex: 1 1 540px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-soft); }
.field-full { grid-column: 1 / -1; }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  background: var(--bg); border: 1px solid var(--line-strong); color: var(--text);
  padding: 12px 14px; min-height: 48px; border-radius: 0; font-weight: 400; font-size: 16px; width: 100%;
}
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D2A65A' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field input[type="date"] { color-scheme: dark; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.field ::placeholder { color: #8A8276; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-foot > span { font-size: 14px; color: var(--muted); }
.form-foot > p { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--muted); }
.form-foot > p a { color: var(--text-soft); }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.notice { grid-column: 1 / -1; padding: 18px 22px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--bg); }
.notice p { margin: 0 0 6px; }
.notice ul { margin: 0; padding-left: 1.2em; color: var(--text-soft); }
.notice-ok { border-left-color: #7FB77E; }
.notice-err { border-left-color: #E08A6A; }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 860px; }
.legal h2 { margin: 48px 0 14px; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul { margin: 0 0 16px; color: var(--text-soft); }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal .addr { color: var(--text); }
.linkbtn { all: unset; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 0; }
.anfrage + .site-footer, main + .site-footer { margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; padding-top: 64px; padding-bottom: 40px; font-size: 15px; color: var(--muted); }
.footer-brand b { display: block; margin-bottom: 12px; font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--text); }
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-col .fh { margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.footer-col a { color: var(--text); padding: 2px 0; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--line); }
.footer-bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 24px; padding-bottom: 40px; font-size: 14px; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a, .footer-links button { color: var(--muted); }
.footer-links a:hover, .footer-links button:hover { color: var(--accent); }
.footer-links button { all: unset; cursor: pointer; }
.footer-links button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Cookie-Hinweis ---------- */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 980px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent); box-shadow: 0 20px 50px rgba(0,0,0,.55); transform: translateY(130%); transition: transform .4s ease; }
.cookie-banner.is-visible { transform: none; }
.cookie-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 22px 26px; }
.cookie-text { flex: 1 1 380px; font-size: 15px; color: var(--text-soft); }
.cookie-text p { margin: 0; }
.cookie-title { font-family: var(--serif); font-size: 22px; color: var(--text) !important; margin-bottom: 6px !important; }
.cookie-text a { color: var(--accent); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { min-height: 46px; padding: 0 18px; font-size: 15px; }
.cookie-modal { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.7); }
.cookie-modal.is-visible { display: flex; }
.cookie-panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent); padding: 32px; }
.cookie-panel h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 30px; }
.cookie-panel > p { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.cookie-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: none; color: var(--text); font-size: 20px; cursor: pointer; }
.cookie-cat { border-top: 1px solid var(--line); padding: 16px 0; }
.cookie-cat-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 700; }
.cookie-cat p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.switch { position: relative; display: inline-flex; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch .track { width: 100%; height: 100%; border-radius: 999px; background: var(--line-strong); transition: background .2s; position: relative; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text); transition: transform .2s; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(20px); background: var(--on-accent); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 3px; }
.switch input:disabled + .track { opacity: .6; }
.cookie-panel .cookie-actions { margin-top: 20px; }
body.modal-open { overflow: hidden; }

/* ---------- 404 ---------- */
.notfound { padding-top: 120px; padding-bottom: 40px; }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .hero-grid, .hero-home .hero-grid { padding-top: 24px; padding-bottom: 72px; gap: 28px; }
  .hero-media { order: -1; padding: 0 0 16px 16px; }
  .hero-media img, .hero-home .hero-media img { height: 300px; }
  .h1, .h1-home { font-size: 38px; }
  .lead { font-size: 17px; margin-top: 20px; }
  .cta-row { margin-top: 28px; gap: 12px; }
  .cta-row .btn { flex: 1 1 100%; }
  .sec { padding-top: 88px; }
  .sec-sm { padding-top: 80px; }
  .band-pad { padding-top: 80px; padding-bottom: 80px; }
  .mt-band, .anfrage { margin-top: 88px; }
  .anfrage-grid { padding-top: 80px; padding-bottom: 80px; gap: 48px; }
  .acts-line { display: none; }
  .split-media img, .split-media.tall img { height: 360px; }
  .panel-body { padding: 40px 24px; }
  .panel-media img { min-height: 0; height: 340px; }
  .vid-stage .facade { height: 380px; }
  .vid-meta { padding: 18px; gap: 14px; }
  .vid-title { font-size: 20px; }
  .vid-lg .facade { aspect-ratio: 4 / 3; }
  .play { width: 60px; height: 60px; }
  .vid-row .facade img { width: 96px; height: 64px; }
  .vid-row .facade { gap: 14px; }
  .price-box, .box { padding: 32px 24px; }
  .price b { font-size: 60px; }
  .card h3 { font-size: 28px; }
  .occ > a, .occ > div { min-height: 0; padding: 22px; }
  .faq summary { font-size: 20px; }
  .quote { font-size: 22px; }
  .sc .facade { padding: 20px; gap: 16px; }
}
@media (max-width: 480px) {
  :root { --gutter: 20px; }
  .hero-media img, .hero-home .hero-media img { height: 260px; }
  .h1, .h1-home { font-size: 34px; }
  .brand span { font-size: 22px; }
  .mob-cta { padding: 0 12px; }
  .cookie-actions .btn { flex: 1 1 100%; }
}

/* ---------- Feinschliff (Design-Review 09.10.2026) ---------- */
/* Eyebrows behalten Messing auch in Text-Containern */
.split-text > .eyebrow, .panel-body > .eyebrow, .anfrage-info > .eyebrow { color: var(--accent); margin: 0 0 16px; }
/* lange deutsche Wörter in Überschriften sauber trennen statt überlaufen */
.anfrage-info, .faq-head { min-width: 0; }
.anfrage-info .h2 { font-size: clamp(32px, 3.4vw, 50px); }
.faq-head .h2 { font-size: clamp(30px, 3.2vw, 46px); }
/* Kursive Akzente in Überschriften einheitlich in Messing */
.h2 .it, .h1 .it { color: var(--accent); }
/* Ablauf: "Empfohlen"-Zeilen auf einer Höhe */
@supports (grid-template-rows: subgrid) {
  .acts li { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 10px; align-content: start; }
  .acts .rec { margin: 0; align-self: start; }
}
.acts .rec span { color: var(--text-soft); }
/* Raster ohne Loch am Ende */
.dl > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.occ .m { text-wrap: balance; }
@media (min-width: 1100px) { .points-2 > li:last-child:nth-child(3n+2) { grid-column: span 2; } }
/* Zitat-Zeichen kräftiger */
.quote::before { font-size: 96px; line-height: 0.5; margin-bottom: 4px; }
/* Video-Zeilen ruhiger */
.vid-row .vid-title { font-size: 18px; }
/* Footer ruhiger, Tap-Ziele ≥ 44 px */
.footer-col { gap: 0; }
.footer-col a { display: flex; align-items: center; min-height: 40px; padding: 0; }
.footer-links a, .footer-links button { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs { padding-top: 12px; }
.crumbs ol { align-items: center; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom-inner { align-items: center; }
.cookie-text a { padding: 6px 0; }
/* Cookie-Hinweis: kompakte Karte statt breiter Leiste, unsichtbar = nicht fokussierbar */
.cookie-banner { visibility: hidden; transition: transform .4s ease, visibility 0s linear .4s; }
.cookie-banner.is-visible { visibility: visible; transition-delay: 0s; }
@media (min-width: 901px) {
  .cookie-banner { left: auto; right: 16px; bottom: 16px; max-width: 440px; margin: 0; }
  .cookie-actions .btn { flex: 1 1 auto; }
  .cookie-inner { gap: 16px; }
  .cookie-text { flex-basis: 100%; }
}
/* Mobiles Menü: Seite dahinter fixiert, iOS-Höhe korrekt */
@media (max-width: 960px) {
  body.nav-open { overflow: hidden; }
  .main-nav { max-height: calc(100dvh - 73px); }
}
@media (max-width: 480px) {
  .cookie-inner { padding: 16px; gap: 12px; }
  .cookie-title { display: none; }
  .cookie-text { font-size: 14px; flex-basis: 100%; }
  .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .cookie-actions .btn { min-height: 44px; padding: 0 10px; }
  .cookie-actions [data-c="all"] { grid-column: 1 / -1; }
  .form-foot .btn, .split-text .btn, .panel-body .btn { width: 100%; justify-content: center; }
  .vid-row .facade img { display: none; }
  .footer-col a { min-height: 44px; }
}
.subs > .feature { grid-row: span 2; }
main:focus { outline: none; }
@media (min-width: 901px) { .cookie-actions { flex-wrap: wrap; } .cookie-actions .btn { flex: 1 1 auto; padding: 0 14px; white-space: nowrap; } }

/* ---------- Runde 4 (09.10.2026) ---------- */
/* Kontakt: Kopf und Formular in einem Block, Formular sofort sichtbar */
.kontakt-top { position: relative; overflow: hidden; }
.anfrage-kontakt { margin-top: 0; background: transparent; border-top: 0; }
.anfrage-kontakt .anfrage-grid { padding-top: 40px; align-items: flex-start; }
.anfrage-kontakt .anfrage-info .lead { margin-top: 28px; }
.anfrage-kontakt .anfrage-info .sublead { margin: 20px 0 32px; max-width: 34em; color: var(--muted); }
.anfrage-kontakt .form { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent); padding: 32px; }
@media (min-width: 901px) { .anfrage-kontakt .anfrage-info { position: sticky; top: 110px; } }
@media (max-width: 900px) { .anfrage-kontakt .anfrage-grid { padding-top: 24px; } .anfrage-kontakt .form { padding: 24px 20px; } }
/* Unterricht: Foto oben bündig mit der Überschrift */
@media (min-width: 901px) { .split-sticky { position: sticky; top: 110px; } }
/* Über mich: Video-Kacheln mit eigenem Foto */
.vid-tile .facade { position: relative; overflow: hidden; }
.vid-tile .facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition: opacity .3s, transform .6s; }
.vid-tile .facade > span:not(.vid-shade) { position: relative; z-index: 1; }
.vid-tile .vid-shade { background: linear-gradient(0deg, rgba(15,14,13,0.94), rgba(15,14,13,0.35) 70%); }
.vid-tile:hover .facade img { opacity: 0.62; transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .vid-tile:hover .facade img { transform: none; } }
/* Felder mit Fehler sichtbar markieren */
.field [aria-invalid="true"] { border-color: #E08A6A; box-shadow: 0 0 0 1px #E08A6A; }
.notice-err:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Video-Kacheln: Titel ausgewogen, Ausschnitt je Kachel variiert */
.vid-tile .vid-title { text-wrap: balance; }

/* ---------- Startseite: großes Bühnenfoto im Hintergrund (09.10.2026) ---------- */
.hero-bg { min-height: min(88vh, 860px); display: flex; align-items: center; }
.hero-bg > .wrap { width: 100%; }
.hero-bg-media { position: absolute; inset: 0; }
.hero-bg-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg-shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(270deg, rgba(15,14,13,0.94) 0%, rgba(15,14,13,0.82) 38%, rgba(15,14,13,0.25) 62%, rgba(15,14,13,0) 80%),
    linear-gradient(0deg, var(--bg) 0%, rgba(15,14,13,0) 22%); }
.hero-bg .hero-grid { justify-content: flex-end; }
.hero-bg .hero-text { flex: 0 1 600px; }
.hero-bg .lead { color: var(--text); }
@media (max-width: 1100px) {
  /* Handy und Tablet: Foto oben vollflächig, Text darunter auf dunklem Grund */
  .hero-bg { display: block; min-height: 0; }
  .hero-bg-media { position: relative; height: 62vh; max-height: 520px; min-height: 340px; }
  .hero-bg-media img { object-position: 35% 25%; }
  .hero-bg-shade { top: 0; bottom: auto; height: 62vh; max-height: 520px; min-height: 340px; background: linear-gradient(0deg, var(--bg) 0%, rgba(15,14,13,0.4) 30%, rgba(15,14,13,0) 55%); }
  .hero-bg .hero-grid { margin-top: -72px; padding-top: 0; }
  .hero-bg .hero-text { flex: 1 1 auto; }
}
@media (min-width: 1101px) {
  .hero-bg-media { right: 30%; }
  .hero-bg-media img { object-position: 40% 25%; }
  .hero-bg-shade { background:
    linear-gradient(270deg, var(--bg) 0%, var(--bg) 30%, rgba(15,14,13,0.88) 40%, rgba(15,14,13,0.15) 56%, rgba(15,14,13,0) 66%),
    linear-gradient(0deg, var(--bg) 0%, rgba(15,14,13,0) 20%); }
  .hero-bg::after { content: ""; position: absolute; right: -200px; top: -200px; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(closest-side, rgba(210,166,90,0.12), rgba(210,166,90,0) 70%); pointer-events: none; }
}

/* ==========================================================================
   Wärme & weiche Formen (Design-Feinschliff 10/2026)
   Gleiche Marke (Bühnenlicht, Messing, Bodoni/Manrope), aber wärmerer
   Grundton, Rundungen, weiche Übergänge und Kerzenlicht-Glow statt harter Kästen.
   ========================================================================== */
:root {
  --bg: #120F0C;
  --surface: #1C1814;
  --surface-2: #241E18;
  --line: rgba(210,166,90,0.16);
  --line-strong: rgba(210,166,90,0.42);
  --text: #F6EEE2;
  --text-soft: #E0D5C5;
  --muted: #BCAF9E;
  --accent: #D9AE63;
  --accent-hi: #EAC789;
  --wine: #3A1A14;
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --shadow: 0 24px 60px -24px rgba(0,0,0,.7), 0 2px 0 rgba(255,236,200,.03) inset;
  --warm-glow: radial-gradient(ellipse at 15% 0%, rgba(217,174,99,.10), transparent 55%),
               radial-gradient(ellipse at 90% 100%, rgba(140,60,40,.12), transparent 55%);
}
body {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(217,174,99,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(150,70,40,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: rgba(217,174,99,.35); color: var(--text); }

/* Buttons: weich und warm */
.btn, .mob-cta, .main-nav .nav-cta, .nav-toggle { border-radius: 999px; }
.btn-primary, .main-nav .nav-cta, .mob-cta {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: transparent;
  box-shadow: 0 10px 28px -10px rgba(217,174,99,.55);
}
.btn-primary:hover, .main-nav .nav-cta:hover { background: linear-gradient(180deg, #F2D59F, var(--accent-hi)); box-shadow: 0 14px 34px -10px rgba(217,174,99,.7); }
.btn { transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s; }
.btn:hover { transform: translateY(-1px); }
.btn-outline { border-color: rgba(246,238,226,.28); }
.tag { border-radius: 999px; padding: 5px 12px; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); }

/* Kopfzeile */
.site-header { background: rgba(18,15,12,.78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: rgba(217,174,99,.12); }
@media (min-width: 961px) { .main-nav .sub { border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 24px 60px -12px rgba(0,0,0,.6); background: var(--surface-2); } }
.main-nav .is-active > a, .main-nav .is-active > .nav-parent, .main-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--accent); }

/* Hero: Foto mit weichem Rand und warmem Licht */
.hero-media::before { border-radius: var(--r-lg); border-color: rgba(217,174,99,.55); }
.hero-media img { border-radius: var(--r-lg); box-shadow: var(--shadow); }
.glow { background: radial-gradient(closest-side, rgba(217,174,99,.20), rgba(217,174,99,0) 70%); }

/* Flächen ohne harte Kanten */
.band-surface { background: linear-gradient(180deg, transparent, rgba(36,30,24,.75) 12%, rgba(36,30,24,.75) 88%, transparent); border: 0; }
.facts { border: 0; background: transparent; }
.facts-grid { background: linear-gradient(135deg, rgba(36,30,24,.9), rgba(28,24,20,.9)); border: 1px solid var(--line); border-radius: var(--r-lg); margin-top: 24px; padding: 32px 40px; box-shadow: var(--shadow); max-width: calc(var(--wrap) - 2 * var(--gutter)); }
.facts > .facts-grid, .facts .wrap.facts-grid { margin-left: auto; margin-right: auto; }

/* Karten */
.card { border-radius: var(--r-lg); border-color: var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow); transition: transform .4s ease, box-shadow .4s ease, border-color .4s; }
.card:hover { transform: translateY(-4px); border-color: rgba(217,174,99,.4); box-shadow: 0 30px 70px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(217,174,99,.15); }
.card-feature { border-color: rgba(217,174,99,.6); background: radial-gradient(circle at 50% 0%, rgba(217,174,99,.14), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.card-img img { border-radius: 0; }

/* Drei Akte */
.act-num { background: radial-gradient(circle at 35% 30%, #3A2E20, var(--surface)); box-shadow: 0 0 0 6px rgba(217,174,99,.06), 0 0 30px rgba(217,174,99,.18); }
.acts li { background: rgba(36,30,24,.55); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.acts-line { top: 60px; left: 60px; }
.acts .rec { border-top-color: var(--line); }

/* Bilder, Panels, Boxen */
.split-media img, .panel, .box, .price-box { border-radius: var(--r-lg); }
.split-media img { box-shadow: var(--shadow); }
.panel { overflow: hidden; border-color: var(--line); background: var(--warm-glow), linear-gradient(135deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow); }
.box { border-color: var(--line); background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.price-box { border-color: rgba(217,174,99,.5); }

/* Anlass-Raster: einzelne weiche Kacheln statt Gitterlinien */
.occ { border: 0; gap: 18px; }
.occ > a, .occ > div { border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(160deg, rgba(36,30,24,.85), rgba(28,24,20,.6)); transition: background .3s, transform .35s, border-color .3s; }
.occ > a:hover { transform: translateY(-3px); border-color: rgba(217,174,99,.4); background: linear-gradient(160deg, rgba(48,38,28,.95), rgba(28,24,20,.7)); }
.occ .bar { border-radius: 2px; }

/* Schritte, FAQ */
.steps li { border-top: 0; padding: 28px; border-radius: var(--r); background: rgba(36,30,24,.55); border: 1px solid var(--line); }
.faq { border-bottom-color: var(--line); }
.faq-list { border-radius: var(--r-lg); }
.faq .plus { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; }

/* Video und Hörprobe */
.vid-stage .facade, .vid-lg .facade, .vid-tile .facade, .vid-row .facade, .sc .facade, .vid iframe, .sc iframe { border-radius: var(--r-lg); overflow: hidden; }
.vid-stage .facade { box-shadow: var(--shadow); }
.vid-row .facade img { border-radius: var(--r-sm); }
.play { box-shadow: 0 0 0 10px rgba(217,174,99,.12), 0 0 50px rgba(217,174,99,.35); }

/* Anfrage und Formular */
.anfrage { background: radial-gradient(900px 500px at 80% 0%, rgba(217,174,99,.10), transparent 60%), linear-gradient(180deg, transparent, var(--surface) 160px); border-top: 0; }
.field input, .field select, .field textarea { border-radius: var(--r-sm); background: rgba(18,15,12,.6); border-color: rgba(246,238,226,.14); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(217,174,99,.15); }
.anfrage-kontakt .form { border-radius: var(--r-lg); border-top: 1px solid var(--line); }

/* Fußzeile, Cookie */
.site-footer { border-top-color: var(--line); }
.cookie-inner, .cookie-panel { border-radius: var(--r-lg); }
.cookie-actions .btn { border-radius: 999px; }
.switch .track { border-radius: 999px; }

@media (max-width: 900px) {
  .hero-media img, .hero-home .hero-media img { border-radius: var(--r); }
  .facts-grid { padding: 24px; border-radius: var(--r); }
  .acts li { padding: 22px; }
  .card, .panel, .split-media img { border-radius: var(--r); }
}
.vid-stage, .vid-lg, .vid-tile, .sc { border-radius: var(--r-lg); overflow: hidden; }
.vid-stage .pill, .vid-stage .pill-sm, .vid-meta, .vid-note { border-radius: 999px; }
.vid-stage .pill, .vid-stage .pill-sm { padding-left: 14px; padding-right: 14px; }
.acts-line { display: none; }

/* --- Runde 2: Rhythmus, Lesbarkeit, Mobil --- */
/* Lesbarkeit: wärmeres, helleres Grau für Fließtext in Kacheln */
.card p, .occ .d, .features p, .occ-who p, .sec-head > p, .hero-text .sublead { color: #CDBFAC; }
.occ .d, .card .fits { font-size: 15.5px; line-height: 1.65; }
.acts p { color: var(--text-soft); }

/* Warme Bänder: deutlich wärmerer Grund mit Messing-Schein -> Hell/Dunkel-Rhythmus */
.band-surface {
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(217,174,99,.16), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(150,62,40,.14), transparent 60%),
    linear-gradient(180deg, rgba(18,15,12,0), #261D15 140px, #231B14 calc(100% - 140px), rgba(18,15,12,0));
}

/* Video-Bühne als Höhepunkt */
.vid-stage .facade { height: 560px; }
.vid-stage { box-shadow: 0 0 0 1px rgba(217,174,99,.28), 0 40px 90px -30px rgba(0,0,0,.85), 0 0 80px -20px rgba(217,174,99,.18); }
.vid-stage .vid-shade { background: linear-gradient(180deg, rgba(18,15,12,.15), rgba(30,20,12,.55) 55%, rgba(18,15,12,.85)); }

/* Versetzter Rahmen hinter Fotos: parallel und weich */
.hero-media::before { left: 0; bottom: 0; width: calc(100% - 24px); height: calc(100% - 24px); border-color: rgba(217,174,99,.35); }

/* Chips als Pillen */
.chips li { border-radius: 999px; border-color: transparent; background: rgba(217,174,99,.10); color: var(--text); }

/* Feature-Raster: gerundete Kacheln statt Strich oben */
.features > div { border-top: 0; padding: 30px 28px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(36,30,24,.85), rgba(28,24,20,.5)); border: 1px solid var(--line); }
.features-plain > div { padding: 30px 28px; }

/* Ablauf: Zeitleiste statt Kästen (Abwechslung zu Karten) */
.steps li { background: none; border: 0; border-radius: 0; padding: 4px 0 4px 28px; border-left: 1px solid rgba(217,174,99,.35); position: relative; }
.steps li::before { content: ""; position: absolute; left: -6px; top: 10px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(217,174,99,.15), 0 0 18px rgba(217,174,99,.5); }
.steps .n { font-size: 44px; }

/* FAQ in einem weichen Container */
.faq-sec > .faq-list { border-top: 0; background: linear-gradient(160deg, rgba(36,30,24,.7), rgba(28,24,20,.4)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 32px; }
.faq:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .sec { padding-top: 84px; }
  .sec-sm { padding-top: 72px; }
  .band-pad { padding-top: 80px; padding-bottom: 80px; }
  .mt-band, .anfrage { margin-top: 72px; }
  .hero-media::before { display: none; }
  .hero-media { padding: 0; }
  .vid-stage .facade { height: 420px; }
  .faq-sec > .faq-list { padding: 4px 20px; }
  .occ > a, .occ > div { padding: 20px 22px; }
  .occ { gap: 12px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-col a { min-height: 34px; }
}
@media (max-width: 600px) {
  .facts-grid { grid-template-columns: 1fr 1fr; gap: 20px 18px; padding: 22px 20px; }
  .facts-grid b { font-size: 18px; }
  .facts-grid { font-size: 13.5px; }
}
/* Weiche Ränder der warmen Bänder (kein abgeschnittener Schein) */
.band-surface {
  background:
    radial-gradient(800px 420px at 12% 30%, rgba(217,174,99,.13), transparent 70%),
    radial-gradient(640px 380px at 92% 70%, rgba(150,62,40,.13), transparent 70%),
    linear-gradient(180deg, rgba(18,15,12,0), #251C15 160px, #231B14 calc(100% - 160px), rgba(18,15,12,0));
}
.anfrage { background: radial-gradient(800px 420px at 78% 260px, rgba(217,174,99,.09), transparent 70%), linear-gradient(180deg, rgba(28,24,20,0), var(--surface) 200px); }

/* --- Runde 3: Kanten, Badges, Video mobil, Wärme unten --- */
/* Warme Bänder: Hintergrund auf eigener Ebene, oben/unten weich ausgeblendet */
.band-surface { position: relative; isolation: isolate; background: none; }
.band-surface::before {
  content: ""; position: absolute; inset: -140px 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(800px 420px at 12% 35%, rgba(217,174,99,.14), transparent 70%),
    radial-gradient(640px 380px at 92% 65%, rgba(150,62,40,.14), transparent 70%),
    #241B14;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 220px, #000 calc(100% - 220px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 220px, #000 calc(100% - 220px), transparent);
}

/* Badges immer dunkel auf Messing */
.tag, p.tag, .prose p.tag, .panel-body > p.tag, .split-text > p.tag { color: var(--on-accent) !important; }

/* Rahmen hinter Hero-Fotos der Unterseiten: ersetzt durch warmen Schein */
.hero-media::before { display: none; }
.hero-media { padding: 0; }
.hero-media img { box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(217,174,99,.22), 0 0 90px -10px rgba(217,174,99,.16); }

/* Akte: Messing-Kante oben als Akzent */
.acts li { border-top: 2px solid rgba(217,174,99,.55); }

/* Linien-Listen: Messing-Linie, die weich ausläuft */
.subs > div, .dl > div { border-top: 0; background: linear-gradient(90deg, rgba(217,174,99,.45), rgba(217,174,99,0) 85%) top left / 100% 1px no-repeat; }
.subs > div.feature { background-image: linear-gradient(90deg, var(--accent), rgba(217,174,99,0) 90%); }
.points { border-top: 0; }
.points li { border-bottom: 0; background: linear-gradient(90deg, rgba(217,174,99,.35), rgba(217,174,99,0) 85%) bottom left / 100% 1px no-repeat; }

/* Video: Zeilen und Overlay */
.vid-row { border-radius: var(--r-lg); overflow: hidden; border-color: var(--line); background: linear-gradient(160deg, rgba(36,30,24,.85), rgba(28,24,20,.5)); }
.vid-stage { box-shadow: 0 0 0 1px rgba(217,174,99,.28), 0 30px 60px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(217,174,99,.16); }

/* Preis- und Infoboxen: mehr Luft */
.price-box { padding: 48px 44px; }

/* Wärme bis zum Schluss: FAQ-Bereich und Fußzeile */
.site-footer { background: radial-gradient(900px 360px at 20% 0%, rgba(217,174,99,.07), transparent 70%), #100D0A; }

@media (max-width: 900px) {
  .vid-stage .pill, .vid-stage .pill-sm { white-space: nowrap; font-size: 13px; }
  .vid-stage .pill-sm { background: none; padding: 0; }
  .vid-stage .facade { height: 380px; }
  .price-box, .box { padding: 32px 24px; }
}
@media (max-width: 600px) {
  .facts-grid b { font-size: 17px; }
  .facts-grid { font-size: 14px; padding: 24px 22px; gap: 22px 18px; }
}

/* --- Runde 4: Feinschliff --- */
.facts { padding-left: var(--gutter); padding-right: var(--gutter); }
.facts > .facts-grid { padding-left: 40px; padding-right: 40px; }
.facts-grid[style] { padding: 22px 24px !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; }
.occ .m { white-space: nowrap; letter-spacing: .1em; }
.quote::before { margin-top: 18px; opacity: .7; }
.card p, .occ .d, .features p, .occ-who p, .acts p { color: #D8CCBA; }
.card p, .features p { font-size: 16px; line-height: 1.65; }
.field input, .field select, .field textarea { background: #221B15; border-color: rgba(217,174,99,.24); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(217,174,99,.45); }
@media (min-width: 901px) { .faq-sec > .faq-head { position: sticky; top: 120px; align-self: flex-start; } }
@media (max-width: 900px) {
  .facts { padding-left: 16px; padding-right: 16px; }
  .facts > .facts-grid { padding: 22px 20px; }
  .act-num { box-shadow: 0 0 0 4px rgba(217,174,99,.05); }
}

/* --- Runde 5: Abwechslung im Seitenrhythmus --- */
html, body { overflow-x: clip; }

/* Hörprobe als randlose Bühne über die volle Breite, oben und unten weich ausgeblendet */
#hoerprobe .vid-stage { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; box-shadow: none; }
#hoerprobe .vid-stage .facade { border-radius: 0; box-shadow: none; height: 620px; }
#hoerprobe .vid-stage .facade img { opacity: .7;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
#hoerprobe .vid-stage .vid-shade { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(18,15,12,.55), rgba(18,15,12,0) 70%); }

/* Anlässe als elegante Liste statt weiterer Kartenreihe */
.occ:not(.occ-who) { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 64px; }
.occ:not(.occ-who) > a {
  border: 0; border-radius: 0; background: linear-gradient(90deg, rgba(217,174,99,.4), rgba(217,174,99,0) 90%) bottom left / 100% 1px no-repeat;
  padding: 30px 48px 30px 0; min-height: 0; position: relative; transform: none;
}
.occ:not(.occ-who) > a::after { content: "→"; position: absolute; right: 8px; top: 30px; font-size: 22px; color: var(--accent); transition: transform .3s; }
.occ:not(.occ-who) > a:hover { background-color: transparent; transform: none; background-image: linear-gradient(90deg, var(--accent), rgba(217,174,99,0) 95%); }
.occ:not(.occ-who) > a:hover::after { transform: translateX(6px); }
.occ:not(.occ-who) > a:hover .t { color: var(--accent-hi); }
.occ:not(.occ-who) .bar, .occ:not(.occ-who) .m { display: none; }
.occ:not(.occ-who) .t { font-size: 30px; transition: color .3s; }
.occ:not(.occ-who) .d { font-size: 16px; max-width: 32em; }

/* Zitat: großes Zeichen als Gestaltungselement */
.quote { position: relative; padding: 8px 0 8px 28px; margin-top: 8px; }
.quote::before { content: "“"; position: absolute; left: -14px; top: -34px; margin: 0; font-size: 150px; line-height: 1; opacity: .22; }
.quote::after { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), rgba(217,174,99,0)); }

/* Linkpaare nebeneinander statt untereinander */
.more-list { flex-direction: row; flex-wrap: wrap; gap: 4px 28px; align-items: center; }

/* Vorteile Unterricht: Titel in Bodoni wie die übrigen Karten */
.features-plain h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; }

@media (max-width: 900px) {
  #hoerprobe .vid-stage .facade { height: 440px; }
  .occ:not(.occ-who) { grid-template-columns: 1fr; }
  .occ:not(.occ-who) > a { padding: 22px 40px 22px 0; }
  .occ:not(.occ-who) > a::after { top: 22px; }
  .occ:not(.occ-who) .t { font-size: 25px; }
  .quote::before { font-size: 120px; top: -28px; }
}
.quote::before { display: none; }
.quote { padding-left: 26px; }
/* Akte mobil als Zeitleiste statt Kartenstapel */
@media (max-width: 700px) {
  .acts { gap: 0; }
  .acts li { background: none; border: 0; border-radius: 0; padding: 0 0 36px 72px; position: relative; min-height: 0; }
  .acts li::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(217,174,99,.55), rgba(217,174,99,.1)); }
  .acts li:last-child { padding-bottom: 0; }
  .acts li:last-child::before { display: none; }
  .act-num { position: absolute; left: 0; top: 0; width: 48px; height: 48px; font-size: 20px; }
  .acts .act-time { margin-top: 12px; }
  .acts .act-num + h3 { margin-top: 10px; }
}

/* --- Runde 6: Fehlerkorrekturen --- */
.h1 { font-size: clamp(40px, 4.9vw, 70px); }
@media (max-width: 600px) { .facts-grid { color: #CDBFAC; } }
@media (max-width: 420px) { .h1, .h1-home { font-size: 36px; } }

/* --- Runde 7: asymmetrische Hörprobe --- */
/* Hörprobe: Inhalt rechts, damit der Play-Button nicht auf dem Gesicht liegt */
@media (min-width: 901px) {
  #hoerprobe .vid-stage .stage-inner { align-items: flex-start; text-align: left; left: auto; right: 0; width: 46%; padding: 48px 8vw 48px 0; }
  #hoerprobe .vid-stage .vid-shade { background: linear-gradient(90deg, rgba(18,15,12,0) 30%, rgba(18,15,12,.75) 70%); }
}
@media (max-width: 900px) {
  #hoerprobe .vid-stage .facade img { object-position: 30% 50%; }
  #hoerprobe .vid-stage .stage-inner { justify-content: flex-end; padding-bottom: 56px; }
}
#hoerprobe .vid-stage .facade img { -webkit-mask-image: none; mask-image: none; }
#hoerprobe .vid-stage .facade { -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
@media (min-width: 901px) { #hoerprobe .vid-stage .stage-inner { width: 40%; padding-right: 7vw; } }

/* --- Runde 9: letzte Korrekturen --- */
/* Video-Beschriftung ohne "Flicken"-Kästchen */
.vid-stage .pill, .vid-stage .pill-sm { background: none; padding: 0; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.vid-stage .pill { font-size: 16px; letter-spacing: .02em; }
@media (max-width: 900px) { .vid-stage .pill { font-size: 15px; } .vid-stage .pill-sm { font-size: 14px; } }
/* Unterrichts-Vorteile als offene Liste statt weiterer Kartenreihe */
.features:not(.features-plain) > div { background: linear-gradient(90deg, rgba(217,174,99,.5), rgba(217,174,99,0) 85%) top left / 100% 1px no-repeat; border: 0; border-radius: 0; padding: 28px 0 0; }
/* Überschriften mit Bindestrich nicht künstlich ausbalancieren */
.panel-body .h2 { text-wrap: pretty; }
@media (max-width: 600px) { .facts-grid { font-size: 14.5px; } }

/* --- Runde 10: Debug-Loop (10.10.2026) – Barrierefreiheit, Umbrüche, Kleinigkeiten --- */
/* Lange deutsche Wörter in Überschriften trennen statt abschneiden (bis 320 px) */
h1, h2, h3, .h1, .h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 360px) { .h1, .h1-home { font-size: 32px; } }
/* Ablauf: Spalte darf schmaler werden als das längste Wort */
.acts { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.acts li { min-width: 0; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 480px) { .acts h3 { font-size: 26px; } }
.points-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* Rechtstexte: lange Überschriften am Handy */
.legal h2 { overflow-wrap: anywhere; }
@media (max-width: 480px) { .legal h2 { font-size: 24px; } }

/* Fokus auf Video-/SoundCloud-Vorschauen sichtbar (Rahmen innen, wird nicht abgeschnitten) */
.facade:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
#hoerprobe .vid-stage:has(.facade:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; }
.sc .tracks { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0; color: var(--text-soft); font-size: 15px; }
.sc .tracks > span::before { content: "♪ "; color: var(--accent); }
/* Video-Kacheln wachsen mit dem Text (Textabstand/Zoom) */
.vid-tile .facade { aspect-ratio: auto; min-height: clamp(190px, 16vw, 240px); }

/* Formularfelder: Rand mit 3:1 Kontrast, Platzhalter 4,5:1 */
.field input, .field select, .field textarea { border-color: #7E643C; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(217,174,99,.8); }
.field ::placeholder { color: #948B7E; opacity: 1; }
.notice { border-radius: var(--r-sm); }
.notice a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.form-done { display: block; }
.notice-ok:focus { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Desktop-Untermenü: per Escape geschlossen bleibt zu, bis Maus/Fokus den Bereich verlassen */
@media (min-width: 961px) {
  .has-sub.is-closed > .sub { opacity: 0; visibility: hidden; transform: translateY(-4px); }
  .has-sub.is-closed > .nav-parent svg { transform: none; }
}

/* Kopfzeile: „Live Sax“ nie zweizeilig */
.brand span { white-space: nowrap; }
@media (max-width: 360px) { .brand span { font-size: 20px; } .brand img { width: 32px; height: 32px; } .brand { gap: 8px; } }
/* Handymenü: Pfeil bei Besetzung/Anlässe gut sichtbar */
@media (max-width: 960px) { .nav-parent svg { width: 16px; height: 16px; } }

/* Brotkrumen: Trenner hängt am vorigen Eintrag, neue Zeile beginnt nie mit „/“ */
.crumbs li + li::before { content: none; }
.crumbs li:not(:last-child)::after { content: "/"; margin: 0 10px; color: var(--line-strong); }

/* Cookie-Hinweis rund wie die übrigen Karten; auf der Startseite links, damit er den Hero-Text nicht verdeckt */
.cookie-banner { border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 1101px) { body:has(.hero-bg) .cookie-banner { left: 16px; right: auto; } }

/* Startseite Desktop: Text liegt sicher auf dunklem Grund */
@media (min-width: 1101px) {
  .hero-bg-shade { background:
    linear-gradient(270deg, var(--bg) 0%, var(--bg) 30%, rgba(15,14,13,0.92) 44%, rgba(15,14,13,0.35) 58%, rgba(15,14,13,0) 68%),
    linear-gradient(0deg, var(--bg) 0%, rgba(15,14,13,0) 20%); }
}

/* Unterseiten-Hero 901–1100 px: Text und Foto passen nebeneinander */
@media (min-width: 901px) and (max-width: 1100px) {
  .hero-text { flex-basis: 440px; }
  .hero-media { flex-basis: 320px; }
}
/* Tablet: Fotos nicht zum flachen Streifen beschneiden, Buttons nicht über die volle Breite */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-media img, .hero-home .hero-media img { height: auto; aspect-ratio: 4 / 3; }
  .cta-row .btn { flex: 0 0 auto; }
}

/* 404 und Kontakt: Messing-Schein ohne harte Kante */
.hero:has(.notfound) { overflow: visible; }
.kontakt-top { overflow: visible; }
.facts-grid > div { min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* --- Runde 11: Debug-Loop, zweite Prüfrunde (10.10.2026) --- */
/* Desktop-Untermenü: öffnet per Maus oder Enter/Klick, nicht schon beim Tab-Fokus */
@media (min-width: 961px) {
  .has-sub:focus-within:not(.is-open):not(:hover) > .sub { opacity: 0; visibility: hidden; transform: translateY(-4px); }
  .main-nav .sub a:focus-visible { outline-offset: -3px; }
}
/* Fokusring auf Video-Vorschauen liegt über Bild und Abdunklung */
.facade:focus-visible { outline: none; }
.facade:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--accent); pointer-events: none; }
#hoerprobe .facade:focus-visible::after { display: none; }
/* Erfolgs-/Fehlermeldung: Fokus per Skript ohne Doppelrahmen, Erfolg in Messing */
.notice:focus { outline: none; }
.notice:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.notice-ok { border-left-color: var(--accent); }
/* Felder gleich hoch (Datumsfeld war 2 px höher) */
.field input, .field select { height: 52px; }
@media (max-width: 360px) { .field select { padding-right: 34px; background-position: right 10px center; font-size: 15px; } }

/* Raster mit genau 3 Einträgen: am Tablet einspaltig statt 2 + 1 (Waise) */
@media (min-width: 601px) and (max-width: 900px) {
  :is(.acts, .steps, .cards, .features):has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
}
/* Raster mit 4 Einträgen bei 601–1100 px als 2 × 2 statt 3 + 1 */
@media (min-width: 601px) and (max-width: 1100px) {
  .facts-grid:has(> :nth-child(4):last-child), .occ-who:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
/* Fakten am kleinen Handy einspaltig (lange Wörter wie „Instrumentalpädagogik“) */
@media (max-width: 400px) { .facts-grid { grid-template-columns: 1fr; } }
/* Formular: höchstens zwei Spalten */
.form { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
/* Karten-Raster (.occ aus <div>) wieder mit Abstand; Linkliste bleibt ohne */
.occ:not(.occ-who):not(:has(> a)) { gap: 18px; }
/* Einzelne Nicht-Link-Einträge in der Anlässe-Liste wie die Linkzeilen */
.occ:not(.occ-who):has(> a) > div { border: 0; border-radius: 0; background: linear-gradient(90deg, rgba(217,174,99,.4), rgba(217,174,99,0) 90%) bottom left / 100% 1px no-repeat; padding: 30px 48px 30px 0; min-height: 0; }
.occ:not(.occ-who):has(> a) > div .bar, .occ:not(.occ-who):has(> a) > div .m { display: none; }
@media (max-width: 900px) { .occ:not(.occ-who):has(> a) > div { padding: 22px 40px 22px 0; } }
/* Lange Einzelwörter in schmalen Karten */
.acts h3 { font-size: clamp(24px, 2.6vw, 32px); }
@media (max-width: 360px) { .acts h3 { font-size: 24px; } }
@media (min-width: 901px) and (max-width: 1100px) { .features h3, .features-plain h3 { font-size: 22px; } }
@media (max-width: 400px) { .features h3, .features-plain h3 { font-size: 22px; } }
@media (max-width: 360px) { .h1, .h1-home { font-size: 30px; } .legal h2 { font-size: 21px; } }
@media (max-width: 340px) { .h1, .h1-home { font-size: 29px; } }
/* Kopfzeile 320 px: Abstand zwischen Marke und „Anfragen“ */
@media (max-width: 340px) { .mob-cta { padding: 0 12px; letter-spacing: .06em; } .mob-actions { gap: 6px; } }
/* Cookie-Hinweis am kleinen Handy kompakter */
@media (max-width: 360px) {
  .cookie-inner { padding: 14px; }
  .cookie-text { font-size: 13.5px; }
  .cookie-actions .btn { font-size: 14px; padding: 0 8px; white-space: nowrap; }
}
/* Fußzeile 1024–1279 px: Marke über die volle Breite, darunter vier Spalten */
@media (min-width: 901px) and (max-width: 1279px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
/* Startseite Tablet quer / kleiner Laptop: Foto niedriger, damit der CTA sichtbar bleibt */
@media (min-width: 901px) and (max-width: 1100px) and (orientation: landscape) {
  .hero-bg-media, .hero-bg-shade { height: 44vh; min-height: 300px; }
}

/* --- Runde 12: Debug-Loop, dritte Prüfrunde (10.10.2026) --- */
/* Cookie-Hinweis offen: Platz unten freihalten, Fokus scrollt nicht darunter */
html.has-cookie-banner { scroll-padding-bottom: var(--cookie-space, 0px); }
html.has-cookie-banner body { padding-bottom: var(--cookie-space, 0px); }
/* Sprungziele und Tab-Fokus nicht unter der Sticky-Kopfzeile */
html { scroll-padding-top: 88px; }
/* Startseite Handy/Tablet: Text am unteren Fotorand sicher lesbar (Eyebrow ≥ 4,5:1) */
@media (max-width: 1100px) {
  .hero-bg-shade { background: linear-gradient(0deg, var(--bg) 0%, rgba(18,15,12,.75) 30%, rgba(18,15,12,0) 60%); }
}
/* Datumsfeld: Fokus auch auf dem Kalender-Knopf sichtbar */
.field input[type="date"]:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(217,174,99,.15); }
/* Video-Beschriftungen am Handy umbrechen statt abschneiden */
@media (max-width: 900px) { .vid-stage .pill-sm { white-space: normal; } }
.vid-title { overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .vid-lg .vid-title { font-size: 18px; line-height: 1.25; }
  .vid-lg .vid-note { font-size: 12.5px; }
}
/* Hero-Fotos im Querformat am Desktop nicht in ein Hochformat zwingen (Personen am Rand bleiben im Bild) */
@media (min-width: 901px) {
  .hero-media:has(img.is-wide) { align-self: center; }
  .hero-media img.is-wide { height: auto; aspect-ratio: 4 / 3; }
}
/* Karten-Raster mit drei Besetzungen ab ca. 1000 px in einer Reihe */
.occ:not(.occ-who):not(:has(> a)) { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
/* Linkliste mit ungerader Anzahl: letzter Eintrag über die volle Breite */
@media (min-width: 901px) { .occ:not(.occ-who):has(> a) > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Raster mit vier Einträgen (inkl. Empfehlung) als 2 × 2 */
.subs:has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.subs:has(> :nth-child(4):last-child) > .feature { grid-row: auto; }
@media (min-width: 1000px) { .subs:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
/* Fakten-Box bündig mit dem übrigen Inhalt */
@media (max-width: 900px) { .facts { padding-left: var(--gutter); padding-right: var(--gutter); } }
/* Video-Archiv: fünf in einer Reihe, einzelne Videos breiter statt verloren */
.vid-tiles { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.vid-tiles:has(> :only-child) { grid-template-columns: minmax(0, 560px); }
/* Aktiver Eintrag im Desktop-Untermenü: Kante links statt Linie quer durchs Menü */
@media (min-width: 961px) { .main-nav .sub a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); } }
/* 404: vier Buttons am Tablet als 2 × 2 */
@media (min-width: 601px) and (max-width: 1023px) { .notfound .cta-row { display: grid; grid-template-columns: 1fr 1fr; } }
/* Erfolgsmeldung ohne Rahmen im Rahmen */
.anfrage-kontakt .form.form-done { border: 0; padding: 0; background: none; }
.notice:focus-visible { outline-offset: -2px; }
/* Cookie-Hinweis am Desktop: drei Knöpfe in einer Reihe */
@media (min-width: 901px) {
  .cookie-banner { max-width: 540px; }
  .cookie-actions { flex-wrap: nowrap; }
  .cookie-actions .btn { flex: 0 1 auto; }
}
/* Handymenü offen: nur ein „Anfragen“-Knopf, Menü-Knopf nicht überbreit */
@media (max-width: 960px) {
  body.nav-open .mob-cta { visibility: hidden; }
  .main-nav .nav-cta { max-width: 420px; }
}
/* Fußzeile am Handy: umbrechende Links mit gleichmäßigem Abstand */
.footer-col a { line-height: 1.3; padding-top: 6px; padding-bottom: 6px; }

/* --- Runde 13: Debug-Loop, vierte Prüfrunde (10.10.2026) --- */
/* Handymenü offen: Cookie-Hinweis tritt zurück, damit kein Menüpunkt verdeckt ist */
body.nav-open .cookie-banner { visibility: hidden; }
/* Cookie-Hinweis nie höher als der Bildschirm (Zoom 400 %) */
.cookie-banner { max-height: calc(100dvh - 32px); overflow-y: auto; }
/* Auf Seiten mit Formular oben (Kontakt) liegt der Hinweis links */
@media (min-width: 901px) { body:has(.anfrage-kontakt) .cookie-banner { left: 16px; right: auto; } }
/* Gestartetes Video passt in den Bildschirm, Kacheln behalten ihre Größe */
.vid-stage iframe { width: 100%; max-width: calc((100vh - 140px) * 16 / 9); margin: 0 auto; aspect-ratio: 16 / 9; height: auto; }
.vid-tile iframe { aspect-ratio: auto; height: 100%; min-height: clamp(190px, 16vw, 240px); }
/* Vorschaubild mit eingebrannter Schrift: weichgezeichnet, damit der Kacheltitel klar lesbar ist */
.vid-dim .facade img { filter: blur(4px) brightness(.7); }
/* Marke bei Textabstand/Zoom nicht unter den Button laufen lassen */
.brand { min-width: 0; }
.brand span { min-width: 0; }
.h2, .eyebrow { overflow-wrap: break-word; }
/* Querformat-Hero: oben bündig mit dem Text und etwas breiter */
@media (min-width: 901px) {
  .hero-media:has(img.is-wide) { align-self: flex-start; flex-basis: 520px; margin-top: 56px; }
}
.hero:not(.hero-bg) .hero-grid { align-items: flex-start; }
/* Karten-Raster: vier Karten als 2 × 2, drei Karten am Tablet einspaltig */
@media (min-width: 601px) { .occ:not(.occ-who):not(:has(> a)):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 601px) and (max-width: 900px) { .occ:not(.occ-who):not(:has(> a)):has(> :nth-child(3):last-child) { grid-template-columns: 1fr; } }
/* Linklisten am Desktop fest zweispaltig, ungerader letzter Eintrag bleibt in der Spaltenflucht */
@media (min-width: 901px) {
  .occ:not(.occ-who):has(> a) { grid-template-columns: repeat(2, 1fr); }
  .occ:not(.occ-who):has(> a) > :last-child:nth-child(odd) { grid-column: auto; }
}
/* Video-Archiv: fünf Kacheln bei mittleren Breiten als 3 + 2 */
@media (min-width: 901px) and (max-width: 1200px) { .vid-tiles:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, 1fr); } }
/* Punkte-Liste zweispaltig: ungerader letzter Punkt über beide Spalten */
@media (min-width: 681px) and (max-width: 1099px) { .points-2 > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Erfolgsmeldung in der Karte des Formulars, mit nächstem Schritt */
.anfrage-kontakt .form.form-done { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent); padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.form-done .notice { width: 100%; }
.done-next { margin: 0; color: var(--text-soft); }
.done-next a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* Fußzeile 320 px: drei Rechtslinks in einer Zeile */
@media (max-width: 360px) { .footer-links { gap: 4px 14px; font-size: 14px; } }
/* Meldungen bekommen den Fokus nur per Skript (zum Vorlesen) – kein zusätzlicher Rahmen */
.notice:focus, .notice:focus-visible, .notice-err:focus, .notice-ok:focus { outline: none; }

/* --- Runde 14: Nacharbeiten aus der fünften Prüfrunde (10.10.2026) --- */
/* Gestartetes Archiv-Video über die volle Breite in 16:9 */
.vid-tile.is-playing { grid-column: 1 / -1; }
.vid-tile.is-playing iframe { aspect-ratio: 16 / 9; height: auto; min-height: 0; max-width: calc((100vh - 140px) * 16 / 9); }
/* Startseite 901–1100 px quer: Kopf nicht anschneiden */
@media (min-width: 901px) and (max-width: 1100px) and (orientation: landscape) { .hero-bg-media img { object-position: 35% 0% !important; } } /* !important: überschreibt den Inline-Ausschnitt */
/* Spalten dürfen am 320-px-Handy schmaler werden als ihr Mindestmaß */
.subs { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
/* „Mehr …“-Links: Pfeil bleibt mit Abstand am letzten Wort */
.more { display: inline-block; padding-block: 12px; line-height: 1.5; }
/* Ablauf-Karten ohne leeren Raum unten (Subgrid nur so viele Zeilen wie Inhalte) */
@supports (grid-template-rows: subgrid) {
  .acts li:not(:has(> :nth-child(4))) { grid-row: span 3; }
  .acts li:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-row: span 4; }
}
/* Lesbare Zeilenlänge bei einspaltigem Split (ca. 940–1055 px) und in Rechtstexten */
.split > .split-text { max-width: 68ch; }
.legal { max-width: 70ch; }
/* Telefonnummern nie mitten in der Nummer umbrechen */
a[href^="tel:"] { white-space: nowrap; }
/* Cookie-Hinweis 320–360 px: Nebenknöpfe untereinander in voller Breite */
@media (max-width: 360px) { .cookie-actions .btn { grid-column: 1 / -1; padding: 0 16px; } }
/* Marke bei vergrößertem Textabstand am kleinen Handy umbrechen statt überlappen */
@media (max-width: 360px) { .brand span { white-space: normal; line-height: 1.1; } }
/* Faktenleiste mit drei Einträgen: ab Tablet drei nebeneinander */
@media (min-width: 601px) { .facts-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }