/* ============================================================================
   TEAMDROP · SITE LAYER v1
   Komponenten & Sections auf Basis von tokens.css.
   Reihenfolge: Chrome → Sections → Komponenten → Overlays → Responsive.
   ========================================================================= */

/* ═══════════════ SKIP-LINK ═══════════════ */
.skip-link{position:fixed;top:-60px;left:16px;z-index:calc(var(--z-nav) + 1);
  background:var(--td-lime);color:var(--td-blue);font-weight:var(--fw-bold);
  padding:12px 20px;border-radius:var(--radius-pill);transition:top var(--dur-fast) var(--ease-out)}
.skip-link:focus{top:16px}

/* ═══════════════ NAVIGATION ═══════════════ */
.nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);height:var(--nav-h);
  display:flex;align-items:center;transition:var(--t-surface)}
.nav-inner{display:flex;align-items:center;gap:var(--space-7);width:100%}
.nav .brand{display:inline-flex;align-items:center;border:0}
.nav .brand img{height:26px;width:auto}
.nav .brand .logo-dark{display:none}
.nav-links{display:flex;gap:var(--space-6);margin-left:auto}
.nav-links a{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--td-white);
  border:0;opacity:.92;letter-spacing:.02em}
.nav-links a:hover{opacity:1;color:var(--td-lime)}
.nav-cta{margin-left:var(--space-4)}
.nav.scrolled{background:rgba(245,245,245,.86);backdrop-filter:var(--blur-nav);
  -webkit-backdrop-filter:var(--blur-nav);box-shadow:var(--elevation-2)}
.nav.scrolled .nav-links a{color:var(--text-primary)}
.nav.scrolled .nav-links a:hover{color:var(--td-blue)}
.nav.scrolled .brand .logo-light{display:none}
.nav.scrolled .brand .logo-dark{display:block}

.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;
  cursor:pointer;position:relative;z-index:calc(var(--z-drawer) + 1)}
.burger i,.burger i::before,.burger i::after{content:"";position:absolute;left:10px;right:10px;
  height:2px;background:var(--td-white);border-radius:2px;transition:transform var(--dur-base) var(--ease-out),top var(--dur-base) var(--ease-out),opacity var(--dur-fast)}
.burger i{top:21px}.burger i::before{top:-7px}.burger i::after{top:7px}
.nav.scrolled .burger i,.nav.scrolled .burger i::before,.nav.scrolled .burger i::after{background:var(--text-primary)}
body.menu-open .burger i{background:transparent!important}
body.menu-open .burger i::before{top:0;transform:rotate(45deg);background:var(--td-white)}
body.menu-open .burger i::after{top:0;transform:rotate(-45deg);background:var(--td-white)}

.menu{position:fixed;inset:0;z-index:var(--z-drawer);background:var(--gradient-brand);
  display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);
  opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
body.menu-open .menu{opacity:1;visibility:visible;transition-delay:0s}
body.menu-open{overflow:hidden}
.menu a{border:0}
.menu-links{display:flex;flex-direction:column;gap:var(--space-3)}
.menu-links a{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,7.5vw,52px);line-height:1.05;color:var(--td-white);letter-spacing:-.01em}
.menu-links a:hover{color:var(--td-lime)}
.menu-meta{margin-top:var(--space-9);display:flex;flex-wrap:wrap;gap:var(--space-6)}
.menu-meta a{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--blue-200)}
.menu-meta a:hover{color:var(--td-lime)}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--control-h-md);padding:0 var(--control-px-md);
  font-family:var(--font-text);font-weight:var(--fw-bold);font-size:var(--fs-button);
  line-height:var(--lh-button);letter-spacing:var(--ls-button);text-transform:uppercase;
  white-space:nowrap;border-radius:var(--radius-pill);border:var(--border-w-hair) solid transparent;
  cursor:pointer;transition:var(--t-control);user-select:none}
