/* 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%;
}

/* ---------- 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;
  display: grid; grid-template-columns: repeat(4, 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;
}
.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. */
.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; }
.ah-app .pavatar {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-50); color: var(--blue); font-weight: 700; font-size: 21px;
}
.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; }
.ah-app .marke-bild { height: 30px; 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: 28px; }
  .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;
}

.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; }
.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); }
.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. */
.ah-app .analyse-laeuft {
  max-width: 560px; margin: 48px auto 0;
  padding: 36px var(--raum-karte);
  text-align: center;
}
.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; }
}

/* ---------- Faehigkeiten nach Art ----------
   Drei Toene aus den Tokens, bewusst blass: die Farbe ordnet, sie
   schreit nicht. "fachlich" ist die Mehrheit und bleibt am
   unauffaelligsten. Gilt fuer die Chips im Profil (.chip-x) wie fuer
   die in "Dein Markt" (.skillchip) - dieselbe Sache, dieselbe Farbe. */
.ah-app .art-fachlich {
  background: var(--blue-50); border-color: var(--blue-100); color: var(--ink-2);
}
.ah-app .art-software {
  background: var(--violet-bg); border-color: var(--violet-bg); color: var(--violet);
}
.ah-app .art-sprache {
  background: var(--green-50); border-color: var(--green-bg); color: #15803d;
}
/* Im Markt-Block tragen die Chips schon ein Zeichen fuer "hast du"
   und "fehlt dir". Dort faerbt die Art nur den Hintergrund, damit die
   beiden Aussagen nicht miteinander streiten. */
.ah-app .skillchip.art-fachlich,
.ah-app .skillchip.art-software,
.ah-app .skillchip.art-sprache { border-color: var(--line); }

/* Die Legende nennt die drei Arten einmal, klein und grau. */
.ah-app .art-legende {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: var(--raum-aktion); font-size: 12px; color: var(--muted);
}
.ah-app .art-legende span { display: inline-flex; align-items: center; gap: 5px; }
.ah-app .art-punkt { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }


.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; }
.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);
}