/* AlmostHired – Design-System des App-Bereichs.
   Uebernommen aus den in Phase 0 freigegebenen Renderings
   (mockups/_shared.css), erzeugt am 31.10.2026.

   ALLES haengt unter .ah-app. Das ist kein Schoenheitsfehler, sondern
   Absicht: ohne den Namensraum wuerde dieses Stylesheet h1, h2, h3 und a
   global umstylen und .grid ein gap verpassen - und .grid steht 17x in den
   Komponenten, sechsmal davon auf der Landing Page, die laut Auftrag
   unberuehrt bleibt.
   Die Variablen unter :root bleiben global, die schaden nirgends.

   Nicht von Hand aendern, ohne es in den Renderings nachzuziehen. */


/* AlmostHired – App-Bereich, Design-System aus der Landing Page abgeleitet.
   Werte 1:1 aus den Computed Styles von www.almosthired.co gezogen.
   Nur fuer die statischen Renderings in /mockups. Kein Produktionscode. */
:root {
  /* Flaechen */
  --bg:          #f8fafc;
  --surface:     #ffffff;
  --surface-alt: #f9fafb;
  --border:      #e5e7eb;
  --border-soft: #f3f4f6;

  /* Text */
  --ink:    #111827;
  --ink-2:  #374151;
  --muted:  #6b7280;
  --muted-2:#9ca3af;

  /* Primaer */
  --blue:      #2563eb;
  --blue-dark: #1d4ed8;
  --blue-50:   #eff6ff;
  --blue-100:  #dbeafe;
  --indigo:    #4338ca;

  /* Status */
  --green:    #16a34a;
  --green-bg: #dcfce7;
  --green-50: #f0fdf4;
  --amber:    #d97706;
  --amber-bg: #fef3c7;
  --red:      #dc2626;
  --red-bg:   #fef2f2;
  --violet:   #7c3aed;
  --violet-bg:#f5f3ff;

  /* Form */
  --r-card:  12px;
  --r-input: 8px;
  --r-pill:  9999px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

  --maxw: 1152px;
}
.ah-app * { box-sizing: border-box;
}
.ah-app, .ah-app {
  /* ---------- Abstandsskala ----------
     Vorher gab es keine: zwischen 0 und 24px lagen sieben Werte, jeder
     dort entstanden, wo jemand hingeschaut hat. Fuenf Stufen, mehr
     braucht die Anwendung nicht. Unter 860px sind drei davon kleiner,
     siehe am Ende der Datei. */
  --raum-seite:  32px;   /* oben, unter der Kopfzeile */
  --raum-block:  28px;   /* zwischen Bloecken */
  --raum-karte:  24px;   /* innen in einer Karte */
  --raum-aktion: 16px;   /* Text -> Knopf, Werkzeugleiste -> Liste */
  --raum-kopf:    7px;   /* Ueberschrift -> der Text darunter */

  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
.ah-app a { color: var(--blue); text-decoration: none;
}

/* ---------- Typografie ---------- */
.ah-app h1 { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.01em; margin: 0;
}
.ah-app h2 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0;
}
.ah-app h3 { font-size: 15px; line-height: 22px; font-weight: 600; margin: 0;
}
.ah-app .lead { font-size: 15px; color: var(--muted);
}
.ah-app .small { font-size: 13px; line-height: 20px;
}
.ah-app .tiny { font-size: 12px; line-height: 18px;
}
.ah-app .muted { color: var(--muted);
}
.ah-app .muted2 { color: var(--muted-2);
}
.ah-app .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-2);
}

/* ---------- Icons ---------- */
.ah-app .icon { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor;
        fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ah-app .icon-sm { width: 15px; height: 15px;
}
.ah-app .icon-lg { width: 22px; height: 22px;
}

/* ---------- Header ---------- */
.ah-app .appbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.ah-app .appbar-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 12px 24px;
  display: flex; align-items: center; gap: 24px;
}
.ah-app .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -.01em;
}
.ah-app .brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--blue); color: #fff;
  display: grid; place-items: center;
}

/* Hauptnavigation – vier Bereiche */
.ah-app .nav { display: flex; align-items: center; gap: 2px; margin-left: 8px;
}
.ah-app .nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; color: var(--muted);
}
.ah-app .nav a:hover { background: var(--surface-alt); color: var(--ink-2);
}
.ah-app .nav a.active { background: var(--blue-50); color: var(--blue);
}
.ah-app .appbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px;
}
.ah-app .avatar {
  width: 32px; height: 32px; border-radius: var(--r-pill);
  background: var(--blue-100); color: var(--blue-dark);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.ah-app .iconbtn {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); display: grid; place-items: center; cursor: pointer;
  position: relative;
}
.ah-app .iconbtn:hover { background: var(--surface-alt); color: var(--ink-2);
}
.ah-app .dot {
  position: absolute; top: 6px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); border: 2px solid var(--surface);
}

/* ---------- Layout ---------- */
.ah-app .page { max-width: var(--maxw); margin: 0 auto;
  padding: var(--raum-seite) 24px 72px;
}
.ah-app .page-head { display: flex; align-items: flex-end; gap: 16px;
  margin-bottom: var(--raum-block);
}
.ah-app .page-head .lead { margin: 4px 0 0;
}
.ah-app .page-head-actions { margin-left: auto; display: flex; gap: 8px;
}
.ah-app .grid { display: grid; gap: var(--raum-block);
}
.ah-app .g-2 { grid-template-columns: repeat(2, 1fr);
}
.ah-app .g-3 { grid-template-columns: repeat(3, 1fr);
}
.ah-app .g-4 { grid-template-columns: repeat(4, 1fr);
}
/* align-items: start, sonst zieht die hoehere Spalte die niedrigere
   auf ihre Hoehe. Am 02.11.2026 stand "Seit deinem letzten Besuch"
   mit drei Zeilen Inhalt in einer Karte, die so hoch war wie die
   Pipeline daneben - halb leer, und es sah aus wie ein Fehler. */
.ah-app .g-2-1 { grid-template-columns: minmax(0,2fr) minmax(0,1fr); align-items: start;
}
.ah-app .stack { display: flex; flex-direction: column; gap: var(--raum-block);
}
.ah-app .row { display: flex; align-items: center; gap: 10px;
}
.ah-app .row-top { display: flex; align-items: flex-start; gap: 10px;
}
.ah-app .spacer { flex: 1 1 auto;
}

/* ---------- Karten ---------- */
.ah-app .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--raum-karte);
}
.ah-app .card-tight { padding: 14px 16px;
}
.ah-app .card-head { display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--raum-aktion);
}
.ah-app .card-head h2, .ah-app .card-head h3 { margin: 0;
}
.ah-app .card-link { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--blue); display: flex; align-items: center; gap: 4px;
}
.ah-app .divider { height: 1px; background: var(--border); margin: 14px -20px;
}

/* ---------- Kennzahlen ---------- */
.ah-app .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px;
}
.ah-app .stat-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted);
}
.ah-app .stat-value { font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px;
}
.ah-app .stat-note { font-size: 12px; color: var(--muted-2);
}

/* ---------- Buttons ---------- */
.ah-app .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; line-height: 20px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  font-family: inherit;
}
.ah-app .btn-primary { background: var(--blue); color: #fff;
}
.ah-app .btn-primary:hover { background: var(--blue-dark);
}
.ah-app .btn-ghost { background: var(--surface); color: var(--blue); border-color: var(--blue);
}
.ah-app .btn-ghost:hover { background: var(--blue-50);
}
.ah-app .btn-quiet { background: var(--surface); color: var(--ink-2); border-color: var(--border);
}
.ah-app .btn-quiet:hover { background: var(--surface-alt);
}
.ah-app .btn-lg { padding: 14px 32px; font-size: 16px; line-height: 24px; box-shadow: var(--shadow-lg);
}
.ah-app .btn-sm { padding: 7px 14px; font-size: 13px; line-height: 18px;
}
.ah-app .btn-block { width: 100%;
}
/* Ein gesperrter Knopf sieht gesperrt aus - vorher gab es dafuer
   gar keine Regel, und je nach Art sah er aus wie ein normaler
   Knopf oder wie Text. Die Ausnahme .knopf-fertig setzt opacity
   selbst auf 1; sie ist spezifischer und bleibt gruen. */
.ah-app .btn:disabled { opacity: .55; cursor: default; }

/* Ein Datum bricht nicht mitten im Datum um. Marcos Bild vom
   09.11.2026 bei 375 px: "Deine Suche in Winterthur · 7." /
   "Nov.". */
.ah-app .datum-ganz { white-space: nowrap; }

/* Der zweite Knopf im Anschreiben-Fenster traegt einen ganzen Satz:
   "CV-Tipps erstellen (dein Anschreiben bleibt unveraendert)". .btn
   setzt white-space: nowrap, also kann er nicht schmaler werden als
   dieser Satz - bei 375 px lief er rechts aus dem Bild (gemessen am
   09.11.2026, nachdem er ueberhaupt erst wie ein Knopf aussah).
   Auf dem Telefon darf er umbrechen und die ganze Breite nehmen. */
@media (max-width: 480px) {
  /* Seit Marcos Abnahme (10.11.2026) steht dieser Knopf nur noch
     in der Tipps-Karte: .tipps-hier. .tipps-allein unter dem
     Anschreiben gibt es nicht mehr - zweimal derselbe Knopf. */
  .ah-app .tipps-hier { white-space: normal; width: 100%; }
}

/* ---------- Formular ---------- */
.ah-app .field { display: flex; flex-direction: column; gap: 6px;
}
.ah-app .label { font-size: 12px; font-weight: 600; color: var(--muted);
}
.ah-app .input, .ah-app .select {
  appearance: none; width: 100%; font-family: inherit;
  padding: 10px 12px; font-size: 14px; line-height: 20px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-input);
}
.ah-app .input::placeholder { color: var(--muted-2);
}
.ah-app .input:focus, .ah-app .select:focus { outline: 2px solid var(--blue-100); border-color: var(--blue);
}
.ah-app .select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  padding-right: 32px;
}
.ah-app .input-icon { position: relative;
}
.ah-app .input-icon .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-2);
}
.ah-app .input-icon .input { padding-left: 36px;
}
.ah-app textarea.input { resize: vertical; min-height: 72px; line-height: 21px;
}

/* Umschalter */
.ah-app .seg { display: inline-flex; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px;
}
.ah-app .seg button {
  border: 0; background: transparent; font-family: inherit;
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.ah-app .seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
}

/* Schalter */
.ah-app .switch { width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--border); position: relative; flex: 0 0 auto;
}
.ah-app .switch::after { content:''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
}
.ah-app .switch.on { background: var(--blue);
}
.ah-app .switch.on::after { left: 19px;
}

/* ---------- Chips, Badges, Pills ---------- */
.ah-app .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.ah-app .chip:hover { background: var(--surface-alt);
}
.ah-app .chip.on { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue);
}
.ah-app .chip .icon-sm { color: var(--muted-2);
}
.ah-app .chip.on .icon-sm { color: var(--blue);
}
.ah-app .badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 18px;
}
.ah-app .b-blue { background: var(--blue-50);   color: var(--blue);
}
.ah-app .b-green { background: var(--green-bg);  color: #15803d;
}
.ah-app .b-amber { background: var(--amber-bg);  color: #b45309;
}
.ah-app .b-red { background: var(--red-bg);    color: var(--red);
}
.ah-app .b-violet { background: var(--violet-bg); color: var(--violet);
}
.ah-app .b-grey { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border);
}
.ah-app .tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 600;
}
.ah-app .tag-hit { background: var(--green-50); color: var(--green);
}
.ah-app .tag-miss { background: var(--red-bg);   color: var(--red);
}

/* ---------- Score ---------- */

/* Ein Score pro Job. Keine zweite Zahl daneben. */
.ah-app .score {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  font-size: 14px; font-weight: 700;
}
.ah-app .score-lg { width: 64px; height: 64px; font-size: 19px;
}
.ah-app .score-sm { width: 36px; height: 36px; font-size: 12px;
}
.ah-app .s-strong { background: var(--green-bg); color: #15803d;
}
.ah-app .s-good { background: var(--amber-bg); color: #b45309;
}
.ah-app .s-weak { background: var(--surface-alt); color: var(--muted);
}

/* Aufschlüsselung im Detail-Panel */
.ah-app .bar { height: 6px; border-radius: var(--r-pill); background: var(--border-soft); overflow: hidden;
}
.ah-app .bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--blue);
}
.ah-app .bar i.ok { background: var(--green);
}
.ah-app .bar i.mid { background: var(--amber);
}
.ah-app .bar i.low { background: var(--muted-2);
}

/* Aufschlüsselung: Wert, Gewicht und Beitrag, damit sich der Gesamtscore nachrechnen lässt.
   Die Prozentspalte ist breit genug für "100 %" und bricht nicht um. */
.ah-app .breakdown { display: flex; flex-direction: column; gap: 12px;
}
.ah-app .breakdown-head, .ah-app .breakdown-row, .ah-app .breakdown-total {
  display: grid;
  grid-template-columns: 118px 1fr 56px 64px;
  align-items: center; gap: 12px;
}
.ah-app .breakdown-head {
  font-size: 11px; font-weight: 600; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 11px;
}
.ah-app .breakdown-row { font-size: 13px;
}
.ah-app .breakdown-row .crit { line-height: 16px;
}
.ah-app .breakdown-row .crit b { display: block; font-weight: 600;
}
.ah-app .breakdown-row .crit i { display: block; font-style: normal; font-size: 11px; color: var(--muted-2);
}
.ah-app .val, .ah-app .pts { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ah-app .val { font-weight: 600;
}
.ah-app .pts { font-size: 12px; color: var(--muted);
}
.ah-app .breakdown-total {
  margin-top: 13px; padding-top: 13px;
  border-top: 1px solid var(--border); font-size: 13px;
}
.ah-app .breakdown-total .val, .ah-app .breakdown-total .pts { font-weight: 700; color: var(--ink); font-size: 13px;
}

/* ---------- Firmenlogo: entfallen ----------
   Das Viereck mit den Anfangsbuchstaben der Firma ist am 02.11.2026
   aus der Oberflaeche verschwunden - am Treffer in der Suche und auf
   der Bewerbungskarte. Es sah wie ein Logo aus und war keines. Die
   Regeln .logo / .logo-sm sind damit ohne Verwendung und entfernt;
   echte Firmenlogos (company_logo) hingen nie daran. */

/* ---------- Jobliste ---------- */
.ah-app .joblist { display: flex; flex-direction: column; gap: 8px;
}
.ah-app .jobcard {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--r-card); padding: 14px 16px; cursor: pointer;
}
.ah-app .jobcard:hover { border-left-color: var(--blue); box-shadow: var(--shadow-md);
}
.ah-app .jobcard.selected { border-left-color: var(--blue); background: #fbfdff; box-shadow: 0 4px 12px rgba(37,99,235,.14);
}
.ah-app .jobcard .title { font-size: 15px; font-weight: 700; line-height: 21px;
}
.ah-app .jobmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--muted); margin-top: 5px;
}
.ah-app .jobmeta span { display: inline-flex; align-items: center; gap: 5px;
}
.ah-app .jobmeta .icon-sm { color: var(--muted-2);
}

