/* ============================================================
   KONFIGURATOR 2.0 — Testversion (/brett-konfigurator-test)
   Einzelseite (normaler Header/Footer bleiben), 5 zusammengefasste
   Abschnitte statt 8, rechts eine sticky Preis-/Auswahl-Sidebar.

   Wiederverwendet fast vollständig Bausteine aus style.css:
   .cfg-option(-icon|-label|-sub|-check|-tick|-price), .cfg-options,
   .cfg-step(-header|-number|-title|-hint|-divider), .cfg-split-label,
   .cfg-level-*, .cfg-textarea*, .cfg-field, .cfg-terms*,
   .cfg-form-status, .cfg-fine-print, .chip, .callout, .cta-btn, .tag.
   Neu ist nur das Grundgerüst: 2-spaltiges Layout + sticky Sidebar.
============================================================ */

/* ============================================================
   HERO "3A ELFENBEIN-SCHLEIER" — nach Claude-Design-Vorlage
   (Projekt "Wooden-axe.de Hero-Header Konzepte", Hero Konzepte Hell.dc.html).
   Wiederverwendet .hero-eyebrow/.hero-headline/.hero-text aus style.css;
   Werte (Verlauf, Größen, Abstände) 1:1 aus der Vorlage übernommen.
============================================================ */
.hero-frame { background: var(--color-light); }

.hero-frame-stage { position: relative; }

/* Foto bleibt Vollbreite; .hero-frame-overlay ist .container,
   also exakt so breit wie der Rest der Seite */
.hero-frame-photo {
  position:            relative;
  aspect-ratio:         2.1 / 1;
  background-size:      cover;
  background-position:  center;
  background-repeat:    no-repeat;
}
.hero-frame-photo::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(80deg, #F8F4EF 30%, rgba(248,244,239,.05) 80%);
}

/* Eyebrow direkt auf dem Foto — nur mobil sichtbar (Desktop: siehe .hero-frame-eyebrow-inline) */
.hero-frame-eyebrow-photo { display: none; }

/* Bündelt Content + Footer als eine Flex-Spalte über dem Foto (Desktop)
   bzw. als normalen Block unter dem Foto (Mobil) */
.hero-frame-overlay {
  position:       absolute;
  inset:          0;
  z-index:        1;
  display:        flex;
  flex-direction: column;
}

.hero-frame-content {
  flex:            1;
  min-height:      0;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             1.25rem;
  max-width:       50%;
}
.hero-frame-eyebrow-inline { margin-bottom: 0; }
.hero-frame-content .hero-headline { font-size: clamp(2rem, 3.2vw, var(--font-h1)); margin: 0; }
.hero-frame-content .hero-text     { max-width: none; margin: 0; }

.hero-frame-ctas { display: flex; align-items: center; gap: 1.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.hero-frame-ctas .cta-btn { padding: 1rem 2.5rem; }
.hero-frame-price {
  font-size:      0.9rem;
  font-weight:    900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-gold);
  border:         1px solid rgba(159,99,6,.4);
  padding:        0.5rem 1.2rem;
  white-space:    nowrap;
}

/* Footer-Zeile: Desktop = Badges + Breadcrumb auf dem Foto (unterer
   Rand des Overlays); Mobil = kompakte Zeile (kurze Badges + Preis) */
.hero-frame-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-block:   1rem;
  border-top:      1px solid rgba(31,19,14,.12);
  border-bottom:   2px solid rgba(31,19,14,.12);
  font-size:       0.75rem;
  font-weight:     900;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           var(--color-text-muted);
}
.hero-frame-badges { display: flex; gap: 2.5rem; }

.hero-frame-badges-mobile { display: none; }
.hero-frame-price--mobile { display: none; }

