/* Unterseiten von Fahrzeugtechnik Balan.
   Dieselben Tokens wie die Startseite, aber ein ruhigeres Layout: die
   Startseite ist ein Schaufenster, diese Seiten sind Lesetexte. */

:root{
  --bg:#050505;
  --bg-2:#0c0c0c;
  --fg:#f4f2ef;
  --muted:#a6a6a6;      /* Kontrast 8,2:1 auf --bg */
  --dim:#8f8f8f;        /* Kontrast 6,2:1 auf --bg */
  --line:rgba(255,255,255,.12);
  --accent:#a96aff;     /* Kontrast 6,0:1 auf --bg */
  --accent-ink:#120d1b;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --mw:760px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-weight:300;line-height:1.65;overflow-x:hidden;
  -moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Tastaturfokus: 2px Violett auf Schwarz, 6:1 */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:1100;background:var(--accent);
  color:var(--accent-ink);padding:0 20px;min-height:44px;display:inline-flex;
  align-items:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600}
.skip:focus{left:var(--pad);top:12px}

/* ------------------------------------------------------------------- Kopf */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--pad);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
  background:rgba(5,5,5,.86);backdrop-filter:blur(14px)}
.marke{display:flex;align-items:center;gap:12px;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.marke img{width:40px;height:40px}
.kopf nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Form, Schrift und Farbe der Kopfzeilen-Knoepfe stehen in knoepfe.css,
   gemeinsam mit denen der Startseite. Hier stand frueher eine eigene
   Fassung mit .14em Sperrung und zwei !important - sie war spezifischer
   als das gemeinsame System und hat es ausgehebelt, sodass derselbe Knopf
   auf Start- und Unterseite verschieden aussah. */

/* ----------------------------------------------------------------- Inhalt */
main{padding:clamp(40px,7vw,96px) var(--pad) 0}
article{max-width:var(--mw);margin:0 auto}
.eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);font-weight:500;margin-bottom:18px}
h1{font-size:clamp(30px,5.4vw,52px);font-weight:200;line-height:1.08;
  letter-spacing:-.03em;text-wrap:balance;margin-bottom:28px}
h2{font-size:clamp(19px,2.4vw,25px);font-weight:400;line-height:1.25;
  letter-spacing:-.018em;margin:0 0 16px;text-wrap:balance}

/* Der Antwortblock unter der Ueberschrift. 30 bis 90 Woerter, in sich
   verstaendlich - er muss ohne den Rest der Seite eine Antwort sein. */
.kapsel{font-size:clamp(16px,1.9vw,19px);font-weight:300;line-height:1.55;
  color:var(--fg);border-left:2px solid var(--accent);padding-left:20px;
  margin-bottom:clamp(36px,5vw,60px)}

.abschnitt{margin-bottom:clamp(36px,5vw,60px)}
.abschnitt p{color:var(--muted);margin-bottom:14px;max-width:66ch}
.abschnitt p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- Tabelle */
.tabwrap{overflow-x:auto;border:1px solid var(--line);border-radius:3px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);
  vertical-align:top}
th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;background:var(--bg-2);white-space:nowrap}
td{color:var(--muted)}
td:first-child{color:var(--fg);font-weight:400}
tbody tr:last-child td{border-bottom:none}

/* ------------------------------------------------------------------- Karten */
.karten{list-style:none;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.karten a{display:block;padding:20px;background:var(--bg-2);height:100%;
  border:1px solid var(--line);transition:border-color .3s var(--ease)}
.karten a:hover{border-color:var(--accent)}
.karten strong{display:block;font-weight:400;font-size:15px;margin-bottom:8px}
.karten span{display:block;font-size:13px;color:var(--dim);line-height:1.5}

/* ---------------------------------------------------------------------- FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 36px 16px 0;position:relative;
  font-size:15px;font-weight:400;list-style:none;min-height:44px;
  display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;
  transform:translateY(-50%);color:var(--accent);font-size:20px;font-weight:200}
.faq details[open] summary::after{content:"−"}
.faq details>div{padding:0 0 18px}
.faq details p{color:var(--muted);font-size:15px;max-width:66ch;margin:0}

/* ------------------------------------------------------------------ Weiter */
.verwandt{border-top:1px solid var(--line);padding-top:28px;
  margin-bottom:clamp(36px,5vw,60px)}
.verwandt ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:16px}
.verwandt li a{display:inline-flex;align-items:center;min-height:44px;
  padding:0 16px;border:1px solid var(--line);font-size:13px;
  color:var(--muted);transition:border-color .3s var(--ease),color .3s var(--ease)}