.btn:active{transform:scale(var(--press-scale))}
.btn:hover{transform:translateY(var(--hover-lift))}
.btn .i{width:16px;height:16px;flex:none}
.btn-lg{height:var(--control-h-lg);padding:0 var(--control-px-lg);font-size:var(--fs-button-lg)}
.btn-sm{height:var(--control-h-sm);padding:0 var(--control-px-sm)}
.btn-primary{background:var(--td-lime);color:var(--td-blue);border-color:var(--td-lime)}
.btn-primary:hover{background:var(--state-accent-hover);border-color:var(--state-accent-hover);color:var(--td-blue);box-shadow:var(--shadow-accent)}
.btn-primary:active{background:var(--state-accent-active)}
.btn-brand{background:var(--td-blue);color:var(--td-white);border-color:var(--td-blue)}
.btn-brand:hover{background:var(--state-brand-hover);border-color:var(--state-brand-hover);color:var(--td-white);box-shadow:var(--shadow-brand)}
.btn-outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--text-primary);color:var(--text-primary);background:var(--state-hover-surface)}
.td-dark .btn-outline{color:var(--td-white);border-color:var(--alpha-white-16)}
.td-dark .btn-outline:hover{border-color:var(--td-white);color:var(--td-white);background:var(--alpha-white-06)}

/* ═══════════════ SECTION-KOPF ═══════════════ */
.sec-head{max-width:820px;margin-bottom:var(--space-9)}
.sec-head .td-eyebrow{display:block;margin-bottom:var(--space-4)}
.sec-title{font-size:var(--fs-display-fluid);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.sec-title .accent{color:var(--td-blue)}
.td-dark .sec-title .accent{color:var(--td-lime)}
.sec-sub{margin-top:var(--space-5);font-size:var(--fs-lead);line-height:var(--lh-lead);
  color:var(--text-secondary);max-width:var(--measure)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .sec-sub{margin-inline:auto}

/* ═══════════════ HERO ═══════════════ */
.hero{position:relative;background:var(--gradient-brand);overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(48px,8vw,96px));padding-bottom:clamp(56px,7vw,104px)}
.hero::before{content:"";position:absolute;inset:auto -20% -55% -20%;height:120%;
  background:radial-gradient(52% 52% at 50% 100%,rgba(147,193,28,.14),transparent 70%);pointer-events:none}
.hero .track{position:absolute;right:-8%;top:8%;width:min(56vw,760px);opacity:.10;pointer-events:none}
.hero-inner{position:relative;max-width:1000px}
.hero .td-eyebrow{color:var(--td-lime);margin-bottom:var(--space-5);display:block}
.hero h1{font-size:var(--fs-display-xxl-fluid);line-height:var(--lh-display-xxl);
  letter-spacing:var(--ls-display);color:var(--td-white)}
.hero h1 .accent{color:var(--td-lime)}
.hero-lead{margin-top:var(--space-6);font-size:clamp(17px,2vw,21px);line-height:1.6;
  color:var(--blue-200);max-width:56ch}
.hero-btns{margin-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-4)}
.hero-fact{margin-top:var(--space-9);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.fact-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;
  border:1px solid var(--alpha-white-16);border-radius:var(--radius-pill);
  font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--blue-200)}
.fact-chip b{color:var(--td-lime);font-family:var(--font-display);font-weight:800;letter-spacing:0}

/* ═══════════════ BRAND WALL (Logo-Marquee) ═══════════════ */
.brandwall{background:var(--surface-page);border-bottom:1px solid var(--border-hairline)}
.brandwall .lbl{text-align:center;padding-top:var(--space-8);font-family:var(--font-alt);
  font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-tertiary)}
.logo-marquee{overflow:hidden;padding:var(--space-7) 0 var(--space-8);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;align-items:center;gap:clamp(40px,6vw,88px);width:max-content;
  animation:td-marquee 34s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-track img{height:26px;width:auto;filter:grayscale(1) brightness(.35);opacity:.75;transition:var(--t-media)}
.logo-track img:hover{filter:none;opacity:1}
@keyframes td-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* ═══════════════ STATEMENT / ZITAT ═══════════════ */
.statement{background:var(--surface-page)}
.statement blockquote{margin:0 auto;max-width:900px;text-align:center}
.statement .q{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,3.6vw,40px);line-height:1.14;letter-spacing:-.01em;color:var(--text-primary)}
.statement .q .accent{color:var(--td-blue)}
.statement .attr{margin-top:var(--space-6);font-family:var(--font-alt);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-tertiary)}

