/* GOLDSTEIN.DIGITAL – Designsystem 2026 (staging)
   Signatur: «Delta» – das Dreieck mit Kreuz als typografischer Marker (▲+),
   dazu die Spektrum-Linie als 2px-Haarlinie aller netvalue-Marken. */

@font-face{font-family:"Inter";src:url(/assets/fonts/Inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(/assets/fonts/Inter-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBMPlexMono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/Fraunces-Variable-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBMPlexMono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light dark;
  /* Marke */
  --digital:#E23A80; --shop:#1E3A8A;
  --spektrum:linear-gradient(90deg,#E23A80 0 12.5%,#3B5BC4 12.5% 25%,#0E9BA4 25% 37.5%,#2E9E5B 37.5% 50%,#C9A24B 50% 62.5%,#D8232A 62.5% 75%,#6B7280 75% 87.5%,#6E5F4B 87.5% 100%);
  /* Hell (Papier) – Kontraste gegen --bg #F7F6F2 */
  --bg:#F7F6F2;        /* Grund */
  --bg-2:#EFEDE7;      /* Flächenwechsel */
  --bg-3:#E6E3DB;      /* Kachel-Platzhalter */
  --fg:#15181D;        /* 16.9:1 */
  --fg-2:#565B63;      /* 6.6:1 */
  --accent:#B8195F;    /* Magenta-Text 6.0:1 (AA) */
  --accent-fill:var(--digital); /* Flächen/Logo, nie Fliesstext */
  --on-accent:#fff;
  --on-accent-text:#fff; /* Text auf --accent */
  --line:rgba(21,24,29,.12);
  --line-2:rgba(21,24,29,.45); /* 3:1 für Bedienelement-Ränder */
  --glass:rgba(247,246,242,.62);
  --glass-solid:#F7F6F2;
  --glass-edge:rgba(255,255,255,.7);
  --shadow:0 10px 40px -12px rgba(21,24,29,.18);
  /* Typo – fluid zwischen 320 und 1600px */
  --f-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono","SF Mono",ui-monospace,monospace;
  --t-mega:clamp(3.25rem,1.6rem + 8.2vw,11rem);
  --t-xxl:clamp(2.5rem,1.4rem + 5.4vw,7rem);
  --t-xl:clamp(2rem,1.3rem + 3.3vw,4.5rem);
  --t-l:clamp(1.5rem,1.15rem + 1.6vw,2.6rem);
  --t-m:clamp(1.2rem,1.05rem + .65vw,1.6rem);
  --t-body:clamp(1rem,.96rem + .2vw,1.125rem);
  --t-s:.9375rem; --t-xs:.8125rem;
  --t-wordmark:clamp(3rem,1rem + 10.5vw,15rem); --t-404:clamp(6rem,3rem + 20vw,22rem); /* Sonder-Display, nur je 1x */
  /* Raster & Abstände (8er-Basis) */
  --gutter:clamp(16px,3.2vw,48px);
  --col-gap:clamp(12px,1.6vw,24px);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:clamp(96px,12vw,176px);
  --maxw:1680px;
  /* Radien (konzentrisch: aussen = innen + Abstand) */
  --r-s:10px;--r-m:16px;--r-l:24px;--r-pill:999px;
  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --d-1:160ms;--d-2:320ms;--d-3:640ms;--d-4:1000ms;
  --nav-h:64px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0B0E12;--bg-2:#12161C;--bg-3:#1A2028;
  --fg:#F7F6F2;        /* 18.3:1 */
  --fg-2:#A8ACB3;      /* 8.6:1 */
  --accent:#F06CA4;    /* 6.8:1 */
  --line:rgba(247,246,242,.12);--line-2:rgba(247,246,242,.40);--on-accent-text:#0B0E12;
  --glass:rgba(18,22,28,.7);--glass-solid:#12161C;--glass-edge:rgba(247,246,242,.18);
  --shadow:0 12px 48px -12px rgba(0,0,0,.6);
}}
@media (prefers-contrast:more){:root{--fg-2:var(--fg);--line-2:var(--fg);--line:var(--line-2);--glass:var(--glass-solid)}
  .pills .count{opacity:1}.status,.tile__reveal{border:1px solid var(--fg)}}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--t-body)/1.55 var(--f-sans);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0}
