@import url('../schriften/schriften.css');

/* ========================================================================
   KORVIN Automobile - Grundstil (geteilte Basis)
   Konzept A "SCHWARZBLENDE". Farben, Typo, Kopf, Fuss, Bedienelemente.
   Seitenspezifisches steht in start.css bzw. recht.css.
   ======================================================================== */

:root{
  --flaeche:#08090A;
  --tief:#000000;
  --feld:#111417;
  --text:#E8E9EA;
  --leise:#9AA0A6;
  --rahmen:#6B7278;
  --akzent:#7DA8C9;
  --akzent-hell:#A8CBE4;

  --schrift-display:'Big Shoulders Display',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --schrift-text:'Sora','Segoe UI',system-ui,sans-serif;

  --rand:clamp(1.25rem,5vw,4.5rem);
  --max:1360px;
  --kopf-h:64px;
  --streifen-h:28px;

  --tempo:.5s;
  --kurve:cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,video,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none !important}

body{
  background:var(--flaeche);
  color:var(--text);
  font-family:var(--schrift-text);
  font-weight:300;
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* Fliesstext lesbar und linksbuendig. Bewusst gegen die Vorbilder,
   die ihn winzig und mittig setzen (design-prinzipien.md, Negativliste). */
p{max-width:62ch}
p.voll,.streifen p,.fuss p,.hinweis{max-width:none}

/* ---- Typografie ---- */
.display{
  font-family:var(--schrift-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  line-height:.96;
  /* Keine Silbentrennung in Versalien (websites.md 6b), aber ein sehr langes
     Wort darf umbrechen, statt den Schirm aufzudehnen. Bricht ohne Trennstrich. */
  hyphens:none;
  overflow-wrap:break-word;
}
.klein-versal{
  font-family:var(--schrift-text);
  font-weight:600;
  font-size:.6875rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  line-height:1.4;
}

/* ---- Sprungmarke ---- */
.sprung{
  position:absolute;left:var(--rand);top:calc(var(--streifen-h) + 6px);
  transform:translateY(-200%);
  z-index:80;background:var(--akzent);color:var(--tief);
  padding:.75rem 1.1rem;min-height:44px;display:inline-flex;align-items:center;
  font-weight:600;font-size:.875rem;
  transition:transform .2s var(--kurve);
}
.sprung:focus{transform:translateY(0)}

/* ---- Fokusring: heller Kern, dunkler Ring. Sitzt auf Flaeche UND auf Foto. ---- */
:focus-visible{
  outline:2px solid #FFFFFF;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(8,9,10,.92);
  border-radius:1px;
}

/* ---- Demo-Streifen: schmal, einzeilig, volle Breite (Lehre aus Demo 3) ---- */
.demo-streifen{
  position:relative;z-index:60;
  height:var(--streifen-h);
  display:flex;align-items:center;
  background:var(--akzent);color:#06181F;
  padding:0 var(--rand);
  font-family:var(--schrift-text);font-weight:600;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo-streifen b{font-weight:600}
.demo-streifen .zusatz{font-weight:400;opacity:.85}
@media (max-width:520px){ .demo-streifen .zusatz{display:none} }

/* ---- Kopf: sitzt mit dem Streifen in einem gemeinsamen Container,
        haengt an top:0 statt an einem geratenen Abstand. ---- */
.kopfzone{position:relative;z-index:60}
.kopf{
  height:var(--kopf-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:0 var(--rand);
  background:rgba(8,9,10,.72);
  border-bottom:1px solid rgba(232,233,234,.1);
  position:sticky;top:0;
}
/* KEIN backdrop-filter am Kopf: macht ihn zum Containing Block fuer das
   feste Mobilmenue (Falle aus Demo 3). */

.marke{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;
  color:var(--text);text-decoration:none}
.marke svg{height:20px;width:auto;overflow:visible}
.marke:hover{color:var(--akzent-hell)}

.kopf__nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.25rem)}
.kopf__nav a{
  color:var(--text);text-decoration:none;
  font-weight:600;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;min-height:44px;
  position:relative;
}
.kopf__nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:14px;height:1px;
  background:var(--akzent);
  transition:right var(--tempo) var(--kurve);
}
.kopf__nav a:hover::after,.kopf__nav a[aria-current="page"]::after{right:0}

/* ---- Bedienelement 1: die Handlung. Kein Kasten.
        Ein Wort, davor ein Strich, der beim Zeigen auswaechst.
        Waechst per transform, nicht per width (websites.md 3c). ---- */
.tun{
  display:inline-flex;align-items:center;gap:.9rem;
  min-height:44px;padding:.35rem 0;
  background:none;border:0;cursor:pointer;text-decoration:none;
  color:var(--text);
  font-family:var(--schrift-text);font-weight:600;
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  text-align:left;
}
.tun__strich{
  flex:0 0 auto;width:56px;height:1px;background:var(--akzent);
  transform:scaleX(.43);transform-origin:left center;
  transition:transform var(--tempo) var(--kurve);
}
.tun__wort{transition:transform var(--tempo) var(--kurve)}
.tun:hover .tun__strich,.tun:focus-visible .tun__strich{transform:scaleX(1)}
.tun:hover .tun__wort,.tun:focus-visible .tun__wort{transform:translateX(10px)}
.tun--akzent .tun__wort{color:var(--akzent)}

/* ---- Bedienelement 2: der Schalter. Wort auf einer Grundlinie. ---- */
.schalter{
  display:inline-flex;flex-direction:column;gap:.5rem;
  min-height:44px;justify-content:center;
  background:none;border:0;cursor:pointer;padding:.25rem 0;
  color:var(--leise);
  font-family:var(--schrift-text);font-weight:600;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
}
.schalter__linie{
  height:1px;width:100%;background:var(--rahmen);
  transform:scaleX(.34);transform-origin:left center;
  transition:transform var(--tempo) var(--kurve),background var(--tempo) var(--kurve);
}
.schalter:hover{color:var(--text)}
.schalter[aria-selected="true"],.schalter[aria-pressed="true"]{color:var(--text)}
.schalter[aria-selected="true"] .schalter__linie,
.schalter[aria-pressed="true"] .schalter__linie{transform:scaleX(1);background:var(--akzent)}

/* ---- Die Blende: zwei Balken fahren auseinander und geben das Bild frei ---- */
.blende{position:relative;overflow:hidden;background:var(--tief)}
.blende img,.blende video{width:100%;height:100%;object-fit:cover}
.blende::before,.blende::after{
  content:'';position:absolute;left:0;right:0;height:50.5%;
  background:var(--flaeche);z-index:2;
  transform:scaleY(1);transition:transform 1.05s var(--kurve);
}
.blende::before{top:0;transform-origin:top center}
.blende::after{bottom:0;transform-origin:bottom center}
.blende.offen::before,.blende.offen::after{transform:scaleY(0)}

/* ---- Mobilmenue: einfahrendes Panel, ausserhalb des Kopfes ---- */
.menue-knopf{
  display:none;align-items:center;gap:.6rem;
  min-height:44px;min-width:44px;background:none;border:0;cursor:pointer;
  color:var(--text);
  font-weight:600;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
}
.menue-knopf .balken{display:block;width:26px;height:1px;background:currentColor}
.menue-knopf .balken+.balken{margin-top:7px}

.dunkel{
  position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.72);
  opacity:0;pointer-events:none;transition:opacity var(--tempo) var(--kurve);
}
.dunkel.an{opacity:1;pointer-events:auto}

