/* wunschliste64.de – Marken-Layer über Bootstrap 5.3 (Orange/Schwarz/Weiß) */

:root {
  --wl-orange: #F59C1A;
  --wl-orange-hover: #E08E12;
  --bs-primary: #F59C1A;
  --bs-primary-rgb: 245, 156, 26;
  --bs-link-color: #F59C1A;
  --bs-link-color-rgb: 245, 156, 26;
  --bs-link-hover-color: #E08E12;
}

/* Dark (Default) – Werte aus x64.de */
[data-bs-theme="dark"] {
  --bs-body-bg: #0D0F12;
  --bs-body-color: #DEE2E6;
  --bs-tertiary-bg: #191D23;
  --bs-secondary-bg: #262B33;
  --bs-border-color: #262B33;
  --bs-emphasis-color: #ffffff;
}

/* Light */
[data-bs-theme="light"] {
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-tertiary-bg: #f8f9fa;
  --bs-border-color: #dee2e6;
}

body { min-height: 100vh; overflow-x: hidden; }

/* Primary-Buttons auf Marken-Orange umfärben */
.btn-primary {
  --bs-btn-bg: var(--wl-orange);
  --bs-btn-border-color: var(--wl-orange);
  --bs-btn-hover-bg: var(--wl-orange-hover);
  --bs-btn-hover-border-color: var(--wl-orange-hover);
  --bs-btn-active-bg: var(--wl-orange-hover);
  --bs-btn-active-border-color: var(--wl-orange-hover);
  --bs-btn-color: #1a1200;
  --bs-btn-hover-color: #1a1200;
  --bs-btn-active-color: #1a1200;
  --bs-btn-disabled-bg: var(--wl-orange);
  --bs-btn-disabled-border-color: var(--wl-orange);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--wl-orange);
  --bs-btn-border-color: var(--wl-orange);
  --bs-btn-hover-bg: var(--wl-orange);
  --bs-btn-hover-border-color: var(--wl-orange);
  --bs-btn-hover-color: #1a1200;
}

.brand-mark { letter-spacing: -.02em; }

/* Icons */
.wl-icon { vertical-align: -.125em; flex-shrink: 0; }

/* Kopfzeile: IMMER dunkel, auch im Light Mode */
.site-header {
  background: #12151A;
  border-bottom: 1px solid #262B33 !important;
}
.site-header .navbar-brand,
.site-header .brand-mark { color: #F1F3F5; }
.site-header .btn-outline-light { --bs-btn-color:#DEE2E6; --bs-btn-border-color:#3a424d; }

/* Theme-Toggle: randlos, nur Symbol */
.theme-toggle {
  background: transparent; border: 0; color: #cfd4da;
  padding: .35rem .5rem; line-height: 1; font-size: 1.1rem; cursor: pointer; border-radius: .4rem;
}
.theme-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }
.theme-toggle .icon-light { display: none; }
[data-bs-theme="light"] .theme-toggle .icon-light { display: inline-block; }
[data-bs-theme="light"] .theme-toggle .icon-dark { display: none; }

/* Jumbotron / Hero */
.hero-jumbo {
  position: relative; overflow: hidden;
  border: 1px solid var(--bs-border-color); border-radius: 1rem;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background-color: var(--bs-tertiary-bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(245,156,26,.10) 1px, transparent 0),
    radial-gradient(1200px 400px at 100% 0%, rgba(245,156,26,.10), transparent 60%);
  background-size: 22px 22px, 100% 100%;
}
[data-bs-theme="light"] .hero-jumbo {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(13,15,18,.05) 1px, transparent 0),
    radial-gradient(1200px 400px at 100% 0%, rgba(245,156,26,.14), transparent 60%);
}
.hero-jumbo h1 { font-weight: 800; letter-spacing: -.02em; }
.hero-lead {
  font-size: 1.15rem; font-weight: 500; line-height: 1.55;
  color: var(--bs-body-color); max-width: 34rem; opacity: .92;
}

