/* echt.job — gemeinsame Gestaltung der Helfer-Seiten (helfer.html + 4 Sprachfassungen),
 * der Haushalts-Seiten (haushalt.html + 4 Sprachfassungen) und der Startseiten
 * (index.html + 4 Sprachfassungen, seit Task website-startseite-neu).
 *
 * Tokens wie in style.css (--brand-turquoise) und Master-Doc 5.2 (Helfer-Bereiche
 * Gruen/Tuerkis, Haushalts-Bereiche Blau). style.css selbst wird hier NICHT eingebunden:
 * seine globalen Regeln (Systemschrift, Verlaufshintergrund, box-sizing fuer alles)
 * wuerden Navigation und Footer der Seite verschieben.
 * Rollenfarbe: die rollenfarbigen Stellen der Bausteine lesen --ej-primary/--ej-accent/--ej-tint …;
 * die Grundwerte unten sind Tuerkis (Helfer-Seiten), <body class="ej-theme-haushalt"> setzt sie auf
 * Blau (Block „Haushalts-Seiten" weiter unten). Keine kopierten Regeln je Rolle. Neutrale Farben
 * (Text, Navigation, Warn-/Kreuz-Rot) bleiben fest.
 * Kontrast: Tuerkis #00CFC8 nie als Textfarbe auf Weiss; Akzenttext ist #00756F
 * (5,6:1 auf Weiss). Umbruch Desktop/Handy fuer alles Neue bei 900 px.
 */
:root {
  --brand-turquoise: #00CFC8;
  --ej-turquoise-hover: #00B8B2;
  --ej-accent: #00756F;
  --ej-text: #0F2437;
  --ej-text-2: #3E5468;
  --ej-bg: #F7FAFD;
  --ej-line: rgba(15, 36, 55, .09);
  --ej-ink: #0F2437;
  /* Rollenfarbe (Grundwerte = Helfer-Seiten) */
  --ej-primary: var(--brand-turquoise);
  --ej-primary-hover: var(--ej-turquoise-hover);
  --ej-primary-shadow: rgba(0, 117, 111, .7);
  --ej-tint: #E3F8F7;
  --ej-glow-1: #DDF8F6;
  --ej-glow-2: #E4FBF1;
  --ej-calc-from: #00756F;
  --ej-calc-to: #0F4C5C;
  --ej-calc-eyebrow: #9FF2EE;
  /* Hoehe der Tour-Screens bei 967 px Breite */
  --ej-screen-h: 2096;
}

/* ---- Haushalts-Seiten: Blau statt Tuerkis (Master-Doc 5.2, Farblogik 27.09.2026) ----
   Flaechen, Punkt und Knoepfe #37B5FE mit Text #0F2437 (6,9:1); Akzenttext #0E6BB8
   (5,5:1 auf Weiss, 5,0:1 auf #E7F5FF) — dieselben Werte wie HM.blue/HM.blueDark/
   HM.blueLight in app/src/theme/tokens.ts. Rechner-Kasten #0B5C9E→#0F3554: weisser
   Text 6,9:1, Ueberzeile #BFE6FF 5,3:1. */
.ej-theme-haushalt {
  --ej-primary: #37B5FE;
  --ej-primary-hover: #1FA8F7;
  --ej-primary-shadow: rgba(14, 107, 184, .55);
  --ej-accent: #0E6BB8;
  --ej-tint: #E7F5FF;
  --ej-glow-1: #DDF0FF;
  --ej-glow-2: #E7F5FF;
  --ej-calc-from: #0B5C9E;
  --ej-calc-to: #0F3554;
  --ej-calc-eyebrow: #BFE6FF;
  --ej-screen-h: 2094;
}

/* ---- Store-Schalter (ej-launch.js). Ohne JS fehlt data-store: Grundzustand "soon". ---- */
html:not([data-store="live"]) .ej-when-live { display: none !important; }
html[data-store="live"] .ej-when-soon { display: none !important; }
html:not([data-store="live"][data-webapp="on"]) .ej-when-web { display: none !important; }

/* Nur die neuen Bausteine; Navigation, Formular und Footer der Seite bleiben im content-box-Modell. */
.ej-hero *, .ej-tour *, .ej-sec *, .ej-btn, .ej-navbtn, .ej-final-live * { box-sizing: border-box; }

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

/* ---- Grundbausteine ---- */
.ej-sec { padding: 80px 32px; scroll-margin-top: 90px; }
.ej-sec--tint { background: var(--ej-bg); border-top: 1px solid rgba(15, 36, 55, .06); }
.ej-wrap { max-width: 1200px; margin: 0 auto; }
.ej-eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--ej-accent); text-transform: uppercase; }
.ej-h2 { margin: 10px 0 0; font-family: 'Poppins', sans-serif; font-size: clamp(26px, 7vw, 34px); line-height: 1.2; font-weight: 600; color: var(--ej-text); text-wrap: balance; }
.ej-lead { margin: 10px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ej-text-2); }
.ej-center { text-align: center; }

.ej-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px; border-radius: 12px; border: 0;
  font: 600 16px/1.2 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.ej-btn--primary { background: var(--ej-primary); color: var(--ej-ink); box-shadow: 0 10px 24px -14px var(--ej-primary-shadow); }
