/* ═══════════════════════════════════════════════════════════════
   DIGITAL CRAFT — Projektrechner (nutzt Tokens aus styles.css)
   ═══════════════════════════════════════════════════════════════ */

.calc-hero { padding: clamp(104px, 11vh, 120px) 0 4px; text-align: center; }
.calc-head-container { max-width: 760px; }
.calc-hero h1 { margin: 12px 0 10px; font-size: clamp(2rem, 3.4vw + 0.5rem, 2.9rem); }
.calc-sub { color: var(--navy-60); max-width: 54ch; margin: 0 auto; font-size: 1.0625rem; }
.trust-row {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px;
}
.trust-row li {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-60);
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 8px 16px; background: var(--white);
}
.trust-row li::before { content: ""; width: 5px; height: 5px; background: var(--blue); }

.calc-body { padding: 14px 0 var(--sp-l); }

/* ── Foto-Laptop-Bühne (fotorealistisches Gerät, frontal) ──────
   Breakpoint 1000px: Unterhalb ist das Display des Mockups zu klein
   für den Rechnerinhalt (auf Tablets wurden Inhalte abgeschnitten) —
   dort läuft der Rechner vollflächig ohne Rahmen. Ab 1000px (Desktop)
   bleibt die Laptop-Darstellung in unveränderter Größe.
   Mobile-first: ohne Gerät, Rechner vollflächig.
   Ab 721 px: der Rechner läuft live im Display des Produktfotos.
   Screen-Geometrie exakt vermessen: left 17,67 % · top 10,72 %
   · width 65,72 % · height 59,20 % des Fotos (1800×1320). */
.laptop-stage { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.device { position: relative; }
.device-img { display: none; }
.device-glare { display: none; }
.laptop-viewport { background: var(--white); }

@media (min-width: 1000px) {
  .device-img {
    display: block; width: 100%; height: auto;
    user-select: none; pointer-events: none;
    filter: drop-shadow(0 30px 60px rgba(10, 22, 51, 0.10));
  }
  .device-screen {
    position: absolute;
    left: 17.67%; top: 10.72%; width: 65.72%; height: 59.20%;
    background: var(--white); overflow: hidden; border-radius: 4px;
  }
  .device-glare { /* dezente Glasreflexion — nie auf Kosten der Lesbarkeit */
    display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(112deg,
      rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.035) 30%,
      rgba(255, 255, 255, 0) 45%);
  }
  .laptop-viewport {
    position: relative; z-index: 1; height: 100%;
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none;                 /* kein sichtbarer Scrollbalken */
    padding: 18px clamp(18px, 3vw, 36px) 18px;
    /* Der App-Inhalt wird im Display gleichmäßig leicht herunterskaliert
       (~12 %), damit die komplette erste Ansicht inkl. Hauptbutton ohne
       inneren Scroll ins feste Display passt — wie ein Produkt-Screenshot.
       Das Notebook/Display bleibt unverändert; erst bei Interaktion
       (längere Schritte) scrollt der Inhalt. */
    zoom: 0.88;
  }
  .laptop-viewport::-webkit-scrollbar { display: none; }

  /* Kompakte In-Screen-Typografie: alles sichtbar, nichts abgeschnitten */
  .device-screen .calc-step h2 { font-size: 1.25rem; margin-bottom: 8px; }
  .device-screen .calc-hint { font-size: 0.875rem; margin-bottom: 12px; }
  .device-screen .calc-progress { margin: 0 0 14px; }
  .device-screen .calc-progress ol { flex-wrap: nowrap; gap: 6px; }
  .device-screen .calc-progress li { padding: 5px 9px; font-size: 0.625rem; gap: 5px; }
  .device-screen .calc-progress .p-name { display: none; }
  .device-screen .calc-progress li.active .p-name { display: inline; }
  .device-screen .p-bar { margin-top: 10px; }
  .device-screen textarea { min-height: 104px; font-size: 0.9375rem; padding: 12px 14px; }
  .device-screen .calc-examples { margin-bottom: 14px; }
  .device-screen .calc-examples li { font-size: 0.8125rem; padding: 3px 0 3px 20px; }
  .device-screen .calc-examples li::before { top: 11px; }
  .device-screen .platform-grid { gap: 10px; margin-top: 14px; }
  .device-screen .platform-card { padding: 12px 14px; }
  .device-screen .pc-icon { width: 36px; height: 36px; transform: scale(0.86); transform-origin: left top; }
  .device-screen .pc-name { font-size: 0.875rem; }
  .device-screen .pc-desc { font-size: 0.75rem; }
  .device-screen .module-grid { gap: 10px; margin-top: 14px; }
  .device-screen .mod-card { padding: 12px 14px; }
  .device-screen .mod-name { font-size: 0.875rem; }
  .device-screen .mod-desc { font-size: 0.75rem; margin-top: 3px; }
  .device-screen .mod-level { margin-top: 10px; }
  .device-screen .mod-level button { padding: 4px 10px; font-size: 0.625rem; }
  .device-screen .factor-grid, .device-screen .lead-grid { gap: 12px 18px; margin-top: 14px; }
  .device-screen .calc-label { font-size: 0.8125rem; margin-bottom: 5px; }
  .device-screen .factor select, .device-screen .factor input { padding: 10px 12px; font-size: 0.875rem; }
  .device-screen .calc-actions { margin-top: 18px; }
  .device-screen .btn-m { height: 42px; padding: 0 20px; font-size: 0.875rem; }
  .device-screen .result-card { padding: 20px 24px; }
  .device-screen .result-range { font-size: 1.75rem; margin: 8px 0 6px; }
  .device-screen .result-note { font-size: 0.8125rem; }
  .device-screen .result-grid { gap: 18px; margin-top: 16px; padding-top: 14px; }
  .device-screen .result-grid li { font-size: 0.8125rem; padding: 3px 0 3px 18px; }
  .device-screen .result-grid li::before { top: 11px; }
  .device-screen .result-next { display: none; } /* im Display kompakt — Schritte stehen im Ergebnis-Text */
  .device-screen .consent span { font-size: 0.75rem; }
  .device-screen .lead-success { padding: 32px 0; }
}

