/* ============================================================
   ImmoSphere – Designsystem
   Farben:  Tinte #14181F · Papier #F6F4EF · Champagner #B49A6A
            Stein #7C7668 · Linie #E3DED4
   Schrift: Marcellus (Display) · Hanken Grotesk (Text)
   ============================================================ */

:root {
  --ink: #14181f;
  --ink-soft: #232a34;
  --paper: #f6f4ef;
  --white: #fffdf9;
  --champagne: #b49a6a;
  --champagne-deep: #96794a;
  --stone: #7c7668;
  --line: #e3ded4;
  --line-dark: rgba(180, 154, 106, 0.35);

  --display: "Marcellus", serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;

  --max: 1200px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--body);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; }
h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); letter-spacing: 0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne-deep);
  font-weight: 600;
}
.eyebrow.light { color: var(--champagne); }
.eyebrow a:hover { color: var(--champagne); }

.text-link {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--champagne);
  padding-bottom: 2px;
  transition: color 0.2s;
}
.text-link:hover { color: var(--champagne-deep); }

/* ---------- Kopfzeile ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--pad);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand { display: flex; align-items: center; gap: 0.65rem; }

.brand-mark { flex: none; width: 38px; height: 38px; object-fit: contain; }
.footer-brand .brand-mark { width: 46px; height: 46px; }

.brand-name {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
}
.brand-name em { font-style: normal; color: var(--champagne-deep); }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.site-nav a {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.site-nav a:hover, .site-nav a.active { border-color: var(--champagne); }
.site-nav .nav-cta {
  border: 1px solid var(--ink);
  padding: 0.55rem 1.1rem;
  transition: background 0.2s, color 0.2s;
}
.site-nav .nav-cta:hover { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink); }

/* Zähler-Badge am "Off-Market-Angebote"-Nav-Link (siehe offMarketCount in
   server.js) - eigene, nicht-uppercase/nicht-letterspaced Schrift, da sie
   sonst dieselben (für eine reine Zahl unpassenden) Textstile wie der
   umgebende Nav-Link erben würde. */
.nav-badge {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--champagne);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: 0.1em;
}

/* Login-Status auf einen Blick: "Mein Konto" bekommt einen kleinen Avatar mit
   dem ersten Buchstaben der E-Mail-Adresse (der Name liegt im JWT-Payload
   nicht vor, siehe optionalAuth in auth.js - eine zusätzliche DB-Abfrage nur
   für dieses Icon auf jeder Seite wäre unverhältnismäßig) - macht sichtbar
   "das bin ich", ohne dass der Link selbst optisch schwerer wirkt als die
   übrigen Nav-Punkte (siehe Nutzer-Rückmeldung: "MEIN KONTO ist immer
   neutral"). Ausgeloggt bleibt es beim schlichten Textlink "Anmelden". */
.konto-link { display: inline-flex; align-items: center; gap: 0.5rem; }
.konto-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--champagne);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: uppercase;
  flex-shrink: 0;
}
.konto-link:hover .konto-avatar, .konto-link.active .konto-avatar { background: var(--champagne-deep); }

/* Sprachumschalter im Header (siehe i18n.js, DE/EN/FR/ES/IT/NL) - natives
   <select> statt einer Link-Liste (siehe main.js für den change-Handler),
   damit alle 6 Sprachen auch auf schmalen Bildschirmen ohne Umbruch Platz
   finden. Eigene, kleinere/nicht gesperrte Schrift statt der normalen
   Nav-Textstile, da Sprachnamen sonst unpassend groß/weit wirken würden. */
.lang-switch {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.35rem 1.6rem 0.35rem 0.6rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%2314181f' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}
.lang-switch:hover, .lang-switch:focus { border-color: var(--champagne); }
/* Der Pfeil ist ein statisches SVG (currentColor funktioniert nicht
   zuverlässig in background-image-Data-URIs) - im dunklen Mitternacht-Theme
   (--ink wird dort hell) daher eine helle statt dunkle Variante. */
:root[data-theme="mitternacht"] .lang-switch {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23f0ece3' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Hero ---------- */

.hero {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(180,154,106,0.22), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-soft) 100%);
  color: var(--paper);
  padding: clamp(1rem, 3vw, 2rem);
}

.hero-frame {
  border: 1px solid var(--line-dark);
  padding: clamp(3rem, 8vw, 6.5rem) var(--pad);
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
  text-align: center;
}

.hero h1 { margin: 1.2rem 0 1rem; }
.hero-sub {
  max-width: 34rem;
  margin: 0 auto 2.6rem;
  color: rgba(246, 244, 239, 0.75);
  font-weight: 300;
  font-size: 1.05rem;
}

/* Suche */
.search { max-width: 46rem; margin: 0 auto; }

.search-seg {
  display: inline-flex;
  border: 1px solid var(--line-dark);
  margin-bottom: 1rem;
}
.search-seg label { position: relative; }
.search-seg input { position: absolute; opacity: 0; inset: 0; }
.search-seg span {
  display: block;
  padding: 0.5rem 1.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  color: rgba(246,244,239,0.7);
  transition: background 0.2s, color 0.2s;
}
.search-seg input:checked + span { background: var(--champagne); color: var(--ink); }
.search-seg input:focus-visible + span { outline: 2px solid var(--champagne); outline-offset: 2px; }

.search-fields {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--paper);
}
.search-fields input,
.search-fields select {
  font: inherit;
  border: none;
  border-right: 1px solid var(--line);
  background: transparent;
  padding: 0.95rem 1.1rem;
  color: var(--ink);
  min-width: 0;
}
.search-fields input:focus, .search-fields select:focus { outline: 2px solid var(--champagne); outline-offset: -2px; }
.search-fields button {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0 1.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.2s;
}
.search-fields button:hover { background: var(--champagne-deep); }

.ki-suche { max-width: 46rem; margin: 0 auto 1.25rem; }
.ki-suche-row {
  display: flex;
  background: var(--paper);
  border: 1px solid var(--line-dark);
}
.ki-suche-row input {
  flex: 1;
  font: inherit;
  border: none;
  background: transparent;
  padding: 0.95rem 1.1rem;
  color: var(--ink);
  min-width: 0;
}
.ki-suche-row input:focus { outline: 2px solid var(--champagne); outline-offset: -2px; }
.ki-suche-row input::placeholder { color: rgba(20,24,31,0.45); }
.ki-suche-mic, .ki-suche-row button[data-ki-suche-submit] {
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.ki-suche-mic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  background: var(--champagne-deep);
  color: var(--paper);
  border-left: 1px solid var(--line-dark);
}
.ki-suche-mic:hover { background: var(--champagne); color: var(--ink); }
.ki-suche-mic.ist-aktiv { background: #a3453a; animation: ki-suche-puls 1.4s ease-in-out infinite; }
.ki-suche-mic[disabled] { opacity: 0.4; cursor: not-allowed; animation: none; }
.ki-suche-row button[data-ki-suche-submit] {
  background: var(--ink);
  color: var(--paper);
  padding: 0 1.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
}
.ki-suche-row button[data-ki-suche-submit]:hover { background: var(--champagne-deep); }
.ki-suche-status { margin-top: 0.5rem; font-size: 0.85rem; color: var(--champagne-deep); text-align: center; }
.ki-suche-status.fehler { color: #a3453a; }
@keyframes ki-suche-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(163,69,58,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(163,69,58,0); }
}

/* ---------- Abschnitte ---------- */

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--pad);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}
.section-head h2 { margin-top: 0.35rem; }

/* ---------- Konto-Tabs ---------- */

.konto-tabs {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
}
.konto-tab {
  font: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.9rem 0.2rem;
  margin-right: 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.konto-tab:hover { color: var(--ink); }
.konto-tab.ist-aktiv { color: var(--ink); border-bottom-color: var(--champagne-deep); font-weight: 600; }

/* ---------- Karten ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.card:hover {
  border-color: var(--champagne);
  box-shadow: 0 18px 40px -22px rgba(20, 24, 31, 0.35);
  transform: translateY(-3px);
}

.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(150deg, var(--ink-soft), var(--ink));
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.card:hover .card-media img { transform: scale(1.05); }
.card-media.noimg::after {
  content: "ImmoSphere";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--champagne);
}

/* Mini-Karussell auf der Objekt-Karte (siehe card-carousel.js, Nutzer-
   Rückmeldung) - Pfeile statt einer Wisch-Geste, da die Karte selbst in
   einem scrollbaren Grid liegt (ein horizontaler Wisch würde sonst mit dem
   Grid-/Seiten-Scroll kollidieren). Pfeile bewusst erst bei :hover
   sichtbar (Desktop) - auf Touch-Geräten ohne Hover bleiben sie über
   opacity/pointer-events dauerhaft leicht sichtbar (siehe Media Query
   unten), da es dort keinen Hover-Zustand gibt, der sie sonst einblenden
   könnte. */
.card-carousel-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: rgba(20, 24, 31, 0.55);
  color: var(--white);
  font-size: 1.2rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
.card-media:hover .card-carousel-pfeil { opacity: 1; }
.card-carousel-pfeil:hover { background: rgba(20, 24, 31, 0.85); }
.card-carousel-zurueck { left: 0.5rem; }
.card-carousel-weiter { right: 0.5rem; }

.card-carousel-punkte {
  position: absolute;
  bottom: 0.6rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}
.card-carousel-punkt {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.card-carousel-punkt.ist-aktiv { background: var(--white); transform: scale(1.25); }

@media (hover: none) {
  .card-carousel-pfeil { opacity: 0.75; }
}

.card-badge {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  background: rgba(20, 24, 31, 0.82);
  color: var(--champagne);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
}

.card-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.card-title { font-size: 1.18rem; }
.card-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0;
  color: var(--stone);
  font-size: 0.85rem;
}
.card-meta span + span::before { content: "·"; margin: 0 0.5rem; color: var(--champagne); }
.card-price {
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--champagne-deep);
}

/* ---------- Startseite: Split ---------- */

.split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
}
.split-text h2 { margin: 0.4rem 0 1rem; }
.split-text > p { max-width: 32rem; color: var(--ink-soft); }

.facts-inline { margin-top: 2rem; display: grid; gap: 1.1rem; }
.facts-inline dt {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--champagne-deep); font-weight: 600;
}
.facts-inline dd { color: var(--ink-soft); }

.cities-title {
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-family: var(--body); font-weight: 600; color: var(--stone);
  margin-bottom: 0.8rem;
}
.cities li { list-style: none; }
.cities a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.15rem;
  transition: color 0.2s, padding-left 0.2s;
}
.cities a:hover { color: var(--champagne-deep); padding-left: 0.6rem; }
.cities .count { font-family: var(--body); font-size: 0.8rem; color: var(--stone); }

/* ---------- Listenseite ---------- */

.page-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad) 1rem;
}
.page-head h1 { margin-top: 0.5rem; }

/* Kompakter für /objekt-anbieten - die große Hero-Schrift war dort auf
   Notebook-Bildschirmen fast bildschirmfüllend, obwohl die Seite ein
   mehrschrittiges Formular ist und keine Marketing-Landingpage (siehe
   Nutzer-Rückmeldung). Eigene Modifier-Klasse statt die globale
   .page-head/h1-Größe zu ändern, die auf vielen anderen Seiten (Konto,
   Preise, Registrieren, ...) unverändert bleiben soll. */
