/* ---------- 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{--lg1:url("/bilder/i-7228aada52.png");--lg2:url("/bilder/i-6c31d87938.png");--lg3:url("/bilder/i-e7d21b5606.png");--lg4:url("/bilder/i-66f749df07.png");--lg5:url("/bilder/i-57ebf17010.png");
  --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);
  --img-simon:url('/bilder/simon.jpg');
  --img-kontakt:url('/bilder/kontakt-beraterin.jpg');
  --img-sel1:url("/bilder/i-5d5a073faa.jpg");
  --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)}
.sand{background:var(--stone-2)}
.fogbg{background:var(--fog)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.dark .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{border-color:var(--hair-dark);color:#fff}
.dark .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: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}
.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__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)}

/* ============================================================
   MISSION – großes Statement + Kennzahlenreihe
   ============================================================ */

/* ============================================================
   STORY – klebende Marginalie links, Fließtext rechts
   ============================================================ */
.story{padding-block:clamp(56px,7vw,104px)}

/* ============================================================
   ZITAT
   ============================================================ */
.quote{padding-block:clamp(56px,7vw,104px)}

/* ============================================================
   TEAM
   ============================================================ */

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

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

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

/* ============================================================
   BÜROS – Bildgalerie
   ============================================================ */
.offices{padding-block:clamp(56px,7vw,104px)}

/* ============================================================
   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){.map__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px}
  .footer__claim{grid-column:1/-1}
}
@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]{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}
}

/* ---------- 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;
}
.h2,.sec h2,.art__side h2,.band2__q,.loccard h3,.map__head h2{
  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)}
.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{
  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}

@media (max-width:760px){
  .pin__lbl{font-size:16px}
  .pin__dot{stroke-width:2.6}
}

/* ============================================================
   GEGENÜBERSTELLUNG – zwei Karten, eine davon angehoben
   ============================================================ */
.geg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px);align-items:start;
  margin-top:clamp(34px,4.2vw,58px);
  padding-top:clamp(10px,1.2vw,18px)}

.geg__k{border-radius:clamp(20px,2.4vw,28px);
  padding:clamp(24px,2.8vw,38px) clamp(22px,2.6vw,36px) clamp(26px,3vw,40px)}

/* Die andere Seite: durchscheinend, ohne Schatten, zurückgenommen */
.geg__k--alt{background:#ffffff5c;border:1px solid var(--line);
  color:var(--muted)}

/* Unsere Seite: Papierweiß, angehoben, Limettenkante */
.geg__k--wir{background:var(--paper);border:1px solid var(--hair);
  color:var(--ink);position:relative;overflow:hidden;
  margin-top:calc(-1 * clamp(10px,1.2vw,18px));
  box-shadow:0 40px 80px -42px rgba(0,0,0,.46)}
.geg__k--wir::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--lime)}

.geg__tag{display:inline-block;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;border:1px solid var(--line);border-radius:999px;
  padding:.5em .95em;color:var(--muted)}
.geg__tag--lime{background:var(--lime);border-color:var(--lime);color:var(--ink);
  font-weight:600}

.geg__zahl{margin:clamp(20px,2.2vw,28px) 0 0;font-family:var(--serif);
  font-weight:500;line-height:1;font-size:clamp(2.1rem,4.2vw,3.4rem)}
