/* Konzept "Backstage": vorne ruhig und groß, dahinter sichtbare Organisation (Ablaufplan-UI, Raster, Ticker).
   Vier Farbwelten über data-p. Bewusst eine feste Markenwelt pro Palette, kein System-Dark-Mode. */
:root{
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --r-lg:14px; --r-md:10px; --r-sm:8px;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* Palette 1 als Basis */
  --bg:#F5EFE6; --surface:#EAE0D1; --ink:#231C17; --muted:#76685A; --line:#D6C8B4;
  --accent:#A8764B; --on-accent:#FBF7F1; --glow:#E7C59D;
  --deep:#231C17; --deep-ink:#F5EFE6; --deep-muted:#BFAE9A; --deep-line:#3a312a;
  color-scheme:light;
}
.site[data-p="1"]{--bg:#F5EFE6;--surface:#EAE0D1;--ink:#231C17;--muted:#76685A;--line:#D6C8B4;--accent:#A8764B;--on-accent:#FBF7F1;--glow:#E7C59D;--deep:#231C17;--deep-ink:#F5EFE6;--deep-muted:#BFAE9A;--deep-line:#3a312a}
.site[data-p="2"]{--bg:#F3F1EA;--surface:#E2E6D9;--ink:#1D2821;--muted:#5D6B60;--line:#CBD3C3;--accent:#4C6A50;--on-accent:#F3F1EA;--glow:#B7CFAE;--deep:#1D2821;--deep-ink:#F3F1EA;--deep-muted:#A9B9A9;--deep-line:#2f3d33}
.site[data-p="3"]{--bg:#0E1A15;--surface:#15261F;--ink:#ECEAE2;--muted:#9DB0A4;--line:#24392F;--accent:#C4E2AE;--on-accent:#0E1A15;--glow:#2F6E4E;--deep:#0A1410;--deep-ink:#ECEAE2;--deep-muted:#9DB0A4;--deep-line:#22372d}
.site[data-p="4"]{--bg:#F4EEE3;--surface:#E7DCC9;--ink:#13261D;--muted:#5F6B5F;--line:#D3C6AF;--accent:#143326;--on-accent:#F4EEE3;--glow:#C9A97A;--deep:#143326;--deep-ink:#F4EEE3;--deep-muted:#B7C3B4;--deep-line:#24483a}

*{box-sizing:border-box}
body{margin:0;background:#F3F1EA;font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.site{background:var(--bg);color:var(--ink);overflow-x:clip;transition:background-color .5s var(--ease),color .5s var(--ease)}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.025em}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;display:inline-flex;align-items:center;gap:10px}
.label::before{content:"";width:22px;height:1px;background:currentColor}

/* Navigation: schwebende Glas-Pille */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;padding-block:12px}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.logo{font-family:var(--display);font-weight:700;font-stretch:112%;font-size:15px;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.logo{display:inline-flex;align-items:center;color:var(--ink)}
.logo-sig{height:48px;width:calc(48px * 316 / 374)}
.logo-full{width:min(380px,100%);aspect-ratio:766/374;height:auto}
.nav-in{padding-block:2px}
.menu{display:none;gap:4px;align-items:center}
.menu a{text-decoration:none;font-size:14px;padding:9px 14px;border-radius:999px;transition:background .2s}
.menu a:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.burger{background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:10px 16px;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.mobile-menu{margin-top:8px;padding:10px;border-radius:var(--r-md);background:var(--bg);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);display:grid}
.mobile-menu a{text-decoration:none;padding:12px 10px;font-size:17px;border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.mobile-menu a:last-child{border:0}
@media(min-width:900px){.menu{display:flex}.burger,.mobile-menu{display:none!important}}

/* Buttons */
.btn{--b:var(--ink);display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--body);padding:16px 22px;border-radius:999px;text-decoration:none;
  background:var(--b);color:var(--bg);border:1px solid var(--b);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn .arr{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg);color:var(--ink);font-size:13px;transition:transform .25s var(--ease)}
@media(hover:hover) and (pointer:fine){
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn:hover .arr{transform:rotate(-45deg)}
}
.btn.ghost{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.menu .btn{padding:11px 16px;font-size:14px;color:var(--bg)}
.menu .btn:hover{background:var(--ink)}

/* Hero */
.hero{position:relative;padding-block:28px 56px;isolation:isolate}
.aura{position:absolute;inset:-10% -20% auto;height:560px;z-index:-1;pointer-events:none;filter:blur(60px);opacity:.75}
.aura i{position:absolute;border-radius:50%;background:var(--glow);animation:drift 18s var(--ease) infinite alternate}
.aura i:nth-child(1){width:46vw;max-width:520px;aspect-ratio:1;left:45%;top:0}
.aura i:nth-child(2){width:30vw;max-width:340px;aspect-ratio:1;left:10%;top:120px;background:color-mix(in srgb,var(--accent) 45%,var(--glow));animation-duration:24s;opacity:.7}
@keyframes drift{to{transform:translate(-8%,12%) scale(1.15)}}
.grid-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 70%)}
.hero-grid{display:grid;gap:40px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);background:color-mix(in srgb,var(--bg) 60%,transparent);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
h1{margin:22px 0 0;font-weight:800;font-stretch:118%;font-size:clamp(2.35rem,9.6vw,6.2rem);line-height:.95;letter-spacing:-.045em;hyphens:manual}
h1 .w{display:inline-block;animation:rise .9s var(--ease) both}
h1 .soft{color:var(--muted);font-weight:500;font-stretch:100%}
@keyframes rise{from{transform:translateY(.35em);filter:blur(6px)}to{transform:none;filter:none}}
.lead{font-size:clamp(1.05rem,2.8vw,1.22rem);max-width:54ch;margin:24px 0 30px;color:color-mix(in srgb,var(--ink) 80%,var(--bg))}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;padding:0;list-style:none}
.facts li{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent)}

/* Backstage-Karte im Hero */
.stage{position:relative;display:grid;gap:12px;align-content:start;min-width:0}
.card{background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:var(--r-lg);padding:20px;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--ink) 35%,transparent)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.card-top strong{font-family:var(--display);font-stretch:110%;font-size:17px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--surface);color:var(--muted)}
.run{list-style:none;margin:0;padding:0;display:grid}
.run li{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px dashed color-mix(in srgb,var(--ink) 14%,transparent);font-size:14.5px}
.run time{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ok{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--accent);color:var(--on-accent)}
.ok.open{background:transparent;border:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent)}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini .card{padding:16px}
.mini b{display:block;font-family:var(--display);font-stretch:115%;font-size:clamp(1.5rem,5vw,2rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mini span{font-size:13px;color:var(--muted)}
.bar{height:6px;border-radius:999px;background:var(--surface);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;width:92%;border-radius:inherit;background:var(--accent);transform-origin:left;animation:fill 1.6s .4s var(--ease) both}
@keyframes fill{from{transform:scaleX(.1)}}
.example{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:2px 4px 0}
@media(min-width:960px){
  .hero{padding-block:56px 96px}
  .hero-grid{grid-template-columns:1.25fr .75fr;align-items:center;gap:56px}
  .stage{transform:rotate(1.5deg)}
}

/* Ticker */
.ticker{border-block:1px solid color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden;padding-block:16px;background:var(--bg)}
.track{display:flex;gap:40px;width:max-content;animation:marquee 38s linear infinite}
.track span{font-family:var(--display);font-stretch:120%;font-weight:600;font-size:clamp(1.1rem,3vw,1.6rem);white-space:nowrap;display:inline-flex;align-items:center;gap:40px}
.track span::after{content:"✦";color:var(--accent);font-size:.7em}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker:hover .track{animation-play-state:paused}

/* Sektionen */
section.s{padding-block:80px}
.head{display:grid;gap:14px;margin-bottom:40px;max-width:720px}
h2{font-weight:800;font-stretch:112%;font-size:clamp(1.9rem,6.2vw,3.6rem);line-height:1;letter-spacing:-.04em}
.head p{margin:0;color:color-mix(in srgb,var(--ink) 75%,var(--bg));max-width:58ch}

/* Zielgruppen */
.groups{display:grid;gap:12px}
@media(min-width:800px){.groups{grid-template-columns:repeat(3,1fr)}}
.group{position:relative;padding:26px;border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);display:grid;gap:12px;align-content:start;min-width:0;transition:transform .35s var(--ease),border-color .35s}
@media(hover:hover) and (pointer:fine){
.group:hover{transform:translateY(-4px);border-color:var(--accent)}
}
.group .mono{color:var(--accent)}
.group h3{font-size:1.4rem;font-weight:700;font-stretch:108%}
.group p{margin:0;color:color-mix(in srgb,var(--ink) 78%,var(--bg))}

/* Bento Leistungen */
.bento{display:grid;gap:12px}
@media(min-width:760px){.bento{grid-template-columns:repeat(6,1fr)}}
.tile{--mx:50%;--my:50%;position:relative;overflow:hidden;border-radius:var(--r-lg);padding:26px;background:var(--surface);display:grid;gap:12px;align-content:start;min-width:0;isolation:isolate;transition:transform .35s var(--ease)}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--glow) 70%,transparent),transparent 60%)}
@media(hover:hover) and (pointer:fine){
.tile:hover::before{opacity:1}
.tile:hover{transform:translateY(-3px)}
}
.tile .mono{color:color-mix(in srgb,var(--muted) 70%,var(--ink))}
.tile h3{font-size:clamp(1.3rem,3.6vw,1.7rem);font-weight:700;font-stretch:108%;line-height:1.1;hyphens:auto}
.tile p{margin:0;color:color-mix(in srgb,var(--ink) 80%,var(--bg))}
.tile ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.tile li{font-size:12.5px;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.tile.hero-tile{background:var(--deep);color:var(--deep-ink)}
.tile.hero-tile p{color:var(--deep-muted)}
.tile.hero-tile .mono{color:var(--glow)}
.site[data-p="4"] .tile.hero-tile .mono{color:var(--glow)}
.tile.hero-tile li{background:color-mix(in srgb,var(--deep-ink) 10%,transparent)}
.tile.hero-tile::before{background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--glow) 40%,transparent),transparent 60%)}
.tile .go{justify-self:start;margin-top:6px;font-weight:600;font-size:14px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
@media(min-width:760px){
  .t1{grid-column:span 4;grid-row:span 2;padding:34px}
  .t1 h3{font-size:clamp(1.8rem,3.4vw,2.6rem)}
  .t2{grid-column:span 2;grid-row:span 2}
  .t3,.t4,.t5{grid-column:span 2}
  .t6{grid-column:span 6;grid-template-columns:auto 1fr 1.6fr;align-items:baseline;gap:24px}
}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.pill-row span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
.pill-row span b{color:var(--accent);font-weight:500}

/* Case */
.case{background:var(--deep);color:var(--deep-ink);border-radius:var(--r-lg);padding:28px;display:grid;gap:28px;overflow:hidden;position:relative}
.case .label{color:var(--deep-muted)}
.big-word{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(3.2rem,16vw,10rem);line-height:.85;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--deep-ink) 55%,transparent);margin:0;white-space:nowrap}
.case h3{font-size:clamp(1.5rem,4vw,2.2rem);font-stretch:112%;font-weight:800}
.case p{margin:0;color:var(--deep-muted);max-width:56ch}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:t}
.timeline li{counter-increment:t;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;padding:14px 0;border-top:1px solid var(--deep-line)}
.timeline li::before{content:"0" counter(t);font-family:var(--mono);font-size:12px;color:var(--accent)}
.site[data-p="4"] .timeline li::before{color:var(--glow)}
.timeline b{font-family:var(--display);font-stretch:110%;font-weight:600}
.timeline span{display:block;font-size:14px;color:var(--deep-muted)}
.case .btn{--b:var(--deep-ink);color:var(--deep);justify-self:start}
.case .btn .arr{background:var(--deep);color:var(--deep-ink)}
@media(min-width:900px){.case{grid-template-columns:1.1fr .9fr;padding:48px;align-items:end}.case .big-word{grid-column:1/-1}}

/* Kundenstimmen */
.tms{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.tm{scroll-snap-align:start;margin:0;border-radius:var(--r-lg);padding:26px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);display:grid;gap:18px;align-content:space-between;min-width:0;background:color-mix(in srgb,var(--surface) 40%,transparent)}
.tm-logo{height:38px;width:116px;border:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);border-radius:10px;display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tm blockquote{margin:0;font-size:16px;line-height:1.55}
.tm blockquote::before{content:"“";display:block;font-family:var(--display);font-size:56px;line-height:.6;color:var(--accent);margin-bottom:8px}
.tm figcaption{display:grid;font-size:14px}
.tm figcaption span{color:var(--muted);font-size:13px}
@media(min-width:900px){.tms{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(6,1fr);overflow:visible}.tm{grid-column:span 2}.tm:nth-child(-n+2){grid-column:span 3}}

/* Ablauf */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
@media(min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{counter-increment:s;position:relative;padding:24px;border-radius:var(--r-lg);background:var(--surface);display:grid;gap:10px;align-content:start;min-width:0}
.step::before{content:"0" counter(s);font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.06em}
.site[data-p="4"] .step::before{color:var(--ink)}
.step h3{font-size:1.25rem;font-stretch:110%;font-weight:700}
.step p{margin:0;font-size:15px;color:color-mix(in srgb,var(--ink) 78%,var(--bg))}

/* Über mich */
.about{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.about{grid-template-columns:.85fr 1.15fr;gap:64px}}
.portrait{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--glow) 60%,var(--surface)));display:grid;place-items:end start;padding:18px}
.portrait em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--bg);padding:7px 11px;border-radius:999px}
.langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.langs span{padding:8px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);font-size:14px}
.about p{margin:0 0 14px;max-width:58ch}
.about h2{margin:14px 0 22px}