.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:75;
  width:min(88vw,340px);
  background:var(--tief);
  border-left:1px solid rgba(232,233,234,.14);
  padding:1.5rem 1.75rem 2.5rem;
  display:flex;flex-direction:column;gap:1.75rem;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--tempo) var(--kurve),visibility var(--tempo);
}
.panel.an{transform:translateX(0);visibility:visible}
.panel__kopf{display:flex;align-items:center;justify-content:space-between}
.panel__zu{
  min-height:44px;min-width:44px;background:none;border:0;cursor:pointer;color:var(--text);
  font-weight:600;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
}
.panel nav ul{display:flex;flex-direction:column}
.panel nav a{
  display:flex;align-items:baseline;gap:1rem;
  min-height:52px;align-items:center;
  color:var(--text);text-decoration:none;
  border-bottom:1px solid rgba(232,233,234,.1);
  font-family:var(--schrift-display);font-weight:600;
  font-size:1.5rem;letter-spacing:.1em;text-transform:uppercase;
}
/* Die Blende im Kleinen (design.md): vor jedem Eintrag derselbe Balken wie am
   .tun, der beim Zeigen auswaechst. Vorher stand hier eine nummerierte Liste,
   die es in dieser Form schon in einem anderen MD-Projekt gibt (websites.md 2f). */
