/* =========================================================
   Cool-Music Theme – Gesamt-CSS (geordnet & kommentiert)
   Basis: deine aktuelle theme.css :contentReference[oaicite:1]{index=1}
   ========================================================= */

/* =========================================================
   1) CSS Variablen / Design Tokens
   ========================================================= */
:root{
    --cm-bg: #0b0d10;
    --cm-surface: #12161c;
    --cm-surface2: #171c24;
    --cm-text: #e8eef6;
    --cm-muted: rgba(232,238,246,.72);
    --cm-border: rgba(232,238,246,.12);
    --cm-accent: #6d5efc;

    --cm-max: 1320px;
    --cm-radius: 16px;
    --cm-shadow: 0 14px 40px rgba(0,0,0,.35);

    /* Adminbar/Sticky Nav – dynamisch gesetzt */
    --cm-adminbar: 0px;
    --cm-nav-h: 56px; /* Höhe der Sticky-Leiste auf Mobile */
}

/* =========================================================
   2) Global Reset / Grundlayout
   ========================================================= */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* gegen horizontales Überlaufen */
html{
    overflow-x: hidden;
}

body{
    background: var(--cm-bg);
    color: var(--cm-text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height: 1.6;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Hintergrund-Glow (fest, damit er NICHT „kachelt“/repeated) */
body::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
            radial-gradient(1000px 520px at 20% 0%, rgba(109,94,252,.22), transparent 65%),
            radial-gradient(900px 560px at 80% 20%, rgba(255,58,158,.14), transparent 60%);
}

a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--cm-accent); }

/* Content Container */
.cm-container{
    max-width: var(--cm-max);
    margin: 0 auto;
    padding: 0 18px;
}

/* Sticky Footer */
.site-main{ flex: 1 0 auto; }
.site-footer{ flex-shrink: 0; }

/* =========================================================
   3) WordPress Adminbar Handling (wichtig für Sticky Nav)
   ========================================================= */

/* WP Adminbar soll wirklich ganz oben fixed bleiben */
#wpadminbar{
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 99999 !important;
}

/* Adminbar-Offset korrekt (WP: 32px Desktop / 46px Mobile) */
body.admin-bar{ --cm-adminbar: 32px; }
@media (max-width: 782px){
    body.admin-bar{ --cm-adminbar: 46px; }
}

/* =========================================================
   4) Navigation (Sticky + Dropdown + Mobile Offcanvas)
   ========================================================= */

/* Sticky Nav */
.site-nav{
    position: sticky;
    top: var(--cm-adminbar);
    z-index: 999;

    border-bottom: 1px solid var(--cm-border);
    background: rgba(11,13,16,.85);
    backdrop-filter: blur(10px);
}

/* Nav-Innenlayout (für Hamburger + Menü) */
.cm-nav-inner{
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Screenreader helper (falls WP-Styles fehlen) */
.screen-reader-text{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    border:0;
}

/* Desktop Menü (Basis) */
.cm-menu{
    list-style: none;
    margin: 0;
    padding: 10px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cm-menu > li{ position: relative; }

.cm-menu a{
    display: inline-flex;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--cm-text);
}
.cm-menu a:hover{
    background: rgba(255,255,255,.06);
}

/* Dropdown: kein Abstand, damit Hover stabil bleibt */
.cm-menu li ul{
    list-style: none;
    margin: 0;
    padding: 8px;

    position: absolute;
    left: 0;
    top: 100%;

    min-width: 240px;
    background: var(--cm-surface2);
    border: 1px solid var(--cm-border);
    border-radius: 14px;
    box-shadow: var(--cm-shadow);

    display: none;
}
.cm-menu li:hover > ul{
    display: block;
}

/* Dropdown Links auf volle Breite + Hover überall */
.cm-menu li ul li{
    width: 100%;
    position: relative;
    padding-right: 10px; /* bisschen Platz für Submenu-Indikator */
}
.cm-menu li ul li > a{
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
}
.cm-menu li ul li:hover > a,
.cm-menu li ul li > a:hover{
    background: rgba(255,255,255,.06);
}

/* Sub-Submenu: direkt anlegen, ohne Lücke */
.cm-menu li ul li ul{
    left: 100%;
    top: 0;
}

/* =========================================================
   4.1) Mobile Navigation (Hamburger / Offcanvas)
   ========================================================= */

/* Hamburger Button (Desktop: versteckt) */
.cm-nav-toggle{
    display: none;
    appearance: none;
    border: 1px solid var(--cm-border);
    background: rgba(255,255,255,.06);
    color: var(--cm-text);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* Burger Icon */
.cm-burger{
    width: 20px;
    height: 14px;
    display: inline-block;
    position: relative;
}
.cm-burger::before,
.cm-burger::after{
    content:"";
    position:absolute;
    left:0; right:0;
    height:2px;
    background: currentColor;
    border-radius: 99px;
}
.cm-burger::before{ top: 2px; box-shadow: 0 5px 0 currentColor; }
.cm-burger::after{ bottom: 2px; }

/* Overlay (nur Mobile, wenn Menü offen) */
.cm-nav-overlay{
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--cm-adminbar) + var(--cm-nav-h));
    height: calc(100vh - var(--cm-adminbar) - var(--cm-nav-h));
    background: rgba(0,0,0,.55);
    z-index: 998;
}

