/* ═══════════════════════════════════════════════════════════════════
   Weserburg Adaptive Search – Stylesheet
   Fonts : Montserrat (loaded from Google Fonts via WordPress theme or
           added via @import below)
   Colors: beige #E8E3D8 · black #1A1A1A · white #FFFFFF
   ═══════════════════════════════════════════════════════════════════ */

/*
 * Google-Fonts-Import entfernt (20.08.2026).
 *
 * Montserrat liefert das Theme lokal aus (assets/css/style.min.css definiert alle
 * Schnitte auf assets/fonts/Montserrat-*.woff2). Der Import hier war eine Dublette
 * und hat die IP des Besuchers schon vor jeder Einwilligung an Google geschickt.
 *
 * Hinweis fuer den Fall, dass dieses Plugin je in einem anderen Theme laeuft:
 * Dann muss dieses Theme Montserrat mitbringen, sonst faellt die Schrift auf den
 * sans-serif-Fallback zurueck. Optisch aendert sich sonst nichts.
 */

/* ── Variables ──────────────────────────────────────────────────── */
#weserburg-adaptive-search {
      --was-beige   : #E8E3D8;
      --was-black   : #1A1A1A;
      --was-white   : #FFFFFF;
      --was-border  : rgba(26,26,26,0.18);
      --was-shadow  : 0 4px 32px rgba(26,26,26,0.10);
      --was-radius  : 4px;
      --was-font    : 'Montserrat', sans-serif;
      --was-trans   : 0.22s ease;
    
      font-family : var(--was-font);
      color       : var(--was-black);
      width       : 100%;
      box-sizing  : border-box;
}

#weserburg-adaptive-search *,
#weserburg-adaptive-search *::before,
#weserburg-adaptive-search *::after {
      box-sizing: inherit;
}

/* ── Search Bar ─────────────────────────────────────────────────── */
.was-search-wrapper {
      display        : flex;
      flex-direction : column;
      align-items    : center;
      gap            : 12px;
      width          : 100%;
      padding        : 8px 0;
}

.was-search-bar-container {
      display       : flex;
      align-items   : center;
      width         : 100%;
      max-width     : 860px;
      background    : var(--was-white);
      border        : none;
      border-radius : 50px;
      box-shadow    : var(--was-shadow);
      overflow      : hidden;
      transition    : box-shadow var(--was-trans);
}

.was-search-bar-container:focus-within {
      box-shadow : 0 4px 40px rgba(26,26,26,0.22);
}

.was-input {
      flex        : 1;
      border      : none;
      outline     : none;
      background  : transparent;
      font-family : var(--was-font);
      font-size   : 0.95rem;
      font-weight : 400;
      color       : var(--was-black);
      padding     : 11px 22px;
      line-height : 1.4;
}

.was-input::placeholder {
      color   : rgba(26,26,26,0.45);
      font-weight: 300;
}

.was-input--error {
      animation: was-shake 0.32s ease;
}

@keyframes was-shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-6px); }
    60%     { transform: translateX(6px); }
}

.was-submit {
      flex-shrink    : 0;
      display        : flex;
      align-items    : center;
      justify-content: center;
      width          : 40px;
      height         : 40px;
      margin         : 5px;
      background     : var(--was-black);
      border         : none;
      border-radius  : 50px;
      color          : var(--was-white);
      cursor         : pointer;
      transition     : background var(--was-trans), transform var(--was-trans);
}
.was-mic {
      flex-shrink    : 0;
      display        : flex;
      align-items    : center;
      justify-content: center;
      width          : 36px;
      height         : 36px;
      margin-right   : 4px;
      border         : none;
      border-radius  : 50%;
      background     : transparent;
      color          : #888;
      cursor         : pointer;
      transition     : color 0.2s, background 0.2s;
      padding        : 0;
}
.was-mic:hover {
      color          : #333;
      background     : rgba(0,0,0,0.06);
}
.was-mic--active {
      color          : #c0392b !important;
      background     : rgba(192,57,43,0.1) !important;
      animation      : was-pulse 1s infinite;
}
@keyframes was-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1); }
}


.was-submit:hover {
      background : #333;
      transform  : scale(1.05);
}

.was-submit:active {
      transform: scale(0.97);
}

.was-hint {
      font-size   : 0.76rem;
      font-weight : 400;
      color       : rgba(26,26,26,0.5);
      text-align  : center;
      margin      : 0;
      letter-spacing: 0.01em;
}

/* ── Loading (Kreis + „Ihre Situation wird analysiert …“) ─ */
/*
 * Kein direktes Kind .was-search-wrapper während des Ladens: bei .was-hero--hidden
 * blendet das Theme .was-search-wrapper per display:none aus (Snippet 465).
 * .was-inline-loading = nur Leisten-/Hero-Suchbereich, kein 100vh-Vollbild-Host.
 */
.was-inline-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 16px 16px;
  box-sizing: border-box;
}

.was-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.was-spinner {
  display: block;
  width: 32px;
  height: 32px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top: 2.5px solid #fff;
  border-radius: 50%;
  animation: was-spin 0.8s linear infinite;
}

@keyframes was-spin {
    to { transform: rotate(360deg); }
}

/* ── Result ─────────────────────────────────────────────────────── */
.was-result {
      width     : 100%;
      animation : was-fadein 0.45s ease;
}

