/* ==========================================================================
   Saddle & Synth – Ergänzende Stile
   Farben und Schriften kommen aus theme.json. Hier stehen nur Effekte,
   die sich dort nicht abbilden lassen.
   ========================================================================== */

:root{
	--sadsyn-line: rgba(255,154,71,.16);
	--sadsyn-line-soft: rgba(244,233,216,.08);
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}

/* --------------------------------------------------- Das goldene Ampersand */
.sadsyn-amp{
	color:var(--wp--preset--color--gold);
	font-family:Archivo,Georgia,serif;
	font-weight:500;
	font-style:italic;
}

/* Websitename: das & darin automatisch golden */
.wp-block-site-title a{text-decoration:none}

/* ------------------------------------------------------------- Kopfbereich */
.sadsyn-header{
	position:sticky;top:0;z-index:50;
	background:rgba(11,8,16,.85);
	backdrop-filter:blur(14px);
	border-bottom:1px solid var(--sadsyn-line-soft);
}
.sadsyn-header .wp-block-navigation__responsive-container-open,
.sadsyn-header .wp-block-navigation__responsive-container-close{color:var(--wp--preset--color--contrast)}
.sadsyn-header .wp-block-navigation__responsive-container.is-menu-open{
	background:var(--wp--preset--color--surface);
	padding-top:5rem;
}

/* Sprachumschalter EN | DE */
.sadsyn-lang{
	display:inline-flex;
	border:1px solid var(--sadsyn-line);
	border-radius:3px;
	overflow:hidden;
	flex-shrink:0;
}
.sadsyn-lang a{
	padding:6px 12px;
	font-family:var(--wp--preset--font-family--body);
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.08em;
	color:var(--wp--preset--color--muted);
	text-decoration:none;
	line-height:1.5;
	transition:background .2s,color .2s;
}
.sadsyn-lang a:hover{color:var(--wp--preset--color--contrast);text-decoration:none}
.sadsyn-lang a.is-active{
	background:var(--wp--preset--color--gold);
	color:var(--wp--preset--color--base);
}

