/* MuPiBox 2.5.0 secondary pages + Classic handbook */

body.mupibox-site .mupi-secondary-hero,
body.mupibox-site .mupibox-page--faq .mupi-doc-header,
body.mupibox-site .mupibox-page--ueber-uns .mupi-doc-header,
body.mupibox-site .mupibox-page--classic-docs .mupi-doc-header,
body.mupibox-site .mupibox-page--classic-installation .mupi-doc-header,
body.mupibox-site .mupibox-page--classic-administration .mupi-doc-header,
body.mupibox-site .mupibox-page--classic-media .mupi-doc-header,
body.mupibox-site .mupibox-page--classic-spotify .mupi-doc-header {
  padding-block: clamp(2.8rem,5vw,4.8rem);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 86% 18%,rgba(83,191,243,.06),transparent 28rem),
    radial-gradient(circle at 72% 88%,rgba(255,111,174,.045),transparent 24rem),
    linear-gradient(180deg,#101522 0%,#090d16 100%);
}

body.mupibox-site .mupi-secondary-hero h1,
body.mupibox-site .mupibox-page--faq .mupi-doc-header h1,
body.mupibox-site .mupibox-page--ueber-uns .mupi-doc-header h1,
body.mupibox-site .mupibox-page--classic-docs .mupi-doc-header h1,
body.mupibox-site .mupibox-page--classic-installation .mupi-doc-header h1,
body.mupibox-site .mupibox-page--classic-administration .mupi-doc-header h1,
body.mupibox-site .mupibox-page--classic-media .mupi-doc-header h1,
body.mupibox-site .mupibox-page--classic-spotify .mupi-doc-header h1 {
  max-width: 14ch;
  margin-top: .55rem;
  color: #fffafd;
  font-family: 'MuPi Space Grotesk','MuPi Manrope',ui-sans-serif,system-ui,sans-serif;
  font-size: clamp(2.8rem,5.5vw,5rem);
  line-height: .96;
  letter-spacing: -.048em;
}

/* FAQ */
body.mupibox-site .mupi-faq-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .9rem;
}

