/* =============================================================================
   Design experiment, arm C — presentation layer (2026 redesign)
   =============================================================================
   Loaded only by the C templates (list/templates/list/exps/*_c.html), which set
   `class="design-c"` on <body>. Everything here is scoped under `.design-c`, so
   arm A's pages are untouched even though both arms share the same components,
   element ids and JS.

   The shape of the change: today's wish tiles are dark translucent glass on a
   decorative background. Arm C makes the tiles light and opaque, lets the
   chosen background theme stay visible around them, and moves the "reserved"
   state from an alarming red ribbon to a calm teal pill.
   ========================================================================== */

.design-c {
  /* colour */
  --c-brand:      #FEA64D;   /* the existing wish-share orange, unchanged */
  --c-brand-deep: #E8851F;   /* text-safe orange on white */
  --c-brand-soft: #FFEFDC;
  --c-ink:        #26191F;   /* warm plum-black instead of neutral grey */
  --c-ink-2:      #5C4A52;
  --c-ink-3:      #8B7A81;
  --c-paper:      #FFF9F4;
  --c-surface:    #FFFFFF;
  --c-line:       #EADFD6;
  --c-teal:       #2FA8A2;   /* reserved / done — semantic, not the accent */
  --c-teal-soft:  #E4F4F2;
  --c-teal-ink:   #1C6F6B;
  --c-rose:       #C8465C;   /* destructive only */

  /* The toolbar is .navbar.fixed-top: it is out of flow and overlays the top
     70px of every page, so each C surface has to open below it. Arm A solves
     this per page (welcome_carousel.css pads 48px, card_list_base.css 3rem);
     arm C carries one token instead, since getting it wrong hides the headline
     behind the navbar. */
  --c-toolbar-h: 70px;

  /* shape */
  --c-r-sm: 10px;
  --c-r-md: 16px;
  --c-r-lg: 24px;
  --c-shadow-sm: 0 1px 2px rgba(38,25,31,.06), 0 4px 12px rgba(38,25,31,.05);
  --c-shadow-md: 0 2px 4px rgba(38,25,31,.05), 0 12px 32px rgba(38,25,31,.09);
  --c-shadow-lg: 0 24px 64px rgba(38,25,31,.18);

  /* System stack on purpose: no third-party webfont is loaded, so arm C adds
     no CDN request and no data-protection question of its own. */
  --c-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --c-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--c-body);
}

.design-c h1, .design-c h2, .design-c h3, .design-c h4, .design-c h5 {
  font-family: var(--c-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The chosen background theme still shows, but under a warm veil so the light
   tiles keep their contrast on the busy patterns (space, christmas, colorful). */
.design-c #parallax-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,249,244,.62), rgba(255,244,236,.78));
  pointer-events: none;
}

/* Not every background wants the veil.

   The veil exists to stop a busy or dark background swallowing arm C's white
   tiles. Measured on the rendered page — sampling the ground beside the wish
   column, with the veil on and off, against a #FFFFFF tile:

       template            with veil   without      the veil…
       template-snow         1.182       1.580      costs contrast, adds warmth
       template-space        1.170       1.448      costs contrast
       template-christmas    1.111       1.207      costs contrast
       template-colorful     1.097       1.158      costs contrast
       template-leaves       1.062       1.036      EARNS ITS PLACE
       template-white        1.066       1.050      marginal, keep

   On four of them the veil makes the tiles HARDER to see, not easier, while
   tinting cool art warm — the winter photograph is blue-grey and the veil
   pushes it 26 points of red-minus-blue toward cream, which is what reads as a
   pink cast on a background that should feel cold.

   Pflanzen is the opposite and the reason this is a per-template exception
   rather than a blanket removal: leaves1 is so pale that a white tile scores
   1.036:1 on it bare — no edge at all. There the veil is the only thing
   separating card from ground.

   So: off where it costs, on where it pays. */
.design-c #parallax-bg.template-snow::after,
.design-c #parallax-bg.template-space::after,
.design-c #parallax-bg.template-christmas::after,
.design-c #parallax-bg.template-colorful::after {
  background: none;
}

