/* ==========================================================================
   catchadeejay.com – Stylesheet (Relaunch 2026, Basis: Prophonic-Generator)
   Farbwelt: Catch-a-Deejay-Blau (#196fa4) + Tiefblau (#0f4f78), kühle helle Neutrale, dunkler DJ-Block
   Schriften: Poppins (Überschriften, selbst gehostet), Lato (Fließtext)
   ========================================================================== */

@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/lato-400.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/lato-700.woff2") format("woff2")}
@font-face{font-family:"Storefront";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/storefront.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-grotesk-700.woff2") format("woff2")}

:root{
  --akzent:#196fa4;
  --akzent-dunkel:#0f4f78;
  --akzent-tiefer:#0a3a5a;
  --akzent-hell:#e6f1f9;
  --akzent-hell-2:#cfe3f3;
  --tinte:#141617;
  --text:#353a40;
  --text-leise:#66707a;
  --linie:#dfe6ec;
  --nebel:#f3f7fa;
  --weiss:#ffffff;
  --footer:#1a1d21;
  --footer-text:#c9ced6;
  --schatten:0 12px 34px -14px rgba(15,79,120,.3);
  --radius:12px;
  --display:"Poppins",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"Lato",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1500px;
  --gutter:clamp(22px,3vw,40px);   /* Handy: 22 px Seitenrand, damit Fließtext nicht am Rand klebt */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--weiss);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;font-synthesis:none}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--akzent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--akzent-dunkel)}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--display);color:var(--tinte);line-height:1.15;margin:0 0 .5em;text-wrap:balance;letter-spacing:-.01em}
