/* ==========================================================================
   RB Motors – Stylesheet
   Alle Pfade relativ (funktioniert in jedem Unterordner des Servers).
   ========================================================================== */

/* ---------- Fonts (lokal, keine Google-Verbindung → DSGVO-freundlich) ---- */
@font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokens ------------------------------------------------------- */
:root {
  --black: #000;
  --white: #fff;
  --ink: #111;
  --text: #1c1c1c;
  --muted: #4a4a4a;
  --line: #7d7d7d;          /* Kartenrahmen, Trennlinien hell */
  --line-soft: #9b9b9b;
  --line-dark: #c9c9c9;     /* Linien auf Schwarz */
  --placeholder: #c4c4c4;

  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Jost", "Futura", "Century Gothic", "Avenir Next", Arial, sans-serif;

  --max: 1440px;
  --gutter: clamp(20px, 8.125vw, 117px);
  --lc: 25.4%;              /* linke Titelspalte (306px bei 1440) */
  --gap: 23px;              /* Kartenabstand */
  --sec: clamp(56px, 5.6vw, 80px);
  --cut: 36px;              /* Eckschnitt Karten */
  --nav-h: 44px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.25, .1, .25, 1);
  --t-fast: .35s;
  --t-med: .7s;
  --t-slow: 1.1s;
  --rise: 28px;
}

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* Fallback */
  overflow-x: clip;     /* rechte Linien laufen bis zum Rand, ohne Scrollbar */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1.45em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

.sr-only {
  position: absolute !important; 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: 12px; top: -60px; z-index: 200;
  background: var(--white); color: var(--black); padding: 10px 16px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout ------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  position: relative;
}
/* Abstand Inhaltskante → rechter Viewportrand (für randlose Linien) */
.wrap { --bleed: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }

.split {
  display: grid;
  grid-template-columns: var(--lc) minmax(0, 1fr);
  align-items: start;
}
.section { padding-block: var(--sec); }
.section--black { background: var(--black); color: var(--white); }
.section:not(.section--black) + .section:not(.section--black) { padding-top: 0; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

/* ---------- Typo --------------------------------------------------------- */
.display, .h2, .h3, .card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .004em;
  line-height: 1;
}
.h2 { font-size: clamp(36px, 3.5vw, 50px); line-height: 1.02; }
.h3 { font-size: clamp(21px, 1.75vw, 25px); line-height: 1.1; margin-bottom: 18px; }
.rule {
  display: block;
  width: 46px; height: 1px;
  margin-top: 25px;
  background: currentColor;
  opacity: .55;
  transform-origin: left center;
}
.caps {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.copy { max-width: 560px; font-weight: 400; font-size: 16px; letter-spacing: .035em; line-height: 1.38; color: var(--text); }
.copy p { margin-bottom: 1.4em; }
.section--black .copy, .band .copy { color: var(--white); font-weight: 300; }
.tagline { font-family: var(--font-display); font-size: clamp(20px, 1.65vw, 24px); text-transform: uppercase; letter-spacing: .01em; margin-top: 28px; }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  --c: var(--white);
  --ci: var(--black);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 32px;
  border: 1px solid var(--c);
  color: var(--c);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-indent: .3em;           /* optischer Ausgleich für letter-spacing */
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--ease-out);
}
.btn:hover, .btn:focus-visible { color: var(--ci); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn--dark { --c: var(--black); --ci: var(--white); }
.btn--hero { min-width: 303px; }
.btn--more { min-width: 256px; }
.btn--band { min-width: 271px; }
.btn--send { min-width: 191px; }

/* ---------- Header / Navigation ----------------------------------------- */
.site-header {
  position: absolute; inset: 0 0 auto 0;
  z-index: 50;
  color: var(--white);
}
.site-header .wrap { display: flex; align-items: flex-start; justify-content: space-between; }
.logo { display: block; width: clamp(72px, 6.6vw, 95px); margin-top: clamp(28px, 3.55vw, 51px); color: inherit; }
.logo svg, .logo img { width: 100%; height: auto; }
.site-footer .logo { margin-top: 0; color: var(--black); }

.nav { margin-top: clamp(30px, 4.25vw, 61px); }
.nav__list {
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--nav-h);
}
/* durchgehende Linie unter den Menüpunkten (endet am Partner-Button) */
.nav__item { position: relative; display: flex; }
.nav__item::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-dark);
  z-index: -2;
  transform-origin: left center;
}
.nav__item:first-child::after { left: -22px; }
.nav__link {
  position: relative;
  display: flex; align-items: center;
  padding: 0 25px;
  font-size: 15.5px;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
  isolation: isolate;
  transition: color .3s var(--ease-soft);
}
/* Parallelogramm (aktiv / Hover) */
.nav__link::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--white);
  transform: skewX(-45deg) scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease-out);
}
.nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link,
.nav__item.is-open > .nav__link,
.nav__link[aria-current="page"] { color: var(--black); }
.nav__item:hover > .nav__link::before,
.nav__item:focus-within > .nav__link::before,
.nav__item.is-open > .nav__link::before,
.nav__link[aria-current="page"]::before { transform: skewX(-45deg) scaleX(1); }

/* Dropdown Marken */
.nav__sub {
  position: absolute;
  top: 100%; left: -22px;
  width: 100%;
  padding: 16px 0 22px;
  background: var(--white);
  color: var(--black);
  text-align: center;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .5s var(--ease-out), visibility 0s linear .5s;
}
.nav__sub a {
  display: block;
  padding: 7px 0;
  font-size: 15.5px; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s var(--ease-soft), transform .4s var(--ease-out);
}
.nav__sub a span { background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; transition: background-size .35s var(--ease-out); padding-bottom: 2px; }
.nav__sub a:hover span, .nav__sub a:focus-visible span { background-size: 100% 1px; }
.nav__item--sub:hover .nav__sub,
.nav__item--sub:focus-within .nav__sub,
.nav__item--sub.is-open .nav__sub {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .55s var(--ease-out), visibility 0s;
}
.nav__item--sub:hover .nav__sub a,
.nav__item--sub:focus-within .nav__sub a,
.nav__item--sub.is-open .nav__sub a { opacity: 1; transform: none; }
.nav__sub li:nth-child(1) a { transition-delay: .08s; }
.nav__sub li:nth-child(2) a { transition-delay: .13s; }
.nav__sub li:nth-child(3) a { transition-delay: .18s; }

