/* Smart Ticker — frontend styles
   Strategie: Theme-Farben als Basis (inherit/transparent),
   eigene Erkennbarkeit durch Struktur + Akzentfarbe (Feed-Farbe).
   Alle Werte überschreibbar via CSS Custom Properties.
   Design-Presets werden als Klasse auf .smart-ticker gesetzt:
     .st-skin-default | .st-skin-card | .st-skin-minimal | .st-skin-bold
*/

/* ── Custom Properties (Defaults = Theme-neutral) ─────────────── */
.smart-ticker {
    /* Farben — Theme übernehmen wenn nicht überschrieben */
    --st-bg:          transparent;
    --st-text:        inherit;
    --st-muted:       #6b7280;
    --st-border:      rgba(0,0,0,.10);
    --st-accent-w:    3px;          /* Breite des linken Akzent-Streifens */
    --st-item-pad:    0.85em 0 0.85em calc(var(--st-accent-w) + 0.75em);
    --st-radius:      0px;
    --st-title-size:  1em;
    --st-title-weight:700;
    --st-meta-size:   0.68em;
    --st-excerpt-visible: 1;        /* 0 = versteckt */
    --st-wrapper-bg:  transparent;
    --st-wrapper-pad: 0;
    --st-wrapper-radius: 0px;
    --st-wrapper-border: none;
    --st-wrapper-shadow: none;
}

/* ── Base ─────────────────────────────────────────────────────── */
.smart-ticker,
.smart-ticker * { box-sizing: border-box; }

.smart-ticker {
    width:       100%;
    background:  var(--st-wrapper-bg);
    padding:     var(--st-wrapper-pad);
    border-radius: var(--st-wrapper-radius);
    border:      var(--st-wrapper-border);
    box-shadow:  var(--st-wrapper-shadow);
    font-family: inherit;
    font-size:   inherit;
    line-height: 1.5;
}

.smart-ticker__stream {
    display:        flex;
    flex-direction: column;
    margin:         0;
    padding:        0;
    list-style:     none;
    background:     var(--st-bg);
}

/* ── Item ─────────────────────────────────────────────────────── */
.smart-ticker__item {
    position:     relative;
    padding:      var(--st-item-pad);
    border-bottom: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background:   transparent;
    margin:       0;
    /* Linker Akzentstreifen in Feed-Farbe */
    border-left:  var(--st-accent-w) solid var(--ticker-color, var(--st-muted));
}

.smart-ticker__item:last-child { border-bottom: none; }

/* ── Meta (Quelle + Zeit) ─────────────────────────────────────── */
.smart-ticker__meta {
    display:     flex;
    align-items: baseline;
    gap:         0.45em;
    margin:      0 0 0.2em;
}

.smart-ticker span.smart-ticker__source {
    font-size:      var(--st-meta-size);
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--ticker-color, var(--st-muted));
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    max-width:      65%;
}

