/* ==========================================================================
   Kanzlei Marc J. Hubrich — Premium-Landingpage
   Designsystem „Porzellan & Tinte" (Familien-Schema mit online-scheidung)
   Farbwelt: Porzellan-Canvas, Graphit/Tinte, warmer Stein, Ton-Terrakotta,
   Stahlblau als Akzent- und Lichtfarbe (Linien, Kanten, Fokus).
   Keine externen Requests: Fonts lokal, kein Tracking, keine Cookies.
   ========================================================================== */

/* ---------- Fonts (self-hosted, DSGVO-sauber · ITF Free Font License) ---------- */
@font-face {
  font-family: "Zodiak";
  src: url("../fonts/zodiak-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HarmonyOS Sans";
  src: url("../fonts/harmonyossans-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HarmonyOS Sans";
  src: url("../fonts/harmonyossans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HarmonyOS Sans";
  src: url("../fonts/harmonyossans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HarmonyOS Sans";
  src: url("../fonts/harmonyossans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* ---- „Der erste klare Tag": Basisfarben (Spec Paragraf 2) ---- */
    --blaunacht: #2A2F36;  /* Diskretion — Huawei-Graphit: Metallgehäuse bei Nacht, kein KI-Navy */
  --eis: #E4EDF0;        /* Eis-Hauch */
  --morgen: #F4F7F8;
  --tuerkis: #6FA9B5;      /* das Licht, gedeckt */
  --tuerkis-hell: #9FC4CC;
  --tuerkis-tief: #33606C;
  --morandi: #6E89AC;      /* grosse Akzente auf Hell (nur >=24px) */
  --morandi-hell: #AFC2DC; /* Labels auf Blaunacht */
  --morandi-tief: #48628A; /* Text-Akzente auf Hell */
  --rot: #E4573F;      /* Glut — der Mensch (Kapsel-Uhr, Punkt) */
  --rot-tief: #AE2921;   /* Karmin — Mensch-Marker (Anruf, Striche, bewahrt) */
  --cta: #2A2F36;        /* Huawei-Graphit — die Handlung traegt dasselbe Metall wie die Nachtflaechen */
  --cta-dunkel: #333A43; /* Hover: einen Atemzug heller — Graphit statt Navy */
    --helltext: #EAF0F4;
  --hellsoft: #A9BDD0;
  --ink: #14202B;
  --soft: #46545F;
  
  /* ---- Buehnen-Vertrag (Default = Morgen); .b-* ueberschreibt ---- */
  --bg: var(--morgen);
  --fg: var(--ink);
  --fg-soft: var(--soft);
  --acc: var(--morandi-tief);
  --acc-strong: var(--morandi);
  --linie: rgba(20, 32, 43, 0.14);
  --karte: #ffffff;

  --line: rgba(20, 32, 43, 0.14);
  --line-strong: rgba(20, 32, 43, 0.28);

  --font-display: "Zodiak", "Iowan Old Style", Georgia, serif;
  --font-body: "HarmonyOS Sans", -apple-system, "Segoe UI", sans-serif;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 24px 60px rgba(12, 21, 36, 0.12);
  --shadow-card: 0 14px 40px rgba(12, 21, 36, 0.08);
  --maxw: 1180px;

  --dur: 0.7s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Buehnen (Licht-Dramaturgie, Spec Paragraf 4 + Nachtrag v4) ---------- */
#kanzlei { --bg: #ffffff; --karte: var(--morgen); }
.atem.b-morgen { --bg: #E9EFF3; }          /* Eis-Hauch */
#ablauf { --bg: #ffffff; }
#ueber-mich { --bg: #ffffff; }
.quote.b-blaunacht blockquote em { color: #9FC4CC; font-style: normal; }
#kontakt { --bg: #ffffff; }
#ueber-mich { --bg: #ffffff; }
.b-morgen, .b-eis { border-top: 1px solid rgba(20, 32, 43, 0.05); }
.b-eiswelt { border-top: none; }
.b-blaunacht, .b-eis, .b-eiswelt, .b-morgen {
  background: var(--bg);
  color: var(--fg);
}
.b-eiswelt {
  --bg: #E3EDF1; --fg: var(--ink); --fg-soft: #3C4A56;
  --acc: var(--morandi-tief); --acc-strong: var(--morandi-tief);
  --linie: rgba(20, 32, 43, 0.14); --karte: #ffffff;
}
.b-eiswelt .hero-geo { color: var(--morandi); opacity: 0.4; }
.b-eiswelt.hero { background: linear-gradient(180deg, #EFF5F7 0%, #DCE8EC 100%); }
.b-blaunacht {
  --bg: var(--blaunacht); --fg: var(--helltext); --fg-soft: #C3D0E2;
  --acc: var(--morandi-hell); --acc-strong: var(--tuerkis);
  --linie: rgba(234, 240, 244, 0.16); --karte: rgba(234, 240, 244, 0.06);
}
.b-eis {
  --bg: var(--eis); --fg: var(--ink); --fg-soft: #3C4A56;
  --acc: var(--morandi-tief); --acc-strong: var(--morandi-tief);
  --linie: rgba(20, 32, 43, 0.18); --karte: #f4f7f8;
}
.b-verlauf {
  color: var(--ink);
  --fg: var(--ink); --fg-soft: var(--soft);
  --acc: var(--morandi-tief); --acc-strong: var(--morandi);
  --linie: rgba(20, 32, 43, 0.14); --karte: #ffffff;
  background: linear-gradient(180deg, var(--eis) 0%, var(--morgen) 70%);
}

/* ---------- Reset / Basis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  cursor: pointer;
}
::selection {
  background: var(--eis);
  color: var(--ink);
}
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Feines Papierkorn über allem — sehr dezent */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.03;
  transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
section {
  position: relative;
}
.section-pad {
  padding: 96px 0;
}
@media (min-width: 900px) {
  .section-pad {
    padding: 128px 0;
  }
}

/* Goldene Haarlinie als Sektions-Trenner */
.hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ---------- Typografie ---------- */
.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acc);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--morandi-tief);
}
/* Der erste Schritt glüht — Karmin-Wort, Glut-Strich */
.eyebrow--glut { color: var(--rot-tief); }
.eyebrow--glut::before { background: var(--rot); }
.eyebrow--center::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--morandi-tief);
}

.display {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1.display {
  font-size: clamp(40px, 6vw, 68px);
}
h2.display {
  font-size: clamp(32px, 4.4vw, 52px);
}
h3.display {
  font-size: clamp(24px, 2.6vw, 30px);
}
.display .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--acc);
}

.hero .eyebrow {
  color: var(--morandi-tief);
  font-size: 12px;
}
.hero .eyebrow strong {
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}
/* Zodiak spricht NUR die 5 Gefuehlszeilen (Spec Paragraf 3) */
.voice {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.018em;
}

.lead {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  color: var(--fg-soft);
  max-width: 62ch;
}
.small {
  font-size: 13px;
  color: var(--soft);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn-primary {
  background: var(--cta);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(17, 20, 23, 0.22);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(17, 20, 23, 0.28);
}
.btn-ghost {
  background: transparent;
  border-color: color-mix(in srgb, var(--fg) 38%, transparent);
  color: var(--fg);
}
.btn-ghost:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border-color: var(--acc);
}
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 300;
}
.skip-link:focus {
  left: 16px;
  top: 14px;
  position: fixed;
  background: var(--ink);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Ueber der Nacht: transparent mit Helltext; ab Scroll: Morgen-Glas mit Tinte */
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(244, 247, 248, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(12, 21, 36, 0.07);
}
.nav .nav-links a { color: var(--soft); }
.nav .nav-links a:hover { color: var(--ink); }
.nav.is-scrolled .nav-links a { color: var(--soft); }
.nav.is-scrolled .nav-links a:hover { color: var(--ink); }
.nav .brand span { color: var(--morandi-tief); }
.nav.is-scrolled .brand span { color: var(--morandi-tief); }
.nav .nav-cta { background: var(--cta); color: #ffffff; }
.nav.is-scrolled .nav-cta { background: var(--cta); color: #ffffff; }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}
.brand {
  text-decoration: none;
  line-height: 1.15;
}
.brand strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.brand span {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--morandi-tief);
}
.nav-links {
  display: none;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--soft);
  transition: color 0.25s;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-links a:hover::after {
  transform: scaleX(1);
}
.nav-cta {
  display: none;
}
.nav-burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 10px 6px;
}
.nav-burger span {
  width: 22px;
  height: 1.6px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.6px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.6px) rotate(-45deg);
}
@media (min-width: 980px) {
  .nav-links {
    display: flex;
  }
  .nav-cta {
    display: inline-flex;
    height: 44px;
    padding: 0 24px;
    font-size: 14px;
  }
  .nav-burger {
    display: none;
  }
}
.mobile-menu {
  display: none;
  border-top: 1px solid rgba(234, 240, 244, 0.14);
  background: var(--blaunacht);
  color: var(--helltext);
  padding: 18px 24px 26px;
}
.mobile-menu a { color: var(--helltext); }
.mobile-menu.is-open {
  display: block;
}
.mobile-menu a {
  display: block;
  padding: 13px 4px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child {
  border-bottom: 0;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 170px 0 84px;
  overflow: hidden;
  /* Nachtbuehne — Grundfarbe liefert .b-nacht, das Licht die Pseudo-Elemente */
}
.hero .uhr {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
  /* Ein Stueck Nacht, in den Morgen getragen */
  background: var(--blaunacht);
  color: #C3D0E2;
  box-shadow: 0 12px 30px rgba(12, 21, 36, 0.16);
  margin-bottom: 28px;
}
.hero .uhr .zeit {
  color: #F4805C; /* Glut-hell — lesbar auf Blaunacht */
  letter-spacing: 0.1em;
}
.hero h1 {
  color: var(--fg);
}
.b-blaunacht .btn-primary {
  background: var(--cta);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(4, 9, 16, 0.35);
}
.b-blaunacht .btn-primary {
  background: #ffffff;
  color: var(--ink);
}
.b-blaunacht .btn-primary:hover {
  background: #EAF0F4;
}
.b-blaunacht .standards li strong { color: var(--fg); }
.b-blaunacht .standards li span { color: var(--fg-soft); }
.b-blaunacht .hero-note { color: var(--fg-soft); }
/* Das Atmen der Seite: warmes Licht schwillt und weicht, 14s-Zyklus */
.hero::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  /* Kuehler Lichtkegel von oben — das Kian-Licht */
  background: radial-gradient(58% 48% at 62% 0%, rgba(110, 137, 172, 0.18), transparent 66%);
  animation: hero-breathe 14s ease-in-out infinite;
}
@keyframes hero-breathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.06); }
}
.hero .wrap {
  position: relative;
  z-index: 2;
}
.hero-geo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--morandi-tief);
}
.hero-grid {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 980px) {
  .hero {
    padding: 190px 0 110px;
  }
  .hero-grid {
    grid-template-columns: 13fr 11fr;
    gap: 64px;
  }
}
.hero-copy .lead {
  margin-top: 28px;
}
.hero-ctas {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero-note {
  margin-top: 22px;
  font-size: 13px;
  color: var(--soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-note .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rot);
  box-shadow: 0 0 8px rgba(228, 87, 63, 0.5);
  flex: none;
}

/* Kalligrafische Linie unter dem Schlüsselwort */
.u-swash {
  position: relative;
  white-space: nowrap;
}
.u-swash svg {
  position: absolute;
  left: -2%;
  bottom: -0.22em;
  width: 104%;
  height: 0.42em;
  overflow: visible;
}
.u-swash path {
  fill: none;
  stroke: var(--acc-strong);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.u-swash { color: var(--acc-strong); }

/* Porträt-Rahmen (Platzhalter bis die Fotos in der Nebelschleuse liegen) */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(234, 240, 244, 0.12);
  /* Warmer Schein unter dem Portraet (Kerzen-Glut) statt Rahmen-Look */
  box-shadow: 0 24px 60px rgba(4, 9, 16, 0.5);
  background: linear-gradient(168deg, #3a4b60 0%, #1b2635 55%, #0d1420 100%);
}
.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}
.portrait-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.portrait-fallback .monogram {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(64px, 7vw, 92px);
  font-weight: 500;
  font-style: italic;
  color: var(--morandi-tief);
  line-height: 1;
}
.portrait-fallback .caption {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--morandi-tief);
  opacity: 0.75;
}
/* Schlanke Namenszeile: das Bild trägt, die Karte flüstert */
.portrait-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: auto;
  max-width: calc(100% - 32px);
  background: rgba(239, 245, 247, 0.94); /* Eis statt Papier — kein Creme-Ton auf dieser Seite */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
}
.portrait-badge strong {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 15px;
  white-space: nowrap;
}
.portrait-badge span {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--morandi-tief);
}

