/* ============================================
   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) ----------
   Farbumstellung 27.08.2026 (IHK, „Branchencheck-Style-Anpassungen"): Die
   Oberfläche trug bis dahin ein zweites, grünes Akzentsystem neben dem Navy
   der Marke. Grün ist vollständig entfallen, ebenso die Grau- und Schwarztöne
   in Text und Überschriften: alles läuft jetzt auf Navy #003366 zusammen,
   Aktionen auf Blau #2C62E8, Warnungen auf Rot #D54048.

   Die Namen --green/--green-hover bleiben als Aliasse stehen, weil sie an
   rund fünfzig Stellen in style.css, admin.css und test.css hängen und ein
   Umbenennen den Farbwechsel mit einem Refactor vermischt hätte. Neue Regeln
   bitte gegen --accent/--accent-hover schreiben. */
:root {
  --navy:        #003366;
  --navy-dark:   #002244;
  --navy-light:  #335C85;
  /* IHK Köln (Prototyp, 30.10.2026): Werte aus dem IHK24-Theme „standard“ von
     ihk.de/koeln. --accent ist das dunkle Grün (--swatches-secondary-700), weil
     es auf Weiß und unter weißer Schrift lesbar bleibt; das helle Grün trägt
     nur die Aktionsknöpfe, dort wie auf der Website mit Navy-Schrift. */
  --accent:       #247929;
  --accent-flaeche: #56BD66;
  --accent-hover: #003366;
  --green:       var(--accent);        /* Altname — trägt seit 27.08. Blau */
  --green-hover: var(--accent-hover);  /* Altname — trägt seit 27.08. Navy */
  --error:       #b91c1c;
  --error-bg:    #FDEAEA;
  --warn:        #D54048;
  --warn-bg:     #FBEAEB;
  /* Warntext auf heller Fläche. #D54048 selbst kommt auf --warn-bg nur auf
     3,9:1 und reißt damit die Lesbarkeitsschwelle für Kleintext; abgedunkelt
     sind es 6,1:1. Für Ränder und vollflächige Warnungen weiter --warn. */
  --warn-text:   #A03036;
  --bg:          #ffffff;
  --bg-alt:      #E4F1E4;
  --text:        #003366;
  --text-muted:  #003366;
  --border:      #CCD7E6;
  --border-light:#E3EBF5;
  --color-soft-blue:   #E3EBF5;
  --color-light-green: #E3EBF5;        /* Altname */
  --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;
  /* Knopfmasse aus dem IHK24-Theme von ihk.de/berlin, am 04.09.2026 an der
     Referenzseite ausgelesen. Sie stehen bewusst in px und nicht in rem: das
     Original arbeitet ebenso, und eine rem-Umrechnung wuerde die Knoepfe bei
     abweichender Grundschrift von der Marke wegdriften lassen. */
  --radius-btn:  24px;
  --radius-btn-sm: 18px;
  --btn-size:    60px;
  --btn-padding: 16px 24px;
  --btn-text:    22px;
  --btn-ring:    6px;
  /* Fokusfarbe des Themes (--swatches-secondary-700 im Berliner Mandanten).
     Absichtlich nicht --accent: der Fokus soll sich von der Flaeche abheben,
     auch wenn die Flaeche selbst blau ist. */
  --focus-ring:  #247929;
  --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;
}

/* ---------- IHK-Piktogramme ----------
   Zeichen aus der Piktogramm-Bibliothek der IHK Berlin, als Sprite in die
   HTML-Dateien eingebettet (tools/generate_piktogramme.py). Sie sind mit
   feinem Strich auf einem 70er-Raster gezeichnet: unterhalb von rund 32 px
   verliert die Linie ihre Kraft. Deshalb sind das BILDMARKEN für Flächen,
   keine Bedienzeichen für Knöpfe — die 20-px-Symbole der App bleiben, wie
   sie sind. Vor dem Verkleinern unter 32 px bitte am Gerät prüfen.

   Die Farbe kommt über currentColor aus dem Umfeld: auf weissem Grund Navy,
   im roten Kontaktblock Weiss. Die Bibliotheksfarbe #2C62E8 wird dabei vom
   Generator ersetzt. */
