@import url("fonts.css");

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --white:#ffffff;
  --paper:#faf9f5;
  --paper-2:#f2efe6;

  --ink:#171325;
  --ink-dim:#615c72;
  --ink-faint:#736c89;

  --flame:#ff4b2e;
  --flame-deep:#e23a1e;
  --flame-tint:#ffe4dd;

  --violet:#5b3df5;
  --violet-deep:#4527d9;
  --violet-tint:#e8e3ff;

  --lime:#d7fa3d;
  --lime-deep:#aecf1f;
  --lime-tint:#f4ffd6;

  --r-sm:14px;
  --r-md:22px;
  --r-lg:32px;
  --r-xl:44px;
  --r-pill:999px;

  --shadow-sm:0 2px 10px rgba(23,19,37,.07);
  --shadow-md:0 14px 34px rgba(23,19,37,.10);
  --shadow-lg:0 28px 70px rgba(23,19,37,.16);

  /* Drei Dauern, zwei Kurven. Mehr braucht die Seite nicht, und weniger
     Varianten lassen alles wie ein System wirken statt wie Zufall. */
  --t-fast:180ms;
  --t-base:320ms;
  --t-slow:620ms;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --container:1320px;
  --pad-inline:clamp(1.25rem,4.5vw,3rem);
  --pad-section:clamp(4.5rem,9vw,7.5rem);

  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-body:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
body{
  min-height:100dvh;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
ul,ol{list-style:none;padding:0;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.08;}
::selection{background:var(--ink);color:var(--white);}

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-inline);}
.section{padding-block:var(--pad-section);position:relative;}
.section--tight{padding-block:clamp(3rem,6vw,4.5rem);}
.section--paper{background:var(--paper);}

.section-head{max-width:640px;margin-bottom:clamp(2.5rem,5vw,4rem);}
.section-head--wide{max-width:760px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--violet-deep);margin-bottom:1em;
}
.section-head h1,.section-head h2{font-size:clamp(2rem,3.6vw,3rem);}
.section-copy{margin-top:1rem;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-dim);max-width:52ch;}

.accent{color:var(--flame);}
.accent-violet{color:var(--violet);}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  --btn-bg:var(--ink);--btn-fg:var(--white);
  display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;
  padding:.95em 1.6em;border-radius:var(--r-pill);
  font-weight:700;font-size:.98rem;
  background:var(--btn-bg);color:var(--btn-fg);
  transition:transform var(--t-base) var(--spring),box-shadow var(--t-base) var(--ease),background-color var(--t-fast) var(--ease);
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(0) scale(.97);}
.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.9em;height:1.9em;border-radius:50%;background:rgba(255,255,255,.18);
  transition:transform var(--t-base) var(--spring);
}
.btn:hover .btn-icon{transform:translate(2px,-2px) rotate(8deg);}
.btn--flame{--btn-bg:var(--flame);--btn-fg:var(--ink);}
.btn--flame .btn-icon{background:rgba(23,19,37,.12);}
.btn--ghost{
  --btn-bg:transparent;--btn-fg:var(--ink);
  box-shadow:inset 0 0 0 1.5px rgba(23,19,37,.15);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(23,19,37,.3);}
.btn--ghost .btn-icon{background:rgba(23,19,37,.08);}
.btn--sm{padding:.7em 1.2em;font-size:.9rem;}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav-wrap{position:sticky;top:0;z-index:80;padding:clamp(.85rem,2vw,1.4rem) var(--pad-inline) 0;}
.nav{
  max-width:calc(var(--container) - 2 * var(--pad-inline));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem .6rem .55rem 1.1rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(23,19,37,.05),var(--shadow-sm);
  border:1px solid rgba(23,19,37,.06);
  height:64px;
}
.logo{display:flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:1.05rem;flex-shrink:0;}
.logo-word b{color:var(--ink);}
.logo-word span{color:var(--ink-faint);font-weight:600;}

.nav-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.mobile-nav-foot a{color:inherit;font-weight:700;}
.mobile-nav-foot a:hover{color:var(--white);}

.nav-links{display:none;align-items:center;gap:clamp(1.4rem,2vw,2.1rem);font-weight:600;font-size:.94rem;}
.nav-links a{position:relative;padding-block:.3em;}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--flame);
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-base) var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}