/* The plain background, in arm C, is PAPER rather than white.

   Arm A's tiles are dark glass, so a white ground makes them pop. Arm C's are
   #FFFFFF, so "white background" means white-on-white: measured, a wish tile
   on the unveiled template-whiteii scores 1.012:1, i.e. no edge at all, and
   even with the cream veil on top it only reaches 1.032:1 at the top of the
   page — under the ~1.04 where an edge stops reading. The veil was not a
   design choice there, it was the thing quietly rescuing the tiles, and it
   made a background labelled "Weiß" look pink into the bargain.

   So this stops being accidental: a definite warm paper ground at 1.087:1,
   comfortably above the floor, with the veil switched off because there is no
   art underneath to tame — the ground IS the design, and veiling it would only
   drift the colour again. Arm C's picker calls it "Papier"; arm A keeps its
   own "Weiß" untouched, so the arms still differ in presentation only.

   template-white (WhiteI) is deliberately NOT included: it is a photographic
   texture, which is exactly the case the veil exists for. */
.design-c #parallax-bg.template-whiteii {
  background-color: #FDF4EC;
  background-image: none;
  opacity: 1;
}
.design-c #parallax-bg.template-whiteii::after { background: none; }

/* The base template pads #main-content by 3rem — 22px less than the toolbar
   that covers it. Arm C opens below the toolbar with room to breathe. */
.design-c #main-content { padding-top: calc(var(--c-toolbar-h) + 24px); }

/* ---------- wish tile ---------------------------------------------------- */
.design-c .wish-tile {
  width: 18rem;
  max-width: 100%;
  background: var(--c-surface);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--c-r-md);
  box-shadow: var(--c-shadow-md);
  color: var(--c-ink);
  overflow: hidden;
  backdrop-filter: none;
  transition: transform .14s ease, box-shadow .14s ease;
}
.design-c .wish-tile:hover { transform: translateY(-3px); box-shadow: var(--c-shadow-lg); }

.design-c .wish-image-box {
  aspect-ratio: 4 / 3;
  border-radius: 0;
  border-bottom: 1px solid var(--c-line);
  background: #FAF5F0;
  overflow: hidden;
}
.design-c .wish-image { width: 100%; height: 100%; object-fit: cover; }

.design-c .wish-body { padding: 14px 15px 15px !important; }
.design-c .wish-title { font-size: 1.03rem; font-weight: 700; line-height: 1.22; color: var(--c-ink); }

/* Price: an orange chip rather than pale text on dark glass. */
.design-c .wish-price {
  display: inline-block;
  font-size: .8rem !important;
  font-weight: 800 !important;
  color: var(--c-brand-deep) !important;
  background: var(--c-brand-soft);
  padding: 4px 9px;
  border-radius: 8px;
}
.design-c .wish-text { color: var(--c-ink-3); font-size: .87rem; line-height: 1.45; }
.design-c .wish-more { color: var(--c-brand-deep); font-weight: 600; }

.design-c .wish-actions { display: flex; gap: 8px; align-items: center; }
.design-c .wish-actions .btn { flex: 1; }
.design-c .wish-actions .btn-outline-danger-soft { flex: none; }

/* Reserved: a calm pill in the corner, not a red diagonal ribbon. The tile
   itself steps back instead of shouting. */
