/* =====================================================================
   Website-Angebot Widget  ·  self-contained (Prefix .ab / .ab-)
   Wiederverwendbar auf beliebigen Seiten – bringt eigene Farben mit.
   ===================================================================== */
.ab, .ab *, .ab-modal, .ab-modal * { box-sizing: border-box; }
.ab {
  --ab-ink:#121a27; --ab-ink2:#1b2739; --ab-amber:#e8a02c; --ab-amber2:#c47f14;
  --ab-red:#c0442e; --ab-paper:#f5f2ea; --ab-line:rgba(255,255,255,.14);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 400px at 50% -120px, rgba(232,160,44,.16), transparent 70%),
    linear-gradient(180deg, #0e1622, #16202f);
  color:#fff; border-top:4px solid var(--ab-amber);
  padding: clamp(48px,8vw,88px) 20px;
}
.ab__wrap { max-width: 760px; margin-inline:auto; text-align:center; }

/* --- klare Abtrennung von der Website (steht unter dem Footer) --- */
.ab__sep { display:flex; align-items:center; gap:16px; margin:0 auto 28px; max-width:640px; }
.ab__sep span { flex:1; height:0; border-top:2px dashed rgba(232,160,44,.45); }
.ab__sep b {
  flex:none; font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; font-size:.82rem; color:var(--ab-amber);
  white-space:nowrap;
}
.ab__note {
  color:#aeb8c4; font-size:.9rem; max-width:52ch; margin:0 auto 26px; line-height:1.55;
}
.ab__note b { color:#dfe5ec; }
.ab__eyebrow {
  display:inline-block; font-weight:700; text-transform:uppercase;
  letter-spacing:.24em; font-size:.78rem; color:var(--ab-amber);
  border:1px solid rgba(232,160,44,.4); border-radius:40px; padding:7px 18px; margin-bottom:26px;
}

/* --- WAIT state --- */
.ab__wait h2 {
  font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.02;
  font-size:clamp(1.7rem,4.4vw,2.9rem); margin:0 0 14px;
}
.ab__time {
  color:var(--ab-amber);
  font-variant-numeric: tabular-nums;
  display:inline-block; min-width:2.6em;
}
.ab__sub { color:#c2cbd6; font-size:1.02rem; margin:0 auto 26px; max-width:46ch; }
.ab__bar {
  height:8px; width:min(420px,100%); margin:0 auto; border-radius:20px;
  background:rgba(255,255,255,.12); overflow:hidden;
}
.ab__bar span {
  display:block; height:100%; width:0%; border-radius:20px;
  background:linear-gradient(90deg,var(--ab-amber2),var(--ab-amber));
  transition:width 1s linear;
}

/* --- OFFER state --- */
.ab__offer h2 {
  font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:700;
  text-transform:uppercase; font-size:clamp(1.8rem,4.6vw,3rem); margin:0 0 6px;
}
.ab__price { margin:12px 0 6px; line-height:1; }
.ab__price b {
  font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:700;
  font-size:clamp(3.4rem,10vw,5.4rem); color:var(--ab-amber);
}
.ab__price span { font-size:1.1rem; color:#c2cbd6; font-weight:600; letter-spacing:.02em; }
.ab__desc { color:#e7ecf1; font-size:1.1rem; margin:6px auto 22px; max-width:44ch; }
.ab__desc b { color:#fff; }
.ab__list {
  list-style:none; margin:0 auto 30px; padding:0; max-width:520px;
  display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; text-align:left;
}
.ab__list li { display:flex; gap:10px; align-items:flex-start; font-size:.96rem; color:#dfe5ec; }
.ab__list li::before {
  content:"✓"; color:var(--ab-amber); font-weight:900; flex:none;
  background:rgba(232,160,44,.14); width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:.8rem; margin-top:1px;
}
.ab__actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.ab-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:600;
  font-size:1.14rem; text-transform:uppercase; letter-spacing:.05em;
  padding:15px 26px; border-radius:6px; border:2px solid transparent; cursor:pointer;
  transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
  line-height:1; color:#fff; background:transparent; text-decoration:none;
}
.ab-btn svg { width:20px; height:20px; }
.ab-btn:hover { transform:translateY(-2px); }
.ab-btn--wa { background:#25d366; color:#073b23; }
.ab-btn--wa:hover { background:#1eb857; }
.ab-btn--accept { background:var(--ab-amber); color:var(--ab-ink); box-shadow:0 10px 26px rgba(232,160,44,.35); }
.ab-btn--accept:hover { background:#f0ae3e; }
.ab-btn--ask { border-color:rgba(255,255,255,.4); }
.ab-btn--ask:hover { background:rgba(255,255,255,.10); }
.ab-btn--del { border-color:rgba(192,68,46,.6); color:#f0a293; }
.ab-btn--del:hover { background:var(--ab-red); color:#fff; border-color:var(--ab-red); }

/* --- MODAL --- */
.ab-modal {
  position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:20px;
  background:rgba(10,15,22,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:ab-fade .2s ease;
}
.ab-modal[hidden] { display:none; }
@keyframes ab-fade { from{opacity:0} to{opacity:1} }
.ab-modal__card {
  background:#fff; color:var(--ab-ink); width:min(540px,100%); border-radius:14px;
  box-shadow:0 40px 90px rgba(0,0,0,.5); border-top:5px solid var(--ab-amber);
  max-height:92vh; overflow:auto;
}
.ab-modal__card.is-del { border-top-color:var(--ab-red); }
.ab-modal__head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:24px 26px 8px;
}
.ab-modal__head h3 {
  font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:700;
  text-transform:uppercase; font-size:1.7rem; margin:0; color:var(--ab-ink); line-height:1.05;
}
.ab-modal__head p { margin:6px 0 0; color:#66707e; font-size:.92rem; }
.ab-close {
  flex:none; width:38px; height:38px; border-radius:8px; border:0; cursor:pointer;
  background:#f0eee7; color:#333; font-size:1.5rem; line-height:1; display:grid; place-items:center;
}
.ab-close:hover { background:#e6e2d7; }
.ab-form { padding:14px 26px 26px; display:grid; gap:14px; }
.ab-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ab-field { display:grid; gap:6px; }
.ab-field label { font-weight:600; font-size:.86rem; color:var(--ab-ink); }
.ab-field label .r { color:var(--ab-red); }
.ab-field input, .ab-field textarea {
  width:100%; padding:12px 14px; font:inherit; font-size:1rem;
  border:1.5px solid #d3d0c7; border-radius:7px; background:var(--ab-paper); color:#202a38;
}
.ab-field input:focus, .ab-field textarea:focus { outline:none; border-color:var(--ab-amber); background:#fff; }
.ab-field textarea { resize:vertical; min-height:96px; }
.ab-reasons { display:grid; gap:10px; }
.ab-reason {
  display:flex; gap:11px; align-items:center; padding:13px 15px; border:1.5px solid #d3d0c7;
  border-radius:9px; cursor:pointer; font-weight:500; transition:border-color .15s, background .15s;
}
.ab-reason:hover { border-color:var(--ab-amber); }
.ab-reason input { width:19px; height:19px; accent-color:var(--ab-red); flex:none; }
.ab-reason.is-on { border-color:var(--ab-red); background:#fdf2f0; }
.ab-cond { display:none; }
.ab-cond.is-on { display:grid; }
.ab-submit {
  font-family:"Barlow Condensed","Arial Narrow",sans-serif; font-weight:600;
  font-size:1.16rem; text-transform:uppercase; letter-spacing:.05em;
  padding:15px 22px; border-radius:7px; border:0; cursor:pointer; margin-top:4px;
  background:var(--ab-amber); color:var(--ab-ink); transition:background .15s, transform .15s;
}
.ab-submit:hover { background:var(--ab-amber2); color:#fff; transform:translateY(-1px); }
.ab-form.is-del .ab-submit { background:var(--ab-red); color:#fff; }
.ab-form.is-del .ab-submit:hover { background:#a5382534; background:#9c3423; }
.ab-hint { font-size:.8rem; color:#66707e; text-align:center; margin:2px 0 0; }
.ab-ok {
  padding:40px 30px; text-align:center;
}
.ab-ok__mark { width:70px; height:70px; border-radius:50%; background:#e9f7ee; color:#1b9e52; display:grid; place-items:center; margin:0 auto 18px; font-size:2.2rem; }
.ab-ok h3 { font-family:"Barlow Condensed","Arial Narrow",sans-serif; text-transform:uppercase; font-size:1.8rem; margin:0 0 8px; color:var(--ab-ink); }
.ab-ok p { color:#66707e; margin:0; }

@media (max-width:560px){
  .ab__list { grid-template-columns:1fr; }
  .ab-row { grid-template-columns:1fr; }
  .ab__actions .ab-btn { flex:1 1 100%; }
}
@media (prefers-reduced-motion: reduce){
  .ab-btn, .ab-submit { transition:none; }
  .ab__bar span { transition:none; }
  .ab-modal { animation:none; }
}