/* 1-2-3 Schritte */
.step-num {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wl-orange); color: #1a1200; font-weight: 700;
}

/* Karten */
.item-card { height: 100%; overflow: hidden; }
.item-card .thumb {
  aspect-ratio: 4 / 3; background: var(--bs-tertiary-bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.item-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.item-card .thumb .wl-icon { font-size: 2.75rem; opacity: .3; }
.item-card.is-taken { opacity: .62; }

.owner-note {
  background: var(--bs-tertiary-bg); border-left: 3px solid var(--wl-orange);
  padding: .35rem .6rem; border-radius: .25rem; font-size: .9rem;
}

.status-ribbon { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }

.affiliate-star { color: var(--wl-orange); font-weight: 700; cursor: help; }
.affiliate-note { font-size: .8rem; }

.legal h2 { margin-top: 1.6rem; }
.legal .placeholder-hint {
  background: rgba(245,156,26,.12); border: 1px dashed var(--wl-orange);
  padding: .5rem .75rem; border-radius: .4rem; font-size: .9rem;
}

.qr-box { max-width: 180px; }
.qr-box svg { width: 100%; height: auto; background:#fff; padding:.4rem; border-radius:.4rem; }

/* ===== Full-Bleed-Bänder (Jumbotron über gesamte Breite) ===== */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
}
.band { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.band-structure {
  background-color: var(--bs-tertiary-bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(245,156,26,.12) 1px, transparent 0),
    radial-gradient(1100px 460px at 100% -10%, rgba(245,156,26,.14), transparent 60%);
  background-size: 20px 20px, 100% 100%;
  border-bottom: 1px solid var(--bs-border-color);
}
[data-bs-theme="light"] .band-structure {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(13,15,18,.06) 1px, transparent 0),
    radial-gradient(1100px 460px at 100% -10%, rgba(245,156,26,.16), transparent 60%);
}
.band-steps {
  background-color: var(--bs-body-bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(128,128,128,.10) 1px, transparent 0);
  background-size: 26px 26px;
  border-bottom: 1px solid var(--bs-border-color);
}
.hero-lead { font-size: 1.18rem; font-weight: 500; line-height: 1.55; color: var(--bs-body-color); max-width: 34rem; }

/* ===== Footer: besser lesbares Grau ===== */
.site-footer { --wl-foot: #a7b0bb; }
[data-bs-theme="light"] .site-footer { --wl-foot: #4b5259; }
.site-footer, .site-footer .text-secondary { color: var(--wl-foot) !important; }
.site-footer a { color: var(--wl-foot) !important; text-decoration: none; }
.site-footer a:hover { color: var(--wl-orange) !important; }
.site-footer .affiliate-note { opacity: .85; }

/* ===== Farbige Teilen-Buttons ===== */
.btn-whatsapp {
  --bs-btn-bg:#25D366; --bs-btn-border-color:#25D366; --bs-btn-color:#08331b;
  --bs-btn-hover-bg:#1ebe5b; --bs-btn-hover-border-color:#1ebe5b; --bs-btn-hover-color:#08331b;
  --bs-btn-active-bg:#1ebe5b; font-weight:600;
}
.btn-qr {
  --bs-btn-bg:#5b6ccf; --bs-btn-border-color:#5b6ccf; --bs-btn-color:#fff;
  --bs-btn-hover-bg:#4a5bbf; --bs-btn-hover-border-color:#4a5bbf; --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:#4a5bbf; font-weight:600;
}
.share-card {
  background: linear-gradient(135deg, rgba(245,156,26,.10), rgba(91,108,207,.10));
  border: 1px solid var(--bs-border-color) !important;
}

/* ===== Wunschlisten-Kopf ===== */
.wishlist-eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700;
  color: var(--wl-orange);
}

/* ===== Card-Politur ===== */
.item-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
}
.item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.28);
  border-color: rgba(245,156,26,.5) !important;
}
.item-card .thumb img { transition: transform .25s ease; }
.item-card:hover .thumb img { transform: scale(1.04); }
.priority-ribbon {
  position: absolute; top: .6rem; left: -.35rem; z-index: 2;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .2rem .55rem; border-radius: .2rem; color: #1a1200; background: var(--wl-orange);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.item-card .price-tag { font-size: 1.05rem; }

/* Login-Callout */
.login-callout {
  background: linear-gradient(135deg, rgba(245,156,26,.14), rgba(91,108,207,.12));
  border: 1px solid var(--bs-border-color) !important;
}

/* Ratgeber-Karten mit Bild + Text-Footer */
.post-card { transition: transform .15s ease, box-shadow .15s ease; color: inherit; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.25); }
.post-card h2, .post-card h3 { color: var(--bs-body-color); }
.blog-card { overflow: hidden; border-radius: .8rem; box-shadow: 0 .4rem 1rem rgba(0,0,0,.15); }
.blog-card-media {
  aspect-ratio: 16 / 10; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(245,156,26,.28), rgba(91,108,207,.28));
}
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-cat { color: #fff; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .92; }
.blog-card-foot { background: var(--bs-body-bg); border-top: 0; }

/* Dashboard-Karten */
.min-w-0 { min-width: 0; }
.wl-card { overflow: hidden; border-radius: .8rem; box-shadow: 0 .4rem 1rem rgba(0,0,0,.15); transition: transform .15s ease, box-shadow .15s ease; }
.wl-card:hover { transform: translateY(-3px); box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.25); }
.wl-card-head {
  background: linear-gradient(135deg, #F59C1A, #5b6ccf); color: #fff; font-weight: 600;
  border: 0; font-size: .85rem; letter-spacing: .02em;
}

/* Ratgeber-Artikel */
.article-body { max-width: 44rem; }
.article-body h2 { margin-top: 2rem; }
.article-body p { line-height: 1.7; }
.article-hero { border-radius: 1rem; padding: clamp(1.5rem,4vw,2.5rem); }

/* ===== Wiederverwendbarer Farbverlauf ===== */
.panel-gradient {
  background: linear-gradient(135deg, rgba(245,156,26,.14), rgba(91,108,207,.12));
  border: 1px solid var(--bs-border-color);
}

/* Akzent-Button (nicht immer Orange) – Verlauf */
.btn-accent {
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff; --bs-btn-border-color:transparent;
  background: linear-gradient(135deg, #F59C1A, #5b6ccf);
  border: 0; font-weight: 600;
}
.btn-accent:hover { filter: brightness(1.07); color:#fff; }

/* Fortschrittsbalken in Markenfarbe */
.progress-bar { background-color: var(--wl-orange); }

/* Shop-Favicon & Tabellen-Thumbnail */
.shop-favicon { object-fit: contain; border-radius: 3px; vertical-align: -.15em; }
.shop-line { font-size: .72rem; min-height: 1rem; }
.item-title {
  line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.table-thumb {
  width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bs-tertiary-bg); border-radius: .3rem; overflow: hidden;
}
.table-thumb img { width: 100%; height: 100%; object-fit: contain; }
.table-thumb .wl-icon { opacity: .35; }

/* ===== Navbar mobil ===== */
.site-header .nav-link { color: #cbd2da; }
.site-header .nav-link:hover, .site-header .nav-link:focus { color: #fff; }
.site-header .navbar-toggler { border-color: rgba(255,255,255,.25); color: #cbd2da; }
.site-header .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(245,156,26,.35); }
.site-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 767.98px) {
  .site-header .navbar-collapse {
    background: #12151A; border: 1px solid #262B33; border-radius: .5rem;
    padding: .75rem; margin-top: .5rem;
  }
  .item-title { font-size: .95rem; }
}

/* Handy (xs): Produktkachel horizontal über volle Breite */
@media (max-width: 575.98px) {
  .item-card { flex-direction: row; align-items: stretch; }
  .item-card .thumb { width: 40%; max-width: 150px; aspect-ratio: 1; flex: 0 0 40%; }
  .item-card .card-body { flex: 1 1 auto; }
}

/* ===== Verwalten: Drag & Drop ===== */
.manage-item .thumb {
  width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bs-tertiary-bg); overflow: hidden;
}
.manage-item .thumb img { width: 100%; height: 100%; object-fit: contain; }
.manage-item .thumb .ph { opacity: .4; font-size: 1.6rem; }
.drag-col { padding-top: .2rem; }
.drag-handle { cursor: grab; color: var(--bs-secondary-color); line-height: 1; touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.sort-index { font-variant-numeric: tabular-nums; }
.manage-item.dragging { opacity: .5; border-color: var(--wl-orange) !important; box-shadow: 0 .5rem 1rem rgba(0,0,0,.3); }

/* ============================================================
   Sanfteres, weicheres Design  (Feedback: runder & softer)
   Große, teils organische Rundungen, weiche Schatten,
   pastellige Hintergrund-Verläufe. Marke (Orange) bleibt Akzent.
   ============================================================ */
:root {
  --bs-border-radius:      1rem;
  --bs-border-radius-sm:   .75rem;
  --bs-border-radius-lg:   1.25rem;
  --bs-border-radius-xl:   1.75rem;
  --bs-border-radius-xxl:  2.25rem;
  --wl-shadow-soft:  0 .7rem 1.9rem rgba(40, 40, 70, .16);
  --wl-shadow-hover: 0 1rem 2.2rem rgba(40, 40, 70, .16);
  /* organisch: eine Ecke bewusst weniger rund */
  --wl-radius-organic: 2rem 2rem 2rem .8rem;
}
[data-bs-theme="dark"] {
  --wl-shadow-soft:  0 .6rem 1.7rem rgba(0, 0, 0, .40);
  --wl-shadow-hover: 0 1rem 2.4rem rgba(0, 0, 0, .52);
}

/* weiche, pastellige Seitenhintergründe */
body { background-attachment: fixed; }
[data-bs-theme="light"] body {
  background-image: linear-gradient(175deg, #dde4eb 0%, #e7e1e6 46%, #eee9e2 100%);
}
[data-bs-theme="dark"] body {
  background-image: linear-gradient(175deg, #0d0f13 0%, #121119 55%, #17110f 100%);
}

/* Buttons: weiche Pillenform */
.btn { border-radius: 2rem; }
.btn-sm { border-radius: 1.6rem; }
.btn-lg { border-radius: 2.5rem; }

/* Karten: randlos, weiche Schatten, große Rundung */
.card {
  border: 0;
  border-radius: var(--bs-border-radius-xl);
  box-shadow: var(--wl-shadow-soft);
}
.item-card, .blog-card, .wl-card { border-radius: var(--bs-border-radius-xl); }
.item-card:hover, .wl-card:hover, .post-card:hover { box-shadow: var(--wl-shadow-hover); }

/* Eingaben & Selects weicher (input-group sauber verbunden lassen) */
.form-control, .form-select { border-radius: var(--bs-border-radius-lg); }
.input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-text:last-child {
  border-top-right-radius: var(--bs-border-radius-lg);
  border-bottom-right-radius: var(--bs-border-radius-lg);
}

/* Organische, asymmetrische Rundung für große Panels */
.hero-jumbo, .wishlist-head, .login-callout, .article-hero, .share-card,
.blog-card-media, .qr-box svg {
  border-radius: var(--wl-radius-organic) !important;
}

/* Prioritäts-Ribbon & Badges etwas weicher */
.priority-ribbon { border-radius: .6rem; }
.badge { border-radius: .8rem; }

/* Modals & Alerts weicher */
.modal-content { border: 0; border-radius: var(--bs-border-radius-xl); box-shadow: var(--wl-shadow-hover); }
.alert { border: 0; border-radius: var(--bs-border-radius-lg); }

/* Segmented-Control (Ansichtswahl) als weiche Pille */
.btn-group { border-radius: 2rem; }

/* etwas mehr Luft in Produktkacheln */
.item-card .card-body { padding: 1rem; }

/* Pastellig-oranger Verlauf auf Primary-Buttons (Hinzufügen, Zum Shop …) */
.btn-primary {
  background-image: linear-gradient(135deg, #FFC061 0%, var(--wl-orange) 55%, #EE9312 100%);
  border-color: transparent;
  box-shadow: 0 .35rem .9rem rgba(245,156,26,.28);
}
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active,
.btn-primary:first-child:active {
  background-image: linear-gradient(135deg, #FFB84A 0%, var(--wl-orange-hover) 55%, #D9860F 100%);
  border-color: transparent;
}
.btn-primary:disabled, .btn-primary.disabled {
  background-image: linear-gradient(135deg, #FFC061, var(--wl-orange));
}

/* Wunschlisten-Icon/Cover-Kachel (weich, wie Referenz) */
.wl-cover {
  width: 76px; height: 76px; flex: 0 0 76px; border-radius: 1.4rem 1.4rem 1.4rem .6rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(135deg, rgba(245,156,26,.18), rgba(91,108,207,.18));
  box-shadow: var(--wl-shadow-soft); font-size: 2.4rem; line-height: 1;
}
.wl-cover img { width: 100%; height: 100%; object-fit: cover; }
.dash-cover {
  width: 60px; height: 60px; flex: 0 0 60px; border-radius: 1.1rem 1.1rem 1.1rem .5rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: rgba(255,255,255,.15); font-size: 1.9rem; line-height: 1;
}
.dash-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Emoji-Auswahl */
.emoji-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.emoji-pick input { position: absolute; opacity: 0; pointer-events: none; }
.emoji-pick label {
  width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; border-radius: .9rem; cursor: pointer; background: var(--bs-tertiary-bg);
  border: 2px solid transparent; transition: border-color .1s ease, transform .1s ease;
}
.emoji-pick label:hover { transform: translateY(-2px); }
.emoji-pick input:checked + label { border-color: var(--wl-orange); background: rgba(245,156,26,.15); }

/* Weiche, kombinierbare Segment-Filter */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.filter-seg {
  display: flex; gap: .3rem;
  background: var(--bs-tertiary-bg); border-radius: 2rem; padding: .35rem;
  box-shadow: inset 0 0 0 1px rgba(128,128,128,.08);
}
@media (max-width: 575.98px) { .filter-bar .filter-seg { flex: 1 1 100%; } }
/* Am Handy: nur sanfte Symbole, Texte ausblenden */
@media (max-width: 767.98px) {
  .filter-seg-btn .f-label { display: none; }
  .filter-seg-btn { padding: .6rem .5rem; }
  .filter-seg-btn .wl-icon { font-size: 1.2rem; }
}
.filter-seg-btn {
  flex: 1; border: 0; background: transparent; border-radius: 1.7rem; padding: .55rem .7rem;
  font-weight: 600; color: var(--bs-secondary-color); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.filter-seg-btn.active { background: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: var(--wl-shadow-soft); }

/* Farbige Filter-Symbole (Stern = gold, Häkchen = grün) */
.filter-seg-btn[data-val="must"] .wl-icon { color: #F5A623; }
.filter-seg-btn[data-val="available"] .wl-icon { color: #2FB673; }

/* Desktop/Tablet: Pillen breiter, aber flacher */
@media (min-width: 768px) {
  .filter-seg-btn { padding: .34rem 1.15rem; }
}

.filter-seg-btn .filter-count {
  font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 1rem;
  background: rgba(128,128,128,.18);
}
.filter-seg-btn.active .filter-count { background: rgba(245,156,26,.2); color: var(--wl-orange); }

.wl-item.filter-hidden { display: none !important; }