/* ============================================
   IHK Branchencheck — Stylesheet
   IHK24 Corporate Design
   ============================================ */

/* ---------- Korb (IHK24 Markenschrift) ---------- */
@font-face {
  font-family: 'Korb';
  src: url('../assets/fonts/korb-webfont.woff2') format('woff2'),
       url('../assets/fonts/korb-webfont.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Korb';
  src: url('../assets/fonts/korb_bold-webfont.woff2') format('woff2'),
       url('../assets/fonts/korb_bold-webfont.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens (IHK24) ---------- */
:root {
  --navy:        #003366;
  --navy-dark:   #002244;
  --navy-light:  #335C85;
  --green:       #56BD66;
  --green-hover: #247929;
  --error:       #b91c1c;
  --error-bg:    #FDEAEA;
  --bg:          #ffffff;
  --bg-alt:      #EFF3F6;
  --text:        #2B2F32;
  --text-muted:  #5a6474;
  --border:      #CCD7E6;
  --border-light:#E3EBF5;
  --color-soft-blue:   #E3EBF5;
  --color-light-green: #E4F1E4;
  --color-separator:   #d0d5dd;

  --font: 'Source Sans Pro', 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Korb', 'Source Sans Pro', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-h2: 2rem;
  --text-h3: 1.5rem;
  --text-copy: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  --radius: 4px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.09);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --transition: 0.18s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { border: none; background: none; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; line-height: 1.2; color: var(--navy); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Splash (initial Loading) ---------- */
.splash {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--bg);
  z-index: 1000;
  text-align: center;
}
.splash p {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.splash-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Password Gate (Overlay) ---------- */
.gate {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(0, 51, 102, 0.92);
  backdrop-filter: blur(4px);
  z-index: 900;
}
.gate-box {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.gate-logo {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 1rem;
}
.logo-sq {
  width: 32px; height: 32px;
  border-radius: 2px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  display: grid; place-items: center;
}
.logo-sq--light { background: var(--border); }
.logo-sq--navy { background: var(--navy); color: #fff; }
.gate-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.gate-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.55;
}
.gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.gate-input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
}
.gate-form .btn {
  width: 100%;
}
.gate-input:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12);
}
.gate-error {
  color: var(--error);
  font-size: var(--text-sm);
  margin-top: 0.5rem;
}

.gate-testhint {
  color: var(--muted, #6b7280);
  font-size: var(--text-sm);
  margin-top: 0.5rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--color-separator);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 72px;
}
.header-logo { display: flex; align-items: center; flex-shrink: 0; transition: opacity var(--transition); }
.header-logo:hover { opacity: 0.85; }
.header-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
  min-width: 0;   /* sonst schiebt die Kopfzeile auf schmalen Geräten über den Rand */
}

/* Sehr schmale Android-Geräte (Galaxy Fold zugeklappt, 280 px): Logo und
   Kopfzeile passten nebeneinander nicht mehr in die Zeile und erzeugten
   waagerechtes Scrollen auf der ganzen Seite. */
@media (max-width: 359px) {
  .header-inner { padding: 0 0.75rem; }
  .header-logo svg { width: 120px; height: auto; }
  .header-eyebrow { font-size: var(--text-xs); letter-spacing: 0.02em; }
}
.header-eyebrow small {
  display: block;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
@media (max-width: 600px) {
  .shell { padding: 1.5rem 1rem 3rem; }
}

/* ---------- Meta-Zeile ---------- */
.meta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.meta-row .pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  background: var(--color-soft-blue);
  color: var(--navy);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Card ---------- */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card .body { padding: 2rem; }
@media (max-width: 600px) {
  .card .body { padding: 1.5rem 1.25rem; }
}

.greeting {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.greeting strong { color: var(--text); font-weight: 600; }

h1.page-title {
  font-size: var(--text-h2);
  line-height: 1.15;
  margin-bottom: 0.75rem;
  color: var(--navy);
}
@media (max-width: 600px) {
  h1.page-title { font-size: 1.75rem; }
}

.lede {
  font-size: var(--text-copy);
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.55;
}

/* ---------- "Warum ist das wichtig?"-Hinweis ---------- */
.why-box {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem 1.125rem;
  margin-bottom: 2rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
}
.why-box__icon {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--navy);
}
.why-box__text { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.why-box__text p { margin: 0; }
.why-box__text p + p { margin-top: 0.4rem; }
.why-box__text strong { color: var(--text); font-weight: 600; }

/* ---------- Wahlgruppen-Hinweis (Variante B) ---------- */
/* Zeigt die Wahlgruppe als FOLGE der aktuell gewählten Branche — bewusst
   ruhig/informativ, damit die Branche die Entscheidung bleibt und die
   Wahlgruppe nicht zum ansteuerbaren Ziel wird. */
.wg-info {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  margin: -0.5rem 0 1.25rem;
  background: var(--color-soft-blue);
  border-radius: var(--radius);
}
.wg-info__icon { flex: 0 0 auto; margin-top: 0.1rem; color: var(--navy); }
.wg-info__text { display: flex; flex-direction: column; line-height: 1.4; }
.wg-info__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--navy-light);
}
.wg-info__value { font-size: var(--text-base); font-weight: 600; color: var(--navy); margin-top: 0.1rem; }

/* ---------- Options (Radio-Card-Liste) ---------- */
.options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.option {
  -webkit-appearance: none; appearance: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text);
}
.option:hover { border-color: var(--navy-light); background: var(--bg-alt); }
.option:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.option.selected {
  border-color: var(--green-hover);
  background: var(--color-light-green);
}
.option .badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--navy);
  color: #fff;
  padding: 4px 8px;
  border-radius: var(--radius);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
  line-height: 1.4;
}
.option.selected .badge { background: var(--green-hover); }
.option .main { flex: 1; min-width: 0; }
.option .main .name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.option .main .meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 400;
}
.option .radio {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  display: grid; place-items: center;
  color: transparent;
  transition: all var(--transition);
}
.option.selected .radio {
  border-color: var(--green-hover);
  background: var(--green-hover);
  color: #fff;
}
.option.option-other { border-style: dashed; background: var(--bg-alt); }
.option.option-other .main .name { color: var(--navy); }
.option.option-other .badge {
  background: transparent;
  color: var(--navy);
  padding: 0;
  min-width: 22px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
}
.option.option-other.selected {
  border-style: solid;
  background: var(--color-light-green);
}
.option.option-other.selected .badge { color: var(--green-hover); }