/* ═══════════════ SYSTEM (SELECT→…→REPEAT) ═══════════════ */
.system{background:var(--gradient-brand);position:relative;overflow:hidden}
.system::after{content:"";position:absolute;left:-10%;bottom:-40%;width:60%;padding-top:60%;
  border-radius:50%;background:radial-gradient(closest-side,rgba(147,193,28,.10),transparent 72%);pointer-events:none}
.sys-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--grid-gap);position:relative}
.sys-step{padding:var(--space-6) 0 0;border-top:2px solid var(--alpha-white-16);position:relative}
.sys-step .num{font-family:var(--font-display);font-weight:900;font-size:15px;letter-spacing:.06em;color:var(--td-lime)}
.sys-step h3{margin-top:var(--space-3);font-size:clamp(20px,2vw,26px);color:var(--td-white)}
.sys-step p{margin-top:var(--space-3);font-size:var(--fs-small);line-height:1.55;color:var(--blue-200)}
.sys-step::before{content:"";position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--td-lime);transition:width var(--dur-reveal) var(--ease-out)}
.sys-step.in::before{width:100%}

/* ═══════════════ CARDS (Basis) ═══════════════ */
.card{background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);box-shadow:var(--elevation-1);transition:var(--t-surface)}
.card:hover{box-shadow:var(--elevation-2);transform:translateY(var(--hover-lift))}

/* ═══════════════ VEREDELUNG ═══════════════ */
.veredelung{background:var(--surface-soft)}
.v-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap)}
.v-card{padding:var(--space-7);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:var(--space-3);border:1px solid var(--border-hairline);background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--elevation-1);transition:var(--t-surface)}
.v-card:hover{box-shadow:var(--elevation-2);transform:translateY(var(--hover-lift));border-color:var(--blue-200)}
.v-ico{width:52px;height:34px;display:grid;place-items:center;border:2px solid var(--td-blue);
  border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:800;font-size:13px;
  letter-spacing:.04em;color:var(--td-blue)}
.v-card h3{font-size:var(--fs-h4)}
.v-card p{color:var(--text-secondary);font-size:var(--fs-small);line-height:1.55;flex:1}
.v-more{font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:var(--ls-button);
  text-transform:uppercase;color:var(--td-blue);display:inline-flex;align-items:center;gap:6px}
.v-card:hover .v-more{color:var(--blue-600)}

/* ═══════════════ FILM / STAT BENTO ═══════════════ */
.film{background:var(--surface-page)}
.bento{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--grid-gap)}
.bento-video{position:relative;border-radius:var(--radius-xl);overflow:hidden;min-height:420px;background:var(--neutral-900)}
.bento-video video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.bento-video .cap{position:absolute;inset:auto 0 0 0;padding:var(--space-7);
  background:var(--gradient-protect);color:var(--td-white)}
.bento-video .cap h3{font-size:var(--fs-h3)}
.bento-video .cap p{margin-top:var(--space-2);font-size:var(--fs-small);color:rgba(255,255,255,.82);max-width:48ch}
.bento-side{display:grid;grid-template-rows:1fr auto;gap:var(--grid-gap)}
.stat-card{padding:var(--space-7);display:flex;flex-direction:column;justify-content:center;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-md);box-shadow:var(--elevation-1)}
.stat-num{font-family:var(--font-display);font-weight:900;font-size:clamp(56px,6vw,84px);
  line-height:.9;color:var(--td-blue);letter-spacing:-.02em}
.stat-num sup{font-size:.45em;color:var(--td-lime);vertical-align:super}
.stat-lbl{margin-top:var(--space-3);font-size:var(--fs-body);color:var(--text-secondary)}
.stat-chips{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:var(--radius-pill);
  background:var(--surface-soft);border:1px solid var(--border-hairline);
  font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--text-secondary)}
.cta-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-7);
  background:var(--td-blue);color:var(--td-white);border-radius:var(--radius-md);border:0;
  transition:var(--t-surface);position:relative;overflow:hidden}
.cta-card:hover{background:var(--blue-600);color:var(--td-white);transform:translateY(var(--hover-lift));box-shadow:var(--shadow-brand)}
.cta-card .top{font-family:var(--font-alt);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--td-lime)}
.cta-card .mid{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(22px,2.2vw,30px);line-height:1.08}
.cta-card .arw{position:absolute;right:var(--space-6);bottom:var(--space-5);font-size:26px;color:var(--td-lime);
  transition:transform var(--dur-base) var(--ease-out)}
