/* neu.css - erzeugt von tools/layout-neu-extrahieren.cjs aus DEMO/index.html. Nicht von Hand aendern, Quelle ist die Demo. */
/* ═══ Anlässe: Event-Karussell ═══ */
.evt-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.evt-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--pad) 20px;margin:0 calc(var(--pad) * -1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.evt-track::-webkit-scrollbar{display:none}
.evt{position:relative;flex:0 0 82%;height:min(560px,72svh);border-radius:var(--r-lg);overflow:hidden;scroll-snap-align:start;scroll-margin-left:var(--pad);text-decoration:none;color:var(--text);isolation:isolate;border:1px solid var(--line)}
.evt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.evt::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(var(--bg-rgb),.55) 0%,rgba(var(--bg-rgb),.12) 20%,rgba(var(--bg-rgb),.22) 36%,rgba(var(--bg-rgb),.7) 62%,rgba(var(--bg-rgb),.95) 100%)}
.evt-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px}
.evt-num{position:absolute;top:18px;left:22px;z-index:2;font-family:var(--font-head);font-size:1.25rem;letter-spacing:.1em;color:var(--gold-2)}
.evt-badge{position:absolute;top:16px;right:16px;z-index:2;padding:6px 12px;border-radius:999px;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(var(--bg-rgb),.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line-2);color:var(--gold-2)}
.evt .vt{display:none}
.evt h3{font-family:var(--font-h);font-weight:600;font-size:clamp(24.8px,3.1vw,39.7px);line-height:1.08;margin:0 0 10px;letter-spacing:-.01em}
.evt p{margin:0 0 14px;color:rgba(255,255,255,.86);font-size:0.9375rem;line-height:1.55}
.evt .more{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--gold-2);font-weight:500;font-size:0.875rem;letter-spacing:.06em}
.evt .more i{transition:transform .3s;font-style:normal}
.evt:hover .more i{transform:translateX(5px)}
.evt-dots{display:flex;gap:8px;justify-content:center;margin-top:6px}
.evt-dots i{width:8px;height:8px;border-radius:50%;background:var(--faint);transition:transform .3s,background-color .3s}
.evt-dots i.on{background:var(--gold);transform:scale(1.3)}
@media (min-width:1000px){
  .evt-track{overflow:visible;padding:0;margin:0;height:600px}
  .evt{flex:1 1 0;height:100%;transition:flex-grow .8s var(--ease),border-color .4s;min-width:0}
  .evt-track:hover .evt,.evt-track:focus-within .evt{flex-grow:.8}
  .evt-track .evt:hover,.evt-track .evt:focus-visible{flex-grow:3.2;border-color:var(--line-2)}
  .evt.lead-card{flex-grow:2.4}
  .evt-track:hover .evt.lead-card:not(:hover){flex-grow:.8}
  .evt:hover img{transform:scale(1.06)}
  .evt p,.evt .more{opacity:0;transform:translateY(14px);transition:opacity .5s .15s,transform .5s .15s var(--ease)}
  .evt h3{white-space:nowrap;transition:opacity .4s}
  .evt-badge{transition:opacity .4s}
  .evt .vt{display:block;position:absolute;left:22px;bottom:26px;z-index:2;font-family:var(--font-head);font-size:40px;line-height:1;letter-spacing:.04em;writing-mode:vertical-rl;transform:rotate(180deg);transition:opacity .4s;white-space:nowrap}
  .evt h3,.evt-badge{opacity:0}
  .evt.lead-card h3,.evt:hover h3,.evt:focus-visible h3,.evt.lead-card .evt-badge,.evt:hover .evt-badge,.evt:focus-visible .evt-badge{opacity:1}
  .evt.lead-card .vt,.evt:hover .vt,.evt:focus-visible .vt{opacity:0}
  .evt-track:hover .evt.lead-card:not(:hover) h3,.evt-track:hover .evt.lead-card:not(:hover) .evt-badge{opacity:0}
  .evt-track:hover .evt.lead-card:not(:hover) .vt{opacity:1}
  .evt:hover p,.evt:hover .more,.evt:focus-visible p,.evt:focus-visible .more,.evt.lead-card p,.evt.lead-card .more{opacity:1;transform:none}
  .evt-track:hover .evt.lead-card:not(:hover) p,.evt-track:hover .evt.lead-card:not(:hover) .more{opacity:0}
  .evt-body{max-width:520px}
  .evt-dots{display:none}
}

/* ═══ Über mich ═══ */
.about{display:grid;gap:48px;align-items:center}
.about-img{position:relative;max-width:520px}
.about-img .frame{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/5}.about-img .frame img{width:100%;height:100%;object-fit:cover;object-position:center 15%;filter:contrast(1.05)}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-img .ring{position:absolute;inset:-18px;width:auto;height:auto;transform:none;border:1px solid var(--line-2);border-radius:calc(var(--r-lg) + 18px);pointer-events:none}
.about-img .since{position:absolute;right:-10px;bottom:-24px;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--gold);color:#1a1206;font-family:var(--font-head);line-height:.9;box-shadow:0 20px 50px -14px rgba(var(--gold-rgb),.6)}
.since b{display:block;font-size:44px;font-weight:400}
.since small{font-family:var(--font-body);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.spin-text{position:absolute;inset:-6px;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.about p{color:var(--muted);margin:0 0 16px}
.about p strong{color:var(--text);font-weight:500}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.fact{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:rgba(255,255,255,.02)}
.fact b{display:block;font-size:0.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:4px}
.fact span{font-size:0.9375rem;color:var(--text)}
@media (min-width:900px){.about{grid-template-columns:5fr 6fr;gap:90px}}

/* ═══ Wellen-Trenner ═══ */
.wave{display:flex;align-items:center;gap:3px;height:64px;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wave i{flex:1;height:100%;background:var(--gold);border-radius:3px;transform:scaleY(.06);opacity:.35;transition:transform .55s var(--ease),opacity .55s}
.wave.in i{transform:scaleY(var(--h));opacity:var(--o,.8)}

/* ═══ Leistungen: Bento ═══ */
.bento{display:grid;gap:14px;margin-top:48px;grid-template-columns:1fr}
.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);min-height:300px;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;transition:border-color .4s,transform .5s var(--ease)}
.tile:hover{border-color:var(--line-2)}
.bento.bx .tile{transition:border-color .4s;will-change:transform,opacity}
.bento.bx .tile.lock{pointer-events:none}
.tile>img,.tile .stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease),opacity 1s}
.tile:hover>img{transform:scale(1.05)}
.tile.has-img::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--bg-rgb),.05) 0%,rgba(var(--bg-rgb),.4) 30%,rgba(var(--bg-rgb),.9) 56%,rgba(var(--bg-rgb),.97))}
@media (min-width:700px) and (max-width:1079px){.tile{min-height:380px}}
.tile h3{font-family:var(--font-h);font-weight:600;font-size:clamp(18.6px,1.9vw,26px);line-height:1.08;margin:0 0 12px;position:relative;letter-spacing:-.01em}
.tile p{margin:0;color:rgba(255,255,255,.86);font-size:0.9375rem;line-height:1.55;position:relative}
.tile>*{flex-shrink:0}
/* Kleine Bildkacheln (Fotostation, Feierblick, Uplights): hoch genug, damit der Text nur das untere Drittel belegt und das Bild sichtbar bleibt (13.10.2026) */
.tile.has-img:not(.t-live):not(.t-tech):not(.t-genre):not(.t-extra){min-height:460px}
.tile.text{min-height:340px}
.tag{position:absolute;top:18px;left:18px;padding:6px 12px;border-radius:999px;font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;background:rgba(var(--bg-rgb),.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line-2);color:var(--gold-2)}
.tile.text{background:linear-gradient(160deg,var(--surface-2),var(--surface));justify-content:space-between}
.tile.text .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(var(--gold-rgb),.12);color:var(--gold);border:1px solid var(--line-2)}
.tile.text .ico svg{width:24px;height:24px}
.audio-wave{display:flex;align-items:center;gap:3px;height:46px;margin:18px 0;flex-shrink:0}
.audio-wave i{flex:1;background:var(--gold-2);border-radius:2px;height:100%;transform:scaleY(.2);animation:eq 1.4s ease-in-out infinite alternate;opacity:.7}
@media (min-width:700px){.bento{grid-template-columns:1fr 1fr}.t-live,.t-tech,.t-genre{grid-column:span 2}}
@media (min-width:1080px){
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(300px,auto);grid-template-areas:"live live up foto" "live live up foto" "tech tech feier audio" "tech tech feier back" "genre genre plan aufbau"}
  .tile,.tile.has-img:not(.t-live):not(.t-tech):not(.t-genre):not(.t-extra),.tile.text{min-height:0}
  .t-live{grid-area:live}.t-up{grid-area:up}.t-foto{grid-area:foto}.t-feier{grid-area:feier}.t-tech{grid-area:tech}.t-audio{grid-area:audio}.t-genre{grid-area:genre}.t-aufbau{grid-area:aufbau}.t-back{grid-area:back}.t-plan{grid-area:plan}
}

