/* Neuer Interview-Bereich (INTERVIEW_V2 in lib/interview.js), nur von den V2-Seiten geladen (app/_components/interview/V2Style.js).
   Gleiche Regeln wie app/globals.css: kantig, keine Schatten, keine Verlaeufe, nur Variablen aus globals.css (hell und dunkel).
   .iv-v1 = Kachel-Raster, .iv-v2 = Liste mit Fortschrittsleiste. */

/* ---------- gemeinsam ---------- */
.iv .lead { margin-bottom: 4px; }
.iv h2 { margin-top: 0; }
.iv-sec { margin-top: 44px; }
/* Abschnittstitel so gross wie die Unterkapitel der Lektionen (Eric 26.10.2026, wie .psec-h auf /projects) */
.iv-sec > h2 { border-top: 1px solid var(--line); padding-top: 16px; margin: 0 0 12px; font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: .01em; text-transform: none; }
@media (max-width: 619px) { .iv-sec > h2 { font-size: 20px; } }
.iv-note { font-family: var(--serif); font-size: 14px; color: var(--muted); margin: 10px 0 0; max-width: 40em; }

.iv-badge { display: inline-block; font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; color: #fff; white-space: nowrap; }
/* Schwierigkeit gruen / gelb / rot wie die Lektionskoepfe (Eric 07.11.2026) */
.iv-badge.easy { background: var(--ok); color: #fff; }
.iv-badge.medium { background: var(--diff-medium); color: #fff; }   /* Eric 08.11.2026: weisse Schrift, Gelb bleibt */
.iv-badge.hard { background: var(--diff-hard); color: #fff; }
.iv-badge.none { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--muted); }
.iv-badge .n { margin-left: 5px; font-variant-numeric: tabular-nums; }
.iv-badges { display: flex; flex-wrap: wrap; gap: 6px; }
/* Eric 08.11.2026: Schwierigkeit als runde Pille wie die Knoepfe, Farben unveraendert */
.iv-badge { padding: 3px 11px; }   /* Rundung: app/looks.css (apple), weil globals alle Ecken auf 0 zwingt */

.iv-freq { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.iv-freq .freqbar { width: 40px; }

.iv-cta { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 18px; }
.iv-catlinks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.iv-catlinks a { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 5px 9px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.iv-catlinks a:hover { background: var(--accent); color: #fff; }

/* Filter-Chips: rechteckig, Rahmen statt Pille */
.iv-filters { margin: 18px 0 6px; display: grid; gap: 8px; }
.iv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.iv-chip { font: inherit; font-family: var(--head); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; padding: 7px 11px; background: transparent; color: var(--ink); border: 1px solid var(--hair); cursor: pointer; }
.iv-chip:hover { border-color: var(--line); }
@media (pointer: coarse) { .iv-chip { min-height: 44px; } }  /* Tippziel am Handy (Audit 17.10.2026) */
.iv-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.iv-chip .n { margin-left: 5px; color: var(--muted); }
.iv-chip[aria-pressed="true"] .n { color: inherit; opacity: .7; }
.iv-chip.lvl-easy { border-left: 4px solid var(--ok); }
.iv-chip.lvl-medium { border-left: 4px solid var(--diff-medium); }
.iv-chip.lvl-hard { border-left: 4px solid var(--diff-hard); }
.iv-chip.lvl-easy[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.iv-chip.lvl-medium[aria-pressed="true"] { background: var(--diff-medium); border-color: var(--diff-medium); color: #fff; }
.iv-chip.lvl-hard[aria-pressed="true"] { background: var(--diff-hard); border-color: var(--diff-hard); color: #fff; }
/* Eric 08.11.2026: Filter als kleine runde Pillen, Stufe als farbiger Punkt statt Rand links (Rundung in app/looks.css,
   weil globals.css alle Ecken mit !important auf 0 setzt) */
.iv-chip { display: inline-flex; align-items: center; padding: 5px 13px; font-size: 13px; border: 1px solid var(--line); }
@media (pointer: coarse) { .iv-chip { min-height: 34px; } }
.iv-chip.lvl-easy, .iv-chip.lvl-medium, .iv-chip.lvl-hard { border-left: 1px solid var(--line); }
.iv-chip.lvl-easy::before, .iv-chip.lvl-medium::before, .iv-chip.lvl-hard::before { content: ""; width: 8px; height: 8px; margin-right: 7px; flex: none; }
.iv-chip.lvl-easy::before { background: var(--ok); }
.iv-chip.lvl-medium::before { background: var(--diff-medium); }
.iv-chip.lvl-hard::before { background: var(--diff-hard); }
.iv-chip[aria-pressed="true"]::before { background: currentColor; }
.iv-count { font-family: var(--serif); font-size: 14px; color: var(--muted); margin: 4px 0 0; }

/* Frage */
.iv-qhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.iv-qnum { font-family: var(--head); font-size: 18px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.iv-qtitle { font-family: var(--head); font-size: 19px; line-height: 1.2; text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.iv-time { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.iv-prompt { font-family: var(--serif); font-size: 17px; line-height: 1.55; margin: 10px 0 12px; }
.iv-reveal-body { font-family: var(--serif); font-size: 16px; }
.iv-reveal-body p { margin: 0 0 8px; }
.iv-reveal-body p:last-child { margin-bottom: 0; }
.iv-code { margin: 8px 0 0; background: var(--code-bg); padding: 12px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.iv-done { font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--muted); border: 0; padding: 6px 0; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.iv-done .box { width: 16px; height: 16px; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.iv-done[aria-pressed="true"] { color: var(--accent-ink); }
.iv-done[aria-pressed="true"] .box { background: var(--accent); border-color: var(--accent); color: #fff; }
.iv-empty { background: var(--tile); padding: 16px 18px; margin-top: 18px; font-family: var(--serif); }
.iv-empty p { margin: 0 0 6px; }

/* Fortschrittsleiste */
.iv-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.iv-bar { height: 6px; background: color-mix(in srgb, var(--ink) 13%, transparent); position: relative; }
.iv-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.iv-progress .lbl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Variante 1: Kachel-Raster ---------- */
.iv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.iv-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 619px) { .iv-grid.g3 { grid-template-columns: 1fr; } }   /* Ablauf mit Textzeile: am Handy untereinander */
.iv-grid.g1 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .iv-grid { gap: 12px; } .iv-grid.g1 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .iv-grid.cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.iv-tile { display: flex; flex-direction: column; gap: 6px; background: var(--tile); color: var(--ink); text-decoration: none; padding: 12px 12px 14px; min-width: 0; }
a.iv-tile:hover { background: var(--tile-hover); color: var(--ink); }
a.iv-tile:hover .iv-go { text-decoration: underline; }
.iv-tnum { font-family: var(--head); font-size: 28px; line-height: 1; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.iv-ttitle { font-family: var(--head); font-weight: 700; font-size: 17px; line-height: 1.15; text-transform: uppercase; letter-spacing: .03em; }
.iv-ttext { font-family: var(--serif); font-size: 14px; line-height: 1.45; flex: 1; }
.iv-tmeta { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.iv-go { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-top: 2px; }
.iv-tile.iv-soon { opacity: .72; }
.iv-tile.dark { background: var(--ink); color: var(--bg); }
.iv-tile.dark .iv-tnum { color: var(--accent-ink); }
.iv-tile.dark .iv-tmeta { color: color-mix(in srgb, var(--bg) 70%, var(--ink)); }
@media (min-width: 620px) { .iv-ttitle { font-size: 19px; } .iv-ttext { font-size: 15px; } }

/* V1 Fragekarte mit drei Knoepfen nebeneinander */
.iv-qcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.iv-qcard, .iv-qbody, .iv-reveal-body { min-width: 0; }
.iv-qcard { background: var(--tile); padding: 14px 14px 10px; }
.iv-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.iv-seg button { font: inherit; font-family: var(--head); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; padding: 9px 4px; background: transparent; color: var(--ink); border: 1px solid var(--hair); cursor: pointer; }
.iv-seg button:hover { border-color: var(--line); }
.iv-seg button[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.iv-panel { border-top: 2px solid var(--accent); margin-top: 10px; padding-top: 10px; }
.iv-panel h4 { font-size: 13px; letter-spacing: .12em; color: var(--accent-ink); margin: 0 0 4px; }
.iv-qfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; border-top: 1px solid var(--hair); }

/* ---------- Variante 2: Liste mit Fortschrittsleiste ---------- */
.iv-list { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.iv-list > li { border-bottom: 1px solid var(--hair); }
.iv-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 4px 10px; padding: 13px 0; text-decoration: none; color: var(--ink); align-items: start; }
a.iv-row:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 3%, transparent); }
a.iv-row:hover .iv-rtitle { text-decoration: underline; }
.iv-rnum { font-family: var(--head); font-size: 22px; line-height: 1.05; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.iv-rbody { display: grid; gap: 5px; min-width: 0; }
.iv-rtitle { font-family: var(--head); font-weight: 700; font-size: 18px; line-height: 1.15; text-transform: uppercase; letter-spacing: .03em; }
.iv-rtext { font-family: var(--serif); font-size: 15px; line-height: 1.45; color: var(--muted); }
.iv-rtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.iv-arrow { width: 10px; height: 10px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); margin-top: 7px; }
.iv-row.iv-soon .iv-rtitle { color: var(--muted); }

/* V2 Zeitleiste: nutzt .pstep/.pbox aus globals.css */
.iv-v2 .path ol { margin-top: 6px; }
.iv-v2 .pstep { padding-bottom: 18px; }
.iv-v2 .ptext { font-size: 15px; }

/* V2 Firmentypen als Zeilen */
.iv-firms { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.iv-firms li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.iv-firms strong { font-family: var(--head); text-transform: uppercase; letter-spacing: .03em; font-size: 16px; line-height: 1.25; }
.iv-firms .iv-badges { justify-content: flex-end; align-self: start; }
.iv-firms span.t { grid-column: 1 / -1; font-family: var(--serif); font-size: 15px; color: var(--muted); }

/* V2 Frage als Aufklapp-Zeile, darin drei Aufklapper untereinander */
.iv-qlist { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.iv-qlist > li { border-bottom: 1px solid var(--hair); }
.iv-q > summary { list-style: none; display: grid; grid-template-columns: 30px minmax(0, 1fr) 22px; gap: 4px 10px; padding: 13px 0; min-height: 44px; cursor: pointer; align-items: start; }
.iv-q > summary::-webkit-details-marker { display: none; }
.iv-q > summary .iv-qtitle { font-size: 18px; }
.iv-q > summary .iv-qmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.iv-q > summary .iv-qtick { color: var(--accent-ink); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
/* Plus/Minus als Vektor-Maske (Eric 08.11.2026: die zwei 2-px-Balken wirkten bei Windows-Skalierung verzerrt, weil sie auf
   halbe Bildschirmpixel fielen; die Maske skaliert beide Balken gleich und symmetrisch) */
.iv-plus { flex: none; width: 13px; height: 13px; margin-top: 6px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 7.2h16v1.6H0zM7.2 0h1.6v16H7.2z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 7h16v2H0zM7 0h2v16H7z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
details[open] > summary .iv-plus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 7.2h16v1.6H0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 7h16v2H0z'/%3E%3C/svg%3E"); }
.iv-qbody { padding: 0 0 14px 40px; }
.iv-qbody .iv-prompt { margin-top: 0; }
.iv-sub { border-top: 1px solid var(--hair); }
.iv-sub:last-of-type { border-bottom: 1px solid var(--hair); }
.iv-sub > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 9px 0; cursor: pointer; font-family: var(--head); font-size: 15px; text-transform: uppercase; letter-spacing: .08em; }
.iv-sub > summary::-webkit-details-marker { display: none; }
.iv-sub > summary .iv-plus { margin-top: 0; width: 10px; height: 10px; }
.iv-sub[open] > summary { color: var(--accent-ink); }
.iv-sub .iv-reveal-body { padding: 0 0 12px; }
@media (max-width: 619px) { .iv-qbody { padding-left: 0; } }

/* Ablauf je Rolle (Ebene 3) */
.iv-sum { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; font-family: var(--serif); font-size: 15px; }
.iv-sum .lab { font-size: 13px; color: var(--accent-ink); }
.iv-tmeta.iv-dur { text-transform: none; letter-spacing: .02em; color: var(--ink); font-weight: 400; font-family: var(--serif); font-size: 13px; }
.iv-steps2 { border-top: 0; padding-top: 0; }
.iv-steps2 .pstatus { text-transform: none; letter-spacing: .02em; font-weight: 400; font-family: var(--serif); font-size: 14px; }
.iv-badge.zero { opacity: .45; }

/* Eigene Schwierigkeitsbewertung 1 bis 5 */
.iv-rating { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.iv-rating .bars { display: inline-flex; gap: 2px; }
.iv-rating .bars span { width: 12px; height: 8px; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.iv-rating .bars .on { background: var(--accent); }
.iv-rating.easy .bars .on { background: var(--ok); }
.iv-rating.medium .bars .on { background: var(--diff-medium); }
.iv-rating.hard .bars .on { background: var(--diff-hard); }
.iv-rating .v { color: var(--ink); font-variant-numeric: tabular-nums; }
.iv-ratingbox { margin-top: 14px; background: var(--tile); padding: 12px 14px; display: grid; gap: 4px; }
.iv-ratingbox .iv-note { margin: 0; font-size: 13px; }
/* li setzt in globals.css Georgia; Labels in den V2-Listen bleiben in der Kopfschrift, Fliesstext hat eigene Klassen */
.iv-list > li, .iv-qlist > li, .iv-firms li { font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; }
.iv-rating { font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; }

/* Kombination 17.10.2026: Rollen-Kacheln (auch auf /interview), Kategorien als Kachel oder Liste, Fortschritt ueber der Liste */
.iv-glimpse { font-family: var(--serif); font-size: 17px; margin: 8px 0 0; max-width: 36em; }
.iv-catprog { margin-top: 14px; }
.iv-tfoot { margin-top: auto; padding-top: 4px; }
.iv-grid.roles .iv-rating { margin-top: auto; }
.iv-grid.cats .iv-tile { min-height: 132px; }
/* Code und lange Zeilen in den Loesungen: nie ueber den Rand, die Code-Flaeche scrollt waagrecht (Handy, hell und dunkel) */
.iv-qlist > li, .iv-q, .iv-sub, .iv-reveal-body { min-width: 0; max-width: 100%; }
.iv-code { max-width: 100%; white-space: pre; -webkit-overflow-scrolling: touch; }
.iv-code code { font-family: inherit; }
.iv-grid.roles .iv-rating { flex-wrap: wrap; gap: 4px 8px; }

/* Fragensammlung und Mental Math (17.10.2026) */
.iv-locked { background: var(--tile); padding: 12px 16px; margin-top: 14px; font-family: var(--serif); }
.iv-locked p { margin: 0; font-size: 15px; }
.mm .iv-chips { margin-top: 18px; }
.mm-card { background: var(--tile); padding: 16px; margin-top: 14px; }
.mm-meta { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mm-task { font-family: var(--head); font-weight: 700; font-size: 30px; line-height: 1.2; margin: 10px 0 14px; overflow-wrap: anywhere; }
.mm-row { display: flex; gap: 8px; }
.mm-input { flex: 1; min-width: 0; font: inherit; font-family: var(--mono); font-size: 22px; padding: 8px 10px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.mm-btn { margin-top: 0; }
.mm-result { min-height: 1.5em; margin: 10px 0 0; font-family: var(--serif); font-size: 16px; }
/* Fuer die Rolle seltene Kategorie (Rare): ausgegraut, beim Darueberfahren wieder deutlich (Eric 08.11.2026) */
.iv-rare { opacity: .5; }
.iv-rare:hover, .iv-rare:focus-visible { opacity: .9; }