/* ==========================================================
   ACHIM SCHWENKEL
   CUSTOM.CSS FOR YOOTHEME CHILD THEME
   ========================================================== */


/* ==========================================================
   0. TEST – NACH ERFOLGREICHEM UMZUG LÖSCHEN
   ========================================================== */

html body {
    border-top: 1px solid lime !important;
}


/* ==========================================================
   1. FARBVARIABLEN
   ========================================================== */

:root {

    --as-dark-bg: #191a19;
    --as-dark-header: #242421;
    --as-dark-surface: #222321;
    --as-dark-warm: #302d27;
    --as-dark-primary: #353129;

    --as-text: #d8d5ce;
    --as-text-light: #e2ded6;
    --as-heading: #eeeae2;
    --as-muted: #bdb9b1;
    --as-dark-hover: #332d27;

    --as-accent: #cdb891;
    --as-accent-hover: #ddc9a2;

    --as-border: rgba(255,255,255,.13);
}


/* ==========================================================
   2. BASIS
   ========================================================== */

html.as-dark,
html.as-dark body {
    background-color: var(--as-dark-bg);
    color: var(--as-text);
}


/* ==========================================================
   3. YOOTHEME SECTIONS
   ========================================================== */

html.as-dark .uk-section-default {
    background-color: var(--as-dark-bg);
    color: var(--as-text);
}

html.as-dark .uk-section-muted {
    background-color: var(--as-dark-surface);
    color: var(--as-text);
}

html.as-dark .uk-section-primary {
    background-color: var(--as-dark-primary) !important;
    color: var(--as-text-light) !important;
}

html.as-dark .uk-section-secondary {
    background-color: var(--as-dark-surface) !important;
    color: var(--as-text-light) !important;
}


/* ==========================================================
   4. YOOTHEME TILES
   ========================================================== */

html.as-dark .uk-tile-secondary {
    background-color: var(--as-dark-warm) !important;
    color: var(--as-text-light) !important;
}

html.as-dark .uk-tile-secondary p {
    color: var(--as-text-light) !important;
}

html.as-dark .uk-tile-secondary h1,
html.as-dark .uk-tile-secondary h2,
html.as-dark .uk-tile-secondary h3,
html.as-dark .uk-tile-secondary h4,
html.as-dark .uk-tile-secondary h5,
html.as-dark .uk-tile-secondary h6 {
    color: var(--as-heading) !important;
}

html.as-dark .uk-tile-secondary a {
    color: var(--as-accent) !important;
}


/* ==========================================================
   5. TYPOGRAFIE
   ========================================================== */

html.as-dark h1,
html.as-dark h2,
html.as-dark h3,
html.as-dark h4,
html.as-dark h5,
html.as-dark h6,
html.as-dark .uk-heading-small,
html.as-dark .uk-heading-medium,
html.as-dark .uk-heading-large,
html.as-dark .uk-heading-xlarge,
html.as-dark .uk-heading-2xlarge {
    color: var(--as-heading);
}

html.as-dark p {
    color: var(--as-text);
}

html.as-dark .uk-text-default,
html.as-dark .uk-text-lead,
html.as-dark .uk-text-emphasis {
    color: var(--as-text-light) !important;
}

html.as-dark .uk-text-muted,
html.as-dark .uk-text-meta,
html.as-dark .uk-text-secondary {
    color: var(--as-muted) !important;
}


/* ==========================================================
   6. LINKS
   ========================================================== */

html.as-dark a:not(.uk-button) {
    color: var(--as-accent);
}

html.as-dark a:not(.uk-button):hover {
    color: var(--as-accent-hover);
}


/* ==========================================================
   7. HEADER / NAVIGATION
   ========================================================== */

html.as-dark .tm-headerbar,
html.as-dark .tm-headerbar-default,
html.as-dark .tm-headerbar-top,
html.as-dark .tm-headerbar-bottom,
html.as-dark .tm-header .uk-section-default,
html.as-dark .tm-header > div,
html.as-dark header .uk-section-default {
    background-color: var(--as-dark-header) !important;
    color: var(--as-text) !important;
}

html.as-dark .uk-navbar-container:not(.uk-navbar-transparent) {
    background-color: var(--as-dark-bg);
}

html.as-dark .uk-logo,
html.as-dark .tm-header .uk-logo {
    color: var(--as-heading) !important;
}

