/* Kunden KI - Entwurf Apple. Lokal, keine externen Requests. */
:root{
  --ink:#1d1d1f;
  --ink-mid:#474747;
  --ink-soft:#6e6e6e;
  --hairline:#d6d6d6;
  --canvas:#f5f5f7;
  --paper:#ffffff;
  --wash:#e8e8ed;
  --nav-scrolled:rgba(250,250,252,0.72);
  --blue:#087867;
  --blue-press:#066A5A;
  --link:#087867;
  --ember:#b64400;

  --finish-sky:#c8d8e0;
  --finish-citrus:#dddc8c;
  --finish-starlight:#f0e4d3;
  --finish-silver:#e3e4e5;
  --finish-blush:#e8d0d0;
  --finish-indigo:#596680;
  --finish-midnight:#2e3642;

  --font:'SF Pro Display','SF Pro Text',Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --fs-micro:12px;
  --fs-caption:14px;
  --fs-body:17px;
  --fs-body-lg:21px;
  --fs-subhead:clamp(1.3125rem,1.1rem + 1vw,1.75rem);   /* 21 -> 28 */
  --fs-h3:clamp(2.5rem,2.2rem + 1.2vw,2.75rem);          /* 40 -> 44 */
  --fs-h2:clamp(2.5rem,2rem + 2.4vw,3.5rem);             /* 40 -> 56 */
  --fs-h1:clamp(2.5rem,1.4rem + 5vw,6rem);               /* 40 -> 96 */

  --container:1200px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --section:clamp(4rem,9vw,7.5rem);

  --r-card:28px;
  --r-tile:20px;
  --r-pill:980px;
  --r-badge:36px;
  --r-link:10px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.47;
  letter-spacing:-0.022em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
ul,ol{padding:0;margin:0;list-style:none;}
a{color:inherit;}
button{font:inherit;cursor:pointer;}
p{margin:0 0 1rem;}
p:last-child{margin-bottom:0;}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);}

h1,h2,h3{margin:0;font-weight:700;color:var(--ink);letter-spacing:-0.03em;line-height:1.06;overflow-wrap:break-word;}
h1{font-size:var(--fs-h1);letter-spacing:-0.045em;}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
.tnum{font-variant-numeric:tabular-nums;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.skip-link{position:absolute;left:16px;top:-64px;background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r-link);z-index:200;text-decoration:none;font-weight:600;transition:top 160ms ease;}
.skip-link:focus{top:12px;}

a:focus-visible,button:focus-visible,.btn:focus-visible,.arrow-link:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:var(--r-link);
}

/* Header / Nav */
.site-header{position:sticky;top:0;z-index:100;background:var(--paper);}
.site-header.is-scrolled{background:var(--nav-scrolled);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding-block:14px;position:relative;transition:padding-block 200ms ease;}
.site-header.is-scrolled .header-inner{padding-block:9px;}
.logo-link{display:inline-flex;align-items:center;}
.logo-img{width:168px;height:auto;transition:width 200ms ease;}
.site-header.is-scrolled .logo-img{width:150px;}

.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:transparent;border:0;padding:0;}
.menu-icon,.menu-icon::before,.menu-icon::after{width:24px;height:2.25px;background:var(--ink);display:block;}
.menu-icon{position:relative;}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;}
.menu-icon::before{top:-10px;}
.menu-icon::after{top:10px;}

.site-nav{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--paper);border-radius:var(--r-card);padding:12px;opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none;transition:opacity 220ms ease,transform 220ms ease,visibility 0s linear 220ms;}
.site-nav.is-open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;transition:opacity 220ms ease,transform 220ms ease;}
.site-nav ul{display:flex;flex-direction:column;gap:4px;}
.site-nav a{display:flex;align-items:center;min-height:44px;padding-inline:14px;border-radius:var(--r-link);font-size:var(--fs-body);color:var(--ink-mid);text-decoration:none;font-weight:500;}
.site-nav a:hover{background:var(--wash);color:var(--ink);}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:600;}

@media (min-width:820px){
  .menu-toggle{display:none;}
  .site-nav{position:static;opacity:1;transform:none;visibility:visible;pointer-events:auto;background:none;padding:0;transition:none;}
  .site-nav ul{flex-direction:row;gap:28px;}
  .site-nav a{min-height:auto;padding-inline:0;}
  .site-nav a:hover{background:none;}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 22px;background:var(--blue);color:#fff;font-size:var(--fs-body);font-weight:500;line-height:1;border-radius:var(--r-pill);border:1px solid var(--blue);text-decoration:none;transition:background 160ms ease,border-color 160ms ease;letter-spacing:-0.01em;}
.btn:hover{background:var(--blue-press);border-color:var(--blue-press);}
.btn:active{background:#054C41;border-color:#054C41;}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 22px;background:transparent;color:var(--ink);font-size:var(--fs-body);font-weight:500;line-height:1;border-radius:999px;border:1px solid var(--ink);text-decoration:none;transition:background 160ms ease;letter-spacing:-0.01em;}
.btn-ghost:hover{background:var(--wash);}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

.arrow-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--link);font-size:var(--fs-body);font-weight:500;text-decoration:none;border-radius:var(--r-link);}
.arrow-link .chev{transition:transform 160ms ease;}
.arrow-link:hover{text-decoration:underline;text-underline-offset:3px;}
.arrow-link:hover .chev{transform:translateX(3px);}

