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

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

/* ============================================================
   ABLAUF (dunkel, editorial)
   ============================================================ */
.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}
.step{
  display:grid;grid-template-columns:64px 1fr;gap:22px;
  padding:30px 0;border-top:1px solid var(--hair-dark);
}
.step:last-child{border-bottom:1px solid var(--hair-dark)}
.step__n{
  font-family:var(--serif);font-weight:400;font-size:32px;line-height:1;
  color:#5e5e59;letter-spacing:0;transition:color .4s var(--ease);
}
.step:hover .step__n{color:var(--lime)}
.step h3{margin:0 0 9px;color:var(--paper)}
.step p{font-size:14.5px;color:var(--muted-on-dark);line-height:1.62;margin:0}

/* ============================================================
   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 */
.mock-laptop{background:#1c1c1c;border-radius:12px 12px 0 0;padding:8px 8px 0;margin:0 8px}
.mock-laptop__scr{background:var(--paper);border-radius:6px;overflow:hidden;aspect-ratio:16/10;padding:9px}
.mock-bar{height:6px;border-radius:3px;background:var(--fog);margin-bottom:6px}
.mock-hero{height:74px;border-radius:6px;background:var(--ph) center/cover no-repeat,var(--fog);margin-bottom:8px;position:relative;overflow:hidden}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mock-grid i{display:block;height:30px;border-radius:4px;background:var(--ph) center/cover no-repeat,var(--fog)}
.mock-phone{
  width:132px;margin:0 auto;background:#141414;border-radius:20px;padding:5px 5px 0;
}
.mock-phone__scr{background:var(--paper);border-radius:16px 16px 0 0;padding:9px;min-height:150px}
.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:16/10}
  .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)}

.ph{position:relative;width:100%;height:100%;overflow:hidden;background:var(--grey-2) center/cover no-repeat}
.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}
.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--ref10{background-image:url('/bilder/ref-landhaus-portikus.jpg');background-position:center}
.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}
  .flow__side{position:static}
  .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}


/* ============================================================
   BEWERTUNGSFUNNEL
   ============================================================ */
.fnpage{background:var(--stone);padding-top:calc(var(--hdr-h, 74px) + clamp(34px,5vw,74px));padding-bottom:clamp(50px,6vw,96px);position:relative;overflow:hidden}
.fnpage::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(to bottom,transparent,var(--paper));pointer-events:none;
}
.fnpage>.shell{position:relative;z-index:1}
.fngrid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(30px,4vw,68px);align-items:start}

/* ---------- Linke Spalte: Argumente + Vertrauen ---------- */
.fnside{position:sticky;top:calc(var(--hdr-h, 74px) + 26px)}
.fnside h1{
  font-family:var(--serif);font-weight:500;letter-spacing:0;line-height:1.08;
  font-size:clamp(2.05rem,3.5vw,3.05rem);margin:0;text-wrap:balance;
}
.fnside__sub{margin-top:1.1rem;color:#4e4e49;font-size:1rem;line-height:1.66;max-width:44ch}
.fnplus{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;display:grid;gap:13px}
.fnplus li{display:flex;align-items:flex-start;gap:12px;font-size:14.6px;line-height:1.5;color:var(--ink)}
.fnplus i{
  flex:none;width:21px;height:21px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;margin-top:1px;
}

/* Trust-Karten */
.fntrust{display:grid;gap:12px;margin-top:clamp(24px,2.8vw,34px)}
.fntrust__card{
  background:var(--paper);border-radius:18px;padding:14px 18px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 20px 44px -26px #00000052;
}
.fntrust__g{flex:none;width:30px;height:30px;background:var(--g-mark) center/contain no-repeat}
.fntrust__num{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1}
.fntrust__stars{display:flex;gap:2px}
.fntrust__stars svg{width:13px;height:13px;fill:#FBBC04}
.fntrust__t{font-size:12.4px;color:var(--muted);line-height:1.4}
.fntrust__t b{display:block;color:var(--ink);font-weight:500;font-size:13px}
.fntrust__seal{flex:none;width:52px;height:52px;background:var(--is24-siegel) center/contain no-repeat}
.fntrust__pill{
  margin-left:auto;background:var(--lime);border-radius:999px;padding:4px 11px;
  font-size:9.5px;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap;
}

/* Ansprechpartner */
.fnperson{
  margin-top:14px;background:var(--ink);color:var(--paper);border-radius:18px;
  padding:16px 18px;display:flex;align-items:center;gap:14px;
}
.fnperson__ava{flex:none;width:50px;height:50px;border-radius:50%;background:var(--face) center/cover no-repeat,var(--fog)}
.fnperson__t{min-width:0;font-size:12.5px;color:var(--muted-on-dark);line-height:1.45}
.fnperson__t b{display:block;color:var(--paper);font-weight:500;font-size:13.5px}
.fnperson__tel{margin-left:auto;text-align:right;flex:none}
.fnperson__tel span{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-on-dark)}
.fnperson__tel a{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--lime)}

