/* ---------- 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;}


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

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#000000;
  --ink-80:#1a1a1a;
  --paper:#ffffff;
  --stone:#d6d3cd;         /* warmes Marken-Grau */
  --stone-2:#e4e1db;
  --fog:#ededed;
  --lime:#f8ffa1;          /* Akzent */
  --muted:#6d6d68;
  --muted-on-dark:#a3a39d;
  --hair:#00000014;
  --hair-dark:#ffffff1f;

  --r-lg:32px;
  --r-md:24px;
  --r-sm:16px;

  --shell:1280px;
  --gut:clamp(20px,4vw,48px);
  --sec:clamp(56px,6.6vw,104px);

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

  /* Marke */
  --logo:url("/bilder/i-fdd727926a.png");
  --face:url("/bilder/i-a1b92f5865.jpg");
  --is24:url("/bilder/i-7680e7c0ac.png");
  --is24-siegel:url('/bilder/is24-siegel.svg');
  --g-mark:url("/bilder/i-fe3c50cebc.png");
  --lg1:url("/bilder/i-7228aada52.png"); --lg2:url("/bilder/i-6c31d87938.png"); --lg3:url("/bilder/i-e7d21b5606.png"); --lg4:url("/bilder/i-66f749df07.png"); --lg5:url("/bilder/i-57ebf17010.png");

  /* Platzhalterbild – hier durch url('assets/dein-bild.jpg') ersetzen */
  --ph:url("/bilder/i-46a8e48c4a.jpg");

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.72;
  font-weight:300;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--lime)}

/* ---------- Typo-Skala ---------- */
.display{
  font-family:var(--serif);font-weight:500;
  letter-spacing:0;line-height:1.04;
  font-size:clamp(2.6rem,6.4vw,5.1rem);
  margin:0;
}
.h2{
  font-family:var(--serif);font-weight:500;
  letter-spacing:0;line-height:1.1;
  font-size:clamp(2rem,4.1vw,3.4rem);
  margin:0;
}
.h3{
  font-family:var(--serif);font-weight:500;
  letter-spacing:0;line-height:1.18;
  font-size:clamp(1.35rem,2.1vw,1.75rem);
  margin:0;
}
.lead{
  font-size:clamp(1.02rem,1.35vw,1.18rem);
  line-height:1.62;color:var(--muted);margin:0;
  max-width:56ch;
}
.dark .lead{color:var(--muted-on-dark)}
.eyebrow{
  font-size:10.5px;font-weight:400;text-transform:uppercase;
  letter-spacing:.2em;color:var(--muted);margin:0 0 22px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.5}
.dark .eyebrow{color:var(--muted-on-dark)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* ---------- Layout ---------- */
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.dark{background:var(--ink);color:var(--paper)}
.stone{background:var(--stone)}
.fogbg{background:var(--fog)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:999px;
  font-size:14px;font-weight:400;letter-spacing:.02em;
  transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .35s var(--ease);
  will-change:transform;white-space:nowrap;
}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--fill{background:var(--ink);color:var(--paper)}
.btn--fill:hover{transform:translateY(-2px);box-shadow:0 12px 32px -12px #00000080}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 12px 32px -14px #00000059}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{transform:translateY(-2px)}
.btn--ghost{border:1px solid #00000026;color:var(--ink)}
.btn--ghost:hover{background:#0000000a}
.dark .btn--ghost{border-color:var(--hair-dark);color:var(--paper)}
.dark .btn--ghost:hover{background:#ffffff14}

/* ============================================================
   KOPFBEREICH – Aufbau wie auf der Startseite
   ============================================================ */
.hdr,.mnav{
  --hdr-h:74px; --white:#fff; --black:#060606;
  --line-w:rgba(255,255,255,.16); --pad:clamp(20px,4.5vw,64px);
  --f-text:var(--sans); --grey:#EDEBE6;
}
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:130;color:var(--ink);
  transition:transform .5s var(--ease),background .4s ease,backdrop-filter .4s ease,color .4s ease,box-shadow .45s var(--ease);
}
.hdr::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(214,211,205,.9),rgba(214,211,205,0));
  opacity:1;transition:opacity .4s ease;
}
.hdr.solid{background:rgba(6,6,6,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff}
.hdr.solid::before{opacity:0}
.hdr.solid{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hdr.up{transform:translateY(-100%)}
.hdr__in{position:relative;display:flex;align-items:center;height:var(--hdr-h);gap:2rem}

.wordmark{
  display:block;width:clamp(126px,12.5vw,172px);aspect-ratio:720/124;
  background:var(--logo) left center/contain no-repeat;
  filter:invert(1);transition:filter .4s var(--ease);
}
.hdr.solid .wordmark{filter:none}
.footer .wordmark{filter:none;width:clamp(140px,14vw,188px);margin-bottom:24px}

.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:.82;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;color:inherit}
.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)}
.nav .btn{opacity:1}
.btn--sm{padding:10px 20px;font-size:13.5px}
.hdr.solid .btn--light{background:var(--paper);color:var(--ink)}

.burger{display:none;margin-left:auto;background:none;border:0;padding:.55rem;cursor:pointer}
.burger span{display:block;width:24px;height:1.4px;background:currentColor;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-family:var(--serif);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:1.6rem;font-family:var(--sans);border-bottom:0}
/* Mobilmenue: Gruppen zum Aufklappen */
.mnav__g{position:relative}
.mnav__t{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}}

@media (max-width:1040px){
  .nav{display:none}
  .burger{display:block}
}

/* ============================================================
   HERO — schwarzes Panel + Widget-Collage (Signature)
   ============================================================ */
.hero{
  background:var(--stone);position:relative;overflow:hidden;
  padding:clamp(96px,11vw,132px) 0 clamp(48px,6vw,80px);
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(10px,1.6vw,26px);align-items:center;
}
.panel{
  background:var(--ink);color:var(--paper);
  border-radius:var(--r-lg);
  padding:clamp(32px,3.4vw,48px);
  position:relative;z-index:3;
}
.panel .display{color:var(--paper)}
.panel .eyebrow{color:#8f8f8a}
.panel__sub{
  color:#b4b4ae;font-size:clamp(.98rem,1.12vw,1.04rem);
  line-height:1.55;margin:20px 0 28px;max-width:40ch;
}
.panel__actions{display:flex;flex-wrap:wrap;gap:12px}
.panel__note{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--hair-dark);
  font-size:12px;color:#8f8f8a;letter-spacing:.01em;
}

