/*
Theme Name: StrawberryWolfTV
Version: 1.4.0
Requires PHP: 8.0
Description: Das vorhandene Creator-Design mit WordPress-Inhalten.
*/

/* Darstellung: Basis, Komponenten, Mobilansicht */

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:90px;
  color-scheme:dark;
}

body {
  margin:0;
  background:#25252d;
  color:#f7f7fa;
  font:16px/1.6 system-ui,sans-serif;
}

a {
  color:inherit;
  text-decoration:none;
}

a:focus-visible,summary:focus-visible {
  outline:3px solid #ff354d;
  outline-offset:5px;
}

.wrap {
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}

header {
  position:sticky;
  top:0;
  z-index:3;
  background:#25252df2;
  border-bottom:1px solid #303039;
}

.bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:22px 0;
}

.brand {
  font-size:20px;
  font-weight:850;
}

.red {
  color:#ff354d;
}

nav {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-size:14px;
  color:#bcbcc8;
}

.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:55px;
  align-items:center;
  padding:80px 0 60px;
}

.eyebrow {
  font-size:12px;
  letter-spacing:2px;
  font-weight:750;
  text-transform:uppercase;
  color:#ff354d;
}

h1 {
  font-size:clamp(38px,5.1vw,66px);
  line-height:1.08;
  letter-spacing:-2px;
  margin:20px 0;
}

h2 {
  font-size:34px;
  line-height:1.2;
  letter-spacing:-1px;
  margin:10px 0 24px;
}

h3 {
  font-size:19px;
  margin:10px 0;
}

p {
  color:#bcbcc8;
}

.intro {
  font-size:18px;
}

.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

.btn {
  display:inline-block;
  padding:12px 20px;
  border:1px solid #393940;
  border-radius:9px;
  font-weight:700;
  font-size:14px;
}

.btn:hover {
  background:#303039;
}

.primary {
  background:#ef3049;
  border-color:#ef3049;
}

.primary:hover {
  background:#cc2038;
}

.art {
  border:1px solid #494952;
  border-radius:16px;
  overflow:hidden;
  background:#17171d;
  box-shadow:0 20px 80px #0007;
}

.art img {
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/10;
  object-fit:contain;
}

.caption {
  border-top:1px solid #303039;
  padding:14px 20px;
  font-size:11px;
  letter-spacing:2px;
  color:#bcbcc8;
}

.live {
  display:grid;
  grid-template-columns:1fr 1.2fr auto;
  align-items:center;
  gap:25px;
  border:1px solid #56303b;
  border-radius:14px;
  padding:28px;
  background:linear-gradient(110deg,#292027,#303039);
}

.live strong {
  display:block;
  font-size:22px;
  margin:6px 0;
}

.small {
  font-size:13px;
  color:#bcbcc8;
}

section {
  padding:70px 0;
  border-bottom:1px solid #303039;
}

.head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:35px;
  margin-bottom:25px;
}

.head p {
  max-width:420px;
  font-size:14px;
}

.grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.card {
  padding:25px;
  border:1px solid #494952;
  border-radius:12px;
  background:#303039;
}

.card time {
  display:block;
  font-size:32px;
  font-weight:800;
  margin:20px 0 10px;
}

.card p {
  font-size:13px;
}

.tag {
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#bcbcc8;
}

.next {
  border-color:#ff354d;
}

.next .tag {
  color:#ff354d;
}

.empty {
  padding:28px;
  border:1px dashed #41414a;
  border-radius:12px;
  color:#bcbcc8;
}

.community {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
}

.links {
  display:grid;
  gap:12px;
}

.row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:19px 22px;
  border:1px solid #494952;
  border-radius:10px;
  background:#303039;
}

.row span {
  font-size:13px;
  color:#bcbcc8;
}