::selection{background:var(--digital);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:var(--r-pill);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.mono,.eyebrow{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.02em;text-transform:uppercase;font-weight:500}
.eyebrow{color:var(--fg-2);display:inline-flex;align-items:center;gap:10px}
.accent{color:var(--accent)}
.spektrum{height:2px;background:var(--spektrum);border:0;margin:0}

/* Signatur: Delta-Marker */
/* Markensymbol (Kreuz Variante B, wie Logo) als eigenständiges Element */
:root{--mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -206.18 270.51 234.26'%3E%3Cpath fill='%23E23A80' d='M135.25-206.18L0 28.09L270.51 28.09Z'/%3E%3Cpath fill='%23fff' d='M124.67-100H145.84V-60.58H185.25V-39.42H145.84V0H124.67V-39.42H85.25V-60.58H124.67Z'/%3E%3C/svg%3E")}
.delta{display:inline-block;height:.64em;width:auto;aspect-ratio:270.51/234.26;flex:none;background:var(--mark) no-repeat center/contain;position:relative;vertical-align:baseline}


/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:baseline;gap:.434em;text-decoration:none;font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 72;font-optical-sizing:none;font-weight:600;letter-spacing:.05em;font-size:1.125rem;min-height:44px;white-space:nowrap}
/* Logo-Aufbau nach CD 2026 (GOLDSTEIN.SHOP): Fraunces 600/opsz 72, Versalhöhe H=0.7em; Symbol 2.3426H hoch, Schwerpunkt auf H/2, Kreuz = H exakt, Abstand 0.62H */
.logo svg{flex:none;height:1.6398em;width:auto;aspect-ratio:270.51/234.26;align-self:baseline;position:relative;top:.1966em}
.logo b{font-weight:600}.logo span{color:var(--accent);font-weight:600}
.logo .logo__word{display:inline-flex;align-items:baseline;color:inherit}.logo .logo__suffix{font-weight:500;letter-spacing:.06em}.logo .logo__word span{color:var(--accent)}
.muted{color:var(--fg-2)}
.footer__addr{font-style:normal;color:var(--fg-2);margin-top:12px;text-transform:none;line-height:1.6}

/* ---------- Header / Liquid-Glass-Nav (nur Funktionsebene) ---------- */
.site-header{position:fixed;inset:12px 0 auto;z-index:50;pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h);padding:0 8px 0 18px;max-width:calc(var(--maxw) - 2*var(--gutter));margin-inline:var(--gutter);border-radius:var(--r-pill);
  background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--line);box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow);transition:transform var(--d-2) var(--ease-out),background var(--d-2)}
@media (min-width:1776px){.nav{margin-inline:auto}}
.site-header.is-hidden .nav{transform:translateY(calc(-100% - 24px))}
.nav__links{display:flex;gap:2px;list-style:none}
.nav__links a,.nav__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);text-decoration:none;font-size:var(--t-s);font-weight:500;transition:background var(--d-1)}
.nav__links a:hover{background:var(--line)}
.nav__links a[aria-current]{background:var(--fg);color:var(--bg)}
.nav__cta[aria-current="page"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent-fill)}
.mobile-menu a[aria-current]{color:var(--accent)}
.nav__cta{background:var(--accent);color:var(--on-accent-text);font-weight:650}
.nav__cta:hover{filter:brightness(1.08)}
.nav__toggle{display:none;width:48px;height:48px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;position:relative}
.nav__toggle span,.nav__toggle::before{content:"";position:absolute;left:14px;right:14px;height:2px;background:currentColor;border-radius:2px;transition:transform var(--d-2) var(--ease-out)}
.nav__toggle::before{top:19px}.nav__toggle span{top:27px}
.nav__toggle[aria-expanded="true"]::before{transform:translateY(4px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span{transform:translateY(-4px) rotate(-45deg)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav,.pills,.dock{background:var(--glass-solid)}}
@media (prefers-reduced-transparency:reduce){.nav,.pills,.dock,.mobile-menu{background:var(--glass-solid)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

@media (max-width:860px){
  .js .nav__links,.js .nav__cta{display:none}
  .js .nav__toggle{display:block}
  .nav{padding-right:6px}
  html:not(.js) .nav{height:auto;flex-wrap:wrap;padding:8px 12px;border-radius:var(--r-l)}
  html:not(.js) .nav__links{flex-wrap:wrap}
}
.mobile-menu{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--glass-solid) 92%,transparent);-webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4);padding:calc(var(--nav-h) + 48px) var(--gutter) 32px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transition:opacity var(--d-2) var(--ease-out),visibility 0s linear var(--d-2)}
.mobile-menu.is-open{opacity:1;visibility:visible;transition-delay:0s}
.mobile-menu ul{list-style:none}
.mobile-menu li a{display:block;font-size:var(--t-xl);font-weight:650;letter-spacing:-.04em;text-decoration:none;padding:6px 0;line-height:1.1}
.mobile-menu .mono a{text-decoration:none;display:flex;align-items:center;min-height:44px}
body.menu-open{overflow:hidden}

/* ---------- Hero ---------- */
main{display:block}
.hero{padding-top:calc(var(--nav-h) + clamp(48px,7vw,112px));padding-bottom:var(--s8)}
.hero__eyebrow{margin-bottom:var(--s6)}
.hero__title{font-size:var(--t-mega);font-weight:650;letter-spacing:-.055em;line-height:.9;grid-column:1/-1}
.hero__title .line{display:block}
.hero__title em{font-style:normal;color:var(--accent)}
.hero__meta{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line)}
.hero__lede{grid-column:1/span 6;font-size:var(--t-m);line-height:1.4;letter-spacing:-.01em}
.hero__facts{grid-column:8/-1;list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;color:var(--fg-2)}
@media (max-width:860px){.hero__lede,.hero__facts{grid-column:1/-1}.hero__facts{margin-top:var(--s5)}}