.page-head-kompakt { padding: clamp(1.3rem, 2.5vw, 1.8rem) var(--pad) 0.6rem; }
.page-head-kompakt h1 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 0.3rem; }
.page-head-kompakt .lead { margin-top: 0.4rem; max-width: 42rem; }

.konto-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
}
.konto-toolbar form { margin: 0; }
.konto-toolbar-btn {
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.konto-toolbar-btn:hover { border-color: var(--champagne-deep); color: var(--champagne-deep); }
.konto-toolbar-btn-danger { color: #a3453a; border-color: rgba(163, 69, 58, 0.35); }
.konto-toolbar-btn-danger:hover { border-color: #a3453a; background: rgba(163, 69, 58, 0.06); }

.filterbar {
  max-width: var(--max);
  margin: 1.2rem auto 0;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 0.9fr 1.2fr 1fr 0.9fr 0.9fr auto;
  gap: 0.6rem;
}
.filterbar input, .filterbar select {
  font: inherit;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  background: var(--white);
  min-width: 0;
}
.filterbar input:focus, .filterbar select:focus { outline: 2px solid var(--champagne); outline-offset: -1px; }
.filterbar button {
  background: var(--ink); color: var(--paper); border: none;
  padding: 0 1.5rem;
  letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; font-weight: 600;
  transition: background 0.2s;
}
.filterbar button:hover { background: var(--champagne-deep); }

.result-count { color: var(--stone); font-size: 0.9rem; margin-bottom: 1.4rem; }

.empty { text-align: center; padding: 3rem 0; }
.empty h2 { margin-bottom: 0.6rem; }
.empty a { border-bottom: 1px solid var(--champagne); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 2.5rem;
  font-size: 0.9rem;
}
.pagination a {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}
.pagination a:hover { border-color: var(--champagne); color: var(--champagne-deep); }
.pagination-status { color: var(--stone); }

/* ---------- Detailseite ---------- */

.detail-price {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--champagne-deep);
  margin-top: 0.8rem;
}

/* ---------- Mietpreis-Check ---------- */

.mietpreis-check {
  max-width: 420px;
  margin-top: 1.4rem;
  padding: 1.3rem 1.4rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.mietpreis-check-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--ink);
}
.mietpreis-check-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem;
  color: var(--stone);
  cursor: help;
}
.mietpreis-check h3 { margin: 0.9rem 0 0.4rem; font-size: 1.05rem; }
.mietpreis-check-hint { color: var(--stone); font-size: 0.85rem; margin: 0 0 1.2rem; }

.mietpreis-check-bar-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
}
.mietpreis-check-bar-fill {
  position: absolute; top: 0; bottom: 0; left: 12%; right: 12%;
  border-radius: 999px;
  background: #17b897;
}
.mietpreis-check-marker {
  position: absolute; top: 50%;
  width: 2px; height: 22px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.mietpreis-check-bar-labels {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-top: 0.6rem;
  font-weight: 700; font-size: 0.95rem;
}
.mietpreis-check-bar-avg { text-align: center; }
.mietpreis-check-bar-avg small {
  display: block; margin-top: 0.15rem;
  font-weight: 400; font-size: 0.72rem; color: var(--stone);
}

.mietpreis-check-legende {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 1.1rem 0 0.9rem;
  font-size: 0.85rem;
}
.mietpreis-check-dot {
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: #17b897;
}

.mietpreis-check-details {
  padding: 0.9rem 1rem;
  background: var(--paper);
  border-radius: 12px;
}
.mietpreis-check-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.8rem;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--ink);
}
.mietpreis-check-row + .mietpreis-check-row { border-top: 1px solid var(--line); }
.mietpreis-check-row span:first-child { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--stone); }
.mietpreis-check-row span:last-child { text-align: right; }
.mietpreis-check-row-preis { border-top: 1px solid var(--line-dark) !important; margin-top: 0.2rem; padding-top: 0.7rem; }
.mietpreis-check-row-preis span { font-weight: 700; color: var(--ink); }

.mietpreis-check-toggle {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 1rem;
  background: none; border: none; padding: 0;
  font: inherit; font-weight: 600; font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}
.mietpreis-check-toggle:hover { color: var(--champagne-deep); }

.gallery {
  max-width: var(--max);
  margin: 1.8rem auto 0;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
.gallery-item { position: relative; overflow: hidden; background: var(--ink-soft); aspect-ratio: 4 / 3; }
.gallery-item.main { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery.single { grid-template-columns: 1fr; }
.gallery.single .gallery-item.main { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 8; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item.noimg { display: grid; place-items: center; }
.gallery-item.noimg::after {
  content: "ImmoSphere";
  font-family: var(--display); letter-spacing: 0.3em; text-transform: uppercase;
  font-size: 0.8rem; color: var(--champagne);
}
/* Bilder (nicht der Vorher/Nachher-Regler, siehe .compare-slider) öffnen per
   Klick den Vollbild-Viewer (siehe galerie-viewer.js) - eigener Cursor als
   Hinweis, dass ein Klick etwas auslöst. */
.gallery-item > img { cursor: zoom-in; }

/* Vorher/Nachher-Regler-Bild: ein Klick steuert den Regler statt den
   Vollbild-Viewer zu öffnen (siehe galerie-viewer.js) - stattdessen diese
   zwei kleinen Buttons unten in den Ecken, außerhalb des Drag-Bereichs des
   Reglers: rechts öffnet das Original (passend zur "Original"-Beschriftung
   oben rechts), links den KI-Einrichtungsvorschlag (passend zur Beschriftung
   oben links). */
.gallery-expand {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: rgba(20, 24, 31, 0.62);
  color: #f6f4ef;
  font-size: 1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s;
}
.gallery-expand:hover { background: rgba(20, 24, 31, 0.85); }
.gallery-expand-links { right: auto; left: 0.6rem; }

/* ---------- Bildergalerie-Vollbild-Viewer (Lightbox, siehe
   galerie-viewer.js) ---------- */
/* Bewusst feste, dunkle Farben statt Theme-Variablen (--ink/--paper u. a.
   drehen im Mitternacht-Theme ihre Rolle um, siehe .site-footer weiter
   unten) - ein Foto-Viewer soll unabhängig vom gewählten Theme immer auf
   einem dunklen Hintergrund freistehen. */
.galerie-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(8, 10, 14, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
}
.galerie-overlay[hidden] { display: none; }
.galerie-slider {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.galerie-slider::-webkit-scrollbar { display: none; }
.galerie-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 4rem 5rem 6.5rem;
}
.galerie-slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Helle Kreis-Buttons statt dunkel-auf-dunkel - auf dem fast-schwarzen
   Overlay-Hintergrund (siehe .galerie-overlay oben) gibt das den besten
   Kontrast, bewusst feste Farben aus demselben Grund wie der Overlay-
   Hintergrund selbst (siehe Kommentar dort). */
.galerie-schliessen,
.galerie-nav {
  position: absolute;
  background: rgba(246, 244, 239, 0.92);
  border: none;
  color: #14181f;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  transition: background 0.2s, transform 0.15s;
}
.galerie-schliessen:hover { background: #fffdf9; transform: scale(1.08); }
.galerie-schliessen {
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.5rem;
  line-height: 1;
  z-index: 1;
}
.galerie-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3.8rem;
  height: 3.8rem;
  font-size: 2rem;
  font-weight: 700;
}
.galerie-nav:hover { background: #fffdf9; transform: translateY(-50%) scale(1.08); }
.galerie-prev { left: 1.2rem; }
.galerie-next { right: 1.2rem; }
.galerie-nav[hidden] { display: none; }
.galerie-zaehler {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.55);
  color: #f6f4ef;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
/* Thumbnail-Streifen unten im Viewer - zusätzlich zu Pfeilen/Wischen/
   Tastatur ein direktes Anspringen eines beliebigen Bildes. */
.galerie-thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  overflow-x: auto;
  padding: 1rem 1rem 1.2rem;
  background: linear-gradient(to top, rgba(8, 10, 14, 0.85), transparent);
  scrollbar-width: none;
}
.galerie-thumbs::-webkit-scrollbar { display: none; }
.galerie-thumbs[hidden] { display: none; }
.galerie-thumb {
  flex: 0 0 auto;
  width: 3.6rem;
  height: 2.7rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, border-color 0.2s;
}
.galerie-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-thumb:hover { opacity: 0.8; }
.galerie-thumb.ist-aktiv { opacity: 1; border-color: var(--champagne); }
@media (max-width: 700px) {
  .galerie-slide { padding: 1.2rem 3.6rem 5.8rem; }
  .galerie-nav { width: 3rem; height: 3rem; font-size: 1.6rem; }
  .galerie-prev { left: 0.4rem; }
  .galerie-next { right: 0.4rem; }
  .galerie-thumb { width: 2.6rem; height: 2rem; }
}

/* ---------- Vorher/Nachher-Regler (KI-Einrichtungsvorschlag) ---------- */

.compare-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  --compare-pos: 0%;
}
.compare-base { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare-overlay {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
}
.compare-overlay img { width: 100%; height: 100%; object-fit: cover; display: block; }

.compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 0%;
  width: 2px;
  background: var(--paper);
  transform: translateX(-1px);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(20, 24, 31, 0.35);
}
.compare-handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--champagne);
  box-shadow: 0 4px 14px rgba(20, 24, 31, 0.4);
}
.compare-handle::before {
  content: "⟷";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  color: var(--champagne-deep);
  z-index: 1;
}

.compare-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
}
.compare-range::-webkit-slider-thumb { appearance: none; width: 1px; height: 1px; }
.compare-range::-moz-range-thumb { width: 1px; height: 1px; border: none; }

.compare-badge {
  position: absolute;
  top: 0.9rem;
  background: rgba(20, 24, 31, 0.82);
  color: var(--champagne);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  pointer-events: none;
  z-index: 1;
}
.compare-badge-vorschlag { left: 0.9rem; }
.compare-badge-original { right: 0.9rem; }

.detail-columns {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.detail-main h2 { margin: 2rem 0 0.9rem; }
.detail-main h2:first-child { margin-top: 0; }
.description { color: var(--ink-soft); max-width: 40rem; }

.features { list-style: none; columns: 2; gap: 2rem; }
.features li {
  break-inside: avoid;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.features li::before { content: "—"; color: var(--champagne); margin-right: 0.6rem; }

.detail-map { height: clamp(280px, 32vw, 380px); width: 100%; border: 1px solid var(--line); }

.facts { border: 1px solid var(--line); background: var(--white); }
.facts > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.facts > div:last-child { border-bottom: none; }
.facts dt { color: var(--stone); font-size: 0.88rem; }
.facts dd { font-weight: 600; text-align: right; }

.contact-card {
  margin-top: 1.5rem;
  background: var(--ink);
  color: var(--paper);
  padding: 1.6rem;
}
.contact-card h3 { color: var(--champagne); margin-bottom: 1rem; }
.contact-card label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246,244,239,0.65);
  margin-bottom: 0.9rem;
}
.contact-card input, .contact-card textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  font: inherit;
  padding: 0.65rem 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-dark);
  color: var(--paper);
  resize: vertical;
}
.contact-card input:focus, .contact-card textarea:focus { outline: 2px solid var(--champagne); outline-offset: -1px; }
.contact-card button {
  width: 100%;
  background: var(--champagne);
  color: var(--ink);
  border: none;
  padding: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 700;
  transition: background 0.2s;
}
.contact-card button:hover { background: var(--paper); }
.form-hint { font-size: 0.75rem; color: rgba(246,244,239,0.5); margin-top: 0.7rem; }