.smart-ticker time.smart-ticker__time {
    font-size:   var(--st-meta-size);
    color:       var(--st-muted);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Titel ────────────────────────────────────────────────────── */
.smart-ticker h3.smart-ticker__title {
    margin:      0 0 0.2em;
    padding:     0;
    font-size:   var(--st-title-size);
    font-weight: var(--st-title-weight);
    line-height: 1.3;
    color:       var(--st-text);
    border:      none;
    background:  transparent;
    box-shadow:  none;
}

.smart-ticker h3.smart-ticker__title a,
.smart-ticker h3.smart-ticker__title a:link,
.smart-ticker h3.smart-ticker__title a:visited {
    color:           var(--st-text) !important;
    text-decoration: none !important;
    background:      transparent !important;
    border:          none !important;
    padding:         0 !important;
    margin:          0 !important;
    font-size:       inherit !important;
    font-weight:     inherit !important;
    box-shadow:      none !important;
    text-shadow:     none !important;
}

.smart-ticker h3.smart-ticker__title a:hover,
.smart-ticker h3.smart-ticker__title a:focus {
    color:           var(--ticker-color, var(--st-muted)) !important;
    text-decoration: none !important;
}

/* ── Excerpt ─────────────────────────────────────────────────── */
.smart-ticker p.smart-ticker__excerpt {
    margin:      0;
    font-size:   0.875em;
    line-height: 1.5;
    color:       var(--st-muted);
    background:  transparent;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* ── Hint ────────────────────────────────────────────────────── */
.smart-ticker p.smart-ticker__hint {
    margin:     0.3em 0 0;
    font-size:  0.72em;
    font-style: italic;
    color:      var(--st-muted);
    opacity:    0.75;
}

/* ── Badges ──────────────────────────────────────────────────── */
.smart-ticker .smart-ticker__ext {
    font-size:       0.7em;
    opacity:         0.5;
    vertical-align:  super;
    line-height:     1;
    font-style:      normal;
    text-decoration: none !important;
}

.smart-ticker .smart-ticker__pin {
    float:       right;
    font-size:   0.75em;
    margin-left: 0.5em;
    opacity:     0.5;
    line-height: 1;
}

/* ── Empty ───────────────────────────────────────────────────── */
.smart-ticker.smart-ticker--empty {
    padding: 1em 0;
    color:   var(--st-muted);
    font-size: 0.875em;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN-PRESETS
   ═══════════════════════════════════════════════════════════════ */

/* ── Skin: default (dezent, nur linker Streifen) ─────────────── */
.smart-ticker.st-skin-default {
    /* Alles aus den Defaults — keine Überschreibungen nötig */
}

/* ── Skin: card (Karten mit Schatten, leichte Trennung) ─────── */
.smart-ticker.st-skin-card {
    --st-wrapper-bg:     #f9fafb;
    --st-wrapper-pad:    12px 16px;
    --st-wrapper-radius: 10px;
    --st-wrapper-border: 1px solid rgba(0,0,0,.08);
    --st-wrapper-shadow: 0 2px 8px rgba(0,0,0,.06);
    --st-radius:         6px;
    --st-item-pad:       0.8em 0.9em 0.8em calc(var(--st-accent-w) + 0.9em);
    --st-border:         transparent;
    --st-bg:             #ffffff;
}

.smart-ticker.st-skin-card .smart-ticker__item {
    margin-bottom: 6px;
    box-shadow:    0 1px 3px rgba(0,0,0,.07);
}

.smart-ticker.st-skin-card .smart-ticker__item:last-child {
    margin-bottom: 0;
}

/* ── Skin: minimal (nur Texte, kaum Linien) ──────────────────── */
.smart-ticker.st-skin-minimal {
    --st-accent-w:  2px;
    --st-border:    transparent;
    --st-item-pad:  0.6em 0 0.6em calc(var(--st-accent-w) + 0.65em);
    --st-meta-size: 0.65em;
    --st-title-weight: 600;
}

.smart-ticker.st-skin-minimal .smart-ticker__item + .smart-ticker__item {
    border-top: 1px solid var(--st-border-subtle, rgba(0,0,0,.06));
}

.smart-ticker.st-skin-minimal p.smart-ticker__excerpt {
    display: none;
}

/* ── Skin: bold (dunkler Hintergrund, starker Kontrast) ─────── */
.smart-ticker.st-skin-bold {
    --st-bg:          #1a1a2e;
    --st-text:        #f0f0f5;
    --st-muted:       #9ca3af;
    --st-border:      rgba(255,255,255,.08);
    --st-wrapper-bg:  #1a1a2e;
    --st-wrapper-pad: 16px 20px;
    --st-wrapper-radius: 10px;
    --st-accent-w:    3px;
    --st-item-pad:    0.85em 0 0.85em calc(var(--st-accent-w) + 0.75em);
}

.smart-ticker.st-skin-bold h3.smart-ticker__title a,
.smart-ticker.st-skin-bold h3.smart-ticker__title a:link,
.smart-ticker.st-skin-bold h3.smart-ticker__title a:visited {
    color: #f0f0f5 !important;
}

.smart-ticker.st-skin-bold h3.smart-ticker__title a:hover {
    color: var(--ticker-color, #a78bfa) !important;
}

/* ── Widget-Wrapper ──────────────────────────────────────────── */
.smart-ticker-widget { width: 100%; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .smart-ticker p.smart-ticker__excerpt { display: none; }
    .smart-ticker__item                   { padding-top: 0.65em; padding-bottom: 0.65em; }
}

/* ── Kategorie-Filter Pills ──────────────────────────────────── */
.smart-ticker-filter {
    display:    flex;
    flex-wrap:  nowrap;
    gap:        6px;
    overflow-x: auto;
    padding:    0 0 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.smart-ticker-filter::-webkit-scrollbar { display: none; }

.st-filter-pill {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       5px 13px;
    border-radius: 20px;
    border:        1.5px solid var(--pill-color, #6b7280);
    background:    transparent;
    color:         var(--pill-color, #6b7280);
    font-size:     0.78em;
    font-weight:   600;
    letter-spacing: 0.03em;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.15s, color 0.15s;
    line-height:   1;
}
.st-filter-pill:hover {
    background: color-mix(in srgb, var(--pill-color, #6b7280) 12%, transparent);
}
.st-filter-pill--active {
    background: var(--pill-color, #6b7280);
    color:      #fff;
}

/* "Alle" pill has no specific color – use muted */
.st-filter-pill[data-filter="all"] {
    --pill-color: #6b7280;
}

/* Hidden items via filter */
.smart-ticker__item--hidden {
    display: none;
}

/* ── Pin ─────────────────────────────────────────────────────── */
.smart-ticker__item--pinned {
    /* subtle highlight for pinned items */
}
.smart-ticker__pin {
    position:    absolute;
    top:         0.6em;
    right:       0.6em;
    font-size:   0.8em;
    line-height: 1;
    opacity:     0.65;
    float:       none;
    margin:      0;
}

/* ── Load More ───────────────────────────────────────────────── */
.st-pagination {
    text-align: center;
    padding:    12px 0 4px;
}
.st-load-more {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 20px;
    border:        1.5px solid var(--st-border, rgba(0,0,0,.15));
    border-radius: 20px;
    background:    transparent;
    color:         var(--st-muted, #6b7280);
    font-size:     0.8em;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .15s, color .15s, border-color .15s;
}
.st-load-more:hover:not(:disabled) {
    border-color: currentColor;
    color: var(--st-text, inherit);
}
.st-load-more:disabled {
    opacity: .5;
    cursor: wait;
}

/* ── Archive ─────────────────────────────────────────────────── */

/* Archive wrapper: mirrors .smart-ticker custom props */
.st-archive {
    /* ── Same defaults as .smart-ticker ── */
    --st-bg:          transparent;
    --st-text:        inherit;
    --st-muted:       #6b7280;
    --st-border:      rgba(0,0,0,.10);
    --st-accent-w:    3px;
    --st-item-pad:    0.85em 0 0.85em calc(var(--st-accent-w) + 0.75em);
    --st-radius:      0px;
    --st-title-size:  1em;
    --st-title-weight:700;
    --st-meta-size:   0.68em;
    --st-wrapper-bg:  transparent;
    --st-wrapper-pad: 0;
    --st-wrapper-radius: 0px;
    --st-wrapper-border: none;
    --st-wrapper-shadow: none;

    display:          flex;
    flex-direction:   column;
    width:            100%;
    background:       var(--st-wrapper-bg);
    padding:          var(--st-wrapper-pad);
    border-radius:    var(--st-wrapper-radius);
    border:           var(--st-wrapper-border);
    box-shadow:       var(--st-wrapper-shadow);
    font-family:      inherit;
    font-size:        inherit;
    line-height:      1.5;
    box-sizing:       border-box;
}
.st-archive * { box-sizing: border-box; }

/* Archive items: same as .smart-ticker .smart-ticker__item */
.st-archive .smart-ticker__item {
    position:      relative;
    padding:       var(--st-item-pad);
    border-bottom: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background:    var(--st-bg);
    margin:        0;
    border-left:   var(--st-accent-w) solid var(--ticker-color, var(--st-muted));
}
.st-archive .smart-ticker__item:last-child { border-bottom: none; }

.st-archive .smart-ticker__meta {
    display:     flex;
    align-items: baseline;
    gap:         0.45em;
    margin:      0 0 0.2em;
}
.st-archive span.smart-ticker__source {
    font-size:      var(--st-meta-size);
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--ticker-color, var(--st-muted));
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    max-width:      65%;
}
.st-archive time.smart-ticker__time {
    font-size:   var(--st-meta-size);
    color:       var(--st-muted);
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}
.st-archive h3.smart-ticker__title {
    margin:      0 0 0.2em;
    padding:     0;
    font-size:   var(--st-title-size);
    font-weight: var(--st-title-weight);
    line-height: 1.3;
    color:       var(--st-text);
    border:      none;
    background:  transparent;
    box-shadow:  none;
}
.st-archive h3.smart-ticker__title a,
.st-archive h3.smart-ticker__title a:link,
.st-archive h3.smart-ticker__title a:visited {
    color:           var(--st-text) !important;
    text-decoration: none !important;
    background:      transparent !important;
    border:          none !important;
    padding:         0 !important;
    margin:          0 !important;
    font-size:       inherit !important;
    font-weight:     inherit !important;
    box-shadow:      none !important;
    text-shadow:     none !important;
}
.st-archive h3.smart-ticker__title a:hover,
.st-archive h3.smart-ticker__title a:focus {
    color:           var(--ticker-color, var(--st-muted)) !important;
    text-decoration: none !important;
}
.st-archive p.smart-ticker__excerpt {
    margin:      0;
    font-size:   0.875em;
    line-height: 1.5;
    color:       var(--st-muted);
    background:  transparent;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}
.st-archive .smart-ticker__ext {
    font-size:       0.7em;
    opacity:         0.5;
    vertical-align:  super;
    line-height:     1;
    font-style:      normal;
    text-decoration: none !important;
}
.st-archive .smart-ticker__pin {
    position:    absolute;
    top:         0.6em;
    right:       0.6em;
    font-size:   0.8em;
    line-height: 1;
    opacity:     0.65;
}

/* ── Archive skins ── */
.st-archive.st-skin-card {
    --st-wrapper-bg:     #f9fafb;
    --st-wrapper-pad:    12px 16px;
    --st-wrapper-radius: 10px;
    --st-wrapper-border: 1px solid rgba(0,0,0,.08);
    --st-wrapper-shadow: 0 2px 8px rgba(0,0,0,.06);
    --st-radius:         6px;
    --st-item-pad:       0.8em 0.9em 0.8em calc(var(--st-accent-w) + 0.9em);
    --st-border:         transparent;
    --st-bg:             #ffffff;
}
.st-archive.st-skin-card .smart-ticker__item {
    margin-bottom: 6px;
    box-shadow:    0 1px 3px rgba(0,0,0,.07);
}
.st-archive.st-skin-card .smart-ticker__item:last-child {
    margin-bottom: 0;
}

.st-archive.st-skin-minimal {
    --st-accent-w:     2px;
    --st-border:       transparent;
    --st-item-pad:     0.6em 0 0.6em calc(var(--st-accent-w) + 0.65em);
    --st-meta-size:    0.65em;
    --st-title-weight: 600;
}
.st-archive.st-skin-minimal .smart-ticker__item + .smart-ticker__item {
    border-top: 1px solid rgba(0,0,0,.06);
}
.st-archive.st-skin-minimal p.smart-ticker__excerpt { display: none; }

.st-archive.st-skin-bold {
    --st-bg:             #1a1a2e;
    --st-text:           #f0f0f5;
    --st-muted:          #9ca3af;
    --st-border:         rgba(255,255,255,.08);
    --st-wrapper-bg:     #1a1a2e;
    --st-wrapper-pad:    16px 20px;
    --st-wrapper-radius: 10px;
    --st-accent-w:       3px;
    --st-item-pad:       0.85em 0 0.85em calc(var(--st-accent-w) + 0.75em);
}
.st-archive.st-skin-bold h3.smart-ticker__title a,
.st-archive.st-skin-bold h3.smart-ticker__title a:link,
.st-archive.st-skin-bold h3.smart-ticker__title a:visited {
    color: #f0f0f5 !important;
}
.st-archive.st-skin-bold h3.smart-ticker__title a:hover {
    color: var(--ticker-color, #a78bfa) !important;
}
.st-archive.st-skin-bold .st-load-more {
    border-color: rgba(255,255,255,.2);
    color:        #9ca3af;
}

/* Archive filter margin */
.st-archive-filter {
    margin-bottom: 12px;
}

/* Mobile */
@media (max-width: 640px) {
    .st-archive p.smart-ticker__excerpt { display: none; }
    .st-archive .smart-ticker__item     { padding-top: 0.65em; padding-bottom: 0.65em; }
}

/* ── Default-hidden items (non-active filter pills) ──────────── */
.smart-ticker__item--hidden {
    display: none;
}

/* ── Bold skin: load more ────────────────────────────────────── */
.st-skin-bold .st-load-more {
    border-color: rgba(255,255,255,.2);
    color:        #9ca3af;
}

/* ── Empty-category pills (no items currently) ───────────────── */
.st-filter-pill--empty {
    opacity: 0.45;
}
.st-filter-pill--empty.st-filter-pill--active {
    opacity: 0.65;
}

/* ── Filter loading state ────────────────────────────────────── */
.st-filter-pill--loading {
    pointer-events: none;
    opacity:        0.5;
}

/* ── Highlight ───────────────────────────────────────────────── */
.smart-ticker__item--highlight,
.st-archive .smart-ticker__item--highlight {
    background:   var(--st-highlight-bg, #fff3cd) !important;
    border-radius: var(--st-radius, 4px);
}
.smart-ticker__item--highlight .smart-ticker__title a,
.st-archive .smart-ticker__item--highlight .smart-ticker__title a {
    color: var(--st-text, inherit) !important;
}

/* ── Events / Termine ────────────────────────────────────────── */
.smart-ticker__item--event,
.smart-ticker__item--future {
    border-left-style: dashed !important;
}
.smart-ticker__event-badge {
    position:    absolute;
    top:         0.55em;
    right:       0.6em;
    font-size:   0.85em;
    line-height: 1;
    opacity:     0.8;
}
.smart-ticker__countdown {
    display:     inline-block;
    margin-top:  0.3em;
    font-size:   0.72em;
    font-weight: 600;
    color:       var(--ticker-color, var(--st-muted));
    background:  color-mix(in srgb, var(--ticker-color, #6b7280) 10%, transparent);
    padding:     2px 8px;
    border-radius: 10px;
}
.smart-ticker__countdown--past {
    color:   var(--st-muted);
    opacity: 0.6;
}