/* ==========================================================================================
   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 PartSurfer Reloaded */
.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}
.verlauf-knopf{flex:none}
/* Neben dem Titel wird es am Handy eng: dort trägt das Symbol allein */
@media (max-width:860px){
  .verlauf-knopf .kopf-btn-label{display:none}
  .verlauf-knopf{padding-inline:.55rem}
}
.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 oberen Bildrand — Kopie von .meldung (js/meldungen.js), aber oben: unten
   verdeckt sie die Kopiert-Anzeige von Android ---------- */
.meldung{
  --meldung-farbe:var(--color-danger);
  position:fixed;z-index:1250;left:50%;top:calc(var(--gutter) + env(safe-area-inset-top,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
   ========================================================================================== */

/* Aufbau: Schrittleiste und Schrittkarte links, am breiten Bildschirm die Vorschau rechts daneben.
   Am Handy steht die Vorschau im Blatt #vorschau (Rahmen der FAQ), die Aktionsleiste klebt unten
   im Daumenbereich. */
/* Zwei Spalten, oben bündig: Schrittleiste | Neu-Knopf in einer Zeile, gleich hoch (--leiste-h);
   darunter Schrittkarte | Vorschau. Am Handy bleibt der Neu-Knopf rechts neben der Schrittleiste
   (nur so breit wie nötig), die Schrittkarte nimmt die ganze Breite. */
.wizard{--leiste-h:var(--control-size);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:start;animation:einblenden .45s .08s ease both}
.wizard-haupt{grid-column:1 / -1;min-width:0;display:flex;flex-direction:column;gap:1rem}
.karte{background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--e2)}
.vorschau-seite{display:none}
@media (min-width:900px){
  .wizard{grid-template-columns:minmax(0,1fr) 20rem}
  .wizard-haupt{grid-column:auto}
  .vorschau-seite{
    display:block;position:sticky;top:calc(var(--kopfhoehe) - 1px + var(--leiste-h) + 1rem);
    max-height:calc(100dvh - var(--kopfhoehe) - var(--leiste-h) - 2rem);overflow:auto;scrollbar-width:thin;
  }
  .vorschau-knopf{display:none}
}

/* ---------- Schrittleiste: ein Balken je Schritt, klebt unter der Kopfzeile ---------- */
.schrittleiste{
  position:sticky;top:calc(var(--kopfhoehe) - 1px);z-index:30;display:flex;align-items:center;gap:.75rem;
  align-self:stretch;box-sizing:border-box;min-height:var(--leiste-h);padding:.4rem .75rem;background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--e2);
}
.text-knopf{
  padding:.2rem 0;border:0;background:none;color:var(--brand-text);font:inherit;font-size:var(--fs-2);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.text-knopf:hover{text-decoration:underline;text-underline-offset:.2em}
.text-knopf:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-in)}
.schritt-liste{flex:1 1 auto;min-width:0;display:flex;gap:4px;margin:0;padding:0;list-style:none}
.schritt-liste li{flex:1 1 0;min-width:0}
.schritt-knopf{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;width:100%;min-height:1.75rem;
  padding:0;border:0;background:none;color:var(--color-text-faint);font:inherit;font-size:var(--fs-1);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer;transition:color .15s ease;
}
.schritt-knopf::after{content:"";display:block;height:6px;border-radius:var(--radius-in);background:var(--hair-strong);transition:background-color .2s ease}
.schritt-knopf[data-zustand="fertig"]{color:var(--color-text-muted)}
.schritt-knopf[data-zustand="fertig"]::after{background:var(--brand-line)}
.schritt-knopf[aria-current="step"]{color:var(--brand-text)}
.schritt-knopf[aria-current="step"]::after{background:var(--brand)}
.schritt-knopf:hover:not([aria-current]){color:var(--color-text)}
.schritt-knopf:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--radius-in)}
.schritt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Am Handy nur Balken; welcher Schritt gilt, steht groß in der Karte */
@media (max-width:719px){
  .schritt-knopf{justify-content:center}
  .schritt-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* ---------- Neu-Knopf: rechts neben der Schrittleiste, gleiche Höhe und Machart, klebt mit ---------- */
.btn.neu-knopf{
  align-self:stretch;position:sticky;top:calc(var(--kopfhoehe) - 1px);z-index:30;box-sizing:border-box;min-height:var(--leiste-h);
  padding-inline:1rem;border-radius:var(--radius-card);box-shadow:var(--e2);background:var(--color-surface);
}
.btn.neu-knopf:hover{background:var(--color-surface-raised)}
/* Mit Fingerbedienung sind die Schrittknöpfe 44 px hoch, die Leiste mit Innenabstand also höher */
@media (pointer:coarse){.wizard{--leiste-h:calc(var(--control-size) + .8rem)}}
/* Am schmalen Handy nur das Plus, damit die Schrittbalken Platz behalten */
@media (max-width:420px){
  .neu-knopf span{display:none}
  .neu-knopf{min-width:var(--leiste-h);padding-inline:0}
}

/* ---------- Schrittkarte ---------- */
.schritt{padding:1.25rem 1.25rem 1.5rem}
.schritt-laden{margin:0;font-size:var(--fs-4);color:var(--color-text-faint)}
.schritt-kopf{margin-bottom:1.1rem}
.schritt-titel{margin:0;font-size:var(--fs-6)}
.schritt-kontext{margin:.2rem 0 0;font-size:var(--fs-3);color:var(--color-text-muted)}
.schritt-hinweis{margin:0;font-size:var(--fs-4);color:var(--color-text-muted)}
.schritt-inhalt.wechsel{animation:einblenden .25s ease both}
.block + .block{margin-top:1.6rem}
.schnellstart{margin-bottom:1.4rem;padding-bottom:1.25rem;border-bottom:1px solid var(--hair)}
.block-titel{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .6rem;margin:0 0 .65rem;
  font-size:var(--fs-2);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);
}
.block-hinweis{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--color-text-faint)}

