/* FineStudio Zug — dark sans hero, editorial serif body. No images.
   Fontes servidas por nós, não pelo fonts.googleapis.com: mantém a CSP
   fechada em default-src 'none' e nenhum visitante contacta terceiros.
   Subset latin, igual ao que o Google Fonts serve. Licença em fonts/OFL.txt. */

@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-var.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/ibm-plex-mono-latin-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-latin-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Página escura de ponta a ponta, à maneira do morez.co: o "papel" deixou
     de ser fundo e passou a ser cor de texto. Os antigos números de contraste
     nos comentários deixaram de valer — foram todos remedidos. */
  --ink:#0a0a0a;             /* fundo da página */
  --card:#141414;            /* cartões, um degrau acima do fundo */
  --paper:#f4f3f0;           /* texto principal */
  --paper-alt:#141414;
  --accent:#27fcf2;          /* electric cyan — dark backgrounds only */
  --accent-ink:#27fcf2;      /* alias do acento: sem fundos claros, é o mesmo */
  --grey:#8f8f89;            /* texto secundário sobre --ink */
  --grey-ink:#8b8b85;        /* mantido como alias: com a página escura já não
                                há fundos claros, e os dois cinzentos coincidem. */
  --line:rgba(244,243,240,.14);
  --line-dark:rgba(244,243,240,.22);
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --radius:clamp(12px,1.4vw,20px);
  --gut:clamp(20px,5vw,64px);
  /* accordion tones */
  --t1:#a9c9c3;
  --t2:#c5b8dd;
  --t3:#e6c47e;
  /* --t4:#d8a3aa era o tom do Social Media. Deixado aqui, só sem nenhuma
     regra a usá-lo, porque a remoção do serviço é "por agora" — se voltar,
     o tom volta com ele em vez de se inventar um novo. */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.55;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.05}

/* O morez.co não usa serifa: títulos em Inter 600 com espaçamento negativo,
   que é o que lá mede 82px/-1px. A Instrument Serif fica no ficheiro mas
   deixou de ser usada — basta trocar esta regra para a recuperar. */
.h2,.cta-h,.lead,.acc-label{
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:-.025em;
}
.h2 em,.cta-h em{font-style:normal;color:var(--accent)}
p{margin:0}
a{color:inherit}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gut)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---------- wordmark ---------- */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:18px var(--gut);
  mix-blend-mode:difference;color:#fff;
  pointer-events:none;
}
.wordmark{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.14em;text-decoration:none;pointer-events:auto}
.wordmark span{font-weight:400;opacity:.7}

/* ---------- iridescent glow (pure CSS, no images) ---------- */
.hero,.cta{position:relative;overflow:hidden;isolation:isolate}
/* Separate radial blobs rather than one conic sweep — a conic gradient
   averages its hues into a muddy olive where they meet. */
/* O halo do hero vive dentro de um cartão de cantos arredondados, não
   espalhado pelo ecrã: contido, lê-se como objecto desenhado; espalhado, lê-se
   como atmosfera. São dois elementos porque o desfoque tem de ser recortado
   pelos cantos — desfocar o próprio cartão esfumaria as arestas. */
.hero-glow{
  position:absolute;z-index:0;pointer-events:none;
  /* O topo tem de limpar o wordmark, que é fixo a 18px do bordo. Com a
     goteira de 20px do telemóvel o cartão passava-lhe por baixo. */
  inset:max(var(--gut),48px) var(--gut) var(--gut);
  border-radius:clamp(14px,1.8vw,26px);
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.hero-glow::before{
  content:"";position:absolute;inset:-30%;
  background:
    radial-gradient(34% 34% at 18% 26%,rgba(39,252,242,.60),transparent 70%),
    radial-gradient(36% 36% at 74% 30%,rgba(123,92,255,.54),transparent 70%),
    radial-gradient(32% 32% at 52% 78%,rgba(255,77,141,.42),transparent 70%);
  filter:blur(70px);
}

.cta::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-15%;
  background:
    radial-gradient(34% 34% at 18% 26%,rgba(39,252,242,.50),transparent 70%),
    radial-gradient(36% 36% at 74% 30%,rgba(123,92,255,.44),transparent 70%),
    radial-gradient(32% 32% at 52% 78%,rgba(255,77,141,.34),transparent 70%);
  filter:blur(80px);opacity:.4;
}
.hero>*,.cta>*{position:relative;z-index:1}
/* Tem de vir DEPOIS da regra acima, que tem a mesma especificidade: senão o
   cartão vira item de flex e empurra o conteúdo. Já aconteceu uma vez. */