.design-c .reserved-banner {
  position: absolute;
  top: 10px; left: 10px;
  right: auto; bottom: auto;
  width: auto; height: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--c-teal);
  background-image: none;
  color: #FFF;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(47,168,162,.4);
  z-index: 3;
}
.design-c .reserved-banner::before {
  content: "";
  width: 11px; height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/></svg>") center/contain no-repeat;
}
.design-c .wish-tile:has(.reserved-banner) { background: #FBF8F6; }
.design-c .wish-tile:has(.reserved-banner) .wish-image { filter: saturate(.35); opacity: .66; }
.design-c .wish-tile:has(.reserved-banner) .wish-title { color: var(--c-ink-2); }

/* Floating controls: same hit areas, light chrome. */
/* The handle moves onto the image's top-left corner: arm A parks it at the
   tile's left edge, vertically centred, where it would sit on top of the wish
   title once the tile is light and the handle is opaque. The reserved pill uses
   that same corner, but only on reserved tiles — and those are not sortable
   (card_list.js binds SortableJS to #cards-list alone), so the handle is hidden
   there rather than fighting the pill for the spot. */
.design-c .btn-edit,
.design-c .drag-handle {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  color: var(--c-ink-2);
  box-shadow: var(--c-shadow-sm);
  opacity: 1;
}
.design-c .btn-edit:hover { color: var(--c-brand-deep); border-color: var(--c-brand); }
.design-c .drag-handle { top: 10px; left: 10px; transform: none; }
.design-c .wish-tile:hover .drag-handle,
.design-c .drag-handle:hover { color: var(--c-ink); background: #FFF; }
.design-c #cards-list-reserved .drag-handle { display: none; }

/* ---------- buttons ------------------------------------------------------ */
.design-c .btn-brand,
.design-c .btn-reserve {
  background: var(--c-brand) !important;
  border: 1.5px solid var(--c-brand) !important;
  color: var(--c-ink) !important;
  font-weight: 700;
  border-radius: var(--c-r-sm) !important;
  box-shadow: 0 6px 16px rgba(254,166,77,.42);
}
.design-c .btn-brand:hover,
.design-c .btn-reserve:hover { background: #FFB467 !important; }

.design-c .btn-reserve-outline {
  background: var(--c-surface) !important;
  border: 1.5px solid var(--c-line) !important;
  color: var(--c-ink) !important;
  font-weight: 700;
  border-radius: var(--c-r-sm) !important;
}
.design-c .btn-reserve-outline:hover { border-color: var(--c-ink-3) !important; }

/* A reserved wish is done, not broken: it reads as a quiet confirmation. */
.design-c .btn-reserve-disabled {
  background: var(--c-teal-soft) !important;
  border: 1.5px solid #BFE5E1 !important;
  color: var(--c-teal-ink) !important;
  font-weight: 700;
  border-radius: var(--c-r-sm) !important;
  opacity: 1 !important;
}
.design-c .btn-outline-danger-soft {
  background: transparent !important;
  border: 0 !important;
  color: var(--c-rose) !important;
  font-weight: 700;
  padding-inline: 10px;
}
.design-c .btn-outline-danger-soft:hover { background: #FDEFF1 !important; }

/* ---------- header panel (exps/header_title_cards_c.html) ---------------- */
.design-c .c-panel {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--c-r-lg);
  box-shadow: var(--c-shadow-md);
  padding: 26px 28px;
}
.design-c .c-panel h1 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); font-weight: 700; margin: 0; }
.design-c .c-desc { color: var(--c-ink-2); max-width: 62ch; margin: 0; }

.design-c .c-datepill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--c-brand-soft);
  color: #7A4E11;
  font-size: .82rem;
  font-weight: 700;
}

.design-c .c-meter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.design-c .c-meter .progress {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
  height: 9px;
  border-radius: 999px;
  background: #F0E5DC;
}
.design-c .c-meter .progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-teal), #4FC0B9) !important;
}
.design-c .c-meter-label { font-size: .82rem; font-weight: 700; color: var(--c-ink-2); }