/* Ticker (sparsam, pausiert bei reduced-motion) */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;white-space:nowrap}
.ticker__track{display:inline-flex;gap:48px;animation:tick 60s linear infinite;padding-left:48px}
.ticker__track span{display:inline-flex;align-items:center;gap:48px;font-size:var(--t-l);font-weight:650;letter-spacing:-.03em}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Sektionen ---------- */
.section{padding-block:var(--s10)}
.section--alt{background:var(--bg-2)}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:var(--s8)}
.section__title{font-size:var(--t-xxl);letter-spacing:-.05em;line-height:.95}
.section__kicker{display:flex;align-items:center;gap:12px;margin-bottom:var(--s5)}
.link-arrow{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:650;text-decoration:none;border-bottom:1px solid currentColor}
.link-arrow::after{content:"→";transition:transform var(--d-2) var(--ease-out)}
.link-arrow:hover::after{transform:translateX(4px)}

/* Featured */
.featured{display:block;text-decoration:none;position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--bg-3)}
.featured img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform var(--d-4) var(--ease-out)}
.featured:hover img{transform:scale(1.03)}
.featured__cap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:var(--s5) 0 0}
.featured__cap h3{font-size:var(--t-l)}

/* ---------- Filter-Pille (Glas, schwebend) ---------- */
.filterbar{position:sticky;top:calc(var(--nav-h) + 24px);z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:var(--s7);pointer-events:none}
.pills{pointer-events:auto;display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--glass-edge),var(--shadow);max-width:100%;overflow-x:auto;scrollbar-width:none}
.pills button,.pills a{appearance:none;border:0;background:transparent;color:inherit;font:500 var(--t-s)/1 var(--f-sans);min-height:44px;padding:0 16px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.pills button:hover{background:var(--line)}
.pills [aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.pills .count{font-family:var(--f-mono);font-size:.75rem;opacity:.72}
.pills button:focus-visible,.pills a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 5px var(--bg)}
@media (max-width:767px){.filterbar{position:static}}
.work-grid{scroll-margin-top:calc(var(--nav-h) + 96px)}
.filterbar:not(.is-enhanced) .pills{display:none}

/* ---------- Work-Raster ---------- */
.work-grid{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s8) var(--col-gap)}
.work-grid>li{grid-column:span 6}
.work-grid>li:nth-child(even){margin-top:clamp(0px,6vw,96px)}
@media (max-width:760px){.work-grid>li{grid-column:1/-1!important;margin-top:0!important}.work-grid{row-gap:var(--s7)}}
.tile{display:block;text-decoration:none;color:inherit}
.tile__media{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--bg-3);aspect-ratio:4/3;isolation:isolate}
.tile__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-4) var(--ease-out),filter var(--d-3)}
.tile:hover .tile__media img,.tile:focus-visible .tile__media img{transform:scale(1.04)}
.tile__reveal{position:absolute;inset:auto 16px 16px 16px;padding:16px 18px;border-radius:var(--r-m);background:rgba(11,14,18,.9);color:#F7F6F2;font-size:var(--t-s);line-height:1.45;transform:translateY(calc(100% + 24px));transition:transform var(--d-3) var(--ease-out)}
.tile:hover .tile__reveal,.tile:focus-visible .tile__reveal{transform:none}
@media (hover:none){.tile__reveal{display:none}}
.tile__body{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:18px}
.tile__title{font-size:var(--t-m);letter-spacing:-.03em;line-height:1.15}
.tile__title::after{content:"→";display:inline-block;margin-left:.35em;opacity:0;transform:translateX(-8px);transition:opacity var(--d-2),transform var(--d-3) var(--ease-out)}
.tile:hover .tile__title::after,.tile:focus-visible .tile__title::after{opacity:1;transform:none}
.tile__sub{color:var(--fg-2);font-size:var(--t-s);margin-top:6px;max-width:52ch}
.tile__meta{flex:0 1 auto;min-width:0;text-align:right;color:var(--fg-2)}
@media (max-width:480px){.tile__body{flex-direction:column;gap:8px}.tile__meta{text-align:left}}
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;font-weight:500;padding:6px 10px;border-radius:var(--r-pill);background:var(--bg);color:var(--fg);position:absolute;top:16px;left:16px;z-index:2}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-fill)}
.status--live::before{background:#2E9E5B}
/* Hochformat-Screens (Apps) auf Bühne */
.tile__media--device{display:flex;align-items:flex-end;justify-content:center;gap:4%;padding:10% 8% 0;background:radial-gradient(120% 90% at 50% 110%,rgba(226,58,128,.28),transparent 60%),var(--bg-3)}
.tile__media--device img{width:34%;height:auto;object-fit:contain;border-radius:18px 18px 0 0;box-shadow:0 20px 60px -20px rgba(0,0,0,.5)}
.tile__media--device img:nth-child(2){width:30%;margin-bottom:-6%}
.tile__media--device img.icon{position:absolute;top:16px;right:16px;width:56px;border-radius:13px;box-shadow:none}
.tile:hover .tile__media--device img{transform:translateY(-6px)}
/* Typografische Kachel (Shop) */
.tile__media--type{background:var(--shop);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,40px)}
.tile__media--type strong{font-size:var(--t-xl);font-weight:800;letter-spacing:-.05em;line-height:.9}
.tile__media--type strong span{color:#8FA4E8}
.tile__media--type .grid-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.6px);background-size:22px 22px;z-index:-1;mask:linear-gradient(135deg,transparent 30%,#000)}
.tile[hidden],li[hidden]{display:none!important}

/* ---------- Work-Liste ---------- */
.view-list .work-grid{display:block}
.view-list .work-grid>li{margin:0!important;border-top:1px solid var(--line)}
.view-list .work-grid>li:last-child{border-bottom:1px solid var(--line)}
.view-list .tile{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,2fr) 120px;gap:var(--col-gap);align-items:center;padding:22px 0;min-height:44px}
.view-list .tile__media{order:4;aspect-ratio:4/3;border-radius:var(--r-s);width:120px}
.view-list .tile__media .status,.view-list .tile__reveal,.view-list .tile__media .icon{display:none}
.view-list .tile__media--type strong{font-size:1rem}
.view-list .tile__media--device{padding:8px 8px 0}
.view-list .tile__body{display:contents}
.view-list .tile__title{font-size:var(--t-l)}
.view-list .tile:hover .tile__title{color:var(--accent)}
@media (max-width:760px){.view-list .tile{grid-template-columns:1fr 88px}.view-list .tile__media{width:88px;order:2;grid-row:1/3;grid-column:2}.view-list .tile__sub{display:none}.view-list .tile__meta{text-align:left}}

