/* ═══════════════════════════════════════════════════════════════════
   Gestaltungsmarken

   Aufgebaut wie die gängigen Designsysteme (shadcn/ui, Radix): erst
   Farbmarken mit einer Bedeutung, dann Bausteine, die nur diese Marken
   verwenden. Keine Farbe steht irgendwo direkt im Baustein – so bleibt
   ein Farbwechsel eine Änderung an einer Stelle.

   Absichtlich ohne Tailwind, Material oder shadcn als Abhängigkeit:
   alle drei brauchen einen Übersetzungsschritt (npm, Bundler). Diese
   Anwendung läuft ohne Netz und startet mit einem Doppelklick. Die
   Ordnung dieser Systeme ist übernommen, der Werkzeugkasten nicht.

   Eine Hauptfarbe für Hauptaktionen (Suchen, Speichern, Anlegen),
   neutrale Umrandung für alles Begleitende (Abbrechen, Exportieren),
   Rot ausschließlich für Unwiderrufliches.
   ═════════════════════════════════════════════════════════════════ */
:root{
  --grund:#ffffff;
  --flaeche:#f8fafc;
  --text:#0f172a;
  --gedaempft:#f1f5f9;
  --gedaempft-text:#64748b;
  --rand:#e2e8f0;
  --rand-stark:#cbd5e1;

  /* Aus dem Logo entnommen: das Braun des Schriftzugs (#91593C), das
     Gruen des Bechers (#536843). Blau danebenzustellen sah aus wie
     zwei Marken in einem Fenster.

     Warum das Braun die Hauptfarbe ist und nicht das Gruen: Gruen ist
     hier schon vergeben - es bedeutet "hat geklappt". Ein zweites,
     nur leicht anderes Gruen auf Knoepfen wuerde diese Bedeutung
     verwaessern. Das Braun ist frei und traegt den Cafe-Gedanken. */
  --primaer:#91593C;
  --primaer-dunkel:#77462E;
  --primaer-weich:#FBF5F1;
  --primaer-rand:#E5CFC1;

  --matcha:#536843;
  --matcha-weich:#F2F5EF;

  --erfolg:#15803d;
  --erfolg-weich:#f0fdf4;
  --erfolg-rand:#bbf7d0;

  --warnung:#b45309;
  --warnung-weich:#fffbeb;
  --warnung-rand:#fde68a;

  --gefahr:#dc2626;
  --gefahr-weich:#fef2f2;
  --gefahr-rand:#fecaca;

  --ring:#D6B9A7;
  --radius:10px;
  --schatten:0 1px 2px rgba(15,23,42,.05);
  --schatten-hoch:0 4px 16px rgba(15,23,42,.08);
  --seitenleiste:224px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--flaeche);color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--primaer);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.3px}
h1{font-size:26px}
h2{font-size:17px}
h3{font-size:14px}
code{background:var(--gedaempft);padding:2px 6px;border-radius:5px;font-size:12.5px}
.versteckt{display:none !important}

/* ── Grundgerüst: Seitenleiste + Inhalt ──────────────────────────── */
.rahmen{display:grid;grid-template-columns:var(--seitenleiste) minmax(0,1fr);
  min-height:100vh}

.seitenleiste{background:var(--grund);border-right:1px solid var(--rand);
  display:flex;flex-direction:column;padding:18px 12px;gap:4px;
  position:sticky;top:0;height:100vh;
  /* align-self ist noetig: Rasterfelder werden voreingestellt auf die
     Zeilenhoehe gestreckt, und ein gestrecktes Element hat keinen Raum
     zum Haften - es scrollt dann mit. */
  align-self:start}
.marke{display:flex;align-items:center;padding:2px 10px 18px}
/* Hoehe statt Breite vorgeben: Der Schriftzug ist sehr breit und sehr
   flach (760x118). Ueber die Breite gesteuert waere er auf schmalen
   Geraeten entweder winzig oder haette die Zeile gesprengt. */