@media (max-width: 768px) {
  .hero-frame-photo { aspect-ratio: 1 / 1; }
  .hero-frame-photo::after {
    background: linear-gradient(180deg, rgba(31,19,14,.35) 0%, rgba(31,19,14,.1) 55%);
  }

  .hero-frame-eyebrow-photo {
    display:        block;
    position:       absolute;
    top:            1rem;
    left:           1rem;
    z-index:        1;
    font-size:      0.75rem;
    font-weight:    900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          #F8F4EF;
    text-shadow:    1px 1px 1px rgba(0,0,0,.8);
  }
  .hero-frame-eyebrow-inline { display: none; }

  .hero-frame-overlay {
    position:       static;
    inset:          auto;
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    border-top:     4px solid var(--color-gold);
    padding:        1.5rem 1.25rem 1.25rem;
  }
  .hero-frame-content { flex: none; max-width: none; gap: 0.75rem; padding: 1rem 0; }
  .hero-frame-content .hero-text { color: var(--color-text-muted); }

  .hero-frame-ctas { display: block; margin-top: 0; }
  .hero-frame-ctas .cta-btn { display: block; width: 100%; text-align: center; padding: 1rem 1.5rem; }
  .hero-frame-price--desktop { display: none; }

  .hero-frame-footer {
    padding-block: 0;
    padding-top:   0.75rem;
    border-top:    1px solid var(--color-border);
  }
  .hero-frame-badges     { display: none; }
  .hero-frame-badges-mobile {
    display:        block;
    font-size:      0.7rem;
    letter-spacing: 0.12em;
  }
  .hero-frame-price--mobile { display: block; }
}

.cfg2-layout {
  display:             grid;
  grid-template-columns: 1fr 320px;
  gap:                  var(--space-lg);
  align-items:          start;
  padding-block:        var(--space-lg);
}

.cfg2-main { min-width: 0; }

.cfg2-main .cfg-step { margin-bottom: 0; margin-top: 0; }
.cfg2-main .cfg-step-divider { margin-block: 2.75rem; }

/* ── Sticky Sidebar ─────────────────────────────────────────── */
/* Aufgeteilt in scrollbaren Teil (Navigation + Auswahl) und einen
   fixen unteren Teil (Preis + Button) — der Button bleibt so immer
   sichtbar, egal wie lang die Auswahl-Liste wird. */
.cfg2-sidebar {
  position:       sticky;
  top:            calc(var(--header-h) + var(--space-md));
  display:        flex;
  flex-direction: column;
  background:     var(--color-primary);
  color:          var(--color-light);
  max-height:     calc(100vh - var(--header-h) - var(--space-md) * 2);
  overflow:       hidden;
}

.cfg2-sidebar-scroll {
  position:        relative;
  flex:            1 1 auto;
  min-height:      0;
  overflow-y:      auto;
  padding:         1.5rem 1.5rem 1rem;
  display:         flex;
  flex-direction:  column;
  gap:             1.1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(244,192,37,0.4) transparent;
}
.cfg2-sidebar-scroll::-webkit-scrollbar { width: 7px; }
.cfg2-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.cfg2-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(244,192,37,0.35); border-radius: 4px; }
.cfg2-sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(244,192,37,0.55); }

/* Dezenter Hinweis "hier geht's noch weiter runter" — Kind von
   .cfg2-sidebar-scroll, aber position:absolute macht es unabhängig
   vom Scroll-Inhalt: bleibt am unteren Rand des sichtbaren Bereichs
   fixiert, egal wie weit gescrollt wurde. Sichtbarkeit steuert JS
   (nur wenn es tatsächlich noch etwas zu sehen gibt). */
.cfg2-scroll-hint {
  position:        absolute;
  left:            50%;
  bottom:          0.35rem;
  transform:       translateX(-50%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      rgba(244,192,37,0.16);
  color:           var(--color-gold);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.2s ease, background-color 0.2s ease;
}
.cfg2-scroll-hint.is-visible { opacity: 1; pointer-events: auto; }
.cfg2-scroll-hint:hover { background: rgba(244,192,37,0.28); }
.cfg2-scroll-hint svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .cfg2-scroll-hint { transition: none; }
}

.cfg2-sidebar-fixed {
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  gap:            0.9rem;
  padding:        1rem 1.5rem 1.5rem;
}