/* --- Collage --- */
.collage{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:600px;--s:1;
}
.stage{
  position:relative;width:560px;height:600px;flex:none;
  transform:scale(var(--s));transform-origin:center center;margin-left:-34px;
}
.phone{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:252px;height:530px;
  background:#141414;border-radius:42px;padding:9px;
  box-shadow:0 40px 80px -30px #00000059,0 4px 10px #0000001f;
  z-index:2;
}
.phone__screen{
  width:100%;height:100%;background:var(--paper);border-radius:34px;
  overflow:hidden;display:flex;flex-direction:column;
  padding:16px 13px 0;
}
.phone__notch{
  position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:78px;height:22px;background:#141414;border-radius:999px;z-index:2;
}

/* Floating Widgets */
.chip{
  position:absolute;border-radius:26px;z-index:4;
  box-shadow:0 22px 44px -22px #00000047;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.chip--stat{
  background:var(--paper);padding:20px 24px 22px;text-align:center;width:160px;
}
.chip--stat.is-dark{background:var(--ink);color:var(--paper)}
.chip__cap{font-size:11.5px;line-height:1.3;font-weight:400;letter-spacing:.02em}
.chip__num{
  font-family:var(--serif);font-weight:400;letter-spacing:0;
  font-size:46px;line-height:1;margin-top:8px;
}
.chip--matches{left:26px;top:44px;animation-delay:.4s}
.chip--chances{right:22px;top:118px;animation-delay:1.5s}
.chip--lime{
  left:150px;top:0;width:82px;height:82px;border-radius:50%;
  background:var(--lime);display:grid;place-items:center;animation-delay:.9s;
}
.chip--chart{
  left:22px;bottom:34px;background:var(--ink);color:var(--paper);
  padding:16px 18px;width:192px;animation-delay:2.1s;
}
.chip--chart span{font-size:11px;font-weight:500;display:block;margin-bottom:10px}
.chip--face{
  left:86px;top:236px;width:112px;height:112px;border-radius:50%;
  background:var(--face) center/cover no-repeat,var(--fog);
  border:5px solid var(--paper);animation-delay:1.2s;
}
.chip--photo{
  right:36px;bottom:72px;width:154px;overflow:hidden;border-radius:22px;
  animation-delay:1.9s;box-shadow:0 26px 48px -20px #0000005c;
}
.chip--photo .slot{height:110px}
.chip--photo .tag{
  background:var(--paper);padding:9px 12px;font-size:10px;line-height:1.3;
}
.chip--photo .tag b{display:block;font-weight:500}
.chip--photo .tag i{font-style:normal;color:#8c8c87;font-size:9px}

/* ============================================================
   PARTNER-LEISTE
   ============================================================ */
.band{border-bottom:1px solid var(--hair)}
.band .logobar{margin-block:clamp(36px,4.6vw,64px)}

/* ============================================================
   VORTEILE
   ============================================================ */
.head{max-width:56ch;margin-bottom:clamp(32px,3.8vw,54px)}
.head .lead{margin-top:20px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,52px)}
.vor__ico{
  width:56px;height:56px;border-radius:50%;background:var(--fog);
  display:grid;place-items:center;margin-bottom:26px;
}
.vor h3{margin:0 0 12px}
.vor p{font-size:14.8px;color:var(--muted);line-height:1.65}

/* ============================================================
   SPLIT-BLÖCKE
   ============================================================ */
.split{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,86px);align-items:center;
}
.split--flip .split__media{order:-1}
.split__body .lead{margin-top:22px}
.split__body .btn{margin-top:34px}
.split__media{position:relative}
.media-stack{position:relative}
.media-card{border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:4/5;background:var(--ph) center/cover no-repeat,var(--fog)}
.media-card img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
/* ImmoScout24-Siegel auf dem Objektfoto */
.portal-badge{
  position:absolute;left:clamp(16px,2vw,26px);top:clamp(16px,2vw,26px);z-index:4;
  display:flex;align-items:center;gap:12px;
  background:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:18px;padding:11px 16px 11px 12px;
  box-shadow:0 14px 34px -14px #00000059;
  max-width:calc(100% - clamp(32px,4vw,52px));
}
.portal-badge__mark{
  display:block;flex:none;height:32px;aspect-ratio:3840/2313;
  background:var(--is24) center/contain no-repeat;
}
.portal-badge__txt{display:flex;flex-direction:column;gap:2px;line-height:1.25;min-width:0}
.portal-badge__txt b{font-weight:500;font-size:13px;color:var(--ink);letter-spacing:.005em}
.portal-badge__txt i{font-style:normal;font-size:11px;color:var(--muted)}

.badge-lime{
  position:absolute;z-index:3;right:-34px;top:38px;width:116px;height:116px;border-radius:50%;
  background:var(--lime);color:var(--ink);display:grid;place-items:center;text-align:center;
  box-shadow:0 22px 48px -20px #00000047;
}
.badge-lime b{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1;display:block;letter-spacing:0}
.badge-lime span{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;display:block;margin-top:5px}

/* ImmoScout24 Silber-Partner-Siegel als Mockup-Karte */
.seal{
  position:absolute;z-index:4;left:clamp(-34px,-2.6vw,-14px);bottom:-36px;
  width:min(392px,96%);
  display:flex;align-items:center;gap:15px;
  background:var(--paper);border:1px solid var(--hair);border-radius:24px;
  padding:15px 20px 15px 15px;
  box-shadow:0 36px 74px -30px #00000070;
  transform:translate3d(0,var(--py,0px),0);
}
.seal__mark{
  flex:none;display:block;width:80px;height:80px;margin:-4px 0;
  background:var(--is24-siegel) center/contain no-repeat;
}
.seal__txt{min-width:0}
.seal__txt b{display:block;font-weight:500;font-size:13.5px;line-height:1.34;color:var(--ink);letter-spacing:.005em}
.seal__txt i{display:block;font-style:normal;font-size:11.5px;line-height:1.5;color:var(--muted);margin-top:4px}
.seal__meta{display:flex;align-items:center;gap:6px;margin-top:11px;flex-wrap:wrap}
.seal__pill{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--fog);color:var(--ink);border-radius:999px;padding:4px 10px;
  font-size:9.5px;letter-spacing:.055em;text-transform:uppercase;line-height:1.4;white-space:nowrap;
}
.seal__pill--lime{background:var(--lime)}
.seal__pill svg{flex:none;display:block}