/* Vietnamesisch */
.vi{border-radius:var(--r-lg);padding:28px;display:grid;gap:16px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--glow) 35%,transparent),transparent 60%)}
@media(min-width:860px){.vi{grid-template-columns:220px 1fr;padding:44px}}
.vi h2{font-size:clamp(1.6rem,4.5vw,2.4rem);margin-bottom:12px}
.vi p:not(.label){margin:0 0 22px;max-width:60ch}

/* Kontakt */
.contact{background:var(--deep);color:var(--deep-ink);border-radius:var(--r-lg);padding:28px;display:grid;gap:36px;position:relative;overflow:hidden;isolation:isolate}
.contact::after{content:"";position:absolute;width:520px;aspect-ratio:1;right:-160px;top:-200px;border-radius:50%;background:var(--glow);filter:blur(90px);opacity:.18;z-index:-1}
.contact .label{color:var(--deep-muted)}
.contact h2{margin-top:14px}
.contact .intro p{color:var(--deep-muted);margin:18px 0 0;max-width:46ch}
@media(min-width:960px){.contact{grid-template-columns:.9fr 1.1fr;padding:56px;gap:56px}}
form{display:grid;gap:14px;min-width:0}
.row2{display:grid;gap:14px}
@media(min-width:600px){.row2{grid-template-columns:1fr 1fr}}
label{display:grid;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--deep-muted);min-width:0}
input,select,textarea{font:16px/1.4 var(--body);text-transform:none;letter-spacing:0;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--deep-line);background:color-mix(in srgb,var(--deep-ink) 6%,transparent);color:var(--deep-ink);width:100%;min-width:0;transition:border-color .2s}
select option{color:#111}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--deep-ink) 70%,transparent)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--glow)}
textarea{min-height:120px;resize:vertical}
.contact .btn{--b:var(--deep-ink);color:var(--deep);justify-self:start}
.contact .btn .arr{background:var(--deep);color:var(--deep-ink)}
.note{font-size:13px;color:var(--deep-muted);margin:0}
.sent{background:var(--deep-ink);color:var(--deep);padding:14px 16px;border-radius:var(--r-sm);font-size:14px;margin:0}

/* Footer */
.foot{padding-block:56px 32px}
.foot-top{display:grid;gap:24px}
@media(min-width:800px){.foot-top{grid-template-columns:1fr auto;align-items:end}}
.foot nav{display:flex;flex-wrap:wrap;gap:0 22px;font-size:14px}
.foot nav a{text-decoration:none;display:inline-block;padding-block:8px}
.foot nav a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-word{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:clamp(1.5rem,7.4vw,6.8rem);line-height:.85;letter-spacing:-.055em;margin:40px 0 0;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 60%,transparent);white-space:nowrap;overflow:hidden}
.copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Scroll-Animation: nur Bewegung, Inhalt bleibt immer sichtbar */
@supports (animation-timeline:view()){
  .reveal{animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  @keyframes up{from{transform:translateY(40px) scale(.98)}to{transform:none}}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Referenzen / Portfolio */
.pf-filter{display:flex;flex-wrap:wrap;gap:8px;margin:40px 0 16px}
.pf-filter button{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:transparent;color:var(--ink);cursor:pointer}
.pf-filter button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pf-grid{display:grid;grid-auto-flow:column;grid-auto-columns:68%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:thin}
@media(min-width:620px){.pf-grid{grid-auto-columns:40%}}
@media(min-width:960px){.pf-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,1fr);overflow:visible;gap:28px 20px}}
.pf{scroll-snap-align:start;display:grid;gap:12px;align-content:start;min-width:0}
.pf-label{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.pf-label b{color:var(--accent);font-weight:500}
.pf-label b,.pf-label span{display:block}
.phone{position:relative;width:min(100%,240px);margin-inline:auto;aspect-ratio:9/19;border-radius:34px;padding:7px;background:var(--deep);box-shadow:0 24px 40px -22px color-mix(in srgb,var(--ink) 55%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--deep-ink) 18%,transparent);transition:transform .35s var(--ease)}
.phone::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);width:30%;height:16px;border-radius:999px;background:var(--deep);z-index:2}
.phone-screen{position:relative;height:100%;border-radius:27px;overflow:hidden;background:var(--surface)}
.phone-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
@media(hover:hover) and (pointer:fine){
.pf:hover .phone{transform:translateY(-6px) rotate(-1deg)}
}
.phone-gen{height:100%;display:grid;align-content:end;gap:10px;padding:22px 18px 28px;background:linear-gradient(165deg,var(--glow),var(--surface) 55%,var(--bg))}
.phone-gen .mono{color:var(--accent);font-size:10.5px}
.phone-gen strong{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.35rem;line-height:1.05;letter-spacing:-.03em;hyphens:auto}
.phone-gen i{display:block;height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.phone-gen i:nth-of-type(2){width:80%}.phone-gen i:nth-of-type(3){width:60%}
.pf h3{font-size:1.15rem;font-weight:700;font-stretch:108%;line-height:1.2;text-align:center;margin-top:6px;hyphens:auto}
.pf ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.pf li{font-size:14px;padding-left:14px;position:relative;color:color-mix(in srgb,var(--ink) 80%,var(--bg))}
.pf li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1px;background:var(--accent)}
.pf[hidden]{display:none}

