:root {
  /* Tokens wie Dashboard V2 / higio-design-system – gleiche Palette, kein Gold. */
  --primary: #184B3E;
  --primary-dark: #10382E;
  --green: #4F9D69;
  --green-soft: #EAF3ED;
  --green-line: #B7DDCD;
  --white: #fff;
  --bg: #F6F8F7;
  --line: #DCE5DF;
  --line-soft: #EEF3F1;
  --ink: #17231F;
  --muted: #5E6D67;
  --warn: #7E6419;
  --warn-soft: #FBF4DD;
  --info: #1D4E8A;
  --info-soft: #E7EEFB;
  --danger: #B3402E;
  --radius: 20px;
  --radius-sm: 12px;
  /* Leichte gruene Schattierung – Landingpage-Charakter, nicht Dashboard-flach. */
  --shadow: 0 18px 50px rgba(24, 75, 62, .09);
  --shadow-soft: 0 8px 26px rgba(24, 75, 62, .05);
  --shadow-lift: 0 14px 30px rgba(24, 75, 62, .11);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  min-width: 0;
  /* Bewusst KEIN overflow-x hier: zusammen mit dem overflow-x der html-Regel
     darueber macht das den body zum eigenen Scroll-Container und setzt damit
     jedes position:sticky im body ausser Kraft - der klebende Kopf samt
     Sprachwahl scrollte dadurch einfach weg. Das html-Element allein faengt
     seitliches Ueberlaufen weiterhin ab (bei 1280/900/600 px nachgemessen:
     kein Quer-Scrollbalken). */
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--green-soft); color: var(--primary); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, select { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 96px 0; }
.section-tint { background: var(--bg); }
.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;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  transform: translateY(-160%); padding: 12px 18px; border-radius: 10px;
  color: var(--white); background: var(--primary); font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