.hero-glow{position:absolute;z-index:0}

/* ---------- hero ---------- */
.hero{
  min-height:100vh;          /* alternativa: sem svh a declaração seguinte é
                                ignorada e o hero perdia a altura de ecrã */
  min-height:100svh;
  background:var(--ink);color:var(--paper);
  --card-in:clamp(16px,2.6vw,48px);   /* recuo do conteúdo para dentro do cartão */
  padding:clamp(96px,14vh,160px) calc(var(--gut) + var(--card-in)) clamp(120px,18vh,180px);
  display:flex;flex-direction:column;justify-content:center;
}
.hero-meta{position:absolute;top:clamp(78px,11vh,104px);right:calc(var(--gut) + var(--card-in));text-align:right}
.coords{font-family:var(--mono);font-size:11px;letter-spacing:.12em;line-height:1.5;color:var(--grey);font-variant-numeric:tabular-nums}

.hero-grid{display:grid;gap:clamp(28px,5vw,64px)}
@media(min-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1.45fr) minmax(260px,.9fr);align-items:end}
}

.hero-type{
  font-size:clamp(3rem,11.5vw,10rem);
  font-weight:700;letter-spacing:-.045em;line-height:.9;
  text-transform:uppercase;
}
.hero-type .line{display:block}
.hero-type .outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--paper);
  text-stroke:1.5px var(--paper);
}
@supports not ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){
  .hero-type .outline{color:var(--grey)}
}
/* "DIE —— wirken" : sans outline, rule, serif italic */
.hero-type .line-2{display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex-wrap:wrap}
.hero-type .rule{
  flex:1 1 40px;min-width:40px;max-width:190px;
  height:2px;background:var(--paper);opacity:.55;
}
.hero-type .ital{
  font-family:var(--sans);font-weight:400;
  text-transform:lowercase;letter-spacing:-.03em;
  font-size:.92em;line-height:1;color:var(--accent);
}

/* A duas colunas o título recebe só 1.45 de 2.35 da largura, mas a escala em
   vw continuava a medir-se pelo ecrã inteiro. Resultado: ou a palavra em
   itálico caía para uma terceira linha, ou a régua era esmagada até ao mínimo
   e ficava um tracinho. Escala própria para esse contexto — e TEM de vir
   depois da regra base, senão perde por ordem de cascata. */
@media(min-width:940px){
  .hero-type{font-size:clamp(3rem,8.6vw,8.5rem)}
}

.hero-side{display:flex;flex-direction:column;gap:clamp(20px,3vh,30px);align-items:flex-start}
.hero-sub{max-width:40ch;color:var(--grey);font-size:clamp(.95rem,1.4vw,1.08rem)}

/* ---------- pill button ---------- */
.pill-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:9px 9px 9px 22px;border-radius:999px;
  border:1px solid var(--line-dark);
  text-decoration:none;color:var(--paper);
  font-size:.9rem;letter-spacing:-.01em;
  transition:border-color .2s ease,background-color .2s ease;
}
.pill-btn:hover{border-color:var(--accent);background:rgba(39,252,242,.07)}
.pill-dot{
  width:22px;height:22px;border-radius:50%;background:var(--accent);
  flex:0 0 auto;
}
.pill-lg{font-size:clamp(1rem,2.2vw,1.45rem);padding:12px 12px 12px 28px;gap:20px}
.pill-lg .pill-dot{width:30px;height:30px}

/* ---------- rotating badge ---------- */
.badge{
  position:absolute;z-index:1;
  right:calc(var(--gut) + var(--card-in));bottom:clamp(96px,15vh,140px);
  width:clamp(84px,9vw,112px);
  height:clamp(84px,9vw,112px);   /* alternativa ao aspect-ratio, senão o
                                     badge fica sem altura e desaparece */
  aspect-ratio:1;
}
.badge-spin{width:100%;height:100%;animation:spin 18s linear infinite;transform-origin:50% 50%}
.badge-text{fill:var(--paper);font-family:var(--sans);font-size:9.5px;letter-spacing:.18em;font-weight:500}
.badge-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:940px){
  .badge{width:76px;height:76px;bottom:auto;top:clamp(72px,10vh,100px);right:auto;left:calc(var(--gut) + var(--card-in))}
  .hero-meta{top:clamp(76px,10vh,104px)}
}