/* Bewertungs-Dashboard */
.dash{
  background:var(--paper);border-radius:var(--r-lg);padding:clamp(24px,2.8vw,36px);
  box-shadow:0 34px 70px -34px #00000038;border:1px solid var(--hair);
}
.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(--muted)}
.dash__val{font-family:var(--serif);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(--muted)}
.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(--hair);
}
.dash__meta b{display:block;font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:0}
.dash__meta span{font-size:11px;color:var(--muted);line-height:1.35;display:block;margin-top:4px}

/* ============================================================
   VERMARKTUNG — horizontale Galerie
   ============================================================ */
#vermarktung{padding-top:clamp(40px,4.4vw,70px)}
.rail{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--gut);padding-bottom:12px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}
.rail__pad{flex:none;width:max(0px,calc((100vw - var(--shell))/2))}
.tile{
  flex:none;width:min(420px,80vw);scroll-snap-align:start;
  background:var(--stone-2);border-radius:var(--r-md);
  padding:26px 26px 0;overflow:hidden;display:flex;flex-direction:column;
  min-height:400px;
}
.tile--dark{background:var(--ink);color:var(--paper)}
.tile--lime{background:var(--lime)}
.tile__k{font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:500}
.tile h3{margin:14px 0 10px;font-size:1.3rem}
.tile p{font-size:14px;line-height:1.6;color:#4a4a45;margin:0 0 24px;max-width:34ch}
.tile--dark p{color:var(--muted-on-dark)}
.tile__art{margin-top:auto}

/* Mini-Mockups in den Tiles */
.portals{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:26px}
.portal{
  background:var(--paper);border-radius:999px;padding:9px 15px;
  font-size:12px;font-weight:500;letter-spacing:-.01em;
}
.tile--dark .portal{background:#ffffff14;color:var(--paper)}
.rail__nav{display:flex;gap:10px;margin-top:26px}
.rnav{
  width:46px;height:46px;border-radius:50%;border:1px solid #00000026;
  display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.rnav:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:translateY(-2px)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
details{border-top:1px solid var(--hair)}
details:last-of-type{border-bottom:1px solid var(--hair)}
summary{
  list-style:none;cursor:pointer;padding:24px 0;
  display:flex;align-items:center;gap:20px;
  font-size:clamp(1rem,1.35vw,1.12rem);font-weight:400;letter-spacing:.005em;
}
summary::-webkit-details-marker{display:none}
.faq__ico{
  margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid #00000026;display:grid;place-items:center;
  transition:transform .4s var(--ease),background .3s,color .3s;
}
details[open] .faq__ico{transform:rotate(45deg);background:var(--ink);color:var(--paper);border-color:var(--ink)}
.faq__a{padding:0 54px 26px 0;font-size:14.8px;color:var(--muted);line-height:1.7;max-width:70ch}

/* ============================================================
   KONTAKT – Aufbau wie auf der Startseite
   ============================================================ */
.kontakt{
  --white:#fff; --ink-40:#8b8b8b; --ink-60:#5b5b5b;
  display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;
  margin-top:clamp(34px,4vw,64px);
}
.lede{color:#5b5b5b;max-width:70ch;font-size:1.02rem;margin-top:1.2rem}
.kontakt__img{
  border-radius:clamp(14px,1.6vw,22px);overflow:hidden;aspect-ratio:3/4;
  background:var(--fog) center/cover no-repeat;
  box-shadow:0 30px 66px rgba(0,0,0,.16);
}
.kontakt__form{
  background:#fff;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(--serif);font-weight:500;
  font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.15;margin:0;
}
.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:#fff;
  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);justify-content:center}
.kontakt__ok{display:none;background:var(--lime);border-radius:14px;padding:16px 18px;font-size:14px;margin-bottom:18px}
.kontakt__ok.is-on{display:block}
.kontakt__tel{
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-60);
}
.kontakt__tel a{font-family:var(--serif);font-weight:500;font-size:1.45rem;color:var(--ink);display:inline-block;margin-top:.3rem}

@keyframes fieldin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.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}

@media (max-width:1040px){
  .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}
}
@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){
  .kontakt__form.in .fgrid>div{animation:none}
}


/* ============================================================
   STICKY CTA + FOOTER
   ============================================================ */
.sticky{
  position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);
  z-index:70;background:var(--ink);color:var(--paper);
  border-radius:999px;padding:9px 9px 9px 26px;
  display:flex;align-items:center;gap:22px;
  box-shadow:0 20px 44px -18px #00000080;
  transition:transform .55s var(--ease);width:min(560px,calc(100vw - 32px));
}
.sticky.is-on{transform:translate(-50%,0)}
.sticky span{font-size:14px;letter-spacing:.01em}
.sticky .btn{margin-left:auto;padding:12px 22px;font-size:13.5px}

