/* Das PortAl Formidabel – Gestaltung der Webseite.
   Farben und Schriften stehen oben als Variablen. Im Editor erscheinen die Farben als
   „Seitenfarben“; alles lässt sich dort zusätzlich unter „Gestaltung“ oder je Element ändern. */
:root{
  --nacht:#0a0f0b; --nacht2:#0f1711; --karte:#152018; --karte2:#1b2a1f; --linie:#28402d;
  --text:#eef4ea; --grau:#a7b8a8;
  --gruen:#63e04a; --gruen2:#2fb53a; --gruen-tief:#12501c; --gold:#f5c542;
}
:root{
  --verlauf:linear-gradient(100deg,#63e04a 0%,#b9e64a 55%,#f5c542 100%);
  --schrift-titel:"Righteous", "Segoe UI", system-ui, sans-serif;
  --schrift-text:"Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --rb-akzent:var(--gruen); --rb-akzent-text:#08160a; --rb-karte:var(--karte); --rb-linie:var(--linie);
  --rb-radius:16px; --rb-breite:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;color:var(--text);font:18px/1.65 var(--schrift-text);-webkit-font-smoothing:antialiased;
  background:var(--nacht) radial-gradient(1300px 560px at 50% -160px,rgba(47,181,58,.34),transparent 72%) no-repeat}
img{max-width:100%;height:auto}
a{color:var(--gruen);text-underline-offset:3px}
a:hover{color:#a6f594}
h1,h2,h3,h4{font-family:var(--schrift-titel);font-weight:400;line-height:1.14;margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(2.2rem,5.2vw,3.8rem)}
h2{font-size:clamp(1.55rem,3vw,2.2rem)}
h3{font-size:1.2rem;line-height:1.25}
h4{font-size:1rem}
p{margin:0 0 1em}
ul{padding-left:1.2em}
main{display:block}
::selection{background:var(--gruen);color:#08160a}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Kleine Textbausteine */
.dachzeile{font:700 .78rem/1.3 var(--schrift-text);letter-spacing:.16em;text-transform:uppercase;color:var(--gruen);margin-bottom:.8em}
.einleitung{font-size:1.18em;color:#d5e0d3;max-width:720px}
.hinweis{background:var(--karte);border:1px solid var(--linie);border-left:4px solid var(--gold);border-radius:10px;padding:12px 16px;color:var(--grau);font-size:.95em}
.klein{font-size:.86em;color:var(--grau)}
.quelle{color:var(--grau);font-size:.92em}
.rolle{font-weight:600;color:var(--gold)}
.zurueck{font-weight:600;text-decoration:none}
.zeile-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:.6em}
.zeile-kopf p{margin:0}
.zeile-kopf a{font-weight:600;text-decoration:none}
.knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.6em}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(10,15,11,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.marke{display:block;line-height:0;flex:none}
.marke img{height:46px;width:auto;display:block}
.menue{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.menue a{color:var(--text);text-decoration:none;font-weight:600;font-size:.96rem;padding:8px 13px;border-radius:999px;transition:background .2s,color .2s}
.menue a:hover{background:var(--karte2);color:#fff}
.menue a.aktiv{background:var(--gruen);color:#08160a}
.menueknopf{display:none;background:none;border:0;width:46px;height:46px;padding:11px;cursor:pointer}
.menueknopf span{display:block;height:2px;background:var(--text);margin:5px 0;border-radius:2px;transition:transform .25s,opacity .25s}
.menueknopf[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menueknopf[aria-expanded=true] span:nth-child(2){opacity:0}
.menueknopf[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Abschnitte */
.rb-abschnitt{padding:68px 0}
.rb-abschnitt.eng{padding:36px 0}
.rb-abschnitt.rb-hell{background:var(--nacht2);border-block:1px solid var(--linie)}
.rb-abschnitt.rb-hell .rb-karte{background:var(--karte)}
.kopfbild{padding:64px 0 34px}
.kopfbild h1{max-width:900px}
.kopfbild + .rb-abschnitt{padding-top:30px}
.held{padding:70px 0 64px}
.held h1{font-size:clamp(2.5rem,6vw,4.4rem)}
.held h1 em,.kopfbild h1 em{font-style:normal;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.zahlen{padding:0;background:var(--nacht2);border-block:1px solid var(--linie)}
.zahlenreihe{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:26px 0}
.zahlenreihe div{display:flex;flex-direction:column;gap:2px}
.zahlenreihe strong{font:400 1.7rem/1.15 var(--schrift-titel);color:var(--gruen)}
.zahlenreihe span{color:var(--grau);font-size:.9rem;line-height:1.4}
.aufruf{text-align:center;background:linear-gradient(115deg,#0f3d17,#1f7a2a 55%,#8a7a12);border-top:1px solid var(--linie)}
.aufruf .einleitung{color:#eaf7e6;margin-left:auto;margin-right:auto}
.aufruf .rb-knopf{background:#fff;color:#0f3d17!important}

/* Startseite: Inhalt links, „News & History“ rechts (wie auf der bisherigen Seite) */
.rb-spalten.mit-leiste{grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr);gap:56px}
.leiste{background:var(--karte);border:1px solid var(--linie);border-radius:var(--rb-radius);padding:26px 26px 22px}
.leiste h2{font-size:1.45rem;padding-bottom:.55em;margin-bottom:.2em;border-bottom:2px solid var(--gruen)}
.meldung{padding:14px 0;border-bottom:1px solid var(--linie)}
.meldung .dachzeile{margin-bottom:.35em;letter-spacing:.08em}
.meldung h3{font:600 1.02rem/1.35 var(--schrift-text);margin:0 0 .2em}
.meldung h3 a{color:var(--text);text-decoration:none}
.meldung h3 a:hover{color:var(--gruen)}
.meldung .quelle{margin:0;font-size:.86em}
.leiste > p:last-child{margin:18px 0 0}

/* Knöpfe */
.rb-knopf{box-shadow:0 10px 30px -12px rgba(99,224,74,.7)}
.rb-knopf.rb-rahmen{box-shadow:none;border-color:#3d5c43}
.rb-knopf.rb-rahmen:hover{border-color:var(--gruen);color:var(--gruen)!important;filter:none}

/* Bilder */
.rb-bild img{box-shadow:0 20px 50px -18px rgba(0,0,0,.8)}
.buehne img{border:1px solid var(--linie);box-shadow:0 30px 80px -24px rgba(47,181,58,.55),0 20px 50px -18px rgba(0,0,0,.8)}
.cover img{max-width:400px;width:100%;margin:0 auto;box-shadow:0 30px 80px -24px rgba(245,197,66,.4),0 20px 50px -18px rgba(0,0,0,.8)}
.portrait img{max-height:560px;width:auto;margin:0 auto}
.person h2{margin-bottom:.15em}
.person ul{list-style:none;padding:0}
.person li{position:relative;padding:5px 0 5px 28px}
.person li::before{content:"♪";position:absolute;left:4px;color:var(--gold)}

/* Karten */
.rb-karte{transition:transform .25s,border-color .25s}
.rb-karte:hover{transform:translateY(-3px);border-color:var(--gruen2)}
.rb-karte > a:first-child{display:block;margin:-20px -20px 14px;overflow:hidden}
.rb-karte > a:first-child img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 22%;border-radius:0;transition:transform .5s}
.rb-karte:hover > a:first-child img{transform:scale(1.04)}
.rb-karte > .rb-video:first-child,.rb-karte > .rb-galerie:first-child{margin:-20px -20px 14px}
.rb-karte > .rb-video:first-child .rb-video-start{border-radius:0}
.rb-karte h3 a{color:inherit;text-decoration:none}
.rb-karte h3 a:hover{color:var(--gruen)}
.rb-karte p{color:#cfdacd;font-size:.95em}
.rb-karten.videos{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.rb-karten.alben{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.rb-karten.presse{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));align-items:start}
.rb-karten.presse .rb-karte > a:first-child img{object-position:top;aspect-ratio:3/4}
.rb-karten.presse .rb-galerie{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px;padding:6px;background:var(--nacht)}
.rb-karten.presse .rb-karte:has(> .rb-galerie){grid-column:1/-1}
.rb-karten.presse .rb-galerie a{border-radius:4px}
.rb-karten.presse .dachzeile{margin-bottom:.4em}
.kontaktkarte{padding:32px}
.kontaktkarte:hover{transform:none;border-color:var(--linie)}
.kontaktkarte .rb-knopf{margin:0 8px 8px 0}

/* Galerie */
.rb-galerie{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}

/* Termine */
.jahr{font-size:clamp(2rem,4vw,3rem);color:var(--gruen);margin:.4em 0 .4em}
.rb-termin{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:18px 22px;margin:0 0 12px;grid-template-columns:210px 1fr}
.rb-termin-datum{font-family:var(--schrift-titel);font-weight:400;font-size:1.02rem;line-height:1.3}
.rb-termin h3{font-size:1.15rem}
.rb-termin p{opacity:1;color:#cfdacd;font-size:.96em}
.rb-termin .termin-bild{display:inline-block;margin:10px 8px 0 0}
.rb-termin .termin-bild img{max-height:160px;width:auto;border-radius:8px;display:block}
.rb-termin .rb-video{max-width:420px;margin-top:10px}
.rb-termin.vorbei{opacity:.55}
.rb-termin.vorbei .rb-termin-datum{color:var(--grau)}
.rb-termin.vorbei .rb-termin-datum::after{content:"vorbei";display:block;font:600 .72rem/1.8 var(--schrift-text);letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}
.rb-termin.demnaechst{border-color:var(--gruen2);box-shadow:0 0 0 1px var(--gruen2),0 16px 40px -24px rgba(99,224,74,.7)}
.rb-termin.demnaechst .rb-termin-datum::after{content:"demnächst";display:table;margin-top:6px;background:var(--gruen);color:#08160a;font:700 .68rem/1.9 var(--schrift-text);letter-spacing:.08em;text-transform:uppercase;padding:0 9px;border-radius:999px}
.naechste-termine .rb-termin p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Songliste */
.songliste{columns:2 300px;column-gap:48px;list-style:none;padding:0;margin:0 0 2.2em}
.songliste li{break-inside:avoid;padding:7px 0;border-bottom:1px dotted var(--linie);font-size:.97em}
.songliste + h2,.hinweis + h2{margin-top:.2em}
.songsuche{position:sticky;top:75px;z-index:5;display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--nacht);padding:12px 0 14px;margin-bottom:14px;border-bottom:1px solid var(--linie)}
.songsuche input{flex:1 1 280px;font:inherit;color:var(--text);padding:12px 20px;border:1.5px solid var(--linie);border-radius:999px;background:var(--karte)}
.songsuche input::placeholder{color:var(--grau)}
.songsuche input:focus{outline:none;border-color:var(--gruen)}
.songsuche .sprung{display:flex;gap:6px;flex-wrap:wrap}
.songsuche .sprung a{font-size:.85rem;padding:4px 11px;border-radius:999px;background:var(--karte);border:1px solid var(--linie);text-decoration:none;color:var(--text)}
.songsuche .sprung a:hover{border-color:var(--gruen);color:var(--gruen)}
.songsuche .treffer{color:var(--grau);font-size:.9rem}

/* Rechtstexte */
.rechtstext h2{margin-top:.3em}
.rechtstext h3{margin-top:1.5em}
.rechtstext p{color:#cfdacd;max-width:860px}

/* Fuß */
.fuss{background:var(--nacht2);border-top:1px solid var(--linie);color:var(--grau);padding:54px 0 20px;font-size:.95rem}
.fuss-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.fuss h4{color:var(--text);margin-bottom:.7em}
.fuss a{color:var(--text);text-decoration:none}
.fuss a:hover{color:var(--gruen)}
.fuss p{line-height:1.9}
.fuss-logo{height:60px;width:auto}
.fuss-unten{border-top:1px solid var(--linie);margin-top:34px;padding-top:18px;font-size:.85rem}
.fuss-unten p{margin:0}

@media (max-width:1080px){
  .menueknopf{display:block}
  .menue{position:fixed;inset:74px 0 auto 0;flex-direction:column;flex-wrap:nowrap;background:var(--nacht2);padding:12px 20px 22px;display:none;border-bottom:1px solid var(--linie);max-height:calc(100vh - 74px);overflow:auto}
  .menue.offen{display:flex}
  .menue a{font-size:1.05rem;padding:11px 14px}
  .fuss-in{grid-template-columns:1fr 1fr}
  .rb-spalten.mit-leiste{gap:36px}
}
@media (max-width:760px){
  body{font-size:17px}
  .kopf-in{min-height:64px}
  .marke img{height:38px}
  .menue{inset:64px 0 auto 0;max-height:calc(100vh - 64px)}
  .rb-abschnitt{padding:46px 0}
  .held{padding:40px 0 44px}
  .kopfbild{padding:44px 0 24px}
  .zahlen{padding:0}
  .zahlenreihe{grid-template-columns:1fr 1fr;gap:18px;padding:22px 0}
  .zahlenreihe strong{font-size:1.35rem}
  .rb-spalten.mit-leiste{grid-template-columns:1fr}
  .rb-termin{grid-template-columns:1fr;padding:14px 16px}
  .person > div{order:2}
  .person > .rb-bild{order:1}
  .songsuche{top:65px}
  .fuss-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}