.verwandt li a:hover{border-color:var(--accent);color:var(--fg)}
/* 44px Zielflaeche, auch hier: am Telefon gemessen war dieser Link nur
   19px hoch und damit schwer zu treffen. */
.verwandt>p a{font-size:13px;color:var(--accent);
  border-bottom:1px solid var(--accent);
  display:inline-flex;align-items:center;min-height:44px}
.marke{min-height:44px}

/* ----------------------------------------------------------------- Anfrage */
.anfrage{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px);
  padding:clamp(40px,6vw,72px) var(--pad);background:var(--bg-2);text-align:center}
.anfrage h2{margin-bottom:12px}
.anfrage>p{color:var(--muted);max-width:52ch;margin:0 auto 28px}
.wege{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:28px}
/* .weg und .weg.haupt stehen ebenfalls in knoepfe.css - dieselben Werte wie
   die Knoepfe der Startseite. */
address{font-style:normal;font-size:13px;color:var(--dim);line-height:1.8}

/* ------------------------------------------------------------------ Fusszeile */
footer{padding:22px var(--pad);border-top:1px solid var(--line);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px}
footer nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
/* 44px Zielflaeche: die Pflichtseiten muessen auch auf dem Telefon
   zuverlaessig treffbar sein, sonst sind sie faktisch nicht erreichbar. */
footer nav a{font-size:11px;letter-spacing:.1em;color:var(--muted);
  min-height:44px;display:inline-flex;align-items:center;padding:0 12px;
  transition:color .3s var(--ease)}
footer nav a:hover{color:var(--fg)}
footer span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim)}

/* Schmale Geraete: der Markenname bricht sonst zweizeilig um und die
   Navigation schiebt sich darueber. Auf dem Telefon traegt das Zeichen die
   Marke allein - der Name steht ohnehin in der Ueberschrift darunter. */
@media (max-width:620px){
  .kopf{padding:10px 16px;gap:10px}
  .marke span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;   /* fuer Screenreader da, sichtbar weg */
  }
  .marke img{width:34px;height:34px}
  .kopf nav{gap:2px}
  .kopf nav a{padding:10px 8px;font-size:10px;letter-spacing:.1em}
  /* Kopf-CTA: Masse stehen in knoepfe.css */
}
/* Sehr schmal: die zwei Textlinks weichen, der Anrufknopf bleibt - er ist
   der einzige, den jemand auf dem Telefon wirklich braucht. */
