/* ---------- Schriften, selbst ausgeliefert ---------- */
/* Cormorant Garamond und Poppins, SIL Open Font License 1.1.
   Vorher von fonts.googleapis.com – damit ging bei jedem Aufruf
   die IP des Besuchers an Google. Jetzt liegen sie hier. */
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-ext-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-ext-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-ext-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-latin-ext-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-latin-ext-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-latin-ext-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-latin-ext-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-latin-ext-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}


/* ==========================================================
   CONCEPT LIVING IMMOBILIEN — Startseite
   Display: Agatho  (self-hosted, Fallback Marcellus/Cormorant)
   Text:    Jost
   ========================================================== */

/* ---- AGATHO EINBINDEN ----------------------------------
   Lizenzierte Webfont-Dateien nach /fonts/ legen, dann greifen
   die @font-face-Regeln automatisch. Bis dahin rendert der
   Fallback (Marcellus / Cormorant Garamond).
--------------------------------------------------------- */

:root{
  --black:#060606;
  --ink:#000000;
  --ink-60:#5B5B5B;
  --ink-40:#8b8b8b;
  --paper:#FFFFFF;
  --grey:#EDEBE6;
  --grey-2:#E4E1DB;
  --beige:#D6D3CD;        /* warmes Marken-Grau, wie auf der Verkaufen-Seite */
  --beige-soft:#E4E1DB;   /* hellere Variante fuer textlastige Blöcke */
  --white:#FFFFFF;
  --accent:#000000;      /* frühere Salbei-Töne, jetzt CI-Schwarz */
  --accent-deep:#000000;
  --accent-tint:#EDEBE6;
  --lime:#F8FFA1;         /* weiches Zitronengelb, wie auf der Verkaufen-Seite */
  --lime-deep:#EDF884;
  --line:rgba(0,0,0,.11);
  --line-w:rgba(255,255,255,.16);
  --hair-dark:#ffffff1f;
  --muted-on-dark:#a3a39d;
  --sans:'Century Gothic','Poppins','Questrial',-apple-system,'Segoe UI',sans-serif;

  --f-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --f-text:'Century Gothic','Poppins','Questrial',-apple-system,'Segoe UI',sans-serif;

  /* Namen aus der Über-uns-Seite, damit deren Story-Abschnitt hier
     unverändert greift. Gleiche Werte, nur anders benannt. */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --muted:#6d6d68;
  --hair:#00000014;
  --fog:#EDEBE6;
  --g-mark:url("/bilder/i-fe3c50cebc.png");
  --img-simon:url('/bilder/simon.jpg');

  --pad:clamp(20px,4.5vw,64px);
  --sec:clamp(72px,9vw,140px);
  --r:16px;
  --hdr-h:74px;
  --ease:cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-text);font-size:16px;font-weight:300;line-height:1.78;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}

h1,h2,h3.serif{font-family:var(--f-display);font-weight:500;margin:0;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,5.2vw,4.7rem);line-height:1.04}
h2{font-size:clamp(2rem,3.4vw,3.05rem);line-height:1.1}
h3{font-family:var(--f-text);font-weight:500;font-size:1.05rem;line-height:1.4;margin:0;letter-spacing:.005em}
p{margin:0}
.lede{color:var(--ink-60);max-width:54ch;font-size:1.02rem}
.dark .lede{color:#fff}

.wrap{max-width:1340px;margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec);position:relative}
.grey{background:var(--grey)}
.beige{background:var(--beige)}
.beige-soft{background:var(--beige-soft)}
.beige-soft .clip::after{background:var(--beige-soft)}
.beige .clip::after{background:var(--beige)}
.beige .collage::before{background:rgba(255,255,255,.55)}
.dark{background:var(--black);color:#fff}
.eyebrow{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:400;
  color:var(--ink-40);display:flex;align-items:center;gap:.9em;margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent);opacity:1}
.dark .eyebrow{color:rgba(255,255,255,.5)}

