/* Gestaltung nach dem Styleguide „windige Streckenkenntnis“ (Version 1.0). */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url(schrift/manrope-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url(schrift/manrope-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url(schrift/manrope-latin-700-normal.woff2) format("woff2"); }

:root {
  --color-petrol: #12343b;
  --color-mint: #55d6be;
  --color-offwhite: #f5f7f4;
  --color-slate: #52656b;
  --color-amber: #f4b860;

  --color-background: var(--color-offwhite);
  --color-surface: #fff;
  --color-text: var(--color-petrol);
  --color-text-muted: var(--color-slate);
  --color-action: var(--color-mint);
  --color-on-action: var(--color-petrol);
  --color-notice: var(--color-amber);
  --color-line: #d5ddda;

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-control: 8px;
  --radius-card: 12px;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}
:focus-visible { outline: 3px solid var(--color-petrol); outline-offset: 3px; }

header { background: var(--color-surface); border-bottom: 1px solid var(--color-line); padding: 8px 16px; }
.kopf { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
/* Schutzraum: ein Viertel der Symbolhöhe rundum (Bild ohne Rand, 300 × 65 px → 16 px). */
.logo { display: block; margin: 0; padding: 16px 0; }
.logo img { display: block; width: 300px; max-width: 100%; height: auto; }
header p { margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; max-width: 40ch; }

main { max-width: 1000px; margin: 0 auto; padding: 24px 16px; }
section { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 24px; margin-bottom: 16px; }
h2 { margin: 0 0 16px; font-size: 26px; line-height: 1.3; font-weight: 700; }
h3 { font-size: 19px; line-height: 1.4; font-weight: 600; margin: 32px 0 12px; }

.schritte { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; counter-reset: schritt; }
.schritte li { flex: 1; padding: 8px 12px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-control); color: var(--color-text-muted); text-align: center; font-size: 14px; font-weight: 600; }
.schritte li.aktiv { background: var(--color-mint); border: 2px solid var(--color-petrol); color: var(--color-petrol); }

label { display: block; margin-bottom: 16px; font-weight: 600; font-size: 14px; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin-top: 4px; padding: 10px 12px;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-slate); border-radius: var(--radius-control);
}
input:hover, textarea:hover { border-color: var(--color-petrol); }
::placeholder { color: var(--color-slate); opacity: .8; }
.reihe { display: flex; gap: 12px; flex-wrap: wrap; }
.reihe label { flex: 1; min-width: 140px; }
label.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 16px; margin-top: 24px; padding: 16px; background: var(--color-background); border: 1px solid var(--color-line); border-radius: var(--radius-control); }
label.check input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--color-petrol); }

button {
  min-height: 44px; padding: 10px 20px; font: inherit; font-weight: 600; line-height: 1.4;
  border: 2px solid var(--color-petrol); border-radius: var(--radius-control);
  background: var(--color-action); color: var(--color-on-action); cursor: pointer;
}
button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--color-petrol); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }
button.sekundaer { background: transparent; color: var(--color-petrol); }
button.sekundaer:hover:not(:disabled) { background: rgba(18, 52, 59, .06); }
.aktionen { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kachel { background: var(--color-background); border-radius: var(--radius-control); padding: 12px 16px; }
.kachel span { display: block; font-size: 14px; color: var(--color-text-muted); }
.kachel strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hinweise { list-style: none; margin: 16px 0 0; padding: 0; }
.hinweise li { margin-bottom: 8px; padding: 8px 12px 8px 40px; position: relative; background: #fdf1de; border-left: 4px solid var(--color-amber); border-radius: var(--radius-control); font-size: 14px; line-height: 1.5; }
.hinweise li::before { content: "!"; position: absolute; left: 12px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-amber); color: var(--color-petrol); font-weight: 700; font-size: 12px; line-height: 18px; text-align: center; }

.tabelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--color-line); vertical-align: top; }
th { background: var(--color-background); white-space: nowrap; font-weight: 600; }

#meldung { background: #fdf1de; border-left: 4px solid var(--color-amber); padding: 12px 16px; border-radius: var(--radius-control); font-weight: 600; }
#meldung::before { content: "Hinweis: "; }

.quelle { font-size: 14px; line-height: 1.5; color: var(--color-text-muted); margin-top: 12px; }
td small, .variante small { color: var(--color-text-muted); }

.ueber { margin-bottom: 16px; }
.ueber > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.ueber-zeile { display: flex; gap: 8px; margin-bottom: 8px; }
.ueber-zeile input { margin-top: 0 !important; }
.ueber-zeile button { min-width: 44px; padding: 0 12px; }
#varianten { border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 8px 16px 12px; margin: 0 0 16px; }
#varianten legend { font-weight: 600; padding: 0 4px; }
.variante { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 16px; padding: 8px 12px; margin: 4px 0; border: 2px solid transparent; border-radius: var(--radius-control); cursor: pointer; }
.variante:has(input:checked) { border-color: var(--color-petrol); background: rgba(85, 214, 190, .18); }
.variante input { margin-top: 5px; flex: none; accent-color: var(--color-petrol); }
.diagramm { border: 1px solid var(--color-line); border-radius: var(--radius-control); background: #fff; }
.diagramm svg { display: block; }
.downloads { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#fplo { margin-bottom: 24px; padding: 12px 16px; background: var(--color-background); border: 1px solid var(--color-line); border-radius: var(--radius-card); }
#fplo summary { cursor: pointer; font-weight: 600; min-height: 28px; }
#fplo[open] summary { margin-bottom: 12px; }
#fplo textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.4; }

@media (max-width: 600px) {
  section { padding: 16px; }
  h2 { font-size: 24px; }
  .schritte li { font-size: 13px; padding: 8px 4px; }
  .logo img { width: 280px; }
}