:root{
  --bg:#ffffff;
  --ink:#0b1220;
  --muted:#5b667a;
  --line:#e7ebf2;
  --soft:#f6f7fb;
  --red:#d41414;
  --red2:#ff3b30;
  --blue:#0a4cff;
  --max:1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--ink); background:var(--bg)}
a{color:inherit; text-decoration:none}
a:hover{color:var(--red)}

.wrap{max-width:var(--max); margin:0 auto; padding:0 16px}

/* Topbar */
.topbar{border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:50}
.toprow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0}
.brand{display:flex; align-items:baseline; gap:10px}
.brand .logo{font-weight:950; letter-spacing:.2px; font-size:22px}
.brandLogo{display:inline-flex; align-items:center; gap:10px}
/* Wordmark logo */
.wm{display:inline-flex; align-items:baseline; gap:0; letter-spacing:-.2px}
.wmPr{font-weight:900; font-size:24px; letter-spacing:.3px}
.wmPort{font-weight:950; font-size:22px}
.wmDot{display:inline-block; width:6px; height:6px; background:var(--red); border-radius:999px; margin:0 6px; transform:translateY(-2px)}
.wmTld{font-weight:900; font-size:14px; color:var(--muted)}

.brand .dot{display:inline-block; width:9px; height:9px; border-radius:2px; background:var(--red); transform:translateY(-2px)}
.brand .tag{font-size:12px; color:var(--muted)}

.tools{display:flex; align-items:center; gap:10px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:999px; background:var(--soft); font-size:12px; color:var(--muted)}
.pill strong{color:var(--ink)}

/* Topic Nav (custom, avoid conflict with Bootstrap .nav)
   Desktop: single-line horizontal scroll (no wrapping)
*/
.topicNav{display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:10px 0 12px}
.topicNav a{padding:8px 10px; border-radius:999px; font-weight:700; font-size:12px; border:1px solid var(--line); background:var(--soft); white-space:nowrap; flex:0 0 auto}
.topicNav a.on{background:rgba(212,20,20,.08); border-color:rgba(212,20,20,.18); color:var(--red)}
.topicNav a:hover{background:rgba(11,18,32,.06)}
.offcanvas .topicNav{overflow:visible}

@media (max-width: 720px){
  .brand{gap:8px}
  .brand .tag{display:none}
}

/* Ticker */
.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(90deg, rgba(212,20,20,.06), rgba(255,255,255,0));}
.tickerInner{display:flex; gap:10px; align-items:center; padding:10px 0}
.tickerBadge{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:900; letter-spacing:.3px; text-transform:uppercase; color:#fff; background:var(--red); padding:6px 10px; border-radius:999px}
.tickerScroll{overflow:hidden; flex:1}
.tickerScroll .line{white-space:nowrap; display:inline-block; padding-left:100%; animation:ticker var(--tickerDur, 34s) linear infinite}
.tickerScroll .line span{display:inline-block; padding:0 18px; color:var(--ink)}
.tickerScroll .line span b{color:var(--red)}
.tickLink{color:inherit; text-decoration:none}
.tickLink:hover{color:var(--red); text-decoration:underline}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-100%)} }

/* Market box */
.marketBox{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff}
.marketHead{padding:12px; background:linear-gradient(90deg, rgba(10,76,255,.10), rgba(255,255,255,0)); border-bottom:1px solid var(--line); font-weight:900; font-size:12px; letter-spacing:.3px; text-transform:uppercase}

/* Layout */
.grid{display:grid; grid-template-columns: 1.35fr .65fr; gap:18px; padding:18px 0 26px}
@media (max-width: 980px){
  .grid{grid-template-columns: 1fr}
}

/* Post layout */
.postGrid{display:grid; grid-template-columns: 1fr .48fr; gap:18px; margin-top:16px}
@media (max-width: 980px){
  .postGrid{grid-template-columns: 1fr}
}

