/* Magazin-Übersicht – Redesign 2026 (aus bgp-neu/entwuerfe/magazin-v3.html) */

/* Magazin-Übersicht */
.hero--seite{padding-block:clamp(24px,3vw,40px)}
.hero--seite h1{font-size:clamp(30px,3.4vw,42px);margin-bottom:8px}
.hero--seite .hero__intro{font-size:16px}
.krumen{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none;font-size:13px;color:rgba(255,255,255,.6)}
.krumen li+li::before{content:"/";margin-right:6px;opacity:.6}
.krumen a{color:rgba(255,255,255,.85)}
.krumen a:hover{color:var(--gelb)}

.band--beitraege{padding-top:clamp(20px,2.5vw,28px)}
.leiste{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding-bottom:22px;margin-bottom:36px;border-bottom:1px solid var(--linie)}
.rubriken{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}
.rubriken::-webkit-scrollbar{display:none}
.rubrik{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:1px solid var(--linie);border-radius:var(--radius);font-size:13.5px;font-weight:600;color:var(--tinte);white-space:nowrap;background:var(--weiss);cursor:pointer}
.rubrik small{font-size:11.5px;font-weight:600;color:var(--gedaempft)}
.rubrik:hover{border-color:var(--blau);color:var(--blau)}
.rubrik[aria-current]{background:var(--asphalt);border-color:var(--asphalt);color:#fff}
.mehr{position:relative;flex:none}
.mehr summary{list-style:none}
.mehr summary::-webkit-details-marker{display:none}
.mehr summary::after{content:"";width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-2px) rotate(45deg);margin-left:2px}
.mehr[open] summary{border-color:var(--blau);color:var(--blau)}
.mehr__liste{position:absolute;right:0;top:calc(100% + 6px);z-index:10;min-width:220px;padding:8px;background:var(--weiss);border:1px solid var(--linie);border-top:3px solid var(--gelb);box-shadow:0 18px 40px rgba(12,58,90,.18)}
.mehr__liste a{display:flex;justify-content:space-between;gap:12px;padding:7px 10px;font-size:13.5px;font-weight:600;color:var(--tinte)}
.mehr__liste a small{color:var(--gedaempft);font-weight:600}
.mehr__liste a:hover{background:var(--tint);color:var(--blau)}
.suche{position:relative;flex:0 0 220px}
.suche input{width:100%;height:40px;padding:0 12px 0 36px;border:1px solid var(--linie);border-radius:var(--radius);font:500 14px var(--schrift);color:var(--tinte);background:var(--weiss)}
.suche input:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(21,97,143,.15)}
.suche svg{position:absolute;left:11px;top:50%;translate:0 -50%;color:var(--gedaempft)}
@media (max-width:760px){.leiste{flex-wrap:wrap}.suche{flex:1 1 100%;order:-1}}

.aufmacher{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px 40px;align-items:stretch;padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--linie)}
@media (max-width:860px){.aufmacher{grid-template-columns:minmax(0,1fr)}}
.aufmacher__bild{display:block;overflow:hidden;border-radius:var(--radius);position:relative;min-height:260px}
.aufmacher__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
@media (max-width:860px){.aufmacher__bild{min-height:0;aspect-ratio:442/265}}
.aufmacher:hover .aufmacher__bild img{transform:scale(1.03)}
.aufmacher h2{font-size:clamp(24px,2.6vw,32px);margin-top:12px;line-height:1.12}
.aufmacher h2 a:hover{color:var(--blau)}
.aufmacher p{margin-top:14px;color:var(--gedaempft)}
.aufmacher .knopf{margin-top:22px}

.beitraege{row-gap:40px}
@media (min-width:601px) and (max-width:900px){.beitraege{grid-template-columns:repeat(2,minmax(0,1fr))}.beitrag + .beitrag{padding-top:0;border-top:0}}
.beitrag{padding-bottom:0;display:flex;flex-direction:column}
.beitrag h3{font-size:19px}
.beitrag p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.seiten{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:56px;padding-top:28px;border-top:1px solid var(--linie)}
.seiten a,.seiten span{min-width:40px;height:40px;display:inline-grid;place-items:center;padding:0 12px;border-radius:var(--radius);font-size:14px;font-weight:700;color:var(--tinte);border:1px solid var(--linie)}
.seiten a:hover{border-color:var(--blau);color:var(--blau)}
.seiten [aria-current]{background:var(--asphalt);border-color:var(--asphalt);color:#fff}
.seiten span.luecke{border:0;min-width:auto;padding:0 4px;color:var(--gedaempft)}
.seiten .weiter{margin-left:8px}