.geg__k--alt .geg__zahl{color:#9c9c96}
.geg__unter{margin:10px 0 0;font-size:13.2px;line-height:1.55;color:var(--muted)}

.geg__l{list-style:none;margin:clamp(24px,2.8vw,34px) 0 0;padding:0;
  border-top:1px solid var(--line)}
.geg__k--wir .geg__l{border-color:var(--hair)}
.geg__l li{display:grid;grid-template-columns:auto 1fr;gap:14px;
  align-items:start;padding:clamp(14px,1.7vw,19px) 0;
  border-bottom:1px solid var(--line);font-size:14.6px;line-height:1.6}
.geg__k--wir .geg__l li{border-color:var(--hair)}
.geg__l li:last-child{border-bottom:0;padding-bottom:0}
.geg__l i{width:22px;height:22px;flex:none;border-radius:50%;display:grid;
  place-items:center;margin-top:1px}
.geg__l i svg{width:13px;height:13px;display:block}
.geg__k--alt .geg__l i{border:1px solid var(--line);color:#a8a8a2}
.geg__k--wir .geg__l i{background:var(--ink);color:#fff}
.geg__s{display:block;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:4px}
.geg__k--wir .geg__l b:not(.geg__s){font-weight:600}

.vs__fuss{margin:clamp(30px,3.4vw,44px) 0 0;text-align:center;
  font-family:var(--serif);font-weight:500;line-height:1.3;
  font-size:clamp(1.12rem,1.8vw,1.5rem)}

@media (max-width:860px){
  .geg{grid-template-columns:1fr;gap:clamp(14px,3vw,20px);padding-top:0}
  .geg__k--wir{margin-top:0}
}

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

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

.chef__txt h2{max-width:24ch;text-wrap:pretty}
.chef__txt .lede{max-width:52ch}

.chef__txt .lead~p{margin:1.05rem 0 0;color:var(--muted);font-size:14.8px;
  line-height:1.72;max-width:54ch}
.chef__zitat{margin:clamp(24px,3vw,36px) 0 0;padding-left:clamp(16px,1.8vw,24px);
  border-left:2px solid var(--lime);
  font-family:var(--serif);font-weight:500;line-height:1.3;
  font-size:clamp(1.18rem,1.9vw,1.6rem);max-width:30ch}

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

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

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

/* ============================================================
   HERO – dunkle Textkarte links, Bildmockup rechts, wie auf den
   Standortseiten.
   ============================================================ */
.hero{
  background:var(--stone);color:var(--ink);
  display:block;min-height:auto;overflow:hidden;position:relative;
  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}

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

/* z-index:auto – sonst läge die Kachel in einem eigenen Stapelkontext
   und verschwände hinter der Textkarte. */
@keyframes bob{0%,100%{transform:translateY(var(--py,0px))}
  50%{transform:translateY(calc(var(--py,0px) - 9px))}}

@media (max-width:900px){
  .hero{padding-block:clamp(86px,16vw,120px) clamp(54px,9vw,80px)}
  .hero__grid{grid-template-columns:1fr;align-items:stretch}
}

/* ============================================================
   VISION – Text links, gestapeltes Mockup rechts, Kennzahlen darunter
   ============================================================ */
.section{padding-block:clamp(56px,7vw,104px)}
.head{max-width:56ch;margin-bottom:clamp(32px,3.8vw,54px)}
.head .lead{margin-top:20px;color:var(--muted);max-width:56ch}
.head h2{margin:0}

/* Aussage des Inhabers im Visionsabschnitt – bewusst anders als die
   Blockquote im Story-Abschnitt, damit sich die beiden nicht doppeln. */

@media (max-width:560px){
  /* Platz für den gelben Kreis, damit er nicht auf dem Text liegt */
}

/* ============================================================
   VERGLEICHSTABELLE – Kriterium, üblicher Weg, unser Weg.
   Grundzustand ist die gestapelte Ansicht fürs Handy; ab 861 px
   wird daraus eine dreispaltige Tabelle. Die schwarze Fläche hinter
   der rechten Spalte ist selbst ein Rasterelement, deshalb hat
   jede Zelle ihre Zeile und Spalte fest zugewiesen.
   ============================================================ */

.vs__fuss{margin:clamp(26px,3.2vw,42px) 0 0;text-align:center;
  font-family:var(--serif);font-weight:500;line-height:1.3;
  font-size:clamp(1.14rem,1.9vw,1.5rem)}

/* ---------- gestapelt ---------- */

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

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

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

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

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

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

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

@media (max-width:980px){
  .chef__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .chef__bild{max-width:min(340px,70vw)}
  .chef__ph{aspect-ratio:3/3.6}
  .chef__txt h2,.chef__txt .lead{max-width:none}
}
/* ============================================================
   MARKTBERICHTE – drei Karten, eine je Region
   ============================================================ */
.nws__head{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:20px;margin-bottom:clamp(28px,3.4vw,46px)}
.nws__head h2{margin:0}
.nws__grid{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.nws{display:flex;flex-direction:column;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,2.4vw,30px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
    border-color .4s var(--ease)}
.nws:hover{transform:translateY(-3px);border-color:#0000002e;
  box-shadow:0 26px 54px -34px #00000052}
.nws__k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:var(--lime);border-radius:999px;padding:.42em .85em}
.nws__t{margin-top:clamp(16px,1.8vw,22px);font-family:var(--serif);font-weight:500;
  font-size:clamp(1.16rem,1.7vw,1.4rem);line-height:1.22}
.nws__d{margin-top:11px;font-size:14px;line-height:1.6;color:var(--muted)}
/* margin-top:auto hält die Verweise auf einer Linie, auch wenn die
   Anrisstexte unterschiedlich lang sind. */
.nws__go{display:inline-flex;align-items:center;gap:8px;
  margin-top:auto;padding:clamp(18px,2vw,26px) 0 3px;
  font-size:13.4px;border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease)}
.nws:hover .nws__go{border-color:var(--ink)}
.nws__go svg{transition:transform .4s var(--ease)}
.nws:hover .nws__go svg{transform:translateX(4px)}

@media (max-width:900px){
  .nws__grid{grid-template-columns:1fr}
  .nws__head .btn{order:2}
}

/* ============================================================
   VISIONSBAND – schwarze Fläche zwischen Hero und Porträt
   ============================================================ */



/* ============================================================
   VISION – zweispaltig wie die ruhigen Abschnitte der Verkaufsseite
   ============================================================ */



/* ============================================================
   VISION – Kopfblock und drei Spalten, wie auf der Verkaufsseite
   ============================================================ */
.vzahl__t{margin:clamp(12px,1.4vw,18px) 0 0;font-family:var(--serif);
  font-weight:500;line-height:1.18;font-size:clamp(1.18rem,1.7vw,1.4rem)}



/* ============================================================
   WERDEGANG – Kopf links, Zeitstrahl rechts
   ============================================================ */
.weg{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,86px);align-items:start}
.weg__kopf .eyebrow{margin:0 0 14px}
.weg__kopf .h2{font-size:clamp(1.55rem,2.3vw,2.05rem);max-width:24ch}
.weg__kopf .lead{margin-top:22px}
.weg__kopf .btn{margin-top:clamp(24px,2.8vw,32px)}

.weg__liste{list-style:none;margin:0;padding:0;position:relative}
.weg__liste::before{content:'';position:absolute;left:0;top:10px;bottom:10px;
  width:1px;background:var(--line)}
.weg__pkt{position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,2.4vw,32px);padding:0 0 clamp(26px,3.2vw,40px) clamp(22px,2.6vw,34px)}
.weg__pkt:last-child{padding-bottom:0}
.weg__pkt::before{content:'';position:absolute;left:-4.5px;top:9px;
  width:10px;height:10px;border-radius:50%;background:var(--ink)}
.weg__jahr{font-family:var(--serif);font-weight:500;line-height:1;
  font-size:clamp(1.5rem,2.3vw,2rem);color:var(--muted);min-width:3.2em}
.weg__txt h3{margin:0;font-family:var(--serif);font-weight:500;line-height:1.2;
  font-size:clamp(1.15rem,1.7vw,1.38rem)}
.weg__txt p{margin:8px 0 0;color:var(--muted);font-size:14.6px;line-height:1.72;
  max-width:46ch}

@media (max-width:900px){
  .weg{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
  .weg__kopf .h2{max-width:none}
  .weg__pkt{grid-template-columns:1fr;gap:4px}
  .weg__jahr{min-width:0}
}

/* ============================================================
   VERSPRECHEN – drei Zusagen
   ============================================================ */

/* ============================================================
   VERSPRECHEN – drei Zusagen
   ============================================================ */
.vsps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,26px)}
.vsp{display:flex;flex-direction:column;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,2.4vw,30px)}
.vsp__k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:var(--lime);border-radius:999px;padding:.42em .85em}
.vsp__z{margin:clamp(18px,2vw,24px) 0 0;display:flex;align-items:baseline;gap:2px}
.vsp__z b{font-family:var(--serif);font-weight:500;line-height:1;
  font-size:clamp(2.3rem,4vw,3.2rem)}