/* ---------- Detail-Panel ---------- */
.ah-app .split { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start;
}
.ah-app .panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden;
}
.ah-app .panel-head { padding: 20px; border-bottom: 1px solid var(--border);
}
.ah-app .panel-body { padding: 20px; display: flex; flex-direction: column; gap: 20px;
}
.ah-app .panel-section > h3 { margin-bottom: 10px;
}
.ah-app .panel-actions {
  /* Umbrechen, sonst laufen drei Knoepfe auf dem Telefon aus dem Bild. */
  display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px;
  border-top: 1px solid var(--border); background: var(--surface-alt);
}

/* ---------- Kanban ---------- */
.ah-app .kanban { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; align-items: start;
}
.ah-app .col { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-card); padding: 10px;
}
.ah-app .col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px;
}
.ah-app .col-head .name { font-size: 13px; font-weight: 700;
}
.ah-app .col-head .count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--muted);
  display: grid; place-items: center;
}
.ah-app .col-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
.ah-app .col-cards { display: flex; flex-direction: column; gap: 8px;
}
.ah-app .kcard { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; cursor: grab;
}
.ah-app .kcard:hover { box-shadow: var(--shadow-md);
}
/* Zwei Zeilen, nicht fuenf. Die Spalte ist 221 px breit (1152 px
   Seite, fuenf Spalten, 12 px Abstand), fuer den Titel bleiben rund
   176 px - "DevOps & Infrastructure Automation Specialist - EU
   Institution Luxembourg" lief darin ueber fuenf Zeilen und schob
   die Karte auseinander. Der ganze Titel steht im title-Attribut
   und im Detail. */
.ah-app .kcard .title { font-size: 13px; font-weight: 700; line-height: 19px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.ah-app .kcard .sub { font-size: 12px; color: var(--muted); margin-top: 2px;
}
.ah-app .kcard-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 11px; color: var(--muted-2);
}
.ah-app .kcard-note {
  margin-top: 9px; padding: 7px 9px; border-radius: 7px;
  background: var(--surface-alt); font-size: 12px; line-height: 17px; color: var(--ink-2);
}
.ah-app .col-add {
  width: 100%; margin-top: 8px; padding: 9px; border-radius: 9px;
  border: 1px dashed var(--border); background: transparent;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted-2); cursor: pointer;
}
.ah-app .col-add:hover { border-color: var(--blue); color: var(--blue); background: var(--surface);
}

/* ---------- Fortschritt beim Laden ---------- */
.ah-app .progress { height: 6px; border-radius: var(--r-pill); background: var(--border-soft); overflow: hidden;
}
.ah-app .progress i { display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill);
}

/* ---------- Free-Ansicht: gesperrte Treffer ---------- */

/* Unscharf, aber in der Liste sichtbar. Kein Sperrbildschirm. */
.ah-app .blurred { filter: blur(5px); user-select: none; pointer-events: none;
}
.ah-app .blurred-sm { filter: blur(3.5px); user-select: none; pointer-events: none;
}
.ah-app .jobcard.locked { background: var(--surface-alt);
}
.ah-app .jobcard.locked:hover { border-left-color: var(--amber);
}
.ah-app .jobcard.locked.selected { border-left-color: var(--amber); background: #fffdf7; box-shadow: 0 4px 12px rgba(217,119,6,.14);
}
.ah-app .lockmark {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--amber-bg); color: #b45309; display: grid; place-items: center;
}
.ah-app .lockmark-lg { width: 40px; height: 40px;
}

/* Upgrade-Banner mitten in der Liste */
.ah-app .upsell {
  background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-card);
  padding: 16px 18px;
}
.ah-app .upsell h3 { color: #1e3a8a;
}
.ah-app .upsell p { color: #1e40af; margin: 4px 0 0;
}

/* Gesperrter Bereich im Detail-Panel */
.ah-app .locked-area {
  position: relative; border: 1px dashed var(--border);
  border-radius: 10px; padding: 16px; background: var(--surface-alt);
}
.ah-app .locked-area .veil {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; flex-direction: column;
  gap: 8px; text-align: center; padding: 16px;
}

/* ---------- Pass-Karten (Upgrade) ---------- */
.ah-app .pass { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px;
}
.ah-app .pass.featured { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50);
}
.ah-app .pass-price { font-size: 36px; line-height: 44px; font-weight: 800; letter-spacing: -.02em;
}
.ah-app .pass-price small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0;
}
.ah-app .pass-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
}
.ah-app .pass-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px;
}
.ah-app .pass-list .icon { color: var(--green); margin-top: 1px;
}
.ah-app .pass-list li.off { color: var(--muted-2);
}
.ah-app .pass-list li.off .icon { color: var(--muted-2);
}

/* ---------- Leerer Zustand / Hinweis ---------- */
.ah-app .notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--blue-50); border: 1px solid var(--blue-100);
  font-size: 13px; line-height: 19px; color: #1e40af;
}
.ah-app .notice .icon { color: var(--blue);
}
/* ---------- Unter 1024 px: Muster wie auf dem Handy ---------- Liste und Detail stehen nacheinander, kein Panel mehr daneben. Der Umbruch gilt fuer die Desktop-Renderings; die Mobil-Renderings haben ihren eigenen 390-px-Rahmen und sind davon nicht betroffen. */
@media (max-width: 1023px) {
  /* g-2 bleibt hier zweispaltig: zwei Kacheln passen bei 985 px
     gut nebeneinander. Sie bricht erst in der 640er-Abfrage um. */
  .ah-app .g-2-1, .ah-app .g-3, .ah-app .g-4 { grid-template-columns: 1fr;
  }
  .ah-app .appbar-inner { gap: 12px; padding: 12px 16px;
  }
  .ah-app .nav a { padding: 8px 11px; font-size: 13px;
  }
  .ah-app .page { padding: 22px 16px 72px;
  }
  .ah-app .divider { margin-left: -16px; margin-right: -16px;
  }
  .ah-app .page-head { flex-direction: column; align-items: stretch;
  }
  .ah-app .page-head-actions { margin-left: 0; flex-wrap: wrap;
  }
}
@media (max-width: 720px) {
  .ah-app .breakdown-head, .ah-app .breakdown-row, .ah-app .breakdown-total { grid-template-columns: 96px 1fr 52px 50px; gap: 9px;
  }
  .ah-app .brand span:not(.brand-mark) { display: none;
  }
}

/* Untere Leiste statt Kopf-Navigation */
/* `fixed`, nicht `sticky`. Klebrig heftet nur, solange etwas zu
   scrollen da ist: bei kurzem Inhalt - dem Free-Dashboard ohne Suche
   zum Beispiel - stand die Leiste einfach dort, wo der Inhalt aufhoerte,
   und schwebte 62 px ueber dem unteren Rand. */
.ah-app .tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  /* Fuenf Spalten seit dem 04.11.2026: die Toolbox ist der fuenfte
     Reiter. Die Zahl steht hier UND in REITER (dashboard.js) - wer
     einen Reiter dazunimmt, aendert beides, sonst sitzt der letzte
     ausserhalb. */
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
}
.ah-app .tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 2px; border-radius: 10px;
  font-size: 11px; font-weight: 600; color: var(--muted-2);
}
.ah-app .tabbar a.active { color: var(--blue);
}
/* Im Mockup hingen diese Regeln am 390px-Telefonrahmen (.m).
   Im echten Frontend gibt es den nicht - daraus wird eine Media Query. */
@media (max-width: 640px) {
  .ah-app .appbar-inner { padding: 11px 16px; gap: 10px;
  }
  .ah-app .page { padding: 18px 16px 96px;
  }
  .ah-app .page-head { flex-direction: column; align-items: stretch; gap: 10px;
  }
  .ah-app .page-head-actions { margin-left: 0;
  }
  .ah-app h1 { font-size: 23px; line-height: 30px;
  }
  .ah-app .g-2, .ah-app .g-3, .ah-app .g-4, .ah-app .g-2-1 { grid-template-columns: 1fr;
  }
  .ah-app .card { padding: 15px 16px;
  }
  .ah-app .divider { margin-left: -16px; margin-right: -16px;
  }
  .ah-app .breakdown-head, .ah-app .breakdown-row, .ah-app .breakdown-total { grid-template-columns: 86px 1fr 48px 46px; gap: 9px;
  }
  .ah-app .breakdown-row { font-size: 12px;
  }
  .ah-app .pts { font-size: 11px;
  }
  .ah-app .breakdown-total, .ah-app .breakdown-total .val, .ah-app .breakdown-total .pts { font-size: 12px;
  }
}

/* ------------------------------------------------------------------
   Check Job im Bereich Stellen (Phase 1, 31.10.2026)

   Steht als kompakte Zeile ueber der Suchkarte, nicht als eigene Karte.
   Die Regeln liegen hier statt in Tailwind-Klassen, weil tailwind.css
   gepurgt ist: shrink-0, sm:flex-row und basis-0 sind dort nicht
   enthalten und wuerden still nichts tun.
   ------------------------------------------------------------------ */
.ah-app .ah-checkjob-wrap {
  margin-bottom: 16px;
}

.ah-app .ah-checkjob {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* min-width:0 ist der Punkt: ohne das schrumpft ein flex-Element nie
   unter seine Inhaltsbreite, und der Knopf wurde auf 390px rechts
   abgeschnitten. */
.ah-app .ah-checkjob > input {
  flex: 1 1 auto;
  min-width: 0;
}

.ah-app .ah-checkjob > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ah-app .ah-checkjob-sites {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 640px) {
  /* Auf dem Telefon reicht die Breite fuer beides nebeneinander nicht. */
  .ah-app .ah-checkjob {
    flex-direction: column;
    align-items: stretch;
  }
  .ah-app .ah-checkjob > button {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
   Qualitative Aufschluesselung im Detail-Panel (Phase 2)

   Loest die Prozenttabelle (.breakdown) ab: das Backend liefert keine
   gewichteten Teilwerte, eine Beitragstabelle waere erfunden. Der
   Gesamtscore steht im Kopf des Panels.
   ------------------------------------------------------------------ */
.ah-app .fit { display: flex; flex-direction: column; gap: 11px; }

.ah-app .fit-row {
  display: grid;
  grid-template-columns: 17px 96px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
}
.ah-app .fit-row .icon { margin-top: 2px; }
.ah-app .fit-row b { font-weight: 600; color: var(--ink); line-height: 18px; }
.ah-app .fit-row .txt { color: var(--ink-2); line-height: 18px; }

.ah-app .fit-ok   { color: var(--green); }
.ah-app .fit-part { color: var(--amber); }
.ah-app .fit-no   { color: var(--muted-2); }

/* Werkzeugleiste ueber der Trefferliste */
.ah-app .results-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin-bottom: var(--raum-aktion);
}
.ah-app .results-head h2 { font-size: 20px; font-weight: 800; margin: 0; }

.ah-app .results-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  /* 16, nicht 28: die Leiste steuert die Liste und gehoert zu ihr. */
  margin-bottom: var(--raum-aktion);
}

.ah-app .hint-select {
  padding: 40px 20px; text-align: center; color: var(--muted);
  font-size: 14px;
}

@media (max-width: 1023px) {
  .ah-app .fit-row { grid-template-columns: 17px 86px 1fr; gap: 9px; }
}

@media (max-width: 640px) {
  /* Auf dem Telefon steht die Bezeichnung ueber dem Text. */
  .ah-app .fit-row { grid-template-columns: 17px 1fr; row-gap: 2px; }
  .ah-app .fit-row b,
  .ah-app .fit-row .txt { grid-column: 2; }
}

/* Fortschritt der Vertiefung ueber der Liste (Phase 2, Schritt 3) */
.ah-app .results-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 12px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-input);
  color: #1e3a8a;
}

/* ---------- Pipeline: Bedienung ---------- */
/* Die Kanban-Grundlage steht weiter oben, aus den Renderings. Hier
   nur, was die Renderings nicht zeigen konnten: ziehen, Menue,
   Notizfeld. */
