/* ════════════════════════════════════════════════════════════════════════════
   gk-plus.css: Lead-Relaunch 2026-10 (Startseite und Landingpages)
   Ergaenzt style.css/landing.css, ohne sie zu aendern. Farben aus der CI:
   Emerald nur als Flaeche, Schrift und Knoepfe in #047857, Ink #0F172A.
   Jede Bewegung steht unter prefers-reduced-motion: no-preference.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --gk-emerald: #10B981;
  --gk-emerald-text: #047857;
  --gk-emerald-hover: #065F46;
  --gk-emerald-light: #6EE7B7;
  --gk-emerald-wash: #ECFDF5;
  --gk-ink: #0F172A;
  --gk-navy: #1a1f2e;
  --gk-muted: #5B6B80;
  --gk-line: #E2E8F0;
  --gk-on-dark: #CBD5E1;
  --gk-ease: cubic-bezier(.22, 1, .36, 1);
  --gk-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --gk-shadow-lift: 0 2px 4px rgba(15, 23, 42, .06), 0 16px 40px rgba(15, 23, 42, .10);
}

.gk-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Fokus ───────────────────────────────────────────────────────────────── */
.gk-js a:focus-visible,
.gk-js button:focus-visible,
.gk-js input:focus-visible,
.gk-js select:focus-visible,
.gk-js summary:focus-visible {
  outline: 3px solid var(--gk-emerald-light);
  outline-offset: 2px;
}

