#main-content,#page,.site-content,#et-boc,.et_builder_inner_content,article,.entry-content,#et-main-area{background:transparent !important}

html body,body{background:#000430 !important}
html{background:#000430 !important}
:root{
  --dwa-primary:#ef476f;
  --dwa-primary-shade-1:#eb184a;
  --dwa-secondary:#06d6a0;
  --dwa-bg:#000430;
  --dwa-neutral-50:#fafafa;
  --dwa-neutral-300:#d5d6d7;
  --dwa-neutral-400:#a3a5a8;
  --dwa-neutral-500:#737679;
  --dwa-border-inverse:#413f46;
  --dwa-hover-dark:rgba(255,255,255,0.08);
}

/* ---------- Scrollbar in Markenfarbe (alle Browser) ---------- */
html{scrollbar-width:thin;scrollbar-color:var(--dwa-primary) var(--dwa-bg)}
*{scrollbar-width:thin;scrollbar-color:var(--dwa-primary) var(--dwa-bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--dwa-bg)}
::-webkit-scrollbar-thumb{background:var(--dwa-primary);border-radius:999px;border:2px solid var(--dwa-bg)}
::-webkit-scrollbar-thumb:hover{background:var(--dwa-primary-shade-1)}
::-webkit-scrollbar-corner{background:var(--dwa-bg)}

@keyframes dwFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes dwFadeIn{from{opacity:0}to{opacity:1}}
@keyframes dwDrift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(22px,-34px,0)}100%{transform:translate3d(-18px,26px,0)}}
@keyframes dwMeshMove{0%{transform:translate(-3%,-2%) scale(1)}50%{transform:translate(3%,3%) scale(1.1)}100%{transform:translate(-3%,-2%) scale(1)}}
@keyframes dwBlobMorph{0%,100%{border-radius:42% 58% 65% 35%/45% 45% 55% 55%}33%{border-radius:62% 38% 45% 55%/55% 62% 38% 45%}66%{border-radius:38% 62% 55% 45%/40% 55% 45% 60%}}