/* ---------- Leistungen ---------- */
.services{list-style:none;border-top:1px solid var(--line)}
.service{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);padding:var(--s6) 0;border-bottom:1px solid var(--line);align-items:baseline}
.service__no{grid-column:span 1;color:var(--fg-2)}
.service h3{grid-column:2/span 5;font-size:var(--t-xl);letter-spacing:-.045em;transition:color var(--d-2)}
.service p{grid-column:8/-1;color:var(--fg-2)}
.service:hover h3{color:var(--accent)}
@media (max-width:760px){.service__no{grid-column:1/-1;margin-bottom:8px}.service h3,.service p{grid-column:1/-1}.service p{margin-top:12px}}

/* Haltung / Prinzipien */
.principles{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--col-gap)}
.principle{padding:var(--s6);border:1px solid var(--line);border-radius:var(--r-l);display:flex;flex-direction:column;gap:var(--s5);min-height:260px}
.principle strong{font-size:var(--t-l);letter-spacing:-.04em;line-height:1.05;font-weight:650}
.principle p{color:var(--fg-2);margin-top:auto}
.statement{font-size:var(--t-xl);letter-spacing:-.045em;line-height:1.05;font-weight:650;max-width:20ch}
.statement span{color:var(--fg-2)}

/* ---------- CTA ---------- */
.cta{padding-block:var(--s10);text-align:left}
.cta__title{font-size:var(--t-mega);letter-spacing:-.06em;line-height:.88;font-weight:650}
.cta__title a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;transition:background-size var(--d-3) var(--ease-out),color var(--d-2)}
.cta__title a:hover{color:var(--accent);background-size:100% 3px}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s7)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r-pill);font-weight:650;text-decoration:none;border:1px solid var(--line-2);transition:background var(--d-1),transform var(--d-2) var(--ease-spring)}
.btn:hover{background:var(--line)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--fg);color:var(--bg);border-color:transparent}
.btn--primary:hover{background:var(--accent);color:var(--on-accent-text)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:var(--s8) var(--s6);font-size:var(--t-s)}
.footer__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s6)}
.footer__brand{grid-column:span 5}
.footer__brand p{color:var(--fg-2);margin-top:var(--s4);max-width:36ch}
.footer__col{grid-column:span 2}
.footer__col:last-child{grid-column:span 3}
.footer__col h2{font:500 var(--t-xs)/1 var(--f-mono);text-transform:uppercase;color:var(--fg-2);letter-spacing:.02em;margin-bottom:var(--s4)}
.footer__col ul{list-style:none}
.footer__col a{display:inline-flex;min-height:44px;align-items:center;text-decoration:none}
.footer__col a:hover{color:var(--accent)}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);color:var(--fg-2)}
.footer__wordmark{font-size:var(--t-wordmark);font-weight:800;letter-spacing:-.065em;line-height:.8;margin-top:var(--s8);white-space:nowrap;overflow:hidden;user-select:none}
.footer__wordmark span{color:var(--accent)}
@media (max-width:860px){.footer__brand{grid-column:1/-1}.footer__col,.footer__col:last-child{grid-column:span 6}}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.page-head{padding-top:calc(var(--nav-h) + clamp(64px,10vw,150px));padding-bottom:var(--s8)}
.page-head h1{font-size:var(--t-xxl);letter-spacing:-.055em;line-height:.92;margin-top:var(--s5)}
.page-head p{font-size:var(--t-m);color:var(--fg-2);max-width:40ch;margin-top:var(--s5);line-height:1.4}

