/* ============================================================================
 *  COMPONENTS  ·  wiederverwendbare UI-Bausteine
 * ========================================================================== */

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
  --b: var(--surface-3);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--r-md);
  padding:15px 20px; font-size:16px; font-weight:600; letter-spacing:-.01em;
  color:var(--text); background:var(--b); cursor:pointer;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  -webkit-user-select:none; user-select:none;
}
.btn--block { display:flex; width:100%; }
.btn:active { transform:scale(.975); opacity:.9; }
.btn--primary {
  color:var(--accent-ink);
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #fff));
  box-shadow:0 10px 30px -10px var(--glow);
}
.btn--primary:hover { box-shadow:0 14px 40px -10px var(--glow); }
.btn--soft  { background:var(--surface-2); color:var(--text); }
.btn--ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn--quiet { background:transparent; color:var(--accent-2); font-weight:500; }
.btn[disabled], .btn.is-disabled { opacity:.4; pointer-events:none; }

/* ── ACTION-BAR (schlanke Icon-Leiste, z. B. Tipps-Screen) ──────────────── */
.actionbar { display:flex; gap:8px; }
.actionbtn {
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:11px 4px; border-radius:var(--r-md); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.actionbtn:hover { color:var(--text); }
.actionbtn:active { transform:scale(.95); }
.actionbtn svg { width:21px; height:21px; }
.actionbtn span { font-size:11px; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.actionbtn--primary {
  flex:1.5 1 0; color:var(--accent-ink); border-color:transparent;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #fff));
  box-shadow:0 8px 22px -10px var(--glow);
}
.actionbtn--primary:hover { color:var(--accent-ink); }

/* ── CARD ───────────────────────────────────────────────────────────────── */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px 20px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.card--plain { background:var(--surface-2); -webkit-backdrop-filter:none; backdrop-filter:none; }
.card--accent { border-color:color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow:var(--shadow-glow); }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); }
.muted { color:var(--text-2); font-weight:300; line-height:1.65; }
.lead  { font-size:15px; color:var(--text-2); line-height:1.65; font-weight:300; }

/* ── CHIPS ──────────────────────────────────────────────────────────────── */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-pill); padding:7px 13px; font-size:13px; color:var(--text-2);
}

/* ── OPTION (Quiz-Antwort) ──────────────────────────────────────────────── */
.option {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md);
  padding:13px 15px; cursor:pointer; color:var(--text);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.option:hover { border-color:color-mix(in srgb, var(--accent-2) 50%, var(--border)); }
.option:active { transform:scale(.99); }
.option.is-selected {
  border-color:var(--accent-2); background:var(--accent-2-soft);
  box-shadow:0 8px 26px -14px var(--accent-2);
}
.option__marker {
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); font-size:11.5px; font-weight:600; color:var(--text-3);
  transition:all var(--dur) var(--ease);
}
.option.is-selected .option__marker { background:var(--accent-2); border-color:var(--accent-2); color:#fff; }
.option__label { font-size:14.5px; line-height:1.3; }
.option.is-selected .option__label { font-weight:500; }

/* ── SCIENCE-BOX (Fragebogen · einklappbar „Warum diese Frage?") ─────────── */
details.scibox { background:transparent; border:none; padding:0; }
.scibox__sum {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
  font-size:11.5px; font-weight:600; letter-spacing:.03em; color:var(--accent-2);
  padding:3px 0; -webkit-user-select:none; user-select:none;
}
.scibox__sum::-webkit-details-marker { display:none; }
.scibox__sum::before { content:'ⓘ'; font-size:12px; opacity:.9; }
.scibox__sum::after  { content:'▾'; font-size:9px; opacity:.6; transition:transform var(--dur) var(--ease); }
details.scibox[open] .scibox__sum::after { transform:rotate(180deg); }
.scibox__txt {
  font-size:12.5px; color:var(--text-2); line-height:1.6; margin-top:7px;
  padding:10px 13px; background:var(--surface-2);
  border-left:2px solid var(--accent); border-radius:var(--r-sm);
}

/* ── REWARD (Gutschein-Teaser vor dem Teilen) ───────────────────────────── */
.reward {
  padding:18px; border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  background:
    radial-gradient(130% 130% at 0% 0%, var(--accent-soft), transparent 58%),
    var(--surface);
  box-shadow:var(--shadow-glow);
}
.reward__head { display:flex; align-items:center; gap:13px; margin-bottom:11px; }
.reward__badge {
  flex:0 0 auto; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-ink); font-weight:700; letter-spacing:-.02em;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff));
  box-shadow:0 9px 24px -9px var(--glow);
}
.reward__pct { font-size:17px; }
.reward__intro { min-width:0; }
.reward__eyebrow { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); margin-bottom:2px; }
.reward__title { font-size:16px; font-weight:600; line-height:1.25; letter-spacing:-.01em; }
.reward__text { font-size:13.5px; color:var(--text-2); line-height:1.6; font-weight:300; margin:0 0 13px; }
.reward__cta { margin-top:2px; }

