/* ---------- 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{
  /* Fotos liegen als Dateien im Ordner bilder/ – zum Austauschen
     einfach die jeweilige Datei ersetzen, Name beibehalten. */
  --img-altbau-fassade:url('/bilder/altbau-fassade.jpg');
  --img-altbau-wohnraum:url('/bilder/altbau-wohnraum.jpg');
  --img-deggendorf-stadtplatz:url('/bilder/deggendorf-stadtplatz.jpg');
  --img-doppelhaus:url('/bilder/doppelhaus.jpg');
  --img-gutshof:url('/bilder/gutshof.jpg');
  --img-haus-modern:url('/bilder/haus-modern.jpg');
  --img-landhaus:url('/bilder/landhaus.jpg');
  --img-mehrfamilienhaus:url('/bilder/mehrfamilienhaus.jpg');
  --img-mehrparteienhaus:url('/bilder/mehrparteienhaus.jpg');
  --img-muenchen-marienplatz:url('/bilder/muenchen-marienplatz.jpg');
  --img-neubau-siedlung:url('/bilder/neubau-siedlung.jpg');
  --img-stadtvilla:url('/bilder/stadtvilla.jpg');
  --img-team-max:url('/bilder/team-max.jpg');
  --img-team-simon:url('/bilder/team-simon.jpg');
  --img-treppenhaus:url('/bilder/treppenhaus.jpg');
  --img-wohnanlage:url('/bilder/wohnanlage.jpg');
  --img-wohnzimmer:url('/bilder/wohnzimmer.jpg');
  --img-zweifamilienhaus:url('/bilder/zweifamilienhaus.jpg');
  --img-altbau:var(--img-altbau-fassade);
  --img-beratung:var(--img-landhaus);
  --img-haus:var(--img-haus-modern);
  --img-kontakt:url('/bilder/kontakt-beraterin.jpg');
  --img-muenchen:var(--img-muenchen-marienplatz);
  --img-person:var(--img-zweifamilienhaus);
  --img-simon:var(--img-team-simon);
  --img-wohn:var(--img-altbau-wohnraum);

  --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);
  --shell:1340px; --gut:clamp(20px,4.5vw,64px); --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);
  --logo:url("/bilder/i-fdd727926a.png");
  --g-mark:url("/bilder/i-fe3c50cebc.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,.hero :focus-visible{outline-color:var(--lime)}

.wrap{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.dark{background:var(--ink);color:var(--paper)}
.stone{background:var(--stone)}
.fogbg{background:var(--fog)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.dark .eyebrow,.hero .eyebrow{color:#b9b9b3}

.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,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,.hero .btn--ghost{border-color:var(--hair-dark);color:#fff}
.dark .btn--ghost:hover,.hero .btn--ghost:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.btn--sm{padding:10px 20px;font-size:13.5px}

/* ============================================================
   KOPFBEREICH
   ============================================================ */
.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}
.hdr{position:fixed;top:0;left:0;right:0;z-index:130;color:#fff;
  transition:transform .5s var(--ease),background .4s ease,backdrop-filter .4s ease,color .4s ease,box-shadow .45s var(--ease)}
.hdr::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,6,.75),rgba(6,6,6,0));opacity:1;transition:opacity .4s ease}
.hdr.solid{background:rgba(6,6,6,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);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}
.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}
.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}
.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} }

/* ============================================================
   HERO – vollflächiges Bild, Text unten links
   ============================================================ */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.hero__bg{position:absolute;inset:-8% 0;transform:translate3d(0,var(--py,0px),0)}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,6,.45) 0%,rgba(6,6,6,.15) 38%,rgba(6,6,6,.86) 100%)}
.hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(48px,7vw,96px)}
.hero h1{
  font-family:var(--serif);font-weight:500;letter-spacing:0;line-height:1.02;margin:0;
  font-size:clamp(2.6rem,7vw,5.6rem);max-width:15ch;
}
.hero__sub{margin-top:clamp(20px,2.4vw,32px);max-width:52ch;font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.6;color:#dedede}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,38px)}
.hero__cue{position:absolute;right:var(--gut);bottom:clamp(48px,7vw,96px);z-index:2;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#c9c9c3}
.hero__cue i{display:block;width:1px;height:52px;background:linear-gradient(#ffffff00,#ffffff99)}

/* ============================================================
   FOOTER + STICKY
   ============================================================ */
.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 .wordmark{margin-bottom:24px;width:clamp(140px,14vw,188px)}
.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)}

@media (max-width:1080px){
  .mission__cols,.story__grid,.map__grid{grid-template-columns:1fr}
  .story__side{position:static}
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(2n){border-right:0}
  .team__grid{grid-template-columns:1fr 1fr}
  .quote blockquote{grid-template-columns:1fr}
}
@media (max-width:760px){
  .team__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px}
  .footer__claim{grid-column:1/-1}
  .hero__cue{display:none}
  .mem__more{max-height:9em;opacity:1;margin-top:.8rem}
}
@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){
  *{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],.hero__bg{transform:none}
}

/* ============================================================
   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 (prefers-reduced-motion:reduce){
  .kontakt__form.in .fgrid>div{animation:none}
}


/* ============================================================
   STANDORTSEITE MÜNCHEN
   ============================================================ */