.footer{background:var(--ink);color:var(--paper);padding-block:clamp(56px,7vw,88px) 34px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:52px;border-bottom:1px solid var(--hair-dark)}
.footer h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8f8f8a;margin:0 0 18px;font-weight:500}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14px}
.footer ul a{color:#cfcfca;transition:color .25s}
.footer ul a:hover{color:var(--paper)}
.footer__claim{font-family:var(--serif);font-weight:500;font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.24;letter-spacing:0;max-width:16ch}
.footer__bot{display:flex;flex-wrap:wrap;gap:18px;padding-top:26px;font-size:12px;color:#77776f}
.footer__bot .sp{margin-left:auto}

/* ============================================================
   UEBERNOMMEN VON DER STARTSEITE
   Referenzen-Buehne, Google-Bewertungen, Partner-Logos
   ============================================================ */
.sec,.logobar{
  --black:#060606; --grey-2:#E4E1DB;
  --line:rgba(0,0,0,.11); --line-w:rgba(255,255,255,.16);
  --pad:clamp(20px,4.5vw,64px); --r:16px;
  --f-display:var(--serif); --f-text:var(--sans);
}
.sec h2{
  font-family:var(--serif);font-weight:500;letter-spacing:0;
  line-height:1.1;margin:0;text-wrap:balance;
}
.gscore__logo,.rev__g{display:block;background:var(--g-mark) center/contain no-repeat}
.ghead .btn{margin-top:clamp(22px,2.6vw,34px)}
.gsec .btn--ghost{border-color:#ffffff5c;color:#fff}
.gsec .btn--ghost:hover{background:#ffffff17}
.logobar .lg{
  display:block;flex:none;height:clamp(22px,2.4vw,34px);width:auto;
  background-position:center;background-size:contain;background-repeat:no-repeat;
  opacity:.5;filter:grayscale(1);transition:opacity .4s ease,filter .4s ease;
}
.logobar .lg:hover{opacity:1;filter:none}
.lg--1{aspect-ratio:265/160;background-image:var(--lg1)}
.lg--2{aspect-ratio:727/160;background-image:var(--lg2)}
.lg--3{aspect-ratio:643/160;background-image:var(--lg3)}
.lg--4{aspect-ratio:818/160;background-image:var(--lg4)}
.lg--5{aspect-ratio:486/160;background-image:var(--lg5)}
.band .logobar{margin-bottom:clamp(28px,3.6vw,50px)}
.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}
.sec.gsec>.wrap{transition:none}
.wrap{max-width:1340px;margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec);position:relative}
.sec>.wrap{position:relative;z-index:1}
.logobar{position:relative;z-index:2;margin-top:clamp(44px,5.4vw,84px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logobar__track{display:flex;align-items:center;gap:clamp(38px,5vw,86px);width:max-content;animation:logoslide 42s linear infinite}
.logobar:hover .logobar__track{animation-play-state:paused}
@keyframes logoslide{to{transform:translateX(-33.333%)}}
.logobar img{height:clamp(22px,2.4vw,34px);width:auto;display:block;opacity:.5;filter:grayscale(1);transition:opacity .4s ease,filter .4s ease}
.logobar img:hover{opacity:1;filter:none}
.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 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}
.revwrap{position:relative;z-index:2;margin-top:clamp(18px,2vw,28px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.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}
.refs h2{text-align:center;max-width:22ch;margin:0 auto;font-size:clamp(2rem,4.1vw,3.4rem)}
.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)}
.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%)}
}
.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)}
@media (max-width:620px){
.refstage{grid-template-columns:1fr;min-height:0}
.refcard--side{display:none}
.refcard--main{aspect-ratio:4/3}
}

/* ============================================================
   BILD-PLATZHALTER
   Marker ausblenden: Klasse "show-slots" am <body class="show-slots"> entfernen.
   ============================================================ */
.slot{position:relative;overflow:hidden;background:var(--ph) center/cover no-repeat,var(--fog)}
.slot > img{width:100%;height:100%;object-fit:cover;display:block}
.show-slots .slot::after{
  content:attr(data-slot);position:absolute;left:8px;top:8px;z-index:3;
  background:var(--lime);color:#000;font-family:var(--sans);
  font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 7px;border-radius:6px;pointer-events:none;white-space:nowrap;
  box-shadow:0 2px 8px #0000003d;
}
.show-slots .slot--sm::after{font-size:7px;padding:2px 5px;left:5px;top:5px;border-radius:4px}
/* Marker weicht dem ImmoScout-Siegel aus */
.show-slots .media-card::after{left:auto;right:10px;top:auto;bottom:10px}
.ava{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:var(--ph) center/cover no-repeat,var(--fog)}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava--sm{width:38px;height:38px}

/* ============================================================
   SCROLL-EFFEKTE
   ============================================================ */
/* Fortschrittsbalken */
.sbar{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:90;
  background:var(--lime);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}

/* Wort-für-Wort-Aufbau, auch für die eigenen Überschriften */
.split-text .sp i{transform:translateY(105%)}
.split-text.in .sp i{transform:translateY(0)}
.display .sp i{transition-duration:1.05s}

/* Tiefenversatz beim Scrollen */
.stage{transform:scale(var(--s)) translate3d(0,var(--py,0px),0)}
.media-card,.contact__photo,.dash{transform:translate3d(0,var(--py,0px),0)}
.dash{will-change:transform}

/* Weicher Aufzug der Medien */
.split__media.rv{transform:translateY(34px)}
.split__media.rv.in{transform:none}

/* ============================================================
   MOTION
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s 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}
.rv[data-d="4"]{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .sbar{display:none}
  .stage{transform:scale(var(--s))}
  .media-card,.contact__photo,.dash{transform:none}
  .split-text .sp i{transform:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr}
  .stage{margin-left:0}
  .flow,.split,.faq,.contact{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
}
@media (max-width:760px){
  .cols3{grid-template-columns:1fr;gap:40px}
    .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px}
  .footer__claim{grid-column:1/-1}
  .badge-lime{left:auto;right:14px;top:auto;bottom:16px;width:96px;height:96px}
  .badge-lime b{font-size:28px}
  .seal{position:static;width:100%;margin-top:18px;transform:none;padding:14px 16px;gap:14px;box-shadow:0 24px 50px -26px #00000052}
  .seal__mark{width:68px;height:68px}
  .portal-badge{gap:9px;padding:9px 13px 9px 10px;border-radius:15px}
  .portal-badge__mark{height:26px}
  .portal-badge__txt b{font-size:12px}
  .portal-badge__txt i{font-size:10px}
  .sticky{padding-left:20px;gap:12px}
  .sticky span{font-size:13px}
  .dash__meta{grid-template-columns:1fr;gap:12px}
}
/* Collage skaliert als Ganzes, damit die Komposition erhalten bleibt */
@media (max-width:1240px){ .collage{--s:.88;min-height:535px} }
@media (max-width:1080px){ .collage{--s:.96;min-height:580px} }
@media (max-width:640px){  .collage{--s:.74;min-height:450px} }
@media (max-width:480px){  .collage{--s:.6;min-height:365px} }
@media (max-width:390px){  .collage{--s:.52;min-height:320px} }