.ah-app .kcard-busy { opacity: .55; pointer-events: none; }
.ah-app .kcard-off { opacity: .72; }
.ah-app .kcard .title { cursor: pointer; }
.ah-app .kcard .title:hover { color: var(--blue); }
.ah-app .col-ziel { background: var(--blue-50); border-color: var(--blue-100); }
.ah-app .col-leer { padding: 18px 10px; text-align: center; color: var(--muted-2); }
.ah-app .kcard-menu {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px;
  border: none; background: transparent; color: var(--muted-2);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.ah-app .kcard-menu:hover { background: var(--border-soft); color: var(--ink); }
.ah-app .kcard-ziele {
  margin-top: 9px; padding: 7px; border-radius: 8px;
  background: var(--surface-alt); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.ah-app .kcard-ziele > .tiny { padding: 2px 6px 4px; }
.ah-app .kcard-ziele button {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 7px; border: none; border-radius: 6px; background: transparent;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2);
  text-align: left; cursor: pointer;
}
.ah-app .kcard-ziele button:hover { background: var(--surface); }
.ah-app .kcard-ziele button.gefahr { color: var(--red); }
.ah-app .kcard-notiz { margin-top: 9px; }
.ah-app .kcard-notiz textarea {
  width: 100%; padding: 7px 9px; border-radius: 7px; resize: vertical;
  border: 1px solid var(--border); background: var(--surface);
  font-family: inherit; font-size: 12px; line-height: 17px; color: var(--ink-2);
}
.ah-app .kcard-notiz-foot { display: flex; gap: 6px; margin-top: 6px; }
.ah-app .btn-xs { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.ah-app .pipe-liste { display: flex; flex-direction: column; gap: 18px; }
.ah-app .pipe-gruppe .col-cards { gap: 8px; }

/* Auf Beruehrungsgeraeten ist der Menueknopf das einzige Mittel, eine
   Karte zu verschieben - HTML5-Drag loest dort nicht aus. 24 px sind
   dafuer zu klein, darum hier groesser. */
@media (pointer: coarse) {
  .ah-app .kcard-menu { width: 36px; height: 36px; font-size: 18px; }
  .ah-app .kcard-ziele button { padding: 9px 8px; }
}

/* ---------- Praeferenzen als Formular ---------- */
.ah-app .praef-felder {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px;
}
.ah-app .praef-foot {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
}
@media (max-width: 640px) {
  .ah-app .praef-felder { grid-template-columns: 1fr; }
  .ah-app .praef-foot { flex-direction: column-reverse; }
  .ah-app .praef-foot .btn { width: 100%; }
}

/* ---------- Dashboard ---------- */
.ah-app .dash-spalten {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px;
}
.ah-app .dash-spalte {
  text-align: center; cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: var(--surface);
}
.ah-app .dash-spalte:hover { border-color: var(--blue); }
@media (max-width: 640px) {
  .ah-app .dash-spalten { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Wiedervorlage auf der Karte ---------- */
.ah-app .kcard-datum { margin-top: 9px; display: flex; gap: 6px; align-items: center; }
.ah-app .kcard-datum input {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface);
  font-family: inherit; font-size: 12px; color: var(--ink-2);
}

/* ---------- Profil: Abschnittskoepfe der CV-Anzeige ---------- */
.ah-app .cv-kopf { padding: 0; margin-bottom: 14px; border: 0; }
.ah-app .cv-kopf h3 { font-size: 13px; letter-spacing: .02em; }
.ah-app .cv-kopf .icon { flex: 0 0 auto; }

/* ---------- Kategorie-Leiste nur fuer Abgemeldete ---------- */
/* Die einzige Regel ausserhalb von .ah-app, und das mit Grund: das
   Element liegt ausserhalb #root, React kommt nicht daran. Fuer
   Suchmaschinen und abgemeldete Besucher bleibt es sichtbar. */
body.ah-angemeldet #ah-kategorien { display: none; }

/* ---------- Knopf mit Icon: eine Zeile ---------- */
/* Tailwinds Preflight setzt svg { display: block }. Ohne flex bricht
   die Zeile hinter dem Icon um. */
.ah-app .btn-zeile {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

/* ---------- Trefferansicht: zwei eigene Scrollbereiche ---------- */
/* Ab 860 px stehen Liste und Detail nebeneinander und scrollen je
   fuer sich, beide genau fensterhoch. Das Panel bleibt dadurch
   sichtbar, egal wie weit die Liste gescrollt ist. */
@media (min-width: 860px) {
  .ah-app .split {
    position: sticky; top: 84px;
    height: calc(100vh - 100px);
    align-items: stretch;
  }
  .ah-app .split > .joblist {
    overflow-y: auto; padding-right: 4px; min-height: 0;
  }
  .ah-app .panel {
    height: 100%; display: flex; flex-direction: column; min-height: 0;
  }
  .ah-app .panel-head,
  .ah-app .panel-actions { flex: 0 0 auto; }
  .ah-app .panel-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
  .ah-app .hint-select { margin: auto; }
}

/* Darunter: eine Spalte, und das Detail wird zum Vollbild. Die Liste
   bleibt dahinter stehen - deshalb ist ihre Scrollposition nach dem
   Zurueck noch da, ohne dass sie jemand merken muss. */
@media (max-width: 859px) {
  .ah-app .split { grid-template-columns: 1fr; }
  .ah-app .panel.vollbild {
    position: fixed; inset: 0; z-index: 70;
    border: 0; border-radius: 0;
    display: flex; flex-direction: column;
  }
  .ah-app .panel.vollbild .panel-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
  .ah-app .panel.vollbild .panel-head,
  .ah-app .panel.vollbild .panel-actions { flex: 0 0 auto; }
  .ah-app .zurueck-leiste { display: flex; }
}
body.ah-panel-offen { overflow: hidden; }

.ah-app .zurueck-leiste {
  /* display steht weiter unten in zwei Media Queries. Hier keines
     setzen: die Basisregel stand frueher NACH der Query, die sie
     einschalten sollte, und hat sie damit immer wieder ausgeblendet. */
  align-items: center; gap: 7px;
  width: 100%; padding: 12px 16px; border: 0;
  border-bottom: 1px solid var(--border); background: var(--surface-alt);
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--blue);
  cursor: pointer;
}

/* ---------- Dashboard: beste Treffer ---------- */
.ah-app .dash-treffer { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ah-app .dash-treffer-zeile {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font-family: inherit; cursor: pointer; text-align: left;
}
.ah-app .dash-treffer-zeile:hover { border-color: var(--blue); }
.ah-app .dash-treffer-zeile .title { display: block; font-size: 13px; font-weight: 700; }
.ah-app .dash-treffer-zeile .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ---------- Kompakte Suchleiste ---------- */
.ah-app .suchleiste {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 10px 12px;
  /* Der Abstand gehoert an die Leiste, nicht an das, was zufaellig
     darunter steht. 16 und nicht 28: im Dashboard folgt die Zeile
     "Sucht in ...", und die sagt, womit die Leiste sucht - sie
     gehoert nach oben. Die Karte darunter bekommt die vollen 28. */
  margin-bottom: var(--raum-aktion);
}
.ah-app .suchleiste.klebrig {
  position: sticky; top: 0; z-index: 30;
  box-shadow: var(--shadow-sm);
}
.ah-app .sl-zeile {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, .9fr) auto;
  gap: 8px; align-items: center;
}
.ah-app .sl-feld {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 0 10px; height: 42px;
  border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface);
}
.ah-app .sl-feld.sl-fehler { border-color: var(--red); background: var(--red-bg); }
.ah-app .sl-feld select,
.ah-app .sl-feld .sl-eingabe {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--ink); outline: none;
}
/* Das Stadtfeld auf der ganzen Breite klickbar.
   CityAutocomplete legt einen div.relative um das Eingabefeld - die
   Liste der Vorschlaege haengt daran. Das `flex: 1` oben traf aber
   nur das Feld, nicht diese Huelle: sie war so breit wie ihr
   Inhalt, und rechts daneben lag die Flaeche von .sl-feld. Ein
   Klick dorthin traf nichts, man musste den Text treffen. */
.ah-app .sl-feld > .relative {
  flex: 1; min-width: 0; display: flex; height: 100%;
}
/* Und das Feld IN der Huelle. Ueber die Klasse ging es nicht: die
   Suchleiste des Dashboards gab gar keine mit (gemessen am
   03.11.2026, 176 px in einer Zelle von 406). Eine Regel, die an
   einer Klasse haengt, die jemand vergessen kann, ist keine. */
.ah-app .sl-feld > .relative > input {
  flex: 1; width: 100%; min-width: 0; height: 100%;
  border: 0; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--ink); outline: none;
}
.ah-app .sl-knopf {
  height: 42px; min-height: 0; padding: 0 18px;
  line-height: 1; white-space: nowrap;
}
.ah-app .sl-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 8px;
}
.ah-app .sl-link {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; padding: 0;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--blue); cursor: pointer;
}
.ah-app .sl-branchen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ah-app .sl-branchen .chip {
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface-alt); font-family: inherit; font-size: 12px;
  font-weight: 600; color: var(--muted); cursor: pointer;
}
.ah-app .sl-branchen .chip-an { background: var(--blue); border-color: var(--blue); color: #fff; }
.ah-app .sl-hinweis {
  display: flex; align-items: center; gap: 5px;
  margin-top: 7px; font-size: 12px; color: var(--muted-2);
}
.ah-app .sl-hinweis-fehler { color: var(--red); }

@media (max-width: 859px) {
  /* Eine Spalte: so stehen Land, Stadt und Umkreis in der Reihenfolge,
     in der man sie ausfuellt, und "30 km (Standard)" wird nicht mehr
     mitten im Wort abgeschnitten. */
  .ah-app .sl-zeile { grid-template-columns: 1fr; }
  .ah-app .sl-knopf { width: 100%; }
}

/* ---------- Mobil: Navigation unten ---------- */
/* Hier standen Regeln fuer `.reiterleiste` - eine Klasse, die im
   Rendering nirgends vorkommt. Sie versprachen `position: fixed` am
   unteren Rand, und weil sie auf nichts zeigten, blieb die echte
   Leiste (`.tabbar`) klebrig. Entfernt am 01.11.2026; was sie
   bewirken sollten, steht jetzt an `.tabbar` selbst. */
@media (max-width: 859px) {
  /* Auf dem Telefon ist Platz das knappste Gut: drei der fuenf Stufen
     werden kleiner, die beiden kleinen bleiben, wie sie sind. */
  .ah-app {
    --raum-seite: 24px;
    --raum-block: 22px;
    --raum-karte: 18px;
  }
  /* Platz, damit die feste Leiste nichts verdeckt: ihre Hoehe liegt
     bei rund 62 px, der sichere Bereich des Geraets kommt dazu. */
  .ah-app { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* Das Vollbild des Detail-Panels liegt darueber, sonst waere der
     Zurueck-Knopf teilweise verdeckt. */
  .ah-app .panel.vollbild { z-index: 70; }
}

/* ---------- Pipeline: fuenf Spalten, solange sie passen ---------- */
/* Ab 860 px stehen alle fuenf nebeneinander - enger, aber ohne
   Querscrollen. Darunter wird waagerecht gescrollt. */
@media (min-width: 860px) {
  .ah-app .kanban { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
  .ah-app .col { padding: 8px; }
  .ah-app .kcard { padding: 9px 10px; }
  .ah-app .kcard .title { font-size: 12.5px; line-height: 17px; }
}
@media (max-width: 859px) {
  .ah-app .kanban {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 262px;
    overflow-x: auto; padding-bottom: 6px;
  }
}
.ah-app .kcard { cursor: pointer; }
.ah-app .kcard:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Dashboard: anklickbare Kachel ---------- */
.ah-app .stat-klick {
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
}
.ah-app .stat-klick:hover { border-color: var(--blue); }

/* ---------- Bewerbungen: Detail-Ansicht als Overlay ---------- */
/* Dieselbe Bauweise wie das Panel unter Stellen, damit beide Ansichten
   sich gleich anfuehlen - nur eben ueber dem Brett statt daneben. */
/* Haengt per Portal am body, also ausserhalb von .ah-app. Deshalb
   ohne Vorfahren - und das Element selbst traegt ah-app, damit die
   Regeln fuer seinen Inhalt greifen. */
/* ---------- WAS UEBEREINANDER LIEGT ----------
   Die ganze Leiter, an einer Stelle. Am 07.11.2026 stand die
   Bewerbungshilfe bei 60 und das Trefferfenster am Handy bei 70:
   das Fenster ging auf und verschwand dahinter. Zwei Zahlen in
   zwei Dateien, und niemand sah sie nebeneinander.

     30  .tabbar               die Leiste am unteren Rand
     40  .appbar, .menue-hinter
     50  das Menue darunter
     70  .panel.vollbild       das Trefferfenster, nur unter 860 px
     80  .detail-hinter        das Detailfenster
     90  .vorbereiten-huelle   die Bewerbungshilfe (shared.js)

   Wer etwas Neues darueberlegt, traegt es hier ein. */
.detail-hinter {
  position: fixed; inset: 0; z-index: 80;
  padding-bottom: 24px;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.ah-app .panel-modal {
  width: min(680px, 100%); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ah-app .panel-modal .panel-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.ah-app .panel-modal .panel-head,
.ah-app .panel-modal .panel-actions { flex: 0 0 auto; }
.ah-app .panel-zu {
  flex: 0 0 auto; width: 32px; height: 32px; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.ah-app .panel-zu:hover { border-color: var(--blue); color: var(--blue); }

.ah-app .status-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-app .status-wahl .chip {
  padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface-alt); font-family: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--muted); cursor: pointer;
}
.ah-app .status-wahl .chip-an { background: var(--blue); border-color: var(--blue); color: #fff; }
.ah-app .status-wahl .chip:disabled { opacity: .55; cursor: default; }

.ah-app .notiz-feld {
  width: 100%; padding: 9px 11px; font-family: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-input); resize: vertical;
}
.ah-app .notiz-feld:focus { outline: none; border-color: var(--blue); }

.ah-app .skill-wolke { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-app .skill-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600;
}
.ah-app .skill-ja { background: var(--green-bg); color: var(--green); }
.ah-app .skill-nein { background: var(--surface-alt); color: var(--muted); }

.ah-app .btn-gefahr { color: var(--red); }
.ah-app .btn-gefahr:hover { border-color: var(--red); background: var(--red-bg); }

@media (max-width: 859px) {
  /* Auf dem Telefon fuellt die Ansicht den Bildschirm, wie das
     Vollbild-Panel unter Stellen. */
  .detail-hinter { padding: 0; align-items: stretch; }
  .ah-app .panel-modal { width: 100%; max-height: none; border-radius: 0; border: 0; }
}

/* ---------- Ladeplatzhalter ---------- */
/* Statt eines springenden Layouts: graue Flaechen in der Groesse des
   spaeteren Inhalts. */
.ah-app .skelett {
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--border-soft) 37%, var(--surface-alt) 63%);
  background-size: 400% 100%;
  animation: ah-schimmer 1.3s ease-in-out infinite;
  border-radius: 7px;
}
@keyframes ah-schimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ah-app .skelett { animation: none; }
}
.ah-app .skelett-zeile { height: 13px; margin-bottom: 8px; }
.ah-app .skelett-kachel { height: 92px; }

/* ---------- Profil ---------- */
/* Uebernommen aus dem abgenommenen Rendering (rendering-profil.html). */
.ah-app .voll { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ah-app .voll-balken { flex: 1 1 200px; height: 8px; border-radius: 99px; background: var(--surface-alt); overflow: hidden; }
.ah-app .voll-fuell { height: 100%; background: var(--blue); border-radius: 99px; transition: width .3s ease; }
.ah-app .voll-zahl { font-size: 22px; font-weight: 700; }
.ah-app .voll-fehlt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.ah-app .voll-fehlt .sl-link { font-size: 12.5px; }

.ah-app .pkopf { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
/* .pavatar ist am 03.11.2026 entfallen - siehe dashboard.js */
.ah-app .pkopf-text { flex: 1 1 200px; min-width: 0; }
.ah-app .pkopf-text h2 { margin: 0; font-size: 20px; line-height: 27px; }
.ah-app .pkopf-text .rolle { font-size: 14px; color: var(--muted); margin-top: 2px; }
.ah-app .pdatei {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--r-input); background: var(--surface-alt);
  font-size: 13px; color: var(--muted);
}
.ah-app .pdatei .btn { margin-left: auto; }

.ah-app .abschnitt + .abschnitt { margin-top: var(--raum-block); }
.ah-app .abschnitt .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ah-app .abschnitt .card-head h2 { font-size: 15px; margin: 0; }

.ah-app .eintrag {
  display: flex; gap: 12px; align-items: flex-start;
  /* 11px war zu eng: Titel, Unterzeile und der naechste Eintrag
     liefen optisch ineinander. */
  padding: 14px 0; border-top: 1px solid var(--border-soft);
}
.ah-app .eintrag:first-of-type { border-top: 0; }
.ah-app .eintrag-text { flex: 1 1 auto; min-width: 0; }
/* Beide sind <span>, also inline: ohne display:block stand
   "FinanzbuchhalterinMittelstaendischer Maschinenbauer - 2019-01"
   in einer Zeile aneinandergeklebt. Und weil die Zeile dann nicht
   umbrach, trieb sie bei 375 px die ganze Profilspalte auf 434 px -
   die Karten liefen rechts aus dem Bild. */
.ah-app .eintrag-text .titel { display: block; font-size: 14px; font-weight: 650; }
.ah-app .eintrag-text .sub { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.ah-app .eintrag-text .titel,
.ah-app .eintrag-text .sub { overflow-wrap: anywhere; }
.ah-app .eintrag-knoepfe { display: flex; gap: 4px; flex: 0 0 auto; }
.ah-app .ik {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 8px; background: none;
  color: var(--muted-2); cursor: pointer;
}
.ah-app .ik:hover { border-color: var(--border); color: var(--blue); background: var(--surface-alt); }
.ah-app .ik-weg:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }

.ah-app .chipfeld { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ah-app .chip-x {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 7px 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-alt);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.ah-app .chip-x button { display: inline-flex; border: 0; background: none; padding: 0; color: var(--muted-2); cursor: pointer; }
.ah-app .chip-x button:hover { color: var(--red); }
.ah-app .chip-neu {
  min-width: 112px; padding: 6px 11px; border-radius: var(--r-pill);
  border: 1px dashed var(--border); background: none;
  font-family: inherit; font-size: 12.5px; color: var(--ink); outline: none;
}
.ah-app .chip-neu:focus { border-style: solid; border-color: var(--blue); }
/* Die Branchenliste war in einen Kasten mit eigener Bildlaufleiste
   gesperrt. Zwei Bildlaufleisten uebereinander trifft niemand gern,
   und man sah nie, wie viel noch kommt - die Chips fliessen jetzt. */
.ah-app .chipfeld-lang { padding: 2px; }

.ah-app .sprachzeile {
  display: grid; grid-template-columns: 1fr 160px 30px; gap: 8px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--border-soft);
}
.ah-app .sprachzeile:first-of-type { border-top: 0; }
.ah-app .feld {
  height: 38px; padding: 0 10px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-input);
  background: var(--surface); font-family: inherit; font-size: 13.5px; color: var(--ink);
}
.ah-app .feld:focus { outline: none; border-color: var(--blue); }
.ah-app .feld-mehr {
  width: 100%; padding: 9px 11px; min-height: 76px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--r-input);
  background: var(--surface); font-family: inherit; font-size: 13.5px; color: var(--ink);
}
.ah-app .feld-mehr:focus { outline: none; border-color: var(--blue); }

