/* ==========================================================================================
   BASIS — Kopie aus hppartsurferreloaded/style.css, gleichlautend in hpservicepins/style.css und
   hpfirmwarefinder/style.css. Die Anwendungen laden nichts voneinander (siehe CLAUDE.md);
   wer hier etwas ändert, ändert es in beiden Kopien und prüft, ob PartSurfer es ebenso hat.
   Anwendungseigenes steht erst unter „ANWENDUNG“ am Ende der Datei.

   Design: leicht gerundet, Karten schweben mit weichem Schatten über dem Seitengrund, Linien als
   halbtransparente Haarlinien, Orange nur für Interaktion (siehe „Form“ vor ANWENDUNG).
   ========================================================================================== */

/* Selbst ausgeliefert statt von fonts.googleapis.com — im Firmennetz ist das CDN oft geblockt. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 700;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 700;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --brand:hsl(17 89% 58%);
  --brand-hover:hsl(17 79% 48%);
  --brand-faint:hsl(17 89% 58% / .13);
  --brand-line:hsl(17 89% 58% / .45);
  --brand-text:var(--brand);
  --brand-glow:hsl(17 89% 58% / .16);
  --shadow-panel:0 18px 40px hsl(0 0% 0% / .45);
  --shadow-toast:0 10px 28px hsl(0 0% 0% / .5);
  --shadow-modal:0 24px 60px hsl(240 3% 3% / .7);
  --color-scrim:hsl(240 3% 5% / .72);
  --color-row-zebra:hsl(0 0% 100% / .022);

  --color-bg:hsl(240 2% 12%);
  --color-bg-sunken:hsl(240 3% 8%);
  --color-surface:hsl(240 2% 15%);
  --color-surface-raised:hsl(240 2% 19%);
  --color-float:var(--color-surface-raised);
  --color-surface-hover:hsl(0 0% 100% / .06);
  --color-black:#0b0b0c;
  --color-dot:hsl(0 0% 100% / .045);

  --color-text:hsl(0 0% 100%);
  --color-text-muted:hsl(0 0% 70%);
  --color-text-faint:hsl(0 0% 58%);
  --color-text-on-brand:#111112;

  --color-border:hsl(0 0% 24%);
  --color-border-strong:hsl(0 0% 34%);

  --color-danger:hsl(4 82% 66%);
  --color-success:hsl(145 48% 55%);
  --color-success-faint:hsl(145 48% 55% / .14);
  --color-success-line:hsl(145 48% 55% / .42);
  --color-info:hsl(205 78% 62%);
  --color-warning:hsl(38 95% 58%);
  --color-warning-faint:hsl(38 95% 58% / .13);
  --color-warning-line:hsl(38 95% 58% / .45);

  --font:"Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --font-mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;

  /* Schriftstufen: sechs feste Größen statt rund 30 Einzelwerte. Darüber nur der Seitentitel
     (clamp) und Symbole wie das ×, die keine Schrift im engeren Sinn sind. */
  --fs-1:.6875rem; /* 11 px  Beschriftungen in Versalien, Fußzeile */
  --fs-2:.75rem;   /* 12 px  Zähler, Zeitangaben, Metadaten */
  --fs-3:.8125rem; /* 13 px  Kleingedrucktes, Tabellenzellen am Handy */
  --fs-4:.875rem;  /* 14 px  Fließtext klein, Knöpfe */
  --fs-5:1rem;     /* 16 px  Fließtext, Eingabefelder */
  --fs-6:1.125rem; /* 18 px  Zwischenüberschriften */

  --control-size:2.75rem;
  --content-width:980px;
  --gutter:1.5rem;
  --space-block:1.5rem;
  --kopfhoehe:61px;
  color-scheme:dark;
}

/* Helles Farbschema: folgt dem System, solange keine Wahl gespeichert ist (data-theme am <html>,
   gesetzt vom Inline-Skript im Kopf und vom Knopf in der Kopfzeile). Dieselben Werte stehen
   zweimal, damit die ausdrückliche Wahl in beide Richtungen gewinnt. Die Fußzeile bleibt in
   beiden Schemata dunkel (--color-black und ihre festen Grautöne). */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --brand:hsl(17 89% 52%);
    --brand-hover:hsl(17 84% 44%);
    --brand-text:hsl(17 82% 38%);
    --brand-faint:hsl(17 89% 50% / .12);
    --brand-line:hsl(17 89% 45% / .5);
    --brand-glow:hsl(17 89% 55% / .07);

    --color-bg:hsl(240 6% 97%);
    --color-bg-sunken:hsl(240 8% 93%);
    --color-surface:hsl(0 0% 100%);
    --color-surface-raised:hsl(240 8% 95%);
    --color-float:var(--color-surface);
    --color-surface-hover:hsl(240 10% 10% / .05);
    --color-dot:hsl(240 10% 20% / .05);

    --color-text:hsl(240 8% 12%);
    --color-text-muted:hsl(240 5% 36%);
    --color-text-faint:hsl(240 4% 42%);

    --color-border:hsl(240 8% 84%);
    --color-border-strong:hsl(240 6% 66%);

    --color-danger:hsl(4 72% 42%);
    --color-success:hsl(145 60% 28%);
    --color-success-faint:hsl(145 55% 35% / .12);
    --color-success-line:hsl(145 55% 35% / .45);
    --color-info:hsl(205 82% 38%);
    --color-warning:hsl(40 95% 27%);
    --color-warning-faint:hsl(40 95% 40% / .14);
    --color-warning-line:hsl(40 95% 35% / .5);

    --shadow-panel:0 1px 2px hsl(240 10% 20% / .1),0 12px 28px hsl(240 10% 20% / .16);
    --shadow-toast:0 1px 2px hsl(240 10% 20% / .08),0 6px 16px hsl(240 10% 20% / .16);
    --shadow-modal:0 2px 6px hsl(240 10% 20% / .12),0 20px 48px hsl(240 10% 20% / .22);
    --color-scrim:hsl(240 10% 25% / .42);
    --color-row-zebra:hsl(240 10% 10% / .03);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --brand:hsl(17 89% 52%);
  --brand-hover:hsl(17 84% 44%);
  --brand-text:hsl(17 82% 38%);
  --brand-faint:hsl(17 89% 50% / .12);
  --brand-line:hsl(17 89% 45% / .5);
  --brand-glow:hsl(17 89% 55% / .07);

  --color-bg:hsl(240 6% 97%);
  --color-bg-sunken:hsl(240 8% 93%);
  --color-surface:hsl(0 0% 100%);
  --color-surface-raised:hsl(240 8% 95%);
  --color-float:var(--color-surface);
  --color-surface-hover:hsl(240 10% 10% / .05);
  --color-dot:hsl(240 10% 20% / .05);

  --color-text:hsl(240 8% 12%);
  --color-text-muted:hsl(240 5% 36%);
  --color-text-faint:hsl(240 4% 42%);

  --color-border:hsl(240 8% 84%);
  --color-border-strong:hsl(240 6% 66%);

  --color-danger:hsl(4 72% 42%);
  --color-success:hsl(145 60% 28%);
  --color-success-faint:hsl(145 55% 35% / .12);
  --color-success-line:hsl(145 55% 35% / .45);
  --color-info:hsl(205 82% 38%);
  --color-warning:hsl(40 95% 27%);
  --color-warning-faint:hsl(40 95% 40% / .14);
  --color-warning-line:hsl(40 95% 35% / .5);

  --shadow-panel:0 1px 2px hsl(240 10% 20% / .1),0 12px 28px hsl(240 10% 20% / .16);
  --shadow-toast:0 1px 2px hsl(240 10% 20% / .08),0 6px 16px hsl(240 10% 20% / .16);
  --shadow-modal:0 2px 6px hsl(240 10% 20% / .12),0 20px 48px hsl(240 10% 20% / .22);
  --color-scrim:hsl(240 10% 25% / .42);
  --color-row-zebra:hsl(240 10% 10% / .03);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