html.as-dark .uk-navbar-nav > li > a {
    color: #d0ccc4;
}

html.as-dark .uk-navbar-nav > li > a:hover,
html.as-dark .uk-navbar-nav > li.uk-active > a {
    color: #ffffff;
}

html.as-dark .tm-headerbar a,
html.as-dark .tm-headerbar .uk-link,
html.as-dark .tm-headerbar .uk-icon,
html.as-dark .tm-headerbar svg {
    color: var(--as-accent) !important;
}


/* ==========================================================
   8. BESCHREIBUNGSLISTE
   ========================================================== */

html.as-dark .uk-list .el-item > .el-title.uk-h6 {
    color: var(--as-accent) !important;
    opacity: 1 !important;
}

html.as-dark .uk-list .el-item > .el-content,
html.as-dark .uk-list .el-item > .el-content p {
    color: var(--as-text-light) !important;
}


/* ==========================================================
   9. ZITATE
   ========================================================== */

html.as-dark blockquote,
html.as-dark .uk-blockquote,
html.as-dark blockquote p,
html.as-dark .uk-blockquote p {
    color: #d2cec6 !important;
}

html.as-dark blockquote .uk-text-muted,
html.as-dark .uk-blockquote .uk-text-muted {
    color: #c7c3bb !important;
}


/* ==========================================================
   10. CARDS – DARK MODE
   ========================================================== */

html.as-dark .uk-card-default {
    background-color: var(--as-dark-surface);
    color: var(--as-text);
}

html.as-dark .uk-card-default .uk-card-title {
    color: var(--as-heading);
}


/* ==========================================================
   10a. YOOTHEME GRID-KARTEN GLOBAL
   BILDER RANDLOS, TEXT MIT INNENABSTAND
   ========================================================== */

/*
   Die Card selbst bekommt keinen Innenabstand.
   Dadurch können Bilder direkt bis an den Rand reichen.
*/

.el-item.uk-card {
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow: hidden;
}


/* ---------- BILDER ---------- */

