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



:root{
  --ink:#000; --black:#060606; --paper:#fff;
  --stone:#d6d3cd; --stone-2:#e4e1db; --fog:#EDEBE6;
  --lime:#f8ffa1; --muted:#6d6d68; --muted-on-dark:#a3a39d;
  --hair:#00000014; --hair-dark:#ffffff1f; --line:rgba(0,0,0,.11);
  --r-lg:32px; --r-md:24px;
  --shell:1340px; --gut:clamp(20px,4.5vw,64px);
  --sec:clamp(56px,6.6vw,104px); --hdr-h:74px;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Century Gothic','Poppins','Questrial',-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.8,.28,1);
  --img-sel1:url("/bilder/i-5d5a073faa.jpg");
  --img-sel2:url("/bilder/i-a95eb1133a.jpg");
  --img-sel3:url("/bilder/i-606e3d8f7e.jpg");
  --img-ref1:url('/bilder/ref-neubau-dachterrasse.jpg');
  --img-ref2:url('/bilder/ref-wohnhaus-garten.jpg');
  --img-ref3:url('/bilder/ref-wohnung-leer.jpg');
  --img-ref4:url('/bilder/ref-landhaus-holz.jpg');
  --img-ref5:url('/bilder/ref-penthouse.jpg');
  --img-ref6:url('/bilder/ref-zweifamilienhaus.jpg');
  --img-ref7:url('/bilder/ref-wohnung-erker.jpg');
  --img-ref8:url('/bilder/ref-wohnanlage.jpg');
  --img-altbau:url("/bilder/i-40c5ce44dc.jpg");
  --img-haus:url("/bilder/i-adfde7c7c1.jpg");
  --img-wohn:url("/bilder/i-9753abb1b8.jpg");
  --img-beratung:url("/bilder/i-fc20e418a4.jpg");
  --img-kontakt:url('/bilder/kontakt-beraterin.jpg');
  --img-person:url("/bilder/i-ea301c3ed3.jpg");
  --logo:url("/bilder/i-fdd727926a.png");
  --lg1:url("/bilder/i-7228aada52.png");
  --is24:url("/bilder/i-7680e7c0ac.png");
  --is24-siegel:url('/bilder/is24-siegel.svg');
  --lg2:url("/bilder/i-6c31d87938.png");
  --lg3:url("/bilder/i-e7d21b5606.png");
  --lg4:url("/bilder/i-66f749df07.png");
  --lg5:url("/bilder/i-57ebf17010.png");
}
/* ============================================================
   BASIS
   ============================================================ */
*,*::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;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.hdr :focus-visible{outline-color:var(--lime)}

.display{font-family:var(--serif);font-weight:500;letter-spacing:0;line-height:1.04;font-size:clamp(2.5rem,6vw,4.7rem);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.3rem,2.1vw,1.7rem);margin:0}
.lead{font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.62;color:var(--muted);margin:0;max-width:60ch}
.dark .lead{color:var(--muted-on-dark)}

.wrap{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);position:relative}
.dark{background:var(--ink);color:var(--paper)}
.stone{background:var(--stone)}
.fogbg{background:var(--fog)}
.head{max-width:60ch;margin-bottom:clamp(32px,3.8vw,54px)}
.head .lead{margin-top:20px}

/* ---------- 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;white-space:nowrap;
  transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .35s var(--ease),border-color .3s;
}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--fill{background:var(--ink);color:var(--paper)}
.btn--fill:hover{background:var(--lime);color:var(--ink);transform:translateY(-2px)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:var(--lime);transform:translateY(-2px)}
.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:var(--lime);border-color:var(--lime)}
.dark .btn--ghost{border-color:var(--hair-dark);color:var(--paper)}
.dark .btn--ghost:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.btn--sm{padding:10px 20px;font-size:13.5px}

/* ============================================================
   KOPFBEREICH
   ============================================================ */
.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;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hdr.solid::before{opacity:0}
.hdr.up{transform:translateY(-100%)}
.hdr__in{position:relative;display:flex;align-items:center;height:var(--hdr-h);gap:2rem}

