/* TH Immobilien – Stylesheet
   Ruhig, hochwertig, seriös. Gedämpfte Palette aus dem Logo abgeleitet:
   Anthrazit, Champagner-Gold, Elfenbein, Stein. Überschriften Jost (verwandt mit dem
   Logo-Schriftzug), Fließtext Inter. Kaum Rundungen, Flächen statt Linien, viel Luft.
   Mobile zuerst; Hover-Effekte nur für Maus/Trackpad. */

@font-face { font-family: 'Jost'; src: url(/assets/fonts/jost-latin.woff2) format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/assets/fonts/inter-latin.woff2) format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  /* Farben */
  --bg: #F8F6F2;            /* Elfenbein */
  --weiss: #FFFFFF;
  --stein: #EFEBE4;         /* zweite Fläche */
  --linie: #DDD6CB;         /* feine Trennlinien */
  --ink: #1F1E1C;           /* Anthrazit, Text */
  --ink-2: #66615A;         /* Nebentext: 5.7:1 auf Elfenbein */
  --gold: #A8895A;          /* Champagner-Gold: Linien, Symbole, Flächen */
  --gold-text: #7A6340;     /* Gold als Textfarbe auf Hell: 5.3:1 */
  --gold-hell: #C9B48C;     /* Gold auf Dunkel: 8.2:1 */
  --dunkel: #1F1E1C;
  --dunkel-2: #2B2A27;
  --feld: #8C857B;          /* Formularrahmen: 3.4:1 */
  --fehler: #A3321F;

  /* Schrift */
  --display: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
  --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --t-klein: 0.9375rem;                                   /* 15 */
  --t-text: 1.0625rem;                                    /* 17 */
  --t-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);      /* 18–22 */
  --t-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);       /* 22–28 */
  --t-h2: clamp(2rem, 1.35rem + 2.5vw, 3.25rem);          /* 32–52 */
  --t-h1: clamp(2.25rem, 8.4vw, 4.75rem);                 /* 36–76 */

  /* Form */
  --r: 2px;

  /* Raum */
  --rand: clamp(1.25rem, 4.5vw, 3rem);
  --luft: clamp(5rem, 10vw, 9rem);
  --breite: 78rem;
  --schmal: 46rem;
  --nav-h: 5.5rem;

  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-text)/1.6 var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.015em; font-weight: 350; }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.01em; font-weight: 350; }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: 0; }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a, button, [role="button"], label, summary { touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--gold-hell); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
address { font-style: normal; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ziffern { font-variant-numeric: tabular-nums; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink); }
.huelle { max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--luft); }
.abschnitt--stein { background: var(--stein); }
.abschnitt--weiss { background: var(--weiss); }
.abschnitt__kopf { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 44rem; }
.abschnitt__kopf h2 + .lead { margin-top: 1.25rem; }
.abschnitt__kopf--zeile { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; }
.abschnitt__kopf--zeile > div { max-width: 44rem; }


.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--bg); padding: .7rem 1rem; text-decoration: none; }
.skip:focus { top: .75rem; }

/* ---------- Knöpfe & Links ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3.25rem; padding: .8rem 1.75rem;
  border: 1px solid var(--ink); border-radius: var(--r);
  background: var(--ink); color: var(--bg);
  font: 500 var(--t-klein)/1.2 var(--text); letter-spacing: .01em; text-decoration: none;
  user-select: none; -webkit-user-select: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease-out);
}
.knopf:active { transform: scale(.98); }
.knopf svg { width: 1.05em; height: 1.05em; flex: none; }
.knopf--linie { background: var(--stein); border-color: var(--stein); color: var(--ink); }
.abschnitt--stein .knopf--linie { background: var(--weiss); border-color: var(--weiss); }
.abschnitt--stein .karte-weiss .knopf--linie, .abschnitt--stein .antwort .knopf--linie { background: var(--stein); border-color: var(--stein); }
.knopf--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.knopf--hell { background: var(--bg); border-color: var(--bg); color: var(--ink); }
.knopf--hell-linie { background: rgba(248, 246, 242, .14); border-color: transparent; color: var(--bg); }
.knopf--klein { min-height: 2.75rem; padding: .55rem 1.1rem; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--dunkel-2); border-color: var(--dunkel-2); }
  .knopf--linie:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .knopf--gold:hover { background: #B89B6D; border-color: #B89B6D; }
  .knopf--hell:hover { background: var(--weiss); border-color: var(--weiss); }
  .knopf--hell-linie:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }
}
.aktionen { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Textlink mit feinem Pfeil */
.mehr { display: inline-flex; align-items: center; gap: .7rem; padding-block: .4rem; color: var(--gold-text); font: 500 var(--t-klein)/1.3 var(--text); text-decoration: none; }
.mehr::after { content: ""; width: 1.75rem; height: 1px; background: currentColor; transition: width .3s var(--ease-out); }
.mehr:hover { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .mehr:hover::after { width: 2.75rem; } }
.dunkel .mehr { color: var(--gold-hell); }
.dunkel .mehr:hover { color: var(--bg); }

/* ---------- Kopf ---------- */
.kopf { position: relative; z-index: 30; background: var(--bg); padding-top: env(safe-area-inset-top, 0px); }
.kopf__innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.marke { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--ink); }
.marke img { height: 3.75rem; width: auto; }
.marke__name { display: none; }
.kopf__nav { display: none; }
.kopf__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.kopf__nav a { position: relative; display: block; padding: .6rem 0; text-decoration: none; font: 500 var(--t-klein)/1 var(--text); color: var(--ink); }
.kopf__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.kopf__nav a[aria-current="page"]::after { transform: none; }
@media (hover: hover) and (pointer: fine) { .kopf__nav a:hover::after { transform: none; } }
.kopf__login, .menue__login { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--ink); text-decoration: none; }
.kopf__login svg, .menue__login svg { width: 1.4rem; height: 1.4rem; }
.kopf__login[aria-current="page"], .menue__login[aria-current="page"] { color: var(--gold-text); }
@media (hover: hover) and (pointer: fine) { .kopf__login:hover, .menue__login:hover, .schliessen:hover { background: var(--stein); } }
.kopf__tel { display: none; }
.kopf__menue { display: inline-flex; align-items: center; gap: .6rem; height: 2.75rem; padding: 0 .25rem 0 .75rem; border: 0; background: transparent; color: var(--ink); font: 500 var(--t-klein)/1 var(--text); }
.kopf__menue svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 64rem) {
  :root { --nav-h: 6.625rem; }
  .marke img { height: 5.5rem; }
  .kopf__nav { display: block; }
  .kopf__tel { display: inline-flex; }
  .kopf__menue { display: none; }
}