.marke img{height:30px;width:auto;max-width:100%;display:block}
.marke.gross img{height:40px}
/* Nur der Becher, wo der ganze Schriftzug zu breit waere. */
.marke .becher{height:26px;width:26px}
.marke:has(.becher){gap:9px;font-size:17px;font-weight:700;letter-spacing:-.4px}
.navpunkt .kurz{display:none}
.navpunkt{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-radius:8px;font-size:14px;font-weight:500;color:var(--gedaempft-text);
  border:none;background:none;font-family:inherit;cursor:pointer;width:100%;
  text-align:left}
.navpunkt:hover{background:var(--gedaempft);color:var(--text)}
.navpunkt.aktiv{background:var(--primaer-weich);color:var(--primaer);font-weight:600}
.navpunkt .sym{width:18px;text-align:center;font-size:15px}
.navpunkt .zahl{margin-left:auto;font-size:11.5px;font-weight:600;
  background:var(--gedaempft);color:var(--gedaempft-text);
  padding:1px 7px;border-radius:20px}
.navpunkt.aktiv .zahl{background:var(--primaer);color:#fff}
.navfuss{margin-top:auto;padding-top:12px;border-top:1px solid var(--rand)}

.inhalt{padding:24px 28px 70px;max-width:1500px;width:100%}
.seitenkopf{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  margin-bottom:20px}
.seitenkopf .unterzeile{color:var(--gedaempft-text);font-size:14px;margin-top:3px}
.seitenkopf .schub{margin-left:auto;display:flex;gap:8px;align-items:center;
  flex-wrap:wrap}
.stand{font-size:13px;color:var(--gedaempft-text);white-space:nowrap}

/* ── Karten ──────────────────────────────────────────────────────── */
.karte{background:var(--grund);border:1px solid var(--rand);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--schatten)}
.karte.eng{padding:13px 15px}
.kartenkopf{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kartenkopf .schub{margin-left:auto}

/* ── Kennzahl-Kacheln ────────────────────────────────────────────── */
.kacheln{display:grid;gap:12px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.kachel{background:var(--grund);border:1px solid var(--rand);
  border-radius:var(--radius);padding:15px 16px;box-shadow:var(--schatten);
  display:flex;flex-direction:column;gap:3px;text-align:left;
  font-family:inherit;cursor:default}
button.kachel{cursor:pointer}
button.kachel:hover{border-color:var(--rand-stark);box-shadow:var(--schatten-hoch)}
.kachel .oben{display:flex;align-items:center;justify-content:space-between}
.kachel .wert{font-size:27px;font-weight:700;letter-spacing:-.8px;line-height:1.1}
.kachel .titel{font-size:12.5px;color:var(--gedaempft-text)}
.kachel .sym{font-size:17px;opacity:.75}
.kachel.gut .wert{color:var(--erfolg)}
.kachel.warn .wert{color:var(--warnung)}
.kachel.primaer .wert{color:var(--primaer)}
.kachel.gefahr .wert{color:var(--gefahr)}

/* ── Raster für die Dashboard-Spalten ────────────────────────────── */
.zweispalt{display:grid;gap:14px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:start}
/* min-width:0 durch die ganze Kette.
   Ein Raster- oder Flexelement schrumpft von sich aus nie unter die
   Mindestbreite seines Inhalts. Ein einziger langer Firmenname
   ("Gerhardt Braun Raumsysteme GmbH & Co. KG") in einer Zeile mit
   white-space:nowrap meldet dadurch seine volle Breite nach oben durch -
   bis die Seite auf dem Handy 547 statt 375 Pixel breit war und sich
   seitlich schieben liess. minmax(0,1fr) auf der Spur allein reicht
   nicht: Es erlaubt der SPUR zu schrumpfen, nicht dem Element darin. */
.spalte{display:grid;gap:14px;min-width:0}
.karte{min-width:0}

/* ── Knöpfe ──────────────────────────────────────────────────────── */
button,.knopf{font:inherit;font-size:13.5px;font-weight:550;border-radius:8px;
  padding:8px 14px;cursor:pointer;border:1px solid var(--rand-stark);
  background:var(--grund);color:var(--text);display:inline-flex;
  align-items:center;gap:7px;line-height:1.3}
button:hover:not(:disabled),.knopf:hover{background:var(--gedaempft);
  text-decoration:none}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,.knopf:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--ring);
  outline-offset:1px}