.vsp__z i{font-style:normal;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.05rem,1.6vw,1.4rem);color:var(--muted)}
.vsp__p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.6}
@media (max-width:820px){
  .vsps{grid-template-columns:1fr}
}

/* ============================================================
   WERTERMITTLUNG – Adressfeld und drei Objektarten
   ============================================================ */
.wert{padding-block:clamp(60px,7.4vw,110px)}
.wert__kopf .eyebrow{margin:0 0 14px}
.wert__kopf .h2{color:#fff;max-width:18ch;margin:0}

.wert__suche{display:flex;gap:10px;margin-top:clamp(30px,3.6vw,46px);
  background:#fff;border-radius:16px;padding:9px;max-width:640px;
  box-shadow:0 30px 64px -28px rgba(0,0,0,.6)}
.wert__suche .field{flex:1;min-width:0;display:flex;align-items:center;gap:.7em;
  border:1px solid var(--line);border-radius:11px;padding:0 1.05em;
  transition:border-color .3s var(--ease)}
.wert__suche .field:focus-within{border-color:var(--ink)}
.wert__suche .field svg{width:17px;height:17px;color:var(--muted);flex:none}
.wert__suche input{flex:1;min-width:0;border:0;background:none;padding:1em 0;
  font-family:inherit;font-size:15.4px;color:var(--ink)}
.wert__suche input::placeholder{color:#9a9a95}
.wert__suche input:focus{outline:none}
.wert__suche .btn{flex:none}

.wert__oder{margin:clamp(30px,3.4vw,42px) 0 clamp(14px,1.6vw,18px);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-on-dark)}
.warten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);max-width:860px}
.wart{display:grid;align-content:start;gap:10px;padding:clamp(18px,2.1vw,24px);
  border:1px solid var(--hair-dark);border-radius:clamp(14px,1.6vw,18px);
  color:#fff;position:relative;
  transition:background .35s var(--ease),border-color .35s var(--ease),
    color .35s var(--ease),transform .35s var(--ease)}