/* Menü (Handy) */
.menue { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) var(--rand) calc(env(safe-area-inset-bottom, 0px) + 1.5rem); overflow-y: auto; overscroll-behavior: contain; animation: menue-auf .3s var(--ease-out); }
@keyframes menue-auf { from { opacity: 0; } }
.menue[hidden] { display: none; }
.menue__kopf { display: flex; justify-content: space-between; align-items: center; height: var(--nav-h); margin: 0 calc(-1 * var(--rand)) 2rem; padding: 0 var(--rand); }
.menue__kopf .marke img { height: 3.75rem; }
.menue__kopf-aktionen { display: flex; align-items: center; gap: .25rem; }
.menue ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.menue li a { display: block; padding: .55rem 0; font: 350 clamp(1.625rem, 6.5vw, 2rem)/1.2 var(--display); color: var(--ink); text-decoration: none; }
.menue li a[aria-current="page"] { color: var(--gold-text); }
.menue__kontakt { margin-top: auto; display: grid; gap: .75rem; }
.menue__klein { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 1.25rem; font-size: var(--t-klein); color: var(--ink-2); }
.menue__klein a { padding: .5rem 0; }
.schliessen { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; }
.schliessen svg { width: 1.4rem; height: 1.4rem; }

/* Handy-Leiste unten */
.leiste { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr auto; background: var(--dunkel); padding-bottom: env(safe-area-inset-bottom, 0px); transition: transform .35s var(--ease-out); }
.leiste a, .leiste button { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.5rem; padding: 0 1.1rem; border: 0; background: transparent; color: var(--bg); font: 500 var(--t-klein)/1 var(--text); text-decoration: none; user-select: none; -webkit-user-select: none; }
.leiste a:first-child { color: var(--gold-hell); }
.leiste a:active, .leiste button:active { background: var(--dunkel-2); }
.leiste svg { width: 1.15rem; height: 1.15rem; flex: none; }
.leiste.ist-weg { transform: translateY(110%); }
body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 64rem) { .leiste { display: none; } body { padding-bottom: 0; } }

/* ---------- Hero (Startseite) und Seitenköpfe mit Bild ---------- */
.hero, .seitenkopf--bild { position: relative; display: grid; color: var(--bg); background: var(--dunkel); overflow: hidden; }
.hero { min-height: min(88svh, 58rem); }
.seitenkopf--bild { min-height: min(68svh, 40rem); }
.hero__bild, .seitenkopf__bild { position: absolute; inset: 0; margin: 0; }
.hero__bild img, .seitenkopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero__bild::after, .seitenkopf__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 19, 17, .82) 0%, rgba(20, 19, 17, .45) 45%, rgba(20, 19, 17, .1) 75%); }
@media (min-width: 64rem) { .hero__bild::after, .seitenkopf__bild::after { background: linear-gradient(90deg, rgba(20, 19, 17, .78) 0%, rgba(20, 19, 17, .5) 38%, rgba(20, 19, 17, .05) 70%); } }
@media (prefers-reduced-motion: no-preference) {
  .hero__bild img { animation: hero-ruhig 2.4s var(--ease-out) both; }
  @keyframes hero-ruhig { from { transform: scale(1.06); } }
}
.hero__inhalt, .seitenkopf__inhalt { position: relative; align-self: end; width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 8rem var(--rand) clamp(2.5rem, 7vw, 5.5rem); }
.hero__inhalt > *, .seitenkopf__inhalt > * { max-width: 40rem; }
.hero h1, .seitenkopf--bild h1 { color: var(--bg); }
.hero .lead, .seitenkopf--bild .lead { color: rgba(248, 246, 242, .86); margin-top: 1.5rem; max-width: 34rem; }
.hero .aktionen { margin-top: 2.25rem; }
@media (min-width: 64rem) { .hero__inhalt { align-self: center; padding-top: 6rem; } }
.person { position: absolute; z-index: 2; right: var(--rand); bottom: clamp(2.5rem, 7vw, 5.5rem); display: none; align-items: center; gap: 1rem; padding: .85rem 1.4rem .85rem .85rem; background: var(--bg); color: var(--ink); border-radius: var(--r); }
.person img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; }
.person p { margin: 0; font-size: var(--t-klein); line-height: 1.4; color: var(--ink-2); }
.person strong { display: block; font: 400 var(--t-text)/1.3 var(--display); color: var(--ink); }
.person a { color: var(--gold-text); text-decoration: none; font-weight: 500; }
@media (min-width: 64rem) { .person { display: flex; } }

/* Seitenkopf ohne Bild */
.seitenkopf { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); background: var(--stein); }
.seitenkopf .lead { margin-top: 1.5rem; max-width: 40rem; }
.seitenkopf .aktionen { margin-top: 2rem; }

/* ---------- Wegweiser ---------- */
.wegweiser { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 64rem) { .wegweiser { grid-template-columns: 5fr 7fr; align-items: start; } }
.wahl { margin: 0 0 .5rem; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; min-inline-size: 0; }
.wahl > [data-anliegen]:last-child:nth-child(even) { grid-column: 1 / -1; }
.wahl legend { padding: 0; }
.wahl a, .wahl button {
  min-height: 3.75rem; padding: .75rem 1rem; border: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-text)/1.2 var(--display); text-decoration: none; display: flex; align-items: center; justify-content: center; text-align: center;
  user-select: none; -webkit-user-select: none;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.abschnitt--stein .wahl a, .abschnitt--stein .wahl button { background: var(--weiss); }