/* ═══ DJ+ Live-Bühne ═══ */
.djp{background:radial-gradient(ellipse 60% 50% at 80% 20%,rgba(var(--gold-rgb),.12),transparent 70%),var(--bg-2)}
.djp-grid{display:grid;gap:14px;margin-top:48px;grid-template-columns:1fr}
.djp .dp-more{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.djp .dp-more .lead{max-width:760px}
.dp-more .dp-t{font-family:var(--font-h);font-weight:600;font-size:clamp(17.4px,2.1vw,24.8px);margin:6px 0 10px;line-height:1.08;letter-spacing:-.01em}
.dp-list{list-style:none;margin:18px 0 22px;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:480px){.dp-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.dp-list{grid-template-columns:repeat(4,1fr)}}
.dp-list li{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.dp-list b{display:block;font-weight:600}
.dp-list span{display:block;margin-top:2px;font-size:0.8125rem;color:var(--muted)}
.inst{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/12;border:1px solid var(--line);isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;transition:border-color .4s}
.inst:hover{border-color:var(--line-2)}
.inst img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 50%;z-index:-2;transition:transform 1.2s var(--ease)}
.inst::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--bg-rgb),0) 20%,rgba(var(--bg-rgb),.55) 50%,rgba(var(--bg-rgb),.95))}
.inst:hover img{transform:scale(1.08)}
.inst .inst-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 50%;z-index:-2;opacity:0;transition:opacity .9s ease,transform 1.2s var(--ease);pointer-events:none}.inst .inst-vid.on{opacity:1;transition:opacity .6s ease,transform 1.2s var(--ease)}.inst:hover .inst-vid{transform:scale(1.08)}.inst.band .inst-vid{object-position:50% 40%}
.inst[role=button]{cursor:pointer}.inst-flip img,.inst-flip .inst-vid{transform:scaleX(-1)}.inst-flip:hover img,.inst-flip:hover .inst-vid{transform:scale(-1.08,1.08)}.inst-pin{border-color:var(--gold)}.inst-pin .ieq{opacity:1}.inst[role=button]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.inst .num{position:absolute;top:18px;left:22px;font-family:var(--font-head);font-size:1.25rem;letter-spacing:.1em;color:var(--gold-2)}
.inst .ieq{position:absolute;top:20px;right:22px;display:flex;align-items:flex-end;gap:3px;height:22px;opacity:.55;transition:opacity .4s}
.inst .ieq i{width:3px;height:100%;background:var(--gold);border-radius:2px;transform-origin:bottom;animation:eqm .9s ease-in-out infinite alternate}
.inst .ieq i:nth-child(2){animation-delay:-.3s}.inst .ieq i:nth-child(3){animation-delay:-.6s;animation-duration:1.1s}.inst .ieq i:nth-child(4){animation-delay:-.15s;animation-duration:.75s}
.inst:hover .ieq{opacity:1}
.inst .kick{font-family:var(--font-serif);font-style:italic;color:var(--gold-2);font-size:1.125rem;margin:0 0 2px}
.inst h3{font-family:var(--font-h);font-weight:600;font-size:clamp(18.6px,1.6vw,23.6px);line-height:1.08;margin:0 0 8px;letter-spacing:-.01em}
.inst p{margin:0 0 10px;color:var(--muted);font-size:0.9063rem;line-height:1.55}
.inst small{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.inst.band{aspect-ratio:auto;min-height:440px}
.inst.band img{object-position:50% 40%}
.inst.band .body{max-width:620px}
@media (min-width:700px){.djp-grid{grid-template-columns:1fr 1fr}.inst.band{grid-column:1/-1}}
@media (min-width:1080px){.djp-grid{grid-template-columns:repeat(4,1fr)}.inst{aspect-ratio:3/4.3}.inst.band{min-height:460px}}

/* ═══ Statement mit Parallax ═══ */
.statement{position:relative;min-height:88svh;display:grid;place-items:center;overflow:hidden;text-align:center;isolation:isolate}
.statement .bgimg{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.statement .bgimg img{width:100%;height:100%;object-fit:cover}
.statement::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(var(--bg-rgb),.55),rgba(var(--bg-rgb),.92) 75%),linear-gradient(180deg,var(--bg),transparent 18%,transparent 82%,var(--bg))}
.statement blockquote{margin:0;padding:0 var(--pad);max-width:1100px}
.statement .big{font-family:var(--font-serif);font-style:italic;font-size:clamp(34px,6.2vw,88px);line-height:1.08;margin:0}
.statement .big .w{display:inline-block;opacity:.5;transition:opacity .5s}
.statement .big .w.on{opacity:1}
.statement .big .gw.on{color:var(--gold-2)}
.statement cite{display:block;margin-top:28px;font-style:normal;font-size:0.8125rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

/* ═══ Bewertungen ═══ */
.rv-top{display:grid;gap:36px;align-items:end;margin-bottom:54px;position:relative;z-index:3}
.score{display:flex;align-items:center;gap:22px}
.score b{font-family:var(--font-head);font-weight:400;font-size:clamp(100px,14vw,170px);line-height:.8;background:linear-gradient(180deg,var(--gold-2),var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.score .stars{color:var(--gold);font-size:24px;letter-spacing:4px}
.score small{display:block;color:var(--muted);font-size:0.875rem;margin-top:4px}
.gbtn{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:12px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.03);text-decoration:none;font-size:0.875rem;font-weight:500;letter-spacing:.04em;color:var(--text);transition:transform .35s var(--ease),border-color .25s}
@media(hover:hover){.gbtn:hover{border-color:var(--gold);transform:translateY(-2px)}}
.score .gsub{display:block;margin-top:6px;font-size:0.8125rem;color:var(--muted)}
.gdots{display:flex;gap:3px}.gdots i{width:7px;height:7px;border-radius:50%}
@media (min-width:900px){.rv-top{grid-template-columns:1.3fr 1fr}}
.rv-band{overflow:hidden;overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rv-row{display:flex;gap:0;width:max-content;animation:mq 220s linear infinite;padding:6px 0;align-items:stretch}
/* Konzept C: zwei Reihen gleicher Höhe, Breite nach Textlänge */
.rv-grid{--rh:18.75rem;--cw:10rem;display:grid;grid-auto-flow:column dense;grid-template-rows:minmax(var(--rh),auto);grid-auto-columns:var(--cw);gap:14px;padding-right:14px;width:max-content}
.rv-grid .card{width:auto;min-width:0;min-height:0;padding:18px 20px;gap:10px;overflow:hidden;border-radius:20px}
.rv-grid .card .q{font-size:1rem;line-height:1.5;flex:1 1 auto;min-height:0}
.rv-grid .card .who{gap:10px}.rv-grid .card .av{width:36px;height:36px;font-size:0.75rem;flex:none}
.rv-grid .card .who b{font-size:0.875rem}.rv-grid .card .who small{font-size:0.75rem}
.rv-grid .card .rv-full{min-height:32px;font-size:0.8125rem}
.rv-grid .w2{grid-column:span 2}.rv-grid .w3{grid-column:span 3}.rv-grid .w4{grid-column:span 4}.rv-grid .w5{grid-column:span 5}
/* Mobil: eine Reihe, schmalere Spalten, damit keine Karte breiter als der Bildschirm wird */
@media (max-width:899px){.rv-grid{--rh:26.75rem;--cw:6.75rem;grid-template-rows:minmax(var(--rh),auto)}.rv-grid .w3{grid-column:span 2}.rv-grid .w4{grid-column:span 3}.rv-grid .w5{grid-column:span 3}.rv-grid .card{padding:16px}.rv-grid .card .q{font-size:0.9375rem}}
.rv-row.rev{animation-direction:reverse;margin-top:8px}
.rv-row:empty{display:none}
.rv-row:hover,.rv-row:focus-within,.rv-band.rv-off .rv-row{animation-play-state:paused}
/* Fokuszone (Effekte 1-3): Sterne füllen sich, Karte hebt sich (ohne scale), Gold-Wörter glimmen */
.rv-band{padding:14px 0;margin:-14px 0}
.rv-band .card{filter:brightness(.82);transition:transform .5s var(--ease),filter .5s,border-color .5s,box-shadow .5s}
.rv-band .card.focus{transform:translateY(-5px);filter:brightness(1.06);border-color:rgba(var(--gold-rgb),.5);box-shadow:0 22px 40px -18px rgba(0,0,0,.7),0 0 0 1px rgba(var(--gold-rgb),.18)}
.rv-band .card .stars span{display:inline-block;opacity:.55;transition:opacity .35s,transform .35s}
.rv-band .card.focus .stars span{opacity:1;transform:scale(1.15)}
.rv-band .card.focus .stars span:nth-child(1){transition-delay:.05s}.rv-band .card.focus .stars span:nth-child(2){transition-delay:.15s}.rv-band .card.focus .stars span:nth-child(3){transition-delay:.25s}.rv-band .card.focus .stars span:nth-child(4){transition-delay:.35s}.rv-band .card.focus .stars span:nth-child(5){transition-delay:.45s}
.rv-band .rv-hl{transition:color .8s,text-shadow .8s}
.rv-band .card.focus .rv-hl{color:#FFE2B0;text-shadow:0 0 14px rgba(239,193,134,.75),0 0 3px rgba(239,193,134,.5)}
@media (prefers-reduced-motion:reduce){.rv-band .card,.rv-band .card.focus{filter:none;transform:none;box-shadow:none;border-color:var(--line)}.rv-band .card .stars span{opacity:1;transform:none}.rv-band .card.focus .rv-hl{color:var(--gold-2);text-shadow:none}}
.card{width:min(440px,84vw);flex-shrink:0;padding:26px;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.card .stars{color:var(--gold);letter-spacing:3px;font-size:0.9375rem}
.card .q{margin:0;font-family:var(--font-serif);font-style:italic;font-size:1.0625rem;line-height:1.55;color:var(--text)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rv-nr{padding:4px 10px;border-radius:999px;font-size:0.75rem;font-weight:600;letter-spacing:.06em;color:#1a1206;background:linear-gradient(135deg,var(--gold-2),var(--gold))}
/* Hervorhebung nur per Farbe (Betreiber 07.10.2026): kein Hintergrund, keine Unterstreichung */
.rv-hl{background:none;color:var(--gold-2);padding:0;font-style:inherit;font-weight:inherit;text-decoration:none}
.rv-full{align-self:flex-start;min-height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--gold-2);font-size:0.875rem;font-weight:500}
.rv-full:hover{text-decoration:underline}
.rv-stats{display:flex;gap:22px;margin-top:10px}
.rv-stats b{display:block;font-family:var(--font-head);font-weight:400;font-size:30px;line-height:1;color:var(--gold-2)}
.rv-stats span{font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.rv-cta{text-align:center;margin:30px 0 0}
.claim{margin:40px auto 0;max-width:620px}
.claim h3{font-family:var(--font-h);font-weight:600;font-size:clamp(19.8px,2.5vw,29.8px);margin:6px 0 12px;letter-spacing:-.01em}
.claim h3 span{color:var(--gold-2)}
.claim p{color:var(--muted);margin:0;font-size:1.0625rem}
.evt-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:18px 0 0}
.evt-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-2);text-decoration:none;font-size:0.875rem;font-weight:500}
.about-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.extras-note{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:22px;padding:22px 24px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:rgba(var(--gold-rgb),.06)}
.extras-note b{font-family:var(--font-head);font-weight:400;font-size:28px}
.extras-note p{margin:0;color:var(--muted);flex:1 1 300px}
.sheet-solo .sheet-box{grid-template-columns:1fr!important;max-width:720px}
.sheet-solo .sheet-text{padding-top:54px}
.card .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.card .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:0.8125rem;font-weight:600;color:#1a1206;background:linear-gradient(135deg,var(--gold-2),var(--gold-deep))}
.card .who b{display:block;font-weight:500;font-size:0.9375rem}
.card .who small{color:var(--dim);font-size:0.8125rem}
/* Effekt 5: Quellen-Hinweis „Google“ (alle Bewertungen stammen laut Hauptseite von Google; kein „verifiziert“), erscheint in der Fokuszone */
.card .who>div{min-width:0}
.card .gv{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;font-size:0.6875rem;color:rgba(255,255,255,.72);opacity:0;transform:translateX(6px);transition:opacity .5s,transform .5s}
.card .gv svg{width:13px;height:13px;color:#7fd39a}
.rv-band .card.focus .gv{opacity:1;transform:none}
@media (max-width:899px){.rv-grid .w2 .gv{display:none}}
@media (prefers-reduced-motion:reduce){.card .gv{opacity:1;transform:none;transition:none}}

/* ═══ Peekaboo: Micha lugt über Kanten (nur ab 900px) ═══ */
.pk-host{position:relative}
.pk{position:absolute;display:none;pointer-events:none;height:auto;opacity:0;transform:translateY(70px);transition:opacity .5s var(--ease),transform .6s var(--ease);filter:drop-shadow(2px 5px 7px rgba(0,0,0,.28))}
.pk-host.in .pk{opacity:1;transform:none}
.pk-rv{bottom:-50px;left:calc(clamp(34px,3.2vw,60px) - var(--pw) / 2);width:var(--pw);z-index:4}
/* Zwei Ebenen mit echtem Alpha: Hintergrundbild (ganz) hinter der Karte, Vordergrundbild (nur die Ellbogen, entlang der echten Konturen ausgeschnitten) ueber der Karte. Kartenkante = Bildzeile 1012 von 1230. */
.pk-mix{--pw:clamp(350px,34vw,520px);bottom:calc(100% - var(--pw)*.1428);right:-14px;width:var(--pw);z-index:0}.pk-mix-f{z-index:3}
.pk-blog{--pw:clamp(300px,26vw,410px);top:calc(var(--pw)*-.74);right:calc(16.667% - var(--pw)/2);width:var(--pw);z-index:2}
@media (min-width:900px){.score.pk-host{--pw:clamp(320px,27.5vw,420px);padding-bottom:calc(var(--pw)*.67 - 135px)}.pk{display:block}.rv-stage{margin-top:0}.rv-top{margin-bottom:46px}.player-wrap{margin-top:calc(clamp(350px,34vw,520px)*.66 - 30px)}.lp-wrap{margin-top:150px!important}}
/* ═══ Mixes ═══ */
.mix{display:grid;gap:50px;align-items:center;grid-template-columns:minmax(0,1fr)}
.player-wrap{min-width:0}
.deck{position:relative;width:min(100%,460px);aspect-ratio:1;margin:0 auto}
.vinyl{position:absolute;inset:0;border-radius:50%;background:
  radial-gradient(circle,#0e0e0e 0 17%,transparent 17.4%),
  radial-gradient(circle closest-side,transparent 0 97%,rgba(255,255,255,var(--rv-rim,.07)) 97.8% 99%,transparent 99.6%),   /* glatter Rand der Platte */
  radial-gradient(circle closest-side,transparent 0 46%,rgba(255,255,255,.045) 46.6% 49.4%,transparent 50%),   /* glatte Auslaufrille am Label */
  radial-gradient(circle closest-side,transparent calc(var(--rv-w1,60%) - .4%),rgba(255,255,255,var(--rv-wa,0)) var(--rv-w1,60%) calc(var(--rv-w1,60%) + var(--rv-ww,2%)),transparent calc(var(--rv-w1,60%) + var(--rv-ww,2%) + .4%)),   /* Abrieb-Ring von der Huelle */
  radial-gradient(circle closest-side,transparent calc(var(--rv-g1,59.8%) - .4%),rgba(0,0,0,.6) var(--rv-g1,59.8%) calc(var(--rv-g1,59.8%) + var(--rv-gw,1.4%)),transparent calc(var(--rv-g1,59.8%) + var(--rv-gw,1.4%) + .4%)),   /* Pausen zwischen den Stuecken: glatter, dunkler */
  radial-gradient(circle closest-side,transparent calc(var(--rv-g2,72.3%) - .4%),rgba(0,0,0,.6) var(--rv-g2,72.3%) calc(var(--rv-g2,72.3%) + var(--rv-gw,1.4%)),transparent calc(var(--rv-g2,72.3%) + var(--rv-gw,1.4%) + .4%)),
  radial-gradient(circle closest-side,transparent calc(var(--rv-g3,84.8%) - .4%),rgba(0,0,0,var(--rv-g3a,.6)) var(--rv-g3,84.8%) calc(var(--rv-g3,84.8%) + var(--rv-gw,1.4%)),transparent calc(var(--rv-g3,84.8%) + var(--rv-gw,1.4%) + .4%)),
  repeating-radial-gradient(circle closest-side,rgba(255,255,255,var(--rv-ba,.018)) 0 var(--rv-bp,11px),transparent var(--rv-bp,11px) calc(var(--rv-bp,11px) * 2.4)),   /* weiche Dichte-Baender */
  repeating-radial-gradient(circle closest-side,var(--rv-gd,#030303) 0 1px,var(--rv-gl,#151515) 1px var(--rv-gp,2.1px)),var(--rv-base,#070707);
  box-shadow:0 0 0 2px #040404,0 3px 6px rgba(0,0,0,.75),0 22px 40px -16px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.06);
  will-change:transform}
/* feine Abnutzung dieser Platte: Fingerfleck und Haarkratzer (drehen mit; kein neues Element im Seitenaufbau) */
.vinyl::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse 22% 14% at var(--rv-fx,50%) var(--rv-fy,50%),rgba(255,255,255,var(--rv-fa,0)),transparent),
  conic-gradient(from var(--rv-s1,0deg) at 50% 50%,transparent 0 .5%,rgba(255,255,255,var(--rv-sa,0)) .7%,transparent 1.1%),
  conic-gradient(from var(--rv-s2,0deg) at 50% 50%,transparent 0 .4%,rgba(255,255,255,var(--rv-sa,0)) .6%,transparent .9%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 var(--rv-si,55%),#000 calc(var(--rv-si,55%) + 1%) var(--rv-so,90%),transparent calc(var(--rv-so,90%) + 1%));mask:radial-gradient(circle closest-side,transparent 0 var(--rv-si,55%),#000 calc(var(--rv-si,55%) + 1%) var(--rv-so,90%),transparent calc(var(--rv-so,90%) + 1%))}
/* Glanz steht still, nur Rillen und Label drehen (wie echtes Vinyl) */
.gloss{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from var(--rv-ga,20deg),transparent 0 5%,rgba(255,255,255,calc(var(--rv-gi,.27) * .26)) 8%,rgba(255,255,255,var(--rv-gi,.27)) 11.5%,rgba(255,255,255,calc(var(--rv-gi,.27) * .26)) 15%,transparent 19% 52%,rgba(255,255,255,calc(var(--rv-gi,.27) * .2)) 55%,rgba(255,255,255,calc(var(--rv-gi,.27) * .7)) 58.5%,rgba(255,255,255,calc(var(--rv-gi,.27) * .2)) 62%,transparent 66%),conic-gradient(from 38deg,transparent 0 .8%,rgba(255,255,255,.2) 1.1%,transparent 1.5% 49%,rgba(255,255,255,.14) 49.4%,transparent 49.8%),radial-gradient(circle at 30% 22%,rgba(255,255,255,.06),transparent 45%)}
.vinyl .label{position:absolute;inset:28%;border-radius:50%;overflow:hidden;filter:sepia(var(--rv-age,0)) saturate(var(--rv-sat,1));background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--lb,#C98B2C) 78%,#fff),var(--lb,#C98B2C) 55%,color-mix(in srgb,var(--lb,#C98B2C) 58%,#000));box-shadow:0 0 0 5px #0b0b0b,0 0 0 6px rgba(255,255,255,.08),inset 0 0 14px rgba(0,0,0,.35)}
/* Plattenwechsel: leerer Plattenteller mit Spindel, fliegende Platten */
.deck-plate{position:absolute;inset:calc(-13px - 3.4%);border-radius:50%;background:radial-gradient(circle closest-side,#15171a 0 93%,#0f1113 100%);box-shadow:0 18px 40px -12px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.07)}
.deck-plate::before{content:'';position:absolute;inset:3.25%;border-radius:50%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .6  0 0 0 0 .65  0 0 0 .55 -.22'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),radial-gradient(circle,#1b1e21 0 40%,#141618 100%);box-shadow:0 0 0 2px rgba(0,0,0,.65),inset 0 0 22px #000}   /* Slipmat aus Filz */
.deck-plate::after{content:'';position:absolute;inset:3.25%;border-radius:50%;box-shadow:0 0 0 1.6px #cfd3d7,0 0 0 3px rgba(0,0,0,.5);pointer-events:none}   /* feine Chromkante */
.dp-strobe{position:absolute;inset:calc(-13px - 3.4%);border-radius:50%;pointer-events:none}
.dp-strobe svg{display:block;width:100%;height:100%}
.dp-strobe text{paint-order:stroke}
.dp-pitch{position:absolute;inset:calc(-13px - 3.4%);border-radius:50%;pointer-events:none;z-index:1;mix-blend-mode:screen;background:conic-gradient(from 200deg,transparent 0,rgba(255,40,20,.5) 7deg,rgba(255,120,90,.95) 20deg,rgba(255,40,20,.55) 33deg,transparent 42deg,transparent);-webkit-mask:radial-gradient(circle closest-side,transparent 0 90%,#000 92% 99.5%,transparent 100%);mask:radial-gradient(circle closest-side,transparent 0 90%,#000 92% 99.5%,transparent 100%);filter:blur(1.2px);opacity:0;transition:opacity .5s}   /* rotes Licht auf den Lochring, in Richtung Knopf */
.dp-lamp{position:absolute;left:calc(50% + (50% + 13px + 3.4%)*1.21*-.707 - 6%);top:calc(50% + (50% + 13px + 3.4%)*1.21*.707 - 6%);width:12%;height:12%;border-radius:50%;z-index:3;pointer-events:none;background:repeating-conic-gradient(from 0deg,#17191c 0 3deg,#3d4146 3deg 6deg);box-shadow:0 5px 8px -2px #000,0 0 0 2px #0a0b0c,0 0 0 3px #2b2e32}   /* Drehknopf OFF/ON mit gerändeltem Rand */
.dp-lamp::before{content:'';position:absolute;inset:16%;border-radius:50%;background:linear-gradient(#e9ecee,#e9ecee) 50% 5%/7% 26% no-repeat,conic-gradient(from 20deg,#2a2d31,#8a9097 15%,#2a2d31 30%,#9aa0a6 50%,#2a2d31 70%,#8a9097 85%,#2a2d31);box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.7)}
.dp-lamp::after{content:'';position:absolute;inset:-9%;border-radius:50%;background:conic-gradient(transparent 0 3%,rgba(255,70,40,.98) 9% 30%,transparent 37%);-webkit-mask:radial-gradient(circle closest-side,transparent 0 80%,#000 82% 93%,transparent 95%);mask:radial-gradient(circle closest-side,transparent 0 80%,#000 82% 93%,transparent 95%);filter:drop-shadow(0 0 5px #ff3b1f);opacity:0;transition:opacity .5s}   /* roter Leuchtring, an beim Spielen */
.deck.play .dp-lamp::after{opacity:1}
.dp-dome{position:absolute;left:calc(50% + (50% + 13px + 3.4%)*1.16*-.707 - 7%);top:calc(50% - (50% + 13px + 3.4%)*1.16*.707 - 7%);width:14%;height:14%;border-radius:50%;z-index:3;pointer-events:none;background:radial-gradient(circle at 38% 30%,#3d4146 0,#17191b 55%,#0a0b0c 100%);box-shadow:0 6px 10px -3px #000,inset 0 1px 1px rgba(255,255,255,.14),0 0 0 2px #0b0c0d,0 0 0 3px #272a2e}   /* Kuppel links oben (Halter fuer den 45er-Adapter) */
.dp-dome::before{content:'';position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle at 40% 32%,#25282b,#0d0e10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.6)}
.dp-dome::after{content:'';position:absolute;inset:43%;border-radius:50%;background:#050607;box-shadow:inset 0 1px 2px #000,0 0 0 1px rgba(255,255,255,.08)}
.dp-lamp .lamp-lbl{position:absolute;left:-60%;top:-60%;width:220%;height:220%;overflow:visible;pointer-events:none;font:600 5.6px ui-monospace,Consolas,monospace;letter-spacing:.3px;fill:#9aa0a6}
.dp-lamp .lamp-lbl .pit circle{fill:#9aa0a6}
.deck.play .dp-pitch{opacity:1}
.dp-sheen{position:absolute;inset:calc(-13px - 3.4%);border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 18%,rgba(255,255,255,.2) 24%,transparent 31% 62%,rgba(255,255,255,.12) 69%,transparent 76%);mix-blend-mode:screen;opacity:.55;animation:dpSheen 18s linear infinite}
.deck.empty .dp-sheen{display:none}   /* ohne Platte steht der Teller still: keine drehende Strahlung */
.dp-sheen{animation-play-state:paused}.deck.play .dp-sheen{animation-play-state:running}
@keyframes dpSheen{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dp-sheen{animation:none}}
.spindle{position:absolute;left:50%;top:50%;width:3.4%;height:3.4%;margin:-1.7% 0 0 -1.7%;border-radius:50%;background:radial-gradient(circle at 36% 28%,#fff 0 10%,#d4d7da 28%,#8b9096 58%,#3a3e42);box-shadow:0 1px 3px rgba(0,0,0,.8),0 0 0 1.5px rgba(0,0,0,.3);z-index:1;pointer-events:none;transition:transform .28s cubic-bezier(.3,1.7,.5,1),opacity .12s}
.spindle.off{transform:scale(0);opacity:0}
.deck.away .vinyl,.deck.away>.gloss,.deck.empty .vinyl,.deck.empty>.gloss{visibility:hidden}
.fly-layer{position:fixed;inset:0;overflow:hidden;z-index:90;pointer-events:none}
.fly-in{position:absolute;left:0;top:0;width:0;height:0}
.fly{position:absolute;z-index:1;pointer-events:none;will-change:transform}
.fly .vinyl{animation:none}
.pulse{position:absolute;left:50%;top:50%;width:5%;height:5%;margin:-2.5% 0 0 -2.5%;border-radius:50%;border:2px solid var(--gold-2);pointer-events:none;z-index:2;animation:pulseOut .6s ease-out forwards}
@keyframes pulseOut{from{opacity:.95;transform:scale(1)}to{opacity:0;transform:scale(5)}}
/* Tonarm greifbar (Spulen ueber die Plattenbreite) */
.arm .bar,.arm .armhead{pointer-events:auto;cursor:grab;touch-action:none}
.arm .bar::after{content:'';position:absolute;left:-12px;right:-12px;top:0;bottom:0}
.deck.armdrag,.deck.armdrag *{cursor:grabbing!important}
.vinyl .label img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:sepia(.4) contrast(1.1)}
.vinyl .label svg{display:block}
.pivot{position:absolute;left:104.5%;top:11%;width:0;height:0;pointer-events:none;z-index:3}
.pivot::before{content:'';position:absolute;width:calc(var(--dk,380px)*.17);height:calc(var(--dk,380px)*.17);margin:calc(var(--dk,380px)*-.085) 0 0 calc(var(--dk,380px)*-.085);border-radius:50%;background:radial-gradient(circle,#101214 0 62%,#0a0b0c 100%);box-shadow:0 0 0 2px #2a2d31,0 0 0 4px rgba(0,0,0,.5),inset 0 0 12px #000,0 8px 14px rgba(0,0,0,.5)}   /* runde Mulde um das Armlager */
.pivot::after{content:'';position:absolute;width:calc(var(--dk,380px)*.052);height:calc(var(--dk,380px)*.052);margin:calc(var(--dk,380px)*-.026) 0 0 calc(var(--dk,380px)*-.026);border-radius:50%;background:radial-gradient(circle at 36% 30%,#7b8187 0 12%,#2a2d31 45%,#0b0c0d);box-shadow:0 0 0 2px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.6)}
.pivot .dial{position:absolute;left:calc(var(--dk,380px)*.045);top:calc(var(--dk,380px)*.03);width:calc(var(--dk,380px)*.04);height:calc(var(--dk,380px)*.04);margin:calc(var(--dk,380px)*-.02) 0 0 calc(var(--dk,380px)*-.02);border-radius:50%;background:radial-gradient(circle at 36% 30%,#6b7075,#1d2023 70%);box-shadow:0 0 0 1.5px #2a2d31;pointer-events:none}
.pivot .dial::after{content:'';position:absolute;left:46%;top:8%;width:8%;height:28%;background:var(--gold)}
.arm{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;filter:drop-shadow(calc(3px + var(--lift,0)*7px) calc(5px + var(--lift,0)*12px) calc(4px + var(--lift,0)*6px) rgba(0,0,0,.45))}
.arm .bar{position:absolute;left:-4.5px;top:0;width:9px;height:calc(var(--dk,380px)*.575)}
.arm .bar::before{display:none}
.arm .tube{position:absolute;left:calc(var(--dk,380px)*-.12);top:0;width:calc(var(--dk,380px)*.24);height:calc(var(--dk,380px)*.575);overflow:visible;pointer-events:none}
.arm .tube path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* Gegengewicht hinter dem Gelenk und Kabel am Rohr */
.arm .cw{position:absolute;left:calc(var(--dk,380px)*-.0375);top:calc(var(--dk,380px)*-.175);width:calc(var(--dk,380px)*.075);height:calc(var(--dk,380px)*.115);border-radius:calc(var(--dk,380px)*.018);pointer-events:none;background:repeating-linear-gradient(180deg,#0a0b0c 0 1.2px,transparent 1.2px calc(var(--dk,380px)*.0215)),linear-gradient(90deg,#0c0d0e,#2c3034 40%,#0a0b0c);box-shadow:inset 0 0 0 1px #000}
.arm .cw::before{content:'';position:absolute;left:36%;right:36%;top:100%;height:calc(var(--dk,380px)*.04);background:linear-gradient(90deg,#16181a,#3a3e42,#16181a)}
.arm .cw::after{content:'';position:absolute;left:0;right:0;bottom:0;height:11%;border-radius:0 0 calc(var(--dk,380px)*.018) calc(var(--dk,380px)*.018);background:#2b2f33}
.arm .wires{display:none}
.arm .wires path{fill:none;stroke-width:1.1px;vector-effect:non-scaling-stroke;opacity:.9}
.arm .armhead{position:absolute;left:calc(var(--dk,380px)*-.1398);top:calc(var(--dk,380px)*.5606);width:calc(var(--dk,380px)*.2797);height:calc(var(--dk,380px)*.1983);overflow:visible;transform-origin:50% 2%;transform:rotate(38deg)}
.arm .armhead .fing{opacity:calc(var(--lift,0)*.55)}
.deck-glow{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle,rgba(var(--gold-rgb),.22),transparent 60%);opacity:0;transition:opacity .8s}
.deck.play .deck-glow{opacity:1}
.mix-list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.mix-list button{width:100%;display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;min-height:68px;padding:12px 6px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;transition:background-color .25s}
.mix-list button:hover{background:rgba(255,255,255,.03)}
.mix-list button.sent{background:rgba(var(--gold-rgb),.12)}
.mix-list button.sent .n{color:var(--gold-2);text-shadow:0 0 12px rgba(239,193,134,.7)}
.mix-list .n{font-family:var(--font-head);font-size:1.375rem;color:var(--dim)}
.mix-list .t b{display:block;font-weight:500;font-size:1rem}
.mix-list .t small{color:var(--dim);font-size:0.8125rem}
.mix-list .d{font-variant-numeric:tabular-nums;color:var(--muted);font-size:0.875rem}
.mix-list button.on .n,.mix-list button.on .t b{color:var(--gold-2)}
.ring{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);transform:rotate(-90deg);pointer-events:none;overflow:visible}
.ring circle{fill:none;stroke-width:3}
.ring .bg{stroke:rgba(255,255,255,.1)}
.ring .fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .9s linear}
.ring-hit{touch-action:none;position:absolute;inset:-26px;border-radius:50%;cursor:pointer;-webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 26px),#000 calc(100% - 26px));mask:radial-gradient(circle closest-side,transparent calc(100% - 26px),#000 calc(100% - 26px));z-index:2}
.pbar{position:relative;margin-top:72px}
.lcd{position:relative;overflow:hidden;border-radius:8px;padding:12px 14px 8px;color:#9aa0a6;background:#0d0f11;border:1px solid #2c3034;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}   /* gedruckte Beschriftung statt Display */
.lcd::after{display:none}
.lcd-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:6px;font:600 11px/1 ui-monospace,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 7px color-mix(in srgb,var(--gold-2) 70%,transparent)}
.lcd-top .mt{min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd-top .lbl{flex:none;display:inline-flex;align-items:center;gap:8px}
.lcd .eq{display:inline-flex;gap:2px;align-items:flex-end;height:11px}
.lcd .eq i{width:3px;height:2px;background:currentColor;animation:lcdEq .9s ease-in-out infinite alternate;animation-play-state:paused}
.lcd .eq i:nth-child(2){animation-delay:-.3s}.lcd .eq i:nth-child(3){animation-delay:-.6s}.lcd .eq i:nth-child(4){animation-delay:-.15s}
.deck.play ~ .pbar .lcd .eq i{animation-play-state:running}
@keyframes lcdEq{from{height:2px}to{height:11px}}
@media (prefers-reduced-motion:reduce){.lcd .eq i{animation:none;height:6px}}
.lcd-big{display:block}
.lcd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.lcd-l{min-width:0;flex:1}
.lcd-title{font:800 19px/1.15 'Bookman Old Style',Bookman,Rockwell,Clarendon,Georgia,serif;letter-spacing:.03em;text-transform:uppercase;color:#c3c8cd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
.lcd-big.blink{animation:lcdBl 1s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.lcd-big.blink{animation:none}}
.lcd-sub{margin-top:5px;font:600 8px ui-monospace,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:#9aa0a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcd-r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.lcd-no{display:flex;align-items:center;gap:8px;font:600 8px ui-monospace,Consolas,monospace;letter-spacing:.14em;color:#9aa0a6}
.lbars{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.lbars i{width:2px;height:2px;background:#ff3b1f;box-shadow:0 0 4px #ff3b1f;transition:height .06s linear}
@media (prefers-reduced-motion:reduce){.lbars i{transition:none}}
.lcd-r .lseg{background:none;border:0;padding:4px 0;margin:-4px 0;color:#ff3b1f;cursor:pointer;font:inherit;line-height:0;-webkit-tap-highlight-color:transparent}
.lcd-r .lseg svg{height:17px;width:auto;display:block}
.lcd-r .lseg:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:6px}
.lcd-ends{display:flex;justify-content:space-between;margin-top:4px;font:600 7px ui-monospace,Consolas,monospace;letter-spacing:.1em;color:#858b91}
@media (max-width:420px){.lcd-head{flex-wrap:wrap}.lcd-r{flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-top:8px}}
.lcd-big canvas{display:block;width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lcd-top .lt-l{display:inline-flex;align-items:center;gap:12px}
.lcd-eq{display:block;flex:none}
.lcd-top .lseg{display:block;flex:none;line-height:0}
.lcd-top .lseg svg{height:15px;width:auto;display:block}
.lcd-barw{margin-top:6px;padding:6px 0;cursor:pointer}
.lcd-barw canvas{display:block;width:100%}
.pbar>.pbtn{position:absolute;left:0;top:-8px;width:68px;height:60px;border:1.5px solid #2c3034;border-radius:6px;z-index:2;display:block;background:linear-gradient(180deg,#14171a,#0d0f11);box-shadow:0 5px 8px -3px #000,inset 0 1px 0 rgba(255,255,255,.06);transition:box-shadow .3s}
.pbar>.pbtn::after{content:'START · STOP';position:absolute;left:0;right:0;bottom:8px;text-align:center;white-space:nowrap;font:600 7.5px ui-monospace,Consolas,monospace;letter-spacing:.04em;color:#8d9297;pointer-events:none}
.deck.play ~ .pbar>.pbtn{box-shadow:0 5px 8px -3px #000,inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(var(--gold-rgb),.55),0 0 12px rgba(var(--gold-rgb),.25)}
.pbar>.pbtn svg{position:absolute;left:50%;top:13px;width:22px;height:22px;margin-left:-11px;fill:var(--gold-2)}
.pbar>.mc-gate:not(.strip){left:6px;top:22px}
.lcd-big.blink canvas{animation:lcdBl 1s steps(2) infinite}
@keyframes lcdBl{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.lcd-big.blink canvas{animation:none}}
.lcd-top .lseg{background:none;border:0;padding:6px 0 6px 10px;margin:-6px 0;color:inherit;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.lcd-top .lseg:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:6px}
.lcd-barw{margin:-2px 0 -6px;padding:14px 0;touch-action:pan-y;position:relative}
.lcd-tip{position:absolute;top:-6px;left:0;transform:translateX(-50%);background:var(--gold-2);color:#1a1206;font:700 11px/1 ui-monospace,Consolas,monospace;padding:5px 7px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .12s;white-space:nowrap;z-index:2}
.lcd-tip.on{opacity:1}
.ctrl{display:flex;align-items:center;gap:10px;margin-top:12px}
.fronts{position:relative;display:flex;align-items:center;gap:6px;min-height:60px;padding:0 0 16px 76px;margin-bottom:4px}
.fronts #vol{margin:0 auto;padding:0;width:96px;height:28px;display:block;position:relative;gap:0}
.fronts #vol::after{content:'';position:absolute;left:3px;right:3px;bottom:0;height:5px;background:repeating-linear-gradient(90deg,#6b7075 0 1px,transparent 1px 11.9px);pointer-events:none}
.fronts #vol .vi{display:none}
.fronts #vol .vd{position:relative;display:block;width:96px;height:24px}
.fronts #vol .vd i{display:none}
.fronts #vol .vd::before{content:'';position:absolute;left:0;right:0;top:3px;height:16px;border-radius:3px;background:linear-gradient(#1d2023,#1d2023) 6px 50%/calc(100% - 12px) 3px no-repeat,#0a0b0c;box-shadow:inset 0 0 0 1px #2c3034,inset 0 2px 4px #000}
.fronts #vol .vd::after{content:'';position:absolute;top:0;left:calc(var(--vp,1)*(100% - 12px));width:12px;height:22px;border-radius:2px;background:linear-gradient(90deg,#c9ced2,#f2f4f5 45%,#aeb3b8);border:1px solid #1a1c1e;box-shadow:0 3px 5px #000}
.fronts .spd{display:flex;gap:4px}
.fronts .spd b{position:relative;width:36px;height:22px;border-radius:3px;border:1.3px solid #2c3034;background:#0f1113;color:#aeb3b8;font:600 10px/20px ui-monospace,Consolas,monospace;padding-left:5px}
.fronts .spd b i{position:absolute;right:5px;top:8px;width:11px;height:3px;border-radius:2px;background:#2b1411}
.deck.play ~ .pbar .spd b.on i{background:#ff3b1f;box-shadow:0 0 6px #ff3b1f}
.fronts .key{width:30px;height:28px;border-radius:4px;background:linear-gradient(180deg,#14171a,#0d0f11);border:1.5px solid #2c3034;box-shadow:0 4px 6px -2px #000,inset 0 1px 0 rgba(255,255,255,.06)}
.fronts .key:active{transform:translateY(2px)}
.fronts .eng{position:absolute;top:54px;text-align:center;font:600 8px ui-monospace,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);pointer-events:none}
@media (max-width:420px){.fronts .spd{display:none}}
.key{flex:none;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#183840,#0f2a31);color:var(--gold-2);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 #08171B,inset 0 1px 0 rgba(255,255,255,.1);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.key:active{transform:translateY(2px);box-shadow:0 1px 0 #08171B,inset 0 1px 0 rgba(255,255,255,.1)}
.key:focus-visible,.vol:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.key svg{width:18px;height:18px;fill:currentColor}
.vol{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--gold-2);cursor:pointer;touch-action:none;padding:8px 4px;border-radius:8px;-webkit-tap-highlight-color:transparent}
.vol .vi{width:18px;height:18px;fill:currentColor;flex:none}
.vol .vd{display:flex;gap:4px;align-items:flex-end;height:22px}
.vol .vd i{width:5px;background:currentColor;border-radius:1px;transition:opacity .15s}
.vol .vd i:nth-child(1){height:6px}.vol .vd i:nth-child(2){height:9px}.vol .vd i:nth-child(3){height:12px}.vol .vd i:nth-child(4){height:15px}.vol .vd i:nth-child(5){height:18px}.vol .vd i:nth-child(6){height:22px}
.vol .vd i.off{opacity:.18}
.vol[hidden]{display:none}
.mchip{position:fixed;z-index:98;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:14px;background:#0d0f11;border:1px solid #2c3034;box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .25s,transform .25s,visibility .25s}
.mchip.show{opacity:1;visibility:visible;transform:none}
@media (min-width:900px){.mchip{left:24px;right:auto;bottom:24px;width:360px}}
.mchip .mc-pb{flex:none;width:44px;height:44px;border-radius:8px;border:1px solid #2c3034;display:grid;place-items:center;cursor:pointer;background:linear-gradient(#202428,#121416);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #000;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mchip .mc-pb svg{width:16px;height:16px;fill:var(--gold-2)}.mchip .mc-pb .i-play{margin-left:2px}.mchip .mc-pb .i-pause{display:none}
.mchip.pl .mc-pb .i-play{display:none}.mchip.pl .mc-pb .i-pause{display:block}
.mchip .mc-pb:focus-visible,.mchip .mc-tx:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.mchip .mc-tx{min-width:0;flex:1;background:none;border:0;padding:2px 0;margin:0;text-align:left;cursor:pointer;display:block;color:inherit}
.mchip .mc-t{display:block;font:800 14px/1.15 'Bookman Old Style',Bookman,Rockwell,Clarendon,Georgia,serif;letter-spacing:.03em;text-transform:uppercase;color:#c3c8cd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
.mchip .mc-s{display:block;margin-top:4px;font:600 8px ui-monospace,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:#9aa0a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mchip .mc-sc{position:relative;display:block;height:8px;margin-top:7px}
.mchip .mc-sc::before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:#2c3034}
.mchip .mc-sc s{position:absolute;left:0;top:3px;height:1px;background:rgba(255,59,31,.7)}
.mchip .mc-sc i{position:absolute;top:0;width:3px;height:8px;background:#ff3b1f;box-shadow:0 0 5px #ff3b1f}
.mchip .mc-tm{flex:none;color:#ff3b1f;line-height:0;filter:drop-shadow(0 0 4px rgba(255,59,31,.5))}
.mchip .mc-tm svg{height:15px;width:auto;display:block}
.prow{position:relative;display:flex;align-items:center;gap:14px;margin-top:14px;min-height:52px}
.pline{flex:1;min-width:36px;height:6px;border-radius:3px;background:rgba(255,255,255,.12);position:relative;cursor:pointer}
.pline::before{content:'';position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.pline b{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--gold)}
.pline i{position:absolute;inset:0;pointer-events:none}
.pline i u{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:rgba(255,255,255,.55);border-radius:1px}
.prow .tm{flex:none;font-variant-numeric:tabular-nums;font-size:0.8125rem;white-space:nowrap;color:var(--text)}
.prow .mc-gate:not(.strip){left:-2px}
.pbtn{width:52px;height:52px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;flex:none;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep))}
.pbtn{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.pbtn:focus{outline:0}.pbtn:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.pbtn svg{width:18px;height:18px;fill:#1a1206}
.pbtn .i-play{margin-left:2px}.pbtn .i-pause{display:none}.deck.play ~ .pbar .pbtn .i-play{display:none}.deck.play ~ .pbar .pbtn .i-pause{display:block}
.now{min-width:0;flex:1}
.now .lbl{display:block;font-size:0.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.now b{display:block;font-weight:500;font-size:1.0625rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now small{display:block;color:var(--muted);font-size:0.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now small .tm{font-variant-numeric:tabular-nums;color:var(--text)}
/* Mixcloud-Widget als unsichtbarer Klick-Empfaenger: 60 px, nur Steuerknopf (ohne Cover/Titel), Knopfmitte (x 28, y 30) liegt genau auf der Mitte von #pBtn (Polster 14 px + halbe Knopfbreite 26 px = 40 px). Browser erlauben den ersten Ton nur nach einem echten Klick IM Player; so landet der Klick auf "Play" dort. Nach dem ersten Start klick-durchlaessig, dann steuert die Widget-API. */
.mc-gate{position:absolute;left:12px;top:50%;width:60px;height:60px;margin-top:-30px;border:0;opacity:.02;pointer-events:none;z-index:3;transform:scale(2.2);transform-origin:28px 30px;clip-path:circle(11.8px at 28px 30px);outline:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mc-gate.on{pointer-events:auto;cursor:pointer}
.mc-aux{position:absolute;left:0;top:0;width:1px;height:1px;border:0;opacity:0;pointer-events:none}
/* nur wenn die Steuerung gar nicht zustande kommt (z. B. Skript gesperrt): Mixcloud-Streifen unter der Leiste */
.mc-gate.strip{left:0;right:0;top:100%;width:auto;height:60px;margin:10px 0 0;opacity:1;clip-path:none;transform:none;border-radius:12px;pointer-events:auto}
.pbar.need .pbtn,.pbar.load .pbtn{animation:pbPulse 1.3s ease-in-out infinite}
@keyframes pbPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),.55)}50%{box-shadow:0 0 0 12px rgba(var(--gold-rgb),0)}}
@media (prefers-reduced-motion:reduce){.pbar.need .pbtn,.pbar.load .pbtn{animation:none;outline:2px solid var(--gold-2);outline-offset:3px}}
.mc-hint{margin:10px 2px 0;padding:10px 12px;border-radius:10px;border:1px solid rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.08);font-size:0.8125rem;color:var(--text)}
.mc-play{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--gold)}
.mc-play svg{width:18px;height:18px;fill:#1a1206;margin-left:2px}
.mc-note{font-size:0.75rem;color:var(--dim);margin:12px auto 0;max-width:340px;text-align:center;text-wrap:balance}
.mc-note a{color:var(--muted)}
.mc-more{display:flex;align-items:center;justify-content:center;gap:12px;width:fit-content;max-width:100%;min-height:52px;margin:16px auto 4px;padding:0 22px 0 18px;border-radius:999px;color:#1a1206;text-decoration:none;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));box-shadow:0 8px 20px -6px rgba(var(--gold-rgb),.55),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .2s,box-shadow .2s}
@media(hover:hover){.mc-more:hover{transform:translateY(-1px);box-shadow:0 12px 26px -6px rgba(var(--gold-rgb),.7),inset 0 1px 0 rgba(255,255,255,.5)}}
.mc-more:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.mm-logo{display:block;height:auto;width:112px;flex:none}
.mm-go{font-size:0.875rem;font-weight:600;padding-left:12px;border-left:1px solid rgba(26,18,6,.3);white-space:nowrap}
.deck{cursor:pointer}
.mix-note{font-size:0.8125rem;color:var(--dim);margin-top:14px}
.player{position:relative;z-index:1;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(160deg,var(--surface-2),var(--surface));padding:clamp(24px,4vw,40px)}
.player .deck{width:min(88%,340px);margin-top:clamp(26px,3.2vw,36px);touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.deck.hold .deck-glow{opacity:.45}
.plink{display:flex;align-items:center;gap:18px;margin-top:24px;padding:18px 20px;border-radius:var(--r);border:1px solid var(--line);text-decoration:none;transition:border-color .3s}
.plink:hover{border-color:var(--gold)}
.plink small{display:block;font-size:0.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.plink b{display:block;font-weight:500;font-size:1.0625rem}
.plink em{display:block;font-style:normal;color:var(--muted);font-size:0.875rem}
.plink i{margin-left:auto;font-style:normal;font-size:1.375rem;color:var(--gold-2)}
@media (min-width:900px){.mix{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:90px}}

/* ═══ Fotostreifen ═══ */
.strip{position:relative;height:clamp(320px,52vw,620px);overflow:hidden;display:grid;place-items:end center;isolation:isolate}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-2}
.strip::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg-2),rgba(var(--bg-rgb),.1) 25%,rgba(var(--bg-rgb),.2) 55%,var(--bg))}
.strip-h{font-family:var(--font-head);font-weight:400;font-size:clamp(46px,9vw,140px);line-height:.9;text-align:center;margin:0 var(--pad) clamp(20px,4vw,50px);text-shadow:0 6px 40px rgba(0,0,0,.7)}
.strip-h .g{color:var(--gold-2)}
/* ═══ Ablauf: Zeitleiste ═══ */
.tl{position:relative;margin-top:60px;padding-left:64px}
.tl-rail{position:absolute;left:24px;top:0;bottom:0;width:2px;background:var(--line)}
.tl-fill{position:absolute;inset:0;background:linear-gradient(var(--gold-2),var(--gold-deep));transform-origin:top;transform:scaleY(0)}
.tl-disc{position:absolute;left:-17px;top:-18px;width:36px;height:36px;border-radius:50%;background:repeating-radial-gradient(circle,#0b0b0b 0 1.5px,#1b1b1b 1.5px 3px);box-shadow:0 0 0 2px var(--gold),0 0 30px rgba(var(--gold-rgb),.5);will-change:transform}
.tl-disc::after{content:'';position:absolute;inset:34%;border-radius:50%;background:var(--gold)}
.tl-disc::before{content:'';position:absolute;left:50%;top:3px;width:2px;height:9px;background:rgba(255,255,255,.6);margin-left:-1px;z-index:1}
.step{position:relative;padding:0 0 64px}
.step:last-child{padding-bottom:0}
.step .num{font-family:var(--font-head);font-size:clamp(70px,9vw,120px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(var(--gold-rgb),.55);transition:color .6s}
.step.in .num{color:var(--gold)}
.step h3{font-family:var(--font-h);font-weight:600;font-size:clamp(19.8px,2.2vw,29.8px);margin:8px 0 8px;line-height:1.08;letter-spacing:-.01em}
.step p{color:var(--muted);margin:0;max-width:600px;font-size:clamp(16px,.35vw + 14.6px,17px);line-height:1.6}
.step::before{content:'';position:absolute;left:-46px;top:22px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--faint);transition:border-color .4s,background-color .4s}
.step.in::before{border-color:var(--gold);background:var(--gold)}
@media (min-width:900px){
  .tl{padding-left:0}
  .tl-rail{left:50%;margin-left:-1px}
  .step{width:50%;padding:0 70px 80px 0;text-align:right}
  .step p{margin-left:auto}
  .step:nth-child(even){margin-left:50%;padding:0 0 80px 70px;text-align:left}
  .step:nth-child(even) p{margin-left:0}
  .step::before{left:auto;right:-6px}
  .step:nth-child(even)::before{left:-6px;right:auto}
}

/* ═══ Instagram-Bühne ═══ */
.ig{background:radial-gradient(ellipse 70% 60% at 50% 60%,rgba(131,58,180,.16),transparent 70%),radial-gradient(ellipse 50% 40% at 70% 30%,rgba(253,29,29,.08),transparent 70%),var(--bg-2);overflow:hidden}
.ig-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.ig-handle{display:inline-flex;align-items:center;gap:14px;text-decoration:none;min-height:44px}
.ig-handle .av{width:58px;height:58px;border-radius:50%;padding:3px;background:var(--ig)}
.ig-handle .av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--bg-2)}
.ig-handle b{display:block;font-weight:500;font-size:1.125rem}
.ig-handle small{color:var(--muted);font-size:0.8125rem}
.btn-ig{background:var(--ig);color:#fff;box-shadow:0 10px 40px -12px rgba(253,29,29,.6)}
@media(hover:hover){.btn-ig:hover{transform:translateY(-2px)}}
.chips{display:flex;gap:18px;overflow-x:auto;padding:30px 2px 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;cursor:pointer;padding:0;min-width:76px}
.chip .r{width:76px;height:76px;border-radius:50%;padding:3px;background:var(--ig);transition:transform .3s var(--ease)}
.chip.seen .r{background:rgba(255,255,255,.22)}
.chip .r img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--bg-2)}
.chip:hover .r{transform:scale(1.06)}
.chip span{font-size:0.8125rem;color:var(--muted)}
.chip.on span{color:var(--text)}
.chip.on .r{transform:scale(1.06)}
.ig-handle.has-story .av{animation:igRing 2.4s ease-in-out infinite}
@keyframes igRing{50%{box-shadow:0 0 0 4px rgba(253,29,29,.25)}}
/* Reel-Fächer: Handys um die Mitte, Klick auf Randhandy holt es nach vorn */
.igx{position:relative;height:clamp(470px,62vw,600px);margin-top:36px;outline:none;touch-action:pan-y}
.igx-fan{position:absolute;inset:0}
.rph{position:absolute;left:50%;top:50%;width:min(250px,60vw);aspect-ratio:9/19;margin:0;border-radius:38px;padding:9px;background:linear-gradient(145deg,#2a2a2a,#0d0d0d);box-shadow:0 50px 100px -30px rgba(0,0,0,.9),inset 0 0 0 1.5px rgba(255,255,255,.12);
  transform:translate(-50%,-50%) translateY(calc(var(--rise,0px) + var(--ad) * var(--sy,0px))) translateX(calc(var(--d) * var(--gap) * var(--fp,1))) rotate(calc(var(--d) * 6deg * var(--fp,1))) scale(calc(1 - var(--ad) * .13 * var(--fp,1) - var(--ss,0)));z-index:calc(10 - var(--ad));transition:transform .8s var(--ease),opacity .6s,filter .6s;text-decoration:none;color:#fff;display:block;--gap:44%}
.rph.side{filter:brightness(.55) saturate(.8)}
.rph.hide{opacity:0;pointer-events:none}
.rph .scr{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:#000}
.rph .scr>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rph.is-c .scr>img{animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-2%,-2%)}}
.rph .notch{position:absolute;top:13px;left:50%;width:70px;height:20px;margin-left:-35px;border-radius:20px;background:#000;z-index:3}
.rph .ui{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 22%,transparent 60%,rgba(0,0,0,.78));display:flex;flex-direction:column;justify-content:space-between;padding:40px 12px 16px;font-size:12px}
.rph .tg{display:inline-flex;align-self:flex-start;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.5);font-size:11px;letter-spacing:.08em}
.rph .nw{position:absolute;top:40px;right:12px;padding:3px 8px;border-radius:999px;background:var(--ig);font-size:10px;font-weight:600;letter-spacing:.1em}
.rph .pl{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.7);opacity:0;transition:opacity .3s,transform .3s var(--ease)}
.rph .pl svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.rph.is-c:hover .pl,.rph.is-c:focus-visible .pl{opacity:1;transform:scale(1.06)}
.rph .usr{display:flex;align-items:center;gap:7px;font-weight:500}
.rph .usr img{width:24px;height:24px;border-radius:50%;border:1.5px solid #fff;object-fit:cover}
.rph .cp{font-size:12.5px;line-height:1.4;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:760px){.rph{--gap:62%}}
/* Stapel steigt auf und fächert sich (Formel der alten Startseite: rise/fan); Endzustand --fp:1 = normaler Fächer */
#instagram.ig{overflow:clip}
.igx-track{position:relative;margin-top:36px;--igh:clamp(470px,62vw,600px);height:calc(var(--igh) + 80vh)}
.igx-track>.igx{position:sticky;top:calc(50vh - var(--igh) / 2 + 30px);margin-top:0}
.rph::after{content:'';position:absolute;inset:0;border-radius:38px;background:#000;opacity:calc((1 - var(--fp,1)) * .5);pointer-events:none;z-index:6}
.igx-fan.scrub .rph{transition:opacity .6s,filter .6s}
.igx-fan.lock .rph{pointer-events:none}
@media (max-width:759px){.igx-track{height:calc(var(--igh) + 45vh)}}
@media (prefers-reduced-motion:reduce),(max-height:560px){.igx-track{height:auto}.igx-track>.igx{position:relative;top:auto}}
.igx-meta{text-align:center;margin-top:18px}
.igx-now{margin:0;font-size:1.0625rem;max-width:560px;margin-inline:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.igx-when{margin:4px 0 0;color:var(--dim);font-size:0.8125rem;min-height:1.2em}
.igx-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.igx-arr{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer;font-size:1.125rem;transition:border-color .25s}
.igx-arr:hover{border-color:var(--gold)}
.igx-count{font-family:var(--font-head);font-size:1.375rem;letter-spacing:.1em;min-width:80px}
.igx-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.ig-note{text-align:center;color:var(--dim);font-size:0.8125rem;margin-top:26px}
.rph .rpb{position:absolute;left:12px;right:12px;top:30px;z-index:4;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;opacity:0;transition:opacity .3s}
.rph .rpb i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.rph.snd-on .rpb,.rph.img-play .rpb{opacity:1}
.rph.img-play .scr>img{animation:kb 6s ease-in-out forwards}
.rph.img-play .pl{opacity:0}
.rph .rhint{position:absolute;left:12px;right:12px;top:50%;z-index:5;transform:translateY(-50%);padding:10px 12px;border-radius:12px;background:rgba(var(--bg-rgb),.88);border:1px solid var(--line-2);font-size:12px;line-height:1.4;text-align:center;color:var(--text);opacity:0;transition:opacity .3s;pointer-events:none}
.rph .rhint.on{opacity:1}
.rph.is-c{cursor:pointer}
/* Technik der Startseite im Redesign-Fächer: Video über dem Vorschaubild, Ton-Hinweis, feste Caption-Höhen */
.rph{--w:min(250px,60vw)}
.rph .scr>.igs-vid{z-index:1}
.rph.has-vid .pl{opacity:0}
.rph.is-c.has-vid.is-paused .pl{opacity:1}
.rph .igs-snd{bottom:92px}
.rph.is-c.has-vid.snd-off .igs-snd{display:inline-flex}
.rph .cp{height:2.8em}
.igx-now{height:3em;-webkit-line-clamp:2}
.igx-when{height:1.5em;overflow:hidden}
.ig-handle{color:inherit}

/* ═══ Instagram: Styles 1:1 aus der Startseite (Zeilen 1841-2071), Farbnamen per Alias ═══ */
:root{--black:var(--st-black);--border-2:rgba(242,233,222,.14)}
/* (Bühnen-Styles der Startseite entfallen – die Demo nutzt den Redesign-Fächer oben) */
.igs-id{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:inherit;margin-bottom:12px;padding:7px 20px 7px 7px;border:1px solid var(--border-2);border-radius:60px;background:rgba(var(--surface-rgb),.55);transition:border-color .25s}
.igs-id:hover,.igs-id:focus-visible{border-color:var(--gold)}
.igs-av{position:relative;width:54px;height:54px;border-radius:50%;padding:3px;background:var(--gold);flex:0 0 auto}
.igs-av img,.igs-av em{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--black);box-sizing:border-box;background:var(--surface-2)}
.igs-av em{font-style:normal;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);color:var(--gold);font-size:22px}
.igs-id.has-story .igs-av{background:conic-gradient(from 20deg,var(--gold),#F6D9A6,#C77B2E,var(--gold));animation:igs-ring 3.2s ease-in-out infinite}
.igs-id.has-story .igs-idt small{color:var(--gold-2)}
.igs-id.has-story .igs-idt small:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:6px;vertical-align:1px;animation:igs-dot 1.6s ease-in-out infinite}
@keyframes igs-ring{0%,100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),.45)}50%{box-shadow:0 0 0 7px rgba(var(--gold-rgb),0)}}
@keyframes igs-dot{0%,100%{opacity:1}50%{opacity:.3}}
.igs-idt{text-align:left;line-height:1.25}
.igs-idt b{display:block;font-size:15px;font-weight:600;color:var(--text);letter-spacing:.2px}
.igs-idt small{font-size:12px;color:var(--dim)}
.igs-user img{width:calc(var(--w) * .11);height:calc(var(--w) * .11);border-radius:50%;object-fit:cover;display:block;border:1px solid var(--gold)}
.igs-cta{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.igs-fol{font-size:14px;color:var(--black);background:var(--gold);text-decoration:none;border:1px solid var(--gold);border-radius:6px;padding:9px 18px;font-weight:600;transition:background .2s}
.igs-fol:hover,.igs-fol:focus-visible{background:var(--gold-2)}
.igs-fan{touch-action:pan-y}
.igs-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;opacity:0;transition:opacity .6s}
.igs-vid.on{opacity:1}
.igs-vid.on.dip{opacity:0;transition-duration:.17s}
.igs-ph.has-vid .igs-play{opacity:0;pointer-events:none;transition:opacity .3s}
.igs-ph.has-vid.is-paused .igs-play{opacity:1}
.igs-snd{position:absolute;left:50%;bottom:calc(var(--w) * .40);transform:translateX(-50%);z-index:4;display:none;align-items:center;gap:calc(var(--w) * .025);white-space:nowrap;font-size:calc(var(--w) * .05);font-weight:600;color:#fff;background:rgba(var(--bg-rgb),.74);border:1px solid rgba(255,255,255,.35);border-radius:40px;padding:calc(var(--w) * .03) calc(var(--w) * .06)}
.igs-snd svg{width:calc(var(--w) * .07);height:calc(var(--w) * .07);fill:#fff}
.igs-ph.is-c.has-vid.snd-off .igs-snd{display:inline-flex}
.igs-open{font-size:14px;color:var(--gold-2);text-decoration:none;border:1px solid var(--border-2);border-radius:6px;padding:9px 16px;transition:border-color .2s}
.igs-open:hover,.igs-open:focus-visible{border-color:var(--gold)}
.igs-open[hidden]{display:none}

/* Hero-Chip (Platz 1) und Story-Streifen (vor dem Kontakt): nur sichtbar, wenn instagram-feed.php Daten liefert */
.hero-ig{position:absolute;right:98px;top:calc(100vh - 104px);z-index:6;display:flex;align-items:center;gap:15px;text-decoration:none;color:var(--text);
  background:rgba(var(--bg-rgb),.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(242,233,222,.18);border-radius:60px;padding:9px 30px 9px 9px;
  opacity:0;transform:translateY(8px);transition:opacity .6s .5s,transform .6s .5s,border-color .25s}
.hero-ig[hidden]{display:none}
.hero-ig.on{opacity:1;transform:none}
.hero-ig:hover,.hero-ig:focus-visible{border-color:var(--gold)}
.hero-ig .igs-av{width:72px;height:72px;padding:4px}
.hero-ig .igs-t b{display:block;font-size:19px;font-weight:600;line-height:1.2}
.hero-ig .igs-t small{display:block;font-size:14px;color:var(--dim);line-height:1.35;margin-top:2px}
.igs-lock{overflow-y:scroll}
.igs-sm{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:16px 16px 70px;box-sizing:border-box;font-family:var(--font-body)}
.igs-sm-bd{position:absolute;inset:0;background:rgba(4,12,14,.86);opacity:0;transition:opacity .35s}
.igs-sm.open .igs-sm-bd{opacity:1}
.igs-sm-amb{position:absolute;left:50%;top:46%;width:min(120vw,820px);height:min(120vw,820px);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .8s,background .8s;background:radial-gradient(circle,var(--amb,#7a4a2a) 0,rgba(var(--bg-rgb),0) 68%)}
.igs-sm.v3.open .igs-sm-amb{opacity:.5}
.igs-sm-logo{position:absolute;left:50%;top:46%;width:min(110vw,640px);height:min(110vw,640px);transform:translate(-50%,-50%);display:none;pointer-events:none}
.igs-sm.v3 .igs-sm-logo{display:block}
.igs-sm-logo *{fill:none;stroke:var(--gold);stroke-width:.22;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s ease-out .15s}
.igs-sm.open .igs-sm-logo *{stroke-dashoffset:0}
.igs-sm-ph{--w:min(calc(min(84vh,700px) * 9 / 16),94vw);position:relative;box-sizing:border-box;height:min(84vh,700px);aspect-ratio:9/16;max-width:94vw;border-radius:calc(var(--w) * .15);border:calc(var(--w) * .035) solid var(--gold);background:#0b1c20;overflow:hidden;z-index:2;
  transform:translate(var(--tx,0),var(--ty,0)) scale(.22);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .35s;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.igs-sm.open .igs-sm-ph{transform:none;opacity:1}
.igs-sm-notch{position:absolute;top:calc(var(--w) * .035);left:50%;width:30%;height:calc(var(--w) * .06);margin-left:-15%;border-radius:20px;background:#04100f;z-index:9}
.igs-sm-slides{position:absolute;inset:0}
.igs-sm-slides .sl{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.igs-sm-slides .sl.on{opacity:1}
.igs-sm-slides img,.igs-sm-slides video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.igs-sm-pb{position:absolute;top:38px;left:12px;right:12px;display:flex;gap:4px;z-index:8}
.igs-sm-pb b{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.igs-sm-pb i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.igs-sm-hd{position:absolute;top:50px;left:12px;right:12px;z-index:8;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.igs-sm-hd em{width:30px;height:30px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-sizing:border-box;overflow:hidden;display:block;flex:0 0 auto}
.igs-sm-hd em img{width:100%;height:100%;object-fit:cover;display:block}
.igs-sm-hd small{font-weight:400;opacity:.85;font-size:12px}
.igs-sm-tap{position:absolute;top:84px;bottom:20px;width:50%;z-index:7;border:0;background:transparent;cursor:pointer;padding:0}
.igs-sm-tap.l{left:0}.igs-sm-tap.r{right:0}
.igs-sm-x{position:absolute;top:18px;right:18px;z-index:10;width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,233,222,.4);background:rgba(var(--bg-rgb),.78);color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.igs-sm-x:hover,.igs-sm-x:focus-visible{border-color:var(--gold)}
.igs-sm-nov{position:absolute;left:10px;right:10px;bottom:22px;z-index:8;display:flex;flex-direction:column;gap:3px;text-align:center;text-decoration:none;color:#fff;background:rgba(var(--bg-rgb),.8);border:1px solid var(--gold);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.35}
.igs-sm-nov b{font-weight:600}
.igs-sm-nov span{color:var(--gold-2);font-size:12px}
.igs-sm-nov:hover,.igs-sm-nov:focus-visible{border-color:var(--gold-2)}
.igs-sm-mu{position:absolute;top:18px;left:18px;z-index:10;width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,233,222,.4);background:rgba(var(--bg-rgb),.78);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.igs-sm.v3 .igs-sm-mu{display:flex}
.igs-sm-mu svg{width:20px;height:20px;fill:currentColor}
.igs-sm-mu:hover,.igs-sm-mu:focus-visible{border-color:var(--gold)}
.igs-sm-mu.off{color:var(--dim)}
.igs-sm-mu.off:after{content:"";position:absolute;width:24px;height:2px;background:currentColor;transform:rotate(-45deg)}
.igs-sm-cta{position:absolute;left:0;right:0;bottom:clamp(12px,3vh,26px);z-index:10;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;opacity:0;transition:opacity .4s .35s}
.igs-sm.open .igs-sm-cta{opacity:1}
.igs-sm-cta a{font-size:14px;border-radius:6px;padding:10px 16px;text-decoration:none;font-weight:600}
.igs-sm-cta .g{background:var(--gold);color:var(--black)}
.igs-sm-cta .o{border:1px solid var(--gold);color:var(--gold-2)}
.igs-sm-cta .g:hover,.igs-sm-cta .g:focus-visible{background:var(--gold-2)}
.igs-sm-cta .o:hover,.igs-sm-cta .o:focus-visible{background:rgba(var(--gold-rgb),.14)}
@media(prefers-reduced-motion:reduce){.igs-sm-ph,.igs-sm-bd,.igs-sm-slides .sl,.igs-sm-cta{transition:none}.igs-sm-logo{display:none!important}}
.hero-ig{overflow:hidden}
.hero-ig.wait{opacity:.4!important;filter:grayscale(1)}
.hero-ig.wait .hero-stk i{opacity:0}
.hero-gl{position:absolute;top:0;bottom:0;width:60px;left:-90px;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(239,193,134,.5),rgba(255,255,255,0));transform:skewX(-18deg);pointer-events:none}
.hero-dim{position:absolute;inset:0;z-index:5;background:#04100f;opacity:0;pointer-events:none;transition:opacity .5s}
.hero-tr{--w:112px;position:absolute;z-index:7;width:var(--w);height:auto;aspect-ratio:9/16;box-sizing:border-box;left:0;top:0;border-radius:calc(var(--w) * .15);border:calc(var(--w) * .035) solid var(--gold);overflow:hidden;background:var(--st-surface2);box-shadow:0 18px 50px rgba(0,0,0,.55);pointer-events:none;opacity:0}
.hero-tr img,.hero-tr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-tr:before{content:"";position:absolute;top:calc(var(--w) * .035);left:50%;width:30%;height:calc(var(--w) * .06);margin-left:-15%;border-radius:20px;background:#04100f;z-index:4}
.hero-tr video{opacity:0;transition:opacity .5s}.hero-tr video.on{opacity:1}
.hero-tr .tg{position:absolute;left:7px;top:14px;z-index:2;font-size:9px;letter-spacing:.06em;background:var(--gold);color:var(--black);padding:2px 6px;border-radius:3px;font-weight:700}
.hero-tr .pb{position:absolute;left:7px;right:7px;top:34px;z-index:2;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.hero-tr .pb:after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0);animation:igs-tr 2.9s linear .5s forwards}
@keyframes igs-tr{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-tr .sh{position:absolute;top:0;bottom:0;width:55%;left:-70%;z-index:2;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:igs-sh 1.7s ease-in-out .5s 2}
@keyframes igs-sh{from{left:-70%}to{left:130%}}
.hero-fx{position:absolute;z-index:8;pointer-events:none}
.hero-ring{border:2px solid var(--gold);border-radius:60px}
.hero-spark{border-radius:50%}
@media(prefers-reduced-motion:reduce){.hero-dim,.hero-tr,.hero-fx{display:none}}
.hero-stk{display:flex;align-items:center;margin:0 0 0 4px}
.hero-stk i{display:block;width:44px;height:68px;border-radius:9px;border:2px solid #0b1c20;margin-left:-20px;overflow:hidden;background:var(--st-surface2);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.hero-stk i:first-child{margin-left:0;transform:rotate(-7deg)}
.hero-stk i:nth-child(2){transform:rotate(0)}
.hero-stk i:nth-child(3){transform:rotate(7deg);border-color:var(--gold)}
.hero-stk i:only-child{transform:rotate(0);border-color:var(--gold)}
.hero-stk img{width:100%;height:100%;object-fit:cover;display:block}
.hero-ig.has-stk{padding:9px 28px 9px 14px}
.hero-ig.has-stk .igs-av{display:none}
.hero-peek{position:absolute;right:112px;top:calc(100vh - 322px);width:124px;height:200px;z-index:7;border-radius:14px;border:2px solid var(--gold);overflow:hidden;background:var(--st-surface2);opacity:0;transform:translateY(26px) scale(.92);pointer-events:none;transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.hero-peek.on{opacity:1;transform:none;pointer-events:auto}
.hero-peek img{width:100%;height:100%;object-fit:cover;display:block}
.hero-peek u{position:absolute;left:8px;right:8px;top:8px;display:flex;gap:3px;text-decoration:none}
.hero-peek u b{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.hero-peek u b.f:after,.hero-peek u b.a:after{content:"";position:absolute;inset:0;background:#fff}
.hero-peek u b.a:after{transform-origin:left;animation:igs-bar 2.2s linear forwards}
@keyframes igs-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-peek span{position:absolute;left:8px;right:8px;bottom:8px;font-size:12px;color:#fff;background:rgba(var(--bg-rgb),.68);border-radius:6px;padding:5px 8px;text-align:center}
.hero-ig.has-story .igs-av,.igl .igs-av.live{background:conic-gradient(from 20deg,var(--gold),#F6D9A6,#C77B2E,var(--gold))}
.hero-ig.has-story .igs-av{animation:igs-ring 3.2s ease-in-out infinite}
.hero-ig.has-story .igs-t small{color:var(--gold-2)}
.igs-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:6px;vertical-align:1px;animation:igs-dot 1.6s ease-in-out infinite}
.igl{padding:80px 0 72px}
.igl[hidden]{display:none}
.igl-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 20px;border:1px solid rgba(var(--gold-rgb),.45);border-radius:10px;background:var(--surface)}
.igl-id{display:flex;align-items:center;gap:14px;flex:1 1 260px;text-decoration:none;color:inherit;min-width:0}
.igl-eb{font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.igl-t{display:block;font-size:0.9375rem;color:var(--text);line-height:1.4;margin-top:2px}
.igl-s{display:block;font-size:0.75rem;color:var(--dim);margin-top:2px}
.igl-in{position:relative;padding:18px 28px 18px 190px;min-height:116px;border-radius:22px;background:linear-gradient(135deg,#0f2830,#0a1c22);gap:22px}
/* Konzept A: Fächer ragt links oben aus der Kachel */
.igl-fan{position:absolute;left:26px;bottom:14px;width:150px;height:160px;padding:0;border:0;background:none;cursor:pointer}
.igl-fan i{position:absolute;bottom:0;left:0;width:78px;height:140px;border-radius:14px;border:2px solid var(--gold);overflow:hidden;background:#143a42;box-shadow:0 14px 28px rgba(0,0,0,.55);transform-origin:bottom center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.igl-fan i:nth-child(1){left:0;transform:rotate(-10deg);filter:brightness(.7)}
.igl-fan i:nth-child(2){left:30px;transform:rotate(-2deg);filter:brightness(.85)}
.igl-fan i:nth-child(3){left:60px;transform:rotate(8deg);filter:none}
.igl-fan i:only-of-type{left:30px;filter:none}
.igl-fan i img,.igl-fan i video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.igl-fan i img.pp{animation:higPP 5s ease-in-out infinite alternate}
.igl-fan .tg{position:absolute;right:2px;top:2px;z-index:4;background:var(--gold);color:#1a1206;font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 7px;border-radius:5px;font-style:normal}
.igl-in:hover .igl-fan i:nth-child(1),.igl-fan:focus-visible i:nth-child(1){transform:rotate(-16deg) translateX(-8px)}
.igl-in:hover .igl-fan i:nth-child(3),.igl-fan:focus-visible i:nth-child(3){transform:rotate(14deg) translateX(8px)}
.igl-fan:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px;border-radius:14px}
.igl .igl-eb .igs-dot{vertical-align:1px}
@media(prefers-reduced-motion:reduce){.igl-fan i img.pp{animation:none}.igl-fan i{transition:none}}
.igl-go{font-size:0.875rem;color:var(--black);background:var(--gold);border-radius:6px;padding:9px 16px;text-decoration:none;font-weight:600;white-space:nowrap}
.igl-go:hover,.igl-go:focus-visible{background:var(--gold-2)}
.igl-req{font-size:0.875rem;color:var(--gold-2);text-decoration:none;white-space:nowrap}
.igl-req:hover,.igl-req:focus-visible{text-decoration:underline}
@media(max-width:760px){
  .hero-ig{right:14px;bottom:auto;top:92px;padding:6px}
  .hero-ig .igs-av{width:60px;height:60px;padding:3px}
  .hero-ig.has-stk{padding:6px}
  .hero-ig.has-stk .hero-stk{display:none}
  .hero-ig.has-stk .igs-av{display:block}
  .hero-peek{display:none}
  .hero-ig .igs-t{display:none}
  .igl{padding:64px 0 44px}.igl-in{padding:14px 14px 14px 136px;gap:12px;min-height:118px}
  .igl-fan{left:14px;top:-28px;bottom:auto;width:112px;height:124px}
  .igl-fan i{width:60px;height:108px;border-radius:11px}
  .igl-fan i:nth-child(2),.igl-fan i:only-of-type{left:22px}.igl-fan i:nth-child(3){left:44px}
  .igl-fan .tg{font-size:9px;right:0}
  .igl-id{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.hero-ig{transition:none}.hero-ig.has-story .igs-av,.igs-dot{animation:none}}
/* Demo, Konzept A: Pille rechts neben der Kennzahlen-Box (unten bündig), Karten-Fächer ragt nach oben.
   Reicht die Breite nicht, bricht die Pille unter die Box um (Zeilenabstand lässt dem Fächer Luft). */
.stats-row{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:20px;row-gap:78px;margin-top:34px}
.stats-row .stats{margin-top:0;flex:1 1 430px;max-width:560px}
.hero-bottom .hero-ig{position:relative;right:auto;top:auto;bottom:auto;display:inline-flex;align-items:center;flex:0 0 auto;width:max-content;max-width:100%;height:60px;margin:0;padding:8px 22px 8px 118px;gap:14px;color:var(--text);overflow:visible;border-radius:999px;background:rgba(var(--surface-rgb),.9)}
.hero-bottom .hero-ig.has-stk{padding:8px 22px 8px 118px}
.hero-bottom .hero-ig .igs-t b{font-size:15px;font-weight:500}
.hero-bottom .hero-ig .igs-t small{font-size:12px}
.hero-bottom .hero-ig .hig-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.hero-peek{right:auto;top:0}
/* Fächer aus bis zu 3 Story-Karten (9:16, Goldrand), vorderste = neueste Story im Boomerang */
.hero-bottom .hero-stk{position:absolute;left:10px;bottom:6px;width:96px;height:118px;margin:0;display:block}
.hero-bottom .hero-stk i{position:absolute;bottom:0;left:0;width:62px;height:112px;margin:0;border-radius:12px;border:2px solid var(--gold);overflow:hidden;background:#143a42;box-shadow:0 10px 24px rgba(0,0,0,.55);transform-origin:bottom center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hero-bottom .hero-stk i:nth-child(1){left:0;transform:rotate(-9deg);filter:brightness(.7)}
.hero-bottom .hero-stk i:nth-child(2){left:16px;transform:rotate(-2deg);filter:brightness(.85)}
.hero-bottom .hero-stk i:nth-child(3){left:32px;transform:rotate(7deg)}
.hero-bottom .hero-stk i:only-child{left:16px;transform:rotate(4deg);filter:none}
.hero-bottom .hero-stk i:nth-child(2):last-of-type{filter:none}
.hero-bottom .hero-ig:hover .hero-stk i:nth-child(1),.hero-bottom .hero-ig:focus-visible .hero-stk i:nth-child(1){transform:rotate(-15deg) translateX(-6px)}
.hero-bottom .hero-ig:hover .hero-stk i:nth-child(3),.hero-bottom .hero-ig:focus-visible .hero-stk i:nth-child(3){transform:rotate(13deg) translateX(6px)}
.hero-stk i img,.hero-stk i video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-stk i img.pp{animation:higPP 5s ease-in-out infinite alternate}
@keyframes higPP{from{transform:scale(1)}to{transform:scale(1.14) translateY(-2%)}}
.hero-stk .live{position:absolute;left:66px;top:-14px;z-index:5;background:var(--gold);color:#1a1206;font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:5px;font-style:normal}
.hero-bottom .hero-ig.has-stk .igs-av{display:none}
@media(max-width:760px){
  .stats-row{row-gap:54px}
  .hero-bottom .hero-ig,.hero-bottom .hero-ig.has-stk{height:56px;padding:6px 18px 6px 92px}
  .hero-bottom .hero-ig.has-stk .hero-stk{display:block;width:76px;height:92px}
  .hero-bottom .hero-ig.has-stk .igs-av{display:none}
  .hero-bottom .hero-stk i{width:49px;height:88px;border-radius:10px}
  .hero-bottom .hero-stk i:nth-child(2){left:12px}.hero-bottom .hero-stk i:nth-child(3){left:25px}
  .hero-stk .live{left:52px;top:-12px}
  .hero-bottom .hero-ig .igs-t{display:block}
}
@media(prefers-reduced-motion:reduce){.hero-stk i img.pp{animation:none}.hero-bottom .hero-stk i{transition:none}}
/* Demo-Ergänzungen: Halten-Anzeige, Demo-Hinweise */
/* Feste Höhen gegen Springen: Caption im Handy 2 Zeilen, Text unter der Bühne 2 Zeilen + Datum 1 Zeile */
.igs-cap{height:2.8em;line-height:1.4;margin-top:6px}
.igs-ui{min-height:calc(var(--w) * .42)}
.igs-now{height:3em;min-height:3em;margin:0 auto}
.igs-when{height:1.5em;margin:2px 0 0;overflow:hidden}
.igs-meta p{margin-left:auto;margin-right:auto}
.igs-arr{width:44px;height:44px}
.igs-sm.held .igs-sm-pb{opacity:.35}
.igs-sm-demo{position:absolute;left:12px;bottom:14px;z-index:8;font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.55);color:rgba(255,255,255,.85)}
.igs-demo{max-width:520px;margin:12px auto 0;font-size:12px;color:var(--dim);line-height:1.5}

/* ═══ Ablauf: Setlist + Build-up/Drop (Konzept C + D) ═══ */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#ablauf.sec{padding:0}
.ab-track{position:relative;height:240vh}
.ab-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:center;padding:84px 0 28px}
.ab-wrap{position:relative;z-index:2;width:100%}
.ab-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:32px;margin-bottom:22px}
.ab-head .eyebrow{grid-column:1/-1}
.ab-head .h2{margin:0;font-size:clamp(28px,3.6vw,52px)}
.ab-head .lead{grid-column:1;margin-top:10px;font-size:1rem;max-width:560px}
.ab-head .btn{grid-column:2;grid-row:2/4;align-self:end}
.ab-head .ab-portal{grid-column:1/-1;margin-top:16px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);max-width:720px}
.ab-portal .l{display:block;font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ab-portal .t{display:block;margin:4px 0 6px;font-size:1.0625rem;font-weight:600}
.ab-portal p{margin:0 0 8px;font-size:0.875rem;line-height:1.55;color:var(--muted)}
.ab-portal a{color:var(--gold);font-size:0.875rem;text-decoration:none;border-bottom:1px solid currentColor}
.ab-main{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
.ab-meter{display:flex;flex-direction:column;align-items:center;gap:16px}
.ab-big{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1}
.ab-big>span{grid-area:1/1}
.ab-pulse{width:78%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(var(--gold-rgb),.5);will-change:transform,opacity}
.ab-num{font-family:var(--font-head);font-size:clamp(96px,11vw,170px);line-height:.8;color:var(--gold);will-change:transform}
.ab-party{font-family:var(--font-head);font-size:clamp(56px,6vw,96px);line-height:.85;text-align:center;background:linear-gradient(180deg,#fff,var(--gold-2) 45%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:scale(1.8)}
.ab-level{display:flex;gap:4px;align-items:flex-end;height:40px}
.ab-level i{width:9px;border-radius:2px;background:#22393f;overflow:hidden}
.ab-level i b{display:block;height:100%;background:linear-gradient(0deg,var(--gold-deep),var(--gold-2));opacity:0}
.ab-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ab-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 92px;column-gap:16px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:background-color .4s,border-color .4s,opacity .4s}
.ab-no{font-family:var(--font-head);font-size:28px;line-height:1;color:var(--dim);transition:color .4s}
.ab-ti{margin:0;font-family:var(--font-body);font-weight:500;font-size:1.0625rem;line-height:1.3;letter-spacing:0}
.ab-de{display:grid;grid-template-rows:0fr}
.ab-de>p{min-height:0;overflow:hidden;margin:0;color:var(--muted);font-size:0.9375rem;line-height:1.6;opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s}
.ab-st{font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:right;padding-top:3px}
.ab-wave{grid-column:2/4;position:relative;height:22px;margin-top:8px;overflow:hidden}
.ab-wave .bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.ab-wave .bars i{flex:1;border-radius:1px;background:#2a4148}
.ab-wave .gold{position:absolute;inset:0;overflow:hidden;will-change:transform}
.ab-wave .gold .bars{will-change:transform}
.ab-wave .gold .bars i{background:var(--gold)}
.ab-wave .ph{position:absolute;top:-2px;bottom:-2px;left:0;width:2px;background:#fff;box-shadow:0 0 10px var(--gold-2);opacity:0;will-change:transform}
.ab-row.on{background:rgba(var(--gold-rgb),.08);border-color:rgba(var(--gold-rgb),.5)}
.ab-row.on .ab-no{color:var(--gold)}
.ab-row.on .ab-de>p{opacity:1;transform:none}
.ab-row.on .ab-de,.ab-row.done .ab-de{grid-template-rows:1fr}
.ab-row.done .ab-de{grid-template-rows:0fr}
.ab-row.on .ph{opacity:1}
.ab-row.on .ab-st{color:var(--gold-2)}
.ab-row.done{opacity:.6}
.ab-row.done .ab-ti::after{content:' ✓';color:var(--gold-2)}
/* Drop */
.ab-flash{position:absolute;inset:0;z-index:3;background:radial-gradient(circle at 30% 55%,#fff,rgba(239,193,134,.55) 35%,transparent 70%);opacity:0;pointer-events:none}
.ab-flash.go{animation:abFlash .5s ease-out}
@keyframes abFlash{0%{opacity:.85}100%{opacity:0}}
.ab-eq{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:0;display:flex;align-items:flex-end;gap:4px;padding:0 16px;opacity:.06;transition:opacity .8s;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ab-eq i{flex:1;height:100%;border-radius:3px 3px 0 0;background:linear-gradient(0deg,var(--gold-deep),var(--gold-2));transform-origin:bottom;transform:scaleY(var(--lv,.15));opacity:.5}
#ablauf.dropped .ab-eq{opacity:.32}
#ablauf.dropped .ab-eq i{animation:eq 1s ease-in-out infinite alternate}
#ablauf.dropped .ab-num,#ablauf.dropped .ab-pulse{opacity:0!important}
#ablauf.dropped .ab-party{animation:abSlam .55s cubic-bezier(.2,1.6,.4,1) forwards}
#ablauf.dropped .ab-row[data-i="4"] .ab-ti{animation:abSlamT .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes abSlam{0%{opacity:0;transform:scale(1.8)}60%{opacity:1;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
@keyframes abSlamT{0%{transform:scale(1.25);color:var(--gold-2)}100%{transform:none}}
/* Ablauf: Inhalt muss in die feste Buehne passen (Punkt 6 klappt auf, sonst unten abgeschnitten) */
@media (min-width:900px) and (max-height:1100px){
  .ab-stage{padding:72px 0 16px}
  .ab-head{margin-bottom:12px}
  .ab-head .h2{font-size:clamp(26px,min(3.6vw,5.2vh),44px)}
  .ab-head .lead{display:none}
  .ab-head .ab-portal{margin-top:10px;padding:10px 14px;max-width:none}
  .ab-portal .t{margin:2px 0 4px;font-size:1rem}
  .ab-portal p{margin:0 0 4px;font-size:0.8125rem;line-height:1.45}
  .ab-list{gap:6px}
  .ab-row{padding:8px 16px}
  .ab-wave{height:12px;margin-top:4px}
  .ab-de>p{font-size:0.875rem;line-height:1.5}
}
@media (min-width:900px) and (max-height:860px){
  .ab-stage{padding:64px 0 10px}
  .ab-head .h2{font-size:clamp(24px,4.4vh,34px)}
  .ab-head .ab-portal p{display:none}
  .ab-no{font-size:1.375rem}.ab-ti{font-size:0.9375rem}
  .ab-row{padding:6px 14px}.ab-wave{height:10px;margin-top:3px}
  .ab-list{gap:4px}
}
@media (max-width:899px){
  .ab-track{height:160vh}
  .ab-stage{padding:78px 0 16px;min-height:0}
  .ab-head{grid-template-columns:1fr;margin-bottom:12px}
  .ab-head .h2{font-size:clamp(26px,7vw,36px)}
  .ab-head .lead{font-size:0.875rem;line-height:1.5;margin-top:6px}
  .ab-head .eyebrow{margin-bottom:8px}
  .ab-head .btn{display:none}
  .ab-main{grid-template-columns:1fr;gap:10px}
  .ab-meter{flex-direction:row;justify-content:space-between;gap:10px}
  .ab-big{width:60px}
  .ab-num{font-size:44px}.ab-party{font-size:26px}
  .ab-level{height:28px}.ab-level i{width:6px}
  .ab-row{grid-template-columns:32px minmax(0,1fr);padding:7px 12px}
  .ab-st{display:none}.ab-wave{grid-column:1/3;height:14px;margin-top:4px}
  .ab-no{font-size:1.375rem}.ab-ti{font-size:0.9375rem}.ab-de>p{font-size:0.875rem}
  .ab-list{gap:5px}
}
@media (max-height:620px),(prefers-reduced-motion:reduce){
  .ab-track{height:auto}
  .ab-stage{position:relative;height:auto;min-height:0;padding:var(--sec-y) 0}
}
/* Grosse Schrift: neu.js setzt .ab-flow, wenn der Inhalt nicht mehr in die feste Buehne passt */
#ablauf.ab-flow .ab-track{height:auto}
#ablauf.ab-flow .ab-stage{position:relative;height:auto;min-height:0;padding:var(--sec-y) 0}
@media (prefers-reduced-motion:reduce){
  .ab-de{grid-template-rows:1fr!important}.ab-de>p{opacity:1;transform:none}
  .ab-eq,.ab-flash,.ab-pulse{display:none}
  .ab-row.done{opacity:1}
}
/* ═══ Playlisten (Konzept B): Karten mit Wellenform, Equalizer, Abspielmarke ═══ */
.plx{margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.plx-head{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
.plx-h{font-family:var(--font-h);font-weight:600;font-size:clamp(18.6px,2.1vw,27.3px);line-height:1.08;margin:0;letter-spacing:-.01em}
.plx-intro{margin:8px 0 0;color:var(--muted);font-size:0.9375rem}
.plx-all{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-2);text-decoration:none;font-size:0.9375rem}
.plx-all:hover{text-decoration:underline}
.plx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plx-card{position:relative;display:flex;flex-direction:column;min-height:400px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--surface);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .35s,transform .45s var(--ease)}
.plx-card.is-sk{background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%) 0 0/300% 100%;animation:plxSk 1.6s linear infinite}
@keyframes plxSk{to{background-position:-150% 0}}
.plx-card:focus-visible{border-color:var(--line-2);transform:translateY(-4px)}
.plx-card:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.plx-cv{position:relative;aspect-ratio:16/9;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;background:#0b1d22}
.plx-cv img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.82);transition:transform 1.2s var(--ease),filter .5s}
.plx-card:hover .plx-cv img{transform:scale(1.05);filter:saturate(1) brightness(.92)}
.plx-cv::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--surface-rgb),0) 40%,rgba(var(--surface-rgb),.97))}
.plx-tag{position:absolute;top:14px;left:14px;z-index:2;padding:4px 11px;border-radius:999px;background:rgba(var(--bg-rgb),.72);border:1px solid var(--line-2);color:var(--gold-2);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase}
.plx-eq{position:absolute;top:16px;right:16px;z-index:2;display:flex;gap:3px;align-items:flex-end;height:18px}
.plx-eq i{width:3px;height:100%;border-radius:1px;background:var(--gold-2);transform-origin:bottom;transform:scaleY(.25)}
.plx-body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;padding:0 20px 20px;margin-top:-30px}
.plx-t{font-family:var(--font-head);font-size:30px;line-height:1}
.plx-s{color:var(--muted);font-size:0.875rem;line-height:1.45;min-height:1.45em;margin-top:2px}
.plx-wv{position:relative;height:30px;margin:16px 0 12px;overflow:hidden}
.plx-wv .bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.plx-wv .bars i{flex:1;height:100%;border-radius:1px;background:#2a4148;transform:scaleY(var(--h))}
.plx-wv .gold{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.plx-wv .gold .bars i{background:var(--gold)}
.plx-wv .ph{position:absolute;top:-2px;bottom:-2px;left:0;width:2px;background:#fff;box-shadow:0 0 8px var(--gold-2);opacity:0}
.plx-f{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:0.8438rem}
.plx-f dt,.plx-f .k{color:var(--dim);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;padding-top:2px}
.plx-f .v{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plx-m{margin-top:auto;padding-top:14px;font-size:0.8125rem;color:var(--dim)}
.plx-mix{margin-top:18px;min-height:44px}
/* Bewegung nur bei Hover/Fokus bzw. einmal beim Sichtbarwerden (Touch: Klasse .go) */
.plx-card:hover .plx-eq i,.plx-card:focus-visible .plx-eq i,.plx-card.go .plx-eq i{animation:plxEq .9s ease-in-out infinite alternate}
.plx-eq i:nth-child(2){animation-delay:-.3s!important}.plx-eq i:nth-child(3){animation-delay:-.6s!important}.plx-eq i:nth-child(4){animation-delay:-.15s!important}
@keyframes plxEq{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
.plx-card:hover .plx-wv .gold,.plx-card:focus-visible .plx-wv .gold,.plx-card.go .plx-wv .gold{animation:plxClip 6s linear infinite}
.plx-card:hover .plx-wv .ph,.plx-card:focus-visible .plx-wv .ph,.plx-card.go .plx-wv .ph{opacity:1;animation:plxPh 6s linear infinite}
.plx-card:hover .plx-wv .bars i,.plx-card:focus-visible .plx-wv .bars i,.plx-card.go .plx-wv .bars i{animation:plxWave 1.1s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes plxClip{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes plxPh{from{transform:translateX(0)}to{transform:translateX(calc(var(--w,300) * 1px))}}
@keyframes plxWave{from{transform:scaleY(var(--h))}to{transform:scaleY(calc(var(--h) * .45))}}
@media (max-width:899px){.plx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plx-grid .plx-card:nth-child(3){display:none}}
@media (max-width:640px){.plx-grid{grid-template-columns:1fr}.plx-grid .plx-card:nth-child(3){display:flex}.plx-card{min-height:0}.plx-card.is-sk{min-height:380px}.plx-mix{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.plx-card,.plx-card *{animation:none!important;transition:none!important}.plx-card:hover{transform:none}.plx-wv .gold{clip-path:inset(0 35% 0 0)}}
/* ═══ Setlisten-Block „SO LIEF Der Abend.“ (wie Hauptseite B3-1, im Demo-Stil) ═══ */
.sl3{margin-top:clamp(40px,5vw,64px)}
.sl3-card{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);padding:clamp(22px,3vw,40px);border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--surface);min-height:560px;transition:opacity .4s}
.sl3-card.is-sk .sl3-head>*,.sl3-card.is-sk .sl3-body{visibility:hidden}
.sl3-card.is-sk{background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%) 0 0/300% 100%;animation:plxSk 1.6s linear infinite}
.sl3-card.swap{opacity:.35}
.sl3-h .g{color:var(--gold)}
.sl3-h{font-family:var(--font-h);font-weight:600;font-size:clamp(27.3px,3.1vw,44.6px);line-height:1.08;margin:8px 0 0;letter-spacing:-.01em}
.sl3-meta{margin:16px 0 0;color:var(--gold-2);font-size:0.8125rem;letter-spacing:.12em;text-transform:uppercase}
.sl3-note{margin:12px 0 0;color:var(--muted);font-size:1rem;line-height:1.6;max-width:420px}
.sl3-cv{display:flex;margin-top:22px;height:64px}
.sl3-cv img{width:64px;height:64px;border-radius:10px;object-fit:cover;border:2px solid var(--surface);box-shadow:0 10px 24px -10px rgba(0,0,0,.8)}
.sl3-cv img+img{margin-left:-14px}
.sl3-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.sl3-btns .btn{min-height:44px}
.sl3-body{min-width:0;display:flex;flex-direction:column}
.sl3-phases{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:6px}
.sl3-ph{flex:1 1 0;min-width:78px;padding:8px 9px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:0.6875rem;line-height:1.3;color:var(--muted)}
.sl3-ph b{display:block;font-weight:500;color:var(--text);font-size:0.8125rem}
.sl3-ph.on{border-color:var(--line-2);background:rgba(var(--gold-rgb),.08)}
.sl3-ph.on b{color:var(--gold-2)}
.sl3-ph i{display:block;height:3px;margin-top:6px;border-radius:2px;background:rgba(255,255,255,.14)}
.sl3-ph.on i{background:var(--gold)}
.sl3-list{list-style:none;margin:14px 0 0;padding:0 6px 0 0;max-height:420px;overflow-y:auto;scrollbar-width:thin;border-top:1px solid var(--line)}
.sl3-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"n m t" "n m k";column-gap:14px;align-items:center;padding:12px 8px;border-bottom:1px solid var(--line);border-radius:10px;transition:background-color .3s}
.sl3-gap{list-style:none;text-align:center;padding:7px 0;border-bottom:1px dashed var(--line-2);font-size:0.6875rem;letter-spacing:.06em;color:var(--muted)}
.sl3-row:hover{background:rgba(var(--gold-rgb),.05)}
.sl3-n{grid-area:n;font-family:var(--font-head);font-size:26px;color:var(--dim);line-height:1}
.sl3-m{grid-area:m;min-width:0}
.sl3-ti{display:block;font-weight:500;font-size:0.9375rem;line-height:1.35;overflow-wrap:anywhere}
.sl3-ar{display:block;margin-top:2px;font-size:0.8125rem;color:var(--dim);overflow-wrap:anywhere}
.sl3-t{grid-area:t;font-family:var(--font-head);font-size:1.25rem;letter-spacing:.06em;color:var(--gold);text-align:right}
.sl3-k{grid-area:k;font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:right}
/* Deko: kleiner Equalizer in der Zeile unter dem Mauszeiger */
.sl3-eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px;margin-left:8px;vertical-align:middle;opacity:0;transition:opacity .3s}
.sl3-eq i{width:2px;height:100%;background:var(--gold-2);transform-origin:bottom;transform:scaleY(.3)}
.sl3-row:hover .sl3-eq{opacity:1}
.sl3-row:hover .sl3-eq i{animation:plxEq .8s ease-in-out infinite alternate}
.sl3-row:hover .sl3-eq i:nth-child(2){animation-delay:-.3s}.sl3-row:hover .sl3-eq i:nth-child(3){animation-delay:-.55s}
@media (max-width:899px){.sl3-card{grid-template-columns:1fr;min-height:900px}.sl3-list{max-height:440px}}
/* dunkle, schmale Scrollbalken (Fallback) */
.sl3-card *{scrollbar-width:thin;scrollbar-color:rgba(var(--gold-rgb),.35) transparent}
.sl3-card *::-webkit-scrollbar{width:5px;height:5px}
.sl3-card *::-webkit-scrollbar-track{background:transparent}
.sl3-card *::-webkit-scrollbar-thumb{background:rgba(var(--gold-rgb),.35);border-radius:3px}
@media (prefers-reduced-motion:reduce){.sl3-card,.sl3-card *{animation:none!important;transition:none!important}}
/* ═══ Haltung ═══ */
.stance{display:grid;gap:18px}
.stance .col{border-radius:var(--r-lg);padding:30px;border:1px solid var(--line)}
.stance .no{background:rgba(255,255,255,.02)}
.stance .yes{background:linear-gradient(160deg,rgba(var(--gold-rgb),.14),rgba(var(--gold-rgb),.03));border-color:var(--line-2)}
.stance h3{font-family:var(--font-h);font-weight:600;font-size:1.3188rem;margin:0 0 14px;line-height:1.08;letter-spacing:-.01em}
.stance p{color:var(--muted);margin:0 0 10px}
.stance .yes p{color:var(--text)}
.stance .end{margin-top:18px;font-family:var(--font-serif);font-style:italic;font-size:1.375rem;color:var(--gold-2)}
@media (min-width:900px){.stance{grid-template-columns:1fr 1.2fr}}

/* ═══ FAQ ═══ */
.faq{display:grid;gap:44px}
.faq-side .tel{display:inline-flex;align-items:center;gap:10px;margin-top:24px;min-height:48px;font-family:var(--font-head);font-size:34px;text-decoration:none;color:var(--gold-2)}
.faq-grp{font-size:0.875rem;letter-spacing:.04em;color:var(--gold);margin:34px 0 8px}
.faq-grp:first-child{margin-top:0}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px;padding:14px 0;cursor:pointer;font-size:1.125rem;font-weight:400}
summary::-webkit-details-marker{display:none}
summary .pm{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);position:relative;transition:transform .4s var(--ease),border-color .3s,background-color .3s}
summary .pm::before,summary .pm::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--text)}
summary .pm::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
details[open] summary .pm{border-color:var(--gold);background:var(--gold);transform:rotate(180deg)}
details[open] summary .pm::before,details[open] summary .pm::after{background:#1a1206}
details[open] summary .pm::after{transform:rotate(0)}
summary:hover{color:var(--gold-2)}
.fq-e{display:none}
summary{justify-content:flex-start}
summary .pm{margin-left:auto}
.faq-a{padding:0 50px 22px 0;color:var(--muted)}
.faq-a p{margin:0 0 12px}
.faq-a a{color:var(--gold-2)}
details[open] .faq-a{animation:fadeIn .5s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (min-width:900px){.faq{grid-template-columns:1fr 1.6fr;gap:90px}.faq-side{position:sticky;top:110px;align-self:start}}

/* ═══ Einzugsgebiet ═══ */
.places{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,320px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--pad) 20px;margin:44px calc(var(--pad) * -1) 0;scrollbar-width:none}
.places::-webkit-scrollbar{display:none}
.place{position:relative;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;scroll-snap-align:start;scroll-margin-left:var(--pad);border:1px solid var(--line)}
.place img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.place:hover img{transform:scale(1.08)}
.place::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(var(--bg-rgb),.9))}
.place-cta{display:block;text-decoration:none;color:#1a1206;background:linear-gradient(135deg,var(--gold-2),var(--gold) 60%,var(--gold-deep));border-color:var(--gold)}
.place-cta::after{display:none}
.place-cta span{color:#1a1206}.place.place-cta small{color:#3a2a10}
.place-cta:hover{filter:brightness(1.06)}
.place span{position:absolute;left:20px;bottom:16px;z-index:1;font-family:var(--font-head);font-size:36px;line-height:1}
.place small{display:block;font-family:var(--font-body);font-size:0.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
@media (min-width:1080px){
  .places{grid-auto-flow:row;grid-template-columns:2fr 1fr 1fr 1fr;grid-template-rows:repeat(2,clamp(220px,15vw,330px));overflow:visible;margin:48px 0 0;padding:0}
  .place{aspect-ratio:auto}
  .place:first-child{grid-row:span 2}
  .place:first-child span{font-size:clamp(48px,4vw,72px);left:28px;bottom:24px}
}
.regions{display:grid;gap:16px;margin-top:40px}
.regions>div{padding:22px;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line)}
.regions h3{font-size:0.875rem;letter-spacing:.04em;color:var(--gold);font-weight:500;margin:0 0 12px}
.regions ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.regions li{padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-size:0.875rem;color:var(--text)}
@media (min-width:900px){.regions{grid-template-columns:repeat(3,1fr)}}

/* Einzugsgebiet: Karten und Chips als Links (wie Startseite #area) */
a.place{display:block;color:var(--text);text-decoration:none}
.place .arr{font-style:normal;font-size:.6em;opacity:0;display:inline-block;transform:translateX(-6px);transition:opacity .3s,transform .3s}
a.place:focus-visible{border-color:var(--gold)}
a.place:hover .arr,a.place:focus-visible .arr{opacity:1;transform:none}
a.place:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.regions li{padding:0;border:0;background:none}
.regions li a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-size:0.875rem;color:var(--text);text-decoration:none;transition:border-color .25s,background-color .25s,color .25s}
.regions li a::after{content:'→';font-size:0.75rem;opacity:0;margin-left:-4px;transition:opacity .25s,margin .25s}
.regions li a:hover,.regions li a:focus-visible{border-color:var(--gold);background:rgba(var(--gold-rgb),.12);color:var(--gold-2)}
.regions li a:hover::after,.regions li a:focus-visible::after{opacity:1;margin-left:0}
.regions li a:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
/* Pillen-Konzept (Betreiber 08.10.2026): eine Pille fuer alles, nie umbrechen; ohne Link gestrichelt; Karten oben buendig */
.regions{display:grid;gap:16px;margin-top:40px;align-items:start}
@media (min-width:700px){.regions{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.regions{grid-template-columns:repeat(3,1fr);grid-auto-flow:dense}
  .regions>div:nth-child(2){grid-column:2;grid-row:1 / span 2}
  .regions>div:nth-child(3){grid-column:3;grid-row:1 / span 2}
  .regions>div:nth-child(1){grid-column:1;grid-row:1}
  .regions>div:nth-child(4){grid-column:1;grid-row:2}}
.regions>div{padding:22px}
.regions ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.regions li{padding:0;border:0;background:none;max-width:100%}
/* EINE Pille fuer alles: gleiche Hoehe, Text bricht nie um, zu lange Namen werden gekuerzt */
.regions li>a,.regions li>span{display:inline-flex;align-items:center;box-sizing:border-box;height:38px;max-width:100%;padding:0 14px;border-radius:999px;font-size:0.875rem;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--text);text-decoration:none;transition:border-color .25s,background-color .25s,color .25s}
.regions li>a::after{content:none}
.regions li>a:hover,.regions li>a:focus-visible{border-color:var(--gold);background:rgba(var(--gold-rgb),.12);color:var(--gold-2)}
/* ohne eigene Seite: gleiche Form, aber gestrichelt und etwas ruhiger */
.regions li>span{border-style:dashed;border-color:rgba(255,255,255,.22);background:transparent;color:var(--muted)}
/* Ortskacheln: alle kleinen Kacheln gleiche Schrift und gleiche Grundlinie; zu lange Namen brechen in zwei Zeilen um (Silbentrennung), Zeile waechst nach oben */
.place span{right:14px;line-height:1.02;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.place span .arr{position:absolute;right:0;bottom:2px}   /* der Pfeil nimmt keinen Platz im Text: sonst bricht er um und hebt den Namen an */
@media (min-width:1080px){.place:not(:first-child) span{font-size:clamp(22px,1.8vw,30px)}}
/* ═══ Kontakt ═══ */
.contact{position:relative;overflow:hidden;border-radius:clamp(24px,4vw,44px);background:radial-gradient(ellipse 80% 70% at 85% 0%,rgba(var(--gold-rgb),.25),transparent 60%),linear-gradient(160deg,#0f2a31,#081a1f);border:1px solid var(--line-2);padding:clamp(28px,6vw,80px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;position:relative;z-index:1}
.bigtel{display:block;font-family:var(--font-head);font-size:clamp(46px,8vw,104px);line-height:.95;text-decoration:none;color:var(--text);margin:18px 0 6px;transition:color .3s}
.bigtel:hover{color:var(--gold-2)}
.cbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn-wa{background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));color:#1a1206;box-shadow:0 10px 40px -10px rgba(var(--gold-rgb),.6)}
@media(hover:hover){.btn-wa:hover{transform:translateY(-2px)}}
.cmeta{margin-top:26px;color:var(--muted);font-size:0.9375rem}
.form{background:rgba(var(--bg-rgb),.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px)}
.form h3{font-family:var(--font-head);font-weight:400;font-size:30px;margin:0 0 4px}
.form .hint{font-size:0.8125rem;color:var(--dim);margin:0 0 20px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;border:1px solid var(--line);font-size:0.875rem;color:var(--muted);cursor:pointer;text-align:center;padding:4px;transition:all .25s}
.seg input:checked+span{background:var(--gold);color:#1a1206;border-color:var(--gold);font-weight:500}
.seg input:focus-visible+span{outline:2px solid var(--gold-2);outline-offset:2px}
.fld{display:block;margin-bottom:12px}
.fld span{display:block;font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fld select{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0e2329;color:var(--text);font:inherit;font-size:1rem}
.fld select:focus{outline:none;border-color:var(--gold)}
.fld em{font-style:normal;color:var(--dim);text-transform:none;letter-spacing:0}
.fld.bad input,.fld.bad select,input.bad,select.bad{border-color:#e5484d}
.fld input,.fld textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font:inherit;font-size:1rem;color-scheme:dark}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--gold)}
.fld textarea{min-height:96px;resize:vertical}
.row2{display:grid;gap:12px}
@media (min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.form .btn{width:100%;margin-top:6px}
.form .row2 .btn{margin-top:6px}
.f-head .eyebrow{margin-bottom:6px}
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 6px}
@media (max-width:420px){.trust div{padding:8px 4px}.trust b{font-size:1.1875rem}.trust span{font-size:0.625rem;letter-spacing:.06em}}
.trust div{padding:10px;border-radius:12px;border:1px solid var(--line);text-align:center}
.trust b{display:block;font-family:var(--font-head);font-weight:400;font-size:1.375rem;color:var(--gold-2);line-height:1.1}
.trust span{font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.f-intro{margin:0 0 10px;font-weight:500}
.avail{font-size:0.875rem;color:var(--muted);padding:12px 14px;border-left:3px solid var(--gold);background:rgba(var(--gold-rgb),.06);border-radius:0 12px 12px 0;margin-bottom:16px}
.avail strong{color:var(--gold-2);font-weight:500}
.fsi{display:flex;gap:6px;list-style:none;margin:0 0 6px;padding:0}
.fsi li{flex:1;display:flex;align-items:center;gap:8px;font-size:0.8125rem;color:var(--dim)}
.fsi i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:0.75rem;border:1px solid var(--line)}
.fsi li.on{color:var(--text)}.fsi li.on i{background:var(--gold);color:#1a1206;border-color:var(--gold)}
.req{font-size:0.75rem;color:var(--dim);margin:0 0 12px}
.xlist{display:grid;gap:14px;margin-top:4px}
.xg-l{margin:0 0 6px;font-size:0.8125rem;color:var(--gold-2)}
.xo{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line)}
.chk{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 0;cursor:pointer;font-size:0.9375rem;flex:1}
.chk input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--gold);flex-shrink:0}
.chk .plus{color:var(--gold-2)}
.xi{width:44px;height:44px;border:0;background:none;color:var(--gold-2);cursor:pointer;font-size:0.9375rem}
.xt{flex-basis:100%;margin:0 0 10px;font-size:0.8125rem;color:var(--muted);line-height:1.5}
.dsgvo{font-size:0.8125rem;color:var(--muted);line-height:1.5}
.dsgvo a{color:var(--gold-2)}
.ferr{color:#ff8a8d;font-size:0.875rem;margin:8px 0 0}
.cinfo{margin:24px 0 0;display:grid;gap:10px}
.cinfo div{display:flex;gap:14px;align-items:baseline}
.cinfo dt{min-width:80px;font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cinfo dd{margin:0;color:var(--text)}
.cinfo a{color:var(--text);text-decoration:none}
.cinfo a:hover{color:var(--gold-2)}
.csoc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.csoc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-size:0.875rem}
.csoc a:hover{border-color:var(--gold)}
.rv-ev{color:var(--gold-2)!important;font-size:0.875rem!important;margin-top:-6px!important}
.toast{margin:12px 0 0;font-size:14px;color:var(--gold-2);min-height:1.4em}
@media (min-width:1000px){.contact-grid{grid-template-columns:1.1fr 1fr;align-items:center}}

/* ═══ Blog ═══ */
.lp-wrap{margin-top:48px}
.lp-grid{display:grid;gap:18px;position:relative;z-index:1}
.post{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);text-decoration:none;transition:border-color .3s,transform .5s var(--ease)}
.post:hover{border-color:var(--line-2);transform:translateY(-4px)}
.pimg{aspect-ratio:16/10;overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.post:hover .pimg img{transform:scale(1.06)}
.pbody{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.ptag{font-size:0.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.post h3{margin:0;font-weight:500;font-size:1.1875rem;line-height:1.35}
.post small{color:var(--dim);font-size:0.8125rem}
.post .more{margin-top:auto;padding-top:6px;color:var(--gold-2);font-size:0.875rem;font-weight:500}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.lp-links{margin-top:36px;position:relative;z-index:1}
.lp-links-h{margin:0 0 10px;font-weight:500;font-size:0.875rem;letter-spacing:.04em;color:var(--dim)}
.lp-links ul{list-style:none;margin:0;padding:0;display:grid;gap:0 36px}
.lp-links a{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-size:1rem;line-height:1.4;transition:color .25s,border-color .25s}
.lp-links a:hover,.lp-links a:focus-visible{color:var(--gold-2);border-color:var(--line-2)}
@media (min-width:900px){.lp-links ul{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.lp-grid{grid-template-columns:repeat(3,1fr)}}
/* ═══ Kontaktformular: Styles der Startseite (Zeilen 504-548, 2246-2493) ═══ */
:root{--border:rgba(255,255,255,.08);--radius:12px;--gold-dim:rgba(var(--gold-rgb),.18)}
/* ═══ Flatpickr Dark Gold Theme ═══ */
html .flatpickr-calendar{background:var(--st-surface);border:1px solid rgba(var(--gold-rgb),0.3);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,0.6);font-family:var(--font-body);padding:8px;width:322px!important;max-width:100%;}
html .flatpickr-days,html .flatpickr-weeks{width:306px!important;}
.dayContainer{width:306px!important;min-width:306px!important;max-width:306px!important;}
html .flatpickr-months{padding:4px 0 8px;}
html .flatpickr-month{color:#fff;fill:#fff;}
html .flatpickr-current-month{font-size:14px;font-weight:500;color:#fff;}
html .flatpickr-current-month .flatpickr-monthDropdown-months{background:var(--st-surface);color:#fff;border:none;font-family:var(--font-body);}
html .flatpickr-current-month input.cur-year{color:#fff;font-family:var(--font-body);}
html .flatpickr-prev-month,html .flatpickr-next-month{fill:var(--gold)!important;color:var(--gold)!important;}
html .flatpickr-prev-month:hover,html .flatpickr-next-month:hover{fill:#fff!important;color:#fff!important;}
html .flatpickr-weekday{color:var(--muted)!important;font-size:12px;font-weight:500;letter-spacing:0.5px;}
/* Landesfeiertage BY/BW - helles Blaugrau */
html .flatpickr-day.fp-landesfeiertag{color:#BD92C4;font-weight:500;}
html .flatpickr-day.fp-landesfeiertag.flatpickr-disabled{color:rgba(189,146,196,0.25);}
html .flatpickr-day.fp-landesfeiertag.selected{color:var(--black);}
.fp-landes-dot{background:#BD92C4!important;}

/* Feiertage */
html .flatpickr-day.fp-holiday{color:var(--gold-2);font-weight:600;}
html .flatpickr-day.fp-holiday.flatpickr-disabled{color:rgba(224,123,84,0.3);}
html .flatpickr-day.fp-holiday.selected{color:var(--black);}
.fp-holiday-dot{display:block;width:4px;height:4px;border-radius:50%;background:var(--gold-2);margin:1px auto 0;position:absolute;bottom:3px;left:50%;transform:translateX(-50%);}
html .flatpickr-day{position:relative;}
/* Alle Tage gut lesbar */
html .flatpickr-day{color:rgba(255,255,255,0.88);border-radius:6px;height:34px;line-height:34px;font-size:14px;}
html .flatpickr-day:hover{background:rgba(var(--gold-rgb),0.15);color:#fff;border-color:transparent;}
html .flatpickr-day.today{border-color:rgba(var(--gold-rgb),0.5);color:var(--gold);font-weight:600;}
html .flatpickr-day.today:hover{background:rgba(var(--gold-rgb),0.15);}
html .flatpickr-day.selected,html .flatpickr-day.selected:hover{background:var(--gold);border-color:var(--gold);color:var(--black);font-weight:700;}
/* Andere Monate dezenter */
html .flatpickr-day.prevMonthDay,html .flatpickr-day.nextMonthDay{color:rgba(255,255,255,0.25);}
/* Gesperrte Vergangenheit */
html .flatpickr-day.flatpickr-disabled{color:rgba(255,255,255,0.18);cursor:not-allowed;}
html .flatpickr-day.flatpickr-disabled:hover{background:transparent;}
/* Freitag & Samstag Gold hervorheben */
html .flatpickr-day.fp-weekend{color:var(--gold);font-weight:600;}
html .flatpickr-day.fp-weekend:hover{background:rgba(var(--gold-rgb),0.15);}
html .flatpickr-day.fp-weekend.selected{color:var(--black);}
/* Vergangene Fr/Sa ausgegraut */
html .flatpickr-day.fp-weekend.flatpickr-disabled{color:rgba(255,255,255,0.18);font-weight:400;}

/* ═══ Flatpickr Input ═══ */
#f-datum{cursor:pointer;}
#f-datum.active,#f-datum:focus{border-color:rgba(var(--gold-rgb),0.55)!important;background:var(--surface-2)!important;}

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
#contact{padding:110px 0 80px}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact-left-sticky{position:sticky;top:100px}
.contact-items{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.contact-row{
  display:flex;gap:14px;align-items:center;
  padding:16px;background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--radius);
  border-left:3px solid transparent;
  transition:border-color .3s,border-left-color .3s,transform .3s,box-shadow .3s;
  cursor:default;
}
.contact-row:hover{
  border-color:var(--border);
  border-left-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.contact-row:hover .contact-row-icon{
  background:rgba(var(--gold-rgb),0.2);
  transition:background .3s;
}
.contact-row-icon{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--gold-dim);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s;
}
.contact-row-icon svg{width:18px;height:18px;stroke:var(--gold)}
.contact-row-label{font-size:0.6875rem;letter-spacing:0.6px;text-transform:uppercase;color:var(--muted)}
.contact-row-val{font-size:1rem;color:#fff;font-weight:500;margin-top:2px}
.contact-row-val a{color:#fff;transition:color .2s}
.contact-row-val a:hover{color:var(--gold)}
.social-links{
  display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;
}
.social-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:0 0 140px;
  padding:10px 18px;border:1px solid var(--border-2);
  font-size:0.75rem;letter-spacing:0.5px;text-transform:uppercase;
  color:var(--muted);border-radius:var(--radius);
  transition:border-color .25s,color .25s,background .25s,transform .25s;
}
.social-btn:hover{
  color:#fff;border-color:var(--gold);
  background:rgba(var(--gold-rgb),0.1);
  transform:translateY(-2px);
}
.social-btn svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0}

.contact-form-side{}
.form-header{margin-bottom:28px}
.form-header h3{
  font-family:var(--font-head);font-size:28px;letter-spacing:0.9px;
  color:#fff;margin-top:8px;font-weight:700;}
.eventfix-wrap{
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--radius);padding:28px;
  position:relative;overflow:hidden;
}
/* Jede Kachel behaelt ihre natuerliche Hoehe - der Wechsel dazwischen wird
   nur weich animiert (Hoehe wird dafuer per JS kurz explizit gesetzt). */
.eventfix-wrap{transition:height .45s cubic-bezier(.25,.46,.45,.94)}
@media(prefers-reduced-motion:reduce){.eventfix-wrap{transition:none}}
.event-emoji-bg{
  position:absolute;bottom:-40px;right:-30px;
  font-size:320px;line-height:1;
  opacity:0;
  pointer-events:none;
  user-select:none;
  transition:opacity .5s ease, transform .5s ease;
  transform:rotate(-12deg) scale(0.9);
  z-index:0;
  filter:none;
}
.event-emoji-bg.visible{
  opacity:0.18;
  transform:rotate(-12deg) scale(1);
  filter:drop-shadow(0 0 40px rgba(var(--gold-rgb),0.6)) drop-shadow(0 0 80px rgba(var(--gold-rgb),0.3)) grayscale(0.1);
}
.form-steps-indicator{
  display:flex;align-items:center;gap:0;margin-bottom:24px;
}
.fsi-step{
  display:flex;align-items:center;gap:8px;
  opacity:0.4;transition:opacity .3s;
}
.fsi-step.fsi-active{opacity:1}
.fsi-step.fsi-done{opacity:1}
.fsi-step.fsi-done .fsi-num{background:rgba(134,190,142,0.2);color:#86BE8E;border:1px solid rgba(134,190,142,0.4);}
.fsi-step.fsi-done .fsi-label{color:#86BE8E;opacity:0.8;}
.fsi-num{
  width:24px;height:24px;border-radius:50%;
  background:var(--gold);color:var(--black);
  font-family:var(--font-head);font-size:0.875rem;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-weight:700;}
.fsi-step:not(.fsi-active):not(.fsi-done) .fsi-num{background:var(--border-2);color:var(--muted)}
.fsi-label{font-size:0.6875rem;letter-spacing:0.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.fsi-step.fsi-active .fsi-label{color:#fff}
.fsi-line{flex:1;height:1px;background:var(--border-2);margin:0 12px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-field>label{font-size:0.6875rem;letter-spacing:0.6px;text-transform:uppercase;color:var(--gold);font-weight:500}
/* Sternchen nur zeigen, wenn das Feld gerade tatsaechlich required ist (JS setzt/entfernt is-required) - Klasse statt Text im Label, damit ein i18n-Sprachwechsel (ueberschreibt innerHTML) das Sternchen nicht wieder statisch macht. */
label.is-required::after{content:" *"}
.form-field input,.form-field select,.form-field textarea{
  background:var(--st-surface2);border:1px solid rgba(255,255,255,0.12);
  color:#fff;padding:11px 14px;font-size:0.875rem;font-family:var(--font-body);
  border-radius:var(--radius);outline:none;transition:border-color .2s,background .2s;
  width:100%;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  border-color:rgba(var(--gold-rgb),0.55);background:var(--surface-2);
}
.form-field input::placeholder,.form-field textarea::placeholder{color:rgba(255,255,255,0.22)}
.form-field select option{background:var(--st-surface2);color:#fff}
.form-field textarea{resize:vertical;min-height:80px}
.form-checks{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.extra-info{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;border:1px solid rgba(var(--gold-rgb),0.7);color:rgba(var(--gold-rgb),0.99);font-size:0.6875rem;font-weight:600;cursor:help;flex-shrink:0;margin-left:6px;transition:border-color .2s,color .2s,background .2s,box-shadow .2s;background:rgba(var(--gold-rgb),0.08);}
.extra-info:hover{border-color:var(--gold);color:var(--gold);}
.extras-group{margin-bottom:14px;}
.extras-group-label{font-size:0.6875rem;letter-spacing:0.6px;text-transform:uppercase;color:var(--gold);opacity:0.7;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border-2);}
.extras-group{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:0;margin-bottom:20px;}
.extras-group-label{grid-column:1 / -1;}
/* Die Gruppen selbst zweispaltig: Foto|Licht in Reihe 1, Technik|Show in Reihe 2.
   Die Auswahlpunkte innerhalb einer Gruppe stehen dadurch untereinander. */
#f-extras-list{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:start;}
@media(max-width:620px){#f-extras-list{grid-template-columns:1fr;}}
/* ℹ-Symbole rechtsbuendig untereinander statt direkt hinter dem
   unterschiedlich langen Text - sonst steht jedes an anderer Position. */
#f-extras-list .form-check .extra-info{margin-left:auto;}
.form-check{display:flex;align-items:center;gap:10px;font-size:0.875rem;color:var(--muted);cursor:pointer}
.form-check input{width:16px;height:16px;accent-color:var(--gold);flex-shrink:0}
.extras-subtotal{margin-top:14px;padding:12px 16px;background:rgba(var(--gold-rgb),0.06);border:1px solid var(--border);border-radius:var(--radius);font-size:0.8438rem;color:var(--muted)}
.extras-subtotal strong{color:var(--gold);font-family:var(--font-head);font-size:1rem;font-weight:700}
.extras-subtotal .es-note{display:block;margin-top:4px;font-size:0.75rem;color:var(--dim)}
.extra-tooltip-wrap{position:relative;}
.extra-info{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;
  border:1px solid var(--border);color:var(--dim);
  font-size:0.6875rem;cursor:help;flex-shrink:0;
  transition:border-color .2s,color .2s;
}
.extra-tooltip-wrap:hover .extra-info,.extra-info:focus{border-color:var(--gold);color:var(--gold);background:rgba(var(--gold-rgb),0.18);box-shadow:0 0 8px rgba(var(--gold-rgb),0.3);}
.tp{color:var(--gold);font-weight:700}
.extra-tooltip{
  display:none;
  position:absolute;left:0;bottom:calc(100% + 8px);
  background:var(--st-surface2);border:1px solid var(--border-2);
  border-left:2px solid var(--gold);
  color:rgba(255,255,255,0.8);font-size:0.75rem;line-height:1.6;
  padding:10px 14px;border-radius:var(--radius);
  width:240px;z-index:100;
  pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
.extra-tooltip-wrap:hover .tp{color:var(--gold);font-weight:700}
.extra-tooltip{display:block;}
.form-submit{
  width:100%;background:var(--gold);color:var(--black);
  font-family:var(--font-head);font-size:1rem;letter-spacing:0.6px;
  padding:14px 32px;border-radius:var(--radius);cursor:pointer;
  border:none;margin-top:8px;transition:background .2s;font-weight:700;}
.form-submit:hover{background:var(--gold-2)}
.form-back{
  background:transparent;border:1px solid var(--border-2);
  color:var(--muted);font-family:var(--font-body);font-size:0.875rem;
  padding:14px 20px;border-radius:var(--radius);cursor:pointer;
  margin-top:8px;transition:border-color .2s,color .2s;
}
.form-back:hover{border-color:var(--border);color:#fff}
#rechnung-suggestions li{padding:9px 14px;font-size:0.875rem;color:rgba(255,255,255,0.82);cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.06);}
#rechnung-suggestions li:last-child{border-bottom:none;}
#rechnung-suggestions li:hover,#rechnung-suggestions li.r-active{background:rgba(var(--gold-rgb),0.12);color:#fff;}
#rechnung-suggestions li small{display:block;font-size:0.6875rem;color:var(--muted);margin-top:2px;}
#adr-suggestions li{padding:9px 14px;font-size:0.875rem;color:rgba(255,255,255,0.82);cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.06);}
#adr-suggestions li:last-child{border-bottom:none;}
#adr-suggestions li:hover,#adr-suggestions li.adr-active{background:rgba(var(--gold-rgb),0.12);color:#fff;}
#adr-suggestions li small{display:block;font-size:0.6875rem;color:var(--muted);margin-top:2px;}
.trust-badge{
  display:flex;align-items:center;gap:8px;
  background:rgba(var(--gold-rgb),0.07);
  border:1px solid rgba(var(--gold-rgb),0.2);
  border-radius:var(--radius);padding:10px 14px;
  flex:1;min-width:120px;
  cursor:default;
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;
}
.trust-badge:hover{
  background:rgba(var(--gold-rgb),0.14);
  border-color:rgba(var(--gold-rgb),0.5);
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(var(--gold-rgb),0.15);
}
.trust-badge svg{transition:transform .25s;}
.trust-badge:hover svg{transform:scale(1.2);}
/* Verfügbarkeits-Hinweis Kontaktformular */
.form-avail-note{
  font-size:0.75rem;
  color:rgba(255,255,255,0.7);
  background:rgba(var(--gold-rgb),0.1);
  border:1px solid rgba(var(--gold-rgb),0.3);
  border-left:3px solid var(--gold);
  border-radius:0 6px 6px 0;
  padding:9px 14px;
  margin-bottom:14px;
  line-height:1.55;
}
.form-avail-note strong{color:var(--gold-2);}
/* Step 0 Quick Date Check */
#form-step-0{
  padding-bottom:4px;
}
.form-step0-intro{
  font-size:0.6875rem;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 16px;
  opacity:0.85;
}
#form-step-0 .form-row-2{
  margin-bottom:16px;
}

.form-disclaimer a{color:var(--gold)}
.f-names-wrap{position:relative;overflow:hidden;}
.f-names-block{
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .4s ease, max-height .4s ease;
  pointer-events:none;
}
.f-names-block.f-names-visible{
  opacity:1;
  max-height:300px;
  pointer-events:auto;
}
@media(max-width:600px){.form-row-2{grid-template-columns:1fr}}


/* Neues Design: dunkle Felder, Gold-Pillen, größere Tippziele */
.form .eventfix-wrap{background:transparent;border:0;padding:0;border-radius:0}
.form .form-field>label{font-size:0.75rem;letter-spacing:.12em;color:var(--gold-2)}
.form .form-field input,.form .form-field select,.form .form-field textarea{min-height:50px;background:#0e2329;border:1px solid rgba(255,255,255,.14);border-radius:12px;font-size:1rem;padding:12px 14px;color:var(--text);color-scheme:dark}
.form .form-field input:focus,.form .form-field select:focus,.form .form-field textarea:focus{border-color:var(--gold);background:#11292f;box-shadow:0 0 0 3px rgba(var(--gold-rgb),.15)}
.form .form-field input::placeholder,.form .form-field textarea::placeholder{color:rgba(255,255,255,.48)}
.form .form-submit{min-height:52px;border-radius:999px;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));color:#1a1206;font-family:var(--font-body);font-weight:600;font-size:0.9375rem;letter-spacing:.04em;box-shadow:0 10px 30px -12px rgba(var(--gold-rgb),.6)}
.form .form-submit:hover{filter:brightness(1.06)}
.form .form-back{min-height:52px;border-radius:999px;border-color:rgba(255,255,255,.22);color:var(--text)}
.form .fsi-num{font-family:var(--font-body);font-size:0.75rem;width:28px;height:28px}
.form .fsi-label{font-size:0.75rem}
.form .form-check{min-height:44px;font-size:0.9375rem;color:var(--text)}
.form .form-check input{width:20px;height:20px}
.form .extra-info{width:24px;height:24px;font-size:0.75rem}
.form .extras-group-label{font-size:0.75rem;opacity:1;color:var(--gold-2)}
.form .extras-subtotal{border-radius:12px}
.form .form-avail-note{font-size:0.875rem;border-radius:0 12px 12px 0;color:var(--muted)}
.form .form-step0-intro{font-size:0.8125rem;color:var(--gold-2)}
#form-success h3{font-size:30px!important}
.fs-demo{margin:0 0 14px;padding:10px 14px;border-radius:12px;border:1px dashed var(--gold);color:var(--gold-2);font-size:0.8125rem;text-align:center}
.flatpickr-calendar{z-index:400}
/* ═══ Footer ═══ */
footer{padding:70px 0 120px;border-top:1px solid var(--line);margin-top:clamp(80px,10vw,140px);background:var(--bg-2)}
.fgrid{display:grid;gap:36px}
.fbrand img{width:160px;margin-bottom:16px}
.fgrid p{color:var(--muted);font-size:0.875rem;margin:0;max-width:340px}
.fgrid h3{font-size:0.875rem;letter-spacing:.04em;color:var(--gold);font-weight:500;margin:0 0 10px}
.fgrid nav,.fgrid>div:not(.fbrand):not(.fqr){display:flex;flex-direction:column}
.fgrid nav a,.fgrid>div a{display:flex;align-items:center;min-height:40px;text-decoration:none;color:var(--muted);font-size:0.875rem}
.fgrid a:hover{color:var(--gold-2)}
.fqr img{width:120px;height:120px;border-radius:12px;background:#fff;padding:6px;margin-bottom:10px}
.fbottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.fbottom small{color:var(--dim);font-size:0.8125rem}
.fbottom nav{display:flex;flex-wrap:wrap;gap:0 6px}
.fbottom a,.fbottom button{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;text-decoration:none;color:var(--muted);font-size:0.8125rem;background:none;border:0;cursor:pointer}
.fbottom a:hover,.fbottom button:hover{color:var(--gold-2)}
@media (min-width:700px){.fgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.fgrid{grid-template-columns:1.3fr 1.2fr 1fr .9fr}.fgrid nav{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;align-content:start}.fgrid nav h3{grid-column:1/-1}footer{padding-bottom:70px}}
/* Cookie-Hinweis */
.cookie{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:115;max-width:440px;padding:18px;border-radius:var(--r);background:rgba(var(--bg-rgb),.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line-2);box-shadow:0 20px 60px -20px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .5s,transform .5s var(--ease),visibility .5s}
.cookie.show{opacity:1;visibility:visible;transform:none}
.cookie p{margin:0 0 12px;font-size:0.8125rem;line-height:1.55;color:var(--muted)}
.cookie p a{color:var(--gold-2)}
.cookie div{display:flex;gap:8px;flex-wrap:wrap}
.cookie .btn{min-height:44px;padding:0 16px;font-size:0.8125rem;flex:1}
.cookie{padding:14px;max-width:360px}
.cookie p{font-size:0.75rem;line-height:1.45;margin-bottom:10px}
.cookie .btn{min-height:44px;font-size:0.7813rem;padding:0 12px}
/* Desktop: schmale Leiste unten (max. 56px), lässt rechts die Knopfspalte frei */
@media (min-width:900px){
  .cookie{left:50%;right:auto;bottom:12px;width:min(980px,calc(100vw - 200px));max-width:none;transform:translate(-50%,16px);display:flex;align-items:center;gap:16px;padding:6px 8px 6px 16px;border-radius:14px;max-height:56px}
  .cookie.show{transform:translate(-50%,0)}
  .cookie p{margin:0;font-size:0.7188rem;line-height:1.35;flex:1}
  .cookie div{flex-wrap:nowrap;flex-shrink:0}
  .cookie .btn{min-height:40px;padding:0 14px;font-size:0.75rem;flex:0 0 auto}
}
/* Schwebende Knöpfe */
.fab{position:fixed;right:24px;z-index:100;width:54px;height:54px;border-radius:50%;display:none;place-items:center;border:0;cursor:pointer;text-decoration:none;box-shadow:0 12px 30px -8px rgba(0,0,0,.7);transition:transform .3s var(--ease),opacity .4s}
.fab svg{width:24px;height:24px}
/* WhatsApp: goldener Kreis mit ausgefuelltem Logo, Farben aus dem Schema (Grund --gold, Logo --black, Hover/Rand --gold-2) */
.fab-wa{bottom:24px;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));color:#1a1206;box-shadow:0 10px 40px -10px rgba(var(--gold-rgb),.6)}
.fab-wa svg{width:26px;height:26px;fill:currentColor;stroke:none}
.fab-wa:hover{box-shadow:0 14px 44px -10px rgba(var(--gold-rgb),.8)}
.fab-top{bottom:90px;background:var(--surface-2);color:var(--gold-2);border:1px solid var(--line);opacity:0;pointer-events:none}
.fab-top.show{opacity:1;pointer-events:auto}
@media(hover:hover){.fab:hover{transform:translateY(-3px)}}
@media (min-width:900px){.fab{display:grid}}
/* Mobile-Aktionsleiste */
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:100;display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;padding:8px;border-radius:22px;background:rgba(var(--bg-rgb),.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);transform:translateY(140%);transition:transform .5s var(--ease)}
.dock.show{transform:none}
.dock a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:14px;text-decoration:none;font-size:14px;font-weight:500;background:rgba(255,255,255,.05)}
.dock a.main{background:var(--gold);color:#1a1206}
.dock svg{width:18px;height:18px}
.dock .wa-logo{fill:currentColor;stroke:none}
.dock{grid-template-columns:auto auto minmax(0,1fr)}.dock a{white-space:nowrap;padding:0 8px}
@media (max-width:380px){.dock{left:8px;right:8px;gap:6px;padding:6px}.dock a{font-size:13px;gap:5px;padding:0 6px}.dock svg{width:16px;height:16px}}
@media (max-width:339px){.dock svg{display:none}}
@media (min-width:900px){.dock{display:none}}

/* ═══ Detail-Fenster (Desktop zentriert, mobil Bottom-Sheet) ═══ */
.tile[data-modal]{cursor:pointer}
.tile[data-modal]:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.more-hint{display:inline-flex;margin-top:10px;font-size:0.8125rem;font-weight:500;letter-spacing:.04em;color:var(--gold-2);transition:transform .3s var(--ease)}
.tile[data-modal]:hover .more-hint{transform:translateX(4px)}
html.locked{overflow:hidden}
.sheet{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-bd{position:absolute;inset:0;background:rgba(3,10,12,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.sheet.open .sheet-bd{opacity:1}
.sheet-box{position:relative;width:100%;max-height:92svh;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(170deg,var(--surface-2),var(--bg-2));border:1px solid var(--line-2);border-bottom:0;border-radius:26px 26px 0 0;transform:translateY(100%);transition:transform .45s var(--ease);padding-bottom:env(safe-area-inset-bottom)}
.sheet.open .sheet-box{transform:none}
.sheet-grip{position:absolute;top:8px;left:50%;width:44px;height:4px;margin-left:-22px;border-radius:4px;background:rgba(255,255,255,.35);z-index:3}
.sheet-x{position:absolute;top:12px;right:12px;z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(var(--bg-rgb),.7);cursor:pointer;font-size:1rem}
.sheet-x:hover{border-color:var(--gold)}
.sheet-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000}
.sheet-media>img,.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sheet-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--surface-2));pointer-events:none}
.gal img{opacity:0;transition:opacity .8s}
.gal img.on{opacity:1}
.gal-nav{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;background:rgba(var(--bg-rgb),.6);font-size:26px;line-height:1;cursor:pointer}
.gal-nav.prev{left:10px}.gal-nav.next{right:10px}
.gal-dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:4px}
.gal-dots button{width:28px;height:28px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.gal-dots button::before{content:'';width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);transition:transform .3s,background-color .3s}
.gal-dots button.on::before{background:var(--gold);transform:scale(1.3)}
.sheet-text{padding:6px 24px 30px}
.sheet-text h3{font-family:var(--font-h);font-weight:600;font-size:clamp(22.3px,2.5vw,31px);line-height:1.08;margin:6px 0 14px;letter-spacing:-.01em}
.sheet-text p{color:var(--muted);margin:0 0 12px;font-size:0.9688rem}
.gs{color:var(--gold-2);font-weight:500}
.sh-tag{display:inline-block;font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:14px}
.sh-pills{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 20px}
.sh-pills span{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);font-size:0.7813rem;color:var(--text);background:rgba(var(--gold-rgb),.06)}
@media (min-width:900px){
  .sheet{align-items:center;padding:4vh 24px}
  .sheet-box{display:grid;grid-template-columns:1fr 1.1fr;max-width:1040px;max-height:86vh;overflow:hidden;border-radius:28px;border-bottom:1px solid var(--line-2);transform:translateY(24px) scale(.97);opacity:0;transition:transform .45s var(--ease),opacity .35s}
  .sheet.open .sheet-box{transform:none;opacity:1}
  .sheet-grip{display:none}
  .sheet-media{aspect-ratio:auto;min-height:100%}
  .sheet-media::after{background:linear-gradient(90deg,transparent 70%,var(--surface-2))}
  .sheet-text{overflow-y:auto;max-height:86vh;padding:44px 40px 36px}
}

@media (prefers-reduced-motion:reduce){.sheet-box{transition:none!important}}
/* ═══ Weniger Bewegung ═══ (Ticker und Rezensionsband laufen weiter: Android-Energiesparen/"Animationen entfernen" meldet reduce und stapelte sie sonst untereinander) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *:not(.marq-row):not(.rv-row),*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rv{opacity:1;transform:none}
  .h1 .ln>span,.hero-sub,.hero-btns,.hero-desc{transform:none;opacity:1}
  .eq i{transform:scaleY(var(--h,.6))}
  .statement .big .w{opacity:1}
  .glow{display:none}
  .pk{opacity:1;transform:none}
}

/* Kontrast: kleine --dim-Texte auf der helleren Formularkarte (4.1:1 -> >5:1) */
#kontakt .hint,#kontakt .trust span,#kontakt .f-head .trust div span{color:rgba(255,255,255,.64)}

/* Kontrast (Messung 06.10.): kleine Zahlen und Sprachumschalter ueber Fotos bekommen dunkle Pille */
.evt-num,.inst .num{padding:2px 12px;border-radius:999px;background:rgba(var(--bg-rgb),.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nav:not(.solid) .lang{background:rgba(var(--bg-rgb),.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nav:not(.solid) .lang button,.nav:not(.solid) .lang a{color:rgba(255,255,255,.82)}
.nav:not(.solid) .lang a.on{color:var(--gold-2)}

/* Zoom-Effekte wie auf der Hauptseite (Ken-Burns im Hero, Zoom-Fade und Hover beim Ueber-mich-Bild) */
@keyframes demoKen{from{transform:scale(1.34)}to{transform:scale(1.46)}}
@media (min-width:900px){.hero-media .layer img{animation:demoKen 24s ease-in-out infinite alternate;will-change:transform}}
@media (max-width:899px){.hero-media .layer img{animation:demoKenM 24s ease-in-out infinite alternate;will-change:transform}@keyframes demoKenM{from{transform:scale(1)}to{transform:scale(1.1)}}}
/* Über mich: Schärfe ziehen, 1998 → heute. Grundzustand = fertiges Bild; .fx-wait setzt nur das Skript */
.about-img .frame img{transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.about-img .frame:not(.fx-run):hover img{transform:scale(1.05)}
.about-img .frame .grain{position:absolute;inset:-20%;pointer-events:none;opacity:0;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.about-img .frame.fx-wait img{filter:contrast(1.5) blur(14px) brightness(.8);transform:scale(1.06)}
.about-img .frame.fx-wait .grain{opacity:.55}
.about-img .frame.fx-run img{transition:none}
@media (max-width:699px){.about-img .frame.fx-wait img{filter:contrast(1.4) blur(9px) brightness(.82)}.about-img .frame.fx-wait .grain{opacity:.4}}
.since .odo-w{display:block;font-size:44px;line-height:1;height:1em}
.odo{display:inline-flex;height:1em;overflow:hidden}
.odo span{display:block;width:.5em;height:1em;overflow:hidden}
.odo i{display:block;font-style:normal;transform:translateY(calc(var(--n) * -1em));transition:transform 1.6s cubic-bezier(.16,1,.3,1) calc(var(--k) * .12s)}
.odo i b{display:block;height:1em;font-size:1em;text-align:center}
#ueber.fx-wait .odo i{transform:none;transition:none}
.years{display:flex;gap:6px;align-items:center;margin:0 0 14px;font-size:0.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.years b{font-weight:500;color:var(--dim);transition:color .5s}
.years i{width:28px;height:1px;background:var(--line)}
.years b,#ueber:not(.fx-wait) .years b,.years b.on{color:var(--gold-2)}
#ueber.fx-wait .years b:not(.on){color:var(--dim)}
.hl{background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/100% 2px;color:var(--text);padding-bottom:1px;transition:background-size 1.1s cubic-bezier(.2,.8,.2,1)}
#ueber.fx-wait .hl:not(.on){background-size:0% 2px}
@media (prefers-reduced-motion:reduce){.hero-media .layer img{animation:none}.about-img .frame img{transform:none;transition:none}.odo i,.hl,.years b{transition:none}}

/* Mobil: kein seitliches Scrollen (Absicherung + Bewertungskopf darf nicht breiter als der Bildschirm werden) */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100vw}
.rv-top{grid-template-columns:minmax(0,1fr)}
.rv-top>*{min-width:0}
.score{flex-wrap:wrap}
@media (min-width:900px){.rv-top{grid-template-columns:1.3fr 1fr}}

/* Story-Fenster: Seiten immer komplett sichtbar - Breitformat wird eingepasst (contain) mit unscharfem Hintergrund, nur oben/unten darf beschnitten werden */
.igs-sm-slides .sl::before,.hero-tr::after{content:'';position:absolute;inset:-12%;background:var(--bg,none) center/cover no-repeat;filter:blur(22px) brightness(.55);z-index:0;pointer-events:none}
.hero-tr::after{z-index:0}
.igs-sm-slides img,.igs-sm-slides video{z-index:1}

/* Cut-outs auch auf Tablet und Handy (unter 900 px), Groessen an die Breite gekoppelt */
@media (max-width:899px){
  .pk{display:block}
  .rv-top{margin-bottom:46px}.rv-stage{margin-top:0}
  .score.pk-host{--pw:clamp(180px,54vw,250px);padding-bottom:calc(var(--pw)*.67 - 30px)}
  .pk-rv{left:auto;right:6px;bottom:-50px;width:var(--pw);z-index:4}
  .player-wrap.pk-host,.player-wrap .pk-mix{--pw:clamp(230px,66vw,380px)}
  .player-wrap.pk-host{margin-top:calc(var(--pw)*.7)}
  .pk-mix{right:-4px}
  .lp-wrap.pk-host,.lp-wrap .pk-blog{--pw:clamp(190px,50vw,300px)}
  .lp-wrap.pk-host{margin-top:calc(var(--pw)*.74 - 10px)!important}
  .pk-blog{top:calc(var(--pw)*-.74);right:6%;left:auto}
}


/* ═══ KI-Kennzeichnung (Art. 50 KI-VO): Glas-Pille mit Funken, klappt bei Hover/Fokus/Tippen zur Info auf ═══ */
.ki{position:absolute;top:var(--ki-o,10px);right:var(--ki-o,10px);z-index:6;box-sizing:border-box;display:block;width:46px;max-height:26px;padding:0 10px;border-radius:13px;overflow:hidden;
  background:rgba(var(--bg-rgb),.62);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);box-shadow:0 4px 14px rgba(0,0,0,.35);color:var(--text);cursor:help;outline:none;text-align:left;
  transition:width .45s cubic-bezier(.2,.8,.2,1),max-height .45s cubic-bezier(.2,.8,.2,1),border-radius .45s,padding .45s}
.ki.ki-l{right:auto;left:var(--ki-o,10px)}
/* Schutz gegen Seiten-Regeln wie ".place span" oder ".evt p" */
.ki,.ki *{font-family:var(--font-body)!important;letter-spacing:normal;text-transform:none;text-shadow:none}
.ki *{position:static!important;inset:auto!important;transform:none!important;margin:0;float:none}
.ki.ki{bottom:auto;font-size:0.75rem;line-height:1.2}
/* Haarlinie als Verlauf Gold → Weiß (Maske, damit die Glasfläche durchsichtig bleibt) */
.ki::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--gold-2),rgba(255,255,255,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
/* einmaliger Schimmer beim Sichtbarwerden */
.ki::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);opacity:0;pointer-events:none}
.ki.shine::after{animation:kiShine 1.1s ease-out .2s 1 both}
@keyframes kiShine{0%{left:-60%;opacity:1}100%{left:130%;opacity:0}}
.ki-h{display:flex;align-items:center;gap:6px;height:24px;white-space:nowrap}
.ki-h svg{width:13px;height:13px;flex:none;color:var(--gold-2)}
.ki .ki-s{font-size:0.6563rem!important;font-weight:500;line-height:1;letter-spacing:.08em;color:var(--text)}
.ki .ki-t{display:none;font-size:0.7813rem!important;font-weight:500;line-height:1.2;color:var(--text)}
.ki .ki-p{display:block;margin:2px 0 0;font-size:0.75rem!important;font-weight:400;line-height:1.45;color:rgba(255,255,255,.78);opacity:0;transition:opacity .3s .1s;white-space:normal}
.ki:hover,.ki:focus-visible,.ki.open{width:min(320px,var(--ki-max,320px));max-height:160px;padding:6px 12px 10px;border-radius:14px}
.ki:hover .ki-s,.ki:focus-visible .ki-s,.ki.open .ki-s{display:none}
.ki .ki-h{display:flex;align-items:center;gap:6px;height:24px;white-space:nowrap}
.ki:hover .ki-t,.ki:focus-visible .ki-t,.ki.open .ki-t{display:block}
.ki:hover .ki-p,.ki:focus-visible .ki-p,.ki.open .ki-p{opacity:1}
.ki:focus-visible{box-shadow:0 0 0 2px var(--gold-2),0 4px 14px rgba(0,0,0,.35)}
/* Feste Plätze, wo oben rechts schon Marken sitzen */
.evt>.ki{--ki-o:16px;top:54px}
.inst>.ki{top:50px;right:18px}
.sheet-media>.ki{right:auto;left:10px}
.rph .scr>.ki{--ki-o:16px}
/* Abschnitts-Hinweis (Standard): ein dezenter Satz unter dem Inhalt, Info per Hover/Fokus/Tippen */
.ki-sec{position:relative;grid-column:1/-1;display:flex;align-items:center;gap:7px;margin-top:16px;min-height:28px;font:400 12px/1.4 var(--font-body);color:var(--dim);cursor:help;outline:none;width:max-content;max-width:100%}
.ki-sec svg{width:12px;height:12px;flex:none;color:var(--gold-2)}
.ki-sec .ki-more{color:var(--gold-2);text-decoration:underline;text-decoration-color:rgba(239,193,134,.4);text-underline-offset:3px}
.ki-sec:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:6px}
.ki-tip{position:absolute;left:0;bottom:calc(100% + 8px);z-index:40;width:min(320px,calc(100vw - 32px));padding:10px 12px;border-radius:14px;background:rgba(var(--bg-rgb),.86);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid rgba(239,193,134,.35);box-shadow:0 10px 30px rgba(0,0,0,.45);font:400 12px/1.45 var(--font-body);color:rgba(255,255,255,.78);opacity:0;visibility:hidden;transform:translate(var(--ki-dx,0px),6px);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1),visibility .25s;pointer-events:none}
.ki-sec:hover .ki-tip,.ki-sec:focus-visible .ki-tip,.ki-sec.open .ki-tip{opacity:1;visibility:visible;transform:translate(var(--ki-dx,0px),0)}
.strip:has(.ki-sec-strip){grid-template-rows:1fr auto}
.strip .strip-h{align-self:end}
.ki-sec-strip{margin:0 0 14px;justify-self:center;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.ki-sec-abs{position:absolute;left:var(--pad);bottom:12px;margin:0;z-index:5}
.igs-sm-cta .ki-sec{flex-basis:100%;justify-content:center;margin:2px auto 0;width:auto}
.igs-sm-cta .ki-sec .ki-tip{left:auto;right:0}
.sheet-text .ki-sec{margin-top:6px}
@media (prefers-reduced-motion:reduce){.ki-tip{transition:none}}
/* KI-Pille C (Betreiber 07.10.2026): unten rechts im Abschnitt, Ruhe = nur Funken, Hover/Fokus/Tippen = „KI-Info“ + Karte */
.ki-pill{margin-left:auto;justify-self:end;gap:0;cursor:default}
.ki-sec-strip.ki-pill{justify-self:end;margin-right:var(--pad,16px)}
.ki-sec-abs.ki-pill{left:auto;right:var(--pad)}
.kp{all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;height:28px;max-width:28px;padding:0 6px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(var(--bg-rgb),.55);overflow:hidden;white-space:nowrap;font:500 12px/1 var(--font-body);letter-spacing:.05em;color:var(--text);cursor:pointer;transition:max-width .5s cubic-bezier(.2,.8,.2,1),border-color .3s,padding .3s}
.kp .t{margin-left:7px;opacity:0;transition:opacity .25s}
.ki-pill:hover .kp,.kp:focus-visible,.ki-pill.open .kp{max-width:110px;padding:0 11px 0 7px;border-color:rgba(var(--gold-rgb),.6)}
.ki-pill:hover .kp .t,.kp:focus-visible .t,.ki-pill.open .kp .t{opacity:1;transition-delay:.15s}
.kp:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.ki-pill .ki-tip{left:auto;right:0;bottom:calc(100% + 10px);width:min(300px,calc(100vw - 32px));padding:14px 16px;border-radius:16px;background:rgba(var(--bg-rgb),.97);border:1px solid rgba(var(--gold-rgb),.35);box-shadow:0 18px 40px rgba(0,0,0,.55);color:var(--muted);font-size:0.8125rem;line-height:1.5;transition-delay:0s}
.ki-pill .ki-tip b{display:block;color:var(--text);font-weight:500;font-size:0.875rem;margin-bottom:3px}
.ki-pill .ki-tip::after{content:'';position:absolute;right:calc(9px + var(--ki-dx,0px));bottom:-6px;width:10px;height:10px;background:inherit;border-right:1px solid rgba(var(--gold-rgb),.35);border-bottom:1px solid rgba(var(--gold-rgb),.35);transform:rotate(45deg)}
.ki-pill:hover .ki-tip,.ki-pill:focus-within .ki-tip,.ki-pill.open .ki-tip{opacity:1;visibility:visible;transform:translate(var(--ki-dx,0px),0);transition-delay:.25s}
.ki-pill.open .ki-tip{transition-delay:0s}
.kp-sp{width:14px;height:14px;flex:none;overflow:visible;color:var(--gold-2,#EFC186)}
.kp-sp path{transform-box:fill-box;transform-origin:center}
.kp-sp .b{opacity:.85;animation:kpBig 3.2s ease-in-out infinite}
.kp-sp .s{opacity:.6;animation:kpSmall 3.2s ease-in-out 1.6s infinite}
@keyframes kpBig{0%,78%,100%{transform:scale(1) rotate(0);opacity:.85;filter:none}87%{transform:scale(1.4) rotate(25deg);opacity:1;filter:drop-shadow(0 0 6px rgba(239,193,134,.8))}94%{transform:scale(1.05) rotate(25deg);opacity:.95;filter:none}}
@keyframes kpSmall{0%,82%,100%{transform:scale(1);opacity:.6;filter:none}89%{transform:scale(1.6);opacity:1;filter:drop-shadow(0 0 5px rgba(239,193,134,.85))}}
.kp::after{content:'';position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(105deg,transparent 20%,rgba(255,240,215,.22) 50%,transparent 80%);transform:translateX(-120%);pointer-events:none;animation:kpGlint 6s ease-in-out 2s infinite}
@keyframes kpGlint{0%{transform:translateX(-120%)}14%,100%{transform:translateX(260%)}}
.kp:not(.kp-vis) .kp-sp path,.kp:not(.kp-vis)::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.kp-sp path,.kp::after{animation:none!important}.kp::after{display:none}.kp{transition:none!important}}

.ki-foot{margin:18px 0 0;font-size:0.7813rem;line-height:1.5;color:var(--dim);display:flex;gap:8px;align-items:flex-start}
.ki-foot svg{width:13px;height:13px;flex:none;margin-top:3px;color:var(--gold-2)}
@media (prefers-reduced-motion:reduce){.ki,.ki-p{transition:none}.ki.shine::after{animation:none}}

/* Handy: Scroll-Ring um die Platte darf das Seiten-Scrollen nicht blockieren (touch-action:none sperrte die ganze Plattenflaeche) */
@media (pointer:coarse),(max-width:899px){.ring-hit{touch-action:pan-y}.deck,.deck *{touch-action:pan-y}}

/* Kernaussage-Link: nur die goldene Linie, nicht zusaetzlich die Link-Unterstreichung */
a:has(>.hl){text-decoration:none}

/* Bewertungen: Cut-out liegt HINTER dem Band (auch hinter angehobenen Karten) */
.rv-stage{position:relative;z-index:6}
/* Handy: Cut-outs steigen und wachsen beim Scrollen, Kopf ragt etwas in den Text darueber */
@media (max-width:599px){.pk-scroll .pk{transition:none;transform-origin:50% 100%;will-change:transform,opacity}.pk-scroll .pk-rv{transform-origin:50% 90%}.pk-scroll .pk-blog{transform-origin:50% 74%}.pk-scroll .pk-mix{transform-origin:50% 85.7%}}
/* Anlass-Karten am Handy: Karte waechst mit dem Text statt ihn nach oben aus der Karte zu druecken */
@media (max-width:899px){.evt{display:flex;flex-direction:column;justify-content:flex-end;height:auto;min-height:min(560px,72svh)}.evt-body{position:relative;padding-top:64px}}
/* Sehr kleine Handys (320 px): DJ+-Karten wachsen mit dem Text, Ablauf-Zeilen kompakter */
@media (max-width:599px){.inst{aspect-ratio:auto;min-height:max(250px,66vw);padding-top:58px}}
@media (max-width:359px){.ab-stage{padding:70px 0 18px}.ab-row{grid-template-columns:36px minmax(0,1fr) 64px;column-gap:10px;padding:9px 12px}.ab-no{font-size:24px}.ab-ti{font-size:0.9375rem}.ab-de>p{font-size:0.8438rem;line-height:1.5}.ab-st{font-size:0.625rem;letter-spacing:.08em}.ab-list{gap:6px}.fronts{padding-left:56px}}
/* Kurze Handys (Hoehe bis 700 px): Ablauf-Buehne kompakter, damit nichts abgeschnitten wird */
@media (max-width:599px) and (max-height:700px){.ab-head .lead{display:none}.ab-head{margin-bottom:12px}.ab-stage{padding:64px 0 14px}.ab-row{padding:8px 12px}.ab-list{gap:6px}}
/* ═══ Formular-Überarbeitung A/B/C (Entwurf formular-konzepte.html) ═══ */
/* A: Datenschutz lesbar, freiwillige Angaben einklappbar */
#form-step-3 label.form-check{text-transform:none;letter-spacing:0;font-weight:300;font-size:0.875rem;line-height:1.55;color:var(--muted);align-items:flex-start}
#form-step-3 label.form-check>span{font-size:0.875rem!important;line-height:1.55!important;color:var(--muted)!important}
#form-step-3 label.form-check input{margin-top:2px!important;accent-color:var(--gold)}
.opt-wrap{margin:4px 0 10px}
.opt-head{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:48px;cursor:pointer;font-size:0.875rem;color:var(--muted);border-top:1px solid var(--line)}
.opt-head em{font-style:normal;color:var(--dim);font-size:0.8125rem;margin-left:4px}
.opt-head .chev{margin-left:auto;font-style:normal;transition:transform .25s}
.opt-head:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:8px}
.opt-body{display:none;padding-top:8px}
.opt-wrap.open .opt-body{display:block}
.opt-wrap.open .chev{transform:rotate(180deg)}
/* B: Extras als Kacheln, Gruppen einklappbar */
#f-extras-list{grid-template-columns:1fr!important}
.extras-group{margin-bottom:0;border-bottom:1px solid var(--line)}
.extras-group-label{display:flex;align-items:center;gap:10px;min-height:52px;margin:0;padding:0;border:0;cursor:pointer;font-size:0.8125rem;letter-spacing:.1em;color:var(--gold-2);user-select:none}
.extras-group-label:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:8px}
.extras-group-label .egc{margin-left:auto;font-size:0.75rem;letter-spacing:0;text-transform:none;color:#1a1206;background:var(--gold);border-radius:999px;padding:1px 9px;display:none}
.extras-group-label .egc.on{display:inline-block}
.extras-group-label::after{content:'⌄';margin-left:8px;font-size:0.875rem;color:var(--dim);transition:transform .25s}
.extras-group-label:not(:has(.egc.on))::after{margin-left:auto}
.extras-group:not(.eg-closed) .extras-group-label::after{transform:rotate(180deg)}
.extras-group.eg-closed .extra-opt{display:none!important}
.extras-group:not(.eg-closed):not([style*="none"]){display:grid!important;grid-template-columns:1fr 1fr;gap:10px;padding-bottom:16px}
.extras-group:not(.eg-closed) .extras-group-label{grid-column:1/-1;margin-bottom:-2px}
.extra-opt{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-content:space-between;gap:4px 8px;min-height:88px;padding:12px 40px 10px 12px!important;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;font-size:0.9375rem!important;line-height:1.25;color:var(--text)!important;transition:border-color .2s,background-color .2s;overflow-wrap:anywhere;hyphens:auto}
.extra-opt input[type=checkbox]{-webkit-appearance:none;appearance:none;position:absolute;top:10px;right:10px;width:22px!important;height:22px!important;min-height:0!important;padding:0!important;margin:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.32);background:transparent;display:grid;place-items:center;cursor:pointer}
.extra-opt input[type=checkbox]::after{content:'✓';font-size:0.8125rem;line-height:1;color:transparent}
.extra-opt input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
.extra-opt input[type=checkbox]:checked::after{color:#1a1206}
.extra-opt:has(input:checked){border-color:var(--gold);background:rgba(var(--gold-rgb),.12)}
.extra-opt:has(input:focus-visible){outline:2px solid var(--gold-2);outline-offset:2px}
.extra-opt .extra-info{position:absolute;right:8px;bottom:8px;margin:0!important;width:24px!important;height:24px!important;min-height:0;padding:0;line-height:22px}
.extra-opt::after{grid-column:1/-1;font-size:0.7813rem;color:var(--dim);content:"Preis auf Anfrage"}
.extra-opt[data-price]::after{content:attr(data-price) " €"}
.extra-opt[data-price-note]::after{content:attr(data-price-note)}
.extra-opt:has(input:checked)::after{color:var(--gold-2)}
.form .extra-opt{min-height:88px}
@media (max-width:380px){.fsi-step{gap:6px}.fsi-label{font-size:0.625rem;letter-spacing:.02em}.fsi-line{margin:0 6px;min-width:6px}}
@media (max-width:340px){.fsi-step:not(.fsi-active) .fsi-label{display:none}.fsi-line{margin:0 8px}}
@media (max-width:899px){.extras-subtotal{position:sticky;bottom:16px;z-index:3;backdrop-filter:blur(8px);background:rgba(20,16,10,.92)}}
/* C: weniger Rahmen am Handy, breiteres Formular am Desktop */
@media (max-width:599px){.kwrap{padding-left:8px;padding-right:8px}.contact{padding:22px 12px}.form{padding:0;border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (min-width:1000px){.contact-grid{grid-template-columns:1fr 1fr}}
/* ═══ Schnell-Anfrage oder ausführlich (Entwurf formular-quick-konzept.html) ═══ */
.eventfix-wrap[data-modus="wahl"] #contact-form,.eventfix-wrap[data-modus="wahl"] #quick-form,.eventfix-wrap[data-modus="wahl"] #quick-success,
.eventfix-wrap[data-modus="schnell"] #contact-form,.eventfix-wrap[data-modus="schnell"] #form-choice,
.eventfix-wrap[data-modus="ausfuehrlich"] #form-choice,.eventfix-wrap[data-modus="ausfuehrlich"] #quick-form,.eventfix-wrap[data-modus="ausfuehrlich"] #quick-success,
.eventfix-wrap[data-modus="fertig"] #contact-form,.eventfix-wrap[data-modus="fertig"] #form-choice,.eventfix-wrap[data-modus="fertig"] #quick-form{display:none!important}
.eventfix-wrap[data-modus="fertig"] #quick-success{display:block!important}
.wl-title{font:400 28px/1.05 var(--font-head);margin:0 0 4px;color:var(--text)}
.wl-sub{font-size:0.8125rem;color:var(--dim);margin:0 0 16px}
.wl-grid{display:grid;gap:14px}
.wl-opt{all:unset;box-sizing:border-box;position:relative;display:block;cursor:pointer;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03);padding:16px 16px 14px;transition:border-color .2s,background-color .2s}
.wl-opt:hover{border-color:var(--gold-2)}
.wl-opt:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.wl-opt.wl-rec{border-color:var(--gold);background:rgba(var(--gold-rgb),.10)}
.wl-h{display:block;font:400 26px/1 var(--font-head);letter-spacing:.02em;color:var(--text)}
.wl-t{display:block;font-size:0.8125rem;color:var(--dim);margin:2px 0 8px}
.wl-opt ul{margin:0;padding:0 0 0 18px;font-size:0.9063rem;color:var(--muted)}
.wl-opt li{margin:2px 0}
.wl-go{display:block;margin-top:12px;font-size:0.875rem;color:var(--gold-2);font-weight:500}
.wl-badge{position:absolute;top:-10px;right:14px;background:var(--gold);color:#1a1206;font-size:0.75rem;font-weight:600;border-radius:999px;padding:2px 12px}
@media(max-width:600px){#quick-form .q-pair{grid-template-columns:1fr 1fr!important;gap:10px}#quick-form .q-pair .form-field input,#quick-form .q-pair .form-field select{padding-left:10px;padding-right:8px}}
.q-link{all:unset;cursor:pointer;color:var(--gold-2);font-size:0.8125rem;text-decoration:underline;text-underline-offset:3px}
.q-link:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:4px}
.q-wechsel{display:inline-block;margin:0 0 10px;min-height:32px}
#quick-form .form-field select{width:100%}
#q-adr-suggestions li{padding:9px 14px;font-size:0.875rem;color:rgba(255,255,255,0.82);cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.06)}
#q-adr-suggestions li:last-child{border-bottom:none}
#q-adr-suggestions li:hover,#q-adr-suggestions li.adr-active{background:rgba(var(--gold-rgb),0.12);color:#fff}
#q-adr-suggestions li small{display:block;font-size:0.6875rem;color:var(--muted);margin-top:2px}
.q-dsgvo{text-transform:none;letter-spacing:0;align-items:flex-start;font-size:0.875rem;font-weight:300;line-height:1.55;color:var(--muted)}
.form .form-field>label.q-dsgvo{text-transform:none!important;letter-spacing:0!important;font-weight:300!important;font-size:0.875rem!important;line-height:1.55!important;color:var(--muted)!important}
.q-dsgvo>span{font-size:0.875rem!important;color:var(--muted)!important}
.q-dsgvo input{accent-color:var(--gold);margin-top:2px}
#quick-success{text-align:center;padding:8px 0}
.q-ok{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(127,211,154,.15);color:#7fd39a;font-size:24px;margin:0 auto 8px}
.q-h{font:400 26px/1.05 var(--font-head);margin:0 0 6px;color:#fff}
.q-t{color:var(--muted);font-size:0.9375rem;margin:0}
.q-up{text-align:left;border:1px dashed var(--line-2);border-radius:16px;padding:14px;margin:16px 0;background:rgba(var(--gold-rgb),.06);font-size:0.9063rem;color:var(--muted)}
.q-up b{color:var(--gold-2);font-weight:500}
.q-no{margin:12px 0 0;font-size:0.8125rem}.q-no a{color:var(--dim)}
/* ═══ Feinschliff: Haken, Knopf-Schatten, Autofill ═══ */
/* Haken/Radios in .form-field erbten Hoehe, Padding und Hintergrund der Textfelder (dunkles Rechteck hinter dem Haken) */
.form .form-check:not(.extra-opt) input[type=checkbox],.form .form-check:not(.extra-opt) input[type=radio]{min-height:0!important;width:22px!important;height:22px!important;padding:0!important;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;flex:none;accent-color:var(--gold)}
/* Schatten der Knoepfe wurde unten am Rahmen (overflow:hidden) als Rechteck abgeschnitten */
#contact-form,#quick-form{padding-bottom:32px}
#quick-success{padding-bottom:32px}
.form .form-submit,.form .form-back{white-space:nowrap}
@media (max-width:480px){.q-actions{grid-template-columns:1fr!important}.q-actions .form-submit{order:-1}}
/* Handy: Hauptknopf zuerst, "Zurück" darunter - in allen Schritten gleich; Hintergrund-Emoji dezenter hinter dem Text */
@media (max-width:600px){.form-row-2:has(>.form-submit)>.form-submit{order:-1}.event-emoji-bg.visible{opacity:.07}}
/* Browser-Autofill (E-Mail, Telefon, Name) soll nicht blau/gelb aufleuchten */
.form input:-webkit-autofill,.form input:-webkit-autofill:hover,.form input:-webkit-autofill:focus,.form select:-webkit-autofill,.form textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #0e2329 inset!important;box-shadow:0 0 0 1000px #0e2329 inset!important;-webkit-text-fill-color:#fff!important;caret-color:#fff;border:1px solid rgba(255,255,255,.14);transition:background-color 9999s ease-out 0s}
/* ═══ Abgleich mit der Startseite: FAQ fuenf Fragen + Knopf, Blog-Vorschau dynamisch ═══ */
.faq-js .faq-items:not(.faq-all) .faq-more{display:none}
.faq-toggle-all{display:none}
.faq-js .faq-toggle-all{display:inline-block;align-self:flex-start;margin-top:26px;padding:11px 24px;cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:0.9375rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:none;border:1px solid rgba(var(--gold-rgb),.5);border-radius:999px;transition:background-color .2s,color .2s,border-color .2s}
.faq-toggle-all:hover{background:var(--gold);border-color:var(--gold);color:#1a1206}
.faq-toggle-all:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
#last-updated{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.faq-toggle-all{transition:none}}
/* Cut-outs am Handy groesser (Tablet 600-899 px bleibt) */
@media (max-width:599px){.score.pk-host{--pw:clamp(220px,70vw,330px)}.player-wrap.pk-host,.player-wrap .pk-mix{--pw:clamp(260px,82vw,420px)}.lp-wrap.pk-host,.lp-wrap .pk-blog{--pw:clamp(220px,66vw,330px)}}