/* EP Design – Eckermann & Partner. Erzeugt aus tokens.json (Design System). Nicht von Hand ändern, sondern im Design System pflegen.
   Themen: Hell Creme (Standard), Hell Weiß (html[data-light="weiss"]), Dunkel (Geräteeinstellung oder html[data-theme="dark"]). */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/SourceSans3-Regular.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/SourceSans3-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/SourceSans3-Bold.woff2") format("woff2"); }
:root {
  color-scheme: light;
  --surface: #F4F0E8;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EAE5D9;
  --ink: #13201B;
  --ink-muted: #515C55;
  --brand: #084F3E;
  --on-brand: #FFFFFF;
  --brand-hover: #063A2E;
  --brand-ink: #084F3E;
  --brand-tint: #DCE9E1;
  --bar: #0B5A47;
  --on-bar: #FFFFFF;
  --ring: #8FD6BD;
  --taupe: #7A705D;
  --taupe-ink: #5F5645;
  --taupe-soft: #E9E3D3;
  --line: #DAD3C4;
  --line-strong: #6E6554;
  --focus: #0B6B54;
  --error: #A8261C;
  --warn: #7A4A00;
  --success: #0B6B3A;
  --feature-bg: #084F3E;
  --feature-ink: #FFFFFF;
  --feature-muted: #CFE3DA;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --content-max: 1160px;
  --text-max: 680px;
  --font-display: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
:root[data-light="weiss"] {
  --surface: #FFFFFF;
  --surface-sunken: #F2F5F3;
  --ink-muted: #53615B;
  --brand-tint: #E3F0E9;
  --taupe-ink: #675E4C;
  --taupe-soft: #F4F1EA;
  --line: #D5DCD8;
  --line-strong: #6E7C76;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --surface: #0D1613;
  --surface-raised: #14211D;
  --surface-sunken: #1B2B26;
  --ink: #E6EEEA;
  --ink-muted: #9DB0A8;
  --brand: #5FC7A3;
  --on-brand: #06241B;
  --brand-hover: #7FD8B8;
  --brand-ink: #5FC7A3;
  --brand-tint: #1B3A31;
  --bar: #2C5E4E;
  --on-bar: #E8F5F0;
  --ring: #7FD8B8;
  --taupe: #A89D85;
  --taupe-ink: #CFC4A9;
  --taupe-soft: #2A2820;
  --line: #2B3C36;
  --line-strong: #6F8A80;
  --focus: #7FD8B8;
  --error: #FF9A8F;
  --warn: #F0B35A;
  --success: #7FD79F;
  --feature-bg: #1B3A31;
  --feature-ink: #E6EEEA;
  --feature-muted: #9DB0A8;
}
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0D1613;
  --surface-raised: #14211D;
  --surface-sunken: #1B2B26;
  --ink: #E6EEEA;
  --ink-muted: #9DB0A8;
  --brand: #5FC7A3;
  --on-brand: #06241B;
  --brand-hover: #7FD8B8;
  --brand-ink: #5FC7A3;
  --brand-tint: #1B3A31;
  --bar: #2C5E4E;
  --on-bar: #E8F5F0;
  --ring: #7FD8B8;
  --taupe: #A89D85;
  --taupe-ink: #CFC4A9;
  --taupe-soft: #2A2820;
  --line: #2B3C36;
  --line-strong: #6F8A80;
  --focus: #7FD8B8;
  --error: #FF9A8F;
  --warn: #F0B35A;
  --success: #7FD79F;
  --feature-bg: #1B3A31;
  --feature-ink: #E6EEEA;
  --feature-muted: #9DB0A8;
}