/* ---------- Step 2: Suche ---------- */
.step-change { display: none; }
.step-change.active {
  display: block;
  animation: fadeUp 0.28s ease both;
  margin-bottom: 1.25rem;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.field-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.5rem;
  /* Die Hinweise unter Mitgliedsnummer und Firmenname laufen seit 08/2026 über
     mehrere Zeilen (Fundort, Format, Schreibweisen). Ohne Zeilenhöhe kleben sie
     bei 12px aufeinander. */
  line-height: 1.45;
}

/* Hält Beispiele wie 107#000123456 zusammen, damit sie nicht mitten in der
   Zahlenfolge umbrechen und dadurch als zwei Werte gelesen werden. */
.nowrap { white-space: nowrap; }

.combo { position: relative; }
.combo input {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-base);
  padding: 0.75rem 2.75rem 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.combo input:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12);
}
.combo .chev {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 20;
  display: none;
}
.combo-list.open { display: block; }
.combo-list .group {
  padding: 0.6rem 0.875rem 0.3rem;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
}
.combo-list .opt {
  padding: 0.7rem 0.875rem;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border-bottom: 1px solid var(--border-light);
}
.combo-list .opt:last-child { border-bottom: 0; }
.combo-list .opt:hover { background: var(--color-soft-blue); }
.combo-list .opt .c {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--navy);
  color: #fff;
  padding: 2px 6px;
  border-radius: var(--radius);
  font-weight: 700;
  flex-shrink: 0;
}
.combo-list .empty {
  padding: 1rem 0.875rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Branchen-Suggester (Fallback „Keine passt") ---------- */
.suggest { position: relative; }
.suggest__input {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-base);
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.suggest__input:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12);
}
.suggest__results {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.12));
  max-height: 320px;
  overflow-y: auto;
}
/* Treffer-Zeile: Titel zuerst und über die volle Breite, Code darunter als
   Beiwerk. Der Code stand früher als Kachel LINKS neben dem Titel und nahm ihm
   auf schmalen Schirmen rund ein Viertel der Zeile — genau die Breite, die
   WZ-Bezeichnungen wie „Tätigkeiten der Großhandelsvermittlung von …" brauchen. */
