/* =========================================================================
   Alive Marketing Solutions – Stylesheet
   Verbindliche Werte: alive-system/wissen/marketing/designvorschrift.md
   ========================================================================= */

/* ---------- Schrift: Raleway für alles, lokal eingebunden (keine Verbindung zu Google) ---------- */
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design-Tokens (designvorschrift.md § 1–4) ---------- */
:root {
  /* Farben – fest */
  --primary: #346898;       /* Buttons, Links, Akzentflächen, Phasenblöcke */
  --navy: #0B2F5B;          /* Überschriften, dunkle Flächen, Footer */
  --text: #303030;          /* Fließtext */
  --bg: #FBFBFF;            /* Seitenhintergrund, Schrift auf dunklen Flächen */
  --alt-primary: #8BA9C4;   /* Flächen, Linien, Illustration – nie für Text */
  --secondary: #586A4D;     /* zweite Akzentfarbe (Grün), sparsam */
  --alt-secondary: #A0AA99; /* Flächen, Linien – nie für Text */
  --accent-2: #070D13;      /* fast Schwarz, starke Kontraste */
  --field-border: #6F87A0;  /* Rahmen Formularfeld – Vorschlag */

  /* Abgeleitete Hilfswerte (nicht in der Designvorschrift – offen, § 6 Kachelflächen) */
  --surface: #FFFFFF;
  --tint: #EEF3F8;
  --tint-strong: #DCEAF6;
  --muted: #555B62;
  --line: #DDE4EC;
  --on-dark-muted: rgba(251, 251, 255, .78);

  /* Kompatibilität mit bestehenden Klassen */
  --brand: var(--primary);
  --brand-strong: var(--primary);
  --deep-space: var(--navy);
  --ink: var(--accent-2);
  --accent-green: var(--secondary);

  --font-head: "Raleway", "Segoe UI", system-ui, sans-serif;
  --font-body: "Raleway", "Segoe UI", system-ui, sans-serif;

  /* Radien: Buttons 40 px (fest), Karten 16 px (Vorschlag), Felder 6 px (fest) */
  --radius-btn: 40px;
  --radius: 16px;
  --radius-sm: 6px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(11, 47, 91, .06), 0 2px 8px rgba(11, 47, 91, .05);
  --shadow: 0 2px 4px rgba(11, 47, 91, .05), 0 12px 32px rgba(11, 47, 91, .09);
  /* Raster 8 px (Vorschlag) */
  --container: 1180px;
  --narrow: 760px;
  --gutter: 24px;
  --section: 64px;
}
@media (min-width: 900px) { :root { --gutter: 32px; --section: 96px; } }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;          /* fest */
  line-height: 1.6;         /* Vorschlag */
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-strong); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* Überschriften: H1 44/32 · H2 28/24 · H3 20/18 px, Gewicht 700–800 (Vorschlag) */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: 32px; font-weight: 800; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
@media (min-width: 900px) {
  h1 { font-size: 44px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
}
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
strong { font-weight: 600; color: var(--accent-2); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--deep-space); color: #fff; padding: 12px 18px; z-index: 100; }
.skip-link:focus { left: 16px; top: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.section { padding: var(--section) 0; }
.section--tint { background: var(--tint); }
.section--white { background: var(--surface); }
.section--dark { background: var(--navy); color: var(--on-dark-muted); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a:not(.btn) { color: var(--bg); }
.section--tight { padding: calc(var(--section) * .6) 0; }

.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head p { color: var(--muted); font-size: 1.1rem; }
.section--dark .section-head p { color: var(--on-dark-muted); }

.kicker {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.section--dark .kicker { color: var(--bg); }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.28rem); color: var(--muted); line-height: 1.6; }

.grid { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.split { display: grid; gap: clamp(32px, 6vw, 80px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr .95fr; }
  .split--reverse > :first-child { order: 2; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  padding: 14px 28px; border-radius: var(--radius-btn); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
  line-height: 1.1;
}
.btn--primary { background: var(--primary); color: var(--bg); box-shadow: 0 6px 18px rgba(52, 104, 152, .28); }
.btn--primary:hover { background: var(--navy); color: var(--bg); transform: translateY(-1px); }
.btn--ghost { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-strong); }
.btn--light { background: var(--bg); color: var(--navy); }
.btn--light:hover { background: var(--tint); color: var(--deep-space); }
.btn--small { padding: 10px 20px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

.link-arrow { font-family: var(--font-head); font-weight: 700; text-decoration: none; color: var(--brand-strong); }
.link-arrow::after { content: " →"; transition: margin .2s; }
.link-arrow:hover::after { margin-left: 4px; }

/* ---------- Icons (eingefärbt über CSS-Maske) ---------- */
.icon {
  display: inline-block; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  flex: none;
}
.icon-badge {
  display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
  background: var(--tint); color: var(--brand); font-size: 32px; margin-bottom: 18px;
}
.section--tint .icon-badge { background: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 251, 255, .88);
  backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 4px 20px rgba(11, 47, 91, .05); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.site-logo img { width: 180px; height: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.site-nav a {
  display: block; padding: 10px 14px; border-radius: 999px; text-decoration: none;
  font-family: var(--font-head); font-weight: 600; color: var(--deep-space); font-size: .98rem;
}
.site-nav a:hover { background: var(--tint); color: var(--deep-space); }
.site-nav a[aria-current="page"] { color: var(--brand); background: var(--tint); }
.site-nav .btn { margin-left: 10px; color: var(--bg); }
.nav-toggle {
  display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; color: var(--deep-space);
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: 76px 0 auto 0; background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 24px; box-shadow: var(--shadow);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all .2s;
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .nav-open .site-nav { transform: none; opacity: 1; visibility: visible; }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav a { padding: 14px 12px; font-size: 1.08rem; border-radius: var(--radius-sm); }
  .site-nav .btn { margin: 12px 0 0; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 112px); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(139, 169, 196, .28), transparent 70%); pointer-events: none;
}
.hero .container { position: relative; }
.hero h1 { margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lead { max-width: 36em; }
.hero__sub { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--brand-strong); margin-bottom: 1.1em; }
.hero .btn-row { margin-top: 28px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; padding: 0; list-style: none; color: var(--muted); font-size: .95rem; }
.hero__trust li::before { content: "✓"; color: var(--accent-green); font-weight: 700; margin-right: 8px; }

.page-hero { padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 72px); background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 100%); }
.page-hero h1 { max-width: 20em; }
.page-hero .lead { max-width: 40em; }
.page-hero .btn-row { margin-top: 28px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb ol { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .88rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; color: var(--alt-primary); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-strong); text-decoration: underline; }

/* ---------- System-Grafik (Kreislauf) ---------- */
.cycle { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }
.cycle__ring { position: absolute; inset: 11%; border-radius: 50%; border: 2px dashed var(--alt-primary); animation: spin 60s linear infinite; }
.cycle__core {
  position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #fff, var(--tint) 70%); box-shadow: var(--shadow);
  font-family: var(--font-head); font-weight: 700; color: var(--deep-space); font-size: clamp(.8rem, 2.4vw, 1rem); line-height: 1.3; padding: 8%;
}
.cycle__core small { display: block; font-weight: 600; color: var(--brand); font-size: .78em; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.cycle__node {
  position: absolute; width: 27%; aspect-ratio: 1; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow);
  display: grid; place-items: center; align-content: center; gap: 4px; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: clamp(.68rem, 2vw, .88rem); color: var(--deep-space);
  transform: translate(-50%, -50%); border: 2px solid #fff;
}
.cycle__node .icon { font-size: clamp(22px, 5.5vw, 34px); color: var(--brand); }
.cycle__node span.n { display: none; }
.cycle__node--1 { left: 50%; top: 11%; }
.cycle__node--2 { left: 89%; top: 50%; }
.cycle__node--3 { left: 50%; top: 89%; }
.cycle__node--4 { left: 11%; top: 50%; }
.cycle__node--start { left: 14%; top: 14%; width: 22%; background: var(--brand); color: #fff; border-color: var(--brand); }
.cycle__node--start .icon { color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cycle__ring { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Karten ---------- */
.card {
  background: var(--surface); border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line); height: 100%;
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .45em; }
.card p { color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
.card .link-arrow { margin-top: auto; padding-top: 8px; }
.card--link { text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--alt-primary); color: inherit; }
.card__num { font-family: var(--font-head); font-weight: 800; color: var(--primary); font-size: 2.4rem; line-height: 1; margin-bottom: 14px; }
.card--quote { background: var(--tint); border: 0; }
.card--problem { border-left: 4px solid var(--brand); }
.card--problem h3 { font-size: 1.15rem; font-style: italic; }

/* ---------- Phasen ---------- */
.phases { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; counter-reset: phase; }
.phase {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow-sm);
}
.phase .icon-badge { margin: 0; grid-row: span 2; }
.phase h3 { margin: 4px 0 .3em; }
.phase h3 small { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.phase p { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .phase { grid-template-columns: 1fr; } .phase .icon-badge { grid-row: auto; } }
.phases > li { display: flex; min-width: 0; }
.phases--row .phase p { hyphens: auto; overflow-wrap: break-word; }
.phases > li > .phase { flex: 1; }
/* Reihe (Leistungsseite): fünf Karten nebeneinander, Symbol oben, verlinkt auf die Abschnitte */
.phases--row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 32px; }
.phases--row .phase { grid-template-columns: minmax(0, 1fr); min-width: 0; align-content: start; padding: 22px; }
.phases--row .icon-badge { grid-row: auto; }
.phases--row .phase p { font-size: .95rem; }
.phase--link { text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.phase--link:hover { border-color: var(--brand); transform: translateY(-2px); }
.phase--link h3 { color: var(--deep-space); }
@media (prefers-reduced-motion: reduce) { .phase--link:hover { transform: none; } }

/* Phasen-Detail (Leistungen) */
.phase-detail { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 72px) 0; }
.phase-detail:first-of-type { border-top: 0; }
.phase-detail__head { display: grid; gap: 24px; grid-template-columns: 1fr; margin-bottom: 32px; }
@media (min-width: 900px) { .phase-detail__head { grid-template-columns: 1fr 1fr; align-items: center; } }
.phase-detail__head h2 { display: flex; align-items: center; gap: 16px; margin: 0; }
.phase-detail__head h2 .icon-badge { margin: 0; }
.phase-facts { display: grid; gap: 14px; background: var(--tint); border-radius: var(--radius); padding: 22px 26px; }
.phase-facts dt { font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.phase-facts dd { margin: 2px 0 0; }
.phase-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.phase-nav a {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-family: var(--font-head); font-weight: 700; color: var(--deep-space);
}
.phase-nav a .icon { font-size: 24px; color: var(--brand); }
.phase-nav a:hover { border-color: var(--brand); }
.phase-nav b { color: var(--primary); }

/* ---------- Checkliste / Listen ---------- */
.checklist { list-style: none; padding: 0; margin: 0 0 1.2em; }
.checklist li { position: relative; padding-left: 34px; margin-bottom: 10px; }
/* Ein Leistungsblock je Phase (Leistungsseite): Liste zweispaltig wie die Phasen mit zwei Blöcken */
@media (min-width: 760px) { .checklist--cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 32px); } }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.xlist { list-style: none; padding: 0; margin: 0; }
.xlist li { position: relative; padding-left: 34px; margin-bottom: 10px; }
.xlist li::before { content: "✕"; position: absolute; left: 4px; top: 0; color: var(--primary); font-weight: 700; }

/* ---------- Testimonials ---------- */
.quote { margin: 0; display: flex; flex-direction: column; height: 100%; }
.quote blockquote { margin: 0 0 20px; font-size: 1.08rem; line-height: 1.6; color: var(--ink); position: relative; padding-top: 34px; }
.quote blockquote::before {
  content: "“"; position: absolute; top: -18px; left: -4px; font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: var(--alt-primary);
}
.quote figcaption { margin-top: auto; font-size: .95rem; color: var(--muted); }
.quote figcaption strong { display: block; color: var(--deep-space); font-family: var(--font-head); }

/* ---------- Logo-Wand ---------- */
.logo-wall { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 56px); list-style: none; padding: 0; margin: 0; }
.logo-wall img { max-height: 72px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .25s, opacity .25s; }
.logo-wall li:hover img { filter: none; opacity: 1; }
/* Vertrauensleiste direkt unter dem Kopfbereich (Startseite) */
.section--logos { padding: clamp(28px, 4vw, 44px) 0; border-block: 1px solid rgba(52, 104, 152, .12); }
.logo-strip__label { text-align: center; font-size: .9rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin: 0 0 18px; }
/* Karte auf dunklem Grund (Startseite, GEO-Selbsttest) */
.card--on-dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); box-shadow: none; color: var(--on-dark-muted); height: auto; align-self: center; }
.card--on-dark p { color: var(--on-dark-muted); }
.card--on-dark em { color: #fff; }
/* Spalten oben bündig, wenn eine Seite deutlich länger ist */
.split--top { align-items: start; }
@media (min-width: 900px) { .split--top > :first-child { position: sticky; top: 110px; } }
/* Phasengrafik ohne Dauerbewegung */
.cycle--still .cycle__ring { animation: none; }

/* ---------- Schritte ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); counter-reset: step; }
.steps li { position: relative; padding: 30px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: #fff; font-family: var(--font-head); font-weight: 800; margin-bottom: 16px;
}
.steps h3 { margin-bottom: .35em; }
.steps p { margin: 0; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative;
  font-family: var(--font-head); font-weight: 700; color: var(--deep-space); font-size: 1.06rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item > div { padding: 0 24px 22px; color: var(--muted); }
.faq-item > div p:last-child { margin: 0; }

/* ---------- CTA-Band ---------- */
.cta-band {
  background: var(--navy); color: var(--on-dark-muted); border-radius: var(--radius-lg);
  padding: clamp(32px, 6vw, 64px); display: grid; gap: 28px; align-items: center; position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; right: -80px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, .06); pointer-events: none;
}
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.4fr auto; } }
.cta-band h2 { color: var(--bg); margin-bottom: .35em; }
.cta-band p { margin: 0; }
.cta-band .btn-row { position: relative; z-index: 1; }
.cta-band .btn--ghost { color: var(--bg); border-color: var(--bg); }
.cta-band .btn--ghost:hover { background: rgba(251, 251, 255, .1); color: var(--bg); }

/* ---------- Artikel ---------- */
.article__header { background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 100%); padding: clamp(32px, 5vw, 64px) 0 clamp(24px, 4vw, 40px); margin-bottom: clamp(16px, 3vw, 32px); }
.article__header h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.article__meta { color: var(--muted); font-size: .92rem; margin: 0; }
.article__meta a { color: inherit; }
.prose { font-size: 1.1rem; line-height: 1.8; }
.prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.75rem); color: var(--brand-strong); margin: 1.9em 0 .6em; }
.prose h3 { margin: 1.6em 0 .5em; }
.prose > :first-child { margin-top: 0; }
.prose li { margin-bottom: .45em; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--alt-primary); color: var(--muted); font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .98rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--font-head); color: var(--deep-space); background: var(--tint); }
.prose .source { font-size: .88rem; color: var(--muted); }
.callout { background: var(--tint); border-radius: var(--radius); padding: 24px 28px; margin: 1.8em 0; }
.callout > :last-child { margin-bottom: 0; }
.callout h3, .callout strong:first-child { color: var(--brand-strong); }
.article-cta { margin: clamp(40px, 6vw, 64px) 0 32px; }
.article-cta .cta-band { grid-template-columns: 1fr; }

/* Serien-Navigation */
.series-nav { border-top: 1px solid var(--line); padding: 28px 0 clamp(48px, 7vw, 80px); }
.series-nav__label { font-size: .9rem; color: var(--muted); margin-bottom: 16px; }
.series-nav__links { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .series-nav__links { grid-template-columns: 1fr 1fr; } }
.series-nav__links a {
  display: block; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  text-decoration: none; font-family: var(--font-head); font-weight: 700; color: var(--deep-space); line-height: 1.35;
}
.series-nav__links a:hover { border-color: var(--brand); }
.series-nav__links small { display: block; font-weight: 600; color: var(--brand); font-size: .8rem; margin-bottom: 4px; }
.series-nav__next { text-align: right; }

/* Artikel-Listen (Hubs) */
.post-list { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.post-list a {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--text);
  transition: border-color .2s, transform .2s;
}
.post-list a:hover { border-color: var(--brand); transform: translateX(3px); }
.post-list .num { font-family: var(--font-head); font-weight: 800; color: var(--primary); font-size: 1.5rem; min-width: 2ch; }
.post-list strong { display: block; font-family: var(--font-head); color: var(--deep-space); font-size: 1.08rem; }
.post-list span.desc { display: block; color: var(--muted); font-size: .95rem; margin-top: 2px; }
.post-list .arrow { color: var(--brand); font-size: 1.3rem; }
@media (max-width: 560px) { .post-list a { grid-template-columns: auto 1fr; } .post-list .arrow { display: none; } }

/* Glossar */
.glossary-index { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 40px; }
.glossary-index a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--tint); text-decoration: none; font-weight: 600; font-size: .92rem; }
.glossary-index a:hover { background: var(--brand); color: #fff; }
.glossary dt { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--deep-space); padding-top: 28px; border-top: 1px solid var(--line); margin-top: 28px; }
.glossary dt:first-child { border: 0; margin: 0; padding: 0; }
.glossary dd { margin: 8px 0 0; }