.fragen > .frage + .frage{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--hair)}
.frage.neu{animation:einblenden .3s ease both}
.frage-titel{display:block;margin:0 0 .6rem;font-size:var(--fs-5);font-weight:600;line-height:1.35;color:var(--color-text)}
.frage-zusatz{margin-left:.5rem;font-size:var(--fs-2);font-weight:400;color:var(--color-text-faint)}

/* Antwortkacheln: Kreis = eine Antwort, Kästchen = mehrere. Ein zweiter Tipp nimmt die Antwort zurück. */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.5rem}
.kacheln-breit{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.kacheln-geraete{grid-template-columns:repeat(auto-fill,minmax(6.25rem,1fr))}
.kachel{
  position:relative;display:flex;align-items:center;gap:.6rem;min-height:3rem;padding:.6rem .75rem;
  background:var(--color-bg-sunken);border:1px solid transparent;border-radius:var(--radius-ctl);
  color:var(--color-text);font:inherit;font-size:var(--fs-4);font-weight:500;line-height:1.3;text-align:left;
  hyphens:auto;overflow-wrap:break-word;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.kachel::before{
  content:"";flex:none;width:1.05rem;height:1.05rem;border:2px solid var(--color-border-strong);border-radius:50%;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.kachel-mehrfach::before{border-radius:var(--radius-in)}
.kachel:hover{border-color:var(--hair-strong)}
.kachel:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kachel:active{transform:translateY(1px)}
.kachel[aria-pressed="true"]{background:var(--brand-faint);border-color:var(--brand-line)}
.kachel[aria-pressed="true"]::before{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 3px var(--color-surface)}
.kachel-mehrfach[aria-pressed="true"]::before{
  box-shadow:none;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23111112' stroke-width='2.4'/%3E%3C/svg%3E") center/100% no-repeat;
}
/* Geräte: ohne Kennzeichen, damit drei nebeneinander passen */
.kachel-geraet{justify-content:center;text-align:center}
.kachel-geraet::before{display:none}
/* Schnellstart: kleiner, damit die eigentlichen Fragen des Schritts im Bild bleiben */
.kacheln-klein{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.4rem}
.kachel-klein{min-height:2.5rem;padding:.4rem .6rem;gap:.5rem;font-size:var(--fs-3)}
.kachel-klein::before{width:.85rem;height:.85rem}

/* Freitext und Zahl — Machart wie das Suchfeld (.filter-input-wrap) */
.feld{
  display:block;width:100%;min-height:var(--control-size);padding:.6rem .75rem;
  background:var(--color-bg-sunken);border:1px solid transparent;border-radius:var(--radius-ctl);
  color:var(--color-text);font:inherit;font-size:var(--fs-5);line-height:1.45;resize:none;field-sizing:content;
  transition:border-color .15s ease,box-shadow .15s ease;
}
textarea.feld{max-height:12rem}
.feld::placeholder{color:var(--color-text-faint)}
.feld:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-faint)}
.feld-zahl{max-width:9rem}
.feld.ungueltig{border-color:var(--color-danger)}

/* Vorschläge: antippen fügt ein, nochmal antippen entfernt. Gestrichelt = zuletzt selbst benutzt. */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;min-height:2rem;padding:.25rem .6rem;
  background:transparent;border:1px solid var(--hair-strong);border-radius:var(--radius-in);
  color:var(--color-text-muted);font:inherit;font-size:var(--fs-3);line-height:1.2;text-align:left;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.chip::before{content:"+";flex:none;font-weight:700;color:var(--color-text-faint)}
.chip-zuletzt{border-style:dashed}
.chip:hover{border-color:var(--brand-line);color:var(--color-text)}
.chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.chip[aria-pressed="true"]{background:var(--brand-faint);border-color:var(--brand-line);color:var(--color-text)}
.chip[aria-pressed="true"]::before{content:"✓";color:var(--brand-text)}

/* Weitere Angaben: alles Optionale eines Schritts, zugeklappt, solange nichts davon ausgefüllt ist */
.mehr{margin-top:1.25rem;border-top:1px solid var(--hair)}
.mehr > summary{
  display:flex;align-items:center;gap:.6rem;min-height:var(--control-size);padding-top:.6rem;list-style:none;cursor:pointer;
  font-size:var(--fs-4);font-weight:600;color:var(--color-text-muted);transition:color .15s ease;
}
.mehr > summary::-webkit-details-marker{display:none}
.mehr > summary::before{
  content:"";flex:none;width:.45rem;height:.45rem;margin-left:.15rem;border:solid currentColor;border-width:0 2px 2px 0;
  transform:rotate(-45deg);transition:transform .2s ease;
}
.mehr[open] > summary::before{transform:rotate(45deg)}
.mehr > summary:hover{color:var(--brand-text)}
.mehr > summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-in)}
.mehr-zahl{font-size:var(--fs-2);font-weight:400;color:var(--color-text-faint)}
.mehr > .fragen{padding:.4rem 0 .25rem}