/* CTA-Knopf in der Navigation (Umriss statt gefüllt) */
.sadsyn-nav-cta .wp-block-button__link{
	background:transparent;
	color:var(--wp--preset--color--gold);
	border:1px solid var(--wp--preset--color--gold);
	padding:9px 20px;
	font-size:.8rem;
	letter-spacing:.12em;
	white-space:nowrap;
}
.sadsyn-nav-cta .wp-block-button__link:hover{
	background:var(--wp--preset--color--gold);
	color:var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------- Hero */
.sadsyn-hero{
	position:relative;
	overflow:hidden;
	/* Bewusst kein volles 100vh: sonst klafft eine Lücke unter dem Menü. */
	min-height:clamp(500px,74vh,780px);
	display:flex;
	align-items:center;
}
.sadsyn-hero::after{
	content:"";
	position:absolute;left:0;right:0;bottom:0;height:1px;
	background:linear-gradient(90deg,transparent,rgba(255,154,71,.5),transparent);
}
/* Riesiges Ampersand im Hintergrund */
.sadsyn-hero::before{
	content:"&";
	position:absolute;right:-4%;top:50%;
	transform:translateY(-50%);
	font-family:Archivo,Georgia,serif;
	font-style:italic;
	font-size:clamp(20rem,42vw,44rem);
	line-height:1;
	color:rgba(255,154,71,.055);
	pointer-events:none;
	user-select:none;
}
.sadsyn-hero > .wp-block-group__inner-container,
.sadsyn-hero > *{position:relative;z-index:1}

.sadsyn-eyebrow{
	font-family:Archivo,sans-serif;
	font-weight:500;
	letter-spacing:.42em;
	text-transform:uppercase;
	color:var(--wp--preset--color--muted);
	font-size:clamp(.85rem,2vw,1.5rem);
	margin-bottom:.4em;
}
.sadsyn-kicker{
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.32em;
	text-transform:uppercase;
	color:var(--wp--preset--color--gold);
}
h1.sadsyn-title{
	font-family:'Archivo Black',sans-serif;
	text-transform:uppercase;
	letter-spacing:.02em;
	line-height:1.05;
}

/* Einleitung und Social-Zeile linksbündig halten statt zentrieren */
.sadsyn-hero p[style*="max-width"],
.sadsyn-hero .sadsyn-hairline{
	margin-left:0!important;
	margin-right:auto!important;
}

/* -------------------------------------------------------- Trennstreifen */
.sadsyn-split{
	border-top:1px solid var(--sadsyn-line-soft);
	border-bottom:1px solid var(--sadsyn-line-soft);
	background:var(--wp--preset--color--panel);
	text-align:center;
}
.sadsyn-split p{
	font-family:Archivo,sans-serif;
	font-weight:700;
	font-size:clamp(.95rem,2vw,1.35rem);
	letter-spacing:.16em;
	text-transform:uppercase;
	margin:0;
}
.sadsyn-split .sadsyn-amp{font-size:1.6em;vertical-align:-.12em;padding:0 .25em}

/* --------------------------------------------------------------- Karten */
.sadsyn-card{
	background:var(--wp--preset--color--panel);
	border:1px solid var(--sadsyn-line-soft);
	border-radius:6px;
	overflow:hidden;
	transition:border-color .2s,transform .2s;
}
.sadsyn-card:hover{border-color:var(--sadsyn-line);transform:translateY(-3px)}
.sadsyn-card .wp-block-post-featured-image img{aspect-ratio:1;object-fit:cover;width:100%}

/* Platzhalter-Cover, wenn kein Beitragsbild gesetzt ist */
.sadsyn-cover-placeholder{
	aspect-ratio:1;
	background:radial-gradient(circle at 50% 82%,rgba(255,154,71,.5),rgba(26,16,31,.9) 60%),#1A101F;
	display:flex;align-items:center;justify-content:center;
	font-family:Archivo,Georgia,serif;font-style:italic;
	font-size:5.5rem;color:rgba(244,233,216,.10);
}

/* Karte ohne Beitragsbild bekommt automatisch ein Ampersand-Cover */
.sadsyn-release-grid .sadsyn-card:not(:has(img))::before,
.wp-block-post-template .sadsyn-card:not(:has(img))::before{
	content:"&";
	display:flex;align-items:center;justify-content:center;
	aspect-ratio:1;
	background:radial-gradient(circle at 50% 82%,rgba(255,154,71,.42),rgba(26,16,31,.92) 62%),#1A101F;
	font-family:Archivo,Georgia,serif;font-style:italic;
	font-size:5.5rem;color:rgba(244,233,216,.12);
	line-height:1;
}
/* In der Blog-Liste flacher, passend zum 16:10-Bild */
.wp-block-post-template:not(.sadsyn-release-grid) .sadsyn-card:not(:has(img))::before{aspect-ratio:16/10;font-size:4rem}

/* ----------------------------------------------------- Streaming-Chips */
.sadsyn-chips .wp-block-button__link{
	background:transparent;
	border:1px solid var(--sadsyn-line-soft);
	color:var(--wp--preset--color--muted);
	padding:9px 18px;
	font-size:.76rem;
	font-weight:500;
	letter-spacing:.1em;
}
.sadsyn-chips .wp-block-button__link:hover{
	border-color:var(--wp--preset--color--gold);
	color:var(--wp--preset--color--gold);
	background:transparent;
}

/* ------------------------------------------------- Spotify Zwei-Klick */
.sadsyn-spotify{width:100%}
.sadsyn-spotify iframe{width:100%;border:0;border-radius:6px;display:block}
.sadsyn-spotify-consent{
	border:1px dashed var(--sadsyn-line);
	border-radius:6px;
	min-height:232px;
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:14px;padding:24px;text-align:center;
	color:var(--wp--preset--color--muted);
	font-size:.85rem;
}
.sadsyn-play{
	width:58px;height:58px;border-radius:50%;
	background:#1DB954;color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-size:1.2rem;padding-left:4px;
}
.sadsyn-spotify-consent .sadsyn-note{font-size:.76rem;opacity:.75;max-width:330px}
.sadsyn-spotify-consent button{
	background:transparent;
	border:1px solid var(--sadsyn-line);
	color:var(--wp--preset--color--contrast);
	border-radius:3px;
	padding:10px 22px;
	font-family:var(--wp--preset--font-family--body);
	font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
	cursor:pointer;
}
.sadsyn-spotify-consent button:hover{border-color:var(--wp--preset--color--gold);color:var(--wp--preset--color--gold)}

/* ------------------------------------------------------- Key Visual & */
.sadsyn-visual{
	aspect-ratio:4/5;
	border-radius:6px;
	border:1px solid var(--sadsyn-line-soft);
	background:radial-gradient(ellipse 90% 42% at 50% 96%,rgba(255,154,71,.36),transparent 65%),linear-gradient(180deg,#14101A,#1A101F);
	display:flex;align-items:center;justify-content:center;
	font-family:Archivo,Georgia,serif;font-style:italic;
	font-size:13rem;line-height:1;color:rgba(255,154,71,.22);
}

/* ------------------------------------------------------------ Zahlen */
.sadsyn-stat .sadsyn-n{
	font-family:Archivo,sans-serif;font-weight:700;font-size:1.9rem;
	color:var(--wp--preset--color--gold);line-height:1.2;
}
.sadsyn-stat .sadsyn-l{
	font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
	color:var(--wp--preset--color--muted);
}

/* ------------------------------------------------------- News-Raster */
.sadsyn-news-grid .wp-block-post{
	background:var(--wp--preset--color--base);
	padding:34px 30px;
	transition:background .2s;
}
.sadsyn-news-grid .wp-block-post:hover{background:var(--wp--preset--color--panel)}
.sadsyn-news-grid{
	gap:1px!important;
	background:var(--sadsyn-line-soft);
	border:1px solid var(--sadsyn-line-soft);
	border-radius:6px;
	overflow:hidden;
}
.sadsyn-cat a{
	font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
	color:var(--wp--preset--color--gold);text-decoration:none;
}

/* --------------------------------------------------------- Fußbereich */
.sadsyn-footer{border-top:1px solid var(--sadsyn-line-soft)}
.sadsyn-footer h4,.sadsyn-foot-head{
	font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
	color:var(--wp--preset--color--muted);font-weight:600;margin-bottom:1rem;
}
/* Fußbereich: Links dezent cremefarben, erst beim Überfahren golden */
.sadsyn-footer .wp-block-list a{
	color:var(--wp--preset--color--contrast);
	opacity:.8;text-decoration:none;
}
.sadsyn-footer .wp-block-list a:hover{color:var(--wp--preset--color--gold);opacity:1}
.sadsyn-footer .wp-block-list{margin:0}
.sadsyn-legal{
	border-top:1px solid var(--sadsyn-line-soft);
	font-size:.78rem;color:var(--wp--preset--color--muted);
}
.sadsyn-legal a{color:var(--wp--preset--color--muted);text-decoration:none}
.sadsyn-legal a:hover{color:var(--wp--preset--color--gold)}

/* ------------------------------------------------------ Cookie-Banner */
.sadsyn-cookie{
	position:fixed;bottom:24px;left:24px;right:24px;max-width:520px;z-index:9999;
	background:#1B1824;border:1px solid var(--sadsyn-line);
	color:var(--wp--preset--color--contrast);
	border-radius:6px;padding:26px 28px;
	box-shadow:0 18px 60px rgba(0,0,0,.6);
	font-family:var(--wp--preset--font-family--body);
}
.sadsyn-cookie[hidden]{display:none}
.sadsyn-cookie h3{
	font-family:var(--wp--preset--font-family--heading);
	font-size:.95rem;margin:0 0 8px;font-weight:700;
}
.sadsyn-cookie p{font-size:.82rem;line-height:1.6;color:var(--wp--preset--color--muted);margin:0 0 18px}
.sadsyn-cookie p a{color:var(--wp--preset--color--gold)}
.sadsyn-cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.sadsyn-cookie-actions button{
	padding:11px 22px;border-radius:3px;border:none;cursor:pointer;
	font-family:var(--wp--preset--font-family--body);
	font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.sadsyn-cookie-actions .is-accept{background:var(--wp--preset--color--gold);color:var(--wp--preset--color--base)}
.sadsyn-cookie-actions .is-necessary{
	background:transparent;border:1px solid var(--sadsyn-line-soft);
	color:var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------ Kleinkram */
.sadsyn-muted{color:var(--wp--preset--color--muted)}
.sadsyn-hairline{border-top:1px solid var(--sadsyn-line-soft)}

@media (max-width: 781px){
	.sadsyn-hero{min-height:88vh}
	.sadsyn-visual{font-size:8rem}
}


/* Release-Karten kompakt halten */
/* Ohne Deckelung wird eine einzelne Karte so breit wie eine Drittelspalte
   und dominiert den ganzen Abschnitt. */
.sadsyn-release-grid{
	grid-template-columns:repeat(auto-fill,minmax(200px,244px))!important;
	justify-content:start;
}
.sadsyn-release-grid .sadsyn-card h3,
.sadsyn-release-grid .sadsyn-card .wp-block-post-title{font-size:.95rem}
.sadsyn-release-grid .sadsyn-card .wp-block-group{padding:1rem 1.1rem 1.2rem!important}

/* Abschnitte etwas enger, damit weniger Leerraum entsteht */
#music,#news,#project,#projekt{
	padding-top:4.6rem!important;
	padding-bottom:4.6rem!important;
}
@media(max-width:600px){
	.sadsyn-release-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
}

/* ===== Ueberarbeitung 2.4.0 ===== */
:root{--ss-ease:cubic-bezier(.22,1,.36,1);--ss-in:150ms;--ss-out:260ms;
--ss-far:0 26px 70px rgba(8,4,2,.62)}
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.038;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
outline:2px solid var(--wp--preset--color--gold);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:6rem}
h1,h2{text-wrap:balance}p{text-wrap:pretty}
.sadsyn-hero::before{display:none}
.wp-element-button,.wp-block-button__link{transition:background-color var(--ss-in),color var(--ss-in),
border-color var(--ss-in),transform var(--ss-in) var(--ss-ease),box-shadow var(--ss-out) var(--ss-ease)}
.wp-element-button:hover,.wp-block-button__link:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(197,106,40,.26)}
.wp-element-button:active,.wp-block-button__link:active{transform:scale(.985);transition-duration:80ms;box-shadow:none}
.sadsyn-card{transition:border-color var(--ss-out),transform var(--ss-out) var(--ss-ease),box-shadow var(--ss-out) var(--ss-ease)}
.sadsyn-card:hover{transform:translateY(-4px);box-shadow:var(--ss-far)}
.sadsyn-card:active{transform:translateY(-1px) scale(.994);transition-duration:90ms}
.sadsyn-card .wp-block-post-featured-image{overflow:hidden}
.sadsyn-card .wp-block-post-featured-image img{transition:transform 620ms var(--ss-ease)}
.sadsyn-card:hover .wp-block-post-featured-image img{transform:scale(1.045)}
.sadsyn-header{border-bottom-color:transparent;transition:background var(--ss-out),border-color var(--ss-out)}
.sadsyn-header.is-stuck{background:rgba(11,8,16,.92);border-bottom-color:var(--sadsyn-line-soft)}
.sadsyn-stat .sadsyn-n{font-variant-numeric:tabular-nums}
@media(min-width:1000px){
.sadsyn-release-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1.5rem!important}
.sadsyn-release-grid>.wp-block-post:first-child{grid-column:span 2;grid-row:span 2}
.sadsyn-release-grid>.wp-block-post:first-child .wp-block-post-featured-image img{aspect-ratio:1;height:auto;object-fit:contain}
.sadsyn-release-grid>.wp-block-post:first-child .wp-block-post-title{font-size:1.7rem}
.sadsyn-release-grid>.wp-block-post:first-child .sadsyn-card .wp-block-group{padding:1.5rem 1.7rem 1.7rem!important}}
@media(min-width:900px){
.sadsyn-news-grid{grid-template-columns:1.55fr 1fr 1fr!important}
.sadsyn-news-grid .wp-block-post:first-child{grid-row:span 2;display:flex;flex-direction:column;justify-content:center;padding:44px 40px;
background:linear-gradient(150deg,rgba(255,154,71,.055),transparent 62%),var(--wp--preset--color--base)}
.sadsyn-news-grid .wp-block-post:first-child .wp-block-post-title{font-size:1.9rem;line-height:1.15}
.sadsyn-news-grid .wp-block-post:nth-child(n+4){display:none}}
.sadsyn-reveal{opacity:0;transform:translateY(14px);
transition:opacity 620ms var(--ss-ease),transform 620ms var(--ss-ease);transition-delay:var(--ss-delay,0ms)}
.sadsyn-reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.sadsyn-reveal{opacity:1;transform:none;transition:none}
.sadsyn-card:hover{transform:none}.sadsyn-card:hover .wp-block-post-featured-image img{transform:none}
body::after{display:none}}
/* ===== 2.5.0 Hero, Tiefe, Bewegung ===== */
.sadsyn-hero::before{content:none!important;display:none!important}
.sadsyn-hero .sadsyn-eyebrow{display:none}
.sadsyn-hero{min-height:clamp(560px,84vh,900px);position:relative;isolation:isolate}
.sadsyn-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
 background:linear-gradient(90deg,transparent,rgba(255,154,71,.55),transparent)}