/* Native Scrollbar versteckt, ersetzt durch .custom-scrollbar (app.js) — nimmt nie Platz vom
   Layout weg. clip statt hidden: kappt den Lichtschein, ohne die klebende Kopfzeile zu brechen. */
html{scrollbar-width:none;-ms-overflow-style:none;-webkit-text-size-adjust:100%}
html::-webkit-scrollbar{display:none}
html,body{overflow-x:clip}

body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;position:relative;
  font-family:var(--font);line-height:1.5;color:var(--color-text);
  background-color:var(--color-bg);
  background-image:radial-gradient(circle,var(--color-dot) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-font-smoothing:antialiased;
}
/* Oranger Lichtschein oben rechts — dasselbe Motiv wie auf der Landingpage */
body::before{
  content:"";position:absolute;top:-30vh;right:-10vw;width:min(60vw,720px);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,var(--brand-glow),transparent 68%);
  pointer-events:none;z-index:0;
}
::selection{background:var(--brand);color:var(--color-text-on-brand)}
[hidden]{display:none !important}

.wrap{width:100%;max-width:var(--content-width);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Kopfzeile ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--color-bg-sunken);border-bottom:1px solid var(--color-border)}
.site-header .wrap{display:flex;align-items:center;gap:1rem;min-height:60px}
.brandmark{
  display:inline-flex;align-items:baseline;gap:.05rem;margin-right:auto;
  font-stretch:80%;font-weight:700;font-size:1.1rem;letter-spacing:-.01em;line-height:1;
  text-decoration:none;color:var(--color-text);
  border-block:2px solid transparent;padding-block:2px; /* Unsichtbarer Rand auch oben, damit der Hover-Strich unten die Wortmarke nicht aus der Mitte schiebt */
}
.brandmark .dot{color:var(--brand)}
.brandmark .sub{font-weight:400;color:var(--color-text-muted)}
.brandmark:hover{border-bottom-color:var(--brand);text-decoration:none}

/* Knopf in der Kopfzeile — Form wie Breite/Verlauf/FAQ in PartSurfer: 32px hoch, Symbol 15px,
   Menüknopf damit 34×32 — auf allen Seiten der Domain gleich */
.kopf-btn{
  display:inline-flex;align-items:center;gap:.45rem;min-height:2rem;padding:.45rem .7rem;
  background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);
  font-family:inherit;font-size:var(--fs-1);font-weight:700;font-stretch:88%;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.kopf-btn svg{width:15px;height:15px}
.kopf-btn:hover,.kopf-btn[aria-expanded="true"]{background:var(--color-surface-hover);border-color:var(--color-border-strong);color:var(--color-text)}
.kopf-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.menue-knopf{padding-inline:.55rem}
.menue-knopf[aria-expanded="true"] svg{color:var(--brand-text)}

/* Farbschema-Schalter: Sonne links, Mond rechts, der orange Griff liegt unter dem gerade
   geltenden Symbol. Gleiche Maße in PartSurfer und auf der Startseite. Der Knopf ist so hoch wie
   die Kopfknöpfe daneben (am Finger 44px), die sichtbare Spur nur 24px. */
.thema-schalter{flex:none;display:inline-grid;place-items:center;min-height:2rem;padding:0;border:0;background:none;color:var(--color-text-muted);cursor:pointer}
.thema-spur{position:relative;display:block;width:2.75rem;height:1.5rem;background:var(--color-surface);border:1px solid var(--color-border);transition:border-color .15s ease}
.thema-griff{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--brand);transition:transform .2s ease}
.thema-schalter[aria-checked="true"] .thema-griff{transform:translateX(20px)}
.thema-spur svg{position:absolute;top:5px;width:12px;height:12px;transition:color .2s ease}
.thema-sonne{left:5px}
.thema-mond{right:5px}
.thema-schalter[aria-checked="false"] .thema-sonne,.thema-schalter[aria-checked="true"] .thema-mond{color:var(--color-text-on-brand)}
.thema-schalter:hover .thema-spur{border-color:var(--color-border-strong)}
.thema-schalter:focus-visible{outline:none}
.thema-schalter:focus-visible .thema-spur{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- Breitenmenü — Kopie von .width-menu aus PartSurfer, Stufen und Werte gleich ---------- */
:root[data-width="standard"]{--content-width:980px}
:root[data-width="wide"]{--content-width:1280px}
:root[data-width="full"]{--content-width:100%;--gutter:2rem}
.width-menu{position:relative;display:inline-flex}
/* Die Spalte im Knopfsymbol bleibt orange: Sie zeigt die eingestellte Stufe */
.width-toggle .width-icon-fill{fill:var(--brand)}
.width-toggle .width-icon{width:20px;height:16px}
.width-toggle-caret{flex:none;width:0;height:0;border-left:.3rem solid transparent;border-right:.3rem solid transparent;border-top:.36rem solid currentColor;transition:transform .12s ease}
.width-toggle[aria-expanded="true"] .width-toggle-caret{transform:rotate(180deg)}
.width-panel{
  position:absolute;top:calc(100% + .45rem);right:0;z-index:60;display:flex;flex-direction:column;
  min-width:100%;width:max-content;background:var(--color-float);
  border:1px solid var(--color-border-strong);box-shadow:var(--shadow-panel);
}
.width-btn{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border:0;background:transparent;color:var(--color-text-muted);font-family:inherit;font-size:var(--fs-3);text-align:left;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.width-btn-name{flex:1 1 auto}
.width-btn-hint{flex:none;font-family:var(--font-mono);font-size:var(--fs-2);color:var(--color-text-faint)}
.width-icon{display:block;width:20px;height:14px}
.width-icon-frame{fill:none;stroke:currentColor;stroke-width:1;opacity:.3}
.width-icon-fill{fill:currentColor;transition:fill .15s ease}
.width-btn:hover:not([aria-pressed="true"]){color:var(--color-text);background:var(--color-surface-hover)}
.width-btn[aria-pressed="true"]{color:var(--brand-text)}
.width-btn[aria-pressed="true"] .width-icon-fill{fill:var(--brand)}
.width-btn:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* Unter 1000px sind die Stufen nicht mehr unterscheidbar: Menü weg, volle Fensterbreite */
@media (max-width:1000px){
  .width-menu{display:none}
  :root[data-width]{--content-width:100%}
  :root[data-width="full"]{--gutter:1.5rem}
}

/* ---------- Seitenkopf ---------- */
.container{position:relative;z-index:2;flex:1;width:100%;max-width:var(--content-width);margin:0 auto;padding:2.25rem var(--gutter) 3rem;transition:max-width .2s ease}
/* Titel links, Verlauf rechts auf Höhe der Einleitung — wie in Error Codes und Service Manuals */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.75rem;animation:einblenden .45s ease both}
.page-head-titel{min-width:0}
.eyebrow{margin:0 0 .4rem;font-size:var(--fs-1);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-text)}
/* Überschriften des Corporate Designs: schmal, versal, eng laufend */
.h-cond{margin:0;font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.06}
h1{margin:0;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.35rem)}
/* Titel führt zurück auf die Startansicht; zweiter Teil in Signalorange */
.page-title-link{
  color:inherit;text-decoration:underline;text-decoration-color:transparent;
  text-decoration-thickness:3px;text-underline-offset:.16em;transition:text-decoration-color .15s ease;
}
.page-title-link:hover,.page-title-link:focus-visible{text-decoration-color:var(--brand);outline:none}
.page-title-accent{color:var(--brand-text)}
.intro{margin:.75rem 0 0;max-width:62ch;font-size:var(--fs-4);font-weight:300;color:var(--color-text-muted)}
.fussnote{margin:1.5rem 0 0;max-width:78ch;font-size:var(--fs-2);font-weight:300;line-height:1.55;color:var(--color-text-faint)}

