/* =========================================================
   01) GRUNDVARIABLEN / SCHNELLE EINSTELLUNGEN
   Hier kannst du zentrale Farben, Seitenbreite und Überschrift-
   Abstände ändern. --headline-letter-spacing steuert den Abstand
   ZWISCHEN den Buchstaben der großen Überschriften.
   ========================================================= */
:root{
      --bg:#050306;--bg2:#090609;--panel:#0d090d;--panel2:#130c11;--text:#f8f5f7;--muted:#a99fa5;
      --soft:#d9d1d6;--accent:#800404;--accent-rgb:128,4,4;--accent-soft:#b01818;--accent-deep:#5a0202;--accent-dark:#3d0101;--accent-deeper:#240000;
      --red:var(--accent);--red2:var(--accent-soft);--deep:var(--accent-dark);--line:rgba(255,255,255,.085);
      --redline:rgba(var(--accent-rgb),.34);--shadow:0 0 18px rgba(var(--accent-rgb),.32),0 0 52px rgba(var(--accent-rgb),.11);
      --max:1240px;--headline-letter-spacing:.025em;--headline-line-height:.87;--logo-hue:0deg;--storm-hue:0deg;--storm-bright:.78;--art-hue:0deg;--art-sat:1.05;
    }
    
/* =========================================================
   02) FARBWELTEN
   Diese Blöcke steuern Dunkelrot, Orange, Grün, Violett und Cyan.
   Dunkelrot verwendet exakt #800404, Orange #FF5F1F, Grün #00EE00.
   ========================================================= */
html[data-theme="crimson"]{--accent:#800404;--accent-rgb:128,4,4;--accent-soft:#b01818;--accent-deep:#5a0202;--accent-dark:#3d0101;--accent-deeper:#240000;--logo-hue:-13deg;--storm-hue:-14deg;--storm-bright:.70;--art-hue:-8deg;--art-sat:1.02}
    html[data-theme="orange"]{--accent:#FF5F1F;--accent-rgb:255,95,31;--accent-soft:#ff8a5c;--accent-deep:#b83a00;--accent-dark:#7a2600;--accent-deeper:#4b1700;--logo-hue:28deg;--storm-hue:30deg;--storm-bright:.80;--art-hue:30deg;--art-sat:1.08}
    html[data-theme="green"]{--accent:#00EE00;--accent-rgb:0,238,0;--accent-soft:#66ff66;--accent-deep:#009900;--accent-dark:#006600;--accent-deeper:#003d00;--logo-hue:105deg;--storm-hue:108deg;--storm-bright:.80;--art-hue:102deg;--art-sat:1.16}
    html[data-theme="violet"]{--accent:#9b4dff;--accent-rgb:155,77,255;--accent-soft:#c08cff;--accent-deep:#5e20b8;--accent-dark:#421184;--accent-deeper:#2c085d;--logo-hue:305deg;--storm-hue:306deg;--storm-bright:.80;--art-hue:285deg;--art-sat:1.14}
    html[data-theme="ice"]{--accent:#00d9ff;--accent-rgb:0,217,255;--accent-soft:#67ebff;--accent-deep:#007f96;--accent-dark:#005566;--accent-deeper:#003642;--logo-hue:215deg;--storm-hue:218deg;--storm-bright:.80;--art-hue:192deg;--art-sat:1.15}

/* =========================================================
   03) RESET + BODY
   Grundlayout, Standardschrift und allgemeines Seitenverhalten.
   ========================================================= */
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--text);background:#030203;font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.55;overflow-x:hidden}

/* =========================================================
   04) HINTERGRUND + STORM / BLITZ-EFFEKTE
   storm-bg.png ist das Hintergrundbild. Der Canvas-Blitz selbst
   wird in script.js erzeugt.
   ========================================================= */
    .storm-bg{position:fixed;inset:-4%;z-index:0;pointer-events:none;background:#030203 url('assets/storm-bg.png') center center/cover no-repeat;
      filter:hue-rotate(var(--storm-hue)) saturate(1.22) contrast(1.08) brightness(var(--storm-bright));
      transform:scale(1.055);animation:stormDrift 18s ease-in-out infinite alternate;will-change:transform,filter}
    .storm-bg:after{content:"";position:absolute;inset:0;background:
      radial-gradient(circle at 50% 74%,rgba(var(--accent-rgb),.12),transparent 26%),
      linear-gradient(180deg,rgba(2,2,3,.03),rgba(2,2,3,.12) 54%,rgba(2,2,3,.30));mix-blend-mode:screen;opacity:.72}
    @keyframes stormDrift{0%{transform:scale(1.055) translate3d(-.7%,-.25%,0)}50%{transform:scale(1.075) translate3d(.5%,.15%,0)}100%{transform:scale(1.06) translate3d(.8%,.4%,0)}}
    .ambient-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:1}
    .ambient-overlay{position:fixed;inset:0;z-index:2;pointer-events:none;background:
      radial-gradient(circle at 51% 30%,transparent 0 22%,rgba(2,2,3,.08) 48%,rgba(2,2,3,.54) 100%),
      linear-gradient(90deg,rgba(2,2,3,.56) 0%,rgba(2,2,3,.32) 38%,rgba(2,2,3,.16) 64%,rgba(2,2,3,.34) 100%),
      linear-gradient(180deg,rgba(2,2,3,.04),rgba(2,2,3,.18) 52%,rgba(2,2,3,.52));}
    main,footer{position:relative;z-index:3}
    body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.18;background-image:
      linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
      background-size:38px 38px;mask-image:linear-gradient(to bottom,black,transparent 84%)}
    body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:98;opacity:.055;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.08) 4px)}