.sec>.wrap{position:relative;z-index:1}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:999px;border:1px solid var(--black);
  background:var(--black);color:#fff;cursor:pointer;overflow:hidden;
  font-family:var(--f-text);font-weight:400;font-size:14px;line-height:1.7;letter-spacing:.02em;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--lime);z-index:1;
  transform:translateY(101%);transition:transform .48s var(--ease);
}
.btn:hover{color:var(--ink);border-color:var(--lime)}
.btn:hover::before{transform:translateY(0)}
.btn--light{background:#fff;border-color:#fff;color:var(--black)}
.btn--light::before{background:var(--lime)}
.btn--light:hover{color:var(--ink);border-color:var(--lime)}
.btn--outline{background:transparent;color:var(--ink)}
.btn--outline::before{background:var(--lime)}
.btn--outline:hover{color:var(--ink);border-color:var(--lime)}
.btn--ghostw{background:transparent;border-color:rgba(255,255,255,.38);color:#fff}
.btn--ghostw::before{background:var(--lime)}
.btn--ghostw:hover{color:var(--ink);border-color:var(--lime)}
.btn--sm{padding:.72em 1.35em;font-size:.86rem}

.tlink{display:inline-flex;align-items:center;gap:.5em;font-size:.94rem;position:relative;padding-bottom:.25em}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.tlink svg{width:13px;height:13px;flex:none;transition:transform .4s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

.btn--float{animation:btnfloat 5.5s ease-in-out infinite;box-shadow:0 16px 34px rgba(0,0,0,.3)}
.btn--float:hover{animation-play-state:paused}
@keyframes btnfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- Bewertungs-Fußzeile ---------- */
.gfoot{position:relative;z-index:2;margin-top:clamp(22px,2.6vw,38px);padding-top:clamp(18px,2vw,28px);border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.86rem}
.gfoot__link{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45);transition:text-decoration-color .3s ease}
.gfoot__link:hover{text-decoration-color:#fff}
.gfoot__note{color:rgba(255,255,255,.62);max-width:46ch}
.gfoot__note b{display:block;color:#fff;font-weight:500;margin-bottom:.2rem}

/* ---------- WhatsApp-Button ---------- */
.wabtn{position:fixed;right:clamp(16px,2vw,30px);bottom:clamp(18px,2.4vw,34px);z-index:190;
  width:clamp(54px,4.4vw,62px);height:clamp(54px,4.4vw,62px);border-radius:50%;
  display:grid;place-items:center;background:#25D366;
  box-shadow:0 8px 22px rgba(0,0,0,.22);text-decoration:none;
  transform:translateY(22px) scale(.9);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease),box-shadow .3s ease}
.wabtn.is-show{transform:none;opacity:1}
.wabtn:hover{box-shadow:0 12px 30px rgba(0,0,0,.3)}
.wabtn svg{width:64%;height:64%;fill:#fff;display:block}

/* ---------- Scroll-Effekte ---------- */
/* Bilder: sanfter Zoom beim Reinscrollen */
.clip .ph{transform:scale(1.12);transition:transform 1.6s var(--ease)}
.clip.in .ph{transform:scale(1)}
/* Glaskarten / Mockups gleiten seitlich ein */
.vcard.rv{transform:translateY(40px) scale(.97)}
.vcard.rv.in{transform:none}
/* Sektions-Überschriften: feine Blende */
.sec h2.split-text .sp i{transition-duration:.9s}
/* Tiles im Mosaik: gestaffelt hoch */
.tile{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.tile.in{opacity:1;transform:none}
.mosaic .tile:nth-child(2){transition-delay:.12s}
.mosaic .tile:nth-child(3){transition-delay:.24s}
/* Standort-Karten: von unten, leicht gedreht */


/* Referenzen-Bühne: Seitenkarten kommen von außen */
.refstage.rv .refcard--left{transform:translateX(-60px) scale(.92) rotate(var(--tilt))}
.refstage.rv .refcard--right{transform:translateX(60px) scale(.92) rotate(var(--tilt))}
.refstage.rv .refcard--main{transform:translateY(40px) scale(.96)}
.refstage.rv.in .refcard--left{transform:scale(.92) rotate(var(--tilt))}
.refstage.rv.in .refcard--right{transform:scale(.92) rotate(var(--tilt))}
.refstage.rv.in .refcard--main{transform:none}
/* Matching-Liste: Zeilen nacheinander */
.mlist .mrow{opacity:0;transform:translateX(-14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.match.in .mlist .mrow{opacity:1;transform:none}
.match.in .mlist .mrow:nth-child(2){transition-delay:.08s}
.match.in .mlist .mrow:nth-child(3){transition-delay:.16s}
.match.in .mlist .mrow:nth-child(4){transition-delay:.24s}
.match.in .mlist .mrow:nth-child(5){transition-delay:.32s}
.match.in .mlist .mrow:nth-child(6){transition-delay:.4s}
/* Q&A-Liste: Zeilen staffeln */
.faqlist .faqq{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .4s var(--ease),padding-left .4s var(--ease)}
.faqlist.in .faqq{opacity:1;transform:none}
.faqlist.in .faqq:nth-child(2){transition-delay:.07s}
.faqlist.in .faqq:nth-child(3){transition-delay:.14s}
.faqlist.in .faqq:nth-child(4){transition-delay:.21s}
.faqlist.in .faqq:nth-child(5){transition-delay:.28s}
.faqlist.in .faqq:nth-child(6){transition-delay:.35s}
/* Kontaktformular: Felder nacheinander */
.kontakt__form.in .fgrid>div{animation:fieldin .7s var(--ease) both}
.kontakt__form.in .fgrid>div:nth-child(2){animation-delay:.06s}
.kontakt__form.in .fgrid>div:nth-child(3){animation-delay:.12s}
.kontakt__form.in .fgrid>div:nth-child(4){animation-delay:.18s}
.kontakt__form.in .fgrid>div:nth-child(5){animation-delay:.24s}
.kontakt__form.in .fgrid>div:nth-child(6){animation-delay:.3s}
@keyframes fieldin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Header: Schatten erst beim Scrollen */
.hdr{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.hdr.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}
/* Sektionen mit dunklem Hintergrund: weicher Einzug */
.sec.dark>.wrap,.sec.gsec>.wrap{transition:none}
@media (max-width:900px){
  /* Platz für den schwebenden WhatsApp-Knopf */
  .footer__bot{padding-bottom:clamp(52px,8vw,74px)}
}
@media (max-width:480px){
  .footer__top{grid-template-columns:minmax(0,1fr);gap:30px}
  .footer__bot{gap:10px 18px}
  .footer__bot .sp{margin-left:0;width:100%}
}
@media (max-width:700px){
  h1,.h2,.split-text{overflow-wrap:break-word;hyphens:auto}
  .split-text .sp{overflow:visible;max-width:100%}
  .split-text .sp i{overflow-wrap:anywhere;hyphens:auto}
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .trends{grid-template-columns:1fr}
  .trend{flex-wrap:wrap}
  .trend__v{white-space:normal}
}
/* ------------------------------------------------------------
   Unterlängen (g, y, p, q, j) dürfen nicht abgeschnitten werden.
   Der Beschnitt der Wort-Animation bekommt unten Luft; das
   negative Margin gleicht sie wieder aus, das Layout bleibt gleich.
   Der Startversatz wächst mit, damit das Wort vor der Animation
   weiterhin vollständig verdeckt ist.
   ------------------------------------------------------------ */
.split-text .sp{padding-bottom:.26em;margin-bottom:-.26em}
.split-text .sp i{transform:translateY(134%)}

html{overflow-x:clip}
body{overflow-x:clip}

@media (prefers-reduced-motion:reduce){
  .clip .ph,.tile,.loc.rv,.refstage.rv .refcard,.mlist .mrow,.faqlist .faqq{transition:none!important;opacity:1!important;transform:none!important}
  .kontakt__form.in .fgrid>div{animation:none!important}
}

/* ---------- Scroll-Fortschritt ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--lime);z-index:200}

/* ---------- Header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:130;color:#fff;
  transition:transform .5s var(--ease),background .4s ease,backdrop-filter .4s ease;
}
.hdr::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,6,.85),rgba(6,6,6,0));opacity:1;transition:opacity .4s ease}
.hdr.solid{background:rgba(6,6,6,.92);backdrop-filter:blur(16px)}
.hdr.solid::before{opacity:0}
.hdr.up{transform:translateY(-100%)}
.hdr__in{position:relative;display:flex;align-items:center;height:var(--hdr-h);gap:2rem}
.wordmark{display:block;line-height:0}
.wordmark img{width:clamp(150px,15vw,208px);height:auto;display:block}
.ftr .wordmark img{width:clamp(160px,16vw,220px)}

.nav{display:flex;align-items:center;gap:1.9rem;margin-left:auto;font-size:.93rem;font-weight:300}
.nav>*{position:relative}
.nav a,.nav__drop>button{opacity:.88;transition:opacity .25s ease}
.nav a:hover,.nav__drop:hover>button{opacity:1}
.nav__drop>button{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.4em;font-size:.93rem;font-weight:300}
.nav__drop>button svg{width:10px;height:10px;transition:transform .3s var(--ease)}
.nav__drop:hover>button svg{transform:rotate(180deg)}
.nav__menu{
  position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;
  background:var(--white);color:var(--ink);border-radius:12px;padding:.5rem;min-width:215px;
  box-shadow:0 24px 60px rgba(0,0,0,.26);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav__menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav__menu a{display:block;padding:.6em .85em;border-radius:8px;font-size:.92rem;opacity:1}
.nav__menu a:hover{background:var(--grey)}

.burger{display:none;margin-left:auto;background:none;border:0;padding:.55rem;cursor:pointer}
.burger span{display:block;width:24px;height:1.4px;background:#fff;margin:6px 0;transition:transform .4s var(--ease),opacity .25s ease}
.burger.is-open span:nth-child(1){transform:translateY(7.4px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}
.mnav{
  position:fixed;inset:0;z-index:120;background:var(--black);color:#fff;
  padding:calc(var(--hdr-h) + 2rem) var(--pad) 3rem;overflow-y:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);
}
.mnav.is-open{clip-path:inset(0 0 0 0)}
.mnav a,.mnav__t{display:block;font-size:1.35rem;padding:.38em 0;border-bottom:1px solid var(--line-w)}
.mnav .sub{font-family:var(--f-text);font-size:.98rem;opacity:.65;padding-left:1.1rem;border:0}
.mnav .btn{margin-top:2rem}
/* Mobilmenue: Gruppen zum Aufklappen */
.mnav__g{position:relative}
.mnav__t{font-family:inherit;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;background:none;border-top:0;border-left:0;border-right:0;
  color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.mnav__t i{flex:0 0 auto;width:9px;height:9px;margin-right:.3rem;opacity:.7;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s ease}
.mnav__g.is-open>.mnav__t i{transform:translateY(2px) rotate(-135deg)}
.mnav__s{max-height:0;overflow:hidden;visibility:hidden;transition:max-height .38s ease,visibility 0s linear .38s}
.mnav__g.is-open>.mnav__s{max-height:640px;padding-bottom:.5rem;visibility:visible;transition:max-height .38s ease,visibility 0s}
.mnav__s .sub{padding-top:.66em;padding-bottom:.66em}
@media (prefers-reduced-motion:reduce){.mnav__s,.mnav__t i{transition:none}}


/* ---------- Hero ---------- */
.hero{--band:clamp(104px,12vw,184px);
  position:relative;background:var(--black);color:#fff;overflow:hidden;
  padding:calc(var(--hdr-h) + clamp(48px,7vw,104px)) 0 var(--band)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--band);background:var(--paper)}
.hero__glow{
  position:absolute;top:-10%;right:-5%;width:60vw;height:60vw;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.10),transparent 62%);
}
.hero__in{position:relative;z-index:3;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:stretch}
.hero__left{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(64px,7.6vw,124px);padding-bottom:0;margin-bottom:calc(-1 * clamp(52px,6vw,86px))}
.hero h1{max-width:15ch}
.gbadge{display:flex;align-items:center;gap:.55rem;margin-bottom:clamp(4px,.5vw,9px);
  font-size:.95rem;line-height:1}
.gbadge__logo{width:22px;height:22px;flex:none;display:block}
.gbadge__stars{display:flex;gap:2px;margin-left:.15rem}
.gbadge__stars svg{width:16px;height:16px;fill:#FBBC04}
.gbadge b{font-weight:500;color:#fff;font-size:1.08rem;margin-left:.15rem}
.gbadge i{width:1px;height:1.15em;background:rgba(255,255,255,.3);margin-inline:.5rem;font-style:normal}
.gbadge span{color:#fff}

.htags{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1rem;font-size:.88rem;color:var(--ink-60)}
.htags span{display:flex;align-items:center;gap:.45em}
.htags svg{width:14px;height:14px;stroke:var(--lime);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.hclaim{margin:clamp(16px,2vw,26px) 0 0;max-width:52ch;font-size:clamp(.84rem,.92vw,.94rem);line-height:1.5;text-align:left;color:#fff}
.hbullets{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem;max-width:46ch}
.hbullets li{display:flex;align-items:flex-start;gap:.75rem;font-size:.98rem;color:#fff}
.hbullets svg{width:18px;height:18px;flex:none;margin-top:.22em;stroke:var(--lime);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.hero__label{margin-top:0;font-size:.98rem;font-weight:300;letter-spacing:.01em}
.hero__search{
  margin-top:1rem;background:var(--white);border-radius:var(--r);padding:12px;
  display:flex;gap:10px;box-shadow:0 24px 52px rgba(0,0,0,.34);
}
.hero__search .field{flex:1;min-width:0;display:flex;align-items:center;gap:.75em;border:1px solid var(--line);border-radius:11px;padding:0 1.1em;transition:border-color .3s ease}
.hero__search .field:focus-within{border-color:var(--black)}
.hero__search .field svg{width:16px;height:16px;color:var(--ink-40);flex:none}
.hero__search input{flex:1;min-width:0;border:0;background:none;padding:1.05em 0;font-family:inherit;font-weight:300;font-size:1rem;color:var(--ink)}
.hero__search input::placeholder{color:var(--ink-40)}
.hero__search input:focus{outline:none}
.hero__media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/4.35;margin-right:calc(-1 * clamp(14px,3.4vw,52px));margin-bottom:calc(-1 * clamp(58px,7.5vw,124px));box-shadow:0 34px 64px rgba(0,0,0,.42)}
.hero__scroll{
  position:absolute;left:var(--pad);bottom:clamp(84px,9.6vw,146px);z-index:4;
  display:flex;align-items:center;gap:.7em;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.hero__scroll i{display:block;width:1px;height:34px;background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Bilder — aktuell überall dasselbe Motiv, später objektweise ersetzen */
.ph{position:relative;width:100%;height:100%;overflow:hidden;
  background:var(--grey-2) url(/bilder/i-54a4c8e6a7.jpg) center/cover no-repeat}
.ph::after{content:none}
.ph--1,.ph--2,.ph--3,.ph--4,.ph--5,.ph--6{background-position:center}
.ph--hero{background-image:url(/bilder/i-3c9eda41d9.jpg);background-position:center}
.ph--person{background-image:url(/bilder/i-470ce453b2.jpg);background-position:center}
.ph--haus{background-image:url(/bilder/i-0071504d3e.jpg);background-position:center}
.ph--beratung{background-image:url(/bilder/i-b6e44d4f8f.jpg);background-position:center}
.ph--sel1{background-image:url(/bilder/i-3a2e633e74.jpg);background-position:center}
.ph--sel2{background-image:url(/bilder/i-9790bf96ee.jpg);background-position:center}
.ph--sel3{background-image:url(/bilder/i-3b2f1afa89.jpg);background-position:center}
.ph--ref1{background-image:url('/bilder/ref-neubau-dachterrasse.jpg');background-position:center}
.ph--simon{background-image:url('/bilder/simon.jpg');background-position:center 22%}
.ph--kontakt{background-image:url(/bilder/kontakt-beraterin.jpg);background-position:center}
.ph--wohn{background-image:url(/bilder/i-eda196590c.jpg);background-position:center}
.ph--ipad{background-image:url(/bilder/i-f882438184.jpg);background-position:center}
.ph--iphone{background-image:url(/bilder/i-d993786319.jpg);background-position:center}
.ph--kamera{background-image:url(/bilder/i-4a6ca4f402.jpg);background-position:center}
.ph--ref2{background-image:url('/bilder/ref-wohnhaus-garten.jpg');background-position:center}
.ph--ref3{background-image:url('/bilder/ref-wohnung-leer.jpg');background-position:center}
.ph--ref4{background-image:url('/bilder/ref-landhaus-holz.jpg');background-position:center}
.ph--ref5{background-image:url('/bilder/ref-penthouse.jpg');background-position:center}
.ph--ref6{background-image:url('/bilder/ref-zweifamilienhaus.jpg');background-position:center}
.ph--ref7{background-image:url('/bilder/ref-wohnung-erker.jpg');background-position:center}
.ph--ref8{background-image:url('/bilder/ref-wohnanlage.jpg');background-position:center}
.ph--ref9{background-image:url('/bilder/ref-haus-waldrand.jpg');background-position:center}
.ph--ref11{background-image:url('/bilder/ref-mfh-muenchen.jpg');background-position:center}
.ph--ref12{background-image:url('/bilder/ref-wohnung-dachblick.jpg')}
.ph--ref13{background-image:url('/bilder/ref-anlage-erker.jpg')}
.ph--ref14{background-image:url('/bilder/ref-haus-dachterrasse.jpg')}
.ph--ref15{background-image:url('/bilder/ref-wohnkueche.jpg')}
.ph--ref16{background-image:url('/bilder/ref-haus-abend.jpg')}
.ph--ref17{background-image:url('/bilder/ref-holzhaus-winter.jpg')}

/* ---------- Kennzahlen-Band ---------- */
/* Salbei-Icon mit Puls und Linien-Aufbau */
.ic{position:relative;width:58px;height:54px;flex:none}
.ic::before{
  content:"";position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;
  background:var(--accent-tint);transition:transform .55s var(--ease),background .55s var(--ease);
}
.ic svg{
  position:absolute;right:0;bottom:0;z-index:2;width:46px;height:46px;
  stroke:var(--ink);fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .5s var(--ease);
}
.ic svg *{stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset 1.3s var(--ease)}
.in .ic svg *,.ic.in svg *{stroke-dashoffset:0}

/* ---------- Section-Kopf ---------- */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(30px,3.6vw,52px)}
.head h2{max-width:20ch}

/* ---------- Objekt-Slider ---------- */
.rail{display:flex;gap:clamp(14px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 clamp(258px,24vw,340px);scroll-snap-align:start}
.card__img{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;margin-bottom:1.1rem}
.card__img .ph{transition:transform .9s var(--ease)}
.card:hover .card__img .ph{transform:scale(1.06)}
.card__meta{font-size:.85rem;color:var(--ink-40);letter-spacing:.01em}
.card h3{margin:.45rem 0 .4rem;font-size:1rem;font-weight:400}
.card__facts{font-size:.87rem;color:var(--ink-60)}
.ctrl{display:flex;gap:.5rem;flex:none}
.ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;display:grid;place-items:center;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.ctrl button:hover{background:var(--black);color:#fff;border-color:var(--black)}
.dark .ctrl button{border-color:var(--line-w);color:#fff}
.dark .ctrl button:hover{background:#fff;color:var(--black);border-color:#fff}

/* ---------- Selected (Mosaik) ---------- */
.selected__h2{text-align:center;max-width:30ch;margin:0 auto clamp(28px,3.4vw,50px)}
.mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:0;height:clamp(470px,54vw,680px);border-radius:var(--r);overflow:hidden}
.tile{position:relative;overflow:hidden;display:block}
.tile:first-child{grid-row:span 2}
.tile .ph{transition:transform 1s var(--ease)}
.tile:hover .ph{transform:scale(1.05)}
.tile__txt{position:absolute;inset:auto 0 0 0;padding:clamp(18px,2vw,32px);color:#fff;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.45) 55%,transparent)}
.tile__meta{font-size:.85rem;color:#fff;margin-bottom:.15rem}
.tile__title{font-family:var(--f-display);font-weight:500;font-size:clamp(1.2rem,1.8vw,1.6rem);line-height:1.16}

/* ---------- Über uns ---------- */
.about-split{grid-template-columns:.9fr 1.1fr;align-items:center}
.figure--sm{width:80%;margin-left:auto;margin-right:auto}
.co--ic{width:clamp(44px,4vw,62px);height:clamp(44px,4vw,62px);border-radius:50%;background:var(--lime);display:grid;place-items:center;box-shadow:0 14px 30px rgba(0,0,0,.13)}
.co--ic svg{width:46%;height:46%;stroke:var(--black);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.who{display:flex;align-items:center;gap:.9rem;margin-top:clamp(22px,2.4vw,34px)}
.who__ava{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.who__ava .ph{display:block;width:100%;height:100%;background-position:center 15%}
.who__txt b{display:block;font-weight:500}
.who__txt i{font-style:normal;font-size:.88rem;color:var(--ink-60)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,32px);
  margin-top:clamp(26px,3vw,42px);padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line);max-width:30rem}
.stat b{display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(1.8rem,2.8vw,2.6rem);line-height:1}
.stat span{display:block;font-size:.88rem;color:var(--ink-60);margin-top:.4rem}
@keyframes logoslide{to{transform:translateX(-33.333%)}}

/* ---------- Käufer-Matching-Collage ---------- */
.match__text{padding-left:clamp(0px,3.4vw,58px)}
.match{position:relative;aspect-ratio:1/1.02}
.match__ring{position:absolute;border-radius:50%;overflow:hidden;box-shadow:0 26px 56px rgba(0,0,0,.16);border:7px solid var(--white)}
.match__ring--a{left:13%;top:6%;width:39%;aspect-ratio:1;z-index:4}
.match__ring--b{right:8%;top:10%;width:39%;aspect-ratio:1;z-index:3}
.match__spark{position:absolute;left:45%;top:1%;width:18%;z-index:1;opacity:.6}
.match__spark svg{width:100%;height:auto;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round}

.match__badge{
  position:absolute;left:27%;top:22%;z-index:6;display:flex;align-items:center;gap:.75rem;
  background:var(--white);border-radius:999px;padding:.6rem 1.35rem .6rem .6rem;
  box-shadow:0 20px 46px rgba(0,0,0,.20);
}
.match__check{width:clamp(30px,3.4vw,46px);height:clamp(30px,3.4vw,46px);border-radius:50%;background:var(--lime);display:grid;place-items:center;flex:none}
.match__check svg{width:56%;height:56%;stroke:var(--black);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.match__badge b{display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(17px,2.2vw,34px);line-height:1}
.match__badge small{display:block;font-size:clamp(8px,.72vw,11.5px);color:var(--ink-40);letter-spacing:.04em;margin-top:.2em}

.mlist{
  position:absolute;left:2%;right:-4%;bottom:0;z-index:1;background:var(--white);
  border-radius:clamp(14px,1.5vw,20px);overflow:hidden;
  box-shadow:0 30px 66px rgba(0,0,0,.15),0 3px 10px rgba(0,0,0,.05);
  font-size:clamp(7px,.66vw,10.5px);border:1px solid #E7E7E4;
}
.mbar{display:flex;align-items:center;gap:.7em;padding:.85em 1.1em;background:#F6F6F4;border-bottom:1px solid #E7E7E4}
.mbar__dots{display:flex;gap:.4em}
.mbar__dots i{width:.62em;height:.62em;border-radius:50%;background:#DDD}
.mbar__dots i:nth-child(1){background:#FF5F57}
.mbar__dots i:nth-child(2){background:#FEBC2E}
.mbar__dots i:nth-child(3){background:#28C840}
.mbar__title{font-weight:500;color:var(--ink)}
.mbar__live{margin-left:auto;display:flex;align-items:center;gap:.45em;background:#E8F1FE;color:#1D64D8;
  border-radius:99px;padding:.35em .75em;font-weight:500}
.mbar__live em{width:.5em;height:.5em;border-radius:50%;background:#1D64D8;font-style:normal;animation:pulse 2.2s ease-in-out infinite}
.mhead{display:grid;grid-template-columns:2.3em 1.5fr 1.25fr 5.4em;gap:clamp(6px,.8vw,14px);align-items:center;
  padding:.7em 1.1em;color:var(--ink-40);letter-spacing:.06em;text-transform:uppercase;font-size:.82em;border-bottom:1px solid #EFEFEC}
.mrow{display:grid;grid-template-columns:2.3em 1.5fr 1.25fr 5.4em;gap:clamp(6px,.8vw,14px);align-items:center;
  padding:clamp(8px,.85vw,13px) 1.1em;transition:background .3s var(--ease)}
.mrow+.mrow{border-top:1px solid #F2F2EF}
.mrow:hover{background:#FAFAF8}
.mrow__ava{width:2.3em;height:2.3em;border-radius:9px;display:grid;place-items:center;font-weight:600;font-size:.92em}
.mrow__who b{display:block;font-weight:500;line-height:1.25}
.mrow__who i{font-style:normal;color:var(--ink-40);font-size:.92em}
.mrow__match{display:flex;align-items:center;gap:.7em}
.mrow__bar{flex:1;height:6px;border-radius:99px;background:#EDEDEA;overflow:hidden}
.mrow__bar i{display:block;height:100%;border-radius:99px;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .2s}
.match.in .mrow__bar i{transform:scaleX(var(--w,1))}
.mrow__pct{min-width:2.6em;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.mtagx{justify-self:end;border-radius:99px;padding:.4em .7em;font-weight:500;white-space:nowrap;font-size:.92em}
.is-blue .mrow__ava{background:#E8F1FE;color:#1D64D8}
.is-blue .mrow__bar i{background:#3B82F6}
.is-blue .mrow__pct{color:#1D64D8}
.is-blue .mtagx{background:#E8F1FE;color:#1D64D8}
.is-yellow .mrow__ava{background:#FFF6DA;color:#9A7400}
.is-yellow .mrow__bar i{background:#F5C518}
.is-yellow .mrow__pct{color:#9A7400}
.is-yellow .mtagx{background:#FFF6DA;color:#9A7400}
.is-red .mrow__ava{background:#FDEAEA;color:#C2352F}
.is-red .mrow__bar i{background:#EF4444}
.is-red .mrow__pct{color:#C2352F}
.is-red .mtagx{background:#FDEAEA;color:#C2352F}
.mrow--hit{background:#F3F8FF}
.mrow--hit:hover{background:#EDF4FF}
.mfoot{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.8em 1.1em;background:#FAFAF8;border-top:1px solid #EFEFEC;color:var(--ink-40)}
.mfoot b{color:var(--ink);font-weight:500}

/* ---------- schwebende Karten ---------- */
.co{position:absolute;z-index:6;box-shadow:0 18px 40px rgba(0,0,0,.12)}
.co--float{animation:bob 7s ease-in-out infinite}
.co:nth-of-type(2n){animation-delay:-2.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.co--stat{border-radius:clamp(14px,1.6vw,22px);padding:clamp(12px,1.4vw,22px) clamp(14px,1.6vw,26px);text-align:center;background:var(--white)}
.co--stat small{display:block;font-size:clamp(9px,.8vw,13px);line-height:1.3;color:var(--ink-60)}
.co--stat b{display:block;font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.8vw,46px);line-height:1.05;margin-top:.15em}
.co--dark{background:var(--black);color:#fff}
.co--dark small{color:#fff}

/* ---------- Bilder, die über die Sektionsgrenze laufen ---------- */
.bleed{position:relative;z-index:4}
.bleed__img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;box-shadow:0 44px 90px rgba(0,0,0,.30);margin-bottom:calc(-1 * clamp(60px,8vw,150px))}
.bleed--up .bleed__img{margin-bottom:0;margin-top:calc(-1 * clamp(120px,14vw,250px))}
.bleed__img::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.2) 52%,transparent)}
.bleed .co{position:absolute}

/* ---------- Bewertungskarte über dem Bild ---------- */
.vcard-par{
  position:absolute;left:14%;right:-7%;bottom:calc(-1 * clamp(60px,8vw,150px) + clamp(18px,2vw,34px));
  z-index:7;will-change:transform;
}
.vcard-par--in{left:17%;right:5%;bottom:5%}
.vcard--sm{font-size:clamp(7px,.66vw,11px);padding:clamp(12px,1.35vw,20px);border-radius:clamp(14px,1.5vw,20px)}
.vcard--sm .vitem__img{width:3em;height:2.3em}
.vcard--sm .vmatch{gap:.7em;margin-top:.9em}
.vcard--sm .vfoot{margin-top:.9em;padding-top:.8em}
.vcard{
  position:relative;color:#fff;
  background:linear-gradient(150deg,rgba(18,18,18,.5),rgba(18,18,18,.34) 46%,rgba(18,18,18,.44));
  -webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%);
  border:1px solid rgba(255,255,255,.24);
  border-radius:clamp(16px,1.9vw,26px);padding:clamp(16px,1.8vw,26px);
  box-shadow:0 34px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(255,255,255,.08);
  font-size:clamp(8px,.78vw,13px);line-height:1.5;overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease);
}
.vcard:hover{
  transform:translateY(-8px) scale(1.015);border-color:rgba(255,255,255,.42);
  box-shadow:0 50px 104px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.12);
}
.vcard:hover::before{transform:rotate(12deg) translateX(24%);opacity:.9}
.vcard::before{content:"";position:absolute;left:-30%;top:-60%;width:80%;height:180%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.16),transparent 62%);transform:rotate(12deg);transition:transform .9s var(--ease),opacity .9s var(--ease)}
.vhead{position:relative;display:flex;align-items:center;gap:.9em}
.vhead__thumb{width:3.4em;height:2.6em;border-radius:8px;overflow:hidden;flex:none}
.vhead__thumb .ph{display:block;width:100%;height:100%}
.vhead b{display:block;font-weight:500}
.vhead i{font-style:normal;color:rgba(255,255,255,.5);font-size:.9em}
.vlive{margin-left:auto;display:flex;align-items:center;gap:.55em;background:rgba(255,255,255,.14);border-radius:99px;padding:.4em .8em;color:rgba(255,255,255,.8);font-size:.9em;white-space:nowrap}
.vlive em{display:block;width:.55em;height:.55em;border-radius:50%;background:#3DFF6E;box-shadow:0 0 0 3px rgba(61,255,110,.25),0 0 10px rgba(61,255,110,.9);font-style:normal;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

.vchips{position:relative;display:flex;gap:.45em;flex-wrap:wrap;margin:1.1em 0}
.vchip{background:rgba(255,255,255,.14);border-radius:99px;padding:.42em .85em;color:rgba(255,255,255,.72);white-space:nowrap}

.vtop{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:1em}
.vlabel{color:rgba(255,255,255,.5);font-size:.95em}
.vprice{font-family:var(--f-text);font-weight:600;font-size:clamp(22px,2.7vw,44px);line-height:1.02;margin-top:.15em}
.vseg{display:flex;background:rgba(255,255,255,.14);border-radius:99px;padding:.22em;flex:none}
.vseg span{padding:.42em .9em;border-radius:99px;color:rgba(255,255,255,.55);white-space:nowrap}
.vseg span.on{background:#fff;color:var(--black)}

.vchart{position:relative;z-index:2;margin-top:1.2em;height:clamp(54px,7vw,110px)}
.vchart svg{width:100%;height:100%;display:block;overflow:visible}
.vchart .area{fill:url(#vg);opacity:0;transition:opacity 1.1s var(--ease) .5s}
.vchart .line{fill:none;stroke:#7FD4FF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.6s var(--ease) .2s}
.in .vchart .area{opacity:1}
.in .vchart .line{stroke-dashoffset:0}
.vchart .dot{fill:#7FD4FF;opacity:0;transition:opacity .5s var(--ease) 1.4s}
.in .vchart .dot{opacity:1}
.vchart .halo{fill:rgba(127,212,255,.32);opacity:0;transition:opacity .5s var(--ease) 1.4s}
.in .vchart .halo{opacity:1}
.vaxis{display:flex;justify-content:space-between;color:rgba(255,255,255,.4);margin-top:.7em}

/* Trefferliste in der Glaskarte */
.vmatch{position:relative;z-index:2;display:flex;flex-direction:column;gap:.85em;margin-top:1.1em}
.vitem{display:flex;align-items:center;gap:.85em}
.vitem__img{width:3.4em;height:2.6em;border-radius:8px;overflow:hidden;flex:none}
.vitem__img .ph{display:block;width:100%;height:100%}
.vitem__txt{min-width:0;flex:1}
.vitem__txt b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vitem__txt i{font-style:normal;color:rgba(255,255,255,.5);font-size:.9em}
.vitem__pct{flex:none;text-align:right;width:5.6em}
.vitem__pct span{font-family:var(--f-text);font-weight:600;font-size:1.5em;line-height:1}
.vbarline{height:2px;border-radius:2px;background:rgba(255,255,255,.18);margin-top:.45em;overflow:hidden}
.vbarline i{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .4s}
.in .vbarline i{transform:scaleX(var(--w,1))}
.vfoot{position:relative;z-index:2;display:flex;align-items:center;gap:.6em;margin-top:1.2em;padding-top:1em;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
.vfoot svg{width:1.2em;height:1.2em;stroke:#fff;fill:none;stroke-width:1.4}

/* ---------- Bildfigur mit schwebenden Karten ---------- *//* Trefferliste in der Glaskarte */
.vmatch{position:relative;z-index:2;display:flex;flex-direction:column;gap:.85em;margin-top:1.1em}
.vitem{display:flex;align-items:center;gap:.85em}
.vitem__img{width:3.4em;height:2.6em;border-radius:8px;overflow:hidden;flex:none}
.vitem__img .ph{display:block;width:100%;height:100%}
.vitem__txt{min-width:0;flex:1}
.vitem__txt b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vitem__txt i{font-style:normal;color:rgba(255,255,255,.5);font-size:.9em}
.vitem__pct{flex:none;text-align:right;width:5.6em}
.vitem__pct span{font-family:var(--f-text);font-weight:600;font-size:1.5em;line-height:1}
.vbarline{height:2px;border-radius:2px;background:rgba(255,255,255,.18);margin-top:.45em;overflow:hidden}
.vbarline i{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .4s}
.in .vbarline i{transform:scaleX(var(--w,1))}
.vfoot{position:relative;z-index:2;display:flex;align-items:center;gap:.6em;margin-top:1.2em;padding-top:1em;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
.vfoot svg{width:1.2em;height:1.2em;stroke:#fff;fill:none;stroke-width:1.4}

/* ---------- Bildfigur mit schwebenden Karten ---------- */
.figure{position:relative}
.figure__img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;box-shadow:0 36px 78px rgba(0,0,0,.20)}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,84px);align-items:center}
.split__media{border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;position:relative}
.split__media--wide{aspect-ratio:4/3}
.split__stamp{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff}
.split__stamp small{display:block;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;opacity:.8}
.split__stamp span{font-family:var(--f-text);font-weight:600;font-size:clamp(2.1rem,3.9vw,3.5rem);line-height:1.12}
.split h2{margin-bottom:1.2rem}
.split .btn{margin-top:2.1rem}
.split--flip .split__media{order:2}

/* ---------- Sticky-Stapel Vorteile ---------- */
/* ---------- Verkaufsablauf als Schritt-Slider ---------- */


/* ---------- Verkaufsablauf ---------- */
.steps__head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,72px);align-items:end}
.steps__head h2{max-width:20ch}
.steps__aside{padding-bottom:.35rem}
.steps__aside .btn{margin-top:clamp(18px,2vw,28px)}
.steps__aside small{display:block;margin-top:.9rem;font-size:.84rem;color:#fff;opacity:.65}

.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px);margin-top:clamp(44px,5.2vw,86px)}
.stepcard{transition:transform .55s var(--ease)}
.steps3 .stepcard:nth-child(2){padding-top:clamp(18px,2.8vw,54px)}
.stepcard:hover{transform:translateY(-8px)}

.stepcard__img{position:relative;border-radius:clamp(14px,1.6vw,22px);overflow:hidden;aspect-ratio:4/3.2;box-shadow:0 26px 60px rgba(0,0,0,.45)}
.stepcard__img .ph{transition:transform 1s var(--ease)}
.stepcard:hover .stepcard__img .ph{transform:scale(1.06)}
.stepcard__no{
  position:absolute;left:0;bottom:0;z-index:4;background:var(--black);
  border-top-right-radius:14px;padding:.55rem 1.1rem .3rem .1rem;
  font-family:var(--f-text);font-weight:600;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1;color:var(--lime);
}
.stepcard h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.18;margin:clamp(18px,2vw,28px) 0 .7rem}
.stepcard p{color:#fff;font-size:.95rem;hyphens:auto;-webkit-hyphens:auto}

/* ---------- Verkaufsablauf als Schritt-Slider ---------- */
/* ---------- Makler ---------- */
.broker{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,4.5vw,76px);align-items:center}
.broker__media{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4}
.broker__q{font-weight:400;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.24;margin-bottom:1.7rem}
.broker__name{font-weight:500}
.broker__role{color:var(--ink-40);font-size:.94rem}
.broker__row{display:flex;flex-wrap:wrap;gap:.8rem 2.2rem;margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:.96rem}

/* ---------- Bewertungen ---------- */
/* ---- Google-Bewertungen ---- */
.gsec{background:#000;color:#fff;overflow:hidden;position:relative;padding-block:clamp(38px,4.2vw,64px)}
.ghead{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto}
.ghead .eyebrow{justify-content:center}
.ghead h2{font-size:clamp(1.6rem,2.8vw,2.5rem);margin-bottom:clamp(14px,1.6vw,24px)}
.gscore{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,30px);flex-wrap:wrap}
.gscore__logo{width:clamp(26px,2.6vw,36px);height:clamp(26px,2.6vw,36px)}
.gscore__num{font-family:var(--f-display);font-weight:500;font-size:clamp(2.8rem,5vw,4.2rem);line-height:.88}
.gscore__meta{text-align:left}
.gscore__stars{display:flex;gap:.3rem;margin-bottom:.5rem}
.gscore__stars svg{width:17px;height:17px;fill:#FBBC04;opacity:0;transform:scale(.4) rotate(-25deg);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.ghead.in .gscore__stars svg{opacity:1;transform:none}
.ghead.in .gscore__stars svg:nth-child(2){transition-delay:.09s}
.ghead.in .gscore__stars svg:nth-child(3){transition-delay:.18s}
.ghead.in .gscore__stars svg:nth-child(4){transition-delay:.27s}
.ghead.in .gscore__stars svg:nth-child(5){transition-delay:.36s}
.gscore__meta span{color:rgba(255,255,255,.62);font-size:.95rem}
.ghead .btn{margin-top:clamp(14px,1.6vw,22px)}

/* Ohne Verlauf an den Rändern: die Bewertungen laufen klar bis zum Rand. */
.revwrap{position:relative;z-index:2;margin-top:clamp(18px,2vw,28px);overflow:hidden}
.revwrap+.revwrap{margin-top:10px}
.revtrack{display:flex;gap:10px;width:max-content;animation:revslide 70s linear infinite}
.revtrack--back{animation-direction:reverse;animation-duration:84s}
.revwrap:hover .revtrack{animation-play-state:paused}
@keyframes revslide{to{transform:translateX(-50%)}}
.rev{
  flex:0 0 clamp(238px,21vw,300px);margin:0;border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  padding:clamp(16px,1.5vw,22px);display:flex;flex-direction:column;gap:.7rem;
  transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.rev:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.075)}
.rev__top{display:flex;align-items:center;gap:.75rem}
.rev__ava{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;
  display:grid;place-items:center;font-size:1rem;font-weight:600;flex:none}
.rev__who{min-width:0;flex:1}
.rev__who b{display:block;font-weight:500;font-size:.9rem}
.rev__who i{font-style:normal;font-size:.78rem;color:rgba(255,255,255,.5)}
.rev__g{width:18px;height:18px;flex:none}
.rev__stars{display:flex;gap:.15rem}
.rev__stars svg{width:13px;height:13px;fill:#FBBC04}
.rev p{color:#fff;font-size:.89rem;line-height:1.62;flex:1;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rev{min-height:192px}

/* ---------- Referenzen ---------- */
.refs h2{text-align:center;max-width:22ch;margin:0 auto}
.refs__sub{text-align:center;max-width:62ch;margin:clamp(12px,1.4vw,20px) auto 0;font-size:.98rem}
.refs .wrap{padding-top:0}
.refstage{position:relative;display:grid;grid-template-columns:1fr 1.9fr 1fr;align-items:center;overflow:visible;
  gap:clamp(10px,1.4vw,24px);margin-top:clamp(10px,1.4vw,22px);min-height:clamp(320px,42vw,560px)}
.refcard{position:relative;overflow:hidden;border-radius:clamp(14px,1.6vw,22px);
  box-shadow:0 30px 64px rgba(0,0,0,.26),0 8px 18px rgba(0,0,0,.12);transition:transform .9s var(--ease),opacity .9s var(--ease),box-shadow .9s var(--ease)}
.refcard .ph{transition:transform 1s var(--ease)}
.refcard--side{aspect-ratio:3/4.2;opacity:.78;transform:scale(.92) rotate(var(--tilt,0deg));cursor:pointer;z-index:1}
.refcard--side:hover{opacity:1;transform:scale(.95) rotate(var(--tilt,0deg))}
.refcard--left{--tilt:-3.5deg;width:100%}
.refcard--right{--tilt:3.5deg;width:100%}
.refcard--main{aspect-ratio:16/14;z-index:3;box-shadow:0 50px 100px rgba(0,0,0,.38),0 14px 30px rgba(0,0,0,.16)}
/* Wisch-Übergang */
.refstage .refcard{transform-origin:center center;transition:transform .75s cubic-bezier(.76,0,.24,1),opacity .75s cubic-bezier(.76,0,.24,1),box-shadow .75s var(--ease)}
.refstage.slide-next.slide-next.slide-next .refcard--main{transform:translateX(-76%) scale(.56) rotate(-3.5deg);opacity:.78}
.refstage.slide-next.slide-next.slide-next .refcard--right{transform:translateX(-150%) scale(1.42) rotate(0deg);opacity:1;z-index:5}
.refstage.slide-next.slide-next.slide-next .refcard--left{transform:translateX(-70%) scale(.8) rotate(-6deg);opacity:0}
.refstage.slide-prev.slide-prev.slide-prev .refcard--main{transform:translateX(76%) scale(.56) rotate(3.5deg);opacity:.78}
.refstage.slide-prev.slide-prev.slide-prev .refcard--left{transform:translateX(150%) scale(1.42) rotate(0deg);opacity:1;z-index:5}
.refstage.slide-prev.slide-prev.slide-prev .refcard--right{transform:translateX(70%) scale(.8) rotate(6deg);opacity:0}
.refstage.no-anim .refcard{transition:none}
.refcard--main .refcard__txt{transition:opacity .35s ease}
.refstage.slide-next.slide-next .refcard__txt,.refstage.slide-prev.slide-prev .refcard__txt{opacity:0}
.refcard__label{
  position:absolute;right:0;top:13%;z-index:4;background:var(--black);color:#fff;
  padding:.7em 1.35em;border-radius:10px 0 0 10px;font-size:.86rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;line-height:1;box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.refcard--side .refcard__label{font-size:.7rem;padding:.55em 1em}
.refcard__txt{position:absolute;inset:auto 0 0 0;padding:clamp(16px,1.7vw,24px);color:#fff;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.35) 55%,transparent)}
.refcard__meta{font-size:.84rem;margin-bottom:.35rem}
.refcard__title{font-family:var(--f-display);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.18}
.refcard--main .refcard__title{font-size:clamp(1.25rem,1.9vw,1.75rem)}
.refcard--side .refcard__txt{display:none}
.refnav{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:clamp(22px,2.4vw,34px)}
.refnav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--white);cursor:pointer;color:var(--ink);display:grid;place-items:center;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.refnav button:hover{background:var(--black);color:#fff;border-color:var(--black)}
.refnav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.refdots{display:flex;justify-content:center;gap:.5rem;margin-inline:.6rem}
/* Der Punkt bleibt so gross, wie er aussieht; die Trefferflaeche darunter
   ist 16x44 – genau der Abstand zum Nachbarn, also ohne Ueberlappung. */
.refdots button{position:relative}
.refdots button::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:44px;transform:translate(-50%,-50%)}
.refdots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--grey-2);transition:background .35s var(--ease),transform .35s var(--ease)}
.refdots button.on{background:var(--ink);transform:scale(1.25)}
/* Auf dem Telefon sind 16 Punkte keine Bedienung, sondern eine Anzeige.
   Also werden sie zur Fortschrittsleiste: volle Breite, nichts laeuft aus
   dem Bild, und jedes Segment laesst sich treffen. */
@media (max-width:760px){
  .refnav{gap:.6rem}
  .refdots{flex:1 1 auto;min-width:0;gap:4px;margin-inline:0}
  .refdots button{flex:1 1 0;width:auto;height:3px;border-radius:2px}
  .refdots button.on{transform:none}
  .refdots button::after{left:0;right:0;width:auto;height:36px;transform:translateY(-50%)}
}

/* ---------- Blog / Blog ---------- */
.ph--altbau{background-image:url(/bilder/i-64ccbb8453.jpg);background-position:center}
/* ---- Blog: Themen-Spalten ---- */
.tipgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,26px);margin-top:clamp(26px,3vw,44px)}
.tipcard{display:flex;flex-direction:column;background:var(--white);border-radius:clamp(12px,1.2vw,18px);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tipcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.10)}
.tipcard__img{display:block;position:relative;aspect-ratio:16/11;overflow:hidden}
.tipcard__img .ph{transition:transform 1.1s var(--ease)}
.tipcard:hover .tipcard__img .ph{transform:scale(1.05)}
.tiplist{list-style:none;margin:0;padding:clamp(16px,1.5vw,22px) clamp(16px,1.5vw,24px) clamp(12px,1.1vw,16px)}
#blog{padding-bottom:clamp(44px,4.6vw,76px)}
.tiplist li+li{margin-top:.42rem}
.tiplist a{display:inline-block;font-size:.95rem;line-height:1.35;color:var(--ink);text-decoration:none;transition:opacity .3s var(--ease)}
.tiplist a::after{content:"";display:block;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.tiplist a:hover{opacity:.55}
.tiplist a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Kontaktformular ---------- */
.kontakt{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;margin-top:clamp(34px,4vw,64px)}
.kontakt__img{border-radius:clamp(14px,1.6vw,22px);overflow:hidden;aspect-ratio:3/4;box-shadow:0 30px 66px rgba(0,0,0,.16)}
.kontakt__form{
  background:var(--white);border-radius:clamp(16px,1.8vw,24px);padding:clamp(26px,2.8vw,44px);
  box-shadow:0 34px 80px rgba(0,0,0,.12);margin-left:clamp(-90px,-6vw,-30px);position:relative;z-index:2;
}
.kontakt__form h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.15}
.kontakt__form>p{color:var(--ink-40);margin-bottom:clamp(20px,2.2vw,32px);font-size:.95rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.4vw,20px)}
.fgrid .full{grid-column:1/-1}
.field-l{display:block;font-size:.86rem;margin-bottom:.45rem;color:var(--ink)}
.field-l span{color:var(--ink-40)}
.kontakt input[type=text],.kontakt input[type=email],.kontakt input[type=tel],.kontakt select,.kontakt textarea{
  width:100%;border:1px solid var(--line);border-radius:10px;background:var(--white);
  padding:.85em 1em;font-family:inherit;font-weight:300;font-size:.96rem;color:var(--ink);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.kontakt textarea{min-height:120px;resize:vertical}
.kontakt select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-40) 50%),linear-gradient(135deg,var(--ink-40) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.kontakt :is(input,select,textarea):focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.fcheck{display:flex;gap:.7rem;align-items:flex-start;font-size:.83rem;color:var(--ink-60);line-height:1.55;margin-top:1rem}
.fcheck input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:#000}
.fcheck a{text-decoration:underline;text-underline-offset:2px}
.kontakt .btn{width:100%;margin-top:clamp(20px,2.2vw,32px)}

/* ---------- Blog ---------- */
.guides{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(30px,3.6vw,52px)}
.guide{transition:transform .55s var(--ease)}
.guide:hover{transform:translateY(-6px)}
.guide__img{aspect-ratio:16/10;overflow:hidden;border-radius:var(--r)}
.guide__img .ph{transition:transform .9s var(--ease)}
.guide:hover .guide__img .ph{transform:scale(1.05)}
.guide ul{list-style:none;margin:0;padding:1.4rem 0 0;display:flex;flex-direction:column;gap:.75rem;font-size:.94rem}
.guide ul a{position:relative}
.guide ul a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.guide ul a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Fragen & Antworten ---------- */
.faqgrid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(30px,4.5vw,84px);align-items:center}
.faqlist{margin-top:clamp(24px,3vw,42px);border-top:1px solid var(--line-w)}
.faqq{
  width:100%;display:grid;grid-template-columns:1fr auto;gap:1.1rem;align-items:center;
  background:none;border:0;border-bottom:1px solid var(--line-w);padding:1.05em .2em;
  text-align:left;cursor:pointer;color:#fff;
  transition:color .4s var(--ease),padding-left .4s var(--ease),background .4s var(--ease);
}
.faqq:hover{color:#fff;padding-left:.7em}
.faqq.is-active{color:#fff}
.faqq__no{font-size:.92rem;color:rgba(255,255,255,.45)}
.faqq__t{font-size:1.02rem;line-height:1.35}
.faqq__ar{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.faqq.is-active .faqq__ar,.faqq:hover .faqq__ar{opacity:1;transform:none}

.faqstage{position:relative}
/* Das Hintergrundfoto ist raus, die Karte steht jetzt allein in der
   Spalte – also im normalen Fluss statt absolut darueber. */
.faqcard-par{position:relative;z-index:6}
/* Die Antwortflaechen liegen uebereinander in einer Rasterzelle. Ohne
   Herausloesen waere die Karte immer so hoch wie die laengste Antwort –
   unter der kuerzesten klaffte ein Loch von gut 150px. */
.faqpanes{position:relative}
.faqpane:not(.is-active){position:absolute;top:0;left:0;right:0}
.faqcard{
  position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 46%,rgba(255,255,255,.09));
  -webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);border-radius:clamp(16px,1.9vw,26px);
  padding:clamp(18px,2vw,30px);font-size:clamp(10px,.9vw,13.5px);line-height:1.6;
  box-shadow:0 34px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .55s var(--ease),border-color .55s var(--ease);
}
.faqcard:hover{transform:translateY(-8px) scale(1.012);border-color:rgba(255,255,255,.42)}
.faqcard::before{content:"";position:absolute;left:-30%;top:-60%;width:80%;height:180%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.16),transparent 62%);transform:rotate(12deg);
  transition:transform .9s var(--ease)}
.faqcard:hover::before{transform:rotate(12deg) translateX(24%)}
.faqcard__head{position:relative;z-index:2;display:flex;align-items:center;gap:.8em;padding-bottom:.9em;border-bottom:1px solid rgba(255,255,255,.18)}
.faqkicker b{display:block;font-weight:500}
.faqkicker i{font-style:normal;font-size:.88em;color:rgba(255,255,255,.6)}
.faqic{width:2.9em;height:2.9em;flex:none;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;transition:transform .5s var(--ease)}
.faqic svg{width:55%;height:55%;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.faqcard:hover .faqic{transform:rotate(-8deg) scale(1.06)}
.fviz{position:relative;z-index:2;margin-top:1.2em}
/* Monatsbalken */
.fmonths{display:flex;align-items:flex-end;gap:.35em;height:3.6em}
.fmonths i{flex:1;background:rgba(255,255,255,.18);border-radius:3px 3px 0 0;transition:height .8s var(--ease)}
.fmonths i.on{background:var(--lime)}
.fmonths+.flabels{display:flex;justify-content:space-between;margin-top:.5em;color:rgba(255,255,255,.55)}
/* Vergleichszeilen */
.fcomp{display:flex;flex-direction:column;gap:.55em}
.fcomp div{display:flex;align-items:center;gap:.7em}
.fcomp span{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.fcomp span i{display:block;height:100%;background:var(--lime);border-radius:99px}
.fcomp b{font-weight:500;min-width:5.4em;text-align:right}
/* Kostenzeilen */
.fcost{display:flex;flex-direction:column;gap:.5em}
.fcost div{display:flex;align-items:center;justify-content:space-between;gap:.8em;background:rgba(255,255,255,.1);border-radius:10px;padding:.6em .9em}
.fcost em{font-style:normal;color:rgba(255,255,255,.7)}
.fcost b{font-weight:500}
.fcost .zero{color:var(--lime)}
/* Zeitachse */
.ftime{position:relative;display:flex;justify-content:space-between;padding-top:1.1em}
.ftime::before{content:"";position:absolute;left:6%;right:6%;top:1.35em;height:2px;background:rgba(255,255,255,.2)}
.ftime span{position:relative;text-align:center;flex:1;color:rgba(255,255,255,.72)}
.ftime span::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:var(--lime);margin:0 auto .55em}
.ftime span:nth-child(2)::before{background:rgba(255,255,255,.45)}
.ftime span:nth-child(3)::before{background:rgba(255,255,255,.45)}
/* Vergleichsbalken Laufzeit */
.fbars{display:flex;flex-direction:column;gap:.7em}
.fbars div{display:flex;align-items:center;gap:.8em}
.fbars em{font-style:normal;min-width:6.2em;color:rgba(255,255,255,.72)}
.fbars span{height:10px;border-radius:99px;background:rgba(255,255,255,.16)}
.fbars .mine span{background:var(--lime)}
/* Fehlerliste */
.frisk{display:flex;flex-direction:column;gap:.55em}
.frisk div{display:flex;align-items:center;gap:.7em;background:rgba(255,255,255,.08);border-radius:10px;padding:.55em .85em}
.frisk svg{width:1.1em;height:1.1em;flex:none;stroke:rgba(255,255,255,.75);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.faqchips{display:flex;flex-wrap:wrap;gap:.4em;margin-top:1.1em}
.faqchips span{background:rgba(255,255,255,.14);border-radius:99px;padding:.35em .8em;font-size:.92em}
.faqq{position:relative}

.faqcard__live{margin-left:auto;display:flex;align-items:center;gap:.55em;background:rgba(255,255,255,.14);border-radius:99px;padding:.4em .8em;white-space:nowrap}
.faqcard__live em{display:block;width:.55em;height:.55em;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2);font-style:normal;animation:pulse 2.4s ease-in-out infinite}
.faqpanes{position:relative;z-index:2;display:grid}
.faqpane{grid-area:1/1;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.faqpane.is-active{opacity:1;transform:none;pointer-events:auto}
.faqpane__fig{display:flex;align-items:flex-end;gap:.7em;margin:1.1em 0 .5em}
.faqpane__fig b{font-family:var(--f-text);font-weight:600;font-size:clamp(20px,2.4vw,38px);line-height:1}
.faqpane__fig span{padding-bottom:.35em;color:rgba(255,255,255,.72)}
.faqpane p{color:#fff}
.faqcard__foot{position:relative;z-index:2;display:flex;align-items:center;gap:.6em;margin-top:1.2em;padding-top:1em;border-top:1px solid rgba(255,255,255,.18)}
.faqcard__foot svg{width:1.2em;height:1.2em;stroke:#fff;fill:none;stroke-width:1.4}

/* ---------- Fragen & Antworten ---------- */
.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(30px,3.4vw,52px)}
.qacard{
  background:var(--white);border-radius:clamp(14px,1.6vw,22px);padding:clamp(22px,2.2vw,32px);
  display:flex;flex-direction:column;box-shadow:0 14px 36px rgba(0,0,0,.06);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.qacard:hover{transform:translateY(-5px);box-shadow:0 26px 56px rgba(0,0,0,.10)}
.qacard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:clamp(18px,2vw,30px)}
.qacard__no{font-size:.95rem;color:var(--ink-40);letter-spacing:.08em}
.qacard__fig{text-align:right}
.qacard__fig b{display:block;font-family:var(--f-text);font-weight:600;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1;color:var(--ink)}
.qacard__fig span{display:block;font-size:.76rem;color:var(--ink-40);margin-top:.3rem;letter-spacing:.02em}
.qacard h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.22;margin-bottom:.7rem}
.qacard p{color:var(--ink-60);font-size:.93rem;flex:1;margin-bottom:1.2rem}

/* ---------- Newsletter ---------- */
.nl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,76px);align-items:center}
.nl__form{margin-top:1.9rem;max-width:430px}
.nl__form label{display:block;font-size:.88rem;margin-bottom:.5rem}
.nl__form input[type=email]{width:100%;border:0;border-bottom:1px solid var(--line);padding:.9em 0;font-family:inherit;font-weight:300;font-size:1rem;background:none;transition:border-color .3s ease}
.nl__form input[type=email]:focus{outline:none;border-color:var(--black)}
.nl__check{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.1rem;font-size:.81rem;color:var(--ink-60);line-height:1.6}
.nl__check input{width:15px;height:15px;margin-top:3px;flex:none;accent-color:#000}
.nl__form .btn{margin-top:1.5rem}
.nl__media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}

/* ---------- CTA ---------- */
.cta{text-align:center;overflow:hidden}
.cta h2{max-width:16ch;margin:0 auto 1.3rem;font-size:clamp(2.1rem,4.2vw,3.6rem)}
.cta p{margin:0 auto 2.6rem}
.cta__row{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.ftr{background:var(--black);color:#fff;padding-block:clamp(56px,6vw,88px) 28px}
.ftr__grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.25fr;gap:clamp(28px,3vw,48px)}
.ftr h4{color:#fff;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;margin:0 0 1.4rem;font-family:var(--f-text)}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;font-size:.94rem}
.ftr a{transition:color .3s ease}
.ftr a:hover{color:#fff}
.ftr address{font-style:normal;font-size:.94rem;line-height:1.9}
.ftr .wordmark{color:#fff;margin-bottom:1.5rem;display:block}
.ftr__bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(38px,4vw,62px);padding-top:22px;border-top:1px solid var(--line-w);font-size:.82rem}

/* ==========================================================
   SCROLL-EFFEKTE
   ========================================================== */
/* Zeilenweiser Text-Aufbau */
.sp{display:inline-block;overflow:hidden;vertical-align:top}
.sp i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .9s var(--ease)}
.in .sp i,.sp.in i{transform:translateY(0)}

/* Weiches Einblenden */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}

/* Bild-Enthüllung per Blende */
.clip{position:relative}
.clip::after{
  content:"";position:absolute;inset:0;z-index:5;background:var(--paper);
  transform-origin:bottom;transition:transform 1.1s var(--ease);
}
.clip.in::after{transform:scaleY(0)}
.grey .clip::after{background:var(--grey)}
.dark .clip::after,.hero .clip::after{background:var(--black)}
.tile__txt{z-index:6}

/* Parallax-Träger */
[data-par]{will-change:transform}

@media (max-width:1040px){
  .nav{display:none}
  .burger{display:block}
  .hero__in{grid-template-columns:1fr;gap:0}
  .hero__media{aspect-ratio:4/5;order:-1;margin-right:0;margin-bottom:2.4rem!important}
  .hero__left{display:block;padding-bottom:0;margin-bottom:calc(-1 * clamp(30px,5vw,60px))}
  .svc,.split,.broker{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .about-split{grid-template-columns:1fr}
  .figure--sm{width:100%}
  .kontakt{grid-template-columns:1fr}
  .kontakt__img{aspect-ratio:3/4}
  .kontakt__img,.kontakt__img .ph{background-position:center top}
  .kontakt__form{margin-left:0;margin-top:-40px}
  .fgrid{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
  .split__media,.broker__media{aspect-ratio:16/10}
  .figure__img,.bleed__img{aspect-ratio:1/1}
  .bleed__img{margin-bottom:0}
  .vcard-par{position:static;margin-top:1.2rem;left:auto;right:auto}
  .vcard-par--in{position:absolute;left:5%;right:4%;bottom:4%;margin-top:0}
  .bleed--up .bleed__img{margin-top:0}
  .vcard:hover{transform:none}
  .match{aspect-ratio:1/1.15;margin-top:2rem}
  .mlist{right:0}
  .guides{grid-template-columns:1fr 1fr}
  .tipgrid{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .tile{aspect-ratio:16/11}
  .tile:first-child{grid-row:auto;aspect-ratio:4/3}

  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .head{flex-direction:column;align-items:flex-start}
  .hero__search{flex-direction:column}
  .hero__search .btn{width:100%;padding-block:1.05em}
  .guides,.ftr__grid{grid-template-columns:1fr}
  .tipgrid{grid-template-columns:1fr;gap:14px}
  .tipcard__img{aspect-ratio:16/9}
  .tiplist{padding:16px 18px 16px}
  .refstage{grid-template-columns:1fr;min-height:0}
  .refcard--side{display:none}
  .refcard--main{aspect-ratio:4/3}
  .cta__row .btn{width:100%}
}
@media (max-width:1000px){
  /* Bis hierher steht die Karte unter den Fragen und nutzt die ganze Breite.
     Erst darueber ist daneben genug Platz fuer zwei Spalten. */
  .faqgrid{grid-template-columns:1fr}
  .faqcard-par{position:static;left:auto;right:auto}
  /* Die Karte rechnet alles in em aus ihrer Basis. In voller Breite darf
     die mitwachsen, sonst bleibt der Text auf dem Boden von 8px kleben. */
  .faqcard{font-size:clamp(11.5px,3.3vw,13.5px)}
  /* Die Antwortflaechen liegen uebereinander in einer Rasterzelle, also war
     die Karte immer so hoch wie die laengste Antwort – unter der kuerzesten
     klaffte ein Loch. Nicht aktive Flaechen werden herausgeloest, damit die
     Karte der sichtbaren Antwort folgt. */
  /* Die Karte stand hinter dem Bild und damit weit unter der Kante. Wer oben
     eine Frage antippte, sah nichts passieren. Jetzt kommt sie direkt unter
     die Fragen. */
  .faqstage{display:flex;flex-direction:column}
  .faqcard-par{order:-1;margin-top:0;margin-bottom:1.2rem;
    /* Auf dem Tablet wuerde die Karte sonst auf 900px auseinandergezogen. */
    max-width:620px;margin-inline:auto;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation:none!important}
  .co--float,.btn--float{animation:none!important}
  .rv,.sp i{opacity:1;transform:none}
  .clip::after{display:none}
}

/* ---- Bewertungs-Dashboard (von der Verkaufen-Seite) ---- */
/* Bewertungs-Dashboard */
.dash{
  background:#fff;color:var(--ink);
  font-family:var(--f-text);font-weight:300;line-height:1.5;letter-spacing:.005em;
  border-radius:24px;padding:clamp(24px,2.8vw,36px);
  box-shadow:0 34px 70px -34px #00000038;border:1px solid var(--line);
}
.dash__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.dash__lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40)}
.dash__val{font-family:var(--f-display);font-weight:500;font-size:clamp(2.1rem,3.7vw,3rem);letter-spacing:0;line-height:1;margin-top:10px}
.dash__pill{background:var(--lime);border-radius:999px;padding:7px 14px;font-size:11.5px;font-weight:500;white-space:nowrap}
.dash__chart{margin:0 -6px}
.dash__legend{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap}
.dash__legend div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-40)}
.dash__dot{width:8px;height:8px;border-radius:50%;flex:none}
.dash__meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
}
.dash__meta b{display:block;font-family:var(--f-display);font-weight:500;font-size:20px;letter-spacing:0}
.dash__meta span{font-size:11px;color:var(--ink-40);line-height:1.35;display:block;margin-top:4px}
@media (max-width:760px){.dash__meta{grid-template-columns:1fr;gap:12px}}
@media (max-width:760px){.dash__meta{grid-template-columns:1fr;gap:12px}}



/* ---- FAQ-Karte im Stil des Bewertungs-Dashboards (weiß) ---- */
.faqcard{
  background:#fff;color:var(--ink);
  font-family:var(--f-text);font-weight:300;
  border:1px solid var(--line);border-radius:clamp(18px,2vw,26px);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.42);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.faqcard::before{display:none}
.faqcard:hover{transform:translateY(-8px) scale(1.012);border-color:rgba(0,0,0,.22)}

.faqcard__head{border-bottom:1px solid var(--line)}
.faqcard__foot{border-top:1px solid var(--line)}
.faqcard__foot svg{stroke:var(--ink)}

.faqkicker b{font-weight:500;color:var(--ink)}
.faqkicker i{color:var(--ink-40)}

.faqic{background:var(--grey)}
.faqic svg{stroke:var(--ink)}

.faqcard__live{background:var(--lime);color:var(--ink);font-weight:400}
.faqcard__live em{background:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.12)}

.faqpane__fig b{font-family:var(--f-display);font-weight:500;letter-spacing:0}
.faqpane__fig span{color:var(--ink-40)}
.faqpane p{color:var(--ink-40)}

/* Balken- und Zeitgrafiken */
.fmonths i{background:rgba(0,0,0,.09)}
.fmonths i.on{background:var(--ink)}
.fmonths+.flabels{color:var(--ink-40)}

.fcomp span{background:rgba(0,0,0,.09)}
.fcomp span i{background:var(--ink)}
.fcomp b{color:var(--ink)}

.fcost div{background:var(--grey)}
.fcost em{color:var(--ink-40)}
.fcost b{color:var(--ink)}
.fcost .zero{background:var(--lime);color:var(--ink);border-radius:99px;padding:.18em .7em}

.ftime::before{background:rgba(0,0,0,.12)}
.ftime span{color:var(--ink-40)}
.ftime span::before{background:var(--ink)}
.ftime span:nth-child(2)::before,
.ftime span:nth-child(3)::before{background:rgba(0,0,0,.18)}

.fbars em{color:var(--ink-40)}
.fbars span{background:rgba(0,0,0,.09)}
.fbars .mine span{background:rgba(0,0,0,.09)}


/* ---- FAQ-Mockups: Icons, Balken, Aufbau-Animation ---- */
.fic{
  width:1.15em;height:1.15em;flex:none;
  stroke:var(--ink);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.faqpane p .fic{
  width:1.05em;height:1.05em;vertical-align:-.18em;margin-right:.5em;
  stroke:var(--ink-40);
}

/* Monatsbalken: runde Köpfe + markierter Höhepunkt */
.fmonths i{position:relative;border-radius:4px 4px 0 0}
.fmonths i.peak{background:var(--ink)}
.fmonths i.peak::after{
  content:"";position:absolute;top:-.62em;left:50%;translate:-50% 0;
  width:.5em;height:.5em;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 .16em rgba(0,0,0,.1);
}

/* Objektvergleich */
.fcomp div .fic{stroke:var(--ink-40)}
.fcomp em{flex:none;min-width:5.2em}

/* Kosten */
.fcost div{gap:.65em}
.fcost em{flex:1}
.fcost .fic{stroke:var(--ink)}

/* Zeitstrahl mit Icon-Kreisen */
.ftime{padding-top:.4em}
.ftime::before{top:1.55em}
.ftime span::before{display:none}
.fdot{
  width:2.35em;height:2.35em;border-radius:50%;background:var(--lime);
  display:grid;place-items:center;margin:0 auto .6em;position:relative;z-index:2;
  box-shadow:0 0 0 .28em #fff;
}
.fdot .fic{width:1.15em;height:1.15em;stroke:var(--ink)}

/* Bindungsdauer: gemeinsame Spur statt versetzter Balken */
.fbars div{gap:.65em}
.fbars em{min-width:0;width:7.6em;flex:none}
.fbars span{flex:1;overflow:hidden;background:rgba(0,0,0,.09)}
.fbars span i{display:block;height:100%;border-radius:99px;background:rgba(0,0,0,.28)}
.fbars .mine span i{background:var(--ink)}
.fbars .mine .fic{stroke:var(--ink)}
.fbars b{width:6.4em;min-width:0;flex:none;text-align:right;font-weight:500;color:var(--ink)}
.fbars .mine b{
  background:var(--lime);border-radius:99px;padding:.2em 0;
  text-align:center;width:6.4em;
}

/* Risiken */
.frisk div{background:var(--grey)}
.frisk svg{stroke:var(--ink)}

/* Aufbau: Balken wachsen beim Wechsel der Frage */
.fmonths i,.fcomp span i,.fbars span i{
  transition:height .85s var(--ease) .12s,width .85s var(--ease) .12s;
}
.faqpane:not(.is-active) .fmonths i{height:8%!important}
.faqpane:not(.is-active) .fcomp span i,
.faqpane:not(.is-active) .fbars span i{width:0!important}
.fmonths i:nth-child(2){transition-delay:.16s}
.fmonths i:nth-child(3){transition-delay:.2s}
.fmonths i:nth-child(4){transition-delay:.24s}
.fmonths i:nth-child(5){transition-delay:.28s}
.fmonths i:nth-child(6){transition-delay:.32s}
.fcomp div:nth-child(2) span i{transition-delay:.2s}
.fcomp div:nth-child(3) span i{transition-delay:.28s}
.fbars div:nth-child(2) span i{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .fmonths i,.fcomp span i,.fbars span i{transition:none}
  .faqpane:not(.is-active) .fmonths i{height:auto!important}
  .faqpane:not(.is-active) .fcomp span i,
  .faqpane:not(.is-active) .fbars span i{width:auto!important}
}


/* ---- Button-Hover im Markengelb ---- */
.btn::before,
.btn--light::before,
.btn--outline::before,
.btn--ghostw::before{background:var(--lime)}
.btn:hover,
.btn--light:hover,
.btn--outline:hover,
.btn--ghostw:hover{color:var(--ink);border-color:var(--lime)}
.btn:hover svg{stroke:var(--ink)}

/* ---- FAQ-Kennzahl im Aufbau des Bewertungs-Dashboards ---- */
.faqpane__fig{
  flex-direction:column-reverse;align-items:flex-start;gap:.5em;
  margin:1.2em 0 .6em;
}
.faqpane__fig span{
  font-size:.82em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-40);padding-bottom:0;
}
.faqpane__fig b{line-height:.95}

/* Rasterlinien hinter den Monatsbalken, wie im Chart des Dashboards */
.fmonths{position:relative;padding-top:.4em}
.fmonths::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background:repeating-linear-gradient(to top,rgba(0,0,0,.07) 0 1px,transparent 1px 33.33%);
}
.fmonths i{z-index:1}

/* Spielerische Kleinigkeiten */
.fcost div,.frisk div{transition:transform .35s var(--ease),background .35s var(--ease)}
.fcost div:hover,.frisk div:hover{transform:translateX(4px);background:var(--grey-2)}
.fdot{transition:transform .45s var(--ease)}
.ftime:hover .fdot{transform:translateY(-3px)}
.ftime span:nth-child(2) .fdot{transition-delay:.06s}
.ftime span:nth-child(3) .fdot{transition-delay:.12s}
.faqcard:hover .fic{stroke:var(--ink)}
.fbars .mine b{box-shadow:0 0 0 0 rgba(0,0,0,.14);transition:box-shadow .4s var(--ease)}
.faqcard:hover .fbars .mine b{box-shadow:0 0 0 .28em rgba(0,0,0,.06)}

/* Abschlusszeile wie die Kennzahlenzeile im Dashboard */
.faqcard__foot{color:var(--ink-40);font-size:.92em}
.faqcard__foot svg{stroke:var(--ink-40)}


/* ---- Matching-Mockup in der Sprache des Bewertungs-Dashboards ---- */
.mlist{
  background:#fff;border:1px solid var(--line);
  border-radius:clamp(16px,1.8vw,24px);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.34);
}

/* Kopf: Label über großer Serifenzahl, gelbe Pille rechts */
.mbar{
  background:#fff;border-bottom:1px solid var(--line);
  align-items:flex-start;padding:clamp(.9em,1.1vw,1.25em) 1.15em;
}
.mbar__k{display:flex;flex-direction:column;gap:.42em}
.mbar__k small{
  font-size:.8em;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);
}
.mbar__k b{
  font-family:var(--f-display);font-weight:500;line-height:.95;
  font-size:clamp(19px,2.3vw,34px);color:var(--ink);
}
.mbar__live{
  background:var(--lime);color:var(--ink);font-weight:400;
  margin-top:.15em;
}
.mbar__live em{background:var(--ink)}

/* Kopfzeile der Tabelle */
.mhead{
  color:var(--ink-40);font-size:.84em;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}

/* Zeilen: monochrom, Rangfolge über Intensität statt Farbe */
.mrow+.mrow{border-top:1px solid rgba(0,0,0,.07)}
.mrow:hover{background:#faf9f6}
.mrow__ava{background:var(--grey);color:var(--ink);border-radius:10px}
.mrow__bar{background:rgba(0,0,0,.09)}
.mrow__pct{color:var(--ink)}
.mtagx{background:var(--grey);color:var(--ink-40);font-weight:400}

.is-blue .mrow__ava{background:var(--grey);color:var(--ink)}
.is-blue .mrow__bar i{background:var(--ink)}
.is-blue .mrow__pct{color:var(--ink)}
.is-blue .mtagx{background:var(--grey);color:var(--ink)}

.is-yellow .mrow__ava{background:var(--grey);color:var(--ink-40)}
.is-yellow .mrow__bar i{background:rgba(0,0,0,.34)}
.is-yellow .mrow__pct{color:var(--ink-40)}
.is-yellow .mtagx{background:var(--grey);color:var(--ink-40)}

.is-red .mrow__ava{background:var(--grey);color:var(--ink-40)}
.is-red .mrow__bar i{background:rgba(0,0,0,.22)}
.is-red .mrow__pct{color:var(--ink-40)}
.is-red .mtagx{background:var(--grey);color:var(--ink-40)}

/* Top-Treffer bekommt das Gelb */
.mrow--hit{background:rgba(248,255,161,.34)}
.mrow--hit:hover{background:rgba(248,255,161,.5)}
.mrow--hit .mrow__ava{background:var(--lime);color:var(--ink)}
.mrow--hit .mtagx{background:var(--ink);color:#fff}
.mrow--hit .mrow__bar{background:rgba(0,0,0,.12)}
.mrow--hit .mrow__bar i{background:var(--ink)}
.mrow--hit .mrow__pct{color:var(--ink);font-weight:600}

/* Endpunkt am Top-Balken, wie am Ende der Preiskurve */
.mrow--hit .mrow__bar{overflow:visible;position:relative}
.mrow--hit .mrow__bar i{position:relative;overflow:visible}
.mrow--hit .mrow__bar i::after{
  content:"";position:absolute;right:-3px;top:50%;translate:0 -50%;
  width:8px;height:8px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 2px var(--ink);
}

/* Fußzeile wie die Kennzahlenzeile des Dashboards */
.mfoot{
  background:#fff;border-top:1px solid var(--line);
  color:var(--ink-40);font-size:.88em;
}
.mfoot b{font-family:var(--f-display);font-weight:500;font-size:1.25em;color:var(--ink)}


/* ---- Suchkunden-Trichter: modern, gelb-schwarz, mit Aufbau ---- */
.funnel{padding:clamp(.9em,1.1vw,1.3em) 1.15em .2em;display:flex;flex-direction:column;gap:.62em}
.fnl{
  display:grid;grid-template-columns:6.6em 1fr 4.2em;
  align-items:center;gap:.75em;
}
.fnl__l{color:var(--ink-40);font-size:.94em;white-space:nowrap}
.fnl__t{position:relative;height:1.45em;border-radius:99px;background:rgba(0,0,0,.06);overflow:hidden}
.fnl__t i{
  position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:99px;
  background:rgba(0,0,0,.16);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease);
}
.fnl:nth-child(2) .fnl__t i{background:rgba(0,0,0,.26)}
.fnl:nth-child(3) .fnl__t i{background:rgba(0,0,0,.4)}
.fnl.is-top .fnl__t{background:rgba(248,255,161,.45);overflow:visible}
.fnl.is-top .fnl__t i{background:var(--ink)}
.fnl.is-top .fnl__t i::after{
  content:"";position:absolute;right:-4px;top:50%;translate:0 -50%;
  width:9px;height:9px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 2px var(--ink);
}
.fnl b{
  font-family:var(--f-display);font-weight:500;font-size:1.28em;
  text-align:right;color:var(--ink-40);font-variant-numeric:tabular-nums;
}
.fnl.is-top b{color:var(--ink)}
.match.in .fnl__t i{transform:scaleX(var(--w,1))}
.match.in .fnl:nth-child(2) .fnl__t i{transition-delay:.14s}
.match.in .fnl:nth-child(3) .fnl__t i{transition-delay:.28s}
.match.in .fnl:nth-child(4) .fnl__t i{transition-delay:.42s}

/* Kriterien-Chips */
.mchips{display:flex;flex-wrap:wrap;gap:.45em;padding:.9em 1.15em .1em}
.mchip{
  display:inline-flex;align-items:center;gap:.4em;
  background:var(--grey);border-radius:99px;padding:.42em .8em;
  font-size:.92em;color:var(--ink);
  opacity:0;transform:translateY(6px) scale(.94);
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .3s ease;
}
.mchip svg{width:.92em;height:.92em;stroke:var(--ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.match.in .mchip{opacity:1;transform:none}
.match.in .mchip:nth-child(2){transition-delay:.5s}
.match.in .mchip:nth-child(3){transition-delay:.58s}
.match.in .mchip:nth-child(4){transition-delay:.66s}
.mchip:hover{background:var(--lime)}

/* Top-Treffer */
.mtop{
  display:flex;align-items:center;gap:.8em;
  margin:.95em 1.15em 0;padding:.75em .9em;
  background:rgba(248,255,161,.42);border-radius:14px;
  opacity:0;transform:translateX(-10px);
  transition:opacity .6s var(--ease) .72s,transform .6s var(--ease) .72s;
}
.match.in .mtop{opacity:1;transform:none}
.mtop__ava{
  width:2.5em;height:2.5em;flex:none;border-radius:12px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:.95em;
}
.mtop__who{min-width:0;line-height:1.25}
.mtop__who b{display:block;font-weight:500}
.mtop__who i{font-style:normal;color:var(--ink-40);font-size:.9em}
.mtop__pct{
  margin-left:auto;font-family:var(--f-display);font-weight:500;
  font-size:1.9em;line-height:1;color:var(--ink);
}
.mtop__pct small{font-size:.45em;margin-left:.15em;vertical-align:.55em}

.mfoot{margin-top:.9em}


/* ---- Abschlusszeile: die vier Top-Treffer als Stapel ---- */
.mtop{
  background:var(--ink);color:#fff;border-radius:16px;
  padding:.8em .8em .8em 1em;gap:.9em;
}
.mstack{display:flex;flex:none}
.mstack i{
  width:2.15em;height:2.15em;border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-weight:600;font-size:.9em;
  background:var(--grey);color:var(--ink);
  box-shadow:0 0 0 2px var(--ink);
  margin-left:-.62em;transition:transform .4s var(--ease);
}
.mstack i:first-child{margin-left:0}
.mstack i:nth-child(4){background:var(--lime)}
.mtop:hover .mstack i{margin-left:-.28em}
.mtop:hover .mstack i:first-child{margin-left:0}
.mtop__who b{color:#fff;font-weight:500}
.mtop__who i{color:rgba(255,255,255,.6)}
.mtop__go{
  margin-left:auto;flex:none;width:2.35em;height:2.35em;border-radius:50%;
  background:var(--lime);color:var(--ink);display:grid;place-items:center;
  transition:transform .4s var(--ease);
}
.mtop__go svg{width:.95em;height:.95em}
.mtop:hover .mtop__go{transform:translateX(3px)}



/* ============================================================
   SUCHKUNDEN-MOCKUP – Kartei: konkrete Suchprofile auf
   versetzten Karten, in der Sprache der Standortseiten
   ============================================================ */
.match{position:relative;aspect-ratio:auto}
.matchart{position:relative;aspect-ratio:1/.42;z-index:2}
.matchart .match__ring--a{left:14%;top:0;width:40%}
.matchart .match__ring--b{right:11%;top:7%;width:37%}
.matchart .match__spark{left:46%;top:-4%;width:17%}
.matchart .match__badge{left:30%;top:43%;z-index:6}
.mstage{position:relative;z-index:1;margin-top:-4%}

.ka{position:relative;padding-bottom:26px}

/* Weiße Karte mit den Suchprofilen */
.ka__main{
  position:relative;z-index:3;background:#fff;
  border-radius:clamp(18px,2vw,26px);
  padding:clamp(18px,1.9vw,26px) clamp(18px,2vw,28px);
  box-shadow:0 34px 74px -32px rgba(0,0,0,.5);
  margin-right:clamp(0px,4vw,60px);
}
.ka__top{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:clamp(14px,1.5vw,20px)}
.ka__lbl{font-size:clamp(9px,.74vw,11px);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-40)}
.ka__pill{
  background:var(--lime);color:var(--ink);border-radius:999px;
  padding:.36em .85em;font-size:clamp(9.5px,.78vw,11.5px);white-space:nowrap;
}
.ka__row{
  display:flex;align-items:center;gap:clamp(11px,1.2vw,16px);
  padding:clamp(10px,1.05vw,14px) 0;
  opacity:0;transform:translateX(-12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.match.in .ka__row{opacity:1;transform:none}
.match.in .ka__row:nth-of-type(2){transition-delay:.1s}
.match.in .ka__row:nth-of-type(3){transition-delay:.2s}
.ka__row+.ka__row{border-top:1px solid rgba(0,0,0,.08)}
.ka__ava{
  flex:none;width:clamp(34px,3.4vw,46px);height:clamp(34px,3.4vw,46px);
  border-radius:50%;background:var(--grey);color:var(--ink);
  display:grid;place-items:center;font-weight:500;font-size:clamp(12px,1.05vw,15px);
}
.ka__row:last-of-type .ka__ava{background:var(--lime)}
.ka__t{min-width:0;line-height:1.3}
.ka__t b{display:block;font-weight:500;font-size:clamp(12.5px,1.08vw,15.5px)}
.ka__t i{display:block;font-style:normal;font-size:clamp(10.5px,.9vw,13px);color:var(--ink-40);margin-top:.15em}
.ka__pct{
  margin-left:auto;flex:none;text-align:right;
  font-family:var(--f-display);font-weight:500;line-height:1;
  font-size:clamp(20px,2.1vw,31px);font-variant-numeric:tabular-nums;
}

/* Schwarze Karte mit der Gesamtzahl */
.ka__sub{
  position:relative;z-index:2;background:var(--black);color:#fff;
  border-radius:clamp(16px,1.7vw,22px);
  padding:clamp(26px,2.5vw,34px) clamp(18px,2vw,28px) clamp(16px,1.7vw,22px);
  margin:clamp(-18px,-1.6vw,-12px) 0 0 clamp(0px,4vw,60px);
  opacity:0;transform:translateY(12px);
  transition:opacity .7s var(--ease) .34s,transform .7s var(--ease) .34s;
}
.match.in .ka__sub{opacity:1;transform:none}
.ka__subtop{display:flex;align-items:center;gap:clamp(12px,1.3vw,18px)}
.ka__big{font-family:var(--f-display);font-weight:500;font-size:clamp(24px,2.7vw,40px);line-height:1}
.ka__sub em{font-style:normal;font-size:clamp(10.5px,.9vw,13px);color:#fff;line-height:1.35}
.ka__chips{display:flex;flex-wrap:wrap;gap:.4em;margin-top:clamp(12px,1.3vw,17px)}
.ka__chips span{
  background:rgba(255,255,255,.12);border-radius:999px;
  padding:.36em .75em;font-size:clamp(9.5px,.78vw,11.5px);
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.match.in .ka__chips span{opacity:1;transform:none}
.match.in .ka__chips span:nth-child(1){transition-delay:.5s}
.match.in .ka__chips span:nth-child(2){transition-delay:.57s}
.match.in .ka__chips span:nth-child(3){transition-delay:.64s}
.match.in .ka__chips span:nth-child(4){transition-delay:.71s}

/* Gelber Kreis mit Schlüssel */
.ka__badge{
  position:absolute;z-index:5;right:clamp(-10px,-.8vw,0px);bottom:clamp(2px,1vw,14px);
  width:clamp(54px,5.4vw,76px);height:clamp(54px,5.4vw,76px);border-radius:50%;
  background:var(--lime);display:grid;place-items:center;
  animation:kabob 7s ease-in-out infinite;
}
.ka__badge svg{width:42%;height:42%;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes kabob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media (prefers-reduced-motion:reduce){
  .ka__row,.ka__sub,.ka__chips span{opacity:1!important;transform:none!important}
  .ka__badge{animation:none}
}
@media (max-width:900px){
  .matchart{aspect-ratio:1/.46}
  .ka__main{margin-right:0}
  .ka__sub{margin-left:0}
  .ka__subtop{flex-wrap:wrap}
}


/* Preisfindung: Rechnung Position für Position */
.fcalc{display:flex;flex-direction:column;gap:.5em}
.fcalc > div{
  display:flex;align-items:center;gap:.7em;
  background:var(--grey);border-radius:10px;padding:.62em .95em;
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.fcalc > div:hover{transform:translateX(4px);background:var(--grey-2)}
.fcalc .fic{stroke:var(--ink-40)}
.fcalc .fop{
  flex:none;width:1.25em;text-align:center;font-style:normal;
  font-weight:500;color:var(--ink-40);
}
.fcalc em{font-style:normal;color:var(--ink-60);min-width:0}
.fcalc b{margin-left:auto;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fcalc .fsum{background:var(--lime);margin-top:.22em}
.fcalc .fsum .fop,.fcalc .fsum em{color:var(--ink)}
.fcalc .fsum b{font-family:var(--f-display);font-weight:500;font-size:1.3em;line-height:1}
.fcalc .fsum:hover{background:var(--lime)}


/* ============================================================
   STANDORT-ÜBERSICHT – Text links, Bayernkarte rechts.
   Liste und Karte reagieren aufeinander.
   ============================================================ */
.map__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(34px,5.5vw,84px);align-items:center}
/* Die Karte ist fast quadratisch – ohne Begrenzung würde sie die Sektion
   unnötig hoch machen. justify-self statt auto-Margins, sonst schrumpft
   das Gitterelement auf seine Inhaltsbreite. */
.mapfig{justify-self:center;width:min(100%,470px)}
.mapfig svg{width:100%;height:auto;display:block;overflow:visible}

.bayern{fill:#131313;stroke:#43433f;stroke-width:1.3;stroke-linejoin:round}
.grid-lines{stroke:#ffffff0d;stroke-width:.8}

/* Linie zwischen den Standorten */
.map__weg{fill:none;stroke:#F8FFA1;stroke-opacity:.42;stroke-width:1.4;
  stroke-dasharray:3.5 5;stroke-linecap:round}

.pin{transition:opacity .4s var(--ease)}
.pin__halo{fill:#F8FFA1;opacity:0;transform-box:fill-box;transform-origin:center;
  transform:scale(.6);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.pin__dot{fill:var(--lime);stroke:#060606;stroke-width:2;
  transform-box:fill-box;transform-origin:center;transition:transform .4s var(--ease)}
.pin__lbl{font-family:var(--f-text);font-size:12px;fill:#fff;
  transition:fill .4s var(--ease)}
.pin__line{stroke:#ffffff59;stroke-width:1;stroke-dasharray:2 3}

/* Hervorhebung, wenn ein Listeneintrag angesteuert wird */
.mapfig.is-focus .pin{opacity:.32}
.mapfig.is-focus .pin.is-on{opacity:1}
.pin.is-on .pin__halo{opacity:.2;transform:scale(1)}
.pin.is-on .pin__dot{transform:scale(1.35)}

.map__grid .lead{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.72;
  color:rgba(255,255,255,.66);margin:0;max-width:46ch}

@media (prefers-reduced-motion:reduce){
  .pin,.pin__dot,.pin__halo{transition:none}
}
@media (max-width:1080px){
  .map__grid{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
  .map__grid .lead{max-width:62ch}
}
@media (max-width:760px){
  .pin__lbl{font-size:16px}
  .pin__dot{stroke-width:2.6}
  .map__weg{stroke-width:1.8}
}


/* ============================================================
   ÜBER UNS – Text links, ein Foto rechts, Zahlen in einer Zeile
   ============================================================ */



/* ============================================================
   STORY – Bild links, Text rechts, unterschrieben
   ============================================================ */
.chef{padding-block:clamp(56px,7vw,104px)}
.chef__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4.6vw,76px);align-items:center}

.chef__bild{margin:0;position:relative}
/* Das Bild hat rechts eine helle Wand – der Ausschnitt nimmt sie heraus,
   damit die Person im Rahmen steht. */
.chef__ph{border-radius:clamp(18px,2.2vw,26px);overflow:hidden;aspect-ratio:3/4;
  background:var(--img-simon) 8% center/cover no-repeat;background-color:var(--fog);
  box-shadow:0 38px 80px -46px rgba(0,0,0,.52)}

.chef__txt h2{max-width:24ch;margin:0;text-wrap:pretty}
.chef__txt .lead{margin-top:clamp(18px,2vw,26px);color:var(--muted);max-width:54ch}

.chef__zitat{margin:clamp(24px,3vw,36px) 0 0;padding-left:clamp(16px,1.8vw,24px);
  border-left:2px solid var(--lime);
  font-family:var(--serif);font-weight:500;line-height:1.3;
  font-size:clamp(1.14rem,1.8vw,1.5rem);max-width:34ch}

.chef__sig{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 26px;
  margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--hair)}
.chef__sig img{display:block;width:clamp(196px,23vw,272px);height:auto;
  margin-bottom:-10px}
.chef__who{line-height:1.35}
.chef__who b{display:block;font-weight:500;font-size:15px}
.chef__who i{display:block;font-style:normal;font-size:12.4px;color:var(--muted);
  margin-top:2px}

.chef__trust{display:flex;align-items:center;flex-wrap:wrap;gap:9px 12px;
  margin-top:clamp(16px,1.8vw,22px);font-size:12.8px;color:var(--muted)}
.chef__g{width:17px;height:17px;flex:none;
  background:var(--g-mark) center/contain no-repeat}
.chef__stars{width:78px;height:auto;display:block;flex:none}
.chef__trust b{font-weight:500;color:var(--ink)}

.chef__acts{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;
  margin-top:clamp(22px,2.6vw,32px)}
.chef__tel{font-size:14.6px;border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:border-color .3s var(--ease)}
.chef__tel:hover{border-color:var(--ink)}

@media (max-width:980px){
  .chef__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .chef__bild{max-width:min(340px,70vw)}
  .chef__ph{aspect-ratio:3/3.6}
  .chef__txt h2,.chef__txt .lead{max-width:none}
}

/* ============================================================
   BAYERNKARTE
   ============================================================ */
.map{padding-block:clamp(56px,7vw,104px)}
.map__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,80px);align-items:center}
.map__head h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.62rem,2.75vw,2.3rem);line-height:1.12;margin:0;max-width:none}
.map__head p{margin-top:20px;color:var(--muted-on-dark);font-size:15.2px;line-height:1.7;max-width:46ch}

.mapfig{position:relative}
.mapfig svg{width:100%;height:auto;display:block;overflow:visible}
.bayern{fill:#151515;stroke:#3a3a37;stroke-width:1.4;stroke-linejoin:round}
.grid-lines{stroke:#ffffff0d;stroke-width:.8}
.pin{cursor:pointer}
.pin__halo{fill:var(--lime);opacity:.16;transform-box:fill-box;transform-origin:center;animation:ping 3.4s var(--ease) infinite}
.pin--2 .pin__halo{animation-delay:1.1s}
.pin--3 .pin__halo{animation-delay:2.2s}
@keyframes ping{0%{transform:scale(.55);opacity:.34}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.pin__dot{fill:var(--lime);stroke:#060606;stroke-width:2;transition:r .4s var(--ease)}
.pin__lbl{font-family:var(--sans);font-size:11.5px;font-weight:400;fill:#fff;letter-spacing:.02em}
.pin:hover .pin__dot,.pin.is-on .pin__dot{r:9}
.pin.is-off{opacity:.34}
.pin__line{stroke:#ffffff4d;stroke-width:1;stroke-dasharray:2 3}

.locs{list-style:none;margin:clamp(28px,3.2vw,44px) 0 0;padding:0;border-top:1px solid var(--hair-dark)}
.locs li{border-bottom:1px solid var(--hair-dark)}
.locs :is(button,a){
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;
  width:100%;text-align:left;padding:20px 0;transition:padding-inline .4s var(--ease);
  border:0;background:none;cursor:pointer;
}
.locs :is(button,a):hover,
.locs li.is-on .n{color:var(--lime)}
.locs .city{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.15;display:block}
.locs .meta{display:block;font-size:12.5px;color:var(--muted-on-dark);margin-top:3px}
.locs .go{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair-dark);display:grid;place-items:center;transition:background .35s,color .35s,border-color .35s}
.locs li.is-on .go,.locs :is(button,a):hover .go{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.btn--lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}

/* Umbrüche der Karte – auf Über uns stehen sie bei den übrigen Medienabfragen */
@media (max-width:1080px){
  .map__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .pin__lbl{font-size:16px}
  .pin__dot{stroke-width:2.6}
}

/* Tippflaechen auf dem Telefon: Fusslinks, Brotkrumen und das Logo. */
@media (max-width:760px){
  .ftr ul li > a, .footer ul li > a{display:block;padding:8px 0}
  .ftr ul, .footer ul{gap:0}
  .crumb{font-size:12px}
  .crumb a{display:inline-block;padding:7px 0}
  .hdr .wordmark{position:relative}
  .hdr .wordmark::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;
    height:44px;transform:translateY(-50%)}
  /* Telefonnummer und der Link zu den Google-Bewertungen sind echte Ziele. */
  .chef__tel,.gfoot__link{display:inline-block;padding:7px 0}
}

/* ---------- WhatsApp-Knopf ---------- */
/* Der zweite Weg zum Kontakt. Der Knopf nimmt Breite, Hoehe, Rundung und
   Schriftgroesse des Absendeknopfs auf – so lesen sich die beiden als
   Paar statt als Knopf mit Anhaengsel. Gruen und Zeichen sind die von
   WhatsApp und bleiben unveraendert. */
.kontakt__wa{margin-top:clamp(16px,1.8vw,22px)}
.waoder{
  display:flex;align-items:center;gap:14px;
  margin-bottom:clamp(14px,1.6vw,18px);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-40,#8b8b8b);
}
.waoder::before,.waoder::after{
  content:"";flex:1 1 auto;height:1px;
  background:var(--line,rgba(0,0,0,.12));
}
.waknopf{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:15px 28px;border-radius:999px;
  background:#25D366;color:#fff;
  font-size:14px;font-weight:500;letter-spacing:.02em;line-height:1;
  text-decoration:none;border:0;
  transition:background .3s ease,transform .35s cubic-bezier(.22,.8,.28,1),
             box-shadow .35s cubic-bezier(.22,.8,.28,1);
}
.waknopf:hover{
  background:#1DA851;transform:translateY(-2px);
  box-shadow:0 14px 34px -16px rgba(37,211,102,.95);
}
.waknopf svg{width:19px;height:19px;flex:none;fill:#fff}
.kontakt__wa small{
  display:block;margin-top:10px;text-align:center;
  font-size:12.4px;line-height:1.5;color:var(--ink-40,#8b8b8b);
}
/* Im Funnel ist der Absendeknopf schmal – dann bleibt es auch der hier. */
.kontakt__wa--schmal{display:flex;flex-direction:column;align-items:flex-start}
.kontakt__wa--schmal .waknopf{width:auto;align-self:flex-start}
.kontakt__wa--schmal small{text-align:left}
/* Dort traegt die Trennlinie nichts: der Knopf ist schmaler als die
   Spalte, die Linie liefe ins Leere. Das Wort genuegt. */
.kontakt__wa--schmal .waoder::before,
.kontakt__wa--schmal .waoder::after{display:none}

/* ---------- Voller Knopf ---------- */
/* Stand auf allen anderen Seiten, fehlte hier: der Knopf "Termin
   vereinbaren" blieb dadurch ein Umriss statt der vollen Flaeche. */
.btn--fill{background:var(--ink);color:var(--paper)}
.btn--fill:hover{background:var(--lime);color:var(--ink);transform:translateY(-2px)}

/* ---------- Schmale Geräte: Zellen dürfen schrumpfen ---------- */
/* Eine Rasterzelle ist ohne min-width:0 mindestens so breit wie ihr Inhalt
   und ragt auf schmalen Geräten aus der Karte heraus. */
.upsell__txt{min-width:0}
.calc{min-width:0}
.hero .panel{min-width:0}
@media (max-width:460px){
  /* Knöpfe tragen sonst white-space:nowrap. Eine lange Beschriftung hält
     damit ihre ganze Spalte auf – breiter als ein Telefon im Hochformat,
     und der Rest wird abgeschnitten. Hier darf sie umbrechen. */
  .btn{white-space:normal;text-align:center;padding-left:22px;padding-right:22px}
  .upsell__cta{min-width:0}
}
@media (max-width:620px){
  .calc .seg{flex-wrap:wrap;border-radius:16px}
  .calc .seg button{flex:1 1 42%}
}

/* ---------- Knöpfe am Telefon ---------- */
@media (max-width:520px){
  /* Handlungsknöpfe über die volle Breite: gleiche Breite, gleiche Höhe,
     und lange Beschriftungen passen wieder in eine Zeile. */
  .hero__acts,.ctaband__acts,.panel__actions,.pmock__acts,.midcta{
    flex-direction:column;align-items:stretch;
  }
  .hero__acts>.btn,.ctaband__acts>.btn,.panel__actions>.btn,
  .pmock__acts>.btn,.midcta>.btn,.kontakt__form .btn,.upsell__cta{
    width:100%;justify-content:center;text-align:center;
  }
  /* Eine feste Mindesthöhe statt Polsterung: so sind Knöpfe mit und ohne
     Rahmen exakt gleich hoch. Vorher war der Umriss-Knopf zwei Pixel
     höher, weil sein Rahmen mitzählte. */
  .btn{min-height:54px;padding-top:0;padding-bottom:0;box-sizing:border-box}
  /* Die Leiste am unteren Rand behält ihren knappen Zuschnitt – dort
     hätte ein Umbruch den Knopf auf 70 statt 46 Pixel gebracht. */
  .sticky .btn,.sbar .btn{
    white-space:nowrap;width:auto;min-height:0;
    padding-top:12px;padding-bottom:12px;
  }
  /* Bedienelemente unter 40 Pixel trifft man am Telefon schlecht. */
  .seg button,.objtab,a.chip,.rfilter button{min-height:40px}
  .seg button,.objtab{display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:460px){
  /* Am Telefon tragen die Knöpfe nur ihre Beschriftung. Der Pfeil kostet
     mit Abstand 25 Pixel – genau die, die den längsten Beschriftungen
     fehlen. Ohne ihn passt „Immobilienwert kostenfrei ermitteln" in eine
     Zeile, und alle Knöpfe sind gleich hoch. Kein Knopf trägt nur ein
     Zeichen ohne Text, es geht also nichts verloren. Der WhatsApp-Knopf
     ist kein `.btn` und behält sein Zeichen. */
  .btn svg{display:none}
  .btn{gap:0}
  /* Etwas weniger Polsterung im schwarzen Kasten: Überschrift und Knopf
     bekommen dadurch 16 Pixel mehr Breite. */
  .hero .panel{padding:22px}
}

/* ---------- Knöpfe auf dunklem Grund ---------- */
/* Ohne diese Regel erbt der Umriss-Knopf die helle Fassung und steht auf
   dunklem Grund schwarz auf schwarz. Das ist dreimal passiert, zuletzt im
   Kopfkasten von „Verkaufen" – der Knopf war schlicht nicht zu sehen. */
.ctaband .btn--ghost,.panel .btn--ghost,.dark .btn--ghost{
  border-color:#ffffff3d;color:#fff;background:transparent;
}
.ctaband .btn--ghost:hover,.panel .btn--ghost:hover,.dark .btn--ghost:hover{
  background:#ffffff14;border-color:#ffffffa6;color:#fff;
}
/* Eine Rasterzelle ist ohne min-width:0 mindestens so breit wie ihr Inhalt.
   Die Mockup-Collage zog den Kopfbereich dadurch auf 560 Pixel. */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .collage{min-width:0}
}

/* ---------- Datenschutz-Einstellungen ---------- */
/* Kein Banner beim ersten Besuch: Die Seite setzt keine Cookies und lädt
   nichts von Dritten, es gibt also nichts einzuwilligen. Der Verweis in
   der Fusszeile öffnet dieses Fenster, das genau das darlegt. Kommt
   später ein Werkzeug dazu, meldet es sich über `window.clDatenschutz`
   an – dann erscheint der Balken von selbst. */
.dse__auf{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:none;opacity:.78;transition:opacity .25s var(--ease);
}
.dse__auf:hover{opacity:1;text-decoration:underline}

.dse[hidden]{display:none}
.dse{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.dse__hg{position:absolute;inset:0;background:#00000078;backdrop-filter:blur(2px)}
.dse__box{
  position:relative;width:min(100%,560px);max-height:min(86vh,760px);overflow:auto;
  background:var(--paper);color:var(--ink);border-radius:22px;
  padding:clamp(24px,3.4vw,40px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6);
}
.dse__x{
  position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;
  border:1px solid #00000020;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.dse__x:hover{background:var(--ink);color:var(--paper)}
/* Eigene Werte statt `.h3`: die Klasse gibt es nicht auf jeder
   Seite – `index.html` hat ein eigenes Schriftsystem. */
.dse__t{
  margin:0;padding-right:40px;font-family:var(--serif);
  font-weight:500;letter-spacing:0;line-height:1.2;
  font-size:clamp(1.22rem,1.9vw,1.5rem);
}
.dse__lead{margin:10px 0 0;font-size:14.6px;line-height:1.62;color:var(--muted)}

.dse__z{margin-top:clamp(20px,2.4vw,28px);padding-top:18px;border-top:1px solid #00000016}
.dse__zk{display:flex;align-items:center;justify-content:space-between;gap:14px}
.dse__zk h3{margin:0;font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:.01em}
.dse__an{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--fog);color:var(--muted);border-radius:999px;padding:5px 11px;white-space:nowrap;
}
.dse__z p{margin:9px 0 0;font-size:13.6px;line-height:1.62;color:var(--muted)}
.dse__z a{color:var(--ink);text-underline-offset:3px}

.dse__leer{margin-top:18px;padding-top:18px;border-top:1px solid #00000016}
.dse__leer p{margin:0 0 10px;font-size:13.6px;line-height:1.62;color:var(--muted)}
.dse__leer p:last-child{margin-bottom:0}
.dse__leer b{color:var(--ink);font-weight:500}

/* Wird erst gefüllt, wenn sich ein Dienst anmeldet. */
.dse__liste:empty{display:none}
.dse__d{margin-top:18px;padding-top:18px;border-top:1px solid #00000016}
.dse__d .dse__zk h3{font-weight:500}
.dse__d p{margin:9px 0 0;font-size:13.6px;line-height:1.62;color:var(--muted)}
.dse__d small{display:block;margin-top:6px;font-size:12px;color:var(--muted);opacity:.85}
.dse__s{position:relative;width:46px;height:26px;flex:none;cursor:pointer}
.dse__s input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.dse__s i{
  position:absolute;inset:0;border-radius:999px;background:#00000026;
  transition:background .3s var(--ease);pointer-events:none;
}
.dse__s i::after{
  content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;
  border-radius:50%;background:var(--paper);transition:transform .3s var(--ease);
}
.dse__s input:checked + i{background:var(--ink)}
.dse__s input:checked + i::after{transform:translateX(20px)}
.dse__s input:focus-visible + i{outline:2px solid var(--ink);outline-offset:3px}

.dse__fuss{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:clamp(22px,2.6vw,30px);padding-top:18px;border-top:1px solid #00000016;
}
.dse__mehr{font-size:13.4px;color:var(--muted);text-underline-offset:3px}
.dse__mehr:hover{color:var(--ink)}
.dse__ok{flex:none}

/* Der Balken – bleibt aus, solange sich kein Dienst angemeldet hat. */
.dse__balken[hidden]{display:none}
.dse__balken{
  position:fixed;left:0;right:0;bottom:0;z-index:118;
  background:var(--ink);color:var(--paper);
  padding:clamp(16px,2vw,22px) var(--gut,clamp(20px,4vw,48px));
  box-shadow:0 -20px 50px -30px rgba(0,0,0,.7);
}
.dse__balken-in{
  max-width:var(--shell,1280px);margin:0 auto;display:flex;align-items:center;
  gap:clamp(14px,2vw,28px);flex-wrap:wrap;
}
.dse__balken p{margin:0;flex:1 1 320px;min-width:0;font-size:13.8px;line-height:1.6;color:var(--muted-on-dark)}
.dse__balken a{color:var(--paper);text-underline-offset:3px}
.dse__balken-knoepfe{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:560px){
  .dse{padding:0;place-items:end stretch}
  .dse__box{
    width:100%;max-height:92vh;border-radius:22px 22px 0 0;
    padding:26px 20px calc(26px + env(safe-area-inset-bottom,0px));
  }
  .dse__fuss{flex-direction:column;align-items:stretch}
  .dse__ok{width:100%;justify-content:center}
  .dse__mehr{text-align:center}
  .dse__balken-knoepfe{width:100%}
  .dse__balken-knoepfe .btn{flex:1 1 auto;justify-content:center}
}
/* ---------- Mobiler Schliff: Tippflächen und schmale Geräte ---------- */
@media (max-width:620px){
  /* 1 – Tippflächen. Polsterung statt Grösse: das Aussehen bleibt, die
     treffbare Fläche wächst. Apple nennt 44 Punkt, Google 48 dp. */
  /* Zwei Fusszeilen-Bauarten: die 91 Seiten nutzen `.footer__…`,
     `index.html` hat ein eigenes System mit `.ftr__…`. */
  .footer__top a,.footer__bot a,
  .ftr__grid a,.ftr__bot a,
  .dse__auf{
    display:inline-block;padding-block:11px;
  }
  .footer__top li,.ftr__grid li{line-height:1.5}
  /* `box-sizing:border-box` plus `aspect-ratio` heisst: Polsterung frisst
     die Höhe von innen auf, das Kästchen bleibt 22 Pixel flach. Deshalb
     hier ausdrücklich `content-box`. */
  .hdr .wordmark,.footer .wordmark,.ftr__grid .wordmark{
    box-sizing:content-box;padding-block:9px;
  }

  /* 2 – Ankreuzfelder. 16 Pixel trifft man am Telefon nicht zuverlässig. */
  .fcheck input[type="checkbox"]{width:22px;height:22px;margin-top:0}
  .fcheck{align-items:center;gap:.8rem}

  /* 4 – Der Streifen unten schnitt den Text ab. */
  .sticky span{min-width:0;overflow-wrap:break-word;hyphens:auto}
}

@media (max-width:380px){
  /* 3 – Bei 320 Pixeln ragten Anschrift, Nummer und E-Mail 36 Pixel aus
     dem Bild. `info@conceptliving.immo` bricht von sich aus nicht um. */
  .footer__top li,.footer__top a,.ftr__grid li,.ftr__grid a,.ftr__grid address{
    min-width:0;overflow-wrap:anywhere;word-break:break-word;
  }
  /* Der Streifen wird bei 320 sonst zweizeilig und drückt die Seite. */
  .sticky span{font-size:13px}
}

/* ---------- Die drei Zusagen ---------- */
/* Kein Rahmen, kein Kasten, linksbündig – so wie der übrige Seitenaufbau.
   Für die gleiche Höhe sorgt `subgrid`: Die drei Blöcke teilen sich die
   drei Zeilen des Rasters (Symbol, Überschrift, Text). Dadurch liegen
   Überschriften und Absätze auf einer Linie, auch wenn eine Überschrift
   zwei Zeilen braucht – ohne eine Mindesthöhe von Hand zu setzen. */
.svc{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;
  gap:clamp(24px,3vw,56px);margin-top:clamp(34px,4vw,60px);
}
.svc article{
  display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:0;
  position:relative;transition:transform .5s var(--ease);
}
.svc article:hover{transform:translateY(-4px)}
/* Das einzige, was von der Überarbeitung bleibt: die Symbole. Vorher lag
   der graue Kreis oben links und das Zeichen unten rechts, und weil die
   Zeichen unterschiedlich viel Fläche füllen, sah das Preisschild doppelt
   so groß aus wie das Balkendiagramm. Jetzt sitzt jedes Zeichen mittig in
   einem Kreis gleicher Größe, mit gleicher Strichstärke. */
.svc .ic{
  position:relative;width:64px;height:64px;flex:none;
  display:grid;place-items:center;margin:0 0 1.5rem;
}
.svc .ic::before{left:0;top:0;width:100%;height:100%;background:var(--accent-tint)}
.svc .ic svg{
  position:relative;right:auto;bottom:auto;width:29px;height:29px;
  stroke-width:1.35;
}
.svc article:hover .ic::before{transform:scale(1.07)}
.svc h3{margin:0 0 .7rem;font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.45rem,1.9vw,1.75rem);line-height:1.15;letter-spacing:-.005em}
.svc p{margin:0;color:var(--ink-60);font-size:.97rem;line-height:1.72}
@media (max-width:1040px){
  /* Einspaltig trägt jeder Block seine eigenen Zeilen. */
  .svc{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:34px}
  .svc article{grid-row:auto;grid-template-rows:auto auto auto}
}
@media (max-width:620px){
  /* Am Telefon steht das Symbol links neben Überschrift und Text – so
     bleiben die drei Zusagen kompakt statt drei Bildschirme lang. */
  .svc{gap:0;margin-top:26px}
  .svc article{grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;
    column-gap:18px;padding:22px 0;border-top:1px solid var(--line)}
  .svc article:last-child{border-bottom:1px solid var(--line)}
  .svc .ic{grid-row:1 / span 2;width:52px;height:52px;margin:0}
  .svc .ic svg{width:24px;height:24px}
  .svc h3{font-size:1.4rem;margin:.35rem 0 .45rem}
  .svc p{font-size:.93rem;line-height:1.65}
}

/* ---------- Startseite am Telefon ---------- */
@media (max-width:760px){
  /* Parallaxe verschiebt die schwebenden Karten am Telefon in die
     Überschriften hinein. Ohne Verschiebung bleibt alles an seinem Platz. */
  [data-par][data-flat]{transform:none!important}
}
@media (max-width:620px){
  /* Kopfbereich: Erst die Botschaft, dann das Bild, dann die Suche.
     Vorher füllte das Bild den ganzen ersten Bildschirm, und die linke
     Spalte war 15 Pixel breiter als das Telefon – Bild und Suchfeld
     wurden rechts abgeschnitten. */
  .hero{--band:92px;padding-top:calc(var(--hdr-h) + 22px)}
  .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero__left{display:contents}
  .hero__left>div:first-child{order:1}
  .hero__media{order:2;aspect-ratio:5/4;margin:26px 0 0!important}
  .hero__left>div:last-child{order:3;margin-top:22px;margin-bottom:-58px}
  .gbadge{flex-wrap:wrap;row-gap:.4rem;font-size:.88rem}
  .gbadge__stars svg{width:14px;height:14px}
  .hero h1{font-size:clamp(2.35rem,10.5vw,2.9rem);line-height:1.04;margin-top:.7rem}
  .hclaim{font-size:.95rem;margin-top:14px;color:rgba(255,255,255,.78)}
  .hero__label{font-size:.9rem;color:rgba(255,255,255,.78)}
  .hero__search{margin-top:.7rem;padding:10px;gap:8px}
  .htags{justify-content:center;gap:.4rem 1.1rem;font-size:.82rem;margin-top:.9rem}
  .hero + .sec{padding-top:40px!important}
}
/* E-Mail-Adresse in der Fusszeile darf umbrechen – in der zweispaltigen
   Fusszeile am Telefon stiess sie sonst an den Bildschirmrand. */
@media (max-width:620px){.footer a[href^="mailto"],.ftr a[href^="mailto"]{overflow-wrap:anywhere}}
/* ---------- „Was könnte Ihre Immobilie wert sein?" am Telefon ---------- */
/* Vorher: Bild, Karte und erst ganz unten die Überschrift. Jetzt erst die
   Frage, dann der Knopf, darunter Bild mit aufliegender Wertkarte. */
@media (max-width:1040px){
  #bewerten .split{display:flex;flex-direction:column;align-items:stretch}
  #bewerten .split>div:last-child{order:1}
  #bewerten .bleed{order:2;margin-top:36px}
}
@media (max-width:620px){
  #bewerten .bleed__img{aspect-ratio:4/3}
  #bewerten .vcard-par{position:relative;margin:-70px 12px 0;z-index:3}
  #bewerten .dash{padding:20px 20px 18px}
  #bewerten .lede{font-size:1rem}
}
/* ---------- Matching-Mockup: runde Bilder ---------- */
/* Die beiden Kreise lagen am Telefon halb unter der weissen Karte und
   wirkten dadurch gestaucht. Jetzt stehen sie vollständig darüber.
   Die Maske sorgt dafür, dass Safari das Bild auch wirklich rund
   beschneidet (sonst bleiben bei verschobenen Ebenen eckige Ränder). */
.match__ring{isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black)}
.match__ring .ph{border-radius:50%;width:100%;height:100%}
@media (max-width:620px){
  .matchart{aspect-ratio:auto;height:clamp(170px,50vw,215px)}
  .matchart .match__ring--a{left:8%;top:0;width:44%;height:auto}
  .matchart .match__ring--b{right:6%;top:14px;width:40%;height:auto}
  .matchart .match__spark{left:47%;top:-10px}
  .matchart .match__badge{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);white-space:nowrap}
  .mstage{margin-top:22px}
}
/* ---------- Kopfbereich am Telefon: Foto als Bühne ---------- */
/* Das Foto füllt den oberen Bildschirm randlos, ein Verlauf führt ins
   Schwarz, darauf stehen Google-Wertung, Überschrift und Text. Die
   Suche liegt als weisse Karte darunter und ragt in den hellen Streifen. */
@media (max-width:620px){
  .hero{padding-top:calc(var(--hdr-h) + clamp(250px,62vw,330px))}
  .hero__in{position:static}
  .hero__media{
    position:absolute!important;left:0;right:0;top:0;z-index:0;order:0;
    height:calc(var(--hdr-h) + clamp(400px,112vw,500px));aspect-ratio:auto;
    margin:0!important;border-radius:0;box-shadow:none;
  }
  .hero__media::before{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(6,6,6,.55) 0%,rgba(6,6,6,0) 22%,rgba(6,6,6,.15) 45%,rgba(6,6,6,.82) 74%,#060606 100%);
  }
  .hero__media .ph{background-position:50% 40%}
  .hero__left>div{position:relative;z-index:2}
  .hero__left>div:last-child{margin-top:26px}
  .hero h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
  /* Google-Wertung frei auf dem Foto: kein Kasten, kein Rahmen – ein
     weicher Schatten hält Sterne und Schrift lesbar. */
  .gbadge{background:none;border:0;padding:0;text-shadow:0 1px 10px rgba(0,0,0,.55)}
  .gbadge__logo,.gbadge__stars{filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
  .hero__glow{display:none}
}