/* ── Plattform-Karten (Schritt 1) ───────────────────────────── */
.platform-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px;
}
.platform-card {
  text-align: left; background: var(--white); cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--r-m);
  padding: 18px 20px; font: inherit; color: var(--navy);
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto;
  column-gap: 14px; align-items: center;
  transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.platform-card:hover { border-color: rgba(10, 22, 51, 0.35); }
.platform-card[aria-checked="true"] {
  border-color: var(--navy); box-shadow: var(--shadow-rest);
}
.platform-card[aria-checked="true"] .pc-name::after {
  content: ""; display: inline-block; width: 6px; height: 6px;
  background: var(--blue); margin-left: 10px; vertical-align: 2px;
}
.pc-icon {
  grid-row: 1 / 3; width: 44px; height: 44px; position: relative;
  border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface);
}
.pc-icon i { position: absolute; border: 1.5px solid var(--navy-60); border-radius: 3px; }
.pcw { left: 8px; top: 11px; width: 28px; height: 19px; }
.pcw::after { content: ""; position: absolute; left: 2px; top: 2px; right: 2px; height: 3px; background: var(--navy-15); border-radius: 1px; }
.pcm { left: 15px; top: 9px; width: 14px; height: 24px; border-radius: 4px; }
.pcm-small { left: auto; right: 6px; top: 14px; width: 10px; height: 17px; }
.pcd { left: 7px; top: 9px; width: 30px; height: 19px; }
.pcd::after { content: ""; position: absolute; left: 8px; bottom: -6px; width: 12px; height: 3px; background: var(--navy-60); border-radius: 1px; }
.pci { left: 9px; top: 9px; width: 26px; height: 26px; border-radius: 6px; }
.pci::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid var(--navy-15); border-radius: 3px; }
.pc-name { font-weight: 600; font-size: 0.9375rem; }
.pc-desc { grid-column: 2; color: var(--navy-60); font-size: 0.8125rem; line-height: 1.45; }
@media (max-width: 999px) { .platform-grid { grid-template-columns: 1fr; } }

/* Fortsetzen */
.calc-resume {
  background: var(--surface-blue); border-radius: var(--r-m);
  padding: 20px 24px; margin-bottom: 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.calc-resume[hidden] { display: none; }
.calc-resume p { font-weight: 500; }
.calc-resume-actions { display: flex; align-items: center; gap: 20px; }

/* Fortschritt */
.calc-progress { margin: 8px 0 40px; }
.calc-progress ol { display: flex; gap: 8px; flex-wrap: wrap; }
.calc-progress li {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-40);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--white);
  transition: color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.calc-progress li.active { color: var(--navy); border-color: var(--navy); }
.calc-progress li.done { color: var(--navy-60); }
.calc-progress li.done .p-nr::after { content: " ✓"; color: var(--blue); }
.p-bar {
  height: 3px; background: var(--hairline); border-radius: var(--r-pill);
  margin-top: 16px; overflow: hidden;
}
.p-bar b {
  display: block; height: 100%; width: 20%;
  background: var(--gradient); border-radius: var(--r-pill);
  transition: width 400ms var(--ease);
}