.wart__ico{display:block;height:28px;color:currentColor}
.wart__ico svg{display:block}
.wart__t{font-family:var(--serif);font-weight:500;line-height:1.1;
  font-size:clamp(1.08rem,1.6vw,1.28rem)}
.wart__s{font-size:12.6px;line-height:1.5;color:var(--muted-on-dark);
  transition:color .35s var(--ease)}
.wart__go{position:absolute;right:clamp(14px,1.6vw,18px);top:clamp(16px,1.9vw,22px);
  opacity:.55;transition:opacity .35s var(--ease)}
.wart:hover,.wart:focus-visible{background:var(--lime);color:var(--ink);
  border-color:var(--lime);transform:translateY(-3px)}
.wart:hover .wart__s,.wart:focus-visible .wart__s{color:#4a4a44}
.wart:hover .wart__go,.wart:focus-visible .wart__go{opacity:1}

.wert__fuss{margin:clamp(26px,3vw,36px) 0 0;color:var(--muted-on-dark);
  font-size:12.6px}

@media (max-width:900px){
  .wert__kopf .h2{max-width:none}
}
@media (max-width:720px){
  .wert__suche{flex-direction:column;background:none;padding:0;box-shadow:none}
  .wert__suche .field{background:#fff;border-color:transparent;padding:0 1.05em}
  .wert__suche .btn{justify-content:center}
  .warten{grid-template-columns:1fr}
  .wart{grid-template-columns:auto 1fr;align-items:center;column-gap:16px}
  .wart__ico{grid-row:1/3}
  .wart__go{top:50%;transform:translateY(-50%)}
}

/* ============================================================
   KLARTEXT – Fragen zum Aufklappen
   ============================================================ */
.kt__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.kt__kopf .eyebrow{margin:0 0 14px}
.kt__kopf .h2{font-size:clamp(1.7rem,2.6vw,2.35rem);max-width:15ch}
.kt__kopf .lead{margin-top:20px}
.kt__mehr{margin:clamp(20px,2.4vw,28px) 0 0;font-size:13.8px;color:var(--muted);
  line-height:1.8}
.kt__mehr a{border-bottom:1px solid var(--line);color:var(--ink)}
.kt__mehr a:hover{border-color:var(--ink)}

.kt{border-top:1px solid var(--line)}
.kt:last-child{border-bottom:1px solid var(--line)}
.kt summary{display:flex;align-items:flex-start;justify-content:space-between;
  gap:22px;padding:clamp(18px,2.2vw,26px) 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-weight:500;line-height:1.28;
  font-size:clamp(1.05rem,1.6vw,1.26rem)}
.kt summary::-webkit-details-marker{display:none}
.kt summary i{position:relative;flex:none;width:20px;height:20px;margin-top:3px}
.kt summary i::before,.kt summary i::after{content:'';position:absolute;
  background:var(--ink);transition:transform .35s var(--ease),opacity .25s}
.kt summary i::before{left:0;right:0;top:9.5px;height:1.5px}
.kt summary i::after{top:0;bottom:0;left:9.5px;width:1.5px}
.kt[open] summary i::after{transform:scaleY(0);opacity:0}
.kt__a{overflow:hidden}
.kt__a p{margin:0;padding:0 46px clamp(20px,2.4vw,28px) 0;color:var(--muted);
  font-size:14.8px;line-height:1.75;max-width:62ch}
@media (max-width:900px){
  .kt__grid{grid-template-columns:1fr;gap:clamp(26px,5vw,36px)}
  .kt__kopf .h2{max-width:none}
}


/* ============================================================
   HERO – Überschrift trägt die Seite, Hochformat rechts daneben
   ============================================================ */
.hero{background:var(--stone);color:var(--ink);overflow:hidden;
  padding-block:clamp(120px,13vw,168px) clamp(48px,6vw,84px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4.4vw,70px);align-items:center;
  margin-bottom:clamp(38px,4.6vw,64px)}
.hero__txt{display:grid;justify-items:start}

.crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;margin:0 0 clamp(18px,2vw,24px)}
.crumb a{opacity:.75;transition:opacity .25s}
.crumb a:hover{opacity:1}
.crumb i{font-style:normal;opacity:.45}

/* Das Google-Patch aus dem Header der Startseite, für hellen Grund gesetzt */
.gpatch{display:flex;align-items:center;gap:.55rem;margin:0 0 clamp(14px,1.6vw,20px);
  font-size:.94rem;line-height:1}
.gpatch__logo{width:21px;height:21px;flex:none;
  background:var(--g-mark) center/contain no-repeat}
.gpatch__stars{display:flex;gap:2px;margin-left:.1rem}
.gpatch__stars svg{width:15px;height:15px;fill:#FBBC04}
.gpatch b{font-weight:600;font-size:1.02rem;margin-left:.15rem}
.gpatch i{width:1px;height:1.1em;background:var(--line);margin-inline:.5rem}
.gpatch span:last-child{color:var(--muted);font-size:.88rem}

.hero h1{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;
  font-size:clamp(1.72rem,3.2vw,2.6rem);max-width:28ch}
.hero__sub{margin:clamp(22px,2.4vw,30px) 0 0;max-width:46ch;color:var(--muted);
  font-size:clamp(.99rem,1.17vw,1.08rem);line-height:1.68}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.8vw,34px)}


