/* ==========================================================================
   APART COMPASS — Angebots-, Detail- & Formularseiten
   Nutzt die Tokens aus styles.css. styles.css bleibt unverändert.
   ========================================================================== */

/* ---------- Page Banner (kompakter Hero für Unterseiten) ---------- */
.page-banner{
  position:relative;
  min-height:60vh; min-height:60svh;
  display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate;
  padding:8rem 0 3.2rem;
}
.page-banner__media{
  position:absolute; inset:-3%; z-index:-3;
  background-size:cover; background-position:center;
}
.page-banner__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(7,9,26,.55) 0%, rgba(7,9,26,.45) 40%, rgba(7,9,26,.92) 100%),
    linear-gradient(105deg, rgba(7,9,26,.7) 0%, rgba(7,9,26,0) 65%);
}
.breadcrumb{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:1.1rem; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
}
.breadcrumb a{color:var(--ink-soft); transition:color .25s}
.breadcrumb a:hover{color:var(--gold-bright)}
.breadcrumb span{opacity:.5}
.page-banner h1{margin:.6rem 0 .8rem; max-width:16ch}
.page-banner__intro{max-width:560px; color:rgba(244,239,230,.85); font-size:1.05rem}

/* ---------- Filter / Budget-Leiste ---------- */
.filterbar{
  background:rgba(11,17,48,.92);
  border-bottom:1px solid var(--line-soft);
  position:sticky; top:60px; z-index:30;
  backdrop-filter:saturate(140%) blur(12px);
}
.filterbar__inner{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  padding:1rem 0;
}
.filter-group{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap}
.filter-label{
  font-family:var(--sans); font-size:.7rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.chip{
  font-family:var(--sans); font-size:.8rem; letter-spacing:.04em;
  color:var(--ink-soft);
  padding:.5rem .95rem; border:1px solid var(--line-soft); border-radius:999px;
  background:transparent; cursor:pointer; transition:all .3s var(--ease);
  white-space:nowrap;
}
.chip:hover{border-color:var(--gold); color:var(--ink)}
.chip.is-active{background:var(--gold); border-color:var(--gold); color:#0a0d1f; font-weight:500}
.filter-count{margin-left:auto; font-size:.82rem; color:var(--ink-mute); letter-spacing:.06em}
.filter-count b{color:var(--gold-bright); font-weight:600}

/* ---------- Deal-Grid ---------- */
.deals-section{padding:3.5rem 0 7rem; background:var(--bg-soft); min-height:50vh}
.deals-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem;
}
.deal-card{
  display:flex; flex-direction:column;
  background:var(--bg-card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  color:inherit;
}
.deal-card:hover{
  transform:translateY(-6px); border-color:var(--line);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.deal-card__media{
  position:relative; aspect-ratio:16/10; overflow:hidden;
}
.deal-card__img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.03); transition:transform 1.2s var(--ease), filter .6s var(--ease);
  filter:saturate(.96) brightness(.9);
}
.deal-card:hover .deal-card__img{transform:scale(1.12); filter:saturate(1.05) brightness(.98)}
.deal-card__badge{
  position:absolute; top:1rem; left:1rem; z-index:2;
  font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.08em;
  background:var(--gold); color:#0a0d1f;
  padding:.35rem .7rem; border-radius:999px;
  box-shadow:0 8px 20px -8px rgba(199,168,107,.7);
}
.deal-card__fade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 55%, rgba(15,23,51,.85));
}
.deal-card__body{padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1}
.deal-card__tag{
  font-family:var(--sans); font-size:.64rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
  margin-bottom:.7rem;
}
.deal-card h3{
  font-family:var(--serif); font-size:1.4rem; color:var(--ink);
  margin:0 0 .5rem; line-height:1.15;
}
.deal-card__teaser{font-size:.92rem; color:var(--ink-soft); margin:0 0 1.2rem; flex:1}
.deal-card__foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  padding-top:1.1rem; border-top:1px solid var(--line-soft);
}
.deal-price{display:flex; flex-direction:column; line-height:1.1}
.deal-price__label{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute)}
.deal-price__row{display:flex; align-items:baseline; gap:.5rem; margin-top:.25rem}
.deal-price__now{font-family:var(--serif); font-size:1.7rem; color:var(--ink); font-weight:600}
.deal-price__ref{font-size:.85rem; color:var(--ink-mute); text-decoration:line-through}
.deal-card__cta{
  font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-bright); white-space:nowrap;
  display:inline-flex; align-items:center; gap:.4rem;
  transition:gap .35s var(--ease);
}
.deal-card:hover .deal-card__cta{gap:.8rem}