/* Basis: Seite, Schrift, Elementor-Anbindung */
html { -webkit-text-size-adjust: 100%; }
body.ep { margin: 0; background: var(--surface); color: var(--ink); font: 400 17px/28px var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.ep *, body.ep *::before, body.ep *::after { box-sizing: border-box; }
body.ep :where(h1, h2, h3, h4, h5, h6) { color: var(--ink); font-family: var(--font-display); font-weight: 600; margin-block: 0; }
body.ep :where(p) { margin-block: 0 var(--space-4); }
body.ep :where(img) { max-width: 100%; height: auto; }
body.ep :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
body.ep ::selection { background: var(--brand-tint); color: var(--ink); }

/* Elementor: globale Farben und Schriften folgen dem gewählten Thema (Hell Creme / Weiß / Dunkel) */
html body.ep {
  --e-global-color-primary: var(--ink);
  --e-global-color-secondary: var(--ink-muted);
  --e-global-color-text: var(--ink);
  --e-global-color-accent: var(--brand);
  --e-global-typography-primary-font-family: "Source Sans 3";
  --e-global-typography-secondary-font-family: "Source Sans 3";
  --e-global-typography-text-font-family: "Source Sans 3";
  --e-global-typography-accent-font-family: "Source Sans 3";
}
body.ep .elementor-widget-heading .elementor-heading-title { color: inherit; }

/* Links in Fließtext (Hello Elementor setzt sonst eine andere Linkfarbe) */
.ep-prose a, body.ep .elementor-widget-text-editor a:not(.elementor-button) { color: var(--brand-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ep-prose a:hover, body.ep .elementor-widget-text-editor a:not(.elementor-button):hover { text-decoration-thickness: 2px; }
.ep-prose { max-width: var(--text-max); }

/* Elementor-Button mit Klasse ep-btn bekommt die Optik des Design Systems (Elementor-eigene Farben übersteuern) */
body.ep .elementor-widget-button.ep-btn-wrap .elementor-button,
body.ep .elementor-button.ep-btn { background: var(--brand); color: var(--on-brand); border: 2px solid var(--brand); border-radius: var(--radius-md); min-height: 48px; padding: 0 var(--space-5); font: 600 16px/24px var(--font-sans); }
body.ep .elementor-widget-button.ep-btn-wrap .elementor-button:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
body.ep .elementor-widget-button.ep-btn-sek .elementor-button { background: transparent; color: var(--brand-ink); border-color: var(--brand-ink); }
body.ep .elementor-widget-button.ep-btn-sek .elementor-button:hover { background: var(--brand-tint); color: var(--brand-ink); border-color: var(--brand-ink); }

/* Abschnittsabstände (Utility-Klassen für Elementor-Container: Desktop 96, Tablet 64, Mobil 48) */
.ep-section { padding-block: var(--space-9); }
.ep-section--sunken { background: var(--surface-sunken); }
@media (max-width: 1024px) { .ep-section { padding-block: var(--space-8); } }
@media (max-width: 767px) { .ep-section { padding-block: var(--space-7); } .ep-page { padding: var(--space-4); } }
.ep-wrap { width: min(100% - 2 * var(--space-4), var(--content-max)); margin-inline: auto; }

/* Zugänglichkeit */
.ep-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: var(--space-3) var(--space-4); background: var(--brand); color: var(--on-brand); }
.ep-skip:focus { left: var(--space-4); top: var(--space-4); }
@media (prefers-reduced-motion: reduce) { body.ep * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }


.ep-page { margin: 0; padding: var(--space-5); background: var(--surface); color: var(--ink); font: 400 17px/28px var(--font-sans); -webkit-text-size-adjust: 100%; }
.ep-page *, .ep-page *::before, .ep-page *::after { box-sizing: border-box; }
.ep-page h1, .ep-page h2, .ep-page h3, .ep-page p { margin: 0; }

/* Typografie */
.ep-display { font: 600 56px/60px var(--font-display); letter-spacing: -0.01em; }
.ep-h1 { font: 600 44px/50px var(--font-display); letter-spacing: -0.01em; }
.ep-h2 { font: 600 32px/40px var(--font-display); }
.ep-h3 { font: 600 24px/32px var(--font-display); }
.ep-lead { font: 400 20px/32px var(--font-sans); }
.ep-small { font: 400 15px/24px var(--font-sans); }
.ep-label { font: 600 14px/20px var(--font-sans); }
.ep-caption { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.ep-eyebrow { font: 600 13px/20px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe-ink); }
.ep-muted { color: var(--ink-muted); }
@media (max-width: 767px) {
  .ep-display { font-size: 36px; line-height: 42px; }
  .ep-h1 { font-size: 32px; line-height: 38px; }
  .ep-h2 { font-size: 26px; line-height: 34px; }
  .ep-h3 { font-size: 21px; line-height: 28px; }
  .ep-lead { font-size: 18px; line-height: 28px; }
}

/* Links */
.ep-link { color: var(--brand-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ep-link:hover { text-decoration-thickness: 2px; }
.ep-link:focus-visible, .ep-btn:focus-visible, .ep-chip:focus-visible, .ep-input:focus-visible, .ep-check input:focus-visible + .ep-box { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Buttons */
.ep-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); border: 2px solid var(--brand); border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font: 600 16px/24px var(--font-sans); text-decoration: none; cursor: pointer; }
.ep-btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.ep-btn--secondary { background: transparent; border-color: var(--brand-ink); color: var(--brand-ink); }
.ep-btn--secondary:hover { background: var(--brand-tint); border-color: var(--brand-ink); }
.ep-btn--feature { background: var(--feature-ink); border-color: var(--feature-ink); color: var(--feature-bg); }
.ep-btn--feature:hover { background: var(--feature-muted); border-color: var(--feature-muted); }
.ep-feature .ep-btn:focus-visible { outline-color: var(--feature-ink); }
.ep-btn[aria-disabled="true"] { background: var(--surface-sunken); border-color: var(--line-strong); color: var(--ink-muted); cursor: not-allowed; }
.ep-btn--full { width: 100%; }

/* Hinweisbox */
.ep-note { padding: var(--space-4) var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--brand-tint); color: var(--ink); }
.ep-note__label { display: block; margin-bottom: var(--space-1); font: 700 13px/20px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-ink); }
.ep-note--wichtig { background: var(--surface-raised); border-color: var(--warn); }
.ep-note--wichtig .ep-note__label { color: var(--warn); }
.ep-note--fehler { background: var(--surface-raised); border-color: var(--error); }
.ep-note--fehler .ep-note__label { color: var(--error); }
.ep-note--gruppe { background: var(--taupe-soft); border: 1px dashed var(--taupe); }
.ep-note--gruppe .ep-note__label { color: var(--taupe-ink); }

/* Karten */
.ep-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.ep-card > p { color: var(--ink-muted); }
.ep-card__foot { margin-top: auto; padding-top: var(--space-2); }
.ep-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Hervorgehobene Karte (Onboarding) */
.ep-feature { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--feature-bg); border-radius: 16px; background: var(--feature-bg); color: var(--feature-ink); }
.ep-feature > * { position: relative; z-index: 1; }
.ep-feature .ep-eyebrow { color: var(--feature-muted); }
.ep-feature p, .ep-feature small { color: var(--feature-muted); max-width: 50ch; }
.ep-feature .ep-h2, .ep-feature .ep-h3 { color: var(--feature-ink); }
.ep-feature ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ep-feature li { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 14px; border: 1px solid var(--feature-muted); border-radius: var(--radius-pill); font: 600 14px/20px var(--font-sans); }
.ep-feature li svg { width: 14px; height: 14px; }
.ep-feature .ep-mark { position: absolute; right: -4%; bottom: -18%; z-index: 0; width: min(46%, 300px); height: auto; color: var(--feature-ink); opacity: .14; pointer-events: none; }
:root[data-theme="dark"] .ep-feature { border-color: var(--line-strong); }