/* ---------- services ticker (own band) ---------- */
.ticker{
  background:var(--card);color:var(--grey);border-radius:var(--radius);
  margin:0 var(--gut);
  padding:16px 0;overflow:hidden;white-space:nowrap;
}
.ticker-track{display:inline-block;animation:slide 34s linear infinite;will-change:transform}
.ticker-track span{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:0 22px}
.ticker-track span.dot{color:var(--accent);padding:0}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- bands ---------- */
.band{padding:clamp(72px,12vh,140px) 0;border-bottom:1px solid var(--line)}
.band-alt{background:var(--card)}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-ink);margin-bottom:clamp(20px,3vh,32px)}
.eyebrow.light{color:rgba(247,246,243,.55)}
.h2{
  font-size:clamp(2rem,4.8vw,3.6rem);
  line-height:1.3;max-width:20ch;
  margin-bottom:clamp(40px,6vh,72px);
}

/* ---------- services: grelha e tira-índice ----------
   A zona branca era só texto e ar. A grelha de filetes dá-lhe estrutura
   visível —
   é o raster suíço que o resto do site segue, tornado explícito. Puramente
   decorativa: é um pseudo-elemento, invisível para leitores de ecrã. */
.services-top{position:relative;isolation:isolate}
.services-top::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(244,243,240,.07) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}

/* Marcas de corte nos cantos do bloco, como numa folha de impressão. É o que
   o emoldura — sem elas a zona branca não tinha limite nenhum e lia-se como
   espaço por preencher em vez de composição. */
.services-top::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:clamp(18px,3vh,34px) calc(var(--gut) - 14px);
  --crop:rgba(244,243,240,.42);   /* .30 dava 2.45:1 sobre o fundo escuro */
  --h:linear-gradient(var(--crop),var(--crop));
  background:
    var(--h) 0 0/13px 1px no-repeat,      var(--h) 0 0/1px 13px no-repeat,
    var(--h) 100% 0/13px 1px no-repeat,   var(--h) 100% 0/1px 13px no-repeat,
    var(--h) 0 100%/13px 1px no-repeat,   var(--h) 0 100%/1px 13px no-repeat,
    var(--h) 100% 100%/13px 1px no-repeat,var(--h) 100% 100%/1px 13px no-repeat;
}

/* ---------- services heading ----------
   O título sozinho deixava 56% da largura vazia à direita. A coluna de apoio
   enche-a com texto que se justifica, e a deixa diz que as barras abrem —
   até aqui o único indício era o sinal "+". */
.services-head{display:grid;gap:clamp(26px,4vw,64px);margin-bottom:clamp(40px,6vh,72px)}
@media(min-width:900px){
  .services-head{grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);align-items:center}
}
.services-head .h2{margin-bottom:0}
.services-intro{color:var(--grey);max-width:42ch}
.open-hint{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:clamp(16px,2.2vw,22px);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-ink);
}
.open-hint::before{
  content:"";width:13px;height:13px;flex:0 0 auto;position:relative;
  background:
    linear-gradient(var(--grey-ink),var(--grey-ink)) center/13px 1.5px no-repeat,
    linear-gradient(var(--grey-ink),var(--grey-ink)) center/1.5px 13px no-repeat;
}
/* Num telemóvel não se clica, toca-se. (hover:none) apanha exactamente os
   dispositivos onde "clicar" está errado. */
.hint-tap{display:none}
@media(hover:none){
  .hint-click{display:none}
  .hint-tap{display:inline}
}

/* ---------- roda dos serviços ----------
   Quatro arcos, um por serviço, nas mesmas cores das barras de baixo — é essa
   correspondência que a torna legível como índice e não como enfeite.

   Roda devagar, arcos e nomes no mesmo grupo — é isso que mantém cada nome
   colado à sua cor. O custo é os nomes ficarem de cabeça para baixo em parte
   da volta; por isso a volta é lenta (90s) e PARA assim que se abre um
   serviço ou se passa o rato por cima, que é quando alguém os quer mesmo ler.

   O grupo está rodado -130.35deg para cada arco ficar centrado num ponto
   cardeal: 1 em cima, 2 à direita, 3 em baixo, 4 à esquerda — que é onde as
   legendas assentam. (Um arco começa às 3 horas e abrange 80.7deg, logo o
   centro do primeiro está a 40.35deg: -90 - 40.35 = -130.35.)

   aria-hidden no SVG — quem usa leitor de ecrã tem os títulos do acordeão. */
