/* KI-Datenschutz-Check: Bildschirm-Styles. Tokens aus dem weitsicht-Designsystem. */

@font-face {
  font-family: 'Inter';
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-v20-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
  font-family: 'Inter';
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-v20-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F;
}

:root {
  --w-navy: #1B2D4F;
  --w-navy-headline: #1A365D;
  --w-body: #555555;
  --w-slate: #64748B;
  --w-teal-brand: #0D9488;
  --w-teal-dark: #0A7C6E;
  --w-teal-light: #4DB6AC;
  --w-off-white: #F5F6F8;
  --green: #15803D;
  --green-bg: #EDF7EF;
  --yellow: #A16207;
  --yellow-bg: #FDF6E3;
  --red: #B42318;
  --red-bg: #FBEBE9;
  --grey: #64748B;
  --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--w-body);
  background: var(--w-off-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  background: var(--w-navy);
  color: #fff;
  padding: 0.9rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.topbar .brand { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
.topbar .brand span { color: var(--w-teal-light); }
.topbar .tag { font-size: 0.8rem; color: #B8C4D8; }

#app { max-width: 780px; margin: 2rem auto 4rem; padding: 0 1rem; }

.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(27, 45, 79, 0.08);
}

.intro h1, .card h2 { color: var(--w-navy-headline); letter-spacing: -0.02em; line-height: 1.2; }
.intro h1 { font-size: 2rem; margin-bottom: 0.75rem; }
.subtitle { font-size: 1.05rem; margin-bottom: 1.5rem; }
.company-label { display: block; font-size: 0.85rem; color: var(--w-slate); margin-bottom: 0.4rem; }
#company {
  width: 100%;
  max-width: 320px;
  padding: 0.6rem 0.75rem;
  border: 1px solid #D7DDE6;
  border-radius: 8px;
  font: inherit;
  margin-bottom: 1.25rem;
}
.fine { font-size: 0.8rem; color: var(--w-slate); margin-top: 1.5rem; }

.progress { font-size: 0.85rem; color: var(--w-slate); margin-bottom: 0.75rem; font-weight: 600; }
.hint { font-size: 0.92rem; color: var(--w-slate); margin: 0.6rem 0 1.25rem; }

.options { display: flex; flex-direction: column; gap: 0.6rem; }
/* Zeile aus Option und Infobutton: der Infobutton liegt neben der Klickflaeche,
   nicht darin, damit ein Klick darauf die Auswahl nicht umschaltet. Der Platz
   rechts wird immer freigehalten, damit alle Optionen gleich breit bleiben,
   auch die ohne Erklaerung. */
.option-row { position: relative; display: flex; align-items: center; padding-right: 1.5rem; }
.option-row .info { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
/* Die geoeffnete Blase liegt ueber den folgenden Optionen. Ohne dies wuerde sie
   Klicks abfangen, die auf die verdeckte Option zielen. */
.option-row .info-pop { pointer-events: none; }
/* Die Zeile mit der geoeffneten Blase nach vorne holen. Ohne dies malen die
   folgenden Optionszeilen darueber und zerschneiden den Text. */
.option-row:has(.info:hover), .option-row:has(.info:focus-within),
.option-row:has(.info[data-open]) { z-index: 30; }
.option {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  text-align: left;
  padding: 0.85rem 1rem;
  border: 1.5px solid #D7DDE6;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.option:hover { border-color: var(--w-teal-brand); }
.option.selected { border-color: var(--w-teal-dark); background: #F0FAF8; }
.option .check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid #B9C2D0;
  background: #fff;
}
.options.single .option .check { border-radius: 50%; }
.options.multi .option .check { border-radius: 5px; }
.option.selected .check { background: var(--w-teal-dark); border-color: var(--w-teal-dark); box-shadow: inset 0 0 0 3px #fff; }
.option-label { display: block; font-weight: 600; color: var(--w-navy-headline); font-size: 0.98rem; }
.option-sub { display: block; font-size: 0.85rem; color: var(--w-slate); margin-top: 0.15rem; }

.art5-warning {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: var(--red-bg);
  border-left: 4px solid var(--red);
  border-radius: 6px;
  color: var(--red);
  font-size: 0.92rem;
}

.nav { display: flex; justify-content: space-between; margin-top: 1.75rem; }

.btn { font: inherit; font-weight: 600; padding: 0.65rem 1.4rem; border-radius: 9px; border: 1.5px solid transparent; cursor: pointer; }
.btn.primary { background: var(--w-teal-dark); color: #fff; }
.btn.primary:hover { background: #096B5F; }
.btn.primary:disabled { background: #B9C2D0; cursor: not-allowed; }
.btn.ghost { border-color: #D7DDE6; color: var(--w-navy-headline); background: #fff; }
.btn.ghost:hover { border-color: var(--w-slate); }

.report-toolbar { display: flex; justify-content: flex-end; gap: 0.75rem; margin-bottom: 1rem; }

.report { background: #fff; border-radius: var(--radius); padding: 2.5rem; box-shadow: 0 1px 3px rgba(27, 45, 79, 0.08); }
.report-header { border-bottom: 3px solid var(--w-navy); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.report-brand { font-weight: 700; font-size: 1.15rem; color: var(--w-navy); }
.report-brand span { color: var(--w-teal-brand); }
.report h1 { color: var(--w-navy-headline); font-size: 1.7rem; letter-spacing: -0.02em; margin-top: 0.5rem; }
.report-meta { font-size: 0.85rem; color: var(--w-slate); margin-top: 0.35rem; }
.report h2 { color: var(--w-navy-headline); font-size: 1.15rem; letter-spacing: -0.01em; margin: 1.6rem 0 0.6rem; }
.report h3 { color: var(--w-navy-headline); font-size: 0.98rem; }
.report p, .report li { font-size: 0.95rem; }
.report ul, .report ol { padding-left: 1.3rem; }
.report li { margin-bottom: 0.4rem; }
.report-summary .answers {
  display: grid;
  grid-template-columns: fit-content(14rem) 1fr;
  column-gap: 1.1rem;
  row-gap: 0.3rem;
  margin-top: 0.25rem;
}
.report-summary .answers dt { font-size: 0.85rem; font-weight: 600; color: var(--w-slate); line-height: 1.45; }
.report-summary .answers dd { font-size: 0.9rem; color: var(--w-navy-headline); line-height: 1.45; }

@media (max-width: 620px) {
  .report-summary .answers { grid-template-columns: 1fr; row-gap: 0; }
  .report-summary .answers dd { margin-bottom: 0.5rem; }
}

.stop-box { background: var(--red-bg); border: 1px solid #F1C0BA; border-radius: 10px; padding: 1.1rem 1.25rem; margin-top: 1.25rem; }
.stop-box h2 { color: var(--red); margin-top: 0; }
.stop-box p { color: #7A2E26; margin-top: 0.4rem; }

.recommendation {
  font-weight: 600;
  color: var(--w-navy-headline);
  background: #F0FAF8;
  border-left: 4px solid var(--w-teal-dark);
  padding: 0.7rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.report-option { border: 1px solid #E2E7EF; border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 0.75rem; page-break-inside: avoid; }
.report-option-head { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.5rem; }
.report-option-head > div { flex: 1; }

.block-title { color: var(--w-navy-headline); font-size: 0.95rem; margin-bottom: 0.5rem; }
.block-gap { height: 1.4rem; }

.overall {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  margin-top: 1.4rem;
  page-break-inside: avoid;
}
.overall .light { width: 16px; height: 16px; margin-top: 0; }
.overall.gruen { background: var(--green-bg); color: var(--green); }
.overall.gelb { background: var(--yellow-bg); color: var(--yellow); }
.overall.rot { background: var(--red-bg); color: var(--red); }
.overall strong { font-size: 1rem; color: var(--w-navy-headline); }

.area {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  border: 1px solid #E2E7EF;
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.55rem;
  page-break-inside: avoid;
}
.area .light { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 4px; }
.area-body { flex: 1; }
.area-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
/* Vier beschriftete Bloecke je Karte: Rechtliche Lage, Status quo,
   Handlungsbedarf, Weitere Hinweise, dazu Noch zu klaeren. Die Beschriftung
   laeuft in derselben Zeile weiter und ein einzelner Hinweis bleibt im
   Absatz, damit die Karte im Druck so flach bleibt wie moeglich. */
.area-block { font-size: 0.88rem; margin-top: 0.35rem; }
.area-block:first-of-type { margin-top: 0.25rem; }
.area-label { color: var(--w-navy-headline); font-weight: 700; }
.area-list { margin: 0.1rem 0 0 1.05rem; padding: 0; }
.area-list li { margin-bottom: 0.15rem; }
.area-todo { color: var(--w-navy-headline); }
.area-open, .area-open .area-label { color: var(--w-slate); }
.area .verdict-label { font-size: 0.75rem; }
.area.gruen .verdict-label { color: var(--green); background: var(--green-bg); }
.area.gelb .verdict-label { color: var(--yellow); background: var(--yellow-bg); }
.area.rot .verdict-label { color: var(--red); background: var(--red-bg); }
.light { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; }
.light.gruen { background: var(--green); }
.light.gelb { background: var(--yellow); }
.light.rot { background: var(--red); }
.light.grau { background: var(--grey); }
.examples { font-size: 0.82rem; color: var(--w-slate); margin-top: 0.1rem; }
.verdict-label { font-size: 0.8rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.report-option.gruen .verdict-label { color: var(--green); background: var(--green-bg); }
.report-option.gelb .verdict-label { color: var(--yellow); background: var(--yellow-bg); }
.report-option.rot .verdict-label { color: var(--red); background: var(--red-bg); }
.report-option.grau .verdict-label { color: var(--grey); background: #F1F5F9; }

.duty { margin-bottom: 0.9rem; page-break-inside: avoid; }
.duty p { margin-top: 0.2rem; }

/* Infobutton: erklaert eine Massnahme in ein bis zwei Saetzen.
   Zeigt sich bei Hover und bei Tastaturfokus, ohne JavaScript. */
.info { position: relative; display: inline-block; vertical-align: baseline; line-height: 0; }
.info:hover, .info:focus-within, .info[data-open] { z-index: 30; }
.area, .report-option { position: relative; }
.area:has(.info:hover), .area:has(.info[data-open]),
.report-option:has(.info:hover), .report-option:has(.info[data-open]) { z-index: 30; }
.info-btn {
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  margin-left: 0.3rem;
  border: 1.5px solid #C3CDDC;
  border-radius: 50%;
  background: #fff;
  color: var(--w-slate);
  cursor: help;
  vertical-align: middle;
}
.info-btn:hover, .info-btn:focus-visible { border-color: var(--w-teal-dark); color: var(--w-teal-dark); }
.info-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 0.4rem);
  z-index: 20;
  width: max-content;
  max-width: min(22rem, 78vw);
  padding: 0.6rem 0.75rem;
  border: 1px solid #D7DDE6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(27, 45, 79, 0.14);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--w-body);
  text-align: left;
  white-space: normal;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.info:hover .info-pop,
.info:focus-within .info-pop,
.info[data-open] .info-pop { visibility: visible; opacity: 1; }
.info-pop strong { display: block; color: var(--w-navy-headline); margin-bottom: 0.2rem; }
.info-pop .wo { display: block; margin-top: 0.35rem; color: var(--w-slate); }
/* Am rechten Rand nach links ausrichten, damit die Blase im Bild bleibt. */
.info.left .info-pop { left: auto; right: 0; }

.urgency { background: var(--w-navy); color: #E6EBF4; border-radius: 10px; padding: 1.25rem 1.4rem; margin-top: 1.6rem; }
.urgency h2 { color: #fff; margin-top: 0; }
.urgency li, .urgency p { color: #E6EBF4; }
.urgency ul { margin-bottom: 0.6rem; }

/* Strafenkacheln: zwei Spalten, damit die Aussage selbst als Ueberschrift traegt. */
.penalty-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 1.1rem;
  margin: 0.9rem 0;
}
.penalty {
  border-top: 2px solid var(--w-teal-light);
  padding-top: 0.5rem;
}
.penalty .claim { display: block; font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 0.3rem; }
.penalty .trigger { display: block; font-size: 0.8rem; color: #B8C4D8; line-height: 1.4; margin-bottom: 0.25rem; }
.penalty .norm { display: block; font-size: 0.73rem; font-weight: 600; color: var(--w-teal-light); }
.penalty-note { font-size: 0.75rem; color: #8FA0BC; margin-bottom: 0.9rem; }
@media (max-width: 620px) { .penalty-strip { grid-template-columns: 1fr; gap: 0.75rem; } }

/* Handlungsempfehlung: helle Karte im dunklen Dringlichkeitsblock. */
.urgency-action {
  background: #EAF7F5;
  border-left: 4px solid var(--w-teal-brand);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin-top: 0.9rem;
  page-break-inside: avoid;
}
.urgency p.urgency-action { color: var(--w-navy-headline); font-weight: 600; }
.urgency-action-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-teal-dark);
  margin-bottom: 0.2rem;
}

.assumptions { background: var(--w-off-white); border-radius: 10px; padding: 1.1rem 1.25rem; margin-top: 1.6rem; }
.assumptions h2 { margin-top: 0; }

/* Abschluss-Kasten unter den naechsten Schritten (kein Compliance-Schritt,
   daher ausserhalb der Nummerierung). */
.next-steps li { margin-bottom: 0.45rem; }

.closing-box {
  background: #F0FAF8;
  border-left: 4px solid var(--w-teal-dark);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
  margin-top: 1.6rem;
  page-break-inside: avoid;
}
.closing-box h2 { margin-top: 0; }
.closing-box p { color: var(--w-navy-headline); margin-top: 0.35rem; }

.report-footer { border-top: 1px solid #E2E7EF; margin-top: 2rem; padding-top: 1rem; }
.report-footer p { font-size: 0.8rem; color: var(--w-slate); margin-bottom: 0.3rem; }