.wahl [aria-pressed="true"], .abschnitt--stein .wahl [aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .wahl button:not([aria-pressed="true"]):hover { background: var(--dunkel); color: var(--bg); } }
@media (min-width: 40rem) {
  .wahl { grid-template-columns: repeat(6, 1fr); }
  .wahl > [data-anliegen] { grid-column: span 2; }
  .wahl > [data-anliegen]:nth-child(n+5), .wahl > [data-anliegen]:last-child:nth-child(even) { grid-column: span 3; }
}
.antwort { background: var(--weiss); padding: clamp(1.5rem, 4vw, 2.5rem); }
.antwort h3 { margin-bottom: .6rem; }
.antwort p { margin-bottom: 1.5rem; }
.antwort .aktionen { gap: .75rem 1.75rem; }
.antwort.ist-neu { animation: auftauchen .5s var(--ease-out); }
@keyframes auftauchen { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Leistungen ---------- */
.leistungen { display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 48rem) {
  .leistungen { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
  .leistung:nth-child(even) { margin-top: 6rem; }
  /* Ungerade Anzahl: letzte Karte quer über beide Spalten */
  .leistung:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .leistung:last-child:nth-child(odd) figure { margin: 0; }
}
@media (min-width: 64rem) {
  .leistungen { grid-template-columns: repeat(3, 1fr); column-gap: clamp(2rem, 3.5vw, 3.5rem); }
  .leistung:nth-child(even) { margin-top: 0; }
  .leistung:nth-child(3n+2) { margin-top: 5rem; }
  .leistung:last-child:nth-child(odd) { grid-column: auto; display: block; }
  .leistung:last-child:nth-child(odd) figure { margin: 0 0 1.75rem; }
}
.leistung figure { margin: 0 0 1.75rem; overflow: hidden; border-radius: var(--r); background: var(--stein); }
.leistung img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.leistung h3 { margin-bottom: .85rem; }
.leistung .mehr { margin-top: .5rem; }
@media (hover: hover) and (pointer: fine) { .leistung:hover img { transform: scale(1.025); } }

/* ---------- Angebote ---------- */
.karte-weiss { background: var(--weiss); padding: clamp(1.5rem, 4vw, 3rem); }
.angebot-leer { display: grid; gap: 2.5rem; align-items: center; }
.angebot-leer__bild { margin: 0; overflow: hidden; border-radius: var(--r); }
.angebot-leer__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 56rem) { .angebot-leer { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.angebot-leer h3 { margin-bottom: .75rem; }
.angebot-leer .aktionen { margin-top: 1.75rem; }
.angebot-leer__eigentuemer { margin-top: 1.75rem; padding: 1rem 1.25rem; background: var(--stein); }
.angebot-leer__eigentuemer a { color: var(--gold-text); font-weight: 500; }

/* Objektkarten (aus content/immobilien.json bzw. später aus dem CRM) */
.objekte { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 24rem); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); padding: 0 var(--rand) 1rem; margin: 0 calc(-1 * var(--rand)); scrollbar-width: none; overscroll-behavior-x: contain; }
.objekte::-webkit-scrollbar { display: none; }
.objekte--raster { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); overflow: visible; margin: 0; padding: 0; gap: 2rem 1.5rem; }
.objekt-karte { scroll-snap-align: start; }
.objekt-karte > a { display: flex; flex-direction: column; height: 100%; background: var(--weiss); text-decoration: none; color: var(--ink); }
.objekt-karte__bild { overflow: hidden; }
.objekt-karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.objekt-karte__text { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: .45rem; }
.objekt-karte__art { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font: 500 var(--t-klein)/1.3 var(--text); color: var(--gold-text); }
.objekt-karte__titel { font: 400 var(--t-lead)/1.3 var(--display); }
.objekt-karte__daten { font-size: var(--t-klein); color: var(--ink-2); }
.objekt-karte__preis { font: 400 var(--t-lead)/1.3 var(--display); font-variant-numeric: tabular-nums; margin-top: .75rem; }
.objekt-karte__status { display: inline-block; padding: .15rem .5rem; background: var(--ink); color: var(--bg); font-size: var(--t-klein); }
@media (hover: hover) and (pointer: fine) { .objekt-karte > a:hover .objekt-karte__titel { color: var(--gold-text); } .objekt-karte > a:hover img { transform: scale(1.03); } }
.objekt-karte--hinweis > div { display: flex; flex-direction: column; justify-content: center; gap: .9rem; height: 100%; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--weiss); }
.objekt-karte--hinweis h3 { font-size: var(--t-h3); }
.objekt-karte--hinweis p { margin: 0; }
.objekt-karte--hinweis .knopf--linie { background: var(--stein); border-color: var(--stein); color: var(--ink); }
.demo-hinweis { margin: 0; max-width: none; background: var(--dunkel); color: var(--gold-hell); padding: .6rem var(--rand); text-align: center; font: 500 var(--t-klein)/1.4 var(--text); }