.el-item.uk-card > picture {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.el-item.uk-card > picture img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ---------- TITEL ---------- */

.el-item.uk-card > .el-title {
    box-sizing: border-box !important;
    width: 100% !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    padding-top: 16px !important;
    padding-right: 18px !important;
    padding-bottom: 0 !important;
    padding-left: 18px !important;
}


/* ---------- INHALT ---------- */

.el-item.uk-card > .el-content {
    box-sizing: border-box !important;
    width: 100% !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    padding-top: 14px !important;
    padding-right: 18px !important;
    padding-bottom: 16px !important;
    padding-left: 18px !important;
}

.el-item.uk-card > .el-content p {
    margin-top: 0 !important;
}

.el-item.uk-card > .el-content p:last-child {
    margin-bottom: 0 !important;
}


/* ---------- MOBILE ---------- */

@media (max-width: 640px) {

    .el-item.uk-card > .el-title {
        padding-top: 14px !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .el-item.uk-card > .el-content {
        padding-top: 12px !important;
        padding-right: 15px !important;
        padding-bottom: 14px !important;
        padding-left: 15px !important;
    }
}


/* ==========================================================
   11. BUTTONS
   ========================================================== */

html.as-dark .uk-button-default {
    background-color: rgba(255,255,255,.04);
    color: #ddd5c7;
    border-color: rgba(205,184,145,.55);
}

html.as-dark .uk-button-default:hover {
    background-color: rgba(205,184,145,.12);
    color: #ffffff;
    border-color: var(--as-accent);
}

html.as-dark .uk-button-primary {
    background-color: #a68f6e;
    color: var(--as-dark-bg);
}

html.as-dark .uk-button-primary:hover {
    background-color: #bca581;
}


/* ==========================================================
   12. FORMULARE
   ========================================================== */

html.as-dark .uk-input,
html.as-dark .uk-select,
html.as-dark .uk-textarea {
    background-color: #242523;
    color: var(--as-heading);
    border-color: #444541;
}

html.as-dark .uk-input::placeholder,
html.as-dark .uk-textarea::placeholder {
    color: var(--as-muted);
}


/* ==========================================================
   13. LINIEN / TRENNER
   ========================================================== */

html.as-dark hr {
    border-color: var(--as-border);
}


/* ==========================================================
   14. FOOTER
   ========================================================== */

html.as-dark .tm-footer,
html.as-dark footer {
    background-color: #151614;
    color: var(--as-muted);
}


/* ==========================================================
   15. SANFTER THEME-WECHSEL
   ========================================================== */

body,
.uk-section,
.uk-tile,
.uk-navbar-container,
.uk-card,
.tm-headerbar {
    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease;
}


/* ==========================================================
   16. LIGHT / AUTO / DARK SWITCHER
   ========================================================== */

.as-theme-switcher {
    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;

    z-index: 99999;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 3px 3px 5px;

    background: rgba(30,30,29,.80);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-left: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 0 0 0 10px;

    box-shadow: 0 2px 10px rgba(0,0,0,.10);
}

.as-theme-switcher button {
    width: 25px;
    height: 25px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: rgba(255,255,255,.60);

    font-family: inherit;
    font-size: 12px;
    line-height: 25px;

    text-align: center;
    cursor: pointer;

    transition:
        background-color .25s ease,
        color .25s ease,
        transform .20s ease;
}

.as-theme-switcher button:hover {
    color: #ffffff;
}

.as-theme-switcher button.active {
    background-color: var(--as-accent);
    color: #1b1b19;
}

.as-theme-switcher button:focus-visible {
    outline: 2px solid var(--as-accent);
    outline-offset: 1px;
}

.as-theme-switcher button:active {
    transform: scale(.90);
}


/* ==========================================================
   17. MOBILE
   ========================================================== */

@media (max-width: 640px) {

    .as-theme-switcher {
        padding: 2px 2px 4px;
    }

    .as-theme-switcher button {
        width: 23px;
        height: 23px;
        font-size: 11px;
        line-height: 23px;
    }
}


/* ==========================================================
   18. DARK MODE – MUTED TILES / BLOG-KARTEN
   ========================================================== */

html.as-dark .uk-tile-muted {
    background-color: var(--as-dark-surface) !important;
    color: var(--as-text) !important;
}

html.as-dark .uk-tile-muted .el-title,
html.as-dark .uk-tile-muted .el-title a {
    color: var(--as-heading) !important;
}

html.as-dark .uk-tile-muted .el-meta {
    color: var(--as-accent) !important;
}

html.as-dark .uk-tile-muted .uk-panel,
html.as-dark .uk-tile-muted p {
    color: var(--as-text) !important;
}

html.as-dark .uk-tile-muted a {
    color: var(--as-accent);
}

html.as-dark .uk-tile-muted a:hover {
    color: var(--as-accent-hover);
}


/* ==========================================================
   19. DARK MODE – BLOG-KARTEN
   ========================================================== */

html.as-dark .uk-tile-default.uk-link-toggle,
html.as-dark .uk-tile-muted.uk-link-toggle {
    background-color: var(--as-dark-surface) !important;
    color: var(--as-text) !important;
}

html.as-dark .uk-tile-muted.uk-link-toggle {
    background-color: #282926 !important;
}

html.as-dark .uk-tile-default .el-title,
html.as-dark .uk-tile-muted .el-title,
html.as-dark .uk-tile-default .el-title a,
html.as-dark .uk-tile-muted .el-title a {
    color: var(--as-heading) !important;
}

html.as-dark .uk-tile-default .el-meta,
html.as-dark .uk-tile-muted .el-meta {
    color: var(--as-accent) !important;
}

html.as-dark .uk-tile-default .uk-panel,
html.as-dark .uk-tile-muted .uk-panel,
html.as-dark .uk-tile-default p,
html.as-dark .uk-tile-muted p {
    color: var(--as-text) !important;
}


/* ==========================================================
   20. HOVER
   ========================================================== */

/* ---------- DARK MODE TILES ---------- */

html.as-dark .uk-tile-default.uk-tile-hover:hover,
html.as-dark .uk-tile-muted.uk-tile-hover:hover {
    background-color: var(--as-dark-warm) !important;
}

html.as-dark .uk-tile-default.uk-tile-hover:hover .el-title,
html.as-dark .uk-tile-muted.uk-tile-hover:hover .el-title {
    color: #ffffff !important;
}

html.as-dark .uk-tile-default.uk-tile-hover:hover .el-meta,
html.as-dark .uk-tile-muted.uk-tile-hover:hover .el-meta {
    color: var(--as-accent-hover) !important;
}

html.as-dark .uk-tile-default.uk-link-toggle,
html.as-dark .uk-tile-muted.uk-link-toggle {
    transition:
        background-color .3s ease,
        color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

html.as-dark .uk-card-hover:hover {
    background-color: var(--as-dark-hover) !important;
}

html.as-dark .uk-tile-default.uk-tile-hover:hover,
html.as-dark .uk-tile-muted.uk-tile-hover:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.20);
}


/* ==========================================================
   20a. HOVER AUF FARBIGEN SECTIONS
   ========================================================== */

/*
   YOOtheme gibt "nackten" uk-card-hover-Karten beim Hover
   sonst einen hellen Hintergrund.

   Auf Primary-/Secondary-Flächen führt das zu zu wenig
   Kontrast bei heller Schrift.

   Deshalb bleibt der Hover hier transparent bzw. nur
   ganz leicht aufgehellt.
*/

.uk-section-primary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover,

.uk-section-secondary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover {

    background-color: rgba(255,255,255,.06) !important;
    color: inherit !important;

    box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;

    transform: translateY(-2px);
}


/* Textfarben im Hover beibehalten */

.uk-section-primary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover h1,

.uk-section-primary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover h2,

.uk-section-primary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover h3,

.uk-section-primary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover h4,

.uk-section-primary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover p,

.uk-section-primary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover li,

.uk-section-secondary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover h1,

.uk-section-secondary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover h2,

.uk-section-secondary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover h3,

.uk-section-secondary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover h4,

.uk-section-secondary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover p,

.uk-section-secondary
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):not(.uk-card-overlay):hover li {
    color: inherit !important;
}


