/* ==========================================================================
   DJ DEAN, Theme dj-dean (aus dem freigegebenen Prototyp, Stand 01.10.2026)
   Theme-Slug dj-dean, Prefix dd_. Kein Build-Step, kein Framework.
   Werte stammen aus den computed styles der Live-Seite (Elementor-Kit 10,
   Seite 53, Header 125, Footer 119). Breakpoints wie Elementor:
   Mobil <= 767px, Tablet <= 1200px.
   ========================================================================== */

/* ---------- 1. Fonts (lokal, WOFF2) ---------- */
/* Horizon / Horizon Outlined: (c) Fontense 2019. Web-Lizenz liegt vor (bestaetigt durch Daniel, 01.10.2026, siehe projekt.md). Lokal selbst gehostet. */
@font-face{font-family:"Horizon";src:url("../fonts/horizon.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Horizon Outlined";src:url("../fonts/horizon-outlined.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Space Grotesk (OFL), variabel 300 bis 700 */
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Space Mono (OFL) 400 / 700 */
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-400-latin-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Mono";src:url("../fonts/space-mono-700-latin-ext.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 2. Tokens ---------- */
:root{
  /* Farben (Elementor-Kit) */
  --c-red:#E40707;            /* primary / 8cbf2c0 */
  --c-bg:#161616;             /* secondary: Seitenhintergrund */
  --c-black:#000;             /* Header, Preloader */
  --c-white:#fff;             /* Headlines */
  --c-text:#E0E0E0;           /* Fliesstext (Kit body) */
  --c-text-dim:#CBCBCB;       /* Abschluss-Statement */
  --c-star:#EFAC00;           /* Rating-Sterne (Elementor Rating) */
  --c-acc:#0C0C0C;            /* FAQ geschlossen */
  --c-line:rgba(255,255,255,.14);   /* Kartenrahmen, Footer-Linie (Kit FFFFFF24) */
  --c-line-red:rgba(252,0,0,.3);    /* Label-Linie [01] ── */
  --c-line-grey:#434343;            /* Partner-Linien */
  --c-input-border:#69727D;
  --c-nav-pointer:#3F444B;
  --c-text-mute:#9A9A9A;            /* Quellenzeile Google-Karte */
  --c-red-hover:#C90606;            /* Senden-Button Hover */
  --c-red-text:#FF3B3B;             /* kleiner roter Text (<24px bzw. <18,66px fett): 5,12:1 auf #161616, 5,94:1 auf #000 (WCAG AA) */
  /* FWN-Credit (FWN-Standard, Verlauf) */
  --c-fwn-1:#9ccf92; --c-fwn-2:#6ab775; --c-fwn-3:#4fb373; --c-fwn-4:#21874a;
  --c-error:#FF8A8A;                /* Fehlertexte Formular */
  --c-error-border:#FF5A5A;         /* Rahmen ungueltiges Feld */
  --c-placeholder:rgba(255,255,255,.6);
  --c-insta-btn:#333;               /* „Mehr laden" */
  --c-insta-btn-hover:#444;
  --c-overlay:rgba(0,0,0,.75);      /* Verlaufsstart Booking-Overlay */

  /* Schriften */
  --ff-display:"Horizon","Space Grotesk",sans-serif;          /* nur Versalien-Glyphen */
  --ff-outline:"Horizon Outlined","Horizon","Space Grotesk",sans-serif;
  --ff-sans:"Space Grotesk",sans-serif;
  --ff-mono:"Space Mono",ui-monospace,monospace;

  /* Type-Scale (1:1 aus Live, Desktop) */
  --fs-hero:92.8px;      /* H1 DJ DEAN (Kit primary 5.8em) */
  --fs-outline:64px;     /* turn up now / Let's talk */
  --fs-h2-xl:54.4px;     /* what they say about me / asked questions (3.4em) */
  --fs-h2:40px;          /* About Dean, Events & Sounds (2.5em) */
  --fs-label-lg:25.6px;  /* [01] ── ABOUT, Name (Kit h5 1.6em) */
  --fs-card:22.4px;      /* Karten-Titel (1.4em) */
  --fs-faq:19.2px;       /* FAQ-Frage (1.2em) */
  --fs-label:17.6px;     /* [01] (Kit h6 1.1em) */
  --fs-nav:15.84px;      /* Navigation (.99em) */
  --fs-body:16px;
  --fs-mail:18px;
  --fs-small:14.4px;     /* CATEGORY: (.9em) */
  --lh-tight:1.1;
  --lh-body:1.5;

  /* Layout */
  --container:1300px;    /* Elementor-Kit boxed width (live), Tablet 1024 */
  --gutter:20px;
  --header-h:95px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-pointer:cubic-bezier(.58,.3,.005,1);

  /* Bild-Verhaeltnisse (gleiche Rolle = gleiches Verhaeltnis) */
  --ar-portrait:1000/1082;  /* About-Portrait (Original) */
  --ar-square:1/1;          /* Sound-Karten Desktop, Instagram-Kacheln */
  --ar-card-m:318/207;      /* Sound-Karten Mobil (live) */

  /* Ebenen */
  --z-hero:1; --z-sticky:100; --z-cards:110; --z-about-card:130;
  --z-header:1000; --z-burger:1500; --z-menu:2000; --z-preloader:9999;
}
@media (max-width:1200px){:root{--container:1024px;--fs-hero:72px;--fs-outline:56px;--fs-h2-xl:48px;--fs-h2:34px}}
@media (max-width:767px){:root{--fs-outline:40px;--fs-h2-xl:40px;--fs-h2:40px;--fs-label-lg:19.2px;--fs-label:16px;--fs-card:19.2px;--fs-faq:17.6px;--fs-mail:16px}}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--c-bg);overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
main,.dd-booking-wrap{overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--ff-sans);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.dd-icon{width:1em;height:1em;fill:currentColor;flex:none}
:focus-visible{outline:2px solid var(--c-red);outline-offset:3px}
.dd-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.dd-skip{position:absolute;left:12px;top:-60px;z-index:calc(var(--z-preloader) + 1);background:var(--c-red);color:var(--c-white);padding:10px 16px;font-weight:600;text-decoration:none;transition:top .2s}
.dd-skip:focus{top:12px}
.dd-container{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
@media (min-width:1341px){.dd-container{width:var(--container)}}
.dd-outline{font-family:var(--ff-outline);font-weight:600;text-transform:uppercase;line-height:var(--lh-tight);color:var(--c-white);font-size:var(--fs-outline)}
@media (min-width:768px){.dd-only-mobile{display:none!important}}
@media (max-width:767px){.dd-only-desktop{display:none!important}}

/* ---------- 4. Entrance-Animationen (Elementor fadeInUp/Left/Right, zoomIn) ---------- */
.js [data-anim]{opacity:0}  /* nicht visibility: Inhalte bleiben fokussierbar und für Screenreader erreichbar (BFSG) */
.js [data-anim].is-in{opacity:1;animation-duration:1.25s;animation-fill-mode:both;animation-timing-function:ease}
.js [data-anim]:focus-within{opacity:1;transform:none;animation:none!important}  /* Tastatur: sofort sichtbar, main.js setzt zusätzlich is-in */
.js [data-anim="fadeInUp"].is-in{animation-name:dd-fadeInUp}
.js [data-anim="fadeInLeft"].is-in{animation-name:dd-fadeInLeft}
.js [data-anim="fadeInRight"].is-in{animation-name:dd-fadeInRight}
.js [data-anim="zoomIn"].is-in{animation-name:dd-zoomIn}
@keyframes dd-fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
@keyframes dd-fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes dd-fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@keyframes dd-zoomIn{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.js [data-anim]{opacity:1}.js [data-anim].is-in{animation:none}}

/* ---------- 5. Preloader (nur 1. Besuch je Sitzung) ---------- */
.dd-preloader{display:none}
.dd-preload .dd-preloader{position:fixed;inset:0;z-index:var(--z-preloader);display:flex;align-items:center;justify-content:center;background:var(--c-black);transition:opacity .35s ease}
.dd-preloader__logo{width:220px;opacity:0;transform:scale(.96);animation:dd-logo .45s ease forwards}
.dd-preloader.is-done{opacity:0;pointer-events:none}
@keyframes dd-logo{to{opacity:1;transform:scale(1)}}
@media (max-width:768px){.dd-preloader__logo{width:140px}}
@media (prefers-reduced-motion:reduce){.dd-preloader__logo{animation:none;opacity:1;transform:none}}

/* ---------- 6. Header ---------- */
.dd-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);height:var(--header-h);background:var(--c-black)}
.dd-header__bar{height:100%;padding-right:64px}
.dd-header__inner{display:flex;height:100%;width:min(1300px,100%);margin-inline:auto}
.dd-nav{display:flex;align-items:center}
.dd-nav--left{flex:0 0 44.62%;margin-right:-3vw;justify-content:flex-end}
.dd-nav--right{flex:1 1 0;margin-left:-3vw;justify-content:flex-start}
.dd-nav ul{display:flex}
.dd-nav a{position:relative;display:block;padding:13px 20px;font-family:var(--ff-display);font-weight:600;font-size:var(--fs-nav);line-height:var(--lh-tight);text-transform:uppercase;color:var(--c-red-text);text-decoration:none;transition:color .4s}
.dd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c-nav-pointer);opacity:0;transform:scaleX(.6);transition:opacity .3s var(--ease-pointer),transform .3s var(--ease-pointer)}
.dd-nav a[aria-current="location"]::after{opacity:1;transform:none}
@media (hover:hover){.dd-nav a:hover::after{opacity:1;transform:none}}
.dd-header__logo{flex:0 0 24.3%;display:flex;align-items:center;justify-content:center;padding:10px}
.dd-header__video{width:155.5px;height:87.5px;object-fit:cover;background:var(--c-black)}
.dd-header-spacer{height:60px}
@media (max-width:1200px){.dd-nav a{padding:13px 14px;font-size:14px}}

/* „HOME" (live: Seitentitel, vom Hero ueberdeckt) */
.dd-pagetitle{position:absolute;top:68px;left:max(10px,calc(50% - 570px));font-family:var(--ff-sans);font-weight:600;font-size:var(--fs-hero);line-height:var(--lh-tight);text-transform:uppercase;color:var(--c-white);pointer-events:none;user-select:none}