/* ── TOAST (kurze Rückmeldung, z. B. „Antworten wiederhergestellt") ─────── */
.toast {
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%, 14px); z-index:9999; max-width:88%;
  padding:11px 17px; border-radius:var(--r-pill); text-align:center;
  font-size:13px; font-weight:500; color:var(--text);
  background:var(--surface-3); border:1px solid var(--border);
  box-shadow:0 14px 40px -12px rgba(0,0,0,.6);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-on { opacity:1; transform:translate(-50%, 0); }

/* ── PROGRESS ───────────────────────────────────────────────────────────── */
.progress { height:3px; background:var(--sep); border-radius:3px; overflow:hidden; }
.progress__bar { height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  transition:width var(--dur-slow) var(--ease); }

/* ── DIM ROWS (7 Dimensionen) ───────────────────────────────────────────── */
.dim { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--sep); }
.dim:last-child { border-bottom:none; }
.dim__dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--tone, var(--text-3)); box-shadow:0 0 10px -1px var(--tone); }
.dim__info { flex:1; min-width:0; }
.dim__name { font-size:14px; font-weight:500; }
.dim__detail { font-size:12px; color:var(--text-2); margin-top:1px; }
.dim__bar { width:54px; flex:0 0 auto; }
.dim__bar-bg { height:4px; background:var(--surface-3); border-radius:3px; overflow:hidden; }
.dim__bar-fill { height:100%; width:0; border-radius:3px; background:var(--tone, var(--accent)); transition:width 1.1s var(--ease); }

/* ── TRAITS (Typ-Merkmale) ──────────────────────────────────────────────── */
.trait { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--sep); }
.trait:last-child { border-bottom:none; }
.trait__icon { font-size:19px; width:26px; text-align:center; flex:0 0 auto; }
.trait__text { font-size:14px; line-height:1.5; color:var(--text); }

/* ── TIP CARD (Empfehlung) ──────────────────────────────────────────────── */
.tip { background:var(--surface); border:1px solid var(--border); border-top:2px solid var(--accent-2);
  border-radius:var(--r-lg); padding:18px 20px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.tip__num { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); margin-bottom:7px; }
.tip__head { font-size:17px; font-weight:600; letter-spacing:-.01em; margin-bottom:7px; }
.tip__body { font-size:14px; color:var(--text-2); line-height:1.65; font-weight:300; }
.tip__product { margin-top:11px; padding:11px 14px; border-radius:var(--r-sm); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.tip__product-lbl { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); margin-bottom:3px; }
.tip__product-txt { font-size:13px; font-weight:500; line-height:1.45; color:var(--text); }
.tip__src { font-size:11px; color:var(--text-3); margin-top:8px; }

/* ── CONTACT / HOURS ────────────────────────────────────────────────────── */
.crow { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--sep); }
.crow:last-child { border-bottom:none; }
.crow__ic { width:36px; height:36px; flex:0 0 auto; border-radius:10px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:16px; }
.crow__lbl { font-size:11px; color:var(--text-3); }
.crow__val { font-size:14px; font-weight:500; }
.orow { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--sep); font-size:14px; }
.orow:last-child { border-bottom:none; }
.orow__day { color:var(--text-2); }
.orow__time { font-weight:500; }
.orow__time.is-closed { color:var(--text-3); font-weight:400; }