.services-wheel{justify-self:center;width:min(80vw,360px)}
@media(min-width:900px){ .services-wheel{justify-self:end;width:min(30vw,360px)} }
.wheel{width:100%;height:auto;display:block;overflow:visible}
.wheel-arcs{transform:rotate(-145.35deg);transform-origin:140px 140px}
.wheel-spin{transform-origin:140px 140px;animation:spin 90s linear infinite}
/* Para quando alguém quer ler: ao abrir um serviço ou ao passar o rato. */
.services-wheel[data-active] .wheel-spin,
.services-wheel:hover .wheel-spin{animation-play-state:paused}
.arc{
  fill:none;stroke-width:15;stroke-linecap:butt;
  transition:opacity .45s ease,stroke-width .45s ease;
}
.arc[data-arc="1"]{stroke:var(--t1)}
.arc[data-arc="2"]{stroke:var(--t2)}
.arc[data-arc="3"]{stroke:var(--t3)}
.wheel-ring{fill:none;stroke:rgba(244,243,240,.24);stroke-width:1}
.wheel-dot{fill:var(--accent)}
.wheel-label{
  fill:var(--ink);font-family:var(--sans);   /* fica escuro: assenta DENTRO da faixa pastel */
  font-size:8.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  dominant-baseline:central;
  text-anchor:middle;          /* tem de estar no <text>, não no <textPath> */
  transition:opacity .45s ease;
}

/* um serviço aberto: o arco e o nome correspondentes ficam, os outros recuam */
.services-wheel[data-active] .arc,
.services-wheel[data-active] .wheel-label{opacity:.22}
.services-wheel[data-active="1"] .arc[data-arc="1"],
.services-wheel[data-active="2"] .arc[data-arc="2"],
.services-wheel[data-active="3"] .arc[data-arc="3"]{opacity:1;stroke-width:22}
.services-wheel[data-active="1"] .wheel-label[data-label="1"],
.services-wheel[data-active="2"] .wheel-label[data-label="2"],
.services-wheel[data-active="3"] .wheel-label[data-label="3"]{opacity:1}

/* ---------- services accordion ---------- */
.acc{display:grid;gap:10px}
.acc-item{border-radius:var(--radius);overflow:hidden}
.acc-item[data-tone="1"]{background:var(--t1)}
.acc-item[data-tone="2"]{background:var(--t2)}
.acc-item[data-tone="3"]{background:var(--t3)}

.acc-h{margin:0;font-weight:400}
.acc-head{
  width:100%;background:none;border:0;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(18px,2.6vw,26px) var(--gut);
  text-align:left;font:inherit;
}
.acc-label{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(1.35rem,3.2vw,2.4rem);line-height:1.15;letter-spacing:normal;
}
.acc-sign{position:relative;width:22px;height:22px;flex:0 0 auto}
.acc-sign::before,.acc-sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink);
  transition:transform .25s ease;
}
.acc-sign::before{width:22px;height:1.5px;transform:translate(-50%,-50%)}
.acc-sign::after{width:1.5px;height:22px;transform:translate(-50%,-50%)}
.acc-head[aria-expanded="true"] .acc-sign::after{transform:translate(-50%,-50%) scaleY(0)}

.acc-panel{padding:0 var(--gut) clamp(24px,3vw,34px)}
/* Fechados só quando há JavaScript para os reabrir. Sem JS os quatro painéis
   ficam abertos — o texto dos serviços é um terço da página e não pode
   depender de um clique que ninguém consegue dar. A classe .js vem de um
   script em linha no <head>, por isso não há um piscar de conteúdo. */
.js .acc-panel{display:none}
.js .acc-panel.is-open{display:block}
.acc-inner{
  display:grid;gap:18px;max-width:70ch;
  animation:reveal .3s ease both;
}
.acc-panel p{color:rgba(10,10,10,.8);font-size:clamp(.95rem,1.5vw,1.08rem)}
@keyframes reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{
  border:1px solid rgba(10,10,10,.58);border-radius:999px;  /* .45 dava 2.7:1 */
  padding:5px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(10,10,10,.8);  /* herdava --paper (creme) do body: 1.6:1 sobre o
                                pastel, encontrado ao reutilizar esta regra na
                                página /leistungen/ */
}

/* As barras coloridas terminam a secção — sem padding por baixo, encostam
   directamente à faixa seguinte e a transição fica limpa. */
#leistungen{padding-bottom:0;border-bottom:0}

/* ---------- steps ----------
   A vertical spine with the numerals sitting on it, rather than a row of
   boxes. Numerals are outlined like the word in the hero, and the step
   crossing the middle of the viewport inks itself in as you scroll. */
.steps-layout{display:grid;gap:clamp(32px,5vw,72px)}
@media(min-width:900px){
  .steps-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);align-items:start}
  .steps-head{position:sticky;top:clamp(88px,13vh,132px)}
}
.steps-head .h2{margin-bottom:0}
.step{border-radius:var(--radius)}

