/* BEKTRA 3D — Seiten-Layout, das nicht durch tokens/components/utilities abgedeckt ist. */

/* utilities.css korrigiert .bk-lead unter .bk-on-light, vergisst aber .bk-prose
   (nur ".bk-light .bk-prose" ist dort definiert) — Lücke hier geschlossen,
   sonst bleibt Fließtext in Karten auf hellem Grund fast unsichtbar hell. */
.bk-on-light .bk-prose{color:var(--text-on-light-muted)}

/* ---------- Reveal (einmalig beim Einscrollen) ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-reveal) var(--ease-glide),transform var(--dur-reveal) var(--ease-glide);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}

/* ---------- Section-Rhythmus: dunkel / hell / warm ---------- */
.section-dark{background:var(--bg-base);color:var(--text-primary)}
.section-deep{background:var(--bg-deep);color:var(--text-primary)}
.section-light{background:var(--grad-light);color:var(--text-on-light)}
.section-warm{background:var(--grad-warm);color:var(--bark-700)}
.section-mesh{position:relative;background:var(--grad-mesh);color:var(--text-primary);overflow:hidden}
.section-mesh--quiet{background:var(--grad-mesh-quiet)}
.section-rel{position:relative}
.section-content{position:relative;z-index:1}

body.bk-scroll-lock{overflow:hidden}

/* components.css setzt display:grid direkt auf .bk-dialog__veil — das schlägt als
   Autoren-Regel die UA-Regel [hidden]{display:none} und der Dialog bliebe immer
   sichtbar. Hier explizit zurücksetzen, JS toggelt nur noch das Attribut. */
.bk-dialog__veil[hidden]{display:none}

/* ---------- Navigation ---------- */
.bk-nav__toggle{display:none}
.bk-mobile-nav{display:none}

@media (max-width:899px){
  .bk-nav__links{display:none}
  .bk-nav__cta-text{display:none}
  .bk-nav__toggle{display:inline-flex}
  .bk-mobile-nav{
    display:block;position:fixed;inset:0 0 auto 0;top:calc(64px + var(--sp-4));z-index:39;
    max-height:0;overflow:hidden;background:rgba(4,20,15,.92);backdrop-filter:blur(var(--blur-veil)) saturate(1.2);
    -webkit-backdrop-filter:blur(var(--blur-veil)) saturate(1.2);
    border-bottom:1px solid var(--border-hairline);
    transition:max-height var(--dur-slow) var(--ease-glide)
  }
  .bk-mobile-nav--open{max-height:420px}
  .bk-mobile-nav__inner{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-6) var(--gutter) var(--sp-8)}
  .bk-mobile-nav a{color:var(--text-secondary);font-size:var(--fs-lead);text-decoration:none;padding:var(--sp-2) 0}
  .bk-mobile-nav a:hover,.bk-mobile-nav a.bk-nav__link--active{color:var(--text-primary)}
  .bk-mobile-nav .bk-btn{margin-top:var(--sp-3);align-self:flex-start}
}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(64px,10vw,140px)}
.hero__grid{display:grid;grid-template-columns:1fr;gap:var(--sp-10);align-items:center}
.hero__eyebrow{margin-bottom:var(--sp-5)}
.hero__wordmark{font-family:var(--font-display);font-weight:var(--weight-display-em);font-size:var(--fs-display-1);letter-spacing:.1em;line-height:1;margin:0 0 var(--sp-5)}
.hero__acronym-line{color:var(--text-secondary);font-size:var(--fs-body-sm);letter-spacing:.02em;margin-bottom:var(--sp-8);max-width:46ch}
.hero__quote{max-width:34ch;margin:0 0 var(--sp-10)}
.hero__quote .bk-quote__mark{font-size:40px;margin-bottom:var(--sp-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.hero--page{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,88px)}
.hero--page .hero__wordmark{font-size:var(--fs-display-2)}

/* ---------- Zusagen-Leiste ---------- */
.promise-bar{margin-top:calc(var(--sp-16) * -1);position:relative;z-index:2}
.promise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-hairline)}
.promise-item{background:var(--bg-base);display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-6)}
.promise-item .bk-icon{color:var(--accent);flex:none}
.promise-item span:last-child{font-size:var(--fs-body-sm);color:var(--text-secondary);line-height:var(--lh-tight)}

/* ---------- Intro / Porträt-Split ---------- */
.split{display:grid;grid-template-columns:1fr;gap:var(--sp-10);align-items:center}
.split__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/5}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__body p + p{margin-top:var(--sp-5)}

/* ---------- Angebote ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.offer-note{margin-top:var(--sp-8);text-align:center}

/* ---------- Akronym ---------- */
.acronym-list{display:grid;grid-template-columns:1fr;border-top:1px solid var(--border-hairline)}
.acronym-row{display:flex;align-items:baseline;gap:var(--sp-6);padding:var(--sp-6) 0;border-bottom:1px solid var(--border-hairline)}
.acronym-row__letter{font-family:var(--font-display);font-size:var(--fs-display-3);font-weight:var(--weight-display);color:var(--accent);width:1.1em;flex:none}
.acronym-row__word{font-family:var(--font-display);font-size:var(--fs-title);font-weight:var(--weight-display);color:var(--text-primary)}