/* Standards-Leiste unter dem Hero */
.standards {
  margin-top: 72px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}
/* Schmale Screens: einspaltig — sonst drueckt „Verschwiegenheit" die Karten aus dem Bild */
@media (max-width: 560px) {
  .standards { grid-template-columns: 1fr; }
}
@media (min-width: 900px) {
  .standards {
    grid-template-columns: repeat(4, 1fr);
  }
}
.standards li strong {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
}
.standards li span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--morandi-tief);
}

/* ---------- Philosophie ---------- */
.philosophy-grid {
  display: grid;
  gap: 48px;
}
@media (min-width: 980px) {
  .philosophy-grid {
    grid-template-columns: 6fr 5fr;
    gap: 80px;
  }
}
.philosophy-copy p + p {
  margin-top: 18px;
}
.principles {
  display: grid;
  gap: 14px;
}
.principle {
  background: var(--karte);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.principle:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.principle .num {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-style: italic;
  font-size: 20px;
  color: var(--morandi-tief);
  line-height: 1.5;
  min-width: 26px;
}
.principle strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.principle p {
  margin-top: 4px;
  font-size: 14px;
  color: var(--soft);
  line-height: 1.65;
}

/* ---------- Leistungen ---------- */
.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.section-head .lead {
  margin-top: 20px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head.center .lead {
  margin-left: auto;
  margin-right: auto;
}
.section-head h2 {
  margin-top: 18px;
}
.services {
  display: grid;
  gap: 16px;
}
@media (min-width: 700px) {
  .services {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1020px) {
  .services {
    grid-template-columns: repeat(3, 1fr);
  }
}
.service {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
    border-color 0.45s var(--ease);
}
.service:hover {
  transform: translateY(-4px);
}
.service .num {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-style: italic;
  font-size: 15px;
  color: var(--soft);
  transition: color 0.4s var(--ease);
}
.service:hover .num,
.service.is-aktiv .num {
  color: var(--rot-tief);
}
.service h3 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}
/* Die Frage-Zeile: die innere Frage des Mandanten — kursiv, in der Verstand-Farbe */
.service p {
  font-size: 14px;
  line-height: 1.7;
  font-style: italic;
  color: var(--morandi-tief);
  flex-grow: 1;
}
.service ul {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: grid;
  gap: 8px;
}
.service ul li {
  font-size: 13px;
  color: var(--soft);
  padding-left: 18px;
  position: relative;
}
.service ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--morandi-tief);
}

