/* ===== InfoWeb – Styles ===== */

:root {
    --primary:       #2563eb;
    --primary-hover: #1d4ed8;
    --bg:            #f1f5f9;
    --card-bg:       #ffffff;
    --text:          #1e293b;
    --text-light:    #64748b;
    --border:        #e2e8f0;
    --danger:        #ef4444;
    --shadow:        0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --shadow-lg:     0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --radius:        12px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* ===== Header ===== */
.header {
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: white;
    padding: 2rem 1.5rem;
    text-align: center;
}
.header h1   { font-size:1.8rem; font-weight:700; margin-bottom:.3rem; }
.header p    { opacity:.85; font-size:.95rem; }

/* ===== Container ===== */
.container { max-width:1200px; margin:0 auto; padding:1.5rem; }

/* ===== Leseliste – kleine Kacheln ===== */
#savedGrid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
}
#savedGrid .result-card { font-size: .88rem; }
#savedGrid .card-thumb  { height: 100px; }
#savedGrid .card-body   { padding: .7rem 1rem .5rem; }
#savedGrid .card-title  { font-size: .88rem; -webkit-line-clamp: 2; }
#savedGrid .card-snippet{ display: none; }  /* Snippet in Leseliste ausblenden */
#savedGrid .card-date   { font-size: .68rem; }
#savedGrid .card-actions{ padding: .4rem .9rem .6rem; }
#savedGrid .btn-unsave  { font-size: .72rem; padding: .25rem .5rem; }

/* ===== Leseliste ===== */
.saved-panel {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.saved-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.25rem;
    font-weight: 600;
    font-size: .95rem;
    border-bottom: 1px solid var(--border);
}
.saved-body { padding: 1rem 1.25rem; }
.saved-body.collapsed { display: none; }

.btn-toggle {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .3rem .7rem;
    font-size: .8rem;
    cursor: pointer;
    color: var(--text-light);
    transition: all .2s;
}
.btn-toggle:hover { background: var(--bg); }

/* ===== Suchbereich ===== */
.search-section {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}
.search-bar { display:flex; gap:.75rem; }
.search-bar input {
    flex:1; padding:.75rem 1rem;
    border:2px solid var(--border); border-radius:8px;
    font-size:1rem; outline:none; transition:border-color .2s;
}
.search-bar input:focus { border-color:var(--primary); }

/* ===== Buttons ===== */
.btn {
    padding:.75rem 1.5rem; border:none; border-radius:8px;
    font-size:.95rem; font-weight:600; cursor:pointer;
    transition:all .2s; display:inline-flex; align-items:center; gap:.4rem;
}
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-hover); }
.btn-outline {
    background:transparent; border:2px solid var(--primary);
    color:var(--primary); padding:.5rem 1rem; font-size:.85rem;
}
.btn-outline:hover { background:var(--primary); color:white; }

/* ===== Themen ===== */
.topics-section {
    background:var(--card-bg); border-radius:var(--radius);
    padding:1.25rem 1.5rem; box-shadow:var(--shadow); margin-bottom:1.5rem;
}
.topics-section h3 {
    font-size:.9rem; color:var(--text-light);
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:.75rem;
}
.topics-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.empty-hint  { color:var(--text-light); font-size:.85rem; }

.topic-tag {
    display:inline-flex; align-items:center; gap:.4rem;
    background:#eff6ff; color:var(--primary);
    padding:.4rem .75rem; border-radius:20px;
    font-size:.85rem; font-weight:500; cursor:pointer;
    border:1px solid #bfdbfe; transition:all .2s;
}
.topic-tag:hover { background:var(--primary); color:white; }
.topic-tag .delete-topic {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%;
    background:rgba(0,0,0,.1); font-size:.7rem;
    cursor:pointer; border:none; color:inherit;
}
.topic-tag:hover .delete-topic { background:rgba(255,255,255,.3); }

.add-topic-bar { display:flex; gap:.5rem; margin-top:.75rem; }
.add-topic-bar input {
    flex:1; padding:.5rem .75rem;
    border:2px solid var(--border); border-radius:8px;
    font-size:.9rem; outline:none;
}
.add-topic-bar input:focus { border-color:var(--primary); }

/* ===== Ergebnis-Info ===== */
.results-info {
    margin-bottom:1rem; color:var(--text-light); font-size:.9rem;
}

/* ===== Kachel-Grid ===== */
.results-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    gap:1.25rem;
}

/* ===== Kachel ===== */
.result-card {
    background:var(--card-bg); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden;
    transition:transform .2s, box-shadow .2s;
    display:flex; flex-direction:column;
}
.result-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.result-card > a {
    text-decoration:none; color:inherit;
    display:flex; flex-direction:column; flex:1;
}

/* Bildbereich / Farbbalken */
.card-thumb {
    width:100%; height:180px;
    border-radius:var(--radius) var(--radius) 0 0;
    overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    position:relative;
}
.card-thumb img {
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity .4s;
}
.card-thumb.has-img img { opacity:1; }