.cfg2-nav { display: flex; flex-direction: column; gap: 0.3rem; }
.cfg2-nav-link {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  font-size:     0.85rem;
  font-weight:   700;
  color:         rgba(248,244,239,0.55);
  padding:       0.3rem 0;
  transition:    color 0.2s ease;
}
.cfg2-nav-link:hover { color: var(--color-light); }
.cfg2-nav-link .dot {
  flex-shrink:     0;
  width:           17px;
  height:          17px;
  border-radius:   50%;
  border:          1.5px solid rgba(255,255,255,0.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.6rem;
  color:           rgba(248,244,239,0.5);
}
.cfg2-nav-link.done { color: var(--color-light); }
.cfg2-nav-link.done .dot { background: var(--color-gold); border-color: var(--color-gold); color: #fff; }

.cfg2-sidebar-divider { height: 1px; background: rgba(255,255,255,0.1); }

.cfg2-summary-fields { display: flex; flex-direction: column; }
.cfg2-summary-sentence {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   1.05rem;
  line-height: 1.55;
  color:       var(--color-light-2);
  margin:      0;
}
.cfg2-summary-empty { font-size: var(--font-size-small); color: rgba(248,244,239,0.4); font-style: italic; }

.cfg2-price-label {
  font-size:      0.68rem;
  font-weight:    900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-gold);
}
.cfg2-price-num { font-family: var(--font-display); font-size: 2.2rem; margin: 0.15rem 0 0.25rem; }
.cfg2-price-note { font-size: 0.72rem; color: rgba(248,244,239,0.4); line-height: 1.4; }
.cfg2-fineprint  { font-size: 0.72rem; color: rgba(248,244,239,0.4); line-height: 1.4; text-align: center; }

/* Kombinations-Fakt im Hero — live aus der Anzahl der Optionen berechnet, siehe Script */
.cfg2-combo-fact {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--color-primary);
  margin:      0;
}
.cfg2-combo-fact strong { font-family: var(--font-display); font-size: 1.25em; color: var(--color-gold); }

.cfg2-sidebar .cfg-form-status { text-align: center; margin: 0; }
.cfg2-sidebar .cfg-form-status.success { color: #7ec87e; }
.cfg2-sidebar .cfg-form-status.error   { color: #e07070; }

/* ── Formular komplett? Absenden-Button pulsiert + wechselt auf Knallgelb ──
   Erst mit dunklem Marken-Grün probiert — ging im Layout unter, zu wenig
   Kontrast/Signalwirkung. Jetzt #F4C025, der helle Gold-Ton, den das
   Design bereits für Hervorhebungen auf dunklem Grund nutzt (siehe
   .cfg-option-price--mult auf ausgewählten Kacheln) — bleibt in der
   Gold-Familie, hebt sich aber klar vom normalen, dunkleren CTA-Gold ab.
   Farbwechsel zusätzlich zum Puls, weil Nutzer mit "reduzierte Bewegung"
   (prefers-reduced-motion) die Animation gar nicht zu sehen bekommen —
   siehe die globale Regel in style.css, die dort alle Animationsdauern
   auf ~0 kürzt. */
@keyframes cfg2-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,192,37,0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(244,192,37,0); }
}
button[type="submit"][form="cfg-form"].cfg2-ready {
  animation:        cfg2-pulse 1.8s ease-in-out infinite;
  background-color: #F4C025;
  border-color:     #F4C025;
  color:            var(--color-primary);
}
button[type="submit"][form="cfg-form"].cfg2-ready:hover {
  background-color: transparent;
  border-color:     #F4C025;
  color:            #F4C025;
}

/* ── Kleiner Zusatz-Hinweis neben einem Split-Label (Größe, Extras) ── */
.cfg-split-hint {
  text-transform: none;
  font-weight:    400;
  font-style:     italic;
  font-size:      0.85em;
}

/* ── "Beliebt"-Hinweis auf empfohlenen Kacheln ──────────────────
   Rein visuell, wählt nichts vor — reine Orientierungshilfe.
   Zwei Varianten: inline (normale Icon-Kacheln) und als kleiner
   Chip auf dem Foto (Kacheln mit Bild, z. B. Form/Ausbaustufe),
   da .cfg-option--level "overflow:hidden" hat und dort außerdem
   schon oben rechts der Auswahl-Kreis sitzt (siehe .cfg-option-check). */