/* ---------- Ablauf (Etappen an der Linie) ---------- */
.process {
  position: relative;
  display: grid;
  gap: 0;
}
.process-line {
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  pointer-events: none;
}
.process-line .track {
  position: absolute;
  inset: 0;
  background: var(--line);
}
.process-line .fill {
  position: absolute;
  inset: 0;
  background: var(--acc);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
}
/* „Der rote Punkt sind Sie" — er stellt sich neben die Ziffer der Etappe, die Sie antippen */
.step .marker::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -22px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rot);
  transform: translateY(-50%) scale(0);
  opacity: 0;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.step.gewaehlt .marker::after {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.step {
  position: relative;
  padding: 26px 0 26px 64px;
}
.step .marker {
  position: absolute;
  left: 0;
  top: 26px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 15px;
  color: var(--morandi-tief);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
    color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* Passiert der rote Punkt eine Etappe, füllt sie sich — die Reise hakt sich selbst ab */
.step.erreicht .marker {
  background: var(--morandi-tief);
  border-color: var(--morandi-tief);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(72, 98, 138, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .step .marker { transition: none; }
}
.step h3 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 24px;
  font-weight: 700;
}
.step p {
  margin-top: 6px;
  max-width: 56ch;
  font-size: 15px;
  color: var(--soft);
}
@media (min-width: 980px) {
  .process {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }
  .process-line {
    left: 18px;
    right: 18px;
    top: 17px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .process-line .fill {
    transform-origin: left;
    transform: scaleX(var(--p, 0));
    background: linear-gradient(90deg, var(--morandi-tief), var(--tuerkis));
  }
  .step {
    padding: 72px 0 0 0;
  }
  .step .marker {
    top: 0;
  }
}

/* ---------- Leitsatz: die Begleitung — der Satz beginnt in der Nacht,
   die Antwort steht im Morgenlicht (Optik der Dämmerungs-Tafel) ---------- */
.quote {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(72px, 10vh, 110px) 0 clamp(56px, 8vh, 88px);
  background: #14243A;
}
.quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 112%;
  background: linear-gradient(178deg,
    #14243A 0%, #1D2F49 22%, #22344E 34%,
    #48628A 46%, #93B2CB 54%,
    #D9E6EC 66%, #FFFFFF 100%);
  animation: drift-y 28s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
.quote .wrap {
  position: relative;
}
/* Schrift und Größe wie die Überschriften der Tafel darüber — leicht, aufrecht */
.quote blockquote {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: -0.018em;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.25;
  text-wrap: balance;
}
.quote blockquote em {
  font-style: normal;
  font-weight: 500;
}
/* Die Leere zwischen Satz und Antwort ist die Dämmerung selbst */
.quote-sub {
  margin: clamp(40px, 6vh, 72px) auto 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: #3C4A56;
}
/* Ein Lot aus Licht fällt aus der Nacht zur Antwort — Echo der „Einen Linie" */
.quote-sub::before {
  content: "";
  display: block;
  width: 1px;
  height: clamp(34px, 6vh, 56px);
  margin: 0 auto 28px;
  background: linear-gradient(180deg, rgba(72, 98, 138, 0), #48628A);
}
.quote-sub em {
  font-style: normal;
  color: #14202B;
}
@media (prefers-reduced-motion: reduce) {
  .quote::before, .daemmerung::before { animation: none; }
}

/* ---------- Über mich ---------- */
.about {
  /* Der hellste Raum der Seite: die Begleitung kommt beim Menschen an */
  background: #ffffff;
}
.about-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 980px) {
  .about-grid {
    grid-template-columns: 5fr 7fr;
    gap: 84px;
  }
}
.about-copy p {
  margin-top: 18px;
  color: var(--soft);
  max-width: 58ch;
}
.about-copy p strong {
  color: var(--ink);
  font-weight: 500;
}
.signature {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.signature .name {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 26px;
  color: var(--ink);
}
/* Mitgliedschaften: eine stille Zeile, kein Trophäenschrank */
.memberships {
  margin-top: 18px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--morandi-tief);
}
/* Anruf-Kanal: Karmin + Hörer, wie im Hero */
.btn-tel {
  color: #AE2921;
  border-color: rgba(174, 41, 33, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.btn-tel .ic { width: 15px; height: 15px; }
.btn-tel:hover {
  border-color: #AE2921;
  background: rgba(174, 41, 33, 0.06);
}
.signature .line {
  width: 64px;
  height: 1px;
  background: var(--morandi-tief);
}
.signature .role {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acc);
}
.about-ctas {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Diskretion — auf Beton ---------- */
.discretion {
  text-align: center;
  position: relative;
}
/* Die EINZIGE Elektrik-Haarlinie der Seite (Spec Paragraf 2, Regel 3) */
.discretion::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tuerkis), transparent);
  opacity: 0.8;
}
.discretion .inner {
  max-width: 680px;
  margin: 0 auto;
}
.discretion h2 {
  margin-top: 18px;
}
.discretion p {
  margin-top: 24px;
  color: var(--fg-soft);
  font-size: 15.5px;
  line-height: 1.8;
}
/* ---------- Der erste Schritt — eine Tür statt drei Karten ---------- */
.first-step {
  display: grid;
  gap: 36px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 10px);
  padding: 44px 36px;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 940px) {
  .first-step {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    padding: 56px 60px;
    gap: 64px;
  }
}
.first-step-copy h3 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}
.first-step-copy p {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--soft);
  max-width: 58ch;
}
.first-step-facts {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}
.first-step-facts li {
  font-size: 14px;
  color: var(--soft);
  padding-left: 22px;
  position: relative;
}
.first-step-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 10px;
  height: 1px;
  background: var(--morandi-tief);
}
.first-step-cta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.first-step-note {
  font-size: 12.5px;
  color: var(--soft);
  line-height: 1.6;
}

/* ---------- Google-Vertrauensbereich ---------- */
.trust-band {
  /* Eis-Stufe zwischen Weiß (Mensch) und Blaunacht (Diskretion) */
  background: linear-gradient(180deg, #EAF1F4, var(--eis) 55%, #DDE8EC);
}
.trust-inner {
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 940px) {
  .trust-inner {
    grid-template-columns: 7fr 5fr;
    gap: 64px;
  }
}
.trust-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 940px) {
  .trust-cta {
    align-items: flex-end;
    text-align: right;
  }
}
/* Sterne-Tafel: fuenf Glut-Sterne entzuenden sich nacheinander — die Zahl folgt */
.stern-tafel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px 26px;
  box-shadow: 0 18px 44px rgba(20, 32, 43, 0.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}
.sterne { display: flex; gap: 6px; }
.stern {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 6px rgba(228, 87, 63, 0.35));
}
html.js .stern {
  opacity: 0;
  transform: scale(0.4) rotate(-12deg);
  transition: opacity 0.5s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--si, 0) * 0.16s);
}
html.js .sterne-an .stern {
  opacity: 1;
  transform: none;
}
.stern-zahl {
  font-size: 15px;
  color: var(--soft);
}
.stern-zahl .gross {
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-right: 6px;
}
.stern-quelle {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--soft);
  max-width: 34ch;
}
/* Zahl und Quelle treten auf, wenn der letzte Stern brennt */
html.js .stern-zahl,
html.js .stern-quelle {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: 0.85s;
}
html.js .sterne-an .stern-zahl,
html.js .sterne-an .stern-quelle {
  opacity: 1;
  transform: none;
}
.stern-tafel .btn-bewertung { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  html.js .stern,
  html.js .stern-zahl,
  html.js .stern-quelle { transition: none; }
}

/* ---------- Workshop-Hinweis — bewusst sekundär ---------- */
.workshop-note {
  /* Eis-Uebergang zurueck ins Licht */
  padding: 72px 0 84px;
}
/* Tiefsee-Panel: die dunkelste Stufe der Türkis-Lichtstimme — kein zweites Grün */
.workshop-card {
  display: grid;
  gap: 22px;
  /* Gebürstetes Graphit mit kaltem Lichtreflex — Metall statt Petrol */
  background:
    radial-gradient(120% 130% at 88% -15%, rgba(159, 224, 232, 0.1), transparent 55%),
    linear-gradient(155deg, #2E333B 0%, #282D34 55%, #23272D 100%);
  border: 1px solid rgba(174, 182, 192, 0.25);
  border-left: 3px solid #35C2D0;
  border-radius: var(--radius);
  padding: 34px 36px;
  box-shadow: 0 26px 64px rgba(15, 18, 22, 0.4);
}
/* Marcs Akten-Stillleben: komponiert mit leerer linker Haelfte — auf dem Desktop
   ist es die Buehne selbst, der Schutz-Verlauf sichert den Textkontrast */
@media (min-width: 900px) {
  .workshop-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 40px;
    min-height: 340px;
    background:
      linear-gradient(100deg, #23272D 0%, rgba(35, 39, 45, 0.88) 38%, rgba(35, 39, 45, 0.3) 62%, rgba(35, 39, 45, 0) 82%),
      url("/assets/img/workshop-akte-1600.jpg") right center / cover no-repeat #23272D;
  }
  .workshop-bild { display: none; }
}
/* Mobil bleibt das Panel Graphit — das Bild bekommt sein eigenes Fenster unter dem Text */
.workshop-bild {
  margin: 6px 0 0;
}
.workshop-bild img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 68% center;
  border-radius: 14px;
  border: 1px solid rgba(174, 182, 192, 0.2);
}
.workshop-card .btn-workshop { margin-top: 24px; }
.workshop-tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9FE0E8;
}
.workshop-card h3 {
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: -0.018em;
  font-size: clamp(28px, 2.8vw, 38px);
  color: #F0F7F8;
}
.workshop-card p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--soft);
  max-width: 70ch;
}
.workshop-card .btn {
  white-space: normal;
  text-align: center;
  height: auto;
  min-height: 52px;
  padding: 12px 26px;
}