.suggest__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem 0.625rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.suggest__item.active,
.suggest__item:hover { background: var(--color-soft-blue); }
.suggest__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.suggest__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.suggest__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.suggest__code {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-muted);
}
.suggest__section { color: var(--text-muted); }
.suggest__hint-row { padding: 0.55rem 0.625rem; font-size: var(--text-sm); color: var(--text-muted); }

/* „Weitere Treffer anzeigen": Der Suchdienst liefert bis zu acht Vorschläge,
   von denen die hinteren erfahrungsgemäß danebenliegen (Testfall „Fenster":
   Platz 4 bis 8 sind Gebäudereinigung, Heimtextilien, Großhandel). Sofort
   sichtbar sind deshalb nur die ersten SICHTBAR_ERST; der Rest bleibt einen
   Fingertipp entfernt, statt die halbe Trefferliste zu füllen. */
.suggest__mehr {
  -webkit-appearance: none; appearance: none;
  flex: none;
  width: 100%;
  min-height: 40px;
  margin-top: 0.375rem;
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  cursor: pointer;
}
.suggest__mehr[hidden] { display: none; }
.suggest__mehr:hover { background: var(--color-soft-blue); border-color: var(--navy-light); }
.suggest__mehr:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.suggest-empty {
  margin-top: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: #FFF8EC;
  border: 1px solid #F6A623;
  border-left: 3px solid #F6A623;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text);
}
.suggest-empty a { color: var(--navy); font-weight: 600; white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--text-base);
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
  min-height: 48px;
  line-height: 1;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-light); box-shadow: var(--shadow-sm); }

.btn--accent { background: var(--green); color: #fff; font-weight: 700; }
.btn--accent:hover { background: var(--green-hover); box-shadow: var(--shadow-sm); }

.btn--outline {
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--bg);
}
.btn--outline:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: rgba(0, 51, 102, 0.04);
}

.btn-submit { width: 100%; margin-top: 0.5rem; }
.btn-submit[disabled] {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.form-error {
  margin-top: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--error-bg);
  color: var(--error);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ---------- Success ---------- */
.success-icon, .error-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 1rem;
  animation: pop 0.5s cubic-bezier(0.4, 1.6, 0.6, 1) both;
}
.success-icon { background: var(--color-light-green); color: var(--green-hover); }
.error-icon   { background: var(--error-bg); color: var(--error); }

@keyframes pop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.success-title {
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: center;
  font-size: var(--text-h3);
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.success-text {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-copy);
  line-height: 1.55;
  margin-bottom: 1.75rem;
}
.success-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--text-sm);
}
.success-summary .row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border-light);
}
.success-summary .row:last-child { border-bottom: 0; }
.success-summary .row .k { color: var(--text-muted); }
.success-summary .row .v { color: var(--text); font-weight: 600; }
@media (max-width: 520px) {
  .success-summary .row { grid-template-columns: 1fr; gap: 0.15rem; }
}

.pdf-block { margin-top: 1.5rem; }
.pdf-hint {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* ---------- Begründung (Pflichtfeld vor der Branchenauswahl) ---------- */
.reason {
  margin-bottom: 1.5rem;
}
.reason__input {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.55;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  resize: vertical;
  min-height: 88px;
  background: var(--bg);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.reason__input:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12);
}
/* Erst markieren, wenn wirklich getippt wurde — ein leeres Feld beim Öffnen
   der Seite als „fehlerhaft" zu zeigen, wäre eine Anklage vor der Tat. */