/* Desktop-Sidebar (ab 901px, wie Dashboard V2). Darunter bleibt der Kopf. */
.landing-shell { min-width: 0; }
.landing-nav-desktop { display: none; }
.landing-main { min-width: 0; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.header-inner { min-height: 64px; display: flex; align-items: center; gap: 28px; }
.wordmark {
  display: inline-flex; align-items: baseline; color: var(--primary);
  font-size: 26px; font-weight: 800; line-height: 1; text-decoration: none;
  letter-spacing: -.04em;
}
.leaf-i { position: relative; display: inline-block; }
.leaf-i svg {
  position: absolute; width: 10px; height: 10px; left: 48%; top: -4px;
  transform: translateX(-50%) rotate(42deg); overflow: visible;
}
.leaf-i svg path:first-child { fill: var(--green); stroke: none; }
.leaf-i svg path:last-child { fill: none; stroke: var(--primary); stroke-width: .7; opacity: .5; }
.header-nav { display: flex; gap: 24px; margin-left: auto; }
.header-nav a {
  color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none;
  transition: color .15s ease;
}
.header-nav a:hover { color: var(--ink); }
/* Ein Sprachmenue fuer alle Breakpoints – fest oben rechts. */
.locale-fixed {
  position: fixed;
  top: 12px;
  inset-inline-end: 16px;
  z-index: 60;
}
.locale-fixed select {
  min-height: 40px;
  min-width: 4.25rem;
  padding: 0 30px 0 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: var(--white);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.locale-fixed select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (min-width: 901px) {
  .site-header { display: none; }
  .landing-shell {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    background: var(--bg);
  }
  /* Kompakte Sidebar: nur so hoch wie der Inhalt, klebt oben –
     kein 100vh-Streifen, der laenger wirkt als noetig. */
  .landing-nav-desktop {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 0;
    width: 200px;
    flex-shrink: 0;
    margin: 16px 0 24px 16px;
    padding: 16px 10px;
    box-sizing: border-box;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
  }
  .landing-nav-desktop .wordmark {
    margin: 0 6px 12px;
    font-size: 22px;
  }
  .landing-nav-link {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    transition: color .15s ease, background-color .15s ease;
  }
  .landing-nav-link:hover { color: var(--ink); background: var(--bg); }
  .landing-nav-link.is-active {
    color: var(--primary);
    font-weight: 700;
    background: var(--green-soft);
  }
  .landing-nav-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .landing-nav-sep {
    height: 1px;
    background: var(--line);
    margin: 8px 6px;
  }
  .landing-nav-cta {
    width: 100%;
    min-height: 40px;
    margin-top: 12px;
    font-size: 13.5px;
    box-sizing: border-box;
  }
  .landing-main {
    flex: 1;
    min-width: 0;
    background: var(--bg);
  }
  .landing-main .container { width: min(1080px, calc(100% - 40px)); }
  /* Platz rechts, damit der feste Sprachwahl-Knopf nichts verdeckt. */
  .hero-copy { padding-inline-end: 4rem; }
}

@media (max-width: 900px) {
  /* Neben dem sticky Kopf: Sprachwahl sitzt in der Kopfzeile-Ecke. */
  .site-header .header-inner { padding-inline-end: 5.5rem; }
}

@media (hover: none) {
  .landing-nav-link:hover { background: transparent; color: var(--muted); }
  .landing-nav-link.is-active:hover { background: var(--green-soft); color: var(--primary); }
}

.hero {
  padding: 56px 0 40px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(79, 157, 105, .10), transparent 42%),
    linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
}
.hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 48px; }
.eyebrow {
  display: inline-block; margin-bottom: 12px; color: var(--primary);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
h1, h2, h3 { color: var(--primary); line-height: 1.15; letter-spacing: -.02em; }
h1 {
  margin: 0;
  max-width: 640px;
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 800;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}
h2 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.hero-subtitle { margin: 16px 0 20px; color: var(--muted); font-size: 18px; font-weight: 500; line-height: 1.55; max-width: 36em; }
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 28px; }
.check-list li::before {
  content: "✓"; position: absolute; top: 0; left: 0; color: var(--green); font-weight: 800;
}
.hero-checks { display: grid; gap: 8px; margin-bottom: 24px; font-weight: 600; font-size: 15px; }
.button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border: 0; border-radius: 999px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.button:hover { transform: none; }
.button:active { transform: none; }
.button:focus-visible, .language-button:focus-visible, a:focus-visible, select:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.button-primary { color: var(--white); background: var(--primary); box-shadow: 0 10px 24px rgba(24, 75, 62, .18); }
.button-primary:hover { background: var(--primary-dark); box-shadow: 0 14px 28px rgba(24, 75, 62, .24); }
.hero-cta { margin-bottom: 18px; }
.price-card {
  max-width: 420px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
  box-shadow: var(--shadow-soft);
}
.price-card > div:first-child { display: flex; flex-direction: column; }
.price-card strong { color: var(--primary); font-size: 22px; line-height: 1.2; font-weight: 800; }
.price-card > div:first-child span { color: var(--muted); font-size: 12px; }
.price-details { display: flex; flex-direction: column; padding-left: 20px; border-left: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.price-details span:last-child { color: var(--primary); font-weight: 700; }

.hero-visual { position: relative; min-width: 0; padding: 0; }
.hero-visual picture {
  display: block; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--white);
}
.hero-visual img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* Kein schwebendes Siegel mehr auf dem Hero-Bild (V2: keine Overlays auf Medien). */
.quality-seal { display: none; }

.sector-wrap { margin-top: 8px; }
.sector-card {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 24px 32px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); box-shadow: var(--shadow);
}
.sector-card p { max-width: 800px; margin: 0; color: var(--primary); font-size: 17px; font-weight: 700; text-align: center; }
.icon-box {
  flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--radius-sm); color: var(--primary); background: var(--green-soft);
  border: 1px solid var(--green-line);
}
.icon-box svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.section-heading { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-heading p { margin: 0; color: var(--muted); font-size: 17px; }
.section-title-link { color: inherit; text-decoration: none; }
.section-title-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.section-title-link:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 2px; }

.language-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.language-button {
  min-width: 0; min-height: 64px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center; gap: 12px; padding: 12px 16px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); color: var(--primary); background: var(--white);
  box-shadow: var(--shadow-soft); cursor: pointer; text-align: left;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.language-button:hover { transform: none; border-color: var(--green-line); background: var(--green-soft); box-shadow: var(--shadow-lift); }
