@import "/includes/includes/global.css";
@import "/includes/fonts/pt-sans/styles.css";
@import "/includes/fonts/open-sans-v2/styles.css";
@import "/includes/immo/styles_v2.css";

:root {
  --color-main: #29559c;
  --color-main-light: #f3525a;
  --color-gray: #636363;
  --color-light-blue: #838281;
  --color-text: #222222;
  --bg-gray: #f8f9fa;
}

/* ============================================================
   HBRE Consulting - Editorial v4 (Final)
   Basis: v1 (editorial-hochwertig)
   Hero-Texte: aus C (warme Ansprache)
   Region: aus C (Pills + Bilder)
   Wechselnde Hintergr�nde f�r Rhythmus
   Keine handschriftlichen Caveat-Akzente.
   ============================================================ */
:root {
  --paper: #FAF7F0;
  /* hell, fast vanilla */
  --paper-2: #F1EADC;
  /* dezent w�rmer */
  --paper-3: #ECE3CD;
  /* nochmal eine Stufe w�rmer */
  --ink: #1A1A19;
  --ink-soft: #3D3A34;
  --ink-mute: #8A837A;
  --forest: #2D4040;
  --forest-deep: #1E2E2E;
  --sand: #B8A078;
  --sand-deep: #8B7854;
  --sand-pale: #E8D9BC;
  --tomato: #C8694A;
  /* Hero-Stempel + sehr sparsame Akzente */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --page-pad: clamp(20px, 4vw, 64px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  margin: 0;
}

/* Container etwas gro�z�giger */
.container {
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}

.serif {
  font-family: var(--serif);
  font-optical-sizing: auto;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}

.forest {
  color: var(--forest) !important;
}

.sand-deep {
  color: var(--sand-deep) !important;
}


h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0;
}

h2.text, #disclaimer h2 {
  margin-bottom: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
}

a[href^="mailto:"] { 
	text-decoration: underline;
	text-decoration-style: dotted;
}

p {
	text-align: justify;
  hyphens: auto;
}

p.phil-lead {
	text-align: left;
	hyphens: none;
}

::selection {
  background: var(--forest);
  color: var(--paper);
}

/* Section-Abst�nde */
.section {
  padding: clamp(70px, 2vw, 130px) 0;
}

.section-pad {
  padding: clamp(70px, 6vw, 130px) 0;
}

/* Wechselnde Hintergr�nde f�r Rhythmus */
.bg-paper {
  background: var(--paper);
}

.bg-paper-2 {
  background: var(--paper-2);
}

.bg-sand-pale {
  background: var(--sand-pale);
}

.bg-forest {
  background: var(--forest-deep);
  color: var(--paper);
}

/* ============================================================
   DATELINE � der gr�ne Streifen oben aus v1
   ============================================================ */
.dateline {
  background: var(--forest-deep);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 15px var(--page-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.dateline .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sand);
  display: inline-block;
  margin: 0 .6em;
  transform: translateY(-1px);
}

.dateline .center {
  flex: 1;
  text-align: center;
  /*opacity: .85;*/
}

.dateline .live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.dateline .live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sand);
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

.socialmedia {
  display: contents;
}

.socialmedia li {
  list-style: none;
}

.socialmedia li a {
  color: white;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }
  50% {
    opacity: .4;
    transform: scale(.7)
  }
}

@media (max-width: 720px) {
  .dateline .center {
    display: none;
  }

  .dateline {
    font-size: 10px;
    letter-spacing: .18em;
  }
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, padding .3s ease, background .3s ease;
}

.nav-wrap.scrolled {
  border-bottom-color: var(--forest);
  background: rgba(250, 247, 240, .96);
  backdrop-filter: blur(6px);
}

.nav-inner {
  padding: 22px var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  transition: padding .3s ease;
}

.nav-wrap.scrolled .nav-inner {
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand-logo {
  display: block;
  height: 80px;
  width: auto;
  transition: height .3s ease;
}

.nav-wrap.scrolled .brand-logo {
  height: 38px;
}

.nav-links {
  display: flex;
  gap: 2.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
}

.nav-links a {
  position: relative;
  transition: color .3s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--forest);
  transition: right .35s ease;
}

.nav-links a:hover {
  color: var(--forest);
}

.nav-links a:hover::after {
  right: 0;
}

.nav-cta {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--forest);
  padding: 11px 18px;
  border-radius: 999px;
  transition: all .3s ease;
  background: transparent;
  color: var(--forest);
}

.nav-cta:hover {
  background: var(--forest);
  color: var(--paper);
}

.burger {
  display: none;
  border: 0;
  background: none;
  font-size: 22px;
  color: var(--forest);
}

@media (max-width: 960px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .burger {
    display: inline-block;
  }

  .nav-links.open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    flex-direction: column;
    padding: 20px var(--page-pad);
    border-top: 1px solid var(--forest);
    gap: 1rem;
    font-size: 18px;
    font-family: var(--serif);
  }
}

/* ============================================================
   MASTHEAD mit gro�em Hero-Bild + Slogan IM Bild
   ============================================================ */
.masthead {
  padding: clamp(30px, 4vw, 60px) var(--page-pad) clamp(50px, 6vw, 90px);
  border-bottom: 1px solid var(--forest);
  position: relative;
}

.subhead {
  padding: clamp(30px, 4vw, 60px) var(--page-pad) clamp(50px, 6vw, 90px);
  border-bottom: none;
  position: relative;
}

.masthead-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--forest);
  margin-bottom: clamp(30px, 4vw, 50px);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

