/* ============================================================
   Coretica — Design-System
   Dunkler, warmer Look: Anthrazit/Espresso mit Bronze-Akzenten
   ============================================================ */

:root {
  --bg: #100d0b;
  --bg-alt: #17130f;
  --surface: #1d1814;
  --surface-2: #241d18;
  --line: rgba(224, 169, 109, 0.14);
  --line-soft: rgba(255, 255, 255, 0.07);

  --text: #f2ece4;
  --text-muted: #a5978a;
  --text-dim: #928476;

  --bronze: #e0a96d;
  --bronze-2: #c98b4b;
  --bronze-deep: #8a5a2b;

  --radius: 14px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 22px 60px rgba(0, 0, 0, 0.6);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* ------------------------------------------------------------------
   SCHRIFTART — Inter, selbst gehostet

   Die Schrift liegt auf dem eigenen Webspace. Sie wird NICHT über
   Google Fonts geladen: das würde die IP-Adresse jedes Besuchers in
   die USA übertragen und ist in Deutschland bereits abgemahnt worden.

   Damit sieht die Seite auf jedem Gerät gleich aus. Ohne eigene
   Schrift greift die Systemschrift — und die ist unter Windows eine
   andere als auf dem Mac, dem Handy oder in der Vorschau. Genau daher
   kamen die Unterschiede im Schriftbild.

   NOCH ZU TUN: Die Datei fonts/InterVariable.woff2 muss angelegt
   werden (Anleitung in fonts/HERKUNFT.txt). Solange sie fehlt,
   passiert nichts Schlimmes — die Seite fällt still auf die
   Systemschrift zurück.

   Eine Datei deckt alle Schnitte von mager bis fett ab, deshalb
   font-weight: 100 900.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

section {
  padding: 120px 0;
  position: relative;
}

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 18px;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.15rem; }

.section-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bronze);
  margin-bottom: 14px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 20px 0;
  background: rgba(16, 13, 11, 0);
  backdrop-filter: blur(0px);
  transition: background var(--transition), border-color var(--transition);  /* padding/backdrop-filter nicht animieren: Layout bzw. GPU-teuer */
}

.site-header.is-stuck {
  padding: 12px 0;
  background: rgba(16, 13, 11, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.logo {
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  white-space: nowrap;
}

/* Der Name ist EIN Wort: die zweite Hälfte nur einfärben, nicht abtrennen. */
.logo span {
  color: var(--bronze);
  font-weight: 800;
  margin-left: 0;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  transition: color var(--transition);
}

.nav-links a:hover {
  color: var(--text);
}

.nav-cta {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--bronze) !important;
}

.nav-cta:hover {
  background: rgba(224, 169, 109, 0.1);
}

/* ---------- Menü-Knopf fürs Handy (drei Striche) ---------- */
.nav-burger {
  display: none;           /* am Rechner ausgeblendet */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;             /* Mindest-Tippfläche */
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
  transition: border-color var(--transition), background var(--transition);
  z-index: 60;
}

.nav-burger:hover { border-color: var(--line); }

.nav-burger span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.28s ease, opacity 0.2s ease;
}

/* Offen: aus den drei Strichen wird ein Kreuz */
.nav-burger.is-offen span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-offen span:nth-child(2) { opacity: 0; }
.nav-burger.is-offen span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-burger.is-offen { background: rgba(224, 169, 109, 0.1); border-color: var(--line); }