/* Mobil-Menue (Burger + Popup) */
.dd-burger,.dd-menu{display:none}
@media (max-width:767px){
  .dd-header{position:relative;margin-top:20px;height:103px;z-index:3;padding:10px}
  .dd-header__bar{padding:0}
  .dd-header__inner{width:100%}
  .dd-nav{display:none}
  .dd-header__logo{flex:1 1 auto;padding:5px 0}
  .dd-header__video{width:auto;height:96px;aspect-ratio:16/9}
  .dd-header-spacer{height:40px}
  .dd-pagetitle{top:171px;left:10px;font-size:62.4px}

  .dd-burger{display:flex;position:fixed;left:50%;bottom:12px;z-index:var(--z-burger);width:100px;height:74px;margin-left:-50px;align-items:center;justify-content:center;color:var(--c-red);font-size:40px;transform:translateY(calc(-1 * var(--vv-inset,0px)))}
  .dd-burger .dd-icon{width:40px;height:40px}
  /* Popup als Flex-Spalte: Logo oben, Menüpunkte mittig im freien Bereich bis zum Schließen-Button (v1.0.9). Der Button liegt
     seit v1.0.8 fix exakt dort, wo der Menü-Button im geschlossenen Zustand sitzt (gleiche Regeln wie .dd-burger). Unten
     86 px (12 + 74) Innenabstand plus 24 px Rand der Liste, damit sie den Button nie überdeckt; zu niedrig: Popup scrollt. */
  .dd-menu:not([hidden]){display:flex;flex-direction:column;align-items:center;position:fixed;inset:0;z-index:var(--z-menu);overflow-y:auto;overscroll-behavior:contain;padding:47px 20px calc(86px + var(--vv-inset,0px));background:var(--c-bg);animation:dd-menu-in .35s var(--ease-out)}  /* deckend (v1.0.9), kein backdrop-filter */
  .dd-menu__logo{flex:none;display:block;width:98px}
  .dd-menu nav{flex:1 0 auto;width:100%;margin:24px 0;display:flex;flex-direction:column;justify-content:center}  /* Liste mittig zwischen Logo und X (v1.0.9); zu wenig Höhe: oben beginnend, Popup scrollt */
  .dd-menu__list{display:flex;flex-direction:column;align-items:center;gap:45px}
  .dd-menu__list a{display:block;font-family:var(--ff-display);font-weight:300;font-size:25px;line-height:20px;text-transform:uppercase;color:var(--c-red);text-decoration:none;padding:0 20px}
  .dd-menu__close{position:fixed;left:50%;bottom:12px;z-index:1;width:100px;height:74px;margin-left:-50px;display:flex;align-items:center;justify-content:center;color:var(--c-red);transform:translateY(calc(-1 * var(--vv-inset,0px)))}
  .dd-menu--pointer :focus-visible{outline:none}  /* per Tippen geöffnet: kein Fokusrahmen um „About“ (wirkt wie Markierung); ab der ersten Taste wieder sichtbar */
  .dd-menu__close .dd-icon{width:30px;height:30px}
  @media (max-height:600px){.dd-menu:not([hidden]){padding-top:32px}.dd-menu__list{gap:34px}}
}
@keyframes dd-menu-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dd-menu:not([hidden]){animation:none}}

/* Hintergrundbilder als echte <img>/<picture> (im Theme dd_bild()), Overlay per ::before, Inhalt darueber */
.dd-bgmedia{position:absolute;inset:0;z-index:0;overflow:hidden}
.dd-bgmedia img{width:100%;height:100%;object-fit:cover;object-position:center}

/* ---------- 7. Buttons (Plus-Addons Button Style 4) ---------- */
.dd-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--ff-display);font-weight:400;font-size:16px;line-height:25px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;background:var(--c-white);color:var(--c-black);transition:background .15s ease-in-out,color .15s ease-in-out}
.dd-btn__icon{width:25px;height:16px;padding:0 5px;margin-left:10px}
.dd-btn::after{content:attr(data-hover);content:attr(data-hover) / "";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--c-bg);color:var(--c-white);transform:translateY(100%);transition:transform .3s}
.dd-btn:focus-visible::after{transform:translateY(0)}
@media (hover:hover){.dd-btn:hover::after{transform:translateY(0)}}
.dd-btn:active{transform:scale(.98)}
.dd-btn--hero{padding:34px 60px;border:1px solid var(--c-white)}
.dd-btn--white{padding:15px 30px;color:var(--c-bg)}
.dd-btn--underline{text-decoration:underline;text-underline-offset:2px}
@media (max-width:1200px){.dd-btn--hero{padding:34px 50px}}

/* ---------- 8. Hero (Desktop/Tablet) ---------- */
.dd-hero{position:relative;z-index:var(--z-hero);margin-top:-24px;min-height:var(--vph,100svh);background:var(--c-bg)}
.dd-hero::before{content:"";position:absolute;inset:0;z-index:1;background:var(--c-bg);opacity:.25;pointer-events:none}
.dd-hero__content{position:relative;z-index:2;display:flex;gap:20px;padding-top:calc(185px + 15vw)}
.dd-hero__text{flex:0 0 60%}
.dd-hero__title{padding-top:4vw;font-family:var(--ff-outline);font-weight:600;font-size:var(--fs-hero);line-height:var(--lh-tight);text-transform:uppercase;color:var(--c-white)}
.dd-hero__claim{max-width:656px;margin-top:20px;margin-bottom:8vw;font-family:var(--ff-mono);color:var(--c-white)}
.dd-hero__cta{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:0 21px 8vw 0}
@media (max-width:1200px){.dd-hero__content{padding-top:calc(150px + 15vw)}.dd-hero__text{flex-basis:62%}}
/* Mobil: Desktop-Hero ausgeblendet (live display:none). H1 bleibt fuer Screenreader/SEO im DOM (visually hidden). */
@media (max-width:767px){
  .dd-hero{position:absolute!important;top:0;left:0;width:1px;height:1px;min-height:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;background:none}
  .dd-hero::before,.dd-hero__claim,.dd-hero__cta{display:none}
  .dd-hero__content{display:block;width:auto;padding:0}
}

/* Hero Mobil */
.dd-hero-m{display:none}
@media (max-width:767px){
  .dd-hero-m{display:block;position:relative;z-index:var(--z-hero);margin-top:-103px;padding:100px 20px 53px;background:var(--c-bg)}
  .dd-hero-m::before{content:"";position:absolute;inset:0;z-index:1;background:var(--c-black);opacity:.43;pointer-events:none}
  .dd-hero-m__col{position:relative;z-index:2;min-height:494px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:100px;text-align:center}
  .dd-hero-m__title{max-width:315px;font-size:40px}
  .dd-hero-m__text{font-family:var(--ff-mono);color:var(--c-white);margin:25px 0 14px}
  .dd-hero-m__col > div{margin-top:37px}
}

/* ---------- 9. Titlebar + Label ([01] ── ABOUT) ---------- */
.dd-titlebar__inner,.dd-titlebar{position:relative}
.dd-titlebar__title{display:flex;justify-content:space-between;align-items:center;font-family:var(--ff-display);font-weight:600;font-size:var(--fs-h2);line-height:var(--lh-tight);text-transform:uppercase;color:var(--c-white)}
.dd-label{display:flex;align-items:center;gap:20px;font-family:var(--ff-sans);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-tight);text-transform:uppercase;color:var(--c-red-text)}
.dd-label__line{flex:1 1 auto;height:1px;background:var(--c-line-red)}
.dd-label__name--lg{font-size:var(--fs-label-lg);color:var(--c-red)} /* >=24px: Grossschrift, Originalrot */
@media (max-width:767px){.dd-label__name--lg{color:var(--c-red-text)}}

/* Titlebar Desktop/Tablet: Spalten + Label in der Mitte. Sticky nur Desktop (>1200), auf Tablet statisch (sonst verdeckt Karte/Stapel die Woerter) */
@media (min-width:768px){
  .dd-titlebar--sticky{padding:250px 0 40px}
  .dd-titlebar--sounds{padding-bottom:0}
  .dd-titlebar--sticky .dd-label{position:absolute;top:0;bottom:0;margin:auto 0;height:44px}
  .dd-titlebar--about .dd-titlebar__a,.dd-titlebar--about .dd-titlebar__b{flex:0 0 29.31%}
  .dd-titlebar--about .dd-titlebar__a{padding-left:50px;margin-left:-2vw}
  .dd-titlebar--about .dd-titlebar__b{padding-right:50px;text-align:right}
  .dd-titlebar--about .dd-label{left:30.77%;width:38.4%;padding:0 30px 0 50px;top:0;bottom:auto}
  .dd-titlebar--sounds .dd-titlebar__a,.dd-titlebar--sounds .dd-titlebar__b{flex:0 0 28.6%}
  .dd-titlebar--sounds .dd-titlebar__a{margin-left:-2vw}
  .dd-titlebar--sounds .dd-titlebar__b{text-align:right;margin-right:-6vw;white-space:nowrap}
  .dd-titlebar--sounds .dd-label{left:30.2%;width:39.6%;padding:0 30px;top:250px;bottom:auto}
}
@media (min-width:1201px){
  .dd-titlebar--sticky{position:sticky;top:0;z-index:var(--z-sticky)}
}
/* „EVENTS & SOUNDS" Desktop: Woerter nie angeschnitten und nie unter dem Karten-Stapel.
   1201 bis 1399: gestapelt und statisch (wie Tablet). Ab 1400: nebeneinander und sticky wie live,
   Schrift skaliert so, dass „& SOUNDS" rechts neben den 845px-Stapel passt (bis 40px),
   Aussenrand auf mind. 20px Abstand zur sichtbaren Kante begrenzt (100vw inkl. ~15px Scrollbalken). */
