/* =============================================================================
   mydsbowl.css — Seiten-Styles „MyDSBowl"
   Akzent = Gold/Amber (Treue/Punkte). Setzt die Theme-Tokens für .page-mydsbowl
   und stylt den Account-Bereich (#account): Login/Registrierung + Status-Box.
   Wird NACH style.css geladen; style.css bleibt unangetastet.
   ============================================================================= */

/* ---- Theme-Tokens (Engine/Buttons nutzen --pink-hot/--pink-soft) ---- */
.page-mydsbowl{ --pink-hot:#F2B01E; --pink-soft:#FFD27A; }
.page-mydsbowl .btn-pill--pink{ color:#1c1405; }           /* dunkle Schrift auf Gold */
.page-mydsbowl .pkg__book{ color:#1c1405; }

/* Vorteile-Boxen (diff) – wie bei den anderen Unterseiten, in Gold */
/* „Warum mitmachen" – dezent dunkel (kein Schwarz→Gold-Verlauf), Text weiß, Gold-Akzente */
.page-mydsbowl .diff{ background:linear-gradient(160deg,#14100a 0%,#1b1409 58%,#221808 100%); border:1px solid rgba(242,176,30,.16); }
.page-mydsbowl .diff__head .eyebrow{ color:var(--pink-hot); }
.page-mydsbowl .diff__head .h2{ color:#ffffff; }
.page-mydsbowl .diff__head .body{ color:rgba(255,255,255,.74); }
.page-mydsbowl .diff__box{ background:rgba(255,255,255,.04); border:1px solid rgba(242,176,30,.18); }
.page-mydsbowl .diff__box .diff__title{ color:#ffffff; }
.page-mydsbowl .diff__box .diff__text{ color:rgba(255,255,255,.72); }
.page-mydsbowl .diff__icon{ background:rgba(242,176,30,.16); color:var(--pink-hot); }
.page-mydsbowl .diff__box:hover{ border-color:rgba(242,176,30,.5); box-shadow:0 22px 55px -22px rgba(242,176,30,.4); }

/* Hero etwas höher, damit der Scrub-Effekt wirkt (wie mcdonalds) */
.page-mydsbowl .hero{ height:165vh; }
@media (max-width:760px){ .page-mydsbowl .hero{ height:128vh; } }
@media (prefers-reduced-motion:reduce){ .page-mydsbowl .hero{ height:auto; } }

/* Aktive Seite: rechtes Menü-Bild (Desktop) bekommt goldenen Rahmen; Handy-Link
   wird über das globale .menu__links a.is-active (Akzentfarbe Gold) gehighlightet. */
.menu__card.is-active{ box-shadow:0 0 0 3px var(--pink-hot), 0 0 26px -4px var(--pink-hot); }
/* Handy: inaktive Feature-Links wie normale Links (weiß), aktive Seite in voller Gold-Akzentfarbe */
.page-mydsbowl .menu__links-feature a{ color:var(--white); }
.page-mydsbowl .menu__links-feature a.is-active{ color:var(--pink-hot); }

/* =========================================================================
   ACCOUNT-BEREICH (#account)
   ========================================================================= */
.account{ max-width:620px; margin:0 auto; }

.acc-card{
  position:relative;
  background:linear-gradient(180deg, rgba(24,28,44,.92), rgba(14,18,30,.94));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-card);
  padding:clamp(22px,3.5vw,38px);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8);
  backdrop-filter:blur(14px);
}
.acc-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%, rgba(242,176,30,.14), transparent 55%);
}

/* ---- Tabs ---- */
.acc-tabs{
  display:flex; gap:6px; padding:5px; margin-bottom:22px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
}
.acc-tab{
  flex:1; appearance:none; border:0; cursor:pointer;
  padding:.7em 1em; border-radius:999px;
  font:inherit; font-weight:700; font-size:.95rem; letter-spacing:.01em;
  color:rgba(255,255,255,.62); background:transparent;
  transition:color .25s var(--ease-ui), background .25s var(--ease-ui);
}
.acc-tab.is-active{ color:#1c1405; background:var(--pink-hot); }
.acc-tab:not(.is-active):hover{ color:#fff; }

/* ---- Formular ---- */
.acc-form{ display:flex; flex-direction:column; gap:14px; }
.acc-field{ display:flex; flex-direction:column; gap:7px; }
.acc-field > span{ font-size:.82rem; font-weight:600; color:rgba(255,255,255,.7); letter-spacing:.02em; }
.acc-field input{
  width:100%; box-sizing:border-box;
  padding:.85em 1em; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#fff; font:inherit; font-size:1rem;
  transition:border-color .2s var(--ease-ui), background .2s var(--ease-ui), box-shadow .2s var(--ease-ui);
}
.acc-field input::placeholder{ color:rgba(255,255,255,.34); }
.acc-field input:focus{
  outline:none; border-color:var(--pink-hot); background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(242,176,30,.22);
}
.acc-check{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:rgba(255,255,255,.72); line-height:1.4; cursor:pointer; }
.acc-check input{ margin-top:.15em; width:17px; height:17px; accent-color:var(--pink-hot); flex:none; }

.acc-submit{ margin-top:6px; width:100%; justify-content:center; }
.acc-submit.is-loading{ opacity:.7; pointer-events:none; }

.acc-hint{ margin:4px 0 0; font-size:.84rem; color:rgba(255,255,255,.58); text-align:center; }
.acc-hint b{ color:var(--pink-soft); }
.acc-link{ appearance:none; border:0; background:none; cursor:pointer; font:inherit; font-weight:700; color:var(--pink-hot); padding:0; }
.acc-link:hover{ text-decoration:underline; }

.acc-msg{ margin:0 0 16px; padding:.7em 1em; border-radius:12px; font-size:.88rem; line-height:1.4; }
.acc-msg.is-err{ background:rgba(244,67,54,.14); border:1px solid rgba(244,67,54,.4); color:#ffb4ad; }
.acc-msg.is-ok{ background:rgba(76,175,80,.14); border:1px solid rgba(76,175,80,.4); color:#a9e6ac; }

/* =========================================================================
   STATUS-BOX (eingeloggt)
   ========================================================================= */
.acc-status__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.acc-status__hello{ margin:0; font-size:.85rem; color:rgba(255,255,255,.6); }
.acc-status__name{ margin:.1em 0 0; font-size:clamp(1.35rem,3vw,1.7rem); color:#fff; font-weight:900; line-height:1.1; }
.acc-status__code{ text-align:right; flex:none; }
.acc-status__code span{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.5); }
.acc-status__code b{ font-size:1.5rem; color:var(--pink-hot); font-weight:900; letter-spacing:.08em; }

.acc-status__points{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:22px 0; padding:20px 22px; border-radius:18px;
  background:linear-gradient(135deg, rgba(242,176,30,.16), rgba(242,176,30,.05));
  border:1px solid rgba(242,176,30,.3);
}
.acc-status__pnum{ font-size:clamp(2.6rem,8vw,3.4rem); font-weight:900; line-height:1; color:var(--pink-hot); }
.acc-status__plabel{ font-size:1rem; font-weight:700; color:rgba(255,255,255,.8); }
.acc-status__stamps{ margin-left:auto; font-size:.85rem; color:rgba(255,255,255,.72); white-space:nowrap; }
.acc-status__stamps i{ color:var(--pink-soft); }

.acc-status__actstitle{ margin:0 0 10px; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.5); }
.acc-acts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.acc-act{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:.7em 0; border-bottom:1px solid rgba(255,255,255,.07);
}
.acc-act:last-child{ border-bottom:0; }
.acc-act__src{ font-size:.92rem; color:rgba(255,255,255,.88); font-weight:500; }
.acc-act__meta{ display:flex; align-items:center; gap:14px; flex:none; }
.acc-act__date{ font-size:.78rem; color:rgba(255,255,255,.42); }
.acc-act__pts{ font-size:.95rem; font-weight:800; min-width:42px; text-align:right; }
.acc-act.is-earn .acc-act__pts{ color:#7fd884; }
.acc-act.is-redeem .acc-act__pts{ color:#ff9d8a; }
.acc-act--empty{ font-size:.88rem; color:rgba(255,255,255,.55); border-bottom:0; padding:.4em 0; }

.acc-status__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:26px; }
.acc-status__cta .btn-pill{ flex:0 0 auto; }
.acc-logout{
  margin-left:auto; appearance:none; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.86rem; font-weight:600; color:rgba(255,255,255,.5);
  text-decoration:underline; text-underline-offset:3px;
}
.acc-logout:hover{ color:#fff; }

@media (max-width:520px){
  .acc-status__cta{ flex-direction:column; align-items:stretch; }
  .acc-status__cta .btn-pill{ width:100%; justify-content:center; }
  .acc-logout{ margin:6px auto 0; }
}

/* =========================================================================
   STATUS-EDITION-KARTE (erste Karte; gleiche Card-Engine, nur eingeloggt sichtbar)
   ========================================================================= */
/* Standardmäßig versteckt – mydsbowl-auth.js zeigt sie nach Login (kein Flash) */
.page-mydsbowl #editionCards [data-detail="status"]{ display:none; }
/* Meta auf der Status-Karten-Vorderseite: saubere Stat-Boxen (Zahl groß, Label klein) */
.card--status-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px; }
.card--status-meta .ms-box{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:8px 13px; min-width:60px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.card--status-meta .ms-box b{ font-size:1.35rem; font-weight:900; line-height:1; color:#fff; letter-spacing:-.01em; }
.card--status-meta .ms-pts b{ color:var(--pink-soft); }
.card--status-meta .ms-box small{ font-size:.66rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.72); }
@media (max-width:760px){
  .card--status-meta{ gap:7px; }
  .card--status-meta .ms-box{ flex:1 1 0; min-width:0; padding:7px 10px; align-items:center; text-align:center; }
  .card--status-meta .ms-box b{ font-size:1.2rem; }
}

/* Eingebettetes Dashboard – Wrapper im Account-Bereich */
.mdb-dash{ width:100%; }
.mdb-dash[hidden]{ display:none; }