h1{font-family:"Storefront","SF-regular-adobe",Arial,Helvetica,sans-serif;font-size:60px;font-weight:400;text-transform:none;letter-spacing:.01em;line-height:1;font-feature-settings:"ss03";color:var(--akzent);text-shadow:#fff 1px 1px 0,#aaa 2px 2px 0;hyphens:manual;overflow-wrap:normal;margin:.3em 0 .65em}
h2{font-size:clamp(25px,3vw,34px);font-weight:600}
h3{font-size:20px;font-weight:600}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.lead{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--text);max-width:64ch}
.eyebrow{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--akzent);margin:0 0 .9em}
.section{padding-block:clamp(52px,8vw,88px)}
.section--nebel{background:var(--nebel)}
.section-head{max-width:72ch;margin-bottom:clamp(28px,4vw,44px)}
.section-head p{color:var(--text-leise);font-size:18px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.01em;padding:.85em 1.4em;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .15s;cursor:pointer;line-height:1.1}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--akzent);color:#fff}
.btn-primary:hover{background:var(--akzent-dunkel);color:#fff}
.btn-ghost{background:transparent;color:var(--tinte);border-color:var(--linie)}
.btn-ghost:hover{border-color:var(--tinte);color:var(--tinte)}
.btn-weiss{background:#fff;color:var(--akzent-dunkel)}
.btn-weiss:hover{background:var(--akzent-hell);color:var(--akzent-dunkel)}
.btn svg{width:18px;height:18px;flex:none}
.link-mehr{font-family:var(--display);font-weight:600;font-size:15px;text-decoration:none;display:inline-flex;align-items:center;gap:.4em}
.link-mehr::after{content:"";width:.55em;height:.55em;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.link-mehr:hover::after{transform:translateX(3px) rotate(45deg)}

/* Header ---------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie)}
.header-inner{display:flex;align-items:center;gap:20px;min-height:84px}
.logo{display:block;flex:none}
.logo svg,.logo img{height:58px;width:auto}
.nav{margin-left:auto}
.nav>ul{display:flex;align-items:center;gap:4px}
.nav a,.nav button{font-family:var(--display);font-weight:500;font-size:15px;color:var(--tinte);text-decoration:none;padding:.6em .9em;border-radius:8px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.35em}
.nav a:hover,.nav button:hover,.nav a[aria-current="page"]{background:var(--akzent-hell);color:var(--akzent-dunkel)}
.nav .has-sub{position:relative}
.nav .has-sub button::after{content:"";width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:.15em}
.sub{position:absolute;top:calc(100% + 8px);left:0;min-width:330px;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);padding:8px;display:none;flex-direction:column;gap:2px}
.has-sub[data-open="true"] .sub,.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex}
.sub a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:.7em .9em;border-radius:8px;width:100%}
.sub a span{font-family:var(--body);font-weight:400;font-size:14px;color:var(--text-leise)}
.header-actions{display:flex;align-items:center;gap:14px;margin-left:8px}
.btn-phone{padding:.65em 1.1em;font-size:15px}
.lang{display:inline-flex;gap:2px;font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.05em}
.lang button,.lang span{background:none;border:0;padding:.4em .45em;border-radius:6px;color:var(--text-leise);cursor:pointer;font:inherit}
.lang span{color:var(--tinte)}
.lang button:hover{background:var(--nebel);color:var(--tinte)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--linie);background:#fff;border-radius:10px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:20px;height:2px;background:var(--tinte);border-radius:2px;transition:transform .2s,opacity .2s}

/* Hero-Slider ---------------------------------------------------------- */
/* Intro beginnt unter dem Hero-Keil (negativer Rand), damit Keil und Intro eine Fläche ohne Kante sind */
.intro{background:linear-gradient(180deg,#e9f3fb 0,#fff 62%);margin-top:-3.5vw;z-index:0}
.hero{z-index:1;position:relative;background:var(--tinte);color:#fff;clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 3.5vw))}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slides::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:start;min-height:460px;max-height:640px;aspect-ratio:3/1;display:grid;align-items:end}
.slide picture,.slide>img{position:absolute;inset:0;width:100%;height:100%}
.slide img{width:100%;height:100%;object-fit:cover}
.slide-copy .eyebrow,.slide-copy h2,.slide-copy p{text-shadow:1px 1px 1px rgba(0,0,0,.6)}
.slide-copy .btn{box-shadow:2px 2px 0 rgba(0,0,0,.35)}
.slide-copy{position:relative;z-index:auto;padding-block:clamp(36px,5vw,64px) clamp(60px,7vw,100px);display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.slide-copy>*{max-width:760px}
.slide-copy .eyebrow{color:#cfe8fb;font-size:14px;background:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.slide-copy h2{color:#fff;font-size:clamp(34px,4.5vw,64px);font-weight:700;line-height:1.04;margin-bottom:.3em;letter-spacing:-.02em;max-width:940px}
.slide-copy p{font-size:clamp(16px,1.3vw,19px);font-weight:700;color:#fff;max-width:54ch;margin-bottom:1.3em;padding:10px 16px;border-radius:10px;background:rgba(21,24,28,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}   /* leichter Fond für Lesbarkeit */
.slide-copy--links{align-items:flex-start;text-align:left}   /* Text links */
.hero-controls{position:absolute;left:0;right:0;bottom:calc(3.5vw + 22px);z-index:2;display:flex;justify-content:flex-start;gap:28px;align-items:center;pointer-events:none}
.hero-controls>*{pointer-events:auto}
.dots{display:flex;gap:8px}
.dots button{width:34px;height:4px;border-radius:2px;border:0;background:rgba(255,255,255,.45);box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:pointer;padding:0;transition:background .2s}
.dots button[aria-current="true"]{background:#fff}
.arrows{display:flex;gap:8px}
.arrows button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(15,20,26,.35);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .2s}
.arrows button:hover{background:rgba(255,255,255,.18)}
.arrows svg{width:20px;height:20px}

/* Intro ----------------------------------------------------------------- */
.intro{padding-block:calc(clamp(44px,7vw,72px) + 3.5vw) clamp(36px,5vw,56px)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:14.5px;font-weight:700;color:var(--akzent-dunkel);background:var(--akzent-hell);border-radius:999px;padding:.4em .85em;white-space:nowrap}
.chips-title{font-family:var(--display);font-weight:600;font-size:14px;color:var(--text-leise);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}

/* Leistungen ------------------------------------------------------------ */
.karten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit}
.karte:hover{transform:translateY(-4px);box-shadow:var(--schatten);color:inherit}
.karte img{aspect-ratio:16/9;width:100%;object-fit:cover}
.karte-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.karte h3{margin:0;font-size:19px}
.karte p{margin:0;color:var(--text-leise);font-size:15.5px;flex:1}
.karte .link-mehr{margin-top:6px}
.karte-preis{font-family:var(--display);font-weight:500;font-size:13px;color:var(--akzent-dunkel);letter-spacing:.04em;text-transform:uppercase}

/* Service-Liste --------------------------------------------------------- */
.service{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px) clamp(20px,3vw,40px)}
.service-item{display:grid;grid-template-columns:84px minmax(0,1fr);gap:20px;align-items:start}
.service-item .icon{width:84px;height:84px;border-radius:22px;background:linear-gradient(145deg,var(--akzent-hell) 0%,#fff 100%);border:1px solid var(--akzent-hell-2);box-shadow:0 8px 20px -12px rgba(15,79,120,.35);display:grid;place-items:center;color:var(--akzent-dunkel)}
.service-item .icon svg{width:58px;height:58px}
.service-item .icon .akzent{fill:var(--akzent-hell-2)}
.service-item h3{font-size:17px;margin-bottom:.3em}
.service-item p{margin:0;color:var(--text-leise);font-size:15.5px}

/* Ablauf ----------------------------------------------------------------- */
.ablauf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.schritt{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:24px 24px 26px;position:relative}
.schritt{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start}
.schritt .nr{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2.5px solid var(--akzent);color:var(--akzent);font-family:var(--display);font-weight:700;font-size:20px;line-height:1}
.schritt-text h3{margin-top:8px}
.schritt h3{font-size:19px}
.schritt p{margin:0;color:var(--text-leise);font-size:15.5px}

/* Über uns --------------------------------------------------------------- */
.ueber{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center}
.ueber img{border-radius:var(--radius);width:100%;aspect-ratio:3/2;object-fit:cover}
.fakten{display:grid;grid-template-columns:repeat(3,auto);gap:12px 28px;margin-top:28px;padding-top:24px;border-top:1px solid var(--linie);justify-content:start}
.fakt b{display:block;font-family:var(--display);font-weight:700;font-size:26px;color:var(--tinte);line-height:1.1;font-variant-numeric:tabular-nums}
.fakt span{font-size:14px;color:var(--text-leise)}

/* Themen (SEO-Text) ----------------------------------------------------- */
.themen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px) clamp(24px,4vw,64px)}
.thema h2{font-size:22px;margin-bottom:.45em}
.thema p{color:var(--text);font-size:16.5px;max-width:62ch}

/* Referenzen ------------------------------------------------------------- */
.ref-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ref-grid img{aspect-ratio:1;width:100%;object-fit:cover;border-radius:10px}
.ref-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.ref-head h2{margin:0}

/* CTA -------------------------------------------------------------------- */
.cta{background:var(--akzent-dunkel);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 45%),radial-gradient(circle at 85% 20%,rgba(52,170,220,.55),transparent 45%)}
.cta .wrap{position:relative;display:grid;grid-template-columns:minmax(0,auto) auto;justify-content:center;gap:clamp(32px,6vw,96px);align-items:center}   /* beide Blöcke Richtung Mitte */
.cta h2{color:#fff;margin-bottom:.35em}
.cta p{color:rgba(255,255,255,.85);margin:0;max-width:52ch}
.cta-actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right;justify-self:end}
.cta-tel{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,30px);color:#fff;text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.cta-tel:hover{color:#dff0fc}
.cta-zeiten{font-size:14px;color:rgba(255,255,255,.75)}

/* Hersteller & Förderung --------------------------------------------------- */
.partner{border-top:1px solid var(--linie)}
.partner-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.partner h2{font-size:clamp(22px,2.2vw,27px)}
.partner p{color:var(--text-leise);font-size:16px;max-width:52ch}
.hersteller img{margin-top:18px;max-width:600px;width:100%;filter:grayscale(1);opacity:.85}
.foerderung{background:var(--nebel);border-radius:var(--radius);padding:clamp(22px,3vw,34px)}
.foerderung-logo{display:block;margin:14px 0 18px;max-width:340px}
.foerderung-logo img{width:100%;height:auto}
.fb-box{display:flex;align-items:center;gap:14px;background:#1877f2;color:#fff;text-decoration:none;border-radius:12px;padding:14px 16px;margin-bottom:8px;transition:background .2s,transform .15s}
.fb-box:hover{background:#0f5fcc;color:#fff;text-decoration:none;transform:translateY(-2px)}
.fb-icon{flex:none;width:44px;height:44px;border-radius:10px;background:#fff;color:#1877f2;display:grid;place-items:center}
.fb-icon svg{width:22px;height:34px}
.fb-text{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.fb-text b{font-family:var(--display);font-weight:600;font-size:15px;color:#fff}
.fb-text span{font-size:13px;color:rgba(255,255,255,.85)}

/* Footer ----------------------------------------------------------------- */
.site-footer{background:var(--footer);color:var(--footer-text);font-size:15px;padding-block:clamp(44px,6vw,64px) 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px}
.site-footer h4{color:#fff;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
.site-footer a{color:var(--footer-text);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer li{margin-bottom:8px}
.kontakt-liste a{display:inline-flex;align-items:center;gap:10px}
.kontakt-liste svg{width:18px;height:18px;flex:none;color:var(--akzent)}
.footer-claim{margin:22px 0 0;font-family:"Space Grotesk",var(--display);font-weight:700;font-size:clamp(26px,2.9vw,40px);line-height:1.15;letter-spacing:-.045em;color:#fff;display:flex;flex-direction:column;text-wrap:balance}
.claim-verlauf,.claim-akzent{background:linear-gradient(90deg,#4fb0f0 0%,#2c8ed2 45%,#5b5ae6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.footer-logo svg,.footer-logo img{height:34px;width:auto}
.footer-adresse{font-style:normal;line-height:1.55}
.footer-adresse b{color:#fff;font-weight:700}
.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:13.5px;color:#9aa1ab}
.footer-bottom a{color:#9aa1ab}
.support{display:flex;align-items:center;gap:12px}
.support img{height:22px;width:auto;opacity:.9}

/* Responsiv --------------------------------------------------------------- */
@media (max-width:1100px){
  .karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .partner-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--linie);box-shadow:var(--schatten);padding:12px var(--gutter) 20px}
  .site-header[data-menu="open"] .nav{display:block}
  .nav>ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav a,.nav button{width:100%;justify-content:space-between;padding:.8em .9em;font-size:16px}
  .sub{position:static;display:none;min-width:0;box-shadow:none;border:0;background:var(--nebel);margin-top:4px}
  .has-sub[data-open="true"] .sub{display:flex}
  .has-sub:hover .sub{display:none}
  .has-sub[data-open="true"]:hover .sub{display:flex}
  .burger{display:flex}
  .btn-phone span{display:none}
  .btn-phone{padding:.65em .8em}
  .lang{display:none}
  .intro-grid,.ueber,.themen,.cta .wrap{grid-template-columns:1fr}
  .service,.ablauf{grid-template-columns:1fr 1fr}
  .service-item{grid-template-columns:72px minmax(0,1fr);gap:16px}
  .service-item .icon{width:72px;height:72px;border-radius:18px}
  .service-item .icon svg{width:44px;height:44px}
  .slide{aspect-ratio:auto;min-height:0;height:clamp(480px,78vh,620px)}
  .slide-copy{align-items:flex-start;text-align:left}
  .slide-copy h2{font-size:clamp(26px,7.4vw,34px);hyphens:auto;overflow-wrap:anywhere}   /* „Veranstaltungstechnik“ passt auf 360–430 px */
  .cta-actions{align-items:flex-start;text-align:left;justify-self:start}
  .hero-controls{justify-content:center}
  .arrows{display:none}
  .hero{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 18px))}
  .intro{margin-top:-18px;padding-top:calc(clamp(44px,7vw,72px) + 18px)}
  .hero-controls{bottom:40px}
}
@media (max-width:600px){
  body{font-size:16px}
  h1{font-size:40px;line-height:1.3}
  .karten,.service,.ablauf{grid-template-columns:1fr}
  .service-item--nur-desktop{display:none}   /* Festinstallation + Vertrieb nur auf Desktop */
  .foerderung{display:none}   /* Förderung-Block nur auf Desktop */
  .chips-title,.chips{display:none}   /* „Typische Einsätze“ auf dem Handy ausgeblendet, bleibt im HTML (SEO) */
  .ref-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr}
  .fakten{grid-template-columns:repeat(3,auto);gap:12px 18px}
  .fakt b{font-size:22px}
  .slide-copy{padding-bottom:84px}
  .header-inner{min-height:72px;gap:12px}
  .logo svg,.logo img{height:44px}
}
@media (prefers-reduced-motion:reduce){
  .karte,.btn,.link-mehr::after{transition:none}
}

/* ==========================================================================
   Unterseiten (Phase 3): Seitenkopf, Kategorien, Produkte, Galerie, Kontakt, Text
   ========================================================================== */

/* Kleinigkeiten global --------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--tinte);color:#fff;padding:.6em 1em;border-radius:8px;text-decoration:none;font-family:var(--display);font-weight:600}
.skip:focus{left:8px}
.nav button.ist-aktiv{background:var(--akzent-hell);color:var(--akzent-dunkel)}
.footer-zeiten{font-size:14px;color:#9aa1ab;margin:14px 0 0;line-height:1.5}
.footer-h4-abstand{margin-top:22px}
.karten--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.themen--eins{grid-template-columns:minmax(0,1fr);max-width:78ch}
.chips--klein li{font-size:13.5px;font-weight:600;padding:.35em .75em;background:var(--nebel);color:var(--text)}

/* Sprachumschalter mit Hinweis (Google Translate erst nach Klick) --------- */
.lang{position:relative}
.lang button[aria-current="true"]{color:var(--tinte);background:var(--nebel)}
.lang-hinweis{position:absolute;right:0;top:calc(100% + 10px);width:min(360px,calc(100vw - 32px));background:#fff;border:1px solid var(--linie);border-radius:12px;box-shadow:var(--schatten);padding:16px;font-family:var(--body);font-size:14px;font-weight:400;letter-spacing:0;text-align:left;z-index:60}
.lang-hinweis p{margin:0 0 12px;line-height:1.5;color:var(--text)}
.lang-hinweis-actions{display:flex;gap:8px;flex-wrap:wrap}
.lang-hinweis .btn{font-size:13px;padding:.6em 1em}
.lang-hinweis .btn-ghost{color:var(--tinte)}
body.uebersetzt .lang button[data-lang="en"]{color:var(--tinte);background:var(--nebel)}
body.uebersetzt .lang button[data-lang="de"]{color:var(--text-leise);background:none}
.skiptranslate iframe{display:none!important}
body{top:0!important}

/* Wabernde Farbflächen (Hintergrund-Animation) --------------------------- */
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blobs i{position:absolute;display:block;filter:blur(70px);opacity:.8;will-change:transform,border-radius;border-radius:44% 56% 52% 48% / 52% 42% 58% 48%;animation:wabern 24s ease-in-out infinite alternate,morphen 16s ease-in-out infinite alternate}
.blobs .b1{width:min(60vw,820px);height:min(60vw,820px);left:-14vw;top:-40%;background:radial-gradient(circle at 40% 40%,#2c8ed2 0%,rgba(44,142,210,0) 66%)}
.blobs .b2{width:min(48vw,660px);height:min(48vw,660px);right:-10vw;bottom:-50%;background:radial-gradient(circle at 50% 50%,#5b5ae6 0%,rgba(91,90,230,0) 66%);animation-duration:30s,19s;animation-delay:-11s,-5s}
.blobs .b3{width:min(34vw,460px);height:min(34vw,460px);left:42%;top:0;background:radial-gradient(circle at 50% 50%,#1fb3c9 0%,rgba(31,179,201,0) 66%);opacity:.55;animation-duration:20s,13s;animation-delay:-6s,-2s}
.blobs--hell i{opacity:.32;filter:blur(100px);animation-duration:6s,8s}
.blobs--hell .b2{animation-duration:6.5s,9s}
.blobs--hell .b3{animation-duration:5.5s,7.5s}
.blobs--hell .b1{background:radial-gradient(circle at 40% 40%,#9fd0f2 0%,rgba(159,208,242,0) 70%)}
.blobs--hell .b2{background:radial-gradient(circle at 50% 50%,#fff6c8 0%,rgba(255,246,200,0) 70%);width:min(70vw,900px);height:min(70vw,900px);right:-18vw;top:-30%;bottom:auto}
.blobs--hell .b3{background:radial-gradient(circle at 50% 50%,#9fd0f2 0%,rgba(159,208,242,0) 70%)}
.blobs--cta i{opacity:.4;filter:blur(90px);animation-duration:6.5s,8.5s}
.blobs--cta .b1{background:radial-gradient(circle at 40% 40%,#4fb0f0 0%,rgba(79,176,240,0) 66%);top:-60%}
.blobs--cta .b2{background:radial-gradient(circle at 50% 50%,#fff3b0 0%,rgba(255,243,176,0) 66%)}
@keyframes wabern{0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}50%{transform:translate3d(7vw,-3vw,0) scale(1.14) rotate(25deg)}100%{transform:translate3d(-5vw,5vw,0) scale(.9) rotate(-20deg)}}
@keyframes morphen{0%{border-radius:44% 56% 52% 48% / 52% 42% 58% 48%}50%{border-radius:58% 42% 40% 60% / 40% 58% 42% 60%}100%{border-radius:38% 62% 60% 40% / 60% 36% 64% 40%}}
.raster{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 75%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 75%)}
.intro{position:relative;overflow:hidden}
.intro .wrap{position:relative;z-index:1}
.cta .blobs{z-index:0}
.cta .wrap{z-index:1}

/* Schallwellen hinter dem Über-uns-Bild ----------------------------------- */
.ueber{position:relative}
.ueber img{position:relative;z-index:1}
.wellen{position:absolute;z-index:0;width:min(46vw,560px);aspect-ratio:1;left:-8%;top:-14%;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 21px,rgba(44,142,210,.22) 21px 23px);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%);animation:pulsieren 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes pulsieren{from{transform:scale(.94);opacity:.7}to{transform:scale(1.08);opacity:1}}

/* Seitenkopf -------------------------------------------------------------- */
.seitenkopf{position:relative;overflow:hidden;background:linear-gradient(135deg,#15181c 0%,#111d27 55%,#0b2a3d 100%);color:#fff;padding-block:clamp(40px,6vw,80px) calc(clamp(44px,6vw,80px) + 3vw);clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 3vw))}
.seitenkopf-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);gap:clamp(32px,6vw,96px);align-items:center}
.seitenkopf--klein .seitenkopf-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr)}
.brotkrumen{margin-bottom:22px;font-size:13.5px}
.brotkrumen ol{display:flex;flex-wrap:wrap;gap:6px 0;align-items:center}
.brotkrumen li{display:inline-flex;align-items:center;color:rgba(255,255,255,.62)}
.brotkrumen li+li::before{content:"";width:.4em;height:.4em;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);margin:0 .75em;opacity:.7}
.brotkrumen a{color:rgba(255,255,255,.78);text-decoration:none}
.brotkrumen a:hover{color:#fff;text-decoration:underline}
.brotkrumen span[aria-current]{color:#fff;font-weight:700}
.seitenkopf .eyebrow{color:#7cc4f5}
.seitenkopf h1{color:#fff;font-size:clamp(28px,3.9vw,54px);line-height:1.05;letter-spacing:-.005em;margin-bottom:.45em;text-wrap:balance}
.seitenkopf .lead{color:rgba(255,255,255,.84);font-size:clamp(16.5px,1.35vw,19px);max-width:60ch}
.seitenkopf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px}
.kopf-tel{display:inline-flex;align-items:center;gap:.5em;color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.01em}
.kopf-tel svg{width:20px;height:20px;color:#7cc4f5}
.kopf-tel:hover{color:#cfe8fb}
.seitenkopf-bild{position:relative;margin:0;justify-self:end;width:100%;max-width:640px;transform:rotate(-2deg)}
.seitenkopf-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08)}
.seitenkopf-bild::before{content:"";position:absolute;inset:-14px -14px auto auto;width:46%;height:60%;border-radius:22px;border:2px solid rgba(124,196,245,.45);z-index:-1;transform:rotate(3deg)}
@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* Kategorie-Navigation (klebt unter dem Header) -------------------------- */
.kat-nav{position:sticky;top:84px;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie)}
.kat-nav-inner{display:flex;align-items:center;gap:20px;min-height:58px}
.kat-nav ul{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:8px;-webkit-overflow-scrolling:touch;flex:1;min-width:0}
.kat-nav ul::-webkit-scrollbar{display:none}
.kat-nav a{display:inline-block;white-space:nowrap;padding:.5em 1em;border-radius:999px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--tinte);text-decoration:none;transition:background .2s,color .2s}
.kat-nav a:hover{background:var(--akzent-hell);color:var(--akzent-dunkel)}
.kat-nav a.ist-aktiv{background:var(--tinte);color:#fff}
.preis-hinweis{margin:0;font-size:13.5px;color:var(--text-leise);white-space:nowrap;flex:none}

/* Kategorien & Produkte --------------------------------------------------- */
.kategorie{padding-block:clamp(40px,6vw,72px);scroll-margin-top:140px}
.kat-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,3vw,28px);flex-wrap:wrap}
.kat-head h2{margin:0;font-size:clamp(24px,2.6vw,32px);display:flex;align-items:baseline;gap:.5em}
.kat-nr{font-family:"Space Grotesk",var(--display);font-weight:700;font-size:.62em;color:var(--akzent);letter-spacing:.06em}
.kat-zahl{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-leise)}
.kat-intro{max-width:70ch;color:var(--text-leise);margin:0 0 24px}
.kat-hinweis{margin:22px 0 0;font-size:15px;color:var(--text-leise);max-width:80ch}
.produkte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.produkt{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.produkt:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.produkt-bild{position:relative;background:#fff;border-bottom:1px solid var(--linie);overflow:hidden}
.produkt-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s}
.produkt:hover .produkt-bild img{transform:scale(1.04)}
.preis{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:baseline;gap:5px;background:var(--tinte);color:#fff;padding:.5em .9em;border-radius:999px;font-family:var(--display);font-weight:700;font-size:15px;line-height:1;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.preis small{font-size:11.5px;font-weight:500;opacity:.8;letter-spacing:.02em}
.preis-tag{display:inline-flex;align-items:baseline;gap:5px;margin-left:6px;padding-left:9px;border-left:1px solid rgba(255,255,255,.3)}
.produkt-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.produkt h3{font-size:16.5px;margin:0;line-height:1.3}
.specs{display:flex;flex-direction:column;gap:5px}
.specs li{position:relative;padding-left:22px;font-size:14.5px;color:var(--text-leise);line-height:1.45}
.specs li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:5px;border-left:2px solid var(--akzent);border-bottom:2px solid var(--akzent);transform:rotate(-45deg)}
.specs--gross li{font-size:16px;color:var(--text);padding-left:26px}
.specs--gross li::before{width:11px;height:6px;top:.55em}

/* Party-Pakete ------------------------------------------------------------ */

/* Galerie & Lightbox ------------------------------------------------------ */
.galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.galerie figure{margin:0}
.galerie a{display:block;overflow:hidden;border-radius:12px;background:var(--nebel);position:relative}
.galerie a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(21,24,28,.35));opacity:0;transition:opacity .25s}
.galerie a:hover::after{opacity:1}
.galerie img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s}
.galerie a:hover img{transform:scale(1.05)}
.galerie figcaption{margin-top:9px;font-size:14px;color:var(--text-leise);font-weight:700}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,12,16,.94);display:grid;place-items:center;padding:16px}
.lightbox[hidden]{display:none}
.lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(96vw,1600px)}
.lb-figure img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.lb-figure figcaption{color:#fff;font-family:var(--display);font-weight:600;font-size:15px;text-align:center}
.lb-figure figcaption span{color:rgba(255,255,255,.55);font-weight:500;margin-left:.6em}
.lightbox button{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.lightbox button:hover{background:rgba(255,255,255,.2)}
.lightbox button svg{width:22px;height:22px}
.lb-close{top:18px;right:18px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
body.lb-offen{overflow:hidden}

/* Kundenliste ------------------------------------------------------------- */
.kunden-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(28px,4vw,56px)}
.kunden-grid h3{font-size:17px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--linie)}

/* Kontakt ----------------------------------------------------------------- */
.kontakt-section{padding-top:clamp(36px,5vw,56px)}
.kontakt-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.kontakt-form-box{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:clamp(20px,3vw,36px);box-shadow:var(--schatten)}
.formular{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.feld label,.feld-radio legend{display:block;font-family:var(--display);font-weight:600;font-size:14px;color:var(--tinte);margin-bottom:6px}
.feld label b{color:var(--akzent);font-weight:700}
.feld label span{font-weight:400;color:var(--text-leise)}
.feld input:not([type="radio"]),.feld textarea{width:100%;font:inherit;font-size:16px;color:var(--tinte);padding:.72em .9em;border:1.5px solid var(--linie);border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s}
.feld textarea{resize:vertical;min-height:140px}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px var(--akzent-hell)}
.feld input.ist-fehler,.feld textarea.ist-fehler{border-color:#d33}
fieldset.ist-fehler legend{color:#b32222}
.feld--voll{grid-column:1/-1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.feld-radio{border:0;padding:0;margin:0;min-width:0}
.feld-radio label{display:inline-flex;align-items:center;gap:8px;margin:4px 24px 0 0;font-family:var(--body);font-weight:400;font-size:16px;color:var(--text)}
.feld-radio input{accent-color:var(--akzent);width:18px;height:18px}
.formular-fuss{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:6px}
.btn-gross{font-size:16px;padding:1em 1.9em}
.formular-hinweis{font-size:13.5px;color:var(--text-leise);margin:0;max-width:50ch;line-height:1.5}
.formular-meldung{border-radius:10px;padding:14px 16px;margin-bottom:18px;font-weight:700;font-size:15px;line-height:1.5}
.formular-meldung--fehler{background:#fdecec;color:#8a1f1f;border:1px solid #f3b8b8}
.formular-meldung--ok{background:var(--akzent-hell);color:var(--akzent-dunkel);border:1px solid var(--akzent-hell-2)}
.info-karte{background:var(--nebel);border-radius:18px;padding:clamp(20px,2.6vw,28px);margin-bottom:20px}
.info-karte .eyebrow{margin-bottom:.5em}
.info-zeiten{font-family:var(--display);font-weight:700;font-size:26px;color:var(--tinte);margin:0 0 14px;letter-spacing:-.01em}
.kontakt-liste--gross a{color:var(--tinte);font-family:var(--display);font-weight:600;font-size:18px}
.kontakt-liste--gross svg{color:var(--akzent);width:20px;height:20px}
.kontakt-liste--gross a:hover{color:var(--akzent-dunkel)}
.info-support{margin:14px 0 0;font-size:14.5px;color:var(--text-leise)}
.adressen{font-style:normal;display:flex;flex-wrap:wrap;gap:6px 28px}   /* Desktop: beide Anschriften nebeneinander */
.adressen p{margin:0 0 14px;line-height:1.55}
.adressen .adresse-hinweis{flex-basis:100%}
.adressen b{font-family:var(--display);font-weight:600;color:var(--tinte)}
.adresse-hinweis{font-size:14px;color:var(--text-leise)}
.karte-box{margin-top:6px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--linie);aspect-ratio:4/3;display:grid}
.karte-box iframe{width:100%;height:100%;border:0;display:block}
.karte-platzhalter{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px}
.karte-platzhalter svg{width:44px;height:44px;color:var(--akzent)}
.karte-platzhalter p{margin:0;font-size:14px;color:var(--text-leise);max-width:34ch}

/* Textseiten (Impressum, AGB, Datenschutz) -------------------------------- */
.textkopf{position:relative;overflow:hidden;background:var(--nebel);padding-block:clamp(36px,5vw,64px)}
.textkopf .wrap{position:relative;z-index:1;max-width:1100px}
.textkopf .brotkrumen li{color:var(--text-leise)}
.textkopf .brotkrumen a{color:var(--text-leise)}
.textkopf .brotkrumen a:hover{color:var(--tinte)}
.textkopf .brotkrumen span[aria-current]{color:var(--tinte)}
.textkopf h1{font-size:clamp(26px,3.4vw,44px)}
.textkopf .lead{color:var(--text-leise)}
.textseite-grid{max-width:1100px;display:grid;grid-template-columns:minmax(0,1fr)}
.textseite--toc .textseite-grid{grid-template-columns:250px minmax(0,1fr);gap:clamp(32px,5vw,72px)}
.toc{position:sticky;top:96px;align-self:start;border-left:2px solid var(--linie);padding-left:18px;font-size:14.5px}
.toc-titel{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise);margin:0 0 10px}
.toc a{display:block;color:var(--text-leise);text-decoration:none;padding:4px 0;line-height:1.35}
.toc a:hover{color:var(--tinte)}
.text{max-width:78ch}
.text h2{font-size:clamp(21px,2.2vw,26px);margin:2.2em 0 .6em;scroll-margin-top:110px}
.text h2:first-child{margin-top:0}
.text h3{font-size:18px;margin:1.6em 0 .5em;scroll-margin-top:110px}
.text p{max-width:78ch}
.text ul,.text ol{list-style:disc;padding-left:1.3em;margin:0 0 1.1em}
.text ol{list-style:decimal}
.text li{margin-bottom:.35em}
.text address{font-style:normal}
.text .box{background:var(--nebel);border-radius:14px;padding:22px 26px;margin:1.4em 0}
.text .box p:last-child{margin-bottom:0}
.text .box-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px}
.text table{border-collapse:collapse;width:100%;font-size:15.5px;margin:0 0 1.4em}
.text th,.text td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linie);vertical-align:top}
.text th{font-family:var(--display);font-weight:600;font-size:14px;color:var(--tinte)}
.text .entwurf{background:#fff6dd;border:1px solid #f1d58a;color:#6b4a00;border-radius:12px;padding:14px 18px;font-size:15px;margin:0 0 1.5em}
.text .entwurf b{color:#6b4a00}
.text .klein{font-size:14.5px;color:var(--text-leise)}

/* Hinweis-Seiten (Danke, 404) -------------------------------------------- */
.hinweis-seite{position:relative;overflow:hidden;background:var(--nebel);padding-block:clamp(56px,9vw,120px);min-height:62vh;display:grid;align-items:center}
.hinweis-seite .wrap{position:relative;z-index:1}
.hinweis-karte{background:#fff;border-radius:22px;padding:clamp(28px,5vw,56px);max-width:720px;margin-inline:auto;text-align:center;box-shadow:var(--schatten)}
.hinweis-karte h1{font-size:clamp(24px,3vw,38px);text-transform:none;letter-spacing:-.01em}
.hinweis-karte p{color:var(--text);font-size:17px;max-width:54ch;margin-inline:auto}
.hinweis-icon{width:76px;height:76px;border-radius:50%;background:var(--akzent);color:#fff;display:grid;place-items:center;margin:0 auto 22px;box-shadow:0 16px 30px -14px rgba(44,142,210,.7)}
.hinweis-icon svg{width:38px;height:38px}
.hinweis-icon--fehler{background:var(--tinte)}
.hinweis-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Responsiv (Unterseiten) ------------------------------------------------- */
@media (max-width:1300px){
  .produkte{grid-template-columns:repeat(3,minmax(0,1fr))}
  .galerie{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .karten--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kunden-grid{grid-template-columns:1fr}
  .textseite--toc .textseite-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;border-left:0;padding:18px 22px;background:var(--nebel);border-radius:12px;margin-bottom:8px}
  .toc ol{columns:2;column-gap:24px}
}
@media (max-width:1000px){
  .kontakt-grid{grid-template-columns:1fr}
  .seitenkopf-grid,.seitenkopf--klein .seitenkopf-grid{grid-template-columns:1fr;gap:36px}
  .seitenkopf-bild{justify-self:start;max-width:560px;transform:rotate(-1deg)}
}
@media (max-width:900px){
  .produkte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kat-nav{top:84px}
  .kat-nav-inner{gap:12px}
  .preis-hinweis{display:none}
  .lang{display:inline-flex}
  .lang-hinweis{position:fixed;right:16px;left:16px;top:80px;width:auto}
  .header-actions{gap:8px}
  .kategorie{scroll-margin-top:130px}
  .lb-prev,.lb-next{top:auto;bottom:18px;transform:none}
  .lb-prev{left:calc(50% - 60px)}
  .lb-next{right:calc(50% - 60px)}
  .lb-figure img{max-height:70vh}
  .blobs i{filter:blur(50px)}
  .wellen{display:none}
}
@media (max-width:600px){
  .produkte{grid-template-columns:1fr 1fr;gap:12px}
  .produkt-body{padding:12px 13px 14px}
  .produkt h3{font-size:15px}
  .specs li{font-size:13.5px}
  .preis{font-size:13.5px;padding:.45em .75em;left:8px;bottom:8px}
  .preis small{font-size:10.5px}
  .karten--3{grid-template-columns:1fr}
  .formular{grid-template-columns:1fr}
  .kat-nav{top:72px}
  .seitenkopf h1{font-size:clamp(24px,6.6vw,32px)}
  .seitenkopf{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 18px));padding-bottom:calc(clamp(44px,6vw,80px) + 18px)}
  .seitenkopf-bild{transform:none;max-width:none}
  .text .box-grid{grid-template-columns:1fr}
  .toc ol{columns:1}
  .kat-head h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .blobs i,.wellen{animation:none}
  .produkt,.paket,.galerie img,.galerie a::after{transition:none}
}

/* Nachbesserungen ----------------------------------------------------------- */
.text{overflow-wrap:break-word}
.text h2,.text h3{overflow-wrap:anywhere}
/* Kategorien mit wenigen Artikeln: breite Karten (Bild links, Text rechts) */
.produkte--breit .produkt{grid-column:span 2;flex-direction:row;align-items:stretch}
.produkte--breit .produkt-bild{flex:0 0 46%;border-bottom:0;border-right:1px solid var(--linie)}
.produkte--breit .produkt-bild img{height:100%}
.produkte--breit .produkt-body{justify-content:center;padding:20px 22px}
.produkte--breit .produkt h3{font-size:18px}
@media (max-width:600px){
  .produkte--breit .produkt{grid-column:1/-1;flex-direction:column}
  .produkte--breit .produkt-bild{flex:none;border-right:0;border-bottom:1px solid var(--linie)}
}

/* Bilder: heller Platzhalter, weiches Einblenden beim Nachladen ------------ */
.produkt-bild,.galerie a,.paket-bild,.karte,.ref-grid img,.ueber img{background:var(--nebel)}
html.js img[loading="lazy"]{opacity:0;transition:opacity .45s ease}
html.js img[loading="lazy"].ist-geladen{opacity:1}
@media (prefers-reduced-motion:reduce){html.js img[loading="lazy"]{transition:none}}

/* Kontakt-Karte: Übersicht in Prophonic-Blau, Standort-Punkt in der Mitte ---- */
.karte-box{position:relative}
.karte-box iframe{filter:grayscale(1) sepia(.4) hue-rotate(170deg) saturate(2) brightness(1.03) contrast(.95)}
.karte-pin{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--akzent);border:3px solid #fff;box-shadow:0 0 0 6px rgba(44,142,210,.3),0 4px 12px rgba(0,0,0,.35);pointer-events:none;z-index:2}

/* Untermenü: unsichtbare Brücke über die 8-px-Lücke, damit der Hover beim Herunterfahren nicht abreißt */
.nav .has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
@media (max-width:900px){.nav .has-sub::after{display:none}}

/* Quadratisches Kopfbild (z. B. Party-Pakete): ganzes Foto statt Ausschnitt */
.seitenkopf-bild--quadrat{max-width:520px}
.seitenkopf-bild--quadrat img{aspect-ratio:1/1}

@media (max-width:430px){   /* schmale Handys: Kopfzeile darf nicht breiter als der Bildschirm werden */
  .header-inner{gap:8px}
  .site-header .wrap{width:calc(100% - 32px)}   /* Kopfzeile behält 16 px Rand */
  .logo svg,.logo img{height:38px}
  .header-actions{margin-left:0;gap:6px}
  .btn-phone{padding:.6em .9em}
  .lang button,.lang span{padding:.4em .35em}
}

/* ==========================================================================
   catchadeejay.com – zusätzliche Komponenten (Relaunch 2026)
   ========================================================================== */

/* Header: Anfrage-Button, Karten-Untermenü ------------------------------------- */
.btn-anfrage{padding:.7em 1.2em;font-size:15px}
.btn-phone{border-color:var(--linie);color:var(--tinte)}
.btn-phone:hover{border-color:var(--akzent);color:var(--akzent-dunkel)}
.nav .sub--karten{min-width:0;width:640px;display:none;grid-template-columns:1fr 1fr;gap:6px;padding:10px}
.has-sub[data-open="true"] .sub--karten,.has-sub:hover .sub--karten,.has-sub:focus-within .sub--karten{display:grid}
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}   /* unsichtbare Hover-Brücke zum Untermenü */
.sub--karten a{flex-direction:row;align-items:center;gap:14px;padding:8px}
.sub--karten img{width:96px;height:72px;object-fit:cover;border-radius:8px;flex:none}
.sub-text{display:flex;flex-direction:column;gap:2px}
.sub-text b{font-family:var(--display);font-weight:600;font-size:15px;color:var(--tinte)}
.sub-text span{font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--text-leise);line-height:1.35}
.nav .sub a:hover .sub-text b{color:var(--akzent-dunkel)}

/* Intro ------------------------------------------------------------------------- */
.intro-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.section-head--mitte{margin-inline:auto;text-align:center}
.section-head--mitte h2,.section-head--mitte p{text-wrap:balance}

/* Über-Block: Bildspalte -------------------------------------------------------- */
.ueber-bild{position:relative}
.ueber-bild::before{content:"";position:absolute;inset:auto -14px -14px 24px;height:60%;border-radius:var(--radius);background:var(--akzent-hell-2);z-index:0}
.ueber-bild img{position:relative;z-index:1}

/* Pakete ------------------------------------------------------------------------ */
.pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:stretch}
.paket{position:relative;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:10px}
.paket--empfohlen{border-color:var(--akzent);box-shadow:0 18px 40px -22px rgba(25,111,164,.5)}
.paket-badge{position:absolute;top:-13px;left:24px;background:var(--akzent);color:#fff;font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:.35em .9em;border-radius:999px}
.paket h3{font-size:21px;margin:0}
.paket-fuer{margin:0;color:var(--text-leise);font-size:15.5px;min-height:3.2em}
.paket-preis{font-family:var(--display);font-weight:700;font-size:clamp(30px,3vw,38px);color:var(--tinte);margin:4px 0 6px;line-height:1;letter-spacing:-.02em}
.paket-preis small{font-size:15px;font-weight:500;color:var(--text-leise);letter-spacing:0;margin-right:.2em}
.haken{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;flex:1}
.haken li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.45}
.haken li::before{content:"";position:absolute;left:0;top:.22em;width:16px;height:16px;border-radius:50%;background:var(--akzent-hell-2)}
.haken li::after{content:"";position:absolute;left:5px;top:.45em;width:6px;height:3.5px;border-left:2px solid var(--akzent-dunkel);border-bottom:2px solid var(--akzent-dunkel);transform:rotate(-45deg)}
.paket .btn{justify-content:center}
.pakete-hinweis{margin:22px 0 0;text-align:center;color:var(--text-leise);font-size:15px}

/* Dunkler Block: DJs ------------------------------------------------------------- */
.section--dunkel{background:var(--tinte);color:#cfd6dc;position:relative;overflow:hidden}
.section--dunkel .wrap{position:relative;z-index:1}
.section--dunkel h2,.section--dunkel h3{color:#fff}
.section--dunkel .section-head p{color:#aab4bd}
.section--dunkel .eyebrow{color:#6fc0f2}
.blobs--dunkel i{opacity:.45}
.blobs--dunkel .b1{background:radial-gradient(circle at 40% 40%,#196fa4 0%,rgba(25,111,164,0) 66%);top:-50%}
.blobs--dunkel .b2{background:radial-gradient(circle at 50% 50%,#3b3aa8 0%,rgba(59,58,168,0) 66%)}
.djs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.dj{display:flex;flex-direction:column;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,background .2s}
.dj:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);color:inherit}
.dj img{aspect-ratio:1;width:100%;object-fit:cover}
.dj-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.dj h3{font-size:19px;margin:0}
.dj h3 span{font-weight:500;color:#aab4bd;font-size:15px}
.dj-stil{margin:0;font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#6fc0f2}
.dj p{margin:0;font-size:15px;color:#cfd6dc}
.ref-head .section-head{margin-bottom:0}
.ref-head .btn{margin-bottom:4px}

/* Stimmen ----------------------------------------------------------------------- */
.stimmen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.stimme{margin:0;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:clamp(22px,2.6vw,30px);position:relative}
.stimme::before{content:"“";position:absolute;top:8px;right:22px;font-family:var(--display);font-weight:700;font-size:72px;line-height:1;color:var(--akzent-hell-2)}
.stimme blockquote{margin:0}
.stimme p{margin:0 0 14px;font-size:16.5px;line-height:1.6;color:var(--text)}
.stimme figcaption{font-family:var(--display);font-weight:600;font-size:14px;color:var(--akzent-dunkel)}
.stimme figcaption::before{content:"— "}

/* Videos (Click-to-Play) --------------------------------------------------------- */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.video{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.video-start{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:var(--tinte);cursor:pointer;overflow:hidden}
.video-start img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .3s,opacity .3s}
.video-start:hover img{transform:scale(1.03);opacity:1}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:var(--akzent);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.6);transition:background .2s,transform .2s}
.play svg{width:36px;height:36px;margin-left:4px}
.video-start:hover .play{background:var(--akzent-dunkel);transform:translate(-50%,-50%) scale(1.06)}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.video-body{padding:18px 22px 20px}
.video-body h3{font-size:19px;margin-bottom:.3em}
.video-body p{margin:0;color:var(--text-leise);font-size:15.5px}
.video-hinweis{margin-top:8px!important;font-size:13px!important}

/* Referenzen-Galerie + Kunden ----------------------------------------------------- */
.ref-grid a{display:block;border-radius:10px;overflow:hidden}
.ref-grid img{transition:transform .3s}
.ref-grid a:hover img{transform:scale(1.04)}
.kunden{margin:26px 0 0;font-size:15px;color:var(--text-leise);line-height:1.7}
.kunden b{color:var(--tinte);font-weight:700}

/* Footer-Ergänzungen --------------------------------------------------------------- */
.footer-text{margin:14px 0 0;font-size:14.5px;color:#9aa1ab;max-width:44ch;line-height:1.55}
.footer-claim{font-size:clamp(24px,2.6vw,34px)}
.footer-rechtliches{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-rechtliches li{margin:0}
.site-footer .fb-box{margin-top:18px}
.kontakt-liste svg{color:#4fb0f0}

/* Responsiv ----------------------------------------------------------------------- */
@media (max-width:1100px){
  .djs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pakete{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
}
@media (max-width:900px){
  .nav .sub--karten{width:auto;grid-template-columns:1fr;display:none}
  .has-sub[data-open="true"] .sub--karten{display:grid}
  .has-sub:hover .sub--karten{display:none}
  .has-sub[data-open="true"]:hover .sub--karten{display:grid}
  .has-sub::after{display:none}
  .btn-anfrage{display:none}
  .stimmen,.videos{grid-template-columns:1fr}
  .ueber-bild::before{display:none}
}
@media (max-width:600px){
  .djs{grid-template-columns:1fr 1fr}
  .dj-body{padding:12px 12px 14px}
  .dj h3{font-size:16px}
  .dj h3 span{display:none}
  .dj p{display:none}   /* Kurztext nur auf Desktop, bleibt im HTML */
  .intro-actions .btn{flex:1;justify-content:center}
}
@media (max-width:430px){
  .header-inner{gap:8px}
  .btn-phone{padding:.6em .7em}
  .logo img{height:38px}
}

/* Masonry-Galerie (Referenzen) --------------------------------------------- */
.masonry{columns:4;column-gap:14px}
.masonry a{display:block;break-inside:avoid;margin-bottom:14px;border-radius:10px;overflow:hidden;background:var(--nebel)}
.masonry img,html.js .masonry img[loading="lazy"]{width:100%;height:auto;display:block;transition:opacity .45s ease,transform .9s cubic-bezier(.2,.7,.2,1);will-change:transform;transform:scale(1.001)}
.masonry a:hover img{transform:scale(1.06)}
@media (max-width:1100px){.masonry{columns:3}}
@media (max-width:600px){.masonry{columns:2;column-gap:10px}.masonry a{margin-bottom:10px}}

/* Facebook-Banner (Bild der alten Seite, Link in neuem Tab) --------------- */
.fb-banner{display:block;max-width:190px;margin-top:18px;transition:transform .15s,opacity .15s}
.fb-banner:hover{transform:translateY(-2px);opacity:.92}
.fb-banner img{width:100%;height:auto}

/* ==========================================================================
   Disco: Scheinwerfer, Levelmeter (Runde 3)
   ========================================================================== */

/* Scheinwerfer von oben: drei farbige Lichtkegel, die langsam schwenken und pulsieren */
.spots{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.spots i{position:absolute;top:-12%;width:52vw;max-width:820px;height:120%;border-radius:50% 50% 45% 45%;filter:blur(70px);opacity:.3;transform-origin:50% 0;animation:schwenken 6s ease-in-out infinite alternate,leuchten 2.8s ease-in-out infinite alternate;mix-blend-mode:multiply}
.spots .s1{left:2%;background:radial-gradient(ellipse at 50% 0%,#fff0a0 0%,rgba(255,240,160,.5) 30%,rgba(255,240,160,0) 68%)}
.spots .s2{left:34%;background:radial-gradient(ellipse at 50% 0%,#2fd3ff 0%,rgba(47,211,255,.5) 30%,rgba(47,211,255,0) 68%);animation-delay:-5s,-2s;animation-duration:11s,4.5s}
.spots .s3{left:64%;background:radial-gradient(ellipse at 50% 0%,#fff0a0 0%,rgba(255,240,160,.5) 30%,rgba(255,240,160,0) 68%);animation-delay:-9s,-4s;animation-duration:8s,3.4s}
.spots .s4{left:82%;background:radial-gradient(ellipse at 50% 0%,#2fd3ff 0%,rgba(47,211,255,.5) 30%,rgba(47,211,255,0) 68%);animation-delay:-3s,-1s;animation-duration:10s,4.8s}
@keyframes schwenken{0%{transform:rotate(-9deg) translateX(-6%)}100%{transform:rotate(9deg) translateX(6%)}}
@keyframes leuchten{0%{opacity:.18}100%{opacity:.36}}
.section--nebel.hat-spots,.section.hat-spots{position:relative}
.hat-spots>.wrap{position:relative;z-index:1}
.hero .spots i{mix-blend-mode:overlay;opacity:.2;filter:blur(70px)}
.hero .spots{z-index:1}
.hero .hero-controls{z-index:3}
.cta .spots i{mix-blend-mode:screen;opacity:.3}

/* Levelmeter (bunt, leicht gedreht) */
.eq{position:absolute;left:-18px;bottom:-20px;z-index:2;display:flex;align-items:flex-end;gap:5px;height:64px;padding:14px 16px;background:#fff;border-radius:16px;box-shadow:0 20px 40px -18px rgba(0,0,0,.6);transform:rotate(2deg)}
.eq i{display:block;width:6px;border-radius:3px;height:40%;background:linear-gradient(180deg,var(--akzent),var(--akzent-dunkel));transform-origin:bottom;animation:eq 1.15s ease-in-out infinite alternate}
.eq i:nth-child(1){animation-delay:-.2s;height:35%}
.eq i:nth-child(2){animation-delay:-.7s;height:80%}
.eq i:nth-child(3){animation-delay:-.4s;height:55%}
.eq i:nth-child(4){animation-delay:-.95s;height:100%}
.eq i:nth-child(5){animation-delay:-.1s;height:65%}
.eq i:nth-child(6){animation-delay:-.6s;height:45%}
.eq i:nth-child(7){animation-delay:-.3s;height:85%}
@keyframes eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.eq--cta{left:auto;right:clamp(16px,4vw,60px);bottom:-22px;transform:rotate(-3deg)}
.cta{overflow:visible}

@media (max-width:900px){
  .spots i{width:70vw;opacity:.35}
  .eq{left:auto;right:-6px;bottom:-14px;height:52px;padding:10px 12px}
  .eq--cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .spots i,.eq i{animation:none}
}

/* Slider-Untertitel: feste Zeilen auf großen Bildschirmen */
.slide-copy p .zeile{display:inline}
@media (min-width:901px){.slide-copy p:has(.zeile){max-width:none}.slide-copy p .zeile{display:block;white-space:nowrap}}
/* H1 in der Einleitung: Platz für den Schwung des „D“ (ss03), der sonst links abgeschnitten wird */
.intro h1{padding-left:.55em}
@media (max-width:600px){.intro h1{padding-left:.5em}}

/* Slider-Headlines: Weiß mit Overlay-Mischung (Bildfarbe drückt durch). Der Schlagschatten wird per JavaScript
   als Bild erzeugt und UNTER den Text gelegt (site.js, Abschnitt „Slider-Headline“) – so bleibt er vom Overlay
   unberührt. Ohne JavaScript greift ersatzweise ein einfacher Textschatten. */
.slide-copy h2{position:relative;color:#fff;opacity:1;mix-blend-mode:normal;font-weight:700;letter-spacing:-.02em;text-shadow:none}
.slide-copy h2 span{position:relative;z-index:1;mix-blend-mode:overlay;text-shadow:2px 2px 4px rgba(0,0,0,.6)}
.slide-copy h2.hat-schatten span{text-shadow:none}
.slide-copy .eyebrow,.slide-copy p{position:relative;z-index:1}

/* ==========================================================================
   Unterseiten catchadeejay.com (Phase 3): Seitenkopf, Textblöcke, DJ-Profile, Preise, Partner, Kontakt
   ========================================================================== */

/* Seitenkopf: helle Fläche, Farbflächen wie im Intro der Startseite, Keil unten ---------- */
.kopf{position:relative;z-index:1;overflow:hidden;background:linear-gradient(180deg,#e9f2f9 0%,#f3f7fa 100%);padding-block:clamp(28px,4vw,48px) calc(clamp(40px,6vw,72px) + 3vw);clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 3vw));margin-bottom:-3vw}
.kopf .blobs{z-index:0}
.kopf+.section{padding-top:calc(clamp(52px,8vw,88px) + 3vw)}
@media (max-width:900px){.kopf+.section{padding-top:calc(clamp(52px,8vw,88px) + 18px)}}
.kopf-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.kopf--text .kopf-grid{grid-template-columns:minmax(0,1fr)}
.kopf--text .kopf-text{max-width:900px}
.kopf .brotkrumen{margin-bottom:26px}
.kopf .brotkrumen li{color:var(--text-leise)}
.kopf .brotkrumen a{color:var(--text-leise)}
.kopf .brotkrumen a:hover{color:var(--tinte)}
.kopf .brotkrumen span[aria-current]{color:var(--tinte)}
.kopf h1{font-size:clamp(40px,4.6vw,64px);padding-left:.55em;margin:.15em 0 .35em}
.kopf-sub{font-size:clamp(20px,2vw,26px);font-weight:600;color:var(--tinte);margin:0 0 .7em;max-width:30ch}
.kopf .lead{max-width:62ch}
.kopf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:22px}
.kopf-tel{display:inline-flex;align-items:center;gap:.5em;color:var(--tinte);text-decoration:none;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.01em}
.kopf-tel svg{width:20px;height:20px;color:var(--akzent)}
.kopf-tel:hover{color:var(--akzent-dunkel)}
.kopf-bild{position:relative;margin:0;justify-self:end;width:100%;max-width:620px;transform:rotate(-1.5deg)}
.kopf-bild::before{content:"";position:absolute;inset:auto -14px -14px 28px;height:58%;border-radius:var(--radius);background:var(--akzent-hell-2);z-index:0;transform:rotate(2deg)}
.kopf-bild img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 34px 70px -34px rgba(15,79,120,.55)}
.kopf-bild--quadrat{max-width:520px}
.kopf-bild--quadrat img{aspect-ratio:1}
.kopf-bild--breit img{aspect-ratio:16/9}
.kopf-bild .eq{left:-16px;bottom:-16px}

/* Einleitung: Text + Vorteils-Karte -------------------------------------------------------- */
.einleitung{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:clamp(28px,5vw,72px);align-items:start}
.einleitung-text p{max-width:70ch}
.einleitung-text p:first-child{font-size:clamp(17.5px,1.35vw,19.5px)}
.vorteile{background:var(--nebel);border-radius:18px;padding:clamp(22px,2.8vw,32px);border:1px solid var(--linie)}
.vorteile .eyebrow{margin-bottom:.8em}
.haken--gross{margin:0;gap:12px}
.haken--gross li{font-size:16px;line-height:1.5}
.haken--zeilen{flex-direction:row;flex-wrap:wrap;gap:8px 24px;margin:4px 0 18px}
.haken--zeilen li{font-weight:700}

/* Bild-Text-Blöcke: Bild wahlweise rechts, Formate hoch/quadrat/breit -------------------- */
.ueber--bild-rechts .ueber-bild{order:2}
.ueber-bild--hoch img{aspect-ratio:4/5}
.ueber-bild--quadrat img{aspect-ratio:1}
.ueber-bild--breit img{aspect-ratio:16/9}
.ueber-bild--hoch{max-width:520px;justify-self:center}
.ueber-bild--quadrat{max-width:560px;justify-self:center}
.ueber h2{margin-bottom:.6em}
.ueber p{max-width:64ch}

/* DJ-Profile (dunkler Block) ---------------------------------------------------------------- */
.profile{display:flex;flex-direction:column;gap:clamp(28px,4vw,56px)}
.profil{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start;padding-top:clamp(28px,4vw,56px);border-top:1px solid rgba(255,255,255,.12);scroll-margin-top:110px}
.profil:first-child{padding-top:0;border-top:0}
.profil-foto{position:relative;max-width:260px}
.profil-foto img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.profil-foto .eq{left:auto;right:-12px;bottom:-14px;transform:rotate(-3deg) scale(.8)}
.profil-body h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:.5em}
.profil-body h2 span{font-weight:500;font-size:.62em;color:#aab4bd}
.profil-body p{color:#cfd6dc;max-width:70ch}
.profil-fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px;margin:22px 0 24px;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.12)}
.profil-fakten div{min-width:0}
.profil-fakten dt{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#6fc0f2;margin-bottom:6px}
.profil-fakten dd{margin:0;font-size:15px;color:#e3e8ec;line-height:1.5}
.profil-audio{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 18px;margin:0 0 22px;max-width:560px}
.profil-audio-titel{margin:0 0 10px;font-family:var(--display);font-weight:600;font-size:14px;color:#fff}
.profil-audio audio{width:100%;display:block}
.section--dunkel .btn-primary{background:var(--akzent)}
.stimme-anlass{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise);margin:0 0 10px}

/* Preise: Pakete mit Foto, FAQ ---------------------------------------------------------------- */
.pakete--mit-foto .paket{padding-top:0;overflow:hidden}
.paket-bild{margin:0 calc(-1*clamp(22px,2.6vw,32px)) 14px;background:#fff;border-bottom:1px solid var(--linie);display:grid;place-items:center;min-height:220px}
.paket-bild img{width:100%;max-height:300px;object-fit:contain}
.pakete--mit-foto .paket-badge{top:14px;left:auto;right:14px}
.paket{scroll-margin-top:110px}
.faq{max-width:78ch;display:flex;flex-direction:column;gap:10px}
.faq-item{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:0 22px}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{margin:0;font-size:17.5px}
.faq-item summary::after{content:"";flex:none;width:.6em;height:.6em;border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item p{margin:0 0 20px;color:var(--text);max-width:70ch}

/* Agentur: Zitat, Partner, Technik-Logo ------------------------------------------------------- */
.zitat{position:relative;background:var(--akzent-dunkel);color:#fff;border-radius:18px;padding:clamp(26px,3vw,40px);overflow:hidden}
.zitat::before{content:"“";position:absolute;top:-6px;right:20px;font-family:var(--display);font-weight:700;font-size:120px;line-height:1;color:rgba(255,255,255,.14)}
.zitat blockquote{margin:0}
.zitat p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(19px,1.7vw,23px);line-height:1.4;color:#fff;text-wrap:balance}
.zitat-von{margin:16px 0 0!important;font-family:var(--body)!important;font-weight:400!important;font-size:14px!important;color:#cfe8fb!important}
.partner-block{margin-top:clamp(24px,3vw,40px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--linie)}
.partner-h2{font-size:clamp(21px,2.2vw,27px);margin-bottom:.9em}
.partner-gruppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.partner-gruppe{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:20px 22px}
.partner-gruppe h3{font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-leise);margin-bottom:12px}
.partner-gruppe li{display:flex;flex-direction:column;gap:1px;padding:8px 0;border-top:1px solid var(--linie)}
.partner-gruppe li:first-child{border-top:0;padding-top:0}
.partner-rolle{font-size:13px;color:var(--text-leise)}
.partner-gruppe a{font-family:var(--display);font-weight:600;font-size:15.5px;text-decoration:none;color:var(--tinte)}
.partner-gruppe a:hover{color:var(--akzent-dunkel);text-decoration:underline}
.technik-partner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:center}
.technik-partner p{max-width:56ch;margin:0}
.technik-logo{display:block;justify-self:center;max-width:360px;width:100%;padding:24px 28px;background:#fff;border:1px solid var(--linie);border-radius:16px;transition:transform .15s,box-shadow .2s}
.technik-logo:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.technik-logo img{width:100%;height:auto}

/* Referenzen: Kundenlisten ----------------------------------------------------------------------- */
.kunden-grid{grid-template-columns:1fr 1fr}
.kunden-grid h2{font-size:22px;margin-bottom:.7em}
.kunden-grid .chips{display:flex}   /* auch auf dem Handy sichtbar (Intro-Chips sind dort ausgeblendet) */

/* Kontakt: Infokarte mit Bild ------------------------------------------------------------------- */
.info-karte--bild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:16px}
.feld-radio legend b{color:var(--akzent)}
.feld-radio label{margin-right:18px}

/* Textseiten: Storefront-H1 wie überall --------------------------------------------------------- */
.textkopf h1{font-size:clamp(38px,4vw,54px);padding-left:.55em}
.textkopf{background:linear-gradient(180deg,#eef5fa 0%,#fff 100%)}
.hinweis-karte h1{font-size:clamp(34px,3.6vw,46px);padding-left:.4em}

/* Responsiv --------------------------------------------------------------------------------------- */
@media (max-width:1100px){
  .partner-gruppen{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
  .kopf-grid{grid-template-columns:1fr;gap:32px}
  .kopf-bild{justify-self:start;max-width:520px;transform:rotate(-1deg)}
  .einleitung{grid-template-columns:1fr}
  .profil{grid-template-columns:1fr}
  .profil-foto{max-width:220px}
  .technik-partner{grid-template-columns:1fr}
  .technik-logo{justify-self:start}
}
@media (max-width:900px){
  .kopf-bild .eq,.profil-foto .eq,.ueber-bild .eq{left:auto;right:-6px;bottom:-14px}
  .kopf{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 18px));padding-bottom:calc(clamp(40px,6vw,72px) + 18px);margin-bottom:-18px}
  .ueber--bild-rechts .ueber-bild{order:0}
  .ueber-bild--hoch,.ueber-bild--quadrat{max-width:none;justify-self:stretch}
  .kunden-grid{grid-template-columns:1fr}
  .profil-fakten{grid-template-columns:1fr}
}
@media (max-width:600px){
  .kopf h1{font-size:40px;line-height:1.2;padding-left:.5em}
  .kopf-bild{transform:none;max-width:none}
  .kopf-bild::before{display:none}
  .partner-gruppen{grid-template-columns:1fr}
  .kunden-grid .chips{display:flex}
  .chips--klein li{white-space:normal}
  .feld-radio label{display:flex;margin:6px 0 0}
}

/* Unter der H1: Text etwas kleiner, mehr Abstand zur Überschrift (alle Seiten) */
.kopf h1,.textkopf h1,.intro h1,.hinweis-karte h1{margin-bottom:.8em}
.kopf .lead,.textkopf .lead,.intro .lead{font-size:clamp(16.5px,1.2vw,17.5px);line-height:1.6}
.kopf-sub{font-size:clamp(19px,1.8vw,23px);margin-bottom:.9em}

/* H1 überall linksbündig mit dem Text darunter (kein Einzug für den Schwung), Brotkrumen entfernt */
.intro h1,.kopf h1,.textkopf h1,.hinweis-karte h1{padding-left:0}
@media (max-width:600px){.intro h1,.kopf h1{padding-left:0}}
.kopf{overflow:visible}

/* Hauptnavigation: etwas größer und feiner (Lato statt Poppins), Telefon und Anfrage-Button weiter nach rechts */
.nav a,.nav button{font-family:var(--body);font-weight:400;font-size:17px;letter-spacing:.01em}
.nav .has-sub button::after{border-width:0 1.6px 1.6px 0}
@media (min-width:901px){
  .site-header .wrap{width:min(100% - 2*var(--gutter),1760px)}   /* Kopfzeile breiter als der Inhalt: Logo weiter links, Aktionen weiter rechts */
  .header-actions{margin-left:28px}
}
@media (max-width:900px){.nav a,.nav button{font-size:17px}}

/* Logo im Footer etwas größer */
.footer-logo svg,.footer-logo img{height:46px}

/* Seitenkopf ohne Foto (Kontakt): Text senkrecht mittig im Band */
.kopf--text{padding-block:calc(clamp(40px,6vw,72px) + 3vw)}

/* Kompakter Seitenkopf (Kontakt): flacher Block, damit das Formular schneller im Blick ist */
.kopf--kompakt{padding-block:clamp(30px,3.6vw,54px) calc(clamp(18px,2.2vw,28px) + 3vw)}
.kopf--kompakt .kopf-bild{max-width:520px}
.kopf--kompakt .kopf-bild img{aspect-ratio:16/10}
.kopf--kompakt .lead{max-width:56ch}
.kopf--kompakt + .section{padding-top:calc(clamp(26px,3vw,40px) + 3vw)}
@media (max-width:900px){
  .kopf--kompakt{padding-block:clamp(18px,2.2vw,30px) calc(clamp(18px,2.2vw,28px) + 18px)}
  .kopf--kompakt + .section{padding-top:calc(clamp(26px,3vw,40px) + 18px)}
}

/* Hauptnavigation weiter nach links: Menü direkt hinter dem Logo, Telefon und Anfrage-Button bleiben ganz rechts */
@media (min-width:901px){
  .nav{margin-left:clamp(28px,5vw,90px);margin-right:auto}
  .nav>ul{gap:8px}
  .header-actions{margin-left:24px}
}

/* Referenzen: Kundennamen etwas größer */
.kunden-grid .chips--klein li{font-size:16px;padding:.45em .9em}

/* Kopfzeile auf dem Desktop: Logo links, Navigation mittig, Telefon/Anfrage rechts */
@media (min-width:901px){
  .header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
  .nav{margin:0;justify-self:center}
  .nav>ul{gap:clamp(8px,1.3vw,22px)}
  .header-actions{margin-left:0;justify-self:end}
}

/* Slider-Headline ohne Mischeffekt: reines Weiß (data-klar) */
.slide-copy h2[data-klar] span{mix-blend-mode:normal}


/* 16. Referenzen: Kundenliste mit kleinem Anker-Icon (wie auf der alten Seite) */
.kunden-grid .chips--klein li{display:inline-flex;align-items:center;gap:8px;padding:.45em .95em .45em .6em}
.kunden-grid .chips--klein li::before{content:"";flex:0 0 21px;width:21px;height:21px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23196fa4' stroke='none'/%3E%3Ccircle cx='12' cy='7' r='1.7'/%3E%3Cpath d='M12 8.7v8.8'/%3E%3Cpath d='M8.9 11.1h6.2'/%3E%3Cpath d='M6.6 13.3a5.4 5.4 0 0 0 10.8 0'/%3E%3C/svg%3E") center/contain no-repeat}

/* 17. Slider: Überschriften minimal kleiner + abgeschwächter Overlay-Effekt (data-klar="halb") */
.slide-copy h2{font-size:clamp(29px,3.65vw,52px)}
@media (max-width:900px){
  .slide-copy h2{font-size:clamp(26px,7.7vw,34px)}
}
.slide-copy h2[data-klar="halb"] span{mix-blend-mode:overlay}
.slide-copy h2[data-klar="halb"]::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;color:#fff;opacity:.55;z-index:2;pointer-events:none}

/* 18. Kopfzeile Desktop: Telefonnummer und „Jetzt anfragen“ bleiben immer einzeilig.
   Die Navigation und alle Abstände schrumpfen stattdessen mit der Fensterbreite. */
@media (min-width:901px){
  .header-inner{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(8px,1.4vw,28px)}
  .logo{flex:0 0 auto}
  .nav{flex:1 1 auto;min-width:0;margin:0;display:flex;justify-content:center}
  .nav>ul{flex-wrap:nowrap;gap:clamp(0px,.9vw,18px)}
  .nav>ul>li>a,.nav>ul>li>button{white-space:nowrap;padding-inline:clamp(.25em,.6vw,.9em);font-size:clamp(13.5px,1.18vw,17px)}
  .header-actions{flex:0 0 auto;margin:0;gap:clamp(7px,.8vw,14px)}
  .header-actions .btn{white-space:nowrap;flex:0 0 auto}
  .btn-phone span{white-space:nowrap}
}

/* 19. Zwischen 901 und 1359 px passt die volle Hauptnavigation nicht mehr neben
   Telefonnummer und Anfrage-Button – dort greift schon das Klappmenü (Burger). */
@media (min-width:901px) and (max-width:1359px){
  .nav{flex:none;min-width:auto;display:none;position:absolute;left:0;right:auto;width:100%;top:100%;background:#fff;border-bottom:1px solid var(--linie);box-shadow:var(--schatten);padding:12px var(--gutter) 20px}
  .site-header[data-menu="open"] .nav{display:block}
  .nav>ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav>ul>li>a,.nav>ul>li>button{width:100%;justify-content:space-between;padding:.8em .9em;font-size:16px}
  .nav .sub{position:static;display:none;min-width:0;box-shadow:none;border:0;background:var(--nebel);margin-top:4px}
  .nav .sub--karten{width:auto;grid-template-columns:1fr;display:none}
  .nav .has-sub[data-open="true"] .sub{display:flex}
  .nav .has-sub:hover .sub{display:none}
  .nav .has-sub[data-open="true"]:hover .sub{display:flex}
  .nav .has-sub::after{display:none}
  .burger{display:flex}
  .header-actions{margin-left:auto}
}

/* 20. Kunden-Laufband auf der Startseite (löst die Textzeile „Unter anderem gebucht von“ ab).
   Die Kundenliste steht zweimal hintereinander; die Spur wandert genau um die halbe Breite
   nach links und springt dann unsichtbar zurück – dadurch läuft es endlos weiter. */
.laufband{margin-top:clamp(28px,3.4vw,46px);padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--linie)}
.laufband-fenster{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.laufband-titel{margin:0 0 14px;padding:0 var(--gutter);font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-leise)}
.laufband-spur{display:flex;width:max-content;animation:laufband 46s linear infinite}
.laufband-spur ul{display:flex;align-items:center;gap:clamp(22px,3vw,44px);margin:0;padding:0 clamp(11px,1.5vw,22px);list-style:none}
.laufband-spur li{display:flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--display);font-weight:600;font-size:clamp(16px,1.35vw,20px);color:var(--tinte)}
.laufband-spur li::before{content:"";flex:0 0 19px;width:19px;height:19px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23196fa4' stroke='none'/%3E%3Ccircle cx='12' cy='7' r='1.7'/%3E%3Cpath d='M12 8.7v8.8'/%3E%3Cpath d='M8.9 11.1h6.2'/%3E%3Cpath d='M6.6 13.3a5.4 5.4 0 0 0 10.8 0'/%3E%3C/svg%3E") center/contain no-repeat}
.laufband:hover .laufband-spur,.laufband:focus-within .laufband-spur{animation-play-state:paused}
@keyframes laufband{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .laufband-fenster{overflow-x:auto;scrollbar-width:none}
  .laufband-spur{animation:none}
  .laufband-spur ul[aria-hidden]{display:none}
}

/* 21. Mobile Feinschliff: größeres Logo, Telefon und Menü rechtsbündig, Slider-Bilder
   ohne Beschnitt (die Bilder sind quadratisch – der Slide ist es jetzt auch) und
   kleinere H1, damit die Schwünge der Schreibschrift nicht über den Rand laufen. */
@media (max-width:900px){
  .logo svg,.logo img{height:52px}
  .header-actions{margin-left:auto}
  .slide{aspect-ratio:1/1;height:auto;min-height:0;max-height:none}
  .hero-controls{display:none}   /* Slider-Striche auf dem Handy ausblenden – gewischt wird trotzdem */
  h1{font-size:clamp(25px,7.4vw,32px);line-height:1.25}
  .kopf h1,.intro h1,.textkopf h1,.hinweis-karte h1{font-size:clamp(25px,7.4vw,32px);padding-left:.16em;padding-right:.08em}
  .kopf--kompakt{padding-top:34px}
}