/* =========================================================
   05) GLOBALE HELFER / LINKS / CONTAINER / TEXTFARBEN
   ========================================================= */
    a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input,textarea,select{font:inherit}
    .wrap{width:min(var(--max),calc(100% - 42px));margin-inline:auto}.kicker{font-size:.7rem;text-transform:uppercase;letter-spacing:.24em;font-weight:950;color:var(--red);margin-bottom:10px}
    .red{color:var(--red);text-shadow:0 0 18px rgba(var(--accent-rgb),.42)}.metal{background:linear-gradient(180deg,#fff 8%,#aaa 48%,#fff 70%,#868086);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.7))}
    .slash{color:var(--red);margin-right:8px}.muted{color:var(--muted)}


/* =========================================================
   06) HEADER / NAVIGATION / FARBWAHL
   Logo oben links, Menü, Projekt-Button und Color-Mode-Punkte.
   ========================================================= */
    .nav{position:sticky;top:0;z-index:70;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(5,3,6,.78);backdrop-filter:blur(18px)}
    .nav-inner{height:76px;display:flex;align-items:center;gap:26px;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;min-width:max-content}
    .brand-logo{width:68px;height:54px;object-fit:contain;object-position:center;transform:translateZ(0);opacity:1;filter:drop-shadow(0 0 4px rgba(255,255,255,.22)) drop-shadow(0 0 10px rgba(var(--accent-rgb),.66)) drop-shadow(0 0 22px rgba(var(--accent-rgb),.26));transition:filter .35s ease,transform .25s ease}.brand:hover .brand-logo{transform:scale(1.055);filter:drop-shadow(0 0 5px rgba(255,255,255,.30)) drop-shadow(0 0 14px rgba(var(--accent-rgb),.85)) drop-shadow(0 0 28px rgba(var(--accent-rgb),.34))}
    .brand-copy{font-weight:950;line-height:.9;letter-spacing:.06em;text-align:center}.brand-copy small{display:block;width:100%;margin-top:6px;color:var(--red);font-size:.52rem;letter-spacing:.28em;text-align:center}
    .links{display:flex;align-items:center;gap:23px;color:#c5bdc2;font-size:.77rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.links a{position:relative}.links a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--red);box-shadow:0 0 10px var(--red);transition:.2s}.links a:hover{color:#fff}.links a:hover:after{right:0}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 19px;border:1px solid var(--red);color:#fff;font-weight:950;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;background:linear-gradient(135deg,var(--accent),var(--accent-deep));box-shadow:var(--shadow);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);cursor:pointer;transition:.2s transform,.2s filter,.2s border-color}.btn:hover{transform:translateY(-2px);filter:brightness(1.12)}.btn.secondary{background:rgba(12,8,11,.72);border-color:rgba(255,255,255,.22);box-shadow:none}.btn.secondary:hover{border-color:var(--red)}
    .mobile-toggle{display:none;border:1px solid rgba(255,255,255,.14);background:#0a0709;color:#fff;width:43px;height:43px;font-size:1.2rem;cursor:pointer}
    .nav-actions{display:flex;align-items:center;gap:12px}.theme-switcher{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(255,255,255,.09);background:rgba(8,6,8,.58);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
    .theme-caption{display:grid;line-height:1;margin-right:3px;min-width:58px}.theme-caption small{font-size:.48rem;color:#777075;letter-spacing:.17em;font-weight:900}.theme-caption b{margin-top:5px;font-size:.58rem;color:#d7d0d4;text-transform:uppercase;letter-spacing:.06em}.theme-dot{width:23px;height:23px;border-radius:50%;border:1px solid rgba(255,255,255,.34);background:var(--swatch);box-shadow:0 0 10px color-mix(in srgb,var(--swatch) 45%,transparent);cursor:pointer;position:relative;padding:0;transition:.2s transform,.2s box-shadow,.2s border-color}.theme-dot:hover{transform:scale(1.12)}.theme-dot[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px #090709,0 0 0 3px var(--swatch),0 0 16px var(--swatch)}.theme-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}


/* =========================================================
   07) HERO / STARTBEREICH
   Großes Logo, „WE CREATE YOUR IDENTITY“ und Creator-Preview.
   ========================================================= */
    .hero{position:relative;min-height:810px;display:grid;align-items:center;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.07)}
    .hero:before{content:"";position:absolute;inset:0;background:
      radial-gradient(circle at 74% 44%,rgba(var(--accent-rgb),.08),transparent 22%),
      linear-gradient(90deg,rgba(3,2,3,.84) 0%,rgba(3,2,3,.70) 37%,rgba(3,2,3,.18) 69%,rgba(3,2,3,.34) 100%),
      linear-gradient(0deg,rgba(3,2,3,.22),rgba(3,2,3,.015));}
    .hero:after{content:"";position:absolute;inset:-8% -16%;background:
      linear-gradient(106deg,transparent 56%,rgba(var(--accent-rgb),.03) 58.6%,rgba(var(--accent-rgb),.14) 59%,rgba(var(--accent-rgb),.035) 59.4%,transparent 61%);pointer-events:none;animation:heroEnergy 8s ease-in-out infinite alternate}
    @keyframes heroEnergy{0%{transform:translate3d(-3%,0,0);opacity:.38}55%{opacity:.82}100%{transform:translate3d(5%,1.5%,0);opacity:.48}}
    .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(310px,.66fr);gap:66px;align-items:center;padding:96px 0}
    .hero-copy{max-width:800px}.hero-brandmark{width:112px;height:auto;margin:0 0 18px 2px;opacity:.98;filter:drop-shadow(0 0 5px rgba(255,255,255,.20)) drop-shadow(0 0 13px rgba(var(--accent-rgb),.74)) drop-shadow(0 0 32px rgba(var(--accent-rgb),.28));transition:filter .45s ease,transform .35s ease}.hero-metal-logo{width:min(250px,46vw);margin-bottom:14px;filter:hue-rotate(var(--art-hue)) saturate(var(--art-sat)) brightness(1.04) drop-shadow(0 0 9px rgba(255,255,255,.16)) drop-shadow(0 0 22px rgba(var(--accent-rgb),.62)) drop-shadow(0 0 52px rgba(var(--accent-rgb),.22))}.hero-metal-logo:hover{transform:translateY(-2px) scale(1.015)}.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.08);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:#ffe5eb;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red)}
    h1{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;font-style:italic;font-size:clamp(4.2rem,8.6vw,8.35rem);letter-spacing:var(--headline-letter-spacing);line-height:var(--headline-line-height);margin:23px 0 26px;max-width:930px;text-shadow:5px 6px 0 rgba(var(--accent-rgb),.20)}
    h1 .line2{display:block;font-size:.69em;margin-left:5%;margin-top:14px;letter-spacing:var(--headline-letter-spacing);color:#fff;text-shadow:3px 4px 0 var(--accent-deeper),0 0 22px rgba(var(--accent-rgb),.32)}
    .lead{max-width:680px;font-size:1.08rem;color:#d1c8cd}.lead strong{color:#fff}.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
    .proof{display:flex;gap:28px;flex-wrap:wrap;margin-top:42px;padding-top:23px;border-top:1px solid rgba(255,255,255,.10)}.proof div{display:grid;gap:2px}.proof strong{font-size:.92rem;text-transform:uppercase}.proof span{font-size:.69rem;color:#958d92;letter-spacing:.08em;text-transform:uppercase}
    .hero-card{justify-self:end;width:min(100%,425px);position:relative;padding:20px;background:linear-gradient(145deg,rgba(19,12,17,.95),rgba(6,4,6,.88));border:1px solid rgba(var(--accent-rgb),.33);box-shadow:0 25px 70px rgba(0,0,0,.45),var(--shadow);transform:rotate(1.4deg);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
    .hero-card:before{content:"CREATIVE SYSTEM";position:absolute;right:15px;top:12px;color:var(--red);font-size:.58rem;font-weight:950;letter-spacing:.18em;z-index:3}
    .screen{aspect-ratio:16/10;position:relative;overflow:hidden;background:radial-gradient(circle at 48% 52%,#271016,#080608 62%);border:1px solid rgba(255,255,255,.08)}.screen .frame{position:absolute;inset:18px;border:2px solid var(--red);box-shadow:inset 0 0 20px rgba(var(--accent-rgb),.15),0 0 18px rgba(var(--accent-rgb),.22);clip-path:polygon(0 14px,14px 0,58% 0,61% 7px,100% 7px,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%)}
    .screen .cam{position:absolute;left:38px;top:40px;width:48%;height:56%;background:linear-gradient(145deg,#20151b,#070607);border:1px solid rgba(255,255,255,.10)}.screen .cam:after{content:"WEBCAM";position:absolute;inset:0;display:grid;place-items:center;color:#655a60;font-size:.64rem;letter-spacing:.22em}.screen .chat{position:absolute;right:35px;top:40px;width:29%;height:56%;border-left:1px solid rgba(var(--accent-rgb),.44);background:rgba(255,255,255,.02)}.screen .chat:before{content:"CHAT\A\A ● user_01\A   lets gooo\A\A ● user_02\A   flawless!";white-space:pre;position:absolute;inset:12px;color:#a69aa1;font-size:.50rem;line-height:1.45}.screen .lower{position:absolute;left:38px;right:35px;bottom:35px;height:23px;border-top:1px solid rgba(var(--accent-rgb),.6);background:linear-gradient(90deg,rgba(var(--accent-rgb),.14),transparent)}.screen .lower:before{content:"FLAWLESS // CREATOR PACKAGE";position:absolute;left:8px;top:4px;color:#fff;font-size:.48rem;font-weight:900;letter-spacing:.13em}.screen-logo{position:absolute;left:50%;top:50%;width:168px;max-width:44%;transform:translate(-50%,-50%);opacity:.78;filter:drop-shadow(0 0 4px rgba(255,255,255,.20)) drop-shadow(0 0 13px rgba(var(--accent-rgb),.72)) drop-shadow(0 0 30px rgba(var(--accent-rgb),.30));pointer-events:none;z-index:2}
    .hero-card-copy{padding:18px 2px 2px}.hero-card-copy .kicker{margin:0 0 5px}.hero-card-copy strong{display:block;font-size:1.08rem;text-transform:uppercase}.hero-card-copy p{margin:5px 0 0;color:#9d9399;font-size:.82rem}



/* =========================================================
   08) SLOGAN / FLAWLESS PRINCIPLE
   „Kreativität ist Intelligenz, die Spaß hat.“ + 4 Prinzipien.
   ========================================================= */
    .manifesto{position:relative;padding:82px 0 76px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(9,6,9,.50),rgba(5,3,5,.22))}.manifesto:before{content:"";position:absolute;inset:-30% 48% -30% -15%;background:radial-gradient(ellipse at center,rgba(var(--accent-rgb),.18),transparent 62%);pointer-events:none}.manifesto-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:58px;align-items:center}.manifesto-quote{margin:0;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-style:italic;text-transform:uppercase;font-size:clamp(3.4rem,6.4vw,6.65rem);line-height:var(--headline-line-height);letter-spacing:var(--headline-letter-spacing);text-shadow:4px 5px 0 rgba(0,0,0,.62)}.manifesto-quote .accent-line{display:block;color:var(--accent);text-shadow:3px 4px 0 var(--accent-deeper),0 0 24px rgba(var(--accent-rgb),.36)}.manifesto-sub{margin:21px 0 0;max-width:660px;color:#aaa0a6;font-size:.84rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.creative-pillars{display:grid;gap:10px}.pillar{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:15px;padding:15px 17px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(90deg,rgba(var(--accent-rgb),.055),rgba(255,255,255,.018));position:relative;overflow:hidden}.pillar:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 14px var(--accent)}.pillar-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(var(--accent-rgb),.50);color:var(--accent);box-shadow:inset 0 0 18px rgba(var(--accent-rgb),.07),0 0 16px rgba(var(--accent-rgb),.08)}.pillar-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.pillar strong{display:block;text-transform:uppercase;font-size:.82rem;letter-spacing:.08em}.pillar span{display:block;margin-top:3px;color:#8f878c;font-size:.69rem;text-transform:uppercase;letter-spacing:.09em}


/* =========================================================
   09) TICKER + GEMEINSAME SECTION-ÜBERSCHRIFTEN
   Hier sitzt auch die gemeinsame Typografie der großen H2-Titel.
   ========================================================= */
    .ticker{overflow:hidden;border-block:1px solid rgba(var(--accent-rgb),.23);background:linear-gradient(90deg,rgba(var(--accent-rgb),.05),rgba(var(--accent-rgb),.11),rgba(var(--accent-rgb),.05));padding:18px 0}.ticker-track{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;font-weight:950;text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;color:#eee}.ticker-track span:before{content:"✦";color:var(--red);margin-right:32px;text-shadow:0 0 10px var(--red)}
    section{padding:104px 0}.section-head{display:grid;grid-template-columns:1fr .72fr;gap:60px;align-items:end;margin-bottom:44px}.section-head h2,.studio-copy h2,.partner-box h2,.process-intro h2,.contact-card h2{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-style:italic;text-transform:uppercase;line-height:var(--headline-line-height);letter-spacing:var(--headline-letter-spacing)}.section-head h2{font-size:clamp(2.9rem,5.5vw,5.35rem);margin:0}.section-head p{color:var(--muted);margin:0;max-width:540px}


/* =========================================================
   10) STUDIO / ÜBER FLAWLESS
   ========================================================= */
    .studio-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:stretch}.studio-copy{padding:42px;border:1px solid rgba(var(--accent-rgb),.28);background:linear-gradient(145deg,#120b10,#080608);box-shadow:0 0 40px rgba(var(--accent-rgb),.055);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}.studio-copy h2{font-size:clamp(3rem,5.2vw,5rem);margin:8px 0 20px}.studio-copy p{color:var(--muted);font-size:1rem}.studio-copy strong{color:#fff}.studio-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.fact{position:relative;padding:24px 20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));min-height:158px}.fact:before{content:"//";color:var(--red);font-weight:950}.fact h3{margin:12px 0 6px;text-transform:uppercase;font-size:1rem}.fact p{margin:0;color:#9e959a;font-size:.84rem}


/* =========================================================
   11) PORTFOLIO / MADE BY FLAWLESS
   reference-hero.png wird über --art-hue an die Farbwelt angepasst.
   ========================================================= */
    .work{padding-top:30px}.case{display:grid;grid-template-columns:1.14fr .86fr;gap:0;border:1px solid rgba(var(--accent-rgb),.28);background:#090608;box-shadow:0 0 55px rgba(var(--accent-rgb),.08);overflow:hidden;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}.case-image{position:relative;min-height:520px;background:#080607;overflow:hidden;isolation:isolate}.case-image img{position:relative;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:hue-rotate(var(--art-hue)) saturate(var(--art-sat)) contrast(1.10) brightness(.96);transition:filter .55s ease,transform .8s ease}.case-image:hover img{transform:scale(1.018)}.case-image:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 42% 38%,rgba(var(--accent-rgb),.12),transparent 38%),linear-gradient(135deg,rgba(var(--accent-rgb),.06),transparent 44%,rgba(var(--accent-rgb),.09));mix-blend-mode:screen}.case-image:after{content:"ORIGINAL WORK // FLAWLESS DESIGN";position:absolute;z-index:2;left:18px;bottom:18px;background:rgba(5,3,6,.84);border-left:3px solid var(--red);padding:9px 12px;font-size:.62rem;font-weight:950;letter-spacing:.15em}.case-copy{padding:52px 46px;display:flex;flex-direction:column;justify-content:center}.case-copy h3{font-family:Impact,sans-serif;font-style:italic;text-transform:uppercase;font-size:clamp(2.4rem,4.4vw,4.2rem);line-height:var(--headline-line-height);letter-spacing:var(--headline-letter-spacing);margin:7px 0 18px}.case-copy p{color:var(--muted)}.case-list{display:grid;gap:10px;margin:23px 0 0}.case-list span{padding:11px 12px;border:1px solid rgba(255,255,255,.08);background:#0b080a;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.case-list span:before{content:"//";color:var(--red);margin-right:9px}


/* =========================================================
   12) LEISTUNGEN
   Karten für Overlay, Thumbnails, Logos, Emotes usw.
   ========================================================= */
    .services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service{position:relative;padding:28px 24px 25px;min-height:275px;background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.015));border:1px solid var(--line);overflow:hidden;transition:.22s transform,.22s border-color,.22s box-shadow;clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px)}.service:hover{transform:translateY(-5px);border-color:rgba(var(--accent-rgb),.45);box-shadow:0 16px 45px rgba(0,0,0,.28),0 0 25px rgba(var(--accent-rgb),.08)}.service:after{content:"";position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;border:1px solid rgba(var(--accent-rgb),.18);transform:rotate(35deg);box-shadow:0 0 28px rgba(var(--accent-rgb),.07)}.num{font-family:Impact,sans-serif;font-style:italic;color:var(--red);font-size:2.25rem;line-height:1;text-shadow:0 0 16px rgba(var(--accent-rgb),.30)}.service h3{font-size:1.03rem;text-transform:uppercase;margin:18px 0 7px}.service p{margin:0;color:#9f969b;font-size:.86rem;max-width:31ch}.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:19px}.chip{padding:5px 7px;border:1px solid rgba(var(--accent-rgb),.25);background:rgba(var(--accent-rgb),.045);color:#d8cfd4;font-size:.59rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
    .service-note{margin-top:24px;padding:18px 20px;border-left:3px solid var(--red);background:rgba(var(--accent-rgb),.055);color:#b8afb4;font-size:.86rem}.service-note strong{color:#fff}


/* =========================================================
   13) CREATOR BRAND SYSTEM
   Einzelprojekt vs. kompletter Creator-Look.
   ========================================================= */
    .brand-system{display:grid;grid-template-columns:1fr 1fr;gap:16px}.system-card{padding:30px;border:1px solid rgba(255,255,255,.08);background:#0a0709;min-height:275px;position:relative;overflow:hidden}.system-card.featured{border-color:rgba(var(--accent-rgb),.38);background:linear-gradient(145deg,#160b11,#080608);box-shadow:0 0 40px rgba(var(--accent-rgb),.07)}.system-card h3{font-family:Impact,sans-serif;font-style:italic;font-size:2.2rem;text-transform:uppercase;line-height:var(--headline-line-height);letter-spacing:var(--headline-letter-spacing);margin:9px 0 12px}.system-card p{color:var(--muted);max-width:52ch}.mini-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}.mini-list span{font-size:.74rem;padding:9px 10px;border:1px solid rgba(255,255,255,.08);text-transform:uppercase;font-weight:850}.mini-list span:before{content:"+";color:var(--red);margin-right:7px}.system-card .ghost-number{position:absolute;right:-15px;bottom:-38px;font-family:Impact,sans-serif;font-style:italic;font-size:7rem;color:rgba(var(--accent-rgb),.045);transform:rotate(-7deg);pointer-events:none}.system-card img.ghost{position:absolute;right:-34px;bottom:-42px;width:248px;opacity:.13;filter:drop-shadow(0 0 16px rgba(var(--accent-rgb),.62));transform:rotate(-7deg);pointer-events:none}


/* =========================================================
   14) CREATOR-KOOPERATION
   Gratis Design / vereinbarte Reichweite.
   ========================================================= */
    .partner{position:relative;overflow:hidden}.partner:before{content:"";position:absolute;inset:7% -10% auto;height:440px;background:radial-gradient(ellipse at center,rgba(var(--accent-rgb),.14),transparent 58%);pointer-events:none}.partner-box{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;padding:56px;border:1px solid rgba(var(--accent-rgb),.34);background:linear-gradient(135deg,rgba(20,11,16,.96),rgba(7,5,7,.96));box-shadow:var(--shadow);clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}.partner-box:after{content:"SELECTED CREATORS";position:absolute;right:-53px;top:34px;transform:rotate(38deg);background:var(--red);padding:7px 58px;font-size:.58rem;font-weight:950;letter-spacing:.12em;color:#fff}.partner-box h2{font-size:clamp(3rem,6vw,5.7rem);margin:7px 0 22px}.partner-box p{color:#b9afb5;max-width:630px}.deal{display:grid;gap:12px;align-content:center}.deal-row{padding:18px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.023)}.deal-row b{display:block;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;margin-bottom:4px}.deal-row span{font-size:.86rem;color:#a99fa5}.deal-row b:before{content:"✦";color:var(--red);margin-right:9px}.partner-note{font-size:.69rem;color:#847b80;margin-top:13px;max-width:690px}


/* =========================================================
   15) ABLAUF + WERTE
   Arbeitsschritte und die vier Vorteilskarten.
   ========================================================= */
    .process{display:grid;grid-template-columns:.76fr 1.24fr;gap:54px;align-items:start}.process-intro{position:sticky;top:120px}.process-intro h2{font-size:clamp(3rem,5.4vw,5.1rem);margin:7px 0 18px}.process-intro p{color:var(--muted)}.steps{display:grid;gap:12px}.step{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,#0c080b,#080608);transition:.2s border-color}.step:hover{border-color:rgba(var(--accent-rgb),.35)}.step-num{font-family:Impact,sans-serif;font-style:italic;font-size:2.25rem;color:var(--red);text-shadow:0 0 14px rgba(var(--accent-rgb),.34)}.step h3{font-size:1rem;text-transform:uppercase;margin:1px 0 6px}.step p{margin:0;color:#9d9499;font-size:.9rem}
    .values{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.value{padding:25px 21px;border-top:2px solid var(--red);background:linear-gradient(180deg,rgba(var(--accent-rgb),.055),rgba(255,255,255,.018));min-height:178px}.value .ico{font-size:1.5rem;color:var(--red);filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.4))}.value h3{font-size:.96rem;text-transform:uppercase;margin:15px 0 6px}.value p{margin:0;color:#9d9499;font-size:.84rem}


/* =========================================================
   16) KONTAKT / FORMULAR + FOOTER
   ========================================================= */
    .contact{display:grid;grid-template-columns:.82fr 1.18fr;gap:36px;align-items:stretch}.contact-card,.form-card{border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#0d090c,#080608);padding:34px}.contact-card{border-color:rgba(var(--accent-rgb),.28);box-shadow:0 0 35px rgba(var(--accent-rgb),.06)}.contact-card h2{font-size:clamp(2.8rem,5vw,4.7rem);margin:8px 0 18px}.contact-card p{color:var(--muted)}.contact-points{display:grid;gap:11px;margin-top:26px}.contact-points div{padding:12px;border:1px solid rgba(255,255,255,.08);font-size:.8rem;text-transform:uppercase;font-weight:850;letter-spacing:.05em}.contact-points div:before{content:"//";color:var(--red);margin-right:8px}.form{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:#aca3a8;font-weight:900}.field input,.field textarea,.field select{width:100%;background:#090608;border:1px solid rgba(255,255,255,.11);color:#fff;padding:13px 14px;outline:none;border-radius:0}.field select option{background:#0b080a}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07)}.field textarea{min-height:142px;resize:vertical}.form .btn{grid-column:1/-1;justify-self:start}.hint{grid-column:1/-1;color:#756e72;font-size:.66rem}.quick-choice{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap;margin-top:1px}.quick-choice span{font-size:.61rem;padding:6px 8px;border:1px solid rgba(var(--accent-rgb),.20);color:#bfb6bb;background:rgba(var(--accent-rgb),.035)}
    footer{padding:34px 0 48px;border-top:1px solid rgba(255,255,255,.07);color:#8d858a}.footer{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}.footer nav{display:flex;gap:17px;flex-wrap:wrap;font-size:.69rem;text-transform:uppercase;font-weight:800}.footer small{font-size:.68rem}.toast{position:fixed;right:20px;bottom:20px;z-index:110;max-width:390px;background:#100a0e;border:1px solid rgba(var(--accent-rgb),.46);padding:14px 16px;box-shadow:var(--shadow);transform:translateY(130px);opacity:0;transition:.3s}.toast.show{transform:none;opacity:1}


/* =========================================================
   17) RESPONSIVE / TABLET + MOBILE
   Anpassungen für kleinere Bildschirme.
   ========================================================= */
    @media(max-width:1080px){.theme-caption{display:none}.theme-switcher{padding:7px}.manifesto-grid{grid-template-columns:1fr;gap:34px}.creative-pillars{grid-template-columns:repeat(2,1fr)}.links{gap:16px}.hero-grid{grid-template-columns:1fr .62fr;gap:34px}.services{grid-template-columns:repeat(2,1fr)}.values{grid-template-columns:repeat(2,1fr)}.case{grid-template-columns:1fr}.case-image{min-height:430px}.case-copy{padding:40px}.partner-box{grid-template-columns:1fr}.process{grid-template-columns:1fr}.process-intro{position:static}.contact{grid-template-columns:1fr}.section-head{grid-template-columns:1fr;gap:18px}.studio-grid{grid-template-columns:1fr}.brand-system{grid-template-columns:1fr}}
    @media(max-width:850px){.nav-actions>.btn{display:none}.theme-switcher{gap:6px}.theme-dot{width:21px;height:21px}.links{display:none}.mobile-toggle{display:block}.hero{min-height:735px}.hero:before{background:linear-gradient(180deg,rgba(3,2,3,.20),rgba(3,2,3,.67) 50%,rgba(3,2,3,.93) 91%),radial-gradient(circle at 72% 30%,rgba(var(--accent-rgb),.09),transparent 28%)}.hero-grid{grid-template-columns:1fr;padding:72px 0 58px;align-items:end}.hero-card{display:none}.hero-copy{align-self:end;margin-top:210px}h1{font-size:clamp(4.1rem,15vw,7rem)}.partner-box{padding:38px 28px}.services{grid-template-columns:1fr 1fr}}
    @media(max-width:620px){.theme-switcher{position:absolute;right:63px;gap:5px;padding:6px 7px}.theme-caption{display:none}.theme-dot{width:19px;height:19px}.manifesto{padding:62px 0 58px}.manifesto-quote{font-size:clamp(3rem,14vw,4.7rem)}.creative-pillars{grid-template-columns:1fr}.pillar{grid-template-columns:48px 1fr}.pillar-icon{width:42px;height:42px}.wrap{width:min(var(--max),calc(100% - 28px))}.nav-inner{height:66px}.brand-copy{font-size:.82rem}.brand-logo{width:56px;height:44px}.hero-brandmark{width:92px;margin-bottom:15px}.hero{min-height:700px}.hero-copy{margin-top:185px}h1{font-size:3.7rem}.lead{font-size:.97rem}.proof{gap:18px}.proof div{min-width:120px}.ticker-track{gap:20px;justify-content:flex-start}.ticker-track span:before{margin-right:20px}section{padding:76px 0}.section-head h2{font-size:3.2rem}.studio-copy{padding:28px 22px}.studio-facts{grid-template-columns:1fr}.services{grid-template-columns:1fr}.service{min-height:auto}.case-image{min-height:300px}.case-copy{padding:30px 23px}.brand-system{grid-template-columns:1fr}.mini-list{grid-template-columns:1fr}.partner-box{padding:34px 21px}.partner-box h2{font-size:3.45rem}.partner-box:after{display:none}.values{grid-template-columns:1fr}.step{grid-template-columns:52px 1fr;padding:18px 15px}.contact-card,.form-card{padding:26px 20px}.form{grid-template-columns:1fr}.field.full,.form .btn,.hint,.quick-choice{grid-column:auto}.footer{align-items:flex-start;flex-direction:column}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero:after,.storm-bg{animation:none}.storm-bg{transform:scale(1.06)}.ambient-canvas{opacity:.55}}


/* =========================================================
   18) KLEINE HILFSKLASSEN / FARBPUNKTE
   ========================================================= */
.swatch-crimson{--swatch:#800404}.swatch-orange{--swatch:#FF5F1F}.swatch-green{--swatch:#00EE00}.swatch-violet{--swatch:#9b4dff}.swatch-ice{--swatch:#00d9ff}
.section-tight{padding-top:20px}.text-white{color:#fff}
@media(max-width:620px){.hero-metal-logo{width:170px;margin-bottom:12px}}


/* =========================================================
   19) HALLOWEEN EDITION — ORANGE / BLACK
   Saison-Design 2026: Orange dauerhaft aktiv, klare Kontraste,
   Kürbisillustration, Spinnennetz und dezente Glüheffekte.
   ========================================================= */
html[data-theme="orange"]{
  --bg:#070604;--bg2:#0d0905;--panel:#160d08;--panel2:#1d100a;
  --text:#fff9f1;--muted:#bdaba0;--soft:#edd7c2;
  --accent:#ff681c;--accent-rgb:255,104,28;--accent-soft:#ffa34c;
  --accent-deep:#b83908;--accent-dark:#742506;--accent-deeper:#300d03;
  --storm-hue:0deg;--storm-bright:.78;--art-hue:48deg;--art-sat:1.18;
}
body{background:#050403;color:#fff9f1}
.storm-bg{background-image:url('assets/storm-halloween.png');filter:saturate(1.12) contrast(1.08) brightness(.66)}
.storm-bg:after{background:radial-gradient(circle at 52% 73%,rgba(255,108,29,.16),transparent 42%),linear-gradient(180deg,rgba(3,2,1,.17),rgba(3,2,1,.15) 52%,rgba(3,2,1,.56))}
.ambient-overlay{background:radial-gradient(circle at 48% 32%,transparent 0 18%,rgba(3,2,1,.16) 58%,rgba(3,2,1,.64) 100%),linear-gradient(90deg,rgba(3,2,1,.65),rgba(3,2,1,.36) 46%,rgba(3,2,1,.31)),linear-gradient(180deg,rgba(3,2,1,.07),rgba(3,2,1,.22) 46%,rgba(3,2,1,.63))}
.nav{border-color:rgba(255,131,50,.20);background:rgba(10,6,4,.92);box-shadow:0 10px 35px rgba(0,0,0,.23)}
.links a{color:#ddcfc1}.links a:hover{color:#fff0d6}
.brand-copy small{color:#ff8b38}.btn{background:linear-gradient(122deg,#ff8d2e 0%,#f35c0c 38%,#b92d04 100%);border-color:#ff8733;box-shadow:0 5px 28px rgba(248,90,16,.27),inset 0 1px 0 rgba(255,224,161,.32)}
.btn.secondary{background:rgba(21,12,6,.77);border-color:rgba(255,155,75,.36)}
.btn:focus-visible,.links a:focus-visible{outline:2px solid #ffc777;outline-offset:5px}
.halloween-nav-badge{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 13px;border:1px solid rgba(255,143,48,.35);border-radius:2px;background:linear-gradient(145deg,rgba(255,112,21,.13),rgba(255,112,21,.035));color:#ffd08f;font-size:.62rem;letter-spacing:.16em;font-weight:950;box-shadow:inset 0 0 18px rgba(255,123,27,.06)}
.halloween-badge-icon{font-size:1rem;color:#ff7c21;text-shadow:0 0 12px rgba(255,104,28,.9)}.halloween-badge-year{color:#ff8224}
.halloween-ribbon{position:relative;z-index:4;overflow:hidden;border-bottom:1px solid rgba(255,153,56,.25);height:37px;display:flex;align-items:center;background:linear-gradient(90deg,#441a05,#78300b 45%,#411806)}
.halloween-ribbon-track{width:max-content;min-width:100%;margin:auto;display:flex;align-items:center;justify-content:space-around;gap:clamp(15px,4vw,65px);white-space:nowrap;color:#ffd8ae;font-size:.58rem;letter-spacing:.25em;font-weight:950;text-transform:uppercase;text-shadow:0 0 12px rgba(255,152,65,.3)}
.halloween-ribbon-track span:nth-child(2n){color:#ffab54}
.hero{min-height:835px}
.hero:before{background:radial-gradient(circle at 76% 47%,rgba(255,107,24,.14),transparent 38%),linear-gradient(90deg,rgba(5,3,2,.89),rgba(5,3,2,.72) 37%,rgba(5,3,2,.23) 75%,rgba(5,3,2,.36)),linear-gradient(0deg,rgba(4,2,1,.3),rgba(4,2,1,.01))}
.hero:after{opacity:.58}
.hero-cobweb{position:absolute;z-index:1;right:0;top:0;width:min(310px,30vw);opacity:.40;pointer-events:none;filter:drop-shadow(0 0 15px rgba(255,99,12,.2))}
.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(340px,.70fr);gap:42px;padding:91px 0 85px}
.season-tag{display:inline-flex;align-items:center;gap:12px;font-size:.62rem;line-height:1.3;letter-spacing:.19em;font-weight:950;color:#ffb667;white-space:nowrap;margin-bottom:21px}
.season-tag-star{font-size:1.35rem;line-height:1;color:#ff8929;filter:drop-shadow(0 0 9px rgba(255,110,25,.9))}
.season-tag-rule{width:29px;height:1px;background:rgba(255,157,66,.65)}
.hero-metal-logo{margin-bottom:21px}
.eyebrow{color:#ffe1bc;border-color:rgba(255,140,59,.4);background:rgba(74,31,6,.45)}
h1{margin-top:24px;margin-bottom:16px;text-shadow:4px 5px 0 rgba(128,37,5,.45)}
h1 .line2{text-shadow:3px 4px 0 #3c1205,0 0 23px rgba(252,93,12,.30)}
.red{color:#ff7626;text-shadow:0 0 24px rgba(251,102,26,.55)}
.halloween-hero-line{display:flex;align-items:center;gap:12px;font-size:.77rem;font-weight:950;letter-spacing:.19em;color:#ffc58c;margin:0 0 17px}
.halloween-line-mark{color:#ff7626;letter-spacing:.02em;font-size:1.15rem}
.lead{color:#dac8b8}.proof{border-top-color:rgba(255,144,62,.25)}.proof span{color:#bea494}
.halloween-card{padding:14px;max-width:426px;overflow:visible;border-color:rgba(255,136,35,.42);background:linear-gradient(150deg,rgba(31,17,8,.96),rgba(9,7,5,.98));box-shadow:0 22px 70px rgba(0,0,0,.52),0 0 55px rgba(255,100,13,.14);transform:rotate(1.5deg)}
.halloween-card:before{display:none}
.halloween-showcase{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1 / 1.06;background:radial-gradient(circle at 50% 44%,#72310c 0%,#281307 31%,#0c0805 73%);border:1px solid rgba(255,156,69,.2)}
.halloween-showcase:before{content:"";position:absolute;inset:8px;z-index:3;border:1px solid rgba(255,153,57,.22);pointer-events:none;clip-path:polygon(0 25px,25px 0,100% 0,100% calc(100% - 25px),calc(100% - 25px) 100%,0 100%)}
.halloween-showcase:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,3,2,.55),transparent 26%,transparent 60%,rgba(5,3,2,.80) 100%)}
.pumpkin-art{position:absolute;width:112%;max-width:none;left:-6%;top:2%;height:91%;object-fit:contain;filter:drop-shadow(0 0 25px rgba(255,108,8,.17));animation:pumpkinFloat 6s ease-in-out infinite alternate;pointer-events:none}
@keyframes pumpkinFloat{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-8px) scale(1.025)}}
.showcase-heading{position:absolute;z-index:4;top:22px;left:24px;right:22px;display:flex;align-items:center;gap:9px;color:#ffdaad;font-size:.60rem;font-weight:950;letter-spacing:.14em}
.live-dot{width:7px;height:7px;background:#ff7f2a;box-shadow:0 0 12px #ff711b;border-radius:50%;animation:livePulse 2.4s infinite alternate}
@keyframes livePulse{to{opacity:.36}}
.showcase-index{margin-left:auto;color:#ff9546}
.showcase-bottom{position:absolute;z-index:4;bottom:25px;left:24px;right:20px;display:grid;gap:1px}
.showcase-bottom>span{font-family:Impact,'Arial Narrow Bold',sans-serif;font-size:clamp(1.6rem,3vw,2.3rem);font-style:italic;letter-spacing:.09em;color:#fff7ed;line-height:1;text-shadow:0 5px 18px #110907}
.showcase-outline{display:block;color:#ff942f;filter:drop-shadow(0 0 13px rgba(255,100,24,.4))}
.showcase-bottom small{color:#ffcf97;font-weight:900;letter-spacing:.21em;font-size:.52rem;margin-top:11px}
.halloween-card .hero-card-copy{padding:17px 7px 7px}
.halloween-card .hero-card-copy .kicker{color:#ff9d46}
.halloween-card .hero-card-copy p{color:#bda99c}
.metal{background-image:linear-gradient(180deg,#fff 2%,#e5d9c7 39%,#fff9f0 66%,#968478)}
.kicker{color:#ff8c33}
/* Give existing surfaces warm coal / glowing ember rather than burgundy undertones. */
.studio-copy,.service,.case,.system-card,.contact-card,.form-card,.step,.deal-row{border-color:rgba(255,157,75,.12)}
.studio-copy,.case,.contact-card,.form-card{background:linear-gradient(150deg,rgba(28,16,10,.94),rgba(11,8,6,.96))}
.system-card{background:#100a06}.system-card.featured{background:linear-gradient(145deg,#291608,#0c0906)}
.step{background:linear-gradient(90deg,#1a100a,#0b0805)}
.partner-box{background:linear-gradient(140deg,rgba(38,19,8,.97),rgba(11,7,5,.97))}
.deal-row{background:rgba(255,164,70,.025)}
.field input,.field textarea,.field select{background:#0d0906}.field select option{background:#0d0906}
.ticker{border-color:rgba(255,138,43,.25);background:rgba(53,20,3,.65)}
.ticker-track span{color:#fff0dc}
.manifesto{position:relative}
.manifesto:after{content:"";position:absolute;right:0;top:0;width:215px;height:215px;background:url('assets/halloween-web.svg') center/contain no-repeat;transform:rotate(90deg);opacity:.12;pointer-events:none}
.service:hover{background:linear-gradient(160deg,rgba(255,117,27,.11),rgba(32,15,6,.5))}
.contact-card{background-image:radial-gradient(circle at 0 100%,rgba(255,122,24,.11),transparent 50%),linear-gradient(150deg,#201107,#0b0806)}
footer{background:rgba(6,4,3,.88);border-top-color:rgba(255,137,42,.25)}
.footer-halloween{color:#ff9b42;font-weight:950;letter-spacing:.09em;margin-left:9px}
@media(max-width:1080px){.halloween-nav-badge{display:none}.hero-grid{grid-template-columns:1fr .65fr;gap:26px}.halloween-showcase{aspect-ratio:1/1.10}.showcase-bottom>span{font-size:clamp(1.55rem,3vw,2rem)}}
@media(max-width:850px){.hero{min-height:745px}.hero-grid{grid-template-columns:1fr;padding-top:68px}.hero-copy{margin-top:100px}.halloween-card{display:none}.hero-cobweb{width:240px;opacity:.21}.halloween-ribbon-track span:last-child{display:none}}
@media(max-width:620px){.halloween-ribbon{height:31px}.halloween-ribbon-track{font-size:.51rem;gap:28px}.halloween-ribbon-track span:nth-child(n+3){display:none}.hero{min-height:720px}.hero-grid{padding-top:55px}.hero-copy{margin-top:130px}.season-tag{font-size:.51rem;gap:7px;letter-spacing:.10em;white-space:normal}.season-tag-rule{width:12px}.hero-metal-logo{width:165px;margin-bottom:14px}.halloween-hero-line{font-size:.65rem;letter-spacing:.13em}.footer-halloween{display:block;margin:6px 0 0}.hero-cobweb{width:175px}}
@media(prefers-reduced-motion:reduce){.pumpkin-art,.live-dot{animation:none}}

/* Halloween layout tuning: keep logo, heading and action in the first screen. */
@media(min-width:851px){
  .hero{min-height:725px}
  .hero-grid{padding:48px 0 59px}
  .hero-metal-logo{width:174px;margin-bottom:14px}
  .hero h1{font-size:clamp(4.4rem,6.5vw,6.55rem);margin-top:18px;margin-bottom:10px}
  .hero .lead{font-size:1rem;line-height:1.5}
  .hero .proof{margin-top:28px}
  .hero .hero-actions{margin-top:23px}
  .season-tag{margin-bottom:11px}
}
@media(max-width:850px){
  .hero{min-height:auto}
  .hero-grid{padding:55px 0 65px}
  .hero-copy{margin-top:0}
}
@media(max-width:620px){
  .hero-grid{padding:51px 0 66px}
  .hero-copy{margin-top:0}
  .hero h1{font-size:clamp(3rem,13.5vw,3.65rem);margin-top:20px}
  .hero .proof{margin-top:30px}
  .manifesto-grid>*,.section-head>*,.studio-grid>*,.brand-system>*,.partner-box>*,.contact>*,.process>*{min-width:0}
  .manifesto-quote{font-size:clamp(2.4rem,10.5vw,3.2rem)}
  .section-head h2{font-size:clamp(2.6rem,11vw,3.2rem)}
  .studio-copy h2,.partner-box h2,.contact-card h2,.process-intro h2{font-size:clamp(2.6rem,11vw,3.4rem)}
  h2,h3{overflow-wrap:break-word}
}

/* A subtle pumpkin is retained on mobile where the full showcase card is hidden. */
.hero-mobile-pumpkin{display:none}
@media(max-width:850px){.hero-mobile-pumpkin{display:block;position:absolute;top:30px;right:-39px;width:225px;z-index:1;opacity:.16;filter:saturate(1.3) drop-shadow(0 0 12px rgba(255,107,24,.25));pointer-events:none}}
@media(max-width:620px){.hero-mobile-pumpkin{top:30px;right:-40px;width:205px;opacity:.16}}

/* =========================================================
   20) HALLOWEEN AFTER DARK — VERTEILTE DEKORATION
   Zusätzliche Spinnennetze, herabkletternde Spinnen,
   fliegende Fledermäuse und sechs individuelle Kürbisgesichter.
   Sämtliche Effekte sind rein dekorativ und überdecken keine
   Buttons oder Formularfelder (pointer-events: none).
   ========================================================= */
.spooky-zone{position:relative;isolation:isolate;overflow:hidden}
.spooky-zone>.wrap,.spooky-zone>.hero-grid{position:relative;z-index:2}
.spooky-zone>.spooky-decor{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.spooky-decor img{display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.h-web{position:absolute;width:225px;height:auto;opacity:.28;filter:drop-shadow(0 0 12px rgba(252,99,21,.25));transform-origin:50% 50%}
/* The artwork starts top-left. Mirror and rotate it for other corners. */
.web-hero-left{left:0;top:0;width:208px;opacity:.23;transform:scaleX(-1)}
.web-manifesto-left{left:-10px;bottom:-7px;width:200px;opacity:.34;transform:scaleY(-1)}
.web-studio{left:-6px;top:0;width:250px;opacity:.31}
.web-work{right:0;top:0;width:270px;opacity:.29;transform:scaleX(-1)}
.web-services{left:0;top:0;width:260px;opacity:.31}
.web-brand{right:0;bottom:0;width:205px;opacity:.29;transform:scale(-1)}
.web-partner{left:0;top:0;width:235px;opacity:.35}
.web-process{right:0;top:0;width:245px;opacity:.29;transform:scaleX(-1)}
.web-values{left:0;bottom:0;width:185px;opacity:.28;transform:scaleY(-1)}
.web-contact-left{left:0;top:0;width:235px;opacity:.35}
.web-contact-right{right:0;bottom:0;width:190px;opacity:.27;transform:scale(-1)}

/* Jack-o'-lanterns: six distinct hand-drawn expressions. */
.h-pumpkin{position:absolute;width:145px;height:auto;opacity:.9;filter:drop-shadow(0 7px 8px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(255,107,25,.26));transform-origin:center 84%;animation:h-pumpkin-breathe 5.6s ease-in-out infinite alternate;will-change:transform}
@keyframes h-pumpkin-breathe{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-9px) rotate(2deg)}}
.pumpkin-hero{right:-13px;bottom:-27px;width:126px;opacity:.9;animation-delay:-2s}
.pumpkin-manifesto{right:-16px;bottom:-22px;width:164px;opacity:.84;animation-delay:-.8s}
.pumpkin-studio{right:-23px;bottom:-16px;width:171px;opacity:.92;animation-delay:-3.1s}
.pumpkin-work{left:-28px;bottom:9%;width:150px;opacity:.87;animation-delay:-1.2s}
.pumpkin-services{right:-24px;top:48%;width:177px;opacity:.87;animation-delay:-2.3s}
.pumpkin-brand{left:-23px;bottom:-22px;width:161px;opacity:.92;animation-delay:-4s}
.pumpkin-partner{right:-19px;bottom:-24px;width:187px;opacity:.91;animation-delay:-.2s}
.pumpkin-process{left:-25px;bottom:-18px;width:156px;opacity:.89;animation-delay:-3.3s}
.pumpkin-values{right:-12px;bottom:-23px;width:144px;opacity:.90;animation-delay:-1.6s}
.pumpkin-contact-left{left:-35px;bottom:-25px;width:142px;opacity:.84;animation-delay:-2.9s}
.pumpkin-contact-right{right:-25px;bottom:-23px;width:162px;opacity:.88;animation-delay:-1.1s}

/* An animated spider dangling from a silvery-orange silk thread. */
.h-spider{position:absolute;top:0;left:var(--spider-x,88%);width:80px;height:var(--silk-height,165px);transform:translateX(-50%);transform-origin:top center;animation:h-spider-sway 6.7s ease-in-out infinite alternate}
.h-silk{position:absolute;top:0;left:50%;height:calc(100% - 53px);width:1px;background:linear-gradient(#ffe2b485,#ed9a5da1,#ffd293c7);box-shadow:0 0 5px #ff9c3c6a}
.h-spider img{position:absolute;width:75px;bottom:0;left:50%;opacity:.95;transform:translateX(-50%);filter:drop-shadow(0 0 8px rgba(255,112,33,.34));animation:h-spider-crawl 7s ease-in-out infinite alternate}
@keyframes h-spider-sway{0%,100%{transform:translateX(-50%) rotate(-5deg)}50%{transform:translateX(-50%) rotate(5deg)}}
@keyframes h-spider-crawl{0%,13%{transform:translate(-50%,0)}39%,53%{transform:translate(-50%,-26px)}82%,100%{transform:translate(-50%,0)}}
.spider-hero{--spider-x:78%;--silk-height:190px;animation-delay:-1.6s}
.spider-manifesto{--spider-x:91%;--silk-height:158px;animation-delay:-4s}
.spider-studio{--spider-x:8%;--silk-height:192px;animation-delay:-3s}
.spider-services{--spider-x:91%;--silk-height:182px;animation-delay:-1.1s}
.spider-partner{--spider-x:7%;--silk-height:179px;animation-delay:-2.6s}
.spider-process{--spider-x:92%;--silk-height:165px;animation-delay:-1.4s}
.spider-contact{--spider-x:92%;--silk-height:187px;animation-delay:-3.5s}

/* Small bat flocks flying across the scene, without catching input. */
.h-bat{position:absolute;left:-180px;top:var(--bat-top,120px);display:block;width:var(--bat-size,90px);opacity:0;will-change:transform;animation:h-bat-flight var(--flight-duration,19s) linear var(--flight-delay,0s) infinite}
.h-bat img{width:100%;height:auto;filter:drop-shadow(0 0 8px rgba(255,103,25,.62));transform-origin:50% 48%;animation:h-bat-flutter .36s ease-in-out infinite alternate}
@keyframes h-bat-flutter{from{transform:scaleY(1) rotate(-4deg)}to{transform:scaleY(.52) rotate(3deg)}}
@keyframes h-bat-flight{0%{opacity:0;transform:translate3d(-30px,35px,0) scale(.8)}10%{opacity:.75}45%{opacity:.83}88%{opacity:.69}100%{opacity:0;transform:translate3d(calc(100vw + 450px),-50px,0) scale(1.15)}}
.bat-hero-a{--bat-top:90px;--bat-size:95px;--flight-duration:22s;--flight-delay:-3s}
.bat-hero-b{--bat-top:175px;--bat-size:66px;--flight-duration:25s;--flight-delay:-14s}
.bat-work{--bat-top:85px;--bat-size:73px;--flight-duration:28s;--flight-delay:-19s}
.bat-partner-a{--bat-top:30px;--bat-size:88px;--flight-duration:21s;--flight-delay:-9s}
.bat-partner-b{--bat-top:155px;--bat-size:58px;--flight-duration:24s;--flight-delay:-16s}

/* Smaller devices have less room: keep the atmosphere, protect content. */
@media(max-width:850px){
  .h-web{width:160px;opacity:.23}
  .h-pumpkin{width:112px;opacity:.69}
  .pumpkin-hero{width:110px;right:-17px;bottom:-17px}
  .pumpkin-manifesto,.pumpkin-studio,.pumpkin-partner,.pumpkin-services{width:122px}
  .pumpkin-contact-right{width:123px}
  .h-spider{width:59px;height:125px}
  .h-spider img{width:57px}
  .h-silk{height:calc(100% - 45px)}
  .spider-hero{--spider-x:84%}
  .spider-studio{--spider-x:8%}
  .spider-services{--spider-x:92%}
  .h-bat{--bat-size:57px}
}
@media(max-width:620px){
  .h-web{width:130px;opacity:.19}
  .web-hero-left{width:125px}
  .web-manifesto-left,.web-work,.web-services{width:140px}
  .web-contact-right{width:130px}
  .h-pumpkin{width:88px;opacity:.68}
  .pumpkin-hero{width:84px;right:-13px;bottom:-15px}
  .pumpkin-manifesto{right:-21px;bottom:-16px;width:99px}
  .pumpkin-studio{width:98px;right:-19px;bottom:-14px}
  .pumpkin-work{width:97px;left:-22px;bottom:0}
  .pumpkin-services{width:99px;right:-20px;top:56%}
  .pumpkin-brand{width:93px;left:-18px}
  .pumpkin-partner{width:105px;right:-20px;bottom:-15px}
  .pumpkin-process{width:95px;left:-20px}
  .pumpkin-contact-left{width:88px;left:-22px}
  .pumpkin-contact-right{width:90px;right:-20px}
  .h-spider{width:49px;height:110px;opacity:.85}
  .h-spider img{width:46px}
  .h-silk{height:calc(100% - 35px)}
  .spider-hero{--spider-x:88%;height:116px}
  .spider-manifesto{--spider-x:92%}
  .spider-studio,.spider-partner{--spider-x:9%}
  .spider-services,.spider-process,.spider-contact{--spider-x:93%}
  .bat-hero-b,.bat-work,.bat-partner-b{display:none}
}
@media(prefers-reduced-motion:reduce){
  .h-spider,.h-spider img,.h-bat,.h-bat img,.h-pumpkin{animation:none!important;will-change:auto}
  .h-bat{opacity:.38;left:12%;top:22px;transform:none}
  .bat-hero-b,.bat-partner-b{left:68%;top:55px}
}


/* =========================================================
   21) HALLOWEEN AFTER DARK – GEISTER & SKELETTE (V3)
   Extra handgezeichnete, animierte Motive. Reine Dekoration,
   klicksicher, responsiv und mit Reduced-Motion-Unterstützung.
   ========================================================= */
.h-ghost,.h-skeleton{position:absolute;display:block;height:auto;max-width:none;user-select:none;pointer-events:none;transform-origin:50% 65%;will-change:transform}
.h-ghost{width:137px;opacity:.87;filter:drop-shadow(0 5px 15px rgba(255,105,27,.28)) drop-shadow(0 0 23px rgba(255,210,167,.20));animation:h-ghost-float var(--ghost-speed,5.6s) ease-in-out var(--ghost-delay,0s) infinite alternate}
.h-skeleton{width:137px;opacity:.88;filter:drop-shadow(0 8px 9px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(245,112,40,.28));animation:h-skeleton-groove var(--skel-speed,6s) ease-in-out var(--skel-delay,0s) infinite alternate;transform-origin:50% 91%}
@keyframes h-ghost-float{0%{transform:translate3d(-4px,8px,0) rotate(-6deg)}50%{transform:translate3d(7px,-12px,0) rotate(4deg)}100%{transform:translate3d(-2px,3px,0) rotate(-3deg)}}
@keyframes h-skeleton-groove{0%{transform:translateY(2px) rotate(-5deg)}50%{transform:translateY(-8px) rotate(5deg)}100%{transform:translateY(-1px) rotate(-2deg)}}
/* Ghosts glide around the sections, skeletons peek in from the sidelines. */
.ghost-hero{right:0;top:32%;width:122px;opacity:.79;--ghost-delay:-1.4s}
.ghost-manifesto{left:4px;top:7%;width:102px;opacity:.67;--ghost-speed:6.4s}
.skeleton-manifesto{right:-15px;top:14%;width:119px;opacity:.65;--skel-delay:-2s}
.ghost-studio{right:0;top:5%;width:133px;--ghost-delay:-3.6s}
.skeleton-studio{left:-25px;bottom:0;width:125px;--skel-delay:-1s}
.skeleton-work{right:-15px;top:14%;width:129px;--skel-delay:-2.7s}
.ghost-work{right:3px;bottom:4%;width:116px;opacity:.74;--ghost-delay:-4s}
.ghost-services{left:-17px;top:12%;width:110px;opacity:.74;--ghost-delay:-2.5s}
.skeleton-services{right:-16px;bottom:5%;width:138px;--skel-delay:-3s}
.ghost-brand{right:7px;top:11%;width:119px;--ghost-speed:7s}
.ghost-partner{left:-2px;top:25%;width:116px;opacity:.77;--ghost-delay:-2s}
.skeleton-partner{right:-23px;top:3%;width:136px;opacity:.83;--skel-delay:-2.2s}
.skeleton-process{right:-15px;bottom:2%;width:128px;--skel-delay:-3.2s}
.ghost-process{left:5px;top:15%;width:115px;opacity:.80;--ghost-delay:-1.7s}
.ghost-values{right:0;top:9%;width:114px;opacity:.79;--ghost-delay:-2.6s}
.ghost-contact{left:5px;top:7%;width:113px;--ghost-delay:-1.3s}
.skeleton-contact{right:-24px;bottom:0;width:132px;--skel-delay:-4.4s}
@media(max-width:1080px){
 .h-ghost{width:95px;opacity:.69}
 .h-skeleton{width:105px;opacity:.68}
 .ghost-hero{right:-12px;top:28%}
 .ghost-studio{top:1%}
 .skeleton-manifesto{top:28%}
}
@media(max-width:620px){
 .h-ghost{width:71px;opacity:.64;filter:drop-shadow(0 0 12px rgba(255,115,44,.33))}
 .h-skeleton{width:76px;opacity:.57;filter:drop-shadow(0 0 7px rgba(255,115,44,.28))}
 .ghost-hero{right:-9px;top:18%;width:76px;opacity:.59}
 .ghost-manifesto{left:-15px;top:auto;bottom:11%;width:78px}
 .skeleton-manifesto{display:none}
 .ghost-studio{right:-15px;top:1%;width:74px}
 .skeleton-studio{left:-22px;bottom:2%;width:68px}
 .skeleton-work{right:-26px;top:18%;width:78px}
 .ghost-work{right:-15px;bottom:10%;width:71px}
 .ghost-services{left:-18px;top:11%;width:71px}
 .skeleton-services{right:-25px;bottom:5%;width:77px}
 .ghost-brand{right:-14px;top:8%;width:77px}
 .ghost-partner{left:-20px;top:12%;width:74px}
 .skeleton-partner{right:-23px;top:0;width:79px}
 .skeleton-process{right:-23px;bottom:2%;width:76px}
 .ghost-process{left:-18px;top:3%;width:73px}
 .ghost-values{right:-12px;top:0;width:69px}
 .ghost-contact{left:-17px;top:2%;width:72px}
 .skeleton-contact{right:-25px;bottom:0;width:75px}
}
@media(prefers-reduced-motion:reduce){
 .h-ghost,.h-skeleton{animation:none!important;will-change:auto}
}