.lang-switch{
  font-weight:700;font-size:.78rem;letter-spacing:.03em;color:var(--ink-dim);
  padding:.35em .8em;border-radius:var(--r-pill);border:1.5px solid rgba(23,19,37,.16);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.lang-switch::after{content:none !important;}
.lang-switch:hover{color:var(--ink);border-color:var(--ink);}

.nav-cta{display:none;}
.menu-toggle{
  width:44px;height:44px;border-radius:50%;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  position:relative;
}
.menu-toggle span{
  position:absolute;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform var(--t-base) var(--ease),opacity var(--t-fast) var(--ease),top var(--t-base) var(--ease);
}
.menu-toggle span:first-child{top:18px;}
.menu-toggle span:last-child{top:26px;}
.menu-toggle.active span:first-child{top:22px;transform:rotate(45deg);}
.menu-toggle.active span:last-child{top:22px;transform:rotate(-45deg);}

@media (min-width:960px){
  .nav-links{display:flex;}
  .nav-cta{display:inline-flex;}
  .menu-toggle{display:none;}
}

.mobile-nav{
  position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--white);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.4rem;
  padding:2rem clamp(1.5rem,8vw,4rem);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity var(--t-base) var(--ease),visibility 0s linear .4s,transform var(--t-base) var(--ease);
}
.mobile-nav.open{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;}
.mobile-nav a{
  font-family:var(--font-display);font-size:clamp(2rem,8vw,3rem);font-weight:800;
  color:var(--white);padding-block:.15em;
  opacity:0;transform:translateY(16px);transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.mobile-nav.open a{opacity:1;transform:translateY(0);}
.mobile-nav.open a:nth-child(1){transition-delay:.08s;}
.mobile-nav.open a:nth-child(2){transition-delay:.14s;}
.mobile-nav.open a:nth-child(3){transition-delay:.2s;}
.mobile-nav.open a:nth-child(4){transition-delay:.26s;}
.mobile-nav.open a:nth-child(5){transition-delay:.32s;}
.mobile-nav-foot{position:absolute;bottom:2rem;left:clamp(1.5rem,8vw,4rem);right:clamp(1.5rem,8vw,4rem);display:flex;justify-content:space-between;color:var(--paper-dim,#8a84a0);font-size:.9rem;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero-viewport{
  display:flex;flex-direction:column;
  min-height:calc(100dvh - 64px - clamp(.85rem,2vw,1.4rem));
}
.hero{
  flex:1;display:flex;align-items:center;
  padding:clamp(2rem,5vw,4.5rem) var(--pad-inline) clamp(3rem,6vw,4rem);
}
.hero-grid{width:100%;}
.marquee{flex-shrink:0;}
.hero-grid{
  max-width:calc(var(--container) - 2 * var(--pad-inline));margin-inline:auto;
  display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,6vw,3rem);align-items:center;
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:.6em;font-weight:300;font-size:.92rem;
  color:var(--ink-dim);margin-bottom:1.1em;
}
.hero-title{font-size:clamp(2.6rem,6.2vw,4.4rem);max-width:13ch;}
.hero-title .line{display:block;overflow:hidden;}
.hero-title em{
  font-style:normal;color:var(--flame);position:relative;white-space:nowrap;
}
.hero-sub{margin-top:1.4rem;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-dim);max-width:40ch;}
.hero-actions{margin-top:2.1rem;display:flex;flex-wrap:wrap;gap:.9rem;}

.hero-visual{position:relative;aspect-ratio:1/1;max-width:460px;justify-self:center;width:100%;}
.hero-blob{position:absolute;border-radius:var(--r-xl);animation:float 7s var(--ease) infinite;animation-fill-mode:backwards;}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg));}
  50%{transform:translateY(-16px) rotate(var(--rot,0deg));}
}
.hero-blob--1{--rot:-6deg;top:6%;left:8%;width:46%;height:46%;background:var(--violet);animation-delay:0s;box-shadow:var(--shadow-lg);}
.hero-blob--2{--rot:8deg;bottom:10%;left:2%;width:34%;height:34%;background:var(--lime);border-radius:50%;animation-delay:.6s;box-shadow:var(--shadow-md);}
.hero-blob--3{--rot:-3deg;bottom:4%;right:6%;width:52%;height:52%;background:var(--ink);animation-delay:1.1s;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;}
.hero-blob--3 svg{width:56%;height:56%;}
.hero-blob--4{--rot:10deg;top:2%;right:16%;width:22%;height:22%;background:var(--flame);border-radius:50%;animation-delay:.3s;box-shadow:var(--shadow-md);}

.hero-visual{display:none;}
@media (min-width:960px){
  .hero-grid{grid-template-columns:1.05fr .95fr;}
  .hero-visual{display:block;justify-self:end;}
}

@media (prefers-reduced-motion: reduce){
  .hero-blob{animation:none;}
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  border-block:1px solid rgba(23,19,37,.08);
  overflow:hidden;padding-block:1.1rem;
}
.marquee-track{display:flex;width:max-content;animation:scroll-x 60s linear infinite;}
.marquee-track > span{
  display:block;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.1rem,2.4vw,1.6rem);
  color:var(--ink-faint);
}
.marquee-track b{color:var(--ink);font-weight:800;}
.marquee-track .sep{color:var(--flame);display:inline-block;margin:0 1.25rem;}
@keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
  .marquee-track span:nth-child(n+2){display:none;}
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.service-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem;
}
.service-card{
  grid-column:span 12;background:var(--paper);border:1.5px solid rgba(23,19,37,.12);
  border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,1.85rem);
  display:flex;flex-direction:column;height:100%;
  transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.service-card:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:0 20px 40px -20px rgba(23,19,37,.28);}
.service-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.2rem;}
.service-tag{
  display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:.45em .85em;
  border-radius:var(--r-pill);background:var(--tint,var(--paper-2));color:var(--ink-dim);
}
.service-num{
  font-family:var(--font-mono);font-size:.82rem;color:var(--ink-faint);
}
.service-card h3{font-size:clamp(1.3rem,2.1vw,1.55rem);margin-bottom:.6rem;}
.service-card p{color:var(--ink-dim);max-width:38ch;}
.service-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:1.4rem;}
.service-tags li{
  font-size:.86rem;font-weight:600;padding:.4em .9em;border-radius:var(--r-pill);
  background:var(--paper-2);color:var(--ink-dim);
}

@media (min-width:760px){
  .service-card{grid-column:span 6;}
}

.services-extra{
  margin-top:2.5rem;padding:clamp(1.75rem,3.5vw,2.5rem);border-radius:var(--r-lg);
  background:var(--ink);color:var(--white);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem;justify-content:space-between;
}
.services-extra p{max-width:34ch;color:rgba(255,255,255,.72);font-size:.98rem;}
.services-extra p b{color:var(--white);}
.extra-tags{display:flex;flex-wrap:wrap;gap:.6rem;}
.extra-tags li{
  font-size:.86rem;font-weight:700;padding:.5em 1.05em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);color:var(--white);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.work-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;}