.cta-card:hover .arw{transform:translate(4px,-4px)}

/* ═══════════════ BRANCHEN-GRID ═══════════════ */
.branchen{background:var(--surface-soft)}
.br-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.br-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;
  display:block;border:0;background:var(--neutral-900)}
.br-card img{width:100%;height:100%;object-fit:cover;transition:var(--t-media)}
.br-card:hover img{transform:scale(var(--media-zoom));opacity:var(--opacity-hover-img)}
.br-card::after{content:"";position:absolute;inset:0;background:var(--gradient-protect)}
.br-body{position:absolute;inset:auto 0 0 0;padding:var(--space-6);z-index:1;color:var(--td-white)}
.br-num{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.08em;color:var(--td-lime)}
.br-body h3{margin-top:6px;font-size:clamp(18px,1.8vw,24px);color:var(--td-white)}
.br-body p{margin-top:6px;font-size:var(--fs-small);line-height:1.5;color:rgba(255,255,255,.82);
  max-width:44ch;display:none}
.br-card:hover .br-body p{display:block}
.br-arw{position:absolute;top:var(--space-5);right:var(--space-5);z-index:1;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;background:var(--alpha-white-16);
  color:var(--td-white);backdrop-filter:blur(6px);transition:var(--t-control)}
.br-card:hover .br-arw{background:var(--td-lime);color:var(--td-blue)}

/* ═══════════════ TEAM-SHOP FEATURE ═══════════════ */
.teamshop{background:var(--surface-page)}
.ts-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center}
.ts-checks{margin:var(--space-7) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-4)}
.ts-checks li{display:flex;gap:12px;font-size:var(--fs-body-lg);color:var(--text-primary)}
.ts-checks .tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--alpha-lime-24);
  color:var(--lime-700);display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:2px}
.ts-checks b{font-weight:var(--fw-semibold)}
.ts-note{margin-top:var(--space-6);font-size:var(--fs-small);color:var(--text-tertiary);max-width:52ch}
/* Shop-Mock (reine UI-Illustration, Design-System-Komponenten) */
.shop-mock{border-radius:var(--radius-xl);background:var(--surface-card);
  border:1px solid var(--border-hairline);box-shadow:var(--elevation-4);overflow:hidden}
.sm-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--td-blue)}
.sm-dots{display:flex;gap:5px}.sm-dots i{width:9px;height:9px;border-radius:50%;background:var(--alpha-white-16)}
.sm-url{flex:1;height:26px;border-radius:var(--radius-pill);background:var(--alpha-white-10);
  display:flex;align-items:center;padding:0 14px;font-size:11px;color:var(--blue-200);font-family:var(--font-mono)}
.sm-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-hairline)}
.sm-logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:900;
  text-transform:uppercase;font-size:13px;color:var(--td-blue)}
.sm-logo img{height:16px;width:auto}
.sm-badge{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime-700);background:var(--alpha-lime-12);border:1px solid var(--alpha-lime-24);
  padding:4px 10px;border-radius:var(--radius-pill)}
.sm-body{padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:var(--surface-soft)}
.sm-card{background:var(--td-pure);border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:10px}
.sm-img{aspect-ratio:1;border-radius:var(--radius-sm);background:var(--td-light);overflow:hidden;display:grid;place-items:center}
.sm-img img{width:70%;height:70%;object-fit:contain;opacity:.9}
.sm-name{margin-top:8px;font-size:11px;font-weight:600;color:var(--text-primary)}
.sm-meta{margin-top:2px;font-size:10px;color:var(--text-tertiary)}
.sm-sizes{margin-top:8px;display:flex;gap:4px}
.sm-sizes i{font-style:normal;font-size:9px;font-weight:700;width:20px;height:18px;display:grid;place-items:center;
  border:1px solid var(--border-default);border-radius:4px;color:var(--text-secondary)}
.sm-sizes i.on{background:var(--td-blue);border-color:var(--td-blue);color:#fff}
.sm-btn{margin-top:10px;height:26px;border-radius:var(--radius-pill);background:var(--td-lime);
  display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--td-blue)}
.sm-foot{padding:12px 18px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-tertiary)}
.sm-foot b{color:var(--text-secondary)}