.kontakt-direkt-logo { max-width: 8rem; max-height: 3.5rem; object-fit: contain; margin-bottom: 0.6rem; }
.kontakt-direkt-name { font-weight: 600; margin-bottom: 0.6rem; }
.kontakt-direkt-liste { list-style: none; display: grid; gap: 0.5rem; }
.kontakt-direkt-liste a { color: var(--champagne); text-decoration: underline; }
.kontakt-direkt-liste a:hover { color: var(--paper); }
.notice.success { color: var(--champagne); }

/* ---------- Kartensuche ---------- */

.map-hint { color: var(--stone); margin-top: 0.8rem; max-width: 34rem; }

.map-wrap {
  max-width: var(--max);
  margin: 1.5rem auto 0;
  padding: 0 var(--pad) clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.map-panel { border: 1px solid var(--line); background: var(--white); }

.map-controls { padding: 0.9rem; border-bottom: 1px solid var(--line); display: grid; gap: 0.7rem; }
.map-controls-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.map-controls input[type="search"] {
  flex: 1; min-width: 180px;
  font: inherit; padding: 0.65rem 0.9rem;
  border: 1px solid var(--line); background: var(--paper);
}
.map-controls input[type="search"]:focus { outline: 2px solid var(--champagne); outline-offset: -1px; }
.map-controls button {
  background: var(--ink); color: var(--paper); border: none;
  padding: 0.65rem 1.1rem;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; font-weight: 600;
  transition: background 0.2s;
}
.map-controls button:hover { background: var(--champagne-deep); }
.map-controls #geo-locate { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.map-controls #geo-locate:hover { border-color: var(--champagne); color: var(--champagne-deep); }

.radius-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.85rem; color: var(--stone); flex: 1; min-width: 220px;
}
.radius-label output { font-weight: 600; color: var(--ink); min-width: 2.2ch; text-align: right; }
.radius-label input[type="range"] { flex: 1; accent-color: var(--champagne-deep); }

.map-controls select {
  font: inherit; padding: 0.6rem 0.8rem;
  border: 1px solid var(--line); background: var(--paper);
}

#map { height: clamp(380px, 55vh, 620px); width: 100%; }

/* Marker */
.pin-dot {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--champagne);
  border: 2px solid var(--ink);
  box-shadow: 0 2px 8px rgba(20, 24, 31, 0.4);
}
.pin.center .pin-ring {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--champagne-deep);
  background: rgba(180, 154, 106, 0.25);
}

/* Popup */
.leaflet-popup-content-wrapper { border-radius: 0; border: 1px solid var(--line); }
.leaflet-popup-content { margin: 0; }
.popup { display: block; width: 220px; color: var(--ink); }
.popup img { width: 100%; height: 110px; object-fit: cover; }
.popup .popup-eyebrow {
  display: block; padding: 0.6rem 0.8rem 0;
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--champagne-deep); font-weight: 600;
}
.popup strong {
  display: block; padding: 0.15rem 0.8rem 0;
  font-family: var(--display); font-weight: 400; font-size: 0.98rem; line-height: 1.25;
}
.popup .popup-price {
  display: block; padding: 0.35rem 0.8rem 0.7rem;
  font-family: var(--display); color: var(--champagne-deep);
}

.map-warning {
  margin-top: 0.5rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #a3453a;
  color: #a3453a;
  font-size: 0.85rem;
  background: rgba(163, 69, 58, 0.06);
}

/* Ergebnisliste */
.map-results { position: sticky; top: 90px; }
.map-list {
  display: grid; gap: 0.6rem;
  max-height: clamp(380px, 55vh, 620px);
  overflow-y: auto;
  padding-right: 0.2rem;
}
.map-item {
  display: grid; gap: 0.2rem;
  padding: 0.9rem 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 0.2s, transform 0.2s;
}
.map-item:hover { border-color: var(--champagne); transform: translateX(3px); }
.map-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.map-item-dist { font-size: 0.75rem; color: var(--stone); white-space: nowrap; }
.map-item strong { font-family: var(--display); font-weight: 400; font-size: 1.05rem; line-height: 1.25; }
.map-item-meta { font-size: 0.82rem; color: var(--stone); }
.map-item-price { font-family: var(--display); color: var(--champagne-deep); margin-top: 0.15rem; }

/* ---------- Rechtliches ---------- */

.legal-body { max-width: 44rem; }
.legal-body h2 { font-size: 1.15rem; margin: 1.8rem 0 0.4rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--ink-soft); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0 1.2rem;
  background: var(--white);
  font-size: 0.88rem;
}
.legal-table th, .legal-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.legal-table th {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--stone); font-weight: 600;
}
.legal-table td { color: var(--ink-soft); }
.legal-table-wrap { overflow-x: auto; }

.konto-tabelle-scroll {
  max-height: 24rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  margin-top: 1.2rem;
}
.konto-tabelle-scroll .legal-table { margin: 0; }
.konto-tabelle-scroll thead th { position: sticky; top: 0; background: var(--white); }
.konto-betrag-plus { color: #3a9d5d; font-weight: 600; }
.konto-betrag-minus { color: var(--ink); font-weight: 600; }

.legal-body .hint, .preise-body .hint {
  color: var(--stone);
  font-size: 0.85rem;
  margin-top: -0.6rem;
}

/* ---------- Preise ---------- */

.preise-body { max-width: 56rem; }
.preise-body h2 { font-size: 1.2rem; margin: 2.2rem 0 0.6rem; }
.preise-body h2:first-child { margin-top: 0; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.2rem;
  margin: 1rem 0 0.6rem;
}
/* Feste 2x2-Matrix für die 4 VIP-Tier-Karten (siehe /konto und
   /geheimer-markt, jetzt mit "signature" 4 statt 3 Karten) - 4 Karten in
   einer Reihe wirkten zu gequetscht (Nutzer-Rückmeldung), das normale
   auto-fit oben würde je nach Breite uneinheitlich auch mal 3+1 umbrechen. */
.pricing-grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) {
  .pricing-grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pricing-grid-4 { grid-template-columns: 1fr; }
}
.pricing-card {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1.5rem;
}
.pricing-card.is-highlight {
  border-color: var(--champagne-deep);
  box-shadow: 0 8px 24px rgba(180, 154, 106, 0.18);
}
.pricing-card h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}
.pricing-amount {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--champagne-deep);
  margin-bottom: 0.7rem;
}
.pricing-amount span { font-size: 0.85rem; color: var(--stone); font-family: var(--body); }
.pricing-card p:not(.pricing-amount):not(.pricing-card-badge) { color: var(--ink-soft); font-size: 0.9rem; }

/* Auswählbare Preiskarten (z. B. Gewerbekunden-/VIP-Abo in /konto) - dieselbe
   Optik wie die statischen Karten auf /preise, aber als Radio-Label. */
.pricing-card-select {
  display: block;
  cursor: pointer;
  position: relative;
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* .offer-form label (weiter unten) setzt Großbuchstaben/kleine, fette
   Schrift für normale Formularfeld-Labels UND gewinnt dort rein per
   CSS-Spezifität gegen ".pricing-card-select" allein (0,1,1 vs. 0,1,0) -
   hier fungiert das Label aber als Kartencontainer, nicht als Feld-Label,
   und muss diese sonst vererbten Eigenschaften zurücksetzen. Der
   ".offer-form"-Präfix ist nötig, damit dieser Reset tatsächlich gewinnt
   (0,2,0), nicht nur eine gut gemeinte, aber wirkungslose Deklaration. */
.offer-form .pricing-card-select {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--ink);
}
.pricing-card-select input[type="radio"] {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: auto;
  margin-top: 0;
}
.pricing-card-select:hover { border-color: var(--champagne-deep); }
.pricing-card-select:has(input:checked) {
  border-color: var(--champagne-deep);
  box-shadow: 0 8px 24px rgba(180, 154, 106, 0.18);
}
.pricing-card-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--champagne-deep);
  margin-bottom: 0.4rem;
}

/* Feature-Liste in einer VIP-Tier-Karte (siehe partials/vip-tier-karte.ejs) -
   dieselbe Textfarbe/-größe wie die Beschreibungs-<p> in .pricing-card oben. */
.vip-tier-features {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}
.vip-tier-features li { margin-bottom: 0.3rem; }

/* Gesperrte Geheimmarkt-Karte (siehe /geheimer-markt) - zeigt bewusst kein
   Foto/keine Adresse (siehe loadSecretMarketProperties() in server.js),
   nur einen Upgrade-Anreiz statt eines Links wie bei .card. */
.vip-locked-card { opacity: 0.75; }
.vip-locked-media {
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
}
.vip-locked-hinweis {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--champagne);
}
/* ---------- Formulare (Objekt anbieten / Admin) ---------- */

.lead { max-width: 40rem; color: var(--ink-soft); margin-top: 0.8rem; }

