/**
* MusikBlog Theme Design Standards
* ---------------------------------------------------------------------------
* Migriert aus dem Code-Snippet „Elementor Theme Design Standards" (ID 23,
* scope site-css) — 2026-07-01. Ersetzt das Live-only-Snippet UND das alte
* Elementor „Individuelles CSS". Ab jetzt versioniert im Child-Theme.
*
* Enqueue: functions.php -> mb_enqueue_theme_standards (nach style.css, prio 100000).
* Design-Kanon: Handbuch §5a (Tokens), §8C (Link-Standard).
* Design-QA-Fixes gegenüber dem Snippet sind mit QA: markiert.
* ---------------------------------------------------------------------------
*/
/**
* MusikBlog Design-Tokens (Standard - vgl. Design-Handbuch 5a)
* Interaktive Zustaende: Ruhe -> Hover (surface-2) -> Aktiv (accent) -> gedrueckt (accent-press)
*/
:root {
--mb-accent: #C22BF7; /* Primaer-Akzent: folgen/aktiv (DS --mb-violet-500) */
--mb-accent-press: #8420A6; /* gedrueckt / dunkel-violett (DS --mb-violet-700) */
--mb-surface-2: #E9E9E9; /* Hover-Flaeche (hell) */
--mb-fg: #222227; /* Text auf neutraler Flaeche */
--fav: var(--e-global-color-secondary); /* Orange #E36A34 */
--r-pill: 999px;
}
body.mb-dark {
--mb-surface-2: #33333B; /* Hover-Flaeche (dunkel) */
--mb-fg: #F5F5F7;
}
/**
* Defaults
*/
p strong {
font-weight: 600;
}
[type=button], [type=submit], button {
white-space: normal;
}
/**
* Buttons Hover
*/
a.elementor-button:hover {
text-decoration: none;
}
/**
* Kachel-Farben
*/
body, .category-news, .category-lokale-news {
--mb-bg-1: var(--e-global-color-9d97be7);
--mb-bg-2: var(--e-global-color-a5a15d1);
--mb-bg-3: var(--e-global-color-5aef08c);
--mb-bg-4: var(--e-global-color-5aef08c);
}
.category-konzert, .category-festival {
--mb-bg-1: var(--e-global-color-37f7596);
--mb-bg-2: var(--e-global-color-7b85f8b);
--mb-bg-3: var(--e-global-color-96b455b);
--mb-bg-4: var(--e-global-color-96b455b);
}
.category-video {
--mb-bg-1: var(--e-global-color-cebdfb6);
--mb-bg-2: var(--e-global-color-9429fa3);
--mb-bg-3: var(--e-global-color-155ebe9);
--mb-bg-4: var(--e-global-color-155ebe9);
}
.category-album {
--mb-bg-1: var(--e-global-color-9372d6d);
--mb-bg-2: var(--e-global-color-b3c7d6f);
--mb-bg-3: var(--e-global-color-6ccf6c9);
--mb-bg-4: var(--e-global-color-6ccf6c9);
}
.category-interview {
--mb-bg-1: var(--e-global-color-ecb4d46);
--mb-bg-2: var(--e-global-color-3a04617);
--mb-bg-3: var(--e-global-color-428b1b2);
--mb-bg-4: var(--e-global-color-428b1b2);
}
.category-gewinnspiel {
--mb-bg-1: var(--e-global-color-13d3e3f);
--mb-bg-2: var(--e-global-color-28e11d5);
--mb-bg-3: var(--e-global-color-35c01c1);
--mb-bg-4: var(--e-global-color-35c01c1);
}
/**
* Tag Cloud
*/
#mb-tag-cloud {
text-align: center;
}
.mb-tag-cloud__filters {
text-align: center;
}
button.mb-tag-cloud__filter {
background: none;
color: var( --e-global-color-text );
border: none;
padding: 2px 5px ;
font-size: 18px;
}
button.mb-tag-cloud__filter.selected, button.mb-tag-cloud__filter.selected:hover {
background: var(--mb-accent); /* aktiv = Akzent (Standard, vgl. Handbuch 5a) */
color: #fff;
}
button.mb-tag-cloud__filter:hover {
color: var(--mb-fg); /* Hover = neutrale Flaeche (Token, Dark autom.) */
background: var(--mb-surface-2);
}
button.mb-tag-cloud__filter:not(.selected):active, button.mb-tag-cloud__filter:not(.selected):focus {
color: var(--mb-fg);
background: none;
}
#mb-ls-input {
text-align: center;
background: var( --e-global-color-3949aae );
border: none;
border-radius: 3px; /* QA §4: war 0 (Standard-Radius 3px) */
width: 400px;
max-width: 90%;
margin: 20px 0 40px 0;
}
.mb-terms-list {
list-style-type: none;
text-align: center;
padding: 0;
}
.mb-terms-list li {
display: inline-block;
margin: 5px;
padding: 0 5px;
}
/* Hover: graue Flaeche + dunkler Text. Das `!important` auf der Textfarbe ist
noetig, weil Location-/Staedte-Listen (.mb-terms-list--child / --cities) in
einem Plugin-CSS einen nativen WEISSEN Hover-Text setzen (fuer Akzent-Flaeche
gedacht) — ohne !important bliebe der weiss = weiss-auf-grau unlesbar.
Der aktive Eintrag (.current) ist ausgenommen, behaelt Akzent + weisse Schrift. */
.mb-terms-list li:not(.current):hover {
background: var(--mb-surface-2);
}
.mb-terms-list li:not(.current):hover a {
color: var(--mb-fg) !important;
}
.mb-terms-list:not(.active-search) li.mb-hide {
display: none;
}
.mb-terms-list .current {
background: var(--mb-accent); /* aktiv = Akzent (Standard, vgl. Handbuch 5a) */
}
.mb-terms-list .current a {
color: #fff;
}
/**
* Locations Header
*/
.mb-locations-header {
text-align: center;
margin: 0px 0 0px 0;
}
.mb-terms-list--child {
font-size: 14px;
margin-top: 30px;
}
.mb-locations-header h2 {
margin-top: 30px;
}
/* QA §3: Seitentitel (h1) im Shortcode-Header ohne Eigen-Marge — der Abstand
kommt einheitlich von der Elementor-Section (40px + 10px Spalte = 50px-Standard).
Ohne diese Regel sickerte ein 8px-Default durch → 58px statt 50px. */
.mb-locations-header h1 {
margin-top: 0;
}
/**
* Link Style — web-standard: unterstrichen, Textfarbe (kein Magenta/Pille)
*/
.mb-post-content p > a, .mb-post-content a, .mb-meta a, .wc-memberships-message a,
.mb-button-links a, .mb-highlight-links a {
background-color: transparent;
color: inherit; /* = schwarz wie Fliesstext, kein Magenta */
padding: 0;
text-decoration: underline;
text-underline-offset: 2px;
}
.mb-post-content a:hover, .mb-meta a:hover, .wc-memberships-message a:hover,
.mb-button-links a:hover, .mb-highlight-links a:hover {
color: #707070;
}
/* Tag Cloud / Begriffslisten (Kuenstler- + Locations-Seite): keine Unterstreichung - sonst zu unruhig */
#mb-tag-cloud a,
.mb-terms-list a,
.mb-terms-list--child a {
text-decoration: none;
}
/**
* Elemente als Button darstellen
*/
a.checkout-button {
color: #fff;
background-color: var( --e-global-color-primary );
padding: 12px 24px;
display: inline-block;
text-align: center;
}
a.checkout-button:hover {
background-color: var( --e-global-color-accent );
color: #fff;
text-decoration: none;
}
a.checkout-button {
margin-bottom: 40px;
display: block !important;
}
/**
* Archive: Favorite Button
*/
.posts .mb-fav-button .button {
background: transparent;
border: none;
font-size: 30px;
padding: 0;
color: #fff;
}
.posts .mb-fav-button .button:before {
width:26px;
height:23px;
display: block;
position: absolute;
bottom: 20px;
content: url('data:image/svg+xml;charset=UTF-8, ');
}
.posts .mb-fav-button .button.active:before {
content: url('data:image/svg+xml;charset=UTF-8, ');
}
.posts .mb-fav-button .button span {
display: none;
}
.posts .mb-fav-button .button:focus {
outline:none;
}
body.single-post .mb-fav-button {
font-size: 14px;
}
/*
* Featured image auch als erstes Bild im Post? -> verstecken
*/
.mb-post-content > div > p:first-child > img.alignleft:first-child, .mb-post-content > div > p:first-child img.alignleft:first-child {
display: none;
}
.mb-post-content a:empty {
display: none !important;
}
/*
* Color-Switch unter Cookie-Note
*/
#cookie-law-info-bar {
z-index: 99999;
}
/*
Gewinnspiele: Dauer nur dann im "Category" Kasten anzeigen, falls Kachel im Slider
*/
.mb-if-gs-slider {
display: none;
}
.gs-section .mb-if-gs-slider {
display: inline;
}
.gs-section .mb-if-not-gs-slider {
display: none;
}
/* Bugfix: Slider 100vw (10.07.2021 */
.swiper-container {
width: auto !important;
}
/*
* Post Body: Word Copy Past Bugfix
*/
.mb-post-content span, .mb-post-content p {
font-weight: inherit !important;
}
/*
* Lightbox Issue bei Safari: Höhenbegrenzung
*/
.elementor-lightbox-image {
max-height: 86vh;
}
/***** NEW STYLE 05/2024 *****/
@media (max-width: 767px) {
.mbn-loop-grid:has(.e-loop__load-more):not(.e-load-more-pagination-end) .e-loop-item:nth-last-child(-n+1) {
opacity: 0.5;
max-height: 100px;
overflow: hidden;
pointer-events: none;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.mbn-loop-grid:has(.e-loop__load-more):not(.e-load-more-pagination-end) .e-loop-item:nth-last-child(-n+3) {
opacity: 0.5;
max-height: 100px;
overflow: hidden;
pointer-events: none;
}
}
@media (min-width: 1025px) and (max-width: 1799px) {
.mbn-loop-grid:has(.e-loop__load-more):not(.e-load-more-pagination-end) .e-loop-item:nth-last-child(-n+4) {
opacity: 0.5;
max-height: 100px;
overflow: hidden;
pointer-events: none;
}
}
@media (min-width: 1800px) {
.mbn-loop-grid:has(.e-loop__load-more):not(.e-load-more-pagination-end) .e-loop-item:nth-last-child(-n+6) {
opacity: 0.5;
max-height: 100px;
overflow: hidden;
pointer-events: none;
}
}
.mbn-loop-grid .e-loop__load-more.elementor-button-wrapper {
margin-top: -100px !important;
height: 100px;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
/* PWA Nein Danke */
#pn-activate-permission_link_nothanks {
color: #fff;
}
/**
* Teilnehmer Bubble Gewinnspiele
* ---------------------------------------------------------------------------
*/
/* --fav + --r-pill jetzt zentral im Token-Block oben (vgl. Handbuch 5a) */
/* Foto-Container = Positionsanker */
.gw-card-photo { position: relative; }
/* Shortcode-WIDGET aus dem Fluss nehmen (Klasse gw-badge am Widget) */
.gw-card-photo .gw-badge {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
width: auto;
margin: 0;
}
/* Das Badge selbst */
.gw-teilnehmer {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
min-width: 30px;
padding: 0 12px 0 9px;
border-radius: var(--r-pill, 999px);
background: var(--fav, #E36A34);
color: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,.45);
pointer-events: none;
}
.gw-teilnehmer svg { width: 14px; height: 14px; flex: none; }
.gw-teilnehmer b {
font: 600 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* QA §2: war 800 */
letter-spacing: -.01em;
}
/* QA §9.2: gw-word ist 11px (unter dem 14px-Boden) — bewusst NICHT geändert:
kompaktes Count-Badge (30px hoch), 14px würde die Bubble sprengen. Diese
Komponente gehört thematisch zu musikblog-gewinnspiel; dort layout-bewusst
auf ≥14px heben (Bubble mitwachsen lassen) statt hier blind zu forcieren. */
.gw-teilnehmer .gw-word {
font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* QA §2: war 700 */
white-space: nowrap;
opacity: .94;
}
/* WICHTIG: SW-Filter NUR aufs Bild, nie auf den Container —
sonst wird das orange Badge mit entfärbt. */
.gw-card-photo img { filter: grayscale(1) contrast(1.04); }