/* ---------- Aufklappmenü ---------- */
.mobil-menue {
  position: fixed;
  inset: 0;
  z-index: 40;             /* unter dem Header, damit der Knopf klickbar bleibt */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 104px 28px 40px;
  background: rgba(16, 13, 11, 0.97);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.mobil-menue.is-offen {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mm-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mm-links a {
  display: block;
  padding: 15px 4px;       /* Tippfläche deutlich über 44px */
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(12px);
  transition: color var(--transition);
}

.mm-links a:last-child { border-bottom: none; }
.mm-links a:hover { color: var(--bronze); }

/* Punkte laufen nacheinander ein */
.mobil-menue.is-offen .mm-links a {
  animation: mmEinlauf 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mobil-menue.is-offen .mm-links a:nth-child(1) { animation-delay: 0.05s; }
.mobil-menue.is-offen .mm-links a:nth-child(2) { animation-delay: 0.10s; }
.mobil-menue.is-offen .mm-links a:nth-child(3) { animation-delay: 0.15s; }
.mobil-menue.is-offen .mm-links a:nth-child(4) { animation-delay: 0.20s; }
.mobil-menue.is-offen .mm-links a:nth-child(5) { animation-delay: 0.25s; }
.mobil-menue.is-offen .mm-links a:nth-child(6) { animation-delay: 0.30s; }
.mobil-menue.is-offen .mm-links a:nth-child(7) { animation-delay: 0.35s; }

@keyframes mmEinlauf {
  to { opacity: 1; transform: translateY(0); }
}

.mm-links .mm-cta {
  margin-top: 18px;
  padding: 15px 22px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--bronze);
  background: rgba(224, 169, 109, 0.07);
}

.mm-fuss {
  display: flex;
  gap: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.mm-fuss a {
  color: var(--text-muted);
  font-size: 0.88rem;
  text-decoration: none;
  padding: 6px 0;
}

.mm-fuss a:hover { color: var(--text); }

/* Seite steht still, solange das Menü offen ist */
body.menue-offen { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobil-menue { transition: none; }
  .mobil-menue.is-offen .mm-links a { animation: none; opacity: 1; transform: none; }
  .nav-burger span { transition: none; }
}

@media (max-width: 1000px) {
  .nav-links li { display: none; }
  .nav-links { gap: 10px; }
  .nav-burger { display: flex; }
}

/* Ab hier ist genug Platz für die volle Leiste — Menü sicherheitshalber zu */
@media (min-width: 1001px) {
  .mobil-menue { display: none; }
}

/* Ausgeblendetes bleibt ausgeblendet, auch wenn eine Regel weiter unten
   dem Element ein eigenes display gibt. */
[hidden] { display: none !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 140px 0 100px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(138, 90, 43, 0.28), transparent 70%),
    linear-gradient(180deg, #17120e 0%, #100d0b 100%);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Weicher Lichtschein hinter dem Text */
.hero-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 90vw;
  max-width: 900px;
  height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(224, 169, 109, 0.16), transparent 65%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-lead {
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.08rem;
}

.hero h1 {
  margin-top: 10px;
  background: linear-gradient(180deg, #fdf7ef 20%, #c9b39a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Wortmarke im Kopfbereich: der Name als Schriftzug, immer einzeilig. */
.wortmarke {
  margin: 0 0 26px;
  font-size: clamp(2.4rem, 11vw, 5.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  /* gleicht die Sperrung hinter dem letzten Buchstaben aus, damit der
     Schriftzug wirklich mittig steht */
  text-indent: 0.06em;
  white-space: nowrap;
}

/* Der Verlauf sitzt auf JEDEM BUCHSTABEN einzeln, nicht auf dem ganzen Wort.
   Sonst läuft er von fast weiß beim C bis dunkelbronze beim A - die ersten
   Buchstaben wirken dann ausgebrannt. So trägt jeder Buchstabe denselben
   Verlauf, und der Schriftzug steht ruhig. */
.wortmarke span {
  display: inline-block;
  background: linear-gradient(150deg, #fff6ea 0%, var(--bronze) 55%, var(--bronze-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 380px) {
  .wortmarke { letter-spacing: 0.03em; text-indent: 0.03em; }
}

/* Ab 1280 px wächst der Kopfbereich mit der Bildschirmbreite weiter.
   Vorher blieb er ab etwa 760 px auf fester Größe stehen und sah auf
   großen Monitoren verloren aus. */
@media (min-width: 1280px) {
  /* Der Kopfbereich darf breiter laufen als der Rest der Seite, sonst
     bricht „Effizienz, die sich rechnet." in zwei Zeilen um. */
  .hero .container { max-width: 1400px; }
  .wortmarke { font-size: min(6.6vw, 10rem); margin-bottom: 34px; }
  .hero h1   { font-size: min(4.3vw, 5.4rem); }
  .hero-lead { font-size: min(1.6vw, 1.32rem); max-width: 760px; }
  .hero-actions { margin-top: 42px; }
}

@media (min-width: 1600px) {
  .hero-glow { max-width: 1400px; height: 620px; }
}

.scroll-hint {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.scroll-hint-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, transparent, var(--bronze));
  animation: scrollPulse 2.2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}

/* ---------- Buttons ---------- */
.cta-button {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--bronze), var(--bronze-2));
  color: #17120e;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(224, 169, 109, 0.25);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(224, 169, 109, 0.4);
}

.ghost-button {
  display: inline-block;
  padding: 14px 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background var(--transition), border-color var(--transition);
}

.ghost-button:hover {
  background: rgba(224, 169, 109, 0.08);
  border-color: var(--bronze);
}

/* ---------- Section-Rhythmus ---------- */
.leistungen { background: var(--bg); }
.ansatz     { background: var(--bg-alt); }
.pakete     { background: var(--bg); }
.ueber-uns  { background: var(--bg-alt); }
.referenzen { background: var(--bg); }
.kontakt    { background: var(--bg-alt); }

/* ---------- Karten (gemeinsame Basis) ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 30px 28px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Zoom-/Leucht-Effekt beim Drüberfahren */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(224, 169, 109, 0.13), transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: var(--line);
  box-shadow: var(--shadow-hover);
}

.card:hover::before { opacity: 1; }

.card h3 { color: var(--text); }
.card p  { color: var(--text-muted); font-size: 0.95rem; }

.card-num {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--bronze-deep);
  margin-bottom: 12px;
}

/* ---------- Grids ---------- */
.leistungen-grid,
.ansatz-grid,
.pakete-grid,
.referenzen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 36px;
}

/* Leistungen: feste Dreierreihen, damit das Raster aufgeht (6 Karten) */
@media (min-width: 900px) {
  .leistungen-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Ansatz: feste Zweierreihen (4 Karten) */
@media (min-width: 760px) {
  .ansatz-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Showcase (horizontale Galerie beim Scrollen) ---------- */
.showcase {
  height: 300vh; /* Startwert — die tatsächliche Höhe berechnet script.js */
  padding: 0;
  background: linear-gradient(180deg, var(--bg) 0%, #14100d 50%, var(--bg) 100%);
}

.showcase-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 90px 0 40px;
}

.showcase-head { margin-bottom: 30px; }

.showcase-sub {
  color: var(--text-muted);
  max-width: 560px;
  font-size: 1rem;
}

.showcase-viewport {
  overflow: hidden;
  width: 100%;
}

.showcase-track {
  display: flex;
  gap: 26px;
  padding: 0 28px;
  will-change: transform;
}

.mock-card {
  flex: 0 0 clamp(320px, 46vw, 540px);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color var(--transition), transform var(--transition);
}

.mock-card:hover {
  border-color: var(--line);
  transform: translateY(-4px);
}

.mock-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}

.mock-head .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.mock-title {
  margin-left: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

.mock-body { padding: 22px; min-height: 235px; }

.mock-caption {
  padding: 0 22px 20px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.showcase-note {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 22px;
}

/* KPI-Kacheln */
.kpi-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.kpi-tile {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kpi-label { font-size: 0.65rem; color: var(--text-dim); }
.kpi-value { font-size: 1.1rem; font-weight: 700; color: var(--bronze); }

/* Balken */
.mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 92px;
}

.mock-bars span {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, var(--bronze), var(--bronze-deep));
  border-radius: 4px 4px 0 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.showcase.is-visible .mock-bars span { transform: scaleY(1); }
.showcase.is-visible .mock-bars span:nth-child(2) { transition-delay: 0.06s; }
.showcase.is-visible .mock-bars span:nth-child(3) { transition-delay: 0.12s; }
.showcase.is-visible .mock-bars span:nth-child(4) { transition-delay: 0.18s; }
.showcase.is-visible .mock-bars span:nth-child(5) { transition-delay: 0.24s; }
.showcase.is-visible .mock-bars span:nth-child(6) { transition-delay: 0.30s; }
.showcase.is-visible .mock-bars span:nth-child(7) { transition-delay: 0.36s; }

/* Planungs-Tabelle */
.mock-grid { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; }

.mock-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.9fr;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
}

.mock-row-head {
  background: transparent;
  color: var(--text-dim);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 4px;
}

.mock-row-sum {
  background: rgba(224, 169, 109, 0.09);
  color: var(--text);
  font-weight: 600;
  margin-top: 4px;
}

.mock-row .editable {
  color: var(--bronze);
  border-bottom: 1px dashed rgba(224, 169, 109, 0.4);
}

.mock-row .pos { color: #8fd0a8; }
.mock-row .neg { color: #e08a7a; }

/* Forecast-Chart */
.mock-chart { width: 100%; height: 150px; display: block; }

.chart-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.6s ease;
}

.showcase.is-visible .chart-line { stroke-dashoffset: 0; }
.chart-area { opacity: 0; transition: opacity 1s ease 0.5s; }
.showcase.is-visible .chart-area { opacity: 1; }

.chart-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}

.legend-now { background: var(--bronze); }
.legend-before { background: #7a6a5a; }

/* Personal- & Einsatzplanung (Balkenplan) */
.gantt { display: flex; flex-direction: column; gap: 7px; font-size: 0.72rem; }

.gantt-months {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-left: 74px;
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

.gantt-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; }

.gantt-name { color: var(--text-muted); font-size: 0.7rem; white-space: nowrap; }

.gantt-track {
  position: relative;
  height: 15px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}

.gantt-track i {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: var(--s);
  width: var(--w);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase.is-visible .gantt-track i { transform: scaleX(1); }
.gantt-row:nth-child(3) .gantt-track i { transition-delay: 0.08s; }
.gantt-row:nth-child(4) .gantt-track i { transition-delay: 0.16s; }
.gantt-row:nth-child(5) .gantt-track i { transition-delay: 0.24s; }

.g-proj { background: linear-gradient(90deg, var(--bronze), var(--bronze-2)); }
.g-trip { background: repeating-linear-gradient(45deg, #8fd0a8, #8fd0a8 4px, #6fb98d 4px, #6fb98d 8px); }
.g-free { background: rgba(255, 255, 255, 0.1); border: 1px dashed rgba(255, 255, 255, 0.18); }

.gantt-legend {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-size: 0.65rem;
  color: var(--text-dim);
}

.gantt-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 5px;
}

.dot-proj { background: var(--bronze); }
.dot-trip { background: #8fd0a8; }
.dot-free { background: rgba(255, 255, 255, 0.22); }

/* Datenfluss-Diagramm */
.mock-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.flow-row { display: flex; gap: 8px; }

.flow-node {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 8px 13px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.flow-out { border-color: var(--line); color: var(--bronze); }

.flow-arrows { display: flex; gap: 40px; }

.flow-arrows span {
  width: 1px;
  height: 20px;
  background: linear-gradient(180deg, var(--line), transparent);
}

.flow-arrows-down span {
  background: linear-gradient(180deg, transparent, var(--line));
}

.flow-core {
  background: linear-gradient(135deg, rgba(224, 169, 109, 0.18), rgba(138, 90, 43, 0.12));
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px 26px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 768px) {
  .showcase { height: auto; }
  .showcase-sticky { position: static; height: auto; padding: 90px 0; }
  .showcase-viewport { overflow-x: auto; }
  .showcase-track { transform: none !important; }
}

/* ---------- Ablauf eines Projekts ---------- */
.ablauf { margin-top: 72px; }

.ablauf-titel {
  font-size: 1.35rem;
  margin-bottom: 34px;
  text-align: center;
}

.ablauf-schritte {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* Linie, die sich beim Scrollen aufbaut */
.ablauf-linie {
  position: absolute;
  top: 55px; /* auf Höhe der Kreismitten */
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--line-soft);
  overflow: hidden;
}

.ablauf-linie i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);               /* transform statt width: kein Layout-Neuaufbau */
  transform-origin: left;
  background: linear-gradient(90deg, var(--bronze-deep), var(--bronze));
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.ablauf.is-visible .ablauf-linie i { transform: scaleX(1); }

.ablauf-schritt {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.as-bild {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--bronze);
  margin-bottom: 16px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.as-bild svg { width: 34px; height: 26px; }

.ablauf-schritt:hover .as-bild {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 26px rgba(224, 169, 109, 0.2);
}

.as-nummer {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--bronze-deep);
  margin-bottom: 10px;
}

.ablauf-schritt h4 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.ablauf-schritt p {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 230px;
}

.ablauf-schritte .reveal:nth-child(3) { transition-delay: 0.08s; }
.ablauf-schritte .reveal:nth-child(4) { transition-delay: 0.16s; }
.ablauf-schritte .reveal:nth-child(5) { transition-delay: 0.24s; }
.ablauf-schritte .reveal:nth-child(6) { transition-delay: 0.32s; }

@media (max-width: 980px) {
  .ablauf-schritte { grid-template-columns: repeat(3, 1fr); gap: 34px 20px; }
  .ablauf-linie { display: none; }
}

@media (max-width: 700px) {
  .ablauf-schritte { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .ablauf-schritte { grid-template-columns: 1fr; }
}

/* ---------- Übergang zwischen Beratung und Webseiten ---------- */
.uebergang {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 74px;
}

.ue-zier {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 26px;
}

.ue-zier i {
  display: block;
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line));
}

.ue-zier i:last-child {
  background: linear-gradient(90deg, var(--line), transparent);
}

.ue-zier b {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bronze);
  opacity: 0.7;
}

.ue-text {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.ue-text b { color: var(--text); font-weight: 600; }

.ue-klein {
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.65;
}

/* ---------- Geschichte: Kernaussage ---------- */
/* Umfang der Konzernlösung: eine Liste, auf breiten Schirmen zweispaltig */
.story-umfang {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

.story-umfang h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bronze);
  margin-bottom: 12px;
}

.umfang-liste {
  list-style: none;
  margin: 20px 0 0;
  display: grid;
  gap: 11px 34px;
}

@media (min-width: 760px) {
  .umfang-liste { grid-template-columns: 1fr 1fr; }
}

.umfang-liste li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.umfang-liste li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bronze);
  opacity: 0.7;
}

.umfang-liste b { color: var(--text); font-weight: 600; }

.umfang-fazit { margin-top: 26px; }
.umfang-fazit b { color: var(--bronze); font-weight: 700; }

.story-kern {
  margin: 24px 0 4px;
  padding: 24px 26px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line-soft);
}

.story-kern h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bronze);
  margin-bottom: 12px;
}

.story-kern p { margin-bottom: 12px; }
.story-kern p:last-child { margin-bottom: 0; }
.story-kern b { color: var(--text); font-weight: 600; }

/* ---------- Pakete ---------- */
.pakete-intro {
  color: var(--text-muted);
  max-width: 620px;
}

.paket-card .paket-preis {
  font-weight: 700;
  color: var(--bronze);
  font-size: 1.45rem;
  white-space: nowrap;
  margin-bottom: 4px;
}

.paket-card .paket-cms {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.85rem;
}

.paket-card .paket-cms b {
  color: var(--bronze);
  font-weight: 700;
}

.paket-preis-hinweis {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.paket-empfohlen {
  border-color: var(--line);
  box-shadow: 0 0 0 1px rgba(224, 169, 109, 0.3), var(--shadow);
}

.paket-badge {
  position: absolute;
  top: 16px;
  right: 18px;
  background: linear-gradient(135deg, var(--bronze), var(--bronze-2));
  color: #17120e;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

.paket-card { cursor: pointer; }

.paket-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bronze);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.paket-card:hover .paket-link { border-color: var(--bronze); }

.paket-card.is-active {
  border-color: var(--bronze);
  box-shadow: 0 0 0 1px var(--bronze), var(--shadow-hover);
}

.paket-card.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--bronze), var(--bronze-deep));
}

