/*
Theme Name: Stellmach Core Theme
Theme URI: https://stellmach.de
Author: Andre Stellmach
Description: Eigenes minimalistisches WordPress-Theme für stellmach.de mit globalem Header, Footer, mobiler Navigation und kompletter Cinematic-Startseite.
Version: 1.0.25
Requires at least: 6.0
Text Domain: stellmach-core
*/

:root{
  --bg:#050505; --panel:#0c0c0d; --gold:#e1a52b; --gold-light:#f6bd4b;
  --white:#f5f1ea; --muted:#b8b0a3; --line:rgba(255,255,255,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,Arial,sans-serif}
a{text-decoration:none;color:inherit}

.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:999;height:86px;padding:0 38px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  background:radial-gradient(circle at 18% 0%,rgba(225,165,43,.18),transparent 34%),
             linear-gradient(180deg,rgba(5,5,5,.94),rgba(5,5,5,.58));
  border-bottom:1px solid var(--line);box-shadow:0 18px 60px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.admin-bar .site-header{top:32px}
.brand{display:flex;flex-direction:column;line-height:1;min-width:210px}
.brand strong{font-size:22px;letter-spacing:-.05em}
.brand span{color:var(--gold-light);margin-top:6px;font-size:14px}
.main-nav{display:flex;gap:34px;align-items:center;justify-content:center;flex:1}
.main-nav a{font-size:15px;font-weight:600}
.main-nav a:hover{color:var(--gold-light)}
.header-right{display:flex;align-items:center;gap:18px}
.desktop-socials{display:flex;align-items:center;gap:14px}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--white);opacity:.92;transition:.2s ease}
.social-icon:hover{color:var(--gold-light);opacity:1;transform:translateY(-1px)}
.social-icon svg{width:19px;height:19px;display:block;fill:currentColor}
.song-button{border:1px solid var(--gold);color:var(--gold-light);padding:14px 24px;border-radius:999px;font-weight:700;white-space:nowrap;transition:.2s ease}
.song-button:hover{background:var(--gold);color:#130d00}

.mobile-toggle{display:none;width:46px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.03);color:var(--white);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.mobile-toggle span{display:block;width:20px;height:2px;background:var(--white);border-radius:2px}
.mobile-nav{display:none;position:fixed;z-index:998;top:86px;left:0;width:100%;background:rgba(5,5,5,.96);border-bottom:1px solid var(--line);box-shadow:0 25px 60px rgba(0,0,0,.5);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:18px 30px 26px}
.admin-bar .mobile-nav{top:118px}
.mobile-nav.is-open{display:block}
.mobile-nav a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);color:var(--white);font-weight:600}
.mobile-nav a:hover{color:var(--gold-light)}
.mobile-socials{display:flex;gap:18px;padding-top:18px;align-items:center}

.hero{
  min-height:780px;padding:150px 8vw 120px;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.62) 36%,rgba(0,0,0,.20) 66%,rgba(0,0,0,.54) 100%),
             url('assets/hero.jpg') center right/cover no-repeat;
}
.hero-content{max-width:760px}
.eyebrow{color:var(--gold-light);font-weight:700;margin-bottom:24px;font-size:18px}
.hero h1{margin:0 0 24px;font-size:clamp(54px,6vw,92px);line-height:.96;letter-spacing:-.065em}
.hero p{font-size:clamp(18px,1.5vw,24px);line-height:1.5;color:var(--white)}
.hero-buttons{display:flex;gap:18px;margin-top:34px;flex-wrap:wrap}
.btn{padding:18px 32px;border-radius:6px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.btn-gold{background:linear-gradient(135deg,#f5c85e,var(--gold));color:#181200}
.btn-outline{border:1px solid rgba(255,255,255,.30)}

.cards{
  max-width:1400px;margin:-44px auto 0;padding:0 32px 72px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:2;
}
.card{
  position:relative;min-height:410px;border:1px solid var(--line);overflow:hidden;border-radius:7px;
  box-shadow:0 30px 90px rgba(0,0,0,.34);background:#0a0a0b;
  display:flex;align-items:flex-end;isolation:isolate;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.card:hover{transform:translateY(-5px);border-color:rgba(246,189,75,.38);box-shadow:0 38px 105px rgba(0,0,0,.44)}
.card-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;filter:saturate(1.02) contrast(1.06) brightness(.88);transition:transform .35s ease}
.card:hover .card-bg{transform:scale(1.04)}
.card:after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,.92) 100%);
}
.card-body{padding:28px;width:100%}
.card-kicker{color:var(--gold-light);font-size:24px;margin-bottom:10px}
.card h2{margin:0 0 14px;font-size:30px;letter-spacing:-.04em;line-height:1.05}
.card p{color:var(--muted);line-height:1.62;margin:0 0 18px}
.card a{color:var(--gold-light);font-weight:700}

