/*
Theme Name: Musikakademie Regen
Author: Gestaltungsentwurf
Description: Theme nach dem Gestaltungsentwurf der Musikakademie Regen e.V. Legt beim Einrichten alle Seiten und das Menue automatisch an.
Version: 1.5
License: GPL-2.0-or-later
Text Domain: mareg
*/


:root{
  --nacht:#111731;--nacht-2:#1B2246;--tiefe:#0A0E20;
  --gold:#E8B04B;--rot:#D8232A;
  --creme:#F6F1E4;--tinte:#1A1F35;--grau:#8891A8;--linie:#DCD3BF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nacht);color:var(--creme);font-family:"Outfit",system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.fraunces{font-family:"Fraunces",Georgia,serif;font-weight:800;line-height:1.02;letter-spacing:-.015em}
.mono{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Kopf ---------- */
.oben{position:relative;z-index:20;background:
  radial-gradient(120% 90% at 12% 0%, #232C5A 0%, transparent 55%),
  radial-gradient(90% 70% at 90% 10%, #2A1C3C 0%, transparent 60%),
  var(--nacht)}
.oben::after{content:"";position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(246,241,228,.055) 27px 28px)}
.kopfzeile{position:relative;display:flex;align-items:center;gap:16px;padding:20px 0 10px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:13px;text-decoration:none}
.marke .txt{line-height:1.05}
.marke .txt b{font-weight:700;font-size:1rem;letter-spacing:.02em;display:block}
.marke .txt small{font-family:"IBM Plex Mono";font-size:.58rem;letter-spacing:.2em;color:var(--gold)}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:14px}
.kopf-tel{display:none;text-align:right;font-size:.82rem;color:var(--grau);line-height:1.35}
.kopf-tel b{display:block;color:var(--creme);font-size:1rem;font-weight:500}
@media(min-width:620px){.kopf-tel{display:block}}
.sozial{display:flex;gap:8px}
.sozial a{width:38px;height:38px;border-radius:10px;border:1px solid rgba(246,241,228,.22);display:flex;align-items:center;justify-content:center;color:var(--creme);text-decoration:none;transition:background .18s,border-color .18s}
.sozial a:hover{background:rgba(232,176,75,.16);border-color:var(--gold);color:var(--gold)}
.sozial svg{width:19px;height:19px;fill:currentColor}

/* ---------- Reitermenü ---------- */
/* ---------- Navigationsleiste mit Untermenüs ---------- */
.leiste{position:relative;padding:14px 0 18px;z-index:30}
.menue{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;align-items:stretch}
.menue>li{position:relative}
.menue a{background:transparent;border:1px solid transparent;color:var(--creme);
  font-family:"Outfit";font-weight:500;font-size:.83rem;line-height:1.2;
  padding:11px 14px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:7px;
  white-space:nowrap;transition:background .16s ease,color .16s ease}
@media(min-width:1000px){.menue a{font-size:.88rem;padding:12px 16px}}
.menue>li>a:hover{background:rgba(246,241,228,.13)}
.menue>li>a[aria-current="true"]{background:var(--creme);color:var(--tinte);font-weight:600}
.menue>li>a[aria-current="true"] .pfeil{color:var(--rot)}
.pfeil{font-size:.7rem;opacity:.75;transition:transform .18s ease}
.hat-unter.offen>a .pfeil{transform:rotate(180deg)}
.hat-unter>a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  background:var(--rot);border-radius:2px;opacity:0;transition:opacity .18s}
.hat-unter.aktiv-zweig>a::after{opacity:1}

.unter{list-style:none;margin:0;padding:6px;position:absolute;top:calc(100% + 4px);left:0;min-width:210px;z-index:60;
  background:var(--creme);border-radius:12px;box-shadow:0 20px 44px -16px rgba(5,8,20,.75);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease;z-index:40}
.hat-unter:hover .unter,.hat-unter.offen .unter,.hat-unter:focus-within .unter{opacity:1;visibility:visible;transform:none}
.unter a{color:var(--tinte);width:100%;font-size:.88rem;padding:10px 12px;border-radius:8px}
.unter a:hover{background:rgba(35,40,64,.09)}
.unter a[aria-current="true"]{background:var(--tinte);color:var(--creme);font-weight:600}
@media(max-width:760px){
  .menue a{font-size:.8rem;padding:10px 12px}
  .unter{position:static;min-width:0;width:100%;box-shadow:none;margin:4px 0 6px;
    display:none;opacity:1;visibility:visible;transform:none}
  .hat-unter.offen .unter{display:block}
  .hat-unter:hover .unter{display:none}
  .hat-unter.offen:hover .unter{display:block}
  .menue>li{flex:1 1 auto}
}
.blatt{background:var(--creme);color:var(--tinte);position:relative;z-index:2}
.tafel{padding:0 0 10px}
.tafel{animation:auf .3s ease}
@keyframes auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tafel.aktiv{animation:none}}