/* Partner-Button mit Login-Icon */
.nav__partner {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-left: 0;
}
.nav__partner-link {
  position: relative;
  display: flex; align-items: center;
  padding: 0 0 0 57px;
  font-size: 15.5px; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap;
  color: var(--black);
  isolation: isolate;
}
.nav__partner::before {           /* weiße Fläche mit schräger Kante */
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: var(--white);
  clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path .5s var(--ease-out), opacity .3s;
}
.nav__partner > * { position: relative; z-index: 1; }
.nav__partner-link span { background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--ease-out); }
.nav__partner-link:hover span, .nav__partner-link:focus-visible span { background-size: 100% 1px; }
.icon-btn {
  display: grid; place-items: center;
  width: 44px; min-height: 44px;
  margin-left: 42px; margin-right: 6px;
  color: var(--black);
}
.icon-btn svg { width: 12px; height: 13px; transition: transform .35s var(--ease-out); }
.icon-btn:hover svg, .icon-btn:focus-visible svg { transform: scale(1.3); }

/* Partner-Seite aktiv: Kontur statt Fläche, Icon in weißem Keil */
.nav--partner .nav__partner::before {
  clip-path: polygon(calc(100% - 52px) 0, 100% 0, 100% 100%, calc(100% - 72px) 100%);
}
.nav--partner .nav__partner-link { color: var(--white); }
.nav--partner .nav__partner::after {   /* Kontur: Schräge + obere Linie */
  content: "";
  position: absolute; inset: 0 60px 0 0;
  pointer-events: none;
  background:
    linear-gradient(var(--line-dark), var(--line-dark)) 44px 0 / 100% 1px no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .6px), var(--line-dark) calc(50% - .6px), var(--line-dark) calc(50% + .6px), transparent calc(50% + .6px)) 0 0 / 44px 100% no-repeat;
}
.nav--partner .nav__partner-link { padding-left: 62px; }

/* Burger (mobil) */
.nav-toggle { display: none; }

/* ---------- Hero --------------------------------------------------------- */
.hero {
  position: relative;
  height: clamp(440px, 40.3vw, 640px);
  background: #050505;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media picture { display: contents; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 50%;   /* schmaler als Vorlage: links beschneiden, Fahrzeuge bleiben */
}
.hero--team .hero__media img { object-position: 62% 30%; }
.hero__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: clamp(136px, 14.2vw, 204px);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 4.3vw, 62px);
  line-height: .985;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.hero__title .line > span { display: block; }
.hero__rule { width: 45px; height: 1px; background: rgba(255,255,255,.7); margin: clamp(26px, 2.3vw, 33px) 0 0; transform-origin: left center; }
.hero__sub { margin-top: 19px; font-size: 15.5px; letter-spacing: .32em; text-transform: uppercase; }
.hero .btn { margin-top: 22px; align-self: flex-start; }

/* ---------- Cut-Corner-Rahmen ------------------------------------------- */
/* Rahmen + diagonale Ecke ohne Bild-Assets */
.cut {
  --cc: var(--cut);
  --bc: var(--line);
  --bg: var(--white);
  position: relative;
  isolation: isolate;
}
.cut::before, .cut::after { content: ""; position: absolute; pointer-events: none; }
.cut::before {
  inset: 0; z-index: -2;
  background: var(--bc);
  clip-path: polygon(0 0, calc(100% - var(--cc)) 0, 100% var(--cc), 100% 100%, 0 100%);
  transition: background-color .35s var(--ease-soft);
}
.cut::after {
  inset: 1px; z-index: -1;
  background: var(--bg);
  clip-path: polygon(0 0, calc(100% - var(--cc) + .59px) 0, 100% calc(var(--cc) - .59px), 100% 100%, 0 100%);
}

/* ---------- Marken-Karten (Home) ---------------------------------------- */
.brand-card {
  display: flex; flex-direction: column; justify-content: flex-end;
  height: clamp(170px, 13.75vw, 198px);
  padding: 0 14px 13px;
  overflow: hidden;
}
.brand-card__img {
  position: absolute;
  left: 7%; right: 7%; top: 17%;
  height: 52%;
  display: flex; align-items: center; justify-content: center;
  z-index: 0;
}
.brand-card__img img {
  width: 100%; height: 100%; object-fit: contain;
  transform: scale(.94);
  transition: transform .8s var(--ease-out);
}
.card__title { font-size: clamp(22px, 1.85vw, 26.5px); color: var(--ink); }
.card__row { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.card__row .card__title { transform-origin: left bottom; transition: transform .6s var(--ease-out); }
.arrow {
  position: relative;
  flex: 0 0 auto;
  width: 25px; height: 10px;
  margin-bottom: 5px;
  color: var(--ink);
}
.arrow::before { /* Schaft – Verlängerung per transform (kein Layout) */
  content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1.2px; margin-top: -.6px; background: currentColor;
  transform: scaleX(.72); transform-origin: right center;
  transition: transform .5s var(--ease-out);
}
.arrow::after { /* Spitze */
  content: ""; position: absolute; right: .5px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-top: 1.2px solid currentColor; border-right: 1.2px solid currentColor;
  transform: rotate(45deg);
}
.brand-card:hover .brand-card__img img, .brand-card:focus-visible .brand-card__img img { transform: scale(1.1); }
.brand-card:hover .card__title, .brand-card:focus-visible .card__title { transform: scale(1.22); }
.brand-card:hover .arrow::before, .brand-card:focus-visible .arrow::before { transform: scaleX(1); }
.brand-card:hover, .brand-card:focus-visible { --bc: var(--ink); }

/* ---------- Highlight-Karten -------------------------------------------- */
.hl-card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color .35s var(--ease-soft);
}
.hl-card__img { height: clamp(170px, 13.9vw, 200px); overflow: hidden; background: #ddd; }
.hl-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.hl-card__body { padding: 15px 14px 15px; }
.hl-card__body .card__row { align-items: flex-start; }
.hl-card .arrow { margin: 6px 0 0; }
.hl-card .caps { display: block; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.hl-card:hover, .hl-card:focus-visible { border-color: var(--ink); }
.hl-card:hover .hl-card__img img, .hl-card:focus-visible .hl-card__img img { transform: scale(1.08); }
.hl-card:hover .arrow::before, .hl-card:focus-visible .arrow::before { transform: scaleX(1); }

/* ---------- Team-Karten ------------------------------------------------- */
.person {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--white);
}
.person__img { aspect-ratio: 281 / 319; overflow: hidden; background: var(--placeholder); }
.person__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.person:hover .person__img img { transform: scale(1.04); }
.person__body { padding: 13px 14px 16px; min-height: 80px; }
.person__name { font-family: var(--font-display); font-size: clamp(21px, 1.75vw, 25px); line-height: 1; text-transform: uppercase; color: var(--ink); }
.person .caps { display: block; margin-top: 8px; font-size: 10.5px; color: var(--muted); letter-spacing: .3em; }
.person--placeholder .person__img { background: var(--placeholder); }

/* ---------- Abschnitte -------------------------------------------------- */
.title-col { padding-right: 24px; }
.title-col .h2 + .rule { margin-top: 25px; }


/* Partner-Band */
.band { background: var(--black); color: var(--white); }
.band .wrap {
  display: grid;
  grid-template-columns: var(--lc) minmax(0, 1fr) auto;
  align-items: center;
  min-height: clamp(190px, 15.6vw, 225px);
  padding-block: 40px;
}
.band__text { font-weight: 300; font-size: 16px; letter-spacing: .035em; line-height: 1.38; max-width: 470px; margin: -4px 0 0; }

/* Über uns */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--gap);
}
.about__grid .copy { max-width: 560px; }

/* Marken-Seite */
.brands-intro .copy { max-width: 545px; }
.split--mk { grid-template-columns: 34.1% minmax(0, 1fr); }
.brand-row { padding-top: clamp(72px, 8vw, 115px); }
.brands { padding-bottom: clamp(80px, 7.8vw, 112px); }
.brand-row .split { align-items: center; }
.brand-row__logo { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.brand-row__logo img { width: min(285px, 85%); height: auto; }
.brand-row__logo .logo-forthing { width: min(345px, 100%); }   /* Figma-SVG hat Innenabstand */
.brand-row .btn { margin-top: 36px; }
.brand-row .copy { max-width: 545px; }
.brand-row .step { margin-top: clamp(20px, 2.7vw, 39px); }

/* ---------- Stufenlinie (Trenner, Vorteile, Footer) ---------------------- */
/* Untere Linie → 45°-Schräge → obere Linie bis zum Viewportrand */
.step {
  --x: 76.6%;               /* Beginn der Schräge, relativ zur Inhaltsbreite */
  --h: 44px;
  --sc: var(--line-soft);
  position: relative;
  height: var(--h);
}
.step__a, .step__c { position: absolute; display: block; height: 1px; background: var(--sc); transform-origin: left center; }
.step__a { left: 0; bottom: 0; width: var(--x-px, var(--x)); }
.step__c { top: 0; left: calc(var(--x-px, var(--x)) + var(--h) - 1px); right: calc(-1 * var(--bleed)); }
/* Knick: ein Linienzug mit Gehrung (Markup erzeugt mit passender viewBox), ueberlappt die
   geraden Linien je 10px – die Ecken sind damit auch stark vergroessert sauber. */
.step__b {
  position: absolute; top: 0;
  left: calc(var(--x-px, var(--x)) - 10px);
  width: calc(var(--h) + 19px); height: var(--h);
  overflow: visible; color: var(--sc);
}
.step__b polyline {
  fill: none; stroke: currentColor; stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter; stroke-miterlimit: 10; stroke-linecap: butt;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--sb, 1));
}

/* Vorteile-Liste (Partner werden) */
.benefits { margin-top: 30px; }
.benefit { position: relative; }
.benefit__text {
  position: relative; z-index: 1;
  display: block;
  padding: 21px 0 11px;
  font-size: 11.5px; letter-spacing: .32em; text-transform: uppercase;
  color: #3a3a3a;
}
.benefit .step { --x: 68.8%; --h: 43px; --sc: var(--line); position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- Formular ---------------------------------------------------- */
.form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 25px; row-gap: 20px; }
.form .full { grid-column: 1 / -1; }
.field {
  --cc: 14px; --bc: #d6d6d6; --bg: var(--black);
  position: relative;
}
.field input, .field textarea {
  /* 1px innen + gleicher Eckschnitt wie die Innenfläche: Autofill-Füllungen (Chrome/Safari/Firefox)
     malen so nie über den Rahmen. */
  display: block;
  width: calc(100% - 2px);
  margin: 1px;
  clip-path: polygon(0 0, calc(100% - var(--cc) + .59px) 0, 100% calc(var(--cc) - .59px), 100% 100%, 0 100%);
  height: 43px;
  padding: 0 16px 0 15px;   /* 15 + 1px Rand-Abstand = Text exakt wie vorher */
  border: 0; border-radius: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .03em;
  line-height: 1.4;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.field textarea { height: 158px; padding-top: 13px; resize: vertical; min-height: 120px; }
.field ::placeholder { color: rgba(255,255,255,.92); opacity: 1; transition: opacity .3s; }
.field :focus::placeholder { opacity: .45; }
.field:focus-within { --bc: var(--white); }
.field.is-invalid { --bc: #ff8a7a; }
.form__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 24px; margin-top: 35px; }
.form__status { font-size: 13px; font-weight: 300; min-height: 1.4em; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-out); }
.form__status.is-visible { opacity: 1; transform: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* helle Variante (Login) */


/* ---------- Kontakt ----------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: var(--lc) minmax(0, 1fr); align-items: stretch; }
.contact__grid > .info { grid-column: 2; }
.contact__left { display: flex; flex-direction: column; justify-content: space-between; padding-right: 32px; }
.contact__left .copy { max-width: 252px; }
.map {
  --cc: 33px; --bc: var(--line);
  display: block;
  aspect-ratio: 897 / 510;
}
.map img {
  position: absolute; inset: 1px;
  width: calc(100% - 2px); height: calc(100% - 2px);
  object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 32.4px) 0, 100% 32.4px, 100% 100%, 0 100%);
  transition: transform 1.2s var(--ease-out), filter .5s;
}
.map { overflow: hidden; }
.map__hint {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  padding: 7px 12px;
  background: var(--black); color: var(--white);
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s, transform .5s var(--ease-out);
}
.map:hover .map__hint, .map:focus-visible .map__hint { opacity: 1; transform: none; }
.map:hover img { transform: scale(1.02); }

.info { margin-top: clamp(40px, 5vw, 72px); }
.info__col { position: relative; padding: 32px 0 0 101px; min-height: 140px; }
.info__line { --x: 0px; --h: 69px; position: absolute; left: 0; top: 0; right: 0; height: var(--h); }
.info__col:not(:last-child) .info__line .step__c { right: 0; }
.info__title { font-family: var(--font-display); font-size: 25px; text-transform: uppercase; line-height: 1; margin: 14px 0 22px; }
.info__text { font-weight: 400; font-size: 16px; letter-spacing: .035em; line-height: 1.38; }

/* ---------- Footer ------------------------------------------------------ */
.site-footer { background: var(--white); color: var(--text); }
.site-footer .wrap {
  display: grid;
  grid-template-columns: 25.4% minmax(0, 1fr);
  padding-top: 95px; padding-bottom: 72px;
}
.site-footer .logo { width: clamp(72px, 6.6vw, 98px); }
.footer__main { position: relative; }
.footer__line { --x: 0px; --h: 70px; position: absolute; left: -7px; top: -35px; right: 0; height: var(--h); }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 11.6%; padding-top: 4px; gap: 16px; }
.footer__cols .caps { display: block; font-size: 11px; color: var(--muted); margin-bottom: 15px; letter-spacing: .34em; }
.footer__cols p, .footer__cols li { font-weight: 400; font-size: 15px; letter-spacing: .03em; line-height: 1.38; }
.footer__cols a { background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; transition: background-size .4s var(--ease-out); }
.footer__cols a:hover, .footer__cols a:focus-visible { background-size: 100% 1px; }
.social { display: flex; gap: 9px; margin-bottom: 14px; height: 14px; }
.social a { display: block; width: 14px; height: 14px; background: none !important; transition: transform .3s var(--ease-out), opacity .3s; }
.social a:hover { transform: translateY(-2px); opacity: .7; }
.social svg { width: 14px; height: 14px; }

