/* Produktteile so, wie sie in der App aussehen (Tafel-Look, gemessen im Demo-Modus am 29.10.2026).
   Die Teile haben eine feste Entwurfsgröße und werden per --s skaliert (seite.js), damit Proportionen und Schrift wie
   im Produkt bleiben. Werte: Spalte 22 px, Karte 14 px, Seitenleiste 28 px, Schibsted Grotesk. */

.app-rahmen { position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); overflow: hidden; border-radius: 20px; }
.app-rahmen > .app, .app-rahmen > .app-detail { position: absolute; left: 0; top: 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); transform: scale(var(--s, 1)); transform-origin: 0 0; }

.app, .app-detail, .fs {
  --a-grund: #f2f1f5; --a-karte: #ffffff; --a-zweit: #efedf4; --a-tinte: #17131f; --a-leise: #5c5868;
  --a-rand: rgb(228 225 235 / .7); --a-rand-voll: #e4e1eb; --a-marke: #7943cb;
  --a-schatten-s: 0 1px 2px #17131f0d, 0 3px 10px -4px #17131f12;
  --a-schatten-m: 0 2px 4px #17131f0d, 0 12px 26px -10px #17131f29;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; color: var(--a-tinte); font-size: 14px; line-height: 20px;
  letter-spacing: 0; text-align: left; -webkit-font-smoothing: antialiased;
}
[data-marke="leadflow"] .app, [data-marke="leadflow"] .app-detail { --a-marke: #0f766e; }
.app .ic, .app-detail .ic, .fs .ic { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* Board-Fenster */
.app { display: flex; gap: 12px; padding: 12px; background: var(--a-grund); border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 40px 80px -40px rgb(20 16 40 / .55), 0 0 0 1px rgb(23 19 31 / .06); }
.app-leiste { width: 236px; flex: none; display: flex; flex-direction: column; padding: 14px 12px; border-radius: 28px; color: #fff;
  background: rgba(23, 19, 33, .93);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .09), inset 0 0 0 1px rgb(255 255 255 / .05), 0 1px 2px rgb(23 19 31 / .2), 0 26px 52px -22px rgb(23 19 31 / .5); }
.app-marke { display: flex; align-items: center; gap: 10px; padding: 4px 4px 14px; }
.app-kachel { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--a-marke);
  box-shadow: inset 0 1px 0 #ffffff52, 0 4px 12px -4px color-mix(in oklab, var(--a-marke) 70%, transparent); }
.app-kachel .ic { width: 18px; height: 18px; fill: #fff; }
.app-marke-text { display: grid; min-width: 0; flex: 1; }
.app-marke-text b { font-size: 14px; font-weight: 700; }
.app-marke-text small { font-size: 12px; color: rgb(255 255 255 / .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-glocke { position: relative; color: rgb(255 255 255 / .7); }
.app-glocke i { position: absolute; right: -6px; top: -7px; min-width: 16px; height: 16px; border-radius: 8px; background: #ef4444; color: #fff; font: 600 10px/16px "Schibsted Grotesk", sans-serif; text-align: center; font-style: normal; }
.app-nav { display: grid; gap: 2px; }
.app-nav span { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 16px; color: rgb(255 255 255 / .72); font-weight: 500; }
.app-nav span.ist-an { background: rgb(255 255 255 / .1); color: #fff; }
.app-nav .ic { width: 18px; height: 18px; }
.app-leiste-fuss { margin-top: auto; display: grid; gap: 10px; }
.app-hilfe { display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 36px; color: rgb(255 255 255 / .72); font-weight: 500; }
.app-look { display: flex; padding: 3px; border-radius: 12px; background: rgb(255 255 255 / .06); font-size: 12px; }
.app-look span { flex: 1; text-align: center; padding: 4px 0; border-radius: 9px; color: rgb(255 255 255 / .6); }
.app-look span.ist-an { background: rgb(255 255 255 / .12); color: #fff; }
.app-nutzer { display: flex; align-items: center; gap: 10px; padding: 6px 4px 0; }
.app-nutzer > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.app-nutzer b { font-size: 13px; font-weight: 600; }
.app-nutzer small { font-size: 11px; color: rgb(255 255 255 / .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-nutzer .ic { color: rgb(255 255 255 / .55); }
.app-nutzer .app-kuerzel { background: rgb(255 255 255 / .12); color: #fff; box-shadow: none; }

.app-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 18px 4px 0 14px; }
.app-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; }
.app-titel { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.022em; }
.app-unter { font-size: 13px; color: var(--a-leise); margin-top: 2px; }
.app-werkzeuge { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.app-suche, .app-wahl, .app-knopf { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; background: var(--a-karte); box-shadow: inset 0 0 0 1px var(--a-rand-voll); color: var(--a-leise); font-size: 13px; white-space: nowrap; }
.app-suche { width: 196px; }
.app-wahl { width: 150px; color: var(--a-tinte); }
.app-knopf { color: var(--a-tinte); font-weight: 500; }
.app-umschalter { display: inline-flex; padding: 3px; border-radius: 14px; background: var(--a-zweit); }
.app-umschalter span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 11px; font-size: 13px; color: var(--a-leise); }
.app-umschalter span.ist-an { background: var(--a-karte); color: var(--a-tinte); box-shadow: var(--a-schatten-s); }
.app-umschalter span.ist-an .ic { color: var(--a-marke); }
.app-spalten { flex: 1; min-height: 0; display: flex; gap: 12px; overflow: hidden; }
.app-spalte { width: 272px; flex: none; background: var(--a-zweit); border: 1px solid var(--a-rand); border-radius: 22px; display: flex; flex-direction: column; }
.app-spalte-kopf { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; font-weight: 600; font-size: 14px; }
.app-spalte-kopf i { width: 8px; height: 8px; border-radius: 50%; }
.app-zahl { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--a-karte); box-shadow: inset 0 0 0 1px var(--a-rand); font-size: 12px; font-weight: 600; text-align: center; line-height: 22px; }
.app-karten { display: grid; gap: 8px; padding: 4px 8px 8px; align-content: start; }
.app-karte { background: var(--a-karte); border: 1px solid var(--a-rand); border-radius: 14px; padding: 14px; box-shadow: var(--a-schatten-s); }
.app-karte-oben { display: flex; align-items: flex-start; gap: 4px; }
.app-griff { width: 30px; margin: -14px 0 -14px -14px; align-self: stretch; display: grid; place-items: center; color: var(--a-leise); opacity: .6; }
.app-kuerzel { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; background: var(--a-zweit); box-shadow: inset 0 0 0 1px var(--a-rand); font-size: 12px; font-weight: 600; }
.app-karte-text { display: grid; min-width: 0; padding-left: 6px; }
.app-karte-text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-karte-text small { font-size: 12px; line-height: 16px; color: var(--a-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-karte-text small + small { margin-top: 2px; }
.app-karte-fuss { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.app-karte-fuss time { font-size: 12px; color: var(--a-leise); }
.app-kanal { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; border: 1px solid var(--a-rand); background: var(--a-zweit); font-size: 12px; font-weight: 500; white-space: nowrap; }
.app-kanal i { width: 6px; height: 6px; border-radius: 50%; }
.app-karte.ist-frisch { border-color: color-mix(in oklab, var(--a-marke) 45%, white); box-shadow: 0 0 0 3px color-mix(in oklab, var(--a-marke) 16%, transparent), var(--a-schatten-m); animation: eintreffen .42s cubic-bezier(.16, 1, .3, 1); }
.app-karte.ist-frisch time { color: var(--a-marke); font-weight: 600; }
@keyframes eintreffen { from { transform: translateY(-10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

.beispiel { position: absolute; right: 18px; top: 16px; z-index: 2; height: 24px; padding: 0 10px; border-radius: 12px; font: 600 12px/24px "Schibsted Grotesk", sans-serif; color: var(--a-marke); background: color-mix(in oklab, var(--a-marke) 10%, white); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--a-marke) 22%, white); }
.app .beispiel { right: 22px; top: auto; bottom: 18px; }

/* Kompaktes Board (Held am Morgen): zwei Spalten, schmale Leiste */
.app-klein .app-leiste { width: 200px; }
.app-klein .app-suche, .app-klein .app-wahl, .app-klein .app-knopf { display: none; }
.app-klein .app-spalte { width: 250px; }

/* Detailfenster einer Bewerbung */
.app-detail { display: flex; flex-direction: column; background: var(--a-karte); border-radius: 28px; overflow: hidden;
  box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 0 0 1px rgb(23 19 31 / .06), 0 40px 80px -40px rgb(20 16 40 / .5); }
.app-detail-kopf { display: flex; align-items: center; gap: 14px; padding: 22px 22px 18px; border-bottom: 1px solid var(--a-rand-voll); }
.app-kuerzel-gross { width: 44px; height: 44px; font-size: 15px; margin: 0; }
.app-detail-name { display: grid; gap: 2px; flex: 1; min-width: 0; }
.app-detail-name b { font-size: 18px; font-weight: 600; }
.app-detail-name small { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--a-leise); }
.app-rund { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--a-zweit); color: var(--a-leise); }
.app-detail-inhalt { padding: 6px 22px 22px; overflow: hidden; flex: 1; }
.app-label { font-size: 13px; font-weight: 500; color: var(--a-leise); margin: 18px 0 8px; }
.app-phasen { display: flex; flex-wrap: wrap; gap: 8px; }
.app-phase { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--a-rand-voll); font-size: 14px; font-weight: 500; }
.app-phase i { width: 8px; height: 8px; border-radius: 50%; }
.app-phase.ist-an { border-color: #6366f1; background: color-mix(in oklab, #6366f1 9%, white); box-shadow: 0 0 0 1px #6366f1 inset; }
.app-phase .ic { width: 15px; height: 15px; }
.app-zeile { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 0 0 14px; border-radius: 14px; background: var(--a-zweit); margin-bottom: 8px; font-size: 14px; color: var(--a-tinte); }
.app-zeile > span { flex: 1; }
.app-zeile .ic { color: var(--a-leise); }
.app-zeile em { width: 44px; height: 44px; display: grid; place-items: center; border-left: 1px solid var(--a-rand-voll); color: var(--a-leise); }
.app-herkunft { display: grid; grid-template-columns: 140px 1fr; row-gap: 6px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--a-zweit); font-size: 14px; }
.app-herkunft dt { color: var(--a-leise); }
.app-herkunft dd { margin: 0; }
.app-antwort { display: grid; gap: 3px; padding: 10px 14px; border-radius: 14px; background: var(--a-zweit); margin-bottom: 8px; }
.app-antwort small { font-size: 12px; color: var(--a-leise); }
.app-antwort b { font-size: 14px; font-weight: 500; }
.app-detail .beispiel { right: 76px; top: 30px; }

/* Bewerbungsseite (wie /<stelle> in der App), in der Hausfarbe des Kunden */
.fs { --k: var(--kunde, #1d4f8f); position: relative; height: 100%; background: #fff; color: #111827; font-size: 15px; line-height: 1.45; overflow: hidden; }
.fs-schirm { position: absolute; inset: 0; display: flex; flex-direction: column; animation: schirm .32s cubic-bezier(.16, 1, .3, 1); }
.fs-schirm[hidden] { display: none; }
@keyframes schirm { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fs-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 58px; padding: 0 16px; border-bottom: 1px solid #f1f2f4; flex: none; }
.fs-logo { display: flex; align-items: center; gap: 8px; line-height: 1.1; }
.fs-logo-kachel { width: 28px; height: 28px; border-radius: 8px; background: var(--k); display: grid; place-items: center; }
.fs-logo-kachel .ic { width: 15px; height: 15px; fill: #fff; }
.fs-logo b { display: block; font-size: 12px; font-weight: 700; }
.fs-logo small { font-size: 10px; color: #6b7280; }
.fs-knopf { appearance: none; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 18px; border-radius: 12px; background: var(--k); color: #fff; font: 700 16px/1 "Schibsted Grotesk", sans-serif; cursor: pointer; box-shadow: 0 8px 18px -10px var(--k); }
.fs-knopf-klein { min-height: 44px; font-size: 13px; padding: 0 11px; border-radius: 10px; white-space: nowrap; }
.fs-knopf .ic { width: 16px; height: 16px; fill: #fff; }
.fs-knopf-aus { opacity: .45; cursor: default; }
.fs-start { padding: 20px 18px 18px; display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.fs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-chips span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid #e5e7eb; font-size: 11px; font-weight: 600; color: #4b5563; }
.fs-chips .ic { width: 12px; height: 12px; }
.fs-h1 { margin-top: 14px; font-size: 25px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.fs-h1 span { color: var(--k); }
.fs-text { margin-top: 10px; font-size: 15px; color: #374151; }
.fs-vorteile { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; font-size: 13px; color: #4b5563; }
.fs-vorteile li { display: flex; gap: 8px; align-items: flex-start; }
.fs-vorteile .ic { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: color-mix(in oklab, var(--k) 12%, white); fill: var(--k); margin-top: 1px; }
.fs-vorteile b { color: #111827; font-weight: 600; }
.fs-start .fs-knopf { margin-top: auto; }
.fs-balken { height: 4px; background: #eef0f3; flex: none; }
.fs-balken i { display: block; height: 100%; background: var(--k); }
.fs-schritt { font-size: 12px; color: #4b5563; margin-left: auto; }
.fs-schritt b { color: #111827; }
.fs-zu { color: #6b7280; display: grid; }
.fs-frage-inhalt { padding: 22px 18px 0; flex: 1; overflow: hidden; }
.fs-abschnitt { font-size: 18px; font-weight: 700; }
.fs-frage { margin-top: 16px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.fs-frage em { color: #ef4444; font-style: normal; }
.fs-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.fs-kacheln button, .fs-liste button { appearance: none; font: inherit; color: #111827; cursor: pointer; background: #fff; border: 1.5px solid #e5e7eb; transition: border-color .2s, background .2s; }
.fs-kacheln button { display: grid; justify-items: center; gap: 6px; padding: 16px 8px; border-radius: 14px; font-size: 15px; font-weight: 600; }
.fs-kacheln button span { font-size: 22px; line-height: 1; }
.fs-liste { display: grid; gap: 8px; margin-top: 12px; }
.fs-liste button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 12px; text-align: left; font-size: 15px; }
.fs-liste i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #9ca3af; flex: none; }
.fs-kacheln button:hover, .fs-liste button:hover { border-color: var(--k); background: color-mix(in oklab, var(--k) 5%, white); }
.fs-fuss { display: flex; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid #f1f2f4; flex: none; }
.fs-zurueck { appearance: none; display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #e5e7eb; background: #fff; font: 500 15px/1 "Schibsted Grotesk", sans-serif; color: #374151; cursor: pointer; }
.fs-fuss .fs-knopf { flex: 1; }
.fs-ende { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 22px; }
.fs-ende-kreis { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--k) 10%, white); }
.fs-ende-kreis .ic { width: 38px; height: 38px; fill: var(--k); }
.fs-ende-kreis.fs-grau { background: #f3f4f6; }
.fs-ende-kreis.fs-grau .ic { fill: #6b7280; width: 32px; height: 32px; }
.fs-ende-titel { margin-top: 18px; font-size: 23px; font-weight: 700; }
.fs-ende-text { margin-top: 8px; font-size: 15px; color: #6b7280; }
.fs-chip-gruen { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid #e5e7eb; font-size: 13px; color: #6b7280; }
.fs-chip-gruen i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.fs-rand { appearance: none; margin-top: 22px; min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; font: 500 14px/1 "Schibsted Grotesk", sans-serif; color: #4b5563; cursor: pointer; }
.fs-notiz { margin-top: 14px; font-size: 12px; color: #9ca3af; }
.fs :focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }

/* Mobil: das Board zeigt, wie in der App, eine Spalte und keine Seitenleiste; unten läuft die Spalte weich aus,
   damit keine Karte mitten im Text abbricht */
.app-mobil .app-leiste, .app-mobil .app-werkzeuge { display: none; }
.app-mobil .app-spalte:not(:first-child) { display: none; }
.app-mobil .app-spalte { width: 100%; }
.app-mobil .app-inhalt { padding: 6px 4px 0; }
.app-mobil .app-spalten { -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent); mask-image: linear-gradient(#000 calc(100% - 64px), transparent); }
/* Dieselbe Handy-Ansicht schon vor seite.js (und ohne JavaScript): gleiche Schwelle wie dort (Rahmen schmaler als
   560 px), Container sind .held-board und .probe-board. So springt beim Laden nichts. */
@container (max-width: 559.98px) {
  .app-rahmen[data-w="960"] { --w: 420 !important; --h: 560 !important; }
  .app-rahmen[data-w="760"] { --w: 420 !important; --h: 430 !important; }
  .app-rahmen > .app .app-leiste, .app-rahmen > .app .app-werkzeuge { display: none; }
  .app-rahmen > .app .app-spalte:not(:first-child) { display: none; }
  .app-rahmen > .app .app-spalte { width: 100%; }
  .app-rahmen > .app .app-inhalt { padding: 6px 4px 0; }
  .app-rahmen > .app .app-spalten { -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent); mask-image: linear-gradient(#000 calc(100% - 64px), transparent); }
}
.fs .ist-gedrueckt { border-color: var(--k) !important; background: color-mix(in oklab, var(--k) 8%, white) !important; transform: scale(.98); }
.fs .fs-knopf.ist-gedrueckt { filter: brightness(.9); }