.reason__input--incomplete {
  border-color: var(--orange, #f6a623);
}
#begruendung-count {
  color: var(--orange, #f6a623);
  font-weight: 600;
}

/* ---------- Closing Note ---------- */
.closing-note {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  background: var(--color-light-green);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text);
}
.closing-note svg { color: var(--green-hover); flex-shrink: 0; margin-top: 2px; }
.closing-note p { margin: 0; }
.closing-note strong { display: block; color: var(--green-hover); font-weight: 700; margin-bottom: 2px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: #fff;
  padding: 1.5rem;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.site-footer .inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.site-footer a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.82;
}
.site-footer a:hover { opacity: 1; }
.site-footer .lock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  opacity: 0.78;
}

/* ====== Stammdaten-Schritt (optionaler 2. Schritt) ====== */
.sd-progress {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-hover);
  background: var(--color-light-green);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
.sd-fields {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 1.25rem 0 1.5rem;
}
.sd-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.sd-field__head .field-label { margin-bottom: 0; }
.sd-missing {
  font-size: var(--text-xs);
  font-weight: 700;
  color: #9a5b00;
  background: #FDF1DC;
  border: 1px solid #F6D9A6;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.sd-input {
  width: 100%;
  font-family: var(--font);
  font-size: var(--text-copy);
  color: var(--text);
  background-color: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.sd-input:focus {
  outline: none;
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(51, 92, 133, 0.15);
}
/* Beispielangaben in den Feldern kursiv und kleiner als die Eingabe selbst
   (Rückmeldung IHK, 11.08.2026) — sie sind Muster, kein Inhalt. Nur der
   Platzhalter wird verkleinert, nicht das Feld: unter 16px zoomt iOS Safari
   beim Antippen ins Formular hinein. */
.sd-input::placeholder,
.reason__input::placeholder,
.suggest__input::placeholder {
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-muted);
  opacity: 1;
}
/* Eigener Pfeil, weil appearance:none den nativen entfernt (Rückmeldung IHK,
   11.08.2026). Ohne ihn trug das Select denselben Rahmen und dasselbe Padding
   wie die Textfelder darunter, und Mitglieder versuchten, eine Zahl zu tippen.
   Der Pfeil ist das Merkmal, an dem ein Auswahlfeld erkannt wird. */
select.sd-input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6474' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px 16px;
}
/* Die beiden Zustandsregeln setzen die Farbe über background-COLOR, nicht über
   das Shorthand: Sie sind spezifischer als select.sd-input und würden den Pfeil
   sonst genau dann wegradieren, wenn das Feld am wichtigsten ist (Angabe fehlt
   oder Eingabe ungültig). Festgehalten in test/bkgl-auswahlfeld-erkennbar. */

/* Fehlendes Feld dezent hervorheben — lenkt Aufmerksamkeit auf Ergänzungen. */
.sd-field--missing .sd-input {
  border-color: #F0B860;
  background-color: #FFFDF8;
}
/* Ungültige Eingabe: rote Umrandung + konkreter Hinweis darunter. */
.sd-input--invalid,
.sd-field--missing .sd-input.sd-input--invalid {
  border-color: var(--error);
  background-color: var(--error-bg);
}
.sd-input--invalid:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}
/* Fehlermeldung unmittelbar unter dem Feld. Eine Darstellung für alle drei
   Formulare (Person, Stammdaten, Self-Service) — erzeugt von
   js/feldfehler.js. */
.sd-error-msg {
  margin-top: 0.4rem;
  font-size: var(--text-sm);
  color: var(--error);
  line-height: 1.4;
}
/* Ein Häkchen hat keinen sichtbaren Rahmen, den man rot färben könnte —
   accent-color zeichnet die Box selbst. Deshalb ein Umriss außen herum. */
input[type="checkbox"].sd-input--invalid {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}
.datenschutz.feld--fehler { border-top-color: var(--error); }
.sd-trust {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 1.25rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}
.sd-trust svg { flex: 0 0 auto; margin-top: 0.15rem; opacity: 0.7; }

/* ====== Test-Launcher (test.html) ======
   Redesign in eigener Datei: css/test.css (tc-*-Klassen). */