.notice-box {
  max-width: 44rem;
  margin: 0 0 2rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  background: var(--white);
}
.notice-box h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.notice-box ul { padding-left: 1.2rem; color: var(--ink-soft); }
.notice-box.success { border-color: var(--champagne); }
.notice-box.error { border-color: #a3453a; }
.notice-box.error h2 { color: #a3453a; }

.offer-form { max-width: 54rem; }
/* Genereller Schutz gegen die "[hidden] vs. author display:flex/grid/block"
   Kollision (mehrfach in dieser Datei einzeln gefixt, z. B. ".form-grid
   [hidden]"/".geg-hinweis[hidden]"/".offer-form label[hidden]" weiter unten -
   diese Regel deckt jedes künftige data-*-Toggle-Element in .offer-form ab,
   ohne dass jede neue Komponente einen eigenen [hidden]-Override braucht). */
.offer-form [hidden] { display: none !important; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.4rem;
}
.form-grid .span-2 { grid-column: 1 / -1; }
/* "display: grid" hat sonst gegenüber dem Browser-Standard für [hidden]
   Vorrang (gleiches Muster wie ".offer-form input[hidden]"/".geg-hinweis
   [hidden]" weiter unten) - betrifft hier vor allem die Wohngebäude-/Nicht-
   Wohngebäude-Feldblöcke im Energieausweis, die selbst die Klasse "form-grid"
   tragen (verschachteltes Grid) und per data-energieausweis-wohngebaeude/
   -nicht-wohngebaeude in energieausweis.js über "hidden" ein-/ausgeblendet
   werden - ohne diese Regel blieben beide Blöcke immer sichtbar. */
.form-grid[hidden] { display: none; }

.offer-form label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 600;
}
/* Gleiches Muster wie ".form-grid[hidden]" oben - betrifft das per
   data-energieausweis-primaer-feld in energieausweis.js ein-/ausgeblendete
   Primärenergiebedarf-Label (nur bei Wohngebäude + Bedarfsausweis
   sichtbar). */
.offer-form label[hidden] { display: none; }
.offer-form label.checkbox, .offer-form label.radio {
  display: flex; align-items: center; gap: 0.6rem;
  text-transform: none; letter-spacing: normal; font-weight: 500;
  margin-top: 1.2rem;
}
.offer-form label.checkbox input, .offer-form label.radio input { width: auto; }
.zahlungsart-fields { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.zahlungsart-fields legend { margin-bottom: 0; }
.zahlungsart-fields label.radio { margin-top: 0.6rem; }
.offer-form .hint {
  text-transform: none; letter-spacing: normal; font-weight: 400;
  color: var(--stone); font-size: 0.78rem;
}
.offer-form input, .offer-form select, .offer-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  font: inherit;
  padding: 0.65rem 0.8rem;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  resize: vertical;
}
.offer-form input:focus, .offer-form select:focus, .offer-form textarea:focus {
  outline: 2px solid var(--champagne); outline-offset: -1px;
}
/* ".offer-form input { display: block }" oben hat höhere Spezifität als der
   Browser-Standard für [hidden] (der nur "display: none" ohne Klasse ist)
   und würde das sonst wieder sichtbar machen - betrifft die versteckten
   Datei-Inputs der Bilder-/Grundrisse-/Dokumente-/Video-Upload-Karten. */
.offer-form input[hidden] { display: none; }

/* ---------- Energieausweis (GEG) ---------- */

.geg-hinweis {
  display: flex;
  gap: 0.9rem;
  background: #eaf2fb;
  border: 1px solid #b8d4ee;
  padding: 1.1rem 1.3rem;
  margin: 1rem 0;
}
/* Wie bei ".offer-form input[hidden]" oben - "display: flex" hat gegenüber
   dem Browser-Standard für [hidden] Vorrang und würde die Box sonst wieder
   sichtbar machen, egal was das data-energieausweis-hinweis-Toggle in
   energieausweis.js setzt. */
.geg-hinweis[hidden] { display: none; }
.geg-hinweis-icon {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #2f6fb3;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  font-style: italic;
}
.geg-hinweis-titel {
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--ink);
  text-transform: none;
}
.geg-hinweis p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.geg-ergebnisse-titel {
  font-family: var(--display);
  font-size: 1.15rem;
  margin: 0.4rem 0 1rem;
  text-transform: none;
}

.offer-form .input-mit-einheit {
  display: flex;
  align-items: center;
  margin-top: 0.4rem;
  border: 1px solid var(--line);
  background: var(--white);
}
.offer-form .input-mit-einheit input {
  border: none;
  background: transparent;
  width: auto;
  flex: 1;
  margin-top: 0;
}
.input-mit-einheit span {
  padding: 0 0.8rem;
  color: var(--stone);
  font-size: 0.82rem;
  white-space: nowrap;
}

.energieklassen-leiste-feld { margin-top: 0.4rem; }
.energieklassen-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.energieklassen-leiste {
  display: flex;
  border: 1px solid var(--line);
}
/* ".offer-form .energieklasse-box" statt nur ".energieklasse-box" - braucht
   mehr Spezifität als ".offer-form label" (display: block, kleinere Schrift,
   Versalien), sonst gewinnt dessen "display: block" gegen das "display: flex"
   hier und die Buchstaben werden nicht mehr zentriert. */