/* ---------- Einwilligung für Drittinhalte (immowelt, Google Maps) ---------- */
.einwilligung h3 { margin-bottom: .75rem; }
.einwilligung__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; }
.merken { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; cursor: pointer; font-size: var(--t-klein); color: var(--ink-2); }
.merken input { width: 1.2rem; height: 1.2rem; accent-color: var(--ink); margin: 0; }
.einwilligung__klein { font-size: var(--t-klein); color: var(--ink-2); margin-top: 1.25rem; }
.einwilligung__klein a { color: var(--gold-text); }
.drittinhalt[data-geladen] .einwilligung { display: none; }
.drittinhalt__ziel:empty { display: none; }
.karte-box { background: var(--weiss); padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.karte-box[data-geladen] { padding: 0; }
.karte-box iframe { width: 100%; height: clamp(18rem, 40vw, 26rem); border: 0; filter: grayscale(.4); }

/* immowelt-Homepagemodul an die Seite anpassen (Original-CSS setzt 12px Arial und 450px Mindestbreite) */
#immowelt-ziel { margin-top: 1.5rem; overflow-x: auto; }
#immowelt-ziel #iwModule, #immowelt-ziel #iwModule #iwWidget { min-width: 0 !important; max-width: 100% !important; background: transparent !important; }
#immowelt-ziel #iwModule #iwWidget div, #immowelt-ziel #iwModule #iwWidget span, #immowelt-ziel #iwModule #iwWidget p,
#immowelt-ziel #iwModule #iwWidget a, #immowelt-ziel #iwModule #iwWidget li, #immowelt-ziel #iwModule #iwWidget label,
#immowelt-ziel #iwModule #iwWidget strong, #immowelt-ziel #iwModule #iwWidget td, #immowelt-ziel #iwModule #iwWidget th,
#immowelt-ziel #iwModule #iwWidget input, #immowelt-ziel #iwModule #iwWidget select { font-family: var(--text) !important; font-size: 16px !important; color: var(--ink); }
#immowelt-ziel #iwModule #iwWidget h1, #immowelt-ziel #iwModule #iwWidget h2 { font-family: var(--display) !important; font-weight: 400 !important; color: var(--ink) !important; }
#immowelt-ziel #iwModule #iwWidget a.hm_btn, #immowelt-ziel #iwModule #iwWidget a.hm_text_btn { background: var(--ink) !important; border: 0 !important; border-radius: 2px !important; color: var(--bg) !important; padding: .35rem .9rem !important; }
#immowelt-ziel #iwModule #iwWidget img { max-width: 100%; height: auto; }

/* ---------- Kennzahlen (dunkles Band) ---------- */
.dunkel { background: var(--dunkel); color: var(--bg); }
.dunkel h2, .dunkel h3 { color: var(--bg); }
.dunkel p { color: rgba(248, 246, 242, .82); }
.zahlen { display: grid; margin: 0; }
.zahlen { gap: 2.5rem; }
.zahlen div { display: flex; flex-direction: column-reverse; gap: .5rem; }
.zahlen dd { margin: 0; font: 300 clamp(3.5rem, 1.5rem + 6.5vw, 6.5rem)/1 var(--display); color: var(--gold-hell); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.zahlen dt { font: 400 var(--t-text)/1.4 var(--text); color: rgba(248, 246, 242, .82); }
@media (min-width: 48rem) { .zahlen { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* ---------- Über uns (kurz) ---------- */
.ueber { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.ueber__bild { position: relative; margin: 0; }
.ueber__bild img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 46% 30%; border-radius: var(--r); }
@media (min-width: 56rem) { .ueber { grid-template-columns: 5fr 6fr; } .ueber__bild::before { content: ""; position: absolute; inset: 2rem -2rem -2rem 2rem; background: var(--stein); } }
.ueber__text .lead { color: var(--ink); margin: 1.5rem 0 1.25rem; }
.gruss { margin: 2rem 0 1.25rem; }
.gruss strong { display: block; font: 400 var(--t-lead)/1.3 var(--display); }
.gruss span { color: var(--ink-2); font-size: var(--t-klein); }

/* ---------- Kontakt ---------- */
.wege { display: grid; gap: .75rem; }
@media (min-width: 48rem) { .wege { grid-template-columns: repeat(3, 1fr); } }
.weg { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.5rem 1.75rem; background: var(--weiss); text-decoration: none; color: var(--ink); transition: background-color .25s var(--ease), color .25s var(--ease); }
@media (min-width: 48rem) { .weg { padding: 2rem; } }
.weg__art { font: 500 var(--t-klein)/1.3 var(--text); color: var(--gold-text); }
.weg__wert { font: 400 var(--t-h3)/1.3 var(--display); overflow-wrap: anywhere; }
.weg__hinweis { font-size: var(--t-klein); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { a.weg:hover { background: var(--dunkel); color: var(--bg); } a.weg:hover .weg__art { color: var(--gold-hell); } a.weg:hover .weg__hinweis { color: rgba(248, 246, 242, .82); } }
.kontakt__unten { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) {
  /* Formular links, Kontaktwege und Karte rechts daneben (auf dem Handy: Wege, Formular, Karte) */
  .kontakt__unten { grid-template-columns: 7fr 5fr; grid-template-areas: "form wege" "form seite"; grid-template-rows: auto 1fr; gap: .75rem 2rem; align-items: start; }
  .kontakt__unten .wege { grid-area: wege; grid-template-columns: 1fr; margin: 0; }
  .kontakt__unten .formular-karte { grid-area: form; }
  .kontakt__unten .kontakt__seite { grid-area: seite; gap: .75rem; }
}
.formular-karte { background: var(--weiss); padding: clamp(1.5rem, 4vw, 3rem); }
.formular-karte > h3 { margin-bottom: .5rem; }
.formular-karte > p { color: var(--ink-2); margin-bottom: 2rem; }
.kontakt__seite { display: grid; gap: 1.5rem; }
.kontakt__seite figure { margin: 0; overflow: hidden; border-radius: var(--r); }
.kontakt__seite figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 30%; }

/* Formular */
.formular { display: grid; gap: 1.25rem; }
.formular[hidden] { display: none; }
.formular__zwei { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .formular__zwei { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: .45rem; align-content: start; }
.feld > label, .feld .label-text { font: 500 var(--t-klein)/1.3 var(--text); color: var(--ink); }
.feld .optional { font-weight: 400; color: var(--ink-2); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 3.25rem; padding: .75rem 1rem;
  font: 400 var(--t-text)/1.4 var(--text); color: var(--ink);
  background: var(--bg); border: 1px solid var(--feld); border-radius: var(--r);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F1E1C' stroke-width='1.4'/%3E%3C/svg%3E") right 1rem center / .7rem no-repeat; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--ink); background-color: var(--weiss); box-shadow: 0 0 0 3px rgba(168, 137, 90, .3); }
.feld [aria-invalid="true"] { border-color: var(--fehler); }
.feld__fehler { color: var(--fehler); font-size: var(--t-klein); margin: 0; }
.feld__fehler:empty { display: none; }
.feld .zustimmung { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; font: 400 var(--t-text)/1.55 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.zustimmung input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--ink); }
.formular__pflicht { font-size: var(--t-klein); color: var(--ink-2); margin: 0; }
.formular__pflicht a { color: var(--gold-text); }
.formular .knopf { justify-self: start; }
.formular .knopf[aria-busy="true"] { opacity: .7; pointer-events: none; }
.falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.meldung { padding: 1.5rem; background: var(--stein); }
.meldung h3 { margin-bottom: .5rem; }
.meldung--fehler { background: #F4E4DF; }
.meldung[hidden] { display: none; }

/* ---------- Unterseiten-Bausteine ---------- */
.werte { display: grid; gap: .75rem; margin: 0; }
@media (min-width: 48rem) { .werte { grid-template-columns: 1fr 1fr; } }
.werte div { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--weiss); }
.werte dt { font: 400 var(--t-h3)/1.25 var(--display); margin-bottom: .6rem; }
.werte-raster { display: grid; gap: .75rem; }
.werte__bild { margin: 0; overflow: hidden; }
.werte__bild img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 64rem) { .werte-raster { grid-template-columns: 5fr 7fr; } .werte__bild img { aspect-ratio: auto; } }
.werte dd { margin: 0; }

.ansprechpartner { display: grid; gap: 1.75rem; background: var(--weiss); padding: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
@media (min-width: 40rem) { .ansprechpartner { grid-template-columns: 9rem 1fr; } }
.ansprechpartner img { width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; object-position: 32% 18%; }
.ansprechpartner h3 { margin-bottom: .2rem; }
.ansprechpartner .rolle { color: var(--ink-2); margin-bottom: 1rem; }
.ansprechpartner ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ansprechpartner li a { color: var(--gold-text); text-decoration: none; }
.ansprechpartner li a:hover { text-decoration: underline; }
.zwei { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .zwei { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.zwei > div > .lead { margin-top: 1.25rem; }

/* Dunkles Band mit Bild (Handlungsaufforderung) */
.band { display: grid; background: var(--dunkel); color: var(--bg); }
.band h2 { color: var(--bg); }
.band p { color: rgba(248, 246, 242, .82); font-size: var(--t-lead); line-height: 1.55; margin-top: 1.25rem; }
.band__text { padding: clamp(3rem, 7vw, 6rem) var(--rand); align-self: center; }
.band__text > * { max-width: 32rem; }
.band__text .aktionen { margin-top: 2.25rem; }
.band__bild { margin: 0; }
.band__bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
@media (min-width: 56rem) { .band { grid-template-columns: 1fr 1fr; } .band__text { padding-left: max(var(--rand), calc((100vw - var(--breite)) / 2)); } .band__bild img { aspect-ratio: auto; min-height: 32rem; } }

/* Lesen (Impressum, Datenschutz) */
.lesen { padding: clamp(3rem, 7vw, 6rem) var(--rand) var(--luft); }
.lesen__innen { max-width: var(--schmal); margin: 0 auto; }
.lesen h1 { font-size: var(--t-h2); margin-bottom: 2.5rem; }
.lesen h2 { font-size: var(--t-h3); margin: 4rem 0 1rem; }
.lesen h3 { font: 600 var(--t-text)/1.4 var(--text); margin: 2rem 0 .5rem; }
.lesen p, .lesen li { overflow-wrap: anywhere; }
.lesen ul { padding-left: 1.25rem; }
.lesen li + li { margin-top: .4rem; }
.lesen a:not(.knopf) { color: var(--gold-text); }
.lesen dl { margin: 0; display: grid; gap: .5rem; }
.lesen dl div { padding: 1.1rem 1.25rem; background: var(--weiss); display: grid; gap: .3rem; }
@media (min-width: 40rem) { .lesen dl div { grid-template-columns: 14rem 1fr; gap: 2rem; } }
.lesen dt { font: 500 var(--t-klein)/1.5 var(--text); color: var(--gold-text); }
.lesen dd { margin: 0; }
.inhalt-liste { background: var(--weiss); padding: 1.5rem 1.75rem; margin-bottom: 3rem; columns: 2 14rem; column-gap: 2rem; }
.inhalt-liste a { display: block; padding: .35rem 0; break-inside: avoid; text-decoration: none; }
.inhalt-liste a:hover { text-decoration: underline; }

/* Objekt-Detailseite */
.galerie { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
.galerie figure { margin: 0; overflow: hidden; }
.galerie figure:first-child { grid-column: 1 / -1; }
.galerie img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 64rem) { .galerie { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .galerie figure:first-child { grid-column: 1; grid-row: 1 / span 2; } .galerie figure:first-child img { aspect-ratio: auto; } .galerie figure:nth-child(n+4) { display: none; } }
.objekt__innen { display: grid; gap: 3rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 64rem) { .objekt__innen { grid-template-columns: 7fr 4fr; gap: 5rem; align-items: start; } .objekt__seite { position: sticky; top: 1.5rem; } }
.objekt__titel h1 { font-size: var(--t-h2); }
.eckdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; margin: 2.5rem 0; }
.eckdaten div { padding: 1.1rem 1.25rem; background: var(--weiss); }
.eckdaten dt { font: 500 var(--t-klein)/1.4 var(--text); color: var(--gold-text); }
.eckdaten dd { margin: .35rem 0 0; font: 400 var(--t-lead)/1.2 var(--display); font-variant-numeric: tabular-nums; }
.objekt__text h2 { font-size: var(--t-h3); margin: 3rem 0 1rem; }
.objekt__text ul { padding-left: 1.25rem; }
.kasten { background: var(--weiss); padding: 1.75rem; }
.kasten + .kasten { margin-top: 1rem; }
.preis { font: 350 var(--t-h2)/1.05 var(--display); font-variant-numeric: tabular-nums; margin: 0; }
.preis-art { color: var(--ink-2); margin: .4rem 0 1rem; }
.energie dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; font-size: var(--t-klein); }
.energie dt { color: var(--ink-2); }
.energie dd { margin: 0; font-weight: 500; }

/* ---------- Anfrage-Assistent (Marktanalyse, Suchwunsch) ---------- */
.anfrage-raster { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 64rem) { .anfrage-raster { grid-template-columns: 7fr 4fr; gap: 2rem; } .anfrage-seite { position: sticky; top: 1.5rem; } }
.anfrage-seite { display: grid; gap: .75rem; }
.kasten__titel { font: 400 var(--t-lead)/1.3 var(--display); margin-bottom: 1rem; }
.kasten p + .mehr { margin-top: .75rem; }
.ablauf { margin: 0; padding-left: 1.25rem; display: grid; gap: .75rem; }
.ablauf li::marker { color: var(--gold-text); font-weight: 600; }
.ansprechpartner--klein { grid-template-columns: 6rem 1fr; gap: 1.25rem; padding: 1.5rem; }
.ansprechpartner--klein img { width: 6rem; height: 6rem; }
.ansprechpartner--klein h3 { font-size: var(--t-lead); }
.ansprechpartner--klein .rolle { margin-bottom: .5rem; }

.assistent__kopf { display: grid; gap: .6rem; margin-bottom: 2rem; }
.assistent__kopf[hidden] { display: none; }
.assistent__stand { margin: 0; font-size: var(--t-klein); color: var(--ink-2); }
.assistent__balken { height: .25rem; background: var(--stein); overflow: hidden; }
.assistent__balken span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.schritt { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: 1.25rem; }
.schritt + .schritt { margin-top: 3rem; }
.assistent.ist-aktiv .schritt + .schritt { margin-top: 0; }
.schritt[hidden] { display: none; }
.schritt__titel { float: left; width: 100%; padding: 0; margin-bottom: .25rem; font: 400 var(--t-h3)/1.25 var(--display); color: var(--ink); }
.schritt__titel:focus { outline: none; }
.schritt__titel + * { clear: both; }
.schritt__hinweis { margin: .5rem 0 -.5rem; font-size: var(--t-klein); color: var(--ink-2); }
.schritt > div > .schritt__hinweis { margin: .75rem 0 .75rem; }   /* Hinweis in Bedingungs-Blöcken (kein Grid-Abstand) */
.schritt__fehler { margin: 0; color: var(--fehler); font-size: var(--t-klein); }
.assistent__nav { display: none; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
.assistent.ist-aktiv .assistent__nav { display: flex; }
.assistent__nav--ende { display: flex; }
.assistent:not(.ist-aktiv) .assistent__nav--ende [data-zurueck] { display: none; }
.assistent .formular__zwei > .feld, .feld--voll { min-width: 0; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .5rem; }
@media (max-width: 35.99rem) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kachel { position: relative; display: block; cursor: pointer; }
.kachel input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.kachel span { display: flex; align-items: center; justify-content: center; min-height: 3.75rem; height: 100%; padding: .75rem .6rem; background: var(--stein); hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; text-wrap: balance; color: var(--ink); font: 400 var(--t-text)/1.25 var(--display); text-align: center; transition: background-color .2s var(--ease), color .2s var(--ease); user-select: none; -webkit-user-select: none; }
.kachel input:checked + span { background: var(--ink); color: var(--bg); }
.kachel input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.kachel:active span { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .kachel:hover input:not(:checked) + span { background: #E4DED4; } }

.feld__einheit { position: relative; }
.feld__einheit input { padding-right: 3rem; }
.feld__einheit > span { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.feld__hinweis { margin: 0; font-size: var(--t-klein); color: var(--ink-2); }

/* ---------- Rechner ---------- */
.rechner { display: grid; gap: .75rem; align-items: start; }
@media (min-width: 64rem) { .rechner { grid-template-columns: 7fr 5fr; gap: 2rem; } .rechner__ergebnis { position: sticky; top: 1.5rem; } }
.rechner__eingaben { display: grid; gap: .75rem; }
.rechner__eingaben .kasten { display: grid; gap: 1.25rem; }
.rechner__eingaben .kasten__titel { margin-bottom: 0; }
.rechner__ergebnis { display: grid; gap: .75rem; }
.ergebnis { background: var(--weiss); padding: clamp(1.5rem, 3vw, 2.25rem); }
.ergebnis--dunkel { background: var(--dunkel); color: var(--bg); }
.ergebnis--dunkel .ergebnis__wert { color: var(--gold-hell); }
.ergebnis__art { margin: 0; font: 400 var(--t-lead)/1.3 var(--display); color: var(--ink); }
.ergebnis--dunkel .ergebnis__art { color: var(--bg); }
.ergebnis__wert { margin: .5rem 0 1.25rem; color: var(--gold-text); font: 350 var(--t-h2)/1.05 var(--display); letter-spacing: -0.01em; }
.ergebnis__liste { margin: 0; display: grid; gap: .5rem; }
.ergebnis__liste div { display: flex; justify-content: space-between; gap: 1rem; }
.ergebnis__liste dt { color: var(--ink-2); }
.ergebnis--dunkel .ergebnis__liste dt { color: rgba(248, 246, 242, .82); }
.ergebnis__liste dd { margin: 0; text-align: right; }
.ergebnis__liste div:last-child dt, .ergebnis__liste div:last-child dd { font-weight: 600; color: inherit; }
.rechner__hinweis { margin-top: 2rem; font-size: var(--t-klein); color: var(--ink-2); max-width: 70ch; }
.rechner__hinweis a { color: var(--gold-text); }

/* Exposé: Zusatzaktionen */
.objekt__rechner { margin: 1rem 0 0; }
.objekt__extras { margin-top: .75rem; }

/* Exposé: Galerie öffnet alle Bilder groß */
.galerie-huelle { position: relative; }
.galerie-huelle .galerie figure:nth-child(n+4) { display: none; }
.objekt__preis-kurz { margin: .75rem 0 0; font: 400 var(--t-lead)/1.3 var(--display); font-variant-numeric: tabular-nums; }
@media (min-width: 64rem) { .objekt__preis-kurz { display: none; } }
.galerie__knopf { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.galerie__knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.galerie__alle { margin-top: .75rem; background: var(--stein); border-color: var(--stein); }
@media (min-width: 64rem) { .galerie__alle { position: absolute; right: 1.25rem; bottom: 1.25rem; margin: 0; background: var(--bg); border-color: var(--bg); } }
.bilder-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--dunkel); color: var(--bg); overflow-y: auto; overscroll-behavior: contain; }
.bilder-dialog::backdrop { background: rgba(31, 30, 28, .7); }
.bilder-dialog__kopf { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem var(--rand); background: var(--dunkel); }
.bilder-dialog__kopf p { margin: 0; font: 400 var(--t-text)/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bilder-dialog__liste { display: grid; gap: .75rem; max-width: 76rem; margin: 0 auto; padding: .25rem var(--rand) 3rem; }
.bilder-dialog__liste figure { margin: 0; scroll-margin-top: 4.5rem; }
.bilder-dialog__liste img { display: block; width: 100%; height: auto; }
html:has(.bilder-dialog[open]) { overflow: hidden; }

/* Prüfpunkte: nur mit `python3 build.py --entwurf` sichtbar */
.pruefpunkt { margin: 1.5rem 0; padding: 1rem 1.25rem; background: #FFF6D6; color: #3D3415; font-size: var(--t-klein); line-height: 1.45; outline: 2px dashed #C9A227; outline-offset: -2px; }
.pruefpunkt strong { display: block; margin-bottom: .2rem; }
.pruefpunkt ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ---------- Fuß ---------- */
.fuss { background: var(--stein); color: var(--ink-2); font-size: var(--t-klein); padding: clamp(3.5rem, 7vw, 5.5rem) 0 calc(2rem + env(safe-area-inset-bottom, 0px)); }
.fuss__oben { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
.fuss__marke img { height: 4rem; width: auto; margin-bottom: 1.25rem; }
.fuss__marke p { max-width: 30ch; }
.fuss h2 { font: 600 var(--t-klein)/1.3 var(--text); color: var(--ink); margin-bottom: 1rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.fuss a { color: var(--ink); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss button { background: none; border: 0; padding: 0; color: var(--ink); font-size: inherit; text-align: left; }
.fuss button:hover { text-decoration: underline; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.75rem; }
.fuss__unten p { margin: 0; max-width: none; }
@media (min-width: 48rem) { .fuss__oben { grid-template-columns: repeat(3, 1fr); } .fuss__marke { grid-column: 1 / -1; } }
@media (min-width: 72rem) { .fuss__oben { grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr 1fr; } .fuss__marke { grid-column: auto; } }

/* Dialog: Datenschutz-Einstellungen */
.dialog { border: 0; padding: 0; max-width: min(34rem, calc(100vw - 2rem)); width: 100%; background: var(--bg); color: var(--ink); border-radius: var(--r); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }
.dialog::backdrop { background: rgba(20, 19, 17, .55); }
.dialog form { padding: clamp(1.75rem, 4vw, 2.5rem); }
.dialog h2 { font-size: var(--t-h3); margin-bottom: .75rem; }
.dialog form > p { color: var(--ink-2); }
.dienst { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: 1rem 1.25rem; margin-top: .5rem; align-items: center; background: var(--weiss); }
.dienst label { font-weight: 600; }
.dienst p { grid-column: 1; font-size: var(--t-klein); color: var(--ink-2); margin: 0; }
.dienst input { grid-row: 1 / span 2; grid-column: 2; width: 1.4rem; height: 1.4rem; accent-color: var(--ink); }
.dialog__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ---------- Bewegung: ruhiger Auftritt ---------- */
.js [data-auftritt] > * { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-auftritt].ist-da > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-auftritt] > * { transform: none; transition: opacity .3s linear; transition-delay: 0s; }
  .antwort.ist-neu, .menue { animation: none; }
  .leistung img, .objekt-karte img { transition: none; }
}

/* Druck */
@media print {
  .kopf__nav, .kopf__menue, .kopf__tel, .leiste, .menue, .drittinhalt, .formular, .skip { display: none !important; }
  /* Exposé als PDF: nur Inhalt, Kontakt bleibt */
  .fuss, .dialog, .objekt__extras, .objekt__rechner, .objekt__seite .aktionen, .mehr::after, .galerie__alle, .bilder-dialog { display: none !important; }
  .demo-hinweis { background: none; color: #000; border: 1px solid #ccc; }
  body { background: #fff; padding: 0; font-size: 11pt; }
  .js [data-auftritt] > * { opacity: 1 !important; transform: none !important; }
  .abschnitt { padding-block: 0 !important; }
  .objekt__innen { grid-template-columns: 1fr !important; gap: 1.5rem; }
  .objekt__seite { position: static !important; }
  .galerie { grid-template-columns: 2fr 1fr !important; }
  .galerie figure:nth-child(n+4) { display: none; }
  .kasten, .eckdaten div { background: #fff; border: 1px solid #ccc; break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}

/* ---------- Hauptnavigation: Untermenü „Leistungen“ ---------- */
.nav-gruppe { position: relative; }
.kopf__nav .nav-gruppe__knopf { display: inline-flex; align-items: center; gap: .35rem; }
.nav-gruppe__knopf svg { width: .95rem; height: .95rem; transition: transform .25s var(--ease-out); }
.nav-gruppe.ist-offen .nav-gruppe__knopf svg { transform: rotate(180deg); }
.nav-gruppe.ist-aktiv > .nav-gruppe__knopf::after { transform: none; }
.nav-gruppe__menue { position: absolute; top: calc(100% + .6rem); left: -1.5rem; z-index: 40; width: 23rem; padding: .75rem; background: var(--weiss); box-shadow: 0 18px 48px rgba(31, 30, 28, .14); display: none; }
.nav-gruppe.ist-offen .nav-gruppe__menue { display: block; animation: menue-auf .2s var(--ease-out); }
.kopf__nav .nav-gruppe__menue ul { display: grid; gap: 0; }
.kopf__nav .nav-gruppe__menue a { display: grid; gap: .2rem; padding: .7rem .85rem; line-height: 1.3; }
.kopf__nav .nav-gruppe__menue a::after { display: none; }
.nav-gruppe__menue strong { font: 400 var(--t-text)/1.25 var(--display); color: var(--ink); }
.nav-gruppe__menue span { font-size: .875rem; font-weight: 400; color: var(--ink-2); }
.kopf__nav .nav-gruppe__menue a:focus-visible, .kopf__nav .nav-gruppe__menue a[aria-current="page"] { background: var(--bg); }
@media (hover: hover) and (pointer: fine) { .kopf__nav .nav-gruppe__menue a:hover { background: var(--bg); } .kopf__nav .nav-gruppe__menue a:hover strong { color: var(--gold-text); } }
.kopf__nav .nav-gruppe__alle { display: inline-flex; margin: .35rem .85rem .4rem; padding: .3rem 0; }
.menue__unter { margin: .1rem 0 .6rem 1rem !important; }
.menue .menue__unter a { padding: .35rem 0; font: 400 1.0625rem/1.35 var(--text); color: var(--ink-2); }

/* ---------- Seitenkopf mit Porträt: Foto im eigenen Bereich, damit der Kopf auf breiten Bildschirmen sichtbar bleibt ---------- */
@media (min-width: 64rem) {
  .seitenkopf--portrait .seitenkopf__bild { left: 40%; }
  .seitenkopf--portrait .seitenkopf__bild img { object-position: 50% 12%; }
  .seitenkopf--portrait .seitenkopf__bild::after { background: linear-gradient(90deg, var(--dunkel) 0%, rgba(31, 30, 28, .6) 14%, rgba(31, 30, 28, 0) 42%); }
  .seitenkopf--rechts .seitenkopf__bild { left: 0; right: 40%; }
  .seitenkopf--rechts .seitenkopf__bild img { object-position: 30% 15%; }
  .seitenkopf--rechts .seitenkopf__bild::after { background: linear-gradient(270deg, var(--dunkel) 0%, rgba(31, 30, 28, .6) 14%, rgba(31, 30, 28, 0) 42%); }
  .seitenkopf--rechts .seitenkopf__inhalt { display: grid; justify-items: end; }
  .seitenkopf--rechts .seitenkopf__inhalt > * { width: min(100%, 34rem); }
}
@media (min-width: 120rem) { .seitenkopf--portrait .seitenkopf__bild { left: 46%; } .seitenkopf--rechts .seitenkopf__bild { left: 0; right: 46%; } }

/* ---------- Rechner: feste Provision ---------- */
.feld__label { font: 500 var(--t-klein)/1.3 var(--text); color: var(--ink); }
.feld--fest input, .feld--fest input:focus { background: var(--stein); border-color: var(--stein); box-shadow: none; cursor: default; }

/* ---------- Online-Bewertung ---------- */
.boris .feld__hinweis a { color: var(--gold-text); }
.boris__link { white-space: nowrap; }   /* Link, Symbol und Doppelpunkt bleiben zusammen */
.boris .feld__hinweis svg { display: inline-block; width: .85em; height: .85em; margin-left: .2em; vertical-align: -.05em; }
.wert-ergebnis { display: grid; gap: 1.25rem; }
.wert-ergebnis[hidden], [data-wert-mit][hidden], [data-wert-ohne][hidden] { display: none; }
.wert-ergebnis:focus { outline: none; }
.wert-ergebnis__art { font: 400 var(--t-h3)/1.25 var(--display); }
.wert-ergebnis__spanne { margin: .25rem 0 0; font: 300 clamp(2.25rem, 1.4rem + 3vw, 3.5rem)/1.1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.wert-ergebnis__spanne span { white-space: nowrap; }
.wert-ergebnis__mitte { margin: 0; font-size: var(--t-lead); color: var(--ink-2); }
.wert-ergebnis__mitte strong { color: var(--ink); font-weight: 500; }
.wert-ergebnis__klein { margin: 0; font-size: var(--t-klein); color: var(--ink-2); }
.wert-ergebnis [data-wert-mit] > p:last-child, .wert-ergebnis [data-wert-ohne] p { margin-top: .5rem; }

/* ---------- Tippgeber ---------- */
/* Tipp-Teaser (Startseite): Karte mit Betrag, Text und Ablauf – bewusst anders gebaut als „Persönlich. Regional. Verlässlich.“ (Bild + Text) */
.tipp-teaser__karte { display: grid; gap: clamp(1.75rem, 4vw, 3rem); padding: clamp(1.75rem, 4.5vw, 3.75rem); background: var(--weiss); }
@media (min-width: 64rem) { .tipp-teaser__karte { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
.tipp-teaser__betrag { display: grid; gap: .6rem; align-content: center; }
@media (min-width: 64rem) { .tipp-teaser__betrag { padding-right: clamp(1rem, 2.5vw, 2.5rem); } }
.tipp-teaser__betrag .ziffern { font: 300 clamp(4rem, 2rem + 6vw, 6.75rem)/.9 var(--display); color: var(--gold-text); letter-spacing: -0.02em; }
.tipp-teaser__betrag span:last-child { font: 500 var(--t-klein)/1.3 var(--text); color: var(--ink-2); }
.tipp-teaser__text h2 { font-size: clamp(1.875rem, 1.3rem + 1.7vw, 2.625rem); }
.tipp-teaser__text p { margin: 1rem 0 0; }
.tipp-teaser__text .aktionen { margin-top: 1.75rem; }
.tipp-teaser__schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tipp-teaser__schritte li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: center; padding: 1rem 1.25rem; background: var(--stein); }
.tipp-teaser__nr { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: var(--gold); color: var(--ink); font: 400 var(--t-text)/1 var(--display); }
.tipp-teaser__schritte strong { display: block; font: 500 var(--t-text)/1.3 var(--text); }
.tipp-teaser__schritte li div > span { display: block; font-size: var(--t-klein); line-height: 1.4; color: var(--ink-2); }
.tipp-betrag { margin: 0; font: 300 clamp(4rem, 2rem + 7vw, 7rem)/1 var(--display); color: var(--gold-text); letter-spacing: -0.02em; }
.tipp-ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 56rem) { .tipp-ablauf { grid-template-columns: repeat(3, 1fr); } }
.tipp-ablauf li { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--stein); }
.tipp-ablauf__nr { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--gold); color: var(--ink); font: 400 var(--t-lead)/1 var(--display); }
.tipp-ablauf h3 { font-size: var(--t-lead); margin-bottom: .5rem; }
.tipp-ablauf p { margin: 0; }
.formular__gruppe { border: 0; margin: 0 0 1.75rem; padding: 0; min-inline-size: 0; display: grid; gap: 1.25rem; }
.formular__gruppe legend { padding: 0; margin-bottom: 1rem; font: 400 var(--t-lead)/1.3 var(--display); color: var(--ink); }

/* ---------- Kundenbewertungen ---------- */
.stimmen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .stimmen { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); } }
.stimme { margin: 0; display: grid; gap: 1rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--weiss); }
.abschnitt:not(.abschnitt--stein) .stimme { background: var(--stein); }
.stimme blockquote { margin: 0; font: 400 var(--t-text)/1.65 var(--text); color: var(--ink); white-space: pre-line; }
.stimme figcaption { font-size: var(--t-klein); color: var(--ink-2); }
.stimme figcaption strong { display: block; font: 500 var(--t-text)/1.4 var(--text); color: var(--ink); }
.sterne { display: inline-flex; gap: .1rem; color: var(--gold); font-size: 1.15rem; line-height: 1; letter-spacing: .05em; }
.sterne .leer { color: var(--linie); }
.stimmen-schnitt { display: inline-flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.stimmen-schnitt strong { font: 400 var(--t-h3)/1 var(--display); color: var(--ink); }
.stimmen-leer h3 { margin-bottom: .75rem; }
.stimmen-leer .aktionen { margin-top: 1.5rem; }
.sterne-wahl { border: 0; margin: 0 0 1.25rem; padding: 0; }
.sterne-wahl legend { padding: 0; margin-bottom: .5rem; font: 500 var(--t-klein)/1.3 var(--text); color: var(--ink); }
.sterne-wahl__reihe { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.sterne-wahl__reihe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sterne-wahl__reihe label { width: 2.75rem; height: 2.75rem; cursor: pointer; background: center / 2rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z' fill='none' stroke='%238C857B' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sterne-wahl__reihe input:checked ~ label, .sterne-wahl__reihe label:hover, .sterne-wahl__reihe label:hover ~ label { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z' fill='%23A8895A' stroke='%23A8895A' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sterne-wahl__reihe input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }
.sterne-wahl[aria-invalid="true"] .sterne-wahl__reihe { outline: 1px solid var(--fehler); outline-offset: 4px; }
.formular-karte > h2 { font-size: var(--t-h3); line-height: 1.25; }

/* Bewertungsergebnis: Spanne, Herleitung, nächster Schritt */
.wert-ergebnis__kopf { padding: clamp(1.5rem, 3.5vw, 2.5rem); background: var(--stein); }
.wert-ergebnis__bis { font-size: .5em; color: var(--ink-2); vertical-align: .35em; letter-spacing: 0; }
.wert-ergebnis__hinweis { margin: .9rem 0 0; color: var(--ink-2); }
.wert-ergebnis__rechnung { margin-top: 1.5rem; }
.wert-ergebnis__rechnung summary { cursor: pointer; color: var(--gold-text); font: 500 var(--t-klein)/1.4 var(--text); }
.wert-ergebnis__rechnung ul { margin: 1rem 0 0; padding-left: 1.1rem; display: grid; gap: .6rem; font-size: var(--t-klein); line-height: 1.55; }
.wert-ergebnis__rechnung p { margin: 1rem 0 0; font-size: var(--t-klein); color: var(--ink-2); }
.wert-ergebnis__weiter { padding: clamp(1.5rem, 3.5vw, 2.5rem); background: var(--dunkel); color: var(--bg); }
.wert-ergebnis__weiter h3 { color: var(--bg); margin-bottom: .75rem; }
.wert-ergebnis__weiter p { margin: 0; color: rgba(248, 246, 242, .86); }
.wert-ergebnis__weiter p[hidden] { display: none; }
.wert-ergebnis__weiter .aktionen { margin-top: 1.5rem; }

/* Bewertung: Online-Ersteinschätzung und persönliche Marktanalyse im Vergleich */
.wege-vergleich { display: grid; gap: 1rem; }
@media (min-width: 56rem) { .wege-vergleich { grid-template-columns: 1fr 1fr; } }
.wege-vergleich__karte { display: grid; align-content: start; gap: 1.75rem; padding: clamp(1.75rem, 4vw, 3rem); background: var(--weiss); }
.wege-vergleich__karte--dunkel { background: var(--dunkel); color: var(--bg); }
.wege-vergleich__karte--dunkel h3 { color: var(--bg); }
.wege-vergleich__karte dl { margin: 0; display: grid; gap: 1rem; }
.wege-vergleich__karte dl div { display: grid; gap: .25rem; }
@media (min-width: 30rem) { .wege-vergleich__karte dl div { grid-template-columns: 7rem 1fr; gap: 1rem; } }
.wege-vergleich__karte dt { font: 500 var(--t-klein)/1.6 var(--text); color: var(--gold-text); }
.wege-vergleich__karte--dunkel dt { color: var(--gold-hell); }
.wege-vergleich__karte dd { margin: 0; }
.wege-vergleich__karte > .knopf { justify-self: start; }
.wege-vergleich__karte--dunkel .mehr { color: var(--gold-hell); }

/* Weitere Leistungen (Querverweise am Seitenende) */
.weitere { padding-block: clamp(3rem, 7vw, 5.5rem); }
.weitere__titel { font-size: var(--t-h3); margin-bottom: 1.5rem; }
.weitere__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 48rem) { .weitere__liste { grid-template-columns: repeat(3, 1fr); } }
.weitere__liste a { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; height: 100%; padding: 1.25rem 1.5rem; background: var(--stein); color: var(--ink); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.weitere__liste strong { font: 500 var(--t-text)/1.35 var(--text); }
.weitere__liste span { grid-column: 1; font-size: var(--t-klein); color: var(--ink-2); }
.weitere__liste svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--gold-text); }
@media (hover: hover) and (pointer: fine) {
  .weitere__liste a:hover { background: var(--dunkel); color: var(--bg); }
  .weitere__liste a:hover span { color: rgba(248, 246, 242, .82); }
  .weitere__liste a:hover svg { color: var(--gold-hell); }
}
.abschnitt:not(.abschnitt--stein) .stimmen-leer { background: var(--stein); }

/* Porträt-Kopfbereiche (Über uns, Tippgeber) auf Handy und Tablet: Foto oben, Text darunter auf dunkler Fläche –
   weißer Text auf dem weißen Poloshirt war schlecht lesbar */
@media (max-width: 63.99rem) {
  .seitenkopf--portrait { min-height: 0; }
  .seitenkopf--portrait .seitenkopf__bild { position: relative; inset: auto; height: clamp(17rem, 78vw, 30rem); }
  .seitenkopf--portrait .seitenkopf__bild img { object-position: 50% 18%; }
  .seitenkopf--rechts .seitenkopf__bild img { object-position: 28% 15%; }
  .seitenkopf--portrait .seitenkopf__bild::after { background: linear-gradient(0deg, var(--dunkel) 0%, rgba(31, 30, 28, 0) 32%); }
  .seitenkopf--portrait .seitenkopf__inhalt { padding-top: 1rem; }
}