/* ============================================================
   SAINT EIR — Subpage styles (Story, Produkte, Q&A, Legal)
   ============================================================ */

/* ---------- generic page hero ---------- */
.page-hero{ padding-block:clamp(48px,7vw,96px) clamp(36px,5vw,60px); position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; right:-10%; top:-30%; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle, var(--sage-50), transparent 64%); z-index:0; }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero .display{ margin-top:18px; max-width:16ch; font-size:clamp(38px,5.4vw,68px); }
.page-hero .lead{ margin-top:22px; max-width:54ch; }
.page-hero.center{ text-align:center; }
.page-hero.center .display, .page-hero.center .lead{ margin-inline:auto; }
.breadcrumb{ font-size:13px; color:var(--muted-2); display:flex; gap:8px; align-items:center; }
.breadcrumb a:hover{ color:var(--forest); }
.breadcrumb .sep{ opacity:.5; }

/* ---------- Story ---------- */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; }
@media (max-width:860px){ .values{ grid-template-columns:1fr; } }
.value{ padding:30px; border:1px solid var(--line-soft); border-radius:var(--radius-lg); background:var(--cream-50); }
.value .vn{ font-family:var(--serif); font-size:34px; color:var(--gold); font-weight:600; line-height:1; }
.value h3{ font-family:var(--serif); font-size:23px; font-weight:600; margin-top:14px; color:var(--forest); }
.value p{ font-size:15px; color:var(--muted); margin-top:10px; }

.timeline{ margin-top:50px; display:grid; gap:0; }
.tl-step{ display:grid; grid-template-columns:120px 1fr; gap:28px; padding:26px 0; border-top:1px solid var(--line); align-items:start; }
.tl-step:last-child{ border-bottom:1px solid var(--line); }
.tl-step .tl-k{ font-family:var(--serif); font-size:20px; color:var(--gold-600); font-weight:600; }
.tl-step h3{ font-family:var(--serif); font-size:24px; font-weight:600; color:var(--forest); }
.tl-step p{ color:var(--muted); margin-top:8px; max-width:60ch; }
@media (max-width:680px){ .tl-step{ grid-template-columns:1fr; gap:6px; } }

.pullquote{ font-family:var(--serif); font-style:italic; font-size:clamp(26px,3.6vw,42px); line-height:1.25; color:var(--forest); max-width:20ch; }
.pullquote .mk{ color:var(--gold); }

/* ---------- Produkte ---------- */
.coa-link{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--sage-700); border:1px solid var(--sage-100); background:var(--sage-50); padding:6px 12px; border-radius:999px; transition:.2s; }
.coa-link:hover{ background:var(--sage-100); border-color:var(--sage-200); }
.coa-link svg{ width:13px; height:13px; }
.pdetail{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px; }
@media (max-width:960px){ .pdetail{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }

.benefit-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:48px; }
@media (max-width:900px){ .benefit-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }
.benefit{ text-align:center; padding:26px 16px; background:var(--cream-50); border:1px solid var(--line-soft); border-radius:var(--radius); }
.benefit .hex{ width:58px; height:58px; margin:0 auto 14px; border-radius:18px; background:var(--sage); display:grid; place-items:center; }
.benefit .hex svg{ width:28px; height:28px; color:#fff; }
.benefit b{ display:block; font-size:14.5px; color:var(--forest); font-weight:600; line-height:1.3; }

.usage{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; }
@media (max-width:820px){ .usage{ grid-template-columns:1fr; } }
.ustep{ padding:28px; border-radius:var(--radius-lg); background:var(--cream-50); border:1px solid var(--line-soft); }
.ustep .un{ width:38px; height:38px; border-radius:50%; background:var(--forest); color:var(--cream-50); display:grid; place-items:center; font-family:var(--serif); font-size:18px; font-weight:600; }
.ustep h3{ font-family:var(--serif); font-size:21px; font-weight:600; margin-top:16px; color:var(--forest); }
.ustep p{ font-size:14.5px; color:var(--muted); margin-top:8px; }

/* compare table */
.compare{ margin-top:46px; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--cream-50); }
.compare table{ width:100%; border-collapse:collapse; }
.compare th, .compare td{ padding:18px 22px; text-align:left; border-bottom:1px solid var(--line-soft); font-size:15px; }
.compare thead th{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--forest); background:var(--cream-100); }
.compare tbody th{ font-weight:500; color:var(--muted); font-family:var(--sans); }
.compare td{ color:var(--forest); font-weight:600; }
.compare tr:last-child td, .compare tr:last-child th{ border-bottom:0; }
.compare .hl{ color:var(--gold-600); }
@media (max-width:680px){ .compare{ overflow-x:auto; } .compare th,.compare td{ padding:14px 16px; font-size:13.5px; } }