button.haupt{background:var(--primaer);border-color:var(--primaer);color:#fff}
button.haupt:hover:not(:disabled){background:var(--primaer-dunkel)}
button.rot{color:var(--gefahr);border-color:var(--gefahr-rand)}
button.rot:hover:not(:disabled){background:var(--gefahr-weich)}
button.schlicht{border-color:transparent;background:none;
  color:var(--gedaempft-text);padding:6px 8px}
button.schlicht:hover:not(:disabled){background:var(--gedaempft);color:var(--text)}
button.klein{padding:5px 10px;font-size:12.5px}

/* ── Formulare ───────────────────────────────────────────────────── */
label{display:block;font-size:12.5px;font-weight:600;color:var(--gedaempft-text);
  margin-bottom:5px}
input[type=text],input[type=password],input[type=email],input[type=tel],
input[type=date],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:14px;padding:8px 11px;border-radius:8px;
  border:1px solid var(--rand-stark);background:var(--grund);color:var(--text)}
textarea{resize:vertical;min-height:80px;line-height:1.5}
.feld{margin-bottom:14px}
.feldreihe{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.haken{display:flex;align-items:flex-start;gap:9px;font-size:14px;
  font-weight:500;color:var(--text);cursor:pointer;margin:0}
.haken input{width:16px;height:16px;margin:2px 0 0;flex:none;accent-color:var(--primaer)}
.haken .erklaerung{display:block;font-size:12.5px;font-weight:400;
  color:var(--gedaempft-text);margin-top:2px}

/* Uhrzeit des Tageslaufs. Eingerueckt auf Hoehe des Hakentexts, damit
   sichtbar ist, dass sie dazugehoert - und ausgegraut statt versteckt,
   wenn der Haken aus ist: Ein verschwindendes Feld laesst einen raten,
   ob es die Einstellung noch gibt. */
.zeitwahl{display:flex;align-items:center;gap:9px;margin:9px 0 0 25px;
  font-size:13px;color:var(--gedaempft-text);flex-wrap:wrap}
.zeitwahl input{width:auto;padding:5px 9px;font-size:13px}
.zeitwahl.aus{opacity:.5}
.zeitwahl label{font-size:13px;margin:0;color:inherit}

/* Hinweiszeilen unter der Laufkarte: Dauer und Mailversand. Ein Zeichen
   vorweg, damit sie sich beim Ueberfliegen unterscheiden lassen. */
/* Der Text liegt in EINEM <span>, der Knopf daneben. Ohne das machte
   der Flex-Container aus jedem <b> ein eigenes Element und zerriss den
   Satz mitten im Wort - "... 20 bis 60 Minuten" auf der einen, ". Du
   kannst die Seite ..." auf der naechsten Zeile. */
.mailzeile{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin-top:7px}
.mailzeile > span{flex:1 1 15em;min-width:0}
.mailzeile.warn{color:var(--warnung)}
.mailzeile button{margin-left:auto}

/* ── Nachfrage-Dialog ────────────────────────────────────────────
   Als natives <dialog>: Escape schliesst, der Fokus bleibt drin, den
   abgedunkelten Hintergrund macht ::backdrop. Nichts davon muesste man
   sonst selbst bauen - und jede eigene Fassung waere schlechter. */
dialog.frage{border:1px solid var(--rand);border-radius:14px;padding:0;
  max-width:440px;width:calc(100% - 32px);background:var(--grund);
  color:var(--text);box-shadow:var(--schatten-hoch)}
dialog.frage::backdrop{background:rgba(36,27,20,.45)}
dialog.frage form{padding:24px 26px;display:flex;flex-direction:column;gap:13px}
dialog.frage h2{font-size:19px}
dialog.frage p{margin:0;font-size:14px;color:var(--gedaempft-text);
  line-height:1.55}
dialog.frage .feld{margin:0}
.fragefuss{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;
  margin-top:5px}
@media (max-width:480px){
  /* Auf dem Handy untereinander. Die Reihenfolge im Markup bleibt, weil
     sie hier genau passt: Die Hauptaktion steht zuletzt und damit unten,
     wo der Daumen von selbst hinkommt. Abbrechen liegt oben - was man
     nicht will, soll man nicht versehentlich treffen. */
  .fragefuss{flex-direction:column}
  .fragefuss button{width:100%;justify-content:center}
}

/* ── Tabellen ────────────────────────────────────────────────────── */
.tabellenhuelle{overflow-x:auto;border:1px solid var(--rand);
  border-radius:var(--radius);background:var(--grund)}
/* Mindestbreite statt Quetschen: eine Auswahlliste, die auf 60 px
   zusammengedrueckt wird, ist unbedienbar. Lieber waagerecht scrollen -
   dafuer hat .tabellenhuelle ihr overflow-x. */
table{border-collapse:collapse;width:100%;min-width:940px;font-size:13.5px}
td input[type=text],td input[type=date],td select{font-size:13px;padding:6px 8px}
td select{min-width:150px}
td input[type=date]{min-width:135px}
th{text-align:left;font-size:11.5px;font-weight:650;text-transform:uppercase;
  letter-spacing:.4px;color:var(--gedaempft-text);padding:11px 12px;
  border-bottom:1px solid var(--rand);white-space:nowrap;background:var(--grund)}
td{padding:11px 12px;border-bottom:1px solid var(--rand);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--flaeche)}
td.zahl,th.zahl{text-align:right;font-variant-numeric:tabular-nums}
.leerhinweis{padding:34px 20px;text-align:center;color:var(--gedaempft-text);
  font-size:14px}