/* warmer Lichtkegel von unten, statt flacher Flaeche */
.sadsyn-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse 80% 50% at 62% 108%,rgba(255,154,71,.20),transparent 70%)}
.sadsyn-hero .alignwide{width:100%}
.ss-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.66fr);
 gap:clamp(2rem,5vw,5rem);align-items:center;width:100%}
.ss-art{position:relative;justify-self:end;width:100%;max-width:392px}
.ss-art img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;
 box-shadow:0 30px 80px rgba(8,4,2,.66),0 0 0 1px rgba(255,154,71,.14);
 transform:rotate(-1.8deg) translateY(var(--ss-par,0px));
 transition:transform 620ms cubic-bezier(.22,1,.36,1)}
.ss-art:hover img{transform:rotate(0deg) scale(1.02) translateY(var(--ss-par,0px))}
.ss-art::before{content:"";position:absolute;inset:-16% -12% -20%;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 50% 60%,rgba(255,154,71,.34),transparent 68%);filter:blur(30px)}
.ss-cap{margin-top:1.15rem;text-align:right}
.ss-cap b{display:block;font-family:var(--wp--preset--font-family--heading);font-size:.86rem;
 font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--wp--preset--color--muted)}
.ss-cap a{font-family:var(--wp--preset--font-family--heading);font-size:1.3rem;font-weight:600;
 color:var(--wp--preset--color--contrast);text-decoration:none;letter-spacing:.01em}
