:root{ --ink:#0a0a0b; --panel:#141416; --panel-2:#1d1d20; --line:#2c2c30; --text:#ffffff; --muted:#a9a9b0; --accent:#ff2737; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--ink);color:var(--text); font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;letter-spacing:.02em;margin:0} h2{font-size:clamp(2.4rem,6vw,4.2rem);line-height:.95} a{color:var(--accent)} img{max-width:100%;display:block} /* Zugänglichkeit */ .skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.9rem 1.4rem;z-index:999} .skip:focus{left:0} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wrap{width:min(1200px,92vw);margin-inline:auto} section{padding:clamp(5rem,11vw,9rem) 0;position:relative} /* Kopfzeile */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:100; display:flex;align-items:center;justify-content:space-between;gap:1.5rem; padding:1rem clamp(1rem,4vw,2.5rem); background:rgba(10,10,11,.72);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .logo{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--text)} .logo-ph{ width:120px;height:55px;border:1px solid var(--line);background:var(--panel-2); display:grid;place-items:center;font-size:.6rem;color:var(--muted); text-align:center;letter-spacing:.1em;flex-shrink:0 } nav ul{display:flex;gap:clamp(1rem,2.4vw,2.2rem);list-style:none;margin:0;padding:0} nav a{ color:var(--text);text-decoration:none;font-size:.8rem;letter-spacing:.16em; text-transform:uppercase;padding:.5rem .2rem;border-bottom:2px solid transparent } nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--accent)} .nav-toggle{display:none;background:none;border:1px solid var(--line);color:#fff;padding:.6rem .9rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase} /* Sprachauswahl */ .lang{display:flex;align-items:center;gap:.15rem;border:1px solid var(--line);padding:.25rem} .lang button{ background:none;border:0;color:var(--muted);cursor:pointer; font-family:inherit;font-size:.72rem;letter-spacing:.14em;padding:.45rem .7rem } .lang button:hover{color:#fff} .lang button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:600} .header-right{display:flex;align-items:center;gap:1.5rem} /* Social-Leiste am Seitenrand */ .social-rail{ position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90; display:flex;flex-direction:column;gap:1px; background:var(--line);border:1px solid var(--line);border-right:0 } .social-rail a{ width:48px;height:48px;display:grid;place-items:center; background:var(--panel);color:var(--text);transition:background .2s,color .2s } .social-rail a:hover{background:var(--accent);color:#fff} .social-rail svg{width:20px;height:20px;fill:currentColor} /* Zurück nach oben */ .to-top{ position:fixed;right:1.5rem;bottom:1.5rem;z-index:95; width:52px;height:52px;display:grid;place-items:center; background:var(--accent);color:#fff;border:0;cursor:pointer; opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .3s,transform .3s,visibility .3s,background .2s } .to-top[data-visible="true"]{opacity:1;visibility:visible;transform:translateY(0)} .to-top:hover{background:#fff;color:var(--ink)} .to-top svg{width:20px;height:20px;fill:currentColor} /* Held */ .hero{ min-height:100svh;display:grid;align-items:end;padding-bottom:clamp(3rem,8vw,6rem); overflow:hidden;isolation:isolate } .hero-media{ position:absolute;inset:-12% 0 -12% 0;z-index:-2; background:linear-gradient(135deg,#1a1a1d,#0a0a0b 60%,#232326); display:grid;place-items:center;color:#4a4a52;font-size:.85rem;letter-spacing:.2em; will-change:transform } .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--ink) 4%,rgba(10,10,11,.35) 55%,rgba(10,10,11,.7))} .hero .eyebrow{color:var(--accent);letter-spacing:.34em;text-transform:uppercase;font-size:.78rem;margin-bottom:1rem} .hero h1{font-size:clamp(4rem,15vw,11rem);line-height:.82} .hero p{max-width:46ch;color:var(--muted);margin:1.4rem 0 2rem} .btn{ display:inline-block;background:var(--accent);color:#fff;text-decoration:none; padding:1rem 2.2rem;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;font-weight:600 } .btn:hover{background:#fff;color:var(--ink)} .btn--ghost{background:transparent;border:1px solid var(--line);color:var(--text)} .btn--ghost:hover{border-color:var(--accent);background:transparent;color:var(--text)} .section-head{display:flex;align-items:baseline;gap:1.5rem;margin-bottom:3rem;flex-wrap:wrap} .section-head .num{color:var(--accent);font-size:.8rem;letter-spacing:.24em} .lead{color:var(--muted);max-width:60ch} /* Scroll-Hinweis im Titelbild */ .scroll-hint{ position:absolute;bottom:2.5rem;left:50%;width:1px;height:70px; background:linear-gradient(to bottom,transparent,var(--accent)); animation:hint 2.4s ease-in-out infinite } @keyframes hint{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} /* Bildschirmfüllende Hintergrundebenen */ .has-bg{overflow:hidden;isolation:isolate} .bg-layer{ position:absolute;inset:-20% 0;z-index:-2;pointer-events:none; background:var(--panel-2); display:grid;place-items:center; color:#3a3a42;font-size:.8rem;letter-spacing:.22em;text-align:center; opacity:.16;will-change:transform } .has-bg::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(ellipse at center,rgba(10,10,11,.55),rgba(10,10,11,.92)) } .has-bg>.wrap,.has-bg>.wrap.bio{position:relative;z-index:1} /* Player – über die volle Breite */ .player-band{ padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:linear-gradient(120deg,#17171a,#0f0f11 55%,#1b1215); position:relative;overflow:hidden } .player-band::before{ content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent) } .player-band::after{ content:"";position:absolute;top:-30%;right:-10%;width:55vw;height:160%;z-index:0; background:radial-gradient(circle,rgba(255,39,55,.14),transparent 62%);pointer-events:none } .player{ position:relative;z-index:1;width:min(1200px,92vw);margin-inline:auto; padding:clamp(2rem,5vw,3.5rem) 0; display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:center } .now-flag{ display:inline-flex;align-items:center;gap:.6rem;color:var(--accent); font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:.6rem } .now-flag::before{ content:"";width:8px;height:8px;border-radius:50%;background:var(--accent); animation:pulse 2s ease-in-out infinite } @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} .cover{width:clamp(110px,14vw,170px);aspect-ratio:1;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;color:#4a4a52;font-size:.7rem;letter-spacing:.14em;flex-shrink:0} .track-title{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1} .track-meta{color:var(--muted);font-size:.9rem;margin-bottom:1.4rem} .controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap} .ctrl{width:48px;height:48px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;display:grid;place-items:center;cursor:pointer;font-size:1rem} .ctrl:hover{border-color:var(--accent)} .ctrl--play{background:var(--accent);border-color:var(--accent);width:58px;height:58px} .progress{flex:1;min-width:140px;height:4px;background:rgba(255,255,255,.12);position:relative;cursor:pointer} .progress span{position:absolute;inset:0 62% 0 0;background:var(--accent)} .progress::after{content:"";position:absolute;left:38%;top:50%;width:12px;height:12px;background:var(--accent);border-radius:50%;transform:translate(-50%,-50%)} .time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem} .player-cta{display:flex;flex-direction:column;gap:.75rem;align-items:stretch} /* Diskografie */ .disco{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .release.is-hidden{display:none} .release{ background:var(--panel);display:grid;grid-template-columns:64px 1fr auto auto; gap:1.5rem;align-items:center;padding:1.2rem 1.5rem;transition:background .2s } .release:hover{background:var(--panel-2)} .release .art{width:64px;height:64px;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;font-size:.55rem;color:#4a4a52} .release h3{font-size:1.5rem} .release .sub{color:var(--muted);font-size:.85rem} .year{color:var(--muted);font-variant-numeric:tabular-nums} .spotify{ display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text); border:1px solid var(--line);padding:.6rem 1.1rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase } .spotify:hover{border-color:var(--accent);color:var(--accent)} /* Events */ .event{border-bottom:1px solid var(--line)} .event.is-hidden{display:none} .event-head{ width:100%;background:none;border:0;color:inherit;font-family:inherit;text-align:left; display:grid;grid-template-columns:110px 1fr auto auto;gap:clamp(1rem,3vw,2rem); align-items:center;padding:1.6rem 0;cursor:pointer } .event-head:hover .ev-title{color:var(--accent)} .date{text-align:center;border:1px solid var(--line);padding:.7rem;transition:border-color .2s} .event-head:hover .date{border-color:var(--accent)} .date .d{font-family:"Bebas Neue",sans-serif;font-size:2.3rem;line-height:1;display:block} .date .m{color:var(--accent);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase} .ev-title{font-family:"Bebas Neue",sans-serif;font-size:1.6rem;letter-spacing:.02em;transition:color .2s} .venue{color:var(--muted);font-size:.9rem} .ev-status{ font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); border:1px solid var(--line);padding:.5rem 1rem;white-space:nowrap } .ev-status--soldout{color:var(--accent);border-color:var(--accent)} .chev{ width:38px;height:38px;border:1px solid var(--line);display:grid;place-items:center; color:var(--muted);transition:transform .3s,border-color .2s,color .2s;flex-shrink:0 } .event-head[aria-expanded="true"] .chev{transform:rotate(180deg);border-color:var(--accent);color:var(--accent)} .chev svg{width:14px;height:14px;fill:currentColor} /* Detailbereich */ .event-detail{display:none;padding:0 0 2.5rem} .event-detail.is-open{display:block} .detail-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start} .flyer{ aspect-ratio:3/4;background:var(--panel-2);border:1px solid var(--line); display:grid;place-items:center;color:#4a4a52;font-size:.7rem;letter-spacing:.14em;text-align:center;padding:1rem } .detail-body h4{font-family:"Bebas Neue",sans-serif;font-size:1.3rem;letter-spacing:.1em;margin:0 0 .8rem;color:var(--accent)} .detail-body p{color:var(--muted);margin:0 0 1.8rem;max-width:62ch} .meta-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1.8rem} .meta-list div{background:var(--panel);display:grid;grid-template-columns:130px 1fr;gap:1rem;padding:.9rem 1.2rem} .meta-list dt{color:var(--muted);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;margin:0} .meta-list dd{margin:0;font-size:.95rem} .ticket-row{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap} .boxoffice{ display:inline-block;border:1px dashed var(--line);color:var(--muted); padding:1rem 2rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase } /* Alle anzeigen */ .events-more{display:flex;justify-content:center;margin-top:3rem} .events-more button{ background:none;border:1px solid var(--line);color:var(--text);cursor:pointer; font-family:inherit;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase; padding:1rem 2.6rem;display:inline-flex;align-items:center;gap:.8rem } .events-more button:hover{border-color:var(--accent);color:var(--accent)} .events-more .count{color:var(--accent)} /* Biografie */ .bio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center} .bio-img{aspect-ratio:3/4;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;color:#4a4a52;font-size:.75rem;letter-spacing:.16em;will-change:transform} .bio p+p{margin-top:1.2rem} /* Pressekit */ .press{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:center} .press ul{color:var(--muted);font-size:.92rem;padding-left:1.1rem;margin:1rem 0 0} /* Fußzeile */ footer{border-top:1px solid var(--line);padding:4rem 0 2.5rem;background:var(--panel)} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem} footer h3{font-size:1.1rem;letter-spacing:.18em;margin-bottom:1rem} footer ul{list-style:none;padding:0;margin:0} footer li{margin-bottom:.5rem} footer a{color:var(--muted);text-decoration:none;font-size:.9rem} footer a:hover{color:var(--accent)} .copy{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} @media(max-width:860px){ .logo-ph{width:100px;height:46px} nav ul{display:none} .nav-toggle{display:block} nav[data-open="true"] ul{display:flex;flex-direction:column;position:absolute;top:100%;right:0;left:0;background:var(--ink);border-bottom:1px solid var(--line);padding:1.5rem 2rem;gap:1rem} .player,.bio,.press,.foot-grid{grid-template-columns:1fr} /* Mediaplayer mobil zentrieren: Cover, Titel, Untertitel, Buttons. */ .player{text-align:center;justify-items:center} .player .cover{margin-left:auto;margin-right:auto} .player .now-flag{justify-content:center} .player .controls{justify-content:center} .player .player-cta{justify-content:center;align-items:center} .player-cta{flex-direction:row;flex-wrap:wrap} .social-rail{ top:auto;bottom:0;left:0;right:0;transform:none; flex-direction:row;justify-content:center;border:0;border-top:1px solid var(--line) } .social-rail a{flex:1;max-width:none;height:44px} .social-rail svg{width:18px;height:18px} footer{padding-bottom:6rem} .to-top{right:1rem;bottom:4.2rem;width:46px;height:46px} .release{grid-template-columns:56px 1fr;row-gap:.8rem} .event-head{grid-template-columns:80px 1fr auto;row-gap:.8rem} .event-head .ev-status{grid-column:2/4} .detail-grid{grid-template-columns:1fr} .flyer{max-width:280px} .meta-list div{grid-template-columns:1fr;gap:.2rem} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} .hero-media,.bio-img,.bg-layer{transform:none!important} .to-top{transform:none!important} } /* ===================================================================== Korrekturen für den Einsatz im Mixtape-Theme. Dieser Block lädt nach dem Parent-CSS und stellt die im Entwurf gewünschten Werte wieder her, die Mixtape sonst überschreibt. ===================================================================== */ /* Überschriften und Titel wieder weiß (Mixtape setzt sie dunkel). Höhere Spezifität über #main, damit die Parent-Regeln überschrieben werden. */ #main h1, #main h2, #main h3, #main .section-head h2, #main .release h3, #main .track-title, #main .ev-title, #main .bio-text, #main .detail-body h4{ color:var(--text)!important; } /* Sektions-Hintergrund voll deckend in Panel-Farbe, ohne durchscheinende Struktur und ohne den abdunkelnden Verlauf darüber. */ #main .has-bg{ background:var(--panel); } #main .has-bg > .bg-layer{ display:none!important; /* die bewegte Struktur entfällt */ } #main .has-bg::after{ content:none!important; /* der abdunkelnde Verlauf entfällt */ } /* Fortschrittsbalken für den echten Audio-Player: der Füllstand wird jetzt per JS über width gesteuert, nicht über das feste inset des Entwurfs. */ #main .controls[data-audio-player] .progress span{ inset:0 auto 0 0; /* rechts nicht mehr fixiert */ width:0; /* Startwert; JS setzt die Breite */ } #main .controls[data-audio-player] .progress::after{ content:none; /* der feste Attrappen-Punkt entfällt */ } /* ===================================================================== Nachträgliche Korrekturen (Footer, Mixtape-Reste). ===================================================================== */ /* 1. Footer-Überschriften: im Entwurf standen sie weiß; hier in der roten Akzentfarbe, damit sie sich klar abheben. Der Footer liegt außerhalb von #main, deshalb ein eigener, spezifischer Selektor mit body.home davor. */ body.home footer h3, body footer .foot-grid h3{ color:var(--accent)!important; } /* Footer-Links und Copy-Text sichtbar halten (Mixtape kann sie dunkel setzen) */ body footer a{ color:var(--muted)!important; } body footer a:hover{ color:var(--accent)!important; } body footer .copy, body footer .copy span{ color:var(--muted)!important; } /* 2. Legal-Menü: das WordPress-Menü inline als Linkliste mit ·-Trennern. */ body footer .copy .legal-menu{ display:inline; margin:0; padding:0; list-style:none; } body footer .copy .legal-menu li{ display:inline; list-style:none; } body footer .copy .legal-menu li + li::before{ content:" · "; color:var(--muted); } body footer .copy .legal-menu a{ color:var(--muted)!important; text-decoration:none; } body footer .copy .legal-menu a:hover{ color:var(--accent)!important; } /* 3. + 5. Mixtape-Reste auf der Startseite entfernen: Mixtapes eigener Footer (enthält die Widgets „Archive/Kategorien") und Mixtapes „nach oben"-Button. Klassennamen aus der konkreten Installation abgelesen. */ /* 3. + 5. Mixtape-Reste entfernen. Laut Seitenquelltext bleiben leere