.masthead-top .m-center {
  text-align: center;
}

.masthead-top .m-right {
  text-align: right;
}

@media (max-width: 800px) {
  .masthead-top {
    grid-template-columns: 1fr;
    gap: .5rem;
    text-align: center;
  }

  .masthead-top .m-right,
  .masthead-top .m-left {
    text-align: center;
  }
}




.hero-cover {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid var(--forest);
  width: 100%;          /* zwingt volle Breite */
}

@media (min-width: 900px) {
  .hero-cover {
    aspect-ratio: 16/9;
    max-height: 750px;
    width: 100%;        /* zwingt volle Breite */
  }

  .subhead .hero-cover {
    aspect-ratio: 5;
    max-height: 750px;
    width: 100%;
  }
}




.hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.02);
  transition: transform 8s ease;
}

.hero-cover:hover img {
  transform: scale(1.04);
}

.hero-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
  rgba(30, 46, 46, .05) 0%,
  rgba(30, 46, 46, .15) 30%,
  rgba(30, 46, 46, .55) 70%,
  rgba(30, 46, 46, .85) 100%);
  pointer-events: none;
  z-index: 1;
}


.hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(30px, 5vw, 80px) clamp(30px, 5vw, 70px) clamp(30px, 5vw, 70px);
  color: var(--paper);
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(20px, 4vw, 60px);
}

@media (max-width: 800px) {
  .hero-overlay {
    grid-template-columns: 1fr;
    padding-bottom: 100px;
  }
}

/* Greeting-Eyebrow oben � Editorial-Caps in Sand */
.hero-greeting {
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.hero-greeting::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--sand);
  display: inline-block;
}

.hero-title {
  font-size: clamp(48px, 6vw, 156px);
  font-family: var(--serif);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.025em;
  color: var(--paper);
  margin: 0;
  font-variation-settings: "SOFT" 30, "opsz" 144;
  text-shadow: 0 2px 30px rgba(30, 46, 46, .25);
}

.subhead .hero-title {
  font-size: clamp(48px, 3vw, 156px);
}

.hero-title .italic {
  font-style: italic;
  color: var(--sand);
  font-variation-settings: "SOFT" 70, "opsz" 144;
}




/* ============================================================
   VIER VERSPRECHEN (Container, paper-2)
   ============================================================ */
.promises-head {
  /*display: grid;
  grid-template-columns: 1fr 2fr;*/
  gap: 2rem;
  margin-bottom: clamp(30px, 4vw, 60px);
  align-items: start;
}

@media (max-width: 800px) {
  .promises-head {
    grid-template-columns: 1fr;
  }
}

.promises-title {
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: .95;
  max-width: 14ch;
  font-weight: 300;
}

.promises-title em {
  font-style: italic;
  color: var(--forest);
}


.promise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--forest);
  margin: 0 auto;
  width: 90%;
}

@media (max-width: 900px) {
  .promise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .promise-grid {
    grid-template-columns: 1fr;
  }
}

.promise {
  padding: 36px 28px 30px;
  border-right: 1px solid var(--forest);
  border-bottom: 1px solid var(--forest);
  position: relative;
  transition: background .3s ease;
  /*min-height: 260px;*/
  display: flex;
  flex-direction: column;
}

.promise:nth-child(4) {
  border-right: 0;
}

@media (max-width: 900px) {
  .promise:nth-child(2) {
    border-right: 0;
  }

  .promise:nth-child(3) {
    border-right: 1px solid var(--forest);
  }
}

@media (max-width: 520px) {
  .promise {
    border-right: 0;
    min-height: 0;
  }
}

.promise:hover {
  background: rgba(255, 255, 255, .4);
}


.promise .lbl {
  font-family: var(--serif);
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 14px;
}

.promise .lbl em {
  font-style: italic;
  color: var(--forest);
}

.promise .desc {
  /*margin-top: auto;*/
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ============================================================
   PHILOSOPHIE
   ============================================================ */
.phil-lead {
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 1.5em;
}

.phil-lead em {
  color: var(--forest);
  font-style: italic;
  font-variation-settings: "SOFT" 60, "opsz" 144;
}

.phil-body {
  column-count: 2;
  column-gap: 2.4rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .phil-body {
    column-count: 1;
  }
}

.phil-body p {
  margin: 0 0 1.1em;
  break-inside: avoid;
}

p.capital::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 5.6em;
  line-height: .85;
  font-weight: 300;
  padding: .05em .12em 0 0;
  color: var(--forest);
  font-variation-settings: "SOFT" 100, "opsz" 144;
}

p.capital.sand::first-letter {
  color: var(--sand);
  font-weight: 200;
  font-size: 4rem;
}

.capital.text {
  margin-bottom: 4rem;
}

.capital.text.sand p:first-child::first-letter {
  color: var(--sand);
  font-weight: 200;
}

img.float-l {
  float: left;
  margin-right: 1rem;
  max-width: 40%;
}

img.float-r {
  float: right;
  margin-left: 1rem;
  max-width: 40%;
}

/* ==========================================================
   FOUNDERS ? Polaroid-artig
   ========================================================== */
.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  margin-top: 3rem;
}

.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  margin-top: 3rem;
}





@media (max-width: 800px) {
  .founders-grid {
    grid-template-columns: 1fr;
    gap: 70px;
  }
}

.founder-c {
  position: relative;
  text-align: center;
}

.founder-c:nth-child(1) .photo {
  transform: rotate(-2deg);
}