/* Karten-Inhalt */
.card-body {
    padding:1rem 1.25rem 0.75rem; flex:1;
    display:flex; flex-direction:column;
}
.card-source {
    font-size:.75rem; color:var(--text-light);
    margin-bottom:.4rem; display:flex; align-items:center;
}
.card-title {
    font-size:1rem; font-weight:600; line-height:1.4;
    margin-bottom:.4rem; color:var(--text);
    display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
}
.card-snippet {
    font-size:.82rem; color:var(--text-light); line-height:1.5; flex:1;
    display:-webkit-box; -webkit-line-clamp:3;
    -webkit-box-orient:vertical; overflow:hidden;
}
.card-date { margin-top:.4rem; font-size:.72rem; color:var(--text-light); }

/* Speichern-Button */
.card-actions {
    padding:.6rem 1.25rem .9rem;
    border-top:1px solid var(--border);
    margin-top:.5rem;
}
.btn-save, .btn-unsave {
    background:none; border:1px solid var(--border);
    border-radius:6px; padding:.35rem .75rem;
    font-size:.78rem; cursor:pointer; color:var(--text-light);
    transition:all .2s; width:100%;
}
.btn-save:hover   { background:#eff6ff; border-color:var(--primary); color:var(--primary); }
.btn-unsave:hover { background:#fef2f2; border-color:var(--danger);  color:var(--danger); }
.btn-save:disabled, .btn-unsave:disabled { opacity:.5; cursor:default; }

/* ===== Loading / States ===== */
.loading { text-align:center; padding:3rem; color:var(--text-light); }
.spinner {
    width:40px; height:40px;
    border:4px solid var(--border); border-top-color:var(--primary);
    border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 1rem;
}
@keyframes spin { to { transform:rotate(360deg); } }

.empty-state { text-align:center; padding:3rem 2rem; color:var(--text-light); }
.empty-state .icon { font-size:2.5rem; margin-bottom:.75rem; opacity:.5; }

.error-message {
    background:#fef2f2; border:1px solid #fecaca;
    color:var(--danger); padding:1rem 1.25rem;
    border-radius:8px; margin-bottom:1rem;
}

/* ===== Toast ===== */
.toast {
    position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
    padding:.75rem 1.25rem; border-radius:8px;
    font-size:.88rem; font-weight:500; color:white;
    opacity:0; transform:translateY(12px);
    transition:opacity .3s, transform .3s;
    pointer-events:none;
}
.toast.show   { opacity:1; transform:translateY(0); }
.toast-ok     { background:#22c55e; }
.toast-warn   { background:#f59e0b; }
.toast-err    { background:var(--danger); }

/* ===== Homepage-Such-Button ===== */
.btn-web {
    background: #059669;
    color: white;
    padding: .75rem 1.5rem;
    border: none; border-radius: 8px;
    font-size: .95rem; font-weight: 600;
    cursor: pointer; transition: all .2s;
    display: inline-flex; align-items: center; gap: .4rem;
    white-space: nowrap;
}
.btn-web:hover { background: #047857; }

/* ===== Homepage-Kachel-Grid ===== */
.web-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: .5rem;
}

/* ===== Homepage-Kachel ===== */
.web-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.web-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.web-card > a {
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column; flex: 1;
}

/* Kopfbereich mit Favicon + Domain */
.web-card-header {
    background: linear-gradient(135deg, #059669, #0d9488);
    padding: 1.5rem 1.25rem 1rem;
    display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: .6rem;
}
.web-favicon-lg {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: rgba(255,255,255,.15);
    object-fit: contain;
}
.web-favicon-fallback {
    font-size: 2.5rem;
    align-items: center; justify-content: center;
}
.web-domain {
    color: white; font-size: .9rem; font-weight: 700;
    word-break: break-all; opacity: .95;
}

/* Inhalt */
.web-card-body {
    padding: .9rem 1.1rem .5rem; flex: 1;
    display: flex; flex-direction: column; gap: .35rem;
}
.web-title {
    font-size: .95rem; font-weight: 600; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.4;
}
.web-snippet {
    font-size: .8rem; color: var(--text-light); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* Footer mit Link-Button */
.web-card-footer {
    padding: .65rem 1.1rem .85rem;
    border-top: 1px solid var(--border);
    margin-top: .5rem;
}
.btn-open-web {
    display: block; text-align: center;
    background: #f0fdf4; color: #059669;
    border: 1px solid #bbf7d0; border-radius: 6px;
    padding: .4rem .75rem; font-size: .8rem;
    font-weight: 600; text-decoration: none;
    transition: all .2s;
}
.btn-open-web:hover { background: #059669; color: white; border-color: #059669; }

/* ===== Responsive ===== */
@media (max-width:640px) {
    .header h1             { font-size:1.4rem; }
    .search-bar            { flex-direction:column; }
    .results-grid          { grid-template-columns:1fr; }
    .card-thumb            { height:140px; }
}