.offer-form .energieklasse-box {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  position: relative;
  text-transform: none;
  letter-spacing: normal;
}
.energieklasse-box + .energieklasse-box { border-left: 1px solid rgba(255, 255, 255, 0.5); }
.energieklasse-box input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.energieklasse-box:has(input:checked) { outline: 3px solid var(--ink); outline-offset: -3px; z-index: 1; }
.offer-form .energieklasse-Aplus { background: #00a651; color: var(--white); }
.offer-form .energieklasse-A { background: #4cb848; color: var(--white); }
.offer-form .energieklasse-B { background: #8dc63f; }
.offer-form .energieklasse-C { background: #c8d92c; }
.offer-form .energieklasse-D { background: #fff200; }
.offer-form .energieklasse-E { background: #fbb040; }
.offer-form .energieklasse-F { background: #f7941e; }
.offer-form .energieklasse-G { background: #ed1c24; color: var(--white); }
.offer-form .energieklasse-H { background: #be1622; color: var(--white); }
.energieklassen-kosten {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--stone);
  margin-top: 0.4rem;
}

.offer-form .adresse-autocomplete-field { position: relative; }
.adresse-suggest-list {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 20;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(20, 24, 31, 0.12);
  max-height: 240px;
  overflow-y: auto;
}
.adresse-suggest-list li {
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.adresse-suggest-list li:last-child { border-bottom: none; }
.adresse-suggest-list li:hover { background: var(--paper); }

.offer-form fieldset {
  border: 1px solid var(--line);
  padding: 1.1rem 1.3rem 1.3rem;
  margin: 0.4rem 0;
}
.offer-form fieldset .form-grid { margin-top: 0.4rem; }
.offer-form legend {
  font-family: var(--display);
  font-size: 1rem;
  padding: 0 0.5rem;
  color: var(--champagne-deep);
}

.geo-felder { margin-top: 0.6rem; }
.geo-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.geo-picker-toggle {
  background: none;
  border: 1px solid var(--champagne-deep);
  color: var(--champagne-deep);
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.geo-picker-toggle:hover { background: rgba(180, 154, 106, 0.1); }
.geo-picker-toggle:disabled { opacity: 0.6; cursor: default; }
.geo-hint {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--stone);
}
.geo-status {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--stone);
}
.geo-status.geo-status-error { color: #a3453a; }
.geo-picker-map {
  margin-top: 0.8rem;
  height: 320px;
  width: 100%;
  border: 1px solid var(--line);
}

.beschreibung-feld { position: relative; }
.ki-beschreibung-button {
  margin-top: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--champagne);
  color: var(--champagne-deep);
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.ki-beschreibung-button:hover:not(:disabled) { background: var(--champagne); color: var(--ink); }
.ki-beschreibung-button:disabled { opacity: 0.6; cursor: default; }
.ki-beschreibung-status {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--stone);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.ki-beschreibung-status.fehler { color: #a3453a; }
.ki-beschreibung-disclaimer {
  margin-top: 0.4rem;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--stone);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.ki-beschreibung-disclaimer a { color: var(--stone); text-decoration: underline; }

.cta-submit {
  margin-top: 1.6rem;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0.9rem 1.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.2s;
}
.cta-submit:hover { background: var(--champagne-deep); }
.cta-submit:disabled { background: var(--ink-soft); color: var(--stone); cursor: not-allowed; }

/* ---------- Schritt-Assistent (öffentliche Objekt-Einreichung) ---------- */

.wizard-layout {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
}
/* Der Assistent zeigt pro Schritt nur wenige Felder (z. B. Schritt 1: zwei
   Auswahlfelder + Titel) - die feste .offer-form-Breite (54rem, geteilt mit
   dem einseitigen Admin-Formular) lässt dann viel ungenutzten Platz neben
   dem Titel-Feld. Nur hier aufheben, damit das Formular die im Flex-Layout
   tatsächlich verfügbare Breite ausnutzt - das Admin-Formular bleibt bei
   54rem, da .wizard-layout dort nie vorkommt. */
.wizard-layout .offer-form {
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.wizard-sidebar {
  flex: 0 0 15rem;
  position: sticky;
  top: 1.5rem;
}
.wizard-sidebar-title {
  font-family: var(--display);
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
}
.wizard-steps { list-style: none; }
.wizard-steps li { position: relative; padding-bottom: 1.4rem; }
.wizard-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.6875rem;
  top: 1.6rem;
  bottom: -0.2rem;
  width: 1px;
  background: var(--line);
}
.wizard-steps li button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wizard-steps li button:disabled { cursor: default; }
.wizard-step-icon {
  flex: 0 0 1.375rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--white);
  position: relative;
}
.wizard-steps li.is-current .wizard-step-icon { background: var(--ink); border-color: var(--ink); }
.wizard-steps li.is-done .wizard-step-icon {
  background: #3a9d5d;
  border-color: #3a9d5d;
}
.wizard-steps li.is-done .wizard-step-icon::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.25rem;
  width: 0.3rem;
  height: 0.55rem;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
}
.wizard-step-label { font-size: 0.92rem; color: var(--stone); }
.wizard-steps li.is-done .wizard-step-label,
.wizard-steps li.is-current .wizard-step-label {
  color: var(--ink);
  font-weight: 600;
}

.wizard-progress {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--stone);
  margin-bottom: 1.2rem;
}

/* Angehefteter Hintergrund-Fortschritts-Wächter für ein laufendes
   KI-Rendering (siehe grundriss-editor.js, zeigeKiJobStatus()) - bleibt
   beim Scrollen sichtbar, während der Nutzer die übrigen Schritte des
   Assistenten ausfüllt (siehe Rückfrage zur Umsortierung von
   "Fotos/Dokumente"). top-Offset unter der ebenfalls angehefteten
   .site-header (siehe dort, position: sticky; top: 0), damit sich beide
   nicht überlagern. */
.ki-job-status {
  position: sticky;
  top: 5rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.ki-job-status-prozent { font-weight: 700; font-variant-numeric: tabular-nums; }

.wizard-hide { display: none !important; }

.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.6rem;
}
.wizard-nav-back {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 0.9rem 1.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 700;
}
.wizard-nav-back:hover { border-color: var(--champagne-deep); }
.wizard-nav-next { margin-top: 0; margin-left: auto; }

@media (max-width: 900px) {
  .wizard-layout { flex-direction: column; gap: 1.5rem; }
  .wizard-sidebar { position: static; flex: none; width: 100%; }
  .wizard-steps { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
  .wizard-steps li { padding-bottom: 0.6rem; }
  .wizard-steps li::before { display: none; }
  /* .site-header stapelt auf schmalen Bildschirmen (flex-direction: column,
     siehe dort) und wird dadurch höher - größerer Abstand, damit sich der
     Wächter nicht mit dem Header überlagert. */
  .ki-job-status { top: 8rem; flex-wrap: wrap; }
}

/* ---------- Bild-Upload & KI-Optimierung ---------- */

.bilder-upload { margin-top: 0.4rem; }

.bilder-drop {
  border: 1.5px dashed var(--line-dark);
  background: var(--white);
  padding: 1.6rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.bilder-drop p {
  text-transform: none; letter-spacing: normal; font-weight: 500;
  color: var(--stone); font-size: 0.9rem;
}
.bilder-drop:hover, .bilder-drop.drag { border-color: var(--champagne); background: rgba(180,154,106,0.06); }
.bilder-drop.ist-beschaeftigt { opacity: 0.6; pointer-events: none; }
.bilder-drop input[type="file"] { display: none; }

.bilder-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.bild-karte {
  border: 1px solid var(--line);
  background: var(--white);
  transition: opacity 0.2s;
}
.bild-karte.ist-beschaeftigt { opacity: 0.65; }
.bild-karte figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-soft); }
.bild-karte img { width: 100%; height: 100%; object-fit: cover; }

.bild-badge {
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  background: rgba(20, 24, 31, 0.82);
  color: var(--champagne);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
}
.bild-badge-titel { background: var(--champagne); color: var(--ink); }
.bild-badge + .bild-badge { top: 2.2rem; }

.bild-karte figure .dateien-entfernen {
  position: absolute;
  top: 0.4rem; right: 0.4rem;
  width: 1.8rem; height: 1.8rem;
  background: rgba(20, 24, 31, 0.72);
  color: var(--paper);
  border-radius: 50%;
}
.bild-karte figure .dateien-entfernen:hover { background: #a3453a; color: var(--paper); }

/* Herunterladen-Icon direkt links neben dem Entfernen-Icon (siehe
   bild-upload.js/grundriss-editor.js) - gleiche Größe/Position, eigene
   (nicht-rote) Hover-Farbe zur Unterscheidung von der Entfernen-Aktion. */
.bild-karte-herunterladen {
  position: absolute;
  top: 0.4rem; right: 2.4rem;
  width: 1.8rem; height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 31, 0.72);
  color: var(--paper);
  border-radius: 50%;
  transition: background 0.2s;
}
.bild-karte-herunterladen:hover { background: var(--champagne-deep); color: var(--paper); }

.bild-karte-bearbeiten {
  display: block;
  width: 100%;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 0.6rem;
  border: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.bild-karte-bearbeiten:hover { background: var(--champagne); color: var(--ink); }
.bild-karte-tag {
  padding: 0 0.7rem 0.6rem;
  font-size: 0.75rem;
  color: var(--stone);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}

.bild-status {
  padding: 0.4rem 0.7rem 0;
  font-size: 0.78rem;
  color: var(--champagne-deep);
  text-transform: none; letter-spacing: normal; font-weight: 500;
}
.bild-status.fehler { color: #a3453a; }

.bild-aktionen {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0.7rem;
}
.bild-aktionen button {
  flex: 1 1 auto;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: border-color 0.2s, color 0.2s;
}
.bild-aktionen button:hover { border-color: var(--champagne); color: var(--champagne-deep); }

/* Grundriss-KI-Funktionen als Bild-/Video-Kacheln statt reiner Text-Buttons
   (siehe grundriss-editor.js) - "3D-Visualisierung" zeigt das Demo-Video in
   dauerhafter Endlosschleife (stumm, ohne Bedienelemente) als eigene
   Kachel-Grafik, "3D-Rendering mit KI" ein statisches Vorschaubild. */
/* flex-direction: column statt der geerbten Reihen-Anordnung von
   .bild-aktionen - die drei Kacheln stehen untereinander und nutzen dabei
   die volle Breite der Felder-Spalte aus, statt sich in eine schmale
   Mehrspalten-Reihe zu quetschen. */
.grundriss-ki-kacheln { flex-direction: column; gap: 0.6rem; }
.grundriss-ki-kachel {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 3 / 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-soft);
  text-transform: none;
  letter-spacing: normal;
}
.grundriss-ki-kachel video,
.grundriss-ki-kachel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grundriss-ki-kachel-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 0.8rem 0.5rem;
  background: linear-gradient(to top, rgba(20, 24, 31, 0.85), rgba(20, 24, 31, 0));
  color: var(--paper);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
.grundriss-ki-kachel:hover { border-color: var(--champagne); color: var(--paper); }
/* "Automatisch erkennen" hat kein Demo-Video/-Bild - stattdessen ein
   zentriertes Icon auf dem ohnehin dunklen Kachel-Hintergrund (siehe
   .grundriss-ki-kachel background oben). */
.grundriss-ki-kachel-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne);
}
/* Preis der jeweiligen KI-Funktion (siehe AI_ACTION_PRICES_CENTS in
   credits.js) unten rechts auf der Kachel - eigenes Badge statt Teil des
   Labels, damit es nicht mit dessen linksbündigem Text kollidiert. */
.grundriss-ki-kachel-preis {
  position: absolute;
  right: 0.6rem;
  bottom: 0.55rem;
  padding: 0.15rem 0.45rem;
  background: rgba(20, 24, 31, 0.6);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.bild-staging-optionen {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.6rem;
}
.bild-staging-optionen[hidden] { display: none; }
.bild-staging-optionen select {
  font: inherit; font-size: 0.8rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  background: var(--white);
}
.bild-staging-optionen button {
  font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  background: var(--champagne); color: var(--ink); border: none;
}

/* ---------- Bild-Editor-Popup ---------- */

.bild-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 24, 31, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.bild-editor {
  background: var(--paper);
  border: 1px solid var(--line);
  width: 100%;
  max-width: 58rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bild-editor-kopf {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.bild-editor-titel {
  font-family: var(--display);
  font-size: 1.05rem;
  flex: 1;
}
.bild-editor-fortschritt {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.bild-editor-schliessen {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--stone);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.bild-editor-schliessen:hover { color: var(--ink); }

.bild-editor-inhalt {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.4rem;
  padding: 1.2rem;
  overflow-y: auto;
}
.bild-editor-vorschau {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-soft);
  align-self: start;
}
/* Original/Neu werden als Vorher/Nachher-Regler überlagert dargestellt
   (siehe .compare-slider weiter oben, wiederverwendet vom Detail-Seiten-
   Regler) statt nebeneinander - dadurch zeigt der Rahmen das Bild in
   voller Größe statt einer schmalen halbierten Ansicht. Anders als beim
   Detail-Seiten-Regler (KI-Vorschlag links/Original rechts, Start bei 0%)
   steht hier links Original/rechts KI-Generiert, Start in der Mitte
   (siehe data-compare-start="50" in objekt-formfelder.ejs). */
.bild-editor-vorschau .compare-slider { position: absolute; inset: 0; }
.compare-badge-links { left: 0.9rem; }
.compare-badge-rechts { right: 0.9rem; }

/* Umschließt das Stockwerk-Feld UND Vorschau/Cropper als eigene linke
   Spalte im Grundriss-Popup (siehe objekt-formfelder.ejs) - das Feld
   sitzt dadurch links, oberhalb des Bildes. */
.grundriss-editor-vorschau-spalte {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.grundriss-editor-vorschau-spalte label { margin-top: 0; }

/* Grundriss-Popup (siehe grundriss-editor.js): kein festes 4:3 wie beim
   Foto-Editor oben - Grundrisse haben beliebige Seitenverhältnisse, und
   Cropper.js bemisst sich ohnehin selbst am eingebetteten Bild. */
.grundriss-editor-vorschau {
  aspect-ratio: auto;
  min-height: 320px;
  max-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grundriss-editor-vorschau img { max-width: 100%; max-height: 65vh; display: block; }
/* "display: block" hat sonst gegenüber dem Browser-Standard für [hidden]
   Vorrang (gleiches, in dieser Session mehrfach gefundene Muster wie bei
   ".offer-form input[hidden]" u. a.) - editorImg.hidden schaltet zwischen
   Bild-/PDF-Vorschau um (siehe grundriss-editor.js), ohne diese Regel
   bliebe das <img> immer sichtbar. */
.grundriss-editor-vorschau img[hidden] { display: none; }
.grundriss-editor-vorschau embed { width: 100%; height: 60vh; border: none; }
/* Cropper.js' Standardlinien (1px, halbtransparent Blau, 5px-Eckpunkte) gehen
   auf einem Grundriss - selbst schon eine dünne Schwarz-Weiß-Strichzeichnung
   mit oft blauen Fenster-/Wasserlinien, siehe make-testplan2.js aus früheren
   Tests dieser Session - optisch unter. Kräftigere Akzentfarbe (Champagne
   statt Cropper-Blau) plus dickere/größere Kontur, Raster und Eckpunkte;
   !important bei den Eckpunkten, weil cropper.min.css (lädt NACH style.css,
   siehe objekt-formfelder.ejs) für "cropper-point.point-XX" eigene, gleich
   spezifische Regeln (teils mit Media Queries) mitbringt, gegen die eine
   reine Selektor-Spezifität hier nicht zuverlässig gewinnt. Der weiße Halo
   (box-shadow) sorgt zusätzlich für Kontrast unabhängig von der jeweiligen
   Bildfarbe. autoCropArea ist in grundriss-editor.js bewusst < 1 (statt
   randbündig) gesetzt, sonst gäbe es beim ersten Öffnen noch nichts, wovon
   sich Kontur/Abdunkelung optisch abheben könnten. */
.grundriss-editor-vorschau .cropper-view-box {
  outline: 3px solid var(--champagne-deep);
  box-shadow: 0 0 0 1px #fff;
}
.grundriss-editor-vorschau .cropper-dashed.dashed-h {
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-color: var(--champagne-deep);
  opacity: 0.85;
}
.grundriss-editor-vorschau .cropper-dashed.dashed-v {
  border-left-width: 2px;
  border-right-width: 2px;
  border-color: var(--champagne-deep);
  opacity: 0.85;
}
.grundriss-editor-vorschau .cropper-line { background-color: var(--champagne-deep) !important; }
.grundriss-editor-vorschau .cropper-point {
  background-color: var(--champagne-deep) !important;
  width: 13px !important;
  height: 13px !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 2px #fff;
}

/* Mehrfachauswahl (Polygon-Werkzeug, siehe grundriss-editor.js) - Alternative
   zum rechteckigen Cropper.js-Zuschnitt für Grundrisse mit mehreren
   Einheiten. Umschalter nutzt dieselbe Pressed-Button-Optik wie die
   Sora-Videolängen-Auswahl (.grundriss-sora-laenge-option) für ein
   einheitliches Erscheinungsbild. */
.grundriss-editor-modus-umschalter { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.grundriss-editor-modus-btn,
.grundriss-editor-flaeche-auswaehlen-btn {
  flex: 1 1 0;
  padding: 0.5rem 0.4rem;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.grundriss-editor-modus-btn:hover,
.grundriss-editor-flaeche-auswaehlen-btn:hover { border-color: var(--champagne); }
.grundriss-editor-modus-btn[aria-pressed="true"] {
  border-color: var(--champagne-deep);
  border-width: 2px;
  background: rgba(180, 154, 106, 0.12);
}
.grundriss-editor-flaeche-auswaehlen-btn { margin-bottom: 0.6rem; }
/* "Automatisch erkennen" (Magic Wand, siehe grundriss-editor.js) - teilt sich
   die Grundgestaltung mit .grundriss-editor-flaeche-auswaehlen-btn, braucht
   aber zusätzlich ein Inline-Layout für Icon + Label + Preis-Hinweis statt
   reinem Text. */
.grundriss-editor-segmentieren-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  width: 100%;
}
.grundriss-editor-segmentieren-icon { display: inline-flex; flex-shrink: 0; }
.grundriss-editor-segmentieren-btn .hint { font-weight: 400; }

/* Der Canvas wird per JS exakt über das dargestellte <img> positioniert
   (siehe resizePolygonCanvas()) - .grundriss-editor-vorschau ist bereits
   position:relative (siehe .bild-editor-vorschau oben), daher hier nur
   position:absolute; die eigentlichen left/top/width/height kommen als
   Inline-Styles von dort. touch-action:none verhindert Scrollen beim
   Zeichnen auf Touch-Geräten. */
.grundriss-polygon-overlay { position: absolute; touch-action: none; cursor: crosshair; }
.grundriss-polygon-overlay[hidden] { display: none; }
/* "Automatisch erkennen" (Magic Wand) nutzt dieselbe Overlay-Positionierung
   wie die Mehrfachauswahl, aber ein Klick wählt eine bereits erkannte Fläche
   aus statt einen Eckpunkt zu setzen - "pointer" statt "crosshair" passt
   dafür besser. */
[data-grundriss-editor-segment-overlay] { cursor: pointer; }

.grundriss-polygon-werkzeuge { margin-top: 0.8rem; }
.grundriss-polygon-liste { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; margin: 0 0 0.6rem; padding: 0; }
.grundriss-polygon-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.82rem;
}
.grundriss-polygon-liste-loeschen {
  border: none;
  background: none;
  color: var(--stone);
  cursor: pointer;
  display: flex;
  padding: 0.1rem;
}
.grundriss-polygon-liste-loeschen:hover { color: var(--champagne-deep); }
.grundriss-polygon-ortho-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
  cursor: pointer;
}
.grundriss-polygon-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.grundriss-polygon-aktionen button {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.grundriss-polygon-aktionen button:hover { border-color: var(--champagne); }

.bild-editor-lade-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.5rem;
  background: rgba(20, 24, 31, 0.72);
}
/* Optionaler Statustext neben dem Spinner (siehe grundriss-editor.js,
   z. B. "3D-Modell wird erzeugt … kann bis zu 5 Minuten dauern") - beim
   reinen Foto-Editor-Popup bleibt das Element leer/hidden, ändert also
   nichts an dessen bisherigem Aussehen (ein zentrierter Spinner allein). */
.bild-editor-lade-overlay p {
  font-size: 0.85rem;
  color: var(--paper);
  text-align: center;
  padding: 0 1rem;
  max-width: 22rem;
}
.bild-editor-spinner {
  width: 2.4rem; height: 2.4rem;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--champagne);
  border-radius: 50%;
  animation: grundriss-3d-spin 0.8s linear infinite;
}
/* Wartecursor über dem gesamten Popup während einer laufenden KI-Aktion -
   !important, weil Buttons sonst ihren eigenen (Browser-Standard-)Cursor
   zeigen statt den vom Vorfahren geerbten. */
.bild-editor-wartend, .bild-editor-wartend * { cursor: wait !important; }

/* Werbepartner-Banner-Karussell (siehe werbung-anzeige.js) - der Wrapper ist
   das "Sichtfenster" und wächst per flex-grow über den kompletten
   restlichen Platz im Lade-Overlay (Spinner/Text darüber, Fortschrittsbalken
   darunter bleiben unangetastet) statt eines kleinen festen 16:9-Banners -
   siehe Nutzer-Rückmeldung/screen018.png. Enthält eine große Hauptanzeige
   (.ladefortschritt-werbung-haupt, wächst per flex-grow) und darunter eine
   feste Miniaturleiste zum direkten Anwählen (siehe Nutzer-Rückmeldung,
   screen026.png) - letztere nur, wenn mehr als eine Anzeige verfügbar ist.
   Bleibt leer/unsichtbar ohne aktive Anzeige. */
[data-grundriss-editor-lade-werbung],
[data-bild-editor-lade-werbung] {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
}
.ladefortschritt-werbung-haupt {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.ladefortschritt-werbung {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  animation: ladefortschritt-werbung-einblenden 0.25s ease;
}
@keyframes ladefortschritt-werbung-einblenden {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ladefortschritt-werbung img,
.ladefortschritt-werbung video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ladefortschritt-werbung-label {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(20, 24, 31, 0.72);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
}

/* Miniaturleiste unter der Hauptanzeige - feste Höhe (über die Kachel-
   Maße bestimmt), damit .ladefortschritt-werbung-haupt darüber den Rest
   des Sichtfensters per flex-grow behält. */
.ladefortschritt-werbung-miniaturen {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem;
  overflow-x: auto;
  background: rgba(20, 24, 31, 0.35);
}
.ladefortschritt-werbung-miniatur {
  flex: 0 0 3rem;
  width: 3rem;
  height: 2.2rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s;
}
.ladefortschritt-werbung-miniatur:hover { opacity: 0.85; }
.ladefortschritt-werbung-miniatur.ist-aktiv {
  opacity: 1;
  border-color: var(--champagne);
}
.ladefortschritt-werbung-miniatur img,
.ladefortschritt-werbung-miniatur video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fortschrittsbalken unten im Lade-Overlay (siehe Nutzer-Rückmeldung) -
   zeigt den geschätzten Fortschritt der laufenden KI-Aktion, gedeckelt bei
   95 % bis zum echten Abschluss (siehe starteLadeFortschritt() in
   grundriss-editor.js/bild-upload.js). Absolut am unteren Rand des
   Overlays verankert statt Teil des zentrierten Flex-Stapels, damit sie
   unabhängig vom optionalen Statustext/Werbebanner darüber immer ganz
   unten sitzt. */
.ladefortschritt-balken {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* +5px auf die bisherige Höhe, nach oben ausgedehnt (bottom bleibt bei 0
     verankert) - siehe Nutzer-Rückmeldung. */
  height: calc(0.3rem + 5px);
  background: rgba(255, 255, 255, 0.15);
}
.ladefortschritt-balken-fuellung {
  height: 100%;
  width: 0%;
  background: var(--champagne);
  transition: width 0.5s linear;
}

.bild-editor-vorschau-aktionen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.8rem;
  background: rgba(180, 154, 106, 0.1);
  border: 1px solid var(--champagne);
}
.bild-editor-vorschau-aktionen .hint { width: 100%; margin: 0; }

/* Einführung vor der ersten (kostenpflichtigen) MeltFlex-3D-Erzeugung: an
   MeltFlex' eigenen Konfigurator (RENDER STYLE/VIEW/FURNITURE/INTERIOR
   STYLE/LABELS, siehe /create auf meltflexai.com) angelehnte Kategorien mit
   anklickbaren Vorschaubildern (public/assets/renderstyles/*) - rein
   informativ/optisch, da die tatsächlich aufgerufene MeltFlex-API
   (/v1/floorplan-to-3d) keine dieser Parameter unterstützt (siehe
   grundriss-editor.js) - die Auswahl wird deshalb bewusst nicht an den
   Server übertragen. Eigener Scroll-Container nur für die Kategorien
   (statt des gesamten Popups), damit der "Convert to 3D"-Button immer
   sichtbar bleibt, ohne dass bis ans Ende gescrollt werden muss. */
.grundriss-3d-intro { display: flex; flex-direction: column; gap: 0.8rem; }
.grundriss-3d-kategorien {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 0.3rem;
}
.grundriss-3d-kategorie-titel {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--champagne-deep);
}
.grundriss-3d-thumbnails { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.grundriss-3d-thumbnail {
  position: relative;
  width: 92px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: left;
}
.grundriss-3d-thumbnail img { width: 100%; height: 64px; object-fit: cover; display: block; }
.grundriss-3d-thumbnail span {
  display: block;
  padding: 0.3rem 0.35rem;
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--ink);
}
.grundriss-3d-thumbnail:hover { border-color: var(--champagne); }
.grundriss-3d-thumbnail[aria-pressed="true"] { border-color: var(--champagne-deep); border-width: 2px; }
.grundriss-3d-thumbnail[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.1rem;
  height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.6rem;
}
.grundriss-3d-kategorien-aktionen { display: flex; gap: 0.6rem; }
.grundriss-3d-convert {
  flex: 1 1 auto;
  padding: 0.75rem;
  border: none;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}
.grundriss-3d-convert:hover { background: var(--champagne-deep); }
/* Walkthrough-Video (MeltFlex-Render + -Animation, siehe meltflex.js) -
   deutlich teurer als das reine 3D-Modell (39 € statt 29 €), deshalb als
   zweite, optisch zurückgenommene Option statt gleichwertig zum
   Haupt-Button. */
.grundriss-3d-convert-video {
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.grundriss-3d-convert-video:hover { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }

.bild-editor-felder { display: flex; flex-direction: column; gap: 0.9rem; }
.bild-editor-felder label { margin-top: 0; }
.bild-editor-felder textarea { resize: vertical; }

.bild-editor-titelbild {
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--champagne-deep);
  background: none;
  color: var(--champagne-deep);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.bild-editor-titelbild:hover { background: var(--champagne); color: var(--ink); }
.bild-editor-titelbild-status {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--champagne-deep);
  font-weight: 600;
}

.bild-editor-aktionen-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 600;
}
.bild-editor-felder .bild-aktionen { padding: 0; }

.bild-editor-fuss-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}
.bild-editor-revert, .bild-editor-entfernen {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.bild-editor-revert:hover { border-color: var(--ink); }
.bild-editor-entfernen { color: #a3453a; }
.bild-editor-entfernen:hover { border-color: #a3453a; background: rgba(163, 69, 58, 0.08); }

.bild-editor-fuss {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--line);
  background: var(--white);
}
/* Aktuelles Guthaben + "Aufladen"-Button unten links im Grundriss-Popup
   (siehe grundriss-editor.js) - als erste zwei Elemente im ansonsten
   rechtsbündigen Fuß (justify-content: flex-end), mit margin-right: auto
   auf dem LETZTEN der beiden (dem Button) an den linken Rand geschoben -
   so bleiben Guthaben-Text und Button als Gruppe zusammen, ohne das
   Flex-Layout der übrigen Buttons rechts zu verändern. */
.grundriss-editor-guthaben {
  font-size: 0.75rem;
  color: var(--stone);
  white-space: nowrap;
}
.grundriss-editor-guthaben-aufladen {
  margin-right: auto;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--champagne-deep);
  background: none;
  color: var(--champagne-deep);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.grundriss-editor-guthaben-aufladen:hover { background: var(--champagne); color: var(--ink); }
.bild-editor-weiter, .bild-editor-fertig, .bild-editor-abbrechen {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.6rem 1.2rem;
  border: none;
  cursor: pointer;
}
.bild-editor-weiter, .bild-editor-abbrechen { background: var(--white); border: 1px solid var(--ink); color: var(--ink); }
.bild-editor-fertig { background: var(--ink); color: var(--paper); }
/* Solange ein KI-Panel offen ist oder eine Erzeugung läuft, ist "Fertig"
   gesperrt (siehe aktualisiereFussButtons() in grundriss-editor.js) - ohne
   eigene Optik sähe der Button trotz disabled weiter voll anklickbar aus. */
.bild-editor-fertig:disabled {
  background: var(--ink-soft);
  color: var(--stone);
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .bild-editor-inhalt { grid-template-columns: 1fr; }
}

/* ---------- Grundrisse/Dokumente/Video-Upload ---------- */

.dateien-grid {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.dateien-upload-karte {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1rem;
  transition: opacity 0.2s;
}
.dateien-upload-karte.ist-beschaeftigt { opacity: 0.6; pointer-events: none; }
.dateien-upload-trigger {
  cursor: pointer;
  padding: 0.8rem;
  text-align: center;
  border: 1.5px dashed var(--line-dark);
  transition: border-color 0.2s, background 0.2s;
}
.dateien-upload-trigger:hover { border-color: var(--champagne); background: rgba(180,154,106,0.06); }
.dateien-upload-trigger strong { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }
.dateien-upload-trigger .hint {
  display: block;
  text-transform: none; letter-spacing: normal; font-weight: 400;
  color: var(--stone); font-size: 0.75rem;
}
.dateien-liste {
  list-style: none; margin-top: 0.7rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem;
}
.dateien-eintrag { background: var(--paper); border: 1px solid var(--line); }
.dateien-eintrag:not(.hat-vorschau) { grid-column: 1 / -1; }
.dateien-vorschau { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-soft); }
.dateien-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dateien-vorschau embed { width: 100%; height: 100%; display: block; }
.dateien-vorschau video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dateien-info {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
}
.dateien-info-zeile { display: flex; justify-content: flex-end; }
.dateien-entfernen {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: #a3453a;
  padding: 0.2rem; cursor: pointer;
  transition: color 0.2s;
}
.dateien-entfernen:hover { color: #7a2f27; }
.dateien-vorschau .dateien-entfernen {
  position: absolute; top: 0.4rem; right: 0.4rem;
  width: 1.8rem; height: 1.8rem;
  background: rgba(20, 24, 31, 0.72);
  color: var(--paper);
  border-radius: 50%;
}
.dateien-vorschau .dateien-entfernen:hover { background: #a3453a; color: var(--paper); }
.dateien-tag-input {
  font: inherit; font-size: 0.75rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--line);
  background: var(--white);
  width: 100%;
}
.bild-tag-wrap { padding: 0.5rem 0.7rem 0; }
.dateien-status {
  margin-top: 0.5rem; font-size: 0.8rem; color: var(--stone);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.dateien-status.fehler { color: #a3453a; }

/* ---------- Grundriss-3D-Viewer (eingebettet im Grundriss-Editor-Popup,
   siehe grundriss-editor.js - kein eigenes Overlay mehr) ---------- */

.grundriss-3d-viewer { width: 100%; height: 100%; }
.grundriss-3d-viewer canvas { display: block; }
/* Ohne feste Höhe würde sich "height: 100%" oben gegen die nur per
   min-/max-height begrenzte .grundriss-editor-vorschau nicht auflösen
   (Prozent-Höhen brauchen eine bestimmte Elternhöhe) - der Viewer bliebe
   unsichtbar mit Höhe 0. */
.grundriss-editor-vorschau [data-grundriss-editor-3d-viewer] { height: 420px; }
@keyframes grundriss-3d-spin { to { transform: rotate(360deg); } }

/* Sora-Video-Ergebnis (siehe grundriss-editor.js) - ersetzt wie der
   3D-Viewer temporär die Bildvorschau, daher gleiche feste Höhe/Passung. */
.grundriss-sora-viewer { width: 100%; height: 420px; display: block; object-fit: contain; background: var(--ink-soft); }
.grundriss-sora-viewer[hidden] { display: none; }

/* Sora-Prompt-Feld mit DE/EN-Umschalter (siehe grundriss-editor.js) -
   Standardsprache Deutsch, die englische Fassung wird beim Tippen im
   Hintergrund übersetzt (translateText() in ai-text.js) und ist die
   tatsächlich an Sora geschickte Version. */
.grundriss-sora-prompt-feld { display: flex; flex-direction: column; gap: 0.4rem; }
.grundriss-sora-prompt-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 600;
}
.grundriss-sora-prompt-kopf .hint { display: block; text-transform: none; letter-spacing: normal; font-weight: 400; margin-top: 0.2rem; }
.grundriss-sora-sprache-umschalter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--stone);
  cursor: pointer;
  white-space: nowrap;
}
/* Checkbox als iOS-artiger Schalter statt Standard-Häkchen. */
.grundriss-sora-sprache-umschalter input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2rem;
  height: 1.1rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  position: relative;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.grundriss-sora-sprache-umschalter input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--stone);
  transition: transform 0.2s, background 0.2s;
}
.grundriss-sora-sprache-umschalter input[type="checkbox"]:checked {
  background: var(--champagne);
  border-color: var(--champagne-deep);
}
.grundriss-sora-sprache-umschalter input[type="checkbox"]:checked::before {
  transform: translateX(0.9rem);
  background: var(--champagne-deep);
}

/* Videolängen-Auswahl (4/8/12 Sekunden, 2,50 €/Sekunde, siehe
   grundrissSoraPriceCents() in credits.js) - drei gleich breite Optionen,
   gleiche Auswahl-Optik wie die Render-Style-Kacheln oben. */
.grundriss-sora-laenge { display: flex; flex-direction: column; gap: 0.4rem; }
.grundriss-sora-laenge-optionen { display: flex; gap: 0.5rem; }
.grundriss-sora-laenge-option {
  flex: 1 1 0;
  padding: 0.5rem 0.4rem;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.grundriss-sora-laenge-option small { display: block; font-weight: 400; color: var(--stone); font-size: 0.68rem; margin-top: 0.1rem; }
.grundriss-sora-laenge-option:hover { border-color: var(--champagne); }
.grundriss-sora-laenge-option[aria-pressed="true"] { border-color: var(--champagne-deep); border-width: 2px; background: rgba(180, 154, 106, 0.12); }

/* Hinweis-/Bestätigungsschritt vor der (kostenpflichtigen) Sora-Video-
   Erzeugung - warnt bewusst, dass das Ergebnis frei erfunden ist und nicht
   der echten Raumaufteilung entspricht (siehe objekt-formfelder.ejs). */
.grundriss-sora-intro { display: flex; flex-direction: column; gap: 0.7rem; }

/* ---------- Guthaben-aufladen-Popup (siehe guthaben-aufladen.js) ---------- */

.guthaben-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(20, 24, 31, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
/* Wie bei ".form-grid[hidden]"/".geg-hinweis[hidden]" weiter oben - "display:
   flex" hat sonst gegenüber dem Browser-Standard für [hidden] Vorrang, egal
   was overlay.hidden im JS setzt. Dort greift zusätzlich die generelle
   ".offer-form [hidden]"-Regel (Anzeigen-Assistent/Admin-Formular), aber
   dieses Popup wird auch auf /konto eingebunden (siehe guthaben-modal.ejs),
   das kein .offer-form-Vorfahre ist - ohne diese eigene Regel ließe sich das
   Popup dort nicht schließen (Guthaben aufladen "eingefroren"). */
.guthaben-overlay[hidden] { display: none; }
.guthaben-modal {
  background: var(--paper);
  border: 1px solid var(--line);
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.guthaben-inhalt {
  padding: 1.2rem;
  overflow-y: auto;
}
.guthaben-auswahl .konto-toolbar { margin-top: 0.6rem; }
.guthaben-checkout { min-height: 20rem; }
.guthaben-jetzt-aufladen {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border: 1px solid #a3453a;
  background: none;
  color: #a3453a;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.guthaben-jetzt-aufladen:hover { background: #a3453a; color: var(--white); }

/* ---------- Admin ---------- */

.admin-tag {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--champagne-deep); font-weight: 700; margin-right: 0.5rem;
}

/* Ersetzt die volle E-Mail-Adresse in der Admin-Nav (nahm bei längeren
   Adressen zu viel Platz neben den übrigen Nav-Links weg) - Initiale mit
   der vollen Adresse als Tooltip (title-Attribut). */
.admin-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--champagne-deep);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: default;
}

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--white); }
.admin-table th, .admin-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 0.88rem;
  white-space: nowrap;
}
.admin-table th {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stone); font-weight: 600;
}
.admin-actions { display: flex; align-items: center; gap: 0.8rem; }
.admin-actions form { display: inline; }
.admin-actions button {
  background: none; border: 1px solid var(--line);
  padding: 0.35rem 0.7rem; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s;
}
.admin-actions button:hover { border-color: var(--champagne); color: var(--champagne-deep); }
.admin-actions button.danger:hover { border-color: #a3453a; color: #a3453a; }

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--stone);
}
.status-badge.status-veroeffentlicht { border-color: var(--champagne); color: var(--champagne-deep); }
.status-badge.status-pruefung { border-color: #a3453a; color: #a3453a; }

/* ---------- Admin-Analyse-Dashboard ---------- */

.zeitraum-nav { display: flex; gap: 0.5rem; }
.zeitraum-nav a {
  padding: 0.4rem 0.9rem; border: 1px solid var(--line);
  font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--stone);
}
.zeitraum-nav a.active { border-color: var(--champagne); color: var(--champagne-deep); font-weight: 600; }
.zeitraum-nav a:hover { border-color: var(--champagne); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: 2.2rem;
}
.kpi-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 1.1rem 1.3rem;
}
.kpi-value { font-size: 1.9rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.kpi-label {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stone); margin-top: 0.35rem;
}

.analyse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.6rem;
}

.bar-list { display: flex; flex-direction: column; gap: 0.55rem; }
.bar-row { display: grid; grid-template-columns: 8rem 1fr 3rem; align-items: center; gap: 0.6rem; }
.bar-row-label {
  font-size: 0.82rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-track { background: var(--line); height: 0.55rem; position: relative; display: block; }
.bar-fill { background: var(--champagne); height: 100%; position: absolute; top: 0; left: 0; display: block; }
.bar-row-value { font-size: 0.8rem; color: var(--stone); text-align: right; }

.zeitreihe-chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 7rem; border-bottom: 1px solid var(--line); padding-top: 0.5rem;
}
.zeitreihe-balken { flex: 1; background: var(--champagne); min-height: 2px; }
.zeitreihe-balken:hover { background: var(--champagne-deep); }

.berichte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
}
.bericht-karte {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 1.4rem 1.5rem;
  transition: border-color 0.2s;
}
.bericht-karte:hover { border-color: var(--champagne); }
.bericht-karte h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.bericht-karte p { margin: 0; color: var(--stone); font-size: 0.88rem; }