.founder-c:nth-child(2) .photo {
  transform: rotate(2deg);
}

.founder-c .photo {
  background: var(--cream);
  padding: 14px;
  display: inline-block;
  box-shadow: 0 14px 40px rgba(45, 64, 64, .12);
  border-radius: 4px;
  position: relative;
  margin-bottom: 24px;
  transition: transform .4s ease;
  max-width: 380px;
  width: 100%;
}

.founder-c:hover .photo {
  transform: rotate(0deg) scale(1.02);
}

.founder-c .photo img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  filter: saturate(.9);
}


.founder-c .photo .pin {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--tomato);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), inset 0 -3px 4px rgba(0, 0, 0, .2);
}

.founder-c .info {
  max-width: 360px;
  margin: 0 auto;
  text-align: left;
}


.founder-c .info h3 {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -.02em;
  margin: 0 0 8px;
}

.founder-c .info h3 em {
  font-style: italic;
  color: var(--forest);
}

.founder-c .info .credentials {
  font-size: 1rem;
  color: var(--ink-mute);
  margin-bottom: 10;
  font-weight: 500;
}

.founder-c .info p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 16px;
}

.founder-c .info p em {
  font-style: italic;
  color: var(--forest);
}


/* ============================================================
   BEWERTUNG � auf sand-pale, Cards mit paper Hintergrund
   ============================================================ */
.val-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 70px);
}

@media (max-width: 800px) {
  .val-head {
    grid-template-columns: 1fr;
  }
}

.val-head .eyebrow {
  color: var(--sand-deep);
}

.val-head h2 {
  font-size: clamp(40px, 6vw, 92px);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.02em;
}

.val-head h2 em {
  font-style: italic;
  color: var(--forest);
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.val-head .lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 50ch;
}

.val-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--forest);
  border: 1px solid var(--forest);
}

@media (max-width: 900px) {
  .val-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .val-grid {
    grid-template-columns: 1fr;
  }
}

.val-card {
  background: var(--paper);
  padding: clamp(24px, 2.5vw, 36px);
  position: relative;
  transition: background .4s ease;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.val-card:hover {
  background: var(--sand-pale);
}

.val-card .no {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  color: var(--forest);
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

.val-card h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.val-card h3 em {
  font-style: italic;
  color: var(--forest);
}

.val-card .vd {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 14px;
}

.val-card .vn {
  margin-top: auto;
  border-top: 1px dashed var(--sand-deep);
  padding-top: 14px;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
}

.val-card .vn strong {
  font-style: normal;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
}

/* ============================================================
   REGION � aus C: Mosaik + Pills, full-bleed dunkel
   ============================================================ */
.region {
  padding: clamp(70px, 9vw, 130px) var(--page-pad);
  background: var(--forest-deep);
  color: var(--paper);
  position: relative;
}

.region::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 20% 10%, rgba(184, 160, 120, .14), transparent 60%);
}

.region-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 2.5rem;
  margin-bottom: clamp(40px, 5vw, 80px);
  position: relative;
  z-index: 1;
}

@media (max-width: 800px) {
  .region-head {
    grid-template-columns: 1fr;
  }
}

.region-head .eyebrow {
  color: var(--sand);
}

.region-head h2 {
  font-size: clamp(44px, 4vw, 108px);
  font-weight: 300;
  line-height: .95;
}

.region-head h2 em {
  font-style: italic;
  color: var(--sand);
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

h2 em {
  font-style: italic;
  color: var(--sand);
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.region-head p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: rgba(250, 247, 240, .82);
  max-width: 48ch;
}

/* Mosaik: 6 Bilder unterschiedlicher Gr��e */
.region-mosaic {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  margin-bottom: clamp(40px, 5vw, 70px);
  position: relative;
  z-index: 1;
}

@media (max-width: 800px) {
  .region-mosaic {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.rm {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(250, 247, 240, .15);
  background: rgba(0, 0, 0, .2);
}

.rm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease, filter .4s ease;
  filter: saturate(.78) contrast(1.02) brightness(.9);
}

.rm:hover img {
  transform: scale(1.05);
  filter: saturate(.95) brightness(1);
}

.rm .label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(250, 247, 240, .9);
  backdrop-filter: blur(4px);
  color: var(--forest-deep);
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
}

.rm.l-1 {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1/1;
}

.rm.l-2 {
  grid-column: span 2;
  aspect-ratio: 16/10;
}

.rm.l-3 {
  grid-column: span 2;
  aspect-ratio: 16/10;
}

.rm.l-4 {
  grid-column: span 1;
  aspect-ratio: 1/1;
}

.rm.l-5 {
  grid-column: span 2;
  aspect-ratio: 16/10;
}

.rm.l-6 {
  grid-column: span 1;
  aspect-ratio: 1/1;
}

@media (max-width: 800px) {
  .rm.l-1,
  .rm.l-2,
  .rm.l-3,
  .rm.l-5 {
    grid-column: span 2;
    aspect-ratio: 16/10;
    grid-row: auto;
  }

  .rm.l-4,
  .rm.l-6 {
    grid-column: span 1;
  }
}

/* Region: St�dte-Card unter Mosaik */
.region-cities {
  background: rgba(250, 247, 240, .04);
  border: 1px solid rgba(250, 247, 240, .15);
  padding: clamp(28px, 3vw, 40px);
  position: relative;
  z-index: 1;
}

.region-cities .lbl {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sand);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.region-cities .lbl::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--sand);
}

