/* =========================================================================
   Immobilienstudio Blasig – Komponenten
   ========================================================================= */

/* =========================================================================
   Header & Navigation
   ========================================================================= */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250, 249, 247, .88);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.header.is-stuck {
  border-bottom-color: var(--stone-100);
  background: rgba(250, 249, 247, .96);
}

.header__inner {
  display: flex; align-items: center; gap: 1rem;
  height: var(--header-h);
}

.brand {
  display: flex; align-items: center; gap: .7rem;
  flex: 0 0 auto;                 /* darf nie gequetscht werden */
  margin-right: auto;
}
.brand__mark { width: 34px; height: 34px; flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: 'Outfit', sans-serif;
  font-size: .8rem; font-weight: 400;
  letter-spacing: .02em; color: var(--ink-soft);
}
.brand__strong {
  font-family: 'Outfit', sans-serif;
  font-size: 1.06rem; font-weight: 700;
  letter-spacing: .06em; color: var(--ink);
}

.nav { display: none; }

@media (min-width: 1100px) {
  .nav { display: flex; align-items: center; gap: .15rem; }
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .78rem;
  border-radius: var(--r-md);
  font-size: .93rem; font-weight: 500;
  color: var(--ink-soft);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.nav__link[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav__link .ico { width: .95em; height: .95em; transition: transform var(--t-fast); }
.nav__item:hover .nav__link .ico { transform: rotate(180deg); }

/* Dropdown – oeffnet auf Hover und Fokus, kein JS noetig */
.nav__panel {
  position: absolute; top: 100%; left: 0;
  min-width: 268px;
  padding: .5rem;
  background: var(--surface);
  border: 1px solid var(--stone-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel {
  opacity: 1; visibility: visible; transform: none;
}
.nav__panel a {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  font-size: .9rem; color: var(--ink-soft);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__panel a:hover { background: var(--accent-soft); color: var(--accent); }
.nav__panel strong { display: block; font-weight: 600; color: var(--ink); }
.nav__panel span { font-size: .8rem; color: var(--ink-muted); }
.nav__panel a:hover strong { color: var(--accent); }

.header__cta { display: none; flex: 0 0 auto; }
@media (min-width: 1100px) { .header__cta { display: inline-flex; margin-left: .6rem; } }

.header__phone {
  display: none;
  align-items: center; gap: .4rem;
  font-size: .93rem; font-weight: 600; color: var(--ink);
}
@media (min-width: 700px) { .header__phone { display: inline-flex; } }
@media (min-width: 1100px) { .header__phone { margin-left: .4rem; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;                 /* nie schrumpfen (§1) */
  width: 46px; height: 46px;
  margin-right: -.35rem;
  border-radius: var(--r-md);
  color: var(--ink);
}
.burger:hover { background: rgba(255,255,255,.7); }
@media (min-width: 1100px) { .burger { display: none; } }
.burger .ico { width: 26px; height: 26px; }

/* Mobiles Menue */
.mobilenav {
  position: fixed; inset: var(--header-h) 0 0;
  z-index: 89;
  background: var(--bone);
  padding: 1.25rem var(--gutter) 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-base), visibility var(--t-base);
}
.mobilenav.is-open { transform: none; visibility: visible; }
@media (min-width: 1100px) { .mobilenav { display: none; } }

.mobilenav a {
  display: block;
  padding: .85rem 0;
  font-size: 1.1rem; font-weight: 500;
  border-bottom: 1px solid var(--stone-100);
}
.mobilenav details > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 0;
  font-size: 1.1rem; font-weight: 500;
  border-bottom: 1px solid var(--stone-100);
  cursor: pointer; list-style: none;
}
.mobilenav details > summary::-webkit-details-marker { display: none; }
.mobilenav details > summary::marker { content: ''; }
.mobilenav details[open] > summary .ico { transform: rotate(180deg); }
.mobilenav details > summary .ico { transition: transform var(--t-fast); }
.mobilenav details a {
  padding-left: 1rem;
  font-size: 1rem; font-weight: 400; color: var(--ink-soft);
}
.mobilenav__foot { margin-top: 2rem; display: grid; gap: .75rem; }

/* =========================================================================
   Hero – asymmetrisch, Text links, Bild rechts mit weichem Verlauf
   ========================================================================= */
.hero { position: relative; overflow: hidden; background: var(--bone); }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 6rem);
  align-items: center;
}
/* Der Slider ist intern 8 Bildbreiten lang. Ohne min-width:0 wuerde das
   Grid-Kind auf diese Innenbreite wachsen und die Seite sprengen. */
.hero__grid > * { min-width: 0; }
@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
    align-items: stretch;              /* Galerie zieht auf Texthoehe */
  }
}

/* Auf schmalen Viewports steht die Galerie vorn – dort traegt das Bild
   mehr als der Vorspann. Die Reihenfolge im Markup bleibt unveraendert,
   damit die Ueberschrift fuer Screenreader und Suchmaschinen zuerst kommt. */
@media (max-width: 999px) {
  .hero__grid > :first-child { order: 2; }
  .hero__media { order: 1; }
}