.work-card{
  aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:var(--tint,var(--paper-2));box-shadow:var(--shadow-sm);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
  display:block;
}
.work-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.work-media{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(1.5rem,4vw,2.5rem) clamp(1.5rem,4vw,2.5rem) 4.75rem;
}
.work-media img{width:100%;height:100%;object-fit:contain;transform:scale(var(--logo-scale,1));transition:transform var(--t-base) var(--ease);}
.work-media.is-photo{padding:0;}
.work-media.is-photo img{object-fit:cover;}
.work-card:hover .work-media img{transform:scale(calc(var(--logo-scale,1) * 1.04));}
.work-info{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding:1.6rem;color:var(--white);
  background:linear-gradient(0deg, rgba(23,19,37,.78), rgba(23,19,37,0) 55%);
}
.work-tag{
  display:inline-flex;align-items:center;font-size:.7rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:.4em .8em;margin-bottom:.7rem;
  border-radius:var(--r-pill);background:rgba(255,255,255,.16);color:var(--white);
}
.work-info h3{font-size:1.3rem;margin:0 0 .2rem;letter-spacing:-.01em;font-family:var(--font-display);color:var(--white);}
.work-info p{font-size:.85rem;color:rgba(255,255,255,.75);margin:0;}
.work-go{
  width:2.75rem;height:2.75rem;border-radius:50%;background:var(--white);color:var(--ink);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transform:scale(.92) rotate(-8deg);
  transition:transform var(--t-base) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.work-card:hover .work-go{background:var(--flame);color:var(--ink);transform:scale(1) rotate(0deg);}

@media (min-width:760px){
  .work-grid{grid-template-columns:1fr 1fr;}
  .work-card{aspect-ratio:16/10;}
  .work-card--wide{grid-column:span 2;aspect-ratio:21/9;}
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative;
}
.process-line{
  display:none;
}
.process-step{position:relative;padding-top:clamp(3rem,6vw,4rem);}
.process-num{
  position:absolute;top:0;left:0;width:clamp(2.6rem,5vw,3.4rem);height:clamp(2.6rem,5vw,3.4rem);
  border-radius:50%;background:var(--ink);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.95rem;font-weight:700;
}
.process-step:nth-child(1) .process-num{background:var(--flame);color:var(--ink);}
.process-step:nth-child(2) .process-num{background:var(--violet);color:var(--white);}
.process-step:nth-child(3) .process-num{background:var(--lime);color:var(--ink);}
.process-step:nth-child(4) .process-num{background:var(--ink);color:var(--white);}
.process-step h3{font-size:1.3rem;margin-bottom:.6rem;}
.process-step p{color:var(--ink-dim);}

@media (max-width:860px){
  .process-grid{grid-template-columns:1fr;gap:2.5rem;}
}

/* ==========================================================================
   MANIFESTO
   ========================================================================== */
.manifesto{
  background:var(--ink);color:var(--white);border-radius:var(--r-xl);
  padding:clamp(3rem,8vw,6rem) clamp(1.75rem,6vw,4rem);
  text-align:center;position:relative;overflow:hidden;
}
.manifesto h2{font-size:clamp(2.1rem,5vw,3.6rem);max-width:16ch;margin-inline:auto;}
.manifesto h2 em{font-style:normal;color:var(--lime);}
.manifesto p{margin:1.6rem auto 0;max-width:52ch;color:rgba(255,255,255,.68);font-size:clamp(1.05rem,1.6vw,1.2rem);}
.manifesto-glow{
  position:absolute;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--violet) 0%,transparent 70%);
  opacity:.5;top:-20%;right:-10%;filter:blur(10px);pointer-events:none;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;}
.about-card{position:relative;padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r-lg);background:var(--paper);}
.about-top{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.6rem;}
.about-photo-wrap{
  width:76px;height:76px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:var(--paper-2);position:relative;
  box-shadow:var(--shadow-sm),0 0 0 3px var(--paper),0 0 0 5.5px var(--accent,var(--paper-2));
}
.about-photo-wrap img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);}
.about-top div b{display:block;font-family:var(--font-display);font-size:1.15rem;margin-bottom:.35rem;}
.about-role{
  display:inline-flex;align-items:center;font-size:.75rem;font-weight:700;
  letter-spacing:.03em;padding:.3em .8em;border-radius:var(--r-pill);
  background:var(--accent-tint,var(--paper-2));color:var(--accent-deep,var(--ink-dim));
}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding-top:1.4rem;border-top:1px solid rgba(23,19,37,.08);}
.about-facts span{display:block;font-size:.82rem;color:var(--ink-dim);margin-bottom:.3rem;}
.about-facts b{font-size:.98rem;}

@media (min-width:720px){
  .about-grid{grid-template-columns:1fr 1fr;}
}