/* ── SOCIAL ROW ─────────────────────────────────────────────────────────── */
.social { display:flex; gap:10px; }
.social a {
  width:40px; height:40px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-2);
  transition:transform var(--dur) var(--ease-spring), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.social a:hover { transform:translateY(-2px); color:var(--accent); background:var(--accent-soft); }
.social svg { width:19px; height:19px; }

/* ── NEWSLETTER CARD ────────────────────────────────────────────────────── */
.newsletter {
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 120% at 100% 0%, var(--accent-soft), transparent 55%),
    var(--surface);
  border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius:var(--r-lg); padding:20px;
}
.newsletter__eyebrow { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.newsletter__title { font-size:18px; font-weight:600; margin-bottom:6px; }
.newsletter__text { font-size:13.5px; color:var(--text-2); line-height:1.6; margin-bottom:14px; font-weight:300; }

/* ── LEGAL BAR ──────────────────────────────────────────────────────────── */
.legalbar { display:flex; justify-content:center; gap:18px; padding:14px 20px calc(env(safe-area-inset-bottom,0px) + 16px); border-top:1px solid var(--sep); }
.legalbar button { font-size:11px; color:var(--text-3); background:none; border:none; cursor:pointer; padding:4px; }
.legalbar button:hover { color:var(--text-2); }

/* ── SHEET / MODAL (Bottom-Sheet) ───────────────────────────────────────── */
.overlay {
  position:fixed; inset:0; z-index:200; display:none;
  align-items:flex-end; justify-content:center;
  background:rgba(2,6,16,.6); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.overlay.is-open { display:flex; animation:fadeIn var(--dur) var(--ease); }
.sheet {
  width:100%; max-width:var(--max); max-height:90vh; display:flex; flex-direction:column;
  background:var(--surface-solid); border:1px solid var(--border); border-bottom:none;
  border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--shadow-pop);
  animation:sheetUp var(--dur-slow) var(--ease-spring);
}
.sheet__handle { width:38px; height:4px; border-radius:3px; background:var(--surface-3); margin:12px auto 0; flex:0 0 auto; }
.sheet__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 20px; border-bottom:1px solid var(--sep); flex:0 0 auto; }
.sheet__title { font-size:17px; font-weight:600; }
.sheet__close { width:30px; height:30px; flex:0 0 auto; border:none; border-radius:50%; background:var(--surface-2); color:var(--text-2); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; }
.sheet__body { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px; flex:1 1 auto; }
.sheet__body h2 { font-size:16px; margin:18px 0 7px; }
.sheet__body h2:first-child { margin-top:0; }
.sheet__body h3 { font-size:14px; margin:13px 0 5px; }
.sheet__body p { font-size:13.5px; color:var(--text-2); line-height:1.65; margin-bottom:9px; font-weight:300; }
.sheet__body ul { padding-left:18px; margin-bottom:9px; }
.sheet__body li { font-size:13.5px; color:var(--text-2); line-height:1.6; margin-bottom:4px; font-weight:300; }
.sheet__body strong { color:var(--text); }
.ibox { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:13px 15px; margin:10px 0; }
.ibox p { margin:0; }

