/* ============================================================================
   Longevity — Anfrage-Wizard & Anfrage-Overlay (AP-C)
   ----------------------------------------------------------------------------
   Global geladen (page.includeCSS in Configuration/TypoScript/ContentBlocks/
   lr-enquiry.typoscript), weil der Anfrage-Knopf auf JEDER Seite stehen kann und
   der Formularinhalt dann im Overlay erscheint — das CB-Asset lr-enquire.css
   laedt nur dort, wo der Block selbst steht.

   FRAME-SYSTEM: Hier stehen KEINE Sektions-Hintergruende, KEINE vertikalen
   Sektions-Abstaende und KEINE Container-Breite. Die Sektion auf der Anfrage-Seite
   bekommt Flaeche, Abstand und Breite ausschliesslich ueber die generischen
   Frame-Felder (background_color_class, space_before/after_class,
   frame_layout_inner_*, frame_layout → .frame-container). Die Regeln unten
   betreffen nur den INHALT (Schrittleiste, Karten, Felder) und das Overlay, das
   per Definition ausserhalb des Seitenflusses liegt.

   SETTINGS-SLOTS: Keine Schriftgroesse und keine Farbe wird hier fest gesetzt,
   wo plate_bootstrap einen Slot dafuer hat — die Werte kommen ueber die
   --lr-*/--bs-*-Variablen aus theme.css bzw. den Settings.
   ============================================================================ */

/* ---------------------------------------------------------------- Tokens */
:root {
  --lr-enq-gap: clamp(1rem, 2.2vw, 1.75rem);
  --lr-enq-line: var(--lr-line-strong, rgba(61, 61, 60, 0.22));
  --lr-enq-line-dark: var(--lr-line-on-dark, rgba(243, 239, 237, 0.24));
  --lr-enq-radius: 0;
}

/* ================================================================
   1. Schrittleiste (generisches Markup aus plate_forms)
   ================================================================ */
.lr-enquiry-form .pl-form-steps,
.pl-form-overlay .pl-form-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0 0 2.2rem;
  padding: 0;
  counter-reset: none;
}

.lr-enquiry-form .pl-form-steps__step,
.pl-form-overlay .pl-form-steps__step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 0 0.75rem;
  border-bottom: 2px solid var(--lr-enq-line);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
  transition: opacity 0.4s, border-color 0.4s;
}

.lr-enquiry-form .pl-form-steps__step--current,
.pl-form-overlay .pl-form-steps__step--current { opacity: 1; }

.lr-enquiry-form .pl-form-steps__step--done,
.pl-form-overlay .pl-form-steps__step--done { opacity: 0.78; }

.lr-enquiry-form .pl-form-steps__step--current,
.lr-enquiry-form .pl-form-steps__step--done,
.pl-form-overlay .pl-form-steps__step--current,
.pl-form-overlay .pl-form-steps__step--done {
  border-bottom-color: var(--lr-bronze, #9b736e);
}

.lr-enquiry-form .pl-form-steps__index,
.pl-form-overlay .pl-form-steps__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.66rem;
  letter-spacing: 0;
  flex: 0 0 auto;
}