/* Schritte */
.calc-step h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 12px; }
.calc-hint { color: var(--navy-60); margin-bottom: 16px; max-width: 60ch; }
.calc-subhead { font-size: 1.0625rem; margin: 28px 0 12px; }
.calc-examples { margin: 0 0 24px; }
.calc-examples li {
  position: relative; padding: 6px 0 6px 24px; color: var(--navy-60); font-size: 0.9375rem;
}
.calc-examples li::before {
  content: ""; position: absolute; left: 6px; top: 16px;
  width: 5px; height: 5px; background: var(--blue);
}
.calc-label {
  display: block; font-weight: 500; font-size: 0.9375rem; margin: 0 0 8px;
}
textarea, .factor select, .factor input {
  width: 100%; font: inherit; color: var(--navy);
  background: var(--white); border: 1px solid var(--navy-15);
  border-radius: var(--r-s); padding: 14px 16px;
  transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
textarea::placeholder, .factor input::placeholder { color: var(--navy-60); opacity: 0.7; }
textarea:hover, .factor select:hover, .factor input:hover { border-color: rgba(10, 22, 51, 0.3); }
textarea:focus-visible, .factor select:focus-visible, .factor input:focus-visible {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(45, 91, 255, 0.15);
}
.calc-error { color: var(--error, #d6335c); font-size: 0.9375rem; margin-top: 8px; }

.calc-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 32px; flex-wrap: wrap;
}
.calc-actions-right { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-m { height: 48px; padding: 0 24px; }
.btn-secondary {
  background: var(--white); color: var(--navy);
  border: 1px solid var(--navy-15);
}
.btn-secondary:hover { background: var(--surface); border-color: rgba(10, 22, 51, 0.4); }

/* Rückfragen */
.q-item { margin: 16px 0; }
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-check { position: relative; display: inline-flex; }
.chip-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-check span {
  display: inline-flex; align-items: center;
  font-size: 0.9375rem; font-weight: 500;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 10px 18px; background: var(--white); cursor: pointer;
  transition: all var(--dur-ui) var(--ease);
}
.chip-check input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip-check input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Modul-Karten */
.module-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px;
}
.mod-card {
  border: 1px solid var(--hairline); border-radius: var(--r-m);
  background: var(--white); padding: 20px;
  transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.mod-card.on { border-color: var(--navy); box-shadow: var(--shadow-rest); }
.mod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mod-name { font-weight: 600; font-size: 1rem; }
.mod-badge {
  font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--blue);
  background: rgba(45, 91, 255, 0.08); border-radius: var(--r-pill);
  padding: 3px 8px; margin-left: 8px; vertical-align: 2px;
}
.mod-desc { color: var(--navy-60); font-size: 0.875rem; margin-top: 6px; line-height: 1.5; }
.mod-toggle {
  position: relative; width: 44px; height: 26px; flex-shrink: 0;
  border-radius: var(--r-pill); border: 0; cursor: pointer;
  background: var(--hairline); transition: background var(--dur-ui) var(--ease);
}
.mod-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-rest);
  transition: transform var(--dur-ui) var(--ease);
}
.mod-toggle[aria-pressed="true"] { background: var(--navy); }
.mod-toggle[aria-pressed="true"]::after { transform: translateX(18px); }
.mod-level { display: flex; gap: 6px; margin-top: 14px; }
.mod-level button {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.06em; border: 1px solid var(--hairline);
  border-radius: var(--r-pill); background: var(--white);
  padding: 6px 14px; cursor: pointer; color: var(--navy-60);
  transition: all var(--dur-ui) var(--ease);
}
.mod-level button.sel { background: var(--surface-blue); color: var(--navy); border-color: var(--blue); }

/* Faktoren */
.factor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; margin-top: 24px; }
.factor fieldset { border: 0; }

/* Ergebnis */
.result-card {
  background: var(--surface-blue); border-radius: var(--r-l);
  padding: clamp(24px, 4vw, 44px); margin-top: 8px;
  position: relative; overflow: hidden;
}
.result-card::before { /* Lichtkante — der Verlaufs-Einsatz dieses Viewports */
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  background: var(--gradient); border-radius: 0 0 2px 2px; opacity: 0.85;
}
.result-range {
  font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 600;
  letter-spacing: -0.015em; margin: 12px 0 8px;
  font-variant-numeric: tabular-nums;
}
.result-note { color: var(--navy-60); font-size: 0.9375rem; max-width: 62ch; }
.result-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(10, 22, 51, 0.1);
}
.result-grid ul { margin-top: 12px; }
.result-grid li {
  position: relative; padding: 5px 0 5px 20px; font-size: 0.9375rem;
}
.result-grid li::before {
  content: ""; position: absolute; left: 4px; top: 14px;
  width: 5px; height: 5px; background: var(--blue);
}
.result-next { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(10, 22, 51, 0.1); }
.result-next ol { margin-top: 12px; counter-reset: n; }
.result-next li {
  counter-increment: n; position: relative;
  padding: 6px 0 6px 40px; font-size: 0.9375rem;
}
.result-next li::before {
  content: "0" counter(n); position: absolute; left: 0; top: 8px;
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--navy-40);
}