.region-cities .cities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.region-cities .cities span {
  background: rgba(250, 247, 240, .04);
  border: 1px solid rgba(250, 247, 240, .25);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--paper);
  transition: all .25s ease;
  cursor: default;
}

.region-cities .cities span:hover {
  background: var(--sand);
  color: var(--forest-deep);
  border-color: var(--sand);
  transform: translateY(-2px);
}

/* ============================================================
   PROZESS (Container, paper)
   ============================================================ */
.process-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 80px);
}

@media (max-width: 800px) {
  .process-head {
    grid-template-columns: 1fr;
  }
}

.process-head h2 {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 300;
  line-height: .95;
  max-width: 12ch;
}

.process-head h2 em {
  font-style: italic;
  color: var(--forest);
}

.process-head .sub {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 54ch;
}

.chapters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.chapter {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  gap: clamp(20px, 4vw, 60px);
  padding: clamp(32px, 4vw, 52px) 0;
  border-top: 1px solid var(--forest);
  align-items: start;
  transition: background .4s ease;
}

.chapter:last-child {
  border-bottom: 1px solid var(--forest);
}

.chapter:hover {
  background: linear-gradient(90deg, var(--paper-2), transparent 70%);
}

.chapter .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 5.5vw, 76px);
  color: var(--sand-deep);
  line-height: .9;
  letter-spacing: -.03em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
}

.chapter .tt {
  font-family: var(--serif);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.015em;
}

.chapter .tt em {
  color: var(--forest);
  font-style: italic;
}

.chapter .bd {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
  max-width: 58ch;
}

.chapter .bd .kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 10px;
}

@media (max-width: 800px) {
  .chapter {
    grid-template-columns: 1fr;
  }

  .chapter .num {
    font-size: 52px;
  }
}

/* ============================================================
   AKTUELLE ANGEBOTE � Estate45-Markup mit GROSSEN Bildern
   ============================================================ */
.listings-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 70px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--forest);
}

@media (max-width: 800px) {
  .listings-head {
    grid-template-columns: 1fr;
  }
}

.listings-head h2 {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 300;
  letter-spacing: -.02em;
}

.listings-head h2 em {
  font-style: italic;
  color: var(--forest);
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.listings-head .lede {
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 52ch;
  font-family: var(--serif);
}

/* Estate45-Cards gro� im editorial Stil */
.events {
  --bs-gutter-y: 32px;
}

.event-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .5s ease;
  height: 100%;
}

.event-item-link:hover {
  transform: translateY(-4px);
  color: inherit;
}

.event-item {
  background: var(--paper);
  border: 1px solid var(--forest);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* GR�SSERE BILDER: aspect 4/3 statt 16/10 */
.event-image {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  background: var(--paper-2);
  border-bottom: 1px solid var(--forest);
}

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
  filter: saturate(.92);
}

.event-item-link:hover .event-image img {
  transform: scale(1.05);
}

.event-details {
  padding: 26px 26px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-category {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--forest);
  padding-bottom: 16px;
}

.event-category .badge {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--forest);
  background: transparent !important;
  border: 1px solid var(--forest);
  padding: 5px 10px;
  border-radius: 0;
}

.event-price {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* h3 ist der Ort */
.event-item h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sand-deep);
  margin: 0 0 12px;
  line-height: 1.3;
}

/* .info = Beschreibungstext */
.event-item .info {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0 0 22px;
  color: var(--ink);
  flex: 1;
}

/* Icon-Zeile */
.event-info {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  color: var(--ink-soft);
  font-size: 13px;
  border-top: 1px solid var(--forest);
  padding-top: 16px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .02em;
}

.event-info .me-3 {
  margin-right: 0 !important;
}

.event-info span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.event-info i {
  color: var(--forest);
  margin-right: 4px;
  font-size: 14px;
}

/* Der CTA-Button aus dem Estate45-Markup */
.listings-section .btn-primary {
  background: var(--forest) !important;
  border: 1px solid var(--forest) !important;
  color: var(--paper) !important;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 16px 30px !important;
  border-radius: 999px !important;
  transition: all .4s ease;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: none;
}

.listings-section .btn-primary:hover {
  background: transparent !important;
  color: var(--forest) !important;
}



.btn-primary {
  color: #fff;
  background-color: var(--sand-deep);
  border-color: var(--sand-deep);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--tomato);
  border-color: var(--tomato);
}



/*
.listings-section .btn-primary::after {
  content: "?";
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  transition: transform .3s ease;
}
*/
.listings-section .btn-primary:hover::after {
  transform: translateX(6px);
}

.figure {
  margin: 0 0 1rem;
}

/* ============================================================
   KONTAKT � aus C, Texte �Lassen Sie uns quatschen"
   ============================================================ */
.contact {
  padding: clamp(70px, 4vw, 130px) 0;
  background: var(--forest-deep);
  color: var(--paper);
}