/* ---------- Login (Dialog) ---------------------------------------------- */
.login {
  width: min(920px, calc(100vw - 32px));
  max-width: none; max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0; border: 0;
  background: transparent;
  color: var(--black);
  overflow: auto;
  overscroll-behavior: contain;
}
.login:focus, .login:focus-visible { outline: none; }   /* Dialog selbst bekommt den Fokus – kein Rahmen drumherum */
.login::backdrop {
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .45s var(--ease-soft);
}
.login.is-open::backdrop { opacity: 1; }
.login__panel {
  position: relative;
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  min-height: 520px;
  background: var(--white);
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 40px 90px rgba(0,0,0,.55);   /* Kante auch vor schwarzem Hintergrund */
  transition: opacity .45s var(--ease-soft), transform .8s var(--ease-out);
}
.login.is-open .login__panel { opacity: 1; transform: none; }

/* linke Seite: Marke */
.login__side {
  position: relative;
  display: flex; flex-direction: column;
  padding: 48px 44px 40px;
  background: var(--black); color: var(--white);
  overflow: hidden;
}
.login__logo { width: 62px; color: var(--white); }
.login__logo svg { width: 100%; height: auto; }
.login__kicker { margin: auto 0 14px; color: rgba(255,255,255,.62); }
.login__side .h2 { color: var(--white); }
.login__side .rule { opacity: .7; }
.login__lead { margin: 26px 0 0; max-width: 260px; font-weight: 300; font-size: 15px; letter-spacing: .03em; line-height: 1.5; color: rgba(255,255,255,.82); }
.login__note { margin: 18px 0 0; font-weight: 300; font-size: 13px; letter-spacing: .03em; color: rgba(255,255,255,.62); }
.login__note a { color: var(--white); background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--ease-out); }
.login__note a:hover, .login__note a:focus-visible { background-size: 100% 1px; }
/* Stufenlinie als ruhiges Markenzeichen unten */
.login__side .step { --x: 52%; --h: 30px; --sc: #4d4d4d;   /* deckend: halbtransparent würde an den Überlappungen doppelt hell */ --bleed: 44px; margin-top: 44px; }

/* rechte Seite: Formular */
.login__main { position: relative; padding: 92px 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.login__form { display: grid; align-content: start; }
.login__label, .login__labelrow label { display: block; margin-bottom: 10px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.login__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 24px; }
.login__forgot { font-size: 13px; letter-spacing: .02em; color: var(--text); background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--ease-out); }
.login__forgot:hover, .login__forgot:focus-visible { background-size: 100% 1px; }
.field--light { --cc: 14px; --bc: #b9b9b9; --bg: var(--white); }
.field--light input { height: 50px; padding: 0 16px 0 15px; color: var(--black); font-size: 16px; font-weight: 400; letter-spacing: .02em; }
.field--light:hover { --bc: #6f6f6f; }
.field--light:focus-within { --bc: var(--black); }
.field--light.is-invalid { --bc: #c8372d; }
.field--pass input { padding-right: 52px; }
.pass-toggle {
  position: absolute; right: 4px; top: 50%; z-index: 1;
  width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center; color: #6f6f6f;
  transition: color .25s;
}
.pass-toggle:hover, .pass-toggle:focus-visible { color: var(--black); }
.pass-toggle svg { width: 20px; height: 20px; }
.pass-toggle .eye-off { display: none; }
.pass-toggle[aria-pressed="true"] .eye-on { display: none; }
.pass-toggle[aria-pressed="true"] .eye-off { display: block; }
/* Chrome/Safari/Firefox-Autofill: kein hellblauer Kasten, Rahmen bleibt sichtbar */
.field--light input:-webkit-autofill,
.field--light input:-webkit-autofill:hover,
.field--light input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--black);
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
  caret-color: var(--black);
  transition: background-color 9999s 0s;
}
.field--light input:autofill { box-shadow: 0 0 0 1000px var(--white) inset; }
.btn--block { width: 100%; min-height: 52px; margin-top: 28px; }
.check { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; justify-self: start; font-size: 14px; letter-spacing: .02em; color: var(--text); cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { position: relative; width: 18px; height: 18px; border: 1px solid #b9b9b9; transition: border-color .25s, background-color .25s; }
.check__box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--white); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--ease-out); }
.check:hover .check__box { border-color: #6f6f6f; }
.check input:checked + .check__box { background: var(--black); border-color: var(--black); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 1px solid var(--black); outline-offset: 3px; }
.login .form__status { margin: 16px 0 0; min-height: 1.4em; font-size: 13.5px; color: var(--text); }
.login .form__status.is-error { color: #b3261e; }

.close-btn {
  position: absolute; right: 20px; top: 20px; z-index: 2;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  color: var(--black);
}
.close-btn svg { width: 24px; height: 24px; transition: transform .45s var(--ease-out); }
.close-btn svg path { stroke-width: 1.2; transition: stroke-width .3s; }
.close-btn:hover svg, .close-btn:focus-visible svg { transform: rotate(90deg); }
.close-btn:hover svg path, .close-btn:focus-visible svg path { stroke-width: 1.8; }

/* Inhalte beim Oeffnen nacheinander */
.js .login__side > *:not(.step), .js .login__form > * { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s var(--ease-soft), transform .7s var(--ease-out); }
.login.is-open .login__side > *, .login.is-open .login__form > * { opacity: 1; transform: none; }
.login.is-open .login__side > :nth-child(2) { transition-delay: .08s; }
.login.is-open .login__side > :nth-child(3) { transition-delay: .14s; }
.login.is-open .login__side > :nth-child(4), .login.is-open .login__side > :nth-child(5) { transition-delay: .2s; }
.login.is-open .login__side > :nth-child(7) { transition-delay: .3s; }
.login.is-open .login__form > * { transition-delay: .16s; }
.login.is-open .login__form > :nth-child(n+3) { transition-delay: .22s; }
.login.is-open .login__form > :nth-child(n+5) { transition-delay: .28s; }
.js .login__side .step__a, .js .login__side .step__c { transform: scaleX(0); transition: transform .6s var(--ease-io) .3s; }
.js .login__side .step__b { --sb: 0; }
.js .login__side .step__b polyline { transition: stroke-dashoffset .35s linear .8s; }
.js .login__side .step__c { transition: transform .8s var(--ease-out) 1.05s; }
.login.is-open .login__side .step__a, .login.is-open .login__side .step__c { transform: scaleX(1); }
.login.is-open .login__side .step__b { --sb: 1; }

/* ---------- Rechtliches (Platzhalterseiten) ------------------------------ */
.legal-hero { background: var(--black); color: var(--white); padding-top: clamp(150px, 14vw, 200px); padding-bottom: 60px; }

/* ==========================================================================
   MOTION
   - Alles läuft über transform/opacity/clip-path → GPU, kein Layout-Thrash.
   - Elemente sind ohne JS sichtbar (.js wird erst per Script gesetzt).
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--rise), 0);
  transition: opacity .9s var(--ease-soft), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }

.js [data-draw] { transform: scaleX(0); transition: transform .9s var(--ease-io); transition-delay: var(--d, 0s); }
.js [data-draw].is-in { transform: scaleX(1); }

/* Stufenlinien zeichnen sich nacheinander */
.js .step[data-steps] .step__a, .js .step[data-steps] .step__c { transform: scaleX(0); }
.js .step[data-steps] .step__b { --sb: 0; }
.js .step[data-steps] .step__a { transition: transform .7s var(--ease-io) var(--d, 0s); }
.js .step[data-steps] .step__b polyline { transition: stroke-dashoffset .45s linear calc(var(--d, 0s) + .6s); }
.js .step[data-steps] .step__c { transition: transform 1s var(--ease-out) calc(var(--d, 0s) + .9s); }
.js .step[data-steps].is-in .step__a, .js .step[data-steps].is-in .step__c { transform: scaleX(1); }
.js .step[data-steps].is-in .step__b { --sb: 1; }
/* Varianten ohne untere Linie (Kontakt-Infos, Footer): Schräge zuerst */
.js .step[data-steps="bc"] .step__b polyline { transition-delay: var(--d, 0s); }
.js .step[data-steps="bc"] .step__c { transition-delay: calc(var(--d, 0s) + .3s); }

/* Hero-Intro */
.js .hero__media img { transform: scale(1.07); opacity: 0; transition: transform 2.4s var(--ease-out), opacity 1.2s var(--ease-soft); }
.js .hero__title .line > span { transform: translate3d(0, 105%, 0); transition: transform 1.1s var(--ease-out); }
.js .hero__title .line:nth-child(2) > span { transition-delay: .12s; }
.js .hero__rule { transform: scaleX(0); transition: transform .8s var(--ease-io) .45s; }
.js .hero__sub, .js .hero .btn { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .8s var(--ease-soft) .6s, transform 1s var(--ease-out) .6s, color var(--t-fast), border-color var(--t-fast); }
.js .hero .btn { transition-delay: .75s, .75s, 0s, 0s; }
.js .site-header .logo, .js .site-header .nav { opacity: 0; transition: opacity 1s var(--ease-soft) .2s; }
.js .site-header .nav__item::after { transform: scaleX(0); transition: transform .5s var(--ease-io); }
.js .site-header .nav__item:nth-child(1)::after { transition-delay: .35s; }
.js .site-header .nav__item:nth-child(2)::after { transition-delay: .6s; }
.js .site-header .nav__item:nth-child(3)::after { transition-delay: .85s; }

.is-loaded .hero__media img { transform: none; opacity: 1; }
.is-loaded .hero__title .line > span { transform: none; }
.is-loaded .hero__rule { transform: none; }
.is-loaded .hero__sub, .is-loaded .hero .btn { opacity: 1; transform: none; }
.is-loaded .site-header .logo, .is-loaded .site-header .nav { opacity: 1; }
.is-loaded .site-header .nav__item::after { transform: none; }

/* ---------- Bewegung reduzieren (Windows „Animationen anzeigen: Aus“,
   macOS „Bewegung reduzieren“, Firefox ui.prefersReducedMotion) -----------
   Keine Bewegung, aber weiche Überblendungen – nichts springt, nichts bleibt
   unsichtbar. Hover-Zustände wechseln per Farbe/Deckkraft statt Skalierung. */
@media (prefers-reduced-motion: reduce) {
  :root { --rise: 0px; }
  html { scroll-behavior: auto; }

  .js [data-reveal] { transform: none; transition: opacity .6s var(--ease-soft); transition-delay: calc(var(--d, 0s) * .5); }
  .js [data-draw] { transform: none; opacity: 0; transition: opacity .6s var(--ease-soft); transition-delay: calc(var(--d, 0s) * .5); }
  .js [data-draw].is-in { opacity: 1; }
  .js .step[data-steps] .step__a, .js .step[data-steps] .step__c { transform: none; }
  .js .step[data-steps] .step__b { --sb: 1; }
  .js .step[data-steps] { opacity: 0; transition: opacity .7s var(--ease-soft) calc(var(--d, 0s) * .5); }
  .js .step[data-steps].is-in { opacity: 1; }

  .js .hero__media img { transform: none; transition: opacity .9s var(--ease-soft); }
  .js .hero__title .line > span { transform: none; opacity: 0; transition: opacity .7s var(--ease-soft); }
  .js .hero__title .line:nth-child(2) > span { transition-delay: .1s; }
  .is-loaded .hero__title .line > span { opacity: 1; }
  .js .hero__rule { transform: none; opacity: 0; transition: opacity .6s var(--ease-soft) .2s; }
  .is-loaded .hero__rule { opacity: 1; }
  .js .hero__sub, .js .hero .btn { transform: none; transition: opacity .6s var(--ease-soft) .25s, color .25s, border-color .25s; }
  .js .site-header .nav__item::after { transform: none; transition: none; }

  /* Hover ohne Bewegung */
  .btn::before { transform: none; opacity: 0; transition: opacity .3s var(--ease-soft); }
  .btn:hover::before, .btn:focus-visible::before { opacity: 1; }
  .nav__link::before { transform: skewX(-45deg); opacity: 0; transition: opacity .3s var(--ease-soft); }
  .nav__item:hover > .nav__link::before,
  .nav__item:focus-within > .nav__link::before,
  .nav__item.is-open > .nav__link::before,
  .nav__link[aria-current="page"]::before { transform: skewX(-45deg); opacity: 1; }
  .nav__sub { clip-path: none; opacity: 0; transition: opacity .3s var(--ease-soft), visibility 0s linear .3s; }
  .nav__item--sub:hover .nav__sub, .nav__item--sub:focus-within .nav__sub, .nav__item--sub.is-open .nav__sub { opacity: 1; clip-path: none; transition: opacity .3s var(--ease-soft), visibility 0s; }
  .nav__sub a { transform: none; transition: opacity .3s var(--ease-soft); }
  .brand-card__img img, .hl-card__img img, .person__img img, .map img { transition: opacity .4s var(--ease-soft), filter .4s; }
  .brand-card:hover .brand-card__img img, .brand-card:focus-visible .brand-card__img img,
  .hl-card:hover .hl-card__img img, .hl-card:focus-visible .hl-card__img img,
  .person:hover .person__img img, .map:hover img { transform: scale(.94); }
  .hl-card:hover .hl-card__img img, .hl-card:focus-visible .hl-card__img img, .person:hover .person__img img, .map:hover img { transform: none; opacity: .88; }
  .brand-card:hover .card__title, .brand-card:focus-visible .card__title { transform: none; }
  .arrow { transition: opacity .3s; }
  .arrow::before { transition: none; }
  .brand-card:hover .arrow::before, .hl-card:hover .arrow::before, .brand-card:focus-visible .arrow::before, .hl-card:focus-visible .arrow::before { transform: scaleX(.72); }
  .brand-card:hover .arrow, .hl-card:hover .arrow, .brand-card:focus-visible .arrow, .hl-card:focus-visible .arrow { opacity: .55; }
  .icon-btn svg, .close-btn svg { transition: none; }
  .icon-btn:hover svg, .close-btn:hover svg, .icon-btn:focus-visible svg, .close-btn:focus-visible svg { transform: none; }
  .login__panel { transform: none; transition: opacity .35s var(--ease-soft); }
  .js .login__side > *:not(.step), .js .login__form > * { transform: none; transition: opacity .4s var(--ease-soft); }
  .js .login__side .step__a, .js .login__side .step__c { transform: none; }
  .js .login__side .step__b { --sb: 1; }
  .login::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .map__hint, .form__status { transform: none; }
  .social a:hover { transform: none; }
}

/* ==========================================================================
   RESPONSIVE (Vorlage ist Desktop 1440 – darunter sinnvoll skaliert)
   ========================================================================== */
@media (max-width: 1180px) {
  .nav__link { padding: 0 18px; font-size: 13.5px; }
  .nav__partner-link { font-size: 13.5px; }
  .icon-btn { margin-left: 26px; }
}

@media (max-width: 960px) {
  :root { --lc: 100%; --gap: 16px; }
  .split, .split--mk, .contact__grid { grid-template-columns: 1fr; }
  .title-col { margin-bottom: 36px; }
  .band .wrap { grid-template-columns: 1fr; gap: 24px; padding-block: 56px; }
  .band .wrap > .title-col { margin-bottom: 0; }
  .about__grid { grid-template-columns: 1fr 1fr; }
  .about__grid .copy { grid-column: 1 / -1; }
  .brand-row__logo { margin-bottom: 32px; }
  .contact__left { padding: 0; }
  .contact__left .copy { max-width: 560px; margin: 0 0 32px; }
  .info.grid-3 { grid-template-columns: 1fr; gap: 0; }
  .info__col { min-height: 0; padding-bottom: 28px; }
  .info__col .info__line .step__c { right: calc(-1 * var(--bleed)); }
  .site-footer .wrap { grid-template-columns: 1fr; padding-top: 48px; }
  .footer__line { display: none; }
  .footer__cols { grid-template-columns: 1fr 1fr; padding: 32px 0 0; row-gap: 28px; border-top: 1px solid var(--line-soft); margin-top: 32px; }
  .step { --x: 70%; }

  /* mobile Navigation */
  .nav-toggle {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    margin-top: clamp(26px, 6vw, 40px);
    color: var(--white);
    position: relative; z-index: 70;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    display: block; width: 26px; height: 1px; background: currentColor; position: relative;
    transition: transform .45s var(--ease-out), background-color .2s, opacity .2s;
  }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
  .nav-toggle span::before { top: -8px; }
  .nav-toggle span::after { top: 8px; }
  .nav-open .nav-toggle span { background: transparent; }
  .nav-open .nav-toggle span::before { transform: translateY(8px) rotate(45deg); }
  .nav-open .nav-toggle span::after { transform: translateY(-8px) rotate(-45deg); }

  .nav {
    position: fixed; inset: 0; z-index: 60;
    margin: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 96px var(--gutter) 48px;
    background: var(--black);
    opacity: 0; visibility: hidden;
    transition: opacity .45s var(--ease-soft), visibility 0s linear .45s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-soft), visibility 0s; }
  .js .site-header .nav { opacity: 0; }
  .nav-open.is-loaded .site-header .nav { opacity: 1; }
  .nav__list { flex-direction: column; height: auto; gap: 6px; }
  .nav__item::after { display: none; }
  .nav__item { flex-direction: column; }
  .nav__link { padding: 12px 28px; font-size: 15px; align-self: flex-start; }
  .nav__sub { position: static; width: auto; clip-path: none; visibility: inherit;   /* inherit statt visible: sonst bleiben die Marken-Links im geschlossenen Menü unsichtbar klickbar (iPhone: Tippen landete auf „Forthing“) */ background: none; color: var(--white); text-align: left; padding: 4px 0 8px 28px; }
  .nav__sub a { opacity: .8; transform: none; font-size: 13px; }
  .nav__item--sub:hover .nav__sub a { opacity: .8; }
  .nav__item--sub:hover > .nav__link:not([aria-current])::before { transform: skewX(-45deg) scaleX(0); }
  .nav__item--sub:hover > .nav__link:not([aria-current]) { color: var(--white); }
  .nav__partner { margin-top: 28px; align-self: flex-start; min-height: 44px; }
  .nav__partner-link { font-size: 13px; }

  .hero__content { padding-top: 140px; }
  .hero { height: auto; min-height: 520px; }
  .hero__content { position: relative; padding-bottom: 60px; min-height: 520px; }
  .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.1) 70%); }
}