.wordmark{
  display:block;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{opacity:.82;transition:opacity .25s ease}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav__drop>button{display:inline-flex;align-items:center;gap:.4em;font-size:.93rem;font-weight:300;opacity:.82;transition:opacity .25s}
.nav__drop:hover>button{opacity:1}
.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:#fff;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(--fog)}
.nav .btn{opacity:1}

.burger{display:none;margin-left:auto;padding:.55rem}
.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(--gut) 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(--hair-dark)}
.mnav .sub{font-family:var(--sans);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} }

.sbar{position:fixed;left:0;top:0;height:2px;width:100%;z-index:140;background:var(--lime);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--stone);position:relative;overflow:hidden;padding:clamp(104px,12vw,150px) 0 clamp(48px,6vw,84px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(12px,2vw,34px);align-items:center}
.panel{background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:clamp(32px,3.4vw,50px);position:relative;z-index:3}
/* Der Umriss-Knopf stand mit schwarzer Schrift auf dem schwarzen
   Kasten und war damit unsichtbar. Auf dunklem Grund hell. */
.panel .btn--ghost{color:var(--paper);border-color:#ffffff3d}
.panel .btn--ghost:hover{border-color:#ffffffa6;background:#ffffff14}
.panel .display{color:var(--paper)}
.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}

/* Karten-Fächer */
.fan{position:relative;display:flex;align-items:center;justify-content:center;min-height:580px;--s:1.02}
.fan__stage{position:relative;width:520px;height:560px;flex:none;transform:scale(var(--s));margin-left:-30px}
.fcard{
  position:absolute;background:#fff;border-radius:22px;padding:10px 10px 16px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.45);
  animation:bob 8s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-10px) rotate(var(--rot,0deg))}}
.fcard__img{display:block;height:150px;border-radius:15px;background:var(--fog) center/cover no-repeat}
.fcard__loc{display:block;margin:12px 10px 0;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fcard__t{display:block;margin:5px 10px 0;font-family:var(--serif);font-weight:500;font-size:15px;line-height:1.2}
.fcard__p{display:block;margin:8px 10px 0;font-family:var(--serif);font-weight:500;font-size:20px;line-height:1}
.fcard--a{left:0;top:30px;width:236px;--rot:-3deg}
.fcard--b{right:0;top:120px;width:236px;--rot:3deg;animation-delay:1.4s}
.fcard--c{left:120px;bottom:14px;width:250px;--rot:-1deg;animation-delay:2.6s;z-index:2}
.fchip{
  position:absolute;z-index:4;background:var(--ink);color:#fff;border-radius:22px;
  padding:16px 20px;text-align:center;animation:bob 7s ease-in-out infinite .8s;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.45);
}
.fchip span{display:block;font-size:11px;line-height:1.3}
.fchip b{display:block;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1;margin-top:6px}
.fchip--new{right:14px;top:0}
.fchip--lime{
  left:24px;bottom:150px;width:76px;height:76px;padding:0;border-radius:50%;
  background:var(--lime);display:grid;place-items:center;animation-delay:2s;
}

/* ============================================================
   PARTNERLEISTE
   ============================================================ */
.band{border-bottom:1px solid var(--hair)}
.logobar{
  margin-block:clamp(34px,4.4vw,58px);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);
}
.logobar__track{display:flex;align-items:center;gap:clamp(2.4rem,5vw,4.6rem);width:max-content;animation:logoslide 34s linear infinite}
.logobar:hover .logobar__track{animation-play-state:paused}
@keyframes logoslide{to{transform:translateX(-33.333%)}}
.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;
}
.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)}

/* ============================================================
   OBJEKTE
   ============================================================ */
.objtabs{display:inline-flex;gap:.35rem;margin:0 0 clamp(24px,2.6vw,38px);background:var(--fog);border-radius:99px;padding:.32rem}
.objtab{
  display:inline-flex;align-items:center;gap:.55em;color:var(--muted);
  font-size:.95rem;padding:.62em 1.15em;border-radius:99px;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.objtab em{font-style:normal;font-size:.78em;letter-spacing:.04em;background:rgba(0,0,0,.08);border-radius:99px;padding:.18em .6em;transition:background .35s,color .35s}
.objtab:hover{color:var(--ink)}
.objtab.is-on{background:var(--ink);color:#fff}
.objtab.is-on em{background:var(--lime);color:var(--ink)}

.objpanel{display:none}
.objpanel.is-on{display:block;animation:objIn .55s var(--ease) both}
@keyframes objIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.objfoot{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(28px,3vw,44px)}

/* ============================================================
   VORTEILE / SPLIT / ABLAUF
   ============================================================ */
.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(--lime);display:grid;place-items:center;margin-bottom:24px}
.vor h3{margin:0 0 12px}
.vor p{font-size:14.8px;color:var(--muted);line-height:1.65;margin:0}
.dark .vor p{color:var(--muted-on-dark)}

.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,86px);align-items:center}
.split__body .btn{margin-top:32px}
.media-card{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--fog) center/cover no-repeat;position:relative}
.badge-lime{
  position:absolute;left:-24px;bottom:38px;width:126px;height:126px;border-radius:50%;
  background:var(--lime);color:var(--ink);display:grid;place-items:center;text-align:center;
  box-shadow:0 22px 48px -20px rgba(0,0,0,.28);
}
.badge-lime b{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1;display:block}
.badge-lime span{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;display:block;margin-top:5px}