/* kaufen band */
.buyband{ scroll-margin-top:90px; }
.buy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
@media (max-width:820px){ .buy-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.buycard{ padding:30px; border-radius:var(--radius-lg); background:var(--cream-50); border:1px solid var(--line-soft); text-align:center; transition:.3s var(--ease); }
.buycard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--sage-100); }
.buycard .bm{ font-family:var(--serif); font-size:26px; font-weight:600; color:var(--forest); display:flex; align-items:center; justify-content:center; min-height:34px; }
.buycard .bm .shoplogo-lg{ width:auto; display:block; }
.buycard .bm .shoplogo-lg.sl-sa{ height:21px; }
.buycard .bm .shoplogo-lg.sl-dm{ height:21px; }
.buycard .bm .shoplogo-lg.sl-mp{ height:28px; }
.buycard p{ font-size:14px; color:var(--muted); margin:8px 0 20px; }

/* ---------- Q&A ---------- */
.qa-cat{ margin-top:56px; }
.qa-cat:first-of-type{ margin-top:40px; }
.qa-cat-head{ display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.qa-cat-head .qc-ic{ width:42px; height:42px; border-radius:12px; background:var(--sage-50); border:1px solid var(--sage-100); display:grid; place-items:center; color:var(--sage-700); }
.qa-cat-head .qc-ic svg{ width:20px; height:20px; }
.qa-cat-head h2{ font-family:var(--serif); font-size:clamp(24px,3vw,32px); font-weight:600; color:var(--forest); }
.qa-toc{ position:sticky; top:96px; }
.qa-toc h4{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin-bottom:14px; }
.qa-toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.qa-toc a{ display:block; padding:9px 14px; border-radius:10px; font-size:14.5px; color:var(--muted); border-left:2px solid transparent; transition:.2s; }
.qa-toc a:hover{ background:var(--cream-50); color:var(--forest); border-left-color:var(--sage); }
.qa-layout{ display:grid; grid-template-columns:240px 1fr; gap:54px; align-items:start; }
@media (max-width:880px){ .qa-layout{ grid-template-columns:1fr; gap:10px; } .qa-toc{ display:none; } }

/* ---------- Legal ---------- */
.legal{ max-width:820px; }
.legal h2{ font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); font-weight:600; color:var(--forest); margin:42px 0 14px; }
.legal h3{ font-family:var(--sans); font-size:17px; font-weight:600; color:var(--forest); margin:26px 0 8px; }
.legal p, .legal li{ color:var(--muted); font-size:16px; line-height:1.7; }
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 16px; padding-left:22px; display:flex; flex-direction:column; gap:6px; }
.legal a{ color:var(--gold-600); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ color:var(--forest); }
.legal .data-card{ background:var(--cream-50); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px 28px; margin:8px 0 12px; }
.legal .data-card p{ margin:0; line-height:1.8; }
.legal .placeholder{ display:inline-block; background:var(--sage-50); color:var(--sage-700); border:1px dashed var(--sage-200); border-radius:6px; padding:1px 8px; font-size:13px; font-family:var(--sans); font-weight:600; }
.legal .note{ background:var(--sage-50); border:1px solid var(--sage-100); border-radius:var(--radius); padding:18px 22px; font-size:14px; color:var(--sage-700); margin:18px 0; }
.legal .note b{ color:var(--forest); }
.legal-updated{ font-size:13px; color:var(--muted-2); margin-top:6px; }

/* ============================================================
   B2B page
   ============================================================ */