/* Tilt-Elemente: sanfte Neigung zur Maus */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Mandat — der Zielblock in Espresso-Bordeaux (Zenbook-Moment) */
.mandate {
  position: relative;
  overflow: hidden;
  margin-top: 22px;
  background:
    radial-gradient(110% 130% at 92% -10%, rgba(167, 201, 228, 0.25), transparent 55%),
    radial-gradient(130% 110% at 0% 105%, rgba(49, 96, 138, 0.42), transparent 62%),
    linear-gradient(150deg, #33363a, #1c1f23 62%, #111417);
  color: #f4f7fa;
  border-radius: calc(var(--radius) + 6px);
  padding: 46px 34px;
  box-shadow: 0 34px 80px rgba(38, 16, 12, 0.45);
}
.mandate-geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mandate > :not(.mandate-geo) {
  position: relative;
}
@media (min-width: 980px) {
  .mandate {
    padding: 58px 64px;
  }
}
.mandate .eyebrow {
  color: var(--eis);
}
.mandate .eyebrow::before {
  background: var(--eis);
}
.mandate h3 {
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.1;
}
.mandate .lead {
  margin-top: 18px;
  color: rgba(244, 247, 250, 0.78);
  max-width: 68ch;
}
.mandate ul {
  margin-top: 30px;
  display: grid;
  gap: 12px 28px;
}
@media (min-width: 760px) {
  .mandate ul {
    grid-template-columns: 1fr 1fr;
  }
}
.mandate ul li {
  font-size: 14.5px;
  color: rgba(244, 247, 250, 0.85);
  padding-left: 22px;
  position: relative;
}
.mandate ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 10px;
  height: 1px;
  background: var(--tuerkis);
}
.mandate-ctas {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.mandate .btn-primary {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}
.mandate .btn-ghost {
  border-color: rgba(244, 247, 250, 0.35);
  color: #f4f7fa;
}
.mandate .btn-ghost:hover {
  background: rgba(244, 247, 250, 0.08);
  border-color: rgba(244, 247, 250, 0.7);
}
.mandate .note {
  margin-top: 22px;
  font-size: 12px;
  color: rgba(244, 247, 250, 0.55);
}

/* ---------- Kontakt ---------- */
.contact {
  /* Morgen-Buehne liefert .b-morgen — hier endet der Sonnenaufgang */
}
.contact-grid {
  display: grid;
  gap: 44px;
}
@media (min-width: 980px) {
  .contact-grid {
    grid-template-columns: 5fr 7fr;
    gap: 72px;
  }
}
.contact-info h2 {
  margin-top: 18px;
}
.contact-info .lead {
  margin-top: 18px;
}
.contact-rows {
  margin-top: 34px;
  display: grid;
  gap: 4px;
}
.contact-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.contact-row .k {
  min-width: 92px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--morandi-tief);
}
.contact-row .v {
  font-size: 15px;
}
.contact-row .v a {
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.25s;
}
.contact-row .v a:hover {
  border-color: var(--morandi-tief);
}
.contact-row .v .sub {
  display: block;
  font-size: 12.5px;
  color: var(--soft);
  margin-top: 2px;
}
.privacy-hint {
  margin-top: 28px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-size: 12.5px;
  color: var(--soft);
  line-height: 1.65;
}
.privacy-hint strong {
  color: var(--ink);
}

/* Formular */
.form-card {
  background: #ffffff;
  /* Auf der weißen Kontakt-Bühne braucht die Karte einen spürbaren Körper */
  border: 1px solid rgba(110, 137, 172, 0.3);
  border-radius: calc(var(--radius) + 4px);
  padding: 36px 32px;
  box-shadow: 0 24px 60px rgba(20, 32, 43, 0.1);
}
@media (min-width: 700px) {
  .form-card {
    padding: 44px 44px 40px;
  }
}
.form-intro {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 24px;
  text-wrap: balance;
}
.form-grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid .full {
    grid-column: 1 / -1;
  }
}
.field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--morandi-tief);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--morgen);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--morandi-tief);
  box-shadow: 0 0 0 3px rgba(72, 98, 138, 0.16);
}
.field textarea {
  min-height: 130px;
  resize: vertical;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2348628A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
/* Must-Klick: die Datenschutz-Zeile wohnt sichtbar in der Karte, direkt vor dem Senden */
.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--soft);
  line-height: 1.6;
  background: #F0F5FA;
  border: 1px solid rgba(72, 98, 138, 0.25);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
}
.consent input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--morandi-tief);
  flex: none;
  cursor: pointer;
}
.consent a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--morandi-tief);
  text-underline-offset: 2px;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
/* Nach dem Absenden: drei Schritte fuellen die stille Flaeche unter der Karte */
.nach-dem-senden {
  margin-top: 26px;
  padding: 22px 26px;
  background: #EAF0F6;
  border: 1px solid rgba(110, 137, 172, 0.32);
  border-radius: var(--radius);
}
.nds-titel {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--morandi-tief);
}
.nach-dem-senden ol {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: nds;
  display: grid;
  gap: 12px;
}
.nach-dem-senden li {
  counter-increment: nds;
  position: relative;
  padding-left: 34px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #3C4A56;
}
.nach-dem-senden li::before {
  content: counter(nds);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rot-tief);
  border: 1px solid rgba(174, 41, 33, 0.4);
}
.nach-dem-senden li strong {
  color: var(--ink);
  font-weight: 600;
}
.form-status {
  font-size: 13.5px;
  line-height: 1.55;
}
.form-status.ok {
  color: var(--morandi-tief);
}
.form-status.err {
  color: var(--rot-tief);
}
.form-fallback {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--morgen);
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--soft);
}
.form-fallback a {
  color: var(--ink);
  font-weight: 500;
}
.hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.faq-item {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.faq-item:hover {
  transform: translateY(-2px);
  border-color: rgba(110, 137, 172, 0.5);
  box-shadow: 0 10px 26px rgba(20, 32, 43, 0.07);
}
/* Glut-Lichtkante wächst beim Öffnen — das aktive Register glüht wie bei den Prinzipien */
.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #F4805C, #E4573F 45%, #AE2921);
  box-shadow: 0 0 14px rgba(228, 87, 63, 0.5);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease);
}
.faq-item[open]::before {
  transform: scaleY(1);
}
.faq-item summary {
  transition: color 0.25s;
}
.faq-item summary:hover {
  color: var(--morandi-tief);
}
.faq-item[open] {
  border-color: rgba(110, 137, 172, 0.55);
  background: #F0F5FA;
}
.contact .anruf {
  color: var(--rot-tief);
  font-weight: 500;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 54px 20px 24px;
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  color: var(--morandi-tief);
  position: relative;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1.6px solid var(--morandi-tief);
  border-bottom: 1.6px solid var(--morandi-tief);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.35s var(--ease);
}
.faq-item[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
  border-color: var(--rot);
}
/* Register-Ziffer: das Inhaltsverzeichnis der Akte — die geoeffnete glueht */
.faq-item summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.faq-nr {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--morandi-tief);
  flex: none;
  transition: color 0.3s;
}
.faq-item summary:hover .faq-nr,
.faq-item[open] .faq-nr {
  color: var(--rot-tief);
}
.faq-item .answer {
  /* Links-Einzug + Wappen liefert der „FAQ als Dialog"-Block weiter unten */
  padding: 0 24px 22px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--soft);
  max-width: 68ch;
}
/* Antwort tritt weich auf, statt aufzuklappen */
.faq-item[open] .answer {
  animation: antwort-auf 0.45s var(--ease);
}
@keyframes antwort-auf {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .answer { animation: none; }
  .faq-item:hover { transform: none; }
}

/* ---------- Footer ---------- */
.footer {
  /* Der Kreis schliesst sich: die Seite endet in der Nacht (.b-nacht liefert den Grund) */
  color: var(--fg-soft);
  padding: 64px 0 40px;
}
.footer-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 4fr 3fr 3fr 2fr;
  }
}
.footer .brand strong {
  color: #f4f7fa;
}
.footer .brand span {
  color: var(--tuerkis-hell);
}
.footer p,
.footer li {
  font-size: 13.5px;
  line-height: 1.7;
}
.footer h4 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tuerkis-hell);
  margin-bottom: 14px;
}
.footer a {
  color: rgba(244, 247, 250, 0.85);
  text-decoration: none;
}
.footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.footer ul {
  display: grid;
  gap: 8px;
}
.footer-bottom {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(244, 247, 250, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(244, 247, 250, 0.5);
}

/* ---------- Mobile Sticky CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px;
  background: rgba(244, 247, 248, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(20, 32, 43, 0.08);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(12, 21, 36, 0.18);
  transform: translateY(130%);
  transition: transform 0.5s var(--ease);
}
.sticky-cta.is-visible {
  transform: translateY(0);
}
.sticky-cta .btn {
  flex: 1;
  height: 46px;
  font-size: 14px;
  padding: 0 12px;
}
.sticky-cta .btn-primary {
  background: var(--cta);
  color: #ffffff;
  box-shadow: none;
}
.sticky-cta .btn-ghost {
  border-color: rgba(20, 32, 43, 0.22);
  color: var(--ink);
}
.btn .ic {
  width: 17px;
  height: 17px;
  flex: none;
}
.sticky-cta .btn-ghost {
  border-color: rgba(244, 247, 250, 0.3);
  color: #f4f7fa;
}
@media (min-width: 980px) {
  .sticky-cta {
    display: none;
  }
}

/* ---------- Rechtsseiten ---------- */
.legal-main {
  padding: 150px 0 90px;
  max-width: 760px;
  margin: 0 auto;
}
.legal-main h1 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 4.5vw, 48px);
  font-weight: 500;
}
.legal-main h2 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 26px;
  font-weight: 700;
  margin: 42px 0 10px;
}
.legal-main h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 26px 0 6px;
}
.legal-main p,
.legal-main li {
  font-size: 15px;
  color: var(--soft);
  line-height: 1.8;
}
.legal-main p {
  margin-top: 10px;
}
.legal-main ul {
  list-style: disc;
  padding-left: 22px;
  margin-top: 10px;
  display: grid;
  gap: 6px;
}
.legal-main a {
  color: var(--ink);
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
  color: var(--morandi-tief);
}