.steps{
  --numcol:clamp(58px,6.4vw,96px);
  list-style:none;margin:0;padding:0;position:relative;
}
/* the spine */
.steps::before{
  content:"";position:absolute;z-index:0;
  left:calc(var(--numcol) / 2);top:.4em;bottom:0;
  width:1px;background:var(--line);
}

.step{
  position:relative;z-index:1;
  display:grid;grid-template-columns:var(--numcol) minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px);align-items:start;
  padding:clamp(20px,2.6vw,32px) 0;
}
.step:first-child{padding-top:0}

.step .num{
  display:block;text-align:center;
  background:var(--card);            /* breaks the spine behind each numeral */
  padding:6px 0;
  font-family:var(--mono);font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:.9;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1.2px rgba(244,243,240,.42);
  text-stroke:1.2px rgba(244,243,240,.42);
  transition:-webkit-text-stroke-color .45s ease,color .45s ease;
}
@supports not ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){
  .step .num{color:rgba(244,243,240,.3)}
}
.step.active .num,.step:hover .num{
  -webkit-text-stroke-color:var(--accent-ink);
  color:rgba(0,112,106,.10);
}

.step-body{padding-top:clamp(4px,.8vw,12px)}
.step-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid var(--line);
  transition:border-color .45s ease;
}
.step.active .step-top{border-bottom-color:rgba(0,112,106,.45)}
.step h3{
  font-family:var(--sans);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.2;
}
.step-meta{
  flex:0 0 auto;font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-ink);white-space:nowrap;
  transition:color .45s ease;
}
.step.active .step-meta{color:var(--accent-ink)}
.step p{color:var(--grey);max-width:56ch}

/* ---------- stance ----------
   A declaração estava composta a 43px enquanto os títulos das secções 01 e 02
   iam a 69px: a frase mais importante da página era a mais pequena. Agora
   ultrapassa-os, e os factos deixaram de flutuar à direita para formarem uma
   base de três colunas à largura toda — o que também resolve o buraco no ritmo
   vertical, porque esta secção tinha menos de metade da altura das vizinhas. */
.stance{display:grid;gap:clamp(44px,7vh,88px)}
.lead{
  font-size:clamp(1.9rem,5.2vw,4rem);
  line-height:1.2;max-width:17ch;margin:0;
}
.stance-p{
  color:var(--grey);max-width:46ch;
  margin-top:clamp(20px,2.6vw,28px);
  font-size:clamp(1rem,1.5vw,1.15rem);
}

.facts{margin:0;display:grid;gap:10px;background:none}
.facts>div{
  background:var(--card);border-radius:var(--radius);
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(22px,2.8vw,32px) 0;
}
/* O avanço lateral e o "primeiro sem avanço" só fazem sentido lado a lado.
   Empilhados, deixavam a primeira entrada desalinhada das outras duas. */
@media(min-width:720px){
  .facts{grid-template-columns:repeat(3,1fr)}
  .facts>div{padding-left:clamp(16px,1.6vw,26px);padding-right:clamp(16px,1.6vw,26px)}
  .facts>div:first-child{padding-left:0}
}
.facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-ink)}
.facts dd{
  margin:0;font-family:var(--sans);font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.15;
  font-variant-numeric:tabular-nums;
}

