/* EmpCo-Check – öffentliche Landing Page im ganztags. Corporate Design
   Farben: Deep Navy #002649 · Crimson Velvet #AE0037 · Pale Sage #EFF1EC · Ocean Blueprint #004D94
   UI: #33516D (Text sekundär) · #E4E8DF (Linien) · #F6F7F4 (Hintergrund) · Feedback #009E73 / #E74C3C
   Schrift: IBM Plex Sans. Keine Schatten, keine Verläufe, keine dekorativen Rahmen. */

/* Schriften liegen selbst im Repo (app/static/fonts), sie werden nicht von Google geladen:
   ein externer Fontabruf schickt die IP jedes Besuchers ohne Einwilligung an einen Dritten.
   Lizenz der Dateien: SIL Open Font License 1.1, siehe app/static/fonts/LICENSE-*.txt. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-ext-400.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-400.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-ext-500.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-500.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-ext-600.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-600.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-ext-700.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-700.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 {
  --navy: #002649; --red: #AE0037; --sage: #EFF1EC; --ocean: #004D94;
  --text2: #33516D; --line: #E4E8DF; --bg: #F6F7F4; --white: #fff;
  --ok: #009E73; --err: #E74C3C; --blue-light: #82C3FF; --sage-dark: #C3CCB8;
  /* Abstände skalieren mit der Viewportbreite, damit auf dem Handy keine
     halbleeren Bildschirme entstehen und auf dem Desktop trotzdem Luft bleibt. */
  --pad-x: clamp(16px, 5vw, 24px);
  /* Einheitliche Höhe für einzeilige Eingabefelder und Buttons, damit sie
     nebeneinander bündig stehen. */
  --ctl-h: 56px;
  --sec-y: clamp(40px, 9vw, 72px);
  --hero-y: clamp(44px, 10vw, 88px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.6; color: var(--navy); background: var(--white); }
body.embed { background: transparent; }
/* Lange Domains und URLs dürfen die Seite auf schmalen Displays nicht breiter machen. */
h1, h2, h3, p, li, blockquote, td { overflow-wrap: break-word; }
a { color: var(--ocean); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h1 { font-weight: 700; font-size: clamp(29px, 6.4vw, 52px); letter-spacing: -.01em; line-height: 1.12; }
h2 { font-weight: 700; font-size: clamp(22px, 4.4vw, 32px); }
h3 { font-weight: 600; font-size: 19px; }
p { margin: 0 0 1em; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: max(var(--pad-x), env(safe-area-inset-left)) max(var(--pad-x), env(safe-area-inset-right)); }
.muted { color: var(--text2); } .small { font-size: 14px; }
b, strong { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Header / Footer */
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 12px; }
.logo { display: block; line-height: 0; }
.logo img { display: block; height: 34px; width: auto; }
footer.site .logo img { height: 40px; }
header nav { display: flex; align-items: center; }
header nav a { margin-left: 28px; color: var(--navy); text-decoration: none; font-weight: 500; font-size: 16px; }
header nav a:hover { color: var(--red); }
header nav .nav-cta { padding: 10px 16px; border: 1.5px solid var(--navy); }
footer.site { background: var(--navy); color: #fff; padding: var(--sec-y) 0 calc(24px + env(safe-area-inset-bottom)); }
footer.site a { color: #fff; } footer.site .muted { color: var(--blue-light); }
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 8px 0; }
footer.site nav a { text-decoration: none; padding: 6px 0; }
footer.site p { margin: 12px 0; }
@media (min-width: 721px) { .logo img { height: 40px; } footer.site .logo img { height: 44px; } header.site .wrap { min-height: 72px; } }
@media (max-width: 720px) { header nav a:not(.nav-cta) { display: none; } header nav .nav-cta { margin-left: 0; font-size: 15px; } }

/* Hero – Pale Sage als Fläche, Navy als Text, Rot nur als Akzentkante.
   Rot ist Akzentfarbe, keine Vollfläche (CD): eine ganzflächig rote
   Startseite wirkt besonders auf kleinen Displays aggressiv. */
.hero { background: var(--bg); color: var(--navy); padding: var(--hero-y) 0 calc(var(--hero-y) * .82); }
.hero.compact { padding: clamp(32px, 7vw, 56px) 0 clamp(28px, 6vw, 48px); }
.hero .eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 20px; color: var(--red); border-left: 3px solid var(--red); padding-left: 10px; }
.hero .lead { font-size: clamp(17px, 2vw, 21px); max-width: 62ch; margin-bottom: 32px; color: var(--text2); }
.hero a { color: var(--ocean); }
.hero-note { font-size: 14px; color: var(--text2); margin-top: 20px; }
body.embed .hero { padding: clamp(32px, 7vw, 48px) 0 clamp(28px, 6vw, 40px); }

/* Formulare */
form.start { display: grid; grid-template-columns: 1fr auto; gap: 12px; max-width: 760px; }
form.start .form-note, form.start .form-error { grid-column: 1 / -1; }
/* Einwilligung ohne Checkbox: der Hinweis steht direkt am auslösenden Button. */
.form-note { font-size: 13px; line-height: 1.5; color: var(--text2); margin: 0; max-width: 72ch; }
.field { display: flex; flex-direction: column; gap: 6px; }
/* Feldbeschriftung und Eckdaten teilen sich eine Zeile: die Fakten zum Check
   stehen damit am Eingabefeld statt als loser Absatz darunter. */
.field > span { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; font-size: 14px; font-weight: 500; }
.field > span small { font-size: 13px; font-weight: 400; color: var(--text2); }
.hero .field > span { color: var(--navy); }
input[type=text], input[type=email], input[type=tel], input[type=url], textarea {
  width: 100%; font: inherit; font-size: 17px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); border-radius: 0; }
