/* Landingpage — eigenständiges Stylesheet.
   Bewusst getrennt von style.css: Die Anwendung und die öffentliche Seite
   haben unterschiedliche Aufgaben, und eine Änderung an der Marketing-Seite
   darf niemals das Arbeitswerkzeug verschieben. Die Farb- und Schrift-Token
   sind dieselben wie in der App, damit beides als ein Produkt liest. */

:root {
  --bg: #08111f;
  --bg-panel: #0f1a2c;
  --bg-panel-2: #14233a;
  --border: #24324d;
  --text: #f8fafc;
  --text-dim: #a9b4c5;
  --brand-green: #39ff8b;
  --violet: #7e54ff;
  --on-green: #08111f;
  --radius: 20px;
  --font-heading: "Barlow Condensed", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wrap: 1120px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.08;
  margin: 0;
}

a { color: inherit; }

/* Überschrift der Abschnitte: schmal, weit gesperrt, ruhig. */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-green);
  margin: 0 0 14px;
}

.lead { color: var(--text-dim); font-size: 19px; max-width: 62ch; }

/* --- Kopfzeile ------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 17, 31, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-inner { display: flex; align-items: center; gap: 22px; height: 72px; }
.nav-brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-heading); font-size: 22px; font-weight: 600; text-decoration: none; letter-spacing: 0.01em; flex: 0 0 auto; }
.nav-brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
/* Menüpunkte nie umbrechen — „Für wen“ soll auf einer Zeile bleiben. */
.nav-links a { color: var(--text-dim); text-decoration: none; font-size: 15px; white-space: nowrap; transition: color 0.15s ease; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-green); color: var(--on-green); }
.btn-primary:hover { background: #5cffa2; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--text-dim); }
.btn-lg { min-height: 54px; padding: 0 30px; font-size: 16px; }

/* --- Held ---------------------------------------------------------------- */
.hero { position: relative; padding: 92px 0 64px; overflow: hidden; }
/* Weicher Lichtkegel hinter der Überschrift — reine CSS-Fläche, kein Bild. */
.hero::before {
  content: ''; position: absolute; inset: -40% 20% auto -10%; height: 620px;
  background: radial-gradient(50% 50% at 40% 50%, rgba(57, 255, 139, 0.13), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: -20% -20% auto 40%; height: 560px;
  background: radial-gradient(50% 50% at 60% 40%, rgba(126, 84, 255, 0.14), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero h1 { font-size: clamp(44px, 7vw, 78px); font-weight: 500; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--brand-green); }
.hero .lead { margin: 24px 0 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { color: var(--text-dim); font-size: 14px; margin: 18px 0 0; }

/* --- Produktvorschau: die echte Oberfläche als ruhige Nachbildung --------- */
.preview {
  margin-top: 56px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--bg-panel), #0b1524);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.preview-bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--border); }
.preview-dot { width: 10px; height: 10px; border-radius: 50%; background: #2b3a55; }
.preview-url { margin-left: 12px; font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; }
.preview-body { display: grid; grid-template-columns: 190px 1fr; min-height: 340px; }
.preview-side { border-right: 1px solid var(--border); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.preview-side span { display: block; height: 30px; border-radius: 8px; background: #122034; }
.preview-side span.on { background: rgba(57, 255, 139, 0.14); border-left: 2px solid var(--brand-green); }
.preview-main { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.preview-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: #101c2f; }
.preview-ring { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(var(--brand-green) var(--p, 70%), #1d2c45 0); position: relative; }
.preview-ring::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #101c2f; }
.preview-line { height: 9px; border-radius: 5px; background: #22314b; }
.preview-pill { margin-left: auto; height: 22px; border-radius: 999px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid; }
.preview-pill.ok { color: var(--brand-green); border-color: rgba(57, 255, 139, 0.4); }
.preview-pill.wait { color: #ffb547; border-color: rgba(255, 181, 71, 0.4); }

/* --- Abschnitte ---------------------------------------------------------- */
section { padding: 88px 0; }
.section-head { max-width: 62ch; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 46px); }
.section-head p { color: var(--text-dim); margin: 16px 0 0; }

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  padding: 26px;
}
.card h3 { font-size: 24px; margin-bottom: 10px; }
.card p { color: var(--text-dim); margin: 0; font-size: 16px; }
.card-icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(57, 255, 139, 0.1); color: var(--brand-green);
}
.card-icon svg { width: 21px; height: 21px; }

/* Sorgen-Abschnitt: bewusst schlicht, ohne Kacheln */
.pain { border-left: 2px solid var(--border); padding-left: 22px; }
.pain h3 { font-size: 21px; margin-bottom: 8px; color: var(--text); }
.pain p { color: var(--text-dim); margin: 0; font-size: 16px; }

/* Ablauf in drei Schritten */
.steps { counter-reset: step; }
.step { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--border); }
.step:last-child { border-bottom: 1px solid var(--border); }
.step-no {
  counter-increment: step; flex: 0 0 auto;
  font-family: var(--font-heading); font-size: 15px; font-weight: 600;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--brand-green); color: var(--brand-green);
  display: flex; align-items: center; justify-content: center;
}
.step-no::before { content: counter(step); }
.step h3 { font-size: 23px; margin-bottom: 6px; }
.step p { color: var(--text-dim); margin: 0; font-size: 16px; }

/* --- Preise -------------------------------------------------------------- */
.plan-toggle { display: inline-flex; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-panel); margin-bottom: 36px; }
.plan-toggle button {
  border: none; background: none; color: var(--text-dim); cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 9px 20px; border-radius: 999px; transition: all 0.15s ease;
}
.plan-toggle button[aria-pressed="true"] { background: var(--brand-green); color: var(--on-green); }
.plan-save { color: var(--brand-green); font-size: 13px; margin-left: 12px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; align-items: stretch; }
.plan { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 30px 26px; position: relative; }
.plan.featured { border-color: var(--brand-green); background: linear-gradient(180deg, rgba(57, 255, 139, 0.06), var(--bg-panel) 40%); }
.plan-badge {
  position: absolute; top: -11px; left: 26px;
  background: var(--brand-green); color: var(--on-green);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.plan h3 { font-size: 27px; }
.plan-tagline { color: var(--text-dim); font-size: 15px; margin: 6px 0 22px; min-height: 44px; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.plan-amount { font-family: var(--font-heading); font-size: 46px; font-weight: 500; line-height: 1; }
.plan-unit { color: var(--text-dim); font-size: 15px; }
.plan-sub { color: var(--text-dim); font-size: 13px; min-height: 20px; margin-bottom: 22px; }
.plan .btn { width: 100%; margin-bottom: 24px; }
.plan-limits { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.plan-limit { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: 15px; color: var(--text-dim); line-height: 1.45; }
.plan li svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--brand-green); }
.plan li.excluded { color: var(--text-dim); }
.plan li.excluded svg { color: #ff6276; }
.plan li.key { font-weight: 600; color: var(--text); }
.plan-legend { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }
.plan-legend svg { width: 14px; height: 14px; flex: 0 0 auto; color: #ff6276; }
.plans-note { color: var(--text-dim); font-size: 14px; margin-top: 22px; }

/* --- Sicherheit ---------------------------------------------------------- */
.secure { background: var(--bg-panel-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.secure .card { background: transparent; border: none; padding: 0; }

/* --- Fragen -------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq summary { cursor: pointer; font-family: var(--font-heading); font-size: 22px; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; color: var(--brand-green); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { color: var(--text-dim); margin: 12px 0 0; max-width: 74ch; }

/* --- Abschluss ----------------------------------------------------------- */
.final { text-align: center; }
.final h2 { font-size: clamp(34px, 5vw, 54px); max-width: 18ch; margin: 0 auto 18px; }
.final p { color: var(--text-dim); max-width: 54ch; margin: 0 auto 30px; }
.final .hero-actions { justify-content: center; }

/* --- Fusszeile ----------------------------------------------------------- */
footer { border-top: 1px solid var(--border); padding: 48px 0 40px; }
.foot { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; }
.foot-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 20px; font-weight: 600; }
.foot-brand img { width: 28px; height: 28px; border-radius: 7px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { color: var(--text-dim); text-decoration: none; font-size: 15px; }
.foot-links a:hover { color: var(--text); }
.foot-legal { color: #6b7686; font-size: 13px; margin-top: 26px; }

/* --- Schmale Bildschirme -------------------------------------------------- */
@media (max-width: 900px) {
  .grid-3, .grid-2, .plans { grid-template-columns: 1fr; }
  .preview-body { grid-template-columns: 1fr; }
  .preview-side { flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); overflow: hidden; }
  .preview-side span { width: 74px; flex: 0 0 auto; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  /* Umschalter muss mit dem Daumen treffbar sein — 44px Mindestfläche. */
  .plan-toggle button { min-height: 44px; padding: 0 22px; }
  .plan-toggle { width: 100%; }
  .plan-toggle button { flex: 1; }
  .nav-links { display: none; }
  .nav-inner { gap: 14px; }
  .nav-cta { margin-left: auto; }
  section { padding: 62px 0; }
  .hero { padding: 60px 0 40px; }
  .hero h1 { max-width: none; }
  .lead { font-size: 17px; }
  .hero-actions .btn { width: 100%; }
  .wrap { padding: 0 20px; }
}

/* Wer Bewegung reduziert haben möchte, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- Highlights: einzelne Stärken mit eigener kleiner Darstellung ---------
   Die Bilder sind als SVG/CSS nachgezeichnet, nicht als Bildschirmfotos
   eingebunden: So veralten sie nicht, sind auf jedem Bildschirm scharf und
   verraten keine echten Kundendaten. */
.highlight {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 46px;
  align-items: center;
  padding: 46px 0;
  border-top: 1px solid var(--border);
}
.highlight:first-of-type { border-top: none; padding-top: 0; }
.highlight.flip .highlight-visual { order: -1; }
.highlight h3 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 14px; }
.highlight p { color: var(--text-dim); margin: 0 0 18px; }
.highlight-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.highlight-tag {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px;
}
.highlight-visual {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #0b1524;
  padding: 18px;
  overflow: hidden;
}
.highlight-visual svg { display: block; width: 100%; height: auto; }

/* Fortschrittsringe wie in der Anwendung */
.ring-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; padding: 12px 0; }
.ring { text-align: center; width: 86px; }
.ring-circle {
  width: 62px; height: 62px; margin: 0 auto 9px; border-radius: 50%;
  background: conic-gradient(var(--brand-green) var(--p), #1d2c45 0);
  position: relative;
}
.ring-circle::after {
  content: attr(data-value); position: absolute; inset: 7px;
  border-radius: 50%; background: #0b1524;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 17px; font-weight: 600; color: var(--text);
}
.ring span { font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; }

/* Kommentar mit Erwähnung */
.mention-box { display: flex; flex-direction: column; gap: 10px; }
.mention {
  border: 1px solid var(--border); border-radius: 13px;
  background: #101c2f; padding: 13px 15px;
}
.mention b { font-size: 14px; }
.mention time { color: #6b7686; font-size: 12px; margin-left: 8px; }
.mention p { color: var(--text-dim); font-size: 14px; margin: 5px 0 0; }
.mention .at { color: var(--brand-green); font-weight: 600; }

@media (max-width: 900px) {
  .highlight { grid-template-columns: 1fr; gap: 26px; padding: 34px 0; }
  .highlight.flip .highlight-visual { order: 0; }
}

/* --- Bewegung -------------------------------------------------------------
   Grundsatz nach einer teuren Erfahrung in dieser App: Der Ruhezustand ist
   IMMER der sichtbare, fertige Zustand. Animiert wird ausschliesslich über
   eine Klasse, die JavaScript setzt. Läuft das Skript nicht oder bleibt eine
   Animationsuhr stehen, sieht die Seite trotzdem richtig aus — sie bewegt
   sich nur nicht. Nie umgekehrt. */

.js-motion .reveal {
  opacity: 0;
  transform: translateY(20px);
}
.js-motion .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* Held: gestaffelter Auftritt beim Laden */
.js-motion .hero-inner > * { opacity: 0; transform: translateY(22px); }
.js-motion.ready .hero-inner > * {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.js-motion.ready .hero-inner > *:nth-child(1) { transition-delay: 0.05s; }
.js-motion.ready .hero-inner > *:nth-child(2) { transition-delay: 0.14s; }
.js-motion.ready .hero-inner > *:nth-child(3) { transition-delay: 0.23s; }
.js-motion.ready .hero-inner > *:nth-child(4) { transition-delay: 0.32s; }
.js-motion.ready .hero-inner > *:nth-child(5) { transition-delay: 0.40s; }
.js-motion.ready .hero-inner > .preview { transition-delay: 0.48s; }

/* Knöpfe heben sich leicht an, wenn der Zeiger darüber liegt */
.btn { will-change: transform; }
@media (hover: hover) {
  .btn-primary:hover, .btn-ghost:hover { transform: translateY(-1px); }
}

/* Karten reagieren auf den Zeiger */
@media (hover: hover) {
  .card, .plan {
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .card:hover { transform: translateY(-3px); border-color: #33456a; }
  .plan:hover { transform: translateY(-3px); }
}

/* Reiseroute: die Striche wandern langsam in Fahrtrichtung. */
.js-motion .highlight-visual.in .route-line {
  animation: route-march 2.6s linear infinite;
}
.js-motion .highlight-visual.in .route-line.back {
  animation: route-march 3.4s linear infinite reverse;
}
@keyframes route-march {
  to { stroke-dashoffset: -20; }
}

/* Marker auf der Karte kommen nacheinander */
.js-motion .highlight-visual .route-pin { opacity: 0; }
.js-motion .highlight-visual.in .route-pin {
  animation: pin-in 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.js-motion .highlight-visual.in .route-pin:nth-of-type(2) { animation-delay: 0.12s; }
.js-motion .highlight-visual.in .route-pin:nth-of-type(3) { animation-delay: 0.24s; }
.js-motion .highlight-visual.in .route-pin:nth-of-type(4) { animation-delay: 0.36s; }
/* Bewusst nur die Deckkraft: Eine CSS-transform würde das
   transform-Attribut der SVG-Gruppe ersetzen statt ergänzen — die Marker
   sprängen dann an den Nullpunkt der Zeichenfläche. */
@keyframes pin-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fortschrittsringe füllen sich, sobald sie im Bild sind.
   Ohne @property-Unterstützung springt der Ring schlicht auf den Endwert —
   also auf das Richtige. */
@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.js-motion .highlight-visual.in .ring-circle {
  animation: ring-fill 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
}
@keyframes ring-fill { from { --p: 0%; } }

/* Wer Bewegung reduziert haben möchte, bekommt gar keine. */
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal,
  .js-motion .hero-inner > *,
  .js-motion .highlight-visual .route-pin { opacity: 1 !important; transform: none !important; }
  .js-motion .highlight-visual.in .route-line,
  .js-motion .highlight-visual.in .route-line.back,
  .js-motion .highlight-visual.in .ring-circle { animation: none !important; }
}

/* --- Weitere Ansichten ----------------------------------------------------- */

/* Running Order: Zeitspalte links, Eintrag rechts */
.ro { display: flex; flex-direction: column; }
.ro-row { display: grid; grid-template-columns: 54px 14px 1fr; align-items: center; gap: 10px; padding: 9px 0; }
.ro-time {
  font-family: var(--font-heading); font-size: 15px; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums; text-align: right;
}
.ro-mark { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.ro-mark::before { content: ''; position: absolute; top: -9px; bottom: -9px; width: 1px; background: var(--border); }
.ro-dot { width: 9px; height: 9px; border-radius: 50%; background: #22314b; position: relative; z-index: 1; }
.ro-row.now .ro-dot { background: var(--brand-green); box-shadow: 0 0 0 4px rgba(57, 255, 139, 0.16); }
.ro-row:first-child .ro-mark::before { top: 50%; }
.ro-row:last-child .ro-mark::before { bottom: 50%; }
.ro-label { font-size: 15px; color: var(--text-dim); }
.ro-row.now .ro-label { color: var(--text); font-weight: 600; }
.ro-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.ro-share {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand-green); border: 1px solid rgba(57, 255, 139, 0.35);
  border-radius: 999px; padding: 4px 12px;
}
.ro-share svg { width: 13px; height: 13px; }

/* Geteilter Kontakt: eine Karte, zwei Bereiche */
.share-map { display: grid; grid-template-columns: 1fr; gap: 12px; }
.share-modules { display: flex; gap: 10px; }
.share-mod {
  flex: 1; text-align: center; font-size: 12px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-dim);
  border: 1px dashed var(--border); border-radius: 12px; padding: 9px 6px;
}
.share-mod.active { color: var(--brand-green); border-color: rgba(57, 255, 139, 0.4); border-style: solid; }
.share-card { border: 1px solid var(--border); border-radius: 14px; background: #101c2f; padding: 14px 16px; }
.share-card b { font-size: 15px; }
.share-card p { color: var(--text-dim); font-size: 14px; margin: 4px 0 0; }
.mirror-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--brand-green); border: 1px solid rgba(57, 255, 139, 0.35);
  border-radius: 999px; padding: 3px 10px;
}
.mirror-badge svg { width: 12px; height: 12px; }
.share-arrows { display: flex; justify-content: center; color: #2c3d5c; }
.share-arrows svg { width: 26px; height: 26px; }

/* Gruppenversand: Empfängerliste mit Häkchen */
.send-list { display: flex; flex-direction: column; gap: 7px; }
.send-group-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #6b7686; margin: 8px 0 1px;
}
.send-row {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--border); border-radius: 11px;
  background: #101c2f; padding: 9px 13px;
}
.send-box {
  width: 17px; height: 17px; border-radius: 5px; flex: 0 0 auto;
  border: 1px solid #33456a; display: flex; align-items: center; justify-content: center;
}
.send-box.on { background: var(--brand-green); border-color: var(--brand-green); }
.send-box svg { width: 11px; height: 11px; color: var(--on-green); }
.send-name { font-size: 14px; color: var(--text); }
.send-mail { font-size: 12px; color: #6b7686; margin-left: auto; }
.send-action {
  margin-top: 13px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand-green); color: var(--on-green);
  border-radius: 999px; padding: 10px; font-size: 14px; font-weight: 600;
}
.send-action svg { width: 15px; height: 15px; }

@media (max-width: 520px) {
  .send-mail { display: none; }
}

/* ============================================================================
   ShowAdvance – Rebuild: neue Bausteine (Nov 2026)
   Aufbauend auf denselben Token wie oben. Bewusst additiv gehalten, damit die
   bewährten Visual-Komponenten (Karte, Ringe, Running Order …) unverändert
   bleiben und nur das Layout drumherum neu ist.
   ========================================================================== */

/* --- Marke & Navigation --------------------------------------------------- */
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.nav-brand-text small { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.nav.compact .nav-inner { height: 60px; }
.nav.compact .nav-brand-text small { display: none; }

.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto; }
.nav-burger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 17, 31, 0.98); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 90px 28px 40px;
}
/* display:flex würde den hidden-Zustand sonst überstimmen. */
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a { color: var(--text); text-decoration: none; font-family: var(--font-heading); font-size: 30px; font-weight: 500; padding: 12px 0; border-bottom: 1px solid var(--border); }
.mobile-menu-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.mobile-menu-cta .btn { width: 100%; }

/* --- Hero: zwei Spalten --------------------------------------------------- */
.hero { padding: 96px 0 56px; }
.hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: center; }
.hero-copy h1 { font-size: clamp(38px, 4.6vw, 62px); }
.hero-copy .lead { margin: 22px 0 30px; }
.hero-note a { color: var(--brand-green); text-decoration: none; }
.hero-visual { position: relative; }
.hero-visual .preview { margin-top: 0; }

/* Tourübersicht in der Vorschau */
.preview-tour { padding: 18px; display: flex; flex-direction: column; gap: 9px; }
.pt-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.pt-head b { font-family: var(--font-heading); font-size: 20px; font-weight: 600; }
.pt-sub { color: var(--text-dim); font-size: 13px; }
.pt-show { display: grid; grid-template-columns: 66px 52px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 11px; background: #101c2f; }
.pt-city { font-weight: 600; font-size: 14px; }
.pt-date { color: var(--text-dim); font-size: 12px; }
.pt-bar { height: 7px; border-radius: 4px; background: #1d2c45; overflow: hidden; }
.pt-bar i { display: block; height: 100%; background: var(--brand-green); border-radius: 4px; }
.pt-pct { font-size: 12px; font-weight: 600; color: var(--brand-green); white-space: nowrap; }
.pt-pct.amber { color: #ffb547; } .pt-pct.red { color: #ff6276; }
.pt-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pt-chip { font-size: 11px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.pt-chip.green { color: var(--brand-green); border-color: rgba(57,255,139,.35); }

/* Mobile-Nachbildung, an den Desktop-Screen angelegt */
.hero-phone {
  position: absolute; right: -6px; bottom: -34px; width: 168px;
  border: 1px solid var(--border); border-radius: 22px; background: #0b1524;
  box-shadow: 0 28px 60px -26px rgba(0,0,0,.9); padding: 16px 12px 14px;
}
.hero-phone .hp-notch { width: 46px; height: 4px; border-radius: 3px; background: #2b3a55; margin: 0 auto 12px; }
.hp-head { display: flex; flex-direction: column; margin-bottom: 10px; }
.hp-head b { font-size: 14px; } .hp-head span { color: var(--brand-green); font-size: 11px; }
.hp-row { display: flex; gap: 8px; font-size: 12px; color: var(--text-dim); padding: 5px 0; border-top: 1px solid var(--border); }
.hp-row.now { color: var(--text); font-weight: 600; }
.hp-time { color: var(--text); font-variant-numeric: tabular-nums; }
.hp-card { margin-top: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(57,255,139,.08); border: 1px solid rgba(57,255,139,.25); font-size: 11px; color: var(--text); }
.hp-card small { color: var(--text-dim); }

/* --- Vier Vorteile -------------------------------------------------------- */
.advantages { padding-top: 40px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.adv { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 24px; }
.adv-k { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--brand-green); margin-bottom: 8px; }
.adv p { color: var(--text-dim); margin: 0; font-size: 15px; }
.advantages-note { text-align: center; color: var(--text-dim); max-width: 64ch; margin: 30px auto 0; font-size: 16px; }

/* --- Vorher / Nachher ----------------------------------------------------- */
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ba-col { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.ba-before { background: #10131c; }
.ba-after { background: linear-gradient(180deg, rgba(57,255,139,.05), var(--bg-panel) 45%); border-color: rgba(57,255,139,.3); }
.ba-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; }
.ba-label.green { color: var(--brand-green); }
.ba-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ba-col li { display: flex; gap: 10px; font-size: 15px; color: var(--text-dim); align-items: flex-start; }
.ba-before li { text-decoration: none; }
.ba-x { color: #ff6276; font-weight: 700; }
.ba-c { color: var(--brand-green); font-weight: 700; }
.ba-after li { color: var(--text); }

/* --- Tour- & Showübersicht ------------------------------------------------ */
.showtabs { border: 1px solid var(--border); border-radius: 18px; background: var(--bg-panel); overflow: hidden; }
.showtabs-bar { display: flex; gap: 4px; padding: 12px 14px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.showtabs-bar::-webkit-scrollbar { display: none; }
.showtab { flex: 0 0 auto; font-size: 13px; color: var(--text-dim); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.showtab.active { background: rgba(57,255,139,.14); color: var(--brand-green); }
.showtabs-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tv-show { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #101c2f; }
.tv-dot { width: 9px; height: 9px; border-radius: 50%; }
.tv-dot.green { background: var(--brand-green); } .tv-dot.amber { background: #ffb547; } .tv-dot.red { background: #ff6276; }
.tv-show b { font-size: 15px; }
.tv-meta { color: var(--text-dim); font-size: 13px; }
.tv-badge { font-size: 12px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.tv-badge.green { color: var(--brand-green); border-color: rgba(57,255,139,.35); }
.tv-badge.amber { color: #ffb547; border-color: rgba(255,181,71,.35); }
.tv-badge.red { color: #ff6276; border-color: rgba(255,98,118,.35); }

/* --- Module --------------------------------------------------------------- */
.modgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.modcard { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 24px; position: relative; overflow: hidden; }
.modcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mc); opacity: .8; }
.mod-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--mc); background: color-mix(in srgb, var(--mc) 14%, transparent); }
.mod-ic svg { width: 21px; height: 21px; }
.modcard h3 { font-size: 21px; margin-bottom: 12px; }
.modcard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.modcard li { font-size: 14px; color: var(--text-dim); padding-left: 15px; position: relative; }
.modcard li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--mc); }

/* --- Rollen --------------------------------------------------------------- */
.roles { border: 1px solid var(--border); border-radius: 18px; background: var(--bg-panel); overflow: hidden; }
.role-tabs { display: flex; gap: 4px; padding: 12px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.role-tabs::-webkit-scrollbar { display: none; }
.role-tab { flex: 0 0 auto; background: none; border: 1px solid transparent; color: var(--text-dim); font-family: var(--font-body); font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.role-tab.active { background: var(--brand-green); color: var(--on-green); }
.role-panels { padding: 26px; }
.role-panel { display: none; }
.role-panel.active { display: block; }
.role-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.role-panel li { display: flex; gap: 10px; font-size: 16px; color: var(--text); }
.role-panel li::before { content: '✓'; color: var(--brand-green); font-weight: 700; }

/* --- Workflow ------------------------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.flow-step { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 24px; }
.flow-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--brand-green); color: var(--brand-green); font-family: var(--font-heading); font-weight: 600; margin-bottom: 14px; }
.flow-step h3 { font-size: 21px; margin-bottom: 6px; }
.flow-step p { color: var(--text-dim); margin: 0; font-size: 15px; }

/* --- Mobile-Abschnitt ----------------------------------------------------- */
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 820px; margin: 0 auto; }
.phone { border: 1px solid var(--border); border-radius: 26px; background: #0b1524; padding: 16px 14px; box-shadow: 0 24px 60px -34px rgba(0,0,0,.9); }
.phone-top { text-align: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.phone-top b { font-size: 15px; }
.phone-body { display: flex; flex-direction: column; gap: 9px; }
.ph-card { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: #101c2f; font-size: 13px; }
.ph-card.green { border-color: rgba(57,255,139,.28); background: rgba(57,255,139,.07); }
.ph-card small { display: block; color: var(--text-dim); margin-top: 3px; }
.ph-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); padding: 2px 2px; }
.ph-mini { display: flex; gap: 8px; font-size: 13px; color: var(--text-dim); }
.ph-mini span { color: var(--text); font-variant-numeric: tabular-nums; }
.ph-contact { font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--border); padding-top: 8px; }
.ph-task { display: flex; gap: 9px; align-items: center; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #101c2f; }
.ph-task.done { color: var(--text-dim); } .ph-c { color: var(--brand-green); } .ph-x { color: #ffb547; font-size: 10px; }
.ph-comment { font-size: 12px; color: var(--text); background: rgba(126,84,255,.1); border: 1px solid rgba(126,84,255,.3); border-radius: 10px; padding: 9px 11px; }
.ph-bar { height: 7px; border-radius: 4px; background: #1d2c45; overflow: hidden; }
.ph-bar i { display: block; height: 100%; background: var(--brand-green); }
.mobile-uses { text-align: center; color: var(--text-dim); font-size: 14px; margin-top: 26px; }

/* --- Vertrauen / Social Proof --------------------------------------------- */
.trust-point { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 24px; }
.trust-point b { font-size: 18px; display: block; margin-bottom: 8px; }
.trust-point p { color: var(--text-dim); margin: 0; font-size: 15px; }
.testimonial { position: relative; margin: 34px auto 0; max-width: 760px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 34px 30px 28px; }
.testimonial-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.testimonial blockquote { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 400; font-size: clamp(19px, 2.4vw, 26px); line-height: 1.35; color: var(--text); }
.testimonial figcaption { color: var(--text-dim); font-size: 14px; }

/* --- Demo ----------------------------------------------------------------- */
.demo { background: var(--bg-panel-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.demo-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.demo-copy h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 14px; }
.demo-list { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.demo-list li { display: flex; gap: 10px; color: var(--text-dim); font-size: 15px; }
.demo-list li::before { content: '✓'; color: var(--brand-green); font-weight: 700; }
.demo-fine { color: var(--text-dim); font-size: 13px; }
.demo-form { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 26px; }
.df-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.demo-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); }
.demo-form input, .demo-form textarea { background: #0d1626; border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; color: var(--text); font-family: var(--font-body); font-size: 15px; min-height: 44px; }
.demo-form input:focus, .demo-form textarea:focus { outline: 2px solid var(--brand-green); outline-offset: 1px; border-color: transparent; }
.df-modules { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.df-modules legend { font-size: 12px; color: var(--text-dim); padding: 0 6px; }
.df-check { flex-direction: row !important; align-items: center; gap: 9px !important; color: var(--text) !important; font-size: 14px !important; padding: 5px 0; }
.df-check input { min-height: auto; width: 18px; height: 18px; accent-color: var(--brand-green); }
.df-msg { margin-bottom: 14px; }
.df-error { color: #ff8f8f; font-size: 13px; margin-bottom: 12px; }
.demo-form .btn { width: 100%; }
.df-note { color: var(--text-dim); font-size: 12px; margin: 12px 0 0; text-align: center; }

/* Demo-Start-Karte (statt Anfrageformular) */
.demo-cta-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 30px 26px; }
.demo-cta-card h3 { font-size: 22px; margin: 0 0 10px; }
.demo-cta-card p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.demo-cta-card .btn { width: 100%; }
.demo-cta-card .df-note { margin-top: 16px; }
.demo-cta-card .df-note a, .demo-cta-card p a { color: var(--brand-green); }

/* Kontakt-Sektion */
.contact { border-top: 1px solid var(--border); }
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.contact-info h3 { font-size: 22px; margin: 0 0 6px; }
.contact-brand { color: var(--text-dim); font-size: 15px; margin: 0 0 14px; }
.contact-brand strong { color: var(--text); }
.contact-address { font-style: normal; color: var(--text); font-size: 15px; line-height: 1.7; margin: 0 0 16px; }
.contact-meta { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.contact-meta > div { display: flex; gap: 10px; align-items: baseline; }
.contact-meta dt { color: var(--text-dim); font-size: 13px; min-width: 54px; }
.contact-meta dd { margin: 0; font-size: 15px; color: var(--text); }
.contact-meta a { color: var(--brand-green); }
.contact-legal-links { font-size: 13px; color: var(--text-dim); }
.contact-legal-links a { color: var(--text-dim); text-decoration: underline; }
.contact-legal-links a:hover { color: var(--text); }
/* Kontaktformular übernimmt den Look des früheren Demo-Formulars */
.contact-form { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 26px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); margin-bottom: 14px; }
.contact-form input, .contact-form textarea { background: #0d1626; border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; color: var(--text); font-family: var(--font-body); font-size: 15px; min-height: 44px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--brand-green); outline-offset: 1px; border-color: transparent; }
.contact-form .btn { width: 100%; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 30px; } }

/* --- Sicherheit: technische Details --------------------------------------- */
.tech-details { margin-top: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel); padding: 4px 20px; }
.tech-details summary { cursor: pointer; font-family: var(--font-heading); font-size: 18px; font-weight: 500; padding: 16px 0; list-style: none; display: flex; align-items: center; }
.tech-details summary::-webkit-details-marker { display: none; }
.tech-details summary::after { content: '+'; margin-left: auto; color: var(--brand-green); font-size: 22px; }
.tech-details[open] summary::after { content: '–'; }
.tech-details ul { list-style: none; margin: 0 0 12px; padding: 0 0 14px; display: flex; flex-direction: column; gap: 9px; }
.tech-details li { font-size: 14px; color: var(--text-dim); }
.tech-details li b { color: var(--text); }
.tech-note { color: #6b7686; font-size: 12px; margin: 0 0 14px; }

/* --- Preise (ohne Zahlen) ------------------------------------------------- */
.plans-grid { align-items: stretch; }
.planbox { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 30px 26px; position: relative; display: flex; flex-direction: column; }
.planbox.featured { border-color: var(--brand-green); background: linear-gradient(180deg, rgba(57,255,139,.06), var(--bg-panel) 40%); }
.planbox-badge { position: absolute; top: -11px; left: 26px; background: var(--brand-green); color: var(--on-green); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.planbox h3 { font-size: 26px; }
.plan-for { color: var(--text-dim); font-size: 14px; margin: 6px 0 16px; min-height: 40px; }
.plan-price-x { font-family: var(--font-heading); font-size: 26px; font-weight: 500; color: var(--brand-green); margin-bottom: 20px; }
.planbox ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.planbox li { display: flex; gap: 10px; font-size: 15px; color: var(--text-dim); }
.planbox li::before { content: '✓'; color: var(--brand-green); font-weight: 700; }
.planbox .btn { width: 100%; }

/* --- Fusszeile: Spalten --------------------------------------------------- */
.foot { display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; }
.foot-tag { color: var(--text-dim); font-size: 15px; margin: 10px 0 0; max-width: 40ch; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.foot-cols h4 { font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 12px; font-weight: 600; }
.foot-cols a { display: block; color: var(--text); text-decoration: none; font-size: 15px; padding: 5px 0; }
.foot-cols a:hover { color: var(--brand-green); }

/* --- Bewegung der neuen Karten ------------------------------------------- */
@media (hover: hover) {
  .adv, .modcard, .flow-step, .trust-point, .planbox, .phone { transition: transform 0.2s ease, border-color 0.2s ease; }
  .modcard:hover, .flow-step:hover, .planbox:hover { transform: translateY(-3px); }
}

/* --- Schmale Bildschirme -------------------------------------------------- */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-phone { position: static; width: 100%; max-width: 220px; margin: 18px auto 0; }
  .demo-wrap { grid-template-columns: 1fr; gap: 30px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .modgrid, .flow { grid-template-columns: repeat(2, 1fr); }
  .foot { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .beforeafter { grid-template-columns: 1fr; }
  .grid-4, .modgrid, .flow, .phones, .plans-grid { grid-template-columns: 1fr; }
  .role-panel ul { grid-template-columns: 1fr; }
  .df-row { grid-template-columns: 1fr; }
  .phones { max-width: 320px; }
}

/* Touch-Mindestgrössen auf kleinen Bildschirmen. */
@media (hover: none), (max-width: 720px) {
  .role-tab { min-height: 44px; }
  .df-check { min-height: 44px; }
  .showtab { min-height: 38px; display: inline-flex; align-items: center; }
}