/* Offcanvas Mobile */
@media (max-width: 980px){

    /* Sticky-Leiste hat auf Mobile definierte Höhe */
    .site-nav{
        min-height: var(--cm-nav-h);
        display: flex;
        align-items: center;
    }

    /* Hamburger wird sichtbar */
    .cm-nav-toggle{
        display: inline-flex;
    }

    /* Menü als Offcanvas – NUR wenn JS aktiv ist (html.js wird per theme.js gesetzt) */
    html.js .cm-nav-menu{
        position: fixed;
        top: calc(var(--cm-adminbar) + var(--cm-nav-h));
        left: 0;
        height: calc(100vh - var(--cm-adminbar) - var(--cm-nav-h));
        width: min(320px, 88vw);

        background: rgba(18,22,28,.96);
        border-right: 1px solid var(--cm-border);
        box-shadow: var(--cm-shadow);
        padding: 12px;
        overflow: auto;
        z-index: 999;

        transform: translateX(-110%);
        transition: transform .18s ease;
    }

    /* Offen */
    body.cm-nav-open .cm-nav-menu{
        transform: translateX(0);
    }

    /* Desktop-Menü wird in Mobile vertikal */
    .cm-menu{
        flex-direction: column;
        gap: 6px;
        padding: 0;
        flex-wrap: nowrap;
    }

    .cm-menu a{
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    /* Dropdowns auf Mobile nicht absolut, sondern im Flow */
    .cm-menu li ul{
        position: static;
        display: none;
        min-width: 0;
        border-radius: 12px;
        margin-top: 6px;
        box-shadow: none;
    }

    /* Submenu öffnen per Klasse (cm-sub-open) */
    .cm-menu li.cm-sub-open > ul{
        display: block;
    }

    /* 2. Ebene nicht nach rechts ausklappen */
    .cm-menu li ul li ul{
        left: auto;
        top: auto;
    }

    .search-form{
        padding-left: 10px;
    }

    .cm-footer-grid{
        padding: 32px 32px 32px 32px;
    }
}

/* =========================================================
   5) Header (Logo + Text + Suche + Glow Animation)
   ========================================================= */
.site-header{
    position: relative;
    border-bottom: 1px solid var(--cm-border);
    background: rgba(18,22,28,.75);
    backdrop-filter: blur(10px);
    overflow: hidden; /* Glow bleibt im Header */
}

/* Header: leichter bewegter Glow */
.site-header::before{
    content:"";
    position: absolute;
    inset: -80px;
    pointer-events: none;
    opacity: .55;

    background:
            radial-gradient(500px 260px at 20% 30%, rgba(109,94,252,.28), transparent 70%),
            radial-gradient(460px 280px at 80% 40%, rgba(255,58,158,.18), transparent 72%);

    filter: blur(18px);
    transform: translate3d(0,0,0);
    animation: cmHeaderGlow 14s ease-in-out infinite;
}

@keyframes cmHeaderGlow{
    0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
    50%  { transform: translate3d( 2%,  1%, 0) scale(1.04); }
    100% { transform: translate3d(-2%, -1%, 0) scale(1); }
}

/* Respektiere Nutzer-Einstellung */
@media (prefers-reduced-motion: reduce){
    .site-header::before{ animation: none; }
}

.cm-header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0;
}

.cm-brand{
    display: flex;
    align-items: center;
    gap: 18px;
}

.cm-logo .custom-logo{
    width: var(--cm-logo-width, 180px);
    height: auto;
    display: block;
}

.cm-brand-text{
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,.15);
}

/* Haupttitel */
.cm-brand-text .cm-title{
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #f1f4ff;

    text-shadow:
            0 0 8px rgba(109,94,252,.35),
            0 0 18px rgba(109,94,252,.25);
}

/* Claim / Untertitel */
.cm-brand-text .cm-tagline{
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(232,238,246,.65);
}

/* Header Suche */
.cm-header-right form{ display:flex; gap:10px; }
.cm-header-right input[type="search"]{
    background: rgba(255,255,255,.06);
    border: 1px solid var(--cm-border);
    color: var(--cm-text);
    padding: 10px 12px;
    border-radius: 12px;
    outline: none;
    width: min(420px, 48vw);
}
.cm-header-right input[type="submit"]{
    background: var(--cm-accent);
    border: 0;
    color: #fff;
    padding: 10px 12px;
    border-radius: 12px;
    cursor:pointer;
}

/* =========================================================
   6) Main Layout (Content + Sidebar)
   ========================================================= */
.site-main{
    padding: 26px 0 44px;
}

.cm-layout{
    display: grid;
    gap: 18px;
    align-items: start;
}