/* ---------- Vorschau-Fenster ---------- */
.preview {
  margin-top: 40px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.preview-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}

.preview-bar .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.preview-url {
  margin-left: 12px;
  font-size: 0.72rem;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.25);
  padding: 4px 14px;
  border-radius: 999px;
}

.preview-hint {
  margin-left: 16px;
  font-size: 0.66rem;
  color: var(--text-dim);
  opacity: 0.8;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .preview-hint { display: none; }
}

.preview-arrows { margin-left: auto; display: flex; gap: 6px; }

.preview-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.preview-arrow:hover {
  background: rgba(224, 169, 109, 0.12);
  border-color: var(--bronze);
  color: var(--bronze);
}

.preview { --stageH: 380px; }

.preview-stage {
  position: relative;
  height: var(--stageH);
  overflow: hidden;
}

@media (max-width: 620px) {
  .preview { --stageH: 300px; }
}

.preview-meta {
  border-top: 1px solid var(--line-soft);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.preview-caption {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0;
}

.preview-features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.preview-features span {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--bronze);
  background: rgba(224, 169, 109, 0.07);
  white-space: nowrap;
}

/* ============================================================
   Beispiel-Designs (sp = site preview)
   Jede Vorschau ist eine komplette, fiktive Website. Sie scrollt
   im Rahmen langsam von oben nach unten durch — beim Drüberfahren
   mit der Maus hält sie an.
   ============================================================ */
/* Jede Vorschau ist ein echter Scroll-Bereich: Sie läuft von allein
   langsam durch, und sobald die Maus darüber steht, kann man mit dem
   Mausrad selbst durchscrollen. Am oberen/unteren Ende übernimmt
   wieder die Seite — man bleibt also nicht "hängen". */
.sp {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.sp::-webkit-scrollbar { width: 0; height: 0; }

.sp.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.sp-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ---- gemeinsame Bausteine ---- */
.sp-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  flex: 0 0 auto;
}

