/* ==========================================================================================
   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}
.page-head{margin-bottom:1.75rem;animation:einblenden .45s ease both}
.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}
/* Solange die Liste noch lädt, hält der Rahmen einen Bildschirm frei — sonst springen Fußnote und Fußzeile nach unten, sobald sie erscheint */
.table-wrapper:has(#liste:empty){min-height:100vh}
.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
   ========================================================================================== */


/* ---------- Schalter „Gruppieren“ — an = orange, wie die gewählte Stufe im Breitenmenü ---------- */
.schalter{
  flex:none;display:inline-flex;align-items:center;gap:.45rem;padding:0 .8rem;
  background:var(--color-bg-sunken);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;
}
.schalter svg{width:16px;height:16px}
/* Steht rechts in der Statuszeile unter der Suche, nicht mehr in der Suchleiste: dort nahm es dem
   Feld am Handy Platz. Klein wie die Zeile, am Finger 44 px. */
.offline-status .schalter{
  min-height:2rem;padding:0 .8rem;
  /* offline.css setzt für Knöpfe der Statuszeile font:inherit — hier gilt die Schalter-Schrift */
  font-family:inherit;font-size:var(--fs-1);font-weight:700;font-stretch:88%;letter-spacing:.1em;
}
@media (pointer:coarse){.offline-status .schalter{min-height:var(--control-size)}}
.schalter:hover{background:var(--color-surface-hover);border-color:var(--color-border-strong);color:var(--color-text)}
.schalter[aria-pressed="true"]{color:var(--brand-text);border-color:var(--brand-line)}
.schalter:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- Tabelle ---------- */
.results-table th.pin-col{text-align:right}
.results-table tbody tr{animation:zeile .3s calc(min(var(--i),16) * 18ms) ease both}
/* Streifen per Klasse statt :nth-child — zugeklappte Modellzeilen zählten sonst mit */
.results-table tbody tr.streifen{background:var(--color-row-zebra)}
@media (hover:hover){
  .results-table tbody tr:not(.leer):hover{background:var(--color-surface-hover)}
}
.results-table td{vertical-align:middle}
.modell-cell{overflow-wrap:anywhere}
.modell-cell mark{background:none;color:var(--brand-text)}
.hinweis{display:block;margin-top:.2rem;font-size:var(--fs-2);color:var(--color-warning)}
.kat-cell{font-size:var(--fs-3);color:var(--color-text-muted);white-space:nowrap}
/* .results-table davor: sonst gewinnt text-align:left der allgemeinen Zellregel */
.results-table td.pin-cell{text-align:right;white-space:nowrap}

/* PIN-Knopf — Machart wie die Kopierknöpfe (.device-copy-chip) in PartSurfer */
.pin{
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  padding:.4rem .6rem;min-height:2.25rem;
  font-family:var(--font-mono);font-size:var(--fs-5);letter-spacing:.04em;color:var(--color-text);
  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;
}
.pin svg{flex:none;width:15px;height:15px;color:var(--color-text-faint);transition:color .15s ease}
.pin:hover{border-color:var(--brand);background:var(--brand-faint)}
.pin:hover svg{color:var(--brand-text)}
.pin:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pin:active{transform:translateY(1px)}
.pin.kopiert{border-color:var(--color-success-line);background:var(--color-success-faint);animation:puls .4s ease}
.pin.kopiert svg{color:var(--color-success)}
/* Bestätigung über dem Knopf */
.pin::after{
  content:"Kopiert";position:absolute;right:0;bottom:100%;padding:.2rem .45rem;
  font-family:var(--font);font-size:var(--fs-1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-on-brand);background:var(--color-success);white-space:nowrap;
  opacity:0;translate:0 .2rem;pointer-events:none;transition:opacity .18s ease,translate .18s ease;
}
.pin.kopiert::after{opacity:1;translate:0 -.35rem}

/* ---------- Gruppen (gleiche PIN) ---------- */
.gruppe{cursor:pointer}
.gruppe-cell{overflow-wrap:anywhere}
.gruppe-kopf{display:flex;align-items:baseline;gap:.5rem}
.gruppe-kopf:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}
.caret{
  flex:none;align-self:center;width:0;height:0;
  border-top:.3rem solid transparent;border-bottom:.3rem solid transparent;border-left:.36rem solid var(--color-text-faint);
  transition:transform .15s ease,border-left-color .15s ease;
}
.gruppe.offen .caret{transform:rotate(90deg);border-left-color:var(--brand)}
.gruppe:hover .caret{border-left-color:var(--brand)}
.familie{
  flex:none;font-stretch:84%;font-size:var(--fs-2);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-text-muted);
}
.codes{font-weight:600}
/* Trennpunkt vor jeder Nummer außer der ersten — ausgeblendete Nummern nehmen ihren Punkt mit */
.codes .code + .code::before{content:" · ";color:var(--color-text-faint);font-weight:400}
.codes .mehr{display:none}
.codes mark{background:none;color:var(--brand-text)}
.gruppe-meta{display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:center;margin:.3rem 0 0 .86rem}
.gruppe-meta .hinweis{margin:0}
.anzahl{font-size:var(--fs-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint)}
.results-table tr.gruppe.offen{background:var(--color-surface-raised)}
/* Aufgeklappte Modelle: eingerückt, mit oranger Linie links als Zugehörigkeit */
.results-table tr.mitglied{background:var(--color-bg-sunken);animation-duration:.22s}
.results-table tr.mitglied td:first-child{padding-left:1.9rem;box-shadow:inset 2px 0 0 var(--brand-line)}
.results-table tr.mitglied .modell-cell{font-size:var(--fs-4);color:var(--color-text-muted)}