/* Ladebildschirm */
[data-dwa-loader]{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;background:var(--dwa-bg);transition:opacity .5s ease}
[data-dwa-loader] .dwa-blob{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center}
[data-dwa-loader] .dwa-blob-shape{position:absolute;inset:0;border-radius:42% 58% 65% 35%/45% 45% 55% 55%;background:linear-gradient(135deg,var(--dwa-primary),var(--dwa-secondary));animation:dwBlobMorph 3s ease-in-out infinite}
[data-dwa-loader] .dwa-blob-pct{position:relative;z-index:1;font-family:'Poppins',sans-serif;font-weight:700;font-size:28px;color:#ffffff}

/* Mesh-Gradient-Hintergrund */
[data-dwa-mesh]{position:fixed;inset:-10%;width:120vw;height:120vh;z-index:0;pointer-events:none}
[data-dwa-mesh="1"]{opacity:0.32;filter:blur(90px);animation:dwMeshMove 30s ease-in-out infinite;
  background:radial-gradient(circle at 15% 12%,var(--dwa-primary) 0%,transparent 28%),
    radial-gradient(circle at 85% 8%,#E3B505 0%,transparent 26%),
    radial-gradient(circle at 75% 55%,var(--dwa-secondary) 0%,transparent 28%),
    radial-gradient(circle at 10% 60%,#4EA5D9 0%,transparent 27%),
    radial-gradient(circle at 45% 90%,var(--dwa-primary) 0%,transparent 26%),
    radial-gradient(circle at 90% 92%,var(--dwa-secondary) 0%,transparent 24%)}
[data-dwa-mesh="2"]{opacity:0.24;filter:blur(100px);animation:dwMeshMove 38s ease-in-out infinite 4s reverse;
  background:radial-gradient(circle at 60% 20%,#4EA5D9 0%,transparent 29%),
    radial-gradient(circle at 25% 45%,#E3B505 0%,transparent 24%),
    radial-gradient(circle at 55% 75%,var(--dwa-primary) 0%,transparent 28%),
    radial-gradient(circle at 15% 95%,var(--dwa-secondary) 0%,transparent 25%)}

/* Partikel-Canvas */
[data-dwa-particles]{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0;filter:blur(1px)}

/* Scroll-Fortschrittsbalken */
[data-dwa-progress]{position:fixed;top:0;left:0;right:0;height:3px;z-index:9000;background:var(--dwa-primary);box-shadow:0 0 8px 1px rgba(239,71,111,0.7),0 0 16px 2px rgba(239,71,111,0.4);transform:scaleX(0);transform-origin:left;transition:transform .1s linear}

/* Cookie-Banner */
[data-dwa-cookie-banner]{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:8500;max-width:640px;margin:0 auto;background:rgba(9,16,64,0.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,0.14);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,0.45);padding:24px;flex-direction:column;gap:16px;font-family:'Titillium Web',sans-serif}
[data-dwa-cookie-banner] h3{margin:0;font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;color:var(--dwa-neutral-50)}
[data-dwa-cookie-banner] p{margin:0;font-size:14px;line-height:1.5;color:var(--dwa-neutral-300)}
[data-dwa-cookie-banner] a{color:var(--dwa-primary)}
[data-dwa-cookie-settings]{display:none;flex-direction:column;gap:14px;padding-top:10px;border-top:1px solid var(--dwa-border-inverse)}
.dwa-cookie-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dwa-cookie-row-title{font-weight:600;font-size:14px;color:var(--dwa-neutral-50)}
.dwa-cookie-row-desc{font-size:12px;color:var(--dwa-neutral-500)}
.dwa-cookie-pill{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--dwa-hover-dark);color:var(--dwa-neutral-400);white-space:nowrap}
[data-dwa-cookie-stat-toggle]{font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid var(--dwa-border-inverse);background:transparent;color:var(--dwa-neutral-300);cursor:pointer;white-space:nowrap}
.dwa-cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.dwa-cookie-btn{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;border:none;border-radius:999px;padding:10px 22px;cursor:pointer;transition:background .25s ease}
.dwa-cookie-btn-primary{color:#fafafa;background:var(--dwa-primary)}
.dwa-cookie-btn-secondary{color:#fafafa;background:var(--dwa-secondary)}
.dwa-cookie-btn-ghost{color:var(--dwa-neutral-300);background:transparent;border:1px solid var(--dwa-border-inverse)}
.dwa-cookie-btn-link{color:var(--dwa-neutral-300);background:transparent;text-decoration:underline;text-underline-offset:3px;padding:10px 14px}

@media (prefers-reduced-motion: reduce){
  [data-dwa-mesh],[data-dwa-loader] .dwa-blob-shape{animation:none!important}
}

/* ---------- Hero entrance ---------- */
@keyframes dwRise{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes dwFloat{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@keyframes dwLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dwa-hero-line{display:block;overflow:hidden;padding-bottom:0.06em}
.dwa-hero-line span{display:inline-block;animation:dwRise .95s cubic-bezier(.16,1,.3,1) both}
.dwa-fade-up{opacity:0;animation:dwFadeUp .9s cubic-bezier(.4,0,.2,1) both}
.dwa-line-grow{transform-origin:left;animation:dwLine 1s cubic-bezier(.4,0,.2,1) .9s both}
.dwa-float{animation:dwFloat 5.5s ease-in-out infinite alternate}

/* ---------- Generic scroll-reveal for main content modules ---------- */
#main-content .et_pb_module{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
#main-content .et_pb_module.dwa-visible{opacity:1;transform:translateY(0)}
#hero .et_pb_module{opacity:1!important;transform:none!important;transition:none!important}

/* Divi Visual Builder rendert die Vorschau in einem eigenen Frame, in dem unser Reveal-Skript nicht laeuft -
   dort sonst würden Module dauerhaft bei opacity:0 haengen bleiben (kein Scroll-Trigger im Editor) */
.et-fb #main-content .et_pb_module,
.et-vb-app-ancestor #main-content .et_pb_module{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion: reduce){
  .dwa-hero-line span,.dwa-fade-up,.dwa-float,.dwa-line-grow{animation:none!important;opacity:1!important;transform:none!important}
  #main-content .et_pb_module{opacity:1!important;transform:none!important}
}

/* ---------- Nav Hover/Active ---------- */
.dwa-nav ul.et-menu li a {
  position: relative;
  padding-bottom: 6px;
  transition: color 0.25s ease;
}
.dwa-nav ul.et-menu li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #ef476f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.dwa-nav ul.et-menu li a:hover::after,
.dwa-nav ul.et-menu li a.dwa-active::after {
  transform: scaleX(1);
}
.dwa-nav ul.et-menu li a:hover,
.dwa-nav ul.et-menu li a.dwa-active {
  color: #ef476f;
}

body.admin-bar [data-dwa-progress]{top:32px}
@media (max-width:782px){body.admin-bar [data-dwa-progress]{top:46px}}

/* ---------- Werke / Portfolio-Galerie ---------- */
/* Spaltenzahl/Abstaende (Modul > Design > Portfolio-Grid), Bild-Radius & object-fit (Modul > Design > Bild) sowie
   die Schriften von Titel/Kategorie/Filter/Paginierung sind nativ in Divi einstellbar (je eigener Design-Tab).
   Hier nur das, was Divi (Stand 5.0 Beta) dafuer kein eigenes Feld anbietet: */

/* Bild-Seitenverhaeltnis: Divis "Sizing > Seitenverhaeltnis"-Feld erzeugt aktuell keine CSS-Regel (Divi-Luecke) */
.et_pb_filterable_portfolio .et_portfolio_image img{aspect-ratio:1/1.05}

/* Hover-Lift + Glow: kein natives Feld fuer Transform / Aussen-Schatten bei Bildern vorhanden */
.et_pb_filterable_portfolio .et_pb_portfolio_item>a{display:block;transition:box-shadow .3s ease,transform .3s ease}
.et_pb_filterable_portfolio .et_pb_portfolio_item>a:hover{box-shadow:0 16px 36px rgba(4,0,1,0.5);transform:translateY(-4px)}

/* Titel/Kategorie erst beim Hover einblenden (Divi zeigt sie sonst dauerhaft unter dem Bild) */
.et_pb_filterable_portfolio .et_pb_portfolio_item{position:relative}
.et_pb_filterable_portfolio h2.et_pb_module_header{position:absolute;left:0;right:0;bottom:0;margin:0;padding:0 18px 40px;z-index:2;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.et_pb_filterable_portfolio p.post-meta{position:absolute;left:0;right:0;bottom:0;margin:0;padding:0 18px 18px;z-index:2;opacity:0;transform:translateY(8px);transition:opacity .3s ease .05s,transform .3s ease .05s;pointer-events:none}
.et_pb_filterable_portfolio .et_pb_portfolio_item:hover h2.et_pb_module_header,
.et_pb_filterable_portfolio .et_pb_portfolio_item:hover p.post-meta{opacity:1;transform:translateY(0)}

/* Pillenform fuer Filter & Paginierung: Divi bietet dafuer nur ein Schrift-Feld, keine Form/Rahmen/Abstand-Optionen */
.et_pb_filterable_portfolio .et_pb_portfolio_filters ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 8px;padding:0}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li{margin:0;float:none}
.et_pb_filterable_portfolio .et_pb_portfolio_filters a{display:inline-block;letter-spacing:.02em;cursor:pointer;transition:all .25s ease;text-decoration:none}
.et_pb_filterable_portfolio .et_pb_portfolio_filters a:hover{background:var(--dwa-neutral-50)!important;border-color:var(--dwa-neutral-50)!important;color:#000430!important}

/* "Mehr ansehen"-Button statt Divi-Paginierung (Paginierung ist im Modul auf "Aus" gestellt) */
.dwa-portfolio-more-wrap{display:flex;justify-content:center;margin:34px 0 0}
.dwa-portfolio-more{display:none;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;padding:14px 32px;border-radius:999px;border:1px solid var(--dwa-neutral-300);background:transparent;color:var(--dwa-neutral-50);cursor:pointer;transition:all .25s ease}
.dwa-portfolio-more:hover{background:var(--dwa-neutral-50);color:#000430;border-color:var(--dwa-neutral-50)}

/* Filter-Position (zentriert auf Titelhoehe) und Feinschliff-Farben werden dynamisch per JS gesetzt,
   da Divis eigenes CSS feste Werte hier zuverlaessig ueberschreibt und die Zeilenhoehen sich je nach
   Viewport/Schriftgroesse unterscheiden - siehe dw-art-effects.js */
#werke .et_pb_portfolio_filters ul{margin:0;justify-content:flex-end}

/* Lightbox statt Portfolio-Einzelseite: Divi verlinkt Portfolio-Bilder fest auf die Projekt-Einzelseite, ein Lightbox-Umschalter existiert nicht */
.dwa-lightbox{display:none;position:fixed;inset:0;z-index:9500;background:rgba(0,4,48,0.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:40px;flex-direction:column;gap:16px}
.dwa-lightbox.dwa-open{display:flex}
.dwa-lightbox img{max-width:min(90vw,1100px);max-height:75vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,0.6)}
.dwa-lightbox-caption{text-align:center;color:var(--dwa-neutral-50);font-family:'Poppins',sans-serif;font-size:16px;font-weight:600}
.dwa-lightbox-caption span{display:block;font-size:13px;font-weight:400;color:var(--dwa-neutral-300);margin-top:4px;font-family:'Titillium Web',sans-serif}
.dwa-lightbox-close{position:absolute;top:24px;right:32px;width:44px;height:44px;border-radius:999px;border:1px solid var(--dwa-border-inverse);background:rgba(255,255,255,0.06);color:var(--dwa-neutral-50);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.dwa-lightbox-close:hover{border-color:var(--dwa-neutral-50);background:rgba(255,255,255,0.12)}
body.dwa-lightbox-active{overflow:hidden}

@media (max-width:620px){
  .et_pb_filterable_portfolio h2.et_pb_module_header{padding:0 14px 34px;font-size:14px}
  .et_pb_filterable_portfolio p.post-meta{padding:0 14px 14px}
  .et_pb_filterable_portfolio .et_pb_portfolio_filters a{padding:9px 14px}
}

/* ---------- Featured Werke: Scroll-Cinema (Bild waechst beim Scrollen) ---------- */
.dwa-scrub-section{position:relative}
.dwa-scrub-sticky{position:sticky!important;top:0;height:100vh;width:100vw!important;max-width:100vw!important;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dwa-scrub-frame{position:absolute!important;top:50%;left:50%;transform:translate(-50%,-50%);width:72%;height:72%;overflow:hidden;will-change:width,height}
.dwa-scrub-full .dwa-scrub-frame{width:100%;height:100%;opacity:0}
.dwa-scrub-grow .dwa-scrub-frame{border-radius:24px}
.dwa-scrub-full .dwa-scrub-frame{border-radius:0px}
.dwa-scrub-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(0,0,0,0.8) 100%);pointer-events:none;z-index:2}
.dwa-scrub-img{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:cover;will-change:transform;z-index:1}
.dwa-scrub-img img{width:100%!important;height:100%!important;object-fit:cover;max-width:none!important;max-height:none!important;display:block!important;aspect-ratio:auto!important}
.dwa-scrub-caption-wrap{position:absolute!important;inset:0;z-index:3;pointer-events:none}
.dwa-scrub-caption{position:absolute!important;left:0!important;right:0!important;bottom:0!important;padding:0 clamp(20px,2.5vw,40px) 56px;opacity:0;transform:translateY(30px);will-change:opacity,transform;box-sizing:border-box}

@media (max-width:768px){.dwa-scrub-caption div:nth-child(2){font-size:26px!important}}

/* Featured-Werke-Module vom generischen Scroll-Reveal ausnehmen (eigene Scroll-Cinema-Logik steuert opacity/transform) */
.dwa-scrub-section .et_pb_module{opacity:1!important;transition:none!important}

/* Bildausschnitt je Werk, damit nichts Wichtiges abgeschnitten wird */
#featured-1 .dwa-scrub-img img{object-position:50% 50%}
#featured-2 .dwa-scrub-img img{object-position:50% 18%}
#featured-3 .dwa-scrub-img img{object-position:62% 28%}

.dwa-scrub-caption-wrap .et_pb_text_inner{height:100%}

.dwa-scrub-section{padding:0!important;margin:0!important}





.dwa-scrub-img,.dwa-scrub-img *{min-width:0!important;min-height:0!important}

.dwa-scrub-img{display:block!important}

#featured-2, #featured-3{margin-top:-100vh!important;position:relative}
#featured-1{position:relative;z-index:4}
#featured-2{z-index:5}
#featured-3{z-index:6}

#hero .et-pb-has-background-video{transform:scale(1.3)!important;transform-origin:center center!important}

/* ---------- Werke-Galerie: Masonry-Grid statt starrem Grid mit fixem Seitenverhaeltnis ---------- */
.et_pb_portfolio_items{
  display:block!important;
  column-count:3;
  column-gap:22px;
}
.et_pb_portfolio_item{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  display:inline-block;
  width:100%;
  margin-bottom:22px;
}
.et_pb_portfolio_items .et_portfolio_image img{
  aspect-ratio:auto!important;
  height:auto!important;
  width:100%!important;
  object-fit:cover;
  display:block;
}
@media (max-width:980px){
  .et_pb_portfolio_items{column-count:2}
}
@media (max-width:767px){
  .et_pb_portfolio_items{column-count:1}
}

/* ---------- Werke-Galerie: Filter-Pillen auch im Divi-Builder-iframe korrekt (nicht nur per JS) ----------
   Das Builder-iframe (#et-vb-app-frame) fuehrt site-weite wp_footer-Scripts nicht zuverlaessig aus,
   darum muss die Grundoptik auch ohne die JS-Funktion paintActive() stimmen. */
.et_pb_portfolio_filters a{
  font-family:'Poppins',sans-serif!important;
  font-weight:600!important;
  font-size:14px!important;
  padding:11px 22px!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#fafafa!important;
  border:1px solid rgba(250,250,250,0.3)!important;
}
.et_pb_portfolio_filters a.active{
  background:#fafafa!important;
  color:#000430!important;
  border:1px solid #fafafa!important;
}
.et_pb_portofolio_pagination a.active{
  background:#ef476f!important;
  color:#fafafa!important;
  border-color:#ef476f!important;
}

/* ---------- Header schrumpft beim Herunterscrollen ----------
   Divis kompiliertes Per-Seite-CSS (et-cache) ueberschreibt einzelne Property-Overrides
   (width/padding) auf mysterioese Weise trotz !important und hoeherer Spezifitaet - darum
   stattdessen die GESAMTE Header-Leiste per transform skalieren: transform kollidiert mit
   keiner Divi-Regel und gewinnt immer, unabhaengig von jeglicher Spezifitaets-Kaskade. */
.et_pb_row_0_tb_header{
  transition:transform .3s ease;
  transform-origin:top center;
}
.et_pb_section_0_tb_header.dwa-header-shrink .et_pb_row_0_tb_header{
  transform:scale(0.82)!important;
}