.panel nav a .tun__strich{width:28px}
.panel nav a:hover .tun__strich,
.panel nav a:focus-visible .tun__strich{transform:scaleX(1)}
.panel nav a:hover{color:var(--akzent-hell)}
.panel__fuss{margin-top:auto;color:var(--leise);font-size:.8125rem}
.panel__fuss a{color:var(--text);display:inline-flex;align-items:center;min-height:44px}

@media (max-width:900px){
  .kopf__nav{display:none}
  .menue-knopf{display:inline-flex}
}
@media (min-width:901px){
  .panel,.dunkel{display:none}
}

/* ---- Fuss ---- */
.fuss{
  border-top:1px solid rgba(232,233,234,.12);
  padding:clamp(3rem,7vw,5.5rem) var(--rand) 2.5rem;
  background:var(--tief);
}
.fuss__schnitt{
  max-width:var(--max);margin:0 auto;
  display:grid;gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:end;
}
.fuss__wort{
  font-size:clamp(2rem,5.6vw,4.25rem);
  letter-spacing:.09em;line-height:.96;max-width:none;
  text-shadow:0 0 4px var(--tief),0 0 4px var(--tief);
}
.fuss__angaben{display:grid;gap:1.5rem}
.fuss a{color:var(--text);text-decoration:none}
.fuss__satz a{display:inline-flex;align-items:center;min-height:44px}
.fuss a:hover{color:var(--akzent-hell)}
.fuss__zeile{
  max-width:var(--max);margin:clamp(2.5rem,5vw,4rem) auto 0;
  padding-top:1.5rem;border-top:1px solid rgba(232,233,234,.1);
  display:flex;flex-wrap:wrap;gap:.5rem clamp(1.5rem,3vw,2.5rem);align-items:center;
  color:var(--leise);font-size:.8125rem;
}
.fuss__zeile p{margin-left:auto;max-width:none}
.fuss__wege{display:flex;flex-wrap:wrap;gap:.25rem clamp(1rem,2vw,1.75rem)}
.fuss__wege a{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
}
@media (max-width:768px){
  .fuss__schnitt{grid-template-columns:1fr;align-items:start}
  .fuss__zeile p{margin-left:0}
}

/* ---- Reveal ---- */
.auf{opacity:0;transform:translateY(22px);transition:opacity .8s var(--kurve),transform .8s var(--kurve)}
.auf.da{opacity:1;transform:none}

/* ======================================================================
   Reduced Motion: hier Pflicht, nicht Kuer (design.md).
   Alles steht sofort im Endzustand, nichts bewegt sich.
   ====================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .auf{opacity:1;transform:none}
  .blende::before,.blende::after{transform:scaleY(0)}
  .tun__strich{transform:scaleX(1)}
  .schalter__linie{transform:scaleX(1)}
}