@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f3f2ef; --surface: #ffffff; --text: #1c1b19; --muted: #6f6c66;
  --accent: #1d6b5c; --accent-soft: #dcefe8; --warm: #a8681e; --line: #e6e4df;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
h1, h2, h3, .brand { font-family: 'Bricolage Grotesque', 'Segoe UI', sans-serif; letter-spacing: -0.02em; }
a { color: var(--accent); }
.topbar { height: 56px; display: flex; align-items: center; gap: 28px; padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .brand { font-size: 19px; font-weight: 800; }
.topbar nav { display: flex; gap: 22px; font-size: 13.5px; height: 56px; align-items: center; }
.topbar nav a { color: #3f3d38; text-decoration: none; display: flex; align-items: center; height: 56px; }
.topbar nav a.active { border-bottom: 2px solid var(--accent); font-weight: 700; }
.topbar .spacer { flex: 1; }
main { padding: 16px 28px; max-width: 1280px; margin: 0 auto; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px; }
.card.narrow { max-width: 440px; margin: 64px auto; }
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=datetime-local] { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d6d3cc; border-radius: 8px; font: inherit; }
button, .button { height: 44px; padding: 0 18px; border-radius: 8px; border: 1.5px solid #cfccc5; background: var(--surface); font: inherit; font-weight: 600; cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.error { color: #a4432f; font-size: 13.5px; margin-top: 8px; }
.muted { color: var(--muted); font-size: 12.5px; }
.empty { padding: 48px 24px; text-align: center; color: var(--muted); }
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 14px; background: #faf9f7; border-bottom: 1px solid var(--line); }
td { padding: 10px 14px; border-bottom: 1px solid #ebe9e4; font-size: 13.5px; vertical-align: middle; }
.pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.pill.warm { background: #f2e6cf; color: #7a5312; }
/* .actions is shared by the job detail, Suchprofil, Aktiv and Auswahl forms as
   well as the admin user table (job.html, suchprofil.html, _aktiv_inhalt.html,
   _auswahl_inhalt.html, admin/nutzer.html). flex-wrap (Task 17 fix-up): the
   admin table's Aktionen cell carries up to four forms (Sammler jetzt,
   Einladung, Deaktivieren/Aktivieren, Löschen), which at desktop widths no
   longer fits one line inside .table-scroll's available column width without
   clipping, so it wraps to a second line instead of relying on the horizontal
   scrollbar alone; harmless everywhere else, since none of those forms are
   wide enough to need it. */
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.actions form { display: inline; }
.mb-16{margin-bottom:16px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.mt-14{margin-top:14px}
.max-640{max-width:640px}

/* Task 10: dashboard design system (values from the docs/design/*.dc.html artboards) */
:root { --bg:#f3f2ef; --surface:#fff; --text:#1c1b19; --muted:#6f6c66; --accent:#1d6b5c; --accent-soft:#dcefe8; --accent-row:#e4efeb; --warm:#a8681e; --warm-soft:#f2e6cf; --line:#e6e4df; --line-soft:#ebe9e4; --chip:#d6d3cc; --danger:#a4432f; }
.topbar .count { font-size:12px; color:var(--muted); margin-left:6px; }
.topbar a.setup { color:var(--warm); font-weight:700; }
.topbar details.menu { position:relative; } .topbar details.menu summary { list-style:none; cursor:pointer; height:44px; display:flex; align-items:center; padding:0 10px; }
.topbar details.menu form { display:block; margin:6px 0; } .topbar details.menu > div { position:absolute; right:0; top:48px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 12px; box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:5; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:8px 0 12px; }
.page-head h1 { margin:0; font-size:26px; } .page-head .sub { color:var(--muted); font-size:13px; }
.progress { height:4px; background:var(--line); border-radius:2px; margin-bottom:14px; } .progress > div { height:4px; background:var(--accent); border-radius:2px; }
.chips { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.chip { height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--chip); background:var(--surface); color:#3f3d38; font-size:13px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; text-decoration:none; }
.chip.on { background:var(--text); color:#fff; border-color:var(--text); } .chip .count { font-size:12px; color:var(--muted); } .chip.on .count { color:var(--chip); }
.split { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:18px; align-items:start; }
/* .split.reading (Task 16, Lernen): the topic list only needs room for a few short
   titles, so the fixed 400px .split gives the prose column, not the list, the extra
   width; this variant narrows the list to 260px and lets the reading column flex
   instead. Declared here, before the mobile @media block below, on purpose: it has
   the same specificity (two classes) as that block's own ".split.reading" override,
   so cascade order decides the tie, and the later, media-scoped rule needs to win
   under 860px or the page gets horizontal scroll. Keep it above the @media block. */
.split.reading { grid-template-columns: 260px minmax(0,1fr); }
.rows { background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.rows .head, .row { display:grid; grid-template-columns:92px minmax(0,1fr) 180px 48px 56px; gap:12px; align-items:center; padding:0 14px; height:46px; border-bottom:1px solid var(--line-soft); }
.rows .head { height:34px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:#faf9f7; }
.row { cursor:pointer; text-decoration:none; color:inherit; } .row:hover { background:#faf9f7; } .row.sel { background:var(--accent-row); } .row.done { background:#fafaf8; opacity:.55; }
.row .title { font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .row.sel .title { font-weight:700; } .row .title.unscored { color:#5f5c56; }
.score { display:flex; align-items:center; gap:8px; } .score b { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:14px; width:26px; } .score.none b { color:#a8a49c; }
.bar { width:46px; height:4px; background:var(--line); border-radius:2px; } .bar > i { display:block; height:4px; border-radius:2px; background:var(--accent); }
.score.mid .bar > i { background:#5a8f83; } .score.low .bar > i { background:#b3b0a8; } .score.none .bar { border:1px dashed #cfccc5; background:none; }
.tag { font-size:10px; font-weight:800; letter-spacing:.04em; padding:2px 6px; border-radius:4px; background:var(--accent-soft); color:var(--accent); margin-left:6px; }
.pill { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent); white-space:nowrap; }
.pill.grey { background:var(--line-soft); color:var(--muted); } .pill.warm { background:var(--warm-soft); color:#7a5312; }
.focus { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px 22px; position:sticky; top:16px; }
.focus .meta { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); } .focus h2 { font-size:20px; margin:8px 0 12px; line-height:1.25; }
.meta-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; }
.ring { width:64px; height:64px; border-radius:50%; border:5px solid var(--accent); display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque',sans-serif; font-size:22px; font-weight:800; color:var(--accent); flex-shrink:0; }
.ring.mid { border-color:#5a8f83; color:#5a8f83; } .ring.low { border-color:#b3b0a8; color:#b3b0a8; } .ring.none { border-color:#d6d3cc; color:#a8a49c; }
.scorebox { display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.desc { font-size:13.5px; line-height:1.5; white-space:pre-line; overflow-wrap:anywhere; max-height:260px; overflow:hidden; margin:12px 0 6px; position:relative; }
.desc.open { max-height:none; } .desc:not(.open)::after { content:""; position:absolute; left:0; right:0; bottom:0; height:48px; background:linear-gradient(transparent,var(--surface)); }
.notice { background:var(--warm-soft); color:#7a5312; border-radius:8px; padding:10px 12px; font-size:13px; margin:10px 0; }
.decide { display:flex; gap:10px; margin-top:14px; } .decide button { flex:1; height:48px; display:flex; align-items:center; justify-content:center; gap:8px; }
.decide > a.button { flex:1; display:flex; align-items:center; justify-content:center; text-decoration:none; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; } button.ghost { border-color:transparent; background:none; color:#3f3d38; } button.danger { color:var(--danger); border-color:#e5c9c2; }
.linkbtn { background:none; border:0; padding:0; color:var(--accent); font:inherit; cursor:pointer; text-decoration:underline; }
.hint { font-size:12.5px; color:var(--muted); margin-top:10px; }
.cmd { display:flex; align-items:center; gap:10px; background:#faf9f7; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13.5px; } .cmd code { font-family:ui-monospace,Consolas,monospace; background:var(--accent-soft); padding:2px 6px; border-radius:4px; }
.cmd button { height:36px; padding:0 12px; margin-left:auto; }
.stack > * + * { margin-top:14px; }
.stack-8 > * + * { margin-top:8px; }
.actions input[type=text] { flex:1; min-width:0; }
.list { font-size:13.5px; } .list > div { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line-soft); } .list > div:last-child { border-bottom:0; }
textarea { width:100%; min-height:120px; padding:10px 12px; border:1px solid #d6d3cc; border-radius:8px; font:inherit; resize:vertical; }
select { height:44px; padding:0 10px; border:1px solid #d6d3cc; border-radius:8px; font:inherit; background:var(--surface); }
.only-mobile { display:none; }
.decide form { flex:1; display:flex; }
.mt-8 { margin-top: 8px; }
.inline { display:inline; }
/* Task 17 follow-up (Step 0): between the phone breakpoint (860px, nav replaced
   by the details.menu burger) and roughly 1000px, the topbar's eight nav links
   at their full 22px gap plus the "seit …" user-name span overflow the viewport
   by about 84px (details.menu, the name and the logout forms push past the
   right edge). Narrowing the nav gaps and dropping the name (still readable via
   the menu) recovers that width without touching the phone layout above. */
@media (min-width: 861px) and (max-width: 1000px) {
  .topbar { gap: 14px; padding: 0 16px; }
  /* font-size, not just the narrower gap (fix-up): at 13.5px the longer labels
     ("Nähere Auswahl", "Aktive Bewerbungen") still wrap inside the 56px bar
     once Neu/Suchprofil/etc. crowd the row, which is uglier than a slightly
     smaller single line. */
  .topbar nav { gap: 10px; font-size: 12.5px; }
  .topbar > .muted { display: none; }
}
@media (max-width: 860px) {
  /* minmax(0,1fr), not a bare 1fr: a grid track's default min size is auto (the
     content's intrinsic width), so a bare 1fr track still grows to fit whatever
     is inside it - fine for the narrow cards every other .split user puts here,
     but the Task 17 admin table (six columns, four action buttons) is wide
     enough to expose it, pushing the whole page into horizontal scroll even
     though the table itself sits in a .table-scroll (overflow-x:auto) box.
     minmax(0,1fr) caps the track at the available width like the desktop rule
     above already does, so .table-scroll's own scrollbar is what handles the
     overflow instead of the page. */
  main { padding:12px 14px; } .split, .split.reading { grid-template-columns:minmax(0,1fr); } .rows { display:none; } body.liste-offen .rows { display:block; } body.liste-offen .focus { display:none; }
  .rows .head, .row { grid-template-columns:70px minmax(0,1fr) 40px; } .row > :nth-child(3), .row > :nth-child(5), .rows .head > :nth-child(3), .rows .head > :nth-child(5) { display:none; }
  .focus { position:static; } .only-mobile { display:inline-flex; } .topbar nav { display:none; } .topbar { gap:12px; padding:0 14px; }
  .decide button { height:52px; }
}
/* Not in the plan's CSS block: the mobile menu re-lists every nav link inside
   details.menu > div (see base.html); without this they'd inherit the block's
   row-flex from .only-mobile and run off the right edge of a phone screen. */
.topbar details.menu .only-mobile { flex-direction:column; align-items:flex-start; gap:2px; }
.topbar details.menu .only-mobile a { padding:4px 0; }

/* Task 13: auswahl and aktiv reuse .rows/.row/.head, but need their own column
   widths (Auswahl keeps Score/Stelle/Company but widens Triage and Ja-seit;
   Aktiv combines Stelle+Unternehmen into one stacked cell). Each selector below
   carries two classes on .rows plus the descendant, so it outranks the base
   ".rows .head, .row" rule and the bare ".row" in the mobile query below without
   depending on source order. */
.rows.auswahl .head, .rows.auswahl .row { grid-template-columns: 92px minmax(0,1fr) 180px 110px 70px; }
.rows.aktiv .head, .rows.aktiv .row { grid-template-columns: minmax(0,1fr) 150px 120px 96px 120px; }
.row-stack { display:flex; flex-direction:column; gap:2px; min-width:0; }
.legend { display:flex; flex-wrap:wrap; gap:6px; }
@media (max-width: 860px) {
  /* Auswahl: last column widened from 40px to 92px so the Triage pill
     ("Vielleicht") and the dashed "offen" pill render whole instead of
     clipping; the score column stays 70px (unchanged), the 1fr title
     column absorbs the difference and already truncates with ellipsis. */
  .rows.auswahl .head, .rows.auswahl .row { grid-template-columns: 70px minmax(0,1fr) 92px; }
  .rows.auswahl .row > :nth-child(3), .rows.auswahl .row > :nth-child(5),
  .rows.auswahl .head > :nth-child(3), .rows.auswahl .head > :nth-child(5) { display:none; }
  /* Aktiv: show Stelle/Unternehmen, Status and Nächstes; hide Beworben and
     Dokumente (a static "0 Dateien" until Plan 3) instead of Nächstes. Every
     status name contains a space ("Assessment Center", "Ready to Apply",
     "Phone Screen"), so instead of sizing the column for the longest one at
     forced nowrap, the pill wraps at its own word boundary with a smaller
     mobile font; the row switches from a fixed 46px to min-height so a
     two-line pill grows the row instead of overlapping the one below it. */
  .rows.aktiv .head, .rows.aktiv .row { grid-template-columns: minmax(0,1fr) 76px 84px; min-height:46px; height:auto; }
  /* The base rule above hides nth-child(3) and nth-child(5) for every .row; Aktiv
     wants the opposite of that for children 4 and 5 (hide Dokumente, show
     Nächstes), so both need an explicit override here, not just child 4. */
  .rows.aktiv .row > :nth-child(3), .rows.aktiv .row > :nth-child(4),
  .rows.aktiv .head > :nth-child(3), .rows.aktiv .head > :nth-child(4) { display:none; }
  .rows.aktiv .row > :nth-child(5), .rows.aktiv .head > :nth-child(5) { display:block; }
  .rows.aktiv .pill { white-space:normal; text-align:center; line-height:1.2; font-size:10px; padding:3px 5px; }
}

/* Task 14 follow-up (Step 0): Archiv had no split/focus-toggle, so the generic
   ".rows{display:none} body.liste-offen .rows{display:block}" rule above (built
   for the toggle-behind-a-button pattern the other lists use) would just hide
   the whole archive on a phone forever, since Archiv never sets that body class.
   ".rows.archiv" re-enables display, and its rows are plain (non-anchor) divs,
   because they hold a nested restore <form>/<button> that an <a> could not. */
.rows.archiv .head, .rows.archiv .row { grid-template-columns: minmax(0,1fr) 200px 150px 70px 150px; }
.rows.archiv .row { cursor:default; }
@media (max-width: 860px) {
  .rows.archiv { display:block; }
  /* Stacked card, not a narrower grid: the "Grund" cell can hold either a short
     pill or the long plain-text "automatisch archiviert", and "Wiederherstellen"
     does not abbreviate, so a fixed narrow column would either clip or force
     the row to require horizontal scrolling. Flex-column with stretch keeps
     every child at the row's full (already viewport-safe) width instead. */
  .rows.archiv .head { display:none; }
  .rows.archiv .row { display:flex; flex-direction:column; align-items:stretch; gap:6px; height:auto; padding:10px 14px; }
  /* The base ".row > :nth-child(3), .row > :nth-child(5) { display:none }" rule
     further up (built for the other lists' 3-column mobile grid) still matches
     these rows too, so the reason and the restore button need an explicit
     display here or they vanish along with it. Company · Ort and the date stay
     visible: unlike a fixed-width grid column, the stacked card has no width
     pressure to hide them for. */
  .rows.archiv .row > :nth-child(3), .rows.archiv .row > :nth-child(5) { display:block; }
  .rows.archiv .row > :nth-child(3) { white-space:normal; }
  .rows.archiv .row form { display:flex; }
  .rows.archiv .row button { width:100%; }
}

/* Task 14: chip lists (Suchbegriffe, Orte, Ausschluss, Senioritäts-Wörter) and the
   two-column field groups on Suchprofil. */
.group-label { font-size:13.5px; font-weight:700; }
/* Heading + its one-line hint (e.g. "Suchbegriffe" · "Jeder Begriff wird einzeln
   ..."), baseline-aligned with a small gap. Not .meta-row: that class spreads its
   two children to the row's far edges (space-between), which reads fine for a
   label-and-value row but pushes a long hint away from its own heading here. */
.group-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
/* The three sidebar card headers (Lieber im Gespräch ändern?, Die letzten Läufe,
   Versteckte Stellen), matching the design canvas: small, uppercase, tracked out,
   muted. .group-label stays as it is for the field headings above (Suchbegriffe,
   Orte, Ausschluss im Titel, Quellen), which are larger and not uppercase there. */
.card-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cols-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
.chipset { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }
.chip-tag { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 6px 0 12px; border-radius:999px; background:var(--bg); font-size:13px; }
.chip-tag form { display:inline-flex; margin:0; }
.chip-tag button { all:unset; cursor:pointer; width:18px; height:18px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; line-height:1; border-radius:50%; }
.chip-tag button:hover { background:var(--line); }
.chip-add { display:inline-flex; align-items:center; gap:6px; margin:0; }
.chip-add input[type=text] { height:34px; width:150px; padding:0 12px; border:1px dashed #c9c6bf; border-radius:999px; font-size:13px; background:transparent; }
.chip-add button { height:34px; padding:0 12px; font-size:12.5px; }
details > summary.group-label { cursor:pointer; }
details > summary.group-label .muted { font-weight:400; }
@media (max-width: 860px) {
  .cols-2 { grid-template-columns:1fr; gap:16px; }
  .chip-add input[type=text] { width:120px; }
}

/* Task 15: Tour (5 steps, package choice) and Einrichtung (self-ticking checklist).
   Classes below translate the docs/design/Tour.dc.html and Einrichtung.dc.html
   inline styles into reusable rules; dynamic values (dot state, progress width,
   package-card selection) come from Jinja instead of the artboard's client JS. */
.tour { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:26px; }
.tour-top { display:flex; justify-content:space-between; align-items:center; }
.dots { display:flex; gap:8px; align-items:center; }
.dot { width:8px; height:8px; border-radius:4px; background:var(--chip); display:inline-block; }
.dot.on { background:var(--accent); }
.dot.current { width:22px; }
.tour-card { padding:40px 44px; min-height:480px; display:flex; flex-direction:column; gap:22px; }
.tour-card h1 { margin:0; font-size:34px; line-height:1.1; }
.tour-card > p:not(.muted) { margin:0; font-size:15px; line-height:1.6; color:#2e2c29; }
.cols-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.tour-box { padding:20px; background:var(--bg); border-radius:12px; display:flex; flex-direction:column; gap:8px; }
.tour-box h3 { margin:0; font-size:20px; }
.tour-box p { margin:0; font-size:13.5px; line-height:1.5; color:#3f3d38; }
.flow { display:grid; grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr; gap:8px; align-items:center; }
.station { padding:18px 16px; border:1.5px solid var(--line); border-radius:12px; display:flex; flex-direction:column; gap:6px; min-height:120px; box-sizing:border-box; }
.station.you { border-color:var(--accent); }
.station-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.station.you .station-label { color:var(--accent); }
.station h3 { margin:0; font-size:18px; }
.station p { margin:0; font-size:13px; line-height:1.45; color:#3f3d38; }
.arrow { text-align:center; color:#a8a49c; font-size:18px; }
.table-scroll { overflow-x:auto; }
.crossrow { display:flex; gap:12px; align-items:flex-start; }
.crossrow svg { flex-shrink:0; margin-top:2px; }
.crossrow p { margin:0; font-size:15px; line-height:1.5; }
.pkgcard { all:unset; box-sizing:border-box; padding:22px 24px; border-radius:14px; border:2px solid var(--line); background:var(--surface); display:flex; flex-direction:column; gap:8px; cursor:pointer; }
.pkgcard:hover, .pkgcard:focus-visible { border-color:var(--accent); }
.pkgcard h3 { margin:0; font-size:22px; }
.pkgcard-time { font-size:13px; font-weight:600; color:var(--accent); }
.pkgcard p { margin:0; font-size:13.5px; line-height:1.5; color:#3f3d38; }
.tour-nav { display:flex; justify-content:space-between; align-items:center; }
.tour-nav a { text-decoration:none; height:44px; padding:0 20px; border-radius:10px; display:inline-flex; align-items:center; font-size:14px; font-weight:600; }
.tour-nav a.next { background:var(--accent); color:#fff; }
.tour-nav a.back { color:#3f3d38; }

.head-inline { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.list.checklist { font-size:inherit; }
.list.checklist > div { display:grid; grid-template-columns:44px minmax(0,1fr) 200px; gap:14px; align-items:center; padding:10px 4px; }
.list.checklist .step-row.current { background:var(--accent-row); border-radius:8px; }
.list.checklist .step-body { min-width:0; display:flex; flex-direction:column; gap:6px; }
.list.checklist .step-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.list.checklist .step-title { font-size:14px; font-weight:600; }
.list.checklist .step-row.done .step-title { text-decoration:line-through; color:var(--muted); }
.list.checklist .step-row.optional { color:#8b8884; }
.list.checklist .step-row.optional .step-title { font-weight:600; }
.list.checklist .step-side { text-align:right; font-size:12.5px; font-weight:600; }
.list.checklist .circle { width:26px; height:26px; border-radius:50%; border:2px solid var(--chip); box-sizing:border-box; }
.list.checklist .circle.done { background:var(--accent); border-color:var(--accent); display:flex; align-items:center; justify-content:center; }
.list.checklist .circle.dashed { border-style:dashed; }
.numline { display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; font-size:13.5px; line-height:1.45; }
.numline .num { font-family:'Bricolage Grotesque','Segoe UI',sans-serif; font-weight:800; color:var(--accent); }
@media (max-width: 860px) {
  .tour-card { padding:22px 18px; min-height:0; }
  .tour-card h1 { font-size:26px; }
  .cols-3 { grid-template-columns:1fr; }
  .flow { grid-template-columns:1fr; }
  .flow .arrow { display:none; }
  .list.checklist > div { grid-template-columns:32px minmax(0,1fr); row-gap:6px; }
  .list.checklist .step-side { grid-column:1 / -1; text-align:left; padding-left:44px; }
}

/* Task 16: Lernen/Hilfe, markdown rendered by content.py into .card.prose. Table
   borders come from the plain "table/th/td" rules further up; this only sizes the
   headings, spaces the block elements and gives inline code the same chip look as
   .cmd code. A markdown table can run wider than a phone screen (Hilfe's six
   columns), so it scrolls its own row instead of forcing the page to. (.split.reading,
   the two-column Lernen layout, is declared next to the base .split rule near the
   top of this file, ahead of the mobile @media block, not here — see the comment
   there.) */
.prose h1 { font-size:24px; margin:0 0 14px; }
.prose h2 { font-size:17px; margin:24px 0 8px; }
.prose h3 { font-size:14.5px; margin:16px 0 6px; }
.prose p { margin:0 0 12px; line-height:1.6; font-size:13.5px; }
.prose ul, .prose ol { margin:0 0 12px; padding-left:22px; line-height:1.6; font-size:13.5px; }
.prose li { margin:4px 0; }
.prose table { margin:6px 0 16px; display:block; overflow-x:auto; }
.prose code { font-family:ui-monospace,Consolas,monospace; background:var(--accent-soft); padding:2px 6px; border-radius:4px; font-size:12.5px; }