/*
Theme Name: BMC
Description: Theme für beatmasterchris.com – Video-Kopf, Drops, Produktionen. Angelegt am 13.10.2026 aus dem abgenommenen Entwurf (~/Claude/bmc-homepage/entwurf).
Version: 1.0.0
Author: Beatmaster Chris
Requires PHP: 8.1
Text Domain: bmc
*/
/* Schriften liegen auf dem eigenen Server, nicht bei Google (LG München, 20.01.2022, Az. 3 O 17493/20). */
/* latin-ext */
@font-face{font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(assets/fonts/BigShouldersDisplay-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face{font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(assets/fonts/BigShouldersDisplay-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* latin-ext */
@font-face{font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/HankenGrotesk-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face{font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/HankenGrotesk-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}



:root{
  --schwarz:#000;
  --haze:#1A1033;
  --haze-2:#2A1B4F;
  --signal:#FF7A1A;
  --weiss:#fff;
  --nebel:#BDB3DA;
  --display:"Big Shoulders Display",Impact,sans-serif;
  --text:"Hanken Grotesk",system-ui,sans-serif;
  --rand:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--haze);color:var(--weiss);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* Kopfzeile */
.kopf{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;gap:32px;padding:14px var(--rand);background:linear-gradient(#000c,#0000);transition:background .3s}
.kopf.fest{background:#000e}
.kopf .logo img{height:64px;width:auto}
.kopf nav{display:flex;gap:28px;font:600 15px/1 var(--text)}
.kopf nav a{padding:8px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.kopf nav a:hover,.kopf nav a[aria-current]{border-color:var(--signal)}
.sprache{margin-left:auto;display:flex;border:1px solid #fff6;border-radius:4px;overflow:hidden}
.sprache a{color:var(--nebel);font:600 13px/1 var(--text);padding:8px 10px}
.sprache a[aria-current]{background:var(--weiss);color:var(--schwarz)}
.menue{display:none}

/* Bühne: Video */
.buehne{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000d 0%,#0009 35%,#0002 65%,#0000)}
.buehne-inhalt{position:relative;z-index:1;padding:0 var(--rand) clamp(56px,9vh,110px);max-width:1100px}
.stil{font:900 clamp(52px,min(9vw,13.5vh),150px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.stil span{display:block;animation:hoch .9s cubic-bezier(.2,.7,.2,1) both}
.stil span:nth-child(2){animation-delay:.12s}
.stil span:nth-child(3){animation-delay:.24s}
.stil span:nth-child(4){animation-delay:.36s}
@keyframes hoch{from{opacity:0;transform:translateY(40px)}}
.open{margin-top:24px;max-width:34ch;font-size:clamp(17px,1.6vw,21px);color:var(--weiss)}
.open b{font-weight:600}
.seit{margin-top:8px;color:var(--nebel);font-size:15px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.knopf{display:inline-block;padding:15px 26px;border-radius:4px;font:600 16px/1 var(--text);transition:transform .15s,background .2s}
.knopf:active{transform:scale(.98)}
.knopf.voll{background:var(--signal);color:var(--schwarz)}
.knopf.voll:hover{background:#ff9447}
.knopf.rand{border:1.5px solid var(--weiss)}
.knopf.rand:hover{background:#fff1}
.ton{position:absolute;z-index:2;right:var(--rand);bottom:clamp(56px,9vh,110px);display:flex;align-items:center;gap:8px;background:#0008;border:1px solid #fff5;color:var(--weiss);border-radius:40px;padding:10px 16px;font:600 14px/1 var(--text);cursor:pointer}
.ton[hidden]{display:none}
.ton svg{width:18px;height:18px}

/* Drops (Platz der früheren Termine) */
.drops{position:relative;padding:clamp(72px,10vw,128px) 0;overflow:hidden;background:var(--haze)}
.drops::before{content:"";position:absolute;inset:0;background:url(assets/img/drops-bg.jpg) center/cover;filter:grayscale(1) contrast(1.1);opacity:.28;mix-blend-mode:luminosity}
.drops>*{position:relative}
.abschnitt-kopf{padding:0 var(--rand);display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap}
h2{font:900 clamp(44px,6vw,84px)/.9 var(--display);text-transform:uppercase}
.unter{margin-top:14px;color:var(--nebel);max-width:52ch}
.mehr{font-weight:600;border-bottom:2px solid var(--signal);padding-bottom:4px;white-space:nowrap}
.reihe{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(180px,19vw,250px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand);padding:40px var(--rand) 12px;scrollbar-width:thin;scrollbar-color:var(--haze-2) transparent}
.drop{scroll-snap-align:start}
.drop .bild{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--haze-2)}
.drop img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.9);transition:filter .35s}
.drop .bild::after{content:"";position:absolute;inset:0;background:var(--haze-2);mix-blend-mode:color;transition:opacity .35s}
.drop:hover img,.drop:focus-visible img{filter:none}
.drop:hover .bild::after,.drop:focus-visible .bild::after{opacity:0}
.drop .play{position:absolute;z-index:1;left:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:var(--signal);display:grid;place-items:center}
.drop .play svg{width:16px;height:16px;margin-left:3px}
.drop p{margin-top:12px;font:700 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.belege{margin:48px var(--rand) 0;padding-top:28px;border-top:1px solid #fff2;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 48px;color:var(--nebel);font-size:15px}
.belege strong{display:block;color:var(--weiss);font:700 26px/1.1 var(--display);text-transform:uppercase;margin-bottom:4px}

/* Produktion */
.produktion{background:var(--schwarz);padding:clamp(72px,10vw,128px) 0}
/* Termine (19.10.2026) */
.termine{background:var(--schwarz);padding:clamp(64px,9vw,112px) 0}
.termin-liste{list-style:none;margin:36px var(--rand) 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.termin-liste li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:18px;align-items:center;padding:16px 18px;border:1px solid #ffffff1f;border-radius:6px;background:#ffffff08}
.termin-liste time{grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;padding:8px 6px;border-radius:4px;background:var(--signal);color:var(--schwarz);line-height:1}
.termin-liste .tag{font:700 13px/1 var(--text);text-transform:uppercase;letter-spacing:.06em}
.termin-liste .datum{font:900 26px/1.05 var(--display);margin-top:4px}
.termin-liste .club{font:800 24px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.termin-liste .ort{color:var(--nebel);font-size:15px}
.cover{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,23vw,300px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rand);padding:40px var(--rand) 12px;scrollbar-width:thin;scrollbar-color:var(--haze-2) transparent}
.titel{scroll-snap-align:start}
.titel img{aspect-ratio:1/1;width:100%;height:auto;object-fit:cover;border-radius:4px;background:var(--haze-2)}
.titel .jahr{margin-top:16px;color:var(--signal);font:700 18px/1 var(--display)}
.titel h3{margin-top:6px;font:600 18px/1.3 var(--text)}
.titel p{color:var(--nebel);font-size:15px;line-height:1.45}

/* Fuß */
.fuss{background:#000;border-top:1px solid #fff1;padding:40px var(--rand);display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px;color:var(--nebel);font-size:14px}
.fuss img{height:52px;width:auto}
.fuss nav{display:flex;gap:24px}
.fuss nav a:hover{color:var(--weiss)}
.fuss .rechts{margin-left:auto}

@media (max-width:820px){
  .kopf{gap:16px}
  .kopf nav{display:none;position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;gap:4px;padding:96px var(--rand) 48px;background:var(--haze)}
  .kopf.offen nav{display:flex}
  /* Offenes Handymenü zu 60 % durchsichtig (Christian, 19.10.2026). Die Unschärfe hält die
     Menüpunkte über dem Video lesbar; sie sitzt am nav, nicht an .kopf, weil backdrop-filter
     an .kopf das fixierte nav auf die Kopfzeile beschneiden würde. */
  .kopf.offen nav{background:rgba(26,16,51,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .kopf.offen{background:transparent}
  .kopf nav a{font:900 44px/1.15 var(--display);text-transform:uppercase;border:0;padding:4px 0}
  .kopf nav a[aria-current]{color:var(--signal)}
  .kopf .logo img{height:52px}
  .menue{display:grid;place-items:center;width:44px;height:44px;background:none;border:1px solid #fff6;border-radius:4px;color:#fff}
  .ton{top:96px;bottom:auto}
  .buehne::after{background:linear-gradient(0deg,#0009 0%,#000b 45%,#0005 100%)}
}
@media (prefers-reduced-motion:reduce){
  .stil span{animation:none}
  html{scroll-behavior:auto}
}

/* Unterseiten (Über mich, Kontakt, Drops, Mixtapes, Bilder, Impressum).
   Die alten Seiten bestehen aus Standard-Blöcken: Absätze, Überschriften,
   Spalten, Bilder, Galerien, Videos – die bekommen hier ihr Aussehen. */
.seite{padding:140px var(--rand) clamp(72px,10vw,128px);max-width:1200px;margin:0 auto}
.seite h1{font:900 clamp(48px,7vw,96px)/.9 var(--display);text-transform:uppercase;margin-bottom:40px}
.inhalt>*+*{margin-top:1.1em}
.inhalt h2,.inhalt h3{font:900 clamp(28px,3.4vw,44px)/1 var(--display);text-transform:uppercase;margin-top:1.6em}
.inhalt p{max-width:70ch;color:var(--nebel)}
.inhalt strong{color:var(--weiss)}
.inhalt a{color:var(--weiss);border-bottom:1px solid var(--signal)}
.inhalt .wp-block-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.inhalt .wp-block-gallery,.inhalt .blocks-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:0;list-style:none}
.inhalt .wp-block-gallery figure,.inhalt .wp-block-image{margin:0}
.inhalt .wp-block-gallery.has-nested-images figure.wp-block-image{width:100%!important;max-width:none!important;margin:0!important;flex:none!important}
.inhalt .wp-block-gallery img{width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.inhalt img{height:auto;border-radius:4px}
.inhalt video{width:100%;border-radius:6px;background:#000}
.inhalt figcaption{font-size:14px;color:var(--nebel);margin-top:6px}
.inhalt .wpcf7 input,.inhalt .wpcf7 textarea,.inhalt .wpcf7 select{width:100%;max-width:560px;background:#ffffff0d;border:1px solid #fff6;border-radius:4px;color:var(--weiss);font:400 16px/1.4 var(--text);padding:12px 14px}
.inhalt .wpcf7 input[type=submit]{width:auto;background:var(--signal);color:var(--schwarz);border:0;font-weight:600;padding:15px 26px;cursor:pointer}

/* Alle Drops: Raster statt Reihe */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px 16px;margin-top:40px}

/* Drop abspielen */
.drop-fenster{border:0;padding:0;background:#000;border-radius:8px;max-width:min(92vw,720px);width:100%}
.drop-fenster::backdrop{background:#000c}
.drop-fenster video{display:block;width:100%;max-height:80vh;background:#000}
.drop-fenster .zu{position:absolute;top:8px;right:8px;z-index:1;width:40px;height:40px;border-radius:50%;border:0;background:#000a;color:#fff;font-size:22px;cursor:pointer}
button.drop{background:none;border:0;padding:0;color:inherit;text-align:left;cursor:pointer;font:inherit}

/* Hintergrund aller Seiten: das Clubvideo, fest hinter dem Inhalt.
   14.10.2026, Christian: "nehm den laser raus und bau überall ein video ein".
   Ein einziges Video für die ganze Seite: Auf der Startseite ist es oben klar
   (Kopf), Drops und Produktionen gleiten auf halbdurchsichtigen Flächen darüber.
   Auf Unterseiten abgedunkelt und leicht weich, damit Text lesbar bleibt. */
.buehne-hg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--haze)}
/* Standbilder kommen als Variablen mit ?v=Version aus header.php (19.10.2026: das iPhone zeigte beim
   Start ein altes Standbild, weil Bilder ein Jahr im Zwischenspeicher bleiben dürfen). */
.home .buehne-hg{background:#000 var(--poster-quer) center/cover}
@media (max-width:820px) and (orientation:portrait){.home .buehne-hg{background-image:var(--poster-hoch)}}
.buehne-hg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body:not(.home) .buehne-hg video{inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);filter:blur(4px) brightness(.75) saturate(1.15)}

/* Farbverlauf über dem Video bleibt (Christian, 14.10.2026: "der farb verlauf bleibt"):
   Nebel und Licht in Rot, Violett und weißem Dunst, treibt langsam. */
.buehne-hg i{position:absolute;z-index:1;width:65vmax;height:65vmax;border-radius:50%;filter:blur(60px);opacity:.6;mix-blend-mode:screen}
.buehne-hg i:nth-of-type(1){background:radial-gradient(circle,#c4122f 0,transparent 60%);top:-22vmax;left:-18vmax;animation:hg-treib1 28s ease-in-out infinite alternate}
.buehne-hg i:nth-of-type(2){background:radial-gradient(circle,#6b2bd9 0,transparent 60%);bottom:-26vmax;right:-20vmax;animation:hg-treib2 34s ease-in-out infinite alternate}
.buehne-hg i:nth-of-type(3){background:radial-gradient(circle,#fff 0,transparent 55%);top:35%;left:35%;width:45vmax;height:45vmax;opacity:.15;animation:hg-treib3 40s ease-in-out infinite alternate}
@keyframes hg-treib1{to{transform:translate(25vw,20vh) scale(1.15)}}
@keyframes hg-treib2{to{transform:translate(-30vw,-15vh) scale(.9)}}
@keyframes hg-treib3{to{transform:translate(-25vw,15vh) scale(1.2)}}
@media (prefers-reduced-motion:reduce){.buehne-hg i{animation:none}}
/* Startseite: Video nur im Kopf, scrollt mit weg, kein Farbverlauf darüber –
   so wie sie abgenommen war. Hintergrundvideo und Verlauf gelten nur für Unterseiten. */
.home .buehne-hg{position:absolute;bottom:auto;height:100svh}
.home .buehne-hg i{display:none}
.home .buehne::after{background:linear-gradient(90deg,#000d 0%,#0009 35%,#0002 65%,#0000),linear-gradient(0deg,var(--haze) 0%,#0000 22%)}
@media (max-width:820px){.home .buehne::after{background:linear-gradient(0deg,var(--haze) 0%,#000c 45%,#0006 100%)}}
/* Unterseiten im Look des Drops-Bereichs (19.10.2026, Christian zum Drops-Bereich: "die farbe ist ok"):
   Violett mit schwachem Schwarz-Weiß-Clubfoto, kein Farbverlauf mehr. */
body:not(.home) .buehne-hg i{display:none}
body:not(.home) .buehne-hg::before{content:"";position:absolute;inset:0;background:var(--hg-bild) center/cover;filter:grayscale(1) contrast(1.1);opacity:.22;mix-blend-mode:luminosity}
body{isolation:isolate}

/* Bilder-Seite: lebendiges Raster statt gleicher Kacheln (14.10.2026).
   Jedes 7. Bild groß (2x2), jedes 4. breit; Lücken füllt der Browser selbst (dense). */
.inhalt .bmc-galerie{display:grid!important;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(110px,12vw,190px);grid-auto-flow:dense;gap:10px;margin-top:28px}
.inhalt .bmc-galerie figure.wp-block-image{width:auto!important;height:100%;margin:0!important}
/* Takt 8: ein 2x2, ein breites, sechs einzelne = 12 Zellen = genau zwei Reihen à 6.
   Bei 48 Bildern (alle der alten Galerie, Christian 19.10.2026) geht das Raster ohne Lücke auf;
   der alte Takt 7 (11 Zellen) ließ unten zwei Felder frei. Kommen Bilder dazu: in Achterschritten. */
.inhalt .bmc-galerie figure:nth-child(8n+1){grid-column:span 2;grid-row:span 2}
.inhalt .bmc-galerie figure:nth-child(8n+5){grid-column:span 2}
.inhalt .bmc-galerie a,.inhalt .bmc-galerie img{display:block;width:100%!important;height:100%!important;aspect-ratio:auto!important;border:0}
.inhalt .bmc-galerie img{object-fit:cover;border-radius:4px;transition:transform .4s,filter .4s}
.inhalt .bmc-galerie a:hover img{transform:scale(1.03);filter:brightness(1.1)}
.inhalt .bmc-galerie figure{overflow:hidden;border-radius:4px}
@media (max-width:820px){.inhalt .bmc-galerie{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.inhalt .bmc-galerie figure:nth-child(8n+5){grid-column:span 2;grid-row:span 2}}

/* Bild im Vollbild */
.bild-fenster{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh}
.bild-fenster::backdrop{background:#000e}
.bild-fenster img{position:absolute;inset:0;margin:auto;max-width:92vw;max-height:88vh;object-fit:contain;border-radius:4px}
.bild-fenster button{position:absolute;z-index:1;border:0;background:#0009;color:#fff;width:48px;height:48px;border-radius:50%;font-size:24px;cursor:pointer}
.bild-fenster .zu{top:16px;right:16px}
.bild-fenster .zurueck{left:16px;top:50%;transform:translateY(-50%)}
.bild-fenster .vor{right:16px;top:50%;transform:translateY(-50%)}

/* Über mich: Referenzen als eigene, zentrierte Tafel (19.10.2026).
   Inhalt unverändert aus der alten Seite, nur in Bereiche geordnet. */
.page .seite h1{text-align:center}
.inhalt .bmc-tafel{max-width:960px;margin:0 auto;padding:clamp(28px,5vw,56px);background:#0d0819cc;border:1px solid #ffffff1a;border-radius:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center}
.inhalt .bmc-tafel h2{margin:1.4em 0 .5em;color:var(--signal)}
.inhalt .bmc-tafel h2:first-child{margin-top:0}
.inhalt .bmc-tafel+.bmc-tafel{margin-top:32px}
.inhalt .bmc-tafel p{margin-left:auto;margin-right:auto}
.inhalt .bmc-tafel .wpcf7{max-width:560px;margin:24px auto 0;text-align:left}
.inhalt .bmc-tafel .wpcf7 input,.inhalt .bmc-tafel .wpcf7 textarea,.inhalt .bmc-tafel .wpcf7 select{max-width:none}
.inhalt .bmc-tafel .wpcf7 textarea{height:140px}
.inhalt .bmc-tafel .wpcf7 input[type=submit]{display:block;margin:8px auto 0}
.inhalt .bmc-tafel .wpcf7-acceptance{font-size:14px;color:var(--nebel)}
.inhalt .bmc-tafel .wpcf7-acceptance input{width:auto;margin-right:8px}
/* Datumsfeld auf dem iPhone (Christian, 19.10.2026 mit Bildschirmfoto: "HIER IST EIN FEHLER"):
   Safari zeichnet input[type=date] mit eigener Mindestbreite, eigener Höhe und mittigem Text,
   dadurch ragte das Feld rechts über die Tafel. Eigene Darstellung abschalten und an die
   anderen Felder angleichen. */
.inhalt .wpcf7 input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;height:calc(1.4em + 26px);text-align:left}
.inhalt .wpcf7 input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.inhalt .wpcf7 input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7}
.inhalt .bmc-liste{list-style:none;padding:0;margin:0;color:var(--weiss);line-height:1.9}
.inhalt .bmc-liste li{break-inside:avoid}

/* Profile: gläserne Knöpfe mit Liniensymbol (19.10.2026, "mach es neumodisch") */
.bmc-social{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.bmc-social a{display:flex;align-items:center;gap:10px;padding:12px 20px 12px 16px;border-radius:40px;border:1px solid #ffffff26;background:#ffffff0d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--weiss);font:600 15px/1 var(--text);transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}
.bmc-social a:hover,.bmc-social a:focus-visible{border-color:var(--signal);background:#ff7a1a1f;box-shadow:0 0 24px #ff7a1a40;transform:translateY(-2px)}
.bmc-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.inhalt .bmc-social a{border-bottom:1px solid #ffffff26}
.bmc-social.klein{margin:0;gap:6px}
.bmc-social.klein a{padding:9px;border-radius:50%}
.bmc-social.klein svg{width:18px;height:18px}
.fuss .bmc-social{margin-left:auto}
.fuss .rechts{margin-left:0}

/* Alle Drops: Texte zentriert (19.10.2026), Kacheln oben bündig auch bei zweizeiligen Namen */
.post-type-archive-drop .seite h1,.post-type-archive-drop .seite>.unter{text-align:center;margin-left:auto;margin-right:auto}
button.drop{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
.raster{align-items:start}
.raster .drop p{text-align:center}

/* Mixtapes-Tafel: Cover, Hinweis, zwei Knöpfe (19.10.2026) */
.inhalt .bmc-cover{max-width:420px;margin:8px auto 0!important}
.inhalt .bmc-cover img{width:100%;border-radius:6px;box-shadow:0 20px 50px #0008}
.inhalt .bmc-hinweis{margin-top:14px;font-size:14px;letter-spacing:.04em;color:var(--nebel)}
.inhalt .bmc-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.inhalt .bmc-knoepfe a{display:inline-block;padding:15px 26px;border-radius:4px;font:600 16px/1 var(--text);border:0}
.inhalt .knopf-voll a{background:var(--signal);color:var(--schwarz)}
.inhalt .knopf-voll a:hover{background:#ff9447}
.inhalt .knopf-rand a{border:1.5px solid var(--weiss);color:var(--weiss);background:none}
.inhalt .knopf-rand a:hover{background:#fff1}
/* Fußzeile immer unten, auch bei kurzen Seiten */
body{min-height:100svh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}

/* Rechtsseiten (Impressum, Datenschutz): kleinere Überschriften, lange Wörter dürfen umbrechen (19.10.2026) */
.inhalt .bmc-recht h2{font-size:clamp(22px,2.6vw,30px);line-height:1.1;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.inhalt .bmc-tafel{overflow-wrap:break-word}

/* Bilder in der Tafel: etwas breiter als die Texttafeln, Raster füllt die Tafel */
.inhalt .bmc-galerie-tafel{max-width:1200px}
.inhalt .bmc-galerie-tafel .bmc-galerie{margin-top:24px}

/* Kopfvideo der Startseite in den Farbton der Seite gezogen, Variante B (19.10.2026, Christian: "B") */
.home .buehne-hg video{filter:saturate(.6) contrast(1.05)}
.home .buehne-hg::after{content:"";position:absolute;inset:0;background:#4b2a9a;mix-blend-mode:color;opacity:.55;pointer-events:none}

/* Bio-Tafel auf "Über mich": Fließtext gut lesbar, mittig */
.inhalt .bmc-bio p{max-width:62ch;font-size:clamp(16px,1.3vw,18px);line-height:1.75;color:#e6e0f5}
.inhalt .bmc-bio p+p{margin-top:1em}

/* Unterüberschriften in Tafeln (Radio, Events …) eine Stufe kleiner als "Bio"/"Referenzen" */
.inhalt .bmc-tafel h3{font:900 clamp(22px,2.4vw,30px)/1 var(--display);text-transform:uppercase;color:var(--signal);margin:1.3em 0 .45em}
.inhalt .bmc-tafel h2+h3{margin-top:.9em}
.inhalt .bmc-tafel h2#referenzen{color:var(--weiss)}
.inhalt .bmc-bio h2{color:var(--weiss)}

/* ---- Prüfung vom 19.10.2026 ---- */
html{scroll-padding-top:110px}
.wer{font:600 15px/1.2 var(--text);letter-spacing:.06em;color:var(--nebel);margin-bottom:14px}
.belege-kurz{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:6px 28px;font-size:14px;color:var(--nebel);max-width:900px}
.belege-kurz strong{color:var(--weiss);font-weight:600}
.ton.pause{bottom:clamp(56px,9vh,110px)}
.ton.pause .i-play{display:none}
.ton.pause[aria-pressed="true"] .i-play{display:inline}
.ton.pause[aria-pressed="true"] .i-pause{display:none}
.ton.pause svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ton.pause[aria-pressed="true"] svg path.i-play{fill:currentColor}
.bmc-falle{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Tippflächen mindestens 44 px */
.fuss nav a{display:inline-block;padding:12px 2px}
.sprache a{display:inline-block;padding:14px 12px}
.bmc-social.klein a{padding:13px}
@media (max-width:820px){.ton.pause{top:96px;bottom:auto}.belege-kurz{font-size:13px}}
.inhalt .bmc-formhinweis{font-size:14px;color:var(--nebel);margin:12px 0 4px}

/* Produktionen: Links zu SoundCloud/YouTube (20.10.2026) */
.cover .cover-link{display:block;border-radius:4px;overflow:hidden}
.cover .cover-link img{transition:transform .4s,filter .4s}
.cover .cover-link:hover img{transform:scale(1.03);filter:brightness(1.1)}
.cover .hoeren{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cover .hoeren a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid #fff4;border-radius:999px;font-size:14px;font-weight:600;color:var(--weiss)}
.cover .hoeren a:hover{border-color:var(--signal);color:var(--signal)}
.cover .hoeren svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   Kästen und Knöpfe, Art C "Flyerstreifen" (20.10.2026)
   Christian: "das es nicht so auffällt das es mit Claude gebaut worden ist" – "es geht nur um
   die kästen und button". Aus vier gezeigten Arten gewählt: "ART C aber trotzdem das
   durchsichtige behalten" (Nebenknöpfe bleiben durchsichtig mit weißem Rand).
   Weg: abgerundete Glas-Tafeln, Pillen, Glas-Knöpfe. Neu: Inhalt frei auf dem Foto,
   eckige Knöpfe in Plakatschrift, Termine als Flyerstreifen. Farben/Schriften unverändert.
   ===================================================================== */

/* Tafeln bleiben die durchscheinenden Kästen von vorher: Christian nach dem Ausrollen ohne Kasten
   "wo sind die kästen in der bio hin?", "alles andere sollte so bleiben", "wo ist der kasten?".
   Gemeint war mit "das durchsichtige behalten" der Kasten, nicht nur die Knöpfe. */

/* Knöpfe: eckig, Plakatschrift; Hauptknopf orange gefüllt, Nebenknöpfe durchsichtig mit Rand */
.knopf,.inhalt .bmc-knoepfe a,.inhalt .wpcf7 input[type=submit]{border-radius:0;padding:14px 22px;
  font:900 22px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.knopf.rand,.inhalt .knopf-rand a{border:2px solid var(--weiss);background:transparent}
.knopf.rand:hover,.inhalt .knopf-rand a:hover{background:#ffffff1a}
.inhalt .bmc-knoepfe{justify-content:center}

/* Kleine Links (Alle Drops, Remix anfragen, SoundCloud/YouTube): orange Plakatschrift, keine Pillen */
.mehr{border:0;padding:0;font:800 20px/1 var(--display);text-transform:uppercase;color:var(--signal)}
.mehr:hover{color:var(--weiss)}
.cover .hoeren{gap:18px}
.cover .hoeren a{min-height:0;padding:4px 0;border:0;border-radius:0;font:800 18px/1 var(--display);text-transform:uppercase;color:var(--signal)}
.cover .hoeren a:hover{color:var(--weiss)}
.cover .hoeren svg{display:none}

/* Profile auf der Kontaktseite: Textlinks mit Symbol statt Glas-Pillen */
.bmc-social:not(.klein){justify-content:center;gap:10px 28px}
.bmc-social:not(.klein) a{padding:6px 0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  font:800 20px/1 var(--display);text-transform:uppercase}
.bmc-social:not(.klein) a:hover,.bmc-social:not(.klein) a:focus-visible{background:none;box-shadow:none;transform:none;color:var(--signal)}
.inhalt .bmc-social:not(.klein) a{border-bottom:0}

/* Kleinteile ohne Rundung */
.sprache,.menue,.ton{border-radius:0}

/* Termine als Flyerstreifen: Datum im orangen Block, Club groß daneben */
.termin-liste{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px}
/* Farben wie vorher (Christian: "bei den terminen hällst du die farben so wie sie sind aber die art des kastens ist ok") */
.termin-liste li{column-gap:0;padding:0;border:1px solid #ffffff1f;border-radius:0;background:#ffffff08;align-items:stretch}
.termin-liste time{border-radius:0;width:88px;min-width:88px;padding:10px 8px}
.termin-liste .tag{font:800 14px/1 var(--display);letter-spacing:.06em}
.termin-liste .datum{font-size:28px}
.termin-liste .club{padding:12px 16px 0;font-size:28px;line-height:1}
.termin-liste .ort{padding:2px 16px 12px;font-size:14px}

/* Strich unter dem Menü mit Lichtstreif auf der aktiven Seite (20.10.2026).
   Christian wählte aus fünf gezeigten Animationen "5" (Lichtstreif). Gold war kurz drin, dann:
   "lass orange wie vorher". Nur am Rechner; das Handymenü hat keinen Strich. */
@media (min-width:821px){
  .kopf nav a{position:relative;border-bottom:0}
  .kopf nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--signal);transform:scaleX(0);transition:transform .3s}
  .kopf nav a:hover::after,.kopf nav a:focus-visible::after{transform:scaleX(1)}
  .kopf nav a[aria-current]::after{transform:scaleX(1);background:linear-gradient(90deg,var(--signal) 0 40%,#fff 50%,var(--signal) 60% 100%);background-size:250% 100%;animation:bmc-schein 2.6s linear infinite}
}
@keyframes bmc-schein{from{background-position:100% 0}to{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){.kopf nav a[aria-current]::after{animation:none;background:var(--signal)}}

/* Handy: Startbereich rutschte unter Kopfzeile (Christian 20.10.2026 mit iPhone-Bildschirmfoto:
   "auf dem handy ist das logo und das menü verrutscht"). Der Bereich ist min. bildschirmhoch und
   unten ausgerichtet; wird der Inhalt höher als der Bildschirm (größere Knöpfe, iPhone-Schrift),
   beginnt er bei 0 und liegt unter der festen Kopfzeile. Fester Abstand oben, Video-Knopf darin,
   Knöpfe etwas kleiner, damit sie zu zweit in eine Zeile passen. */
@media (max-width:820px){
  .buehne-inhalt{padding-top:150px}
  .ton.pause{top:92px}
  .buehne .knoepfe{gap:10px}
  .buehne .knopf{font-size:19px;padding:12px 16px}
}