/*
Theme Name: Musikschule Teisendorf
Theme URI: https://www.musikschule-teisendorf.de
Author: Musikschule Teisendorf e.V.
Description: Corporate-Design-konformes Theme der Musikschule Teisendorf e.V. — Rot (#821914) & Grau (#565656) auf Weiß, condensed Sans (Barlow Condensed / Source Sans 3), eckige Flächen. Inhaltstypen für News, Termine, Lehrkräfte. Schriften lokal (DSGVO).
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mst
*/

:root{
  /* Corporate Design */
  --red:#821914; --red-deep:#5e1210; --red-soft:#a4291f;
  --grey:#565656; --grey-2:#7d7d7d; --grey-light:#e5e3e1;
  --bg:#ffffff; --bg-alt:#f4f3f1; --ink:#3d3a38;
  --line:#e2dfdc;
  --shadow: 0 16px 40px -26px rgba(0,0,0,.40);
  --shadow-sm: 0 8px 20px -14px rgba(0,0,0,.32);
  --radius:0;            /* KEINE abgerundeten Kanten (CD) */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Source Sans 3',system-ui,Arial,sans-serif;
  color:var(--grey); background:var(--bg);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* Vollflächiger Marken-Hintergrund: fest im Viewport (cover = unverzerrt),
   Inhalt scrollt darüber (Parallax) + sehr langsame Drift = dezent dynamisch. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:#fff url('assets/mst_bg3.jpg') center center / cover no-repeat;
  transform-origin:center;
  animation:mst-bg-drift 48s ease-in-out infinite alternate;
}
body::after{ /* leichter Weißschleier für sichere Lesbarkeit */
  content:""; position:fixed; inset:0; z-index:-1; background:rgba(255,255,255,.28); pointer-events:none;
}
@keyframes mst-bg-drift{ from{transform:scale(1.05) translate(0,0)} to{transform:scale(1.13) translate(-1.6%,-1.2%)} }
@media (prefers-reduced-motion:reduce){ body::before{animation:none} }
h1,h2,h3,.display{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-weight:700; line-height:1.02; color:var(--red); letter-spacing:.01em;
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.wrap{max-width:1200px; margin:0 auto; padding:0 28px}

/* HEADER */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:32px; padding:16px 0}
.logo{display:flex; align-items:center; height:48px}
.logo img{height:48px; width:auto}
.nav-toggle{display:none}
nav.main{margin-left:auto; display:flex; align-items:center}
nav.main ul.menu{list-style:none; margin:0; padding:0; display:flex; align-items:center}
nav.main li{list-style:none; margin:0; position:relative}
nav.main a{font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.05rem; padding:12px 14px; color:var(--grey); transition:.18s; display:block; white-space:nowrap}
nav.main a:hover, nav.main .current-menu-item>a, nav.main li:hover>a{color:var(--red)}
nav.main .cta>a, a.cta{background:var(--red); color:#fff!important; transition:.2s}
nav.main .cta>a:hover, a.cta:hover{background:var(--red-deep)}
/* Pfeil bei Punkten mit Untermenü */
nav.main .menu-item-has-children>a::after{content:""; display:inline-block; width:.4em; height:.4em; margin-left:.5em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg)}
/* Dropdown (Desktop) */
nav.main .sub-menu{position:absolute; top:100%; left:0; min-width:230px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); list-style:none; margin:0; padding:6px 0; opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s; z-index:60}
nav.main li:hover>.sub-menu, nav.main li:focus-within>.sub-menu{opacity:1; visibility:visible; transform:none}
nav.main .sub-menu a{text-transform:none; letter-spacing:0; font-family:'Source Sans 3',system-ui,sans-serif; font-weight:600; font-size:.98rem; padding:9px 18px; color:var(--ink); white-space:nowrap}
nav.main .sub-menu a:hover{background:var(--bg-alt); color:var(--red)}
nav.main .sub-menu .sub-menu{top:-7px; left:100%}
.submenu-toggle{display:none}

/* Buttons — eckig */
.btn-primary{display:inline-flex; gap:10px; align-items:center; background:var(--red); color:#fff;
  padding:15px 30px; font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:1.1rem; transition:.2s; border:2px solid var(--red)}
.btn-primary:hover{background:var(--red-deep); border-color:var(--red-deep); transform:translateY(-2px)}
.btn-ghost{display:inline-flex; gap:8px; align-items:center; padding:13px 26px; font-family:'Barlow Condensed',sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:1.1rem; color:var(--red);
  border:2px solid var(--red); background:transparent; transition:.2s}
.btn-ghost:hover{background:var(--red); color:#fff}

.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:'Barlow Condensed',sans-serif;
  font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:.9rem; color:var(--grey-2); margin-bottom:18px}