.pikto-sprite { display: none; }
.pikto {
  display: block;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  color: var(--accent);
}
.pikto--gross { width: 56px; height: 56px; }
.pikto--klein { width: 32px; height: 32px; }
/* Auf demselben Ton wie der Text daneben — für Stellen, an denen das
   Piktogramm den Text begleitet statt ihn anzukündigen. */
.pikto--text { color: inherit; }

/* ---------- 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;
  /* Deckend, nicht 92 % über Weiß: die Transparenz hellte das Navy zu #134271
     auf und traf damit die Markenfarbe nicht (IHK, 27.08.2026, Punkt 15). */
  background: var(--navy);
  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;
}
/* Seit 27.08.2026 dasselbe Bild wie das Favicon (IHK, Punkt 14) statt der
   nachgebauten IHK-Quadrate. Der Bär auf dem Reiter und der Bär über dem
   Formular sind dadurch dieselbe Marke. Der Header des Dashboards behält die
   Quadrat-Variante (.logo-sq) — dort steht das Zeichen neben Text, nicht
   allein über einer Anmeldemaske. */
.gate-logo__img {
  width: 48px;
  height: 48px;
  border-radius: 4px;
}
.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(--text-muted);
  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-logo img { display: block; height: 52px; width: auto; }
.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-logo img { height: 40px; }
  .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: center;
  padding: 0.75rem 1rem;
  margin: -0.5rem 0 1.25rem;
  background: var(--color-soft-blue);
  border-radius: var(--radius);
}
/* 36 px statt der früheren 18: Das IHK-Wahl-Piktogramm ist mit feinem Strich
   gezeichnet und wird darunter blass. Die Zeile trägt zwei Textzeilen und
   bleibt dabei gleich hoch. Farbe kommt aus .pikto (--accent, die Farbe der
   Bibliothek) — hier bewusst NICHT auf Navy gezogen, damit alle Piktogramme
   der Anwendung denselben Ton haben. */
.wg-info__icon { flex: 0 0 auto; width: 36px; height: 36px; }
.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; }
.wg-info__link {
  align-self: flex-start;
  margin-top: 0.25rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.wg-info__link:hover { color: var(--accent-hover); }
.wg-info__link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-radius: 2px;
}

/* ---------- 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; }

/* Vollflächig rot statt zartorange (IHK, 27.08.2026, Punkt 12): Der Hinweis
   ist eine Sackgasse — die Suche hat nichts gefunden und das Mitglied muss zum
   Telefon greifen. Auf rotem Grund trägt der Text weiß, und die beiden
   Kontaktangaben müssen unterstrichen bleiben: Ohne Farbunterschied zum
   Fließtext ist ein Link auf einfarbigem Grund sonst nicht mehr erkennbar. */
/* Das Piktogramm steht neben dem Text, nicht darüber: Der Block erscheint
   mitten in der Suche, und eine wachsende Höhe würde die Trefferliste
   verschieben. Über currentColor läuft es hier in Weiss. */
/* 44 px, nicht 34: Die 32-px-Untergrenze gilt für einfache Zeichen wie den
   Haken. „person-mit-headset" führt Kopf, Bügel, Mikrofon und Schulter in
   dünner Linie — bei 34 px zerfällt das zu Gekritzel. Wer hier ein anderes
   Piktogramm einsetzt, prüfe es am Gerät statt die Größe zu übernehmen. */
.suggest-empty__bild { width: 44px; height: 44px; margin-top: 0.1rem; }
.suggest-empty__text { min-width: 0; }
.suggest-empty {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: var(--warn);
  border: 1px solid #F7F7F7;
  border-left: 3px solid #F7F7F7;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: #fff;
}
.suggest-empty strong { color: #fff; }
.suggest-empty a {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Die E-Mail-Adresse ist breiter als die Textspalte auf 320 px. */
.suggest-empty a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; }
.suggest-empty a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Buttons ----------
   Form und Verhalten folgen dem Knopf von ihk.de/berlin (IHK24-Theme),
   ausgelesen am 04.09.2026: Radius 24 px, Mindesthoehe 60 px, Korb in 22 px
   OHNE Fettung, Zeilenhoehe 1.

   Der Hover faerbt die Flaeche NICHT um. Das Theme setzt dafuer sogar eigens
   `.btn,.btn:hover{background-color:var(--button-bg-color)}`. Die Rueckmeldung
   kommt aus einem Ring, der auf einer eigenen Ebene (::after) von 2 px auf
   6 px aufgeht. Wer hier wieder einen background-Wechsel eintraegt, bricht
   die Angleichung, auch mit dem richtigen Farbwert.

   Die Farbrollen bleiben, wie die IHK sie am 27.08.2026 gesetzt hat:
   --accent (#2C62E8) ist im Theme --color-button-secondary-background,
   --navy (#003366) ist --color-button-primary-background. Angeglichen wird
   also die Form, nicht die Farbwahl.

   Varianten setzen nur noch Token, nie Geometrie. Sonst muesste jede
   Media-Query weiter unten jede Variante einzeln nachziehen. */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  --btn-ring-color: var(--btn-bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-padding);
  min-height: var(--btn-size);
  min-width: var(--btn-size);
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--btn-text);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}
/* Der Ring liegt auf einer eigenen Ebene, damit er auf- und zugehen kann,
   ohne die Flaeche anzufassen. pointer-events:none ist Pflicht, sonst
   schluckt der aufgegangene Ring Klicks neben dem Knopf. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--btn-ring-color);
  opacity: 0;
  transition: box-shadow 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
.btn:hover::after {
  box-shadow: 0 0 0 var(--btn-ring) var(--btn-ring-color);
  opacity: 0.3;
}
/* Bleibt als Abweichung vom Original bewusst stehen: auf dem Handy gibt es
   keinen Hover, und der Ring damit keine Rueckmeldung beim Druecken. */
.btn:active { transform: translateY(1px); }
/* Der Fokusring der IHK ist ein Schatten, keine outline. Grund: er folgt dem
   24-px-Radius; eine outline zieht auf aelteren Engines ein Rechteck. */
.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--focus-ring), 0 0 8px 2px var(--focus-ring);
}

.btn--primary { --btn-bg: var(--navy); }
.btn--accent  { --btn-bg: var(--accent-flaeche); --btn-fg: var(--navy); }
.btn--danger  { --btn-bg: var(--error); }
/* Der helle Knopf des Themes (.btn.white) traegt keinen Rand, weil er dort
   nur auf farbigem Grund vorkommt. Auf unserer weissen Flaeche braucht er
   eine Kante, sonst verschwindet "Abbrechen" neben "Entfernen". Der Ring
   nimmt deshalb Navy statt der eigenen (weissen) Flaechenfarbe. */
.btn--outline {
  --btn-bg: var(--bg);
  --btn-fg: var(--text);
  --btn-ring-color: var(--navy);
  border: 1px solid var(--border);
}
.btn--outline:hover { border-color: var(--navy); }

.btn-submit { width: 100%; margin-top: 0.5rem; }
.btn-submit[disabled] {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}
/* Ein gesperrter Knopf darf keinen Ring zeigen: der Ring ist die Zusage,
   dass hier etwas passiert. */
.btn:disabled::after,
.btn:disabled:hover::after { opacity: 0; }
.btn:disabled:active { transform: none; }

/* Groessenstufen wie im Theme: erst nur die Schrift, dann Polsterung und
   Mindesthoehe, zuletzt auch der Ring. Die Werte stehen auf .btn statt auf
   :root, damit .btn--sm (css/admin.css, spaeter geladen) sie ueberschreiben
   kann, ohne jede Media-Query zu wiederholen. */
@media (max-width: 1339px) { .btn { --btn-text: 20px; } }
@media (max-width: 999px) {
  .btn { --btn-text: 18px; --btn-padding: 14px 20px; --btn-size: 52px; }
}
@media (max-width: 767px) {
  .btn { --btn-padding: 12px 16px; --btn-size: 44px; --btn-ring: 4px; }
}

.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;
}
/* Das Piktogramm erbt die Farbe der Kachel über .pikto--text: Erfolg in der
   Akzentfarbe, Fehler im Fehlerrot. Ein Zustandszeichen darf die Zustands-
   farbe tragen, das ist der eine Fall, in dem die Bibliotheksfarbe weicht. */