.hero__fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,44px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--line)}
.hero__fakten b{display:block;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.65rem,2.6vw,2.3rem);line-height:1.1}
.hero__fakten span{display:block;margin-top:7px;font-size:13.2px;color:var(--muted)}

@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr;gap:clamp(26px,5vw,34px)}
  .hero h1{max-width:none}
}
@media (max-width:620px){
  .hero__fakten{grid-template-columns:1fr;gap:0}
  .hero__fakten div+div{margin-top:14px;padding-top:14px;
    border-top:1px solid var(--line)}
  .gpatch{flex-wrap:wrap;gap:.4rem .5rem}
  .gpatch i{display:none}
}


/* Objektkarte mit Silbersiegel und Limettenkreis */
.hmock{position:relative;justify-self:stretch;width:100%;max-width:820px;
  padding:clamp(16px,1.9vw,26px) 0 0 0}
.hmock__karte{aspect-ratio:16/10;border-radius:clamp(18px,2.4vw,28px);
  background:var(--fog) center/cover no-repeat;
  box-shadow:0 40px 82px -40px rgba(0,0,0,.5)}
.hmock__siegel{position:absolute;left:clamp(14px,1.7vw,23px);top:0;z-index:3;
  width:clamp(78px,8.8vw,108px);aspect-ratio:283/357;
  background:url('/bilder/is24-siegel.svg') center/contain no-repeat;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.38))}
.hmock__eins{position:absolute;z-index:4;
  left:clamp(70px,7.9vw,97px);top:clamp(38px,4.3vw,53px);
  width:clamp(54px,6.3vw,78px);height:clamp(54px,6.3vw,78px);
  border-radius:50%;background:var(--lime);
  display:grid;place-items:center;
  font-family:var(--serif);font-weight:500;line-height:1;
  font-size:clamp(1.2rem,1.65vw,1.6rem);
  box-shadow:0 20px 42px -18px rgba(0,0,0,.42)}
@media (max-width:860px){
  .hmock{justify-self:stretch;width:auto;max-width:none;margin-inline:calc(var(--gut,20px) * -1)}
  .hmock__karte{aspect-ratio:4/3;border-radius:0}
}


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

/* ---------- Kennzahlen als Haken-Liste ---------- */
/* Dieselbe Form wie im Bewertungstool: Haken, Zahl, Sache. */
.hero__plus{
  list-style:none;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;
  display:grid;gap:12px;max-width:44ch;
}
.hero__plus li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:15px;line-height:1.5;color:var(--ink);
}
.hero__plus i{
  flex:none;width:21px;height:21px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:grid;place-items:center;margin-top:1px;
}
.hero__plus b{font-weight:500}

/* ---------- Logoleiste ---------- */
/* Im Kopfbereich traegt der Abschnitt seinen Abstand selbst – sonst
   entstuende unter der Leiste eine Luecke. */
.hero .logobar{margin-bottom:0}
.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:hover .logobar__track{animation-play-state:paused}
.logobar__track{display:flex;align-items:center;gap:clamp(2.4rem,5vw,4.6rem);width:max-content;animation:logoslide 34s linear infinite}
.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)}
@keyframes logoslide{to{transform:translateX(-33.333%)}}

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