/* moovnao.de · nur Startseite (Hero, Frage, Kreislauf, Mandat, Über uns, Makler, Wolke, Termin, Magazin, FAQ) */

/* ── HERO (1:1 Live-Seite, Farben und Kurven bewusst fest gesetzt, nicht auf Tokens umstellen) ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 72px 48px 80px;
  /* Das Foto gleitet von rechts herein; ohne clip wird die Seite am Handy während der Animation breiter */
  overflow-x: clip;
}
.hero-flex {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.hero-text { flex: 1; margin-top: 80px; }
.hero-text h1 {
  font-family: 'Satoshi Variable', sans-serif;
  font-size: 88px;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #262626;
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
}
.hero-text h1 .teal { color: #2A8C7A; }
/* Kleine Zeile über dem Satz, Teil der H1 (Keyword „Versicherungsmakler“), im Stil der Kicker mit Strich */
.hero-text h1 .hero-kicker { display: flex; width: fit-content; font-family: var(--font-body); font-size: 15px; line-height: 1.4; letter-spacing: .04em; margin-bottom: 28px; color: var(--teal-text); }
.hero-text p {
  margin-top: 28px;
  max-width: 480px;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s;
}
.hero-img { flex-shrink: 0; position: relative; margin-top: 58px; }
.hero-img img {
  /* bis 499 px wie live, schrumpft mit, damit zwischen Tablet und Desktop nichts abgeschnitten wird */
  width: min(499px, 40vw);
  height: auto;
  border-radius: 24px;
  display: block;
  opacity: 0;
  transform: translateX(40px);
  animation: slideLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.6s;
}
.bubble {
  position: absolute;
  z-index: 10;
  background: rgba(255,255,255,0.8);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 400;
  color: #262626;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.8);
  animation: bubbleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards, wobble 5s ease-in-out infinite;
}
.bubble.b1 { top: 8%; right: 5%; animation-delay: 1.2s, 1.7s; }
.bubble.b2 { top: 40%; left: -8%; animation-delay: 1.5s, 2s; }
.bubble.b3 { bottom: 20%; right: 8%; animation-delay: 1.8s, 2.3s; }
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
@keyframes slideLeft { to { opacity: 1; transform: translateX(0); } }
@keyframes bubbleIn { to { opacity: 1; transform: scale(1); } }
@keyframes wobble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(1.5deg); }
  50% { transform: translateY(2px) rotate(-1deg); }
  75% { transform: translateY(-3px) rotate(0.5deg); }
}

/* ── DIE FRAGE GEHT WEITER: Lauftext auf hellem Grund, Wörter füllen sich beim Scrollen, darunter die drei Motive.
   Der Abschnitt füllt den Bildschirm (auf großen Monitoren höchstens 880 px), das Grün beginnt erst unter der Kante. ── */