.success-icon { background: var(--color-light-green); color: var(--accent); }
.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;
}
.pdf-block { margin-top: 1.5rem; }
.pdf-hint {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* ---------- Empfehlung zur Serviceseite (Variante A, 09/2026) ----------
   Unter dem PDF-Download und bewusst nachrangig: Textlink statt Knopf, damit
   der PDF-Download die einzige deutliche Handlungsaufforderung bleibt. */
.empfehlung {
  margin-top: 2rem;
  padding: 1.125rem 1.25rem;
  background: var(--bg-alt);
  border-radius: var(--radius);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  text-align: left;
}
.empfehlung[hidden] { display: none; }
.empfehlung__bild { flex: none; color: var(--accent); }
.empfehlung__titel {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.25rem;
  color: var(--navy);
}
.empfehlung__text {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.625rem;
  color: var(--text-muted);
}
.empfehlung__link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.empfehlung__link:hover { color: var(--accent-hover); }
.empfehlung__link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-radius: 2px;
}
.empfehlung__tab {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: 0.35rem;
}
/* Absprung zur Wahlseite: eine Zeile unter der Empfehlung, gleicher Linkstil. */
.wahlseite {
  margin: 1.25rem 0 0;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.wahlseite__text { margin-right: 0.35rem; }
@media (max-width: 480px) {
  .empfehlung { flex-direction: column; gap: 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(--warn);
}
#begruendung-count {
  color: var(--warn);
  font-weight: 600;
}

/* ---------- 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) ====== */
/* Bild vor der Überschrift: Der Schritt ist freiwillig und kommt nach dem
   eigentlichen Abschluss. Ein Brief-Piktogramm nennt den Zweck, bevor der
   erste Satz gelesen ist — und hilft, ihn nicht als weitere Pflicht zu
   lesen. */
.schritt-bild { margin: 0.75rem 0 0.9rem; }
.schritt-bild .pikto { color: var(--accent); }

.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; }
/* „Diese Angabe fehlt noch" ist ein Hinweis, keine Warnung: der gesamte
   Stammdaten-Schritt ist freiwillig. Deshalb seit 27.08.2026 im Blau-System
   und NICHT im Warnrot — Rot ist hier für --invalid reserviert, und beide
   Zustände können am selben Feld auftreten (siehe .sd-field--missing unten). */
.sd-missing {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--navy);
  background: var(--bg-alt);
  border: 1px solid var(--navy-light);
  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='%23003366' 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.
   Blau, nicht rot: die Regel direkt darunter markiert die ungültige Eingabe,
   und beide können am selben Feld greifen. Zwei Rottöne wären dort nicht mehr
   auseinanderzuhalten. */
.sd-field--missing .sd-input {
  border-color: var(--navy-light);
  background-color: var(--color-soft-blue);
}
/* 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 ist die letzte Handlung im Ablauf und darf hervorstechen.
   Der frühere grüne Schein (rgba(86,189,102,…)) war ein Rest aus dem
   Farbstand vor dem 27.08.2026 und hat den Wechsel auf Navy/Blau überlebt.
   Die Hervorhebung liegt jetzt auf dem Ring des IHK-Knopfes: er steht hier
   dauerhaft offen, statt erst beim Überfahren aufzugehen. */
/* Auf schmalen Schirmen bricht die Beschriftung in zwei Zeilen. Ohne die
   Ausrichtung stehen sie linksbündig im Knopf, und er wirkt verrutscht
   (Rückmeldung IHK, 30.09.2026).
   Die volle Breite stand bis 02.10.2026 als style-Attribut im Markup. Die CSP
   (style-src 'self') verwirft Inline-Styles, der Knopf war deshalb nur so
   breit wie sein Text und stand am Desktop links im Block. */
.pdf-cta { width: 100%; text-align: center; }
.pdf-cta::after {
  box-shadow: 0 0 0 var(--btn-ring) var(--btn-ring-color);
  opacity: 0.22;
}
.pdf-cta:hover::after { opacity: 0.42; }