/* PDF-Download als hervorgehobene primäre Aktion (grüner Schein + leichtes Anheben). */
.pdf-cta {
  box-shadow: 0 4px 14px rgba(86, 189, 102, 0.38);
  transition: box-shadow var(--transition), transform var(--transition);
}
.pdf-cta:hover {
  box-shadow: 0 6px 20px rgba(86, 189, 102, 0.48);
  transform: translateY(-1px);
}

/* ============================================
   Branchenliste bearbeiten (2026-08-05)
   Zwei Zonen + Bottom-Sheet. Ersetzt die frühere Radio-Card-Liste.
   Touch-Ziele durchgehend >= 44px, weil das der Haupt-Zugangsweg ist
   (QR-Code im Brief -> Handy).
   ============================================ */

.branchen { margin-bottom: 1.25rem; }

.branchen__head {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.branchen__head--nb { margin-top: 1.5rem; }
.branchen__count { font-weight: 400; color: var(--text-muted); }

.branchen__slot { display: flex; flex-direction: column; gap: 0.5rem; }

.branchen__empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0.25rem 0 0;
}
.branchen__limit {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0.5rem 0 0;
}

/* ---------- Branchen-Karte ----------
   Aufbau seit 10.08.2026 (Rückmeldung aus dem Mobiltest): Der Branchenname
   bekommt eine eigene Zeile über die volle Kartenbreite, Code und Status
   stehen als gedämpfte Metazeile darunter, die Schaltflächen rechts bzw. auf
   dem Handy in einer eigenen Zeile darunter.

   Vorher teilten sich Code-Kachel, Name und zwei 44px-Knöpfe EINE Zeile. Auf
   360 px blieben dem Namen rund 85 px; „Tätigkeiten der Großhandelsvermittlung
   von Baustoffen und Anstrichmitteln" brach dort in acht Zeilen und lief unter
   die Knöpfe. Bitte nicht auf eine einzeilige Anordnung zurückdrehen. */
.branche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 0.875rem;
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.branche--hb {
  border-color: var(--navy);
  border-left: 4px solid var(--navy);
  background: var(--color-soft-blue);
}
.branche--frisch { animation: brancheFrisch 1.2s ease both; }
@keyframes brancheFrisch {
  0%   { background: var(--color-light-green); border-color: var(--green); }
  100% { background: var(--color-soft-blue);   border-color: var(--navy); }
}

.branche__main { min-width: 0; }
.branche__name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  /* WZ-Bezeichnungen enthalten Wortungetüme („Großhandelsvermittlung",
     „Ausrüstungsgegenstände"). Ohne diese beiden Zeilen ragen sie auf schmalen
     Schirmen aus der Karte heraus. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Der Code ist ein Beleg, keine Überschrift: gedämpft, klein, in der Metazeile
   unter dem Namen. Als eigene Kachel neben dem Namen konkurrierte er mit ihm
   um dieselbe Breite (Anforderung IHK, 10.08.2026). */
.branche__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4rem;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.2rem;
  overflow-wrap: anywhere;
}
.branche__code {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-muted);
}

.branche__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.branche__aktion {
  -webkit-appearance: none; appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 44px; height: 44px;
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--navy);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.branche__aktion:hover { background: var(--bg-alt); border-color: var(--navy-light); }
.branche__aktion:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.branche__aktion--weg:hover { color: var(--error); border-color: var(--error); background: var(--error-bg); }

/* ---------- Hinzufügen ---------- */
.btn-add {
  -webkit-appearance: none; appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--navy);
  background: var(--bg);
  border: 1px dashed var(--navy-light);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.btn-add:hover:not(:disabled) { background: var(--color-soft-blue); border-color: var(--navy); }
.btn-add:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.btn-add:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-add__plus { font-size: 1.25rem; line-height: 1; font-weight: 700; }

/* ---------- Bottom-Sheet ---------- */
body.sheet-offen { overflow: hidden; }

/* z-index über dem Seitenkopf (.site-header, sticky, z-index 100). Mit dem
   früheren Wert 50 legte sich der Kopf im Querformat über die Sheet-Kopfzeile
   und verdeckte Schließen- und Fertig-Knopf — genau die beiden Bedienelemente,
   mit denen man die Tastatur wieder loswird. Im Hochformat fiel das nie auf,
   weil das Sheet dort unten sitzt. */