/* ---------- Knöpfe ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.6rem 1.25rem;min-height:var(--control-size);
  font-family:inherit;font-size:var(--fs-3);font-weight:700;font-stretch:88%;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn-primary{background:var(--brand);color:var(--color-text-on-brand)}
.btn-primary:hover{background:var(--brand-hover);color:#fff}
.btn:disabled{opacity:.6;cursor:progress}

/* Kennzeichen in Tabellen und Karten (Quelle, „Neueste“) */
.badge{
  display:inline-block;padding:.12rem .4rem;white-space:nowrap;
  font-size:var(--fs-1);font-weight:700;font-stretch:90%;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-muted);border:1px solid var(--color-border-strong);
}
.badge-erfolg{color:var(--color-success);background:var(--color-success-faint);border-color:var(--color-success-line)}
.badge-warnung{color:var(--color-warning);background:var(--color-warning-faint);border-color:var(--color-warning-line)}

/* ---------- Steuerung über der Liste: klebt unter der Kopfzeile wie in PartSurfer ---------- */
/* 1px unter die Kopfzeile geschoben: ihre Höhe ist je nach Pixeldichte krumm (60,8px), sonst bliebe
   oben ein Haarspalt, durch den man die Liste scrollen sieht. Die Kopfzeile liegt darüber (z-index 50). */
.results-head{
  position:sticky;top:calc(var(--kopfhoehe) - 1px);z-index:30;margin-bottom:var(--space-block);
  display:flex;gap:.5rem;padding:.5rem .75rem;
  background:var(--color-surface);border:1px solid var(--color-border);
  animation:einblenden .45s .08s ease both;
}
/* Rahmen und Fokusring am Kasten, nicht am <input>: Lupe, Eingabe, Trefferzahl und × teilen ihn */
.filter-input-wrap{
  flex:1;min-width:0;display:flex;align-items:center;min-height:var(--control-size);
  background:var(--color-bg-sunken);border:1px solid var(--color-border);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.filter-input-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-faint)}
.filter-input-wrap .lupe{flex:none;width:17px;height:17px;margin-left:.75rem;color:var(--color-text-faint);transition:color .15s ease}
.filter-input-wrap:focus-within .lupe{color:var(--brand-text)}
.filter-input-wrap input{
  flex:1;min-width:4.5rem;padding:.5rem .5rem .5rem .6rem;
  font-family:inherit;font-size:var(--fs-5);color:var(--color-text);background:transparent;border:0;outline:none;
}
.filter-input-wrap input::placeholder{color:var(--color-text-faint)}
.filter-input-wrap input::-webkit-search-cancel-button{display:none}
/* Treffer / Gesamt — orange bei Treffern, grau bei null, wie die Reiterzahlen in PartSurfer */
.result-count{
  flex:none;padding-right:.6rem;white-space:nowrap;
  font-size:var(--fs-2);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-text-faint);user-select:none;transition:color .15s ease;
}
.result-count.aktiv{color:var(--brand-text)}
/* Am Handy verdeckte die Zahl den Platzhalter („Druckermode…“). Ohne Eingabe weicht sie, mit dem
   ersten Zeichen ist sie wieder da. */
@media (max-width:560px){
  .filter-input-wrap input:placeholder-shown ~ .result-count{display:none}
  /* Mehr Platz für Trefferzahl und × in einem schmalen Feld */
  .filter-input-wrap input{min-width:3rem}
  .result-count{padding-right:.35rem}
}
.filter-clear-btn{
  flex:none;align-self:stretch;width:2.1rem;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;background:transparent;color:var(--color-text-faint);
  font-size:var(--fs-6);line-height:1;cursor:pointer;
}
.filter-clear-btn:hover{color:var(--brand-text)}
.filter-clear-btn:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* ---------- Tabelle ---------- */
.table-wrapper{border:1px solid var(--color-border);overflow-x:auto;scrollbar-width:thin;animation:einblenden .45s .14s ease both}
.results-table{width:100%;border-collapse:collapse;background:var(--color-surface);font-size:var(--fs-4)}
.results-table th,.results-table td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--color-border)}
.results-table th{
  background:var(--color-surface-raised);font-stretch:84%;font-size:var(--fs-2);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);white-space:nowrap;
}
.results-table tbody tr:last-child td{border-bottom:0}