.stat-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.stat-row:last-child { border-bottom: none; }
.stat-row-label { color: var(--stone); }
.stat-row-value { font-weight: 600; }

.meter-track { background: var(--line); height: 0.6rem; position: relative; display: block; border-radius: 3px; overflow: hidden; }
.meter-fill { background: var(--champagne); height: 100%; position: absolute; top: 0; left: 0; display: block; }
.meter-fill.ist-hoch { background: #a3453a; }

/* ---------- Fußzeile ---------- */

.site-footer {
  /* Bewusst eine feste Tinte (#14181f) statt var(--ink): die Fußzeile soll
     immer ein dunkles Band bleiben (Markenfarbe), auch im Mitternacht-Theme
     - dort wird --ink zu einer HELLEN Farbe (Text auf dunklem Grund) statt
     einer dunklen Fläche, wodurch die ebenfalls fest helle Schrift hier
     sonst hell-auf-hell und unlesbar würde (siehe Nutzer-Rückmeldung). */
  background: #14181f;
  color: rgba(246, 244, 239, 0.75);
  margin-top: 3rem;
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 4.5rem) var(--pad) 2.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
}
.footer-claim {
  font-family: var(--display);
  font-size: 1.25rem;
  /* Ebenfalls fest statt var(--paper) - aus demselben Grund wie oben bei
     .site-footer: --paper wird im Mitternacht-Theme zur dunklen Fläche,
     hier aber als heller Akzenttext auf dem (jetzt immer dunklen)
     Fuß-Hintergrund gebraucht. */
  color: #f6f4ef;
  margin-top: 1rem;
  line-height: 1.4;
}
.site-footer h4 {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--champagne); margin-bottom: 0.9rem; font-weight: 600;
}
.site-footer a { display: block; padding: 0.25rem 0; transition: color 0.2s; }
.site-footer a:hover { color: var(--champagne); }
.site-footer p { margin-bottom: 0.6rem; }
.footer-base {
  border-top: 1px solid rgba(180, 154, 106, 0.25);
  padding: 1.2rem var(--pad);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(246, 244, 239, 0.45);
}