.about-grid--solo{max-width:420px;}
@media (min-width:720px){
  .about-grid--solo{grid-template-columns:1fr;}
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{display:flex;flex-direction:column;gap:.85rem;}
.faq-item{
  border-radius:var(--r-md);background:var(--paper);overflow:hidden;
}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.3rem 1.6rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,1.6vw,1.15rem);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-plus{
  width:2rem;height:2rem;border-radius:50%;background:var(--white);flex-shrink:0;position:relative;
  transition:transform var(--t-base) var(--ease),background var(--t-fast) var(--ease);
}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;background:var(--ink);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.faq-plus::before{width:12px;height:2px;}
.faq-plus::after{width:2px;height:12px;transition:transform var(--t-fast) var(--ease);}
.faq-item[open] .faq-plus{background:var(--flame);}
.faq-item[open] .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg) scale(0);}
.faq-answer{padding:0 1.6rem 1.5rem;color:var(--ink-dim);max-width:68ch;}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);}
.contact-form{display:flex;flex-direction:column;gap:1.3rem;}
.field{display:flex;flex-direction:column;gap:.5rem;}
.field label{font-weight:700;font-size:.94rem;}
.field input,.field select,.field textarea{
  padding:.9em 1.1em;border-radius:var(--r-sm);background:var(--paper);
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--violet);
}
.field.invalid input,.field.invalid select,.field.invalid textarea{box-shadow:inset 0 0 0 1.5px var(--flame-deep);}
.field-error{font-size:.84rem;color:var(--flame-deep);min-height:1.2em;}
.field-hint{font-size:.84rem;color:var(--ink-dim);}
.hp{position:absolute;left:-9999px;}
.contact-form button[type="submit"]{align-self:flex-start;margin-top:.5rem;}
.form-message{font-size:.94rem;font-weight:600;min-height:1.4em;}
.form-message.is-success{color:#1c8a4b;}
.form-message.is-error{color:var(--flame-deep);}

.contact-side{padding:clamp(1.75rem,3vw,2.5rem);border-radius:var(--r-lg);background:var(--violet);color:var(--white);height:fit-content;}
.contact-side h3{font-size:1.4rem;margin-bottom:.9rem;}
.contact-side p{color:rgba(255,255,255,.85);margin-bottom:1.6rem;}
.contact-side a{display:flex;align-items:center;justify-content:space-between;padding:1em 0;border-top:1px solid rgba(255,255,255,.18);font-weight:700;}
.contact-side a:first-of-type{border-top:none;}

.trust-list{
  display:flex;flex-wrap:wrap;gap:.6rem .8rem;list-style:none;
  margin-bottom:clamp(2rem,4vw,2.8rem);
}
.trust-list li{
  display:flex;align-items:center;gap:.5em;
  font-size:.88rem;font-weight:600;color:var(--ink-dim);
  padding:.55em 1.05em;border-radius:var(--r-pill);background:var(--paper-2);
}
.trust-list li::before{content:"✓";color:var(--flame);font-weight:800;}

@media (min-width:900px){
  .contact-grid{grid-template-columns:1.3fr .8fr;}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--ink);color:var(--white);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem;}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem;padding-bottom:clamp(2.5rem,5vw,3.5rem);}
.footer-brand{max-width:34ch;}
.footer-brand .logo-word b{color:var(--white);}
.footer-brand .logo-word span{color:var(--ink-faint);}
.footer-brand p{margin-top:1.1rem;color:rgba(255,255,255,.6);}
.footer-cols{display:flex;flex-wrap:wrap;gap:clamp(2.5rem,6vw,5rem);}
.footer-col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55);margin-bottom:1.1rem;}
.footer-col a,.footer-col span{display:block;padding-block:.4rem;color:rgba(255,255,255,.85);}
.footer-col a:hover{color:var(--lime);}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-top:2rem;border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.5);font-size:.88rem;
}
.footer-bottom-links{display:flex;gap:1.5rem;}
.footer-bottom-links a:hover{color:var(--white);}

/* ==========================================================================
   SCROLL PROGRESS / TOP BUTTON
   ========================================================================== */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:90;
  background:var(--flame);transform:scaleX(0);transform-origin:left;
}
.scroll-top{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
  width:3rem;height:3rem;border-radius:50%;background:var(--ink);color:var(--white);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),background var(--t-fast) var(--ease);
}
.scroll-top.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.scroll-top:hover{background:var(--flame);color:var(--ink);}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox-trigger{cursor:zoom-in;}
.lightbox{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:clamp(1.25rem,5vw,3.5rem);background:rgba(23,19,37,.94);
  opacity:0;visibility:hidden;transition:opacity var(--t-fast) var(--ease),visibility var(--t-fast) var(--ease);
}
.lightbox.open{opacity:1;visibility:visible;}
.lightbox img,.lightbox video{max-width:100%;max-height:100%;border-radius:var(--r-md);box-shadow:var(--shadow-lg);object-fit:contain;}
.lightbox-close{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;
  transition:transform var(--t-fast) var(--spring);
}
.lightbox-close:hover{transform:scale(1.08);}
.lightbox-caption{
  position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.85);font-weight:600;font-size:.92rem;text-align:center;max-width:80vw;
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
/* Bewegt wird `translate`, nicht `transform`. So bleibt `transform` frei für
   Hover-Effekte, die sonst vom Reveal überschrieben würden.
   Alle Startzustände hängen an `.js`: ohne JavaScript ist alles sofort da. */
/* Kurzer Weg, gleiche Dauer für Deckkraft und Bewegung. Vorher endete das
   Einblenden vor der Bewegung, das wirkt unsauber. 14px statt 22px: die
   Seite kommt zur Ruhe, statt zu rutschen. */