.sec{padding-block:clamp(56px,7vw,104px);position:relative}
.h2{font-family:var(--serif);font-weight:500;letter-spacing:0;line-height:1.1;margin:0;font-size:clamp(1.9rem,3.6vw,3rem)}
.h3{font-family:var(--serif);font-weight:500;letter-spacing:0;line-height:1.18;margin:0;font-size:clamp(1.22rem,1.9vw,1.55rem)}
.lead{font-size:clamp(1rem,1.28vw,1.14rem);line-height:1.7;color:var(--muted);margin:0;max-width:62ch}
.dark .lead{color:var(--muted-on-dark)}
.head{max-width:60ch;margin-bottom:clamp(28px,3.4vw,46px)}
.head .lead{margin-top:18px}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.dark .kicker{color:#9a9a94}

/* Standort-Pille im Kopf */
.hdr__loc{
  display:inline-flex;align-items:center;gap:7px;margin-left:14px;
  background:#ffffff1f;border-radius:999px;padding:.32em .8em;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.hdr__loc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.hdr.solid .hdr__loc{background:#ffffff1f}

/* Brotkrume */
.crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#c4c4be;margin:0 0 18px}
.crumb a{opacity:.75;transition:opacity .25s}
.crumb a:hover{opacity:1}
.crumb i{font-style:normal;opacity:.45}

/* ---------- Foto-Platzhalter ---------- */
.hero__bg{
  background:var(--img-muenchen) center 42%/cover no-repeat;
}
.phslot{
  position:absolute;left:50%;top:44%;translate:-50% -50%;z-index:2;text-align:center;color:#c9c9c2;
  border:1px dashed #ffffff3d;border-radius:20px;padding:26px 34px;background:#0000002e;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);max-width:min(440px,84vw);
}
.phslot svg{width:34px;height:34px;stroke:var(--lime);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.phslot b{display:block;font-weight:500;font-size:14px;color:#fff}
.phslot span{display:block;font-size:12px;margin-top:6px;line-height:1.5}
.phslot code{font-family:inherit;background:#ffffff1a;border-radius:5px;padding:.1em .45em;font-size:11.5px}

/* ---------- Kennzahlenband ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.kpi{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(20px,2.3vw,30px)}
.kpi__l{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.kpi__v{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;margin-top:12px}
.kpi__v small{font-size:.38em;color:var(--muted);font-family:var(--sans);margin-left:.3em}
.kpi__d{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:11.5px;border-radius:999px;padding:.32em .7em;background:var(--fog)}
.kpi__d.up{background:var(--lime)}
.kpi__d.down{background:#ebe8e2}
.kpi__d svg{width:11px;height:11px}

/* ---------- Chart ---------- */
.chartbox{background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(22px,2.6vw,36px);box-shadow:0 34px 70px -40px rgba(0,0,0,.32)}
.chartbox__top{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.seg{display:inline-flex;background:var(--fog);border-radius:999px;padding:.28rem;gap:.25rem}
.seg button{padding:.5em 1em;border-radius:999px;font-size:13px;color:var(--muted);transition:background .3s var(--ease),color .3s var(--ease)}
.seg button.is-on{background:var(--ink);color:#fff}
.chartbox svg{display:block;width:100%;height:auto;overflow:visible}
.cx-grid{stroke:#00000012}
.cx-axis{font-family:var(--sans);font-size:10px;fill:#9a9a95}
.cx-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx-line--w{stroke:#000}
.cx-line--h{stroke:#0000004d}
.cx-fc{stroke-dasharray:4 5}
.cx-peak{fill:#fff;stroke:#000;stroke-width:1.8}
.cx-now{fill:var(--lime);stroke:#000;stroke-width:1.9}
.cx-note{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:12px;color:var(--muted)}
.cx-note span{display:flex;align-items:center;gap:8px}
.cx-note i{width:16px;height:2px;border-radius:2px;display:block}
.src{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:16px}
.dark .src{color:#8f8f8a}

/* ---------- Rechner ---------- */
.calc{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:26px;padding:clamp(24px,2.8vw,40px);box-shadow:0 34px 70px -40px rgba(0,0,0,.3)}
.calc--dark{background:#141414;color:#fff;border-color:var(--hair-dark);box-shadow:none}
.calc h3{margin:0 0 6px}
.calc__sub{font-size:13.5px;color:var(--muted);margin:0 0 24px}
.calc--dark .calc__sub{color:var(--muted-on-dark)}
.ctrl{margin-bottom:20px}
.ctrl__l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;margin-bottom:9px}
.ctrl__l b{font-family:var(--serif);font-weight:500;font-size:1.12rem}
.ctrl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:rgba(0,0,0,.12);outline:none;
}
.calc--dark .ctrl input[type=range]{background:#ffffff29}
.ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--lime);border:2px solid #000;cursor:pointer;transition:transform .2s var(--ease);
}
.ctrl input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
.ctrl input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--lime);border:2px solid #000;cursor:pointer}
.ctrl input[type=number]{
  width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:#fff;color:var(--ink);
}
.calc--dark .ctrl input[type=number]{background:#1d1d1d;border-color:var(--hair-dark);color:#fff}
.ctrl input[type=number]:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.ctrl2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.res{display:grid;gap:2px;margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.calc--dark .res{border-color:var(--hair-dark)}
.res__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;font-size:14px}
.res__row span{color:var(--muted)}
.calc--dark .res__row span{color:var(--muted-on-dark)}
.res__row b{font-family:var(--serif);font-weight:500;font-size:1.18rem;white-space:nowrap}
.res__row--big{border-top:1px solid var(--line);margin-top:10px;padding-top:18px}
.calc--dark .res__row--big{border-color:var(--hair-dark)}
.res__row--big b{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1}
.res__row--hl b{background:var(--lime);border-radius:999px;padding:.16em .7em;color:var(--ink)}
.res__hint{font-size:11.5px;color:var(--muted);margin-top:16px;line-height:1.55}
.calc--dark .res__hint{color:#8f8f8a}
.calc .btn{margin-top:22px}

.calcgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,34px);align-items:start}
.calcgrid--side{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}

/* ---------- Fragenkarten ---------- */
.qs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.q{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.4vw,30px);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.q:hover{transform:translateY(-5px);box-shadow:0 24px 50px -30px rgba(0,0,0,.3)}
.q__t{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.q__t em{font-style:normal;background:var(--lime);color:var(--ink);border-radius:999px;padding:.28em .65em;letter-spacing:.06em}
.q h3{font-family:var(--serif);font-weight:500;font-size:1.18rem;line-height:1.24;margin:4px 0 0}
.q p{font-size:14px;color:var(--muted);line-height:1.62;margin:0}

/* ---------- Referenzen / Ansprechpartner / Karte ---------- */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.rcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:.65rem .65rem 1.15rem;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.rcard:hover{transform:translateY(-5px);box-shadow:0 24px 50px -28px rgba(0,0,0,.3)}
.rcard__img{position:relative;display:block;aspect-ratio:16/11;border-radius:14px;overflow:hidden;background:var(--fog) center/cover no-repeat}
.rcard__chip{position:absolute;left:.55rem;top:.55rem;background:var(--ink);color:#fff;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;padding:.4em .78em;border-radius:99px}
.rcard__loc{display:block;margin:1rem .5rem 0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rcard__t{display:block;margin:.45rem .5rem 0;font-family:var(--serif);font-weight:500;font-size:1.18rem;line-height:1.22}
.rcard__d{display:block;margin:.65rem .5rem 0;font-size:.95rem;color:var(--muted)}

.ppl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.person{display:flex;flex-direction:column;background:#141414;border-radius:22px;padding:.65rem .65rem 1.4rem;transition:transform .5s var(--ease)}
.person:hover{transform:translateY(-5px)}
.person__img{display:block;aspect-ratio:4/5;border-radius:16px;background:#222 center/cover no-repeat}
.person__n{display:block;margin:1.1rem .65rem 0;font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1.18}
.person__r{display:block;margin:.4rem .65rem 0;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-on-dark)}
.person p{margin:.85rem .65rem 0;font-size:13.8px;color:var(--muted-on-dark);line-height:1.62}
.person__c{margin:1.1rem .65rem 0;padding-top:.9rem;border-top:1px solid var(--hair-dark);display:grid;gap:7px;font-size:13.5px}
.person__c a{display:inline-flex;align-items:center;gap:9px;color:#e6e6e1;transition:color .25s;word-break:break-all}
.person__c a:hover{color:var(--lime)}
.person__c svg{width:14px;height:14px;flex:none;stroke:var(--lime);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.faq{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:clamp(30px,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:22px 0;display:flex;align-items:center;gap:20px;font-size:clamp(1rem,1.32vw,1.1rem)}
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 24px 0;font-size:14.6px;color:var(--muted);line-height:1.7;max-width:70ch}

.map__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,5vw,76px);align-items:center}
.mapfig svg{width:100%;height:auto;display:block;overflow:visible}
.bayern{fill:#151515;stroke:#3a3a37;stroke-width:1.4;stroke-linejoin:round}
.grid-lines{stroke:#ffffff0d;stroke-width:.8}
.pin__halo{fill:var(--lime);opacity:.16;transform-box:fill-box;transform-origin:center;animation:ping 3.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.55);opacity:.34}70%,100%{transform:scale(1.5);opacity:0}}
.pin__dot{fill:var(--lime);stroke:#060606;stroke-width:2}
.pin__lbl{font-family:var(--sans);font-size:11.5px;fill:#fff}
.pin__line{stroke:#ffffff4d;stroke-width:1;stroke-dasharray:2 3}
.pin--soft .pin__dot{fill:#6f6f69;stroke:#151515}
.pin--soft .pin__lbl{fill:#8f8f8a}
.pin--soft .pin__halo{display:none}
.stlist{list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0;border-top:1px solid var(--hair-dark)}
.stlist li{border-bottom:1px solid var(--hair-dark)}
.stlist a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:18px 0;transition:padding-inline .4s var(--ease)}
.stlist a:hover{padding-inline:10px}
.stlist .city{font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,1.8vw,1.5rem);display:block}
.stlist .meta{display:block;font-size:12.5px;color:var(--muted-on-dark);margin-top:2px}
.stlist .go{width:32px;height:32px;border-radius:50%;border:1px solid var(--hair-dark);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.stlist a:hover .go,.stlist li.is-here .go{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.stlist li.is-here .city::after{content:"Sie sind hier";font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--lime);color:var(--ink);border-radius:99px;padding:.3em .7em;margin-left:.7em;vertical-align:.28em}

@media (max-width:1080px){
  .kpis{grid-template-columns:1fr 1fr}
  .calcgrid,.calcgrid--side,.faq,.map__grid{grid-template-columns:1fr}
  .qs,.refs,.ppl{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .qs,.refs,.ppl{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .ctrl2{grid-template-columns:1fr}
  .seg{width:100%}
  .seg button{flex:1}
}


/* ---------- Stadtteil-Vergleich ---------- */
.hint{
  display:flex;gap:12px;align-items:flex-start;background:var(--lime);color:var(--ink);
  border-radius:16px;padding:14px 18px;font-size:13px;line-height:1.55;margin-bottom:clamp(20px,2.4vw,30px);
}
.hint svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round}
.hint b{font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,2.4vw,30px)}
.chip{
  border:1px solid var(--line);border-radius:999px;padding:.5em 1em;font-size:13px;
  background:#fff;color:var(--muted);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.chip:hover{color:var(--ink);border-color:rgba(0,0,0,.28)}
.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.is-off{opacity:.45}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;align-items:center}
.quick span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.quick button{border:1px solid var(--line);border-radius:999px;padding:.42em .9em;font-size:12.5px;transition:background .3s,border-color .3s}
.quick button:hover{background:var(--lime);border-color:var(--lime)}

.cmp{background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(22px,2.6vw,34px);box-shadow:0 30px 64px -40px rgba(0,0,0,.3)}
.cmp__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px}
.bars{display:grid;gap:14px}
.bar{display:grid;grid-template-columns:minmax(0,15em) 1fr auto;align-items:center;gap:16px}
.bar__n{font-size:14px;line-height:1.3}
.bar__t{height:14px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden}
.bar__t i{display:block;height:100%;border-radius:99px;background:var(--ink);width:0;transition:width .8s var(--ease)}
.bar:first-child .bar__t i{background:var(--lime);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.bar__v{font-family:var(--serif);font-weight:500;font-size:1.15rem;white-space:nowrap;min-width:6.4em;text-align:right}
.cmp__empty{color:var(--muted);font-size:14px;padding:20px 0}

.tbl{width:100%;border-collapse:collapse;margin-top:clamp(24px,3vw,38px);font-size:14px}
.tbl th{
  text-align:left;font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:0 12px 12px 0;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;
}
.tbl th:hover{color:var(--ink)}
.tbl th.is-sort::after{content:" ↓";color:var(--ink)}
.tbl td{padding:13px 12px 13px 0;border-bottom:1px solid var(--hair)}
.tbl td:first-child{font-family:var(--serif);font-weight:500;font-size:1.05rem}
.tbl td:not(:first-child){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl th:not(:first-child){text-align:right}
.tbl tr:hover td{background:#faf9f6}
.tbl .top td:first-child::after{content:"teuerster";font-family:var(--sans);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;background:var(--lime);border-radius:99px;padding:.3em .6em;margin-left:.6em;vertical-align:.2em}
@media (max-width:760px){
  .bar{grid-template-columns:1fr auto;gap:6px 12px}
  .bar__t{grid-column:1/-1;order:3}
  .tbl th:nth-child(3),.tbl td:nth-child(3){display:none}
}


/* ---------- Doppelter Umschalter am Chart ---------- */
.segs{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Erklärstreifen über die Seitenbreite ---------- */
.sec--band{padding-block:clamp(30px,3.6vw,54px)}
.band2{
  display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr) minmax(0,.4fr);
  gap:clamp(20px,3vw,52px);align-items:start;
  padding-top:clamp(24px,2.8vw,38px);border-top:1px solid var(--line);
}
.band2__q{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.18;margin:0}
.band2__t{font-size:14.8px;line-height:1.78;color:#3a3a37;margin:0;max-width:56ch}
/* Mini-Balken statt Kennzahlenzeile */
.mini{display:grid;gap:9px}
.band2:not(.in) .mini__t i{width:0!important}
.mini__r{display:grid;grid-template-columns:4.6em 1fr auto;align-items:center;gap:10px}
.mini__l{font-size:11px;color:var(--muted);letter-spacing:.06em}
.mini__t{height:9px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden}
.mini__t i{display:block;height:100%;border-radius:99px;background:rgba(0,0,0,.26);width:0;transition:width .9s var(--ease) .1s}
.mini__r.is-now .mini__t i{background:var(--ink)}
.mini__r.is-now .mini__l{color:var(--ink)}
.mini__r b{font-family:var(--serif);font-weight:500;font-size:1.05rem;white-space:nowrap;min-width:4.4em;text-align:right}
.mini__chip{
  justify-self:start;margin-top:4px;background:var(--lime);border-radius:999px;
  padding:.38em .9em;font-size:11.5px;
}

@media (max-width:1080px){
  .band2{grid-template-columns:1fr;gap:20px}
  .mini{max-width:420px}
}
@media (max-width:760px){ .segs{width:100%} .segs .seg{width:100%} }


/* ---------- Einordnung: drei kurze Aussagen ---------- */
.ins{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,44px)}
.ins__i{padding-top:26px;border-top:1px solid var(--hair-dark)}
.ins__n{
  display:inline-block;font-family:var(--serif);font-weight:500;font-size:1rem;
  background:var(--lime);color:var(--ink);border-radius:999px;padding:.2em .8em;margin-bottom:18px;
}
.ins h3{margin:0 0 12px;color:#fff}
.ins p{margin:0;font-size:14.6px;line-height:1.7;color:var(--muted-on-dark);max-width:36ch}
@media (max-width:900px){ .ins{grid-template-columns:1fr;gap:28px} }

/* ---------- Prüf-Nachweis ---------- */
.verify{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:clamp(22px,2.6vw,32px);width:max-content;max-width:100%;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:12px 20px 12px 12px;
  box-shadow:0 16px 38px -28px rgba(0,0,0,.45);
}
.verify__ava{
  position:relative;width:48px;height:48px;flex:none;border-radius:50%;
  background:var(--img-simon) center 22%/cover no-repeat;
}
.verify__ava i{
  position:absolute;right:-4px;bottom:-2px;width:21px;height:21px;border-radius:50%;
  background:var(--lime);border:2px solid #fff;display:grid;place-items:center;
}
.verify__ava svg{width:11px;height:11px;stroke:#000;stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.verify__who b{display:block;font-size:13.5px;font-weight:500;letter-spacing:.005em}
.verify__who i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.verify__meta{
  font-size:11.5px;color:var(--muted);line-height:1.5;
  padding-left:18px;border-left:1px solid var(--line);
}
@media (max-width:680px){
  .verify{width:auto;border-radius:16px;padding:14px 16px}
  .verify__meta{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:11px;width:100%}
}

/* ---------- Hinweis auf das Wertermittlungstool ---------- */
.upsell{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,2.2vw,30px);
  margin-top:clamp(22px,2.6vw,34px);
  background:#fff;color:var(--ink);
  border:1px solid var(--line);border-left:4px solid var(--lime);
  border-radius:20px;padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,32px);
  box-shadow:0 24px 54px -34px rgba(0,0,0,.45);
}
.upsell__ic{
  width:52px;height:52px;flex:none;border-radius:50%;background:var(--lime);
  display:grid;place-items:center;
}
.upsell__ic svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.upsell__txt b{display:block;font-family:var(--serif);font-weight:500;font-size:1.2rem;line-height:1.25;margin-bottom:8px}
.upsell__txt span{display:block;font-size:14px;line-height:1.65;color:var(--muted);max-width:62ch}
.upsell__cta{flex:none;white-space:nowrap}
@media (max-width:900px){
  .upsell{grid-template-columns:auto minmax(0,1fr);gap:16px}
  .upsell__cta{grid-column:1/-1;justify-content:center;width:100%}
}
@media (max-width:520px){
  .upsell{grid-template-columns:1fr}
  .upsell__ic{width:46px;height:46px}
}


/* ---------- Hero im CI der übrigen Seiten: schwarzer Block über dem Foto ---------- */
.hero{align-items:flex-end;min-height:min(92vh,840px);padding-block:clamp(104px,12vw,150px) clamp(40px,5vw,76px)}
.hero__bg::after{background:linear-gradient(180deg,rgba(6,6,6,.62) 0%,rgba(6,6,6,.1) 30%,rgba(6,6,6,.34) 100%)}
.hero__in{display:block}
.hero .panel{
  background:var(--ink);color:#fff;
  border-radius:32px;padding:clamp(30px,3.4vw,52px);
  max-width:min(660px,100%);
  box-shadow:0 44px 96px -46px rgba(0,0,0,.85);
}
.hero .panel .crumb{margin:0 0 18px;color:#8f8f8a}
.hero .panel .crumb a{color:#c9c9c2}
.hero .panel h1{font-size:clamp(2.2rem,4.4vw,3.5rem);max-width:none;line-height:1.06}
.hero .panel .hero__sub{
  margin:20px 0 0;color:#b4b4ae;max-width:44ch;
  font-size:clamp(.98rem,1.14vw,1.06rem);line-height:1.58;
}
.hero .panel .hero__acts{margin-top:28px}
.hero .panel .panel__note{
  margin:26px 0 0;padding-top:20px;border-top:1px solid var(--hair-dark);
  font-size:12px;color:#8f8f8a;letter-spacing:.01em;
}
.hero__cue{bottom:clamp(40px,5vw,76px)}
@media (max-width:760px){
  .hero .panel{border-radius:24px}
  .hero{min-height:auto}
}


/* ---------- Hero als Mockup: schwarzer Block + überlappende Bildkarte ---------- */
.hero{
  background:var(--stone);color:var(--ink);
  display:block;min-height:auto;overflow:hidden;
  padding-block:clamp(100px,11vw,142px) clamp(58px,7vw,100px);
}
.hero__grid{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1fr);align-items:center;gap:0}
.hero .panel{
  max-width:none;position:relative;z-index:3;
  box-shadow:0 38px 84px -48px rgba(0,0,0,.6);
}
.hero__shot{position:relative;z-index:2;margin-left:clamp(-76px,-4.4vw,-30px)}
.shot__img{
  border-radius:28px;aspect-ratio:4/3;overflow:hidden;
  background:var(--fog) center/cover no-repeat;
  box-shadow:0 46px 92px -42px rgba(0,0,0,.55);
}
.shot__chip{
  position:absolute;left:-46px;bottom:-28px;z-index:4;
  background:#fff;border-radius:22px;padding:16px 24px;min-width:170px;
  box-shadow:0 28px 56px -26px rgba(0,0,0,.5);
  animation:bob 8s ease-in-out infinite;
}
.shot__chip span{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.shot__chip b{display:block;font-family:var(--serif);font-weight:500;font-size:1.8rem;line-height:1;margin-top:9px}
.shot__lime{
  position:absolute;right:-24px;top:-24px;z-index:4;
  width:78px;height:78px;border-radius:50%;background:var(--lime);
  display:grid;place-items:center;box-shadow:0 22px 44px -22px rgba(0,0,0,.42);
  animation:bob 7s ease-in-out infinite 1.4s;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Kopfbereich über hellem Hero */
.hdr{color:var(--ink)}
.hdr::before{background:linear-gradient(to bottom,rgba(214,211,205,.92),rgba(214,211,205,0))}
.hdr.solid{color:#fff}
.wordmark{filter:invert(1)}
.hdr.solid .wordmark,.footer .wordmark{filter:none}
.hdr__loc{background:#0000001a}
.hdr.solid .hdr__loc{background:#ffffff1f}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__shot{margin:-34px 0 0;padding-inline:clamp(8px,3vw,26px)}
  .shot__chip{left:auto;right:6px;bottom:-22px;padding:13px 18px;min-width:0}
  .shot__chip b{font-size:1.45rem}
  .shot__lime{right:8px;top:-26px;width:64px;height:64px}
}
@media (prefers-reduced-motion:reduce){ .shot__chip,.shot__lime{animation:none} }


/* ---------- Stapelreihenfolge im Hero korrigieren ----------
   .hero__shot hatte einen eigenen z-index und damit einen eigenen
   Stapelkontext – dadurch verschwanden Kennzahl-Karte und gelber
   Kreis hinter dem schwarzen Block. Jetzt liegen alle Elemente im
   selben Kontext: Bild 2, Block 3, schwebende Elemente 6.
   -------------------------------------------------------------- */
.hero__shot{z-index:auto}
.shot__img{position:relative;z-index:2}
.hero .panel{position:relative;z-index:3}
.shot__chip,.shot__lime{z-index:6}

@media (max-width:900px){
  /* gelber Kreis rutscht in die Bildecke, damit er den Block nicht überdeckt */
  .shot__lime{right:14px;top:14px;width:58px;height:58px}
  .shot__lime svg{width:24px;height:24px}
  .shot__chip{left:auto;right:10px;bottom:-20px}
  .hero__shot{margin-top:-26px}
}


/* ---------- Bildkarte gegenüber dem schwarzen Block versetzen ---------- */
.hero__grid{align-items:start}
.hero__shot{margin-top:clamp(56px,7vw,112px)}
.hero .panel{margin-top:0}

@media (max-width:900px){
  .hero__grid{align-items:stretch}
  .hero__shot{margin-top:-26px}
}


/* ---------- Versatz etwas zurücknehmen ---------- */
.hero__shot{margin-top:clamp(28px,3.4vw,64px)}

/* ---------- Scroll-Bewegung im Hero ----------
   Die schwebenden Elemente nehmen den Tiefenversatz über --py in
   ihre eigene Schwebe-Animation auf, sonst würde die Animation den
   Versatz überschreiben. Der schwarze Block bleibt bewusst ruhig –
   er ist der Anker, um den herum sich alles bewegt.
   --------------------------------------------------------------- */
@keyframes bob{
  0%,100%{transform:translateY(var(--py,0px))}
  50%{transform:translateY(calc(var(--py,0px) - 9px))}
}
.shot__img{will-change:transform,background-position}
.shot__chip,.shot__lime{will-change:transform}

@media (max-width:900px){ .hero__shot{margin-top:-26px} }
@media (prefers-reduced-motion:reduce){
  .shot__img,.shot__chip,.shot__lime{transform:none!important;animation:none}
}




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


/* ---------- Verkaufsargumente je Standort ---------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.why__i{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:12px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.why__i:hover{transform:translateY(-5px);box-shadow:0 26px 54px -30px rgba(0,0,0,.3)}
.why__n{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--serif);font-weight:500;font-size:1.9rem;line-height:1}
.why__n small{font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.why h3{font-family:var(--serif);font-weight:500;font-size:1.2rem;line-height:1.25;margin:4px 0 0}
.why p{font-size:14.2px;line-height:1.68;color:var(--muted);margin:0}

/* ---------- Aufforderungsband ---------- */
.ctaband{background:var(--ink);color:#fff}
.ctaband__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(26px,4vw,64px);align-items:center}
.ctaband h2{color:#fff}
.ctaband p{color:var(--muted-on-dark);margin-top:16px;max-width:52ch;font-size:clamp(1rem,1.24vw,1.1rem);line-height:1.68}
.ctaband__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.8vw,34px)}
.ctaband__pts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ctaband__pts li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;color:#e4e4df;background:#ffffff0f;border-radius:14px;padding:14px 17px}
.ctaband__pts svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--lime);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Zwischen-Aufforderung ---------- */
.midcta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,30px);margin-top:clamp(24px,3vw,38px);
  background:var(--lime);border-radius:22px;padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px)}
.midcta b{font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.25;max-width:34ch}
.midcta span{font-size:13.5px;color:#4a4a45;max-width:40ch}
.midcta .btn{margin-left:auto;flex:none}
@media (max-width:1080px){ .why{grid-template-columns:1fr} .ctaband__in{grid-template-columns:1fr} .midcta .btn{margin-left:0;width:100%;justify-content:center} }


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







/* ---------- Ansprechpartner als Mockup auf Marken-Grau ---------- */
.pmock{background:var(--stone);color:var(--ink);overflow:hidden}
.pmock__grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.pmock__media{position:relative}
.pmock__img{
  border-radius:28px;aspect-ratio:4/5;position:relative;z-index:2;
  background:var(--fog) center top/cover no-repeat;
  box-shadow:0 46px 92px -42px rgba(0,0,0,.55);
}
.pmock__chip{
  position:absolute;right:-34px;bottom:44px;z-index:6;
  background:#fff;border-radius:22px;padding:16px 20px;text-align:center;min-width:150px;
  box-shadow:0 28px 56px -26px rgba(0,0,0,.45);
  animation:bob 8s ease-in-out infinite;
}
.pm__g{display:block;width:26px;height:26px;margin:0 auto 8px;background:var(--g-mark) center/contain no-repeat}
.pm__val{display:block;font-family:var(--serif);font-weight:500;font-size:2rem;line-height:1}
.pm__stars{display:flex;justify-content:center;gap:2px;margin-top:6px}
.pm__stars svg{width:12px;height:12px;fill:var(--ink)}
.pm__cnt{display:block;margin-top:7px;font-size:10.5px;color:var(--muted)}
.pmock__lime{
  position:absolute;left:-24px;top:-22px;z-index:6;width:78px;height:78px;border-radius:50%;
  background:var(--lime);display:grid;place-items:center;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.4);animation:bob 7s ease-in-out infinite 1.3s;
}
.pmock__role{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.pmock__txt p{margin:1.1rem 0 0;font-size:15px;line-height:1.76;color:#33332f;max-width:56ch}
.pmock__txt strong{font-weight:500;color:var(--ink)}
.pmock__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.7rem;padding-top:1.3rem;border-top:1px solid rgba(0,0,0,.14)}
.pmock__facts b{display:block;font-family:var(--serif);font-weight:500;font-size:1.6rem;line-height:1}
.pmock__facts span{display:block;font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.35;max-width:16ch}
.pmock__c{display:flex;flex-wrap:wrap;gap:22px;margin-top:1.5rem;font-size:13.8px}
.pmock__c a{display:inline-flex;align-items:center;gap:9px;transition:color .25s}
.pmock__c a:hover{color:#5a5a52}
.pmock__c svg{width:15px;height:15px;flex:none;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pmock__acts{display:flex;flex-wrap:wrap;gap:11px;margin-top:1.6rem}
@media (max-width:900px){
  .pmock__grid{grid-template-columns:1fr;gap:30px}
  .pmock__chip{right:10px;bottom:-24px;padding:13px 16px;min-width:0}
  .pm__val{font-size:1.6rem}
  .pmock__lime{left:auto;right:14px;top:14px;width:62px;height:62px}
  .pmock__facts{grid-template-columns:1fr 1fr}
}




/* ---------- Vertrauensblock: zwei versetzte Karten ---------- */
.tstack{position:relative;padding:6px 0 10px}
.tstack__rating{
  position:relative;z-index:3;background:#fff;color:var(--ink);
  border-radius:22px;padding:18px 24px;
  display:flex;align-items:center;gap:18px;
  margin-right:clamp(0px,5vw,72px);
  box-shadow:0 30px 62px -30px rgba(0,0,0,.75);
}
.ts__g{display:block;width:40px;height:40px;flex:none;background:var(--g-mark) center/contain no-repeat}
.ts__val{display:block;font-family:var(--serif);font-weight:500;font-size:2.35rem;line-height:1}
.ts__stars{display:flex;gap:2px;margin-top:5px}
.ts__stars svg{width:14px;height:14px;fill:var(--ink)}
.ts__cnt{margin-left:auto;text-align:right;font-size:11.5px;color:var(--muted);line-height:1.45}

.tstack__list{
  position:relative;z-index:2;background:#fff;color:var(--ink);
  border-radius:22px;padding:34px 26px 22px;
  margin:-18px 0 0 clamp(0px,5vw,72px);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.7);
}
.tstack__list ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tstack__list li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.5}
.tstack__list svg{width:16px;height:16px;flex:none;margin-top:2px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tstack__list b{font-weight:500}
.tstack__foot{display:flex;align-items:center;gap:13px;margin-top:20px;padding-top:17px;border-top:1px solid var(--line)}
.ts__ava{width:46px;height:46px;flex:none;border-radius:50%;background:var(--fog) center 14%/cover no-repeat;position:relative}
.ts__ava::after{content:"";position:absolute;right:-2px;bottom:-1px;width:14px;height:14px;border-radius:50%;background:#2f9e44;border:2px solid #fff}
.tstack__foot b{display:block;font-size:13.5px;font-weight:500}
.tstack__foot i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px}

.tstack__badge{
  position:absolute;z-index:5;right:0;top:calc(50% - 96px);
  background:var(--lime);color:var(--ink);border-radius:999px;
  padding:11px 20px;display:inline-flex;align-items:baseline;gap:9px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6);
  animation:bob 7.5s ease-in-out infinite;
}
.tstack__badge b{font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1}
.tstack__badge span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}

@media (max-width:1080px){
  .tstack__rating{margin-right:0}
  .tstack__list{margin-left:0}
  .tstack__badge{right:12px;top:auto;bottom:-14px}
}
@media (max-width:560px){
  .tstack__rating{gap:12px;padding:16px 18px}
  .ts__val{font-size:1.9rem}
  .ts__cnt{display:none}
}


/* ---------- Gelber Kreis statt Preis-Pille ---------- */
.tstack__badge{
  right:-16px;bottom:-18px;top:auto;left:auto;
  width:82px;height:82px;border-radius:50%;padding:0;
  display:grid;place-items:center;gap:0;
  background:var(--lime);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.6);
  animation:bob 7.5s ease-in-out infinite;
}
@media (max-width:1080px){
  .tstack__badge{right:14px;bottom:-24px;width:70px;height:70px}
}
@media (max-width:560px){
  .tstack__badge{width:62px;height:62px;right:12px;bottom:-20px}
  .tstack__badge svg{width:26px;height:26px}
}



.rfilter{display:flex;flex-wrap:wrap;gap:.4rem;background:var(--fog);border-radius:999px;padding:.32rem;width:max-content;max-width:100%;margin-bottom:clamp(26px,3vw,42px)}
.rfilter button{padding:.6em 1.15em;border-radius:999px;font-size:13.5px;color:var(--muted);transition:background .35s var(--ease),color .35s var(--ease)}
.rfilter button:hover{color:var(--ink)}
.rfilter button.is-on{background:var(--ink);color:#fff}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.rcard2{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:.7rem .7rem 1.3rem;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.rcard2:hover{transform:translateY(-6px);border-color:rgba(0,0,0,.2);box-shadow:0 26px 54px -28px rgba(0,0,0,.3)}
.rcard2__img{display:block;aspect-ratio:16/10;border-radius:14px;background:var(--fog) center/cover no-repeat;position:relative;overflow:hidden}
.rcard2__k{position:absolute;left:.55rem;top:.55rem;background:var(--lime);color:var(--ink);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;padding:.4em .78em;border-radius:99px}
@media (max-width:760px){.rcard2__k{font-size:.76rem;letter-spacing:.1em}}
.rcard2__t{display:block;margin:1rem .5rem 0;font-family:var(--serif);font-weight:500;font-size:clamp(1.14rem,1.5vw,1.3rem);line-height:1.25}
.rcard2__d{display:block;margin:.6rem .5rem 0;font-size:14px;color:var(--muted);line-height:1.6}
.rcard2__m{display:flex;align-items:center;gap:10px;margin:1rem .5rem 0;padding-top:.85rem;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.rcard2__m em{font-style:normal;margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
@media (max-width:1080px){ .rgrid{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .rgrid{grid-template-columns:1fr} .rfilter{width:100%} .rfilter button{flex:1} }

/* ---------- Beitragsseite ---------- */
.artikel{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:clamp(26px,4.5vw,76px);align-items:start}
.artikel__side{position:sticky;top:110px;align-self:start}
.artikel__side h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:500}
.toc{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:2px}
.toc a{display:block;padding:9px 0;font-size:13.8px;color:var(--muted);border-top:1px solid var(--line);transition:color .25s,padding-inline .35s var(--ease)}
.toc li:last-child a{border-bottom:1px solid var(--line)}
.toc a:hover{color:var(--ink);padding-inline:8px}
.artikel__keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.artikel__keys i{font-style:normal;font-size:11px;background:var(--fog);border-radius:999px;padding:.36em .75em;color:var(--muted)}

.fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(20px,2.2vw,28px);margin-bottom:clamp(26px,3vw,40px)}
.fakten b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1}
.fakten span{display:block;font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.35}

.artikel__body h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.22rem,1.9vw,1.55rem);line-height:1.22;margin:2em 0 .7em;scroll-margin-top:100px}
.artikel__body h3:first-child{margin-top:0}
.artikel__body p{font-size:15.4px;line-height:1.85;color:#2f2f2c;margin:0 0 1.1em;max-width:70ch}
.artikel__body strong{font-weight:500}
.artikel__body em{font-style:italic}
.artikel__body .hinweis{font-size:13.5px;color:var(--muted);background:var(--fog);border-radius:16px;padding:16px 20px;margin-top:1.8em}

.faq2{margin-top:clamp(34px,4vw,56px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--line)}
.faq2 h2{margin-bottom:clamp(18px,2vw,26px)}
.faq2 details{border-top:1px solid var(--line)}
.faq2 details:last-of-type{border-bottom:1px solid var(--line)}
.faq2 summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;gap:18px;font-size:1rem;font-weight:400}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 .ico{margin-left:auto;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #00000026;display:grid;place-items:center;transition:transform .4s var(--ease),background .3s,color .3s}
.faq2 details[open] .ico{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
.faq2 .antwort{padding:0 50px 22px 0;font-size:14.6px;color:var(--muted);line-height:1.75;max-width:70ch}

.weiter{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:1080px){ .artikel{grid-template-columns:minmax(0,1fr);gap:24px} .artikel__side{position:static} .weiter{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .fakten{grid-template-columns:1fr;gap:14px} .weiter{grid-template-columns:1fr} }




/* CL-ARTIKEL-CSS-START */
/* ============================================================
   ARTIKELBILDER  ·  Platzhalter, jederzeit gegen eigene Fotos
   austauschbar (siehe LIESMICH.md)
   ============================================================ */
.artbild{margin:0 0 clamp(30px,3.6vw,52px)}
.artbild__img{
  display:block;width:100%;height:auto;aspect-ratio:16/6.6;object-fit:cover;
  border-radius:clamp(18px,2.2vw,30px);background:var(--stone-2);
  box-shadow:0 34px 74px -40px rgba(0,0,0,.45);
}
.artbild figcaption{
  display:flex;flex-wrap:wrap;gap:.6em 1.2em;align-items:baseline;
  margin-top:12px;font-size:12.4px;line-height:1.5;color:var(--muted);max-width:74ch;
}
.artbild figcaption b{font-weight:500;color:var(--ink)}

/* Bild mitten im Fließtext */
.artbild--in{margin:clamp(30px,3.4vw,46px) 0}
.artbild--in .artbild__img{aspect-ratio:16/8.4;border-radius:clamp(16px,1.8vw,24px);
  box-shadow:0 26px 56px -34px rgba(0,0,0,.42)}
/* Hochformat-Aufnahmen bekommen einen ruhigeren Ausschnitt */
.artbild--hoch .artbild__img{aspect-ratio:16/9.5;object-position:center 32%}

@media (max-width:700px){
  .artbild__img{aspect-ratio:4/3}
  .artbild--in .artbild__img{aspect-ratio:4/3}
}

/* ============================================================
   ARTIKEL TEILEN  ·  linke Spalte
   ============================================================ */
.share{display:grid;grid-template-columns:repeat(3,38px);gap:8px;margin:0 0 8px}
.share__b{
  position:relative;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .28s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease),transform .28s var(--ease);
}
.share__b svg{width:16px;height:16px;display:block}
.share__b:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.share__b:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.share__b--copy.is-ok{background:var(--lime);color:var(--ink);border-color:var(--ink)}
.share__note{
  display:block;font-size:11.5px;color:var(--muted);line-height:1.45;
  margin-top:2px;min-height:1.45em;
}
.share__note.is-ok{color:var(--ink)}

@media (max-width:1080px){
  .share{grid-template-columns:repeat(6,38px);gap:10px}
}
@media (max-width:420px){
  .share{grid-template-columns:repeat(6,36px);gap:7px}
  .share__b{width:36px;height:36px}
}

/* ============================================================
   QUELLEN
   ============================================================ */
.quellen{
  margin-top:clamp(26px,3vw,40px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line);font-size:12.4px;line-height:1.7;color:var(--muted);
  max-width:74ch;
}
.quellen b{display:block;font-weight:500;color:var(--ink);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
/* ============================================================
   BAUSTEINE IM FLIESSTEXT
   ============================================================ */

/* „Das Wichtigste in Kürze" – Kurzantwort über dem Artikel */
.kurz{
  background:var(--fog);border-radius:20px;
  padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,30px);
  margin:0 0 clamp(26px,3vw,38px);
}
.kurz h4{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;font-weight:500;
}
.kurz ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.kurz li{
  position:relative;padding-left:22px;font-size:14.6px;line-height:1.65;color:#2f2f2c;
}
.kurz li::before{
  content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--ink);
}

/* Listen im Fließtext */
.artikel__body ul,.artikel__body ol{
  margin:0 0 1.3em;padding:0 0 0 1.1em;max-width:70ch;
  font-size:15.4px;line-height:1.85;color:#2f2f2c;
}
.artikel__body ul{list-style:none;padding-left:0}
.artikel__body ul>li{position:relative;padding-left:20px;margin-bottom:.45em}
.artikel__body ul>li::before{
  content:'';position:absolute;left:3px;top:.74em;width:6px;height:1.5px;background:var(--ink);opacity:.45;
}
.artikel__body ol>li{margin-bottom:.45em;padding-left:.2em}
.artikel__body li>strong{font-weight:500}

/* Datentabelle – Gebühren, Steuersätze, Fristen */
.datentab{margin:clamp(22px,2.6vw,34px) 0;max-width:70ch}
.datentab__roll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Auf dem Telefon ist die Tabelle breiter als der Schirm und rollt seitlich.
   Ohne Scrollbalken sieht man das nicht – der Verlauf am rechten Rand zeigt,
   dass dort noch etwas kommt. */
@media (max-width:760px){
  .datentab{position:relative}
  .datentab__roll{scrollbar-width:thin}
  .datentab::after{content:"";position:absolute;top:0;bottom:0;right:0;width:34px;
    pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92))}
}
.datentab table{width:100%;border-collapse:collapse;font-size:14px;min-width:min(100%,420px)}
.datentab th{
  text-align:left;font-weight:400;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:0 14px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap;
}
.datentab td{padding:11px 14px 11px 0;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.5}
.datentab tr:last-child td{border-bottom:1px solid var(--line)}
.datentab td:first-child{color:#2f2f2c}
.datentab th:not(:first-child),.datentab td:not(:first-child){
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.datentab tbody tr:hover td{background:#faf9f6}
.datentab .heraus td{background:var(--lime)}
.datentab .heraus:hover td{background:var(--lime)}
.datentab figcaption{font-size:11.8px;color:var(--muted);margin-top:10px;line-height:1.55}

/* Rechenbeispiel */
.rechnung{
  margin:clamp(22px,2.6vw,34px) 0;max-width:62ch;background:#fff;
  border:1px solid var(--line);border-radius:20px;padding:clamp(20px,2.2vw,28px);
}
.rechnung h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:0 0 16px;font-weight:500}
.rechnung dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:10px 0;font-size:14.4px}
.rechnung dt{color:#2f2f2c;line-height:1.5}
.rechnung dd{margin:0;padding-left:18px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rechnung .summe{border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.rechnung .summe dt,.rechnung .summe dd{font-weight:500}
.rechnung .summe dd{font-family:var(--serif);font-size:1.25rem;line-height:1.1}
.rechnung>p{font-size:12.4px;color:var(--muted);margin:14px 0 0;line-height:1.6}

/* Hinweiskasten für Rechtsstand und Vorbehalte */
.merk{
  margin:clamp(22px,2.6vw,34px) 0;max-width:70ch;
  border-left:2px solid var(--ink);padding:2px 0 2px 18px;
  font-size:14px;line-height:1.75;color:#2f2f2c;
}
.merk b{display:block;font-weight:500;margin-bottom:5px}
.merk--achtung{border-left-color:#b3541e}

@media (max-width:700px){
  .rechnung dl{grid-template-columns:1fr auto;gap:8px 0;font-size:13.6px}
  .rechnung dd{padding-left:12px}
  .datentab table{font-size:13.2px}
}
/* CL-ARTIKEL-CSS-ENDE */

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

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

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