/* ---------- Hilfe & Kontakt ---------- */

.hilfe-body { max-width: 64rem; }

.hilfe-suche { margin-bottom: 2.5rem; }
.hilfe-suche input {
  width: 100%;
  max-width: 28rem;
  font: inherit;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  background: var(--white);
}
.hilfe-suche input:focus { outline: 2px solid var(--champagne); outline-offset: -1px; }
.hilfe-suche-status { margin-top: 0.8rem; color: var(--stone); font-size: 0.9rem; }

.hilfe-kategorien {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 3rem;
}
.hilfe-kategorie h2 {
  font-size: 1.1rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.hilfe-kategorie:not(:first-child) h2 { margin-top: 2.2rem; }

.hilfe-frage { border-bottom: 1px solid var(--line); }
.hilfe-frage summary {
  padding: 0.85rem 1.6rem 0.85rem 0;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  list-style: none;
}
.hilfe-frage summary::-webkit-details-marker { display: none; }
.hilfe-frage summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem; top: 0.8rem;
  color: var(--champagne-deep);
  font-size: 1.1rem;
}
.hilfe-frage[open] summary::after { content: "–"; }
.hilfe-frage p { color: var(--ink-soft); padding: 0 0 1rem; max-width: 34rem; }

.hilfe-kontakt-karte {
  margin-top: 3rem;
  padding: 1.8rem;
  max-width: 26rem;
  background: var(--ink);
  color: var(--paper);
}
.hilfe-kontakt-karte h2 { color: var(--champagne); font-size: 1.1rem; margin-bottom: 0.6rem; }
.hilfe-kontakt-karte p { margin-bottom: 0.6rem; }
.hilfe-kontakt-karte a { color: var(--paper); }
.hilfe-kontakt-karte a:hover { color: var(--champagne); }