/* ---------- Letzter Schritt: offene Angaben, Text, Zeichenzahl ---------- */
.fehlend{margin-bottom:1rem;padding:.85rem 1rem;background:var(--color-warning-faint);border-radius:var(--radius-ctl);box-shadow:inset 0 0 0 1px var(--color-warning-line)}
.fehlend-titel{margin:0 0 .3rem;font-size:var(--fs-2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-warning)}
.fehlend ul{margin:0;padding:0;list-style:none}
.fehlend-link{
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;width:100%;min-height:2.25rem;padding:.35rem 0;
  border:0;background:none;color:var(--color-text);font:inherit;font-size:var(--fs-4);text-align:left;cursor:pointer;
}
.fehlend-link:hover{color:var(--brand-text)}
.fehlend-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-in)}
.fehlend-schritt{flex:none;font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.fehlend-hinweis{margin:.35rem 0 0;font-size:var(--fs-2);color:var(--color-text-muted)}
.vollstaendig{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;font-size:var(--fs-3);font-weight:600;color:var(--color-success)}
.vollstaendig::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--color-success)}
.bericht-text{padding:1rem;background:var(--color-bg-sunken);border-radius:var(--radius-ctl)}
.bericht-zeichen{margin:.6rem 0 0;font-size:var(--fs-2);color:var(--color-text-faint)}
.handkopie{margin-top:.75rem;min-height:8rem;font-size:var(--fs-4)}

/* ---------- Vorschau: Sätze nach Abschnitt, neu entstandene leuchten kurz auf ---------- */
.vorschau-kopf{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .75rem .6rem 1rem;border-bottom:1px solid var(--hair)}
.vorschau-titel{margin:0;font-size:var(--fs-1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-text)}
.vorschau-seite .vorschau-inhalt{padding:.85rem 1rem 1rem}
.abschnitt + .abschnitt{margin-top:.75rem}
.abschnitt-name{margin:0 0 .15rem;font-size:var(--fs-1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-faint)}
.abschnitt-text{margin:0;font-size:var(--fs-4);line-height:1.6;color:var(--color-text);overflow-wrap:anywhere}
.satz{border-radius:var(--radius-in)}
.satz.neu{animation:aufleuchten 1.4s ease}
.vorschau-leer{margin:0;font-size:var(--fs-4);font-weight:300;color:var(--color-text-faint)}
@keyframes aufleuchten{from{background:var(--brand-faint);box-shadow:0 0 0 2px var(--brand-faint)}to{background:transparent;box-shadow:0 0 0 2px transparent}}