/* ---------- Meldung am unteren Bildrand — Kopie von .meldung (js/meldungen.js) ---------- */
.meldung{
  --meldung-farbe:var(--color-danger);
  position:fixed;z-index:1250;left:50%;bottom:calc(var(--gutter) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:flex-start;gap:.75rem;width:max-content;max-width:min(34rem,calc(100vw - 2rem));
  padding:.75rem .5rem .75rem 1rem;color:var(--color-text);
  background:var(--color-surface-raised);border:1px solid var(--color-border-strong);border-left:3px solid var(--meldung-farbe);
  box-shadow:var(--shadow-toast);font-size:var(--fs-4);font-weight:500;line-height:1.4;
  opacity:0;transform:translate(-50%,.75rem);transition:opacity .2s ease,transform .2s ease;
}
.meldung.is-sichtbar{opacity:1;transform:translate(-50%,0)}
.meldung-fehler{--meldung-farbe:var(--color-danger)}
.meldung-hinweis{--meldung-farbe:var(--color-info)}
.meldung-erfolg{--meldung-farbe:var(--color-success)}
.meldung-text{flex:1 1 auto;min-width:0;margin:0;overflow-wrap:anywhere}
.meldung-schliessen{
  flex:none;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  margin:-.3rem 0 -.3rem .25rem;padding:0;color:var(--color-text-muted);background:none;
  border:1px solid transparent;font-size:1.35rem;line-height:1;cursor:pointer;
}
.meldung-schliessen:hover{color:var(--brand-text);border-color:var(--brand-line)}
.meldung-schliessen:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* ---------- Fußzeile ---------- */
.site-footer{
  position:relative;z-index:1;background:var(--color-black);border-top:1px solid var(--color-border);
  color:hsl(0 0% 58%);font-size:var(--fs-2);font-weight:300;line-height:1.55;padding-block:2rem 2.25rem;
}
.site-footer p{margin:0;max-width:78ch}
.site-footer p + p{margin-top:.6rem}
.site-footer strong{font-weight:700;color:hsl(0 0% 75%)}
.site-footer .dot{color:var(--brand)}
.site-footer a{color:hsl(0 0% 70%)}
.site-footer a:hover{color:var(--brand)}

/* ---------- Eigene Scrollbar ---------- */
.custom-scrollbar{position:fixed;top:0;right:0;bottom:0;width:10px;z-index:200;opacity:0;pointer-events:none;transition:opacity .15s ease}
.custom-scrollbar.is-active{opacity:1;pointer-events:auto}
.custom-scrollbar-thumb{position:absolute;left:2px;right:2px;background:var(--color-border-strong);cursor:pointer;touch-action:none}
.custom-scrollbar-thumb:hover,.custom-scrollbar-thumb.is-dragging{background:var(--brand)}
@media (pointer:coarse){
  /* Fingerziele mindestens 44px (--control-size): Kopfknöpfe und Installieren waren 31px hoch,
     die Fußzeilen-Links nur so hoch wie ihre Schrift. */
  .kopf-btn,.installieren{min-height:var(--control-size);min-width:var(--control-size);justify-content:center}
  .thema-schalter{min-height:var(--control-size)}
  .site-footer a{display:inline-block;padding-block:.6rem}
  .custom-scrollbar{width:4px}
  .custom-scrollbar.is-active{pointer-events:none}
  .custom-scrollbar-thumb{left:1px;right:1px}
}

/* ---------- FAQ — wie das FAQ-Panel in PartSurfer (Fragen zugeklappt, mehrere dürfen offen
   stehen), aber als <dialog>: Escape, Fokusfalle, Fokus zurück zum Knopf und unter Chrome/Android
   die Zurück-Geste bringt der Browser selbst mit. Inhalt steht in index.html. ---------- */
html:has(.faq[open]){overflow:hidden}
.faq{
  width:clamp(320px,90vw,760px);max-width:100%;max-height:min(85vh,46rem);padding:0;
  flex-direction:column;color:var(--color-text);background:var(--color-surface);
  border:1px solid var(--color-border-strong);box-shadow:var(--shadow-modal);
}
.faq[open]{display:flex;animation:einblenden .2s ease}
.faq::backdrop{background:var(--color-scrim);backdrop-filter:blur(2px)}
.faq-kopf{flex:none;display:flex;align-items:center;padding:.4rem .4rem .4rem 1.1rem;border-bottom:1px solid var(--color-border)}
.faq-titel{font-stretch:82%;font-weight:700;font-size:var(--fs-5);text-transform:uppercase;letter-spacing:.02em}
.faq-schliessen{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--control-size);height:var(--control-size);padding:0;color:var(--color-text-muted);
  background:none;border:1px solid transparent;font-size:1.5rem;line-height:1;cursor:pointer;
}
.faq-schliessen:hover{color:var(--brand-text);border-color:var(--brand-line)}
.faq-schliessen:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.faq-inhalt{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:.4rem 1.1rem 1rem;font-size:var(--fs-4);line-height:1.55}
.faq-item + .faq-item{border-top:1px solid var(--color-border)}
.faq-item h3{margin:0;font:inherit}
/* Die ganze Zeile ist der Schalter, damit auch der Daumen trifft */
.faq-question{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;padding:.8rem 0;
  background:none;border:0;font:inherit;font-size:var(--fs-5);font-weight:700;color:var(--color-text);
  text-align:left;cursor:pointer;transition:color .15s ease;
}
.faq-question::after{
  content:"";flex:none;width:.45rem;height:.45rem;margin-right:.35rem;
  border:solid var(--color-text-muted);border-width:0 2px 2px 0;
  transform:translateY(-25%) rotate(45deg);transition:transform .25s ease,border-color .15s ease;
}
.faq-question:hover{color:var(--brand-text)}
.faq-question:hover::after,.faq-item.is-open .faq-question::after{border-color:var(--brand)}
.faq-item.is-open .faq-question::after{transform:translateY(25%) rotate(225deg)}
.faq-question:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* grid-template-rows 0fr → 1fr statt max-height: keine geratene Obergrenze. visibility nimmt die
   zugeklappte Antwort aus Tabulatorreihe und Screenreader, verzögert bis nach dem Zufahren. */
.faq-answer-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.faq-item.is-open .faq-answer-wrap{grid-template-rows:1fr}
.faq-answer{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .25s}
.faq-item.is-open .faq-answer{visibility:visible;transition:visibility 0s}
.faq-answer > :last-child{margin-bottom:1rem}
.faq-answer p,.faq-answer ul{margin:0 0 .6rem;color:var(--color-text-muted)}
.faq-answer ul{padding-left:1.3rem;display:grid;gap:.35rem}
.faq-answer strong{color:var(--color-text);font-weight:700}
.faq-answer code{font-family:var(--font-mono);font-size:.85em;color:var(--color-text)}
.faq-answer a{color:var(--brand-text)}
/* Am Handy Vollbild wie in PartSurfer: eine Seite Text, ein durchscheinender Rand wäre nur verlorener Platz */
@media (max-width:560px){
  .faq{width:100%;height:100%;max-height:100%;border:0}
}

/* ---------- Menü mit allen Werkzeugen — dieselbe Liste wie in PartSurfer und auf der
   Startseite. Ein <dialog> wie die FAQ (Escape, Fokus und Zurück-Geste kommen vom Browser),
   aber klein unter seinem Knopf; die Lage setzt app.js beim Öffnen. Der Grund bleibt
   durchsichtig, ein Klick darauf schließt. ---------- */
html:has(.menue[open]){overflow:hidden}
.menue{
  position:fixed;inset:auto;margin:0;padding:0;
  width:min(20rem,calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 5rem);overflow:auto;
  color:var(--color-text);background:var(--color-float);
  border:1px solid var(--color-border-strong);box-shadow:var(--shadow-panel);
}
.menue[open]{animation:einblenden .15s ease}
.menue::backdrop{background:transparent}
.menue-titel{margin:0;padding:.6rem .75rem;border-bottom:1px solid var(--color-border);font-size:var(--fs-1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-text)}
.menue-liste{list-style:none;margin:0;padding:.25rem 0}
.menue-link{
  display:flex;align-items:baseline;gap:.75rem;width:100%;padding:.55rem .75rem;
  border:0;background:none;color:var(--color-text-muted);font:inherit;font-size:var(--fs-4);
  text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s ease,color .15s ease;
}
.menue-name{flex:1 1 auto}
/* Symbol des Werkzeugs vor dem Namen im Menü — dasselbe Zeichen wie auf der Startseite und im
   App-Symbol. Fußeinträge ohne Symbol rücken auf die Namen ein. */
