/* ==========================================================================
   WeReSo – v2.css
   Version 2: Anfrage-Warenkorb, Abo-Seite, Abo-Teaser. Wird nach components.css geladen.
   ========================================================================== */

/* ---------- Nav ---------- */
.nav-link--accent { color: var(--c-green); opacity: 1 !important; }

/* ---------- Sticky cart bar ---------- */
.cartbar {
  position: sticky;
  top: 4.6rem;
  z-index: 40;
  background: var(--c-green);
  color: var(--c-white);
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cartbar .container { display: flex; align-items: center; gap: var(--space-3); padding-block: 0.55rem; }
.cartbar-total { margin-left: auto; }
.cartbar .btn--primary { background: var(--c-black); }
.cartbar .btn--primary:hover { background: #000; }

.btn--small { font-size: 0.95rem; padding: 0.55em 1.1em; }
.btn--dark { color: var(--c-black); border-color: var(--c-black); }
.btn--dark:hover { background: var(--c-black); color: var(--c-white); }

/* ---------- Product card actions ---------- */
.product-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.product-actions .is-added { background: var(--c-black); }
.abo-tag {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-green);
  border: 1.5px solid var(--c-green);
  border-radius: 6px;
  padding: 0.2em 0.6em;
}

/* ---------- Cart list inside the request section ---------- */
.cart-list { margin-bottom: var(--space-3); }
.cart-empty { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-card); padding: var(--space-3); margin: 0; }
.cart-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto auto;
  gap: var(--space-2);
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.6rem;
}
.cart-row img { background: var(--c-white); border-radius: 8px; object-fit: contain; width: 56px; height: 56px; }
.cart-row-main { display: grid; line-height: 1.3; }
.cart-row-main span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); }
.cart-days { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; display: flex; align-items: center; gap: 0.4em; }
.cart-days input { width: 4.2em; padding: 0.35em 0.5em; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: var(--c-white); text-align: center; }
.cart-price { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; color: var(--c-green); min-width: 4em; text-align: right; }
.cart-remove { background: none; border: 0; color: rgba(255, 255, 255, 0.5); font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 0 0.2em; }
.cart-remove:hover { color: #ff7a7a; }
.cart-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 0.6rem 0.9rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }
.cart-sum strong { font-family: var(--f-display); font-size: 1.6rem; color: var(--c-white); }
.contact-small { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.3rem; }

/* ---------- Abo teaser on the start page ---------- */
.abo-teaser-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-5); align-items: center; }
.abo-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.abo-points li { padding-left: 1.6em; position: relative; color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; }
.abo-points li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.9em; height: 0.9em; background: var(--c-green); border-radius: 3px; }

/* ---------- Abo page: plans ---------- */
.grid-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); align-items: stretch; }
.plan {
  position: relative;
  background: var(--c-concrete);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.plan--featured { background: var(--c-black); color: var(--c-white); outline: 4px solid var(--c-green); }
.plan--featured .plan-for, .plan--featured .plan-list { color: rgba(255, 255, 255, 0.8); }
.plan-badge {
  position: absolute; top: -0.9rem; right: var(--space-3);
  background: var(--c-green); color: var(--c-white);
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem;
  padding: 0.3em 0.8em; border-radius: 6px;
}
.plan-price { font-family: var(--f-display); font-weight: 700; font-size: 3.4rem; line-height: 1; color: var(--c-green); }
.plan-price small { font-size: 0.32em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: inherit; opacity: 0.8; margin-left: 0.3em; }
.plan-for { color: var(--c-muted); margin: 0; min-height: 3.2em; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; color: var(--c-ink); flex: 1; }
.plan-list li { padding-left: 1.5em; position: relative; }
.plan-list li::before { content: "✓"; position: absolute; left: 0; color: var(--c-green); font-weight: 700; }
.plans-note { margin-top: var(--space-3); color: var(--c-muted); }

/* ---------- Abo page: covered devices ---------- */
.grid-covered { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.covered { display: flex; align-items: center; gap: var(--space-2); background: var(--c-white); border-radius: 14px; padding: 0.7rem; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; line-height: 1.15; }
.covered img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.covered small { font-weight: 400; color: var(--c-muted); font-family: var(--f-body); font-size: 0.8rem; }

@media (max-width: 900px) {
  .grid-plans { grid-template-columns: 1fr; }
  .grid-covered { grid-template-columns: repeat(2, 1fr); }
  .abo-teaser-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cartbar { top: 4.2rem; }
  .cartbar .container { flex-wrap: wrap; gap: 0.5rem; }
  .cart-row { grid-template-columns: 48px 1fr auto; }
  .cart-days { grid-column: 2; }
  .cart-price { grid-column: 3; }
  .grid-covered { grid-template-columns: 1fr; }
}

/* ---------- Add-to-request button (deutlich sichtbar) + Hinzugefügt-Zustand ---------- */
.btn--add {
  background: var(--c-green);
  color: var(--c-white);
  font-size: 1.05rem;
  padding: 0.65em 1.3em;
  box-shadow: 0 4px 12px rgba(109, 179, 63, 0.35);
  border: 2px solid var(--c-green);
}
.btn--add:hover { background: var(--c-green-deep); border-color: var(--c-green-deep); }
.btn--add.is-added, .product-actions .is-added {
  background: #e3f4d8;
  color: var(--c-green-deep);
  border-color: var(--c-green);
  box-shadow: none;
}

/* ---------- Mietzeitraum von/bis im Korb ---------- */
.cart-row { grid-template-columns: 56px 1fr auto auto auto; }
.cart-period { display: flex; gap: 0.5rem; }
.cart-period label { display: grid; gap: 0.15rem; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); }
.cart-period input { padding: 0.35em 0.5em; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: var(--c-white); color-scheme: dark; font-size: 0.9rem; }
.cart-price { display: grid; line-height: 1.1; }
.cart-price small { font-family: var(--f-body); font-weight: 400; font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 640px) {
  .cart-row { grid-template-columns: 48px 1fr auto; }
  .cart-period { grid-column: 1 / -1; }
}