.ah-app .segment {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px;
  border-radius: var(--r-pill); background: var(--surface-alt); border: 1px solid var(--border);
}
.ah-app .segment button {
  padding: 6px 14px; border: 0; border-radius: var(--r-pill); background: none;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.ah-app .segment button[aria-pressed="true"] { background: var(--surface); color: var(--blue); box-shadow: var(--shadow-sm); }

.ah-app .fgruppe + .fgruppe { margin-top: 15px; }
.ah-app .fgruppe > label { display: block; font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin-bottom: 6px; }
.ah-app .fgruppe .tipp { font-size: 12px; color: var(--muted-2); margin-top: 5px; }
.ah-app .spanne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ah-app .spanne .feld { width: 122px; }
.ah-app .spanne .feld.waehrung { width: 94px; }

.ah-app .bearbeiten {
  border: 1px solid var(--blue); border-radius: var(--r-input);
  background: var(--blue-50); padding: 12px; margin: 10px 0;
}
.ah-app .bearbeiten .zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Im Raster stehen die Gruppen nebeneinander, nicht untereinander. */
.ah-app .bearbeiten .zeile2 .fgruppe,
.ah-app .bearbeiten .zeile2 .fgruppe + .fgruppe { margin-top: 0; }
.ah-app .bearbeiten .btn-zeile { margin-top: 10px; gap: 8px; }

.ah-app .profil-hinweis {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--amber); border-radius: var(--r-input);
  background: var(--amber-bg); font-size: 13px; color: var(--ink-2);
}

@media (max-width: 640px) {
  .ah-app .sprachzeile { grid-template-columns: 1fr 124px 30px; }
  .ah-app .bearbeiten .zeile2 { grid-template-columns: 1fr; }
  .ah-app .bearbeiten .zeile2 .fgruppe + .fgruppe { margin-top: 10px; }
  .ah-app .pdatei .btn { margin-left: 0; width: 100%; }
}

/* ---------- Profil, zweite Fassung ---------- */
.ah-app .profil-raster { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) {
  .ah-app .profil-raster { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
  .ah-app .profil-seite { position: sticky; top: 16px; }
}

/* Die Profilstaerke als Balken ueber die ganze Kartenbreite.
   Vorher ein Ring mit 66 px, in dem "100 %" gequetscht stand - drei
   Zeichen plus Leerzeichen in einem Kreis, der fuer zwei gebaut war. */
.ah-app .staerke-kopf { display: block; }
.ah-app .staerke-text { width: 100%; }
.ah-app .staerke-zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: var(--raum-kopf);
}
.ah-app .staerke-zahl {
  font-size: 20px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ah-app .staerke-balken {
  width: 100%; height: 8px; border-radius: 999px;
  background: var(--surface-alt); overflow: hidden;
}
.ah-app .staerke-fuell {
  display: block; height: 100%; border-radius: 999px;
  background: var(--blue); transition: width .3s ease;
}
.ah-app .staerke-fuell.voll { background: var(--green); }
.ah-app .staerke-fertig { margin: 0; }
.ah-app .tipp-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ah-app .tipp-zeile {
  display: flex; gap: 9px; align-items: flex-start; width: 100%;
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font-family: inherit; text-align: left; cursor: pointer;
}
.ah-app .tipp-zeile:hover { border-color: var(--blue); }
.ah-app .tipp-zeile .sym { flex: 0 0 auto; color: var(--amber); margin-top: 1px; display: inline-flex; }
.ah-app .tipp-zeile .txt { min-width: 0; }
.ah-app .tipp-zeile .was { display: block; font-size: 13px; font-weight: 650; }
.ah-app .tipp-zeile .warum { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

/* Die Fragen aus dem Lebenslauf, unter der Profilstaerke. Jede Zeile
   ist eine Frage mit zwei Knoepfen - kein Formular, kein Speichern. */
/* Eine Stufe statt einer Prozentzahl: kuerzere Schrift, damit
   "passend" in denselben Kreis passt wie "72 %". */
.ah-app .score.score-stufe { font-size: 11px; letter-spacing: -0.2px; }

/* A4: Solange der Nutzer keine Treffer gesehen hat, ist "Upgrade"
   eine Forderung und keine Einladung. Dann traegt der Knopf keinen
   Rahmen und keine Farbe, nur Text. */
.ah-app .upgrade-knopf.leise {
  background: none; border-color: transparent; color: var(--muted);
  font-weight: 600;
}
.ah-app .upgrade-knopf.leise:hover { color: var(--blue); }

/* Die Wege bei duennem Markt. Sie erweitern die Suche, statt zur
   Maske zurueckzuspringen - deshalb stehen sie unter dem Satz und
   nicht daneben. */
.ah-app .duenn-wege {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--raum-aktion);
}
@media (max-width: 560px) {
  .ah-app .duenn-wege .btn { flex: 1 1 auto; }
}

/* Zustand 9: der Grund am grauen Suchknopf, daneben der eine Weg,
   der noch offen ist. */
.ah-app .sl-aufgebraucht {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
}

.ah-app .komp-fragen {
  margin-top: var(--raum-aktion); padding-top: var(--raum-aktion);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.ah-app .komp-frage { display: block; }
.ah-app .komp-grund { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.ah-app .komp-zeile {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
}
.ah-app .komp-name { font-size: 13px; font-weight: 650; min-width: 0; flex: 1 1 auto; }
.ah-app .komp-knoepfe { display: flex; gap: 6px; flex: 0 0 auto; }
.ah-app .komp-knopf {
  padding: 5px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-alt);
  font-family: inherit; font-size: 12.5px; font-weight: 650;
  color: var(--ink-2); cursor: pointer;
}
.ah-app .komp-knopf:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.ah-app .komp-knopf:disabled { opacity: .5; cursor: default; }
/* Eine Faehigkeit, die nur auf Nachfrage dazukam. */
.ah-app .chip-x.von-dir { border-style: dashed; }

@media (max-width: 560px) {
  /* Lange Kompetenznamen brauchen die ganze Breite; die Knoepfe
     ruecken darunter, statt den Namen auf vier Zeilen zu brechen. */
  .ah-app .komp-zeile { flex-direction: column; align-items: stretch; gap: 8px; }
  .ah-app .komp-knoepfe .komp-knopf { flex: 1; }
}

.ah-app .praef-liste { display: flex; flex-direction: column; gap: 7px; }
.ah-app .praef-zeile { display: flex; gap: 10px; font-size: 13px; align-items: baseline; }
.ah-app .praef-zeile .k { flex: 0 0 104px; color: var(--muted); }
.ah-app .praef-zeile .v { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink-2); }
.ah-app .praef-zeile .v.leer { font-weight: 400; color: var(--muted-2); font-style: italic; }

/* Was deine Treffer verlangen */
.ah-app .anf-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--border-soft);
}
.ah-app .anf-zeile:first-of-type { border-top: 0; }
.ah-app .anf-name { flex: 0 0 auto; font-size: 13.5px; font-weight: 650; min-width: 128px; }
.ah-app .anf-balken {
  /* Deutlich sichtbar: hoeher und mit eigener Spur, der duenne
     Strich aus dem ersten Entwurf ging unter. */
  flex: 1 1 auto; height: 10px; border-radius: 99px;
  background: var(--surface-alt); border: 1px solid var(--border-soft); overflow: hidden;
}
/* display: block ist noetig - ein span ist inline, und auf inline
   wirkt width nicht. Die Fuellung war dadurch 0 px breit. */
.ah-app .anf-fuell { display: block; height: 100%; border-radius: 99px; transition: width .3s ease; }
.ah-app .anf-fehlt .anf-fuell { background: var(--red); }
.ah-app .anf-hat .anf-fuell { background: var(--green); }
.ah-app .anf-zahl { flex: 0 0 auto; font-size: 12px; color: var(--muted); min-width: 104px; text-align: right; }
.ah-app .anf-titel {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin: 14px 0 4px;
}
.ah-app .verschleiert { position: relative; }
.ah-app .verschleiert .anf-zeile { filter: blur(4.5px); opacity: .55; user-select: none; }
.ah-app .verschleiert-deckel {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 8px;
}
.ah-app .verschleiert-deckel .zahl { font-size: 13.5px; font-weight: 650; color: var(--ink); }

/* Berufserfahrung einklappbar */
.ah-app .erf-kopf {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  background: none; border: 0; padding: 0; font-family: inherit; text-align: left; cursor: pointer;
}
.ah-app .erf-pfeil { flex: 0 0 auto; color: var(--muted-2); margin-top: 2px; transition: transform .15s; display: inline-flex; }
.ah-app .erf-auf .erf-pfeil { transform: rotate(90deg); }
.ah-app .erf-inhalt { margin: 11px 0 3px 26px; }
.ah-app .erf-inhalt ul { margin: 0; padding-left: 17px; }
.ah-app .erf-inhalt li { font-size: 13px; color: var(--ink-2); margin-bottom: 3px; }

@media (max-width: 420px) {
  /* Fuer den Balken bleibt hier kein Platz; Name und Zahl sagen alles. */
  .ah-app .anf-balken { display: none; }
  .ah-app .anf-name { min-width: 0; flex: 1 1 auto; }
  .ah-app .praef-zeile { flex-direction: column; gap: 1px; }
  .ah-app .praef-zeile .k { flex: none; }
}

/* ---------- "Was deine Treffer verlangen": kompakt ---------- */
/* Chips mit Zahl statt Balken. Ein Balken muesste gegen die
   Gesamtzahl skalieren, und 3 von 46 waeren dann ein Strich - die
   Zahl sagt dasselbe auf weniger Platz. */
.ah-app .anf-wolke { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ah-app .anf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-alt);
  font-size: 12.5px; line-height: 18px;
}
.ah-app .anf-chip-name { font-weight: 650; color: var(--ink-2); }
.ah-app .anf-chip-zahl { color: var(--muted); font-size: 12px; }
.ah-app .anf-chip.anf-fehlt { border-color: var(--red); background: var(--red-bg); }
.ah-app .anf-chip.anf-fehlt .anf-chip-name { color: var(--red); }
.ah-app .anf-chip.anf-hat { border-color: var(--green); background: var(--green-bg); }
.ah-app .anf-chip.anf-hat .anf-chip-name { color: var(--green); }
.ah-app button.anf-chip {
  font-family: inherit; cursor: pointer; color: var(--blue);
  border-style: dashed; background: none; font-weight: 600;
}
.ah-app button.anf-chip:hover { border-style: solid; background: var(--blue-50); }

/* ---------- Zurueck-Leiste: Sichtbarkeit zuletzt, damit nichts
     sie versehentlich ueberschreibt ---------- */
@media (min-width: 860px) {
  .ah-app .zurueck-leiste { display: none; }
}
@media (max-width: 859px) {
  .ah-app .zurueck-leiste { display: flex; }
}

/* ---------- Kopfzeile: Name und E-Mail erst ab 900 px ----------
   Darunter wird es zu eng; die Angaben stehen dann im Konto-Menue. */
@media (min-width: 900px) {
  .ah-app .ah-ab900 { display: flex !important; }
}

/* ================= Kopfzeile des App-Bereichs =================
   Die Klassen .appbar, .nav, .seg, .iconbtn und .avatar standen schon
   weiter oben - uebernommen aus _shared.css, aber von der Komponente
   nie benutzt. Hier kommt nur dazu, was das Rendering nicht hatte:
   Bildmarke statt Schriftzug, drei Sprachen statt zwei, Premium-Marke,
   Kontomenue - und die Sichtbarkeit nach Schirmbreite. */

.ah-app .marke-knopf { cursor: pointer; flex: 0 0 auto; }
/* 36 px, dasselbe Mass wie auf der Startseite (h-9). Bei 30 px
   fielen die Strichstaerken der Wortmarke auf einem Bildschirm
   mit einfacher Punktdichte unter einen Bildpunkt, und der
   Browser verteilte sie auf Graustufen - das sah weich aus.
   Die Datei ist dieselbe SVG, es war nur die Groesse. */
.ah-app .marke-bild { height: 36px; width: auto; object-fit: contain; display: block; }

/* Die Reiter sind Knoepfe, nicht Links - die Regeln fuer .nav a greifen
   darauf nicht. */
.ah-app .nav button {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 0; border-radius: var(--r-pill);
  background: transparent; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--muted);
  cursor: pointer; white-space: nowrap;
}
.ah-app .nav button:hover { background: var(--surface-alt); color: var(--ink-2); }
.ah-app .nav button.active { background: var(--blue-50); color: var(--blue); }
.ah-app .nav button.active:hover { background: var(--blue-100); }
.ah-app .nav button.gesperrt { color: var(--muted-2); cursor: not-allowed; }
.ah-app .nav button.gesperrt:hover { background: transparent; color: var(--muted-2); }

/* Premium-Marke und Upgrade-Knopf in Pillenform, auf Hoehe der
   Symbolknoepfe daneben. */