.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:30px}
.step{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:28px 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;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}

/* Suchprofil-Karte */
.profile{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:clamp(26px,3vw,40px)}
.profile__lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.profile__val{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;margin-top:10px}
.profile__pill{background:var(--lime);border-radius:999px;padding:7px 14px;font-size:11.5px;white-space:nowrap}
.profile__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.crit{display:grid;gap:10px}
.crit div{display:flex;align-items:center;gap:12px;background:var(--fog);border-radius:14px;padding:12px 15px;font-size:14px}
.crit svg{width:17px;height:17px;flex:none;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.crit b{margin-left:auto;font-family:var(--serif);font-weight:500;font-size:1.05rem}
.profile__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.profile__meta b{display:block;font-family:var(--serif);font-weight:500;font-size:19px}
.profile__meta span{font-size:11px;color:var(--muted);display:block;margin-top:4px;line-height:1.35}

/* ============================================================
   FAQ / KONTAKT / FOOTER
   ============================================================ */
.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)}
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:#fff;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{
  position:fixed;left:50%;bottom:20px;transform:translate(-50%,140%);z-index:110;
  background:var(--ink);color:#fff;border-radius:999px;padding:9px 9px 9px 26px;
  display:flex;align-items:center;gap:22px;box-shadow:0 20px 44px -18px rgba(0,0,0,.5);
  transition:transform .55s var(--ease);width:min(560px,calc(100vw - 32px));
}
.sticky.is-on{transform:translate(-50%,0)}
.sticky span{font-size:14px}
.sticky .btn{margin-left:auto;padding:12px 22px;font-size:13.5px}

.footer{background:var(--ink);color:#fff;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:#fff}
.footer__claim{font-family:var(--serif);font-weight:500;font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.24;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}

/* ============================================================
   MOTION + RESPONSIVE
   ============================================================ */
.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}
.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)}
.split-text.in .sp i{transform:translateY(0)}
[data-par]{transform:translate3d(0,var(--py,0px),0)}
.fan__stage{transform:scale(var(--s)) translate3d(0,var(--py,0px),0)}

@media (max-width:1240px){ .fan{--s:.92;min-height:530px} }
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr}
  .fan{--s:1.06;min-height:600px}
  .fan__stage{margin-left:0}
  .split,.flow,.faq,.contact{grid-template-columns:1fr}
  .flow__side{position:static}
}
@media (max-width:760px){
  .cols3{grid-template-columns:1fr;gap:38px}
    .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px}
  .footer__claim{grid-column:1/-1}
  .badge-lime{left:auto;right:16px;bottom:-28px;width:104px;height:104px}
  .profile__meta{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fan{--s:.78;min-height:455px}
  .objtabs{display:flex;width:100%}
  .objtab{flex:1;justify-content:center}
}
@media (max-width:480px){ .fan{--s:.62;min-height:368px} }
@media (max-width:390px){ .fan{--s:.53;min-height:318px} }

@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}
  .sp i{transform:none}
  .sbar{display:none}
  [data-par],.fan__stage{transform:none}
  .fan__stage{transform:scale(var(--s))}
}




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