.ss-cap a:hover{color:var(--wp--preset--color--gold)}
@media(max-width:900px){.ss-grid{grid-template-columns:1fr;gap:2.6rem}
 .ss-art{justify-self:start;max-width:290px}.ss-cap{text-align:left}}
/* Titel wortweise aufziehen */
.ss-w{display:inline-block;opacity:0;transform:translateY(.32em) rotate(1.5deg);
 transition:opacity 700ms cubic-bezier(.22,1,.36,1),transform 700ms cubic-bezier(.22,1,.36,1);
 transition-delay:var(--d,0ms)}
.ss-w.is-in{opacity:1;transform:none}
/* Lichtschein folgt dem Zeiger ueber den Karten */
.sadsyn-card{position:relative}
.sadsyn-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 opacity:0;transition:opacity 260ms ease;
 background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,154,71,.13),transparent 62%)}
.sadsyn-card:hover::after{opacity:1}
/* Fortschrittsfaden am oberen Rand */
.ss-bar{position:fixed;top:0;left:0;height:2px;z-index:9999;transform-origin:0 50%;
 background:linear-gradient(90deg,var(--wp--preset--color--gold),#FFD9A8);transform:scaleX(0);width:100%}
.admin-bar .ss-bar{top:32px}
@media(prefers-reduced-motion:reduce){.ss-w{opacity:1;transform:none;transition:none}
 .ss-art img{transform:rotate(-1.8deg)!important}.ss-bar{display:none}.sadsyn-card::after{display:none}}
/* ===== 2.6.0 Politur: Zeigergeraete, Tempo, Druckpunkt ===== */
:root{--ss-ease:cubic-bezier(.23,1,.32,1)}
/* Auf Touchgeraeten loest Hover beim Tippen aus und bleibt haengen.
   Alle Schwebe-Effekte gelten daher nur fuer echte Zeigergeraete. */
@media (hover:hover) and (pointer:fine){
 .sadsyn-card:hover{transform:translateY(-4px);box-shadow:0 26px 70px rgba(8,4,2,.62)}
 .sadsyn-card:hover .wp-block-post-featured-image img{transform:scale(1.045)}
 .sadsyn-card:hover::after{opacity:1}
 .ss-art:hover img{transform:rotate(0deg) scale(1.02) translateY(var(--ss-par,0px))}
 .wp-element-button:hover,.wp-block-button__link:hover{transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(197,106,40,.26)}
}
@media (hover:none),(pointer:coarse){
 .sadsyn-card:hover{transform:none;box-shadow:none}
 .sadsyn-card:hover .wp-block-post-featured-image img{transform:none}
 .sadsyn-card::after{display:none}
 .wp-element-button:hover,.wp-block-button__link:hover{transform:none;box-shadow:none}
}
/* Druckpunkt deutlich genug, um gespuert zu werden */
.wp-element-button:active,.wp-block-button__link:active{transform:scale(.97);transition-duration:110ms}
.sadsyn-card:active{transform:translateY(-1px) scale(.985);transition-duration:110ms}
.sadsyn-lang a:active,.sadsyn-cookie-actions button:active{transform:scale(.97)}
/* Tempo: nichts Dekoratives laeuft laenger als noetig */
.sadsyn-reveal{transition:opacity 420ms var(--ss-ease),transform 420ms var(--ss-ease)}
.ss-w{transition:opacity 480ms var(--ss-ease),transform 480ms var(--ss-ease)}
.sadsyn-card .wp-block-post-featured-image img{transition:transform 420ms var(--ss-ease)}
.ss-art img{transition:transform 420ms var(--ss-ease)}
.sadsyn-card{transition:border-color 200ms ease,transform 200ms var(--ss-ease),box-shadow 200ms var(--ss-ease)}
/* ===== 2.7.0 Titelaufbau, Hero entschlackt ===== */
/* Der Songtitel steht schon auf dem Cover - Bildunterschrift waere die dritte Nennung */
.ss-cap{display:none}
.ss-art{max-width:404px}
/* Maskierter Aufbau: die Woerter fahren hinter einer Kante hervor,
   statt nur einzublenden. Einmal beim Seitenaufruf, darum darf er Zeit haben. */
.ss-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.02em .04em .12em}
.ss-w{display:inline-block;opacity:0;
 transform:translateY(104%) rotate(2.5deg);
 filter:blur(5px);
 transition:transform 900ms cubic-bezier(.16,1,.3,1),
            opacity 560ms cubic-bezier(.23,1,.32,1),
            filter 680ms cubic-bezier(.23,1,.32,1);
 transition-delay:var(--d,0ms)}
.ss-w.is-in{opacity:1;transform:none;filter:none}
/* Das Ampersand kommt zuletzt und setzt sich einen Hauch groesser */
.ss-w .sadsyn-amp{display:inline-block;transform:scale(1.06);transform-origin:50% 62%}
/* Vorzeile und Einleitung ziehen ruhig nach */
.sadsyn-hero .sadsyn-kicker,.sadsyn-hero p.sadsyn-muted,
.sadsyn-hero .wp-block-buttons,.sadsyn-hero .sadsyn-hairline{
 opacity:0;transform:translateY(10px);
 transition:opacity 620ms cubic-bezier(.23,1,.32,1),transform 620ms cubic-bezier(.16,1,.3,1);
 transition-delay:var(--d2,0ms)}
.sadsyn-hero.ss-ready .sadsyn-kicker,.sadsyn-hero.ss-ready p.sadsyn-muted,
.sadsyn-hero.ss-ready .wp-block-buttons,.sadsyn-hero.ss-ready .sadsyn-hairline{opacity:1;transform:none}
.ss-art{opacity:0;transform:translateY(18px) scale(.985);
 transition:opacity 760ms cubic-bezier(.23,1,.32,1),transform 900ms cubic-bezier(.16,1,.3,1);
 transition-delay:180ms}
.sadsyn-hero.ss-ready .ss-art{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
 .ss-w,.sadsyn-hero .sadsyn-kicker,.sadsyn-hero p.sadsyn-muted,
 .sadsyn-hero .wp-block-buttons,.sadsyn-hero .sadsyn-hairline,.ss-art{
  opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}
/* ===== 2.8.0 Ebenen aufraeumen =====
   will-change dauerhaft zu setzen haelt fuer jedes Element eine eigene
   Grafikebene offen. Das kostet Speicher und kann Darstellungsfehler
   ausloesen. Die Eigenschaft gehoert nur waehrend der Bewegung gesetzt. */
.sadsyn-card,.wp-element-button,.wp-block-button__link,
.sadsyn-card .wp-block-post-featured-image img,.sadsyn-reveal{will-change:auto}
@media (hover:hover) and (pointer:fine){
 .sadsyn-card:hover,.sadsyn-card:hover .wp-block-post-featured-image img{will-change:transform}
}
.sadsyn-reveal:not(.is-in){will-change:opacity,transform}
/* Weichzeichner beim Titelaufbau entfernt: er erzwingt eine zusaetzliche
   Ebene und bringt beim maskierten Aufbau keinen sichtbaren Gewinn. */
.ss-w{filter:none;transition:transform 900ms cubic-bezier(.16,1,.3,1),
 opacity 560ms cubic-bezier(.23,1,.32,1)}
.ss-w.is-in{filter:none}
/* ===== 2.9.0 Cover raus, Titel buchstabenweise ===== */
/* Das Cover wiederholte nur, was im Raster darunter schon steht. */
.ss-art{display:none!important}
.ss-grid{display:block!important}
.sadsyn-hero-say{max-width:none}
.sadsyn-hero{min-height:clamp(560px,90vh,940px)}
/* Titel darf jetzt die ganze Breite nehmen */
h1.sadsyn-title{font-size:clamp(3.6rem,13.5vw,13rem);line-height:.9;letter-spacing:.02em}
.sadsyn-hero p.sadsyn-muted{max-width:560px!important;font-size:1.15rem!important}

/* Buchstabenweiser Aufbau: jeder Buchstabe faehrt hinter einer Kante hervor */
.ss-mask,.ss-lm{display:inline-block;overflow:hidden;vertical-align:bottom;
 padding:.04em 0 .13em;line-height:.9}
.ss-l{display:inline-block;
 transform:translateY(108%) rotate(4deg) scale(.94);
 opacity:0;
 transition:transform 820ms cubic-bezier(.16,1,.3,1),opacity 460ms cubic-bezier(.23,1,.32,1);
 transition-delay:var(--d,0ms)}
.ss-l.is-in{transform:none;opacity:1}
/* Das Ampersand kommt als Letztes und glimmt danach ruhig weiter */
.ss-l.is-amp{color:var(--wp--preset--color--gold)}
.ss-l.is-amp.is-in{animation:ssGlimm 4.5s ease-in-out 1.4s infinite}
@keyframes ssGlimm{
 0%,100%{text-shadow:0 0 0 rgba(255,154,71,0)}
 50%{text-shadow:0 0 42px rgba(255,154,71,.55),0 0 14px rgba(255,154,71,.35)}}
/* alter wortweiser Aufbau wird nicht mehr gebraucht */
.ss-w{opacity:1;transform:none;filter:none;transition:none}
@media (prefers-reduced-motion:reduce){
 .ss-l{opacity:1!important;transform:none!important;transition:none!important}
 .ss-l.is-amp.is-in{animation:none}}
/* ===== 3.0.0 Release-Raster geht auf =====
   Die grosse Karte belegt vier Felder. Bei vier Spalten bleibt der sechste
   Titel allein in einer neuen Zeile stehen. Bei drei Spalten ergeben
   4 + 5 Felder genau drei volle Zeilen. */
@media (min-width:1000px){
 .sadsyn-release-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-flow:dense;
  gap:1.6rem!important;
  justify-content:stretch!important}
 .sadsyn-release-grid > .wp-block-post:first-child{grid-column:span 2;grid-row:span 2}
 .sadsyn-release-grid > .wp-block-post:first-child .sadsyn-card .wp-block-post-title{font-size:2rem}
}
@media (min-width:700px) and (max-width:999px){
 .sadsyn-release-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-flow:dense;gap:1.3rem!important;justify-content:stretch!important}
 .sadsyn-release-grid > .wp-block-post:first-child{grid-column:span 2}
}
/* Karten gleich hoch abschliessen, damit die Reihen sauber stehen */
.sadsyn-release-grid > .wp-block-post{display:flex}
.sadsyn-release-grid > .wp-block-post .sadsyn-card{display:flex;flex-direction:column;width:100%}
.sadsyn-release-grid > .wp-block-post .sadsyn-card > .wp-block-group{margin-top:auto}
/* ===== 3.1.0 Handy-Menue =====
   Ohne hinterlegte Overlay-Farben klappt bei WordPress ein weisses Menue
   mit schwarzer Schrift auf - auf einer durchgehend dunklen Seite ein Bruch. */