.language-button:active { transform: none; }
.language-button[aria-busy="true"] { opacity: .65; cursor: wait; }
.language-flag { font-size: 22px; line-height: 1; }
.language-name { min-width: 0; overflow: hidden; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.language-arrow { color: var(--green); font-size: 20px; text-align: right; transition: none; }
.language-button:hover .language-arrow { transform: none; }

/* --- Kompakte Sprachauswahl fuer schmale Bildschirme ---------------------
   Statt acht gestapelter Kacheln (ueber 500px hoch) ein aufklappbares Menue.
   Bewusst KEIN natives <select>: die Flaggen sind SVGs, und in <option> laesst
   sich kein Markup unterbringen. Flaggen-Emoji waeren die Alternative, werden
   unter Windows aber nicht als Flagge dargestellt (nur Buchstabenpaare).
   Auf Desktop bleibt das Raster; die Umschaltung steht in der 600px-Abfrage. */
.language-select { position: relative; display: none; }
.language-select-trigger {
  width: 100%; min-height: 56px; display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 12px;
  padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  color: var(--primary); background: var(--white);
  box-shadow: var(--shadow-soft); cursor: pointer; text-align: left;
}
.language-select-trigger[aria-expanded="true"] { border-color: var(--green-line); background: var(--green-soft); }
.language-select-chevron {
  width: 100%; height: auto; fill: none; stroke: var(--green); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease;
}
.language-select-trigger[aria-expanded="true"] .language-select-chevron { transform: rotate(180deg); }
.language-select-list {
  position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 30;
  max-height: 320px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
  box-shadow: var(--shadow-soft);
}
.language-option {
  width: 100%; min-height: 44px; display: grid;
  grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 8px 12px; border: 0; border-radius: 10px; background: none;
  color: var(--primary); cursor: pointer; text-align: left; font-weight: 600;
}
.language-option:hover, .language-option:focus-visible { background: var(--green-soft); }
.language-option[aria-current="true"] { font-weight: 700; background: var(--green-soft); }
.language-select-trigger[aria-busy="true"], .language-option[aria-busy="true"] { opacity: .65; cursor: wait; }
html[dir="rtl"] .language-select-trigger, html[dir="rtl"] .language-option { text-align: right; }

.session-error { margin: 18px auto 0; color: #9e382b; text-align: center; font-weight: 650; }

.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.benefit-card, .info-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  min-width: 0; box-shadow: var(--shadow-soft);
}
.benefit-card { padding: 20px; }
.benefit-card:hover, .info-card:hover { transform: none; border-color: var(--green-line); background: var(--green-soft); box-shadow: var(--shadow-lift); }
.benefit-card h3, .benefit-card p, .info-card p {
  margin: 0; overflow-wrap: anywhere; word-break: break-word;
}
.benefit-card p, .info-card p { color: var(--muted); font-size: 14px; }
.benefit-card h3 { margin-bottom: 8px; }
.benefit-icon { margin-bottom: 20px; }
/* Kacheln sind jetzt anklickbare <button>-Elemente (Popup mit Detailtext) -
   Browser-Vorgaben fuer Buttons zuruecksetzen, Optik bleibt wie zuvor. */
.benefit-card {
  display: block; width: 100%; margin: 0; appearance: none; -webkit-appearance: none;
  font: inherit; color: inherit; text-align: start; cursor: pointer;
}
.benefit-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.benefit-more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 12px;
  color: var(--primary); font-size: 13px; font-weight: 700;
}
.benefit-more svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: none; }
.benefit-card:hover .benefit-more svg { transform: none; }