.sp-nav.sticky { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.sp-logo { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }
.sp-logo b { font-weight: 400; opacity: 0.6; }

.sp-links { display: flex; gap: 10px; margin-left: auto; }

.sp-links i {
  display: block;
  width: 22px;
  height: 4px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.3;
}

.sp-phone, .sp-lang {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  opacity: 0.6;
  white-space: nowrap;
}

.sp-h1 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 4px;
}

.sp-bar {
  height: 5px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.2;
  margin-bottom: 5px;
}

.sp-bar.w70 { width: 78%; }
.sp-bar.w50 { width: 55%; }
.sp-bar.center { margin-left: auto; margin-right: auto; }

.sp-btn {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.sp-btn.small { padding: 6px 15px; font-size: 0.63rem; }
.sp-btn.tiny  { padding: 5px 13px; font-size: 0.6rem; }
.sp-btn.ghost { background: transparent !important; border: 1px solid currentColor; }
.sp-btns { display: flex; gap: 8px; margin-top: 10px; }

.sp-sec { padding: 20px 22px; flex: 0 0 auto; }

.sp-sec-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 12px;
}

.sp-row3, .sp-row4 { display: grid; gap: 10px; }
.sp-row3 { grid-template-columns: repeat(3, 1fr); }
.sp-row4 { grid-template-columns: repeat(4, 1fr); }

.sp-mini, .sp-post {
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.65rem;
}

.sp-mini b, .sp-post b { font-size: 0.68rem; font-weight: 700; }

.sp-mini i, .sp-post i, .sp-about-txt i, .sp-quote-txt i, .sp-opt-row i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.2;
}

.sp-mini i.short, .sp-about-txt i.short { width: 60%; }

.sp-ico {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: currentColor;
  opacity: 0.28;
}

.sp-foot {
  margin-top: auto;
  padding: 16px 22px;
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.sp-foot i {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.18;
}

.sp-foot.cols i { height: 28px; border-radius: 5px; opacity: 0.1; }

/* ---- echte Texte statt grauer Platzhalter ---- */
.sp-txt {
  font-size: 0.62rem;
  line-height: 1.5;
  opacity: 0.72;
  margin: 0;
}

.sp-eyebrow {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  display: block;
  margin-bottom: 6px;
}

/* Icons: schlichte geometrische Formen statt leerer Kästchen */
.sp-ico {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.sp-ico::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: currentColor;
  opacity: 0.13;
}

.sp-ico::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.6px solid currentColor;
  opacity: 0.8;
}

.sp-ico.ico-1::after { border-radius: 50%; }
.sp-ico.ico-2::after { border-radius: 2px; }
.sp-ico.ico-3::after { border-radius: 2px; transform: rotate(45deg); inset: 6px; }
.sp-ico.ico-4::after { border-radius: 2px; border-width: 0 0 1.5px 1.5px; }

.sp-stars { font-size: 0.62rem; letter-spacing: 0.06em; margin-top: 6px; }
.sp-stars b { font-weight: 800; }
.sp-stars span { opacity: 0.6; }

.sp-foot-real {
  margin-top: auto;
  padding: 16px 22px;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 14px;
  font-size: 0.56rem;
  line-height: 1.7;
  opacity: 0.6;
  border-top: 1px solid currentColor;
}

.sp-foot-real b { font-weight: 800; opacity: 0.9; }

