/* =========================================================
   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}}