.wp-block-navigation__responsive-container.is-menu-open,
.sadsyn-header .wp-block-navigation__responsive-container.is-menu-open{
 background-color:var(--wp--preset--color--base)!important;
 color:var(--wp--preset--color--contrast)!important;
 padding-top:5.5rem}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
 color:var(--wp--preset--color--contrast)!important}
.wp-block-navigation__responsive-container.is-menu-open a:hover{
 color:var(--wp--preset--color--gold)!important}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
 color:var(--wp--preset--color--contrast)!important}
/* Punkte im Overlay grosszuegiger und ruhiger setzen */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
 gap:1.4rem;align-items:flex-start}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
 font-size:1.6rem;letter-spacing:.12em;padding-bottom:0}
/* Der mitlaufende Unterstrich gehoert nur in die Kopfleiste, nicht ins Overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after{
 content:none}
/* Sprachumschalter im Overlay sichtbar halten */
.wp-block-navigation__responsive-container.is-menu-open .sadsyn-lang a{
 color:var(--wp--preset--color--muted)!important}
.wp-block-navigation__responsive-container.is-menu-open .sadsyn-lang a.is-active{
 color:var(--wp--preset--color--base)!important}
/* ===== 3.2.0 Handy-Menue klebte am Kopf statt am Bildschirm =====
   backdrop-filter erzeugt fuer position:fixed-Nachfahren einen neuen
   Bezugsrahmen. Das Overlay bemass sich dadurch am 86 Pixel hohen
   Kopfbereich: top 7, Hoehe 104 statt volle Bildschirmhoehe.
   Solange das Menue offen ist, faellt der Weichzeichner deshalb weg. */