/* ═══════════════ PROZESS ═══════════════ */
.prozess{background:var(--surface-soft)}
.p-list{display:grid}
.p-row{display:grid;grid-template-columns:110px 1fr auto;gap:var(--space-6);align-items:start;
  padding:var(--space-7) 0;border-top:1px solid var(--border-default)}
.p-row:last-child{border-bottom:1px solid var(--border-default)}
.p-num{font-family:var(--font-display);font-weight:900;font-size:clamp(28px,3vw,40px);
  color:var(--blue-300);line-height:1}
.p-row h3{font-size:var(--fs-h4)}
.p-row p{margin-top:var(--space-2);color:var(--text-secondary);font-size:var(--fs-body);max-width:64ch}
.p-chip{justify-self:end;display:inline-flex;align-items:center;height:32px;padding:0 16px;
  border-radius:var(--radius-pill);background:var(--td-blue);color:var(--td-white);
  font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:.04em;white-space:nowrap}
.p-row.hl .p-chip{background:var(--td-lime);color:var(--td-blue)}

/* ═══════════════ TEAM (Stadium-Portraits) ═══════════════ */
.team{background:var(--surface-page)}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.t-card{text-align:center}
.t-photo{width:min(78%,260px);aspect-ratio:200/253;margin:0 auto;border-radius:999px;
  border:var(--stadium-ring-lg) solid var(--td-blue);overflow:hidden;background:var(--td-light)}
.t-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:var(--t-media)}
.t-card:hover .t-photo img{filter:grayscale(0)}
.t-name{margin-top:var(--space-5);font-size:var(--fs-h4)}
.t-role{margin-top:4px;font-family:var(--font-alt);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--td-blue)}
.t-quote{margin:var(--space-4) auto 0;font-style:italic;color:var(--text-secondary);
  font-size:var(--fs-small);max-width:34ch}
.t-bio{max-width:40ch;margin:var(--space-3) auto 0;text-align:left}
.t-bio summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:var(--ls-button);
  text-transform:uppercase;color:var(--td-blue)}
.t-bio summary::-webkit-details-marker{display:none}
.t-bio summary::after{content:"+";font-weight:800}
.t-bio[open] summary::after{content:"–"}
.t-bio p{margin-top:var(--space-3);font-size:var(--fs-small);color:var(--text-secondary);line-height:1.6}
.t-tags{margin-top:var(--space-3);display:flex;flex-wrap:wrap;gap:6px}

/* ═══════════════ REFERENZEN (Marquee) ═══════════════ */
.refs{background:var(--surface-soft);overflow:hidden}
.ref-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ref-track{display:flex;gap:var(--grid-gap);width:max-content;animation:td-marquee 46s linear infinite}
.ref-marquee:hover .ref-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ref-track{animation:none}}
.ref-card{width:min(74vw,420px);flex:none;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--td-pure);border:1px solid var(--border-hairline);box-shadow:var(--elevation-1)}
.ref-card img{aspect-ratio:4/3;width:100%;object-fit:cover}
.ref-cap{padding:var(--space-5)}
.ref-cap b{display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:15px;letter-spacing:.01em;color:var(--text-primary)}
.ref-cap span{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--text-secondary)}

/* ═══════════════ FAQ ═══════════════ */
.faq-sec{background:var(--surface-page)}
.faq{max-width:820px;margin-inline:auto}
.faq details{border-top:1px solid var(--border-default)}
.faq details:last-child{border-bottom:1px solid var(--border-default)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-6);
  align-items:center;padding:var(--space-6) 0;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;font-size:16px;letter-spacing:.01em;color:var(--text-primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q-ic{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border-strong);
  display:grid;place-items:center;transition:var(--t-control);position:relative}
.faq summary .q-ic::before,.faq summary .q-ic::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.faq summary .q-ic::before{width:12px;height:2px}
.faq summary .q-ic::after{width:2px;height:12px;transition:transform var(--dur-base) var(--ease-out)}
.faq details[open] summary .q-ic{background:var(--td-blue);border-color:var(--td-blue);color:#fff}
.faq details[open] summary .q-ic::after{transform:rotate(90deg)}
.faq .a{padding:0 0 var(--space-6);color:var(--text-secondary);font-size:var(--fs-body-lg);
  line-height:1.62;max-width:60ch}

/* ═══════════════ KONTAKT ═══════════════ */
.kontakt{background:var(--gradient-brand)}
.k-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,80px)}
.k-checks{margin:var(--space-7) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-4)}
.k-checks li{display:flex;gap:12px;color:var(--blue-200);font-size:var(--fs-body-lg)}
.k-checks .tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--alpha-lime-24);
  color:var(--td-lime);display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:2px}