.bridge {
  min-height: min(calc(100vh - var(--nav-h)), 880px); display: flex; flex-direction: column; justify-content: center; align-items: center;
  /* leicht nach oben gerückt: das Auge sieht die Mitte höher als die Geometrie */
  padding: 0 0 clamp(56px, 10vh, 110px);
}
.bridge .wrap { width: 100%; text-align: center; }
.scrub {
  position: relative; z-index: 1;
  font-family: var(--font-display); color: var(--head);
  font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.22; letter-spacing: -0.03em; max-width: 980px; margin: 0 auto;
}
.scrub .w { opacity: .13; transition: opacity .35s linear, color .35s; }
.scrub .w.on { opacity: 1; }
.scrub .w.accent.on { color: var(--teal); }
/* Die Beispiele als Motive im Bildstil, frei versetzt, nicht in einer Reihe */
.bridge-motifs {
  list-style: none; display: flex; justify-content: center; align-items: flex-start; gap: clamp(24px, 5vw, 72px);
  margin: 52px auto 0; padding: 0;
}
.bridge-motifs li { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 200px; text-align: center; font-size: 1rem; line-height: 1.35; color: var(--muted); }
.bridge-motifs li:nth-child(1) { transform: translateY(18px); }
.bridge-motifs li:nth-child(2) { transform: translateY(-14px); }
.bridge-motifs li:nth-child(3) { transform: translateY(8px); }
.bridge-motif { width: 104px; height: 104px; border-radius: 50%; background: rgba(42, 140, 122, .08); display: grid; place-items: center; }
.bridge-motif svg { display: block; width: 64px; height: 64px; overflow: visible; }
.bridge-motif .s { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.bridge-motif .s.thin { stroke-width: 2.5; opacity: .55; }
.bridge-motif .f { fill: var(--teal); }

/* ── DER KREISLAUF: dunkelgrüne Karte, morpht beim Andocken auf volle Breite ── */
.cycle { padding: 0; }
.cycle-card { position: relative; color: var(--on-dark-muted); }
/* Scroll-Strecke: Antwortsatz, dann die Acht, die eins zu eins mit dem Scroll wächst */
.cycle-scroll { position: relative; height: 300vh; }
/* Die Fläche ist immer seitenbreit. Als Karte erscheint sie nur durch den Zuschnitt (clip-path, gesetzt in home.js),
   so wächst sie beim Andocken ohne Neuberechnung des Layouts auf volle Breite. */
.cycle-stage {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h));
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--pad); overflow: hidden;
  background: radial-gradient(90% 60% at 60% 0%, var(--dark-glow) 0%, var(--dark) 70%);
}
.cycle-stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(1100px, 110vw); aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59,165,148,.16), rgba(59,165,148,0) 72%);
  pointer-events: none;
}
/* Antwortsatz mitten in der Fläche, so groß wie die Frage darüber. Die Wörter füllen sich beim Scrollen. */
.cycle-intro {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%);
  width: min(980px, calc(100% - 2 * var(--pad))); text-align: center; pointer-events: none;
  font-family: var(--font-display); font-weight: 400; color: var(--on-dark);
  font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.22; letter-spacing: -0.03em;
  hyphens: manual; text-wrap: balance;
}
.cycle-intro h2 { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.cycle-fill .w { opacity: .18; filter: blur(3px); transition: opacity .4s var(--ease), filter .4s var(--ease), color .4s var(--ease); }
.cycle-fill .w.on { opacity: 1; filter: none; }
.cycle-fill .w.accent.on { color: var(--teal-light); }
/* Unterschrift der Acht: mittig auf der Achse von Antwortsatz und Figur, etwa drei Viertel des Satzes,
   damit sie als Unterschrift des Bildes liest, nicht als zweite Antwort. Kommt von oben herein (--in aus home.js). */
.cycle-caption {
  position: absolute; left: 50%; top: clamp(28px, 6vh, 64px); z-index: 3; width: min(860px, calc(100% - 2 * var(--pad)));
  translate: -50% 0; text-align: center;
  font-family: var(--font-display); font-weight: 400; color: var(--on-dark);
  font-size: clamp(1.6rem, 3.15vw, 2.55rem); line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance;
  opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * -16px));
}
.cycle-caption strong { font-weight: inherit; color: var(--teal-light); }
/* Die Acht sitzt unter der Unterschrift */
.cycle-art {
  position: relative; width: min(92%, calc((100vh - var(--nav-h) - 120px) * 1.78)); aspect-ratio: 640 / 360;
  margin-top: clamp(24px, 5vh, 56px);
}
.cycle-scene { position: absolute; inset: 0; transform-origin: 50% 50%; }
.cycle-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Vorbehalt am Ende der Fläche, erscheint nach der letzten Runde der Acht */
.cycle-end-note {
  position: absolute; left: 50%; bottom: clamp(24px, 5vh, 48px); z-index: 3; transform: translateX(-50%);
  width: min(620px, calc(100% - 2 * var(--pad))); text-align: center;
  font-size: 1.125rem; line-height: 1.5; color: var(--on-dark-muted);
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.cycle-end-note.on { opacity: 1; }

.seg { fill: none; stroke-linecap: round; stroke-width: 3.2; transition: opacity .8s var(--ease), stroke-width .8s var(--ease); }
.seg.prov { stroke: var(--teal-light); }
.seg.inv { stroke: var(--teal-pale); }
.seg.past { opacity: .3; stroke-width: 1.8; }
.ghost-track { fill: none; stroke: rgba(240,239,235,.06); stroke-width: 1.2; }
.pool { opacity: .7; }
.particle { filter: drop-shadow(0 0 6px rgba(143,191,184,.95)); }
.particle.prov { fill: var(--teal-light); }
.particle.inv { fill: var(--on-dark); }
.chevron { fill: none; stroke: var(--on-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(143,191,184,.9)); }
.center-disc { fill: var(--bg); filter: drop-shadow(0 0 10px rgba(143,191,184,.3)); }

/* Bubbles in den Schleifen: jede erscheint mit ihrer Schleife, damit das Auge dorthin geht */
.hub {
  position: absolute; z-index: 2; left: 32.5%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 18px; text-align: left;
  background: rgba(22,42,38,.82); border: 1px solid rgba(240,239,235,.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); white-space: nowrap;
  opacity: 0; scale: .96; transition: opacity .6s var(--ease), scale .6s var(--ease);
}
.hub.on { opacity: 1; scale: 1; }
.hub.inv { left: 67.5%; }
.hub i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.hub.prov i { background: var(--teal-light); }
.hub.inv i { background: var(--teal-pale); }
.hub i svg { display: block; }
.hub b { display: block; font: 500 20px var(--font-body); color: var(--on-dark); letter-spacing: -0.01em; line-height: 1.15; }
.hub span { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; line-height: 1.2; }
.hub.prov span { color: var(--teal-light); }
.hub.inv span { color: var(--teal-pale); }
@media (max-width: 900px) {
  .cycle-stage { padding: 8px var(--pad); }
}
/* Handy: Motive zu zweit nebeneinander, die langen Bubble-Wörter passen nicht in die Schleifen, links über, rechts unter der Figur */
@media (max-width: 640px) {
  .scrub { font-size: clamp(1.5rem, 6.2vw, 2rem); }
  .bridge-motifs { flex-wrap: wrap; gap: 20px 24px; margin-top: 36px; }
  .bridge-motifs li { max-width: 140px; font-size: .9375rem; }
  .bridge-motifs li:nth-child(n) { transform: none; }
  .bridge-motif { width: 80px; height: 80px; }
  .bridge-motif svg { width: 50px; height: 50px; }
  .cycle-fill { font-size: clamp(1.5rem, 6.2vw, 2rem); }
  .cycle-caption { top: 20px; font-size: 1.3rem; }
  .cycle-art { margin-top: 36px; }
  .cycle-end-note { bottom: 84px; font-size: 1rem; }
  .hub.prov { left: 30%; top: -22%; }
  .hub.inv { left: 70%; top: 122%; }
}

/* ── MAKLERMANDAT ── */
.mandate { padding: var(--space) 0 0; }
.mandate-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 80px; align-items: start; }
.mandate h2 strong { font-weight: inherit; color: var(--teal); }
/* Ein Textblock, eine Größe: Schritte, was bleibt, wie lange es dauert. „Bleibt“ hebt sich nur durch Farbe und Gewicht ab, nicht durch einen Kasten. */
.mandate-copy { margin-top: 24px; max-width: 560px; font-size: var(--fs-lead); line-height: 1.55; }
.mandate-keep { font-family: var(--font-display); font-weight: 500; color: var(--head); }
.mandate .btn { margin-top: 40px; }
/* Das Handy sitzt tiefer als der Textanfang, damit die Seite nicht in zwei gleich hohe Hälften zerfällt */
.mandate .phone-wrap { margin-top: 72px; }