.contact-head {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(250, 247, 240, .3);
  margin-bottom: clamp(40px, 5vw, 80px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
}

@media (max-width: 800px) {
  .contact-head {
    grid-template-columns: 1fr;
  }
}

.contact-head h2 {
  font-size: clamp(40px, 6vw, 92px);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.02em;
}

.contact-head h2 em {
  font-style: italic;
  color: var(--sand);
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.contact-head .eyebrow {
  color: var(--sand);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.atelier h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 300;
  letter-spacing: -.01em;
  margin-bottom: 14px;
}

.atelier h3 em {
  font-style: italic;
  color: var(--sand);
}

.atelier .intro {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(250, 247, 240, .85);
  margin-bottom: 28px;
  max-width: 42ch;
}

.atelier .ci-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

.atelier .ci {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--paper);
}

.atelier .ci .ic {
  width: 20px;
  height: 20px;
  background: rgba(250, 247, 240, .08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--sand);
  flex-shrink: 0;
}

.atelier .ci a {
  border-bottom: 1px dashed rgba(250, 247, 240, .4);
  padding-bottom: 1px;
  transition: all .25s ease;
}

.atelier .ci a:hover {
  color: var(--sand);
  border-color: var(--sand);
}

.atelier-note {
  margin-top: 12px;
  padding: 18px 22px;
  background: rgba(184, 160, 120, .1);
  border-left: 2px solid var(--sand);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--paper);
}

.atelier-note strong {
  font-style: normal;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

/* Formular */
.form-card {
  background: rgba(250, 247, 240, .04);
  border: 1px solid rgba(250, 247, 240, .2);
  padding: clamp(26px, 3vw, 44px);
}

.form-card h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 300;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}

.form-card h3 em {
  font-style: italic;
  color: var(--sand);
}

.form-card .sh {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 600;
  margin-bottom: 24px;
}

.fg {
  margin-bottom: 22px;
}

.fg label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 600;
  margin-bottom: 8px;
}

.fg input,
.fg textarea,
.fg select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(250, 247, 240, .3);
  padding: 10px 0 12px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 18px;
  transition: border-color .3s ease;
  border-radius: 0;
}

.fg input:focus,
.fg textarea:focus,
.fg select:focus {
  outline: 0;
  border-color: var(--sand);
}

.fg input::placeholder,
.fg textarea::placeholder {
  color: rgba(250, 247, 240, .35);
  font-style: italic;
}

.fg select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sand) 50%), linear-gradient(135deg, var(--sand) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.fg select option {
  background: var(--forest-deep);
  color: var(--paper);
}

.fg textarea {
  min-height: 100px;
  resize: vertical;
}

.fg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 520px) {
  .fg-row {
    grid-template-columns: 1fr;
  }
}

.btn-submit {
  width: 100%;
  padding: 20px 30px;
  background: var(--sand);
  color: var(--forest-deep);
  border: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.btn-submit:hover {
  background: var(--paper);
  transform: translateY(-2px);
}

.btn-submit .arr {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
}

.fg-consent {
  font-size: 12px;
  color: rgba(250, 247, 240, .6);
  line-height: 1.5;
  margin-bottom: 24px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--sans);
}

.fg-consent input {
  margin-top: 3px;
  accent-color: var(--sand);
  flex: 0 0 auto;
}

.fg-consent a {
  color: var(--sand);
  border-bottom: 1px solid rgba(184, 160, 120, .4);
}

/* ============================================================
   FOOTER
   ============================================================ */
.colophon {
  background: var(--ink);
  color: rgba(250, 247, 240, .62);
  padding: clamp(40px, 5vw, 40px) var(--page-pad) 28px;
  border-top: 1px solid rgba(250, 247, 240, .14);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .12em;
}

.col-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(250, 247, 240, .14);
  margin-bottom: 24px;
}

@media (max-width: 800px) {
  .col-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
  }
}

@media (max-width: 520px) {
  .col-grid {
    grid-template-columns: 1fr;
  }
}

.col-grid h4 {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 14px;
}

.col-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.col-grid a {
  transition: color .3s ease;
}

.col-grid a:hover {
  color: var(--sand);
}

.col-logo {
  height: 56px;
  width: auto;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
  opacity: .9;
}

.col-text {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(250, 247, 240, .7);
  max-width: 36ch;
}

.col-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, .45);
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(.2, .6, .2, 1), transform 1s cubic-bezier(.2, .6, .2, 1);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal.delay-1 {
  transition-delay: .12s;
}

.reveal.delay-2 {
  transition-delay: .24s;
}

.reveal.delay-3 {
  transition-delay: .36s;
}

/* ============================================================
   Dropdown-Untermen� (Desktop: Hover, Mobile: Tap)
   ============================================================ */
.nav-links .has-sub {
  position: relative;
}

.nav-links .nav-sub-toggle {
  /* sieht aus wie ein normaler Nav-Link */
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.nav-links .nav-sub-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
  margin-left: 2px;
}

.nav-links .nav-sub-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-2px);
}

.nav-links .nav-sub-toggle:hover {
  color: var(--forest);
}

/* Underline-Effekt wie bei den anderen Links */
.nav-links .nav-sub-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--forest);
  transition: right .35s ease;
}

.nav-links .has-sub:hover .nav-sub-toggle::before,
.nav-links .nav-sub-toggle[aria-expanded="true"]::before {
  right: 0;
}

/* Submenu Panel */
.nav-links .nav-sub {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--forest);
  list-style: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(31, 42, 42, .10);
}

.nav-links .has-sub:hover .nav-sub,
.nav-links .has-sub.open .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

.nav-links .nav-sub li {
  list-style: none;
}

.nav-links .nav-sub a {
  display: block;
  padding: 10px;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}

.nav-links .nav-sub a:hover {
  background: var(--paper-2);
  color: var(--forest);
}

.nav-links .nav-sub a::after {
  display: none;
}

/* keinen Underline-Effekt im Submenu */
/* Mobil: kein Floating, sondern aufklappende Liste innerhalb der mobilen Nav */
@media (max-width: 960px) {
  .nav-links .nav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 8px 0 0 16px;
    display: none;
  }

  .nav-links .has-sub.open .nav-sub {
    display: block;
  }

  .nav-links .nav-sub a {
    font-family: var(--serif);
    font-size: 16px;
    padding: 8px 0;
    color: var(--ink-soft);
  }

  .nav-links .nav-sub-toggle {
    font-size: inherit;
  }
}