@keyframes was-fadein {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.was-result-headline {
      font-size     : clamp(1.2rem, 3vw, 1.6rem);
      font-weight   : 700;
      color         : var(--was-white);
      text-align    : center;
      margin        : 0 0 36px;
      line-height   : 1.3;
      letter-spacing: -0.01em;
}

/* Theme begrenzt .hero-section-main__content h2 auf 48rem — Ergebnis-Titel darf die volle Kachelbreite nutzen */
.was-result-headline,
.hero-section-main__content h2.was-result-headline {
      max-width    : 100%;
      width        : 100%;
      margin-left  : auto;
      margin-right : auto;
}

/* ── Content Blocks ─────────────────────────────────────────────── */
.was-blocks {
      display               : grid;
      grid-template-columns : repeat(auto-fit, minmax(220px, 1fr));
      gap                   : 20px;
      margin-bottom         : 36px;
}

.was-block {
      background    : rgba(255,255,255,0.07);
      border        : 1px solid rgba(255,255,255,0.15);
      border-radius : var(--was-radius);
      padding       : 28px 24px;
      transition    : background var(--was-trans), border-color var(--was-trans);
      /* Flex-Spalte: „Mehr erfahren“ sitzt in allen Kacheln unten auf gleicher Höhe */
      display        : flex;
      flex-direction : column;
}

.was-block:hover {
      background   : rgba(255,255,255,0.12);
      border-color : rgba(255,255,255,0.28);
}

.was-block-icon {
      display     : block;
      font-size   : 1.6rem;
      margin-bottom: 14px;
      line-height : 1;
}

.was-block-title {
      font-size     : 0.88rem;
      font-weight   : 600;
      color         : var(--was-white);
      margin        : 0 0 10px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
}

/*
 * Theme/WPCode setzt responsive h3 { font-size: clamp(…) !important } —
 * das bläst die Kachel-Titel bei schmaleren Fenstern auf 30px auf.
 * Gegenregel mit höherer Spezifität + !important hält die Kachel-Größe stabil.
 */
h3.was-block-title {
      font-size  : 0.88rem !important;
      line-height: 1.4 !important;
}

.was-block-text {
      font-size   : 0.87rem;
      font-weight : 400;
      color       : rgba(255,255,255,0.82);
      line-height : 1.65;
      margin      : 0;
}

/* ── If widget is on a light background ─────────────────────────── */
.was-light .was-result-headline,
.was-light .was-block-title {
      color: var(--was-black);
}

.was-light .was-block {
      background   : var(--was-beige);
      border-color : var(--was-border);
}

.was-light .was-block-text {
      color: rgba(26,26,26,0.75);
}

/* ── Klickbare Kacheln: KI-Detailtext auf Klick ─────────────────── */
.was-block--clickable {
      cursor          : pointer;
      -webkit-user-select: none;
      user-select     : none;
      transition      : background var(--was-trans), border-color var(--was-trans), opacity 0.22s ease;
}

/*
 * Desktop: geklickte Kachel breitet sich horizontal über die volle Zeile aus
 * (Grid-Spalten 1fr↔0fr animiert, --was-cols setzt das JS), Nachbarn blenden aus.
 * Mobil (≤600px, einspaltig) bleibt das klassische Aufklappen nach unten.
 */
@media (min-width: 601px) {
      .was-blocks {
            grid-template-columns: var(--was-cols, repeat(auto-fit, minmax(220px, 1fr)));
            transition: grid-template-columns 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        gap 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      .was-blocks--solo {
            gap: 0px;
      }

      .was-block--fading {
            opacity        : 0;
            pointer-events : none;
      }

      /*
       * Fade-Through: Beim Öffnen/Schließen blendet der Inhalt der geklickten Kachel
       * aus, die leere Fläche animiert ihre Breite (kein Text-Umbruch-Flackern),
       * danach blendet der Inhalt im Ziel-Layout wieder ein.
       */
      .was-block--clickable > * {
            transition: opacity 0.16s ease;
      }

      .was-block--clickable .was-block-more {
            transition: color var(--was-trans), opacity 0.16s ease;
      }

      .was-block--anim > * {
            opacity: 0 !important;
      }

      .was-block--ghost {
            padding    : 0 !important;
            border-width: 0 !important;
            min-width  : 0;
            overflow   : hidden;
      }

      .was-block--ghost > * {
            display: none;
      }

      /* Ausgebreitete Kachel: Text über volle Kachelbreite, linksbündig, ruhige Seitenränder */
      .was-block--open {
            padding-left  : clamp(28px, 4.5vw, 64px);
            padding-right : clamp(28px, 4.5vw, 64px);
      }

      .was-block--open .was-block-title,
      .was-block--open .was-block-text,
      .was-block--open .was-block-detail-text {
            text-align: left;
      }
}

@keyframes wasDetailFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
}

.was-block-detail-text {
      animation: wasDetailFadeIn 0.35s ease both;
}

.was-block--clickable:focus-visible {
      outline        : 2px solid rgba(255,255,255,0.75);
      outline-offset : 3px;
}

.was-block-more {
      display        : inline-flex;
      align-items    : center;
      align-self     : center;
      gap            : 7px;
      margin-top     : auto;
      padding-top    : 16px;
      font-size      : 0.72rem;
      font-weight    : 600;
      letter-spacing : 0.09em;
      text-transform : uppercase;
      color          : rgba(255,255,255,0.6);
      transition     : color var(--was-trans);
}

.was-block-more svg {
      flex-shrink : 0;
      transition  : transform var(--was-trans);
}

.was-block--clickable:hover .was-block-more,
.was-block--open .was-block-more {
      color: var(--was-white);
}

.was-block--open .was-block-more svg {
      transform: rotate(45deg);
}

.was-block-detail {
      margin-top  : 14px;
      padding-top : 14px;
      border-top  : 1px solid rgba(255,255,255,0.15);
}

.was-block-detail[hidden] {
      display: none;
}

.was-block-detail-text {
      font-size   : 0.85rem;
      font-weight : 400;
      color       : rgba(255,255,255,0.9);
      line-height : 1.65;
      margin      : 0;
}

.was-block-detail-loading {
      margin : 0;
      color  : rgba(255,255,255,0.7);
}

.was-light .was-block-more {
      color: rgba(26,26,26,0.55);
}

.was-light .was-block--clickable:hover .was-block-more,
.was-light .was-block--open .was-block-more {
      color: var(--was-black);
}

.was-light .was-block--clickable:focus-visible {
      outline-color: rgba(26,26,26,0.6);
}

.was-light .was-block-detail {
      border-top-color: var(--was-border);
}

.was-light .was-block-detail-text {
      color: rgba(26,26,26,0.8);
}

@media (prefers-reduced-motion: reduce) {
      .was-block-more svg,
      .was-blocks,
      .was-block--clickable {
            transition: none !important;
      }
      .was-block-detail-text {
            animation: none;
      }
}

/* ── CTA Button ─────────────────────────────────────────────────── */
.was-cta-wrapper {
      display         : flex;
      justify-content : center;
      /*
       * Der KI-Hinweis darueber hat margin-bottom: 0, dieser Block hatte
       * keinen margin-top - gemessen am 26.08.2026 standen zwischen
       * Hinweistext und Knopf exakt NULL Pixel, waehrend darunter 74
       * folgten. Der Text klebte am Knopf, die Abstaende standen verkehrt
       * herum. Der Hinweis gehoert optisch zu den Antworten darueber,
       * der Knopf ist die naechste Handlung - dazwischen muss Luft sein.
       */
      margin-top      : 32px;
      margin-bottom   : 24px;
}

.was-cta {
      display         : inline-block;
      padding         : 15px 40px;
      background      : var(--was-white);
      color           : var(--was-black);
      font-family     : var(--was-font);
      font-size       : 0.85rem;
      font-weight     : 600;
      letter-spacing  : 0.08em;
      text-transform  : uppercase;
      text-decoration : none;
      border-radius   : var(--was-radius);
      transition      : background var(--was-trans), color var(--was-trans),
                              transform var(--was-trans);
}

.was-cta:hover {
      background : var(--was-beige);
      color      : var(--was-black);
      transform  : translateY(-2px);
}

/* ── Nachfragefeld unter dem Ergebnis ───────────────────────────── */
/*
 * Hatte bisher gar keine Regel. Gemessen am 26.08.2026: zwischen dem
 * Feld und "Neue Suche" darunter standen NULL Pixel - sichtbar blieben
 * nur die 8px Innenabstand des Knopfes. Dasselbe Muster wie beim
 * Hinweistext ueber dem Einschaetzungs-Knopf.
 *
 * Gesetzt wird der Abstand hier und nicht an `.was-reset`: den gibt es
 * an fuenf Stellen (Ergebnis, Rueckfall, Fehler, Zurueck, Angaben
 * aendern), `.was-followup` nur an dieser einen.
 */
.was-followup {
      margin-bottom : 16px;
}

/* ── Reset / Back Button ────────────────────────────────────────── */
.was-reset {
      display         : block;
      margin          : 0 auto;
      background      : transparent;
      border          : none;
      color           : rgba(255,255,255,0.55);
      font-family     : var(--was-font);
      font-size       : 0.78rem;
      font-weight     : 500;
      letter-spacing  : 0.04em;
      cursor          : pointer;
      padding         : 8px 12px;
      transition      : color var(--was-trans);
}

.was-reset:hover {
      color: var(--was-white);
}

/* ── Fallback / Error ───────────────────────────────────────────── */
.was-fallback-text {
      text-align  : center;
      color       : rgba(255,255,255,0.78);
      font-size   : 0.95rem;
      margin      : 0 0 32px;
}

.was-error {
      text-align : center;
      padding    : 32px 24px;
      animation  : was-fadein 0.35s ease;
}

.was-error p {
      color       : rgba(255,255,255,0.72);
      font-size   : 0.9rem;
      margin      : 0 0 24px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
      .was-input {
              font-size : 0.9rem;
              padding   : 10px 16px;
    }
    
      .was-blocks {
              grid-template-columns: 1fr;
    }
    
      .was-cta {
              width      : 100%;
              text-align : center;
    }

      .was-journey-next-btn.was-journey-next-btn--primary {
              width      : 100%;
              text-align : center;
    }
    
      .was-result-headline {
              font-size: 1.15rem;
    }
}

/* Hide browser-native speech input button */
.was-input::-webkit-input-speech-button {
  display: none !important;
}
.was-input::-webkit-contacts-auto-fill-button {
  display: none !important;
}

/* Suppress ALL browser-injected input decorations */
.was-input::-webkit-search-cancel-button,
.was-input::-webkit-search-decoration,
.was-input::-webkit-search-results-button,
.was-input::-webkit-search-results-decoration,
.was-input::-webkit-credentials-auto-fill-button,
.was-input::-webkit-caps-lock-indicator { display:none!important; width:0!important; }

/* ── Markteinschätzungs-Journey (Screen 4 / 5) ───────────────────── */
.was-journey-next-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.was-journey-next-btn {
  display: inline-block;
  padding: 14px 28px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.85);
  color: var(--was-white);
  font-family: var(--was-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--was-radius);
  transition: background var(--was-trans), color var(--was-trans), border-color var(--was-trans);
}

.was-journey-next-btn:hover {
  background: var(--was-white);
  color: var(--was-black);
  border-color: var(--was-white);
}