/* ---------- Scroll-Fortschritt (goldene Haarlinie oben) ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 210;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--morandi-tief), var(--tuerkis), var(--morandi-tief));
  transform-origin: left;
  transform: scaleX(var(--sp, 0));
}

/* ---------- Atem-Räume: ein Satz, viel Luft ---------- */
.atem {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 16vh, 190px) 0;
}
/* Atem-Grund liefert die Buehne; nur das atmende Morandi-Licht bleibt */
.atem::before {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  background: radial-gradient(50% 45% at 72% 30%, rgba(110, 137, 172, 0.07), transparent 65%);
  animation: hero-breathe 18s ease-in-out infinite;
}
.atem .wrap {
  z-index: 2;
}
.atem-geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.atem .wrap {
  position: relative;
  text-align: center;
}
.atem-kicker {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #f8dfd6;
  margin-bottom: 26px;
}
.atem-lines {
  margin: 0 auto;
  max-width: 30ch;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(26px, 3.8vw, 48px);
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}
.atem-lines span {
  display: block;
}
.atem-lines .tipp-cursor {
  display: inline-block; /* sonst wirft die Block-Regel den Strich in eine eigene Zeile */
}
.atem-lines .t {
  color: var(--soft);
}

/* Zeilen-Stagger (Huawei-Effekt) */
html.js [data-stagger] span,
html.js .atem-kicker {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.22s);
}
html.js .atem.is-visible [data-stagger] span,
html.js .atem.is-visible .atem-kicker {
  opacity: 1;
  transform: none;
}