#map {
  width: 100%;
  height: 400px;
}

.npg {
  width: 400px;
  height: auto;
  overflow: hidden;
  position: fixed;
  cursor: pointer;
  bottom: -20px;
  right: -160px;
  background-color: var(--sand);
  text-align: center;
  color: white;
  font-size: 1.3rem;
  line-height: 1.4rem;
  padding: 15px 0;
  cursor: pointer;
  transform: rotate(-45deg);
  z-index: 5000;
  padding-bottom: 70px;
  transition-duration: 0.5s;
}

#dsgvo h1 {
  margin-bottom: 2rem;
  color: var(--sand);
}

#dsgvo h2 {
  font-size: 2rem;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

#dsgvo h3 {
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.kontakt h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: var(--sand);
}

/* ============================================================
   Immobilientalk-Seite
   ============================================================ */
.talk-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sand-deep);
  margin-bottom: 14px;
}

.talk-h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  color: var(--ink);
}

.talk-h2 em {
  font-style: italic;
  color: var(--forest);
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.talk-lead {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.4;
  color: var(--ink-soft);
  margin-bottom: 1.5em;
}

.talk-lead em {
  font-style: italic;
  color: var(--forest);
}

/* Voting-Block ---------------------------------------------- */
.talk-vote-card {
  background: var(--forest-deep);
  color: var(--paper);
  padding: clamp(28px, 3.5vw, 48px);
  margin: clamp(30px, 4vw, 50px) 0;
  position: relative;
  overflow: hidden;
}

.talk-vote-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 88% 12%, rgba(184, 160, 120, .16), transparent 45%),
  radial-gradient(circle at 12% 92%, rgba(184, 160, 120, .08), transparent 50%);
}

.talk-vote-card > * {
  position: relative;
  z-index: 1;
}

.tv-head {
  margin-bottom: 28px;
}

.tv-label {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sand);
  margin-bottom: 12px;
  padding: 5px 11px;
  border: 1px dashed rgba(184, 160, 120, .5);
}

.tv-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--paper);
}

.tv-title em {
  font-style: italic;
  color: var(--sand);
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.tv-sub {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(250, 247, 240, .82);
  margin: 0;
  max-width: 56ch;
}

/* Vote-Grid ------------------------------------------------- */
.vote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 30px;
}

@media (max-width: 700px) {
  .vote-grid {
    grid-template-columns: 1fr;
  }
}

.vote-card {
  /* button reset */
  text-align: left;
  font: inherit;
  color: inherit;
  border: 1px solid rgba(250, 247, 240, .18);
  background: rgba(250, 247, 240, .04);
  padding: 22px 22px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  transition: all .35s ease;
}

.vote-card:hover {
  background: rgba(184, 160, 120, .1);
  border-color: var(--sand);
}

.vote-card.voted {
  background: rgba(184, 160, 120, .16);
  border-color: var(--sand);
}

.vote-card .vc-no {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  color: var(--sand);
  margin-bottom: 14px;
  letter-spacing: -.02em;
  display: block;
}

.vote-card .vc-ti {
  display: block;
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin-bottom: 8px;
}

.vote-card .vc-ti em {
  font-style: italic;
  color: var(--sand);
}

.vote-card .vc-desc {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(250, 247, 240, .75);
  line-height: 1.5;
  margin-bottom: 16px;
}

.vote-card .vc-bar {
  display: block;
  position: relative;
  height: 2px;
  background: rgba(250, 247, 240, .14);
  margin-top: auto;
}

.vote-card .vc-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--sand);
  width: 0;
  transition: width 1.2s cubic-bezier(.2, .6, .2, 1);
}

.vote-card .vc-pct {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(250, 247, 240, .5);
  opacity: 0;
  transition: opacity .4s ease;
}

.vote-card .vc-pct strong {
  color: var(--sand);
  font-weight: 600;
}

.vote-grid.revealed .vc-pct {
  opacity: 1;
}

.vote-card .vote-mark {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(250, 247, 240, .3);
  transition: all .3s ease;
}

.vote-card.voted .vote-mark {
  background: var(--sand);
  border-color: var(--sand);
}

.vote-card.voted .vote-mark::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--forest-deep);
  font-size: 11px;
  font-weight: 700;
}

/* ============================================================
   GENERISCHE UNTERSEITEN-KOMPONENTEN
   ============================================================ */
/* Page-Header (Eyebrow + H2 + Lead) */
.page-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sand-deep);
  margin-bottom: 14px;
}

.page-h2, .page-h3, .page-h4 {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  color: var(--ink);
}

.page-h2 em, .page-h3 em, .page-h4 em {
  font-style: italic;
  color: var(--forest);
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.page-h3 {
  font-size: clamp(24px, 1.5vw, 32px);
  margin-top: 3rem;
}

.page-h4 {
  font-size: clamp(20px, 1vw, 30px);
  margin-top: 3rem;
  color: var(--sand);
}

.page-lead {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 1.5em;
}

.page-lead em {
  font-style: italic;
  color: var(--forest);
}

/* Page-Pullquote (Schlussakzent in Sand-Pale) */
.page-pullquote {
  background: var(--sand-pale);
  padding: clamp(24px, 3vw, 36px);
  margin: clamp(28px, 4vw, 44px) 0;
  border-left: 3px solid var(--forest);
}

.page-pullquote p {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 300;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}

.page-pullquote p em {
  font-style: italic;
  color: var(--forest);
  font-variation-settings: "SOFT" 60, "opsz" 144;
}

.page-pullquote-by {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sand-deep);
}