/* Kein Sidebar */
.cm-layout.no-sidebar{
    grid-template-columns: 1fr;
    grid-template-areas: "content";
}

/* Sidebar RECHTS (Standard) */
.cm-layout.has-sidebar{
    grid-template-columns: 1fr 360px;
    grid-template-areas: "content sidebar";
}

/* Sidebar LINKS */
.cm-layout.has-sidebar.sidebar-left{
    grid-template-columns: 360px 1fr;
    grid-template-areas: "sidebar content";
}

/* Grid-Zuordnung */
.cm-content{
    grid-area: content;
    background: rgba(18,22,28,.72);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow);
    padding: 22px;
}

/* =========================================================
   6.1) Sidebar (modern + Header + Buttons)
   ========================================================= */
.cm-sidebar{
    grid-area: sidebar;
    background: rgba(18,22,28,.55);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow);

    padding: 0;        /* Innenabstände pro Section */
    overflow: hidden;  /* Header & Buttons bleiben in Rundung */
}

/* Sidebar Section (Menü) */
.cm-sidebar-section{
    padding: 14px;
}

/* Header oben */
.cm-sidebar-header{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 14px;
    margin: -14px -14px 12px; /* Header bis an die Kanten */
    border-bottom: 1px solid var(--cm-border);
    background: rgba(255,255,255,.04);
}

.cm-sidebar-title{
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: rgba(232,238,246,.85);
}

/* Sidebar Navigation */
.cm-sidebar-menu{
    list-style: none;
    margin: 0;
    padding: 0;
}

.cm-sidebar-menu li{
    margin: 6px 0;
}

/* Buttons */
.cm-sidebar-menu a{
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;

    color: var(--cm-text);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);

    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

/* Hover */
.cm-sidebar-menu a:hover{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
    transform: translateY(-1px);
}

/* Focus (Keyboard) */
.cm-sidebar-menu a:focus-visible{
    outline: none;
    box-shadow: 0 0 0 2px rgba(109,94,252,.5);
}

/* Active/current item */
.cm-sidebar-menu li.current-menu-item > a,
.cm-sidebar-menu li.current_page_item > a,
.cm-sidebar-menu li.current-menu-ancestor > a{
    background: linear-gradient(135deg, rgba(109,94,252,.28), rgba(109,94,252,.14));
    border-color: rgba(109,94,252,.45);
    color: #fff;
}

/* Submenu leicht eingerückt */
.cm-sidebar-menu ul{
    list-style: none;
    margin: 8px 0 0 10px;
    padding: 0;
}

.cm-sidebar-menu ul li{
    margin: 6px 0;
}

.cm-sidebar-menu ul a{
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.06);
}

/* =========================================================
   7) Artikel / Content-Typo (WICHTIG wegen Reset)
   ========================================================= */

/* Grundabstände im Content zurückholen (für Gutenberg) */
.cm-entry p{ margin: 0 0 14px; }
.cm-entry h2, .cm-entry h3, .cm-entry h4{ margin: 22px 0 10px; }
.cm-entry ul, .cm-entry ol{ margin: 0 0 14px 18px; }
.cm-entry li{ margin: 6px 0; }

/* Headline */
.cm-h1{
    font-size: 30px;
    margin: 0 0 8px;
    letter-spacing:.2px;

    text-shadow:
            0 0 8px rgba(109,94,252,.35),
            0 0 18px rgba(109,94,252,.25);
}

.cm-meta{
    color: var(--cm-muted);
    font-size: 13px;
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.cm-entry{ margin-top: 18px; }
.cm-entry img{
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--cm-border);
}

/* =========================================================
   7.1) Zeitungsflow für Bilder (alignleft/alignright)
   ========================================================= */

/* Nur Zeitungsflow für alignleft/alignright – niemals für wide/full */
.cm-entry .wp-block-image.alignleft,
.cm-entry img.alignleft{
    float: left;
    margin: 6px 18px 12px 0;
    width: min(320px, 42%);
}

.cm-entry .wp-block-image.alignright,
.cm-entry img.alignright{
    float: right;
    margin: 6px 0 12px 18px;
    width: min(320px, 42%);
}

/* Sicherheit: Wide/Full NICHT floaten */
.cm-entry .wp-block-image.alignwide,
.cm-entry .wp-block-image.alignfull,
.cm-entry img.alignwide,
.cm-entry img.alignfull{
    float: none !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
}

/* Featured Image im Beitrag: Seitenverhältnis behalten + Frame */
.cm-featured{
    max-width: 100%;
    margin: 0 0 18px;
    background: rgba(255,255,255,.03);
    border-radius: 16px;
    padding: 14px;
}
.cm-featured img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}

/* Mobile: kein Float, Bild über dem Text */
@media (max-width: 720px){
    .cm-entry .alignleft,
    .cm-entry .alignright,
    .cm-entry .wp-block-image.alignleft,
    .cm-entry .wp-block-image.alignright{
        float: none;
        margin: 0 0 14px 0;
        max-width: 100%;
        width: 100%;
    }
}