.cfg-option-badge {
  display:        inline-block;
  margin-left:    8px;
  padding:        2px 8px;
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.02em;
  color:          var(--color-gold);
  background:     rgba(244, 192, 37, 0.15);
  border-radius:  999px;
  vertical-align: middle;
}
.cfg-option.selected .cfg-option-badge { background: rgba(244, 192, 37, 0.3); }

.cfg-option-badge--photo {
  position:       absolute;
  top:            0.7rem;
  left:           0.7rem;
  z-index:        1;
  padding:        3px 9px;
  font-size:      0.65rem;
  font-weight:    900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          #fff;
  background:     var(--color-gold);
  border-radius:  999px;
}

/* ── Info-Kasten mit Beispielfoto (wiederverwendet .callout-Optik) */
.cfg2-info {
  display:     flex;
  gap:         1rem;
  align-items: flex-start;
  background:  var(--color-light-2);
  padding:     1rem;
  margin-top:  1.1rem;
}
.cfg2-info img { width: 108px; height: 80px; object-fit: cover; flex-shrink: 0; }
.cfg2-info p { font-size: var(--font-size-small); color: var(--color-text); margin-bottom: 0.3rem; }
.cfg2-info a { font-size: 0.82rem; font-weight: 700; color: var(--color-gold); text-decoration: underline; text-underline-offset: 2px; }

/* ── Preis-Badge auf ausgewählten (dunklen) Kacheln: helles Gold ──
   --color-gold (#9F6306) ist für helle Flächen gedacht und wirkt auf
   dunklem Kartenhintergrund zu matt. #F4C025 ist der hellere Gold-Ton,
   den das Design an anderen Stellen für dunkle Flächen vorsieht
   (siehe .cta-btn--ghost, .terms-modal). */
.cfg2-main .cfg-option.selected .cfg-option-price {
  background: rgba(244, 192, 37, 0.2);
  color:      #F4C025;
}
.cfg2-main .cfg-option.selected .cfg-option-price--mult {
  background: rgba(244, 192, 37, 0.3);
  color:      #F4C025;
}

/* ── Ausbaustufe: kein Hover-Zoom auf den Beispielfotos ── */
.cfg2-main .cfg-option--level:hover .cfg-level-photo img { transform: none; }

/* ── Idee-Freitext ist jetzt Teil des Kontaktformulars ──
   Ohne den Verwendungszweck-Baustein davor folgt der Kontaktblock
   direkt auf den kurzen Step-Hint — style.css' großzügiger
   margin-top (var(--space-xl), bis zu 9rem ab 1400px) war für die
   alte, längere Zwischenstrecke gedacht und wirkt hier wie ein Loch. */
.cfg2-main .cfg-contact-block { margin-top: var(--space-md); }
#cfg-idee-field { margin-bottom: var(--space-md); }

/* ── Kontaktblock hell statt dunkel, kein eigener Kasten ──
   Ohne eigene "Fast geschafft"-Zwischenüberschrift ist der Block kein
   separater CTA-Bruch mehr, sondern einfach das Formular zu Schritt 05 —
   .cfg-contact-block/.cfg-field/.cfg-terms/.cfg-fine-print aus style.css
   sind für einen dunklen, abgesetzten Kasten gebaut. Hier: kein eigener
   Hintergrund/Rand mehr (genau so breit wie der restliche Step), stattdessen
   heben sich nur die ausfüllbaren Felder selbst vom Seitenhintergrund ab —
   im bisherigen Block-Ton (--color-light-2). */
.cfg-contact-block--light {
  background:    none;
  border:        none;
  padding-block: 0; /* style.css' 4rem war für einen sichtbaren Kasten gedacht — ohne Hintergrund nur noch totes Loch */
}
.cfg-contact-block--light::before { display: none; }
.cfg-contact-block--light .cfg-contact-inner { max-width: none; padding-inline: 0; }