/* Ehem. Platz von „Jetzt Kontakt aufnehmen“: gleiche Fläche wie .was-cta */
.was-journey-next-btn.was-journey-next-btn--primary {
  padding: 15px 40px;
  background: var(--was-white);
  color: var(--was-black);
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.was-journey-next-btn.was-journey-next-btn--primary:hover {
  background: var(--was-beige);
  color: var(--was-black);
  transform: translateY(-2px);
}

.was-journey {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 12px 0 32px;
  animation: was-fadein 0.45s ease;
}

.was-journey-screen4 {
  /* 2× Preis-Karte (max 280px) + gap 20px — E-Mail-Pille bündig darunter */
  --was-journey-span-cards-max: min(100%, calc(280px + 280px + 20px));
  /* H2 + Untertitel: gemeinsame Zeilenbreite (Untertitel bricht bündig zur Headline) */
  --was-journey-screen4-kopf-max: min(100%, 52rem);
  /* Markt+CTA-Zeile: dieselbe nutzbare Breite wie Kopf-Block (bündig links/rechts) */
  --was-journey-deep-row-total: var(--was-journey-screen4-kopf-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(100%, 85rem);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(0.75rem, 4vw, 2rem);
  padding-right: clamp(0.75rem, 4vw, 2rem);
  box-sizing: border-box;
}

.was-journey-screen4-kopf {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--was-journey-screen4-kopf-max);
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.was-journey-screen4-kopf .was-journey-h2--screen4-full {
  width: 100%;
}

.was-journey-screen4-kopf .was-journey-subtitle,
.was-journey-screen4-kopf .was-journey-subtitle--full {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 32px;
  box-sizing: border-box;
}

.was-journey-h2--screen4-full {
  /* Volle Breite des Kopf-Blocks: dieselbe Außenkante wie Markt+CTA-Zeile (Text bleibt zentriert) */
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 0;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: clamp(0.62rem, 3.55vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: center;
}

.was-journey-subtitle--full {
  max-width: 48rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.was-journey-h2 {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 700;
  color: var(--was-white);
  text-align: center;
  margin: 0 0 14px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Kleinere Überschrift nur im Mikro-Schritt (Qualifizierung) */
.was-journey-h2--micro {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  margin-bottom: 10px;
  line-height: 1.22;
}

/* Mikro-Zwischenüberschrift: gleiche 40rem-Fluchtlinie wie Lead und Felder
   (h2-Selektor zusätzlich, um Theme-Regel .hero-section-main__content h2 zu überstimmen) */
.hero-section-main__content h2.was-journey-h2--micro-full,
.was-journey-h2--micro-full {
  max-width: 40rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  font-size: clamp(1.2rem, 3.2vw, 1.75rem);
  line-height: 1.2;
  text-align: left;
}

.was-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hero: Seitentitel (h1) und Einleitung (h5) während Bewertungs-Flow ausblenden */
body.was-journey-flow .hero-section-main__content > h1,
body.was-journey-flow .hero-section-main__content > h5 {
  display: none !important;
}

/*
 * Theme .hero-section-main: height 90vh, justify-content center, z-index -1.
 * Der Mikro-Journey ist höher → unterer Bereich ragt in den nächsten Abschnitt;
 * wegen z-index:-1 liegt er darunter: Button unsichtbar / nicht klickbar.
 * Während des Flows: Hero wachsen lassen, oben ausrichten, über Nachbar-Sections stapeln.
 */
body.was-journey-flow .hero-section-main {
  z-index: 2;
  position: relative;
  height: auto;
  min-height: 90vh;
  /* Oben ausrichten: sonst wirkt langer Ergebnis-Stack „zu hoch“, Überschrift unter fixer Nav */
  justify-content: flex-start;
  overflow: visible;
}

/*
 * Kein pauschales display:none auf .hero-section-main::after im Normalzustand: Themes nutzen ::after
 * oft für zweiten Hero-/Slider-Layer. Nach Suche (body.was-submitted) blenden wir das Theme-::after
 * gezielt aus — dort ist es i. d. R. ein weißer ~10px-Balken, nicht der Bild-Slider.
 */

/*
 * Theme-::after am Hero: oft ein weißer ~10px-Balken (background #fff). Unterdrücken nach Suche
 * und während Markt-Journey (was-journey-flow), falls das Theme dort dasselbe Pseudo setzt.
 * margin-bottom am Hero bewusst NICHT auf 0: sonst rutschen Überschrift/Kacheln nach oben (Rhythmus).
 */
body.was-submitted .hero-section-main::after,
body.was-journey-flow .hero-section-main::after,
body.was-submitted #heroSectionMain::after,
body.was-journey-flow #heroSectionMain::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/*
 * nav::after ist im Theme KEIN Deko-Balken, sondern die weiße Navbar-Fläche
 * (nav.scrolledDown:after, 4.963rem, style.css). Im KI-Flow erzwingen wir sie
 * vollflächig — unabhängig davon, ob das Theme-jQuery scrolledDown schon gesetzt hat.
 * html-Präfix: gewinnt gegen das ältere WPCode-Inline-Snippet mit gleichem Selektor.
 */
html body.was-submitted nav::after,
html body.was-journey-flow nav::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 4.963rem !important;
  background-color: #fff !important;
}

body.was-journey-flow .hero-section-main__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  width: 100%;
  max-width: min(85rem, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-top: calc(clamp(5rem, 11vh, 7.5rem) + env(safe-area-inset-top, 0px));
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  padding-left: clamp(0.75rem, 2.5vw, 1.5rem);
  padding-right: clamp(0.75rem, 2.5vw, 1.5rem);
  box-sizing: border-box;
}

body.was-journey-flow #weserburg-adaptive-search {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* scrollIntoView(block:'start') + fixe Navbar: Abstand nach oben */
  scroll-margin-top: calc(clamp(5rem, 11vh, 7.5rem) + env(safe-area-inset-top, 0px));
}

/* Theme: .was-hero--hidden blendet die Suchleiste im Hero aus — nicht während Markt-Journey */
body.was-journey-flow #weserburg-adaptive-search.was-hero--hidden {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
}

/* Journey: keine Hero-Sticky-Suche in der Nav (JS blendet Klasse aus; CSS erzwingt Layout) */
body.was-journey-flow #was-sticky-wrapper {
  display: none !important;
}

/* Theme .navbarHeader hat margin-top: 1rem — erzeugt Lücke unter fixer Nav */
body.was-journey-flow nav.nav-class {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  z-index: 1000 !important;
  box-sizing: border-box;
}

body.was-journey-flow .navbarHeader,
body.was-journey-flow #navBarHeader {
  margin-top: 0 !important;
}

body.was-journey-flow header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html:has(body.was-journey-flow) {
  scroll-padding-top: calc(clamp(5rem, 11vh, 7.5rem) + env(safe-area-inset-top, 0px));
}

body.was-journey-flow .was-journey-screen5 {
  scroll-margin-top: calc(clamp(5rem, 11vh, 7.5rem) + env(safe-area-inset-top, 0px));
}

.was-journey-subtitle {
  min-height: 1.6em;
  font-size: clamp(0.95rem, 2.2vw, 1.12rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.93);
  text-align: center;
  margin: 0 auto 32px;
  line-height: 1.55;
  max-width: 38rem;
}

.was-skeleton-dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  color: var(--was-white);
  opacity: 0.5;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.2em;
}

.was-skeleton-dots span {
  display: inline-block;
  animation: was-dot-pulse 1.1s ease-in-out infinite;
}

.was-skeleton-dots span:nth-child(2) { animation-delay: 0.15s; }
.was-skeleton-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes was-dot-pulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-2px); }
}

.was-journey-values {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 8px;
  width: 100%;
  max-width: var(--was-journey-span-cards-max, min(100%, 580px));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.was-journey-value-card {
  flex: 1 1 160px;
  max-width: 280px;
  /*
   * Oben 2px mehr als unten - und das ist Absicht, kein Tippfehler.
   * Ziffern haben keine Unterlaengen, der Zeilenkasten reserviert den
   * Platz dafuer trotzdem. Bei gleichem Innenabstand sitzt der Inhalt
   * deshalb sichtbar zu hoch. Nachgemessen an der Tinte (Canvas-
   * Metriken, nicht an den Kaesten): mit 26/24 standen 30px ueber und
   * 35px unter dem Text.
   */
  padding: 28px 22px 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  /* wie .was-journey-market-card: blur + Radius → ggf. heller Rand / Artefakte */
  overflow: hidden;
}

.was-journey-value-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 12px;
}

.was-journey-value-num {
  /*
   * min-height reserviert die Hoehe fuer die Ladepunkte, damit die
   * Kachel nicht springt, wenn die Zahl eintrifft. Sie ist aber 4px
   * hoeher als die Zeile der Ziffern - und bei `display: block`
   * sammelte sich dieser Ueberschuss vollstaendig UNTER der Zahl.
   *
   * Zusammen mit dem Zeilenkasten, der Platz fuer Unterlaengen
   * reserviert, die Ziffern gar nicht haben, sass der Inhalt sichtbar
   * zu hoch: gemessen am 26.08.2026 standen 30px ueber der Tinte und
   * 35px darunter. Flex verteilt den Ueberschuss auf beide Seiten -
   * und zentriert zugleich die Ladepunkte.
   */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
}