/* ============================================
   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);
}

/* Abweichung vom hinterlegten Stand (07.09.2026, Rueckmeldung aus dem
   Tokentest). Eine geaenderte oder ergaenzte Karte traegt den Aktionston
   #2C62E8 am linken Rand, eine hinterlegte das Navy der Marke. Kein eigener
   Farbwert und keine Flaeche in Rot: Es ist eine Auszeichnung, keine Warnung.
   Steht NACH .branche--hb, damit es dort gewinnt; die Regel gilt fuer Haupt-
   und Nebenbranchen gleichermassen.

   Nur der Rand, keine Flaeche: Die Hauptbranchen-Karte traegt ihre eigene
   Fuellung (#EDF3FA), und faerbte man geaenderte Karten zusaetzlich ein,
   saehen Haupt- und Nebenbranche gleich aus. Die Hierarchie der Karten muss
   die Kennzeichnung ueberleben. */
.branche--geaendert {
  border-color: var(--accent);
  border-left: 4px solid var(--accent);
}

/* Wirtschaftszweig als Bild — nur auf der Hauptbranche.
   Auf den Nebenbranchen stünden fünf Bilder untereinander, die alle ungefähr
   „Wirtschaft" sagen; hier trägt es eine Aussage („Sie sind ein Bauunter-
   nehmen"). Das Zeichen kommt aus js/wz-abschnitt.js und ist ein eigenes
   Grid-Feld links, damit es dem Namen keine Breite wegnimmt — genau der
   Fehler, den die Code-Kachel vor dem 10.08.2026 gemacht hat. */
.branche--mitbild { grid-template-columns: auto minmax(0, 1fr) auto; }
.branche__bild {
  width: 38px; height: 38px;
  color: var(--accent);
  opacity: 0.9;
}
/* Bestätigungs-Aufblitzen nach einer Branchenänderung. War grün-auf-grün, ist
   seit 27.08.2026 blau-auf-blau (IHK, Punkt 3): Balken links #2C62E8, Fläche
   #EDF3FA. Die Fläche entspricht damit dem Ruhezustand der Karte — der Effekt
   trägt jetzt allein über die Randfarbe. So von der IHK vorgegeben. */
.branche--frisch { animation: brancheFrisch 1.2s ease both; }
@keyframes brancheFrisch {
  0%   { background: var(--color-light-green); border-color: var(--accent); }
  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; }
/* Bleibt bewusst rot, während der Rest der Oberfläche auf Blau umgestellt ist:
   der Knopf entfernt eine Branche. Angeglichen an den Warnton #D54048 aus
   Punkt 12/13 (IHK, 27.08.2026). */
.branche__aktion--weg:hover { color: var(--warn); border-color: var(--warn); background: var(--warn-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; }
/* Kleiner als die 32-px-Untergrenze für freistehende Piktogramme, weil die
   Lupe hier neben einer Überschrift steht und von ihr getragen wird. Der
   Sheet-Kopf muss flach bleiben: Auf dem Handy nimmt die Tastatur den halben
   Schirm, jeder Pixel hier fehlt der Trefferliste. */
.sheet__bild { width: 26px; height: 26px; }
@media (max-width: 360px) { .sheet__bild { display: none; } }
.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;
  }
  /* Das Zweig-Bild bleibt NEBEN dem Text, auch wenn die Knöpfe umbrechen.
     Über dem Namen würde es eine dritte Zeile aufmachen und die Karte auf
     schmalen Schirmen unnötig hoch werden lassen. */
  .branche--mitbild { grid-template-columns: auto minmax(0, 1fr); }
  .branche--mitbild .branche__aktionen { grid-column: 1 / -1; }
  .branche__bild { width: 32px; height: 32px; }
}

/* Unter 360 px weicht das Bild. Es kostet dort rund 44 px Breite, und genau
   die fehlen dem Branchennamen — der Fehler, den die Karte am 10.08.2026 schon
   einmal hatte („Tätigkeiten der Großhandelsvermittlung von Baustoffen…" brach
   in acht Zeilen). Der Wirtschaftszweig ist eine Zugabe; der Name ist die
   Information. Dieselbe Grenze wie beim Sheet-Kopf und den Knopf-Symbolen. */