/* ── Merkmale und Abzeichen ──────────────────────────────────────── */
.abzeichen{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  font-weight:600;padding:2px 9px;border-radius:20px;white-space:nowrap;
  border:1px solid var(--rand);background:var(--gedaempft);
  color:var(--gedaempft-text)}
.abzeichen.gut{background:var(--erfolg-weich);border-color:var(--erfolg-rand);
  color:var(--erfolg)}
.abzeichen.mittel{background:var(--warnung-weich);border-color:var(--warnung-rand);
  color:var(--warnung)}
.abzeichen.schwach{background:var(--gedaempft);color:var(--gedaempft-text)}
.abzeichen.primaer{background:var(--primaer-weich);border-color:var(--primaer-rand);
  color:var(--primaer)}
.abzeichen.gefahr{background:var(--gefahr-weich);border-color:var(--gefahr-rand);
  color:var(--gefahr)}

.punktzahl{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;
  min-width:34px;display:inline-block}
.punktzahl.gut{color:var(--erfolg)}
.punktzahl.mittel{color:var(--warnung)}
.punktzahl.schwach{color:var(--gedaempft-text)}

.punktfeld{display:grid;place-items:center;width:42px;height:34px;flex:none;
  border-radius:8px;font-weight:700;font-size:14.5px;
  font-variant-numeric:tabular-nums}
.punktfeld.gut{background:var(--erfolg-weich);color:var(--erfolg)}
.punktfeld.mittel{background:var(--warnung-weich);color:var(--warnung)}
.punktfeld.schwach{background:var(--gedaempft);color:var(--gedaempft-text)}

/* ── Top-Treffer-Liste ───────────────────────────────────────────── */
.topliste{display:flex;flex-direction:column}
.topzeile{display:flex;align-items:flex-start;gap:12px;padding:11px 2px;
  border-bottom:1px solid var(--rand);text-align:left;width:100%;
  background:none;border-left:none;border-right:none;border-top:none;
  font-family:inherit;cursor:pointer;border-radius:0}