.lr-enquiry-form .pl-form-steps__step--current .pl-form-steps__index,
.pl-form-overlay .pl-form-steps__step--current .pl-form-steps__index {
  background: var(--lr-bronze, #9b736e);
  border-color: var(--lr-bronze, #9b736e);
  color: var(--lr-soft-black, #24231f);
}

.lr-enquiry-form .pl-form-steps__label,
.pl-form-overlay .pl-form-steps__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Auf schmalen Viewports bleibt nur die Nummer plus der AKTUELLE Titel —
   drei abgeschnittene Wörter nebeneinander helfen niemandem. */
@media (max-width: 34rem) {
  .lr-enquiry-form .pl-form-steps__step:not(.pl-form-steps__step--current) .pl-form-steps__label,
  .pl-form-overlay .pl-form-steps__step:not(.pl-form-steps__step--current) .pl-form-steps__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .lr-enquiry-form .pl-form-steps__step,
  .pl-form-overlay .pl-form-steps__step { flex: 0 1 auto; }
  .lr-enquiry-form .pl-form-steps__step--current,
  .pl-form-overlay .pl-form-steps__step--current { flex: 1 1 auto; }
}

/* ================================================================
   2. Auswahl-Karten (Schritt 1)
   ================================================================ */
.lr-selection__intro,
.lr-selection__empty p {
  margin: 0 0 1.6rem;
  max-width: 46ch;           /* Zeilenlaenge — KEINE Sektionsbreite */
  font-size: 0.95rem;
  line-height: 1.6;
}

.lr-selection__list {
  display: grid;
  gap: var(--lr-enq-gap);
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}

.lr-selection__item { position: relative; }

.lr-selection__card {
  display: grid;
  grid-template-columns: auto 5.5rem 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--lr-enq-line);
  border-radius: var(--lr-enq-radius);
  cursor: pointer;
  transition: border-color 0.35s, background-color 0.35s;
}

.lr-selection__card:hover { border-color: var(--lr-bronze, #9b736e); }

/* Fokus gehoert sichtbar an die KARTE, nicht nur an das kleine Kaestchen. */
.lr-selection__card:has(.lr-selection__check:focus-visible) {
  outline: 2px solid var(--lr-bronze, #9b736e);
  outline-offset: 2px;
}

.lr-selection__check {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--lr-bronze, #9b736e);
  flex: 0 0 auto;
  margin: 0;
}

.lr-selection__media {
  display: block;
  width: 5.5rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--lr-ivory-deep, #eee8e4);
}

.lr-selection__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lr-selection__media-empty { display: block; width: 100%; height: 100%; }

.lr-selection__body { display: block; min-width: 0; }

.lr-selection__type {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 0.25rem;
}

.lr-selection__title {
  display: block;
  font-family: var(--lr-font-display, serif);
  font-size: 1.12rem;
  line-height: 1.25;
}

.lr-selection__context,
.lr-selection__meta,
.lr-selection__price {
  display: block;
  font-size: 0.82rem;
  opacity: 0.8;
  margin-top: 0.15rem;
}

.lr-selection__price { opacity: 1; }

.lr-selection__more {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Angebote („ausserdem gemerkt") stehen bewusst zurueckhaltender. */
.lr-selection__offers { margin-top: 2rem; }

.lr-selection__offers-title {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
  margin: 0 0 0.9rem;
}

.lr-selection__item--offer .lr-selection__card {
  border-style: dashed;
  /* Eigene Flaeche: drei gestrichelte Rahmen untereinander verschmelzen sonst
     optisch zu EINEM Kasten (Screenshot 375 px, 09/2026). */
  background: color-mix(in srgb, currentColor 4%, transparent);
}

/* Die gestrichelten Raender mehrerer Angebote wuerden sonst zu einem einzigen
   Kasten verschmelzen — sie sollen als einzelne Karten lesbar bleiben. */
.lr-selection__list--offers { gap: max(1.1rem, var(--lr-enq-gap)); }
.lr-selection__list--offers .lr-selection__item + .lr-selection__item { margin-top: 0.2rem; }

.lr-selection__overviews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lr-selection__overviews a {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.lr-selection__error { color: #9c4a3c; font-size: 0.82rem; }

@media (max-width: 30rem) {
  .lr-selection__card { grid-template-columns: auto 1fr; }
  .lr-selection__media { display: none; }
}

/* ================================================================
   3. Formularfelder — gemeinsamer Anker fuer Seite UND Overlay
   ================================================================
   Die Sektion auf der Anfrage-Seite bringt ihre eigenen Varianten-Regeln in
   lr-enquire.css mit; hier steht die Grundoptik, damit das Formular auch im
   Overlay (wo das CB-Asset nicht geladen ist) vollstaendig gestaltet ist. */
.lr-enquiry-form .form-group { position: relative; margin-bottom: 1.1rem; }

.lr-enquiry-form .form-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.lr-enquiry-form input:not([type="checkbox"]):not([type="radio"]),
.lr-enquiry-form select,
.lr-enquiry-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--lr-enq-line);
  border-radius: 0;
  padding: 0.55rem 0;
  font-family: var(--lr-font-body, inherit);
  font-size: 1.05rem;
  color: inherit;
  transition: border-color 0.4s;
}

.lr-enquiry-form textarea { resize: vertical; min-height: 3.5rem; }

.lr-enquiry-form input:focus,
.lr-enquiry-form select:focus,
.lr-enquiry-form textarea:focus {
  outline: none;
  border-color: var(--lr-bronze, #9b736e);
}

/* Einwilligung: Kaestchen und Text nebeneinander, nicht untereinander.
   Die Klassen stammen aus dem Checkbox-Partial von EXT:form
   (`.form-element-check` > `.form-check-wrapping-label` > input + label) —
   NICHT `.form-check`. Ohne eine explizite Breite am Kaestchen wird es vom
   Flex-Container aufgeblasen und die Beschriftung rutscht als 1-Zeichen-Spalte
   an den rechten Rand (gemessen 09/2026, Screenshot step3-1280). */
.lr-enquiry-form .form-element-check { margin-bottom: 1.1rem; }

.lr-enquiry-form .form-check-wrapping-label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.lr-enquiry-form .form-check-wrapping-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--lr-bronze, #9b736e);
  /* Gegen Underline-Regeln aus dem Block-CSS: eine Checkbox bleibt eine Checkbox. */
  appearance: auto;
  -webkit-appearance: checkbox;
  border: initial;
  background: initial;
  border-radius: initial;
  padding: 0;
}

.lr-enquiry-form .form-check-wrapping-label .form-check-label {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  max-width: 60ch;
}

.lr-enquiry-form .error,
.lr-enquiry-form .form-text {
  font-size: 0.8rem;
  color: #9c4a3c;
  margin-top: 0.4rem;
}

/* Knopfleiste des Wizards: „Zurueck" links, „Weiter"/„Absenden" rechts. */
.lr-enquiry-form .actions nav,
.pl-form-overlay .actions nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  margin-top: 1.8rem;
}

.lr-enquiry-form .actions button,
.pl-form-overlay .actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1.05em 2.1em;
  font-family: var(--lr-font-body, inherit);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  border: 1px solid var(--lr-bronze, #9b736e);
  background: var(--lr-bronze, #9b736e);
  color: var(--lr-soft-black, #24231f);
  transition: filter 0.4s, transform 0.4s;
}

.lr-enquiry-form .actions button:hover,
.pl-form-overlay .actions button:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Der erste Knopf ist „Zurueck", sobald es zwei gibt — zurueckhaltend. */
.lr-enquiry-form .actions button:not(:only-child):first-child,
.pl-form-overlay .actions button:not(:only-child):first-child {
  background: transparent;
  color: inherit;
  border-color: var(--lr-enq-line);
  margin-right: auto;
}

/* ================================================================
   4. Das Overlay
   ================================================================ */
.lr-enquiry-shell { display: contents; }

/* Der Rumpf besorgt nur den Stand der Merkliste — er darf nichts anzeigen und
   nichts ueberdecken. */
.lr-enquiry-shell__favorites {
  display: none !important;
}

dialog.pl-form-overlay {
  width: min(100%, 68rem);
  max-width: 100%;
  max-height: 100dvh;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lr-on-dark, #f3efed);
  overflow: visible;
}

dialog.pl-form-overlay::backdrop {
  background: rgba(24, 23, 21, 0.72);
  backdrop-filter: blur(6px);
}

.pl-form-overlay__panel {
  position: relative;
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 0;
  background: var(--lr-charcoal, #2b2a27);
  max-height: 100dvh;
}

.pl-form-overlay__aside {
  padding: clamp(2rem, 4vw, 3.2rem);
  background: var(--lr-soft-black, #24231f);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
}

.lr-enquiry-aside__eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lr-bronze, #9b736e);
  margin: 0;
}

.lr-enquiry-aside__title {
  font-family: var(--lr-font-display, serif);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  margin: 0;
}

.lr-enquiry-aside__text {
  font-size: 0.92rem;
  line-height: 1.6;
  opacity: 0.78;
  margin: 0;
  max-width: 32ch;
}

.lr-enquiry-aside__contact { margin: 0; font-size: 0.86rem; }
.lr-enquiry-aside__contact a { color: inherit; text-decoration: underline; text-underline-offset: 0.25em; }

/* Loader (atomic-loader.css) auf dunkler Panel-Flaeche: dunkle Abdeckung,
   Ring in Bronze. Das Panel traegt `data-a-loader-host` (pl-form-overlay.js). */
.pl-form-overlay__panel {
  --a-loader-backdrop: rgb(43 42 39 / 0.6);
  --a-loader-color: var(--lr-bronze, #9b736e);
}

.pl-form-overlay__body {
  padding: clamp(2rem, 4vw, 3.2rem);
  overflow-y: auto;
  max-height: 100dvh;
}

.pl-form-overlay__close {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.4rem 0.5rem;
}

.pl-form-overlay__close-label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pl-form-overlay__close:focus-visible {
  outline: 2px solid var(--lr-bronze, #9b736e);
  outline-offset: 2px;
}

.pl-form-overlay__loading {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}

.pl-form-overlay__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Innerhalb des Overlays laeuft alles auf dunklem Grund. */
.pl-form-overlay .lr-enquiry-form,
.pl-form-overlay .lr-enquiry-form input,
.pl-form-overlay .lr-enquiry-form select,
.pl-form-overlay .lr-enquiry-form textarea { color: var(--lr-on-dark, #f3efed); }

.pl-form-overlay .lr-enquiry-form input:not([type="checkbox"]),
.pl-form-overlay .lr-enquiry-form select,
.pl-form-overlay .lr-enquiry-form textarea { border-bottom-color: var(--lr-enq-line-dark); }

.pl-form-overlay .lr-enquiry-form select option { color: var(--lr-soft-black, #24231f); background: var(--lr-ivory, #f7f4f2); }

.pl-form-overlay .lr-enquiry-form ::placeholder { color: rgba(243, 239, 237, 0.4); }

.pl-form-overlay .lr-selection__card { border-color: var(--lr-enq-line-dark); }
.pl-form-overlay .lr-selection__media { background: rgba(243, 239, 237, 0.08); }
.pl-form-overlay .pl-form-steps__step { border-bottom-color: var(--lr-enq-line-dark); }
.pl-form-overlay .lr-enquiry-form .error { color: #ffd3c7; }

/* Die Enquire-Sektion bringt im Overlay ihr Zwei-Spalten-Raster nicht mit —
   dort ist nur der Formular-Container eingehaengt. */
.pl-form-overlay .lr-enquiry-form { max-width: 40rem; }

@media (max-width: 60rem) {
  .pl-form-overlay__panel { grid-template-columns: 1fr; }
  .pl-form-overlay__aside { padding-bottom: 1.4rem; }
  .pl-form-overlay__aside .lr-enquiry-aside__text,
  .pl-form-overlay__aside .lr-enquiry-aside__contact { display: none; }
  dialog.pl-form-overlay { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lr-selection__card,
  .lr-enquiry-form .actions button,
  .lr-enquiry-form input,
  .lr-enquiry-form select,
  .lr-enquiry-form textarea { transition: none; }
}

/* ===========================================================================
   Eingabefelder IM OVERLAY sichtbar machen
   ---------------------------------------------------------------------------
   Gemeldet 02.09.2026: „in dem overlay anfrage formular sind die selects und
   input nicht sichtbar."

   Befund (gemessen): Die Felder standen auf `background: rgba(0,0,0,0)` und
   `border: 0px none` — auf der dunklen Panel-Flaeche `rgb(57,53,54)` war nur
   noch der Text zu sehen, das Feld selbst nicht. Auf der hellen Anfrage-SEITE
   traegt die Unterstrich-Optik des Formular-CSS; im Overlay faellt sie weg.

   Deshalb hier NUR fuer den Overlay-Kontext eine eigene Feld-Optik. Bewusst
   nicht global: die Seite /anfrage soll ihre helle Variante behalten.

   Farbwerte als Alpha auf der Textfarbe statt als feste Hex-Werte — so bleibt
   die Optik an die Palette gebunden und traegt auch, wenn die Panel-Flaeche
   spaeter eine andere Stufe bekommt. Der Rahmen liegt bei 0.45 Alpha, weil
   darunter die 3:1-Schwelle fuer Bedienelement-Raender (WCAG 1.4.11) reisst —
   nachgerechnet gegen rgb(57,53,54), nicht geschaetzt.
   =========================================================================== */
/* AUSSCHLUSS statt Aufzaehlung: `input[type="text"]` trifft ein `<input name="x">`
   OHNE type-Attribut NICHT — der Browser behandelt es als Text, der Selektor
   nicht. Genau daran ist der erste Anlauf gescheitert (Rahmen blieb 0px). */
.pl-form-overlay :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
                     select, textarea),
.pl-form-modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
                   select, textarea) {
    background-color: rgba(243, 239, 237, 0.07);
    border: 1px solid rgba(243, 239, 237, 0.45);
    border-radius: 2px;
    padding: 0.55rem 0.8rem;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* Auswahllisten: das native Dreieck ist auf dunklem Grund kaum zu sehen. */
.pl-form-overlay select,
.pl-form-modal select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(243, 239, 237, 0.75) 50%),
                      linear-gradient(135deg, rgba(243, 239, 237, 0.75) 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.2rem;
}

/* Platzhalter muss lesbar bleiben, ohne mit echtem Inhalt verwechselt zu werden. */
.pl-form-overlay ::placeholder,
.pl-form-modal ::placeholder {
    color: rgba(243, 239, 237, 0.62);
    opacity: 1;
}

.pl-form-overlay :is(input, select, textarea):hover,
.pl-form-modal :is(input, select, textarea):hover {
    border-color: rgba(243, 239, 237, 0.68);
}

/* Fokus traegt Rahmen UND Flaeche — nicht nur den Browser-Ring, der auf dieser
   Flaeche ebenfalls schwach ist. */
.pl-form-overlay :is(input, select, textarea):focus-visible,
.pl-form-modal :is(input, select, textarea):focus-visible {
    border-color: var(--lr-bronze, #dbc3c1);
    background-color: rgba(243, 239, 237, 0.12);
    outline: 2px solid var(--lr-bronze, #dbc3c1);
    outline-offset: 2px;
}

/* Kontrollkaestchen sind KEINE Textfelder — sie behalten ihre eigene Optik.
   (Die Unterstrich-Regel des Formular-CSS hatte sie am 01.09. schon einmal zu
   einem 577 px breiten Strich gemacht; hier nicht wiederholen.) */
.pl-form-overlay :is(input[type="checkbox"], input[type="radio"]),
.pl-form-modal :is(input[type="checkbox"], input[type="radio"]) {
    background-image: none;
    padding: 0;
}