.phone-wrap { position: relative; height: 680px; display: flex; justify-content: center; align-items: center; }
.phone-wrap::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--tint); }
.phone {
  --phone-frame: #1E2422;
  position: relative; width: 320px; height: 620px; border-radius: 46px;
  background: var(--bg); border: 9px solid var(--phone-frame);
  box-shadow: 0 50px 90px rgba(22,42,38,.22), 0 0 0 1px rgba(255,255,255,.4) inset;
  overflow: hidden; transform: rotate(var(--tilt, -2deg)); transition: transform .2s linear;
}
.phone-top { height: 34px; display: flex; justify-content: center; padding-top: 10px; }
.phone-top::before { content: ""; width: 92px; height: 24px; border-radius: 14px; background: var(--phone-frame); }
.phone-brand { display: flex; align-items: center; gap: 4px; padding: 10px 22px 0; font-size: 15px; font-weight: 500; color: var(--text); }
.phone-brand img { width: 22px; height: 22px; }
.phone-steps { display: flex; gap: 6px; padding: 16px 22px 0; }
.phone-steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--sand-deep); overflow: hidden; position: relative; }
.phone-steps i::after { content: ""; position: absolute; inset: 0; background: var(--teal); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease); }
.phone[data-step="1"] .phone-steps i:nth-child(1)::after,
.phone[data-step="2"] .phone-steps i:nth-child(-n+2)::after,
.phone[data-step="3"] .phone-steps i::after { transform: scaleX(1); }
.pscreen { position: absolute; left: 22px; right: 22px; top: 132px; opacity: 0; transform: translateX(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.phone[data-step="1"] .s1, .phone[data-step="2"] .s2, .phone[data-step="3"] .s3 { opacity: 1; transform: none; }
.pscreen h4 { font: 400 22px var(--font-display); color: var(--head); margin-bottom: 18px; letter-spacing: -0.02em; }
.pfield { height: 48px; border: 1.5px solid var(--border); border-radius: 14px; margin-bottom: 10px; padding: 0 16px; display: flex; align-items: center; font-size: 15px; color: var(--head); background: var(--white); }
.pfield.select { justify-content: space-between; }
.pfield.select svg { color: var(--muted); }
.pfield.typing { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pfield.typing::after { content: ""; width: 1.5px; height: 18px; margin-left: 2px; background: var(--teal); animation: blink 1s steps(1) infinite; }
/* „+ weiteren Vertrag“: zeigt, dass man mit einem anfangen und weitere dazunehmen kann */
.padd { height: 48px; border: 1.5px dashed var(--teal-border); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--teal-text); }
/* Das zugeschickte Mandat als kleines Dokument: drei Zeilen und ein Hinweis */
.pdoc { padding: 16px 16px 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--white); margin-bottom: 10px; }
.pdoc i { display: block; height: 6px; border-radius: 3px; background: var(--sand-deep); margin-bottom: 8px; }
.pdoc i:nth-child(2) { width: 84%; }
.pdoc i:nth-child(3) { width: 62%; }
.pdoc span { display: block; margin-top: 12px; font-size: 13px; color: var(--muted); }
.pbtn { height: 50px; border-radius: 100px; background: var(--teal); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; margin-top: 18px; }
.sigpad { display: block; height: 130px; border: 1.5px dashed var(--teal-border); border-radius: 14px; background: var(--tint); }
.sigpad path { fill: none; stroke: var(--head); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.phone[data-step="2"] .sigpad path { animation: draw 1.8s ease-in-out forwards .4s; }
.check { width: 88px; height: 88px; margin: 36px auto 22px; border-radius: 50%; background: var(--teal-soft); display: grid; place-items: center; }
.check path { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.phone[data-step="3"] .check path { animation: draw .8s var(--ease) forwards .3s; }
.s3 h4, .s3 p { text-align: center; }
.s3 p { font-size: 15px; line-height: 1.6; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes blink { 50% { opacity: 0; } }

/* ── ÜBER UNS + WO WIR STEHEN ── */
.about { background: var(--sand); margin-top: var(--space); padding: var(--space) 0; }
.about .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 96px; align-items: start; }
.about .lead { max-width: 520px; }
/* Team-Teaser: Organisation zeigen, nicht eine Person */
.team-teaser {
  display: inline-flex; align-items: center; gap: 18px; margin-top: 48px; padding: 12px 22px 12px 12px;
  background: var(--bg); border-radius: 100px; text-decoration: none; box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transition: opacity 1s var(--ease), transform .3s var(--ease), box-shadow .3s;
}
/* Zweiter Weg aus „Über uns“: die Ratgeberseite zum Berufsbild */
.about-more { display: flex; width: fit-content; margin-top: 20px; }
.team-teaser:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,0.12); }
.faces { display: flex; }
.faces img { box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--bg); background: var(--sand-deep); margin-left: -12px; }
.faces img:first-child { margin-left: 0; }
.team-teaser strong { display: block; color: var(--head); font-weight: 500; font-size: 16px; line-height: 1.3; }
.team-teaser span { font-size: 14px; color: var(--teal-text); }
.avatar { border-radius: 50%; background: var(--tint); display: grid; place-items: center; flex: 0 0 auto; }
/* Google-Bewertung im Hero */
.proof { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.hero-proof {
  margin-top: 28px;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards 1s;
}
.rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; color: var(--text); font-size: var(--fs-small); text-decoration: none; }
.rating strong { color: var(--head); font-weight: 500; }
.rating:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.rating-stars { flex: 0 0 auto; fill: var(--rating); }
.rating-date { font-size: 14px; color: var(--text); }
.rating-date a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.register { margin-top: 36px; font-size: 14px; color: var(--text); }
.register a { padding: 12px 0; text-underline-offset: 3px; } /* größere Klickfläche ohne Einfluss auf die Zeilenhöhe */