.hero__title { margin-bottom: 1.1rem; }
.hero__title em {
  font-style: italic;
  color: var(--accent);
}
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 1.9rem;
}

.hero__media { position: relative; }

/* Ab Desktop ist die Galerie genau so hoch wie die Textspalte daneben.
   Der Slider wird dafuer absolut in die gestreckte Grid-Zelle gelegt: so
   gibt allein der Text die Zeilenhoehe vor. Waere der Slider im Fluss,
   wuerde er ueber sein Seitenverhaeltnis selbst zur Hoehe beitragen und
   die Bindung waere zirkulaer. Das min-height greift nur, falls der Text
   einmal kuerzer ausfaellt als hier. */
@media (min-width: 1000px) {
  .hero__media { min-height: 480px; }
  .hero__media .hero__slider {
    position: absolute; inset: 0;
    aspect-ratio: auto;
  }
}

/* --- Hero-Slider --------------------------------------------------------
   Waagerechter Scroll-Container mit Rasterung. Dadurch laesst sich nativ
   wischen - mit Schwung, Gummiband und korrektem Verhalten auf allen
   Geraeten - ohne eigene Drag-Logik. Das automatische Weiterschalten ist
   nur ein scrollTo auf demselben Container.                             */
.hero__slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  aspect-ratio: 4 / 3;                 /* Hoehe unabhaengig von geladenen Bildern */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  border-radius: var(--r-xl);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.hero__slider::-webkit-scrollbar { display: none; }
.hero__slider:active { cursor: grabbing; }

.hero__slide {
  width: 100%; height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  user-select: none;
  -webkit-user-drag: none;
}

/* Ortsangabe zum aktuellen Bild */
.hero__ort {
  position: absolute; left: 1rem; bottom: 1rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: rgba(22, 24, 28, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: .8rem; font-weight: 500;
  transition: opacity var(--t-base);
}
.hero__ort .ico { width: 1em; height: 1em; }

/* Punkte zum direkten Anspringen */
.hero__dots {
  position: absolute; right: 1rem; bottom: 1rem;
  z-index: 2;
  display: flex; gap: .3rem;
  padding: .45rem .6rem;
  border-radius: 999px;
  background: rgba(22, 24, 28, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__dot {
  width: 30px; height: 30px;              /* Touch-Ziel, Punkt ist kleiner */
  display: grid; place-items: center;
  border-radius: 50%;
}
.hero__dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background var(--t-fast), transform var(--t-fast);
}
.hero__dot:hover::before { background: rgba(255, 255, 255, .8); }
.hero__dot[aria-current="true"]::before { background: #fff; transform: scale(1.35); }

/* Schmal wird es eng: Ortsangabe nach oben, Punkte mittig nach unten,
   sonst laufen die beiden ineinander. */
@media (max-width: 620px) {
  .hero__dot { width: 26px; height: 26px; }
  .hero__ort {
    font-size: .74rem;
    left: .7rem; top: .7rem; bottom: auto;
    max-width: calc(100% - 1.4rem);
  }
  .hero__ort span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero__dots {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: .7rem;
  }
}
@media (min-width: 1000px) {
  /* Linke Kante laeuft weich in den Seitenhintergrund aus, damit das Bild
     nicht wie ein aufgeklebtes Rechteck neben dem Text steht.
     pointer-events: none, damit der Verlauf das Wischen nicht abfaengt. */
  .hero__media::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: var(--r-xl);
    background: linear-gradient(90deg, var(--bone) 0%, rgba(250,249,247,0) 22%);
    pointer-events: none;
    z-index: 1;
  }
}

/* Vertrauensleiste */
.trustbar {
  display: flex; flex-wrap: wrap;
  gap: .6rem 1.6rem;
  padding-top: 1.9rem;
  margin-top: 1.9rem;
  border-top: 1px solid var(--stone-100);
}
.trustbar__item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; color: var(--ink-soft);
}
.trustbar__item .ico { color: var(--accent); }
.trustbar__item strong { color: var(--ink); font-weight: 600; }

/* =========================================================================
   Zwei-Wege-Block (Zig-Zag statt drei gleicher Karten)
   ========================================================================= */
.paths { display: grid; gap: clamp(1.25rem, .5rem + 2.5vw, 2rem); }
@media (min-width: 860px) { .paths { grid-template-columns: 1fr 1fr; } }

.path {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--stone-100);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.path:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
/* Kein Zickzack-Versatz: der Versatz haette die zweite Karte im
   gestreckten Raster um genau seine Hoehe kuerzer gemacht. Beide Karten
   sind jetzt gleich gross und stehen auf einer Linie. */

/* Bild oben, Icon sitzt auf der Unterkante und verbindet beide Zonen */
.path__media { position: relative; background: var(--bone-deep); }
.path__media img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform var(--t-slow);
}
.path:hover .path__media img { transform: scale(1.04); }
.path__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,24,28,0) 55%, rgba(22,24,28,.35) 100%);
}