/* Popup mit Detailerklaerung je Kachel */
.benefit-modal-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(23, 35, 31, .45);
}
.benefit-modal-overlay[hidden] { display: none; }
.benefit-modal {
  position: relative; width: min(560px, 100%); max-height: min(88vh, 720px); overflow-y: auto;
  padding: 28px 24px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--white); box-shadow: var(--shadow);
}
.benefit-modal-close {
  position: absolute; top: 14px; inset-inline-end: 14px; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1.5px solid var(--line); border-radius: 999px; color: var(--primary); background: var(--white); cursor: pointer;
}
.benefit-modal-close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.benefit-modal-close:hover { background: var(--green-soft); border-color: var(--green-line); }
.benefit-modal-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.benefit-modal .icon-box { margin-bottom: 16px; }
.benefit-modal h3 { margin: 0 0 12px; padding-inline-end: 40px; font-size: 20px; }
.benefit-modal p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.benefit-modal-mockup {
  margin-top: 20px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); overflow: hidden;
}
.benefit-modal-mockup[hidden] { display: none; }
.bmm-shell { display: flex; align-items: stretch; min-height: 220px; }
.bmm-nav {
  width: 112px; flex-shrink: 0; padding: 12px 8px; border-inline-end: 1px solid var(--line); background: var(--white);
}
.bmm-wordmark { font-weight: 800; color: var(--primary); font-size: 15px; margin: 0 6px 10px; letter-spacing: -.02em; }
.bmm-nav-item {
  padding: 6px 10px; border-radius: 10px; margin-bottom: 3px; font-size: 11px; font-weight: 500; color: var(--muted);
}
.bmm-nav-item.is-active { font-weight: 700; color: var(--primary); background: var(--green-soft); }
.bmm-nav-sep { height: 1px; background: var(--line); margin: 8px 6px; }
.bmm-main { flex: 1; min-width: 0; padding: 12px 12px 14px; }
.bmm-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.bmm-titel { font-weight: 800; color: var(--primary); font-size: 14px; letter-spacing: -.02em; }
.bmm-hint { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.4; max-width: 22em; }
.bmm-add {
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 700;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
}
.bmm-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.bmm-tab {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border-radius: 999px; font-size: 10px; font-weight: 600;
  border: 1.5px solid var(--line); background: var(--white); color: var(--primary);
}
.bmm-tab.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.bmm-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.bmm-table th {
  text-align: start; color: var(--muted); font-size: 9px; font-weight: 600;
  padding: 5px 6px; border-bottom: 1px solid var(--line);
}
.bmm-table td { padding: 8px 6px; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.bmm-table tr:nth-child(odd) td { background: var(--green-soft); }
.bmm-name { font-weight: 600; color: var(--primary); }
.bmm-email { font-size: 9px; color: var(--muted); margin-top: 2px; }
.bmm-pill {
  display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 600; white-space: nowrap;
}
.bmm-pill-green { background: var(--green-soft); color: var(--primary); }
.bmm-pill-warn { background: var(--warn-soft); color: var(--warn); }
.bmm-pill-blue { background: var(--info-soft); color: var(--info); }
.bmm-nachweise {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "erst hyg" "folge hyg"; gap: 6px 8px; min-width: 120px;
}
.bmm-punkt { min-width: 0; }
.bmm-punkt:nth-child(1) { grid-area: erst; }
.bmm-punkt:nth-child(2) { grid-area: folge; }
.bmm-punkt:nth-child(3) { grid-area: hyg; }
.bmm-kurz { display: block; color: var(--muted); font-size: 8px; font-weight: 600; margin-bottom: 2px; }
.bmm-wert { color: var(--ink); line-height: 1.3; }
.bmm-aktionen { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.bmm-action-btn {
  display: inline-block; padding: 4px 8px; border-radius: 999px; border: 1.5px solid var(--line);
  color: var(--muted); font-size: 9px; font-weight: 700;
}
.bmm-kebab {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; min-height: 22px;
  padding: 0 5px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 700;
}
.bmm-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 12px 12px 0; color: var(--primary);
  font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.bmm-link svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bmm-link:hover { opacity: .85; }
.bmm-note { margin: 10px 12px 12px; color: var(--muted); font-size: 11.5px; font-style: italic; }
@media (max-width: 520px) {
  .bmm-nav { display: none; }
  .bmm-table .bmm-col-hide { display: none; }
}

/* Nachweis-Vorschau im Popup - dieselbe Gliederung wie das echte PDF
   (server/lib/certificatePdf.js): linker Akzentbalken, gesperrter Titel,
   Trennlinie, Teilnehmerblock, Label-Wert-Zeilen, Echtheitsspalte.
   Flach gehalten (1px-Linien, keine Schatten) wie im Design-System. */
.bcm-doc {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
/* Zweifarbiger Balken wie am linken Rand des PDFs. */
.bcm-doc::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 7px;
  background: linear-gradient(180deg, var(--primary) 0 78%, var(--green) 78% 100%);
}
.bcm-doc-inner { padding: 14px 14px 14px 21px; }
.bcm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.bcm-wordmark { font-size: 18px; font-weight: 800; color: var(--primary); letter-spacing: -.6px; }
.bcm-wordmark .leaf-i { position: relative; display: inline-block; }
.bcm-wordmark .leaf-i svg { position: absolute; left: 50%; top: -.15em; width: .42em; height: .42em; transform: translateX(-50%); fill: var(--green); }
.bcm-shield { flex: 0 0 auto; }
.bcm-title {
  margin: 0 0 3px; color: var(--primary); font-size: 16px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.1;
  /* "SCHULUNGSNACHWEIS" ist ein langes Wort in einer teils sehr schmalen
     Box. Groesse mit Reserve gewaehlt und gemessen; der Umbruch ist nur
     das Sicherheitsnetz, falls die Box unerwartet noch enger wird. */
  overflow-wrap: anywhere;
}
.bcm-sub {
  margin: 0; color: var(--muted); font-size: 7.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.bcm-rule { margin: 9px 0 10px; height: 1px; width: 82%; background: var(--line); }
.bcm-course { color: var(--primary); font-size: 12.5px; font-weight: 700; }
.bcm-label {
  display: block; margin-top: 12px; color: var(--muted); font-size: 7.5px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.bcm-name { display: block; margin-top: 4px; color: var(--primary); font-size: 17px; font-weight: 800; line-height: 1.2; }
/* Seitenspalte fest, Hauptspalte bekommt den Rest: mit "auto" bestimmte der
   laengste Text der Echtheitsspalte die Aufteilung, wodurch Werte wie
   "Bestanden" in der Datenspalte mitten im Wort umbrachen. minmax(0,1fr)
   statt 1fr, damit die Hauptspalte auch wirklich schrumpfen darf. */
.bcm-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 104px;
  gap: 12px; margin-top: 12px;
}
.bcm-col-main { min-width: 0; }
.bcm-legal-lead { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.4; }
.bcm-legal { margin: 3px 0 0; color: var(--ink); font-size: 8.5px; font-weight: 700; overflow-wrap: anywhere; }
.bcm-rows { margin: 8px 0 0; }
.bcm-rows > div {
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  align-items: baseline; gap: 8px;
  padding: 5px 0; border-top: 1px solid var(--line-soft);
}
.bcm-rows > div:last-child { border-bottom: 1px solid var(--line-soft); }
.bcm-rows dt {
  color: var(--muted); font-size: 7px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  /* "SCHULUNGSNACHWEIS-NR." ist laenger als seine Spur, sobald die Box
     schmal wird. Ohne Umbruch lief das Label unter den Wert daneben -
     im schmalen Popup sah das aus wie ineinander gedruckter Text. */
  overflow-wrap: anywhere;
}
.bcm-rows dd { margin: 0; min-width: 0; color: var(--ink); font-size: 9px; font-weight: 600; overflow-wrap: anywhere; }
.bcm-col-side {
  flex: 0 0 auto; padding-inline-start: 12px; border-inline-start: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.bcm-verify-title { color: var(--primary); font-size: 7.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.bcm-verify-text { color: var(--muted); font-size: 8px; line-height: 1.4; max-width: 92px; }
.bcm-qr { margin-top: 2px; line-height: 0; }
.bcm-qr svg { display: block; width: 62px; height: 62px; }
/* Sehr schmal: die Echtheitsspalte rutscht unter die Daten statt zu quetschen,
   und der lange Titel bekommt eine Groesse, die in das schmalere Popup passt. */
@media (max-width: 480px) {
  .bcm-title { font-size: 13px; letter-spacing: .03em; }
}
@media (max-width: 420px) {
  .bcm-cols { grid-template-columns: 1fr; }
  .bcm-col-side {
    padding-inline-start: 0; border-inline-start: 0;
    padding-top: 10px; border-top: 1px solid var(--line);
  }
  .bcm-verify-text { max-width: none; }
}
#benefit-modal-mockup-dashboard[hidden],
#benefit-modal-mockup-certificate[hidden] { display: none; }

.business-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px;
  padding: 44px 48px; border-radius: var(--radius); color: var(--white); background: var(--primary);
  border: 1px solid var(--primary-dark);
}
.business-card h2 { margin-top: 16px; color: var(--white); }
.business-card p { max-width: 680px; margin: 0 0 18px; color: rgba(255,255,255,.78); font-size: 16px; }
.icon-box-light { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.inline-checks { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.inline-checks li { font-size: 14px; font-weight: 700; }
.inline-checks li::before { color: #91d09d; }
.business-howto-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 18px;
  color: #fff; font-weight: 700; font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px;
}
.business-howto-link svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.business-howto-link:hover { opacity: .85; }
.button-light { min-width: 180px; color: var(--primary); background: #fff; box-shadow: var(--shadow-soft); }
.button-light:hover { background: var(--green-soft); box-shadow: var(--shadow-lift); }
.business-card-cta {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  min-width: min(100%, 280px); justify-self: end;
}
.business-card-cta .button-light { width: 100%; text-align: center; }
.business-promo {
  margin: 0; padding: 10px 14px; max-width: 100%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-sm); font-weight: 700; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.business-promo svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.flyer-promo {
  margin: 4px 0 0; padding: 14px 14px 12px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-sm);
}
.flyer-promo-label {
  display: block; margin: 0 0 8px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; color: rgba(255,255,255,.88);
}
.flyer-promo-row {
  display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap;
}
.flyer-promo-row input {
  flex: 1 1 140px; min-width: 0; min-height: 44px; padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  background: rgba(255,255,255,.95); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .04em;
}
.flyer-promo-row input::placeholder { color: rgba(24,75,62,.45); font-weight: 500; letter-spacing: 0; }
.flyer-promo-row input:focus {
  outline: none; border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}
.flyer-promo-submit {
  flex: 0 0 auto; min-width: 0; width: auto; padding-inline: 18px;
}
.flyer-promo-hint {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.45;
  color: rgba(255,255,255,.72); font-weight: 500;
}
.flyer-promo-error {
  margin: 8px 0 0; font-size: 13px; line-height: 1.4;
  color: #ffd4d4; font-weight: 700;
}

.steps-group + .steps-group { margin-top: 48px; }
.steps-group-title {
  margin: 0 0 26px; text-align: center; color: var(--primary);
  font-size: 18px; font-weight: 800;
}
/* Die Zwischenueberschrift ist ein Link auf die passende Howto-Seite -
   dezent unterstrichen, damit die Grafik ruhig bleibt. */
.steps-group-link {
  display: inline-flex; align-items: center; gap: 6px; color: inherit;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(24, 75, 62, .28); text-decoration-thickness: 1.5px;
}
.steps-group-link svg {
  flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  /* Bewusst KEINE transition auf transform: das dir-Attribut wird erst nach
     dem ersten Rendern gesetzt (applyTranslations in landing.js), und eine
     laufende transform-Transition haelt dann den alten Wert fest - die
     RTL-Spiegelung unten kam so nicht an. Die Hover-Bewegung laeuft deshalb
     ueber margin statt ueber transform. */
  transition: margin-inline-start .18s ease;
}
.steps-group-link:hover { text-decoration-color: var(--primary); }
.steps-group-link:hover svg { margin-inline-start: 3px; }
/* Im RTL-Layout zeigt der Pfeil in Leserichtung, also nach links. */
[dir="rtl"] .steps-group-link svg,
[dir="rtl"] .business-howto-link svg { transform: scaleX(-1); }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.steps::before { content: ""; position: absolute; top: 33px; left: 16.66%; right: 16.66%; height: 2px; background: var(--line); }
.how-cta-mobile { display: none; }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.step-number { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 16px; border: 4px solid var(--bg); border-radius: 50%; color: #fff; background: var(--primary); font-size: 18px; font-weight: 800; }
.step h3 { font-size: 17px; }
.step p { max-width: 250px; margin: 0; color: var(--muted); font-size: 14px; }

.legal-card {
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 48px;
  padding: 44px 48px; border-radius: var(--radius); color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary-dark);
}
.eyebrow-light { color: #a8dab4; letter-spacing: .02em; text-transform: none; }
.legal-card h2 { color: #fff; }
.legal-card p { margin: 0; color: rgba(255,255,255,.76); }
.legal-refs { margin-top: 15px !important; color: #fff !important; font-weight: 800; }
/* Die Rechtsgrundlagen sind Links auf die /wissen-Seiten - dezent unterstrichen,
   damit der Kasten optisch ruhig bleibt, aber als klickbar erkennbar ist. */
.legal-refs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); }
.legal-refs a:hover { text-decoration-color: #fff; }
.legal-more { margin-top: 14px; margin-bottom: 0; }
.legal-checks { display: grid; gap: 16px; }
.legal-checks li { font-weight: 700; }
.legal-checks li::before { color: #9ed5aa; }

/* Herkunft des Namens unter der Sprachauswahl. Bewusst ruhig und schmal -
   eine Fussnote zur Marke, kein Verkaufsargument; sie darf den Weg zur
   Sprachauswahl nicht verstellen. */
.name-origin {
  max-width: 620px; margin: 32px auto 0; padding: 16px 20px;
  background: var(--green-soft); border: 1px solid var(--green-line); border-radius: var(--radius-sm);
  color: var(--ink); font-size: 14.5px; line-height: 1.55; text-align: center;
}
.name-origin-label {
  display: block; margin-bottom: 6px; color: var(--primary);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.name-origin b { color: var(--primary); font-weight: 800; }
.name-origin em { font-style: italic; }

/* Eigener Kasten fuer den Wissensbereich - bewusst HELL (weiss) zwischen den
   beiden dunklen Karten (Unternehmen, Rechtssicher), damit nicht drei
   dunkle Bloecke direkt hintereinander stehen. Layout wie .business-card/
   .legal-card (Icon links, Text rechts), nur mit hellen statt weissen
   Textfarben, weil der Hintergrund selbst schon hell ist. */
.wissen-card {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 24px;
  padding: 36px 40px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--white); box-shadow: var(--shadow);
}
.wissen-card h2 { margin: 0 0 10px; }
.wissen-card p { margin: 0 0 16px; color: var(--muted); font-size: 16px; max-width: 640px; }
/* .legal-refs liefert das Grundlayout (Punkt-getrennte Links); die Farben
   dort sind aber fuer den dunklen Hintergrund der Rechtssicher-Karte gedacht
   (weiss) - hier auf dunkelgruen umgestellt. Gleiche Spezifitaet wie
   .legal-refs, gewinnt also durch die spaetere Position in der Datei. */
.wissen-refs { margin: 0 0 16px !important; font-weight: 700; color: var(--primary) !important; }
.wissen-refs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(24, 75, 62, .28); }
.wissen-refs a:hover { text-decoration-color: var(--primary); }
/* .business-howto-link ist fuer weissen Text auf dunklem Grund gedacht. */
.wissen-card-link { color: var(--primary); margin: 4px 0 0; }

.info-section { padding-top: 0; }
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.info-card { padding: 24px; }
.info-card .icon-box { width: 46px; height: 46px; margin-bottom: 22px; }
.info-card .icon-box svg { width: 22px; height: 22px; }

.site-footer { padding: 48px 0 24px; color: rgba(255,255,255,.72); background: var(--primary-dark); }
.footer-grid { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 36px; align-items: start; }
.wordmark-light { color: #fff; }
.wordmark-light .leaf-i svg path:last-child { stroke: #fff; }
.footer-grid p { margin: 12px 0 0; font-size: 13px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 9px 24px; }
.footer-nav a, .footer-mail { font-size: 13px; font-weight: 600; text-decoration: none; }
.footer-nav a:hover, .footer-mail:hover { color: #fff; text-decoration: underline; }
.copyright { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

html[dir="rtl"] .check-list li { padding-left: 0; padding-right: 28px; }
html[dir="rtl"] .check-list li::before { left: auto; right: 0; }
html[dir="rtl"] .language-button { text-align: right; }
html[dir="rtl"] .language-arrow { transform: rotate(180deg); text-align: left; }
html[dir="rtl"] .language-button:hover .language-arrow { transform: rotate(180deg); }

@media (max-width: 1020px) {
  .hero-grid { gap: 38px; }
  .language-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .section { padding: 76px 0; }
  .header-nav { display: none; }
  .header-inner { gap: 12px; }
  .hero { padding-top: 48px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 680px; }
  .hero-visual { max-width: 680px; }
  .sector-wrap { margin-top: 12px; }
  .business-card, .legal-card, .wissen-card { grid-template-columns: 1fr; gap: 32px; padding: 44px; }
  .business-card-cta { justify-self: start; min-width: 0; max-width: 100%; }
}

@media (max-width: 600px) {
  .container { width: min(100% - 28px, 1180px); }
  .section { padding: 64px 0; }
  .header-inner { min-height: 66px; }
  .wordmark { font-size: 26px; }
  .locale-fixed select { min-height: 42px; }
  .hero { padding: 38px 0 34px; }
  /* Bewusst den gewollten Zeilenumbruch nach „Lebensmittelhygiene-" behalten
     und die Schrift skalieren – kein Wortbruch mitten im Begriff. */
  h1 {
    font-size: clamp(26px, 7.6vw, 38px);
    line-height: 1.18;
    max-width: none;
  }
  h1 br { display: inline; }
  .hero-subtitle { font-size: 17px; }
  .hero-cta { width: 100%; }
  .price-card { grid-template-columns: 1fr; gap: 14px; }
  .price-details { padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .hero-visual { padding: 0; }
  .hero-visual picture { border-radius: var(--radius-sm); }
  .quality-seal { display: none; }
  .sector-card { align-items: flex-start; padding: 20px; }
  .sector-card p { font-size: 15px; text-align: left; }
  .section-heading { margin-bottom: 32px; text-align: left; }
  .section-heading h2 { font-size: 31px; }
  .benefit-grid, .info-grid { grid-template-columns: 1fr; }
  /* Auf dem Handy ersetzt das Aufklappmenue das Kachelraster - acht
     gestapelte Kacheln waeren hier ueber 500px hoch. */
  .language-grid { display: none; }
  .language-select { display: block; }
  /* Der Unternehmens-Kasten wandert ueber die Sprachauswahl: wer mobil auf
     der Seite landet, ist haeufiger ein Betrieb, der Plaetze fuer sein Team
     sucht, als jemand, der sofort selbst startet. Reines CSS - die
     DOM-Reihenfolge (und damit die Desktop-Ansicht) bleibt unveraendert. */
  .start-block { display: flex; flex-direction: column; }
  .start-block #business { order: -1; }
  .business-card, .legal-card, .wissen-card { padding: 28px 20px; border-radius: var(--radius-sm); }
  .inline-checks { display: grid; gap: 8px; }
  .button-light { width: 100%; }
  /* Mobil: beide Schritte-Listen samt Zwischenüberschrift ausblenden,
     stattdessen Link zur Howto-Seite. */
  .steps-group, .steps { display: none; }
  /* Uebrig bleibt auf dem Handy nur Ueberschrift plus Knopf - das ist ein
     duenner Block, der mitten im Seitenfluss den Weg zu Sprachauswahl und
     Angebot verlaengert. Deshalb ans Ende. "order: 1" reicht dafuer: alle
     uebrigen Kinder von <main> behalten den Standardwert 0 und bleiben in
     ihrer DOM-Reihenfolge, nur #how rutscht dahinter. Die DOM-Reihenfolge
     bleibt unangetastet, die grossen Ansichten damit unveraendert. */
  main { display: flex; flex-direction: column; }
  #how { order: 1; }
  .how-cta-mobile {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}