/* Bands */
.band{background:var(--paper);}
.band-alt{background:var(--canvas);}
.section{padding-block:var(--section);}
.band .card{background:var(--canvas);}
.band-alt .card{background:var(--paper);}

.eyebrow{font-size:var(--fs-body);color:var(--ink-soft);font-weight:500;margin:0 0 14px;letter-spacing:-0.01em;}
.lead{font-size:var(--fs-subhead);line-height:1.28;color:var(--ink-soft);font-weight:500;letter-spacing:-0.02em;max-width:34ch;}
.section-head{max-width:820px;margin-bottom:clamp(2.5rem,5vw,4rem);}
.section-head .lead{margin-top:20px;max-width:52ch;}
.body-copy{font-size:var(--fs-body);color:var(--ink-mid);max-width:60ch;}

/* Hero */
.hero{padding-block:clamp(3.5rem,8vw,7rem) clamp(2.5rem,6vw,5rem);text-align:center;}
.hero-inner{max-width:920px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:0;}
.hero h1{margin-bottom:22px;}
.hero .lead{max-width:44ch;margin-inline:auto;color:var(--ink-soft);}
.hero .actions{justify-content:center;margin-top:32px;}
.hero-note{font-size:var(--fs-body);color:var(--ink-soft);margin-top:22px;}

/* Video slots */
.visual-wrap{margin-top:clamp(2.5rem,6vw,4.5rem);}
.video-slot{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--finish-silver);}
.video-slot .motif{position:absolute;inset:0;width:100%;height:100%;}
.slot-tag{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.82);color:var(--ink);font-size:var(--fs-micro);font-weight:600;letter-spacing:0.02em;padding:6px 12px;border-radius:var(--r-badge);}
.slot-tag .dot{width:7px;height:7px;border-radius:999px;background:var(--ink);}
.slot-cap{margin-top:14px;font-size:var(--fs-caption);color:var(--ink-soft);max-width:60ch;}
.hero .video-slot,.showcase .video-slot{max-width:980px;margin-inline:auto;}
.hero .slot-cap,.showcase .slot-cap{margin-inline:auto;text-align:left;}

.finish-sky{background:var(--finish-sky);}
.finish-citrus{background:var(--finish-citrus);}
.finish-starlight{background:var(--finish-starlight);}
.finish-silver{background:var(--finish-silver);}
.finish-blush{background:var(--finish-blush);}

/* Grid-Kinder duerfen unter ihre min-content-Breite schrumpfen (sonst Overflow) */
.grid-3>*,.worlds>*,.tile-grid>*,.world-hero-grid>*,.timeline>*,.footer-cols>*,.footer-inner>*{min-width:0;}

/* Card grids */
.grid-3{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr);}}
.card{border-radius:var(--r-card);padding:clamp(28px,4vw,40px);display:flex;flex-direction:column;gap:14px;}
.card .icon{width:40px;height:40px;color:var(--ink);}
.card h3{font-size:var(--fs-h3);}
.card p{font-size:var(--fs-body);color:var(--ink-mid);margin:0;}

/* Worlds (index) */
.worlds{display:grid;grid-template-columns:1fr;gap:24px;}
@media (min-width:820px){.worlds{grid-template-columns:repeat(2,1fr);}}
.world{border-radius:var(--r-card);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:20px;}
.band .world{background:var(--canvas);}
.band-alt .world{background:var(--paper);}
.world .video-slot{aspect-ratio:16/9;}
.world .kicker{font-size:var(--fs-caption);color:var(--ink-soft);font-weight:600;letter-spacing:0.02em;margin:0;}
.world h3{font-size:var(--fs-h3);margin:0;}
.world p{font-size:var(--fs-body);color:var(--ink-mid);margin:0;}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;}
.tags li{background:var(--wash);color:var(--ink-mid);font-size:var(--fs-caption);padding:6px 14px;border-radius:999px;}
.world .arrow-link{align-self:flex-start;}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:36px;}
@media (min-width:820px){.timeline{flex-direction:row;gap:28px;}}
.timeline li{flex:1;display:flex;flex-direction:column;gap:14px;}
.step-num{width:48px;height:48px;border-radius:999px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-body-lg);font-weight:600;}
.timeline h3{font-size:var(--fs-h3);}
.timeline p{font-size:var(--fs-body);color:var(--ink-mid);margin:0;}