.eyebrow::before{content:""; width:34px; height:3px; background:var(--red); display:inline-block}

/* HERO */
.hero{position:relative; padding:80px 0 70px; background:transparent}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(3rem,6.2vw,5.4rem); text-transform:uppercase; letter-spacing:.005em}
.hero h1 em{font-style:normal; color:var(--grey); display:block}
.hero p.lead{font-size:1.2rem; color:var(--grey); margin:26px 0 34px; max-width:32em}
.actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.stats{display:flex; gap:40px; margin-top:48px}
.stat b{font-family:'Barlow Condensed',sans-serif; font-size:2.4rem; color:var(--red); display:block; line-height:1}
.stat span{font-size:.9rem; color:var(--grey-2); font-weight:600; text-transform:uppercase; letter-spacing:.05em}

/* hero visual: rotes Flächenelement hinter dem Foto (CD-Designelement) */
.hero-art{position:relative}
.photo-card{position:relative; z-index:2; overflow:hidden; box-shadow:var(--shadow); border:0}
.photo-card img{width:100%; height:440px; object-fit:cover; display:block}
.hero-art::before{content:""; position:absolute; z-index:1; right:-26px; top:-26px; width:62%; height:78%;
  background:var(--red)}
.badge{position:absolute; z-index:3; background:#fff; box-shadow:var(--shadow-sm); padding:14px 18px;
  display:flex; gap:12px; align-items:center; border-left:4px solid var(--red)}
.badge.bl{left:-22px; bottom:40px}
.badge.tr{right:-16px; top:30px}
.badge .ic{width:40px;height:40px;display:grid;place-items:center;font-size:1.3rem;background:var(--bg-alt)}
.badge small{display:block;color:var(--grey-2);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.badge strong{font-family:'Barlow Condensed',sans-serif; font-size:1.15rem; color:var(--red); text-transform:uppercase}
/* "inszenierte" Typo als Designelement */
.stage-word{position:absolute; left:-3rem; top:-3.5rem; z-index:0; font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:13rem; line-height:.8; color:var(--bg-alt); text-transform:uppercase;
  pointer-events:none; user-select:none; letter-spacing:-.02em}

/* SECTION */
section.block{position:relative; padding:84px 0}
section.alt{background:var(--bg-alt)}
.sec-head{max-width:44em; margin-bottom:46px}
.sec-head h2{font-size:clamp(2.2rem,4.2vw,3.4rem); text-transform:uppercase}
.sec-head p{color:var(--grey); font-size:1.1rem; margin-top:14px}

/* ANGEBOT */
.grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line)}
.card{position:relative; background:#fff; padding:34px 30px; transition:.22s; display:block}
.card::after{content:""; position:absolute; left:0; top:0; height:5px; width:100%; background:var(--red); transform:scaleX(0); transform-origin:left; transition:.3s}
.card:hover{background:var(--bg-alt)}
.card:hover::after{transform:scaleX(1)}
.card .ic{width:56px;height:56px;display:grid;place-items:center;font-size:1.8rem;background:var(--bg-alt); margin-bottom:18px}
.card:hover .ic{background:#fff}
.card h3{font-size:1.6rem; color:var(--red); margin-bottom:8px; text-transform:uppercase; line-height:1}
.card p{color:var(--grey); font-size:1rem}
.card .more{margin-top:16px; font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--red); font-size:.95rem; display:inline-flex; gap:6px; transition:.2s}
.card:hover .more{gap:12px}

/* ROTE FLÄCHE: Anmelde-Band (CD-Designelement) */
.band{background:var(--red); color:#fff; padding:58px 56px; position:relative; overflow:hidden}
.band::before{content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px;
  border:34px solid rgba(255,255,255,.07)}
.band .eyebrow{color:rgba(255,255,255,.85)}
.band .eyebrow::before{background:#fff}
.band h2{color:#fff; font-size:clamp(2rem,3.8vw,3rem); max-width:16em; text-transform:uppercase}
.band p{color:rgba(255,255,255,.9); margin:16px 0 30px; max-width:36em; font-size:1.1rem}
.band .btn-primary{background:#fff; color:var(--red); border-color:#fff}
.band .btn-primary:hover{background:var(--bg-alt); color:var(--red-deep)}
.band .btn-ghost{color:#fff; border-color:rgba(255,255,255,.6)}
.band .btn-ghost:hover{background:#fff; color:var(--red)}

/* NEWS + TERMINE */
.two{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(340px,1fr); gap:44px; align-items:start}
.two > *{min-width:0; overflow:hidden}
.news-item{min-width:0}
.news-item > div{min-width:0}
/* bombensicher: nichts ragt aus seiner Spalte (lange Wörter umbrechen) */
.news-item h3,.news-item p,.news-item time,.termine .info strong,.termine .info span{overflow-wrap:anywhere; word-break:break-word}
.news-item{display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--line)}
.news-item:first-child{padding-top:0}
.news-thumb{width:96px;height:96px;object-fit:cover;flex:none}
.news-item h3{font-size:1.35rem; color:var(--red); margin-bottom:3px; text-transform:uppercase; line-height:1.05}
.news-item time{font-family:'Barlow Condensed',sans-serif; font-size:.85rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-2)}
.news-item p{font-size:.96rem; color:var(--grey); margin-top:5px}

.termine{background:#fff; padding:32px; border:1px solid var(--line)}
.termine h3.boxhead{font-size:1.5rem; color:var(--red); margin-bottom:4px; text-transform:uppercase}
.event{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line)}
.event:last-child{border-bottom:0; padding-bottom:0}
.date{flex:none; width:60px; text-align:center; background:var(--red); color:#fff; padding:9px 0}
.date b{font-family:'Barlow Condensed',sans-serif; font-size:1.7rem; display:block; line-height:1}
.date span{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600}
.event .info strong{font-family:'Barlow Condensed',sans-serif; font-size:1.2rem; color:var(--ink); display:block; text-transform:uppercase; line-height:1.05}
.event .info span{font-size:.9rem; color:var(--grey-2)}

/* LEHRKRÄFTE — eckige Bilder */
.teachers{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.teacher{text-align:left}
.teacher .pic{aspect-ratio:4/5; min-height:230px; overflow:hidden; margin-bottom:14px; transition:.25s; position:relative; background:var(--bg-alt)}
.teacher .pic::after{content:""; position:absolute; inset:0; box-shadow:inset 0 -60px 50px -40px rgba(130,25,20,.45); opacity:0; transition:.25s}
.teacher:hover .pic::after{opacity:1}
.teacher .pic img{width:100%;height:100%;object-fit:cover; object-position:center top; filter:grayscale(.15)}
.teacher:hover .pic img{filter:none}
.teacher strong{font-family:'Barlow Condensed',sans-serif; font-size:1.3rem; color:var(--red); text-transform:uppercase; line-height:1}
.teacher span{display:block; font-size:.92rem; color:var(--grey-2); margin-top:2px}

/* VEREIN — rote Fläche + Stempel-Anmutung */
.verein{display:grid; grid-template-columns:1fr 1fr; background:var(--red); color:#fff; position:relative; overflow:hidden}
.verein .left{padding:58px 54px}
.verein .left .eyebrow{color:rgba(255,255,255,.8)} .verein .left .eyebrow::before{background:#fff}
.verein h2{color:#fff; font-size:clamp(2rem,3.4vw,2.9rem); text-transform:uppercase}
.verein p{color:rgba(255,255,255,.9); margin:16px 0 30px}
.verein .btn-primary{background:#fff; color:var(--red); border-color:#fff}
.verein .btn-primary:hover{background:var(--bg-alt)}
.verein .right{background-size:cover; background-position:center; min-height:320px; position:relative}
.verein .right::after{content:"WIR SIND EIN VEREIN"; position:absolute; right:24px; bottom:22px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.4rem; color:#fff; text-transform:uppercase;
  letter-spacing:.04em; border:3px solid #fff; padding:8px 14px; transform:rotate(-6deg); opacity:.92}

/* FOOTER */
.site-footer{background:var(--grey); color:rgba(255,255,255,.85); padding:64px 0 30px; margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px}
.site-footer h4{font-family:'Barlow Condensed',sans-serif; color:#fff; font-size:1.3rem; margin-bottom:16px; text-transform:uppercase}
.site-footer a{color:rgba(255,255,255,.82); display:block; padding:5px 0; transition:.18s; font-size:.98rem}
.site-footer a:hover{color:#fff; transform:translateX(3px)}
.foot-brand p{font-size:.98rem; margin-top:14px; max-width:26em; color:rgba(255,255,255,.78)}
.foot-logo{background:#fff; display:inline-block; padding:10px 14px}
.foot-logo img{height:42px; display:block}
.foot-bottom{border-top:1px solid rgba(255,255,255,.22); margin-top:46px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.88rem; color:rgba(255,255,255,.7)}
.foot-bottom a{display:inline}

/* INHALTSSEITEN */
.page-hero{padding:64px 0 8px; background:var(--bg-alt)}
.page-hero h1{font-size:clamp(2.6rem,5vw,4rem); text-transform:uppercase}
.content{max-width:780px; margin:0 auto; padding:46px 28px 20px; font-size:1.1rem; color:var(--ink)}
.content h2{color:var(--red); margin:1.4em 0 .4em; font-size:2rem; text-transform:uppercase}
.content h3{color:var(--ink); margin:1.2em 0 .3em; font-size:1.5rem; text-transform:uppercase}
.content p{margin:0 0 1.1em}
.content a{color:var(--red); text-decoration:underline; text-underline-offset:3px}
.content img{margin:1em 0}
.post-list{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.post-card{background:#fff; border:1px solid var(--line); transition:.22s}
.post-card:hover{box-shadow:var(--shadow); transform:translateY(-4px)}
.post-card .thumb{height:190px; background-size:cover; background-position:center top}
.post-card .pc-body{padding:24px}
.post-card time{font-family:'Barlow Condensed',sans-serif; font-size:.82rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--grey-2)}
.post-card h3{font-size:1.45rem; color:var(--red); margin:5px 0 8px; text-transform:uppercase; line-height:1.05}
.post-card p{color:var(--grey); font-size:.98rem}
.pagination{display:flex; gap:8px; justify-content:center} .pagination .page-numbers{padding:8px 14px; border:1px solid var(--line); color:var(--grey)} .pagination .current{background:var(--red); color:#fff; border-color:var(--red)}

/* klickbare Termine */
a.event{transition:.18s} a.event:hover{background:var(--bg-alt)}
a.event:hover .info strong{color:var(--red)} a.event:hover .date{background:var(--red-deep)}

/* Platzhalter: Lehrkraft ohne Foto -> Initiale */
.pic-ph{position:absolute; inset:0; display:grid; place-items:center; background:var(--bg-alt);
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:4.5rem; color:var(--red)}
/* Platzhalter: Listen-Karte ohne Bild */
.thumb.noimg{background:var(--bg-alt); position:relative}
.thumb.noimg::after{content:"♪"; position:absolute; inset:0; display:grid; place-items:center; font-size:3rem; color:var(--grey-light)}

/* reveal — nur bei aktivem JS verstecken (sonst immer sichtbar) */
.js .reveal{opacity:0; transform:translateY(24px); transition:.7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

@media(max-width:900px){
  .hero-grid,.two,.verein,.foot-grid{grid-template-columns:1fr}
  .grid-cards,.post-list{grid-template-columns:1fr 1fr}
  .teachers{grid-template-columns:1fr 1fr}
  .stage-word{display:none}
  .verein .right{min-height:240px}
  .hero{padding:50px 0}
  .band{padding:42px 28px}

  /* ----- Mobile-Navigation ----- */
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:48px; height:44px; margin-left:auto;
    background:transparent; border:2px solid var(--red); cursor:pointer; padding:0}
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{display:block; width:22px; height:2.5px; background:var(--red); transition:.2s}
  .nav-toggle-bars{position:relative}
  .nav-toggle-bars::before{content:""; position:absolute; top:-7px; left:0}
  .nav-toggle-bars::after{content:""; position:absolute; top:7px; left:0}
  .site-header.nav-open .nav-toggle-bars{background:transparent}
  .site-header.nav-open .nav-toggle-bars::before{top:0; transform:rotate(45deg)}
  .site-header.nav-open .nav-toggle-bars::after{top:0; transform:rotate(-45deg)}

  nav.main{position:absolute; top:100%; left:0; right:0; margin:0; background:#fff; border-top:1px solid var(--line);
    box-shadow:var(--shadow); display:none; max-height:78vh; overflow-y:auto}
  .site-header.nav-open nav.main{display:block}
  nav.main ul.menu{flex-direction:column; align-items:stretch; width:100%}
  nav.main li{position:static; border-bottom:1px solid var(--line)}
  nav.main li.menu-item-has-children{display:flex; flex-wrap:wrap; align-items:stretch}
  nav.main li.menu-item-has-children>a{flex:1}
  nav.main a{padding:15px 22px; font-size:1.1rem; white-space:normal}
  nav.main .menu-item-has-children>a::after{display:none}
  .submenu-toggle{display:flex; align-items:center; justify-content:center; width:54px; align-self:stretch;
    background:transparent; border:0; border-left:1px solid var(--line); color:var(--red); cursor:pointer}
  .submenu-toggle::before{content:""; width:.55em; height:.55em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:.2s}
  nav.main li.open>.submenu-toggle::before{transform:rotate(-135deg)}
  nav.main .sub-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0;
    background:var(--bg-alt); display:none; flex-basis:100%; width:100%}
  nav.main li.open>.sub-menu{display:block}
  nav.main .sub-menu a{padding-left:38px}
  nav.main .sub-menu .sub-menu{top:auto; left:auto}
  nav.main .sub-menu .sub-menu a{padding-left:54px}
  nav.main .cta>a, nav.main a.cta{background:transparent; color:var(--red)!important}
}
@media(max-width:560px){
  .grid-cards,.teachers,.post-list{grid-template-columns:1fr}
  .stats{flex-wrap:wrap;gap:24px}
}