/* ---------- PST-R-Rahmen (Home) ---------- */
.mesh-frame{border-radius:var(--r-xl);padding:clamp(40px,6vw,80px);position:relative;overflow:hidden}
.mesh-frame__inner{position:relative;z-index:1;max-width:56ch}
.mesh-frame__inner .bk-lead{color:var(--text-secondary)}

/* ---------- Abschluss mit Telefonnummer ---------- */
.closing{position:relative;overflow:hidden;text-align:center}
.closing__inner{max-width:52ch;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:var(--sp-8)}
.closing__phone{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(2.5rem,6vw,4rem);letter-spacing:-.01em}
.closing__phone a{color:inherit;text-decoration:none}
.closing__phone a:hover{color:var(--accent)}

/* ---------- Schritte (PST-R) ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
.step{display:flex;gap:var(--sp-5)}
.step__num{font-family:var(--font-display);font-size:var(--fs-display-3);font-weight:var(--weight-display);color:var(--accent);flex:none;width:1.4em}
.step__body h3{margin-bottom:var(--sp-2)}

/* ---------- Preistabelle ---------- */
.price-table{width:100%;border-collapse:collapse}
.price-table thead th{text-align:left;font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);font-weight:var(--weight-medium);padding-bottom:var(--sp-4);border-bottom:1px solid var(--border-hairline)}
.price-table thead th:last-child{text-align:right}
.price-table td{padding:var(--sp-5) 0;border-bottom:1px solid var(--border-hairline);vertical-align:top}
.price-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:var(--font-display);font-size:var(--fs-title)}
.price-table .price-service{font-family:var(--font-display);font-size:var(--fs-subtitle);font-weight:var(--weight-display-em)}
.price-table .price-duration{color:var(--text-muted);font-size:var(--fs-body-sm);display:block;margin-top:2px}
.price-table .price-was{display:block;font-size:var(--fs-caption);color:var(--text-muted);text-decoration:line-through;font-family:var(--font-sans);font-weight:400}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-16)}
.contact-cards{display:flex;flex-direction:column;gap:var(--sp-4)}
.contact-card{display:flex;align-items:center;gap:var(--sp-5)}
.contact-card__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-md);font-size:22px;color:var(--emerald-300);background:var(--grad-accent-soft);border:1px solid rgba(6,214,160,.24);flex:none}
.contact-card__text a{color:var(--text-primary);text-decoration:none;font-family:var(--font-display);font-size:var(--fs-subtitle)}
.contact-card__text a:hover{color:var(--accent)}
.contact-card__label{font-size:var(--fs-caption);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;display:block}
.vfp{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-8)}
.vfp img{width:56px;height:56px;border-radius:var(--r-sm);flex:none}
.vfp span{font-size:var(--fs-caption);color:var(--text-muted);max-width:36ch}
.contact-form-panel{padding:var(--sp-8)}
.form-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
.form-grid--2{grid-template-columns:1fr}
.form-note{font-size:var(--fs-caption);color:var(--text-muted);margin-top:var(--sp-2)}
.form-error{display:none;color:var(--signal-error);font-size:var(--fs-body-sm);margin-top:var(--sp-4)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Rechtsseiten ---------- */
.legal{padding-block:var(--section-y)}
.legal h2{font-size:var(--fs-title);margin-top:var(--sp-10);margin-bottom:var(--sp-3)}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--text-secondary);line-height:var(--lh-body)}
.legal p + p{margin-top:var(--sp-4)}
.legal ul{margin:var(--sp-3) 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--sp-2)}

/* ---------- Breakpoints (Abschnitt 12) ---------- */
@media (min-width:900px){
  .hero__grid{grid-template-columns:1.15fr .85fr}
  .split{grid-template-columns:.85fr 1.15fr}
  .split--reverse{grid-template-columns:1.15fr .85fr}
  .split--reverse .split__media{order:2}
  .contact-grid{grid-template-columns:1fr 1fr}
  .form-grid--2{grid-template-columns:1fr 1fr}
}

@media (max-width:899px){
  .promise-grid{grid-template-columns:repeat(2,1fr)}
  .offer-grid{grid-template-columns:repeat(2,1fr)}
  .info-grid{grid-template-columns:1fr}
  .bk-orb{transform:scale(.6)}
}

@media (max-width:639px){
  .offer-grid{grid-template-columns:1fr}
  .hero__wordmark{letter-spacing:.06em}
  .hero__actions .bk-btn,.closing .bk-btn{width:100%}
  .price-table td:last-child{white-space:normal}
  .promise-grid{grid-template-columns:1fr}
  .step{flex-direction:column;gap:var(--sp-2)}
}