@media (min-width:1201px) and (max-width:1399px){
  .dd-titlebar--sounds.dd-titlebar--sticky{position:relative;padding:120px 0 0}
  .dd-titlebar--sounds .dd-titlebar__title{flex-direction:column;gap:66px;text-align:center}
  .dd-titlebar--sounds .dd-titlebar__a,.dd-titlebar--sounds .dd-titlebar__b{flex:none;padding:0;margin:0;text-align:center}
  .dd-titlebar--sounds .dd-label{left:0;width:100%;top:184px;bottom:auto;height:21px;padding:0}
}
@media (min-width:1400px){
  .dd-titlebar--sounds .dd-titlebar__title,.dd-titlebar--about .dd-titlebar__title{min-height:44px;font-size:min(var(--fs-h2), calc((100vw - 920px) / 15.25))} /* Freigabe 01.10.: ABOUT / DEAN gleich skaliert */
  .dd-titlebar--sounds .dd-titlebar__a{margin-left:max(-2vw, calc((100% - 100vw) / 2 + 28px))}
  .dd-titlebar--sounds .dd-titlebar__b{margin-right:max(-6vw, calc((100% - 100vw) / 2 + 28px))}
}
@media (max-width:1200px) and (min-width:768px){
  .dd-titlebar--sticky{padding:120px 0 40px}
  .dd-titlebar--about{margin-top:0}
  .dd-titlebar--about .dd-titlebar__a{padding-left:20px;margin-left:0}
  .dd-titlebar--about .dd-titlebar__b{padding-right:20px}
  .dd-titlebar--sounds .dd-titlebar__a{margin-left:0}
  .dd-titlebar--sounds .dd-titlebar__b{margin-right:0}
  .dd-titlebar--sounds .dd-label{top:120px}
  .dd-titlebar--about .dd-label,.dd-titlebar--sounds .dd-label{padding:0 10px}
}
/* Schmales Tablet (768 bis 1023): Woerter gestapelt wie Mobil, damit nichts kollidiert */
@media (min-width:768px) and (max-width:1023px){
  .dd-titlebar--sticky .dd-titlebar__title{flex-direction:column;gap:66px;text-align:center}
  .dd-titlebar--sticky .dd-titlebar__a,.dd-titlebar--sticky .dd-titlebar__b{flex:none;padding:0;margin:0;text-align:center}
  .dd-titlebar--about .dd-label{left:0;width:100%;top:64px;bottom:auto;height:21px;padding:0}
  .dd-titlebar--sounds .dd-label{left:0;width:100%;top:184px;bottom:auto;height:21px;padding:0}
}
/* Mobil: gestapelt ABOUT / [01] ── ABOUT / DEAN */
@media (max-width:767px){
  .dd-titlebar__title{flex-direction:column;gap:66px;text-align:center}
  .dd-titlebar .dd-label{position:absolute;left:0;right:0;top:64px;height:21px}
  .dd-label__num{min-width:77px}
  .dd-label__name{min-width:77px;text-align:right}
}

/* ---------- 10. About ---------- */
.dd-about{position:relative;padding-bottom:50px;background:var(--c-bg)}
.dd-titlebar--about{margin-top:-23px}
.dd-about__card{position:relative;width:456px;max-width:100%;margin:20px auto 0;transform:translateX(10px);background:var(--c-bg);z-index:var(--z-about-card)}
@media (min-width:768px){.dd-about__card{position:sticky;top:0}}
.dd-about__media img{width:410px;max-width:90%;margin-inline:auto;aspect-ratio:var(--ar-portrait);object-fit:cover}
.dd-about__text{width:410px;max-width:100%;margin:40px auto 0;padding-bottom:66px;font-family:var(--ff-mono);color:var(--c-white);text-align:center}
@media (max-width:767px){
  .dd-about{margin-top:35vw;padding:30px 20px 50px}
  .dd-titlebar--about{margin:0 0 56px}
  .dd-about__card{width:100%;margin:0;transform:none}
  .dd-about__media img{width:90%}
  .dd-about__text{width:100%;margin-top:40px;padding-bottom:56px}
}

/* ---------- 11. Instagram-Platzhalter (Smash-Balloon-Struktur, im CI) ---------- */
.dd-insta{margin:6vw 0 calc(13vw + 20px)}
.dd-insta__head{display:flex;align-items:center;gap:20px;padding:12px 0}
.dd-insta__avatar{flex:none;width:80px;height:80px;border-radius:50%;overflow:hidden}
.dd-insta__avatar img{width:100%;height:100%;object-fit:cover}
.dd-insta__name{font-family:var(--ff-sans);font-weight:600;font-size:20px;line-height:28px;color:var(--c-white);text-transform:uppercase}
.dd-insta__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px 0}
.dd-insta__grid a{display:block;overflow:hidden}
.dd-insta__grid img{width:100%;aspect-ratio:var(--ar-square);object-fit:cover;transition:transform .7s var(--ease-out)}
@media (hover:hover){.dd-insta__grid a:hover img{transform:scale(1.04)}}
.dd-insta__actions{display:flex;justify-content:center;gap:8px;padding-top:5px}
.dd-insta__more,.dd-insta__follow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;font-family:var(--ff-sans);font-size:13px;line-height:19.5px;color:var(--c-white);text-decoration:none;transition:background .2s,color .2s}
.dd-insta__more{background:var(--c-insta-btn)}
@media (hover:hover){.dd-insta__more:hover{background:var(--c-insta-btn-hover)}}
.dd-insta__follow{background:var(--c-red)}
@media (hover:hover){.dd-insta__follow:hover{background:var(--c-white);color:var(--c-red)}}
.dd-insta__follow .dd-icon{width:15px;height:15px}
@media (max-width:767px){
  .dd-insta{margin:38px 0 0;padding:10px 10px 19px}
  .dd-insta .dd-container{width:100%}
  .dd-insta__head{gap:16px;padding:6px 0}
  .dd-insta__avatar{width:50px;height:50px}
  .dd-insta__name{font-size:17px}
  .dd-insta__grid{grid-template-columns:1fr}
  .dd-insta__grid li:nth-child(n+2){display:none}
  .dd-insta__actions{padding:5px 0 0}
  .dd-insta__more,.dd-insta__follow{font-size:13px;padding:8px 14px}
}

/* ---------- 12. CTA „turn up now" / „Let's talk" ---------- */
.dd-cta{position:relative;background:var(--c-bg)}
.dd-cta::before{content:"";position:absolute;inset:0;z-index:1;background:var(--c-black);opacity:.43;pointer-events:none}
.dd-cta__inner{position:relative;z-index:2;padding-bottom:70px}
.dd-cta__col{display:flex;flex-direction:column;align-items:flex-start;width:635px;max-width:100%}
.dd-cta__title{max-width:470px;margin-top:100px}
.dd-cta__text{max-width:540px;margin:25px 0 14px;font-family:var(--ff-mono);color:var(--c-white)}
.dd-cta__btn{margin:20px 0 61px}
@media (max-width:767px){
  .dd-cta{margin-top:35vw;padding:0 20px}
  .dd-cta__inner{width:100%;padding:100px 0 53px}
  .dd-cta__col{width:100%;align-items:center;text-align:center}
  .dd-cta__title{max-width:315px;margin-top:0}
  .dd-cta__text{margin:20px 0 14px}
  .dd-cta__btn{margin:30px 0 45px}
}

/* ---------- 13. Reviews ---------- */
.dd-reviews{margin-top:4vw;padding:calc(20px + 8vw) 0 50px}
.dd-label--row{padding:10px}
.dd-label--row .dd-label__num{min-width:101px}
.dd-label--row .dd-label__name{min-width:131px;text-align:right}
.dd-reviews__grid{display:grid;grid-template-columns:minmax(0,404fr) minmax(0,408fr) minmax(0,408fr);gap:40px;align-items:center;margin-top:40px}  /* bei 1300 px exakt 404/408/408 */
.dd-reviews__media{position:relative;align-self:stretch;min-height:236px;overflow:hidden}
.dd-reviews__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dd-reviews__quote{padding-top:19px}
.dd-reviews__title{font-family:var(--ff-display);font-weight:600;font-size:var(--fs-h2-xl);line-height:var(--lh-tight);text-transform:uppercase;color:var(--c-white)}
/* 1201 bis ca. 1340 px: Spalte schmaler als 408 px, „THEY SAY“ (390 px bei 54,4 px) skaliert mit; ab ca. 1340 px unverändert 54,4 px */
@media (min-width:1201px){.dd-reviews__title{font-size:min(var(--fs-h2-xl),calc((100vw - 135px) * .0457))}}
.dd-tabs{margin-top:20px}
.dd-tabs__tab{display:inline-block;margin-bottom:10px;padding:5px 20px 4px;border-bottom:3px solid var(--c-red);font-weight:500;color:var(--c-red-text)}
.dd-feature{padding-top:30px}
.dd-stars{display:flex;gap:8px;color:var(--c-star);font-size:16px;line-height:1}
.dd-stars .dd-icon{width:16px;height:16px}
.dd-feature__text{margin-top:20px;color:var(--c-white)}
.dd-feature__text p{margin-bottom:14.4px}
.dd-feature__by{display:flex;align-items:center;justify-content:space-between;margin-top:52px;padding-left:20px}
.dd-feature__name::before{content:"~"}
.dd-feature__name{font-weight:500;font-size:16px;line-height:17.6px;letter-spacing:.96px;text-transform:uppercase;color:var(--c-white)}
.dd-feature__mark{width:24px;height:24px;margin-right:10px}