.topzeile{min-width:0}
.topzeile:last-child{border-bottom:none}
.topzeile:hover{background:var(--flaeche)}
.topzeile .mitte{flex:1;min-width:0}
.topzeile .titel{font-size:14px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
/* display:block ist hier kein Schoenheitsfehler, sondern noetig:
   overflow und text-overflow wirken auf ein inline-Element nicht. Das
   <span> kuerzte deshalb nie, sondern schob die Zeile auf. */
.topzeile .unter{display:block;font-size:12.5px;color:var(--gedaempft-text);
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topzeile .wann{font-size:12px;color:var(--gedaempft-text);white-space:nowrap;
  padding-top:2px}

/* ── Verteilungsbalken (statt Tortendiagramm: exakt ablesbar) ────── */
.verteilung{display:grid;gap:9px}
.vzeile{display:grid;grid-template-columns:110px 1fr 34px;align-items:center;
  gap:10px;font-size:13px}
.vbalken{height:8px;border-radius:20px;background:var(--gedaempft);overflow:hidden}
.vbalken i{display:block;height:100%;border-radius:20px;background:var(--primaer)}
/* Trennt die Empfehlung des Modells von der eigenen Einstufung. Ohne
   diese Zeile standen sechs Balken untereinander, die zwei verschiedene
   Fragen beantworten. */
.vtrenner{font-size:11px;letter-spacing:.06em;color:var(--gedaempft-text);
  text-align:center;padding:4px 0 1px}
.aufraeumen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--rand)}
.vzeile .zahl{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.vzeile.gut .vbalken i{background:var(--erfolg)}
.vzeile.warn .vbalken i{background:var(--warnung)}
.vzeile.grau .vbalken i{background:var(--rand-stark)}
.vzeile.gefahr .vbalken i{background:var(--gefahr)}

/* ── Lauf-Anzeige ────────────────────────────────────────────────── */
.laufkarte.laeuft{border-color:var(--primaer-rand);background:var(--primaer-weich)}
.fortschritt{height:7px;border-radius:20px;background:var(--gedaempft);
  overflow:hidden;margin:10px 0 8px}
.fortschritt i{display:block;height:100%;background:var(--primaer);
  border-radius:20px;transition:width .4s ease}
.laufzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:var(--gedaempft-text)}
/* Die Restzeit ist die Zahl, auf die man waehrend eines langen Laufs
   wartet - sie darf sich vom Rest der Zeile abheben. */
.laufzeile .rest{margin-left:auto;font-weight:600;color:var(--primaer);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Der Satz "du kannst die Seite schliessen" steht unter den Schritten,
   abgesetzt, aber nicht versteckt. Wer ihn einmal gelesen hat, ueberliest
   ihn danach - genau richtig. */
.laufkarte .beiseite{margin-top:11px;padding-top:9px;
  border-top:1px solid var(--primaer-rand)}
.schritte{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.schritt{font-size:11.5px;padding:2px 9px;border-radius:20px;
  background:var(--gedaempft);color:var(--gedaempft-text)}
.schritt.aktiv{background:var(--primaer);color:#fff}
.schritt.fertig{background:var(--erfolg-weich);color:var(--erfolg)}
.pulsen{animation:pulsen 1.6s ease-in-out infinite}
@keyframes pulsen{0%,100%{opacity:1}50%{opacity:.55}}

/* ── Trefferkarten ───────────────────────────────────────────────── */
.trefferliste{display:grid;gap:11px}
.treffer{background:var(--grund);border:1px solid var(--rand);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--schatten)}
.treffer.hervor{border-color:var(--erfolg-rand);background:var(--erfolg-weich)}
.treffer .kopf{display:flex;align-items:flex-start;gap:12px}
.treffer .kopf .mitte{flex:1;min-width:0}
.treffer .titel{font-size:15px;font-weight:650;line-height:1.35}
.treffer .firma{font-size:13px;color:var(--gedaempft-text);margin-top:2px}
.treffer .firma b{color:var(--text);font-weight:600}
.merkmale{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.gruende{margin:10px 0 0;padding-left:18px;font-size:13.5px;line-height:1.6}
.gruende li{margin-bottom:3px}
.aktionen{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--rand)}
.aktionen .schub{margin-left:auto}
button.gewaehlt{background:var(--primaer-weich);border-color:var(--primaer-rand);
  color:var(--primaer)}
.faltung{margin-top:11px;padding-top:11px;border-top:1px solid var(--rand);
  font-size:13.5px;line-height:1.6;white-space:pre-wrap;color:var(--text)}
.faltung h4{margin:0 0 5px;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--gedaempft-text)}
.faltung .block+.block{margin-top:12px}

/* ── Meldungen ───────────────────────────────────────────────────── */
#meldungen{position:fixed;top:14px;right:14px;z-index:60;display:grid;gap:8px;
  max-width:390px}
.meldung{background:var(--text);color:#fff;font-size:13.5px;padding:10px 14px;
  border-radius:9px;box-shadow:var(--schatten-hoch);opacity:1;
  transition:opacity .4s}