/* Formular */
.ep-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ep-field label, .ep-field .ep-label { color: var(--ink); }
.ep-help { font: 400 15px/24px var(--font-sans); color: var(--ink-muted); }
.ep-input { width: 100%; min-height: 48px; padding: 0 var(--space-3); border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: 400 17px/24px var(--font-sans); }
textarea.ep-input { padding: var(--space-3); min-height: 120px; }
.ep-input[aria-invalid="true"] { border-color: var(--error); }
.ep-error { display: flex; gap: var(--space-2); font: 600 15px/24px var(--font-sans); color: var(--error); }
.ep-check { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.ep-check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.ep-box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border: 2px solid var(--line-strong); border-radius: 6px; background: var(--surface-raised); color: var(--on-brand); }
.ep-box svg { width: 16px; height: 16px; opacity: 0; }
.ep-check input:checked + .ep-box { background: var(--brand); border-color: var(--brand); }
.ep-check input:checked + .ep-box svg { opacity: 1; }

/* Prozessschritte */
.ep-steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: ep-step; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ep-step { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); counter-increment: ep-step; }
.ep-step::before { content: counter(ep-step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font: 600 18px/1 var(--font-display); }
.ep-step h3 { font: 600 20px/24px var(--font-display); overflow-wrap: anywhere; hyphens: auto; }
.ep-step p { color: var(--ink-muted); font: 400 15px/24px var(--font-sans); }

/* Partnerkarte */
.ep-person { display: grid; grid-template-columns: 112px 1fr; gap: var(--space-5); align-items: start; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); }
.ep-photo { display: grid; place-items: center; width: 112px; aspect-ratio: 4 / 5; border: 1px dashed var(--taupe); border-radius: var(--radius-md); background: var(--taupe-soft); color: var(--taupe-ink); font: 600 13px/18px var(--font-sans); text-align: center; }
.ep-person img { display: block; width: 112px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); }
.ep-person__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
@media (max-width: 480px) { .ep-person { grid-template-columns: 1fr; } }