/* ---------- Funnel-Karte ---------- */
.fn{
  background:var(--paper);border-radius:clamp(20px,2.2vw,30px);
  box-shadow:0 44px 96px -40px #00000066;overflow:hidden;
}
.fn__head{padding:clamp(20px,2.2vw,28px) clamp(20px,2.6vw,38px) 0}
.fn__meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:11px}
.fn__step{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fn__time{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.fn__bar{height:4px;border-radius:999px;background:#00000012;overflow:hidden}
.fn__bar i{display:block;height:100%;width:16.6%;border-radius:999px;background:var(--ink);transition:width .55s var(--ease)}
.fn__body{padding:clamp(22px,2.6vw,34px) clamp(20px,2.6vw,38px) clamp(24px,2.6vw,34px)}

.fstep{display:none;animation:fnin .5s var(--ease) both}
.fstep.is-on{display:block}
@keyframes fnin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fstep{animation:none}}

.fstep__h{
  font-family:var(--serif);font-weight:500;letter-spacing:0;line-height:1.16;
  font-size:clamp(1.42rem,2.3vw,1.98rem);margin:0;text-wrap:balance;
}
.fstep__p{margin:.7rem 0 0;font-size:14.4px;color:var(--muted);line-height:1.6;max-width:52ch}
.fstep__grp{margin-top:clamp(20px,2.2vw,28px)}
.fstep__lbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

/* Objektart-Kacheln */
.ftiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(20px,2.2vw,28px)}
.ftile{position:relative}
.ftile input{position:absolute;opacity:0;width:0;height:0}
.ftile label{
  display:flex;flex-direction:column;gap:12px;cursor:pointer;
  border:1px solid #00000017;border-radius:18px;padding:18px 18px 16px;
  background:var(--paper);transition:border-color .3s ease,background .3s ease,transform .35s var(--ease),box-shadow .35s var(--ease);
  min-height:126px;
}
.ftile label:hover{transform:translateY(-2px);box-shadow:0 18px 38px -22px #00000047;border-color:#00000026}
.ftile input:checked + label{border-color:var(--ink);background:var(--lime);box-shadow:0 18px 38px -22px #00000052}
.ftile input:focus-visible + label{outline:2px solid var(--ink);outline-offset:3px}
.ftile__ico{width:34px;height:34px;color:var(--ink)}
.ftile__ico svg{width:100%;height:100%;display:block}
.ftile b{font-weight:500;font-size:14.6px;line-height:1.25;display:block}
.ftile small{display:block;font-size:11.8px;color:var(--muted);line-height:1.4;margin-top:3px}
.ftile input:checked + label small{color:#4a4a44}

/* Auswahl-Pillen */
.fopts{display:flex;flex-wrap:wrap;gap:9px}
.fopt{position:relative}
.fopt input{position:absolute;opacity:0;width:0;height:0}
.fopt label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid #00000017;border-radius:999px;padding:10px 17px;
  font-size:13.6px;line-height:1.3;transition:all .28s ease;background:var(--paper);
}
.fopt label:hover{border-color:#00000038}
.fopt input:checked + label{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fopt input:focus-visible + label{outline:2px solid var(--ink);outline-offset:3px}

/* Felder */
.fgr{display:grid;grid-template-columns:1fr 1fr;gap:clamp(13px,1.4vw,18px)}
.fgr .full{grid-column:1/-1}
.fgr--3{grid-template-columns:1fr 1fr 1fr}
.ffield label,.flabel{display:block;font-size:12.8px;margin-bottom:.42rem;color:var(--ink)}
.ffield label em,.flabel em{font-style:normal;color:var(--muted)}
.fn input[type=text],.fn input[type=email],.fn input[type=tel],
.fn input[type=number],.fn select,.fn textarea{
  width:100%;border:1px solid #0000001c;border-radius:12px;background:var(--paper);
  padding:.82em 1em;font-family:inherit;font-weight:300;font-size:.95rem;color:var(--ink);
  transition:border-color .28s ease,box-shadow .28s ease;
}
.fn textarea{min-height:96px;resize:vertical}
.fn select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 53%,calc(100% - 14px) 53%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6em;
}
.fn :is(input,select,textarea):focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px #0000000d}
.fn :is(input,select,textarea).err{border-color:#c0392b;box-shadow:0 0 0 3px #c0392b1a}
.fn input::placeholder,.fn textarea::placeholder{color:#b2b2ad}
.fsuffix{position:relative}
.fsuffix input{padding-right:3.4em}
.fsuffix span{
  position:absolute;right:15px;top:50%;transform:translateY(-50%);
  font-size:12.6px;color:var(--muted);pointer-events:none;
}

/* Checkbox */
.fcheck2{display:flex;gap:.7rem;align-items:flex-start;font-size:12.6px;color:#5b5b5b;line-height:1.55}
.fcheck2 input{width:17px;height:17px;margin-top:2px;flex:none;accent-color:#000;border-radius:4px}
.fcheck2 a{text-decoration:underline;text-underline-offset:2px}
.fcheck2.err{color:#c0392b}

/* Fehlermeldung */
.ferr{
  display:none;margin-top:16px;background:#fdecea;border-radius:12px;
  padding:11px 15px;font-size:13px;color:#a5281b;line-height:1.5;
}
.ferr.is-on{display:block}

/* Navigation im Funnel */
.fnav{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,2.4vw,30px);flex-wrap:wrap}
.fnav .btn{min-width:168px;justify-content:center}
.fback{
  display:inline-flex;align-items:center;gap:7px;font-size:13.4px;color:var(--muted);
  transition:color .25s ease;background:none;border:0;padding:8px 2px;cursor:pointer;
}
.fback:hover{color:var(--ink)}
.fnote{
  margin-top:16px;padding-top:15px;border-top:1px solid #00000010;
  font-size:12px;color:var(--muted);line-height:1.55;display:flex;align-items:flex-start;gap:9px;
}
.fnote svg{flex:none;margin-top:2px;color:var(--ink)}

/* Danke-Schritt */
.fdone{text-align:center;padding:clamp(6px,1.4vw,18px) 0}
.fdone__ico{
  width:74px;height:74px;border-radius:50%;background:var(--lime);
  display:grid;place-items:center;margin:0 auto clamp(18px,2vw,26px);
}
.fdone .fstep__h{text-align:center}
.fdone .fstep__p{margin-left:auto;margin-right:auto;text-align:center}
.fnext{display:grid;gap:11px;margin-top:clamp(22px,2.4vw,30px);text-align:left}
.fnext__i{display:flex;gap:13px;align-items:flex-start;background:var(--fog);border-radius:14px;padding:13px 16px}
.fnext__n{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:11.5px;margin-top:1px;
}
.fnext__t{font-size:13.4px;line-height:1.5;color:var(--muted)}
.fnext__t b{display:block;color:var(--ink);font-weight:500;font-size:13.8px;margin-bottom:1px}

/* Ladezustand */
.fn.is-sending{pointer-events:none}
.fn.is-sending .fn__body{opacity:.55;transition:opacity .3s ease}
.fspin{
  width:15px;height:15px;border-radius:50%;border:2px solid #ffffff4d;border-top-color:#fff;
  animation:fspin .8s linear infinite;
}
@keyframes fspin{to{transform:rotate(360deg)}}

@media (max-width:1040px){
  /* Auf schmalen Schirmen kommt zuerst, was Vertrauen schafft:
     Überschrift, die drei Punkte, Google, das Partnersiegel. Erst danach
     der Funnel – wer bis dahin scrollt, hat sich entschieden. */
  .fngrid{display:flex;flex-direction:column;gap:clamp(26px,4vw,38px)}
  .fnside{display:contents}
  .fnlead{order:1}
  .fnproof{order:2}
  .fn{order:3}
  .fnside__sub{max-width:none}
  .fnplus{margin-top:0}
  .fntrust{margin-top:22px}
}
@media (max-width:620px){
  /* Kacheln füllen die Bildschirmbreite: zwei Spalten, alle gleich hoch,
     grosse Tippfläche, die Auswahl ist auf einen Blick zu sehen. Auf sehr
     schmalen Geräten (unter 360 Pixel) eine Spalte, Symbol links. */
  .ftiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
  .ftile,.ftile label{height:100%}
  .ftile label{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;
    min-height:148px;padding:16px 14px 15px;border-radius:16px}
  .ftile label:hover{transform:none}
  .ftile__ico{width:32px;height:32px;padding:7px;box-sizing:content-box;border-radius:12px;background:#0000000a}
  .ftile input:checked + label .ftile__ico{background:#0000000f}
  .ftile b{font-size:15.5px}
  .ftile small{font-size:11.6px;line-height:1.38}
  .ftile input:checked + label::after{
    content:"";position:absolute;right:12px;top:12px;width:22px;height:22px;border-radius:50%;
    background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.4 2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
  .fn__body{padding-inline:14px}
  .fn__head{padding-inline:14px}
}
@media (max-width:359px){
  .ftiles{grid-template-columns:1fr}
  .ftile label{flex-direction:row;align-items:center;min-height:0;gap:12px;padding:12px 40px 12px 12px}
  .ftile__ico{width:24px;height:24px;padding:7px}
  .ftile__ico svg{width:24px;height:24px}
  .ftile b{font-size:14.6px}
  .fgr,.fgr--3{grid-template-columns:1fr}
  .fnav .btn{width:100%}
  .fnperson{flex-wrap:wrap}
  .fnperson__tel{margin-left:0;text-align:left;width:100%;border-top:1px solid var(--hair-dark);padding-top:11px}
}

/* ============================================================
   GOOGLE-BEWERTUNG – eigene Karte, so breit wie das Siegel darunter
   ============================================================ */
.gbadge{
  display:block;background:var(--paper);border-radius:18px;overflow:hidden;
  border-top:4px solid var(--lime);color:var(--ink);
  box-shadow:0 20px 44px -26px #00000052;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.gbadge:hover{transform:translateY(-2px);box-shadow:0 26px 52px -26px #0000005e}
.gbadge__top{display:flex;align-items:center;gap:clamp(13px,1.6vw,18px);
  padding:clamp(15px,1.8vw,19px) clamp(16px,1.9vw,20px) clamp(13px,1.5vw,16px)}
.gbadge__g{flex:none;width:clamp(38px,4.2vw,46px);aspect-ratio:1;
  background:var(--g-mark) center/contain no-repeat}
.gbadge__main{display:block;min-width:0;flex:1 1 auto}
.gbadge__main b{display:block;font-weight:500;font-size:clamp(14px,1.5vw,15.4px);
  line-height:1.2;letter-spacing:-.005em}
.gbadge__score{display:flex;align-items:center;gap:9px;margin-top:6px;flex-wrap:wrap}
.gbadge__score em{font-family:var(--serif);font-style:normal;font-weight:500;
  font-size:clamp(1.5rem,2.4vw,1.85rem);line-height:1;
  font-variant-numeric:tabular-nums}
.gbadge__stars{display:block;width:clamp(86px,9.5vw,104px);height:auto;flex:none}
.gbadge__score i{font-style:normal;font-size:12.4px;color:var(--muted)}
.gbadge__go{flex:none;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);
  transition:background .35s,color .35s,border-color .35s,transform .4s var(--ease)}
.gbadge:hover .gbadge__go{background:var(--ink);color:var(--paper);
  border-color:var(--ink);transform:translateX(2px)}

.gbadge__fuss{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;
  margin:0 clamp(16px,1.9vw,20px);padding:11px 0 13px;
  border-top:1px solid var(--line);
  font-size:12.4px;color:var(--muted);line-height:1.4;
}
.gbadge__fuss b{font-weight:500;color:var(--ink)}
.gbadge__fuss>span{margin-left:auto;font-size:11.4px;white-space:nowrap}

@media (max-width:420px){
  .gbadge__score i{width:100%}
  .gbadge__fuss>span{margin-left:0}
}


/* ============================================================
   SPALTEN – Text und Vertrauenselemente links enden auf derselben
   Höhe wie der Funnel rechts.
   ============================================================ */
@media (min-width:1041px){
  .fngrid{align-items:stretch}
  .fnside{position:static;display:flex;flex-direction:column;min-width:0}
  .fnlead{order:1}
  .fnproof{order:3;margin-top:auto;padding-top:clamp(22px,2.6vw,36px)}
  .fnplus{margin-top:0}
}

/* ---------- kleine Schirme ---------- */
@media (max-width:620px){
  .fnpage{padding-bottom:clamp(38px,8vw,60px)}
  .fnlead h1{font-size:clamp(1.78rem,8.2vw,2.3rem);line-height:1.1}
  .fnside__sub{margin-top:12px;font-size:14.6px;line-height:1.6}
  .fnplus{gap:11px}
  .fnplus li{font-size:14px;gap:10px}
  .fnplus i{width:19px;height:19px}
  .fntrust{gap:10px;margin-top:20px}
  .gbadge__fuss{font-size:11.8px}
  .gbadge__fuss>span{margin-left:0;flex:1 0 100%;font-size:11px;color:#8c8c86}
  .fntrust__card{padding:12px 15px;gap:12px}
  .fntrust__seal{width:44px;height:44px}
}
/* Am Telefon läuft der Funnel über die ganze Bildschirmbreite und steht
   direkt unter der Überschrift – das ist der Grund, warum man hier ist.
   Google-Karte und Partnersiegel folgen darunter. */
@media (max-width:620px){
  /* Reihenfolge: Überschrift, Google und Siegel, dann der Funnel.
     Darunter folgen nur noch „So geht es weiter" und die Referenzen. */
  .fnlead{order:1}
  .fnproof{order:2}
  .fn{order:3;margin-inline:calc(var(--gut) * -1);border-radius:0;
    box-shadow:0 -1px 0 #00000010,0 1px 0 #00000010}
  .fntrust{margin-top:16px}
  .fn__head{padding:20px var(--gut) 0}
  .fn__body{padding:22px var(--gut) 26px}
  .fngrid{gap:24px}
}
@media (max-width:380px){
  .gbadge__top{gap:11px;padding:14px 14px 11px}
  .gbadge__g{width:34px}
  .gbadge__score{gap:8px}
  .gbadge__go{display:none}
  .gbadge__fuss{margin-inline:14px}
}


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

/* ---------- 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}
}
.rv:not(.in) .wie__bogen{stroke-dashoffset:120}
.rv:not(.in) .wie__spitze{opacity:0}
.rv.in .wie__bogen{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease) .15s}
.rv.in .wie__spitze{opacity:1;transition:opacity .4s var(--ease) .85s}
.rv:not(.in) .wie__bogen{stroke-dashoffset:120}
.rv:not(.in) .wie__spitze{opacity:0}
.rv.in .wie__bogen{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease) .15s}
.rv.in .wie__spitze{opacity:1;transition:opacity .4s var(--ease) .85s}
.rv:not(.in) .wie__bogen{stroke-dashoffset:120}
.rv:not(.in) .wie__spitze{opacity:0}
.rv.in .wie__bogen{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease) .15s}
.rv.in .wie__spitze{opacity:1;transition:opacity .4s var(--ease) .85s}

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

/* ---------- „Unlängst verkauft" am Seitenende ---------- */
/* Ohne Rahmen: die Objekte stehen einzeln, wie auf der Referenzseite. */
.vk__kasten{background:none;border:0;padding:0;box-shadow:none}
/* Unter der Überschrift stand ein Fließtext („Vier von über 140
   vermittelten Immobilien …"). Er ist weg; die Objekte sprechen für sich.
   Damit fällt auch eine der Stellen weg, an denen die unbestätigte Zahl
   „über 140" steht – siehe die Liste vor dem Livegang. */
.vk__head h2{margin:0;max-width:18ch}
/* Zwischen „So geht es weiter" und dem Kasten standen zwei volle
   Abstände übereinander. Einer reicht – die beiden gehören zusammen. */
.section + #verkauft{padding-top:0}
.vk__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);margin-top:clamp(24px,2.8vw,38px);
}
.vk__obj{display:flex;flex-direction:column;min-width:0}
.vk__bild{
  position:relative;display:block;width:100%;aspect-ratio:4/3;
  border-radius:14px;overflow:hidden;
  background:var(--fog) center/cover no-repeat;margin-bottom:13px;
}
/* Die Marke sitzt im Bild, oben links. Helle Pille mit dunkler Schrift:
   die Fotos reichen von hellem Himmel bis zu dunklem Gruen, und eine helle
   Pille bleibt auf beidem lesbar. */
.vk__marke{
  position:absolute;left:10px;top:10px;
  padding:.44em .8em;border-radius:99px;
  background:rgba(255,255,255,.94);color:var(--ink);
  font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  line-height:1;box-shadow:0 6px 18px -8px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.vk__ort{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);line-height:1.3;
}
/* Zwei Zeilen fest: so stehen alle vier Karten gleich hoch, egal wie lang
   die Bezeichnung ist. */
.vk__t{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-top:6px;min-height:2.56em;
  font-family:var(--serif);font-weight:500;font-size:1.02rem;line-height:1.28;
}

@media (max-width:900px){
  .vk__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  /* Handy: Fotos über die volle Bildschirmbreite, wie die Kacheln darüber. */
  .vk__grid{grid-template-columns:minmax(0,1fr);gap:30px;margin-inline:calc(50% - 50vw + 20px)}
  .vk__bild{aspect-ratio:4/3;border-radius:14px}
  .vk__ort,.vk__t{padding-inline:2px}
  .vk__t{min-height:0}
}

/* ---------- „So geht es weiter": drei Schritte mit Pfeilen ---------- */
/* Marke, Kreis mit Zeichen, Überschrift, feiner Strich, Text – und
   dazwischen ein Pfeil, der den Weg von links nach rechts zeigt. */
.wie__h{max-width:22ch}
.wie{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(10px,1.4vw,22px);
  margin-top:clamp(32px,3.8vw,56px);
}
.wie__i{text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center}
.wie__marke{
  display:inline-block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hair-2, #00000026);
  border-radius:999px;padding:5px 13px;
}
.wie__kreis{
  display:grid;place-items:center;margin-top:clamp(16px,1.8vw,24px);
  width:clamp(92px,9.8vw,124px);aspect-ratio:1;border-radius:50%;
  border:1px solid #00000014;background:var(--paper);color:var(--ink);
  box-shadow:0 18px 38px -28px rgba(0,0,0,.5);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.wie__kreis svg{width:clamp(34px,3.6vw,46px);height:auto}
.wie__i:hover .wie__kreis{transform:translateY(-4px);box-shadow:0 24px 44px -26px rgba(0,0,0,.55)}
.wie__t{margin:clamp(16px,1.8vw,24px) 0 0;font-size:clamp(1.12rem,1.5vw,1.34rem)}
.wie__strich{display:block;width:62px;height:1px;background:#00000020;margin:14px 0}
.wie__i p{
  margin:0;font-size:14.4px;line-height:1.66;color:var(--muted);
  max-width:34ch;hyphens:auto;
}

/* Der Pfeil sitzt auf der Höhe der Kreismitte. */
.wie__pfeil{
  align-self:start;color:#00000038;
  width:clamp(44px,6vw,96px);
  margin-top:calc(clamp(16px,1.8vw,24px) + clamp(46px,4.9vw,62px) + 19px);
}
.wie__pfeil svg{display:block;width:100%;height:24px}
/* Er zeichnet sich, sobald der Abschnitt ins Bild kommt – gehängt an die
   `.rv`/`.in`-Mechanik der Seite. Ohne Skript steht er fertig da. */
.wie__bogen{stroke-dasharray:120;stroke-dashoffset:0}
.wie__spitze{opacity:1}
.rv:not(.in) .wie__bogen{stroke-dashoffset:120}
.rv:not(.in) .wie__spitze{opacity:0}
.rv.in .wie__bogen{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease) .15s}
.rv.in .wie__spitze{opacity:1;transition:opacity .4s var(--ease) .85s}

@media (max-width:900px){
  /* Untereinander: der Pfeil zeigt nach unten.
     ACHTUNG: `transform` am Pfeil selbst wäre wirkungslos – `.rv.in` setzt
     `transform:none` und gewinnt. Gedreht wird deshalb das SVG darin. */
  .wie{grid-template-columns:minmax(0,1fr);gap:0;justify-items:center}
  .wie__i p{max-width:46ch}
  .wie__pfeil{
    width:84px;height:84px;display:grid;place-items:center;align-self:center;
    margin:clamp(18px,3vw,28px) 0;
  }
  .wie__pfeil svg{width:84px;height:24px;transform:rotate(90deg)}
}
/* 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}}