/* ===========================================================================
   Concept Living – gemeinsamer Feinschliff für alle Seiten
   Wird nach dem <style> jeder Seite geladen und gilt deshalb vorrangig.
   Hier steht nur, was auf allen Seiten gleich aussehen soll:
   1. die mitlaufende Leiste am unteren Rand
   2. das mobile Menü
   =========================================================================== */

/* ---------- 1 · Mitlaufende Leiste ---------------------------------------- */
/* Vorher: eine schwarze Kapsel, deren Text am Telefon in zwei gequetschte
   Zeilen umbrach und die über Inhalten und dem WhatsApp-Knopf lag.
   Jetzt: eine ruhige, halbtransparente Karte mit klarer Hierarchie –
   kleine Zeile oben, Knopf rechts. */
.sticky{
  background:rgba(12,12,12,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.18);
  padding:8px 8px 8px 24px;gap:18px;
}
.sticky span{font-size:14px;line-height:1.3;color:rgba(255,255,255,.92)}
.sticky .btn{flex:none;white-space:nowrap}

@media (max-width:620px){
  .sticky{
    left:10px;right:10px;width:auto;max-width:none;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    transform:translateY(calc(100% + 30px));
    border-radius:18px;padding:8px 8px 8px 16px;gap:12px;
  }
  .sticky.is-on{transform:none}
  .sticky span{
    flex:1 1 auto;min-width:0;display:block;
    font-size:13px;line-height:1.3;-webkit-line-clamp:unset;
    overflow:hidden;text-overflow:ellipsis;
  }
  .sticky span::before{
    content:attr(data-k);display:block;margin-bottom:2px;
    font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);
  }
  .sticky .btn{padding:12px 16px!important;font-size:13px;border-radius:12px;min-height:0}
  /* Der WhatsApp-Knopf rückt über die Leiste, statt darunter zu liegen. */
  body:has(.sticky.is-on) .wabtn{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:360px){
  .sticky span{font-size:12px}
  .sticky .btn{padding:11px 12px!important;font-size:12px}
}

/* Bei offenem Menü verschwinden Leiste und WhatsApp-Knopf. */
body:has(.mnav.is-open) .sticky,
body:has(.mnav.is-open) .wabtn{opacity:0;pointer-events:none;transition:opacity .2s}

/* ---------- 2 · Mobiles Menü ---------------------------------------------- */
/* Der Kopf bleibt bei offenem Menü schwarz und lesbar – auf den hellen
   Seiten lag sonst ein grauer Verlauf über dem Menü. */
body:has(.mnav.is-open) .hdr{
  background:#060606!important;color:#fff!important;transform:none!important;box-shadow:none!important;
}
body:has(.mnav.is-open) .hdr::before{opacity:0!important}
body:has(.mnav.is-open) .hdr .wordmark{filter:none!important}