@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .form .half { grid-column: 1 / -1; }
  .btn--hero, .btn--more, .btn--band { min-width: 0; width: 100%; }
  .btn { padding: 0 20px; letter-spacing: .24em; }
  .hero .btn { align-self: stretch; }
  .hero__media img { object-position: 72% 50%; }
  .brand-card { height: 210px; }
  .footer__cols { grid-template-columns: 1fr; }
  .login { width: 100vw; max-height: none; height: 100dvh; margin: 0; }
  .login__panel { grid-template-columns: 1fr; min-height: 100dvh; }
  .login__side { padding: 22px 24px 28px; }
  .login__logo { width: 48px; }
  .login__kicker { margin-top: 34px; }
  .login__lead { margin-top: 18px; font-size: 14px; }
  .login__note, .login__side .step { display: none; }
  .login__main { padding: 32px 24px 40px; justify-content: flex-start; }
  .close-btn { right: 8px; top: 8px; color: var(--white); }
  .benefit .step { --x: 82%; }   /* Hoehe bleibt 43px = viewBox des Knicks */
  .benefit__text { padding-right: 18%; letter-spacing: .24em; }
}

/* ---------- Ergänzungen ------------------------------------------------- */
.cta-row { margin-top: 38px; }
.partner__h3 { margin-top: 50px; margin-bottom: 0; }
.legal-hero .hero__title { font-size: clamp(40px, 4.3vw, 62px); }
.legal-hero .rule { margin-top: 28px; opacity: .7; }
.copy strong { font-weight: 500; }
.copy a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.section--black { padding-block: clamp(48px, 4.2vw, 60px); }
.dot { display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: currentColor; vertical-align: .2em; margin: 0 .3em 0 0; }
.section--last { padding-bottom: clamp(80px, 9vw, 130px); }
.partner__intro { max-width: 580px; }
@media (max-width: 960px) { .contact__grid > .info { grid-column: 1; } }