/* ================= STARTER: hell, schlicht ================= */
.sp-starter { background: #f6f3ee; color: #24201c; }
.sp-starter .sp-btn { background: #24201c; color: #f6f3ee; }
.sp-starter .sp-btn.ghost { color: #24201c; }
.sp-starter .sp-mini { background: rgba(36, 32, 28, 0.05); border: 1px solid rgba(36, 32, 28, 0.08); }

.sp-hero-basic {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  align-items: center;
  padding: 14px 22px 24px;
}

.sp-photo {
  position: relative;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(36, 32, 28, 0.1);
}

/* "Foto": gezeichnetes Haus statt grauem Kasten */
.sp-photo-haus {
  background: linear-gradient(170deg, #cfd9e2 0%, #e8e2d8 55%, #d9cfc0 100%);
}

.sp-photo-haus .ph-roof {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 74px solid transparent;
  border-right: 74px solid transparent;
  border-bottom: 44px solid #8a6f57;
}

.sp-photo-haus::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  width: 128px;
  height: 78px;
  background: #f3ece2;
  border: 1px solid rgba(36, 32, 28, 0.12);
}

.sp-photo-haus .ph-win,
.sp-photo-haus .ph-door {
  position: absolute;
  z-index: 1;
  background: #6f8ba3;
  border-radius: 2px;
}

.sp-photo-haus .ph-win { width: 22px; height: 20px; top: 72px; }
.sp-photo-haus .ph-win:nth-of-type(2) { left: calc(50% - 52px); }
.sp-photo-haus .ph-win:nth-of-type(3) { left: calc(50% - 12px); }
.sp-photo-haus .ph-win:nth-of-type(4) { left: calc(50% + 28px); }
.sp-photo-haus .ph-win:nth-of-type(5) { left: calc(50% - 52px); top: 104px; }

.sp-photo-haus .ph-door {
  width: 24px; height: 34px;
  left: calc(50% + 4px); top: 104px;
  background: #8a6f57;
  border-radius: 3px 3px 0 0;
}

/* "Teamfoto": drei abstrakte Figuren */
.sp-photo-team {
  height: 96px;
  background: linear-gradient(160deg, #e5ded2, #cdd6dd);
}

.sp-photo-team span {
  position: absolute;
  bottom: 0;
  width: 30px;
  height: 46px;
  border-radius: 15px 15px 0 0;
  background: #7d8fa0;
}

.sp-photo-team span::before {
  content: '';
  position: absolute;
  top: -17px; left: 50%;
  transform: translateX(-50%);
  width: 17px; height: 17px;
  border-radius: 50%;
  background: inherit;
}

.sp-photo-team .ph-p1 { left: 22%; }
.sp-photo-team .ph-p2 { left: 42%; height: 54px; background: #63768a; }
.sp-photo-team .ph-p3 { left: 62%; background: #97a6b4; }

/* Projekt-Galerie */
.sp-gal4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.sp-gal4 span {
  height: 62px;
  border-radius: 7px;
  border: 1px solid rgba(36, 32, 28, 0.08);
}

.sp-gal4 .g1 { background: linear-gradient(150deg, #d6c3a8, #b39872); }
.sp-gal4 .g2 { background: linear-gradient(150deg, #c3cdd6, #8fa3b5); }
.sp-gal4 .g3 { background: linear-gradient(150deg, #d9d2c6, #a89a86); }
.sp-gal4 .g4 { background: linear-gradient(150deg, #cad6cd, #8fae9c); }

/* Vertrauens-Leiste */
.sp-trust {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 10px 22px;
  background: rgba(36, 32, 28, 0.05);
  border-block: 1px solid rgba(36, 32, 28, 0.07);
  font-size: 0.6rem;
  font-weight: 600;
  opacity: 0.75;
}

.sp-about { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 18px; align-items: center; }
.sp-about-txt { display: flex; flex-direction: column; gap: 4px; }

.sp-cta-strip {
  margin: 4px 22px 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(36, 32, 28, 0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 0.72rem;
}

.sp-starter .sp-foot-real { border-color: rgba(36, 32, 28, 0.12); }

/* ================= BUSINESS: kräftig, viele Module ================= */
.sp-business {
  background: linear-gradient(180deg, #16202b 0%, #1b2b3a 40%, #16202b 100%);
  color: #e8eef4;
}

.sp-business .sp-btn { background: #5eb3d6; color: #10202b; }
.sp-business .sp-btn.ghost { color: #cfe2ee; }
.sp-business .sp-mini,
.sp-business .sp-post {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.sp-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 22px;
  align-items: center;
  padding: 22px;
}

.sp-split-left { display: flex; flex-direction: column; }
.sp-split-right { display: flex; flex-direction: column; gap: 9px; }

.sp-panel {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
  height: 88px;
}

.sp-panel-slim { height: 26px; padding: 0; }
.sp-panel-bars { display: flex; align-items: flex-end; gap: 7px; height: 100%; }

.sp-panel-bars span {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #7fd0ef, #3b7fa3);
}

.sp-eyebrow.blue { color: #7fd0ef; opacity: 0.9; }

.sp-panel-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.6rem;
  opacity: 0.75;
  margin-bottom: 8px;
}

.sp-panel-top b { font-size: 0.85rem; color: #7fd0ef; opacity: 1; }

.sp-panel-row {
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
}

.sp-panel-row div { display: flex; flex-direction: column; }
.sp-panel-row b { font-size: 0.85rem; font-weight: 800; color: #7fd0ef; }
.sp-panel-row span { font-size: 0.55rem; opacity: 0.6; }

.sp-logobar {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 13px 22px;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}

.sp-logobar span {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.35;
}

.sp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.sp-steps div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
  border-left: 2px solid rgba(127, 208, 239, 0.4);
}

.sp-steps u {
  font-size: 0.55rem;
  font-weight: 800;
  color: #7fd0ef;
  text-decoration: none;
  letter-spacing: 0.1em;
}

.sp-steps b { font-size: 0.7rem; }

.sp-quote-src { font-size: 0.55rem; opacity: 0.55; }

.sp-post em {
  font-style: normal;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7fd0ef;
  opacity: 0.8;
}

.sp-thumb.t1 { background: linear-gradient(150deg, #4a7fa0, #2b4f66); }
.sp-thumb.t2 { background: linear-gradient(150deg, #7fd0ef, #3b7fa3); }
.sp-thumb.t3 { background: linear-gradient(150deg, #6b8fa8, #37546b); }

.sp-foot-real.blue { border-color: rgba(255, 255, 255, 0.12); }

.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.sp-stats div { display: flex; flex-direction: column; gap: 2px; }
.sp-stats b { font-size: 1.05rem; font-weight: 800; color: #7fd0ef; }
.sp-stats span { font-size: 0.6rem; opacity: 0.6; }

.sp-quote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin: 0 22px;
  padding: 18px;
}

.sp-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.sp-quote-txt { display: flex; flex-direction: column; gap: 7px; font-size: 0.72rem; }
.sp-dots { grid-column: 1 / -1; display: flex; gap: 5px; justify-content: center; }

.sp-dots u {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.25;
}

.sp-dots u.on { opacity: 0.9; width: 14px; border-radius: 3px; background: #7fd0ef; }

.sp-thumb {
  height: 42px;
  border-radius: 6px;
  background: linear-gradient(140deg, rgba(127, 208, 239, 0.3), rgba(255, 255, 255, 0.05));
}

.sp-form-strip {
  margin: 0 22px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(127, 208, 239, 0.1);
  border: 1px solid rgba(127, 208, 239, 0.2);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.7rem;
}

.sp-input {
  flex: 1;
  min-width: 90px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.6rem;
  opacity: 0.55;
}

/* ================= PREMIUM: dunkel, inszeniert ================= */
.sp-premium { background: #0d0907; color: #f3e9dc; }

.sp-hero-full {
  position: relative;
  min-height: var(--stageH);
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse 70% 65% at 50% 35%, #2a1d12 0%, #0d0907 72%);
  overflow: hidden;
}

.sp-orbs { position: absolute; inset: 0; pointer-events: none; }

.sp-orbs i { position: absolute; border-radius: 50%; filter: blur(30px); opacity: 0.5; }

.sp-orbs i:nth-child(1) {
  width: 170px; height: 170px; left: 8%; top: 16%;
  background: rgba(224, 169, 109, 0.55);
  animation: orbFloat 11s ease-in-out infinite;
}

.sp-orbs i:nth-child(2) {
  width: 130px; height: 130px; right: 10%; top: 38%;
  background: rgba(138, 90, 43, 0.6);
  animation: orbFloat 14s ease-in-out infinite reverse;
}

.sp-orbs i:nth-child(3) {
  width: 90px; height: 90px; left: 46%; bottom: 14%;
  background: rgba(201, 139, 75, 0.45);
  animation: orbFloat 9s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(22px, -26px) scale(1.12); }
}

.sp-premium .sp-nav,
.sp-premium .sp-center,
.sp-premium .sp-scrollcue { position: relative; z-index: 1; }

.sp-center {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0 22px;
}

.sp-h1-xl {
  font-size: 2.1rem;
  letter-spacing: -0.04em;
  background: linear-gradient(140deg, #fff8ef 0%, #e0a96d 55%, #8a5a2b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sp-h1-xl span {
  margin: 0 6px;
  -webkit-text-fill-color: rgba(224, 169, 109, 0.6);
  color: rgba(224, 169, 109, 0.6);
}

.sp-premium .sp-btn.glow {
  background: linear-gradient(135deg, #e0a96d, #c98b4b);
  color: #17120e;
  box-shadow: 0 8px 26px rgba(224, 169, 109, 0.35);
  margin-top: 6px;
}

.sp-scrollcue {
  padding: 0 0 16px;
  text-align: center;
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  opacity: 0.5;
}

.sp-scrollcue i {
  display: block;
  width: 1px; height: 22px;
  margin: 0 auto 6px;
  background: linear-gradient(180deg, transparent, #e0a96d);
}

.sp-sec-title.gold { color: #e0a96d; opacity: 0.85; }

.sp-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }

.sp-gallery span {
  height: 66px;
  border-radius: 7px;
  background: linear-gradient(160deg, rgba(224, 169, 109, 0.26), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(224, 169, 109, 0.18);
}

.sp-config { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }

.sp-config-stage {
  height: 130px;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 45%, rgba(224, 169, 109, 0.18), rgba(13, 9, 7, 0.9) 70%);
  border: 1px solid rgba(224, 169, 109, 0.14);
  display: grid;
  place-items: center;
}

.sp-3d { position: relative; width: 74px; height: 74px; }

.sp-3d i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(224, 169, 109, 0.6);
  border-radius: 12px;
  animation: spin3d 7s linear infinite;
}

.sp-3d i:nth-child(2) { animation-duration: 9s; animation-direction: reverse; opacity: 0.6; }
.sp-3d i:nth-child(3) { animation-duration: 12s; opacity: 0.35; border-radius: 50%; }

@keyframes spin3d {
  from { transform: rotate3d(1, 1, 0, 0deg); }
  to   { transform: rotate3d(1, 1, 0, 360deg); }
}

.sp-config-opts { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.sp-config-opts .sp-opt-row { align-self: stretch; }
.sp-swatches { display: flex; gap: 7px; }

.sp-swatches u {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.sp-swatches u.s1 { background: #e0a96d; }
.sp-swatches u.s2 { background: #6b4a2e; }
.sp-swatches u.s3 { background: #d8cfc2; }
.sp-swatches u.s4 { background: #2b2320; }
.sp-swatches u.on { outline: 2px solid #e0a96d; outline-offset: 2px; }

.sp-opt-row { display: flex; align-items: center; gap: 10px; }
.sp-opt-row i { flex: 1; }

.sp-toggle {
  width: 28px; height: 15px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  position: relative;
  flex: 0 0 auto;
}

.sp-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transition: transform 0.3s ease;
}

.sp-toggle.on { background: rgba(224, 169, 109, 0.5); }
.sp-toggle.on::after { transform: translateX(13px); background: #e0a96d; }

/* Video-/Prozess-Sektion: laufender Filmstreifen, Lichtschweif,
   pulsierender Play-Knopf und laufender Fortschrittsbalken */
.sp-immersive {
  position: relative;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  background: #120c08;
  border: 1px solid rgba(224, 169, 109, 0.18);
  display: grid;
  place-items: center;
}

.sp-film {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 4px;
  animation: filmRoll 26s linear infinite;
  opacity: 0.5;
}

.sp-film span {
  flex: 0 0 128px;
  border-radius: 3px;
}

.sp-film .f1 { background: linear-gradient(160deg, #b97f4a, #4a3120); }
.sp-film .f2 { background: linear-gradient(160deg, #6e4f33, #241811); }
.sp-film .f3 { background: linear-gradient(160deg, #e0a96d, #7b5230); }
.sp-film .f4 { background: linear-gradient(160deg, #3d2c1e, #120c08); }
.sp-film .f5 { background: linear-gradient(160deg, #c99257, #513723); }
.sp-film .f6 { background: linear-gradient(160deg, #8a6340, #2a1c12); }

@keyframes filmRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Lichtschweif, der langsam über das Bild wandert */
.sp-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 240, 220, 0.16) 48%, transparent 66%);
  transform: translateX(-100%);
  animation: sheenSweep 6.5s ease-in-out infinite;
}

@keyframes sheenSweep {
  0%, 55%  { transform: translateX(-100%); }
  100%     { transform: translateX(100%); }
}

.sp-immersive-mid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(12, 8, 6, 0.55);
  backdrop-filter: blur(3px);
  font-size: 0.75rem;
}

.sp-immersive-sub {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}

.sp-play {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--bronze), var(--bronze-2));
  box-shadow: 0 6px 22px rgba(224, 169, 109, 0.45);
}

.sp-play::after {
  content: '';
  border-left: 11px solid #17120e;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}

/* zwei pulsierende Ringe */
.sp-play i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(224, 169, 109, 0.55);
  animation: playPulse 2.6s ease-out infinite;
}

.sp-play i:nth-child(2) { animation-delay: 1.3s; }

@keyframes playPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.1); opacity: 0; }
}

.sp-scrub {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  z-index: 2;
}

.sp-scrub u {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bronze), #fff2e0);
  animation: scrubRun 9s linear infinite;
}

@keyframes scrubRun {
  from { width: 4%; }
  to   { width: 100%; }
}

/* Kapitel unter dem Film */
.sp-chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.sp-chapters div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 11px;
  border-left: 1px solid rgba(224, 169, 109, 0.35);
}

.sp-chapters em {
  font-style: normal;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--bronze);
  opacity: 0.8;
}

.sp-chapters b { font-size: 0.7rem; }

@media (prefers-reduced-motion: reduce) {
  .sp-film, .sp-sheen, .sp-play i, .sp-scrub u { animation: none; }
}

.sp-foot.gold i { background: #e0a96d; opacity: 0.12; }

@media (max-width: 620px) {
  .sp-split, .sp-config, .sp-about, .sp-hero-basic { grid-template-columns: 1fr; gap: 14px; }
  .sp-split-right, .sp-photo { display: none; }
  .sp-row4 { grid-template-columns: repeat(2, 1fr); }
}

.paket-card .paket-cms em {
  font-style: normal;
  color: var(--text);
  font-weight: 600;
}

/* Betreuungs-Block unter den Paketen */
.betreuung {
  margin-top: 46px;
  padding-top: 38px;
  border-top: 1px solid var(--line-soft);
}

.betreuung-kopf { max-width: 640px; margin-bottom: 26px; }
.betreuung-kopf h3 { font-size: 1.35rem; margin-bottom: 10px; }
.betreuung-kopf p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

.betreuung-frei {
  margin-top: 12px !important;
  padding-left: 14px;
  border-left: 2px solid var(--bronze);
  font-size: 0.9rem !important;
}

.betreuung-frei b { color: var(--text); font-weight: 700; }

.betreuung-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.betreuung-karte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Taschenlampen-Effekt wie bei den übrigen Karten */
.betreuung-karte::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(224, 169, 109, 0.13), transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.betreuung-karte:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: var(--line);
  box-shadow: var(--shadow-hover);
}

.betreuung-karte:hover::before { opacity: 1; }

.betreuung-karte > * { position: relative; z-index: 1; }

/* Das Empfehlungs-Schild bleibt absolut positioniert (oben rechts) */
.betreuung-karte > .paket-badge { position: absolute; z-index: 2; }

.bs-empfohlen {
  border-color: var(--line);
  box-shadow: 0 0 0 1px rgba(224, 169, 109, 0.3), var(--shadow);
}

.bs-preis {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--bronze);
  line-height: 1.1;
}

.bs-preis::after {
  content: ' / Monat';
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.bs-name {
  font-size: 1rem;
  font-weight: 700;
  margin: 2px 0 14px;
}

.bs-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
}

.bs-liste li {
  position: relative;
  padding-left: 20px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.bs-liste li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bronze);
  opacity: 0.65;
}

.bs-liste b { color: var(--text); font-weight: 600; }

.bs-reaktion {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bronze);
}

.betreuung-hinweis {
  margin-top: 22px;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.6;
}

.betreuung-hinweis b { color: var(--text-muted); }

.betreuung-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.betreuung-grid .reveal:nth-child(3) { transition-delay: 0.16s; }

/* Transparenz-Hinweis unter den Paketen */
.transparenz {
  margin-top: 34px;
  padding: 24px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(224, 169, 109, 0.07), rgba(29, 24, 20, 0.5));
}

.transparenz h3 { font-size: 1.1rem; margin-bottom: 8px; }

.transparenz p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0;
  max-width: 780px;
}

.transparenz b { color: var(--text); font-weight: 600; }

.pakete-note,
.referenzen-note {
  margin-top: 24px;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ---------- Über uns ---------- */
.ueber-text { max-width: 720px; margin-top: 26px; }

.ueber-uns p {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.75;
  margin-bottom: 18px;
}

.ub-gross {
  font-size: 1.25rem !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
  font-weight: 600;
  padding-left: 18px;
  border-left: 3px solid var(--bronze);
  margin-bottom: 26px !important;
}

.ub-abschluss {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.ub-abschluss b { color: var(--bronze); font-weight: 700; }

.ueber-text .reveal:nth-child(2) { transition-delay: 0.06s; }
.ueber-text .reveal:nth-child(3) { transition-delay: 0.12s; }
.ueber-text .reveal:nth-child(4) { transition-delay: 0.18s; }
.ueber-text .reveal:nth-child(5) { transition-delay: 0.24s; }

/* ---------- Referenzen: Vorher / Nachher ---------- */
.ref-intro {
  color: var(--text-muted);
  max-width: 680px;
  font-size: 1.02rem;
  margin-bottom: 38px;
}

.vergleich {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
}

.vergleich-seite {
  position: relative;
  padding: 28px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  height: 100%;
}

.vs-marke {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.vs-vorher {
  background: linear-gradient(160deg, rgba(60, 50, 44, 0.5), var(--surface));
}

.vs-vorher .vs-marke {
  background: rgba(232, 160, 143, 0.14);
  color: #e8a08f;
}

.vs-heute {
  border-color: var(--line);
  background: linear-gradient(160deg, rgba(224, 169, 109, 0.09), var(--surface));
}

.vs-heute .vs-marke {
  background: rgba(224, 169, 109, 0.16);
  color: var(--bronze);
}

.vergleich-seite h3 { font-size: 1.2rem; margin-bottom: 16px; }

.vergleich-seite ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vergleich-seite li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.vs-vorher li::before,
.vs-heute li::before {
  position: absolute;
  left: 0;
  top: -1px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.vs-vorher li::before { content: '×'; color: #e8a08f; opacity: 0.8; }
.vs-heute li::before  { content: '✓'; color: var(--bronze); }

.vergleich-pfeil {
  color: var(--bronze);
  opacity: 0.7;
  display: grid;
  place-items: center;
}

.vergleich-pfeil svg { width: 40px; height: 24px; }

@media (max-width: 860px) {
  .vergleich { grid-template-columns: 1fr; gap: 16px; }
  .vergleich-pfeil svg { transform: rotate(90deg); }
}

/* ---------- Geschichte / Beweis-Block ---------- */
.story {
  margin-top: 40px;
  padding: 38px 36px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(224, 169, 109, 0.08), rgba(29, 24, 20, 0.55));
}

.story-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--bronze);
  margin-bottom: 10px;
}

.story h3 { font-size: 1.4rem; margin-bottom: 16px; }

.story p {
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.7;
  max-width: 780px;
  margin-bottom: 14px;
}

.story-fazit {
  margin-top: 20px !important;
  padding-left: 18px;
  border-left: 3px solid var(--bronze);
  color: var(--text) !important;
  font-size: 1.05rem !important;
  font-weight: 600;
}

@media (max-width: 600px) {
  .story { padding: 28px 24px; }
}

.case-hinweis {
  margin-top: 14px;
  font-size: 0.78rem;
  color: #e8a08f;
  opacity: 0.85;
}

/* ---------- Referenzen: Highlight-Case ---------- */
.case-highlight {
  margin-top: 36px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 42px 40px;
  box-shadow: var(--shadow);
}

.case-highlight h3 { font-size: 1.5rem; }

.case-highlight p {
  color: var(--text-muted);
  max-width: 720px;
  margin-bottom: 16px;
}

.case-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

.case-metric { display: flex; flex-direction: column; gap: 4px; }

.case-metric-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--bronze);
  letter-spacing: -0.02em;
}

.case-metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

@media (max-width: 600px) {
  .case-highlight { padding: 30px 24px; }
  .case-metrics { gap: 24px; }
}

/* ---------- Kontakt ---------- */
.kontakt p { color: var(--text-muted); }
.kontakt a { color: var(--bronze); }

.kontakt-lead { margin-bottom: 4px; }

/* ---------- Brief-Animation ---------- */
.kontakt-stage {
  position: relative;
  perspective: 1400px;
  margin-top: 74px; /* Platz, damit der Brief beim Herausgleiten nichts überdeckt */
  padding-top: 150px;
  max-width: 520px;
}

.envelope {
  position: absolute;
  top: 0;
  left: 0;
  width: 210px;
  height: 132px;
  transform-style: preserve-3d;
  /* Startzustand: von unten hereinfliegend.
     Diese Übergänge gelten beim Schließen (Rückweg) — zuletzt fliegt
     der Umschlag weg, deshalb die Verzögerung. */
  opacity: 0;
  transform: translate3d(60px, 90px, -260px) rotateX(58deg) rotateZ(-14deg);
  transition: opacity 0.5s ease 0.8s, transform 0.8s cubic-bezier(0.55, 0, 0.55, 0.2) 0.8s;
}

.kontakt.is-open .envelope {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(14deg) rotateZ(0deg);
  transition: opacity 0.4s ease, transform 0.62s cubic-bezier(0.19, 1, 0.22, 1);
}

.env-shadow {
  position: absolute;
  left: 8%;
  bottom: -18px;
  width: 84%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s ease 0.8s;
}

.kontakt.is-open .env-shadow { transition: opacity 0.4s ease 0.28s; }

.kontakt.is-open .env-shadow { opacity: 1; }

.env-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.env-back,
.env-front,
.env-flap {
  position: absolute;
  inset: 0;
  border-radius: 6px;
}

.env-back {
  background: linear-gradient(150deg, #2b221b, #1a1410);
  border: 1px solid rgba(224, 169, 109, 0.28);
}

/* Der Brief im Inneren */
.env-letter {
  position: absolute;
  left: 9%;
  bottom: 8px;
  width: 82%;
  height: 100px;
  border-radius: 4px;
  background: linear-gradient(170deg, #f6efe4, #ded2c0);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transform: translateY(0);
  z-index: 1;
  /* Rückweg: Brief rutscht als Zweites wieder hinein */
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.55, 0.2) 0.28s;
}

.kontakt.is-open .env-letter {
  transform: translateY(-56px);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.env-letter i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #b6a894;
  opacity: 0.85;
}

.env-letter i.short { width: 55%; }

/* Vorderseite mit V-Kante und Siegel */
.env-front {
  background: linear-gradient(160deg, #3a2d23, #241b15);
  border: 1px solid rgba(224, 169, 109, 0.3);
  z-index: 2;
  clip-path: polygon(0 22%, 50% 74%, 100% 22%, 100% 100%, 0 100%);
  display: grid;
  place-items: center;
}

.env-seal {
  margin-top: 26px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #17120e;
  background: linear-gradient(135deg, var(--bronze), var(--bronze-2));
  box-shadow: 0 4px 14px rgba(224, 169, 109, 0.4);
}

/* Die Klappe, die sich nach hinten öffnet */
.env-flap {
  height: 62%;
  background: linear-gradient(170deg, #4a392c, #2e231a);
  border: 1px solid rgba(224, 169, 109, 0.3);
  border-radius: 6px 6px 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  z-index: 3;
  backface-visibility: hidden;
  /* Rückweg: Klappe schließt als Drittes */
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.55s, z-index 0s 0.55s;
}

.kontakt.is-open .env-flap {
  transform: rotateX(-172deg);
  transition: transform 0.48s cubic-bezier(0.65, 0, 0.35, 1) 0.28s;
  z-index: 0;
}

/* Das Formular entfaltet sich aus dem Umschlag heraus */
.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
  margin-top: 32px;
  transform-origin: top center;
  opacity: 0;
  transform: perspective(1000px) rotateX(-78deg) scaleY(0.7);
  /* Rückweg: Formular klappt als Erstes wieder zu */
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.55, 0, 0.55, 0.2);
}

.kontakt.is-open .kontakt-form {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) scaleY(1);
  transition: opacity 0.38s ease 0.72s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.72s;
}

/* Wer weniger Bewegung eingestellt hat, sieht das Formular sofort */
@media (prefers-reduced-motion: reduce) {
  .kontakt-stage { padding-top: 0; }
  .envelope { display: none; }
  .kontakt-form,
  .kontakt.is-open .kontakt-form {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 560px) {
  .envelope { width: 168px; height: 106px; }
  .kontakt-stage { padding-top: 124px; }
}

.kontakt-form label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.kontakt-form input,
.kontakt-form textarea {
  padding: 13px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  font-family: inherit;
  font-size: 1rem;   /* 16px - darunter zoomt iOS beim Antippen hinein */
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.kontakt-form input::placeholder,
.kontakt-form textarea::placeholder { color: var(--text-dim); }

.kontakt-form input:focus,
.kontakt-form textarea:focus {
  outline: none;
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(224, 169, 109, 0.14);
}

.kontakt-form button { align-self: flex-start; margin-top: 6px; }

/* Spam-Falle: unsichtbar, aber nicht per display:none (Bots erkennen das) */
.hp-field {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

.form-status {
  font-size: 0.88rem;
  margin-top: 4px;
  min-height: 1.2em;
}

.form-status.is-ok {
  color: #8fd0a8;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(143, 208, 168, 0.1);
  border: 1px solid rgba(143, 208, 168, 0.3);
}

.form-status.is-error {
  color: #e8a08f;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(232, 160, 143, 0.09);
  border: 1px solid rgba(232, 160, 143, 0.28);
}

.kontakt-hinweis code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.92em;
  color: var(--bronze);
  background: rgba(224, 169, 109, 0.09);
  padding: 1px 6px;
  border-radius: 4px;
}

.kontakt-hinweis {
  margin-top: 18px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* ---------- Scroll-Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.leistungen-grid .reveal:nth-child(2),
.ansatz-grid .reveal:nth-child(2),
.referenzen-grid .reveal:nth-child(2),
.pakete-grid .reveal:nth-child(2) { transition-delay: 0.08s; }

.leistungen-grid .reveal:nth-child(3),
.ansatz-grid .reveal:nth-child(3),
.pakete-grid .reveal:nth-child(3) { transition-delay: 0.16s; }

.leistungen-grid .reveal:nth-child(4),
.ansatz-grid .reveal:nth-child(4) { transition-delay: 0.24s; }

.leistungen-grid .reveal:nth-child(5) { transition-delay: 0.32s; }

/* ---------- Unterseiten (Über uns) ----------
   Der Kopf der Seite braucht Luft, weil die Leiste oben fest steht. */
.seite-kopf { padding-top: 168px; }

/* Eine Unterseite ist eine Lesestrecke: schmale, mittige Spalte statt
   der breiten Raster der Startseite. */
.unterseite .container { max-width: 820px; }
.unterseite .ueber-uns h1 { margin-bottom: 6px; }
.unterseite .ueber-text { max-width: none; }

/* Abschluss einer Unterseite: der Weg zurück in die Hauptseite */
.seite-abschluss {
  margin-top: 54px;
  padding-top: 34px;
  border-top: 1px solid var(--line-soft);
}

.seite-abschluss p {
  margin-bottom: 22px;
  color: var(--text-muted);
}

.seite-abschluss-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 640px) {
  .seite-kopf { padding-top: 128px; }
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.rechtstext .rt-inhalt {
  padding: 150px 0 90px;
}

.rechtstext .container { max-width: 800px; }

.rechtstext h1 {
  /* Lange Wörter wie „Datenschutzerklärung" müssen auf schmalen
     Bildschirmen umbrechen dürfen, sonst wird die Seite seitlich
     scrollbar */
  font-size: clamp(1.65rem, 6.4vw, 2.6rem);
  margin-bottom: 28px;
  overflow-wrap: break-word;
  hyphens: auto;
}

.rechtstext .rt-inhalt a { overflow-wrap: anywhere; }

.rechtstext .rt-inhalt h2 {
  font-size: 1.2rem;
  margin-top: 38px;
  margin-bottom: 12px;
  color: var(--text);
}

.rechtstext .rt-inhalt p,
.rechtstext .rt-inhalt li {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

.rechtstext .rt-inhalt p { margin-bottom: 14px; }

.rechtstext .rt-inhalt ul {
  list-style: none;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rechtstext .rt-inhalt li {
  position: relative;
  padding-left: 20px;
}

.rechtstext .rt-inhalt li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bronze);
  opacity: 0.6;
}

.rechtstext .rt-inhalt b { color: var(--text); font-weight: 600; }
.rechtstext .rt-inhalt a { color: var(--bronze); }

/* Auffälliger Hinweis für die noch offenen Platzhalter */
.rt-warnung {
  margin-bottom: 30px;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid rgba(232, 160, 143, 0.35);
  background: rgba(232, 160, 143, 0.08);
  font-size: 0.88rem;
  line-height: 1.6;
  color: #e8b3a4;
}

.rt-warnung b { color: #f0c9bd; }

.rt-stand {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ---------- Footer ---------- */
.footer-inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: center;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-links a:hover { color: var(--bronze); }

/* ---------- Soziale Symbole im Footer ---------- */
.footer-sozial {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sozial-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--text-muted);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--transition), border-color var(--transition),
              background var(--transition), transform var(--transition);
}

.sozial-knopf svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sozial-knopf:hover {
  color: var(--bronze);
  border-color: var(--line);
  background: rgba(224, 169, 109, 0.08);
  transform: translateY(-2px);
}

/* Grün beim Teilen-Knopf, damit er als WhatsApp erkennbar ist */
.sozial-teilen:hover {
  color: #5ec77f;
  border-color: rgba(94, 199, 127, 0.45);
  background: rgba(94, 199, 127, 0.09);
}

/* Noch ohne hinterlegte Adresse: gestrichelter Rand als Erinnerung.
   Verschwindet automatisch, sobald eine echte Adresse eingetragen ist. */
.sozial-knopf.ist-platzhalter {
  border-style: dashed;
  opacity: 0.62;
}

.sozial-knopf.ist-platzhalter:hover { opacity: 1; }

/* Kurze Rückmeldung, wenn der Link in die Zwischenablage kopiert wurde */
.sozial-knopf.ist-kopiert::after {
  content: 'Link kopiert';
  position: absolute;
  transform: translateY(-38px);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-size: 0.72rem;
  white-space: nowrap;
}

.sozial-knopf { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .sozial-knopf:hover { transform: none; }
}

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding: 32px 0;
  color: var(--text-dim);
  font-size: 0.85rem;
}


/* Einwilligung am Kontaktformular */
.form-zustimmung {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 18px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-gedaempft, #a5978a);
  cursor: pointer;
}
.form-zustimmung input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--akzent, #e0a96d);
}
.form-zustimmung a { color: var(--akzent, #e0a96d); }

/* --- Korrekturen 25.08.2026 (Pruefbericht) --- */
/* Tastaturfokus sichtbar - vorher fehlte jede :focus-visible-Regel */
:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
  border-radius: 6px;
}
.kontakt-form input:focus-visible,
.kontakt-form textarea:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

/* Tippflaechen mindestens 44px */
.logo { min-height: 44px; }
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
.sozial-knopf { min-width: 44px; min-height: 44px; }
.preview-arrow { min-width: 44px; min-height: 44px; }
.cta-button, .nav-cta { white-space: nowrap; }
.referenzen-note, .betreuung-hinweis, .pakete-note, .kontakt-hinweis,
.story-fazit, .sp-txt { max-width: 68ch; margin-inline: auto; }
.story p, .story-kern p, .ueber-text p, .transparenz p { max-width: 68ch; }