) liegen
können; Browser ohne "of"-Syntax ignorieren die Regel folgenlos.
(3) Ausgewogene Überschriften-Umbrüche (kein einzelnes Wort in Zeile 2) + Text-
Markierfarbe in Markenfarbe statt Browser-Blau. */
.article-body p,.article-body li{hyphens:auto;-webkit-hyphens:auto}
.article-body > .article-section:nth-child(1 of .article-section) > p:first-of-type{
font-size:20px;line-height:1.7;color:rgba(255,255,255,0.92);
}
.article-h1,.article-body h2,.article-body h3,.cta-box h3{text-wrap:balance}
::selection{background:rgba(var(--gold-rgb),0.35);color:#fff}
.pull-quote{
border-left:2px solid var(--gold);padding:22px 26px;margin:36px 0;
background:rgba(var(--gold-rgb),0.05);border-radius:0 var(--radius) var(--radius) 0;
font-family:var(--font-head);font-size:24px;letter-spacing:0.3px;
color:#fff;font-weight:400;line-height:1.3;
}
.price-table{
width:100%;border-collapse:collapse;margin:28px 0 32px;
border:1px solid var(--border-2);border-radius:var(--radius);overflow:hidden;
}
.price-table th,.price-table td{
padding:14px 18px;text-align:left;font-size:16px;
border-bottom:1px solid var(--border-2);
}
.price-table th{
background:var(--surface);color:var(--gold);
font-family:var(--font-head);font-weight:400;letter-spacing:0.5px;
text-transform:uppercase;font-size:13px;
}
.price-table td{color:var(--muted)}
.price-table tr:last-child td{border-bottom:none}
.placeholder-note{
display:inline-block;margin-top:6px;font-size:12px;color:var(--dim);
font-style:italic;
}
.cta-box{
position:relative;overflow:hidden;
background:radial-gradient(circle at 50% -10%, rgba(var(--gold-rgb),0.14), transparent 55%), var(--surface);
border:1px solid var(--border);border-top:2px solid var(--gold);
border-radius:var(--radius);
padding:44px 36px;margin:48px 0;text-align:center;
}
.cta-kicker{
display:block;font-family:var(--font-head);font-size:12px;letter-spacing:1.6px;
text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:600;
}
.cta-box h3{margin-top:0!important;font-size:28px}
.cta-box p{max-width:440px;margin:0 auto 22px;color:var(--muted)}
.cta-trust{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 26px}
.cta-trust span{
font-size:13px;color:var(--muted);border:1px solid var(--border-2);
border-radius:100px;padding:5px 14px;background:rgba(255,255,255,0.02);
}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-gold{
background:var(--gold);color:var(--black);
font-family:var(--font-head);font-size:14px;letter-spacing:0.6px;
padding:13px 28px;border-radius:var(--radius);font-weight:700;
transition:background .2s,transform .2s;
}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-1px)}
.btn-outline{
border:1px solid var(--border);color:var(--text);
font-family:var(--font-head);font-size:14px;letter-spacing:0.6px;
padding:13px 28px;border-radius:var(--radius);font-weight:700;
transition:border-color .2s,background .2s;
}
.btn-outline:hover{border-color:var(--gold);background:var(--gold-dim)}
/* ═══ AUTOREN-BOX (v4.45): jetzt echte Karte statt reiner Flex-Zeile - war zuvor optisch ═══ */
/* ═══ ein Nachgedanke neben CTA-Box und FAQ-Karte. Trust-Zeile + Link runden es ab. ═══ */
.author-box{
position:relative;
display:flex;gap:18px;align-items:center;flex-wrap:wrap;
margin:56px 0 0;padding:24px 28px;
background:radial-gradient(circle at 0% 50%,rgba(var(--gold-rgb),0.10),transparent 60%),var(--ink);
border:1px solid rgba(var(--gold-rgb),0.22);border-radius:var(--radius);
box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Feiner Gold-Schimmer am oberen Rand - gleiche Handschrift wie die Hero-Karte. */
.author-box::before{
content:'';position:absolute;top:0;left:10%;right:10%;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),0.7),transparent);
}
.author-box img{
/* v5.118 (auf Wunsch): von 62px auf 92px vergrößert. object-position:center top wie beim
Intro-Portrait (.ai-portrait img) - wichtig, seit hier das echte Artikel-Portrait steht:
die sind hochformatig, bei zentriertem Ausschnitt läge der Kopf sonst teils außerhalb. */
width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:center top;flex-shrink:0;
box-shadow:0 0 0 1px rgba(var(--gold-rgb),0.4),0 0 0 5px rgba(var(--gold-rgb),0.08);
}
.author-info{flex:1;min-width:180px}
.author-box .name{font-family:var(--font-head);font-size:18px;color:#fff;font-weight:400;letter-spacing:0.3px}
.author-box .role{font-size:13px;color:var(--dim);margin-top:3px}
/* v5.119 (auf Wunsch): DJ-Name in der Rollenzeile - bewusst LEISE. Nur ein Gold-Ton und
minimal mehr Gewicht, damit er als Eigenname erkennbar ist; kein Fettdruck, keine
Versalien, keine eigene Zeile, kein erklärender Satz. Er soll auffallen, ohne zu werben. */
.author-box .dj-alias{color:var(--gold);font-weight:500}
.author-trust{font-size:13px;color:var(--gold);margin-top:7px;font-weight:500}
/* v5.120 (auf Wunsch): Event-Arten - bewusst NICHT im Gold der Trust-Zeile darüber, sonst
konkurrieren zwei Zeilen um dieselbe Aufmerksamkeit. Klein, weit gesperrt, gedämpftes
Grau: wirkt wie eine ruhige Einordnung am Fuß der Karte, nicht wie ein weiteres
Verkaufsargument. Bricht auf schmalen Schirmen sauber um. */
.author-scope{
font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
color:rgba(255,255,255,0.56);margin-top:9px;
}
.author-link{
font-size:13px;color:var(--muted);white-space:nowrap;flex-shrink:0;
background:rgba(var(--gold-rgb),0.06);
border:1px solid rgba(var(--gold-rgb),0.3);border-radius:100px;padding:9px 18px;
transition:color .2s,border-color .2s,background .2s;
}
.author-link:hover{color:var(--gold);border-color:rgba(var(--gold-rgb),0.55);background:rgba(var(--gold-rgb),0.12)}
/* ═══ PERSÖNLICHES INTRO (v4.47, optional): Begrüßungs-Box mit Portrait ganz am ═══ */
/* ═══ Artikelanfang. Animation: Box schwebt beim Laden sanft ein, Portrait bekommt ═══ */
/* ═══ einen dezent pulsierenden Gold-Ring - lebendig, aber nicht zappelig. Respektiert ═══ */
/* ═══ prefers-reduced-motion (alles statisch für Nutzer, die Animationen abschalten). ═══ */
/* v5.125 löst das Umfluss-Layout von v5.06 (float + shape-outside:circle) ab - Begründung
unten bei .ai-portrait. Der alte Kommentar dazu wurde entfernt, weil er ein Verhalten
beschrieb, das es nicht mehr gibt. */
/* v5.124 (auf Wunsch): Die Intro-Kachel ist die EINZIGE persönliche Kachel im ganzen
Artikel - vorher sah sie fast aus wie eine normale Sektion. Jetzt bewusst als
"persönliche Notiz" gestaltet und klar vom Rest abgesetzt: hellere Fläche, die nach
unten ins Dunkle läuft, Gold-Schein aus der oberen linken Ecke (dort sitzt das
Portrait), Gold-Schimmer an der Oberkante (gleiche Handschrift wie Autorenbox und
Hero-Karte), kräftigerer Schatten. Der Kicker bekommt eine auslaufende Gold-Linie, am
Ende steht eine Signatur - damit liest sich die Kachel wie etwas Handgeschriebenes,
nicht wie ein weiterer Textkasten. */
.author-intro{
position:relative;
display:block;
background:
radial-gradient(130% 100% at 0% 0%, rgba(var(--gold-rgb),0.15), transparent 56%),
linear-gradient(180deg, var(--surface-2) 0%, var(--ink) 72%);
border:1px solid rgba(var(--gold-rgb),0.26);border-left:3px solid var(--gold);
border-radius:var(--radius);
/* v5.125: Innenabstand links macht Platz für das überstehende Portrait (siehe unten). */
padding:30px 30px 22px 94px;margin:26px 0 40px;
box-shadow:0 18px 44px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05);
animation:ai-slide-in .7s cubic-bezier(.22,1,.36,1) both;
}
/* Kachel OHNE Portrait: kein Platzhalter-Loch links stehen lassen. */
.author-intro.no-photo{padding-left:30px}
/* Feiner Gold-Schimmer an der Oberkante - dieselbe Handschrift wie die Autorenbox. */
.author-intro::before{
content:'';position:absolute;top:0;left:12%;right:12%;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),0.75),transparent);
}
/* v5.125 (auf Wunsch, Variante B): Das Portrait ragt über die linke Kachelkante hinaus -
wie ein aufgeklebtes Foto auf einer persönlichen Notiz. Es ist damit das einzige
Element im ganzen Artikel, das seinen Rahmen verlässt, und markiert die Kachel sofort
als etwas Eigenes. WICHTIG: float + shape-outside sind bewusst RAUS. Der Text folgte
damit der runden Bildkante und bekam dadurch einen ausgefransten linken Rand - genau
das war der eigentliche optische Störfaktor, nicht die Bildposition. Jetzt liegt das
Bild absolut, der Text ist ein ruhiger, linksbündiger Block daneben. */
.ai-portrait{
position:absolute;left:-36px;top:-20px;z-index:2;
width:116px;height:116px;margin:0;
}
.ai-portrait img{
width:116px;height:116px;border-radius:50%;object-fit:cover;object-position:center top;display:block;
border:4px solid rgba(var(--gold-rgb),0.6);
box-shadow:0 12px 30px rgba(0,0,0,0.55);
}
.ai-portrait::after{
content:'';position:absolute;inset:-6px;border-radius:50%;
border:1px solid rgba(var(--gold-rgb),0.4);
animation:ai-ring 2.8s ease-out infinite;
}
.ai-text{min-width:0}
/* Kicker mit auslaufender Gold-Linie - setzt die Kachel optisch ab, ohne laut zu werden. */
.ai-hello{
display:flex;align-items:center;gap:12px;
font-family:var(--font-head);font-size:13px;letter-spacing:1.2px;
text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-weight:600;
}
.ai-hello::after{
content:'';flex:1;height:1px;min-width:20px;
background:linear-gradient(90deg,rgba(var(--gold-rgb),0.45),transparent);
}
.ai-text p{margin:0;font-size:16px;line-height:1.7;color:var(--text)}
/* Signatur: macht aus der Kachel sichtbar eine persönliche Notiz. */
.ai-sign{
display:block;margin-top:16px;text-align:right;
font-family:var(--font-head);font-size:15px;letter-spacing:0.6px;
color:var(--gold);opacity:0.85;
}
@keyframes ai-slide-in{
from{opacity:0;transform:translateY(14px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes ai-ring{
0%{transform:scale(1);opacity:0.7}
70%{transform:scale(1.16);opacity:0}
100%{transform:scale(1.16);opacity:0}
}
/* v5.125: Unter 860px kann das Portrait NICHT mehr überstehen. Rechnerisch geprüft: bei
768px Fensterbreite bliebe dem überstehenden Foto nur 2px Abstand zum Fensterrand, bei
820px nur 5px - es würde also praktisch am Rand kleben. Erst ab ca. 850px bleibt genug
Luft, deshalb 860px als sichere Schwelle. Darunter rutscht das Foto nach innen und der
Text darunter. Die frühere Zentrierung entfällt bewusst: beim jetzt ruhigen Textblock
ist linksbündig deutlich besser lesbar. */
@media(max-width:860px){
.author-intro{padding:24px 22px 18px}
.author-intro.no-photo{padding-left:22px}
.ai-portrait{position:static;width:96px;height:96px;margin:0 0 16px}
.ai-portrait img{width:96px;height:96px;border-width:3px}
}
@media(prefers-reduced-motion:reduce){
.author-intro{animation:none}
.ai-portrait::after{animation:none;opacity:0.4}
}
/* ═══ RELATED ═══ */
/* v5.113: z-index:2 ergänzt (siehe Begründung bei .engage-row) - der "Weiterlesen"-Block
steht ebenfalls außerhalb von
und lag damit unter der halbtransparenten Bühne.
Systematisch geprüft: das sind alle vier betroffenen Blöcke nach (engage-row,
comments-box, cta-banner, related) - die drei Float-Buttons haben ohnehin z-index 9000+,
der footer hatte z-index:2 schon von Anfang an richtig. */
.related{position:relative;z-index:2;margin-top:56px;margin-bottom:64px}
.related h2{
font-family:var(--font-head);font-size:28px;letter-spacing:0.4px;
color:#fff;font-weight:400;margin-bottom:24px;
}
.closing-line{
font-style:italic;color:var(--muted);margin:56px 0 0;font-size:16px;
background:var(--ink);border:1px solid var(--border-2);
border-radius:var(--radius);padding:22px 26px;
}
.closing-line a{color:var(--gold);border-bottom:1px solid rgba(var(--gold-rgb),0.4)}
.closing-line a:hover{color:var(--gold-2);border-color:var(--gold-2)}
/* ═══ LESEFORTSCHRITT ═══ */
#read-progress{
position:fixed;top:0;left:0;height:3px;width:0;
background:linear-gradient(90deg,var(--gold),var(--gold-2));
z-index:9500;transition:width .1s linear;
}
/* ═══ GRID-PARALLAX (1:1 Hauptseite) ═══ */
#grid-parallax{
position:fixed;inset:-200px 0;
z-index:1;pointer-events:none;
background-image:
linear-gradient(rgba(var(--gold-rgb),0.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(var(--gold-rgb),0.055) 1px,transparent 1px);
background-size:48px 48px;
will-change:transform;
}
main{position:relative;z-index:2}
/* ═══ ZENTRALE BÜHNE: eine abgesetzte mittlere Fläche, auf der die Artikel-Karten ═══ */
/* ═══ sichtbar "sitzen" - links und rechts bleibt der äußere Bereich mit dem ═══ */
/* ═══ Grid-Raster sichtbar. Bewusst mit FESTEN Farbwerten (nicht --ink/--surface), ═══ */
/* ═══ damit die Bühne in jedem Beitrag gleich wirkt und die Palette nur die Karten ═══ */
/* ═══ DARAUF einfärbt, nicht die Bühne selbst. Als fixed-Layer hinter dem Inhalt ═══ */
/* ═══ (z-index zwischen Grid und main), damit sie über die volle Scrollhöhe trägt ═══ */
/* ═══ ohne mitzuscrollen - der Inhalt gleitet darüber. Nur auf breiten Screens, wo ═══ */
/* ═══ überhaupt Platz für einen sichtbaren Seitenrand ist. ═══ */
.article-stage{
display:none;position:absolute;
/* top/height werden per JS exakt zwischen Header-Ende und Footer-Anfang berechnet
(siehe Script unten) - deshalb hier bewusst KEIN top:0/bottom:0 mehr (das war
position:fixed über die volle Fensterhöhe, dadurch stieß die Bühne zwangsläufig
oben an die Browserkante und unten bis in den Footer, runde Ecken hätte man dort
nie gesehen). Als position:absolute (nicht fixed) scrollt sie jetzt normal mit der
Seite statt als Parallax-Hintergrund stehen zu bleiben. */
left:calc(50% - min(750px, 46vw));width:min(1500px, 92vw);
z-index:1;pointer-events:none;
/* v5.13a (Rücknahme des v5.07-Fades nach Live-Ansicht): Der weiche mask-Verlauf an
der Oberkante wirkte im echten Artikel wie diffuses "Einfädeln" statt wie eine
Bühne. Jetzt beginnt sie wieder mit ihrer ganz normalen Kante (Rahmen + runde
Ecken, identisch zur Unterkante) - und darf das ruhig, weil sie per GAP_TOP=-90
ohnehin HINTER der Titel-Kachel startet (z-index 1 vs. 3): die Kante liegt damit
größtenteils verdeckt hinter der Kachel, nichts fädelt mehr ein.
Der auf 0.16 verstärkte Gold-Verlauf aus v5.07 bleibt (0.07 war unsichtbar). */
background:
radial-gradient(120% 60% at 50% 0%, rgba(var(--gold-rgb),0.16) 0%, rgba(var(--gold-rgb),0) 62%),
rgba(var(--bg-rgb),0.55);
border:1px solid rgba(255,255,255,0.05);
border-radius:32px;
box-shadow:0 0 80px rgba(0,0,0,0.4);
}
@media(min-width:1240px){.article-stage{display:block}}
/* Der Artikelkörper muss ÜBER der Bühne liegen (Bühne ist z-index:1, main ist 2 -
passt schon). Die 100vw-Tint-Bänder ragen bewusst über die Bühne hinaus (volle
Fensterbreite) - das ist gewollt, sie sind das "Aufbrechen" der Bühnenkante und
erzeugen Rhythmus, statt dass alles brav in der Bühne eingesperrt wirkt. */
/* ═══ INLINE-BILDER (v4.95: Ambient-Glow + Galerie-Look) ═══ */
/* Das figure selbst ist jetzt overflow:VISIBLE - Rundung/Rahmen/Clipping übernimmt der
innere .fig-clip. Nötig für den Ambient-Glow: eine weichgezeichnete Kopie des Bildes
(::before mit derselben Bild-URL aus --fig-img) leuchtet HINTER dem Bild hervor, wie
eine Kino-Leinwand im dunklen Raum - jedes Bild bekommt so seinen individuellen, aus
den eigenen Bildfarben gespeisten Lichtschein. Alles element-relativ, kein Viewport-
Bezug, kein Ausbruch aus der Spaltenbreite (Glow ist pointer-events:none und rein
optisch, inset nur -6%, bleibt praktisch innerhalb des 92%-max-width-Puffers). */
.article-fig{
position:relative;margin:48px auto;max-width:92%;
transition:transform .6s ease;
}
.article-fig::before{
content:'';position:absolute;inset:-6% -5%;z-index:0;
background-image:var(--fig-img);background-size:cover;background-position:center;
filter:blur(34px) saturate(1.35);
opacity:0.32;border-radius:24px;
pointer-events:none;
transition:opacity .6s ease;
}
.article-fig:hover{transform:scale(1.012)}
.article-fig:hover::before{opacity:0.5}
.fig-clip{
position:relative;z-index:1;overflow:hidden;
border-radius:var(--radius);border:1px solid var(--border-2);
box-shadow:var(--shadow-lg);
transition:border-color .5s ease;
}
.article-fig:hover .fig-clip{border-color:rgba(var(--gold-rgb),0.45)}
/* Galerie-Passepartout: feine goldene Innenlinie, fährt beim Hover ein - dieselbe
Bildsprache wie die sv-6-Sektionskarten (Doppelrahmen). */
.fig-clip::after{
content:'';position:absolute;inset:9px;z-index:2;
border:1px solid rgba(var(--gold-rgb),0.55);border-radius:calc(var(--radius) - 3px);
opacity:0;transform:scale(1.015);
transition:opacity .45s ease,transform .45s ease;
pointer-events:none;
}
.article-fig:hover .fig-clip::after{opacity:1;transform:scale(1)}
.article-fig img{
width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
max-height:420px;
animation:kenburns-img 26s ease-in-out infinite alternate;
transition:filter .6s ease;
}
/* Hover-Grading: das Bild "leuchtet auf" - Helligkeit/Sättigung minimal hoch, zusammen
mit dem stärker werdenden Glow entsteht der Eindruck, das Bild wird zum Leben erweckt. */
.article-fig:hover img{filter:brightness(1.06) saturate(1.08)}
/* Alt-Artikel-Sicherheitsnetz: Beiträge, die vor v4.95 veröffentlicht wurden und noch
KEINEN .fig-clip im Markup haben, bekommen Rundung/Rahmen/Clipping wie früher direkt
am figure - ohne Glow (keine --fig-img-Variable vorhanden), aber optisch intakt. */
.article-fig:not(:has(.fig-clip)){overflow:hidden;border-radius:var(--radius);border:1px solid var(--border-2)}
@media(max-width:900px){
/* Blur-Filter über großen Flächen ist auf Mobilgeräten spürbar rechenintensiv -
dort ersetzt ein einfacher dunkler Schatten den Ambient-Glow. */
.article-fig::before{display:none}
.fig-clip{box-shadow:var(--shadow-md)}
}
@media(max-width:600px){.article-fig{max-width:100%}.article-fig img{max-height:280px}}
@media(prefers-reduced-motion:reduce){
.article-fig img{animation:none}
.article-fig,.article-fig::before,.fig-clip,.fig-clip::after,.article-fig img{transition:none}
}
.article-fig figcaption{
position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
max-width:88%;text-align:center;z-index:3;
background:rgba(var(--bg-rgb),0.72);
backdrop-filter:blur(24px) saturate(140%);
-webkit-backdrop-filter:blur(24px) saturate(140%);
border:1px solid rgba(var(--gold-rgb),0.22);border-radius:var(--radius);
padding:8px 20px 8px 34px;
font-size:12px;color:rgba(255,255,255,0.85);letter-spacing:0.3px;
box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.07);
transition:transform .45s ease,background .45s ease;
}
/* Goldener Rauten-Akzent vor der Bildunterschrift - dieselbe Diamant-Bildsprache wie
das sv-7-Sektions-Siegel, verankert die Caption sichtbar in der Design-Familie. */
.article-fig figcaption::before{
content:'';position:absolute;left:16px;top:50%;
width:7px;height:7px;margin-top:-3.5px;
background:var(--gold);transform:rotate(45deg);
}
.article-fig:hover figcaption{transform:translateX(-50%) translateY(-4px);background:rgba(var(--bg-rgb),0.85)}
@supports not (backdrop-filter:blur(1px)){
.article-fig figcaption{background:rgba(var(--bg-rgb),0.92)}
}
@media(max-width:600px){.article-fig figcaption{font-size:11px;padding:7px 16px 7px 30px;bottom:12px}}
/* ═══ KI-KENNZEICHNUNG (EU AI Act Art. 50, Pflicht ab 02.08.2026) ═══ */
/* v5.160 (auf Wunsch: "mehr wie ein Wasserzeichen, dezenter, genau am Bildrand"):
EINE einzige Marke .ki-mark statt der drei Bauformen aus v5.159. Liegt jetzt IMMER
direkt AUF dem Bild, unten rechts, bündig mit der Bildkante - kein Hintergrund-Chip,
kein eigener Absatz mehr darunter. Kein Rahmen/Kasten, nur Text mit Schlagschatten
für Lesbarkeit auf jedem Bildinhalt (hell wie dunkel) - genau das "Wasserzeichen"-
Prinzip: noch lesbar, aber tritt optisch zurück. Voraussetzung je Einbauort:
position:relative (+ meist overflow:hidden, damit die Marke bei abgerundeten Ecken
nicht übersteht) - bei .media-grid/.media-masonry/.media-polaroid dafür ergänzt.
Farbe fest Weiß mit Opazität statt var(--ink): --ink ist ein dunkler Flächenton und
paletten-abhängig - die Marke soll auf jeder Artikel-Palette gleich leise wirken. */
/* v5.252 (auf Wunsch: "genauso wie auf meiner Homepage"): Aus der Textzeile wird der
Kreis der Startseite - 20px, "KI" darin, Erklaerung beim Ueberfahren.
BEWUSST KEINE Abschwaechung der Pflicht nach EU AI Act Art. 50: der volle Wortlaut
steht weiterhin im aria-label - fuer Vorlesesoftware also jederzeit da - und im
data-tip. Ruhende Deckkraft 0,45 statt der 0,30 der Startseite, damit die Marke auch
ohne Maus wahrnehmbar bleibt; auf dem Handy gibt es kein Ueberfahren.
pointer-events:none musste weg, sonst gaebe es kein Ueberfahren.
Der Hinweis oeffnet nach OBEN und bleibt damit innerhalb des Bildes: die Container
tragen overflow:hidden, ein nach aussen aufgehender Hinweis waere abgeschnitten.
EINZEILIG geschrieben, weil diese Datei CRLF nutzt, die erzeugten Artikel aber LF -
ohne Umbruch im Block ist die Suchzeichenkette hier und dort dieselbe. */
.ki-mark{position:absolute;right:10px;bottom:10px;z-index:4;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:0.2px;line-height:1;white-space:nowrap;color:#fff;background:rgba(0,0,0,0.42);border:1px solid rgba(255,255,255,0.4);opacity:0.45;cursor:help;user-select:none;transition:opacity .25s ease}.ki-mark:hover,.ki-mark:focus-visible{opacity:0.95}.ki-mark::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);right:0;white-space:nowrap;text-transform:none;font-size:11px;font-weight:500;letter-spacing:0.2px;color:#fff;background:rgba(0,0,0,0.9);border:1px solid rgba(255,255,255,0.2);border-radius:6px;padding:6px 10px;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}.ki-mark:hover::after,.ki-mark:focus-visible::after{opacity:1;transform:translateY(0)}.ki-mark.ki-mark-cta{bottom:auto;top:12px}.ki-mark.ki-mark-cta::after{bottom:auto;top:calc(100% + 8px);transform:translateY(-4px)}.ki-mark.ki-mark-cta:hover::after,.ki-mark.ki-mark-cta:focus-visible::after{transform:translateY(0)}@media(max-width:600px){.ki-mark{right:8px;bottom:8px}}
/* ═══ DAS WICHTIGSTE IN KÜRZE ═══ */
/* v5.22: Location-Steckbrief (nur Kategorie "Location Check"). Nutzt die Schatten-Skala
aus v5.18 und dieselbe Kartensprache wie die Takeaways-Box - der Steckbrief soll wie
ein Teil des Artikels wirken, nicht wie ein eingeklebter Fremdkörper. */
.location-facts{
margin:38px 0;padding:26px 28px 22px;
background:linear-gradient(180deg, rgba(var(--gold-rgb),0.06) 0%, rgba(255,255,255,0.02) 100%);
border:1px solid rgba(var(--gold-rgb),0.28);border-radius:14px;
box-shadow:var(--shadow-md);
}
.location-facts .lf-title{
margin:0 0 18px!important;font-size:18px!important;line-height:1.35;color:var(--gold)!important;
letter-spacing:0.01em;
}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.lf-row{display:flex;gap:11px;align-items:flex-start}
.lf-ico{flex:0 0 auto;font-size:15px;line-height:1.5;opacity:0.85}
.lf-lab{display:block;font-size:12px;letter-spacing:0.09em;text-transform:uppercase;color:rgba(255,255,255,0.59);margin-bottom:2px}
.lf-val{display:block;font-size:15px;line-height:1.5;color:rgba(255,255,255,0.88)}
.lf-val a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(var(--gold-rgb),0.35)}
.lf-val a:hover{border-bottom-color:var(--gold)}
.lf-rooms{margin:2px 0 0;padding:0 0 0 2px;list-style:none}
.lf-rooms li{font-size:15px;line-height:1.55;color:rgba(255,255,255,0.88);padding-left:13px;position:relative}
.lf-rooms li::before{content:"·";position:absolute;left:2px;color:var(--gold)}
.lf-rooms strong{color:#fff;font-weight:600}
.lf-note{margin:18px 0 0!important;padding-top:14px;border-top:1px solid rgba(255,255,255,0.07);
font-size:13px!important;line-height:1.55;color:rgba(255,255,255,0.59)!important;font-style:italic}
@media(max-width:640px){
.location-facts{padding:22px 20px 18px;margin:30px 0}
.lf-grid{grid-template-columns:1fr;gap:13px}
.location-facts .lf-title{font-size:18px!important}
}
body.reading-mode .location-facts{background:none;border-color:rgba(255,255,255,0.12);box-shadow:none}
.key-takeaways{
background:linear-gradient(135deg,rgba(var(--gold-rgb),0.08),rgba(var(--gold-rgb),0.02));
border:1px solid rgba(var(--gold-rgb),0.35);border-radius:var(--radius);
padding:26px 30px;margin:36px 0 44px;position:relative;overflow:hidden;
}
.key-takeaways::before{
content:'';position:absolute;top:0;left:0;width:4px;height:100%;
background:linear-gradient(180deg,var(--gold),var(--gold-2));
}
.key-takeaways h2{
font-family:var(--font-head);font-size:15px;letter-spacing:1.2px;
text-transform:uppercase;color:var(--gold);margin:0 0 14px;font-weight:400;
}
.key-takeaways ul{list-style:none;padding:0;margin:0}
.key-takeaways li{
font-size:16px;color:var(--text);line-height:1.7;
padding:5px 0 5px 24px;position:relative;
}
.key-takeaways li::before{
content:'→';position:absolute;left:0;color:var(--gold);font-weight:600;
}
/* ═══ INHALTSVERZEICHNIS ═══ */
.article-toc{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);
padding:22px 28px;margin:0 0 44px;
}
.article-toc h2{
font-family:var(--font-head);font-size:13px;letter-spacing:1.2px;
text-transform:uppercase;color:rgba(255,255,255,0.5);margin:0 0 12px;font-weight:400;
}
.article-toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.article-toc li{counter-increment:toc;padding:5px 0}
.article-toc li::before{content:counter(toc) '.';color:var(--gold);margin-right:9px;font-size:13px}
/* H3-Unterpunkte zählen NICHT als eigene Hauptnummer mit (sonst springt die Zählung
verwirrend zwischen Haupt- und Unterpunkten) - eigener Marker statt Zahl. */
.article-toc li.toc-sub{counter-increment:none}
.article-toc li.toc-sub::before{content:'–';margin-right:9px;color:rgba(255,255,255,0.57)}
.article-toc a{color:var(--text);text-decoration:none;font-size:15px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.article-toc a:hover{color:var(--gold);border-bottom-color:var(--gold)}
/* H3-Unterpunkte (seit v4.24, z.B. Größen-/Preis-Kategorien in Listicle-Artikeln):
eingerückt und etwas kleiner, damit die Hierarchie zu den H2-Hauptpunkten sichtbar bleibt. */
.article-toc li.toc-sub{padding-left:22px}
.article-toc li.toc-sub a{font-size:14px;color:rgba(255,255,255,0.75)}
/* Ab der Breite, wo die Sticky-TOC greift (1500px, siehe .article-toc-sticky unten),
wäre das inline TOC im Fließtext nur noch ein Duplikat derselben Liste - blenden wir
dort aus. Darunter bleibt es die einzige und weiterhin nötige Navigationshilfe. */
@media(min-width:1500px){.article-toc{display:none}}
/* ═══ STICKY-TOC: mitlaufendes Inhaltsverzeichnis am Seitenrand, nur auf breiten ═══ */
/* ═══ Desktop-Bildschirmen (genug Platz neben der 860px-Textspalte) - darunter ═══ */
/* ═══ bleibt das inline .article-toc oben die einzige Navigationshilfe. ═══ */
.article-toc-sticky{
display:none;position:fixed;top:120px;
left:calc(50% - 710px);width:240px;
/* v5.177d: Höhe so begrenzen, dass die Kachel INNERHALB des sichtbaren Bereichs endet
(top 120px + max-height <= 100vh - 20px Rand). Vorher (v5.177b) war sie mit 100vh-90px zu
hoch und ragte unter den Bildschirmrand - dadurch war der untere Teil (inkl. aktivem Punkt)
abgeschnitten und das interne Mitscrollen unten griff nicht. Jetzt läuft der Inhalt bei
langen Verzeichnissen intern mit (keepActiveVisible), sichtbarer Balken bleibt aus. */
max-height:calc(100vh - 140px);overflow-y:auto;
scrollbar-width:none;-ms-overflow-style:none;
/* Feste Kachel-Optik, in JEDEM Beitrag gleich - bewusst mit festen Farbwerten statt
--ink/--border, damit die Farbpalette des Artikels diese Karte NICHT umfärbt (die
Sticky-TOC soll ein konstanter, wiedererkennbarer Anker sein, keine Palettenfläche). */
background:rgba(var(--bg-rgb),0.92);
border:1px solid rgba(255,255,255,0.08);border-radius:8px;
padding:20px 18px;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
box-shadow:var(--shadow-md);
opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.article-toc-sticky.visible{opacity:1;pointer-events:auto}
.article-toc-sticky::-webkit-scrollbar{display:none}
.toc-sticky-label{
display:block;font-family:var(--font-head);font-size:12px;letter-spacing:1.5px;
text-transform:uppercase;color:rgba(255,255,255,0.58);margin-bottom:14px;
}
.article-toc-sticky ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.article-toc-sticky a{
display:block;color:rgba(255,255,255,0.6);text-decoration:none;font-size:14px;line-height:1.4;
border-left:2px solid rgba(255,255,255,0.12);padding-left:14px;transition:color .2s,border-color .2s;
}
.article-toc-sticky a:hover{color:rgba(255,255,255,0.85)}
/* H3-Unterpunkte (seit v4.24): schmaler eingerückt, etwas kleiner. */
.article-toc-sticky li.toc-sub a{padding-left:24px;font-size:13px}
/* Aktiver Abschnitt: HIER darf die Palette durch (--gold), damit die Hervorhebung zum
Artikel passt - nur die Karte selbst bleibt neutral, das aktive Element zieht mit. */
.article-toc-sticky a.active{color:var(--gold);border-left-color:var(--gold);font-weight:500}
/* Erst ab 1500px genug Platz, damit die TOC-Karte komfortabel innerhalb der Bühne
(max 1500px breit) neben der Textspalte sitzt, statt links über die Bühne hinaus-
zuragen. Darunter (1240-1500px) gibt es die Bühne schon, aber ohne seitliche TOC. */
@media(min-width:1500px){.article-toc-sticky{display:block}}
/* ═══ "ZUM INHALT"-CHIP: Gegenpart zur Sticky-TOC auf schmaleren Screens ═══ */
#toc-jump-btn{
display:none;position:fixed;bottom:32px;left:24px;z-index:9000;
align-items:center;gap:7px;
background:rgba(var(--bg-rgb),0.92);border:1px solid rgba(255,255,255,0.12);
border-radius:100px;color:var(--muted);font-size:13px;font-family:inherit;
padding:11px 18px 11px 14px;cursor:pointer;backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);
opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;
pointer-events:none;
}
#toc-jump-btn.chip-visible{opacity:1;transform:translateY(0);pointer-events:auto}
#toc-jump-btn:hover{color:#fff;border-color:rgba(255,255,255,0.24)}
@media(min-width:1500px){#toc-jump-btn{display:none !important}}
@media(max-width:1499px){#toc-jump-btn{display:flex}}
/* v5.179: „Nach oben"-Button auf allen Artikelseiten, im CI (Gold-Pfeil auf Dunkel, rund).
Sitzt unten rechts, gegenüber dem „Zum Inhalt"-Chip (unten links) - keine Überlappung.
Erscheint nach etwas Scrollen, sanfter Scroll nach oben (respektiert reduce-motion via JS). */
#back-to-top{
position:fixed;bottom:32px;right:24px;z-index:9000;
display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
background:rgba(var(--bg-rgb),0.92);border:1px solid rgba(var(--gold-rgb),0.35);color:var(--gold);cursor:pointer;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);
opacity:0;transform:translateY(8px);pointer-events:none;
transition:opacity .25s ease,transform .25s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
#back-to-top.btt-visible{opacity:1;transform:translateY(0);pointer-events:auto}
#back-to-top:hover{border-color:var(--gold);background:rgba(var(--bg-rgb),0.95);box-shadow:0 0 0 3px rgba(var(--gold-rgb),0.12),var(--shadow-sm)}
#back-to-top:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body.reading-mode #back-to-top{display:none!important}
@media(max-width:600px){#back-to-top{bottom:24px;right:16px;width:42px;height:42px}}
/* ═══ HÄUFIGE FRAGEN: eigene, feste Optik zur Wiedererkennung - bewusst ANDERS als das ═══ */
/* ═══ Inhaltsverzeichnis, damit man beide auf einen Blick auseinanderhält. ═══ */
.article-faq{
background:var(--ink);border:1px solid var(--border);border-radius:var(--radius);
padding:30px 30px 8px;margin:44px 0;
}
.article-faq h2{margin-top:0}
.faq-item{border-bottom:1px solid var(--border);padding:4px 0}
.faq-item:last-of-type{border-bottom:none}
.faq-item summary{
color:var(--gold);font-size:18px;font-weight:400;font-family:var(--font-head);
padding:14px 28px 14px 34px;cursor:pointer;list-style:none;position:relative;
transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
/* Fragezeichen-Badge links (v4.45) - etwas mehr visuelle Struktur zwischen den Items,
statt dass alle Fragen optisch identisch im Fließtext hintereinander stehen. */
.faq-item summary::before{
content:'?';position:absolute;left:0;top:14px;
width:20px;height:20px;border-radius:50%;
background:rgba(var(--gold-rgb),0.12);border:1px solid rgba(var(--gold-rgb),0.35);
color:var(--gold);font-size:12px;font-weight:700;font-family:var(--font-body);
display:flex;align-items:center;justify-content:center;
}
.faq-item summary::after{
content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);
font-size:20px;color:var(--muted);transition:transform .2s;
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--gold-2)}
.article-faq p{margin:0 0 24px;padding-top:2px;padding-left:34px}
/* ═══ QUELLEN-KASTEN (v4.45): jetzt eigene Karte statt nur zwei Trennlinien - war zuvor ═══ */
/* ═══ fast unsichtbar neben FAQ-Box und CTA-Box. Bewusst schlichter als beide (kein ═══ */
/* ═══ Gold-Vollton, kein Gradient) - Quellen sind Beleg, kein Verkaufs-Element. ═══ */
.article-sources{
background:var(--ink);border:1px solid var(--border-2);border-radius:var(--radius);
padding:26px 28px;margin:44px 0;
}
.sources-head{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.sources-head svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}
.article-sources h2{margin:0;font-size:18px}
.sources-intro{font-size:13px;color:var(--dim);margin:0 0 16px}
.article-sources ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.article-sources li{font-size:14px;color:var(--muted);line-height:1.5}
.article-sources a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.article-sources a:hover{color:var(--text)}
html{scroll-behavior:smooth;overflow-y:scroll}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h2[id],h3[id]{scroll-margin-top:90px}
/* ═══ ABWECHSELNDE SEKTIONS-BÄNDER (1:1 Hauptseite-Prinzip) ═══ */
.article-tint{
width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
background:var(--surface);
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
position:relative;z-index:2;
}
.article-tint .article-tint-inner{
max-width:var(--max-article);margin:0 auto;
padding:52px var(--pad);
}
.article-tint .article-tint-inner > *:first-child{margin-top:0}
.article-tint .article-tint-inner > *:last-child{margin-bottom:0}
/* ═══ ABSCHNITTS-KARTEN v3 (v3.96): 7 optische Varianten, zufällig zugewiesen, nie zwei ═══ */
/* ═══ gleiche direkt hintereinander. WICHTIG: alle 5 sind BEGRENZTE KARTEN, KEINE einzige ═══ */
/* ═══ bricht aus der Seitenbreite aus (kein width:100vw irgendwo) - die vorige Fassung ═══ */
/* ═══ hatte genau damit das Layout zerrissen, deshalb diesmal bewusst ohne dieses Risiko. ═══ */
.article-section{
/* v5.121: display:flow-root schließt Floats ein - nötig, seit das Live-Foto (float)
IM Text einer Sektion sitzen kann. Ohne das liefe ein Foto, das höher als der
umgebende Text ist, unten aus der Kachel heraus. flow-root statt overflow:hidden,
weil letzteres den Schlagschatten des Fotos abschneiden würde. Kein Nebeneffekt auf
Rand-Kollaps: die Kachel hat ohnehin Innenabstand, der das schon verhindert. */
display:flow-root;
background:var(--ink);border-left:2px solid var(--gold);
border-radius:var(--radius);padding:32px 30px;margin:44px 0;
}
.article-section > *:first-child{margin-top:0}
.article-section > *:last-child{margin-bottom:0}
/* sv-2 "Eckrahmen": kein durchgehender Rand, zwei goldene Eckwinkel (oben-links, unten-rechts). */
.article-section.sv-2{border-left:none;border-radius:2px;padding:34px 32px;position:relative}
.article-section.sv-2::before,.article-section.sv-2::after{
content:'';position:absolute;width:22px;height:22px;border:2px solid var(--gold);
}
.article-section.sv-2::before{top:8px;left:8px;border-right:none;border-bottom:none}
.article-section.sv-2::after{bottom:8px;right:8px;border-left:none;border-top:none}
/* sv-3 "Verlauf": sanfter diagonaler Farbverlauf statt flacher Fläche, kein Rand. */
.article-section.sv-3{
background:linear-gradient(135deg,var(--ink) 0%,var(--surface) 100%);
border-left:none;border-radius:var(--radius);
}
/* sv-4 "Wasserzeichen": große, dezente Sektionsnummer im Hintergrund. */
.article-section.sv-4{
background:var(--surface);border:1px solid var(--border);border-left:1px solid var(--border);
border-radius:var(--radius);position:relative;overflow:hidden;
}
.article-section.sv-4::before{
content:attr(data-section);position:absolute;top:-0.12em;right:18px;
font-family:var(--font-head);font-size:130px;font-weight:700;
color:rgba(var(--gold-rgb),0.07);line-height:1;pointer-events:none;
}
.article-section.sv-4 > *{position:relative;z-index:1}
/* sv-5 "Akzentbalken oben": statt Rand links ein kräftigerer Goldbalken oben, wie ein
Magazin-Highlight - komplett begrenzt, kein Ausbrechen aus der Spaltenbreite. */
.article-section.sv-5{
background:var(--ink);border-left:none;
border-top:3px solid var(--gold);border-radius:0 0 var(--radius) var(--radius);
padding:28px 30px 32px;
}
/* sv-6 "Doppelrahmen": dezente zweite Rahmenlinie innen (per Pseudo-Element, kein
zusätzliches HTML nötig) - wirkt wie ein Passepartout um ein Kunstwerk, hochwertiger
Galerie-Look. Komplett begrenzt, keine Ausbruch-Technik. */
.article-section.sv-6{
background:var(--ink);border:1px solid var(--border);border-radius:var(--radius);
padding:34px 32px;position:relative;
}
.article-section.sv-6::before{
content:'';position:absolute;inset:7px;border:1px solid rgba(var(--gold-rgb),0.25);
border-radius:calc(var(--radius) - 2px);pointer-events:none;
}
/* sv-7 "Diamant-Akzent": kleines goldenes Rauten-Detail, das oben aus dem Rahmen
herausragt wie ein Siegel - boutique-artiger Touch. Position:absolute bleibt innerhalb
des Elements selbst (kein Viewport-Bezug), also ohne jedes Layout-Risiko. */
.article-section.sv-7{
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
padding:38px 30px 32px;position:relative;
}
.article-section.sv-7::before{
content:'';position:absolute;top:-7px;left:30px;width:14px;height:14px;
background:var(--gold);transform:rotate(45deg);box-shadow:0 0 0 4px var(--black);
}
/* Freier Text außerhalb jeder Sektion (Intro-Absatz vor Key-Takeaways, Streutext) -
dezente, feste Hülle ohne Gold-Akzent, damit sie sich sichtbar von den nummerierten
Sektions-Karten unterscheidet und nicht mit ihnen konkurriert. NICHT Teil der
Zufallsrotation, immer gleiche Optik. */
.article-loose{
background:var(--ink);border:1px solid var(--border-2);
border-radius:var(--radius);padding:26px 28px;margin:32px 0;
}
.article-loose > *:first-child{margin-top:0}
.article-loose > *:last-child{margin-bottom:0}
@media(max-width:640px){
.article-section{padding:24px 20px}
.article-section.sv-2{padding:26px 22px}
.article-section.sv-4::before{font-size:80px}
.article-section.sv-6{padding:26px 22px}
.article-section.sv-6::before{inset:5px}
.article-section.sv-7{padding:30px 22px 26px}
.article-loose{padding:20px 18px}
}
/* ═══ SCROLL-REVEAL (dezent, wie Hauptseite) ═══ */
.reveal{
opacity:0;transform:translateY(24px);
transition:opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94);
}
.reveal.visible{opacity:1;transform:translateY(0)}
/* v5.203 TEXT-REVEAL (Design-Roadmap "2027", Schritt 3): die Text-Sektionen tragen jetzt
ebenfalls .reveal (siehe style_article_sections) - und ihre INHALTE fließen gestaffelt ein:
Überschrift zuerst, dann Absatz für Absatz mit wachsender Verzögerung. :not(.reveal)
nimmt verschachtelte Reveal-Elemente (Figuren/Livefotos haben ihr EIGENES .reveal mit
eigenem Beobachter) bewusst aus, sonst kämpften zwei Regeln um dieselben Properties.
nth-child zählt alle Kinder (auch ausgenommene) - für die Staffelung völlig okay,
die Verzögerung hängt an der Position, nicht an der exakten Zählung. Deckel bei .3s:
lange Sektionen sollen nicht sekundenlang tröpfeln. */
.article-section.reveal > :not(.reveal){
opacity:0;transform:translateY(14px);
transition:opacity .7s cubic-bezier(.25,.46,.45,.94), transform .7s cubic-bezier(.25,.46,.45,.94);
}
.article-section.reveal.visible > :not(.reveal){opacity:1;transform:none}
.article-section.reveal.visible > :not(.reveal):nth-child(2){transition-delay:.08s}
.article-section.reveal.visible > :not(.reveal):nth-child(3){transition-delay:.16s}
.article-section.reveal.visible > :not(.reveal):nth-child(4){transition-delay:.24s}
.article-section.reveal.visible > :not(.reveal):nth-child(n+5){transition-delay:.3s}
@media (prefers-reduced-motion: reduce){
.reveal{opacity:1 !important;transform:none !important}
.article-section.reveal > :not(.reveal){opacity:1 !important;transform:none !important;transition:none !important}
}
/* v5.203 ALTLAST GESCHLOSSEN: unsichtbare Inhalte beim Drucken. Der Beobachter vergibt
.visible erst beim Scrollen - beim Drucken direkt nach dem Laden wären alle noch nicht
gesehenen Reveal-Elemente (jetzt auch der TEXT) im Ausdruck schlicht leer. */
@media print{
.reveal,.article-section.reveal > :not(.reveal){opacity:1 !important;transform:none !important}
}
/* ═══ ABSCHLUSS-CTA mit Foto-Hintergrund ═══ */
.cta-banner{
margin-top:60px;padding:110px 0;text-align:center;
/* v5.113: z-index:2 ergänzt (siehe Begründung bei .engage-row) - stand ebenfalls
außerhalb von
und lag mit z-index:auto unter der halbtransparenten Bühne.
Die INTERNE Schichtung des Banners (cta-bg:0, ::after:1, wrap-article:2) bleibt
unberührt, weil z-index:2 hier einen eigenen Stacking-Context aufspannt und die
Kind-Ebenen nur noch relativ zueinander gelten. */
position:relative;z-index:2;overflow:hidden;
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
background:var(--bg);
}
.cta-banner .cta-bg{
position:absolute;inset:0;z-index:0;
background-size:cover;background-position:center 40%;
}
.cta-banner::after{
content:'';position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(var(--bg-rgb),0.88) 0%,rgba(var(--bg-rgb),0.72) 50%,rgba(var(--bg-rgb),0.92) 100%);
}
.cta-banner .wrap-article{position:relative;z-index:2}
.cta-contact-line{
display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
margin:0 0 24px;font-size:13px;
}
.cta-contact-line a{
display:inline-flex;align-items:center;gap:6px;
color:var(--muted);transition:color .2s;
}
.cta-contact-line a:hover{color:var(--gold)}
.cta-contact-line .sep{color:var(--dim);font-size:11px}
.cta-banner .eyebrow{display:block;margin-bottom:8px}
.cta-banner h2{
font-family:var(--font-head);font-size:clamp(32px,4vw,48px);
letter-spacing:0.5px;color:#fff;font-weight:400;line-height:1.1;
}
.cta-banner h2 span{color:var(--gold)}
.cta-banner p{color:var(--muted);max-width:440px;margin:16px auto 28px;font-size:16px}
.cta-banner .cta-btns{margin-bottom:24px}
.cta-banner .back-link{font-size:13px;color:var(--dim);transition:color .2s}
.cta-banner .back-link:hover{color:var(--gold)}
/* Weiterlesen-Kacheln (v4.88, überarbeitet auf Wunsch): vorher 3 Spalten in der schmalen
Artikel-Textspalte (820px), mit nur 2px Abstand und Trennlinien-Optik (Kachel-Hintergrund
stieß direkt aneinander, die Grid-Hintergrundfarbe schimmerte als Ein-Pixel-Linie durch).
Jetzt: 4 Spalten in der BREITEN Seiten-Container-Klasse (.wrap statt .wrap-article, siehe
weiter unten im Markup) mit echtem Abstand zwischen den Kacheln, jede Kachel als eigen-
ständige Karte mit Rahmen/Rundung/Schatten - fühlt sich bewusst hochwertiger und
großzügiger an statt ineinander verschachtelt. */
.blog-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
@media(max-width:960px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.blog-grid{grid-template-columns:1fr}}
.blog-card{
display:flex;flex-direction:column;background:var(--ink);
border:1px solid var(--border-2);border-radius:var(--radius);
overflow:hidden;position:relative;
transition:background .3s,border-color .3s,transform .35s ease,box-shadow .35s ease;
}
.blog-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.blog-card:hover{
background:var(--surface-2);border-color:rgba(var(--gold-rgb),0.4);
transform:translateY(-5px);
box-shadow:var(--shadow-lg);
}
.blog-card:hover::before{transform:scaleX(1)}
/* v5.202 CURSOR-SPOTLIGHT (Design-Roadmap "2027", Schritt 2): ein radialer Gold-Glow,
der auf den "Weiterlesen"-Karten der Maus folgt - Bühnenlicht-Anmutung, passt zur
DJ-Marke. Die Position kommt als --mx/--my per Skript (Ende der Seite), das CSS
fällt ohne Skript sauber auf die Kartenmitte zurück (50%-Defaults). NUR auf echten
Hover-Geräten (@media hover:hover) - auf Touch gibt es keinen Cursor, dort bliebe
der Glow sinnlos in der Mitte kleben. z-index:3 legt den Glow über Bild und Text,
pointer-events:none lässt Klicks ungehindert durch (Karte bleibt ein ). */
@media (hover:hover){
.blog-card::after{
content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(var(--gold-rgb),0.16), transparent 65%);
opacity:0;transition:opacity .35s;
}
.blog-card:hover::after{opacity:1}
}
.blog-card-img{aspect-ratio:16/9;overflow:hidden;position:relative}
.blog-card-img > div{
position:absolute;inset:0;background-size:cover;background-position:center;
transition:transform .6s ease;opacity:0.85;
}
.blog-card:hover .blog-card-img > div{transform:scale(1.06);opacity:1}
.blog-card-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.card-tag-mini{
font-size:11px;letter-spacing:0.6px;text-transform:uppercase;
color:var(--gold);font-weight:600;
}
.blog-card-body h3{
font-family:var(--font-head);font-size:18px;letter-spacing:0.2px;
line-height:1.2;color:#fff;font-weight:400;margin:8px 0;text-wrap:balance}
.blog-card-body p{font-size:14px;color:var(--muted);line-height:1.6;flex:1}
.card-read-more{
display:inline-flex;align-items:center;gap:6px;margin-top:14px;
font-family:var(--font-head);font-size:13px;letter-spacing:0.8px;
text-transform:uppercase;color:var(--gold);font-weight:400;transition:gap .2s,color .2s;
}
.blog-card:hover .card-read-more{gap:10px;color:var(--gold-2)}
/* ═══ FOOTER (identisch Homepage) ═══ */
footer{
position:relative;z-index:2;
margin-top:0;border-top:1px solid var(--border);
background:var(--surface);padding:56px 0 0;
}
.footer-grid{
display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
padding-bottom:48px;border-bottom:1px solid var(--border-2);
}
.footer-brand img{height:32px;width:auto;margin-bottom:20px;opacity:0.85}
.footer-brand p{font-size:14px;color:var(--muted);line-height:1.75;max-width:280px}
.footer-col h4{
font-size:11px;letter-spacing:0.9px;text-transform:uppercase;
color:var(--gold);margin-bottom:18px;font-weight:600;
}
.footer-col a,.footer-col span{
display:flex;align-items:center;gap:7px;font-size:14px;color:var(--muted);
margin-bottom:10px;transition:color .2s;
}
.footer-col a:hover{color:#fff}
.footer-bottom{
padding:24px 0;display:flex;justify-content:space-between;align-items:center;
flex-wrap:wrap;gap:14px;font-size:12px;color:var(--dim);
}
.footer-legal{display:flex;gap:20px;flex-wrap:wrap}
.footer-legal a{color:var(--dim);transition:color .2s}
.footer-legal a:hover{color:var(--muted)}
@media(max-width:860px){
.footer-grid{grid-template-columns:1fr 1fr;row-gap:40px}
.footer-grid .footer-brand{grid-column:1/-1}
}
@media(max-width:480px){
.footer-grid{grid-template-columns:1fr}
.footer-grid .footer-brand{grid-column:auto}
}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:0.01ms !important}
}
@media(max-width:640px){
.article-body h2{font-size:26px}
.pull-quote{font-size:20px}
.price-table{font-size:14px}
.price-table th,.price-table td{padding:10px 12px}
}
/* ── Teilen + Kommentare ── */
/* ═══ GEFÄLLT MIR ═══ */
.like-box{max-width:760px;margin:50px auto 0;padding:0 24px;display:flex;justify-content:center}
.article-like-btn{
display:inline-flex;align-items:center;gap:9px;position:relative;
background:rgba(var(--gold-rgb),0.08);border:1px solid rgba(var(--gold-rgb),0.3);
border-radius:100px;color:var(--gold);font-size:14px;font-family:inherit;
padding:11px 22px;cursor:pointer;transition:background .2s,border-color .2s,transform .15s;
}
.article-like-btn:hover{background:rgba(var(--gold-rgb),0.15);border-color:rgba(var(--gold-rgb),0.5)}
.article-like-btn:active{transform:scale(0.96)}
.article-like-btn.liked{background:var(--gold);border-color:var(--gold);color:var(--bg);font-weight:500}
.article-like-btn.liked svg{fill:var(--bg)}
.article-like-btn svg{fill:var(--gold);transition:fill .2s}
.article-like-btn.pulse,#article-like-float.pulse{animation:likePulse .4s ease}
#article-like-float{transition:opacity .25s ease,transform .2s ease;opacity:0;pointer-events:none}
#article-like-float.float-visible{opacity:1;pointer-events:auto}
@keyframes likePulse{0%{transform:scale(1)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
/* ═══ Herz-Partikel-Effekt beim Liken: 4 kleine Herzen fliegen hoch und verblassen ═══ */
.like-particle{
position:absolute;pointer-events:none;font-size:13px;color:var(--gold);
animation:likeParticleFly .8s ease-out forwards;z-index:5;
}
@keyframes likeParticleFly{
0%{opacity:1;transform:translate(0,0) scale(0.6)}
100%{opacity:0;transform:translate(var(--px,0),-38px) scale(1.1)}
}
@media(prefers-reduced-motion:reduce){.like-particle{display:none}}
/* v5.113-Bugfix ("da liegt was drüber, die Buttons wirken deaktiviert"): .article-stage
ist eine HALBTRANSPARENTE dunkle Fläche (rgba(var(--bg-rgb),0.55)) mit z-index:1.
liegt mit z-index:2 korrekt darüber - der Artikeltext sah deshalb normal aus. Diese
beiden Blöcke stehen aber AUSSERHALB von und hatten weder position noch z-index,
lagen damit UNTER der Bühne und bekamen deren 55%-Abdunklung übergestülpt: Gold-Buttons
wirkten ausgegraut/deaktiviert. footer macht es längst richtig vor (position:relative;
z-index:2, siehe unten) - dieselbe Behandlung jetzt auch hier. */
.engage-row{
position:relative;z-index:2;
/* v5.114: Breite exakt wie die Artikel-Kacheln (Autorenbox, Zitat-Box). Die sitzen in
.wrap-article (max-width:820px, padding:0 var(--pad)) und sind dadurch effektiv
820px MINUS doppeltem Seitenabstand breit. Die alten 760px waren vorher unsichtbar,
weil dieser Block gar keinen Hintergrund hatte - seit v5.112 fällt der Unterschied
sofort auf. width:calc(100% - 2*pad) hält auf schmalen Bildschirmen denselben
Seitenabstand wie .wrap-article, statt bündig an die Displaykante zu stoßen. */
width:calc(100% - 2 * var(--pad));
max-width:calc(var(--max-article) - 2 * var(--pad));
margin:50px auto 0;padding:20px 24px;
background:var(--ink);border:1px solid var(--border-2);border-radius:var(--radius);
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.engage-row .like-box{margin:0;padding:0;max-width:none;justify-content:flex-start}
.engage-row .share-box{margin:0;padding:0;max-width:none;display:flex;align-items:center;gap:12px;min-width:0}
.share-label{font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.59);white-space:nowrap;flex-shrink:0}
/* Vorher: nowrap + overflow-x:auto mit AUSGEBLENDETEM Scrollbalken. Reichte der
Platz nicht, war der letzte Knopf ("Link kopieren") angeschnitten - ohne jeden
Hinweis, dass man seitlich scrollen kann. Jetzt umbrechen statt abschneiden:
die Knoepfe ruecken in eine zweite Zeile, es bleibt immer alles erreichbar. */
.share-btns{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.share-btns a,.share-btns button{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;background:none;border:1px solid rgba(255,255,255,0.15);border-radius:8px;color:rgba(255,255,255,0.75);padding:8px 12px;font-size:13px;font-family:inherit;cursor:pointer;text-decoration:none;transition:all .2s;white-space:nowrap}
.share-btns a:hover,.share-btns button:hover{border-color:var(--gold);color:var(--gold)}
.share-btns svg{width:16px;height:16px;fill:currentColor}
.comments-box{
position:relative;z-index:2;
/* v5.114: gleiche Breiten-Rechnung wie .engage-row oben (siehe Begründung dort). */
width:calc(100% - 2 * var(--pad));
max-width:calc(var(--max-article) - 2 * var(--pad));
margin:24px auto 60px;padding:24px;
background:var(--ink);border:1px solid var(--border-2);border-radius:var(--radius);
}
.comments-box h3{font-size:15px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin:0 0 16px}
.comment-item{border-bottom:1px solid rgba(255,255,255,0.08);padding:14px 0}
.comment-item .c-head{font-size:13px;color:rgba(255,255,255,0.59);margin-bottom:5px}
.comment-item .c-head strong{color:var(--gold);font-weight:600}
.comment-item .c-text{color:rgba(255,255,255,0.8);font-size:15px;line-height:1.6;white-space:pre-wrap}
.comment-form{margin-top:22px}
.comment-form input[type=text],.comment-form textarea{width:100%;box-sizing:border-box;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.15);border-radius:8px;color:#fff;padding:11px 14px;font-size:15px;font-family:inherit;margin-bottom:10px}
.comment-form textarea{min-height:100px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--gold)}
.comment-form button{background:var(--gold);border:none;border-radius:8px;color:var(--bg);font-weight:600;padding:11px 26px;font-size:15px;font-family:inherit;cursor:pointer}
.comment-form button:disabled{opacity:0.5;cursor:wait}
.comment-form .c-note{font-size:12px;color:rgba(255,255,255,0.57);margin-top:8px}
.c-msg{font-size:14px;margin-top:10px;display:none}
.c-msg.ok{color:var(--ok);display:block}
.c-msg.err{color:var(--err);display:block}
.hp-field{position:absolute;left:-9999px;top:-9999px}
/* ═══ MEDIEN-BAUSTEINE: Bilder-Slider ═══ */
.media-slider{position:relative;max-width:760px;margin:32px auto;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:var(--surface)}
.media-slider .ms-track{display:flex;height:100%;transition:transform .5s ease}
.media-slider .ms-track img{width:100%;height:100%;object-fit:cover;flex-shrink:0}
.media-slider .ms-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(var(--bg-rgb),0.55);border:1px solid rgba(255,255,255,0.15);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.media-slider .ms-arrow:hover{background:rgba(var(--bg-rgb),0.8)}
.media-slider .ms-arrow.left{left:12px} .media-slider .ms-arrow.right{right:12px}
.media-slider .ms-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:7px}
.media-slider .ms-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.35);cursor:pointer;transition:background .2s}
.media-slider .ms-dots span.active{background:var(--gold)}
/* ═══ GRID/MOSAIK: mehrere Bilder gleichzeitig, kein Klicken/Warten nötig ═══ */
.media-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;max-width:760px;margin:32px auto}
/* ═══ MASONRY-WAND (v5.156) ═══
Bilder in natürlichem Seitenverhältnis, versetzt gestapelt (Pinterest-Optik).
CSS columns statt Grid: die Bilder behalten ihre Höhe, nichts wird beschnitten. */
.media-masonry{position:relative;columns:3 200px;column-gap:10px;max-width:760px;margin:32px auto}
.media-masonry img{display:block;width:100%;margin-bottom:10px;border-radius:8px;
border:1px solid var(--border,rgba(var(--gold-rgb),0.14));break-inside:avoid}
@media(max-width:560px){.media-masonry{columns:2 140px;column-gap:8px}
.media-masonry img{margin-bottom:8px}}
/* ═══ POLAROID-STREUUNG (v5.156) ═══
"Hingelegte" Sofortbilder: weißer Rahmen, unten dicker, leichte abwechselnde Drehung
über nth-child - keine Inline-Styles nötig. Drehung nur ab Tablet-Breite; auf schmalen
Bildschirmen stehen die Bilder gerade (gedreht + klein = unruhig). */
.media-polaroid{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
max-width:760px;margin:36px auto;padding:6px 0}
.media-polaroid .pol-item{margin:0;background:#f4f1ea;padding:8px 8px 26px;
border-radius:2px;box-shadow:0 4px 14px rgba(0,0,0,0.45);
flex:0 1 200px;transition:transform .25s ease}
.media-polaroid .pol-item img{display:block;width:100%;border-radius:1px}
@media(min-width:561px){
.media-polaroid .pol-item:nth-child(3n+1){transform:rotate(-2.2deg)}
.media-polaroid .pol-item:nth-child(3n+2){transform:rotate(1.6deg)}
.media-polaroid .pol-item:nth-child(3n){transform:rotate(-0.8deg)}
.media-polaroid .pol-item:hover{transform:rotate(0deg) scale(1.04);z-index:2}
}
@media(max-width:560px){.media-polaroid{gap:12px}
.media-polaroid .pol-item{flex-basis:140px;padding:6px 6px 18px}}
@media(prefers-reduced-motion:reduce){.media-polaroid .pol-item{transition:none}}
/* ═══ TIMELINE (v5.154) ═══
Vertikale Zeitleiste für Ablauf-Artikel. Farben ausschließlich über die Paletten-
Variablen (--gold/--ink/--border) - färbt sich automatisch mit, wie alle Bausteine. */
.media-timeline{max-width:680px;margin:36px auto;padding:20px 20px 8px;
background:var(--ink,var(--bg));border:1px solid var(--border,rgba(var(--gold-rgb),0.14));
border-radius:10px}
.media-timeline .tl-head{font-family:var(--font-head,'Bebas Neue',sans-serif);
font-size:20px;letter-spacing:0.4px;color:var(--gold,var(--gold));margin-bottom:18px}
.media-timeline .tl-track{position:relative;padding-left:26px}
/* Die durchgehende Linie: sitzt auf der Punktspur. */
.media-timeline .tl-track::before{content:'';position:absolute;left:7px;top:6px;bottom:14px;
width:2px;background:linear-gradient(to bottom,var(--gold,var(--gold)),rgba(255,255,255,0.06))}
.media-timeline .tl-item{position:relative;padding-bottom:22px}
.media-timeline .tl-item:last-child{padding-bottom:14px}
.media-timeline .tl-dot{position:absolute;left:-26px;top:5px;width:12px;height:12px;
border-radius:50%;background:var(--gold,var(--gold));border:2px solid var(--ink,var(--bg));
box-shadow:0 0 0 2px var(--gold,var(--gold))}
.media-timeline .tl-time{display:inline-block;font-family:var(--font-head,'Bebas Neue',sans-serif);
font-size:15px;letter-spacing:0.8px;color:var(--gold,var(--gold));margin-bottom:2px;
font-variant-numeric:tabular-nums}
.media-timeline .tl-body strong{display:block;font-size:16px;color:rgba(255,255,255,0.88);
font-weight:600;line-height:1.4}
.media-timeline .tl-body p{margin:4px 0 0;font-size:14px;line-height:1.65;
color:var(--muted,rgba(255,255,255,0.6))}
@media(max-width:560px){.media-timeline{padding:16px 14px 6px}}
/* ═══ SPOTIFY-PLAYLIST (v5.149) ═══
Alle Farben laufen über --gold / --ink / --border - genau die Variablen, die
apply_palette_colors() innerhalb von .article-body auf die gewählte Artikel-Palette
umbiegt. Der Block färbt sich dadurch AUTOMATISCH mit, ohne dass hier eine einzige
Palette namentlich vorkommt. Gleiche Maximalbreite (760px) wie die übrigen Medien-
Bausteine, damit die Blocklandschaft im Artikel einheitlich bleibt. */
.media-spotify{
max-width:760px;margin:36px auto;padding:20px 20px 16px;
background:linear-gradient(160deg,rgba(var(--gold-rgb,200,168,75),0.07),rgba(0,0,0,0) 62%),var(--ink,var(--bg));
border:1px solid var(--border,rgba(var(--gold-rgb),0.14));
border-left:3px solid var(--gold,var(--gold));
border-radius:10px;
}
.media-spotify .sp-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.media-spotify .sp-icon{
width:26px;height:26px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
border-radius:50%;font-size:14px;
background:var(--gold,var(--gold));color:var(--black,var(--bg));
}
.media-spotify .sp-title{
font-family:var(--font-head,'Bebas Neue',sans-serif);
font-size:20px;letter-spacing:0.4px;color:var(--gold,var(--gold));line-height:1.2;
}
.media-spotify .sp-note{
margin:8px 0 0;font-size:15px;line-height:1.65;
color:var(--muted,rgba(255,255,255,0.62));
}
.media-spotify .sp-frame{margin-top:14px;line-height:0}
.media-spotify iframe{display:block;width:100%;border:0}
@media(max-width:560px){
.media-spotify{padding:16px 14px 12px;margin:28px auto}
.media-spotify .sp-title{font-size:18px}
}
.media-grid img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
/* ═══ FILMSTREIFEN: großes Hauptbild + klickbare Vorschau-Reihe ═══ */
.media-filmstrip{max-width:760px;margin:32px auto}
.media-filmstrip .fs-main{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:var(--surface)}
.media-filmstrip .fs-main img{width:100%;height:100%;object-fit:cover;display:block}
.media-filmstrip .fs-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:2px}
.media-filmstrip .fs-thumbs img{width:78px;height:52px;object-fit:cover;border-radius:6px;cursor:pointer;opacity:0.55;transition:opacity .2s,outline .2s;flex-shrink:0;outline:2px solid transparent;outline-offset:2px}
.media-filmstrip .fs-thumbs img:hover{opacity:0.85}
.media-filmstrip .fs-thumbs img.active{opacity:1;outline-color:var(--gold)}
/* ═══ VORHER/NACHHER-SCHIEBER ═══ */
/* v5.121 (auf Wunsch): Live-Foto - ein echtes Foto MITTEN IM TEXT, der Text fließt drumherum.
Bewusst KEIN eigener Block wie die anderen Medien-Bausteine: es soll im Lesefluss sitzen.
v5.127: Seite wählbar (.lf-left) - die KI bestimmt sie anhand des Fotos selbst (siehe
suggest_livefoto_spot). Gestalterische Regel: Das Hauptmotiv soll zum TEXT hin zeigen,
nicht zum Seitenrand. Steht die Person im Foto links, gehört das Foto nach rechts.
OPTIK v5.127: Die schräge Drehung ist RAUS - bei einem echten Event-Foto wirkte sie wie
ein Gimmick und stellte sich gegen den ruhigen, geradlinigen Rest der Seite. Der Rahmen
ist jetzt Gold statt Weiß-Grau (spricht die Sprache der Seite), plus ein feiner innerer
Gold-Schimmer an der Oberkante - dieselbe Handschrift wie Intro-Kachel und Autorenbox.
Ergebnis: das Foto wirkt eingebaut statt aufgeklebt. */
.media-livefoto{
position:relative;
float:right;width:min(300px,42%);margin:6px 0 20px 28px;
/* v5.134: KEIN overflow:hidden mehr - das hätte den Ambient-Glow (::before) abgeschnitten.
Rahmen und Rundung wandern deshalb aufs Bild selbst, die figure ist nur noch Träger.
Exakt derselbe Kniff, den .article-fig für seinen Glow schon nutzt.
BEWUSST KEIN transform/transition hier: Die figure trägt .reveal (Scroll-Effekt), und
.reveal setzt selbst transform+transition - steht im Stylesheet weiter unten und würde
alles hier Gesetzte überschreiben. Der Hover-Effekt sitzt deshalb auf dem BILD. */
}
/* Ambient-Glow: eine weichgezeichnete, gesättigte Kopie des Fotos leuchtet dahinter hervor.
Das ist die Bildsprache der Seite (siehe .article-fig::before) - das Live-Foto war bisher
das einzige Bild ohne. Dezenter dosiert, weil es kleiner ist und mitten im Text sitzt. */
.media-livefoto::before{
content:'';position:absolute;inset:-8% -7%;z-index:0;
background-image:var(--fig-img);background-size:cover;background-position:center;
filter:blur(26px) saturate(1.3);
opacity:0.28;border-radius:20px;
pointer-events:none;
transition:opacity .5s ease;
}
.media-livefoto:hover::before{opacity:0.45}
.media-livefoto.lf-left{float:left;margin:6px 28px 20px 0}
.media-livefoto img{
position:relative;z-index:1;
width:100%;height:auto;display:block;
border-radius:10px;
border:1px solid rgba(var(--gold-rgb),0.30);
box-shadow:0 14px 36px rgba(0,0,0,0.5), inset 0 1px 0 rgba(var(--gold-rgb),0.35);
transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
/* Hebt sich beim Darüberfahren leicht von seinem eigenen Lichtschein ab. */
.media-livefoto:hover img{
transform:translateY(-4px);
box-shadow:0 20px 44px rgba(0,0,0,0.58), inset 0 1px 0 rgba(var(--gold-rgb),0.5);
}
@media(max-width:640px){
.media-livefoto,.media-livefoto.lf-left{float:none;width:100%;margin:22px auto}
/* Auf dem Handy bringt der Glow wenig (volle Breite, kaum Rand) und kostet Rechenzeit -
wie bei .article-fig::before, das dort ebenfalls ausgeschaltet wird. */
.media-livefoto::before{display:none}
}
@media(prefers-reduced-motion:reduce){
.media-livefoto img,.media-livefoto::before{transition:none}
.media-livefoto:hover img{transform:none}
}
.media-beforeafter{position:relative;max-width:760px;margin:32px auto;border-radius:10px;overflow:hidden;aspect-ratio:16/9;user-select:none}
.media-beforeafter .ba-before{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.media-beforeafter .ba-after-wrap{position:absolute;top:0;left:0;height:100%;overflow:hidden}
.media-beforeafter .ba-after-wrap img{position:absolute;top:0;left:0;height:100%;object-fit:cover;max-width:none}
.media-beforeafter .ba-handle{position:absolute;top:0;bottom:0;width:3px;background:var(--gold);cursor:ew-resize;transform:translateX(-50%)}
.media-beforeafter .ba-handle::after{content:'⇔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:16px}
.media-beforeafter .ba-label{position:absolute;bottom:10px;z-index:2;font-size:11px;letter-spacing:0.4px;text-transform:uppercase;background:rgba(var(--bg-rgb),0.6);color:#fff;padding:3px 9px;border-radius:100px}
.media-beforeafter .ba-label.before{left:10px} .media-beforeafter .ba-label.after{right:10px}
/* ═══ VORLESEN: Button in der Meta-Zeile des Artikelkopfs ═══ */
.article-tts-btn{
display:inline-flex;align-items:center;gap:6px;
background:rgba(var(--gold-rgb),0.1);border:1px solid rgba(var(--gold-rgb),0.35);
border-radius:100px;color:var(--gold);font-size:13px;letter-spacing:0.2px;
padding:5px 13px 5px 11px;cursor:pointer;transition:background .2s,border-color .2s;
font-family:inherit;line-height:1;
}
.article-tts-btn:hover{background:rgba(var(--gold-rgb),0.18);border-color:rgba(var(--gold-rgb),0.5)}
.article-tts-btn.playing{background:rgba(var(--gold-rgb),0.22);border-color:rgba(var(--gold-rgb),0.55)}
.article-tts-btn.unsupported{display:none}
/* Feste Breite fürs Label, damit die Pille nicht springt, wenn der Text zwischen
"Vorlesen"/"Pause"/"Weiter" wechselt - längstes Wort (Vorlesen) gibt das Maß vor. */
#article-tts-label{display:inline-block;min-width:6.2ch;text-align:left}
/* Sanfter, ruhiger Puls-Glanz im Ruhezustand, damit der Button auffällt, ohne aufdringlich
zu wirken - stoppt beim Abspielen (der "playing"-Zustand signalisiert dann schon selbst
genug) und beim Hover (kein Ablenken während der Interaktion). */
@keyframes ttsPulse{
0%,100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),0.32)}
50%{box-shadow:0 0 0 7px rgba(var(--gold-rgb),0)}
}
.article-tts-btn:not(.playing){animation:ttsPulse 2.6s ease-in-out infinite}
.article-tts-btn:hover{animation:none}
@media(prefers-reduced-motion:reduce){.article-tts-btn{animation:none !important}}
@media(max-width:480px){.article-tts-btn span:not(#article-tts-icon){display:none}.article-tts-btn{padding:6px}}
/* Vorlesen + Lesemodus als EIN Flex-Item innerhalb der Meta-Zeile, damit die zwei
Buttons beim Umbruch (viel Meta-Text auf schmalen Bildschirmen) zusammenbleiben
statt einzeln auseinandergerissen zu werden. */
.article-actions{display:inline-flex;align-items:center;gap:8px}
/* ═══ LESEMODUS: ablenkungsfreies Lesen - blendet alles außer Titel/Meta/Text/FAQ aus ═══ */
body.reading-mode #nav,body.reading-mode footer,body.reading-mode .cta-banner,
body.reading-mode .share-box,body.reading-mode .comments-box,body.reading-mode .like-box,
body.reading-mode .article-toc-sticky,body.reading-mode #wa-float,body.reading-mode #article-like-float,
body.reading-mode .related,body.reading-mode .author-box,body.reading-mode #read-progress,
body.reading-mode .article-breadcrumb,body.reading-mode .cta-box,body.reading-mode #toc-jump-btn{display:none!important}
body.reading-mode .wrap-article.article-body{max-width:680px}
body.reading-mode .article-h1{font-size:clamp(28px,4vw,40px)}
#reading-mode-btn.active{background:var(--gold);color:var(--bg)}
#reading-mode-btn.active svg{color:var(--bg)}
/* ═══ LIGHTBOX: Klick-Vergrößerung für Bild 2/3 (immer aktiv, kein Schalter nötig) ═══ */
.article-fig img{cursor:zoom-in}
#lightbox-overlay{position:fixed;inset:0;z-index:9999;background:rgba(var(--bg-rgb),0.94);display:none;align-items:center;justify-content:center}
#lightbox-overlay.open{display:flex}
#lightbox-overlay img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:4px}
#lightbox-overlay .lb-close{position:absolute;top:20px;right:24px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#lightbox-overlay .lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#lightbox-overlay .lb-arrow.left{left:20px} #lightbox-overlay .lb-arrow.right{right:20px}
/* Scrollbalken im CI (v5.244): Systemgraue Balken waren nach der Petrol-Umstellung der
letzte Fremdkoerper. Daumen im dunklen Bernstein, volle Akzentfarbe erst unterm Zeiger.
Identischer Block wie in styles.css der Hauptseiten - der Kommentar ist zugleich der
Marker, ueber den ensure_ci_petrol() bereits versorgte Dateien erkennt. */
html{scrollbar-color:var(--gold-deep) var(--bg)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
::-webkit-scrollbar-corner{background:var(--bg)}
/* ═══════════════════════════════════════════
COOKIE BANNER
═══════════════════════════════════════════ */
#cookie-backdrop{
position:fixed;inset:0;z-index:7999;
background:rgba(0,0,0,0.55);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;pointer-events:none;
transition:opacity .3s ease;
}
#cookie-backdrop.cookie-backdrop-visible{opacity:1;pointer-events:auto}
#cookie{
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
z-index:8000;width:calc(100% - 48px);max-width:460px;
background:rgba(15,40,46,0.96);
border:1px solid var(--border);
border-radius:var(--radius,4px);padding:14px 16px;
box-shadow:0 8px 32px rgba(0,0,0,0.45);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
animation:cookieFadeIn .35s ease-out;
transition:transform .3s ease-in,opacity .3s ease-in;
}
@keyframes cookieFadeIn{
from{transform:translate(-50%,-50%) scale(.94);opacity:0}
to{transform:translate(-50%,-50%) scale(1);opacity:1}
}
#cookie.cookie-closing{transform:translate(-50%,-50%) scale(.94);opacity:0}
.cookie-inner{display:flex;flex-direction:column;gap:12px}
.cookie-text p{color:var(--muted);line-height:1.6;margin:0}
.cookie-text a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.cookie-text a:hover{color:var(--gold-2)}
.cookie-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.cookie-btn{
font:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;
padding:8px 16px;border-radius:var(--radius-pill,999px);cursor:pointer;
border:1px solid var(--border);background:transparent;color:var(--muted);
transition:background .2s,color .2s,border-color .2s;
}
.cookie-btn:hover{color:#fff;border-color:var(--border-2)}
.cookie-btn-gold{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.cookie-btn-gold:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--bg)}
@media(max-width:500px){
#cookie{width:calc(100% - 32px);max-width:400px;padding:12px 14px}
.cookie-actions{justify-content:stretch}
.cookie-btn{flex:1;text-align:center}
}
/* ═══ Blog im neuen Design: Ueberschreibungen (nach der umgefaerbten Altfassung) ═══
Quelle: tools/blog-neu/alt.css (Artikel-Vorlage des Blog-Studios bis v5.279) + diese Datei; gebaut von tools/blog-neu-bauen.cjs.
Grundsatz: Markup, Klassen und IDs der Artikel bleiben, nur das Aussehen aendert sich (die Skripte der Vorlage haengen daran). */
/* Grundlage */
body{background:var(--bg);color:var(--text);font-weight:300;font-size:17px}
.page-grain{opacity:.035}
#grid-parallax,.article-stage{display:none}
/* Navigation (neues Menue: Pille "Anfragen", Bebas, schlanke Leiste) */
#nav{height:76px;background:transparent;border-bottom:1px solid transparent}
#nav:not(.scrolled){height:84px}
#nav.scrolled{background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
#nav:not(.scrolled) .nav-logo img{height:44px;filter:none}
#nav:not(.scrolled) .nav-logo{padding-top:0;align-items:center}
.nav-logo img{height:34px}
.nav-links{gap:26px;font-size:13px;letter-spacing:.08em}
.nav-links a.nav-cta{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--bg);font-family:var(--font-body);font-weight:500;font-size:14px;letter-spacing:.04em;text-transform:none;padding:0 26px;min-height:46px;display:inline-flex;align-items:center;border-radius:999px}
.nav-links a.nav-cta:hover{background:linear-gradient(135deg,var(--gold-2),var(--gold-2))}
.lang-toggle{border-color:var(--line)}.lang-toggle button.active{background:var(--gold-rgb-solid,var(--gold));color:var(--bg)}
.nav-logo img{content:url('/images/logo-schriftzug-weiss.webp');width:auto} /* das neue Menue traegt das weisse Logo */
.article-toc,.article-toc *{font-family:var(--font-body);font-style:normal}
.article-toc h2{font-family:var(--font-body);font-weight:600;font-size:22px;letter-spacing:-.01em;text-transform:none}
.mobile-menu{background:var(--bg)}
.mobile-menu a{font-weight:400;font-size:40px;border-bottom:1px solid var(--line)}
/* Artikelkopf: Brotkrumen, Eyebrow, grosse Bebas-Ueberschrift, Metazeile, schlichtes Titelbild */
.article-header{padding-top:128px}
.article-header .wrap-hero{max-width:980px;margin:0 auto;padding:0 var(--pad)}
.article-header .wrap-hero:first-child{order:2;margin-top:34px}
.article-header{display:flex;flex-direction:column}
.article-header .wrap-hero:last-child{order:1}
.article-head-card{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;text-align:left;margin:0;border-radius:0}
.article-head-card::before{display:none}
.article-breadcrumb{justify-content:flex-start;font-size:13px;color:var(--dim);margin-bottom:22px}
.article-breadcrumb a{color:var(--muted)}.article-breadcrumb a:hover{color:var(--gold)}
.head-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.head-eyebrow::before{content:'';width:34px;height:1px;background:var(--gold)}.head-eyebrow::after{display:none}
.article-h1{font-family:var(--font-head);font-weight:400;font-size:clamp(42px,6.6vw,92px);line-height:.94;letter-spacing:.01em;text-align:left;text-transform:uppercase;margin:0 0 24px}
.article-h1 .h1-lead{display:block}
.article-h1 .h1-sub{display:block;margin-top:10px;font-size:.62em;line-height:1.02;color:var(--text);text-shadow:none;letter-spacing:.01em;font-weight:400}
.article-h1 em{font-style:normal;color:var(--gold-2)}
.article-meta{justify-content:flex-start;margin-top:0;padding-top:0;font-size:14px;color:var(--muted)}
.article-meta::before{display:none}
.article-meta .dot{background:var(--dim)}
.author-avatar{background:var(--surface-2);box-shadow:0 0 0 1px var(--line-2);color:var(--gold)}
.article-actions{display:flex;gap:10px;margin-left:0;flex-wrap:wrap}
.article-tts-btn{min-height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;font-size:13px}
.article-tts-btn:hover{border-color:var(--gold);color:var(--text)}
.hero-img-wrap{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:none}
.hero-img-wrap::after{background:linear-gradient(to bottom,transparent 60%,rgba(var(--bg-rgb),.45) 100%)}
.hero-img-wrap:hover{transform:none}
.article-hero-img{aspect-ratio:16/8;width:100%;object-fit:cover}
.ki-mark{background:rgba(var(--bg-rgb),.88);border:1px solid var(--line-2);color:var(--gold-2)}
/* Kontrast (10.10.2026, Messung Terrakotta live: 2,6:1 bei Deckkraft .45): die KI-Kennzeichnung muss lesbar sein */
.ki-mark{opacity:.85}
/* Artikeltext */
.wrap-article.article-body{max-width:820px}
.article-loose,.article-body > p:first-of-type{font-family:var(--font-serif)}
.article-body p,.article-body li{font-size:18px;line-height:1.75;color:var(--muted)}
.article-body h2{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:clamp(28px,3.6vw,42px);letter-spacing:0;line-height:1.12;text-transform:none;color:var(--text);margin:54px 0 18px}
.article-body h3{font-family:var(--font-body);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--text)}
.article-body a.inline-link{color:var(--gold-2)}
.pull-quote{border-left:3px solid var(--gold);background:var(--surface);border-radius:0 var(--r) var(--r) 0}
.pull-quote p{font-family:var(--font-serif);font-style:italic}
.article-fig{border-radius:var(--r);border:1px solid var(--line)}
.price-table{border-radius:var(--r);overflow:hidden}
/* Handlungsaufruf, Autorenbox, Weiterlesen */
.cta-box{border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(135deg,var(--surface),var(--bg-2))}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--bg);border-radius:999px;font-family:var(--font-body);font-weight:500;letter-spacing:.04em;text-transform:none}
.btn-outline{border-radius:999px;border-color:var(--line);font-family:var(--font-body);font-weight:500;text-transform:none}
.btn-outline:hover{border-color:var(--gold)}
.author-box{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.related h2{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:0}
.key-takeaways h2,.comments-box h3{font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:.02em;text-transform:none}
.cta-banner h2{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:0;font-size:clamp(28px,3.6vw,42px);line-height:1.12}
.blog-card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.blog-card:hover{border-color:var(--line-2);transform:translateY(-5px)}
.blog-card h3{font-family:var(--font-body);font-weight:600;font-size:22px;letter-spacing:-.01em;line-height:1.15;text-transform:none}
/* Fussleiste und Cookie-Banner */
footer{background:var(--bg-2);border-top:1px solid var(--line)}
#cookie{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r)}
/* KI-Pille (10.10.2026, Betreiber: ueberall derselbe KI-Hinweis wie auf den Hauptseiten): Stern mit Hover-Karte statt Kreis.
Die Marken bleiben im Markup die Quelle; blog-neu-kopf.js setzt je Bild-Container eine Pille an dieselbe Stelle
und blendet die Marke dann aus (.kp-weg). Ohne JS bleibt der Kreis sichtbar, die Kennzeichnung geht also nie verloren. */
.ki-mark.kp-weg{display:none!important}
.ki-pille{position:absolute;right:10px;bottom:10px;z-index:4;box-sizing:border-box;display:inline-flex;align-items:center;height:28px;max-width:28px;margin:0;padding:0 6px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(var(--bg-rgb),.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden;white-space:nowrap;-webkit-appearance:none;appearance:none;font:500 12px/1 var(--font-body);letter-spacing:.05em;color:var(--text);cursor:pointer;transition:max-width .5s cubic-bezier(.2,.8,.2,1),border-color .3s,padding .3s}
.ki-pille.ki-pille-cta{bottom:auto;top:12px}
.ki-pille .t{margin-left:7px;opacity:0;transition:opacity .25s}
.ki-pille:hover,.ki-pille:focus-visible,.ki-pille.open{max-width:110px;padding:0 11px 0 7px;border-color:rgba(var(--gold-rgb),.6)}
.ki-pille:hover .t,.ki-pille:focus-visible .t,.ki-pille.open .t{opacity:1;transition-delay:.15s}
.ki-pille:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.kp-sp{width:14px;height:14px;flex:none;overflow:visible;color:var(--gold-2)}
.kp-sp path{transform-box:fill-box;transform-origin:center}
.kp-sp .b{opacity:.85;animation:kpBig 3.2s ease-in-out infinite}
.kp-sp .s{opacity:.6;animation:kpSmall 3.2s ease-in-out 1.6s infinite}
@keyframes kpBig{0%,78%,100%{transform:scale(1) rotate(0);opacity:.85;filter:none}87%{transform:scale(1.4) rotate(25deg);opacity:1;filter:drop-shadow(0 0 6px rgba(242,200,135,.8))}94%{transform:scale(1.05) rotate(25deg);opacity:.95;filter:none}}
@keyframes kpSmall{0%,82%,100%{transform:scale(1);opacity:.6;filter:none}89%{transform:scale(1.6);opacity:1;filter:drop-shadow(0 0 5px rgba(242,200,135,.85))}}
.ki-pille::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(105deg,transparent 20%,rgba(255,240,215,.22) 50%,transparent 80%);transform:translateX(-120%);pointer-events:none;animation:kpGlint 6s ease-in-out 2s infinite}
@keyframes kpGlint{0%{transform:translateX(-120%)}14%,100%{transform:translateX(260%)}}
/* Karte: ein position:fixed-Element im body, damit overflow:hidden der Bild-Container sie nicht abschneidet */
#ki-tip-fix{position:fixed;z-index:9999;left:0;top:0;width:min(300px,calc(100vw - 24px));box-sizing:border-box;padding:14px 16px;border-radius:16px;background:rgba(var(--bg-rgb),.97);border:1px solid rgba(var(--gold-rgb),.35);box-shadow:0 18px 40px rgba(0,0,0,.55);font:400 13px/1.5 var(--font-body);color:var(--muted);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}
#ki-tip-fix.on{opacity:1;visibility:visible}
#ki-tip-fix b{display:block;color:var(--text);font-weight:500;font-size:14px;margin-bottom:3px}
@media (prefers-reduced-motion:reduce){.kp-sp path,.ki-pille::after{animation:none!important}.ki-pille::after{display:none}.ki-pille,#ki-tip-fix{transition:none!important}}