/* ============================================================
   CHOOOD — Ideen-Detailseite
   Reel links sticky, Anleitung rechts. Ergänzt choood.css und
   nutzt .breadcrumb / .cat-* / .diff-* aus article.css.
   ============================================================ */

.d-wrap {
  /* A variable, so the reel carousel can break out of it exactly. */
  --wrap-pad: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px var(--wrap-pad) 60px;
}
.d-wrap .breadcrumb { padding: 0; margin: 0; }

.back-link {
  display: inline-flex;
  align-items: center;
  margin: 10px 0 2px;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  background: rgba(255,255,255,.72);
  border: 1.5px solid var(--o-lila);
  border-radius: 999px;
  padding: 6px 14px;
  transition: background .15s;
}
.back-link:hover { background: #fff; }

.d-head { margin: 6px 0 14px; }
.d-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 4.5vw, 38px);
  color: var(--on-bg, #3A3A44);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.d-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #3A3A44;
  background: var(--cat-bg, #EEE5F8);
  border: 1.5px solid var(--cat-color, var(--o-lila));
  border-radius: 999px;
  padding: 4px 13px;
}
.d-cat svg { width: 16px; height: 16px; color: var(--cat-color, var(--o-lila)); }
.d-cat svg .hole { fill: var(--cat-bg, #EEE5F8); }

.d-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.d-meta span {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  color: #3A3A44;
  background: rgba(255,255,255,.75);
  border: 1px dashed rgba(120,100,160,.45);
  border-radius: 999px;
  padding: 5px 13px;
}

/* ============================================================
   ZWEISPALTER — Reel + Anleitung
   ============================================================ */
.d-cols {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}
/* Die Seitenspalte hält bis zu zwei Reels übereinander und klebt als Ganzes. */
.d-side {
  position: sticky;
  top: 16px;
}
.d-reels {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Only the phone layout swipes; see RESPONSIVE. */
.d-reel-dots { display: none; }
.d-reel {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(60,80,50,.25);
}
/* Ein echtes Embed bringt seine eigene Höhe mit, der Platzhalter nicht. */
.d-reel--placeholder {
  aspect-ratio: 9 / 16;
  background: var(--reel-bg, linear-gradient(150deg, #CDE8B8, #9CC98A));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Fredoka', sans-serif;
  color: var(--on-bg, var(--accent-text, var(--text-primary)));
}
.d-reel--placeholder { position: relative; } /* anchors the AI label */
.d-reel--placeholder img { width: 100%; height: 100%; object-fit: cover; }
.d-reel .play {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.d-reel .rlabel {
  font-size: 16px;
  background: rgba(60,60,80,.5);
  color: #fff;
  border-radius: 999px;
  padding: 2px 12px;
}
.d-reel .credit { font-size: 15px; color: var(--accent, var(--text-primary)); }
/* Laid over the preview image instead of under it, which the 9:16 box would
   cut off. Before the AI label in the markup, so the label stays on top. */
.d-reel__info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
}
.d-reel__load {
  border: 0;
  border-radius: 999px;
  padding: 6px 18px;
  background: rgba(255,255,255,.92);
  color: var(--text-primary);
  font: 500 16px 'Fredoka', sans-serif;
  cursor: pointer;
}
.d-reel__load:hover { background: #fff; }
/* The lasting answer is offered, never pushed: smaller than the one-off, on
   the notice's dark ground so it reads on any preview image. */
.d-reel__always {
  border: 0;
  border-radius: 999px;
  padding: 3px 12px;
  background: rgba(40,40,60,.62);
  color: #fff;
  font: 500 14px 'Fredoka', sans-serif;
  text-decoration: underline;
  cursor: pointer;
}
.d-reel__always:focus-visible { outline: 3px solid var(--accent, var(--text-primary)); outline-offset: 2px; }
.d-reel__load:focus-visible { outline: 3px solid var(--accent, var(--text-primary)); outline-offset: 2px; }
/* Its own dark ground, so the notice stays readable on the gradient and on
   any preview image alike. */
.d-reel__notice {
  margin: 0;
  max-width: 30ch;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(40,40,60,.62);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.d-reel__notice a { color: inherit; text-decoration: underline; }
/* Until Instagram reports its height (js/reels.js), the frame keeps the
   placeholder's 9:16, so the column does not jump twice. */
.d-reel__frame {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  background: #fff;
}

/* Die Typografie des gerenderten Inhalts steckt in .rich-text (choood.css),
   .d-body ist nur noch die Spalte. */
.d-body { min-width: 0; }

.more-head {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  color: var(--on-bg, var(--text-primary));
  margin: 44px 0 4px;
}
.d-wrap .feed { padding: 8px 0 0; }

/* ============================================================
   TIPP-BOXEN
   Zwei eigene Blöcke im Editor, gerendert vom StrapiCardRenderer.
   Mottoübergreifend identisch — das ist das Wiedererkennungssystem.
   Die Farben stehen gespiegelt in der Editor-Vorschau:
   cms/src/admin/extensions/tips/TipElement.tsx
   ============================================================ */
.tip { border-radius: 14px; padding: 14px 16px; margin: 16px 0; font-size: 16.5px; line-height: 1.55; color: #3A3A44; }
.tip b { display: block; font-family: 'Caveat', cursive; font-size: 24px; margin-bottom: 2px; }
.tip-creator { background: #FFF3CE; border: 1.5px solid #DDA93C; }
.tip-creator b { color: #9A7317; }
.tip-choood { background: #EBE2F6; border: 1.5px solid #8F6BC0; }
.tip-choood b { color: #6B3F9E; }

/* ============================================================
   PRODUKTE — Karussell-Karten und die noch nicht gerenderte
   Material-Checkliste (.mat-*), deren Werte aus dem
   Mockup stammen.
   ============================================================ */
.mat-list { list-style: none; padding: 0; margin: 0 0 6px; }
.mat-list > li { border-bottom: 1px dashed rgba(120,100,160,.35); }
.mat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px; cursor: pointer; }
.mat-row:hover { background: rgba(255,255,255,.4); }
.mat-name { display: flex; align-items: center; gap: 9px; }
.mat-name::before { content: '\2713'; color: #5CA865; font-weight: 700; }
.mat-shop {
  font-size: 15px;
  color: var(--text-primary);
  background: rgba(255,255,255,.8);
  border: 1.5px solid var(--o-lila);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.mat-shop .arr { transition: transform .2s; display: inline-block; }
li.open .mat-shop .arr { transform: rotate(180deg); }
.prod-row { display: flex; gap: 10px; padding: 2px 4px 14px; overflow-x: auto; }
/* Die Material-Checkliste klappt ihre Empfehlungen weiterhin auf. */
.mat-list .prod-row { display: none; }
.mat-list li.open .prod-row { display: flex; }
.prod {
  flex: 0 0 128px;
  background: #FFFDF8;
  border: 1px solid rgba(120,100,160,.25);
  border-radius: 12px;
  padding: 8px;
  text-decoration: none;
  color: #3A3A44;
}
.prod { transition: transform .15s, box-shadow .15s; }
.prod:hover, .prod:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(120,100,160,.2); }
.prod-img {
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(150deg, #F2EFE8, #E2DCD2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: #8A8A96;
  margin-bottom: 6px;
}
.prod-name { font-size: 14px; line-height: 1.25; }
.prod-price { font-size: 14px; font-weight: 700; margin-top: 3px; color: var(--text-primary); }
img.prod-img { object-fit: cover; width: 100%; }
/* A labelled product photo: the wrapper takes the gap below, so the label sits
   on the photo. The label is smaller here, the tile is only 128px wide. */
.prod .ai-media { display: block; margin-bottom: 6px; }
.prod .ai-media > img.prod-img { margin-bottom: 0; }
.prod .ai-badge { left: 5px; bottom: 5px; padding: 1px 6px; font-size: 10px; }
.prod-note { font-size: 13px; line-height: 1.3; color: var(--text-secondary); margin-top: 4px; }
.aff-note { font-size: 14px; color: var(--text-secondary); margin: 2px 0 10px; }

/* ============================================================
   "CHOOODs LIEBLINGE FÜR DIESE IDEE"
   Scrapbook-Look: gestrichelte Umrandung + Washi-Tape. Die Farben
   kommen ausschließlich aus den Motto-Variablen, damit die Sektion
   nie wie ein Fremdkörper-Werbeblock wirkt.
   ============================================================ */
.lieblinge {
  position: relative;
  margin: 34px 0 10px;
  padding: 26px 20px 12px;
  border: 2px dashed var(--accent, var(--o-lila));
  border-radius: 16px;
  background: rgba(255, 255, 255, .85);
  color: var(--text-primary);
}

/* Washi-Tape über der oberen Kante */
.lieblinge-tape {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 132px; height: 22px;
  background: var(--accent, var(--o-lila));
  opacity: .55;
  border-radius: 2px;
}

.lieblinge-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lieblinge-cloud { width: 38px; flex: 0 0 38px; color: var(--accent, var(--o-lila)); }
.lieblinge-title { margin: 0; font-size: 22px; color: var(--accent-text, var(--text-primary)); }
.lieblinge-sub { margin: 2px 0 0; font-size: 15px; color: var(--text-secondary); }

.pgroup { margin-bottom: 6px; }
.pgroup-title { display: flex; align-items: center; gap: 9px; margin: 0 0 2px; font-size: 17px; color: var(--text-primary); }
.pgroup-title::before {
  content: '';
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--dot, var(--o-lila));
  flex: 0 0 11px;
}
.pgroup-intro { margin: 0 0 8px; font-size: 15px; color: var(--text-secondary); }

@media (max-width: 500px) {
  .lieblinge { padding: 24px 12px 10px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 820px) {
  .d-cols { grid-template-columns: 1fr; }
  /* The dots row: 8px gap above 28px buttons, and a little room below for
     a longer fade. The strip's bottom padding is the same height, so its
     fade lies exactly behind the dots. */
  .d-side { position: static; --dots-height: 42px; }

  /* The reels swipe sideways instead of stacking above the instructions, on
     a strip that runs to the screen edges: a reel cut off there reads as
     "swipe for more", one cut off at the page padding as a layout bug. The
     padding puts the first reel back in line with the text, and keeps the
     shadow from being clipped. `start`, because a loaded reel takes
     Instagram's height and would stretch a placeholder next to it. */
  .d-reels {
    flex-direction: row;
    align-items: start;
    gap: 12px;
    overflow-x: auto;
    /* js/reel-carousel.js sets the height to the reel in view; the taller
       reel to the side is cut off, not scrolled to. */
    overflow-y: hidden;
    /* No rubber band at the ends: Safari's snapping cuts the bounce short
       and jumps back, with or without the script. */
    overscroll-behavior-x: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--wrap-pad);
    scrollbar-width: none;
    padding: 4px var(--wrap-pad) var(--dots-height);
    margin: -4px calc(-1 * var(--wrap-pad)) calc(-1 * var(--dots-height));
    /* Fades out the bottom of the taller reel, which the height above cuts
       off, below where the reel in view ends. The stops sample ease-in-out,
       cubic-bezier(.42, 0, .58, 1), at tenths: a linear fade starts and
       stops abruptly and shows as a line at both ends. */
    --reel-fade: linear-gradient(to bottom,
      rgb(0 0 0 / 1) calc(100% - var(--dots-height)),
      rgb(0 0 0 / .980) calc(100% - var(--dots-height) * .9),
      rgb(0 0 0 / .918) calc(100% - var(--dots-height) * .8),
      rgb(0 0 0 / .813) calc(100% - var(--dots-height) * .7),
      rgb(0 0 0 / .668) calc(100% - var(--dots-height) * .6),
      rgb(0 0 0 / .5) calc(100% - var(--dots-height) * .5),
      rgb(0 0 0 / .332) calc(100% - var(--dots-height) * .4),
      rgb(0 0 0 / .187) calc(100% - var(--dots-height) * .3),
      rgb(0 0 0 / .082) calc(100% - var(--dots-height) * .2),
      rgb(0 0 0 / .020) calc(100% - var(--dots-height) * .1),
      rgb(0 0 0 / 0) 100%);
    -webkit-mask-image: var(--reel-fade);
    mask-image: var(--reel-fade);
  }
  .d-reels::-webkit-scrollbar { display: none; }
  .d-reels > .d-reel {
    flex: 0 0 min(100%, 400px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Narrow enough that the next reel shows at the edge. */
  .d-reels > .d-reel:not(:only-child) { flex-basis: min(85vw, 400px); }
  /* Centre the reels when they all fit, as on a tablet. Auto margins only
     take free space, so once the reels overflow they are zero and the strip
     scrolls from the first reel. */
  .d-reels > .d-reel:first-child { margin-left: auto; }
  .d-reels > .d-reel:last-child { margin-right: auto; }

  /* Positioned, because the mask makes the strip a stacking context that
     would otherwise paint over the dots and take their taps. */
  .d-reel-dots {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 4px;
    height: var(--dots-height);
    padding-top: 8px;
  }
  /* The dot is drawn small inside a button big enough to hit with a thumb. */
  .d-reel-dots button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .d-reel-dots button::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    border-radius: 50%;
    background: var(--on-bg, var(--text-primary));
    opacity: .3;
    transition: opacity .2s, transform .2s;
  }
  .d-reel-dots button[aria-current="true"]::before { opacity: 1; transform: scale(1.2); }
  .d-reel-dots button:focus-visible { outline: 3px solid var(--accent, var(--text-primary)); outline-offset: -2px; border-radius: 50%; }
}

@media (max-width: 500px) {
  .d-wrap { --wrap-pad: 16px; padding-bottom: 40px; }
}