/* Google-Bewertungen (eigenes CI-Modul) */
.dd-gr{min-width:0}
.dd-gr__viewport{overflow:hidden}
.dd-gr__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
@media (prefers-reduced-motion:no-preference){.dd-gr__track{scroll-behavior:smooth}}
.dd-gr__track::-webkit-scrollbar{display:none}
.dd-gr__slide{flex:0 0 100%;scroll-snap-align:start;display:flex}
.dd-review{flex:1;display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--c-line);background:var(--c-bg)}
.dd-review__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dd-review__name{font-weight:600;font-size:16px;line-height:1.3;color:var(--c-white)}
.dd-review__time{flex:none;font-family:var(--ff-mono);font-size:13px;line-height:1.3;color:var(--c-text-dim)}
.dd-review__body{font-size:15px;line-height:22px;color:var(--c-text)}
.dd-review__body p+p{margin-top:8px}
.dd-review__body.is-clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.dd-review__more{align-self:flex-start;font-size:13px;font-weight:500;color:var(--c-red-text);text-decoration:underline;text-underline-offset:3px}
.dd-review__source{margin-top:auto;font-family:var(--ff-mono);font-size:12px;line-height:1.4;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-mute)}
.dd-gr__nav{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.dd-gr__arrow{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--c-line);color:var(--c-white);transition:border-color .2s,color .2s}
.dd-gr__arrow .dd-icon{width:10px;height:16px}
@media (hover:hover){.dd-gr__arrow:hover{border-color:var(--c-red-text);color:var(--c-red-text)}}
.dd-gr__arrow:disabled,.dd-gr__arrow[aria-disabled="true"]{opacity:.35;cursor:default;border-color:var(--c-line);color:var(--c-white)}
.dd-gr__count{font-family:var(--ff-mono);font-size:14px;color:var(--c-text-dim)}
.dd-gr__summary{margin-top:22px;text-align:center}
.dd-stars--sm{justify-content:center;gap:6px;margin-bottom:10px}
.dd-stars--sm .dd-icon{width:14px;height:14px}
.dd-gr__score{font-size:14px;line-height:20px;color:var(--c-text)}
.dd-gr__score strong{font-weight:600;color:var(--c-white)}
.dd-gr__links{display:flex;justify-content:center;gap:24px;margin-top:12px}
.dd-gr__links a{font-weight:500;font-size:14px;line-height:20px;text-transform:uppercase;color:var(--c-red-text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s}
@media (hover:hover){.dd-gr__links a:hover{color:var(--c-white)}}
@media (max-width:1200px){
  .dd-reviews__grid{grid-template-columns:1fr 1fr;gap:40px}
  .dd-reviews__media{grid-column:1;grid-row:1}
  .dd-reviews__quote{grid-column:2;grid-row:1}
  .dd-gr{grid-column:1 / -1;grid-row:2;width:min(404px,100%);justify-self:center}
}
@media (max-width:767px){
  .dd-reviews{margin-top:0;padding:150px 0 50px}
  .dd-label--row .dd-label__num{min-width:48px}
  .dd-label--row .dd-label__name{min-width:116px}
  .dd-reviews__grid{display:flex;flex-direction:column;gap:40px;margin-top:39px}
  .dd-reviews__media{order:1;min-height:236px;width:100%}
  .dd-reviews__quote{order:2}
  .dd-gr{order:3;margin-top:30px}
  .dd-reviews__quote{padding-top:19px;text-align:center}
  .dd-tabs__tab{display:block}
  .dd-feature .dd-stars{justify-content:center}
  .dd-feature__by{flex-direction:column-reverse;gap:68px;padding-left:0;margin-top:51px}
  .dd-feature__mark{margin:0}
  .dd-gr{width:100%}
}

/* ---------- 14. Events & Sounds (CPT-Loop, --i = Index, gerade Eintraege gespiegelt) ---------- */
.dd-sounds{position:relative;margin-top:calc(20px - 6vw)}
.dd-sounds__inner{padding-bottom:50px}
.dd-sounds__stack{position:relative;z-index:var(--z-cards);width:845px;max-width:100%;margin:20px auto 0;display:flex;flex-direction:column;gap:20px}
.dd-sound{--i:0;position:relative;z-index:calc(var(--i) + 1);display:flex;gap:35px;padding:15px;border:1px solid var(--c-line);background:var(--c-bg)}
@media (min-width:768px){.dd-sound{position:sticky;top:calc(111px + var(--i) * 16px)}}
.dd-sound__media{flex:0 0 450px;transition:transform .7s}
.dd-sound__media img{width:100%;aspect-ratio:var(--ar-square);object-fit:cover}
@media (hover:hover){.dd-sound__media:hover{transform:scale(1.04)}}
.dd-sound__body{flex:1 1 auto;min-width:0;min-height:448px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:17px 0}
.dd-sound__head{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px}
.dd-sound__icon{width:55px;height:55px;color:var(--c-red)}
.dd-sound[data-icon="headphones"] .dd-sound__icon{width:63px;height:63px}
.dd-sound__title{font-family:var(--ff-display);font-weight:600;font-size:var(--fs-card);line-height:var(--lh-tight);text-transform:uppercase;color:var(--c-white);text-align:center;max-width:255px}
.dd-sound__text{font-family:var(--ff-mono);color:var(--c-text);text-align:center;padding-right:16.4px}
.dd-sound__cat{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dd-sound__catlabel{font-weight:500;font-size:var(--fs-small);line-height:15.84px;text-transform:uppercase;color:var(--c-white)}
.dd-sound__genres{color:var(--c-red-text)}
/* Gerade Eintraege: Bild rechts, Icon nach dem Titel (live Karte 2) */
.dd-sound:nth-child(even){flex-direction:row-reverse}
.dd-sound:nth-child(even) .dd-sound__media{flex-basis:447px}
.dd-sound:nth-child(even) .dd-sound__body{padding:17px 0 17px 10px;min-height:470px}
.dd-sound:nth-child(even) .dd-sound__head{flex-direction:row-reverse;justify-content:space-around;gap:0;margin:0 0 16px 24px}
.dd-sound:nth-child(even) .dd-sound__text{padding:0 0 0 19.25px;margin-left:-3.2px}
.dd-sound:nth-child(even) .dd-sound__cat{padding-left:10px}
@media (max-width:1200px) and (min-width:768px){
  .dd-sound__media,.dd-sound:nth-child(even) .dd-sound__media{flex-basis:46%}
  .dd-sound{gap:24px}
  .dd-sound__body,.dd-sound:nth-child(even) .dd-sound__body{min-height:0}
}
@media (max-width:767px){
  .dd-sounds{margin-top:calc(20px - 4vw);padding:71px 20px 0}
  .dd-sounds__inner{width:100%}
  .dd-titlebar--sounds .dd-titlebar__b{padding-right:11.7px}
  .dd-sounds__stack{margin-top:20px;gap:40px}
  .dd-sound,.dd-sound:nth-child(even){flex-direction:column;gap:20px}
  .dd-sound__media,.dd-sound:nth-child(even) .dd-sound__media{flex:none}
  .dd-sound__media img{aspect-ratio:var(--ar-card-m)}
  .dd-sound__media:hover{transform:none}
  .dd-sound__body,.dd-sound:nth-child(even) .dd-sound__body{padding:20px 0 0;gap:20px;min-height:0}
  .dd-sound__head,.dd-sound:nth-child(even) .dd-sound__head{flex-direction:column;justify-content:center;gap:8px;margin:0}
  .dd-sound:nth-child(even) .dd-sound__head{flex-direction:column-reverse;gap:0}
  .dd-sound__icon{margin-bottom:7px}
  .dd-sound__title{max-width:none}
  .dd-sound__text,.dd-sound:nth-child(even) .dd-sound__text{padding:0;margin:0 0 14px}
  .dd-sound__cat,.dd-sound:nth-child(even) .dd-sound__cat{justify-content:center;padding:6px 0 8px}
  .dd-sound:nth-child(even) .dd-sound__cat{margin-top:40px}
}

/* Abschluss-Statement */
.dd-closing{display:flex;justify-content:center;margin-top:-11px}
.dd-closing p{width:811px;max-width:calc(100% - 40px);margin-bottom:14.4px;font-family:var(--ff-mono);color:var(--c-text-dim);text-align:center}
@media (max-width:767px){.dd-closing{margin:18px 0 calc(26vw - 14.4px);padding:0 12vw}.dd-closing p{width:auto;max-width:249px}}

/* ---------- 15. Partner-Logos (CPT-Loop dd_partner, generisches Item, Reihenfolge = DOM) ---------- */
.dd-partners{margin:calc(10vw + 55.6px) 10px 0;border-top:1px solid var(--c-line-grey);border-bottom:1px solid var(--c-line-grey);height:183px;display:flex;align-items:center}
.dd-partners__row{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:20px;align-items:center;padding:0 10px}
.dd-partner,.dd-partner__link{display:flex;align-items:center;justify-content:center;height:214px}
.dd-partner__link{width:100%;transition:opacity .2s}
@media (hover:hover){.dd-partner__link:hover{opacity:.75}}
.dd-partner__logo{width:auto;height:auto;max-width:85%;max-height:100%;object-fit:contain}
@media (max-width:767px){
  .dd-partners{margin:0 10px;height:auto;padding:26px 0}
  .dd-partners__row{grid-template-columns:1fr 1fr;gap:20px;padding:0}
  .dd-partner,.dd-partner__link{height:128px}
  .dd-partner__logo{max-width:100%}
}

/* ---------- 16. FAQ ---------- */
.dd-faq{margin:calc(79px + 4vw) 0 7vw;padding:calc(20px + 6vw) 0 114px}
.dd-faq .dd-label--row{padding:0;margin-bottom:54px}
.dd-faq .dd-label--row .dd-label__num{min-width:102px}
.dd-faq .dd-label--row .dd-label__name{min-width:133px}
.dd-titlebar--faq{margin-top:0}
.dd-faq__title{justify-content:center;gap:.3em;font-weight:400;font-size:var(--fs-h2-xl)}
.dd-acc{width:83%;margin:44px auto 0}
.dd-acc__item{margin-bottom:15px}
.dd-acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:0;padding:22px 30px;background:var(--c-acc);font-family:var(--ff-sans);font-weight:400;font-size:var(--fs-faq);line-height:var(--lh-tight);text-transform:uppercase;text-align:left;color:var(--c-white);transition:background .2s linear}
.dd-acc__btn[aria-expanded="true"]{background:var(--c-bg)}
.dd-acc__icon{flex:none;width:29px;display:flex;justify-content:flex-end;color:var(--c-red)}
.dd-acc__icon .dd-icon{width:20px;height:20px}
.dd-acc__minus{display:none}
.dd-acc__btn[aria-expanded="true"] .dd-acc__plus{display:none}
.dd-acc__btn[aria-expanded="true"] .dd-acc__minus{display:block}
.dd-acc__content{padding:30px;font-family:var(--ff-mono);color:var(--c-text)}
.dd-acc__content p{margin-bottom:14.4px}
.dd-acc__content p:last-child{margin-bottom:0}
@media (max-width:767px){
  .dd-faq{margin:75px 0 78px;padding:50px 20px}
  .dd-faq .dd-container{width:100%}
  .dd-titlebar--faq{margin:0}
  .dd-faq__title{flex-direction:column;gap:61px;font-weight:600;font-size:clamp(32px,11vw,40px)}  /* 320 px: „QUESTIONS“ passt */
  .dd-faq .dd-titlebar .dd-label__name{min-width:64px}
  .dd-faq .dd-titlebar .dd-label__num{min-width:62px}
  .dd-acc{width:100%;margin-top:36px}
  .dd-acc__btn{padding:22px 30px}
}

/* ---------- 17. Booking + Footer ---------- */
.dd-booking-wrap{position:relative;background:var(--c-black)}
.dd-booking-wrap::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(var(--c-overlay),var(--c-black));opacity:.55;pointer-events:none}
.dd-booking,.dd-footer{position:relative;z-index:2}
.dd-booking__inner{position:relative;display:flex;gap:20px;padding:30px 0 80px}
.dd-booking__logo{display:none}
.dd-booking__formcol{flex:0 0 59.7%;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding-top:100px}
.dd-booking__side{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.dd-booking__title{max-width:446px;margin:92px 0 0 57px}
.dd-booking__mail{padding-left:72px;margin-bottom:73px;font-family:var(--ff-mono);font-weight:500;font-size:var(--fs-mail);line-height:1.5;color:var(--c-white);text-shadow:0 0 25px var(--c-black)}
.dd-booking__mail a{color:var(--c-white);text-decoration:none}
@media (hover:hover){.dd-booking__mail a:hover{text-decoration:underline;text-underline-offset:3px}}
.dd-booking__note{font-family:var(--ff-mono);color:var(--c-text);width:405px;max-width:100%;text-align:center}

.dd-form{width:calc(100% - 80px);display:flex;flex-direction:column;gap:20px}
.dd-form__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.dd-field{position:relative}
.dd-input{display:block;width:100%;height:40px;padding:8px 16px;font-family:var(--ff-mono);font-size:15px;line-height:21px;color:var(--c-white);background:var(--c-bg);border:1px solid var(--c-input-border);border-radius:3px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.dd-input::placeholder{color:var(--c-placeholder);opacity:1}
.dd-input:focus{border-color:var(--c-white);box-shadow:0 0 0 1px var(--c-white)}
.dd-input[aria-invalid="true"]{border-color:var(--c-error-border)}
.dd-textarea{height:96px;padding:5px 14px;resize:vertical}
.dd-select{padding-right:40px;cursor:pointer}
.dd-select:invalid,.dd-select.is-empty{color:var(--c-placeholder)}
.dd-select option{color:var(--c-white);background:var(--c-bg)}
.dd-select__chev{position:absolute;right:16px;top:14px;width:11px;height:12px;color:var(--c-white);opacity:.6;pointer-events:none}
.dd-field__err{margin-top:6px;font-family:var(--ff-mono);font-size:13px;line-height:1.4;color:var(--c-error)}
.dd-field--check{display:block}
.dd-check{display:inline-block;width:13px;height:13px;margin:0 3px 0 0;vertical-align:-1px;accent-color:var(--c-red)}
.dd-field--check label{display:inline;font-family:var(--ff-mono);font-size:16px;line-height:16px;color:var(--c-white);cursor:pointer}
.dd-field--check label a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){.dd-field--check label a:hover{color:var(--c-red-text)}}

.dd-form__submit{width:100%;padding:17px 30px;border-radius:40px;background:var(--c-red);color:var(--c-white);font-family:var(--ff-mono);font-weight:600;font-size:20px;line-height:20px;transition:background .3s,transform .15s}
@media (hover:hover){.dd-form__submit:hover{background:var(--c-red-hover)}}
.dd-form__submit:active{transform:scale(.98)}
.dd-form__submit[disabled]{opacity:.6;cursor:progress}
.dd-form__status{font-family:var(--ff-mono);font-size:15px;line-height:1.5;color:var(--c-white)}
.dd-form__status.is-error{color:var(--c-error)}

.dd-footer{margin-top:-39px}
.dd-bottom{position:relative;display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--c-line)}
.dd-bottom__copy{flex:1 1 50%;font-family:var(--ff-mono);color:var(--c-text)}
.fwn-credit{color:inherit;text-decoration:none;font-weight:600;white-space:nowrap;background:linear-gradient(110deg,var(--c-fwn-1),var(--c-fwn-2),var(--c-fwn-3),var(--c-fwn-4),var(--c-fwn-2),var(--c-fwn-1));background-size:220% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-position:0 0;transition:background-position .5s ease}
@media (hover:hover){.fwn-credit:hover{background-position:-110% 0}}
.cmplz-manage-consent{white-space:nowrap}
.dd-bottom__legal{flex:1 1 50%;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:0 35px}
.dd-bottom__legal a,.dd-bottom__legal button{font-family:var(--ff-mono);font-size:16px;line-height:24px;color:var(--c-white);text-decoration:none;transition:color .3s}
@media (hover:hover){.dd-bottom__legal a:hover,.dd-bottom__legal button:hover{color:var(--c-red-text)}}
@media (max-width:1200px){.dd-bottom__legal{gap:0 22px}.dd-booking__title{margin-left:20px}.dd-booking__mail{padding-left:20px}}
/* 768 bis ca. 933 px: Outline-Titel skaliert mit, damit „ABOUT“/„EVENT“ in der Spalte bleiben; darüber unverändert 56 px */
@media (min-width:768px) and (max-width:1200px){.dd-booking__title{font-size:clamp(40px,6vw,56px)}}
@media (max-width:767px){
  .dd-booking{padding:0 20px}
  .dd-footer{margin-top:0;padding:0 20px}
  .dd-booking__inner{width:100%;flex-direction:column;gap:20px;padding:22px 0 31px}
  .dd-booking__logo{display:block;width:140px;margin:0 auto 14px}
  .dd-booking__formcol{flex:none;padding-top:0}
  .dd-form{width:100%}
  .dd-field--check label{line-height:24px}
  .dd-booking__note{width:100%}
  .dd-booking__side{gap:0}
  .dd-booking__title{display:none}
  .dd-booking__mail{padding:0;margin:42px 0 16px;text-align:center}
  .dd-bottom{width:100%;flex-direction:column;align-items:center;padding:30px 0 100px;text-align:center}  /* v1.1.5: Platz über dem Menü-Button */
  .dd-bottom__copy{width:74%;flex:none}
  .dd-bottom__legal{justify-content:center;gap:0 22px}
}
[hidden]{display:none!important}