/* Übergang */

.uk-section-primary .uk-card-hover,
.uk-section-secondary .uk-card-hover {
    transition:
        background-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


/* ==========================================================
   21. DARK MODE – KURSIVER TEXT / AUSZEICHNUNGEN
   ========================================================== */

html.as-dark .uk-accordion-content em,
html.as-dark .uk-accordion-content em span {
    color: var(--as-accent) !important;
    opacity: 1 !important;
}


/* ==========================================================
   22. SPOTIFY CONSENT
   ========================================================== */

.as-spotify-wrapper {
    width: 100%;
    max-width: 100%;
}

.as-spotify-placeholder {
    min-height: 352px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 40px 30px;
    text-align: center;

    background: rgba(245, 241, 235, 0.96);
    border: 1px solid rgba(150, 125, 100, 0.22);
    border-radius: 12px;

    color: #39342f;

    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        opacity .3s ease;
}

.as-spotify-icon {
    font-size: 38px;
    line-height: 1;
    margin-bottom: 16px;
    color: #9b856b;
}

.as-spotify-title {
    margin-bottom: 12px;
    color: #39342f;
    font-size: 22px;
    font-weight: 400;
}

.as-spotify-text {
    max-width: 520px;
    margin-bottom: 22px;
    color: #655d54;
    font-size: 14px;
    line-height: 1.65;
}

.as-spotify-accept {
    appearance: none;

    padding: 10px 22px;

    border: 1px solid #a68f6e;
    border-radius: 999px;

    background: #a68f6e;
    color: #ffffff;

    font: inherit;
    font-size: 14px;

    cursor: pointer;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        transform .2s ease,
        box-shadow .25s ease;
}

.as-spotify-accept:hover {
    background: #8d7659;
    border-color: #8d7659;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(50,40,30,.12);
}

.as-spotify-accept:focus-visible {
    outline: 2px solid #a68f6e;
    outline-offset: 3px;
}

.as-spotify-embed {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 12px;
}


/* ---------- SPOTIFY – DARK MODE ---------- */

html.as-dark .as-spotify-placeholder {
    background: var(--as-dark-surface);
    border-color: var(--as-border);
    color: var(--as-text);
}

html.as-dark .as-spotify-icon {
    color: var(--as-accent);
}

html.as-dark .as-spotify-title {
    color: var(--as-heading);
}

html.as-dark .as-spotify-text {
    color: var(--as-muted);
}

html.as-dark .as-spotify-accept {
    background: var(--as-accent);
    border-color: var(--as-accent);
    color: #25231f;
}

html.as-dark .as-spotify-accept:hover {
    background: var(--as-accent-hover);
    border-color: var(--as-accent-hover);
}


/* ---------- SPOTIFY – MOBILE ---------- */

@media (max-width: 640px) {

    .as-spotify-placeholder {
        min-height: 300px;
        padding: 30px 22px;
    }

    .as-spotify-title {
        font-size: 20px;
    }

    .as-spotify-text {
        font-size: 13px;
    }
}


/* ==========================================================
   23. MUSIK-BLOG – KACHELDESIGN
   ========================================================== */

/* Joomla-Einleitungstext in Übersicht ausblenden */

body.music-blog .uk-article [property="text"] {
    display: none;
}


/* Grunddesign */

body.music-blog .uk-article {
    background: rgba(245, 241, 235, 0.72);
    border: 1px solid rgba(150, 125, 100, 0.22);
    border-radius: 12px;

    padding: 18px;

    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;

    align-self: flex-start;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* Hover – helle Ansicht */

html.as-light body.music-blog .uk-article:hover {
    background: rgba(226, 214, 199, 0.88);
    border-color: rgba(150, 125, 100, 0.48);
    box-shadow: 0 8px 24px rgba(70, 50, 35, 0.12);
    transform: translateY(-3px);
}


/* Dunkle Ansicht */

html.as-dark body.music-blog .uk-article {
    background: rgba(70, 55, 45, 0.34);
    border-color: rgba(200, 180, 155, 0.18);
}


/* Hover – dunkle Ansicht */

html.as-dark body.music-blog .uk-article:hover {
    background: rgba(105, 78, 58, 0.42);
    border-color: rgba(200, 180, 155, 0.38);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22);
    transform: translateY(-3px);
}


/* ==========================================================
   24. MUSIK-BLOG – KOMPAKTER INHALT
   ========================================================== */

body.music-blog .uk-grid > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
}