/* Page-Figure (Bild mit Bildunterschrift) */
.page-figure {
  margin: clamp(28px, 4vw, 44px) 0;
}

.page-figure img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(.88);
  border: 1px solid var(--line, var(--forest));
}

.page-figure figcaption {
  margin-top: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  text-align: center;
}

/* ============================================================
   THEME-Block: dunkler Akzent-Container (Voting-Karte etc.)
   ============================================================ */
.theme-card {
  background: var(--forest-deep);
  color: var(--paper);
  padding: clamp(26px, 3vw, 42px);
  margin: clamp(28px, 4vw, 44px) 0;
  position: relative;
  overflow: hidden;
}

.theme-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 88% 12%, rgba(184, 160, 120, .16), transparent 45%),
  radial-gradient(circle at 12% 92%, rgba(184, 160, 120, .08), transparent 50%);
}

.theme-card > * {
  position: relative;
  z-index: 1;
}

.theme-head {
  margin-bottom: 26px;
}

.theme-label {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sand);
  margin-bottom: 12px;
  padding: 5px 11px;
  border: 1px dashed rgba(184, 160, 120, .5);
}

.theme-title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 12px;
  color: var(--paper);
}

.theme-title em {
  font-style: italic;
  color: var(--sand);
  font-variation-settings: "SOFT" 80, "opsz" 144;
}

.theme-sub {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(250, 247, 240, .82);
  margin: 0;
  max-width: 56ch;
}

/* ============================================================
   THEME-Grid: Grundlayout f�r Karten/Tags
   ============================================================ */
.theme-grid {
  display: grid;
  gap: 14px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.theme-grid-vote {
  grid-template-columns: repeat(2, 1fr);
}

.theme-grid-2col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
  .theme-grid-vote, .theme-grid-2col {
    grid-template-columns: 1fr;
  }
}

/* Tags (f�r �Kein Notfall"-Liste) */
.theme-grid-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.theme-grid-tags li {
  background: rgba(250, 247, 240, .6);
  border: 1px solid var(--sand);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}

/* ============================================================
   THEME-Item: Karte (Voting & Info-Variante)
   ============================================================ */
.theme-item {
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all .35s ease;
}

/* Voting-Variante: dunkel, klickbar */
.theme-item-vote {
  border: 1px solid rgba(250, 247, 240, .18);
  background: rgba(250, 247, 240, .04);
  color: var(--paper);
  cursor: pointer;
  min-height: 180px;
}

.theme-item-vote:hover {
  background: rgba(184, 160, 120, .1);
  border-color: var(--sand);
}

.theme-item-vote.voted {
  background: rgba(184, 160, 120, .16);
  border-color: var(--sand);
}

.theme-item-vote .ti-no {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  color: var(--sand);
  margin-bottom: 14px;
  letter-spacing: -.02em;
}

.theme-item-vote .ti-ti {
  display: block;
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.theme-item-vote .ti-ti em {
  font-style: italic;
  color: var(--sand);
}

.theme-item-vote .ti-bar {
  display: block;
  position: relative;
  height: 2px;
  background: rgba(250, 247, 240, .14);
  margin-top: auto;
}

.theme-item-vote .ti-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--sand);
  width: 0;
  transition: width 1.2s cubic-bezier(.2, .6, .2, 1);
}

.theme-item-vote .ti-pct {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(250, 247, 240, .5);
  opacity: 0;
  transition: opacity .4s ease;
}

.theme-item-vote .ti-pct strong {
  color: var(--sand);
  font-weight: 600;
}

.theme-grid-vote.revealed .ti-pct {
  opacity: 1;
}

.theme-item-vote .ti-mark {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(250, 247, 240, .3);
  transition: all .3s ease;
}

.theme-item-vote.voted .ti-mark {
  background: var(--sand);
  border-color: var(--sand);
}

.theme-item-vote.voted .ti-mark::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--forest-deep);
  font-size: 11px;
  font-weight: 700;
}

/* Info-Variante: hell, nicht klickbar (f�r Notfall-Themen) */
.theme-item-info {
  background: var(--paper);
  border: 1px solid var(--line, var(--sand));
  border-left: 3px solid var(--forest);
  padding: 24px 26px;
}

.theme-item-info.theme-item-wide {
  grid-column: 1 / -1;
}

.theme-item-info .ti-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--paper-2);
  color: var(--forest);
  border-radius: 50%;
  font-size: 18px;
  margin-bottom: 16px;
}

.theme-item-info .ti-ti {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--ink);
}

.theme-item-info .ti-ti em {
  font-style: italic;
  color: var(--forest);
}

.theme-item-info .ti-hint {
  background: var(--paper-2);
  padding: 12px 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 14px;
  border-left: 2px solid var(--sand);
}

.theme-item-info .ti-hint em {
  color: var(--forest);
  font-style: italic;
}

.theme-item-info .ti-hint-warn {
  border-left-color: #C8694A;
}

.theme-item-info .ti-hint-warn strong {
  color: #C8694A;
}

.theme-item-info .ti-sublabel {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sand-deep);
  margin: 14px 0 8px;
}

.theme-item-info .ti-steps {
  list-style: none;
  counter-reset: steps;
  padding: 0;
  margin: 0 0 14px;
}

