/* ARES Startseite H2: nur Startseiten-Spezifisches (Bühne mit fünf Aussagen, Ziele als Schilde, Wissen-Liste).
   Wird NACH assets/css/ares.css geladen. Gemeinsames (Kopf, Fuß, Formular, Befund, Vergleich, FAQ, Kontakt usw.)
   steht in _werkzeug/teile/h2/grund.css. Aufgeteilt am 16.10.2026. */
/* ---------- Wissen ---------- */
.wissen { background: var(--papier); }
.wissen__kopf { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.wissen__kopf h2 { max-width: 11em; }
.wissen__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; margin-top: clamp(40px, 5vw, 72px); }
.wissen__liste a { display: flex; flex-direction: column; height: 100%; padding-top: 26px; border-top: 1px solid var(--tinte); text-decoration: none; transition: border-color .3s; }
.wissen__thema { font-size: 15px; font-weight: 600; color: var(--bernstein-text); }
.wissen__liste h3 { margin-top: 14px; font: italic 400 clamp(28px, 2.5vw, 36px)/1.08 var(--serif); letter-spacing: 0; }
.wissen__liste p { margin-top: 14px; font-size: 16.5px; color: var(--leise); }
.wissen__mehr { margin-top: auto; padding-top: 26px; font-size: 15px; font-weight: 600; }
.wissen__liste a:hover { border-color: var(--bernstein-tief); }
.wissen__liste a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (max-width: 900px) {
  .wissen__liste { grid-template-columns: 1fr; gap: 40px; }
}
/* =====================================================================  Ziele: Schilde aus E  ===================================================================== */
.ziele { position: relative; background: var(--papier); padding-bottom: clamp(80px, 9vw, 130px); }
.ziele__kopf { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 16px 72px; }
.ziele__kopf p { font-size: 19px; color: var(--leise); }
.schildreihe { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 72px); }
/* Speerlinie durch die Schildmitten */
.schildreihe::before { content: ""; position: absolute; left: 4%; right: 4%; top: calc(18px + var(--schild) / 2); height: 1px; background: linear-gradient(90deg, rgba(138, 79, 0, 0), rgba(138, 79, 0, .45) 12%, rgba(138, 79, 0, .45) 88%, rgba(138, 79, 0, 0)); }
.schildreihe { --schild: clamp(70px, 8.6vw, 128px); }
.schildreihe button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; padding: 18px 4px 10px; border: 0; background: none; color: var(--leise); font: inherit; text-align: center; cursor: pointer; }
.schild { position: relative; flex: none; display: grid; place-items: center; width: var(--schild); height: var(--schild); border: clamp(4px, .5vw, 7px) solid transparent; border-radius: 50%; color: #e8c58f;
  background: radial-gradient(circle at 36% 30%, #4b3b2d 0%, #2a211a 58%, #1d1713 100%) padding-box, linear-gradient(150deg, #f1c98b 0%, #9a6a35 32%, #5e3d1c 55%, #c99552 78%, #6b4622 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(241, 201, 139, .18), inset 0 0 0 calc(var(--schild) * .09) rgba(0, 0, 0, .12), 0 18px 28px -18px rgba(28, 23, 19, .7);
  transition: transform .6s var(--weich), box-shadow .5s, filter .4s; }
.schild::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(241, 201, 139, .16); }
.schild .symbol { width: calc(var(--schild) * .34); height: calc(var(--schild) * .34); stroke-width: 1.3; }
.schildreihe b { font-size: 16px; line-height: 1.25; font-weight: 600; text-wrap: balance; transition: color .3s; }
.schildreihe button:hover .schild { transform: translateY(-4px); }
.schildreihe button:hover b { color: var(--tinte); }
.schildreihe button[aria-selected="true"] { color: var(--tinte); }
.schildreihe button[aria-selected="true"] .schild { transform: translateY(-12px) scale(1.14); color: #ffd59a; box-shadow: inset 0 0 0 1px rgba(241, 201, 139, .3), 0 0 0 6px rgba(244, 165, 58, .16), 0 30px 40px -18px rgba(28, 23, 19, .75), 0 0 60px -10px rgba(244, 165, 58, .55); }
.schildreihe button[aria-selected="true"] b { font-weight: 700; }
.schildreihe button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; background: var(--espresso); transform: translateX(-50%) rotate(45deg); }
.schildreihe button:focus-visible { outline: none; }
.schildreihe button:focus-visible .schild { outline: 2px solid var(--bernstein-tief); outline-offset: 5px; }
.ziele__tafel { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; margin-top: 8px; overflow: hidden; border-radius: 28px; background: var(--espresso); color: var(--hell); box-shadow: 0 50px 90px -50px rgba(28, 23, 19, .7); }
.tafel__vorschau { position: relative; display: grid; place-items: center; min-height: 340px; padding: 28px; background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(244, 165, 58, .1), rgba(244, 165, 58, 0) 70%), #18130f; border-right: 1px solid var(--linie-dunkel); }
.tafel__vorschau svg { width: 100%; max-width: 380px; height: auto; overflow: visible; }
.tafel__vorschau figcaption { position: absolute; left: 24px; bottom: 16px; font-size: 13px; color: #a89a88; }
.tafel__haupt { display: flex; flex-direction: column; padding: clamp(28px, 3.6vw, 52px); }
.tafel__satz { font: italic 400 clamp(28px, 2.7vw, 40px)/1.12 var(--serif); letter-spacing: -.005em; max-width: 18em; }
.tafel__linie { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; padding-top: 30px; counter-reset: s; }
.tafel__linie::before { content: ""; position: absolute; left: 7px; right: 0; top: 6px; height: 1px; background: linear-gradient(90deg, var(--bernstein), rgba(244, 165, 58, .3)); transform-origin: left; animation: linie-zeichnen 1.1s var(--weich) .15s both; }
.tafel__linie::after { content: ""; position: absolute; right: -1px; top: 2px; width: 9px; height: 9px; border-top: 1px solid rgba(244, 165, 58, .6); border-right: 1px solid rgba(244, 165, 58, .6); transform: rotate(45deg); }
.tafel__linie li { position: relative; counter-increment: s; font-size: 17px; font-weight: 600; line-height: 1.3; animation: auftauchen .6s var(--weich) both; }
.tafel__linie li:nth-child(1) { animation-delay: .3s; }
.tafel__linie li:nth-child(2) { animation-delay: .55s; }
.tafel__linie li:nth-child(3) { animation-delay: .8s; }
.tafel__linie li::before { content: ""; position: absolute; top: -30px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--espresso); box-shadow: inset 0 0 0 1.5px var(--bernstein); }
.tafel__linie li:last-child::before { background: var(--bernstein); }
.tafel__linie li span { display: block; margin-bottom: 4px; font: italic 400 22px/1 var(--serif); color: var(--bernstein-licht); }
.tafel__linie li span::before { content: counter(s, upper-roman); }
.tafel__aktion { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: auto; padding-top: 36px; }
.tafel__aktion p { font-size: 15px; color: var(--hell-leise); }
@keyframes linie-zeichnen { from { transform: scaleX(0); } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); } }
/* Mini-Vorschauen je Ziel (Beispiele, ohne Zahlen) */
.mv text { font-family: var(--grotesk); font-size: 13px; fill: #cdbfae; }
.mv .mv-hell { fill: var(--hell); font-weight: 600; }
.mv .mv-flaeche { fill: #241d17; stroke: rgba(246, 239, 230, .14); }
.mv .mv-akzent { fill: var(--bernstein); }
.mv .mv-linie { fill: none; stroke: rgba(246, 239, 230, .18); stroke-width: 1.2; }
.mv .mv-gold { fill: none; stroke: var(--bernstein); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mv .mv-grau { fill: rgba(246, 239, 230, .14); }
/* Anfragen: Punkte fließen in den Eingang */
.mv-punkt { fill: var(--bernstein-licht); offset-rotate: 0deg; animation: mv-fluss 3.2s cubic-bezier(.5, 0, .3, 1) infinite; }
.mv-punkt:nth-of-type(2) { animation-delay: .65s; }
.mv-punkt:nth-of-type(3) { animation-delay: 1.3s; }
.mv-punkt:nth-of-type(4) { animation-delay: 1.95s; }
.mv-punkt:nth-of-type(5) { animation-delay: 2.6s; }
@keyframes mv-fluss { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.mv-eingang { animation: mv-puls .65s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mv-puls { 0%, 70% { stroke: rgba(244, 165, 58, .35); } 85% { stroke: var(--bernstein); } }
/* Werbung: Streuverlust schrumpft */
.mv-verlust { transform-box: fill-box; transform-origin: bottom; animation: mv-schrumpf 4s var(--weich) .4s infinite alternate; }
.mv-wirkung { transform-box: fill-box; transform-origin: bottom; animation: mv-wachs 4s var(--weich) .4s infinite alternate; }
@keyframes mv-schrumpf { 0%, 15% { transform: scaleY(1); } 70%, 100% { transform: scaleY(.25); } }
@keyframes mv-wachs { 0%, 15% { transform: scaleY(.45); } 70%, 100% { transform: scaleY(1); } }
/* Sichtbar: Ihr Eintrag steigt nach oben */
.mv-sie { animation: mv-steigen 4.2s cubic-bezier(.6, 0, .2, 1) .5s infinite; }
.mv-rest { animation: mv-rutschen 4.2s cubic-bezier(.6, 0, .2, 1) .5s infinite; }
@keyframes mv-steigen { 0%, 12% { transform: translateY(0); } 45%, 88% { transform: translateY(-138px); } 100% { transform: translateY(0); } }
@keyframes mv-rutschen { 0%, 12% { transform: translateY(0); } 45%, 88% { transform: translateY(46px); } 100% { transform: translateY(0); } }
.mv-spur { stroke-dasharray: 1; animation: mv-zeichnen 4.2s cubic-bezier(.6, 0, .2, 1) .5s infinite; }
@keyframes mv-zeichnen { 0%, 12% { stroke-dashoffset: 1; } 45%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
/* Website: Seite baut sich auf, Knopf wird geklickt */
.mv-block { animation: mv-block 5s var(--weich) infinite both; }
.mv-block:nth-of-type(2) { animation-delay: .35s; }
.mv-block:nth-of-type(3) { animation-delay: .7s; }
.mv-block:nth-of-type(4) { animation-delay: 1.05s; }
@keyframes mv-block { 0% { opacity: 0; transform: translateY(8px); } 12%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mv-zeiger { animation: mv-zeiger 5s var(--weich) infinite; }
@keyframes mv-zeiger { 0%, 30% { transform: translate(60px, 50px); opacity: 0; } 40% { opacity: 1; } 55%, 62% { transform: translate(0, 0); } 66% { transform: translate(0, 0) scale(.86); } 70%, 90% { transform: translate(0, 0); opacity: 1; } 100% { opacity: 0; } }
.mv-haken { animation: mv-haken 5s ease infinite; }
@keyframes mv-haken { 0%, 64% { opacity: 0; } 70%, 92% { opacity: 1; } 100% { opacity: 0; } }
/* Bewerbungen: Menschen schließen die Reihe */
.mv-person { animation: mv-antreten 4.8s var(--weich) infinite both; }
@keyframes mv-antreten { 0% { transform: translateX(150px); opacity: 0; } 18%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
/* Zeit: Daten laufen automatisch durch drei Programme */
.mv-lauf { offset-path: path("M58 110 H262"); animation: mv-lauf 2.6s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes mv-lauf { 0% { offset-distance: 0%; } 45%, 55% { offset-distance: 50%; } 100% { offset-distance: 100%; } }
/* Alles: der erste Hebel leuchtet */
.mv-wahl { animation: mv-wahl 4.4s ease infinite; }
@keyframes mv-wahl { 0%, 20% { fill: #241d17; } 35%, 90% { fill: rgba(244, 165, 58, .22); } 100% { fill: #241d17; } }
.mv-hoch { stroke-dasharray: 1; animation: mv-zeichnen 4.4s ease infinite; }
@media (max-width: 960px) {
  .ziele__kopf { grid-template-columns: 1fr; }
  .ziele__tafel { grid-template-columns: 1fr; }
  .tafel__vorschau { min-height: 0; padding: 22px 22px 34px; border-right: 0; border-bottom: 1px solid var(--linie-dunkel); }
  .tafel__vorschau svg { max-width: 300px; }
}
@media (max-width: 760px) {
  .ziele__kopf p { font-size: 17px; }
  .schildreihe { --schild: 64px; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  .schildreihe button { flex: 0 0 25%; }
  .schildreihe::before { display: none; }
  .schildreihe button { gap: 10px; padding: 14px 2px 12px; }
  .schildreihe b { font-size: 13.5px; }
  .schildreihe button[aria-selected="true"] .schild { transform: translateY(-6px) scale(1.12); }
  .schildreihe button[aria-selected="true"]::after { bottom: -6px; }
  .ziele__tafel { border-radius: 22px; margin-top: 10px; }
  .tafel__haupt { padding: 26px 20px 24px; }
  .tafel__satz { font-size: 26px; }
  .tafel__linie { gap: 10px; margin-top: 26px; }
  .tafel__linie li { font-size: 14.5px; }
  .tafel__linie li span { font-size: 19px; }
  .tafel__aktion { padding-top: 28px; }
  .tafel__aktion .knopf { width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: 12px; }
}
/* ---------- Bühne: fünf Aussagen, fünf Szenen ---------- */
.buehne { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; margin-top: calc(-1 * var(--kopf-h)); padding: calc(var(--kopf-h) + 30px) 0 30px; background: #15110e; color: var(--hell); }
.buehne__inhalt { --rahmen: 1320px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text kapitel" "vertrauen vertrauen"; align-items: end; column-gap: 48px; }
.buehne__text { grid-area: text; max-width: 700px; }
/* H1: kleine feste Zeile, darunter die wechselnde Aussage */
.buehne h1 { font-size: inherit; letter-spacing: 0; }
.titel__klein { display: flex; align-items: center; gap: 14px; font-size: clamp(17px, 1.35vw, 20px); font-weight: 600; letter-spacing: .005em; color: #e6d9c8; }
.titel__klein::before { content: ""; width: 34px; height: 1.5px; background: var(--bernstein); }
.titel__aussage, .aussage { display: block; margin-top: 16px; }
.aussage__a, .aussage__zeile--a { display: block; font: italic 400 clamp(58px, min(7.2vw, 11.6svh), 108px)/.94 var(--serif); letter-spacing: -.015em; color: var(--bernstein-licht); }
.aussage__b, .aussage__zeile--b { display: block; font: 600 clamp(42px, min(5.3vw, 8.5svh), 78px)/1 var(--grotesk); letter-spacing: -.03em; color: var(--hell); }
.aussagen { display: none; }
.js .titel__aussage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.js .aussagen { display: grid; }
.aussagen .aussage { grid-area: 1 / 1; }
.aussage__zeile { overflow: hidden; padding: 0 .12em .1em 0; margin-bottom: -.1em; }
.aussage__zeile > span { display: inline-block; transform: translateY(115%); }
.aussage.ist-aktiv .aussage__zeile > span { transform: none; transition: transform 1.15s cubic-bezier(.16, 1, .3, 1) .3s; }
.aussage.ist-aktiv .aussage__zeile--b > span { transition-delay: .4s; }
.aussage.geht .aussage__zeile > span { transform: translateY(-115%); transition: transform .65s cubic-bezier(.7, 0, .84, 0); }
.aussage.geht .aussage__zeile--b > span { transition-delay: .06s; }
.aussage__zeile--a > span { text-shadow: 0 0 40px rgba(244, 165, 58, .18); }
.lead-stapel { display: grid; margin-top: 20px; }
.lead-stapel > p { grid-area: 1 / 1; }
.buehne__lead { max-width: 31em; font-size: clamp(18px, 1.4vw, 20.5px); line-height: 1.55; color: #ece2d4; }
.js .lead-stapel > p { opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.js .lead-stapel > p.ist-aktiv { opacity: 1; transform: none; transition: opacity .8s .55s, transform .8s .55s var(--weich); }
.buehne .start { margin-top: 24px; }
/* Kapitel: Aussagen wählen, Fortschritt je Aussage (über der Überschrift, nie über Gesichtern) */
.kapitel { grid-area: kapitel; display: flex; align-items: flex-end; gap: 14px; max-width: 700px; margin: 0 0 26px; }
.kapitel[hidden] { display: none; }
.kapitel__punkt { --f: 0; position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; gap: 7px; padding: 0 0 12px; border: 0; background: none; color: rgba(246, 239, 230, .6); font: 600 14px/1.2 var(--grotesk); white-space: nowrap; text-align: left; cursor: pointer; transition: color .4s; }
.kapitel__punkt i { font: italic 400 16px/1 var(--serif); color: rgba(247, 187, 99, .65); }
.kapitel__punkt::before, .kapitel__punkt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: rgba(246, 239, 230, .18); }
.kapitel__punkt::after { right: auto; width: calc(100% * var(--f)); background: linear-gradient(90deg, var(--bernstein-tief), var(--bernstein-licht)); }
.kapitel__punkt:hover, .kapitel__punkt[aria-current="true"] { color: var(--hell); }
.kapitel__punkt[aria-current="true"] i { color: var(--bernstein-licht); }
.kapitel__pause { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: -2px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(246, 239, 230, .6); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .22); cursor: pointer; transition: color .3s, box-shadow .3s; }
.kapitel__pause:hover { color: var(--hell); box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .5); }
.kapitel__pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kapitel__pause svg { width: 12px; height: 12px; fill: currentColor; }
.buehne__inhalt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kapitel" "text" "vertrauen"; }
@media (min-width: 1100px) and (max-height: 800px) {
  .buehne { padding-top: calc(var(--kopf-h) + 12px); padding-bottom: 22px; }
  .kapitel { margin-bottom: 18px; }
  .titel__aussage, .aussage { margin-top: 10px; }
  .lead-stapel { margin-top: 14px; }
  .buehne .start { margin-top: 18px; }
}
@media (max-width: 1099px) {
  .buehne { min-height: 0; padding-top: calc(var(--kopf-h) + 150px); }
  .kapitel { gap: 6px; margin: 0 0 22px; }
  .kapitel__punkt { height: 22px; padding: 0; font-size: 0; }
  .kapitel__punkt i { display: none; }
  .kapitel__punkt::before, .kapitel__punkt::after { bottom: 9px; height: 3px; }
  .kapitel__pause { width: 26px; height: 26px; margin: 0 0 -2px 6px; }
}
@media (max-width: 760px) {
  .buehne { display: block; padding: calc(var(--kopf-h) + 136px) 0 26px; }
  .kapitel { margin-bottom: 10px; }
  .titel__klein { font-size: 15px; gap: 10px; }
  .titel__klein::before { width: 22px; }
  .titel__aussage, .aussage { margin-top: 10px; }
  .aussage__a, .aussage__zeile--a { font-size: clamp(40px, 11.6vw, 52px); line-height: .96; }
  .aussage__b, .aussage__zeile--b { font-size: clamp(31px, 8.9vw, 40px); line-height: 1.02; }
  .lead-stapel { margin-top: 10px; }
  .buehne__lead { font-size: 15px; line-height: 1.47; }
  .buehne .start { margin-top: 14px; }
}
/* ---------- Ziele: Feinschliff für die Schilde ---------- */
.ziele__kopf p { justify-self: end; font: italic 400 26px/1.2 var(--serif); color: var(--leise); }
.schildreihe button[aria-selected="true"] .schild::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(from var(--glanz, 0deg), rgba(255, 220, 160, 0) 0deg, rgba(255, 220, 160, .9) 40deg, rgba(255, 220, 160, 0) 90deg, rgba(255, 220, 160, 0) 360deg); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); animation: glanz 3.6s linear infinite; pointer-events: none; }
@property --glanz { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes glanz { to { --glanz: 360deg; } }
.schildreihe button:not([aria-selected="true"]) .schild .symbol { transition: transform .5s var(--weich); }
.schildreihe button:hover:not([aria-selected="true"]) .schild .symbol { transform: scale(1.08); }
@media (max-width: 960px) {
  .ziele__kopf p { justify-self: start; }
}
@media (max-width: 760px) {
  .ziele__kopf p { font-size: 21px; }
  .schildreihe { --schild: 62px; margin-top: 26px; }
  .schildreihe button { flex: 0 0 25%; gap: 9px; padding: 14px 2px 14px; }
  .schildreihe b { font-size: 13px; line-height: 1.2; }
  .schildreihe button[aria-selected="true"]::after { bottom: -9px; }
  .tafel__vorschau { padding: 16px 16px 44px; }
  .tafel__vorschau svg { max-width: 260px; }
  .tafel__satz { font-size: 24px; }
}
.bewegt .titel__klein, .bewegt .lead-stapel, .bewegt .buehne .start, .bewegt .kapitel { animation: auftritt 1s var(--weich) both; }
.bewegt .lead-stapel { animation-delay: .15s; }
.bewegt .buehne .start { animation-delay: .25s; }
.bewegt .kapitel { animation-delay: .5s; }
/* =====================================================================
   Variante H2 „Live“: kein Foto. Warme, dunkle Bühne mit feinem Raster und Lichtkegel, rechts eine Glasfläche.
   Je Aussage baut sich dort eine kleine, lesbare Oberfläche auf (HTML, CSS, SVG; Beispiele, keine echten Daten).
   ===================================================================== */
.buehne { background: radial-gradient(48% 60% at 79% 46%, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 72%), radial-gradient(70% 90% at 100% 100%, #1d1712, rgba(29, 23, 18, 0) 70%), #15110e; }
.buehne__bilder { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.flaeche__raster { position: absolute; inset: 0; background-image: linear-gradient(rgba(246, 239, 230, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 239, 230, .055) 1px, transparent 1px); background-size: 56px 56px; background-position: 50% 0; -webkit-mask-image: radial-gradient(46% 58% at 78% 48%, #000 0, rgba(0, 0, 0, .5) 50%, transparent 100%); mask-image: radial-gradient(46% 58% at 78% 48%, #000 0, rgba(0, 0, 0, .5) 50%, transparent 100%); }
.flaeche__kegel { position: absolute; top: -12%; left: 62%; width: 34%; height: 96%; rotate: 9deg; transform-origin: 50% 0; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 226, 182, .16), rgba(255, 214, 160, .05) 50%, rgba(255, 214, 160, 0) 78%); }
.buehne__licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(21, 17, 14, .9) 0%, rgba(21, 17, 14, 0) 22%); }
/* Raster: Text links, Glasfläche rechts */
.buehne__inhalt { grid-template-columns: minmax(0, 700px) minmax(0, 1fr); grid-template-areas: "kapitel live" "text live" "vertrauen vertrauen"; column-gap: clamp(32px, 4.4vw, 80px); }
@media (max-width: 1099px) {
  .buehne { padding-top: calc(var(--kopf-h) + 12px); background: radial-gradient(70% 40% at 60% 18%, rgba(244, 165, 58, .14), rgba(244, 165, 58, 0) 72%), #15110e; }
  .buehne__inhalt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "live" "kapitel" "text" "vertrauen"; }
  .flaeche__raster { -webkit-mask-image: radial-gradient(60% 34% at 40% 20%, #000, transparent); mask-image: radial-gradient(60% 34% at 40% 20%, #000, transparent); }
  .flaeche__kegel { left: 30%; width: 60%; height: 50%; }
}
@media (max-width: 760px) {
  .buehne { padding: calc(var(--kopf-h) - 2px) 0 26px; }
}