/* ==========================================================================
Musik Ungestört
Die Seite ist als Frontplatte gebaut: Champagner-Panel, Nussbaum-Zonen,
eine einzige rote Anzeige, Haarlinien statt Kästen und überall die kleinen
gesiebdruckten Schilder, wie sie auf Geräten der Siebziger stehen.
Farben und Abstände stehen unter :root.
========================================================================== */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
src:url('assets/fonts/poppins-400.woff') format('woff'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
src:url('assets/fonts/poppins-500.woff') format('woff'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
src:url('assets/fonts/poppins-700.woff') format('woff'); }
@font-face { font-family:'Lora'; font-style:italic; font-weight:400; font-display:swap;
src:url('assets/fonts/lora-italic-400.woff') format('woff'); }
:root{
/* Marke */
/* Rot direkt aus dem Wort MUSIK im Logo: #E34554.
Die drei Varianten sind nur so weit abgedunkelt bzw. aufgehellt,
wie es für lesbaren Kontrast nötig ist. */
--rot:#E34554; --rot-text:#9E1223; --rot-flae:#DD2133; --rot-hell:#EC757E;
--rot-tief:#B01B29;
--creme:#F2E3C4; --sand:#E8D4AB; --dunkel:#171717; --dunkel2:#222222;
/* Gedämpfter Text. Beide Töne wurden am 11.09. eine Stufe kräftiger gesetzt:
die alten Werte (#50463E / #C9B792) bestanden AA, wirkten in kleinen,
gesperrten oder kursiven Graden aber ausgewaschen. */
--grau:#453C34; --grau-hell:#D2C2A2;
/* abgeleitet */
--creme-hoch:#F8EFD9; /* aufgehelltes Panel für Karten auf Creme */
--band:#3A2E22; /* Bandbraun im Ablaufstreifen */
--vu:#F7E8C2; /* Zifferblatt der Anzeige */
--gravur:rgba(33,26,20,.15); /* Haarlinie auf hell */
--gravur-stark:rgba(33,26,20,.28);
--gravur-d:rgba(242,227,196,.17); /* Haarlinie auf dunkel */
--sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
--serif:'Lora',Georgia,serif;
--breite:1140px; --rand:22px; --radius:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:98px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0; font-family:var(--sans); font-size:17px; line-height:1.62;
color:var(--dunkel); background:var(--creme);
-webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--rot-text)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:3px solid var(--rot); outline-offset:3px}
.skip{position:absolute; left:-9999px; top:0; z-index:100;
background:var(--dunkel); color:var(--creme); padding:12px 20px}
.skip:focus{left:0}
/* ---------- Grundtypografie ---------- */
h1,h2,h3{font-weight:700; line-height:1.12; margin:0 0 .5em; letter-spacing:-.018em}
h1{font-size:clamp(2.05rem,5.2vw,3.05rem)}
h2{font-size:clamp(1.55rem,3.9vw,2.25rem)}
h3{font-size:1.16rem; line-height:1.28; letter-spacing:-.008em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.gross{font-size:clamp(1.06rem,2.4vw,1.28rem); line-height:1.55; max-width:46ch}
.klein{font-size:.92rem; color:var(--grau)}
.teilen-knopf{display:inline-flex; align-items:center; gap:6px; background:none;
border:1.5px solid var(--gravur-stark); border-radius:999px; padding:7px 15px 7px 12px;
font:inherit; font-weight:700; font-size:.82rem; color:var(--dunkel); cursor:pointer;
transition:border-color .13s ease, color .13s ease, background .13s ease}
.teilen-knopf svg{flex:none; opacity:.85}
.teilen-knopf:hover{border-color:var(--rot-flae); color:var(--rot-flae)}
.teilen-knopf:hover svg{opacity:1}
.dunkel .teilen-knopf{color:var(--creme); border-color:var(--grau)}
.dunkel .teilen-knopf:hover{border-color:var(--creme); color:var(--creme)}
/* Ohne eigenen margin-bottom hängt diese Zeile ohne Luft direkt an dem, was
folgt (Eyebrow-Zeile auf Alben-/Artikelseiten: 0px Abstand; Ritual-Zeile auf
der Startseite: 3px) - deshalb hier fest verankert statt dem jeweils
folgenden Element überlassen. */
.kopfzeile-teilen{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
margin-bottom:1.4em}
.kopfzeile-teilen .zurueck{margin:0}
.serif{font-family:var(--serif); font-style:italic}
/* Das Siebdruck-Schild. Der Ton der ganzen Seite steckt in diesen paar Zeilen:
So stehen die Bezeichnungen auf der Frontplatte über den Bedienelementen. */
/* 10,5 px waren zu klein zum Lesen. Seit 11.09. 13 px, dafür etwas engere
Sperrung – sonst zerfällt die Zeile bei der größeren Schrift. */
.schild{
font-size:13px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
color:var(--rot-text); margin:0 0 1.15em; display:flex; align-items:center; gap:.8em;
line-height:1.45;
}
.schild .idx{color:var(--grau); display:flex; align-items:center; gap:.8em; flex:none}
/* Das Signatur-Motiv aus Kopfzeile und Start-Hero im Kleinformat: eine
kurze Linie mit einem winzigen Punkt am Ende, statt der schlichten
grauen Trennlinie – taucht dadurch dezent vor jeder Abschnitts-
überschrift auf der ganzen Website auf. Beides in einem Pseudo-Element
über zwei Hintergrund-Ebenen (Linie + runder Punkt), kein Markup nötig. */
.schild .idx::after{
content:""; width:37px; height:11px;
background-image:linear-gradient(var(--rot),var(--rot)), radial-gradient(circle closest-side, var(--rot) 99%, transparent 100%);
background-size:22px 2.5px, 11px 11px;
background-position:left center, right center;
background-repeat:no-repeat;
}
@media (max-width:480px){ .schild{font-size:12px; letter-spacing:.15em} }
.dunkel .schild{color:var(--rot-hell)}
/* --rot-hell trägt seit dem 11.09. auch die hellere dunkle Fläche (5,3:1),
die frühere Sonderfarbe #EE8089 ist damit überflüssig. */
.dunkel .schild .idx{color:var(--grau-hell)}
.dunkel .schild .idx::after{
background-image:linear-gradient(var(--rot-hell),var(--rot-hell)), radial-gradient(circle closest-side, var(--rot-hell) 99%, transparent 100%);
}
.huelle{width:100%; max-width:var(--breite); margin:0 auto; padding:0 var(--rand)}
/* Der Dreiklang aus dem Ritual – über der Überschrift wie die Beschriftung
auf einer Gerätefront. Steht seit den ersten Entwürfen für den Abend. */
.ritual{
display:flex; flex-wrap:wrap; align-items:center; gap:.3em .85em;
margin:.2em 0 .62em; font-size:clamp(.86rem,1.42vw,1.02rem); font-weight:700;
letter-spacing:.2em; text-transform:uppercase; color:var(--rot-text);
line-height:1.3;
}
.ritual i{font-style:normal; color:var(--grau); letter-spacing:0}
.dunkel .ritual{color:var(--rot-hell)}
.dunkel .ritual i{color:var(--grau-hell)}
section{padding:clamp(50px,7.4vw,86px) 0; position:relative}
section.eng{padding:clamp(34px,4.6vw,54px) 0}
/* Kompakte CTA-Leiste direkt unter der Bestandteile-Galerie: rückt näher an
deren Punkte-Reihe heran, statt den vollen Abschnittsabstand zu übernehmen. */
section.cta-knapp{padding-top:clamp(6px,1.2vw,14px); margin-top:clamp(-42px,-4.2vw,-22px)}
/* Kalender-Einbettung: dezenter "Bandmaschinen"-Rahmen in den Musik-Ungestört-
Farben (Bandbraun + roter Akzentring), damit der dunkle Cal.com-Kasten
nicht wie ein Fremdkörper zwischen den Creme-Flächen wirkt. */
.kalender-rahmen{
margin-top:1.8em; border-radius:var(--radius); overflow:hidden;
border:1px solid var(--gravur-stark); border-left:5px solid var(--rot-flae);
box-shadow:0 8px 22px rgba(33,26,20,.3);
}
.kalender-rahmen #cal-inline-15min{border-radius:var(--radius); overflow:hidden; display:block}
.kalender-rahmen #cal-inline-15min[hidden]{display:none}
/* Platzhalter, solange der Kalender noch nicht per Klick geladen wurde –
erst der Klick lädt das Cal.com-Skript, damit vorher keine Verbindung
zu Cal.com aufgebaut wird (kein Cookie-Banner nötig). */
.kalender-platzhalter{
padding:clamp(26px,4vw,40px) clamp(20px,3.4vw,32px);
text-align:center; background:var(--creme-hoch);
}
.kalender-platzhalter p{margin:0 0 1em}
.kalender-platzhalter .kalender-hinweis{
margin:1.1em 0 0; font-size:.8rem; color:var(--grau);
}
.kalender-platzhalter .kalender-hinweis a{color:inherit}
/* Der Kalender-Abschnitt endet visuell schon mit dem Rahmen selbst – der
volle Standard-Absatz darunter (bis zu 86px) plus der Standard-Abstand
der nächsten Sektion wirkte dadurch unnötig weit. */
#unschluessig{padding-bottom:clamp(18px,2.6vw,32px)}
/* Zonentrennung, wenn zwei Abschnitte dieselbe Fläche haben */
.trennlinie::before{
content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:calc(100% - 2*var(--rand)); max-width:calc(var(--breite) - 2*var(--rand));
height:1px; background:var(--gravur);
}
.dunkel{background:var(--dunkel); color:var(--creme)}
.dunkel h2,.dunkel h3{color:var(--creme)}
.dunkel .klein{color:var(--grau-hell)}
.dunkel a{color:var(--rot-hell)}
.sand{background:var(--sand)}
/* ---------- Kopfzeile ---------- */
.kopf{position:sticky; top:0; z-index:50; background:rgba(242,227,196,.955);
backdrop-filter:blur(9px);
/* Scroll-Fortschritt (0-1), von assets/fortschritt.js geschrieben; --kfx ist
die daraus abgeleitete X-Position des Punkts innerhalb der Kopfzeile.
Start/Ziel richten sich nach dem tatsächlichen Inhalt (.huelle ist auf
--breite zentriert), nicht nach der vollen, randlosen Kopfzeilen-Breite –
sonst liefe der Punkt auf breiten Bildschirmen im leeren Rand statt unter
Logo und Knopf. */
--kfp:0;
--kfx-start:max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
--kfx:calc(var(--kfx-start) + var(--kfp) * (100% - 2 * var(--kfx-start)));
transition:padding .22s ease}
/* Schmale rote Signatur-Linie mit Punkt, der beim Scrollen von links nach
rechts wandert – wie die Unterstreichung im Start-Hero, nur lebendig:
die Linie öffnet sich kurz vor dem Punkt und schließt sich kurz danach
wieder, mit etwas mehr Luft nach dem Punkt als davor (Vorbild: die
Unterstreichung im hochgeladenen Banner). */
.kopf::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
background:linear-gradient(to right,
var(--rot) 0%, var(--rot) calc(var(--kfx) - 20px),
transparent calc(var(--kfx) - 20px), transparent calc(var(--kfx) + 34px),
var(--rot) calc(var(--kfx) + 34px), var(--rot) 100%)}
.kopf::before{content:""; position:absolute; left:var(--kfx); bottom:-6px; width:16px; height:16px;
margin-left:-8px; border-radius:50%; background:var(--rot); z-index:1}
.kopf .huelle{display:flex; align-items:center; gap:10px 24px;
padding-top:13px; padding-bottom:13px; flex-wrap:wrap;
transition:padding .22s ease}
.kopf img{width:128px; transition:width .22s ease}
.kopf nav{display:flex; gap:4px 22px; margin-left:auto; flex-wrap:wrap}
.kopf nav a{color:var(--dunkel); text-decoration:none; font-size:1rem; font-weight:700}
.kopf nav a:hover{color:var(--rot-text)}
/* Wo bin ich gerade: Der Punkt zur aktuellen Seite steht rot und fett. */
.kopf nav a[aria-current="page"]{color:var(--rot-text); font-weight:700}
.kopf .knopf{padding:11px 22px; font-size:.9rem}
@media (max-width:640px){ .kopf .knopf{padding:10px 16px; font-size:.82rem} }
/* Beim Scrollen zieht sich die Kopfzeile zusammen (Klasse wird von
assets/fortschritt.js gesetzt) – mehr Platz für den Inhalt, die
Navigation bleibt aber vollständig bedienbar. */
.kopf.geschrumpft .huelle{padding-top:8.5px; padding-bottom:8.5px}
.kopf.geschrumpft img{width:87px}
@media (max-width:939px){ .kopf.geschrumpft img{width:70px} }
/* ---------- Knöpfe: die Pille ist die Form des Logos ---------- */
.knopf{display:inline-block; text-decoration:none; background:var(--rot-flae); color:#fff;
font-weight:700; font-size:1rem; padding:14px 32px; border-radius:999px;
border:2px solid var(--rot-flae);
transition:background .13s ease, transform .13s ease, border-color .13s ease}
.knopf:hover{background:var(--rot-tief); border-color:var(--rot-tief); transform:translateY(-1px)}
.knopf.rand{background:transparent; color:var(--dunkel); border-color:var(--dunkel)}
.knopf.rand:hover{background:var(--dunkel); color:var(--creme)}
.eckwerte{
margin:1.6em 0 0; font-size:10.5px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--grau-hell); line-height:1.9;
}
/* .eckwerte war bisher nur auf dunklem Grund im Einsatz, daher die helle
Schriftfarbe als Standard – auf hellem Grund (z. B. wenn der Abschluss-
Abschnitt wie hier aufgehellt wird) braucht es die dunkle Variante. */
.sand .eckwerte{color:var(--grau)}
.dunkel a.knopf{color:#fff} /* sonst gewinnt .dunkel a und der Knopf wird rot auf rot */
.dunkel .knopf.rand{color:var(--creme); border-color:var(--creme)}
.dunkel .knopf.rand:hover{background:var(--creme); color:var(--dunkel)}
/* Reihe aus zwei oder mehr Knöpfen: bricht bei langen Linktexten sauber um,
statt aneinanderzukleben (die Knöpfe waren bisher inline mit margin-left,
was beim Zeilenumbruch keinen vertikalen Abstand ergab). */
.knopfreihe{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
/* ---------- Startbereich ---------- */
.start{padding:clamp(38px,5.2vw,72px) 0 clamp(30px,3.6vw,48px)}
/* Der Abschnitt direkt unter dem Startbereich rückt näher heran: seit die
Hörprobe im Ablauf steht, liegt zwischen beiden keine Zone mehr. */
.start + section{padding-top:clamp(34px,4.2vw,52px)}
/* Dasselbe gilt überall, wo zwei Abschnitte auf derselben Fläche liegen:
ohne Farbwechsel addieren sich die beiden Innenabstände zu einer Lücke. */
section:not([class]) + section:not([class]){padding-top:clamp(24px,3vw,36px)}
section:not([class]):has(+ section:not([class])){padding-bottom:clamp(24px,3vw,36px)}
.start .huelle{display:grid; gap:clamp(24px,3.4vw,34px); align-items:center}
/* Auf dem Handy steht das Gerät zwischen Überschrift und Text – sonst käme
es erst nach der halben Seite. Auf dem Desktop schiebt es das Raster
wieder nach rechts und lässt es über beide Zeilen laufen. */
@media (min-width:900px){
.start .huelle{grid-template-columns:1fr 1.06fr; gap:0 clamp(28px,4vw,54px)}
.start-kopf{grid-column:1; grid-row:1; align-self:end}
.start-text{grid-column:1; grid-row:2; align-self:start; margin-top:1.1em}
.start .start-visual{grid-column:2; grid-row:1 / span 2; align-self:start; display:flex; flex-direction:column; gap:18px}
}
.hero-neben{margin-top:0; display:flex; flex-direction:column; gap:12px}
.hero-wege{display:flex; gap:12px}
.hero-weg{flex:1; display:block; text-decoration:none; color:var(--dunkel);
background:var(--creme-hoch); border:1px solid var(--gravur); border-radius:var(--radius);
padding:14px 16px; transition:border-color .15s}
.hero-weg:hover{border-color:var(--gravur-stark)}
.hero-weg .schild{margin:0 0 .3em}
.hero-weg-mehr{font-size:.86rem; color:var(--grau); display:block}
.hero-archiv{background:var(--creme-hoch); border:1px solid var(--gravur); border-radius:var(--radius); padding:14px 16px}
.hero-archiv-label{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--grau); margin-bottom:10px}
.hero-archiv-reihe{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:12px}
.hero-archiv-reihe img{width:56px; height:56px; border-radius:6px; object-fit:cover; flex:none; display:block; transition:transform .15s, box-shadow .15s}
.hero-archiv-reihe a{flex:none; line-height:0; border-radius:6px}
.hero-archiv-reihe a:hover img,.hero-archiv-reihe a:focus-visible img{transform:translateY(-2px); box-shadow:0 6px 14px -6px rgba(33,26,20,.45)}
.hero-archiv > a{font-size:.92rem; font-weight:600}
.hero-angebot{background:var(--creme-hoch); border:1px solid var(--gravur); border-radius:var(--radius); padding:14px 16px}
.hero-angebot .hero-manifest{margin:0; font-size:.92rem}
.hero-angebot .hero-manifest span{font-size:1rem; padding:11px 10px 11px 0}
.hero-angebot .hero-manifest span:nth-child(even){padding-left:14px}
.start h1{margin-bottom:.32em}
.start .gross{margin-bottom:1.55em}
/* Die Angaben als Datenzeile zwischen zwei Haarlinien – so stehen
die Eckwerte auf der Rückseite eines Geräts. Kein Kasten, keine Pille. */
.datenzeile{
display:grid; grid-template-columns:1fr 1fr; gap:20px 26px;
margin:0 0 .4em; padding:20px 0;
border-top:1px solid var(--gravur-stark); border-bottom:1px solid var(--gravur-stark);
list-style:none;
}
/* Schmale Bildschirme: zweispaltiges Raster, die linke Spalte bekommt eine
feine Trennlinie zur rechten – dieselbe Haarlinie wie oben/unten, nur
senkrecht gedreht, damit sich auch hier jede Angabe als eigenes Feld liest. */
.datenzeile li:nth-child(odd){border-right:1px solid var(--gravur-stark); padding-right:20px}
/* Ab fünf Angaben trägt ein festes Raster nicht mehr: Flex bricht dort um,
wo es eng wird, statt eine Spalte allein in die zweite Zeile zu schicken. */
@media (min-width:520px){
.datenzeile{display:flex; flex-wrap:wrap; gap:17px clamp(24px,3.2vw,40px); align-items:stretch}
/* Jede Angabe ein eigenes Feld: feine Haarlinie rechts trennt sie von der
nächsten, statt sie nur über den Abstand auseinanderzuhalten. Der
Grid-Divider von oben wird hier durch den echten (variablen) Abstand
ersetzt, daher zurückgesetzt. */
.datenzeile li{border-right:1px solid var(--gravur-stark); padding-right:clamp(24px,3.2vw,40px)}
.datenzeile li:nth-child(odd){padding-right:clamp(24px,3.2vw,40px)}
.datenzeile li:last-child{border-right:none; padding-right:0}
}
.datenzeile li{display:flex; flex-direction:column; gap:5px; min-width:0}
.datenzeile .marke{
font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--grau); overflow-wrap:break-word; hyphens:auto;
}
/* Kurze Werte (Jahr, Dauer …) bleiben einzeilig; ein paar Angaben – etwa auf
der Bandmaschinen-Seite – sind aber ganze Sätze und müssen umbrechen
dürfen, sonst sprengt eine einzige lange Zeile das Raster auf schmalen
Bildschirmen (weiterhin nowrap kollidierte dort mit grid-template-columns
und schob die ganze Seite in die Breite). */
.datenzeile .wert{font-size:1.02rem; font-weight:700; line-height:1.2}
/* Kleiner Hinweis am Ende der Kennzahlen-Leiste: bewusst größer als
Fußnotentext, damit die Einladung zum Nachfragen nicht untergeht. */
.hero-hinweis{margin:.9em 0 0; font-size:1rem; line-height:1.6; color:var(--dunkel)}
.hero-hinweis a{font-weight:700; color:var(--rot-text); text-decoration-thickness:1px}
.hero-hinweis a:hover{text-decoration-thickness:2px}
.dunkel .datenzeile{border-color:var(--gravur-d)}
.dunkel .datenzeile .marke{color:var(--grau-hell)}
/* Das Gerätegehäuse um die Videoschleife */
.geraet{background:var(--dunkel); border-radius:16px; padding:11px 11px 0;
box-shadow:0 22px 50px -26px rgba(33,26,20,.6), inset 0 0 0 1px rgba(242,227,196,.09)}
.geraet .scheibe{border-radius:9px; overflow:hidden; background:#000; line-height:0}
.geraet video,.geraet .ersatz{width:100%}
.geraet .ersatz{display:none}
.geraet .leiste{display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:12px 6px 14px; font-size:9.5px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--grau-hell)}
.geraet .leiste .lampe{display:inline-block; width:7px; height:7px; border-radius:50%;
background:var(--rot); margin-right:.8em; vertical-align:-1px;
box-shadow:0 0 8px 1px rgba(227,69,84,.8)}
@media (prefers-reduced-motion:no-preference){
.geraet .leiste .lampe{animation:puls 3.4s ease-in-out infinite}
}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.42}}
@media (prefers-reduced-motion:reduce){
.geraet video{display:none}
.geraet .ersatz{display:block}
}
/* Auf der Anlage-Seite steht neben dem Gerät rechts sonst nur Leerraum,
weil die Textspalte links länger ist als die Videobox – hier landen
stattdessen kleine Links zu den vier Geschichten aus der Anlage. Nur
ab der zweispaltigen Ansicht sichtbar, sonst folgt der Abschnitt
#geschichten ohnehin gleich in der normalen Reihenfolge. */
.geraet-mehr{display:none}
@media (min-width:900px){
.geraet-mehr{display:flex; flex-direction:column; justify-content:center; align-self:start; margin-top:16px;
background:var(--creme-hoch); border:1px solid var(--gravur); border-radius:var(--radius);
padding:6px 20px}
.geraet-mehr ul{list-style:none; margin:0; padding:0}
.geraet-mehr li{border-top:1px solid var(--gravur)}
.geraet-mehr li:first-child{border-top:0}
.geraet-mehr a{display:flex; align-items:center; gap:14px; padding:14px 0;
text-decoration:none; color:var(--dunkel)}
.geraet-mehr-bild{flex:none; width:48px; height:48px; border-radius:10px; overflow:hidden;
background:var(--gravur-d); box-shadow:0 0 0 1px rgba(33,26,20,.08)}
.geraet-mehr-bild img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.16)}
.geraet-mehr a span:last-child{font-size:.94rem; font-weight:600; line-height:1.3}
.geraet-mehr a:hover span:last-child{text-decoration:underline}
}
/* ---------- Raster ---------- */
.raster{display:grid; gap:clamp(16px,2.4vw,24px)}
.r2{grid-template-columns:1fr}
.r3{grid-template-columns:1fr}
@media (min-width:700px){ .r2{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .r3{grid-template-columns:repeat(3,1fr)} }
/* "Der Abend" bleibt bewusst einspaltig: direkt darüber liegt die Sektion
"Für wen", die schon zwei Karten nebeneinander zeigt – zwei Zweispalter
hintereinander sahen gleichförmig aus. Ungestört und Analog stehen
deshalb übereinander, mit voller Breite für die Listen. */
/* Ab 860px nebeneinander wie zwei Frontplatten eines Geräts – als schmale,
sehr lange Einzelspalte wirkte die Karte auf breiten Bildschirmen verloren
im Raum. Stretch hält beide Karten auf gleicher Höhe, die Statusleiste
sitzt dadurch bei beiden auf gleicher Linie, auch wenn "Analog" durch das
Zitat mehr Inhalt hat. */
@media (min-width:860px){
#abend .raster.r2{grid-template-columns:1fr 1fr}
}
/* Eingelassene Zone auf der Platte statt Kasten */
.feld{background:var(--creme-hoch); border:1px solid var(--gravur-stark);
border-left:5px solid var(--rot-flae); border-radius:var(--radius); padding:clamp(22px,2.6vw,30px);
display:flex; flex-direction:column}
.feld h3{margin:.95em 0 .45em}
.feld p{color:var(--grau)}
/* Die Karte in einer dunklen Sektion. Ohne diese Regel erbt sie --creme-hoch
von .feld, während .dunkel h3 die Überschrift creme färbt: creme auf creme,
1,1:1 – die Überschrift war unsichtbar. */
.dunkelkarte{background:var(--dunkel2); border-color:var(--gravur-d); border-left-color:var(--rot-hell); color:var(--creme)}
.dunkelkarte p{color:var(--grau-hell)}
.dunkelkarte .zitat{color:var(--creme); border-left-color:var(--rot-hell)}
/* Zählwerk: die Ziffernrollen eines Bandzählers */
.zaehlwerk{display:inline-flex; gap:2px}
.zaehlwerk span{display:grid; place-content:center; width:23px; height:30px;
background:var(--dunkel); color:var(--creme); border-radius:3px;
font-size:.95rem; font-weight:700;
box-shadow:inset 0 -6px 9px -6px rgba(0,0,0,.8), inset 0 6px 9px -6px rgba(255,255,255,.15)}
/* Anschlag schnell, Rückfall träge – das macht den Unterschied zum Wackeln */
/* ---------- Für wen ---------- */
/* ---------- Der Bandstreifen ---------- */
.streifen{margin:0 0 clamp(28px,3.8vw,42px)}
.spur{display:flex; align-items:center; gap:10px}
.nabe{flex:none}
.nabe .ring{fill:none; stroke:var(--grau-hell); stroke-width:1.6; opacity:.8}
.nabe .loch{fill:var(--dunkel); stroke:var(--grau-hell); stroke-width:1.2; opacity:.8}
.nabe .wickel{fill:var(--band); stroke:none}
.band{flex:1; display:flex; height:60px; border-radius:3px; overflow:hidden;
background:var(--band); box-shadow:inset 0 0 0 1px rgba(242,227,196,.13)}
.teil{position:relative; min-width:0; display:flex; align-items:center; padding:0 8px;
border-left:1px solid var(--gravur-d)}
.teil:first-child{border-left:none}
.teil.naht{border-left:none} /* im Werk selbst gibt es keinen Schnitt */
.teil.kern{background:rgba(227,69,84,.15)}
.teil.werk{background:rgba(227,69,84,.34)}
.teil b{font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:var(--creme); white-space:nowrap; overflow:hidden}
.teil.still{background:rgba(242,227,196,.1)}
.skala{display:flex; justify-content:space-between; margin:10px 0 0; padding:0 44px;
font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--grau-hell)}
.streifen .bu{margin-top:15px; font-size:.9rem; color:var(--grau-hell); max-width:58ch}
@media (max-width:720px){
/* Auch die Beschriftung des Album-Segments blieb früher stehen (die anderen
acht Abschnitte sind ja schon länger unbeschriftet) – bei 43/90 Flex-Anteilen
ist das Segment auf schmalen Bildschirmen aber so schmal, dass selbst das
kurze "Das Album" hart abgeschnitten wurde ("DAS ALBU…"). Die Farbfläche
plus der Absatz darunter erklären das Verhältnis trotzdem eindeutig. */
.teil b{display:none}
.band{height:52px}
}
/* ---------- Ablaufliste ---------- */
.ablauf{list-style:none; margin:0; padding:0}
.ablauf li{display:grid; grid-template-columns:76px 1fr; gap:1px 14px;
padding:11px 0; border-top:1px solid var(--gravur-d)}
.ablauf li:first-child{border-top:none}
.ablauf .zeit{grid-row:span 2; align-self:start; padding-top:2px;
font-size:.8rem; font-weight:700; letter-spacing:.05em; color:var(--grau-hell)}
.ablauf li.kern .zeit{color:var(--rot-hell)}
.ablauf .was{font-weight:700; font-size:.97rem}
.ablauf .dazu{font-size:.87rem; color:var(--grau-hell)}
/* ---------- Reiseweg: der Ablauf als durchgehende Zeitleiste ----------
Bewusst KEINE einzelnen Boxen mehr: Die Stationen bilden einen einzigen
gerahmten Streifen mit feinen Trennlinien zwischen den Zeilen, damit die
deutlich kräftigere Zeitstrahl-Linie links das verbindende Element ist,
nicht der Rahmen jeder einzelnen Karte. Die "Kern"-Zeilen (die
eigentliche, ununterbrochene Albumwiedergabe) sind rot hervorgehoben und
verschmelzen ohne Trennlinie, wo sie direkt aufeinanderfolgen. */
.reise{margin-top:clamp(18px,2.4vw,28px)}
.reise-karten{list-style:none; margin:0; padding:0; position:relative;
background:var(--creme-hoch); border:1px solid var(--gravur-stark);
border-radius:var(--radius); overflow:hidden}
.dunkel .reise-karten{background:var(--dunkel2); border-color:var(--gravur-d)}
.reise-karten::before{content:''; position:absolute; left:32px; top:18px; bottom:18px; width:5px; border-radius:3px; background:var(--gravur-stark)}
.dunkel .reise-karten::before{background:var(--gravur-d)}
.reise-karte{position:relative; padding:clamp(12px,1.5vw,16px) clamp(12px,1.5vw,16px) clamp(12px,1.5vw,16px) 66px;
border-bottom:1px solid var(--gravur-stark)}
.dunkel .reise-karte{border-bottom-color:var(--gravur-d)}
.reise-karte::before{content:''; position:absolute; left:20px; top:18px; width:26px; height:26px; box-sizing:border-box;
border-radius:50%; background:var(--creme-hoch); border:5px solid var(--gravur-stark);
box-shadow:0 0 0 4px var(--creme-hoch)}
.dunkel .reise-karte::before{background:var(--dunkel2); border-color:var(--gravur-d); box-shadow:0 0 0 4px var(--dunkel2)}
.reise-karte.kern::before{border-color:var(--rot-flae); background:var(--rot-flae)}
/* Anfang und Ende des Zeitstrahls: eigene, schmale Zeilen direkt in der
Liste, damit Punkt+Beschriftung wirklich AN der Linie hängen (die Linie
beginnt/endet exakt an diesen Zeilen) statt lose danebenzustehen. */
.reise-marke{position:relative; height:36px; box-sizing:border-box; display:flex; align-items:center;
padding:0 16px 0 66px; font-size:.8rem; font-weight:800;
letter-spacing:.08em; text-transform:uppercase; color:var(--grau); border-bottom:1px solid var(--gravur-stark)}
.dunkel .reise-marke{color:var(--grau-hell); border-bottom-color:var(--gravur-d)}
.reise-marke::before{content:''; position:absolute; left:26px; top:50%; transform:translateY(-50%);
width:14px; height:14px; border-radius:50%; background:var(--dunkel); box-shadow:0 0 0 3px var(--creme-hoch)}
.dunkel .reise-marke::before{background:var(--creme); box-shadow:0 0 0 3px var(--dunkel2)}
/* was auch immer als letztes Kind steht (normalerweise die Ende-Zeile)
bekommt keine untere Trennlinie, damit sie sauber mit dem Rahmen abschließt */
.reise-karten>li:last-child{border-bottom:0}
.reise-kopf{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.reise-zeit{font-size:.74rem; font-weight:700; letter-spacing:.05em; color:var(--grau); white-space:nowrap}
.reise-was{font-weight:700; font-size:1rem}
.reise-dazu{display:block; margin-top:2px; font-size:.87rem; color:var(--grau)}
.dunkel .reise-zeit{color:var(--grau-hell)}
.dunkel .reise-dazu{color:var(--grau-hell)}
.reise-karte.kern{background:rgba(227,69,84,.09); border-bottom-color:rgba(227,69,84,.22)}
.reise-karte.kern .reise-zeit{color:var(--rot-text)}
.dunkel .reise-karte.kern .reise-zeit{color:var(--rot-hell)}
.reise-karte.kern-start{border-bottom:0; padding-bottom:8px}
.reise-karte.kern-ende{padding-top:8px}
/* Das Album ist die eigentliche Botschaft des Abends: bewusst größer, mit Tag. */
.reise-album .reise-was{font-size:1.18rem}
.reise-album .reise-zeit{font-size:.87rem}
.reise-album .reise-dazu{font-size:.89rem; color:var(--dunkel); opacity:.85}
.dunkel .reise-album .reise-dazu{color:var(--creme); opacity:.88}
.reise-tag{display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px;
background:var(--rot); color:var(--creme); font-size:.62rem; font-weight:700;
letter-spacing:.08em; text-transform:uppercase; vertical-align:middle}
.reise-album-link{display:inline-block; margin-top:6px; font-size:.8rem; font-weight:700;
color:var(--rot-text); text-decoration:none; border-bottom:1px solid rgba(176,27,41,.35)}
.reise-album-link:hover{border-bottom-color:var(--rot-text)}
.dunkel .reise-album-link{color:var(--rot-hell); border-bottom-color:rgba(236,117,126,.4)}
.dunkel .reise-album-link:hover{border-bottom-color:var(--rot-hell)}
/* Hörprobe, kompakt: klein und zurückhaltend, kein zweiter Blickfang
neben dem Album-Block. */
.reise-hoerprobe{margin-top:8px; padding-top:8px; border-top:1px solid var(--gravur)}
.dunkel .reise-hoerprobe{border-top-color:rgba(242,227,196,.14)}
.reise-hoerprobe .hoerprobe{margin:0; max-width:none; padding:0; border:0; border-radius:0; background:none}
.reise-hoerprobe .spieler{gap:10px}
.reise-hoerprobe .spieltaste{width:34px; height:34px; border-width:1px}
.reise-hoerprobe .spieltaste .hp-start{width:12px; height:13px; margin-left:2px}
.reise-hoerprobe .spieltaste .hp-pause{width:11px; height:13px}
.reise-hoerprobe .zaehlwerk span{width:16px; height:21px; font-size:.7rem}
.reise-hoerprobe .spielband{height:5px}
.reise-hoerprobe .spielfuss{margin-top:6px; gap:8px}
.reise-hoerprobe .klein{font-size:.72rem; opacity:.8}
.dunkel .reise-hoerprobe .klein{color:var(--grau-hell)}
/* ---------- Punktlisten ---------- */
.punkte{list-style:none; margin:0; padding:0}
.punkte li{position:relative; padding:0 0 11px 24px}
.punkte li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
border-radius:50%; background:var(--rot)}
.punkte li:last-child{padding-bottom:0}
.dunkel .punkte li::before{background:var(--rot-hell)}
/* ---------- Fragen ---------- */
.fragen{max-width:min(780px,100%)}
.frage{border-bottom:1px solid var(--gravur-stark)}
.frage summary{cursor:pointer; list-style:none; padding:17px 42px 17px 0; position:relative;
font-weight:700; font-size:1rem}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+"; position:absolute; right:6px; top:50%;
transform:translateY(-50%); font-size:1.35rem; font-weight:400; color:var(--rot-text)}
.frage[open] summary::after{content:"–"}
.frage .antwort{padding:0 0 19px; color:var(--grau); max-width:64ch}
.frage .antwort p{margin-bottom:.7em}
/* ---------- Journal: 70er-Retro-Objekte ----------
Dekorative Illustrationen im Fließtext von Journal-Artikeln (Sunburst,
Plattenspieler, Bandmaschine …). Rein schmückend, deshalb alt="" und aus
dem Lesefluss der Screenreader genommen. Auf dem Handy keine Umfließung
mehr – die Spalte ist dafür zu schmal – sondern zentriert im Block. */
.artikel-text h2{clear:both}
/* Illustration im Artikeltext: klein und vom Text umflossen – wie eine
Randabbildung in einer gedruckten Reportage, nicht wie ein Postersatz.
Auf dem Handy zu schmal für Umfluss, deshalb dort zentriert im Block;
ab 700px wechselt sie ins Umfließen, abwechselnd rechts/links, damit der
Text nicht immer auf derselben Seite ausweicht. */
.artikel-bild{margin:clamp(20px,2.6vw,26px) auto; max-width:260px}
.artikel-bild .rahmen{background:var(--creme-hoch); border:1px solid var(--gravur);
border-radius:var(--radius); padding:clamp(8px,1.2vw,12px); line-height:0}
.artikel-bild img{width:100%; height:auto; display:block; border-radius:calc(var(--radius) - 6px)}
.artikel-bild figcaption{margin-top:.6em; font-size:.82rem; font-style:italic;
font-family:var(--serif); color:var(--grau)}
.kartenlegende{list-style:none; margin:.7em 0 0; padding:0; font-size:.78rem;
font-style:normal; color:var(--grau)}
.kartenlegende li{display:flex; align-items:center; gap:.55em; margin-top:.35em}
.kartenlegende i{width:11px; height:11px; border-radius:50%; flex:none; border:1.5px solid var(--dunkel)}
@media (min-width:700px){
.artikel-bild{max-width:230px; margin:6px 0 20px 26px}
.artikel-bild:nth-of-type(odd){float:right}
.artikel-bild:nth-of-type(even){float:left; margin:6px 26px 20px 0}
}
.kapitel, .einschub{clear:both}
/* Steckbrief in der Randspalte – derselbe Kasten wie die Tracklist bei den
Alben (Fläche, Rahmen, Radius), nur mit Angaben statt Titeln. */
.steckbrief{margin:0 0 clamp(24px,3vw,32px); padding:clamp(16px,1.9vw,20px) clamp(15px,1.8vw,18px);
background:var(--creme-hoch); border:1px solid var(--gravur-stark);
border-left:5px solid var(--rot-flae); border-radius:var(--radius)}
.steckbrief .schild{margin-bottom:1em}
.steckbrief dl{margin:0; display:grid; gap:0}
.steckbrief dl > div{padding:11px 0; border-top:1px solid var(--gravur)}
.steckbrief dl > div:first-child{border-top:none; padding-top:0}
.steckbrief dl > div:last-child{padding-bottom:0}
.steckbrief dt{display:flex; align-items:center; gap:8px; margin:0 0 5px;
font-size:.72rem; font-weight:700; letter-spacing:.09em;
text-transform:uppercase; color:var(--grau)}
/* Alle Steckbrief-Icons denselben Rahmen: 24er-Viewbox, 16px Kantenlänge,
dieselbe Strichstärke – ganz gleich, welches Symbol im einzelnen Feld steht. */
.steckbrief .sb-icon{width:16px; height:16px; flex:none; color:var(--rot-text)}
.steckbrief dd{margin:0; padding-left:24px; font-size:.98rem; font-weight:700; line-height:1.35}
/* ---------- Zitat und Merksatz ---------- */
.zitat{border-left:2px solid var(--rot); padding:3px 0 3px 22px;
font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2.2vw,1.22rem);
line-height:1.5}
.dunkel .zitat{border-left-color:var(--rot-hell)}
.merksatz{font-size:clamp(1.3rem,3.4vw,1.95rem); font-weight:700; line-height:1.26; max-width:24ch}
/* ---------- Das Zitat ----------
Die einzige Stelle der Seite, an der jemand wörtlich spricht. Deshalb ein
eigenes Band, kursive Serife, und sonst steht nichts darin. */
.zitatband blockquote{
margin:0; max-width:none; padding-left:clamp(20px,3vw,34px);
border-left:3px solid var(--rot);
}
.zitatband blockquote p{
margin:0; font-family:var(--serif); font-style:italic;
font-size:clamp(1.32rem,3.1vw,1.95rem); line-height:1.36; color:var(--creme);
}
.zitatband em{font-style:italic; color:var(--rot-hell)}
.zitatband footer{
margin-top:1.15em; font-family:var(--sans); font-style:normal;
font-size:10.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
color:var(--grau-hell);
}
.zitatband-hell blockquote p{color:var(--dunkel)}
.zitatband-hell em{color:var(--rot-text)}
.zitatband-hell footer{color:var(--grau)}
/* Eigener, dritter Ton: die helle Zitatzeile sitzt sonst zwischen zwei
Sektionen, die schon unterschiedliche Flächen haben (Sand/Creme) und
könnte auf keiner Seite davon abweichen – darum eine eigene, leicht
hellere Fläche statt Sand oder Creme. */
.zitatband-hell{background:var(--creme-hoch)}
/* ---------- Journal ---------- */
.leseliste{display:grid; gap:clamp(14px,2.1vw,20px); grid-template-columns:1fr}
@media (min-width:640px){ .leseliste{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .leseliste{grid-template-columns:repeat(3,1fr)} }
.lesekarte{display:flex; flex-direction:column; text-decoration:none; color:var(--dunkel);
background:transparent; border:1px solid var(--gravur-stark); border-radius:var(--radius);
padding:clamp(20px,2.4vw,26px);
transition:background .13s ease, transform .13s ease, border-color .13s ease}
.lesekarte:hover{background:var(--creme-hoch); border-color:var(--dunkel); transform:translateY(-2px)}
.lesekarte .karten-bild{width:84px; height:84px; margin-bottom:1em; border-radius:14px;
overflow:hidden; background:var(--creme-hoch); flex:none}
.lesekarte .karten-bild img{width:100%; height:100%; object-fit:cover; display:block}
.lesekarte h3{margin:0 0 .45em}
.lesekarte .anriss{font-size:.94rem; color:var(--grau); margin-bottom:1.3em}
.lesekarte .pfeil{margin-top:auto; font-size:.86rem; font-weight:700; color:var(--rot-text)}
.lesekarte:hover .pfeil{text-decoration:underline}
/* Die aktuelle Ausgabe: dieselbe dunkle Zitatkarte wie bei "Warum dieses"
im Album-Archiv, nur groß und einzeln – der Einstieg ins Journal soll
wie ein Aufmacher wirken, nicht wie eine leere Karte im Raster. */
.journal-feature{display:grid; gap:clamp(22px,3.4vw,40px); grid-template-columns:1fr;
align-items:center; text-decoration:none; color:var(--creme); background:var(--dunkel2);
border-left:5px solid var(--rot-flae); border-radius:var(--radius); padding:clamp(26px,3.6vw,42px);
transition:transform .15s ease, box-shadow .15s ease}
@media (min-width:760px){ .journal-feature{grid-template-columns:1fr auto} }
.journal-feature:hover{transform:translateY(-2px); box-shadow:0 18px 36px -20px rgba(33,26,20,.5)}
.journal-feature .schild{color:var(--rot-hell); margin-bottom:1em}
.journal-feature .schild .idx{color:var(--grau-hell)}
.journal-feature .schild .idx::after{
background-image:linear-gradient(var(--rot-hell),var(--rot-hell)), radial-gradient(circle closest-side, var(--rot-hell) 99%, transparent 100%);
}
.journal-feature blockquote{margin:0 0 1em; font-family:var(--serif); font-style:italic;
font-size:clamp(1.22rem,2.7vw,1.62rem); line-height:1.4; color:var(--creme)}
.journal-feature .anriss{margin:0 0 1.4em; font-size:.97rem; line-height:1.6; color:var(--grau-hell);
max-width:56ch}
.journal-feature .pfeil{font-size:.92rem; font-weight:700; color:var(--rot-hell)}
.journal-feature:hover .pfeil{text-decoration:underline}
.journal-feature .bild{flex:none; width:190px; height:150px; border-radius:calc(var(--radius) - 2px); overflow:hidden;
background:var(--creme); border:1px solid rgba(242,227,196,.22); justify-self:center;
box-shadow:0 14px 30px -16px rgba(0,0,0,.55)}
.journal-feature .bild img{width:100%; height:100%; object-fit:cover}
@media (max-width:759px){ .journal-feature .bild{width:100%; height:170px; justify-self:start} }
/* ---------- Journal: was als Nächstes kommt ----------
Dieselbe Nummern-Optik wie das Inhaltsverzeichnis auf den Album-Seiten:
Statt einer leeren Fläche zeigt das Journal, woran gerade gearbeitet
wird – ohne feste Titel oder Termine zu versprechen. */
.journal-vorschau{margin-top:clamp(50px,6.4vw,74px); padding-top:clamp(30px,4vw,42px);
border-top:1px solid var(--gravur)}
.journal-vorschau .schild{margin-bottom:.6em}
.journal-vorschau .klein{margin-bottom:1.7em; max-width:60ch}
.themenliste{list-style:none; margin:0; padding:0; counter-reset:thema;
display:grid; gap:0 clamp(24px,3vw,40px); grid-template-columns:1fr}
@media (min-width:760px){ .themenliste{grid-template-columns:1fr 1fr} }
.themenliste li{display:grid; grid-template-columns:2.4em 1fr; gap:.2em .6em;
align-items:baseline; padding:14px 0; border-top:1px solid var(--gravur)}
.themenliste li:nth-child(-n+2){border-top:none}
@media (max-width:759px){ .themenliste li:first-child{border-top:none} .themenliste li:nth-child(2){border-top:1px solid var(--gravur)} }
.themenliste li::before{counter-increment:thema; content:counter(thema,decimal-leading-zero);
font-weight:700; color:var(--rot-text); font-size:.9rem; letter-spacing:.06em}
.themenliste strong{display:block; font-weight:700; line-height:1.3}
.themenliste p{grid-column:2; margin:.15em 0 0; font-size:.88rem; line-height:1.5; color:var(--grau)}
/* ---------- Bandbild ---------- */
.bild-band{line-height:0; background:var(--dunkel); position:relative}
.bild-band img{width:100%; height:clamp(200px,30vw,330px); object-fit:cover; object-position:center 45%}
.bild-band .bu{position:absolute; left:0; right:0; bottom:0; padding:30px var(--rand) 14px;
background:linear-gradient(to top,rgba(33,26,20,.85),transparent);
font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--grau-hell); line-height:1.5}
/* ---------- Zweispalter ---------- */
.duo{display:grid; gap:clamp(24px,3.4vw,46px); align-items:center}
@media (min-width:840px){
.duo{grid-template-columns:1fr 1fr}
.duo.gedreht > *:first-child{order:2}
}
.duo > img{border-radius:var(--radius); width:100%}
/* ---------- Text mit umflossenem Bild ---------- */
.text-umflossen{overflow:hidden}
.text-umflossen p{margin:0 0 1em}
.text-umflossen p:last-child{margin-bottom:0}
.text-umflossen .bild-rechts{border-radius:var(--radius); width:100%}
@media (min-width:640px){
.text-umflossen .bild-rechts{
float:right; width:min(320px,44%);
margin:0.3em 0 1em 1.8em;
}
}
/* ---------- Formular ---------- */
.formular{background:var(--dunkel2); border-radius:var(--radius);
padding:clamp(22px,2.8vw,30px); box-shadow:inset 0 0 0 1px rgba(242,227,196,.09)}
.feldgruppe{margin-bottom:15px}
.feld-paar{display:grid; gap:15px; grid-template-columns:1fr}
@media (min-width:460px){ .feld-paar{grid-template-columns:1fr 1fr} }
.formular label{display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--grau-hell); margin-bottom:6px}
.formular .opt{font-weight:400; text-transform:none; letter-spacing:0; opacity:.75}
.formular input,.formular select,.formular textarea{
width:100%; font:inherit; font-size:1rem; color:var(--creme);
background:rgba(242,227,196,.055); border:1px solid rgba(242,227,196,.22);
border-radius:8px; padding:12px 14px}
.formular textarea{resize:vertical; min-height:84px}
.formular input:focus,.formular select:focus,.formular textarea:focus{
border-color:var(--rot-hell); background:rgba(242,227,196,.09)}
.formular input::placeholder,.formular textarea::placeholder{color:#9a8b79}
.formular select{appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--grau-hell) 50%),
linear-gradient(135deg,var(--grau-hell) 50%,transparent 50%);
background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.formular .knopf{margin-top:6px}
.hinweis{margin-top:13px; font-size:.86rem; line-height:1.45; color:var(--grau-hell)}
/* ---------- Fußzeile ---------- */
/* Ruhiger Abschluss-Strich über dem Footer, als optisches Gegenstück zur
Linie mit Punkt oben in der Kopfzeile – hier bewusst statisch und mittig,
ohne jede Bewegung, damit jede Seite oben wie unten von derselben
Signatur eingerahmt wird. */
.fuss{background:var(--dunkel); color:var(--creme); padding:50px 0 34px; font-size:.93rem;
position:relative}
.fuss::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
background:var(--rot)}
.fuss::after{content:""; position:absolute; top:-7px; left:50%; width:16px; height:16px;
margin-left:-8px; border-radius:50%; background:var(--rot)}
.fuss a{color:var(--creme); text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-raster{display:grid; gap:28px}
@media (min-width:700px){ .fuss-raster{grid-template-columns:1.5fr 1fr 1fr} }
.fuss h4{font-size:10.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
color:var(--grau-hell); margin:0 0 13px}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li{margin-bottom:8px}
.fuss .klein{color:var(--grau-hell)}
.fuss-unten{margin-top:36px; padding-top:20px; border-top:1px solid var(--gravur-d);
font-size:.84rem; color:var(--grau-hell)}
/* ---------- Burger ---------- */
.burger{display:none; margin-left:auto; background:none; border:0; cursor:pointer;
padding:8px; width:42px; height:38px; flex-direction:column; justify-content:center; gap:5px}
.burger span{display:block; height:2.5px; background:var(--dunkel); border-radius:2px;
transition:transform .18s ease, opacity .18s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media (max-width:939px){
.burger{display:flex}
.kopf img{width:102px}
.kopf nav{display:none; width:100%; flex-direction:column; gap:0; margin:0}
body.menue-offen .kopf nav{display:flex}
.kopf nav a{padding:15px 2px; border-top:1px solid var(--gravur); font-size:1.05rem}
/* Termin-anfragen-Knopf hängt sonst allein unter dem Logo mit viel Leerraum daneben
und macht die Kopfzeile unnötig hoch. Auf dem Handy zeigen wir ihn nur noch im
aufgeklappten Menü, dort schließt er die Liste sauber ab. */
.kopf > .huelle > a.knopf{display:none}
body.menue-offen .kopf > .huelle > a.knopf{display:inline-block}
}
/* ---------- Rechtsseiten ---------- */
.rechtstext{max-width:68ch}
.rechtstext h2{font-size:1.3rem; margin-top:2em}
.rechtstext h2:first-of-type{margin-top:0}
/* ---------- Artikelseiten ---------- */
.artikel{padding:clamp(38px,5.4vw,64px) 0 clamp(46px,7vw,78px)}
/* .huelle.albumraster bringt schon ein eigenes padding-top mit (siehe unten) - sonst
addieren sich beide und "Zurück"/"Teilen" rutschen unnötig weit unter den Kopf. */
.artikel:has(> .huelle.albumraster){padding-top:0}
.artikel h1{max-width:20ch; margin-bottom:.42em}
.artikel .lead{font-size:clamp(1.08rem,2.4vw,1.3rem); line-height:1.5;
max-width:46ch; color:var(--grau); margin-bottom:0}
.zurueck{font-size:.9rem; margin-bottom:1.5em}
.zurueck a{text-decoration:none; font-weight:500}
.zurueck a:hover{text-decoration:underline}
.artikel-text{margin-top:clamp(30px,4vw,46px)}
.artikel-text > *:not(.artikel-bild){max-width:66ch}
.artikel-text h2{font-size:clamp(1.25rem,2.8vw,1.55rem); margin:2em 0 .6em}
.artikel-text h2:first-child{margin-top:0}
.artikel-text p{line-height:1.68; margin-bottom:1.1em}
.artikel-schluss{background:var(--creme-hoch); border:1px solid var(--gravur);
border-radius:var(--radius); padding:clamp(24px,3.2vw,36px);
max-width:min(700px,100%); margin-top:clamp(34px,4.4vw,52px)}
.artikel-schluss h2{font-size:clamp(1.25rem,2.8vw,1.55rem); margin-bottom:.5em}
.artikel-schluss p{max-width:48ch}
.lesekarte .schild{margin-bottom:.85em}
.feld .schild{margin-bottom:1em}
/* ---------- Die Beschreibung des Angebots im Startbereich ---------- */
/* Die Unterzeile sagt die Gattung – wie der Zusatz unter dem Modellnamen
auf einer Frontplatte. */
.unterzeile{
font-size:clamp(1.14rem,2.6vw,1.48rem); font-weight:500; line-height:1.35;
max-width:32ch; margin:0 0 1.1em;
}
.angebotstext{max-width:54ch; line-height:1.66}
.angebotstext.antwortblock{margin-bottom:1.1em}
.zitat-kurz{max-width:46ch; margin:.9em 0 0; font-style:italic; font-size:.98rem; color:var(--dunkel); opacity:.82}
.zitat-kurz span{font-style:normal; opacity:.85}
.dunkel .zitat-kurz{color:var(--creme)}
/* Die Aufzählung im Startbereich: was den Abend ausmacht, zum Überfliegen.
Der Fließtext darüber erzählt, die Punkte darunter nennen. */
.startpunkte{margin:1.35em 0 1.7em; max-width:54ch}
.startpunkte li{padding-bottom:.7em; line-height:1.5}
.startpunkte li:last-child{padding-bottom:0}
.startpunkte b{font-weight:700}
/* ---------- Die zwei Versprechen aus dem Namen ---------- */
/* Die beiden Karten sind als Frontplatte gedacht: der Titel steht wie eine
Gravur über dem Feld, die Trennlinie läuft bis an beide Kartenränder, und
unten sitzt die Statusleiste wie am Gerätefenster der Startseite. */
.versprechen{padding:0; overflow:hidden; position:relative}
.versprechen > *{margin-left:clamp(22px,2.6vw,30px); margin-right:clamp(22px,2.6vw,30px)}
/* Eyebrow-Marke direkt über dem Titel, statt eines freistehenden Strichs –
die Zählnummer verankert die Karte im Raster der beiden Versprechen. */
.versprechen-marke{
margin:0; padding:clamp(22px,2.6vw,28px) clamp(22px,2.6vw,30px) 0;
display:flex; align-items:center; gap:11px;
font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:var(--rot-text) !important;
}
/* Statt einer leeren roten Kugel: ein Zählwerk wie am Bandgerät, dazu eine
Kontrolllampe und eine Linie, die den Rest der Zeile ausfüllt – die Marke
liest sich jetzt wie ein Typenschild, nicht wie ein Platzhalter-Badge. */
.versprechen-marke .zaehlwerk{gap:2px; flex:none}
.versprechen-marke .zaehlwerk span{width:18px; height:24px; font-size:.76rem; border-radius:2px}
.versprechen-marke .lampe{display:inline-block; width:7px; height:7px; border-radius:50%; flex:none;
background:var(--rot-flae); box-shadow:0 0 8px 1px rgba(227,69,84,.55)}
@media (prefers-reduced-motion:no-preference){
.versprechen-marke .lampe{animation:puls 3.4s ease-in-out infinite}
}
.versprechen-marke::after{content:""; flex:1 1 auto; height:1px; background:var(--gravur-stark); margin-left:2px}
.versprechen h2, .versprechen h3{
font-size:clamp(1.7rem,3.6vw,2.15rem); font-weight:700; letter-spacing:-.02em;
margin:.35em 0 .7em; padding:0 clamp(22px,2.6vw,30px) .5em;
border-bottom:1px solid var(--gravur-stark);
}
/* Titelzeile randvoll: die Linie soll die Platte teilen, nicht den Text unterstreichen */
.versprechen h2, .versprechen h3{margin-left:0; margin-right:0; padding-left:clamp(22px,2.6vw,30px); padding-right:clamp(22px,2.6vw,30px)}
/* Statusleiste am Fuß, randvoll und etwas dunkler abgesetzt */
.kartenleiste{
margin:auto 0 0 !important; padding:13px clamp(22px,2.6vw,30px) 14px;
display:flex; align-items:center; justify-content:space-between; gap:10px 16px;
flex-wrap:wrap;
background:var(--sand); border-top:1px solid var(--gravur);
font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
color:var(--grau) !important;
}
.kartenleiste .lampe{display:inline-block; width:7px; height:7px; border-radius:50%;
background:var(--rot-flae); margin-right:.75em; vertical-align:1px;
box-shadow:0 0 8px 1px rgba(227,69,84,.55)}
@media (prefers-reduced-motion:no-preference){
.kartenleiste .lampe{animation:puls 3.4s ease-in-out infinite}
}
@media (max-width:480px){
.kartenleiste{font-size:10px; letter-spacing:.12em}
}
.versprechen p{color:var(--grau)}
.versprechen p b{color:var(--dunkel); font-weight:700}
/* Aufzählung in den beiden Karten: kleiner Punkt, enge Zeilen, damit die
Karte eine Liste bleibt und kein zweiter Absatz wird. */
.versprechen .punkte{margin-top:1.25em; margin-bottom:0}
.versprechen .punkte li{padding:0 0 .75em 22px; font-size:.97rem; line-height:1.5; color:var(--grau)}
.versprechen .punkte li::before{width:7px; height:7px; top:.66em}
.versprechen .punkte b{color:var(--dunkel); font-weight:700}
/* Lora Kursiv hat dünne Striche: in --grau wirkt der Satz trotz 8:1 blass.
Deshalb hier die volle Textfarbe – die Kursive unterscheidet ihn genug. */
/* margin-top:auto schiebt die Schlusszeile beider Karten auf dieselbe Höhe,
direkt über die Statusleiste – sonst haengt sie in der kuerzeren Karte. */
.versprechen .schluss{margin-top:auto; padding-top:1.4em;
margin-bottom:clamp(22px,2.6vw,28px);
border-top:1px solid var(--gravur); color:var(--dunkel)}
/* Der Schluss des Abschnitts: was aus „ungestört“ und „analog“ zusammen entsteht. */
.wirkung{
margin:clamp(30px,3.8vw,46px) 0 0; padding-top:clamp(20px,2.4vw,28px);
border-top:1px solid var(--gravur-stark);
font-size:clamp(1.25rem,3vw,1.72rem); font-weight:700; line-height:1.3;
letter-spacing:-.012em;
}
.wirkung em{font-style:normal; color:var(--rot-text)}
.versprechen p + p{margin-top:1em}
/* Die Zeichnungen sitzen in einer eingelassenen Zone am Fuß der Karte,
mit Schild darüber – so wie ein Bedienfeld auf der Frontplatte.
Beide Karten bekommen dieselbe Fußhöhe, egal wie viel darin steht. */
.versprechen{overflow:hidden}
/* ---------- Rückmeldungen ----------
Echte Stimmen aus den ersten privaten Hörabenden. Hell, aber mit echter
Tiefe statt Creme-auf-Sand ohne Kontrast: Die Karte schwebt als helles,
randloses Panel mit warmem Schlagschatten über dem Sand-Grund, oben ein
schmaler roter Streifen wie ein Etikett. Alle drei Karten stehen auf
derselben Höhe (align-items:stretch); damit unterschiedlich lange
Zitate dabei keine Lücke über der Fußzeile aufreißen, ist die Karte
selbst ein Flex-Column und die Fußzeile wird per margin-top:auto ganz
unten verankert. */
.stimme{margin:0; display:flex; flex-direction:column;
background:var(--creme-hoch); border:1px solid var(--gravur-stark);
border-left:5px solid var(--rot-flae); border-radius:var(--radius);
padding:clamp(28px,3vw,34px) clamp(26px,2.8vw,32px);
box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 38px -26px rgba(33,26,20,.5);
transition:transform .16s ease, box-shadow .16s ease}
.stimme:hover{transform:translateY(-3px);
box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 24px 46px -24px rgba(33,26,20,.55)}
.stimme p{font-family:var(--serif); font-style:italic;
font-size:clamp(1.12rem,2.3vw,1.3rem); line-height:1.5; margin:0; color:var(--dunkel)}
.stimme footer{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:14px;
border-top:1px solid var(--gravur)}
.stimme footer::before{content:""; width:22px; height:1px; background:var(--rot-flae); flex:none}
.stimme footer b{font-size:.95rem; font-weight:700; font-style:normal; color:var(--dunkel)}
/* ---------- Die Alben ----------
Wie ein Register auf einer Bandschachtel: Haarlinie oben, Künstler
gesiebdruckt, darunter Titel, Jahr und Laufzeit. Dazu ein kleines
Cover als Wiedererkennung – dieselbe Cover-Art-Archive-Einbindung
wie auf der Albumseite, nur klein und ohne Bildzitat-Kasten (der
steht auf der Albumseite, zu der die Karte führt). */
.alben{
list-style:none; margin:clamp(30px,3.8vw,46px) 0 0; padding:0;
display:grid; gap:0 clamp(24px,3.2vw,44px); grid-template-columns:1fr;
}
@media (min-width:620px){ .alben{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .alben{grid-template-columns:repeat(3,1fr)} }
.album{border-top:1px solid var(--gravur-stark); padding:15px 0 19px}
.album > a{display:flex; gap:16px; align-items:flex-start}
.album-cover{
flex:none; width:72px; height:72px; margin-top:.15em; border-radius:5px;
overflow:hidden; position:relative; background:var(--grund,var(--dunkel2));
box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
}
.album-cover .hc-mini{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-family:var(--serif); font-weight:700; font-style:italic; font-size:1.7rem;
color:rgba(242,227,196,.82);
}
.album-cover img{
position:relative; display:block; width:100%; height:100%; object-fit:cover;
}
.album-inhalt{min-width:0; flex:1}
.album-kuenstler{
margin:0 0 .1em; font-size:.78rem; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--grau);
}
.album-titel{
margin:0 0 .5em; font-size:clamp(1.3rem,2.8vw,1.62rem); font-weight:700;
line-height:1.1; letter-spacing:-.018em; color:var(--dunkel);
}
.album-jahr{margin:0 0 .55em; font-size:.86rem; font-weight:700; color:var(--grau)}
/* Laufzeit wie am Gerät abgelesen: das Zählwerk nennt die Minuten,
der Streifen daneben zeigt sie im Verhältnis zur längsten Seite. */
.album-zeit{display:flex; align-items:center; gap:8px; margin:0 0 .9em}
.album-zeit .zaehlwerk{gap:2px; flex:none}
.album-zeit .zaehlwerk span{
width:17px; height:23px; border-radius:2px; font-size:.82rem;
box-shadow:inset 0 -5px 7px -5px rgba(0,0,0,.85), inset 0 5px 7px -5px rgba(255,255,255,.16);
}
.album-zeit .min{
flex:none; font-size:9px; font-weight:700; letter-spacing:.18em;
text-transform:uppercase; color:var(--grau);
}
.album-band{
flex:1; min-width:0; margin:0; height:6px; border-radius:2px;
background:var(--band); box-shadow:inset 0 0 0 1px rgba(242,227,196,.14); overflow:hidden;
}
.album-band span{display:block; height:100%; background:rgba(227,69,84,.55)}
.album-warum{margin:0; font-size:.93rem; line-height:1.55; color:var(--grau)}
/* ---------- Die Albumkarten sind Verweise ----------
Die ganze Karte ist anklickbar; der Pfeil am Fuß macht sichtbar, dass es
weitergeht. Farbe und Rhythmus bleiben wie bisher – es kommt nur ein
Hinweis dazu, kein Kasten. */
.album > a{text-decoration:none; color:inherit}
.album > a:hover .album-titel{color:var(--rot-text)}
.album > a:hover .album-mehr{text-decoration:underline}
.album-mehr{display:block; margin-top:.9em; font-size:.88rem; font-weight:700;
color:var(--rot-text)}
/* ==========================================================================
ALBUMSEITE – Vorlage für alle Album-Storys
Zweispaltig: links die Erzählung, rechts Cover, Tracklist und Zitat.
Die Spalten sind durch eine Haarlinie getrennt, nicht durch Kästen –
wie die Trennlinien auf einer Frontplatte.
Aufbau der Seite: Kopf (volle Breite) · Raster (Text + Randspalte) ·
Weiterhören (volle Breite).
========================================================================== */
.albumkopf{padding:0}
.albumkopf .hook{
margin:.1em 0 .7em; font-family:var(--serif); font-style:italic;
font-size:clamp(1.12rem,2.5vw,1.38rem); line-height:1.4; color:var(--rot-text);
max-width:34ch;
}
.albumkopf .lead{max-width:52ch}
.albumkopf .datenzeile{margin-bottom:0}
/* ---------- Das Raster ---------- */
/* Drei Teile in der Reihenfolge, in der sie auf dem Telefon gelesen werden:
erst der Kopf, dann Cover und Tracklist, dann die Erzählung. Ab 980px rückt
die Randspalte nach rechts und läuft über beide Zeilen. */
.albumraster{
display:grid; gap:clamp(30px,3.6vw,44px);
grid-template-columns:minmax(0,1fr);
padding-top:clamp(26px,3.4vw,40px);
padding-bottom:clamp(40px,5vw,64px);
}
@media (min-width:980px){
.albumraster{grid-template-columns:minmax(0,1fr) 344px; gap:0}
.albumkopf{grid-column:1; grid-row:1; padding-right:clamp(32px,3.6vw,52px)}
/* Auf dem Desktop liegt gap:0 (s.o.), damit die rechte Randspalte über
beide Zeilen durchläuft – dadurch fehlte hier sonst jeder Abstand
zwischen der Hörprobe und "In diesem Artikel". */
.albumtext{grid-column:1; grid-row:2; padding-right:clamp(32px,3.6vw,52px);
margin-top:clamp(34px,4vw,50px)}
.albumrand{grid-column:2; grid-row:1 / span 2; position:relative;
padding-left:clamp(32px,3.6vw,52px); border-left:1px solid var(--gravur)}
}
/* ---------- Inhaltsverzeichnis ---------- */
.inhaltsliste{
list-style:none; margin:0 0 clamp(34px,4.2vw,50px); padding:4px 0 0;
display:grid; gap:11px clamp(24px,3vw,40px); grid-template-columns:1fr;
}
@media (min-width:620px){ .inhaltsliste{grid-template-columns:1fr 1fr} }
@media (min-width:620px){ .inhaltsliste-alben{grid-auto-flow:column; grid-template-rows:repeat(3,auto)} }
.inhaltsliste a{
display:grid; grid-template-columns:2.4em 1fr; gap:.2em; align-items:baseline;
text-decoration:none; color:var(--dunkel); font-size:.97rem; line-height:1.4;
}
.inhaltsliste a .nr{font-weight:700; color:var(--rot-text); font-size:.9rem; letter-spacing:.06em}
.inhaltsliste a:hover span:last-child{text-decoration:underline}
/* Kurzes "Auf dieser Seite"-Verzeichnis auf sehr langen Landingpages
(Anlage, Bandmaschine) – sitzt direkt im Hero-Bereich, deshalb eigener
Abstand nach oben plus ein dünner Trennstrich zur Kennzahlenzeile
darüber, statt eine ganze neue Sektion samt Section-Padding zu öffnen. */
.seiten-inhalt{margin-top:clamp(30px,3.8vw,46px); padding-top:clamp(22px,2.8vw,32px);
border-top:1px solid var(--gravur)}
.seiten-inhalt .inhaltsliste{margin-bottom:0}
/* ---------- Die fünf Kapitel ---------- */
.kapitel{margin:clamp(38px,4.6vw,56px) 0 .7em; display:grid;
grid-template-columns:max-content 1fr; gap:0 .45em; align-items:baseline;
font-size:clamp(1.3rem,2.9vw,1.62rem); line-height:1.25; letter-spacing:-.012em}
.kapitel:first-child{margin-top:0}
.kapitel .nr{color:var(--rot-text); font-size:.82em; letter-spacing:.04em;
display:inline-flex; align-items:center; gap:.5em}
/* Dasselbe kleine Signatur-Motiv wie bei den Abschnitts-Eyebrows (.schild),
jetzt auch vor den großen, nummerierten Kapitelüberschriften der
Album-Artikel – bindet Nummer und Überschrift optisch zusammen. */
.kapitel .nr::after{
content:""; width:37px; height:11px; flex:none;
background-image:linear-gradient(var(--rot),var(--rot)), radial-gradient(circle closest-side, var(--rot) 99%, transparent 100%);
background-size:22px 2.5px, 11px 11px;
background-position:left center, right center;
background-repeat:no-repeat;
}
.albumtext > p{max-width:64ch; line-height:1.68; margin-bottom:1.05em}
.albumtext > p.gross{max-width:48ch}
/* ---------- Hörmoment und Infokasten ----------
Beides sind Einschübe im Fließtext, keine Überschriften: deshalb stehen
sie nicht im Inhaltsverzeichnis und tragen kein h2. Der Hörmoment ist
eine Höranweisung – kein Abspieler, kein Ton, kein Bild. */
.einschub{
margin:clamp(26px,3.2vw,36px) 0; padding:clamp(18px,2.2vw,24px) clamp(20px,2.4vw,28px);
background:var(--creme-hoch); border:1px solid var(--gravur);
border-left:3px solid var(--rot-flae); border-radius:0 var(--radius) var(--radius) 0;
max-width:64ch;
}
.einschub .schild{margin-bottom:.7em}
.einschub h3{margin:0 0 .15em; font-size:1.12rem; letter-spacing:-.008em}
.einschub .zeitmarke{margin:0 0 .6em; font-size:.95rem; font-weight:700; color:var(--rot-text)}
.einschub p{margin:0; font-size:.97rem; line-height:1.58; color:var(--grau)}
.einschub p + p{margin-top:.7em}
.einschub.anker{border-left-color:var(--dunkel); background:transparent}
/* ---------- Randspalte: Cover ---------- */
.coverbild{margin:0 0 14px}
.coverbild img{display:block; width:100%; height:auto; border-radius:6px;
border:1px solid var(--gravur-stark)}
.coverbild figcaption{
margin-top:9px; font-size:.8rem; line-height:1.45; color:var(--grau);
}
/* Der Kasten, der das Cover redaktionell einordnet. Er ist der Grund, aus dem
die Abbildung hier stehen darf: ein Bildzitat braucht einen Text, der sich
mit dem Bild befasst, und die Nennung der Urheber. Beides steht hier. */
.coverkasten{
margin:0 0 clamp(24px,3vw,32px); padding-top:16px;
border-top:1px solid var(--gravur-stark);
}
.coverkasten p{margin:0 0 .8em; font-size:.9rem; line-height:1.55; color:var(--grau)}
.coverkasten p:last-child{margin-bottom:0}
.coverkasten .urheber{
margin-top:.9em; padding-top:.8em; border-top:1px solid var(--gravur);
font-size:.8rem; line-height:1.5;
}
.coverkasten .urheber b{font-weight:700; color:var(--dunkel)}
/* ---------- Randspalte: Tracklist ---------- */
.tracklist{
margin:0 0 clamp(24px,3vw,32px); padding:clamp(15px,1.8vw,18px);
background:var(--creme-hoch); border:1px solid var(--gravur); border-radius:var(--radius);
}
.tracklist .schild{margin-bottom:.9em}
.tracklist ol{list-style:none; margin:0; padding:0; counter-reset:spur}
.tracklist li{
display:grid; grid-template-columns:1.9em 1fr auto; gap:.5em; align-items:baseline;
padding:8px 0; border-top:1px solid var(--gravur); font-size:.9rem; line-height:1.35;
}
.tracklist li:first-child{border-top:none}
.tracklist li::before{counter-increment:spur; content:counter(spur,decimal-leading-zero);
font-size:.8rem; font-weight:700; color:var(--rot-text); letter-spacing:.06em}
.tracklist .dauer{font-size:.86rem; font-weight:700; color:var(--grau); font-variant-numeric:tabular-nums}
/* Nicht .fuss nennen: diesen Klassennamen trägt schon der Seitenfuß, und der
bringt eine dunkle Fläche mit. */
.tracklist .zeitnote{margin:.9em 0 0; padding-top:.7em; border-top:1px solid var(--gravur-stark);
font-size:.78rem; line-height:1.45; color:var(--grau)}
/* ---------- Randspalte: Zitat ---------- */
.randzitat{margin:0; padding-left:clamp(16px,2vw,20px); border-left:3px solid var(--rot-flae)}
.randzitat p{
margin:0; font-family:var(--serif); font-style:italic;
font-size:clamp(1.1rem,2.2vw,1.26rem); line-height:1.42; color:var(--dunkel);
}
.randzitat footer{margin-top:1em; font-size:.82rem; line-height:1.5; color:var(--grau)}
.randzitat footer b{display:block; font-size:9.5px; font-weight:700;
letter-spacing:.18em; text-transform:uppercase; color:var(--dunkel); margin-bottom:3px}
/* ---------- Schluss und Weiterhören ---------- */
.albumfrage{
margin:clamp(34px,4.2vw,48px) 0 0; padding-top:clamp(22px,2.6vw,30px);
border-top:1px solid var(--gravur-stark);
font-size:clamp(1.16rem,2.5vw,1.45rem); font-weight:700; line-height:1.34;
letter-spacing:-.01em; max-width:30ch;
}
.weiterhoeren{padding:clamp(34px,4.4vw,52px) 0 clamp(46px,6vw,70px);
border-top:1px solid var(--gravur-stark)}
.weiterhoeren .schild{margin-bottom:clamp(18px,2.2vw,26px)}
.weiterliste{display:grid; gap:clamp(14px,1.8vw,20px); grid-template-columns:1fr; list-style:none; margin:0; padding:0}
@media (min-width:780px){ .weiterliste{grid-template-columns:repeat(3,1fr)} }
.weiterliste a{
display:flex; flex-direction:column; height:100%; text-decoration:none; color:var(--dunkel);
background:var(--creme-hoch); border:1px solid var(--gravur);
border-top:3px solid var(--rot-flae); border-radius:0 0 var(--radius) var(--radius);
padding:clamp(18px,2.2vw,24px);
transition:transform .14s ease, box-shadow .14s ease;
}
.weiterliste a:hover{transform:translateY(-2px); box-shadow:0 6px 18px -12px rgba(33,26,20,.55)}
.weiterliste .kuenstler{margin:0 0 .1em; font-size:.8rem; font-weight:700;
letter-spacing:.14em; text-transform:uppercase; color:var(--grau)}
.weiterliste h3{margin:0 0 .12em; font-size:1.2rem; line-height:1.15; letter-spacing:-.012em}
.weiterliste .jahr{margin:0 0 .7em; font-size:.84rem; font-weight:700; color:var(--grau)}
.weiterliste .grund{margin:0 0 1em; font-size:.92rem; line-height:1.5; color:var(--grau)}
.weiterliste .pfeil{margin-top:auto; font-size:.86rem; font-weight:700; color:var(--rot-text)}
.weiterliste a:hover .pfeil{text-decoration:underline}
.weiterliste-cover{
flex:none; width:56px; height:56px; margin-bottom:.9em; border-radius:6px;
overflow:hidden; position:relative; background:var(--grund,var(--dunkel2));
box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
}
.weiterliste-cover .hc-mini{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-family:var(--serif); font-weight:700; font-style:italic; font-size:1.3rem;
color:rgba(242,227,196,.82);
}
.weiterliste-cover img{position:relative; display:block; width:100%; height:100%; object-fit:cover}
/* ---------- Kopf einer Albumseite ---------- */
/* Der Name der Band steht direkt unter dem Albumtitel und darf mitreden:
gerade statt kursiv, in der Schrift der Seite, deutlich größer. */
.albumkopf-kuenstler{margin:-.06em 0 .6em; font-weight:700;
font-size:clamp(1.62rem,4vw,2.35rem); line-height:1.1; letter-spacing:-.018em;
color:var(--rot-text)}
.artikel .albumdaten{margin-top:clamp(26px,3.2vw,36px); max-width:none}
/* Studionamen sind lang – hier darf die Angabe umbrechen, sonst schiebt sie
auf schmalen Geräten die ganze Seite zur Seite. */
.albumdaten .wert{white-space:normal}
.albenschluss{margin-top:clamp(26px,3.2vw,38px); max-width:none}
#alben .gross{max-width:none}
/* ---------- Anlässe ----------
Zwei Spalten, jede Zeile durch eine Haarlinie getrennt: eine Liste zum
Überfliegen, in der jemand seine eigene Situation wiederfinden soll. */
/* Die Anlässe liegen in einem dunklen, eingelassenen Feld – die erste dunkle
Fläche der Seite. Sie fängt den Blick, weil hier entschieden wird, ob der
Leser sich wiederfindet. Große Zeilen zum Überfliegen, roter Strich als Takt. */
.anlaesse{background:var(--dunkel); border-radius:14px;
padding:clamp(26px,3.4vw,42px) clamp(22px,3vw,38px) clamp(14px,2vw,24px);
box-shadow:inset 0 1px 0 rgba(242,227,196,.10), 0 20px 40px -34px rgba(33,26,20,.8)}
.anlaesse .spalten{display:grid; gap:clamp(22px,3vw,44px); grid-template-columns:1fr}
@media (min-width:700px){ .anlaesse .spalten{grid-template-columns:1fr 1fr} }
.anlaesse .schild{color:var(--rot-hell); margin-bottom:1.15em}
.anlaesse ul{list-style:none; margin:0; padding:0}
.anlaesse li{position:relative; padding:0 0 1.15em 30px; line-height:1.28}
.anlaesse li::before{content:""; position:absolute; left:0; top:.62em;
width:18px; height:2px; background:var(--rot-hell)}
.anlaesse li b{display:block; font-size:clamp(1.08rem,2.1vw,1.24rem); font-weight:700;
letter-spacing:-.012em; color:var(--creme)}
.anlaesse li span{display:block; margin-top:4px; font-size:.9rem; color:var(--grau-hell)}
/* Untereinander brauchen die beiden Gruppen eine sichtbare Fuge. */
@media (max-width:699px){
.anlaesse .spalten > div + div{padding-top:clamp(18px,5vw,24px);
border-top:1px solid var(--gravur-d)}
}
/* Helles Gegenstück zu .anlaesse: dieselbe Zwei-Spalten-Liste (fette Zeile +
Erläuterung, roter Strich als Marke), aber ohne dunkles Feld – für Blöcke,
die auf hellem/sandfarbenem Grund stehen sollen statt in einem Kasten. */
.anlaesse-hell .spalten{display:grid; gap:clamp(22px,3vw,44px); grid-template-columns:1fr}
@media (min-width:700px){ .anlaesse-hell .spalten{grid-template-columns:1fr 1fr} }
.anlaesse-hell ul{list-style:none; margin:0; padding:0}
.anlaesse-hell li{position:relative; padding:0 0 1.15em 30px; line-height:1.28}
.anlaesse-hell li::before{content:""; position:absolute; left:0; top:.62em;
width:18px; height:2px; background:var(--rot-flae)}
.anlaesse-hell li b{display:block; font-size:clamp(1.08rem,2.1vw,1.24rem); font-weight:700;
letter-spacing:-.012em; color:var(--dunkel)}
.anlaesse-hell li span{display:block; margin-top:4px; font-size:.9rem; color:var(--grau)}
@media (max-width:699px){
.anlaesse-hell .spalten > div + div{padding-top:clamp(18px,5vw,24px);
border-top:1px solid var(--gravur-stark)}
}
/* ==========================================================================
Der Gutschein
Eine Karte, kein Kasten: Abrisskante links, Siebdruck oben, zwei Zeilen
zum Ausfüllen. Sie liegt leicht schräg, damit sie wie ein Gegenstand
wirkt und nicht wie ein weiteres Feld der Seite.
========================================================================== */
.geschenk{margin-top:clamp(30px,3.8vw,46px); align-items:start}
@media (min-width:840px){ .geschenk{grid-template-columns:1fr 1.05fr} }
.schritte-schmal{list-style:none; counter-reset:sr; margin:0; padding:0}
.schritte-schmal li{
counter-increment:sr; position:relative; padding:0 0 1.1em 46px;
color:var(--grau); line-height:1.6;
}
.schritte-schmal li::before{
content:counter(sr, decimal-leading-zero);
position:absolute; left:0; top:.06em;
font-size:10.5px; font-weight:700; letter-spacing:.16em; color:var(--rot-text);
border-bottom:1px solid var(--gravur-stark); padding-bottom:2px; min-width:30px;
}
.schritte-schmal li:last-child{padding-bottom:0}
.schritte-schmal b{color:var(--dunkel); font-weight:700}
.gutschein{
display:grid; grid-template-columns:38px minmax(0,1fr);
background:var(--creme-hoch); border:1px solid var(--gravur-stark);
border-radius:12px; overflow:hidden; position:relative;
transform:rotate(-1.3deg);
box-shadow:0 26px 48px -30px rgba(33,26,20,.75), 0 2px 0 rgba(33,26,20,.06);
}
.gs-abriss{
background:var(--sand); border-right:2px dashed var(--gravur-stark);
display:flex; align-items:center; justify-content:center;
}
.gs-abriss span{
writing-mode:vertical-rl; transform:rotate(180deg);
font-size:9px; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
color:var(--grau); white-space:nowrap;
}
/* die beiden Stanzlöcher an der Abrisskante */
.gutschein::before,.gutschein::after{
content:""; position:absolute; left:38px; width:13px; height:13px;
border-radius:50%; background:var(--creme); transform:translateX(-50%);
box-shadow:inset 0 0 0 1px var(--gravur);
}
.gutschein::before{top:-7px}
.gutschein::after{bottom:-7px}
.gs-feld{padding:clamp(20px,2.6vw,30px) clamp(20px,2.8vw,32px)}
.gs-kopf{
margin:0 0 1.5em; font-size:10.5px; font-weight:700; letter-spacing:.22em;
text-transform:uppercase; color:var(--rot-text);
}
.gs-kopf i{font-style:normal; color:var(--grau)}
.gs-zeile{
margin:0 0 1.05em; display:flex; align-items:baseline; gap:.85em;
border-bottom:1px solid var(--gravur-stark); padding-bottom:.5em;
}
.gs-marke{
flex:none; font-size:9.5px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--grau); min-width:34px;
}
.gs-zeile b{
font-family:var(--serif); font-style:italic; font-weight:400;
font-size:clamp(1.15rem,2.6vw,1.42rem); line-height:1.25; color:var(--dunkel);
overflow-wrap:anywhere;
}
.gs-zeile b.gs-offen{color:var(--grau); opacity:.65}
.gs-klein{
margin:1.6em 0 0; font-size:.84rem; line-height:1.55; color:var(--grau);
}
.gs-klein i{font-style:normal; color:var(--rot-text)}
.gs-eingabe{margin-top:clamp(26px,3.2vw,36px)}
.gs-eingabe label{
display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--grau); margin:0 0 7px;
}
.gs-eingabe label + input{margin-bottom:16px}
.gs-eingabe input{
width:100%; font:inherit; font-size:1rem; color:var(--dunkel);
background:#fff; border:2px solid var(--gravur-stark); border-radius:10px;
padding:12px 15px;
}
.gs-eingabe input:focus{border-color:var(--rot-flae)}
.gs-eingabe input::placeholder{color:#8d8073}
.gs-eingabe .knopf{margin-top:4px}
.gs-eingabe .klein{margin-top:12px; max-width:38ch}
/* ---------- Gutschein: die drei Schritte ---------- */
.schritte{list-style:none; margin:clamp(30px,3.6vw,44px) 0 0; padding:0;
display:grid; gap:clamp(22px,3vw,36px); grid-template-columns:1fr}
@media (min-width:760px){ .schritte{grid-template-columns:repeat(3,1fr)} }
.schritte li{border-top:2px solid var(--dunkel); padding-top:16px}
.schritte h3{margin:0 0 .5em; font-size:1.28rem}
.schritte p:not(.schild){font-size:.96rem; color:var(--grau); max-width:34ch}
/* ==========================================================================
Der Anfrage-Flow (anfrage.html)
========================================================================== */
.flow{padding:clamp(34px,5vw,64px) 0 clamp(60px,8vw,96px); min-height:62vh}
.flow .huelle{max-width:760px}
/* Auf der Startseite ist das Schild nur eine Marke am Rand. Im Flow ist es
die einzige Angabe, in welchem Schritt man steckt – deshalb hier größer
und mit weniger Sperrung, damit es nicht auseinanderläuft. */
.fortschritt{margin-bottom:clamp(28px,4vw,44px)}
.fortschritt .schild{font-size:15px; letter-spacing:.13em; gap:.8em; margin-bottom:1.05em}
.fortschritt .schild .idx{gap:.8em}
.fortschritt .schild .idx::after{width:32px}
@media (max-width:480px){ .fortschritt .schild{font-size:13.5px; letter-spacing:.11em} }
/* Die Schrittleiste: ein Feld je Frage, wie der Bandstreifen im Ablauf.
Erledigt = Bandbraun und anklickbar, jetzt = rot, kommt noch = Sand. */
.schrittleiste{display:flex; gap:5px; list-style:none; margin:0; padding:0}
.schrittleiste li{flex:1; min-width:0; display:flex}
.schrittleiste .feld{
flex:1; display:grid; place-content:center; height:30px; padding:0;
border:0; border-radius:3px; font:inherit; font-size:12px; font-weight:700;
font-variant-numeric:tabular-nums; line-height:1;
}
.schrittleiste .kommt{background:var(--sand); color:var(--grau);
box-shadow:inset 0 0 0 1px var(--gravur)}
.schrittleiste .jetzt{background:var(--rot-flae); color:#fff}
.schrittleiste .erledigt{
background:var(--band); color:var(--creme); cursor:pointer;
transition:background .12s ease, transform .12s ease;
}
.schrittleiste .erledigt:hover{background:var(--dunkel); transform:translateY(-1px)}
@media (max-width:480px){
.schrittleiste{gap:4px}
.schrittleiste .feld{height:26px; font-size:11px}
}
.schritt h1{font-size:clamp(1.95rem,5vw,2.85rem); max-width:20ch; margin-bottom:.38em}
.schritt-hilfe{color:var(--grau); max-width:48ch; margin:0 0 .4em}
.wahlliste{display:grid; gap:12px; margin-top:clamp(24px,3vw,34px)}
.wahlknopf{
display:block; width:100%; text-align:left; cursor:pointer;
background:var(--creme-hoch); border:2px solid var(--gravur-stark);
border-radius:var(--radius); padding:17px 20px; font:inherit; color:var(--dunkel);
transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.wahlknopf:hover{border-color:var(--dunkel); transform:translateY(-1px)}
.wahlknopf b{display:block; font-size:1.06rem; font-weight:700; line-height:1.3}
.wahlknopf span{display:block; margin-top:4px; font-size:.9rem; color:var(--grau)}
.wahlknopf.gewaehlt{border-color:var(--rot-flae); background:#fff}
.wahlknopf.gewaehlt b{color:var(--rot-text)}
.hinweiskasten{margin-top:16px; padding:15px 18px; border-left:3px solid var(--rot-flae);
background:var(--creme-hoch); border-radius:0 8px 8px 0;
font-size:.95rem; line-height:1.5; color:var(--grau); max-width:56ch}
.textfeld{margin-top:clamp(22px,3vw,32px)}
.textfeld input,.textfeld textarea,.felderblock input,.felderblock textarea{
width:100%; max-width:34rem; font:inherit; font-size:1.05rem; color:var(--dunkel);
background:var(--creme-hoch); border:2px solid var(--gravur-stark);
border-radius:10px; padding:14px 16px}
.textfeld textarea,.felderblock textarea{resize:vertical; min-height:110px; max-width:40rem}
.textfeld input:focus,.textfeld textarea:focus,.felderblock input:focus,.felderblock textarea:focus{
border-color:var(--rot-flae); background:#fff}
.textfeld input::placeholder,.textfeld textarea::placeholder,.felderblock input::placeholder,.felderblock textarea::placeholder{color:#8d8073}
.felderblock{margin-top:clamp(22px,3vw,32px); display:grid; gap:16px; max-width:34rem}
.felderblock label{display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--grau); margin-bottom:6px}
.zusammenfassung{display:grid; grid-template-columns:auto 1fr; gap:0 22px;
margin:clamp(22px,3vw,32px) 0 0; border-top:1px solid var(--gravur-stark)}
.zusammenfassung dt{padding:11px 0 0; font-size:9.5px; font-weight:700;
letter-spacing:.2em; text-transform:uppercase; color:var(--grau); align-self:center}
.zusammenfassung dd{margin:0; padding:10px 0; font-weight:500;
border-bottom:1px solid var(--gravur)}
.zusammenfassung dt{border-bottom:1px solid var(--gravur); padding-bottom:10px}
.einwilligung{display:flex; gap:12px; align-items:flex-start; margin-top:26px;
max-width:56ch; font-size:.94rem; line-height:1.5; color:var(--grau); cursor:pointer}
.einwilligung input{flex:none; width:19px; height:19px; margin-top:.15em; accent-color:var(--rot-flae)}
.flow-nav{display:flex; gap:12px; align-items:center; margin-top:clamp(28px,4vw,40px)}
.flow-nav .knopf[hidden]{display:none}
.flow-hilfe{margin-top:12px; font-size:.94rem; color:var(--rot-text); min-height:1.4em}
#danke h1,#notausgang h1{font-size:clamp(1.8rem,4.6vw,2.6rem); max-width:18ch}
#notausgang textarea{width:100%; margin-top:1.6em; font:inherit; font-size:.95rem;
background:var(--creme-hoch); border:2px solid var(--gravur-stark);
border-radius:10px; padding:14px 16px; color:var(--dunkel)}
.flow .fuss{margin-top:0}
/* ==========================================================================
Die Hörprobe
Kein Web-Player, sondern ein Bedienelement: eine runde Taste wie am
Gerät, daneben das Band als Fortschritt und darunter das Zählwerk.
Ein Bandzählwerk zählt Sekunden, nicht Minuten und Sekunden – deshalb
drei Ziffern und kein Doppelpunkt.
========================================================================== */
/* Als eigenes Band zwischen Startbereich und Angebot: eine schmale
eingelassene Zone, wie der Bedienstreifen zwischen zwei Feldern
einer Frontplatte. Deshalb Sand statt Creme und wenig Höhe. */
.hoerprobe{margin-top:clamp(30px,3.8vw,44px); max-width:34rem}
.hoerprobe[hidden]{display:none}
.hoerprobe .schild{margin-bottom:1.05em}
.spieler{display:flex; align-items:center; gap:clamp(14px,2vw,20px)}
.spieltaste{
flex:none; width:58px; height:58px; padding:0; cursor:pointer;
border-radius:50%; background:var(--rot-flae); border:2px solid var(--rot-flae);
display:flex; align-items:center; justify-content:center; line-height:0;
transition:background .13s ease, transform .13s ease, border-color .13s ease;
}
.spieltaste:hover{background:var(--rot-tief); border-color:var(--rot-tief);
transform:translateY(-1px)}
/* Maße ausdrücklich in CSS, nicht nur als Attribut: sonst zieht der
Flex-Container das SVG in die Länge und das Dreieck verschwindet. */
.spieltaste svg{fill:#fff; flex:none}
/* Die Klassen heißen hp-*, weil .start bereits der Startbereich der Seite
ist – ein SVG mit dieser Klasse erbt dessen Innenabstand und wird 146px
hoch. Eigene Bauteile bekommen ein eigenes Kürzel. */
.spieltaste .hp-start{width:19px; height:21px; margin-left:3px} /* optisch mittig */
.spieltaste .hp-pause{width:17px; height:20px}
.spieltaste .hp-pause,
.hoerprobe.laeuft .spieltaste .hp-start{display:none}
.hoerprobe.laeuft .spieltaste .hp-pause{display:block}
.spielweg{flex:1; min-width:0}
.spielband{height:8px; border-radius:2px; background:var(--band);
box-shadow:inset 0 0 0 1px var(--gravur-d); overflow:hidden}
.spielstand{height:100%; width:0; background:var(--rot); border-radius:2px;
transition:width .2s linear}
.spielfuss{display:flex; align-items:center; gap:14px; margin-top:13px; flex-wrap:wrap}
.spielfuss .klein{margin:0}
/* Auf der dunklen Fläche sind die Ziffernrollen schwarz auf Schwarz –
hier bekommen sie das warme Licht des Zifferblatts. */
.dunkel .zaehlwerk span{background:#150F09; color:var(--vu)}
/* Die Hörprobe steht jetzt im dunklen Ablauf: das Band braucht dort mehr
Kontrast, und der Hinweis darunter die helle Textfarbe. */
.dunkel .spielband{background:#150F09; box-shadow:inset 0 0 0 1px var(--gravur-d)}
.dunkel .spielfuss .klein{color:var(--grau-hell)}
@media (max-width:480px){
.spieltaste{width:52px; height:52px}
.zaehlwerk span{width:20px; height:27px; font-size:.88rem}
}
/* ==========================================================================
Der Briefkasten – Anmeldung zum Newsletter
Ein niedrigschwelliger Schritt für alle, die noch nicht buchen wollen.
Deshalb ein Feld, kein Häkchen und keine Pflichtangaben außer der Adresse.
========================================================================== */
.brief{
margin-top:clamp(34px,4.4vw,52px);
padding:clamp(24px,3vw,34px);
background:var(--creme-hoch); border:1px solid var(--gravur);
border-radius:var(--radius);
/* minmax(0,…) statt 1fr: Rasterfelder schrumpfen sonst nicht unter ihre
Inhaltsbreite, und das Eingabefeld schiebt die Seite seitlich hinaus. */
display:grid; grid-template-columns:minmax(0,1fr);
gap:clamp(20px,2.6vw,34px); align-items:start;
}
.brief[hidden]{display:none}
@media (min-width:840px){ .brief{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.brief h3{margin:0 0 .45em; font-size:1.28rem}
.brief-text p{color:var(--grau); max-width:44ch; margin:0}
.brief-form label{
display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--grau); margin-bottom:8px;
}
.brief-zeile{display:flex; gap:10px; flex-wrap:wrap}
.brief-zeile input{
flex:1 1 15rem; min-width:0; font:inherit; font-size:1rem; color:var(--dunkel);
background:#fff; border:2px solid var(--gravur-stark); border-radius:10px;
padding:13px 15px;
}
.brief-zeile input:focus{border-color:var(--rot-flae)}
.brief-zeile input::placeholder{color:#8d8073}
.brief-zeile .knopf{flex:none; padding:13px 26px; font-size:.96rem; cursor:pointer}
.brief-hinweis{margin:13px 0 0; font-size:.86rem; line-height:1.5; color:var(--grau); max-width:48ch}
.brief-hinweis.fehler{color:var(--rot-text); font-weight:500}
/* Nach dem Eintragen bleibt nur die Bestätigung stehen. */
.brief.fertig .brief-form{display:none}
.brief-danke{margin-top:.6em}
.brief-danke b{display:block; font-size:1.06rem; margin-bottom:.35em}
.brief-danke span{color:var(--grau); font-size:.96rem}
/* Der Honigtopf im Anmeldeformular darf für niemanden sichtbar oder
erreichbar sein – auch nicht für Vorlesegeräte. */
.honigtopf{display:none !important}
/* ===== Variante 10.09.2026: klarere frühe Zielgruppenführung ===== */
.hero-manifest{
display:grid; grid-template-columns:1fr 1fr; gap:0;
margin:1.55em 0 1.55em; border-top:1px solid var(--gravur-stark); border-bottom:1px solid var(--gravur-stark)
}
.hero-manifest span{
padding:13px 10px 13px 0; font-size:clamp(1rem,2vw,1.22rem); font-weight:700;
border-bottom:1px solid var(--gravur); letter-spacing:-.01em
}
.hero-manifest span:nth-last-child(-n+2){border-bottom:0}
.hero-manifest span:nth-child(even){padding-left:18px; border-left:1px solid var(--gravur)}
.wegweiser{
max-width:66ch; margin:clamp(28px,3.5vw,42px) 0 0; padding:18px 0;
border-top:1px solid var(--gravur-stark); border-bottom:1px solid var(--gravur-stark);
font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2vw,1.24rem)
}
#unternehmen,#privat{scroll-margin-top:110px}
.preiszone{
margin-top:clamp(30px,4vw,48px); padding:clamp(20px,2.6vw,28px);
background:var(--creme-hoch); border:1px solid var(--gravur-stark);
border-left:5px solid var(--band); border-radius:var(--radius); max-width:760px
}
.preiszone .preisgross{font-size:clamp(2.1rem,5vw,3.8rem); font-weight:700; letter-spacing:-.045em; line-height:1; color:var(--dunkel); margin:.28em 0 .35em}
.preiszone > p:not(.schild):not(.preisgross){max-width:62ch}
.dunkel .preiszone{background:var(--dunkel2); border-color:var(--gravur-d)}
@media (max-width:619px){
.hero-manifest{grid-template-columns:1fr}
.hero-manifest span,.hero-manifest span:nth-child(even){padding:11px 0; border-left:0; border-bottom:1px solid var(--gravur)}
.hero-manifest span:last-child{border-bottom:0}
}
/* ===== Variante 10.09.2026: Startseite + Zielgruppen-Landingpages ===== */
/* ---------- Die Weiche: zwei Wege ----------
Hier entscheidet der Besucher, wer er ist. Deshalb keine Bilder: Ein Foto
der Maschine sagt bei beiden Karten dasselbe und trennt sie nicht. Was
trennt, sind die drei Anlässe – und jede Karte ist im Ganzen anklickbar,
mit einer Taste am Fuß statt einer Pfeilzeile. */
/* Diese Sektion hat bewusst keine eigene Überschrift – die beiden Karten
sagen selbst, worum es geht. Das Schild braucht dann etwas mehr Luft, und
die Kartentitel sind hier h2, damit die Gliederung stimmt. */
.schild.ohne-ueberschrift{margin-bottom:clamp(24px,3.2vw,40px)}
.wege{display:grid; gap:clamp(16px,2vw,22px); grid-template-columns:1fr}
@media (min-width:820px){ .wege{grid-template-columns:1fr 1fr} }
.wegkarte{display:flex; flex-direction:column; text-decoration:none; color:var(--dunkel);
background:var(--creme-hoch); border:1px solid var(--gravur-stark);
border-left:5px solid var(--rot-flae); border-radius:12px;
padding:clamp(26px,3.2vw,38px);
box-shadow:inset 0 2px 0 rgba(255,255,255,.65);
transition:transform .14s ease, box-shadow .14s ease}
.wegkarte + .wegkarte{border-left-color:var(--dunkel)}
.wegkarte:hover{transform:translateY(-3px); box-shadow:0 16px 30px -24px rgba(33,26,20,.7)}
.wegkarte h2, .wegkarte h3{font-size:clamp(1.6rem,3.4vw,2.1rem); line-height:1.1; letter-spacing:-.02em;
margin:0 0 .4em}
.wegkarte .satz{margin:0 0 1.3em; line-height:1.5; color:var(--grau)}
.wegkarte ul{list-style:none; margin:0 0 1.5em; padding:0}
.wegkarte li{position:relative; padding:0 0 .62em 26px; font-weight:700;
font-size:1.02rem; line-height:1.3}
.wegkarte li::before{content:""; position:absolute; left:0; top:.55em;
width:15px; height:2px; background:var(--rot)}
.wegkarte .meta{margin:auto 0 1.4em; padding-top:1em; font-size:.87rem; color:var(--grau);
line-height:1.5; border-top:1px solid var(--gravur-stark)}
/* Die Taste ist kein echter Knopf, sondern der Fuß des Links – deshalb ohne
eigenes Ziel, damit ein Klick nie zweimal zählt. */
.wegkarte .taste{display:block; text-align:center; font-weight:700; font-size:.97rem;
padding:14px 24px; border-radius:999px;
background:var(--dunkel); color:var(--creme); border:2px solid var(--dunkel);
transition:background .13s ease, border-color .13s ease}
.wegkarte:hover .taste{background:var(--rot-flae); border-color:var(--rot-flae); color:#fff}
/* ---------- Weitere Beiträge unter den drei Karten ----------
Kein vierter Kasten: Die drei ausgewählten sollen die Karten behalten,
die übrigen stehen als Zeile darunter. Sonst wären sie nicht erreichbar. */
.lesemehr{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5em 1.4em;
margin:clamp(20px,2.4vw,28px) 0 0; padding-top:clamp(16px,2vw,22px);
border-top:1px solid var(--gravur-stark); font-size:.94rem}
.lesemehr > span{font-size:10.5px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--grau); flex:none}
.lesemehr a{color:var(--dunkel); text-decoration:none; font-weight:500;
border-bottom:1px solid var(--gravur-stark); padding-bottom:1px}
.lesemehr a:hover{color:var(--rot-text); border-bottom-color:var(--rot-text)}
/* ==========================================================================
ÜBERSICHT ALLER ALBEN (/alben/)
Keine Genre-Schubladen, sondern die drei Fragen, die vor einem Abend
wirklich zählen: Wie lang? Aus welchem Jahrzehnt? Läuft es durch?
Die Filter sind eine Zugabe – ohne JavaScript steht einfach alles da.
========================================================================== */
.einstiege{display:grid; gap:clamp(14px,1.8vw,20px); grid-template-columns:1fr;
list-style:none; margin:clamp(26px,3.2vw,38px) 0 0; padding:0}
@media (min-width:760px){ .einstiege{grid-template-columns:repeat(3,1fr)} }
.einstiege a{display:flex; flex-direction:column; height:100%; text-decoration:none;
color:var(--dunkel); background:var(--dunkel2); border-radius:var(--radius);
padding:clamp(20px,2.4vw,26px); transition:transform .14s ease}
.einstiege a:hover{transform:translateY(-2px)}
.einstieg-cover{width:88px; height:88px; border-radius:10px; object-fit:cover;
margin:0 0 16px; background:var(--gravur-d); box-shadow:0 0 0 1px rgba(242,227,196,.18)}
/* min-height: sonst steht der Bandname in der Karte mit einzeiliger Frage
höher als in den beiden anderen. */
.einstiege .frage{margin:0 0 .8em; min-height:2.7em; font-family:var(--serif); font-style:italic;
font-size:clamp(1.05rem,2.1vw,1.18rem); line-height:1.35; color:var(--creme)}
.einstiege .wer{margin:0 0 .1em; font-size:.78rem; font-weight:700;
letter-spacing:.14em; text-transform:uppercase; color:var(--creme); opacity:.85}
.einstiege .was{margin:0 0 .7em; font-size:1.14rem; font-weight:700; line-height:1.2;
color:var(--creme)}
.einstiege .warum{margin:0 0 1em; font-size:.9rem; line-height:1.5; color:var(--creme); opacity:.82}
.einstiege .pfeil{margin-top:auto; font-size:.86rem; font-weight:700; color:var(--rot-hell)}
.einstiege a:hover .pfeil{text-decoration:underline}
/* ---------- Filterleiste ---------- */
.filterleiste{margin:clamp(30px,3.8vw,44px) 0 0; padding:clamp(16px,2vw,20px) 0;
border-top:1px solid var(--gravur-stark); border-bottom:1px solid var(--gravur-stark);
display:flex; flex-wrap:wrap; gap:14px clamp(24px,3vw,40px); align-items:flex-start}
.filtergruppe{display:flex; flex-wrap:wrap; align-items:center; gap:7px}
.filtergruppe > .schild{margin:0 .3em 0 0; flex:none}
.filterleiste button{
font:inherit; font-size:.86rem; font-weight:500; cursor:pointer;
padding:6px 14px; border-radius:999px;
background:transparent; color:var(--dunkel); border:1px solid var(--gravur-stark);
transition:background .12s ease, color .12s ease, border-color .12s ease}
.filterleiste button:hover{border-color:var(--dunkel)}
.filterleiste button[aria-pressed="true"]{
background:var(--dunkel); color:var(--creme); border-color:var(--dunkel); font-weight:700}
.trefferzahl{margin:clamp(16px,2vw,22px) 0 0; font-size:.88rem; color:var(--grau)}
/* ---------- Register: alle Alben als Text-Schnellzugriff ----------
Ausgeklappt über einen einzigen Knopf, mit Suchfeld obenauf. Für alle,
die einen Namen im Kopf haben und nicht durch Karten scrollen wollen. */
.register{margin:clamp(24px,3vw,34px) 0 0}
.register-leiste{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 28px}
.register-knopf{display:inline-flex; align-items:center; gap:10px; cursor:pointer; flex:none}
.register-pfeil{display:inline-block; transition:transform .15s ease}
.register-knopf[aria-expanded="true"] .register-pfeil{transform:rotate(180deg)}
.register-suche{margin:0; flex:1 1 260px; min-width:0; max-width:26em}
.register-suche label{
display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--grau); margin:0 0 6px;
}
.register-suche input{
width:100%; font:inherit; font-size:.98rem; color:var(--dunkel);
background:#fff; border:2px solid var(--gravur-stark); border-radius:10px;
padding:10px 14px;
}
.register-suche input:focus{border-color:var(--rot-flae)}
.register-suche input::placeholder{color:#8d8073}
.register-inhalt{margin-top:20px; padding:clamp(18px,2.2vw,24px);
background:var(--creme-hoch); border:1px solid var(--gravur); border-radius:var(--radius)}
.register-treffer{margin:0 0 8px; font-size:.84rem; color:var(--grau)}
.registerliste{
list-style:none; margin:8px 0 0; padding:0; columns:1; column-gap:28px;
}
@media (min-width:640px){ .registerliste{columns:2} }
@media (min-width:980px){ .registerliste{columns:3} }
.registerliste li{break-inside:avoid; border-top:1px solid var(--gravur)}
.registerliste li[hidden]{display:none}
.registerliste a{
display:flex; gap:.35em; align-items:baseline; flex-wrap:wrap;
padding:9px 0; text-decoration:none; color:var(--grau); font-size:.92rem; line-height:1.35;
}
.registerliste a:hover{color:var(--rot-text); text-decoration:underline}
.registerliste a strong{color:var(--dunkel); font-weight:700}
.registerliste a:hover strong{color:var(--rot-text)}
.registerjahr{margin-left:auto; flex:none; font-size:.78rem; color:var(--grau);
font-variant-numeric:tabular-nums}
.register-leer{margin:14px 0 0; font-size:.92rem; color:var(--grau)}
/* ---------- Die Alben ---------- */
.albenliste{display:grid; gap:clamp(16px,2vw,22px); grid-template-columns:1fr;
list-style:none; margin:clamp(18px,2.2vw,26px) 0 0; padding:0}
@media (min-width:680px){ .albenliste{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .albenliste{grid-template-columns:repeat(3,1fr)} }
.albenliste li[hidden]{display:none}
.albenliste a{display:flex; flex-direction:column; height:100%; text-decoration:none;
color:var(--dunkel); background:var(--creme-hoch); border:1px solid var(--gravur);
border-top:3px solid var(--rot-flae); border-radius:0 0 var(--radius) var(--radius);
padding:clamp(20px,2.4vw,26px);
transition:transform .14s ease, box-shadow .14s ease}
.albenliste a:hover{transform:translateY(-2px); box-shadow:0 6px 18px -12px rgba(33,26,20,.55)}
.albenliste .mini-cover{float:left; width:73px; height:73px; border-radius:9px;
object-fit:cover; margin:0 16px 8px 0; background:var(--gravur)}
.albenliste .mini-cover-fallback{position:relative; background:var(--grund,var(--gravur))}
.albenliste .mini-cover-fallback .hc-mini{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-family:var(--serif); font-weight:700; font-style:italic; font-size:1.65rem;
color:rgba(242,227,196,.82);
}
.albenliste .werte{clear:both}
.albenliste .kuenstler{margin:0 0 .1em; font-size:.78rem; font-weight:700;
letter-spacing:.14em; text-transform:uppercase; color:var(--grau)}
.albenliste h2{margin:0 0 .5em; font-size:clamp(1.24rem,2.5vw,1.44rem); line-height:1.14;
letter-spacing:-.014em}
.albenliste .werte{margin:0 0 .9em; padding-bottom:.9em; border-bottom:1px solid var(--gravur);
font-size:.84rem; font-weight:700; color:var(--grau); display:flex; flex-wrap:wrap; gap:.2em .7em}
.albenliste .werte span::after{content:" ·"; color:var(--gravur-stark)}
.albenliste .werte span:last-child::after{content:""}
.albenliste .satz{margin:0 0 1.1em; font-size:.94rem; line-height:1.55; color:var(--grau)}
.albenliste .pfeil{margin-top:auto; font-size:.86rem; font-weight:700; color:var(--rot-text)}
.albenliste a:hover .pfeil{text-decoration:underline}
.leermeldung{margin:clamp(20px,2.4vw,28px) 0 0; padding:clamp(18px,2.2vw,24px);
background:var(--creme-hoch); border:1px solid var(--gravur); border-radius:var(--radius);
font-size:.95rem; color:var(--grau); max-width:56ch}
/* ---------- Verweis auf die Übersicht unter den drei Karten ---------- */
.alle-alben{margin:clamp(20px,2.4vw,28px) 0 0; font-size:.95rem}
.alle-alben a{font-weight:700}
/* ==========================================================================
HAUSCOVER – der Platzhalter, solange keine Abbildung vorliegt
Kein Bild, sondern Satz: dadurch bei jeder Größe scharf, 0 KB schwer und
in einer Zeile austauschbar. Die Grundfarbe steht je Album im style-Attribut
(--grund). Alle Textdeckungen sind so gewählt, dass sie auf einem dunklen
Grund AA bestehen; wird --grund heller gesetzt, muss das neu geprüft werden.
========================================================================== */
.hauscover{
position:relative; aspect-ratio:1; display:flex; flex-direction:column;
align-items:center; justify-content:center; text-align:center;
padding:13%; border-radius:6px;
background:var(--grund,#211A14); color:var(--creme);
border:1px solid rgba(0,0,0,.4);
}
.hauscover::before{content:""; position:absolute; inset:9px; border-radius:3px;
border:1px solid rgba(242,227,196,.22); pointer-events:none}
.hauscover .marke{position:absolute; top:8.5%; left:0; right:0; margin:0;
font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:rgba(242,227,196,.68)}
.hauscover .hc-kuenstler{margin:0 0 .45em; font-size:.82rem; font-weight:700;
letter-spacing:.2em; text-transform:uppercase; line-height:1.3;
color:rgba(242,227,196,.78)}
.hauscover .hc-titel{margin:0; font-size:1.9rem; font-weight:700; line-height:1.04;
letter-spacing:-.022em; color:var(--creme)}
.hauscover .strich{width:54px; height:2px; margin:.85em 0 0; background:var(--rot-flae)}
.hauscover .hc-daten{position:absolute; bottom:8.5%; left:0; right:0; margin:0;
font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:rgba(242,227,196,.68)}
/* Mit Containereinheiten wächst der Titel mit der Kachel statt mit dem Fenster. */
@supports (width:1cqw){
.hauscover{container-type:inline-size}
.hauscover .hc-kuenstler{font-size:clamp(.74rem,4.2cqw,1.05rem)}
.hauscover .hc-titel{font-size:clamp(1.5rem,13cqw,3.2rem)}
.hauscover .marke,.hauscover .hc-daten{font-size:clamp(8.5px,3cqw,12px)}
}
/* Solange das Hauscover steht, gibt es keine Abbildung – und damit auch
nichts zu zitieren. Die Zeile nach § 51 erscheint erst mit dem echten Cover. */
.albumrand.ohne-cover .zitatzeile{display:none}
/* FREMDCOVER – Abbildung von einem fremden Server (Cover Art Archive).
Das Bild liegt über dem Hauscover. Lädt es nicht, entfernt es sich selbst
(onerror) und der Satz darunter wird wieder sichtbar. Deshalb muss die
Figur positioniert sein und das Bild sie vollständig ausfüllen. */
.coverstapel{position:relative; aspect-ratio:1}
.coverbild.fremdcover .coverfremd{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; border-radius:6px;
border:1px solid var(--gravur-stark); background:var(--dunkel);
}
/* BILDBAND – eine Aufnahme über die volle Breite, mit Zeile darunter.
Bewusst flach im Seitenverhältnis: Es soll den Lesefluss unterbrechen,
nicht ihn abbrechen. */
.bildband{margin:clamp(30px,3.6vw,44px) 0 0}
.bildband img{display:block; width:100%; height:auto; border-radius:var(--radius);
border:1px solid var(--gravur)}
.bildband figcaption{margin-top:10px; font-size:.86rem; line-height:1.5; color:var(--grau)}
.bildband figcaption a{white-space:nowrap}
.dunkel .bildband img{border-color:var(--gravur-d)}
.dunkel .bildband figcaption{color:var(--grau-hell)}
/* ---------------------------------------------------------------- HÖRPROBE
Eine Leiste im Stil der Frontplatte: Knopf, Pegelbalken, Restzeit. */
.hoerprobe{margin:1.9em 0 clamp(26px,3vw,38px); padding:16px 18px 14px;
border:1px solid var(--gravur); border-radius:var(--radius);
background:var(--creme-hoch)}
.hoerprobe .schild{margin:0 0 11px}
.hp-reihe{display:flex; align-items:center; gap:14px}
.hp-knopf{flex:0 0 auto; width:46px; height:46px; padding:0; cursor:pointer;
border:1px solid var(--rot-tief); border-radius:50%; background:var(--rot-flae);
display:flex; align-items:center; justify-content:center;
transition:background .15s ease}
.hp-knopf:hover{background:var(--rot-tief)}
.hp-knopf:focus-visible{outline:2px solid var(--rot-text); outline-offset:3px}
/* Dreieck = Abspielen, zwei Balken = Pause */
.hp-sym{display:block; width:0; height:0; margin-left:3px;
border-left:13px solid var(--creme-hoch);
border-top:9px solid transparent; border-bottom:9px solid transparent}
.hoerprobe.laeuft .hp-sym{width:13px; height:15px; margin-left:0; border:0;
background:linear-gradient(to right,
var(--creme-hoch) 0 4px, transparent 4px 9px, var(--creme-hoch) 9px 13px)}
.hp-balken{flex:1 1 auto; height:8px; border-radius:4px;
background:var(--sand); border:1px solid var(--gravur); overflow:hidden}
.hp-fuellung{display:block; width:0; height:100%; background:var(--rot-flae)}
.hp-zeit{flex:0 0 auto; font-variant-numeric:tabular-nums;
font-size:.84rem; letter-spacing:.04em; color:var(--grau)}
.hp-fuss{margin:11px 0 0; font-size:.8rem; line-height:1.5; color:var(--grau)}
.hp-mehr{padding:0; margin-left:.35em; border:0; background:none; cursor:pointer;
font:inherit; color:var(--rot-text); text-decoration:underline;
text-underline-offset:2px}
.hp-mehr:focus-visible{outline:2px solid var(--rot-text); outline-offset:2px}
.hp-text{margin-top:10px; padding-top:10px; border-top:1px solid var(--gravur)}
.hp-text p{margin:0; font-size:.9rem; line-height:1.65; color:var(--grau)}
@media (max-width:420px){
.hoerprobe{padding:14px 14px 12px}
.hp-reihe{gap:11px}
.hp-knopf{width:42px; height:42px}
}
@media (prefers-reduced-motion:reduce){ .hp-fuellung{transition:none} }
/* ============================ BESTANDTEILE-GALERIE ============================
Vier Karten in einer horizontal scrollenden Schiene mit scroll-snap. Das
Wischen auf dem Handy übernimmt allein CSS (kein Touch-Code nötig); die
Pfeile und Punkte rufen für Desktop/Tastatur nur scrollTo auf dieselbe
Position, auf die man auch wischend landen würde. Ohne JavaScript bleibt
die Schiene ein normaler scrollbarer Streifen – nichts bricht. */
.bst{margin-top:clamp(30px,3.6vw,46px)}
/* .bst-viewport umschließt nur die Schiene (nicht die Punkte darunter) –
dadurch zentrieren sich die Pfeile per top:50% exakt auf die Kartenhöhe,
nicht auf die ganze Galerie inklusive Punktreihe. */
.bst-viewport{position:relative}
.bst-schiene{
display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
margin:0 calc(var(--rand) * -1); padding:2px var(--rand) 10px;
scrollbar-width:none; scroll-padding:2px var(--rand) 10px;
}
.bst-schiene::-webkit-scrollbar{display:none}
/* Jede .bst-slide ist ein volles "Bildschirm"-Segment für den Scroll-Snap;
ihr seitliches Padding reserviert den Platz für die Pfeile daneben, damit
diese nie das Bild/die Karte überlappen. Die sichtbare Karte selbst ist
.bst-karte, ein Kind ohne eigene Snap-/Flex-Rolle. */
.bst-slide{
flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always;
padding:0 58px; box-sizing:border-box;
}
.bst-karte{
background:var(--creme-hoch); border:1px solid var(--gravur-stark);
border-left:5px solid var(--rot-flae); border-radius:var(--radius);
padding:clamp(18px,3vw,28px);
display:flex; flex-direction:column; align-items:center; text-align:center;
height:100%; box-sizing:border-box; justify-content:center;
}
/* Auf dem Handy knapp gehalten, damit eine Karte ungefähr auf einen
sichtbaren Bildschirm passt – ein Absatz statt zwei, ein kompaktes Bild.
Ab 700px kehrt die Karte zur zweispaltigen Form zurück: Bild links,
Text rechts, wie in der ersten Fassung dieser Sektion. */
/* Zwei der sieben Bilder sind inline-SVG statt ![]()
(mit eigenem