.menue-sym{flex:none;align-self:center;width:1.25rem;height:1.25rem}
.menue-sym circle{fill:var(--brand)}
.menue-sym path{fill:none;stroke:var(--color-text-on-brand);stroke-width:14;stroke-linejoin:miter}
.menue-fuss .menue-link{padding-left:2.75rem}
.menue-hinweis{flex:none;font-size:var(--fs-1);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-faint)}
.menue-link:hover{color:var(--color-text);background:var(--color-surface-hover);text-decoration:none}
.menue-link:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.menue-link[aria-current="page"]{color:var(--brand-text);box-shadow:inset 3px 0 0 var(--brand)}
.menue-fuss{padding:.25rem 0;border-top:1px solid var(--color-border)}
@media (pointer:coarse){.menue-link{min-height:var(--control-size);align-items:center}}
/* Am schmalen Handy passt die FAQ nicht mehr neben Schalter und Menü — sie zieht ins Menü. */
.menue-faq{display:none}
@media (max-width:480px){
  #faq-knopf{display:none}
  .menue-faq{display:flex}
}

/* Bewegung läuft immer — kein prefers-reduced-motion (siehe CLAUDE.md). */
@keyframes einblenden{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes zeile{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

@media (max-width:560px){
  :root{--gutter:1rem}
  .container{padding-top:1.5rem}
}
/* Nur auf sehr schmalen Geräten passt neben Installieren kein Wort mehr in die Kopfzeile */
@media (max-width:340px){.kopf-btn-label{display:none}}

/* ---------- Form: Rundungen, Tiefe, Haarlinien ----------
   Nicht mehr kantig (Renés Wunsch, Oktober 2026): Karten liegen ohne Rahmen mit weichem Schatten
   über einem etwas dunkleren Seitengrund, Bedienelemente haben leicht gerundete Ecken. Farben
   bleiben, wie sie sind. Regeln und Begründung: ARCHITEKTUR.md › Gestaltung › Form. Kurz:
   - Ecken nur in drei Stufen: innen 4 px, Bedienelement 6 px, Karte und Fenster 10 px. Liegt etwas
     Rundes in etwas Rundem, ist der innere Radius der äußere minus der Abstand dazwischen.
   - Schatten aus zwei bis drei Lagen (enge Kontaktlage + weite blasse Umgebungslage), blaugrau
     statt schwarz. Im Dunklen trägt der Schatten kaum; dort zeigt die hellere Fläche plus ein 1px-
     Lichtsaum an der Oberkante, was oben liegt.
   - Linien halbtransparent aus der Textfarbe (--hair) statt fester Grautöne.
   Die Regeln hier stehen gesammelt statt verteilt an den einzelnen Bausteinen und tragen deshalb
   :root davor: Sie müssen die gleichnamigen Grundregeln weiter oben und in offline.css schlagen. */
:root{
  --radius-in:4px;
  --radius-ctl:6px;
  --radius-card:10px;
  --hair:color-mix(in srgb,var(--color-text) 11%,transparent);
  --hair-strong:color-mix(in srgb,var(--color-text) 20%,transparent);
  --licht:inset 0 1px 0 hsl(0 0% 100% / .05);
  --e1:0 1px 2px hsl(240 10% 2% / .4),var(--licht);
  --e2:0 1px 2px hsl(240 10% 2% / .35),0 6px 16px -4px hsl(240 10% 2% / .5),var(--licht);
  --e3:0 2px 4px hsl(240 10% 2% / .35),0 16px 40px -8px hsl(240 10% 2% / .6),var(--licht);
  --e-brand:0 1px 2px hsl(17 89% 30% / .3),0 6px 18px -8px hsl(17 89% 50% / .55);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --licht:0 0 #0000;
    --e1:0 1px 2px hsl(240 10% 20% / .06),0 1px 3px hsl(240 10% 20% / .05);
    --e2:0 1px 2px hsl(240 10% 20% / .05),0 4px 10px -2px hsl(240 10% 20% / .07),0 14px 28px -10px hsl(240 10% 20% / .12);
    --e3:0 2px 4px hsl(240 10% 20% / .05),0 12px 24px -6px hsl(240 10% 20% / .1),0 32px 64px -20px hsl(240 10% 20% / .2);
    --e-brand:0 1px 2px hsl(17 89% 30% / .2),0 6px 16px -8px hsl(17 89% 45% / .45);
  }
}
:root[data-theme="light"]{
  --licht:0 0 #0000;
  --e1:0 1px 2px hsl(240 10% 20% / .06),0 1px 3px hsl(240 10% 20% / .05);
  --e2:0 1px 2px hsl(240 10% 20% / .05),0 4px 10px -2px hsl(240 10% 20% / .07),0 14px 28px -10px hsl(240 10% 20% / .12);
  --e3:0 2px 4px hsl(240 10% 20% / .05),0 12px 24px -6px hsl(240 10% 20% / .1),0 32px 64px -20px hsl(240 10% 20% / .2);
  --e-brand:0 1px 2px hsl(17 89% 30% / .2),0 6px 16px -8px hsl(17 89% 45% / .45);
}

/* Seitengrund eine Stufe tiefer, damit die Karten darüber liegen */
:root body{background-color:var(--color-bg-sunken)}
/* Kopfzeile halb durchsichtig: Was darunter durchscrollt, bleibt als Unschärfe sichtbar */
:root .site-header{
  background:color-mix(in srgb,var(--color-bg) 78%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:var(--hair);
}
:root .kopf-btn,:root .installieren{border-radius:var(--radius-ctl)}
:root .kopf-btn{border-color:transparent;box-shadow:var(--e1);transition:box-shadow .15s ease,color .15s ease}
:root .kopf-btn:hover,:root .kopf-btn[aria-expanded="true"]{background:var(--color-surface);border-color:var(--hair-strong)}
/* Hell/Dunkel-Schalter als klassischer Kippschalter (Wunsch René, 23.10.2026): Spur als Pille,
   runder Griff — bewusste Ausnahme von „keine Pillen". Der Griff liegt mit 2 px Rand in der Spur
   und deckt das geltende Symbol ab, das andere bleibt in der Spur sichtbar. 52 × 28 px, am Finger
   56 × 32 (der Knopf darum bleibt 44 px hoch); bis 340 px schmaler, sonst passt die
   PartSurfer-Kopfzeile nicht mehr auf 320 px. */
:root .thema-spur{border-radius:999px;border-color:transparent;box-shadow:var(--e1)}
:root .thema-griff{border-radius:50%}
:root .thema-spur{--spur-h:1.75rem;--spur-w:3.25rem;width:var(--spur-w);height:var(--spur-h)}
:root .thema-griff{top:2px;left:2px;width:calc(var(--spur-h) - 6px);height:calc(var(--spur-h) - 6px)}
:root .thema-schalter[aria-checked="true"] .thema-griff{transform:translateX(calc(var(--spur-w) - var(--spur-h)))}
:root .thema-spur svg{top:50%;width:14px;height:14px;translate:0 -50%}
:root .thema-sonne{left:calc(var(--spur-h) / 2 - 8px)}
:root .thema-mond{right:calc(var(--spur-h) / 2 - 8px)}
@media (pointer:coarse){:root .thema-spur{--spur-h:2rem;--spur-w:3.5rem}}
@media (pointer:coarse) and (max-width:340px){:root .thema-spur{--spur-h:1.75rem;--spur-w:2.875rem}}
/* Suchen-Knopf nur als Lupe: quadratisch wie das Feld hoch ist, die Beschriftung steht als
   aria-label und Tooltip am Knopf. */
:root .btn-lupe{width:var(--control-size);padding:0}
:root .btn-lupe svg{width:20px;height:20px}

:root .btn,:root .offline-status button,:root .faq-schliessen,:root .meldung-schliessen{border-radius:var(--radius-ctl)}
:root .btn{transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .2s ease}
:root .btn-primary{box-shadow:var(--e-brand)}
:root .badge{border-radius:var(--radius-in)}

/* Karten */
:root .results-head{border-radius:var(--radius-card);border-color:transparent;box-shadow:var(--e2)}
:root .filter-input-wrap{border-radius:var(--radius-ctl);border-color:transparent}
:root .filter-input-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-faint)}
:root .table-wrapper{border-radius:var(--radius-card);border-color:transparent;box-shadow:var(--e2)}
:root .results-table th{background:var(--color-surface);border-bottom-color:var(--hair)}
:root .results-table td{border-bottom-color:var(--hair)}

