/* Feedback-Portal Conto IT – Gestaltung 1:1 nach WinFlow360. Schrift Poppins (lokal, OFL) für Überschriften, Systemschrift für Fließtext. */
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/poppins-medium.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/poppins-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/poppins-bold.woff2') format('woff2'); }

:root {
  --navy: #0B1F3A; --navy-2: #14305A; --nacht: #071B36;
  --amber: #F5A623; --amber-hell: #FFF4DF; --amber-dunkel: #9A5B00;
  --blau: #2F5BD3; --blau-hell: #EAF0FF;
  --grund: #F4F6FA; --karte: #FFFFFF; --text: #0E1B2E; --leise: #5A6577; --linie: #E1E6EE;
  --gruen: #13795B; --gruen-hell: #E2F5EE; --rot: #B42318; --rot-hell: #FDECEA;
  --radius: 16px;
  --schatten: 0 1px 2px rgba(11, 31, 58, .05), 0 6px 20px rgba(11, 31, 58, .06);
  --schatten-hoch: 0 2px 4px rgba(11, 31, 58, .06), 0 16px 40px rgba(11, 31, 58, .12);
  --titel: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fliess: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --weich: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--grund); color: var(--text); font: 16px/1.5 var(--fliess); -webkit-font-smoothing: antialiased; }
a { color: var(--blau); }
[hidden] { display: none !important; }
h1, h2, h3, .name, .fb-anh-name { overflow-wrap: break-word; hyphens: auto; }
h1 { font: 700 28px/1.2 var(--titel); margin: 0 0 6px; color: var(--navy); letter-spacing: -.2px; }
h2 { font: 600 19px/1.3 var(--titel); margin: 0 0 12px; color: var(--navy); }
.unter { color: var(--leise); margin: 0 0 24px; }
.leise { color: var(--leise); }
.klein { font-size: 14px; }

/* ---------- Kopf & Rahmen ---------- */
.kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
  background: var(--navy); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(7, 27, 54, .18); }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; min-width: 0; }