@media (max-width: 359px) {
  .branche__bild { display: none; }
  .branche--mitbild { grid-template-columns: minmax(0, 1fr); }
  .branche--mitbild .branche__aktionen { grid-column: auto; }
  /* 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; }

/* Gemeinsame Gestaltung der Mitgliederschritte */
body.member-flow, .member-flow #layout:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.member-flow #layout:not([hidden]) { flex: 1; }
.member-flow .shell { flex: 1 0 auto; }
.member-flow .site-header,
.member-flow .site-footer { flex-shrink: 0; }
.member-flow .header-eyebrow { text-transform: none; letter-spacing: normal; }
.self-service .pflicht-legende {
  font-size: var(--text-sm);
  margin: 0 0 1rem;
}
.self-service .lede { margin-bottom: 1rem; }
.ss-explainer {
  list-style: none;
  margin: 0 0 2rem;
  padding: 1rem 1.125rem;
  background: var(--bg-alt);
  border-radius: 8px;
  color: var(--text);
  line-height: 1.5;
}
.ss-explainer li + li { margin-top: 0.6rem; }
.ss-explainer strong { font-weight: 700; }
.ss-pruefliste {
  margin-top: 1rem;
  padding: 1rem 1.125rem;
  background: var(--bg-alt);
  border-radius: 8px;
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.ss-pruefliste p { margin: 0; }
.ss-pruefliste__titel { font-weight: 700; }
.ss-pruefliste ul { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; }
.ss-pruefliste li + li { margin-top: 0.4rem; }
.ss-pruefliste strong { font-weight: 700; }
.member-flow .field-hint,
.member-flow .datenschutz__text,
.member-flow .pdf-hint,
.member-flow .sd-trust,
.member-flow .suggest__hint,
.member-flow .site-footer .lock { font-size: var(--text-sm); }
.member-flow :is(.sd-input, .reason__input, .suggest__input):focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}
.member-flow .site-footer { padding-inline: 0; }
.member-flow .site-footer .inner { padding-inline: 1.5rem; }
@media (max-width: 600px) {
  .member-flow .site-footer .inner { padding-inline: 1rem; }
}

@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;
}
/* Nachsatz: der weiterhin hinterlegte Stand. Bewusst kleiner und mit Abstand
   abgesetzt — im Tokentest wurde genau dieser Satz als Hauptaussage gelesen,
   solange er im selben Absatz stand (07.09.2026). */
.meldung__nachsatz {
  margin: 0.5rem 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-muted);
  opacity: 0.85;
  overflow-wrap: anywhere;
}

/* Die eigene Meldung bei „nicht übernommen": abgesetzt vom Hinweis darüber,
   Bezeichnung links, Wert rechts; schmal untereinander. */
.meldung__gemeldet {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}
.meldung__gemeldet[hidden] { display: none; }
.meldung__gemeldet-titel {
  margin: 0 0 0.375rem;
  font-weight: 700;
  font-size: 0.9rem;
}
.meldung__gemeldet-liste {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.meldung__gemeldet-liste dt { color: var(--text-muted); }
.meldung__gemeldet-liste dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .meldung__gemeldet-liste { grid-template-columns: 1fr; gap: 0.125rem; }
  .meldung__gemeldet-liste dt:empty { display: none; }
  .meldung__gemeldet-liste dd { margin-bottom: 0.25rem; }
}

.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); }

.member-flow .block--firma { border: 0; padding: 0; }
.member-flow .block__head {
  font-size: var(--text-h3);
  font-weight: 400;
  margin-bottom: 0.75rem;
}
.member-flow .success-title { font-weight: 400; }
.member-flow .pill { text-transform: none; letter-spacing: normal; }
@media (max-width: 600px) {
  .member-flow .block__head { font-size: 1.375rem; }
}

/* Sichtbarer Hinweis auf noch nicht freigegebene Texte (Prototyp IHK Köln). */
.entwurf-hinweis {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.6rem;
  border: 1px dashed var(--warn-text);
  border-radius: var(--radius);
  color: var(--warn-text);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Hinweis auf der Testinstanz (TEST_MODE). */
.test-banner {
  margin: 0;
  padding: 0.5rem 1rem;
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
}

.test-vorschau {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px dashed var(--warn-text);
  border-radius: var(--radius);
  text-align: left;
}
.test-vorschau h2 { margin: 0 0 0.75rem; font-size: var(--text-base, 1rem); }
.test-vorschau dl { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0.25rem 1rem; margin: 0; }
.test-vorschau dt { font-weight: 700; }
.test-vorschau dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .test-vorschau dl { grid-template-columns: 1fr; } .test-vorschau dd { margin-bottom: 0.5rem; } }