/* Schwebendes: Breitenmenü, Werkzeugmenü, FAQ, Meldung */
:root .width-panel,:root .menue{border-radius:var(--radius-card);border-color:var(--hair);box-shadow:var(--e3)}
:root .width-panel{overflow:hidden}
:root .menue-titel,:root .menue-fuss,:root .faq-kopf,:root .faq-item + .faq-item{border-color:var(--hair)}
:root .faq{border-radius:var(--radius-card);border-color:var(--hair);box-shadow:var(--e3)}
:root .meldung{border-radius:var(--radius-card);border-color:var(--hair);border-left-color:var(--meldung-farbe);box-shadow:var(--e3)}
:root .custom-scrollbar-thumb{border-radius:3px}
/* Bausteine aus offline.css: gespeicherte Suchen und Installationshilfe */
:root .offline-verlauf{border-radius:var(--radius-card);border-color:transparent;box-shadow:var(--e2);overflow:hidden}
:root .offline-verlauf li{border-top-color:var(--hair)}
:root .install-hilfe{border-radius:var(--radius-card);border-color:var(--hair)}
@media (max-width:560px){
  :root .faq{border-radius:0}
}

/* ==========================================================================================
   ANWENDUNG
   ========================================================================================== */

a{color:var(--brand-text)}
h2{margin:0;font-stretch:82%;font-weight:700;font-size:var(--fs-5);text-transform:uppercase;letter-spacing:.04em}

/* ---------- Download und Kopieren ---------- */
.link-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}
.icon{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
/* Orange umrandet wie PartSurfers .install-btn, beim Überfahren gefüllt */
.download-btn{
  text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;min-height:2rem;
  font-size:var(--fs-1);font-weight:700;font-stretch:88%;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:var(--brand-text);border:1px solid var(--brand);background:transparent;
  transition:background-color .15s ease,color .15s ease;
}
.download-btn:hover{background:var(--brand);color:var(--color-text-on-brand);text-decoration:none}
/* Die neueste geprüfte Version ist die Hauptaktion der Karte und deshalb gefüllt. */
.fw-neueste .download-btn{background:var(--brand);color:var(--color-text-on-brand)}
.fw-neueste .download-btn:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff}
.download-btn:hover .icon{animation:icon-drop .45s ease-out}
.download-btn:active{transform:translateY(1px)}
.link-actions button{
  display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;min-height:2rem;
  font-family:inherit;font-size:var(--fs-1);font-weight:700;font-stretch:88%;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-muted);background:var(--color-bg-sunken);border:1px solid var(--color-border-strong);cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.link-actions button:hover{border-color:var(--brand);background:var(--brand-faint);color:var(--color-text)}
.link-actions button:active{transform:translateY(1px)}
.link-actions button.is-copied{color:var(--color-success);border-color:var(--color-success-line);background:var(--color-success-faint)}
.link-actions button.is-copied .icon{animation:status-arrive .3s ease-out}

/* ---------- Eine Karte je Modellfamilie ---------- */
.fw-stand{margin:0 0 1.25rem;font-size:var(--fs-3);color:var(--color-text-faint)}
.fw-liste{display:grid;gap:1rem}
/* Platz halten, bis die Karten gezeichnet sind — sonst springen Fußnote und Fußzeile nach unten
   (gemessen: CLS 0,18–0,30). app.js setzt .bereit nach dem ersten Zeichnen oder einem Fehler. */
.fw-liste:not(.bereit){min-height:100vh}
.fw-karte{container-type:inline-size;background:var(--color-surface);border:1px solid var(--color-border);animation:einblenden .3s ease both}
/* Über 30 000 Elemente in 86 Karten: Der Browser berechnet nur die Karten in Sichtnähe (Handy,
   4× gedrosselt: TBT 500 → 130 ms). Platzhalter ist die mittlere Kartenhöhe (Handy 520, Desktop
   300 px), „auto" merkt sich danach die echte. Nur die Blockgröße — ein Wert für beide Achsen gäbe
   der Karte auch 520 px Breite, am Handy ragte sie rechts hinaus. Strg+F findet weiterhin alles. */
.fw-karte{content-visibility:auto;contain-intrinsic-block-size:auto 18.75rem}
@media (max-width:560px){.fw-karte{contain-intrinsic-block-size:auto 32.5rem}}
.fw-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;padding:1rem 1.25rem .8rem}
.fw-kopf h2{margin:0;font-size:var(--fs-5)}
.fw-modelle{margin:.2rem 0 0;font-size:var(--fs-2);color:var(--color-text-muted)}
.fw-anzahl{font-size:var(--fs-2);color:var(--color-text-faint);white-space:nowrap;padding-top:.15rem}
/* Zwei Ebenen: Version und Aktionen, darunter technische Angaben und Quelle. */
.fw-kopf>div{min-width:0;flex:1 1 20rem}
.fw-modelle{line-height:1.6;overflow-wrap:anywhere}
/* Der Zweig ist eine Zwischenüberschrift in der Karte, kein eigener Kasten: Karte, Zweig und Version
   hatten je einen Rahmen, das ergab doppelte Linien und kostete am Handy Breite. */