.js .reveal{
  opacity:0;translate:0 14px;
  transition:opacity var(--t-slow) var(--ease) var(--d,0ms),translate var(--t-slow) var(--ease) var(--d,0ms);
}
.js .reveal.visible{opacity:1;translate:0 0;}
.js .reveal-stagger.visible .r-child{opacity:1;translate:0 0;}
.js .r-child{
  opacity:0;translate:0 10px;
  transition:opacity var(--t-slow) var(--ease) var(--d,0ms),translate var(--t-slow) var(--ease) var(--d,0ms);
}
/* Kinder eines Containers laufen nacheinander ein statt gleichzeitig. */
.js [data-seq] > *{
  opacity:0;translate:0 14px;
  transition:opacity var(--t-slow) var(--ease) calc(var(--i,0) * var(--seq-step,70ms)),
             translate var(--t-slow) var(--ease) calc(var(--i,0) * var(--seq-step,70ms)),
             transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.js [data-seq].visible > *{opacity:1;translate:0 0;}

@media (prefers-reduced-motion: reduce){
  .js .reveal,.js .r-child,.js [data-seq] > *{opacity:1;translate:none;transform:none;transition:none;}
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal{max-width:800px;margin-inline:auto;padding-inline:var(--pad-inline);padding-block:clamp(2rem,5vw,3rem) 5rem;}
.legal-back{display:inline-flex;align-items:center;gap:.5em;font-weight:700;margin-bottom:2rem;color:var(--ink-dim);}
.legal-back:hover{color:var(--ink);}
.legal-title{font-size:clamp(2.2rem,5vw,3rem);margin-bottom:2rem;}
.legal-note{
  background:var(--lime-tint);border-radius:var(--r-md);padding:1.4rem 1.6rem;margin-bottom:2.5rem;
  font-size:.94rem;color:var(--ink);
}
.legal-block{margin-bottom:2.2rem;}
.legal-block h2{font-size:1.2rem;margin-bottom:.7rem;}
.legal-block p{color:var(--ink-dim);margin-bottom:.7rem;}
.legal-block p:last-child{margin-bottom:0;}
.legal-list{padding-left:1.2rem;color:var(--ink-dim);}
.legal-list li{list-style:disc;margin-bottom:.4rem;}
.legal-meta{font-size:.88rem;color:var(--ink-faint);}
mark.todo{background:var(--lime);color:var(--ink);padding:.1em .4em;border-radius:.3em;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

/* ==========================================================================
   PROJECT DETAIL PAGES
   ========================================================================== */
main > .container{padding-bottom:clamp(3.5rem,8vw,6rem);}
.detail-hero{padding-top:clamp(2rem,5vw,3.5rem);}
.fiction-badge{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:.4em 1.1em;border-radius:var(--r-pill);
  background:var(--flame);color:var(--ink);
  margin-bottom:1.1rem;
}
.detail-kicker{font-family:var(--font-mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--violet-deep);margin-bottom:1rem;}
.detail-title{font-size:clamp(2.6rem,7vw,5rem);}
.detail-meta{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;
  margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.5rem,3vw,2rem);
  background:var(--paper);border-radius:var(--r-lg);
}
.detail-meta div span{display:block;font-size:.82rem;color:var(--ink-dim);margin-bottom:.3rem;}
.detail-meta div b{font-family:var(--font-display);font-size:1.05rem;}
.detail-visual{margin-top:clamp(2rem,4vw,3rem);}
.detail-visual img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);display:block;}
.hero-video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;}
.hero-video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.detail-body{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:clamp(2rem,4vw,3rem);}
.detail-block h2{font-size:1.5rem;margin-bottom:.8rem;}
.detail-block p{color:var(--ink-dim);max-width:60ch;}
.detail-gallery{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:clamp(2rem,4vw,3rem);}
.detail-panel{border-radius:var(--r-lg);overflow:hidden;background:var(--paper);}
.detail-panel img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.video-frame{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;}
.video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.detail-panel-label{display:block;padding:1rem 1.3rem 1.3rem;font-weight:700;}
.detail-panel-label small{display:block;font-weight:500;color:var(--ink-dim);margin-top:.2rem;}
.detail-quote{
  margin-top:clamp(2.5rem,5vw,4rem);padding:clamp(2rem,5vw,3.5rem);border-radius:var(--r-xl);
  background:var(--ink);color:var(--white);text-align:center;
}
.detail-quote blockquote{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,1.9rem);max-width:32ch;margin-inline:auto;line-height:1.3;}
.detail-quote p{margin-top:1.3rem;color:rgba(255,255,255,.6);font-weight:600;}
.detail-pager{
  margin-top:clamp(2.5rem,5vw,4rem);display:flex;justify-content:space-between;gap:1rem;
  padding-top:2rem;border-top:1px solid rgba(23,19,37,.1);font-weight:700;flex-wrap:wrap;
}
.detail-pager a:hover{color:var(--flame-deep);}

@media (min-width:760px){
  .detail-meta{grid-template-columns:repeat(4,1fr);}
  .detail-body{grid-template-columns:1fr 1fr;gap:3rem;}
  .detail-gallery{grid-template-columns:repeat(3,1fr);}
}

/* ==========================================================================
   HIGH-END LAYER
   Choreografie, Micro-Interactions und Art-Direction-Details.
   Grundregel: Einlauf-Bewegungen nutzen `translate`/`scale`,
   Hover-Effekte nutzen `transform`. So kollidiert nichts.
   ========================================================================== */

/* --- Fokus: sichtbar für Tastatur, unauffällig für Maus ------------------ */
:focus-visible{outline:2.5px solid var(--flame);outline-offset:3px;}
.btn:focus-visible,.work-card:focus-visible,.service-card:focus-visible{outline-offset:4px;}
.faq-item summary:focus-visible{outline-offset:-3px;}

/* --- Scroll-Fortschritt in Markenfarben ---------------------------------- */
.scroll-progress{background:linear-gradient(90deg,var(--flame),var(--violet) 55%,var(--lime));}

/* ==========================================================================
   NAV: verdichtet beim Scrollen, invertiert über dunklen Sektionen
   ========================================================================== */
.nav{
  transition:height var(--t-base) var(--ease),background-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.nav-wrap.is-scrolled .nav{
  height:56px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 30px -18px rgba(23,19,37,.5);
}
.logo-word b,.logo-word span,.nav-links a,.lang-switch,.menu-toggle,.menu-toggle span{
  transition:color var(--t-base) var(--ease),background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.nav-wrap.is-dark .nav{
  background:rgba(23,19,37,.78);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.7);
}
.nav-wrap.is-dark .logo-word b{color:var(--white);}
.nav-wrap.is-dark .logo-word span{color:rgba(255,255,255,.5);}
.nav-wrap.is-dark .nav-links a{color:rgba(255,255,255,.88);}
.nav-wrap.is-dark .lang-switch{color:rgba(255,255,255,.62);border-color:rgba(255,255,255,.28);}
.nav-wrap.is-dark .lang-switch:hover{color:var(--white);border-color:var(--white);}
.nav-wrap.is-dark .menu-toggle{background:rgba(255,255,255,.14);}
.nav-wrap.is-dark .menu-toggle span{background:var(--white);}

/* ==========================================================================
   SECTION-HEADS: Eyebrow, Masken-Headline, nachlaufender Fließtext
   ========================================================================== */
.js .section-head.reveal{translate:0 0;}

.mask-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;}
.mask-line > span{
  display:block;translate:0 108%;
  transition:translate var(--t-slow) var(--ease) var(--d,.1s);
}
.visible .mask-line > span{translate:0 0;}