/* Lead */
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 24px; }
.consent { display: flex; gap: 12px; margin-top: 24px; align-items: flex-start; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); flex-shrink: 0; }
.consent span { font-size: 0.875rem; color: var(--navy-60); line-height: 1.5; }
.consent a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.lead-success { text-align: center; padding: 48px 0; }
.lead-success h3 { margin: 12px 0; }
.lead-success p { color: var(--navy-60); margin-bottom: 24px; }

/* Ergebnis-Kennzeichnung: Planungs-Hinweis bzw. unvollständige Angaben */
.result-flag {
  margin-top: 14px; padding: 12px 16px; border-radius: var(--r-s);
  font-size: 0.875rem; line-height: 1.55;
}
.result-flag-warn { background: rgba(178, 84, 9, 0.08); color: #8a4408; }
.result-flag-info { background: var(--surface); color: var(--navy-60); }
.fact-warn { color: #8a4408; }

.calc-privacy { margin-top: 48px; color: var(--navy-40); text-align: center; }

/* ── Startseiten-Einbettung: Station „Ihre Einschätzung" ─────────
   Der Rechner läuft als Rundgang-Station — schlanke Einleitung
   statt eigenem Hero. Weißer Sektionsgrund matcht den Foto-
   Hintergrund des Notebooks, damit keine Bildkante sichtbar wird.
   Einleitung fluchtet mit der Notebook-Kante (beide 1080 px). */
/* Eigener Anker-Abstand: enger als die globalen 96px, damit nach dem Klick
   auf "Projekt direkt einschätzen" kein totes Feld unter der Nav steht und
   mehr vom Rechner sichtbar wird. Nav-Pill endet bei 72px. */
#rechner { background: var(--white); padding-top: clamp(34px, 4vw, 52px); scroll-margin-top: 78px; }
.station-calc .calc-intro { max-width: 1080px; padding: 0 16px; }
.station-calc .calc-intro .station-lead { margin-top: 14px; }
/* Vertrauenspunkte in der eingebetteten Sektion linksbündig zur Überschrift */
.station-calc .calc-intro .trust-row { justify-content: flex-start; margin-top: 22px; }
/* Übergang Einleitung → Laptop enger; Laptop-Größe selbst unverändert */
.calc-embed { margin-top: clamp(16px, 2vw, 26px); }
.calc-embed .calc-privacy { margin-top: 20px; }

/* Ladezustand */
.btn.loading { pointer-events: none; opacity: 0.75; }
.btn.loading::before {
  content: ""; width: 6px; height: 6px; background: currentColor;
  margin-right: 10px; animation: dcPulse 1.2s steps(2) infinite;
}
@keyframes dcPulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .btn.loading::before { animation: none; } }

/* Responsive */
@media (max-width: 999px) {
  .module-grid, .factor-grid, .lead-grid, .result-grid { grid-template-columns: 1fr; }
  .calc-actions { flex-direction: column-reverse; align-items: stretch; }
  .calc-actions .btn { width: 100%; }
  .calc-actions .link-ghost { justify-content: center; }
  .calc-actions-right { flex-direction: column; width: 100%; }
  .calc-progress .p-name { display: none; }
  .calc-progress li.active .p-name { display: inline; }
}

/* Honeypot-Feld (Spam-Schutz) — für Menschen unsichtbar, ohne Tastaturfalle */
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Hinweis unter den Ergebnis-CTAs */
.lead-hint { margin-top: 10px; font-size: 0.8125rem; color: var(--navy-40); text-align: right; }
/* Ehrlicher Hinweis, solange kein Versandweg konfiguriert ist */
.lead-offline { background: var(--surface); border-radius: var(--r-m); padding: 22px 24px; }
.lead-offline p:not(.mono-label) { color: var(--navy-60); margin-top: 8px; font-size: 0.9375rem; }
.lead-offline .calc-actions { margin-top: 18px; }
@media (max-width: 720px) { .lead-hint { text-align: left; } }