.sadsyn-header:has(.wp-block-navigation__responsive-container.is-menu-open),
html.has-modal-open .sadsyn-header,
body.has-modal-open .sadsyn-header{
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
 background:transparent!important;
 border-bottom-color:transparent!important}
.wp-block-navigation__responsive-container.is-menu-open{
 position:fixed!important;
 inset:0!important;
 width:100%!important;
 height:100dvh!important;
 max-height:none!important;
 padding-top:6rem!important;
 padding-left:clamp(20px,7vw,44px)!important;
 padding-right:clamp(20px,7vw,44px)!important;
 overflow-y:auto!important;
 z-index:100000!important}
.wp-block-navigation__responsive-container.is-menu-open
 .wp-block-navigation__responsive-container-content{
 width:100%;padding-top:1rem}
.wp-block-navigation__responsive-container-close{
 top:1.6rem!important;right:clamp(18px,6vw,40px)!important}
/* Sichtbar bleiben, auch wenn der Kopf durchsichtig geschaltet ist */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
 flex-direction:column;align-items:flex-start;gap:1.5rem}
/* ===== 3.3.0 Overlay-Masse und Ausrichtung =====
   width:100% bezog sich auf den Elternblock und machte das Menue breiter
   als den Bildschirm - das Schliesskreuz rutschte dadurch hinaus. */