.k-checks b{color:var(--td-white);font-weight:var(--fw-semibold)}
.k-meta{margin-top:var(--space-8);display:grid;gap:var(--space-5)}
.k-meta .l{font-family:var(--font-alt);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--td-lime)}
.k-meta .v{margin-top:4px;color:var(--td-white);font-size:var(--fs-body-lg)}
.k-meta .n{margin-top:2px;font-size:var(--fs-caption);color:var(--blue-300)}
.k-meta a{color:var(--td-white)}
.k-meta a:hover{color:var(--td-lime)}

.form-card{background:var(--td-pure);border-radius:var(--radius-lg);padding:clamp(24px,3vw,40px);
  box-shadow:var(--elevation-4)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)}
.form-card input[type=text],.form-card input[type=email],.form-card input[type=tel],
.form-card select,.form-card textarea{
  width:100%;height:var(--control-h-md);padding:0 var(--space-5);
  border:1.5px solid var(--border-default);border-radius:var(--radius-pill);
  background:var(--surface-page);color:var(--text-primary);font-size:var(--fs-body);
  transition:var(--t-control);appearance:none}
.form-card select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23585A6A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;padding-right:44px}
.form-card textarea{height:120px;padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);resize:vertical}
.form-card :is(input,select,textarea):hover{border-color:var(--border-strong)}
.form-card :is(input,select,textarea):focus{outline:none;border-color:var(--td-blue);box-shadow:var(--ring-brand)}
.form-card ::placeholder{color:var(--text-tertiary)}
.upload{display:flex;align-items:center;gap:12px;margin-bottom:var(--space-4);padding:var(--space-4) var(--space-5);
  border:1.5px dashed var(--border-default);border-radius:var(--radius-lg);cursor:pointer;
  transition:var(--t-control);font-size:var(--fs-small);color:var(--text-secondary)}
.upload:hover{border-color:var(--td-blue);background:var(--alpha-blue-12)}
.upload input{display:none}
.upload .u-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--td-blue);color:#fff;
  display:grid;place-items:center;font-weight:800}
.upload b{color:var(--text-primary);font-weight:var(--fw-semibold)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.f-note{font-size:var(--fs-caption);color:var(--text-tertiary);margin-bottom:var(--space-4)}
.f-status{min-height:22px;font-size:var(--fs-small);font-weight:var(--fw-semibold);margin-bottom:var(--space-2)}
.f-status.ok{color:var(--success-500)}.f-status.err{color:var(--error-500)}
.f-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}
.f-legal{font-size:var(--fs-caption);color:var(--text-tertiary);max-width:38ch}
.f-legal a{color:var(--td-blue);border-bottom:1px solid currentColor}
.btn.sending{opacity:.6;pointer-events:none}

/* ═══════════════ FOOTER ═══════════════ */
.footer{background:var(--blue-600);color:var(--blue-200);padding:var(--space-10) 0 var(--space-7)}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--grid-gap-wide)}
.f-brand img{height:26px;width:auto}
.f-brand p{margin-top:var(--space-4);font-size:var(--fs-small);max-width:34ch;line-height:1.6}
.f-col .h{font-family:var(--font-alt);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--td-lime);margin-bottom:var(--space-4)}
.f-col a{display:block;padding:5px 0;color:var(--blue-200);font-size:var(--fs-small);border:0}
.f-col a:hover{color:var(--td-white)}
.f-bot{margin-top:var(--space-9);padding-top:var(--space-6);border-top:1px solid var(--alpha-white-10);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}
.f-bot small{font-size:var(--fs-caption);color:var(--blue-300)}
.f-legal-links{display:flex;gap:var(--space-5)}
.f-legal-links a,.f-legal-links button{background:none;border:0;padding:0;cursor:pointer;
  font-size:var(--fs-caption);color:var(--blue-300)}