/* ---------- Kopfbereich: einheitliche Werte auf allen Seiten ---------- */
.nav a,.nav__drop>button{opacity:.88}
.nav a:hover,.nav a[aria-current],.nav__drop:hover>button{opacity:1}
.nav .btn{opacity:1}
.hdr.solid{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hdr .nav .btn--light{background:#fff;color:var(--ink)}
.hdr:not(.solid) .nav .btn--light{background:var(--ink);color:#fff}
.hdr.solid .nav .btn--light{background:#fff;color:var(--ink)}
.hdr .nav .btn--light:hover{background:var(--lime);color:var(--ink)}


/* ============================================================
   TYPOGRAFIE – normiert auf die Startseite
   h1  clamp(2.6rem, 5.2vw, 4.7rem)   Zeilenhöhe 1.04
   h2  clamp(2rem,  3.4vw, 3.05rem)   Zeilenhöhe 1.10
   h3  clamp(1.22rem, 1.9vw, 1.55rem) Zeilenhöhe 1.22
   ============================================================ */
.hero h1,.display,h1{
  font-family:var(--serif);font-weight:500;letter-spacing:0;
  font-size:clamp(2.6rem,5.2vw,4.7rem);line-height:1.04;text-wrap:balance;
}
.hero .panel h1{font-size:clamp(2.2rem,4.2vw,3.5rem)}
.h2,.sec h2,.art__side h2,.band2__q,.loccard h3,.map__head h2,.team__head h2,.offices__head h2,.mission__q{
  font-family:var(--serif);font-weight:500;letter-spacing:0;
  font-size:clamp(2rem,3.4vw,3.05rem);line-height:1.1;text-wrap:balance;
}
.band2__q,.art__side h2,.loccard h3{font-size:clamp(1.5rem,2.5vw,2.1rem)}
.mission__q{font-size:clamp(1.7rem,3.6vw,3rem)}
.h3,.q h3,.why h3,.svc h3,.tile h3,.step h3,.ins h3,.calc h3,.kontakt__form h3,.tm__name,.rcard__t,.rcard2__t,.objcard__title,.person__n,.mem__name{
  font-family:var(--serif);font-weight:500;letter-spacing:0;
  font-size:clamp(1.22rem,1.9vw,1.55rem);line-height:1.22;
}
.q h3,.why h3,.svc h3,.rcard2__t,.rcard__t,.objcard__title{font-size:clamp(1.14rem,1.5vw,1.3rem)}
.lead,.lede{font-size:1.02rem;line-height:1.72}


/* 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}

/* ---------- Mockups der Vermarktungskacheln ---------- */
/* Jede Kachel zeigt ihr eigenes Thema statt eines Geraets. Gemeinsam ist
   nur die weisse Flaeche – sie traegt auf heller, dunkler und limettener
   Kachel gleichermassen. */
.mk{
  position:relative;margin:0 6px;padding:10px;
  background:var(--paper);border-radius:14px;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.45);
}
.mk__bild{
  display:block;aspect-ratio:16/10;border-radius:8px;
  background:var(--ph) center/cover no-repeat,var(--fog);
}

/* Sucherrahmen */
.mk--sucher .mk-ecke{
  position:absolute;width:17px;height:17px;border:2px solid #fff;
  mix-blend-mode:difference;
}
/* Die Eckmarken brauchen dieselbe Spezifitaet wie die Grundregel,
   sonst gewinnt deren border-Kurzschreibweise und es bleiben Quadrate. */
.mk--sucher .mk-ecke--lo{left:20px;top:20px;border-right:0;border-bottom:0}
.mk--sucher .mk-ecke--ro{right:20px;top:20px;border-left:0;border-bottom:0}
.mk--sucher .mk-ecke--lu{left:20px;bottom:20px;border-right:0;border-top:0}
.mk--sucher .mk-ecke--ru{right:20px;bottom:20px;border-left:0;border-top:0}
.mk-fokus{
  position:absolute;left:50%;top:50%;width:40px;height:40px;
  transform:translate(-50%,-50%);border:1.5px solid #fff;border-radius:4px;
  mix-blend-mode:difference;
}

/* Browserfenster */
.mk-leiste{display:flex;align-items:center;gap:5px;padding:1px 2px 9px}
.mk-leiste i{width:7px;height:7px;border-radius:50%;background:var(--fog);flex:none}
.mk-adresse{
  margin-left:7px;flex:1 1 auto;min-width:0;
  background:var(--fog);border-radius:99px;padding:4px 10px;
  font-size:9.5px;letter-spacing:.02em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Standbild mit Abspielknopf */
.mk--film .mk-play{
  position:absolute;left:50%;top:calc(50% - 5px);transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#ffffffe8;
  display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
.mk--film .mk-play svg{width:22px;height:22px;fill:var(--ink)}
.mk-zeit{
  position:absolute;left:18px;right:18px;bottom:19px;height:3px;
  border-radius:2px;background:#ffffff59;overflow:hidden;
}
.mk-zeit i{display:block;width:38%;height:100%;background:#fff;border-radius:2px}

/* Blatt mit Textzeilen */
.mk--blatt .mk__bild{aspect-ratio:16/8}
.mk-zeilen{display:grid;gap:6px;padding:11px 3px 3px}
.mk-zeilen i{display:block;height:6px;border-radius:3px;background:var(--fog)}
.mk-marke{
  position:absolute;right:16px;top:16px;z-index:2;
  background:var(--ink);color:var(--paper);border-radius:5px;
  padding:3px 7px;font-size:9px;letter-spacing:.1em;
}

/* ---------- 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}
}

/* ---------- Leiste am unteren Rand, Telefon ---------- */
@media (max-width:620px){
  /* Zwei Zeilen sind das Höchste – sonst verdeckt die Leiste den Inhalt. */
  .sticky{max-width:calc(100vw - 24px)}
  .sticky span{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:13px;line-height:1.32;
  }
}

/* ---------- 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}
}

/* ---------- Mockup-Collage am Telefon ---------- */
/* Die ganze Komposition wird verkleinert – Telefon, Kreis und Karten
   bleiben so zueinander, wie sie am großen Bildschirm stehen. Nur das
   Telefon allein wirkte verloren, und der grüne Kreis lag auf dem Gerät.
   Der Maßstab wirkt über transform – die Bühne belegt im Layout weiter
   560 × 600 Pixel. Die Höhe wird deshalb von Hand mitgerechnet. */
@media (max-width:620px){
  .collage{--s:.74;min-height:0;height:calc(600px * var(--s));padding:0;overflow:visible;margin-top:18px}
  .stage{animation:none}
}
@media (max-width:400px){ .collage{--s:.68} }
@media (max-width:350px){ .collage{--s:.6} }

.ph{margin-top:clamp(34px,4vw,58px)}
.ph__hinweis{
  margin:0 0 14px;font-size:12.4px;letter-spacing:.02em;color:var(--muted);
}
.ph__leiste{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ph__k{
  display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  font-family:inherit;text-align:left;cursor:pointer;
  padding:16px 16px 18px;border-radius:16px;
  border:1px solid #00000020;background:var(--paper);color:var(--ink);
  transition:background .3s var(--ease),border-color .3s var(--ease),
             color .3s var(--ease),transform .3s var(--ease);
}
.ph__k:hover{transform:translateY(-2px)}
.ph__k.is-an{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ph__n{
  font-family:var(--serif);font-weight:400;font-size:25px;line-height:1;
  opacity:.42;transition:opacity .3s var(--ease);
}
.ph__k.is-an .ph__n{opacity:.62}
.ph__kt{font-size:13.4px;line-height:1.35;letter-spacing:.01em}

.ph__buehne{margin-top:clamp(14px,1.6vw,20px)}
.ph__p{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  background:var(--paper);border-radius:22px;overflow:hidden;
}
/* Ohne Skript stünden sechs Tafeln untereinander – lesbar, aber ohne die
   Leiste darüber, weil deren Knöpfe dann nichts tun. Erst das Skript setzt
   `is-bereit` und blendet alles bis auf die gewählte Tafel aus. */
.ph:not(.is-bereit) .ph__leiste,.ph:not(.is-bereit) .ph__hinweis{display:none}
.ph:not(.is-bereit) .ph__p + .ph__p{margin-top:14px}
.ph.is-bereit .ph__p{display:none}
.ph.is-bereit .ph__p.is-an{display:grid}
.ph__b{
  width:100%;height:100%;min-height:100%;aspect-ratio:4/3;
  object-fit:cover;display:block;background:var(--fog);
}
.ph__inhalt{padding:clamp(24px,2.8vw,44px);min-width:0}
.ph__marke{
  display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.ph__h{margin:9px 0 0;font-size:clamp(1.3rem,2.1vw,1.78rem)}
.ph__block{margin-top:clamp(18px,1.9vw,26px)}
.ph__bh{
  margin:0 0 8px;font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
}
.ph__liste{margin:0;padding:0;list-style:none}
.ph__liste li{
  position:relative;padding-left:20px;margin-top:7px;
  font-size:14.5px;line-height:1.62;color:var(--muted);hyphens:auto;
}
.ph__liste li:first-child{margin-top:0}
.ph__liste li::before{
  content:"";position:absolute;left:3px;top:.62em;
  width:7px;height:1px;background:var(--ink);opacity:.45;
}
.ph__block p{margin:0;font-size:14.5px;line-height:1.62;color:var(--muted)}
.ph__hw{
  margin:clamp(18px,1.9vw,26px) 0 0;padding-top:14px;border-top:1px solid #00000016;
  font-size:12.8px;line-height:1.6;color:var(--muted);
}

@media (max-width:1040px){
  .ph__leiste{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .ph__p{grid-template-columns:minmax(0,1fr)}
  .ph__b{min-height:0;aspect-ratio:16/10}
}
@media (max-width:520px){
  .ph__leiste{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ph__k{padding:13px 13px 15px;gap:6px;border-radius:13px}
  .ph__n{font-size:21px}
  .ph__kt{font-size:12.6px}
}
/* ---------- Mockup im Kopf: zurückgeholte Regeln ---------- */
.ph-time{font-size:9.5px;font-weight:600;letter-spacing:.02em;margin-bottom:16px}
.ph-h{font-family:var(--serif);font-size:20px;line-height:1.15;letter-spacing:0;font-weight:500}
.ph-sub{font-size:9.5px;color:#9a9a95;margin-bottom:13px}
.ph-block{border-top:1px solid var(--hair);padding:9px 0}
.ph-lbl{font-size:9px;color:#8c8c87;display:flex;justify-content:space-between}
.ph-row{
  display:flex;align-items:center;gap:7px;font-size:9.5px;
  padding:5px 0;color:#2b2b2b;
}
.ph-dot{width:13px;height:13px;border-radius:50%;background:var(--fog);flex:none}
.ph-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:9px 0}
.ph-card{border-radius:12px;padding:8px 9px;background:var(--fog)}
.ph-card--dark{background:var(--ink);color:var(--paper)}
.ph-card b{display:block;font-family:var(--serif);font-size:18px;font-weight:500;letter-spacing:0;line-height:1.1;margin-top:2px}
.ph-card span{font-size:8px;opacity:.62}
.ph-list{border-top:1px solid var(--hair);padding-top:8px}
.ph-item{display:flex;align-items:center;gap:7px;padding:4px 0}
.ph-thumb{width:22px;height:22px;border-radius:6px;background:var(--ph) center/cover no-repeat,var(--fog);flex:none}
.ph-item small{font-size:8.5px;line-height:1.25;display:block}
.ph-item .ok{margin-left:auto;font-size:8px;color:#2e7d32;white-space:nowrap}
.ph--ref1{background-image:url('/bilder/ref-neubau-dachterrasse.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')}
.rv:not(.in) .tref__bar i{width:0}
.rv.in .tref__bar i{width:var(--w);transition:width 1.05s var(--ease)}
.rv.in .tref__z:nth-child(2) .tref__bar i{transition-delay:.13s}
.rv.in .tref__z:nth-child(3) .tref__bar i{transition-delay:.26s}
.rv:not(.in) .tref__bar i{width:0}
.rv.in .tref__bar i{width:var(--w);transition:width 1.05s var(--ease)}
.rv.in .tref__z:nth-child(2) .tref__bar i{transition-delay:.13s}
.rv.in .tref__z:nth-child(3) .tref__bar i{transition-delay:.26s}
/* Die globale Regel für „weniger Bewegung" setzt nur die Dauer auf null,
   nicht die Verzögerung – sonst träfe der dritte Balken 260 ms später ein. */
@media (prefers-reduced-motion:reduce){
  .rv.in .tref__z .tref__bar i{transition-delay:0s}
}
.rv:not(.in) .tref__bar i{width:0}
.rv.in .tref__bar i{width:var(--w);transition:width 1.05s var(--ease)}
.rv.in .tref__z:nth-child(2) .tref__bar i{transition-delay:.13s}
.rv.in .tref__z:nth-child(3) .tref__bar i{transition-delay:.26s}
/* Die globale Regel für „weniger Bewegung" setzt nur die Dauer auf null,
   nicht die Verzögerung – sonst träfe der dritte Balken 260 ms später ein. */
@media (prefers-reduced-motion:reduce){
  .rv.in .tref__z .tref__bar i{transition-delay:0s}
}
.rv:not(.in) .tref__bar i{width:0}
.rv.in .tref__bar i{width:var(--w);transition:width 1.05s var(--ease)}
.rv.in .tref__z:nth-child(2) .tref__bar i{transition-delay:.13s}
.rv.in .tref__z:nth-child(3) .tref__bar i{transition-delay:.26s}
/* Die globale Regel für „weniger Bewegung" setzt nur die Dauer auf null,
   nicht die Verzögerung – sonst träfe der dritte Balken 260 ms später ein. */
@media (prefers-reduced-motion:reduce){
  .rv.in .tref__z .tref__bar i{transition-delay:0s}
}
.rv:not(.in) .tref__bar i{width:0}
.rv.in .tref__bar i{width:var(--w);transition:width 1.05s var(--ease)}
.rv.in .tref__z:nth-child(2) .tref__bar i{transition-delay:.13s}
.rv.in .tref__z:nth-child(3) .tref__bar i{transition-delay:.26s}
/* Die globale Regel für „weniger Bewegung" setzt nur die Dauer auf null,
   nicht die Verzögerung – sonst träfe der dritte Balken 260 ms später ein. */
@media (prefers-reduced-motion:reduce){
  .rv.in .tref__z .tref__bar i{transition-delay:0s}
}

/* ---------- 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}
}

/* ---------- Ablauf: die Urfassung auf beigem Grund ---------- */
/* Links die Überschrift mit Vorspann und Knopf, rechts die sechs Schritte
   offen untereinander. Aufbau und Masse wie am Anfang – nur steht der
   Abschnitt jetzt auf dem Marken-Beige statt auf Schwarz.
   Was dafür umgefärbt werden musste, steht an den Regeln selbst. */
.flow{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);
}
.flow__side{position:sticky;top:112px;align-self:start}
.flow__side .btn{margin-top:32px}

/* ----- Der Zeitstrahl ----- */
/* Links neben den Nummern läuft eine Linie mit. Sie füllt sich, während
   man scrollt; jeder Punkt springt an, sobald sein Schritt die Lesehöhe
   erreicht – und erst dann geht auch sein Text auf. Zugeklappt sieht man
   die sechs Überschriften auf einen Blick statt sechs Absätze auf einmal. */
.flow__steps{position:relative;--spur:clamp(26px,3vw,38px);padding-left:var(--spur)}
.flow__bahn{
  position:absolute;left:calc(var(--spur) / 2 - .5px);top:0;bottom:0;width:1px;
  background:#00000018;overflow:hidden;border-radius:1px;
}
.flow__bahn i{display:block;width:100%;height:0;background:var(--ink);opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .flow__bahn i{transition:height .3s linear}
}
.step__punkt{
  position:absolute;left:calc(var(--spur) / -2 - 4.5px);top:34px;
  width:9px;height:9px;border-radius:50%;
  background:var(--stone);box-shadow:0 0 0 1px #00000038;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),
             transform .4s var(--ease);
}
.step.is-an .step__punkt{
  background:var(--ink);box-shadow:0 0 0 1px var(--ink);transform:scale(1.15);
}
/* Der Text steht von Anfang an in voller Höhe da und wird nur blasser
   gezeigt, bis sein Schritt die Lesehöhe erreicht. Vorher klappte er
   beim Scrollen auf – dabei wuchs die Seite unter dem Finger, alles
   darunter sprang nach unten, und das Scrollen ruckelte. */
.step__k{min-width:0}
.step__auf{opacity:.32;transform:translateY(6px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.step__auf > p{padding-top:9px}
.step.is-an .step__auf{opacity:1;transform:none}
.flow__steps:not(.is-bereit) .step__auf{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .step__auf{transition:none}
}

.step{
  position:relative;
  display:grid;grid-template-columns:64px 1fr;gap:22px;
  padding:30px 0;
  /* Vorher `--hair-dark` (Weiss auf Schwarz). Auf Beige braucht es die
     dunkle Haarlinie, sonst ist die Trennung unsichtbar. */
  border-top:1px solid var(--hair);
}
.step:last-child{border-bottom:1px solid var(--hair)}
/* Vorher `--paper` beziehungsweise `--muted-on-dark`.
   Die Werte sind nachgerechnet, nicht geschätzt – gegen das Beige
   `#d6d3cd` (WCAG-Kontrast):
     `--muted` #6d6d68 → 3,48:1   zu wenig für Fliesstext
     #545450           → 5,09:1   nimmt der Abschnitt
     #76736c           → 3,17:1   reicht für die 32px-Ziffer (ab 24px gilt 3:1)
     Limette #f8ffa1   → 1,41:1   auf Beige praktisch unsichtbar */
/* Der Abstand unter der Überschrift sitzt als Polsterung im Absatz, nicht
   als Aussenabstand an der Überschrift: sonst bleiben 9 Pixel Luft stehen,
   während der Text noch zugeklappt ist. */
.step h3{margin:0;color:var(--ink)}
.step p{font-size:14.5px;color:#545450;line-height:1.62;margin:0}
.flow__side .lead{color:#545450}
.step__n{
  font-family:var(--serif);font-weight:400;font-size:32px;line-height:1;
  letter-spacing:0;transition:color .4s var(--ease);
  color:#9b978f;
}
/* Vorher sprang die Ziffer beim Überfahren auf Limette. Auf Beige ist
   `#f8ffa1` praktisch unsichtbar – jetzt wird sie dunkel, sobald der
   Schritt dran ist. */
.step.is-an .step__n,.step:hover .step__n{color:#5a5750}

/* Die Seite hat weiter oben schon eine Regel, die `.flow` unter 1081
   Pixeln einspaltig stellt. Sie greift hier aber nicht mehr: Dieser Block
   steht am Ende des Stylesheets, hat dieselbe Spezifität und gewinnt
   deshalb durch die Reihenfolge. Also muss der Umbruch hier noch einmal
   stehen – sonst quetschen sich am Telefon zwei Spalten nebeneinander. */
@media (max-width:1080px){
  .flow{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vw,40px)}
  .flow__side{position:static}
}
@media (max-width:620px){
  .flow__steps{--spur:20px}
  .step{grid-template-columns:44px 1fr;gap:16px;padding:24px 0}
  .step__n{font-size:25px}
  .step__punkt{top:28px}
  .flow__side .btn{width:100%;justify-content:center}
}

/* ---------- „Passende Interessenten": schwarze Karte auf Beige ---------- */
/* Der Abschnitt stand auf Schwarz. Jetzt trägt ihn dasselbe Marken-Beige
   wie den Ablauf, und die Liste wird zur schwarzen Karte darauf – wie die
   dunklen Kacheln in der Vermarktung. Die Werte sind unverändert. */
/* `--muted` ergibt auf dem Beige nur 3,48:1. Derselbe dunklere Ton wie im
   Ablauf, nachgerechnet: 5,09:1. */
.sucht .lead{color:#545450}

.tref{
  background:var(--ink);color:var(--paper);
  border-radius:24px;padding:clamp(22px,2.6vw,34px);
  box-shadow:0 34px 64px -44px rgba(0,0,0,.75);
}
.tref__kopf{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:clamp(16px,1.8vw,22px);
}
.tref__lbl{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-on-dark);min-width:0;
}
/* Die einzige Farbe auf der Karte. Drei limettengrüne Prozentzahlen
   dazu wären zu viel – die stehen deshalb in Weiss. */
.tref__zahl{
  background:var(--lime);color:var(--ink);border-radius:999px;
  padding:6px 13px;font-size:11.5px;font-weight:500;white-space:nowrap;flex:none;
}
.tref__liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tref__z{
  display:flex;align-items:center;gap:14px;min-width:0;
  background:#ffffff0f;border-radius:16px;padding:14px 16px;
}
/* Vorher ein `slot`-Feld – das malt eine limettengrüne Marke „FOTO"
   darüber. Initialen brauchen kein Bild und keinen Platzhalter. */
.tref__ini{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:#ffffff1c;
  font-family:var(--serif);font-size:15px;line-height:1;color:var(--paper);
}
.tref__txt{display:grid;gap:3px;min-width:0}
.tref__txt b{
  font-weight:500;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tref__txt small{
  font-size:12px;color:var(--muted-on-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Derselbe Wert wie die Zahl rechts, nur als Länge. */
.tref__bar{
  display:block;height:3px;border-radius:2px;background:#ffffff1f;
  margin-top:5px;overflow:hidden;
}
/* Die Balken wachsen, sobald die Karte ins Bild kommt – nacheinander,
   nicht alle auf einmal. Gehängt ist das an die vorhandene `.rv`/`.in`-
   Mechanik der Seite: ohne sie stünden die Balken gleich auf voller
   Länge, und bei „weniger Bewegung" schaltet die globale Regel die
   Dauer ohnehin auf null. */
.tref__bar i{
  display:block;height:100%;border-radius:2px;background:#ffffffd6;
  width:var(--w);
}
.rv:not(.in) .tref__bar i{width:0}
.rv.in .tref__bar i{width:var(--w);transition:width 1.05s var(--ease)}
.rv.in .tref__z:nth-child(2) .tref__bar i{transition-delay:.13s}
.rv.in .tref__z:nth-child(3) .tref__bar i{transition-delay:.26s}
/* Die globale Regel für „weniger Bewegung" setzt nur die Dauer auf null,
   nicht die Verzögerung – sonst träfe der dritte Balken 260 ms später ein. */
@media (prefers-reduced-motion:reduce){
  .rv.in .tref__z .tref__bar i{transition-delay:0s}
}
.tref__p{
  margin-left:auto;flex:none;white-space:nowrap;
  font-family:var(--serif);font-weight:500;font-size:24px;line-height:1;
}
.tref__p i{font-style:normal;font-size:13px;opacity:.55}
.tref__fuss{
  margin:clamp(16px,1.8vw,22px) 0 0;
  font-size:12px;line-height:1.55;color:#908f87;
}

@media (max-width:620px){
  /* Nebeneinander kürzt die Zeile sauber mit „…". Am Telefon bliebe davon
     „Kapitalanleger M. · Hambu…" übrig – dort wird lieber umbrochen. */
  .tref__txt b,.tref__txt small{white-space:normal;overflow:visible}
  .tref__z{align-items:flex-start}
  .tref__ini,.tref__p{margin-top:2px}
}
@media (max-width:520px){
  .tref{border-radius:20px;padding:20px 16px}
  .tref__z{gap:11px;padding:12px 13px}
  .tref__ini{width:34px;height:34px;font-size:14px}
  .tref__p{font-size:21px}
  .sucht .split__body .btn{width:100%;justify-content:center}
}
/* Fusszeile der Google-Bewertungen – fehlte auf dieser Seite. */
.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}
/* 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}}