.zeichen { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--amber); flex: none; }
.wortmarke { font: 700 19px/1.1 var(--titel); letter-spacing: -.3px; display: flex; flex-direction: column; min-width: 0; }
.wortmarke b { color: var(--amber); font-weight: 700; }
.wortmarke small { font: 500 12px/1.3 var(--titel); color: #AEBBD0; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf-rechts { display: flex; align-items: center; gap: 14px; }
.leise-hell { color: #C9D3E3; font: 500 14px/1.2 var(--titel); }
.knopf-leise { background: transparent; border: 1px solid rgba(255,255,255,.22); color: #DCE3EE; border-radius: 10px; padding: 8px 14px; cursor: pointer; font: 500 14px/1.2 var(--titel); transition: all .2s; white-space: nowrap; }
.knopf-leise:hover { background: rgba(255,255,255,.08); color: #fff; }
.inhalt { max-width: 1140px; margin: 0 auto; padding: 32px 20px 110px; }
.fuss { max-width: 1140px; margin: -70px auto 0; padding: 0 20px 40px; display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; font: 500 13px/1.5 var(--titel); color: var(--leise); }
.fuss b { color: var(--amber-dunkel); }
.fuss a { color: var(--navy); text-decoration: none; border-bottom: 1px solid #C6D0DE; }
@keyframes herein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .inhalt > * { animation: herein .35s var(--weich) both; }
  .liste > * { animation: herein .3s var(--weich) both; }
}

/* ---------- Grundbausteine ---------- */
.karte { background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); padding: 22px; border: 1px solid rgba(225, 230, 238, .7); }
.zeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.zeile > * { min-width: 0; }
.zurueck { display: inline-flex; align-items: center; gap: 6px; color: var(--leise); text-decoration: none; margin-bottom: 16px; font: 500 15px/1.2 var(--titel); transition: color .2s, transform .2s var(--weich); }
.zurueck:hover { color: var(--navy); transform: translateX(-2px); }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 46px; padding: 11px 20px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--navy); color: #fff; font: 600 15px/1.25 var(--titel); text-decoration: none;
  box-shadow: 0 1px 2px rgba(11,31,58,.12), inset 0 -1px 0 rgba(0,0,0,.12); transition: transform .15s var(--weich), box-shadow .2s, background .2s, opacity .2s; }
.knopf:hover { background: var(--navy-2); box-shadow: 0 6px 18px rgba(11,31,58,.22); transform: translateY(-1px); }
.knopf:disabled { opacity: .6; cursor: default; transform: none; }
.knopf.akzent { background: var(--amber); color: var(--navy); }
.knopf.akzent:hover { background: #F7B341; }
.knopf.rand { background: #fff; color: var(--navy); border: 1px solid var(--linie); box-shadow: none; }
.knopf.klein { min-height: 38px; padding: 7px 14px; font-size: 14px; }
label.feld { display: flex; flex-direction: column; gap: 7px; font: 500 14px/1.3 var(--titel); color: var(--leise); min-width: 0; }
input[type=text], input[type=email], input[type=url], select, textarea { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--linie);
  background: #fff; color: var(--text); font: 400 16px/1.4 var(--fliess); outline: none; transition: border-color .2s, box-shadow .2s; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blau); box-shadow: 0 0 0 4px rgba(47, 91, 211, .14); }
.marke-klein { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.3 var(--titel); background: var(--grund); color: var(--leise); white-space: nowrap; }
.marke-klein.antwort { background: var(--gruen-hell); color: var(--gruen); }
.marke-klein.projekt { background: var(--blau-hell); color: var(--blau); }
.leer { padding: 44px 20px; text-align: center; color: var(--leise); }
.lade { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dreh .8s linear infinite; vertical-align: middle; }
@keyframes dreh { to { transform: rotate(360deg); } }
.meldung { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  background: var(--navy); color: #fff; padding: 13px 20px; border-radius: 14px; box-shadow: var(--schatten-hoch);
  max-width: min(560px, calc(100vw - 32px)); font: 500 15px/1.4 var(--titel); border-left: 4px solid var(--amber); }
.meldung.fehler { background: var(--rot); border-left-color: #FFB4A9; }
@media (prefers-reduced-motion: no-preference) { .meldung:not([hidden]) { animation: hochkommen .3s var(--weich); } }
@keyframes hochkommen { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Anmeldung ---------- */
body.ist-anmeldung { background: var(--nacht); }
.anmeldung { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(245,166,35,.16), transparent 60%), radial-gradient(900px 500px at 100% 110%, rgba(47,91,211,.25), transparent 60%), var(--nacht); }
.anmeldung-box { width: min(460px, 100%); }
.anmeldung-kopf { display: flex; align-items: center; gap: 12px; color: #fff; margin-bottom: 22px; }
.anmeldung-kopf .zeichen { width: 46px; height: 46px; border-radius: 14px; }
.anmeldung-kopf .wortmarke { font-size: 22px; }
.anmeldung .karte { padding: 32px 30px; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.anmeldung h1 { font-size: 24px; }
.anmeldung form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.anmeldung .knopf { width: 100%; }
.code-eingabe { letter-spacing: 12px; font: 600 28px/1 var(--titel) !important; text-align: center; padding-left: 26px !important; }
.anmeldung-fuss { margin-top: 18px; color: #AEBBD0; font: 500 13px/1.5 var(--titel); text-align: center; }
.anmeldung-fuss b { color: var(--amber); }
.ts-feld { min-height: 65px; }

/* ---------- Liste ---------- */
.liste { display: flex; flex-direction: column; gap: 10px; }
.fb-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 16px 20px; border-radius: 14px; background: #fff;
  box-shadow: var(--schatten); text-decoration: none; color: var(--text); border: 1px solid rgba(225,230,238,.7); transition: transform .18s var(--weich), box-shadow .2s, border-color .2s; }
.fb-zeile:hover { transform: translateX(2px); box-shadow: var(--schatten-hoch); border-color: #CFD8EA; }
.fb-zeile .name { font: 600 16px/1.35 var(--titel); color: var(--navy); }
.fb-zeile .rechts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) { .fb-zeile { grid-template-columns: 1fr; } .fb-zeile .rechts { justify-content: flex-start; } }

/* Admin: Projekte */
.projekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 22px; }
.projekt-kachel { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: #fff; box-shadow: var(--schatten); border: 1.5px solid transparent; text-decoration: none; color: var(--navy); cursor: pointer; text-align: left; font: inherit; transition: transform .2s var(--weich), box-shadow .2s, border-color .2s; }
.projekt-kachel:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.projekt-kachel.an { border-color: var(--navy); }
.projekt-kachel strong { font: 600 16px/1.3 var(--titel); }
.projekt-kachel .zahlen { display: flex; gap: 8px; flex-wrap: wrap; }
.zahl-chip { font: 600 12px/1.3 var(--titel); padding: 3px 9px; border-radius: 999px; background: var(--grund); color: var(--leise); }
.zahl-chip.neu { background: var(--amber-hell); color: var(--amber-dunkel); }
.zahl-chip.laeuft { background: var(--blau-hell); color: var(--blau); }

/* Hinweis-Karte (wartet auf Antwort / neue Antwort) */
.fb-hinweis { margin-bottom: 20px; border: 1px solid #F6D9A3; box-shadow: inset 4px 0 0 var(--amber), var(--schatten); }
.fb-hinweis.frage { border-color: #E9D5FF; box-shadow: inset 4px 0 0 #9333EA, var(--schatten); }
.fb-hinweis-kopf { display: flex; gap: 12px; align-items: center; }
.fb-hinweis-kopf strong { display: block; font: 600 16px/1.3 var(--titel); color: var(--navy); }
.fb-hinweis-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--amber-hell); color: var(--amber-dunkel); flex: none; }
.fb-hinweis-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.fb-hinweis-liste a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--grund); text-decoration: none; color: var(--navy); font: 500 15px/1.3 var(--titel); }
.fb-hinweis-titel { flex: 1; min-width: 0; }
.fb-hinweis-grund { font: 700 11px/1.3 var(--titel); padding: 3px 8px; border-radius: 999px; background: var(--amber-hell); color: var(--amber-dunkel); white-space: nowrap; }
.fb-hinweis-grund.g-rueckfrage { background: #F3E8FF; color: #6B21A8; }
.fb-hinweis-grund.g-antwort { background: var(--gruen-hell); color: var(--gruen); }

/* ---------- Profi-Tipps ---------- */
.tipps { margin-bottom: 22px; }
.tipps summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 17px/1.3 var(--titel); color: var(--navy); }
.tipps summary::-webkit-details-marker { display: none; }
.tipps summary::after { content: '›'; font-size: 24px; color: var(--leise); transition: transform .2s; }
.tipps[open] summary::after { transform: rotate(90deg); }
.tipps-einl { margin: 6px 0 0; color: var(--leise); font-size: 15px; }
.tipp-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 16px; }
.tipp { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--grund); }
.tipp-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #fff; font-size: 20px; flex: none; box-shadow: var(--schatten); }
.tipp strong { display: block; font: 600 15px/1.3 var(--titel); color: var(--navy); margin-bottom: 3px; }
.tipp p { margin: 0; font-size: 14px; line-height: 1.5; color: #2A3A52; }
.tipp.profi { background: var(--amber-hell); grid-column: 1 / -1; }
.tipp.profi strong::after { content: 'Profi-Tipp'; margin-left: 8px; font: 700 11px/1 var(--titel); padding: 3px 8px; border-radius: 999px; background: var(--amber); color: var(--navy); vertical-align: 2px; }
.tasten { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--leise); }
kbd { font: 600 12px/1 var(--titel); padding: 3px 6px; border-radius: 6px; background: #fff; border: 1px solid var(--linie); color: var(--navy); }
.tipps-kurz { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--amber-hell); font-size: 14px; line-height: 1.5; color: #4A3B12; }
.tipps-kurz b { color: var(--navy); }

/* ---------- Dialog ---------- */
dialog { border: 0; border-radius: 20px; padding: 0; width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; scroll-padding-bottom: 130px; box-shadow: 0 30px 80px rgba(7,27,54,.35); }
dialog::backdrop { background: rgba(7, 27, 54, .5); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 4px; }
dialog .dkopf { padding: 22px 24px 0; }
dialog .dinhalt { padding: 16px 24px; display: flex; flex-direction: column; gap: 14px; }
dialog .dfuss { padding: 4px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; background: #fff; }

/* ---------- Feedback ---------- */
.fb-knopf { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--navy); color: #fff; font: 600 15px/1 var(--titel); box-shadow: 0 10px 30px rgba(7, 27, 54, .3); transition: transform .2s var(--weich), background .2s; }
.fb-knopf svg { color: var(--amber); }
.fb-knopf:hover { background: var(--navy-2); transform: translateY(-2px); }
.fb-arten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .fb-arten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fb-arten label { cursor: pointer; position: relative; }
.fb-arten input { position: absolute; opacity: 0; pointer-events: none; }
.fb-arten span { display: grid; place-items: center; min-height: 46px; text-align: center; padding: 8px 4px; font-size: 13.5px !important; hyphens: auto; overflow-wrap: anywhere; border-radius: 12px; border: 1px solid var(--linie); font: 600 14px/1.25 var(--titel); color: var(--leise); transition: all .18s; }
.fb-arten label:hover span { border-color: #C6D0DE; color: var(--navy); }
.fb-arten input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; }
.fb-arten input:focus-visible + span { outline: 3px solid rgba(47,91,211,.45); }
.fb-anhaenge { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fb-anh-liste { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.fb-anh-liste:empty { display: none; }
.fb-anh { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--linie); border-radius: 12px; }
.fb-anh img, .fb-anh video, .fb-anh > span { width: 56px; height: 56px; border-radius: 9px; object-fit: cover; background: var(--grund); display: grid; place-items: center; font: 700 12px/1 var(--titel); color: var(--rot); }
.fb-anh-name { font-size: 14px; overflow-wrap: anywhere; }
.fb-anh.fertig { border-color: #9FD8BD; background: var(--gruen-hell); }
.fb-balken { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; background: var(--grund); border-radius: 2px; overflow: hidden; }
.fb-balken i { display: block; height: 100%; width: 0; background: var(--amber); transition: width .2s; }
.fb-weg { width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--grund); cursor: pointer; font-size: 18px; color: var(--leise); }
.fb-status { display: inline-flex; padding: 4px 11px; border-radius: 999px; font: 700 12px/1.3 var(--titel); background: var(--grund); color: var(--leise); white-space: nowrap; }
.fb-status.s-neu { background: var(--amber-hell); color: var(--amber-dunkel); }
.fb-status.s-in_arbeit { background: var(--blau-hell); color: var(--blau); }
.fb-status.s-rueckfrage { background: #F3E8FF; color: #6B21A8; }
.fb-status.s-umgesetzt, .fb-status.s-erledigt { background: var(--gruen-hell); color: var(--gruen); }
.fb-status.s-abgelehnt { background: var(--rot-hell); color: var(--rot); }

/* „Conto IT arbeitet gerade“ mit Restzeit */
.fb-zahnrad { width: 22px; height: 22px; fill: currentColor; flex: none; }
.fb-arbeit-marke { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 7px; border-radius: 999px; font: 700 12px/1.3 var(--titel); white-space: nowrap;
  color: var(--blau); background: linear-gradient(90deg, var(--blau-hell) 0%, #fff 50%, var(--blau-hell) 100%); background-size: 200% 100%; }
.fb-arbeit-marke .fb-zahnrad { width: 16px; height: 16px; }
.fb-arbeit { margin-bottom: 16px; padding: 16px 18px; border-radius: 14px; color: var(--blau); background: linear-gradient(120deg, var(--blau-hell), #fff 60%, var(--blau-hell)); background-size: 220% 100%; border: 1px solid var(--blau-hell); box-shadow: 0 6px 22px rgba(30, 80, 160, .08); }
.fb-arbeit-kopf { display: flex; gap: 12px; align-items: center; }
.fb-arbeit-kopf .fb-zahnrad { width: 34px; height: 34px; }
.fb-arbeit strong { font: 700 16px/1.3 var(--titel); }
.fb-arbeit .leise { color: var(--blau); opacity: .8; margin-top: 2px; }
.fb-punkte i { font-style: normal; display: inline-block; }
.fb-arbeit-balken { position: relative; height: 8px; margin-top: 12px; border-radius: 99px; background: rgba(255, 255, 255, .8); overflow: hidden; box-shadow: inset 0 0 0 1px var(--blau-hell); }
.fb-arbeit-balken span { position: absolute; inset: 0 auto 0 0; width: 4%; border-radius: inherit; background: linear-gradient(90deg, var(--blau), #5aa0f0, var(--blau)); background-size: 200% 100%; transition: width 1.2s var(--weich, ease); }
@media (prefers-reduced-motion: no-preference) {
  .fb-zahnrad { animation: fbdrehen 3s linear infinite; }
  .fb-arbeit, .fb-arbeit-marke { animation: fbschimmer 3.5s ease-in-out infinite; }
  .fb-arbeit-balken span { animation: fbschimmer 1.6s linear infinite; }
  .fb-punkte i { animation: fbpunkt 1.4s ease-in-out infinite; }
  .fb-punkte i:nth-child(2) { animation-delay: .2s; }
  .fb-punkte i:nth-child(3) { animation-delay: .4s; }
}
@keyframes fbdrehen { to { transform: rotate(360deg); } }
@keyframes fbschimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes fbpunkt { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Detail */
.akte-kopf { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 22px; }
.akte-kopf > div:first-child { min-width: 0; flex: 1 1 360px; }
.akte-kopf .daten { color: var(--leise); font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.akte-kopf .daten a { color: var(--leise); }
.fb-galerie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fb-medien img { max-height: 220px; max-width: 100%; border-radius: 12px; display: block; }
.fb-medien video { max-height: 320px; max-width: 100%; border-radius: 12px; background: #000; display: block; }
.fb-datei { display: inline-flex; gap: 6px; align-items: center; padding: 10px 14px; border: 1px solid var(--linie); border-radius: 12px; text-decoration: none; }
.fb-verlauf { display: flex; flex-direction: column; gap: 10px; }
.fb-nachricht { background: #fff; border-radius: 14px; box-shadow: var(--schatten); padding: 14px 16px; margin-right: 12%; border: 1px solid rgba(225,230,238,.7); }
.fb-nachricht.support { background: #F2F6FF; margin-right: 0; margin-left: 12%; border-color: #DCE6FF; }
@media (max-width: 640px) { .fb-nachricht { margin-right: 0; } .fb-nachricht.support { margin-left: 0; } }

/* Fragebogen */
.fragebogen { margin-top: 16px; padding: 22px; border: 2px solid #E9D5FF; }
.fr-vorschau { margin: -6px 0 14px; padding: 10px 12px; border-radius: 10px; background: #F3E8FF; color: #6B21A8; font: 600 13px/1.4 var(--titel); }
.fr-kopf h2 { margin: 0 0 4px; }
.fr-kopf p { margin: 0 0 6px; }
.fr-frage { border: 0; border-top: 1px solid var(--linie); margin: 16px 0 0; padding: 16px 0 0; min-width: 0; }
.fr-frage legend { display: flex; gap: 10px; align-items: flex-start; padding: 0; font: 600 16px/1.4 var(--titel); color: var(--navy); }
.fr-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 13px; margin-top: -1px; }
.fr-hinweis { margin: 8px 0 0 36px; padding: 10px 12px; border-radius: 10px; background: var(--grund); font-size: 14px; line-height: 1.5; white-space: pre-line; color: #2A3A52; }
.fr-optionen { display: grid; gap: 8px; margin: 12px 0 0 36px; }
.fr-janein { grid-template-columns: repeat(2, minmax(0, 160px)); }
.fr-mehrfach { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.fr-option { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--linie); border-radius: 12px; background: #fff; cursor: pointer; font-size: 15px; transition: border-color .15s, background .15s; }
.fr-option:hover { border-color: #B9C5D8; }
.fr-option input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; margin: 0; }
.fr-option:has(input:checked) { border-color: var(--navy); background: #F5F7FC; }
.fr-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0 0 36px; }
.fr-anmerkung { margin: 12px 0 0 36px; }
.fr-fuss { display: flex; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 640px) { .fr-hinweis, .fr-optionen, .fr-felder, .fr-anmerkung { margin-left: 0; } }

@media (max-width: 560px) { .leise-hell { display: none; } .wortmarke small { max-width: 52vw; } }