.js .section-head .section-copy{
  opacity:0;translate:0 12px;
  transition:opacity var(--t-slow) var(--ease) .3s,translate var(--t-slow) var(--ease) .3s;
}
.section-head.visible .section-copy{opacity:1;translate:0 0;}

@media (prefers-reduced-motion: reduce){
  .section-head .section-copy,.mask-line > span{
    opacity:1;translate:none;transition:none;
  }
}

/* ==========================================================================
   MARQUEE: reagiert auf Scroll-Tempo und -Richtung
   ========================================================================== */

/* ==========================================================================
   SERVICE-CARDS: Tint folgt dem Cursor, Pfeil löst die Nummer ab
   ========================================================================== */
.service-card{position:relative;overflow:hidden;isolation:isolate;}
.service-card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(340px circle at var(--cx,50%) var(--cy,0%),var(--tint,var(--paper-2)),transparent 70%);
  opacity:0;transition:opacity var(--t-base) var(--ease);
}
.service-card:hover::before{opacity:.9;}
/* Keine Kontur beim Hover. Die Rahmenfarbe bleibt wie im Ruhezustand, den
   Effekt tragen der Farbverlauf, das Anheben und der Schatten.
   (Die Akzentfarbe steht weiterhin als --line am Element, falls sie
   spaeter nochmal gebraucht wird.) */
.service-card:hover{border-color:rgba(23,19,37,.12);box-shadow:0 20px 40px -22px rgba(23,19,37,.22);}
.service-num{transition:opacity var(--t-fast) var(--ease),translate var(--t-base) var(--ease);}
.service-card:hover .service-num{opacity:0;translate:0 -8px;}
.service-arrow{
  position:absolute;top:clamp(1.5rem,3vw,1.85rem);right:clamp(1.5rem,3vw,1.85rem);
  width:2.1rem;height:2.1rem;border-radius:50%;background:var(--ink);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  opacity:0;scale:.6;rotate:-25deg;
  transition:opacity var(--t-base) var(--ease),scale var(--t-base) var(--spring),rotate var(--t-base) var(--spring);
}
.service-card:hover .service-arrow{opacity:1;scale:1;rotate:0deg;}
.service-card h3{transition:translate var(--t-base) var(--ease);}
.service-card:hover h3{translate:4px 0;}

/* ==========================================================================
   WORK-CARDS: der Portfolio-Moment
   ========================================================================== */
.work-card{isolation:isolate;}
.work-card.reveal{
  translate:0 40px;scale:.985;
  transition:opacity var(--t-slow) var(--ease) calc(var(--i,0) * 75ms),
             translate var(--t-slow) var(--ease) calc(var(--i,0) * 75ms),
             scale var(--t-slow) var(--ease) calc(var(--i,0) * 75ms),
             transform var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
.work-card.reveal.visible{translate:0 0;scale:1;}

/* Logo atmet leicht mit dem Scroll mit */
.work-media img{translate:0 var(--py,0px);}

/* Der Verlauf lag vorher über der halben Kachel und hat jede Markenfarbe
   ausgegraut. Jetzt ein knapper Scrim in festen Pixeln: gerade so viel, dass
   die Schrift sitzt, und die Farbe bleibt die Hauptsache. */
/* Ein linearer Verlauf bricht am Ende sichtbar ab. Die vielen Stützstellen
   bilden eine weiche Kurve nach, die unten kräftig ist und oben sanft
   ausläuft, ohne die halbe Kachel einzufärben. */
.work-info{
  background:linear-gradient(0deg,
    rgba(23,19,37,.88) 0,
    rgba(23,19,37,.80) 26px,
    rgba(23,19,37,.66) 54px,
    rgba(23,19,37,.48) 86px,
    rgba(23,19,37,.30) 122px,
    rgba(23,19,37,.16) 158px,
    rgba(23,19,37,.06) 196px,
    rgba(23,19,37,0) 232px);
  text-shadow:0 1px 14px rgba(23,19,37,.35);
  transition:background var(--t-base) var(--ease);
}
.work-card:hover .work-info{
  background:linear-gradient(0deg,
    rgba(23,19,37,.92) 0,
    rgba(23,19,37,.85) 28px,
    rgba(23,19,37,.72) 58px,
    rgba(23,19,37,.54) 92px,
    rgba(23,19,37,.35) 130px,
    rgba(23,19,37,.19) 170px,
    rgba(23,19,37,.07) 210px,
    rgba(23,19,37,0) 250px);
}
/* Helle Kacheln brauchen unten mehr Deckung, damit die weiße Schrift sitzt.
   Die Klasse setzt das Skript, sobald die Kachelfarbe hell ist. */
.work-card.is-light-tint .work-info{
  background:linear-gradient(0deg,
    rgba(23,19,37,.94) 0,
    rgba(23,19,37,.88) 26px,
    rgba(23,19,37,.76) 54px,
    rgba(23,19,37,.58) 86px,
    rgba(23,19,37,.38) 122px,
    rgba(23,19,37,.20) 158px,
    rgba(23,19,37,.07) 196px,
    rgba(23,19,37,0) 232px);
}
.work-card.is-light-tint:hover .work-info{
  background:linear-gradient(0deg,
    rgba(23,19,37,.96) 0,
    rgba(23,19,37,.91) 28px,
    rgba(23,19,37,.80) 58px,
    rgba(23,19,37,.63) 92px,
    rgba(23,19,37,.43) 130px,
    rgba(23,19,37,.24) 170px,
    rgba(23,19,37,.09) 210px,
    rgba(23,19,37,0) 250px);
}

/* Feine Innenkante: gibt hellen Kacheln eine Silhouette gegen den Papierton. */
.work-card{box-shadow:var(--shadow-sm),inset 0 0 0 1px rgba(23,19,37,.07);}
.work-card:hover{box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(23,19,37,.07);}
.work-info > div{transition:translate var(--t-base) var(--ease);}
.work-card:hover .work-info > div{translate:0 -4px;}

/* Cursor-Label: folgt der Maus innerhalb der Kachel, mit leichtem Nachzug.
   Mono und gesperrt statt fett und rund: ruhiger und präziser. */
.work-cursor{
  position:absolute;top:0;left:0;z-index:4;pointer-events:none;
  white-space:nowrap;
  padding:.85em 1.35em;border-radius:var(--r-pill);
  background:var(--flame);color:var(--ink);
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;line-height:1;
  transform:translate(-50%,-50%);
  opacity:0;scale:.7;
  transition:opacity var(--t-fast) var(--ease),scale var(--t-base) var(--ease);
}
.work-card.is-pointing .work-cursor{opacity:1;scale:1;}
@media (hover:none),(pointer:coarse){
  .work-cursor{display:none;}
}

/* ==========================================================================
   FAQ: sanftes Öffnen statt Sprung
   ========================================================================== */
.faq-answer-wrap{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-base) var(--ease);
}
.faq-item.is-open .faq-answer-wrap{grid-template-rows:1fr;}
/* Das Padding muss nach innen wandern: sonst hält es die Zeile auch bei 0fr
   auf ihrer Mindesthöhe offen und unter jeder geschlossenen Frage bliebe eine
   Lücke stehen. */
