/* Planet FOSS – öffentliche Seite. Grundlage: layout-entwurf.html (Phase 4 übernommen). */
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk-regular.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk-bold.woff2) format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-regular.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-bold.woff2) format("woff2");font-weight:600 800;font-display:swap}

:root{
  --bg:#F5F6FB; --surface:#ffffff; --surface-2:#ECEEF6; --ink:#0B1026; --muted:#586079; --line:#DCE0EE;
  --accent:#4527D9; --accent-soft:#ECE8FF; --aurora:#0F9F8F; --star:#FFC94D; --star-ink:#9A6A00; --live:#0F9F8F; --mars:#E8553A;
  --head:#070A1A; --head-ink:#F5F6FB;
  --display: "Space Grotesk","LUI Space Grotesk",system-ui,sans-serif;
  --sans: "Inter","InterVariable",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --mono: "JetBrains Mono","Fira Code",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1026; --surface:#141A3A; --surface-2:#1C2449; --ink:#F5F6FB; --muted:#8F97B5; --line:#232B55;
    --accent:#B3A4FF; --accent-soft:#2A2363; --aurora:#2DD4BF; --star-ink:#FFC94D; --live:#2DD4BF; --mars:#FF6B4A; --head:#070A1A;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1026; --surface:#141A3A; --surface-2:#1C2449; --ink:#F5F6FB; --muted:#8F97B5; --line:#232B55;
  --accent:#B3A4FF; --accent-soft:#2A2363; --aurora:#2DD4BF; --star-ink:#FFC94D; --live:#2DD4BF; --mars:#FF6B4A; --head:#070A1A;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 16px}
h2,h3{margin:0;letter-spacing:-.015em;font-weight:700;font-family:var(--display)}

/* ---------- Kopf ---------- */
header.site{position:sticky;top:0;z-index:10;background:var(--head);color:var(--head-ink);background-image:radial-gradient(1px 1px at 8% 30%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 23% 70%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 41% 22%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 63% 62%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 78% 28%,#fff7 50%,transparent 51%),radial-gradient(1.5px 1.5px at 92% 66%,#fff6 50%,transparent 51%),radial-gradient(600px 120px at 85% 0%,#7C5CFF40,transparent 70%),radial-gradient(500px 120px at 10% 100%,#2DD4BF22,transparent 70%)}
.bar{display:flex;align-items:center;gap:18px;height:60px}
.logo{display:flex;align-items:center;gap:10px;font:500 22px var(--display);letter-spacing:-.02em;white-space:nowrap;color:#F5F6FB}
.logo img{height:30px;width:auto;display:block}
.logo b{font-weight:700;background:linear-gradient(90deg,#B3A4FF,#2DD4BF);-webkit-background-clip:text;background-clip:text;color:transparent}
nav.rub{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;mask-image:linear-gradient(90deg,#000 92%,transparent)}
nav.rub a{white-space:nowrap;padding:7px 11px;border-radius:8px;font-size:14px;font-weight:600;color:#b9c0cf}
nav.rub a:hover{background:#ffffff14;color:#fff}
nav.rub a.on{color:#fff;background:#ffffff1f}
/* Priority+ (site.js): passt nicht alles in die Zeile, steht der Rest unter „Mehr“ – als zweite Zeile unter dem Kopf */
nav.rub.fit{overflow:visible;mask-image:none;min-width:0}
.rub-more{flex:none;display:flex}
.rub-more[hidden]{display:none}
.rub-more button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 11px;border-radius:8px;font:600 14px/1.5 var(--sans);color:#b9c0cf;background:none;border:0;cursor:pointer}
.rub-more button i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.rub-more button[aria-expanded="true"] i{transform:translateY(1px) rotate(-135deg)}
.rub-more button:hover,.rub-more button[aria-expanded="true"]{background:#ffffff14;color:#fff}
.rub-more button.on{color:#fff;background:#ffffff1f}
.rub-row{position:absolute;left:0;right:0;top:100%;z-index:9;background:#0d1230f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff1f;box-shadow:0 12px 28px #0006;animation:rubrow .14s ease-out}
.rub-row[hidden]{display:none}
.rub-row-links{display:flex;flex-wrap:wrap;gap:2px;padding:8px 0 8px var(--rub-x,0)}
.rub-row-links a{white-space:nowrap;padding:7px 11px;border-radius:8px;font-size:14px;font-weight:600;color:#b9c0cf}
.rub-row-links a:hover{background:#ffffff14;color:#fff}
.rub-row-links a.on{color:#fff;background:#ffffff1f}
@keyframes rubrow{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rub-row{animation:none}.rub-more button i{transition:none}}
@media (max-width:760px){.rub-row-links{padding-left:0}}
.tools{display:flex;align-items:center;gap:8px}
.seg{display:inline-flex;background:#ffffff14;border-radius:9px;padding:3px}
.seg button{border:0;background:transparent;color:#b9c0cf;padding:5px 10px;border-radius:7px;font:700 12px var(--mono);cursor:pointer}
.seg button.on{background:#fff;color:#0d0f14}
.ibtn{width:36px;height:36px;border-radius:9px;border:0;background:#ffffff14;color:#fff;display:grid;place-items:center;cursor:pointer}
.ibtn svg{width:18px;height:18px}

.trend{border-bottom:1px solid var(--line);background:var(--surface)}
.trend .wrap{display:flex;align-items:center;gap:10px;height:44px;overflow-x:auto;scrollbar-width:none;font-size:13px}
.live{display:inline-flex;align-items:center;gap:6px;font:700 11px var(--mono);text-transform:uppercase;color:var(--live);white-space:nowrap}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px color-mix(in srgb,var(--live) 25%,transparent)}
.trend a{white-space:nowrap;padding:4px 10px;border-radius:999px;background:var(--surface-2);font-weight:600}
.trend a:hover{background:var(--accent-soft);color:var(--accent)}
.trend .stat{margin-left:auto;color:var(--muted);font:12px var(--mono);white-space:nowrap}

/* ---------- Bausteine ---------- */
.img{position:relative;overflow:hidden;background:var(--g,#888);border-radius:var(--r)}
.fallback{display:grid;place-items:center;color:#fff;font:800 26px var(--sans);letter-spacing:-.02em;text-align:center}
.fallback span{font:600 11px var(--mono);opacity:.7;display:block;margin-top:4px}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:12px var(--mono);color:var(--muted)}
.src{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--sans);color:var(--ink)}
.fav{width:18px;height:18px;border-radius:5px;background:var(--c);display:inline-block;flex:none}
.lng{font:700 10px var(--mono);padding:1px 5px;border-radius:4px;border:1px solid currentColor;opacity:.8}
.cat{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.ex{color:var(--muted);margin:0}
.also{font-size:12.5px;color:var(--muted);margin:0}
.also b{color:var(--ink);font-weight:600}

.star{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;border:0;
  background:rgba(10,12,18,.6);color:#fff;font:700 12px var(--mono);backdrop-filter:blur(6px);cursor:pointer;transition:transform .12s}
.star:hover{transform:scale(1.06)}
.star.on{background:var(--star);color:#1a1300}
.hot{display:inline-flex;align-items:center;gap:4px;background:var(--star);color:#1a1300;padding:2px 8px;border-radius:999px;font:700 11px var(--mono)}

.card{position:relative;display:flex;flex-direction:column;gap:10px}
.card h3{transition:color .15s}
.card:hover h3{color:var(--accent)}
.card .img{transition:transform .25s}
.card:hover .img{transform:translateY(-2px)}

/* ---------- Supernova ---------- */
.nova{position:relative;margin:18px 0 0;border-radius:20px;padding:22px;color:#F5F6FB;overflow:hidden;
  background:radial-gradient(420px 260px at 8% 50%,#FFC94D55,transparent 70%),radial-gradient(600px 300px at 30% 0%,#FF6B4A44,transparent 70%),radial-gradient(700px 360px at 100% 100%,#7C5CFF66,transparent 70%),#0B1026;
  border:1px solid #FFC94D55;box-shadow:0 0 0 1px #0002,0 18px 50px -20px #FF6B4A66}
.nova::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 60% 20%,#fff7 50%,transparent 51%),radial-gradient(1.5px 1.5px at 85% 70%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 45% 80%,#fff6 50%,transparent 51%);pointer-events:none}
.nova-head{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-bottom:16px}
.burst{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:#1a1300;background:linear-gradient(90deg,#FFE08A,#FFC94D 40%,#FF8A4A);padding:6px 12px;border-radius:999px;box-shadow:0 0 24px #FFC94D88}
.burst::before{content:"✦";font-size:14px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.35) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.burst::before{animation:none}}
.nova h2{font:700 clamp(24px,3vw,34px)/1.1 var(--display);margin:0}
.nova .facts{font:12.5px var(--mono);color:#C9CEE3;display:flex;gap:14px;flex-wrap:wrap}
.nova .facts b{color:#fff}
.spark{display:flex;align-items:end;gap:3px;height:34px;margin-left:auto}
.spark i{width:6px;border-radius:2px;background:linear-gradient(#FFC94D,#FF6B4A);opacity:.9}
.nova-row{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,250px);gap:14px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.nk{position:relative;display:flex;flex-direction:column;gap:8px;background:#141A3Acc;border:1px solid #2B3566;border-radius:14px;padding:10px;backdrop-filter:blur(6px)}
.nk:hover h3{color:#FFC94D}
.nk .img{aspect-ratio:16/9;border-radius:10px}
.nk h3{font-size:15px;line-height:1.25;color:#F5F6FB}
.nk .meta{color:#AEB5CF}.nk .src{color:#fff}
.kind{font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#FFC94D}
.kind.off{color:#2DD4BF}
.trend a.hotchip{background:linear-gradient(90deg,#FFC94D,#FF8A4A);color:#1a1300}
.trend a.hotchip::before{content:"✦ "}
.badge-nova{display:inline-flex;align-items:center;gap:4px;font:700 11px var(--mono);color:#1a1300;background:linear-gradient(90deg,#FFE08A,#FF8A4A);padding:2px 8px;border-radius:999px}
/* ---------- Bento-Aufmacher ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding:22px 0 8px}
.hero{grid-column:span 7;min-height:520px}
.hero .img{position:absolute;inset:0}
.hero .shade{position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(180deg,transparent 30%,rgba(5,6,10,.88) 100%)}
.hero .txt{position:absolute;left:0;right:0;bottom:0;padding:26px;color:#fff;display:flex;flex-direction:column;gap:10px}
.hero h2{font-size:clamp(26px,3.2vw,42px);line-height:1.08;text-shadow:0 1px 14px #000b}
.hero .ex,.hero .meta,.hero .also{color:#d6dbe6}
.hero .src,.hero .also b{color:#fff}
.hero .cat{color:#c7c4ff}
.stack{grid-column:span 5;display:flex;flex-direction:column;gap:12px}
.sub{display:grid;grid-template-columns:150px 1fr;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.sub .img{aspect-ratio:4/3;align-self:start}
.sub .star{top:6px;left:6px;padding:3px 7px;font-size:11px}
.sub .t{display:flex;flex-direction:column;gap:5px;justify-content:center;min-width:0}
.sub .ex{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sub h3{font-size:17px;line-height:1.22}

/* ---------- Hauptteil ---------- */
.main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;padding:26px 0}
.sec{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.sec h2{font-size:24px;display:flex;align-items:center;gap:10px}
.sec h2::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--accent)}
.sec .view{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:3px}
.sec .view button{border:0;background:transparent;padding:5px 10px;border-radius:7px;font:600 12px var(--sans);color:var(--muted);cursor:pointer}
.sec .view button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px #0002}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px}
.grid .img{aspect-ratio:16/9}
.grid h3{font-size:18px;line-height:1.25}
.grid .ex{font-size:14.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

aside .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:20px}
aside .panel h2{font-size:17px;display:flex;align-items:center;gap:8px;margin-bottom:4px}
aside .panel .hint{font:11.5px var(--mono);color:var(--muted);margin:0 0 8px}
aside ol{list-style:none;margin:0;padding:0}
aside li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
aside li:first-child{border-top:0}
aside li a{font-weight:700;font-size:15px;line-height:1.3;display:block}
aside li a:hover{color:var(--accent)}
aside li small{font:11.5px var(--mono);color:var(--muted)}
.rank{font:800 20px var(--mono);color:var(--muted);min-width:22px;line-height:1.1}
.cnt{font:700 12px var(--mono);color:var(--star-ink);background:color-mix(in srgb,var(--star) 20%,transparent);border-radius:6px;padding:3px 6px;height:max-content}
.community{background:linear-gradient(160deg,color-mix(in srgb,var(--star) 16%,var(--surface)),var(--surface) 55%)!important}
.more{display:inline-block;margin-top:8px;font:700 12.5px var(--sans);color:var(--accent)}

/* ---------- Rubrik-Karussell ---------- */
.band{padding:10px 0 34px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 18px) / 4);justify-content:start;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.rail .card{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 10px 14px}
.rail .img{aspect-ratio:16/10;border-radius:10px}
.rail h3{font-size:16px;line-height:1.25;padding:0 4px}
.rail .meta{padding:0 4px}


footer{background:var(--head);color:#8F97B5;margin-top:10px;background-image:radial-gradient(1px 1px at 8% 30%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 23% 70%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 41% 22%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 63% 62%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 78% 28%,#fff7 50%,transparent 51%),radial-gradient(1.5px 1.5px at 92% 66%,#fff6 50%,transparent 51%),radial-gradient(600px 120px at 85% 0%,#7C5CFF40,transparent 70%),radial-gradient(500px 120px at 10% 100%,#2DD4BF22,transparent 70%)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 16px 40px;font-size:13px}
footer a{color:#e6e9f0}

@media (max-width:1080px){
  .hero{grid-column:1/-1;min-height:420px}
  .stack{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  .toplist{grid-column:1/-1}
  .main{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* Rubriken als zweite, wischbare Zeile (statt ausgeblendet) */
  .bar{gap:4px 10px;flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:4px}
  nav.rub{order:3;flex:1 0 100%}
  .bar .tools{margin-left:auto}
  nav.rub a{padding:9px 11px}
  /* Aufmacher: Text steht weiter oben im Bild – früher abdunkeln */
  .hero .shade{background:linear-gradient(180deg,rgba(5,6,10,.2) 0%,rgba(5,6,10,.9) 50%)}
  .stack{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .ad-leader{height:100px}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
  .sub{grid-template-columns:110px 1fr}
  .hero{min-height:380px}
  .trend .stat{display:none}
  .seg a{padding:5px 7px}
  .logo img{width:120px;height:auto}
}

/* ---------- Ergänzungen für die echte Seite ---------- */
.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.grid .img,.rail .img,.sub .img,.nk .img{background:var(--surface-2)}
.fallback{background:linear-gradient(135deg,var(--c,#7C5CFF),#0B1026)!important}
.fallback>div{position:relative;z-index:1;padding:0 12px}
.card h3 a,.nk h3 a{color:inherit;text-decoration:none}
.card h3 a::after,.nk h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.nk .src a{position:relative;z-index:3}
.card .src a,.card .also a,.card .cat a{position:relative;z-index:3}
.card .star{z-index:4}
.rail .card>.star{top:20px;left:20px}
.sub>.star{top:16px;left:16px}
.hero .shade{pointer-events:none}
.hero h2 a{color:inherit;text-decoration:none}
.hero h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.hero .txt .src a,.hero .txt .also a,.hero .txt .cat a{position:relative;z-index:3}
.card .cat a,.src a{color:inherit;text-decoration:none}
.card .cat a:hover,.src a:hover{text-decoration:underline}
.also a{color:var(--ink);font-weight:600;text-decoration:none}
.also a:hover{color:var(--accent)}
.hero .also a{color:#fff}
.fav{object-fit:cover}
img.fav{background:#fff1}
.star{pointer-events:auto}
.star[aria-pressed="true"]{background:var(--star);color:#1a1300}
.star.busy{opacity:.7;cursor:progress}
.testbar{background:#FFC94D;color:#1a1300;text-align:center;font:600 13px var(--sans);padding:6px 12px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:100;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lhead{padding:26px 0 8px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lhead h1{font:700 clamp(26px,3.4vw,40px)/1.1 var(--display);margin:0;letter-spacing:-.02em}
.lhead p{margin:6px 0 0;color:var(--muted)}
.lhead .rss{font:700 12px var(--mono);color:var(--accent);text-decoration:none}
.listgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px;padding:14px 0 30px}
.listgrid .img{aspect-ratio:16/9}
.listgrid h3{font-size:17px;line-height:1.25}
.listgrid .ex{font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pager{display:flex;justify-content:space-between;gap:12px;padding:6px 0 34px}
.pager a{font:700 14px var(--sans);color:var(--accent);text-decoration:none}
.empty{color:var(--muted);padding:40px 0;text-align:center;font-size:18px}
.searchform{display:flex;gap:8px;margin:12px 0 4px;max-width:640px}
.searchform input{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:11px 14px;font:inherit}
.searchform button{border:0;border-radius:10px;padding:0 18px;background:var(--accent);color:#fff;font:700 14px var(--sans);cursor:pointer}
.sources{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:10px 0 34px}
.sources a{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;color:var(--ink)}
.sources a:hover{border-color:var(--accent)}
.sources img,.sources i{width:36px;height:36px;border-radius:9px;flex:none;background:var(--c)}
.sources small{display:block;color:var(--muted);font:12px var(--mono)}
.searchbox{display:none}
.searchbox.open{display:block;background:var(--head);padding:0 0 12px}
.searchbox form{display:flex;gap:8px}
.searchbox input{flex:1;border:0;border-radius:9px;padding:10px 12px;font:inherit}
.prose{max-width:760px;padding:10px 0 40px;line-height:1.65}
.prose h2{font:700 22px var(--display);margin:28px 0 8px}
footer nav{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:1080px){.listgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.listgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.listgrid{grid-template-columns:1fr}}
.seg a{color:#b9c0cf;padding:5px 10px;border-radius:7px;font:700 12px var(--mono)}
.seg a.on{background:#fff;color:#0d0f14}

/* Bilddarstellung je Quelle */
.img.fit{background:#0B1026}
.img.fit::before{content:"";position:absolute;inset:-24px;background:var(--bgimg) center/cover;filter:blur(20px) saturate(1.3) brightness(.55)}
.img.fit img{object-fit:contain;padding:6px}
.img.motif{background:radial-gradient(120% 90% at 85% 10%,color-mix(in srgb,var(--c) 85%,#fff 15%) 0,var(--c) 35%,#0B1026 100%);display:grid;place-items:center}
.img.motif::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 18% 24%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 72% 64%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 46% 82%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 88% 30%,#fff7 50%,transparent 51%);pointer-events:none}
.m-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;text-align:center;padding:0 12px}
.img .m-logo{position:static;inset:auto;width:44px;height:44px;object-fit:cover;border-radius:11px;box-shadow:0 4px 18px #0006;background:#fff;padding:0}
.m-src{font:700 17px var(--display);letter-spacing:-.01em;text-shadow:0 1px 8px #0006}
.m-cat{font:700 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;opacity:.85}
.hero .img .m-logo{width:72px;height:72px;border-radius:16px}.hero .m-src{font-size:26px}

/* Weitere Top-Meldungen neben dem Aufmacher */
.toplist{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.toplist h2{font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 4px}
.toplist ol{list-style:none;margin:0;padding:0}
.toplist li{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.toplist li:first-child{border-top:0}
.toplist img,.toplist i{width:64px;height:44px;object-fit:cover;border-radius:7px;display:block;background:linear-gradient(135deg,var(--c,#7C5CFF),#0B1026)}
.toplist a{font:700 14.5px/1.28 var(--display);color:var(--ink);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.toplist a:hover{color:var(--accent)}
.toplist small{display:block;font:11.5px var(--mono);color:var(--muted);margin-top:2px}

/* Karussell: feste Kartenbreite – wenige Karten bleiben links in normaler Größe */
@media (max-width:1080px){.rail{grid-auto-columns:calc((100% - 2 * 18px) / 3)}}
@media (max-width:760px){.rail{grid-auto-columns:46%}}
@media (max-width:520px){.rail{grid-auto-columns:82%}}

/* Videos (aus dem Entwurf) */
.video .img::before{content:"";position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;z-index:1;
  background:rgba(10,12,18,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;
  backdrop-filter:blur(4px);transition:transform .15s}
.video:hover .img::before{transform:scale(1.1);background-color:var(--mars)}
.vtag{display:inline-flex;align-items:center;gap:5px;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mars)}
.vtag::before{content:"▶";font-size:9px}
.yt{--c:var(--mars)}
.dur{position:absolute;right:10px;top:10px;z-index:2;background:rgba(10,12,18,.75);color:#fff;font:700 11px var(--mono);padding:2px 7px;border-radius:6px}
.video .img::before{pointer-events:none}
/* Video ohne Vorschaubild: Motiv bleibt lesbar, Abspielknopf klein in die Ecke */
.video .img.motif::before{inset:auto 10px 10px auto;margin:0;width:38px;height:38px;background-size:17px}
.nk .m-src{font-size:15px}.nk .img .m-logo{width:36px;height:36px;border-radius:9px}

/* Sponsor-Karte (Anzeige) */
.sponsor{position:relative;display:flex;flex-direction:column;gap:10px;border-radius:var(--r);padding:10px 10px 14px;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.sponsor .img{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,var(--bg,#4527D9),#0B1026)}
.sponsor .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sponsor .lbl{position:absolute;top:18px;right:18px;z-index:2;background:rgba(10,12,18,.65);color:#fff;font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border-radius:999px}
.sponsor h3{font-size:17px;line-height:1.25;padding:0 4px}
.sponsor h3 a{color:inherit;text-decoration:none}
.sponsor h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.sponsor .ex{font-size:14px;padding:0 4px}
.sponsor .who{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px}
.sponsor .cta{font:700 12.5px var(--sans);background:var(--accent);color:#fff;padding:6px 12px;border-radius:8px;white-space:nowrap}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sponsor .cta{color:#0B1026}}
:root[data-theme="dark"] .sponsor .cta{color:#0B1026}
aside .sponsor{margin-bottom:20px}
.rail .sponsor{scroll-snap-align:start}
/* Trend-Leiste: alle Pillen gleich hoch; Supernova/Komet nur farblich und mit Zeichen */
.trend a.tp{display:inline-flex;align-items:center;gap:5px;line-height:18px}
.trend a.tp i{font-style:normal;font-variant-emoji:text;font-size:12px;line-height:1}
.trend a.tp-nova{background:linear-gradient(90deg,#FFC94D,#FF8A4A);color:#1a1300}
.trend a.tp-nova:hover{background:linear-gradient(90deg,#FFD66E,#FF9C63);color:#1a1300}
.trend a.tp-komet{background:color-mix(in srgb,#FFC94D 18%,var(--surface-2))}
.trend a.tp-komet i{color:#E0A100}
/* Über Planet FOSS */
.about{padding:12px 0 48px}
.about-hero .lede,.about-box>p,.about-box ul{max-width:820px}
.about section{margin-top:40px}
.about h2{font:700 24px var(--display);margin:0 0 12px}
.about p{line-height:1.65;color:var(--ink)}
.about a{color:var(--accent)}
.about code{font:13px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:5px}
.about-hero{background:radial-gradient(1px 1px at 12% 30%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 22%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 55% 80%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 90% 70%,#fff7 50%,transparent 51%),linear-gradient(135deg,#0B1026,#2A1F6B 60%,#4527D9);
  color:#F5F6FB;border-radius:var(--r);padding:36px 32px 28px;margin-top:22px}
.about-hero .kicker{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#FFC94D;margin:0 0 8px}
.about-hero h1{font:700 clamp(28px,4vw,44px)/1.1 var(--display);margin:0 0 14px;max-width:780px}
.about-hero .lede{color:#D6DBE6;font-size:17px;max-width:760px;margin:0}
.about-facts{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.about-facts li{background:#ffffff12;border:1px solid #ffffff22;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.about-facts strong{font:700 24px var(--display);color:#fff}
.about-facts span{font-size:13px;color:#C3C8DA}
.about-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.about-steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.about-steps b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:700 15px var(--display)}
.about-steps h3{font:700 17px var(--display);margin:10px 0 6px}
.about-steps p{font-size:14.5px;margin:0;color:var(--muted)}
.about-glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.about-glossary>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.about-glossary dt{font:700 16px var(--display);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.about-glossary dd{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.g-nova{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(90deg,#FFC94D,#FF8A4A);color:#1a1300;font-size:13px}
.g-komet{color:var(--star-ink);font-variant-emoji:text}
.about-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.about-cols h2{font-size:20px}
.about-cols p{font-size:15px;margin:0}
.about-box{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--aurora);border-radius:var(--r);padding:20px 24px}
.about-box ul{margin:10px 0 0;padding-left:20px;line-height:1.6}
.about-box li{margin:6px 0}
@media (max-width:900px){.about-steps,.about-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.about-glossary{grid-template-columns:1fr}}
@media (max-width:520px){.about-hero{padding:26px 18px 20px}.about-steps,.about-facts{grid-template-columns:1fr}}
/* Blättern: als Knopf statt frei schwebendem Link */
.pager a{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.pager a:hover{border-color:var(--accent);background:var(--accent-soft)}
.pager.full{padding-top:18px}
.pager.full a{flex:1;justify-content:center}
.legal{max-width:780px}
.legal h1{font:700 34px var(--display);margin:22px 0 6px}
.legal .lang-note{color:var(--muted);font-size:13.5px;margin:0 0 18px}
.legal .lead{font-size:17px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--aurora);border-radius:12px;padding:14px 18px}
.legal ul{padding-left:20px}
.legal code{font:13px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:5px}
.legal a{color:var(--accent)}

/* nur für Screenreader und Suchmaschinen (Startseite: H1) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sponsor .aff-note{font-size:11.5px;line-height:1.35;color:var(--muted);margin:6px 0 0;position:relative;z-index:2}
.sponsor.preview{outline:2px dashed #FFC94D;outline-offset:3px}
.sponsor .pv-badge{position:absolute;left:12px;top:-12px;z-index:4;background:#FFC94D;color:#0B1026;font:700 10.5px var(--mono);padding:3px 7px;border-radius:6px;text-decoration:none;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-chip{position:fixed;left:16px;bottom:16px;z-index:50;display:flex;gap:10px;align-items:center;background:#0B1026;color:#F5F6FB;border:1px solid #FFC94D;border-radius:10px;padding:8px 10px;font:600 12.5px var(--sans);box-shadow:0 6px 24px #0007}
.pv-chip button{background:#FFC94D;color:#0B1026;border:0;border-radius:7px;padding:4px 9px;font:700 12px var(--sans);cursor:pointer}

/* Sternzahl erst ab 1 zeigen */
.star span:empty{display:none}

/* Suche: passende Themen über den Treffern */
.search-topics{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
.search-topics span{color:var(--muted);font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.search-topics a{display:inline-flex;gap:6px;align-items:baseline;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:600;text-decoration:none}
.search-topics a small{color:var(--muted);font-weight:500}
.search-topics a.tp-nova{background:linear-gradient(90deg,#FFC94D,#FF8A4A);color:#1a1300;border-color:transparent}
.search-topics a.tp-nova small{color:#1a1300b3}

/* Erstbesucher-Hinweis */
.intro{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin:18px 0 0;padding:12px 14px 12px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);border-left:4px solid #7C5CFF;font-size:15px;line-height:1.45}
.intro[hidden]{display:none}
.intro span{flex:1 1 420px}
.intro a{font-weight:700;white-space:nowrap}
.intro-x{border:0;background:none;color:var(--muted);font-size:22px;line-height:1;padding:4px 8px;cursor:pointer;border-radius:8px}
.intro-x:hover{background:var(--surface-2);color:var(--ink)}