.cfg-contact-block--light .cfg-field label      { color: var(--color-text-muted); }
.cfg-contact-block--light .cfg-field label span { color: var(--color-text-muted); opacity: 0.7; }
.cfg-contact-block--light .cfg-field input,
.cfg-contact-block--light .cfg-textarea {
  background:   var(--color-light-2);
  border-color: var(--color-border);
  color:        var(--color-text);
}
.cfg-contact-block--light .cfg-field input::placeholder,
.cfg-contact-block--light .cfg-textarea::placeholder { color: var(--color-text-muted); }
.cfg-contact-block--light .cfg-field input:focus,
.cfg-contact-block--light .cfg-textarea:focus {
  border-color: var(--color-primary);
  background:   #fff;
}

/* Beispiel-Chips sollen sich von den beigen Feldern abheben, nicht darin verschwinden */
.cfg-contact-block--light .cfg-textarea-examples .chip {
  background:   var(--color-light);
  border-color: var(--color-border);
}

.cfg-contact-block--light .cfg-terms {
  background:  var(--color-light-2);
  border-color: var(--color-border);
  padding:     var(--space-sm); /* war var(--space-md) — zu viel Luft vor den Häkchen */
  margin-top:  var(--space-md); /* Trennung zum Telefon-Feld — sonst verschmilzt beides zu einer Fläche (gleicher Ton) */
}
.cfg-contact-block--light .cfg-terms-row label   { color: var(--color-text); }
.cfg-contact-block--light .cfg-terms-row label a { color: var(--color-accent); }
.cfg-contact-block--light .cfg-terms-row label a:hover { color: var(--color-primary); }
.cfg-contact-block--light .cfg-terms-row.terms-error label { color: var(--color-error); }
.cfg-contact-block--light .cfg-terms-row.terms-error input[type="checkbox"] { outline-color: var(--color-error); }

.cfg-contact-block--light .cfg-fine-print   { color: var(--color-text-muted); }
.cfg-contact-block--light .cfg-fine-print a { color: var(--color-accent); }

/* ── Mobile Fixed-Bottombar (ersetzt die Sidebar unter 960px) ── */
.cfg2-bottombar { display: none; }

@media (max-width: 959px) {
  .cfg2-layout { grid-template-columns: 1fr; padding-bottom: 7.5rem; }
  .cfg2-sidebar { display: none; }

  .cfg2-bottombar {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    position:       fixed;
    left: 0; right: 0; bottom: 0;
    z-index:        90;
    transform:      translateY(110%);
    transition:     transform 0.3s ease;
    padding:        0.6rem var(--space-md) 0.75rem;
    background:     var(--color-primary);
    color:          var(--color-light);
  }

  .cfg2-bottombar-chips {
    display:            flex;
    gap:                0.35rem;
    overflow-x:         auto;
    scrollbar-width:    none;
    -ms-overflow-style: none;
  }
  .cfg2-bottombar-chips::-webkit-scrollbar { display: none; }
  .cfg2-bottombar-chips:empty { display: none; }
  .cfg2-bottombar-chip {
    flex-shrink:    0;
    padding:        0.25rem 0.6rem;
    font-size:      0.7rem;
    font-weight:    700;
    background:     rgba(255,255,255,0.08);
    color:          rgba(248,244,239,0.75);
    border-radius:  999px;
    white-space:    nowrap;
  }

  .cfg2-bottombar-main {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
  }
  .cfg2-bottombar-price { line-height: 1.2; }
  .cfg2-bottombar-price span {
    display: block; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(248,244,239,0.45);
  }
  .cfg2-bottombar-price strong { font-family: var(--font-display); font-size: 1.25rem; }
  .cfg2-bottombar .cta-btn { padding: 0.75rem 1.4rem; flex-shrink: 0; }

  /* Erst einblenden, sobald der Hero-CTA-Button aus dem Bild gescrollt ist */
  .cfg2-bottombar.is-visible { transform: translateY(0); }
}

@media (max-width: 640px) {
  .cfg2-layout { padding-block: var(--space-md); }
}