/* Wanderlinse Funkshop – responsive, ohne externe Schriften. */
:root { color-scheme: light; --ink:#162f40; --muted:#526575; --line:#d8e1e7; --paper:#fff; --accent:#ffcf56; --navy:#0d2638; }
* { box-sizing:border-box; }
html { font-size:100%; }
body { margin:0; color:var(--ink); background:#f0f4f7; font-family:Arial,Helvetica,sans-serif; font-size:1rem; line-height:1.55; }
a { color:inherit; }
header { background:var(--navy); color:white; border-bottom:4px solid var(--accent); }
.header-inner { max-width:1392px; padding:27px 32px; margin:auto; display:flex; gap:20px; align-items:center; }
.brand-mark { border:2px solid var(--accent); border-radius:9px; color:var(--accent); font-size:2rem; font-weight:800; width:58px; height:58px; display:grid; place-items:center; flex-shrink:0; }
.brand { font-size:.85rem; font-weight:bold; letter-spacing:.2em; color:var(--accent); margin:0 0 2px; }
h1 { font-size:clamp(1.65rem,3vw,2.2rem); line-height:1.2; margin:0; }
.header-note { margin-left:auto; color:#d3e0e9; font-size:.95rem; }
main { max-width:1392px; padding:30px 32px 40px; margin:auto; }
.intro { display:flex; justify-content:space-between; gap:24px; align-items:center; margin-bottom:19px; }
.eyebrow { font-size:.8rem; letter-spacing:.12em; font-weight:bold; color:#3f667c; margin:0 0 8px; }
.intro h2 { margin:0 0 7px; font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.25; }
.intro p:not(.eyebrow) { margin:0; color:var(--muted); }
.edition { flex-shrink:0; font-size:.875rem; color:var(--muted); text-align:right; }
.edition strong { color:var(--ink); }
.disclosure { margin:0 0 20px; font-size:.875rem; color:var(--muted); }
.catalog { background:var(--paper); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 4px 18px #0d263808; }
.search-bar { margin:0; padding:22px 24px; display:flex; gap:24px; align-items:flex-end; background:white; }
.search-field { flex:1; max-width:720px; }
label { display:block; font-weight:bold; font-size:.9rem; margin-bottom:7px; }
.input-wrap { display:flex; border:1px solid #8d9eab; border-radius:6px; overflow:hidden; }
.input-wrap:focus-within { outline:3px solid #3d829e; outline-offset:3px; }
input { width:100%; min-width:0; font:inherit; padding:12px 14px; border:0; color:var(--ink); background:white; }
input:focus { outline:none; }
input::placeholder { color:#60717d; }
button { font:inherit; font-size:.875rem; padding:10px 13px; border:0; border-left:1px solid var(--line); color:var(--ink); background:#f3f6f8; cursor:pointer; }
button:hover { background:#e4edf2; }
#count { margin:0 0 11px auto; font-size:.875rem; white-space:nowrap; color:var(--muted); }
.price-note { margin:0; padding:14px 24px; background:#f5f8fa; border-top:1px solid var(--line); font-size:.875rem; color:#435b6b; }
table { width:100%; border-collapse:collapse; table-layout:fixed; }
.col-product { width:33%; }.col-description { width:36%; }.col-price { width:12%; }.col-link { width:19%; }
th { padding:14px 20px; background:#e6edf2; text-align:left; font-size:.875rem; }
td { padding:23px 20px; border-top:1px solid var(--line); vertical-align:middle; overflow-wrap:anywhere; }
tbody tr:hover { background:#fbfcfd; }
.product-layout { display:flex; gap:17px; align-items:center; }
.product img { width:90px; height:90px; object-fit:contain; background:white; flex-shrink:0; border:1px solid #edf0f2; border-radius:6px; }
.product h2 { font-size:1rem; line-height:1.35; margin:6px 0; }
.category { font-size:.75rem; font-weight:bold; color:#34667c; }
.source { font-size:.75rem; color:var(--muted); display:block; }
.description { font-size:.95rem; line-height:1.6; }
.price strong { font-size:1.12rem; display:block; line-height:1.4; }
.price span { display:block; font-size:.75rem; color:var(--muted); margin-top:5px; }
.amazon-link { display:block; background:var(--accent); text-align:center; text-decoration:none; padding:12px 10px; border:1px solid #e2b039; border-radius:5px; font-size:.875rem; font-weight:bold; line-height:1.4; }
.amazon-link:hover { background:#ffdb80; }
.link-note { display:block; font-size:.75rem; margin-top:7px; text-align:center; color:var(--muted); }
.no-image { font-size:.75rem; background:#edf2f5; width:90px; padding:12px; flex-shrink:0; text-align:center; }
.notes { max-width:960px; margin:28px 0 0; color:var(--muted); font-size:.875rem; }
.notes h2 { font-size:1rem; margin:0; color:var(--ink); }.notes p { margin:8px 0; }
footer { max-width:1392px; padding:20px 32px 28px; margin:auto; border-top:1px solid var(--line); font-size:.8rem; color:var(--muted); display:flex; justify-content:space-between; gap:16px; }
#empty { text-align:center; padding:40px 20px; }#empty h2 { font-size:1.2rem; }
.noscript { padding:15px 24px; }
[hidden] { display:none !important; }
.visually-hidden,.skip { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip:focus { width:auto; height:auto; clip-path:none; background:white; padding:15px; top:10px; left:10px; z-index:5; }
a:focus-visible,button:focus-visible { outline:3px solid #21708f; outline-offset:3px; }
@media(max-width:1050px) { .product-layout { flex-direction:column; align-items:flex-start; gap:9px; } td,th { padding:16px; }.col-product { width:29%; }.col-description { width:35%; }.col-price { width:14%; }.col-link { width:22%; } }
/* Auf dem Handy wird jede Tabellenzeile zu einer gut lesbaren Karte. */
@media(max-width:700px) {
 .header-inner { padding:22px 18px; gap:13px; }.brand-mark { width:47px; height:47px; font-size:1.6rem; }.header-note { display:none; }
 main { padding:24px 14px; }.intro { display:block; }.edition { display:none; }.intro p:not(.eyebrow) { font-size:.95rem; }
 .search-bar { padding:18px; display:block; }#count { margin:12px 0 0; }.price-note { padding:14px 18px; }
 table,tbody,tr,td { display:block; width:100%; }colgroup { display:none; }thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 tbody tr { padding:21px 18px; border-top:1px solid var(--line); }td { border:0; padding:0; }.product-layout { flex-direction:row; align-items:center; gap:15px; }.product img { width:78px; height:78px; }
 td.description { margin:14px 0; }td.price { margin-bottom:15px; }.price strong { display:inline; }.price span { display:inline; margin-left:9px; }.amazon-link { padding:13px; }
 footer { margin:0 14px; padding:18px 0; display:block; }footer span { display:block; margin-bottom:5px; }
}
@media print { header { color:black; background:white; }.brand { color:black; }.brand-mark,.header-note,.search-bar,.action,thead th:last-child { display:none!important; }main { padding:12px; }.catalog { border:0; box-shadow:none; }table { table-layout:auto; }.col-link { width:0; }tr { break-inside:avoid; }.description { font-size:10pt; } }

/* Sortierbare Spaltenköpfe: echte Buttons für Maus und Tastatur. */
.sort-button {
  display:flex; align-items:center; gap:8px; width:100%; min-height:44px;
  padding:7px 0; border:0; background:transparent; text-align:left;
  color:var(--ink); font:inherit; font-weight:bold; line-height:1.4;
}
.sort-button:hover { background:#d5e2ea; }
.sort-indicator { flex-shrink:0; color:#315a70; }
th[aria-sort] { background:#d4e3ec; }
.mobile-sort { display:none; padding:16px 18px; border-top:1px solid var(--line); }
.mobile-sort select {
  width:100%; min-height:46px; padding:10px; border:1px solid #8d9eab;
  border-radius:5px; font:inherit; color:var(--ink); background:white;
}
.mobile-sort select:focus-visible { outline:3px solid #21708f; outline-offset:3px; }
@media(max-width:700px) { .mobile-sort:not([hidden]) { display:block; } }
@media print { .mobile-sort { display:none !important; } }