/* Leistungsmatrix (Auszug) */
.ep-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-3); border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: 500 16px/20px var(--font-sans); cursor: pointer; text-align: left; }
.ep-chip svg { width: 14px; height: 14px; flex: none; opacity: 0; }
.ep-chip[aria-pressed="true"] { border-color: var(--brand-ink); background: var(--brand-tint); font-weight: 700; }
.ep-chip[aria-pressed="true"] svg { opacity: 1; }
.ep-mx { display: grid; grid-template-columns: minmax(200px, 1.5fr) repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ep-mx__row { display: contents; }
.ep-mx__lbl { min-width: 0; overflow-wrap: anywhere; hyphens: auto; padding: var(--space-3) var(--space-2) var(--space-3) 0; font: 600 16px/22px var(--font-sans); border-bottom: 1px solid var(--line); }
.ep-mx__lbl small { display: block; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.ep-mx__cell { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.ep-mx__cell--sel { background: var(--brand-tint); }
.ep-bar { height: 46px; display: flex; align-items: center; justify-content: center; background: var(--bar); color: var(--on-bar); font: 600 17px/1 var(--font-sans); border-left: 1px solid rgba(255, 255, 255, .22); }
.ep-bar--first { border-left: 0; border-top-left-radius: 11px; border-bottom-left-radius: 11px; }
.ep-bar--last { border-top-right-radius: 11px; border-bottom-right-radius: 11px; }
.ep-bar svg { width: 18px; height: 18px; }
.ep-mx__cell--sel .ep-bar { box-shadow: inset 0 0 0 3px var(--ring); }
.ep-bar--open { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--line) 7px 9px); color: var(--ink); border: 1.5px dashed var(--taupe); }
.ep-hint { margin: 0 var(--space-2); font: 400 12px/16px var(--font-sans); color: var(--ink-muted); overflow-wrap: anywhere; hyphens: auto; }
.ep-mx__cell--sel .ep-hint { color: var(--ink); font-weight: 600; }
.ep-hint--solo { padding: var(--space-2); border: 1px dashed var(--taupe); border-radius: var(--radius-md); background: var(--taupe-soft); color: var(--taupe-ink); text-align: center; }

/* Statuskennzeichnung */
.ep-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); font: 600 13px/20px var(--font-sans); }
.ep-tag--taupe { border-style: dashed; border-color: var(--taupe); background: var(--taupe-soft); color: var(--taupe-ink); }

/* Farbschalter (Hell/Dunkel) */
.ep-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.ep-toggle svg { width: 20px; height: 20px; }
.ep-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }


/* Farbschalter: Mond im hellen Thema (Klick = dunkel), Sonne im dunklen */
.ep-toggle .ep-ic-sun { display: none; }
:root[data-theme="dark"] .ep-toggle .ep-ic-sun { display: block; }
:root[data-theme="dark"] .ep-toggle .ep-ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ep-toggle .ep-ic-sun { display: block; }
  :root:not([data-theme="light"]) .ep-toggle .ep-ic-moon { display: none; }
}
.ep-toggle { padding: 0; }

/* Dunkelmodus: Logo-Austausch (Klassen für zwei Logo-Bilder, hell/dunkel) */
.ep-logo--dark { display: none; }
:root[data-theme="dark"] .ep-logo--light { display: none; }
:root[data-theme="dark"] .ep-logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ep-logo--light { display: none; }
  :root:not([data-theme="light"]) .ep-logo--dark { display: block; }
}