/* Bildband "Gesehen werden" */
.visual{padding-block:0 56px}
.visual-in{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--surface)}
@media(min-width:701px){.visual-in{aspect-ratio:1408/768}}
.visual-in img{display:block;width:100%;height:100%;object-fit:cover}
.visual-in figcaption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:22px;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--deep) 45%,transparent),transparent 45%)}
.visual-word{font-family:var(--display);font-weight:800;font-stretch:118%;font-size:clamp(2rem,7vw,5rem);line-height:.95;letter-spacing:-.045em;color:#F3F1EA;margin:0;max-width:9ch}
.visual-sub{margin:10px 0 0;color:#F3F1EA;max-width:30ch;font-size:clamp(.95rem,2.2vw,1.1rem)}
.visual-credit{align-self:flex-end;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#F3F1EA;opacity:.8;background:color-mix(in srgb,var(--deep) 45%,transparent);padding:4px 8px;border-radius:999px}
@media(min-width:701px){.visual-in figcaption{padding:44px}}

/* Formular-Ergänzungen */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.note a{color:inherit}
.sent.err{background:#7a2e2e;color:#fff}

/* Rechtstexte */
.legal{padding-block:40px 80px}
.legal h1{font-size:clamp(2rem,6vw,3.4rem);margin:24px 0 32px}
.legal h2{font-size:1.4rem;letter-spacing:-.02em;margin:36px 0 10px;font-stretch:108%}
.legal .todo{background:#fff3c4;color:#4a3b00;padding:1px 6px;border-radius:4px}
.claim-add{margin:14px 0 0;font-family:var(--display);font-weight:600;font-stretch:110%;font-size:clamp(1.15rem,3.4vw,1.7rem);letter-spacing:-.02em;color:var(--accent)}

/* Über mich: Polaroids */
.polas{position:relative;width:min(100%,400px);margin-inline:auto;padding:26px 18px 10px}
.pola{margin:0;background:#FBFAF6;padding:14px 14px 0;border-radius:6px;box-shadow:0 22px 40px -18px color-mix(in srgb,var(--ink) 45%,transparent),0 2px 6px color-mix(in srgb,var(--ink) 12%,transparent)}
.pola-front{position:relative;z-index:2;transform:rotate(-3deg)}
.pola-front::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:28px;transform:translateX(-50%) rotate(2deg);background:color-mix(in srgb,#fff 55%,transparent);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.pola-back{position:absolute;inset:0 0 auto auto;width:62%;z-index:1;transform:translate(10%,-4%) rotate(6deg);opacity:.95}
.pola-back .pola-img{aspect-ratio:1}
.pola-img{aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--glow) 60%,var(--surface)))}
.pola-img img{display:block;width:100%;height:100%;object-fit:cover}
.pola-ph{display:grid;place-items:center}
.pola-ph em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--bg);padding:7px 11px;border-radius:999px}
.pola figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px 12px;color:#1D2821}
.pola-sig{height:46px;width:calc(46px * 316 / 374);color:#1D2821}
.pola figcaption span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#5D6B60}
.pola-back figcaption{display:none}
.about .polas{transition:transform .5s var(--ease)}
@media(hover:hover) and (pointer:fine){
.about:hover .pola-front{transform:rotate(-1.5deg)}
}
.pola-front{transition:transform .5s var(--ease)}

/* Harmonisierung modern + Polaroid: weniger Rundung, Papierkorn, ruhigere Flächen */
.site{position:relative}
.site::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.aura{opacity:.45}
.card{backdrop-filter:none;-webkit-backdrop-filter:none;background:#FBFAF6;box-shadow:0 18px 36px -22px color-mix(in srgb,var(--ink) 40%,transparent)}
.tile,.step,.group{box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
.pola-front::before{background:color-mix(in srgb,#EFE9DA 75%,transparent)}

/* Hero: Benachrichtigungs-Stapel */
.notis{transform:none!important;padding:22px 14px 8px;border-radius:30px;background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface));box-shadow:0 30px 60px -34px color-mix(in srgb,var(--ink) 45%,transparent)}
.notis-time{margin:0 0 14px;text-align:center;font-family:var(--display);font-weight:700;font-stretch:110%;font-size:clamp(2.2rem,7vw,3rem);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.noti-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.noti{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,#FBFAF6 88%,transparent);box-shadow:0 8px 20px -14px color-mix(in srgb,var(--ink) 50%,transparent);animation:notiIn .7s var(--ease) both}
.noti:nth-child(1){animation-delay:.3s}.noti:nth-child(2){animation-delay:.9s}.noti:nth-child(3){animation-delay:1.5s}.noti:nth-child(4){animation-delay:2.1s}
@keyframes notiIn{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
.noti p{margin:0}
.noti-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#FBFAF6}
.noti-ic svg{width:20px;height:20px}
.ic-mail{background:var(--accent)}.ic-reel{background:#1D2821}.ic-cal{background:#7E9B7A}.ic-doc{background:#A8764B}
.noti-app{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.noti-t{font-weight:600;font-size:14.5px;line-height:1.3;margin-top:2px!important}
.noti-b{font-size:13.5px;color:color-mix(in srgb,var(--ink) 72%,var(--bg));line-height:1.35}
.notis .example{text-align:center;margin:10px 0 0}
@media(min-width:960px){.notis{transform:rotate(1.5deg)!important}}

/* Logo im Menü grösser */
.logo-sig{height:62px;width:calc(62px * 316 / 374)}
.nav-in{padding-block:4px}
@media(min-width:900px){.logo-sig{height:70px;width:calc(70px * 316 / 374)}}

/* Fix: grosses Wort in der Case-Box darf die Spalte nicht verbreitern */
.case{grid-template-columns:minmax(0,1fr)}
.case>*{min-width:0}
.case .big-word{max-width:100%;overflow:hidden}
@media(min-width:900px){.case{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}

/* Header: Signatur + Schriftzug */
.logo{gap:10px;align-items:flex-end}
.logo-word{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;line-height:1;padding-bottom:13px;color:var(--ink);white-space:nowrap}
@media(min-width:900px){.logo-word{font-size:12px;padding-bottom:15px}}
/* Schriftzug auf Höhe von "ai" (liegt bei ca. 61,5 % der Signaturhöhe) */
.logo{--sig:62px;align-items:flex-start}
.logo-sig{height:var(--sig);width:calc(var(--sig) * 316 / 374)}
.logo-word{padding-bottom:0;margin-top:calc(var(--sig) * .615 - .51em)}
@media(min-width:900px){.logo{--sig:70px}}

/* Logo-Symbol: Lichtkegel hinter der Signatur */
.logo-beam{position:relative;display:inline-flex;isolation:isolate}
.logo-beam .beam{position:absolute;z-index:-1;left:50%;top:-10px;transform:translateX(-50%);width:calc(var(--sig) * 1.25);height:calc(var(--sig) + 10px);
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 95%,transparent),transparent 92%);filter:blur(1px);pointer-events:none}
.nav-in{overflow:hidden}

/* Headline maximal 85 px (Entscheidung Mai) */
h1{font-size:clamp(2.35rem,9.6vw,85px)}
h1 .soft{font-size:clamp(2.1rem,8.6vw,76px)}

/* Sprungmarken: Abstand für die fixierte Navigation */
html{scroll-padding-top:112px;scroll-behavior:smooth}
@media(min-width:900px){html{scroll-padding-top:124px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.notis{padding-bottom:14px}

/* Pfeil im CTA: kräftig als SVG */
.arr-svg{display:block;width:12px;height:12px}

/* Leistungen: Links als Buttons */
.tile .go{display:inline-flex;align-items:center;gap:10px;justify-self:start;margin-top:10px;padding:12px 14px 12px 18px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;line-height:1;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tile .go .arr{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg);color:var(--ink);transition:transform .25s var(--ease)}
@media(hover:hover) and (pointer:fine){
.tile .go:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.tile .go:hover .arr{transform:rotate(-45deg)}
}
.tile.hero-tile .go{background:var(--deep-ink);color:var(--deep)}
.tile.hero-tile .go .arr{background:var(--deep);color:var(--deep-ink)}

/* Sprachumschalter */
.lang{display:flex;gap:2px;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--ink) 6%,transparent);margin-left:auto}
.lang a{font-size:12px;font-weight:600;letter-spacing:.06em;text-decoration:none;padding:7px 9px;border-radius:999px;color:color-mix(in srgb,var(--muted) 70%,var(--ink));transition:background .2s,color .2s;line-height:1}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="page"]{background:var(--ink);color:var(--bg)}
@media(min-width:900px){.lang{margin-left:6px}}
@media(min-width:900px){.menu{margin-left:auto}}
/* Sprachumschalter am Handy im Menü, im Kopf erst ab Tablet */
.lang-mobil{justify-self:start;margin:4px 0 10px}
.lang-mobil a{font-size:14px;padding:9px 13px}
.lang-kopf{display:none}
@media(min-width:600px){.lang-kopf{display:flex}.lang-mobil{display:none}}
/* Vietnamesisch: mehr Zeilenhöhe, damit sich Akzente nicht berühren */
html[lang="vi"] h1{line-height:1.12}
html[lang="vi"] h2,html[lang="vi"] .visual-word,html[lang="vi"] .foot-word{line-height:1.15}
html[lang="vi"] .tile h3,html[lang="vi"] .pf h3{line-height:1.25}
/* Sprachumschalter links neben "Projekt anfragen" (nur Desktop), sonst im Handy-Menü */
.menu .lang{margin:0 6px 0 4px}
@media(max-width:899px){.lang-kopf{display:none}.lang-mobil{display:flex}}
@media(min-width:900px){.lang-kopf{display:flex}.lang-mobil{display:none}}

/* Platz für das Logo in der Case Study */
.case-logo{width:160px;height:72px;display:grid;place-items:center;border:1px dashed color-mix(in srgb,var(--deep-ink) 35%,transparent);border-radius:var(--r-sm);color:var(--deep-muted);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.case-logo img{max-width:100%;max-height:100%;object-fit:contain}
.case-logo:has(img){border:0}
.case-logo:has(img){width:auto;height:96px;justify-content:start;place-items:center start}
.case-logo img{height:96px;width:auto;max-height:none}

/* Case Study: Kopf mit Logo, Label und Titel nebeneinander */
.case{align-items:start}
.case-main{display:grid;gap:22px;align-content:start;min-width:0}
.case-head{display:flex;align-items:center;gap:22px;padding-bottom:22px;border-bottom:1px solid var(--deep-line)}
.case-logo-img{height:84px;width:auto;flex:none}
.case-head h3{margin-top:8px}
.case .case-intro{font-size:15px;color:color-mix(in srgb,var(--deep-muted) 85%,transparent)}
@media(max-width:560px){.case-head{flex-direction:column;align-items:flex-start;gap:16px}.case-logo-img{height:72px}}
@media(min-width:900px){.case{align-items:start}.case .timeline{margin-top:8px}}
/* Volles Menü erst ab 1080 px, darunter Burger-Menü (verhindert Umbrüche) */
@media(max-width:1079px){
  .menu{display:none!important}
  .burger{display:inline-block!important}
  .mobile-menu:not([hidden]){display:grid!important}
  .lang-kopf{display:none!important}
  .lang-mobil{display:flex!important}
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* FAQ */
.faq{display:grid;gap:10px;max-width:860px}
.faq-item{border-radius:var(--r-lg);background:var(--surface);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;min-height:48px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{margin:0;font-size:1.1rem;font-stretch:110%;font-weight:700}
.faq-item summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq-item p{margin:0;padding:0 24px 22px;font-size:15px;color:color-mix(in srgb,var(--ink) 78%,var(--bg))}

.legal h3{font-size:1.1rem;font-stretch:108%;margin:26px 0 8px}
.legal h4{font-size:1rem;font-family:var(--body);font-weight:600;margin:18px 0 6px}
.legal ul{padding-left:1.2em;display:grid;gap:8px}
.legal a{overflow-wrap:anywhere}
.legal-src{margin-top:40px;font-size:14px;color:var(--muted)}

/* Navigation: Label-Stil mit Nummern (Variante B, Mai 10.10.2026) */
.menu{counter-reset:n}
.menu>a:not(.btn){counter-increment:n;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.menu>a:not(.btn)::before{content:"0" counter(n);color:var(--accent);margin-right:7px;font-size:11px;letter-spacing:.04em}
.mobile-menu{counter-reset:m}
.mobile-menu>a{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.mobile-menu>a:not(:last-child){counter-increment:m}
.mobile-menu>a:not(:last-child)::before{content:"0" counter(m);color:var(--accent);margin-right:10px;font-size:12px;letter-spacing:.04em}

/* Case Study: gleicher Licht-Effekt wie bei den Leistungs-Kacheln (Mai, 10.10.2026) */
.case{--mx:50%;--my:50%;isolation:isolate;transition:transform .35s var(--ease)}
.case::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(560px circle at var(--mx) var(--my),color-mix(in srgb,var(--glow) 18%,transparent),transparent 60%)}
@media(hover:hover) and (pointer:fine){
.case:hover::before{opacity:1}
.case:hover{transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){.case,.case:hover{transition:none;transform:none}}

/* Mobiles Menü: "Projekt anfragen" als Button wie auf dem Desktop (Mai, 10.10.2026) */
.mobile-menu>a.btn{justify-self:start;margin-top:12px;padding:13px 18px;border:0;font-size:15px;letter-spacing:0;text-transform:none;color:var(--bg)}
.mobile-menu>a.btn::before{content:none}

/* Dunkle Leistungs-Kachel: Lichtkegel dezent, damit der Text lesbar bleibt (Kontrast min. 4,5:1) */
.tile.hero-tile::before{background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--glow) 18%,transparent),transparent 60%)}

/* Über mich ohne Fotos (vorübergehend, bis die Polaroid-Fotos da sind) */
.about.about-ohne-fotos{grid-template-columns:1fr}

/* Pflichtfelder im Formular (12.10.2026): Stern hinter der Beschriftung, Hinweis über dem Formular */
.lbl{display:inline}
.req{color:var(--deep-ink);margin-left:3px;font-weight:600}
.req-note{font-size:13px;color:var(--deep-muted);margin:0}

/* Mobile-Nachjustierung 13.10.2026
   1. Referenzen: Platz für vier Zeilen über dem Mockup, Text unten bündig, damit alle Mockups auf einer Linie starten (auch VI)
   2. Bewegende Hover-Effekte nur bei Maus (oben in @media(hover:hover) and (pointer:fine)), damit sie auf Touch-Geräten nicht hängen bleiben */
@media(max-width:959px){.pf-label{min-height:calc(4 * 1.6em);display:flex;flex-direction:column;justify-content:flex-end}}