/* Der Plan in der Karte (ohne Karte wirkte er nicht, Markus 2026-11-08).
   Die Linie zeichnet sich beim Scrollen (--draw aus home.js) bis zum Punkt „Jetzt“ (--now-y), dahinter bleibt sie gestrichelt und blass. */
.roadmap-card { background: var(--bg); border-radius: 28px; padding: 44px 44px 16px; box-shadow: var(--shadow-soft); }
.roadmap-card h3 { margin-bottom: 34px; }
.roadmap { list-style: none; position: relative; --draw: 0; --now-y: 0px; }
.roadmap::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 34px; width: 2px; background: repeating-linear-gradient(var(--border-strong) 0 6px, transparent 6px 12px); }
.roadmap-draw { position: absolute; left: 9px; top: 10px; width: 2px; height: calc(var(--now-y) * var(--draw)); background: var(--teal); }
.phase { position: relative; padding: 0 0 34px 46px; }
.phase::before { content: ""; position: absolute; left: 2px; top: 6px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--bg); transition: border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
/* Erledigte Station: gefüllt, ohne Hof. „Jetzt“: gefüllt mit Hof, sobald die Linie dort angekommen ist. */
.phase.done::before { border-color: var(--teal); background: var(--teal); }
.roadmap.is-now .phase.now::before { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 6px var(--teal-soft); }
.phase strong { color: var(--head); font-weight: 500; font-size: 17px; }
.phase .tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white); background: var(--teal); border-radius: 100px; padding: 2px 9px; vertical-align: 2px; opacity: 0; transition: opacity .5s var(--ease); }
.roadmap.is-now .phase .tag, .phase .tag.past { opacity: 1; }
.phase .tag.past { background: none; color: var(--muted); padding: 0; margin-left: 10px; }
.phase p { font-size: 15.5px; margin-top: 4px; }
/* Kommende Phasen treten zurück, bis die Linie bei „Jetzt“ steht; danach bleiben sie leicht zurückgenommen */
.phase.now ~ .phase { opacity: .55; }