/* ---------- Aktionsleiste im Daumenbereich ---------- */
.aktionsleiste{
  position:sticky;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));z-index:20;display:flex;gap:.5rem;padding:.5rem;
  background:color-mix(in srgb,var(--color-surface) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-radius:var(--radius-card);box-shadow:var(--e3);
}
/* Zurück ganz links, Weiter ganz rechts, beide gleich breit (am Ende so breit wie „Kopieren“);
   am Handy steht die Vorschau dazwischen in der Mitte */
.aktionsleiste{justify-content:space-between}
.aktionsleiste .btn{flex:none;padding-inline:1rem}
#zurueck,#weiter{min-width:8.5rem}
@media (max-width:420px){
  .aktionsleiste{gap:.375rem;padding:.375rem}
  .aktionsleiste .btn{gap:.3rem;padding-inline:.5rem;letter-spacing:.02em}
  #zurueck,#weiter{min-width:6.5rem}
}
.aktionsleiste .btn:disabled{opacity:.45;cursor:default;transform:none}
.btn-zweit{background:var(--color-surface-raised);color:var(--color-text)}
.btn-zweit:hover{border-color:var(--hair-strong)}
.btn-klein{min-height:2rem;padding:.3rem .7rem;font-size:var(--fs-2)}
.btn svg{flex:none;width:16px;height:16px}
.zahl{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .3rem;border-radius:var(--radius-in);background:var(--brand-faint);color:var(--brand-text);font-size:var(--fs-2);letter-spacing:0}
/* Beim Tippen braucht die Tastatur den Platz: Leiste weg, Schrittleiste klebt nicht mehr */
@media (pointer:coarse){
  body:has(.feld:focus) .aktionsleiste{display:none}
  body:has(.feld:focus) :is(.schrittleiste,.neu-knopf){position:static}
}
.wizard + .offline-status{margin-top:1.5rem}

/* ---------- Verlauf ---------- */
.verlauf-liste{margin:0;padding:0;list-style:none}
.verlauf-liste li + li{border-top:1px solid var(--hair)}
.verlauf-liste li{display:flex;align-items:center;gap:.5rem}
/* X zum schnellen Löschen: rechts in der Zeile, Fingerziel 44 px, dezent bis zum Zeigen */
.verlauf-x{
  flex:none;display:grid;place-items:center;width:var(--control-size);height:var(--control-size);
  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-eintrag{
  flex:1 1 auto;min-width:0;display:grid;gap:.2rem;width:100%;padding:.65rem 0;border:0;background:none;color:var(--color-text);
  font:inherit;text-align:left;cursor:pointer;
}
.verlauf-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .5rem;font-size:var(--fs-2);color:var(--color-text-faint)}
.verlauf-geraet{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.verlauf-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--fs-3);color:var(--color-text-muted)}
.verlauf-eintrag:hover .verlauf-text{color:var(--color-text)}
.verlauf-eintrag:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--radius-in)}
/* Das Fenster unter dem Verlauf-Knopf: Rahmen und Lage wie .menue, etwas breiter für die Texte */
/* Kopf und Fuß bleiben stehen, nur die Liste scrollt — wie in PartSurfer etwa acht Einträge hoch.
   Die Obergrenze des ganzen Fensters setzt app.js beim Öffnen aus dem Platz unter dem Knopf:
   Die Grenze von .menue rechnet mit der Kopfzeile, der Knopf steht aber tiefer neben dem Titel —
   bei vielen Suchen lag „Alles löschen“ unter dem Bildschirmrand (René, 29.10.2026). */
.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-fenster .verlauf-liste{padding:0 .25rem 0 .75rem}
.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:var(--control-size)}}
.eintrag-meta{margin:0 0 .5rem;font-size:var(--fs-2);color:var(--color-text-faint)}
.eintrag-text{margin:0 0 1rem;font-size:var(--fs-4);line-height:1.6;white-space:pre-line;user-select:text}

/* Fuß der App-Dialoge (Vorschau, Bericht) */
.dialog-fuss{flex:none;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;padding:.75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hair)}
.app-dialog .faq-inhalt{padding-top:.85rem}
@media (max-width:560px){
  .schritt{padding:1rem 1rem 1.25rem}
  .dialog-fuss .btn{flex:1 1 auto}
}

/* 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){
  .schritt-knopf,.chip,.text-knopf,.fehlend-link,.btn-klein,.kachel-klein{min-height:var(--control-size)}
}