/* =====================================================================
   Bewerbungs-Portal - Stylesheet (neu geordnet 10.11.2026)

   Handy zuerst. Genau drei Breiten:
     Handy     bis 767 px   Tab-Leiste als Insel oben (Nr. 53, 13.11.2026), Aktionsleiste unten, eine Spalte
     Tablet    768-1023 px  wie Handy, Inseln mittig begrenzt, Raster mit zwei Spalten
     Computer  ab 1024 px   Tabs oben in der Kopfzeile, Aktionsleiste als schwebende Pille
   Zusaetzlich: Querformat mit wenig Hoehe (Handy quer) kompakter.

   Regeln:
   - Jede Regel steht genau einmal. Aenderungen am Aussehen nur in den Tokens (:root).
   - Keine Inline-Stile im HTML (CSP style-src 'self'): Breiten/Hoehen von Balken als Klassen w-/h-.
   - Nie overflow auf html und body zugleich (blockiert Scrollen auf iOS, Fehler 09.11.2026).
   - Schrift in Feldern mind. 16 px (sonst zoomt iOS), Tippflaechen mind. 44 px.
   - Datenfarbe der Statistik #00909a (Diagramm-Validator: Helligkeit, Saettigung, Kontrast ok),
     Texte immer in Textfarbe.
   ===================================================================== */