/* ---------- Responsiv ---------- */

@media (max-width: 900px) {
  .split, .detail-columns { grid-template-columns: 1fr; }
  .map-wrap { grid-template-columns: 1fr; }
  .map-results { position: static; }
  .map-list { max-height: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .filterbar { grid-template-columns: 1fr 1fr; }
  .filterbar button { grid-column: span 2; padding: 0.8rem; }
  .filterbar select, .filterbar input { grid-column: span 1; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery-item.main { grid-column: span 2; grid-row: auto; }
  .hilfe-kategorien { grid-template-columns: 1fr; }
  .hilfe-kategorie:not(:first-child) h2 { margin-top: 2.2rem; }
}

@media (max-width: 640px) {
  .site-header { flex-direction: column; gap: 0.8rem; }
  .search-fields { grid-template-columns: 1fr; }
  .search-fields input, .search-fields select {
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .search-fields button { padding: 0.95rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .features { columns: 1; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-item.main { grid-column: auto; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Nutzerkonten (Registrierung/Login/Merkliste) ---------- */

button.text-link {
  background: none;
  border: none;
  border-bottom: 1px solid var(--champagne);
  padding: 0 0 2px;
  font: inherit;
  cursor: pointer;
}

.auth-form { max-width: 26rem; }
.auth-divider {
  text-align: center;
  color: var(--stone);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 1.6rem 0 1rem;
}
.auth-providers { display: flex; gap: 0.8rem; max-width: 26rem; }
.auth-provider-btn {
  flex: 1;
  text-align: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.auth-provider-btn:hover { border-color: var(--champagne); background: var(--white); }
.auth-switch { margin-top: 1.4rem; color: var(--stone); font-size: 0.9rem; }
.auth-switch a { color: var(--champagne-deep); font-weight: 600; }
.auth-forgot { margin-top: 0.6rem; font-size: 0.85rem; }
.auth-forgot a { color: var(--stone); }
.auth-forgot a:hover { color: var(--champagne-deep); }

.consent-dialog {
  /* Der globale Reset ("* { margin: 0 }") hebt das "margin: auto", auf dem
     die native <dialog>-Zentrierung normalerweise beruht, wieder auf -
     deshalb hier explizit fixiert zentrieren statt darauf zu vertrauen. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 40rem;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--line-dark);
  padding: 1.6rem 1.8rem;
  background: var(--paper);
  color: var(--ink-soft);
}
.consent-dialog::backdrop { background: rgba(20, 24, 31, 0.6); }
.consent-dialog h2 { font-family: var(--display); color: var(--champagne-deep); margin-bottom: 0.8rem; }
.consent-dialog p { margin-bottom: 0.9rem; font-size: 0.92rem; line-height: 1.6; }
.consent-dialog button { margin-top: 0.4rem; }

.card-fav {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: none;
  background: rgba(20, 24, 31, 0.55);
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.card-fav:hover { background: rgba(20, 24, 31, 0.8); }
.card-fav.ist-favorit { color: #e0574a; background: rgba(255, 255, 255, 0.9); }

.card-fav-detail {
  position: static;
  width: auto;
  height: auto;
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  margin-top: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.card-fav-detail.ist-favorit { color: #e0574a; border-color: #e0574a; }

.konto-list { display: flex; flex-direction: column; gap: 1rem; max-width: 44rem; }
.konto-list li {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1rem 1.2rem;
}
.konto-list li p { margin-top: 0.4rem; color: var(--ink-soft); }
.konto-list .hint { color: var(--stone); font-size: 0.78rem; }

/* ---------- Profil (Tab in /konto) ---------- */

.konto-profil h3 { margin: 2.4rem 0 1.2rem; }
.konto-profil h3:first-of-type { margin-top: 1.4rem; }
.konto-profil .offer-form, .konto-profil .darstellung-form { max-width: 54rem; }

.theme-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.9rem;
  max-width: 54rem;
}
.theme-swatch-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.2s;
}
.theme-swatch-select:hover { border-color: var(--champagne-deep); }
.theme-swatch-select:has(input:checked) { border-color: var(--champagne-deep); outline: 2px solid var(--champagne-deep); outline-offset: -2px; }
.theme-swatch-select input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-swatch-preview {
  display: block;
  width: 100%;
  height: 2.6rem;
  border: 1px solid var(--line-dark);
}
.theme-swatch-label { font-size: 0.8rem; color: var(--ink); }

.theme-swatch-champagner .theme-swatch-preview { background: linear-gradient(135deg, #f6f4ef 50%, #b49a6a 50%); }
.theme-swatch-mitternacht .theme-swatch-preview { background: linear-gradient(135deg, #14181f 50%, #cdae7a 50%); }
.theme-swatch-ozean .theme-swatch-preview { background: linear-gradient(135deg, #f4f6f7 50%, #3f7a96 50%); }
.theme-swatch-wald .theme-swatch-preview { background: linear-gradient(135deg, #f5f6f0 50%, #4f8a5b 50%); }
.theme-swatch-terrakotta .theme-swatch-preview { background: linear-gradient(135deg, #f8f1ec 50%, #b1583c 50%); }
.theme-swatch-kontrast .theme-swatch-preview { background: linear-gradient(135deg, #ffffff 50%, #000000 50%); }

/* Schriftart-/Schriftgrößen-Kacheln (gleiches Kachel-Grid wie die Themes,
   aber die "Vorschau" ist ein "Aa"-Textmuster statt einer Farbfläche - die
   Schriftart bzw. -größe kommt direkt per Inline-style aus konto.ejs, da
   sie (anders als bei den Theme-Farben) 1:1 aus den echten CSS-Werten
   kommen soll, die auch site-weit angewendet werden. */
.font-swatch-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.6rem;
  border: 1px solid var(--line-dark);
  background: var(--paper);
  color: var(--ink);
}

/* ---------- Darstellung: Schriftart/-größe (siehe /konto, Tab
   "Darstellung") ----------
   Wie bei den Themes: eine Handvoll Overrides auf den bestehenden
   Variablen bzw. der html-Grundschriftgröße reichen, weil praktisch die
   gesamte Datei nur "var(--body)" bzw. rem-Einheiten verwendet. */

:root[data-font="serif"] { --body: "Source Serif 4", Georgia, serif; }
:root[data-font="barrierefrei"] { --body: "Atkinson Hyperlegible", Arial, sans-serif; }

html[data-font-size="klein"] { font-size: 15px; }
html[data-font-size="gross"] { font-size: 18px; }

/* ---------- Themes (siehe /konto, Tab "Profil") ----------
   Praktisch die gesamte Datei referenziert nur die 9 Custom Properties
   in :root oben - ein Theme überschreibt daher nur diese Variablen, ohne
   dass einzelne Komponenten angepasst werden müssen. "kontrast" ist das
   Barrierefreiheits-/Hochkontrast-Theme (siehe zusätzliche Regeln unten:
   größere Schrift, unterstrichene Links statt Farbe als einzigem
   Unterscheidungsmerkmal, kräftigerer Fokus-Rahmen). */

:root[data-theme="mitternacht"] {
  /* Ohne color-scheme rendert der Browser natives Formular-Chrome (u. a.
     die aufgeklappte Options-Liste von <select>) weiterhin nach dem
     Light-Mode-Standard des Betriebssystems, unabhängig von den obigen
     Custom Properties - das ergab dunklen (Standard-)Text auf dunklem
     (per CSS gesetztem) Hintergrund in der aufgeklappten Liste, kaum
     lesbar (siehe Nutzer-Rückmeldung, screen025.png). "dark" weist den
     Browser an, für nicht selbst gestylte native Elemente durchgängig
     seine Dark-Mode-Palette zu verwenden. */
  color-scheme: dark;
  --ink: #f0ece3;
  --ink-soft: #d6d0c3;
  --paper: #14181f;
  --white: #1c212c;
  --champagne: #cdae7a;
  --champagne-deep: #b49a6a;
  --stone: #9b9486;
  --line: #333a46;
  --line-dark: rgba(205, 174, 122, 0.35);
}

:root[data-theme="ozean"] {
  --paper: #f4f6f7;
  --white: #ffffff;
  --champagne: #3f7a96;
  --champagne-deep: #2c5b72;
  --stone: #6d7a80;
  --line: #dbe4e7;
  --line-dark: rgba(63, 122, 150, 0.35);
}

:root[data-theme="wald"] {
  --paper: #f5f6f0;
  --champagne: #4f8a5b;
  --champagne-deep: #386b43;
  --stone: #74806f;
  --line: #dde3d6;
  --line-dark: rgba(79, 138, 91, 0.35);
}

:root[data-theme="terrakotta"] {
  --paper: #f8f1ec;
  --champagne: #b1583c;
  --champagne-deep: #8f4530;
  --stone: #8a7468;
  --line: #ecdcd2;
  --line-dark: rgba(177, 88, 60, 0.35);
}

:root[data-theme="kontrast"] {
  --ink: #000000;
  --ink-soft: #000000;
  --paper: #ffffff;
  --white: #ffffff;
  --champagne: #0a3d91;
  --champagne-deep: #062a66;
  --stone: #333333;
  --line: #000000;
  --line-dark: rgba(0, 0, 0, 0.6);
}
[data-theme="kontrast"] body { font-size: 1.08em; }
[data-theme="kontrast"] a, [data-theme="kontrast"] .text-link { text-decoration: underline; }
[data-theme="kontrast"] :focus-visible { outline: 3px solid #0a3d91; outline-offset: 2px; }