.results-table tr.leer td{padding:2.5rem 1rem;text-align:center;color:var(--color-text-faint);font-weight:300}

@keyframes puls{50%{transform:scale(1.05)}}

/* ---------- Handy: jede Zeile wird zur Karte ----------
     Modell ………………………… │ PIN
     KATEGORIE  [QUELLE]    │            */
@media (max-width:560px){
  .results-table thead{display:none}
  .results-table tbody tr{
    display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:.35rem .5rem;
    padding:.65rem .75rem;border-bottom:1px solid var(--color-border);
  }
  .results-table tbody tr:last-child{border-bottom:0}
  .results-table td{padding:0;border:0}
  .modell-cell{grid-column:1 / 4;grid-row:1}
  /* Gruppe: oben Familie und PIN in einer Zeile, darunter die Nummern über die ganze Breite.
     Die Zelle liegt im Raster unter der PIN; die Familienzeile ist so hoch wie der PIN-Knopf,
     damit die Nummern erst unterhalb beginnen. */
  .results-table tbody tr.gruppe{grid-template-columns:1fr auto}
  .gruppe-cell{grid-column:1 / -1;grid-row:1}
  .results-table tr.gruppe .pin-cell{grid-column:2;grid-row:1;align-self:start}
  .gruppe-kopf{flex-wrap:wrap;align-items:center;row-gap:.15rem}
  .familie{display:flex;align-items:center;min-height:2.25rem}
  .codes{flex-basis:100%;padding-left:.86rem;line-height:1.6}
  .gruppe:not(.offen) .codes .rest{display:none}
  .gruppe:not(.offen) .codes .mehr{display:inline;margin-left:.5rem;font-weight:400;color:var(--color-text-muted);white-space:nowrap}
  .results-table tr.mitglied{padding-left:1.4rem;box-shadow:inset 2px 0 0 var(--brand-line)}
  .results-table tr.mitglied td:first-child{padding-left:0;box-shadow:none}
  .kat-cell{grid-column:1;grid-row:2}
  .quelle-cell{grid-column:2;grid-row:2}
  .pin-cell{grid-column:4;grid-row:1 / span 2;justify-self:end}
  .pin svg{display:none}
  .results-table tr.leer{display:block}
}

/* Unter 400px stehen Feld, Gruppieren-Schalter und Suchen-Knopf sehr knapp nebeneinander: Die Lupe
   und die Gesamtzahl hinter der Trefferzahl weichen, damit Eingabe und × im Feld bleiben. */
@media (max-width:400px){
  .filter-input-wrap .lupe{display:none}
  .filter-input-wrap input{padding-left:.6rem}
  .result-count .gesamt{display: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){
  .pin{min-height:var(--control-size)}
}
@media (max-width:560px) and (pointer:coarse){
  .familie{min-height:var(--control-size)}
}

/* ---------- Form der App-Bausteine — Stufen wie im Form-Teil der BASIS ---------- */
:root .schalter{border-radius:var(--radius-ctl);border-color:transparent;background:var(--color-surface);box-shadow:var(--e1)}
:root .schalter[aria-pressed="true"]{border-color:var(--brand-line)}
:root .pin{border-radius:var(--radius-ctl);border-color:var(--hair-strong)}
:root .pin:hover{border-color:var(--brand)}
:root .pin.kopiert{border-color:var(--color-success-line)}
:root .pin::after{border-radius:var(--radius-in)}
@media (max-width:560px){
  :root .results-table tbody tr{border-bottom-color:var(--hair)}
}