/* ==========================================================================
   Creator-Kueche: farbiges Band mit Hochkant-Kacheln zum Wischen.
   ========================================================================== */

.c-creator {
  position: relative;
  padding: clamp(22px, 3vw, 36px) 0 clamp(16px, 2.4vw, 26px);
  background: radial-gradient(120% 140% at 85% 0%, rgba(232, 236, 217, 0.22) 0%, rgba(232, 236, 217, 0) 55%), linear-gradient(105deg, #1C4448 0%, #24504A 30%, #3E5E3C 62%, #5A6631 85%, #6F7D3D 100%);
  overflow: hidden;
}
.c-creator__innen { max-width: var(--w-content); margin-inline: auto; }

.c-creator__titel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  margin: 0 var(--gutter) clamp(16px, 2.4vw, 26px);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(34px, 6.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(10, 30, 28, 0.3);
}
.c-creator__zeichen { font-size: 1.05em; line-height: 0.8; color: rgba(255, 255, 255, 0.55); transform: translateY(-0.04em); letter-spacing: -0.2em; margin-right: 0.08em; }

.c-creator__leiste {
  display: flex;
  gap: 14px;
  padding: 0 var(--gutter) 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.c-creator__leiste::-webkit-scrollbar { display: none; }

.c-creator__karte {
  position: relative;
  flex: 0 0 44%;
  aspect-ratio: 9 / 16;
  max-height: 520px;
  border: 0;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #22403B;
  color: #FFFFFF;
  text-align: left;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 10px 26px rgba(8, 26, 24, 0.35);
  transition: transform 0.25s ease;
  text-decoration: none;
}
@media (min-width: 48rem) { .c-creator__karte { flex-basis: 230px; } }
.c-creator__karte:hover { transform: translateY(-3px); }
.c-creator__karte:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.c-creator__karte::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%);
  pointer-events: none;
}
.c-creator__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Play-Symbol oben rechts, wie bei Reels */
.c-creator__karte:not(.c-creator__karte--mitmachen)::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #FFFFFF;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.c-creator__thema {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: 66px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.c-creator__wer { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; }
.c-creator__avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid #FFFFFF; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.c-creator__avatar--text { display: grid; place-items: center; background: #6F7D3D; font-family: var(--f-display); font-weight: 700; font-size: 15px; }
.c-creator__name { min-width: 0; font-family: var(--f-display); font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }

.c-creator__karte--mitmachen {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.c-creator__karte--mitmachen::after { display: none; }
.c-creator__mitmachen-titel { font-family: var(--f-display); font-weight: 800; font-size: 21px; line-height: 1.15; }
.c-creator__mitmachen-text { font-size: 15px; line-height: 1.4; opacity: 0.92; }

.c-creator__hinweis { margin: 14px var(--gutter) 0; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.85); text-align: center; }

/* --- Fenster mit Zwei-Klick-Loesung -------------------------------------- */
.c-creator__fenster { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(12, 28, 26, 0.72); }
.c-creator__fenster[hidden] { display: none; }
.c-creator__dialog { position: relative; width: min(100%, 560px); max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 22px 22px; border-radius: 18px; background: var(--c-surface); color: var(--c-ink); }
.c-creator__zu { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: transparent; font-size: 30px; line-height: 1; color: var(--c-ink-muted); cursor: pointer; }
.c-creator__dialog-titel { margin: 0 0 10px; font-family: var(--f-display); font-weight: 700; font-size: 22px; }
.c-creator__zustimmung p { margin: 0 0 12px; line-height: 1.55; color: var(--c-ink-soft); }
.c-creator__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px !important; }
.c-creator__laden { min-height: 46px; padding: 0 22px; border: 0; border-radius: 23px; background: var(--c-accent-deep); color: #FFFFFF; font: inherit; font-weight: 700; cursor: pointer; }
.c-creator__extern { font-weight: 600; color: var(--c-accent-deep); }
.c-creator__einbettung:empty { display: none; }
.c-creator__einbettung { display: flex; justify-content: center; }
.c-creator__einbettung iframe, .c-creator__einbettung blockquote { max-width: 100% !important; }

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

.c-creator__titel-link, .c-creator__titel-link:hover { display: inline-flex; align-items: center; gap: 0.12em; color: inherit !important; text-decoration: none !important; }
.c-creator__titel-link:hover .c-creator__zeichen { color: #FFFFFF; }