.design-c .c-share { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.design-c .c-share .btn { border-radius: var(--c-r-sm); font-weight: 700; }
.design-c .c-btn-wa { background: #25D366; color: #08301A !important; border: 0; }
.design-c .c-btn-quiet {
  background: var(--c-surface);
  border: 1.5px solid var(--c-line);
  color: var(--c-ink);
}
.design-c .c-btn-quiet:hover { border-color: var(--c-ink-3); }
.design-c .c-warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 700;
  color: #8A4B10;
  background: #FFEACC;
  border: 1px solid #F4D2A3;
  padding: 5px 10px;
  border-radius: 999px;
}
/* The dropdown's red dot already exists in arm A; keep it, recolour it. */
.design-c .ws-noemail-badge { background: var(--c-rose); }

/* ---------- background swatches (landing + create page) ------------------
   Real crops of the background each template actually paints, generated from
   list/static/media/background_images (see background_template_*.css for the
   mapping). 360x480 webp, 4-13 KB each, so a page can show all seven without
   pulling the full-size backgrounds. Portrait 3:4 with `cover` on both
   surfaces: the landing shows them 3:4, the create page 4:3, one file each.
   Absolute /static/ paths match the convention in background_template_*.css. */
.design-c .c-bg-whiteii,
.design-c .c-bg-white,
.design-c .c-bg-winter,
.design-c .c-bg-christmas,
.design-c .c-bg-leaves,
.design-c .c-bg-colorful,
.design-c .c-bg-space {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* WhiteII paints no image at all — a flat near-white surface — so its swatch
   is the surface itself rather than a photo of nothing. */
.design-c .c-bg-whiteii  { background-image: linear-gradient(160deg,#FFFBF6,#F7EBE0); }
.design-c .c-bg-white    { background-image: url("/static/media/background_thumbs/white.16aefee585ee.webp"); }
.design-c .c-bg-winter   { background-image: url("/static/media/background_thumbs/winter.bfdea2de019d.webp"); }
.design-c .c-bg-christmas{ background-image: url("/static/media/background_thumbs/christmas.d0b9a2ae415a.webp"); }
.design-c .c-bg-leaves   { background-image: url("/static/media/background_thumbs/leaves.21ded8f97300.webp"); }
.design-c .c-bg-colorful { background-image: url("/static/media/background_thumbs/colorful.b8ca1369108f.webp"); }
.design-c .c-bg-space    { background-image: url("/static/media/background_thumbs/space.ac9983509256.webp"); }

/* ---------- occasion chips (shared radiogroup, restyled for a light card) -- */
.design-c .ws-occasion-chip span {
  border: 1.5px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink-2);
}
.design-c .ws-occasion-chip:hover span { border-color: var(--c-ink-3); }
.design-c .ws-occasion-chip input:checked + span {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: #FFF;
}
.design-c .ws-occasion-chip input:focus-visible + span {
  outline: 3px solid var(--c-teal);
  outline-offset: 2px;
}

/* ---------- section divider --------------------------------------------- */
.design-c .c-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 18px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.design-c .c-divider::before,
.design-c .c-divider::after { content: ""; height: 1px; background: var(--c-line); flex: 1; }

/* ---------- the reservation path ------------------------------------------
   Arm A paints the public page on dark glass and hard-codes the matching
   colours inline (and, for the un-reserve button and the divider, inside
   buy_query.js). Arm C repaints those surfaces white, so every one of those
   inline whites has to be answered here or the control disappears rather than
   merely looking wrong. Inline styles need !important to override; Bootstrap's
   .text-white is itself !important, so those selectors also carry an id.
   ------------------------------------------------------------------------- */

/* Un-reserve button on a tile — server-rendered (card_public.html) and the
   copy buy_query.js injects after an AJAX reservation both carry
   .btn-unreserve. Without this it is white-on-white: the only way back from an
   accidental reservation, invisible. */
.design-c .btn-unreserve {
  border: 1px solid var(--c-line) !important;
  color: var(--c-ink-2) !important;
  background: var(--c-surface) !important;
}
.design-c .btn-unreserve:hover,
.design-c .btn-unreserve:focus-visible {
  border-color: var(--c-ink-3) !important;
  color: var(--c-ink) !important;
  background: var(--c-paper) !important;
}

/* The un-reserve confirmation dialog. Its inline dark background loses to the
   .modal-content rule below, leaving white-on-white text and an invisible
   "Abbrechen". */
.design-c #unreserveConfirmModal .modal-content { backdrop-filter: none !important; }
.design-c #unreserveConfirmModal .text-white { color: var(--c-ink) !important; }
.design-c #unreserveConfirmModal .text-muted { color: var(--c-ink-3) !important; }
.design-c #unreserveConfirmModal [data-bs-dismiss="modal"] {
  border: 1px solid var(--c-line) !important;
  color: var(--c-ink-2) !important;
  background: var(--c-surface) !important;
}

/* "Kein Link" sits inside the outline button on a wish with no product URL. */
.design-c .wish-no-link { color: var(--c-ink-3) !important; }

/* The reserved-wishes divider exists in two shapes: the one public_site_c.html
   renders (.c-divider, lines via ::before/::after) and the arm-A markup
   buy_query.js builds when the list had no reservation yet — which is the
   common case, the FIRST reservation on a fresh list. Style by id so both read
   as arm C; the child selectors only match the JS shape. */
.design-c #reserved-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 18px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.design-c #reserved-divider .border-top { border-top-color: var(--c-line) !important; }
.design-c #reserved-divider > span {
  padding: 0 !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  color: var(--c-ink-3) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- add-wish FAB -------------------------------------------------- */
/* The button is fixed, so it floats over whatever happens to be under it — and
   at the bottom of a list that is arm A's orange footer, which arm C does not
   restyle. Brand orange on that footer measured 1.50:1: the primary action on
   the page all but disappears at the end of it.

   No fill fixes this. Brand orange is 1.14:1 against the footer, and even a
   much deeper orange only reaches 2.22:1 — still under the 3:1 WCAG asks for a
   control to read as a distinct object, and it costs the brand colour.

   So the separation comes from a ring instead, which works regardless of what
   is behind: --c-ink-2 scores 4.81:1 on the footer and 7.56:1 on the page's
   own paper. Drawn as a box-shadow rather than a border so the button's 76px
   box, and the icon centred in it, do not move. */
.design-c .ws-addwish-btn {
  background: var(--c-brand) !important;
  background-image: none !important;
  color: var(--c-ink) !important;
  border: 0;
  box-shadow:
    0 0 0 2px var(--c-ink-2),
    0 10px 28px rgba(254,166,77,.45);
}
.design-c .ws-addwish-btn:hover,
.design-c .ws-addwish-btn:focus-visible {
  box-shadow:
    0 0 0 2px var(--c-ink),
    0 14px 34px rgba(254,166,77,.5);
}
.design-c .ws-addwish-hint span {
  background: var(--c-ink);
  color: #FFF;
  border-radius: 999px;
  font-weight: 700;
}

/* ---------- panels that were dark glass ---------------------------------- */
.design-c .ws-inline-addwish-card,
.design-c .modal-content {
  background: var(--c-surface) !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-r-lg) !important;
  box-shadow: var(--c-shadow-lg) !important;
}
.design-c .modal-content .form-control,
.design-c .modal-content .form-select,
.design-c .ws-inline-addwish-card .form-control,
.design-c .ws-inline-addwish-card .form-select {
  background: #FFF;
  color: var(--c-ink);
  border: 1.5px solid var(--c-line);
  border-radius: var(--c-r-sm);
}
.design-c .modal-content .form-label,
.design-c .ws-inline-addwish-card .form-label { color: var(--c-ink) !important; font-weight: 700; }

/* Add-wish tabs: an underline, not a pill row. */
.design-c .nav-tabs { border-bottom: 1px solid var(--c-line); }
.design-c .nav-tabs .nav-link {
  color: var(--c-ink-3) !important;
  font-weight: 700;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none !important;
}
.design-c .nav-tabs .nav-link.active {
  color: var(--c-ink) !important;
  border-bottom-color: var(--c-brand);
}

/* ---------- empty state + save-link prompt ------------------------------- */
.design-c .ws-empty-card,
.design-c .ws-savelink {
  background: rgba(255,255,255,.88) !important;
  color: var(--c-ink) !important;
  border: 1px dashed #E0CDB8 !important;
  border-radius: var(--c-r-lg) !important;
}
.design-c .ws-empty-card *,
.design-c .ws-savelink * { color: inherit; }

@media (max-width: 575.98px) {
  /* Two wishes per row on phones: a 4:3 image at full width turns a nine-wish
     list into ten screens of scrolling. */
  .design-c #cards-list > [data-card-id],
  .design-c #cards-list-reserved > [data-card-id],
  .design-c #cards-list > .col-lg-4,
  .design-c #cards-list-reserved > .col-lg-4,
  /* The public page's container, so a guest arriving from a shared link sees
     the same two-up grid the owner does instead of one tile per screen. */
  .design-c #card_public_container > .col-lg-4 {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding-inline: 6px;
  }
  .design-c .wish-tile { width: 100%; }
  .design-c .wish-body { padding: 11px 12px 12px !important; }
  .design-c .wish-title { font-size: .92rem; }
  /* Tighter than the 3 lines card_public.css clamps to, but NOT hidden: for a
     wish with no product link the description is the only thing saying what is
     wanted ("Gutschein Baumarkt", a size, a colour). Hiding it also hid the
     "mehr…" toggle, because public_site.js measures scrollHeight to decide
     whether to show it — leaving the text unreachable rather than collapsed.
     Withholding information would also stop this arm being presentation-only. */
  .design-c .wish-text.clamp { -webkit-line-clamp: 2; }
  .design-c .wish-actions { flex-wrap: wrap; }
  .design-c .wish-actions .btn { flex: 1 1 100%; }
  .design-c .c-panel { padding: 20px 18px; border-radius: var(--c-r-md); }
}

@media (prefers-reduced-motion: reduce) {
  .design-c .wish-tile { transition: none; }
}

/* Bootstrap 5.3 ships justify-content-* but no justify-items-* utility, so the
   header's centred grid (header_title_cards_c.html) was relying on a class that
   does not exist. Scoped to arm C rather than added globally. */
.design-c .justify-items-center { justify-items: center; }