@media (max-width:400px){
  .kopf nav a:not(.kopf-cta){display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* ===========================================================================
   KNOPFSYSTEM - eine Quelle fuer die Startseite UND alle Unterseiten.

   WARUM diese Datei existiert: die Startseite traegt ihr CSS inline, die
   Unterseiten laden stil.css. Dieselben Knoepfe waren dadurch an zwei Orten
   definiert und liefen auseinander. Am 06.11.2026 gemessen:

     Radius        999px (Start)  gegen  0px (Unterseiten)
     Hoehen        44 / 84 / 66 / 44 / 48  gegen  44 / 94 / 48 / 66 / 44 / 0
     Schriftgrade  9 / 11 / 12             gegen  10 / 11 / 13 / 14 / 16
     Gewichte      300 / 500 / 600         gegen  300 / 600
     Versalien     teils ja, teils nein    gegen  teils ja, teils nein

   Runde Pillen neben eckigen Kaesten lesen sich wie zwei verschiedene
   Websites. Diese Datei wird von bauen.py in stil.css gehaengt UND von
   startseite.py in die Startseite eingesetzt - damit gibt es die Werte nur
   noch einmal.

   Die FARBEN waren bereits ueberall gleich (#a96aff auf #120d1b) und bleiben
   unangetastet; abgeglichen werden Form, Groesse und Schrift.
   =========================================================================== */

:root{
  --k-radius: 999px;      /* Pillenform - der Auftritt der Startseite gibt sie vor */
  --k-hoehe: 48px;        /* Standard, deutlich ueber den 44px Mindestzielflaeche */
  --k-hoehe-klein: 44px;  /* Kopfzeile und Navigation, wo der Platz knapp ist */
  --k-schrift: 12px;
  --k-sperrung: .09em;
  --k-pad: 24px;
  --k-pad-klein: 16px;
}

/* --- Gemeinsame Grundform ------------------------------------------------
   Alle Knopfklassen beider Seitentypen in EINER Regel. Die Namen sind
   historisch verschieden (hdr-cta hier, kopf-cta dort) - zusammengefuehrt
   wird ueber diese Liste, nicht durch Umbenennen im HTML, weil die
   Startseite abgenommen ist und ihr Markup nicht angefasst werden soll. */
.hdr-cta, .kopf-cta,
.hero-button, .hero-button-primary, .hero-button-secondary,
.weg, .f button, .skip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--k-hoehe);
  padding:0 var(--k-pad);
  border:0;
  border-radius:var(--k-radius);
  font-family:var(--sans);
  font-size:var(--k-schrift);
  font-weight:600;
  letter-spacing:var(--k-sperrung);
  text-transform:uppercase;
  text-align:center;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}

/* --- Primaer: violetter Grund -------------------------------------------
   Der zweitonige Rand ist nicht Zierde. Die Knoepfe liegen teils ueber dem
   Hero-Video; eine einzelne Haarlinie haelt die 3:1 nach WCAG 1.4.11 nicht
   gegen jeden Bildinhalt. Dunkel aussen plus hell innen haelt gegen beides. */
.hdr-cta, .kopf-cta, .hero-button-primary, .weg.haupt, .f button, .skip{
  background:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 0 0 1px #050505, inset 0 0 0 1px rgba(255,255,255,.6);
}
.hdr-cta:hover, .kopf-cta:hover, .hero-button-primary:hover,
.weg.haupt:hover, .f button:hover{
  background:#b982ff;
  transform:translateY(-1px);
}

/* --- Sekundaer: durchscheinend mit Rand --------------------------------- */
.hero-button-secondary, .weg:not(.haupt){
  background:rgba(5,5,5,.35);
  color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--line);
  backdrop-filter:blur(6px);
}
.hero-button-secondary:hover, .weg:not(.haupt):hover{
  background:rgba(5,5,5,.6);
  box-shadow:inset 0 0 0 1px var(--accent);
  transform:translateY(-1px);
}

/* --- Kleine Form fuer die Kopfzeile ------------------------------------- */
.hdr-cta, .kopf-cta{
  min-height:var(--k-hoehe-klein);
  padding:0 var(--k-pad-klein);
  font-size:11px;
}

/* --- Textlinks in Kopf, Fuss und Weiterfuehrung --------------------------
   Keine Flaeche, aber dieselbe Schrift und IMMER 44px Zielflaeche. Eine der
   Navigationszeilen war gemessen 0px hoch und damit nicht treffbar. */
.kopf nav a:not(.kopf-cta), #main-nav a, footer nav a, .verwandt li a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  font-size:11px;
  letter-spacing:var(--k-sperrung);
  text-transform:uppercase;
  font-weight:400;
  color:var(--muted);
  text-decoration:none;
  transition:color .3s var(--ease);
}
.kopf nav a:not(.kopf-cta):hover, #main-nav a:hover,
footer nav a:hover, .verwandt li a:hover{color:var(--fg)}

/* Die Weiterfuehrung behaelt ihren Rahmen, bekommt aber dieselbe Pillenform. */
.verwandt li a{
  box-shadow:inset 0 0 0 1px var(--line);
  border:0;
  border-radius:var(--k-radius);
  padding:0 18px;
}
.verwandt li a:hover{box-shadow:inset 0 0 0 1px var(--accent)}

/* Sprungmarke: liegt ueber allem, darf nicht wie ein Inhaltsknopf wirken. */
.skip{min-height:44px;font-size:11px}

@media (prefers-reduced-motion:reduce){
  .hdr-cta, .kopf-cta, .hero-button, .weg, .f button{transition:none}
  .hdr-cta:hover, .kopf-cta:hover, .hero-button-primary:hover,
  .weg.haupt:hover, .weg:not(.haupt):hover{transform:none}
}