/* ==========================================================================
   SeppSales Blog – Übersicht und Artikel
   ========================================================================== */
.bl{background:#101114; color:#f3f4f6; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; letter-spacing:-.011em; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip}
.bl *{box-sizing:border-box}
.bl-spur{max-width:1180px; margin-inline:auto; padding-inline:24px}
.bl-ey{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:#9196a1; display:inline-flex; align-items:center; gap:10px}
.bl-ey::before{content:""; width:22px; height:1px; background:#2e3138}
.bl-kat{display:inline-flex; align-items:center; font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#2bcdee; background:hsl(190 85% 55% / .12); border:1px solid hsl(190 85% 55% / .35); border-radius:999px; padding:4px 10px}
.bl-meta{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.06em; color:#636874}
.bl-knopf{display:inline-flex; align-items:center; gap:9px; border-radius:10px; padding:13px 24px; font-weight:600; font-size:.9375rem; color:#12161a; text-decoration:none;
  background:linear-gradient(180deg,#51daf6,#17b4d3); box-shadow:0 0 16px hsl(190 85% 55% / .2),inset 0 1px 0 hsl(0 0% 100% / .3); transition:filter .16s ease,transform .16s ease}
.bl-knopf:hover{filter:brightness(.95); transform:translateY(-1px)}

/* ---- Übersicht ---- */
.bl-held{position:relative; padding:clamp(56px,7vw,96px) 0 clamp(36px,5vw,56px); overflow:hidden}
.bl-held::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(hsl(0 0% 100% / .035) 1px,transparent 1px),linear-gradient(90deg,hsl(0 0% 100% / .035) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(70% 70% at 30% 20%,#000,transparent 80%)}
.bl-held .bl-spur{position:relative}
.bl-held h1{font-size:clamp(2.4rem,6vw,4.4rem); font-weight:800; letter-spacing:-.035em; line-height:1.02; margin:16px 0 0}
.bl-held h1 span{color:#2bcdee}
.bl-held p{color:#9196a1; font-size:clamp(1.02rem,1.6vw,1.2rem); max-width:56ch; margin:16px 0 0}
.bl-filter{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.bl-filter button{font:500 12px/1 "JetBrains Mono",monospace; letter-spacing:.04em; color:#9196a1; background:transparent; border:1px solid #2e3138; border-radius:999px; padding:9px 14px; cursor:pointer; transition:.2s}
.bl-filter button:hover{color:#f3f4f6; border-color:#41454e}
.bl-filter button.an{color:#2bcdee; border-color:hsl(190 85% 55% / .45); background:hsl(190 85% 55% / .1)}

.bl-raster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding-bottom:clamp(80px,10vw,130px)}
.bl-karte{position:relative; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; text-decoration:none; color:inherit;
  background:#1e2024; background-image:linear-gradient(180deg,hsl(0 0% 100% / .028),transparent 120px); border:1px solid #2e3138;
  box-shadow:inset 0 1px 0 hsl(0 0% 100% / .05),0 18px 36px -24px hsl(220 20% 2% / .9); transition:transform .35s cubic-bezier(.2,.9,.3,1.2),border-color .25s ease,box-shadow .35s ease}
.bl-karte:hover{transform:translateY(-5px); border-color:hsl(190 85% 55% / .45); box-shadow:inset 0 1px 0 hsl(0 0% 100% / .05),0 26px 50px -24px hsl(190 85% 45% / .45)}
.bl-karte.gross{grid-column:1/-1; flex-direction:row}
.bl-cover{position:relative; aspect-ratio:16/9; background:#0c0d10; border-bottom:1px solid #2e3138; overflow:hidden}
.bl-karte.gross .bl-cover{flex:0 0 56%; aspect-ratio:auto; min-height:340px; border-bottom:0; border-right:1px solid #2e3138}
.bl-cover svg{position:absolute; inset:0; width:100%; height:100%}
.bl-karte-in{padding:24px 24px 22px; display:flex; flex-direction:column; gap:12px; flex:1}
.bl-karte.gross .bl-karte-in{padding:36px 34px; justify-content:center}
.bl-karte h2{font-size:1.3rem; font-weight:700; letter-spacing:-.022em; line-height:1.2; margin:0; text-wrap:balance}
.bl-karte.gross h2{font-size:clamp(1.6rem,2.8vw,2.2rem); line-height:1.1}
.bl-karte p{color:#9196a1; font-size:.9375rem; margin:0}
.bl-karte-fuss{margin-top:auto; padding-top:8px; display:flex; justify-content:space-between; align-items:center}
.bl-weiter{color:#2bcdee; font-size:.875rem; font-weight:600; transition:transform .25s ease}
.bl-karte:hover .bl-weiter{transform:translateX(4px)}
.bl-karte[hidden]{display:none}
@media (max-width:860px){
  .bl-raster{grid-template-columns:1fr}
  .bl-karte.gross{flex-direction:column}
  .bl-karte.gross .bl-cover{flex:none; aspect-ratio:16/9; min-height:0; border-right:0; border-bottom:1px solid #2e3138}
  .bl-karte.gross .bl-karte-in{padding:24px}
}

/* ---- Artikel ---- */
.ar-kopf{position:relative; padding:clamp(48px,6vw,80px) 0 0; overflow:hidden}
.ar-kopf::before{content:""; position:absolute; left:50%; top:0; width:1000px; height:500px; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 30%,hsl(190 85% 55% / .1),transparent 70%)}
.ar-schmal{max-width:760px; margin-inline:auto; padding-inline:24px; position:relative}
.ar-zurueck{display:inline-flex; align-items:center; gap:8px; color:#9196a1; text-decoration:none; font-size:.875rem; margin-bottom:28px; transition:color .2s}
.ar-zurueck:hover{color:#2bcdee}
.ar-kopf h1{font-size:clamp(2rem,4.6vw,3.3rem); font-weight:800; letter-spacing:-.032em; line-height:1.06; margin:16px 0 0; text-wrap:balance}
.ar-lead{font-size:clamp(1.08rem,1.8vw,1.25rem); color:#b4b8c0; margin:18px 0 0; line-height:1.55}
.ar-meta{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:22px}
.ar-cover{max-width:1000px; margin:clamp(36px,5vw,56px) auto 0; padding-inline:24px}
.ar-cover-in{position:relative; aspect-ratio:21/9; border-radius:16px; overflow:hidden; background:#0c0d10; border:1px solid #2e3138; box-shadow:0 40px 80px -40px hsl(220 20% 2% / .95)}
.ar-cover-in svg{position:absolute; inset:0; width:100%; height:100%}
.ar-text{padding:clamp(40px,5vw,64px) 0 clamp(48px,6vw,72px)}
.ar-text h2{font-size:clamp(1.35rem,2.4vw,1.7rem); font-weight:800; letter-spacing:-.025em; line-height:1.2; margin:44px 0 0}
.ar-text h3{font-size:1.125rem; font-weight:700; letter-spacing:-.015em; margin:28px 0 0}
.ar-text p,.ar-text li{color:#b4b8c0; font-size:1.0625rem; line-height:1.75}
.ar-text p{margin:16px 0 0}
.ar-text strong{color:#f3f4f6; font-weight:600}
.ar-text ul,.ar-text ol{margin:16px 0 0; padding-left:22px}
.ar-text li + li{margin-top:8px}
.ar-text li::marker{color:#2bcdee}
.ar-zitat{margin:36px 0 0; padding:24px 26px; border-radius:0 14px 14px 0; border-left:3px solid #2bcdee; background:#1e2024; font-size:1.25rem; font-weight:700; letter-spacing:-.02em; line-height:1.4; color:#f3f4f6}
.ar-kasten{margin:32px 0 0; padding:22px 24px; border-radius:14px; background:#1e2024; border:1px solid #2e3138}
.ar-kasten b{display:block; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#2bcdee; margin-bottom:8px}
.ar-kasten p{margin:0; font-size:.9688rem}
.ar-formel{font-family:"JetBrains Mono",monospace; font-size:.875rem; color:#f3f4f6; background:#0c0d10; border:1px solid #2e3138; border-radius:10px; padding:10px 14px; margin:12px 0 0; display:block}
.ar-cta{margin:56px 0 0; padding:30px 28px; border-radius:16px; border:1px solid hsl(190 85% 55% / .35); background:#1e2024; background-image:radial-gradient(80% 120% at 0 0,hsl(190 85% 55% / .12),transparent 60%)}
.ar-cta h2{margin:0; font-size:1.5rem}
.ar-cta p{margin:10px 0 20px; color:#9196a1; font-size:1rem}
.ar-mehr{border-top:1px solid #2e3138; padding:clamp(48px,6vw,72px) 0 clamp(72px,9vw,110px)}
.ar-mehr h2{font-size:1.4rem; font-weight:800; letter-spacing:-.02em; margin:0 0 22px}
.ar-mehr .bl-raster{padding-bottom:0}

.bl-raster.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-raster.drei .bl-karte:not(.gross) h2{font-size:1.15rem}
@media (max-width:1000px){ .bl-raster.drei{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .bl-raster.drei{grid-template-columns:1fr} }
.ar-text a:not(.bl-knopf){color:#2bcdee; text-decoration:none; border-bottom:1px solid hsl(190 85% 55% / .35)}
.ar-text a:not(.bl-knopf):hover{border-bottom-color:#2bcdee}
.ar-quelle{margin-top:40px!important; padding-top:18px; border-top:1px solid #2e3138; font-size:.8125rem!important; color:#636874!important}

/* Final-Boss-Karte: Grafik im Hintergrund, der X-Post schwebt darüber */
.bl-cover-post{container-type:inline-size}
.bl-cover-post > svg{opacity:1}
.bl-cover-post .bl-post svg{position:static; inset:auto; width:1em; height:1em; flex:none}
.bl-post{position:absolute; right:5%; top:50%; width:min(62%,420px); transform:translateY(-50%) rotate(-2deg);
  padding:3cqi 3.2cqi 2.4cqi; border-radius:2.2cqi; background:#000; border:1px solid #2f3336; color:#e7e9ea;
  font-family:-apple-system,"Segoe UI",Inter,sans-serif; letter-spacing:0;
  box-shadow:0 30px 60px -20px hsl(220 20% 2% / .95),0 0 0 1px hsl(0 0% 100% / .04),0 0 60px -20px hsl(190 85% 55% / .35);
  transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.bl-karte:hover .bl-post{transform:translateY(-50%) rotate(0) scale(1.03)}
.bl-post-kopf{display:flex; align-items:center; gap:1.5cqi; margin-bottom:1.6cqi}
.bl-post-ava{object-fit:cover; padding:0; width:5.4cqi; height:5.4cqi; border-radius:50%; flex:none; display:grid; place-items:center; font-size:1.9cqi; font-weight:700; background:linear-gradient(135deg,#3a3e46,#1e2024); border:1px solid #41454e}
.bl-post-name b{display:flex; align-items:center; gap:.5cqi; font-size:2.1cqi; font-weight:700; line-height:1.2}
.bl-post-name small{display:block; font-size:1.9cqi; color:#71767b; line-height:1.2}
.bl-post-x{margin-left:auto; font-size:2.6cqi; color:#e7e9ea; display:flex}
.bl-post p{margin:0; font-size:2.1cqi; line-height:1.42; color:#e7e9ea}
.bl-post p + p{margin-top:1cqi}
.bl-post .bl-post-luecke{color:#71767b; line-height:1}
.bl-post mark{background:hsl(190 85% 55% / .22); color:#fff; padding:0 .3cqi; border-radius:.5cqi; box-shadow:inset 0 -.28cqi 0 #2bcdee}
.bl-post-zeit{display:block; margin-top:1.6cqi; padding-top:1.3cqi; border-top:1px solid #2f3336; font-size:1.8cqi; color:#71767b}
@container (max-width:560px){
  .bl-post{width:82%; right:4%; padding:2.8cqi 3.2cqi 2.2cqi}
  .bl-post p{font-size:2.45cqi; line-height:1.36} .bl-post-name b{font-size:2.5cqi} .bl-post-name small,.bl-post-zeit{font-size:2.15cqi}
  .bl-post-kopf{margin-bottom:1.3cqi} .bl-post-zeit{margin-top:1.2cqi; padding-top:1cqi}
  .bl-post-ava{width:6cqi; height:6cqi; font-size:2.2cqi} .bl-post-x{font-size:3cqi}
}

.bl-leer{margin:0 0 clamp(80px,10vw,130px); padding:48px 24px; border:1px dashed #2e3138; border-radius:16px; text-align:center; color:#9196a1; font-size:1rem}

/* Platzhalter für noch fehlende Studiendaten, deutlich sichtbar */
.ar-platz{margin:18px 0 0; padding:16px 18px; border-radius:12px; border:1.5px dashed #e0b54a; background:hsl(42 70% 58% / .08)}
.ar-platz b{display:block; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#e0b54a; margin-bottom:6px}
.ar-text .ar-platz p{margin:0; font-size:.9375rem; color:#d9c38a}
.ar-platz-inline{color:#e0b54a; border-bottom:1px dashed #e0b54a}
.ar-zahlen{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0 0}
.ar-zahlen div{padding:18px; border-radius:14px; background:#1e2024; border:1px solid #2e3138}
.ar-zahlen b{display:block; font-size:2rem; font-weight:800; letter-spacing:-.03em; color:#2bcdee; line-height:1.1}
.ar-zahlen .rot b{color:#e87377}
.ar-zahlen small{display:block; margin-top:6px; font-size:.8125rem; color:#9196a1; line-height:1.35}
@media (max-width:600px){ .ar-zahlen{grid-template-columns:1fr} }

/* Artikel in Arbeit: Karte ohne Link, Cover abgedunkelt, Plakette darueber */
.bl-karte.bald{cursor:default}
.bl-karte.bald:hover{transform:none; border-color:#2e3138; box-shadow:inset 0 1px 0 hsl(0 0% 100% / .05),0 18px 36px -24px hsl(220 20% 2% / .9)}
.bl-karte.bald .bl-cover svg{display:none}
.bl-karte.bald .bl-cover{background:radial-gradient(60% 70% at 50% 50%,hsl(190 85% 55% / .08),transparent 70%),linear-gradient(135deg,#12161c,#0a0b0e)}
.bl-karte.bald h2,.bl-karte.bald p{opacity:.6}
.bl-karte.bald .bl-weiter{color:#9196a1}
.bl-karte.bald:hover .bl-weiter{transform:none}
.bl-bald{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; white-space:nowrap;
  font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#2bcdee; background:hsl(220 10% 8% / .82); border:1px solid hsl(190 85% 55% / .45); border-radius:999px; padding:11px 20px;
  box-shadow:0 0 28px -6px hsl(190 85% 55% / .5); backdrop-filter:blur(6px)}

/* ==== Nur Handy: Artikeltext bekommt Seitenrand (am Desktop ist die Spalte ohnehin schmaler) ==== */
@media (max-width:820px){
  .ar-text{padding-inline:20px}
  .ar-cover{padding-inline:16px}
  .ar-cta{padding:24px 20px}
}