.music-strip{
  max-width:1400px;margin:0 auto 72px;padding:24px 28px;display:grid;
  grid-template-columns:190px 58px 56px 210px 1fr 120px auto;gap:24px;align-items:center;
  background:linear-gradient(180deg,rgba(22,22,23,.84),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:7px;box-shadow:0 28px 80px rgba(0,0,0,.26);
}
.music-label{color:var(--gold-light);font-weight:700;font-size:14px}
.cover-placeholder{width:58px;height:58px;border-radius:5px;background:linear-gradient(135deg,#3a2410,#e1a52b)}
.play-button{width:56px;height:56px;border-radius:999px;border:1px solid rgba(255,255,255,.32);background:transparent;color:var(--white);font-size:18px}
.track-info{display:flex;flex-direction:column;gap:6px}
.track-info span,.time{color:var(--muted)}
.waveform{height:34px;opacity:.36;background:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 3px,transparent 3px 8px);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.spotify-button{color:var(--gold-light);border:1px solid rgba(225,165,43,.42);padding:13px 18px;border-radius:5px;font-weight:700;font-size:14px;white-space:nowrap}

.quote-section{max-width:1100px;margin:0 auto 96px;padding:0 32px;text-align:center}
.quote-section blockquote{margin:0 0 22px;color:var(--gold-light);font-size:clamp(30px,3.5vw,48px);line-height:1.25;font-style:italic;letter-spacing:-.04em}
.quote-section cite{color:var(--muted);font-style:normal}

.page-shell{padding:160px 8vw 80px;min-height:70vh;max-width:1200px}
.page-shell h1{font-size:clamp(44px,5vw,76px);line-height:1;letter-spacing:-.06em}
.page-content{margin-top:40px;font-size:20px;line-height:1.8;color:#c9c1b3}

.site-footer{margin-top:0;padding:60px 8vw;background:#030303;border-top:1px solid var(--line);display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h3{margin:0 0 12px}
.footer-col a,.footer-col p{color:var(--muted)}
.footer-col a:hover{color:var(--gold-light)}

@media(max-width:1180px){
  .site-header{padding:0 26px}
  .main-nav,.desktop-socials,.desktop-song-button{display:none}
  .mobile-toggle{display:inline-flex}
  .header-right{margin-left:auto}
  .cards{grid-template-columns:1fr 1fr}
  .music-strip{grid-template-columns:1fr;gap:16px;margin-inline:32px}
}
@media(min-width:1181px){.mobile-nav,.mobile-nav.is-open{display:none!important}}
@media(max-width:782px){.admin-bar .site-header{top:46px}.admin-bar .mobile-nav{top:132px}}
@media(max-width:700px){
  .site-header{height:76px;padding:0 20px}
  .brand{min-width:auto}.brand strong{font-size:20px}.brand span{font-size:13px}
  .mobile-nav{top:76px}
  .hero{padding:130px 28px 90px;min-height:720px;background-position:center}
  .hero h1{font-size:58px}
  .cards{grid-template-columns:1fr;padding-inline:22px}
  .site-footer{grid-template-columns:1fr}
}


/* v1.0.6: Cards näher am Mockup */
.card{
  min-height: 365px;
}
.card-bg{
  height: 155px;
  bottom: auto;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.08) brightness(.9);
}
.card:hover .card-bg{
  transform: scale(1.02);
}
.card:after{
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 34%, rgba(0,0,0,.93) 56%, rgba(0,0,0,.98) 100%);
}
.card{
  align-items: flex-start;
}
.card-body{
  padding: 178px 24px 24px;
}
.card-kicker{
  color: var(--gold-light);
  font-size: 24px;
}
.card h2{
  font-size: 23px;
  margin-bottom: 12px;
}
.card p{
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 18px;
}


/* v1.0.8: echte einfarbige SVG-Icons für Cards wie im Mockup */
.card-icon{
  width:26px;
  height:26px;
  color:var(--gold-light);
  margin-bottom:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.card-icon svg{
  width:26px;
  height:26px;
  display:block;
}
.card-icon svg *{
  stroke:currentColor;
}
.card-kicker{
  display:none;
}


/* v1.0.9: interaktiver Plugin-Musikplayer */
.slr-cover{
  background-size:cover;
  background-position:center;
}
.slr-play:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.slr-waveform{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  border-radius:999px;
}
.slr-progress{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:linear-gradient(90deg, rgba(246,189,75,.45), rgba(246,189,75,.12));
  pointer-events:none;
}
.slr-player.is-playing .play-button{
  border-color:rgba(246,189,75,.75);
  color:var(--gold-light);
}


/* v1.0.10: Player Play/Pause Icon gold statt blau + klickbare Release-Links */
.slr-release-link{
  color:var(--gold-light);
  font-weight:700;
}
.slr-release-link:hover{
  color:#ffd16a;
}
.slr-cover-link{
  display:block;
  transition:transform .18s ease, box-shadow .18s ease;
}
.slr-cover-link:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(246,189,75,.45), 0 12px 28px rgba(0,0,0,.35);
}
.play-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--gold-light);
  background:rgba(255,255,255,.015);
}
.play-button svg{
  width:18px;
  height:18px;
  fill:currentColor;
  display:block;
}
.slr-icon-pause{
  display:none;
}
.slr-player.is-playing .slr-icon-play{
  display:none;
}
.slr-player.is-playing .slr-icon-pause{
  display:inline-flex;
}
.slr-player.is-playing .play-button,
.play-button:hover{
  border-color:rgba(246,189,75,.75);
  color:var(--gold-light);
  background:rgba(246,189,75,.08);
}


/* v1.0.11: Hero-Button-Rollover + Random Quote Plugin Fallback */
.hero-buttons .btn{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.hero-buttons .btn:hover{
  transform:translateY(-2px);
}
.hero-buttons .btn-gold:hover{
  box-shadow:0 16px 38px rgba(225,165,43,.28);
  background:linear-gradient(135deg,#ffd16a,#e1a52b);
  color:#120d00;
}
.hero-buttons .btn-outline:hover{
  border-color:rgba(246,189,75,.72);
  color:var(--gold-light);
  background:rgba(246,189,75,.08);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.quote-section blockquote{
  transition:color .2s ease, text-shadow .2s ease;
}
.quote-section:hover blockquote{
  color:#ffd16a;
  text-shadow:0 0 26px rgba(225,165,43,.16);
}


/* v1.0.13 Hero typography refined */
.hero h1{
  font-size: clamp(48px,5.2vw,78px);
  font-weight:700;
  letter-spacing:-.05em;
}
.hero p{
  font-size: clamp(16px,1.2vw,20px);
  color:#e6e1d8;
}


/* v1.0.25 Kontaktseite */
.contact-page{
  padding:150px 8vw 96px;
  min-height:72vh;
  background:
    radial-gradient(circle at 82% 8%,rgba(225,165,43,.14),transparent 28%),
    radial-gradient(circle at 18% 28%,rgba(40,74,120,.12),transparent 34%),
    linear-gradient(180deg,#050505 0%,#080808 62%,#050505 100%);
}
.contact-hero{
  max-width:1400px;
  margin:0 auto 48px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:42px;
  align-items:end;
}
.contact-eyebrow{
  color:var(--gold-light);
  font-weight:700;
  margin-bottom:18px;
  font-size:18px;
}
.contact-hero h1{
  margin:0 0 22px;
  font-size:clamp(52px,5.8vw,92px);
  line-height:.96;
  letter-spacing:-.06em;
}
.contact-hero p{
  max-width:760px;
  color:#d8d1c7;
  font-size:clamp(18px,1.35vw,22px);
  line-height:1.58;
}
.contact-note{
  background:linear-gradient(180deg,rgba(22,22,23,.72),rgba(10,10,11,.88));
  border:1px solid var(--line);
  border-radius:8px;
  padding:28px;
  box-shadow:0 24px 80px rgba(0,0,0,.26);
}
.contact-note h2{
  margin:0 0 14px;
  font-size:26px;
  letter-spacing:-.04em;
}
.contact-note p{
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  margin:0;
}
.contact-grid{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);
  gap:34px;
  align-items:start;
}
.contact-info-card,
.contact-form-card{
  background:linear-gradient(180deg,rgba(22,22,23,.84),rgba(12,12,13,.94));
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 28px 80px rgba(0,0,0,.28);
}
.contact-info-card{
  padding:30px;
}
.contact-info-card h2,
.contact-form-card h2{
  margin:0 0 18px;
  font-size:28px;
  letter-spacing:-.04em;
}
.contact-info-list{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:24px 0 0;
}
.contact-info-item{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:18px;
}
.contact-info-item strong{
  display:block;
  color:var(--gold-light);
  margin-bottom:6px;
}
.contact-info-item span,
.contact-info-item a{
  color:#d8d1c7;
  line-height:1.5;
}
.contact-info-item a:hover{
  color:var(--gold-light);
}
.contact-form-card{
  padding:30px;
}
.contact-form-intro{
  color:var(--muted);
  line-height:1.7;
  margin:0 0 22px;
}

/* Kontaktformular Plugin im Stellmach-Stil */
.contact-form-card .kfm-wrapper{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  color:var(--white)!important;
}
.contact-form-card .kfm-form{
  display:grid;
  gap:16px;
}
.contact-form-card .kfm-field{
  margin:0!important;
}
.contact-form-card .kfm-field label{
  color:#efe8dc;
  font-weight:650;
  margin-bottom:8px;
}
.contact-form-card .kfm-form .kfm-field input,
.contact-form-card .kfm-form .kfm-field textarea{
  width:100%;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:var(--white)!important;
  border-radius:7px!important;
  padding:14px 15px!important;
  font:inherit;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-form-card .kfm-form .kfm-field textarea{
  min-height:170px;
  resize:vertical;
}
.contact-form-card .kfm-form .kfm-field input:focus,
.contact-form-card .kfm-form .kfm-field textarea:focus{
  border-color:rgba(246,189,75,.7)!important;
  box-shadow:0 0 0 4px rgba(246,189,75,.09);
  background:rgba(255,255,255,.065)!important;
}
.contact-form-card .kfm-form button[type=submit]{
  margin-top:4px;
  padding:16px 30px!important;
  border-radius:6px!important;
  background:linear-gradient(135deg,#f5c85e,var(--gold))!important;
  color:#181200!important;
  border:0!important;
  font-weight:750!important;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.contact-form-card .kfm-form button[type=submit]:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(225,165,43,.28);
  background:linear-gradient(135deg,#ffd16a,#e1a52b)!important;
}
.contact-form-card .kfm-success{
  background:rgba(46,204,113,.12)!important;
  color:#bff2cf!important;
  border:1px solid rgba(46,204,113,.38);
  padding:16px 18px!important;
  border-radius:7px!important;
}
.contact-form-card .kfm-errors{
  background:rgba(255,70,70,.10)!important;
  color:#ffc7c7!important;
  border:1px solid rgba(255,70,70,.30)!important;
  border-radius:7px!important;
}
.contact-form-card .kfm-ip-notice small{
  color:var(--muted)!important;
}
.contact-form-card .kfm-ip-notice a{
  color:var(--gold-light)!important;
}

@media(max-width:980px){
  .contact-hero,
  .contact-grid{
    grid-template-columns:1fr;
  }
  .contact-page{
    padding:125px 26px 74px;
  }
}


/* v1.0.25: Normale Inhaltsseiten wie Impressum/Datenschutz schöner lesbar */
.page-shell{
  margin:0 auto;
}
.page-content h2,
.page-content h3{
  color:var(--white);
  letter-spacing:-.03em;
}
.page-content h2{
  font-size:34px;
  margin:36px 0 18px;
}
.page-content h3{
  font-size:24px;
  margin:32px 0 12px;
}
.page-content p{
  color:#d2cabf;
}
.page-content a{
  color:var(--gold-light);
  text-decoration:underline;
  text-underline-offset:3px;
}
.page-content small{
  color:var(--muted);
}


/* v1.0.25: einheitliches Unterseiten-Grundgerüst */
.subpage-shell{
  padding:150px 8vw 96px;
  min-height:72vh;
  background:
    radial-gradient(circle at 82% 8%,rgba(225,165,43,.12),transparent 28%),
    radial-gradient(circle at 18% 28%,rgba(40,74,120,.10),transparent 34%),
    linear-gradient(180deg,#050505 0%,#080808 62%,#050505 100%);
}
.subpage-inner{
  max-width:1400px;
  margin:0 auto;
}
.subpage-eyebrow{
  color:var(--gold-light);
  font-weight:700;
  margin-bottom:18px;
  font-size:18px;
}
.subpage-title{
  margin:0 0 34px;
  font-size:clamp(52px,5.8vw,92px);
  line-height:.96;
  letter-spacing:-.06em;
}
.subpage-content{
  color:#d8d1c7;
}
.subpage-intro-card,
.subpage-card{
  background:linear-gradient(180deg,rgba(22,22,23,.84),rgba(12,12,13,.94));
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 28px 80px rgba(0,0,0,.28);
}
.subpage-intro-card{
  padding:30px;
  max-width:900px;
  margin:0 0 34px;
}
.subpage-intro-card h2{
  margin:0 0 14px;
  font-size:30px;
  letter-spacing:-.04em;
}
.subpage-intro-card p{
  margin:0;
  color:#d8d1c7;
  font-size:18px;
  line-height:1.65;
}
.subpage-card{
  padding:34px;
  margin:0 0 24px;
}
.subpage-card h2{
  margin:0 0 22px;
  font-size:30px;
  letter-spacing:-.04em;
}
.subpage-card h3{
  margin:30px 0 10px;
  font-size:22px;
  color:var(--gold-light);
  letter-spacing:-.03em;
}
.subpage-card h3:first-child{
  margin-top:0;
}
.subpage-card p{
  color:#d2cabf;
  line-height:1.75;
  margin:0 0 16px;
}
.subpage-card a{
  color:var(--gold-light);
  text-decoration:underline;
  text-underline-offset:3px;
}
.subpage-card small{
  color:var(--muted);
}
.subpage-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:start;
}
.subpage-full{
  grid-column:1 / -1;
}
@media(max-width:980px){
  .subpage-grid{
    grid-template-columns:1fr;
  }
  .subpage-shell{
    padding:125px 26px 74px;
  }
}
@media(max-width:700px){
  .subpage-card,
  .subpage-intro-card{
    padding:26px;
  }
}


/* v1.0.25: Unterseiten-Titel-Logik korrigiert
   WordPress-Seitentitel = kleines gelbes Eyebrow.
   Große Headline kommt aus dem Seiteninhalt. */
.subpage-shell .subpage-title{
  margin:0 0 22px;
  font-size:clamp(52px,5.8vw,92px);
  line-height:.96;
  letter-spacing:-.06em;
}
.subpage-lead{
  max-width:900px;
  color:#d8d1c7;
  font-size:clamp(18px,1.35vw,22px);
  line-height:1.58;
  margin:0 0 46px;
}
.subpage-content > .subpage-title:first-child{
  margin-top:0;
}
.subpage-content > .subpage-lead + .subpage-grid,
.subpage-content > .subpage-lead + .subpage-card{
  margin-top:34px;
}
.subpage-content .subpage-card{
  margin-bottom:24px;
}


/* v1.0.25: Unterseiten-Logik final
   Seitentitel = große weiße Überschrift.
   Gelber Eyebrow = frei pflegbares Zusatzfeld pro Seite. */
.subpage-eyebrow:empty{
  display:none;
}
.subpage-title{
  margin:0 0 28px;
  font-size:clamp(52px,5.8vw,92px);
  line-height:.96;
  letter-spacing:-.06em;
}
.subpage-lead{
  max-width:900px;
  color:#d8d1c7;
  font-size:clamp(18px,1.35vw,22px);
  line-height:1.58;
  margin:0 0 46px;
}