/* Breite Bildschirme: Hero-Bild bleibt an der Inhaltsfläche ausgerichtet
   und läuft links weich ins Schwarz aus (Fahrzeuge überlagern nie den Text) */
@media (min-width: 1500px) {
  .hero__media { left: calc((100vw - var(--max)) / 2); }
  .hero__media img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
}

/* Tablet + Handy: eigenes Hochformat-Motiv aus Figma – Fahrzeuge unter dem Text */
@media (max-width: 960px) {
  .hero, .hero__content { min-height: 640px; }
  .hero__content { padding-top: 124px; }
  .hero__media img { object-position: 50% 100%; }
  .hero__media::after { display: none; }

}

/* Tablet + Handy: Querformat-Motive (Team, Showroom) unter den Text, oben weich ausgeblendet */
@media (max-width: 960px) {
  .hero--team, .hero--kontakt { --mh: clamp(240px, 56vw, 430px); }
  .hero--kontakt { --mh: clamp(260px, 62vw, 470px); }
  .hero--team, .hero--team .hero__content { min-height: calc(400px + var(--mh)); }
  .hero--kontakt, .hero--kontakt .hero__content { min-height: calc(330px + var(--mh)); }
  .hero--team .hero__media, .hero--kontakt .hero__media { top: auto; height: var(--mh); }
  .hero--team .hero__media::after, .hero--kontakt .hero__media::after { display: none; }
  .hero--team .hero__media img, .hero--kontakt .hero__media img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%);
            mask-image: linear-gradient(180deg, transparent 0, #000 28%);
  }
  .hero--team .hero__media img { object-position: 64% 30%; }
  .hero--kontakt .hero__media img { object-position: 72% 60%; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .hero--home, .hero--home .hero__content, .hero--marken, .hero--marken .hero__content { min-height: 730px; }
}
.form__hint { margin: 4px 0 0; font-size: 12.5px; font-weight: 300; letter-spacing: .03em; color: rgba(255,255,255,.62); }
.form__hint a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
.form__hint a:hover, .form__hint a:focus-visible { color: var(--white); }
.form__actions { margin-top: 22px; }
.form__status a { color: inherit; text-decoration: underline; }
.login .form__status a { text-decoration: underline; text-underline-offset: 3px; }
/* Rechtliche Seiten */
.page-impressum .copy, .page-datenschutz .copy { max-width: 680px; }
.page-impressum .copy .h3, .page-datenschutz .copy .h3 { margin: 44px 0 14px; }
.page-impressum .copy .h3:first-child, .page-datenschutz .copy > p:first-child + .h3 { margin-top: 0; }
.legal-stand { margin-top: 44px; font-size: 13px; color: var(--muted); }

/* ==========================================================================
   MIKRO-INTERAKTIONEN: Drücken + Loslassen
   - main.js setzt .is-pressed (Finger/Maus unten) und .is-released (kurz nach dem Loslassen).
   - Bewegt wird nur über die eigenständige CSS-Eigenschaft `scale` – sie addiert sich zu
     bestehenden transform-Animationen (Hero-Einblendung, Hover), nichts wird überschrieben.
   - Je Element: --p = Druckgröße, --o = Überschwingen beim Loslassen.
   ========================================================================== */
:root { --press-in: cubic-bezier(.3, 0, .5, 1); }
.btn, .nav__link, .nav__partner-link, .nav__sub a, .logo,
.footer__cols a, .login__forgot, .login__note a, .form__hint a, .copy a:not(.btn) { --p: .965; --o: 1.018; }
.icon-btn, .close-btn, .nav-toggle { --p: .82; --o: 1.12; }
.pass-toggle { --p: .86; --o: 1.1; }
.brand-card, .hl-card, .map { --p: .985; --o: 1.006; }
.check { --p: .97; --o: 1.02; }

.is-pressed { scale: var(--p); transition: scale .09s var(--press-in) !important; }
.is-released { animation: rb-pop .46s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rb-pop {
  0%   { scale: var(--p); }
  42%  { scale: var(--o); }
  72%  { scale: calc(2 - var(--o) + (var(--o) - 1) * .6); }
  100% { scale: 1; }
}

/* Buttons: feiner Ring, der beim Loslassen nach außen ausläuft */
.btn { overflow: visible; }   /* Ring darf über den Rand laufen; die Füllfläche bleibt innen (inset: 0) */
.btn.is-pressed { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 30%, transparent); }
.btn.is-released { animation: rb-pop .46s cubic-bezier(.2, .7, .3, 1) both, rb-ring .62s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rb-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 34%, transparent); }
  100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c) 0%, transparent); }
}