.f-legal-links a:hover,.f-legal-links button:hover{color:var(--td-white)}
.f-by{display:flex;align-items:center;gap:10px;font-size:var(--fs-caption);color:var(--blue-300)}
.f-by img{height:22px;width:auto;opacity:.85}

/* ═══════════════ MODAL (Veredelung/Legal) ═══════════════ */
dialog.td-modal{border:0;padding:0;background:transparent;max-width:min(680px,92vw);width:100%}
dialog.td-modal::backdrop{background:var(--alpha-ink-60);backdrop-filter:var(--blur-scrim)}
.modal-sheet{background:var(--td-pure);border-radius:var(--radius-lg);box-shadow:var(--elevation-5);
  padding:clamp(24px,4vw,40px);position:relative;max-height:82vh;overflow:auto}
.m-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--border-default);background:var(--td-pure);cursor:pointer;font-size:16px;
  color:var(--text-secondary);transition:var(--t-control)}
.m-close:hover{border-color:var(--text-primary);color:var(--text-primary)}
.m-kicker{font-family:var(--font-alt);font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--td-blue)}
.modal-sheet h2{margin-top:var(--space-2);font-size:var(--fs-h2)}
.modal-sheet .lead{margin-top:var(--space-4);color:var(--text-secondary);line-height:1.62}
.m-feats{margin-top:var(--space-6);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.mf{padding:var(--space-4);background:var(--surface-soft);border-radius:var(--radius-md)}
.mf b{display:block;font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--td-blue)}
.mf span{display:block;margin-top:2px;font-size:var(--fs-small);color:var(--text-primary)}
.m-close-note{margin-top:var(--space-5);color:var(--text-secondary);font-size:var(--fs-small)}
.m-cta{margin-top:var(--space-6);display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ═══════════════ CONSENT ═══════════════ */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:var(--z-toast);
  max-width:520px;margin-inline:auto;background:var(--td-pure);border-radius:var(--radius-lg);
  box-shadow:var(--elevation-5);padding:var(--space-6);display:none}
.consent.show{display:block;animation:td-reveal-up var(--dur-slow) var(--ease-out)}
.consent h4{font-size:15px}
.consent p{margin-top:var(--space-2);font-size:var(--fs-small);color:var(--text-secondary)}
.consent p a{color:var(--td-blue)}
.consent .row{margin-top:var(--space-5);display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ═══════════════ REVEAL ═══════════════ */
.fx{opacity:0;transform:translateY(18px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.fx.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fx{opacity:1;transform:none;transition:none}}

/* ═══════════════ SEQUENZ (Scroll-Scrub, 122 Frames) ═══════════════ */
.seq{position:relative;background:var(--neutral-100)}
.seq-stage{height:260vh}
.seq-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#EDEDEF}
.seq-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.seq-cap{position:absolute;inset:auto 0 0 0;padding:clamp(24px,4vw,56px) 0 clamp(28px,4vw,48px);
  background:var(--gradient-protect);color:var(--td-white);pointer-events:none}
.seq-cap .td-eyebrow{color:var(--td-lime)}
.seq-cap h2{margin-top:var(--space-3);font-size:var(--fs-display-fluid);line-height:var(--lh-display);
  letter-spacing:var(--ls-display);color:var(--td-white)}
.seq-cap h2 .accent{color:var(--td-lime)}
.seq-cap p{margin-top:var(--space-4);font-size:var(--fs-body-lg);color:rgba(255,255,255,.85);max-width:52ch}
.seq-bar{display:block;margin-top:var(--space-6);width:min(320px,50vw);height:2px;
  background:var(--alpha-white-16);border-radius:2px;overflow:hidden}
.seq-bar i{display:block;height:100%;width:0;background:var(--td-lime);
  transition:width 80ms linear}
/* Statischer Fallback (reduced motion / kein Canvas) */
.seq.static .seq-stage{height:auto}
.seq.static .seq-sticky{position:relative;height:auto;aspect-ratio:16/9;max-height:86vh}
.seq.static .seq-bar{display:none}

/* ═══════════════ SUBPAGE-HERO (Branchen) ═══════════════ */
.hero-sub{padding-top:calc(var(--nav-h) + clamp(40px,6vw,72px));padding-bottom:clamp(48px,6vw,88px)}
.hero-sub .crumbs{display:flex;gap:8px;font-size:var(--fs-caption);color:var(--blue-300);margin-bottom:var(--space-5)}
.hero-sub .crumbs a{color:var(--blue-200)}
.hero-sub .crumbs a:hover{color:var(--td-lime)}
.hero-media{margin-top:calc(-1*clamp(24px,4vw,56px));position:relative;z-index:1}
.hero-media img,.hero-media video{width:100%;aspect-ratio:832/464;object-fit:cover;
  border-radius:var(--radius-xl);box-shadow:var(--elevation-4);background:var(--neutral-200)}
.intro{background:var(--surface-page)}
.intro-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,64px)}
.hb-row{margin-top:var(--space-7);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.hb b{display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:15px;color:var(--td-blue)}
.hb span{display:block;margin-top:2px;font-size:var(--fs-caption);color:var(--text-tertiary)}
.points{display:grid;gap:var(--space-5);align-content:start}
.pt{display:flex;gap:12px}
.pt .tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--alpha-lime-24);
  color:var(--lime-700);display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:2px}