/* ---------- Case Study ---------- */
.case-hero{padding-top:calc(var(--nav-h) + clamp(56px,9vw,130px))}
.case-hero__crumbs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:var(--s6)}
.case-hero__crumbs{align-items:center}
.case-hero__crumbs a{text-decoration:none;color:var(--fg-2);display:inline-flex;align-items:center;min-height:44px}
.case-hero__crumbs a:hover{color:var(--accent)}
.case-hero h1{font-size:clamp(2.5rem,1rem + 8.2vw,11rem);letter-spacing:-.06em;line-height:.88;margin-top:var(--s5);overflow-wrap:anywhere;hyphens:auto}
.case-hero__icon{width:clamp(64px,7vw,96px);height:auto;border-radius:22.5%;margin-bottom:var(--s5);box-shadow:0 0 0 1px var(--line)}
.case-hero__lede{font-size:var(--t-l);letter-spacing:-.025em;line-height:1.2;max-width:28ch;margin-top:var(--s6);font-weight:500}
.case-media{position:relative;margin-top:var(--s8);border-radius:var(--r-l);overflow:hidden;background:var(--bg-3)}
.case-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.case-media--device{display:flex;justify-content:center;align-items:flex-end;gap:5%;padding:6% 6% 0;background:radial-gradient(90% 80% at 50% 120%,rgba(226,58,128,.3),transparent 60%),var(--bg-3)}
.case-media--device img{width:28%;aspect-ratio:auto;object-fit:contain;border-radius:28px 28px 0 0;border:clamp(4px,.6vw,8px) solid #15181D;border-bottom:0;background:#15181D;box-shadow:0 0 0 1px rgba(247,246,242,.14),0 30px 80px -30px rgba(0,0,0,.55)}
.case-media--type{aspect-ratio:16/9;border-radius:0}
.case-facts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s5);padding-block:var(--s7);border-bottom:1px solid var(--line)}
.case-facts>div{grid-column:span 3}
.case-facts dt{font:500 var(--t-xs)/1 var(--f-mono);text-transform:uppercase;color:var(--fg-2);margin-bottom:10px}
.case-facts dd{margin:0;font-weight:500}
.case-facts dd a{text-decoration:none;border-bottom:1px solid currentColor;display:inline-flex;align-items:center;min-height:44px}
@media (max-width:760px){.case-facts>div{grid-column:span 6}}
.case-body{padding-block:var(--s10)}
.case-body .grid>h2{grid-column:1/span 4;font-size:var(--t-l);letter-spacing:-.035em}
.case-body .prose{grid-column:6/-1}
.case-body .grid+.grid{margin-top:var(--s9)}
@media (max-width:860px){.case-body .grid>h2,.case-body .prose{grid-column:1/-1}.case-body .prose{margin-top:var(--s5)}}
.prose{font-size:var(--t-m);line-height:1.5;letter-spacing:-.01em;overflow-wrap:break-word}
.prose p+p{margin-top:1em}
.prose ul{padding-left:1.1em;margin-top:1em}.prose li+li{margin-top:.4em}
.case-gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
.case-gallery figure{margin:0;grid-column:span 6;border-radius:var(--r-l);overflow:hidden;background:var(--bg-3)}
.case-gallery figure.full{grid-column:1/-1}
@media (max-width:760px){.case-gallery figure{grid-column:1/-1}}
.next{display:block;text-decoration:none;border-top:1px solid var(--line);padding-block:var(--s9)}
.next .eyebrow{margin-bottom:var(--s4)}
.next strong{display:block;font-size:var(--t-xxl);letter-spacing:-.055em;line-height:.95;font-weight:650;transition:color var(--d-2),transform var(--d-3) var(--ease-out)}
.next:hover strong{color:var(--accent);transform:translateX(12px)}