.path__icon {
  position: absolute; left: clamp(1.5rem, 1rem + 2vw, 2.5rem); bottom: -26px;
  z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--stone-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.path__icon .ico { width: 26px; height: 26px; }

.path__body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-top: calc(clamp(1.5rem, 1rem + 2vw, 2.5rem) + 1.25rem);
}
.path h3 { margin-bottom: .6rem; }
.path ul { margin: 1.25rem 0 0; display: grid; gap: .55rem; }
.path ul li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .93rem; color: var(--ink-soft);
}
.path ul li .ico { color: var(--accent); margin-top: .18em; }
/* Der Link sitzt immer am Kartenfuss (margin-top: auto). Damit der Rest-
   raum darueber nicht als zufaellige Luecke wirkt, bekommt er eine feine
   Trennlinie ueber die volle Koerperbreite – in beiden Karten auf
   derselben Hoehe, weil die Karten gleich hoch sind. */
.path .arrow-link {
  margin-top: auto;
  align-self: stretch;
  justify-content: flex-start;
  padding-top: 1.4rem;
  margin-bottom: 0;
  border-top: 1px solid var(--stone-100);
}

/* =========================================================================
   Leistungen – Bento, Labels unter den Kacheln
   ========================================================================= */
.bento { display: grid; gap: 1rem; }
@media (min-width: 760px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento__item:nth-child(1) { grid-column: span 3; }
  .bento__item:nth-child(2) { grid-column: span 3; }
  .bento__item:nth-child(3) { grid-column: span 2; }
  .bento__item:nth-child(4) { grid-column: span 2; }
  .bento__item:nth-child(5) { grid-column: span 2; }
}

.bento__item { display: flex; flex-direction: column; }
.bento__tile {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 190px;
  padding: 1.35rem;
  background: var(--accent-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--t-base);
}
.bento__item:hover .bento__tile { transform: translateY(-3px); }
.bento__tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bento__tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,24,28,0) 35%, rgba(22,24,28,.68) 100%);
}
.bento__tile .ico {
  position: relative; z-index: 1;
  width: 30px; height: 30px; color: #fff;
}
.bento__label { padding: 1rem .25rem 0; }
.bento__label h3 { margin-bottom: .3rem; }
.bento__label p { font-size: .9rem; color: var(--ink-muted); }

/* =========================================================================
   Kennzahlen-Band
   ========================================================================= */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 860px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) 1.15rem;
  background: var(--ink);
}
.fact__value {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.fact__label {
  margin-top: .5rem;
  font-size: .84rem; line-height: 1.4; color: #a8adb6;
}

/* =========================================================================
   Objektkarte
   ========================================================================= */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--stone-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.card:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card__media { position: relative; background: var(--bone-deep); }
.card__media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform var(--t-slow);
}
.card:hover .card__media img { transform: scale(1.035); }

.card__badges {
  position: absolute; top: .7rem; left: .7rem;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.94);
  color: var(--ink-soft);
  backdrop-filter: blur(4px);
}
.badge--neu { background: var(--status-neu-bg); color: var(--status-neu); }
.badge--reserviert { background: var(--status-res-bg); color: var(--status-res); }
.badge--weg { background: var(--status-weg-bg); color: var(--status-weg); }
.badge--energie {
  background: var(--surface);
  border: 1px solid var(--stone-200);
  text-transform: none; letter-spacing: 0;
}

