/* Blog · Magazin und Lesemodus
   Automatisch erzeugt aus dem Prototyp (AP 09) mit werkzeuge/css_kapseln.py (AP 18). Nicht von Hand ändern. */
.hds.hds .bv1{position: relative; background: var(--hg); padding: 100px 0 120px;}
.hds.hds .bv1-kopf{display: grid; gap: 18px; max-width: 760px;}
.hds.hds .bv1-kopf .hd-meta{margin-top: 6px;}
.hds.hds .bv1-feature{display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; margin-top: 64px;}
.hds.hds .bv1-feature .hd-bild{aspect-ratio: 16 / 11; box-shadow: var(--schatten-hoch);}
.hds.hds .bv1-feature .hd-bild .hd-chip{position: absolute; top: 18px; left: 18px;}
.hds.hds .bv1-feature-text{display: grid; gap: 18px;}
.hds.hds .bv1-feature-text h2{font-size: clamp(28px, 3vw, 44px);}
.hds.hds .bv1-feature-text p{color: var(--text-2); font-size: 17px;}
.hds.hds .bv1-leiste{position: sticky; top: calc(var(--hds-kopf, 77px) + 12px); z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--hds-kopf, 77px); padding: 8px; border-radius: 999px; background: rgba(255,255,255,.7); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), var(--schatten);}
.hds.hds .bv1-leiste .hd-feld{flex: 1 1 260px; box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .bv1-leiste .hd-segment{background: transparent; flex: 1 1 320px; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%;}
.hds.hds .bv1-leiste .hd-segment::-webkit-scrollbar{display: none;}
.hds.hds .bv1-leiste .hd-segment button{padding: 10px 16px; font-size: 14px;}
.hds.hds .bv1-leiste .hd-segment button small{font-weight: 600; color: var(--text-3); margin-left: 4px;}
.hds.hds .bv1-raster{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px;}
.hds.hds .bv1-karte{display: flex; flex-direction: column; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); overflow: hidden; transition: transform .7s var(--spring), box-shadow .7s var(--ease);}
.hds.hds .bv1-karte:hover{transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-hoch);}
.hds.hds .bv1-karte .hd-bild{aspect-ratio: 16 / 10; border-radius: 0;}
.hds.hds .bv1-karte .hd-bild .hd-chip{position: absolute; top: 14px; left: 14px;}
.hds.hds .bv1-karte .rumpf{display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1;}
.hds.hds .bv1-karte h3{font-size: 22px; line-height: 1.15;}
.hds.hds .bv1-karte p{font-size: 15px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.hds.hds .bv1-karte .fuss{display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px;}
.hds.hds .bv1-pfeil{width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--hell); color: var(--blau); transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--spring);}
.hds.hds .bv1-pfeil svg{width: 18px; height: 18px;}
.hds.hds .bv1-karte:hover .bv1-pfeil{background: var(--blau); color: #fff; transform: rotate(-45deg);}
.hds.hds .bv1-cta{display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; margin-top: var(--hds-kopf, 77px); padding: 36px 40px;}
.hds.hds .bv1-cta h3{font-size: 28px;}
.hds.hds .bv1-cta p{color: var(--text-2); margin-top: 6px;}
.hds.hds .bv1-cta form{display: flex; gap: 10px; align-items: center;}
.hds.hds .bv1-cta .hd-feld{width: 320px;}
@media (max-width: 1000px){.hds.hds .bv1-raster{grid-template-columns: repeat(2, 1fr);}
.hds.hds .bv1-feature{grid-template-columns: 1fr; gap: 28px;}}
@media (max-width: 767px){.hds.hds .bv1{padding: 70px 0 100px;}
.hds.hds .bv1-raster{grid-template-columns: 1fr; gap: 18px;}
.hds.hds .bv1-leiste{position: static; border-radius: 24px;}
.hds.hds .bv1-cta{grid-template-columns: 1fr; padding: 28px;}
.hds.hds .bv1-cta .hd-feld{width: 100%;}
.hds.hds .bv1-cta form{flex-direction: column; align-items: stretch;}}
.hds.hds .prosa{font-size: 18.5px; line-height: 1.72; color: var(--text);}
.hds.hds .prosa > * + *{margin-top: 1.25em;}
.hds.hds .prosa h2{font-size: clamp(26px, 2.6vw, 36px); margin-top: 2.2em; scroll-margin-top: calc(calc(var(--hds-kopf, 77px) + var(--hds-unternav, 0px)) + 30px);}
.hds.hds .prosa h3{font-size: 22px; margin-top: 1.8em; scroll-margin-top: calc(calc(var(--hds-kopf, 77px) + var(--hds-unternav, 0px)) + 30px);}
.hds.hds .prosa p{color: rgba(28,45,62,.86); text-wrap: pretty;}
.hds.hds .prosa blockquote{margin: 2em 0; padding: 0 0 0 28px; border-left: 3px solid var(--akzent); font-family: var(--kopf); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--text);}
.hds.hds .prosa figure{margin: 2.2em 0;}
.hds.hds .prosa figcaption{font-size: 14px; color: var(--text-3); margin-top: 12px;}
.hds.hds .prosa .kurz{display: grid; gap: 14px; padding: 28px 30px; margin: 2em 0;}
.hds.hds .prosa .kurz h4{font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--blau);}
.hds.hds .prosa .kurz ul{margin: 0; padding: 0; list-style: none; display: grid; gap: 10px;}
.hds.hds .prosa .kurz li{position: relative; padding-left: 30px; font-size: 16.5px; line-height: 1.5;}
.hds.hds .prosa .kurz li::before{content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--hell); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232154A6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E"); background-size: 11px; background-repeat: no-repeat; background-position: center;}
.hds.hds .prosa .cta{display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 30px 34px; margin: 3em 0; border-radius: 26px; background: var(--navy); color: #fff;}
.hds.hds .prosa .cta h4{font-size: 24px;}
.hds.hds .prosa .cta p{color: rgba(255,255,255,.7); margin-top: 6px; font-size: 16px;}
.hds.hds .autor{display: flex; gap: 18px; align-items: center; padding: 26px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin-top: 3em;}
.hds.hds .avatar{width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--akzent), var(--blau)); color: #fff; font-family: var(--kopf); font-weight: 800; font-size: 18px; flex: none;}
.hds.hds .avatar.klein{width: 34px; height: 34px; font-size: 12px;}
.hds.hds .autor b{font-family: var(--kopf); font-size: 17px;}
.hds.hds .autor p{font-size: 15px; color: var(--text-2); margin-top: 2px;}
.hds.hds .weiter{margin-top: 3.5em;}
.hds.hds .weiter h4{font-size: 24px; margin-bottom: 20px;}
.hds.hds .weiter-raster{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.hds.hds .weiter-karte{display: grid; gap: 10px;}
.hds.hds .weiter-karte .hd-bild{aspect-ratio: 16 / 10; border-radius: 18px;}
.hds.hds .weiter-karte h5{font-family: var(--kopf); font-size: 18px; letter-spacing: -.02em; line-height: 1.2; margin: 0;}
.hds.hds .weiter-karte span{font-size: 13px; color: var(--text-3);}
@media (max-width: 767px){.hds.hds .prosa{font-size: 17px;}
.hds.hds .prosa .cta{grid-template-columns: 1fr;}
.hds.hds .weiter-raster{grid-template-columns: 1fr;}}
.hds.hds .av1{position: relative; background: #fff; padding: 80px 0 120px;}
.hds.hds .av1-hero{display: grid; gap: 22px; justify-items: center; text-align: center; max-width: 900px; margin: 0 auto;}
.hds.hds .av1-hero .hd-h1{font-size: clamp(34px, 4.6vw, 62px);}
.hds.hds .av1-hero .hd-lead{text-align: center;}
.hds.hds .av1-hero .hd-meta{justify-content: center;}
.hds.hds .av1-bild{aspect-ratio: 21 / 9; margin-top: 48px; border-radius: 30px; box-shadow: var(--schatten-hoch);}
.hds.hds .av1-grid{display: grid; grid-template-columns: 220px minmax(0, 720px) 60px; justify-content: center; gap: 64px; margin-top: 64px;}
.hds.hds .av1-toc{position: sticky; top: calc(calc(var(--hds-kopf, 77px) + var(--hds-unternav, 0px)) + 30px); align-self: start; display: grid; gap: 4px; font-size: 14.5px;}
.hds.hds .av1-toc h4{font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px;}
.hds.hds .av1-toc a{position: relative; padding: 7px 0 7px 18px; color: var(--text-2); transition: color .3s; border-left: 1px solid var(--linie);}
.hds.hds .av1-toc a.h3{padding-left: 30px; font-size: 13.5px;}
.hds.hds .av1-toc a::before{content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--blau); transform: scaleY(0); transition: transform .35s var(--ease);}
.hds.hds .av1-toc a.aktiv{color: var(--text); font-weight: 600;}
.hds.hds .av1-toc a.aktiv::before{transform: scaleY(1);}
.hds.hds .av1-teilen{position: sticky; top: calc(calc(var(--hds-kopf, 77px) + var(--hds-unternav, 0px)) + 30px); align-self: start; display: grid; gap: 8px;}
.hds.hds .av1-teilen a,.hds.hds .av1-teilen button{width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--hg); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--linie); transition: transform .5s var(--spring), background .3s, color .3s;}
.hds.hds .av1-teilen a:hover,.hds.hds .av1-teilen button:hover{transform: scale(1.1); background: var(--blau); color: #fff;}
.hds.hds .av1-teilen svg{width: 18px; height: 18px;}
@media (max-width: 1100px){.hds.hds .av1-grid{grid-template-columns: minmax(0, 720px);}
.hds.hds .av1-toc,.hds.hds .av1-teilen{display: none;}}
@media (max-width: 767px){.hds.hds .av1{padding: 50px 0 100px;}
.hds.hds .av1-bild{border-radius: 20px; margin-top: 30px;}}

/* Filterleiste (AP 22): „Alle“ bleibt links stehen, die Rubriken scrollen daneben (auch mit dem Mausrad, hd-global.js);
   rechts ein weicher Rand als Zeichen, dass es weitergeht. */
.hds.hds .bv1-leiste .hd-segment{position: relative; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 30px;}
.hds.hds .bv1-leiste .hd-segment button:first-child{position: sticky; left: 0; z-index: 2; box-shadow: 10px 0 14px -10px rgba(11, 37, 69, .35);}
.hds.hds .bv1-leiste .hd-segment button:first-child{background: #fff;}
/* 4.6.5: ohne Innenabstand links klebt „Alle“ bündig am Rand, vorher schaute im 5-px-Streifen davor der Rest des Nachbar-Chips hervor. */
.hds.hds .bv1-leiste .hd-segment{padding-left: 0;}
.hds.hds .bv1-leiste .hd-segment button:first-child[aria-pressed="true"]{box-shadow: 10px 0 14px -10px rgba(11, 37, 69, .35), inset 0 0 0 1.5px rgba(46, 167, 255, .55);}

/* Artikel (AP 22): Kopf kompakter, damit unten sichtbar ist, dass es weitergeht; Autor führt zur Teamseite;
   rechte Seitenleiste mit Teilen-Zeile und drei Karten (Check passend zum Beitrag, passende Leistung, Erstgespräch). */
.hds.hds .av1--kopf{padding: clamp(24px, 3vw, 40px) 0 0;}
.hds.hds .av1--kopf .av1-hero{gap: 12px;}
.hds.hds .av1--kopf .av1-hero .hd-h1{font-size: clamp(30px, 3.6vw, 50px);}
.hds.hds .av1--kopf .av1-hero .hd-lead{font-size: clamp(16px, 1.3vw, 18.5px);}
/* 4.15.6: 10:3 schnitt die 16:9-Titelbilder auf gut die Hälfte (Motive oben abgeschnitten). 2:1 zeigt fast das ganze Bild. */
.hds.hds .av1--kopf .av1-bild{aspect-ratio: 2 / 1; margin-top: 24px;}
.hds.hds .av1--inhalt{padding-top: 0;}
.hds.hds .av1--inhalt .av1-grid{margin-top: clamp(36px, 4vw, 56px);}
.hds.hds .av1-autor{display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; border-radius: 99px; padding-right: 6px; transition: color .3s;}
.hds.hds .av1-autor:hover{color: var(--blau);}
.hds.hds .av1-autor:hover span:last-child{text-decoration: underline; text-underline-offset: 3px;}
.hds.hds a.autor{color: inherit; text-decoration: none; transition: box-shadow .35s, transform .45s var(--spring);}
.hds.hds a.autor:hover{transform: translateY(-2px);}
.hds.hds .autor-mehr{display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: 700 13.5px/1 var(--kopf); color: var(--blau);}
.hds.hds .autor-mehr svg{width: 14px; height: 14px;}
.hds.hds .av1-grid--karten{grid-template-columns: 200px minmax(0, 700px) 230px; gap: 48px;}
.hds.hds .av1-rechts{position: sticky; top: calc(calc(var(--hds-kopf, 77px) + var(--hds-unternav, 0px)) + 30px); align-self: start; display: grid; gap: 16px;}
.hds.hds .av1-rechts .av1-teilen{position: static; display: flex; gap: 8px;}
.hds.hds .av1-rechts .av1-teilen a,.hds.hds .av1-rechts .av1-teilen button{width: 40px; height: 40px;}
.hds.hds .av1-karten{display: grid; gap: 12px;}
.hds.hds .av1-karte{position: relative; display: grid; gap: 6px; padding: 16px 16px 18px; border-radius: 20px; background: var(--hg); box-shadow: inset 0 0 0 1px var(--linie); color: var(--text); text-decoration: none;}
.hds.hds .av1-karte small{font: 700 10.5px/1.2 var(--kopf); letter-spacing: .12em; text-transform: uppercase; color: var(--blau);}
.hds.hds .av1-karte b{font: 800 16.5px/1.25 var(--kopf); letter-spacing: -.01em;}
.hds.hds .av1-karte span{font-size: 13.5px; line-height: 1.45; color: var(--text-2);}
.hds.hds .av1-karte svg{width: 14px; height: 14px; vertical-align: -2px;}
.hds.hds .av1-karte--check{background: linear-gradient(160deg, #0b2545, #123a73); color: #fff; box-shadow: 0 24px 50px -30px rgba(11, 37, 69, .7);}
.hds.hds .av1-karte--check small{color: #8fd0ff;}
.hds.hds .av1-karte--check .hd-btn{justify-self: start; margin-top: 6px; --bg: #fff; --fg: var(--navy); padding: 10px 14px; font-size: 13px;}
.hds.hds a.av1-karte--leistung{transition: transform .45s var(--spring), box-shadow .35s;}
.hds.hds a.av1-karte--leistung:hover{transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds a.av1-karte--leistung span{color: var(--blau); font-weight: 700; font-family: var(--kopf); font-size: 13px;}
.hds.hds .av1-karte--kontakt{background: #fff;}
.hds.hds .av1-karte--kontakt img{width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; box-shadow: 0 8px 18px -10px rgba(11, 37, 69, .5);}
.hds.hds .av1-karte--kontakt .tel{font: 700 15px/1.2 var(--kopf); color: var(--text); text-decoration: none; margin-top: 4px;}
.hds.hds .av1-karte--kontakt .mehr{font: 700 13px/1.2 var(--kopf); color: var(--blau); text-decoration: none;}
@media (max-width: 1280px){.hds.hds .av1-grid--karten{grid-template-columns: minmax(0, 700px) 230px; justify-content: center;}
.hds.hds .av1-grid--karten .av1-toc{display: none;}}
@media (max-width: 1100px){.hds.hds .av1-grid--karten{grid-template-columns: minmax(0, 720px);}
.hds.hds .av1-grid--karten .av1-rechts{display: grid; position: static;}
.hds.hds .av1-grid--karten .av1-rechts .av1-teilen{display: none;}
.hds.hds .av1-karten{grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}}
@media (max-width: 767px){.hds.hds .av1--kopf .av1-bild{aspect-ratio: 16 / 9;}}