/* =========================================================
   8) Kommentare
   ========================================================= */
.comments-area{
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.comments-title,
.comment-reply-title{
    font-size: 18px;
    margin: 0 0 12px;
}

.comment-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment{
    padding: 14px;
    margin: 0 0 12px;
    border: 1px solid var(--cm-border);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
}

.comment-meta,
.comment-metadata{
    color: var(--cm-muted);
    font-size: 13px;
}

.comment-content{
    margin-top: 10px;
}
.comment-content a{ color: var(--cm-accent); }

/* Formular */
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea{
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--cm-border);
    color: var(--cm-text);
    padding: 10px 12px;
    border-radius: 12px;
    outline: none;
}

.comment-respond textarea{
    min-height: 140px;
    resize: vertical;
}

.comment-respond input[type="submit"]{
    background: var(--cm-accent);
    border: 0;
    color: #fff;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
}

.cm-comments-wrap{
    margin-top: 28px;
    padding: 18px;
    border: 1px solid var(--cm-border);
    border-radius: 16px;
    background: rgba(255,255,255,.03);
}

/* =========================================================
   9) Footer
   ========================================================= */
.site-footer{
    border-top: 1px solid var(--cm-border);
    background: rgba(18,22,28,.65);
}

.cm-footer-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 32px 0;
}

.footer-title{ margin: 0 0 10px; font-size: 15px; }
.footer-widget{ color: var(--cm-muted); }

.cm-footer-bottom{
    border-top: 1px solid var(--cm-border);
    padding: 20px 0;
}

.cm-copyright{
    text-align: center;
    color: var(--cm-muted);
    font-size: 13px;
}

/* =========================================================
   10) Responsive Layout (Sidebar + Header + Footer)
   ========================================================= */
@media (max-width: 980px){

    /* Sidebar IMMER unter Content */
    .cm-layout.has-sidebar,
    .cm-layout.has-sidebar.sidebar-left{
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "sidebar";
    }

    .cm-footer-grid{
        grid-template-columns: 1fr 1fr;
    }

    /* Header stackt sauber */
    .cm-header-inner{
        flex-direction: column;
        align-items: stretch;
    }
    .cm-header-right input[type="search"]{
        width: 100%;
    }
}

@media (max-width: 560px){
    .cm-footer-grid{
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   11) External Link Modal
   ========================================================= */

/* hidden MUSS wirklich unsichtbar sein */
[hidden]{ display:none !important; }

.cm-external-modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.68);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.cm-external-box{
    width: min(520px, calc(100% - 32px));
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--cm-border);
    box-shadow: var(--cm-shadow);
    background: #12161c;
}

/* Header */
.cm-external-head{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid var(--cm-border);
}

.cm-external-logo{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.25);
}

.cm-external-title{
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: 14px;
    color: #fff;
}

.cm-external-subtitle{
    font-size: 12px;
    color: var(--cm-muted);
    margin-top: 2px;
}

/* Body */
.cm-external-body{
    padding: 16px;
    text-align: center;
}

.cm-external-msg{
    color: rgba(232,238,246,.86);
    margin-bottom: 10px;
}

.cm-external-target{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    font-weight: 800;
    letter-spacing: .4px;
    margin-bottom: 10px;
}

.cm-external-note{
    font-size: 13px;
    color: var(--cm-muted);
    margin-top: 4px;
}

.cm-external-timer{
    margin-top: 12px;
    font-size: 13px;
    color: rgba(232,238,246,.80);
}

/* Actions */
.cm-external-actions{
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.cm-external-actions button{
    flex: 1;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--cm-border);
    cursor: pointer;
    font-weight: 700;
}

.cm-btn-cancel{
    background: rgba(255,255,255,.06);
    color: var(--cm-text);
}

.cm-btn-copy{
    background: rgba(255,255,255,.06);
    color: var(--cm-text);
    border: 1px dashed rgba(255,255,255,.25);
}
.cm-btn-copy:hover{
    background: rgba(255,255,255,.12);
}

.cm-btn-confirm{
    background: var(--cm-accent);
    color: #fff;
    border-color: transparent;
}
.cm-btn-confirm:hover{ filter: brightness(1.05); }
.cm-btn-cancel:hover{ background: rgba(255,255,255,.10); }

.cm-external-warning{
    margin-top: 12px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 198, 0, .25);
    background: rgba(255, 198, 0, .08);
    color: rgba(232,238,246,.92);
    font-size: 13px;
    text-align: left;
}