.fw-zweig{border-top:1px solid var(--color-border)}
.fw-zweig-kopf{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.25rem 1rem;padding:.9rem 1.25rem .15rem}
.fw-zweig-kopf h3{margin:0;font-size:var(--fs-2);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-text)}
.fw-zweig-kopf .fw-anzahl{padding:0}
.fw-version{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"titel aktionen" "meta meta";align-items:center;gap:.65rem 1rem;padding:1rem 1.25rem}
.fw-version+.fw-version{border-top:1px solid var(--color-border)}
.fw-version-titel{grid-area:titel;display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .75rem;min-width:0}
.fw-version-titel strong{font-size:var(--fs-5);overflow-wrap:anywhere}
/* Gleiches Kennzeichen wie .badge (Quelle, Service Manual) in den anderen Apps */
.fw-status{padding:.12rem .4rem;white-space:nowrap;font-size:var(--fs-1);font-weight:700;font-stretch:90%;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);border:1px solid var(--color-border-strong)}
.fw-metadaten{grid-area:meta;display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem 1.25rem}
.fw-meta{font-size:var(--fs-2);color:var(--color-text-muted);line-height:1.5}
.fw-meta a{color:var(--color-text-muted);text-decoration:underline;text-underline-offset:3px}
.fw-meta a:hover{color:var(--brand-text)}
.fw-revision{font-family:var(--font-mono);font-size:var(--fs-2);overflow-wrap:anywhere}
.fw-groesse{font-variant-numeric:tabular-nums}
.fw-version .link-actions{grid-area:aktionen;justify-self:end}
.fw-neueste{background:var(--color-bg-sunken)}
.fw-neueste .fw-version-titel strong{font-size:var(--fs-5)}
.fw-keine{margin:0;padding:.7rem 1.25rem;border-top:1px solid var(--color-border)}
.fw-aeltere summary{padding:.7rem 1.25rem;border-top:1px solid var(--color-border);font-size:var(--fs-2);font-weight:600;color:var(--color-text-muted);cursor:pointer}
.fw-aeltere summary:hover{color:var(--brand-text);background:var(--color-surface-hover)}
.fw-aeltere[open] summary{border-bottom:1px solid var(--color-border)}
.fw-aeltere .fw-version-titel strong{font-weight:600}
/* Vor der ersten Eingabe: kurzer Tipp, darunter die Modellübersicht (René, 01.11.2026).
   Früher stand hier nur ein Platzhalter mit Lupe und Tipp, aufgebaut wie .empty-state in PartSurfer. */
.fw-start{display:grid;gap:1.25rem;padding:.25rem 0 2.5rem}
.fw-start[hidden]{display:none}
.fw-start-tipp{margin:0;font-size:var(--fs-4);line-height:1.5;color:var(--color-text-muted)}
/* „Tipp" als Etikett, damit der Satz nicht wie eine Statusmeldung wirkt; Doppelpunkt nur optisch. */
.fw-start-tipp-label{color:var(--brand-text);font-weight:700;font-size:var(--fs-2);letter-spacing:.08em;text-transform:uppercase}
.fw-start-tipp-label::after{content:":";margin-right:.35em}