.faq-answer-wrap > .faq-answer{overflow:hidden;min-height:0;padding:0;}
.faq-answer-wrap > .faq-answer > *{padding-inline:1.6rem;}
.faq-answer-wrap > .faq-answer > *:last-child{padding-bottom:1.5rem;}
.faq-answer-wrap > .faq-answer > p{
  opacity:0;translate:0 8px;
  transition:opacity var(--t-base) var(--ease) .1s,translate var(--t-base) var(--ease) .1s;
}
.faq-item.is-open .faq-answer-wrap > .faq-answer > p{opacity:1;translate:0 0;}
@media (prefers-reduced-motion: reduce){
  .faq-answer-wrap{transition:none;}
  .faq-answer-wrap > .faq-answer > p{opacity:1;translate:none;transition:none;}
}

/* ==========================================================================
   MAGNETISCHE BUTTONS
   ========================================================================== */
.magnetic{translate:var(--magx,0px) var(--magy,0px);transition:translate var(--t-base) var(--ease);}
.magnetic.is-pulled{transition:translate .1s linear;}

/* ==========================================================================
   CONTACT: mehr Tiefe in der Seitenkarte
   ========================================================================== */
.contact-side{position:relative;overflow:hidden;isolation:isolate;}
.contact-side::after{
  content:"";position:absolute;z-index:-1;width:70%;aspect-ratio:1;border-radius:50%;
  right:-22%;top:-30%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.28) 0%,transparent 70%);
}
.contact-side a{transition:padding-left var(--t-base) var(--ease),color var(--t-fast) var(--ease);}
.contact-side a:hover{padding-left:.5rem;}
.contact-side a span{display:inline-block;transition:transform var(--t-base) var(--spring);}
.contact-side a:hover span{transform:translate(3px,-3px);}

.trust-list li{transition:transform var(--t-base) var(--spring),background-color var(--t-fast) var(--ease);}
.trust-list li:hover{transform:translateY(-3px);background:var(--flame-tint);}

/* Der Plus-Button folgt dem animierten Zustand, nicht dem open-Attribut,
   damit er beim Zuklappen nicht vorauseilt. Aussehen bleibt wie gehabt. */
.faq-item.is-open .faq-plus{background:var(--flame);}
.faq-item.is-open .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg) scale(0);}
.js .faq-item[open]:not(.is-open) .faq-plus{background:var(--white);}
.js .faq-item[open]:not(.is-open) .faq-plus::after{transform:translate(-50%,-50%);}

/* ==========================================================================
   TYPOGRAFIE: optisches Tracking und Zeilenhöhe nach Größe
   Vorher lagen -.02em und 1.08 pauschal auf allem, von der 70px-Hero-Zeile
   bis zur 21px-Kartenüberschrift. Große Grade brauchen enger und dichter,
   kleine brauchen luftiger, sonst kleben sie.
   ========================================================================== */
h1,h2,h3,h4{letter-spacing:-.012em;line-height:1.2;}

/* Große Statement-Zeilen */
.hero-title{letter-spacing:-.035em;line-height:1.04;}
.detail-title{letter-spacing:-.035em;line-height:1.04;}
/* Versalien über CSS statt im Quelltext: so bleibt der Satz für Screenreader
   ein normaler Satz. Grossbuchstaben brauchen weniger negative Laufweite als
   Gemischtschrift, sonst kleben sie aneinander. */
.manifesto h2{text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;}

/* Sektions-Überschriften */
.section-head h1,.section-head h2,.legal-title{letter-spacing:-.026em;line-height:1.1;}

/* Kleinere Überschriften bleiben offen */
.service-card h3,.process-step h3,.contact-side h3,.detail-block h2{letter-spacing:-.008em;line-height:1.22;}
.work-info h3{letter-spacing:-.012em;line-height:1.18;}
.faq-item summary{letter-spacing:-.008em;line-height:1.3;}