/* ---------- Profil (Über mich) ---------- */
.profile-photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--tint); box-shadow: var(--shadow); max-width: 440px; margin: 0 auto; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.placeholder {
  display: grid; place-items: center; text-align: center; height: 100%; min-height: 240px; padding: 24px;
  background: repeating-linear-gradient(45deg, var(--tint), var(--tint) 12px, var(--tint-strong) 12px, var(--tint-strong) 24px);
  color: var(--muted); font-size: .9rem; border-radius: inherit;
}
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--alt-primary); }
.timeline li { position: relative; padding: 0 0 22px 44px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.timeline li:last-child::before { background: var(--brand); }
.timeline strong { font-family: var(--font-head); color: var(--deep-space); display: block; }
.timeline span { color: var(--muted); font-size: .96rem; }

/* ---------- Formular ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.field label { display: block; font-weight: 650; font-size: .95rem; color: var(--deep-space); margin-bottom: 6px; }
.field label .req { color: var(--brand); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--field-border); background: #fff; color: var(--text); transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 72px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(52, 104, 152, .2); }
.field--check { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; color: var(--muted); }
.field--check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--brand); }
.field--check label { font-weight: 400; color: var(--muted); margin: 0; }
.hp-field { position: absolute; left: -9999px; }
.form-note { font-size: .88rem; color: var(--muted); margin: 0; }
.form-status { padding: 14px 18px; border-radius: var(--radius-sm); display: none; }
.form-status.is-success { display: block; background: #EEF1EB; color: var(--secondary); }
.form-status.is-error { display: block; background: #FBEAEA; color: #8A2323; }

.contact-card { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow); border: 1px solid var(--line); }
.contact-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 16px; align-items: center; }
.contact-list .icon-badge { width: 48px; height: 48px; font-size: 24px; margin: 0; border-radius: 14px; }
.contact-list small { display: block; color: var(--muted); font-size: .85rem; }
.contact-list a { font-weight: 650; text-decoration: none; font-size: 1.05rem; }

/* ---------- Vergleichstabelle ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--deep-space); color: #fff; font-family: var(--font-head); }
.compare tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--on-dark-muted); padding: clamp(56px, 7vw, 88px) 0 28px; font-size: .96rem; }
.site-footer a { color: var(--bg); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer-grid h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--bg); margin-bottom: 16px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-brand img { width: 180px; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: .95; }
.footer-brand address { font-style: normal; line-height: 1.8; }
.footer-bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .88rem; color: var(--on-dark-muted);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.footer-bottom button { background: none; border: 0; padding: 0; font: inherit; color: var(--bg); cursor: pointer; }
.footer-bottom button:hover { color: #fff; text-decoration: underline; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.social a:hover { background: var(--primary); text-decoration: none; }
.social svg { width: 18px; height: 18px; fill: #fff; }

/* ---------- Cookie-Hinweis ---------- */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 560px; margin-left: auto;
  background: var(--surface); border-radius: var(--radius); box-shadow: 0 12px 48px rgba(11, 47, 91, .25); border: 1px solid var(--line);
  padding: 24px; font-size: .95rem; display: none;
}
.consent.is-visible { display: block; }
.consent h2 { font-size: 1.1rem; margin-bottom: .4em; }
.consent p { color: var(--muted); margin-bottom: 16px; }
.consent .btn-row { gap: 10px; }

/* ---------- Hilfsklassen ---------- */
.text-center { text-align: center; }
.muted { color: var(--muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-l { margin-top: clamp(32px, 5vw, 56px); }
.stack > * + * { margin-top: 1em; }
.badge { display: inline-block; background: var(--tint); color: var(--brand-strong); font-weight: 650; font-size: .82rem; padding: 4px 12px; border-radius: 999px; }

@media print {
  .site-header, .site-footer, .consent, .article-cta, .series-nav { display: none; }
}

/* Quellenangaben */
.prose a.cite { font-size: .72em; vertical-align: super; line-height: 0; text-decoration: none; font-weight: 650; margin-left: 1px; }
.prose ol.source { font-size: .9rem; color: var(--muted); line-height: 1.6; }
.prose ol.source li:target { background: var(--tint); border-radius: 6px; }
.prose .faq { margin-top: 1em; }
.prose .faq-item summary { font-size: 1.02rem; }

/* Formulartitel und Terminbuchung (kontaktformular.md) */
.form-title { font-size: 20px; margin-bottom: 20px; }
.booking-card { background: var(--primary); color: var(--bg); border-radius: var(--radius); padding: 24px; margin-bottom: 32px; }
.booking-card h2 { color: var(--bg); font-size: 22px; margin-bottom: 8px; }
.booking-card p { color: var(--on-dark-muted); }

/* Leistungsseite: Schmerzpunkt je Phase, Ergebnis, Preisanker (leistungsseiten.md) */
.pain { background: var(--tint); border-radius: var(--radius); padding: 24px; }
.pain__quote { font-weight: 700; font-style: italic; color: var(--navy); font-size: 18px; }
.pain p:last-child { margin-bottom: 0; }
.phase-services { color: var(--primary); margin: 8px 0 16px; }
.phase-result { margin: 24px 0 0; padding: 16px 24px; border-left: 4px solid var(--secondary); background: var(--bg); }
.price-card { background: rgba(251, 251, 255, .06); border: 1px solid rgba(251, 251, 255, .18); border-radius: var(--radius); padding: 24px; }
.price-card__label { font-weight: 700; color: var(--bg); margin-bottom: 4px; }
.price-card__price { font-size: 36px; font-weight: 800; color: var(--bg); margin-bottom: 12px; }
.price-card__price small { font-size: 16px; font-weight: 600; }
.quote--single blockquote { font-size: 22px; font-weight: 600; color: var(--navy); }
.quote--single figcaption { margin-top: 8px; }

/* Fehlermeldungen im Formular (kontaktformular.md) */
.field-error { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: #A12C2C; }
.field [aria-invalid="true"] { border-color: #A12C2C; }
.field.field--check { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; align-items: start; }
.field--check .field-error { grid-column: 2; }

/* Eigene Videos (startet nur auf Klick) */
.video { margin: 0; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--navy); box-shadow: var(--shadow); }
.prose .video { margin: 1.6em 0; }
.video figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* Versicherungssiegel (TEIL-SIEGEL, Versicherung.astro) – Fußzeile und LEIST-06 */
.siegel { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.siegel img { width: 72px; height: 72px; flex: none; }
.siegel p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.siegel strong { display: block; color: var(--navy); font-size: 1rem; }
.siegel--dunkel { margin-top: 24px; }
.siegel--dunkel img { width: 120px; height: 120px; order: 2; }
.siegel--dunkel p { order: 1; flex: 1; min-width: 0; }
.siegel--dunkel p { color: var(--on-dark-muted); font-size: .88rem; }
.siegel--dunkel strong { color: var(--bg); }
/* Breite Bildschirme: Spalte „Unternehmen“ breiter, damit der Text neben dem Siegel Platz hat */
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1.1fr .8fr 1.3fr; }
}
/* Schmale Spalte (Handy, Tablet): Siegel über dem Text statt daneben */
@media (max-width: 900px) {
  .siegel--dunkel { flex-direction: column; align-items: flex-start; }
  .siegel--dunkel img { order: 0; width: 96px; height: 96px; }
  .siegel--dunkel p { order: 1; text-align: left; }
}

/* Fußzeile: Telefon und E-Mail mit Symbol (TEIL-FUSS) */
.footer-kontakt { display: grid; gap: 10px; justify-items: start; }
.footer-kontakt a { display: inline-flex; align-items: center; gap: 10px; }
.footer-kontakt .icon { font-size: 18px; color: var(--alt-primary); }

/* ---------- Bewegung – Stufe „Dezent“ (Tim, 01.10.2026) ----------
   Nur mit <html class="js-bewegung"> (Base.astro), also nie bei „weniger Bewegung“ und nie ohne JavaScript.
   Nur opacity und transform, 0,4–0,6 s. Einblenden beim Scrollen: public/assets/js/bewegung.js */
@keyframes bw-auftauchen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bw-einblenden { from { opacity: 0; } to { opacity: 1; } }

/* Kopfbereich: Überschrift, Unterzeile, Text, Buttons nacheinander */
.js-bewegung .hero h1, .js-bewegung .hero__sub, .js-bewegung .hero .lead, .js-bewegung .hero .btn-row,
.js-bewegung .page-hero h1, .js-bewegung .page-hero .kicker, .js-bewegung .page-hero .lead,
.js-bewegung .page-hero .muted, .js-bewegung .page-hero .btn-row, .js-bewegung .page-hero .profile-photo {
  animation: bw-auftauchen .5s ease-out both;
}
.js-bewegung .hero__sub, .js-bewegung .page-hero h1 { animation-delay: .08s; }
.js-bewegung .hero .lead, .js-bewegung .page-hero .lead { animation-delay: .16s; }
.js-bewegung .hero .btn-row, .js-bewegung .page-hero .muted, .js-bewegung .page-hero .btn-row { animation-delay: .24s; }
.js-bewegung .page-hero .profile-photo { animation-delay: .2s; }

/* Phasengrafik (START-01): einmaliger Aufbau – Ring, Mitte, dann die Phasen der Reihe nach (nur Deckkraft, Knoten sind per transform positioniert) */
.js-bewegung .cycle__ring, .js-bewegung .cycle__core, .js-bewegung .cycle__node { animation: bw-einblenden .45s ease-out both; }
.js-bewegung .cycle__ring { animation-delay: .15s; }
.js-bewegung .cycle__core { animation-delay: .3s; }
.js-bewegung .cycle__node--start { animation-delay: .5s; }
.js-bewegung .cycle__node--1 { animation-delay: .65s; }
.js-bewegung .cycle__node--2 { animation-delay: .8s; }
.js-bewegung .cycle__node--3 { animation-delay: .95s; }
.js-bewegung .cycle__node--4 { animation-delay: 1.1s; }

/* Einblenden beim Scrollen */
.js-bewegung .bw { opacity: 0; transform: translateY(16px); transition: opacity .4s ease-out, transform .4s ease-out; transition-delay: var(--bw-versatz, 0ms); }
.js-bewegung .bw.ist-sichtbar { opacity: 1; transform: none; }

/* Foto im Kopfbereich einer Regionsseite (TRIER-01) – Querformat */
.region-photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--tint); box-shadow: var(--shadow); }
.region-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.js-bewegung .page-hero .region-photo { animation: bw-auftauchen .5s ease-out .2s both; }

/* ---------- Interaktive Phasengrafik (TEIL-KREISLAUF, Kreislauf.astro – nur START-01) ---------- */
.kreislauf__knoten { font: inherit; font-family: var(--font-head); font-weight: 700; cursor: pointer; padding: 0;
  transition: transform .35s ease, background-color .35s ease, color .35s ease, box-shadow .35s ease, border-color .35s ease; }
.kreislauf__knoten:hover, .kreislauf__knoten:focus-visible { border-color: var(--alt-primary); }
.kreislauf__knoten:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.kreislauf__knoten.ist-aktiv { background: var(--brand); color: #fff; border-color: var(--brand);
  transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 8px rgba(52, 104, 152, .15), var(--shadow); z-index: 2; }