/* ---------- Bühne ---------- */
.buehne{padding:56px 0 50px;text-align:center}
.buehne .augen{color:var(--rot);margin:0 0 16px}
.buehne h1{font-size:clamp(2.3rem,6.2vw,4.1rem);margin:0 auto 20px;max-width:17ch}
.buehne h1 i{font-style:italic;font-weight:600;color:#8A4B12}
.buehne p{font-size:1.08rem;color:#4A5165;max-width:52ch;margin:0 auto 28px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.knopf{display:inline-block;text-decoration:none;font-weight:600;font-size:1rem;padding:15px 26px;border-radius:999px;border:1px solid transparent;transition:transform .15s ease;cursor:pointer;font-family:inherit}
.knopf:hover{transform:translateY(-2px)}
.knopf.voll{background:var(--rot);color:#fff}
.knopf.rand{border-color:#C9BFA6;color:var(--tinte);background:transparent}

/* ---------- Slider ---------- */
.slider{background:var(--nacht);padding:30px 0 30px;overflow:hidden;position:relative}
.slider::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 24px,rgba(246,241,228,.05) 24px 25px);pointer-events:none}
.slider .kopfzeile-s{position:relative;text-align:center;margin:0 0 22px}
.slider .kopfzeile-s .mono{color:var(--gold);display:block}
.slider .kopfzeile-s small{display:block;color:var(--grau);font-size:.78rem;margin-top:6px}
.spurbahn{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.spur{display:flex;width:max-content;animation:lauf 46s linear infinite;will-change:transform;backface-visibility:hidden}
.halb{display:flex;flex:0 0 auto;gap:14px;padding-right:14px}
.spurbahn.pause .spur{animation-play-state:paused}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Durchlauf laeuft bewusst auch bei reduzierter Bewegung – Pause-Knopf vorhanden */
.karte{flex:0 0 auto;width:150px;-webkit-tap-highlight-color:transparent;background:rgba(246,241,228,.05);border:1px solid rgba(246,241,228,.13);border-radius:14px;padding:20px 14px 16px;text-align:center;text-decoration:none;color:var(--creme);cursor:pointer}
.karte:hover{border-color:var(--gold);background:rgba(232,176,75,.09)}
.karte svg{width:46px;height:46px;margin:0 auto 14px;display:block;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.karte b{display:block;font-family:"Fraunces";font-weight:600;font-size:1rem;line-height:1.15}

@media(max-width:640px){
  .karte{width:124px;padding:16px 10px 13px}
  .karte svg{width:38px;height:38px;margin-bottom:10px}
  .karte b{font-size:.9rem}
  .halb{gap:10px;padding-right:10px}
  .spur{animation-duration:34s}
  .spurbahn{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
}

/* Infofenster */
.fenster{position:fixed;z-index:100;width:270px;background:var(--creme);color:var(--tinte);border-radius:14px;padding:18px 20px;box-shadow:0 22px 46px -14px rgba(5,8,20,.6);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease}
.fenster.sichtbar{opacity:1;visibility:visible;transform:none}
.fenster .gruppe{color:var(--rot);margin:0 0 6px}
.fenster h4{font-family:"Fraunces";font-weight:600;font-size:1.3rem;margin:0 0 10px}
.fenster .beschriftung{font-family:"IBM Plex Mono";font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#6A7189;margin:0 0 6px}
.fenster ul{margin:0 0 12px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.fenster li{background:#fff;border:1px solid var(--linie);border-radius:7px;padding:4px 9px;font-size:.82rem}
.fenster .fuss-f{font-size:.75rem;color:#6A7189;border-top:1px solid var(--linie);padding-top:9px;margin:0}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:52px 0}
.abschnitt.getrennt{border-top:1px solid var(--linie)}
.kap{color:var(--rot);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.kap::before{content:"";width:24px;height:1px;background:var(--rot)}
h2.gross{font-family:"Fraunces";font-weight:800;font-size:clamp(1.7rem,4.4vw,2.7rem);margin:0 0 12px;line-height:1.05}
.vorspann{color:#4A5165;max-width:58ch;margin:0 0 30px}
.gruende{display:grid;gap:2px;background:var(--linie);border:1px solid var(--linie);border-radius:12px;overflow:hidden}
@media(min-width:640px){.gruende{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.gruende{grid-template-columns:repeat(4,1fr)}}
.grund{background:var(--creme);padding:24px 20px}
.grund .zeichen{font-family:"Fraunces";font-weight:800;font-size:1.9rem;color:var(--rot);line-height:1;margin-bottom:10px}
.grund b{display:block;font-size:1.05rem;margin-bottom:5px}
.grund span{color:#5A6176;font-size:.94rem}

.unterreiter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.unterreiter button{background:transparent;border:1px solid #CFC5AD;color:var(--tinte);border-radius:999px;padding:9px 18px;font:inherit;font-size:.92rem;cursor:pointer}
.unterreiter button[aria-selected="true"]{background:var(--tinte);color:var(--creme);border-color:var(--tinte)}
.fachliste{display:none;flex-wrap:wrap;gap:10px}
.fachliste.aktiv{display:flex}
.fachliste a{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:13px 18px;text-decoration:none;color:var(--tinte);font-weight:500;display:flex;align-items:center;gap:10px}
.fachliste a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.fachliste a:hover{border-color:var(--rot)}

.raster3{display:grid;gap:16px}
@media(min-width:640px){.raster3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.raster3{grid-template-columns:repeat(3,1fr)}}
.person{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:22px}
.person .rolle{color:var(--rot);margin:0 0 8px}
.person h3{font-family:"Fraunces";font-weight:600;font-size:1.25rem;margin:0 0 6px}
.person p{margin:0;color:#5A6176;font-size:.94rem}

.ortsraster{display:grid;gap:12px}
@media(min-width:640px){.ortsraster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ortsraster{grid-template-columns:repeat(3,1fr)}}
.ortkarte{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:18px 20px;text-decoration:none;color:inherit;display:flex;justify-content:space-between;align-items:center;gap:12px}
.ortkarte:hover{border-color:var(--rot)}
.ortkarte b{font-family:"Fraunces";font-weight:600;font-size:1.15rem}
.ortkarte span{font-size:.86rem;color:#6A7189;text-align:right}

.terminliste{display:grid;gap:14px}
.terminkarte{display:flex;gap:20px;background:#fff;border:1px solid var(--linie);border-radius:12px;padding:20px;text-decoration:none;color:inherit;align-items:center}
.terminkarte:hover{border-color:var(--rot)}
.terminkarte .kalender{flex:0 0 auto;width:64px;text-align:center;background:var(--nacht);color:var(--creme);border-radius:8px;padding:9px 0}
.terminkarte .kalender b{display:block;font-family:"Fraunces";font-weight:800;font-size:1.6rem;line-height:1}
.terminkarte .kalender span{font-family:"IBM Plex Mono";font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.terminkarte h3{margin:0 0 4px;font-family:"Fraunces";font-weight:600;font-size:1.2rem}
.terminkarte p{margin:0;color:#5A6176;font-size:.94rem}

/* Partner */
.partnerraster{display:grid;gap:14px}
@media(min-width:560px){.partnerraster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.partnerraster{grid-template-columns:repeat(4,1fr)}}
.partner{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:22px 18px;text-align:center;min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:6px;text-decoration:none;color:inherit}
.partner:hover{border-color:var(--rot)}
.partner b{font-family:"Fraunces";font-weight:600;font-size:1.05rem}
.partner span{font-size:.85rem;color:#6A7189}

.platzhalter{border:1px dashed #BCB29A;background:rgba(255,255,255,.5);border-radius:12px;padding:20px 22px;color:#5A6176;font-size:.94rem}
.platzhalter b{color:var(--tinte)}

.formular{display:grid;gap:26px}
@media(min-width:880px){.formular{grid-template-columns:1.05fr .95fr;gap:48px}}
.feld{display:block;margin-bottom:14px}
.feld span{display:block;font-family:"IBM Plex Mono";font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#6A7189;margin-bottom:6px}
.feld input,.feld select,.feld textarea{width:100%;padding:13px 15px;border:1px solid #CFC5AD;border-radius:10px;background:#fff;font:inherit;font-size:1rem;color:var(--tinte)}
.seitenkasten{background:var(--nacht);color:var(--creme);border-radius:16px;padding:26px}
.seitenkasten h3{font-family:"Fraunces";font-weight:600;font-size:1.25rem;margin:0 0 14px}
.seitenkasten a.dl{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(246,241,228,.18);text-decoration:none;font-size:.95rem}
.seitenkasten a.dl:hover{color:var(--gold)}
.seitenkasten .tel{margin-top:20px;font-size:.95rem;color:#B7BFD4}
.seitenkasten .tel b{color:var(--creme);font-size:1.2rem;display:block;font-family:"Fraunces";font-weight:600}

.zweispalt{display:grid;gap:30px}
@media(min-width:860px){.zweispalt{grid-template-columns:1fr 1fr;gap:48px}}
.kartenplatz{background:linear-gradient(150deg,#D9DEE8,#B9C2D4);border-radius:14px;min-height:280px;display:flex;align-items:flex-end;padding:18px;color:#3A4258;font-family:"IBM Plex Mono";font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}

.fuss{background:var(--tiefe);color:#A9B1C7;padding:50px 0 36px;font-size:.95rem}
.fussgrid{display:grid;gap:28px}
@media(min-width:760px){.fussgrid{grid-template-columns:1.5fr 1fr 1fr}}
.fuss h3{color:var(--creme);font-family:"Fraunces";font-weight:600;font-size:1.1rem;margin:0 0 12px}
.fuss a{color:#A9B1C7;text-decoration:none;display:block;padding:3px 0}
.fuss a:hover{color:var(--gold)}
.notiz{padding:18px 22px;color:#6B7389;font-family:"IBM Plex Mono";font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;background:var(--tiefe)}

/* ---------- Originallogo: nur Bildmarke, auf hellem Schild ---------- */
.marke{display:flex;align-items:center;text-decoration:none}
.schild{display:inline-flex;align-items:center;justify-content:center;
  background:var(--creme);border-radius:10px;padding:9px 13px;
  box-shadow:0 8px 22px -10px rgba(5,8,20,.75);transition:transform .18s ease}
.marke:hover .schild{transform:translateY(-2px)}
.schild img{display:block;height:46px;width:auto}
@media(min-width:760px){.schild img{height:58px}}
.schild-fuss{margin-bottom:16px;padding:8px 11px}
.schild-fuss img{height:40px}
.kopfzeile{padding-top:16px;padding-bottom:14px}

/* Menue im Theme: Links statt Schaltflaechen */
.menue a{text-decoration:none}
.menue a .pfeil{pointer-events:none}

/* ================= Burger-Menü für schmale Bildschirme ================= */
.burger{display:none;align-items:center;gap:9px;background:rgba(246,241,228,.07);
  border:1px solid rgba(246,241,228,.22);color:var(--creme);border-radius:10px;
  padding:9px 13px;cursor:pointer;font-family:"Outfit",sans-serif;font-weight:500;font-size:.85rem;
  -webkit-tap-highlight-color:transparent}
.burger:hover{background:rgba(246,241,228,.14)}
.burger .striche{display:block;width:19px;height:14px;position:relative}
.burger .striche i{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;
  transition:transform .22s ease,opacity .18s ease}
.burger .striche i:nth-child(1){top:0}
.burger .striche i:nth-child(2){top:6px}
.burger .striche i:nth-child(3){top:12px}
.burger[aria-expanded="true"]{background:var(--creme);color:var(--tinte);border-color:var(--creme)}
.burger[aria-expanded="true"] .striche i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .striche i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .striche i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:760px){
  .burger{display:inline-flex}
  .kopfzeile{padding-bottom:12px}

  /* Leiste ist zunächst eingeklappt */
  .leiste{display:none;padding:0 0 16px}
  .leiste.offen{display:block;animation:klapp .22s ease}
  @keyframes klapp{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  .menue{flex-direction:column;gap:0;background:rgba(246,241,228,.05);
    border:1px solid rgba(246,241,228,.16);border-radius:12px;overflow:hidden}
  .menue>li{width:100%;border-bottom:1px solid rgba(246,241,228,.12)}
  .menue>li:last-child{border-bottom:0}
  .menue>li>a{width:100%;justify-content:space-between;padding:15px 16px;font-size:.98rem;border-radius:0}
  .menue>li>a[aria-current="true"]{background:var(--creme);color:var(--tinte)}
  .hat-unter>a::after{display:none}
  .hat-unter.aktiv-zweig>a{color:var(--gold)}

  /* Untermenü klappt innerhalb der Liste auf */
  .unter{position:static;width:100%;min-width:0;background:rgba(0,0,0,.22);border-radius:0;
    box-shadow:none;margin:0;padding:4px 0 8px;display:none;opacity:1;visibility:visible;transform:none}
  .hat-unter.offen .unter{display:block}
  .hat-unter:hover .unter{display:none}
  .hat-unter.offen:hover .unter{display:block}
  .unter a{color:var(--creme);padding:12px 16px 12px 30px;border-radius:0;font-size:.93rem}
  .unter a:hover{background:rgba(246,241,228,.1)}
  .unter a[aria-current="true"]{background:transparent;color:var(--gold);font-weight:600}
}

@media(max-width:400px){
  .burger-text{display:none}
  .burger{padding:10px 11px}
}

/* ================= Formulare ================= */
.honigtopf{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.mareg-formular .feld:last-of-type{margin-bottom:18px}
.feld.einwilligung{display:flex;align-items:flex-start;gap:11px;margin:18px 0 20px}
.feld.einwilligung input{width:19px;height:19px;flex:0 0 auto;margin-top:3px;accent-color:var(--rot)}
.einwilligungstext{font-size:.92rem;color:#4A5165;line-height:1.5}
.einwilligungstext a{color:var(--rot)}
.pflichtfeldhinweis{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:#6A7189;margin:14px 0 0}
.formularmeldung{border-radius:12px;padding:16px 20px;margin:0 0 22px;font-size:.98rem;line-height:1.5}
.formularmeldung.gut{background:#E7F0E6;border:1px solid #A9C6A4;color:#254A20}
.formularmeldung.schlecht{background:#FBE9E9;border:1px solid #E0A6A6;color:#7A1F1F}
.seitenkasten .formularmeldung.gut{background:rgba(169,198,164,.18);border-color:rgba(169,198,164,.5);color:#DCEAD9}

/* ================= Slider: Steuerung und reduzierte Bewegung ================= */
.slidersteuerung{position:relative;display:flex;justify-content:center;margin-top:18px}
.laufknopf{display:inline-flex;align-items:center;gap:9px;background:rgba(246,241,228,.07);
  border:1px solid rgba(246,241,228,.22);color:var(--creme);border-radius:999px;
  padding:8px 16px;cursor:pointer;font-family:"Outfit",sans-serif;font-size:.8rem;font-weight:500}
.laufknopf:hover{background:rgba(246,241,228,.15)}
.laufsymbol{width:9px;height:11px;background:currentColor;
  clip-path:polygon(0 0,38% 0,38% 100%,0 100%,0 0,62% 0,100% 0,100% 100%,62% 100%)}
.laufknopf[aria-pressed="false"] .laufsymbol{clip-path:polygon(0 0,100% 50%,0 100%)}

/* Angehalten – durch Knopf oder geöffnetes Infofenster */
.spurbahn.pause .spur,.spurbahn.angehalten .spur{animation-play-state:paused}

/* Der Durchlauf laeuft unabhaengig von der Systemeinstellung.
   Wer ihn nicht moechte, haelt ihn ueber den Knopf an. */
@media(prefers-reduced-motion:reduce){
  .spur{animation:lauf 46s linear infinite}
}
@media(prefers-reduced-motion:reduce) and (max-width:640px){
  .spur{animation-duration:34s}
}