/* zusage.at · Landingpages v3.2 (lib/seiten-v3.mjs): Kopf wie die Startseite, ein echtes Objekt, eine Mini-Demo, Fragen eingeklappt.
   Nur Layout und Bewegung, alle Farben/Größen als Tokens aus styles.css. Objekte in em: .ding setzt die Größe, die Übersicht /funktionen zeigt sie klein. */

.lp3 .h2x-h { font-size: clamp(40px, 4.2vw + 6px, 80px); }
.lp3 .h2x-h .ln { white-space: normal; }
.lp3 .h2x-h.lang { font-size: clamp(32px, 2.9vw + 6px, 56px); } /* Titel mit sehr langem Wort (Vorstellungsgespräch) */

/* ---------- Bühne rechts im Kopf: heller Grund mit Höhenlinien ---------- */
.h2x-vis.obj { display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--paper-line); }
.h2x-vis.obj::after, .h2x-vis.karte::after { display: none; }
.h2x-vis.obj .topo { z-index: 0; color: var(--paper-line); }
.ding { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; padding: 2em 1em; font-size: clamp(14px, .5vw + 11px, 19px); }

/* Gemeinsam: Häkchen, Stempel, Papier */
i.ok, i.warn, i.frage { flex: none; display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; font-style: normal; }
i.ok { background: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-ink); }
i.ok::before { content: ""; width: .5em; height: .3em; border: solid var(--night); border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-1px); }
i.warn { background: var(--night); }
i.warn::before { content: "!"; color: var(--lime); font-family: var(--font); font-size: .75em; font-weight: 800; }
i.frage { background: var(--soft); box-shadow: inset 0 0 0 1px var(--ring); }
i.frage::before { content: "?"; color: var(--ink-2); font-family: var(--font); font-size: .72em; font-weight: 700; }
.stempel { position: absolute; padding: .3em .75em .25em; border: .18em solid var(--lime-ink); border-radius: .4em; color: var(--lime-ink); font-size: .95em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-12deg); filter: url(#tinte); pointer-events: none; }
.blatt { position: relative; width: 21em; max-width: 100%; padding: 1.5em 1.4em 1.7em; border-radius: .3em; background: var(--surface); color: var(--ink-2); text-align: left; box-shadow: 0 .1em .25em rgba(18, 20, 18, .08), 0 1.6em 2.4em -1.2em rgba(18, 20, 18, .35); }
.bl-kopf { display: flex; align-items: baseline; gap: .5em; padding-bottom: .8em; border-bottom: 1px dashed var(--ring); }
.bl-kopf b { font-size: 1.05em; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.bl-kopf small { margin-left: auto; font-family: var(--mono); font-size: .62em; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bl-job { display: grid; gap: .1em; padding: .8em 0; border-bottom: 1px dashed var(--ring); }
.bl-job b { font-size: 1.25em; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.bl-job span, .bl-fine { font-family: var(--mono); font-size: .7em; color: var(--muted); }
.bl-fine { margin-top: .8em; }

/* Kassenzettel aus dem Drucker-Schlitz (Job-Note) */
.bon { position: relative; width: 22em; max-width: 100%; }
.bon-slot { position: relative; z-index: 2; display: block; height: 1.4em; margin: 0 -1.1em; border-radius: .75em; background: var(--night); box-shadow: inset 0 -.38em 0 var(--night-2), var(--sh-2); }
.bon-slot::after { content: ""; position: absolute; left: 1em; right: 1em; top: .56em; height: .25em; border-radius: .25em; background: var(--pvc); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8); }
.bon-clip { overflow: hidden; margin-top: -.6em; padding: 0 .6em 2.5em; filter: drop-shadow(0 1.1em 1em rgba(18, 20, 18, .2)); }
.bon-paper { position: relative; padding: 1.75em 1.4em 2.1em; background: var(--surface); font-family: var(--mono); font-size: .82em; color: var(--ink-2); text-align: left;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 9px repeat-x; }
.js .h2x-vis .bon-paper { animation: bonDruck 2.4s steps(14, end) .5s both; }
@keyframes bonDruck { from { transform: translateY(-100%); } }
.bon-kopf { display: flex; align-items: center; gap: .6em; padding-bottom: 1em; border-bottom: 1px dashed var(--ring); font-family: var(--font); }
.bon-kopf img { width: 1.4em; height: 1.4em; }
.bon-kopf b { font-size: 1.15em; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.bon-kopf small { margin-left: auto; font-family: var(--mono); font-size: .75em; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bon-job { display: grid; gap: .15em; padding: 1em 0; border-bottom: 1px dashed var(--ring); }
.bon-job b { font-family: var(--font); font-size: 1.55em; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.bon ul { display: grid; gap: .75em; margin: 0; padding: 1em 0; list-style: none; border-bottom: 1px dashed var(--ring); }
.bon li { display: flex; justify-content: space-between; align-items: center; gap: .9em; }
.bon-sum { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1em; font-size: 1.05em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.bon-sum b { font-family: var(--font); font-size: 4.6em; font-weight: 600; line-height: .9; letter-spacing: -.06em; }
.bon-fine { margin-top: .6em; font-size: .85em; color: var(--muted); }
.bon-code { display: block; height: 2.3em; margin-top: 1.4em; opacity: .8; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 17px); }

/* Gehaltsabrechnung */
.lohn { transform: rotate(-2deg); }
.lohn-z { margin: 0; padding: .7em 0 0; font-family: var(--mono); font-size: .82em; }
.lohn-z div { display: flex; justify-content: space-between; gap: 1em; padding: .4em 0; }
.lohn-z dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.lohn-z .sum { margin-top: .4em; padding-top: .7em; border-top: 2px solid var(--ink); font-family: var(--font); font-size: 1.35em; font-weight: 600; color: var(--ink); }

/* Brief im Kuvert */
.kuvert { position: relative; width: 22em; max-width: 100%; height: 18em; }
.kv-brief { position: absolute; left: 1.3em; right: 1.3em; top: 0; height: 15em; padding: 1.3em; border-radius: .25em; background: var(--surface); color: var(--ink-2); font-size: .9em; text-align: left; box-shadow: 0 .1em .3em rgba(18, 20, 18, .12); }
.js .h2x-vis .kv-brief { animation: briefRaus 1.2s var(--ease) .6s both; }
@keyframes briefRaus { from { transform: translateY(5em); } }
.kv-an { font-weight: 600; color: var(--ink); }
.kv-brief i { display: block; height: .5em; margin-top: .75em; border-radius: .25em; background: var(--line); }
.kv-brief i.k { width: 72%; } .kv-brief i.k2 { width: 46%; }
.kv-gruss { margin-top: 1em; font-size: .9em; }
.kv-tasche { position: absolute; left: 0; right: 0; bottom: 0; height: 10.5em; display: grid; align-content: end; justify-items: start; gap: .15em; padding: 1.2em 1.4em; border-radius: .5em; overflow: hidden; background: var(--night); color: #fff; text-align: left; box-shadow: 0 1.6em 2.4em -1.2em rgba(18, 20, 18, .55); }
.kv-tasche::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--night-line) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), var(--night-line) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; } /* Falzlinien des Kuverts */
.kv-tasche > * { position: relative; }
.kv-tasche b { font-size: 1.35em; font-weight: 600; letter-spacing: -.03em; }
.kv-tasche small { font-size: .8em; color: var(--night-muted); }
.kv-marke { position: absolute !important; right: 1.1em; top: 1.1em; display: grid; place-items: center; width: 2.6em; height: 3em; border-radius: .2em; background: var(--lime); box-shadow: 0 0 0 .2em var(--night), 0 0 0 .3em var(--lime); }
.kv-marke img { width: 1.4em; height: 1.4em; }

/* Klemmbrett */
.klemm { position: relative; width: 22em; max-width: 100%; padding: 2.4em 1em 1em; border-radius: .9em; background: var(--night-2); box-shadow: inset 0 0 0 .15em var(--night-line), 0 1.6em 2.4em -1.2em rgba(18, 20, 18, .5); transform: rotate(2deg); }
.kl-clip { position: absolute; z-index: 2; left: 50%; top: -.8em; width: 8em; height: 2.7em; margin-left: -4em; border-radius: .6em .6em .45em .45em; background: linear-gradient(var(--metal), var(--metal-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 .3em .5em rgba(18, 20, 18, .35); }
.kl-blatt { width: auto; padding-top: 1.7em; }
.kl-liste { display: grid; margin: 0; padding: .3em 0 0; list-style: none; }
.kl-liste li { display: grid; grid-template-columns: 1fr auto; column-gap: .6em; padding: .65em 0; border-bottom: 1px solid var(--line); }
.kl-liste b { font-size: .95em; font-weight: 600; color: var(--ink); }
.kl-liste small { grid-column: 1; font-size: .75em; color: var(--muted); }
.kl-liste em { grid-row: 1 / span 2; grid-column: 2; align-self: center; padding: .3em .75em; border-radius: 99em; background: var(--soft); color: var(--ink); font-style: normal; font-size: .72em; font-weight: 700; }
.kl-liste em.lime { background: var(--lime); }
.kl-liste em.leer { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.kl-zusage { position: relative; min-height: 3.2em; }
.kl-stempel { right: 0; top: 50%; margin-top: -1em; font-size: .85em; }

/* Handy mit Benachrichtigungen */
.handy { position: relative; width: 15em; height: 30em; padding: 3.2em 1em 1em; border-radius: 2.4em; background: var(--night-2); color: #fff; text-align: center; box-shadow: inset 0 0 0 .5em var(--night), inset 0 0 0 .6em var(--night-line), 0 2em 3em -1.4em rgba(18, 20, 18, .55); }
.hd-insel { position: absolute; left: 50%; top: 1em; width: 4.6em; height: 1.25em; margin-left: -2.3em; border-radius: 1em; background: var(--night); }
.hd-zeit { margin-top: .2em; font-size: 3.8em; font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.hd-tag { margin-top: .4em; font-size: .8em; color: var(--night-muted); }
.hd-noti { display: grid; gap: .5em; margin: 2em 0 0; padding: 0; list-style: none; text-align: left; }
.hd-noti li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6em; align-items: start; padding: .75em; border-radius: 1.1em; background: color-mix(in srgb, var(--surface) 14%, transparent); }
.js .h2x-vis .hd-noti li { animation: notiRein .6s var(--spring) 1s both; }
.js .h2x-vis .hd-noti li + li { animation-delay: 1.6s; }
@keyframes notiRein { from { opacity: 0; transform: translateY(-1.2em) scale(.96); } }
.hd-noti img { width: 1.8em; height: 1.8em; border-radius: .45em; }
.hd-noti b, .hd-noti span { display: block; font-size: .72em; line-height: 1.35; }
.hd-noti span { color: var(--night-muted); }
.hd-noti small { font-size: .6em; color: var(--night-muted); }
.hd-strich { position: absolute; left: 50%; bottom: .8em; width: 5em; height: .25em; margin-left: -2.5em; border-radius: 1em; background: var(--night-muted); }

/* Notizblock mit Ringbindung */
.block { position: relative; width: 20em; max-width: 100%; transform: rotate(-2deg); }
.bk-ringe { position: absolute; z-index: 2; left: 1.2em; right: 1.2em; top: -.75em; height: 1.6em; background: radial-gradient(circle, var(--metal-2) 0 .3em, transparent .32em) 0 0 / 1.4em 1.6em repeat-x; }
.bk-blatt { padding: 2em 1.4em 1.5em; border-radius: .3em; background: var(--surface) repeating-linear-gradient(transparent 0 1.9em, var(--line) 1.9em calc(1.9em + 1px)) 0 3.05em / 100% 100% no-repeat; text-align: left; box-shadow: 0 .1em .25em rgba(18, 20, 18, .08), 0 1.6em 2.4em -1.2em rgba(18, 20, 18, .35); }
.bk-titel { font-weight: 600; color: var(--ink); }
.block ul { margin: .4em 0 0; padding: 0; list-style: none; }
.block li { display: flex; align-items: center; gap: .6em; height: 1.9em; font-size: .92em; color: var(--ink); }
.bk-frage { margin-top: .5em; font-size: .85em; color: var(--ink-2); }

/* Lebenslauf mit Büroklammer */
.cv { transform: rotate(1.5deg); }
.cv-klammer { position: absolute; left: 2.2em; top: -1.5em; width: 1.4em; height: 3.8em; fill: none; stroke: var(--metal-2); stroke-width: 3; stroke-linecap: round; }
.cv-kopf { display: flex; align-items: center; gap: .9em; padding-bottom: .9em; border-bottom: 1px dashed var(--ring); }
.cv-foto { display: block; width: 3.6em; height: 3.6em; border-radius: .5em; overflow: hidden; background: var(--id-photo); }
.cv-foto svg { width: 100%; height: 100%; fill: var(--id-sil); stroke: none; }
.cv-kopf b { display: block; font-size: 1.2em; font-weight: 600; color: var(--ink); }
.cv-kopf small { font-family: var(--mono); font-size: .62em; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cv-h { margin-top: .9em; font-family: var(--mono); font-size: .62em; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cv-z { display: flex; justify-content: space-between; gap: 1em; font-size: .9em; color: var(--ink); }
.cv-z small { color: var(--muted); }
.cv > i { display: block; height: .45em; margin-top: .55em; border-radius: .25em; background: var(--line); }
.cv > i.k { width: 60%; }
.cv-tags { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .4em; }
.cv-tags em { padding: .25em .65em; border-radius: 99em; background: var(--soft); font-style: normal; font-size: .72em; font-weight: 600; color: var(--ink); }

/* Bewerbungsnachweis als Tabelle */
.tab { width: 23em; transform: rotate(-1.5deg); }
.tab-zeit { margin-top: .6em; font-family: var(--mono); font-size: .68em; color: var(--muted); }
.tab table, .na-blatt table { width: 100%; margin-top: .6em; border-collapse: collapse; font-size: .78em; }
.tab th, .na-blatt th { padding: .5em .4em; border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: .8em; font-weight: 500; letter-spacing: .08em; text-align: left; text-transform: uppercase; color: var(--muted); }
.tab td, .na-blatt td { padding: .55em .4em; border-bottom: 1px solid var(--line); color: var(--ink); }
.tab { padding-bottom: 3.4em; }
.tab-stempel { right: 1.3em; bottom: .9em; }

/* Video-Call des Coachs (Bauteile aus seite.css .ic-*) */
.ding-coach { width: min(30em, 100%); text-align: left; }

/* ---------- Karte des Bundeslands mit Umkreis-Ring ---------- */
.h2x-vis.karte { container-type: inline-size; /* alle Breiten: mit „size“ richtet sich die Höhe nicht nach der Karte, am PC schrumpfte sie auf 77 px */ display: grid; align-content: center; align-self: center; gap: var(--s5); min-height: 0; padding: clamp(20px, 3vw, 44px) clamp(16px, 2.4vw, 32px); box-shadow: inset 0 0 0 1px var(--paper-line); }
.kt { position: relative; width: 100%; border-radius: 18px; overflow: hidden; } /* Kartenausschnitt mit runden Ecken; Ring und Namen bleiben innen */
.kt svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.kt path { fill: var(--line); stroke: var(--soft); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kt path.on { fill: var(--lime); }
.kt-ring { position: absolute; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--night); background: color-mix(in srgb, var(--night) 7%, transparent); pointer-events: none; transition: left .6s var(--ease), top .6s var(--ease), width .6s var(--spring); }
.kt-ort { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; color: var(--ink); text-decoration: none; }
.kt-ort i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--night); transition: transform var(--dur) var(--spring), background var(--dur) var(--ease); }
.kt-ort.drin i { background: var(--night); }
.kt-ort.on { z-index: 2; }
.kt-ort.on i { width: 16px; height: 16px; background: var(--night); box-shadow: 0 0 0 3px var(--lime), 0 0 0 5px var(--night); }
.kt-ort span { position: absolute; left: 50%; bottom: 100%; padding: 6px 12px; border-radius: var(--r-pill); background: var(--night); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; transform: translate(-50%, -4px); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.kt-ort.on span, .kt-ort:hover span { opacity: 1; }
.kt-ort:hover { z-index: 3; }
.kt-ort:hover i { transform: scale(1.3); }
.kt-ui { position: relative; z-index: 4; display: grid; justify-items: center; gap: var(--s4); }
.kt-km, .wo-zeit { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.kt-km button, .wo-zeit button { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font: inherit; font-size: var(--t-s); font-weight: 600; cursor: pointer; }
.kt-km button[aria-pressed="true"], .wo-zeit button[aria-pressed="true"] { background: var(--night); color: #fff; }
html:not(.js) .kt-km { display: none; }
.kt-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kt-liste a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: var(--t-s); font-weight: 500; text-decoration: none; }
.kt-liste a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.kt-liste a[aria-current] { background: var(--night); color: #fff; }

/* ---------- Mini-Demos unter dem Kopf ---------- */
.lp-demo { padding-top: clamp(40px, 6vw, 96px); text-align: center; }
.lp-demo h2 { max-width: none; font-size: clamp(36px, 4vw + 14px, 76px); line-height: 1; }
.so-stage, .wo, .wa, .sc, .ne, .ti, .st, .al, .pr, .ge, .na { display: grid; justify-items: center; gap: var(--s6); width: min(560px, 100%); margin: clamp(32px, 4vw, 56px) auto 0; }
.lp-demo button:disabled { opacity: 1; cursor: default; }
.so-list li, .sc-liste li, .al-neu li, .ge-liste li, .pr-liste li { position: relative; display: flex; align-items: center; gap: var(--s4); padding: 16px 18px; border-radius: 22px; background: var(--surface); text-align: left; box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.so-list, .sc-liste, .al-neu, .ge-liste, .pr-liste { display: grid; gap: 10px; width: 100%; margin: 0; padding: 0; list-style: none; }
.so-list li div, .sc-liste li div, .al-neu li div, .ge-liste li div { display: grid; gap: 2px; min-width: 0; }
.so-list li div b, .sc-liste li div b, .al-neu li div b, .ge-liste li div b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.so-list li small, .sc-liste li small, .al-neu li small, .ge-liste li small { color: var(--muted); font-size: var(--t-s); }
.lp-demo .m-ring { width: 58px; height: 58px; }
.lp-demo .m-ring b { font-size: 18px; font-weight: 700; }

/* Sortieren */
.so-list.zu .m-ring { --c: var(--line); }
.so-list.zu .m-ring b { color: var(--muted); }
.so-list li.best { box-shadow: 0 0 0 3px var(--lime), var(--sh-2); }
.so-top { position: static; margin-left: auto; opacity: 0; }
.so-list li.best .so-top { animation: stampHit .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.so-top { padding: .3em .7em .25em; border: .17em solid var(--lime-ink); border-radius: .4em; color: var(--lime-ink); font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-10deg); }
html:not(.js) .so-go, html:not(.js) #scGo, html:not(.js) #tiGo, html:not(.js) #prGo, html:not(.js) #naGo { display: none; }

/* Woche planen */
.wo-tage { display: flex; gap: clamp(6px, 2vw, 14px); }
.wo-tage button { display: grid; justify-items: center; gap: 10px; width: clamp(52px, 13vw, 76px); padding: 12px 0 14px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: var(--sh-1), 0 0 0 1px var(--line); color: var(--muted); font: inherit; font-size: var(--t-s); font-weight: 600; cursor: pointer; transition: transform var(--fast) var(--spring), box-shadow var(--dur) var(--ease); }
.wo-tage button:active { transform: scale(.94); }
.wo-tage button[aria-pressed="true"] { color: var(--ink); box-shadow: var(--sh-1), 0 0 0 2px var(--night); }
.wo-bar { display: flex; flex-direction: column; gap: 4px; width: 22px; height: 120px; }
.wo-bar i { flex: 1; border-radius: 7px; background: var(--soft); transition: background var(--dur) var(--ease), transform var(--dur) var(--spring); }
.wo[data-vm="1"] button[aria-pressed="true"] .vm { background: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-ink); }
.wo[data-nm="1"] button[aria-pressed="true"] .nm { background: var(--night); }
.wo-sum { display: grid; gap: 2px; }
.wo-sum b { font-size: clamp(40px, 4vw + 16px, 64px); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.wo-sum span { color: var(--muted); }
html:not(.js) .wo-tage, html:not(.js) .wo-zeit { pointer-events: none; }

/* Wahl */
.wa-opt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.wa-opt button { position: relative; display: grid; align-content: end; gap: 4px; min-height: 150px; padding: 18px; border: 0; border-radius: 24px; background: var(--surface); box-shadow: var(--sh-1), 0 0 0 1px var(--line); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform var(--fast) var(--spring); }
.wa-opt button:active { transform: scale(.96); }
.wa-opt b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.wa-opt small { color: var(--muted); font-size: var(--t-s); }
.wa-opt button[aria-pressed="true"] { background: var(--night); color: #fff; }
.wa-opt button[aria-pressed="true"] small { color: var(--night-muted); }
.wa-stempel { position: absolute; right: 14px; top: 14px; padding: .25em .6em .2em; border: .17em solid var(--lime); border-radius: .4em; color: var(--lime); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: rotate(-10deg); filter: url(#tinte); }
.wa-opt button[aria-pressed="true"] .wa-stempel { animation: stampHit .5s cubic-bezier(.2, 1.4, .4, 1) both; }

/* Websites lesen */
.sc-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--soft); box-shadow: inset 0 0 0 2px var(--line); }
.sc-st { margin-left: auto; color: var(--muted); font-style: normal; font-size: var(--t-s); text-align: right; }
.sc.bereit li:not(.fertig) .sc-st { opacity: 0; }
@media (max-width: 480px) { .sc.bereit li:not(.fertig) .sc-st { display: none; } } /* Handy: Namen nicht stauchen */
.sc-liste li.liest .sc-ic { box-shadow: inset 0 0 0 3px var(--line); border-top: 3px solid var(--night); animation: dreh .7s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.sc-liste li.fertig .sc-ic { background: var(--soft); }
.sc-liste li.fund { box-shadow: 0 0 0 3px var(--lime), var(--sh-2); }
.sc-liste li.fund .sc-ic, html:not(.js) .sc-liste li[data-fund] .sc-ic { background: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-ink); }
.sc-liste li[data-fund] .sc-st { color: var(--ink); font-weight: 600; }
.sc-sum { min-height: 1.5em; font-size: var(--t-m); font-weight: 600; }

/* Brutto-Netto */
.ne-regler { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; width: 100%; text-align: left; }
.ne-regler span { color: var(--muted); }
.ne-regler output { font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
.ne-regler input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--night); cursor: pointer; }
.ne-aus { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ne-aus p { display: grid; gap: 6px; padding: 20px; border-radius: 22px; background: var(--surface); text-align: left; box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.ne-aus p:first-child { background: var(--night); color: #fff; box-shadow: none; }
.ne-aus span { font-size: var(--t-s); color: var(--muted); }
.ne-aus p:first-child span { color: var(--night-muted); }
.ne-aus b { font-size: clamp(32px, 3vw + 14px, 48px); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.ne-aus p:first-child b { color: var(--lime); }
.ne-fine { color: var(--muted); font-size: var(--t-s); }

/* Anschreiben tippt sich */
.ti-blatt { width: 100%; min-height: 220px; padding: 26px 28px; border-radius: 6px; background: var(--surface); text-align: left; box-shadow: 0 1px 3px rgba(18, 20, 18, .08), 0 28px 50px -28px rgba(18, 20, 18, .35); }
.ti-an { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px dashed var(--ring); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ti-text { color: var(--ink); font-size: var(--t-m); line-height: 1.6; }
.ti.bereit .ti-text:empty { height: 6.4em; background: repeating-linear-gradient(transparent 0 .55em, var(--soft) .55em 1.05em, transparent 1.05em 1.6em); } /* leere Zeilen, bis der Text kommt */
.ti-text.tippt::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: var(--ink); animation: blink 1s steps(1) infinite; }
.ti-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ti-wege span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-s); font-weight: 600; }
.ti-wege span:first-child { background: var(--night); color: #fff; box-shadow: none; }
.ti.bereit .ti-wege:not(.da) { visibility: hidden; }
.ti-wege.da span { animation: inUp .5s var(--ease) both; }
.ti-wege.da span:nth-child(2) { animation-delay: .1s; } .ti-wege.da span:nth-child(3) { animation-delay: .2s; }

/* Bewerbungs-Stufen */
.st-spalten { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-spalten li span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: var(--t-s); font-weight: 600; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.st-spalten li.on span { background: var(--night); color: #fff; box-shadow: none; }
.st.zusage .st-spalten li.on span { background: var(--lime); color: var(--ink); }
.st-karte { position: relative; display: grid; gap: 4px; justify-items: start; width: min(380px, 100%); padding: 24px 26px; border: 0; border-radius: 24px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sh-2), 0 0 0 1px var(--line); transition: transform var(--dur) var(--spring); }
.st-karte:active { transform: scale(.97) rotate(-1deg); }
.st-karte b { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.st-karte small { color: var(--muted); }
.st-chip { margin-top: 10px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--soft); font-style: normal; font-size: var(--t-xs); font-weight: 700; }
.st.zusage .st-chip { background: var(--lime); }
.st-stempel { position: absolute; right: 20px; top: 50%; padding: .3em .7em .25em; border: .17em solid var(--lime-ink); border-radius: .4em; color: var(--lime-ink); font-size: 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(-50%) rotate(-12deg); filter: url(#tinte); }
.st.zusage .st-stempel { animation: stampHit2 .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes stampHit2 { 0% { opacity: 0; transform: translateY(-50%) rotate(-24deg) scale(2.2); } 60% { opacity: 1; transform: translateY(-50%) rotate(-11deg) scale(.94); } 100% { opacity: .95; transform: translateY(-50%) rotate(-12deg) scale(1); } }

/* Schalter (Job-Alarm, Lebenslauf) */
.al-schalter { display: flex; align-items: center; gap: var(--s4); width: min(420px, 100%); padding: 16px 18px 16px 22px; border: 0; border-radius: 22px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.al-schalter span { display: grid; gap: 2px; flex: 1; }
.al-schalter b { font-size: 18px; font-weight: 600; }
.al-schalter small { color: var(--muted); font-size: var(--t-s); }
.al-schalter i { position: relative; flex: none; width: 58px; height: 34px; border-radius: 99px; background: var(--line); transition: background var(--dur) var(--ease); }
.al-schalter i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); box-shadow: var(--sh-1); transition: transform var(--dur) var(--spring); }
.al-schalter[aria-checked="true"] i { background: var(--night); }
.al-schalter[aria-checked="true"] i::after { transform: translateX(24px); background: var(--lime); }
.al-neu li { animation: inUp .5s var(--spring) both; }
.al-neu li em, .ge-d { margin-left: auto; padding: 5px 12px; border-radius: var(--r-pill); background: var(--lime); font-style: normal; font-size: var(--t-xs); font-weight: 700; }
html:not(.js) .al-neu li[hidden] { display: flex; }

/* Stellen-Check */
.pr-liste li { gap: var(--s3); font-size: var(--t-m); color: var(--ink); }
.pr-liste i.ok, .pr-liste i.warn, .pr-liste i.frage { font-size: 22px; }
.pr.bereit .pr-liste li:not(.da) { color: var(--muted); } /* vor dem Prüfen: Punkte grau, Zeichen noch leer */
.pr.bereit .pr-liste li:not(.da) i { background: var(--soft); box-shadow: inset 0 0 0 1px var(--ring); }
.pr.bereit .pr-liste li:not(.da) i::before { content: none; }
.pr.bereit .pr-frage:not(.da) { opacity: 0; transform: translateY(10px); }
.pr-liste li.da i { animation: pop var(--slow) var(--spring) both; }
.pr-liste li, .pr-frage { transition: opacity .4s var(--ease), transform .4s var(--spring); }
.pr-frage { display: grid; gap: 6px; width: 100%; padding: 20px 22px; border-radius: 22px; background: var(--night); color: #fff; font-size: var(--t-m); text-align: left; }
.pr-frage small { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }

/* Lebenslauf: genauer */
.ge-d { min-width: 48px; text-align: center; background: none; }
.ge-d.rauf { background: var(--lime); }
.ge-d.runter { background: var(--night); color: #fff; }

/* Karteikarten */
.ka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(900px, 100%); margin: clamp(32px, 4vw, 56px) auto 0; perspective: 1200px; }
.ka-karte { position: relative; min-height: 220px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; transform-style: preserve-3d; transition: transform .6s var(--spring); }
.ka-karte[aria-pressed="true"] { transform: rotateY(180deg); }
.ka-karte > span { position: absolute; inset: 0; display: grid; align-content: space-between; gap: 12px; padding: 22px; border-radius: 24px; text-align: left; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; backface-visibility: hidden; }
.ka-karte small { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ka-vorne { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.ka-vorne small { color: var(--muted); }
.ka-hinten { background: var(--night); color: #fff; font-size: 17px !important; font-weight: 500 !important; transform: rotateY(180deg); }
.ka-hinten small { color: var(--lime); }
.ka-go { margin-top: var(--s6); }

/* AMS-Nachweis */
.na-blatt { width: 100%; font-size: 18px; }
.na-blatt table { margin-top: 0; }
.na.bereit tbody tr:not(.da) td { color: transparent; }
.na.bereit tbody tr:not(.da) td::before { content: ""; display: block; height: .55em; border-radius: .3em; background: var(--soft); }
.na tbody tr.da { animation: inUp .4s var(--ease) both; }
.na-stempel { right: 1em; bottom: -.6em; font-size: 22px; opacity: 0; }
.na.fertig .na-stempel, html:not(.js) .na-stempel { opacity: .95; animation: stampHit .5s cubic-bezier(.2, 1.4, .4, 1) both; }

/* ---------- Fragen eingeklappt ---------- */
.lp-fragen { padding-top: 0; }
.lp-fragen .wrap { max-width: 860px; }
.lp-fragen h2 { margin-bottom: var(--s5); font-size: var(--t-l); font-weight: 600; letter-spacing: -.02em; }
.lp-fragen .qa summary { font-weight: 600; }
.lp-fragen .prose { padding-bottom: var(--s5); color: var(--ink-2); }
.lp-fragen .prose h3 { margin: var(--s5) 0 var(--s2); font-size: var(--t-m); font-weight: 600; color: var(--ink); }
.lp-fragen .prose p { margin: 0; }
.lp-demo + .lp-fragen, .h2x + .lp-fragen { padding-top: clamp(64px, 8vw, 120px); }

/* ---------- Übersichten ---------- */
.ue { padding-top: clamp(24px, 4vw, 56px); }
.ue-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s5); }
.ue-kopf .h2x-cta { margin-top: 0; }
.ue-raster { margin-top: clamp(32px, 5vw, 72px); }
.at-karte { padding: clamp(16px, 3vw, 48px); border-radius: 36px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--paper-line); }
.at-karte svg { display: block; width: 100%; height: auto; overflow: visible; }
.at-karte path { fill: var(--line); stroke: var(--soft); stroke-width: 2; stroke-linejoin: round; transition: fill var(--dur) var(--ease); }
.at-karte a:hover path, .at-karte a:focus-visible path { fill: var(--lime); }
.at-karte a:focus-visible { outline: none; }
.at-karte a:focus-visible path { stroke: var(--night); stroke-width: 3; }
.at-karte text { stroke: none; fill: var(--ink); font-family: var(--font); font-size: 15px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; pointer-events: none; letter-spacing: -.01em; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.fx { position: relative; display: grid; grid-template-rows: 250px auto; overflow: hidden; border-radius: 28px; background: var(--soft); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--paper-line); transition: transform var(--dur) var(--spring); }
.fx:hover { transform: translateY(-4px); }
.fx-ding { display: grid; place-items: center; overflow: hidden; font-size: 8px; pointer-events: none; }
.fx-ding > img { width: 100%; height: 100%; object-fit: cover; }
.fx-ding .ding-coach { width: 520px; zoom: .42; }
.fx-ding .bon-clip { padding-bottom: 0; }
.fx-name { padding: 16px 20px 20px; font-size: 20px; font-weight: 600; letter-spacing: -.03em; }

@media (max-width: 1000px) {
  .h2x-vis.obj, .h2x-vis.karte { height: auto; min-height: 0; }
  .h2x-vis.obj { min-height: 520px; }
}
@media (max-width: 600px) {
  .wa-opt { grid-template-columns: 1fr; }
  .wa-opt button { min-height: 0; }
  .ne-aus { grid-template-columns: 1fr; }
  .ka { grid-template-columns: 1fr; }
  .ka-karte { min-height: 170px; }
  .na-blatt { font-size: 14px; }
  .at-karte text { font-size: 22px; }
}
@media (max-width: 480px) {
  .ding { font-size: 13px; }
  .kt-km button, .wo-zeit button { padding: 0 14px; }
  .so-list li, .sc-liste li, .al-neu li, .ge-liste li, .pr-liste li { padding: 14px; gap: var(--s3); }
  .lp-demo .m-ring { width: 50px; height: 50px; }
  .wo-bar { height: 96px; }
  .ti-blatt { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .h2x-vis .bon-paper, .js .h2x-vis .kv-brief, .js .h2x-vis .hd-noti li { animation: none; }
  .kt-ring, .ka-karte { transition: none; }
  .sc-liste li.liest .sc-ic { animation: none; }
}
/* Echte Zahl aus dem Tagesvorrat unter dem Knopf (/jobsuche/<land>, server.mjs vorratZahl) */
.h2x-zahl { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 34ch; }