.b2b-benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:50px; }
@media (max-width:900px){ .b2b-benefits{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .b2b-benefits{ grid-template-columns:1fr; } }
.b2b-benefit{ padding:28px 24px; background:var(--cream-50); border:1px solid var(--line-soft); border-radius:var(--radius-lg); }
.b2b-benefit .bi{ width:48px; height:48px; border-radius:13px; background:var(--sage-50); border:1px solid var(--sage-100); color:var(--sage-700); display:grid; place-items:center; margin-bottom:18px; }
.b2b-benefit .bi svg{ width:23px; height:23px; }
.b2b-benefit h3{ font-family:var(--serif); font-size:21px; font-weight:600; color:var(--forest); }
.b2b-benefit p{ font-size:14.5px; color:var(--muted); margin-top:8px; }

.b2b-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; }
@media (max-width:820px){ .b2b-steps{ grid-template-columns:1fr; } }
.b2b-step{ position:relative; padding-top:8px; }
.b2b-step .sn{ font-family:var(--serif); font-size:46px; font-weight:600; color:var(--gold); opacity:.5; line-height:1; }
.b2b-step h3{ font-family:var(--serif); font-size:22px; font-weight:600; color:var(--forest); margin-top:10px; }
.b2b-step p{ font-size:14.5px; color:var(--muted); margin-top:8px; }

/* ---------- Contact form ---------- */
.form-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,64px); align-items:start; }
@media (max-width:900px){ .form-wrap{ grid-template-columns:1fr; gap:34px; } }
.form-aside .h2{ margin-top:14px; }
.form-aside .lead{ margin-top:16px; }
.form-contact{ margin-top:30px; display:flex; flex-direction:column; gap:14px; }
.form-contact a{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--forest); font-weight:500; }
.form-contact .fc-ic{ width:40px; height:40px; border-radius:11px; background:var(--cream-50); border:1px solid var(--line-soft); display:grid; place-items:center; color:var(--sage-700); flex:none; }
.form-contact .fc-ic svg{ width:18px; height:18px; }

.form-card{ background:var(--cream-50); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:clamp(26px,3.5vw,40px); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:13px; font-weight:600; color:var(--forest); letter-spacing:.01em; }
.field label .req{ color:var(--gold-600); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:13px 15px; transition:border-color .2s, box-shadow .2s; width:100%;
}
.field textarea{ resize:vertical; min-height:120px; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236E6A62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-50); }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted-2); }
.field .err-msg{ font-size:12.5px; color:#b4452f; display:none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#d98e7c; }
.field.invalid .err-msg{ display:block; }

.checks{ display:flex; flex-wrap:wrap; gap:10px; }
.check-pill{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:14px; color:var(--forest); cursor:pointer; transition:.18s; user-select:none; white-space:nowrap; }
.check-pill:hover{ border-color:var(--sage); }
.check-pill input{ width:16px; height:16px; accent-color:var(--sage-600); margin:0; }
.check-pill:has(input:checked){ background:var(--sage-50); border-color:var(--sage); }

.consent{ display:flex; gap:11px; align-items:flex-start; }
.consent input{ width:18px; height:18px; accent-color:var(--sage-600); margin-top:2px; flex:none; }
.consent label{ font-size:13.5px; color:var(--muted); line-height:1.5; font-weight:400; }
.consent a{ color:var(--gold-600); text-decoration:underline; text-underline-offset:2px; }

.form-success{ display:none; text-align:center; padding:40px 20px; }
.form-success.show{ display:block; }
.form-card.sent .form-grid, .form-card.sent .form-foot{ display:none; }
.form-success .sx{ width:64px; height:64px; border-radius:50%; background:var(--sage-50); border:1px solid var(--sage-100); color:var(--sage-700); display:grid; place-items:center; margin:0 auto 20px; }
.form-success h3{ font-family:var(--serif); font-size:28px; font-weight:600; color:var(--forest); }
.form-success p{ color:var(--muted); margin-top:10px; max-width:38ch; margin-inline:auto; }
.form-foot{ margin-top:22px; display:flex; flex-direction:column; gap:16px; }