/*
Theme Name: Schuppen Records
Theme URI: https://www.schuppenrecords.de
Author: Schuppen Records
Description: Eigenständiges Charcoal-&-Ember-Theme mit bearbeitbarer Musik-Landingpage und Spotify-Player nach Zustimmung.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: schuppen-records
*/
:root { --font-sans: 'Barlow', sans-serif; --font-display: 'Bebas Neue', sans-serif; }
:root {
  --background: oklch(0.218 0 0);
  --foreground: oklch(0.956 0.004 90);
  --card: oklch(0.235 0 0);
  --secondary: oklch(0.297 0 0);
  --primary: oklch(0.652 0.191 34);
  --primary-foreground: oklch(0.988 0 0);
  --muted-foreground: oklch(0.7 0 0);
  --border: oklch(0.409 0 0);
  --hero-shade: oklch(0.13 0 0 / 0.64);
  --hero-floor: oklch(0.15 0 0 / 0.42);
  --shadow-overlay: oklch(0.1 0 0 / 0.55);
}

  * { border-color: var(--border); letter-spacing: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 32px; }
  body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
  a { text-decoration: none; }
  button, a { -webkit-tap-highlight-color: transparent; }
  ::selection { background: var(--primary); color: var(--primary-foreground); }
.page-width { width: min(100% - 112px, 1320px); margin-inline: auto; }
.site-header { height: 98px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 49px; width: 49px; object-fit: contain; }
.brand-name { font-family: var(--font-display); font-size: 25px; line-height: 1; }
.brand-name span { color: var(--primary); }
.brand-subtitle { margin-top: 5px; color: var(--muted-foreground); font-size: 10px; text-transform: uppercase; }
.header-nav { display: flex; gap: 27px; align-items: center; }
.nav-button { font-size: 13px; font-weight: 600; padding: 0; }
.header-nav .brand-button { min-height: 40px; font-size: 11px; padding-inline: 19px; }
.brand-button { border-radius: 2px; min-height: 50px; padding-inline: 27px; font-size: 13px; font-weight: 600; }
.hero { position: relative; min-height: 610px; height: min(690px, calc(100svh - 185px)); isolation: isolate; overflow: hidden; }
.hero-photo { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; z-index: -3; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hero-shade), transparent 82%), linear-gradient(0deg, var(--hero-floor), transparent 60%); z-index: -2; }
.hero-content { padding-top: 79px; padding-bottom: 95px; }
.eyebrow { display: flex; align-items: center; gap: 11px; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.signal-dot { height: 6px; width: 6px; background: var(--primary); border-radius: 50%; }
.hero h1 { font-family: var(--font-display); font-size: 138px; font-weight: 400; line-height: .88; margin: 27px 0 24px; }
.hero h1 span { display: block; color: var(--primary); }
.hero-description { margin: 0; font-size: 18px; line-height: 1.6; color: var(--foreground); }
.hero-actions { display: flex; gap: 14px; margin-top: 29px; }
.hero-bottom { position: absolute; bottom: 29px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; }
.hero-note { font-size: 10px; text-transform: uppercase; color: var(--muted-foreground); }
.scroll-link { display: flex; gap: 14px; align-items: center; font-size: 10px; text-transform: uppercase; }
.sound-strip { display: flex; justify-content: center; align-items: center; gap: 43px; min-height: 65px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 19px; }
.sound-strip i { color: var(--primary); font-style: normal; font-size: 16px; }
.music-section { padding-top: 70px; padding-bottom: 64px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 31px; }
.section-kicker { font-size: 10px; color: var(--primary); text-transform: uppercase; font-weight: 600; }
h2 { font-family: var(--font-display); font-size: 54px; line-height: 1; font-weight: 400; margin: 13px 0 0; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; }
.releases-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.release-art { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--secondary); }
.release-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.release:hover .release-art img { transform: scale(1.035); }
.release-tag { position: absolute; left: 13px; top: 13px; background: var(--background); padding: 5px 9px; font-size: 9px; text-transform: uppercase; }
.play-button { border-radius: 50%; height: 46px; width: 46px; padding: 0; }
.release-play { position: absolute; bottom: 15px; right: 15px; box-shadow: 0 3px 15px var(--shadow-overlay); }
.release-info { display: flex; justify-content: space-between; align-items: center; margin-top: 17px; gap: 12px; }
.release-title { font-family: var(--font-display); font-size: 26px; margin: 0; line-height: 1.1; }
.release-artist { color: var(--muted-foreground); font-size: 12px; margin: 8px 0 0; }
.release-length { color: var(--muted-foreground); font-size: 11px; }
.listen-section { border-top: 1px solid var(--border); padding-block: 58px; display: grid; grid-template-columns: 1fr 1.35fr; gap: 65px; align-items: center; }
.listen-copy p { font-size: 15px; color: var(--muted-foreground); line-height: 1.7; max-width: 340px; margin-block: 20px 25px; }
.track-list { width: 100%; }
.track-row { padding: 18px 0; display: grid; grid-template-columns: 30px 1fr 42px 25px; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); }
.track-row:hover { color: var(--primary); }
.track-number { font-size: 11px; color: var(--muted-foreground); }
.track-title { font-size: 14px; font-weight: 600; }
.track-time { font-size: 11px; color: var(--muted-foreground); }
.spotify-panel { margin-top: 25px; }
.spotify-panel iframe { border: 0; width: 100%; height: 352px; border-radius: 6px; }
.privacy-note { font-size: 11px; line-height: 1.5; color: var(--muted-foreground); margin-top: 12px; }
.closing-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-block: 49px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.closing-band h2 { font-size: 49px; margin-top: 0; }
.closing-band h2 span { color: var(--primary); }
.site-footer { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 11px; color: var(--muted-foreground); }
.footer-brand { font-family: var(--font-display); font-size: 20px; color: var(--foreground); }
.footer-links { display: flex; gap: 25px; }
@media (min-width: 1600px) { .hero-content { padding-top: 100px; } }
@media (max-width: 900px) {
  .page-width { width: calc(100% - 56px); }
  .header-nav { gap: 18px; }
  .hero h1 { font-size: 115px; }
  .releases-grid { gap: 18px; }
  .release-title { font-size: 23px; }
  .listen-section { gap: 35px; }
}
@media (max-width: 600px) {
  .page-width { width: calc(100% - 40px); }
  .site-header { height: 78px; }
  .brand-logo { width: 38px; height: 38px; }
  .wordmark { gap: 8px; }
  .brand-name { font-size: 21px; }
  .brand-subtitle { font-size: 8px; }
  .header-nav { gap: 0; }
  .header-nav .nav-button { display: none; }
  .header-nav .brand-button { min-height: 35px; padding-inline: 12px; font-size: 10px; }
  .header-nav .brand-button svg { width: 13px; }
  .hero { height: 610px; min-height: 0; max-height: calc(100svh - 162px); }
  .hero-photo { object-position: 65% center; }
  .hero-content { padding-top: 72px; padding-bottom: 75px; }
  .hero h1 { font-size: 87px; margin-top: 29px; margin-bottom: 27px; }
  .eyebrow { font-size: 10px; }
  .hero-description { font-size: 16px; max-width: 310px; }
  .hero-actions { gap: 10px; margin-top: 27px; }
  .brand-button { min-height: 47px; font-size: 11px; padding-inline: 18px; }
  .hero-bottom { bottom: 24px; }
  .hero-note { font-size: 8px; }
  .scroll-link { font-size: 8px; gap: 6px; }
  .sound-strip { gap: 18px; min-height: 59px; font-size: 15px; }
  .sound-strip i { font-size: 12px; }
  .music-section { padding-top: 44px; padding-bottom: 42px; }
  h2 { font-size: 43px; }
  .section-heading { align-items: end; gap: 10px; margin-bottom: 25px; }
  .section-heading .text-link { font-size: 10px; gap: 5px; max-width: 110px; text-align: right; }
  .releases-grid { grid-template-columns: 1fr; gap: 33px; }
  .release-title { font-size: 28px; }
  .listen-section { grid-template-columns: 1fr; gap: 20px; padding-block: 40px; }
  .track-row { gap: 9px; }
  .track-title { font-size: 13px; }
  .closing-band { padding-block: 36px; align-items: start; flex-direction: column; }
  .closing-band h2 { font-size: 42px; }
  .site-footer { padding-block: 28px; flex-wrap: wrap; gap: 17px; }
  .footer-links { width: 100%; gap: 25px; }
}
@media (max-width: 360px) { .hero h1 { font-size: 75px; } .hero-actions .brand-button { padding-inline: 12px; } .brand-subtitle { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

* { box-sizing: border-box; }
button,input,textarea { font: inherit; }
a { color: inherit; }
.brand-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; border:1px solid transparent; background:var(--primary); color:var(--primary-foreground); cursor:pointer; }
.brand-button:hover { filter:brightness(1.1); }
.outline-button { background:transparent; border-color:var(--border); color:var(--foreground); }
.nav-button { display:inline-flex; align-items:center; background:none; color:var(--foreground); }
.play-button { display:inline-flex; align-items:center; justify-content:center; background:var(--primary); color:var(--primary-foreground); }
.icon { width:16px; height:16px; flex-shrink:0; vertical-align:middle; }
a:focus-visible,button:focus-visible { outline:2px solid var(--primary); outline-offset:5px; }
.skip-link { position:absolute; top:-80px; left:20px; z-index:10000; background:var(--background); padding:15px; }
.skip-link:focus { top:10px; }
[hidden] { display:none !important; }
.custom-logo { height:49px; width:49px; object-fit:contain; }
.generic-content { min-height:50vh; padding-block:60px; max-width:900px; }
.generic-content h1 { font-family:var(--font-display); font-size:64px; line-height:1; }
.generic-content p { line-height:1.7; }
.generic-content a { text-decoration:underline; }
.generic-content img { max-width:100%; height:auto; }
.footer-links { flex-wrap:wrap; }
.site-footer { flex-wrap:wrap; padding-block:24px; }
.hero h1, .release-title, .track-title, .closing-band h2 { overflow-wrap:anywhere; }
.track-row { grid-template-columns:30px minmax(0,1fr) 42px 25px; }
.releases-grid:empty { display:none; }
.hero h1 { max-width:100%; }
@media(max-width:600px) { .custom-logo { width:38px;height:38px; } .hero { height:auto;max-height:none;min-height:555px; } .hero-content { padding-top:55px; padding-bottom:100px; } .hero h1 { font-size:80px; } .sound-strip { flex-wrap:wrap;gap:12px;padding:15px 10px; } .hero-actions { flex-wrap:wrap; } .hero-bottom { gap:12px; } .site-header { gap:10px; } .brand-name { font-size:19px; } .brand-subtitle { font-size:7px; } }
@media(max-width:360px) { .hero h1 { font-size:68px; } }

.footer-menu { list-style:none; display:flex; flex-wrap:wrap; gap:25px; padding:0; margin:0; }

.legal-page { padding-block:60px 90px; min-height:65vh; }
.legal-page h1 { font-family:var(--font-display); font-size:64px; line-height:1; margin:20px 0 40px; overflow-wrap:anywhere; }
.legal-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; border-top:1px solid var(--border); padding-top:32px; max-width:900px; }
.legal-page h2 { font-family:var(--font-sans); font-size:20px; font-weight:600; margin:0 0 18px; }
.legal-page address { font-style:normal; line-height:1.8; }
.legal-page p { line-height:1.8; margin:0; }
.legal-page a:not(.nav-button) { text-decoration:underline; text-underline-offset:4px; }
.legal-page a:hover { color:var(--primary); }
.legal-page .legal-extra { margin-top:40px; max-width:900px; overflow-wrap:anywhere; }
.legal-page .legal-extra p { margin-block:16px; }
.legal-layout > section { min-width:0; overflow-wrap:anywhere; }
@media(max-width:600px) { .legal-page { padding-block:40px 60px; } .legal-page h1 { font-size:48px; } .legal-layout { grid-template-columns:1fr; gap:32px; } }