.was-journey-value-num-digits {
  display: inline-block;
  font-size: clamp(1.5rem, 4.5vw, 2.05rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #ffffff;
  line-height: 1.15;
}

/* Verschleierung: Beträge nicht lesbar (stärkerer Weichzeichner + Aufhellung) */
.was-journey-values--blur .was-journey-value-num-digits {
  filter: blur(18px) contrast(0.55) brightness(1.35);
  -webkit-filter: blur(18px) contrast(0.55) brightness(1.35);
  opacity: 0.42;
  text-shadow:
    0 0 48px rgba(255, 255, 255, 1),
    0 0 28px rgba(255, 255, 255, 0.95),
    0 0 12px rgba(255, 255, 255, 0.85);
  transform: translateZ(0) scale(1.02);
  user-select: none;
  pointer-events: none;
}

.was-journey-values:not(.was-journey-values--blur) .was-journey-value-num-digits {
  filter: none;
  -webkit-filter: none;
  text-shadow: none;
}

/*
 * Pflichthinweis an der Wertspanne — bewusst EINE Zeile.
 *
 * Vorher standen hier vier Zeilen Kleingedrucktes direkt unter dem Preis und
 * haben genau den Moment zugestellt, auf den die ganze Strecke hinarbeitet.
 * Pflicht ist nur zweierlei: dass die Zahl automatisiert erzeugt wurde und dass
 * sie unverbindlich und kein Wertgutachten ist. Beides steht sichtbar hier.
 * Der Rest liegt hinter „Was heißt das?" — nicht versteckt, nur nachgeordnet.
 * Der KI-Hinweis nach Art. 50 EU AI Act steht ohnehin schon an der Suchleiste,
 * also beim ersten Kontakt, und muss nicht bei jeder Ausgabe wiederholt werden.
 */
.was-journey-value-hint {
  font-size: 0.74rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin: 0 auto 22px;
  max-width: min(44rem, 100%);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.was-hint-toggle {
  font-family: inherit;
  font-size: inherit;
  color: rgba(255, 255, 255, 0.72);
  background: none;
  border: 0;
  padding: 0;
  margin-left: 0.5em;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.was-hint-toggle:hover,
.was-hint-toggle:focus-visible {
  color: #fff;
}

.was-journey-value-detail {
  font-size: 0.74rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.52);
  text-align: center;
  margin: -12px auto 22px;
  max-width: min(38rem, 100%);
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* Upside-Hinweis (Wert kann höher liegen) dezent hervorheben – Conversion-Hebel */
.was-journey-value-hint strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.was-journey-email-block {
  margin-bottom: 20px;
}

.was-journey-screen4 .was-journey-email-block {
  width: 100%;
  max-width: var(--was-journey-span-cards-max, min(100%, 580px));
  box-sizing: border-box;
}

.was-journey-email-label {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
}

.was-journey-email-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: center;
  /* stretch + weiße Fläche: unten kann sichtbarer weißer Streifen entstehen (Flex/Subpixel) */
  align-items: center;
  width: 100%;
  max-width: var(--was-journey-span-cards-max, min(100%, 580px));
  margin: 0 auto;
  padding: 4px 6px 4px 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.was-journey-email {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 8px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  font-family: var(--was-font);
  font-size: 0.9rem;
  color: var(--was-black);
  text-align: center !important;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.was-journey-email:focus,
.was-journey-email:focus-visible,
.was-journey-email:active {
  outline: none !important;
  outline-offset: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Höhere Spezifität / Theme-Overrides: kein schwarzes Fokus-Rechteck */
#weserburg-adaptive-search input.was-journey-email:focus,
#weserburg-adaptive-search input.was-journey-email:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Safari/Chrome: kein sichtbares Innen-Rechteck / Autofill-Rand */
.was-journey-email:-webkit-autofill,
.was-journey-email:-webkit-autofill:hover,
.was-journey-email:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--was-black);
  transition: background-color 99999s ease-out;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.99) inset;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.99) inset;
}

.was-journey-email::placeholder {
  color: rgba(26, 26, 26, 0.45);
  text-align: center;
}

.was-journey-email-hint {
  margin: 10px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.was-journey-unlock-btn {
  flex-shrink: 0;
  padding: 14px 22px;
  margin: 2px;
  background: var(--was-black);
  color: var(--was-white);
  border: none;
  border-radius: 999px;
  font-family: var(--was-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--was-trans), opacity var(--was-trans), transform var(--was-trans);
}

.was-journey-unlock-btn:hover:not(:disabled) {
  background: #333;
  transform: translateY(-1px);
}

.was-journey-unlock-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.was-journey-unlock-btn--busy:disabled {
  cursor: wait;
}

/* Optionale, ungated „Marktbericht per Mail"-Erfassung (ersetzt das frühere E-Mail-Gate) */
.was-journey-report-block {
  margin-top: 4px;
  margin-bottom: 30px;
}

.was-journey-report-done {
  width: 100%;
  max-width: var(--was-journey-span-cards-max, min(100%, 580px));
  margin: 0 auto;
  padding: 14px 18px;
  box-sizing: border-box;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}

.was-journey-report-done strong {
  color: #fff;
  font-weight: 600;
}

/* Screen 4: Marktdaten + CTA (Tiefen-Bereich, jetzt sofort sichtbar) */
.was-journey-deep-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.was-journey-deep-reveal--in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Markt-Erklärung (breiter) + CTA (schmaler): gleiche Außenmaße wie .was-journey-screen4-kopf, Flex 3/2, gleiche Höhe */
.was-journey-deep-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-self: center;
  align-items: stretch;
  gap: 24px;
  width: var(--was-journey-screen4-kopf-max, min(100%, 52rem));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 16px;
  padding: 0;
  box-sizing: border-box;
}

.was-journey-deep-row > * {
  min-width: 0;
  min-height: 0;
}

/* Rechte Spalte: volle Zeilenhöhe, Bewertung oben / WhatsApp unten */
.was-journey-deep-cta-pair {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 2 1 0%;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.was-journey-market-wrap {
  display: flex;
  flex-direction: column;
  flex: 3 1 0%;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}

.was-journey-market-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 22px 20px 20px;
  background: rgba(30, 30, 30, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
  /* Langer Markttext: nicht abschneiden (Vorgabe Screen 4) */
  overflow: visible;
}

.was-journey-market-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 14px;
  text-align: left;
}

.was-journey-market-inner {
  flex: 1 1 auto;
  min-height: 0;
  text-align: left;
}

/* Reserviert Höhe während Skeleton: Raster + CTA-Höhe von Anfang an stimmig, Text zieht nach */
.was-journey-market-inner--pending {
  min-height: min(22rem, 52vh);
}

.was-journey-market-a {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

.was-journey-market-sep {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 12px 0;
}

.was-journey-market-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 8px;
}

.was-journey-market-bullet-mark {
  flex-shrink: 0;
  width: 0.65em;
  text-align: center;
  line-height: inherit;
}

.was-journey-market-bullet-txt {
  flex: 1;
  min-width: 0;
}

.was-journey-market-bullet:last-of-type {
  margin-bottom: 0;
}

.was-journey-market-strong {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #fff;
}

.was-journey-market-strong strong {
  font-weight: 600;
  color: #fff;
}

.was-journey-market-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.was-journey-market-skeleton span {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  animation: was-market-sk 1.15s ease-in-out infinite;
}

.was-journey-market-skeleton span:nth-child(1) {
  width: 100%;
}

.was-journey-market-skeleton span:nth-child(2) {
  width: 94%;
}

.was-journey-market-skeleton span:nth-child(3) {
  width: 88%;
}

.was-journey-market-skeleton span:nth-child(4) {
  width: 62%;
}

@keyframes was-market-sk {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.58;
  }
}

.was-journey-cta-tile {
  min-width: 0;
  min-height: 0;
  padding: 12px 12px 10px;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* Buchung kompakt; volle Spaltenbreite — rechte Spalte streckt sich mit linker Kartenhöhe (Grid stretch) */
.was-journey-cta-tile--light {
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  padding: 8px 10px 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.was-journey-cta-tile--light .was-journey-cta-icon {
  margin-bottom: 4px;
}

.was-journey-cta-tile--light .was-journey-cta-title {
  margin-bottom: 2px;
}

.was-journey-cta-tile--light .was-journey-cta-sub {
  margin-bottom: 6px;
}

.was-journey-cta-tile--wa {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  min-width: 0;
  padding: 14px 14px 12px;
  background: rgba(30, 30, 30, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.22);
  align-items: stretch;
  justify-content: flex-start;
}

.was-journey-cta-tile--wa .was-journey-cta-icon {
  margin-bottom: 6px;
}

.was-journey-cta-tile--wa .was-journey-cta-sub {
  margin-bottom: 12px;
}

.was-journey-wa-btn-wrap {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.was-journey-cta-icon {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 6px;
}

.was-journey-cta-icon--cal {
  color: #fff;
}

.was-journey-cta-icon--wa {
  color: #25d366;
}

.was-journey-cta-title {
  margin: 0 0 4px;
  font-size: clamp(0.78rem, 1.15vw, 1rem);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.was-journey-cta-sub {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.7);
}

.was-journey-cta-slots {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  flex: 0 0 auto;
  min-height: 0;
}

.was-journey-slot {
  width: 100%;
  padding: 7px 11px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(10, 12, 18, 0.55);
  color: #fff;
  font-family: var(--was-font), 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    background var(--was-trans),
    color var(--was-trans),
    border-color var(--was-trans);
}

.was-journey-slot:hover:not(.was-journey-slot--picked) {
  background: rgba(18, 22, 32, 0.72);
  border-color: rgba(255, 255, 255, 0.32);
}

.was-journey-slot--picked {
  background: #fff !important;
  color: var(--was-black) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.was-journey-slot-check {
  margin-right: 6px;
  font-weight: 700;
}

/* Versteckte native date/time für dritte Kachel (showPicker / focus) */
.was-journey-wish-inputs {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.was-journey-wish-inputs input {
  position: absolute;
  left: 0;
  top: 0;
  width: 140px;
  height: 44px;
  opacity: 0;
  margin: 0;
  /* Native Zeit-Popup nach eigenem Monatskalender */
  color-scheme: dark;
  font-family: var(--was-font), 'Montserrat', sans-serif;
  accent-color: rgba(200, 210, 230, 0.85);
}

/* Ein-Monats-Wunschdatum (Overlay, kein natives date-UI) */
.was-journey-wish-cal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(10, 12, 18, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.was-journey-wish-cal-card {
  width: 100%;
  max-width: 320px;
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-sizing: border-box;
  background: #1e2229;
  color: #f2f4f8;
  font-family: var(--was-font), 'Montserrat', sans-serif;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.was-journey-wish-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.was-journey-wish-cal-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}

.was-journey-wish-cal-nav {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.was-journey-wish-cal-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
}

.was-journey-wish-cal-nav:disabled {
  opacity: 0.28;
  cursor: default;
}

.was-journey-wish-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

.was-journey-wish-cal-wd {
  padding: 4px 0;
}

.was-journey-wish-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.was-journey-wish-cal-day {
  min-height: 38px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.12s ease,
    transform 0.12s ease;
}

.was-journey-wish-cal-day:hover:not(:disabled):not(.was-journey-wish-cal-day--empty) {
  background: rgba(120, 160, 255, 0.35);
  transform: scale(1.02);
}

.was-journey-wish-cal-day:disabled:not(.was-journey-wish-cal-day--empty) {
  opacity: 0.3;
  cursor: not-allowed;
}

.was-journey-wish-cal-day--empty {
  background: transparent;
  cursor: default;
  pointer-events: none;
}

.was-journey-wish-cal-foot {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.was-journey-wish-cal-close {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--was-font), 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
}

.was-journey-wish-cal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.was-journey-book-email {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  font-family: var(--was-font);
  font-size: 13px;
  color: var(--was-black);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.was-journey-book-email::placeholder {
  color: rgba(26, 26, 26, 0.45);
}

.was-journey-book-email:focus {
  border-color: rgba(255, 255, 255, 0.75);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.was-journey-book-email.was-input--error {
  border-color: #e06a5a;
  box-shadow: 0 0 0 2px rgba(224, 106, 90, 0.28);
}

.was-journey-book-btn {
  width: 100%;
  margin-top: 6px;
  padding: 9px 14px;
  box-sizing: border-box;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: var(--was-black);
  font-family: var(--was-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--was-trans),
    opacity var(--was-trans),
    transform var(--was-trans);
}

.was-journey-book-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}

.was-journey-book-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.was-journey-book-btn--busy:disabled {
  cursor: wait;
}

.was-journey-book-hint {
  margin: 4px 0 0;
  min-height: 1.35em;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.65);
  text-align: left;
}

/* Direkt unter Buchen + Footer: leerer Hinweis soll keinen Platzhalter erzwingen */
.was-journey-book-hint:empty {
  display: none;
  margin: 0;
  min-height: 0;
}

.was-journey-book-footer {
  margin-top: 0;
  padding-top: 0;
  text-align: left;
}

.was-journey-book-footer[hidden] {
  display: none !important;
}

.was-journey-book-footer .was-journey-cta-micro--booking {
  margin: 0 0 2rem 0;
}

.was-journey-dsgvo {
  margin: 0;
  text-align: left;
}

/*
 * Sichtbares Kästchen: Viele Themes nullen native Checkboxen (appearance/size).
 * Native Input bleibt für Klick/Keyboard/screen reader, .was-journey-dsgvo-box ist die Optik.
 */
.was-journey-dsgvo-label {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 10px;
  align-items: start;
  margin: 0;
  font-family: var(--was-font), 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.was-journey-dsgvo-check {
  grid-column: 1;
  grid-row: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  margin-top: 1px;
  padding: 0;
  opacity: 0.02;
  cursor: pointer;
  z-index: 2;
  align-self: start;
  justify-self: start;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
}

.was-journey-dsgvo-box {
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  justify-self: start;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  background: rgba(8, 10, 14, 0.45);
  pointer-events: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.was-journey-dsgvo-check:checked + .was-journey-dsgvo-box {
  background-color: #fff;
  border-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3 3 7-7'/%3E%3C/svg%3E");
  background-size: 11px 9px;
  background-position: 50% 45%;
  background-repeat: no-repeat;
}

.was-journey-dsgvo-check:focus-visible + .was-journey-dsgvo-box {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 2px;
}

.was-journey-dsgvo-text {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.was-journey-dsgvo-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.was-journey-dsgvo-link:hover {
  color: rgba(255, 255, 255, 0.92);
}

.was-journey-dsgvo-nolink {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.was-journey-cta-micro {
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  flex-shrink: 0;
}

.was-journey-cta-tile--light .was-journey-cta-micro:not(.was-journey-cta-micro--booking) {
  margin: 5px 0 0;
}

.was-journey-cta-tile--wa .was-journey-cta-micro {
  margin-top: 6px;
  margin-bottom: 0;
  width: 100%;
}

.was-journey-wa-btn {
  width: auto;
  max-width: 100%;
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  background: #25d366;
  color: #fff;
  font-family: var(--was-font);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    filter var(--was-trans),
    transform var(--was-trans);
}

.was-journey-cta-tile--wa .was-journey-wa-btn {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 13px 18px;
  font-size: 0.82rem;
}

.was-journey-wa-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.was-journey-screen4 > .was-reset {
  margin-top: 24px;
}

#was-journey-back {
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.2s ease;
}

#was-journey-back:hover {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 768px) {
  .was-journey-deep-row {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    gap: 24px;
  }

  .was-journey-market-wrap,
  .was-journey-deep-cta-pair {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .was-journey-deep-cta-pair {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .was-journey-market-inner--pending {
    min-height: 13rem;
  }

  .was-journey-cta-tile {
    flex: none;
    height: auto;
    padding: 22px 18px 18px;
  }

  .was-journey-cta-tile--light {
    padding: 12px 14px 10px;
  }

  .was-journey-cta-slots {
    flex: none;
  }

  .was-journey-cta-tile--light .was-journey-cta-micro:not(.was-journey-cta-micro--booking) {
    margin-top: 6px;
  }

  .was-journey-cta-tile--wa {
    flex: 1 1 auto;
    min-height: 12rem;
    padding: 18px 16px 14px;
  }

  .was-journey-cta-tile--wa .was-journey-cta-micro {
    margin-top: 10px;
  }

  .was-journey-wa-btn-wrap {
    flex: 1 1 auto;
    min-height: 6rem;
  }

  .was-journey-cta-title {
    font-size: 18px;
  }

  .was-journey-cta-sub {
    font-size: 13px;
    margin-bottom: 18px;
  }

  .was-journey-slot {
    padding: 10px 16px;
  }

  .was-journey-dsgvo-label,
  .was-journey-dsgvo-text {
    font-size: 11px;
  }

  .was-journey-wa-btn {
    padding: 14px 16px;
  }
}

/*
 * Markt-Journey (Screen 4/5): nur sehr schmale Viewports (≥601px = bisheriges Layout).
 * Safe Areas, umbrechende Headline, Preis-Karten untereinander, kompaktere Typo, größere Tap-Ziele.
 */
@media (max-width: 600px) {
  body.was-journey-flow .hero-section-main__content {
    padding-top: calc(clamp(4rem, 9vh, 6rem) + env(safe-area-inset-top, 0px));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
  }

  .was-journey-screen4 {
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  }

  /* Lange Zeile „Ihre vorläufige Markteinschätzung“: ohne nowrap kein horizontaler Scroll */
  .was-journey-h2--screen4-full {
    white-space: normal;
    line-height: 1.18;
    font-size: clamp(0.68rem, 4.1vw, 1.35rem);
  }

  .was-journey-subtitle--full,
  .was-journey-subtitle {
    margin-bottom: 22px;
    font-size: clamp(0.88rem, 3.4vw, 1.05rem);
    padding: 0 2px;
  }

  .was-journey-screen4-kopf .was-journey-subtitle--full {
    margin-bottom: 22px;
  }

  .was-journey-values {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 100%;
  }

  .was-journey-value-card {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
    /* Oben mehr als unten, gleiche Begruendung wie in der Grundregel:
       Ziffern haben keine Unterlaengen. Hier gemessen 22px ueber und
       28px unter der Tinte. Betrifft ein schmal gezogenes
       Desktop-Fenster - die Mobilfassung laedt dieses Plugin gar
       nicht (Whitelist in inc/mobile/assets.php des Themes). */
    padding: 21px 14px 13px;
    box-sizing: border-box;
  }

  .was-journey-value-num-digits {
    font-size: clamp(1.22rem, 6.5vw, 1.72rem);
  }

  .was-journey-value-hint {
    font-size: 0.72rem;
    margin-bottom: 18px;
    padding: 0 2px;
  }

  .was-journey-deep-row {
    gap: 12px;
    max-width: 100%;
  }

  .was-journey-market-card {
    padding: 16px 12px 14px;
  }

  .was-journey-market-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
  }

  .was-journey-market-a {
    font-size: 13px;
  }

  .was-journey-market-bullet {
    font-size: 12px;
  }

  .was-journey-screen5 {
    margin-top: 24px;
    padding-top: 20px;
  }

  .was-journey-h3 {
    font-size: 0.98rem;
    margin-bottom: 14px;
    padding: 0 4px;
  }

  .was-journey-quote {
    font-size: 0.88rem;
    line-height: 1.6;
    padding: 0 4px;
  }

  .was-journey-cite {
    font-size: 0.78rem;
    padding: 0 6px;
  }

  .was-journey-book-btn {
    min-height: 44px;
    box-sizing: border-box;
  }

  .was-journey-slot {
    min-height: 44px;
    padding: 12px 14px;
    box-sizing: border-box;
  }

  .was-journey-wa-btn {
    min-height: 48px;
    box-sizing: border-box;
  }

  .was-journey-screen4 > .was-reset {
    margin-top: 20px;
    padding: 10px 16px;
    min-height: 44px;
    box-sizing: border-box;
  }
}

.was-journey-screen5 {
  margin-top: 36px;
  padding-top: 28px;
  /* Kein border-top: wirkte auf manchen Displays wie zusätzlicher heller Querstrich unter dem Ergebnis-Block */
}

.was-journey-h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--was-white);
  text-align: center;
  margin: 0 0 18px;
}

.was-journey-quote {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.9);
  margin: 0 auto 12px;
  max-width: 36rem;
  text-align: center;
  font-style: normal;
}

.was-journey-cite {
  display: block;
  text-align: center;
  font-size: 0.82rem;
  font-style: normal;
  color: rgba(255,255,255,0.6);
  margin-bottom: 24px;
}

/* ── Navbar: Sticky-Suche (außerhalb #weserburg-adaptive-search) ── */
/*
 * Theme: Nach Suche / in der Journey bleibt die Nav oft transparent. Sobald unsere
 * Sticky-Suche eingeblendet ist, gleicher weißer Balken wie auf der gescrollten Startseite.
 */
nav.nav-class .navbarHeader:has(#was-sticky-wrapper.was-sticky--visible),
#navBarHeader:has(#was-sticky-wrapper.was-sticky--visible),
header .navbarHeader:has(#was-sticky-wrapper.was-sticky--visible) {
  background-color: #ffffff !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/*
 * KI-Flow: gleiche Nav wie Theme „gescrollt“ (nav.scrolledDown) — Logo-Tausch, falls Theme-jQuery später läuft.
 */
body.was-flow-nav-solid .logo-header-weserburg-white-big {
  display: none !important;
}

body.was-flow-nav-solid .logo-header-weserburg-dunkel-big,
body.was-flow-nav-solid .logo-header-weserburg-dunkel-big.lazy {
  display: block !important;
  position: relative !important;
}

/*
 * Breite nur über width animieren (kein min-width-Sprung neben max-width).
 * margin-left: Abstand zum Logo, width: Platz für Logo + KONTAKT/Telefon reservieren.
 */
#was-sticky-wrapper {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  transition:
    width 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.2s ease-out,
    margin 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

#was-sticky-wrapper.was-sticky--visible {
  flex: 0 0 auto;
  align-self: center;
  width: min(32rem, max(15.5rem, calc(100vw - 21rem)));
  margin: 0 0.75rem 0 clamp(1.25rem, 3.2vw, 3rem);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Theme: gleiche Anthrazit-Fläche wie Burger-Bereich bei gescrollter Nav (#333333, vgl. style.css nav.scrolledDown .burger-span) */
  --was-sticky-surface: #333333;
  --was-sticky-text: #f5f5f5;
  --was-sticky-placeholder: rgba(255, 255, 255, 0.52);
  /* Eine abgerundete Fläche: vermeidet helle „Ecken“ zwischen Rechteck-Wrapper und Pill */
  border-radius: 9999px;
  background: var(--was-sticky-surface);
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
  color-scheme: dark;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (max-width: 992px) {
  /* Mobile-Audit (iOS): Sticky-Suche war 225px breit und ueberdeckte auf dem
     iPhone (393px) den Burger-Button (Logo 147 + Suche 225 + Burger passt nicht
     in 393). Schmaler + kleineres Input-min-width, damit Logo | Suche | Burger
     nebeneinander passen, ohne den Submit-Button abzuschneiden. */
  #was-sticky-wrapper.was-sticky--visible {
    width: min(18rem, max(9rem, calc(100vw - 14rem)));
    margin: 0 0.5rem 0 clamp(0.65rem, 2vw, 1.35rem);
  }
  /* Bar-min-width + Input-min-width senken, sonst schiebt der 44px-Touch-Target-
     Submit ueber die schmalere Wrapper-Kante und wird von overflow:hidden geclippt.
     WICHTIG: via #was-sticky-wrapper gescopet — die Basis-Regeln (.was-sticky-bar
     min-width:12rem, .was-sticky-input min-width:9.5rem) stehen SPAETER in der
     Datei; nur hoehere Spezifitaet (id) gewinnt zuverlaessig ohne !important. */
  #was-sticky-wrapper .was-sticky-bar {
    min-width: 0;
  }
  #was-sticky-wrapper .was-sticky-input {
    min-width: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #was-sticky-wrapper {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

/* Innen nur Layout; Farbe + Radius sitzen am Wrapper → keine grauen Rechteck-Ecken */
.was-sticky-bar {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 12rem;
  min-height: 42px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  overflow: hidden;
  color-scheme: dark;
}

.was-sticky-input {
  flex: 1 1 auto;
  align-self: stretch;
  /* min-width: 0 lässt das Input im Flex auf 0 schrumpfen → nur Submit sichtbar */
  min-width: 9.5rem;
  width: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  padding: 8px 10px 8px 16px;
  color: var(--was-sticky-text, #333333);
  caret-color: var(--was-sticky-text, #333333);
  line-height: 1.35;
}

.was-sticky-input:-webkit-autofill,
.was-sticky-input:-webkit-autofill:hover,
.was-sticky-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--was-sticky-surface, #333333) inset !important;
  box-shadow: 0 0 0 1000px var(--was-sticky-surface, #333333) inset !important;
  -webkit-text-fill-color: var(--was-sticky-text, #f5f5f5) !important;
}

.was-sticky-input::placeholder {
  color: var(--was-sticky-placeholder, rgba(51, 51, 51, 0.5));
}

.was-sticky-submit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 3px 4px 3px 0;
  padding: 0;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  color: #1a1a1a;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.was-sticky-submit:hover {
  background: #eceef2;
  transform: translateY(-1px);
}

body:not(.was-journey-flow) #weserburg-adaptive-search.was-hero--hidden > .was-search-wrapper {
  display: none !important;
}

/*
 * Theme blendet bei .was-hero--hidden oft den ganzen #weserburg-Block — dann wirken
 * KI-Antwort / Ladezustand / Journey unsichtbar. Sobald kein reines Start-Suchfeld mehr da ist: Host sichtbar.
 */
body:not(.was-journey-flow) #weserburg-adaptive-search.was-hero--hidden.was-loading-active,
body:not(.was-journey-flow) #weserburg-adaptive-search.was-hero--hidden:has(.was-result),
body:not(.was-journey-flow) #weserburg-adaptive-search.was-hero--hidden:has(.was-loading),
body:not(.was-journey-flow) #weserburg-adaptive-search.was-hero--hidden:has(.was-error),
body:not(.was-journey-flow) #weserburg-adaptive-search.was-hero--hidden:has(.was-journey) {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
}

/* Während classify: Sticky-Leiste kurz sperren (Anfrage läuft bereits) */
#was-sticky-wrapper.was-sticky--classify-pending .was-sticky-bar {
  opacity: 0.7;
  pointer-events: none;
}

#was-sticky-wrapper.was-journey-hidden {
  display: none !important;
}

@media (max-width: 600px) {
  .was-journey-email-row {
    flex-direction: column;
    align-items: stretch;
    /* weniger Padding unten: sonst wirkt wie breiter weißer Balken unter dem Button */
    padding: 12px 16px 8px;
    border-radius: 16px;
  }

  .was-journey-email {
    padding: 8px 6px;
    text-align: center;
  }

  .was-journey-unlock-btn {
    width: 100%;
    margin: 10px 0 0;
    border-radius: 12px;
  }
}

/* ── Journey: Mikro-Qualifizierung (Zwischenschritt) ───────────── */
/* Überschreibt .was-journey max-width 52rem – an Hero-Inhalt (ca. 85rem) anlehnen */
.was-journey.was-journey-micro {
  max-width: min(100%, 85rem);
}

.was-journey-micro {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(0.5rem, 3vw, 1.25rem);
  padding-right: clamp(0.5rem, 3vw, 1.25rem);
  box-sizing: border-box;
}

/*
 * Micro-Step: EIN gemeinsames Spalten-Raster (40rem, wie die Objekttyp-Karte).
 * Lead, Labels und alle Felder teilen dieselbe linke/rechte Fluchtlinie.
 */
.was-micro-lead {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
  margin: 0 auto 24px;
  max-width: 40rem;
}

.was-micro-field {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 26px;
}

.was-micro-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 12px;
  text-align: left;
}

/* Eine Karte: Kategorie-Kacheln + Dropdown direkt darin (nicht als separater Block darunter) */
.was-micro-objekt-card {
  max-width: 40rem;
  margin: 0 auto;
  padding: 16px 14px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.was-micro-cat-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.was-micro-cat-tile {
  padding: 16px 10px;
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--was-white);
  font-family: var(--was-font);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background var(--was-trans), border-color var(--was-trans), box-shadow var(--was-trans);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.was-micro-cat-tile:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.38);
}

.was-micro-cat-tile--active {
  background: rgba(255, 255, 255, 0.96);
  color: var(--was-black);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.was-micro-detail-on-tiles {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/*
 * Weiss und mit derselben Haarlinie wie die Eingabefelder.
 *
 * Vorher: 0.96 Weiss mit einem HELLEN Rahmen (fuer dunklen Grund gedacht).
 * Neben den Textfeldern mit ihrer dunklen Haarlinie sahen die Auswahlfelder
 * dadurch kantenlos aus — zwei Sorten Feld in einer Maske. Seit die
 * Textfelder weiss sind (03.09.2026, auf Ansage des Betreibers), ist der
 * Rahmen der einzige Unterschied gewesen.
 */
.was-micro-select {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: var(--was-radius);
  background: #ffffff;
  font-family: var(--was-font);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--was-black);
  cursor: pointer;
  appearance: auto;
}

.was-micro-select--embedded {
  max-width: none;
  margin: 0;
}

/*
 * In der Vermietungsspalte fuellt die Auswahl ihre Rasterspalte, damit sie
 * mit dem Mietfeld daneben auf einer Kante steht.
 *
 * Polster und Zeilenhoehe wie beim Baujahr-Feld: 42px Rahmenbox minus 2px
 * Rand ergibt 40px Innenraum. Mit den 14px aus `.was-micro-select` waere
 * der Text in der festen Hoehe abgeschnitten.
 */
.was-micro-vermietung-feld .was-micro-select {
  max-width: none;
  margin: 0;
  padding: 0 12px;
  line-height: 40px;
}

/* Micro-Step: Wohnfläche/Baujahr vs. nur Grundstücksgröße */
.was-micro-metrics-panel {
  display: none;
}

.was-micro-metrics-panel--active {
  display: block;
}

/* Grundstück: ein Feld in der linken Rasterspalte (gleiche Flucht wie Wohnfläche) */
.was-micro-metrics-grund {
  max-width: calc(50% - 10px);
  margin-left: 0;
  margin-right: auto;
}

.was-micro-metrics-grund .was-micro-qm-row--grund.was-micro-qm-row--suffixed {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
}

.was-micro-metrics-grund .was-micro-qm-shell {
  width: 100%;
  max-width: none;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: var(--was-radius);
  background: #ffffff;
  padding: 0 12px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.was-micro-metrics-grund .was-micro-qm-shell:focus-within {
  border-color: rgba(26, 26, 26, 0.28);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(232, 227, 216, 0.9);
}

.was-micro-metrics-grund .was-micro-qm-shell .was-micro-qm-input.was-micro-qm-input--infield-suffix {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--was-font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--was-black);
  text-align: left;
}

.was-micro-metrics-grund .was-micro-qm-shell .was-micro-qm-input.was-micro-qm-input--infield-suffix:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
}

.was-micro-metrics-grund .was-micro-qm-shell .was-micro-qm-input::placeholder {
  color: rgba(26, 26, 26, 0.4);
  font-weight: 500;
}

.was-micro-metrics-grund .was-micro-qm-shell .was-micro-qm-suffix {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 40px;
  height: 40px;
  color: rgba(26, 26, 26, 0.45);
  padding: 0;
  pointer-events: none;
}

/* Wohnfläche + Baujahr nebeneinander (Micro-Step) */
.was-micro-metrics-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 20px;
  max-width: none;
  margin: 0;
  align-items: stretch;
}

.was-micro-metric {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.was-micro-sublabel {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
  text-align: left;
}

.was-micro-metric .was-micro-qm-row {
  max-width: none;
  width: 100%;
  margin: 0;
  justify-content: center;
}

/* ── Vermietung: Auswahl und Kaltmiete ─────────────────────────────────
 *
 * Steht UNTER Wohnfläche und Baujahr, nicht daneben. Die beiden sind
 * Pflicht, das hier ist es nicht — als dritte Spalte hätte es ausgesehen
 * wie ein drittes Pflichtfeld.
 *
 * ── WARUM EIN AUSWAHLFELD UND KEIN HAKEN ──────────────────────────────
 * Der erste Entwurf hatte eine Checkbox, und in ihr erschien NIE ein
 * Haken. Der Grund liegt nicht am Plugin: `style.min.css` des Themes
 * setzt `input { -webkit-appearance: none }` auf das NACKTE Element.
 * Damit ist die native Zeichnung jeder Checkbox abgeschaltet — übrig
 * bleibt ein weißes Kästchen, das nie gefüllt aussieht, egal was
 * `accent-color` sagt.
 *
 * Ein Auswahlfeld ist hier ohnehin die bessere Frage: „Vermietet /
 * Unvermietet" hat zwei benannte Antworten, ein Haken nur eine und ein
 * Schweigen. Und es passt zur „Ausführung" darüber.
 */
/*
 * Zwei Spalten wie Wohnfläche und Baujahr darüber — die Kaltmiete steht
 * NEBEN der Auswahl, nicht darunter.
 *
 * Das Raster bleibt zweispaltig, auch wenn das Mietfeld versteckt ist. Die
 * Auswahl behält damit ihre Breite, statt beim Umschalten von halb auf
 * ganz zu springen. Ein Feld, das seine Größe ändert, während man daneben
 * etwas auswählt, sieht aus wie ein Fehler.
 */
.was-micro-vermietet {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
}

.was-micro-miete-hinweis {
  margin: 8px 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

/*
 * `hidden` allein reicht NICHT.
 *
 * Die Browservorgabe `[hidden] { display: none }` hat dieselbe Spezifität
 * wie eine Klassenregel, und bei Gleichstand schlägt der Autorenstil den
 * UA-Stil. `.was-micro-metric` setzt `display: flex` — das Mietfeld stand
 * also sichtbar da, obwohl es versteckt war. Am Bildschirm gesehen.
 *
 * Dieselbe Falle hat am 23.08.2026 im Theme zwei Elemente erwischt (der
 * Absendeknopf des Ratgebers blieb nach dem Erfolg klickbar). Dort steht
 * seither `[hidden]{display:none !important}` im Reset; hier genügt die
 * höhere Spezifität aus Klasse plus Attribut.
 */
/*
 * Das Mietfeld verschwindet mit `visibility`, nicht mit `display`.
 *
 * Waehrend der Journey steht der Hero auf `height: auto` (siehe
 * `body.was-journey-flow .hero-section-main` weiter oben). Das
 * Hintergrundbild liegt als `.wb-slide` mit `inset: 0` und
 * `background-size: cover` genau in diesem Kasten — jede Hoehenaenderung
 * rechnet `cover` neu, und das Foto zoomt sichtbar. Ein Feld, das
 * ein- und ausklappt, aendert die Hoehe um rund 70 px.
 *
 * `visibility: hidden` haelt den Platz frei. Wie `display: none` faellt
 * das Feld dabei aus Tabreihenfolge und Vorlesefluss.
 *
 * Der ganze Vermietungs-Block dagegen DARF einklappen: beim Wechsel auf
 * „Grundstueck" wechselt ohnehin die halbe Maske, ein reservierter Platz
 * fuer eine Frage, die dort nicht existiert, waere ein Loch.
 */
.was-micro-miete--aus {
  visibility: hidden;
}

.was-micro-vermietet[hidden] {
  display: none;
}

/*
 * Wohnfläche (Shell) + Baujahr: identische Außenmaße.
 * Vorher: Shell hatte min-height + anderes Padding als Baujahr → höher/breiter wirken.
 */
/*
 * Die Aussenmasse aller Felder der Metrik-Zeilen stehen HIER, an einer
 * Stelle. Das Auswahlfeld „Vermietung" gehoert seit 03.09.2026 dazu: es
 * kam mit den 14px Polster aus `.was-micro-select` und stand dadurch
 * hoeher als die Kaltmiete daneben — der Betreiber hat es gesehen.
 *
 * Es einfach in diese Liste zu nehmen ist mehr als eine Korrektur: waere
 * die Hoehe zweimal notiert, liefen die beiden beim naechsten Mal wieder
 * auseinander.
 */
.was-micro-metric .was-micro-baujahr-input,
.was-micro-metric .was-micro-qm-shell,
.was-micro-vermietung-feld .was-micro-select {
  width: 100%;
  max-width: none;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: var(--was-radius);
  background: #ffffff;
  font-family: var(--was-font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--was-black);
}

.was-micro-field--metrics {
  padding-top: 2px;
  margin-bottom: 14px;
}

/* Stadtteil: gleiche Fluchtlinie wie alle anderen Felder (erbt 40rem von .was-micro-field) */
.was-micro-field--stadtteil {
  margin-bottom: 26px;
}

.was-micro-qm-row--suffixed {
  display: block;
  max-width: none;
}

/* Flex: Zahl und m² im gemeinsamen Kasten (Rahmen auf .was-micro-metric .was-micro-qm-shell) */
.was-micro-qm-shell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
}

.was-micro-metric .was-micro-qm-shell {
  padding: 0 10px 0 12px;
  overflow: hidden;
  gap: 2px;
}

.was-micro-metric .was-micro-qm-shell:focus-within {
  border-color: rgba(26, 26, 26, 0.28);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(232, 227, 216, 0.9);
}

.was-micro-qm-shell .was-micro-qm-input--infield-suffix {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.was-micro-metric .was-micro-qm-shell .was-micro-qm-input--infield-suffix {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: 40px;
  height: 40px;
}

.was-micro-metric .was-micro-qm-shell .was-micro-qm-input--infield-suffix:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* Einheit m² im Feld rechts; Spinner ausblenden damit nichts überlappt */
.was-micro-qm-input--infield-suffix::-webkit-outer-spin-button,
.was-micro-qm-input--infield-suffix::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.was-micro-qm-input--infield-suffix {
  -moz-appearance: textfield;
  appearance: textfield;
}

.was-micro-qm-shell .was-micro-qm-suffix {
  flex: 0 0 auto;
  position: static;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.5);
  pointer-events: none;
  line-height: 1.25;
  padding: 0 10px 0 0;
  align-self: center;
}

.was-micro-metric .was-micro-qm-shell .was-micro-qm-suffix {
  font-size: 0.9rem;
  line-height: 40px;
  height: 40px;
  color: rgba(26, 26, 26, 0.45);
  padding: 0;
}

.was-micro-baujahr-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: var(--was-radius);
  background: #ffffff;
  font-family: var(--was-font);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  color: var(--was-black);
}

/* Metrik-Zeile: gleiche Innenhöhe wie Shell-Inhalt (42px Rahmenbox − 2px Rand) */
.was-micro-metric .was-micro-baujahr-input {
  padding: 0 12px;
  line-height: 40px;
  -moz-appearance: textfield;
  appearance: textfield;
}

.was-micro-baujahr-input::placeholder {
  color: rgba(26, 26, 26, 0.4);
  font-weight: 500;
}

.was-micro-baujahr-input:focus {
  outline: none;
  border-color: rgba(26, 26, 26, 0.28);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(232, 227, 216, 0.9);
}

/* Gleiche Optik wie Wohnfläche (ohne innere Spinner) */
.was-micro-metric .was-micro-baujahr-input::-webkit-outer-spin-button,
.was-micro-metric .was-micro-baujahr-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (max-width: 520px) {
  .was-micro-metrics-row,
  .was-micro-vermietet {
    grid-template-columns: 1fr;
  }

  .was-micro-metrics-grund {
    max-width: none;
    margin-right: 0;
  }
}

.was-micro-qm-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 280px;
  margin: 0 auto;
}

/* Spätere allgemeine .was-micro-qm-row-Regel darf Suffixed-Row nicht wieder zu Flex machen */
.was-micro-metric .was-micro-qm-row--suffixed {
  display: block;
}

.was-micro-qm-input {
  width: 100%;
  max-width: 200px;
  padding: 14px 16px;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: var(--was-radius);
  background: #ffffff;
  font-family: var(--was-font);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  color: var(--was-black);
}

.was-micro-qm-input::placeholder {
  color: rgba(26, 26, 26, 0.4);
  font-weight: 500;
}

.was-micro-qm-input:focus {
  outline: none;
  border-color: rgba(26, 26, 26, 0.28);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(232, 227, 216, 0.9);
}

/* Legacy: außerhalb des Feldes nicht mehr genutzt; Suffix im Shell-Block oben */
.was-micro-qm-row:not(.was-micro-qm-row--suffixed) .was-micro-qm-suffix {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.was-micro-text {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--was-radius);
  background: rgba(255, 255, 255, 0.95);
  font-family: var(--was-font);
  font-size: 0.9rem;
}

.was-micro-text--wide {
  max-width: none;
  width: 100%;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px;
  line-height: 40px;
  border: 1px solid rgba(26, 26, 26, 0.12);
  background: #ffffff;
  color: var(--was-black);
  font-size: 0.9rem;
  font-weight: 600;
}

.was-micro-text--wide::placeholder {
  color: rgba(26, 26, 26, 0.4);
  font-weight: 500;
}

.was-micro-text--wide:focus {
  outline: none;
  border-color: rgba(26, 26, 26, 0.28);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(232, 227, 216, 0.9);
}

.was-micro-actions {
  display: flex;
  justify-content: center;
  margin: 28px 0 16px;
}

.was-micro-actions .was-journey-next-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.was-micro-actions .was-journey-next-btn:disabled:hover {
  background: transparent;
  color: var(--was-white);
}

@media (min-width: 640px) {
  .was-micro-cat-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .was-micro-cat-tile {
    padding: 14px 8px;
    font-size: 0.72rem;
    min-height: 2.85rem;
  }
}

/* ── EU AI Act (Art. 50): Transparenzhinweise ─────────────────────────────── */
/*
 * Bewusst zurückhaltend gestaltet, aber ohne Tricks: gleiche Schriftfamilie,
 * ausreichender Kontrast, nicht ausgeblendet und nicht hinter einem Klick
 * versteckt — der Hinweis muss beim ersten Kontakt lesbar sein.
 */
.was-ai-note {
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  margin: 8px auto 0;
  max-width: 42rem;
  letter-spacing: 0.01em;
}

/*
 * Der Hinweis sitzt im Hero auf einem Foto. Ohne den Schatten steht heller Text
 * ueber hellen Bildstellen und wird stellenweise unlesbar — bei einem Hinweis,
 * der nach Art. 50 EU AI Act klar erkennbar sein muss, ist das keine Kosmetik.
 *
 * Id-Spezifitaet, weil das Theme .was-hint per Inline-Regel auf Weiss zieht und
 * einfache Klassen dort verlieren. Gleiche Lektion wie bei der Sticky-Suche in
 * 3.16.3: Overrides im Theme stehen spaeter und gewinnen sonst.
 */
#weserburg-adaptive-search .was-ai-note {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.was-ai-note--result,
#weserburg-adaptive-search .was-ai-note--result {
  color: rgba(255, 255, 255, 0.62);
  text-shadow: none;
  margin: 18px auto 0;
}

.was-privacy-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.was-privacy-link:hover,
.was-privacy-link:focus-visible {
  opacity: 0.75;
}

/* ── Kundenstimmen: Quelle + Einzelfall-Hinweis (§ 5 UWG) ─────────────────── */
.was-journey-quote-source {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.was-journey-quote-note {
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 auto 24px;
  max-width: 36rem;
}

/* ── Zurueck-Navigation auf der Markteinschaetzung ────────────────────────── */
/*
 * Zwei getrennte Wege: einen Schritt zurueck in die Eckdaten (der haeufige Fall
 * — Wohnflaeche vertippt, falscher Stadtteil) und der Totalneustart. Vorher gab
 * es nur Letzteren, wer sich vertippt hatte, musste die ganze Strecke neu gehen.
 */
.was-journey-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: center;
}

.was-reset--muted {
  opacity: 0.6;
}

.was-reset--muted:hover,
.was-reset--muted:focus-visible {
  opacity: 1;
}