/* ── MAGAZIN ── */
.magazine { padding: var(--space) 0 0; }
.mag-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
/* Drei Beitragskarten (Stil in site.css), die mittlere tiefer versetzt: bricht die Reihe, ohne ein Raster zu verlassen */
.mag-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; align-items: start; }
.mag-frames > :nth-child(2) { margin-top: 72px; }

/* ── FAQ ── */
.faq { padding: var(--space) 0 0; }
.faq .wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; }

/* ── Was ein Versicherungsmakler macht: Linie läuft nach unten und fächert sich über die volle Breite auf ── */
/* Über uns und Makler sind ein Kapitel: ruhiger Sand über die volle Breite, ohne Verlauf, mit klarer Kante */
.flow-surface { margin-top: var(--space); background: var(--sand); }
.flow-surface .about { margin-top: 0; background: none; }
.broker { position: relative; padding-top: 48px; padding-bottom: var(--space); }
.broker-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Eine Linie, eine Farbe, eine Stärke: filigran von Du bis zu den Versicherern (Markus) */
.broker-line { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; }
.broker-flow { fill: none; stroke: none; }
.broker-dot { fill: var(--teal); opacity: 0; transition: opacity .6s var(--ease); }
.broker-dot.on { opacity: 1; }
/* Die Textseite wechselt von Abschnitt zu Abschnitt: Mandat links, Über uns rechts, Makler links, Wolke mittig, Termin rechts, Magazin links, FAQ rechts.
   Im Quelltext bleibt der Text immer zuerst, damit Vorlesegeräte und die Handy-Ansicht mit der Überschrift beginnen. */
