/* StadtTeilAuto Freising – Grundgestaltung für quiz.sta-fs.de (Quiz und Rechner)
   Ruhig und typografisch: weiße Seite, eine Textspalte, Linien statt Kästen.
   Farben und Schriften wie im WordPress-Theme. */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url(../fonts/barlow-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(../fonts/barlow-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Zodiak'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/zodiak-variable-normal.woff2) format('woff2'); }
@font-face { font-family: 'Zodiak'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/zodiak-variable-italic.woff2) format('woff2'); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:        #007D32;
  --green-dark:   #005a24;
  --green-light:  #e8f3ec;
  --orange:       #EF7B10;
  --orange-dark:  #c9640a;
  --red:          #c23a30;
  --red-light:    #fdeeec;
  --black:        #111111;
  --gray-dark:    #333;
  --gray:         #5f6662;
  --line:         #d9e0dc;
  --white:        #ffffff;
  --paper:        #f6f7f5;

  --font-heading: 'Zodiak', Georgia, serif;
  --font-body:    'Barlow', system-ui, sans-serif;
  --font-plate:   'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --ease:         .2s ease;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: var(--green-dark); }
button, input, select { font: inherit; color: inherit; }
[tabindex="-1"]:focus { outline: none; }

.wrap { width: 100%; max-width: 700px; margin: 0 auto; padding: 0 16px; }

h1, h2 { font-family: var(--font-heading); font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.08; }
h2 { font-size: clamp(1.55rem, 5.6vw, 2.05rem); line-height: 1.15; }
h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.lead { font-size: 1.2rem; color: var(--gray-dark); max-width: 40ch; }
.klein { font-size: .9rem; color: var(--gray); }
strong { font-weight: 600; }


/* ── Kopf und Fuß ───────────────────────────────────────── */

.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.top-logo img { height: 30px; width: auto; }
.top-nav { margin-left: auto; display: flex; gap: 1.1rem; font-size: .95rem; }
.top-nav a { color: var(--gray-dark); text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.top-nav a:hover { color: var(--green-dark); }
.top-nav a[aria-current="page"] { color: var(--black); font-weight: 600; border-bottom-color: var(--orange); }

main { flex: 1; padding: 2rem 0 3.5rem; }

.foot { border-top: 1px solid var(--line); font-size: .85rem; color: var(--gray); padding: 1.25rem 0 2rem; line-height: 1.7; }
.foot a { color: var(--gray); }


/* ── Knöpfe ─────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 52px; padding: .8rem 1.5rem;
  font-weight: 600; font-size: 1.05rem; line-height: 1.2; text-align: center; text-decoration: none;
  border-radius: 6px; border: 2px solid transparent; cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.btn-green  { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--green-dark); }
.btn-orange { background: var(--orange); color: var(--white); }
.btn-orange:hover { background: var(--orange-dark); }
.btn-outline { background: var(--white); border-color: var(--black); color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
.btn-block { display: flex; width: 100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(239,123,16,.6); outline-offset: 2px;
}
.link-btn { background: none; border: none; color: var(--gray-dark); text-decoration: underline; cursor: pointer; padding: .5rem; }
.link-btn:hover { color: var(--green-dark); }


/* ── Schieberegler ──────────────────────────────────────── */

input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 10px;
  border-radius: 5px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--green) var(--pct, 50%), #d5e1da var(--pct, 50%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--white); border: 6px solid var(--green); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--white); border: 6px solid var(--green); box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
input[type="range"]:focus-visible { outline-offset: 8px; }
input[type="range"]:disabled { cursor: default; opacity: .8; }


/* ── Kennzeichen (nur für echte Fahrzeuge des Vereins) ──── */

.kennzeichen {
  display: inline-flex; align-items: stretch; vertical-align: middle;
  height: 1.7em; border: 2px solid #111; border-radius: 4px; background: #fff; overflow: hidden;
  font-family: var(--font-plate); font-weight: 600; font-size: 1rem; line-height: 1; white-space: nowrap;
}
.kennzeichen::before {
  content: 'D'; display: flex; align-items: flex-end; justify-content: center;
  width: 1.05em; padding-bottom: .12em; background: #1f4fa8; color: #fff; font-size: .62em;
}
.kennzeichen span { display: flex; align-items: center; padding: 0 .45em; letter-spacing: .04em; }


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