/* ── Knoepfe ─────────────────────────────────────────────────────────────── */
.gk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 50px; border: 2px solid transparent;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .2s var(--gk-ease), box-shadow .2s ease;
}
.gk-btn--primary { background: var(--gk-emerald-text); color: #fff; }
.gk-btn--primary:hover { background: var(--gk-emerald-hover); color: #fff; }
.gk-btn--ghost { background: transparent; color: var(--gk-ink); border-color: var(--gk-ink); }
.gk-btn--ghost:hover { background: var(--gk-ink); color: #fff; }
.gk-btn--light { background: #fff; color: var(--gk-ink); border-color: var(--gk-line); }
.gk-btn--light:hover { background: #F1F5F9; color: var(--gk-ink); }
.gk-btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.gk-btn--block { width: 100%; }

.gk-link-btn {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--gk-emerald-text);
  background: none; border: 0; padding: 6px 4px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.gk-link-btn:hover { color: var(--gk-emerald-hover); }
.gk-link-btn--muted { color: #475569; }
.gk-link-btn--muted:hover { color: var(--gk-ink); }

/* Hauptknopf im Kopf gefuellt statt Umriss */
.topbar-actions .gk-header-cta,
.topbar-actions .cta--pill {
  background: var(--gk-emerald-text); border-color: var(--gk-emerald-text); color: #fff; border-radius: 50px;
}
.topbar-actions .gk-header-cta:hover,
.topbar-actions .cta--pill:hover { background: var(--gk-emerald-hover); border-color: var(--gk-emerald-hover); color: #fff; }
@media (max-width: 640px) { .topbar-actions .gk-header-cta { display: none; } }

/* Leiste ueber dem Kopf: Gehaltsklar gehoert zu Lohnklar */
.gk-owner-bar { background: var(--gk-ink); color: #CBD5E1; font-size: 13px; }
.gk-owner-bar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: 36px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px;
}
.gk-owner-bar-link {
  display: inline-flex; align-items: center; min-height: 32px; color: #fff; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--gk-emerald); text-underline-offset: 4px;
}
.gk-owner-bar-link:hover { text-decoration-color: currentColor; }
@media (max-width: 640px) {
  .gk-owner-bar-text { display: none; }
  .gk-owner-bar-inner { justify-content: center; padding: 0 16px; }
}

.gk-nav-group { position: relative; }
.gk-nav-group-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 13px; cursor: pointer; }
.gk-nav-group-btn::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.gk-nav-group-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.gk-nav-group-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 110; min-width: 190px; padding: 6px;
  display: none; flex-direction: column; background: #fff; border: 1px solid var(--gk-line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
}
.gk-nav-group-btn[aria-expanded="true"] + .gk-nav-group-menu { display: flex; }
.gk-nav-group-menu .header-nav-link { padding: 8px 12px; border-radius: 8px; }
@media (max-width: 900px) {
  /* Im aufgeklappten Handy-Menue stehen die Zielgruppen direkt in der Liste */
  .gk-nav-group-btn { display: none; }
  .gk-nav-group-menu { display: flex; position: static; min-width: 0; padding: 8px 0 0; margin-top: 8px; border: 0; border-top: 1px solid var(--gk-line); border-radius: 0; box-shadow: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.gk-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── Schieberegler ───────────────────────────────────────────────────────── */
.gk-slider-wrap { margin: 14px 0 6px; }
.gk-slider {
  --gk-fill: 30%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 10px 0 6px;
  border-radius: 8px; cursor: pointer;
  background: linear-gradient(90deg, var(--gk-emerald) var(--gk-fill), var(--gk-line) var(--gk-fill));
}
.gk-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--gk-emerald-text); box-shadow: 0 2px 6px rgba(15, 23, 42, .2);
  transition: transform .15s ease;
}
.gk-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 3px solid var(--gk-emerald-text); box-shadow: 0 2px 6px rgba(15, 23, 42, .2);
}
.gk-slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.gk-slider-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--gk-muted); font-variant-numeric: tabular-nums; }

/* ── Auf einen Blick ─────────────────────────────────────────────────────── */
.gk-insights {
  margin: 0 0 12px; padding: 24px; background: var(--surface, #fff);
  border: 1px solid var(--gk-line); border-radius: 24px; box-shadow: var(--gk-shadow-card);
}
.gk-insights-head { margin-bottom: 18px; }
.gk-insights-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gk-emerald-text); }
.gk-summary { margin: 0; font-size: 16px; line-height: 1.6; color: #334155; max-width: 62ch; }
/* Die rechte Spalte ist je nach Bildschirm 360 bis 800 px breit: automatische Spalten statt Breakpoints */
.gk-insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 14px; align-items: stretch; }
.gk-insight-ring { position: relative; display: grid; place-items: center; padding: 4px 8px; border-radius: 16px; background: #F8FAFC; border: 1px solid var(--gk-line); }
.gk-insight-ring svg { transform: rotate(-90deg); }
.gk-ring-track { fill: none; stroke: #F1F5F9; stroke-width: 10; }
.gk-ring-value { fill: none; stroke: var(--gk-emerald); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; }
.gk-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gk-ring-label strong { font-size: 20px; font-weight: 800; color: var(--gk-ink); font-variant-numeric: tabular-nums; }
.gk-ring-label span { font-size: 11px; font-weight: 600; color: #475569; }
.gk-insight-tile {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px;
  background: #F8FAFC; border: 1px solid var(--gk-line);
}
.gk-insight-label { font-size: 12.5px; font-weight: 600; color: #475569; line-height: 1.35; }
.gk-insight-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--gk-ink); font-variant-numeric: tabular-nums; }
.gk-insight-note { font-size: 12.5px; line-height: 1.45; color: #475569; }
.gk-inline-field input {
  width: 4.2em; min-height: 32px; padding: 2px 6px; margin: 0 2px; border: 1px solid #CBD5E1; border-radius: 8px;
  font: inherit; font-weight: 700; color: var(--gk-ink); text-align: center; background: #fff;
}

@media (max-width: 480px) { .gk-insights { padding: 18px; } }

/* ── Benefit-Mix, Inline-CTA ─────────────────────────────────────────────── */
.gk-mix-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; }
.gk-mix-hint { font-size: 12.5px; color: #475569; }
.gk-inline-cta {
  margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--gk-emerald-wash);
  border: 1px solid #A7F3D0; font-size: 14px; line-height: 1.55; color: #064E3B;
}
.gk-inline-cta a { color: var(--gk-emerald-text); font-weight: 700; margin-left: 4px; text-underline-offset: 3px; }
.gk-inline-cta a:hover { color: var(--gk-emerald-hover); }

/* ── Weitere Auswertungen ────────────────────────────────────────────────── */
.gk-more { display: flex; flex-direction: column; gap: 28px; }
.gk-more-block h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--gk-ink); }
.gk-more-intro, .gk-more-note { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: #475569; }
.gk-more-note { margin: 10px 0 0; }
.gk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gk-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.gk-table th { text-align: left; font-size: 12px; font-weight: 700; color: #475569; padding: 8px 10px; border-bottom: 2px solid var(--gk-line); white-space: nowrap; }
.gk-table td { padding: 10px; border-bottom: 1px solid var(--gk-line); color: var(--gk-ink); white-space: nowrap; }
.gk-table tr.is-current td { background: var(--gk-emerald-wash); font-weight: 700; }
.gk-table tr.is-sum td { font-weight: 800; border-bottom: 0; }
.gk-table .gk-link-btn { font-size: 13px; padding: 2px 6px; }
@media (max-width: 520px) {
  .gk-table { font-size: 13px; }
  .gk-table th, .gk-table td { padding: 8px 6px; white-space: normal; }
}
.gk-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.gk-settings label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #334155; }
.gk-settings input { min-height: 40px; padding: 6px 10px; border: 1px solid #CBD5E1; border-radius: 10px; font: inherit; color: var(--gk-ink); }

/* ── Aktionsleiste: Teilen ───────────────────────────────────────────────── */
.gk-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; margin-top: 10px; font-size: 13.5px; }
.gk-share-label { color: #475569; font-weight: 600; }
.gk-shortcuts-open { margin-left: auto; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid #CBD5E1; border-bottom-width: 2px;
  border-radius: 6px; background: #fff; font: 600 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gk-ink); text-align: center;
}

/* ── Abschnitte unter dem Rechner ────────────────────────────────────────── */
.gk-section-title { margin: 0 0 24px; font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--gk-ink); }

/* Payroll-Kostenrechner: Navy-Band */
.gk-payroll {
  margin: 0 0 72px; padding: 48px; border-radius: 28px; background: var(--gk-ink); color: #F8FAFC;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 40px; align-items: center;
}
.gk-payroll .gk-section-title { color: #F8FAFC; }
.gk-payroll-intro p:last-child { margin: 0; font-size: 17px; line-height: 1.6; color: var(--gk-on-dark); }
.gk-payroll-card { background: #fff; color: var(--gk-ink); border-radius: 22px; padding: 24px; display: grid; gap: 20px; }
.gk-payroll-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gk-payroll-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #334155; }
.gk-payroll-fields input { min-height: 44px; padding: 8px 12px; border: 1px solid #CBD5E1; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 700; color: var(--gk-ink); font-variant-numeric: tabular-nums; }
.gk-payroll-bars { display: grid; gap: 8px; }
.gk-payroll-bar { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #475569; }
.gk-payroll-bar-track { height: 12px; border-radius: 12px; background: #F1F5F9; overflow: hidden; }
.gk-payroll-bar-fill { display: block; height: 100%; width: 0; border-radius: 12px; transition: width .5s var(--gk-ease); }
.gk-payroll-bar-fill--internal { background: #94A3B8; }
.gk-payroll-bar-fill--lk { background: var(--gk-emerald); }
.gk-payroll-figures { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gk-payroll-figures div { padding: 12px; border-radius: 14px; background: #F8FAFC; border: 1px solid var(--gk-line); }
.gk-payroll-figures dt { font-size: 12px; font-weight: 600; color: #475569; }
.gk-payroll-figures dd { margin: 4px 0 0; font-size: 19px; font-weight: 800; color: var(--gk-ink); font-variant-numeric: tabular-nums; }
.gk-payroll-verdict { margin: 0; font-size: 15px; line-height: 1.5; color: #334155; }
.gk-payroll-verdict strong { font-size: 24px; font-weight: 800; color: var(--gk-emerald-text); margin-right: 4px; font-variant-numeric: tabular-nums; }
.gk-payroll-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gk-payroll-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: #475569; }
@media (max-width: 960px) { .gk-payroll { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; } }
@media (max-width: 520px) {
  .gk-payroll { padding: 28px 16px; border-radius: 22px; }
  .gk-payroll-card { padding: 18px; }
  .gk-payroll-fields, .gk-payroll-figures { grid-template-columns: 1fr; }
  .gk-payroll-actions .gk-btn { width: 100%; white-space: normal; }
}

/* Lohnklar-Block mit Ansprechpartner */
.gk-lead-section {
  margin: 0 0 80px; padding: 48px; border-radius: 28px; background: var(--gk-navy); color: #F8FAFC;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); gap: 40px; align-items: center;
}
.gk-lead-section h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: #F8FAFC; }
.gk-lead-text { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--gk-on-dark); max-width: 60ch; }
.gk-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.gk-step { display: flex; gap: 14px; align-items: flex-start; }
.gk-step-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(16, 185, 129, .16); color: var(--gk-emerald-light); font-weight: 800; font-size: 15px;
  border: 1px solid rgba(110, 231, 183, .35);
}
.gk-step strong { display: block; font-size: 16px; color: #F8FAFC; }
.gk-step span:not(.gk-step-num) { display: block; font-size: 14.5px; line-height: 1.5; color: var(--gk-on-dark); }
.gk-contact-card {
  background: #fff; color: var(--gk-ink); border-radius: 22px; padding: 28px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 24px 48px rgba(0, 0, 0, .25);
}
.gk-contact-card img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; }
.gk-contact-name { margin: 0; font-size: 18px; font-weight: 800; }
.gk-contact-role { margin: 0 0 8px; font-size: 13.5px; color: #475569; }
.gk-contact-mail { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--gk-emerald-text); text-underline-offset: 3px; }
.gk-contact-mail:hover { color: var(--gk-emerald-hover); }
@media (max-width: 900px) { .gk-lead-section { grid-template-columns: 1fr; padding: 32px 24px; } .gk-contact-card { max-width: 380px; width: 100%; justify-self: center; } }
@media (max-width: 520px) { .gk-lead-section { padding: 28px 16px; border-radius: 22px; } }

/* ── Hinweise (Toasts) ───────────────────────────────────────────────────── */
.gk-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.gk-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px;
  border-radius: 16px; background: var(--gk-ink); color: #F8FAFC; box-shadow: 0 16px 40px rgba(15, 23, 42, .3);
  font-size: 14px; line-height: 1.45;
}
.gk-toast-text { flex: 1; }
.gk-toast-action {
  flex: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--gk-ink); background: var(--gk-emerald-light);
  border: 0; border-radius: 50px; padding: 8px 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.gk-toast-action:hover { background: #A7F3D0; }
.gk-toast-close { flex: none; font: inherit; font-size: 20px; line-height: 1; color: var(--gk-on-dark); background: none; border: 0; padding: 4px 6px; cursor: pointer; }
.gk-toast-close:hover { color: #fff; }
.gk-toast.is-leaving { opacity: 0; transform: translateY(8px); }
body.has-float-bar .gk-toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
body:has(.gk-sticky-lead:not([hidden])) .gk-toasts { bottom: 92px; }
@media (max-width: 520px) { .gk-toasts { right: 16px; left: 16px; max-width: none; } }

/* ── Dialoge ─────────────────────────────────────────────────────────────── */
.gk-dialog {
  border: 0; border-radius: 24px; padding: 28px; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  color: var(--gk-ink); background: #fff; box-shadow: 0 32px 80px rgba(15, 23, 42, .35);
}
.gk-dialog::backdrop { background: rgba(15, 23, 42, .55); }
.gk-dialog h2 { margin: 0 0 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.gk-dialog p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #334155; }
.gk-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gk-dialog-close {
  float: right; font: inherit; font-size: 26px; line-height: 1; color: #475569; background: #F1F5F9; border: 0;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
}
.gk-dialog-close:hover { background: #E2E8F0; color: var(--gk-ink); }
.gk-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gk-dialog-note { font-size: 13px !important; color: #475569 !important; margin: 4px 0 14px !important; }
.gk-cal-dialog { width: min(820px, calc(100vw - 24px)); padding: 20px 20px 16px; }
.gk-cal-frame { height: min(640px, calc(100vh - 220px)); border-radius: 14px; overflow: hidden; background: #F8FAFC; border: 1px solid var(--gk-line); }
.gk-cal-frame iframe { width: 100%; height: 100%; border: 0; }
.gk-cal-consent { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.gk-cal-consent a { font-size: 14px; font-weight: 600; color: var(--gk-emerald-text); }
.gk-cal-dialog .gk-cal-frame:has(.gk-cal-consent) { height: 220px; }
.gk-dialog-fallback { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--gk-emerald-text); }
.gk-shortcut-list { margin: 12px 0 0; display: grid; gap: 10px; }
.gk-shortcut-list div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--gk-line); font-size: 14px; }
.gk-shortcut-list dt { color: #334155; }
.gk-shortcut-list dd { margin: 0; color: var(--gk-ink); font-weight: 600; text-align: right; }
.gk-shortcut-toggle { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.5; color: #334155; cursor: pointer; }
.gk-shortcut-toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gk-emerald-text); }

/* ── Termin-Leiste ───────────────────────────────────────────────────────── */
.gk-sticky-lead {
  position: fixed; z-index: 900; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 22px;
  width: max-content; max-width: calc(100vw - 32px); border-radius: 50px;
  background: var(--gk-ink); color: #F8FAFC; box-shadow: 0 16px 40px rgba(15, 23, 42, .35);
}
.gk-sticky-lead[hidden] { display: none; }
.gk-sticky-lead-text { margin: 0; display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 14px; line-height: 1.35; }
.gk-sticky-lead-text strong { color: #fff; }
.gk-sticky-lead-text span { color: var(--gk-on-dark); }
.gk-sticky-lead .gk-btn--primary { background: var(--gk-emerald-light); color: var(--gk-ink); }
.gk-sticky-lead .gk-btn--primary:hover { background: #A7F3D0; color: var(--gk-ink); }
.gk-sticky-lead-close { font: inherit; font-size: 20px; line-height: 1; color: var(--gk-on-dark); background: none; border: 0; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.gk-sticky-lead-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
@media (max-width: 768px) { .gk-sticky-lead { display: none !important; } }

/* Mobile Leiste: zweiter Knopf. Zwei Knoepfe brauchen engere Abstaende, sonst ragt "Termin" ueber den Rand */
.mobile-float-bar { gap: 8px; padding-left: 12px; padding-right: 12px; }
.mobile-float-value { font-size: 14px; }
.mobile-float-cta { padding: 8px 12px; }
.mobile-float-cta--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.mobile-float-cta--ghost:hover { background: rgba(255, 255, 255, .08); }
#mfbCalBtn { background: var(--gk-emerald-light); color: var(--gk-ink); border-radius: 50px; }
#mfbScrollBtn { border-radius: 50px; }

/* ── Lesefortschritt, Nach oben ──────────────────────────────────────────── */
.gk-progress {
  position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gk-emerald); transform-origin: left center; transform: scaleX(0);
  pointer-events: none;
}
.gk-to-top {
  position: fixed; z-index: 890; right: 20px; bottom: 88px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--gk-line); background: #fff; color: var(--gk-ink);
  box-shadow: var(--gk-shadow-card); cursor: pointer; opacity: 0; visibility: hidden;
}
.gk-to-top.is-visible { opacity: 1; visibility: visible; }
.gk-to-top:hover { box-shadow: var(--gk-shadow-lift); }
/* Hinweise und "Nach oben" teilen sich die Ecke unten rechts */
body:has(.gk-toast) .gk-to-top { opacity: 0; visibility: hidden; }
@media (max-width: 768px) { .gk-to-top { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); right: 16px; } }

/* ── Glossar ─────────────────────────────────────────────────────────────── */
.gk-gloss { position: relative; }
.gk-gloss-btn {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; vertical-align: 1px;
  border-radius: 50%; border: 1px solid #CBD5E1; background: #fff; color: #475569;
  font: 700 11px/1 var(--font-base, sans-serif); cursor: help; padding: 0;
}
.gk-gloss-btn:hover, .gk-gloss-btn[aria-expanded="true"] { background: var(--gk-emerald-text); border-color: var(--gk-emerald-text); color: #fff; }
.gk-gloss-tip {
  position: absolute; z-index: 60; left: 0; top: calc(100% + 8px); width: min(300px, 80vw);
  padding: 12px 14px; border-radius: 12px; background: var(--gk-ink); color: #F8FAFC;
  font-size: 13px; font-weight: 500; line-height: 1.5; text-align: left; box-shadow: 0 12px 32px rgba(15, 23, 42, .3);
  white-space: normal;
}

/* ── Karten und FAQ ──────────────────────────────────────────────────────── */
.compare-panel, .calc-input-block { box-shadow: var(--gk-shadow-card); }
.module-card:hover { box-shadow: var(--gk-shadow-card); }
.compare-main-value, .compare-row strong, .cost-split-legend dd { font-variant-numeric: tabular-nums; }
.seo-faq-item[open] summary::after { content: "+"; transform: rotate(45deg); }

/* ── Druck: Bedienelemente raus ──────────────────────────────────────────── */
@media print {
  .gk-will-reveal { opacity: 1 !important; transform: none !important; }
  .gk-toasts, .gk-sticky-lead, .gk-progress, .gk-to-top, .gk-dialog, .gk-hero-actions,
  .gk-slider-wrap, .gk-share-row, .gk-mix-bar, .gk-payroll, .gk-lead-section, .gk-gloss-btn { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Bewegung
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes gk-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes gk-slide-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes gk-sticky-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }

  .seo-faq-item summary::after { transition: transform .25s var(--gk-ease); }
  .gk-to-top { transition: opacity .2s ease, visibility .2s ease, transform .2s var(--gk-ease); }

  /* Ergebnis */
  .gk-ring-value { transition: stroke-dashoffset .8s var(--gk-ease); }
  .cost-split-seg { transition: width .6s var(--gk-ease); }

  /* Einblenden beim Scrollen (nur Elemente, die beim Laden unter dem Bild lagen) */
  .gk-js .gk-will-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--gk-ease), transform .6s var(--gk-ease); }
  .gk-js .gk-will-reveal.is-visible { opacity: 1; transform: none; }

  /* Hinweise, Leiste, Dialoge */
  .gk-toast { animation: gk-slide-in .35s var(--gk-ease) both; transition: opacity .2s ease, transform .2s ease; }
  .gk-sticky-lead:not([hidden]) { animation: gk-sticky-in .45s var(--gk-ease) both; }
  .gk-dialog[open] { animation: gk-fade-up .35s var(--gk-ease) both; }

  /* Akkordeons oeffnen weich, wo der Browser es kann */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .calc-details::details-content,
    .seo-faq-item::details-content {
      block-size: 0; overflow: clip;
      transition: block-size .35s var(--gk-ease), content-visibility .35s allow-discrete;
    }
    .calc-details[open]::details-content,
    .seo-faq-item[open]::details-content { block-size: auto; }
  }
}

/* Sicherheitsnetz: bei reduzierter Bewegung keine Uebergaenge und keine Hover-Verschiebungen,
   auch nicht aus Regeln ausserhalb des Bewegungsblocks oben. */
@media (prefers-reduced-motion: reduce) {
  .gk-js *, .gk-js *::before, .gk-js *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .gk-slider:active::-webkit-slider-thumb { transform: none; }
}