/* ── COOKIE SHEET (Variante) ────────────────────────────────────────────── */
.cookie__intro { font-size:13px; color:var(--text-2); line-height:1.6; margin:6px 0 14px; }
.cookie__cat { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:13px 15px; margin-bottom:10px; }
.cookie__cat-name { font-size:14px; font-weight:500; margin-bottom:2px; }
.cookie__cat-req { font-size:11px; color:var(--success); font-weight:500; }
.cookie__foot { display:flex; gap:14px; justify-content:center; padding:12px 0 2px; }
.cookie__foot button { font-size:11px; color:var(--text-3); background:none; border:none; text-decoration:underline; cursor:pointer; }
details.disclosure { border:1px solid var(--border); border-radius:var(--r-sm); margin-bottom:10px; overflow:hidden; }
details.disclosure > summary { list-style:none; cursor:pointer; padding:11px 14px; font-size:12.5px; font-weight:500; color:var(--text-2); background:var(--surface-2); display:flex; justify-content:space-between; align-items:center; }
details.disclosure > summary::-webkit-details-marker { display:none; }
details.disclosure > summary::after { content:'›'; transition:transform var(--dur) var(--ease); color:var(--text-3); }
details.disclosure[open] > summary::after { transform:rotate(90deg); }
details.disclosure .disclosure__body { padding:12px 14px; }
details.disclosure .disclosure__body p { font-size:12.5px; margin:0; }

/* ── VOUCHER ────────────────────────────────────────────────────────────── */
.voucher-overlay { position:fixed; inset:0; z-index:600; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(2,6,16,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.voucher-overlay.is-open { display:flex; animation:fadeIn var(--dur) var(--ease); }
.voucher { position:relative; overflow:hidden; width:100%; max-width:360px;
  background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-pop); animation:scaleIn var(--dur-slow) var(--ease-spring); }
.confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.confetti span { position:absolute; top:-12px; width:8px; height:8px; border-radius:2px; animation:confettiFall linear infinite; }
.voucher__inner { position:relative; z-index:1; padding:20px; }
.voucher__head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.voucher__eyebrow { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }
.voucher__title { font-size:21px; font-weight:600; letter-spacing:-.02em; }
.voucher__divider { height:1.5px; background:var(--accent); opacity:.5; margin:14px 0; }
.voucher__badge { width:108px; height:108px; margin:0 auto 8px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff));
  box-shadow:0 10px 34px -8px var(--glow); }
.voucher__pct { font-size:42px; font-weight:700; color:var(--accent-ink); line-height:1; letter-spacing:-.04em; }
.voucher__off { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); opacity:.8; }
.voucher__intro { font-size:13.5px; color:var(--text-2); line-height:1.6; text-align:center; margin-bottom:14px; }
.voucher__validity { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; margin-bottom:14px; }
.voucher__vrow { display:flex; justify-content:space-between; align-items:center; padding:11px 15px; }
.voucher__vrow + .voucher__vrow { border-top:1px solid var(--sep); }
.voucher__vlbl { font-size:12px; color:var(--text-3); }
.voucher__vdate { font-size:15px; font-weight:600; letter-spacing:.02em; }
.voucher__hint { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--accent-2);
  background:var(--accent-2-soft); border-radius:var(--r-sm); padding:9px 12px; margin-bottom:12px; }
.voucher__fine { font-size:10px; color:var(--text-3); line-height:1.55; text-align:center; }

/* ── INSTALL BANNER ─────────────────────────────────────────────────────── */
.install { position:sticky; top:0; z-index:60; display:none; align-items:center; gap:10px;
  padding:11px 18px; background:var(--accent); color:var(--accent-ink); }
.install.is-open { display:flex; }
.install__txt { font-size:13px; font-weight:600; flex:1; }
.install__btn { background:rgba(0,0,0,.16); color:inherit; border:none; border-radius:8px; padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.install__x { background:none; border:none; color:inherit; font-size:20px; cursor:pointer; opacity:.7; line-height:1; }

/* ---------------------------------------------------------
   Rücksprung zur Website – damit die App keine Sackgasse ist.
   Auf dem Startbildschirm unter dem Haupt-Button.
   Wird ausgeblendet, wenn die App installiert läuft (standalone),
   denn dort gibt es keinen Browser-Zurück-Weg zur Website.
   → siehe js/app.js, dort wird stattdessen extern geöffnet.
   --------------------------------------------------------- */
.backlink{
  margin-top:.6rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;
  color:var(--text-2);
  font-weight:500;
}
.backlink:hover{color:var(--text)}
.backlink svg{width:18px;height:18px;flex:0 0 auto}