.pt b{display:block;font-weight:var(--fw-semibold)}
.pt span{display:block;margin-top:2px;font-size:var(--fs-small);color:var(--text-secondary);line-height:1.55}
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.tech-card{position:relative;padding:var(--space-7);background:var(--surface-card);
  border:1px solid var(--border-hairline);border-radius:var(--radius-md);box-shadow:var(--elevation-1)}
.tech-card.rec{border-color:var(--td-blue);box-shadow:var(--shadow-inset-hair),var(--elevation-1)}
.rec-badge{position:absolute;top:14px;right:14px;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;background:var(--td-lime);color:var(--td-blue);
  padding:5px 12px;border-radius:var(--radius-pill)}
.tech-card h3{margin-top:var(--space-4);font-size:var(--fs-h4)}
.tech-card p{margin-top:var(--space-2);font-size:var(--fs-small);color:var(--text-secondary);line-height:1.55}
.chips-wrap{display:flex;flex-wrap:wrap;gap:10px}
.crosslinks{background:var(--surface-soft)}
.cl-grid{display:flex;flex-wrap:wrap;gap:10px}
.cl-grid a{border:1.5px solid var(--border-default);border-radius:var(--radius-pill);
  padding:10px 18px;font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--text-primary)}
.cl-grid a:hover{border-color:var(--td-blue);color:var(--td-blue);background:var(--alpha-blue-12)}
.cl-grid a[aria-current]{background:var(--td-blue);border-color:var(--td-blue);color:#fff;pointer-events:none}

/* ═══════════════ LEGAL PAGES ═══════════════ */
.legal-page{background:var(--surface-page)}
.legal-body{max-width:var(--container-prose);margin-inline:auto}
.legal-body h1{font-size:var(--fs-display-fluid)}
.legal-body h3{margin-top:var(--space-8);font-size:var(--fs-h5);color:var(--td-blue)}
.legal-body p{margin-top:var(--space-3);color:var(--text-secondary);line-height:1.65}
.legal-body a{border-bottom:1px solid currentColor}
.back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--space-7);
  font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--td-blue)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1199px){
  .v-grid{grid-template-columns:repeat(2,1fr)}
  .sys-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-7) var(--grid-gap)}
  .sys-grid .sys-step:last-child{grid-column:1/-1}
  .f-top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
  .br-grid{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:1fr}
  .bento-video{min-height:320px}
  .ts-grid,.k-grid,.intro-grid{grid-template-columns:1fr}
  .t-grid{grid-template-columns:1fr;gap:var(--space-9)}
  .tech-grid{grid-template-columns:1fr}
  .p-row{grid-template-columns:64px 1fr;grid-template-areas:"num body" "num chip"}
  .p-num{grid-area:num}.p-row>div{grid-area:body}.p-chip{grid-area:chip;justify-self:start;margin-top:var(--space-3)}
}
@media (max-width:639px){
  .f-row{grid-template-columns:1fr}
  .br-grid{grid-template-columns:1fr}
  .br-body p{display:block}
  .m-feats{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr;gap:var(--space-7)}
  .hb-row{grid-template-columns:1fr;gap:var(--space-3)}
  .hero-btns .btn{width:100%}
  .sys-grid{grid-template-columns:1fr}
}