.sheet { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet[hidden] { display: none; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(0, 34, 68, 0.45); }

/* dvh statt vh: Auf Mobilbrowsern rechnet vh mit der AUSGEFAHRENEN Adressleiste
   und liefert im Querformat eine Höhe, die es real nicht gibt. Zusätzlich setzt
   das Skript die Höhe von .sheet aus window.visualViewport, damit das Panel
   auch bei offener Tastatur vollständig sichtbar bleibt. */
.sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 88dvh;
  /* Kopf, Suchfeld und Übernehmen-Knopf stehen fest, nur die Trefferliste
     scrollt. Ohne overflow:hidden quoll der Inhalt aus dem gerundeten Kasten. */
  overflow: hidden;
  background: var(--bg);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.22);
  padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
  animation: sheetHoch 0.22s ease both;
}
@keyframes sheetHoch {
  from { transform: translateY(12px); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

.sheet__head { display: flex; flex: none; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.sheet__title {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.sheet__close {
  -webkit-appearance: none; appearance: none;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--radius);
  background: transparent; color: var(--navy); cursor: pointer;
}
.sheet__close:hover { background: var(--bg-alt); }
.sheet__close:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Tastatur schließen. Sichtbar nur, solange das Suchfeld den Fokus hat. */
.sheet__done {
  -webkit-appearance: none; appearance: none;
  flex: none;
  min-height: 36px;
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy);
  background: var(--color-soft-blue);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.sheet__done[hidden] { display: none; }
.sheet__done:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.sheet__chips { display: flex; flex: none; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; max-height: 25%; overflow-y: auto; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.25rem 0.25rem 0.25rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--navy);
  background: var(--color-soft-blue);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__weg {
  -webkit-appearance: none; appearance: none;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--navy); cursor: pointer;
}
.chip__weg:hover { background: rgba(0, 51, 102, 0.12); }
.chip__weg:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* Im Sheet ist die Suche der einzige dehnbare Bereich: Suchfeld und Hinweis
   bleiben oben stehen, allein die Trefferliste scrollt. Die Liste schwebt hier
   NICHT als Overlay — sonst läge sie auf dem Übernehmen-Knopf oder hinter der
   Tastatur. */
.sheet .suggest {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.sheet .suggest__input,
.sheet .suggest__hint,
.sheet .suggest-empty { flex: none; }

.sheet .suggest__results {
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.5rem;
  box-shadow: none;
}
.sheet .suggest__results[hidden] { display: none; }

.suggest__status {
  font-weight: 600;
  color: var(--navy-light);
}
.suggest__item--gesperrt { opacity: 0.55; cursor: not-allowed; }
.suggest__item--gesperrt:hover { background: transparent; }
.suggest__item--gewaehlt { background: var(--color-light-green); }

.sheet__apply { flex: none; width: 100%; margin-top: 0.875rem; }
.sheet__apply[hidden] { display: none; }

/* ---------- Sicherheitsabfrage (Branche entfernen) ---------- */
/* z-index 130 liegt über dem Sheet (120) und der Rückgängig-Leiste (110): Die
   Abfrage kann aus der Kartenliste heraus geöffnet werden, während unten noch
   eine Rückgängig-Meldung der vorigen Entfernung steht. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 34, 68, 0.45); }
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 1.25rem;
  background: var(--bg);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  animation: modalAuf 0.16s ease both;
}
@keyframes modalAuf {
  from { transform: scale(0.97); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.modal__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
/* overflow-wrap wie bei .branche__name: WZ-Bezeichnungen enthalten
   Wortungetüme, die sonst aus dem Kasten ragen. */
.modal__text {
  font-size: var(--text-base);
  line-height: 1.5;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.modal__hint {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.modal__actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }
.modal__actions .btn { flex: 0 1 auto; }

/* Auf schmalen Schirmen untereinander, „Entfernen" unten in Daumenreichweite. */
@media (max-width: 420px) {
  .modal__actions { flex-direction: column; }
  .modal__actions .btn { width: 100%; }
}

.btn--danger { background: var(--error); color: #fff; }
.btn--danger:hover { background: #8f1616; box-shadow: var(--shadow-sm); }

body.modal-offen { overflow: hidden; }

/* ---------- Rückgängig-Leiste ---------- */
.undo {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 110;   /* ebenfalls über dem sticky Seitenkopf (z-index 100) */
  display: flex;
  align-items: center;
  gap: 1rem;
  width: calc(100% - 2rem);
  max-width: 420px;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  background: var(--navy-dark);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
}
.undo[hidden] { display: none; }
.undo__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo__btn {
  -webkit-appearance: none; appearance: none;
  flex: none;
  min-height: 36px;
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  cursor: pointer;
}
.undo__btn:hover { background: rgba(255, 255, 255, 0.14); }
.undo__btn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Handy: Name und Metazeile bekommen die volle Kartenbreite, die Schaltflächen
   rücken in eine eigene Zeile darunter und werden rechtsbündig ausgerichtet. */
@media (max-width: 600px) {
  .branche {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.75rem;
  }
  /* Beide Knöpfe sollen nebeneinander in eine Zeile passen (ab 320 px). Kleiner
     wird nur die Schrift, nicht das Tippziel: 44 px Höhe bleiben. */
  .branche__aktion {
    padding: 0 0.5rem;
    gap: 0.25rem;
    font-size: var(--text-xs);
  }
  .sheet__panel { max-height: 92dvh; }
}

/* Sehr schmale Geräte (iPhone SE, 320 px): Dort passen Symbol UND Wort nicht
   nebeneinander in eine Zeile. Es weicht das Symbol, nicht das Wort — „Pfeil
   nach oben" war genau die Beschriftung, die niemand erraten konnte. */
@media (max-width: 349px) {
  .branche__aktion svg { display: none; }
  .branche__aktion { gap: 0; }
}

/* Querformat auf dem Handy: unter ~500 px Höhe bleibt neben der Tastatur kaum
   etwas übrig. Deshalb nutzt das Sheet dort die volle Höhe, der Kopf schrumpft,
   und die Treffer-Zeilen werden kompakter (ohne den Abschnitt, der nur
   Zusatzkontext liefert). */
@media (max-height: 500px) {
  .sheet__panel {
    max-height: 100dvh;
    height: 100%;
    border-radius: 0;
    padding-top: 0.5rem;
  }
  .sheet__head { margin-bottom: 0.375rem; }
  .sheet__title { font-size: 1rem; }
  .sheet__close, .sheet__done { height: 36px; }
  .sheet__close { width: 36px; }
  .sheet .suggest__input { padding: 0.5rem 0.75rem; }
  .sheet .suggest__hint { display: none; }
  .sheet .suggest__results { margin-top: 0.375rem; }
  .suggest__item { padding: 0.4rem 0.5rem; }
  .suggest__section { display: none; }
  .sheet__apply { margin-top: 0.5rem; }
}

/* Auf Desktop soll das Sheet nicht die volle Bildschirmbreite einnehmen,
   sondern der Breite der übrigen Anwendung (.shell, max-width: 720px)
   folgen. Auf dem Handy bleibt es unverändert kantenlos. */
@media (min-width: 601px) {
  .sheet__panel {
    max-width: 720px;
    margin: 0 auto;
    align-self: center;
    border-radius: 12px;
  }
}

/* Hauptbranche fehlt (IHK-Platzhalter): Aufforderung statt Bestätigungskarte.
   Gestrichelt und ohne Code-Badge, damit auf den ersten Blick klar ist, dass
   hier noch nichts hinterlegt ist. */
.branche--leer {
  border-style: dashed;
  background: var(--bg-alt);
}
.branche--leer .branche__name { color: var(--navy); }

/* ---------- Getrennte Blöcke: Unternehmen gegen einreichende Person ----------
   Anforderung IHK (06.08.2026). Die Trennung ist inhaltlich begründet: Der
   obere Block beschreibt das Mitglied, der untere eine natürliche Person mit
   eigener Rechtsgrundlage. Deshalb sichtbar abgesetzt und nicht nur durch eine
   Zwischenüberschrift getrennt. */
.block {
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.block--person { background: var(--bg-alt); }

.block__head {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.25rem;
}
.block__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 1rem;
}
/* Ohne Hinweistext (Unternehmens-Block) braucht die Ueberschrift den Abstand selbst. */
.block__head + .branchen { margin-top: 0.875rem; }
.block .branchen:last-child { margin-bottom: 0; }
.block .sd-field + .sd-field { margin-top: 0.875rem; }

/* Auf dem Handy liegen vier Innenabstände ineinander (Schale, Karte, Block,
   Branchen-Karte) und kosten zusammen rund 70 px Breite — auf einem 320er
   Schirm ein Fünftel. Der Block gibt davon einen Teil zurück. Muss NACH der
   Grunddefinition stehen, sonst gewinnt sie. */
@media (max-width: 600px) {
  .block { padding: 0.75rem; }
}

/* Pflichtstern, konsistent mit dem Begründungsfeld */
/* Pflichtfeld-Stern. Eine Regel für alle Seiten (Rückmeldung IHK,
   11.08.2026): vorher gab es zwei mit leicht verschiedenen Rottönen, und im
   Self-Service fehlte die Kennzeichnung ganz. */
.req { color: var(--error); font-weight: 700; }

/* Legende „Felder mit * sind Pflichtangaben." — steht im Einleitungstext des
   Blocks, damit der Stern nicht raten lässt. Eigene Zeile, weil er sonst im
   Fließtext untergeht. */
.pflicht-legende { display: block; margin-top: 0.35rem; }

@media (max-width: 600px) {
  .block { padding: 0.875rem; }
}

/* ---------- Datenschutzhinweis + Pflicht-Häkchen ----------
   Wortlaut von der IHK Berlin. Der Text ist lang und juristisch; er steht
   deshalb kleiner und ruhiger als der Rest, das Häkchen darunter dagegen in
   normaler Textgröße mit großzügiger Trefferfläche. */
.datenschutz {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.datenschutz__text {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 0.875rem;
}
.datenschutz__check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
  /* Trefferfläche vergrößern, ohne den Text zu verschieben */
  padding: 0.375rem 0;
}
.datenschutz__check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  accent-color: var(--navy);
  cursor: pointer;
}
.datenschutz__check a { color: var(--navy); }

/* Begründungsfeld sitzt seit 06.08.2026 am Ende des Unternehmens-Blocks, in
   Sichtweite des Absende-Knopfs, der darauf verweist. Abgesetzt vom
   Wahlgruppen-Hinweis darüber. */
.block--firma .reason {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
  margin-bottom: 0;
}

/* Tippfehler-Vorschlag unter dem E-Mail-Feld. Der Vorschlag ist anklickbar und
   sieht deshalb wie ein Link aus, nicht wie ein Hinweis zum Weiterlesen. */
.mail-hinweis { margin-top: 0.4rem; }
.mail-vorschlag {
  -webkit-appearance: none; appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}
.mail-vorschlag:hover { color: var(--green-hover); }
.mail-vorschlag:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- Anzeigestand einer bereits abgegebenen Meldung (11.08.2026) ----------
   Uebernimmt das Muster der .why-box (Randfarbe links, gedaempfter Grund) statt
   eine eigene Formsprache einzufuehren. Kompakt gehalten: Der Block steht ganz
   oben, und die Seite ist auf dem Handy ohnehin lang.
   Drei Toene ueber die Randfarbe, kein Wechsel der Flaechenfarbe. */
.meldung {
  padding: 0.875rem 1.125rem;
  margin-bottom: 1.5rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
}
.meldung__titel {
  margin: 0 0 0.25rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.meldung__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
  /* WZ-Bezeichnungen enthalten Wortungetueme, siehe .branche__name */
  overflow-wrap: anywhere;
}
.meldung--ok   { border-left-color: var(--green); }
.meldung--warn { border-left-color: var(--error); background: var(--error-bg); }
.meldung--warn .meldung__text { color: var(--text); }