.ej-btn--primary:hover { background: var(--ej-primary-hover); color: var(--ej-ink); }
.ej-btn--ghost { background: #fff; color: var(--ej-text); border: 1.5px solid rgba(15, 36, 55, .16); }
.ej-btn--ghost:hover { border-color: var(--ej-text); color: var(--ej-text); }
.ej-btn--quiet { background: transparent; color: var(--ej-accent); padding: 10px 12px; min-height: 44px; }
.ej-btn--quiet:hover { color: var(--ej-text); }
.ej-btn:focus-visible, .ej-tour-pick:focus-visible, .ej-tour-dot:focus-visible, .ej-faq summary:focus-visible { outline: 3px solid var(--ej-accent); outline-offset: 2px; }
.ej-textlink { color: var(--ej-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ej-textlink:hover { color: var(--ej-text); }

/* Navigation: Knopf rechts (Vormerken / App laden) */
.ej-navbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 20px; border-radius: 11px; background: #0F2437; color: #fff; font-size: 14px; font-weight: 600; transition: background .15s; white-space: nowrap; }
.ej-navbtn:hover { background: #1B3A55; color: #fff; }

/* ---- Handyrahmen: neutral, kein iPhone-Nachbau, keine Statusleiste ---- */
.ej-phone { box-sizing: border-box; background: #0F2437; border-radius: 46px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(15, 36, 55, .55); }
.ej-phone-screen { position: relative; overflow: hidden; border-radius: 36px; background: #EEF5FD; aspect-ratio: 967 / var(--ej-screen-h); }
.ej-phone-screen img { display: block; width: 100%; height: auto; }

/* ---- Hero ---- */
.ej-hero {
  padding: 64px 32px 0; overflow: hidden; scroll-margin-top: 100px;
  background: radial-gradient(900px 420px at 30% -80px, var(--ej-glow-1) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(700px 380px at 80% -60px, var(--ej-glow-2) 0%, rgba(255, 255, 255, 0) 55%), #fff;
}
.ej-hero-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: end; }
.ej-hero-copy { padding-bottom: 64px; }
.ej-claim { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--ej-accent); }
/* Unterzeile zum Claim (Haushalts-Seiten: gesetzliche Unfallversicherung der Helfer:in, Pruefpflicht an der 🔒-Regel „legal") */
.ej-claim-sub { margin: 3px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--ej-accent); }
.ej-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(15, 36, 55, .12); font-size: 13px; font-weight: 600; color: var(--ej-text-2); box-shadow: 0 2px 8px -4px rgba(15, 36, 55, .15); }
.ej-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ej-primary); flex: none; }
.ej-h1 { margin: 22px 0 0; font-family: 'Poppins', sans-serif; font-size: clamp(34px, 8.5vw, 56px); line-height: 1.1; font-weight: 700; color: var(--ej-text); text-wrap: balance; }
.ej-hero-text { margin: 18px 0 0; font-size: 18px; line-height: 1.65; color: var(--ej-text-2); max-width: 560px; text-wrap: pretty; }
.ej-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.ej-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; font-weight: 600; color: var(--ej-text); line-height: 1.45; }
.ej-checks svg { flex: none; width: 22px; height: 22px; margin-top: 0; }
.ej-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.ej-hero-live { margin-top: 28px; display: flex; align-items: center; gap: 24px; }
.ej-weblink { display: inline-block; margin-top: 14px; font-size: 14.5px; }
.ej-hero-phone { justify-self: center; width: 300px; max-width: 100%; }
.ej-hero-phone .ej-phone { border-radius: 46px 46px 0 0; padding: 10px 10px 0; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.ej-hero-phone .ej-phone-screen { border-radius: 36px 36px 0 0; aspect-ratio: 967 / 1560; }

/* ---- Badges + QR ---- */
.ej-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; --bh: 44px; }
.ej-badges a { display: inline-block; line-height: 0; }
.ej-badge-as { height: var(--bh); width: auto; }
/* Google-PNG traegt transparenten Rand: sichtbare Hoehe = --bh (gleich gross wie Apple),
   der Rand wird ueber negativen Aussenabstand neutralisiert. Werte je Datei im HTML. */
.ej-badge-gp {
  height: calc(var(--bh) * 250 / var(--gp-vis, 192)); width: auto;
  margin: calc(var(--bh) * var(--gp-py, 29) / var(--gp-vis, 192) * -1) calc(var(--bh) * var(--gp-px, 0) / var(--gp-vis, 192) * -1);
}
.ej-qr { display: none; flex: none; text-align: center; }
.ej-qr img { display: block; width: 124px; height: 124px; border-radius: 10px; background: #fff; border: 1px solid var(--ej-line); }
.ej-qr span { display: block; margin-top: 6px; font-size: 12px; color: var(--ej-text-2); max-width: 124px; }
@media (min-width: 900px) { .ej-qr { display: block; } }

/* ---- Tour "Tipp dich durch die App" ---- */
.ej-tour { background: var(--ej-bg); border-top: 1px solid rgba(15, 36, 55, .06); padding: 80px 32px; scroll-margin-top: 90px; }
.ej-tour-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.ej-tour-lead { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ej-text-2); max-width: 520px; }
.ej-tour-steps { list-style: none; margin: 28px 0 0; padding: 0; }
.ej-tour-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ej-text); display: flex; align-items: center; gap: 12px; }
.ej-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ej-tint); color: var(--ej-accent); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ej-tour-text { margin: 6px 0 0 42px; font-size: 15px; line-height: 1.55; color: var(--ej-text-2); }
.ej-tour-box { margin-top: 28px; border-radius: 18px; background: #fff; border: 1px solid var(--ej-line); padding: 22px 24px; display: flex; gap: 20px; align-items: center; transition: background .3s, color .3s; }
.ej-tour-box-body { flex: 1; min-width: 0; }
.ej-tour-box-t { margin: 0; font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 600; color: var(--ej-text); }
.ej-tour-box-x { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ej-text-2); }
.ej-tour-box .ej-btn, .ej-tour-box .ej-badges { margin-top: 14px; }
.ej-tb-end { display: none; }