/* ---- Aktuelle Angebote: Verweis auf das ImmoScout24-Profil ---- */
.is24box{
  position:relative;display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(24px,3vw,52px);align-items:center;
  background:var(--paper);border:1px solid var(--hair);
  border-radius:clamp(20px,2.2vw,30px);
  padding:clamp(26px,3.2vw,52px);
  box-shadow:0 40px 86px -38px rgba(0,0,0,.42);
}
.is24box__mark{
  display:block;height:clamp(30px,3.2vw,42px);aspect-ratio:3840/2313;
  background:var(--is24) left center/contain no-repeat;margin-bottom:clamp(18px,2vw,26px);
}
.is24box h3{margin:0;max-width:26ch}
.is24box p{
  margin:clamp(12px,1.4vw,18px) 0 0;font-size:15px;line-height:1.65;
  color:var(--muted);max-width:46ch;
}
.is24box .btn{margin-top:clamp(20px,2.4vw,30px)}
.is24box__side{
  background:var(--ink);color:var(--paper);
  border-radius:clamp(16px,1.8vw,24px);
  padding:clamp(22px,2.4vw,32px);
}
.is24box__seal{
  display:block;width:clamp(64px,6.4vw,88px);height:clamp(64px,6.4vw,88px);
  background:var(--is24-siegel) center/contain no-repeat;margin-bottom:clamp(14px,1.6vw,20px);
}
.is24box__side b{display:block;font-weight:500;font-size:15px;line-height:1.3}
.is24box__side i{
  display:block;font-style:normal;font-size:12.5px;line-height:1.5;
  color:var(--muted-on-dark);margin-top:.3em;
}
.is24box__list{list-style:none;margin:clamp(16px,1.8vw,22px) 0 0;padding:0;display:grid;gap:9px}
.is24box__list li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.45}
.is24box__list svg{flex:none;margin-top:3px;stroke:var(--paper);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.is24box__circle{
  position:absolute;z-index:3;right:clamp(-10px,-.8vw,0px);top:clamp(-14px,-1.2vw,-8px);
  width:clamp(52px,5vw,70px);height:clamp(52px,5vw,70px);border-radius:50%;
  background:var(--lime);display:grid;place-items:center;
  animation:is24bob 7s ease-in-out infinite;
}
.is24box__circle svg{width:44%;height:44%;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@keyframes is24bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.is24box__circle{animation:none}}
@media (max-width:860px){
  .is24box{grid-template-columns:1fr;gap:26px}
  .is24box p{max-width:none}
}


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

/* ---------- Referenzliste auf Anfrage ---------- */
/* Steht unter der Kachelwand und ordnet sie ein: oben ist ein Auszug zu
   sehen, die ganze Liste gibt es auf Anfrage. Dunkel, damit der Abschluss
   nicht wie eine weitere Kachel wirkt. */
.reflist{
  position:relative;margin-top:clamp(30px,3.4vw,52px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,2.4vw,40px);align-items:center;
  background:var(--ink);color:var(--paper);
  border-radius:clamp(20px,2.2vw,30px);
  padding:clamp(26px,3vw,44px) clamp(24px,3vw,48px);
  box-shadow:0 40px 86px -40px rgba(0,0,0,.5);
}
.reflist__mark{
  width:clamp(46px,4.4vw,58px);height:clamp(46px,4.4vw,58px);
  border-radius:50%;background:var(--lime);display:grid;place-items:center;
}
.reflist__mark svg{
  width:46%;height:46%;fill:none;stroke:var(--ink);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.reflist h3{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.18rem,1.9vw,1.62rem);line-height:1.25;
  letter-spacing:.005em;max-width:38ch;text-wrap:balance;
}
.reflist p{
  margin:.62em 0 0;font-size:14.5px;line-height:1.62;
  color:var(--muted-on-dark);max-width:68ch;
}
/* Unter 900px passt der Knopf nicht mehr neben den Text: er bekommt eine
   eigene Zeile, bleibt aber links buendig zum Text. */
@media (max-width:900px){
  .reflist{grid-template-columns:auto minmax(0,1fr);row-gap:clamp(18px,3vw,28px)}
  .reflist .btn{grid-column:2;justify-self:start}
}
@media (max-width:520px){
  .reflist{grid-template-columns:minmax(0,1fr);text-align:left}
  .reflist .btn{grid-column:1;width:100%;justify-content:center}
  .reflist h3{max-width: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%}
}

/* ---------- Letzte schmale Stellen ---------- */
/* Beide Male eine Spalte, die nicht schrumpfen darf – siehe LIESMICH. */
.rechnung dl{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:380px){
  .objtabs{flex-wrap:wrap}
  .objtab{flex:1 1 100%;justify-content:center}
}

/* ---------- 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 ---------- */
@media (max-width:620px){
  /* Derselbe Fall wie bei der Collage: `.fan__stage` ist fest 520 × 560
     Pixel gross und wird nur optisch verkleinert. Die Höhe blieb dadurch
     bei 560, obwohl das Bild nur 300 hoch war – darüber und darunter stand
     Leere. Und bei starker Verkleinerung ragte die rechte Karte aus dem
     Bild: Von „3-Zi.-Wohnung, 599.900 €" war nur „…hnung" zu lesen.

     Jetzt läuft der Fächer über die volle Fensterbreite (die seitliche
     Polsterung der Seite wird aufgehoben) und ist so weit vergrössert,
     dass er genau hineinpasst: Die Karten sind 177 statt 125 Pixel breit,
     und alle drei sind vollständig zu sehen. */
  /* Der Fächer bleibt innerhalb der Seitenränder – vorher klebten die
     Karten am Bildschirmrand und wirkten abgeschnitten. */
  .fan{--s:.66;min-height:0;height:calc(560px * var(--s));margin-top:22px}
  .fan__stage{margin-left:0}
  /* Die mittlere Karte rückt auf die Höhe der linken. Sonst liegt die
     vordere Karte quer über ihrer Beschriftung, und von
     „3-Zi.-Wohnung, 599.900 €" bleibt nur „…ung … €" zu lesen. */
  .fan__stage .fcard--b{top:30px}
}
@media (max-width:379px){
  .fan{--s:.56}
}

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

/* ---------- Referenzkarten ---------- */
/* Aufbau wie bei „Unlängst verkauft" auf bewerten.html: kein Rahmen um die
   Karte, die Marke sitzt oben im Bild, der Titel ist auf zwei Zeilen
   begrenzt. Dadurch sind alle Karten gleich hoch und die Bilder tragen die
   Fläche, statt in einem halb leeren Kasten zu sitzen. */
.objgrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,26px);margin-top:clamp(22px,2.6vw,34px);
}
.objcard{
  display:flex;flex-direction:column;min-width:0;color:inherit;
  transition:transform .4s var(--ease);
}
.objcard:hover{transform:translateY(-4px)}
.objcard__img{
  position:relative;display:block;width:100%;aspect-ratio:4/3;
  border-radius:16px;overflow:hidden;background:var(--fog);margin-bottom:13px;
}
.objcard__img i{display:block;width:100%;height:100%;background:center/cover no-repeat;transition:transform .9s var(--ease)}
.objcard:hover .objcard__img i{transform:scale(1.05)}
.objcard__loc{
  display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);line-height:1.3;margin:0;
}
.objcard__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:6px 0 0;min-height:2.56em;
  font-family:var(--serif);font-weight:500;font-size:1.02rem;line-height:1.28;
}
/* Die Marke im Bild – helles Feld mit leichter Unschärfe dahinter, damit
   sie auf jedem Foto lesbar bleibt. */
