/* ==========================================================================
   TK IMMOBILIEN, Relaunch-Entwurf
   Marke, Farben, Schrift und Bildsprache stammen von tk-immos.de.
   Herleitung des Systems: /DESIGN-SYSTEM.md, Abschnitt 3.
   ========================================================================== */
:root{
  /* Navy-Skala, ausgehend vom Marken-Blau #374975 */
  --navy-900:#0E1730; --navy-800:#16233F; --navy-700:#1E2E52;
  --navy-600:#2C3B60; --navy-500:#374975; --navy-400:#4E5D8D; --navy-300:#8894BA;
  /* Papier */
  --paper:#FFFFFF; --paper-2:#F7F7F5; --paper-3:#ECECE8; --paper-4:#E0E0DB;
  /* Text */
  --ink:#141A24; --text:#3A4048; --muted:#636974; --on-navy:#E9ECF4;
  /* Akzent: Messing, aus dem Logo der Marke */
  --brass:#856734; --brass-hi:#C09A5E;
  --line:rgba(20,26,36,.14); --line-dark:rgba(255,255,255,.22);
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1230px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:var(--text);background:var(--paper);font-size:16px;font-weight:400;
  line-height:1.85;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);font-weight:300;line-height:1.18;letter-spacing:-.01em}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
::selection{background:var(--navy-500);color:#fff}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy-900);color:#fff;
  padding:14px 22px;font-size:14px;letter-spacing:.04em}