/* Ohne JS: alle fuenf Screens mit Titel und Text untereinander. */
.ej-tour:not(.ej-tour--js) .ej-js-only { display: none !important; }
.ej-tour:not(.ej-tour--js) .ej-tour-steps { display: grid; gap: 28px; }
.ej-tour:not(.ej-tour--js) .ej-tour-step { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; background: #fff; border: 1px solid var(--ej-line); border-radius: 18px; padding: 20px; }
.ej-tour:not(.ej-tour--js) .ej-tour-fig { grid-row: 1 / span 2; margin: 0; }
.ej-tour:not(.ej-tour--js) .ej-tour-text { margin-left: 42px; }
@media (max-width: 599px) {
  .ej-tour:not(.ej-tour--js) .ej-tour-step { grid-template-columns: 1fr; }
  .ej-tour:not(.ej-tour--js) .ej-tour-fig { grid-row: auto; width: 200px; justify-self: center; }
}

/* Mit JS */
.ej-tour--js .ej-tour-fig { display: none; }
.ej-tour-stage { display: flex; justify-content: center; }
.ej-tour-stage .ej-phone { width: 302px; }
.ej-tour-stage .ej-phone-screen img { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.ej-tour-stage .ej-phone-screen img.is-on { opacity: 1; }
.ej-tour-dot {
  position: absolute; z-index: 3; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ej-tour-dot span { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--ej-primary); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ej-accent), 0 4px 12px rgba(15, 36, 55, .35); }
.ej-tour-dot span::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid var(--ej-primary); opacity: 0; animation: ejPulse 1.6s ease-out infinite; }
@keyframes ejPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.ej-tour-hint { position: absolute; z-index: 2; left: 14px; right: 14px; padding: 10px 12px; border-radius: 12px; background: #0B1117; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.4; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); pointer-events: none; }
.ej-tour.is-done .ej-tour-dot, .ej-tour.is-done .ej-tour-hint { display: none; }
.ej-tour-pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ej-tour-progress { margin-top: 22px; font-size: 13.5px; font-weight: 600; color: var(--ej-text-2); }
.ej-bar { margin-top: 8px; height: 6px; border-radius: 99px; background: #DCE7EF; overflow: hidden; }
.ej-bar i { display: block; height: 100%; width: 20%; border-radius: 99px; background: var(--ej-primary); transition: width .35s ease; }
.ej-tour-nav { display: flex; gap: 12px; margin-top: 18px; }
.ej-tour-nav .ej-btn { min-width: 120px; }
.ej-tour-nav .ej-btn:disabled { opacity: .4; cursor: default; }
.ej-lbl-finish { display: none; }
.ej-tour-donerow { display: none; align-items: center; gap: 14px; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--ej-text); }
.ej-tour-dots { display: none; }
.ej-tour-again-top { display: none; }
.ej-tour.is-done .ej-tb-end { display: inline; }
.ej-tour.is-done .ej-tb-pre { display: none; }

@media (min-width: 900px) {
  .ej-tour-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "head stage" "steps stage" "ctl stage" "box stage"; column-gap: 72px; align-items: start; }
  .ej-tour-head { grid-area: head; }
  .ej-tour-steps { grid-area: steps; }
  .ej-tour-ctl { grid-area: ctl; }
  .ej-tour-box { grid-area: box; }
  .ej-tour-stage { grid-area: stage; position: sticky; top: 100px; }
  .ej-tour-skip { display: none; }
  /* Frage und Text stehen am Desktop sichtbar in Liste und Hinweis; der Live-Bereich bleibt fuer Screenreader. */
  .ej-tour-cap { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ej-tour:not(.ej-tour--js) .ej-tour-grid { display: block; }
  .ej-tour--js .ej-tour-steps { display: grid; gap: 10px; }
  .ej-tour--js .ej-tour-step { border: 1.5px solid transparent; border-radius: 14px; padding: 8px 14px; transition: background .2s, border-color .2s; }
  .ej-tour--js .ej-tour-step .ej-tour-text { display: none; }
  .ej-tour--js .ej-tour-step.is-active { background: #fff; border-color: var(--ej-primary); box-shadow: 0 10px 24px -18px rgba(15, 36, 55, .4); }
  .ej-tour--js .ej-tour-step.is-active .ej-tour-title { color: var(--ej-accent); }
  .ej-tour--js .ej-tour-step.is-active .ej-num { background: var(--ej-primary); color: var(--ej-ink); }
  .ej-tour--js .ej-tour-step.is-active .ej-tour-text { display: block; padding-bottom: 6px; }
  .ej-tour--js .ej-tour-step:not(.is-active) .ej-tour-pick:hover .ej-tour-title, .ej-tour--js .ej-tour-step:not(.is-active) .ej-tour-pick:hover { color: var(--ej-accent); }
  .ej-tour--js .ej-tour-step.is-seen .ej-num { font-size: 0; }
  .ej-tour--js .ej-tour-step.is-seen .ej-num::after { content: "\2713"; font-size: 15px; }
  .ej-tour.is-done .ej-tour-nav { display: none; }
  .ej-tour.is-done .ej-tour-donerow { display: flex; }
  .ej-tour.is-done .ej-tour-box { background: #0F2437; border-color: #0F2437; }
  .ej-tour.is-done .ej-tour-box-t { color: #fff; }
  .ej-tour.is-done .ej-tour-box-x, .ej-tour.is-done .ej-qr span { color: rgba(255, 255, 255, .78); }
}

@media (max-width: 899px) {
  /* Assistenten-Knopf und -Punkt (assistent.js) aus dem Weg, solange die Tour im Bild ist
     (Klasse setzt tour.js). visibility statt display: das Widget setzt display selbst inline. */
  html.ej-tour-im-bild #eja-launch-wrap, html.ej-tour-im-bild #eja-reopen { visibility: hidden !important; pointer-events: none !important; }
  .ej-tour { padding: 56px 16px; }
  .ej-tour--js .ej-tour-head { text-align: left; }
  .ej-tour--js .ej-tour-lead, .ej-tour--js .ej-tour-steps, .ej-tour--js .ej-tour-progress, .ej-tour--js .ej-tour-donerow { display: none; }
  .ej-tour-skip { min-height: 44px; }
  .ej-tour-stage { margin-top: 22px; }
  .ej-tour-stage .ej-phone { width: 240px; border-radius: 40px; }
  .ej-tour-stage .ej-phone-screen { border-radius: 31px; }
  .ej-tour-hint { display: none; }
  .ej-tour-cap { margin-top: 22px; text-align: center; min-height: 6.5em; }
  .ej-tour-cap-q { margin: 0; font-family: 'Poppins', sans-serif; font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--ej-text); }
  .ej-tour-cap-t { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ej-text-2); }
  .ej-tour--js .ej-tour-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .ej-tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: #C9D6E0; transition: background .2s, width .2s; }
  .ej-tour-dots i.is-on { width: 22px; border-radius: 99px; background: var(--ej-primary); }
  .ej-tour-nav { justify-content: center; }
  .ej-tour-nav .ej-btn { flex: 1; max-width: 200px; }
  .ej-tour.is-last .ej-lbl-next { display: none; }
  .ej-tour.is-last .ej-lbl-finish { display: inline; }
  .ej-tour--js:not(.is-done) .ej-tour-box { display: none; }
  .ej-tour.is-done .ej-tour-skip, .ej-tour.is-done .ej-tour-stage, .ej-tour.is-done .ej-tour-dots, .ej-tour.is-done .ej-tour-nav { display: none; }
  .ej-tour.is-done .ej-tour-again-top { display: inline-flex; }
  .ej-tour.is-done .ej-tour-cap-q { font-size: 24px; }
  .ej-tour.is-done .ej-tour-box { border: 0; background: transparent; padding: 0; margin-top: 8px; justify-content: center; text-align: center; }
  .ej-tour.is-done .ej-tour-box-t, .ej-tour.is-done .ej-tour-box-x { display: none; }
  .ej-tour.is-done .ej-tour-box .ej-badges { justify-content: center; --bh: 52px; }
  .ej-tour.is-done .ej-tour-box .ej-btn { width: 100%; max-width: 320px; }
  .ej-tour-box { flex-direction: column; align-items: stretch; }
}

/* ---- Vorteile ---- */
.ej-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.ej-card { background: #fff; border: 1px solid var(--ej-line); border-radius: 16px; padding: 24px; }
.ej-card-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--ej-tint); color: var(--ej-accent); display: flex; align-items: center; justify-content: center; }
.ej-card-ico svg { width: 24px; height: 24px; }
.ej-card h3 { margin: 16px 0 0; font-size: 17.5px; font-weight: 700; color: var(--ej-text); }
.ej-card p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ej-text-2); text-wrap: pretty; }