.kreislauf__knoten.ist-aktiv .icon { color: #fff; }
.cycle__node--start.ist-aktiv { background: var(--navy); border-color: var(--navy); }
/* Wandernder Punkt auf dem Ring */
.kreislauf__bahn { position: absolute; inset: 11%; border-radius: 50%; pointer-events: none;
  transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.kreislauf__punkt { position: absolute; left: 50%; top: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 6px rgba(52, 104, 152, .2); transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .3s; }
.kreislauf--im-ring .kreislauf__punkt { opacity: 1; }
/* Mitte: Text der aktiven Phase */
.kreislauf__mitte { padding: 6%; }
.kreislauf__text { animation: bw-einblenden .35s ease-out both; }
.kreislauf__text span { display: block; font-weight: 600; font-size: .82em; line-height: 1.35; color: var(--text); }
.kreislauf__text a { display: inline-block; margin-top: 6px; font-size: .78em; color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .kreislauf__knoten, .kreislauf__bahn, .kreislauf__punkt { transition: none; }
  .kreislauf__text { animation: none; }
}
/* Kreislauf in Runden: Spur, sich füllender Ring, Richtungspfeile, Rundenwechsel */
.kreislauf-rahmen { margin: 0; }
.kreislauf__ring { position: absolute; inset: 7.88%; width: 84.24%; height: 84.24%; overflow: visible; }
.kreislauf__spur { fill: none; stroke: var(--alt-primary); stroke-width: .55; stroke-dasharray: 1.6 1.6; }
.kreislauf__fortschritt { fill: none; stroke: var(--brand); stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1); }
.kreislauf__pfeil { fill: none; stroke: var(--brand); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.kreislauf--neue-runde .kreislauf__mitte { animation: kreislauf-puls .7s ease-out; }
@keyframes kreislauf-puls { 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(52, 104, 152, .15), var(--shadow); } }
.kreislauf__legende { max-width: 30em; margin: 14px auto 0; text-align: center; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.js-bewegung .kreislauf__ring { animation: bw-einblenden .45s ease-out .15s both; }
.js-bewegung .kreislauf__legende { animation: bw-einblenden .45s ease-out 1.2s both; }
@media (prefers-reduced-motion: reduce) { .kreislauf__fortschritt { transition: none; } .kreislauf--neue-runde .kreislauf__mitte { animation: none; } }

/* Video: ganze Vorschaufläche startet das Video (main.js) */
.video { position: relative; }
.video__start { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: var(--radius); }
.video__start:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.video__start--symbol::before { content: ""; position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  background: rgba(251, 251, 255, .95); box-shadow: 0 0 0 12px rgba(251, 251, 255, .18), 0 10px 36px rgba(7, 13, 19, .35); transition: transform .2s; }
.video__start--symbol::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -9px;
  border-left: 30px solid var(--primary); border-top: 17px solid transparent; border-bottom: 17px solid transparent; }
.video__start--symbol:hover::before { transform: scale(1.06); }
/* Kreislauf als Kurzanimation: Bewegung kommt Bild für Bild aus dem Skript – keine CSS-Übergänge dazwischen */
.kreislauf .kreislauf__bahn, .kreislauf .kreislauf__fortschritt { transition: none; }
.kreislauf__grund { display: grid; justify-items: center; gap: 2px; width: 100%; }
.kreislauf__kurve { width: 78%; height: auto; overflow: visible; margin: 4px 0 0; }
.kreislauf__linie { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.kreislauf__flaeche { fill: rgba(52, 104, 152, .14); opacity: 0; }
.kreislauf__achse { font-size: .62em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--alt-primary); }
.kreislauf__satz { font-size: .8em; line-height: 1.3; margin-top: 4px; }
.kreislauf--fertig .kreislauf__punkt { opacity: 0; }

/* Abschnitt direkt unter dem Kopfbereich ohne eigenen Abstand nach oben (GLOSSAR-02, UX-Bericht N12) */
.section--anschluss { padding-top: 0; }
.page-hero--kurz { padding-bottom: 28px; }

/* Glossar (GLOSSAR-02): Themen mit Trennlinie in Primärfarbe, Einträge zweispaltig, Nach-oben-Knopf */
.glossar-themen h2 { margin-top: 1.6em; }
.glossar-themen h2:not(:first-child) { border-top: 2px solid var(--primary); padding-top: 1.2em; margin-top: 2em; }
.glossar-themen > p { max-width: 46em; }
.glossar-themen .glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin: 24px 0 0; }
.glossary__eintrag { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; }
.glossary__eintrag dd { font-size: 1rem; line-height: 1.7; }
@media (max-width: 760px) { .glossar-themen .glossary { grid-template-columns: 1fr; } }
.nach-oben { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 22px; font-weight: 700; text-decoration: none;
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; }
.nach-oben.ist-sichtbar { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover { background: var(--navy); color: #fff; }
.nach-oben:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

/* ---------- Kreislauf, futuristische Fassung (Tim 01.10.2026): Kreis + Infokarte rechts ---------- */
@media (min-width: 1100px) { .split--grafik { grid-template-columns: .8fr 1.2fr; } }
.kreislauf-rahmen { display: grid; gap: 24px; align-items: center; }
@media (min-width: 1100px) { .kreislauf-rahmen { grid-template-columns: minmax(0, 1fr) 210px; } }
.kreislauf-rahmen .kreislauf { width: min(100%, 440px); }
/* Ring: leuchtender Verlauf */
.kreislauf__fortschritt { stroke: url(#kreislauf-verlauf); stroke-width: 1.6; filter: drop-shadow(0 0 1.6px rgba(52, 104, 152, .75)); }
.kreislauf__spur { stroke-dasharray: .8 2; stroke-width: .5; }
.kreislauf__punkt { width: 18px; height: 18px; background: #fff; border: 4px solid var(--primary);
  box-shadow: 0 0 0 6px rgba(52, 104, 152, .18), 0 0 22px 4px rgba(52, 104, 152, .55); }
.kreislauf__knoten.ist-aktiv { box-shadow: 0 0 0 7px rgba(52, 104, 152, .16), 0 0 30px rgba(52, 104, 152, .55), var(--shadow); }
/* Mitte: dunkler Mini-Bildschirm */
.kreislauf__mitte { display: grid; place-content: center; justify-items: center; gap: 4px; padding: 10% 8%;
  background: radial-gradient(circle at 50% 35%, #1d4f86 0%, #0B2F5B 62%, #071f3d 100%); color: #FBFBFF;
  box-shadow: inset 0 0 0 1px rgba(139, 169, 196, .35), 0 0 0 6px rgba(52, 104, 152, .12), 0 18px 40px rgba(7, 13, 19, .3); }
.kreislauf__runde { font-size: .62em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8BA9C4; }
.kreislauf__kurve { width: 92%; height: auto; overflow: visible; }
.kreislauf__raster { fill: none; stroke: rgba(139, 169, 196, .18); stroke-width: .5; }
.kreislauf__linie { stroke: #cfe0f0; stroke-width: 2.6; filter: drop-shadow(0 0 2.5px rgba(139, 169, 196, .9)); }
.kreislauf__flaeche { fill: rgba(139, 169, 196, .22); }
.kreislauf__spitze { fill: #fff; filter: drop-shadow(0 0 3px #8BA9C4); opacity: 0; }
.kreislauf__mitte .kreislauf__achse { color: rgba(251, 251, 255, .7); }
/* Infokarte */
.kreislauf__karte { position: relative; min-height: 210px; padding: 22px 22px 20px; border-radius: var(--radius-lg); color: var(--on-dark-muted);
  background: linear-gradient(160deg, rgba(11, 47, 91, .97), rgba(29, 79, 134, .95));
  border: 1px solid rgba(139, 169, 196, .35); box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 20px 50px rgba(11, 47, 91, .28), 0 0 40px rgba(52, 104, 152, .2); }
.kreislauf__karte::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #8BA9C4, transparent); }
.kreislauf__inhalt { display: grid; gap: 8px; animation: bw-einblenden .3s ease-out both; }
.kreislauf__inhalt small { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8BA9C4; }
.kreislauf__inhalt strong { font-family: var(--font-head); font-size: 1.25rem; line-height: 1.25; color: #fff; }
.kreislauf__inhalt span { font-size: .95rem; line-height: 1.55; }
.kreislauf__inhalt a { color: #fff; font-weight: 600; font-size: .92rem; }
.kreislauf__inhalt a::after { content: " →"; }
.kreislauf__hinweis { font-style: normal; font-size: .82rem; color: #8BA9C4; }
.js-bewegung .kreislauf__karte { animation: bw-auftauchen .5s ease-out .9s both; }
@media (prefers-reduced-motion: reduce) { .kreislauf__inhalt { animation: none; } }
.kreislauf__inhalt[hidden] { display: none; }
.kreislauf__mitte .kreislauf__runde { color: #c3d5e8; }
/* Rundenanzeige im Mini-Bildschirm gut sichtbar (Tim 01.10.2026) */
.kreislauf__mitte .kreislauf__runde { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78em; letter-spacing: .1em;
  color: #fff; background: rgba(139, 169, 196, .28); border: 1px solid rgba(195, 213, 232, .55); box-shadow: 0 0 12px rgba(139, 169, 196, .35); }

/* Bilderwechsel (Bilderwechsel.astro, TRIER-01): Überblendung + langsamer Zoom, damit das Foto nicht starr wirkt */
.bilderwechsel { position: relative; isolation: isolate; }
.bilderwechsel__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%;
  opacity: 0; transform: scale(1.02); transition: opacity 1.2s ease; }
.bilderwechsel__bild.ist-aktiv { opacity: 1; animation: bw-kamerafahrt 9s ease-out both; }
@keyframes bw-kamerafahrt { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
@media (prefers-reduced-motion: reduce) { .bilderwechsel__bild { transition: none; } .bilderwechsel__bild.ist-aktiv { animation: none; transform: none; } }

/* Foto ohne Rahmen: läuft weich in den Hintergrund und zum Text aus (TRIER-01, Tim 01.10.2026) */
.region-photo--verlauf { border-radius: 0; box-shadow: none; background: transparent; aspect-ratio: 5 / 4;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to top, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to top, transparent 0%, #000 22%);
  mask-composite: intersect; }
@media (min-width: 900px) {
  .page-hero .split > .region-photo--verlauf { margin-left: -22%; margin-right: -4%; position: relative; z-index: 0; }
  .page-hero .split > :first-child { position: relative; z-index: 1; }
}
@media (max-width: 899px) {
  .region-photo--verlauf { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
}
/* rundum weicher Verlauf (ersetzt die zwei geraden Masken oben) */
.region-photo--verlauf {
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 54% 50%, #000 42%, transparent 99%); -webkit-mask-composite: source-over;
  mask-image: radial-gradient(ellipse 52% 52% at 54% 50%, #000 42%, transparent 99%); mask-composite: add; }
/* alle vier Ränder weich: links breit zum Text, sonst schmal (ersetzt das Oval) */
.region-photo--verlauf {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 80%, transparent 100%);
  mask-composite: intersect; }

/* LEIST-11 „Was ich anbiete“: Leistungskarten mit Phase und Abrechnungsart */
.angebot__karte { display: flex; flex-direction: column; gap: 10px; }
.angebot__karte h3 { margin: 4px 0 0; }
.angebot__karte p { flex: 1; margin: 0; }
.angebot__schilder { display: flex; flex-wrap: wrap; gap: 6px; }
.badge--rand { background: transparent; border: 1px solid var(--alt-primary); color: var(--muted); }

/* Symbole füllen ihr Kästchen besser aus (Tim 06.10.2026): 32 → 40 px in 60 px */
.icon-badge { font-size: 40px; }

/* ---------- Hintergrund-Varianten zur Auswahl (Tim 06.10.2026) – Klasse am <body>: hg-punkte | hg-ringe | hg-schleier ---------- */
/* A · Punktraster */
body.hg-punkte { background-color: var(--bg);
  background-image: radial-gradient(rgba(52, 104, 152, .13) 1px, transparent 1.3px); background-size: 22px 22px; }
/* B · Ringe wie im Logo, abwechselnd links/rechts je Abschnitt */
body.hg-ringe main > .section:not(.section--dark):not(.section--white) { position: relative; overflow: hidden; isolation: isolate; }
body.hg-ringe main > .section:not(.section--dark):not(.section--white)::before { content: ""; position: absolute; z-index: -1; width: 720px; height: 720px; top: -260px; right: -300px;
  border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 46px, rgba(52, 104, 152, .07) 46px 48px); pointer-events: none; }
body.hg-ringe main > .section:nth-of-type(even):not(.section--dark):not(.section--white)::before { right: auto; left: -320px; top: auto; bottom: -300px; }
/* C · Farbschleier */
body.hg-schleier { background-color: var(--bg);
  background-image:
    radial-gradient(40vw 40vw at 92% 8%, rgba(139, 169, 196, .22), transparent 70%),
    radial-gradient(36vw 36vw at 4% 38%, rgba(52, 104, 152, .10), transparent 70%),
    radial-gradient(34vw 34vw at 96% 62%, rgba(160, 170, 153, .16), transparent 70%),
    radial-gradient(38vw 38vw at 10% 92%, rgba(139, 169, 196, .18), transparent 70%);
  background-attachment: fixed; }
/* LEIST-11 Feinschliff: ein Schild oben, Abrechnungsart unten, lange Wörter trennen, Frage-Karte */
.angebot__karte h3 { hyphens: auto; overflow-wrap: break-word; }
.angebot__fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.angebot__art { font-size: .78rem; font-weight: 600; color: var(--muted); border: 1px solid var(--alt-primary); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.angebot__karte--frage { background: var(--navy); border-color: var(--navy); color: var(--on-dark-muted); }
.angebot__karte--frage h3 { color: #fff; }
.angebot__karte--frage .badge { background: rgba(255, 255, 255, .12); color: #fff; }
.angebot__karte--frage .link-arrow { color: #fff; }
.angebot__karte--frage:hover { color: var(--on-dark-muted); border-color: var(--primary); }
.angebot__karte--frage p { color: var(--on-dark-muted); }

/* Kontaktseite: Formular ohne Scrollen sichtbar (Tim 06.10.2026) – nur KONTAKT-01/02 */
.page-hero--kontakt { padding-top: 20px; }
.page-hero--kontakt h1 { margin-bottom: .2em; }
.contact-card--kompakt { padding: 22px 28px 24px; }
.contact-card--kompakt .form-title { font-size: 18px; margin-bottom: 10px; }
.contact-card--kompakt .form { gap: 10px; }
.contact-card--kompakt .form-row { gap: 12px; }
.contact-card--kompakt .field label { margin-bottom: 3px; font-size: .9rem; }
.contact-card--kompakt .field textarea { min-height: 58px; }
.contact-card--kompakt .field--check { font-size: .85rem; line-height: 1.45; }
@media (min-width: 640px) { .form-row--drei { grid-template-columns: 1fr 1fr 1.25fr; } }
.page-hero--kontakt { padding-bottom: 14px; }
.page-hero--kontakt .lead { margin-bottom: 0; }
@media (min-width: 900px) { .split--formular { grid-template-columns: 1.35fr .65fr; gap: 48px; } }
/* Kontaktformular etwas luftiger (Tim 06.10.2026: „zu gequetscht“) */
.contact-card--kompakt { padding: 28px 34px 30px; }
.contact-card--kompakt .form-title { margin-bottom: 14px; }
.contact-card--kompakt .form { gap: 15px; }
.contact-card--kompakt .form-row { gap: 16px; }
.contact-card--kompakt .field label { margin-bottom: 5px; font-size: .93rem; }
.contact-card--kompakt .field textarea { min-height: 64px; }

/* ---------- Kreislauf in 3D (Tim 06.10.2026) – Scheibe schräg, Phasen und Bildschirm stehen aufrecht ---------- */
.kreislauf--3d { --kipp: 0deg; --neig-x: 0deg; --neig-y: 0deg; transform-style: preserve-3d;
  transform: perspective(1300px) rotateX(calc(var(--kipp) + var(--neig-x))) rotateY(var(--neig-y));
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); margin-block: -6% -2%; }
.kreislauf--3d.ist-gekippt { --kipp: 50deg; }
.kreislauf--3d > * { transform-style: preserve-3d; }
/* Boden: weicher Schatten und Lichtfläche unter dem Ring */
.kreislauf--3d::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; transform: translateZ(-2px);
  background: radial-gradient(circle, rgba(52, 104, 152, .16) 0%, rgba(52, 104, 152, .06) 55%, transparent 72%); }
/* Phasen aufrecht (gegen die Kippung gedreht) und leicht angehoben */
.kreislauf--3d .kreislauf__knoten { transform: translate(-50%, -50%) translateZ(28px) rotateX(calc(-1 * var(--kipp)));
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), background-color .35s, color .35s, box-shadow .35s, border-color .35s; }
.kreislauf--3d .kreislauf__knoten.ist-aktiv { transform: translate(-50%, -50%) translateZ(46px) rotateX(calc(-1 * var(--kipp))) scale(1.12); }
/* Bildschirm schwebt über der Mitte */
.kreislauf--3d .kreislauf__mitte { transform: translateZ(70px) rotateX(calc(-1 * var(--kipp))); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.kreislauf--3d.kreislauf--neue-runde .kreislauf__mitte { animation: none; }
@media (prefers-reduced-motion: reduce) { .kreislauf--3d, .kreislauf--3d .kreislauf__knoten, .kreislauf--3d .kreislauf__mitte { transition: none; } }
/* 3D nachjustiert: weniger Kippung, Bildschirm niedriger und kleiner, damit „Analyse“ hinten frei bleibt */
.kreislauf--3d.ist-gekippt { --kipp: 36deg; }
.kreislauf--3d { margin-block: -3% 0; }
.kreislauf--3d .kreislauf__mitte { transform: translateZ(26px) rotateX(calc(-1 * var(--kipp))) scale(.86); }
.kreislauf--3d .kreislauf__knoten { transform: translate(-50%, -50%) translateZ(18px) rotateX(calc(-1 * var(--kipp))); }
.kreislauf--3d .kreislauf__knoten.ist-aktiv { transform: translate(-50%, -50%) translateZ(34px) rotateX(calc(-1 * var(--kipp))) scale(1.1); }

/* ---------- Umlaufbahnen (TEIL-UMLAUFBAHNEN, Variante START-01) ---------- */
.orbit { position: relative; width: min(100%, 500px); aspect-ratio: 1.12; margin: 0 auto; perspective: 1400px; }
.orbit__ebene { position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 1; transform: translateY(-50%) rotateX(62deg); transform-style: preserve-3d; }
.orbit__bahn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1.5px solid rgba(52, 104, 152, .26); box-shadow: 0 0 14px rgba(139, 169, 196, .25); }
.orbit__arm { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateZ(var(--w)); animation: orbit-dreh var(--t) linear infinite; }
.orbit__planet { position: absolute; left: 50%; top: 0; transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateZ(calc(-1 * var(--w))); animation: orbit-gegen var(--t) linear infinite; }
@keyframes orbit-dreh { from { transform: translate(-50%, -50%) rotateZ(var(--w)); } to { transform: translate(-50%, -50%) rotateZ(calc(var(--w) + 360deg)); } }
@keyframes orbit-gegen { from { transform: translate(-50%, -50%) rotateZ(calc(-1 * var(--w))); } to { transform: translate(-50%, -50%) rotateZ(calc(-1 * var(--w) - 360deg)); } }
.orbit--halt .orbit__arm, .orbit--halt .orbit__planet { animation-play-state: paused; }
.orbit__koerper { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
  transform: rotateX(-62deg); opacity: 0; scale: .3; transition: opacity .6s ease, scale .8s cubic-bezier(.2, .9, .3, 1.3); transition-delay: calc(var(--i) * .16s + .2s); }
.orbit--start .orbit__koerper { opacity: 1; scale: 1; }
.orbit__kugel { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: var(--brand);
  background: radial-gradient(circle at 35% 30%, #fff, #dfe9f4 72%); box-shadow: 0 8px 18px rgba(11, 47, 91, .22), inset 0 -4px 10px rgba(52, 104, 152, .16);
  transition: transform .3s, background .3s, color .3s, box-shadow .3s; }
.orbit__name { font-family: var(--font-head); font-weight: 700; font-size: .8rem; color: var(--deep-space); white-space: nowrap;
  background: rgba(251, 251, 255, .88); padding: 1px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(11, 47, 91, .08); }
.orbit__name b { color: var(--brand); }
.orbit__koerper:focus-visible { outline: none; }
.orbit__koerper:focus-visible .orbit__kugel { outline: 3px solid var(--primary); outline-offset: 3px; }
.orbit__koerper.ist-aktiv .orbit__kugel { transform: scale(1.18); color: #fff; background: radial-gradient(circle at 35% 30%, #5f93c6, var(--brand) 70%);
  box-shadow: 0 0 0 8px rgba(52, 104, 152, .16), 0 0 30px rgba(52, 104, 152, .6); }
.orbit__sonne { position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) rotateX(-62deg);
  display: grid; place-content: center; justify-items: center; gap: 2px; padding: 4%; color: #FBFBFF; font-size: clamp(.62rem, 1.4vw, .78rem);
  background: radial-gradient(circle at 50% 35%, #1d4f86 0%, #0B2F5B 62%, #071f3d 100%);
  box-shadow: 0 0 0 8px rgba(52, 104, 152, .14), 0 0 50px 8px rgba(52, 104, 152, .45); }
.orbit__sonne small { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85em; color: #c3d5e8; }
.orbit__sonne .kreislauf__kurve { width: 86%; }
.orbit__sonne .kreislauf__achse { font-size: .78em; }
.orbit__linie { stroke-dashoffset: 100; transition: stroke-dashoffset 2.6s ease-in-out 1s; }
.orbit__flaeche { opacity: 0; transition: opacity 2s ease 1.6s; }
.orbit--start .orbit__linie { stroke-dashoffset: 0; }
.orbit--start .orbit__flaeche { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .orbit__arm, .orbit__planet { animation: none; }
  .orbit__koerper, .orbit__linie, .orbit__flaeche { transition: none; }
}
/* Kreislauf: erreichte Phasen ruhig markieren statt aufblinken */
.kreislauf__knoten.ist-erreicht { border-color: rgba(52, 104, 152, .55); }

/* =====================================================================
   Taste-Regler 6 · 5 · 5 (Test und Entscheidung Tim 06.10.2026, vorher 4 · 3 · 4)
   VARIANCE 6 versetzt · MOTION 5 fließendes CSS · DENSITY 5 Standard-Abstände
   ===================================================================== */
/* DENSITY 5: Standard-Abstände statt luftig */
:root { --section: 56px; --ease: cubic-bezier(.16, 1, .3, 1); }
@media (min-width: 900px) { :root { --section: 80px; } }
.section-head { margin-bottom: clamp(26px, 4vw, 42px); }

/* VARIANCE 6: linksbündige Abschnittsköpfe statt zentriert */
.section-head--center { text-align: left; margin-left: 0; }

/* VARIANCE 6: Logo-Leiste (START-02) schwebt als Karte über der Kante zum Kopfbereich */
@media (min-width: 900px) {
  .section--logos { padding: 0; background: transparent; position: relative; z-index: 2; }
  .section--logos > .container { margin-top: -52px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px 36px 26px; }
  .section--logos + .section { padding-top: calc(var(--section) * .8); }
  /* Video (START-04) ragt in den Abschnitt darüber */
  .section .split > .video { margin-top: -4.5rem; position: relative; z-index: 1; }
  /* „Wo stehen Sie gerade?“: mittlere Karte versetzt */
  .grid--3 > .card--problem:nth-child(2) { transform: translateY(28px); }
  .grid--3 > .card--problem:nth-child(2):hover { transform: translateY(25px); }
}

/* VARIANCE 6: Kartenflächen nicht alle gleich (LEIST-11) */
.angebot__karte:nth-child(1) { background: linear-gradient(160deg, var(--tint) 0%, var(--surface) 70%); }
.angebot__karte:nth-child(6) { background: linear-gradient(160deg, #EEF1EB 0%, var(--surface) 70%); }

/* MOTION 5: eine federnde Kurve für Übergänge, Druck-Rückmeldung beim Klicken */
.btn, .card--link, .phase--link, .kreislauf__knoten { transition-timing-function: var(--ease); transition-duration: .3s; }
.btn:active { transform: translateY(1px) scale(.98); }
.card--link:active, .phase--link:active { transform: scale(.985); }

/* ---------- Kreislauf: Phasen kreisen nach der Animation wie Planeten um die Mitte (Tim 06.10.2026) ---------- */
@property --dreh { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes kreislauf-umlauf { to { --dreh: 360deg; } }
.kreislauf--kreist { animation: kreislauf-umlauf 80s linear infinite; }
.kreislauf-rahmen:hover .kreislauf--kreist, .kreislauf-rahmen:focus-within .kreislauf--kreist { animation-play-state: paused; }
/* flache Fassung: Scheibe dreht, Phasen und Mitte drehen gegen, bleiben aufrecht */
.kreislauf--kreist:not(.kreislauf--3d) { transform: rotate(var(--dreh)); }
.kreislauf--kreist:not(.kreislauf--3d) .kreislauf__knoten { transform: translate(-50%, -50%) rotate(calc(-1 * var(--dreh))); }
.kreislauf--kreist:not(.kreislauf--3d) .kreislauf__knoten.ist-aktiv { transform: translate(-50%, -50%) rotate(calc(-1 * var(--dreh))) scale(1.12); }
.kreislauf--kreist:not(.kreislauf--3d) .kreislauf__mitte { transform: rotate(calc(-1 * var(--dreh))); }
/* 3D-Fassung: Drehung in der gekippten Ebene */
.kreislauf--3d.kreislauf--kreist { transform: perspective(1300px) rotateX(calc(var(--kipp) + var(--neig-x))) rotateY(var(--neig-y)) rotateZ(var(--dreh)); }
.kreislauf--3d.kreislauf--kreist .kreislauf__knoten { transform: translate(-50%, -50%) rotateZ(calc(-1 * var(--dreh))) translateZ(18px) rotateX(calc(-1 * var(--kipp))); }
.kreislauf--3d.kreislauf--kreist .kreislauf__knoten.ist-aktiv { transform: translate(-50%, -50%) rotateZ(calc(-1 * var(--dreh))) translateZ(34px) rotateX(calc(-1 * var(--kipp))) scale(1.1); }
.kreislauf--3d.kreislauf--kreist .kreislauf__mitte { transform: rotateZ(calc(-1 * var(--dreh))) translateZ(26px) rotateX(calc(-1 * var(--kipp))) scale(.86); }
/* während des Kreisens keine Übergangsverzögerung auf transform, sonst „schwimmen“ die Phasen hinterher */
.kreislauf--kreist, .kreislauf--kreist .kreislauf__knoten, .kreislauf--kreist .kreislauf__mitte { transition-property: background-color, color, box-shadow, border-color; }
/* Neigung (Maus) und Kippung weich über registrierte Werte statt über transform-Übergänge */
@property --neig-x { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --neig-y { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --kipp { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.kreislauf--3d { transition: --kipp 1.1s cubic-bezier(.2, .7, .2, 1), --neig-x .6s ease-out, --neig-y .6s ease-out; }
@media (prefers-reduced-motion: reduce) { .kreislauf--3d { transition: none; } }
/* Nachrichtenfeld größer (Tim 06.10.2026) – Vorrang vor „Formular ohne Scrollen“ */
.contact-card--kompakt .field textarea { min-height: 150px; }

/* ---------- Kreislauf: Phasen als Planeten mit Oberfläche (Tim 06.10.2026) ----------
   Farben aus der Markenpalette, so abgedunkelt, dass weiße Schrift lesbar bleibt (Kontrast prüfen: UX-Agent) */
.kreislauf__knoten[data-phase="0"] { --planet: #346898; }   /* Analyse – Primärblau */
.kreislauf__knoten[data-phase="1"] { --planet: #44739F; }   /* Präsenz – Hellblau, abgedunkelt */
.kreislauf__knoten[data-phase="2"] { --planet: #586A4D; }   /* Reichweite – Grün */
.kreislauf__knoten[data-phase="3"] { --planet: #5F6F57; }   /* Vertrauen – Graugrün, abgedunkelt */
.kreislauf__knoten[data-phase="4"] { --planet: #0B2F5B; }   /* Steuerung – Navy */
.kreislauf .kreislauf__knoten {
  color: #fff; border-color: rgba(255, 255, 255, .25); text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .12) 22%, rgba(255, 255, 255, 0) 40%),
    repeating-linear-gradient(-22deg, rgba(255, 255, 255, .05) 0 9px, rgba(255, 255, 255, 0) 9px 18px, rgba(0, 0, 0, .05) 18px 26px, rgba(255, 255, 255, 0) 26px 36px),
    radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--planet) 70%, #fff) 0%, var(--planet) 52%, color-mix(in srgb, var(--planet) 55%, #000) 100%);
  box-shadow: inset -12px -14px 26px rgba(0, 0, 0, .38), inset 6px 6px 14px rgba(255, 255, 255, .16), 0 12px 28px rgba(11, 47, 91, .30);
}
.kreislauf .kreislauf__knoten .icon { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.kreislauf .kreislauf__knoten.ist-erreicht { border-color: rgba(255, 255, 255, .55); }
.kreislauf .kreislauf__knoten:hover, .kreislauf .kreislauf__knoten:focus-visible { border-color: rgba(255, 255, 255, .8); }
/* aktiv: Planet leuchtet (Atmosphäre) statt umzufärben */
.kreislauf .kreislauf__knoten.ist-aktiv { color: #fff; border-color: rgba(255, 255, 255, .9);
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .14) 22%, rgba(255, 255, 255, 0) 40%),
    repeating-linear-gradient(-22deg, rgba(255, 255, 255, .05) 0 9px, rgba(255, 255, 255, 0) 9px 18px, rgba(0, 0, 0, .05) 18px 26px, rgba(255, 255, 255, 0) 26px 36px),
    radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--planet) 60%, #fff) 0%, var(--planet) 52%, color-mix(in srgb, var(--planet) 60%, #000) 100%);
  box-shadow: inset -12px -14px 26px rgba(0, 0, 0, .3), 0 0 0 7px color-mix(in srgb, var(--planet) 22%, transparent), 0 0 34px color-mix(in srgb, var(--planet) 70%, transparent), 0 12px 28px rgba(11, 47, 91, .3); }

/* ---------- Kreislauf: Licht kommt von der Mitte (Sonne) – Reflex zur Mitte, Schatten nach außen (Tim 06.10.2026) ----------
   --winkel: Lage des Planeten (0° oben, im Uhrzeigersinn), --dreh: aktueller Umlauf. --lx/--ly: Richtung zur Sonne. */
.kreislauf .kreislauf__knoten {
  --licht: calc(var(--winkel, 0deg) + var(--dreh, 0deg) + 180deg);
  --lx: sin(var(--licht)); --ly: calc(-1 * cos(var(--licht)));
  background:
    radial-gradient(circle at calc(50% + var(--lx) * 26%) calc(50% + var(--ly) * 26%), rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .12) 20%, rgba(255, 255, 255, 0) 38%),
    repeating-linear-gradient(-22deg, rgba(255, 255, 255, .05) 0 9px, rgba(255, 255, 255, 0) 9px 18px, rgba(0, 0, 0, .05) 18px 26px, rgba(255, 255, 255, 0) 26px 36px),
    radial-gradient(circle at calc(50% + var(--lx) * 16%) calc(50% + var(--ly) * 16%), color-mix(in srgb, var(--planet) 70%, #fff) 0%, var(--planet) 50%, color-mix(in srgb, var(--planet) 50%, #000) 100%);
  box-shadow:
    inset calc(var(--lx) * 14px) calc(var(--ly) * 14px) 24px rgba(0, 0, 0, .42),
    inset calc(var(--lx) * -5px) calc(var(--ly) * -5px) 12px rgba(255, 255, 255, .14),
    calc(var(--lx) * -12px) calc(var(--ly) * -12px + 6px) 22px rgba(11, 47, 91, .30);
}
.kreislauf .kreislauf__knoten.ist-aktiv {
  background:
    radial-gradient(circle at calc(50% + var(--lx) * 26%) calc(50% + var(--ly) * 26%), rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .14) 20%, rgba(255, 255, 255, 0) 38%),
    repeating-linear-gradient(-22deg, rgba(255, 255, 255, .05) 0 9px, rgba(255, 255, 255, 0) 9px 18px, rgba(0, 0, 0, .05) 18px 26px, rgba(255, 255, 255, 0) 26px 36px),
    radial-gradient(circle at calc(50% + var(--lx) * 16%) calc(50% + var(--ly) * 16%), color-mix(in srgb, var(--planet) 60%, #fff) 0%, var(--planet) 50%, color-mix(in srgb, var(--planet) 55%, #000) 100%);
  box-shadow:
    inset calc(var(--lx) * 12px) calc(var(--ly) * 12px) 22px rgba(0, 0, 0, .34),
    0 0 0 7px color-mix(in srgb, var(--planet) 22%, transparent), 0 0 34px color-mix(in srgb, var(--planet) 70%, transparent),
    calc(var(--lx) * -12px) calc(var(--ly) * -12px + 6px) 22px rgba(11, 47, 91, .3);
}

/* ---------- Kreislauf: Planeten-Palette und eigene Oberflächen (Tim 06.10.2026) ----------
   Farbtöne gleichmäßig 223° → 123° (Indigo, Blau, Petrol, Blaugrün, Grün), Helligkeit 32–44 %,
   Weiß darauf 5,4–6,2 : 1 (berechnet 06.10.2026). Ersetzt die Farben oben. */
.kreislauf__knoten[data-phase="0"] { --planet: #4A5F96;   /* Analyse – Indigo, feine Gasstreifen */
  --textur: repeating-linear-gradient(-8deg, rgba(255, 255, 255, .07) 0 3px, rgba(255, 255, 255, 0) 3px 8px, rgba(0, 0, 0, .06) 8px 10px, rgba(255, 255, 255, 0) 10px 15px); }
.kreislauf__knoten[data-phase="1"] { --planet: #346898;   /* Präsenz – Blau, Krater */
  --textur: radial-gradient(circle at 28% 68%, rgba(255, 255, 255, .12) 0 7%, transparent 8%), radial-gradient(circle at 70% 30%, rgba(0, 0, 0, .10) 0 9%, transparent 10%),
            radial-gradient(circle at 62% 74%, rgba(255, 255, 255, .09) 0 5%, transparent 6%), radial-gradient(circle at 40% 22%, rgba(0, 0, 0, .08) 0 5%, transparent 6%); }
.kreislauf__knoten[data-phase="2"] { --planet: #2F7186;   /* Reichweite – Petrol, Wirbel */
  --textur: radial-gradient(ellipse 120% 40% at 30% 35%, transparent 55%, rgba(255, 255, 255, .10) 56% 62%, transparent 63%),
            radial-gradient(ellipse 120% 45% at 70% 70%, transparent 55%, rgba(0, 0, 0, .09) 56% 63%, transparent 64%); }
.kreislauf__knoten[data-phase="3"] { --planet: #2E7569;   /* Vertrauen – Blaugrün, Kontinente */
  --textur: radial-gradient(ellipse 28% 18% at 32% 40%, rgba(160, 190, 140, .30), transparent 70%), radial-gradient(ellipse 22% 26% at 66% 64%, rgba(160, 190, 140, .26), transparent 70%),
            radial-gradient(ellipse 18% 10% at 58% 28%, rgba(160, 190, 140, .22), transparent 70%); }
.kreislauf__knoten[data-phase="4"] { --planet: #4E7350;   /* Steuerung – Grün, Polkappe */
  --textur: radial-gradient(ellipse 60% 22% at 50% 4%, rgba(255, 255, 255, .28), transparent 70%), radial-gradient(ellipse 50% 16% at 50% 98%, rgba(255, 255, 255, .16), transparent 70%); }
.kreislauf .kreislauf__knoten, .kreislauf .kreislauf__knoten.ist-aktiv {
  background:
    radial-gradient(circle at calc(50% + var(--lx) * 26%) calc(50% + var(--ly) * 26%), rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .1) 20%, rgba(255, 255, 255, 0) 38%),
    var(--textur),
    radial-gradient(circle at calc(50% + var(--lx) * 16%) calc(50% + var(--ly) * 16%), color-mix(in srgb, var(--planet) 72%, #fff) 0%, var(--planet) 50%, color-mix(in srgb, var(--planet) 55%, #000) 100%);
}
/* Nachtseite: sonnenabgewandte Hälfte deutlich dunkler (Tim 06.10.2026) – Verlauf zeigt von der Sonne weg */
.kreislauf .kreislauf__knoten, .kreislauf .kreislauf__knoten.ist-aktiv {
  background:
    radial-gradient(circle at calc(50% + var(--lx) * 26%) calc(50% + var(--ly) * 26%), rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .1) 20%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(calc(var(--licht) + 180deg), rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .22) 62%, rgba(0, 0, 0, .48) 100%),
    var(--textur),
    radial-gradient(circle at calc(50% + var(--lx) * 16%) calc(50% + var(--ly) * 16%), color-mix(in srgb, var(--planet) 72%, #fff) 0%, var(--planet) 50%, color-mix(in srgb, var(--planet) 55%, #000) 100%);
}

/* ---------- Kreislauf: größere Bahn, Planet nur mit Symbol, Name als Schild darunter (Tim 06.10.2026) ----------
   Bahnradius 44 % statt 39 %: Ring-SVG und Bahn des Punkts entsprechend vergrößert */
.kreislauf .kreislauf__ring { inset: 2.48%; width: 95.04%; height: 95.04%; }
.kreislauf .kreislauf__bahn { inset: 6%; }
.kreislauf .kreislauf__knoten { width: 21%; font-size: 0; gap: 0; }
.kreislauf .kreislauf__knoten .icon { font-size: clamp(26px, 6vw, 40px); }
.kreislauf__name { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-head); font-weight: 700; font-size: clamp(.72rem, 1.6vw, .86rem); color: var(--deep-space); text-shadow: none;
  background: rgba(251, 251, 255, .92); padding: 2px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(11, 47, 91, .12); }
.kreislauf .kreislauf__knoten.ist-aktiv .kreislauf__name { color: #fff; background: var(--planet); }
/* Sonne etwas größer, weil die Planeten weiter weg sind */
.kreislauf .kreislauf__mitte { inset: 28%; }
/* 3D: Sonne kleiner, damit das Schild des hinteren Planeten frei bleibt */
.kreislauf--3d .kreislauf__mitte { transform: translateZ(20px) rotateX(calc(-1 * var(--kipp))) scale(.7); }
.kreislauf--3d.kreislauf--kreist .kreislauf__mitte { transform: rotateZ(calc(-1 * var(--dreh))) translateZ(20px) rotateX(calc(-1 * var(--kipp))) scale(.7); }
/* Namensschild außen (von der Sonne weg), damit Bahn und Punkt es nie überdecken (Tim 06.10.2026) */
.kreislauf .kreislauf__name { top: auto; z-index: 3;
  left: calc(50% - var(--lx) * 98%); top: calc(50% - var(--ly) * 92%); transform: translate(-50%, -50%); }
.kreislauf--3d .kreislauf__name { transform: translate(-50%, -50%) translateZ(30px); }
/* Platz für die außen liegenden Namensschilder */
.kreislauf-rahmen .kreislauf { width: min(78%, 400px); margin-inline: auto; }
.kreislauf .kreislauf__name { left: calc(50% - var(--lx) * 88%); top: calc(50% - var(--ly) * 86%); }
/* Schild um die halbe eigene Breite/Höhe nach außen versetzen – seitlich daneben, oben/unten mittig */
.kreislauf .kreislauf__name { left: calc(50% - var(--lx) * 56%); top: calc(50% - var(--ly) * 62%);
  transform: translate(calc(-50% - var(--lx) * 50%), calc(-50% - var(--ly) * 50%)); }
.kreislauf--3d .kreislauf__name { transform: translate(calc(-50% - var(--lx) * 50%), calc(-50% - var(--ly) * 50%)) translateZ(30px); }
@media (min-width: 1100px) { .kreislauf-rahmen { gap: 44px; } }
.kreislauf__name { white-space: nowrap; }

/* ---------- Infokarte erscheint erst beim Überfahren einer Phase – langsam, futuristisch (Tim 06.10.2026) ---------- */
.kreislauf__karte { overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none;
  transform: perspective(900px) rotateY(-28deg) translateX(-28px) scale(.86); filter: blur(6px) saturate(.6);
  clip-path: inset(48% 0 48% 0 round var(--radius-lg));
  transition: opacity .5s ease, transform .9s cubic-bezier(.16, 1, .3, 1), filter .7s ease, clip-path .8s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .9s; }
.karte-offen .kreislauf__karte { opacity: 1; visibility: visible; pointer-events: auto; transform: none; filter: none;
  clip-path: inset(0 0 0 0 round var(--radius-lg)); transition-delay: 0s, 0s, .1s, 0s, 0s; }
.js-bewegung .kreislauf__karte { animation: none; }
/* Lichtkante, die beim Öffnen einmal von oben nach unten über die Karte fährt */
.kreislauf__karte::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(139, 169, 196, .35) 45%, rgba(255, 255, 255, .55) 50%, rgba(139, 169, 196, .35) 55%, transparent); opacity: 0; }
.karte-offen .kreislauf__karte::after { animation: karte-scan 1.1s ease-out .25s 1; }
@keyframes karte-scan { 0% { top: -30%; opacity: 1; } 100% { top: 110%; opacity: 0; } }
/* Leuchtrand, solange offen */
.karte-offen .kreislauf__karte { box-shadow: 0 0 0 1px rgba(139, 169, 196, .5) inset, 0 20px 50px rgba(11, 47, 91, .28), 0 0 36px rgba(52, 104, 152, .45); }
/* Text in der Karte blendet nach dem Aufklappen ein */
.karte-offen .kreislauf__inhalt { animation: bw-auftauchen .5s ease-out .35s both; }
/* Hinweis unter der Grafik */
.kreislauf__tipp { grid-column: 1 / -1; text-align: center; margin: 4px 0 0; font-size: .85rem; color: var(--muted); }
@media (min-width: 1100px) { .kreislauf__tipp { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) {
  .kreislauf__karte { transform: none; filter: none; clip-path: none; transition: opacity .2s, visibility 0s linear .2s; }
  .karte-offen .kreislauf__karte::after { animation: none; }
}

/* ---------- Kreislauf größer, Infokarte legt sich darüber (Tim 06.10.2026) ---------- */
.kreislauf-rahmen { position: relative; display: block; }
.kreislauf-rahmen .kreislauf { width: min(88%, 540px); margin-inline: auto; }
.kreislauf__karte { position: absolute; z-index: 5; right: 0; top: 50%; width: min(290px, 70%); min-height: 0;
  margin-top: -14px; translate: 0 -50%;
  background: linear-gradient(160deg, rgba(11, 47, 91, .94), rgba(29, 79, 134, .92)); backdrop-filter: blur(6px); }
@media (min-width: 1100px) { .kreislauf__karte { right: -36px; } }
.kreislauf__tipp { margin-top: 10px; }
/* 3D: kein Filter auf dem gekippten Ring (wird sonst pixelig gerastert) */
.kreislauf--3d .kreislauf__fortschritt { filter: none; stroke-width: 1.9; }
.kreislauf--3d .kreislauf__spur { stroke-dasharray: none; stroke-width: .7; stroke: rgba(139, 169, 196, .55); }

/* ---------- Kreislauf: Planeten drehen sich um die eigene Achse (Tim 06.10.2026) ----------
   Oberfläche gleitet seitlich in einer runden Maske; Licht und Nachtseite liegen darüber und bleiben stehen. */
.kreislauf .kreislauf__knoten, .kreislauf .kreislauf__knoten.ist-aktiv {
  background: radial-gradient(circle at calc(50% + var(--lx) * 16%) calc(50% + var(--ly) * 16%), color-mix(in srgb, var(--planet) 72%, #fff) 0%, var(--planet) 50%, color-mix(in srgb, var(--planet) 55%, #000) 100%);
}
.kreislauf__oberflaeche { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.kreislauf__oberflaeche::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
  background: var(--textur); background-size: 50% 100%; background-repeat: repeat-x;
  animation: planet-eigendrehung var(--spin, 24s) linear infinite; }
.kreislauf__oberflaeche::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at calc(50% + var(--lx) * 26%) calc(50% + var(--ly) * 26%), rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .1) 20%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(calc(var(--licht) + 180deg), rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .22) 62%, rgba(0, 0, 0, .48) 100%); }
@keyframes planet-eigendrehung { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kreislauf .kreislauf__knoten .icon { position: relative; z-index: 1; }
.kreislauf__knoten[data-phase="0"] { --spin: 18s; }
.kreislauf__knoten[data-phase="1"] { --spin: 30s; }
.kreislauf__knoten[data-phase="2"] { --spin: 22s; }
.kreislauf__knoten[data-phase="3"] { --spin: 34s; }
.kreislauf__knoten[data-phase="4"] { --spin: 26s; }
@media (prefers-reduced-motion: reduce) { .kreislauf__oberflaeche::before { animation: none; } }

/* ---------- Planeten mit realistischer Oberfläche (Gelände + Wolken als Bilder, quellen/planeten/erzeuge.py) ---------- */
.kreislauf__oberflaeche::before { background: var(--gelaende) 0 0 / 50% 100% repeat-x; }
.kreislauf__wolken { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; background: var(--wolken) 0 0 / 50% 100% repeat-x;
  animation: planet-eigendrehung calc(var(--spin, 24s) * .7) linear infinite; }
/* Kugelwölbung: Rand dunkler, als würde die Oberfläche nach hinten wegkrümmen */
.kreislauf__oberflaeche { box-shadow: inset 0 0 18px 6px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { .kreislauf__wolken { animation: none; } }
/* stärkere Nachtseite und Lesbarkeit der Symbole auf den Bild-Oberflächen */
.kreislauf__oberflaeche::after {
  background:
    radial-gradient(circle at calc(50% + var(--lx) * 28%) calc(50% + var(--ly) * 28%), rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, .06) 22%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(calc(var(--licht) + 180deg), rgba(4, 12, 28, 0) 38%, rgba(4, 12, 28, .45) 58%, rgba(4, 12, 28, .82) 100%),
    radial-gradient(circle, rgba(4, 16, 36, .38) 0, rgba(4, 16, 36, .18) 30%, rgba(4, 16, 36, 0) 52%); }
.kreislauf .kreislauf__knoten .icon { filter: drop-shadow(0 0 4px rgba(4, 16, 36, .85)) drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }

/* ---------- Raumschiff (TEIL-KREISLAUF) ---------- */
.kreislauf-rahmen { --schiff: 46px; }
.kreislauf__schiff { position: absolute; left: 0; top: 0; z-index: 6; width: var(--schiff); height: calc(var(--schiff) / 2);
  margin: calc(var(--schiff) / -4) 0 0 calc(var(--schiff) / -2); pointer-events: none; opacity: 0; transition: opacity .3s;
  filter: drop-shadow(0 2px 4px rgba(11, 47, 91, .45)); }
.kreislauf__schiff svg { width: 100%; height: 100%; overflow: visible; }
.kreislauf__schiff.fliegt, .karte-offen .kreislauf__schiff { opacity: 1; }
.schiff__rumpf { fill: #e9f0f7; stroke: #0B2F5B; stroke-width: 1; }
.schiff__fenster { fill: #346898; }
.schiff__fluegel { fill: #8BA9C4; stroke: #0B2F5B; stroke-width: .8; }
.schiff__flamme { fill: #ffd27a; opacity: 0; transform-origin: 6px 10px; }
.fliegt .schiff__flamme { opacity: 1; animation: flamme .12s ease-in-out infinite alternate; }
@keyframes flamme { from { transform: scaleX(.7); fill: #ffd27a; } to { transform: scaleX(1.25); fill: #ff9f5a; } }
.kreislauf__funke { position: absolute; z-index: 5; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0, #9fc4e8 45%, rgba(139, 169, 196, 0) 70%); animation: funke .9s ease-out forwards; }
@keyframes funke { from { opacity: .9; transform: scale(1.2); } to { opacity: 0; transform: scale(.2); } }
@media (prefers-reduced-motion: reduce) { .kreislauf__schiff, .kreislauf__funke { display: none; } }

/* ---------- Größere Infokarte mit drehendem Planeten links (Tim 06.10.2026) ---------- */
.kreislauf__karte { width: min(440px, 92%); display: grid; grid-template-columns: 128px 1fr; gap: 20px; align-items: center; padding: 22px 24px; }
.kreislauf__karte .kreislauf__inhalt { grid-column: 2; grid-row: 1; }
.karte__planet { grid-column: 1; grid-row: 1; position: relative; width: 128px; aspect-ratio: 1; border-radius: 50%;
  --licht: -45deg; --lx: -.7; --ly: -.7; --spin: 9s;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 40px rgba(139, 169, 196, .35); }
.karte__planet .kreislauf__oberflaeche { inset: 0; }
.karte__planet .kreislauf__oberflaeche { background: var(--planet, #346898); }
.karte__planet.kommt { animation: karte-planet-kommt 1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes karte-planet-kommt { from { opacity: 0; transform: scale(.35) rotate(-40deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
/* Ring auch in der Karte beim Gasriesen */
.karte__planet[data-phase="2"]::before, .karte__planet[data-phase="2"]::after { content: ""; position: absolute; left: -26%; right: -26%; top: 40%; height: 20%;
  border-radius: 50%; border: 6px solid rgba(214, 196, 160, .75); box-shadow: 0 0 0 3px rgba(139, 169, 196, .35); transform: rotate(-16deg); pointer-events: none; }
.karte__planet[data-phase="2"]::before { z-index: 0; }
.karte__planet[data-phase="2"]::after { z-index: 2; clip-path: inset(50% 0 0 0); }
@media (max-width: 560px) { .kreislauf__karte { grid-template-columns: 1fr; } .karte__planet { width: 92px; } .kreislauf__karte .kreislauf__inhalt { grid-column: 1; grid-row: 2; } }

/* ---------- Ring um den Gasriesen Reichweite ---------- */
.kreislauf__knoten[data-phase="2"]::before, .kreislauf__knoten[data-phase="2"]::after { content: ""; position: absolute; left: -24%; right: -24%; top: 41%; height: 18%;
  border-radius: 50%; border: 3px solid rgba(214, 196, 160, .8); box-shadow: 0 0 0 2px rgba(139, 169, 196, .3); transform: rotate(calc(-16deg - var(--dreh, 0deg))); pointer-events: none; }
.kreislauf__knoten[data-phase="2"]::before { z-index: -1; }
.kreislauf__knoten[data-phase="2"]::after { z-index: 2; clip-path: inset(50% 0 0 0); }

/* ---------- Sonne pulsiert und strahlt ---------- */
.kreislauf__mitte { overflow: visible; }
.kreislauf__mitte::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(139, 169, 196, .55) 0%, rgba(52, 104, 152, .25) 38%, rgba(52, 104, 152, 0) 68%),
              repeating-conic-gradient(from 0deg, rgba(160, 195, 230, .28) 0deg 4deg, rgba(160, 195, 230, 0) 4deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 46%, #000 60%, transparent 72%); mask: radial-gradient(circle, transparent 40%, #000 46%, #000 60%, transparent 72%);
  animation: sonne-strahlen 40s linear infinite, sonne-puls 4s ease-in-out infinite; }
.kreislauf__mitte { animation: sonne-glut 4s ease-in-out infinite; }
@keyframes sonne-strahlen { to { rotate: 360deg; } }
@keyframes sonne-puls { 0%, 100% { scale: 1; opacity: .75; } 50% { scale: 1.08; opacity: 1; } }
@keyframes sonne-glut { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(139, 169, 196, .35), 0 0 0 6px rgba(52, 104, 152, .12), 0 0 30px 4px rgba(52, 104, 152, .35); }
  50% { box-shadow: inset 0 0 0 1px rgba(139, 169, 196, .5), 0 0 0 10px rgba(52, 104, 152, .16), 0 0 54px 12px rgba(80, 140, 200, .5); } }
@media (prefers-reduced-motion: reduce) { .kreislauf__mitte, .kreislauf__mitte::before { animation: none; } }
.kreislauf__karte { padding-left: 44px; grid-template-columns: 120px 1fr; }
.karte__planet { width: 120px; }
/* Sonne: keine Strahlen mehr, nur weicher Lichthof, der ganz dezent pulsiert (Tim 06.10.2026) */
.kreislauf__mitte::before { inset: -18%; -webkit-mask: none; mask: none;
  background: radial-gradient(circle, rgba(120, 165, 210, .38) 0%, rgba(80, 135, 190, .16) 45%, rgba(52, 104, 152, 0) 70%);
  animation: sonne-puls 6s ease-in-out infinite; }
@keyframes sonne-puls { 0%, 100% { scale: 1; opacity: .7; } 50% { scale: 1.05; opacity: 1; } }
.kreislauf__mitte { animation: sonne-glut 6s ease-in-out infinite; }
@keyframes sonne-glut { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(139, 169, 196, .35), 0 0 0 6px rgba(52, 104, 152, .12), 0 0 26px 4px rgba(52, 104, 152, .3); }
  50% { box-shadow: inset 0 0 0 1px rgba(139, 169, 196, .45), 0 0 0 7px rgba(52, 104, 152, .14), 0 0 36px 7px rgba(70, 130, 190, .4); } }

/* Phasenkarten mit mehr Inhalt (Tim 06.10.2026) */
.kreislauf__karte { width: min(500px, 96%); }
.karte__ergebnis { margin: 2px 0 0; font-size: .86rem; line-height: 1.5; color: var(--on-dark-muted); }
.karte__ergebnis b { color: #fff; font-weight: 650; }
.karte__leistungen { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.karte__leistungen li { font-size: .74rem; font-weight: 650; color: #fff; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(139, 169, 196, .45); }

/* ---------- Saturn-Ringe für Reichweite: mehrere feine Ringe, feste Neigung (Tim 06.10.2026) ---------- */
.kreislauf__knoten[data-phase="2"]::before, .kreislauf__knoten[data-phase="2"]::after,
.karte__planet[data-phase="2"]::before, .karte__planet[data-phase="2"]::after {
  left: -40%; right: -40%; top: 34%; height: 32%; border: 0; box-shadow: none; transform: rotate(-16deg);
  background: radial-gradient(closest-side,
    transparent 0 62%,
    rgba(196, 182, 150, .55) 63% 66%, rgba(196, 182, 150, 0) 66.5% 67.5%,
    rgba(222, 208, 176, .8) 68% 74%, rgba(222, 208, 176, 0) 74.5% 77%,            /* Lücke wie die Cassini-Teilung */
    rgba(205, 190, 158, .65) 77.5% 84%, rgba(205, 190, 158, .25) 84.5% 87%,
    rgba(180, 168, 140, 0) 87.5% 89%, rgba(180, 168, 140, .35) 89.5% 91%, transparent 92%); }
.kreislauf__knoten[data-phase="2"]::after, .karte__planet[data-phase="2"]::after { clip-path: inset(50% 0 0 0); }

/* Tippen wie bei alten Computerspielen: Block-Cursor, Schilder und Link erscheinen nach dem Text */
.tipp-cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: #8BC4F0;
  box-shadow: 0 0 8px rgba(139, 196, 240, .8); animation: tipp-blinken .8s steps(1) infinite; }
@keyframes tipp-blinken { 50% { opacity: 0; } }
.kreislauf__karte .wartet { opacity: 0; transform: translateY(4px) scale(.9); }
.karte__leistungen li, .kreislauf__inhalt a { transition: opacity .25s ease, transform .3s cubic-bezier(.2, .9, .3, 1.3); }
.karte-offen .kreislauf__inhalt { animation: none; }

/* Planeten als Kugel-Leinwand (planeten.js): ersetzt die flach verschobenen Bild-Ebenen */
.planet-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; display: block; }
.hat-kugel::before, .hat-kugel .kreislauf__wolken { display: none; }

/* ---------- Phasenkarte: sofort in voller Größe, futuristischer Rahmen (Tim 06.10.2026) ---------- */
.kreislauf__karte { transform: none; filter: none; box-sizing: border-box;
  transition: opacity .35s ease, clip-path .55s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .55s; }
.karte-offen .kreislauf__karte { transform: none; filter: none; transition-delay: 0s; }
.karte-offen .kreislauf__karte { box-shadow: 0 20px 50px rgba(11, 47, 91, .3), 0 0 30px rgba(52, 104, 152, .35); }
.kreislauf__karte { border-color: rgba(139, 169, 196, .28); }
.karte__rahmen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; }
/* umlaufender Lichtpunkt am Rand */
.karte__rahmen::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--rahmen-winkel, 0deg), rgba(160, 205, 245, 0) 0deg, rgba(160, 205, 245, 0) 290deg, rgba(160, 205, 245, .9) 340deg, #fff 355deg, rgba(160, 205, 245, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@property --rahmen-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.karte-offen .karte__rahmen::before { animation: rahmen-lauf-start .9s cubic-bezier(.45, 0, .25, 1) .2s 1 both, rahmen-lauf 9s linear 1.1s infinite; }
@keyframes rahmen-lauf-start { from { --rahmen-winkel: 0deg; } to { --rahmen-winkel: 360deg; } }
@keyframes rahmen-lauf { from { --rahmen-winkel: 0deg; } to { --rahmen-winkel: 360deg; } }
/* leuchtende Eckwinkel */
.karte__rahmen i { position: absolute; width: 18px; height: 18px; border: 2px solid #9fd0f5; filter: drop-shadow(0 0 4px rgba(139, 196, 240, .9)); opacity: 0; transition: opacity .3s, transform .5s cubic-bezier(.2, .9, .3, 1.2); }
.karte__rahmen i:nth-child(1) { left: 8px; top: 8px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; transform: translate(10px, 10px); }
.karte__rahmen i:nth-child(2) { right: 8px; top: 8px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; transform: translate(-10px, 10px); }
.karte__rahmen i:nth-child(3) { left: 8px; bottom: 8px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; transform: translate(10px, -10px); }
.karte__rahmen i:nth-child(4) { right: 8px; bottom: 8px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; transform: translate(-10px, -10px); }
.karte-offen .karte__rahmen i { opacity: 1; transform: none; transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .karte-offen .karte__rahmen::before { animation: none; } }
/* noch nicht getippter Text: Platz belegt, aber unsichtbar */
.tipp-rest { color: transparent; }
.kreislauf__karte a .tipp-rest { text-decoration-color: transparent; }
.tipp-cursor { width: .5em; margin-left: 1px; margin-right: -.5em; }

/* Karte erscheint sofort in voller Größe, nur Einblenden – kein Aufklappen aus der Mitte (Tim 06.10.2026) */
.kreislauf__karte, .karte-offen .kreislauf__karte { clip-path: none; transform: none; filter: none; }
.kreislauf__karte { transition: opacity .35s ease, visibility 0s linear .35s; }
.karte-offen .kreislauf__karte { transition: opacity .35s ease, visibility 0s; }

/* ---------- Mond um Analyse (Tim 06.10.2026) ---------- */
.kreislauf__mond { position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; translate: -50% -50%; pointer-events: none; z-index: 2;
  animation: mond-umlauf 9s linear infinite; }
.kreislauf__mond::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e4e7ee 0%, #a9aebb 45%, #5f6574 100%);
  box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .45), 0 0 6px rgba(160, 175, 210, .5); }
@keyframes mond-umlauf { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .kreislauf__mond { animation: none; } }

/* ---------- Mond: kleiner, elliptische Bahn, verschwindet hinter Analyse (Tim 07.10.2026) ---------- */
.kreislauf__mond { width: 100%; height: 100%; translate: none; left: 0; top: 0; rotate: -18deg; animation: none; z-index: auto; }
.kreislauf__mond::before { content: none; }
.kreislauf__mond::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10%; aspect-ratio: 1; margin: -5% 0 0 -5%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e4e7ee 0%, #a9aebb 45%, #5f6574 100%);
  box-shadow: inset -1px -1px 3px rgba(0, 0, 0, .45), 0 0 5px rgba(160, 175, 210, .45);
  animation: mond-ellipse 10s linear infinite; }
/* Ellipse: halbe Breite 78 %, halbe Höhe 20 % der Planetengröße; z-index < 0 = hinter der Kugel */
@keyframes mond-ellipse {
  0%    { transform: translate(780%, 0)       scale(.9);  z-index: -1; }
  12.5% { transform: translate(551%, -141%)   scale(.8);  z-index: -1; }
  25%   { transform: translate(0, -200%)      scale(.72); z-index: -1; }
  37.5% { transform: translate(-551%, -141%)  scale(.8);  z-index: -1; }
  50%   { transform: translate(-780%, 0)      scale(.9);  z-index: 3; }
  62.5% { transform: translate(-551%, 141%)   scale(1);   z-index: 3; }
  75%   { transform: translate(0, 200%)       scale(1.08); z-index: 3; }
  87.5% { transform: translate(551%, 141%)    scale(1);   z-index: 3; }
  100%  { transform: translate(780%, 0)       scale(.9);  z-index: -1; }
}
@media (prefers-reduced-motion: reduce) { .kreislauf__mond::after { animation: none; transform: translate(-551%, 141%); z-index: 3; } }

/* ---------- Sternenkarte im Kopfbereich (Tim 07.10.2026): fester Nachthimmel, läuft ins Cremeweiß aus ---------- */
.split--grafik > :last-child { position: relative; }
.split--grafik > :last-child::before { content: ""; position: absolute; z-index: 0; inset: -18% -14% -16% -22%; pointer-events: none;
  background:
    url(/assets/img/sterne.webp) center / 620px auto repeat,
    radial-gradient(ellipse at 55% 45%, #0d2347 0%, #081530 45%, #040a17 100%);
  -webkit-mask-image: radial-gradient(ellipse 58% 56% at 54% 50%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 56% at 54% 50%, #000 52%, transparent 100%); }
.split--grafik > :last-child > * { position: relative; z-index: 1; }
/* Bahnen wie eingezeichnet auf einer Sternenkarte: hell und fein */
.split--grafik .kreislauf__spur { stroke: rgba(190, 210, 240, .35); }
.split--grafik .kreislauf__fortschritt { stroke: rgba(205, 225, 250, .85); }
.split--grafik .kreislauf__pfeil { stroke: rgba(205, 225, 250, .9); }
.split--grafik .kreislauf__bahn .kreislauf__punkt { border-color: #cfe2f7; }
.split--grafik .kreislauf__tipp { color: rgba(220, 230, 245, .8); }
/* Mond nur, wenn die Maus über der Grafik ist */
.kreislauf__mond::after { animation-play-state: paused; }
.belebt .kreislauf__mond::after { animation-play-state: running; }

/* ---------- Mond, neu: Position per Skript (echte gekippte Kreisbahn), hinten hinter der Kugel (Tim 07.10.2026) ---------- */
.kreislauf__mond { position: absolute; inset: auto; left: 50%; top: 50%; width: 14%; height: auto; aspect-ratio: 1; rotate: none; translate: none;
  margin: -7% 0 0 -7%; border-radius: 50%; z-index: 3; animation: none;
  background: radial-gradient(circle at 35% 30%, #eceff5 0%, #b3b8c4 45%, #626877 100%);
  box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .45), 0 0 6px rgba(170, 185, 220, .5); }
.kreislauf__mond::before, .kreislauf__mond::after { content: none; animation: none; }
.kreislauf__mond.ist-hinten { z-index: 0; }
.kreislauf__knoten .kreislauf__oberflaeche { z-index: 1; }
/* Sternenfeld: Rand vollständig auslaufen lassen (keine harte Kante) */
.split--grafik > :last-child::before { inset: -22% -24% -22% -34%;
  -webkit-mask-image: radial-gradient(closest-side at 55% 50%, #000 58%, rgba(0, 0, 0, .55) 78%, transparent 100%);
  mask-image: radial-gradient(closest-side at 55% 50%, #000 58%, rgba(0, 0, 0, .55) 78%, transparent 100%); }
.split--grafik > :last-child::before { top: -4%; }

/* ---------- „Die Welle“ (TEIL-WELLE, Welle.astro) – Phasengrafik nach dem Logo (07.10.2026) ---------- */
/* Sternenhimmel nur für die Planeten-Fassung */
.split--grafik > :last-child::before { display: none; }
.split--grafik > :last-child.mit-himmel::before { display: block; }
.welle-rahmen .welle { position: relative; width: min(92%, 540px); aspect-ratio: 1; margin-inline: auto; }
.welle__bild { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.welle__strich { fill: none; stroke-linecap: round; opacity: .92; }
.welle__treffer { fill: none; stroke: transparent; stroke-width: 11; pointer-events: stroke; cursor: pointer; }
.welle__ring { transform-box: view-box; transform-origin: center; transition: opacity .3s, filter .3s; }
.welle__ring .welle__strich { transition: stroke-width .3s, opacity .3s; }
.welle__ring.ist-aktiv .welle__strich { opacity: 1; filter: drop-shadow(0 0 2px rgba(52, 104, 152, .55)); }
.welle-rahmen:has(.ist-aktiv) .welle__ring:not(.ist-aktiv) { opacity: .45; }
.welle__laeufer, .welle__ruhe { fill: none; stroke: #346898; stroke-width: 1.4; opacity: 0; transform-box: view-box; transform-origin: center; pointer-events: none; }
.welle__tropfen { position: absolute; left: 50%; top: 50%; width: 22%; height: auto; translate: -50% -50%; border-radius: 50%;
  filter: drop-shadow(0 8px 14px rgba(11, 47, 91, .28)); pointer-events: none; }
/* Namen auf den Ringen */
.welle__name { position: absolute; translate: -10% -50%; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  font: 700 clamp(.74rem, 1.6vw, .88rem) var(--font-head); color: var(--deep-space); background: rgba(251, 251, 255, .94);
  border: 1px solid rgba(139, 169, 196, .55); border-radius: 999px; padding: 3px 11px 3px 4px; box-shadow: 0 2px 8px rgba(11, 47, 91, .1);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
.welle__name b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tint); color: var(--brand); font-size: .72rem; }
.welle__name:hover, .welle__name:focus-visible, .welle__name.ist-aktiv { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 4px 14px rgba(52, 104, 152, .35); }
.welle__name.ist-aktiv b, .welle__name:hover b { background: rgba(255, 255, 255, .2); color: #fff; }
.welle__name:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
/* Karte: Symbol der Phase statt Planet */
.welle__symbol { display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #4f86ba, #0B2F5B 75%); }
.welle__symbol .icon { font-size: 52px; color: #fff; }
/* Auftritt: Tropfen fällt, Wellen laufen nacheinander aus, Namen folgen */
.js-bewegung .welle__tropfen { opacity: 0; }
.js-bewegung .welle__ring, .js-bewegung .welle__name { opacity: 0; }
.welle--start .welle__tropfen { animation: tropfen-fall .75s cubic-bezier(.5, 0, .75, .3) .1s both, tropfen-auf .45s cubic-bezier(.2, .9, .3, 1.3) .85s both; }
.welle--start .welle__ring { animation: welle-aus .9s cubic-bezier(.16, 1, .3, 1) calc(.95s + var(--i) * .28s) both; }
.welle--start .welle__name { animation: bw-einblenden .4s ease-out calc(1.35s + var(--i) * .28s) both; }
.welle--start .welle__ruhe { animation: welle-ruhe 9s ease-out 3.5s infinite; }
@keyframes tropfen-fall { from { opacity: 0; transform: translateY(-160%) scale(.55); } 70% { opacity: 1; } to { opacity: 1; transform: translateY(0) scale(.9); } }
@keyframes tropfen-auf { from { transform: scale(.9); } to { transform: scale(1); } }
@keyframes welle-aus { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes welle-ruhe { 0% { opacity: .5; transform: scale(1); } 45% { opacity: 0; transform: scale(4.2); } 100% { opacity: 0; transform: scale(4.2); } }
@media (prefers-reduced-motion: reduce) {
  .js-bewegung .welle__tropfen, .js-bewegung .welle__ring, .js-bewegung .welle__name { opacity: 1; }
  .welle--start .welle__tropfen, .welle--start .welle__ring, .welle--start .welle__name, .welle--start .welle__ruhe { animation: none; }
}

/* ---------- Welle mit Logo-Ringen und kleinen Planeten (Tim 07.10.2026) ---------- */
.welle .welle__ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .3s, filter .3s; }
.welle .welle__ring.ist-aktiv { filter: drop-shadow(0 0 6px rgba(52, 104, 152, .55)) saturate(1.2); }
.welle__bild { z-index: 1; }
.welle__tropfen { width: 27.2%; z-index: 2; filter: none; }
/* Bahnen: drehen sich, der Planet sitzt oben auf der Bahn */
.welle__bahn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; pointer-events: none;
  rotate: var(--w); animation: welle-bahn var(--t) linear infinite; }
@keyframes welle-bahn { from { rotate: var(--w); } to { rotate: calc(var(--w) + 360deg); } }
.welle-rahmen:hover .welle__bahn, .welle-rahmen:focus-within .welle__bahn, .welle-rahmen.karte-offen .welle__bahn { animation-play-state: paused; }
.welle__planet { position: absolute; left: 50%; top: 0; width: clamp(24px, 6.4vw, 36px); aspect-ratio: 1; translate: -50% -50%; padding: 0; border: 0;
  border-radius: 50%; cursor: pointer; pointer-events: auto;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 42%),
              radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 48%, rgba(4, 12, 28, .55) 100%),
              var(--gelaende) center / 200% 100%;
  box-shadow: 0 3px 8px rgba(11, 47, 91, .35), inset -3px -4px 8px rgba(0, 0, 0, .35);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s; }
/* Licht bleibt oben links, obwohl die Bahn dreht */
.welle__planet { rotate: calc(-1 * var(--w)); animation: welle-gegen var(--t) linear infinite; }
@keyframes welle-gegen { from { rotate: calc(-1 * var(--w)); } to { rotate: calc(-1 * var(--w) - 360deg); } }
.welle-rahmen:hover .welle__planet, .welle-rahmen:focus-within .welle__planet, .welle-rahmen.karte-offen .welle__planet { animation-play-state: paused; }
.welle__planet:hover, .welle__planet:focus-visible, .welle__planet.ist-aktiv { transform: scale(1.3); box-shadow: 0 0 0 4px rgba(52, 104, 152, .25), 0 0 18px rgba(52, 104, 152, .6); }
.welle__planet:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.welle__name { z-index: 4; }
/* Auftritt: Planeten tauchen nach ihrem Ring auf */
.js-bewegung .welle__planet { opacity: 0; }
.welle--start .welle__planet { animation: welle-gegen var(--t) linear infinite, bw-einblenden .5s ease-out calc(1.5s + var(--i) * .28s) both; }
.welle-rahmen:hover .welle__planet, .welle-rahmen.karte-offen .welle__planet { animation-play-state: paused, running; }
@media (prefers-reduced-motion: reduce) { .welle__bahn, .welle__planet, .welle--start .welle__planet { animation: none; opacity: 1; } }
/* Tropfen ist eine Ebene in voller Logo-Größe (wie die Ringe) */
.welle .welle__tropfen { left: 0; top: 0; width: 100%; height: 100%; translate: none; border-radius: 0; filter: drop-shadow(0 6px 10px rgba(11, 47, 91, .18)); }
@keyframes tropfen-fall { from { opacity: 0; transform: translateY(-38%) scale(.6); } 70% { opacity: 1; } to { opacity: 1; transform: translateY(0) scale(.92); } }

/* Welle: Bahnen als feine Striche statt Logo-Ringe (Tim 07.10.2026) */
.welle__linie { fill: none; stroke: #346898; stroke-width: .55; stroke-dasharray: 1.4 2.6; stroke-linecap: round; opacity: .55;
  transform-box: view-box; transform-origin: center; transition: opacity .3s, stroke-width .3s; }
.welle__linie.ist-aktiv { opacity: 1; stroke-width: .9; stroke-dasharray: none; }
.welle-rahmen:has(.ist-aktiv) .welle__linie:not(.ist-aktiv) { opacity: .25; }
.welle .welle__tropfen { transform-origin: center; scale: .9; }

/* Welle: kleine Planeten als drehende Kugeln mit Licht vom Tropfen (Tim 07.10.2026) */
.welle__planet { background: #2b4a6e; box-shadow: none; overflow: hidden; }
.welle__planet .kreislauf__oberflaeche { position: absolute; inset: 0; border-radius: 50%; box-shadow: none; }
.welle__planet .kreislauf__oberflaeche::after { content: none; }
.welle__licht { position: absolute; left: 50%; top: 0; width: clamp(24px, 6.4vw, 36px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: 1;
  /* Tropfen liegt in Richtung „unten“ der Bahn: dort hell, oben (außen) Nachtseite */
  background:
    radial-gradient(circle at 50% 74%, rgba(255, 255, 255, .42) 0, rgba(255, 255, 255, .08) 22%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(to top, rgba(4, 12, 28, 0) 40%, rgba(4, 12, 28, .5) 64%, rgba(4, 12, 28, .85) 100%);
  box-shadow: 0 -5px 10px rgba(11, 47, 91, .28);   /* Schlagschatten nach außen */
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3); }
.welle__bahn:has(.welle__planet:hover, .welle__planet.ist-aktiv, .welle__planet:focus-visible) .welle__licht { transform: scale(1.3); }
.js-bewegung .welle__licht { opacity: 0; }
.welle--start .welle__licht { animation: bw-einblenden .5s ease-out calc(1.5s + var(--i) * .28s) both; }
@media (prefers-reduced-motion: reduce) { .js-bewegung .welle__licht { opacity: 1; } .welle--start .welle__licht { animation: none; } }

/* Bahnen außen beschriftet (Tim 07.10.2026) */
.welle__beschriftung { font: 700 4.1px var(--font-head); letter-spacing: .04em; fill: #0B2F5B; cursor: pointer; paint-order: stroke; stroke: rgba(251, 251, 255, .9); stroke-width: 1.2px; transition: fill .25s, opacity .25s; }
.welle__beschriftung.ist-aktiv { fill: #346898; }
.welle-rahmen:has(.ist-aktiv) .welle__beschriftung:not(.ist-aktiv) { opacity: .4; }
.js-bewegung .welle__beschriftung { opacity: 0; }
.welle--start .welle__beschriftung { animation: bw-einblenden .4s ease-out calc(1.35s + var(--i) * .28s) both; }
@media (prefers-reduced-motion: reduce) { .js-bewegung .welle__beschriftung { opacity: 1; } .welle--start .welle__beschriftung { animation: none; } }

/* Welle auf Sternenhimmel (Tim 07.10.2026): helle Bahnen und Schrift */
.mit-himmel .welle__linie { stroke: rgba(205, 222, 245, .75); }
.mit-himmel .welle__linie.ist-aktiv { stroke: #e6f0ff; }
.mit-himmel .welle__beschriftung { fill: #e9f1fb; stroke: rgba(4, 10, 23, .85); }
.mit-himmel .welle__beschriftung.ist-aktiv { fill: #fff; }
.mit-himmel .welle__ruhe, .mit-himmel .welle__laeufer { stroke: #b9d3f0; }
.mit-himmel .welle .welle__tropfen { filter: drop-shadow(0 0 18px rgba(120, 170, 230, .45)); }
.mit-himmel .welle-rahmen .kreislauf__tipp { color: rgba(225, 233, 245, .85); }
.welle__beschriftung { font-size: 4.8px; }
/* Raumschiff auf dem Sternenhimmel der Welle */
.welle-rahmen .kreislauf__schiff { z-index: 6; }
.welle-rahmen.karte-offen .kreislauf__schiff { opacity: 1; }
/* Raumschiff liegt hinter der Karte (Tim 07.10.2026) */
.welle-rahmen .kreislauf__schiff { z-index: 4; }
.welle-rahmen .kreislauf__funke { z-index: 4; }
/* Wellen und Bahnen wachsen um ihren eigenen Mittelpunkt (= Tropfen), nicht um die Ecke der Zeichenfläche */
.welle__laeufer, .welle__ruhe, .welle__ring, .welle__linie { transform-box: fill-box; transform-origin: center; }

/* ---------- Welle in 3D: Ebene geneigt, Tropfen und Planeten aufrecht (Tim 07.10.2026) ---------- */
@property --dreh { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.welle-rahmen { --kipp: 40deg; }
.welle-rahmen .welle { transform: perspective(1500px) rotateX(var(--kipp)); transform-style: preserve-3d; margin-block: -7% -5%; }
.welle__bahn { transform-style: preserve-3d; rotate: none; --dreh: var(--w); transform: rotate(var(--dreh)); animation: welle-dreh var(--t) linear infinite; }
@keyframes welle-dreh { from { --dreh: var(--w); } to { --dreh: calc(var(--w) + 360deg); } }
/* Planet und Licht stehen aufrecht zur Betrachterin */
.welle__planet, .welle--start .welle__planet { rotate: none; animation: none; transform: rotate(calc(-1 * var(--dreh))) rotateX(calc(-1 * var(--kipp))); }
.welle--start .welle__planet { animation: bw-einblenden .5s ease-out calc(1.5s + var(--i) * .28s) both; }
.welle__planet:hover, .welle__planet:focus-visible, .welle__planet.ist-aktiv { transform: rotate(calc(-1 * var(--dreh))) rotateX(calc(-1 * var(--kipp))) scale(1.3); }
.welle__licht { --lx: calc(-1 * sin(var(--dreh))); --ly: calc(cos(var(--dreh)) * cos(var(--kipp)));
  transform: rotate(calc(-1 * var(--dreh))) rotateX(calc(-1 * var(--kipp)));
  background:
    radial-gradient(circle at calc(50% + var(--lx) * 26%) calc(50% + var(--ly) * 26%), rgba(255, 255, 255, .42) 0, rgba(255, 255, 255, .08) 22%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(var(--dreh), rgba(4, 12, 28, 0) 40%, rgba(4, 12, 28, .5) 64%, rgba(4, 12, 28, .85) 100%);
  box-shadow: calc(var(--lx) * -6px) calc(var(--ly) * -6px) 10px rgba(11, 47, 91, .3); }
.welle__bahn:has(.welle__planet:hover, .welle__planet.ist-aktiv, .welle__planet:focus-visible) .welle__licht { transform: rotate(calc(-1 * var(--dreh))) rotateX(calc(-1 * var(--kipp))) scale(1.3); }
.welle .welle__tropfen { rotate: x calc(-1 * var(--kipp)); }
.welle-rahmen:hover .welle__bahn, .welle-rahmen:focus-within .welle__bahn, .welle-rahmen.karte-offen .welle__bahn { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .welle__bahn { animation: none; } }
@media (prefers-reduced-motion: reduce) { .welle__planet, .welle--start .welle__planet { animation: none; opacity: 1; } }

/* ---------- START-01 im Nachthimmel (Tim 07.10.2026): ganzer Kopfbereich dunkel, Texte cremeweiß #EFEFEF ---------- */
.hero--nacht { --nacht-text: #EFEFEF; color: var(--nacht-text);
  background:
    linear-gradient(180deg, rgba(251, 251, 255, 0) 78%, var(--bg) 100%),
    url(/assets/img/sterne.webp) center / 620px auto repeat,
    radial-gradient(ellipse 70% 80% at 72% 45%, #0f2a55 0%, #081530 50%, #040a17 100%); }
.hero--nacht::before { display: none; }
.hero--nacht .split--grafik > :last-child::before { display: none; }   /* eigener Himmel der Grafik nicht doppelt */
.hero--nacht h1 { color: var(--nacht-text); }
.hero--nacht h1 em { color: #9EC2E6; }
.hero--nacht .hero__sub { color: #A9C8EA; }
.hero--nacht .lead { color: rgba(239, 239, 239, .82); }
.hero--nacht .link-arrow { color: var(--nacht-text); }
.hero--nacht .link-arrow:hover { color: #fff; }
.hero--nacht .btn--primary { box-shadow: 0 0 0 1px rgba(158, 194, 230, .35), 0 8px 24px rgba(0, 0, 0, .35); }
.hero--nacht [data-abschnitt="START-01"] { color: inherit; }
/* Sterne hinter der Textspalte zurücknehmen – Lesbarkeit (Tim 07.10.2026) */
.hero--nacht {
  background:
    linear-gradient(180deg, rgba(251, 251, 255, 0) 80%, var(--bg) 100%),
    linear-gradient(90deg, #061127 0%, rgba(6, 17, 39, .92) 30%, rgba(6, 17, 39, .55) 44%, rgba(6, 17, 39, 0) 58%),
    url(/assets/img/sterne.webp) center / 620px auto repeat,
    radial-gradient(ellipse 70% 80% at 72% 45%, #0f2a55 0%, #081530 50%, #040a17 100%); }
@media (max-width: 899px) { .hero--nacht { background:
    linear-gradient(180deg, rgba(251, 251, 255, 0) 88%, var(--bg) 100%),
    linear-gradient(180deg, rgba(6, 17, 39, .9) 0%, rgba(6, 17, 39, .75) 45%, rgba(6, 17, 39, 0) 60%),
    url(/assets/img/sterne.webp) center / 520px auto repeat, #081530; } }
/* Sternenkarte und Karte mittig in der rechten Spalte (Tim 07.10.2026) */
.hero--nacht .split--grafik { align-items: center; }
.welle-rahmen { display: flex; flex-direction: column; align-items: center; }
.welle-rahmen .welle { margin-inline: auto; }
.welle-rahmen .kreislauf__karte, .welle-rahmen .kreislauf__karte { left: 50%; right: auto; top: 46%; translate: -50% -50%; }
@media (min-width: 1100px) { .welle-rahmen .kreislauf__karte { right: auto; } }

/* Text links weiter oben (Tim 07.10.2026) */
.hero--nacht .split--grafik > :first-child { align-self: start; padding-top: clamp(0px, 2vw, 24px); }
.hero--nacht { padding-top: clamp(28px, 4vw, 56px); }

/* Tropfen in 3D: Kugel mit Glanz, Randlicht und Eigenschatten, schwebt über seinem Schatten auf der Ebene */
.welle-rahmen { --schweben: -9%; }
.welle .welle__tropfen { translate: 0 var(--schweben); }
.welle__glanz { position: absolute; left: 50%; top: 50%; width: 24.5%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 2;
  transform: translate(-50%, calc(-50% + var(--schweben) * 4.08)) rotateX(calc(-1 * var(--kipp)));
  background:
    radial-gradient(ellipse 34% 24% at 34% 26%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .25) 45%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 70% 78%, rgba(160, 205, 255, .35) 0%, rgba(160, 205, 255, 0) 30%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(2, 10, 26, .55) 100%);
  box-shadow: inset 0 0 0 1px rgba(200, 225, 255, .35), 0 0 30px rgba(110, 160, 230, .35); }
.welle__schatten { transform-box: fill-box; transform-origin: center; pointer-events: none; }
.js-bewegung .welle__glanz { opacity: 0; }
.welle--start .welle__glanz { animation: bw-einblenden .5s ease-out 1.1s both; }
@media (prefers-reduced-motion: reduce) { .js-bewegung .welle__glanz { opacity: 1; } .welle--start .welle__glanz { animation: none; } }

/* Tropfen schwebt nur leicht */
.welle-rahmen { --schweben: -4%; }
/* Phasenkarte: größere Schrift (Tim 07.10.2026) */
.welle-rahmen .kreislauf__karte { width: min(540px, 98%); grid-template-columns: 136px 1fr; }
.welle-rahmen .kreislauf__inhalt small { font-size: .82rem; }
.welle-rahmen .kreislauf__inhalt strong { font-size: 1.5rem; }
.welle-rahmen .kreislauf__inhalt span, .welle-rahmen .kreislauf__inhalt .karte__ergebnis { font-size: 1.04rem; line-height: 1.55; }
.welle-rahmen .kreislauf__inhalt a { font-size: 1rem; }
/* drehender Planet in der Karte, Licht von links oben, Symbol darauf */
.welle__kartenplanet { width: 136px; background: #2b4a6e; overflow: hidden; }
.welle__kartenplanet .kreislauf__oberflaeche { position: absolute; inset: 0; border-radius: 50%; }
.welle__kartenplanet .kreislauf__oberflaeche::after { content: none; }
.welle__kartenlicht { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, .08) 22%, rgba(255, 255, 255, 0) 40%),
              linear-gradient(135deg, rgba(4, 12, 28, 0) 42%, rgba(4, 12, 28, .5) 66%, rgba(4, 12, 28, .85) 100%); }
.welle__kartensymbol { position: absolute; inset: 0; display: grid; place-items: center; }
.welle__kartensymbol[hidden] { display: none; }
.welle__kartensymbol .icon { font-size: 48px; color: #fff; filter: drop-shadow(0 0 5px rgba(4, 16, 36, .9)); }
/* Tropfen genau im Mittelpunkt der Bahnen (Tim 07.10.2026) */
.welle-rahmen { --schweben: 0%; }
.welle__schatten { display: none; }
/* Karte: Schriftgrößen gezielt (Tipp-Spans nicht mitgreifen) */
.welle-rahmen .kreislauf__inhalt > span, .welle-rahmen .kreislauf__inhalt > .karte__ergebnis { font-size: 1.04rem; }
.welle-rahmen .kreislauf__inhalt strong, .welle-rahmen .kreislauf__inhalt strong span { font-size: 1.55rem; line-height: 1.2; }
.welle-rahmen .kreislauf__inhalt small, .welle-rahmen .kreislauf__inhalt small span { font-size: .82rem; }
/* Ring des Gasriesen in der Karte nicht abschneiden */
.welle__kartenplanet { overflow: visible; }
.welle__kartenplanet .kreislauf__oberflaeche { overflow: hidden; }
/* Bahnen leicht schräg (Tim 07.10.2026: „nicht zu wild“) */
.welle-rahmen .welle { transform: perspective(1500px) rotate(-11deg) rotateX(var(--kipp)); }
/* Symbol der Phase neben dem Titel statt auf dem Planeten (Tim 07.10.2026) */
.karte__titel { display: flex; align-items: center; gap: 10px; }
.karte__titelsymbol { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(139, 169, 196, .45); }
.karte__titelsymbol .icon { font-size: 22px; color: #fff; }

/* ---------- Analyse-Anzeige auf dem Kartenplaneten (Tim 07.10.2026) ---------- */
.karte__scan { position: absolute; inset: -14%; width: 128%; height: 128%; overflow: visible; pointer-events: none; z-index: 2; }
.karte__scan [data-messpunkte] { transform: translate(14%, 14%) scale(.78); transform-origin: 0 0; }
.scan__peil { fill: none; stroke: rgba(150, 205, 255, .45); stroke-width: .5; stroke-dasharray: 3 2 .6 2; transform-origin: 50px 50px; animation: scan-peil 18s linear infinite; }
@keyframes scan-peil { to { transform: rotate(360deg); } }
.scan__linie { fill: none; stroke: rgba(160, 215, 255, .7); stroke-width: .5; stroke-dasharray: 60; stroke-dashoffset: 60; animation: scan-zeichnen 1.2s ease-out .6s forwards; }
@keyframes scan-zeichnen { to { stroke-dashoffset: 0; } }
.scan__punkt { fill: #d9f0ff; filter: drop-shadow(0 0 1.5px #8fd0ff); opacity: 0; animation: bw-einblenden .3s ease-out forwards; }
.scan__ring { fill: none; stroke: #8fd0ff; stroke-width: .5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: scan-puls 2.2s ease-out infinite; }
@keyframes scan-puls { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.6); } }
.karte__scanlinie { position: absolute; left: 0; right: 0; top: 0; height: 100%; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 2; }
.karte__scanlinie::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; top: -20%;
  background: linear-gradient(180deg, rgba(150, 210, 255, 0), rgba(150, 210, 255, .35) 50%, rgba(150, 210, 255, 0)); animation: scan-laufen 3.4s ease-in-out infinite; }
@keyframes scan-laufen { 0% { top: -20%; } 55% { top: 100%; } 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .scan__peil, .scan__ring, .karte__scanlinie::after { animation: none; }
  .scan__linie { stroke-dashoffset: 0; animation: none; } .scan__punkt { opacity: 1; animation: none; }
}
.scan__linie { stroke-width: .8; }
.scan__ring { stroke-width: .8; }

/* ---------- Welle: Planetengrößen, Mond bei Präsenz, Saturnring bei Vertrauen (Tim 07.10.2026) ---------- */
.welle-rahmen .welle { container-type: inline-size; }
.welle__planet, .welle__licht { width: calc(var(--gr, 5) * 1cqw); }
/* Begleiter (Mond, Ring) stehen wie der Planet aufrecht in seiner Ebene */
.welle__begleiter { position: absolute; left: 50%; top: 0; width: calc(var(--gr, 5) * 1cqw); aspect-ratio: 1; translate: -50% -50%;
  pointer-events: none; transform-style: preserve-3d; transform: rotate(calc(-1 * var(--dreh))) rotateX(calc(-1 * var(--kipp))); z-index: 2; }
/* Mond: kreist im Raum um den Planeten, hinten verdeckt */
.welle__mondbahn { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateZ(-18deg) rotateX(72deg); }
.welle__mondbahn::before { content: ""; position: absolute; inset: -55%; border-radius: 50%; border: .5px solid rgba(200, 220, 245, .25); }
.welle__mond { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; margin: -13% 0 0 -13%; transform-style: preserve-3d;
  animation: begleiter-mond 7s linear infinite; }
.welle__mond::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eef1f6 0%, #b3b8c4 45%, #5c6272 100%); box-shadow: inset -1px -1px 2px rgba(0, 0, 0, .5);
  transform: rotateX(-72deg) rotateZ(18deg); }
@keyframes begleiter-mond { from { transform: rotateZ(0deg) translateX(290%) rotateZ(0deg); } to { transform: rotateZ(360deg) translateX(290%) rotateZ(-360deg); } }
/* Saturnring: hintere Hälfte hinter dem Planeten, vordere davor */
.welle__saturn::before, .welle__saturn::after { content: ""; position: absolute; left: -36%; right: -36%; top: 34%; height: 32%; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 0 62%, rgba(196, 182, 150, .55) 63% 66%, rgba(196, 182, 150, 0) 66.5% 68%,
    rgba(222, 208, 176, .85) 68.5% 76%, rgba(222, 208, 176, 0) 76.5% 79%, rgba(205, 190, 158, .65) 79.5% 88%, transparent 89%); }
.welle__saturn { transform: rotate(calc(-1 * var(--dreh))) rotateX(calc(-1 * var(--kipp))) rotate(-14deg); }
.welle__saturn::before { clip-path: inset(0 0 50% 0); transform: translateZ(-3px); }
.welle__saturn::after { clip-path: inset(50% 0 0 0); transform: translateZ(3px); }
.welle__bahn { transform-style: preserve-3d; }
.welle__planet { transform-style: flat; }
.js-bewegung .welle__begleiter { opacity: 0; }
.welle--start .welle__begleiter { animation: bw-einblenden .5s ease-out calc(1.6s + var(--i) * .28s) both; }
@media (prefers-reduced-motion: reduce) { .welle__mond { animation: none; transform: translateX(-290%); } .js-bewegung .welle__begleiter { opacity: 1; } .welle--start .welle__begleiter { animation: none; } }
/* Messpunkte liegen auf der Kugelfläche (Koordinaten 0–100 = Planetendurchmesser) */
.karte__scan [data-messpunkte] { transform: translate(10.94px, 10.94px) scale(.78125); transform-origin: 0 0; }
.scan__linie { stroke-dasharray: none; stroke-dashoffset: 0; animation: bw-einblenden .6s ease-out .6s both; }
.scan__punkt, .scan__ring { transition: opacity .2s; }
/* Mond und Saturnring größer */
.welle__mond { width: 36%; margin: -18% 0 0 -18%; }
@keyframes begleiter-mond { from { transform: rotateZ(0deg) translateX(230%) rotateZ(0deg); } to { transform: rotateZ(360deg) translateX(230%) rotateZ(-360deg); } }
.welle__saturn::before, .welle__saturn::after { left: -62%; right: -62%; top: 28%; height: 44%; }

/* ---------- Welle: Legende rechts mit Leitlinien zu den Bahnen (Tim 07.10.2026) ---------- */
.welle-rahmen { position: relative; align-items: flex-start; }
.welle-rahmen .welle { width: min(74%, 470px); margin-inline: 0 auto; }
.welle__anker { position: absolute; width: 2px; height: 2px; margin: -1px 0 0 -1px; pointer-events: none; }
.welle__leitlinien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.leitlinie { fill: none; stroke: rgba(205, 222, 245, .5); stroke-width: 1; transition: stroke .25s, stroke-width .25s; }
.leitpunkt { fill: #cfe2f7; transition: r .25s; }
.leitlinie.ist-aktiv { stroke: #fff; stroke-width: 1.6; }
.welle__legende { position: absolute; right: 0; top: 50%; translate: 0 -38%; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; z-index: 4; }
.welle__eintrag { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 700 .95rem var(--font-head); color: #EFEFEF; background: rgba(8, 21, 48, .65); border: 1px solid rgba(160, 195, 235, .35);
  backdrop-filter: blur(4px); transition: background .25s, border-color .25s, color .25s; }
.welle__eintrag b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(160, 195, 235, .2); font-size: .78rem; }
.welle__eintrag:hover, .welle__eintrag:focus-visible, .welle__eintrag.ist-aktiv { background: var(--brand); border-color: #9EC2E6; color: #fff; }
.welle__eintrag:focus-visible { outline: 3px solid #9EC2E6; outline-offset: 3px; }
.js-bewegung .welle__legende li, .js-bewegung .welle__leitlinien { opacity: 0; }
.welle--start .welle__legende li { animation: bw-einblenden .4s ease-out calc(1.35s + var(--n, 0) * .2s) both; }
.welle__legende li:nth-child(2) { --n: 1; } .welle__legende li:nth-child(3) { --n: 2; } .welle__legende li:nth-child(4) { --n: 3; } .welle__legende li:nth-child(5) { --n: 4; }
.welle--start .welle__leitlinien { animation: bw-einblenden .6s ease-out 2.4s both; }
@media (max-width: 700px) { .welle-rahmen .welle { width: 100%; } .welle__legende { position: static; translate: none; grid-template-columns: 1fr 1fr; margin-top: 12px; } .welle__leitlinien { display: none; } }
@media (prefers-reduced-motion: reduce) { .js-bewegung .welle__legende li, .js-bewegung .welle__leitlinien { opacity: 1; } .welle--start .welle__legende li, .welle--start .welle__leitlinien { animation: none; } }
.welle__satz { margin: 6px 0 0; max-width: 34em; font-size: 1rem; line-height: 1.55; color: #EFEFEF; text-align: left; }
.welle__satz + .kreislauf__tipp { margin-top: 6px; text-align: left; }
.js-bewegung .welle__satz { opacity: 0; } .welle--start .welle__satz { animation: bw-einblenden .5s ease-out 2.6s both; }
@media (prefers-reduced-motion: reduce) { .js-bewegung .welle__satz { opacity: 1; } .welle--start .welle__satz { animation: none; } }
.welle-rahmen .welle__satz + .kreislauf__tipp { margin-top: 4px; }
.welle-rahmen .kreislauf__tipp { position: static; }
/* Karte liegt nur über der Sternenkarte, die Legende bleibt frei und liegt obenauf (Tim 07.10.2026) */
@media (min-width: 701px) {
  .welle-rahmen .kreislauf__karte { left: 37%; width: min(470px, 74%); grid-template-columns: 116px 1fr; }
  .welle-rahmen .welle__kartenplanet { width: 116px; }
}
.welle__legende, .welle__leitlinien { z-index: 7; }
/* Leitlinien ausblenden, solange eine Karte offen ist – sie würden über den Text laufen */
.welle__leitlinien { transition: opacity .25s; }
.welle-rahmen.karte-offen .welle__leitlinien { opacity: 0 !important; }

/* Phasenkarte: Kennzahlen unter dem Planeten statt Messpunkte (Tim 07.10.2026) */
.karte__links { grid-column: 1; grid-row: 1; display: grid; justify-items: center; gap: 14px; align-self: start; }
.karte__links .karte__planet { grid-column: auto; grid-row: auto; }
.karte__kpis { width: 100%; }
.karte__kpis[hidden] { display: none; }
.karte__kpis small { display: block; text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8BA9C4; margin-bottom: 6px; }
.karte__kpis ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.karte__kpis li { font-size: .78rem; line-height: 1.3; text-align: center; color: #EFEFEF; padding: 4px 6px; border-radius: 8px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(139, 169, 196, .3); }
.welle-rahmen .kreislauf__karte { grid-template-columns: 132px 1fr; }

/* Mond um Präsenz, neu: Position per Skript, zwei Ebenen vor/hinter dem Planeten (Tim 07.10.2026) */
.welle__mondebene { transform-style: flat; }
.welle__mondebene--hinten { transform: rotate(calc(-1 * var(--dreh))) rotateX(calc(-1 * var(--kipp))) translateZ(-4px); }
.welle__mondebene--vorne { transform: rotate(calc(-1 * var(--dreh))) rotateX(calc(-1 * var(--kipp))) translateZ(4px); }
.welle__mond2 { position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; margin: -16% 0 0 -16%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eef1f6 0%, #b3b8c4 45%, #5c6272 100%); box-shadow: inset -1px -1px 2px rgba(0, 0, 0, .5); }
/* Minimieren zur Legende hin */
.welle-rahmen .kreislauf__karte { transform-origin: 100% 50%; }

/* Karte über der ganzen Bahnfläche: Inhalt mittig, keine feste Mitte-Verschiebung mehr */
.welle-rahmen .kreislauf__karte { align-content: center; transform-origin: 100% 50%; overflow: hidden; }
/* Systemsatz unten im Kopfbereich, über die ganze Breite */
.hero__system { margin: clamp(20px, 3vw, 36px) auto 0; max-width: 46em; text-align: center; font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55; color: #EFEFEF; padding-top: 18px; border-top: 1px solid rgba(160, 195, 235, .25); }

/* Mond auch in der Planetenkarte bei Präsenz (Tim 07.10.2026) */
.welle__kartenplanet { position: relative; isolation: isolate; }
.welle__kartenplanet .kreislauf__oberflaeche { z-index: 1; }
.welle__kartenlicht { z-index: 2; }
.karte__mond { position: absolute; left: 50%; top: 50%; width: 20%; aspect-ratio: 1; margin: -10% 0 0 -10%; border-radius: 50%; z-index: 4; display: none;
  background: radial-gradient(circle at 35% 30%, #eef1f6 0%, #b3b8c4 45%, #5c6272 100%); box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .5), 0 0 8px rgba(170, 190, 225, .4); }
.welle__kartenplanet[data-phase="1"] .karte__mond { display: block; }

/* ---------- TEIL-STANDORT: Mini-Sternenkarte „Sie sind hier“ (START-03, Tim 07.10.2026) ---------- */
.standort { position: relative; margin: -4px -4px 16px; border-radius: 12px; overflow: hidden; aspect-ratio: 220 / 104;
  background: url(/assets/img/sterne.webp) center / 300px auto, radial-gradient(ellipse at 50% 50%, #12305c 0%, #081530 60%, #040a17 100%); }
.standort svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.standort__bahn { fill: none; stroke: rgba(205, 222, 245, .35); stroke-width: .7; stroke-dasharray: 2 2.5; }
.standort__bahn.ist-hier { stroke: #9EC2E6; stroke-width: 1.2; stroke-dasharray: none; filter: drop-shadow(0 0 2px rgba(158, 194, 230, .8)); }
.standort__tropfen { fill: #3d6c9c; stroke: rgba(200, 225, 255, .6); stroke-width: .8; filter: drop-shadow(0 0 5px rgba(110, 160, 230, .7)); }
.standort__glanz { fill: rgba(255, 255, 255, .55); }
.standort__punkt { fill: #fff; }
.standort__puls { fill: none; stroke: #fff; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: standort-puls 2s ease-out infinite; }
@keyframes standort-puls { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
.standort__pin { fill: #e8574a; stroke: #fff; stroke-width: .8; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.standort__pinloch { fill: #fff; }
.standort__label { position: absolute; right: 10px; bottom: 8px; font: 700 .68rem var(--font-head); letter-spacing: .1em; text-transform: uppercase;
  color: #EFEFEF; background: rgba(8, 21, 48, .6); padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(158, 194, 230, .4); }
.card--problem:hover .standort__bahn.ist-hier { stroke: #fff; }
@media (prefers-reduced-motion: reduce) { .standort__puls { animation: none; } }

/* Tropfen als drehende Wasserkugel (Tim 07.10.2026) */
.welle__tropfenkugel { position: absolute; left: 50%; top: 50%; width: 24.5%; aspect-ratio: 1; border-radius: 50%; z-index: 2; pointer-events: none;
  transform: translate(-50%, -50%) rotateX(calc(-1 * var(--kipp))); }
.welle__glanz { z-index: 3; }
.js-bewegung .welle__tropfenkugel { opacity: 0; }
.welle--start .welle__tropfenkugel { animation: bw-einblenden .5s ease-out 1s both; }
@media (prefers-reduced-motion: reduce) { .js-bewegung .welle__tropfenkugel { opacity: 1; } .welle--start .welle__tropfenkugel { animation: none; } }
/* Kugel und Glanz knapp vor die Tropfen-Ebene, sonst schneiden sich die Ebenen im Raum */
.welle__tropfenkugel { transform: translate(-50%, -50%) rotateX(calc(-1 * var(--kipp))) translateZ(2px); width: 24%; }
.welle__glanz { transform: translate(-50%, calc(-50% + var(--schweben) * 4.08)) rotateX(calc(-1 * var(--kipp))) translateZ(4px); }
/* Tropfen: Kugel ersetzt das flache Bild, 15 % kleiner, eigener Glasrand (Tim 07.10.2026) */
.hat-tropfenkugel .welle__tropfen { opacity: 0 !important; animation: none !important; }
.welle__tropfenkugel { width: 20.4%; transform: translate(-50%, -50%) rotateX(calc(-1 * var(--kipp))) translateZ(2px);
  box-shadow: 0 0 0 2px rgba(200, 225, 255, .45), 0 0 0 5px rgba(60, 100, 150, .35), 0 0 28px rgba(110, 160, 230, .45); }
.welle__glanz { width: 20.8%; }

/* Tropfen: 15 % kleiner, wabert leicht wie Wasser (Tim 07.10.2026) – keine Drehung */
.welle .welle__tropfen { scale: .85; }
.welle__glanz { width: 20.8%; }
.welle--start .welle__tropfen { animation: tropfen-fall .75s cubic-bezier(.5, 0, .75, .3) .1s both, tropfen-auf .45s cubic-bezier(.2, .9, .3, 1.3) .85s both, tropfen-wabern 6s ease-in-out 1.4s infinite; }
.welle--start .welle__glanz { animation: bw-einblenden .5s ease-out 1.1s both, glanz-wabern 6s ease-in-out 1.4s infinite; }
@keyframes tropfen-wabern { 0%, 100% { scale: .85 .85; } 25% { scale: .87 .83; } 50% { scale: .84 .865; } 75% { scale: .865 .84; } }
@keyframes glanz-wabern { 0%, 100% { scale: 1 1; } 25% { scale: 1.025 .975; } 50% { scale: .99 1.015; } 75% { scale: 1.015 .99; } }
@media (prefers-reduced-motion: reduce) { .welle--start .welle__tropfen, .welle--start .welle__glanz { animation: none; } }

/* ---------- Himmel im Kopfbereich: funkelnde Sterne und Sternschnuppe (Tim 07.10.2026) ---------- */
.hero--nacht { position: relative; overflow: hidden; }
.hero--nacht > .container { position: relative; z-index: 1; }
.himmel { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.himmel.pausiert * { animation-play-state: paused !important; }
.funkel { position: absolute; width: var(--g, 2px); height: var(--g, 2px); border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 1px rgba(200, 225, 255, .8); animation: funkeln 4s ease-in-out infinite; }
@keyframes funkeln { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
.sternschnuppe { position: absolute; width: 140px; height: 2px; opacity: 0; rotate: 28deg; transform-origin: right center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(200, 225, 255, .7) 70%, #fff); border-radius: 2px; filter: drop-shadow(0 0 4px #bcd8ff); }
.sternschnuppe.fliegt { animation: schnuppe 1.1s cubic-bezier(.3, 0, .7, 1) forwards; }
@keyframes schnuppe { 0% { opacity: 0; translate: 0 0; scale: .3 1; } 15% { opacity: 1; scale: 1 1; } 100% { opacity: 0; translate: 260px 140px; scale: .6 1; } }
@media (prefers-reduced-motion: reduce) { .funkel, .sternschnuppe { display: none; } }
/* Sternschnuppen unterschiedlich: Richtung --w, Länge --l, Dicke --d, Strecke --dx/--dy, Dauer --t (Tim 07.10.2026) */
.sternschnuppe { width: var(--l, 140px); height: var(--d, 2px); rotate: var(--w, 28deg); }
.sternschnuppe.fliegt { animation: schnuppe var(--t, 1.1s) cubic-bezier(.3, 0, .7, 1) forwards; }
@keyframes schnuppe { 0% { opacity: 0; translate: 0 0; scale: .3 1; } 15% { opacity: 1; scale: 1 1; } 100% { opacity: 0; translate: var(--dx, 260px) var(--dy, 140px); scale: .6 1; } }
/* „Wo stehen Sie gerade?“: alle drei Karten auf einer Höhe (Tim 07.10.2026, hebt den Versatz aus 6·5·5 auf) */
@media (min-width: 900px) { .grid--3 > .card--problem:nth-child(2), .grid--3 > .card--problem:nth-child(2):hover { transform: none; } }
.grid--3 > .card--problem { align-self: stretch; }

/* START-02 Logos jetzt nach den Kundenstimmen: normale Leiste statt über die Kopfkante schwebend (Tim 07.10.2026) */
@media (min-width: 900px) {
  .section--logos { padding: 0 0 var(--section); background: var(--surface); }
  .section--logos > .container { margin-top: 0; box-shadow: none; border: 0; background: transparent; padding: 0; }
  .section--logos + .section { padding-top: var(--section); }
}
.section--logos .logo-strip__label { text-align: center; }

/* ---------- Drehender Sternenhimmel (Tim 07.10.2026): große Sternenebene dreht sich langsam um einen Punkt rechts oben ---------- */
.hero--nacht { background: radial-gradient(ellipse 70% 80% at 72% 45%, #0f2a55 0%, #081530 50%, #040a17 100%); }
@media (max-width: 899px) { .hero--nacht { background: #081530; } }
.himmel__dreh { position: absolute; left: 78%; top: 18%; width: 230vmax; height: 230vmax; translate: -50% -50%;
  background: url(/assets/img/sterne.webp) center / 620px auto repeat; animation: himmel-dreh 360s linear infinite; }
@keyframes himmel-dreh { to { rotate: 360deg; } }
/* feste Ebene darüber: Text links ruhig, unten Übergang ins Cremeweiß */
.himmel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 251, 255, 0) 80%, var(--bg) 100%),
              linear-gradient(90deg, #061127 0%, rgba(6, 17, 39, .92) 30%, rgba(6, 17, 39, .55) 44%, rgba(6, 17, 39, 0) 58%); }
@media (max-width: 899px) { .himmel::after { background: linear-gradient(180deg, rgba(251, 251, 255, 0) 88%, var(--bg) 100%), linear-gradient(180deg, rgba(6, 17, 39, .9) 0%, rgba(6, 17, 39, .75) 45%, rgba(6, 17, 39, 0) 60%); } }
.sternschnuppe { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .himmel__dreh { animation: none; } }
/* Sterne funkeln in verschiedenen Farben: weiß, blau, gelblich, orange, rötlich, türkis (Tim 08.10.2026) */
.funkel { background: rgb(var(--f, 255, 255, 255)); box-shadow: 0 0 6px 1px rgba(var(--f, 200, 225, 255), .85); }

/* Tropfen: dreht sich ganz langsam statt zu wabern (Tim 08.10.2026) – Glanz bleibt stehen wie echtes Licht */
.welle--start .welle__tropfen { animation: tropfen-fall .75s cubic-bezier(.5, 0, .75, .3) .1s both, tropfen-auf .45s cubic-bezier(.2, .9, .3, 1.3) .85s both, tropfen-dreh 90s linear 1.3s infinite; }
.welle--start .welle__glanz { animation: bw-einblenden .5s ease-out 1.1s both; }
@keyframes tropfen-dreh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .welle--start .welle__tropfen { animation: none; } }
.funkel { box-shadow: 0 0 8px 2px rgba(var(--f, 200, 225, 255), .9); }

/* ---------- LEIST-11: Leistungskacheln im Stil der Planetenkarten (Tim 08.10.2026) ---------- */
.angebot__karte--hud { position: relative; overflow: hidden; color: rgba(239, 239, 239, .82); border: 1px solid rgba(139, 169, 196, .3);
  background: url(/assets/img/sterne.webp) center / 420px auto, linear-gradient(160deg, #0d2a52 0%, #0B2F5B 45%, #163f72 100%) !important;
  box-shadow: 0 14px 34px rgba(11, 47, 91, .22); padding-top: 22px; }
.angebot__karte--hud h3 { color: #fff; padding-right: 64px; }
.angebot__karte--hud p { color: rgba(239, 239, 239, .8); }
.angebot__karte--hud .badge { background: rgba(255, 255, 255, .1); color: #cfe2f7; border: 1px solid rgba(139, 169, 196, .4); }
.angebot__karte--hud .angebot__art { color: #cfe2f7; border-color: rgba(139, 169, 196, .5); }
.angebot__karte--hud .link-arrow { color: #fff; }
.angebot__karte--hud .karte__rahmen i { opacity: .55; transform: none; }
.angebot__karte--hud:hover { color: rgba(239, 239, 239, .9); border-color: rgba(158, 194, 230, .7); transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(158, 194, 230, .35) inset, 0 18px 40px rgba(11, 47, 91, .3), 0 0 30px rgba(52, 104, 152, .35); }
.angebot__karte--hud:hover .karte__rahmen i { opacity: 1; }
.angebot__karte--hud:hover .karte__rahmen::before { animation: rahmen-lauf-start .9s cubic-bezier(.45, 0, .25, 1) both; }
/* kleiner drehender Planet oben rechts */
.angebot__planet { position: absolute; right: 16px; top: 16px; width: 54px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #2b4a6e;
  box-shadow: 0 0 0 1px rgba(200, 225, 255, .2), 0 0 18px rgba(110, 160, 230, .35); transition: box-shadow .3s, transform .3s; }
.angebot__licht { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, .08) 22%, rgba(255, 255, 255, 0) 40%),
              linear-gradient(135deg, rgba(4, 12, 28, 0) 42%, rgba(4, 12, 28, .5) 66%, rgba(4, 12, 28, .85) 100%); }
.angebot__karte--hud:hover .angebot__planet { transform: scale(1.08); box-shadow: 0 0 0 1px rgba(200, 225, 255, .4), 0 0 26px rgba(130, 180, 240, .65); }
/* Erstgespräch-Kachel als helles Gegenstück */
.angebot__karte--frage { background: var(--surface) !important; color: var(--text) !important; border: 2px solid var(--brand) !important; }
.angebot__karte--frage h3 { color: var(--navy) !important; }
.angebot__karte--frage p { color: var(--muted) !important; }
.angebot__karte--frage .badge { background: var(--tint) !important; color: var(--brand) !important; }
.angebot__karte--frage .link-arrow { color: var(--brand) !important; }
.angebot__karte--frage:hover { border-color: var(--navy) !important; }
/* Kachel-Titel über die volle Breite, Planet nur in der Schild-Zeile; Trennung nur an weichen Trennstellen */
.angebot__karte--hud h3 { padding-right: 0; overflow-wrap: normal; hyphens: manual; }
.angebot__karte--hud .angebot__planet { width: 42px; top: 14px; right: 14px; }
/* LEIST-11: bessere Lesbarkeit (Tim 08.10.2026) – Sterne nur oben und schwach, ruhiger dunkler Grund, hellere größere Schrift */
.angebot__karte--hud {
  background:
    linear-gradient(180deg, rgba(10, 33, 66, .55) 0%, rgba(10, 33, 66, .92) 38%, #0a2142 100%),
    url(/assets/img/sterne.webp) center top / 420px auto,
    #0a2142 !important; }
.angebot__karte--hud p { color: #E6ECF3; font-size: 1.02rem; line-height: 1.6; }
.angebot__karte--hud h3 { color: #fff; font-size: 1.22rem; }
.angebot__karte--hud .link-arrow { color: #fff; font-weight: 700; }
.angebot__karte--hud .badge, .angebot__karte--hud .angebot__art { color: #E6ECF3; }