/* Einzeilige Felder über die Höhe statt über Innenabstand: der Text zentriert
   sich von selbst, und Feld und Button sind exakt gleich hoch. */
input[type=text], input[type=email], input[type=tel], input[type=url] { height: var(--ctl-h); padding: 0 16px; }
textarea { padding: 14px 16px; }
input:focus, textarea:focus { outline: 2px solid var(--ocean); outline-offset: 1px; border-color: var(--ocean); }
.hero input[type=text] { border-color: var(--sage-dark); }
form.start .btn { align-self: end; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.check input { margin: 3px 0 0; width: 20px; height: 20px; flex: none; accent-color: var(--navy); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-error { font-size: 15px; font-weight: 500; padding: 10px 14px; background: #fff; color: var(--err); border-left: 4px solid var(--err); margin: 0; }
.form-error::before { content: "Fehler: "; }
@media (max-width: 640px) { form.start { grid-template-columns: 1fr; } form.start .btn { width: 100%; } }

/* Buttons – Mindesthöhe 48px, damit sie sich auf dem Handy sicher treffen lassen. */
.btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; font-size: 16px; min-height: var(--ctl-h); padding: 12px 24px; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); cursor: pointer; text-decoration: none; border-radius: 0; }
.btn:hover { background: var(--sage); }
.btn.primary { background: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--ocean); border-color: var(--ocean); }
.btn.light { background: #fff; color: var(--navy); border-color: #fff; }
.btn.light:hover { background: var(--sage); }

/* Fortschritt */
.progress { padding: var(--sec-y) 0; }
.pbar { height: 8px; background: var(--line); }
.pfill { height: 100%; background: var(--navy); transition: width .6s ease; }
.pmeta { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 8px; font-size: 16px; }
.pmeta b { font-size: 22px; font-weight: 700; margin-right: 4px; }
@media (min-width: 721px) { .pmeta { flex-direction: row; gap: 32px; flex-wrap: wrap; } }

/* Ergebnisse */
.results { padding: var(--sec-y) 0 24px; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 32px; }
.kpis div { background: #fff; padding: 16px 14px; display: flex; flex-direction: column; }
.kpis b { font-size: clamp(28px, 7vw, 36px); font-weight: 700; line-height: 1.1; }
.kpis span { font-size: 13px; color: var(--text2); margin-top: 4px; }
.kpis .crit b { color: var(--red); }
@media (min-width: 821px) { .kpis { grid-template-columns: repeat(4, 1fr); } .kpis div { padding: 20px 18px; } .kpis span { font-size: 14px; } }
.limit { background: var(--sage); padding: 16px 20px; font-size: 16px; margin-bottom: 32px; }
.limit a { font-weight: 600; }
.clean { padding: clamp(20px, 5vw, 32px); border: 1.5px solid var(--line); margin-bottom: 32px; }
.clean h2 { color: var(--ok); } .clean.error h2 { color: var(--err); }
.clean .btn { margin-top: 8px; margin-right: 8px; }

.block { margin: 0 0 40px; }
.block-head { border-top: 3px solid var(--navy); padding-top: 16px; margin-bottom: 8px; }
.block-head h2, .collapsible summary h2 { font-size: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.block-head h2 small, .collapsible h2 small { font-size: 14px; font-weight: 500; color: var(--text2); }
.block-head p, .collapsible summary p { color: var(--text2); font-size: 16px; max-width: 80ch; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; color: #fff; background: var(--navy); }
.cls-PER_SE .block-head { border-top-color: var(--red); } .cls-PER_SE .tag { background: var(--red); }
.cls-SIEGEL .tag { background: var(--ocean); }
.cls-KONTEXT .tag { background: var(--text2); }
.collapsible { border-top: 3px solid var(--text2); padding-top: 16px; }
.collapsible summary { cursor: pointer; list-style: none; } .collapsible summary::-webkit-details-marker { display: none; }
.collapsible summary p::after { content: " ▾"; } .collapsible[open] summary p::after { content: " ▴"; }

/* Fundstellen */
.finding { border: 1px solid var(--line); border-left: 4px solid var(--navy); padding: 16px; margin: 12px 0; background: #fff; }
@media (min-width: 721px) { .finding { padding: 16px 20px; } }
.cls-PER_SE .finding { border-left-color: var(--red); }
.cls-KONTEXT .finding { border-left-color: var(--sage-dark); }
.f-head { display: flex; gap: 4px 8px; align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.f-head strong { font-size: 17px; }
.f-head .cat { font-size: 13px; color: var(--text2); flex-basis: 100%; }
@media (min-width: 721px) { .f-head .cat { flex-basis: auto; margin-left: auto; } }
.finding blockquote { margin: 12px 0 8px; padding: 12px 14px; background: var(--bg); font-size: 16px; line-height: 1.55; border: 0; }
mark { background: #FFE3A3; color: inherit; padding: 0 2px; }
.cls-PER_SE mark { background: #FFD1DF; }
.why { font-size: 14px; color: var(--text2); margin: 0 0 8px; }
.finding details { font-size: 14px; } .finding summary { cursor: pointer; color: var(--ocean); font-weight: 500; padding: 6px 0; }
.finding details ul { margin: 6px 0 0; padding-left: 20px; } .finding details li { margin: 6px 0; word-break: break-all; }
.disclaimer { font-size: 14px; color: var(--text2); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; max-width: 90ch; }

/* So funktioniert es */
.how { padding: var(--sec-y) 0; }
.section-title { margin-bottom: clamp(24px, 4vw, 36px); }
.cols { display: grid; grid-template-columns: 1fr; gap: 28px; }
.cols p { font-size: 16px; color: var(--text2); margin: 0; }
.num { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-weight: 700; color: #fff; background: var(--navy); margin-bottom: 12px; }
.facts { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: clamp(36px, 7vw, 64px); padding-top: 40px; border-top: 1px solid var(--line); }
.facts h3 { font-size: 17px; } .facts p { font-size: 15px; color: var(--text2); margin: 0; }
@media (min-width: 821px) { .cols, .facts { grid-template-columns: repeat(3, 1fr); gap: 40px; } .num { margin-bottom: 16px; } }

/* Kontakt – Sage setzt den Abschluss vom weißen Inhaltsbereich ab. */
.contact { background: var(--sage); padding: var(--sec-y) 0; }
.wrap.two { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.contact h2 { margin-bottom: 16px; }
.lead-form { display: flex; flex-direction: column; gap: 16px; }
.lead-form .row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.lead-form .btn { align-self: stretch; }
.sent { border-left: 4px solid var(--ok); padding: 8px 20px; }
.sent h3 { color: var(--ok); }
@media (min-width: 821px) { .wrap.two { grid-template-columns: 1fr 1.4fr; gap: 56px; } .lead-form .row { grid-template-columns: 1fr 1fr; } .lead-form .btn { align-self: flex-start; } }

/* CTA-Band */
.cta-band { background: var(--navy); color: #fff; padding: clamp(24px, 5vw, 36px) clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; margin: 0 0 40px; }
.cta-band h2 { font-size: clamp(20px, 4vw, 24px); margin-bottom: 8px; } .cta-band p { margin: 0; color: var(--blue-light); }
.cta-band .btn.light { color: var(--navy); flex: none; }
@media (min-width: 821px) { .cta-band { flex-direction: row; gap: 32px; align-items: center; justify-content: space-between; } }
.more { font-size: 15px; color: var(--text2); padding: 12px 20px; background: var(--sage); }
.more a { font-weight: 600; }

/* Schritte im Hero */
.steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0; margin: 28px 0 0; max-width: 900px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; border-top: 2px solid var(--sage-dark); padding-top: 12px; font-size: 15px; line-height: 1.35; }
.steps li b { flex: none; width: 28px; height: 28px; line-height: 28px; text-align: center; font-weight: 700; border: 1.5px solid var(--navy); }
.steps li.done, .steps li.active { border-top-color: var(--navy); } .steps li.done b, .steps li.active b { background: var(--navy); color: #fff; }
.steps li span { display: flex; flex-direction: column; } .steps li small { font-size: 13px; color: var(--text2); margin-top: 2px; }
@media (min-width: 721px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.intro { margin: 8px 0 24px; } .intro p { color: var(--text2); }

/* Einstufungen der Fundstellen */
.cls-EINZELFALL .finding, .finding.cls-EINZELFALL { border-left-color: var(--ocean); }
.finding.cls-SIEGEL { border-left-color: var(--ocean); }
.finding.cls-KONTEXT { border-left-color: var(--sage-dark); }
.finding.cls-PER_SE { border-left-color: var(--navy); }
.finding.cls-PER_SE mark { background: #FFE3A3; }