/* ---- Taetigkeiten ---- */
.ej-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.ej-tile { background: #fff; border: 1px solid var(--ej-line); border-top: 4px solid var(--tc, var(--ej-primary)); border-radius: 14px; padding: 16px; }
.ej-tile h3 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ej-text); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.ej-tile p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ej-text-2); }

/* ---- Verdienst-Rechner ---- */
.ej-calc { margin: 40px auto 0; max-width: 1000px; border: 1px solid rgba(15, 36, 55, .1); border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.05fr; box-shadow: 0 24px 48px -32px rgba(15, 36, 55, .3); }
.ej-calc-in { padding: 36px; background: #fff; }
.ej-calc-row + .ej-calc-row { margin-top: 26px; }
.ej-calc-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ej-text); }
.ej-calc-val { padding: 3px 10px; border-radius: 8px; background: var(--ej-tint); color: var(--ej-accent); font-weight: 700; white-space: nowrap; }
.ej-calc input[type="range"] { width: 100%; margin-top: 12px; accent-color: var(--ej-accent); cursor: pointer; min-height: 28px; }
.ej-calc-note { margin: 24px 0 0; font-size: 12.5px; line-height: 1.6; color: #5B7083; }
.ej-calc-out { padding: 36px; background: linear-gradient(135deg, var(--ej-calc-from), var(--ej-calc-to)); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.ej-calc-out .ej-eyebrow { color: var(--ej-calc-eyebrow); }
.ej-calc-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ej-calc-big strong { font-family: 'Poppins', sans-serif; font-size: 46px; font-weight: 700; }
.ej-calc-big span { font-size: 15px; color: rgba(255, 255, 255, .8); }
.ej-calc-year { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 14.5px; color: rgba(255, 255, 255, .85); }
.ej-calc-year b { color: #fff; }
.ej-calc-box { margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); font-size: 14.5px; line-height: 1.5; color: #fff; }
.ej-calc-box p { margin: 0; }
.ej-calc-box p + p { margin-top: 8px; color: rgba(255, 255, 255, .88); }
.ej-calc-box--warn { background: rgba(255, 196, 87, .16); border-color: rgba(255, 196, 87, .5); }

/* ---- Kostenvergleich + Kosten-Rechner (Haushalts-Seiten) ----
   Zwei Karten nebeneinander, auf dem Handy untereinander. Die Betraege rechnet ej-kosten.js. */
.ej-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 880px; margin: 44px auto 0; align-items: stretch; }
.ej-cmp { position: relative; background: #fff; border: 1px solid rgba(15, 36, 55, .1); border-radius: 16px; padding: 28px; }
.ej-cmp--hl { border: 2px solid var(--ej-primary); background: linear-gradient(180deg, #fff, var(--ej-tint)); box-shadow: 0 18px 36px -26px rgba(15, 36, 55, .35); }
.ej-cmp-badge { position: absolute; top: -13px; left: 24px; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--ej-primary); color: var(--ej-ink); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ej-cmp-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5B7083; }
.ej-cmp--hl .ej-cmp-label { color: var(--ej-accent); }
.ej-cmp-price { margin: 10px 0 0; font-family: 'Poppins', sans-serif; font-size: 36px; line-height: 1.2; font-weight: 700; color: var(--ej-text); }
.ej-cmp-sub { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ej-text-2); }
.ej-cmp-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; line-height: 1.45; color: var(--ej-text-2); }
.ej-cmp-list li { display: flex; align-items: flex-start; gap: 9px; }
.ej-cmp-list .ej-x, .ej-cmp-list .ej-ok { flex: none; width: 1em; font-weight: 700; text-align: center; }
.ej-cmp-list .ej-x { color: #C23B3B; }
.ej-cmp-list .ej-ok { color: var(--ej-accent); }
.ej-cmp-foot { margin: 20px auto 0; max-width: 880px; text-align: center; font-size: 13px; line-height: 1.6; color: #5B7083; }
.ej-cmp-foot + .ej-cmp-foot { margin-top: 8px; }
.ej-cmp-list b { font-weight: 700; color: var(--ej-text); }
/* Umschalter „Erstes Jahr" / „Ab der 11. Buchung" (Task paket-bindung-2 D.2): einer ueber dem Vergleich, einer im
   Rechner, beide zeigen denselben Zustand. Ohne JavaScript ausgeblendet (hidden), die Zahlen zeigen dann „Erstes Jahr". */
.ej-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 520px; margin: 28px auto 0; padding: 4px; border-radius: 12px; background: var(--ej-tint); border: 1px solid var(--ej-line); }
.ej-seg[hidden], .ej-calc-row[hidden] { display: none; }
.ej-seg-btn { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ej-text-2); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; cursor: pointer; text-wrap: balance; }
.ej-seg-btn[aria-pressed="true"] { background: #fff; color: var(--ej-accent); box-shadow: 0 2px 8px -4px rgba(15, 36, 55, .35); }
.ej-seg-btn:focus-visible { outline: 3px solid var(--ej-accent); outline-offset: 2px; }
.ej-seg--calc { margin: 12px 0 0; max-width: none; }
.ej-calc-row p.ej-calc-lbl { margin: 0; }
.ej-calc-h { margin: 8px 0 0; font-family: 'Poppins', sans-serif; font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--ej-text); text-wrap: balance; }
.ej-calc-in .ej-calc-h + .ej-calc-row { margin-top: 26px; }
.ej-calc-cmp { gap: 12px; }

/* ---- FAQ ---- */
.ej-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; align-items: start; }
.ej-faq details { background: #fff; border: 1px solid var(--ej-line); border-radius: 14px; }
.ej-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 16px 20px; font-size: 16.5px; font-weight: 700; color: var(--ej-text); }
.ej-faq summary::-webkit-details-marker { display: none; }
.ej-faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ej-accent); border-bottom: 2px solid var(--ej-accent); transform: rotate(45deg); margin-top: -4px; transition: transform .2s; }
.ej-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.ej-faq details > div { padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--ej-text-2); }
.ej-faq details > div p { margin: 0; }