body.mupibox-site .mupi-faq-item {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 1.35rem;
  border: 1px solid rgba(255,255,255,.11);
  border-left: 4px solid var(--faq-accent,#7ed3ff);
  border-radius: 18px;
  background: #141b27;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

body.mupibox-site .mupi-faq-item:nth-child(even) {
  background: #171e2b;
}

body.mupibox-site .mupi-faq-item--classic { --faq-accent:#7ed3ff; }
body.mupibox-site .mupi-faq-item--ng { --faq-accent:#ff8dbd; }
body.mupibox-site .mupi-faq-item--both { --faq-accent:#ffd078; }

body.mupibox-site .mupi-faq-item h2 {
  margin: .65rem 0 .55rem;
  color: #fffafd;
  font-size: clamp(1.35rem,2vw,1.8rem);
}

body.mupibox-site .mupi-faq-item p {
  color: #ccd1dc;
}

body.mupibox-site .mupi-faq-item a {
  display: inline-flex;
  margin-top: auto;
  color: #7ed3ff;
  font-weight: 800;
  text-decoration: none;
}

/* About/project story */
body.mupibox-site .mupi-project-now {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr);
  gap: 1rem;
}

body.mupibox-site .mupi-project-now__card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem,3vw,2rem);
  border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid var(--project-accent,#7ed3ff);
  border-radius: 22px;
  background: #151b28;
}

body.mupibox-site .mupi-project-now__card--ng {
  --project-accent:#ff8dbd;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,111,174,.11),transparent 20rem),
    #181a28;
}

body.mupibox-site .mupi-project-now__card--classic {
  --project-accent:#7ed3ff;
  background:
    radial-gradient(circle at 100% 0%,rgba(83,191,243,.10),transparent 20rem),
    #151c29;
}

body.mupibox-site .mupi-project-now__card h2 {
  margin: .55rem 0 .6rem;
  color: #fffafd;
}

body.mupibox-site .mupi-team-grid {
  gap: .8rem;
}

body.mupibox-site .mupi-team-card {
  position: relative;
  min-height: 235px;
  padding: 1.2rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 17px;
  background: #131a26;
}

body.mupibox-site .mupi-team-card:nth-child(even) {
  background: #161d2b;
}

body.mupibox-site .mupi-team-card h3 {
  margin: .45rem 0 .2rem;
  color: #fffafd;
}

body.mupibox-site .mupi-team-card__role {
  display: block;
  margin-bottom: .65rem;
  color: #9cddff;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Donation */
body.mupibox-site .mupi-donate-hero {
  padding-block: clamp(3.2rem,6vw,5.6rem);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 82% 30%,rgba(255,193,89,.12),transparent 28rem),
    radial-gradient(circle at 68% 72%,rgba(255,111,174,.09),transparent 25rem),
    linear-gradient(180deg,#111621 0%,#090d16 100%);
}

body.mupibox-site .mupi-donate-hero__inner {
  max-width: 900px;
}

body.mupibox-site .mupi-donate-hero h1 {
  max-width: 11ch;
  margin: .55rem 0 1rem;
  color: #fffafd;
  font-family: 'MuPi Space Grotesk','MuPi Manrope',ui-sans-serif,system-ui,sans-serif;
  font-size: clamp(3rem,6.2vw,5.6rem);
  line-height: .93;
  letter-spacing: -.052em;
}

body.mupibox-site .mupi-donate-hero p {
  max-width: 760px;
  color: #d3d6df;
  font-size: clamp(1.05rem,1.8vw,1.25rem);
}

body.mupibox-site .mupi-donate-grid {
  gap: .85rem;
}

body.mupibox-site .mupi-donate-use {
  min-height: 210px;
  padding: 1.2rem;
  border: 1px solid rgba(255,255,255,.11);
  border-top: 2px solid rgba(255,208,120,.45);
  border-radius: 17px;
  background: #151b25;
}

body.mupibox-site .mupi-donate-use strong {
  display: block;
  margin-bottom: .45rem;
  color: #fffafd;
  font-size: 1.12rem;
}

body.mupibox-site .mupi-funding-grid .mupi-card {
  min-height: 245px;
}

body.mupibox-site .mupi-funding-grid .mupi-card:nth-child(1) { border-top:2px solid rgba(126,211,255,.42); }
body.mupibox-site .mupi-funding-grid .mupi-card:nth-child(2) { border-top:2px solid rgba(255,141,189,.42); }
body.mupibox-site .mupi-funding-grid .mupi-card:nth-child(3) { border-top:2px solid rgba(255,208,120,.45); }

/* Showroom */
body.mupibox-site .mupi-showroom-hero {
  padding-block: clamp(3rem,6vw,5rem);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 12% 10%,rgba(255,193,89,.09),transparent 24rem),
    radial-gradient(circle at 88% 20%,rgba(83,191,243,.07),transparent 28rem),
    linear-gradient(180deg,#101522,#090d16);
}

body.mupibox-site .mupi-showroom-hero h1 {
  margin: .55rem 0 .8rem;
  color: #fffafd;
  font-family: 'MuPi Space Grotesk','MuPi Manrope',ui-sans-serif,system-ui,sans-serif;
  font-size: clamp(3rem,6vw,5.2rem);
  line-height: .95;
  letter-spacing: -.05em;
}

body.mupibox-site .mupi-section--showroom-upload {
  background: #0b1019;
}

body.mupibox-site .mupi-section--showroom-upload .mupi-container > p {
  max-width: 760px;
  margin-bottom: 1rem;
  color: #cfd3dc;
}

body.mupibox-site .mupibox-showroom-grid {
  gap: 1rem;
}

body.mupibox-site .mupibox-showroom-entry {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: #111722;
  box-shadow: 0 15px 36px rgba(0,0,0,.21);
}

body.mupibox-site .mupibox-showroom-entry__media {
  background: #090e16;
}

body.mupibox-site .mupibox-showroom-entry__main {
  position: relative;
  display: block;
  overflow: hidden;
}

body.mupibox-site .mupibox-showroom-entry__main img {
  transition: transform .22s ease;
}

body.mupibox-site .mupibox-showroom-entry:hover .mupibox-showroom-entry__main img {
  transform: scale(1.025);
}

body.mupibox-site .mupibox-showroom-entry__count {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,10,17,.72);
  color: #fffafd;
  backdrop-filter: blur(8px);
}

body.mupibox-site .mupibox-showroom-entry__body {
  padding: 1rem 1.05rem 1.15rem;
}

body.mupibox-site .mupibox-showroom-entry__body h3 {
  color: #fffafd;
}

body.mupibox-site .mupibox-showroom-entry__body p {
  color: #c9ced9;
}

body.mupibox-site .mupibox-showroom-pagination {
  margin-top: 1.5rem;
}

/* Classic handbook common */
body.mupibox-site .mupibox-page--classic-docs,
body.mupibox-site .mupibox-page--classic-installation,
body.mupibox-site .mupibox-page--classic-administration,
body.mupibox-site .mupibox-page--classic-media,
body.mupibox-site .mupibox-page--classic-spotify {
  --classic-doc-accent:#7ed3ff;
}

body.mupibox-site .mupibox-page--classic-docs .mupi-section,
body.mupibox-site .mupibox-page--classic-installation .mupi-section,
body.mupibox-site .mupibox-page--classic-administration .mupi-section,
body.mupibox-site .mupibox-page--classic-media .mupi-section,
body.mupibox-site .mupibox-page--classic-spotify .mupi-section {
  background:
    radial-gradient(circle at 92% 8%,rgba(83,191,243,.035),transparent 25rem),
    #090e17;
}

body.mupibox-site .mupibox-page--classic-docs .mupi-section--soft,
body.mupibox-site .mupibox-page--classic-installation .mupi-section--soft,
body.mupibox-site .mupibox-page--classic-administration .mupi-section--soft,
body.mupibox-site .mupibox-page--classic-media .mupi-section--soft,
body.mupibox-site .mupibox-page--classic-spotify .mupi-section--soft {
  background: #0f1521;
}

body.mupibox-site .mupibox-page--classic-docs .mupi-card,
body.mupibox-site .mupibox-page--classic-installation .mupi-card,
body.mupibox-site .mupibox-page--classic-administration .mupi-card,
body.mupibox-site .mupibox-page--classic-media .mupi-card,
body.mupibox-site .mupibox-page--classic-spotify .mupi-card {
  border-color: rgba(255,255,255,.11);
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent),
    #141b27;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

body.mupibox-site .mupibox-page--classic-docs .mupi-card--classic,
body.mupibox-site .mupibox-page--classic-installation .mupi-card--classic,
body.mupibox-site .mupibox-page--classic-administration .mupi-card--classic,
body.mupibox-site .mupibox-page--classic-media .mupi-card--classic,
body.mupibox-site .mupibox-page--classic-spotify .mupi-card--classic {
  border-top: 2px solid rgba(126,211,255,.42);
}

body.mupibox-site .mupibox-page--classic-docs .mupi-section-heading,
body.mupibox-site .mupibox-page--classic-installation .mupi-section-heading,
body.mupibox-site .mupibox-page--classic-administration .mupi-section-heading,
body.mupibox-site .mupibox-page--classic-media .mupi-section-heading,
body.mupibox-site .mupibox-page--classic-spotify .mupi-section-heading {
  margin-top: clamp(2rem,4vw,3.3rem) !important;
  padding-top: clamp(1.5rem,3vw,2.2rem);
  border-top: 1px solid rgba(255,255,255,.08);
}

body.mupibox-site .mupibox-page--classic-docs pre,
body.mupibox-site .mupibox-page--classic-installation pre,
body.mupibox-site .mupibox-page--classic-administration pre,
body.mupibox-site .mupibox-page--classic-media pre,
body.mupibox-site .mupibox-page--classic-spotify pre {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid rgba(126,211,255,.14);
  border-radius: 12px;
  background: #090d15;
  color: #dff5ff;
  font-size: .88rem;
  line-height: 1.55;
}

body.mupibox-site .mupibox-page--classic-docs code,
body.mupibox-site .mupibox-page--classic-installation code,
body.mupibox-site .mupibox-page--classic-administration code,
body.mupibox-site .mupibox-page--classic-media code,
body.mupibox-site .mupibox-page--classic-spotify code {
  color: #b9e8ff;
}

body.mupibox-site .mupi-classic-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: 2rem;
  padding: 1.2rem 1.35rem;
  border: 1px solid rgba(126,211,255,.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 20%,rgba(83,191,243,.08),transparent 16rem),
    #131a25;
}

body.mupibox-site .mupi-classic-next h3 {
  margin: 0 0 .3rem;
  color: #fffafd;
}

body.mupibox-site .mupi-classic-next p {
  margin: 0;
  color: #cbd0db;
}

@media (max-width: 921px) {
  body.mupibox-site .mupi-project-now {
    grid-template-columns: 1fr;
  }

  body.mupibox-site .mupi-faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.mupibox-site .mupi-faq-item,
  body.mupibox-site .mupi-team-card,
  body.mupibox-site .mupi-donate-use {
    min-height: 0;
  }

  body.mupibox-site .mupi-classic-next {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mupibox-site .mupibox-showroom-entry__main img {
    transition: none;
  }
}


/* Classic handbook hub */
body.mupibox-site .mupi-classic-hub-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1rem;
}

body.mupibox-site .mupi-classic-hub-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 270px;
  padding: 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-top: 3px solid var(--hub-accent,#7ed3ff);
  border-radius: 19px;
  background: #141b27;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 13px 32px rgba(0,0,0,.17);
  transition: transform .16s ease,border-color .16s ease,background .16s ease;
}

body.mupibox-site .mupi-classic-hub-card:nth-child(1) { --hub-accent:#7ed3ff; }
body.mupibox-site .mupi-classic-hub-card:nth-child(2) { --hub-accent:#ffd078; }
body.mupibox-site .mupi-classic-hub-card:nth-child(3) { --hub-accent:#ff8dbd; }

body.mupibox-site .mupi-classic-hub-card:hover,
body.mupibox-site .mupi-classic-hub-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb,var(--hub-accent) 44%,rgba(255,255,255,.11));
  background: #182130;
}

body.mupibox-site .mupi-classic-hub-card .mupi-icon {
  color: var(--hub-accent);
}

body.mupibox-site .mupi-classic-hub-card h2 {
  margin: .6rem 0 .55rem;
  color: #fffafd;
}

body.mupibox-site .mupi-classic-hub-card p {
  color: #cbd0db;
}

body.mupibox-site .mupi-classic-hub-card__more {
  margin-top: auto;
  padding-top: .8rem;
  color: #7ed3ff;
  font-weight: 800;
}

body.mupibox-site .mupi-classic-hub-card__more::after {
  content: " →";
}

/* Give Classic procedural pages a visible chapter rhythm. */
body.mupibox-site .mupibox-page--classic-installation .mupi-grid--3 > .mupi-card,
body.mupibox-site .mupibox-page--classic-administration .mupi-grid--3 > .mupi-card,
body.mupibox-site .mupibox-page--classic-media .mupi-grid--3 > .mupi-card,
body.mupibox-site .mupibox-page--classic-spotify .mupi-grid--3 > .mupi-card {
  border-top: 2px solid rgba(126,211,255,.28);
}

body.mupibox-site .mupibox-page--classic-installation .mupi-actions,
body.mupibox-site .mupibox-page--classic-administration .mupi-actions,
body.mupibox-site .mupibox-page--classic-media .mupi-actions,
body.mupibox-site .mupibox-page--classic-spotify .mupi-actions {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 921px) {
  body.mupibox-site .mupi-classic-hub-grid {
    grid-template-columns: 1fr;
  }

  body.mupibox-site .mupi-classic-hub-card {
    min-height: 0;
  }
}


/* Classic reference pages */
body.mupibox-site .mupibox-page--classic-reference .mupi-section {
  background:
    radial-gradient(circle at 92% 8%,rgba(83,191,243,.035),transparent 25rem),
    #090e17;
}

body.mupibox-site .mupi-reference-table-wrap {
  overflow-x: auto;
  margin: 1rem 0 2rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: #111722;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

body.mupibox-site .mupi-reference-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  margin: 0;
}

body.mupibox-site .mupi-reference-table th,
body.mupibox-site .mupi-reference-table td {
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-align: left;
  vertical-align: top;
}

body.mupibox-site .mupi-reference-table th {
  background: #1c2433;
  color: #fffafd;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.mupibox-site .mupi-reference-table td {
  color: #cfd3dd;
}

body.mupibox-site .mupi-reference-table tr:last-child td {
  border-bottom: 0;
}

body.mupibox-site .mupi-reference-table a {
  color: #7ed3ff;
  font-weight: 800;
}

body.mupibox-site .mupi-reference-figure {
  margin: 1.25rem 0 2rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  background: #121925;
}

body.mupibox-site .mupi-reference-figure img {
  display: block;
  width: 100%;
  max-height: 760px;
  object-fit: contain;
  border-radius: 12px;
  background: #080d14;
}

body.mupibox-site .mupi-reference-figure figcaption,
body.mupibox-site .mupi-reference-gallery figcaption {
  padding-top: .65rem;
  color: #aeb6c6;
  font-size: .82rem;
}

body.mupibox-site .mupi-reference-gallery {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .8rem;
  margin: 1.5rem 0 2rem;
}

body.mupibox-site .mupi-reference-gallery figure {
  margin: 0;
  padding: .7rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: #131a26;
}

body.mupibox-site .mupi-reference-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  border-radius: 10px;
  background: #090e16;
}

body.mupibox-site .mupi-reference-article {
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(1rem,2.4vw,1.5rem);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: #111722;
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
}

body.mupibox-site .mupi-reference-article h2 {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #fffafd;
}

body.mupibox-site .mupi-reference-article h3,
body.mupibox-site .mupi-reference-article h4,
body.mupibox-site .mupi-reference-article h5 {
  color: #eef1f7;
}

body.mupibox-site .mupi-reference-article p,
body.mupibox-site .mupi-reference-article li {
  color: #cbd0db;
}

body.mupibox-site .mupi-reference-article img {
  height: auto;
  border-radius: 12px;
}

body.mupibox-site .mupi-reference-article pre {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid rgba(126,211,255,.14);
  border-radius: 12px;
  background: #090d15;
  color: #dff5ff;
}

body.mupibox-site .mupi-reference-article a {
  color: #7ed3ff;
}

@media (max-width: 760px) {
  body.mupibox-site .mupi-reference-gallery {
    grid-template-columns: 1fr;
  }
}