/* TD Karussell – Frontend Styles */
.td-carousel-wrap {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #fff;
    padding: 2.5rem 0;
    box-sizing: border-box;
}
.td-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 0 0.25rem;
}
.td-carousel-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    margin-right: 16px;
}
.td-carousel-bar {
    flex: 1;
    height: 3px;
    background: #1B2A6B;
}
.td-carousel-title {
    font-size: 15px;
    font-weight: 700;
    color: #1B2A6B;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.td-carousel-nav {
    display: flex;
    gap: 8px;
}
.td-carousel-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #1B2A6B;
    background: transparent;
    color: #1B2A6B;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s;
    line-height: 1;
    padding: 0;
}
.td-carousel-btn:hover {
    background: #1B2A6B;
    color: #fff;
}
.td-carousel-viewport {
    overflow: hidden;
    width: 100%;
}
.td-carousel-track {
    display: flex;
    gap: 16px;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.td-carousel-slide {
    flex: 0 0 calc(25% - 12px);
    min-width: 0;
    box-sizing: border-box;
}
@media (max-width: 1024px) {
    .td-carousel-slide { flex: 0 0 calc(33.333% - 11px); }
}
@media (max-width: 768px) {
    .td-carousel-slide { flex: 0 0 calc(50% - 8px); }
}
@media (max-width: 480px) {
    .td-carousel-slide { flex: 0 0 100%; }
}

/* Karte */
.td-card {
    background: #fff;
    border: 1px solid #e3ddd5;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
.td-card-stripe {
    height: 5px;
    width: 100%;
    flex-shrink: 0;
}
.td-stripe-linkedin { background: #0a66c2; }
.td-stripe-substack { background: #ff6719; }
.td-stripe-other    { background: #888; }

.td-card-embed {
    padding: 12px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.td-card-embed iframe {
    width: 100% !important;
    max-width: 100%;
    border: none;
    display: block;
    height: 400px;
}

/* Footer */
.td-card-footer {
    padding: 8px 12px;
    border-top: 1px solid #f0ebe3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.td-platform-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}
.td-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.td-dot-linkedin { background: #0a66c2; }
.td-dot-substack { background: #ff6719; }
.td-dot-other    { background: #888; }
.td-pl-linkedin  { color: #0a66c2; }
.td-pl-substack  { color: #ff6719; }
.td-pl-other     { color: #888; }
.td-read-more {
    font-size: 11px;
    font-weight: 700;
    color: #C41E3A;
    text-decoration: none;
}
.td-read-more:hover { text-decoration: underline; }

/* Substack-Karte */
.td-substack-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 4px;
    flex: 1;
}
.td-substack-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #ff6719;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
}
.td-substack-title {
    font-size: 14px;
    font-weight: 700;
    color: #1B2A6B;
    line-height: 1.4;
}
.td-substack-link {
    font-size: 12px;
    font-weight: 700;
    color: #ff6719;
    text-decoration: none;
}
.td-substack-link:hover { text-decoration: underline; }

/* Fallback-Karte */
.td-link-fallback {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 4px;
    flex: 1;
}
.td-link-fallback-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #1B2A6B;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.td-link-fallback-title {
    font-size: 13px;
    font-weight: 700;
    color: #1B2A6B;
    line-height: 1.4;
    word-break: break-word;
}

/* Dots */
.td-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 1.25rem;
}
.td-dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d5cec5;
    border: none;
    cursor: pointer;
    transition: background .2s;
    padding: 0;
}
.td-dot-indicator.active { background: #1B2A6B; }

/* Auto-Fortschrittsbalken */
.td-carousel-progress {
    height: 2px;
    background: #e8e4dc;
    margin-top: 12px;
    border-radius: 1px;
    overflow: hidden;
}
.td-progress-bar {
    height: 100%;
    background: #C41E3A;
    width: 0;
    animation: td-progress linear infinite;
}
@keyframes td-progress {
    from { width: 0; }
    to   { width: 100%; }
}