/* neu-zusatz.css - Ergaenzungen der neuen Layout-Spur fuer Bausteine, die es in der Demo nicht gibt (von Hand gepflegt, laedt nach neu.css).
   Grundsatz: nur Aussehen, keine Texte. Selektoren nur fuer Klassen, die tools/layout-neu-fueller*.cjs erzeugt. */
.strip-t{display:grid;justify-items:center;margin:0 var(--pad) clamp(20px,4vw,50px)}
.strip-t .eyebrow{margin:0 0 10px;text-shadow:0 2px 20px rgba(0,0,0,.8)}
.strip-t .strip-h{margin:0}
.strip:not(:has(.strip-t)){height:clamp(220px,36vw,440px)}
.stm-cta{margin:30px 0 0}
.statement .claim p{color:var(--muted)}
.haltung .since small{display:block}
.haltung .since b{display:block;font-family:var(--font-head);font-size:34px;line-height:1;color:#1a1206}
.plink i{font-style:normal;white-space:nowrap}
/* alte Bausteine: Bebas Neue hat nur ein Gewicht; ein fetter Schnitt aus dem alten CSS wuerde nur kuenstlich gefettet */
.sec.gz h2,.sec.gz h3,.sec.gz h4,.sec.gz .pkg-title,.sec.gz .ort-karte-name,.sec.gz .live-label{font-weight:400;letter-spacing:.015em}
.sec.gz .ort-text-titel{margin:26px 0 12px}
.sec.gz .feature-callout{font-family:var(--font-head);font-size:1.375rem;font-weight:400;color:var(--gold-2);letter-spacing:.02em}
/* Orts-Karten (neue Sektion im Demo-Stil): nur Bausteine der Demo (eyebrow, h2, lead, tile, extras-note); Stadtbild als Hintergrund, wo vorhanden */
.sec.ok{position:relative;isolation:isolate;overflow:hidden}
.ok-bg{position:absolute;inset:0;z-index:-1}
.ok-bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.ok-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),rgba(var(--bg-rgb),.55) 22%,rgba(var(--bg-rgb),.55) 78%,var(--bg))}
.ok-titel{font-family:var(--font-h,'Outfit',system-ui,sans-serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;font-size:clamp(22px,2.4vw,28px);margin:34px 0 10px}
.ok-text{margin-top:12px}
/* Ortsseiten: "Vor Ort" nach dem Kartenraster als eigener Unterabschnitt, Eyebrow-Abstand wie ueberall (18 px) */
.ok-grid + .eyebrow{margin-top:56px}
.eyebrow + .ok-titel{margin-top:0}
.ok-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:36px}
.ok-grid .tile{min-height:0;justify-content:flex-start;gap:14px}
.ok-grid .tile h3{font-size:clamp(26px,2.4vw,34px)}
.ok-grid .tile h3 a{color:inherit;text-decoration:none}
.ok-grid .tile h3 a:hover{color:var(--gold-2)}
.ok-grid .tile .tag{align-self:flex-start;margin:0 0 8px}
@media (min-width:700px){.ok-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ok-grid{grid-template-columns:repeat(3,1fr)}}
/* Einzugsgebiet: Karte im Hintergrund mit Spot-Effekt (wie auf den alten Ortsseiten; Effekt in neu.js) */
#gebiet{position:relative;isolation:isolate;overflow:hidden}
/* Karte: herausgezoomt (ganzer Ausschnitt sichtbar, nicht auf die Hoehe der Sektion gezogen) und oben wie unten weich ausgeblendet */
#gebiet-map{position:absolute;inset:-30px -50px;background-size:max(100%,1100px) auto;background-position:center;background-repeat:no-repeat;opacity:.7;z-index:-2;will-change:transform;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
#gebiet-map-licht{position:absolute;inset:-30px -50px;background-size:max(100%,1100px) auto;background-position:center;background-repeat:no-repeat;opacity:0;z-index:-2;will-change:transform,opacity;pointer-events:none;-webkit-mask-composite:source-in;mask-composite:intersect}
#gebiet.gebiet-licht-an #gebiet-map{opacity:.42;transition:opacity .6s ease}
#gebiet::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--bg-rgb),.62) 0%,rgba(var(--bg-rgb),.4) 50%,rgba(var(--bg-rgb),.62) 100%);z-index:-1;pointer-events:none}
.gebiet-karte{font-size:0.75rem;line-height:1.6;color:var(--dim);margin-top:18px}
.gebiet-karte a{color:var(--dim);text-decoration:underline}
.gebiet-karte a:hover{color:var(--gold)}
/* Orts-Karten: Symbol behaelt seine Groesse; Einzugsgebiet: Karten oben buendig statt gleich hoch gestreckt */
.ok-grid .tile .ico{flex:none}
/* Orts-Karten: Reihenfolge Symbol, Adresse, Name, Text (die Adresse sass absolut oben ueber dem Symbol) */
.ok-grid .tile>div{display:flex;flex-direction:column;align-items:flex-start}
.ok-grid .tile .tag{position:static;order:-1;margin:0 0 10px}
/* Ablauf: das grosse "Tanzflaeche & Party" bleibt in seiner Spalte (war bei breiten Fenstern 96 px und lief in die Karten) */
.ab-party{font-size:clamp(40px,4.4vw,70px);max-width:100%}
/* DJ+ Kacheln: Kicker, Ueberschrift und Text beginnen in allen Kacheln auf derselben Hoehe; der Textkasten ist fuer fuenf Zeilen reserviert, die Marke unten bleibt gleich */
.inst:not(.band) p:not(.kick){min-height:calc(5 * 1.55em)}
/* Abstaende zwischen den Abschnitten einheitlich: alle .sec (auch Leistungen, Einzugsgebiet, Kontakt) nutzen nur var(--sec-y), keine Einzelwerte */
/* Ablauf: die angeheftete Buehne hat unten nur 28 px, die Luft zum naechsten Abschnitt war 136 statt 216 px; Rest als Abstand unter der Buehne (ohne Anheften = Reduced-Motion/niedrig: Buehne hat selbst var(--sec-y)) */
#ablauf.sec{padding-bottom:calc(var(--sec-y) - 28px)}
@media (max-height:620px),(prefers-reduced-motion:reduce){#ablauf.sec{padding-bottom:0}}

/* ═══ Mobil-Audit 09.10.2026 (A1, A5, A6): nur Layout, Wortlaut unveraendert ═══ */
/* A1: Hero mobil: Anfrage-Knopf direkt unter der Zeile "Dein Party-DJ ...", der lange Text folgt darunter */
@media (max-width:899px){
  .hero-bottom>div{display:flex;flex-direction:column}
  .hero-bottom .hero-sub{order:-2}
  .hero-bottom .hero-btns{order:-1;margin:2px 0 18px}
}
/* A5: Tippflaechen mindestens 44 x 44 (sichtbare Groesse bleibt, die Flaeche waechst unsichtbar) */
@media (pointer:coarse),(max-width:899px){
  .kp{height:44px;max-width:44px;border:8px solid transparent;background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
  .ki-pill:hover .kp,.kp:focus-visible,.ki-pill.open .kp{max-width:136px;padding:0 6px 0 0}
  .rv-grid .card .rv-full,.rv-full{min-height:44px}
  a.more-hint{display:inline-flex;align-items:center;min-height:44px}
  .regions li>a{height:44px}
  .igl-go{display:inline-flex;align-items:center;min-height:44px}
  .igl-req{display:inline-flex;align-items:center;min-height:44px}
  #mmenu a,footer a,.footer a,footer nav a{display:flex;align-items:center;min-height:44px!important}
  .nav a{min-width:44px}
  .fronts .key,.lcd-r .lseg,.lcd-top .lseg{position:relative}
  .fronts .key::after,.lcd-r .lseg::after,.lcd-top .lseg::after{content:'';position:absolute;inset:-11px -8px}
}
/* A6: kleine Beschriftungen mobil mindestens 12 px */
@media (max-width:899px){
  .tag,small,.gv,.sr,.tg,.nw,.igl-eb,em.tg,em.live,#kontakt .trust span,#kontakt .hint,.kp .t{font-size:0.75rem!important}
}

/* A2 (Vorschau): Orts-Karten mobil als Wisch-Streifen statt langer Spalte; Text der Karten bleibt vollstaendig */
@media (max-width:699px){
  .ok-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:36px calc(var(--pad,16px) * -1) 0;padding:0 var(--pad,16px) 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ok-grid::-webkit-scrollbar{display:none}
  .ok-grid .tile{flex:0 0 84%;scroll-snap-align:start;scroll-margin-left:var(--pad,16px)}
}

/* Leistungen: zusaetzliche Textkachel (z. B. Freie Trauung) belegt die ganze Zeile unter dem Bento */
.bento .t-extra{grid-column:1/-1;min-height:0}
.bento .t-extra .tag-inline{position:static;display:inline-block;margin-top:10px}

/* Zusatzkachel mit Bild (Freie Trauung, Gala & Awards): ganze Zeile, Bildkachel statt Textkachel */
.bento .t-extra.has-img{min-height:clamp(220px,26vw,300px)}

/* ===== Preisseite (preise.html): Hero, Preiskarten, Rechner, Standard, Extras, Faktoren, Abschluss ===== */
.pz-hero{position:relative;min-height:min(78vh,760px);display:flex;align-items:flex-end;padding:clamp(130px,16vw,200px) 0 clamp(50px,6vw,90px);overflow:hidden}
.pz-hero-bg{position:absolute;inset:0;background:url('/images/dj-equipment-hochzeit-location-muenchen.webp') 65% 40%/cover no-repeat;animation:pzKen 14s ease-out forwards}
.pz-hero-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(8,23,27,.9) 38%,rgba(8,23,27,.3) 100%),linear-gradient(to top,var(--bg,#08171b) 0%,rgba(8,23,27,0) 55%)}
@keyframes pzKen{from{transform:scale(1.08)}to{transform:scale(1)}}
.pz-hero .wrap{position:relative}
.pz-h1{font-size:clamp(46px,7.6vw,118px)}
.pz-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.pz-stats div{display:flex;gap:10px;align-items:baseline;padding:13px 22px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);backdrop-filter:blur(8px)}
.pz-stats b{font-family:var(--font-head);font-weight:400;font-size:30px;color:var(--gold-2)}
.pz-stats span{font-size:0.8125rem;color:var(--dim)}
.pz-sec{padding:clamp(60px,8vw,110px) 0}
/* Karten-Grundlage mit Spotlight (Bewegung nur mit Maus, nie bei reduzierter Bewegung) */
.pz-card{position:relative;border-radius:var(--r-lg,24px);border:1px solid var(--line);background:linear-gradient(160deg,var(--surface-2),var(--surface));overflow:hidden;--mx:50%;--my:30%}
.pz-card:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(242,194,126,.18),transparent 60%);opacity:0;transition:opacity .4s}
.pz-card:hover:after{opacity:1}
.pz-card:before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx) var(--my),var(--gold-2),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none;z-index:2}
.pz-card:hover:before{opacity:1}
/* 1 Preiskarten */
.pz-pcs{display:grid;gap:18px;margin-top:44px;grid-template-columns:1fr}
@media(min-width:900px){.pz-pcs{grid-template-columns:1.12fr 1fr 1fr}}
.pz-pc{padding:30px 28px;display:flex;flex-direction:column;gap:6px;isolation:isolate}
.pz-pc:not(.x){--b1:rgba(8,23,27,.82)}
.pz-pc>*{position:relative;z-index:1}
.pz-pc{background-image:linear-gradient(180deg,rgba(13,36,44,.86),rgba(13,36,44,.7) 60%,rgba(13,36,44,.64)),var(--bild);background-size:cover;background-position:center bottom}
.pz-pc.feat{border-color:rgba(224,164,88,.6);box-shadow:0 20px 70px rgba(224,164,88,.16)}
.pz-pc h3{font-family:var(--font-h,'Outfit',system-ui,sans-serif);font-weight:600;font-size:24px;line-height:1.1;margin:0;letter-spacing:-.01em}
.pz-pc .sub{font-size:0.8125rem;color:var(--dim);margin:0 0 16px}
.pz-pc .badge{font-size:0.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
.pz-pc.feat .badge:after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold-2);margin-left:10px;animation:pzPuls 2.2s infinite}
@keyframes pzPuls{0%{box-shadow:0 0 0 0 rgba(242,194,126,.6)}70%,100%{box-shadow:0 0 0 12px rgba(242,194,126,0)}}
.pz-preis{font-family:var(--font-head);font-size:clamp(54px,6vw,86px);line-height:1;color:var(--gold-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.pz-preis.vu{background:linear-gradient(90deg,var(--gold-2) var(--vu,100%),rgba(242,194,126,.3) var(--vu,100%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@property --vu{syntax:'<percentage>';inherits:true;initial-value:100%}
.pz-preis.vu.lauf{animation:pzVu 1.5s cubic-bezier(.2,.8,.2,1)}
@keyframes pzVu{0%{--vu:0%}60%{--vu:112%}100%{--vu:100%}}
.pz-pc .mwst{font-size:0.75rem;color:var(--dim);margin-bottom:14px}
.pz-pc .t{margin:0;color:var(--muted);font-size:0.9375rem;line-height:1.65}
.pz-pc.feat:hover:after{animation:none}
.pz-foot{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;margin-top:36px}
.pz-claim{margin:0;font-family:var(--font-serif);font-style:italic;font-size:clamp(20px,2.4vw,30px);line-height:1.35}
.pz-claim span{color:var(--gold-2)}
/* 2 Rechner */
.pz-rechner{position:relative}
.pz-rechner:before{content:'';position:absolute;inset:0;background:url('/images/hochzeitsbudget-banner.webp') center/cover;opacity:.09;pointer-events:none}
.pz-rechner .wrap{position:relative}
.pz-rechner .bk-card{margin-top:40px;display:grid;gap:26px;padding:clamp(22px,3vw,40px)}
@media(min-width:900px){.pz-rechner .bk-card{grid-template-columns:1.1fr .9fr;grid-template-areas:'g r' 's r' 'sc r' 'st r' 'c r' 'n n';grid-template-rows:auto auto auto auto 1fr auto}.pz-rechner .bk-guests-row{grid-area:g}.pz-rechner #bk-slider{grid-area:s}.pz-rechner .bk-scale{grid-area:sc}.pz-rechner .bk-styles{grid-area:st}.pz-rechner .bk-result{grid-area:r}.pz-rechner .bk-cta{grid-area:c}.pz-rechner .bk-note{grid-area:n}}
.pz-rechner .bk-guests-row{display:flex;justify-content:space-between;align-items:baseline}
.pz-rechner .bk-label{font-size:0.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pz-rechner .bk-guests{font-family:var(--font-head);font-size:44px;color:var(--gold-2)}
.pz-rechner #bk-slider{width:100%;accent-color:#e0a458}
.pz-rechner .bk-scale{display:flex;justify-content:space-between;font-size:0.75rem;color:var(--dim)}
.pz-rechner .bk-styles{display:grid;gap:10px}
.pz-rechner .bk-style{text-align:left;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:4px;transition:border-color .3s,background .3s}
.pz-rechner .bk-style strong{font-family:var(--font-head);font-weight:400;font-size:1.375rem;letter-spacing:.02em}
.pz-rechner .bk-style span{font-size:0.8125rem;color:var(--dim)}
.pz-rechner .bk-style[aria-pressed=true]{border-color:var(--gold);background:rgba(224,164,88,.12)}
.pz-rechner .bk-result{padding:26px;border-radius:20px;background:rgba(0,0,0,.25);border:1px solid rgba(224,164,88,.3);display:flex;flex-direction:column;gap:10px;justify-content:center}
.pz-rechner .bk-total{font-family:var(--font-head);font-size:clamp(40px,4.6vw,64px);color:var(--gold-2);line-height:1;font-variant-numeric:tabular-nums}
.pz-rechner .bk-djbar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.pz-rechner .bk-djbar i{display:block;height:100%;width:6%;background:var(--gold);transition:width .7s cubic-bezier(.3,1.4,.4,1)}
.pz-rechner .bk-djtext{margin:0;color:var(--muted);font-size:0.875rem;line-height:1.6}
.pz-rechner .bk-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.pz-rechner .bk-carry,.pz-rechner .bk-note{font-size:0.8125rem;color:var(--dim);margin:0}
/* 3 Standard */
.pz-grid3{display:grid;gap:14px;margin-top:40px;grid-template-columns:1fr}
@media(min-width:700px){.pz-grid3{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.pz-grid3{grid-template-columns:repeat(3,1fr)}}
.pz-inc{padding:22px;display:flex;gap:16px}
.pz-inc i{flex:none;width:36px;height:36px}.pz-inc b{display:block;font-family:var(--font-head);font-weight:400;font-size:1.375rem;margin-bottom:6px}.pz-inc span{color:var(--muted);font-size:0.875rem;line-height:1.6}
.pz-inc svg{width:36px;height:36px}.pz-inc svg circle{fill:rgba(224,164,88,.14);stroke:rgba(224,164,88,.5);stroke-width:1.5}
.pz-inc svg path{fill:none;stroke:var(--gold-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.pz-inc.in svg path{animation:pzHaken .6s .35s cubic-bezier(.6,0,.2,1) forwards}@keyframes pzHaken{to{stroke-dashoffset:0}}
/* 4 Extras (dezente Fotos, Fenster) */
.pz-ads{display:grid;gap:14px;margin-top:40px;grid-template-columns:1fr}
@media(min-width:700px){.pz-ads{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.pz-ads{grid-template-columns:repeat(3,1fr)}}
.pz-ad{padding:22px;display:flex;flex-direction:column;gap:8px;min-height:190px;isolation:isolate}
.pz-ad>*{position:relative;z-index:1}
.pz-ad b{font-family:var(--font-head);font-weight:400;font-size:24px;padding-right:44px}
.pz-ad span:not(.pz-ad-bg){color:var(--muted);font-size:0.875rem;line-height:1.6;flex:1}
.pz-ad em{font-style:normal;align-self:flex-start;padding:6px 14px;border-radius:999px;background:rgba(224,164,88,.16);border:1px solid rgba(224,164,88,.5);color:var(--gold-2);font-size:0.875rem;transition:background .3s,color .3s}
.pz-ad .pz-ad-bg{position:absolute;inset:0;z-index:0;background:center/cover no-repeat;opacity:.2;filter:saturate(.85) brightness(.9);transform:scale(1.04);transition:opacity .6s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pz-ad .pz-ad-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--surface) 5%,rgba(13,36,44,.55) 70%,rgba(13,36,44,.3))}
.pz-ad:hover .pz-ad-bg{opacity:.38;transform:scale(1.1)}
.pz-ad.mit-fenster{cursor:pointer}
.pz-ad .plus{position:absolute;right:16px;top:16px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid rgba(224,164,88,.5);color:var(--gold-2);display:grid;place-items:center;font-style:normal;font-size:1.25rem;line-height:1;transition:.3s}
.pz-ad.mit-fenster:hover .plus,.pz-ad.mit-fenster:focus-visible .plus{background:var(--gold);color:#1a1206;transform:rotate(90deg)}
.pz-ad:hover em{background:var(--gold);color:#1a1206}
/* 5 Faktoren */
.pz-fk{display:grid;gap:34px}
@media(min-width:900px){.pz-fk{grid-template-columns:.8fr 1.2fr}.pz-fk-kopf{position:sticky;top:110px;align-self:start}}
.pz-cols{display:flex;gap:18px;flex-wrap:wrap;margin:26px 0 0;font-size:0.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
@media(max-width:899px){.pz-cols{display:none}}
.pz-fk-liste{display:grid;gap:14px}
.pz-fkz{padding:24px 26px 24px 36px}
.pz-fkz b{display:flex;gap:14px;align-items:baseline;font-family:var(--font-head);font-weight:400;font-size:28px;color:var(--gold-2);margin-bottom:8px}
.pz-fkz b small{font-size:0.8125rem;color:var(--dim);font-family:var(--font-body)}
.pz-fkz p{margin:0;color:var(--muted);font-size:0.9375rem;line-height:1.7}
.pz-fkline{position:absolute;left:15px;top:20px;bottom:20px;width:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.pz-fkline i{display:block;width:100%;height:100%;background:linear-gradient(var(--gold-2),#b97b2c);transform-origin:top;transform:scaleY(0);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pz-fkz.in .pz-fkline i{transform:scaleY(1)}
.pz-faktoren{position:relative}.pz-faktoren:before{content:'';position:absolute;inset:0;background:url('/images/preisfaktoren-banner.webp') center/cover;opacity:.07;pointer-events:none}
.pz-faktoren .wrap{position:relative}
/* Abschluss-Band */
.pz-cta{position:relative;text-align:center;padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.pz-cta-bg{position:absolute;inset:0;background:url('/images/angebot-banner.webp') center/cover;opacity:.16}
.pz-cta-bg:after{content:'';position:absolute;inset:0;background:radial-gradient(80% 100% at 50% 0,rgba(224,164,88,.18),transparent 70%),linear-gradient(var(--bg,#08171b),transparent 25%,transparent 75%,var(--bg,#08171b))}
.pz-cta .wrap{position:relative}.pz-cta .eyebrow{justify-content:center}.pz-cta .lead{margin:0 auto 28px}
.pz-cta-b{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media(prefers-reduced-motion:reduce){.pz-hero-bg,.pz-pc.feat .badge:after,.pz-preis.vu.lauf{animation:none!important}.pz-inc svg path{stroke-dashoffset:0}.pz-fkline i{transform:scaleY(1);transition:none}.pz-card:after,.pz-card:before{display:none}}

html[lang=en] .pz-preis{font-size:clamp(40px,4.5vw,64px)}
.pz-pc{min-width:0}
/* ── Einsatzgebiet (Uebersicht, 11.10.2026): Hero mit Foto, Gruppenkarten, Regionen als Akkordeon ── */
.eo-hero-bg{background:url('/images/loc-bg-allgaeu.webp') 60% 35%/cover no-repeat}
.eo-hero .wrap>.lead{max-width:62ch}
.eo-hero .wrap>.lead+.lead{margin-top:.9em}
.eo{padding:clamp(36px,5vw,72px) 0 clamp(50px,7vw,100px)}
.eo-gruppen{display:grid;gap:16px}
@media(min-width:760px){.eo-gruppen{grid-template-columns:1fr 1fr}.eo-ende{grid-template-columns:1fr}}
.eo-gruppe{border:1px solid var(--line);border-radius:var(--r-lg,24px);background:linear-gradient(160deg,var(--surface-2),var(--surface));padding:clamp(20px,3vw,30px)}
.eo-gh{font-family:var(--font-head);font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.05;margin:0 0 10px;color:var(--text)}
.eo-gh a,.eo-rh a{color:inherit;text-decoration:none}.eo-gh a:hover,.eo-rh a:hover{color:var(--gold-2)}
.eo-gruppe p{margin:0 0 16px;color:var(--muted);font-size:0.9375rem;line-height:1.7}
.eo-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.eo-pills a{display:inline-block;padding:9px 15px;border:1px solid var(--border-2);border-radius:999px;color:var(--text);text-decoration:none;font-size:0.875rem;line-height:1.2;transition:border-color .2s,background .2s,color .2s}
.eo-pills a:hover,.eo-pills a:focus-visible{border-color:var(--gold);background:rgba(var(--gold-rgb),.12);color:var(--gold-2)}
.eo-regionen{margin:clamp(24px,3.5vw,44px) 0;border-top:1px solid var(--line)}
.eo-region{border-bottom:1px solid var(--line)}
.eo-region summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0}
.eo-region summary::-webkit-details-marker{display:none}
.eo-rh{margin:0;font-family:var(--font-head);font-weight:400;font-size:clamp(24px,2.8vw,34px);line-height:1.1;color:var(--text)}
.eo-pm{position:relative;flex:0 0 36px;width:36px;height:36px;border:1px solid var(--border-2);border-radius:50%;transition:background .2s,border-color .2s}
.eo-pm:before,.eo-pm:after{content:'';position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--gold-2);transform:translate(-50%,-50%);transition:transform .25s}
.eo-pm:after{transform:translate(-50%,-50%) rotate(90deg)}
.eo-region[open] .eo-pm:after{transform:translate(-50%,-50%) rotate(0)}
.eo-region[open] .eo-pm{background:rgba(var(--gold-rgb),.12);border-color:var(--gold)}
.eo-panel{padding:4px 0 28px}
.eo-lk+.eo-lk{margin-top:26px}
.eo-lk h3{margin:0 0 14px;font-family:var(--font-body);font-size:0.875rem;font-weight:600;letter-spacing:.04em;color:var(--gold-2)}
.eo-raster{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.eo-stadt{border:1px solid var(--line);border-radius:18px;padding:16px 18px;background:var(--surface)}
.eo-zusatz{margin:-4px 0 10px;font-size:0.8125rem;color:var(--dim)}
.eo-stadt h4{margin:0 0 10px;font-family:var(--font-h,'Outfit',system-ui,sans-serif);font-weight:600;font-size:1.25rem;line-height:1.15;letter-spacing:-.01em;color:var(--text)}
@media(prefers-reduced-motion:reduce){.eo-pm,.eo-pm:before,.eo-pm:after,.eo-pills a{transition:none}}
.event-emoji-bg,.event-emoji-bg.visible{display:none!important}

/* ═══ Design-Audit Paket 2 (Betreiber 11.10.2026) ═══
   Typo-Skala, hoechstens 5 Stufen:
   1 Display   .h1 (Hero) und .strip-h (Schluesselzeile): Bebas Neue, Versalien, clamp bis 250 px / 140 px
   2 Titel     .h2 (Sektionstitel): Playfair Display kursiv, clamp(28px,4.8vw,68px), zweite Zeile (span) in --gold-2
   3 Untertitel Kartenueberschriften h3 (.tile, .inst, .step, .claim): Bebas Neue, 30 bis 48 px
   4 Text      .lead / p: 16 bis 20 px, Zitate Playfair kursiv 18 bis 20 px
   5 Label     .eyebrow und andere Kleinbeschriftung: 13 px, Sperrung .12em (ca. 1,5 px), --dim bzw. Gold, nie --faint
   Playfair gibt es nur kursiv (fonts/fonts.css), daher sind die Titel durchgehend kursiv. Die Titeltexte stehen im Quelltext in Versalien
   und bleiben es (Gross-/Kleinschreibung nur per CSS ist bei deutschen Substantiven und Eigennamen nicht sauber moeglich). */
.h2{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:clamp(28px,4.8vw,68px);line-height:1.1;letter-spacing:0;text-transform:none;overflow-wrap:break-word}
.h2 span:not(.g):not(.o){color:var(--gold-2)}
.eyebrow,.hero-eyebrow,.marq-cap,.faq-grp,.regions h3,.fact b,.statement cite,.igl-eb,.ptag,.sh-tag,.years,.stat>span,.place small{font-size:13px;letter-spacing:.12em}

/* Hero-Satz im Statement: komplett hell, Scrim fuer Kontrast ueber dem Foto, bis zu zwei Zeilen am Desktop */
.statement::before{background:radial-gradient(ellipse at center,rgba(var(--bg-rgb),.78),rgba(var(--bg-rgb),.94) 78%),linear-gradient(180deg,var(--bg),transparent 18%,transparent 82%,var(--bg))}
.statement blockquote{max-width:1320px}
.statement .big{font-size:clamp(32px,4.7vw,72px);color:var(--text);text-shadow:0 2px 28px rgba(0,0,0,.7)}
.statement .big .w,.statement .big .w.on{opacity:1}
.statement .big .gw{color:var(--gold-2)}

/* ═══ Handy-Paket (Betreiber 11.10.2026): M01 Einklappen, M02 Cookie, M03 Mindestgroessen, M06 H1, M07 Preis-Kennzahlen, M08 Tippflaechen ═══ */
.acc-toggle{display:none}
@media (max-width:700px){
  /* M01: #djplus und #gebiet einklappbar. Inhalt bleibt im DOM; ohne JS (Klasse .acc-sec fehlt) ist alles sichtbar */
  .acc-sec:not(.acc-open) .acc-x{display:none!important}
  .acc-toggle{display:inline-flex;margin-top:22px}
  /* M02: Cookie-Leiste kompakter, Wortlaut und Funktion unveraendert */
  .cookie{padding:8px 12px;border-radius:14px}
  .cookie p{font-size:0.6875rem;line-height:1.25;margin:0 0 6px}
  .cookie p a{font-size:0.75rem}
  .cookie div{flex-wrap:nowrap;gap:8px}
  .cookie .btn{min-height:44px;padding:0 10px;font-size:0.75rem;white-space:nowrap}
  /* M03: Mindestgroessen (Player-Anzeigen 10 px, Links und Hinweise 12 px) */
  .lcd-sub,.lcd-no,.lcd-ends,.mc-s,.fronts .eng{font-size:10px}
  .marq-note,.ab-portal a,.cookie p a{font-size:12px}
  /* M06: H1 einheitlich 44 px */
  html .h1.h1,html .h1.h1[style*="--n"],html .h1.pz-h1{font-size:44px}
  /* M07: Preisseite, Kennzahlen als gleichbreites 2x2-Raster */
  .pz-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pz-stats div{min-width:0;flex-wrap:wrap;gap:0 10px;padding:12px 16px;border-radius:22px}
  .pz-stats span{overflow-wrap:anywhere}
  /* M08: Tippflaechen mindestens 44x44, ohne Layoutverschiebung (unsichtbare Verlaengerung per ::after) */
  .key,.vol,.lcd-top .lseg,.lcd-r .lseg,.fronts .key,.ab-portal a,a[href^="tel:"]:not(.btn):not(.tel),a[href^="mailto:"]:not(.btn),.gold-link{position:relative}
  .key::after,.vol::after,.lcd-top .lseg::after,.lcd-r .lseg::after,.fronts .key::after{content:'';position:absolute;inset:-11px -8px}
  .ab-portal a::after,a[href^="tel:"]:not(.btn):not(.tel)::after,a[href^="mailto:"]:not(.btn)::after,.gold-link::after{content:'';position:absolute;left:-4px;right:-4px;top:-14px;bottom:-14px}
}



/* Dezentes Foto hinter dem Kontaktbereich der Startseite (Notizbuch, Stift, Kaffee). Nur Startseite (canonical), kein overflow:hidden (Adress-Vorschlaege und Kalender im Formular duerfen ueberstehen), kraeftiger Schleier 0,88 fuer gut lesbare Felder und Labels. */
html:has(link[rel="canonical"][href="https://www.beats-per-micha.de/"]) #kontakt{position:relative}
html:has(link[rel="canonical"][href="https://www.beats-per-micha.de/"]) #kontakt::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-repeat:no-repeat;background-position:center;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 84%,transparent) 50%,color-mix(in srgb,var(--bg) 92%,transparent) 100%),url('/images/kontakt-bg-startseite.webp')}
html:has(link[rel="canonical"][href="https://www.beats-per-micha.de/"]) #kontakt>*{position:relative;z-index:1}

/* Preisseite: dezente Foto-Banner im Kopf von "Was immer dabei ist" (#standard) und der FAQ (#faq). Die Motive sind sehr dunkel, deshalb hohe Deckkraft; das Bild
   zeigt nur die obersten 900 px der Sektion und blendet nach unten aus. Kontakt bewusst ohne Banner (Formular-Karte deckt ab). Nur /preise.html. */
html:has(link[rel="canonical"][href$="/preise.html"]) :is(#standard,#faq){position:relative}
html:has(link[rel="canonical"][href$="/preise.html"]) :is(#standard,#faq)::before{content:'';position:absolute;left:0;right:0;top:0;height:min(100%,900px);background-size:cover;background-position:center;background-repeat:no-repeat;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
html:has(link[rel="canonical"][href$="/preise.html"]) #standard::before{background-image:url('/images/included-banner.webp');opacity:.7}
html:has(link[rel="canonical"][href$="/preise.html"]) #faq::before{background-image:url('/images/faq-price-banner.webp');opacity:.55}
html:has(link[rel="canonical"][href$="/preise.html"]) :is(#standard,#faq)>*{position:relative;z-index:1}

/* Weiche Bildkanten: Hintergrundbilder blenden oben und unten ueber eine gestufte Maske (Ease-In-Out, ~26 % der Hoehe) in die Nachbarsektion aus. Bild wird echt transparent, funktioniert mit jeder Folgefarbe. Nur Aussehen. */
:root{--bild-kante:linear-gradient(180deg,rgba(0,0,0,0) calc(min(260px,22%)*0),rgba(0,0,0,0.04) calc(min(260px,22%)*0.07),rgba(0,0,0,0.15) calc(min(260px,22%)*0.17),rgba(0,0,0,0.35) calc(min(260px,22%)*0.29),rgba(0,0,0,0.6) calc(min(260px,22%)*0.42),rgba(0,0,0,0.82) calc(min(260px,22%)*0.57),rgba(0,0,0,0.95) calc(min(260px,22%)*0.74),rgba(0,0,0,1) calc(min(260px,22%)*1),rgba(0,0,0,1) calc(100% - min(260px,22%)*1),rgba(0,0,0,0.95) calc(100% - min(260px,22%)*0.74),rgba(0,0,0,0.82) calc(100% - min(260px,22%)*0.57),rgba(0,0,0,0.6) calc(100% - min(260px,22%)*0.42),rgba(0,0,0,0.35) calc(100% - min(260px,22%)*0.29),rgba(0,0,0,0.15) calc(100% - min(260px,22%)*0.17),rgba(0,0,0,0.04) calc(100% - min(260px,22%)*0.07),rgba(0,0,0,0) calc(100% - min(260px,22%)*0))}
html:has(link[rel="canonical"][href="https://www.beats-per-micha.de/"]) #kontakt::before,
html:has(link[rel="canonical"][href$="/preise.html"]) :is(#standard,#faq)::before{-webkit-mask-image:var(--bild-kante);mask-image:var(--bild-kante)}

/* ═══ Leistungen (Bento): Kacheln mit Bild und Textkacheln gemischt, Textkacheln ohne Ueberlappung, zwei Zusatzkacheln nebeneinander (13.10.2026) ═══ */
.bento .tile.text{justify-content:space-between;gap:14px;min-height:0}
.bento .tile.text .ico{flex:none}
.bento .tile.text>div{display:flex;flex-direction:column;align-items:flex-start}
.bento .tile.text h3{font-size:clamp(22px,1.9vw,28px);margin:0 0 10px;overflow-wrap:break-word;hyphens:auto}
/* Reihenfolge nur per CSS (Quelltext bleibt): abwechselnd Bild und Text, Zusatzkacheln zuletzt */
.bento .t-live{order:1}.bento .t-back{order:2}.bento .t-audio{order:3}.bento .t-plan{order:4}.bento .t-foto{order:5}.bento .t-tech{order:6}.bento .t-aufbau{order:7}.bento .t-feier{order:8}.bento .t-up{order:9}.bento .t-genre{order:10}.bento .t-extra{order:11}
@media (min-width:700px){.bento .t-genre{grid-column:auto}}
/* Zwei Zusatzkacheln (Gala & Awards, Karaoke): nebeneinander, je halbe Breite; eine einzelne bleibt ueber die ganze Zeile */
@media (min-width:700px){.bento .t-extra.has-img:has(+ .t-extra),.bento .t-extra.has-img+.t-extra.has-img{grid-column:auto;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}}
.bento .t-extra.has-img:has(+ .t-extra) h3,.bento .t-extra.has-img+.t-extra.has-img h3{margin:0 0 12px;font-size:clamp(22px,1.9vw,28px)}
@media (min-width:1080px){
  .bento{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,minmax(420px,auto));grid-auto-rows:auto;grid-template-areas:"live live back foto" "plan tech tech feier" "up aufbau audio genre"}
  .bento .t-extra.has-img:has(+ .t-extra),.bento .t-extra.has-img+.t-extra.has-img{grid-column:span 2}
}
/* Feierblick: Bild nach oben ziehen, damit das Handy ueber dem Text sichtbar bleibt (13.10.2026) */
.bento .t-feier>img{top:-30%;height:130%;object-position:10% 50%}
/* Weiche Bildkanten, Teil 2: alle uebrigen Bild-Banner nutzen dieselbe Kante (--bild-kante). Zitat-Panorama (.statement) als Ganzes, Foto-Streifen (.strip) und Orte-Banner (.ok-bg) nur am Bild, damit Schrift nicht ausblendet, Landkarte (#gebiet-map) wie bisher mit Parallax. Neue Banner immer mit var(--bild-kante) maskieren. Nur Aussehen. */
.statement,.strip img,.ok-bg,#gebiet-map{-webkit-mask-image:var(--bild-kante);mask-image:var(--bild-kante)}

/* Banner-Satz je Seitenart: Ablauf, FAQ und Bewertungen tragen auf jeder Seite, die den Abschnitt hat, ein dezentes Foto mit weichen Kanten (--bild-kante). Hochzeit, Firmenevent, Geburtstag je eigene Bilder; Startseite, Regionen, Hubs, Bayern, Einsatzgebiet, EN nehmen den neutralen Satz. Preisseite: FAQ/Standard behalten ihr eigenes Banner. Nur Aussehen. */
html:has(link[rel="canonical"]:is([href*="/dj-hochzeit-"],[href*="hochzeitsrechner"])) :is(#ablauf,#faq,#stimmen){position:relative}
html:has(link[rel="canonical"]:is([href*="/dj-hochzeit-"],[href*="hochzeitsrechner"])) :is(#ablauf,#faq,#stimmen)::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:var(--bild-kante);mask-image:var(--bild-kante)}
html:has(link[rel="canonical"]:is([href*="/dj-hochzeit-"],[href*="hochzeitsrechner"])) #ablauf::before{background-position:center top;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),url('/images/timeline-bg-hochzeit.webp')}
html:has(link[rel="canonical"]:is([href*="/dj-hochzeit-"],[href*="hochzeitsrechner"])) #faq::before{background-position:center;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),url('/images/faq-bg-hochzeit.webp')}
html:has(link[rel="canonical"]:is([href*="/dj-hochzeit-"],[href*="hochzeitsrechner"])) #stimmen::before{background-position:center;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 35%,transparent) 0%,color-mix(in srgb,var(--bg) 25%,transparent) 60%,color-mix(in srgb,var(--bg) 35%,transparent) 100%),url('/images/reviews-bg-hochzeit.webp')}
html:has(link[rel="canonical"]:is([href*="/dj-hochzeit-"],[href*="hochzeitsrechner"])) :is(#ablauf>.ab-track,#faq>.wrap,#stimmen>*){position:relative;z-index:1}
html:has(link[rel="canonical"][href*="/dj-firmenevent-"]) :is(#ablauf,#faq,#stimmen){position:relative}
html:has(link[rel="canonical"][href*="/dj-firmenevent-"]) :is(#ablauf,#faq,#stimmen)::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:var(--bild-kante);mask-image:var(--bild-kante)}
html:has(link[rel="canonical"][href*="/dj-firmenevent-"]) #ablauf::before{background-position:center top;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),url('/images/timeline-bg-firmenevent.webp')}
html:has(link[rel="canonical"][href*="/dj-firmenevent-"]) #faq::before{background-position:center;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),url('/images/faq-bg-firmenevent.webp')}
html:has(link[rel="canonical"][href*="/dj-firmenevent-"]) #stimmen::before{background-position:center;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 35%,transparent) 0%,color-mix(in srgb,var(--bg) 25%,transparent) 60%,color-mix(in srgb,var(--bg) 35%,transparent) 100%),url('/images/reviews-bg-firmenevent.webp')}
html:has(link[rel="canonical"][href*="/dj-firmenevent-"]) :is(#ablauf>.ab-track,#faq>.wrap,#stimmen>*){position:relative;z-index:1}
html:has(link[rel="canonical"][href*="/dj-geburtstag-"]) :is(#ablauf,#faq,#stimmen){position:relative}
html:has(link[rel="canonical"][href*="/dj-geburtstag-"]) :is(#ablauf,#faq,#stimmen)::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:var(--bild-kante);mask-image:var(--bild-kante)}
html:has(link[rel="canonical"][href*="/dj-geburtstag-"]) #ablauf::before{background-position:center top;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),url('/images/timeline-bg-geburtstag.webp')}
html:has(link[rel="canonical"][href*="/dj-geburtstag-"]) #faq::before{background-position:center;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),url('/images/faq-bg.webp')}
html:has(link[rel="canonical"][href*="/dj-geburtstag-"]) #stimmen::before{background-position:center;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 35%,transparent) 0%,color-mix(in srgb,var(--bg) 25%,transparent) 60%,color-mix(in srgb,var(--bg) 35%,transparent) 100%),url('/images/reviews-bg-geburtstag.webp')}
html:has(link[rel="canonical"][href*="/dj-geburtstag-"]) :is(#ablauf>.ab-track,#faq>.wrap,#stimmen>*){position:relative;z-index:1}
html:has(link[rel="canonical"]:is([href="https://www.beats-per-micha.de/"],[href$="/en/"],[href*="/dj-region-"],[href$="/dj-neusaess/"],[href$="/dj-muenchen/"],[href$="/dj-bayern/"],[href$="/dj-neustrelitz/"],[href$="/einsatzgebiet/"])) :is(#ablauf,#faq,#stimmen){position:relative}
html:has(link[rel="canonical"]:is([href="https://www.beats-per-micha.de/"],[href$="/en/"],[href*="/dj-region-"],[href$="/dj-neusaess/"],[href$="/dj-muenchen/"],[href$="/dj-bayern/"],[href$="/dj-neustrelitz/"],[href$="/einsatzgebiet/"])) :is(#ablauf,#faq,#stimmen)::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:var(--bild-kante);mask-image:var(--bild-kante)}
html:has(link[rel="canonical"]:is([href="https://www.beats-per-micha.de/"],[href$="/en/"],[href*="/dj-region-"],[href$="/dj-neusaess/"],[href$="/dj-muenchen/"],[href$="/dj-bayern/"],[href$="/dj-neustrelitz/"],[href$="/einsatzgebiet/"])) #ablauf::before{background-position:center top;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),url('/images/timeline-bg-hochzeit.webp')}
html:has(link[rel="canonical"]:is([href="https://www.beats-per-micha.de/"],[href$="/en/"],[href*="/dj-region-"],[href$="/dj-neusaess/"],[href$="/dj-muenchen/"],[href$="/dj-bayern/"],[href$="/dj-neustrelitz/"],[href$="/einsatzgebiet/"])) #faq::before{background-position:center;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),url('/images/faq-bg.webp')}
html:has(link[rel="canonical"]:is([href="https://www.beats-per-micha.de/"],[href$="/en/"],[href*="/dj-region-"],[href$="/dj-neusaess/"],[href$="/dj-muenchen/"],[href$="/dj-bayern/"],[href$="/dj-neustrelitz/"],[href$="/einsatzgebiet/"])) #stimmen::before{background-position:center;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 35%,transparent) 0%,color-mix(in srgb,var(--bg) 25%,transparent) 60%,color-mix(in srgb,var(--bg) 35%,transparent) 100%),url('/images/reviews-bg-hochzeit.webp')}
html:has(link[rel="canonical"]:is([href="https://www.beats-per-micha.de/"],[href$="/en/"],[href*="/dj-region-"],[href$="/dj-neusaess/"],[href$="/dj-muenchen/"],[href$="/dj-bayern/"],[href$="/dj-neustrelitz/"],[href$="/einsatzgebiet/"])) :is(#ablauf>.ab-track,#faq>.wrap,#stimmen>*){position:relative;z-index:1}
html:has(link[rel="canonical"][href$="/preise.html"]) :is(#ablauf,#stimmen){position:relative}
html:has(link[rel="canonical"][href$="/preise.html"]) :is(#ablauf,#stimmen)::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:var(--bild-kante);mask-image:var(--bild-kante)}
html:has(link[rel="canonical"][href$="/preise.html"]) #ablauf::before{background-position:center top;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 80%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,color-mix(in srgb,var(--bg) 62%,transparent) 100%),url('/images/timeline-bg-hochzeit.webp')}
html:has(link[rel="canonical"][href$="/preise.html"]) #stimmen::before{background-position:center;background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 35%,transparent) 0%,color-mix(in srgb,var(--bg) 25%,transparent) 60%,color-mix(in srgb,var(--bg) 35%,transparent) 100%),url('/images/reviews-bg-hochzeit.webp')}
html:has(link[rel="canonical"][href$="/preise.html"]) :is(#ablauf>.ab-track,#faq>.wrap,#stimmen>*){position:relative;z-index:1}

/* Bildkacheln: mehr Foto, weniger Verlauf, kleinere Schrift, hoehere Kacheln - die Texte bleiben wortgleich (Betreiber 13.10.2026) */
.bento .tile.has-img::before{background:linear-gradient(180deg,rgba(var(--bg-rgb),0) 0%,rgba(var(--bg-rgb),0) 34%,rgba(var(--bg-rgb),.5) 58%,rgba(var(--bg-rgb),.88) 80%,rgba(var(--bg-rgb),.94) 100%)}
.bento .tile.has-img h3{font-size:clamp(22px,1.9vw,28px);margin:0 0 8px;text-shadow:0 2px 12px rgba(0,0,0,.75)}
.bento .tile.has-img p{font-size:0.8438rem;line-height:1.45;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.bento .tile.has-img .more-hint{text-shadow:0 1px 6px rgba(0,0,0,.8)}
@media (max-width:699px){.bento .tile.has-img:not(.t-extra){min-height:520px}}
@media (min-width:700px) and (max-width:1079px){.bento .tile.has-img:not(.t-extra){min-height:470px}}
@media (min-width:1080px){.bento{grid-template-rows:repeat(3,minmax(500px,auto))}}

/* DJ+-Glanz (.djp): der goldene Verlauf lag als Hintergrund direkt am Abschnitt und war an der Oberkante hart abgeschnitten. Jetzt eigene Ebene hinter dem Inhalt, mit --bild-kante oben und unten weich ausgeblendet. Nur Aussehen. */
.djp{background:var(--bg-2);position:relative;isolation:isolate}
.djp::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 80% 20%,rgba(var(--gold-rgb),.12),transparent 70%);-webkit-mask-image:var(--bild-kante);mask-image:var(--bild-kante)}

/* Karten-Kante am Abschnitt: die Karte (#gebiet-map) wandert per Parallax bis ca. 200 px gegen den Abschnitt, eine Maske an der Karte selbst traf die Abschnittskante daher nie (harter Schnitt durch overflow:hidden). Jetzt blendet der feststehende Schleier (#gebiet::after) oben und unten in die Seitenfarbe aus. Nur Aussehen. */
#gebiet::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 100%,transparent) calc(min(480px,46%)*0.0),color-mix(in srgb,var(--bg) 97%,transparent) calc(min(480px,46%)*0.1),color-mix(in srgb,var(--bg) 90%,transparent) calc(min(480px,46%)*0.2),color-mix(in srgb,var(--bg) 78%,transparent) calc(min(480px,46%)*0.3),color-mix(in srgb,var(--bg) 65%,transparent) calc(min(480px,46%)*0.4),color-mix(in srgb,var(--bg) 50%,transparent) calc(min(480px,46%)*0.5),color-mix(in srgb,var(--bg) 35%,transparent) calc(min(480px,46%)*0.6),color-mix(in srgb,var(--bg) 22%,transparent) calc(min(480px,46%)*0.7),color-mix(in srgb,var(--bg) 10%,transparent) calc(min(480px,46%)*0.8),color-mix(in srgb,var(--bg) 3%,transparent) calc(min(480px,46%)*0.9),color-mix(in srgb,var(--bg) 0%,transparent) calc(min(480px,46%)*1.0),color-mix(in srgb,var(--bg) 0%,transparent) calc(100% - min(480px,46%)*1.0),color-mix(in srgb,var(--bg) 3%,transparent) calc(100% - min(480px,46%)*0.9),color-mix(in srgb,var(--bg) 10%,transparent) calc(100% - min(480px,46%)*0.8),color-mix(in srgb,var(--bg) 22%,transparent) calc(100% - min(480px,46%)*0.7),color-mix(in srgb,var(--bg) 35%,transparent) calc(100% - min(480px,46%)*0.6),color-mix(in srgb,var(--bg) 50%,transparent) calc(100% - min(480px,46%)*0.5),color-mix(in srgb,var(--bg) 65%,transparent) calc(100% - min(480px,46%)*0.4),color-mix(in srgb,var(--bg) 78%,transparent) calc(100% - min(480px,46%)*0.3),color-mix(in srgb,var(--bg) 90%,transparent) calc(100% - min(480px,46%)*0.2),color-mix(in srgb,var(--bg) 97%,transparent) calc(100% - min(480px,46%)*0.1),color-mix(in srgb,var(--bg) 100%,transparent) calc(100% - min(480px,46%)*0.0)),linear-gradient(135deg,rgba(var(--bg-rgb),.62) 0%,rgba(var(--bg-rgb),.4) 50%,rgba(var(--bg-rgb),.62) 100%)}

/* Paket A (Apple-Design-Audit): Rueckmeldung beim Druecken sofort (100 ms), Loslassen weich; ohne Layoutverschiebung, nur transform/opacity */
.btn:active,.gbtn:active,.chip:active,.burger:active,.mc-pb:active,.acc-toggle:active,.kp:active{transform:scale(.97);transition-duration:.1s}
.chip,.burger,.gbtn,.mc-pb{transition:background-color .15s,border-color .15s,color .15s,opacity .15s,transform .2s}
@media (prefers-reduced-motion:reduce){
  .btn:active,.gbtn:active,.chip:active,.burger:active,.mc-pb:active,.acc-toggle:active,.kp:active{transform:none;opacity:.8}
}

/* Paket A2 (Apple-Design-Audit): Rest-Buttons wie der Anfragen-Button - Druecken schrumpft auf 97 % (100 ms), Instagram-Kreis, Hero-Karte, Alle-Fragen-Knopf und Rundknoepfe heben sich beim Hover um 2 px. Nur transform, kein Layoutsprung */
.lang a,.lang button,.dock a{transition:background-color .3s,color .3s,transform .2s var(--ease)}
.nav-ig{transition:color .25s,background-color .25s,transform .35s var(--ease)}
.faq-js .faq-toggle-all{transition:background-color .2s,color .2s,border-color .2s,transform .35s var(--ease)}
.igx-arr,.sheet-x,.gal-nav{transition:border-color .25s,transform .35s var(--ease)}
.hero-ig.on{transition:opacity .6s .5s,transform .35s var(--ease),border-color .25s}
.lang a:active,.lang button:active,.nav-ig:active,.hero-ig.on:active,.dock a:active,.faq-toggle-all:active,.igx-arr:active,.sheet-x:active,.gal-nav:active,.fab:active{transform:scale(.97);transition-duration:.1s}
@media(hover:hover){.nav-ig:hover,.hero-ig.on:hover,.faq-toggle-all:hover,.igx-arr:hover,.sheet-x:hover{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){
  .lang a:active,.lang button:active,.nav-ig:active,.hero-ig.on:active,.dock a:active,.faq-toggle-all:active,.igx-arr:active,.sheet-x:active,.gal-nav:active,.fab:active{transform:none;opacity:.8}
  .nav-ig:hover,.hero-ig.on:hover,.faq-toggle-all:hover,.igx-arr:hover,.sheet-x:hover{transform:none}
}

/* Paket B (Apple-Design-Audit): Dauer-Animationen ruhen, solange ihr Bereich nicht im Bild ist (Klasse setzt neu.js) */
.bpm-off,.bpm-off *,.bpm-off ::before,.bpm-off ::after{animation-play-state:paused!important}

/* Paket C (Apple-Design-Audit): Besucher mit "Transparenz reduzieren" bekommen feste Flaechen statt Glas (keine Unschaerfe, kein halbdurchsichtiger Grund) */
@media (prefers-reduced-transparency:reduce){
  .nav,.nav.solid,.nav:not(.solid) .lang,.nav:not(.solid) .nav-ig,.hero-quote,.evt-badge,.tag,.hero-ig,.form,.cookie,.dock,.evt-num,.inst .num,.ki,.ki-tip,.extras-subtotal,.pz-stats div,.sheet-bd{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .nav.solid,.nav:not(.solid) .lang,.hero-quote,.evt-badge,.tag,.hero-ig,.form,.cookie,.dock,.evt-num,.inst .num,.ki,.ki-tip,.extras-subtotal,.pz-stats div{background:rgb(var(--bg-rgb))!important}
  .sheet-bd{background:rgba(3,10,12,.92)!important}
}

/* Paket E (Apple-Design-Audit): Besucher mit "Kontrast erhoehen" bekommen deutlichere Raender und kraeftigeren Text. Nur Farbwerte der Grundtoene, kein Layout. */
@media (prefers-contrast:more){
  :root{--dim:rgba(255,255,255,.8);--muted:rgba(255,255,255,.92);--line:rgba(255,255,255,.5);--line-2:rgba(224,164,88,.75);--faint:rgba(255,255,255,.4)}
  body{font-weight:400}
}

/* Paket D (Apple-Design-Audit Runde 2): Tippflaechen der letzten kleinen Textlinks auf dem Handy (unsichtbare Verlaengerung, ohne Layoutverschiebung) */
@media (max-width:700px){
  .mc-note a,.cookie p a{position:relative}
  .mc-note a::after,.cookie p a::after{content:'';position:absolute;left:-6px;right:-6px;top:-14px;bottom:-14px}
}

/* Paket G1 (Apple-Design, Schritt 1 Gesten): waehrend des Ziehens folgt der Faecher dem Finger ohne Verzoegerung (neu.js steuert --d selbst) */
.igx-fan.drag .rph{transition:opacity .3s,filter .6s}
.igx-fan{cursor:grab}
.igx-fan.drag{cursor:grabbing}

/* Paket G2 bis G4 (Apple-Design, Schritte 2 bis 4): Federkurven, Menue waechst aus dem Burger, Kopfzeile mit weichem Rand.
   Federn sind CSS-linear()-Kurven (Antwortzeit ca. 0,36 s): --spring ohne Ueberschwingen, --spring-snap mit kleinem Ueberschwinger fuer Fenster, die per Geste kommen. */
:root{
  --spring:linear(0,0.039,0.128,0.236,0.348,0.454,0.549,0.632,0.702,0.761,0.809,0.849,0.881,0.906,0.926,0.943,0.955,0.965,0.973,0.979,0.984,0.988,0.99,0.993,0.994,0.996,0.997,0.997,0.998,0.999,0.999,0.999,0.999,0.999,1,1,1,1,1,1,1);
  --spring-snap:linear(0,0.038,0.128,0.243,0.366,0.485,0.593,0.688,0.767,0.832,0.884,0.923,0.953,0.974,0.989,0.999,1.005,1.009,1.01,1.01,1.01,1.009,1.008,1.006,1.005,1.004,1.003,1.002,1.002,1.001,1.001,1,1,1,1,1,1,1,1,1,1);
}
@media (prefers-reduced-motion:no-preference){
  .rph{transition:transform .7s var(--spring),opacity .6s,filter .6s}
  .igs-sm-ph{transition:transform .7s var(--spring-snap),opacity .35s}
  .mmenu{clip-path:circle(0 at var(--mx,calc(100% - 38px)) var(--my,38px));opacity:1;transition:clip-path .7s var(--spring),visibility 0s .7s}
  .menu-open .mmenu{clip-path:circle(150vmax at var(--mx,calc(100% - 38px)) var(--my,38px));transition:clip-path .7s var(--spring),visibility 0s}
  .mmenu a,.mmenu .btn{opacity:0;transform:translateY(16px);transition:opacity .25s,transform .6s var(--spring)}
  .menu-open .mmenu a,.menu-open .mmenu .btn{opacity:1;transform:none;transition-delay:.12s}
  .menu-open .mmenu a:nth-child(2){transition-delay:.17s}
  .menu-open .mmenu a:nth-child(3){transition-delay:.22s}
  .menu-open .mmenu a:nth-child(4){transition-delay:.27s}
  .menu-open .mmenu a:nth-child(n+5),.menu-open .mmenu .btn{transition-delay:.32s}
}
.mmenu{background:rgba(8,23,27,.84);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.nav.solid{background:rgba(8,23,27,.62);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border-bottom-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.nav.solid::after{content:'';position:absolute;left:0;right:0;top:100%;height:18px;background:linear-gradient(rgba(8,23,27,.5),rgba(8,23,27,0));pointer-events:none}
@media (prefers-reduced-transparency:reduce){
  .mmenu{background:rgb(8,23,27);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.solid::after{display:none}
  .nav.solid{border-bottom-color:var(--line)}
}
@media (prefers-contrast:more){.nav.solid::after{display:none}.nav.solid{border-bottom-color:var(--line)}}

/* Paket H1 (Apple-Design): Seitenwechsel blendet weich ueber, Kopfzeile bleibt stehen (nur Browser mit View Transitions, sonst wie bisher) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .nav{view-transition-name:kopfzeile}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:ease}
  ::view-transition-group(kopfzeile){animation-duration:0s}
}

/* Kopfzeile: kein eckiger Fokusrahmen um runde Knoepfe (Sprachumschalter, Instagram) */
.lang a:focus-visible,.lang button:focus-visible,.nav-ig:focus-visible{outline:0}
.lang button:focus-visible{color:var(--text)}

/* ═══ Paket I (Apple-Design 14.10.2026) ═══ */
/* I3: Karten heben sich nur mit Maus/Trackpad (hover:hover) per Feder an und bekommen Gold-Rand; Druck sofort. Einzelne Eigenschaften translate/scale, damit JS-Transforms (Bento, Faecher) unberuehrt bleiben. Tippen am Handy loest nichts aus. */
@media (hover:hover){
  .evt,.plx-card:not(.is-sk),a.place,.tile[data-modal],.inst[role=button]{transition:translate .5s var(--spring),scale .3s var(--spring),border-color .3s,flex-grow .8s var(--ease),transform .5s var(--spring),box-shadow .4s}
  .evt:hover,.plx-card:not(.is-sk):hover,a.place:hover,.tile[data-modal]:hover,.inst[role=button]:hover,.ki:hover{border-color:rgba(var(--gold-rgb),.55)}
  .plx-card:not(.is-sk):hover,a.place:hover,.tile[data-modal]:hover,.inst[role=button]:hover{translate:0 -4px;box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
}
.evt:active,.plx-card:not(.is-sk):active,a.place:active,.tile[data-modal]:active,.inst[role=button]:active,.ki:active{scale:.97;transition-duration:.1s}
@media (prefers-reduced-motion:reduce){
  .evt,.plx-card,a.place,.tile[data-modal],.inst[role=button]{transition:border-color .3s,opacity .3s!important}
  .plx-card:not(.is-sk):hover,a.place:hover,.tile[data-modal]:hover,.inst[role=button]:hover{translate:none}
  .evt:active,.plx-card:active,a.place:active,.tile[data-modal]:active,.inst[role=button]:active,.ki:active{scale:none;opacity:.85}
}

/* I2: Anfrage-Leiste am Handy (Anrufen, WhatsApp, Termin anfragen): faehrt per Feder ein/aus, nie ohne Anfrageziel */
.dock[hidden]{display:none}
.dock{transition:transform .5s var(--spring),opacity .3s,visibility 0s .5s}
.dock.show{visibility:visible;transition:transform .5s var(--spring),opacity .3s,visibility 0s}
.dock:not(.show),.dock.away{visibility:hidden}
.dock.away{transform:translateY(calc(100% + 24px) )}
.dock.show:not(.away){transition:transform .5s var(--spring),opacity .3s,visibility 0s}
.dock a:nth-child(-n+2){min-width:48px}
@media (prefers-reduced-transparency:reduce){.dock{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(var(--bg-rgb))}}
@media (prefers-reduced-motion:reduce){
  .dock,.dock.away{transform:none;opacity:0;transition:opacity .3s,visibility 0s .3s}
  .dock.show:not(.away){opacity:1;transition:opacity .3s,visibility 0s}
}

/* I4: Formular-Pruefung beim Verlassen des Feldes (Meldung am Feld, gruener Haken, Fokusring) */
.form .form-field :is(input,select,textarea):focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.form .form-field :is(input,select,textarea).fv-bad{border-color:#e8706f!important;box-shadow:0 0 0 3px rgba(232,112,111,.14)}
.form .form-field :is(input,select,textarea).fv-ok{border-color:rgba(128,208,142,.65)!important}
.fv-msg{margin:0;font-size:.8125rem;line-height:1.4;color:#ffa3a1}
.fv-msg[hidden]{display:none}
.fv-tick{margin-left:8px;color:#86d995;font-weight:700;letter-spacing:0}
.fv-tick[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.fv-msg:not([hidden]){animation:fvIn .25s ease both}@keyframes fvIn{from{opacity:0}to{opacity:1}}}

/* Hoeren & Sehen (Startseite, 14.10.2026): DJ+, Mixes und Instagram als drei Reiter eines Bereichs. Ohne Skript (.hs-on fehlt) stehen die drei Abschnitte untereinander, die Leiste ist verborgen.
   Reiterleiste = Segment-Control mit gleitendem Indikator (transform, Feder --spring); Text --dim bzw. --text, nie --faint. Tippflaechen mindestens 44 px. */
.hs{position:relative;background:var(--bg-2)}
.hs-head{padding:var(--sec-y) 0 0}
.hs-head .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.hs-head .eyebrow{margin:0 0 22px}
.hs-tabs{position:relative;display:inline-flex;max-width:100%;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.hs-tabs [role="tab"]{position:relative;z-index:1;flex:0 0 auto;min-width:44px;min-height:44px;padding:0 clamp(16px,4.5vw,26px);border:0;border-radius:999px;background:none;color:var(--dim);font:500 .9375rem/1 var(--font-body);letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .3s,transform .35s var(--spring)}
.hs-tabs [role="tab"][hidden]{display:none}
.hs-tabs [role="tab"][aria-selected="true"]{color:var(--text)}
.hs-tabs [role="tab"]:active{transform:scale(.96)}
.hs-tabs [role="tab"]:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
@media (hover:hover){.hs-tabs [role="tab"]:hover{color:var(--text)}}
.hs-ind{position:absolute;z-index:0;left:0;top:4px;bottom:4px;width:var(--w,0);border-radius:999px;background:rgba(var(--gold-rgb),.2);border:1px solid var(--line-2);transform:translateX(var(--x,0));opacity:0;pointer-events:none}
.hs-ready .hs-ind{opacity:1;transition:transform .5s var(--spring),width .5s var(--spring)}
.hs-on .hs-ind{opacity:1}
.hs-on:not(.hs-ready) .hs-ind{transition:none}
.hs-panels{position:relative}
.hs-on .hs-p:not(.hs-act){display:none}
.hs-on .hs-p{padding-top:clamp(36px,4.5vw,60px)}
@media (prefers-reduced-motion:no-preference){
  .hs-go .hs-p.hs-act{animation:hsIn .5s var(--spring) both}
  @keyframes hsIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .hs-go .hs-p.hs-act{animation:hsFade .3s ease both}
  @keyframes hsFade{from{opacity:0}to{opacity:1}}
  .hs-ready .hs-ind{transition:none}
  .hs-tabs [role="tab"]{transition:color .2s}
}
/* Knopf "Alle Fragen anzeigen": normale Schreibweise wie alle anderen Knoepfe (Betreiber 14.10.2026), vorher Grossbuchstaben */
.faq-js .faq-toggle-all{text-transform:none;letter-spacing:.02em}