.ah-app .premium-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--amber-bg); color: #92400e;
  border: 1px solid #fcd34d;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.ah-app .upgrade-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 0; border-radius: var(--r-pill);
  background: var(--blue); color: #fff; font-family: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.ah-app .upgrade-knopf:hover { background: var(--blue-dark); }

/* Kontomenue hinter dem Namenskuerzel. */
.ah-app .konto-menue { position: relative; display: flex; align-items: center; }
.ah-app .avatar { border: 0; font-family: inherit; cursor: pointer; }
.ah-app .avatar:hover { background: var(--blue); color: #fff; }
.ah-app .menue-hinter { position: fixed; inset: 0; z-index: 40; }
.ah-app .konto-klappe {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  min-width: 232px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-lg);
}
.ah-app .konto-kopf { padding: 10px 12px 12px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; }
.ah-app .konto-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ah-app .konto-mail { margin: 2px 0 0; font-size: 12px; color: var(--muted-2); word-break: break-all; }
.ah-app .konto-zeile {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: var(--r-input);
  background: transparent; font-family: inherit;
  font-size: 14px; color: var(--ink-2); text-align: left; cursor: pointer;
}
.ah-app .konto-zeile:hover { background: var(--surface-alt); }
.ah-app .konto-abmelden { color: var(--red); }
.ah-app .konto-abmelden:hover { background: var(--red-bg); }

/* Untere Navigationsleiste: im Rendering sind es Links, hier Knoepfe. */
.ah-app .tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 2px; border: 0; border-radius: 10px;
  background: transparent; font-family: inherit;
  font-size: 11px; font-weight: 600; color: var(--muted-2); cursor: pointer;
}
.ah-app .tabbar button.active { color: var(--blue); }
.ah-app .tabbar button.gesperrt { color: var(--border); cursor: not-allowed; }

/* ---------- Sichtbarkeit zuletzt, damit nichts sie ueberschreibt.
     860px ist die Grenze, die der App-Bereich auch sonst benutzt. ---------- */
@media (min-width: 860px) {
  .ah-app .kopf-nav { display: flex; }
  .ah-app .kopf-weit { display: grid; }
  .ah-app .kopf-eng { display: none; }
  .ah-app .tabbar { display: none; }
}
@media (max-width: 859px) {
  .ah-app .kopf-nav { display: none; }
  .ah-app .kopf-weit { display: none; }
  .ah-app .kopf-eng { display: flex; }
  .ah-app .tabbar { display: grid; }
  /* 28 statt 26: unter 28 wird der Ring im Zeichen zu klein. */
  .ah-app .marke-bild { height: 32px; }
  .ah-app .sprach-seg button { padding: 5px 9px; font-size: 12px; }
  .ah-app .premium-chip,
  .ah-app .upgrade-knopf { padding: 6px 9px; }
  .ah-app .premium-chip .chip-text,
  .ah-app .upgrade-knopf .chip-text { display: none; }
}


/* ------------------------------------------------------------
   Nachgeladene Treffer
   Einsortiert werden sie nach Score, wie alle anderen. Damit man
   trotzdem sieht, dass sie gerade dazugekommen sind, tragen sie 20
   Sekunden lang diese Marke.
   ------------------------------------------------------------ */
/* Branchenwechsel. Bewusst neutral: grau umrandet, keine Farbe, die
   nach Warnung aussieht. Der Wechsel ist eine Feststellung, kein
   Mangel - und er kostet keine Punkte. */
.ah-app .jobcard .title .branchen-marke,
.ah-app .branchen-marke {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.02em;
  vertical-align: 1px;
  white-space: nowrap;
}

/* Nur knapp dabei: dieselbe Form wie die Branchenmarke, aber nicht
   dieselbe Farbe. Der Treffer steht in der Liste, weil sonst
   keiner dastuende - das darf man ihm ansehen.

   white-space: normal, weil der Grund ein halber Satz ist ("eine
   Stufe unter deinem Level") und am Handy sonst aus der Karte
   laeuft. */
