/* ==========================================================
   DIE KRAFT DER MUSIK – MOBILE V2
   KOMPAKTE PORTRAIT-VERSION (SHOP-/AMAZON-ÄHNLICHE DICHTE)
   ========================================================== */

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, video, iframe, canvas, svg, audio {
  max-width: 100% !important;
}

img, video {
  height: auto !important;
}

audio {
  width: 100% !important;
}

input, textarea, select, button {
  font-size: 16px;
  max-width: 100%;
  box-sizing: border-box;
}

.gold-main,
.wrap,
.page,
.section,
.panel,
.card,
.preview-card,
.video-card,
article,
section {
  min-width: 0 !important;
}

/* ---------- MOBILE NAV ---------- */
@media (max-width: 900px) {
  .gold-topbar {
    position: sticky !important;
    top: 0;
    z-index: 5000;
    background: #0b0704 !important;
  }

  .gold-nav-wrap {
    height: 52px !important;
    min-height: 52px !important;
    padding: 4px 7px !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .gold-logo {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 4px !important;
  }

  .gold-logo span {
    font-size: 23px !important;
    line-height: 1 !important;
  }

  .gold-logo b {
    font-size: 11px !important;
    letter-spacing: .01em !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 118px !important;
  }

  .language-picker {
    order: 0 !important;
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .language-picker label {
    display: none !important;
  }

  .language-picker select {
    width: 82px !important;
    max-width: 82px !important;
    height: 34px !important;
    padding: 3px 4px !important;
    font-size: 10px !important;
    border-radius: 5px !important;
  }

  .gold-hamb {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 21px !important;
    border-radius: 6px !important;
    z-index: 5002;
  }

  .gold-nav {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 52px !important;
    bottom: 0 !important;
    z-index: 5001 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 5px 7px 24px !important;
    background: rgba(10,6,3,.995) !important;
    border-top: 1px solid #5f3c18 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  body.open .gold-nav {
    display: flex !important;
  }

  body.open {
    overflow: hidden !important;
  }

  .gold-nav a {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    border-radius: 4px !important;
    border-bottom: 1px solid rgba(220,168,81,.11) !important;
  }

  .gold-nav a.active {
    background: rgba(220,168,81,.10) !important;
  }

  .music-marquee {
    display: none !important; /* spart im Hochformat wertvollen Platz */
  }

  .language-home-note {
    font-size: 10px !important;
    line-height: 1.25 !important;
    padding: 4px 7px !important;
  }

  /* ---------- GLOBALE SCHRIFTGRÖSSEN ---------- */
  h1 {
    font-size: clamp(25px, 7.5vw, 36px) !important;
    line-height: 1.08 !important;
  }

  h2 {
    font-size: clamp(21px, 6vw, 29px) !important;
    line-height: 1.12 !important;
  }

  h3 {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  p, li, label {
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  .script-title {
    font-size: clamp(38px, 12vw, 54px) !important;
    line-height: .95 !important;
  }

  .script-heading {
    font-size: clamp(27px, 8.5vw, 39px) !important;
    line-height: 1 !important;
  }

  .eyebrow,
  .member-kicker,
  .games-kicker,
  .partner-kicker,
  .info-kicker {
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }

  /* ---------- ABSTÄNDE ---------- */
  .page,
  .section {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  .wrap {
    width: calc(100% - 18px) !important;
    max-width: none !important;
    margin-left: 9px !important;
    margin-right: 9px !important;
  }

  .panel,
  .card,
  .preview-card,
  .video-card,
  .member-content-card,
  .game-card,
  .partner-card,
  .news-card,
  .join-card {
    border-radius: 7px !important;
  }

  /* ---------- HERO STARTSEITE ---------- */
  .gold-hero {
    min-height: 290px !important;
    max-height: 330px !important;
    background-position: 60% center !important;
  }

  .gold-hero-overlay {
    background: linear-gradient(90deg, rgba(8,5,2,.88), rgba(8,5,2,.55) 68%, rgba(8,5,2,.3)) !important;
  }

  .gold-hero-copy {
    width: 100% !important;
    max-width: 73% !important;
    padding: 30px 11px 18px !important;
  }

  .gold-hero-copy p {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 6px 0 !important;
    max-width: 100% !important;
  }

  .gold-signature {
    font-size: 28px !important;
    margin-top: 10px !important;
  }

  /* ---------- STARTSEITEN-KACHELN ---------- */
  .quick-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  .quick-card {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .quick-card img,
  .quick-card .icon-art {
    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    object-fit: cover !important;
  }

  .quick-card div:last-child {
    padding: 7px !important;
  }

  .quick-card h3 {
    font-size: 13px !important;
    margin: 1px 0 4px !important;
    text-align: left !important;
  }

  .quick-card p {
    font-size: 10px !important;
    line-height: 1.25 !important;
    margin: 0 0 5px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .quick-card span {
    font-size: 9px !important;
    padding: 4px 6px !important;
  }

  /* ---------- EINSPALTIGE LAYOUTS ---------- */
  .gold-story,
  .inspire-banner,
  .inner-hero,
  .home-hero,
  .story-hero,
  .history-teaser,
  .wish-hero,
  .wish-builder,
  .tb-hero-gold,
  .tb-grid-gold,
  .member-premium-hero,
  .member-login-area,
  .member-welcome-hero,
  .member-dashboard-hero,
  .member-download-hero,
  .admin-private-hero,
  .admin-dashboard-hero,
  .partner-hero,
  .partner-form-wrap,
  .games-hero,
  .info-hero,
  .weekly-inner,
  .free-section {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ---------- 2-SPALTIG WO ES SINNVOLL IST ---------- */
  .meaning-grid,
  .idea-grid,
  .process-grid,
  .portal-grid,
  .wish-steps,
  .member-free,
  .member-premium-grid,
  .member-content-grid,
  .member-downloads-grid,
  .partner-packages,
  .partner-grid,
  .steps,
  .news-grid,
  .join-grid,
  .game-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* ---------- BILDER FLACHER ---------- */
  .music-collage img {
    height: 90px !important;
    object-fit: cover !important;
  }

  .inspire-banner img {
    height: 135px !important;
    object-fit: cover !important;
  }

  .inner-hero img,
  .story-image-row img {
    max-height: 220px !important;
    object-fit: cover !important;
  }

  /* ---------- SHOP & HÖRPROBEN ---------- */
  .preview-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .preview-card {
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .preview-cover,
  .preview-placeholder {
    width: 100% !important;
    height: 135px !important;
    object-fit: cover !important;
  }

  .preview-content {
    padding: 8px !important;
  }

  .preview-number {
    font-size: 9px !important;
  }

  .preview-content h2 {
    font-size: 14px !important;
    margin: 4px 0 7px !important;
    min-height: 32px;
  }

  .preview-content audio {
    height: 34px !important;
  }

  .song-rating {
    padding: 7px 5px !important;
    margin-top: 7px !important;
  }

  .rating-title {
    font-size: 10px !important;
  }

  .star-button {
    font-size: 21px !important;
  }

  .rating-result,
  .rating-message {
    font-size: 9px !important;
  }

  /* ---------- VIDEO ---------- */
  .video-grid,
  .videos-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .video-card {
    padding: 8px !important;
  }

  /* ---------- FORMULARE ---------- */
  input,
  textarea,
  select {
    width: 100% !important;
    padding: 9px !important;
  }

  textarea {
    min-height: 90px !important;
  }

  .gold-button,
  .button,
  .btn,
  .download-button,
  .buy-button {
    padding: 9px 11px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    white-space: normal !important;
  }

  /* ---------- MITGLIEDER / PARTNER / INFO / SPIELE ---------- */
  .member-welcome-hero,
  .member-dashboard-hero,
  .member-download-hero,
  .partner-hero,
  .games-hero,
  .info-hero {
    min-height: 0 !important;
    padding: 24px 12px !important;
  }

  .member-gift-orbit,
  .partner-symbol,
  .hero-icons,
  .info-note {
    display: none !important;
  }

  .member-content-card,
  .partner-packages article,
  .partner-form-card,
  .partner-side,
  .game-card,
  .game-panel,
  .news-card,
  .join-card {
    padding: 12px !important;
  }

  .member-card-image {
    height: 72px !important;
    font-size: 34px !important;
  }

  .game-icon {
    font-size: 30px !important;
  }

  .game-card h3 {
    font-size: 14px !important;
  }

  .game-card p {
    font-size: 10px !important;
  }

  .game-panel {
    padding: 10px !important;
  }

  .memory-board {
    max-width: 100% !important;
    gap: 5px !important;
  }

  .memory-card {
    font-size: 25px !important;
  }

  .beat-light {
    width: 92px !important;
    height: 92px !important;
    font-size: 38px !important;
  }

  .tap-button {
    width: 150px !important;
    height: 64px !important;
    font-size: 20px !important;
  }

  .note {
    height: 72px !important;
    font-size: 18px !important;
  }

  /* ---------- FOOTER ---------- */
  .gold-footer {
    padding: 14px 8px !important;
  }

  .gold-footer-inner {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
    font-size: 10px !important;
  }

  .footer-meta {
    font-size: 10px !important;
  }

  a, p, h1, h2, h3, h4, span, strong, code {
    overflow-wrap: anywhere;
  }
}

/* ---------- SCHMALE HANDYS ---------- */
@media (max-width: 430px) {
  .gold-nav-wrap {
    height: 49px !important;
    min-height: 49px !important;
  }

  .gold-nav {
    top: 49px !important;
  }

  .gold-logo span {
    font-size: 21px !important;
  }

  .gold-logo b {
    max-width: 96px !important;
    font-size: 10px !important;
  }

  .language-picker select {
    width: 70px !important;
    max-width: 70px !important;
    height: 32px !important;
    font-size: 9px !important;
  }

  .gold-hamb {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
  }

  .gold-hero {
    min-height: 260px !important;
    max-height: 285px !important;
  }

  .gold-hero-copy {
    max-width: 80% !important;
    padding-top: 24px !important;
  }

  .script-title {
    font-size: 36px !important;
  }

  .quick-card img,
  .quick-card .icon-art {
    height: 76px !important;
    min-height: 76px !important;
  }

  .preview-cover,
  .preview-placeholder {
    height: 116px !important;
  }
}

/* ---------- SEHR SCHMALE HANDYS ---------- */
@media (max-width: 360px) {
  .quick-links,
  .preview-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .quick-card {
    display: grid !important;
    grid-template-columns: 90px minmax(0,1fr) !important;
  }

  .quick-card img,
  .quick-card .icon-art {
    width: 90px !important;
    height: 100% !important;
  }

  .preview-cover,
  .preview-placeholder {
    height: 170px !important;
  }
}

/* ---------- QUERFORMAT ---------- */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  .gold-nav-wrap {
    height: 48px !important;
    min-height: 48px !important;
  }

  .gold-nav {
    top: 48px !important;
  }

  .gold-hero {
    min-height: 240px !important;
    max-height: 260px !important;
  }

  .gold-hero-copy {
    padding-top: 22px !important;
  }

  .quick-links {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }
}


/* ==========================================================
   MOBILE V3 – VEREINFACHTE NAVIGATION
   Oben nur Logo + Menüknopf. Sprache sitzt im Menü.
   ========================================================== */
@media (max-width: 900px) {

  .gold-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #0b0704 !important;
  }

  .gold-nav-wrap {
    height: 50px !important;
    min-height: 50px !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .gold-logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .gold-logo span {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .gold-logo b {
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 160px !important;
  }

  .gold-hamb {
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    z-index: 10002 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 7px !important;
    font-size: 22px !important;
    cursor: pointer !important;
  }

  /* Menü ist komplett aus dem Layout draußen */
  .gold-nav {
    display: none !important;
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - 50px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 10001 !important;
    background: #0b0704 !important;
    padding: 8px 10px 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  body.mobile-nav-open .gold-nav {
    display: flex !important;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
  }

  .gold-nav a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    border-radius: 5px !important;
    border-bottom: 1px solid rgba(220,168,81,.12) !important;
  }

  .gold-nav a.active {
    background: rgba(220,168,81,.12) !important;
    color: #f3c36d !important;
  }

  /* Sprache gehört jetzt in das Menü */
  .gold-nav .language-picker {
    order: -1 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 8px !important;
    background: #130c07 !important;
    border: 1px solid #5d3b18 !important;
    border-radius: 6px !important;
  }

  .gold-nav .language-picker label {
    display: block !important;
    color: #d8c19a !important;
    font-size: 10px !important;
    margin-bottom: 5px !important;
  }

  .gold-nav .language-picker select {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 38px !important;
    font-size: 12px !important;
    padding: 5px 7px !important;
  }

  /* Falls irgendwo noch eine Sprache außerhalb des Menüs gerendert wird */
  .gold-nav-wrap > .language-picker {
    display: none !important;
  }

  .music-marquee {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .gold-nav-wrap {
    height: 48px !important;
    min-height: 48px !important;
  }

  .gold-nav {
    top: 48px !important;
    height: calc(100vh - 48px) !important;
  }

  .gold-logo span {
    font-size: 20px !important;
  }

  .gold-logo b {
    font-size: 10px !important;
    max-width: 135px !important;
  }

  .gold-hamb {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}


/* ==========================================================
   MOBILE V4 – SCROLLBARES MENÜ UNTEREINANDER
   ========================================================== */
@media (max-width: 900px) {

  /* Kopf bleibt klein */
  .gold-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #0b0704 !important;
  }

  .gold-nav-wrap {
    height: 50px !important;
    min-height: 50px !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  /* WICHTIG: Body NICHT sperren */
  body.mobile-nav-open {
    overflow: auto !important;
    position: static !important;
  }

  /* Menü direkt unter der Kopfzeile */
  .gold-nav {
    display: none !important;
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    max-height: calc(100vh - 58px) !important;
    height: auto !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;

    z-index: 10001 !important;
    background: #0b0704 !important;
    border-top: 1px solid #624019 !important;
    border-bottom: 1px solid #624019 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.55) !important;

    padding: 6px 8px 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;

    touch-action: pan-y !important;
  }

  body.mobile-nav-open .gold-nav {
    display: flex !important;
  }

  /* Sprache oben im Menü */
  .gold-nav .language-picker {
    order: -1 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 5px 0 !important;
    padding: 7px !important;
    background: #130c07 !important;
    border: 1px solid #5f3c18 !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
  }

  .gold-nav .language-picker label {
    display: block !important;
    font-size: 10px !important;
    margin: 0 0 4px !important;
    color: #cdb892 !important;
  }

  .gold-nav .language-picker select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 36px !important;
    padding: 4px 7px !important;
    font-size: 12px !important;
  }

  /* Jeder Menüpunkt EINE ZEILE untereinander */
  .gold-nav a {
    display: block !important;
    position: relative !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 10px 11px !important;

    font-size: 12px !important;
    line-height: 1.15 !important;
    text-align: left !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    border-radius: 4px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(220,168,81,.12) !important;
  }

  .gold-nav a:last-of-type {
    border-bottom: 0 !important;
  }

  .gold-nav a.active {
    background: rgba(220,168,81,.12) !important;
    color: #f2c16e !important;
  }

  /* Menüknopf */
  .gold-hamb {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 22px !important;
    cursor: pointer !important;
    z-index: 10002 !important;
  }

  /* Sprache außerhalb Menü ausblenden */
  .gold-nav-wrap > .language-picker {
    display: none !important;
  }

  .music-marquee {
    display: none !important;
  }
}

/* kleinere Handys */
@media (max-width: 430px) {
  .gold-nav-wrap {
    height: 48px !important;
    min-height: 48px !important;
  }

  .gold-nav {
    top: 48px !important;
    max-height: calc(100vh - 52px) !important;
  }

  .gold-nav a {
    padding: 9px 10px !important;
    font-size: 11px !important;
  }

  .gold-hamb {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}

/* Querformat ebenfalls scrollbar */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  .gold-nav {
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
  }

  .gold-nav a {
    padding: 8px 10px !important;
  }
}