.meldung.geht{opacity:0}
.meldung.fehler{background:var(--gefahr)}
.meldung.erfolg{background:var(--erfolg)}

/* ── Anmeldung und Dialoge ───────────────────────────────────────── */
.mittig{max-width:400px;margin:12vh auto}
/* Hiess frueher .mitte - und kollidierte mit dem Mittelteil der
   Treffer- und Topzeilen, deren 12vh Rand die Zeilen auf 230 px
   aufblies. Hilfsklassen brauchen eigene Namen. */
.dialoggrund{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:50;
  display:grid;place-items:center;padding:20px;overflow-y:auto}
.dialog{background:var(--grund);border-radius:14px;padding:22px;width:100%;
  max-width:560px;box-shadow:var(--schatten-hoch)}
.dialog h2{margin-bottom:14px}
.dialogfuss{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}

/* ── Kleinkram ───────────────────────────────────────────────────── */
.hinweis{font-size:12.5px;color:var(--gedaempft-text);line-height:1.5}
.trennung{height:1px;background:var(--rand);margin:16px 0}
.reihe{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wachst{flex:1;min-width:0}
.filterleiste{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-bottom:14px}
.filterleiste input[type=text]{max-width:280px}
.filterleiste select{width:auto;min-width:150px}

/* ── Schmale Fenster: Seitenleiste wird zur Fußleiste ────────────── */
@media (max-width:900px){
  .rahmen{grid-template-columns:minmax(0,1fr)}
  .seitenleiste{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;
    flex-direction:row;border-right:none;border-top:1px solid var(--rand);
    padding:6px;gap:2px;z-index:40;overflow-x:auto}
  /* Nur die Marke IN DER SEITENLEISTE verschwindet - die wird auf dem
     Handy zur unteren Leiste, und dort ist kein Platz fuer den
     Schriftzug. `.marke` ohne Einschraenkung nahm bis zum 29.08.2026
     auch das Logo aus Anmeldung, Registrierung und Onboarding: also
     genau aus den drei Bildschirmen, die ein neuer Nutzer zuerst sieht,
     und auf dem Geraet, mit dem die meisten zuerst kommen. */
  .seitenleiste .marke,.navfuss{display:none}
  /* Das <nav> selbst muss mit umschalten. `.seitenleiste` allein auf
     `row` zu stellen half nichts: Die Punkte liegen in einem <nav>, das
     ohne eigene Regel ein normaler Block bleibt - und darin stapelten
     sie sich weiter untereinander. Die Leiste war dadurch 254 Pixel
     hoch und nahm ein Drittel des Handybildschirms ein. */
  /* min-width:0 ist der entscheidende Teil: Ein Flexelement schrumpft
     ohne das nicht unter die Breite seines Inhalts. Das <nav> wurde
     dadurch 534 Pixel breit und schob die ganze Seite seitlich auf -
     auf dem Dashboard sah man abgeschnittene Firmennamen. */
  .seitenleiste nav{display:flex;flex-direction:row;gap:2px;flex:1;
    min-width:0}
  .navpunkt{flex-direction:column;gap:3px;font-size:11px;padding:7px 4px;
    text-align:center;flex:1;min-width:0}
  /* Kurznamen statt der langen: fuenf Punkte muessen auf 375 Pixel. */
  .navpunkt .lang{display:none}
  .navpunkt .kurz{display:block;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;max-width:100%}
  .navpunkt .zahl{margin:0;position:absolute;transform:translate(16px,-6px)}
  .inhalt{padding:16px 14px 90px}
  .zweispalt{grid-template-columns:minmax(0,1fr)}
  h1{font-size:22px}
}

/* ── Onboarding ──────────────────────────────────────────────────
   Vollbild ohne Seitenleiste: Wer gerade einrichtet, soll nicht in
   Reiter springen können, in denen noch nichts steht. */
.obrahmen{min-height:100vh;display:flex;flex-direction:column;
  align-items:center;padding:28px 18px 60px;background:var(--flaeche)}
.obkopf{width:100%;max-width:760px;display:flex;align-items:center;
  gap:20px;flex-wrap:wrap;margin-bottom:22px}
.obkopf .marke{padding:0}

.obschritte{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.obschritt{display:flex;align-items:center;gap:6px;font-size:12px;
  color:var(--gedaempft-text)}
.obschritt .nr{width:20px;height:20px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:11px;font-weight:650;
  background:var(--gedaempft);color:var(--gedaempft-text)}
.obschritt.aktiv{color:var(--text);font-weight:600}
.obschritt.aktiv .nr{background:var(--primaer);color:#fff}
.obschritt.fertig .nr{background:var(--erfolg-weich);color:var(--erfolg)}
.obschritt .was{display:none}
.obschritt.aktiv .was{display:inline}

.obkarte{width:100%;max-width:760px;background:var(--grund);
  border:1px solid var(--rand);border-radius:14px;padding:30px 32px;
  box-shadow:var(--schatten-hoch)}
.obkarte h1{font-size:23px;margin-bottom:8px}
.obtext{color:var(--gedaempft-text);font-size:14px;line-height:1.6;
  margin:0 0 22px}
.obinhalt{margin-bottom:26px}
.obfuss{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-top:18px;border-top:1px solid var(--rand)}

/* Ortssuche */
.obfund{display:flex;align-items:center;gap:9px;padding:11px 13px;
  border-radius:8px;background:var(--erfolg-weich);
  border:1px solid var(--erfolg-rand);font-size:14px;margin-top:14px}
.obfund .hinweis{margin-left:auto}
.obwarnung{padding:11px 13px;border-radius:8px;margin-top:14px;
  background:var(--warnung-weich);border:1px solid var(--warnung-rand);
  color:var(--warnung);font-size:13.5px;line-height:1.5}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12.5px;padding:5px 11px;border-radius:20px;
  border:1px solid var(--rand-stark);background:var(--grund);
  color:var(--gedaempft-text)}
.chip.gewaehlt{background:var(--primaer-weich);border-color:var(--primaer-rand);
  color:var(--primaer);font-weight:600}

/* Berufsfelder */
.obfelder{display:grid;gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.obfeld{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  text-align:left;padding:12px 14px;border-radius:10px;
  border:1px solid var(--rand-stark);background:var(--grund);height:100%}
.obfeld b{font-size:13.5px;font-weight:650;color:var(--text)}
.obfeld span{font-size:12px;color:var(--gedaempft-text);line-height:1.45}
.obfeld.gewaehlt{background:var(--primaer-weich);border-color:var(--primaer);
  box-shadow:0 0 0 1px var(--primaer)}

/* Lebenslauf */
.oblade{padding:16px;border-radius:10px;border:1px dashed var(--rand-stark);
  background:var(--flaeche)}

/* Prüfen */
.obpruefen{display:grid;gap:1px;background:var(--rand);
  border:1px solid var(--rand);border-radius:10px;overflow:hidden}
.obzeile{display:flex;align-items:center;gap:12px;padding:11px 14px;
  background:var(--grund);font-size:13.5px}
.obzeile .was{width:130px;flex:none;color:var(--gedaempft-text)}
.obzeile .wert{flex:1;min-width:0;font-weight:550;overflow:hidden;
  text-overflow:ellipsis}
.obhinweis{margin-top:16px;padding:12px 14px;border-radius:8px;
  background:var(--warnung-weich);border:1px solid var(--warnung-rand);
  font-size:13px;line-height:1.55;color:var(--warnung)}

@media (max-width:640px){
  .obkarte{padding:22px 18px}
  .obschritte{width:100%;margin-left:0}
  .obzeile{flex-wrap:wrap}
  .obzeile .was{width:100%}
}

/* ── Einladungscodes ─────────────────────────────────────────────
   Der Code muss abschreibbar sein: feste Zeichenbreite, grosszügiger
   Abstand. Wer ihn am Telefon durchgibt, soll ihn ablesen können. */
.codeliste{display:grid;gap:1px;background:var(--rand);
  border:1px solid var(--rand);border-radius:8px;overflow:hidden}
.codezeile{display:flex;align-items:center;gap:9px;padding:9px 11px;
  background:var(--grund);flex-wrap:wrap}
.codewert{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:13.5px;font-weight:600;letter-spacing:.6px;
  background:var(--gedaempft);padding:4px 9px;border-radius:6px}