/* ---------- Duo — Farbkarten im Galerie-Raum (ASUS-Prinzip) ---------- */
/* ---------- Dämmerungs-Tafel: die zwei Prinzipien als eine Nacht-zu-Tag-Bühne ---------- */
.haltung-head {
  margin-bottom: 34px;
}
.haltung-head h2 {
  margin-top: 14px;
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.daemmerung {
  position: relative;
  overflow: hidden;
  display: grid;
  border-radius: calc(var(--radius) + 12px);
  background: #14243A;
  box-shadow: 0 30px 70px rgba(17, 20, 23, 0.2);
}
/* Drift als Transform: läuft auf dem Compositor, kein Repaint der Fläche */
.daemmerung::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 106%;
  background: linear-gradient(101deg,
    #14243A 0%, #1D2F49 32%, #22344E 44%,
    #48628A 52%, #93B2CB 58%,
    #D9E6EC 66%, #EFF5F7 100%);
  animation: drift-x 28s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
@keyframes drift-x {
  to { transform: translateX(-5.66%); }
}
@keyframes drift-y {
  to { transform: translateY(-10.7%); }
}
/* Offscreen ruht der Drift (JS setzt .anim-ruht) */
.anim-ruht::before { animation-play-state: paused; }
@media (min-width: 820px) {
  .daemmerung { grid-template-columns: 1fr 1fr; }
}
.dp {
  position: relative;
  min-height: 330px;
  padding: 50px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Textzonen bleiben in den sicheren Außenbereichen der Tafel */
@media (min-width: 820px) {
  .dp--nacht { padding-right: 100px; }
  .dp--morgen { padding-left: 100px; }
}
.dp--nacht { color: #EAF0F4; }
.dp--morgen { color: var(--ink); }
/* Geister-Ziffern: Zodiak, groß, kaum da — sie flankieren die Dämmerung */
.dp-num {
  position: absolute;
  top: 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(150px, 15vw, 215px);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.dp--nacht .dp-num { right: 26px; color: rgba(175, 194, 220, 0.10); }
.dp--morgen .dp-num { right: 26px; color: rgba(72, 98, 138, 0.10); }
.duo-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rot-tief);
}
.dp--nacht .duo-tag { color: #F4805C; }
.dp h3 {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 2.6vw, 34px);
}
.duo-text {
  margin-top: 10px;
  max-width: 36ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(246, 248, 250, 0.82);
}
.dp--morgen .duo-text { color: var(--fg-soft, #3C4A56); }
.duo-copy {
  position: relative;
  z-index: 2;
}
/* Ein Lichtpass über die ganze Tafel beim Überfahren */
.daemmerung::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.1) 50%, transparent 68%);
  transform: translateX(-160%);
  transition: transform 1.2s var(--ease);
  pointer-events: none;
}
.daemmerung:hover::after {
  transform: translateX(160%);
}
@media (max-width: 819px) {
  /* Gestapelt wird die Dämmerung vertikal: aus der Nacht ins Licht */
  .daemmerung::before {
    width: 100%;
    height: 112%;
    bottom: auto;
    background: linear-gradient(172deg,
      #14243A 0%, #1D2F49 22%, #22344E 34%,
      #48628A 44%, #93B2CB 50%,
      #D9E6EC 58%, #EFF5F7 100%);
    animation-name: drift-y;
  }
  .dp { min-height: 0; padding: 44px 30px; }
  .dp--nacht { padding-bottom: 92px; }
  .dp--morgen { padding-top: 100px; }
  .dp-num { font-size: 120px; }
  /* Die II wandert ans helle Tafelende — nie in die Dämmerung */
  .dp--morgen .dp-num { top: auto; bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .daemmerung { animation: none; }
}

/* ---------- Hero-Zeile: Wort für Wort ---------- */
html.js .wort-tanz .w,
html.js #heroTitle .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--wi, 0) * 0.1s);
}
html.js .wort-tanz .w {
  transition-duration: 1s;
  transition-delay: calc(var(--wi, 0) * 0.22s);
}
html.js .wort-tanz.words-in .w,
html.js #heroTitle.words-in .w {
  opacity: 1;
  transform: none;
}

/* ---------- Icon-System (goldene Linie, Terra-Detail) ---------- */
.ic {
  width: 32px;
  height: 32px;
  flex: none;
  fill: none;
  stroke: var(--morandi-tief);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic .t {
  stroke: var(--morandi-tief);
}
.ic-s {
  width: 24px;
  height: 24px;
}
.service-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.service-head .num {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-style: italic;
  font-size: 15px;
  color: var(--morandi-tief);
}
.standards li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.standards .ic-s {
  margin-top: 2px;
  width: 22px;
  height: 22px;
}

/* ---------- Technik-Band ---------- */
.tech-band {
  background: linear-gradient(180deg, var(--morgen), #e9eef0);
  border-top: 1px solid var(--line);
  padding: 40px 0 44px;
}
.tech-grid {
  display: grid;
  gap: 22px;
}
.tech-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--morandi-tief);
}
.tech-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
@media (min-width: 900px) {
  .tech-grid {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 48px;
  }
  .tech-items {
    grid-template-columns: repeat(4, 1fr);
  }
}
.tech-items li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tech-items strong {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
}
.tech-items span {
  display: block;
  font-size: 12px;
  color: var(--soft);
}

/* Anker landen nicht unter der fixen Navigation */
section[id],
[id="kontakt"],
[id="faq"] {
  scroll-margin-top: 86px;
}

/* ---------- Reveal-Animationen (progressive enhancement) ---------- */
/* Motion-Diaet: .reveal ist inert — nur .intro-reveal (Sektionskoepfe) blendet ein */
html.js .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
html.js .intro-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
html.js .intro-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Scroll-getrieben, wo der Browser es kann — laeuft auf dem Compositor, null JS */
@supports (animation-timeline: view()) {
  html.js .intro-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: introRise 0.7s var(--ease) both;
    animation-timeline: view();
    animation-range: entry 0% entry 32%;
  }
}
@keyframes introRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
html.js .u-swash path {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1.4s var(--ease) 0.5s;
}
html.js .u-swash.is-drawn path {
  stroke-dashoffset: 0;
}

/* ---------- Performance: Sektionen unter dem Falz erst rendern, wenn noetig ---------- */
#leistungen, #ablauf, #ueber-mich, #bewertungen,
.discretion, .workshop-note, #kontakt, #faq, .footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

/* ---------- View Transitions zu Impressum/Datenschutz (progressiv) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  html.js .reveal,
  html.js .intro-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  html.js .u-swash path {
    stroke-dashoffset: 0;
    transition: none;
  }
  .process-line .fill {
    transform: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Druck ---------- */
@media print {
  .nav,
  .sticky-cta,
  .grain {
    display: none;
  }
  body {
    background: #fff;
  }
}

/* Sticky-Leiste: finale Farbregeln (Eisglas) — nach allen Media-Queries */
.sticky-cta .btn-ghost {
  border-color: rgba(20, 32, 43, 0.24);
  color: var(--ink);
  background: transparent;
}

/* Telefon-Knöpfe: Karmin — der Mensch am anderen Ende der Leitung */
.hero-ctas .btn-ghost,
.sticky-cta .btn-ghost {
  color: var(--rot-tief);
  border-color: rgba(174, 41, 33, 0.4);
  background: transparent;
}
.hero-ctas .btn-ghost:hover,
.sticky-cta .btn-ghost:hover {
  color: #8E1F19;
  border-color: var(--rot-tief);
  background: rgba(174, 41, 33, 0.06);
}

.duo-copy { max-width: 56ch; }
.duo-text { max-width: 52ch; }

/* Leistungsfelder: sanftes Morandi-Licht — Desktop: Hover, Touch: Scroll-Mitte */
.service {
  transition: transform 0.45s var(--ease), background 0.35s var(--ease),
    border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.service:hover,
.service.is-aktiv {
  background: #EBF1F8;
  border-color: rgba(110, 137, 172, 0.55);
  box-shadow: 0 14px 40px rgba(72, 98, 138, 0.14);
}
/* LED-Register links — Morandi-Eisblau, das Gegenstück zum Türkis der Prinzipien */
.service::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  right: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #F4805C 0%, #E4573F 45%, #AE2921 100%);
  box-shadow: 0 0 12px rgba(228, 87, 63, 0.5), 0 0 3px rgba(244, 128, 92, 0.7);
  opacity: 0;
  transform: scaleY(0.35);
  transform-origin: center;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.service:hover::after,
.service.is-aktiv::after {
  opacity: 1;
  transform: scaleY(1);
}
/* Einspaltig wird die klare Linie zur Akten-Bindung: sie fasst alle sechs Register */
@media (max-width: 699px) {
  .services {
    position: relative;
    padding-right: 14px;
  }
  .services::before {
    content: "";
    position: absolute;
    right: 0;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%, rgba(110, 137, 172, 0.45) 7%,
      rgba(110, 137, 172, 0.45) 93%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .service { transition: none; }
  .service::after { transition: none; }
}

/* ---------- Der Puls: die Nacht schlaegt, die Hoffnung atmet ---------- */
@keyframes puls-standort {
  0%, 100% { box-shadow: 0 0 5px rgba(228, 87, 63, 0.4); }
  50%      { box-shadow: 0 0 16px rgba(228, 87, 63, 0.85), 0 0 3px rgba(244, 128, 92, 0.9); }
}
@keyframes puls-tick {
  0%, 55%   { opacity: 1; }
  56%, 100% { opacity: 0.3; }
}
@keyframes puls-glimmen {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}
@keyframes puls-atem {
  0%, 100% { opacity: 0.55; transform: translate3d(-2%, 0, 0); }
  50%      { opacity: 1; transform: translate3d(2%, 1%, 0); }
}
@keyframes puls-schein {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.8; }
}
.step.gewaehlt .marker::after { animation: puls-standort 2.8s ease-in-out infinite; }
.hero .uhr .tick { animation: puls-tick 2s steps(1) infinite; }
.b-blaunacht blockquote em { animation: puls-glimmen 4.5s ease-in-out infinite; }
.hero::before { animation: puls-atem 36s ease-in-out infinite; }
.hero .uhr { position: relative; }
.hero .uhr::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 16px 44px rgba(34, 52, 78, 0.38);
  opacity: 0.5;
  animation: puls-schein 9s ease-in-out infinite;
}
.btn .ic { transition: transform 0.25s var(--ease); }
.btn:hover .ic { transform: translateX(2px) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) {
  .step.gewaehlt .marker::after,
  .hero .uhr .tick,
  .b-blaunacht blockquote em,
  .hero::before,
  .hero .uhr::after { animation: none; }
}

/* ---------- Logo-Monogramm (currentColor — folgt jeder Buehne) ---------- */
.brand { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { height: 44px; width: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.footer .brand-mark { height: 60px; color: var(--hellsoft); }
.footer .brand { gap: 16px; }

/* ---------- Standards als Zeichen-Karten ---------- */
.standards {
  border-top: 0;
  padding-top: 0;
  margin-top: 56px;
  gap: 14px;
}
.standards li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: #ffffff;
  border: 1px solid rgba(20, 32, 43, 0.09);
  border-radius: 12px;
  padding: 16px 18px;
}
.standards .s-ic {
  width: 21px;
  height: 21px;
  flex: none;
  margin-top: 2px;
  color: var(--morandi-tief);
}
.standards li strong { display: block; }

/* ---------- "Zukunft" atmet — Farb-Puls statt Clip-Trick ---------- */
.u-swash {
  display: inline-block;
  transform-origin: 0% 68%; /* atmet nach rechts in den freien Raum — frisst nie den Wortabstand */
  color: var(--tuerkis-tief);
  animation: zukunft-atmen 3.4s ease-in-out 1.2s infinite;
}
.u-swash svg { color: var(--tuerkis-tief); }
@keyframes zukunft-atmen {
  0%, 100% { transform: scale(1); color: var(--tuerkis-tief); text-shadow: none; }
  50%      { transform: scale(1.09); color: #6E93C4; text-shadow: 0 0 30px rgba(110, 137, 172, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .u-swash { animation: none; }
}

/* Standards-Sublines: graviert statt rot — Praezision als Schmuck */
.standards li span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--morandi-tief);
}

/* ---------- Atem-Schreibmaschine: Luft, Farbe, roter Cursor ---------- */
.atem-lines {
  line-height: 1.32;
}
.atem-lines .t {
  display: block;
  margin-top: 22px;
}

.tipp-cursor {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 4px;
  border-radius: 1px;
  background: var(--rot);
  vertical-align: -0.06em;
  animation: tipp-blink 1s steps(1) infinite;
}
@keyframes tipp-blink {
  0%, 54%   { opacity: 1; }
  55%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tipp-cursor { display: none; }
}

/* ---------- Huawei-Stil: grosse Strukturzeilen in Light ---------- */
.display {
  font-weight: 300;
  letter-spacing: -0.018em;
}

/* ---------- Sonnenlauf: Licht faehrt von links nach rechts durch die Zeilen ---------- */
@supports (-webkit-background-clip: text) {
  .sonne .z1,
  .sonne .z2a,
  .sonne .z2b {
    background-image: linear-gradient(100deg, #35506F 0%, #48628A 38%, #86A8CE 50%, #5C7BA6 62%, #6E89AC 100%);
    background-size: 260% 100%;
    background-position: 130% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sonnenlauf 7.5s ease-in-out infinite;
  }
}
@keyframes sonnenlauf {
  0%   { background-position: 130% 0; }
  46%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sonne .z1, .sonne .z2a {
    animation: none;
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

/* ---------- These "Strategie statt Streit": Sonnenlauf + Gewicht ---------- */
.philosophy-copy .eyebrow.these {
  font-size: 14px;
  letter-spacing: 0.26em;
  font-weight: 700;
}
@supports (-webkit-background-clip: text) {
  .sonnen-zeile {
    background-image: linear-gradient(100deg, #48628A 0%, #48628A 38%, #9FC0E8 50%, #48628A 62%, #48628A 100%);
    background-size: 260% 100%;
    background-position: 130% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sonnenlauf 8.5s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sonnen-zeile { animation: none; -webkit-text-fill-color: currentColor; background: none; }
}

/* ---------- Eis-Marker: wie Textmarker durch die Akte ---------- */
.marker {
  background: linear-gradient(transparent 52%, #D6E5F0 52%);
  color: inherit;
  font-weight: 500;
  padding: 0 2px;
}
/* Auf dem Eis-Highlight braucht Fliesstext Tinten-Tiefe (Kontrast-Gate 7.0) */
.about-copy .marker,
.trust-band .marker,
.contact .marker { color: var(--ink); }

/* ---------- Prinzipien-Boxen: LED-Streifen rechts + lebendige Ziffer ---------- */
.principle {
  position: relative;
}
.principle::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  right: 10px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #F4805C 0%, #E4573F 45%, #AE2921 100%);
  box-shadow: 0 0 18px rgba(228, 87, 63, 0.55), 0 0 4px rgba(244, 128, 92, 0.8);
  opacity: 0;
  transform: scaleY(0.35);
  transform-origin: center;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.principle:hover::after,
.principle.is-aktiv::after {
  opacity: 1;
  transform: scaleY(1);
}
.principle .num {
  transition: color 0.4s var(--ease);
}
.principle:hover .num,
.principle.is-aktiv .num {
  color: var(--rot-tief);
}
.principle strong {
  font-weight: 700;
}
.philosophy-grid {
  align-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .principle::after { transition: none; }
}

/* ---------- Porträt-Lupe: Klick auf das Bild öffnet die Großansicht ---------- */
.portrait-zoom {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  z-index: 2;
}
.portrait-zoom:focus-visible {
  outline: 2px solid #9FC4CC;
  outline-offset: -4px;
  border-radius: 6px;
}
.portrait-badge { pointer-events: none; z-index: 3; }
.zoom-chip {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #EAF0F4;
  background: rgba(34, 52, 78, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0.85;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.35s var(--ease);
}
.zoom-chip svg { width: 18px; height: 18px; }
.portrait-zoom:hover .zoom-chip,
.portrait-zoom:focus-visible .zoom-chip {
  opacity: 1;
  transform: scale(1.08);
  background: rgba(34, 52, 78, 0.8);
}
.lupe {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 720px);
  overflow: visible;
}
.lupe::backdrop {
  background: rgba(12, 21, 36, 0.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lupe img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 44px 120px rgba(0, 0, 0, 0.55);
}
.lupe-caption {
  margin-top: 16px;
  text-align: center;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: #C3D0E2;
}
.lupe-caption strong { color: #EAF0F4; font-weight: 500; }
.lupe-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(234, 240, 244, 0.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #EAF0F4;
  background: rgba(34, 52, 78, 0.9);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
  z-index: 2;
}
.lupe-close:hover { transform: scale(1.08); background: #48628A; }
.lupe-close svg { width: 17px; height: 17px; }
.lupe[open] { animation: lupe-auf 0.4s var(--ease); }
.lupe[open]::backdrop { animation: lupe-schleier 0.4s ease; }
@keyframes lupe-auf {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
}
@keyframes lupe-schleier {
  from { opacity: 0; }
}
@media (max-width: 640px) {
  .lupe-close { top: -8px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .lupe[open], .lupe[open]::backdrop { animation: none; }
}

/* Bewertungs-Hinweis: Sekundär-Geste — Smaragd bleibt dem Erstgespräch vorbehalten */
.btn-bewertung {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--morandi-tief);
  border-color: rgba(72, 98, 138, 0.4);
}
.btn-bewertung .ic {
  width: 15px;
  height: 15px;
  transition: transform 0.35s var(--ease);
}
.btn-bewertung:hover {
  border-color: var(--morandi-tief);
  background: rgba(110, 137, 172, 0.07);
}
.btn-bewertung:hover .ic {
  transform: translate(2px, -2px);
}

/* Zeilenfessel: hält Wortpaare der Hero-Zeile zusammen (inline-block bricht sonst trotz nbsp) */
.nbr { white-space: nowrap; }

/* Der Stift schreibt in Glut — der Mensch-Marker auf dem Anfrage-Knopf.
   CSS-stroke noetig: die generische .ic-Regel ueberstimmt sonst das currentColor-Attribut.
   Kraeftiger Strich + Ember-Schein, sonst verwaescht der Ton bei 17px auf dunklem Grund */
.ic-stift {
  stroke: #F4805C;
  stroke-width: 2.3;
  filter: drop-shadow(0 0 3px rgba(244, 128, 92, 0.55));
}

/* Bühnen-Treppe: Weiß (Mensch) → Eis (Bewertungen) → Blaunacht (Diskretion) */
.trust-band { border-top: 1px solid rgba(20, 32, 43, 0.09); }

/* Klick-Moment des Bewertungs-Buttons: kurz gefüllt */
.btn-bewertung:active {
  background: var(--morandi-tief);
  border-color: var(--morandi-tief);
  color: #ffffff;
}
/* Drei stille Zusagen unter dem Diskretions-Text */
.diskret-zeile {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
  font-size: 13px;
  letter-spacing: 0.07em;
  color: #AFC2DC;
}
.diskret-zeile span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.diskret-zeile span::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--rot);
}

/* Workshop-Button: das Licht in der Tiefsee — Türkis-Leuchtfeuer mit Schimmer-Lauf */
.btn-workshop {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #35C2D0;
  color: #062A31;
  font-weight: 650;
  box-shadow: 0 14px 34px rgba(53, 194, 208, 0.3);
}
.btn-workshop .ic { width: 15px; height: 15px; transition: transform 0.35s var(--ease); }
.btn-workshop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.45) 50%, transparent 68%);
  transform: translateX(-160%);
  animation: leucht-lauf 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes leucht-lauf {
  0%, 55% { transform: translateX(-160%); }
  75%, 100% { transform: translateX(160%); }
}
.btn-workshop:hover {
  background: #4FD0DC;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(53, 194, 208, 0.4);
}
.btn-workshop:hover .ic { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .btn-workshop::after { animation: none; }
}
.workshop-card p { color: #DCEBEE; }

/* 'Live' sendet: Leucht-Türkis + pulsierender Sendepunkt */
/* Das LIVE-Badge trägt die Botschaft auf den ersten Blick — Sende-Kapsel wie im Fernsehen */
.workshop-tag .live {
  color: #9FE0E8;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(159, 224, 232, 0.4);
  border-radius: 999px;
  font-size: 11.5px;
}
.workshop-tag .tag-frage {
  color: #C9CFD6;
  margin-left: 14px;
}
.workshop-card p strong {
  color: #F0F7F8;
  font-weight: 600;
}
/* Die drei Lichter des Workshops — Türkis wie das Leuchtfeuer daneben */
.workshop-card .ws-licht {
  font-style: normal;
  font-weight: 500;
  color: #9FE0E8;
}
.workshop-tag .live-punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rot);
  box-shadow: 0 0 9px rgba(228, 87, 63, 0.9);
  animation: live-puls 2.2s ease-in-out infinite;
}
@keyframes live-puls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .workshop-tag .live-punkt { animation: none; }
}

/* Sende-Knopf: Stift + Flug-Geste beim Hover */
.btn-senden {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-senden .ic {
  width: 15px;
  height: 15px;
  transition: transform 0.35s var(--ease);
}
.btn-senden:hover .ic {
  transform: translate(2px, -2px) rotate(-8deg);
}

/* FAQ als Dialog: die Antwort trägt das Wappen — der Anwalt antwortet persönlich */
.faq-item .answer {
  position: relative;
  padding-left: 58px;
  color: #3C4A56;
}
.faq-item .answer::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 3px;
  width: 15px;
  height: 23px;
  opacity: 0.8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='124 74 112 172' fill='%2348628A'%3E%3Cpath d='M226.191 81.7066C229.472 81.8809 231.811 82.4773 233.279 83.5234C233.366 83.583 233.454 83.6473 233.537 83.7115V74.5403C233.486 74.577 233.44 74.6183 233.39 74.6596C232.107 75.6689 230.192 76.2883 227.585 76.5498H131.342C128.061 76.3709 125.721 75.779 124.258 74.7284C124.171 74.6687 124.083 74.6045 124 74.5403V83.7115C124.051 83.6748 124.097 83.6335 124.148 83.5968C125.43 82.5874 127.345 81.9681 129.953 81.7066H226.196H226.191Z'/%3E%3Cpath d='M235.526 107.637C235.461 107.72 235.397 107.798 235.341 107.89C234.322 109.298 233.731 111.533 233.533 114.629V192.266H233.51C233.51 221.642 209.473 245.54 179.931 245.54C153.565 245.54 131.582 226.501 127.17 201.515C126.75 199.171 126.487 196.766 126.4 194.321C126.367 193.683 126.353 193.036 126.353 192.39C126.197 189.109 125.532 186.774 124.355 185.292C124.314 185.242 124.277 185.196 124.24 185.145H133.003C132.934 185.228 132.869 185.31 132.814 185.398C131.715 186.916 131.102 189.334 130.959 192.789C131.235 219.403 153.099 240.966 179.931 240.966C206.764 240.966 228.914 219.119 228.914 192.266H228.803V113.322L213.229 124.181L200.226 133.256L180.398 147.084L157.312 130.985V131.063L152.586 127.769V127.687L131.083 112.689V157.136C131.337 159.774 131.969 161.701 132.994 162.99C133.035 163.041 133.072 163.087 133.114 163.137H124.351C124.411 163.055 124.475 162.972 124.535 162.88C125.569 161.458 126.164 159.196 126.353 156.049V114.34C126.137 111.395 125.555 109.252 124.568 107.89C124.512 107.798 124.448 107.72 124.383 107.637H126.353H131.955V107.592L152.586 121.979L157.312 125.278L180.398 141.381L202.57 125.916L207.295 122.617L228.771 107.637L228.803 107.614V107.637H233.533H235.526Z'/%3E%3Cpath d='M153.971 136.936V203.754C153.777 206.887 153.186 209.135 152.157 210.553C152.097 210.64 152.033 210.727 151.968 210.81H159.346C159.31 210.759 159.268 210.713 159.231 210.663C158.202 209.369 157.57 207.429 157.316 204.777V140.321L153.971 136.936Z'/%3E%3Cpath d='M159.346 90.552C159.282 90.63 159.217 90.7172 159.157 90.8043C158.073 92.3 157.473 94.704 157.312 98.0945V125.273L153.971 122.924V96.3465C153.703 93.8186 153.08 91.9513 152.083 90.6942C152.046 90.6483 152.005 90.5979 151.968 90.552H159.346Z'/%3E%3Cpath d='M202.565 140.89V203.506C202.39 206.768 201.79 209.094 200.738 210.548C200.678 210.636 200.613 210.723 200.549 210.805H207.927C207.89 210.755 207.849 210.709 207.812 210.659C206.797 209.383 206.174 207.479 205.911 204.887V137.5L202.565 140.886V140.89Z'/%3E%3Cpath d='M207.927 90.552C207.867 90.63 207.802 90.7172 207.738 90.8043C206.686 92.2633 206.086 94.5893 205.911 97.8513V123.589L202.57 125.911V96.4658C202.307 93.8736 201.679 91.9697 200.669 90.6942C200.627 90.6483 200.59 90.5979 200.549 90.552H207.927Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Sanftes Auf- und Zuklappen (moderne Browser; sonst klassisch hart) */
.faq-item {
  interpolate-size: allow-keywords;
}
.faq-item::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.42s var(--ease), content-visibility 0.42s allow-discrete;
}
.faq-item[open]::details-content {
  height: auto;
}
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content { transition: none; }
}

/* ---------- Der Footer schließt den Kreis: Horizont, Schluss-Uhr, Wappen-Wasserzeichen ---------- */
.footer {
  position: relative;
  overflow: hidden;
}
/* Der erste Lichtstreif am Horizont: Glut geht in Türkis-Licht über */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(228, 87, 63, 0.75) 16%,
    rgba(53, 194, 208, 0.55) 44%,
    rgba(159, 196, 204, 0.28) 68%, transparent 100%);
}
.fuss-uhr {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 46px;
  padding: 11px 20px;
  background: rgba(234, 240, 244, 0.05);
  border: 1px solid rgba(234, 240, 244, 0.14);
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #C3D0E2;
}
.fuss-uhr .zeit {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #F4805C;
  font-variant-numeric: tabular-nums;
}
.fuss-uhr .tick {
  display: inline-block;
  animation: puls-tick 2s steps(1) infinite;
}
.footer::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -44px;
  width: 260px;
  height: 400px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='124 74 112 172' fill='%23AFC2DC'%3E%3Cpath d='M226.191 81.7066C229.472 81.8809 231.811 82.4773 233.279 83.5234C233.366 83.583 233.454 83.6473 233.537 83.7115V74.5403C233.486 74.577 233.44 74.6183 233.39 74.6596C232.107 75.6689 230.192 76.2883 227.585 76.5498H131.342C128.061 76.3709 125.721 75.779 124.258 74.7284C124.171 74.6687 124.083 74.6045 124 74.5403V83.7115C124.051 83.6748 124.097 83.6335 124.148 83.5968C125.43 82.5874 127.345 81.9681 129.953 81.7066H226.196H226.191Z'/%3E%3Cpath d='M235.526 107.637C235.461 107.72 235.397 107.798 235.341 107.89C234.322 109.298 233.731 111.533 233.533 114.629V192.266H233.51C233.51 221.642 209.473 245.54 179.931 245.54C153.565 245.54 131.582 226.501 127.17 201.515C126.75 199.171 126.487 196.766 126.4 194.321C126.367 193.683 126.353 193.036 126.353 192.39C126.197 189.109 125.532 186.774 124.355 185.292C124.314 185.242 124.277 185.196 124.24 185.145H133.003C132.934 185.228 132.869 185.31 132.814 185.398C131.715 186.916 131.102 189.334 130.959 192.789C131.235 219.403 153.099 240.966 179.931 240.966C206.764 240.966 228.914 219.119 228.914 192.266H228.803V113.322L213.229 124.181L200.226 133.256L180.398 147.084L157.312 130.985V131.063L152.586 127.769V127.687L131.083 112.689V157.136C131.337 159.774 131.969 161.701 132.994 162.99C133.035 163.041 133.072 163.087 133.114 163.137H124.351C124.411 163.055 124.475 162.972 124.535 162.88C125.569 161.458 126.164 159.196 126.353 156.049V114.34C126.137 111.395 125.555 109.252 124.568 107.89C124.512 107.798 124.448 107.72 124.383 107.637H126.353H131.955V107.592L152.586 121.979L157.312 125.278L180.398 141.381L202.57 125.916L207.295 122.617L228.771 107.637L228.803 107.614V107.637H233.533H235.526Z'/%3E%3Cpath d='M153.971 136.936V203.754C153.777 206.887 153.186 209.135 152.157 210.553C152.097 210.64 152.033 210.727 151.968 210.81H159.346C159.31 210.759 159.268 210.713 159.231 210.663C158.202 209.369 157.57 207.429 157.316 204.777V140.321L153.971 136.936Z'/%3E%3Cpath d='M159.346 90.552C159.282 90.63 159.217 90.7172 159.157 90.8043C158.073 92.3 157.473 94.704 157.312 98.0945V125.273L153.971 122.924V96.3465C153.703 93.8186 153.08 91.9513 152.083 90.6942C152.046 90.6483 152.005 90.5979 151.968 90.552H159.346Z'/%3E%3Cpath d='M202.565 140.89V203.506C202.39 206.768 201.79 209.094 200.738 210.548C200.678 210.636 200.613 210.723 200.549 210.805H207.927C207.89 210.755 207.849 210.709 207.812 210.659C206.797 209.383 206.174 207.479 205.911 204.887V137.5L202.565 140.886V140.89Z'/%3E%3Cpath d='M207.927 90.552C207.867 90.63 207.802 90.7172 207.738 90.8043C206.686 92.2633 206.086 94.5893 205.911 97.8513V123.589L202.57 125.911V96.4658C202.307 93.8736 201.679 91.9697 200.669 90.6942C200.627 90.6483 200.59 90.5979 200.549 90.552H207.927Z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}
.footer .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .fuss-uhr .tick { animation: none; }
}