/* Runde Symbol-Knöpfe: Kreis-Impuls hinter dem Symbol */
/* close-btn und pass-toggle sind bereits absolut positioniert (= Bezugsrahmen) – nicht überschreiben */
.icon-btn { position: relative; }
.icon-btn::after, .close-btn::after, .pass-toggle::after, .nav-toggle::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: currentColor; opacity: 0; scale: .4; pointer-events: none;
}
.icon-btn.is-pressed::after, .close-btn.is-pressed::after, .pass-toggle.is-pressed::after, .nav-toggle.is-pressed::after {
  opacity: .1; scale: .9; transition: opacity .09s, scale .12s var(--press-in);
}
.icon-btn.is-released::after, .close-btn.is-released::after, .pass-toggle.is-released::after, .nav-toggle.is-released::after {
  animation: rb-dot .55s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes rb-dot { 0% { opacity: .12; scale: .9; } 100% { opacity: 0; scale: 1.35; } }

/* Auge: blinzelt beim Drücken */
.pass-toggle svg { transform-origin: 50% 50%; transition: scale .1s var(--press-in); }
.pass-toggle.is-pressed svg { scale: 1 .35; }
.pass-toggle.is-released svg { animation: rb-blink .4s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rb-blink { 0% { scale: 1 .35; } 55% { scale: 1 1.12; } 100% { scale: 1 1; } }

/* Karten: Pfeil stupst beim Loslassen nach rechts */
.brand-card.is-released .arrow, .hl-card.is-released .arrow { animation: rb-nudge .5s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rb-nudge { 0% { translate: 0; } 40% { translate: 5px 0; } 100% { translate: 0; } }
.brand-card.is-pressed, .hl-card.is-pressed { --bc: var(--ink); border-color: var(--ink); }

/* Häkchen: Kästchen drückt sich ein */
.check .check__box { transition: border-color .25s, background-color .25s, scale .1s var(--press-in); }
.check.is-pressed .check__box { scale: .82; }
.check.is-released .check__box { animation: rb-box .42s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rb-box { 0% { scale: .82; } 50% { scale: 1.12; } 100% { scale: 1; } }

/* Navigation: Parallelogramm leuchtet kurz auf */
.nav__link.is-pressed::before { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  /* ohne Bewegung: nur ein kurzes Abdunkeln + weiches Zurückblenden */
  .is-pressed { scale: none; opacity: .72 !important; transition: opacity .08s linear !important; }   /* !important: Einblend-Regeln setzen opacity:1 spezifischer */
  .is-released, .btn.is-released { animation: rb-fade .32s ease-out both; }
  @keyframes rb-fade { from { opacity: .72; } to { opacity: 1; } }
  .icon-btn.is-released::after, .close-btn.is-released::after, .pass-toggle.is-released::after, .nav-toggle.is-released::after { animation: rb-dot-fade .4s ease-out both; }
  @keyframes rb-dot-fade { from { opacity: .1; scale: .9; } to { opacity: 0; scale: .9; } }
  .icon-btn.is-pressed::after, .close-btn.is-pressed::after, .pass-toggle.is-pressed::after, .nav-toggle.is-pressed::after { scale: .9; transition: opacity .08s; }
  .pass-toggle.is-pressed svg, .check.is-pressed .check__box { scale: none; }
  .pass-toggle.is-released svg, .check.is-released .check__box, .brand-card.is-released .arrow, .hl-card.is-released .arrow { animation: none; }
}

/* Autofill im dunklen Anfrageformular: schwarz bleiben statt hellblau/gelb */
.field:not(.field--light) input:-webkit-autofill,
.field:not(.field--light) input:-webkit-autofill:hover,
.field:not(.field--light) input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0 1000px var(--black) inset;
  caret-color: var(--white);
  transition: background-color 9999s 0s;
}
.field:not(.field--light) input:autofill { box-shadow: 0 0 0 1000px var(--black) inset; }

/* Footer-Logo als Video-Loop: Box exakt wie das bisherige Logo (588:541), das Video ragt
   seitlich/oben hinaus, weil das Auto links vom Logo einfährt. Hintergrund im Video = #fff. */
.site-footer .logo--video { position: relative; aspect-ratio: 588 / 541; }
.logo-video { position: absolute; left: -28.4%; top: -17.375%; width: 131.97%; height: 118.3%; pointer-events: none; }
.logo-video video { display: block; width: 100%; height: 100%; object-fit: fill; background: var(--white); }
.site-footer button.logo { cursor: pointer; }

@media (max-width: 960px) {
  /* Geschlossenes Menü fängt nie Klicks ab – auch nicht über Kind-Elemente */
  .nav { pointer-events: none; }
  .nav-open .nav { pointer-events: auto; }
  .nav-open .nav__sub, .nav-open .nav__item--sub:hover .nav__sub { visibility: inherit; }
  .nav__item--sub:hover .nav__sub, .nav__item--sub:focus-within .nav__sub, .nav__item--sub.is-open .nav__sub { visibility: inherit; }
}

/* Handy/Tablet, Start- und Markenseite: Hochformat-Motiv immer in voller Breite unten ausrichten,
   damit alle drei Fahrzeuge vollständig sichtbar sind (vorher: "cover" schnitt seitlich ab).
   Die Fahrzeuge liegen im Bild zwischen 66 % und 98 % der Höhe; Bildhöhe = 107,7 % der Breite.
   Unter dem Text bleibt genau Platz für dieses Band (36,6 vw + Luft). */
@media (max-width: 960px) {
  .hero--home, .hero--marken { height: auto; min-height: 0; }
  .hero--home .hero__content, .hero--marken .hero__content { min-height: 0; padding-bottom: calc(36.6vw + 28px); }
  .hero--home .hero__media img, .hero--marken .hero__media img {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: auto; aspect-ratio: 1672 / 1800;
    object-fit: fill;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%);
            mask-image: linear-gradient(180deg, transparent 0, #000 18%);
  }
}

/* Mobiles Menü: eigenes, flottes Ein-/Ausblenden (die langsamere Kopf-Einblendung beim Seitenstart
   griff sonst auch hier -> Menü war ~1 s halbdurchsichtig) und Marken-Unterpunkte immer sichtbar,
   auch bei "Bewegung reduzieren". */
@media (max-width: 960px) {
  .js .site-header .nav { transition: opacity .35s var(--ease-soft), visibility 0s linear .35s; }
  .nav-open.js .site-header .nav, .js.nav-open .site-header .nav { transition: opacity .35s var(--ease-soft), visibility 0s; }
  .nav__sub, .nav__item--sub:hover .nav__sub { opacity: 1; transition: none; }   /* sonst erbt Sichtbarkeit mit 0,5 s Verzögerung */
}

/* Breakpoint-Wechsel: Menü ohne Übergang umschalten (siehe main.js) */
.bp-wechsel .site-header .nav,
.bp-wechsel .site-header .nav * { transition: none !important; }

/* v20 Rückmeldung des Anfrageformulars sichtbar hervorheben (Werner 19.10.) */
.form__status.is-erfolg, .form__status.is-problem {
  position: relative; padding: 12px 18px 12px 46px; font-size: 14px; font-weight: 400; line-height: 1.45; color: #fff;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.form__status.is-erfolg { background: rgba(34, 197, 94, .16); box-shadow: inset 3px 0 0 #22c55e; }
.form__status.is-problem { background: rgba(255, 99, 82, .14); box-shadow: inset 3px 0 0 #ff6352; }
.form__status.is-erfolg::before, .form__status.is-problem::before {
  position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; color: #000;
}
.form__status.is-erfolg::before { content: "✓"; background: #22c55e; }
.form__status.is-problem::before { content: "!"; background: #ff6352; }
.form__status.is-erfolg.is-visible { animation: rb-status-ein .6s var(--ease-out) both; }
@keyframes rb-status-ein { 0% { opacity: 0; transform: translateY(6px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@media (max-width: 640px) { .form__actions { flex-wrap: wrap; } .form__status.is-erfolg, .form__status.is-problem { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .form__status.is-erfolg.is-visible { animation: none; } }