.wp-block-navigation__responsive-container.is-menu-open{
 width:auto!important;
 height:auto!important;
 max-width:100vw!important;
 left:0!important;right:0!important;top:0!important;bottom:0!important;
 box-sizing:border-box!important}
/* Der Navigationsblock steht in der Kopfleiste rechtsbuendig.
   Im aufgeklappten Menue gehoeren die Punkte untereinander nach links. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container{
 flex-direction:column!important;
 align-items:flex-start!important;
 justify-content:flex-start!important;
 gap:1.4rem!important;
 width:100%!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
 width:100%}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
 display:inline-block;font-size:1.75rem;letter-spacing:.1em;line-height:1.2}
.wp-block-navigation__responsive-container.is-menu-open
 .wp-block-navigation__responsive-container-content{
 width:100%!important;align-items:flex-start!important}
/* Schliesskreuz zuverlaessig oben rechts im Bild */
.wp-block-navigation__responsive-container.is-menu-open
 .wp-block-navigation__responsive-container-close{
 position:absolute!important;
 top:1.5rem!important;
 right:clamp(18px,6vw,40px)!important;
 left:auto!important;
 width:44px;height:44px;
 display:flex;align-items:center;justify-content:center;
 color:var(--wp--preset--color--contrast)!important}
.admin-bar .wp-block-navigation__responsive-container.is-menu-open{top:32px!important}
/* ===== 3.4.0 Menue-Innenabstand und Ausrichtung =====
   Der Abstand sass am aeusseren Kasten. Dadurch begann der Dialog erst
   96 Pixel tiefer und das Schliesskreuz, das relativ zum Dialog sitzt,
   rutschte mit. Der Abstand gehoert an den Inhalt, nicht an die Huelle. */