.deals-empty{
  text-align:center; padding:5rem 1rem; color:var(--ink-mute);
  font-family:var(--serif); font-style:italic; font-size:1.4rem;
}

/* ==========================================================================
   Deal-Detailseite
   ========================================================================== */
.detail{padding-top:0}
.detail-hero{
  position:relative; min-height:62vh; min-height:62svh;
  display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
  padding:8rem 0 3rem;
}
.detail-hero__media{position:absolute; inset:-3%; z-index:-3; background-size:cover; background-position:center}
.detail-hero__veil{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(7,9,26,.45) 0%, rgba(7,9,26,.4) 35%, rgba(7,9,26,.95) 100%)}
.detail-hero__badge{
  display:inline-block; background:var(--gold); color:#0a0d1f;
  font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.08em;
  padding:.4rem .8rem; border-radius:999px; margin-bottom:1rem;
}
.detail-hero h1{max-width:18ch; margin:.5rem 0 .8rem}
.detail-hero__teaser{max-width:620px; color:rgba(244,239,230,.88); font-size:1.1rem}

.detail-body{background:var(--bg-soft); padding:4rem 0 7rem}
.detail-grid{display:grid; grid-template-columns:1fr 380px; gap:3.5rem; align-items:start}

.detail-block{margin-bottom:3rem}
.detail-block h2{font-size:1.7rem; margin:0 0 1.3rem}
.detail-block h2 .lead-line{display:inline-block; width:34px; height:1px; background:var(--gold); margin-right:.8rem; vertical-align:middle}

.spec-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden}
.spec{background:var(--bg-card); padding:1.15rem 1.3rem}
.spec__label{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.35rem}
.spec__value{font-family:var(--serif); font-size:1.18rem; color:var(--ink)}