.hero{background:var(--soft); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.heroTop{padding:14px 14px 0}
.heroKicker{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px}
.heroKicker .cat{color:var(--red); font-weight:900}
.heroTitle{margin:10px 0 10px; font-size:28px; line-height:1.12; letter-spacing:-.2px}
.heroTitle a{color:var(--ink)}
.heroTitle a:hover{color:var(--red)}
.heroTeaser{color:var(--muted); font-size:14px; line-height:1.45; padding:0 14px 14px}
.heroImg{height:260px; background:radial-gradient(1200px 300px at 20% 30%, rgba(212,20,20,.18), transparent 55%), radial-gradient(900px 260px at 70% 10%, rgba(10,76,255,.12), transparent 50%), linear-gradient(180deg, #0b1220, #162443);}
.heroImg img{width:100%; height:100%; object-fit:cover; display:block; opacity:.92}

.cards{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:12px}
@media (max-width: 680px){.cards{grid-template-columns:1fr}}

.card{border:1px solid var(--line); border-radius:16px; padding:12px; background:#fff}
.cardRow{display:flex; gap:12px; align-items:stretch}
.cardThumb{width:120px; height:86px; border-radius:12px; overflow:hidden; flex:0 0 auto; border:1px solid var(--line); background:linear-gradient(135deg, rgba(212,20,20,.10), rgba(10,76,255,.08));}
.cardThumb img{width:100%; height:100%; object-fit:cover; display:block}
.cardMain{flex:1; min-width:0}
.card .meta{display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px}
.card .meta .cat{color:var(--red); font-weight:900}
.card h3{margin:10px 0 6px; font-size:16px; line-height:1.25; overflow-wrap:anywhere; word-break:break-word}
.card p{margin:0; color:var(--muted); font-size:13px; line-height:1.45}

.sectionTitle{margin:18px 0 10px; display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.sectionTitle h2{margin:0; font-size:14px; letter-spacing:.3px; text-transform:uppercase}
.sectionTitle .rule{flex:1; height:1px; background:var(--line); margin-left:10px}

.list{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff}
.item{display:flex; gap:10px; padding:12px; border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .time{width:90px; color:var(--muted); font-size:12px; white-space:nowrap}
.item .thumb{width:84px; height:58px; border-radius:12px; overflow:hidden; flex:0 0 auto; border:1px solid var(--line); background:linear-gradient(135deg, rgba(212,20,20,.10), rgba(10,76,255,.08)); position:relative}
.item .thumb img{width:100%; height:100%; object-fit:cover; display:block}

.cardThumb{position:relative}
.vidBadge{position:absolute; right:6px; bottom:6px; width:20px; height:20px; border-radius:999px; background:rgba(0,0,0,.68); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1; box-shadow:0 6px 16px rgba(0,0,0,.25); backdrop-filter: blur(2px)}
.item .txt{flex:1}
.item .txt .cat{font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.3px; color:var(--red)}
.item .txt .t{margin-top:3px; font-weight:800; line-height:1.25}
.item:hover{background:var(--soft)}

@media (max-width: 520px){
  .heroTitle{font-size:22px}
  .heroImg{height:210px}
  .cardThumb{width:104px; height:74px}
  .item .time{display:none}
  .item .thumb{width:74px; height:52px}
}

/* Sidebar */
.side{display:flex; flex-direction:column; gap:12px}
.box{border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden}
.boxHead{padding:12px; background:linear-gradient(90deg, rgba(212,20,20,.08), rgba(255,255,255,0)); border-bottom:1px solid var(--line); font-weight:900; font-size:12px; letter-spacing:.3px; text-transform:uppercase}
.boxBody{padding:12px}
.boxBody .muted{color:var(--muted); font-size:12px; line-height:1.5}
.kv{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px dashed var(--line)}
.kv:first-child{border-top:0}
.kv b{font-size:12px}
.kv span{font-size:12px; color:var(--muted)}

/* Hot Watch: stack meta under title (always one item per line) */

/* Post body typography */
.postBody h2,.postBody h3,.postBody h4{margin:14px 0 8px; line-height:1.25}
.postBody p{margin:0 0 10px}
.postBody ul{margin:0 0 10px 18px}
.postBody li{margin:0 0 6px}

/* Impressum headings (not H-tags) */
.impTitle{margin:14px 0 8px; font-weight:900; font-size:16px; line-height:1.25}

/* Footer */
.footer{border-top:1px solid var(--line); padding:18px 0; color:var(--muted); font-size:12px}

/* Hot Watch: one compact row per article -- category, title, view count.
   Title truncates with a real ellipsis instead of a hard character cut. */
.hotWatch .boxBody{padding:4px 12px 10px}
.hotList{list-style:none; margin:0; padding:0}
.hotItem{display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--line); min-width:0}
.hotItem:first-child{border-top:0}
.hotCat{flex:0 0 auto; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px;
        color:var(--blue); background:rgba(10,76,255,.08); border-radius:999px;
        padding:2px 7px; line-height:1.6; white-space:nowrap}
.hotTitle{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
          font-size:12.5px; font-weight:600; line-height:1.4; color:var(--ink); text-decoration:none}
.hotTitle:hover{color:var(--red); text-decoration:underline}
.hotViews{flex:0 0 auto; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}

/* A grid track sized in fr still has a min-content floor, so the nowrap
   Hot Watch titles widened the sidebar and starved the article column.
   Letting the tracks shrink below min-content restores the intended ratio. */
.grid > *, .postGrid > *{min-width:0}

/* Sidebar-Listen ("Mehr aus Kategorie", "Ähnliche Artikel"): der Titel wurde
   vorher per mb_substr() hart mitten im Wort abgeschnitten. Jetzt kuerzt CSS
   mit echter Ellipse, das Datum bzw. die Rubrik bleibt rechts stehen. */
.kv b{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kv b a{color:inherit; text-decoration:none}
.kv b a:hover{color:var(--red); text-decoration:underline}
.kv > span{flex:0 0 auto; white-space:nowrap}

/* Video-Zeilen: zwei Zeilen, dann Ellipse. */
.vidRow{min-width:0}
.vidTitle{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
          overflow:hidden; line-height:1.25; font-size:12.5px}

/* Artikelsuche: kompaktes Formular in der Kopfzeile, großes auf /suche */
.searchForm{display:flex; align-items:center; height:34px; border:1px solid var(--line);
            border-radius:999px; background:var(--soft); overflow:hidden; transition:border-color .15s, background .15s}
.searchForm:focus-within{border-color:rgba(212,20,20,.45); background:#fff; box-shadow:0 0 0 3px rgba(212,20,20,.08)}
.searchForm input{flex:1 1 auto; min-width:0; width:170px; height:100%; border:0; background:transparent;
                  padding:0 0 0 13px; font-size:13px; color:var(--ink); outline:none; -webkit-appearance:none; appearance:none}
.searchForm input::placeholder{color:var(--muted)}
.searchForm input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.searchForm button{flex:0 0 auto; height:100%; border:0; background:transparent; padding:0 11px 0 9px;
                   display:inline-flex; align-items:center; color:var(--muted); cursor:pointer}
.searchForm button:hover{color:var(--red)}
.tools .searchForm input{transition:width .18s ease}
.tools .searchForm:focus-within input{width:230px}
.offcanvas .searchForm{width:100%; margin-bottom:14px}
.offcanvas .searchForm input{width:auto}

.searchHero{margin-bottom:16px}
.searchTitle{margin:0 0 10px; font-size:22px; line-height:1.15; letter-spacing:-.2px}
.searchFormBig{height:46px; border-radius:14px; background:#fff}
.searchFormBig input{font-size:16px; padding-left:16px; width:auto}
.searchFormBig button{padding:0 18px; font-size:13px; font-weight:800; color:#fff; background:var(--red); border-radius:0}
.searchFormBig button:hover{color:#fff; background:var(--red2)}
.searchMeta{margin-top:10px; color:var(--muted); font-size:13px}
.searchMeta strong{color:var(--ink)}
.searchMeta a{color:var(--red); text-decoration:underline}
.searchResults .snippet{margin-top:4px; color:var(--muted); font-size:12.5px; line-height:1.45}
mark.hl{background:rgba(212,20,20,.14); color:inherit; padding:0 2px; border-radius:3px}

@media (max-width: 767.98px){
  .tools .searchForm{display:none}
}
@media (max-width: 520px){
  .searchTitle{font-size:19px}
  .searchFormBig{height:42px}
  .searchFormBig input{font-size:15px}
}