/* Das Wortzeichen im Hero: riesig, unscharf, kaum da — Familienband zu online.scheidungsanwalt */
.hero-wort {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  font-weight: 300;
  letter-spacing: -0.03em;
  font-size: clamp(110px, 19vw, 300px);
  line-height: 1;
  color: rgba(72, 98, 138, 0.13);
  filter: blur(2.5px);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.hero .wrap {
  position: relative;
  z-index: 1;
}


/* Der Knopf schreibt sich selbst: Schreibmaschine mit Glut-Cursor */
.btn-tipp .tipp-text {
  white-space: pre;
}
.btn-tipp .tipp-cursor {
  width: 2px;
  height: 1.15em;
  margin-left: 3px;
  background: var(--rot);
  border-radius: 1px;
  flex: none;
}
.btn-tipp.fertig .tipp-cursor {
  animation: cursor-blink 1.05s steps(1) infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-tipp .tipp-cursor { display: none; }
}

/* Marker im Hero: auf Eiswelt markiert Weiß, nicht Eisblau */
.hero .marker {
  background: linear-gradient(transparent 52%, rgba(255, 255, 255, 0.9) 52%);
}

/* Die klare Linie atmet — dieselbe Ruhe wie das Zukunft-Wort im Hero */
.atmet {
  display: inline-block;
  transform-origin: 50% 60%;
  animation: linie-atmen 3.8s ease-in-out 1.2s infinite;
}
@keyframes linie-atmen {
  0%, 100% { transform: scale(1); color: var(--acc); text-shadow: none; }
  50% { transform: scale(1.045); color: #7FA0CC; text-shadow: 0 0 24px rgba(110, 137, 172, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .atmet { animation: none; }
}

/* Huawei-Fenster: jede Etappe wohnt in einer eigenen ruhigen Karte */
.step {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.step-karte {
  flex-grow: 1;
  background: #EAF0F6; /* dezentes Blaugrau — ruhiger als Weiß, kein Papier */
  border: 1px solid rgba(110, 137, 172, 0.32);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.step-karte p { color: #3C4A56; } /* auf Blaugrau braucht der Fliesstext eine Stufe mehr Tiefe */
.step-karte:hover {
  transform: translateY(-3px);
  border-color: rgba(110, 137, 172, 0.5);
  box-shadow: 0 14px 36px rgba(20, 32, 43, 0.1);
}
.step.erreicht .step-karte {
  border-color: rgba(110, 137, 172, 0.45);
}
.step.gewaehlt .step-karte {
  border-color: rgba(72, 98, 138, 0.6);
  box-shadow: 0 10px 30px rgba(20, 32, 43, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .step-karte { transition: none; }
}