.ref {
  border:1px solid #56303b;
  border-radius:14px;
  padding:35px;
  background:linear-gradient(110deg,#2b1d25,#303039);
}

.more {
  grid-template-columns:repeat(2,1fr);
}

details {
  padding:25px;
  border:1px solid #494952;
  border-radius:12px;
  background:#303039;
}

summary {
  font-size:19px;
  font-weight:700;
  cursor:pointer;
}

.placeholder {
  margin-top:20px;
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  background:#22222b;
  color:#91919f;
  border:1px dashed #41414a;
  border-radius:9px;
  font-size:12px;
}

footer {
  padding:30px 0;
  font-size:12px;
  color:#bcbcc8;
}

.foot {
  display:flex;
  justify-content:space-between;
  gap:20px;
}


@media(max-width:900px){.hero {
  gap:25px;
}

.grid {
  grid-template-columns:repeat(2,1fr);
}

.live {
  grid-template-columns:1fr 1fr;
}

.live .btn {
  grid-column:1/-1;
}

.more {
  grid-template-columns:1fr;
}

.community {
  grid-template-columns:1fr;
}


}
@media(max-width:600px){.bar {
  flex-wrap:wrap;
  gap:10px;
}

nav {
  width:100%;
  justify-content:space-between;
  font-size:12px;
  gap:12px;
}

.hero {
  grid-template-columns:1fr;
  padding:40px 0;
}

.art img {
  aspect-ratio:16/9;
}

.live {
  grid-template-columns:1fr;
}

.live .btn {
  grid-column:auto;
}

.head {
  display:block;
}

.grid {
  grid-template-columns:1fr;
}

.card time {
  margin:10px 0;
}

section {
  padding:45px 0;
}

h2 {
  font-size:28px;
}

.foot {
  flex-direction:column;
}

.intro {
  font-size:16px;
}


}
@media(prefers-reduced-motion:reduce){html {
  scroll-behavior:auto;
}


}.more:empty {
  display:none;
}

/* Symbole aus deiner gelieferten ZIP-Datei */
.social-label {
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.social-icon {
  width:22px;
  height:22px;
  flex-shrink:0;
}

.x-icon {
  display:inline-flex;
  padding:3px;
  background:#fff;
  border-radius:3px;
}

.x-icon .social-icon {
  width:16px;
  height:16px;
}


  
.content img{max-width:100%;height:auto}.content{padding:50px 0}.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}.post-grid img{width:100%;height:auto;border-radius:10px}
/* Dezente Buttons und Twitch-Fenster neben der Begrüßung. */
.primary{background:#842d3b;border-color:#a04452;color:#fff}.primary:hover{background:#963746}
button.btn{font-family:inherit;cursor:pointer;color:inherit}
.twitch-panel{align-self:stretch;display:flex;flex-direction:column;box-shadow:none}
.twitch-heading{padding:20px;border-bottom:1px solid #494952}.twitch-heading p{margin:8px 0 0}
.twitch-placeholder{min-height:300px;padding:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1}
#sw-player-area iframe{width:100%;aspect-ratio:16/9;border:0;display:block;min-height:300px}
.live{grid-template-columns:1fr auto}#clock{font-size:18px;font-weight:600;color:#f7f7fa;padding:16px 0}
@media(max-width:600px){.live{grid-template-columns:1fr}}

/* 11 Bearbeitbare Inhalte und FAQ-Sprechblasen. */
.sw-part img,.custom-section img{max-width:100%;height:auto}.sw-part h1{font-size:clamp(36px,5vw,62px)}
.sw-edit{margin:12px 0 22px}.sw-edit .btn{font-size:12px;padding:8px 12px;background:#303039;border-color:#51515c}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;padding:12px 0 20px}
.faq-bubble{position:relative;background:#303039;border:1px solid #53515c;border-radius:20px 20px 20px 5px;padding:26px}
.faq-bubble:after{content:"";position:absolute;bottom:-12px;left:22px;width:22px;height:22px;background:#303039;border-right:1px solid #53515c;border-bottom:1px solid #53515c;transform:rotate(45deg)}
.faq-bubble h3{margin:0 0 14px;color:#f4c6cd}.faq-bubble p{margin:12px 0}
.cover-placeholder{aspect-ratio:16/9;display:grid;place-items:center;background:#303039;border:1px solid #4d4149;border-radius:10px;color:#d8a8b1}
.primary{box-shadow:0 0 0 3px #842d3b22,inset 0 1px 0 #ffffff12;border:1px solid #ad5362}.primary:hover{box-shadow:0 0 0 4px #842d3b33}
.wp-block-gallery{gap:20px!important}.wp-block-gallery img{border-radius:12px}.content .wp-block-image{margin:24px 0}

/* 12 Spielcover mit lesbarem Verlauf und auffälliger Absage. */
#slots .card{position:relative;isolation:isolate;overflow:hidden;min-height:275px;background-size:cover;background-position:center;display:flex;flex-direction:column;gap:8px;padding:24px}
#slots .card:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#11111999,#111119e8)}
#slots .card.has-cover:before{background:linear-gradient(180deg,#08080f77,#08080fe8)}
#slots .card h3,#slots .card p{margin:4px 0}#slots .game-title{font-size:19px;font-weight:650;color:#fff}#slots .cancel-banner{background:#8e2438;color:#fff;font-size:24px;font-weight:900;letter-spacing:.05em;padding:12px;margin:-24px -24px 12px;text-align:center;border-bottom:2px solid #e47284}#slots .cancelled{border:2px solid #d64e67}#slots .tag{margin-top:auto}#slots .slot-date{font-size:13px;color:#ddd}
.language-switch{display:inline-flex;gap:0;border:1px solid #54505a;border-radius:8px;overflow:hidden}.language-switch a{padding:7px 10px;font-size:12px}.language-switch a[aria-current]{background:#842d3b;color:#fff}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}.gallery-item{width:auto!important;float:none!important;margin:0!important}.gallery img{border-radius:12px}