/*
* watchlist.css – Merkliste
* Merklistenübersicht, Karten und Vergleichstabelle.
* Wird nach texterjobs.css geladen.
*/

.watchlist-page {
display: flex;
flex-direction: column;
gap: 22px;
}
.watchlist-page-head,
.watchlist-summary-bar,
.watchlist-empty-state,
.watchlist-compare,
.watchlist-card {
background: #fff;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
box-shadow: 0 2px 10px var(--color-shadow);
}
.watchlist-page-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
padding: 24px 26px;
}
.watchlist-kicker {
margin: 0 0 8px;
color: var(--color-accent);
font-size: var(--font-size-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.watchlist-page-head h1 {
margin: 0 0 10px;
font-size: clamp(1.7rem, 3vw, 2.3rem);
}
.watchlist-lead {
margin: 0;
max-width: 760px;
color: var(--color-text-light);
line-height: 1.7;
}
.watchlist-page-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.watchlist-empty-state {
padding: 42px 28px;
text-align: center;
}
.watchlist-empty-state img {
display: inline-block;
margin-bottom: 14px;
}
.watchlist-empty-state h2 { margin: 0 0 10px; }
.watchlist-empty-state p {
margin: 0 auto 20px;
max-width: 560px;
color: var(--color-text-light);
line-height: 1.7;
}
.watchlist-summary-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 22px;
}
.watchlist-summary-copy { color: var(--color-primary); }
.watchlist-summary-link {
color: var(--color-accent);
font-weight: 700;
}
.watchlist-summary-link.is-disabled {
color: var(--color-text-muted);
pointer-events: none;
text-decoration: none;
}
.watchlist-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.watchlist-card {
position: relative;
overflow: hidden;
}
.watchlist-card-topline {
height: 4px;
background: linear-gradient(90deg, var(--color-accent), #7b5cff, #b349a6);
}
.watchlist-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding: 20px 22px 10px;
}
.watchlist-card-title {
margin: 10px 0 0;
font-size: 1.28rem;
line-height: 1.35;
}
.watchlist-card-remove {
width: 34px;
height: 34px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: #fff;
color: var(--color-text-light);
cursor: pointer;
flex-shrink: 0;
}
.watchlist-card-remove:hover {
border-color: var(--color-error);
color: var(--color-error);
}
.watchlist-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 20px;
padding: 0 22px 18px;
}
.watchlist-card-label {
display: block;
margin-bottom: 4px;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.watchlist-card-value {
color: var(--color-primary);
font-weight: 700;
line-height: 1.45;
}
.watchlist-card-description {
margin: 0;
padding: 0 22px 20px;
color: var(--color-text-light);
line-height: 1.75;
}
.watchlist-card-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 0 22px 22px;
}
.watchlist-compare {
padding: 24px 26px;
}
.watchlist-compare-head h2 { margin: 0 0 8px; }
.watchlist-compare-head p {
margin: 0 0 18px;
color: var(--color-text-light);
line-height: 1.7;
}
.watchlist-compare-table-wrap { overflow-x: auto; }
.watchlist-compare-table {
width: 100%;
min-width: 680px;
border-collapse: collapse;
}
.watchlist-compare-table th,
.watchlist-compare-table td {
padding: 13px 14px;
border-bottom: 1px solid var(--color-border-light);
text-align: left;
vertical-align: top;
}
.watchlist-compare-table thead th {
color: var(--color-primary);
font-size: var(--font-size-sm);
background: #f8fbff;
}
.watchlist-compare-table tbody th {
width: 180px;
color: var(--color-text-light);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: .04em;
}
.watchlist-compare-table tbody td {
color: var(--color-text);
line-height: 1.6;
}
@media (max-width: 900px) {
.watchlist-page-head,
.watchlist-summary-bar {
flex-direction: column;
align-items: stretch;
}

.watchlist-page-actions {
justify-content: flex-start;
}

.watchlist-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.watchlist-card-grid {
grid-template-columns: 1fr;
}

.watchlist-card-actions {
flex-direction: column;
}

.watchlist-card-actions .btn {
width: 100%;
justify-content: center;
}
}