/* ============================================================
   CHOOOD — Mottoseite (Hood)
   Nur was ausschließlich hier vorkommt: Motto-Schriftzug und das
   Kategorien-Register. Alles Geteilte steht in choood.css.
   ============================================================ */

/* ============================================================
   HERO — Motto-Schriftzug + Hood-Subline
   ============================================================ */
.hero { max-width: 1200px; margin: 0 auto; padding: 4px 20px 6px; text-align: center; }
.motto-hero-wrap { text-align: center; margin: 2rem 0; }
.motto-sub {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.125rem;
  margin-top: 4px;
  color: var(--accent, var(--text-secondary));
}

/* Text-Schriftzug für Mottos ohne eigenes Artwork */
.motto-lettering-text {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1;
}
.motto-lettering-name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 8vw, 58px);
  color: var(--accent, var(--text-primary));
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--accent, #6B3F9E) 35%, #FFF);
}
.motto-lettering-party {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(20px, 5vw, 30px);
  color: var(--on-bg-soft, #8B6FB5);
  display: inline-block;
  transform: rotate(-5deg);
}

/* ============================================================
   KATEGORIEN-REGISTER — Karteikarten-Reiter
   ============================================================ */
.reg-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 0;
  border-bottom: 2.5px solid rgba(110,90,140,.28);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reg-row::-webkit-scrollbar { display: none; }
.reg-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 17px;
  padding: 9px 14px;
  border-radius: 14px 14px 5px 5px;
  margin-right: 6px;
  color: #3A3A44;
  border: 2px solid;
  border-bottom: none;
  cursor: pointer;
  vertical-align: bottom;
  transition: transform .15s;
}
.reg-tab svg { width: 17px; height: 17px; }
.reg-tab.active {
  font-weight: 700;
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(60,60,80,.22);
  border-bottom: 2px solid;
}

.reg-tab { background: var(--cat-bg, #EEE5F8); border-color: var(--cat-color, var(--o-lila)); }
.reg-tab svg { color: var(--cat-color, var(--o-lila)); }
.reg-tab svg .hole { fill: var(--cat-bg, #EEE5F8); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 500px) {
  .reg-row { padding: 12px 12px 0; }
}