.card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.15rem 1.2rem 1.3rem;
}
.card__place {
  display: flex; align-items: center; gap: .38rem;
  font-size: .82rem; color: var(--ink-muted);
  margin-bottom: .5rem;
}
.card__place .ico { color: var(--accent); }
.card__title {
  font-size: 1.05rem; font-weight: 600; line-height: 1.32;
  letter-spacing: -.01em;
  margin-bottom: .85rem;
  /* Titel auf zwei Zeilen begrenzen, damit die Karten gleich hoch bleiben */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__price {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.65rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: .2rem;
}
.card__price-label { font-size: .78rem; color: var(--ink-muted); }

.card__kpis {
  display: flex; flex-wrap: wrap; gap: .35rem .95rem;
  margin: 1rem 0 0;
  padding-top: .95rem;
  border-top: 1px solid var(--stone-100);
}
.card__kpi {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .875rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.card__kpi .ico { color: var(--accent); }

.card__chips { margin-top: .9rem; }

/* Ganze Karte klickbar, Titel bleibt der zugaengliche Link */
.card__link::after { content: ''; position: absolute; inset: 0; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .28rem .62rem;
  background: var(--bone-deep);
  border-radius: 999px;
  font-size: .78rem; color: var(--ink-soft);
}
.chip .ico { width: 1em; height: 1em; color: var(--stone-500); }

/* =========================================================================
   Listing-Bibliothek
   ========================================================================= */
.library__bar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(250, 249, 247, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stone-100);
  padding-block: .85rem;
}

.library__row {
  display: flex; align-items: center; gap: .75rem;
  flex-wrap: wrap;
}

/* Segmented Control: aktives Segment = span, inaktives = Link */
.toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--bone-deep);
  border: 1px solid var(--stone-100);
  border-radius: 999px;
  flex: 0 0 auto;
}
.toggle > * {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  font-size: .9rem; font-weight: 600;
  color: var(--ink-muted);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.toggle > a:hover,
.toggle > button:hover { color: var(--ink); }
/* Auf den Bibliotheksseiten markiert aria-current die aktive Seite,
   auf der Startseite aria-pressed den aktiven Umschalter. */
.toggle > [aria-current="page"],
.toggle > [aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* Filterzeile: unterhalb 900px uebernimmt das Bottom-Sheet, sonst staenden
   dieselben Filter doppelt auf dem Schirm. */
.filters { display: none; }
@media (min-width: 900px) {
  .filters {
    display: flex; gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters > * { flex: 0 0 auto; }
}

.filter-select {
  min-height: 40px;
  padding: .45rem 2.2rem .45rem .85rem;
  font-size: .875rem;
  background-color: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: 999px;
  color: var(--ink-soft);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f77' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1.05em;
  cursor: pointer;
}
.filter-select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.filter-select.is-active { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.library__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  padding-block: 1.35rem;
}
.library__count { font-size: .9rem; color: var(--ink-muted); }
.library__count strong { color: var(--ink); font-weight: 600; }

.viewtoggle {
  display: inline-flex; gap: 2px;
  padding: 3px;
  background: var(--bone-deep);
  border: 1px solid var(--stone-100);
  border-radius: 999px;
}
.viewtoggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px;
  border-radius: 999px;
  color: var(--ink-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.viewtoggle button[aria-pressed="true"] {
  background: var(--surface); color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* Ergebnisraster */
.results { display: grid; gap: 1.25rem; }
.results > * { min-width: 0; }
@media (min-width: 700px)  { .results { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .results { grid-template-columns: repeat(3, 1fr); } }

/* Listenansicht: Bild links, Daten rechts ueber die volle Breite */
.results[data-view="liste"] { grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 780px) {
  .results[data-view="liste"] .card { flex-direction: row; }
  .results[data-view="liste"] .card__media { flex: 0 0 34%; max-width: 340px; }
  .results[data-view="liste"] .card__media img { height: 100%; aspect-ratio: auto; min-height: 230px; }
  .results[data-view="liste"] .card__body { padding: 1.4rem 1.6rem; }
  .results[data-view="liste"] .card__title { -webkit-line-clamp: 1; font-size: 1.15rem; }
  .results[data-view="liste"] .card__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
  }
  .results[data-view="liste"] .card__kpi { flex-direction: column; align-items: flex-start; gap: .1rem; }
}

/* Skeleton */
.skeleton { pointer-events: none; }
.skeleton__media { aspect-ratio: 3 / 2; }
.skeleton__line { height: 12px; border-radius: 4px; margin-bottom: .6rem; }
.skeleton__media, .skeleton__line {
  background: linear-gradient(100deg, var(--bone-deep) 30%, #fff 50%, var(--bone-deep) 70%);
  background-size: 260% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { background-position: -160% 0; } }

/* Leer- und Fehlerzustand */
.state {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--stone-200);
  border-radius: var(--r-xl);
}
.state__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin-bottom: 1.1rem;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 50%;
}
.state__icon .ico { width: 28px; height: 28px; }
.state h3 { margin-bottom: .5rem; }
.state p { max-width: 46ch; color: var(--ink-muted); font-size: .95rem; }
.state__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.5rem; }

/* Mobiles Filter-Bottom-Sheet */
.sheet-trigger { display: inline-flex; position: relative; }
.sheet-trigger__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 19px; height: 19px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  border-radius: 999px;
  font-size: .68rem; font-weight: 700;
}
@media (min-width: 900px) { .sheet-trigger { display: none; } }

.sheet {
  position: fixed; inset: 0; z-index: 120;
  display: none;
}
.sheet.is-open { display: block; }
.sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(22, 24, 28, .45);
  animation: fade .25s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 86vh; overflow-y: auto;
  padding: 1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
  background: var(--bone);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  animation: sheet-up .32s var(--ease);
}
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.sheet__fields { display: grid; gap: 1rem; }
.sheet__foot {
  display: flex; gap: .7rem;
  margin-top: 1.5rem;
  position: sticky; bottom: 0;
  padding-top: 1rem;
  background: linear-gradient(180deg, rgba(250,249,247,0), var(--bone) 30%);
}
.sheet__foot .btn { flex: 1; }

/* =========================================================================
   Spec-Grid – das Datenblatt
   ========================================================================= */
.specs { display: grid; gap: 0; }

.specs__group + .specs__group { margin-top: 1.1rem; }

.specs__legend {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .25rem;
}

/* Datenblatt: Der Abstand steckt in den Zellen, nicht im Grid-Gap.
   Dadurch bilden die Zellenlinien durchgehende Zeilen und das Auge
   kann ueber die volle Breite lesen, ohne dass Karten noetig waeren. */
.specs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}
@media (min-width: 768px)  { .specs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.75rem; } }
@media (min-width: 1024px) { .specs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; } }

.spec {
  min-width: 0;
  padding-block: .5rem;
  border-top: 1px solid var(--stone-100);
}
.spec--wide { grid-column: span 2; }