@media (min-width: 1025px) {
  .broker-split { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .about .wrap > div:first-child, .booking .wrap > :first-child, .faq .wrap > :first-child { order: 2; }
  .booking .wrap { grid-template-columns: 1.05fr 1fr; }
  .faq .wrap { grid-template-columns: 1.6fr 1fr; }
}
.makler-link { display: inline-block; margin-top: 18px; padding-block: 6px; color: var(--teal-text); }
/* Die Figur: rechts nur Du und moovnao als weiße Kreise auf der Linie, kein Text. Du beginnt auf Höhe der Überschrift,
   das Logo sitzt auf Höhe des Textes, von dort ein weicher Bogen hinüber zum Absatz (home.js). Der Stiel sitzt bei zwei Dritteln,
   damit der Fächer darunter lang und geschwungen zu den Versicherern läuft. */
.broker-text { margin-top: 20px; max-width: 520px; }
.broker-trail { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto 1fr auto 1.2fr; justify-items: center; padding-top: 88px; }
.broker-you, .broker-hub { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--white); box-shadow: 0 10px 30px rgba(22,42,38,.10); }
.broker-you { grid-row: 1; font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; color: var(--head); }
.broker-hub { grid-row: 3; }
.broker-hub img { width: 40px; height: 40px; }
.broker-stem { grid-row: 5; width: 0; height: 0; }
.broker-tie-dot, .broker-node { fill: var(--teal); opacity: 0; transition: opacity .5s var(--ease); }
.broker-tie-dot.on, .broker-node.on { opacity: 1; }
.broker-ends { position: relative; display: flex; justify-content: space-between; margin-top: 160px; margin-bottom: 72px; }
.broker-end { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); }
.broker-end-logo { position: absolute; top: 100%; left: 50%; margin-top: 18px; transform: translateX(-50%); width: auto; height: 36px; max-width: 170px; }
.broker-end:first-child .broker-end-logo { left: 0; transform: none; }
.broker-end-label { position: absolute; top: 100%; right: 0; margin-top: 12px; white-space: nowrap; color: var(--text); }
/* Abgedunkelte Startzustände nur mit laufendem Skript, ohne Skript steht alles sichtbar da */
.is-live [data-show] { opacity: 0; transition: opacity .5s var(--ease); }
.is-live [data-show].on { opacity: 1; }