.theme-item-info .ti-steps li {
  counter-increment: steps;
  position: relative;
  padding: 6px 0 6px 30px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.theme-item-info .ti-steps li::before {
  content: counter(steps) ".";
  position: absolute;
  left: 0;
  top: 6px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--sand-deep);
  font-weight: 400;
  font-size: 16px;
}

.theme-item-info .ti-steps li em {
  color: var(--forest);
  font-style: italic;
  font-weight: 500;
}

.theme-item-info .ti-steps li strong {
  color: var(--ink);
  font-weight: 600;
}

.theme-item-info .ti-contact {
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--forest);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.theme-item-info .ti-contact span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sand);
}

.theme-item-info .ti-contact strong {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* ============================================================
   THEME-Suggest: Eigener Vorschlag (im Theme-Card-Block)
   ============================================================ */
.theme-suggest {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(250, 247, 240, .15);
}

.theme-suggest label {
  display: block;
  margin-bottom: 12px;
  cursor: text;
}

.theme-suggest label strong {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sand);
  margin-bottom: 6px;
}

.theme-suggest label span {
  font-family: var(--serif);
  font-size: 16px;
  color: rgba(250, 247, 240, .82);
  line-height: 1.4;
}

.theme-suggest-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.theme-suggest input {
  flex: 1;
  min-width: 220px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(250, 247, 240, .3);
  padding: 10px 0 12px;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 17px;
  border-radius: 0;
  transition: border-color .25s ease;
}

.theme-suggest input:focus {
  outline: 0;
  border-color: var(--sand);
}

.theme-suggest input::placeholder {
  color: rgba(250, 247, 240, .35);
  font-style: italic;
}

.theme-suggest button {
  background: var(--sand);
  color: var(--forest-deep);
  border: 0;
  padding: 12px 22px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
  white-space: nowrap;
}

.theme-suggest button:hover {
  background: var(--paper);
  transform: translateY(-1px);
}

.theme-suggest-thanks {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--sand);
  display: none;
}

.theme-suggest-thanks.show {
  display: block;
}

/* ============================================================
   ALERT-Card: Hinweis-Block (Info / Warn)
   ============================================================ */
.alert-card {
  padding: 22px 26px;
  margin: 0 0 20px;
  border-left: 3px solid currentColor;
}

.alert-info {
  background: var(--paper-2);
  color: var(--forest);
}

.alert-warn {
  background: #FFF3E8;
  color: #C8694A;
}

.alert-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.alert-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, .6);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.alert-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.alert-title {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

.alert-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* In .alert-card folgendes theme-grid bekommt etwas Abstand oben */
.alert-card .theme-grid {
  margin-top: 16px;
}

/* ============================================================
   Themen-Pills (z.B. Immobilientalk)
   ============================================================ */
.topics {
  list-style: none;
  padding: 0;
  margin: 20px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topics li {
  background: var(--paper-2);
  border: 1px solid var(--sand);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  font-family: var(--sans);
}

.topics li em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--forest);
}




ul.check {
  margin-left: 0;
}

ul.check li {
  list-style: none;
  padding: 0 0 10px 25px;
}

ul.check li:before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Pro';
  color: var(--sand-deep);
  font-weight: 900;
  display: inline-block;
  width: 1.5em;
  margin-left: -1.5em;
}




/* ============================================================
   Card-Optik (�berschreibt Bootstrap-Defaults)
   ============================================================ */
.card{
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: 0;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
}

.card-header{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--sand);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--forest);
}
.card-header .card-id{ color: var(--sand-deep); }

/* Bild */
.card-img-wrap{
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--paper-3);
  position: relative;
}
.card-img-top{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92);
  transition: transform 1s ease;
  border-radius: 0;
}
.card:hover .card-img-top{ transform: scale(1.04); }

/* Body */
.card-body{ padding: 16px 18px 20px; }

.card-loc{
  display: block;
  font-family: var(--sans); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
  color: var(--sand-deep);
  margin-bottom: 6px;
}
.card-title{
  font-family: var(--serif);
  font-size: 17px; font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px;
}
.card-title em{ font-style: italic; color: var(--forest); }

.card-price{
  display: block;
  font-family: var(--serif);
  font-size: 22px; font-weight: 400;
  letter-spacing: -.01em;
  color: var(--forest);
  margin-bottom: 14px;
}

.card-specs{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px;
}
.card-specs span{
  background: var(--paper-2);
  padding: 5px 10px;
  font-family: var(--sans); font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 5px;
}
.card-specs span i{ color: var(--sand-deep); font-size: 10px; }

.card-cta{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  color: var(--forest);
  border-bottom: 1px solid var(--forest);
  padding-bottom: 4px;
  transition: gap .25s ease;
  text-decoration: none;
}
.card-cta:hover{ gap: 12px; color: var(--forest); }

/* Kontakt-Variante: kein Padding im Body, da eigene Reihen */
.card-contact .card-body{ padding: 0; }

.card-firm{
  padding: 14px 18px 16px;
  border-bottom: 1px solid var(--paper-2);
}
.card-firm strong{
  display: block;
  font-family: var(--serif);
  font-size: 18px; font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.card-firm span{
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
}

.card-ci{
  display: flex; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--paper-2);
  align-items: center;
}
.card-ci:last-child{ border-bottom: 0; }
.card-ci .ic{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--forest);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.card-ci .body{
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}
.card-ci .body small{
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand-deep);
  margin-bottom: 2px;
}