/* Fließtext: je größer, desto dichter der Zeilenabstand */
.hero-sub{line-height:1.45;}
.section-copy{line-height:1.5;}
.detail-block p,.service-card p{line-height:1.6;}

/* Mono-Elemente vertragen etwas mehr Sperrung, sie werden sonst zu kompakt */
.detail-kicker{letter-spacing:.12em;}

/* ==========================================================================
   RHYTHMUS: Luft um den Bruch
   Alle Sektionen atmen gleich. Das Manifest ist der Stimmungswechsel der
   Seite und bekommt als einziges mehr Raum, damit der Bruch auch wirkt.
   ========================================================================== */
.manifesto{margin-block:clamp(1.5rem,4vw,3.5rem);}

/* ==========================================================================
   VERSALIEN AUF ÜBERSCHRIFTEN
   Grossbuchstaben laufen deutlich breiter und brauchen weniger negative
   Laufweite als Gemischtschrift, sonst kleben sie aneinander. Deshalb wird
   das Tracking hier je Groesse neu gesetzt, nicht nur text-transform.

   Bewusst ausgenommen: FAQ-Fragen und Zitate (ganze Saetze lesen sich in
   Versalien schlecht) sowie Personennamen.
   ========================================================================== */
.hero-title,
.detail-title,
.section-head h1,.section-head h2,
.legal-title,
.service-card h3,
.process-step h3,
.contact-side h3,
.services-extra h3,
.detail-block h2,
.work-info h3{text-transform:uppercase;}

/* Grosse Grade: etwas weniger eng als in Gemischtschrift */
.hero-title,.detail-title{letter-spacing:-.02em;}
.section-head h1,.section-head h2,.legal-title{letter-spacing:-.012em;}

/* Kleine Grade: Versalien brauchen hier sogar etwas Luft */
.service-card h3,.process-step h3,.contact-side h3,
.services-extra h3,.detail-block h2{letter-spacing:.01em;}
.work-info h3{letter-spacing:.015em;}

/* Versalien laufen rund 12% breiter und wirken optisch groesser. Auf schmalen
   Schirmen wuerden Ueberschriften dadurch eine Zeile hoeher. Der kleinere
   Startwert im clamp gleicht das aus, auf dem Desktop aendert sich nichts. */
.section-head h1,.section-head h2{font-size:clamp(1.75rem,3.6vw,3rem);}
/* Der Hero-Block braucht mehr Breite, sonst schneidet .line die Versalien ab.
   min() deckelt ihn am Container, sonst laeuft die Seite auf dem Handy ueber.
   Und weil "WIRD GESTALTUNG." nicht umbrechen darf, faellt der Grad dort
   etwas kleiner aus, damit die Zeile in zwei Zeilen stehen bleibt. */
.hero-title{max-width:min(15ch,100%);font-size:clamp(2.25rem,6.2vw,4.4rem);}

/* Auf sehr schmalen Schirmen darf die Akzentzeile umbrechen. Sonst zwingt
   das nowrap die Hero-Spalte breiter als den Container und die ganze Seite
   laeuft seitlich ueber. Lieber drei Zeilen als ein horizontaler Scrollbalken. */
@media (max-width:400px){
  .hero-title em{white-space:normal;}
}

/* Lange deutsche Woerter wie "UEBERRASCHUNGEN" passen auf sehr schmalen
   Schirmen in keine Zeile und wuerden abgeschnitten. Silbentrennung greift
   nur dann, wenn ein Wort sonst nicht passt, und nur hier unten. */
@media (max-width:400px){
  h1,h2,h3{overflow-wrap:break-word;hyphens:auto;}
}

/* ==========================================================================
   SCHRIFTGEWICHTE
   Ueberschriften bleiben in ihrem Schnitt, 800 wie die Basisregel fuer
   h1-h4 es vorgibt, nirgends gemischt. Die Rangfolge entsteht stattdessen
   zwischen Ueberschrift und den Info-Texten daneben: Kicker, Meta-Labels
   und Footer-Rubriken sind bewusst Light (300) und treten zurueck, damit
   die Ueberschrift dagegen mehr Gewicht bekommt. Wie stark ein Text ist,
   richtet sich danach, wie sehr er im Vordergrund stehen soll.
   Die Bricolage-Achse reicht bis 200, DM Sans bis 100. Beide waren in
   fonts.css enger eingebunden als das Dateiformat hergibt.
   ========================================================================== */

/* Sektions-Ueberschriften eine Stufe unter dem Hero-Akzent.
   So entsteht Rangfolge ueber das Gewicht, nicht nur ueber die Groesse. */
.section-head h1,.section-head h2,.legal-title{font-weight:700;}

/* Kleine Ueberschriften: 800 wirkt in dieser Groesse zugelaufen. */
.service-card h3,.process-step h3,.contact-side h3,
.services-extra h3,.detail-block h2,.work-info h3{font-weight:700;}
.about-top div b{font-weight:700;}

/* Kennzahlen und Meta-Angaben ruhiger, sie sollen nicht mit den
   Ueberschriften konkurrieren. */
.detail-meta div b{font-weight:500;}

/* Fliesstext bekommt eine mittlere Stufe fuer Hervorhebungen. */
.services-extra p b{font-weight:600;}

/* --- Info-Texte: Light, damit sie neben Ueberschriften zurueckstehen ---- */
.footer-col h4{font-weight:300;}
.detail-meta div span{font-weight:300;}
.about-facts span{font-weight:300;}
.legal-meta{font-weight:300;}

/* --- Scrollbalken wieder einfarbig orange ------------------------------- */
.scroll-progress{background:var(--flame);}