.mnav{
  display:flex;flex-direction:column;
  background:
    radial-gradient(120% 60% at 100% 0%,rgba(244,249,157,.07),transparent 60%),
    #060606;
  padding:calc(var(--hdr-h,74px) + 18px) var(--pad,var(--gut,20px)) calc(28px + env(safe-area-inset-bottom,0px));
}
.mnav>a:not(.btn),.mnav__t{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--f-display,var(--serif,'Cormorant Garamond',Georgia,serif));
  font-weight:400;font-size:clamp(1.85rem,8.4vw,2.35rem);line-height:1.08;letter-spacing:-.005em;
  padding:.36em 0;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;
}
/* Pfeil rechts an den direkten Links, passend zum Winkel der Gruppen. */
.mnav>a:not(.btn)::after{
  content:"";flex:none;width:9px;height:9px;margin-right:.3rem;opacity:.55;
  border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg);
}
.mnav__t i{opacity:.55}
.mnav__s{padding-left:2px}
.mnav .sub{
  display:flex;align-items:center;gap:.7em;
  font-family:var(--f-text,var(--sans,'Poppins',sans-serif));font-size:15px;opacity:1;
  color:rgba(255,255,255,.66);padding:.62em 0 .62em 0;border:0;
}
.mnav .sub::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28);flex:none}
.mnav .sub:hover,.mnav .sub:active{color:#fff}
.mnav .sub:hover::before{background:var(--lime,#f4f99d)}

.mnav .btn{
  margin-top:26px;width:100%;justify-content:center;
  background:var(--lime,#f4f99d)!important;color:#000!important;border:0;
  padding:17px 22px;font-size:15px;font-family:var(--f-text,var(--sans,'Poppins',sans-serif));
}

/* Kontakt unten im Menü */
.mnav__fuss{margin-top:auto;padding-top:30px}
.mnav__k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mnav__k a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:14px 6px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:#fff;font-size:12px;
  font-family:var(--f-text,var(--sans,'Poppins',sans-serif));
}
.mnav__k svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mnav__k a.wa svg{fill:currentColor;stroke:none}
.mnav__g5{
  display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 0;
  font-size:12px;color:rgba(255,255,255,.6);font-family:var(--f-text,var(--sans,'Poppins',sans-serif));
}
.mnav__g5 b{color:#FBBC04;letter-spacing:2px;font-weight:400}

/* Einblenden nacheinander */
@keyframes mnavIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mnav.is-open>*{animation:mnavIn .55s cubic-bezier(.2,.7,.2,1) both}
.mnav.is-open>*:nth-child(1){animation-delay:.12s}
.mnav.is-open>*:nth-child(2){animation-delay:.17s}
.mnav.is-open>*:nth-child(3){animation-delay:.22s}
.mnav.is-open>*:nth-child(4){animation-delay:.27s}
.mnav.is-open>*:nth-child(5){animation-delay:.32s}
.mnav.is-open>*:nth-child(6){animation-delay:.37s}
.mnav.is-open>*:nth-child(7){animation-delay:.42s}
@media (prefers-reduced-motion:reduce){.mnav.is-open>*{animation:none}}

/* ---------- 3 · Google-Bewertungen ---------------------------------------- */
/* Heller Abschnitt ohne schwarze Fläche hinter der Überschrift; die
   Bewertungskarten selbst bleiben dunkel und heben sich so ab. */
.gsec{background:transparent!important;color:#0a0a0a}
.gsec .ghead h2{color:#0a0a0a}
.gsec .gscore__meta span{color:rgba(0,0,0,.58)}
.gsec .ghead .btn{background:transparent;color:#0a0a0a;border:1px solid rgba(0,0,0,.22)}
.gsec .ghead .btn:hover{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.gsec .rev{background:#0c0c0c;border-color:#0c0c0c;color:#fff;box-shadow:0 22px 44px -26px rgba(0,0,0,.45)}
.gsec .rev:hover{background:#151515;border-color:#151515}
.gsec .gfoot{border-top-color:rgba(0,0,0,.12)}
.gsec .gfoot__link{color:#0a0a0a;text-decoration-color:rgba(0,0,0,.35)}
.gsec .gfoot__note{color:rgba(0,0,0,.6)}
.gsec .gfoot__note b{color:#0a0a0a}

/* Am Telefon: eine Reihe mit sechs vollständigen Karten, die von selbst
   weiterläuft (laufband.js) und sich mit dem Finger wischen lässt. */
.rev--m{display:none}
.refstage{touch-action:pan-y}
@media (max-width:620px){
  .gsec .ghead h2{font-size:1.75rem;line-height:1.15}
  .gsec .gscore{gap:12px}
  .gsec .gscore__num{font-size:2.9rem}
  .gsec .revwrap{
    overflow-x:auto;overflow-y:hidden;-webkit-mask-image:none;mask-image:none;
    margin:22px calc(var(--pad,var(--gut,20px)) * -1) 0;
    padding:2px var(--pad,var(--gut,20px)) 18px;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad,var(--gut,20px));scrollbar-width:none;
  }
  .gsec .revwrap::-webkit-scrollbar{display:none}
  .gsec .revwrap+.revwrap{display:none}
  .gsec .revtrack{animation:none!important;transform:none!important;width:auto;gap:12px}
  .gsec .revtrack .rev{display:none}
  .gsec .revtrack .rev:nth-child(-n+3),.gsec .revtrack .rev--m{display:flex}
  .gsec .rev{flex:0 0 82%;min-height:0;scroll-snap-align:start;padding:18px 18px 20px;border-radius:16px;gap:.8rem}
  .gsec .rev:hover{transform:none}
  .gsec .rev__who b{white-space:nowrap}
  .gsec .rev p{-webkit-line-clamp:6;font-size:.92rem}
  .gsec .gfoot{flex-direction:column;gap:14px}
}

/* ---------- 4 · Datenschutz-Hinweis beim ersten Besuch -------------------- */
.clh{
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:130;
  width:min(440px,calc(100vw - 32px));
  background:rgba(12,12,12,.94);color:#fff;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.6);
  padding:18px 18px 16px;
  transform:translateY(calc(100% + 40px));opacity:0;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease;
  font-family:var(--f-text,var(--sans,'Poppins',sans-serif));
}
.clh.is-on{transform:none;opacity:1}
.clh__t{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.72)}
.clh__t b{display:block;margin-bottom:4px;color:#fff;font-weight:500;font-size:14px}
.clh__t a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.clh__k{display:flex;gap:8px;margin-top:14px}
.clh__b{
  flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:12px;border:0;cursor:pointer;
  font:inherit;font-size:13.5px;background:var(--lime,#f4f99d);color:#000;text-decoration:none;
}
.clh__b--leise{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22)}
.clh__kurz{display:none}
.fnplus__kurz{display:none}
/* Solange der Hinweis steht, bleibt die Leiste unten weg. */
body:has(.clh.is-on) .sticky,body:has(.clh.is-on) .wabtn{opacity:0;pointer-events:none}
@media (max-width:620px){
  /* Am Telefon kompakt: kurzer Text, darunter „Ablehnen“ und
     „Akzeptieren“ nebeneinander, gleich gross. */
  .clh{left:10px;right:10px;width:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    padding:14px 14px 12px;border-radius:16px}
  .clh__t{font-size:12.4px;line-height:1.45}
  .clh__t b{display:none}
  .clh__k{margin-top:10px}
  .clh__b{padding:10px 14px;border-radius:10px;font-size:13px}
  .clh__lang{display:none}
  .clh__kurz{display:inline}
}
/* „Ablehnen“ ist so gross und gut sichtbar wie „Akzeptieren“. */
.clh__b--gleich{background:#fff;color:#000}
.clh__stand{display:block;margin-top:6px;font-size:11px;color:rgba(255,255,255,.55)}
@media (prefers-reduced-motion:reduce){.clh{transition:none}}

/* ---------- 5 · Schrift und grosse Bildschirme ---------------------------- */
/* Fliesstext immer in der mitgelieferten Poppins. Vorher stand „Century
   Gothic“ an erster Stelle: Die ist auf vielen Windows-Rechnern installiert
   (mit Office) und wurde dann statt Poppins benutzt – mit anderen Breiten,
   anderen Zeilenumbrüchen und je nach Version fehlenden Zeichen. Jetzt
   sieht die Seite auf Windows, Mac und Telefon gleich aus. */
:root{
  --sans:'Poppins','Segoe UI',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --f-text:'Poppins','Segoe UI',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}


/* ---------- 6 · Serifen-Überschriften: nichts abschneiden ----------------- */
/* Die Überschriften bauen sich Wort für Wort auf; jedes Wort liegt in einem
   Rahmen mit overflow:hidden. Windows setzt die Serifenschrift innerhalb
   der Zeile etwas anders als Mac und Telefon – dort wurden Umlaut-Punkte
   (Ä, Ö, Ü), Ober- und Unterlängen (f, g, p, y) angeschnitten. Der Rahmen
   bekommt deshalb oben, unten und rechts Luft; negative Ränder gleichen
   das aus, die Zeilen stehen genau wie vorher. */
.sp,.split-text .sp{
  padding-top:.32em!important;margin-top:-.32em!important;
  padding-bottom:.36em!important;margin-bottom:-.36em!important;
  padding-right:.08em;margin-right:-.08em;
}

/* Kein künstlich erzeugtes Fett: Fehlt ein Schriftschnitt, soll der
   Browser nicht selbst verdicken – sonst wirkt die Serifenschrift auf
   manchen Rechnern fett. */
html{font-synthesis:none}

/* ---------- 7 · Kennzahlen-Kacheln am Telefon ----------------------------- */
/* Sechs Kacheln untereinander waren fast zwei Bildschirme lang. Zwei
   Spalten mit etwas kleinerer Schrift zeigen alles auf einen Blick. */
@media (max-width:620px){
  .kpis,.kpis--sechs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .kpi{padding:16px 14px!important;border-radius:16px}
  .kpi__l{font-size:9.5px;letter-spacing:.12em}
  .kpi__v{font-size:1.55rem!important;margin-top:8px}
  .kpi__d{font-size:10.5px;margin-top:8px;padding:.3em .6em}
}

/* ---------- 8 · Ruhiges Scrollen, weiche Einblendungen -------------------- */
/* Überschriften: Bisher sprang jedes Wort einzeln von unten herein, im
   Abstand von 45 Millisekunden – das wirkte abgehackt. Jetzt gleitet die
   ganze Zeile in einem Zug herauf und blendet dabei weich ein. */
.split-text .sp i{
  transform:translateY(.45em)!important;opacity:0;
  transition:transform 1.1s cubic-bezier(.16,.84,.3,1),opacity .9s ease!important;
  transition-delay:0s!important;will-change:auto;
}
.split-text.in .sp i{transform:none!important;opacity:1}
@media (prefers-reduced-motion:reduce){.split-text .sp i{transform:none!important;opacity:1;transition:none!important}}

/* Abschnitte und Karten: kürzerer Weg, längere, sanftere Kurve. */
.rv{transform:translateY(16px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,.84,.3,1)!important}
.rv.in{transform:none}

/* Am Telefon und Tablet: keine Tiefenverschiebung beim Scrollen. Sie
   rechnet bei jedem Bild neu, verschiebt Ebenen gegeneinander und ist der
   Hauptgrund für das Haken. Bilder und Karten stehen jetzt ruhig. */
@media (hover:none) and (pointer:coarse){
  [data-par]{transform:none!important;--py:0px!important;will-change:auto!important}
  .stage{transform:scale(var(--s))!important}
  .fan__stage{transform:scale(var(--s))!important}
  .ph,.clip .ph{transform:none!important}
  /* Weichzeichner hinter Kopf und Leisten kosten beim Scrollen viel Rechenzeit. */
  .hdr,.hdr.solid,.sticky,.clh{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hdr.solid{background:rgba(6,6,6,.97)!important}
  .sticky,.clh{background:rgba(12,12,12,.97)!important}
}

/* ---------- 9 · Scrollgesteuerte Animationen am Telefon ------------------- */
/* Statt „Element erreicht Schwelle → Animation läuft ab“ hängt die Bewegung
   direkt am Scrollen: Texte und Mockups gleiten genau so schnell herein,
   wie der Finger die Seite bewegt, und halten an, wenn er anhält. Nichts
   springt mehr. Browser ohne diese Technik (ältere iPhones) behalten die
   weichen Einblendungen aus Abschnitt 8.
   Bewegt wird über die Einzel-Eigenschaften translate/scale/rotate – sie
   addieren sich zu einem vorhandenen transform, die Mockups behalten also
   ihre Verkleinerung. */
@keyframes clEin{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes clZeile{from{opacity:0;translate:0 .6em}to{opacity:1;translate:0 0}}
@keyframes clMock{from{opacity:.4;translate:0 26px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes clLinks{from{translate:-7px 12px;rotate:-1.5deg}to{translate:7px -12px;rotate:1deg}}
@keyframes clRechts{from{translate:7px 14px;rotate:1.5deg}to{translate:-7px -10px;rotate:-1deg}}
@keyframes clDrift{from{translate:0 16px;rotate:-1.2deg}to{translate:0 -20px;rotate:1.2deg}}
@keyframes clKreis{from{translate:0 10px;rotate:-12deg}to{translate:0 -10px;rotate:12deg}}

@supports (animation-timeline: view()){
  @media (max-width:900px) and (prefers-reduced-motion:no-preference){
    /* overflow:hidden macht einen Abschnitt zum eigenen Scrollbereich –
       dann misst die Animation dessen (nie bewegten) Scrollstand statt der
       Seite, und die Mockups im Kopfbereich standen still. overflow:clip
       schneidet genauso ab, ohne Scrollbereich zu sein. */
    section.hero,section.sec,section.section,section.fnpage{overflow:clip!important}
    /* Abschnitte, Karten, Absätze */
    .rv{opacity:1!important;transform:none!important;transition:none!important;
      animation:clEin linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    /* Überschriften als Ganzes, die Wort-Animation ruht */
    .split-text .sp i{opacity:1!important;transform:none!important;transition:none!important}
    .split-text{animation:clZeile linear both;animation-timeline:view();animation-range:entry 5% entry 80%}

    /* Mockups: kommen mit dem Scrollen aus der Tiefe nach vorn */
    .collage,.fan,.matchart,.mstage,.dash,.hmock,.refstage,.ka__main,.kontakt__img,
    .bleed__img,.hero__shot,.pmock__media{
      animation:clMock linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    /* … ihre schwebenden Teile bleiben an ihrem Platz und wandern beim
       Scrollen nur ein paar Pixel gegeneinander – wie leichte Tiefe. */
    .chip--matches,.chip--chart,.chip--face,.fcard--a,.fcard--c,.match__ring--a,.ka__sub{
      animation:clLinks linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .chip--chances,.chip--photo,.fcard--b,.fchip--new,.match__ring--b,.mlist{
      animation:clRechts linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    /* Das Telefon im Mockup von „Verkaufen“ und die Hauptkarten wiegen
       sich beim Scrollen sanft mit – entgegen den Kärtchen drumherum. */
    .stage .phone,.hmock__karte{
      animation:clDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .chip--lime,.fchip--lime,.match__badge,.hmock__eins,.pmock__lime,.shot__lime,.shot__chip,.pmock__chip{
      animation:clKreis linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}

/* ---------- 10 · Schwebende Handlungsknöpfe ------------------------------- */
/* Die wichtigsten Knöpfe heben sich leicht und ruhig, damit das Auge sie
   findet – ohne zu zappeln: 3 Pixel, gut vier Sekunden pro Atemzug. */
@keyframes clSchweben{
  0%,100%{translate:0 0;box-shadow:0 10px 22px -14px rgba(0,0,0,.35)}
  50%{translate:0 -3px;box-shadow:0 16px 28px -14px rgba(0,0,0,.42)}
}
@media (prefers-reduced-motion:no-preference){
  .btn--lime,.hero__search .btn,.upsell__cta,.sticky .btn,
  .hero__acts>.btn:first-child,.panel__actions>.btn:first-child,.ctaband__acts>.btn:first-child,
  .mnav .btn{
    animation:clSchweben 4.2s ease-in-out infinite;
  }
  .hero__acts>.btn:first-child,.ctaband__acts>.btn:first-child{animation-delay:-1.4s}
  .sticky .btn{animation-delay:-2.8s}
}

/* ---------- 11 · Drehendes Siegel am Bewertungs-Funnel ------------------- */
/* „Kostenfrei · unverbindlich“ läuft langsam im Kreis um „0 €“ – wie auf
   simonundco.immo. Sitzt auf der oberen rechten Ecke des Funnels, auf dem
   Handy so weit nach innen, dass der ganze Kreis sichtbar bleibt. */
.fn{position:relative}
.fn__siegel{position:absolute;right:-26px;top:-34px;z-index:3;width:104px;height:104px;border-radius:50%;
  background:var(--lime,#f8ffa1);color:#000;display:grid;place-items:center;
  box-shadow:0 18px 36px -16px rgba(0,0,0,.5);pointer-events:none}
.fn__siegel svg{position:absolute;inset:0;width:100%;height:100%;animation:clDrehen 20s linear infinite}
.fn__siegel text{font-family:var(--sans,'Poppins',sans-serif);font-size:9.6px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;fill:#000}
.fn__siegel b{font-family:var(--serif,'Cormorant Garamond',serif);font-weight:500;font-size:24px;line-height:1;font-variant-numeric:lining-nums}
@keyframes clDrehen{to{transform:rotate(360deg)}}
/* Unter der Zeile „Schritt 1 von 6 · Wenige Minuten“, halb über dem Rand. */
@media (min-width:1001px){.fn__siegel{top:58px;right:-46px}}
/* Auf schmaleren Bildschirmen weniger weit hinaus, sonst schneidet der Bildschirmrand ihn ab. */
@media (min-width:1001px) and (max-width:1420px){.fn__siegel{right:-18px;width:96px;height:96px}.fn__siegel b{font-size:22px}}
@media (max-width:1000px){
  .fn__siegel{right:10px;top:-40px;width:88px;height:88px}
  .fn__siegel b{font-size:20px}
}
/* Dreht sich bewusst auch bei „Bewegung reduzieren“: langsam und ruhig, wie auf simonundco.immo. */
.fn__siegel svg{transform-origin:50% 50%;will-change:transform}
/* Die Grundregel der Seite setzt bei „Bewegung reduzieren“ jede Animation
   auf 0,001 ms (mit !important). Für den Kreis gilt das nicht. */
.fn .fn__siegel svg{animation-duration:20s!important;animation-iteration-count:infinite!important}
/* Der Funnel schneidet sonst den Kreis ab. */
.fnpage .fn{overflow:visible}
/* Handy wie simonundco.immo: Überschrift, dann gleich der Funnel als Karte
   mit Rand und runden Ecken, Siegel auf der Ecke. Häkchen, Google-Karte
   und ImmoScout-Siegel folgen darunter. */
@media (max-width:620px){
  .fnpage .fnlead{order:1}
  .fnpage .fn{order:2;margin-inline:0;margin-top:18px;border-radius:24px;
    box-shadow:0 30px 60px -34px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.04)}
  .fnpage .fnproof{order:3;margin-top:6px}
  .fnpage .fn__head{padding:22px 20px 0}
  .fnpage .fn__body{padding:22px 18px 24px}
  /* Siegel auf der Ecke; „Wenige Minuten“ rückt dafür neben „Schritt 1 von 6“. */
  .fnpage .fn__siegel{right:-4px;top:-46px;width:86px;height:86px}
  .fnpage .fn__meta{justify-content:flex-start;gap:18px}
  /* Google-Karte und ImmoScout-Siegel etwas grösser */
  .fnpage .fntrust{gap:12px;margin-top:22px}
  .fnpage .gbadge__top{gap:16px;padding:20px 20px 14px}
  .fnpage .gbadge__g{width:46px}
  .fnpage .gbadge__main b{font-size:16.5px}
  .fnpage .gbadge__score em{font-size:30px}
  .fnpage .gbadge__stars{width:108px}
  .fnpage .gbadge__score i{font-size:13.4px}
  .fnpage .gbadge__go{display:grid}
  .fnpage .gbadge__fuss{font-size:13px;margin-inline:20px}
  .fnpage .gbadge__fuss>span{font-size:12px}
  .fnpage .fntrust__card{padding:16px 20px;gap:16px}
  .fnpage .fntrust__seal{width:58px;height:58px}
  .fnpage .fntrust__t{font-size:13.4px}
  .fnpage .fntrust__t b{font-size:15px}
}

/* ---------- 12 · Bewertungsseite am Telefon ------------------------------ */
@media (max-width:620px){
  body:has(.fnpage) .wie__h,body:has(.fnpage) .vk__head h2{text-align:center;margin-inline:auto}
  body:has(.fnpage) .vk__head{text-align:center}
  /* Google-Karte und ImmoScout-Siegel zuerst, über die volle Breite;
     die drei Häkchen klein darunter, ohne Kacheln. */
  .fnpage .fnproof{display:flex;flex-direction:column}
  .fnpage .fntrust{order:1;margin-top:8px}
  /* Alle drei in einer Zeile, klein und linksbündig unter den Karten. */
  /* Google, ImmoScout und Funnel gleich breit; darunter die drei Punkte
     mit schwarzem Häkchen mittig in einer Reihe. */
  /* Breite fest auf die volle Spalte – sonst richtet Safari die Karten nach
     ihrem Inhalt aus und sie werden schmaler als der Funnel. */
  .fnpage .fngrid{align-items:stretch!important}
  .fnpage .fnlead,.fnpage .fn,.fnpage .fnproof,.fnpage .fntrust,.fnpage .gbadge,.fnpage .fntrust__card,.fnpage .fnplus{width:100%;max-width:none;min-width:0;box-sizing:border-box;align-self:stretch}
  .fnpage .gbadge__main,.fnpage .fntrust__t{min-width:0}
  .fnpage .gbadge,.fnpage .fntrust__card{display:flex}
  .fnpage .gbadge{flex-direction:column}
  .fnpage .fnplus{order:2;display:flex;flex-wrap:nowrap;justify-content:center;gap:0 min(12px,3vw);margin-top:24px}
  .fnpage .fnplus li{display:flex;align-items:center;gap:4px;font-size:min(10.5px,2.3vw);line-height:1.3;color:#3d3d39;white-space:nowrap}
  .fnpage .fnplus i{display:grid;width:min(13px,3vw);height:min(13px,3vw);flex:none}
  .fnpage .fnplus i svg{width:62%;height:62%}
  .fnpage .fnplus__lang{display:none}
  .fnpage .fnplus__kurz{display:inline}
}

/* ---------- 13 · Referenzen: Anzeigen-Fächer am Telefon ------------------ */
/* Statt das 520-Pixel-Mockup auf zwei Drittel zu verkleinern, steht der
   Fächer in voller Spaltenbreite mit grossen Karten. Beim Hereinscrollen
   liegen die drei Anzeigen zuerst als Stapel in der Mitte und fächern
   dann auf – die Bewegung hängt direkt am Finger. */
@media (max-width:620px){
  .fan{--s:1;height:auto!important;min-height:0!important;margin-top:30px;display:block}
  .fan__stage{width:100%;height:710px;margin:0;transform:none!important}
  .fan__stage .fcard{padding:9px 9px 15px;border-radius:20px;box-shadow:0 34px 60px -26px rgba(0,0,0,.5)}
  .fan__stage .fcard__img{height:142px;border-radius:14px}
  .fan__stage .fcard__loc{margin:11px 8px 0;font-size:9.5px}
  .fan__stage .fcard__t{margin:5px 8px 0;font-size:16.5px}
  .fan__stage .fcard__p{margin:8px 8px 0;font-size:22px}
  .fan__stage .fcard--a{left:-2px;top:22px;width:63%;transform:rotate(-4deg)}
  .fan__stage .fcard--b{left:auto;right:-2px;top:205px;width:63%;transform:rotate(4deg)}
  .fan__stage .fcard--c{left:50%;bottom:0;top:auto;width:68%;margin-left:-34%;transform:rotate(-1deg)}
  .fan__stage .fchip--new{right:4px;top:0;padding:14px 18px}
  .fan__stage .fchip--lime{left:6px;bottom:215px;width:70px;height:70px}
}
/* Bewegung über --fp aus faecher.js: 0 = Stapel in der Mitte, 1 = Fächer.
   Ohne Skript steht --fp auf 1, die Karten liegen also aufgefächert. */
@media (max-width:620px){
  .fan{--fp:1;animation:none!important}
  .fan__stage .fcard,.fan__stage .fchip{animation:none!important}
  .fan__stage .fcard--a{translate:calc((1 - var(--fp)) * 22%) calc((1 - var(--fp)) * 260px);
    rotate:calc((1 - var(--fp)) * 4deg);scale:calc(.86 + var(--fp) * .14)}
  .fan__stage .fcard--b{translate:calc((1 - var(--fp)) * -22%) calc((1 - var(--fp)) * 60px);
    rotate:calc((1 - var(--fp)) * -4deg);scale:calc(.86 + var(--fp) * .14)}
  .fan__stage .fcard--c{translate:0 calc((1 - var(--fp)) * -230px);scale:calc(.9 + var(--fp) * .1)}
  .fan__stage .fchip--new,.fan__stage .fchip--lime{
    scale:clamp(0, calc((var(--fp) - .6) * 2.5), 1);opacity:clamp(0, calc((var(--fp) - .6) * 2.5), 1)}
}

/* ---------- 14 · Startseite: Suchkunden-Mockup beim Scrollen ------------- */
/* --p kommt aus scrollfx.js (0 = unten am Fensterrand, 1 = oben angekommen).
   Erst laufen die beiden Kreise – Mensch und Haus – von den Seiten
   zusammen, dann springt „98 % Übereinstimmung“ auf, die Suchkunden
   gleiten nacheinander herein, die Prozente und die 20.412 zählen hoch,
   der Schlüssel dreht sich ein. Ohne Skript bleibt alles an seinem Platz. */
@media (max-width:900px){
  .match.sfx-an,.match.sfx-an *{animation:none!important}
  .match.sfx-an{opacity:1!important;transform:none!important;
    --a:clamp(0, calc(var(--p) * 2.2), 1);
    --b:clamp(0, calc((var(--p) - .42) * 5), 1);
    --r1:clamp(0, calc((var(--p) - .28) * 3.5), 1);
    --r2:clamp(0, calc((var(--p) - .36) * 3.5), 1);
    --r3:clamp(0, calc((var(--p) - .44) * 3.5), 1);
    --s:clamp(0, calc((var(--p) - .5) * 3), 1)}
  .match.sfx-an .match__ring--a{translate:calc((1 - var(--a)) * -120px) calc((1 - var(--a)) * 30px);
    rotate:calc((1 - var(--a)) * -30deg);scale:calc(.75 + var(--a) * .25)}
  .match.sfx-an .match__ring--b{translate:calc((1 - var(--a)) * 120px) calc((1 - var(--a)) * -30px);
    rotate:calc((1 - var(--a)) * 30deg);scale:calc(.75 + var(--a) * .25)}
  .match.sfx-an .match__spark{opacity:var(--b);scale:calc(.6 + var(--b) * .4)}
  .match.sfx-an .match__badge{scale:var(--b);rotate:calc((1 - var(--b)) * -14deg);opacity:var(--b)}
  .match.sfx-an .ka__main{translate:0 calc((1 - var(--r1)) * 50px);opacity:calc(.3 + var(--r1) * .7)}
  .match.sfx-an .ka__row:nth-of-type(1){translate:calc((1 - var(--r1)) * 70px) 0;opacity:var(--r1)}
  .match.sfx-an .ka__row:nth-of-type(2){translate:calc((1 - var(--r2)) * 70px) 0;opacity:var(--r2)}
  .match.sfx-an .ka__row:nth-of-type(3){translate:calc((1 - var(--r3)) * 70px) 0;opacity:var(--r3)}
  .match.sfx-an .ka__sub{translate:calc((1 - var(--s)) * -40px) calc((1 - var(--s)) * 60px);
    rotate:calc((1 - var(--s)) * -6deg);opacity:var(--s)}
  .match.sfx-an .ka__badge{scale:var(--s);rotate:calc((1 - var(--s)) * -200deg)}
}
/* Safari schneidet ein Bild in einem runden Rahmen nicht sauber ab, solange
   der Rahmen gedreht oder skaliert wird – die Ecken des Fotos schauen dann
   heraus. Das Foto bekommt deshalb seinen eigenen Kreis-Zuschnitt. */
.match__ring{border-radius:50%;aspect-ratio:1/1}
.match__ring .ph{clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%);border-radius:50%}
/* Am Telefon Breite und Höhe fest gleich setzen, statt sich auf
   aspect-ratio zu verlassen – so kann kein Kreis oval werden. */
@media (max-width:620px){
  .matchart .match__ring--a{width:40vw!important;height:40vw!important}
  .matchart .match__ring--b{width:36vw!important;height:36vw!important}
  .matchart .match__ring .ph{position:absolute;inset:0;width:100%!important;height:100%!important;background-size:cover;background-position:center}
}

/* ---------- 15 · Google-Bewertungen ohne Nebel an den Rändern ------------ */
/* Kein Verlauf mehr links und rechts – auf allen Seiten und Geräten. Am
   Computer läuft das Band dafür über die volle Fensterbreite, damit die
   Karten nicht hart am Seitenrand abgeschnitten wirken. */
.revwrap{-webkit-mask-image:none!important;mask-image:none!important}

/* ---------- 16 · Google-Bewertungen ------------------------------------- */
/* Am Computer läuft das Band automatisch durch und füllt die ganze
   Fensterbreite, ohne Verlauf an den Rändern. Am Telefon lassen sich die
   Karten nur von Hand durchwischen (Abschnitt 3); laufband.js tut nichts
   mehr, damit dort nichts von selbst weiterläuft. */
@media (min-width:621px){.revwrap{margin-inline:calc(50% - 50vw)}}
/* Das Band ist doppelt so lang (damit es auch auf sehr breiten
   Bildschirmen bis zum Rand reicht) – also doppelt so lange Laufzeit,
   damit das Tempo gleich bleibt. */
@media (min-width:621px){.gsec .revtrack{animation-duration:140s!important}}

/* ---------- 17 · Bewertungs-Funnel: Begleitung, Lage, Vorschau ----------- */
/* Gehört zu einwertung.js. Nur auf bewerten.html (.fnpage). */
.fnpage .fguide{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.fnpage .fguide__p{flex:none;margin:0;width:84px;text-align:center}
.fnpage .fguide__p img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 12%;
  display:block;margin:0 auto;box-shadow:0 0 0 3px #fff,0 10px 22px -10px rgba(0,0,0,.45)}
.fnpage .fguide__p figcaption{margin-top:8px;font-size:10.5px;line-height:1.3;color:#8b8b85}
.fnpage .fguide__p figcaption b{display:block;color:#111;font-weight:500;font-size:11px}
.fnpage .fguide__b{position:relative;flex:1;min-width:0;background:#f6f5f1;border-radius:18px;padding:16px 20px 17px}
.fnpage .fguide__b::before{content:'';position:absolute;left:-7px;top:24px;width:14px;height:14px;background:#f6f5f1;transform:rotate(45deg);border-radius:2px}
.fnpage .fguide__b .fstep__h{margin:0}
.fnpage .fguide__b .fstep__p{margin:6px 0 0}
/* Rückmeldungen */
.fnpage .fhint{margin:18px 0 4px;animation:clHint .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes clHint{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.fnpage .fhint__z{display:flex;gap:10px;align-items:flex-start;font-size:13.4px;line-height:1.5;color:#3d3d39}
.fnpage .fhint__z b{font-weight:500;color:#1f6b3a}
.fnpage .fhint__ok{flex:none;width:20px;height:20px;border-radius:50%;background:#2f8f52;color:#fff;display:grid;place-items:center;margin-top:1px}
.fnpage .fhint__ok svg{width:11px;height:11px}
.fnpage .flage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:center;
  border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:14px;background:#fff}
.fnpage .flage__t{display:flex;gap:10px;font-size:14px;line-height:1.45}
.fnpage .flage__t b{font-weight:500}
.fnpage .flage__t small{display:block;margin-top:4px;font-size:12px;color:#8b8b85}
.fnpage .flage__karte{position:relative;height:110px;border-radius:12px;overflow:hidden}
.fnpage .flage__karte svg{width:100%;height:100%;display:block}
.fnpage .flage__pin{position:absolute;left:10px;top:10px;background:#fff;border-radius:99px;padding:4px 10px;font-size:11px;font-weight:500;box-shadow:0 4px 12px -6px rgba(0,0,0,.35)}
@media (max-width:620px){
  .fnpage .fguide{gap:10px;margin-bottom:18px}
  .fnpage .fguide__p{width:52px}
  .fnpage .fguide__p img{width:48px;height:48px}
  .fnpage .fguide__p figcaption{display:none}
  .fnpage .fguide__b{padding:13px 15px 14px;border-radius:16px}
  .fnpage .fguide__b::before{top:16px}
  .fnpage .flage{grid-template-columns:1fr}
}

/* Dunkle Vorschau und Ergebnis */
.fnpage .fn.fn--dunkel{background:radial-gradient(120% 80% at 80% 0%,#202020 0%,#0b0b0b 60%);color:#fff;transition:background .5s}
.fnpage .fn--dunkel .fn__head{opacity:.5}
.fnpage .fn--dunkel .fn__step,.fnpage .fn--dunkel .fn__time{color:rgba(255,255,255,.7)}
.fnpage .fvor{display:none}
.fnpage .fstep.is-vor>*:not(.fvor){display:none!important}
.fnpage .fstep.is-vor .fvor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;padding:6px 0 8px}
.fnpage .fvor__tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:6px 12px}
.fnpage .fvor__tag i{width:8px;height:8px;border-radius:50%;background:var(--lime,#f8ffa1);box-shadow:0 0 0 4px rgba(248,255,161,.18)}
.fnpage .fvor h2{font-family:var(--serif,'Cormorant Garamond',serif);font-weight:500;font-size:clamp(28px,3.2vw,40px);line-height:1.05;margin:16px 0 14px;color:#fff}
.fnpage .fvor h2 em{font-style:italic;color:var(--lime,#f8ffa1)}
.fnpage .fvor__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.fnpage .fvor__chips span{font-size:11.5px;background:rgba(255,255,255,.08);border-radius:99px;padding:5px 10px;color:rgba(255,255,255,.85)}
.fnpage .fvor__liste{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.fnpage .fvor__liste li{display:flex;gap:10px;align-items:center;font-size:13.5px;color:rgba(255,255,255,.75)}
.fnpage .fvor__liste b{color:#fff;font-weight:500}
.fnpage .fvor__liste .fhint__ok{background:var(--lime,#f8ffa1);color:#000}
.fnpage .fvor__go{width:auto}
.fnpage .fvor__klein{display:block;margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.5)}
/* Tablet-Mockup */
.fnpage .fvor__tab{background:#1b1b1b;border-radius:26px;padding:10px;box-shadow:0 40px 70px -30px #000,0 0 0 1px rgba(255,255,255,.08);
  rotate:3deg;animation:clTab 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes clTab{from{opacity:0;translate:0 30px;rotate:7deg}to{opacity:1;translate:0 0;rotate:3deg}}
.fnpage .fvor__screen{background:#fff;color:#111;border-radius:18px;padding:16px;display:grid;gap:10px}
.fnpage .fvor__kopf b{font-family:var(--serif,'Cormorant Garamond',serif);font-weight:500;font-size:24px;display:block;line-height:1}
.fnpage .fvor__kopf em{font-style:normal;background:var(--lime,#f8ffa1);padding:0 4px;border-radius:4px}
.fnpage .fvor__kopf small{display:block;font-size:10.5px;color:#8b8b85;margin-top:4px}
.fnpage .fvor__karte{border:1px solid rgba(0,0,0,.07);border-radius:12px;padding:10px 12px;font-size:11.5px}
.fnpage .fvor__karte>b{font-weight:500}
.fnpage .fvor__nr{display:inline-block;font-size:9.5px;background:#000;color:var(--lime,#f8ffa1);border-radius:5px;padding:2px 5px;margin-right:6px}
.fnpage .fvor__zahl{display:flex;align-items:center;gap:8px;margin:10px 0 8px;font-family:var(--serif,'Cormorant Garamond',serif);font-size:28px}
.fnpage .fvor__zahl i,.fnpage .fvor__mini i,.fnpage .fvor__person i{display:block;height:20px;width:150px;border-radius:6px;
  background:linear-gradient(90deg,#d9d7d0,#ecebe6,#d9d7d0);background-size:200% 100%;filter:blur(2px);animation:clGlanz 1.8s linear infinite}
@keyframes clGlanz{to{background-position:-200% 0}}
.fnpage .fvor__band{height:6px;border-radius:9px;background:linear-gradient(90deg,#eee,#e2e0d9,#eee);position:relative}
.fnpage .fvor__band i{position:absolute;left:55%;top:50%;width:14px;height:14px;border-radius:50%;background:var(--lime,#f8ffa1);border:2px solid #000;translate:-50% -50%}
.fnpage .fvor__mini{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:10px;color:#8b8b85}
.fnpage .fvor__mini i{width:56px;height:10px}
.fnpage .fvor__balken{display:grid;gap:5px;margin-top:8px}
.fnpage .fvor__balken span{display:block;height:8px;border-radius:9px;background:#e6e4dd}
.fnpage .fvor__balken span:first-child{background:#000}
.fnpage .fvor__person{display:flex;gap:10px;align-items:center;margin-top:8px}
.fnpage .fvor__person img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 12%}
.fnpage .fvor__person span{display:grid;gap:5px;flex:1}
.fnpage .fvor__person i{width:100%;height:8px}
.fnpage .fvor__person i+i{width:70%}
@media (max-width:760px){
  .fnpage .fstep.is-vor .fvor{grid-template-columns:1fr;gap:26px}
  .fnpage .fvor__tab{order:-1;rotate:-2deg;max-width:330px;margin:4px auto 0;animation-name:clTabM}
  @keyframes clTabM{from{opacity:0;translate:0 30px;rotate:-6deg}to{opacity:1;translate:0 0;rotate:-2deg}}
  .fnpage .fvor__go{width:100%;justify-content:center}
}
/* Ergebnis */
.fnpage .fn--dunkel .fdone .fstep__h,.fnpage .fn--dunkel .fdone .fstep__p{color:#fff}
.fnpage .fn--dunkel .fdone .fnext__t{color:rgba(255,255,255,.7)}
.fnpage .fn--dunkel .fdone .fnext__t b{color:#fff}
.fnpage .fn--dunkel .fdone .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.fnpage .fn--dunkel .fdone__ico{display:none}
.fnpage .ferg{text-align:left;margin-bottom:34px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.12)}
.fnpage .ferg__zahl{font-family:var(--serif,'Cormorant Garamond',serif);font-weight:500;font-size:clamp(34px,5vw,56px);line-height:1;margin:18px 0 18px;color:#fff;
  display:flex;flex-wrap:wrap;gap:.25em;align-items:baseline}
.fnpage .ferg__zahl span{color:var(--lime,#f8ffa1)}
.fnpage .ferg__band{height:8px;border-radius:9px;background:linear-gradient(90deg,rgba(248,255,161,.15),rgba(248,255,161,.6),rgba(248,255,161,.15));position:relative;margin-bottom:22px}
.fnpage .ferg__band i{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--lime,#f8ffa1);border:3px solid #0b0b0b;box-shadow:0 0 0 2px var(--lime,#f8ffa1);translate:-50% -50%}
.fnpage .ferg__fakten{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.fnpage .ferg__fakten div{background:rgba(255,255,255,.06);border-radius:14px;padding:14px 16px;font-size:12.5px;color:rgba(255,255,255,.65)}
.fnpage .ferg__fakten b{display:block;font-family:var(--serif,'Cormorant Garamond',serif);font-weight:500;font-size:24px;color:#fff;margin-bottom:2px}
.fnpage .ferg__simon{display:flex;gap:14px;align-items:flex-start;background:#fff;color:#111;border-radius:18px;padding:16px 18px;margin-top:4px}
.fnpage .ferg__simon img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 12%}
.fnpage .ferg__simon p{margin:0;font-size:13.5px;line-height:1.55;color:#3d3d39}
.fnpage .ferg__simon b{color:#000;font-weight:500}
.fnpage .ferg__simon small{display:block;margin-top:6px;font-size:11.5px;color:#8b8b85}
.fnpage .ferg__klein{margin:14px 0 0;font-size:11px;line-height:1.5;color:rgba(255,255,255,.45)}
@media (max-width:620px){.fnpage .ferg__fakten{grid-template-columns:1fr}}
/* Pop-up „Wollen Sie wirklich ohne Ihren Wert gehen?“ (einwertung.js) */
.fstop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .25s}
.fstop.is-on{opacity:1}
.fstop__hg{position:absolute;inset:0;background:rgba(10,10,10,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fstop__box{position:relative;width:min(460px,100%);background:#fff;color:#111;border-radius:22px;padding:26px 26px 24px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);translate:0 14px;scale:.97;transition:translate .3s cubic-bezier(.2,.7,.2,1),scale .3s}
.fstop.is-on .fstop__box{translate:0 0;scale:1}
.fstop__x{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;border:0;background:#f1f0ec;cursor:pointer;display:grid;place-items:center;color:#111}
.fstop__kopf{display:flex;align-items:center;gap:14px;padding-right:34px}
.fstop__kopf img{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 12%}
.fstop__kopf h2{margin:0;font-family:var(--serif,'Cormorant Garamond',serif);font-weight:500;font-size:26px;line-height:1.1}
.fstop p{margin:14px 0 20px;font-size:14.5px;line-height:1.6;color:#4e4e49}
.fstop p b{color:#000;font-weight:500}
.fstop__k{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.fstop__gehen{border:0;background:none;padding:6px 0;font:inherit;font-size:13px;color:#8b8b85;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:620px){
  .fstop{place-items:end center;padding:12px}
  .fstop__box{border-radius:20px;padding:22px 20px 20px}
  .fstop__kopf h2{font-size:23px}
  .fstop__weiter{width:100%;justify-content:center}
  .fstop__k{justify-content:center}
}
/* Abschluss im dunklen Funnel: die drei Schritte als dunkle Karten mit
   gelber Ziffer – vorher helle Karten mit weisser Schrift (unlesbar). */
.fnpage .fn--dunkel .fnext__i{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.fnpage .fn--dunkel .fnext__n{background:var(--lime,#f8ffa1)!important;color:#000!important}
.fnpage .fn--dunkel .fnext__t{color:rgba(255,255,255,.62)!important}
.fnpage .fn--dunkel .fnext__t b{color:#fff!important}
.fnpage .fn--dunkel .fdone .fnav{gap:10px;flex-wrap:wrap}
.fnpage .fn--dunkel .fdone .btn--ghost{background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important}
.fnpage .fn--dunkel .fdone .btn--ghost:hover{background:#fff;color:#000!important}
/* Begleitung dezenter: kleineres Foto, nur der Vorname, kompaktere Blase. */
.fnpage .fguide{gap:12px;margin-bottom:18px;align-items:flex-start}
.fnpage .fguide__p{width:52px}
.fnpage .fguide__p img{width:44px;height:44px;box-shadow:0 0 0 2px #fff,0 6px 14px -8px rgba(0,0,0,.4)}
.fnpage .fguide__p figcaption{display:block!important;margin-top:5px;font-size:11px;font-weight:500;color:#3d3d39}
.fnpage .fguide__b{padding:11px 15px 12px;border-radius:14px}
.fnpage .fguide__b::before{left:-5px;top:16px;width:10px;height:10px}
.fnpage .fguide__b .fstep__h{font-size:clamp(1.25rem,1.9vw,1.55rem)!important;line-height:1.15}
.fnpage .fguide__b .fstep__p{font-size:13px;line-height:1.5;margin-top:4px}
@media (max-width:620px){
  .fnpage .fguide{gap:9px}
  .fnpage .fguide__p{width:40px}
  .fnpage .fguide__p img{width:36px;height:36px}
  .fnpage .fguide__p figcaption{font-size:10px}
  .fnpage .fguide__b{padding:10px 13px 11px}
  .fnpage .fguide__b::before{top:12px}
  .fnpage .fguide__b .fstep__h{font-size:1.15rem!important}
  .fnpage .fguide__b .fstep__p{font-size:12.4px}
}
.fnpage .fguide__p figcaption{font-weight:400;color:#8b8b85;font-size:10px;line-height:1.25}
.fnpage .fguide__p figcaption b{display:block;font-weight:500;color:#3d3d39;font-size:11px}
@media (max-width:620px){.fnpage .fguide__p figcaption{font-size:9px}.fnpage .fguide__p figcaption b{font-size:10px}}