/* World page */
.breadcrumb{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink-soft);text-decoration:none;font-size:var(--fs-body);}
.breadcrumb:hover{color:var(--ink);}
.world-hero{padding-block:clamp(2.5rem,5vw,4rem) clamp(2rem,4vw,3rem);}
.world-hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center;}
@media (min-width:860px){.world-hero-grid{grid-template-columns:1.05fr 0.95fr;}}
.world-hero .kicker{font-size:var(--fs-body);color:var(--ink-soft);font-weight:500;margin:0 0 14px;}
.world-hero h1{margin:0 0 22px;}
.world-hero .lead{color:var(--ink-soft);margin-bottom:30px;}
.world-hero .video-slot{aspect-ratio:16/9;}

.catalog-group{padding-block:clamp(3rem,6vw,5rem);}
.catalog-group h2{margin-bottom:clamp(2rem,4vw,3rem);}
.tile-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:640px){.tile-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:980px){.tile-grid{grid-template-columns:repeat(3,1fr);}}
.tile{border-radius:var(--r-tile);padding:26px;display:flex;flex-direction:column;gap:10px;}
.band .tile{background:var(--canvas);}
.band-alt .tile{background:var(--paper);}
.tile-name{font-size:var(--fs-body-lg);font-weight:600;color:var(--ink);letter-spacing:-0.02em;}
.tile-price{font-size:var(--fs-body-lg);font-weight:600;color:var(--ink);letter-spacing:-0.02em;}
.tile-note{font-size:var(--fs-caption);color:var(--ink-soft);}

.closing{text-align:left;}
.closing .inner{max-width:820px;}
.closing h2{margin-bottom:22px;}
.closing .lead{color:var(--ink-soft);margin-bottom:32px;max-width:52ch;}

/* Footer */
.site-footer{background:var(--canvas);padding-block:clamp(3rem,5vw,4.5rem) 2.5rem;}
.footer-inner{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);}
@media (min-width:1000px){.footer-inner{grid-template-columns:1fr 2fr;}}
.footer-brand img{width:150px;height:auto;margin-bottom:16px;}
.footer-brand p{font-size:var(--fs-caption);color:var(--ink-soft);max-width:34ch;}
.footer-cols{display:grid;grid-template-columns:1fr;gap:28px;}
@media (min-width:560px){.footer-cols{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.footer-cols{grid-template-columns:repeat(4,1fr);}}
.footer-col-title{font-size:var(--fs-caption);font-weight:600;color:var(--ink);margin:0 0 14px;}
.footer-cols ul{display:flex;flex-direction:column;gap:6px;}
.footer-cols a{display:inline-flex;min-height:32px;align-items:center;font-size:var(--fs-caption);color:var(--ink-soft);text-decoration:none;}
.footer-cols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.footer-bottom{margin-top:clamp(2.5rem,5vw,3.5rem);display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;font-size:var(--fs-micro);color:var(--ink-soft);}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:6px 14px;}
.footer-bottom a{color:var(--link);text-decoration:none;}
.footer-bottom a:hover{text-decoration:underline;text-underline-offset:2px;}

/* Reveal */
.reveal{opacity:0;transform:translateY(12px);transition:opacity 260ms cubic-bezier(.16,1,.3,1),transform 260ms cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1;transform:none;}
}


/* Brand Experience (Huelle) */
.finish-midnight{background:var(--finish-midnight);}
.bx-platzhalter{min-height:clamp(360px,45vw,520px);align-items:center;justify-content:center;}
.bx-platzhalter p.bx-folgt{color:#707070;font-size:var(--fs-body);font-weight:500;letter-spacing:0.02em;margin:0;}

/* Scan-Block im Hero */
.scan-form{display:flex;gap:12px;width:100%;max-width:560px;margin-top:30px;flex-wrap:wrap;justify-content:center;}
.scan-input{flex:1 1 260px;min-height:48px;padding:11px 20px;font-size:var(--fs-body);color:var(--ink);background:var(--paper);border:1.5px solid var(--ink-soft);border-radius:var(--r-card);}
.scan-input:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.scan-btn{border-radius:var(--r-card);min-height:48px;}
.scan-note{font-size:var(--fs-caption);color:var(--ink-soft);margin-top:14px;}

/* Eingebaute Bilder */
.bild-block{margin:clamp(1.25rem,2.5vw,2rem) 0 clamp(1.5rem,3vw,2.5rem);}
.bild-block img{display:block;width:100%;height:auto;border-radius:var(--r-card);}
.video-slot img.motif{object-fit:cover;}
.video-slot img.motif-contain{object-fit:contain;}

/* Kanal-Block (Assistenten-Welt) */
.world-hero-grid.solo{grid-template-columns:1fr;}
.kanal-zeile{font-size:var(--fs-body-lg);font-weight:600;letter-spacing:-0.02em;margin-bottom:24px;}
.kanal-reihe{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:22px;}
.kanal-reihe::-webkit-scrollbar{display:none;}
.kanal-reihe:focus-visible{outline:3px solid var(--blue);outline-offset:4px;}
.kanal-reihe img{flex:0 0 88%;width:88%;height:auto;border-radius:22px;background:#f5f5f7;scroll-snap-align:center;display:block;}
@media (min-width:900px){.kanal-reihe{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;}.kanal-reihe img{width:100%;flex:none;}}