/* ── Versicherungen: Wolke aus wabbelnden Buttons wie im Hero, auf hellem Grund nach der Sand-Fläche ── */
.cloud-section { padding-top: var(--space); }
.cloud { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; }
/* Skript verteilt die Buttons frei im Raum, ohne Skript bleiben sie umbrochen */
.cloud.is-scattered { position: relative; display: block; }
.cloud.is-scattered .cloud-item { position: absolute; }
.cloud-item {
  transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(var(--rot, 0deg));
  transition: scale .35s var(--ease);
}
.cloud-item.is-magnet { position: relative; z-index: 2; scale: 1.08; }
.cloud-pill {
  display: flex; align-items: center; gap: 10px; padding: 6px 20px 6px 6px; border-radius: 28px; background: rgba(255, 255, 255, .8); color: var(--head);
  font-size: var(--fs-body); line-height: 1.3; white-space: nowrap; text-decoration: none; box-shadow: var(--shadow-bubble);
  animation: wobble var(--wd, 5s) ease-in-out var(--wdl, 0s) infinite;
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Motive aus dem Bildstil. Linien behalten klein eine feste Stärke, sonst verschwinden sie */
.cloud-thumb { flex: none; display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.cloud-thumb svg { display: block; width: 100%; height: 100%; }
.cloud-thumb [stroke] { vector-effect: non-scaling-stroke; stroke-width: 1.7px; }
.cloud-item.is-magnet .cloud-pill, .cloud-pill:hover, .cloud-pill:focus-visible {
  background: var(--teal); color: var(--white); box-shadow: 0 12px 36px var(--teal-border);
}
.range-all { display: flex; width: fit-content; margin: 56px auto 0; }

/* ── Startseite responsiv ── */
@media (max-width: 1024px) {
  .mandate-grid, .about .wrap, .faq .wrap { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .mandate .phone-wrap { margin-top: 0; }
  .phone-wrap { height: 640px; }
}
@media (max-width: 768px) {
  .hero { padding: 72px var(--pad) 60px; }
  .hero-flex { flex-direction: column; gap: 32px; }
  .hero-text { margin-top: 24px; }
  .hero-text h1 { font-size: 48px; }
  .hero-img { margin-top: 0; }
  .hero-img img { width: 100%; }
  .bubble.b2 { left: 4%; }
}
@media (max-width: 640px) {
  /* Makler-Figur am Handy: Die Versicherer stehen untereinander an einem Stamm, abwechselnd links und rechts,
     damit die Logos lesbar groß sind. home.js zeichnet dazu den Stamm mit runden Abzweigen. */
  .broker-trail { grid-template-rows: auto 48px auto 40px auto 0; padding-top: 48px; }
  .broker-ends { flex-direction: column; align-items: center; gap: 46px; margin-top: 52px; margin-bottom: 64px; }
  .broker-ends .broker-end:nth-child(odd) { left: -44px; }
  .broker-ends .broker-end:nth-child(even) { left: 44px; }
  .broker-ends .broker-end.is-more { left: 0; }
  .broker-ends .broker-end-logo { top: 50%; height: 28px; max-width: min(104px, calc(50vw - 82px)); margin-top: 0; transform: translateY(-50%); object-fit: contain; }
  .broker-ends .broker-end:nth-child(odd) .broker-end-logo { left: auto; right: 100%; margin-right: 14px; object-position: right center; }
  .broker-ends .broker-end:nth-child(even) .broker-end-logo { left: 100%; margin-left: 14px; object-position: left center; }
  .broker-ends .broker-end-label { right: auto; left: 50%; transform: translateX(-50%); }
  .cloud { gap: 10px 6px; }
  .cloud-item { max-width: 100%; }
  .cloud-pill { padding: 7px 14px 7px 7px; gap: 8px; font-size: 15px; white-space: normal; }
  .cloud-thumb { width: 30px; height: 30px; }
  /* Platz für den festen Button „Gespräch buchen“ unten */
  .cycle-stage { padding-bottom: 72px; }
  .hub { flex-direction: column; gap: 4px; padding: 8px 10px 7px; border-radius: 14px; text-align: center; }
  .hub i { display: none; }
  .hub b { font-size: 13px; }
  .hub span { font-size: 11px; }
  .phone-wrap { height: 600px; }
  .phone-wrap::before { width: min(320px, 100%); height: auto; aspect-ratio: 1; }
  .phone { transform: scale(.9) rotate(var(--tilt, -2deg)); }
  /* Handy: Karten nebeneinander zum Wischen statt drei hohe Karten untereinander */
  .mag-frames {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px;
    margin-inline: calc(var(--pad) * -1); padding: 8px var(--pad) 16px; scroll-padding-inline: var(--pad);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .mag-frames::-webkit-scrollbar { display: none; }
  .mag-frames > * { scroll-snap-align: start; }
  .mag-frames > :nth-child(2) { margin-top: 0; }
  .roadmap-card { padding: 32px 24px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .scrub .w, .cycle-fill .w { opacity: 1; filter: none; }
  .cycle-caption { opacity: 1; transform: none; }
}

/* ── Termin: helle Mint-Fläche über die volle Breite. Mint heißt auf der Startseite „hier handelst du“ (Termin und Schluss),
   Dunkelgrün bleibt der Idee im Kreislauf vorbehalten, Sand dem Kapitel Über uns und Makler. ── */
.booking { margin-top: var(--space); padding: var(--space) 0; background: var(--tint); }
/* Absatz in Lead-Größe wie beim Mandat, die Fakten darunter im selben Format */
.booking-copy { margin-top: 24px; max-width: 560px; font-size: var(--fs-lead); line-height: 1.55; }

/* ── Schluss und Footer: Die Mint-Fläche überlappt die Footer-Karte und endet am Strich unter dem Newsletter.
   Die Höhe (--footer-band) misst home.js an der Unterkante von .footer-news. ── */
.site-footer {
  padding-top: 0;
  background: linear-gradient(var(--tint), var(--tint)) top / 100% var(--footer-band, 0px) no-repeat;
}