/* Artikel-Seite VISION396 — ergänzt basis.css */
.artikel{padding:0 0 clamp(40px,7vh,90px);}
.artikel-hero{margin:0; padding:0; background:var(--graphite);}
.artikel-hero img{display:block; width:100%; height:auto;}
.artikel-text{max-width:720px; margin:0 auto; padding:clamp(28px,5vh,54px) var(--pad) 0;}
.kicker{font-family:var(--font-display,Oxanium); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); margin:0 0 14px;}
.artikel-text h1{font-family:var(--font-display,Oxanium); font-size:clamp(28px,3.6vw,46px); line-height:1.12; margin:0 0 10px; letter-spacing:-.01em;}
.unter{font-size:clamp(17px,1.5vw,21px); color:var(--blue); margin:0 0 26px; font-weight:600;}
.artikel-text p{font-size:clamp(16px,1.15vw,18px); line-height:1.72; margin:0 0 18px;}
.lead{font-size:clamp(18px,1.4vw,21px)!important; color:#2a3441; border-left:3px solid var(--blue);
  padding-left:16px; margin-bottom:26px!important;}
.artikel-text h2{font-family:var(--font-display,Oxanium); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); margin:34px 0 12px;}
.sc{font-family:var(--font-display,Oxanium); font-size:11px; letter-spacing:.12em; color:#5a6472;
  border-top:1px solid #d8dde4; border-bottom:1px solid #d8dde4; padding:10px 0; margin:34px 0 22px!important;}
.sig{font-family:var(--font-display,Oxanium); font-size:15px; margin:18px 0 34px; line-height:1.4;}
.sig span{font-size:11px; color:#6b7580; letter-spacing:.1em; text-transform:uppercase;}
.q{font-size:13px!important; line-height:1.6!important; margin-bottom:10px!important;}
.q span{color:#6b7580; word-break:break-all;}

.uebersicht{max-width:1100px; margin:0 auto; padding:clamp(40px,7vh,80px) var(--pad);}
.uebersicht h1{font-family:var(--font-display,Oxanium); font-size:clamp(34px,5vw,62px); margin:0 0 8px; line-height:1.05;}
.uebersicht .unter{max-width:620px; margin:0 0 clamp(26px,4vh,44px);}
.karten{display:grid; gap:clamp(18px,2.5vw,28px);}
.karte{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:0; text-decoration:none; color:inherit; background:#fff;
  border:1px solid #e2e6ec; overflow:hidden; transition:border-color .2s;}
.karte:hover{border-color:var(--blue);}
.karte img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1536/640;}
.karte-text{padding:clamp(18px,2.4vw,26px); display:flex; flex-direction:column; justify-content:center;}
.karte-datum{font-family:var(--font-display,Oxanium); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); margin:0 0 10px;}
.karte h2{font-family:var(--font-display,Oxanium); font-size:clamp(19px,2.1vw,28px); line-height:1.2; margin:0 0 10px;}
.karte-hook{font-size:15px; color:#4a5462; margin:0 0 16px; line-height:1.5;}
.karte-lesen{display:inline-flex; align-items:center; align-self:flex-start;
  font-family:var(--font-display,Oxanium); font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:var(--blue); padding:13px 22px; border-radius:2px;
  transition:background .18s ease;}
.karte:hover .karte-lesen{background:#1b6ae0;}
.karte.gesperrt .karte-lesen{background:#2a3441;}
@media (max-width:800px){.karte{grid-template-columns:1fr;}}
.mehr{display:inline-block; margin-top:18px; font-family:var(--font-display,Oxanium);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue);
  text-decoration:none; border-bottom:1px solid var(--blue); padding-bottom:3px;}
.mehr:hover{color:var(--graphite); border-color:var(--graphite);}
.karte.gesperrt{cursor:default;}
.karte.gesperrt:hover{border-color:#e2e6ec;}

/* Hero im Artikel nur auf schmalen Bildschirmen (Stefan, 31.10.2026):
   am Desktop schiebt das Bild die Geschichte unter die Falz. Auf der
   Startseite bleibt der Hero am Desktop — das ist eine andere Seite. */
.artikel-hero{display:none}
@media (max-width:767px){
  .artikel-hero{display:block;margin:0 0 22px}
  .artikel-hero img{display:block;width:100%;height:auto}
}