.objcard__stand{
  position:absolute;left:10px;top:10px;
  padding:.44em .8em;border-radius:99px;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);
}
/* „Verkauft" hell, „Reserviert" limette – die Farbe trägt die Aussage,
   deshalb steht sie an der Variante und nicht an der Grundregel. */
.objcard__stand--sold{background:rgba(255,255,255,.94)}
.objcard__stand--res{background:var(--lime)}
.objcard__price{
  display:block;margin:7px 0 0;font-family:var(--serif);font-weight:500;
  font-size:1.1rem;line-height:1.1;
}
@media (max-width:1100px){.objgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.objgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){
  /* Zwei Spalten statt einer: 22 Objekte untereinander waren über
     20 Bildschirme lang. So sieht man auf einen Blick, wie viel
     vermittelt wurde – und jede Karte bleibt gut lesbar. */
  .objgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .objcard__img{aspect-ratio:1/1;border-radius:12px;margin-bottom:9px}
  .objcard__stand{left:7px;top:7px;font-size:8.5px;padding:.42em .7em}
  .objcard__loc{font-size:9px;letter-spacing:.1em}
  .objcard__title{font-size:.94rem;line-height:1.25;min-height:0;margin-top:4px;-webkit-line-clamp:3}
  .objcard__price{font-size:1rem}
}
/* 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}}