.cm-external-warning .cm-external-help{
    margin-top: 6px;
    color: var(--cm-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Mobile: Modal Buttons untereinander */
@media (max-width: 520px){
    .cm-external-actions{
        flex-direction: column;
    }
}

/* =========================================================
   12) Beta Alert / Warnbox (Beta-Phase Hinweis)
   ========================================================= */
.cm-alert{
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 16px;

    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    margin: 20px 0;
}

.cm-alert-icon{
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: flex-start;
}

.cm-alert-content h3{
    margin: 0 0 8px;
    font-size: 20px;
    letter-spacing: .4px;
}

.cm-alert-content p{
    margin: 0 0 10px;
    color: rgba(232,238,246,.9);
}

.cm-alert-content ul{
    margin: 10px 0 14px 18px;
}
.cm-alert-content li{
    margin: 6px 0;
}

.cm-alert-note{
    font-size: 14px;
    color: rgba(232,238,246,.75);
}

/* Beta Variante (Cool-Music Farben) */
.cm-alert-beta{
    background: linear-gradient(135deg, rgba(109,94,252,.18), rgba(255,58,158,.12));
    border-color: rgba(109,94,252,.55);
}
.cm-alert-beta .cm-alert-icon{
    color: #ffd24d;
}
.cm-alert-beta h3{
    color: #f1f4ff;
    text-shadow: 0 0 6px rgba(109,94,252,.35);
}

/* Mobile: Icon oben, Content darunter */
@media (max-width: 560px){
    .cm-alert{
        grid-template-columns: 1fr;
    }
    .cm-alert-icon{
        align-items: center;
        justify-content: flex-start;
    }
}

/* =========================================================
   13) "Über uns" Seite (scoped: .cm-about)
   ========================================================= */
.cm-about{
    --cm-bg: #0f0f10;
    --cm-surface: #17171a;
    --cm-surface-2: #1f1f24;
    --cm-border: rgba(255,255,255,.08);
    --cm-text: rgba(255,255,255,.90);
    --cm-muted: rgba(255, 255, 255, 0.93);
    --cm-accent: #3b82f6; /* blau */
    --cm-accent-2: rgba(59,130,246,.15);
    --cm-radius: 18px;
    color: var(--cm-text);
}

/* Fokus für Buttons/Links (A11y) */
.cm-about a:focus-visible,
.cm-about button:focus-visible{
    outline: 2px solid rgba(59,130,246,.65);
    outline-offset: 3px;
    border-radius: 14px;
}

.cm-about .cm-wrap{
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 18px 40px;
}

.cm-about .cm-hero{
    background:
            linear-gradient(135deg, rgba(59,130,246,.18), rgba(0,0,0,0) 55%),
            radial-gradient(900px 280px at 10% 0%, rgba(59,130,246,.18), transparent 55%),
            var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: calc(var(--cm-radius) + 6px);
    padding: 26px 22px;
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.cm-about .cm-hero h1{
    margin: 0 0 8px;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: .2px;
}

.cm-about .cm-hero p{
    margin: 0;
    color: var(--cm-muted);
    line-height: 1.55;
    max-width: 78ch;
}

.cm-about .cm-microstats{
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cm-about .cm-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--cm-border);
    color: var(--cm-muted);
    font-size: 13px;
}

.cm-about .cm-pill svg{ opacity: .85; }

.cm-about .cm-grid{
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 900px){
    .cm-about .cm-grid{ grid-template-columns: 1fr 1fr; }
}

.cm-about .cm-card{
    background:
            linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0)),
            var(--cm-surface-2);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    padding: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,.30);
    display: grid;
    gap: 14px;
}

.cm-about .cm-cardhead{
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 14px;
    align-items: center;
}

.cm-about .cm-avatar{
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background:
            radial-gradient(60px 60px at 30% 20%, rgba(59,130,246,.45), transparent 60%),
            linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border: 1px solid var(--cm-border);
    overflow: hidden;
}

.cm-about .cm-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cm-about .cm-name{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cm-about .cm-name h2{
    margin: 0;
    font-size: 20px;
}

.cm-about .cm-badge{
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    color: rgba(255,255,255,.92);
    background: var(--cm-accent-2);
    border: 1px solid rgba(59,130,246,.35);
}

.cm-about .cm-subline{
    margin: 4px 0 0;
    color: var(--cm-muted);
    font-size: 13.5px;
    line-height: 1.45;
}

.cm-about .cm-text{
    margin: 0;
    color: var(--cm-muted);
    line-height: 1.65;
}

.cm-about .cm-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cm-about .cm-tag{
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--cm-border);
    color: rgba(255,255,255,.78);
}

.cm-about .cm-facts{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.cm-about .cm-facts li{
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.45;
}

.cm-about .cm-facts svg{ opacity: .9; margin-top: 2px; }

.cm-about .cm-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.cm-about .cm-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid var(--cm-border);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.88);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.cm-about .cm-btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
}

.cm-about .cm-btn--primary{
    background: linear-gradient(180deg, rgba(59,130,246,.25), rgba(59,130,246,.12));
    border-color: rgba(59,130,246,.38);
}

.cm-about .cm-btn--primary:hover{
    background: linear-gradient(180deg, rgba(59,130,246,.32), rgba(59,130,246,.14));
    border-color: rgba(59,130,246,.55);
}

