/* FREDERIX/MFE 04.10.2026 - Ablauf, IT-Fahrplan und Handtuch fuer 42-it-fragen.de (nutzt die Farbvariablen aus v3.css/farben.css) */

/* ---------- In drei Schritten ---------- */
.ablauf { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.steps { list-style: none; counter-reset: st; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; }
.steps li { counter-increment: st; position: relative; padding: 20px 20px 20px 72px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.steps li::before { content: counter(st); position: absolute; left: 20px; top: 16px; font-family: var(--cond); font-weight: 800; font-size: 44px; line-height: 1; color: var(--acc); }
.steps b { display: block; font-family: var(--cond); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
.steps span { display: block; color: var(--muted); font-size: 16px; margin-top: 4px; }
.ablauf-note { color: var(--muted); font-size: 15.5px; margin-top: 18px; max-width: 860px; }

/* ---------- Bedienelemente an jeder Frage ---------- */
.fp-q { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: grid; gap: 10px; }
.fp-q[hidden] { display: none; }
.fp-prio { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fp-l { font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.fp-prio button { font-family: var(--cond); font-weight: 700; font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; border: 1.5px solid var(--ghost, #3A4250); background: transparent; color: var(--text); cursor: pointer; }
.fp-prio button:hover { border-color: var(--acc); }
.fp-prio [data-prio="sofort"][aria-pressed="true"] { background: var(--stop); border-color: var(--stop); color: #fff; }
.fp-prio [data-prio="jahr"][aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #2A1A00; }
.fp-prio [data-prio="blick"][aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--night); }
.fp-prio [data-prio="kein"][aria-pressed="true"] { background: var(--panel-2); border-color: var(--muted); color: var(--muted); }
.fp-more { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; }
.fp-more[hidden] { display: none; }
.fp-more label, .fp-meta label { display: grid; gap: 4px; font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fp-more select, .fp-more input, .fp-meta input { font: 16px/1.3 var(--body); color: var(--text); background: var(--night); border: 1.5px solid var(--ghost, #3A4250); border-radius: 6px; padding: 8px 10px; min-width: 0; text-transform: none; letter-spacing: 0; }
.fp-more select:focus, .fp-more input:focus, .fp-meta input:focus { outline: none; border-color: var(--acc); }
.fp-meta input[type="date"] { color-scheme: dark; }
.fp-prev { display: inline-block; margin-top: 6px; font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
.fp-prev-ja { border-color: var(--go); color: var(--go); }
.fp-prev-vage { border-color: var(--amber); color: var(--amber); }
.fp-prev-nein { border-color: var(--stop); color: var(--stop); }
.fp-prev-sum b { color: var(--text); }

/* ---------- Fahrplan ---------- */
.fp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(24px, 4vw, 56px); align-items: center; }
.towel { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.towel-svg { width: 96px; height: auto; }
.t-bar { fill: var(--muted); }
.t-back { fill: var(--acc); opacity: .7; }
.t-front { fill: var(--acc); }
.t-stripe { fill: var(--sign); }
.t-fringe { stroke: var(--acc); stroke-width: 2.4; stroke-linecap: round; opacity: .7; }
.t-42 { font-family: var(--cond); font-weight: 800; font-size: 30px; fill: var(--night); opacity: .55; }
.towel figcaption { font-size: 15.5px; color: var(--muted); }
.towel figcaption b { display: block; font-family: var(--cond); font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--text); letter-spacing: .02em; }
.tday { display: block; margin-top: 6px; color: var(--hl, var(--sign)); }
.fp-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 32px; padding: 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.fp-row { display: flex; gap: 6px; }
.fp-row input { flex: 1; }
.fp-mini { font-family: var(--cond); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 0 8px; border-radius: 6px; border: 1.5px solid var(--ghost, #3A4250); background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; }
.fp-mini:hover { border-color: var(--acc); }
.fp-board { display: grid; gap: 18px; margin-top: 24px; }
.fp-group h3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; font-size: clamp(22px, 2.4vw, 28px); text-transform: uppercase; padding-bottom: 8px; border-bottom: 3px solid var(--line); }
.fp-group h3 small { font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.fp-sofort h3 { border-color: var(--stop); } .fp-jahr h3 { border-color: var(--amber); } .fp-blick h3 { border-color: var(--acc); } .fp-offen h3 { border-color: var(--muted); }
.fp-group ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.fp-group li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.fp-n { font-family: var(--cond); font-weight: 800; font-size: 30px; line-height: 1; color: var(--acc); text-decoration: none; text-align: center; }
.fp-group b { display: block; font-weight: 600; font-size: 17.5px; line-height: 1.35; }
.fp-goal { display: block; color: var(--good, var(--muted)); font-size: 15px; margin-top: 4px; }
.fp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fp-tags i { font-style: normal; font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
.fp-ans-vage { border-color: var(--amber) !important; color: var(--amber) !important; }
.fp-ans-nein { border-color: var(--stop) !important; color: var(--stop) !important; }
.fp-ans-ja { border-color: var(--go) !important; color: var(--go) !important; }
.fp-notiz-t { display: block; margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--acc); background: var(--panel-2); font-size: 15.5px; border-radius: 0 6px 6px 0; }
.fp-empty { color: var(--muted); margin-top: 24px; padding: 18px; border: 1px dashed var(--line); border-radius: 12px; }
.fp-empty[hidden] { display: none; }
.fp-actions { margin-top: 24px; }
.fp-note { color: var(--muted); font-size: 15px; margin-top: 10px; }
.fp-note:empty { display: none; }
.fp-print-head { display: none; }

@media (max-width: 900px) {
  .steps, .fp-head { grid-template-columns: minmax(0, 1fr); }
  .fp-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .fp-meta, .fp-more { grid-template-columns: minmax(0, 1fr); }
  .towel { grid-template-columns: 72px minmax(0, 1fr); }
  .towel-svg { width: 72px; }
  .fp-group li { grid-template-columns: 40px minmax(0, 1fr); }
}

/* ---------- Druck: nur der Fahrplan ---------- */
@media print {
  .fp-q, .ablauf, body.print-open .fahrplan { display: none !important; }
  body.print-plan > *:not(main), body.print-plan main > section:not(.fahrplan) { display: none !important; }
  body.print-plan .fahrplan { padding: 0; border: 0; }
  body.print-plan .fp-head > div > .kicker, body.print-plan .fp-head .l-sub, body.print-plan .fp-meta, body.print-plan .fp-actions, body.print-plan .fp-note, body.print-plan .fp-empty, body.print-plan .towel figcaption .tday { display: none !important; }
  body.print-plan .fp-head { grid-template-columns: 1fr auto; }
  body.print-plan .l-h2 { font-size: 30pt; color: #000; }
  body.print-plan .l-h2 .y { color: #000; }
  body.print-plan .towel { border: 0; background: none; padding: 0; grid-template-columns: 60px 200px; }
  body.print-plan .towel-svg { width: 60px; }
  body.print-plan .t-back, body.print-plan .t-front { fill: #9DB7CF; } body.print-plan .t-stripe { fill: #015FA2; } body.print-plan .t-42 { fill: #fff; opacity: 1; }
  body.print-plan .towel figcaption, body.print-plan .towel figcaption b { color: #333 !important; font-size: 9pt; }
  body.print-plan .fp-print-head { display: block; margin: 6pt 0 10pt; padding: 6pt 0; border-top: 1pt solid #000; border-bottom: 1pt solid #000; font-size: 10pt; color: #000; }
  body.print-plan .fp-print-head p { margin: 2pt 0; }
  body.print-plan .fp-ph-t { font-weight: 700; font-size: 13pt; }
  body.print-plan .fp-group { break-inside: auto; }
  body.print-plan .fp-group h3 { color: #000; font-size: 14pt; border-bottom: 2pt solid #000; }
  body.print-plan .fp-group h3 small { color: #333; }
  body.print-plan .fp-group li { break-inside: avoid; background: #fff; border: 1pt solid #999; color: #000; padding: 6pt 8pt; }
  body.print-plan .fp-n { color: #015FA2; font-size: 18pt; }
  body.print-plan .fp-group b { color: #000; font-size: 11pt; }
  body.print-plan .fp-goal, body.print-plan .fp-tags i, body.print-plan .fp-notiz-t { color: #222 !important; border-color: #999 !important; background: #fff; font-size: 9.5pt; }
  body.print-plan .fahrplan .wrap::after { content: "FREDERIX Systemhaus GmbH · Podbielskistraße 200 · 30177 Hannover · 0511 212 46-0 · support@frederix.it · erstellt mit 42-it-fragen.de"; display: block; margin-top: 14pt; padding-top: 6pt; border-top: 1pt solid #999; font-size: 8.5pt; color: #333; }
}