/* ==========================================================================
   Theme-Ergaenzungen (nicht im Prototyp): Rechtsseiten, 404, Formular-Status,
   Smash Balloon im CI, Stern-Abstufung, Partner-Link, Header-Logo-Fallback.
   ========================================================================== */
picture.dd-bgmedia{display:block}
.dd-header__logo img{height:87.5px;width:auto}
@media (max-width:767px){.dd-header__logo img{height:96px}}
.dd-stars .dd-icon.is-off{opacity:.25}
.dd-partner__link{color:inherit;text-decoration:none}
.dd-form__status{margin:0}
.dd-form__status.is-ok{color:var(--c-white)}

/* Rechtsseiten (page.php) im CI (404 seit v1.2.0 eigener Block am Ende) */
.dd-legal{padding:120px 0 120px}
.dd-legal__title{font-family:var(--ff-display);font-weight:600;font-size:var(--fs-h2);line-height:var(--lh-tight);text-transform:uppercase;color:var(--c-white);overflow-wrap:anywhere;hyphens:auto}
.dd-legal__body{max-width:74ch;margin-top:48px;font-family:var(--ff-mono);font-size:15px;line-height:1.7;color:var(--c-text)}
.dd-legal__body h2,.dd-legal__body h3,.dd-legal__body h4{font-family:var(--ff-sans);font-weight:600;line-height:1.25;color:var(--c-white);margin:2.2em 0 .6em}
.dd-legal__body h2{font-size:24px}.dd-legal__body h3{font-size:19px}.dd-legal__body h4{font-size:16px}
.dd-legal__body p,.dd-legal__body ul,.dd-legal__body ol{margin:0 0 1em}
.dd-legal__body ul,.dd-legal__body ol{padding-left:1.4em;list-style:revert}
.dd-legal__body a{color:var(--c-red-text);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
@media (hover:hover){.dd-legal__body a:hover{color:var(--c-white)}}
@media (max-width:767px){.dd-legal{padding:60px 20px 80px}.dd-legal .dd-container{width:100%}}

/* Smash Balloon Instagram Feed im CI (v1.1.8): sieht aus wie der Platzhalter (Profilkopf, 4er-Raster, Buttons).
   Alles mit #sb_instagram-Präfix und !important, damit die Reihenfolge der Plugin-CSS (auch aggregiert) keine Rolle spielt.
   Keine Plugin-Dateien geändert; Einstellungen im Plugin (Spalten, Abstand, Header) werden hier überstimmt. */
.dd-insta #sb_instagram{padding:0!important;width:100%!important;max-width:none!important;background:none!important}
.dd-insta #sb_instagram .sb_instagram_header{float:none!important;margin:0!important;padding:12px 0!important;overflow:visible!important}
.dd-insta #sb_instagram .sb_instagram_header a,.dd-insta #sb_instagram .sbi_header_link{display:flex!important;align-items:center;gap:20px;color:var(--c-white)!important;text-decoration:none!important;width:auto!important}
.dd-insta #sb_instagram .sbi_header_text{display:flex!important;align-items:center;gap:20px;padding:0!important;margin:0!important;float:none!important}
.dd-insta #sb_instagram .sbi_header_img{position:relative!important;flex:none;width:80px!important;height:80px!important;margin:0!important;border-radius:50%!important;overflow:hidden!important;float:none!important}
.dd-insta #sb_instagram .sbi_header_img img{width:100%!important;height:100%!important;max-width:none!important;border-radius:50%!important;object-fit:cover;opacity:1!important}
.dd-insta #sb_instagram .sbi_header_img_hover{display:none!important}
.dd-insta #sb_instagram .sbi_feedtheme_header_text{padding:0!important;margin:0!important}
.dd-insta #sb_instagram .sbi_header_text h3{margin:0!important;padding:0!important;font-family:var(--ff-sans)!important;font-weight:600!important;font-size:20px!important;line-height:28px!important;letter-spacing:normal!important;text-transform:uppercase!important;color:var(--c-white)!important}
.dd-insta #sb_instagram .sbi_header_text h3::before{content:"@"}
.dd-insta #sb_instagram .sbi_bio,.dd-insta #sb_instagram .sbi_bio_info,.dd-insta #sb_instagram .sbi_header_text p{display:none!important}
.dd-insta #sb_instagram #sbi_images{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;padding:12px 0!important;width:100%!important;float:none!important}
.dd-insta #sb_instagram #sbi_images .sbi_item{display:block!important;width:100%!important;padding:0!important;margin:0!important;overflow:hidden;float:none!important;opacity:1!important}
.dd-insta #sb_instagram .sbi_photo_wrap{position:relative;width:100%}
.dd-insta #sb_instagram .sbi_photo{display:block!important;width:100%!important;height:auto!important;aspect-ratio:1/1;overflow:hidden;background-size:cover!important;background-position:center!important}
.dd-insta #sb_instagram .sbi_photo img{display:block!important;width:100%!important;height:100%!important;object-fit:cover;opacity:1!important;transition:transform .7s var(--ease-out)}
/* Video- und Karussell-Symbole in den Kacheln aus (Platzhalter-Optik) */
.dd-insta #sb_instagram#sb_instagram .sbi_item .sbi_photo svg,.dd-insta #sb_instagram#sb_instagram .sbi_item .sbi_playbtn,.dd-insta #sb_instagram#sb_instagram .sbi_item .sbi_lightbox_carousel_icon,.dd-insta #sb_instagram#sb_instagram .sbi_link,.dd-insta #sb_instagram#sb_instagram .sbi_info{display:none!important}  /* doppelte ID: Plugin setzt die Symbole mit eigener !important-Regel */
@media (hover:hover){.dd-insta #sb_instagram .sbi_item:hover .sbi_photo img{transform:scale(1.04)}}
/* Buttons: Folgen wie im Platzhalter (rot, eckig), Mehr laden als Sekundär-Button (weiße Kontur) */
.dd-insta #sb_instagram #sbi_load{display:flex!important;justify-content:center;align-items:center;gap:8px;padding:5px 0 0!important;margin:0!important;float:none!important;width:100%!important}
.dd-insta #sb_instagram #sbi_load .sbi_load_btn,.dd-insta #sb_instagram .sbi_follow_btn a{position:relative;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;margin:0!important;padding:7px 14px!important;min-height:0!important;border-radius:0!important;box-shadow:none!important;font-family:var(--ff-sans)!important;font-size:13px!important;font-weight:400!important;line-height:19.5px!important;color:var(--c-white)!important;text-decoration:none!important;transition:background-color .2s,color .2s,border-color .2s}
.dd-insta #sb_instagram .sbi_follow_btn{display:inline-flex!important;margin:0!important}
.dd-insta #sb_instagram #sbi_load .sbi_load_btn{background:transparent!important;border:1px solid var(--c-white)!important;padding:6px 14px!important}
.dd-insta #sb_instagram .sbi_follow_btn a{background:var(--c-red)!important;border:0!important}
.dd-insta #sb_instagram .sbi_follow_btn svg{display:block;flex:none;width:15px!important;height:15px!important;margin:0!important;position:static!important}
.dd-insta #sb_instagram .sbi_btn_text{padding:0!important;margin:0!important;opacity:1!important}
@media (hover:hover){
  .dd-insta #sb_instagram #sbi_load .sbi_load_btn:hover{background:var(--c-white)!important;color:var(--c-black)!important}
  .dd-insta #sb_instagram .sbi_follow_btn a:hover{background:var(--c-white)!important;color:var(--c-red)!important}
}
@media (max-width:1023px) and (min-width:768px){.dd-insta #sb_instagram #sbi_images{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (max-width:767px){
  .dd-insta #sb_instagram .sb_instagram_header{padding:6px 0!important}
  .dd-insta #sb_instagram .sb_instagram_header a,.dd-insta #sb_instagram .sbi_header_text{gap:16px}
  .dd-insta #sb_instagram .sbi_header_img{width:50px!important;height:50px!important}
  .dd-insta #sb_instagram .sbi_header_text h3{font-size:17px!important}
  .dd-insta #sb_instagram #sbi_images{grid-template-columns:1fr!important}
  /* Wie Platzhalter: mobil eine Kachel; „Mehr laden“ zeigt die übrigen (main.js setzt .dd-insta--alle) */
  .dd-insta:not(.dd-insta--alle) #sb_instagram #sbi_images .sbi_item:nth-child(n+2){display:none!important}
  .dd-insta.dd-insta--alle #sb_instagram #sbi_images .sbi_item{display:block!important}
  .dd-insta #sb_instagram #sbi_load .sbi_load_btn,.dd-insta #sb_instagram .sbi_follow_btn a{padding-top:8px!important;padding-bottom:8px!important}
  .dd-insta #sb_instagram #sbi_load .sbi_load_btn{padding-top:7px!important;padding-bottom:7px!important}
  /* Trefferfläche mind. 44 px ohne Optikänderung */
  .dd-insta #sb_instagram #sbi_load .sbi_load_btn::before,.dd-insta #sb_instagram .sbi_follow_btn a::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}
/* v1.1.9 (Abnahme S4b): Fokusrahmen im Feed wie im übrigen Theme und im Platzhalter (rot, 2 px, Abstand 3 px) statt Plugin-Blau.
   Die Plugin-Regeln (outline mit !important über var(--sb-focus-ring), Kachel per :has) bleiben, nur Farbe und Abstand
   werden überstimmt. Per Tippen (html.dd-pointer) wie überall kein Rahmen. */
.dd-insta #sb_instagram{--sb-focus-ring:var(--c-red)}
.dd-insta #sb_instagram a:focus-visible,.dd-insta #sb_instagram button:focus-visible{outline:2px solid var(--c-red)!important;outline-offset:3px!important}
.dd-insta #sb_instagram .sbi_item:has(.sbi_photo:focus-visible){outline:2px solid var(--c-red)!important;outline-offset:3px!important}  /* Kachel: Link wird vom overflow der Kachel beschnitten */
.dd-insta #sb_instagram .sb_instagram_header:has(.sbi_header_link:focus-visible),.dd-insta #sb_instagram .sbi_header_link:focus-visible{outline:none!important}
.dd-insta #sb_instagram .sbi_header_link:focus-visible .sbi_header_img{outline:2px solid var(--c-red);outline-offset:3px}  /* Profilkopf wie Platzhalter: Ring um den Avatar statt um die volle Zeilenbreite */
html.dd-pointer .dd-insta #sb_instagram .sbi_header_link:focus-visible .sbi_header_img{outline:none}
html.dd-pointer .dd-insta #sb_instagram a:focus-visible,html.dd-pointer .dd-insta #sb_instagram button:focus-visible{outline:none!important}
html.dd-pointer .dd-insta #sb_instagram .sbi_item:has(.sbi_photo:focus-visible){outline:none!important}

/* WP-Admin-Leiste (nur angemeldet): fixe/sticky Elemente oben um die Leistenhöhe versetzen. WP: 32 px, bis 782 px 46 px,
   bis 600 px scrollt die Leiste mit (absolute), dann kein Versatz. */
.admin-bar{--ab:32px}
@media (max-width:782px){.admin-bar{--ab:46px}}
@media (max-width:600px){.admin-bar{--ab:0px}}
@media (min-width:768px){
  .admin-bar .dd-header{top:var(--ab)}
  .admin-bar .dd-about__card{top:var(--ab)}
  .admin-bar .dd-sound{top:calc(111px + var(--i) * 16px + var(--ab))}
}
@media (min-width:1201px){.admin-bar .dd-titlebar--sticky{top:var(--ab)}}
/* 1201 bis 1399 ist die Sounds-Titelzeile relativ (nicht sticky): kein Versatz, sonst rutscht sie um die Leistenhöhe. 768 bis 1200
   kleben nur About-Karte und Sound-Stapel (oben versetzt); die Titelzeilen sind dort relativ und bekommen bewusst kein top. */
@media (min-width:1201px) and (max-width:1399px){.admin-bar .dd-titlebar--sounds.dd-titlebar--sticky{top:auto}}
@media (max-width:767px){.admin-bar .dd-menu:not([hidden]){top:var(--ab)}}

/* Touch-Ziele mobil: Trefferfläche mindestens 44x44 px per Pseudo-Element, Optik und Layout unverändert */
@media (max-width:767px){
  .dd-review__more,.dd-gr__arrow,.dd-gr__links a,.dd-insta__follow,.dd-menu__list a,.dd-booking__mail a,
  .dd-footer a,.dd-footer button{position:relative}
  .dd-review__more::before,.dd-gr__arrow::before,.dd-gr__links a::before,.dd-insta__follow::before,.dd-menu__list a::before,
  .dd-booking__mail a::before,.dd-footer a::before,.dd-footer button::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}

/* Handy quer (v1.1.0): Header kompakter, Hero so, dass „DJ DEAN“ und BOOKING über der Falz liegen. Desktop und Hochformat
   unverändert (greift nur bei max. 950 px Breite UND max. 500 px Höhe im Querformat). */
@media (max-width:950px) and (max-height:500px) and (orientation:landscape){
  /* Tablet-Layout (768 bis 950 px, z. B. 812x375): fixer Header 64 px, Hero-Inhalt direkt darunter */
  :root{--header-h:64px}
  .dd-header__video{width:100px;height:56px}
  .dd-header-spacer{height:40px}
  .dd-hero{min-height:0}
  .dd-hero__content{padding-top:56px;padding-bottom:24px;align-items:flex-end}
  .dd-hero__title{padding-top:0;font-size:56px}
  .dd-hero__claim{margin:12px 0 0;font-size:15px;line-height:1.45}
  .dd-hero__cta{padding:0 21px 0 0}
  .dd-btn--hero{padding:18px 32px}
}
@media (max-width:767px) and (max-height:500px) and (orientation:landscape){
  /* Mobil-Layout quer (z. B. 667x375): Logo-Leiste flacher, „turn up now“ einzeilig, BOOKING über dem Menü-Button */
  .dd-header{margin-top:0;height:64px;padding:4px 10px}
  .dd-header__video{width:100px;height:56px}
  .dd-header-spacer{height:0}
  .dd-hero-m{margin-top:-64px;padding:64px 20px 24px}
  .dd-hero-m__col{min-height:0;padding-top:16px}
  .dd-hero-m__title{max-width:none}
  .dd-hero-m__title br{display:none}
  .dd-hero-m__text{max-width:560px;margin:10px 0 0}
  .dd-hero-m__col > div{margin-top:16px}
}

/* ---------- v1.1.3: Outline-Schrift als EINE saubere Kontur (Safari/WebKit) ----------
   Ursache: Horizon Outlined gibt es nur in 400, die Outline-Texte standen auf font-weight:600. Der Browser hat deshalb ein
   künstliches Bold erzeugt; WebKit zeichnet das als mehrfach versetzte Kopie der Konturlinien (Chrome als dickere Linie).
   Lösung: Vollschrift Horizon (400, ohne Synthese) mit transparenter Füllung und einem einzigen Strich, der mit der
   Schriftgröße skaliert (ca. 2 px bei 92,8 px wie bisher in Chrome, mind. 1 px). Glyphenbreiten von Horizon und Horizon
   Outlined sind identisch, das Layout bleibt gleich. Ohne text-stroke-Unterstützung: Horizon Outlined 400 ohne Synthese.
   Die Horizon-Vollschrift-Headlines (600, künstliches Bold wie live) bleiben bewusst unverändert. */
.dd-outline,.dd-hero__title{font-weight:400;font-synthesis:none}
@supports (-webkit-text-stroke:1px #fff){
  .dd-outline,.dd-hero__title{font-family:"Horizon","Space Grotesk",sans-serif;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:max(1px,.022em) var(--c-white)}
}

/* ---------- v1.1.3: Formular-Steuerelemente ohne native WebKit-Optik ----------
   Eingabefelder und Auswahl ohne systemeigene Rundung/Schatten (Prototyp: 3 px Radius, flache Kante). Der Senden-Button
   bleibt bewusst rund (border-radius 40px wie Prototyp und live). Checkbox eckig, 16 px, rot gefüllt mit Haken wenn
   gewählt, Trefferfläche 24 px, Fokus über :focus-visible. */
.dd-input{-webkit-appearance:none;appearance:none;box-shadow:none;background-clip:padding-box}
.dd-input:focus{box-shadow:0 0 0 1px var(--c-white)}
.dd-check{-webkit-appearance:none;appearance:none;position:relative;display:inline-block;flex:none;width:16px;height:16px;margin:0 6px 0 0;padding:0;vertical-align:-3px;border:1px solid var(--c-white);border-radius:2px;background:transparent center/12px 12px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
.dd-check::before{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%)}
.dd-check:checked{background-color:var(--c-red);border-color:var(--c-red);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.dd-check[aria-invalid="true"]{border-color:var(--c-error-border)}
.dd-check:focus-visible{outline:2px solid var(--c-red-text);outline-offset:3px}

/* ---------- v1.1.3: Rechtsseiten (page.php + inc/legal.php) ----------
   Verzeichnis aus den H2 (Desktop sticky links, darunter aufklappbar), Text Space Grotesk 16/1.7 statt Mono (lange Texte),
   H2 Horizon, H3/H4 Space Grotesk fett, Vorspann (Impressum-Adresse) hervorgehoben. */
.dd-legal__title{font-size:min(var(--fs-h2),6.4vw);hyphens:manual}  /* Horizon ist sehr breit: „DATENSCHUTZ-“ passt so bis 320 px in eine Zeile, Trennstelle per &shy; aus page.php */
.dd-legal-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:48px}
.dd-legal-grid--single{grid-template-columns:minmax(0,1fr)}
.dd-legal-toc{position:sticky;top:calc(var(--header-h) + 24px + var(--ab,0px));max-height:calc(var(--vph,100vh) - var(--header-h) - 48px);overflow:auto}
.dd-legal-toc__box{background:var(--c-acc);border:1px solid var(--c-line);padding:20px 18px}
.dd-legal-toc__title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-family:var(--ff-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-mute);list-style:none;cursor:default}
.dd-legal-toc__title::-webkit-details-marker{display:none}
.dd-legal-toc__chev{display:none;width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease-out)}
.dd-legal-toc__list{counter-reset:toc;display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.dd-legal-toc__list li{counter-increment:toc}
.dd-legal-toc__list a{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-left:2px solid transparent;font-family:var(--ff-sans);font-size:14px;line-height:1.35;color:var(--c-text);text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.dd-legal-toc__list a::before{content:counter(toc);flex:none;font-family:var(--ff-mono);font-size:13px;color:var(--c-red-text)}
@media (hover:hover){.dd-legal-toc__list a:hover{background:rgba(255,255,255,.05);color:var(--c-white)}}
.dd-legal-toc__list a[aria-current="location"]{border-left-color:var(--c-red);background:rgba(255,255,255,.06);color:var(--c-white)}
.dd-legal-toc__list a:focus-visible{outline-offset:0}
.dd-legal__body{max-width:72ch;margin-top:0;font-family:var(--ff-sans);font-size:16px;line-height:1.7;color:var(--c-text)}
.dd-legal-part--lead{margin-bottom:8px;padding:20px 22px;border-left:2px solid var(--c-red);background:var(--c-acc);font-size:17px;line-height:1.6;color:var(--c-white)}
.dd-legal-part--lead p:last-child{margin-bottom:0}
.dd-legal__body h2{margin:56px 0 18px;padding-top:32px;border-top:1px solid var(--c-line);font-family:var(--ff-display);font-weight:600;font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:var(--c-white);scroll-margin-top:calc(var(--header-h) + 24px + var(--ab,0px));overflow-wrap:anywhere}
.dd-legal__body > .dd-legal-part:first-child > h2{margin-top:0;padding-top:0;border-top:0}
.dd-legal__body h3{margin:34px 0 10px;font-family:var(--ff-sans);font-weight:700;font-size:19px;line-height:1.3;text-transform:none;color:var(--c-white)}
.dd-legal__body h4{margin:24px 0 8px;font-family:var(--ff-sans);font-weight:600;font-size:16.5px;line-height:1.35;color:var(--c-white)}
.dd-legal__body p,.dd-legal__body ul,.dd-legal__body ol,.dd-legal__body table{margin:0 0 16px}
.dd-legal__body ul,.dd-legal__body ol{padding-left:22px;list-style:disc}
.dd-legal__body ol{list-style:decimal}
.dd-legal__body li{margin-bottom:6px}
.dd-legal__body li > ul,.dd-legal__body li > ol{margin:6px 0 0}
.dd-legal__body strong{color:var(--c-white)}
.dd-legal__body table{width:100%;border-collapse:collapse}
.dd-legal__body td,.dd-legal__body th{padding:8px 10px;border:1px solid var(--c-line);text-align:left;vertical-align:top}
.dd-legal__body a{color:var(--c-red-text);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
@media (hover:hover){.dd-legal__body a:hover{color:var(--c-white)}}
@media (max-width:1023px){
  .dd-legal-grid{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:32px}
  .dd-legal-toc{position:static;max-height:none;overflow:visible}
  .dd-legal-toc__box{padding:14px 16px}
  .dd-legal-toc__title{margin-bottom:0;padding:4px 0;min-height:36px;cursor:pointer}
  .dd-legal-toc__box[open] .dd-legal-toc__title{margin-bottom:10px}
  .dd-legal-toc__chev{display:block}
  .dd-legal-toc__box[open] .dd-legal-toc__chev{transform:rotate(225deg) translateY(-3px)}
  .dd-legal-toc__list a{min-height:44px;align-items:center}
}
@media (max-width:767px){
  .dd-legal{padding:60px 20px 80px}
  .dd-legal__body h2{margin-top:40px;padding-top:24px;scroll-margin-top:24px}
  .dd-legal-part--lead{padding:16px 16px}
}

/* ---------- v1.1.4: Barrierefreiheit (WCAG 2.1 AA / BFSG, Audit fwn-reviewer) ---------- */
/* M3: Fokus und Ankerziele nie unter dem fixen Header (ab 768 px) bzw. dem Menü-Button unten (mobil) */
@media (min-width:768px){html{scroll-padding-top:calc(var(--header-h) + 16px + var(--ab,0px))}}
@media (max-width:767px){html{scroll-padding-bottom:100px}}
/* M4: Sticky-Karten nur bei genug Höhe (Stapel braucht ca. 650 px), sonst normal im Fluss (Handy quer, kleine Laptops) */
@media (min-width:768px) and (max-height:700px){
  .dd-sound,.admin-bar .dd-sound{position:relative;top:auto}
  .dd-about__card,.admin-bar .dd-about__card{position:relative;top:auto}
}
/* M5: Menü-Button mit deckender Kreisfläche (auch über dem roten Booking-Hintergrund), ebenso der Schließen-Button */
.dd-burger .dd-icon{border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--c-bg) 17.4px,transparent 17.6px)}
/* M6: Fokusrahmen im roten Booking-Bereich und Footer weiß statt rot */
.dd-booking-wrap :focus-visible,.dd-footer :focus-visible{outline-color:var(--c-white)}
.dd-booking-wrap .dd-check:focus-visible{outline-color:var(--c-white)}
/* M7: Hero-Claim mit dezentem Schatten für Kontrast auf hellen Bildstellen */
.dd-hero__claim{text-shadow:0 0 6px rgba(0,0,0,.85),0 1px 2px #000}
/* S3: leere Statusmeldung bleibt im DOM (aria-live), ohne den Abstand der Formularspalte zu vergrößern */
.dd-form__status:empty{margin-top:-20px}
/* S6: Überschrift steht im DOM vorn, die Optik bleibt (Desktop: Slider, Bild, Zitat) */
@media (min-width:1201px){.dd-gr{order:1}.dd-reviews__media{order:2}.dd-reviews__quote{order:3}}
/* Mobil: das versteckte Desktop-Hero-Bild nicht vorlesen (die H1 bleibt für Screenreader) */
@media (max-width:767px){.dd-hero .dd-bgmedia{display:none}}

/* ---------- v1.1.5: Reflow (WCAG 1.4.10) ----------
   .dd-sr ist absolut positioniert. Ohne positionierten Vorfahren landete der versteckte Zusatz im „Weiterlesen“-Button
   eines weiter rechts liegenden Slides außerhalb des Slider-Clippings und verbreiterte die Seite (768 bis 1200 px).
   Deshalb jedes Element mit .dd-sr-Inhalt positioniert, die Slides selbst auch. */
.dd-gr__slide,.dd-review__more,.dd-gr__links a,.dd-insta__follow,.fwn-credit,.dd-partner,.dd-field{position:relative}
/* Fokusring der Buttons über Fotos weiß (Flächenwechsel beim Fokus bleibt) */
.dd-btn:focus-visible{outline-color:var(--c-white)}

/* ---------- v1.1.6: Menü-Button und Fokus bei Touch (Feedback iPhone) ----------
   Kreisfläche: Das Symbol menu-circle hatte viewBox 0 0 1024 1059, der Ring saß dadurch um ca. 1 px nach links und
   unten versetzt (Mitte 19,0/21,0 statt 20/20, Radius 18,4) und die 40-px-Fläche ragte als Sichel heraus. Jetzt ist die
   viewBox um den Ring zentriert (-43 27 1059 1059, gleiche Skalierung), und die Fläche ist ein Verlauf mit Radius
   17,5 px, der genau in der Ringlinie (16,4 bis 18,4 px) endet. Das X liegt auf dem deckenden Popup und braucht keine Fläche. */
.dd-menu__close .dd-icon{background:none}
/* Fokus nur bei Tastatur sichtbar, beim Menü-Button kreisförmig um das Symbol statt eckig um die 100x74-Trefferfläche */
.dd-burger:focus-visible,.dd-menu__close:focus-visible{outline:none}
.dd-burger:focus-visible .dd-icon,.dd-menu__close:focus-visible .dd-icon{border-radius:50%;box-shadow:0 0 0 2px var(--c-bg),0 0 0 4px var(--c-white)}
/* Eingabeart: nach Tippen/Klicken (html.dd-pointer, main.js) keine Fokusrahmen, sobald eine Taste gedrückt wird wieder.
   Grund: WebKit zeigt :focus-visible auch bei per Skript gesetztem Fokus, wenn das zuvor fokussierte Element es zeigte
   (Menü auf: Fokus auf „About“, Menü zu: Fokus zurück auf den Menü-Button), daher das rote Viereck nach dem Antippen. */
html.dd-pointer :focus-visible{outline:none}
html.dd-pointer .dd-burger:focus-visible .dd-icon,html.dd-pointer .dd-menu__close:focus-visible .dd-icon{box-shadow:none}
html.dd-pointer .dd-btn:focus-visible:not(:hover)::after{transform:translateY(100%)}
/* Keine grauen/blauen Tipp-Flächen in iOS */
html{-webkit-tap-highlight-color:transparent}

/* ---------- v1.1.7: Mobil-Detail-Check (fwn-reviewer, Ressourcen/sonstiges/mobil-check) ---------- */
@media (max-width:767px){
  /* M1 Sounds: keine Spiegelung mobil, überall Symbol über Titel, gleiche Abstände */
  .dd-sound:nth-child(even) .dd-sound__head{flex-direction:column;gap:8px}
  .dd-sound:nth-child(even) .dd-sound__cat{margin-top:0}
  /* M2 Seitenränder 20 px */
  .dd-insta{padding:10px 20px 19px}
  .dd-partners{margin:0 20px}
  /* M3 About-Text näher an Instagram (ca. 72 px) */
  .dd-about{padding-bottom:24px}
  .dd-about__text{padding-bottom:0}
  /* M4 Hero mobil: Inhalt an die eingefrorene Höhe koppeln, unten mindestens 100 px für den Menü-Button frei */
  .dd-hero-m__col{min-height:0;padding-top:clamp(16px,calc(var(--vph,100svh) - 600px),100px)}
  /* S4 Zitat Sandra H.: Name und Zeichen enger */
  .dd-feature__by{gap:16px;margin-top:16px}
  /* S6 Partner-Logos optisch ausgewogen: gleiche Fläche statt gleicher Box */
  .dd-partner__logo{max-width:min(140px,100%);max-height:70px}
  /* S7 Textfeld wie die anderen Felder */
  .dd-textarea{padding:8px 16px}
  /* S3 Footer: Trenner weg, „Website made by FWN Media“ eigene Zeile, nie allein umbrechen */
  .dd-bottom__sep{display:none}
  .dd-bottom__made{display:block;white-space:nowrap}
  /* S2 große Titel passen bei 360/375 in die Box */
  .dd-titlebar__title,.dd-reviews__title,.dd-faq__title{font-size:min(var(--fs-h2),10.5vw)}
  /* Nice: Hero-Motiv so, dass Deans Gesicht nicht angeschnitten ist */
  .dd-hero-m .dd-bgmedia img{object-position:65% center}
}
@media (max-width:767px) and (max-height:700px){
  .dd-hero-m__text{margin:14px 0 8px}
  .dd-hero-m__col > div{margin-top:16px}
}
/* M5 E-Mail nie am Bindestrich umbrechen */
.dd-booking__mail a{white-space:nowrap}
/* S8 Tablet: Header-Logo exakt mittig */
@media (min-width:768px) and (max-width:1200px){
  .dd-header__bar{padding-right:0}
  .dd-header__inner{display:grid;grid-template-columns:1fr auto 1fr}
  .dd-nav--left,.dd-nav--right{margin:0}
  .dd-nav--left{justify-content:flex-end}
  .dd-header__logo{flex:none}
}
/* S1 Zeilenumbrüche ohne Waisen */
h2,h3,.dd-acc__btn,.dd-outline,.dd-404__text,.dd-legal__title{text-wrap:balance}
.dd-closing p,.dd-booking__note,.dd-legal__body h2,.dd-legal__body h3,.dd-hero-m__text,.dd-cta__text{text-wrap:pretty}
/* iOS Safe-Area (viewport-fit=cover): Menü- und Schließen-Button über dem Home-Indikator, Inhalt nicht unter der Kamera */
.dd-burger,.dd-menu__close{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
@media (max-width:767px) and (max-height:600px){
  .dd-hero-m__text{margin:10px 0 4px}
  .dd-hero-m__col > div{margin-top:12px}
}

/* ---------- v1.2.0: 404 im Look der Startseite (404.php) ----------
   Aufbau wie der Desktop-Hero: Motiv unter dem fixen Header, Inhalt unten links, Outline-Schrift per text-stroke (v1.1.3),
   Mono-Satz, Buttons Style 4. Signatur: die „0“ in Originalrot, der Rest Kontur. Hintergrund stark abgedunkelt (Text liegt
   links bzw. mobil zentriert auf fast deckendem #161616), unten Übergang in den Booking-Bereich. Höhe an --vph gekoppelt. */
.dd-404{position:relative;display:flex;align-items:flex-end;margin-top:-24px;min-height:calc(var(--vph,100svh) - 36px);background:var(--c-bg);overflow:hidden}
.dd-404__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
.dd-404::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 55%,var(--c-bg) 100%),linear-gradient(90deg,var(--c-bg) 0%,color-mix(in srgb,var(--c-bg) 90%,transparent) 40%,color-mix(in srgb,var(--c-bg) 45%,transparent) 100%)}
.dd-404__inner{position:relative;z-index:2;padding:calc(var(--header-h) + clamp(24px,calc(var(--vph,100svh) * .07),64px)) 0 clamp(40px,min(8vw,calc(var(--vph,100svh) * .1)),120px)}
.dd-404__code{display:flex;margin-left:-.03em;font-family:var(--ff-outline);font-weight:400;font-synthesis:none;font-size:clamp(112px,min(22vw,calc(var(--vph,100svh) * .27)),320px);line-height:.82;text-transform:uppercase;color:var(--c-white);user-select:none}
@supports (-webkit-text-stroke:1px #fff){
  .dd-404__code{font-family:var(--ff-display);color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:max(1.5px,.009em) var(--c-white)}
}
.dd-404__title{margin-top:clamp(24px,min(3.4vw,calc(var(--vph,100svh) * .045)),48px);font-family:var(--ff-display);font-weight:600;font-size:var(--fs-h2-xl);line-height:var(--lh-tight);text-transform:uppercase;color:var(--c-white)}
.dd-404__text{max-width:540px;margin-top:20px;font-family:var(--ff-mono);color:var(--c-white);text-wrap:pretty}
.dd-404__actions{display:flex;flex-wrap:wrap;gap:16px 20px;margin-top:40px}
.dd-btn--ghost{padding:14px 29px;background:transparent;color:var(--c-white);border:1px solid var(--c-white)}
.dd-btn--ghost::after{background:var(--c-white);color:var(--c-bg)}
@media (max-width:767px){
  .dd-404{align-items:center;margin-top:-40px;min-height:calc(var(--vph,100svh) - 123px)}  /* direkt unter der Logo-Leiste (Spacer 40 px überdeckt wie beim Hero mobil) */
  .dd-404__img{object-position:65% center}
  .dd-404::before{background:linear-gradient(180deg,color-mix(in srgb,var(--c-bg) 70%,transparent) 0%,color-mix(in srgb,var(--c-bg) 86%,transparent) 45%,var(--c-bg) 100%)}
  .dd-404__inner{width:100%;padding:24px 20px 72px;text-align:center}
  .dd-404__code{justify-content:center;margin-left:0;font-size:clamp(88px,32vw,200px)}
  .dd-404__title{margin-top:28px;font-size:min(var(--fs-h2-xl),10.5vw)}
  .dd-404__actions{flex-direction:column;align-items:center;gap:16px;margin-top:32px}
  .dd-404__actions .dd-btn{width:100%;max-width:320px}
}
/* Handy quer und kurze Fenster: kompakter, 404 an der Höhe begrenzt */
@media (max-width:950px) and (max-height:500px) and (orientation:landscape){
  .dd-404{min-height:0}
  .dd-404__inner{padding:calc(var(--header-h) + 32px) 0 48px}
  .dd-404__code{font-size:clamp(72px,calc(var(--vph,100svh) * .22),140px)}
  .dd-404__actions{margin-top:24px}
}
@media (max-width:767px) and (max-height:500px) and (orientation:landscape){
  .dd-404{margin-top:0}  /* quer gibt es keinen Spacer unter der Logo-Leiste */
  .dd-404__inner{padding:24px 20px 56px}
  .dd-404__actions{flex-direction:row;justify-content:center}
  .dd-404__actions .dd-btn{width:auto}
}