body.music-blog .uk-grid > div > article.uk-article {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
}


/* Titel */

body.music-blog .uk-article .uk-article-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
}


/* Meta-Beschreibung */

body.music-blog .music-meta-description,
body.music-blog .music-card-description {
    font-size: 13px !important;
    line-height: 1.5 !important;
    opacity: 0.72;
    margin: 8px 0 12px !important;
    text-align: left;
}


/* Weiterlesen */

body.music-blog .uk-article > p:last-child {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

body.music-blog .uk-article .uk-button-text {
    margin-top: 0 !important;
}


/* Ganze Karte als Link */

body.music-blog .uk-article.music-card-clickable {
    cursor: pointer;
}


/* ==========================================================
   25. MUSIK-BLOG – MOBILE
   ========================================================== */

@media (max-width: 640px) {

    body.music-blog .uk-article {
        padding: 14px;
    }

    body.music-blog .uk-article .uk-article-title {
        font-size: 23px !important;
        margin-top: 14px !important;
        margin-bottom: 7px !important;
    }

    body.music-blog .music-meta-description,
    body.music-blog .music-card-description {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }
}


/* ==========================================================
   26. MUSIK-BLOG – MASONRY
   NUR FÜR BEITRAGSKACHELN
   ========================================================== */


/* ---------- DESKTOP – 3 SPALTEN ---------- */

@media (min-width: 960px) {

    body.music-blog #tm-main > .uk-container > .uk-grid {
        display: block !important;
        column-count: 3;
        column-gap: 30px;
    }

    body.music-blog #tm-main > .uk-container > .uk-grid > div {
        display: inline-block !important;
        width: 100% !important;
        margin: 0 0 30px 0 !important;
        padding: 0 !important;
        vertical-align: top;
        break-inside: avoid;
    }
}


/* ---------- TABLET – 2 SPALTEN ---------- */

@media (min-width: 640px) and (max-width: 959px) {

    body.music-blog #tm-main > .uk-container > .uk-grid {
        display: block !important;
        column-count: 2;
        column-gap: 24px;
    }

    body.music-blog #tm-main > .uk-container > .uk-grid > div {
        display: inline-block !important;
        width: 100% !important;
        margin: 0 0 24px 0 !important;
        padding: 0 !important;
        vertical-align: top;
        break-inside: avoid;
    }
}


/* ---------- SMARTPHONE – 1 SPALTE ---------- */

@media (max-width: 639px) {

    body.music-blog #tm-main > .uk-container > .uk-grid {
        display: block !important;
        column-count: 1;
    }

    body.music-blog #tm-main > .uk-container > .uk-grid > div {
        display: block !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
    }
}