/* ---------------------------------------------------------------- Tokens */
:root {
  color-scheme: light;
  --bg: #f6f5f1;
  --text: #1b2627;
  --dim: #5d6a6b;
  --akzent: #0e6b6f;
  --akzent2: #157a7d;
  --erfolg: #1e7f4f;
  --fehler: #b42318;
  --warn-text: #8a4b00;
  --warn-bg: #fdf0dc;
  --warn-rand: #f0d3a6;
  --mittel: #9a6700;
  --daten: #00909a;

  --glas: rgba(255, 255, 255, 0.62);
  --glas-stark: rgba(255, 255, 255, 0.86);
  --kante: rgba(255, 255, 255, 0.8);
  --linie: rgba(14, 54, 56, 0.10);
  --tint: color-mix(in srgb, var(--akzent) 9%, #fff);
  --tint-stark: color-mix(in srgb, var(--akzent) 16%, #fff);
  --spur: color-mix(in srgb, var(--akzent) 7%, #fff);
  --schatten: 0 1px 1px rgba(14, 54, 56, .04), 0 18px 44px -22px rgba(14, 54, 56, .22);
  --unschaerfe: saturate(180%) blur(20px);

  --rund: 22px;          /* Kacheln */
  --karte-rund: 18px;    /* Karten */
  --knopf-rund: 14px;    /* alle Knoepfe */
  --feld-rund: 12px;     /* Felder, Chips */
  --karte-pad: 1.1rem;   /* Innenabstand Karte, Zellen ragen genau so weit hinaus */
  --rand: 16px;          /* Seitenrand */
  --tipp: 44px;          /* Mindestgroesse Tippflaeche */

  /* Inseln (Handy, Tablet): Tab-Leiste oben, Aktionsleiste unten */
  --tabhoehe: 62px;
  --leiste: 0px;
  --insel-abstand: 10px;
  --insel-max: 34rem;
  --insel-glas: rgba(255, 255, 255, 0.55);
  --insel-rand: rgba(255, 255, 255, 0.7);
  --insel-schatten: 0 10px 30px -10px rgba(14, 54, 56, .28);
}

/* ---------------------------------------------------------------- Grundlage */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: clip; /* nur body, kein eigener Scrollbereich */
}
[hidden] { display: none !important; }
a { color: var(--akzent); }
button, a, label, summary { touch-action: manipulation; }
img, svg, video, select, input, textarea, button { max-width: 100%; }
p, li, h1, h2, h3, a, span, strong, label, summary, td { overflow-wrap: break-word; word-break: normal; }
.hintergrund {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40rem 30rem at 10% -10%, color-mix(in srgb, var(--akzent2) 28%, transparent), transparent 70%),
    radial-gradient(35rem 28rem at 100% 0%, color-mix(in srgb, var(--akzent) 18%, transparent), transparent 70%);
}
.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.unsichtbar { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* Feld gegen Bots */

/* ---------------------------------------------------------------- Schrift */
h1 {
  font-size: clamp(1.9rem, 7vw, 3rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .6rem;
  hyphens: manual; -webkit-hyphens: manual;
}
h2 { font-size: 1.25rem; letter-spacing: -.01em; margin: 0 0 .4rem; }
.dim { color: var(--dim); }
.gross { font-size: 1.2rem; }
.klein { font-size: .88rem; }
.titel { font-weight: 600; text-decoration: none; color: var(--text); }
.fehler { color: var(--fehler); font-weight: 500; }
.gut { color: var(--erfolg); }
.weg { color: var(--warn-text); }
.gefahr-text { color: var(--fehler); }
.umbruch { overflow-wrap: anywhere; font-size: clamp(1.5rem, 6vw, 2.4rem); }
.dateiname { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Kopfzeile */
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: nowrap;
  min-height: 48px;
  padding: calc(.5rem + env(safe-area-inset-top)) max(var(--rand), env(safe-area-inset-right)) .5rem max(var(--rand), env(safe-area-inset-left));
  background: var(--glas); border-bottom: 1px solid var(--linie);
  backdrop-filter: var(--unschaerfe); -webkit-backdrop-filter: var(--unschaerfe);
}
.kopf > * { flex-shrink: 0; }
.marke { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.marke, .zurueck { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.zurueck {
  display: inline-flex; align-items: center; gap: .3rem; min-height: var(--tipp); margin-left: -.15rem; padding-right: .4rem;
  color: var(--akzent); text-decoration: none; font-size: 1.0625rem; font-weight: 500; line-height: 1;
}
.zurueck span { font-size: inherit; line-height: 1.2; margin: 0; }
.zurueck svg { width: 10px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.zurueck:active { opacity: .55; }
.abmelden { display: flex; align-items: center; gap: .8rem; margin: 0; flex-shrink: 1; min-width: 0; }
.abmelden .dim { min-width: 0; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.abmelden .knopf { white-space: nowrap; flex-shrink: 0; }
.testmarke {
  margin-left: auto; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-rand); white-space: nowrap;
}
.kopf .testmarke + .abmelden { margin-left: .8rem; }

/* ---------------------------------------------------------------- Seite */
.inhalt {
  flex: 1; width: 100%; max-width: 1040px; margin: 0 auto;
  padding: 1rem max(var(--rand), env(safe-area-inset-right)) 1.5rem max(var(--rand), env(safe-area-inset-left));
}
body.mit-tabs .inhalt {
  padding-bottom: calc(var(--leiste) + max(var(--insel-abstand), env(safe-area-inset-bottom)) + 1.5rem);
}
body:has(.aktionsleiste) { --leiste: 72px; }
.fuss { text-align: center; padding: 1.5rem var(--rand); font-size: .85rem; }
.fuss a { color: var(--dim); }
body.mit-tabs .fuss { display: none; }

.held { margin: .3rem 0 1.2rem; }
.held .gross { font-size: 1.05rem; }
.held.zeile { flex-wrap: nowrap; }
.held.zeile > div, .held.zeile > h1 { min-width: 0; flex: 1 1 auto; }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; min-width: 0; }
.zeile h2 { margin: 0; }
.schmal { max-width: 440px; margin: 2rem auto; }
.raster { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.raster.zwei { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
.felder { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 1rem; margin-bottom: 1rem; }
.breit { grid-column: 1 / -1; }
.stapel { display: grid; gap: 1rem; margin: 1rem 0; }
.karte, .raster > *, .stapel > *, .zeile > *, form { min-width: 0; }

/* ---------------------------------------------------------------- Karten */
.karte {
  padding: var(--karte-pad); border-radius: var(--karte-rund);
  background: var(--glas-stark); border: 1px solid var(--kante); box-shadow: var(--schatten);
}
.karte + .karte, details.karte, .stapel + details { margin-top: 1rem; }
details summary { cursor: pointer; font-weight: 600; }
details.karte > form { margin-top: 1rem; }
.karte.text h2 { margin-top: 1.1rem; }
.karte.text h2:first-child { margin-top: 0; }
.karte.text p { line-height: 1.6; }
.hinweis { margin-bottom: 1rem; }
.leer { text-align: center; padding: 2rem 1.2rem; }
.konto-karte { margin-top: 1rem; }
.konto-karte .zellen { margin-bottom: calc(-1 * var(--karte-pad)); }
.schritte-karte { margin-bottom: 1rem; }
.meldungen { margin-bottom: 1.2rem; }
.meldung { margin: 0 0 .5rem; padding: .7rem 1rem; border-radius: 14px; background: var(--glas-stark); border: 1px solid var(--kante); }
.meldung.error { color: var(--fehler); }
.hinweis-ok { margin: .2rem 0 .8rem; padding: .5rem .75rem; border-radius: 10px; font-size: .95rem;
  background: color-mix(in srgb, var(--erfolg) 10%, #fff); color: var(--erfolg); }
.einladen-karte input[readonly] { font-size: max(16px, .95rem); color: var(--dim); }
.hinweis-weg { margin: .6rem 0 0; padding: .5rem .75rem; border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); font-size: .92rem; }

/* ---------------------------------------------------------------- Felder */
label { display: block; font-size: .9rem; font-weight: 500; margin: 1rem 0 .35rem; }
input[type=email], input[type=password], input[type=text], input[type=url], input[type=number],
input[type=search], input[type=tel], input[type=month], input[type=date], textarea, select {
  width: 100%; min-height: var(--tipp); padding: .7rem .9rem;
  font: inherit; font-size: max(16px, 1rem); color: var(--text);
  background: var(--glas-stark); border: 1px solid var(--linie); border-radius: var(--feld-rund);
}
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
textarea { min-height: 8rem; line-height: 1.55; resize: vertical; }
select { text-overflow: ellipsis; }
input[type=file] { font: inherit; font-size: .95rem; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--akzent); margin-right: .8rem; padding: .55rem 1rem; cursor: pointer;
  background: color-mix(in srgb, var(--akzent) 10%, transparent); border: 0; border-radius: 999px;
}
/* Monat und Datum: gleiche Hoehe wie Textfelder, Kalender-Symbol in der Akzentfarbe */
input[type=month], input[type=date] { -webkit-appearance: none; appearance: none; display: flex; align-items: center; }
input[type=month]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .75; padding: .2rem; border-radius: 6px;
  filter: invert(29%) sepia(64%) saturate(600%) hue-rotate(140deg);
}
input[type=month]::-webkit-calendar-picker-indicator:hover, input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type=month]::-webkit-date-and-time-value, input[type=date]::-webkit-date-and-time-value { text-align: left; }
input:focus, textarea:focus, select:focus { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset: 1px; }
.feldtitel { font-size: .9rem; font-weight: 500; margin: 1.1rem 0 .2rem; }
.hilfe { margin: .3rem 0 0; }
.haken { display: flex; gap: .6rem; align-items: center; min-height: var(--tipp); margin-top: 1.2rem; font-weight: 400; }
.haken input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--akzent); }
.pensum { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pensum label { margin: 0; }
.pensum select { width: auto; min-width: 0; flex: 1 1 6rem; }
.felder-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }

/* ---------------------------------------------------------------- Knoepfe
   Haupt: Petrol einfarbig. Neben (.leise): zart getoent. Gefahr: rot.
   Alle gleich rund. Hauptknopf in Formularen volle Breite. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 50px; max-width: 100%; margin-top: 1.2rem; padding: .8rem 1.3rem;
  font: inherit; font-size: 1.02rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; text-align: center; text-decoration: none;
  white-space: normal; overflow-wrap: normal; word-break: keep-all;
  color: #fff; background: var(--akzent); border: 0; border-radius: var(--knopf-rund); cursor: pointer;
  box-shadow: 0 1px 2px rgba(14, 54, 56, .12), 0 6px 16px -8px color-mix(in srgb, var(--akzent) 70%, transparent);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease, opacity .12s ease;
  -webkit-user-select: none; user-select: none;
}
.knopf:hover { background: color-mix(in srgb, var(--akzent) 92%, #000); }
.knopf:active { transform: scale(.98); background: color-mix(in srgb, var(--akzent) 84%, #000); box-shadow: 0 1px 2px rgba(14, 54, 56, .12); }
.knopf:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 35%, transparent); outline-offset: 2px; }
.knopf.leise {
  min-height: var(--tipp); margin: 0; padding: .6rem 1.05rem; font-size: .95rem;
  color: var(--akzent); background: var(--tint); box-shadow: none;
}
.knopf.leise:hover { background: var(--tint-stark); }
.knopf.leise:active { transform: scale(.97); background: color-mix(in srgb, var(--akzent) 22%, #fff); }
.knopf.leise.aktiv, .knopf.leise.wichtig { color: #fff; background: var(--akzent); }
.knopf.leise.aktiv:active, .knopf.leise.wichtig:active { background: color-mix(in srgb, var(--akzent) 84%, #000); }
.knopf.gefahr { background: var(--fehler); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--fehler) 70%, transparent); }
.knopf.leise.gefahr-text { color: var(--fehler); background: color-mix(in srgb, var(--fehler) 8%, #fff); }
.knopf.leise.gefahr-text:active { background: color-mix(in srgb, var(--fehler) 16%, #fff); }
.knopf[disabled], .knopf[disabled]:hover, .knopf[disabled]:active { opacity: .45; transform: none; cursor: not-allowed; box-shadow: none; }

form .knopf:not(.leise) { width: 100%; }
.hinweis .knopf, .loeschen-zeile .knopf, .konto-karte .knopf, .zeile .knopf.leise, .karte > form:not(.knopfreihe) .knopf.leise { width: auto; }
.schmal-knopf { width: auto !important; margin-top: 0; }

/* Knopfreihen: gleich breit, gleich hoch. Handy/Tablet 2 Spalten, bei ungerader Zahl
   erster Knopf (Hauptaktion) volle Breite. Computer: feste Spaltenbreite, linksbuendig. */
.knopfreihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; align-items: stretch; margin-top: .8rem; }
.knopfreihe > * { min-width: 0; margin: 0; }
.knopfreihe > form { display: flex; }
/* Rueckfall fuer aeltere Browser: einzelner Knopf in einer Formular-Reihe ueber die ganze Breite */
.knopfreihe > button:only-of-type { grid-column: 1 / -1; }
/* Ungerade Anzahl sichtbarer Knoepfe (auch nur einer): der erste ueber die ganze Breite.
   Gezaehlt werden nur Knoepfe und Formulare, nicht versteckte Felder (CSRF) oder versteckte Knoepfe. */
.knopfreihe > :is(.knopf, form):not([hidden]):nth-child(1 of :is(.knopf, form):not([hidden])):nth-last-child(odd of :is(.knopf, form):not([hidden])) { grid-column: 1 / -1; }
.knopfreihe .knopf { width: 100%; min-height: 48px; margin: 0; padding: .55rem .8rem; }
.knopfreihe .knopf:not(.leise) { font-size: .95rem; }
.treffer .knopfreihe { margin-top: .6rem; }

/* Wisch-Reihe: viele Knoepfe nebeneinander, seitlich wischen */
.knopfreihe.wisch, .filter.wisch {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.knopfreihe.wisch { margin-left: calc(-1 * var(--karte-pad)); margin-right: calc(-1 * var(--karte-pad)); padding: 0 var(--karte-pad) .2rem; }
.filter.wisch { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); padding: 0 var(--rand) .2rem; }
.knopfreihe.wisch::-webkit-scrollbar, .filter.wisch::-webkit-scrollbar { display: none; }
.knopfreihe.wisch > *, .filter.wisch > * { flex: 0 0 auto; scroll-snap-align: start; grid-column: auto; }
.knopfreihe.wisch .knopf { width: auto; min-height: var(--tipp); white-space: nowrap; }

/* Plus im Titel */
.plus {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--tipp); height: var(--tipp); border-radius: 50%;
  background: var(--tint); color: var(--akzent); font-size: 1.8rem; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: transform .12s ease, background-color .12s ease;
}
.plus:active { transform: scale(.94); background: var(--tint-stark); }

/* ---------------------------------------------------------------- Chips, Filter, Umschalter */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .6rem; }
.chip { position: relative; display: inline-flex; margin: 0; font-weight: 500; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: var(--tipp); padding: .55rem 1rem; white-space: nowrap;
  font-size: .95rem; font-weight: 500; background: #fff; border: 1px solid var(--linie); border-radius: var(--feld-rund);
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.chip:hover span { border-color: color-mix(in srgb, var(--akzent) 40%, transparent); }
.chip:active span { transform: scale(.97); }
.chip input:checked + span { background: var(--tint); border-color: color-mix(in srgb, var(--akzent) 55%, transparent); color: var(--akzent); font-weight: 600; }
.chip input:checked + span::before { content: "\2713\00a0"; color: var(--akzent); font-weight: 700; }
.chip.nein input:checked + span { background: color-mix(in srgb, var(--fehler) 7%, #fff); border-color: color-mix(in srgb, var(--fehler) 45%, transparent); color: var(--fehler); }
.chip.nein input:checked + span::before { content: "\2715\00a0"; color: var(--fehler); }
.chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset: 2px; }

.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.chip-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: .4rem .9rem; white-space: nowrap;
  font-size: .9rem; color: var(--text); text-decoration: none; background: #fff; border: 1px solid var(--linie); border-radius: var(--feld-rund);
}
.chip-link.aktiv { color: var(--akzent); font-weight: 600; background: var(--tint); border-color: color-mix(in srgb, var(--akzent) 45%, transparent); }

.umschalter { display: flex; padding: 3px; margin: 0 0 1rem; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.umschalter a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 38px; border-radius: 9px; white-space: nowrap;
  color: var(--text); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.umschalter a[aria-current="page"] { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-weight: 600; }
.zahl {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--akzent); color: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap;
}

/* ---------------------------------------------------------------- Abzeichen */
.passung {
  display: inline-block; flex-shrink: 0; padding: .25rem .65rem; border-radius: 999px; white-space: nowrap; text-align: center;
  font-size: .8rem; font-weight: 600; background: var(--glas-stark); border: 1px solid transparent;
}
.passung.gross { font-size: .9rem; padding: .4rem .8rem; }
.passung.p4, .passung.p5 { color: var(--erfolg); background: color-mix(in srgb, var(--erfolg) 10%, #fff); }
.passung.p3 { color: var(--mittel); background: color-mix(in srgb, var(--mittel) 10%, #fff); }
.passung.p1, .passung.p2 { color: var(--fehler); background: color-mix(in srgb, var(--fehler) 8%, #fff); }
.status {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px; white-space: nowrap;
  font-size: .8rem; font-weight: 600; color: var(--dim); background: var(--glas-stark); border: 1px solid var(--linie);
}
.status.s-freigegeben { color: var(--akzent); border-color: color-mix(in srgb, var(--akzent) 40%, transparent); }
.status.s-versendet { color: var(--erfolg); border-color: color-mix(in srgb, var(--erfolg) 35%, transparent); }
.status-box { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
/* Status der Arbeitgeber (Verwaltung) */
.status.st-ok { color: var(--erfolg); border-color: color-mix(in srgb, var(--erfolg) 35%, transparent); }
.status.st-fehler { color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 35%, transparent); }
.status.st-info { color: var(--akzent); border-color: color-mix(in srgb, var(--akzent) 40%, transparent); }
.status.st-neutral { color: var(--dim); }

/* ---------------------------------------------------------------- Listen (Zellen wie iOS) */
.zellen { list-style: none; margin: .2rem calc(-1 * var(--karte-pad)) 0; padding: 0; }
.zellen li { border-top: 1px solid var(--linie); }
.zellen li:first-child { border-top: 0; }
.zellen a, .zellen button {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%;
  min-height: 52px; padding: .7rem 2.4rem .7rem var(--karte-pad);
  font: inherit; color: var(--text); text-decoration: none; text-align: left; background: none; border: 0; cursor: pointer;
}
.zellen a::after {
  content: ""; position: absolute; right: var(--karte-pad); top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(-45deg); opacity: .6;
}
.zellen a:active, .zellen button:active { background: var(--linie); }
.zellen a > span:first-child, .zellen a > div:first-child { min-width: 0; flex: 1 1 auto; }
.zellen .titel { font-weight: 600; }
.zellen form { margin: 0; }
.zellen .gefahr-text { color: var(--fehler); }
.zellen.kompakt li { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .6rem var(--karte-pad); }
.zellen.kompakt li > :first-child { min-width: 0; }
.zellen.kompakt li > :last-child { text-align: right; font-variant-numeric: tabular-nums; }
.zellen.konten a { padding-top: .7rem; padding-bottom: .7rem; }

/* ---------------------------------------------------------------- Start: Schritte */
.schritte { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.schritte li { display: flex; align-items: center; gap: .8rem; font-size: 1.05rem; }
.schritte .punkt {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem;
  border-radius: 50%; border: 2px solid var(--linie); font-weight: 700; font-size: .9rem;
}
.schritte li.fertig { color: var(--dim); }
.schritte li.fertig .punkt { border-color: var(--erfolg); color: var(--erfolg); }
.schritte li.jetzt .punkt { border-color: var(--akzent); color: var(--akzent); }
.schritte li.jetzt a { font-weight: 600; }

/* ---------------------------------------------------------------- Stellen und Treffer */
.treffer { list-style: none; margin: 0; padding: 0; }
.treffer > li { padding: .9rem 0; border-top: 1px solid var(--linie); }
.treffer > li:first-child { border-top: 0; padding-top: 0; }
.treffer-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; color: var(--text); text-decoration: none; }
.treffer-kopf > span:first-child { min-width: 0; flex: 1 1 auto; }
.treffer p { margin: .35rem 0; overflow-wrap: break-word; word-break: break-word; }
.suchstand { margin: -.4rem 0 1rem; }
.export-link { text-align: center; margin-top: 1rem; }
.fortschritt { display: flex; gap: 1.2rem; align-items: center; }
.fortschritt h2 { margin: 0; }
.kreisel { width: 2.2rem; height: 2.2rem; flex-shrink: 0; border-radius: 50%; border: 3px solid var(--linie); border-top-color: var(--akzent); animation: drehen 1s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.befunde { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.befunde h3 { font-size: 1rem; margin: 0 0 .5rem; }
.befunde ul { margin: 0; padding-left: 1.2rem; }
.befunde li { margin-bottom: .4rem; overflow-wrap: break-word; word-break: break-word; }
.inserat { margin-top: 1rem; max-height: 28rem; overflow: auto; font-size: .95rem; color: var(--dim); overflow-wrap: break-word; word-break: break-word; }
.loeschen-zeile { margin-top: 1.5rem; text-align: right; }

/* ---------------------------------------------------------------- Unterlagen */
.ablage {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; margin: .5rem 0 0; padding: 1.8rem 1rem;
  text-align: center; font-weight: 400; cursor: pointer;
  border: 2px dashed var(--linie); border-radius: var(--rund); transition: border-color .15s ease, background .15s ease;
}
.ablage input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ablage.ueber, .ablage:hover { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 6%, transparent); }
.ablage.gewaehlt { border-style: solid; border-color: var(--akzent); }
.ablage:focus-within { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); }
.dokumente { list-style: none; margin: 0; padding: 0; }
.dokumente > li { padding: .9rem 0; border-top: 1px solid var(--linie); }
.dokumente > li:first-child { border-top: 0; padding-top: .2rem; }
.dok-kopf { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.dok-symbol {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.6rem; height: 3.1rem; border-radius: 8px;
  background: color-mix(in srgb, var(--fehler) 12%, var(--glas-stark)); color: var(--fehler); font-size: .7rem; font-weight: 800;
}
a.dok-kopf { color: var(--text); text-decoration: none; border-radius: 10px; }
.dok-bild { flex-shrink: 0; width: 62px; height: 80px; object-fit: cover; object-position: top; border-radius: 6px;
  background: #fff; border: 1px solid var(--linie); box-shadow: 0 1px 3px rgba(14, 54, 56, .12); }
a.dok-kopf:active { background: var(--linie); }
a.dok-kopf:hover .dok-text strong { text-decoration: underline; }
.dok-text { display: flex; flex-direction: column; min-width: 0; }
.pdf-vorschau { display: block; width: 100%; height: min(80vh, 1100px); margin: 1rem 0 .5rem; border: 1px solid var(--linie);
  border-radius: var(--karte-rund); background: #fff; }
.vorschau-knoepfe { margin-top: 0; }
.dok-text .dim { overflow-wrap: break-word; word-break: break-word; }
.dok-aktionen { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; margin-top: .7rem; }
.dok-aktionen > *, .dok-aktionen form, .dok-aktionen .knopf, .dok-aktionen select { width: 100%; margin: 0; min-width: 0; }
.art-wahl { display: block; }
.art-wahl select { width: 100%; padding: .5rem .6rem; }

/* ---------------------------------------------------------------- Tab-Leiste und Aktionsleiste
   Handy und Tablet: schwebende Milchglas-Inseln (Idee David 09.11.2026). Tab-Leiste oben unter der Kopfzeile,
   bleibt beim Scrollen oben stehen (Nutzer sahen sie unten nicht, Nr. 53); Aktionsleiste unten. */
.tabs {
  position: sticky; z-index: 30; display: flex; justify-content: space-around;
  top: max(var(--insel-abstand), env(safe-area-inset-top));
  width: min(calc(100% - 2 * max(var(--insel-abstand), env(safe-area-inset-left), env(safe-area-inset-right))), var(--insel-max));
  margin: var(--insel-abstand) auto 0;
  height: var(--tabhoehe); padding: 0 .3rem;
  border-radius: 26px; border: 1px solid var(--insel-rand); background: var(--insel-glas);
  backdrop-filter: var(--unschaerfe); -webkit-backdrop-filter: var(--unschaerfe);
  box-shadow: var(--insel-schatten), 0 1px 0 rgba(255, 255, 255, .6) inset;
}
.tabs a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tipp); margin: 5px 0; border-radius: 20px; white-space: nowrap;
  color: color-mix(in srgb, var(--text) 62%, transparent); text-decoration: none; font-size: .68rem; font-weight: 500;
}
.tabs span { white-space: nowrap; }
.tabs svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabs a[aria-current="page"] { color: var(--akzent); background: rgba(255, 255, 255, .6); }
.tabs a[aria-current="page"] svg { stroke-width: 2.1; }
.tabs a:active { background: rgba(255, 255, 255, .45); }

.aktionsleiste {
  position: fixed; z-index: 25; display: flex; align-items: stretch; gap: .5rem; padding: .5rem;
  left: max(var(--insel-abstand), env(safe-area-inset-left), calc(50% - var(--insel-max) / 2));
  right: max(var(--insel-abstand), env(safe-area-inset-right), calc(50% - var(--insel-max) / 2));
  bottom: max(var(--insel-abstand), env(safe-area-inset-bottom));
  border-radius: 22px; border: 1px solid var(--insel-rand); background: var(--insel-glas);
  backdrop-filter: var(--unschaerfe); -webkit-backdrop-filter: var(--unschaerfe); box-shadow: var(--insel-schatten);
}
.aktionsleiste > * { flex: 1; margin: 0; width: 100%; min-width: 0; }
.aktionsleiste form { display: flex; }
.aktionsleiste .knopf { width: 100%; min-height: 48px; margin: 0; padding-left: .6rem; padding-right: .6rem; }
.aktionsleiste .knopf.leise { background: rgba(255, 255, 255, .7); }

/* Ohne Milchglas oder bei "Transparenz reduzieren": deckender, damit lesbar */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --insel-glas: rgba(255, 255, 255, 0.94); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --insel-glas: rgba(255, 255, 255, 0.96); }
}

/* ---------------------------------------------------------------- Verwaltung: Statistik */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1rem; }
.kachel {
  display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .9rem 1rem; border-radius: var(--rund);
  background: var(--glas-stark); border: 1px solid var(--kante); box-shadow: var(--schatten);
}
.kachel-zahl {
  font-size: clamp(1.15rem, 5.2vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.kachel-text { font-size: .85rem; color: var(--dim); }

.hbalken { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.hbalken li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text wert" "spur spur"; gap: .25rem .6rem; align-items: baseline; }
.hb-text { grid-area: text; font-size: .92rem; min-width: 0; }
.hb-wert { grid-area: wert; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-spur { grid-area: spur; display: block; height: 10px; border-radius: 4px; background: var(--spur); overflow: hidden; }
.hb-balken { display: block; height: 100%; border-radius: 4px; background: var(--daten); }

.saeulen { display: flex; align-items: flex-end; gap: 2px; height: 96px; margin-top: .7rem; padding-bottom: 1px; border-bottom: 1px solid var(--linie); }
.saeule { position: relative; flex: 1 1 0; min-width: 0; background: var(--daten); border-radius: 4px 4px 0 0; outline: none; }
.saeule.null { height: 2px; background: var(--linie); border-radius: 1px; }
.saeule::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: 0; height: 96px; } /* grosse Trefferflaeche */
.saeule:hover::after, .saeule:focus-visible::after {
  content: attr(data-tipp); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 2;
  padding: .25rem .5rem; border-radius: 8px; white-space: nowrap; pointer-events: none;
  font-size: .78rem; font-weight: 600; color: #fff; background: var(--text);
}
.saeule:nth-child(-n+5):hover::after, .saeule:nth-child(-n+5):focus-visible::after { left: 0; transform: none; }
.saeule:nth-last-child(-n+5):hover::after, .saeule:nth-last-child(-n+5):focus-visible::after { left: auto; right: 0; transform: none; }
.saeule:focus-visible { box-shadow: 0 0 0 2px var(--text); }
.saeulen-achse { display: flex; justify-content: space-between; margin-top: .25rem; }
.als-tabelle { margin-top: .4rem; }
.als-tabelle summary { display: flex; align-items: center; min-height: var(--tipp); color: var(--akzent); cursor: pointer; }

.startpasswort { border: 2px solid var(--akzent); }
.pw-anzeige code {
  display: block; padding: .7rem .8rem; border-radius: 12px; background: var(--tint); text-align: center;
  font-size: clamp(1rem, 4.6vw, 1.35rem); font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere;
  user-select: all; -webkit-user-select: all;
}
.grenzen .knopf { margin-top: 1rem; }

/* Balkenbreiten und -hoehen in 5-%-Stufen (statt Inline-Stil) */
.w-0 { width: 0; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; }
.w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; } .w-55 { width: 55%; }
.w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; }
.w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }
.h-0 { height: 0; } .h-5 { height: 5%; } .h-10 { height: 10%; } .h-15 { height: 15%; } .h-20 { height: 20%; } .h-25 { height: 25%; }
.h-30 { height: 30%; } .h-35 { height: 35%; } .h-40 { height: 40%; } .h-45 { height: 45%; } .h-50 { height: 50%; } .h-55 { height: 55%; }
.h-60 { height: 60%; } .h-65 { height: 65%; } .h-70 { height: 70%; } .h-75 { height: 75%; } .h-80 { height: 80%; } .h-85 { height: 85%; }
.h-90 { height: 90%; } .h-95 { height: 95%; } .h-100 { height: 100%; }

/* =====================================================================
   Breiten
   ===================================================================== */

/* Sehr schmale Handys (iPhone SE, 320-380 px) */
@media (max-width: 380px) {
  :root { --karte-pad: 1rem; }
  .dok-aktionen { grid-template-columns: 1fr 1fr; }
  .dok-aktionen .art-wahl { grid-column: 1 / -1; }
  .tabs a { font-size: .62rem; }
  .knopf.leise { padding-left: .75rem; padding-right: .75rem; font-size: .9rem; }
}

/* Handy (bis 767 px): eine Spalte */
@media (max-width: 767px) {
  .raster, .raster.zwei, .felder { grid-template-columns: 1fr; }
  .status-box { flex-direction: column; align-items: flex-end; gap: .3rem; }
  .loeschen-zeile { text-align: center; }
}

/* Handy und Tablet (bis 1023 px): Kopfzeile scrollt weg, Tab-Leiste bleibt oben; keine Unschaerfe auf vielen Karten (Leistung) */
@media (max-width: 1023px) {
  .nur-gross { display: none !important; }
  .kopf { position: relative; }
  .karte { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .meldungen { position: sticky; top: calc(max(var(--insel-abstand), env(safe-area-inset-top)) + var(--tabhoehe) + 8px); z-index: 5; }
}

/* Tablet (768-1023 px): mehr Luft, Raster mit zwei Spalten */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --rand: 24px; --karte-pad: 1.3rem; }
  .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Querformat mit wenig Hoehe (Handy quer): Inseln kompakter */
@media (max-height: 500px) and (max-width: 1023px) and (orientation: landscape) {
  :root { --tabhoehe: 50px; --insel-abstand: 6px; }
  body:has(.aktionsleiste) { --leiste: 62px; }
  .tabs a { flex-direction: row; gap: .35rem; margin: 4px 0; font-size: .75rem; }
  .tabs svg { width: 20px; height: 20px; }
  .aktionsleiste { padding: .35rem; }
  .aktionsleiste .knopf { min-height: var(--tipp); }
  .kopf { min-height: 40px; padding-top: calc(.3rem + env(safe-area-inset-top)); padding-bottom: .3rem; }
  .held { margin-bottom: .8rem; }
}

/* Computer (ab 1024 px): Tabs oben in der Kopfzeile, Aktionsleiste als Pille */
@media (min-width: 1024px) {
  :root { --tabhoehe: 0px; --rand: 16px; }
  body.mit-tabs .inhalt { padding-bottom: 1.5rem; }
  body:has(.aktionsleiste) { --leiste: 0px; }
  .nur-klein { display: none !important; }
  .karte { backdrop-filter: var(--unschaerfe); -webkit-backdrop-filter: var(--unschaerfe); }
  .kopf { min-height: 56px; }
  /* Marke/Zurueck links und Abmelden rechts duerfen die Tabs in der Mitte nie erreichen */
  .kopf > :first-child { max-width: calc(50% - 16rem); overflow: hidden; text-overflow: ellipsis; }
  .abmelden { max-width: calc(50% - 16rem); }
  .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .tabs {
    position: fixed; top: 0; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: auto; margin: 0;
    height: 56px; padding: 0; gap: .4rem;
    background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .tabs a { flex-direction: row; gap: .4rem; min-height: 36px; margin: 10px 0; padding: 0 .8rem; border-radius: 999px; font-size: .92rem; color: var(--dim); }
  .tabs a[aria-current="page"] { color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, transparent); }
  .tabs a:hover { color: var(--text); }
  .tabs svg { width: 18px; height: 18px; }

  .aktionsleiste {
    position: sticky; bottom: 1rem; left: auto; right: auto; justify-content: flex-end;
    width: calc(100% - 32px); max-width: 1040px; margin: 0 auto 1rem; padding: .6rem;
    border-radius: 999px; border: 1px solid var(--linie); background: var(--glas-stark);
  }
  .aktionsleiste > * { flex: 0 1 auto; width: auto; }
  .aktionsleiste .knopf { width: auto; min-height: 50px; padding-left: 1.3rem; padding-right: 1.3rem; }

  .knopfreihe { grid-template-columns: repeat(auto-fill, minmax(11rem, 13rem)); }
  .knopfreihe > button:only-of-type { grid-column: auto; }
  .knopfreihe > :is(.knopf, form):not([hidden]):nth-child(1 of :is(.knopf, form):not([hidden])):nth-last-child(odd of :is(.knopf, form):not([hidden])) { grid-column: auto; }
  .zellen a:hover { background: color-mix(in srgb, var(--linie) 60%, transparent); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .abmelden .dim { display: none; }
}

/* Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .knopf:active, .chip:active span, .plus:active { transform: none; }
}

/* Firmen, die eine Person beobachtet (Etappe 3) */
.beobachtet { color: var(--akzent); font-weight: 600; margin: .2rem 0; }
.firmen li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.firmen li > span { min-width: 0; overflow-wrap: anywhere; }
.firmen form { margin: 0; flex-shrink: 0; }
.firmen .knopf { width: auto; margin: 0; }
.firma-neu .knopf { width: auto; }

/* Verstaendlichkeit (11.11.2026): faellige Hinweise, Passung als Zusatzzahl, Punktliste ohne fuehrenden Punkt */
.faellig { color: var(--akzent); font-weight: 600; }
.passung-zahl { font-weight: 400; opacity: .75; font-size: .85em; margin-left: .3em; }
/* Punktliste: Angaben als Ganzes umbrechen, nie mitten im Wort; Trennpunkt am Ende, nie am Zeilenanfang */
.zellen .punktliste > span { display: inline-block; max-width: 100%; }
.punktliste > span:not(:last-child)::after { content: "\00b7"; margin: 0 .4em; }
.punktliste.klein > span:not(:last-child)::after { margin: 0 .35em; }
details.anpassen { margin-top: .8rem; }
details.anpassen > summary { cursor: pointer; font-weight: 600; color: var(--akzent); min-height: 44px; display: flex; align-items: center; }
.art-wahl { display: flex; align-items: center; gap: .4rem; }

/* "Stimmt etwas nicht?" (11.11.2026) */
details.melden { margin-top: .6rem; }
details.melden > summary { cursor: pointer; color: var(--dim); font-size: .9rem; min-height: 44px; display: flex; align-items: center; }
details.melden .chips { flex-direction: column; align-items: flex-start; }
.melden-karte { padding-top: .2rem; padding-bottom: .2rem; }

/* Empfehlungen im Profil */
.empfehlungen { font-weight: 600; color: var(--akzent); margin-top: .6rem; }

/* Brief, Dossier, Lebenslauf (11.11.2026) */
.bereit { color: var(--erfolg); font-weight: 600; }
.downloads .knopfreihe .knopf { margin-top: .4rem; }
.lv-form .feld { margin-top: .7rem; }
.lv-form .feld > label { display: block; margin-bottom: .25rem; }
.lv-form .chips + .feld, .lv-form .feldtitel { margin-top: .8rem; }
.lv-form .knopf { width: auto; }
.lv-form .haken { display: flex; margin-top: .6rem; }
details.lv-eintrag { border-top: 1px solid rgba(0,0,0,.08); padding: .3rem 0; }
details.lv-eintrag > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .8rem; list-style: none; }
details.lv-eintrag > summary::-webkit-details-marker { display: none; }
details.lv-eintrag > summary > span:first-child { flex: 1 1 auto; min-width: 0; }
details.lv-eintrag > summary .dim { font-weight: 400; }
details.lv-eintrag > summary .bearbeiten { flex-shrink: 0; font-size: .85rem; font-weight: 600; color: var(--akzent); }
details.lv-eintrag[open] > summary .bearbeiten { visibility: hidden; }
details.lv-eintrag.neu > summary { color: var(--akzent); font-weight: 600; }
.lv-liste li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.lv-liste li > span { min-width: 0; overflow-wrap: anywhere; }
.lv-liste form { margin: 0; flex-shrink: 0; }
.lv-liste .knopf, .lv-ki .knopf { width: auto; margin: 0; }
.lv-ki { margin-top: .8rem; }

.lv-karte .knopf { width: auto; }

/* Startseite: "Gefunden" ganze Breite, darunter Nachfragen und Meine Stellen (11.11.2026) */
.start-raster { display: grid; gap: .8rem; grid-template-columns: 1fr; }
.start-raster > * { min-width: 0; }
@media (min-width: 768px) {
  .start-raster { grid-template-columns: 1fr 1fr; align-items: start; }
  .start-gefunden, .start-breit { grid-column: 1 / -1; }
}

/* Lebenslauf: Checkliste, Pflicht-Markierung, Vorlagen mit Bild (11.11.2026) */
.pflicht-zeichen { font-size: .72rem; font-weight: 600; color: var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, transparent);
  padding: .1rem .45rem; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.checkliste { list-style: none; margin: .4rem 0 0; padding: 0; }
.checkliste a { display: flex; align-items: center; gap: .6rem; min-height: 44px; color: inherit; text-decoration: none; }
.checkliste .markierung { margin-left: auto; font-size: .8rem; color: var(--dim); }
.checkliste .haken-zeichen { width: 1.4rem; text-align: center; font-weight: 700; }
.checkliste .ok .haken-zeichen { color: var(--erfolg); }
.checkliste .ok > a > span:nth-child(2) { color: var(--dim); }
.checkliste .pflicht .haken-zeichen, .checkliste .pflicht .markierung { color: var(--akzent); font-weight: 600; }
.vorlagen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem .7rem; }
@media (min-width: 768px) { .vorlagen { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.vorlage-karte { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; cursor: pointer; font-weight: 500; }
.vorlage-karte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vorlage-karte img { width: 100%; height: auto; max-width: 160px; border: 2px solid var(--linie); border-radius: 8px; background: #fff; }
.vorlage-karte input:checked + img { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 20%, transparent); }
.vorlage-karte input:checked ~ span { color: var(--akzent); font-weight: 700; }
.vorlage-karte input:focus-visible + img { outline: 3px solid var(--akzent); outline-offset: 2px; }

.lv-check h2 { margin-bottom: .2rem; }
.checkliste .empfohlen .haken-zeichen { color: var(--dim); }

/* Bild hochladen (Foto, Unterschrift): Ablageflaeche mit Vorschau (11.11.2026) */
.ablage.bild { min-height: 7rem; }
.ablage-vorschau { max-height: 6rem; max-width: 100%; border-radius: 8px; margin-top: .4rem; }
.ablage-vorschau[hidden] { display: none; }
.bild-gespeichert { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bild-gespeichert img { max-height: 5.5rem; max-width: 12rem; border-radius: 8px; border: 1px solid var(--linie); background: #fff; }
.bild-gespeichert form { margin: 0; }
.bild-gespeichert .knopf { width: auto; margin: 0; }
/* Listen mit Knopf in der Zeile: Innenabstand wie die Karte (die .zellen-Liste reicht bis an den Kartenrand) */
.zellen.lv-liste li, .zellen.firmen li { padding: .55rem var(--karte-pad); }
/* Stelle: Plaketten unter dem Titel statt daneben (langer Titel ueberdeckte sie) */
.status-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 .2rem; }
.aussortieren { margin-top: .6rem; }
.aussortieren .knopf { width: auto; }

/* Monatsauswahl (eigenes Fenster statt Browser-Kalender) */
input.monat-feld { cursor: pointer; caret-color: transparent; }
.monat-fenster { position: fixed; z-index: 1000; width: min(19rem, calc(100vw - 2rem));
  padding: .8rem; background: #fff; border: 1px solid var(--linie); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(14, 54, 56, .18); }
.monat-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.monat-kopf strong { font-size: 1.05rem; }
.monat-pfeil { width: 40px; height: 40px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--akzent) 8%, transparent);
  color: var(--akzent); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.monat-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.monat-kachel { min-height: 42px; border: 1px solid transparent; border-radius: 10px; background: var(--bg); color: var(--text);
  font: inherit; font-size: .95rem; cursor: pointer; }
.monat-kachel:hover { border-color: color-mix(in srgb, var(--akzent) 40%, transparent); }
.monat-kachel.gewaehlt { background: var(--akzent); color: #fff; font-weight: 600; }
.monat-fuss { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.monat-text { flex: 1 1 auto; min-height: 40px; padding: 0 .7rem; border: 0; border-radius: 999px; font: inherit; font-size: .88rem;
  font-weight: 600; color: var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, transparent); cursor: pointer; }
.monat-text.leise { color: var(--dim); background: var(--bg); }
.monat-pfeil:focus-visible, .monat-kachel:focus-visible, .monat-text:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset: 1px; }

@media (max-width: 767px) {
  /* Handy: als Blatt von unten ueber Tab- und Aktionsleiste */
  .monat-fenster { position: fixed; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0; width: 100%; z-index: 1000;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(14, 54, 56, .25); }
  .monat-kachel { min-height: 48px; }
}

/* Farbwahl Lebenslauf/Brief */
.farben { display: flex; flex-wrap: wrap; gap: .8rem; margin: .3rem 0 .4rem; }
.farbe { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; cursor: pointer;
  font-size: .78rem; font-weight: 500; color: var(--dim); }
.farbe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.farbpunkt { width: 38px; height: 38px; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--linie); }
.farbe input:checked + .farbpunkt { box-shadow: 0 0 0 3px var(--text); }
.farbe input:checked ~ .farbname { color: var(--text); font-weight: 700; }
.farbe input:focus-visible + .farbpunkt { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset: 3px; }
.f-petrol { background: #0e6b6f; } .f-blau { background: #1f4e8c; } .f-gruen { background: #2e6b3a; }
.f-bordeaux { background: #7a2335; } .f-anthrazit { background: #2f3b3c; }

/* Vorlage vergroessern */
.vorlage-zelle { position: relative; }
.lupe { position: absolute; top: .4rem; right: .4rem; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(14, 54, 56, .2); color: var(--akzent); }
.lupe svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lupe:hover { background: #fff; }
.lupe-fenster { width: min(44rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 1rem; border: 0;
  border-radius: 18px; background: var(--bg); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.lupe-fenster[open] { display: flex; flex-direction: column; gap: .8rem; }
.lupe-fenster::backdrop { background: rgba(20, 30, 31, .55); }
.lupe-kopf { display: flex; justify-content: space-between; align-items: center; }
.lupe-zu { width: 40px; height: 40px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--akzent) 10%, transparent);
  color: var(--akzent); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lupe-bild { display: flex; align-items: center; gap: .5rem; min-height: 0; flex: 1 1 auto; }
.lupe-bild img { flex: 1 1 auto; min-width: 0; max-height: calc(100dvh - 11rem); object-fit: contain; background: #fff;
  border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, .12); }
.lupe-pfeil { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 999px; background: #fff; color: var(--akzent);
  font-size: 1.5rem; cursor: pointer; box-shadow: 0 2px 8px rgba(14, 54, 56, .15); }
.lupe-fenster .knopf { width: 100%; margin: 0; }
@media (max-width: 767px) { .lupe-pfeil { width: 32px; height: 32px; font-size: 1.2rem; } .lupe-fenster { padding: .7rem; } }


/* Abstand: einzelner Knopf nach Feldern, Ablageflaeche, Chips oder Hinweis (".knopf.leise" setzt margin: 0) */
:is(input:not([type=hidden]), textarea, select, .feld, .felder-zwei, .ablage, .chips, .haken, p, ul, .farben, .vorlagen, .checkliste) + .knopf,
:is(input:not([type=hidden]), textarea, select, .feld, .felder-zwei, .ablage, .chips, .haken, p, ul) + noscript + .knopf { margin-top: 1rem; }
/* Lupe in der Bildecke statt auf dem Rand */
.vorlage-karte { margin: 0; }
.vorlage-karte img { width: 100%; max-width: none; }
.lupe { top: auto; bottom: calc(1.6rem + .45rem); right: .45rem; width: 32px; height: 32px; }
.lupe svg { width: 18px; height: 18px; }
/* Lebenslauf-Formulare: abschliessender Knopf klar abgesetzt, Von/Bis ohne doppelten Abstand */
.lv-form > .knopf, .lv-form > .knopfreihe { margin-top: 1.5rem; }
.lv-form .felder-zwei { margin-top: .7rem; }
.lv-form .felder-zwei > .feld { margin-top: 0; }
/* Einheitlicher Feldabstand: Abstand nur am Feld, nicht zusaetzlich an der Beschriftung */
.lv-form .feld { margin-top: 1rem; }
.lv-form .feld > label { margin-top: 0; }
.lv-form .felder-zwei { margin-top: 1rem; }

/* Datumsfeld mit Kalender-Symbol, Upload-Flaechen mit Symbol (11.11.2026) */
input.monat-feld { padding-right: 2.8rem; background-repeat: no-repeat; background-position: right .85rem center; background-size: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b6f' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ablage-symbol { width: 30px; height: 30px; margin-bottom: .25rem; fill: none; stroke: var(--akzent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.ablage.gewaehlt .ablage-symbol { display: none; }
.ablage.gewaehlt [data-titel] { color: var(--akzent); overflow-wrap: anywhere; }

.ablage.gewaehlt > .dim:not(.dateiname) { display: none; }

/* KI-Hilfe: Karte statt Hürde (11.11.2026) */
.ki-karte { border: 1px solid color-mix(in srgb, var(--akzent) 25%, transparent); }
.ki-punkte { list-style: none; margin: .6rem 0 0; padding: 0; }
.ki-punkte li { position: relative; padding-left: 1.7rem; margin: .45rem 0; line-height: 1.45; }
.ki-punkte li::before { content: "\2713"; position: absolute; left: .2rem; top: 0; color: var(--erfolg); font-weight: 700; }
.ki-mehr { display: inline-flex; align-items: center; min-height: 44px; margin-top: .3rem; font-size: .92rem; font-weight: 600; color: var(--akzent); text-decoration: none; }
.ki-details > summary { font-size: 1.05rem; min-height: 44px; display: flex; align-items: center; }

/* Unterlagen: Abstand zwischen Karte und Raster, Karten im Raster buendig, Aktionen in zwei Zeilen (11.11.2026) */
.karte + .raster, .raster + .karte, .karte + .start-raster { margin-top: 1rem; }
.raster > .karte + .karte { margin-top: 0; }
.dok-aktionen { grid-template-columns: 1fr 1fr; align-items: stretch; }
.dok-aktionen .art-wahl { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; }
.dok-aktionen .art-wahl label { margin: 0; flex-shrink: 0; }
.dok-aktionen .art-wahl select { flex: 1 1 auto; width: auto; }
.dok-aktionen .knopf { min-height: var(--tipp); height: 100%; }

/* Verwaltung: Stellen und Feedback (11.11.2026) */
.satz-weitersagen { font-weight: 600; }
.stellen-filter .knopfreihe { margin-top: 1.2rem; }
.feedback-liste { list-style: none; margin: 0; padding: 0; }
.feedback-liste > li { padding: 1rem 0; border-top: 1px solid var(--linie); }
.feedback-liste > li:first-child { border-top: 0; padding-top: 0; }
.feedback-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .4rem; }
.feedback-art { font-size: .78rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--tint); color: var(--akzent); }
.feedback-art.art-stoert { background: color-mix(in srgb, var(--fehler) 10%, #fff); color: var(--fehler); }
.feedback-art.art-lob { background: color-mix(in srgb, var(--erfolg) 12%, #fff); color: var(--erfolg); }
.feedback-text { margin: 0 0 .6rem; line-height: 1.5; overflow-wrap: anywhere; }
.feedback-aktionen { display: flex; gap: .5rem; align-items: center; }
.feedback-aktionen input { flex: 1 1 auto; min-height: 40px; padding: .4rem .7rem; font-size: .9rem; }
.feedback-aktionen .knopf { flex-shrink: 0; width: auto; }

.stellen-liste .titel { font-weight: 600; }

/* Feedback-Lasche am rechten Rand, auf jeder Seite sichtbar (AUFGABEN Nr. 43) */
.feedback-lasche {
  position: fixed; right: 0; top: calc(50% - 3rem); z-index: 40;  /* ohne transform: keine halben Pixel, scharfe Schrift */
  writing-mode: vertical-rl; rotate: 180deg;
  padding: .9rem .45rem; border-radius: 0 10px 10px 0;
  background: var(--akzent); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .03em; text-decoration: none;
  box-shadow: 2px 0 12px rgba(14, 54, 56, .25);
  -webkit-font-smoothing: antialiased;
}
.feedback-lasche:hover, .feedback-lasche:focus-visible { background: color-mix(in srgb, var(--akzent) 85%, #000); }
@media (max-width: 767px) { .feedback-lasche { padding: .6rem .18rem; font-size: .64rem; letter-spacing: .02em; border-radius: 0 7px 7px 0; } }
@media print { .feedback-lasche { display: none; } }


/* ---------------------------------------------------------------- Weniger Knoepfe (Nr. 52, 13.11.2026)
   Pro Bildschirm ein Hauptknopf; Seltenes unter "Mehr" oder als leiser Link. */
.breit-knopf { display: flex; width: 100%; margin-top: .4rem; }
.link-knopf {
  appearance: none; background: none; border: 0; padding: 0; min-height: var(--tipp); cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--akzent); text-align: left;
}
.link-knopf.gefahr-text { color: var(--fehler); }
details.beworben > summary { list-style: none; display: flex; width: 100%; }
details.beworben > summary::-webkit-details-marker { display: none; }
details.beworben[open] > summary { display: none; }
details.mehr > summary { min-height: var(--tipp); display: flex; align-items: center; }
.mehr-teil { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
.mehr-teil details.melden { margin-top: 0; }
.mehr-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.klein-mehr > summary { font-size: .95rem; }
.knopfreihe > details.beworben { min-width: 0; }
details.passt-nicht[open] { grid-column: 1 / -1; }
details.passt-nicht .chips { flex-direction: column; align-items: flex-start; margin-bottom: .6rem; }
.weitere-suche { margin-top: .8rem; text-align: center; }
details.passt-nicht { grid-column: 1 / -1; }
details.passt-nicht > summary.knopf { background: none; box-shadow: none; color: var(--dim); min-height: var(--tipp); }
details.passt-nicht .chip, details.passt-nicht .chip span { max-width: 100%; white-space: normal; }
.aktionsleiste .speicherstand { flex: 0 0 auto; width: auto; align-self: center; margin: 0; padding: 0 .6rem; font-size: .92rem; color: var(--dim); text-align: center; }
.aktionsleiste:not(:has([data-nach-aenderung]:not([hidden]))) .speicherstand { flex: 1 1 auto; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.speicherstand.fehler { color: var(--fehler); white-space: normal; }

/* ---------------------------------------------------------------- Erzaehl von dir (anweisung-erzaehlen.txt) */
.leitfragen { margin: .2rem 0 .8rem; padding-left: 1.2rem; color: var(--dim); }
.leitfragen li { margin: .15rem 0; }
#erzaehlen textarea { min-height: 9rem; }

/* Hinweis "Gespeichert" beim Speichern im Hintergrund (Nr. 57) */
.speicher-hinweis {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); margin: 0;
  bottom: calc(max(var(--insel-abstand), env(safe-area-inset-bottom)) + var(--leiste) + 12px);
  max-width: calc(100% - 2 * var(--rand)); padding: .55rem 1.1rem; border-radius: 999px;
  background: var(--text); color: #fff; font-size: .92rem; font-weight: 600; text-align: center;
  box-shadow: var(--insel-schatten);
}
.speicher-hinweis.fehler { background: var(--fehler); }

/* Empfehlung neuer Lebenslauf (Nr. 58) */
.lv-empfehlung { border: 2px solid color-mix(in srgb, var(--akzent) 35%, transparent); }
.lv-empfehlung .gruende { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.lv-empfehlung .behalten { margin-top: .4rem; text-align: center; }

/* Importierte Stellen (Verwaltung, anweisung-import.txt): fremder Text, schlicht dargestellt */
.import-text h4 { margin: 1rem 0 .3rem; font-size: 1rem; }
.import-text ul { padding-left: 1.2rem; }
.import-text p, .import-text li { overflow-wrap: anywhere; }
.angaben { display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); margin: .4rem 0 0; }
.angaben dt, .angaben dd { margin: 0; padding: .6rem 0; border-top: 1px solid var(--linie); }
.angaben dt { color: var(--dim); padding-right: 1rem; }
.angaben dd { overflow-wrap: anywhere; }
.angaben dt:first-of-type, .angaben dt:first-of-type + dd { border-top: 0; }

/* Schwache Vorschlaege nur auf Wunsch (Nr. 62) */
.schwache-zeigen { margin: .8rem 0 0; text-align: center; font-size: .95rem; }
.schwache-zeigen a { color: var(--dim); }
.schwach-karte { margin-top: 1rem; }
.schwach-karte .hilfe { margin-bottom: .8rem; }