.wp-block-navigation__responsive-container.is-menu-open{
 padding:0!important}
.wp-block-navigation__responsive-container.is-menu-open
 .wp-block-navigation__responsive-close{
 padding:0!important;max-width:none!important;width:100%!important;height:100%!important}
.wp-block-navigation__responsive-container.is-menu-open
 .wp-block-navigation__responsive-dialog{
 margin:0!important;width:100%!important;height:100%!important}
.wp-block-navigation__responsive-container.is-menu-open
 .wp-block-navigation__responsive-container-content{
 padding:6rem clamp(20px,7vw,44px) 3rem!important;
 width:100%!important;
 align-items:flex-start!important}
/* Punkte linksbuendig untereinander - die Kopfleiste richtet sie rechts aus */
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open ul.items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open ul.items-justified-center{
 flex-direction:column!important;
 align-items:flex-start!important;
 justify-content:flex-start!important;
 text-align:left!important;
 gap:1.5rem!important;
 width:100%!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
 width:100%!important;justify-content:flex-start!important;text-align:left!important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
 text-align:left!important;font-size:1.75rem;letter-spacing:.1em}
/* Kreuz oben rechts, jetzt wieder relativ zum Bildschirmrand */
.wp-block-navigation__responsive-container.is-menu-open
 .wp-block-navigation__responsive-container-close{
 top:1.5rem!important;right:clamp(18px,6vw,40px)!important}
/* ===== 3.5.0 =====
   Die Menuepunkte stehen als Spalten-Flexbox. Bei senkrechter Richtung
   entscheidet align-items ueber links/rechts, nicht justify-content.
   Die Klasse items-justified-right der Kopfleiste setzte hier flex-end. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link,
.wp-block-navigation__responsive-container.is-menu-open li{
 align-items:flex-start!important;
 align-self:flex-start!important}


/* === Complianz-Banner in der Marke (03.08.2026) - Anfang ===
   Der Einwilligungs-Hinweis kommt von Complianz. Complianz laedt sein
   eigenes Stylesheet NACH diesem hier, darum stehen hier bewusst
   !important-Regeln. Zum Zuruecksetzen den ganzen Block entfernen. */

html body #cmplz-cookiebanner-container,
html body #cmplz-manage-consent {
	position: relative !important;
	z-index: 2147483000 !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner {
	background: #14101c !important;
	border: 1px solid rgba(244, 233, 216, .14) !important;
	border-radius: 4px !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important;
	color: #F4E9D8 !important;
	font-family: Barlow, system-ui, sans-serif !important;
	padding: 26px 28px 24px !important;
	max-width: 520px !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	font-family: 'Bebas Neue', Barlow, sans-serif !important;
	font-size: 1.55rem !important;
	letter-spacing: .04em !important;
	color: #F4E9D8 !important;
	margin: 0 0 10px !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner p {
	color: rgba(244, 233, 216, .78) !important;
	font-size: .92rem !important;
	line-height: 1.55 !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner a {
	color: #FF9A47 !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(255, 154, 71, .45) !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner a:hover {
	border-bottom-color: #FF9A47 !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	gap: 10px !important;
	margin-top: 18px !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-family: Rajdhani, Barlow, sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	font-size: .8rem !important;
	border-radius: 2px !important;
	padding: 11px 18px !important;
	box-shadow: none !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
	background: #FF9A47 !important;
	border: 1px solid #FF9A47 !important;
	color: #0B0810 !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
	background: #ffb070 !important;
	border-color: #ffb070 !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
	background: transparent !important;
	border: 1px solid rgba(244, 233, 216, .32) !important;
	color: #F4E9D8 !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
	border-color: #F4E9D8 !important;
	background: rgba(244, 233, 216, .08) !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category {
	background: rgba(244, 233, 216, .05) !important;
	border: 1px solid rgba(244, 233, 216, .12) !important;
	border-radius: 3px !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title {
	font-family: Rajdhani, Barlow, sans-serif !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: #F4E9D8 !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-slider-checkbox input:checked + .cmplz-slider {
	background-color: #FF9A47 !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider-footer {
	border-color: rgba(244, 233, 216, .12) !important;
}

html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
	color: rgba(244, 233, 216, .6) !important;
}

html body #cmplz-manage-consent .cmplz-manage-consent {
	background: #14101c !important;
	border: 1px solid rgba(244, 233, 216, .2) !important;
	color: #F4E9D8 !important;
	font-family: Rajdhani, Barlow, sans-serif !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	font-size: .72rem !important;
}

/* === Complianz-Banner in der Marke - Ende === */


/* === Cookie-Banner: Ablehnen gleichwertig zu Zustimmen (DSGVO) === */
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny{background:#F4E9D8 !important;border:1px solid #F4E9D8 !important;color:#0B0810 !important;font-weight:600 !important}
html body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover{background:#FFF3DE !important;border-color:#FFF3DE !important;color:#0B0810 !important}
/* === Ende === */