/* ============================================================
   beamer.info – Design-System
   ============================================================ */

/* ---------- Typografie & Grundlagen ---------- */
h1,h2,h3,h4{line-height:1.25;font-weight:800;color:#0f1220}
h1{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:1rem}
h2{font-size:clamp(1.25rem,2.4vw,1.7rem);margin:1.75rem 0 .75rem}
h3{font-size:1.15rem;margin:1.25rem 0 .5rem}
p{margin-bottom:.85rem}
.page-head{margin-bottom:1.5rem}
.page-head .lead{color:var(--muted);max-width:70ch}
.intro-text{color:var(--muted);margin-bottom:1.5rem}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{font-size:.82rem;color:var(--muted);margin-bottom:1rem;overflow-x:auto;white-space:nowrap}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs .sep{padding:0 .35rem;color:#b8bfcc}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,#0f1220 0%,#2b1c4f 55%,#5a189a 100%);color:#fff;border-radius:16px;padding:clamp(1.5rem,4vw,3rem);display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;margin-bottom:2.5rem;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,183,3,.28),transparent 70%)}
.hero h1{color:#fff;font-size:clamp(1.6rem,3.5vw,2.6rem)}
.hero p{color:#cfd6e4;max-width:56ch}
.hero .hero-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.hero .hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}
.hero-media{text-align:center;aspect-ratio:16/10;max-width:560px;margin:0 auto}
.hero-media img{border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.45);width:100%;height:100%;object-fit:contain;margin:0 auto}
.hero-media .hero-caption{margin-top:.6rem;font-size:.82rem;color:#9aa3b5}
@media(max-width:860px){.hero{grid-template-columns:1fr}.hero-media{display:none}}

/* ---------- Sectionen ---------- */
.section{margin-bottom:2.75rem}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.section-head h2{margin:0}
.section-head .link-all{font-size:.9rem;font-weight:700}

/* ---------- Produkt-Karten ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem}
.card-grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.product-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.product-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,18,32,.12)}
.product-card .thumb{position:relative;background:#fff;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:.75rem}
.product-card .thumb img{width:100%;height:100%;object-fit:contain}
.product-card .badge{position:absolute;top:.6rem;left:.6rem;background:var(--brand);color:#0f1220;font-size:.72rem;font-weight:800;padding:.22rem .55rem;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.product-card .badge.badge-tech{left:auto;right:.6rem;background:#5a189a;color:#fff}
.product-card .badge.badge-deal{left:.6rem;top:auto;bottom:.6rem;background:#166534;color:#fff}
.product-card .body{padding:.9rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.product-card .p-brand{font-size:.76rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.product-card .p-name{font-size:.92rem;font-weight:700;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card .p-name:hover{color:var(--accent)}
.product-card .p-specs{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem}
.spec-chip{font-size:.72rem;background:#eef0f6;border:1px solid var(--line);color:var(--muted);padding:.14rem .5rem;border-radius:999px;font-weight:600}
.product-card .p-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--line)}
.product-card .p-price{font-weight:800;font-size:1.08rem;color:#0f1220}
.product-card .p-price small{font-weight:600;color:var(--muted);font-size:.74rem}
.product-card .p-btn{background:var(--brand);color:#0f1220;font-weight:800;font-size:.85rem;padding:.5rem .9rem;border-radius:8px}
.product-card .p-btn:hover{background:var(--brand2);text-decoration:none}
.product-card .p-save{font-size:.72rem;color:#1e7d32;font-weight:700}

/* ---------- Liste (alternativ) ---------- */
.list-strip{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.list-item{display:flex;gap:1rem;padding:1rem;align-items:center;border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:0}
.list-item img{width:110px;height:82px;object-fit:contain;border-radius:8px;background:#fff}
.list-item .li-body{flex:1;min-width:0}
.list-item .li-name{font-weight:700}
.list-item .li-meta{font-size:.85rem;color:var(--muted)}

/* ---------- Filter ---------- */
.catalog-layout{display:grid;grid-template-columns:250px 1fr;gap:1.5rem;align-items:start}
.filter-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem;position:sticky;top:80px}
.filter-panel h3{font-size:1rem;margin-bottom:.75rem}
.filter-group{margin-bottom:1.1rem}
.filter-group label{display:block;font-size:.85rem;font-weight:700;margin-bottom:.35rem}
.filter-group input[type=number],.filter-group select{width:100%;padding:.5rem;border:1px solid var(--line);border-radius:8px;font-size:.9rem;background:#fff}
.filter-group .check{display:flex;align-items:center;gap:.5rem;font-size:.88rem;padding:.22rem 0}
.filter-group .check input{width:17px;height:17px;accent-color:var(--brand)}
.filter-actions{display:flex;flex-direction:column;gap:.5rem}
.filter-active{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.filter-active .chip{background:#eef0f6;border:1px solid var(--line);font-size:.8rem;padding:.2rem .6rem;border-radius:999px;color:var(--muted)}
.catalog-main{min-width:0}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.result-count{color:var(--muted);font-size:.9rem}
@media(max-width:900px){.catalog-layout{grid-template-columns:1fr}.filter-panel{position:static}}

/* ---------- Pagination ---------- */
.pagination{display:flex;gap:.4rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.pagination a,.pagination span{min-width:38px;padding:.5rem .7rem;text-align:center;background:#fff;border:1px solid var(--line);border-radius:8px;font-weight:600;color:var(--ink)}
.pagination .current{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- Produktdetail ---------- */
.product-hero{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem}
.product-top{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.product-gallery{display:flex;flex-direction:column;gap:1rem}
.product-gallery-img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:#fbfbfd;border-radius:12px}
.product-gallery-img img{border-radius:12px;padding:1rem;width:100%;height:100%;object-fit:contain}
.quick-specs{margin-top:1rem;background:#f7f8fb;border:1px solid var(--line);border-radius:12px;padding:1rem}
.quick-specs h3{font-size:.95rem;margin:0 0 .5rem}
.quick-specs ul{list-style:none}
.quick-specs li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.quick-specs li:last-child{border-bottom:0}
.quick-specs li span{color:var(--muted)}
.btn-amazon{margin-top:.4rem}
.btn-amazon::before{content:"🛒 "}
.product-buy{background:#f7f8fb;border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.product-buy .price-big{font-size:1.9rem;font-weight:800}
.product-buy .price-info{font-size:.82rem;color:var(--muted);margin:.2rem 0 .8rem}
.product-buy .buy-btn{display:block;width:100%;text-align:center;padding:.85rem;font-size:1.05rem;margin-bottom:.6rem}
.product-buy .buy-note{font-size:.78rem;color:var(--muted)}
.product-buy .delivery{font-size:.88rem;margin:.4rem 0;color:var(--muted)}
.price-history{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem}
.price-history canvas{width:100%;max-width:100%}
.product-meta{font-size:.85rem;color:var(--muted);margin-top:1rem}
.spec-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.spec-table th,.spec-table td{padding:.7rem .9rem;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{background:#f7f8fb;width:38%;font-weight:700}
.spec-chip-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
@media(max-width:860px){.product-top{grid-template-columns:1fr}}

/* ---------- Vergleich ---------- */
.compare-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.compare-table th,.compare-table td{padding:.75rem .9rem;border:1px solid var(--line);font-size:.92rem;vertical-align:top}
.compare-table thead th{background:#f7f8fb;min-width:150px}
.compare-table thead th.winner-col{background:#fff7e0}
.compare-table .winner-col{background:#fffdf5}
.compare-table tr:nth-child(even) td{background:#fafbfd}
.compare-verdict{background:linear-gradient(135deg,#0f1220,#2b1c4f);color:#fff;border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1.5rem}
.compare-verdict h3{color:#fff;margin:0 0 .3rem}
.compare-cta{margin-bottom:1rem;font-size:.9rem}
.compare-add{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.compare-add .btn{font-size:.85rem}
.compare-basket{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem}
.compare-basket h2{font-size:1.1rem;margin-bottom:.6rem}
.basket-list{list-style:none}
.basket-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px dashed var(--line)}
.basket-list li:last-child{border-bottom:0}
.basket-list .btn{margin:0}
.compare-basket .btn{margin-right:.4rem}

/* ---------- Finder ---------- */
.finder-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.5rem;max-width:760px}
.finder-wrap fieldset{border:0;margin-bottom:1.4rem}
.finder-wrap legend{font-weight:800;font-size:1.05rem;margin-bottom:.6rem;padding:0}
.finder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.7rem}
.finder-card{border:1px solid var(--line);border-radius:12px;padding:.9rem;cursor:pointer;background:#fff;transition:.15s}
.finder-card:hover{border-color:var(--brand)}
.finder-card input{accent-color:var(--brand);margin-right:.5rem}
.finder-card label{font-weight:600;font-size:.92rem;display:block}
.finder-card small{color:var(--muted);display:block;margin-top:.2rem}

/* ---------- News ---------- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem}
.news-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem;display:flex;flex-direction:column;gap:.5rem;transition:.15s}
.news-card:hover{box-shadow:0 10px 22px rgba(15,18,32,.1)}
.news-card .n-cat{font-size:.74rem;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.news-card h3{font-size:1.02rem;line-height:1.4}
.news-card .n-date{font-size:.8rem;color:var(--muted)}
.news-card .n-excerpt{font-size:.88rem;color:var(--muted)}

/* ---------- Ratgeber ---------- */
.guide-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem;display:block;transition:.15s}
.guide-card:hover{box-shadow:0 10px 22px rgba(15,18,32,.1);text-decoration:none}
.guide-card h3{color:var(--ink);margin-bottom:.3rem}
.guide-card p{color:var(--muted);font-size:.9rem}
.article-body{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(1.2rem,3vw,2.5rem);max-width:860px}
.article-body h1{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.4rem}
.article-body h2{color:#0f1220;border-bottom:1px solid var(--line);padding-bottom:.4rem;margin:1.75rem 0 .75rem}
.article-body h3{margin:1.25rem 0 .5rem}
.article-body table{width:100%;border-collapse:collapse;margin:1rem 0}
.article-body th,.article-body td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}
.article-body th{background:#f7f8fb}
.article-body img{max-width:100%;height:auto;border-radius:10px}
.article-body p{margin-bottom:1rem}
.article-body ul,.article-body ol{padding-left:1.3rem;margin-bottom:1rem}
.article-body a{text-decoration:underline}

/* News-Artikel: einheitliche, saubere Darstellung */
.news-meta{font-size:.82rem;color:var(--muted);margin-bottom:1rem}
.news-featured{margin:1.2rem 0;aspect-ratio:16/9;background:#fbfbfd;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.news-featured img{width:100%;height:100%;object-fit:contain}
.news-content{line-height:1.7}
.news-content img{display:block;margin:1.25rem auto;border-radius:12px;border:1px solid var(--line);max-height:520px;object-fit:contain}
.news-content img[width]{margin-left:auto;margin-right:auto}
.news-content p{font-size:1rem}
.news-content a{text-decoration:underline}
.news-source{margin-top:1.8rem}
.news-source .btn{text-decoration:none}
.news-disclaimer{font-size:.78rem;color:var(--muted);margin-top:.5rem}
@media(max-width:640px){.news-content img{max-height:380px}}

/* ---------- Suchseite ---------- */
.search-box{max-width:640px;margin:1rem auto 2rem}
.search-box form{display:flex;gap:.5rem}
.search-box input{flex:1;padding:.75rem 1rem;border:1px solid var(--line);border-radius:10px;font-size:1rem}

/* ---------- Deals ---------- */
.deal-tag{font-size:.72rem;background:#fff0e0;color:#b26a00;font-weight:800;padding:.2rem .55rem;border-radius:999px}

/* ---------- Sidebar ---------- */
.with-sidebar{display:grid;grid-template-columns:1fr 300px;gap:2rem;align-items:start}
.sidebar{display:flex;flex-direction:column;gap:1.2rem}
.sidebar .widget{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem}
.sidebar .widget h3{font-size:.95rem;margin-bottom:.6rem}
.sidebar .widget ul{list-style:none}
.sidebar .widget li{padding:.25rem 0}
.sidebar .widget a{font-size:.9rem}
@media(max-width:900px){.with-sidebar{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{background:#0f1220;color:#cfd6e4;padding:2.5rem 0 1rem;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.footer-heading{font-weight:800;color:#fff;margin-bottom:.6rem}
.site-footer a{color:#9aa3b5;display:block;padding:.18rem 0;font-size:.9rem}
.site-footer a:hover{color:var(--brand);text-decoration:none}
.footer-brand{font-size:1.2rem;font-weight:700;color:#fff}
.footer-brand strong{color:var(--brand)}
.footer-text{font-size:.9rem;color:#9aa3b5;max-width:46ch}
.footer-affiliate{font-size:.78rem;color:#7b8498;margin-top:.6rem}
.footer-bottom{border-top:1px solid #2a2f45;margin-top:2rem;padding-top:1rem;font-size:.8rem;color:#7b8498}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}

/* ---------- Legal ---------- */
.legal-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(1.2rem,3vw,2.5rem);max-width:860px}
.legal-wrap h2{font-size:1.2rem;margin-top:1.5rem}
.legal-wrap ul{padding-left:1.3rem;margin-bottom:.85rem}

/* ---------- Formulare ---------- */
.form-grid{display:grid;gap:.8rem}
.form-grid label{font-weight:700;font-size:.9rem}
.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:8px;font-size:.95rem;background:#fff}
.form-grid input:focus,.form-grid textarea:focus{outline:2px solid var(--brand)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* ---------- Meldungen ---------- */
.notice{padding:.9rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:.92rem}
.notice.ok{background:#ebfbee;color:#1e7d32;border:1px solid #b7e4c7}
.notice.err{background:#fff0f0;color:#c0392b;border:1px solid #f5c2c2}
.notice.info{background:#eef4ff;color:#1d4ed8;border:1px solid #c7d9ff}

/* ---------- Heatmap / Tag Cloud ---------- */
.heatmap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:2rem;display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:center;line-height:1.2}
.heatmap-tag{font-weight:700;padding:.1rem .2rem;border-radius:6px;transition:transform .15s,color .15s}
.heatmap-tag:hover{transform:scale(1.08);text-decoration:none;background:rgba(255,183,3,.15)}

/* ---------- 404 ---------- */
.error-404{text-align:center;padding:4rem 1rem}
.error-404 h1{font-size:3rem}
.error-404 .btn{margin-top:1rem}