.ah-app .jobcard .title .knapp-marke,
.ah-app .knapp-marke {
  border-color: var(--amber-200, #fcd9a4);
  background: var(--amber-50, #fff8ec);
  color: var(--amber-700, #92610a);
  white-space: normal;
}

/* Der duenne Markt bei Free. Kein Fenster, keine laute Farbe: eine
   Karte unter der Liste, die drei Dinge nennt und einen Knopf
   hat. */
.ah-app .duenn-premium {
  background: var(--blue-50);
  border-color: var(--blue-100);
}

.ah-app .duenn-liste {
  margin: 0 0 12px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ah-app .duenn-liste li {
  color: var(--color-text-secondary);
}

.ah-app .jobcard .title .neu-marke {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 6px;
  background: #e8f0ff;
  color: #2b4ba8;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

/* ------------------------------------------------------------
   Tageslimit der KI-Analysen. Faellt bewusst auf, weil eine Liste
   ohne Prozentzahlen sonst wie ein Defekt aussieht.
   ------------------------------------------------------------ */
.ah-app .budget-hinweis {
  background: #fff6e5;
  border: 1px solid #f0d9a8;
  color: #7a5a12;
  border-radius: 8px;
  padding: 7px 10px;
  margin: 0 0 10px;
}

/* ------------------------------------------------------------
   Suchprofil: Kategorien als Chips, Ebene als Auswahl.
   Was hier steht, schlaegt die Einschaetzung aus dem Lebenslauf.
   ------------------------------------------------------------ */
.ah-app .chips-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}
.ah-app .kat-chip {
  padding: 5px 10px;
  border: 1px solid var(--line, #dfe3ea);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  line-height: 16px;
  color: #3b4557;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ah-app .kat-chip:hover:not(:disabled) { border-color: var(--blue, #2b4ba8); }
.ah-app .kat-chip.an {
  background: var(--blue, #2b4ba8);
  border-color: var(--blue, #2b4ba8);
  color: #fff;
  font-weight: 600;
}
.ah-app .kat-chip:disabled { opacity: 0.45; cursor: default; }
/* Die Zielrolle: Beschriftung, Feld, Hinweis - untereinander, weil
   der Hinweis ein Satz ist und neben einem Eingabefeld nicht
   lesbar waere. */
.ah-app .zielrolle-zeile {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: var(--raum-aktion);
}
.ah-app .zielrolle-zeile .input { max-width: 420px; }

.ah-app .stufe-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* ============================================================
   DASHBOARD V2
   Aus den Mockups dashboard-v2-desktop.html und -mobile.html
   uebernommen, mit denselben Werten.
   ============================================================ */

/* Die Kopfzeile einer Karte traegt in V2 ein Symbol und einen Titel
   statt einer h2 - sonst steht das Symbol auf der Grundlinie. */
.ah-app .card-head .title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1 1 auto;
  min-width: 0;
}

/* Die Zahl in Block 1. */
.ah-app .dash-gross {
  margin: 0 0 var(--raum-kopf);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Ein Knopf, der auf den Text unter der Ueberschrift folgt, klebte
   daran: gemessen 0 px. Gilt nur innerhalb des Dashboard-Blocks. */
.ah-app .dash-gross ~ .btn { margin-top: var(--raum-aktion); }

/* Eine Zeile pro Treffer. Vorher eine Karte mit 46px-Kreis, davon
   passten zwei ins Bild; jetzt vier. */
.ah-app .tz {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  background: var(--card);
}
.ah-app .tz:hover { background: var(--bg-2); }
.ah-app .tz-t {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ah-app .tz-r {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
.ah-app .tz-m {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ah-app .tz-d {
  font-size: 12px;
  color: var(--muted-2);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Stufe statt Zahl. Der Nachtlauf kennt nur den Schnell-Score, und
   zwei verschiedene Prozentzahlen fuer denselben Job gibt es nicht. */
.ah-app .stufe {
  flex: 0 0 auto;
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
}
.ah-app .st-stark { background: #dcfce7; color: #15803d; }
.ah-app .st-passend { background: #fef3c7; color: #b45309; }
.ah-app .st-schwach { background: var(--bg-2); color: var(--muted); }

/* Die Zeile unter der Suchleiste: wonach gefiltert wird. */
.ah-app .sucht-in {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 var(--raum-block);
  font-size: 13px;
  color: var(--muted);
}

/* Pipeline als eine Leiste, jedes Feld anklickbar. */
.ah-app .pipeleiste {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
}
.ah-app .pipeleiste button {
  flex: 1 1 0;
  min-width: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  border: 0;
  border-right: 1px solid var(--line);
  background: none;
  font: inherit;
  cursor: pointer;
}
.ah-app .pipeleiste button:last-child { border-right: 0; }
.ah-app .pipeleiste button:hover { background: var(--bg-2); }
.ah-app .pipeleiste .kopf { display: flex; align-items: center; gap: 8px; }
.ah-app .pipeleiste .z { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ah-app .pipeleiste .l { font-size: 13px; font-weight: 600; color: var(--muted); }

/* Die Chips im Markt-Block sind Filter, keine Zierde. */
.ah-app .skillchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.ah-app .skillchip:hover { background: var(--bg-2); border-color: var(--brand); color: var(--brand); }

/* Die Vorschlaege unter "Was soll betont werden?" sind ganze
   Saetze, keine Schlagworte. Sie erben sonst die Mitte-Ausrichtung
   ihres Kastens, und ein zentrierter Satz in einer Pille sieht aus
   wie eine Beschriftung, nicht wie etwas zum Anklicken - Marcos
   Befund vom 07.11.2026.

   Mehrzeilig duerfen sie auch sein: lieber zwei Zeilen lesbar als
   eine Zeile abgeschnitten. Der volle Text haengt als title daran. */
.ah-app .skillchip.chip-vorschlag {
  text-align: left;
  align-items: flex-start;
  white-space: normal;
  max-width: 100%;
  line-height: 1.35;
  padding: 7px 12px;
}
.ah-app .skillchip b { font-weight: 700; color: var(--muted); font-size: 12px; }
.ah-app .skillchip.hat::before { content: "\2713"; color: #15803d; font-weight: 700; }
.ah-app .skillchip.fehlt::before { content: "\2013"; color: #b91c1c; font-weight: 700; }


/* ---------- Zustand 2: der Lebenslauf wird gelesen ----------
   Ein Block in der Seite, kein Fenster darueber. Der Balken laeuft
   ohne Ziel: wie lange es dauert, weiss niemand genau, und eine
   Prozentzahl, die geraten ist, ist schlimmer als keine. */
/* Eine Karte in der Mitte des Hauptbereichs, nicht eine Zeile
   zwischen anderem: das ist der einzige Zustand, in dem gerade etwas
   passiert, und er darf das zeigen. */
/* Die Karte braucht Luft nach beiden Seiten. Bis zum 03.11.2026
   stand hier margin 48px auto 0: oben Abstand, unten keiner. Bei
   einer NEUEN Suche steht aber direkt darunter die Suchleiste mit
   den Treffern der vorigen - die Karte klebte daran und wirkte
   eingequetscht. */
.ah-app .analyse-laeuft {
  max-width: 560px; margin: 48px auto 40px;
  padding: 36px var(--raum-karte);
  text-align: center;
}

/* Waehrend eine neue Suche laeuft, verblassen die Treffer der
   vorigen und sind nicht mehr anklickbar.
   Marco hat Dresden gesucht und Muenchen gelesen - und zwischen
   beidem lag nichts als eine Ladekarte. Was noch dasteht, gehoert
   zur alten Suche; es ganz wegzunehmen waere haerter als noetig
   (der Platz springt), aber anfassbar darf es nicht sein.
   aria-busy sagt dasselbe den Vorlesewerkzeugen. */
.ah-app .treffer-verblasst {
  opacity: .38;
  pointer-events: none;
  transition: opacity .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ah-app .treffer-verblasst { transition: none; }
}
.ah-app .analyse-kopf {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: var(--raum-aktion); color: var(--blue);
}
.ah-app .analyse-kopf h2 { color: var(--ink); font-size: 24px; line-height: 31px; }
.ah-app .analyse-laeuft .lead { margin: 0 auto; max-width: 42ch; }

/* Der Hinweis wechselt alle 5,5 s und wird dabei weich ueberblendet.
   Die feste Hoehe haelt die Karte ruhig - sonst huepft alles
   darunter bei jedem Wechsel. */
.ah-app .analyse-hinweis {
  margin: var(--raum-aktion) auto 0; max-width: 46ch;
  min-height: 40px;
  font-size: 13px; line-height: 20px; color: var(--muted);
  opacity: 0; transition: opacity .35s ease;
}
.ah-app .analyse-hinweis.an { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ah-app .analyse-hinweis { transition: none; opacity: 1; }
}
.ah-app .analyse-balken {
  margin-top: var(--raum-aktion);
  height: 6px; border-radius: 999px;
  background: var(--surface-alt); overflow: hidden;
}
.ah-app .analyse-balken span {
  display: block; width: 35%; height: 100%; border-radius: 999px;
  background: var(--blue);
  animation: ah-laeuft 1.4s ease-in-out infinite;
}
@keyframes ah-laeuft {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
  .ah-app .analyse-balken span { animation: none; width: 100%; opacity: .5; }
}

/* Der Knopf, der gerade "Gespeichert" sagt: gruen, und keine Hand -
   es ist nichts zu tun. */
.ah-app .btn.knopf-fertig,
.ah-app .btn.knopf-fertig:disabled {
  background: var(--green); border-color: var(--green);
  color: #fff; opacity: 1; cursor: default;
}

/* Die Angaben auf der Bestaetigungskarte: Beschriftung links,
   Wert rechts. Auf dem Telefon untereinander - nebeneinander
   blieben fuer den Wert zwanzig Zeichen. */
.ah-app .gelesen-liste {
  display: grid; grid-template-columns: auto 1fr;
  gap: 6px 18px; margin: 0 0 var(--raum-aktion);
}
.ah-app .gelesen-liste dt {
  font-size: 13px; color: var(--muted); white-space: nowrap;
}
.ah-app .gelesen-liste dd { margin: 0; font-weight: 600; }
@media (max-width: 859px) {
  .ah-app .gelesen-liste { grid-template-columns: 1fr; gap: 2px; }
  .ah-app .gelesen-liste dd { margin-bottom: 8px; }
}

/* ---------- Profil ohne Lebenslauf ----------
   Ein Formular, kein Dialog: alle Felder untereinander, der Hinweis
   unter der Beschriftung, die drei Felder einer Stelle in einer
   Zeile, solange Platz ist. */
.ah-app .profil-formular { text-align: left; }
.ah-app .form-feld {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: var(--raum-aktion);
}
.ah-app .form-stelle {
  display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 8px;
  margin-top: 8px;
}
.ah-app .form-ort {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px;
}
@media (max-width: 859px) {
  .ah-app .form-stelle,
  .ah-app .form-ort { grid-template-columns: 1fr; }
}

/* ---------- Toast ----------
   Bis zum 03.11.2026 hatten .toast-success, .toast-error und
   .toast-info GAR KEIN CSS: die Klassen standen im Markup und
   nirgends in einer Datei. Uebrig blieb .toast aus styles.css -
   Innenabstand, runde Ecken und ein weicher Schatten, aber keine
   Flaeche. Ein Schatten ueber durchscheinendem Grund, das war der
   verschwommene Eindruck.

   Kein .ah-app davor: der Behaelter haengt an ToastProvider und
   steht damit AUSSERHALB von .ah-app. Mit dem Vorsatz zeigte die
   Regel auf nichts - dieselbe Falle wie .reiterleiste. */
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 20px;
  max-width: min(420px, calc(100vw - 32px));
}
.toast-error   { border-color: var(--red);   background: var(--red-bg);   color: #991b1b; }
.toast-success { border-color: var(--green); background: var(--green-50); color: #15803d; }
.toast-info    { border-color: var(--blue);  background: var(--blue-50);  color: var(--blue-dark); }
.toast-sym { display: inline-flex; flex: none; }

/* Unter 860 px unten mittig, ueber der Reiterleiste: dort ist der
   Daumen, und oben rechts sitzt auf dem Telefon die Kopfzeile. Die
   feste Leiste ist rund 62 px hoch, der sichere Bereich kommt dazu -
   dieselbe Rechnung wie beim Innenabstand von .ah-app. */
@media (max-width: 859px) {
  .toast-container {
    top: auto; right: 16px; left: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    align-items: center;
  }
  .toast { width: 100%; min-width: 0; }
}

/* Hier standen die Farben der drei Skill-Arten (.art-fachlich,
   .art-software, .art-sprache) und eine Legende dazu. Beides ist am
   03.11.2026 entfallen, zusammen mit skillArt() in core.js: die Art
   wurde aus Wortlisten geraten und war oft falsch. Alle
   Faehigkeiten tragen jetzt denselben neutralen Stil - .chip-x im
   Profil, .skillchip in "Dein Markt". Das gestrichelte
   .chip-x.von-dir bleibt; das ist keine Farbe, sondern eine
   Aussage. */

.ah-app .legende {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted-2);
}
.ah-app .legende i { font-style: normal; font-weight: 700; margin-right: 4px; }
.ah-app .legende i.ja { color: #15803d; }
.ah-app .legende i.nein { color: #b91c1c; }

/* Leerzustand als Onboarding: ein Schritt, und sonst nichts. */
.ah-app .onboarding { text-align: center; padding: 38px 24px; }
.ah-app .onboarding h2 { margin: 0 0 6px; }
.ah-app .onboarding .lead { margin: 0 0 18px; }
/* Der zweite Weg: eine ruhige Zeile unter dem Hauptknopf, mit
   einer Linie abgesetzt. Kein zweiter Hauptknopf - die Rangfolge
   steht im Aussehen, nicht in der Erreichbarkeit. */
.ah-app .ob-ohne {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.ah-app .ob-ohne p { margin: 0 0 10px; }

.ah-app .ob-schritt {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* Auf dem Telefon passen Titel, Firma und Datum nicht nebeneinander,
   ohne dass der Titel nach drei Woertern abbricht - und der Titel ist
   das, was man liest. Also zwei Zeilen. */
@media (max-width: 560px) {
  .ah-app .tz { flex-wrap: wrap; row-gap: 3px; }
  /* Auf dem Telefon bricht der Titel um, statt mit drei Punkten zu
     enden. Gemessen bei 375 px: "General Manager - The Ritz Carlton
     Berlin" war abgeschnitten, und genau der Titel ist das, was man
     liest. Hoechstens zwei Zeilen, damit die Zeile nicht waechst. */
  .ah-app .tz-t {
    flex: 1 1 0;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 18px;
  }
  .ah-app .tz-r { flex: 1 1 100%; justify-content: flex-start; }
  .ah-app .tz-m { font-size: 12px; }
  .ah-app .kopfzeile { flex-wrap: wrap; }
  .ah-app .kopfzeile > .btn { width: 100%; }
}

/* Die Leiste bleibt einzeilig: 375 px minus zweimal 16 px Rand sind
   343 px, geteilt durch fuenf 68 px je Feld. Dafuer muss min-width
   weg, der Punkt ueber die Beschriftung, und die Schrift kleiner.
   Dieser Block steht am ENDE der Datei, weil er sonst von den
   .pipeleiste-Regeln oben ueberschrieben wird - gleiche Spezifitaet,
   spaetere Regel gewinnt. Genau daran ist das Mockup zuerst
   gescheitert. */
@media (max-width: 560px) {
  .ah-app .pipeleiste { flex-wrap: nowrap; }
  .ah-app .pipeleiste button {
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: 10px 3px;
  }
  .ah-app .pipeleiste .kopf { gap: 5px; }
  .ah-app .pipeleiste .z { font-size: 17px; }
  .ah-app .pipeleiste .l { font-size: 10.5px; white-space: nowrap; }
}

/* ============================================================
   FREE: gesperrte Treffer
   Das Verschwimmen ist Optik. Die Sperre liegt auf dem Server -
   fuer diese Zeilen gibt es keinen Titel, weil keiner ankommt.
   ============================================================ */
.ah-app .gesperrt-block { position: relative; }
.ah-app .jobcard.gesperrt {
  pointer-events: none;
  user-select: none;
  opacity: 0.65;
  filter: blur(2.5px);
  margin-bottom: 8px;
}
/* Zwei graue Balken, wo Titel und Firma staenden. Kein Fülltext:
   erfundene Titel waeren eine Luege, und echte haben wir nicht. */
.ah-app .gesperrt-balken {
  height: 13px;
  border-radius: 4px;
  background: var(--line);
  margin-bottom: 7px;
  width: 72%;
}
.ah-app .gesperrt-balken.kurz { width: 44%; height: 11px; margin-bottom: 0; }
.ah-app .gesperrt-hinweis {
  position: relative;
  margin-top: -14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  text-align: center;
}
.ah-app .pool-duenn {
  border-color: var(--line);
  background: var(--bg-2);
}


/* ============================================================
   TOOLBOX (04.11.2026)
   ============================================================
   Eine Zeile je Anschreiben: Stelle und Firma links, dahinter
   Datum, Sprache und die zwei Knoepfe. Auf dem Telefon bricht die
   Zeile um - mit sechs Dingen in einer Reihe waere bei 390 px
   nichts mehr lesbar.
*/
.ah-app .toolbox-liste { display: flex; flex-direction: column; gap: 8px; }
.ah-app .toolbox-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.ah-app .toolbox-zeile:hover { border-color: var(--blue-200, var(--border)); }
/* Der Knopf traegt die Stelle und nimmt den freien Platz. Er sieht
   nicht wie ein Knopf aus, er ist einer: ein Klick darauf oeffnet
   die Bewerbungshilfe. */
.ah-app .toolbox-stelle {
  flex: 1 1 200px; min-width: 0; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.ah-app .toolbox-stelle .title {
  font-size: 14px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ah-app .toolbox-stelle .sub {
  font-size: 12px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ah-app .toolbox-stelle:hover .title { color: var(--blue); }
.ah-app .toolbox-datum { white-space: nowrap; }
/* Runde 4: in derselben Zeile steht, ob es fuer die Stelle eine
   Lebenslauf-Fassung gibt. Nicht umbrechen - "Lebenslauf · 6. Nov."
   in zwei Zeilen liest sich wie zwei Angaben. */
.ah-app .toolbox-cv { white-space: nowrap; }

/* Die Sperre fuer Free. Kein Verschwimmen: es gibt nichts zu
   verdecken, Free hat keine Anschreiben. Der Satz sagt, warum. */
.ah-app .sperre-block {
  border: 1px dashed var(--border); border-radius: 12px;
  padding: 14px; background: var(--surface-2, transparent);
}

@media (max-width: 640px) {
  .ah-app .toolbox-zeile { gap: 8px; }
  .ah-app .toolbox-stelle { flex: 1 1 100%; }
}


/* ============================================================
   DIE TREFFER DER NACHTLAUF-KARTE (04.11.2026)
   ============================================================
   Im Stil der Trefferkarten in der Jobsuche: Titel fett, darunter
   Firma, Ort und Alter in einer Zeile, rechts die Einstufung in
   Worten mit farbigem Punkt. Die Farben sind dieselben wie bei den
   Stufen-Etiketten (.st-stark, .st-passend) - zwei Gruentoene fuer
   dieselbe Sache waeren einer zu viel.
*/
.ah-app .nachtkarte {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer;
}
.ah-app .nachtkarte:hover { border-color: var(--blue); }

/* Gemessen am 04.11.2026 abends auf 375 px: die Karte war 406 px
   breit und stand 47 px ueber dem Bildrand. Sie steht in einem
   Raster, und eine Rasterspalte waechst auf den groessten
   MINDESTinhalt ihrer Kinder. Der Titel einer Trefferzeile laeuft
   nicht um (text-overflow: ellipsis), sein Mindestinhalt ist also
   die ganze Zeile. "min-width: 0" erlaubt der Karte, schmaler zu
   werden - dann greift die Ellipse, wofuer sie gedacht war. */
.ah-app .nachtlauf-karte { min-width: 0; }

/* Die feste Leiste im Stellenfenster aus dem Nachtlauf. Sie
   scrollt nicht mit: wer die Beschreibung liest, soll nicht
   zurueckscrollen muessen, um zu merken oder die Anzeige zu
   oeffnen. Auf dem Telefon untereinander, sonst stehen drei
   Knoepfe auf 343 px nebeneinander. */
.ah-app .stellenleiste {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 26px; border-top: 1px solid var(--border);
  background: var(--surface); flex: 0 0 auto;
}
.ah-app .stellenleiste .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .ah-app .stellenleiste { padding: 12px 16px; }
  .ah-app .stellenleiste .btn { flex: 1 1 100%; justify-content: center; }
}
.ah-app .nachtkarte-t {
  display: block; font-size: 14px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ah-app .nachtkarte-m {
  display: block; margin-top: 2px; font-size: 12px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ah-app .einstufung {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 650; color: var(--muted);
  white-space: nowrap;
}
.ah-app .einstufung .punkt {
  width: 8px; height: 8px; border-radius: 999px; display: inline-block;
}
.ah-app .einstufung .punkt.stark { background: #15803d; }
.ah-app .einstufung .punkt.passend { background: #b45309; }

@media (max-width: 640px) {
  /* Auf dem Telefon untereinander: Titel und Zeile brauchen die
     Breite, und die Einstufung sitzt darunter links. */
  .ah-app .nachtkarte { flex-wrap: wrap; gap: 6px; }
  .ah-app .einstufung { flex: 1 1 100%; }
}


/* ============================================================
   LEBENSLAUF-BUILDER
   ============================================================
   Die Vorlage ist absichtlich arm: eine Spalte,
   Standardueberschriften, echter Text. Kein zweispaltiges
   Raster, keine Tabellen, keine Grafiken, keine Kopf- oder
   Fusszeilen. Damit ist das Format von vornherein ATS-sicher -
   ein Formcheck eruebrigt sich.

   Die Breite ist die eines A4-Blattes abzueglich der Raender
   (210 mm - 2 x 20 mm = 170 mm). Auf dem Schirm sieht man
   dadurch, wo die Seite endet, ohne dass irgendwo eine
   Seitenzahl steht. */
.ah-app .lb { display: block; }

.ah-app .lb-leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0 0 14px;
}
.ah-app .lb-reiter { display: inline-flex; gap: 4px; background: var(--bg-2);
  border-radius: 999px; padding: 3px; }
.ah-app .lb-reiter button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 7px 16px; font-size: 14px; font-weight: 600; color: var(--muted);
}
.ah-app .lb-reiter button.on { background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm); }
.ah-app .lb-aktionen { display: inline-flex; gap: 8px; }

/* ============================================================
   WELCHE FASSUNG IST OFFEN? (Runde 4, 06.11.2026)
   ============================================================
   Die allgemeine Fassung und eine je Stelle sehen gleich aus -
   darum muss die Leiste sagen, welche man gerade bearbeitet. Bei
   einer Stelle ist sie farbig umrandet: ein Lebenslauf, den man
   fuer eine Stelle geaendert hat, ist nicht derselbe wie der
   allgemeine, und das darf man nicht verwechseln.
*/
.ah-app .lb-fassung {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-2); padding: 12px 14px; margin: 0 0 14px;
}
.ah-app .lb-fassung[data-stelle="ja"] {
  border-color: var(--blue-300, var(--blue)); border-left-width: 3px;
}
.ah-app .lb-fassung-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ah-app .lb-fassung-name {
  flex: 1 1 200px; min-width: 0;
  font-size: 14px; font-weight: 700; color: var(--text);
}

/* ---------- Was zu Premium gehoert (Runde 5) ----------
   Kein Schloss-Emoji: in diesem Projekt stehen Icons statt Emojis,
   und ein Zeichen, das auf jedem System anders aussieht, ist keine
   Auskunft. Gestrichelt und blasser, dazu der Grund im title - und
   darunter der Satz, der sagt, was Free trotzdem bekommt.
*/
.ah-app .lb-wahl-knoepfe .btn.lb-schloss {
  opacity: 0.55; border-style: dashed;
}
.ah-app .lb-wahl-knoepfe .btn.lb-schloss:hover {
  opacity: 0.85; border-color: var(--blue-300, var(--blue));
}
.ah-app .lb-premium-satz {
  color: var(--muted-2); line-height: 1.5;
  border-left: 2px solid var(--blue-200, var(--border));
  padding-left: 10px;
}

/* Der Weg aus der Vorschau. Er faellt auf, ohne zu draengen -
   wer ihn sucht, soll ihn finden. */
.ah-app .lb-vorschau-aus {
  border-color: var(--blue-300, var(--blue)); color: var(--blue);
}

/* ---------- Die Begriffspaare ----------
   Links deine Formulierung, rechts die der Anzeige. Uebernommen
   wird einzeln; ein uebernommenes oder verworfenes Paar bleibt
   stehen, blasser - sonst waere nicht mehr zu sehen, was man schon
   entschieden hat.
*/
.ah-app .lb-begriffe { margin: 12px 0 0; }
.ah-app .lb-begriff {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-top: 1px solid var(--border);
  font-size: 13px;
}
.ah-app .lb-begriff[data-stand="uebernommen"] { opacity: 0.6; }
.ah-app .lb-begriff[data-stand="weg"],
.ah-app .lb-begriff[data-stand="nichts"] { opacity: 0.45; }
.ah-app .lb-begriff-alt { color: var(--muted-2); }
.ah-app .lb-begriff[data-stand="uebernommen"] .lb-begriff-alt {
  text-decoration: line-through;
}
.ah-app .lb-begriff-pfeil { color: var(--muted-2); }
.ah-app .lb-begriff-neu { font-weight: 650; color: var(--text); }
.ah-app .lb-begriff-knoepfe {
  margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap;
}

/* ---------- Was sich geaendert hat (Punkt 5, 06.11.2026) ----------
   "4 Stationen neu geordnet, 0 weggelassen" war eine Zaehlung,
   keine Auskunft. Jede Aenderung steht jetzt einzeln da, mit einem
   Haken, wenn sie angenommen ist.

   Zurueckgestellte Zeilen bleiben stehen, blasser - sonst waere
   nicht mehr zu sehen, was man schon entschieden hat. Dieselbe
   Regel wie bei den Begriffspaaren vorher. */
.ah-app .lb-aenderungen { margin: 12px 0 0; }
.ah-app .lb-aend-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px;
}
.ah-app .lb-aend-zeigen {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer;
}
.ah-app .lb-aend {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; border-top: 1px solid var(--border);
  font-size: 13px;
}
.ah-app .lb-aend[data-an="nein"] { opacity: 0.5; }
.ah-app .lb-aend-haken { color: var(--blue); width: 12px; flex: 0 0 auto; }
.ah-app .lb-aend[data-an="nein"] .lb-aend-haken { color: var(--muted-2); }
.ah-app .lb-aend-text { flex: 1 1 200px; min-width: 0; }
.ah-app .lb-aend-knopf { margin-left: auto; }

/* Was die Anpassung auf dem Blatt angefasst hat. Ein Streifen am
   Rand, kein Durchstreichen und keine Farbflaeche: das Blatt muss
   ein Lebenslauf bleiben.

   Sie haengt an .lb-seite, und die Ausgabe wird aus LAusgabe
   gebaut - sie kann also gar nicht in die Datei geraten. */
.ah-app .lb-seite[data-zeigen="ja"] .lb-st.geaendert,
.ah-app .lb-seite[data-zeigen="ja"] .lb-abschnitt.geaendert {
  box-shadow: -3px 0 0 var(--blue);
  padding-left: 6px; margin-left: -9px;
}
.ah-app .lb-seite[data-zeigen="ja"] .lb-ersetzt {
  border-bottom: 1px solid var(--blue);
}

@media (max-width: 640px) {
  .ah-app .lb-aend-knopf { margin-left: 0; }
  .ah-app .lb-aend-zeigen { margin-left: 0; flex: 1 1 100%; }
}

/* ---------- Was im Lebenslauf fehlt (Runde 6) ----------
   Begriffe aus der Anzeige, die im Lebenslauf nicht vorkommen.
   Sie stehen abgesetzt von den Paaren und tragen keinen Knopf zum
   Uebernehmen: zu uebernehmen gibt es nichts. Der eine Knopf
   oeffnet die Station, geschrieben wird vom Nutzer.
*/
.ah-app .lb-fehlt { margin: 12px 0 0; padding: 10px 12px;
  background: var(--amber-50, rgba(217, 119, 6, 0.06));
  border: 1px solid var(--amber-200, rgba(217, 119, 6, 0.22));
  border-radius: 8px;
}
.ah-app .lb-fehlt-zeile {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; font-size: 13px;
}
.ah-app .lb-fehlt-zeile + .lb-fehlt-zeile { border-top: 1px solid var(--border); }
.ah-app .lb-fehlt-wort { display: flex; flex-direction: column; gap: 1px; }
.ah-app .lb-fehlt-begriff { font-weight: 650; color: var(--text); }
.ah-app .lb-fehlt-knopf { margin-left: auto; }
.ah-app .lb-fehlt-knoepfe {
  margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap;
}

/* Wohin der Sprung ging. Zweieinhalb Sekunden, dann ist es wieder
   eine Station wie jede andere - ein Rahmen, der bleibt, waere
   eine Behauptung ueber den Inhalt. */
.ah-app .lb-st-bearb.lb-st-ziel {
  outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px;
}

@media (max-width: 640px) {
  .ah-app .lb-fassung-name { flex: 1 1 100%; }
  .ah-app .lb-begriff-knoepfe { margin-left: 0; flex: 1 1 100%; }
  .ah-app .lb-fehlt-knopf { margin-left: 0; flex: 1 1 100%; }
  .ah-app .lb-fehlt-knoepfe { margin-left: 0; flex: 1 1 100%; }
}

.ah-app .lb-frage {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-2); padding: 14px; margin: 0 0 14px;
}

/* ---------- Das Blatt ---------- */
.ah-app .lb-seite {
  max-width: 170mm; margin: 0 auto; padding: 18mm 20mm;
  background: #fff; color: #111;
  border: 1px solid var(--border); border-radius: 4px;
  box-shadow: var(--shadow-sm);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11pt; line-height: 1.35;
}
/* Dieselben Abstaende wie im PDF, damit die Vorschau nicht mehr
   verspricht, als das Blatt haelt (05.11.2026): 2 pt zwischen
   Punkten, 9 pt zwischen Stationen, 14 pt vor einer
   Abschnittsueberschrift. */
.ah-app .lb-abschnitt { margin-top: 14pt; }
.ah-app .lb-abschnitt:first-child { margin-top: 14pt; }
.ah-app .lb-station { margin-bottom: 9pt; }
.ah-app .lb-station:last-child { margin-bottom: 0; }
.ah-app .lb-punkte li { margin-bottom: 2pt; }
/* ---------- Kenntnisse: Spalten statt Kommazeile (06.11.2026) ----------
   Marcos Befund aus seinem eigenen PDF: achtzehn Begriffe, durch
   Kommas getrennt, sind keine Information, sondern eine Wand.

   Im Markup steht eine LISTE, die Spalten macht CSS. Damit bleibt
   die Lesereihenfolge beim Auslesen ein Eintrag nach dem anderen -
   und jeder Eintrag ist ein Begriff, der fuer sich steht. Das ist
   der Unterschied zu einem mehrspaltigen Satz. */
.ah-app .lb-kenn-gruppe { margin: 0 0 4pt; }
.ah-app .lb-kenn-gruppe:last-child { margin-bottom: 0; }
.ah-app .lb-kenn-titel { margin: 0 0 1pt; }
.ah-app .lb-kenn-liste {
  margin: 0; padding: 0; list-style: none;
  column-gap: 10pt;
  font-size: 10pt; line-height: 1.35;
}
.ah-app .lb-kenn-liste[data-spalten="2"] { column-count: 2; }
.ah-app .lb-kenn-liste[data-spalten="3"] { column-count: 3; }
/* Ein Eintrag wird nie zwischen zwei Spalten zerrissen: ein halber
   Begriff ist kein Begriff. */
.ah-app .lb-kenn-liste li { break-inside: avoid; padding: 0 0 1pt; }

/* Auf dem Telefon ist das Blatt schmal - drei Spalten waeren dort
   drei Buchstaben breit. */
@media (max-width: 640px) {
  .ah-app .lb-kenn-liste[data-spalten="3"] { column-count: 2; }
}
.ah-app .lb-zeile2-text { flex: 1 1 auto; min-width: 0; }
.ah-app .lb-kopf { margin: 0 0 18px; }
/* Mit Foto wird der Kopf zweispaltig - aber nur der Kopf, und nur
   dann. Ohne Foto bleibt er, wie er war: keine Luecke, kein
   reservierter Platz. Der Text daneben ist und bleibt Text. */
.ah-app .lb-kopf.mit-foto {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.ah-app .lb-kopf-text { min-width: 0; }
.ah-app .lb-foto {
  width: 28mm; height: auto; max-height: 37mm; object-fit: cover;
  border-radius: 2px; flex: 0 0 auto;
}
/* Der Platzhalter steht NUR auf dem Schirm. In DOCX und PDF
   erscheint er nie - ein leerer Rahmen in einer Bewerbung ist
   schlimmer als kein Foto. */
.ah-app .lb-foto-platz {
  width: 28mm; height: 37mm; flex: 0 0 auto;
  border: 1px dashed #bbb; border-radius: 2px; background: #fafafa;
  color: #777; font-size: 10px; line-height: 1.3; padding: 4px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.ah-app .lb-foto-platz:hover { border-color: var(--blue); color: var(--blue); }
.ah-app .lb-name { font-size: 20pt; font-weight: 700; margin: 0 0 2px; color: #111;
  letter-spacing: -0.01em; }
.ah-app .lb-rolle { font-size: 12pt; color: #333; margin: 0 0 6px; }
/* Drei Stuecke, nicht ein Text. Auf dem Breitbild in einer Zeile
   mit Punkten dazwischen - die Punkte macht das CSS, damit sie
   beim Kopieren nicht mitkommen. Umgebrochen wird NICHT mitten im
   Wort: bis zum 05.11.2026 stand hier overflow-wrap: anywhere,
   und die Adresse brach als "marco.thom / ik@gmail.com". */
.ah-app .lb-kontakt { font-size: 10pt; color: #555;
  display: flex; flex-wrap: wrap; gap: 0 6px;
  overflow-wrap: normal; word-break: normal; }
.ah-app .lb-kontakt .lb-k + .lb-k::before { content: "\00b7"; margin-right: 6px; color: #999; }
/* Jedes Stueck wandert als GANZES in die naechste Zeile. Durfte es
   schrumpfen, brach es in sich um - und genau das soll nicht
   sein. */
.ah-app .lb-kontakt .lb-k { flex: 0 0 auto; max-width: 100%; }
/* Die E-Mail darf an einer Stelle brechen: hinter dem "@". Dort
   steht ein <wbr>. Die beiden Stuecke links und rechts davon
   brechen nicht in sich - auch nicht am Bindestrich der Domain,
   den CSS sonst als Trennstelle nimmt. */
.ah-app .lb-kontakt .lb-k-mail { overflow-wrap: normal; }
.ah-app .lb-kontakt .lb-k-mt { white-space: nowrap; }

.ah-app .lb-abschnitt { margin: 0 0 16px; }
.ah-app .lb-h {
  font-size: 11pt; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #111;
  margin: 0 0 8px; padding: 0 0 4px; border-bottom: 1px solid #ddd;
}
.ah-app .lb-text { margin: 0; color: #222; }
.ah-app .lb-station { margin: 0 0 12px; }
.ah-app .lb-station:last-child { margin-bottom: 0; }
.ah-app .lb-station-kopf {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.ah-app .lb-stelle { font-weight: 700; color: #111; }
.ah-app .lb-zeit { font-size: 10pt; color: #555; white-space: nowrap; }
.ah-app .lb-kennzahlen { font-size: 10pt; color: #555; margin: 1px 0 4px; }
.ah-app .lb-punkte { margin: 4px 0 0; padding-left: 18px; list-style: disc outside; }
.ah-app .lb-punkte li { margin: 0 0 3px; color: #222; }
.ah-app .lb-zeile2 {
  display: flex; justify-content: space-between; gap: 12px;
  align-items: baseline; margin: 0 0 3px; color: #222;
}
/* Beim Bearbeiten hervorgehoben - nur auf dem Schirm, nie im
   Export. */
.ah-app .lb-abschnitt.hervor { background: var(--blue-50); border-radius: 4px;
  box-shadow: 0 0 0 6px var(--blue-50); }

/* ---------- Zwei Haelften ----------
   Ab 1000 px stehen Bearbeiten und Vorschau nebeneinander, und
   die Reiter oben verschwinden: es gibt nichts mehr umzuschalten.
   Darunter zeigt jeweils eine Haelfte, und data-ansicht an der
   Huelle sagt welche. Die Grenze steht NUR hier - nicht noch
   einmal in JavaScript. */
.ah-app .lb-zwei { display: block; }
.ah-app .lb-haelfte { min-width: 0; }

@media (max-width: 999px) {
  .ah-app .lb-zwei[data-ansicht="vorschau"] .lb-h-bearb { display: none; }
  .ah-app .lb-zwei[data-ansicht="bearbeiten"] .lb-h-vorschau { display: none; }
}

@media (min-width: 1000px) {
  .ah-app .lb-reiter { display: none; }
  .ah-app .lb-zwei {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 643px);
    gap: 24px; align-items: start;
  }
  /* Das Blatt bleibt stehen, waehrend links gescrollt wird. */
  .ah-app .lb-h-vorschau { position: sticky; top: 84px; max-height: calc(100vh - 110px);
    overflow: auto; }
  .ah-app .lb-seite { margin: 0; }
}

/* ---------- Die drei Vorlagen ---------- */
/*
   Klassisch ist der Stand, wie er war - hier steht nichts, und
   das ist Absicht: die Vorgabe soll nicht von einer Regel
   abhaengen, die jemand spaeter aendert.

   Modern: der Name groesser, eine farbige Linie unter dem Kopf,
   die Abschnittsueberschriften in der Akzentfarbe. Mehr nicht -
   ein Lebenslauf ist kein Plakat.

   Kompakt: engere Abstaende, kleinere Schrift. Fuer die langen
   Lebenslaeufe, die sonst eine vierte Seite anfangen.

   Die Akzentfarbe kommt als Variable vom Blatt (--lb-akzent);
   ihre vier Werte sind gerechnet, nicht gewaehlt: alle ueber
   4,5:1 gegen Weiss und im Graustufendruck dunkel.
*/
.ah-app .lb-seite[data-schrift="serif"] {
  font-family: Georgia, "DejaVu Serif", "Times New Roman", serif;
}

.ah-app .lb-seite[data-vorlage="modern"] .lb-name { font-size: 23pt; }
.ah-app .lb-seite[data-vorlage="modern"] .lb-kopf {
  border-bottom: 2px solid var(--lb-akzent, #111);
  padding-bottom: 8px;
}
.ah-app .lb-seite[data-vorlage="modern"] .lb-h {
  color: var(--lb-akzent, #111);
  border-bottom-color: var(--lb-akzent, #111);
}

.ah-app .lb-seite[data-vorlage="kompakt"] {
  font-size: 10pt; line-height: 1.26;
}
.ah-app .lb-seite[data-vorlage="kompakt"] .lb-name { font-size: 17pt; }
.ah-app .lb-seite[data-vorlage="kompakt"] .lb-abschnitt { margin-top: 9pt; }
.ah-app .lb-seite[data-vorlage="kompakt"] .lb-station { margin-bottom: 6pt; }
.ah-app .lb-seite[data-vorlage="kompakt"] .lb-punkte li { margin-bottom: 1pt; }
.ah-app .lb-seite[data-vorlage="kompakt"] .lb-kennzahlen { margin: 0 0 2px; }

/* ---------- Die Auswahl des Aussehens ---------- */
.ah-app .lb-wahl { display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  flex-wrap: wrap; }
.ah-app .lb-wahl-titel { font-size: 12px; color: var(--muted); min-width: 92px; }
.ah-app .lb-wahl-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.ah-app .lb-wahl-knoepfe .btn.on {
  border-color: var(--blue); background: var(--blue-50); color: var(--ink);
}
/* Der Punkt in der Akzentfarbe steht NUR hier, in der Auswahl.
   Im Blatt und im Export kommt er nie vor - dort traegt die
   Farbe die Ueberschrift, und ein ATS liest Text. */
.ah-app .lb-farbpunkt {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: -1px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
@media (max-width: 640px) {
  .ah-app .lb-wahl-titel { min-width: 0; width: 100%; }
}

/* ---------- Bearbeiten ---------- */
.ah-app .lb-gruppe { margin: 0 0 20px; }
.ah-app .lb-gruppe h3 { font-size: 14px; margin: 0 0 10px; }
.ah-app .lb-label { display: block; margin: 0 0 8px; }
.ah-app .lb-label > span { display: block; font-size: 12px; color: var(--muted);
  margin: 0 0 3px; }
.ah-app .lb-feld {
  width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 14px; background: var(--surface);
  color: var(--ink); resize: vertical;
}
.ah-app .lb-feld:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
/* Wo der Browser es kann, waechst das Feld mit dem Text - dann
   stimmt die gerechnete Zeilenzahl auch beim Tippen noch. */
.ah-app textarea.lb-feld { field-sizing: content; min-height: 3.4em; }
/* Was der Nutzer geaendert hat, ist zu sehen - sonst weiss
   niemand mehr, was aus dem Lebenslauf kam und was von ihm. */
.ah-app .lb-feld.geaendert { border-color: var(--blue); background: var(--blue-50); }

.ah-app .lb-ab-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border);
}
.ah-app .lb-ab-zeile.aus { opacity: 0.55; }
.ah-app .lb-schalter { display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 14px; }
.ah-app .lb-pfeile { display: inline-flex; gap: 4px; }
.ah-app .lb-st-bearb { margin: 0 0 14px; padding: 0 0 12px;
  border-bottom: 1px solid var(--border); }
.ah-app .lb-st-bearb:last-child { border-bottom: 0; }
.ah-app .lb-st-titel { font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.ah-app .lb-punkt-bearb { margin: 0 0 6px; display: flex; gap: 6px; align-items: flex-start; }
.ah-app .lb-punkt-bearb .lb-feld { flex: 1 1 auto; }
.ah-app .lb-punkt-griffe { display: inline-flex; flex-direction: column; gap: 2px; }
.ah-app .lb-punkt-griffe .btn { padding: 2px 8px; line-height: 18px; }

/* ---------- Eine Liste, die man bearbeiten kann (Runde "leer
   anfangen", 06.11.2026) ----------
   Dieselben Griffe wie bei den Stichpunkten einer Station, nur
   nebeneinander statt uebereinander: eine Kenntnis ist eine Zeile,
   kein Absatz, und drei Knoepfe uebereinander waeren hoeher als
   das Feld daneben. */
.ah-app .lb-liste { margin: 0 0 6px; }
.ah-app .lb-liste-zeile {
  display: flex; gap: 6px; align-items: center; margin: 0 0 6px;
}
.ah-app .lb-liste-zeile .lb-feld { flex: 1 1 auto; }
.ah-app .lb-liste-zeile .lb-punkt-griffe { flex-direction: row; gap: 4px; }
.ah-app .lb-liste-dazu { margin-top: 2px; }

/* Die zwei Griffe je Kenntnis: auf dem Blatt (gefuellter Punkt)
   oder nicht (leerer), und in die andere Gruppe. */
.ah-app .lb-kenn-blatt { color: var(--muted-2); min-width: 30px; }
.ah-app .lb-kenn-blatt.an { color: var(--blue); }
/* Das Niveau braucht keine halbe Zeile - "C1" sind zwei Zeichen. */
.ah-app .lb-feld-schmal { flex: 0 0 72px; }

/* ---------- Was mit dem Getippten geschieht (06.11.2026) ----------
   Er steht in der Hauptleiste und bleibt stehen. Das Gruen dauert
   drei Sekunden und geht dann in die normale Schriftfarbe ueber:
   ein Haken, der dauerhaft gruen leuchtet, ist nach dem zehnten Mal
   keine Auskunft mehr, sondern Dekoration. */
/* Der Weg zurueck zur Toolbox (Punkt 7). Links aussen, wo man ihn
   sucht - und mit dem Pfeil im Text, damit die Richtung auch ohne
   Farbe zu sehen ist. */
.ah-app .lb-zurueck-toolbox { margin-right: 4px; }

/* ---------- Die Mappe je Stelle (08.11.2026) ----------
   Eine Karte je Stelle, darin drei Zeilen: Anschreiben,
   Lebenslauf-Tipps, angepasster Lebenslauf. Was fehlt, steht als
   "Erstellen" da.

   Keine Kopie fremder Optik: dieselben Linien, Abstaende und
   Knoepfe wie ueberall sonst in der App. */
/* KACHELN, NICHT EINE LANGE LISTE (Marco, 09.11.2026).
   Untereinander wurde die Toolbox mit jeder Bewerbung
   unuebersichtlicher. auto-fill mit 300 px ergibt von selbst
   zwei bis drei Spalten auf dem Schirm und eine auf dem Telefon -
   ohne eine Zahl, die bei der naechsten Breite nicht mehr
   stimmt. */
.ah-app .mappen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}
.ah-app .mappe {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  /* Eine Kachel muss man als Kachel sehen. Auf der weissen Karte
     war sie vorher unsichtbar: Rahmen und Hintergrund waren
     dieselbe Farbe wie der Grund (am Bild gesehen, 09.11.2026). */
  background: var(--surface-alt, #f9fafb);
  /* OHNE DIESE ZEILE SCHRUMPFT DIE KACHEL NICHT (09.11.2026).
     Ein Gitterkind hat min-width: auto und wird so breit wie sein
     laengster Inhalt - am Handy lief die Kachel aus der Karte
     heraus, "noch nicht da" war abgeschnitten und "Erstellen" gar
     nicht zu sehen. Am Bild gesehen, nicht im Code vermutet. */
  min-width: 0;
}
.ah-app .mappe-kopf {
  display: flex; align-items: baseline; gap: 10px;
  /* OHNE flex-wrap KONNTE DIE HANDY-REGEL NICHT GREIFEN
     (Marco, 09.11.2026): "Datum auf volle Breite" stand schon da,
     aber zwei Kinder, die beide 100 Prozent wollen, stehen ohne
     Umbruch weiter nebeneinander - und der Titel schob sich ueber
     das Datum. */
  flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
/* In der Kachel bekommt der Titel die ganze Breite und bricht um.
   Die drei Punkte sind hier falsch: der Name der Stelle ist das
   Erste, woran der Nutzer sie wiedererkennt. */
.ah-app .mappe .toolbox-stelle { flex: 1 1 100%; }
.ah-app .mappe .toolbox-stelle .title {
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere;
}
.ah-app .mappe .toolbox-stelle .sub {
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere;
}
/* Und das Datum darunter, nicht daneben. */
.ah-app .mappe .mappe-datum { margin-left: 0; flex: 1 1 100%; }
.ah-app .mappe-datum { margin-left: auto; white-space: nowrap; }

/* Wie weit ist diese Bewerbung, und wo steht die Anzeige? */
.ah-app .mappe-stand-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 2px 0 6px;
}
.ah-app .mappe-fortschritt { color: var(--muted); }
.ah-app .mappe-fortschritt[data-voll="ja"] { color: var(--gruen, #059669); font-weight: 650; }
.ah-app .mappe-anzeige { margin-left: auto; white-space: nowrap; }

.ah-app .mappe-zeile {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
  font-size: 13px;
}
/* Die Zeile selbst oeffnet: ein Knopf ueber die ganze Breite,
   der aussieht wie eine Zeile. Links der Haken, dann der Name,
   dann der Stand. */
.ah-app .mappe-auf {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: none; border: 0; padding: 4px 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  border-radius: 6px;
}
.ah-app .mappe-auf:hover .mappe-was { text-decoration: underline; }
.ah-app .mappe-auf:focus-visible { outline: 2px solid var(--blau, #3b82f6); outline-offset: 2px; }
.ah-app .mappe-haken { width: 1em; flex: 0 0 auto; color: var(--gruen, #059669); }
.ah-app .mappe-zeile[data-da="nein"] .mappe-haken { color: var(--muted); }
.ah-app .mappe-was { font-weight: 600; }
.ah-app .mappe-stand { margin-left: auto; white-space: nowrap; }
/* Was noch fehlt, steht leiser da - aber nicht unsichtbar: die
   Mappe soll auch sagen, was zu tun ist. */
.ah-app .mappe-zeile[data-da="nein"] .mappe-was { color: var(--muted); font-weight: 500; }
.ah-app .mappe-knoepfe {
  display: flex; gap: 4px; flex: 0 0 auto;
}

/* Die Werkzeuge: klein und leise. Ihre Beschriftung steht im
   Tooltip und im aria-label - ein Symbol allein sagt einem
   Screenreader nichts. */
.ah-app .btn-werkzeug {
  border: 1px solid var(--border); background: var(--card);
  border-radius: 6px; padding: 2px 6px; min-height: 24px;
  font-size: 11px; line-height: 1.4; color: var(--muted);
  cursor: pointer;
}
.ah-app .btn-werkzeug:hover:not(:disabled) { color: var(--text); border-color: var(--line); }
.ah-app .btn-werkzeug:disabled { opacity: 0.45; cursor: default; }
.ah-app .mappe-neu { white-space: nowrap; }

@media (max-width: 640px) {
  .ah-app .mappen { grid-template-columns: 1fr; }
  .ah-app .mappe-datum { margin-left: 0; flex: 1 1 100%; }
  /* Auf 375 px passen Name und Stand nicht nebeneinander. Statt
     den Stand abzuschneiden, steht er darunter. */
  .ah-app .mappe-stand { margin-left: 0; flex: 1 1 100%; }
  .ah-app .mappe-auf { flex: 1 1 100%; }
  .ah-app .mappe-knoepfe { margin-left: 1.5em; }
}

/* Die Fassungen in der Toolbox (Punkt 6). */
.ah-app .fassungen { display: flex; flex-direction: column; gap: 2px; }
.ah-app .fassung-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--border);
  font-size: 13px;
}
.ah-app .fassung-zeile:first-child { border-top: 0; }
.ah-app .fassung-name { font-weight: 600; }
.ah-app .fassung-knoepfe {
  margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap;
}

@media (max-width: 640px) {
  .ah-app .fassung-knoepfe { margin-left: 0; flex: 1 1 100%; }
}

.ah-app .lb-speicher {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 12px; color: var(--muted-2); white-space: nowrap;
  min-width: 0;
}
.ah-app .lb-speicher-wort { font-weight: 650; }
.ah-app .lb-speicher-ziel {
  color: var(--muted-2); overflow: hidden; text-overflow: ellipsis;
}
.ah-app .lb-speicher[data-zustand="gespeichert"] .lb-speicher-wort {
  animation: lb-gespeichert 3s ease-out forwards;
}
@keyframes lb-gespeichert {
  0%, 40% { color: var(--gruen, #1a7f45); }
  100%    { color: var(--muted-2); }
}
.ah-app .lb-speicher[data-zustand="fehler"] .lb-speicher-wort { color: var(--rot); }
.ah-app .lb-speicher[data-zustand="fehler"] { color: var(--rot); }

@media (max-width: 640px) {
  /* Auf dem Telefon hat die Leiste keinen Platz fuer das Ziel -
     der Zustand bleibt, das "wohin" steht in der Fassungsleiste. */
  .ah-app .lb-speicher-ziel { display: none; }
}
.ah-app .lb-st-kopf { display: flex; justify-content: space-between; gap: 10px;
  align-items: baseline; margin: 0 0 8px; }
/* Eine ausgeblendete Station bleibt sichtbar, aber zurueckgenommen:
   sie ist nicht geloescht, nur nicht auf dem Blatt. */
.ah-app .lb-st-bearb.aus { opacity: 0.55; }
.ah-app .lb-st-bearb.aus .lb-st-titel { text-decoration: line-through; }

/* Auf dem Telefon kann ein A4-Blatt nicht A4 bleiben. Die Raender
   schrumpfen, die Schrift bleibt lesbar, und die Zeitangabe rutscht
   unter die Stelle, statt sie abzuschneiden. */
@media (max-width: 640px) {
  /* Kein Ueberhang mehr: die zwei Pixel nach links und rechts
     holten etwas Breite, verletzten aber den 16-px-Rand, auf den
     sich alles andere verlaesst. */
  .ah-app .lb-seite { padding: 16px 14px; font-size: 10.5pt; border-radius: 0; }
  .ah-app .lb-name { font-size: 17pt; }
  /* Schmaler Schirm: das Foto nimmt weniger Platz, damit die
     Adresse daneben ganz dasteht. */
  /* 64 px breit, Hochformat 3:4 - so bleibt neben dem Bild Platz
     fuer die Adresse, und das Bild ist noch als Bild zu erkennen. */
  .ah-app .lb-foto { width: 64px; max-height: 85px; }
  .ah-app .lb-foto-platz { width: 64px; height: 85px; font-size: 9px; }
  /* Der Kopf auf dem Telefon: Foto neben Name und Rolle, die
     Kontaktzeilen darunter ueber die ganze Breite. Vorher standen
     sie neben dem Foto, und dort blieben von 311 px nur 239 -
     eine lange Adresse lief daraus heraus. Statt sie mitten im
     Wort zu brechen, bekommt sie die ganze Zeile.
     display: contents gibt die Kinder des Textblocks in dieses
     Gitter, ohne den Aufbau zu aendern. */
  .ah-app .lb-kopf.mit-foto {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px; align-items: start;
  }
  .ah-app .lb-kopf.mit-foto .lb-kopf-text { display: contents; }
  .ah-app .lb-kopf.mit-foto .lb-name { grid-column: 1; grid-row: 1; }
  .ah-app .lb-kopf.mit-foto .lb-rolle { grid-column: 1; grid-row: 2; }
  .ah-app .lb-kopf.mit-foto .lb-foto,
  .ah-app .lb-kopf.mit-foto .lb-foto-platz { grid-column: 2; grid-row: 1 / span 2; }
  .ah-app .lb-kopf.mit-foto .lb-kontakt { grid-column: 1 / -1; grid-row: 3; }
  .ah-app .lb-kopf.mit-foto { gap: 10px; }
  .ah-app .lb-station-kopf { flex-direction: column; gap: 0; }
  .ah-app .lb-zeile2 { flex-direction: column; gap: 0; }
  .ah-app .lb-zeit { white-space: normal; }
  .ah-app .lb-leiste { gap: 8px; }
  .ah-app .lb-reiter { flex: 0 1 auto; }
  .ah-app .lb-reiter button { flex: 0 1 auto; padding: 7px 10px; }
  /* Jedes Stueck auf seiner Zeile - und die Punkte weg, die auf
     dem Breitbild dazwischenstehen. */
  .ah-app .lb-kontakt { display: block; }
  .ah-app .lb-kontakt .lb-k { display: block; }
  .ah-app .lb-kontakt .lb-k + .lb-k::before { content: none; margin: 0; }
  /* Ein Knopf rechts, und die Formate darunter. */
  .ah-app .lb-formate { position: relative; }
  .ah-app .lb-formate-liste {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-sm);
    padding: 6px; display: flex; flex-direction: column; gap: 4px;
    min-width: 190px; max-width: calc(100vw - 32px);
  }
  .ah-app .lb-formate-liste .btn { justify-content: flex-start; text-align: left; }
  .ah-app .lb-leiste2 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
}