.ticklist{display:grid; gap:.8rem}
.ticklist li{display:flex; gap:.8rem; align-items:flex-start; font-size:1rem; color:var(--ink-soft)}
.ticklist svg{flex:none; margin-top:.2rem; color:var(--gold)}
.ticklist--warn svg{color:#C98A6B}

/* Sticky Buchungs-Box */
.book-box{
  position:sticky; top:90px;
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:2rem 1.8rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.book-box__label{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute)}
.book-box__price{display:flex; align-items:baseline; gap:.7rem; margin:.4rem 0 .2rem}
.book-box__now{font-family:var(--serif); font-size:2.8rem; color:var(--ink); font-weight:600; line-height:1}
.book-box__ref{font-size:1rem; color:var(--ink-mute); text-decoration:line-through}
.book-box__pp{font-size:.82rem; color:var(--ink-mute); margin-bottom:1.4rem}
.book-box .btn{width:100%; justify-content:center}
.book-box__sep{height:1px; background:var(--line-soft); margin:1.4rem 0}
.book-box__meta{display:flex; flex-direction:column; gap:.7rem; font-size:.85rem; color:var(--ink-soft)}
.book-box__meta div{display:flex; gap:.6rem; align-items:center}
.book-box__meta svg{color:var(--gold); flex:none}
.book-box__valid{margin-top:1.2rem; font-size:.76rem; color:var(--ink-mute); letter-spacing:.04em}

/* ==========================================================================
   Anfrage-Formular
   ========================================================================== */
.form-wrap{background:var(--bg-soft); padding:3.5rem 0 7rem}
.form-shell{max-width:840px; margin:0 auto;
  background:var(--bg-card); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:clamp(1.5rem,4vw,3rem)}

.prefill-banner{
  display:flex; gap:1rem; align-items:center;
  background:linear-gradient(120deg, rgba(199,168,107,.14), rgba(199,168,107,.04));
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:1rem 1.2rem; margin-bottom:2rem;
}
.prefill-banner svg{color:var(--gold); flex:none}
.prefill-banner b{color:var(--ink)}
.prefill-banner small{display:block; color:var(--ink-mute); font-size:.78rem; letter-spacing:.04em; margin-top:.1rem}

/* Segmented Kategorie-Wahl */
.seg{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem}
.seg button{
  font-family:var(--sans); font-size:.82rem; letter-spacing:.06em;
  color:var(--ink-soft); padding:.7rem 1.1rem;
  border:1px solid var(--line-soft); border-radius:999px; background:transparent;
  transition:all .3s var(--ease);
}
.seg button:hover{border-color:var(--gold); color:var(--ink)}
.seg button.is-active{background:var(--gold); border-color:var(--gold); color:#0a0d1f; font-weight:500}

.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem 1.4rem}
.field{display:flex; flex-direction:column; gap:.5rem}
.field--full{grid-column:1 / -1}
.field label{font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:.98rem; color:var(--ink);
  background:var(--bg-soft); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); padding:.85rem 1rem;
  transition:border-color .3s, box-shadow .3s; width:100%;
}
.field textarea{resize:vertical; min-height:120px}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-mute)}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(199,168,107,.18);
}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C7A86B' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 1rem center;
  padding-right:2.6rem;
}
.form-section{display:none}
.form-section.is-active{display:grid}
.form-foot{margin-top:2rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.form-foot .btn{justify-content:center}
.form-note{font-size:.78rem; color:var(--ink-mute); letter-spacing:.03em}
.form-error{
  display:flex; flex-direction:column; gap:.3rem;
  background:rgba(201,138,107,.12); border:1px solid rgba(201,138,107,.55);
  border-radius:var(--radius-sm); padding:1rem 1.2rem; margin-top:1.6rem;
  color:#E9C9B8; font-size:.92rem;
}
.form-error[hidden]{display:none}   /* hidden-Attribut muss display gewinnen */
.form-error strong{color:#F2D6C6}
.form-error a{color:var(--gold-bright); text-decoration:underline}
.consent{display:flex; gap:.7rem; align-items:flex-start; grid-column:1/-1; margin-top:.4rem}
.consent input{width:auto; margin-top:.25rem; accent-color:var(--gold)}
.consent label{text-transform:none; letter-spacing:0; font-size:.82rem; color:var(--ink-soft); font-weight:300}

/* Erfolgs-State */
.form-success{display:none; text-align:center; padding:2rem 1rem}
.form-success.is-shown{display:block; animation:fadeUp .7s var(--ease) both}
.form-success__mark{
  width:90px; height:90px; margin:0 auto 1.6rem;
  display:grid; place-items:center; color:var(--gold);
  border:1px solid var(--gold); border-radius:50%;
  animation:pop .6s var(--ease) both;
}
.form-success h2{margin:0 0 .8rem}
.form-success p{color:var(--ink-soft); max-width:46ch; margin:0 auto 1.6rem}
@keyframes pop{0%{transform:scale(.6); opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1); opacity:1}}
@keyframes fadeUp{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal{background:var(--bg-soft); padding:3.5rem 0 6rem}
.legal__inner{
  max-width:820px; margin:0 auto;
  background:var(--bg-card); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:clamp(1.5rem,4vw,3rem);
}
.legal__inner h2{font-size:1.5rem; margin:2.2rem 0 .8rem}
.legal__inner h2:first-of-type{margin-top:0}
.legal__inner h3{
  font-family:var(--sans); font-size:1.02rem; font-weight:600;
  letter-spacing:.01em; color:var(--ink); margin:1.4rem 0 .5rem;
}
.legal__inner p, .legal__inner li{font-size:.97rem; line-height:1.75; color:var(--ink-soft)}
.legal__inner p{margin:0 0 1rem}
.legal__inner a{color:var(--gold-bright); text-decoration:underline}
.legal__inner ul{margin:0 0 1rem; padding-left:1.2rem; list-style:disc}
.legal__inner li{margin:.3rem 0}
.legal__inner strong{color:var(--ink)}
.legal__inner address{font-style:normal; line-height:1.7; color:var(--ink-soft); margin:0 0 1rem}
.legal__note{
  background:rgba(199,168,107,.1); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:1rem 1.2rem;
  font-size:.88rem; color:var(--ink-soft); margin:0 0 1.8rem;
}
.legal__ph{color:var(--gold-bright); font-weight:500}
.legal__stand{margin-top:2rem; font-size:.85rem; color:var(--ink-mute)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .deals-grid{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:1fr; gap:2.5rem}
  .book-box{position:static}
}
@media (max-width:760px){
  .deals-grid{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .filter-count{margin-left:0; width:100%}
  .page-banner{min-height:52vh}
  /* Mobile-Feinschliff: Grid-/Flex-Kinder dürfen schrumpfen -> kein Überlauf rechts */
  .field, .deal-card, .detail-main, .detail-grid > *, .book-box, .seg button{min-width:0}
  .field input, .field select, .field textarea{max-width:100%}
  .book-box .btn, .btn--xl{white-space:normal; word-break:break-word}
  .deal-card__foot{flex-wrap:wrap; gap:.7rem}
  .book-box{padding:1.6rem 1.3rem}
  .form-shell{padding:1.4rem 1.1rem}
}