/* ===================================================================== KAI HARTWIG — Gestaltung Leitbild: das Cue Sheet. Wer Musik für Bild sucht, kennt dieses Dokument — nüchtern gesetzt, Zahlen in Schreibmaschinenschrift, Haarlinien statt Kästen, alles auf Lesbarkeit im schnellen Durchgehen ausgelegt. Genau das ist die Bildsprache hier. Zwei Schriften, drei Rollen: Bebas Neue Überschriften — und ebenso alle Daten: Dauer, BPM, Tonart, Jahr, Anzahl, Marginalien, Schaltflächen. Schmal, in Versalien gesetzt und gesperrt trägt sie die Zahlen genauso gut wie die Überschriften und hält die Seite aus einem Guss. DM Sans Fliesstext Laut wird genau eine Sache: die Wellenform. Alles andere bleibt ruhig, damit sie es sein kann. Die Akzentfarbe kommt aus den Einstellungen und wird als --accent im -Element gesetzt (siehe index.php). ===================================================================== */ :root { /* Tinte statt Schwarz: minimal kühler Unterton, damit die Flächen Tiefe bekommen und nicht wie ausgeschaltete Bildschirme wirken. */ --bg: #0B0C0F; --bg2: #121419; --bg3: #171A20; --bg4: #1F232B; --line: rgba(255,255,255,0.07); --line-h: rgba(255,255,255,0.16); --text: #EFEDE7; --text2: #9CA0A8; --text3: #62666F; --accent: #2FD4C4; --accent-h:#4EE0D2; --accent-glow: rgba(47,212,196,0.15); /* Die Auszeichnungsschrift für alles Datenhafte. */ --utility: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif; --nav-h: 64px; --player-h: 88px; --radius: 4px; --radius-lg: 6px; --tr: 0.2s ease; } /* Einheitliche Auszeichnung für alles Zahlenhafte. Bebas ist schmal gebaut, deshalb bekommt sie hier durchweg etwas mehr Sperrung und eine Spur mehr Grad als eine Fliesstextschrift an gleicher Stelle. */ .daten, .titel-meta, .titel-dauer, .album-meta, .gruppe-anzahl, .lib-unterzeile, .player-zeit, .abschnitt-nummer, .fuss, .kontakt-label, .feld label, .lizenz-label, .spezial-label { font-family: var(--utility); font-variant-numeric: tabular-nums; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } /* Ein einzelner, sehr flacher Lichtschein hinter der Kopfleiste. Er gibt der Seite oben eine Richtung, ohne als Farbverlauf aufzufallen. */ body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 420px; z-index: -1; background: radial-gradient(120% 100% at 50% 0%, var(--accent-glow) 0%, transparent 62%); opacity: 0.5; pointer-events: none; } body { background: var(--bg); color: var(--text); font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.65; min-height: 100vh; padding-top: var(--nav-h); padding-bottom: var(--player-h); overflow-x: clip; } h1, h2, h3, h4 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.03em; line-height: 1.08; font-weight: 400; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; } .nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Feines Korn über der ganzen Seite — nimmt Flächen die Sterilität. */ .korn { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: 0.32; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-size: 180px; } /* ===================== KOPFLEISTE ===================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: var(--nav-h); display: flex; align-items: center; gap: 2rem; padding: 0 1.75rem; background: rgba(11,12,15,0.86); backdrop-filter: blur(22px) saturate(140%); border-bottom: 1px solid var(--line); } /* Wortmarke: Name gross, Rolle kleiner und ruhiger daneben. Beides in einer Zeile, deshalb baseline-Ausrichtung statt center — sonst schwimmt die Rolle im Verhältnis zum Namen. */ .logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 0.4em; line-height: 1; } .logo-name { white-space: nowrap; } .logo b { font-weight: 400; color: var(--accent); } .logo-rolle { font-size: 0.66em; letter-spacing: 0.14em; color: var(--text2); white-space: nowrap; } .logo-strich { color: var(--text3); margin: 0 0.55em; font-weight: 400; } .nav-links { display: flex; gap: 1.5rem; margin-left: auto; align-items: center; } .nav-links a { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text2); transition: color var(--tr); position: relative; } .nav-links a:hover { color: var(--text); } .nav-links a.aktiv { color: var(--accent); } .nav-links a.aktiv::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -7px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .nav-burger { display: none; margin-left: auto; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; padding: 0.25rem 0.5rem; line-height: 1; } /* Schmale Fenster: Wortmarke etwas kleiner, damit sie neben dem Menüknopf Platz behält. Unter 400 Pixel — alte iPhones, geteilte Fenster — entfällt die Rolle ganz; der Name allein muss reichen. */ @media (max-width: 620px) { .logo { font-size: 1.25rem; } .logo-rolle { font-size: 0.62em; letter-spacing: 0.1em; } .logo-strich { margin: 0 0.4em; } } @media (max-width: 400px) { .logo-rolle { display: none; } } @media (max-width: 860px) { .nav-burger { display: block; } .nav-links { position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg2); border-bottom: 1px solid var(--line); padding: 0.5rem 0; margin: 0; transform: translateY(-120%); transition: transform 0.25s ease; } .nav-links.offen { transform: translateY(0); } .nav-links a { padding: 0.85rem 1.5rem; font-size: 1.15rem; } .nav-links a.aktiv::after { display: none; } } /* ===================== KOPFBAND ===================== Ein Bild über die volle Breite, das nach unten in den Hintergrund ausläuft. Der Verlauf ist der eigentliche Trick: unten geht das Bild nicht mit einer Kante zu Ende, sondern löst sich auf — dadurch wirkt es als Teil der Seite und nicht als aufgeklebter Kopf. Zwei Verläufe übereinander: einer von unten, der ins Seitenschwarz führt, und ein zweiter von links, der dem Text Grund gibt, ohne das Bild gleichmässig abzudunkeln. */ .kopfband { position: relative; height: clamp(300px, 46vh, 520px); display: flex; align-items: flex-end; overflow: hidden; margin-bottom: -2rem; } /* Bewusst ein Bildelement und keine CSS-Hintergrundangabe: Eine Adresse in einem style-Attribut liesse sich nicht sicher maskieren. Der Browser wandelt maskierte Anführungszeichen vor dem Lesen des CSS zurück — ein Wert wie /bild.jpg'); background:url(fremd) bräche damit aus der Anweisung aus. Im src-Attribut kann das nicht passieren. */ .kopfband-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: scale(1.02); /* verhindert helle Ränder beim Skalieren */ } .kopfband-verlauf { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, rgba(11,12,15,0.72) 34%, rgba(11,12,15,0.25) 72%, rgba(11,12,15,0.45) 100%), linear-gradient(to right, rgba(11,12,15,0.78) 0%, rgba(11,12,15,0.25) 52%, transparent 80%); } .kopfband-inhalt { position: relative; width: 100%; padding-bottom: 3rem; } .kopfband-marke { display: flex; align-items: center; gap: 0.7rem; font-family: var(--utility); font-size: 0.86rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; } .kopfband-marke::before { content: ''; width: 28px; height: 1px; background: var(--accent); flex-shrink: 0; } .kopfband-name { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3.2rem, 9vw, 6.5rem); line-height: 0.92; letter-spacing: 0.02em; text-shadow: 0 4px 40px rgba(0,0,0,0.6); } /* Keine Breitenbegrenzung: die Zeile soll die Seitenbreite nutzen und erst am Rand umbrechen. Bei 1,05 rem passen die 130 Zeichen deiner Zeile ab etwa 1100 Pixel Fensterbreite in eine einzige Zeile. Damit sie auch über hellen Stellen des Bildes lesbar bleibt, liegt ein etwas kräftigerer Schatten darunter — der Verlauf von links reicht auf der vollen Breite nicht mehr überall hin. */ .kopfband-zeile { margin-top: 0.85rem; max-width: none; color: var(--text2); font-size: 1.05rem; text-shadow: 0 2px 20px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.6); } /* Mit Kopfband braucht der erste Abschnitt oben weniger Luft — sonst klafft eine Lücke zwischen Bild und erster Überschrift. */ .kopfband + main .abschnitt:first-of-type { padding-top: 3.5rem; } @media (max-width: 620px) { .kopfband { height: clamp(240px, 38vh, 340px); margin-bottom: -1rem; } .kopfband-inhalt { padding-bottom: 2rem; } .kopfband-verlauf { background: linear-gradient(to top, var(--bg) 0%, rgba(11,12,15,0.78) 40%, rgba(11,12,15,0.35) 100%); } } /* ===================== ABSCHNITTE ===================== */ /* Ein Abschnitt beginnt wie ein Blatt im Aktenordner: kurze Marke, grosse Überschrift, darunter eine Haarlinie über die ganze Breite. Diese Linie ist das durchgehende Ordnungselement der Seite — sie taucht bei den Albumgruppen wieder auf. */ .abschnitt { padding: 5.5rem 0; border-top: 1px solid var(--line); } .abschnitt:first-of-type { border-top: none; padding-top: 4rem; } .abschnitt-kopf { margin-bottom: 2.75rem; } .abschnitt-nummer { display: flex; align-items: center; gap: 0.7rem; font-size: 0.84rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.85rem; } .abschnitt-nummer::before { content: ''; width: 28px; height: 1px; background: var(--accent); flex-shrink: 0; } .abschnitt-kopf h2 { font-size: clamp(2.6rem, 6.5vw, 4.2rem); letter-spacing: 0.015em; } .abschnitt-kopf p { color: var(--text2); margin-top: 0.75rem; font-size: 1.02rem; max-width: 62ch; } /* Die Linie sitzt am Kopf, nicht am Inhalt — so bleibt der Abstand gleich, egal ob darunter Titel, Karten oder ein Formular folgen. */ .abschnitt-kopf::after { content: ''; display: block; height: 1px; background: var(--line); margin-top: 1.75rem; } /* ===================== ÜBER MICH ===================== */ .about { display: grid; grid-template-columns: 320px 1fr; gap: 3rem; align-items: start; } /* Das Portrait bekommt einen um wenige Pixel versetzten Rahmen in der Akzentfarbe — ein ruhiges Erkennungszeichen, das an einen Passepartout-Schnitt erinnert und nichts kostet. */ .about-bild { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg2); aspect-ratio: 4 / 5; } .about-bild::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); pointer-events: none; } .about { position: relative; } .about > .about-bild-rahmen { display: none; } .about-bild img { width: 100%; height: 100%; object-fit: cover; } .about-bild-leer { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 4rem; color: rgba(255,255,255,0.09); background: linear-gradient(140deg, var(--bg3), var(--bg2)); } .about-text p { margin-bottom: 1rem; color: var(--text); } .about-text p:last-child { margin-bottom: 0; } .about-text a { color: var(--accent); } /* Schwerpunkte statt Kennzahlen — eine Reihe kleiner Schilder unter dem Text. Sie sollen gelesen, nicht angeklickt werden, deshalb ohne Verhalten beim Darüberfahren. */ .about-spezial { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line); } .spezial-label { display: block; font-size: 0.86rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 0.85rem; } .spezial-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; } .spezial-liste li { padding: 0.45rem 0.9rem; background: transparent; border: 1px solid var(--line); border-radius: 2px; font-family: var(--utility); font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); transition: border-color var(--tr), color var(--tr); } .spezial-liste li:hover { border-color: var(--line-h); color: var(--text); } .about-social { display: flex; gap: 0.6rem; margin-top: 1.75rem; flex-wrap: wrap; } .about-social a { padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 100px; font-size: 0.85rem; color: var(--text2); transition: all var(--tr); } .about-social a:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 800px) { .about { grid-template-columns: 1fr; gap: 2rem; } .about-bild { max-width: 280px; } } /* ===================== LIBRARIES ===================== Kein Kartenraster mehr, sondern eine Reihe kleiner Bänder. Die Bilder kommen in ganz unterschiedlichen Massen herein — Logos im Quadrat, breite Kopfgrafiken, hochkant abfotografierte Plattenhüllen. Ein festes Seitenverhältnis am Rahmen plus object-fit: cover schneidet jedes davon mittig auf dasselbe Band zu, ohne es zu verzerren. Wer ein Motiv hat, das nicht in der Mitte sitzt, kann es vorher selbst beschneiden — hier wird nur zugeschnitten, nie gestaucht. Entsättigt und leicht abgedunkelt treten die Bänder in den Hintergrund und wirken als Reihe ruhig; erst beim Darüberfahren kommt die Farbe. */ .lib-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 1.4rem; row-gap: 1.9rem; } .lib-band { position: relative; display: block; aspect-ratio: 5 / 2; border-radius: var(--radius); overflow: hidden; background: var(--bg3); border: 1px solid var(--line); transition: border-color var(--tr), transform var(--tr); } .lib-band img { width: 100%; height: 100%; object-fit: cover; /* schneidet zu, statt zu verzerren */ object-position: center; filter: grayscale(1) contrast(0.92) brightness(0.72); transition: filter 0.25s ease, transform 0.4s ease; } /* Ohne Bild: der Name selbst trägt das Band. */ .lib-band-leer { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; text-align: center; background: linear-gradient(135deg, var(--bg3), var(--bg4)); font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; letter-spacing: 0.08em; color: var(--text3); transition: color var(--tr); } /* Namenszug unten im Band — bleibt auch über hellen Bildern lesbar, weil darunter ein Verlauf liegt. Lange Namen wie "Warner Chappell Production Music" brechen auf eine zweite Zeile um, statt mit drei Pünktchen abgeschnitten zu werden. */ .lib-band-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 0.7rem 0.5rem; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.06em; line-height: 1.08; color: var(--text); pointer-events: none; /* höchstens zwei Zeilen; darüber hinaus wird gekürzt */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .lib-band-leer + .lib-band-name { display: none; } a.lib-band:hover, a.lib-band:focus-visible { border-color: var(--accent); transform: translateY(-2px); } a.lib-band:hover img, a.lib-band:focus-visible img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.04); } a.lib-band:hover .lib-band-leer, a.lib-band:focus-visible .lib-band-leer { color: var(--accent); } /* Das kleine Zeichen für "führt nach draussen" erscheint erst bei Berührung — sonst flimmert die ruhige Reihe. */ a.lib-band::after { content: '↗'; position: absolute; top: 0.35rem; right: 0.5rem; font-size: 0.8rem; color: var(--text); opacity: 0; transition: opacity var(--tr); text-shadow: 0 1px 6px rgba(0,0,0,0.8); } a.lib-band:hover::after, a.lib-band:focus-visible::after { opacity: 0.9; } /* Rolle und Zeitraum unter dem Band, klein und zurückhaltend. Bricht um, statt abgeschnitten zu werden — "Composer, Producer · 2016 – 2021" passt in einer Zeile sonst nicht. */ .lib-eintrag { min-width: 0; } .lib-unterzeile { margin-top: 0.5rem; font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; color: var(--text3); overflow-wrap: anywhere; } @media (max-width: 620px) { .lib-reihe { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); column-gap: 0.9rem; row-gap: 1.5rem; } .lib-band-name { font-size: 0.9rem; padding: 1.3rem 0.55rem 0.4rem; } .lib-unterzeile { font-size: 0.68rem; } } /* ===================== TITEL-LISTE MIT WELLENFORM ===================== */ .titelliste { border-top: 1px solid var(--line); } .titel { position: relative; display: grid; grid-template-columns: 44px minmax(150px, 1.15fr) minmax(180px, 2fr) auto; align-items: center; gap: 1.25rem; padding: 1.05rem 0.9rem; border-bottom: 1px solid var(--line); transition: background var(--tr); } .titel:hover { background: rgba(255,255,255,0.022); } .titel.spielt { background: rgba(255,255,255,0.035); } /* Der laufende Titel bekommt links eine Marke statt nur einer helleren Fläche — im schnellen Überfliegen findet man die Stelle sofort. */ .titel.spielt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); } .titel-play { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-h); background: transparent; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--tr); flex-shrink: 0; padding: 0; } .titel-play:hover { background: var(--accent); border-color: var(--accent); color: #08211f; } .titel.spielt .titel-play { background: var(--accent); border-color: var(--accent); color: #08211f; } .titel-play svg { width: 13px; height: 13px; fill: currentColor; } /* Kleines Bild vor dem Titel — nur dort, wo jeder Titel ein eigenes hat (Best of). Die Rasterspalte kommt über die Klasse "mit-bild" dazu, damit Listen ohne Bilder unverändert bleiben. */ .titel.mit-bild { grid-template-columns: 44px 46px minmax(140px, 1.15fr) minmax(180px, 2fr) auto; } .titel-bild { width: 46px; height: 46px; border-radius: var(--radius); overflow: hidden; background: var(--bg3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .titel-bild img { width: 100%; height: 100%; object-fit: cover; } .titel-bild span { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 0.05em; color: var(--text3); } .titel-info { min-width: 0; } .titel-name { font-weight: 500; font-size: 1.02rem; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Die Nummer gehört zu den Daten, nicht zum Titel. */ .titel-name .nr { font-family: var(--utility); font-size: 0.95em; letter-spacing: 0.06em; color: var(--text3); margin-right: 0.3em; } .titel.spielt .titel-name { color: var(--accent); } .titel-sub { font-size: 0.8rem; color: var(--text3); margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Wellenform je Titel — Klick springt an die Stelle. */ .titel-welle { position: relative; height: 52px; cursor: pointer; min-width: 0; } .titel-welle canvas { width: 100%; height: 100%; display: block; } .titel-rechts { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } .titel-meta { font-size: 0.84rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); white-space: nowrap; } .titel-dauer { font-size: 1rem; color: var(--text2); letter-spacing: 0.06em; } .titel.spielt .titel-dauer { color: var(--accent); } .tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; } .tag { font-size: 0.7rem; letter-spacing: 0.05em; padding: 0.1rem 0.5rem; background: var(--bg3); border: 1px solid var(--line); border-radius: 100px; color: var(--text3); } @media (max-width: 820px) { .titel { grid-template-columns: 40px 1fr auto; gap: 0.85rem; } .titel.mit-bild { grid-template-columns: 40px 42px 1fr auto; gap: 0.7rem; } .titel-bild { width: 42px; height: 42px; } .titel-welle { display: none; } } @media (max-width: 460px) { .titel.mit-bild { grid-template-columns: 40px 1fr auto; } .titel-bild { display: none; } /* auf sehr schmalen Geräten hat es keinen Platz */ } /* ===================== VARIANTEN ===================== Fassungen eines Titels: 30-Sekünder, Underscore, ohne Schlagzeug. Sie stehen eingerückt unter dem Haupttitel, hinter einem Schalter. Eingerückt und mit einer senkrechten Linie, damit auf einen Blick klar ist, dass sie zum Titel darüber gehören und nicht eigene Stücke sind. */ .var-schalter { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.6rem; background: transparent; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; font-family: var(--utility); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); transition: border-color var(--tr), color var(--tr); white-space: nowrap; } .var-schalter:hover { border-color: var(--line-h); color: var(--text); } .var-schalter.offen { border-color: var(--accent); color: var(--accent); } .var-zahl { color: var(--accent); } .var-pfeil { font-size: 0.7em; transition: transform var(--tr); } .var-schalter.offen .var-pfeil { transform: rotate(180deg); } .varianten { margin: 0 0 0 2.75rem; border-left: 1px solid var(--line); padding-left: 1.25rem; } .varianten[hidden] { display: none; } /* Die Fassungen selbst treten zurück: kleiner, ruhiger, ohne eigene Trennlinie am Ende — sie sind Beiwerk zum Titel darüber. */ .varianten .titel { padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.04); grid-template-columns: 36px minmax(120px, 1.15fr) minmax(150px, 2fr) auto; gap: 1rem; } .varianten .titel:last-child { border-bottom: none; } .varianten .titel-play { width: 30px; height: 30px; } .varianten .titel-play svg { width: 10px; height: 10px; } .varianten .titel-name { font-size: 0.92rem; font-weight: 400; color: var(--text2); } .varianten .titel.spielt .titel-name { color: var(--accent); } .varianten .titel-welle { height: 36px; } .varianten .titel-dauer { font-size: 0.88rem; } @media (max-width: 820px) { .varianten { margin-left: 1.25rem; padding-left: 0.85rem; } .varianten .titel { grid-template-columns: 32px 1fr auto; gap: 0.7rem; } } /* ===================== ALBEN ===================== Nach Library gruppiert: Überschrift, darunter eine Zeile mit den zugehörigen Alben. Die Karten sind kleiner als früher, damit auch sechs oder sieben nebeneinander passen; reicht der Platz nicht, rutscht die Zeile um. */ .alben-gruppe { margin-bottom: 2.75rem; } .alben-gruppe:last-child { margin-bottom: 0; } .gruppe-kopf { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; } .gruppe-name { font-family: var(--utility); font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); white-space: nowrap; } a.gruppe-name { transition: color var(--tr); } a.gruppe-name:hover { color: var(--accent); } .gruppe-pfeil { color: var(--text3); font-size: 0.72rem; } a.gruppe-name:hover .gruppe-pfeil { color: var(--accent); } .gruppe-linie { flex: 1; height: 1px; background: var(--line); } .gruppe-anzahl { font-size: 0.72rem; color: var(--text3); font-variant-numeric: tabular-nums; flex-shrink: 0; } .alben-zeile { display: flex; flex-wrap: wrap; gap: 1.1rem; } .album-karte { display: block; } .album-karte.klein { width: 152px; flex-shrink: 0; } .album-cover { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--bg3); border: 1px solid var(--line); transition: border-color var(--tr), transform var(--tr); } .album-karte:hover .album-cover { border-color: var(--line-h); transform: translateY(-3px); } .album-cover-img, .album-cover-video { width: 100%; height: 100%; object-fit: cover; } .album-cover-platzhalter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--bg3), var(--bg4)); font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; color: rgba(255,255,255,0.12); } .album-schleier { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity var(--tr); } .album-karte:hover .album-schleier { opacity: 1; } .album-schleier span { font-family: var(--utility); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.35rem 0.85rem; border: 1px solid rgba(255,255,255,0.75); border-radius: 2px; } .album-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; margin-top: 0.6rem; line-height: 1.12; letter-spacing: 0.03em; transition: color var(--tr); } .album-karte:hover .album-name { color: var(--accent); } .album-meta { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-top: 0.2rem; } /* Ready for Distribution — dieselben Karten wie bei den Alben, nur mit einer kleinen Marke auf dem Cover. Sie sitzt oben links statt in der Mitte, damit sie das Motiv nicht verdeckt. */ .frei-marke { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; padding: 0.2rem 0.5rem; background: var(--accent); color: #06201d; border-radius: 2px; font-family: var(--utility); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none; } .album-karte:hover .frei-marke { opacity: 0; transition: opacity var(--tr); } .frei-hinweis { margin-top: 1.75rem; font-size: 0.92rem; color: var(--text2); } .frei-hinweis a { color: var(--accent); border-bottom: 1px solid rgba(47,212,196,0.35); } .frei-hinweis a:hover { border-bottom-color: var(--accent); } @media (max-width: 620px) { .alben-zeile { gap: 0.8rem; } .album-karte.klein { width: calc(50% - 0.4rem); } .gruppe-name { font-size: 0.72rem; letter-spacing: 0.16em; white-space: normal; } } /* ===================== ALBUM-DETAILSEITE ===================== */ .album-kopf { position: relative; padding: 3.5rem 0 2.5rem; overflow: hidden; } .album-kopf-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.22; filter: blur(2px); } .album-kopf-bg img { width: 100%; height: 100%; object-fit: cover; } .album-kopf-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,15,18,0.55) 0%, var(--bg) 100%); } .album-kopf .wrap { position: relative; z-index: 1; } .album-kopf-innen { display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem; align-items: end; } .album-kopf-cover { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,0.55); } .album-kopf-cover .cover-img, .album-kopf-cover .cover-video { width: 100%; height: 100%; object-fit: cover; } .album-kopf-cover .cover-platzhalter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--bg3), var(--bg4)); font-family: 'Bebas Neue', sans-serif; font-size: 4rem; color: rgba(255,255,255,0.12); } .album-kopf h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); } .album-kopf .album-untertitel { color: var(--text2); font-size: 1.05rem; margin-top: 0.3rem; } .album-zeile { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; font-size: 0.85rem; color: var(--text3); margin-bottom: 0.8rem; } .album-zeile .punkt { opacity: 0.5; } .album-aktionen { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; } /* Beschreibung über die volle Breite, in einer Spalte. Bei sehr langen Zeilen hilft ein grösserer Zeilenabstand: er gibt dem Auge beim Zeilenwechsel eine deutlichere Spur zurück an den linken Rand. */ .album-beschreibung { margin: 2.5rem 0; color: var(--text2); line-height: 1.8; } .album-beschreibung p { margin-bottom: 1.1rem; } .album-beschreibung p:last-child { margin-bottom: 0; } .album-beschreibung strong { color: var(--text); } @media (max-width: 760px) { .album-kopf-innen { grid-template-columns: 1fr; gap: 1.5rem; } .album-kopf-cover { max-width: 260px; } } /* ---- Band „Erhältlich bei" auf der Albumseite ---- Sitzt direkt unter dem Kopf und ist bewusst das auffälligste Element der Seite nach dem Titel: dünner Akzentstreifen links, eigener Grund. */ .lizenz-band { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; margin: 2.5rem 0 0; padding: 1.35rem 1.6rem; background: linear-gradient(100deg, var(--accent-glow) 0%, var(--bg2) 55%); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); } .lizenz-bild { width: 108px; height: 68px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg3); } .lizenz-bild img { width: 100%; height: 100%; object-fit: cover; } .lizenz-label { font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); } .lizenz-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.85rem; line-height: 1.1; margin-top: 0.15rem; } .lizenz-info { font-size: 0.88rem; color: var(--text2); margin-top: 0.25rem; } .lizenz-rolle { display: block; margin-top: 0.25rem; font-family: var(--utility); font-size: 0.84rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text3); } .lizenz-knopf { flex-shrink: 0; white-space: nowrap; } @media (max-width: 800px) { .lizenz-band { grid-template-columns: 1fr; gap: 1rem; text-align: left; } .lizenz-bild { width: 100%; height: 120px; } .lizenz-knopf { justify-content: center; } } /* ===================== SCHALTFLÄCHEN ===================== */ /* Schaltflächen sachlich: gesperrte Versalien, knappe Form. Eine abgerundete Pille sagt „App"; hier soll es nach Werkzeug aussehen. */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.8rem 1.5rem; border-radius: 3px; border: 1px solid transparent; cursor: pointer; transition: all var(--tr); font-family: var(--utility); font-size: 0.9rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; } .btn-akzent { background: var(--accent); color: #06201d; font-weight: 600; } .btn-akzent:hover { background: var(--accent-h); } .btn-rand { background: transparent; border-color: var(--line-h); color: var(--text); } .btn-rand:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.02); } .zurueck { display: inline-block; color: var(--text3); margin-bottom: 1.75rem; font-family: var(--utility); font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; } .zurueck:hover { color: var(--accent); } /* ===================== KONTAKT ===================== */ .kontakt { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: start; } .kontakt-info p { color: var(--text2); margin-bottom: 1.25rem; } .kontakt-daten { display: flex; flex-direction: column; gap: 0.9rem; } .kontakt-zeile { display: flex; gap: 0.75rem; align-items: baseline; } .kontakt-label { font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text3); min-width: 82px; } .kontakt-wert a { color: var(--accent); } .feld { margin-bottom: 1.1rem; } /* Eingabefelder als Linien, nicht als Kästen: das Formular liest sich dadurch wie ein ausfüllbares Blatt und nicht wie eine Maske. */ .feld label { display: block; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text3); margin-bottom: 0.5rem; } .feld input, .feld textarea, .feld select { width: 100%; padding: 0.6rem 0; background: transparent; border: none; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); font: inherit; font-size: 1rem; transition: border-color var(--tr); } .feld input::placeholder, .feld textarea::placeholder { color: var(--text3); } .feld input:focus, .feld textarea:focus { border-bottom-color: var(--accent); outline: none; } .feld input:focus-visible, .feld textarea:focus-visible { outline: none; } .feld textarea { min-height: 140px; resize: vertical; padding-top: 0.5rem; } .feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .honig { position: absolute; left: -9999px; opacity: 0; } .form-hinweis { font-size: 0.82rem; color: var(--text3); margin-top: 0.9rem; } .form-meldung { padding: 0.85rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem; display: none; } .form-meldung.zeigen { display: block; } .form-meldung.ok { background: var(--accent-glow); border: 1px solid rgba(47,212,196,0.4); color: var(--text); } .form-meldung.fehler { background: rgba(255,90,90,0.12); border: 1px solid rgba(255,90,90,0.4); color: #ffb4b4; } @media (max-width: 800px) { .kontakt { grid-template-columns: 1fr; gap: 2rem; } .feld-zeile { grid-template-columns: 1fr; gap: 0; } } /* ===================== FUSSZEILE ===================== */ .fuss { border-top: 1px solid var(--line); padding: 2.75rem 0; color: var(--text3); font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; } .fuss-innen { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; } .fuss a { color: var(--text2); } .fuss a:hover { color: var(--accent); } .fuss-links { display: flex; gap: 1.25rem; flex-wrap: wrap; } /* Rechtstexte als Aufklapper — spart eigene Seiten. */ .rechtstext { max-width: 760px; margin-top: 1.5rem; } .rechtstext summary { cursor: pointer; color: var(--text2); padding: 0.5rem 0; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.06em; } .rechtstext summary:hover { color: var(--accent); } .rechtstext div { color: var(--text3); padding: 0.5rem 0 1rem; white-space: pre-line; } /* ===================== PLAYER ===================== Die Leiste steht dauerhaft am unteren Rand — auch bevor etwas ausgewählt wurde und auf jeder Unterseite. Der Platz dafür ist über das untere Innenmass des Rumpfes reserviert, sie überdeckt also niemals Inhalte. */ .player { position: fixed; bottom: 0; left: 0; right: 0; z-index: 600; height: var(--player-h); background: rgba(23,25,30,0.97); backdrop-filter: blur(20px); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 1.25rem; padding: 0 1.5rem; } /* Ruhezustand: nichts gewählt. Die Bedienelemente bleiben sichtbar, treten aber zurück, damit klar ist, dass hier noch nichts läuft. */ .player.leer .player-cover { background: var(--bg3); } .player.leer .player-titel { color: var(--text3); font-weight: 400; } .player.leer .p-btn:not(.gross) { opacity: 0.35; pointer-events: none; } .player.leer .player-welle { opacity: 0.4; } .player-links { display: flex; align-items: center; gap: 0.9rem; min-width: 190px; max-width: 260px; } .player-cover { width: 52px; height: 52px; border-radius: var(--radius); overflow: hidden; background: var(--bg3); flex-shrink: 0; border: 1px solid var(--line); } .player-cover img, .player-cover video { width: 100%; height: 100%; object-fit: cover; } .player-titel { font-weight: 500; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-sub { font-size: 0.78rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-knoepfe { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } .p-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color var(--tr); padding: 0; } .p-btn:hover { color: var(--text); } .p-btn svg { width: 15px; height: 15px; fill: currentColor; } .p-btn.gross { width: 42px; height: 42px; background: var(--accent); color: #08211f; } .p-btn.gross:hover { background: var(--accent-h); color: #08211f; } .p-btn.gross svg { width: 16px; height: 16px; } .player-mitte { flex: 1; display: flex; align-items: center; gap: 0.85rem; min-width: 0; } .player-zeit { font-size: 0.75rem; color: var(--text3); font-variant-numeric: tabular-nums; flex-shrink: 0; } .player-welle { flex: 1; height: 48px; position: relative; cursor: pointer; min-width: 0; } .player-welle canvas { width: 100%; height: 100%; display: block; } .player-rechts { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .player-rechts input[type=range] { width: 88px; height: 4px; -webkit-appearance: none; appearance: none; background: var(--bg4); border-radius: 3px; cursor: pointer; } .player-rechts input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); cursor: pointer; } .player-rechts input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--accent); cursor: pointer; } @media (max-width: 900px) { .player-rechts { display: none; } .player-links { min-width: 0; max-width: 150px; } } @media (max-width: 600px) { .player { gap: 0.75rem; padding: 0 0.85rem; } .player-cover { width: 42px; height: 42px; } .player-welle { height: 36px; } .player-zeit.gesamt { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }