/* ================================================================= OMNI CANVAS STUDIO - Website Boutique digital studio. Helle Basis, Schwarz als Struktur, Kupfer als lebendiges Licht. Cormorant Garamond + Manrope. Schriften lokal gehostet (DSGVO) - siehe ../fonts/fonts.css ================================================================= */ @import url("../fonts/fonts.css"); :root{ --ink:#14110B; /* dunkle Basis (Hero, dunkle Bänder) */ --ink-2:#0B0906; --ivory:#F3EEE4; /* heller Seitenhintergrund */ --ivory-2:#FBF8F1; --card:#FFFFFF; --copper:#B87723; --copper-lt:#D89B4E; --copper-deep:#8F5E14; /* cobre AA sobre marfim (4,81:1) - rótulos pequenos */ --pulse-body:#D89B4E; /* corrente de cobre - corpo do pulso (= copper-lt) */ --pulse-core:#F0C083; /* corrente de cobre - núcleo claro do pulso */ --pulse-glow:rgba(216,155,78,.55); /* corrente de cobre - glow único do site */ --text:#1C1813; --text-soft:#6E6457; --text-faint:#9A9082; --line:rgba(28,24,19,0.12); --line-dk:rgba(216,155,78,0.18); --matte:#0C0B09; --charcoal:#191C1C; --header-h:74px; /* régua ÚNICA dos títulos de seção (2026-06-11: «todos do mesmo tamanho e tipografia») - 46px @1440 · 30px @375; usada por .s-title, .leist-title, .fw-mega e .cta-final h2. Display-Momente (KLAR-Buchstaben, Studio-Kapitelworte, Manifest-Zeilen) sind KEINE Sektionstitel. */ --title-size:clamp(30px,3.4vw,46px); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);overflow-x:clip} body{ font-family:'Manrope',system-ui,sans-serif; background:var(--ivory); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; /* A - junto com html: contém microbarra horizontal de camadas compostas (gcell/leque) */ } a{text-decoration:none;color:inherit} img{display:block;max-width:100%} .serif{font-family:'Cormorant Garamond',Georgia,serif} :focus-visible{outline:2px solid var(--copper-deep);outline-offset:3px;border-radius:4px} [data-theme="dark"] :focus-visible{outline-color:var(--copper-lt)} /* Sprungmarke „Zum Inhalt springen" - Barrierefreiheit (WCAG 2.4.1 Bypass Blocks) */ .skip{position:fixed;left:14px;top:-64px;z-index:200;background:var(--ink);color:var(--ivory); padding:11px 18px;border-radius:7px;font-size:13px;font-weight:600;letter-spacing:.01em; border:1px solid var(--copper);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:top .18s ease} .skip:focus{top:14px;outline:2px solid var(--copper-lt);outline-offset:2px} /* ================================================================= HEADER - fixiert, transparent über der Hero, dunkel beim Scrollen ================================================================= */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:90;color:var(--ivory); transition:color .4s ease,padding .35s ease; border-bottom:1px solid transparent; } /* sem barra marcada ao rolar (ref. fromanother): leve compactação + SCRIM de vidro (fix A1 2026-06-11): gradiente sutil + blur leve que ACOMPANHA o tema do header (.on-dark → tinta escura / .on-light → marfim), com mask que desfaz a borda inferior - nunca texto-sobre-texto, nunca caixa destoante. Mesma família do vidro das Rechtsseiten (.legal-top) e do menu-overlay. */ .site-header.scrolled{background:transparent;border-color:transparent;box-shadow:none} .site-header.scrolled .nav-inner{padding-top:14px;padding-bottom:14px} .site-header::before{content:"";position:absolute;inset:0 0 -18px;z-index:-1;pointer-events:none; opacity:0;transition:opacity .4s ease,background .4s ease; -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px); -webkit-mask:linear-gradient(180deg,#000 62%,transparent); mask:linear-gradient(180deg,#000 62%,transparent)} .site-header.scrolled::before{opacity:1} .site-header.on-dark::before{background:linear-gradient(180deg,rgba(11,9,6,.82),rgba(11,9,6,.46) 62%,rgba(11,9,6,0))} .site-header.on-light::before{background:linear-gradient(180deg,rgba(243,238,228,.88),rgba(243,238,228,.5) 62%,rgba(243,238,228,0))} @media (prefers-reduced-motion:reduce){.site-header::before{transition:none}} .nav-inner{ max-width:1240px;margin:0 auto; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px; padding:18px 40px; } .brand{display:inline-block;flex:none} /* inline-block: preserva os espaços de "Omni Canvas Studio" sob background-clip:text (Carol 2026-06-17) */ /* (marca do header é TEXTO; .brand img vive só nas Rechtsseiten via .legal-top .brand img) */ /* Sprachwähler */ .langsel{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:0.1em} .langsel a{color:rgba(243,238,228,0.5);transition:color .15s ease} .langsel a:hover{color:#fff} .langsel a.on{color:var(--copper-lt)} .langsel a.soon{color:rgba(243,238,228,0.32);cursor:default} .langsel a.soon:hover{color:rgba(243,238,228,0.32)} .langsel .sep{opacity:.4;color:rgba(243,238,228,0.5)} /* rechte Gruppe im Header: Sprachwähler + persistenter CTA «Projekt anfragen →» */ .nav-right{display:inline-flex;align-items:center;gap:20px;flex:none} .nav-cta{display:inline-flex;align-items:center;gap:7px;white-space:nowrap; font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:rgba(243,238,228,.9);transition:color .2s ease} .nav-cta:hover{color:var(--copper-lt)} .nav-cta .arr{transition:transform .2s ease} .nav-cta:hover .arr{transform:translateX(3px)} /* --- Header mobile (ref. fromanother, pedido 2026-06-16): só os tracinhos tracinhos + "Vamos conversar" à DIREITA (igual fromanother), MARCA à ESQUERDA acompanhando o site todo (transparente, muda de cor com o tema), idioma vai pro menu. A marca some perto do rodapé pra não colidir com a marca do footer. --- */ @media (max-width:760px){ .nav-inner{display:flex;align-items:center;gap:12px;padding:16px 22px} .mt-label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .site-header .brand{order:1;margin-right:auto;white-space:nowrap;font-family:'Cormorant Garamond',serif;font-size:19px;letter-spacing:.01em} .nav-right{order:2;gap:12px} .menu-trigger{order:3} /* circuito da hero "dribla" o header: fade na faixa de cima pra não conflitar com "Omni Canvas Studio" (pedido 2026-06-16). Mais circuitos vêm no rebuild da hero. */ .hero-loco .circuit{-webkit-mask:linear-gradient(180deg,transparent 0,transparent 56px,#000 112px);mask:linear-gradient(180deg,transparent 0,transparent 56px,#000 112px)} .langsel{display:none} /* na barra de cima o idioma NÃO aparece no mobile (vai pro hero, perto do circuito) */ .nav-cta{font-size:10px;letter-spacing:.1em} .nav-cta .arr{display:none} /* só a MARCA some quando chega pertinho da marca do rodapé (sem tampar); CTA + tracinhos ficam */ .site-header.brand-near-foot .brand{opacity:0;pointer-events:none;transition:opacity .3s ease} } /* ================================================================= BUTTON GLOBAL - Kupfer-CTA (vive no Kontakt-Block; a hero v1 que o originou foi removida em 2026-06-11 com a entrada do hero-circuito) ================================================================= */ .btn-copper{ display:inline-flex;align-items:center;gap:10px; font-size:11.5px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase; color:#14110B;background:linear-gradient(100deg,var(--copper),var(--copper-lt)); padding:15px 26px;border-radius:9px; box-shadow:0 14px 30px -14px rgba(216,155,78,0.45); transition:transform .2s ease,box-shadow .2s ease; } .btn-copper:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(216,155,78,0.55)} .btn-copper svg{color:#14110B} /* ================================================================= HELLE SEKTIONEN ================================================================= */ .section{max-width:1240px;margin:0 auto;padding:clamp(84px,11vh,120px) 40px} /* respiro proporcional à viewport */ .eyebrow{font-size:11px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--copper-deep);margin-bottom:14px} /* AA 4,81:1 sobre marfim (#B87723 dava 3,19:1); fundos escuros sobrescrevem com copper-lt */ .s-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:var(--title-size);line-height:1.1;letter-spacing:0.005em;max-width:640px} .s-title em{font-style:italic;color:var(--copper)} .s-title .kw{font-style:normal;color:var(--copper);letter-spacing:.05em} .s-lead{font-size:15px;color:var(--text-soft);max-width:560px;margin-top:16px;line-height:1.7} /* ken-burns: deriva lenta e contínua (usado pelo filmgrid .gcell img) */ @keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.1)}} /* ================================================================= SCROLL-EXPAND - Konzeptfilm zentral, Vitrine ringsum (2026-06) - der Rahmen wächst mit dem Scroll (--p: 0→1, von site.js). Video spielt immer vorwärts in Schleife; nur das Fenster wächst. ================================================================= */ .filmstage{position:relative;margin:54px calc(50% - 50vw) 0;height:320vh} .filmsticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden; display:flex;align-items:center;justify-content:center;background:#050403;perspective:1600px} /* leichter Kupferschimmer hinter der Bühne, blendet beim Expandieren aus */ .filmsticky::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(70vw 50vh at 50% 50%,rgba(216,155,78,.10),transparent 64%); opacity:calc(1 - var(--p,0))} /* GRADE 6×3 - POUCOS quadros GRANDES que ENCHEM a largura (não muitos minúsculos). Célula = min(largura/6, altura/3): grande quanto a tela permite, cabendo sempre (até 1366×768). Buraco central (linha 2, colunas 2-5) = vídeo fino. Desmonta do CENTRO pra fora. */ .filmgrid{position:relative;z-index:1;display:grid;--gap:16px; --cell:clamp(170px, min(calc((95vw - 5*var(--gap)) / 6), calc((92vh - 2*var(--gap)) / 3)), 360px); grid-template-columns:repeat(6,var(--cell)); grid-template-rows:repeat(3,var(--cell));gap:var(--gap);transform-style:preserve-3d} .gcell{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden; border:1px solid var(--line-dk);background:#15110b;box-shadow:0 22px 48px -28px rgba(0,0,0,.8); transform-origin:center;will-change:transform,opacity; --lp:clamp(0,calc((var(--p,0) - var(--delay,0)) / 0.55),1); transform:translate(calc(var(--ox,0) * var(--lp)), calc(var(--oy,0) * var(--lp))) rotateX(calc(var(--rx,0) * var(--lp))) rotateY(calc(var(--ry,0) * var(--lp))) rotate(calc(var(--rot,0) * var(--lp))) scale(calc(1 - 0.25 * var(--lp))); opacity:calc(1 - var(--lp))} .gcell img{width:100%;height:100%;object-fit:cover;display:block; animation:kenburns 32s ease-in-out infinite alternate} .gcell:nth-child(2n) img{animation-duration:36s;animation-delay:-9s} .gcell:nth-child(3n) img{animation-duration:27s;animation-delay:-15s} .gcell::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:radial-gradient(130% 120% at 50% 40%,transparent 58%,rgba(5,5,7,.45)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} /* vídeo central FINO → cresce em 2 ETAPAS (largura de p .10→.55, altura de p .45→.90), por LARGURA/ALTURA reais (nítido, sem scale), até um teto cinema com margem. */ .filmframe{position:absolute;left:50%;top:50%;z-index:5;overflow:hidden;background:#0c0a07; --fw0:calc(4 * var(--cell, 200px) + 3*16px); /* fino: cobre as 4 colunas centrais (2-5) */ --fh0:var(--cell, 200px); /* fino: 1 linha de altura */ --fwmax:min(82vw,1320px); --fhmax:calc(var(--fwmax) / 2.2); --wp:clamp(0,calc((var(--p,0) - 0.10) / 0.45),1); --hp:clamp(0,calc((var(--p,0) - 0.45) / 0.45),1); width:calc(var(--fw0) + (var(--fwmax) - var(--fw0)) * var(--wp)); height:calc(var(--fh0) + (var(--fhmax) - var(--fh0)) * var(--hp)); transform:translate(-50%,-50%);border-radius:16px; box-shadow:0 50px 120px -45px rgba(0,0,0,.9)} .filmframe video{width:100%;height:100%;object-fit:cover;display:block} .filmframe::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(216,155,78,.45)} @media (max-width:980px){ /* §04 mobile/tablet: 2 imagens em cima · VÍDEO no meio · 2 imagens embaixo. SEM fundo escuro, SEM buraco, SEM patchwork. Imagens entram com vida (one-shot). Toque no vídeo amplia UM POUCO (full-bleed), sem cortar fora; toque de novo recolhe. */ .filmstage{height:auto;margin:30px 0 0} .filmsticky{position:static;display:block;height:auto;padding:0;overflow:visible; perspective:none;background:none} .filmsticky::before{display:none} .filmgrid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:12px;width:100%} .gcell{grid-column:auto !important;grid-row:auto !important;transform:none;opacity:1;aspect-ratio:4/3} .gcell img{animation:none} .filmgrid .gcell{display:none} /* 4 imagens em cima (order:0) · vídeo no meio · 4 imagens embaixo (order:2) */ .filmgrid .gcell:nth-child(1),.filmgrid .gcell:nth-child(2), .filmgrid .gcell:nth-child(3),.filmgrid .gcell:nth-child(5){display:block;order:0} .filmgrid .gcell:nth-child(6),.filmgrid .gcell:nth-child(8), .filmgrid .gcell:nth-child(9),.filmgrid .gcell:nth-child(11){display:block;order:2} /* vídeo NO MEIO, full-width entre as duas duplas */ .filmframe{position:relative;left:auto;top:auto;transform:none;order:1;grid-column:1 / -1; width:auto;height:auto;aspect-ratio:16/9;margin:2px 0;border-radius:14px;cursor:zoom-in; box-shadow:0 16px 44px -28px rgba(0,0,0,.5); transition:margin .45s cubic-bezier(.2,.7,.2,1)} .filmframe::after{opacity:1} .filmframe video{object-fit:cover} .filmframe.zoomed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;border-radius:0} .film-to-light{display:none} /* entrada com vida (só com JS; reduced-motion mostra estático) */ .is-enhanced .filmgrid .gcell{opacity:0;transform:translateY(18px) scale(.98)} .is-enhanced .filmstage.in .filmgrid .gcell{opacity:1;transform:none; transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} .is-enhanced .filmstage.in .filmgrid .gcell:nth-child(2), .is-enhanced .filmstage.in .filmgrid .gcell:nth-child(3){transition-delay:.05s} .is-enhanced .filmstage.in .filmgrid .gcell:nth-child(5), .is-enhanced .filmstage.in .filmgrid .gcell:nth-child(6){transition-delay:.1s} .is-enhanced .filmstage.in .filmgrid .gcell:nth-child(8), .is-enhanced .filmstage.in .filmgrid .gcell:nth-child(9){transition-delay:.15s} .is-enhanced .filmstage.in .filmgrid .gcell:nth-child(11){transition-delay:.2s} } /* sanfter Übergang vom Vollbild-Film (dunkel) zur hellen Vitrine */ .film-to-light{margin:0 calc(50% - 50vw);height:180px; background:linear-gradient(180deg,#050403 0%,#15110b 34%,#473c2b 70%,var(--ivory) 100%)} /* stops alinhados aos .flow-* */ @media (max-width:880px){.film-to-light{height:120px}} /* (Wortmontage removida em 2026-06-11 - a frase «Großes entsteht im Kleinen.» foi promovida a abertura da §03; efeito segue catalogado na biblioteca-efeitos.) */ @media (prefers-reduced-motion:reduce){ /* kein Scrub: grade estática, vídeo numa célula maior, sem desmontagem */ .filmstage{height:auto;margin-top:34px} .filmsticky{position:static;height:auto;padding:30px 0;overflow:visible} .filmgrid{grid-template-columns:repeat(3,1fr)} .gcell{transform:none;opacity:1} .gcell img{animation:none} .filmframe{grid-column:1 / 4;grid-row:auto;transform:none;aspect-ratio:2.35/1} .filmframe::after{opacity:1} .film-to-light{display:none} } /* ================================================================= §04 · KONZEPTSTUDIEN - strip compacta + clique-expande (2026-06-11) Vive EMBAIXO do filmstage, no lugar do leque antigo. Scroll-snap nativo; o JS (site.js, módulo §04) orquestra autoplay (5,5s) e o estado aberto. BASE (sem JS / reduced-motion): strip estática, legendas visíveis, sem autoplay - .is-enhanced liga profundidade, autoplay, progresso e o clique-expande. REPOUSO: cards de 250px (desktop) / 64vw (mobile), moldura 1px var(--line), sombra contida. ABERTO (.is-open): o MESMO card cresce até 700px (mobile: viewport inteira) animando flex-basis - altura acompanha suave, sem salto; vizinhos recuam e esmaecem; autoplay pausa. Sem glow nos mockups - o pulso vive só na linha de progresso. */ .ks-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(26px,2.3vw,32px);line-height:1.1;letter-spacing:.005em;margin-bottom:6px} /* sub-tier: mesma régua do antigo .cases-title */ .ks-title em{font-style:italic;color:var(--copper)} .kstudien{position:relative;margin-top:clamp(30px,4.5vh,44px)} .ks-track{--ks-w:250px;--ks-xw:min(700px,calc(100vw - 110px)); display:flex;align-items:flex-start;gap:clamp(14px,1.8vw,22px); list-style:none;margin:0;padding:8px 2px; /* strip PREENCHIDA: sem lead-in vazio */ overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch} .ks-track::-webkit-scrollbar{display:none} .ks-slide{flex:0 0 var(--ks-w);min-width:0; transition:flex-basis .5s cubic-bezier(.2,.7,.2,1)} .ks-slide.is-open{flex-basis:var(--ks-xw)} .ks-card{position:relative;margin:0} .is-enhanced .ks-card{cursor:zoom-in;transform:scale(.92);transform-origin:center top; transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .45s ease} .is-enhanced .ks-slide.is-active .ks-card{transform:scale(1)} .is-enhanced .ks-slide.is-open .ks-card{cursor:zoom-out} .kstudien.has-open .ks-slide:not(.is-open) .ks-card{opacity:.35} .ks-card picture{display:block;border-radius:12px;overflow:hidden; border:1px solid var(--line);background:var(--card); box-shadow:0 18px 40px -28px rgba(28,24,19,.35); transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease} .ks-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#F7F3EB} /* aberto: o board inteiro precisa caber na tela SEM scroll (bug reportado pela 2026-06-12) - altura capada ao viewport; contain segura a proporção */ .ks-slide.is-open .ks-card img{max-height:min(74vh,820px)} /* hover só no ativo fechado: +0.02 de escala e lift -6px, sombra contida */ .is-enhanced .ks-slide.is-active:not(.is-open) .ks-card:hover picture{ transform:translateY(-6px) scale(1.02); box-shadow:0 26px 54px -30px rgba(28,24,19,.45)} /* legenda editorial: numeração Manrope uppercase (copper-deep = AA 4,81:1 sobre marfim) + frase curta (text-soft = 5,01:1) */ .ks-cap{display:flex;flex-direction:column;gap:4px;padding:13px 4px 0;max-width:58ch} .ks-kicker{font-family:'Manrope',system-ui,sans-serif;font-size:10px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--copper-deep); font-variant-numeric:tabular-nums} .ks-text{font-size:12.5px;line-height:1.6;color:var(--text-soft)} .ks-slide.is-open .ks-text{font-size:13.5px} .is-enhanced .ks-cap{opacity:0;transform:translateY(6px); transition:opacity .5s ease .1s,transform .5s ease .1s} .is-enhanced .ks-slide.is-active .ks-cap{opacity:1;transform:none} /* X discreto do estado aberto (só o card aberto o mostra/foca) */ .ks-close{position:absolute;top:10px;right:10px;z-index:3;display:none; width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center; border:1px solid var(--line);background:rgba(243,238,228,.92);color:var(--ink); cursor:pointer;transition:border-color .25s ease,color .25s ease} .ks-slide.is-open .ks-close{display:flex} .ks-close:hover{border-color:var(--copper);color:var(--copper)} /* régua inferior: progresso segmentado (esq) + controles (dir) */ .ks-bar{display:flex;align-items:center;justify-content:space-between; gap:28px;margin-top:clamp(16px,3vh,26px)} .ks-progress{display:flex;flex:1 1 auto;max-width:420px;gap:7px} .ks-seg{position:relative;flex:1;height:2px;border-radius:2px; background:rgba(184,119,35,.18);overflow:hidden} /* trilho: linha gráfica, não-texto */ .ks-seg::before{content:"";position:absolute;inset:0;background:var(--copper); opacity:0;transition:opacity .45s ease} /* cobre cheio 3,19:1 ≥ 3:1 (componente gráfico) */ .ks-seg.is-on::before{opacity:.85} /* ponto de luz LENTO no segmento ativo - gramática --pulse-* (mesma corrente da hero/KLAR); o pulso vive na linha, nunca sobre os mockups */ .ks-seg.is-live::after{content:"";position:absolute;top:-1px;bottom:-1px;left:-26%;width:26%; background:linear-gradient(90deg,transparent,var(--pulse-body) 45%,var(--pulse-core) 55%,transparent); filter:drop-shadow(0 0 5px var(--pulse-glow)); animation:ksPulse 5.5s linear infinite} .kstudien.is-paused .ks-seg.is-live::after{animation-play-state:paused} @keyframes ksPulse{from{left:-26%}to{left:100%}} .ks-controls{display:flex;gap:10px;flex:none} .ks-btn{display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:50%;border:1px solid var(--line); background:transparent;color:var(--ink);cursor:pointer; transition:border-color .25s ease,color .25s ease} .ks-btn:hover{border-color:var(--copper);color:var(--copper)} .ks-btn svg{display:block} /* o ícone reflete a ESCOLHA do usuário (user-paused), não a pausa transitória de hover/viewport/card aberto (is-paused - essa só congela o ponto de luz) */ .ks-play .i-play{display:none} .kstudien.user-paused .ks-play .i-pause{display:none} .kstudien.user-paused .ks-play .i-play{display:block} .kstudien.no-auto .ks-play{display:none} /* reduced-motion: sem autoplay → sem botão */ /* status pra leitores de tela (aria-live), visualmente oculto */ .ks-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} @media (max-width:900px){ /* até 900px (cobre tablet ~750px): carrossel limpo full-bleed, sem cards cortados */ /* strip full-bleed: o aberto ocupa a viewport inteira (sem fullscreen real) */ .ks-track{--ks-w:min(300px,58vw);--ks-xw:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); padding:4px 12px 0;gap:12px} /* board COMPLETO (4/3) - sem o corte "-mobile"; cards menores, abre full-width sem cortar */ .ks-card img{aspect-ratio:4/3;object-fit:contain;height:auto;max-height:none} .ks-cap{padding-top:10px} /* ABERTO no mobile = overlay centralizado (lightbox): tira o board do trilho horizontal - acaba o desalinhamento à esquerda e o vazamento pra direita */ .ks-slide.is-open{flex-basis:var(--ks-w)} .ks-slide.is-open .ks-card{position:fixed;inset:0;z-index:300;margin:0;transform:none; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; padding:max(18px,env(safe-area-inset-top)) 14px max(22px,env(safe-area-inset-bottom)); background:rgba(8,6,4,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .ks-slide.is-open .ks-card picture{width:100%;max-width:680px;border-radius:12px; border:1px solid rgba(214,160,110,.18)} .ks-slide.is-open .ks-card img{width:100%;height:auto;max-height:64vh;object-fit:contain} .ks-slide.is-open .ks-cap{padding:0 22px;text-align:center;color:#f4ede0;max-width:560px} .ks-slide.is-open .ks-close{position:fixed;top:max(14px,env(safe-area-inset-top));right:16px;z-index:301} .ks-bar{gap:18px} .ks-btn{width:38px;height:38px} } @media (prefers-reduced-motion:reduce){ /* a base É o estado reduced: estático controlado, sem autoplay, sem pulso; abrir/fechar continua funcionando como estado direto (sem animação) */ .ks-slide{transition:none} .is-enhanced .ks-card{transform:none;transition:none} .is-enhanced .ks-cap{opacity:1;transform:none;transition:none} .is-enhanced .ks-slide.is-active:not(.is-open) .ks-card:hover picture{transform:none} .ks-seg.is-live::after{display:none} } /* ===== Reveal no scroll (eleva todas as seções) ===== */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s} .reveal.d4{transition-delay:.28s}.reveal.d5{transition-delay:.35s}.reveal.d6{transition-delay:.42s} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ===== Für wen (§03) v3 - campo editorial fixo (spec 2026-06-11) ===== 1) frase emocional grande - assenta no scroll (translate/scale sutil, --settle de site.js) 2) frase de público - fade-in (IO-toggle .in, reversível) 3) três blocos fixos - hairline de cobre desenha da esquerda pra direita; rótulos 01/02/03 em --copper-deep (#8F5E14 = 4,81:1 sobre marfim, AA texto pequeno; o cobre da marca #B87723 dá 3,19:1 e só vale em letra grande / linha gráfica). Pulso de luz viaja pela hairline da linha ativa (hover/.is-lit) - mesma linguagem do hero-circuito (.pulse) e do KLAR-Weg (.klar-node). Sem carrossel, sem timer, sem cards. reduced-motion: tudo estático e legível. */ #fuer-wen{padding-top:clamp(96px,14vh,150px);padding-bottom:clamp(88px,12vh,130px)} .fw-mega{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:var(--title-size);line-height:1.1;letter-spacing:.005em; /* régua única de títulos (2026-06-11) */ color:var(--ink);max-width:640px;margin:0 0 clamp(40px,7vh,84px)} .fw-mega em{font-style:italic;color:var(--copper)} /* letra grande: 3,19:1 ≥ 3:1 ✓ */ .fw-mega-inner{display:inline-block;transform-origin:left top;will-change:transform; transform:translateY(calc(var(--settle,0) * -26px)) scale(calc(1 - var(--settle,0) * .045))} .fw-publikum{font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:var(--text); max-width:54ch;opacity:0;transition:opacity .9s ease .1s} .fw-publikum.in{opacity:1} .fw-feld{list-style:none;margin:clamp(48px,8vh,88px) 0 0;padding:0} .fw-zeile{position:relative;display:grid; /* número removido dos cards (2026-07-02, "cara de chat") → 2 colunas */ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:8px 30px;align-items:baseline;padding:28px 0 32px; opacity:0;transform:translateY(16px);filter:blur(3px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease} .fw-zeile.in{opacity:1;transform:none;filter:none} /* hairline: desenha da esquerda pra direita depois que o bloco assenta */ .fw-zeile::before{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:var(--copper);opacity:.5;transform:scaleX(0);transform-origin:left; transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .15s,opacity .35s ease 0s} .fw-zeile.in::before{transform:scaleX(1)} .fw-zeile:hover::before,.fw-zeile.is-lit::before{opacity:.95} /* pulso de luz na hairline ativa (hover desktop / toque mobile via .is-lit) */ .fw-zeile::after{content:"";position:absolute;left:-76px;top:-1px;height:3px;width:72px; border-radius:3px;opacity:0;pointer-events:none; background:linear-gradient(90deg,transparent,var(--pulse-body) 45%,var(--pulse-core) 55%,transparent); filter:drop-shadow(0 0 6px var(--pulse-glow))} .fw-zeile:hover::after,.fw-zeile.is-lit::after{opacity:1;animation:fwPulse 3s linear infinite} @keyframes fwPulse{from{left:-76px}to{left:100%}} /* números dos cards removidos (2026-07-02): some do fluxo em todos os idiomas */ .fw-num{display:none} .fw-name{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:clamp(24px,2.4vw,33px);line-height:1.12;letter-spacing:.005em; color:rgba(20,17,11,.8);margin:0;transition:color .35s ease} .fw-satz{font-size:15px;line-height:1.7;color:var(--text-soft);max-width:46ch;margin:0; transition:color .35s ease} .fw-zeile:hover .fw-name,.fw-zeile.is-lit .fw-name{color:var(--ink)} .fw-zeile:hover .fw-satz,.fw-zeile.is-lit .fw-satz{color:var(--text)} @media (max-width:760px){ #fuer-wen{padding-top:72px;padding-bottom:76px} /* (.fw-mega sem override mobile - segue a régua única --title-size) */ .fw-zeile{grid-template-columns:1fr;gap:6px;padding:24px 0 28px} .fw-name{font-size:clamp(24px,7vw,30px)} .fw-satz{font-size:14px} } @media (prefers-reduced-motion:reduce){ .fw-mega-inner{transform:none!important} .fw-publikum,.fw-zeile{opacity:1;transform:none;filter:none;transition:none} .fw-zeile::before{transform:scaleX(1);transition:none} .fw-zeile::after{display:none} } /* Nota das Konzeptstudien (única regra viva do bloco antigo de cards) */ .studies-note{font-size:12px;color:var(--text-soft);margin-top:18px;font-style:italic} /* AA 5,01:1 (faint dava 2,72:1) */ /* dunkles Band (Prozess) */ .band{background:var(--ink);color:#F3EEE4;overflow:clip;position:relative} /* clip, NÃO hidden: hidden cria scroll container e mata o sticky do #prozess (achado da Carol 2026-06-12) */ .band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 84% 30%,rgba(216,155,78,0.12),transparent 60%);pointer-events:none} .band .section{position:relative;z-index:2} .band .eyebrow{color:var(--copper-lt)} .band .s-title{color:#F6F1E7} .band .s-lead{color:rgba(243,238,228,0.6)} /* §05 - KLAR-Aufzug (E1, Direção D+ 2026-06-12): palco pinned; o nó de luz percorre a trilha e, AO CHEGAR em cada pad, a letra enche de cobre (4 batidas legíveis); acorde final = hairline + fecho. Mobile: one-shot 2×2. reduced-motion: tudo aceso e estático. */ #prozess{height:150vh} #prozess .section{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box} .klar-track{position:relative;margin-top:28px} /* §05 - KLAR-Schaltkreis: Kupfer-Leiterbahn verbindet die 4 Schritte als Pads; Strom (Daten) fließt dauerhaft im Loop. */ .klar-circuit{position:relative;height:26px;margin-bottom:30px} .kc-trace{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2px;border-radius:2px; background:repeating-linear-gradient(90deg,var(--copper-lt) 0 5px,transparent 5px 17px);background-size:22px 2px; -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); opacity:.5;animation:kcFlow 2.6s linear infinite} @keyframes kcFlow{to{background-position:22px 0}} .kc-pads{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;pointer-events:none} .kc-pad{justify-self:start;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--copper-lt); background:var(--ink-2);box-shadow:0 0 0 4px var(--ink-2);position:relative} .kc-pad::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--copper-lt); opacity:.72;box-shadow:0 0 6px 1px var(--pulse-glow)} .klar-node{position:absolute;top:50%;left:calc(var(--p,0)*100%);width:8px;height:8px;border-radius:50%; background:var(--pulse-core);box-shadow:0 0 10px 2px var(--pulse-glow);transform:translate(-50%,-50%);opacity:var(--p,0);z-index:3} .klar-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} .klar-col{--f:1} .klar-letter{position:relative;display:inline-block;font-family:'Cormorant Garamond',serif;font-weight:600; font-size:clamp(96px,13vw,200px);line-height:.8} .klar-letter .kl-ghost{display:block;color:rgba(243,238,228,.12)} .klar-letter .kl-fill{position:absolute;top:0;left:0;display:block;color:var(--copper); -webkit-clip-path:inset(calc((1 - var(--f)) * 100%) 0 0 0);clip-path:inset(calc((1 - var(--f)) * 100%) 0 0 0)} /* Glanz-pass em LOOP respirado (2026-06-13): a cada ~7s um feixe de luz atravessa o dourado das letras (onda K→R) e DESCANSA o resto do ciclo - joia girando na luz, não neon piscando. Pontas do ciclo = cobre sólido (emenda invisível). */ .klar-track.is-done .kl-fill{ background:linear-gradient(115deg,var(--copper) 0%,var(--copper) 40%,#F2CE92 47%,#FFF0D6 50%,#F2CE92 53%,var(--copper) 60%,var(--copper) 100%); background-size:320% 100%;-webkit-background-clip:text;background-clip:text;color:transparent; animation:klShine 3.2s linear calc(.2s + var(--i,0)*.16s) infinite} @keyframes klShine{0%{background-position:115% 0}34%{background-position:-15% 0}100%{background-position:-15% 0}} .klar-name{font-size:14px;font-weight:700;letter-spacing:.02em;margin-top:16px;color:#F6F1E7; opacity:clamp(0,calc((var(--f) - .25)*2.5),1);transform:translateY(calc((1 - var(--f))*10px))} .klar-desc{font-size:14.5px;line-height:1.55;color:#B5B0A7;margin-top:9px;max-width:24ch; opacity:clamp(0,calc((var(--f) - .45)*2.5),1);transform:translateY(calc((1 - var(--f))*10px))} /* acorde final: hairline se desenha sob a baseline + fecho aparece (.is-done via JS) */ .klar-chord{height:1px;margin-top:28px;background:var(--copper);opacity:.8; transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.33,0,.2,1)} .klar-track.is-done .klar-chord{transform:scaleX(1)} /* texto único do véu do método: cada linha escrita pelo nó de cobre (--w por linha, 0→1 via JS quando .is-done; reversível no scrub) */ .klar-text{margin-top:26px;text-align:center} .kz-line{margin:0 0 10px;font-family:'Cormorant Garamond',serif; font-size:clamp(19px,1.9vw,25px);line-height:1.5;color:#C9C4BA} .kz-line.kz-final{font-style:italic;color:var(--copper-lt);margin-top:18px} .kz-wrap{position:relative;display:inline-block;--w:0} .kz-text{display:inline-block; -webkit-clip-path:inset(-12% calc((1 - var(--w)) * 100%) -12% 0); clip-path:inset(-12% calc((1 - var(--w)) * 100%) -12% 0)} /* SÓ a última frase (cobre) é gravada a maçarico: incandescência que esfria + foguinho na ponta */ .kz-final .kz-text{text-shadow:0 0 calc(var(--w) * (1 - var(--w)) * 40px) rgba(255,188,98,.98), 0 0 calc(var(--w) * (1 - var(--w)) * 14px) #fff3e0} .kz-final .kz-wrap::after{width:12px;height:19px;transform:translate(-50%,-60%); border-radius:62% 62% 64% 64% / 78% 78% 100% 100%; background:radial-gradient(ellipse 62% 56% at 50% 74%,#fff6e6 0%,#ffd692 30%,var(--copper) 62%,rgba(214,118,42,.45) 100%); box-shadow:0 0 12px 3px rgba(255,175,80,.95),0 0 28px 9px rgba(214,140,60,.5)} /* nó base das linhas do corpo: ponto discreto que puxa o texto (só a última vira maçarico) */ .kz-wrap::after{content:"";position:absolute;top:50%;left:calc(var(--w) * 100%); width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%); background:var(--pulse-core);box-shadow:0 0 10px 2px var(--pulse-glow); opacity:calc(var(--w) * (1 - var(--w)) * 4);pointer-events:none} @media (max-width:760px){ #prozess{height:auto} #prozess .section{position:static;min-height:0;display:block} /* KLAR mobile (2026-06-16): as 4 letras JUNTAS formam a palavra "KLAR", entram em CASCATA (escada K→L→A→R) e brilham; nomes pequenos embaixo, desc some. */ .klar-cols{position:relative;display:flex;justify-content:center;align-items:baseline; grid-template-columns:none;gap:clamp(1px,1vw,7px)} .klar-col{flex:0 1 auto;min-width:0;text-align:center} .klar-letter{font-size:clamp(54px,17.5vw,94px)} .klar-letter .kl-fill{-webkit-clip-path:none;clip-path:none} /* sempre cheia de cobre no mobile */ .klar-circuit{display:none} .klar-desc{display:none} .klar-name{font-size:10.5px;margin-top:10px;letter-spacing:.04em} /* letras grandes: cascata drop (original) - rápida; o efeito maçarico é só no texto abaixo */ .klar-col .klar-letter{opacity:0;transform:translateY(28px) scale(.97)} #klarTrack.is-in .klar-col .klar-letter{animation:klDrop .5s cubic-bezier(.16,1,.3,1) forwards} #klarTrack.is-in .klar-col:nth-child(1) .klar-letter{animation-delay:.04s} #klarTrack.is-in .klar-col:nth-child(2) .klar-letter{animation-delay:.13s} #klarTrack.is-in .klar-col:nth-child(3) .klar-letter{animation-delay:.22s} #klarTrack.is-in .klar-col:nth-child(4) .klar-letter{animation-delay:.31s} @keyframes klDrop{to{opacity:1;transform:none}} /* texto do KLAR no mobile (2026-06-17): ESCRITA com barra de cobre na ponta (caneta varrendo o texto) + cada linha incandesce de cobre ao ser escrita. Impactante. */ .kz-line{font-size:clamp(18px,5vw,23px)} /* caneta de cobre DISCRETA: leveza/sofisticação (2026-06-17) - brilho sutil, fio fino */ .kz-text{text-shadow:0 0 calc(var(--w) * (1 - var(--w)) * 7px) rgba(255,186,104,.32)} .kz-wrap::after{display:block;top:0;bottom:0;height:auto;width:1.5px;left:calc(var(--w) * 100%); transform:translateX(-50%);border-radius:2px; background:linear-gradient(180deg,transparent,var(--copper-lt) 36%,#fdeccf 50%,var(--copper-lt) 64%,transparent); box-shadow:0 0 5px 1px rgba(255,188,104,.42),0 0 11px 3px rgba(214,140,60,.16); opacity:calc(var(--w) * (1 - var(--w)) * 2.2)} /* última frase: ao terminar a escrita (is-done), fica ESPELHADA/brilhosa como o KLAR */ .klar-track.is-done .kz-final .kz-text{ background:linear-gradient(100deg,var(--copper-lt) 0 40%,#FFF6E0 50%,var(--copper-lt) 60% 100%); background-size:300% 100%;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent;animation:kwShine 3.6s linear infinite} } @media (prefers-reduced-motion:reduce){ #prozess{height:auto} #prozess .section{position:static;min-height:0;display:block} .klar-letter .kl-fill{-webkit-clip-path:none;clip-path:none} .klar-name,.klar-desc,.klar-col .klar-letter{opacity:1;transform:none} .kc-trace{animation:none} .klar-chord{transform:none;transition:none} .kz-wrap{--w:1} .kz-text{opacity:1} .kz-wrap::after{display:none} } /* section-warp: véu de transição das âncoras longas (clique → tela cobre → salto escondido → abre na seção destino; pedido 2026-06-12) */ .warp-veil{position:fixed;inset:0;z-index:1800;background:var(--ink); opacity:0;pointer-events:none;transition:opacity .32s ease} .warp-veil.is-on{opacity:1;transition:opacity .3s ease} @media (prefers-reduced-motion:reduce){.warp-veil{display:none}} /* CTA final + Kontakt */ .cta-final{background:var(--ink);color:#F3EEE4;text-align:center;padding:96px 30px;position:relative;overflow:hidden} .cta-final::before{content:"";position:absolute;inset:0;background:radial-gradient(720px 360px at 50% 0%,rgba(216,155,78,.15),transparent 60%);pointer-events:none} .cta-final h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:var(--title-size);line-height:1.1;letter-spacing:0.005em;max-width:700px;margin:0 auto;color:#F6F1E7;position:relative;z-index:2} .cta-final h2 em{font-style:italic;color:var(--copper-lt)} .cta-final .btn-copper{margin-top:30px;position:relative;z-index:2} .kontakt-lines{position:relative;z-index:2;display:flex;gap:28px;flex-wrap:wrap;justify-content:center;margin-top:30px} .kontakt-lines a{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:rgba(243,238,228,0.82);border-bottom:1px solid transparent;padding-bottom:3px;transition:.15s} .kontakt-lines a:hover{color:#fff;border-color:var(--copper)} .kontakt-lines svg{color:var(--copper-lt)} /* ================================================================= FOOTER (rechtlich, DE) ================================================================= */ .foot-legal{background:var(--ink-2);color:rgba(243,238,228,.55);padding:34px 40px} .foot-legal .inner{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px} .foot-legal .fbrand{font-family:'Cormorant Garamond',serif;font-size:18px;color:#F3EEE4} .foot-legal .fbrand .cv{color:var(--copper-lt)} .foot-legal .fbrand .st{font-family:'Manrope',sans-serif;font-size:9px;letter-spacing:.4em;color:rgba(243,238,228,.5)} .foot-legal .links{display:flex;gap:24px;flex-wrap:wrap;align-items:center} .foot-legal a{font-size:12.5px;color:rgba(243,238,228,.72);border-bottom:1px solid transparent;padding-bottom:2px;transition:.15s} .foot-legal a:hover{color:#fff;border-color:var(--copper)} .foot-legal .cr{font-size:12px;color:rgba(243,238,228,.5)} .foot-legal .note{font-size:10.5px;color:rgba(243,238,228,.4);max-width:620px;margin:16px auto 0;text-align:center;font-style:italic} /* ================================================================= RECHTSSEITEN (Impressum / Datenschutz) ================================================================= */ .legal-top{position:sticky;top:0;z-index:60;background:rgba(11,9,6,0.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-dk)} .legal-top .in{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 30px} .legal-top .brand{font-family:'Cormorant Garamond',serif;font-size:clamp(19px,2vw,22px);font-weight:600;letter-spacing:.02em;color:#F3EEE4;text-decoration:none;white-space:nowrap} /* padroniza com a home: brand em TEXTO, marfim+cobre no escuro (decisão de design 2026-07-05) */ .legal-top .brand .cv{color:var(--copper-lt)} .legal-top .brand img{height:34px;width:auto;display:block} .legal-top a.back{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,238,228,.8)} .legal-top a.back:hover{color:#fff} .legal-wrap{max-width:820px;margin:0 auto;padding:54px 30px 80px} .legal-wrap h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(30px,9vw,46px);letter-spacing:0.005em;color:var(--text);margin-bottom:8px;overflow-wrap:break-word} .legal-wrap .updated{font-size:12px;color:var(--text-faint);margin-bottom:30px} .legal-wrap h2{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;letter-spacing:.01em;color:var(--text);margin:40px 0 10px} .legal-wrap h3{font-size:13.5px;font-weight:700;color:var(--text);margin:18px 0 4px} .legal-wrap p,.legal-wrap li{font-size:14px;color:var(--text-soft);line-height:1.75} .legal-wrap ul{margin:6px 0 6px 20px} .legal-wrap a.inl{color:var(--copper-deep);border-bottom:1px solid var(--copper-deep)} /* AA 4,81:1 sobre marfim (era --copper 3,19:1, reprovava texto normal) */ .legal-status{border-left:2px solid var(--copper-lt);padding:12px 18px; margin-top:48px;font-size:13px;color:var(--text-faint);line-height:1.65;font-style:italic} /* ================================================================= RESPONSIV ================================================================= */ @media (max-width:980px){ .section{padding:58px 22px} /* (overrides de font-size dos títulos removidos 2026-06-11 - a régua única --title-size já é fluida; tamanhos idênticos em todas as larguras.) */ .nav-inner{padding:16px 22px} } /* ================================================================= HERO v3 - KUPFER-SCHALTKREIS auf Charcoal (Proto B - decisão 2026-06-11; fonte: AtlasOS clientes/omnicanvas/identidade/ proto-hero-circuito.html, variante B charcoal). Trilhas de circuito em cobre apagado + nós (pads) + pulsos de luz que percorrem as trilhas (stroke-dashoffset, pathLength=1000). SVG/CSS puro - sem vídeo, sem canvas, sem raster, sem libs (DSGVO). reduced-motion: circuito estático visível, pulsos desligados. Contrastes medidos sobre #171310: headline #F7F2E8 = 16.5:1; em cobre #B87723 = 5.01:1 (texto grande ≥3:1); sub marfim @.62 = 6.7:1. ================================================================= */ .hero-loco{position:relative;min-height:100vh;overflow:hidden; display:flex;align-items:center;justify-content:center;text-align:center; background:#171310;color:var(--ivory); --trace-alpha:.22} /* pulso/glow: tokens globais --pulse-* em :root */ /* auslauf suave na base → emenda com a faixa de transição (.flow-d2l) */ .hero-loco::after{content:"";position:absolute;left:0;right:0;bottom:0;height:13vh;z-index:1;pointer-events:none; background:linear-gradient(180deg,transparent,#0c0a08)} /* inovação dentro do circuito (2026-06-14): luz de cobre CONTIDA atrás do circuito - o circuito flutua numa luz quente que respira devagar. "Mais cobre", sem virar aurora. */ .hero-loco::before{content:"";position:absolute;z-index:0;left:50%;top:45%;transform:translate(-50%,-50%); width:84vw;height:78vh;pointer-events:none; background:radial-gradient(ellipse at center,rgba(216,155,78,.17),rgba(184,119,35,.06) 42%,transparent 70%); animation:heroGlowBreath 9s ease-in-out infinite} @keyframes heroGlowBreath{0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}} /* HERO - Kupfer-Schaltkreis (restaurado + potência aumentada, 2026-06-14): trilhas mais visíveis, cometa de cobre mais GROSSO/LONGO/BRILHANTE e ~40% mais frequente. Sync pad preservado. */ .hero-loco .circuit{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .hero-loco .trace{fill:none;stroke:var(--copper);stroke-opacity:.34;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .hero-loco .pulse{fill:none;stroke:var(--pulse-core);stroke-width:5;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:120 880;stroke-dashoffset:1000; filter:drop-shadow(0 0 10px var(--pulse-glow)) drop-shadow(0 0 22px var(--pulse-glow)); animation:heroPulse calc(var(--dur,9s) * .6) linear infinite;animation-delay:var(--delay,0s)} @keyframes heroPulse{to{stroke-dashoffset:0}} .hero-loco .pad{fill:#171310;stroke:var(--copper);stroke-opacity:calc(var(--trace-alpha) + .3);stroke-width:1.9; animation:padHalo calc(var(--dur,9s) * .6) linear var(--delay,0s) infinite} .hero-loco .pad-core{fill:var(--copper);opacity:.6; animation:padFlare calc(var(--dur,9s) * .6) linear var(--delay,0s) infinite} @keyframes padFlare{ 0%,89%{fill:var(--copper);opacity:.6;filter:drop-shadow(0 0 0 rgba(216,155,78,0))} 95.5%{fill:var(--pulse-core);opacity:1;filter:drop-shadow(0 0 8px var(--pulse-glow)) drop-shadow(0 0 18px var(--pulse-glow))} 100%{fill:var(--copper);opacity:.6;filter:drop-shadow(0 0 0 rgba(216,155,78,0))} } @keyframes padHalo{ 0%,89%,100%{stroke-opacity:calc(var(--trace-alpha) + .3)} 95.5%{stroke-opacity:.9} } .circuit-m{display:none} /* copy - central, serif, «Eindruck» em cobre (métrica do proto) */ .hero-wrap{position:relative;z-index:3;max-width:min(820px,90vw);padding:24px 32px} /* idioma no hero (só mobile): escondido no desktop (lá o seletor vive no header) */ .hero-langsel{display:none} .hl-mega{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:clamp(34px,5.2vw,68px);line-height:1.12;letter-spacing:.01em;color:#F7F2E8;margin:0} .hl-mega em{font-style:normal;color:var(--copper)} .hl-sub{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(14px,1.4vw,17px); line-height:1.65;color:var(--ivory);opacity:.62;margin-top:18px} /* indicador de scroll (discreto, centrado na base) */ .scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4; display:flex;align-items:center;gap:10px} .scrollcue span{font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,238,228,0.5)} .scrollcue .l{width:42px;height:1px;background:linear-gradient(90deg,var(--copper-lt),transparent);animation:flow 2.4s ease-in-out infinite} @keyframes flow{0%,100%{opacity:.4}50%{opacity:1}} .site-header .brand{transition:color .4s ease} /* nome SEMPRE visível (inclusive na hero) */ /* entrada em cascata - escondido só enquanto o loader cobre a tela (keyed em body.loading → sem JS fica visível, sem quebra) */ .hero-wrap>*{transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1)} body.loading .hero-wrap>*{opacity:0;transform:translateY(18px)} .hero-wrap .hl-mega{transition-delay:.10s} .hero-wrap .hl-sub{transition-delay:.26s} @media (max-width:760px){ .scrollcue{display:none} .circuit-d{display:none} .circuit-m{display:block} .hl-mega{font-size:clamp(34px,9.6vw,44px)} .hl-sub{font-size:14px} /* idioma no HERO (só mobile): FIXO no alto à direita, perto do circuito de cima. Absoluto → NÃO depende do título (que muda de tamanho por idioma → igual nos 4). */ .hero-langsel{display:flex;position:absolute;top:clamp(178px,23.5vh,208px);left:53%;right:auto;z-index:4;gap:9px; font-family:'Manrope',system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em} .hero-langsel a{color:var(--copper-lt);opacity:.85;text-decoration:none;transition:opacity .2s ease} .hero-langsel a:hover,.hero-langsel a:focus-visible{opacity:1} .hero-langsel .sep{color:var(--copper);opacity:.45} } @media (prefers-reduced-motion:reduce){ .hero-loco .pulse{animation:none;stroke-dashoffset:0;stroke-dasharray:none;stroke-opacity:.4;filter:none} .hero-loco .pad,.hero-loco .pad-core{animation:none} .hero-loco::before{animation:none;opacity:.8} .scrollcue .l{animation:none} .hero-wrap>*{transition:none!important;opacity:1!important;transform:none!important} } /* ================================================================= 01 · MANIFEST - kinetische Typografie, scroll-gescrubbt (ref. Plus X 15th), an Omni angepasst: elegant, zurückhaltend, EINE fokussierte Zeile; die anderen treten zurück (Opazität/Skalierung/Blur). Reversibel über --p (site.js). ================================================================= */ .manifest{background:var(--ivory);position:relative;height:240vh} .manifest-sticky{position:sticky;top:0;height:100vh;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:0 32px;text-align:center} .manifest-lines{position:relative;width:100%;max-width:1080px;height:1.4em; font-family:'Cormorant Garamond',serif} .ml-line{position:absolute;left:0;right:0;top:50%;margin:0; font-weight:600;font-size:clamp(26px,4.4vw,54px);line-height:1.12;letter-spacing:.004em; color:var(--ink);transform:translateY(-50%);will-change:transform,opacity,filter} .ml-line em{font-style:italic;color:var(--copper)} .manifest-sub{position:absolute;left:50%;bottom:11vh;transform:translateX(-50%); max-width:600px;font-family:'Manrope',system-ui,sans-serif;font-size:14px;line-height:1.7; color:var(--text-soft);opacity:0;transition:opacity .6s ease} .manifest-sub.in{opacity:1} @media (max-width:760px){ .manifest{height:140vh} /* menos scroll vazio antes das linhas (2026-06-17) */ .ml-line{font-size:clamp(26px,7.8vw,42px)} /* maior e mais presente (2026-06-17) */ .manifest-sub{font-size:13px;bottom:9vh} } @media (prefers-reduced-motion:reduce){ .manifest{height:auto} .manifest-sticky{position:static;height:auto;padding:16vh 32px} .manifest-lines{height:auto;display:flex;flex-direction:column;gap:.35em} .ml-line{position:static;top:auto;transform:none!important;opacity:1!important;filter:none!important} .manifest-sub{position:static;transform:none;opacity:1;margin:2.6em auto 0} } /* ================================================================= 06 · STUDIO - Pinned Scrollytelling (3 Kapitel). Spiegelt die Manifest- Mechanik (sticky + --p in site.js). Mobile + reduced-motion = statische, lesbare Liste ohne Pin. Zahlen klein/mittel (kein Spektakel). ================================================================= */ .studio{background:var(--ivory);position:relative;height:200vh} .studio-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column; justify-content:center;gap:clamp(20px,4vh,44px);padding:8vh 64px;text-align:center} .studio-eyebrow{flex:none} .studio-grid{flex:1 1 auto;width:100%;max-width:1120px;margin:0 auto;display:grid; grid-template-columns:1fr minmax(240px,300px);gap:clamp(36px,4.5vw,72px);align-items:center;min-height:0} .studio-main{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.6vh,30px);min-height:0} .studio-stage{position:relative;width:100%;max-width:560px;margin:0 auto;min-height:clamp(220px,36vh,360px)} .studio-aside{align-self:center;display:flex;flex-direction:column;gap:14px} .studio-portrait{margin:0 auto;border-radius:14px;overflow:hidden;aspect-ratio:3/4;position:relative; height:clamp(260px,42vh,400px);width:auto;max-width:100%; /* encolhe pela ALTURA mantendo 3:4 = foto INTEIRA, sem corte; legenda não cai na divisão (2026-06-17) */ box-shadow:0 30px 60px -28px rgba(20,17,11,.42);border:1px solid rgba(184,119,35,.28)} .studio-portrait::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:linear-gradient(90deg,transparent,var(--copper-lt),transparent);opacity:.75} .studio-portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .studio-step{position:absolute;top:0;right:0;bottom:0;left:0; display:flex;flex-direction:column;align-items:center;justify-content:center; opacity:0;transform:translateY(18px); transition:opacity .65s ease,transform .65s ease;pointer-events:none; will-change:opacity,transform} .studio-step.is-active{opacity:1;transform:none;pointer-events:auto} .studio-step::before{content:"";display:block;width:32px;height:1px; background:var(--copper-lt);margin:0 auto 22px;flex:none;opacity:.8} .ss-num{font-family:'Cormorant Garamond',serif;font-size:clamp(12px,1vw,16px); color:var(--copper-lt);letter-spacing:.22em;text-transform:uppercase;margin-bottom:8px} .ss-title{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:clamp(56px,7.5vw,100px);line-height:1.02;letter-spacing:-.01em; color:var(--ink);margin:0 0 16px} .ss-text{font-family:'Manrope',system-ui,sans-serif;font-size:clamp(14px,1.25vw,17px); line-height:1.74;color:var(--text-soft);max-width:460px;margin:0 auto} .studio-foot{flex:none;display:flex;flex-direction:column;align-items:center;gap:14px} .studio-progress{display:flex;gap:24px;font-family:'Manrope',system-ui,sans-serif; font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--text-faint)} .sp-tick{opacity:.3;transition:color .4s ease,opacity .4s ease} .sp-tick.is-active{opacity:1;color:var(--copper)} .studio-close{font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(15px,1.35vw,19px);line-height:1.5;color:var(--text-soft); max-width:36ch;opacity:1} .studio-close.in{opacity:1} @media (max-width:760px){ .studio{height:auto} .studio-sticky{position:static;height:auto;padding:56px 24px 48px;gap:2.2em} .studio-grid{display:flex;flex-direction:column;gap:2.2em;max-width:520px} .studio-aside{order:-1;gap:14px} .studio-portrait{max-width:300px;width:100%;height:auto;margin:0 auto} /* mobile: foto inteira, largura cheia, sem corte */ .studio-stage{position:static;flex:none;display:block;min-height:0;max-width:none} .studio-step{position:static;top:auto;right:auto;bottom:auto;left:auto; opacity:1;transform:none;display:block;margin-bottom:2.6em;pointer-events:auto} .ss-title{font-size:clamp(40px,10vw,56px)} .studio-progress{display:none} .studio-close{opacity:1;margin:0 auto} } @media (prefers-reduced-motion:reduce){ .studio{height:auto} .studio-sticky{position:static;height:auto;padding:10vh 64px;gap:3em} .studio-stage{position:static;flex:none;display:block;min-height:0} .studio-step{position:static;top:auto;right:auto;bottom:auto;left:auto; opacity:1!important;transform:none!important;display:block;margin-bottom:2.6em;pointer-events:auto} .sp-tick{opacity:1;color:var(--copper)} .studio-close{opacity:1!important} } /* §06 mobile - as 3 palavras (Richtung·Bewegung·Vertrauen) SURGEM ao entrar: desfoque→nítido + sobem, e o risquinho de cobre desenha sob cada uma. 2026-06-17 */ @media (max-width:760px){ .studio-stage.sr-on .studio-step{opacity:0;transform:translateY(20px);filter:blur(7px); transition:opacity .85s ease,transform .9s cubic-bezier(.2,.7,.2,1),filter .85s ease} .studio-stage.sr-on .studio-step.revealed{opacity:1;transform:none;filter:none} .studio-step::before{transition:width .7s cubic-bezier(.33,0,.2,1) .12s} .studio-stage.sr-on .studio-step:not(.revealed)::before{width:0} .studio-stage.sr-on .studio-step.revealed::before{width:44px;background:var(--copper-lt)} } @media (max-width:760px) and (prefers-reduced-motion:reduce){ .studio-stage.sr-on .studio-step{opacity:1;transform:none;filter:none} .studio-stage.sr-on .studio-step::before{width:32px} } /* ================================================================= LOADER - "Hallo und willkommen" + boneco que caminha→corre (ref. fromanother.love) Fundo marfim; o passo acelera conforme o % de carregamento sobe (var --gait via JS). ================================================================= */ body.loading{overflow:hidden} .loader{position:fixed;inset:0;z-index:9999;background:var(--ivory); display:flex;align-items:center;justify-content:center; transition:opacity .9s ease,visibility .9s ease} .loader.done{opacity:0;visibility:hidden;pointer-events:none} .loader-inner{text-align:center} .loader-hello{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(16px,2vw,22px);color:rgba(20,17,11,.6)} .loader-name{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(24px,3.4vw,38px);color:var(--ink);letter-spacing:.01em;margin-top:2px} .loader-bar{width:min(220px,52vw);height:2px;margin:28px auto 12px;border-radius:2px; background:rgba(20,17,11,.12);overflow:hidden} .loader-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left; background:linear-gradient(90deg,var(--copper),var(--copper-lt));transition:transform .12s linear} .loader-pct{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--copper)} .loader-pct i{font-style:normal;opacity:.7;margin-left:1px} /* ================================================================= LEISTUNGEN - lista editorial estática + painel de imagem sticky Linhas grandes numeradas (Cormorant) com hairline/pulso de cobre (mesma linguagem da §03/fwPulse); a linha ativa (hover / centro do viewport) acende e troca a imagem à direita em crossfade. Mobile: painel sai, a imagem abre inline na linha ativa. ================================================================= */ .leist{background:var(--ink);color:#F3EEE4;margin:0 calc(50% - 50vw);position:relative; padding:clamp(88px,13vh,140px) max(40px,calc(50vw - 660px))} .leist .eyebrow{color:var(--copper-lt)} .leist-head{position:relative;z-index:1;margin-bottom:clamp(36px,6vh,64px)} .leist-title{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:var(--title-size);line-height:1.1;letter-spacing:.005em; color:#F6F1E7;max-width:20ch;margin:12px 0 0} .leist-title em{font-style:italic;color:var(--copper-lt)} .leist-stage{position:relative;z-index:1;display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,420px); gap:clamp(48px,6vw,96px);align-items:start} /* - linhas - */ .lst-feld{list-style:none;margin:0;padding:0} .lst-zeile{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr); gap:4px 26px;align-items:baseline;padding:26px 0 28px; opacity:0;transform:translateY(16px);filter:blur(3px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease} .lst-zeile.in{opacity:1;transform:none;filter:none} .lst-zeile::before{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:var(--copper-lt);opacity:.28;transform:scaleX(0);transform-origin:left; transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .15s,opacity .35s ease} .lst-zeile.in::before{transform:scaleX(1)} .lst-zeile.is-active::before{opacity:.85} .lst-zeile::after{content:"";position:absolute;left:-76px;top:-1px;height:3px;width:72px; border-radius:3px;opacity:0;pointer-events:none; background:linear-gradient(90deg,transparent,var(--pulse-body) 45%,var(--pulse-core) 55%,transparent); filter:drop-shadow(0 0 6px var(--pulse-glow))} /* cobre passando em TODAS as divisórias do §02 (escalonado, 2026-06-17) */ .lst-zeile::after{opacity:1;animation:fwPulse 6.5s linear infinite} .lst-zeile:nth-child(2)::after{animation-delay:1s}.lst-zeile:nth-child(3)::after{animation-delay:2s} .lst-zeile:nth-child(4)::after{animation-delay:3s}.lst-zeile:nth-child(5)::after{animation-delay:4s} .lst-zeile:nth-child(6)::after{animation-delay:5s}.lst-zeile:nth-child(7)::after{animation-delay:.5s} .lst-zeile:nth-child(8)::after{animation-delay:1.5s}.lst-zeile:nth-child(9)::after{animation-delay:2.5s} .lst-zeile:nth-child(10)::after{animation-delay:3.5s} .lst-num{font-family:'Manrope',system-ui,sans-serif;font-size:12px;font-weight:700; letter-spacing:.16em;color:var(--copper-lt);opacity:.85;font-variant-numeric:tabular-nums} /* .65 dava 3,95:1 (";initial-value:0deg;inherits:false} @media (max-width:760px){ .leist{padding:72px 22px 76px} .leist-stage{grid-template-columns:1fr;gap:0} .lst-panel{display:none} .lst-zeile{grid-template-columns:42px minmax(0,1fr);padding:22px 0 24px; transition:opacity 3s ease,transform 3s cubic-bezier(.22,.61,.36,1),filter 3s ease} /* mobile: cascata BEM mais lenta, leve e elegante (decisão de design 2026-07-05); ~4x o original + linhas mais espaçadas (stagger 260ms no site.js). Desktop = .8s. */ .lst-name{font-size:clamp(28px,7.6vw,38px)} .lst-satz{font-size:13.5px} .lst-mobimg{display:block;position:relative;grid-column:1 / -1;overflow:hidden;max-height:0;opacity:0; border-radius:10px;transition:max-height 1.3s cubic-bezier(.33,0,.2,1),opacity 1s ease} .lst-zeile.is-active .lst-mobimg,.lst-zeile.lst-open .lst-mobimg{max-height:260px;opacity:1;margin-top:14px} .lst-mobimg img{width:100%;height:auto;max-height:240px;object-fit:cover;border-radius:10px; border:1px solid rgba(255,255,255,.12)} /* brilho de cobre correndo ao redor da imagem ativa (anel cônico animado) */ .lst-mobimg::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none; padding:1px;opacity:0;transition:opacity .5s ease; background:conic-gradient(from var(--lstang),transparent 0 60%,rgba(216,155,78,.12) 70%, var(--copper-lt) 82%,rgba(216,155,78,.12) 92%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude} .lst-zeile.is-active .lst-mobimg::after,.lst-zeile.lst-open .lst-mobimg::after{opacity:1;animation:lstCopperRun 4.5s linear infinite} /* mobile: sem flip 3D - a descrição abre inline na linha ativa (mecânica do .lst-mobimg) */ .lst-detail{position:static;width:auto;height:auto;clip:auto;clip-path:none;white-space:normal; grid-column:1 / -1;overflow:hidden;max-height:0;opacity:0;margin:0;padding:0; transition:max-height 1.3s cubic-bezier(.33,0,.2,1),opacity 1s ease} .lst-zeile.is-active .lst-detail,.lst-zeile.lst-open .lst-detail{max-height:340px;opacity:1;margin-top:12px} .lst-detail .lst-detail-sum{font-family:'Manrope',system-ui,sans-serif;font-size:13.5px; line-height:1.6;color:rgba(243,238,228,.8);margin:0 0 10px} .lst-detail .lst-detail-pts{list-style:none;margin:0;padding:0;display:grid;gap:7px} .lst-detail .lst-detail-pts li{position:relative;padding-left:18px;font-size:13px; line-height:1.5;color:rgba(243,238,228,.62)} .lst-detail .lst-detail-pts li::before{content:"";position:absolute;left:0;top:.6em; width:8px;height:1px;background:var(--copper-lt);opacity:.8} } @media (prefers-reduced-motion:reduce){ .lst-zeile{opacity:1;transform:none;filter:none;transition:none} .lst-zeile::before{transform:scaleX(1);transition:none} .lst-zeile::after{display:none} .lst-panel figure{transition:none} .lst-mobimg{transition:none} .lst-zeile.is-active .lst-mobimg::after{animation:none;opacity:.55} .lst-teaser{opacity:1;transform:none;transition:none} .lst-teaser-line{transform:scaleX(1);transition:none} .lst-card{transition:none;transform:none} .lst-card.is-flipped{transform:none} .lst-card-sheen,.lst-card::after{display:none;animation:none} } /* reduced-motion no desktop: sem flip - a descrição aparece na própria lista, verso do card oculto */ @media (prefers-reduced-motion:reduce) and (min-width:761px){ .lst-detail{position:static;width:auto;height:auto;clip:auto;clip-path:none;white-space:normal; grid-column:2;margin:12px 0 0;padding:0} .lst-detail .lst-detail-sum{font-family:'Manrope',system-ui,sans-serif;font-size:14px;line-height:1.6; color:rgba(243,238,228,.7);margin:0 0 10px;max-width:60ch} .lst-detail .lst-detail-pts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px} .lst-detail .lst-detail-pts li{font-size:12.5px;color:rgba(243,238,228,.55)} .cardface--back{display:none} } /* ================================================================= PHASE 2 - MENÜ: diskreter Trigger + Vollbild-Overlay (ivory, editorial) Ref. fromanother.love, an Omni Canvas angepasst. CSS + Vanilla-JS, keine Libs. ================================================================= */ /* --- Trigger im Header: zwei dünne Linien + „Menü" (über dunklem Header) --- */ .menu-trigger{display:inline-flex;align-items:center;gap:11px;background:none;border:0;cursor:pointer; padding:8px 2px;color:rgba(243,238,228,.82);transition:color .2s ease;flex:none} .menu-trigger:hover{color:#fff} .mt-bars{position:relative;width:26px;height:9px;flex:none} .mt-bars::before,.mt-bars::after{content:"";position:absolute;left:0;right:0;height:1.5px; background:currentColor;transition:transform .3s ease} .mt-bars::before{top:1px}.mt-bars::after{bottom:1px} .menu-trigger:hover .mt-bars::before{transform:translateY(1.5px)} .menu-trigger:hover .mt-bars::after{transform:translateY(-1.5px)} .mt-label{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase} /* --- Overlay-Grundgerüst --- */ .menu-overlay{position:fixed;inset:0;z-index:200;background:var(--ivory);color:var(--ink); display:flex;flex-direction:column;overflow:hidden;pointer-events:none; opacity:0;visibility:hidden;transition:opacity .5s ease, visibility 0s linear .5s} .menu-overlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s ease, visibility 0s} html.menu-lock{overflow:hidden} /* Scroll-Lock, solange das Menü offen ist */ /* --- Top-Leiste: Schließen · Marke · CTA --- */ /* topo estilo fromanother: marca à esquerda · CTA · X à direita */ .mo-top{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px; padding:24px 40px;position:relative;z-index:2;opacity:0;transition:opacity .5s ease .12s} .menu-overlay.open .mo-top{opacity:1} .mo-brand{grid-column:1;justify-self:start;font-family:'Cormorant Garamond',serif;font-size:18px;letter-spacing:.02em;color:var(--ink);white-space:nowrap} .mo-cta{grid-column:2;justify-self:end;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--copper); border-bottom:1px solid rgba(184,119,35,.4);padding-bottom:3px;transition:color .2s ease,border-color .2s ease} .mo-cta:hover{color:var(--ink);border-color:var(--ink)} .mo-close{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:9px;background:none;border:0; cursor:pointer;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--text-soft);transition:color .2s ease} .mo-close:hover{color:var(--ink)} .mo-close .x{position:relative;width:14px;height:14px;flex:none} .mo-close .x::before,.mo-close .x::after{content:"";position:absolute;top:50%;left:0;right:0;height:1.5px;background:currentColor} .mo-close .x::before{transform:rotate(45deg)}.mo-close .x::after{transform:rotate(-45deg)} /* seletor de idiomas no TOPO do menu (2026-06-17): fininho, cobre, omite o idioma atual */ .mo-langtop{display:flex;align-items:center;justify-content:center;gap:14px;padding:4px 40px 0; opacity:0;transition:opacity .5s ease .16s; font-family:'Manrope',system-ui,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase} .menu-overlay.open .mo-langtop{opacity:1} .mo-langtop a{color:var(--copper);opacity:.8;text-decoration:none;transition:opacity .2s ease,color .2s ease} .mo-langtop a:hover{opacity:1;color:var(--ink)} .mo-langtop .sep{color:var(--copper);opacity:.4} /* --- Editoriale Navigation (große Wörter, gestaffeltes Einblenden) --- */ .mo-nav{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(6px,1.4vh,16px); width:100%;max-width:1240px;margin:0 auto;padding:0 40px;position:relative;z-index:2;text-align:center} .mo-nav a{position:relative;display:inline-block;width:fit-content;overflow:hidden;padding-bottom:.08em; font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.08;letter-spacing:0; font-size:clamp(26px,6vw,40px);color:var(--ink);transition:color .3s ease} /* menu mais elegante (era 40-74px, grande demais) - 2026-07-01 */ .mo-nav a span{display:inline-block;transform:translateY(116%) scale(.94);opacity:0; transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s ease} .menu-overlay.open .mo-nav a span{transform:none;opacity:1} .menu-overlay.open .mo-nav a:nth-child(1) span{transition-delay:.08s} .menu-overlay.open .mo-nav a:nth-child(2) span{transition-delay:.14s} .menu-overlay.open .mo-nav a:nth-child(3) span{transition-delay:.20s} .menu-overlay.open .mo-nav a:nth-child(4) span{transition-delay:.26s} .menu-overlay.open .mo-nav a:nth-child(5) span{transition-delay:.32s} .menu-overlay.open .mo-nav a:nth-child(6) span{transition-delay:.38s} .mo-nav a::after{content:"";position:absolute;left:0;bottom:.1em;width:0;height:1.5px;background:var(--copper);transition:width .35s ease} .mo-nav a:hover{color:var(--copper)} .mo-nav a:hover::after{width:100%} /* --- Fußbereich: Kontakt + Sprache --- */ .mo-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap; padding:20px 40px 34px;position:relative;z-index:2;border-top:1px solid var(--line); opacity:0;transition:opacity .5s ease .18s} .menu-overlay.open .mo-foot{opacity:1} .mo-kontakt{display:flex;flex-direction:column;gap:4px} .mo-k-label{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--copper)} .mo-kontakt a{font-size:15px;color:var(--ink);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s ease} .mo-kontakt a:hover{border-color:var(--copper)} .mo-lang{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--copper)} .mo-lang a{color:var(--copper);opacity:.55;transition:opacity .2s ease} .mo-lang a:hover{opacity:1} .mo-lang a.on{opacity:1;color:var(--copper);font-weight:600} .mo-lang a.soon{color:var(--text-faint);cursor:default} .mo-lang a.soon:hover{color:var(--text-faint)} .mo-lang .sep{opacity:.3;color:var(--copper)} @media (max-width:600px){ .mo-top{padding:18px 22px;gap:12px} /* fix A3 2026-06-11: wordmark é a protagonista (design-guide) → fica VISÍVEL no overlay; o botão de fechar vira só o X (o texto «Schließen» permanece no nome acessível via font-size:0). */ .mo-brand{font-size:15px} .mo-close{font-size:0;gap:0} .mo-close .x{width:15px;height:15px} .mo-cta span{display:none} /* nur „Projekt anfragen" */ .mo-nav{padding:0 22px;gap:8px} .mo-foot{padding:16px 22px 24px} } /* --- Reduced motion: keine Drift, kein Slide, kürzeres Ein-/Ausblenden --- */ @media (prefers-reduced-motion:reduce){ .menu-overlay{transition:opacity .2s ease, visibility 0s linear .2s} .mo-nav a span{transition:none} .menu-overlay.open .mo-nav a span{transform:none;opacity:1} } /* ================================================================= PHASE 3 - Kontinuierlicher Hintergrund · Seiten-Index · Sprachwähler Sanftes Scroll-Gefühl wie eine durchgehende Leinwand (ref. fromanother.love), adaptiert an Omni: nur Schwarz/Graphit/Elfenbein/Kupfer, kein Neon, leicht. Reine CSS-Schicht + minimales Vanilla-JS (aktiver Abschnitt) - keine Libs. ================================================================= */ /* --- A · Sprachwähler im Header (Codes statt Flaggen; DE aktiv) --- nutzt bestehendes .langsel (oben definiert). Hier nur Platzierung/Feinschliff. */ .nav-inner .langsel{flex:none} .langsel a.on{cursor:default} .langsel a.soon{pointer-events:none} /* nicht-destruktiv: EN/PT/ES ohne Route */ /* --- Header persistente + ADAPTÁVEL (ref. fromanother): sem barra, nome sempre no centro, e a cor do texto troca conforme a seção sob o header - claro nas seções escuras, ESCURO nas seções marfim (senão some). Toggle .on-dark/.on-light vem do site.js; cobre é acento fixo (lê bem nas duas). --- */ .menu-trigger{justify-self:start} .brand{justify-self:center;color:currentColor; font-family:'Cormorant Garamond',serif;font-weight:600;font-size:20px;letter-spacing:.05em;white-space:nowrap} .brand .cv{color:var(--copper)} .nav-right{justify-self:end} .site-header.on-light{color:#1a160f} /* sobre marfim → tinta escura */ .site-header .menu-trigger,.site-header .nav-cta{color:currentColor} .mt-bars::before,.mt-bars::after{background:currentColor} .site-header .menu-trigger:hover,.site-header .nav-cta:hover,.site-header .brand:hover{opacity:.66} .site-header .langsel a{color:currentColor;opacity:.55} .site-header .langsel a:hover{opacity:1} .site-header .langsel a.on{opacity:1;color:var(--copper)} .site-header.on-light .langsel a.on{color:var(--copper-deep)} /* AA 4,81:1 sobre marfim (o #B87723 dá 3,19:1 em texto de 11px) */ .site-header .langsel a.soon{opacity:.4} .site-header .langsel .sep{color:currentColor;opacity:.32} .nav-cta .arr{color:var(--copper)} /* seta sempre cobre = toque de marca */ /* --- C · Sanfte Übergangsbänder: lösen harte Schnitte zwischen den Sektionen auf. Volle Breite, Omni-Farben (Schwarz → warmes Graphit → Elfenbein). --- */ /* faixas MAIS ALTAS + gradiente MAIS GRADUAL = transição fluida de uma cor pra outra (2026-06-16: estilo do site, só com a passagem de cor mais suave). */ .flow{margin:0 calc(50% - 50vw);height:clamp(120px,16vh,210px);border:0;pointer-events:none} .flow-d2l{background:linear-gradient(180deg,#0c0a08 0%,#15110b 22%,#2a2114 44%,#5a4a32 66%,#9d8a6a 84%,var(--ivory) 100%)} .flow-l2d{background:linear-gradient(180deg,var(--ivory) 0%,#9d8a6a 16%,#5a4a32 34%,#2a2114 56%,#15110b 78%,#0c0a08 100%)} @media (max-width:880px){.flow{height:clamp(130px,22vh,240px)}} /* --- B · Seiten-Index: diskreter Editorial-Rahmen am linken Rand. Sehr klein, geringer Kontrast, dünne Linie; aktiv = Kupfer/Elfenbein. Tönung (hell/dunkel) folgt dem Hintergrund unter dem Index (via JS .on-dark). Persistenter Fußabdruck bleibt < 40px (innerhalb des Inhalts-Paddings) → überlagert nie Text. Label erscheint editorial beim Hover. --- */ .secdex{position:fixed;left:clamp(14px,1.5vw,24px);top:50%;transform:translateY(-50%); z-index:70;display:flex;flex-direction:column;gap:clamp(9px,1.5vh,17px); --sd-faint:rgba(28,24,19,.32);--sd-on:var(--copper);--sd-line:rgba(28,24,19,.42)} .secdex.on-dark{--sd-faint:rgba(243,238,228,.36);--sd-on:var(--copper-lt);--sd-line:rgba(243,238,228,.5)} .sd-item{position:relative;display:flex;align-items:center;color:var(--sd-faint); transition:color .35s ease} .sd-n{font-family:'Manrope',system-ui,sans-serif;font-size:9px;font-weight:400; letter-spacing:.18em;font-variant-numeric:tabular-nums;line-height:1;opacity:.9} /* dünne Linie: wächst nach LINKS in den Rand (nie über Inhalt) */ .sd-item::before{content:"";position:absolute;right:100%;margin-right:7px; height:1px;width:0;background:var(--sd-line); transition:width .4s cubic-bezier(.2,.7,.2,1),background .35s ease} .sd-item.is-active{color:var(--sd-on)} .sd-item.is-active::before{width:26px;background:var(--sd-on)} /* Label (editorial, kursiv): SEMPRE visível no item ativo (descrição do que se vê), e transient no hover dos demais - pequeno, delicado. */ .sd-l{position:absolute;left:100%;margin-left:11px;white-space:nowrap; font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:13px;letter-spacing:.01em; color:var(--sd-on);opacity:0;transform:translateX(-4px);pointer-events:none; transition:opacity .35s ease,transform .35s ease} .sd-item.is-active .sd-l{opacity:1;transform:none} .sd-item:hover{color:var(--sd-on)} .sd-item:hover::before{width:26px;background:var(--sd-on)} .sd-item:hover .sd-l{opacity:1;transform:none} @media (max-width:980px){.secdex{display:none}} /* mobil/Tablet ausgeblendet */ @media (prefers-reduced-motion:reduce){.sd-item,.sd-item::before,.sd-l{transition:none}} /* --- A · Header eng auf kleinen Screens: Menü + Sprache + CTA passen ohne Overflow. Marke im Header mobil ausgeblendet (Platz für den CTA; Marke lebt im Overlay/Footer). --- */ @media (max-width:600px){ .nav-inner{gap:12px;padding:14px 16px} .nav-right{gap:11px} .nav-cta{font-size:10px;letter-spacing:.08em} } /* ================================================================= PHASE 4 - Ehrlicher Feinschliff (nur Abstände/Proportion, kein Redesign) Bewusster Weißraum statt zufälliger Leere; ausgewogenes Über. ================================================================= */ /* (Ajuste Phase-4 da §03 antiga + .chips removidos em 2026-06-11 - o respiro da «Für wen» v3 vive no bloco próprio da seção, mais acima.) */ /* ================================================================= PHASE 5 - Erzählfluss (AIDA): ruhigere Leistungen + editoriale Branchen-Walze (§02), gefasste «Für wen»-Zone (§03), rotierendes Wort im finalen CTA (§07). Omni-Palette, kein Neon, keine Libs. ================================================================= */ /* (Branchen-Walze .seg-* removida em 2026-06-11 - o #segWheel já não existia no HTML; CSS morto desde a saída do 3D-Rad da §02.) */ /* §07 - sub do CTA final */ .cta-sub{font-size:14.5px;line-height:1.6;color:rgba(243,238,228,.62); margin:14px auto 0;max-width:560px;position:relative;z-index:2} /* ================================================================= PHASE 6 - AIDA-Feinschliff: §02-Titel ruhiger; Hero = Cover (Index erst NACH dem Hero aktiv). ================================================================= */ /* §02 - Titel premium-zurückhaltend: folgt der globalen Titel-Régua (--title-size, definiert in :root - Vereinheitlichung 2026-06-11). */ /* Hero ist die Titelseite: Seiten-Index dort ausgeblendet (kein aktives 01), blendet sanft ein, sobald der erste nummerierte Abschnitt beginnt. */ .secdex{transition:opacity .5s ease} .secdex.pre-hero{opacity:0;pointer-events:none} /* ================================================================= CTA PREMIUM - Kupfer: Glanz im Hover + Kupfer-Welle (Ripple) im Klick. Bewegung mit Sinn, nie blinkend (DNA des klShine). reduced-motion = statisch. ================================================================= */ .btn-copper{position:relative;overflow:hidden;isolation:isolate} .btn-copper > *{position:relative;z-index:2} .btn-copper::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0; background:linear-gradient(115deg,transparent 38%,rgba(255,245,225,.5) 50%,transparent 62%); background-size:220% 100%;background-position:140% 0;transition:opacity .3s ease} .btn-copper:hover::before,.btn-copper:focus-visible::before{opacity:1;animation:btnGlint 1.8s cubic-bezier(.4,0,.2,1) infinite} @keyframes btnGlint{0%{background-position:140% 0}45%{background-position:-40% 0}100%{background-position:-40% 0}} .btn-copper:hover{box-shadow:0 20px 42px -12px rgba(216,155,78,.6),inset 0 0 0 1px rgba(240,192,131,.45)} .copper-ripple{position:absolute;z-index:1;border-radius:50%;pointer-events:none;transform:scale(0); background:radial-gradient(circle,rgba(255,238,210,.6),rgba(216,155,78,.35) 45%,rgba(216,155,78,0) 70%); animation:copperRipple .62s cubic-bezier(.22,.61,.36,1) forwards} @keyframes copperRipple{to{transform:scale(1);opacity:0}} .nav-cta{position:relative} .nav-cta::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--copper-lt); transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.61,.36,1)} .nav-cta:hover::after{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){ .btn-copper::before{display:none}.copper-ripple{display:none}.nav-cta::after{transition:none} } /* ================================================================= FOOTER komplett - NAVIGATION + RECHTLICHES + Kanäle (Premium-DE-Muster) ================================================================= */ .foot-legal{background:#0F0D08;color:rgba(243,238,228,.7);margin:0 calc(50% - 50vw); padding:clamp(48px,7vh,76px) max(40px,calc(50vw - 660px)) 26px} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start} .foot-brand .fbrand{font-family:'Cormorant Garamond',serif;font-size:24px;color:#F3EEE4;display:block} .foot-brand .fbrand .cv{color:var(--copper-lt)} .foot-brand .fbrand .st{font-family:'Manrope',sans-serif;font-size:10px;letter-spacing:.28em;color:rgba(243,238,228,.5);margin-left:3px} .foot-tag{font-family:'Manrope',sans-serif;font-size:13px;line-height:1.6;color:rgba(243,238,228,.55);margin:12px 0 0;max-width:30ch} .foot-col{display:flex;flex-direction:column;gap:10px} .foot-h{font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-lt);margin-bottom:4px} .foot-col a{font-family:'Manrope',sans-serif;font-size:14px;color:rgba(243,238,228,.72);text-decoration:none;width:fit-content; border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease} .foot-col a:hover{color:#F3EEE4;border-color:var(--copper)} .foot-base{margin-top:clamp(32px,5vh,52px);padding-top:18px;border-top:1px solid rgba(243,238,228,.1); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .foot-base .cr{font-family:'Manrope',sans-serif;font-size:12px;color:rgba(243,238,228,.45)} @media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px}.foot-brand{grid-column:1 / -1}} /* ================================================================= KONTAKT-SEITE - geteiltes Layout (dunkle Erzählung links / helles Formular rechts) ================================================================= */ .kontakt-body .site-header{background:rgba(15,13,8,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .kontakt-body .site-header,.kontakt-body .site-header.on-light{color:#F3EEE4} .kontakt-split{margin:0 calc(50% - 50vw);display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);align-items:stretch;min-height:100vh} .kt-left{background:var(--ink);color:#F3EEE4;position:relative;overflow:hidden; padding:clamp(120px,16vh,180px) clamp(28px,4vw,56px) clamp(48px,7vh,72px); display:flex;flex-direction:column;gap:clamp(22px,3vh,34px)} .kt-left::before{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--copper-lt),transparent);opacity:.4} .kt-eyebrow{font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-lt)} .kt-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(34px,4vw,52px);line-height:1.08;color:#F6F1E7;margin:0;max-width:14ch} .kt-title em{font-style:italic;color:var(--copper-lt)} .kt-lead{font-family:'Manrope',sans-serif;font-size:15px;line-height:1.7;color:rgba(243,238,228,.78);max-width:42ch;margin:0} .kt-chan{display:flex;flex-direction:column;gap:13px;margin-top:auto} .kt-chan-h{font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,238,228,.5)} .kt-chan a{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:rgba(243,238,228,.85);text-decoration:none;width:fit-content;border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s} .kt-chan a:hover{color:#fff;border-color:var(--copper)} .kt-chan svg{color:var(--copper-lt);flex:0 0 auto} .kt-legal{display:flex;gap:18px;font-size:12px;margin-top:6px} .kt-legal a{color:rgba(243,238,228,.5);text-decoration:none} .kt-legal a:hover{color:var(--copper-lt)} .kt-right{background:#F3EEE4;color:#1b1710;padding:clamp(120px,16vh,180px) clamp(28px,5vw,80px) clamp(56px,8vh,90px)} .kt-intro{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:#5a4c34;margin:0 0 clamp(28px,4vh,44px);max-width:46ch} .kt-form{max-width:640px} .kt-group{margin-bottom:clamp(26px,4vh,38px)} .kt-group-h{font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-deep);margin:0 0 18px;padding-bottom:8px;border-bottom:1px solid rgba(143,94,20,.25)} .kt-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px} .kt-field{display:flex;flex-direction:column;gap:6px} .kt-field.full{grid-column:1 / -1} .kt-field label{font-family:'Manrope',sans-serif;font-size:12.5px;font-weight:600;color:#3d3424} .kt-field label .req{color:var(--copper-deep)} .kt-field input,.kt-field select,.kt-field textarea{font-family:'Manrope',sans-serif;font-size:15px;color:#1b1710; background:transparent;border:0;border-bottom:1px solid rgba(27,23,16,.25);padding:8px 2px;border-radius:0;transition:border-color .25s ease} .kt-field textarea{resize:vertical;min-height:96px;line-height:1.6} .kt-field input:focus,.kt-field select:focus,.kt-field textarea:focus{outline:0;border-color:var(--copper)} .kt-field input:invalid:not(:placeholder-shown),.kt-field textarea:invalid:not(:placeholder-shown){border-color:#a8431f} .kt-note{font-family:'Manrope',sans-serif;font-size:12.5px;font-style:italic;color:#6b5c40;margin:12px 0 0;display:flex;gap:8px} .kt-note::before{content:"\2192";color:var(--copper-deep);font-style:normal} .kt-consent{display:flex;align-items:flex-start;gap:12px;margin:6px 0 26px} .kt-consent input{margin-top:3px;accent-color:var(--copper-deep);width:16px;height:16px;flex:0 0 auto} .kt-consent label{font-family:'Manrope',sans-serif;font-size:13px;line-height:1.5;color:#3d3424} .kt-consent a{color:var(--copper-deep);text-decoration:underline} .kt-submit{border:0;cursor:pointer} .kt-reassure{font-family:'Manrope',sans-serif;font-size:13px;font-style:italic;line-height:1.6;color:#6b5c40;margin:22px 0 0;max-width:46ch} .kt-success{padding:40px 0;display:flex;flex-direction:column;gap:14px} .kt-success h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(26px,3vw,38px);color:#1b1710;margin:0} .kt-success p{font-family:'Manrope',sans-serif;font-size:15px;line-height:1.6;color:#5a4c34;margin:0;max-width:42ch} .kt-success[hidden]{display:none} .kt-steps{display:flex;flex-direction:column;gap:15px} .kt-step{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline} .kt-step .n{font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--copper-lt);grid-row:1 / span 2} .kt-step .t{font-family:'Cormorant Garamond',serif;font-size:19px;color:#F3EEE4;line-height:1.2} .kt-step .d{font-family:'Manrope',sans-serif;font-size:13px;line-height:1.5;color:rgba(243,238,228,.6);margin-top:2px} @media (prefers-reduced-motion:no-preference){ .kt-left,.kt-right>*{animation:ktRise .8s cubic-bezier(.2,.7,.2,1) both} .kt-right>*:nth-child(2){animation-delay:.05s}.kt-right>*:nth-child(3){animation-delay:.1s} @keyframes ktRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} } @media (max-width:860px){ .kontakt-split{grid-template-columns:1fr} .kt-left{padding-top:clamp(96px,14vh,120px);min-height:auto} .kt-right{padding-top:clamp(40px,6vh,64px)} .kt-fields{grid-template-columns:1fr} .kt-chan{margin-top:30px} } /* ----------------------------------------------------------------- BOLHA FLUTUANTE WHATSAPP - só existe no markup da pt-BR. Acompanha a rolagem (fixed). Vestida na identidade Omni (marfim/cobre, NUNCA verde). Sem animação. Estado .is-off = desativada (sem número ainda). ----------------------------------------------------------------- */ .wa-omni{ position:fixed;bottom:26px;right:24px;z-index:80; text-decoration:none; } /* cobre correndo na linha de contorno do botão — MESMA técnica do circuito da hero (decisão de design): trilha de cobre apagado (.wa-trace) + pulso de luz percorrendo o contorno via stroke-dashoffset (pathLength=1000, .wa-pulse). SVG puro, sem lib (DSGVO). Reduced-motion: contorno estático visível, pulso desligado. */ .wa-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none} .wa-trace{fill:none;stroke:var(--copper);stroke-opacity:.45;stroke-width:2.5} .wa-pulse{fill:none;stroke:var(--pulse-core);stroke-width:5;stroke-linecap:round; stroke-dasharray:230 770;stroke-dashoffset:1000; filter:drop-shadow(0 0 7px var(--pulse-glow)) drop-shadow(0 0 16px var(--pulse-glow)); animation:waPulse 3.8s linear infinite} /* 2º pulso em sentido OPOSTO (decisão de design): os dois se cruzam, simulando um circuito de verdade, referência à hero. Mesma trilha, direção invertida + fase. */ .wa-pulse-2{animation-direction:reverse;animation-delay:-1.9s} @keyframes waPulse{to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){.wa-pulse,.wa-pulse-2{animation:none;stroke-dashoffset:0;stroke-dasharray:none;stroke-opacity:.5;filter:none}} .wa-omni-pill{ position:relative; display:inline-flex;align-items:center;gap:11px; background:var(--matte); color:var(--ivory); border:1px solid rgba(184,119,35,.55); /* hairline de cobre */ border-radius:999px; padding:11px; box-shadow:0 10px 30px rgba(12,11,9,.34); transition:border-color .25s ease, transform .25s ease; } .wa-omni-icon{ display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:linear-gradient(135deg,var(--copper),var(--copper-lt)); color:#14110B;flex:0 0 auto; } .wa-omni-label{display:none} /* icon-only nos 4 idiomas (decisão de design): só o ícone do WhatsApp */ /* hover só quando ATIVA (link real, sem .is-off) */ .wa-omni:not(.is-off):hover .wa-omni-pill{border-color:var(--copper);transform:translateY(-2px)} /* estado desativado: presente, mas sem ação e mais discreto */ .wa-omni.is-off{opacity:.62;cursor:not-allowed;pointer-events:none} @media (max-width:760px){ .wa-omni{bottom:20px;right:16px} .wa-omni-label{display:none} /* mobile: só o ícone, sem ocupar espaço nem cobrir texto */ .wa-omni-pill{padding:11px} .wa-omni-icon{width:44px;height:44px} /* maior no celular (2026-06-17) */ .wa-omni-icon svg{width:24px;height:24px} } /* =================================================================== §04 Konzeptstudien - DECK de cartas (mobile) - 2026-06-17 No celular, o carrossel horizontal vira um "deck": carta da frente GRANDE, as próximas espiam atrás na diagonal; roda sozinho e pausa ao tocar (toque na frente = zoom pra inspecionar). Desktop intacto. =================================================================== */ .ksd{display:none} /* desktop: deck oculto */ @media (max-width:900px){ #kstudien .ks-track,#kstudien .ks-bar{display:none} /* esconde o carrossel + controles antigos */ .ksd{display:block;position:relative;margin-top:14px} .ksd-stage{position:relative;width:100%;height:74vw;max-height:58vh;perspective:1500px;touch-action:pan-y} .ksd-stage::before{content:"";position:absolute;left:50%;top:46%;width:80vw;height:62vw;max-height:50vh; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(closest-side,rgba(216,155,78,.18),transparent 72%);filter:blur(8px)} .ksd-card{position:absolute;top:50%;left:50%;width:90vw;max-width:560px;aspect-ratio:4/3;margin:0; border-radius:14px;overflow:hidden;cursor:pointer;background:#1a1510; border:1px solid rgba(216,160,110,.18);box-shadow:0 26px 60px -28px rgba(0,0,0,.85); transition:transform .54s cubic-bezier(.2,.74,.2,1),opacity .54s ease,box-shadow .4s ease; will-change:transform,opacity;transform-origin:center center} .ksd-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .ksd-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(216,160,110,.22)} .ksd-card.is-front{box-shadow:0 30px 70px -26px rgba(0,0,0,.9),0 0 0 1px rgba(216,160,110,.30),0 0 34px -6px rgba(216,155,78,.28)} .ksd-card.dim::before{content:"";position:absolute;inset:0;background:rgba(8,6,4,.46);z-index:2} .ksd-cap{text-align:center;padding:16px 26px 2px;min-height:84px} .ksd-kick{font-family:'Manrope',system-ui,sans-serif;font-size:12px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--copper-lt)} .ksd-text{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(17px,4.8vw,21px); line-height:1.32;margin-top:8px;color:#e9e3d7} .ksd-ctl{display:flex;align-items:center;justify-content:center;gap:20px;padding:2px 0 0} .ksd-nav{width:46px;height:46px;border-radius:50%;border:1px solid rgba(216,160,110,.4); background:transparent;color:var(--copper-lt);font-size:18px;display:grid;place-items:center;cursor:pointer} .ksd-nav:active{background:rgba(216,160,110,.14)} .ksd-count{font-family:'Manrope',system-ui,sans-serif;font-size:12px;letter-spacing:.14em;color:#b5b0a7;min-width:54px;text-align:center} .ksd-count b{color:var(--copper-lt);font-weight:700} .ksd-hint{font-family:'Manrope',system-ui,sans-serif;font-size:11.5px;letter-spacing:.06em; color:#c9c4ba;opacity:.9;text-align:center;margin-top:10px;padding:0 20px} .ksd-hint b{color:var(--copper-lt);font-weight:700} .ksd-zoom{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;align-items:center; justify-content:center;gap:14px;background:#0a0705;overflow:auto;-webkit-overflow-scrolling:touch; padding:max(16px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom))} .ksd-zoom.open{display:flex} .ksd-zoom img{width:100%;max-width:760px;height:auto;aspect-ratio:4/3;object-fit:contain; border-radius:12px;border:1px solid rgba(216,160,110,.2);flex:0 0 auto} .ksd-zcap{font-family:'Manrope',system-ui,sans-serif;font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:var(--copper-lt);text-align:center;flex:0 0 auto} .ksd-zclose{position:fixed;top:max(14px,env(safe-area-inset-top));right:16px;z-index:301;width:42px;height:42px; border-radius:50%;border:1px solid rgba(216,160,110,.4);background:rgba(13,11,8,.6);color:var(--ivory); font-size:20px;display:grid;place-items:center;cursor:pointer} } @media (max-width:900px) and (prefers-reduced-motion:reduce){ .ksd-card{transition:none} } /* =================================================================== §07 CTA - palavra rotativa FORJADA EM COBRE (2026-06-17) A última palavra troca em loop; cada uma surge gravada em cobre incandescente que esfria - assinatura própria da Omni (o cobre que forja as palavras). «überzeugt» = âncora/repouso e reduced-motion. =================================================================== */ .rotword{display:inline-block;white-space:nowrap; /* largura = conteúdo: o ponto final cola na palavra, sem vão (2026-06-17) */ color:var(--copper-lt);position:relative;will-change:opacity,filter,transform} .rotword.forging{animation:copperForge .64s cubic-bezier(.2,.7,.2,1)} @keyframes copperForge{ 0%{opacity:0;transform:translateY(5px) scale(.99); filter:drop-shadow(0 0 2px #fff4e0) drop-shadow(0 0 15px rgba(255,160,70,.95)) brightness(1.85)} 45%{opacity:1} 100%{opacity:1;transform:none;filter:drop-shadow(0 0 0 transparent) brightness(1)} } @media (prefers-reduced-motion:reduce){ .rotword.forging{animation:none} } /* =================================================================== Assinatura "COBRE JOIA" (2026-06-17): uma luz varre o cobre em loop - joia reluzindo. Nas palavras KLAR (.kw), no logo da marca e na régua do KLAR. Reduced-motion = cobre sólido, sem varredura. =================================================================== */ @keyframes kwShine{0%{background-position:120% 0}55%{background-position:-20% 0}100%{background-position:-20% 0}} /* KLAR citado no manifesto e no §02: um pouco MAIOR, destacado (2026-06-17) */ .manifest-sub .kw,.lst-teaser .kw{font-size:1.32em;font-weight:700} .s-title .kw,.lst-teaser .kw,.manifest-sub .kw,.kw{ background:linear-gradient(100deg,var(--copper) 0 38%,#F2CE92 47%,#FFF6E0 50%,#F2CE92 53%,var(--copper) 62% 100%); background-size:300% 100%;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent;animation:kwShine 4.6s linear infinite} /* logo: joia reluzindo (luz varre em loop sempre) */ .site-header .brand{ /* camada 1 = brilho (transparente com banda branca) varrendo; camada 2 = cobre sólido fixo. Em repouso o brilho fica FORA do texto → logo cobre sólido (sem branco parado). */ background-image: linear-gradient(105deg, transparent 0 41%, rgba(255,251,238,.92) 50%, transparent 59% 100%), linear-gradient(var(--copper), var(--copper)); background-size:240% 100%, 100% 100%;background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; animation:logoShine 3.4s ease-in-out infinite} .site-header .brand .cv{-webkit-text-fill-color:transparent;color:transparent} @keyframes logoShine{0%,14%{background-position:135% 0,0 0}58%,100%{background-position:-45% 0,0 0}} /* régua do KLAR: cobre passando */ .klar-chord{position:relative;overflow:visible} .klar-track.is-done .klar-chord::after{content:"";position:absolute;top:-1px;bottom:-1px;left:-76px;width:72px; border-radius:3px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--pulse-body) 45%,var(--pulse-core) 55%,transparent); filter:drop-shadow(0 0 6px var(--pulse-glow));animation:fwPulse 4s linear infinite} @media (prefers-reduced-motion:reduce){ .kw{animation:none;background:none;-webkit-text-fill-color:var(--copper);color:var(--copper)} .site-header .brand{animation:none;background:none;-webkit-text-fill-color:currentColor} .klar-track.is-done .klar-chord::after{animation:none;opacity:.5} } /* ===== §STUDIO (leque de cartas) + FAQ - portado do esboço (2026-07-02) ===== */ /* ---- seção ---- */ .qs{background:var(--ivory);color:var(--text);overflow-x:clip; padding:clamp(56px,9vh,104px) clamp(24px,6vw,64px)} .qs-wrap{max-width:1120px;margin:0 auto} /* grade desktop: TEXTO | FOTO alinhados pelo TOPO; o LEQUE e a linha KLAR descem para linhas PRÓPRIAS que atravessam as duas colunas (deck/klar), para lerem CENTRADOS no eixo da página - o mesmo eixo do FAQ abaixo - e não confinados à coluna de texto (correção de alinhamento 2026-07-02). */ .qs-grid{display:grid;grid-template-columns:1fr minmax(280px,360px); grid-template-areas:"eyebrow foto" "texto foto" "deck deck" "klar klar"; gap:clamp(40px,5vw,80px);align-items:start} .qs-eyebrow{grid-area:eyebrow} .qs-text{grid-area:texto} .qs-aside{grid-area:foto} .qs-deck{grid-area:deck} .qs-klar{grid-area:klar} /* eyebrow: idêntico ao .eyebrow do site (11px/700/.22em/copper-deep 4,81:1 AA ✓) */ .qs-eyebrow{font-family:'Manrope',system-ui,sans-serif;font-size:11px;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--copper-deep); margin:0 0 clamp(16px,2vh,22px)} /* ================================================================ BRILHO DE COBRE PADRONIZADO (kwShine). UMA classe única (.qs-shine) para TODA palavra em cobre brilhante: "lembrado" (lead), "KLAR" (link), "transparentes" (FAQ title). MESMO gradiente, MESMA velocidade (3.6s = a do site) e MESMA intensidade. kwShine vem do site.css. Nada de velocidades diferentes. ================================================================ */ .qs-shine{ background:linear-gradient(100deg,var(--copper) 0 38%,#F2CE92 47%,#FFF6E0 50%,#F2CE92 53%,var(--copper) 62% 100%); background-size:300% 100%;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:kwShine 3.6s linear infinite} /* kwShine vem do site.css */ /* variação itálica (só no "lembrado" e "transparentes", como o site faz em em) */ .qs-shine.is-em{font-style:italic} /* lead: momento display na RÉGUA ÚNICA de títulos do site (--title-size) */ .qs-lead{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600; font-size:var(--title-size);line-height:1.1;letter-spacing:.005em; color:var(--ink);max-width:18ch;margin:0 0 clamp(18px,2.2vh,26px); overflow-wrap:break-word} /* intro: como .s-lead do site (15px / line 1.7) */ .qs-intro{font-family:'Manrope',system-ui,sans-serif; font-size:15px;line-height:1.7;color:var(--text-soft); /* 5,01:1 AA ✓ */ max-width:52ch;margin:0 0 clamp(24px,3vh,36px)} /* ================================================================ PILHA DE CARTAS AUTO-PASSANDO (karten-stapel) - SOFISTICADA. 6 cartas, TODAS DO MESMO TAMANHO (mesma largura e altura; NADA de escala nas de trás). Empilhadas UMA ATRÁS DA OUTRA. NOVIDADES desta versão (sem quebrar nada do que já valia): 1) VIDRO: cada carta é translúcida (marfim rgba + backdrop-filter:blur) da MESMA família do site (.legal-top / header): dá pra VER as cartas de trás ATRAVÉS da da frente. Fallback @supports → marfim quase-sólido. O VERSO (muito texto) é mais opaco pra garantir leitura AA. 2) MENOS ALINHADAS: cada carta de trás recebe rotação/offset SUTIL e DIFERENTE (via --rot/--dx por posição) → tem vida, sem virar bagunça. 3) BARALHO DE VERDADE: a carta da frente, ao ir pro FUNDO, LEVANTA, desliza num ARCO com leve rotação e se ENFIA por baixo (classe .is-dealing, easing ease-in-out). Sombra POR PROFUNDIDADE: frente nítida/fechada, trás abertas/suaves. Realce fino de luz na quina superior (mesma direção de luz em todas). 4) VIRAR PRA EXPLICAR: hover (desktop) / TAP (mobile) EXPANDE mais e VIRA (flip 3D rotateY) mostrando o VERSO com a explicação completa. Texto SEMPRE acessível; reduced-motion mostra o verso sem depender de animação. 5) AUTO-PASSA a cada ~2.5s. ZERO cobre em movimento (sem anel girando, sem cônico). ZERO travessão. REGRA DE FERRO: sem .js OU reduced-motion → pilha estática legível, frente 100% legível, texto NUNCA some. ================================================================ */ .qs-deck{position:relative; margin:clamp(40px,5.5vh,64px) 0 0; --n:6; /* LEQUE (desktop): passo ANGULAR entre as cartas + pivô ABAIXO (como uma mão segurando o baralho) → abrem em arco, TODAS DO MESMO TAMANHO. */ --fan-step:8.6deg; --fan-origin:50% 152%; /* sombra de COBRE por profundidade (ZERO cobre girando) */ --sh-fan:0 18px 40px -24px rgba(143,94,20,.30), 0 6px 15px -10px rgba(143,94,20,.18); --sh-active:0 44px 76px -26px rgba(143,94,20,.52), 0 16px 32px -14px rgba(143,94,20,.32)} .qs-deck-track{position:relative; /* altura reservada (cartas são absolutas): cabe o leque aberto em arco + a carta escolhida que SOBE à frente. */ height:clamp(368px,48vh,448px); perspective:1600px} .qs-card{position:absolute;left:50%;bottom:6px; width:clamp(190px,16.5vw,228px); /* PORTRAIT: carta de baralho */ transform:translateX(-50%); transform-origin:var(--fan-origin); /* transição suave pra abrir/fechar o leque e subir a escolhida */ transition:transform .6s cubic-bezier(.34,.03,.2,1), box-shadow .5s ease; will-change:transform} /* ---- FLIP 3D: a carta tem duas faces (frente/verso) num plano que gira. O .qs-card só posiciona/empilha; o .qs-card-flip é quem VIRA. ---- */ .qs-card-flip{position:relative;transform-style:preserve-3d; transition:transform .6s cubic-bezier(.42,0,.24,1)} /* miolo marfim TRANSLÚCIDO LIMPO (sem blur - o blur é que sujava atrás do texto). O alpha deixa VER as cartas de trás pelas bordas/sobreposição do leque, com nitidez, sem borrão. */ .qs-card-face{position:absolute;inset:0;height:100%; border-radius:15px;box-sizing:border-box; -webkit-backface-visibility:hidden;backface-visibility:hidden; padding:clamp(20px,2.3vw,28px);display:flex;flex-direction:column; justify-content:center;gap:10px;text-align:left;overflow:hidden; /* SÓLIDA (sem transparência - a transparência atrapalhava a leitura do texto). Marfim opaco → escrita 100% nítida. Baralho é opaco mesmo. */ background:#FBF8F1; border:1px solid rgba(184,119,35,.32)} /* a que fica no plano de trás do flip = o VERSO, pré-girado 180° */ .qs-card-back{transform:rotateY(180deg); background:#FBF8F1; justify-content:flex-start;gap:9px} /* casca que dá altura ao flip (as faces são absolutas dentro dela) - PORTRAIT */ .qs-card-flip{height:clamp(300px,40vh,356px)} /* REALCE FINO DE LUZ na quina superior (mesma direção de luz em todas): um brilho marfim no topo-esquerda, muito sutil. Estático (não é cobre em movimento). */ .qs-card-face::before{content:"";position:absolute;inset:0;border-radius:16px; pointer-events:none; background:linear-gradient(150deg,rgba(255,252,246,.55),rgba(255,252,246,0) 34%); opacity:.7} /* filete de cobre discreto no topo da FRENTE (afordância, estático) */ .qs-card-face::after{content:"";position:absolute;left:clamp(24px,4vw,36px); right:clamp(24px,4vw,36px);top:0;height:1px;border-radius:1px; background:linear-gradient(90deg,transparent,var(--copper-lt),transparent); opacity:0;transition:opacity .5s ease} /* palavra do card: RÉGUA de .fw-name do site (serif 600), SEM ícone */ .qs-card-word{font-family:'Cormorant Garamond',serif;font-weight:600; font-size:clamp(26px,2.6vw,34px);line-height:1.12;letter-spacing:.005em; color:var(--ink);margin:0;position:relative} /* 17,76:1 AA ✓ */ /* frase curta da FRENTE: RÉGUA de .fw-satz. Texto SEMPRE visível. */ .qs-card-satz{font-family:'Manrope',system-ui,sans-serif; font-size:15px;line-height:1.7;color:var(--text-soft); /* 5,46:1 AA ✓ */ max-width:34ch;margin:0;position:relative} /* VERSO: título menor + explicação completa. Mesma tipografia do site. */ .qs-card-word.is-back{font-size:clamp(21px,2vw,26px);margin-bottom:2px} .qs-card-kick{font-family:'Manrope',system-ui,sans-serif;font-size:11px; font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--copper-deep);margin:0 0 2px} /* 5,24:1 AA ✓ */ .qs-card-erk{font-family:'Manrope',system-ui,sans-serif; font-size:13.5px;line-height:1.5;color:var(--text-soft); /* 5,46:1 AA ✓; menor+junto pra caber palavra longa (DE/ES) sem cortar */ margin:0;position:relative} /* ---- LEQUE ESTÁTICO (base, vale SEM .js e como ponto de partida) ---- Cada carta tem um SLOT FIXO no leque: um ângulo por posição no DOM, girando a partir do PIVÔ abaixo (como uma mão que abre o baralho). TODAS DO MESMO TAMANHO. z cresce da esquerda pra direita (mão de cartas). Sem .js já é um leque legível, com a frente de cada carta à mostra. */ .qs-card:nth-child(1){transform:translateX(-50%) rotate(calc(var(--fan-step) * -2.5));z-index:1} .qs-card:nth-child(2){transform:translateX(-50%) rotate(calc(var(--fan-step) * -1.5));z-index:2} .qs-card:nth-child(3){transform:translateX(-50%) rotate(calc(var(--fan-step) * -0.5));z-index:3} .qs-card:nth-child(4){transform:translateX(-50%) rotate(calc(var(--fan-step) * 0.5));z-index:4} .qs-card:nth-child(5){transform:translateX(-50%) rotate(calc(var(--fan-step) * 1.5));z-index:5} .qs-card:nth-child(6){transform:translateX(-50%) rotate(calc(var(--fan-step) * 2.5));z-index:6} .qs-card{box-shadow:var(--sh-fan)} /* ---- CARTA ESCOLHIDA (.is-active): sai do leque, SOBE à frente do baralho, endireita, cresce um tico e ganha sombra funda de cobre → fica "em cima das outras". Depois o JS tira a classe e ela VOLTA pro slot do leque, e a próxima é escolhida (o leque vai rodando). ---- */ html.js .qs-card.is-active{ transform-origin:50% 50%; transform:translateX(-50%) translateY(-46px) rotate(0deg) scale(1.14); /* projeção MAIOR da carta da frente (pedido) */ z-index:60;box-shadow:var(--sh-active)} html.js .qs-card.is-active .qs-card-front::after{opacity:.9} /* ---- VIRAR PRA EXPLICAR (.is-flipped): a escolhida gira (rotateY) e mostra o VERSO com a explicação completa. Só transform → texto nunca some. ---- */ html.js .qs-card.is-flipped .qs-card-flip{transform:rotateY(180deg)} /* no desktop, o cursor mostra que dá pra interagir com a carta */ @media (hover:hover) and (pointer:fine){ html.js .qs-card{cursor:pointer} } /* ---- CONTROLES (botão de pausa obrigatório · WCAG 2.2.2) ---- */ .qs-deck-ctrl{display:flex;align-items:center;gap:14px; margin:clamp(18px,2.6vh,26px) 0 0} .qs-deck-btn{display:inline-flex;align-items:center;gap:8px; font-family:'Manrope',system-ui,sans-serif;font-size:12px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--copper-deep); /* 4,81:1 AA ✓ */ background:transparent;border:1px solid rgba(184,119,35,.35); border-radius:999px;padding:9px 16px;cursor:pointer; transition:border-color .3s ease,color .3s ease,background .3s ease} .qs-deck-btn:hover{border-color:var(--copper);color:var(--copper-deep); background:rgba(184,119,35,.06)} .qs-deck-btn:focus-visible{outline:2px solid var(--copper-lt);outline-offset:3px} .qs-deck-btn svg{width:13px;height:13px;display:block;fill:currentColor} .qs-deck-btn .ico-pause{display:block} .qs-deck-btn .ico-play{display:none} .qs-deck-btn[aria-pressed="true"] .ico-pause{display:none} .qs-deck-btn[aria-pressed="true"] .ico-play{display:block} /* progresso em pontos: mostra qual das 6 está na frente */ .qs-deck-dots{display:flex;gap:7px;align-items:center} .qs-deck-dots i{width:6px;height:6px;border-radius:50%; background:rgba(184,119,35,.28);transition:background .4s ease,transform .4s ease} .qs-deck-dots i.on{background:var(--copper);transform:scale(1.35)} /* dica sutil de que a carta vira (só desktop; some no toque) */ .qs-deck-hint{font-family:'Manrope',system-ui,sans-serif;font-size:11px; letter-spacing:.04em;color:var(--text-soft);margin-left:2px;opacity:.85} /* sem .js os controles não fazem nada → escondidos (a pilha estática já é legível) */ .qs-deck-ctrl{display:none} html.js .qs-deck-ctrl{display:flex} /* ---- DESKTOP (≥761): o leque e a linha KLAR agora ocupam linhas próprias que atravessam as duas colunas do grid → o .qs-deck-track fica full-width e as cartas (left:50%) centram no EIXO DA PÁGINA, o mesmo do FAQ. Aqui só ajustamos o RITMO VERTICAL dessas linhas (o gap entre linhas do grid já separa; zeramos o margin-top que valia quando o deck vivia na coluna de texto) e CENTRAMOS os controles (antes flush-left). O respiro maior até o FAQ vem do padding da própria seção .faq (ver bloco .faq). Mobile intocado: este bloco não entra em ≤760, onde .qs-grid é flex-column. ---- */ @media (min-width:761px){ .qs-deck{margin-top:0} .qs-klar{margin-top:clamp(8px,1.4vh,18px)} /* folga MAIOR entre o deck e os controles: a carta escolhida (que sobe/ cresce, scale 1.14) e as cartas do leque chegavam em cima do "PAUSE" ao abrir - malfeito (2026-07-02). Empurra o PAUSE pra baixo pra a carta aberta nunca bater nele. Só desktop; mobile intocado. */ .qs-deck-ctrl{justify-content:center;margin-top:clamp(76px,9.5vh,104px)} /* respiro um pouco maior entre o fim do §Studio (linha KLAR) e o início do §FAQ - pedido da ("um espacinho maior"). Modesto (+~32px no topo) e SÓ desktop; o padding mobile do .faq (bloco ≤760) segue intocado. */ .faq{padding-top:clamp(72px,10vh,128px)} } /* reduced-motion: SEM auto-passagem, SEM arco, SEM flip animado. Pilha estática legível; o VERSO fica ACESSÍVEL sem depender de animação → mostramos a FRENTE (título+frase) normalmente e o verso continua no DOM, legível ao focar/abrir (o flip vira instantâneo, sem transição). Texto NUNCA some. */ @media (prefers-reduced-motion:reduce){ .qs-card{transition:none} .qs-card-flip{transition:none} html.js .qs-deck-ctrl{display:none} /* leque estático legível; a escolhida (se marcada) sobe e vira instantâneo */ html.js .qs-card.is-active{transform:translateX(-50%) translateY(-40px) rotate(0deg) scale(1.08);transform-origin:50% 50%} html.js .qs-card.is-flipped .qs-card-flip{transform:rotateY(180deg)} } /* ---- linha KLAR (LINK para o método): serif 600 IGUAL ao site. Vai no FINAL. ---- */ .qs-klar{display:block;margin:clamp(40px,5.5vh,72px) auto 0;text-align:center; font-family:'Cormorant Garamond',serif;font-weight:600; font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--text-soft); max-width:56ch;transition:color .3s ease} .qs-klar:hover,.qs-klar:focus-visible{color:var(--ink)} /* affordance do link NA palavra KLAR: sublinha de cobre que reage no hover. A palavra brilha com o MESMO kwShine (.qs-shine) das outras. */ .qs-klar .kw{position:relative;letter-spacing:.05em} .qs-klar .kw::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px; background:var(--copper);opacity:.45;transition:opacity .3s ease,transform .3s ease; transform:scaleX(.85);transform-origin:center} .qs-klar:hover .kw::after,.qs-klar:focus-visible .kw::after{opacity:.9;transform:scaleX(1)} /* ================================================================ FOTO · linguagem do .studio-portrait: moldura + borda + SOMBRA DE COBRE. ESTÁTICA: zero anel girando, zero gradiente cônico, zero brilho em movimento. Profundidade = SÓ sombra de cobre + borda + filete estático. ================================================================ */ .qs-aside{align-self:start;display:flex;flex-direction:column;gap:16px;max-width:340px} .qs-portrait{position:relative;border-radius:16px;padding:3px; align-self:start;width:100%;max-width:340px;margin:0; background:var(--ivory); /* aro de cobre ESTÁTICO fino + sombra de cobre pra profundidade */ box-shadow:inset 0 0 0 1px rgba(184,119,35,.30), 0 26px 54px -26px rgba(143,94,20,.42), 0 10px 24px -14px rgba(20,17,11,.30); isolation:isolate} .qs-frame{position:relative;z-index:2;border-radius:14px;overflow:hidden; aspect-ratio:3/4;width:100%; border:1px solid rgba(184,119,35,.28); box-shadow:0 30px 60px -28px rgba(20,17,11,.42);background:var(--ivory)} .qs-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block} /* filete de cobre ESTÁTICO na base da foto (afordância, sem movimento) */ .qs-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3; background:linear-gradient(90deg,transparent,var(--copper-lt),transparent);opacity:.75} /* assinatura: MESMA fonte do nome (Cormorant itálica 15→19px), CENTRALIZADA sob a foto (decisão de design). "designer de UX" destacado em cobre DENTRO da frase (mesma fonte). Mobile já era centralizado. */ .qs-sign{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600; font-size:clamp(15px,1.35vw,19px);line-height:1.5;color:var(--text-soft); margin:0;text-align:center} /* 5,46:1 AA ✓ */ .qs-sign .role{color:var(--copper-deep)} /* 4,81:1 AA ✓ */ /* ================================================================ EFEITO "DEAL-IN" dos blocos de TEXTO (não das cartas). Anima SÓ transform. REGRA DE FERRO: opacity SEMPRE 1, texto nunca some. ================================================================ */ .deal{opacity:1} @media (prefers-reduced-motion:no-preference){ .deal{will-change:transform; animation:qsDealIn .72s cubic-bezier(.2,.75,.25,1) both; animation-delay:var(--d,0s)} @keyframes qsDealIn{ from{transform:translateY(46px) rotate(-3.2deg) scale(.985)} to{transform:translateY(0) rotate(0) scale(1)}} } @media (prefers-reduced-motion:reduce){ .deal{animation:none;transform:none;opacity:1} .qs-shine{animation:none;background:none;-webkit-text-fill-color:var(--copper);color:var(--copper)} .faq-item::before{animation:none;opacity:.5} } /* ================================================================ MOBILE (≤760): PILHA (mesma mecânica; nunca stack vertical). Carta da frente MENOR, 100% legível e SEM cortar. As de trás espiam ATRÁS: offset pequeno pra CIMA + rotação SUTIL (aqui o "peek" é VERTICAL, não lateral, pra caber nos 375px sem overflow). Cada carta aparece INTEIRA; a página não rola de lado (document.scrollWidth==375). TODAS do mesmo tamanho (sem scale). Tap pausa/expande/VIRA a da frente. ================================================================ */ @media (max-width:760px){ .qs{padding:clamp(40px,7vh,64px) 22px} .qs-grid{display:flex;flex-direction:column;align-items:center;gap:26px; max-width:420px;margin:0 auto} .qs-eyebrow,.qs-aside,.qs-text{width:100%} .qs-eyebrow{order:1;text-align:center;margin:0 0 4px} .qs-aside{order:2;align-self:center;align-items:center;text-align:center;gap:14px} .qs-text{order:3;text-align:center} /* deck e klar agora são irmãos diretos do grid (saíram do .qs-text para lerem centrados no desktop). No mobile flex-column a ORDEM VISUAL segue idêntica à de antes: eyebrow→foto→texto→leque→KLAR. */ .qs-deck,.qs-klar{width:100%} .qs-deck{order:4} .qs-klar{order:5} .qs-portrait{max-width:300px;margin:0 auto;align-self:center} .qs-sign{text-align:center;max-width:38ch;margin:0 auto} .qs-lead{max-width:20ch;margin:0 auto clamp(16px,2vh,22px);text-align:center} .qs-intro{max-width:42ch;text-align:center;margin:0 auto clamp(22px,3vh,32px)} /* KLAR: espaço até o KLAR IDÊNTICO ao anterior. Antes o KLAR ficava dentro de .qs-text e a distância deck→KLAR era só o seu margin-top; agora é flex-item e some o gap:26px do grid - descontamos os 26px fixos do margin-top para o espaçamento continuar clamp(34,4.5vh,52). */ .qs-klar{max-width:44ch;text-align:center; margin:calc(clamp(34px,4.5vh,52px) - 26px) auto 0} /* MOBILE = PILHA limpa (leque não cabe em 375 sem cortar). Cartas atrás espiam pra CIMA (offset VERTICAL) com rotação sutil → nada sai dos 375px. TODAS DO MESMO TAMANHO. A escolhida SOBE à frente e VIRA. Sólida. Espaço intro→deck IDÊNTICO ao anterior: antes o deck vivia em .qs-text e a distância era o margin-top do deck (dominava por colapso da margem do intro). Agora é flex-item: entram o gap:26px do grid + a margem inferior do intro (que não colapsa mais). Descontamos AMBOS (via clamps espelhados) para o resultado bater clamp(34,6vh,52) em qualquer altura de tela. */ .qs-deck{--peek-y:11px; margin-top:calc(clamp(34px,6vh,52px) - 26px - clamp(22px,3vh,32px))} .qs-deck-track{height:clamp(322px,58vh,392px);overflow:visible} .qs-card{width:min(82%,246px);transform-origin:50% 50%} .qs-card-flip{height:clamp(300px,54vh,346px)} .qs-card-face{padding:clamp(22px,6vw,28px);text-align:left} .qs-card-word{font-size:clamp(24px,6.6vw,29px)} .qs-card-word.is-back{font-size:clamp(20px,5.6vw,24px)} .qs-card-satz{max-width:30ch;font-size:14px} .qs-card-erk{font-size:13px;line-height:1.56} .qs-deck-ctrl{justify-content:center;flex-wrap:wrap} .qs-deck-hint{display:none} /* slots da pilha (mobile): frente reta; as de trás sobem um tico + rotação sutil. Zero X-shift → sem scroll lateral. Sobrescreve os slots do leque. */ .qs-card:nth-child(1){transform:translateX(-50%);z-index:6} .qs-card:nth-child(2){transform:translateX(-50%) translateY(calc(var(--peek-y)*-1)) rotate(1.5deg);z-index:5} .qs-card:nth-child(3){transform:translateX(-50%) translateY(calc(var(--peek-y)*-2)) rotate(-1.7deg);z-index:4} .qs-card:nth-child(4){transform:translateX(-50%) translateY(calc(var(--peek-y)*-3)) rotate(1.9deg);z-index:3} .qs-card:nth-child(5){transform:translateX(-50%) translateY(calc(var(--peek-y)*-4)) rotate(-1.2deg);z-index:2} .qs-card:nth-child(6){transform:translateX(-50%) translateY(calc(var(--peek-y)*-5)) rotate(.9deg);z-index:1} /* a escolhida sobe à frente (z acima de tudo) e cresce um tico; vira via .is-flipped */ html.js .qs-card.is-active{ transform:translateX(-50%) translateY(-8px) scale(1.05);z-index:60} } /* ================================================================ FAQ · acordeão sóbrio com
/ nativo (acessível, texto sempre visível). Filete de cobre + chevron de cobre girando. Tipografia do site. ================================================================ */ /* feixe especular do FILETE do FAQ (filete horizontal do site, não é anel girando): keyframe usado só pelos filetes do FAQ abaixo. */ @keyframes qsShineLine{0%{background-position:115% 0}34%{background-position:-15% 0}100%{background-position:-15% 0}} .faq{background:var(--ivory);color:var(--text);overflow-x:clip; padding:clamp(48px,8vh,96px) clamp(24px,6vw,64px) clamp(64px,10vh,120px)} .faq-wrap{max-width:760px;margin:0 auto} .faq-head{text-align:center;margin:0 0 clamp(32px,5vh,56px)} .faq-eyebrow{font-family:'Manrope',system-ui,sans-serif;font-size:11px;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--copper-deep); margin:0 0 clamp(14px,2vh,20px)} .faq-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600; font-size:var(--title-size);line-height:1.14;letter-spacing:.005em; color:var(--ink);margin:0 auto;max-width:22ch} .faq-list{margin:0;padding:0} /* cada item: SEM número, SEM caixa pesada. O separador é um FILETE DE COBRE com o feixe passando (mesma sintonia dos outros filetes do site). Sóbrio. */ .faq-item{position:relative; /* o filete de cobre vive como camada própria pra receber o feixe animado */ border-top:1px solid rgba(184,119,35,.20)} .faq-item:last-child{border-bottom:1px solid rgba(184,119,35,.20)} /* feixe especular percorrendo o filete superior de cada item (loop calmo) */ .faq-item::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px; pointer-events:none;z-index:1; background:linear-gradient(90deg,transparent 0%,transparent 38%, rgba(216,155,78,.85) 50%,transparent 62%,transparent 100%); background-size:260% 100%;background-position:120% 0; opacity:.7;animation:qsShineLine 6.4s linear infinite} /* dessincroniza o feixe entre filetes vizinhos pra não pulsar em bloco */ .faq-item:nth-child(2)::before{animation-delay:-1.1s} .faq-item:nth-child(3)::before{animation-delay:-2.2s} .faq-item:nth-child(4)::before{animation-delay:-3.3s} .faq-item:nth-child(5)::before{animation-delay:-4.4s} .faq-item:nth-child(6)::before{animation-delay:-.6s} .faq-item:nth-child(7)::before{animation-delay:-1.7s} .faq-item:nth-child(8)::before{animation-delay:-2.8s} .faq-item:nth-child(9)::before{animation-delay:-3.9s} .faq-item:nth-child(10)::before{animation-delay:-5s} .faq-item summary{list-style:none;cursor:pointer; display:flex;align-items:flex-start;gap:18px; padding:clamp(18px,2.6vh,26px) 2px; font-family:'Cormorant Garamond',serif;font-weight:600; font-size:clamp(19px,1.7vw,24px);line-height:1.32;letter-spacing:.005em; color:var(--ink);position:relative; transition:color .35s ease} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:focus-visible{outline:2px solid var(--copper-lt);outline-offset:4px;border-radius:4px} .faq-q{flex:1 1 auto;position:relative} /* sublinha de cobre da pergunta que "acende" ao abrir/hover (micro-interação) */ .faq-q::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%; background:linear-gradient(90deg,var(--copper),var(--copper-lt)); transform:scaleX(0);transform-origin:left;opacity:0; transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .35s ease} /* chevron de cobre que gira ao abrir + acende */ .faq-chev{flex:none;width:22px;height:22px;margin-top:clamp(2px,.6vh,5px); color:var(--copper); transition:transform .4s cubic-bezier(.2,.7,.2,1),color .35s ease,filter .35s ease} .faq-chev svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* estado ABERTO (nativo, vale pra tap + teclado + o hover que o JS abre): chevron gira e acende, título puxa cobre, sublinha aparece. */ .faq-item[open] summary{color:var(--copper-deep)} .faq-item[open] .faq-chev{transform:rotate(180deg);color:var(--copper-deep); filter:drop-shadow(0 0 4px rgba(184,119,35,.35))} .faq-item[open] .faq-q::after{transform:scaleX(1);opacity:.9} /* resposta: Manrope, corpo do site; recuo alinhado ao texto da pergunta */ .faq-a-inner{font-family:'Manrope',system-ui,sans-serif; font-size:15px;line-height:1.72;color:var(--text-soft); /* 5,01:1 AA ✓ */ margin:0;padding:2px 40px clamp(20px,2.8vh,28px) 0;max-width:62ch} .faq-a-inner .kw{position:relative;color:var(--copper-deep);font-weight:600} .faq-a-inner a{color:inherit;text-decoration:none} .faq-a-inner a .kw::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px; background:var(--copper);opacity:.5;transition:opacity .3s ease,transform .3s ease; transform:scaleX(.85);transform-origin:center} .faq-a-inner a:hover .kw::after,.faq-a-inner a:focus-visible .kw::after{opacity:.95;transform:scaleX(1)} .faq-a-inner a:focus-visible{outline:2px solid var(--copper-lt);outline-offset:3px;border-radius:3px} /* ---- REVELAÇÃO ELEGANTE da resposta ---- Sem .js OU reduced-motion:
nativo (aparece/some no toque, sem animação de altura): texto sempre acessível. Com .js + movimento permitido: um wrapper com grid-template-rows anima a ALTURA suavemente e o texto faz um leve fade/slide. Contido, sem bounce. */ .faq-a{overflow:hidden} @media (prefers-reduced-motion:no-preference){ html.js .faq-a{display:grid;grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.2,.7,.2,1)} html.js .faq-a > .faq-a-inner{min-height:0; opacity:0;transform:translateY(-6px); transition:opacity .38s ease .04s,transform .42s cubic-bezier(.2,.7,.2,1) .04s} html.js .faq-item[open] .faq-a{grid-template-rows:1fr} html.js .faq-item[open] .faq-a > .faq-a-inner{opacity:1;transform:none} } @media (max-width:760px){ .faq{padding:clamp(40px,7vh,64px) 22px clamp(56px,9vh,88px)} .faq-item summary{gap:14px;padding:18px 0} .faq-a-inner{padding:2px 30px 20px 0} } /* Impressão (Impressum/Datenschutz são salvos/impressos na Alemanha): tira chrome, fundo branco, texto preto, sem gradientes escuros gastando tinta (digital != print). */ @media print{ .loader,.site-header,.menu-overlay,.secdex,.skip,.langsel,.mo-langtop,.nav-cta,.legal-top .back,.filmvid{display:none!important} html,body{background:#fff!important;color:#000!important} main a,.legal-wrap a{color:#000!important;text-decoration:underline} .legal-wrap{max-width:100%!important;margin:0!important;padding:0!important} *{box-shadow:none!important;text-shadow:none!important;background-image:none!important} }