/* =================================================================
   Design-Variante B  (Aufruf: ?design=b)
   Charakter: dunkel, kantig, typografisch. Terrakotta als Leitfarbe,
   Gruen als Nebenton. Keine Rundungen, keine weichen Schatten,
   Haarlinien statt Karten-Optik.
   Laedt zusaetzlich zu styles.css und ueberschreibt gezielt.
   ================================================================= */

body.design-b{
  --paper:#12150F;
  --cream:#171B14;
  --mist:#1E2319;
  --ink:#F2F1EA;
  --ink-soft:#9AA292;
  --line:#2C3327;
  --line-2:#3A4433;
  --r:0px; --r-sm:0px; --r-xs:0px;
  background:var(--paper);
  color:var(--ink);
  letter-spacing:.01em;
}

/* ---------- Grundflaechen ---------- */
body.design-b .section--paper{background:var(--paper)}
body.design-b .section--cream{background:var(--cream)}
body.design-b .section--mist{background:var(--mist)}
body.design-b .section--dark{background:#0C0F09}

body.design-b h1,body.design-b h2,body.design-b h3,body.design-b h4{
  color:var(--ink);letter-spacing:-.02em;text-transform:none}
body.design-b .display{font-weight:800;letter-spacing:-.03em}
body.design-b .eyebrow{color:var(--clay);letter-spacing:.28em}
body.design-b .eyebrow::after{display:none!important}
body.design-b .lead{color:var(--ink-soft)}

/* ---------- Navigation ---------- */
body.design-b .site-nav{background:transparent;border-bottom:1px solid transparent}
body.design-b .site-nav.is-solid{background:rgba(18,21,15,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);box-shadow:none}
body.design-b .site-nav .mainmenu a{color:var(--ink-soft);text-transform:uppercase;
  font-size:.78rem;letter-spacing:.16em}
body.design-b .site-nav .mainmenu a:hover,
body.design-b .site-nav .mainmenu a.active{color:var(--ink);background:transparent;
  box-shadow:inset 0 -2px 0 var(--clay)}
body.design-b .site-nav.is-solid .brand__logo--color{display:none}
body.design-b .site-nav.is-solid .brand__logo--white{display:block}
body.design-b .mainmenu__cta a{background:transparent!important;color:var(--clay)!important;
  border:1px solid var(--clay);box-shadow:none}
body.design-b .mainmenu__cta a:hover{background:var(--clay)!important;color:#fff!important}
body.design-b .nav-toggle span{background:var(--ink)}

/* ---------- Hero ---------- */
body.design-b .hero{background:#0C0F09}
body.design-b .hero::after{background:linear-gradient(180deg,rgba(12,15,9,.2),rgba(12,15,9,.92))}
body.design-b .hero__title{font-weight:800;letter-spacing:-.03em}
body.design-b .hero__title span{color:var(--clay);font-weight:500}
body.design-b .hero__stat .n{color:var(--clay)}

/* ---------- Buttons ---------- */
body.design-b .btn{border-radius:0;text-transform:uppercase;letter-spacing:.14em;
  font-size:.76rem;padding:.95rem 1.9rem;border-width:1px}
body.design-b .btn-leaf{background:var(--clay);border-color:var(--clay);box-shadow:none}
body.design-b .btn-leaf:hover{background:transparent;color:var(--clay);transform:none}
body.design-b .btn-accent{background:var(--clay);box-shadow:none}
body.design-b .btn-accent:hover{background:transparent;color:var(--clay);border-color:var(--clay);transform:none}
body.design-b .btn-outline-leaf{border-color:var(--line-2);color:var(--ink);background:transparent}
body.design-b .btn-outline-leaf:hover{border-color:var(--clay);color:var(--clay);background:transparent}
body.design-b .btn-ghost-light:hover{background:var(--clay);color:#fff;border-color:var(--clay)}

/* ---------- Karten: flache Bloecke mit Haarlinie ---------- */
body.design-b .unit-card{background:var(--cream);border:1px solid var(--line);
  border-radius:0;box-shadow:none}
body.design-b .unit-card:hover{transform:none;border-color:var(--clay);box-shadow:none}
body.design-b .unit-card__media--plan{background:#F6F5F0;border-bottom:1px solid var(--line)}
body.design-b .unit-card__bar{background:transparent!important;border-bottom:1px solid var(--line);
  padding:1.1rem 1.2rem}
body.design-b .unit-card:hover .unit-card__bar{background:transparent!important}
body.design-b .unit-card__num{background:transparent;border:1px solid var(--clay);
  color:var(--clay);width:52px;height:52px}
body.design-b .unit-card__num small{color:var(--ink-soft)}
body.design-b .unit-card__head strong{color:var(--ink);font-weight:600}
body.design-b .unit-card__head em{color:var(--ink-soft)}
body.design-b .unit-card__body{background:transparent}
body.design-b .unit-meta .v{color:var(--ink)}
body.design-b .unit-meta .k{color:var(--ink-soft)}
body.design-b .unit-card__cta{color:var(--clay)}
body.design-b .unit-card:hover .unit-card__cta{color:var(--ink)}
body.design-b .unit-card--gewerbe .unit-card__num{border-color:var(--sage);color:var(--sage)}

/* Status + Stoerer als kantige Marken */
body.design-b .status{border-radius:0;text-transform:uppercase;letter-spacing:.14em;
  background:rgba(18,21,15,.86);color:var(--ink);border:1px solid var(--line-2)}
body.design-b .status.is-free{background:rgba(18,21,15,.86);color:#BFD4A4;border-color:#3F5432}
body.design-b .stoerer{border-radius:0;background:var(--clay);box-shadow:none}

/* ---------- Filter + Ansichtsumschalter ---------- */
body.design-b .filter-label{color:var(--ink-soft)}
body.design-b .floor-filter button{background:transparent;border:1px solid var(--line-2);
  color:var(--ink-soft);border-radius:0;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}
body.design-b .floor-filter button:hover{border-color:var(--clay);color:var(--ink)}
body.design-b .floor-filter button.active{background:var(--clay);border-color:var(--clay);
  color:#fff;box-shadow:none}
body.design-b .view-toggle{background:transparent;border-color:var(--line-2)}
body.design-b .view-toggle button{color:var(--ink-soft)}
body.design-b .view-toggle button:hover{background:var(--mist);color:var(--ink)}
body.design-b .view-toggle button.active{background:var(--clay);color:#fff}

/* ---------- Detailseite ---------- */
body.design-b .unit-hero{background:#0C0F09;border-bottom:1px solid var(--line)}
body.design-b .unit-hero__num{background:transparent;border:1px solid var(--clay);color:var(--clay)}
body.design-b .plan-figure,body.design-b .unit-viz,body.design-b .viz-card{
  background:#F6F5F0;border:1px solid var(--line);border-radius:0;box-shadow:none}
body.design-b .plan-figure figcaption{color:var(--ink-soft);background:var(--cream);
  margin:0;padding:.7rem .9rem;border-top:1px solid var(--line)}
body.design-b .plan-figure--context{background:#F6F5F0}
body.design-b .tag{background:transparent;border:1px solid var(--line-2);color:var(--ink-soft);
  border-radius:0;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}
body.design-b .room-table th,body.design-b .room-table td{border-color:var(--line);color:var(--ink)}
body.design-b .room-table tr:nth-child(even){background:var(--mist)}
body.design-b .room-total{background:transparent;border:1px solid var(--clay);color:var(--clay);
  border-radius:0}
body.design-b .rooms-block__title{color:var(--ink)}
body.design-b .legal-note{border-color:var(--line);color:var(--ink-soft)}
body.design-b .unit-nav a{background:var(--cream);border:1px solid var(--line);border-radius:0}
body.design-b .unit-nav a:hover{border-color:var(--clay)}

/* ---------- Highlights / Listen ---------- */
body.design-b .hl-card,body.design-b .feature-card,body.design-b .dist-list li{
  background:var(--cream);border:1px solid var(--line);border-radius:0;box-shadow:none}
body.design-b .hl-card .ico,body.design-b .dist-list .ico{background:transparent;
  border:1px solid var(--clay);color:var(--clay);border-radius:0}
body.design-b .hl-card h3{color:var(--ink)}
body.design-b .hl-card p,body.design-b .feature-card p{color:var(--ink-soft)}

/* ---------- Formular ---------- */
body.design-b .form-control,body.design-b .form-select,body.design-b textarea{
  background:var(--cream);border:1px solid var(--line-2);color:var(--ink);border-radius:0}
body.design-b .form-control:focus{border-color:var(--clay);box-shadow:none}
body.design-b label{color:var(--ink-soft)}

/* ---------- Footer ---------- */
body.design-b .site-footer{background:#0C0F09;border-top:1px solid var(--line)}
body.design-b .partner__logo--tile{background:#F6F5F0;border-radius:0}

/* ---------- Bildanzeige ---------- */
body.design-b .lightbox{background:rgba(8,10,6,.97)}
body.design-b .lightbox__btn,body.design-b .lightbox__nav{border-radius:0}

/* ---------- Umschalter fuer die Design-Variante ---------- */
.design-switch{position:fixed;left:1rem;bottom:1rem;z-index:1150;display:flex;
  border:1px solid var(--line-2);background:var(--paper);box-shadow:var(--shadow-sm)}
.design-switch a{display:block;padding:.5rem .9rem;font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none}
.design-switch a + a{border-left:1px solid var(--line-2)}
.design-switch a.active{background:var(--clay);color:#fff}