/* ---- Abschluss (live) ---- */
.ej-final-live { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin-top: 26px; }
.ej-final-live .ej-qr span { color: rgba(255, 255, 255, .85); }
.ej-final-live .ej-weblink { color: #fff; }

@media (max-width: 899px) {
  .ej-sec { padding: 56px 16px; }
  .ej-hero { padding: 40px 16px 0; }
  .ej-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .ej-hero-copy { padding-bottom: 0; }
  .ej-hero-phone { width: 250px; }
  .ej-hero-live { flex-direction: column; align-items: flex-start; }
  .ej-cards { grid-template-columns: 1fr 1fr; }
  .ej-tiles { grid-template-columns: 1fr 1fr; }
  .ej-calc { grid-template-columns: 1fr; }
  .ej-calc-in, .ej-calc-out { padding: 26px 20px; }
  .ej-faq { grid-template-columns: 1fr; }
  .ej-compare { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .ej-cmp { padding: 26px 20px 22px; }
}
@media (max-width: 599px) {
  .ej-cards { grid-template-columns: 1fr; }
  .ej-calc-big strong { font-size: 40px; }
  /* Im schmalen Rechner untereinander: sonst bricht IT „Dall’11ª prenotazione (10 %)" dreizeilig um. */
  .ej-seg--calc { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ej-tour-dot span::after { animation: none; opacity: 0; }
  .ej-tour-stage .ej-phone-screen img, .ej-bar i, .ej-tour-box, .ej-tour-dots i { transition: none; }
}

/* ======================================================================
   Startseiten (index.html + en/fr/es/it.html) — Task website-startseite-neu
   ----------------------------------------------------------------------
   Die Startseite spricht BEIDE Rollen an. Deshalb traegt sie KEIN Rollen-Theme
   (kein <body class="ej-theme-haushalt">): die Grundwerte oben bleiben Tuerkis,
   und die beiden Rollenfarben stehen je Baustein in --rc/--rc-ink/--rc-tint.
   Umbruch Desktop/Handy wie ueberall bei 900 px.
   ====================================================================== */
.ej-start-hero *, .ej-trust *, .ej-steps *, .ej-split *, .ej-plz *, .ej-founder * { box-sizing: border-box; }

/* Rollenfarben als Bausteine (Master-Doc 5.2, dieselben Werte wie app/src/theme/tokens.ts) */
.ej-rc-haushalt { --rc: #37B5FE; --rc-ink: #0E6BB8; --rc-tint: #E7F5FF; }
.ej-rc-helfer { --rc: #00CFC8; --rc-ink: #00756F; --rc-tint: #E6F8F7; }

/* ---- Hero ---- */
.ej-start-hero {
  position: relative; padding: 52px 32px 96px; overflow: hidden; scroll-margin-top: 100px;
  background: radial-gradient(900px 440px at 26% -90px, #DDF0FF 0%, rgba(255, 255, 255, 0) 62%), radial-gradient(760px 400px at 80% -60px, #DDF8F6 0%, rgba(255, 255, 255, 0) 58%), #fff;
}
.ej-start-head { max-width: 980px; margin: 0 auto; text-align: center; }
.ej-start-head .ej-claim, .ej-start-head .ej-claim-sub { color: var(--ej-text-2); }
/* Versalien nur in der Darstellung — der Wortlaut bleibt der der Unterseiten. */
.ej-start-head .ej-claim { text-transform: uppercase; letter-spacing: .09em; }
.ej-start-head .ej-chip { margin-top: 16px; }
.ej-start-h1 { margin: 18px 0 0; font-family: 'Poppins', sans-serif; font-size: clamp(34px, 7.4vw, 80px); line-height: 1.04; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
.ej-start-h1 .ej-l1 { display: block; color: #0E6BB8; }
.ej-start-h1 .ej-l2 { display: block; color: #00756F; }
.ej-start-text { margin: 20px auto 0; max-width: 680px; font-size: 18px; line-height: 1.6; color: var(--ej-text-2); text-wrap: pretty; }
.ej-start-text--handy { display: none; }

.ej-start-grid { max-width: 1180px; margin: 40px auto 0; display: grid; grid-template-columns: 236px minmax(0, 1fr) 236px; gap: 44px; align-items: center; }
.ej-start-mitte { display: grid; grid-column: 2; grid-row: 1; }
/* Beide Hero-Handys stehen im Markup zusammen; am Desktop loest der Wrapper sich auf. */
.ej-start-phones { display: contents; }
.ej-start-phone--links { grid-column: 1; grid-row: 1; }
.ej-start-phone--rechts { grid-column: 3; grid-row: 1; }
.ej-start-phones .ej-connect--handy { display: none; }

/* Schwebende Hero-Handys (aus bei prefers-reduced-motion, siehe Block am Dateiende) */
.ej-start-phone { width: 236px; justify-self: center; }
.ej-start-phone .ej-phone { border-radius: 42px; padding: 9px; }
/* Volles Handy-Format wie in der Tour (Screens 967 × 2094) – gekürzt wirkten die Hero-Handys wie Tablets (Norman 11.10.2026). */
.ej-start-phone .ej-phone-screen { border-radius: 33px; aspect-ratio: 967 / 2094; }
.ej-start-phone--links { transform: rotate(-6deg); }
.ej-start-phone--rechts { transform: rotate(6deg); }
@media (prefers-reduced-motion: no-preference) {
  .ej-start-phone--links { animation: ejSchwebeL 7s ease-in-out infinite; }
  .ej-start-phone--rechts { animation: ejSchwebeR 7s ease-in-out infinite; }
  @keyframes ejSchwebeL { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-12px); } }
  @keyframes ejSchwebeR { 0%, 100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-12px); } }
}

/* ---- Rollenkarten (je ein Link auf die Unterseite) ---- */
.ej-role {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; align-items: center;
  min-height: 64px; padding: 20px 24px; border-radius: 20px; border: 2px solid var(--rc);
  background: #fff; color: var(--ej-text); text-decoration: none;
  box-shadow: 0 18px 38px -28px rgba(15, 36, 55, .5); transition: transform .18s, box-shadow .18s;
}
.ej-role:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(15, 36, 55, .55); color: var(--ej-text); }
.ej-role:focus-visible { outline: 3px solid var(--rc-ink); outline-offset: 3px; }
.ej-role-ico { grid-row: span 3; width: 52px; height: 52px; border-radius: 15px; background: var(--rc-tint); color: var(--rc-ink); display: flex; align-items: center; justify-content: center; }
.ej-role-ico svg { width: 27px; height: 27px; }
.ej-role-t { margin: 0; font-family: 'Poppins', sans-serif; font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--ej-text); }
.ej-role-chips { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ej-text-2); }
.ej-role-wert { margin: 5px 0 0; font-size: 14.5px; font-weight: 700; color: var(--rc-ink); }

/* Verbindung zwischen den Karten: Linie Blau -> Tuerkis mit Pille, dekorativ (aria-hidden). */
.ej-connect { position: relative; height: 72px; display: flex; align-items: center; justify-content: center; }
.ej-connect::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: linear-gradient(180deg, #37B5FE, #00CFC8); border-radius: 3px; }
.ej-connect span {
  position: relative; padding: 7px 16px; border-radius: 999px; background: #0F2437; color: #fff;
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(15, 36, 55, .7);
}
@media (prefers-reduced-motion: no-preference) {
  .ej-connect span { animation: ejPille 2.4s ease-in-out infinite; }
  @keyframes ejPille { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
}

/* ---- Vertrauensleiste (weisse Karte, ueberlappt den Hero unten) ---- */
.ej-trust { padding: 0 32px; margin-top: -58px; position: relative; z-index: 2; }
.ej-trust-card { max-width: 1100px; margin: 0 auto; background: #fff; border: 1px solid var(--ej-line); border-radius: 20px; box-shadow: 0 26px 52px -34px rgba(15, 36, 55, .45); padding: 26px 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.ej-trust-card > div { display: flex; gap: 12px; align-items: flex-start; }
.ej-trust-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--ej-tint); color: var(--ej-accent); display: flex; align-items: center; justify-content: center; }
.ej-trust-ico svg { width: 20px; height: 20px; }
.ej-trust h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ej-text); }
.ej-trust p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ej-text-2); }