.spec__label {
  display: block;
  font-size: .74rem; line-height: 1.25;
  color: var(--ink-muted);
  margin-bottom: .04rem;
  hyphens: auto; -webkit-hyphens: auto;
}
.spec__value {
  display: block;
  font-size: 1rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  /* Lange Komposita wie "Energiebedarfsausweis" werden in schmalen Zellen
     an der Silbe getrennt statt hart mitten im Wort umgebrochen. */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Einheit tritt hinter die Zahl zurueck, damit der Wert zuerst gelesen wird */
.spec__unit {
  font-size: .74em;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0;
  margin-left: .18em;
  hyphens: none;
}

/* Auf dem Desktop duerfen die Zahlen deutlich groesser werden - dort ist
   genug Platz, und die Eckdaten sind das, was zuerst gescannt wird. */
/* Ab Tablet wandert der Gruppentitel in eine eigene linke Spalte. Das spart
   pro Gruppe eine ganze Zeile und die Kategorie steht direkt neben ihren
   Werten statt darueber. Die Trennlinie laeuft dann ueber die volle Breite. */
@media (min-width: 768px) {
  .specs__group {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: 1.75rem;
    align-items: start;
  }
  .specs__group + .specs__group { margin-top: 0; }
  .specs__legend {
    margin: 0;
    padding-top: .62rem;
    border-top: 1px solid var(--stone-100);
  }
}
@media (min-width: 1024px) {
  .specs__group { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 2rem; }
  .specs__legend { padding-top: .55rem; }
}

@media (min-width: 1024px) {
  .spec { padding-block: .48rem; }
  .spec__value { font-size: 1.4rem; line-height: 1.12; letter-spacing: -.02em; }
  /* Fliesstext-Werte wie "Duschbad, Badewanne, Bad mit Fenster" bleiben
     lesbar statt als Schlagzeile aufzutreten. */
  .spec--wide .spec__value,
  .spec--text .spec__value { font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; }
}

/* Checkliste – fuer Aufzaehlungen auf den Inhaltsseiten. Bewusst eine
   eigene Komponente: das Spec-Grid ist ein Datenblatt, keine Liste. */
.checklist { display: grid; gap: .75rem 2rem; }
@media (min-width: 620px)  { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .checklist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.checklist > * {
  display: flex; gap: .65rem; align-items: flex-start;
  min-width: 0;
  font-size: .95rem; line-height: 1.5; color: var(--ink-soft);
}
.checklist .ico { flex: 0 0 auto; color: var(--accent); margin-top: .24em; }
.checklist strong { display: block; font-weight: 500; color: var(--ink); }
.checklist small { display: block; font-size: .8rem; color: var(--ink-muted); }

/* =========================================================================
   Energieeffizienz-Skala (GEG)
   ========================================================================= */
.energy { margin-block: .5rem 1.75rem; }

.energy__scale { position: relative; padding-top: 1.6rem; }

.energy__marker {
  position: absolute; top: 0;
  width: 22px; height: 18px;
  margin-left: -11px;
  color: var(--ink);
}
.energy__marker svg { width: 100%; height: 100%; }

.energy__bar {
  display: flex;
  border-radius: var(--r-sm);
  overflow: hidden;
  /* Genormte Ampelfarben – hier bewusst ausserhalb der Markenpalette */
  background: linear-gradient(90deg, #02973b 0%, #fde63a 45.83%, #fa101a 100%);
}
.energy__seg {
  display: flex; align-items: center; justify-content: center;
  padding: .5rem .1rem;
  font-size: .82rem; font-weight: 600;
  color: #16181c;
  border-right: 1px solid #fff;
  min-width: 0;
}
.energy__seg:last-child { border-right: 0; }
.energy__seg.is-active { text-decoration: underline; text-underline-offset: 3px; }

.energy__axis {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  position: relative;
  margin-top: .4rem;
  font-size: .7rem; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.energy__axis span { text-align: center; transform: translateX(-50%); }
.energy__axis .energy__plus { position: absolute; right: 0; transform: translateX(50%); }

/* Auf schmalen Viewports nur jedes zweite Achsenlabel */
@media (max-width: 560px) {
  .energy__seg { font-size: .68rem; padding-inline: 0; }
  .energy__axis span:nth-child(even) { visibility: hidden; }
  .energy__axis .energy__plus { visibility: visible; }
}

.energy__caption {
  margin-top: .8rem;
  font-size: .84rem; color: var(--ink-muted);
}

.energy__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: var(--bone-deep);
  font-size: .85rem; font-weight: 600;
}
.energy__badge b {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 4px;
  color: #fff; font-size: .78rem;
}
.eff-A, .eff-Aplus { background: #02973b; }
.eff-B { background: #4aa72b; }
.eff-C { background: #8fbb1e; }
.eff-D { background: #d7cf1c; color: #16181c !important; }
.eff-E { background: #f3b81c; color: #16181c !important; }
.eff-F { background: #ef8021; }
.eff-G { background: #e5501f; }
.eff-H { background: #fa101a; }

/* =========================================================================
   Objekt-Detailseite
   ========================================================================= */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding-block: 1.25rem;
  font-size: .82rem; color: var(--ink-muted);
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .ico { width: .9em; height: .9em; color: var(--stone-300); }

/* Der Kopf sitzt im breiten Rahmen, damit er buendig zur Galerie steht -
   der Text selbst bleibt aber auf lesbarer Zeilenlaenge. */
/* Der Titel laeuft ueber die volle Breite – kein Lesebreiten-Limit.
   Die Ortszeile darunter ist ohnehin kurz. */
.detail__head { padding-bottom: 1.5rem; }
.detail__title { margin-bottom: .7rem; }
.detail__place {
  display: flex; align-items: center; gap: .45rem;
  font-size: 1rem; color: var(--ink-soft);
}
.detail__place .ico { color: var(--accent); }

.detail__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: start;
}
/* Ohne min-width:0 waechst ein Grid-Kind auf die intrinsische Breite seines
   Inhalts – die scrollbare Thumbnail-Leiste sprengt sonst den Viewport. */
.detail__layout > * { min-width: 0; }

@media (min-width: 1024px) {
  /* Die Fakten-Karte bekommt eine feste Breite – gerade so viel, dass Preis
     und Kennzahlen zweispaltig passen. Alles Uebrige geht an die Galerie,
     denn sie ist das, was ein Interessent zuerst ansieht. */
  .detail__layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* Fakten-Karte */
.factcard {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--stone-100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
@media (min-width: 1024px) {
  .factcard { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.factcard__price {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.factcard__price-label { font-size: .84rem; color: var(--ink-muted); margin-top: .3rem; }
.factcard__kpis {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.4rem 0;
  padding-block: 1.4rem;
  border-block: 1px solid var(--stone-100);
}
.kpi { display: flex; gap: .6rem; align-items: flex-start; min-width: 0; }
.kpi .ico { color: var(--accent); margin-top: .18em; }
/* Wert und Label stehen untereinander, nicht in einer Zeile */
.kpi__value { display: block; font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.kpi__label { display: block; font-size: .78rem; line-height: 1.35; color: var(--ink-muted); }
.factcard__actions { display: grid; gap: .6rem; }
.factcard__tools {
  display: flex; gap: .4rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--stone-100);
}
.tool {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 40px; padding: .4rem .7rem;
  border-radius: var(--r-md);
  font-size: .84rem; color: var(--ink-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.tool:hover { background: var(--bone-deep); color: var(--ink); }
.tool[aria-pressed="true"] { color: var(--accent); }
.tool[aria-pressed="true"] .ico { fill: var(--accent); }

.agent { display: flex; gap: .85rem; align-items: center; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--stone-100); }
.agent img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.agent__name { font-weight: 600; font-size: .95rem; }
.agent__role { font-size: .8rem; color: var(--ink-muted); }

/* Galerie */
.gallery { position: relative; }
.gallery__tabs { display: flex; gap: .4rem; margin-bottom: .85rem; }
.gallery__tab {
  display: inline-flex; align-items: center;
  min-height: 44px;                 /* Touch-Ziel */
  padding: .42rem 1.05rem;
  border-radius: 999px;
  font-size: .85rem; font-weight: 600;
  color: var(--ink-muted);
  background: var(--bone-deep);
  transition: background var(--t-fast), color var(--t-fast);
}
.gallery__tab[aria-selected="true"] { background: var(--ink); color: #fff; }
/* inline-flex frisst den Wortabstand vor der Klammer */
.gallery__tab .num { margin-left: .3em; opacity: .75; }

.gallery__stage {
  position: relative;
  background: var(--bone-deep);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gallery__stage img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Ueberblendung beim Weiterklicken: Das neue Bild liegt als Ebene ueber dem
   aktuellen und wird eingeblendet. Erst danach uebernimmt das Basisbild die
   Quelle - so gibt es weder Sprung noch kurzes Aufblitzen des Hintergrunds. */
.gallery__fade {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
/* Die Ebene wird per Web Animations API eingeblendet (js/objekt.js), nicht
   per Klasse - eine laufende Blende laesst sich so sauber abbrechen. */

.lightbox img { transition: opacity var(--gallery-fade) var(--ease-blend); }
.lightbox img.is-loading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .lightbox img { transition: none; }
}

.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  transition: background var(--t-fast);
}
.gallery__nav:hover { background: #fff; }
.gallery__nav--prev { left: .7rem; }
.gallery__nav--next { right: .7rem; }

.gallery__caption {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .2rem 0;
  font-size: .85rem; color: var(--ink-muted);
}
.gallery__counter { font-variant-numeric: tabular-nums; flex: 0 0 auto; }

.gallery__thumbs {
  display: flex; gap: .5rem;
  margin-top: .7rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs button {
  flex: 0 0 92px;
  scroll-snap-align: start;
  /* Groessere Vorschau, sobald Platz da ist */
  flex-basis: clamp(92px, 8vw, 132px);
  border-radius: var(--r-sm);
  overflow: hidden;
  opacity: .55;
  transition: opacity var(--t-fast), outline-color var(--t-fast);
  outline: 2px solid transparent;
  outline-offset: 1px;
}
.gallery__thumbs button[aria-current="true"] { opacity: 1; outline-color: var(--accent); }
.gallery__thumbs img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  display: none;
  background: rgba(16, 17, 20, .94);
}
.lightbox.is-open { display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 82vh; object-fit: contain; }
.lightbox__bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--gutter);
  color: #fff; font-size: .88rem;
}
.lightbox__close { color: #fff; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.lightbox__close:hover { background: rgba(255,255,255,.12); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; display: grid; place-items: center;
  color: #fff; border-radius: 50%;
}
.lightbox__nav:hover { background: rgba(255,255,255,.12); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
.lightbox__caption {
  position: absolute; bottom: 1.5rem; left: 0; right: 0;
  text-align: center; color: #d6d8dc; font-size: .9rem;
  padding-inline: var(--gutter);
}

/* Textblock-Paar */
.textpair { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); }
.textpair > * { min-width: 0; }
@media (min-width: 900px) { .textpair { grid-template-columns: 1fr 1fr; } }

.block__title { margin-bottom: .9rem; }

/* Eingeklappter Langtext auf Mobil */
.longtext { position: relative; }
.longtext__body { white-space: pre-line; }
@media (max-width: 767px) {
  .longtext:not(.is-open) .longtext__body {
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .longtext__toggle { display: inline-flex; margin-top: .6rem; }
}
.longtext__toggle {
  display: none; align-items: center; gap: .35rem;
  font-size: .88rem; font-weight: 600; color: var(--accent);
}
.longtext__toggle .ico { transition: transform var(--t-fast); }
.longtext.is-open .longtext__toggle .ico { transform: rotate(180deg); }

/* Karte mit Consent-Gate */
.mapgate {
  position: relative;
  display: grid; place-items: center;
  min-height: 320px;
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--bone-deep);
  border: 1px solid var(--stone-100);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.mapgate__pattern {
  position: absolute; inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(var(--stone-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--stone-100) 1px, transparent 1px);
  background-size: 44px 44px;
}
.mapgate__inner { position: relative; max-width: 42ch; }
.mapgate__inner .ico--lg { color: var(--accent); width: 34px; height: 34px; margin-inline: auto; }
.mapgate p { font-size: .88rem; color: var(--ink-muted); margin: .7rem 0 1.1rem; }
.mapgate a { color: var(--accent); font-weight: 600; }
.mapgate a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Nach der Einwilligung ersetzt die Karte den Platzhalter vollstaendig */
.mapgate.is-loaded {
  display: block;
  min-height: 0;
  padding: 0;
  background: var(--bone-deep);
}
.mapgate.is-loaded iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 42vh, 460px);
  border: 0;
}

/* Mobile Sticky-Aktionsleiste */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--stone-100);
  transform: translateY(110%);
  transition: transform var(--t-base);
}
.actionbar.is-visible { transform: none; }
@media (min-width: 1024px) { .actionbar { display: none; } }
.actionbar__price {
  flex: 1; min-width: 0;
  font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.actionbar__label { display: block; font-size: .72rem; font-weight: 400; color: var(--ink-muted); }

/* =========================================================================
   Referenzen, Marquee, Timeline, FAQ
   ========================================================================= */
.quote {
  padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  background: var(--surface);
  border: 1px solid var(--stone-100);
  border-radius: var(--r-xl);
}
.quote__stars { display: flex; gap: .15rem; color: #d9a441; margin-bottom: 1rem; }
.quote__stars svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.quote__text {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem);
  line-height: 1.42;
  color: var(--ink);
}
.quote__meta { margin-top: 1.2rem; font-size: .875rem; color: var(--ink-muted); }
.quote__meta strong { color: var(--ink); font-weight: 600; }

/* --- Auszeichnungen und Mitgliedschaften -------------------------------
   Die Siegel liegen als Bilddateien im Repo. Die Original-Widgets von
   ProvenExpert wuerden bei jedem Seitenaufruf Daten an deren Server
   schicken - genau das soll hier nicht passieren. */
.siegel {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) 0;
}
.siegel__item {
  display: flex; align-items: center;
  filter: saturate(.92);
  transition: transform var(--t-base), filter var(--t-base);
}
a.siegel__item:hover { transform: translateY(-2px); filter: saturate(1); }
.siegel__item img { height: clamp(64px, 6vw, 88px); width: auto; }
/* Das IVD-Logo ist quer – bei gleicher Hoehe wuerde es die Reihe erschlagen */
.siegel__item--breit img { height: clamp(42px, 4vw, 58px); }

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 64s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; gap: 2.5rem; padding-inline: 1.25rem; }
.marquee__item {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .92rem; color: var(--ink-soft);
  white-space: nowrap;
}
.marquee__item .ico { color: var(--accent); }
@keyframes marquee { to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* Timeline */
.timeline { display: grid; gap: 0; }
@media (min-width: 900px) {
  .timeline { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.tl {
  position: relative;
  padding: 1.6rem 1.25rem 1.6rem 2.1rem;
  border-left: 1px solid var(--stone-200);
}
@media (min-width: 900px) {
  .tl { padding: 2.4rem 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--stone-200); }
}
.tl::before {
  content: '';
  position: absolute; left: -5px; top: 1.95rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
}
@media (min-width: 900px) { .tl::before { left: 0; top: -5px; } }
.tl__year {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.6rem; line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
}
.tl p { font-size: .9rem; color: var(--ink-soft); }

/* FAQ */
.faq { border-top: 1px solid var(--stone-100); }
.faq details { border-bottom: 1px solid var(--stone-100); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0;
  font-size: 1.05rem; font-weight: 600; line-height: 1.4;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq summary .ico { flex: 0 0 auto; color: var(--accent); transition: transform var(--t-fast); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq__body { padding-bottom: 1.4rem; max-width: 68ch; color: var(--ink-soft); font-size: .95rem; }

/* Horizontaler Snap-Scroller (Objekte auf der Startseite) */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 86%);
  gap: 1.15rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 700px)  { .rail { grid-auto-columns: minmax(0, 46%); } }
@media (min-width: 1100px) {
  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin-inline: 0; padding-inline: 0;
  }
}

/* =========================================================================
   Beitraege
   ========================================================================= */
.post {
  display: flex; flex-direction: column;
  padding-top: 1.4rem;
  border-top: 1px solid var(--stone-200);
  transition: border-color var(--t-base);
}
.post:hover { border-top-color: var(--accent); }
.post__date { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .6rem; }
.post__title { font-size: 1.12rem; font-weight: 600; line-height: 1.35; margin-bottom: .6rem; }
.post__excerpt { font-size: .92rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.post .arrow-link { margin-top: auto; }

.posts { display: grid; gap: 1.75rem; }
@media (min-width: 800px) { .posts { grid-template-columns: repeat(3, 1fr); } }

/* Artikel-Layout */
.article__head { max-width: 62ch; }
.article__body { max-width: 68ch; }
.article__body h2 {
  font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem);
  margin: 2.4rem 0 .9rem;
}
.article__body h3 { margin: 1.9rem 0 .7rem; }
.article__body > p { color: var(--ink-soft); }
.article__lead {
  font-size: 1.14rem; line-height: 1.6; color: var(--ink);
  padding-bottom: 1.6rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--stone-100);
}

/* =========================================================================
   Kontakt & Footer
   ========================================================================= */
.contactgrid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .contactgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

.contactlist { display: grid; gap: 1.1rem; }
.contactlist a, .contactlist div { display: flex; gap: .75rem; align-items: flex-start; }
.contactlist .ico { color: var(--accent); margin-top: .2em; }
.contactlist dt { font-size: .78rem; color: var(--ink-muted); }
.contactlist dd { font-weight: 500; }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }

.cta-band {
  display: grid; gap: 1.5rem; align-items: center;
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  background: var(--ink); color: var(--bone);
  border-radius: var(--r-xl);
}
@media (min-width: 880px) { .cta-band { grid-template-columns: 1.5fr auto; } }
.cta-band h2 { color: #fff; }
.cta-band p { color: #b6bac1; margin-top: .7rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.footer {
  background: var(--ink); color: #b6bac1;
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem) 2rem;
}
.footer a { color: #d5d8dd; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: 2.25rem; }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1060px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer h4 {
  font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  color: #7e838c; margin-bottom: 1rem;
}
.footer ul { display: grid; gap: .55rem; font-size: .9rem; }
.footer__brand { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.5rem; color: #fff; margin-bottom: .8rem; }
.footer__note { font-size: .88rem; line-height: 1.65; }
.footer__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.footer__badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: .78rem;
}
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .84rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }

/* =========================================================================
   Cookie-Consent
   ========================================================================= */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  padding: var(--gutter);
  padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  display: none;
}
.consent.is-open { display: block; }
.consent__box {
  max-width: 620px; margin-inline: auto;
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--stone-100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.consent h2 { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; }
.consent p { font-size: .875rem; color: var(--ink-soft); }
.consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.consent__actions .btn { flex: 1 1 auto; }

/* =========================================================================
   Fehlerseite
   ========================================================================= */
.error-page {
  display: grid; place-items: center; text-align: center;
  min-height: 64vh;
  padding-block: 4rem;
}
.error-page__code {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  line-height: .85; color: var(--accent-line);
}

/* =========================================================================
   Druck
   ========================================================================= */
@media print {
  .header, .mobilenav, .actionbar, .consent, .footer,
  .factcard__tools, .gallery__nav, .gallery__thumbs, .gallery__tabs,
  .sheet, .lightbox, .library__bar, .skip-link { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  .detail__layout { grid-template-columns: 1fr; }
  .factcard { box-shadow: none; border: 1px solid #ccc; }
  /* Beim Drucken sind alle Texte ausgeklappt */
  .longtext .longtext__body { -webkit-line-clamp: unset !important; display: block !important; }
  .longtext__toggle { display: none !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  .specs__grid { grid-template-columns: repeat(3, 1fr) !important; }
}