/* KI Hero */
.cm-about .cm-hero--ki{
    margin-top: 18px;
    background:
            linear-gradient(135deg, rgba(59,130,246,.14), rgba(0,0,0,0) 55%),
            radial-gradient(900px 280px at 90% 10%, rgba(59,130,246,.12), transparent 55%),
            var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: calc(var(--cm-radius) + 6px);
    padding: 22px;
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.cm-about .cm-hero--ki h2{
    margin: 0 0 10px;
    font-size: clamp(22px, 2.4vw, 32px);
    letter-spacing: .2px;
}

.cm-about .cm-hero--ki .cm-hero-inner{
    display: grid;
    gap: 14px;
}

@media (min-width: 900px){
    .cm-about .cm-hero--ki .cm-hero-inner{
        grid-template-columns: 1.25fr .75fr;
        align-items: start;
    }
}

.cm-about .cm-hero--ki p{
    margin: 0 0 10px;
    color: var(--cm-muted);
    line-height: 1.65;
}

.cm-about .cm-quote{
    margin-top: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(59,130,246,.28);
    background: rgba(59,130,246,.10);
    color: rgba(255,255,255,.82);
}

.cm-about .cm-quote strong{ color: rgb(255 255 255 / 94%); }

.cm-about .cm-mini-faq{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.cm-about .cm-mini-faq li{
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    color: rgb(255 255 255 / 94%);
    line-height: 1.5;
}

.cm-about .cm-mini-faq svg{ opacity: .9; margin-top: 2px; }

/* =========================================================
   14) Complianz – Cookie Tabellen lesbar machen
   ========================================================= */
.cmplz-cookiebanner,
.cmplz-document,
.cmplz-document .cookies-per-purpose{
    color: var(--cm-text);
}

/* Haupt-Grid */
.cmplz-document .cookies-per-purpose{
    display: grid;
    grid-template-columns: 1.2fr .6fr 1.4fr; /* Name | Ablaufdatum | Funktion */
    gap: 10px 14px;
    margin: 14px 0 22px;
    padding: 14px;
    border: 1px solid var(--cm-border);
    border-radius: 14px;
    background: rgba(18,22,28,.55);
}

/* Überschrift „Funktional“ etc. über volle Breite */
.cmplz-document .cookies-per-purpose .purpose{
    grid-column: 1 / -1;
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
}

.cmplz-document .cookies-per-purpose .purpose h4{
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(232,238,246,.92);
}

/* Header-Zeilen */
.cmplz-document .cookies-per-purpose .name-header,
.cmplz-document .cookies-per-purpose .retention-header,
.cmplz-document .cookies-per-purpose .function-header{
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: rgba(232,238,246,.70);
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

/* Header Positionen */
.cmplz-document .cookies-per-purpose .name-header{ grid-column: 1; }
.cmplz-document .cookies-per-purpose .retention-header{ grid-column: 2; }
.cmplz-document .cookies-per-purpose .function-header{ grid-column: 3; }

/* Werte */
.cmplz-document .cookies-per-purpose .name,
.cmplz-document .cookies-per-purpose .retention,
.cmplz-document .cookies-per-purpose .function{
    padding: 10px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(232,238,246,.92);
    min-width: 0;
}

/* Spalten */
.cmplz-document .cookies-per-purpose .name{ grid-column: 1; }
.cmplz-document .cookies-per-purpose .retention{ grid-column: 2; white-space: nowrap; }
.cmplz-document .cookies-per-purpose .function{ grid-column: 3; }

/* Lange Cookie-Namen umbrechen */
.cmplz-document .cookies-per-purpose .name{
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
}

/* Funktionstext */
.cmplz-document .cookies-per-purpose .function{
    line-height: 1.5;
}

/* Mobile: 1 Spalte */
@media (max-width: 720px){
    .cmplz-document .cookies-per-purpose{
        grid-template-columns: 1fr;
    }

    .cmplz-document .cookies-per-purpose .name-header,
    .cmplz-document .cookies-per-purpose .retention-header,
    .cmplz-document .cookies-per-purpose .function-header,
    .cmplz-document .cookies-per-purpose .name,
    .cmplz-document .cookies-per-purpose .retention,
    .cmplz-document .cookies-per-purpose .function{
        grid-column: 1 / -1;
        white-space: normal;
    }
}

/* =========================================================
   15) Beiträge-Seite (Grid Cards + Pagination)
   ========================================================= */
.cm-page-head{ margin-bottom: 18px; }
.cm-page-intro{ color: var(--cm-muted); margin-top: 10px; }

.cm-post-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.cm-post-card{
    border: 1px solid var(--cm-border);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(18,22,28,.55);
    box-shadow: var(--cm-shadow);
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.cm-post-card:hover{
    transform: translateY(-2px);
    border-color: rgba(109,94,252,.35);
    background: rgba(18,22,28,.70);
}

/* Thumb-Frame: gleich hohe Karten, aber kein Crop (contain) */
.cm-post-thumb{
    display: block;
    height: 190px;
    background: rgba(255,255,255,.03);
}

.cm-post-thumb img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cm-post-thumb-fallback{
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.04);
    color: rgba(232,238,246,.55);
}

.cm-post-body{ padding: 14px 14px 16px; }

.cm-post-meta{
    color: var(--cm-muted);
    font-size: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.cm-dot{ opacity: .6; }

.cm-post-title{
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.25;
}
.cm-post-title a:hover{ color: var(--cm-accent); }

.cm-post-excerpt{
    color: rgba(232,238,246,.78);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 12px;
}

.cm-post-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.cm-post-cats a{
    color: rgba(232,238,246,.75);
    font-size: 12px;
}
.cm-post-cats a:hover{ color: var(--cm-accent); }

.cm-post-read{
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: rgba(109,94,252,.16);
    border: 1px solid rgba(109,94,252,.35);
    padding: 8px 10px;
    border-radius: 12px;
}
.cm-post-read:hover{
    background: rgba(109,94,252,.26);
}

/* Pagination */
.cm-pagination{
    margin-top: 18px;
    display: flex;
    justify-content: center;
}
.cm-pagination .page-numbers{
    display: inline-flex;
    padding: 8px 10px;
    margin: 0 4px;
    border-radius: 12px;
    border: 1px solid var(--cm-border);
    background: rgba(255,255,255,.03);
}
.cm-pagination .page-numbers.current{
    background: rgba(109,94,252,.18);
    border-color: rgba(109,94,252,.35);
}

/* Responsive Cards */
@media (max-width: 980px){
    .cm-post-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
    .cm-post-grid{ grid-template-columns: 1fr; }
    .cm-post-thumb{ height: 170px; }
}


/* =========================================================
   Footer: mehr seitlicher Abstand auf kleinen Screens
   ========================================================= */

/* Sicherstellen, dass Footer-Container IMMER padding hat */
.site-footer .cm-container{
    padding-left: 25px;
    padding-right: 25px;
}

/* Mobile: deutlich mehr Luft, damit nix „klebt“ */
@media (max-width: 640px){
    .site-footer .cm-container{
        padding-left: 32px;
        padding-right: 32px;
    }

    /* falls Widgets/Listen optisch zu dicht wirken */
    .cm-footer-grid{
        gap: 14px;
        padding-top: 26px;
        padding-bottom: 26px;
    }
}

/* Sehr kleine Geräte */
@media (max-width: 420px){
    .site-footer .cm-container{
        padding-left: 25px;
        padding-right: 25px;
    }
}

/* ===============================
   404 Page (polished + hero image)
   =============================== */

.cm-404-wrap{
    display:flex;
    justify-content:center;
}

.cm-404-card{
    position: relative;
    max-width: 760px;
    width: 100%;
    text-align: center;
    padding: 52px 34px;
    border-radius: 20px;

    background: rgba(18,22,28,.78);
    border: 1px solid var(--cm-border);
    box-shadow: var(--cm-shadow);
    overflow: hidden; /* wichtig für Hero */
}

/* Hero-Image (Bild 2) */
.cm-404-hero{
    position:absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    filter: blur(1px) saturate(1.1);
    opacity: .32;
    transform: scale(1.03);
    pointer-events:none;
}

/* Content über dem Hero */
.cm-404-card > *{
    position: relative;
    z-index: 1;
}

.cm-404-code{
    font-size: clamp(72px, 12vw, 120px);
    font-weight: 900;
    letter-spacing: 4px;
    color: rgba(109,94,252,.40);
    text-shadow:
            0 0 18px rgba(109,94,252,.25),
            0 0 40px rgba(109,94,252,.15);
}

.cm-404-title{
    font-size: 28px;
    margin: 12px 0 10px;
}

.cm-404-text{
    color: var(--cm-muted);
    margin-bottom: 26px;
}

/* Button: Text darf NICHT verschwinden */
.cm-btn-primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 20px;
    border-radius: 14px;

    background: linear-gradient(135deg, rgba(109,94,252,1), rgba(151,78,255,.95));
    color: #fff !important;               /* <- wichtig wegen globalem a:hover */
    font-weight: 700;
    letter-spacing: .2px;

    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 30px rgba(109,94,252,.22);

    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease;
}

.cm-btn-primary:hover{
    color: #fff !important;               /* <- Fix für „Schrift verschwindet“ */
    transform: translateY(-1px);
    filter: brightness(1.05);
    border-color: rgba(255,255,255,.20);
    box-shadow: 0 16px 42px rgba(109,94,252,.34);
}

/* Search: Dark + modern */
.cm-404-search{
    margin: 26px 0 18px;
}

/* WP Search Form */
.cm-404-search form{
    display:flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.cm-404-search input[type="search"]{
    width: min(420px, 100%);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--cm-text);
    padding: 12px 14px;
    border-radius: 14px;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.cm-404-search input[type="search"]::placeholder{
    color: rgba(232,238,246,.55);
}

.cm-404-search input[type="search"]:focus{
    border-color: rgba(109,94,252,.55);
    box-shadow:
            0 0 0 4px rgba(109,94,252,.18),
            inset 0 0 0 1px rgba(0,0,0,.12);
}

/* Search Button */
.cm-404-search input[type="submit"]{
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);

    background: rgba(255,255,255,.08);
    color: #fff;
    font-weight: 700;
    cursor: pointer;

    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.cm-404-search input[type="submit"]:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.20);
}

/* Latest */
.cm-404-latest h2{
    font-size: 18px;
    margin: 18px 0 10px;
}

.cm-404-latest ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.cm-404-latest li{
    margin: 8px 0;
}

.cm-404-latest a{
    color: rgba(232,238,246,.88);
    opacity: .92;
    text-decoration: none;
}

.cm-404-latest a:hover{
    opacity: 1;
    color: var(--cm-accent);
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 560px){
    .cm-404-card{
        padding: 38px 20px;
    }
}

/* 404 Bild (direkt sichtbar, kein Background) */
.cm-404-visual{
    margin: 0 auto 14px;
    width: min(520px, 92%);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.cm-404-visual img{
    display: block;
    width: 100%;
    height: auto;
}

/* 404 Zahl etwas nach hinten, damit Bild “Hero” bleibt */
.cm-404-code{
    margin-top: 10px;
    opacity: .70;
}





/* =========================================================
   Complianz – Dark Theme Fix (lesbar + passend zu Cool-Music)
   ========================================================= */

/* Basis: Complianz Inhalte generell hell darstellen */
.cmplz-document,
.cmplz-document p,
.cmplz-document li,
.cmplz-document td,
.cmplz-document th,
.cmplz-document div{
    color: rgba(232,238,246,.92) !important;
}

/* Links */
.cmplz-document a{
    color: var(--cm-accent) !important;
    text-decoration: underline;
}
.cmplz-document a:hover{
    filter: brightness(1.1);
}

/* Accordion / Service-Karten (WordPress / Complianz Blöcke) */
.cmplz-document .cmplz-service-header,
.cmplz-document .cmplz-service-description,
.cmplz-document .cmplz-service-cookie-list,
.cmplz-document .cmplz-service-partners{
    background: rgba(18,22,28,.60) !important;
    border: 1px solid var(--cm-border) !important;
}

/* Kopfzeile des Accordions (die graue Leiste oben) */
.cmplz-document .cmplz-service-header{
    border-radius: 14px 14px 0 0 !important;
}
.cmplz-document .cmplz-service-header *{
    color: rgba(232,238,246,.92) !important;
}

/* Inhalt unter dem Header */
.cmplz-document .cmplz-service-description,
.cmplz-document .cmplz-service-cookie-list,
.cmplz-document .cmplz-service-partners{
    border-top: 0 !important;
}

/* Cookie-Liste pro Zweck (dein Grid/„Tabelle“) */
.cmplz-document .cookies-per-purpose{
    background: rgba(18,22,28,.55) !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 14px !important;
}

/* Zweck-Headline („Funktional“ etc.) */
.cmplz-document .cookies-per-purpose .purpose{
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 12px !important;
}
.cmplz-document .cookies-per-purpose .purpose h4{
    color: rgba(232,238,246,.95) !important;
}

/* Header-Zellen („Name“, „Ablaufdatum“, „Funktion“) */
.cmplz-document .cookies-per-purpose .name-header,
.cmplz-document .cookies-per-purpose .retention-header,
.cmplz-document .cookies-per-purpose .function-header{
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(232,238,246,.92) !important;
}

/* Werte-Zellen */
.cmplz-document .cookies-per-purpose .name,
.cmplz-document .cookies-per-purpose .retention,
.cmplz-document .cookies-per-purpose .function{
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(232,238,246,.92) !important;
}

/* Cookie-Namen mono + umbrechen */
.cmplz-document .cookies-per-purpose .name{
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size: 13px;
}

/* Icons/Pfeile im Header sichtbar */
.cmplz-document .cmplz-icon,
.cmplz-document .cmplz-icon *{
    color: rgba(232,238,246,.92) !important;
    fill: rgba(232,238,246,.92) !important;
}

/* Falls irgendwo „helles Tabellenlayout“ durchkommt */
.cmplz-document table{
    background: transparent !important;
}
.cmplz-document th,
.cmplz-document td{
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(232,238,246,.12) !important;
}

/* Mobile: alles untereinander */
@media (max-width: 720px){
    .cmplz-document .cookies-per-purpose{
        grid-template-columns: 1fr !important;
    }
    .cmplz-document .cookies-per-purpose .name-header,
    .cmplz-document .cookies-per-purpose .retention-header,
    .cmplz-document .cookies-per-purpose .function-header,
    .cmplz-document .cookies-per-purpose .name,
    .cmplz-document .cookies-per-purpose .retention,
    .cmplz-document .cookies-per-purpose .function{
        grid-column: 1 / -1 !important;
        white-space: normal !important;
    }
}