/* ---------- Modellübersicht: eine Box je Modellfamilie ---------- */
.ue{display:grid;gap:2.25rem}
.ue-sprung{display:flex;flex-wrap:wrap;gap:.5rem}
.ue-sprung a{display:inline-flex;align-items:center;min-height:2.25rem;padding:0 .85rem;font-size:var(--fs-3);font-weight:600;color:var(--color-text-muted);text-decoration:none;background:var(--color-surface);border:1px solid transparent;border-radius:var(--radius-ctl);box-shadow:var(--e1)}
.ue-sprung a:hover{color:var(--color-text);border-color:var(--brand-line)}
/* Sprungziel unter der klebenden Kopfzeile und dem ebenfalls klebenden Suchfeld */
.ue-art{scroll-margin-top:calc(var(--kopfhoehe) + 5.5rem)}
.ue-art-titel{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .6rem;margin:0 0 1rem;font-size:var(--fs-6)}
.ue-art-titel small{font-size:var(--fs-3);font-weight:400;color:var(--color-text-faint)}
.ue-punkt{flex:none;width:.85rem;height:.85rem;border-radius:50%}
.ue-punkt-sw{background:var(--color-text)}
.ue-punkt-farbe{background:conic-gradient(#00a3e0 0 33.3%,#e6007e 0 66.6%,#ffd400 0)}
.ue-klasse+.ue-klasse{margin-top:1.5rem}
.ue-klasse h3{display:flex;align-items:baseline;gap:.5rem;margin:0 0 .65rem;font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.ue-klasse h3 span{letter-spacing:0;font-weight:400;color:var(--color-text-faint)}
.ue-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.75rem}
.ue-box{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;font:inherit;color:inherit;text-align:left;cursor:pointer;background:var(--color-surface);border:1px solid transparent;border-radius:var(--radius-card);box-shadow:var(--e1);transition:border-color .15s ease,box-shadow .15s ease}
.ue-box:hover{border-color:var(--brand-line);box-shadow:var(--e2)}
.ue-box:active{transform:translateY(1px)}
.ue-box:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.ue-bild{display:grid;place-items:center;aspect-ratio:16/10;background:var(--color-bg-sunken)}
.ue-zeichnung{width:52%;height:auto}
/* Zeichnung aus der Textfarbe gemischt, damit sie in Hell und Dunkel gleich zurückhaltend wirkt */
.uez-korpus,.uez-scanner{fill:color-mix(in srgb,var(--color-text) 7%,var(--color-surface));stroke:color-mix(in srgb,var(--color-text) 38%,transparent);stroke-width:1.2}
.uez-scanner{fill:color-mix(in srgb,var(--color-text) 16%,var(--color-surface))}
.uez-feld{fill:color-mix(in srgb,var(--color-text) 70%,transparent)}
.uez-schlitz{fill:color-mix(in srgb,var(--color-text) 22%,transparent)}
.uez-fach{fill:color-mix(in srgb,var(--color-text) 10%,var(--color-surface));stroke:color-mix(in srgb,var(--color-text) 28%,transparent);stroke-width:1}
.uez-c{fill:#00a3e0}.uez-m{fill:#e6007e}.uez-y{fill:#ffd400}
.ue-text{display:grid;gap:.2rem;padding:.6rem .75rem .75rem}
.ue-name{font-size:var(--fs-4);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.ue-serie{font-size:var(--fs-2);color:var(--color-text-faint)}
.ue-info{display:flex;flex-wrap:wrap;gap:.1rem .5rem;margin-top:.15rem;font-size:var(--fs-2);color:var(--color-text-muted)}
.ue-ok{color:var(--color-success);font-variant-numeric:tabular-nums}
.ue-box.ohne-link .ue-name,.ue-box.ohne-link .ue-info{color:var(--color-text-faint)}
.ue-box.ohne-link .ue-zeichnung{opacity:.55}
@media (max-width:560px){
  .fw-start{padding-bottom:1.5rem}
  .ue{gap:1.75rem}
  .ue-art-titel small{flex-basis:100%;padding-left:1.45rem}
  .ue-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .ue-text{padding:.5rem .6rem .6rem}
  .ue-name{font-size:var(--fs-3)}
}
.fw-leer{margin:0;padding:2.5rem 1rem;text-align:center;color:var(--color-text-faint);font-weight:300;background:var(--color-surface);border:1px solid var(--color-border)}
.fw-version a:focus-visible,.fw-version button:focus-visible,.fw-aeltere summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* Dieselbe Lesereihenfolge bei schmalen Karten; Quellen bleiben überall erreichbar. */
@container (max-width:639px){
  .fw-version{grid-template-columns:minmax(0,1fr);grid-template-areas:"titel" "meta" "aktionen"}
  .fw-version .link-actions{justify-self:start;margin-top:.15rem;flex-wrap:wrap}
  .fw-metadaten{gap:.3rem 1rem}
  .fw-quelle{flex-basis:100%}
}
@media (max-width:560px){
  .fw-kopf,.fw-version,.fw-zweig-kopf,.fw-aeltere summary,.fw-keine{padding-left:1rem;padding-right:1rem}
  .fw-version-titel{align-items:flex-start;flex-direction:column}
  .fw-metadaten{flex-direction:column;align-items:flex-start}
  .fw-aeltere summary{min-height:2.75rem}
  .fw-version .link-actions{width:100%}
  .fw-version .link-actions>*{flex:1 1 8rem;justify-content:center;min-height:2.75rem;white-space:nowrap}
}

@keyframes status-arrive{from{opacity:.35;transform:translateY(3px) scale(.95)}to{opacity:1;transform:none}}
@keyframes icon-drop{0%{transform:translateY(-3px)}60%{transform:translateY(1px)}100%{transform:none}}

/* ---------- Verlauf: Knopf neben dem Titel, Fenster darunter — wie in Error Codes und Service
   Manuals (dort offline.css). Kopf und Fuß bleiben stehen, nur die Liste scrollt, etwa acht
   Einträge hoch wie in PartSurfer. Die Obergrenze des ganzen Fensters setzt app.js beim Öffnen
   aus dem Platz unter dem Knopf, damit „Alles löschen“ nie unter dem Bildschirmrand liegt. ---------- */
.verlauf-knopf{flex:none}
@media (max-width:860px){.verlauf-knopf .kopf-btn-label{display:none}.verlauf-knopf{padding-inline:.55rem}}
.verlauf-fenster{width:min(24rem,calc(100vw - 2rem));overflow:hidden}
.verlauf-fenster[open]{display:flex;flex-direction:column}
.verlauf-fenster > *{flex:none}
.verlauf-fenster .verlauf-liste{flex:0 1 auto;min-height:0;max-height:min(52vh,420px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.verlauf-liste{list-style:none;margin:0;padding:0 .25rem 0 .75rem}
.verlauf-liste li{display:flex;align-items:center;gap:.5rem}
.verlauf-liste li + li{border-top:1px solid var(--hair)}
.verlauf-eintrag{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.2rem;padding:.65rem 0;border:0;background:none;color:var(--color-text);font:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.verlauf-eintrag strong{font-size:var(--fs-3)}
.verlauf-eintrag span{font-size:var(--fs-2);color:var(--color-text-muted)}
.verlauf-eintrag:hover strong{color:var(--brand-text)}
.verlauf-eintrag:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-in)}
.verlauf-x{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:var(--radius-ctl);background:none;color:var(--color-text-faint);font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.verlauf-x:hover{background:var(--color-bg-sunken);color:var(--color-danger)}
.verlauf-x:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.verlauf-leer{padding:1.1rem 0;font-size:var(--fs-3);color:var(--color-text-faint);text-align:center}
.verlauf-fuss{display:flex;justify-content:flex-end;padding:.5rem .75rem;border-top:1px solid var(--color-border)}
.verlauf-fuss-knopf{min-height:2rem;padding:.35rem .6rem;border:1px solid var(--color-border);border-radius:var(--radius-in);background:transparent;color:var(--color-text-muted);font:inherit;font-size:var(--fs-1);font-weight:700;font-stretch:88%;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.verlauf-fuss-knopf:hover:not(:disabled){border-color:var(--color-danger);color:var(--color-danger)}
.verlauf-fuss-knopf:disabled{opacity:.45;cursor:default}
.verlauf-fuss-knopf:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (pointer:coarse){.verlauf-fuss-knopf{min-height:2.75rem}}

/* ---------- Admin-Menü in der Fußzeile: Kopie von .dev-panel aus hppartsurferreloaded/style.css ---------- */
/* Immer sichtbar, neben Impressum und Datenschutz. Das Menü hängt an .footer-links statt am Eintrag,
   damit es am linken Rand beginnt und am Handy nicht rechts hinausragt. */
.footer-links{position:relative;margin-top:.6rem}
/* Offenes Menü ragt über den Inhalt (.container, z-index 2) — dafür die Fußzeile darüberheben. */
.site-footer:has(.admin-panel-toggle[aria-expanded="true"]){z-index:3}
.admin-panel{display:inline}
.admin-panel-toggle{
  padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-color:transparent;transition:color .15s ease,text-decoration-color .15s ease;
}
.admin-panel-toggle:hover,.admin-panel-toggle[aria-expanded="true"]{color:var(--color-warning);text-decoration-color:currentColor}
.admin-panel-toggle:focus-visible{outline:2px solid var(--color-warning);outline-offset:2px}
.admin-panel-body{
  position:absolute;left:0;bottom:calc(100% + .5rem);z-index:90;
  display:flex;flex-direction:column;gap:.4rem;width:max-content;max-width:100%;padding:.75rem;
  background:var(--color-surface-raised);border:1px solid var(--color-warning-line);
}
.admin-panel-title{margin:0 0 .15rem;font-size:var(--fs-1);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-warning)}
.btn-utility{
  display:block;padding:.45rem .85rem;font-size:var(--fs-2);font-weight:600;text-decoration:none;
  color:var(--color-text-muted);background:transparent;border:1px solid var(--color-border);
  transition:border-color .15s ease,color .15s ease;
}
.btn-utility:hover{border-color:var(--brand);color:var(--brand-text);text-decoration:none}

/* Fingerziele mindestens 44px. Steht am Ende, weil die Grundregeln dieser Elemente weiter oben
   im Anwendungsteil stehen und die gleichnamige Regel im BASIS-Teil sonst überschreiben würden. */
@media (pointer:coarse){
  .admin-panel-toggle{display:inline-block;padding-block:.6rem}
  .download-btn,.link-actions button{min-height:var(--control-size)}
}

/* ---------- Form der App-Bausteine — Stufen wie im Form-Teil der BASIS ---------- */
:root .fw-karte{border-radius:var(--radius-card);border-color:transparent;box-shadow:var(--e2);overflow:hidden}
:root .fw-leer{border-radius:var(--radius-card);border-color:transparent;box-shadow:var(--e2)}
:root .fw-zweig,:root .fw-version+.fw-version,:root .fw-keine,:root .fw-aeltere summary,:root .fw-aeltere[open] summary{border-color:var(--hair)}
:root .download-btn,:root .link-actions button,:root .btn-utility{border-radius:var(--radius-ctl)}
:root .fw-status{border-radius:var(--radius-in)}
:root .admin-panel-body{border-radius:var(--radius-card);box-shadow:var(--e3)}