/* ---------- Rechtstexte ---------- */
.legal{padding-bottom:var(--s10)}
.legal .grid>nav{grid-column:1/span 3}
.legal .grid>article{grid-column:5/span 7}
.legal nav ul{list-style:none;position:sticky;top:calc(var(--nav-h) + 40px)}
.legal nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--fg-2);font-size:var(--t-s)}
.legal nav a:hover{color:var(--accent)}
.legal article{font-size:var(--t-body);line-height:1.65;max-width:68ch}
.legal article h2{font-size:var(--t-m);letter-spacing:-.025em;margin:2.4em 0 .7em;line-height:1.2}
.legal article h2:first-child{margin-top:0}
.legal article h3{font-size:var(--t-body);margin:1.6em 0 .5em;letter-spacing:-.01em}
.legal article p,.legal article ul{margin-bottom:1em}
.legal article ul{padding-left:1.2em}
.legal article a{color:var(--accent);padding-block:12px}
.legal address{font-style:normal}
@media (max-width:860px){.legal .grid>nav{display:none}.legal .grid>article{grid-column:1/-1}}

/* ---------- 404 ---------- */
.notfound{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--nav-h) + 40px) 64px}
.notfound h1{font-size:var(--t-404);letter-spacing:-.08em;line-height:.8;font-weight:800;display:flex;align-items:center;gap:.05em}
.notfound h1 .delta{height:.7em}
.notfound p{font-size:var(--t-m);margin-top:var(--s6);max-width:30ch}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--d-4) var(--ease-out),transform var(--d-4) var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}
.cursor-label{position:fixed;left:0;top:0;z-index:60;pointer-events:none;padding:10px 16px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent-text);font:600 var(--t-xs)/1 var(--f-mono);text-transform:uppercase;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity var(--d-1),transform var(--d-2) var(--ease-out)}
.cursor-label.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .ticker__track{animation:none}
  .cursor-label{display:none}
}
@media print{.site-header,.mobile-menu,.filterbar,.ticker{display:none}.js .reveal{opacity:1!important;transform:none!important}}
@media (max-width:480px){.pills button,.pills a{padding:0 12px}.logo{font-size:1rem}.tile__media--type strong{font-size:2rem}}