/* ---- Drei Schritte ---- */
.ej-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 38px; }
.ej-step { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ej-line); border-radius: 20px; padding: 24px 24px 0; }
.ej-step--navy { background: #0F2437; border-color: #0F2437; }
.ej-step-chip { display: inline-flex; align-self: flex-start; align-items: center; padding: 6px 13px; border-radius: 999px; background: var(--rc-tint); color: var(--rc-ink); font-size: 12px; font-weight: 800; letter-spacing: .07em; }
.ej-step--navy .ej-step-chip { background: linear-gradient(92deg, #37B5FE, #00CFC8); color: #0F2437; }
.ej-step h3 { margin: 14px 0 0; font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 600; color: var(--ej-text); }
.ej-step p { margin: 7px 0 0; font-size: 15px; line-height: 1.55; color: var(--ej-text-2); text-wrap: pretty; }
.ej-step--navy h3 { color: #fff; }
.ej-step--navy p { color: rgba(255, 255, 255, .8); }
/* Unterkanten der drei Telefone buendig, auch wenn ein Text eine Zeile laenger ist. */
.ej-step-phone { position: relative; width: 230px; margin: 26px auto -40px; }
.ej-step .ej-step-phone { margin-top: auto; }
.ej-step-phone .ej-phone { border-radius: 36px 36px 0 0; padding: 8px 8px 0; }
.ej-step-phone .ej-phone-screen { border-radius: 28px 28px 0 0; height: 292px; aspect-ratio: auto; }
.ej-steps-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 76px; }

/* Push-Mitteilung in Schritt 3 (HTML/CSS, Wortlaut aus _shared/bookingPushContent.ts) */
.ej-push {
  position: absolute; left: -12px; right: -12px; bottom: 26px; z-index: 3;
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .55); text-align: left;
}
.ej-push-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #37B5FE, #00CFC8); color: #0F2437; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; line-height: 32px; text-align: center; }
.ej-push-body { display: block; min-width: 0; }
.ej-push-t, .ej-push-x { display: block; }
.ej-push-kopf { display: flex; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #8195A6; }
.ej-push-t { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; color: #0F2437; }
.ej-push-x { margin: 1px 0 0; font-size: 12px; line-height: 1.35; color: #3E5468; }

/* ---- Zwei Kacheln (#haushalte / #helfer) ----
   Beide Kacheln sind gleich gebaut: Ueberzeile, zweizeilige H2, Liste und Fuss liegen auf
   denselben Zeilen (subgrid). Dadurch stehen die Knopf-Oberkanten links und rechts auf derselben
   Hoehe, bei jeder Breite ab 900 px — auch wenn eine Ueberzeile umbricht. */
.ej-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ej-split-tile { background: var(--rc-tint); border-radius: 24px; padding: 34px 34px 0; }
.ej-split-tile .ej-eyebrow { color: var(--rc-ink); }
.ej-split-h { margin: 10px 0 0; font-family: 'Poppins', sans-serif; font-size: clamp(26px, 4.4vw, 34px); line-height: 1.22; font-weight: 700; color: var(--ej-text); }
.ej-split-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; align-content: start; }
.ej-split-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--ej-text); }
.ej-split-list .ej-ok { flex: none; width: 1.1em; font-weight: 800; color: var(--rc-ink); }
.ej-split-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 56px; margin-top: 26px; }
.ej-split-btn { background: var(--rc); color: var(--ej-ink); box-shadow: 0 10px 24px -14px var(--rc-ink); flex: none; }
.ej-split-btn:hover { background: var(--rc); color: var(--ej-ink); filter: brightness(.94); }
.ej-split-phone { flex: none; width: 240px; align-self: flex-end; }
.ej-split-phone .ej-phone { border-radius: 40px 40px 0 0; padding: 9px 9px 0; }
.ej-split-phone .ej-phone-screen { border-radius: 31px 31px 0 0; height: 318px; aspect-ratio: auto; background: #F0F6FF; }
/* Haushalts-Screen: 16 px Innenabstand oben in Screen-Farbe, danach der Ausschnitt ab „Datum". */
.ej-split-phone--pad .ej-phone-screen { padding-top: 16px; }
/* Bildausschnitt oben: die Zahl ist die y-Koordinate im 967 px breiten Screen (Task § 5). */
.ej-crop-600 { margin-top: calc(-600 / 967 * 100%); }
.ej-crop-745 { margin-top: calc(-745 / 967 * 100%); }

@media (min-width: 900px) {
  .ej-split { grid-template-rows: auto auto auto auto; align-items: stretch; }
  .ej-split-tile { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
}
@supports not (grid-template-rows: subgrid) {
  /* Rueckfall ohne subgrid: feste Zeilenhoehen, damit die Knopf-Oberkanten trotzdem treffen. */
  @media (min-width: 900px) {
    .ej-split-tile .ej-eyebrow { min-height: 2.6em; }
    .ej-split-h { min-height: 2.44em; }
    .ej-split-list { min-height: 118px; }
  }
}

/* ---- PLZ-Check ---- */
.ej-plz { background: #0F2437; padding: 72px 32px; scroll-margin-top: 90px; }
.ej-plz-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center; }
.ej-plz .ej-eyebrow { color: #7FD6FF; }
.ej-plz h2 { margin: 10px 0 0; font-family: 'Poppins', sans-serif; font-size: clamp(26px, 7vw, 34px); line-height: 1.2; font-weight: 600; color: #fff; text-wrap: balance; }
.ej-plz-text { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); max-width: 560px; text-wrap: pretty; }
.ej-plz form { display: none; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ej-plz--js form { display: flex; }
.ej-plz--js .ej-plz-static { display: none; }
.ej-plz-static { margin: 22px 0 0; font-size: 16px; font-weight: 700; color: #fff; }
.ej-plz input {
  width: 200px; max-width: 100%; min-height: 48px; padding: 13px 18px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .45); background: #fff; color: #0F2437;
  font: 400 16px 'Hanken Grotesk', system-ui, sans-serif;
}
.ej-plz input:focus-visible { outline: 3px solid #7FD6FF; outline-offset: 2px; }
.ej-plz button { background: #00CFC8; color: #0F2437; }
.ej-plz button:hover { background: var(--ej-turquoise-hover); color: #0F2437; }
.ej-plz-out { margin: 16px 0 0; min-height: 1.5em; font-size: 16px; line-height: 1.55; font-weight: 600; color: #fff; max-width: 560px; }
.ej-plz-hinweis { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .62); max-width: 560px; }
/* Dekorative Ringe mit den vier Tuebinger Postleitzahlen (kein Radius in km — Konfigwert). */
.ej-plz-ringe { position: relative; width: 300px; height: 300px; justify-self: center; }
.ej-plz-ringe i { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(127, 214, 255, .35); }
.ej-plz-ringe i:nth-child(1) { width: 300px; height: 300px; }
.ej-plz-ringe i:nth-child(2) { width: 210px; height: 210px; }
.ej-plz-ringe i:nth-child(3) { width: 126px; height: 126px; }
.ej-plz-ringe b { position: absolute; inset: 0; margin: auto; width: 126px; height: 126px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 207, 200, .16); color: #fff; font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; }
.ej-plz-ringe s { position: absolute; text-decoration: none; font-size: 12.5px; font-weight: 700; color: #7FD6FF; }
.ej-plz-ringe s:nth-of-type(1) { top: 6px; left: 50%; transform: translateX(-50%); }
.ej-plz-ringe s:nth-of-type(2) { top: 50%; right: 2px; transform: translateY(-50%); }
.ej-plz-ringe s:nth-of-type(3) { bottom: 6px; left: 50%; transform: translateX(-50%); }
.ej-plz-ringe s:nth-of-type(4) { top: 50%; left: 2px; transform: translateY(-50%); }

/* ---- Gruender ---- */
.ej-founder-grid { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: center; }
.ej-founder-bild { text-align: center; }
.ej-founder-bild img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; box-shadow: 0 16px 40px -18px rgba(15, 36, 55, .4); display: block; margin: 0 auto; }
.ej-founder-name { margin: 14px 0 0; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: var(--ej-text); }
.ej-founder-rolle { margin: 2px 0 0; font-size: 13.5px; color: #8195A6; }
.ej-founder-text p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--ej-text-2); text-wrap: pretty; }
.ej-founder-sig { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 15.5px; font-weight: 700; color: var(--ej-text); }

/* ---- FAQ-Fuss der Startseite ---- */
.ej-faq-mehr { margin: 22px 0 0; font-size: 15px; color: var(--ej-text-2); }

/* Trefferflaechen der Textlinks auf 48 px (Task § 10). Bei den zwei Zeilen-Links reicht
   senkrechter Innenabstand: er vergroessert die Flaeche, ohne den Zeilenfluss zu aendern. */
.ej-steps-links .ej-textlink, .ej-founder-sig .ej-textlink { display: inline-flex; align-items: center; min-height: 48px; }
.ej-faq-mehr .ej-textlink { padding: 14px 0; }

@media (max-width: 899px) {
  .ej-start-hero { padding: 32px 16px 84px; }
  .ej-start-h1 { font-size: 34px; }
  .ej-start-text { display: none; }
  .ej-start-text--handy { display: block; font-size: 16px; }
  .ej-start-grid { display: flex; flex-direction: column; gap: 0; margin-top: 26px; }
  .ej-start-mitte { order: 1; gap: 14px; }
  .ej-connect--karten { display: none; }
  .ej-start-phones .ej-connect--handy { display: flex; }
  /* Die zwei Handys stehen am Handy ueberlappend UNTER den Rollenkarten, die Pille dazwischen. */
  .ej-start-phones { order: 2; display: flex; justify-content: center; align-items: flex-start; margin-top: 30px; }
  .ej-start-phone { width: 166px; }
  .ej-start-phone--links { transform: rotate(-7deg); margin-right: -20px; }
  .ej-start-phone--rechts { transform: rotate(7deg); margin-left: -20px; margin-top: 26px; }
  .ej-start-phones .ej-connect { width: 0; height: 0; overflow: visible; align-self: center; z-index: 3; }
  .ej-start-phones .ej-connect::before { display: none; }
  .ej-trust { padding: 0 16px; margin-top: -46px; }
  .ej-trust-card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 22px 20px; }
  .ej-steps { grid-template-columns: 1fr; gap: 56px; }
  .ej-steps-links { margin-top: 68px; }
  .ej-split { grid-template-columns: 1fr; gap: 28px; }
  .ej-split-tile { padding: 26px 22px 0; }
  .ej-split-foot { flex-direction: column; align-items: stretch; gap: 24px; }
  .ej-split-phone { align-self: center; }
  .ej-plz { padding: 56px 16px; }
  .ej-plz-grid { grid-template-columns: 1fr; gap: 32px; }
  .ej-plz-ringe { display: none; }
  .ej-plz input, .ej-plz button { width: 100%; }
  .ej-founder-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ej-start-phone--links { transform: rotate(-6deg); }
  .ej-start-phone--rechts { transform: rotate(6deg); }
  .ej-start-phone, .ej-connect span { animation: none !important; }
  .ej-role { transition: none; }
}