.blog-marke{display:flex; align-items:center; gap:14px; margin:0 0 20px;}
.blog-marke img{width:48px; height:48px; display:block; flex:0 0 48px;}
.blog-marke .wortmarke{font-size:clamp(19px,2vw,27px);}
.blog{max-width:1180px; margin:0 auto; padding:clamp(36px,6vh,70px) var(--pad);}
.blog h1{font-family:var(--font-display,Oxanium); font-size:clamp(32px,4.6vw,58px); line-height:1.06; margin:0 0 10px;}
.blog-dekk{font-size:clamp(15px,1.2vw,18px); color:#4a5462; max-width:620px; margin:0 0 13px;}
.blog-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,290px); gap:clamp(20px,3vw,44px); align-items:start;}
.lead-box{display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); text-decoration:none; color:inherit; position:relative; overflow:hidden;}
.lead-box img{width:100%; height:100%; object-fit:cover; display:block; min-height:280px;}
.lead-text{padding:clamp(20px,2.6vw,32px); display:flex; flex-direction:column; justify-content:center;}
.marke{position:absolute; top:0; left:0; z-index:2; font-family:var(--font-display,Oxanium); font-size:10px;
  font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:8px 13px;}
.datum{font-family:var(--font-display,Oxanium); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px;}
.lead-box h2{font-family:var(--font-display,Oxanium); font-size:clamp(21px,2.3vw,31px); line-height:1.16; margin:0 0 10px;}
.hook{font-size:clamp(14px,1.05vw,16px); line-height:1.45; margin:0 0 20px;}
.btn{align-self:flex-start; display:inline-block; font-family:var(--font-display,Oxanium); font-size:13px;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:13px 22px; border-radius:2px;}


  
.lead-box{background:#20262e; color:#fff; border-left:5px solid var(--blue,#2F80FF);}
.marke{background:var(--blue,#2F80FF); color:#fff;}
.datum{color:#9db4d1;} .hook{color:#ccd8e6;} .btn{background:var(--blue,#2F80FF); color:#fff;}
.erklaerung{margin-top:clamp(26px,4vh,44px); max-width:660px;}
.erklaerung h2{font-family:var(--font-display,Oxanium); font-size:clamp(17px,1.5vw,21px); margin:0 0 12px; color:#20262e;}
.erklaerung p{font-size:clamp(15px,1.1vw,17px); line-height:1.7; color:#39424d; margin:0 0 14px;}
.chronik h2{font-family:var(--font-display,Oxanium); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#7c8794; margin:0 0 4px; padding-bottom:12px; border-bottom:2px solid #20262e;}
.chronik ol{list-style:none; margin:0; padding:0;}
.chronik li{border-bottom:1px solid #e7ebf0;}
.chronik a{display:flex; gap:10px; padding:11px 0; text-decoration:none; color:#20262e; font-size:13.5px; line-height:1.35;}
.chronik a:hover span{color:var(--blue,#2F80FF);}
.chronik time{font-family:var(--font-display,Oxanium); font-size:10.5px; color:var(--blue,#2F80FF); flex:0 0 64px; padding-top:2px;}
.chronik .aus{display:flex; gap:10px; padding:11px 0; font-size:13.5px; color:#b3bcc7;}
.chronik .aus time{color:#c6cdd6;}

/* Eintrag mit DeepDive: erste Zeile Datum + Story fett, zweite Zeile DeepDive normal */
.chronik .eintrag{display:block; padding:11px 0; position:relative;}
.chronik .eintrag a{text-decoration:none; padding:0;}
.chronik .eintrag-story{display:block; font-weight:700; font-size:13.5px; line-height:1.35; color:#20262e;}
.chronik .eintrag-story time{font-family:var(--font-display,Oxanium); color:var(--blue,#2F80FF); font-size:12.5px; letter-spacing:.04em;}
.chronik .eintrag-story::after{content:""; position:absolute; inset:0; z-index:0;}
.chronik .eintrag-dd{display:block; position:relative; z-index:1; font-weight:400; font-size:12px; line-height:1.45; color:#59636f; margin-top:5px;}
.chronik .eintrag-story:hover{color:var(--blue,#2F80FF);}
.chronik .eintrag-dd:hover{color:#20262e; text-decoration:underline;}
.chronik .eintrag + .eintrag{border-top:0;}
@media (max-width:880px){.blog-grid{grid-template-columns:1fr;} .lead-box{grid-template-columns:1fr;} .lead-box img{min-height:180px; max-height:210px;}}

.lead-box{transition:border-color .2s;}
.lead-box:hover{border-color:#4a90ff;}
.lead-box.gesperrt{cursor:default;}
.lead-box.gesperrt:hover{border-color:transparent;}
.lead-box.gesperrt .btn{background:#39414c;}
.erklaerung p.slogan{margin:24px 0 0; font-family:var(--font-display,Oxanium); font-weight:700;
  font-size:clamp(17px,1.7vw,21px); line-height:1.3; letter-spacing:-.02em; color:var(--blue,#2F80FF);}

/* --- Blog-Übersicht einspaltig: Aufklappbereich über der Box, Liste darunter --- */
main.blog{width:100%;}
.lead-box{max-width:755px;}
.chronik{max-width:755px; margin-top:clamp(30px,4.5vh,52px);}

/* Ein Muster für beide Klappen: Erläuterung über der Karte und Jahresband in der Liste */
.klapp{background:#fff; border:1px solid #dfe6ee; border-left:4px solid var(--blue,#2F80FF);}
.klapp summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px;
  font-family:var(--font-display,Oxanium); font-size:16px; font-weight:600; letter-spacing:.01em;
  color:#20262e; padding:18px 20px; transition:color .15s;}
.klapp summary::-webkit-details-marker{display:none;}
.klapp summary::after{content:"+"; margin-left:auto; width:26px; height:26px; display:inline-flex;
  align-items:center; justify-content:center; background:var(--blue,#2F80FF); color:#fff;
  font-size:18px; font-weight:600; line-height:1;}
.klapp[open] summary::after{content:"\2212";}
.klapp summary:hover{color:var(--blue,#2F80FF);}

/* Erläuterung über der Karte */
.erklaerung-klapp{max-width:755px; margin:0 0 clamp(40px,5.5vh,56px);}
.erklaerung-klapp .erklaerung{margin:0; max-width:660px; padding:2px 20px 22px;}
.erklaerung-klapp .erklaerung p:first-child{margin-top:0;}

/* Jahresband in der Liste */
.jahr-band{margin:6px 0 0;}
.jahr-band ol{list-style:none; margin:0; padding:0 20px 8px;}
.jahr-band .eintrag:last-child, .jahr-band .aus:last-child{border-bottom:0;}

@media (max-width:880px){
  .lead-box{max-width:none;}
  .chronik{max-width:none;}
  .erklaerung-klapp{max-width:none;}
}