/* ---------- Art Direction: Bühne für Website-Screenshots ---------- */
.tile__media--stage,.featured--stage{background:radial-gradient(120% 100% at 50% 120%,color-mix(in srgb,var(--digital) 22%,transparent),transparent 62%),var(--bg-3)}
.tile__media--stage.stage--night,.featured--stage.stage--night{background:radial-gradient(120% 100% at 50% 120%,rgba(226,58,128,.32),transparent 62%),#12161C}
.tile__media--stage.stage--paper{background:#E6E3DB}
.tile__media--stage img,.featured--stage img{position:absolute;left:9%;right:9%;top:9%;width:82%;height:100%;object-fit:cover;object-position:50% 0;border-radius:12px 12px 0 0;box-shadow:0 0 0 1px rgba(21,24,29,.14),0 30px 70px -30px rgba(0,0,0,.55)}
.featured--stage{aspect-ratio:16/9}
.featured--stage img{left:12%;right:12%;width:76%;top:10%;aspect-ratio:auto}
.tile:hover .tile__media--stage img,.tile:focus-visible .tile__media--stage img{transform:translateY(-8px) scale(1.03)}
.featured--stage:hover img{transform:translateY(-8px) scale(1.02)}
.view-list .tile__media--stage img{left:8%;right:8%;width:84%;top:12%;border-radius:4px 4px 0 0}
/* Signatur: Delta erscheint beim Hover auf der Kachel */
.tile__media::after{content:"";position:absolute;right:18px;top:18px;width:30px;height:26px;background:var(--mark) no-repeat center/contain;transform:scale(0) rotate(-30deg);transform-origin:50% 70%;transition:transform var(--d-3) var(--ease-spring);z-index:3}
.tile:hover .tile__media::after,.tile:focus-visible .tile__media::after{transform:none}
.tile__media--device::after{right:auto;left:18px;top:auto;bottom:18px}
/* Signatur: Spektrum-Haarlinie am oberen Rand */
body::before{content:"";position:fixed;inset:0 0 auto;height:2px;background:var(--spektrum);z-index:70;pointer-events:none}

/* ---------- Windows-Kontrastmodus ---------- */
@media (forced-colors:active){
  .pills [aria-pressed="true"],.nav__links a[aria-current]{outline:2px solid CanvasText;forced-color-adjust:none}
  .delta,.tile__media::after{forced-color-adjust:none}
  .nav,.pills{border:1px solid CanvasText}
}
@media (prefers-reduced-motion:reduce){.site-header.is-hidden .nav{transform:none}.tile__media::after{display:none}}

/* ---------- Reflow 320px: lange Wörter, E-Mail-Adressen, URLs ---------- */
h1,h2,h3,.next strong,.principle strong{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.case-facts dd a,.footer__col a,.legal article a{max-width:100%;overflow-wrap:anywhere}
@media (max-width:480px){.footer__col,.footer__col:last-child{grid-column:1/-1}.service h3{font-size:var(--t-l)}}
.section+.section:not(.section--alt){padding-top:var(--s8)}
.case-media,.case-gallery figure{margin-inline:0}
.tile__media--type{padding-top:clamp(56px,6vw,72px)}
.tile__media--type strong{overflow-wrap:anywhere}

/* Weitere Projekte (zurückhaltend, ohne JS nutzbar) */
.more-work{margin-top:var(--s8);border-top:1px solid var(--line);padding-top:var(--s5)}
.more-work>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:0 1.1em;border:1px solid var(--line-2);border-radius:999px;font-weight:650}
.more-work>summary::-webkit-details-marker{display:none}
.more-work>summary::after{content:"+";font-weight:400;transition:transform .32s}
.more-work[open]>summary::after{transform:rotate(45deg)}
.more-work>summary:focus-visible{outline:2px solid var(--accent-text,currentColor);outline-offset:3px}
.more-work .work-grid--more{margin-top:var(--s6)}
@media (prefers-reduced-motion:reduce){.more-work>summary::after{transition:none}}

/* Case-Hero kompakter: Titel ruhiger, Lede als Begleittext rechts, Bild früher sichtbar */
.case-hero{padding-top:calc(var(--nav-h) + clamp(32px,5vw,72px))}
.case-hero__crumbs{margin-bottom:var(--s4)}
.case-hero h1{font-size:clamp(2.5rem,1.2rem + 5vw,6.75rem);line-height:.92;letter-spacing:-.055em;margin-top:var(--s4)}
.case-hero__lede{font-size:var(--t-m);font-weight:400;line-height:1.45;letter-spacing:-.01em;color:var(--fg-2);max-width:46ch;margin-top:var(--s5)}
.case-media{margin-top:var(--s7)}
.case-media:not(.case-media--device):not(.case-media--type) img{max-height:min(78vh,820px);object-position:top}
@media (min-width:1024px){
  .case-hero__lede{margin-left:auto;margin-top:var(--s5);padding-left:var(--s3);border-left:2px solid var(--accent)}
}

/* Keine seitenbreiten Website-Screenshots: als ruhiges «Fenster» mittig, max. ~980px */
.case-media:not(.case-media--device):not(.case-media--type){max-width:min(100%,980px);margin-inline:auto;background:transparent;border-radius:14px;box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(0,0,0,.45)}
.case-media:not(.case-media--device):not(.case-media--type) img{aspect-ratio:4/3;max-height:none}
.case-media:not(.case-media--device):not(.case-media--type) .status{z-index:1}
.case-gallery figure.full{grid-column:3/span 8}
@media (max-width:760px){.case-gallery figure.full{grid-column:1/-1}}

/* Display-Zeilenabstand: Unter-/Oberlängen dürfen sich nicht berühren */
.hero__title{line-height:.98}
.page-head h1,.section__title,.next strong{line-height:1.02}
.cta__title{line-height:.98}
.case-hero h1{line-height:1}

/* Im Fokus: Text links, Bild rechts - kein seitenbreiter Screenshot */
.featured-row{display:grid;gap:var(--s6);align-items:center}
.featured-row .featured{order:-1}
.featured-row .featured--stage{aspect-ratio:4/3}
.featured-row .featured--stage img{left:10%;right:10%;width:80%;top:10%}
.featured-row .featured__cap{display:block;padding:0}
.featured__text{margin-top:var(--s4);color:var(--fg-2);max-width:40ch}
.featured__more{display:inline-flex;align-items:center;gap:.5em;min-height:44px;margin-top:var(--s4);font-weight:650;text-decoration:none;color:var(--fg)}
.featured__more:hover{color:var(--accent)}
@media (min-width:1024px){
  .featured-row{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
  .featured-row .featured__cap{grid-column:1/span 4;order:0}
  .featured-row .featured{grid-column:6/-1;order:1}
}

/* Vorschaubilder: Querformat, Screenshot in voller Breite zeigen - lieber unten (Höhe) abschneiden als seitlich */
.tile__media--stage{aspect-ratio:16/10}
.tile__media--stage img,.featured--stage img{height:auto;aspect-ratio:4/3;object-fit:contain;left:7%;right:7%;width:86%;top:7%}
.featured-row .featured--stage{aspect-ratio:16/10}
.featured-row .featured--stage img{left:7%;right:7%;width:86%;top:7%}

/* Footer-Signatur: Wortmarke wie Logo (Fraunces 600, opsz 72 wie CD, gesperrt), füllt die Satzbreite */
.footer__wordmark{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 72;font-optical-sizing:none;font-weight:600;letter-spacing:.05em;line-height:1;margin-right:-.06em;white-space:nowrap;
  font-size:calc((min(100vw,var(--maxw)) - 2 * var(--gutter)) / var(--wm-w,11.02))}
.footer__wordmark span{color:var(--accent)}
.footer__wordmark .footer__suffix{font-weight:500;letter-spacing:.06em}

/* Navigationsumbau: nummerierte Listen ohne Browser-Einzug, kompakte Weiterleitungs-Links */
ol.principles,ol.services{padding-left:0;margin-left:0}
.section-link{margin-top:calc(-1 * var(--s8));padding-bottom:var(--s8)}

/* CTA als eigenes Band: links Aussage, rechts Text + Aktion - nicht mehr verloren links */
.cta{background:var(--bg-2);border-top:1px solid var(--line);padding-block:clamp(64px,8vw,128px)}
.cta__inner{display:grid;gap:var(--s6);align-items:end}
.cta__title{font-size:var(--t-xxl);white-space:nowrap;margin-top:var(--s4)}
.cta__side p{color:var(--fg-2);max-width:42ch}
.cta__row{margin-top:var(--s5)}
@media (min-width:900px){.cta__inner{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}.cta__main{grid-column:1/span 7}.cta__side{grid-column:8/-1}}
main:has(> .cta:last-child) + .site-footer{border-top-color:transparent}

/* App-Kacheln: ganzer iPhone-Bildschirm sichtbar, nicht unten angeschnitten */
.tile__media--device{aspect-ratio:16/10;align-items:center;padding:6% 8%}
.tile__media--device img:not(.icon){height:100%;width:auto;max-width:40%;object-fit:contain;border-radius:clamp(10px,1.6vw,22px);border:clamp(3px,.4vw,6px) solid #15181D;background:#15181D;margin:0}
.tile__media--device img:nth-child(2){width:auto;margin-bottom:0}
.case-media--device{align-items:center;padding:5% 6%}
.case-media--device img{border-radius:clamp(14px,2vw,32px);border-bottom:clamp(4px,.6vw,8px) solid #15181D;max-height:min(80vh,760px);width:auto}

/* Schutzraum um Geräte: iPhone nimmt max. ~76 % der Kachelhöhe ein, nie bis an den Rand */
.tile__media--device{padding:0;gap:5%;align-items:center;justify-content:center}
.tile__media--device img:not(.icon){height:auto;width:21.8%;max-width:none;max-height:none}
.case-media--device{padding:clamp(40px,7%,96px) 6%;gap:6%}
.case-media--device img{max-height:min(68vh,620px);width:auto;max-width:26%}
@media (max-width:760px){.tile__media--device img:not(.icon){width:27%}.case-media--device img{max-width:30%}}

/* Sprachumschalter: dezent, links neben «Projekt anfragen», stört die CTA nicht */
.nav{justify-content:flex-start}
.nav__links{margin-inline:auto}
.lang{display:flex;align-items:center;gap:0;margin-right:6px;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;color:var(--fg-2)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:44px;padding:0 6px;border-radius:var(--r-pill);text-decoration:none;color:var(--fg-2);transition:color var(--d-1)}
.lang a:hover{color:var(--fg)}
.lang a[aria-current]{color:var(--fg);font-weight:600}
.lang > span{opacity:.5}
.lang--menu{margin:var(--s5) 0 0;font-size:.9rem}
@media (max-width:860px){.js .nav > .lang{display:none}}
@media (min-width:861px){.lang--menu{display:none}}
.nav__toggle{margin-left:auto}
/* Fraunces als Akzent (31.10.2026): Hero-Schlüsselwort Fraunces 400/opsz 144; Projekttitel + «Reden wir.» Fraunces 600/opsz 72 wie Wortmarke. UI bleibt Inter. */
.hero__title .fr-accent{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 144;font-optical-sizing:none;font-weight:400;letter-spacing:-.03em}
.hero__title .fr-accent+em{font-family:"Fraunces",Georgia,serif;font-weight:400}
.case-hero h1,.cta__title{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 72;font-optical-sizing:none;font-weight:600;letter-spacing:-.02em}