/* ============================================================
   DADCAR — Intro
   Baut auf dem bestehenden Design auf: gleiche Tokens, gleiches
   Logo, gleiche Modulkopf-Typografie.

   BLOCK A (Basis) steckt bereits in assets/css/site.css.
   Beim Einbau ins Projekt kann Block A ersatzlos entfallen —
   dann nur Block B nach site.css laden.
   ============================================================ */


/* ============================================================
   BLOCK A — BASIS  (identisch zu site.css)
   ============================================================ */

:root{
  --ink:#22262a;
  --ink-deep:#111416;
  --paper:#f4f4f1;
  --white:#fbfbf8;
  --silver:#a2a8ad;
  --silver-dark:#686e73;
  --orange:#f05a28;
  --line:#ffffff2e;
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

.brand-stripes{
  align-items:stretch;
  gap:8px;
  height:70px;
  display:inline-flex;
  transform:skew(-18deg);
}
.brand-stripes.compact{ gap:3px; height:17px }
.brand-stripes i{ background:currentColor; width:17px; display:block }
.brand-stripes.compact i{ width:5px }

.dadcar-logo{
  width:max-content;
  color:var(--white);
  flex-direction:column;
  align-items:center;
  line-height:1;
  display:inline-flex;
}
.dadcar-logo-main{
  letter-spacing:-.065em;
  align-items:center;
  font-size:clamp(20px,1.85vw,31px);
  display:flex;
}
.dadcar-logo-main .brand-stripes{ margin-right:7px }
.dadcar-logo-main .brand-stripes i:first-child{ background:var(--orange) }
.dadcar-logo-main .brand-stripes i:nth-child(2){ background:var(--white) }
.dadcar-logo-main .brand-stripes i:nth-child(3){ background:var(--silver) }
.dadcar-logo-main strong{ color:var(--white); font-weight:850 }
.dadcar-logo-main>span:last-child{ color:var(--silver); margin-left:2px; font-weight:350 }
.dadcar-logo-sub{
  width:78%;
  color:var(--silver);
  letter-spacing:.23em;
  align-items:center;
  gap:6px;
  margin-top:4px;
  font-size:8px;
  font-weight:450;
  display:flex;
}
.dadcar-logo-sub i{ background:var(--orange); opacity:.9; flex:1; height:1px }

.site-header{
  z-index:80;
  color:#fff;
  background:linear-gradient(#040506eb,#04050600);
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  width:100%;
  height:92px;
  padding:0 3.2vw;
  display:grid;
  position:fixed;
  top:0;
  left:0;
}
.logo-link{ text-decoration:none }
.header-location{
  color:#ffffff94;
  letter-spacing:.14em;
  text-transform:uppercase;
  align-items:center;
  gap:10px;
  font-size:11px;
  display:flex;
}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:#63d68d;
  box-shadow:0 0 0 4px #63d68d24;
}
.menu-trigger{
  color:#fff;
  cursor:pointer;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  background:#ffffff0f;
  border:1px solid #fff3;
  border-radius:999px;
  justify-self:end;
  align-items:center;
  gap:14px;
  padding:7px 7px 7px 18px;
  font-family:inherit;
  transition:background .25s,border-color .25s,transform .16s cubic-bezier(.23,1,.32,1);
  display:flex;
}
.menu-trigger:hover{ background:#ffffff1f; border-color:#ffffff73 }
.menu-trigger:active{ transform:scale(.97) }
.menu-trigger>span:first-child{ letter-spacing:.14em; text-transform:uppercase; font-size:11px }
.menu-wrench{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--white);
  color:var(--ink);
  display:grid;place-items:center;
}
.menu-wrench svg{ width:19px;height:19px }

.section-label{
  width:max-content;
  max-width:100%;
  color:var(--ink);
  font-family:var(--font-display);
  text-transform:uppercase;
  align-items:center;
  gap:10px;
  line-height:1;
  display:inline-flex;
}
.section-label>.brand-stripes{ flex:none; gap:3px; height:21px }
.section-label>.brand-stripes i{ width:6px }
.section-label>.brand-stripes i:first-child{ background:var(--orange) }
.section-label>.brand-stripes i:nth-child(2){ background:var(--ink) }
.section-label>.brand-stripes i:nth-child(3){ background:var(--silver) }
.section-label-type{
  letter-spacing:.055em;
  align-items:baseline;
  gap:.28em;
  min-width:max-content;
  font-size:clamp(13px,1.15vw,18px);
  display:inline-flex;
}
.section-label-type strong{ color:var(--ink); font-weight:850 }
.section-label-type>span{ color:var(--silver-dark); font-weight:330 }
.section-label-rule{
  background:linear-gradient(90deg,var(--orange),#686e7324);
  width:clamp(24px,5vw,82px);
  height:1px;
}
.section-label.light{ color:var(--white) }
.section-label.light>.brand-stripes i:nth-child(2){ background:var(--white) }
.section-label.light .section-label-type strong{ color:var(--white) }
.section-label.light .section-label-type>span{ color:var(--silver) }
.section-label.light .section-label-rule{ background:linear-gradient(90deg,var(--orange),#ffffff24) }

.github-cta{
  width:60px;
  color:var(--ink);
  letter-spacing:.08em;
  text-transform:uppercase;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  background:#fbfbf894;
  border:1px solid #22262a6b;
  border-radius:999px;
  justify-content:flex-end;
  align-items:center;
  gap:0;
  padding:5px;
  font-size:12px;
  font-weight:650;
  font-family:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:width .48s cubic-bezier(.16,1,.3,1),padding .48s cubic-bezier(.16,1,.3,1),gap .48s cubic-bezier(.16,1,.3,1),background .24s,border-color .24s,transform .24s;
  display:inline-flex;
  overflow:hidden;
}
.github-cta>span{
  opacity:0;
  white-space:nowrap;
  max-width:0;
  transition:max-width .48s cubic-bezier(.16,1,.3,1),opacity .18s,transform .48s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
  transform:translate(12px);
}
.github-cta i{
  width:48px;height:48px;
  color:var(--white);
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:50%;
  flex:0 0 48px;
  place-items:center;
  font-style:normal;
  transition:color .24s,background .24s,transform .48s cubic-bezier(.16,1,.3,1);
  display:grid;
}
.github-cta:hover,.github-cta:focus-visible{
  background:var(--white);
  border-color:var(--orange);
  outline:none;
  gap:18px;
  width:260px;
  padding:5px 6px 5px 22px;
  transform:translateY(-2px);
}
.github-cta:hover>span,.github-cta:focus-visible>span{ opacity:1; max-width:170px; transform:translate(0) }
.github-cta:hover i,.github-cta:focus-visible i{ color:var(--ink); background:var(--orange); transform:rotate(-35deg) }

.hero-brand-lockup{
  width:max-content;
  color:var(--white);
  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);
  background:linear-gradient(135deg,#1c1f21f5,#3f4346d6);
  border:1px solid #ffffff4d;
  align-items:center;
  gap:15px;
  padding:11px 16px 10px;
  display:inline-flex;
  box-shadow:0 14px 38px #0e10122e;
}
.hero-brand-lockup .dadcar-logo-main{ font-size:21px }
.hero-brand-lockup .dadcar-logo-sub{ margin-top:3px; font-size:6.5px }
.hero-brand-divider{ background:linear-gradient(#0000,#ffffff70,#0000); width:1px; height:31px }
.hero-brand-city{
  color:var(--silver);
  letter-spacing:.24em;
  text-transform:uppercase;
  align-items:center;
  gap:8px;
  font-size:9px;
  font-weight:650;
  display:flex;
}
.hero-brand-city:before{
  content:"";
  background:var(--orange);
  width:12px;height:2px;
  transform:skew(-18deg);
}


/* ============================================================
   BLOCK B — INTRO  (neu, überschreibt die alte Sequenz)
   ============================================================ */

.intro-sequence{
  --intro-progress:0;
  --wheel-zoom:0;
  --pull:0;
  --dissolve:0;
  --scene-dim:0;
  --statement-one:0;
  --statement-two:0;
  --courtyard-reveal:0;
  --final-brand:0;
  --cut-flash:0;

  --vid-origin:50% 50%;
  --vid-transform:none;
  --pho-origin:50% 50%;
  --pho-transform:none;
  --smoke-origin:50% 50%;
  --smoke-transform:none;

  color:#fff;
  background:var(--ink-deep);
  height:520svh;
  position:relative;
}

.intro-sticky{
  isolation:isolate;
  background:#050607;
  height:100svh;
  position:sticky;
  top:0;
  overflow:hidden;
}

.intro-video-stage,
.intro-porsche-stage,
.intro-smoke-stage,
.intro-courtyard-stage,
.intro-cinematic-dimmer,
.intro-film-grain,
.intro-cut-flash{
  position:absolute;
  inset:0;
}

/* ---- Ebene 1: der Film ---- */
.intro-video-stage{
  z-index:1;
  transform-origin:var(--vid-origin);
  transform:var(--vid-transform);
  filter:saturate(.72) contrast(1.18) brightness(.82);
  will-change:transform,opacity;
  overflow:hidden;
}
.intro-video-stage video{
  object-fit:cover;
  object-position:50% 50%;
  width:100%;
  height:100%;
  display:block;
}
.intro-sequence.is-cut .intro-video-stage{ opacity:0 }

/* ---- Ebene 2: das Foto. Liegt darunter und ist von Anfang an
        sichtbar — der Film deckt es vollständig ab. Kein Crossfade. ---- */
.intro-porsche-stage{
  z-index:0;
  transform-origin:var(--pho-origin);
  transform:var(--pho-transform);
  filter:saturate(calc(.78 + var(--pull) * .1))
         contrast(1.16)
         brightness(calc(.94 - var(--pull) * .18));
  will-change:transform,filter;
  overflow:hidden;
}
.intro-porsche-stage img{
  object-fit:cover;
  object-position:50% 38%;
  width:100%;
  height:100%;
  display:block;
}

/* ---- Ebene 3: der eingefrorene Rauch ----
   Pixelgleich mit dem letzten Filmbild. Löst sich nach Helligkeit
   auf: dunkle Bereiche zuerst, heller Rauch zuletzt. Dabei fährt
   die Kamera weiter zurück — der Rauch bleibt am Rad kleben. */
.intro-smoke-stage{
  z-index:2;
  transform-origin:var(--smoke-origin);
  transform:var(--smoke-transform);
  filter:saturate(.72) contrast(1.18) brightness(.82)
         blur(calc(var(--dissolve) * 4px));
  opacity:0;
  will-change:transform,filter;
  pointer-events:none;
}
.intro-sequence.is-cut .intro-smoke-stage{ opacity:1 }
.intro-smoke-stage canvas{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Ersatzweg, wenn der Browser keine Pixel aus dem Video lesen darf
   (z. B. beim Öffnen über file://). Dann blendet der Film weich weg. */
.intro-sequence.no-pixels .intro-video-stage{
  opacity:calc(1 - var(--dissolve));
  filter:saturate(.72) contrast(1.18) brightness(calc(.82 + var(--dissolve) * .5))
         blur(calc(var(--dissolve) * 12px));
}
.intro-sequence.no-pixels.is-cut .intro-video-stage{ opacity:calc(1 - var(--dissolve)) }

/* ---- Der Lichtblitz im Moment des Schnitts ----
   Kaschiert jeden Rest-Unterschied zwischen Filmbild und Foto. */
.intro-cut-flash{
  z-index:3;
  pointer-events:none;
  opacity:var(--cut-flash);
  mix-blend-mode:screen;
  background:radial-gradient(58% 46% at 50% 50%, #fff4e8 0%, #fff4e800 72%);
}

.intro-cinematic-dimmer{
  z-index:4;
  pointer-events:none;
  opacity:var(--scene-dim);
  background:
    linear-gradient(90deg,#040506cc,#04050647 62%,#04050699),
    linear-gradient(#0405064d,#0000 52%,#040506ad);
}

.intro-film-grain{
  z-index:5;
  pointer-events:none;
  opacity:.12;
  mix-blend-mode:soft-light;
  background-image:repeating-radial-gradient(circle at 23% 37%,#ffffff80 0 1px,#0000 1px 4px);
  background-size:5px 5px;
}

/* ---- Aussagen ---- */
.intro-statement{
  z-index:6;
  pointer-events:none;
  text-transform:uppercase;
  width:min(1120px,88vw);
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:22px;
  display:grid;
  position:absolute;
  top:50%;
  left:6vw;
}
.statement-one{
  opacity:var(--statement-one);
  transform:translateY(calc(-44% + (1 - var(--statement-one)) * 55px));
}
.statement-two{
  opacity:var(--statement-two);
  transform:translateY(calc(-44% + (1 - var(--statement-two)) * 55px));
}
.intro-statement>.brand-stripes{
  height:clamp(48px,6vw,92px);
  color:var(--orange);
  gap:7px;
}
.intro-statement>.brand-stripes i{ width:clamp(11px,1.3vw,20px) }
.intro-statement>.brand-stripes i:nth-child(2){ background:var(--white) }
.intro-statement>.brand-stripes i:nth-child(3){ background:var(--silver) }
.intro-statement-title{
  font-family:var(--font-display);
  letter-spacing:-.035em;
  margin:0;
  font-size:clamp(56px,8vw,148px);
  line-height:.8;
}
.intro-statement-title strong,
.intro-statement-title span,
.intro-statement-title em{ display:block }
.intro-statement-title strong{ color:var(--white); font-weight:860 }
.intro-statement-title span{ color:var(--silver); font-weight:320 }
.intro-statement-title em{
  color:var(--orange);
  letter-spacing:.18em;
  margin-top:.13em;
  font-size:.36em;
  font-style:normal;
  font-weight:720;
}

/* Zeilenweiser Versatz: die Zeilen kommen kurz nacheinander,
   nicht alle auf einmal. */
.statement-one .intro-statement-title strong,
.statement-two .intro-statement-title strong{ --line-delay:0 }
.statement-one .intro-statement-title span,
.statement-two .intro-statement-title span{ --line-delay:1 }
.statement-two .intro-statement-title em{ --line-delay:2 }
.intro-statement-title > *{
  opacity:clamp(0,calc(var(--s) * 3 - var(--line-delay) * .55),1);
  transform:translateY(calc((1 - clamp(0,calc(var(--s) * 3 - var(--line-delay) * .55),1)) * 26px));
  filter:blur(calc((1 - clamp(0,calc(var(--s) * 3 - var(--line-delay) * .55),1)) * 7px));
}
.statement-one{ --s:var(--statement-one) }
.statement-two{ --s:var(--statement-two) }

/* ---- Der Hof ---- */
.intro-courtyard-stage{
  display:none;
  z-index:7;
  opacity:var(--courtyard-reveal);
  transform:scale(calc(1.14 - var(--courtyard-reveal) * .14));
  filter:saturate(.86) contrast(1.1) brightness(.88)
         blur(calc((1 - var(--courtyard-reveal)) * 10px));
  will-change:opacity,transform,filter;
  background:
    linear-gradient(#0405065c,#04050614 42%,#04050652),
    url(../images/dadcar-courtyard.jpg) 50% / cover no-repeat;
}

/* ---- Markenabschluss ---- */
.intro-final-brand{
  z-index:8;
  opacity:var(--final-brand);
  transform:translate(-50%,calc(-44% + (1 - var(--final-brand)) * 45px));
  flex-direction:column;
  align-items:center;
  gap:30px;
  display:flex;
  position:absolute;
  top:50%;
  left:50%;
}
.intro-sequence:not(.is-final) .intro-final-brand{ pointer-events:none }
.intro-final-brand .hero-brand-lockup{
  transform-origin:50%;
  transform:scale(1.3);
}
.intro-final-brand .github-cta{
  color:var(--white);
  background:#0a0c0d57;
  border-color:#ffffff7a;
}
.intro-final-brand .github-cta:hover,
.intro-final-brand .github-cta:focus-visible{
  color:var(--ink);
  background:var(--white);
  border-color:var(--orange);
}

.intro-actions-group{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  max-width:92vw;
}
.intro-action-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 16px 8px 20px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-decoration:none;
  font-family:inherit;
  cursor:pointer;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  min-height:46px;
  box-sizing:border-box;
}
.intro-action-btn i{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 30px;
  transition:transform .25s ease,background .22s ease,color .22s ease;
}
.intro-action-primary{
  color:var(--white);
  background:var(--orange);
  border:1px solid var(--orange);
  box-shadow:0 8px 24px rgba(240,90,40,.35);
}
.intro-action-primary i{
  background:#111416;
  color:var(--white);
}
.intro-action-primary:hover,
.intro-action-primary:focus-visible{
  background:#ff6a38;
  border-color:#ff6a38;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(240,90,40,.45);
}
.intro-action-primary:hover i{
  transform:translateX(2px);
}
.intro-action-secondary{
  color:var(--white);
  background:rgba(18,20,22,.65);
  border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.intro-action-secondary i{
  background:rgba(255,255,255,.15);
  color:var(--white);
}
.intro-action-secondary:hover,
.intro-action-secondary:focus-visible{
  background:rgba(255,255,255,.95);
  color:var(--ink);
  border-color:var(--white);
  transform:translateY(-2px);
}
.intro-action-secondary:hover i{
  background:var(--orange);
  color:var(--white);
  transform:translateX(2px);
}

@media (max-width:600px){
  .intro-actions-group{
    flex-direction:column;
    gap:10px;
    width:100%;
    max-width:280px;
  }
  .intro-action-btn{
    width:100%;
    justify-content:space-between;
    padding:8px 12px 8px 16px;
    font-size:11px;
    min-height:44px;
  }
}

/* ---- Filmanzeige und Hinweis ---- */
.intro-progress{
  z-index:9;
  color:#ffffff9e;
  letter-spacing:.14em;
  text-transform:uppercase;
  grid-template-columns:auto 90px auto;
  align-items:center;
  gap:10px;
  font-size:8px;
  font-weight:650;
  display:grid;
  position:absolute;
  bottom:5vh;
  right:3.2vw;
}
.intro-progress>i{ background:#ffffff4d; height:1px; display:block; overflow:hidden }
.intro-progress b{
  background:var(--orange);
  width:100%;height:100%;
  transform:scaleX(var(--intro-progress));
  transform-origin:0;
  display:block;
}
.intro-progress span{ transition:color .3s }
.intro-sequence.is-cut .intro-progress span:first-child{ color:#ffffff40 }
.intro-sequence.is-cut .intro-progress span:last-child{ color:var(--white) }

.intro-scroll-hint{
  z-index:9;
  color:#ffffff94;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:clamp(0,calc(1 - var(--intro-progress) * 9),1);
  font-size:8px;
  font-weight:650;
  position:absolute;
  bottom:5vh;
  left:50%;
  transform:translate(-50%);
}

/* ---- Justiermodus  (?debug=1 oder Taste D) ---- */
.intro-debug{
  z-index:99;
  display:none;
  flex-direction:column;
  gap:8px;
  position:fixed;
  left:16px;
  bottom:16px;
  width:300px;
  padding:15px 17px;
  border:1px solid #ffffff29;
  border-radius:8px;
  background:#080a0bee;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  line-height:1.5;
  color:#d6dadd;
}
.intro-debug.is-on{ display:flex }
.intro-debug b{ color:var(--orange); font-weight:600 }
.intro-debug .row{ display:flex; justify-content:space-between; gap:16px }
.intro-debug label{ display:flex; justify-content:space-between; align-items:center; gap:10px }
.intro-debug input[type=range]{ width:150px; accent-color:var(--orange) }
.intro-debug .btns{ display:flex; gap:6px; flex-wrap:wrap; margin-top:3px }
.intro-debug button{
  padding:6px 10px;
  border:1px solid #ffffff33;
  border-radius:4px;
  background:none;
  color:#d6dadd;
  font-family:inherit;
  font-size:10px;
  cursor:pointer;
}
.intro-debug button:active{ transform:scale(.97) }
.intro-sequence.is-onion .intro-video-stage,
.intro-sequence.is-onion .intro-smoke-stage{ opacity:.5 }

/* ---- Reduzierte Bewegung: Standbild statt Sequenz ---- */
@media (prefers-reduced-motion:reduce){
  .intro-sequence{
    height:100svh;
    --pull:1; --scene-dim:1; --statement-two:1; --final-brand:1;
  }
  .intro-sticky{ position:relative }
  .intro-video-stage,
  .intro-smoke-stage,
  .intro-cut-flash,
  .intro-courtyard-stage,
  .statement-one,
  .intro-scroll-hint,
  .intro-progress{ display:none }
  .intro-porsche-stage{ transform:none }
  .statement-two{ transform:translateY(-64%) }
  .intro-statement-title > *{ opacity:1; transform:none; filter:none }
  .intro-final-brand{ top:auto; bottom:9vh; transform:translate(-50%,0) }
}

@media (max-width:860px){
  .intro-statement{ left:clamp(16px,5vw,24px); gap:12px; width:calc(100% - clamp(32px,10vw,48px)); max-width:100%; box-sizing:border-box }
  .intro-statement>.brand-stripes{ height:clamp(34px,9vw,58px); gap:5px }
  .intro-statement>.brand-stripes i{ width:clamp(8px,2.2vw,13px) }
  .intro-statement-title{ font-size:clamp(26px,8vw,44px); line-height:.88; overflow-wrap:break-word; hyphens:auto }
  .site-header{ height:76px; padding:0 5vw }
  .header-location{ display:none }
  .intro-final-brand .hero-brand-lockup{ transform:scale(1) }
}
@media (min-width:601px) and (max-width:860px){
  .intro-statement-title{ font-size:clamp(38px,8.5vw,64px) }
}