/* ---------- cta ---------- */
.cta{background:var(--ink);color:var(--paper);padding:clamp(84px,14vh,160px) 0}
.cta-h{font-size:clamp(2.6rem,7.5vw,6rem);line-height:1.12;margin-bottom:24px}
.cta-sub{color:var(--grey);max-width:44ch;margin-bottom:clamp(34px,5vh,52px)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--grey);padding:0 0 clamp(96px,14vh,120px)}
.foot-grid{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;border-top:1px solid var(--line-dark);padding-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.coords-sm{font-variant-numeric:tabular-nums}

/* ---------- páginas legais ----------
   Prosa corrida, não a grelha da homepage. Medida curta de propósito: texto
   jurídico só se lê se as linhas forem curtas. */
.legal{padding-top:clamp(104px,16vh,168px)}
.legal .wrap{max-width:760px}
.legal h1{margin-bottom:clamp(28px,4vh,40px)}
.legal h2{
  font-family:var(--sans);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.3;
  margin:clamp(34px,5vh,52px) 0 12px;
}
.legal p{max-width:68ch;margin-bottom:14px;color:var(--grey)}
.legal a{color:var(--accent-ink);text-underline-offset:3px}
.legal-note{
  border-left:2px solid var(--accent);
  padding:12px 0 12px 18px;margin-bottom:clamp(20px,3vh,28px);
  color:var(--paper);
}
.legal-hint{font-size:.9rem;color:var(--grey-ink)}
/* ---------- 404 ----------
   Cloudflare Pages serves this file automatically for any unmatched path —
   no _redirects rule needed. Reuses .tier-features (the dash-prefixed list
   from /betreuung/) for the "here's where to go instead" links, since it's
   already the site's pattern for a short scannable list. */
.error-links{margin-top:clamp(20px,3vh,28px)}
.legal-back{margin-top:clamp(44px,7vh,72px)}
.legal-back-secondary{margin-top:20px}
/* .legal a (0,1,1) beats .pill-btn's own color:var(--paper) (0,1,0) on
   specificity alone, cyan-ing out the CTA text on /leistungen/. Restored
   at (0,2,0). */
.legal .pill-btn{color:var(--paper)}

/* ---------- página de serviços (/leistungen/) ----------
   Reaproveita as quatro cores do acordeão da homepage, mas como cartões
   estáticos — aqui não há nada para abrir/fechar, só a legenda a explicar
   melhor cada serviço. As mesmas cores em ambas as páginas é o que faz o
   visitante ligar uma à outra. */
.service-cards{display:grid;gap:14px;margin-top:clamp(28px,4vh,44px)}
.service-card{border-radius:var(--radius);overflow:hidden;padding:clamp(24px,4vw,40px)}
.service-card[data-tone="1"]{background:var(--t1)}
.service-card[data-tone="2"]{background:var(--t2)}
.service-card[data-tone="3"]{background:var(--t3)}
.service-card[data-tone="4"]{background:var(--t4)}
.legal .service-card h2{
  font-family:var(--sans);font-weight:600;letter-spacing:-.02em;color:var(--ink);
  font-size:clamp(1.3rem,2.6vw,1.8rem);margin:0 0 14px;
}
.legal .service-card p{max-width:60ch;color:rgba(10,10,10,.8);margin-bottom:14px}
.legal .service-card p:last-of-type{margin-bottom:18px}

/* link discreto da homepage para a página de detalhe */
.section-more{margin-top:18px}
.section-more a{
  font-family:var(--sans);font-weight:600;font-size:.95rem;
  color:var(--accent-ink);text-underline-offset:3px;
}

/* ---------- página de processo (/ablauf/) ----------
   Reaproveita o .steps da homepage (numeral, espinha, estado activo ao
   scroll) fora do layout de duas colunas — aqui é uma coluna estreita,
   como as outras subpáginas. Os títulos de passo são <h2> reais, porque
   a página não tem uma secção h2 própria por cima como a homepage tem;
   .legal h2 (0,1,1) precisa de ser batido de propósito, não só ignorado. */
.steps-page{margin-top:clamp(28px,4vh,44px)}
.legal .steps-page h2{
  font-family:var(--sans);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.2;margin:0;
}

/* ---------- pacotes e betreuung (/betreuung/) ----------
   Três cartões apertados numa coluna de 760px pareciam uma tabela SaaS
   genérica — nada no resto do site faz isso. Os grupos de cartões saem da
   coluna estreita de leitura (.wrap dentro de .legal) para a largura cheia
   da grelha, como as secções da homepage; só a prosa (intro, dicas, CTA)
   fica na coluna estreita. Cartões neutros em --card, não as cores do
   acordeão — estes níveis não são um dos quatro serviços, são uma forma de
   contratar todos eles, por isso usar t1–t4 aqui implicaria uma ligação que
   não existe. */
.tier-band{
  max-width:1280px;margin:clamp(32px,5vh,48px) auto clamp(32px,5vh,44px);
  padding:0 var(--gut);
}
.tier-band + .tier-band{margin-top:clamp(56px,8vh,88px)}
.tier-heading{
  font-family:var(--sans);font-weight:600;letter-spacing:-.02em;color:var(--paper);
  font-size:clamp(1.4rem,3vw,2rem);margin:0 0 10px;
}
.legal .tier-section-intro{color:var(--grey);max-width:56ch;margin:0 0 clamp(20px,3vh,28px)}

.tier-cards{display:grid;gap:18px;margin-top:clamp(8px,1.5vh,16px)}
@media(min-width:760px){.tier-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* fundo da secção de betreuung — o resto da página é --ink de ponta a
   ponta, e ficava plano demais sem nenhuma variação, ao contrário da
   homepage que alterna --ink/--card entre secções. Aqui reaproveita-se a
   mesma alternância só para o grupo da betreuung recorrente, que é o que
   este pedido queria destacar. */
.betreuung-alt{background:var(--card);padding:clamp(44px,6.5vh,68px) 0}
.betreuung-alt .tier-band{margin-top:0}
/* dentro da secção mais clara, os cartões invertem para --ink: continuam a
   destacar-se do fundo, só que na direção oposta à secção de cima. */
.betreuung-alt .tier-card{background:var(--ink);border-color:var(--line-dark)}
.betreuung-alt .tier-card.is-recommended{border-color:var(--accent)}

.tier-card{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(26px,3vw,34px);
  display:flex;flex-direction:column;gap:16px;
  transition:border-color .25s ease,transform .25s ease;
}
.tier-card:hover{border-color:var(--line-dark);transform:translateY(-3px)}

/* nome do nível em serifa itálica — o mesmo destaque que "wirken" no hero e
   os em dos títulos de secção, para dar aos cartões o mesmo carácter
   editorial do resto do site em vez de parecerem uma grelha de preços. */
.tier-card h3{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.1rem);color:var(--paper);line-height:1;
}
.legal .tier-tagline{color:var(--grey);font-size:.92rem;margin:-8px 0 0;max-width:none}

.tier-features{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tier-features li{font-size:.92rem;padding-left:20px;position:relative}
.tier-features li::before{content:"—";position:absolute;left:0;color:var(--accent-ink)}

/* cartão em destaque — reaproveita o glow do hero/cta em versão discreta,
   atrás de UM cartão em vez da secção toda, e sobe um pouco em relação aos
   vizinhos: o mesmo dispositivo que uma tabela de preços comum usa para o
   plano recomendado, só que com o vocabulário visual deste site.

   O brilho precisa de overflow:hidden para não sair do cartão arredondado
   — mas o selo "Empfohlen" tem de espetar-se PARA FORA do bordo de cima
   (metade dentro, metade fora). As duas coisas não podem estar no mesmo
   elemento: um overflow:hidden que contém o brilho corta também o selo.
   Por isso o brilho vive num .tier-glow próprio, com o seu overflow:hidden
   isolado — o cartão em si já não tem overflow:hidden nenhum, e o selo,
   filho direto do cartão, fica livre para ultrapassar o bordo. */
.tier-card.is-recommended{border-color:var(--accent)}
.tier-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;border-radius:inherit;
}
.tier-glow::after{
  content:"";position:absolute;inset:-40%;
  background:radial-gradient(45% 45% at 30% 20%,rgba(39,252,242,.22),transparent 70%);
  filter:blur(40px);
}
/* Só os elementos de conteúdo precisam de subir acima do brilho — não o
   selo (já tem o seu próprio z-index) nem o .tier-glow (já é z-index:0 de
   propósito). Listar os seletores em vez de :not() no filho universal: a
   mesma armadilha já aconteceu duas vezes com esse atalho. */
.tier-card.is-recommended h3,
.tier-card.is-recommended .tier-tagline,
.tier-card.is-recommended .tier-features{position:relative;z-index:1}
@media(min-width:760px){
  .tier-card.is-recommended{transform:translateY(-10px)}
  .tier-card.is-recommended:hover{transform:translateY(-13px)}
}
.tier-flag{
  position:absolute;z-index:2;top:0;left:50%;transform:translate(-50%,-50%);
  white-space:nowrap;
  background:var(--ink);border:1px solid var(--accent);color:var(--accent-ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
}

/* As lacunas têm de saltar à vista: não se publica uma página legal com
   parênteses rectos lá dentro por distracção. */
.todo{
  background:rgba(255,77,141,.16);
  box-shadow:0 0 0 2px rgba(255,77,141,.16);
  border-radius:2px;
}

/* rodapé claro, para as páginas legais */
.foot-light{background:var(--ink);color:var(--grey)}
.foot-light .foot-grid,.foot-light .foot-legal{border-top-color:var(--line)}

.foot-legal{
  display:flex;gap:26px;padding-top:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
.foot-legal a{text-decoration:none;opacity:.8}
.foot-legal a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* ---------- floating dock nav ---------- */
.dock{
  position:fixed;z-index:60;left:50%;bottom:clamp(16px,3vh,28px);
  transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  max-width:calc(100vw - 24px);
}
.dock-up{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  background:rgba(11,11,11,.82);color:var(--paper);
  border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:15px;
}
.dock-up:hover{border-color:var(--accent)}
.dock-pill{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);
  padding:11px clamp(18px,2.4vw,26px);border-radius:999px;
  background:rgba(11,11,11,.82);color:var(--paper);
  border:1px solid rgba(39,252,242,.34);
  box-shadow:0 0 26px rgba(39,252,242,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  overflow-x:auto;scrollbar-width:none;
}
.dock-pill::-webkit-scrollbar{display:none}
.dock-pill a{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;opacity:.78;white-space:nowrap;
}
.dock-pill a:hover{opacity:1;color:var(--accent)}
.dock-sep{width:1px;height:15px;background:var(--line-dark);flex:0 0 auto}
.lang{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;flex:0 0 auto}
.lang button{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;letter-spacing:.1em;opacity:.65}
/* .45 dava 4.22:1 sobre a pílula — apanhado pelo Lighthouse. .65 dá 7.88:1
   sobre fundo escuro e 5.79:1 quando a dock flutua sobre uma secção clara. */
.lang button[aria-pressed="true"]{opacity:1;color:var(--accent)}

/* Narrow screens: the pill overflows and pushes the language toggle off-screen.
   Drop the back-to-top button (native scroll covers it) and tighten the pill. */
@media(max-width:640px){
  .dock-up{display:none}
  .dock{gap:0}
  .dock-pill{gap:12px;padding:10px 14px}
  .dock-pill a,.lang,.lang button{font-size:10px}
}


/* ---------- scroll reveal ----------
   Gated on .js (set by an inline script in <head>) so that without JavaScript
   every section stays visible instead of being hidden forever. */
.js .reveal,.js .reveal-x{
  opacity:0;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0s);
  will-change:opacity,transform;
}
.js .reveal{transform:translateY(22px)}
.js .reveal-x{transform:translateX(-32px)}
.js .reveal.in,.js .reveal-x.in{opacity:1;transform:none}

/* staggered groups */
.acc-item:nth-child(2){--d:.08s}
.acc-item:nth-child(3){--d:.16s}
.acc-item:nth-child(4){--d:.24s}
.steps .step:nth-child(2){--d:.08s}
.steps .step:nth-child(3){--d:.16s}
.steps .step:nth-child(4){--d:.24s}
.stance .facts{--d:.12s}
.stance-p{--d:.08s}
.cta-sub{--d:.1s}
.cta .pill-lg{--d:.2s}
.service-cards .service-card:nth-child(2){--d:.08s}
.service-cards .service-card:nth-child(3){--d:.16s}
.service-cards .service-card:nth-child(4){--d:.24s}
.tier-cards .tier-card:nth-child(2){--d:.08s}
.tier-cards .tier-card:nth-child(3){--d:.16s}
/* Fresh (.is-recommended) never carries .reveal: .js .reveal.in sets
   transform:none unconditionally, which would cancel the permanent
   translateY(-10px) elevation it needs at all times, not just once
   revealed. It stays visible from the start instead — already set apart
   by the border, glow and badge, it doesn't need entrance motion too. */

/* accordion bars lean in on hover */
.acc-head{transition:padding-left .28s cubic-bezier(.22,.61,.36,1)}
.acc-head:hover{padding-left:calc(var(--gut) + 14px)}
.acc-sign{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.acc-head:hover .acc-sign{transform:rotate(90deg)}
.acc-head[aria-expanded="true"]:hover .acc-sign{transform:none}

/* ---------- cursor das superfícies decorativas ----------
   Só aqui, nunca no <body>. Um cursor global substitui o do sistema e anula as
   definições de acessibilidade de quem configurou um cursor grande ou de alto
   contraste — e não há CSS que respeite essa preferência. O hero e a roda são
   superfícies onde a seta não transporta informação nenhuma, por isso o troco
   é gratuito; tudo o que é ligação, botão ou texto mantém o cursor do sistema.
   (pointer:fine) exclui o toque, onde isto não existe. */
@media (pointer:fine){
  .hero,.services-wheel{cursor:url("cursor.svg") 12 12,default}
  .hero a,.hero button,.hero [role="group"]{cursor:pointer}
}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){
  .badge-spin,.ticker-track,.wheel-spin{animation:none}
  .acc-inner{animation:none}
  .js .reveal,.js .reveal-x{opacity:1;transform:none;transition:none}
  .acc-head,.acc-sign{transition:none}
  .acc-head:hover{padding-left:var(--gut)}
  .acc-head:hover .acc-sign{transform:none}
  .tier-card,.tier-card.is-recommended{transition:none}
  *{scroll-behavior:auto!important}
}
html{scroll-behavior:smooth}
/* Focus ring: the dark cyan is invisible on paper, the bright one on ink. */
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.hero :focus-visible,.cta :focus-visible,.foot :focus-visible,.bar :focus-visible,.dock :focus-visible{outline-color:var(--accent)}