.skiplink:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:104px 0}
.eyebrow{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.35em;text-transform:uppercase;color:var(--brass)}
.on-dark .eyebrow{color:var(--brass-hi)}
.h2{font-size:clamp(30px,4.2vw,52px);margin:18px 0 0}
.lead{font-size:17px;color:var(--muted);max-width:62ch;margin-top:20px}
.on-dark{color:var(--on-navy)}
.on-dark h2,.on-dark h3{color:#fff}
.on-dark .lead{color:#C4CBDD}
.rule{height:1px;background:var(--line)}
.acc-head{border-left:3px solid var(--brass);padding-left:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:14px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;padding:19px 34px;border:1px solid transparent;
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-navy{background:var(--navy-500);color:#fff}
.btn-navy:hover{background:var(--navy-600)}
.btn-line{border-color:currentColor}
.btn-line:hover{background:var(--navy-500);color:#fff;border-color:var(--navy-500)}
.btn-white{background:#fff;color:var(--navy-700)}
.btn-white:hover{background:var(--paper-3)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- Topbar + Navigation ---------- */
.topbar{background:var(--navy-900);color:#AFB9D2;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;height:38px}
.topbar a:hover{color:#fff}
.topbar .tb-right{display:none;gap:26px}
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 10px 30px -18px rgba(14,23,48,.5)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:96px;transition:height .3s}
.nav.scrolled .wrap{height:74px}
.nav .logo img{height:46px;width:auto;transition:height .3s}
.nav.scrolled .logo img{height:38px}
.menu{display:none;gap:34px;list-style:none}
.menu a{font-size:14px;font-weight:400;color:var(--ink);position:relative;padding:6px 0}
.menu a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--brass);transition:width .35s var(--ease)}
.menu a:hover::after{width:100%}
.nav .cta{display:none}
.burger{width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger span{width:24px;height:1.5px;background:var(--ink);transition:.35s var(--ease)}
.burger.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.drawer{position:fixed;inset:0;top:0;z-index:55;background:var(--navy-900);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease)}
.drawer.on{clip-path:inset(0 0 0 0)}
.drawer a{color:#fff;font-size:26px;font-weight:200;padding:10px 0}
.drawer .meta{margin-top:34px;color:#AFB9D2;font-size:14px;text-align:center;line-height:2}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:calc(100svh - 134px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-900)}
.vid{position:absolute;inset:0;overflow:hidden}
.vid video,.vid img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.vid::after{content:'';position:absolute;inset:0;
  background:linear-gradient(75deg,rgba(14,23,48,.93) 0%,rgba(14,23,48,.72) 42%,rgba(14,23,48,.32) 74%,rgba(14,23,48,.18) 100%)}
.hero-in{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:34px}
.hero h1{color:#fff;font-size:clamp(34px,5.6vw,68px);font-weight:200;max-width:17ch;margin:22px 0 0}
.hero h1 b{font-weight:500}
.hero .lead{color:#C7CEE0;max-width:48ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-serv{position:relative;z-index:2;margin-top:64px;border-top:1px solid var(--line-dark);
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-dark)}
.hero-serv a{background:transparent;padding:24px 4px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;color:#fff;transition:padding-left .35s var(--ease),background .35s}
.hero-serv a:hover{background:rgba(255,255,255,.06);padding-left:14px}
.hero-serv b{font-weight:400;font-size:18px}
.hero-serv span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi)}

/* ---------- Trust ---------- */
.trust{background:var(--paper-2);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line)}
.trust .t{background:var(--paper-2);padding:26px 4px;display:flex;gap:14px;align-items:flex-start}
.trust .t i{font-style:normal;color:var(--brass);font-size:18px;line-height:1.4}
.trust .t b{display:block;color:var(--ink);font-weight:500;font-size:15px;line-height:1.5}
.trust .t span{font-size:13.5px;color:var(--muted);line-height:1.6}

/* ---------- Leistungen ---------- */
.serv{display:grid;grid-template-columns:1fr;gap:26px;margin-top:56px}
.serv article{border:1px solid var(--line);background:var(--paper);transition:border-color .4s,transform .5s var(--ease),box-shadow .5s}
.serv article:hover{transform:translateY(-8px);border-color:var(--navy-500);box-shadow:0 40px 70px -50px rgba(14,23,48,.7)}
.serv figure{aspect-ratio:4/3;overflow:hidden;background:var(--navy-800)}
.serv figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .6s,transform .9s var(--ease)}
.serv article:hover figure img{filter:grayscale(0);transform:scale(1.05)}
.serv .body{padding:30px 28px 34px}
.serv .num{font-size:12px;letter-spacing:.3em;color:var(--brass)}
.serv h3{font-size:23px;font-weight:400;margin:12px 0 12px}
.serv p{font-size:15px;color:var(--muted);line-height:1.8}
.serv .more{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy-500);transition:gap .3s}
.serv article:hover .more{gap:18px}

/* ---------- Über uns ---------- */
.about{background:var(--paper);position:relative;overflow:hidden}
.about-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
.about figure{position:relative}
.about figure img{width:100%}
.about .stamp{position:absolute;left:-10px;bottom:-10px;background:var(--navy-500);color:#fff;padding:22px 26px;max-width:230px}
.about .stamp b{display:block;font-size:34px;font-weight:200;line-height:1}
.about .stamp span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#C7CEE0}
.about p{margin-top:24px}
.about p.intro{color:var(--ink);font-size:18px;font-weight:400;line-height:1.75}
.about .sig{display:flex;flex-wrap:wrap;gap:26px;align-items:center;margin-top:34px}
.about .sig img{width:118px;mix-blend-mode:multiply}

/* ---------- Vorteile ---------- */
.usp{background:var(--navy-800);position:relative;overflow:hidden}
.usp::before{content:'';position:absolute;inset:0;background:url('../img/bg2.webp') no-repeat right top;
  opacity:.10;mix-blend-mode:luminosity;pointer-events:none}
.usp .grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-dark);margin-top:54px;border:1px solid var(--line-dark)}
.usp .item{background:var(--navy-800);padding:42px 32px 46px;transition:background .4s}
.usp .item:hover{background:var(--navy-700)}
.usp .item .n{display:block;font-size:58px;font-weight:200;color:#fff;line-height:1;margin-bottom:38px}
.usp .item .n em{font-style:normal;color:var(--brass-hi)}
.usp .item p{color:#C7CEE0;font-size:15px;line-height:1.75}

/* ---------- Objekte ---------- */
.obj-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.chip{font-size:13px;letter-spacing:.06em;padding:11px 20px;border:1px solid var(--line);color:var(--muted);transition:.3s}
.chip:hover{border-color:var(--navy-500);color:var(--ink)}
.chip.on{background:var(--navy-500);border-color:var(--navy-500);color:#fff}
.objs{display:grid;grid-template-columns:1fr;gap:26px;margin-top:34px}
.obj{border:1px solid var(--line);background:var(--paper);cursor:pointer;position:relative;
  transition:transform .5s var(--ease),box-shadow .5s,border-color .4s;display:flex;flex-direction:column}
.obj:hover{transform:translateY(-8px);border-color:var(--navy-500);box-shadow:0 40px 70px -52px rgba(14,23,48,.75)}
.obj figure{aspect-ratio:3/2;overflow:hidden;background:var(--paper-3);position:relative}
.obj figure img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.obj:hover figure img{transform:scale(1.05)}
.obj .tag{position:absolute;top:0;left:0;background:var(--navy-500);color:#fff;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;padding:8px 14px}
.obj .demo{position:absolute;top:0;right:0;background:rgba(255,255,255,.92);color:var(--muted);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:8px 12px}
.obj .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.obj .loc{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.obj h3{font-size:20px;font-weight:400}
.obj .facts{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;color:var(--muted);margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.obj .facts b{color:var(--ink);font-weight:500}
.obj-note{margin-top:26px;font-size:13px;color:var(--muted)}
.empty{padding:50px 0;color:var(--muted)}

/* ---------- Videobänder ---------- */
.band{position:relative;overflow:hidden;padding:118px 0}
.band .vid::after{background:linear-gradient(80deg,rgba(14,23,48,.94) 0%,rgba(14,23,48,.75) 48%,rgba(14,23,48,.4) 100%)}
.band .inner{position:relative;z-index:2;max-width:640px}
.band.center{text-align:center}
.band.center .inner{max-width:760px;margin:0 auto}
.band.center .vid::after{background:linear-gradient(180deg,rgba(14,23,48,.78),rgba(14,23,48,.9))}
.band.center .lead{margin-left:auto;margin-right:auto}
.band .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.band.center .cta-row{justify-content:center}

/* ---------- Wertermittlung (Wizard) ---------- */
.wizard{border:1px solid var(--line);background:var(--paper);margin-top:52px}
.wz-steps{display:flex;border-bottom:1px solid var(--line)}
.wz-steps div{flex:1;padding:18px 14px;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);border-right:1px solid var(--line);position:relative}
.wz-steps div:last-child{border-right:0}
.wz-steps div.on{color:var(--navy-500);font-weight:500}
.wz-steps div.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brass)}
.wz-body{padding:38px 30px}
.wz-pane{display:none}
.wz-pane.on{display:block;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}
.wz-q{font-size:20px;font-weight:400;color:var(--ink);margin-bottom:24px}
.opts{display:grid;grid-template-columns:1fr;gap:12px}
.opt{border:1px solid var(--line);padding:18px 20px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:.3s;font-size:15px}
.opt:hover{border-color:var(--navy-500)}
.opt.on{border-color:var(--navy-500);background:var(--paper-2);color:var(--ink)}
.opt i{font-style:normal;color:var(--brass);font-size:18px}
.fields{display:grid;grid-template-columns:1fr;gap:18px}
.field label{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--paper);padding:14px 15px;
  font-size:15px;transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-500)}
.field textarea{min-height:120px;resize:vertical}
.field .err{border-color:#B4472F}
.wz-nav{display:flex;justify-content:space-between;gap:14px;margin-top:30px;flex-wrap:wrap}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.6;margin-top:6px}
.consent input{margin-top:4px;accent-color:var(--navy-500);width:15px;height:15px}
.done{display:none;text-align:center;padding:16px 0}
.done.on{display:block}
.done .mark{width:64px;height:64px;border:1px solid var(--brass);border-radius:50%;display:grid;place-items:center;
  margin:0 auto 22px;color:var(--brass);font-size:26px}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:0;margin-top:52px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:1fr;gap:6px;padding:30px 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease)}
.step:hover{padding-left:14px}
.step .n{font-size:12px;letter-spacing:.3em;color:var(--brass)}
.step h3{font-size:22px;font-weight:400}
.step p{font-size:15px;color:var(--muted)}

/* ---------- Kontakt ---------- */
.contact{background:var(--paper-2)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:44px}
.info a,.info p{font-size:16px}
.info .row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.info .row i{font-style:normal;color:var(--brass)}
.info .row b{display:block;color:var(--ink);font-weight:500;line-height:1.6}
.info .row span{font-size:14px;color:var(--muted)}
.info .dekra{margin-top:30px;display:flex;align-items:center;gap:18px}
.info .dekra img{width:112px;mix-blend-mode:multiply}
.info .dekra span{font-size:13px;color:var(--muted);line-height:1.6}
.form{background:var(--paper);border:1px solid var(--line);padding:34px 30px}
.ok{display:none;border:1px solid #4B7F58;color:#3C6B48;padding:14px 16px;font-size:14px;margin-top:16px}
.ok.on{display:block}

/* ---------- Footer ---------- */
.footer{background:var(--navy-900);color:#AEB8D0;padding:76px 0 0}
.footer h4{color:#fff;font-size:14px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px}
.f-grid{display:grid;grid-template-columns:1fr;gap:40px;padding-bottom:56px}
.footer a:hover{color:#fff}
.footer p,.footer li{font-size:15px;line-height:1.9}
.footer ul{list-style:none}
.footer .logo2 img{width:220px;filter:brightness(0) invert(1);opacity:.9;margin-bottom:20px}
.f-bottom{border-top:1px solid rgba(255,255,255,.14);padding:24px 0;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-size:13px}
.totop{position:fixed;right:20px;bottom:20px;z-index:50;width:48px;height:48px;background:var(--navy-500);color:#fff;
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .4s,transform .3s}
.totop.on{opacity:1;pointer-events:auto}
.totop:hover{transform:translateY(-3px);background:var(--navy-600)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:80;background:rgba(14,23,48,.9);display:none;align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex}
.mcard{background:#fff;max-width:980px;width:100%;max-height:90vh;overflow:auto;position:relative}
.mclose{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;background:rgba(255,255,255,.92);
  color:var(--ink);display:grid;place-items:center;font-size:20px}
.mhero{aspect-ratio:16/9;background:var(--paper-3);overflow:hidden}
.mhero img{width:100%;height:100%;object-fit:cover}
.mthumbs{display:flex;gap:8px;padding:10px;overflow-x:auto}
.mthumbs img{width:96px;height:64px;object-fit:cover;opacity:.55;cursor:pointer;transition:.3s;flex:0 0 auto}
.mthumbs img.on,.mthumbs img:hover{opacity:1;outline:1px solid var(--navy-500)}
.mbody{padding:8px 30px 34px}
.mfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:22px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mfacts>div span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mfacts>div b{font-size:17px;font-weight:500;color:var(--ink)}
.mfeat{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}
.mfeat span{font-size:13px;border:1px solid var(--line);padding:7px 13px;color:var(--muted)}

/* ---------- Responsive ---------- */
@media(min-width:640px){
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
  .hero-serv{grid-template-columns:repeat(3,1fr)}
  .hero-serv a{padding:24px 20px;flex-direction:column;align-items:flex-start;gap:8px}
  .serv,.objs{grid-template-columns:repeat(2,1fr)}
  .usp .grid{grid-template-columns:repeat(2,1fr)}
  .opts{grid-template-columns:repeat(2,1fr)}
  .fields.two{grid-template-columns:repeat(2,1fr)}
  .mfacts{grid-template-columns:repeat(4,1fr)}
  .step{grid-template-columns:120px 1fr 1.4fr;gap:26px;align-items:baseline}
}
@media(min-width:992px){
  .topbar .tb-right{display:flex}
  .menu,.nav .cta{display:flex}
  .burger{display:none}
  .section{padding:130px 0}
  .trust .wrap{grid-template-columns:repeat(4,1fr)}
  .trust .t{padding:30px 24px}
  .serv,.objs{grid-template-columns:repeat(3,1fr)}
  .usp .grid{grid-template-columns:repeat(4,1fr)}
  .about-grid{grid-template-columns:1fr 1fr;gap:74px}
  .contact-grid{grid-template-columns:.9fr 1.1fr;gap:70px}
  .f-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
  .wz-body{padding:44px 46px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}


/* ==========================================================================
   ERGÄNZUNGEN: Mobile-Optimierung, Unterseiten, Artikel, Objektdetail
   ========================================================================== */

/* --- Tap-Targets & Eingaben (iOS zoomt unter 16px hinein) --- */
input,select,textarea{font-size:16px}
a,button,.chip,.opt,label.opt{-webkit-tap-highlight-color:rgba(55,73,117,.12)}
.menu a,.footer a,.info .row{min-height:auto}

/* --- Mobile Aktionsleiste --- */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr;
  background:var(--navy-900);border-top:1px solid rgba(255,255,255,.14);
  padding-bottom:env(safe-area-inset-bottom);transform:translateY(110%);transition:transform .4s var(--ease)}
.actionbar.on{transform:none}
.actionbar a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:58px;color:#fff;
  font-size:13.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.actionbar a+a{background:var(--brass-hi);color:#15120A}
.actionbar i{font-style:normal;font-size:16px}
body.has-actionbar{padding-bottom:58px}
@media(min-width:992px){.actionbar{display:none}body.has-actionbar{padding-bottom:0}}

/* --- Breadcrumb + Seitenkopf --- */
.pagehead{position:relative;background:var(--navy-800);overflow:hidden;padding:52px 0 56px}
.pagehead::before{content:'';position:absolute;inset:0;background:url('../img/bg2.webp') no-repeat right center;
  opacity:.12;mix-blend-mode:luminosity;pointer-events:none}
.pagehead .wrap{position:relative;z-index:2}
.pagehead h1{color:#fff;font-size:clamp(28px,4.6vw,50px);font-weight:200;margin:16px 0 0;max-width:20ch}
.pagehead h1 b{font-weight:500}
.pagehead .lead{color:#C4CBDD;max-width:60ch}
.crumbs{font-size:12.5px;color:#95A0BE;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;opacity:.5}

/* --- Artikel / Inhaltsseiten --- */
.prose{max-width:74ch;overflow-wrap:break-word;hyphens:auto}
.prose h2{font-size:clamp(23px,3vw,32px);margin:52px 0 16px;font-weight:300}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;font-weight:500;color:var(--ink);margin:34px 0 10px}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{margin:0 0 20px 20px}
.prose li{margin-bottom:9px}
.prose strong{color:var(--ink);font-weight:600}
.prose a:not(.btn){color:var(--navy-500);text-decoration:underline;text-underline-offset:3px}
.prose a:not(.btn):hover{color:var(--brass)}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:15px}
.prose th,.prose td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}
.prose th{background:var(--paper-2);color:var(--ink);font-weight:500;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase}
.prose td b{color:var(--ink)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:26px;max-width:100%}
.tablewrap table{margin-bottom:0;min-width:460px}
.note{border-left:3px solid var(--brass);background:var(--paper-2);padding:20px 22px;margin:26px 0;font-size:15px}
.note b{display:block;color:var(--ink);margin-bottom:6px}
.article-grid{display:grid;grid-template-columns:1fr;gap:48px}
.article-grid>*{min-width:0}
.prose{min-width:0}
.toc{border:1px solid var(--line);padding:24px 22px;font-size:14.5px;background:var(--paper-2)}
.toc h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  font-weight:500;margin-bottom:14px}
.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;margin-bottom:9px;padding-left:26px;position:relative;line-height:1.5}
.toc li::before{content:'0' counter(t);position:absolute;left:0;color:var(--brass);font-size:11px;top:3px}
.toc a{display:inline-block;padding:5px 0}
.toc a:hover{color:var(--navy-500)}
.aside-cta{border:1px solid var(--navy-500);padding:26px 24px;margin-top:26px;background:var(--paper)}
.aside-cta h4{font-size:19px;font-weight:400;color:var(--ink);margin-bottom:10px}
.aside-cta p{font-size:14.5px;margin-bottom:18px}
.faq-q{border-bottom:1px solid var(--line)}
.faq-q>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;text-align:left;
  padding:22px 0;font-size:17px;font-weight:400;color:var(--ink);line-height:1.4}
.faq-q .s{color:var(--brass);flex:0 0 auto;transition:transform .35s var(--ease)}
.faq-q.on .s{transform:rotate(45deg)}
.faq-q .a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-q .a p{padding-bottom:22px;font-size:15px;color:var(--muted);margin:0}

/* --- Karten-Listen (Ratgeber-Übersicht, verwandte Artikel) --- */
.cards{display:grid;grid-template-columns:1fr;gap:22px}
.card{border:1px solid var(--line);background:var(--paper);padding:28px 26px;display:flex;flex-direction:column;
  gap:10px;transition:transform .45s var(--ease),border-color .35s,box-shadow .45s}
.card:hover{transform:translateY(-6px);border-color:var(--navy-500);box-shadow:0 34px 60px -50px rgba(14,23,48,.7)}
.card .kicker{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.card h3{font-size:20px;font-weight:400;line-height:1.3}
.card p{font-size:14.5px;color:var(--muted);flex:1}
.card .more{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-500)}

/* --- Objektdetail --- */
.gal{display:grid;grid-template-columns:1fr;gap:10px}
.gal .main{aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.gal .main img{width:100%;height:100%;object-fit:cover}
.gal .strip{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.gal .strip img{width:108px;height:74px;object-fit:cover;flex:0 0 auto;opacity:.55;cursor:pointer;transition:.3s}
.gal .strip img.on,.gal .strip img:hover{opacity:1;outline:2px solid var(--navy-500)}
.detail-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:start}
.detail-grid>*{min-width:0}
.gal,.gal .strip{min-width:0}
.keyfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.keyfacts>div{background:var(--paper);padding:20px 18px}
.keyfacts span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.keyfacts b{font-size:19px;font-weight:500;color:var(--ink)}
.pricebox{border:1px solid var(--navy-500);padding:28px 26px;background:var(--paper)}
.pricebox .p{font-size:32px;font-weight:400;color:var(--navy-500);line-height:1.1}
.pricebox .sub{font-size:13.5px;color:var(--muted);margin-top:4px}
.pricebox .row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.pricebox .row b{color:var(--ink);font-weight:500}
.sticky-side{position:sticky;top:110px}
.feat-list{display:grid;grid-template-columns:1fr;gap:0}
.feat-list li{list-style:none;padding:13px 0 13px 26px;border-bottom:1px solid var(--line);position:relative;font-size:15px}
.feat-list li::before{content:'·';position:absolute;left:0;color:var(--brass)}
.energy{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.energy span{border:1px solid var(--line);padding:8px 13px;font-size:13px;color:var(--muted)}
.energy b{color:var(--ink);font-weight:500}

/* --- Formular-Rückmeldungen --- */
.formnote{font-size:13px;color:var(--muted);margin-top:14px}

@media(min-width:640px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .keyfacts{grid-template-columns:repeat(4,1fr)}
  .feat-list{grid-template-columns:repeat(2,1fr);gap:0 30px}
  .gal .main{aspect-ratio:16/9}
  .pagehead{padding:64px 0 68px}
}
@media(min-width:992px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .article-grid{grid-template-columns:minmax(0,1fr) 330px;gap:70px}
  .detail-grid{grid-template-columns:minmax(0,1fr) 380px;gap:60px}
  .pagehead{padding:80px 0 84px}
}

/* --- Feinschliff kleine Displays --- */
@media(max-width:640px){
  /* Tap-Targets: Fußzeilen- und Menülinks bekommen Fläche */
  .footer ul li a{display:inline-block;padding:7px 0}
  .footer p a{display:inline-block;padding:3px 0}
  .drawer a{padding:14px 0}
  .crumbs a{display:inline-block;padding:4px 0}
}
@media(max-width:420px){
  .wrap{padding:0 16px}
  .section{padding:76px 0}
  .btn{padding:17px 24px;font-size:13px;width:100%}
  .hero-cta .btn,.cta-row .btn{width:100%}
  .h2{font-size:clamp(26px,7vw,34px)}
  .lead{font-size:16px}
  .eyebrow{letter-spacing:.24em;font-size:11px}
  .topbar{font-size:12px}
  .topbar .wrap{height:34px}
  .nav .wrap{height:78px}
  .nav .logo img{height:38px}
  .hero{min-height:auto;padding-top:0}
  .hero-in{padding-top:74px;padding-bottom:28px}
  .hero h1{font-size:32px;margin-top:16px}
  .hero-serv{margin-top:38px}
  .hero-serv a{padding:18px 2px}
  .serv .body,.card,.form,.wz-body,.calc-panel{padding-left:20px;padding-right:20px}
  .usp .item{padding:32px 22px}
  .usp .item .n{font-size:46px;margin-bottom:26px}
  .band{padding:76px 0}
  .step{padding:24px 0}
  .prose h2{margin-top:38px}
  .pricebox,.aside-cta,.toc{padding:22px 18px}
}

/* ==========================================================================
   Bewertungsrechner
   Ersetzt den dreistufigen Assistenten: die Zahl steht sofort, ohne dass
   jemand seine Adresse hergeben muss. Die kostenpflichtige DEKRA-Bewertung
   steht bewusst als eigener Block darunter und nicht als Häkchen im
   Formular, sie ist ein anderes Geschäft als die kostenlose Schätzung.
   ========================================================================== */
.rechner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;margin-top:52px;align-items:start}
.rech-ein{border:1px solid var(--line);background:var(--paper);padding:32px 30px}
.rech-frage{font-size:17px;color:var(--ink);margin-bottom:18px}
.arten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:30px}
.art{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;background:var(--paper);
  border:1px solid var(--line);cursor:pointer;transition:.25s var(--ease);font:inherit;font-size:12.5px;color:var(--text);
  text-align:center;line-height:1.3;hyphens:auto}
.art i{font-style:normal;font-size:22px;color:var(--brass);line-height:1}
.art:hover{border-color:var(--navy-500)}
.art.on{border-color:var(--navy-500);background:var(--paper-2);color:var(--ink);box-shadow:inset 0 -2px 0 var(--brass)}
.rech-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.feld-hilf{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5}

.rech-erg{border:1px solid var(--line);background:var(--navy-900);color:var(--on-navy);padding:32px 30px;position:sticky;top:96px}
.erg-vor{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-hi)}
.erg-wert{display:flex;align-items:baseline;gap:8px;margin:14px 0 6px;color:#fff;
  font-size:clamp(34px,4.4vw,52px);font-weight:300;line-height:1;letter-spacing:-.02em}
.erg-wert em{font-style:normal;font-size:.45em;color:var(--navy-300)}
.erg-spanne{font-size:14px;color:var(--navy-300)}
.erg-region{display:flex;align-items:center;gap:9px;margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line-dark);font-size:13.5px;color:var(--on-navy)}
.erg-punkt{width:7px;height:7px;border-radius:50%;background:var(--brass-hi);flex:0 0 auto}
.erg-mehr{margin-top:18px;background:none;border:0;padding:0;font:inherit;font-size:13px;
  color:var(--brass-hi);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.erg-weg{margin-top:16px;border-top:1px solid var(--line-dark);padding-top:14px;display:grid;gap:9px}
.weg-z{display:flex;justify-content:space-between;gap:14px;font-size:13px;color:var(--navy-300)}
.weg-z b{color:#fff;font-weight:400;white-space:nowrap}
.weg-z i{font-style:normal;color:var(--navy-300);opacity:.8}
.weg-z--summe{border-top:1px solid var(--line-dark);padding-top:10px;margin-top:3px;color:var(--on-navy)}
.erg-fuss{font-size:11.5px;color:var(--navy-300);line-height:1.7;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line-dark)}

/* ---- DEKRA, gesondert ---- */
.dekra-block{margin-top:34px;border:1px solid var(--line);border-left:3px solid var(--brass);
  background:var(--paper-2);padding:34px 32px;transition:.3s var(--ease)}
.dekra-block.an{background:#fff;border-left-color:var(--brass-hi);box-shadow:0 18px 50px rgba(20,26,36,.10)}
.dekra-kopf{display:grid;grid-template-columns:96px minmax(0,1fr);gap:26px;align-items:start}
.dekra-kopf img{width:96px;height:auto;mix-blend-mode:multiply}
.dekra-h{font-size:clamp(21px,2.4vw,28px);margin:12px 0 12px}
.dekra-lead{font-size:15.5px;color:var(--text);max-width:66ch}
.dekra-punkte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:26px 0 24px}
.dp{font-size:13.5px;color:var(--muted);line-height:1.65;border-top:1px solid var(--line);padding-top:13px}
.dp b{display:block;color:var(--ink);font-weight:500;font-size:14px;margin-bottom:4px}
.dekra-wahl{display:flex;align-items:flex-start;gap:14px;cursor:pointer;background:var(--paper);
  border:1px solid var(--line);padding:20px 22px;transition:.25s var(--ease)}
.dekra-wahl:hover{border-color:var(--brass)}
.dekra-block.an .dekra-wahl{border-color:var(--brass);background:var(--paper-2)}
.dekra-wahl input{position:absolute;opacity:0;width:0;height:0}
.dekra-box{width:22px;height:22px;border:1px solid var(--navy-400);flex:0 0 auto;margin-top:2px;
  display:grid;place-items:center;transition:.2s}
.dekra-box::after{content:'✓';color:#fff;font-size:14px;opacity:0;transition:.2s}
.dekra-wahl input:checked + .dekra-box{background:var(--brass);border-color:var(--brass)}
.dekra-wahl input:checked + .dekra-box::after{opacity:1}
.dekra-wahl input:focus-visible + .dekra-box{outline:2px solid var(--navy-500);outline-offset:3px}
.dekra-wort b{display:block;color:var(--ink);font-weight:500;font-size:15px;margin-bottom:4px}
.dekra-wort em{font-style:normal;font-size:13.5px;color:var(--muted);line-height:1.65}

/* ---- Formular ---- */
.rform{margin-top:34px;border:1px solid var(--line);background:var(--paper);padding:34px 32px}
.rform-h{font-size:clamp(20px,2.2vw,26px);margin-bottom:10px}
.rform-lead{font-size:15px;color:var(--muted);max-width:70ch;margin-bottom:26px}
.rform-mit{margin-top:20px;background:var(--paper-2);border:1px solid var(--line);padding:14px 16px;font-size:13px;color:var(--text)}
.rform-mit-t{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.rform-nav{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.rform-klein{font-size:12px;color:var(--muted)}

@media (max-width:960px){
  .rechner{grid-template-columns:minmax(0,1fr);gap:22px}
  .rech-erg{position:static}
  .dekra-punkte{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .rech-ein,.rech-erg,.dekra-block,.rform{padding:24px 20px}
  .arten{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .arten .art:last-child{grid-column:1 / -1;flex-direction:row;justify-content:center;gap:10px;padding:14px 8px}
  .rech-felder{grid-template-columns:minmax(0,1fr)}
  .dekra-kopf{grid-template-columns:64px minmax(0,1fr);gap:18px}
  .dekra-kopf img{width:64px}
  .dekra-punkte{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* Das hidden-Attribut wirkt über display:none aus dem Browser-Stylesheet.
   Jede eigene display-Angabe sticht es aus, ohne diese Zeile stünde der
   Rechenweg offen, während der Knopf „anzeigen“ verspricht. */
.erg-weg[hidden],.weg-z[hidden]{display:none}

/* ==========================================================================
   Hero-Leistungsbox
   Auf dem Telefon standen Ziffer und Text gedrängt in einer Zeile und
   rangen mit dem Video um Lesbarkeit. Jetzt: Ziffer als Marke, Leistung
   als Zeile, Nutzen darunter, Pfeil als Hinweis auf die Antippbarkeit.
   Eine leicht abgedunkelte Fläche trägt den Text gegen das Bild.
   ========================================================================== */
.hero-serv{gap:1px}
.hero-serv a{
  background:rgba(14,23,48,.46);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:15px;padding:15px 16px;
  transition:background .3s var(--ease),padding-left .35s var(--ease)}
.hero-serv a:hover,.hero-serv a:focus-visible{background:rgba(14,23,48,.66)}
.hs-nr{
  font-size:11.5px;font-weight:500;letter-spacing:.14em;color:var(--brass-hi);
  border:1px solid rgba(192,154,94,.55);border-radius:999px;
  padding:5px 10px;line-height:1;white-space:nowrap}
.hs-wort b{display:block;color:#fff;font-weight:400;font-size:17px;line-height:1.3;letter-spacing:.01em}
.hs-wort em{display:block;font-style:normal;font-size:13px;line-height:1.5;color:#BFC7DB;margin-top:2px}
.hs-pfeil{color:var(--brass-hi);font-size:17px;line-height:1;transition:transform .3s var(--ease)}
.hero-serv a:hover .hs-pfeil{transform:translateX(5px)}

@media(min-width:640px){
  /* Auf breiten Schirmen bleibt die dreispaltige Anordnung: Ziffer oben,
     Leistung darunter, Pfeil in der Ecke. */
  .hero-serv a{grid-template-columns:minmax(0,1fr);align-items:flex-start;
    gap:11px;padding:22px 20px;position:relative}
  .hs-pfeil{position:absolute;right:18px;top:21px}
  .hs-wort b{font-size:19px}
}
@media(max-width:420px){
  .hero-serv a{padding:13px 13px;gap:12px}
  .hs-wort b{font-size:16px}
  .hs-wort em{font-size:12.5px}
}

/* ---- Mitlaufender Wert am Rechner (nur Telefon und Tablet) ----
   Der untere Bildrand ist von der Aktionsleiste belegt, deshalb klebt
   die Leiste oben unter der Navigation. Sie verschwindet, sobald die
   grosse Ergebniskarte selbst im Bild steht, damit die Zahl nicht
   doppelt dasteht. */
.erg-mini{display:none}
@media(max-width:960px){
  .erg-mini{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:sticky;top:74px;z-index:45;
    background:var(--navy-900);color:#fff;
    padding:12px 18px;margin-bottom:14px;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 16px 34px -22px rgba(14,23,48,.95);
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .erg-mini.an{opacity:1;transform:none}
  .erg-mini__vor{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-hi)}
  .erg-mini__wert{font-size:21px;font-weight:400;letter-spacing:-.01em;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .erg-mini{transition:none}
}

/* Die ältere Regel .hero-serv span setzt Versalien und weite Sperrung.
   Sie trifft auch den Textblock, dessen Kindelemente zwar Größe und
   Farbe überschreiben, Laufweite und Versalien aber erben. Beides wird
   hier gezielt zurückgenommen, sonst steht die Nutzenzeile in Großbuchstaben. */
.hero-serv .hs-wort{text-transform:none;letter-spacing:normal;font-size:inherit;color:inherit}
.hero-serv .hs-nr{font-size:11.5px;letter-spacing:.14em}

/* ==========================================================================
   Mobiles Menü
   Vorher: sechs mittig gesetzte Wörter, deren erstes hinter der
   Navigationsleiste verschwand und deren letztes unten abgeschnitten
   wurde. Jetzt beginnt der Inhalt unter der Leiste, ist scrollbar und
   nach Rang geordnet: Ziffer, Ziel, was einen dort erwartet.
   ========================================================================== */
.drawer{
  position:fixed;inset:0;z-index:55;background:var(--navy-900);
  display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;
  clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease)}
.drawer.on{clip-path:inset(0 0 0 0)}
.drawer__in{
  min-height:100%;display:flex;flex-direction:column;
  padding:112px 22px calc(30px + env(safe-area-inset-bottom,0px))}
.drawer__vor{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--brass-hi);margin-bottom:14px}

.drawer__nav{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.14)}
.drawer__nav a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:17px 2px;border-bottom:1px solid rgba(255,255,255,.14);
  color:#fff;transition:padding-left .3s var(--ease),background .3s}
.drawer__nav a:hover,.drawer__nav a:focus-visible{background:rgba(255,255,255,.05);padding-left:10px}
.dn-nr{
  font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--brass-hi);
  border:1px solid rgba(192,154,94,.5);border-radius:999px;padding:5px 9px;line-height:1}
.dn-wort b{display:block;font-weight:300;font-size:23px;line-height:1.2;letter-spacing:-.01em}
.dn-wort em{display:block;font-style:normal;font-size:12.5px;line-height:1.5;color:#93A0C0;margin-top:3px}
.dn-pf{color:var(--brass-hi);font-size:16px;line-height:1;transition:transform .3s var(--ease)}
.drawer__nav a:hover .dn-pf{transform:translateX(5px)}

.drawer__cta{
  display:flex;align-items:center;justify-content:center;min-height:56px;margin-top:26px;
  background:var(--brass-hi);color:#15120A;font-size:13px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;transition:background .3s}
.drawer__cta:hover{background:#D2AE73}

.drawer__kontakt{display:grid;gap:10px;margin-top:auto;padding-top:28px}
.drawer__kontakt a{
  display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;
  border:1px solid rgba(255,255,255,.18);color:#fff;font-size:15px;transition:border-color .3s,background .3s}
.drawer__kontakt a:hover{border-color:var(--brass-hi);background:rgba(255,255,255,.05)}
.drawer__kontakt i{font-style:normal;color:var(--brass-hi);font-size:15px;flex:0 0 auto}
.drawer__fuss{margin-top:16px;font-size:12px;line-height:1.7;color:#7F8CAE;text-align:center}

@media(max-width:380px){
  .drawer__in{padding-left:18px;padding-right:18px}
  .dn-wort b{font-size:21px}
  .drawer__nav a{gap:13px;padding:15px 2px}
}
/* Auf niedrigen Schirmen im Querformat darf der Inhalt oben anfangen
   und rollen, statt gestaucht zu werden. */
@media(max-height:560px){
  .drawer__in{padding-top:92px}
  .dn-wort b{font-size:19px}
  .drawer__nav a{padding:13px 2px}
}

/* Verdichtet, damit auf einem üblichen Telefonschirm alle sechs Ziele,
   der Knopf und die Kontaktwege ohne Scrollen dastehen. Wer zum
   wichtigsten Knopf erst rollen muss, findet ihn nicht. */
.drawer__in{padding-top:100px}
.drawer__nav a{padding:13px 2px}
.dn-wort b{font-size:20px}
.dn-wort em{font-size:12px;margin-top:2px}
.drawer__cta{margin-top:18px;min-height:54px}
.drawer__kontakt{padding-top:18px;gap:8px}
.drawer__kontakt a{min-height:46px}
.drawer__fuss{margin-top:12px}

@media(max-height:740px){
  .drawer__in{padding-top:92px}
  .drawer__nav a{padding:11px 2px}
  .dn-wort b{font-size:18px}
  .dn-wort em{font-size:11.5px}
  .drawer__cta{min-height:50px;margin-top:14px}
  .drawer__kontakt{padding-top:14px}
  .drawer__kontakt a{min-height:44px}
}

/* Der Knopf brach in Versalien auf zwei Zeilen um und wurde dadurch
   doppelt so hoch wie geplant. Kürzere Beschriftung, engere Sperrung,
   und die Höhe wächst nur noch mit dem Innenabstand. */
.drawer__cta{
  padding:15px 16px;line-height:1.25;text-align:center;
  letter-spacing:.06em;font-size:13px;min-height:52px}

/* Auf niedrigen Schirmen tragen die Erläuterungszeilen weniger als der
   Platz, den sie kosten: dann zählt, dass alle Ziele und der Knopf
   ohne Rollen dastehen. */
@media(max-height:740px){
  .dn-wort em{display:none}
  .drawer__fuss{display:none}
  .drawer__in{padding-top:88px}
}

/* ---------- Besichtigungsdialog auf der Objektseite ---------- */
.mcard--dlg{max-width:640px;padding:0}
.dlg-kopf{padding:34px 30px 0}
.dlg-h{font-size:clamp(21px,2.6vw,27px);margin:14px 0 6px}
.dlg-meta{font-size:14px;color:var(--muted)}
.dlg-form{padding:24px 30px 32px}
.dlg-form .formnote{margin-top:14px}
@media(max-width:640px){
  .dlg-kopf{padding:26px 20px 0}
  .dlg-form{padding:20px 20px 26px}
}

/* ---------- Off Market ---------- */
.offhinweis{max-width:var(--maxw);margin:0 auto 26px;padding:18px 22px;background:var(--navy-900);color:var(--on-navy);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.offhinweis b{color:#fff;font-weight:500;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  border:1px solid var(--brass-hi);color:var(--brass-hi);padding:5px 11px;flex:0 0 auto}
.offhinweis span{font-size:14px;line-height:1.7;color:#C7CEE0;flex:1 1 260px}

/* ---------- Verkauft (Referenz) ----------
   Das Band liegt schräg über der Ecke des Bildes: es muss auf den ersten
   Blick klar sein, dass dieses Objekt kein Angebot mehr ist, sonst
   schreibt jemand eine Anfrage zu einer Wohnung, die längst weg ist. */
.band-verkauft{position:absolute;top:16px;right:-42px;z-index:2;transform:rotate(38deg);
  background:var(--brass);color:#fff;font-size:11px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;padding:7px 46px;box-shadow:0 6px 18px -8px rgba(14,23,48,.7)}
.obj:has(.band-verkauft) figure img{filter:grayscale(.55)}
.obj:hover:has(.band-verkauft) figure img{filter:grayscale(0)}
.offhinweis--verkauft{background:var(--paper-3);color:var(--text)}
.offhinweis--verkauft b{border-color:var(--brass);color:var(--brass)}
.offhinweis--verkauft span{color:var(--muted)}

/* ==========================================================================
   Rechtstexte
   ========================================================================== */
.recht{max-width:78ch}
.recht .h2{font-size:clamp(21px,2.4vw,27px);margin:42px 0 14px}
.recht .h2:first-of-type{margin-top:0}
.recht p{margin-bottom:16px}
.recht a{color:var(--navy-500);text-decoration:underline;text-underline-offset:3px}
.recht a:hover{color:var(--brass)}
.recht-kurz{border-left:3px solid var(--brass);background:var(--paper-2);padding:22px 24px;margin-bottom:44px}
.recht-kurz b{display:block;color:var(--ink);font-weight:500;margin-bottom:8px}
.recht-kurz p{margin:0;color:var(--muted)}
.recht-fuss{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px}
.recht-knopf{font:inherit;font-size:inherit;color:var(--navy-500);text-decoration:underline;
  text-underline-offset:3px;padding:0;background:none;border:0;cursor:pointer}
.recht-knopf:hover{color:var(--brass)}

/* ==========================================================================
   Einwilligungsfenster
   --------------------------------------------------------------------------
   Sitzt unten und lässt die Seite lesbar: Wer entscheiden soll, muss sehen
   können, worüber. Beide Knöpfe sind gleich gross, Ablehnen steht zuerst.
   ========================================================================== */
.einwil{position:fixed;left:0;right:0;bottom:0;z-index:120;padding:14px;display:none}
.einwil.an{display:block}
.einwil__karte{max-width:var(--maxw);margin:0 auto;background:var(--navy-900);color:var(--on-navy);
  border:1px solid var(--line-dark);box-shadow:0 30px 60px -30px rgba(14,23,48,.8);
  padding:24px 26px;display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.einwil__text h2{color:#fff;font-size:18px;font-weight:400;margin-bottom:10px}
.einwil__text p{font-size:14px;line-height:1.75;color:#C7CEE0;margin-bottom:10px}
.einwil__text p:last-child{margin-bottom:0}
.einwil__klein{font-size:13px !important;color:var(--navy-300) !important}
.einwil__text a{color:var(--brass-hi);text-decoration:underline;text-underline-offset:3px}
.einwil__knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.einwil__knoepfe .btn{padding:15px 18px;width:100%;font-size:13px}
.einwil__knoepfe .btn-line{color:#fff;border-color:rgba(255,255,255,.5)}
.einwil__knoepfe .btn-line:hover{background:#fff;color:var(--navy-900);border-color:#fff}
@media(min-width:860px){
  .einwil__karte{grid-template-columns:minmax(0,1fr) 320px;gap:34px;padding:26px 30px}
}
.f-einwil{font:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.f-einwil:hover{color:#fff}

/* Der Urheberhinweis steht leise unter der Fusszeile: eigene Zeile, kleiner
   und gedaempfter als die Rechtslinks, damit er nichts wegnimmt. */
.f-macher{flex:1 0 100%;order:9;font-size:12px;color:var(--navy-300);
  margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.f-macher a{color:var(--navy-300);text-decoration:underline;text-underline-offset:3px}
.f-macher a:hover{color:#fff}

/* ---------- Referenzen ----------
   Eine Referenzkarte ist kein Angebot: kein Zeiger, kein Anheben beim
   Überfahren, das Bild farbig gedämpft. Wer darauf klickt, soll nicht
   erwarten, dass sich etwas öffnet. */
.obj--ref{cursor:default}
.obj--ref:hover{transform:none;box-shadow:none;border-color:var(--line)}
.obj--ref figure img{filter:grayscale(.35)}
.obj--ref:hover figure img{transform:none;filter:grayscale(.35)}
.obj--ref .body{gap:6px}
.obj--ref h3{font-size:19px}
.ref-satz{font-size:14px;color:var(--muted);margin:0}
/* .filters setzt display:flex und würde damit das hidden-Attribut
   überstimmen. Bei nur einer Objektart soll die Leiste wirklich weg sein. */
.filters[hidden],#referenzen[hidden]{display:none}