/* Leistungsseiten, Unterseiten, Leistungsübersicht
   Automatisch erzeugt aus dem Prototyp (AP 09) mit werkzeuge/css_kapseln.py (AP 18). Nicht von Hand ändern. */
.hds.hds .variante{display: none;}
.hds.hds .variante.aktiv{display: block;}
.hds.hds .ls{padding: clamp(72px, 9vw, 128px) 0; position: relative;}
.hds.hds .ls.tint{background: var(--hg);}
.hds.hds .ls.dunkel{background: var(--navy); color: #fff;}
.hds.hds .ls.dunkel .hd-lead{color: rgba(255,255,255,.72);}
.hds.hds .ls.dunkel .hd-eyebrow{color: var(--akzent);}
.hds.hds .ls-kopf{display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px);}
.hds.hds .ls-kopf.mitte{margin-inline: auto; text-align: center; justify-items: center;}
.hds.hds .ls-kopf .hd-h2{font-size: clamp(30px, 3.8vw, 52px);}
.hds.hds .ls-akzent{color: var(--akzent);}
.hds.hds .ls.dunkel .ls-akzent{color: var(--akzent);}
.hds.hds .ls-pains{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.hds.hds .ls-pain{position: relative; padding: 30px 28px 28px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); overflow: hidden;}
.hds.hds .dunkel .ls-pain{background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);}
.hds.hds .ls-pain i{position: absolute; right: 18px; top: 8px; font-family: var(--kopf); font-size: 84px; font-weight: 800; letter-spacing: -.06em; color: rgba(28,45,62,.06); font-style: normal; line-height: 1;}
.hds.hds .dunkel .ls-pain i{color: rgba(255,255,255,.06);}
.hds.hds .ls-pain h3{font-size: 21px; margin-bottom: 10px;}
.hds.hds .ls-pain p{font-size: 15.5px; color: var(--text-2); line-height: 1.55;}
.hds.hds .dunkel .ls-pain p{color: rgba(255,255,255,.66);}
.hds.hds .ls-pain .strich{display: block; width: 36px; height: 3px; border-radius: 3px; background: #FF8A8A; margin-bottom: 18px;}
.hds.hds .ls-karten{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.hds.hds .ls-karten.zwei{grid-template-columns: repeat(2, 1fr);}
.hds.hds .ls-karten.vier{grid-template-columns: repeat(4, 1fr);}
.hds.hds .ls-karte{display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); transition: transform .6s var(--spring), box-shadow .6s var(--ease);}
.hds.hds a.ls-karte:hover{transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-hoch);}
.hds.hds .dunkel .ls-karte{background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);}
.hds.hds .ls-karte .ico{width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: var(--hell); color: var(--blau);}
.hds.hds .dunkel .ls-karte .ico{background: rgba(46,167,255,.16); color: var(--akzent);}
.hds.hds .ls-karte .ico svg{width: 24px; height: 24px;}
.hds.hds .ls-karte small{font-family: var(--kopf); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--text-3);}
.hds.hds .dunkel .ls-karte small{color: rgba(255,255,255,.5);}
.hds.hds .ls-karte h3{font-size: 20px;}
.hds.hds .ls-karte p{font-size: 15px; color: var(--text-2); line-height: 1.55;}
.hds.hds .dunkel .ls-karte p{color: rgba(255,255,255,.7);}
.hds.hds .ls-karte .pfeil{margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--kopf); font-weight: 700; color: var(--blau); font-size: 15px;}
.hds.hds .ls-karte .pfeil svg{width: 16px; height: 16px; transition: transform .4s var(--spring);}
.hds.hds a.ls-karte:hover .pfeil svg{transform: translateX(4px);}
.hds.hds .ls-karte .bild{aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--hell); margin: -8px -8px 6px;}
.hds.hds .ls-karte .bild img{width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease);}
.hds.hds a.ls-karte:hover .bild img{transform: scale(1.05);}
.hds.hds .ls-split{display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center;}
.hds.hds .ls-split.flip > .ls-medium{order: -1;}
.hds.hds .ls-split .ls-text{display: grid; gap: 18px;}
.hds.hds .ls-split .hd-h2{font-size: clamp(28px, 3.4vw, 46px);}
.hds.hds .ls-medium{position: relative;}
.hds.hds .ls-objekt{position: relative; display: grid; place-items: center;}
.hds.hds .ls-objekt img{width: min(100%, 560px); mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 50% 44% at 50% 46%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 50% 44% at 50% 46%, #000 60%, transparent 100%); animation: hds-ls-schweb 7s ease-in-out infinite;}
.hds.hds .dunkel .ls-objekt img{mix-blend-mode: screen;}
@keyframes hds-ls-schweb{50% { transform: translateY(-12px); }}
.hds.hds .ls-objekt::before{content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(46,167,255,.22), transparent 65%); filter: blur(10px);}
.hds.hds .ls-ticks{display: grid; gap: 12px; margin: 6px 0 4px; padding: 0; list-style: none;}
.hds.hds .ls-ticks li{display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.5;}
.hds.hds .ls-ticks li::before{content: ""; width: 22px; height: 22px; 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: 12px; background-repeat: no-repeat; background-position: center; margin-top: 2px;}
.hds.hds .dunkel .ls-ticks li::before{background-color: rgba(46,167,255,.2);}
.hds.hds .ls-pillen{position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.8); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 14px 30px -14px rgba(28,45,62,.35); font-family: var(--kopf); font-weight: 700; font-size: 14px; animation: hds-ls-schweb 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.6s);}
.hds.hds .ls-pillen b{color: var(--blau);}
.hds.hds .ls-pillen i{width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 0 rgba(46,167,255,.6); animation: hds-pv2-puls 1.8s infinite;}
@keyframes hds-pv2-puls{70% { box-shadow: 0 0 0 8px rgba(46,167,255,0); } 100% { box-shadow: 0 0 0 0 rgba(46,167,255,0); }}
.hds.hds .ls-schritte{position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 20px;}
.hds.hds .ls-schritte::before{content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 2px; background: var(--linie);}
.hds.hds .ls-schritte::after{content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 2px; background: linear-gradient(90deg, var(--blau), var(--akzent)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .2s;}
.hds.hds .ist-da .ls-schritte::after,.hds.hds .ls-schritte.ist-da::after{transform: scaleX(1);}
.hds.hds .ls-schritt{display: grid; gap: 12px;}
.hds.hds .ls-schritt b{position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--blau); color: var(--blau); font-family: var(--kopf); font-size: 16px;}
.hds.hds .dunkel .ls-schritt b{background: var(--navy);}
.hds.hds .ls-schritt small{font-family: var(--kopf); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 700;}
.hds.hds .ls-schritt h3{font-size: 20px;}
.hds.hds .ls-schritt p{font-size: 15px; color: var(--text-2); line-height: 1.5;}
.hds.hds .dunkel .ls-schritt p{color: rgba(255,255,255,.66);}
.hds.hds .ls-zahlen{display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.hds.hds .ls-zahl{padding: 28px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .dunkel .ls-zahl{background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);}
.hds.hds .ls-zahl b{display: block; font-family: var(--kopf); font-size: clamp(38px, 4vw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--blau);}
.hds.hds .dunkel .ls-zahl b{color: #fff;}
.hds.hds .ls-zahl b{white-space: nowrap;}
.hds.hds .ls-zahl b sup{position: relative; top: -.95em; vertical-align: baseline; line-height: 0; font-size: .44em; margin-left: .06em; color: var(--akzent);}
.hds.hds .ls-zahl p{font-size: 15px; color: var(--text-2); margin-top: 10px; line-height: 1.45;}
.hds.hds .dunkel .ls-zahl p{color: rgba(255,255,255,.66);}
.hds.hds .ls-bento{display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 16px;}
.hds.hds .ls-bento a,.hds.hds .ls-bento div.kachel{position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; border-radius: 24px; overflow: hidden; color: #fff; isolation: isolate;}
.hds.hds .ls-bento .breit{grid-column: span 2;}
.hds.hds .ls-bento .hoch{grid-row: span 2;}
.hds.hds .ls-bento img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.1s var(--ease);}
.hds.hds .ls-bento a:hover img{transform: scale(1.05);}
.hds.hds .ls-bento a::before,.hds.hds .ls-bento div.kachel::before{content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,22,47,.85), rgba(6,22,47,.1) 60%, transparent);}
.hds.hds .ls-bento small{font-family: var(--kopf); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.7);}
.hds.hds .ls-bento h3{font-size: 22px; margin-top: 6px;}
.hds.hds .ls-bento p{font-size: 14px; color: rgba(255,255,255,.75); margin-top: 4px;}
.hds.hds .ls-fit{display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.hds.hds .ls-fit div{padding: 30px; border-radius: 24px;}
.hds.hds .ls-fit .ja{background: linear-gradient(160deg, #EAF4FF, #fff); box-shadow: inset 0 0 0 1px rgba(46,167,255,.35);}
.hds.hds .ls-fit .nein{background: #fff; box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .ls-fit h3{font-size: 22px; margin-bottom: 16px;}
.hds.hds .ls-fit ul{margin: 0; padding: 0; list-style: none; display: grid; gap: 10px;}
.hds.hds .ls-fit li{position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: var(--text-2);}
.hds.hds .ls-fit .ja li{color: var(--text);}
.hds.hds .ls-fit li::before{content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%;}
.hds.hds .ls-fit .ja li::before{background: var(--blau); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E"); background-size: 10px; background-repeat: no-repeat; background-position: center;}
.hds.hds .ls-fit .nein li::before{background: rgba(28,45,62,.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2D3E' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E"); background-size: 10px; background-repeat: no-repeat; background-position: center;}
.hds.hds .ls-faq{display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.hds.hds .ls-faq details{border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); padding: 0 24px; transition: box-shadow .4s;}
.hds.hds .ls-faq details[open]{box-shadow: inset 0 0 0 1px rgba(46,167,255,.4), var(--schatten);}
.hds.hds .ls-faq summary{list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-family: var(--kopf); font-weight: 700; font-size: 17px;}
.hds.hds .ls-faq summary::-webkit-details-marker{display: none;}
.hds.hds .ls-faq summary i{flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--hell); display: grid; place-items: center; transition: transform .5s var(--spring), background .3s;}
.hds.hds .ls-faq summary i::before{content: ""; width: 10px; height: 10px; border-right: 2px solid var(--blau); border-bottom: 2px solid var(--blau); transform: rotate(45deg) translate(-2px, -2px);}
.hds.hds .ls-faq details[open] summary i{transform: rotate(180deg); background: var(--blau);}
.hds.hds .ls-faq details[open] summary i::before{border-color: #fff;}
.hds.hds .ls-faq p{padding: 0 0 22px; font-size: 15.5px; color: var(--text-2); line-height: 1.6;}
.hds.hds .ls-preise{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch;}
.hds.hds .ls-paket{position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .ls-paket.hervor{background: var(--navy); color: #fff; box-shadow: 0 30px 70px -30px rgba(6,22,47,.7); transform: scale(1.02);}
.hds.hds .ls-paket .badge{position: absolute; top: -14px; left: 30px; padding: 6px 12px; border-radius: 999px; background: var(--akzent); color: #fff; font-family: var(--kopf); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;}
.hds.hds .ls-paket h3{font-size: 24px;}
.hds.hds .ls-paket .fuer{font-size: 14px; color: var(--text-2);}
.hds.hds .hervor .fuer{color: rgba(255,255,255,.66);}
.hds.hds .ls-paket .preis{font-family: var(--kopf); font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1;}
.hds.hds .ls-paket .preis small{font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--text-2); margin-left: 6px;}
.hds.hds .hervor .preis small{color: rgba(255,255,255,.66);}
.hds.hds .ls-paket .hinweis{font-size: 12.5px; color: var(--text-3);}
.hds.hds .hervor .hinweis{color: rgba(255,255,255,.5);}
.hds.hds .ls-paket ul{margin: 0; padding: 18px 0 0; list-style: none; display: grid; gap: 9px; border-top: 1px solid var(--linie);}
.hds.hds .hervor ul{border-top-color: rgba(255,255,255,.12);}
.hds.hds .ls-paket li{position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45;}
.hds.hds .ls-paket li::before{content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E"); background-size: 9px; background-repeat: no-repeat; background-position: center;}
.hds.hds .hervor li::before{background-color: rgba(46,167,255,.25); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E");}
.hds.hds .ls-paket li.nicht{color: var(--text-3); text-decoration: line-through;}
.hds.hds .ls-paket li.nicht::before{background-image: none; background-color: rgba(28,45,62,.08);}
.hds.hds .hervor li.nicht{color: rgba(255,255,255,.35);}
.hds.hds .ls-paket .hd-btn{margin-top: auto; justify-content: center;}
.hds.hds .ls-addons{display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px;}
.hds.hds .ls-addon{padding: 18px 20px; border-radius: 18px; background: var(--hg); box-shadow: inset 0 0 0 1px var(--linie); font-size: 14px;}
.hds.hds .ls-addon b{display: block; font-family: var(--kopf); font-size: 15px;}
.hds.hds .ls-addon span{color: var(--text-2); display: block; margin: 2px 0 8px;}
.hds.hds .ls-addon em{font-style: normal; font-family: var(--kopf); font-weight: 700; color: var(--blau);}
.hds.hds .ls-preishinweis{margin-top: 16px; font-size: 13px; color: var(--text-3);}
.hds.hds .ls-cta{position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 30px; padding: clamp(36px, 5vw, 64px); border-radius: 32px; background: radial-gradient(900px 500px at 80% 20%, #1c4a99, var(--navy) 60%); color: #fff;}
.hds.hds .ls-cta h2{font-size: clamp(30px, 3.6vw, 48px);}
.hds.hds .ls-cta p{color: rgba(255,255,255,.72); margin-top: 12px; font-size: 17px; max-width: 46ch;}
.hds.hds .ls-cta .knoepfe{display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px;}
.hds.hds .ls-cta .ls-objekt img{mix-blend-mode: screen; width: min(100%, 380px);}
.hds.hds .ls-schiene{display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 6px 26px; margin: 0 -6px; scrollbar-width: none;}
.hds.hds .ls-schiene::-webkit-scrollbar{display: none;}
.hds.hds .ls-ref{flex: 0 0 min(380px, 82vw); scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); transition: transform .6s var(--spring);}
.hds.hds .ls-ref:hover{transform: translateY(-4px);}
.hds.hds .ls-ref .hd-bild{aspect-ratio: 16 / 10; border-radius: 0;}
.hds.hds .ls-ref .rumpf{padding: 18px 20px 22px; display: grid; gap: 6px;}
.hds.hds .ls-ref small{font-family: var(--kopf); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--blau);}
.hds.hds .ls-ref h3{font-size: 19px;}
.hds.hds .ls-ref p{font-size: 14.5px; color: var(--text-2);}
.hds.hds .ls-unter{display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
.hds.hds .ls-unter a{display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 22px 24px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); transition: transform .5s var(--spring), box-shadow .5s;}
.hds.hds .ls-unter a:hover{transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-hoch);}
.hds.hds .ls-unter b{font-family: var(--kopf); font-size: 18px; display: block;}
.hds.hds .ls-unter span{font-size: 14px; color: var(--text-2);}
.hds.hds .ls-unter .bv1-pfeil{flex: none;}
.hds.hds .ls-unter a:hover .bv1-pfeil{background: var(--blau); color: #fff; transform: rotate(-45deg);}
.hds.hds .ls-brot{display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--text-3); margin-bottom: 20px; flex-wrap: wrap;}
.hds.hds .ls-brot a{color: var(--text-2);}
.hds.hds .ls-brot a:hover{color: var(--blau);}
.hds.hds .ls-sticky{display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start;}
.hds.hds .ls-sticky .fest{position: sticky; top: calc(calc(var(--hds-kopf, 77px) + var(--hds-unternav, 0px)) + 30px);}
.hds.hds .ls-sticky .fest .hd-bild{aspect-ratio: 4 / 3; box-shadow: var(--schatten-hoch);}
.hds.hds .ls-stationen{display: grid; gap: 14px;}
.hds.hds .ls-station{display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 22px 24px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow .4s, transform .5s var(--spring);}
.hds.hds .ls-station.aktiv{box-shadow: inset 0 0 0 1px rgba(46,167,255,.45), var(--schatten); transform: translateX(6px);}
.hds.hds .ls-station small{font-family: var(--kopf); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blau); font-weight: 700; padding-top: 4px;}
.hds.hds .ls-station h3{font-size: 19px; margin-bottom: 6px;}
.hds.hds .ls-station p{font-size: 15px; color: var(--text-2); line-height: 1.5;}
.hds.hds .ls-screen{position: relative; aspect-ratio: 16 / 9; border-radius: 18px; background: #0b1424; padding: 10px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.12);}
.hds.hds .ls-screen::after{content: ""; position: absolute; left: 50%; bottom: -34px; width: 30%; height: 34px; transform: translateX(-50%); background: linear-gradient(to bottom, rgba(11,20,36,.9), rgba(11,20,36,.2)); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); border-radius: 0 0 8px 8px;}
.hds.hds .ls-screen .flaeche{position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #fff; isolation: isolate;}
.hds.hds .ls-slide{position: absolute; inset: 0; display: grid; align-content: end; gap: 6px; padding: 8%; opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease), transform 1.2s var(--ease);}
.hds.hds .ls-slide.aktiv{opacity: 1; transform: none;}
.hds.hds .ls-slide img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.hds.hds .ls-slide::before{content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,22,47,.9), rgba(6,22,47,.2) 55%, transparent);}
.hds.hds .ls-slide small{font-family: var(--kopf); font-size: clamp(9px, 1.1vw, 12px); letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); font-weight: 700;}
.hds.hds .ls-slide b{font-family: var(--kopf); font-size: clamp(16px, 2.4vw, 30px); letter-spacing: -.03em; line-height: 1.05; color: #fff;}
.hds.hds .ls-slide span{font-size: clamp(10px, 1.2vw, 14px); color: rgba(255,255,255,.75);}
.hds.hds .ls-slide.hell::before{display: none;}
.hds.hds .ls-slide.hell{background: linear-gradient(160deg, #fff, #E6F3FC); color: var(--text); align-content: center;}
.hds.hds .ls-slide.hell b{color: var(--navy);}
.hds.hds .ls-slide.hell span{color: var(--text-2);}
.hds.hds .ls-slide.hell small{color: var(--blau);}
.hds.hds .ls-screen .balken{position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; z-index: 2; background: rgba(255,255,255,.15);}
.hds.hds .ls-screen .balken i{display: block; height: 100%; width: 0; background: var(--akzent);}
.hds.hds .ls-screen .balken i.lauf{animation: hds-ls-balken var(--takt, 3.2s) linear forwards;}
@keyframes hds-ls-balken{to { width: 100%; }}
.hds.hds .ls-screen .uhr{position: absolute; top: 16px; right: 18px; z-index: 2; font-family: var(--kopf); font-size: clamp(10px, 1.1vw, 13px); font-weight: 700; color: rgba(255,255,255,.85); padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.25); backdrop-filter: blur(6px);}
.hds.hds .ls-werkzeug{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; padding: clamp(22px, 3vw, 36px); border-radius: 30px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-hoch);}
.hds.hds .ls-werkzeug .form{display: grid; gap: 22px; align-content: start;}
.hds.hds .ls-werkzeug label.titel,.hds.hds .ls-feldgruppe > .titel{display: block; font-family: var(--kopf); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--text-3); margin-bottom: 10px;}
.hds.hds .ls-chips{display: flex; flex-wrap: wrap; gap: 8px;}
.hds.hds .ls-chips button{padding: 10px 15px; border-radius: 999px; font-family: var(--kopf); font-weight: 700; font-size: 14px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--linie); background: #fff; transition: background .3s, color .3s, transform .4s var(--spring), box-shadow .3s;}
.hds.hds .ls-chips button:hover{transform: translateY(-2px);}
.hds.hds .ls-chips button[aria-pressed="true"]{background: var(--navy); color: #fff; box-shadow: none;}
.hds.hds .ls-stepper{display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(28,45,62,.06);}
.hds.hds .ls-stepper button{width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: var(--schatten); font-size: 20px; font-weight: 700; color: var(--blau); transition: transform .4s var(--spring);}
.hds.hds .ls-stepper button:active{transform: scale(.9);}
.hds.hds .ls-stepper output{min-width: 56px; text-align: center; font-family: var(--kopf); font-weight: 800; font-size: 22px;}
.hds.hds .ls-regler{-webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--blau) var(--p, 30%), rgba(28,45,62,.12) var(--p, 30%)); outline: none;}
.hds.hds .ls-regler::-webkit-slider-thumb{-webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(28,45,62,.3), inset 0 0 0 2px var(--blau); cursor: grab;}
.hds.hds .ls-reglerwert{font-family: var(--kopf); font-weight: 800; font-size: 20px; margin-top: 8px;}
.hds.hds .ls-ausgabe{display: grid; gap: 18px; align-content: start;}
.hds.hds .ls-ergebnis{display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
.hds.hds .ls-ergebnis div{padding: 16px 18px; border-radius: 18px; background: var(--hg); box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .ls-ergebnis b{display: block; font-family: var(--kopf); font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--blau); line-height: 1;}
.hds.hds .ls-ergebnis span{font-size: 13px; color: var(--text-2); display: block; margin-top: 6px;}
.hds.hds .ls-empfehlung{display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 20px; background: var(--navy); color: #fff;}
.hds.hds .ls-empfehlung small{font-family: var(--kopf); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); font-weight: 700;}
.hds.hds .ls-empfehlung b{display: block; font-family: var(--kopf); font-size: 22px; margin-top: 2px;}
.hds.hds .ls-empfehlung span{font-size: 13.5px; color: rgba(255,255,255,.66); display: block; margin-top: 4px;}
.hds.hds .ls-empfehlung .preis{font-family: var(--kopf); font-size: 28px; font-weight: 800; text-align: right; letter-spacing: -.03em;}
.hds.hds .ls-empfehlung .preis small{display: block; color: rgba(255,255,255,.5); letter-spacing: 0; text-transform: none; font-size: 12px;}
.hds.hds .ls-playlist{display: grid; gap: 8px; margin: 0; padding: 0; list-style: none;}
.hds.hds .ls-playlist li{display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--hg); font-size: 14.5px; transition: background .3s, transform .4s var(--spring);}
.hds.hds .ls-playlist li.aktiv{background: var(--hell); transform: translateX(4px);}
.hds.hds .ls-playlist li b{width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-family: var(--kopf); font-size: 12px; color: var(--blau); box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .ls-playlist li span{color: var(--text-3); font-size: 13px; font-family: var(--kopf); font-weight: 700;}
.hds.hds .ls-hinweis{font-size: 12.5px; color: var(--text-3); line-height: 1.5;}
.hds.hds .ls-formate{display: flex; flex-wrap: wrap; gap: 8px;}
.hds.hds .ls-formate span{padding: 8px 12px; border-radius: 999px; background: var(--hell); color: var(--blau); font-family: var(--kopf); font-weight: 700; font-size: 13px; opacity: 0; transform: translateY(6px) scale(.96); animation: hds-ls-rein .5s var(--spring) forwards; animation-delay: calc(var(--i) * 60ms);}
@keyframes hds-ls-rein{to { opacity: 1; transform: none; }}
.hds.hds .ls-woche{display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;}
.hds.hds .ls-tag{display: grid; gap: 6px; align-content: start; min-height: 130px; padding: 10px 8px; border-radius: 16px; background: var(--hg); box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .ls-tag small{font-family: var(--kopf); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--text-3); text-align: center;}
.hds.hds .ls-post{display: grid; gap: 2px; padding: 8px 9px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); font-size: 11.5px; line-height: 1.25; opacity: 0; transform: translateY(6px); animation: hds-ls-rein .5s var(--spring) forwards; animation-delay: calc(var(--i) * 70ms);}
.hds.hds .ls-post b{font-family: var(--kopf); font-size: 11.5px; color: var(--blau);}
.hds.hds .ls-post.reel b{color: #D6457A;}
.hds.hds .ls-post.story b{color: #E0891F;}
.hds.hds .ls-post.linkedin b{color: #0A66C2;}
.hds.hds .ls-post.tiktok b{color: #111;}
.hds.hds .ls-post span{color: var(--text-3); font-size: 10.5px;}
.hds.hds .ls-drehtag{display: grid; gap: 0; position: relative; padding-left: 26px;}
.hds.hds .ls-drehtag::before{content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--linie);}
.hds.hds .ls-stunde{position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 8px 0; font-size: 14.5px;}
.hds.hds .ls-stunde::before{content: ""; position: absolute; left: -24px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--blau);}
.hds.hds .ls-stunde b{font-family: var(--kopf); color: var(--blau); font-size: 13.5px;}
.hds.hds .ls-stunde span{color: var(--text-2);}
.hds.hds .ls-phones{position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 18px; perspective: 1400px;}
.hds.hds .ls-phone{width: 210px; aspect-ratio: 9 / 18.5; border-radius: 34px; background: #0b1424; padding: 10px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.14); transform: rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .8s var(--ease);}
.hds.hds .ls-phone .flaeche{position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: #fff;}
.hds.hds .ls-phone .kopfzeile{display: flex; align-items: center; gap: 8px; padding: 26px 14px 10px; font-family: var(--kopf); font-weight: 700; font-size: 12px; color: var(--text); border-bottom: 1px solid var(--linie);}
.hds.hds .ls-phone .kopfzeile i{width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--akzent), var(--blau));}
.hds.hds .ls-phone .feed{display: grid; gap: 10px; padding: 12px; animation: hds-ls-feed 14s linear infinite;}
.hds.hds .ls-phone:hover .feed{animation-play-state: paused;}
@keyframes hds-ls-feed{to { transform: translateY(-50%); }}
.hds.hds .ls-postkarte{display: grid; gap: 6px;}
.hds.hds .ls-postkarte .bild{aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--hell);}
.hds.hds .ls-postkarte .bild img{width: 100%; height: 100%; object-fit: cover;}
.hds.hds .ls-postkarte .bild.quer{aspect-ratio: 16 / 10;}
.hds.hds .ls-postkarte p{font-size: 10.5px; line-height: 1.35; color: var(--text-2);}
.hds.hds .ls-postkarte p b{color: var(--text); font-family: var(--kopf);}
.hds.hds .ls-postkarte .zeile{display: flex; gap: 10px; font-size: 10px; color: var(--text-3);}
.hds.hds .ls-bubbles{position: relative; display: grid; gap: 12px; max-width: 420px;}
.hds.hds .ls-bubble{max-width: 86%; padding: 12px 16px; border-radius: 20px; font-size: 14.5px; line-height: 1.4; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); opacity: 0; transform: translateY(10px) scale(.96); animation: hds-ls-rein .6s var(--spring) forwards; animation-delay: calc(var(--i) * 900ms);}
.hds.hds .ls-bubble.wir{margin-left: auto; background: var(--blau); color: #fff; box-shadow: none;}
.hds.hds .ls-bubble small{display: block; font-size: 11px; opacity: .6; margin-top: 4px;}
.hds.hds .ls-kalender{display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;}
.hds.hds .ls-kalender div{aspect-ratio: 1; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); display: grid; place-items: center; font-family: var(--kopf); font-size: 12px; color: var(--text-3); position: relative;}
.hds.hds .ls-kalender div.post::after{content: ""; position: absolute; bottom: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--blau); transform: scale(0); animation: hds-ls-punkt .5s var(--spring) forwards; animation-delay: calc(var(--i) * 90ms);}
.hds.hds .ls-kalender div.reel::after{background: #D6457A;}
.hds.hds .ls-kalender div.story::after{background: #E0891F;}
@keyframes hds-ls-punkt{to { transform: scale(1); }}
.hds.hds .ls-hero{position: relative; overflow: hidden;}
.hds.hds .ls-hero .hd-h1{font-size: clamp(38px, 5.2vw, 72px);}
.hds.hds .ls-hero-split{display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; min-height: calc(100svh - var(--hds-kopf, 77px)); padding: 60px 0;}
.hds.hds .ls-hero-split .text{display: grid; gap: 22px;}
.hds.hds .ls-hero-chips{display: flex; flex-wrap: wrap; gap: 8px;}
.hds.hds .ls-hero-knoepfe{display: flex; gap: 12px; flex-wrap: wrap;}
.hds.hds .ls-hero-video{position: relative; min-height: var(--hero-h, 88svh); display: flex; align-items: flex-end; color: #fff; isolation: isolate;}
.hds.hds .ls-hero-video video,.hds.hds .ls-hero-video > img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;}
.hds.hds .ls-hero-video::before{content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,22,47,.92), rgba(6,22,47,.35) 55%, rgba(6,22,47,.15));}
.hds.hds .ls-hero-video .hd-wrap{padding-bottom: 64px; display: grid; gap: 20px; justify-items: start;}
.hds.hds .ls-hero-video .hd-lead{color: rgba(255,255,255,.8);}
.hds.hds .ls-hero-dunkel{background: radial-gradient(1100px 600px at 70% 10%, #163a78, var(--navy) 60%, #040d1f); color: #fff;}
.hds.hds .ls-hero-dunkel .hd-lead{color: rgba(255,255,255,.72);}
.hds.hds .ls-hero-dunkel .hd-eyebrow{color: var(--akzent);}
.hds.hds .ls-hero-hell{background: var(--hg);}
.hds.hds .ls-videokarte{position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--schatten-hoch); aspect-ratio: 4 / 3; background: var(--navy);}
.hds.hds .ls-videokarte video{width: 100%; height: 100%; object-fit: cover;}
.hds.hds .ls-videokarte .hd-chip{position: absolute; top: 16px; left: 16px;}
.hds.hds .ls-videokarte .play{position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,.85); backdrop-filter: blur(10px); display: grid; place-items: center; color: var(--navy); box-shadow: 0 20px 40px -14px rgba(0,0,0,.5);}
.hds.hds .ls-videokarte .play svg{width: 26px; height: 26px; margin-left: 4px;}
.hds.hds .ls-filmstreifen{display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 6px 30px; margin: 0 -6px; scrollbar-width: none;}
.hds.hds .ls-filmstreifen::-webkit-scrollbar{display: none;}
.hds.hds .ls-film{flex: 0 0 min(300px, 78vw); scroll-snap-align: start; position: relative; aspect-ratio: 9 / 12; border-radius: 22px; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; isolation: isolate;}
.hds.hds .ls-film img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1s var(--ease);}
.hds.hds .ls-film:hover img{transform: scale(1.06);}
.hds.hds .ls-film::before{content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,22,47,.9), rgba(6,22,47,.15) 55%, transparent);}
.hds.hds .ls-film::after{content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 10px, transparent 10px 20px); opacity: .5;}
.hds.hds .ls-film small{font-family: var(--kopf); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--akzent);}
.hds.hds .ls-film h3{font-size: 22px; margin: 6px 0 4px;}
.hds.hds .ls-film p{font-size: 13.5px; color: rgba(255,255,255,.75);}
.hds.hds .ls-masonry{columns: 3; column-gap: 16px;}
.hds.hds .ls-masonry a{display: block; break-inside: avoid; margin-bottom: 16px; position: relative; border-radius: 22px; overflow: hidden; color: #fff; isolation: isolate;}
.hds.hds .ls-masonry a img{width: 100%; display: block; transition: transform 1s var(--ease);}
.hds.hds .ls-masonry a:hover img{transform: scale(1.05);}
.hds.hds .ls-masonry a span{position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(to top, rgba(6,22,47,.85), transparent); font-family: var(--kopf); font-weight: 700; font-size: 15px;}
.hds.hds .ls-masonry a span small{display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); font-weight: 700; margin-bottom: 4px;}
.hds.hds .ls-story{position: relative; overflow: visible;}
.hds.hds .ls-story .pin{position: sticky; top: var(--hds-kopf, 77px); min-height: calc(100svh - var(--hds-kopf, 77px)); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;}
.hds.hds .ls-story .schritt-liste{display: grid; gap: 14px;}
.hds.hds .ls-story .schritt-liste div{padding: 22px 24px; border-radius: 20px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: background .5s, box-shadow .5s, transform .6s var(--spring);}
.hds.hds .ls-story .schritt-liste div.aktiv{background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(46,167,255,.5); transform: translateX(8px);}
.hds.hds .ls-story .schritt-liste small{font-family: var(--kopf); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--akzent);}
.hds.hds .ls-story .schritt-liste b{display: block; font-family: var(--kopf); font-size: 20px; margin: 4px 0 6px;}
.hds.hds .ls-story .schritt-liste p{font-size: 14.5px; color: rgba(255,255,255,.66);}
@media (max-width: 1000px){.hds.hds .ls-karten,.hds.hds .ls-karten.vier,.hds.hds .ls-pains,.hds.hds .ls-preise,.hds.hds .ls-zahlen{grid-template-columns: repeat(2, 1fr);}
.hds.hds .ls-bento{grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px;}
.hds.hds .ls-schritte{grid-template-columns: 1fr; gap: 14px; padding-left: 0;}
.hds.hds .ls-schritte::before,.hds.hds .ls-schritte::after{left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto;}
.hds.hds .ls-schritte::after{transform: scaleY(0); transform-origin: top; background: linear-gradient(180deg, var(--blau), var(--akzent));}
.hds.hds .ist-da .ls-schritte::after,.hds.hds .ls-schritte.ist-da::after{transform: scaleY(1);}
.hds.hds .ls-schritt{grid-template-columns: 48px 1fr; gap: 6px 16px;}
.hds.hds .ls-schritt b{grid-row: 1 / 4;}
.hds.hds .ls-masonry{columns: 2;}
.hds.hds .ls-werkzeug{grid-template-columns: 1fr;}
.hds.hds .ls-addons{grid-template-columns: repeat(2, 1fr);}
.hds.hds .ls-unter{grid-template-columns: 1fr;}
.hds.hds .ls-story .pin{grid-template-columns: 1fr; gap: 24px; min-height: 0; position: static;}}
@media (max-width: 767px){.hds.hds .ls{padding: 64px 0;}
.hds.hds .ls-karten,.hds.hds .ls-karten.zwei,.hds.hds .ls-karten.vier,.hds.hds .ls-pains,.hds.hds .ls-preise,.hds.hds .ls-zahlen,.hds.hds .ls-fit,.hds.hds .ls-faq,.hds.hds .ls-split,.hds.hds .ls-sticky,.hds.hds .ls-hero-split,.hds.hds .ls-addons,.hds.hds .ls-ergebnis{grid-template-columns: 1fr;}
.hds.hds .ls-hero-split{grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 40px 0 50px;}
.hds.hds .ls-split.flip > .ls-medium{order: 0;}
.hds.hds .ls-bento{grid-template-columns: 1fr; grid-auto-rows: 200px;}
.hds.hds .ls-bento .breit,.hds.hds .ls-bento .hoch{grid-column: auto; grid-row: auto;}
.hds.hds .ls-paket.hervor{transform: none;}
.hds.hds .ls-cta{grid-template-columns: 1fr;}
.hds.hds .ls-cta .ls-objekt{display: none;}
.hds.hds .ls-sticky .fest{position: static;}
.hds.hds .ls-masonry{columns: 1;}
.hds.hds .ls-woche{grid-template-columns: repeat(2, 1fr);}
.hds.hds .ls-phones{gap: 8px; width: 100%;}
.hds.hds .ls-phone{width: 31%; min-width: 0; padding: 6px; border-radius: 22px;}
.hds.hds .ls-phone .flaeche{border-radius: 17px;}
.hds.hds .ls-phone .kopfzeile{padding: 14px 8px 6px; font-size: 9px;}
.hds.hds .ls-postkarte p,.hds.hds .ls-postkarte .zeile{font-size: 8px;}
.hds.hds .ls-hero-video{min-height: 78svh;}
.hds.hds .ls-empfehlung{grid-template-columns: 1fr;}
.hds.hds .ls-empfehlung .preis{text-align: left;}
.hds.hds .ls-pillen{display: none;}}
.hds.hds[data-preise="aus"] [data-preis]{display: none !important;}
.hds.hds[data-preise="an"] [data-ohnepreis]{display: none !important;}
.hds.hds .ls-hero-licht{background: radial-gradient(1000px 600px at 78% 20%, rgba(46,167,255,.18), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(33,84,166,.08), transparent 60%), var(--hg);}
.hds.hds .ls-hero-licht .ls-screen{box-shadow: 0 50px 100px -40px rgba(6,22,47,.55), inset 0 0 0 1px rgba(255,255,255,.12);}
.hds.hds .ls-hero-licht .ls-screen::before{content: ""; position: absolute; left: 6%; right: 6%; bottom: -70px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(6,22,47,.22), transparent); filter: blur(6px); z-index: -1;}
.hds.hds .ls-screen-rahmen{position: relative; padding-bottom: 44px;}
.hds.hds .ls-screen-legende{display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 56px;}
.hds.hds .ls-slide video{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.hds.hds .ls-anfrage{display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: start;}
.hds.hds .ls-anfrage .wahl{display: grid; gap: 26px; padding: clamp(22px, 3vw, 34px); border-radius: 30px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .ls-feldgruppe .titel small{display: block; font-family: var(--lauf); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--text-3); margin-top: 3px;}
.hds.hds .ls-chips.gross button{padding: 12px 16px; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px;}
.hds.hds .ls-chips.gross button svg{width: 16px; height: 16px;}
.hds.hds .ls-chips button[aria-pressed="true"] svg{color: var(--akzent);}
.hds.hds .ls-karte-seg{display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px;}
.hds.hds .ls-karte-seg button{display: grid; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow .3s, background .3s, transform .45s var(--spring);}
.hds.hds .ls-karte-seg button:hover{transform: translateY(-2px);}
.hds.hds .ls-karte-seg button b{font-family: var(--kopf); font-size: 15px;}
.hds.hds .ls-karte-seg button span{font-size: 12.5px; color: var(--text-3); line-height: 1.35;}
.hds.hds .ls-karte-seg button[aria-pressed="true"]{background: var(--hell); box-shadow: inset 0 0 0 2px var(--blau);}
.hds.hds .ls-zusammen{position: sticky; top: 96px; display: grid; gap: 16px; padding: clamp(22px, 3vw, 30px); border-radius: 30px; background: var(--navy); color: #fff; box-shadow: 0 40px 80px -40px rgba(6,22,47,.7);}
.hds.hds .ls-zusammen small.kl{font-family: var(--kopf); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--akzent);}
.hds.hds .ls-zusammen .satz{font-family: var(--kopf); font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; line-height: 1.35; letter-spacing: -.01em;}
.hds.hds .ls-zusammen .satz em{font-style: normal; color: var(--akzent);}
.hds.hds .ls-zusammen .einordnung{display: grid; gap: 6px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);}
.hds.hds .ls-zusammen .einordnung b{font-family: var(--kopf); font-size: 19px;}
.hds.hds .ls-zusammen .einordnung span{font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.5;}
.hds.hds .ls-zusammen .einordnung .preis{font-family: var(--kopf); font-weight: 800; font-size: 20px; color: #fff;}
.hds.hds .ls-zusammen ul{margin: 0; padding: 0; list-style: none; display: grid; gap: 8px;}
.hds.hds .ls-zusammen li{position: relative; padding-left: 24px; font-size: 14.5px; color: rgba(255,255,255,.85); line-height: 1.45; opacity: 0; transform: translateY(6px); animation: hds-ls-rein .45s var(--spring) forwards; animation-delay: calc(var(--i) * 50ms);}
.hds.hds .ls-zusammen li::before{content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: rgba(46,167,255,.25); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E"); background-size: 8px; background-repeat: no-repeat; background-position: center;}
.hds.hds .ls-formular{display: grid; gap: 10px;}
.hds.hds .ls-formular .zeile{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.hds.hds .ls-eingabe{position: relative; display: block;}
.hds.hds .ls-eingabe input,.hds.hds .ls-eingabe textarea{width: 100%; padding: 22px 16px 8px; border: 0; outline: 0; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 15px; transition: box-shadow .3s, background .3s; resize: vertical;}
.hds.hds .ls-eingabe textarea{min-height: 84px;}
.hds.hds .ls-eingabe input:focus,.hds.hds .ls-eingabe textarea:focus{box-shadow: inset 0 0 0 2px var(--akzent); background: rgba(255,255,255,.12);}
.hds.hds .ls-eingabe span{position: absolute; left: 16px; top: 15px; font-size: 15px; color: rgba(255,255,255,.55); pointer-events: none; transition: transform .3s var(--ease), font-size .3s, color .3s; transform-origin: left top;}
.hds.hds .ls-eingabe input:focus + span,.hds.hds .ls-eingabe input:not(:placeholder-shown) + span,.hds.hds .ls-eingabe textarea:focus + span,.hds.hds .ls-eingabe textarea:not(:placeholder-shown) + span{transform: translateY(-9px); font-size: 11.5px; color: var(--akzent);}
.hds.hds .ls-formular .hd-btn{justify-content: center; width: 100%;}
.hds.hds .ls-danke{display: none; gap: 8px; padding: 18px; border-radius: 18px; background: rgba(46,167,255,.15); box-shadow: inset 0 0 0 1px rgba(46,167,255,.4);}
.hds.hds .ls-danke b{font-family: var(--kopf); font-size: 18px;}
.hds.hds .ls-danke span{font-size: 14px; color: rgba(255,255,255,.8);}
.hds.hds .ls-zusammen.gesendet .ls-formular{display: none;}
.hds.hds .ls-zusammen.gesendet .ls-danke{display: grid; animation: hds-ls-rein .5s var(--spring) forwards;}
.hds.hds .ls-zusammen .ls-hinweis{color: rgba(255,255,255,.5);}
.hds.hds .ls-plan{display: grid; gap: 18px;}
.hds.hds .ls-plan-steuer{display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 18px 26px; align-items: start; padding: 22px 24px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .ls-plan-kopf{display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;}
.hds.hds .ls-plan-kopf b{font-family: var(--kopf); font-size: 20px; letter-spacing: -.01em;}
.hds.hds .ls-plan-legende{display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-2);}
.hds.hds .ls-plan-legende i{display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px;}
.hds.hds .ls-woche-gross{display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px;}
.hds.hds .ls-tag-gross{display: grid; align-content: start; gap: 10px; min-height: 330px; padding: 12px 10px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .ls-tag-gross.heute{box-shadow: inset 0 0 0 2px var(--akzent);}
.hds.hds .ls-tag-gross header{display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 6px; border-bottom: 1px solid var(--linie);}
.hds.hds .ls-tag-gross header b{font-family: var(--kopf); font-size: 15px;}
.hds.hds .ls-tag-gross header span{font-size: 12px; color: var(--text-3);}
.hds.hds .ls-tag-gross .frei{font-size: 12.5px; color: var(--text-3); text-align: center; padding: 18px 0;}
.hds.hds .ls-post-gross{--farbe: var(--blau); display: grid; gap: 6px; border-radius: 14px; overflow: hidden; background: var(--hg); box-shadow: inset 0 0 0 1px var(--linie); opacity: 0; transform: translateY(8px) scale(.98); animation: hds-ls-rein .5s var(--spring) forwards; animation-delay: calc(var(--i) * 45ms); transition: transform .4s var(--spring), box-shadow .3s;}
.hds.hds .ls-post-gross:hover{transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .ls-post-gross .bild{position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hell);}
.hds.hds .ls-post-gross.reel .bild,.hds.hds .ls-post-gross.story .bild{aspect-ratio: 9 / 13;}
.hds.hds .ls-post-gross.linkedin .bild,.hds.hds .ls-post-gross.facebook .bild{aspect-ratio: 1.2 / 1;}
.hds.hds .ls-post-gross .bild img{width: 100%; height: 100%; object-fit: cover;}
.hds.hds .ls-post-gross .bild em{position: absolute; left: 6px; top: 6px; font-style: normal; font-family: var(--kopf); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 7px; border-radius: 999px; background: var(--farbe); color: #fff;}
.hds.hds .ls-post-gross .bild u{position: absolute; right: 6px; bottom: 6px; text-decoration: none; font-family: var(--kopf); font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.88); color: var(--text);}
.hds.hds .ls-post-gross .text{padding: 2px 10px 10px; display: grid; gap: 2px;}
.hds.hds .ls-post-gross .text b{font-family: var(--kopf); font-size: 13.5px; line-height: 1.25;}
.hds.hds .ls-post-gross .text span{font-size: 11.5px; color: var(--text-3);}
.hds.hds .ls-post-gross.reel{--farbe: #D6457A;}
.hds.hds .ls-post-gross.story{--farbe: #E0891F;}
.hds.hds .ls-post-gross.beitrag{--farbe: var(--blau);}
.hds.hds .ls-monat{display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;}
.hds.hds .ls-monat .wt{font-family: var(--kopf); font-size: 12px; font-weight: 700; color: var(--text-3); text-align: center; padding-bottom: 4px;}
.hds.hds .ls-monat .tag{position: relative; min-height: 96px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); display: grid; align-content: start; gap: 5px;}
.hds.hds .ls-monat .tag.leer{background: transparent; box-shadow: none;}
.hds.hds .ls-monat .tag > b{font-family: var(--kopf); font-size: 13px; color: var(--text-3);}
.hds.hds .ls-monat .tag .p{display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.2; padding: 3px 6px; border-radius: 8px; background: color-mix(in srgb, var(--farbe) 12%, #fff); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; animation: hds-ls-rein .4s var(--spring) forwards; animation-delay: calc(var(--i) * 12ms);}
.hds.hds .ls-monat .tag .p::before{content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--farbe);}
.hds.hds .ls-monat .p.reel{--farbe: #D6457A;}
.hds.hds .ls-monat .p.story{--farbe: #E0891F;}
.hds.hds .ls-monat .p.beitrag{--farbe: #2154A6;}
.hds.hds .ls-plan-fuss{display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: stretch;}
.hds.hds .ls-plan-fuss .ls-ergebnis{align-content: start;}
.hds.hds .ls-plan-fuss .ls-empfehlung{align-content: center;}
.hds.hds .ls-plan-fuss .rechts{display: grid; gap: 12px; align-content: start;}
.hds.hds .ls-finder{display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 28px; align-items: start;}
.hds.hds .ls-finder .wahl{display: grid; gap: 22px; padding: clamp(22px, 3vw, 34px); border-radius: 30px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .dunkel .ls-finder .wahl{background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);}
.hds.hds .dunkel .ls-finder .titel{color: rgba(255,255,255,.55);}
.hds.hds .dunkel .ls-finder .ls-chips button{background: transparent; color: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);}
.hds.hds .dunkel .ls-finder .ls-chips button[aria-pressed="true"]{background: #fff; color: var(--navy);}
.hds.hds .ls-treffer{display: grid; gap: 12px;}
.hds.hds .ls-treffer-leer{padding: 28px; border-radius: 24px; background: var(--hg); box-shadow: inset 0 0 0 1px var(--linie); color: var(--text-2); font-size: 15px;}
.hds.hds .dunkel .ls-treffer-leer{background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: rgba(255,255,255,.7);}
.hds.hds .ls-treff{display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 18px 16px 16px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); color: var(--text); transition: box-shadow .3s, transform .5s var(--spring);}
.hds.hds .ls-treff:hover{transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-hoch);}
.hds.hds .ls-treff.erst{box-shadow: inset 0 0 0 2px var(--blau), var(--schatten-hoch);}
.hds.hds .ls-treff .bild{width: 76px; height: 76px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .ls-treff .bild img{width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply;}
.hds.hds .ls-treff small{font-family: var(--kopf); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--blau);}
.hds.hds .ls-treff b{display: block; font-family: var(--kopf); font-size: 19px; letter-spacing: -.01em; margin: 2px 0;}
.hds.hds .ls-treff p{font-size: 14px; color: var(--text-2); line-height: 1.45;}
.hds.hds .ls-treff .start{font-family: var(--kopf); font-weight: 700; font-size: 14px; color: var(--blau); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;}
.hds.hds .ls-treff .start svg{width: 16px; height: 16px; transition: transform .4s var(--spring);}
.hds.hds .ls-treff:hover .start svg{transform: translateX(4px);}
.hds.hds .ls-treff .balken{grid-column: 2 / -1; height: 4px; border-radius: 4px; background: var(--linie); overflow: hidden;}
.hds.hds .ls-treff .balken i{display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--blau), var(--akzent)); transition: width .8s var(--ease);}
.hds.hds .ls-wand{display: grid; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.hds.hds .ls-wand-reihe{display: flex; gap: 10px; width: max-content; animation: hds-ls-lauf 60s linear infinite;}
.hds.hds .ls-wand-reihe.rueck{animation-direction: reverse; animation-duration: 70s;}
.hds.hds .ls-wand:hover .ls-wand-reihe{animation-play-state: paused;}
@keyframes hds-ls-lauf{to { transform: translateX(-50%); }}
.hds.hds .ls-wand span{display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-family: var(--kopf); font-weight: 700; font-size: 15px; white-space: nowrap;}
.hds.hds .ls-wand span i{width: 9px; height: 9px; border-radius: 50%; background: var(--f);}
.hds.hds .ls-ki-zahlen{display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px;}
.hds.hds .ls-abschluss{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 36px; align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 34px; background: radial-gradient(900px 500px at 90% 0%, #1c4a99, var(--navy) 60%); color: #fff;}
.hds.hds .ls-abschluss h2{font-size: clamp(30px, 3.4vw, 46px);}
.hds.hds .ls-abschluss .ls-ticks li{color: rgba(255,255,255,.85);}
.hds.hds .ls-abschluss .ls-zusammen{position: static; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);}
.hds.hds .lu-netz{position: relative; aspect-ratio: 1 / 1; width: min(100%, 560px); margin-inline: auto;}
.hds.hds .lu-netz svg.linien{position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;}
.hds.hds .lu-netz svg.linien path{fill: none; stroke: rgba(33,84,166,.22); stroke-width: 1.4; stroke-dasharray: 4 6;}
.hds.hds .lu-netz svg.linien path.an{stroke: var(--akzent); stroke-width: 2; stroke-dasharray: none;}
.hds.hds .lu-netz svg.linien circle{fill: var(--akzent);}
.hds.hds .lu-knoten{position: absolute; width: 23%; aspect-ratio: 1; left: calc(var(--x) - 11.5%); top: calc(var(--y) - 11.5%); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), 0 20px 40px -20px rgba(28,45,62,.45); display: grid; place-items: center; transition: transform .6s var(--spring), box-shadow .4s; animation: hds-ls-schweb 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s);}
.hds.hds .lu-knoten img{width: 88%; height: 88%; object-fit: contain; border-radius: 50%; mix-blend-mode: multiply;}
.hds.hds .lu-knoten b{position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--kopf); font-size: 13.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .lu-knoten:hover,.hds.hds .lu-knoten.an{transform: scale(1.08); box-shadow: inset 0 0 0 2px var(--akzent), 0 30px 50px -20px rgba(33,84,166,.5);}
.hds.hds .lu-mitte{position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; text-align: center; background: linear-gradient(160deg, #2E7BFF, var(--blau) 60%, #12306a); color: #fff; box-shadow: 0 30px 60px -24px rgba(33,84,166,.7), inset 0 1px 0 rgba(255,255,255,.35); font-family: var(--kopf); font-weight: 800; font-size: clamp(16px, 2vw, 24px); letter-spacing: -.04em; line-height: 1;}
.hds.hds .lu-mitte small{display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .75; margin-top: 4px;}
.hds.hds .lu-mitte::after{content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(46,167,255,.35); animation: hds-lu-ring 3s ease-out infinite;}
@keyframes hds-lu-ring{from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; }}
.hds.hds .lu-karten{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.hds.hds .lu-karte{position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 0 22px; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); transition: transform .7s var(--spring), box-shadow .6s var(--ease);}
.hds.hds .lu-karte:hover{transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-hoch);}
.hds.hds .lu-karte .bild{aspect-ratio: 16 / 11; background: linear-gradient(160deg, #fff, var(--hg)); display: grid; place-items: center; overflow: hidden;}
.hds.hds .lu-karte .bild img{width: 78%; mix-blend-mode: multiply; transition: transform 1s var(--ease);}
.hds.hds .lu-karte:hover .bild img{transform: scale(1.06) translateY(-4px);}
.hds.hds .lu-karte > small,.hds.hds .lu-karte > h3,.hds.hds .lu-karte > p,.hds.hds .lu-karte .unter,.hds.hds .lu-karte .weiter{margin-inline: 24px;}
.hds.hds .lu-karte > small{font-family: var(--kopf); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--blau); margin-top: 6px;}
.hds.hds .lu-karte h3{font-size: 24px;}
.hds.hds .lu-karte p{font-size: 15px; color: var(--text-2); line-height: 1.55;}
.hds.hds .lu-karte .unter{display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;}
.hds.hds .lu-karte .unter a{padding: 6px 11px; border-radius: 999px; background: var(--hg); box-shadow: inset 0 0 0 1px var(--linie); font-family: var(--kopf); font-size: 13px; font-weight: 700; color: var(--text-2); transition: background .3s, color .3s;}
.hds.hds .lu-karte .unter a:hover{background: var(--blau); color: #fff;}
.hds.hds .lu-karte .weiter{margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--kopf); font-weight: 700; color: var(--blau);}
.hds.hds .lu-karte .weiter svg{width: 16px; height: 16px; transition: transform .4s var(--spring);}
.hds.hds .lu-karte:hover .weiter svg{transform: translateX(4px);}
.hds.hds .lu-extras{display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;}
.hds.hds .lu-extra{display: grid; gap: 4px; padding: 20px 22px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); transition: transform .5s var(--spring), box-shadow .4s;}
.hds.hds .lu-extra:hover{transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .lu-extra b{font-family: var(--kopf); font-size: 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.hds.hds .lu-extra b svg{width: 16px; height: 16px; color: var(--blau);}
.hds.hds .lu-extra span{font-size: 14px; color: var(--text-2);}
.hds.hds .lu-index{border-top: 1px solid var(--linie);}
.hds.hds .lu-zeile{border-bottom: 1px solid var(--linie);}
.hds.hds .lu-zeile > button{width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 48px; align-items: center; gap: 24px; padding: 26px 8px; text-align: left; transition: padding .5s var(--ease);}
.hds.hds .lu-zeile > button:hover,.hds.hds .lu-zeile.offen > button{padding-left: 20px;}
.hds.hds .lu-zeile .nr{font-family: var(--kopf); font-weight: 700; font-size: 14px; color: var(--text-3);}
.hds.hds .lu-zeile h3{font-size: clamp(28px, 4.4vw, 64px); letter-spacing: -.045em; line-height: 1; transition: color .35s;}
.hds.hds .lu-zeile > button:hover h3,.hds.hds .lu-zeile.offen h3{color: var(--blau);}
.hds.hds .lu-zeile .kat{font-family: var(--kopf); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--text-3); text-align: right;}
.hds.hds .lu-zeile .plus{width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--hell); color: var(--blau); transition: transform .5s var(--spring), background .3s, color .3s;}
.hds.hds .lu-zeile .plus svg{width: 18px; height: 18px;}
.hds.hds .lu-zeile.offen .plus{transform: rotate(45deg); background: var(--blau); color: #fff;}
.hds.hds .lu-inhalt{display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease);}
.hds.hds .lu-zeile.offen .lu-inhalt{grid-template-rows: 1fr;}
.hds.hds .lu-inhalt > div{overflow: hidden;}
.hds.hds .lu-inhalt .innen{display: grid; grid-template-columns: 88px minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; padding: 0 8px 30px; align-items: start;}
.hds.hds .lu-inhalt .innen p{font-size: 17px; color: var(--text-2); line-height: 1.6;}
.hds.hds .lu-inhalt .innen .unter{display: grid; gap: 8px;}
.hds.hds .lu-inhalt .innen .unter a{display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--hg); font-family: var(--kopf); font-weight: 700; font-size: 15px; transition: background .3s, color .3s;}
.hds.hds .lu-inhalt .innen .unter a:hover{background: var(--blau); color: #fff;}
.hds.hds .lu-inhalt .innen .unter a svg{width: 16px; height: 16px;}
.hds.hds .lu-explorer{position: relative;}
.hds.hds .lu-explorer .pin{position: sticky; top: var(--hds-kopf, 77px); height: calc(100svh - var(--hds-kopf, 77px)); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center;}
.hds.hds .lu-liste{display: grid; gap: 4px;}
.hds.hds .lu-liste button{display: grid; grid-template-columns: 36px 1fr; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 16px; text-align: left; transition: background .35s, color .35s; color: var(--text-3);}
.hds.hds .lu-liste button b{font-family: var(--kopf); font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.035em; line-height: 1.05;}
.hds.hds .lu-liste button span{font-family: var(--kopf); font-size: 13px; font-weight: 700;}
.hds.hds .lu-liste button.an{color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .lu-liste button.an span{color: var(--blau);}
.hds.hds .lu-buehne{position: relative; height: min(72vh, 640px); border-radius: 34px; overflow: hidden; background: radial-gradient(700px 400px at 70% 20%, rgba(46,167,255,.2), transparent 60%), #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-hoch);}
.hds.hds .lu-folie{position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: clamp(22px, 3vw, 36px); opacity: 0; transform: translateY(20px) scale(.98); transition: opacity .6s var(--ease), transform .8s var(--spring); pointer-events: none;}
.hds.hds .lu-folie.an{opacity: 1; transform: none; pointer-events: auto;}
.hds.hds .lu-folie .obj{display: grid; place-items: center; min-height: 0;}
.hds.hds .lu-folie .obj img{max-height: 100%; width: auto; max-width: 70%; mix-blend-mode: multiply; animation: hds-ls-schweb 7s ease-in-out infinite;}
.hds.hds .lu-folie .txt{display: grid; gap: 10px;}
.hds.hds .lu-folie .txt small{font-family: var(--kopf); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--blau);}
.hds.hds .lu-folie .txt h3{font-size: clamp(26px, 2.6vw, 38px);}
.hds.hds .lu-folie .txt p{font-size: 16px; color: var(--text-2); max-width: 52ch;}
.hds.hds .lu-folie .txt .unter{display: flex; flex-wrap: wrap; gap: 6px;}
.hds.hds .lu-folie .txt .unter a{padding: 7px 12px; border-radius: 999px; background: var(--hg); box-shadow: inset 0 0 0 1px var(--linie); font-family: var(--kopf); font-weight: 700; font-size: 13.5px;}
.hds.hds .lu-folie .txt .unter a:hover{background: var(--blau); color: #fff;}
.hds.hds .lu-fortschritt{position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--linie);}
.hds.hds .lu-fortschritt i{display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--blau), var(--akzent));}
.hds.hds .lu-mobil{display: none;}
.hds.hds .ls-antwort{display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(24px, 3.4vw, 44px); border-radius: 30px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .ls-antwort small{font-family: var(--kopf); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--blau);}
.hds.hds .ls-antwort p{font-family: var(--kopf); font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; margin-top: 10px;}
.hds.hds .ls-fakten{display: grid; gap: 10px;}
.hds.hds .ls-fakten div{display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--hg);}
.hds.hds .ls-fakten i{width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--blau); box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .ls-fakten i svg{width: 20px; height: 20px;}
.hds.hds .ls-fakten b{font-family: var(--kopf); font-size: 15.5px;}
.hds.hds .ls-lang{display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 90px); align-items: start;}
.hds.hds .ls-lang .kopf{position: sticky; top: calc(calc(var(--hds-kopf, 77px) + var(--hds-unternav, 0px)) + 30px); display: grid; gap: 16px;}
.hds.hds .ls-lang .kopf .ls-objekt img{width: min(100%, 380px);}
.hds.hds .ls-lang .prosa{display: grid; gap: 30px;}
.hds.hds .ls-lang .prosa section{display: grid; gap: 10px;}
.hds.hds .ls-lang .prosa h3{font-size: clamp(21px, 1.9vw, 26px); letter-spacing: -.02em;}
.hds.hds .ls-lang .prosa p{font-size: 17.5px; line-height: 1.72; color: rgba(28,45,62,.86);}
.hds.hds .ls-vergleich{display: grid; gap: 22px;}
.hds.hds .ls-vergleich .hd-segment{justify-self: center;}
.hds.hds .ls-vergleich-feld{position: relative; display: grid;}
.hds.hds .ls-vergleich-feld > div{grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; padding: clamp(22px, 3vw, 36px); border-radius: 30px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); transition: opacity .5s var(--ease), transform .6s var(--spring);}
.hds.hds .ls-vergleich-feld > div[hidden]{display: grid; opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;}
.hds.hds .ls-vergleich-feld .hd-bild{aspect-ratio: 4 / 3;}
.hds.hds .ls-orte{display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;}
.hds.hds .ls-ort{display: grid; gap: 10px; padding: 22px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .ls-ort i{width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--hell); color: var(--blau);}
.hds.hds .ls-ort i svg{width: 22px; height: 22px;}
.hds.hds .ls-ort b{font-family: var(--kopf); font-size: 18px;}
.hds.hds .ls-ort p{font-size: 14.5px; color: var(--text-2); line-height: 1.5;}
.hds.hds .ls-monatsband{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: 26px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); background: #fff;}
.hds.hds .ls-monatsband div{padding: 24px 22px; display: grid; gap: 8px; border-right: 1px solid var(--linie); position: relative;}
.hds.hds .ls-monatsband div:last-child{border-right: 0;}
.hds.hds .ls-monatsband div::before{content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--blau), var(--akzent)); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 180ms);}
.hds.hds .ist-da .ls-monatsband div::before{transform: scaleX(1);}
.hds.hds .ls-monatsband small{font-family: var(--kopf); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--blau);}
.hds.hds .ls-monatsband b{font-family: var(--kopf); font-size: 19px;}
.hds.hds .ls-monatsband p{font-size: 14.5px; color: var(--text-2); line-height: 1.5;}
@media (max-width: 1000px){.hds.hds .ls-anfrage,.hds.hds .ls-finder,.hds.hds .ls-abschluss,.hds.hds .ls-antwort,.hds.hds .ls-lang,.hds.hds .ls-plan-fuss{grid-template-columns: 1fr;}
.hds.hds .ls-zusammen,.hds.hds .ls-lang .kopf{position: static;}
.hds.hds .ls-plan-steuer{grid-template-columns: 1fr 1fr;}
.hds.hds .ls-woche-gross{grid-template-columns: repeat(7, 190px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin;}
.hds.hds .ls-tag-gross{scroll-snap-align: start;}
.hds.hds .lu-karten{grid-template-columns: repeat(2, 1fr);}
.hds.hds .lu-extras,.hds.hds .ls-orte,.hds.hds .ls-monatsband{grid-template-columns: repeat(2, 1fr);}
.hds.hds .ls-monatsband div:nth-child(2){border-right: 0;}
.hds.hds .lu-explorer{height: auto !important;}
.hds.hds .lu-explorer .pin{display: none;}
.hds.hds .lu-mobil{display: grid; gap: 14px;}
.hds.hds .lu-inhalt .innen{grid-template-columns: 1fr;}
.hds.hds .ls-lang .kopf .ls-objekt{display: none;}}
@media (max-width: 767px){.hds.hds .ls-plan-steuer{grid-template-columns: 1fr;}
.hds.hds .ls-woche-gross{grid-template-columns: repeat(7, 74vw);}
.hds.hds .ls-monat{gap: 4px;}
.hds.hds .ls-monat .tag{min-height: 64px; padding: 5px; border-radius: 10px;}
.hds.hds .ls-monat .tag .p{font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--farbe);}
.hds.hds .ls-monat .tag .p::before{display: none;}
.hds.hds .ls-monat .tag{grid-template-columns: repeat(3, 8px); align-content: start;}
.hds.hds .ls-monat .tag > b{grid-column: 1 / -1;}
.hds.hds .ls-formular .zeile{grid-template-columns: 1fr;}
.hds.hds .ls-karte-seg{grid-template-columns: 1fr;}
.hds.hds .lu-karten,.hds.hds .lu-extras,.hds.hds .ls-orte,.hds.hds .ls-monatsband,.hds.hds .ls-ki-zahlen,.hds.hds .ls-vergleich-feld > div{grid-template-columns: 1fr;}
.hds.hds .ls-monatsband div{border-right: 0; border-bottom: 1px solid var(--linie);}
.hds.hds .lu-zeile > button{grid-template-columns: 36px minmax(0, 1fr) 40px; gap: 12px; padding: 20px 4px;}
.hds.hds .lu-zeile .kat{display: none;}
.hds.hds .lu-zeile .plus{width: 38px; height: 38px;}
.hds.hds .ls-treff{grid-template-columns: 60px minmax(0, 1fr);}
.hds.hds .ls-treff .bild{width: 60px; height: 60px;}
.hds.hds .ls-treff .start{grid-column: 2;}
.hds.hds .ls-treff .balken{grid-column: 1 / -1;}}
.hds.hds .ls-finder .wahl,.hds.hds .ls-anfrage .wahl,.hds.hds .ls-plan-steuer > *,.hds.hds .ls-finder > *,.hds.hds .ls-anfrage > *{min-width: 0;}
.hds.hds .ls-finder .hd-segment,.hds.hds .ls-plan-steuer .hd-segment{display: flex; width: 100%; max-width: 440px;}
.hds.hds .ls-finder .hd-segment button,.hds.hds .ls-plan-steuer .hd-segment button{flex: 1; padding: 10px 8px; font-size: 14px;}
@media (max-width: 1000px){.hds.hds .ls-hero-split{grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 56px 0 64px;}
.hds.hds .ls-hero-split > .text{max-width: 680px;}
.hds.hds .lu-netz{width: min(100%, 520px); margin-top: 20px;}
.hds.hds .ls-phones{margin-top: 10px;}}
.hds.hds .lu-knoten b{font-size: clamp(11px, 1.35vw, 13.5px);}
@media (max-width: 480px){.hds.hds .lu-knoten b{padding: 4px 7px; bottom: -26px;}}
.hds.hds .lu3-h1{font-size: clamp(44px, 6.6vw, 96px); line-height: .96; letter-spacing: -.05em; font-weight: 800; color: var(--navy); text-wrap: balance;}
.hds.hds .lu3-h1.hell{color: #fff;}
.hds.hds .lu3-h2{font-size: clamp(34px, 4.4vw, 60px); line-height: 1; letter-spacing: -.04em; margin-top: 14px;}
.hds.hds .lu3-mitte{display: grid; justify-items: center; text-align: center;}
.hds.hds .lu3-mitte .hd-lead{margin: 20px auto 0; text-align: center;}
.hds.hds .lu3-knoepfe{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; align-items: center;}
.hds.hds .lu3-mitte .lu3-knoepfe{justify-content: center;}
.hds.hds .lu3-mehr{display: inline-flex; align-items: center; gap: 6px; font-family: var(--kopf); font-weight: 700; font-size: 15px; color: var(--blau);}
.hds.hds .lu3-mehr svg{width: 16px; height: 16px; transition: transform .45s var(--spring);}
.hds.hds a:hover > .lu3-mehr svg,.hds.hds .lu3-mehr:hover svg{transform: translateX(4px);}
.hds.hds .lu3-klein-titel{margin: 56px 0 16px; font-size: 22px;}
.hds.hds .lu3-lineup-hero{padding: clamp(80px, 9vw, 130px) 0 clamp(40px, 5vw, 70px); background: radial-gradient(80% 60% at 50% 0%, #EAF5FF, #fff 70%); overflow: hidden;}
.hds.hds .lu3-lineup-wrap{width: min(1360px, 100% - 32px); margin: clamp(46px, 6vw, 80px) auto 0; overflow-x: auto; scrollbar-width: none;}
.hds.hds .lu3-lineup-wrap::-webkit-scrollbar{display: none;}
.hds.hds .lu3-lineup{display: grid; grid-template-columns: repeat(6, minmax(170px, 1fr)); gap: 8px;}
.hds.hds .lu3-lineup-teil{display: grid; justify-items: center; align-content: start; text-align: center; gap: 6px; padding: 12px 10px 22px; border-radius: 28px; transition: background .3s, box-shadow .3s, transform .6s var(--spring);}
.hds.hds .lu3-lineup-teil .bild{width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center;}
.hds.hds .lu3-lineup-teil img{width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--spring);}
.hds.hds .lu3-lineup-teil:hover{background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); transform: translateY(-8px);}
.hds.hds .lu3-lineup-teil:hover img{transform: scale(1.07) translateY(-6px);}
.hds.hds .lu3-lineup-teil small{font-family: var(--kopf); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 6px;}
.hds.hds .lu3-lineup-teil b{font-family: var(--kopf); font-size: 19px; line-height: 1.15; letter-spacing: -.02em; color: var(--navy);}
.hds.hds .lu3-lineup-teil p{font-size: 14px; line-height: 1.45; color: var(--text-2); max-width: 24ch;}
.hds.hds .lu3-lineup-teil .lu3-mehr{font-size: 14px; margin-top: 6px;}
.hds.hds .lu3-reihen-ab{padding-top: clamp(40px, 5vw, 70px);}
.hds.hds .lu3-reihen{display: grid; gap: 22px;}
.hds.hds .lu3-reihe{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding: clamp(28px, 5vw, 70px); border-radius: 40px; background: var(--hg); scroll-margin-top: calc(calc(var(--hds-kopf, 77px) + var(--hds-unternav, 0px)) + 24px);}
.hds.hds .lu3-reihe.rechts .lu3-reihe-bild{order: -1;}
.hds.hds .lu3-reihe:nth-child(3n+2){background: #fff; box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .lu3-reihe:nth-child(3n){background: var(--navy); color: #fff;}
.hds.hds .lu3-reihe:nth-child(3n) .lu3-h2{color: #fff;}
.hds.hds .lu3-reihe:nth-child(3n) .lu3-gross{color: #fff;}
.hds.hds .lu3-reihe:nth-child(3n) .lu3-lang{color: rgba(255, 255, 255, .7);}
.hds.hds .lu3-reihe:nth-child(3n) .hd-eyebrow{color: var(--akzent);}
.hds.hds .lu3-reihe:nth-child(3n) .lu3-mehr{color: var(--akzent);}
.hds.hds .lu3-reihe:nth-child(3n) .lu3-unter a{background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none;}
.hds.hds .lu3-reihe:nth-child(3n) .lu3-reihe-bild img{border-radius: 28px;}
.hds.hds .lu3-gross{font-family: var(--kopf); font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; line-height: 1.35; letter-spacing: -.015em; color: var(--navy); margin-top: 18px; max-width: 30ch;}
.hds.hds .lu3-lang{color: var(--text-2); margin-top: 14px; max-width: 52ch;}
.hds.hds .lu3-unter{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;}
.hds.hds .lu3-unter a{padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); font-family: var(--kopf); font-weight: 600; font-size: 14px; transition: box-shadow .25s, transform .4s var(--spring);}
.hds.hds .lu3-unter a:hover{box-shadow: inset 0 0 0 1px rgba(33, 84, 166, .4); transform: translateY(-2px);}
.hds.hds .lu3-reihe-bild img{width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; transition: transform 1s var(--ease);}
.hds.hds .lu3-reihe:hover .lu3-reihe-bild img{transform: scale(1.03);}
.hds.hds .lu3-wort{position: relative; padding: clamp(70px, 8vw, 120px) 0 clamp(40px, 5vw, 60px); background: radial-gradient(70% 70% at 80% 30%, #EAF5FF, #fff 70%); overflow: hidden;}
.hds.hds .lu3-wort-raster{display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 70px); align-items: center;}
.hds.hds .lu3-h1.wort{font-size: clamp(40px, 5.4vw, 80px); min-height: 3.1em;}
.hds.hds .lu3-h1.wort .fest{display: block; color: var(--text-3);}
.hds.hds .lu3-wechsel{display: inline-block; color: var(--navy);}
.hds.hds .lu3-wechsel .z{display: inline-block; white-space: pre; animation: hds-lu3-rein .55s cubic-bezier(.34, 1.3, .64, 1) backwards; animation-delay: calc(var(--i) * 16ms);}
.hds.hds .lu3-wechsel.raus .z{animation: hds-lu3-raus .28s cubic-bezier(.7, 0, .84, 0) forwards; animation-delay: calc(var(--i) * 8ms);}
@keyframes hds-lu3-rein{from { transform: translateY(.55em) rotateX(-70deg); opacity: 0; filter: blur(6px); }}
@keyframes hds-lu3-raus{to { transform: translateY(-.45em) rotateX(60deg); opacity: 0; filter: blur(6px); }}
.hds.hds .lu3-wort-buehne{position: relative; aspect-ratio: 1 / 1;}
.hds.hds .lu3-wb-bild{position: absolute; inset: 0; margin: 0; display: grid; place-items: center; opacity: 0; transform: scale(.92) translateY(14px); filter: blur(8px); transition: opacity .6s var(--ease), transform .9s var(--spring), filter .6s;}
.hds.hds .lu3-wb-bild.an{opacity: 1; transform: none; filter: none;}
.hds.hds .lu3-wb-bild img{width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(60% 60% at 50% 52%, #000 60%, transparent 100%); mask-image: radial-gradient(60% 60% at 50% 52%, #000 60%, transparent 100%); animation: hds-lu3-schweben 8s ease-in-out infinite;}
@keyframes hds-lu3-schweben{50% { transform: translateY(-10px); }}
.hds.hds .lu3-wb-karte{position: absolute; left: 0; bottom: 8%; display: grid; gap: 3px; padding: 16px 20px; border-radius: 22px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), var(--schatten); transition: transform .5s var(--spring);}
.hds.hds .lu3-wb-karte:hover{transform: translateY(-4px);}
.hds.hds .lu3-wb-karte small{font-family: var(--kopf); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);}
.hds.hds .lu3-wb-karte b{font-family: var(--kopf); font-size: 19px;}
.hds.hds .lu3-wb-karte span{display: inline-flex; gap: 6px; align-items: center; font-family: var(--kopf); font-weight: 700; font-size: 14px; color: var(--blau);}
.hds.hds .lu3-wb-karte svg{width: 16px; height: 16px;}
.hds.hds .lu3-wort-tabs{display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: clamp(26px, 4vw, 44px);}
.hds.hds .lu3-wt{display: grid; gap: 4px; align-content: start; padding: 14px 14px 12px; border-radius: 18px; text-align: left; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--linie); transition: background .3s, box-shadow .3s;}
.hds.hds .lu3-wt b{font-family: var(--kopf); font-size: 15px; line-height: 1.2; color: var(--text-2); transition: color .3s;}
.hds.hds .lu3-wt small{font-size: 12px; color: var(--text-3);}
.hds.hds .lu3-wt[aria-selected="true"]{background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .lu3-wt[aria-selected="true"] b{color: var(--navy);}
.hds.hds .lu3-wt-balken{display: block; height: 3px; border-radius: 3px; margin-top: 10px; background: rgba(28, 45, 62, .08); overflow: hidden;}
.hds.hds .lu3-wt-balken i{display: block; height: 100%; background: var(--blau); transform-origin: left; transform: scaleX(0);}
.hds.hds .lu3-wt[aria-selected="true"] .lu3-wt-balken i{animation: hds-lu3-balken var(--takt, 4.2s) linear forwards;}
.hds.hds .lu3-wort.pause .lu3-wt-balken i{animation-play-state: paused;}
@keyframes hds-lu3-balken{to { transform: scaleX(1); }}
.hds.hds .lu3-bento{display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 14px;}
.hds.hds .lu3-kachel{position: relative; grid-column: span 2; display: grid; overflow: hidden; border-radius: 30px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); transition: transform .6s var(--spring), box-shadow .4s;}
.hds.hds .lu3-kachel:hover{transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten-hoch);}
.hds.hds .lu3-kachel.gross{grid-column: span 4;}
.hds.hds .lu3-kachel.hoch{grid-row: span 2;}
.hds.hds .lu3-kachel.halb{grid-column: span 3;}
.hds.hds .lu3-kachel .t{position: relative; z-index: 1; display: grid; align-content: start; gap: 8px; padding: 26px 28px; max-width: 62%;}
.hds.hds .lu3-kachel.hoch .t{max-width: 100%;}
.hds.hds .lu3-kachel small{font-family: var(--kopf); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);}
.hds.hds .lu3-kachel h3{font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.03em; line-height: 1.05;}
.hds.hds .lu3-kachel p{font-size: 15px; color: var(--text-2);}
.hds.hds .lu3-kachel .lu3-mehr{margin-top: 6px; font-size: 14.5px;}
.hds.hds .lu3-kachel img{position: absolute; right: -4%; bottom: -8%; width: 58%; aspect-ratio: 4 / 3; object-fit: cover; mix-blend-mode: multiply; transition: transform .9s var(--spring);}
.hds.hds .lu3-kachel.hoch img{width: 110%; right: -5%; bottom: -4%;}
.hds.hds .lu3-kachel.gross img{width: 44%;}
.hds.hds .lu3-kachel:hover img{transform: scale(1.06) translate(-2%, -2%);}
.hds.hds .lu3-kachel[data-spot]::after{content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(46, 167, 255, .12), transparent 70%); opacity: 0; transition: opacity .4s;}
.hds.hds .lu3-kachel:hover::after{opacity: 1;}
.hds.hds .lu3-kino{position: relative; height: 230vh; background: #fff; --p: 0;}
.hds.hds .lu3-kino-pin{position: sticky; top: var(--hds-kopf, 77px); height: calc(100vh - var(--hds-kopf, 77px)); overflow: hidden; display: grid; place-items: center;}
.hds.hds .lu3-kino-rahmen{position: absolute; inset: 0; background: var(--navy); clip-path: inset(calc((1 - var(--o, 0)) * 14%) calc((1 - var(--o, 0)) * 18%) calc((1 - var(--o, 0)) * 14%) calc((1 - var(--o, 0)) * 18%) round calc((1 - var(--o, 0)) * 36px + 0px));}
.hds.hds .lu3-kino-rahmen video{width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - var(--o, 0) * .18));}
.hds.hds .lu3-kino-schleier{position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 22, 47, .35), rgba(6, 22, 47, .55) 60%, rgba(6, 22, 47, .8)); opacity: calc(.3 + var(--o, 0) * .7);}
.hds.hds .lu3-kino-text{position: relative; z-index: 2; width: min(980px, 100% - 48px); display: grid; justify-items: center; text-align: center; color: #fff; opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 30px)); pointer-events: none;}
.hds.hds .lu3-kino-text p{margin-top: 18px; font-size: clamp(17px, 1.4vw, 21px); color: rgba(255, 255, 255, .8); max-width: 50ch;}
.hds.hds .lu3-kino.offen .lu3-kino-text{pointer-events: auto;}
.hds.hds .lu3-kino-text .lu3-h1{margin-top: 16px;}
.hds.hds .lu3-kino-zahlen{position: absolute; z-index: 2; left: 50%; bottom: clamp(20px, 5vh, 44px); transform: translate(-50%, calc((1 - var(--z, 0)) * 20px)); opacity: var(--z, 0); display: flex; gap: clamp(20px, 5vw, 70px); color: #fff;}
.hds.hds .lu3-kino-zahlen div{display: grid; justify-items: center; text-align: center;}
.hds.hds .lu3-kino-zahlen b{font-family: var(--kopf); font-weight: 800; font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -.04em; line-height: 1;}
.hds.hds .lu3-kino-zahlen span{font-size: 13px; color: rgba(255, 255, 255, .7); margin-top: 4px;}
.hds.hds .lu3-kino-hinweis{position: absolute; z-index: 2; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; font-family: var(--kopf); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); opacity: calc(1 - var(--o, 0) * 3);}
.hds.hds .lu3-kino-hinweis span{width: 1px; height: 26px; background: var(--blau); animation: hds-lu3-scroll 1.8s var(--ease) infinite; transform-origin: top;}
@keyframes hds-lu3-scroll{0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; }}
@media (max-width: 1000px){.hds.hds .lu3-wort-raster,.hds.hds .lu3-reihe{grid-template-columns: minmax(0, 1fr);}
.hds.hds .lu3-reihe.rechts .lu3-reihe-bild{order: 0;}
.hds.hds .lu3-reihe-bild{order: -1;}
.hds.hds .lu3-wort-buehne{width: min(420px, 100%); justify-self: center;}
.hds.hds .lu3-wort-tabs{grid-template-columns: repeat(3, minmax(0, 1fr));}
.hds.hds .lu3-bento{grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 280px;}
.hds.hds .lu3-kachel,.hds.hds .lu3-kachel.gross,.hds.hds .lu3-kachel.halb{grid-column: span 1;}
.hds.hds .lu3-kachel.gross{grid-column: span 2;}
.hds.hds .lu3-kachel.hoch{grid-row: span 1;}
.hds.hds .lu3-kachel.hoch img{width: 60%; right: -4%; bottom: -8%;}}
@media (max-width: 640px){.hds.hds .lu3-lineup{grid-template-columns: repeat(6, 64vw);}
.hds.hds .lu3-lineup-teil{scroll-snap-align: center;}
.hds.hds .lu3-lineup-wrap{scroll-snap-type: x mandatory;}
.hds.hds .lu3-reihe{padding: 22px; border-radius: 28px;}
.hds.hds .lu3-h1.wort{min-height: 0; font-size: 38px;}
.hds.hds .lu3-wort-tabs{grid-template-columns: repeat(6, 150px); overflow-x: auto; scrollbar-width: none;}
.hds.hds .lu3-wort-tabs::-webkit-scrollbar{display: none;}
.hds.hds .lu3-bento{grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto;}
.hds.hds .lu3-kachel,.hds.hds .lu3-kachel.gross{grid-column: auto; min-height: 280px;}
.hds.hds .lu3-kachel .t{max-width: 100%; padding-bottom: 150px;}
.hds.hds .lu3-kachel img,.hds.hds .lu3-kachel.gross img,.hds.hds .lu3-kachel.hoch img{width: 62%;}
.hds.hds .lu3-kino{height: auto;}
.hds.hds .lu3-kino-pin{position: relative; top: 0; height: min(78svh, 640px);}
.hds.hds .lu3-kino-rahmen{clip-path: inset(0 round 0);}
.hds.hds .lu3-kino-rahmen video{transform: none;}
.hds.hds .lu3-kino-schleier{opacity: 1;}
.hds.hds .lu3-kino-text,.hds.hds .lu3-kino-zahlen{opacity: 1; transform: translateX(-50%);}
.hds.hds .lu3-kino-text{transform: none; pointer-events: auto;}
.hds.hds .lu3-kino-zahlen{gap: 18px;}
.hds.hds .lu3-kino-hinweis{display: none;}}
@media (prefers-reduced-motion: reduce){.hds.hds .lu3-kino{height: auto;}
.hds.hds .lu3-kino-pin{position: relative; top: 0;}
.hds.hds .lu3-kino-rahmen{clip-path: none;}
.hds.hds .lu3-kino-text,.hds.hds .lu3-kino-zahlen{opacity: 1; transform: none;}
.hds.hds .lu3-kino-zahlen{transform: translateX(-50%);}}

/* ═══ 4.6.0 · Anpassungsdokument (AP 22) ═══════════════════════════════════════════════════════════════════════════ */

/* Schritte: die Linie liegt unter den Kreisen. Die Schritte sind durch data-stagger eigene Stapel-Ebenen; die Linie
   (::after) wurde danach gemalt und lief über die ersten Kreise. Jetzt: Linie z 0, Schritte z 1. */
.hds.hds .ls-schritte::before,.hds.hds .ls-schritte::after{z-index: 0;}
.hds.hds .ls-schritt{position: relative; z-index: 1;}

/* Schritte zum Anklicken */
.hds.hds button.ls-schritt{all: unset; box-sizing: border-box; position: relative; z-index: 1; display: grid; gap: 12px; align-content: start; cursor: pointer; padding: 0 0 14px; border-radius: 18px; text-transform: none; white-space: normal; transition: transform .45s var(--spring);}
.hds.hds button.ls-schritt:hover{transform: translateY(-3px);}
.hds.hds button.ls-schritt:focus-visible{outline: 2px solid var(--blau); outline-offset: 6px;}
.hds.hds button.ls-schritt b{transition: background .3s, color .3s, transform .45s var(--spring);}
.hds.hds button.ls-schritt.an b{background: var(--blau); color: #fff; transform: scale(1.08);}
.hds.hds button.ls-schritt h3{transition: color .3s;}
.hds.hds button.ls-schritt.an h3{color: var(--blau);}
.hds.hds .ls-schritt-mehr{justify-self: start; font: 700 12.5px/1 var(--kopf); color: var(--blau); display: inline-flex; align-items: center; gap: 6px; opacity: .7; transition: opacity .3s;}
.hds.hds .ls-schritt-mehr::after{content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .35s var(--spring);}
.hds.hds button.ls-schritt:hover .ls-schritt-mehr,.hds.hds button.ls-schritt.an .ls-schritt-mehr{opacity: 1;}
.hds.hds button.ls-schritt.an .ls-schritt-mehr{visibility: hidden;}
.hds.hds .ls-schritt-details{margin-top: clamp(22px, 3vw, 36px);}
.hds.hds .ls-schritt-detail{display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(16px, 2vw, 22px); border-radius: 30px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);}
.hds.hds .ls-schritt-detail.an{animation: hds-schritt-rein .6s var(--spring) both;}
.hds.hds .ls-schritt-detail.ohne-bild{grid-template-columns: 1fr; padding: clamp(22px, 3vw, 34px);}
.hds.hds .ls-schritt-detail .hd-bild{aspect-ratio: 16 / 10; border-radius: 22px;}
.hds.hds .ls-schritt-detail .hd-bild img{width: 100%; height: 100%; object-fit: cover;}
.hds.hds .ls-schritt-detail .txt{display: grid; gap: 12px; padding-right: clamp(0px, 2vw, 22px);}
.hds.hds .ls-schritt-detail small{font: 700 12px/1 var(--kopf); letter-spacing: .12em; text-transform: uppercase; color: var(--blau);}
.hds.hds .ls-schritt-detail h3{font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em;}
.hds.hds .ls-schritt-detail p{font-size: 16.5px; line-height: 1.7; color: var(--text-2);}
.hds.hds .ls-schritt-detail[hidden]{display: none;}
@keyframes hds-schritt-rein{from{opacity: 0; transform: translateY(12px);}to{opacity: 1; transform: none;}}
@media (max-width: 1000px){.hds.hds .ls-schritt-detail{grid-template-columns: 1fr;}}

/* Formate als Verzeichnis: links alle Leistungen, rechts die Vorschau */
.hds.hds .ls-index{display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 64px); align-items: start;}
.hds.hds .ls-index-liste{list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie);}
.hds.hds .ls-index-liste li{border-bottom: 1px solid var(--linie);}
.hds.hds .ls-index-zeile{position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 34px; align-items: center; gap: 14px; padding: 15px 10px 15px 6px; color: var(--text); text-decoration: none; border-radius: 16px; transition: background .3s, padding .45s var(--spring);}
.hds.hds .ls-index-zeile .nr{font: 700 13px/1 var(--kopf); color: var(--text-3); letter-spacing: .04em; transition: color .3s;}
.hds.hds .ls-index-zeile .mini{display: none;}
.hds.hds .ls-index-zeile .txt{display: grid; gap: 3px; min-width: 0;}
.hds.hds .ls-index-zeile .txt b{font: 700 clamp(17px, 1.45vw, 20px)/1.2 var(--kopf); letter-spacing: -.01em;}
.hds.hds .ls-index-zeile .txt span{font-size: 14px; line-height: 1.45; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hds.hds .ls-index-zeile .schild{font: 700 11px/1 var(--kopf); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 99px; background: rgba(46, 167, 255, .12); color: var(--blau); white-space: nowrap;}
.hds.hds .ls-index-zeile .schild.leise{background: transparent; color: var(--text-3); padding: 7px 0;}
.hds.hds .ls-index-zeile .pfeil{width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--hell); color: var(--blau); transition: transform .45s var(--spring), background .3s, color .3s;}
.hds.hds .ls-index-zeile .pfeil svg{width: 16px; height: 16px;}
.hds.hds .ls-index-zeile.an{background: #fff; padding-left: 16px; box-shadow: inset 0 0 0 1px var(--linie), 0 16px 34px -26px rgba(11, 37, 69, .4);}
.hds.hds .ls-index-zeile.an .nr{color: var(--blau);}
.hds.hds .ls-index-zeile.an .pfeil{background: var(--blau); color: #fff; transform: rotate(-45deg);}
.hds.hds .ls-index-vorschau{position: sticky; top: calc(var(--hds-kopf, 77px) + 24px); aspect-ratio: 4 / 5; max-height: calc(100vh - var(--hds-kopf, 77px) - 48px); width: 100%; margin-left: auto; border-radius: 30px; overflow: hidden; background: var(--navy); box-shadow: var(--schatten-hoch);}
.hds.hds .ls-index-vorschau figure{position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .55s var(--ease);}
.hds.hds .ls-index-vorschau figure.an{opacity: 1;}
.hds.hds .ls-index-vorschau img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease);}
.hds.hds .ls-index-vorschau figure.an img{transform: scale(1);}
/* Kräftiger im unteren Drittel: Die Geräte-Mockups reichen bis an den Rand, Text und Knopf brauchen ruhigen Grund (4.9.3) */
.hds.hds .ls-index-vorschau figure::after{content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 22, 47, .97) 0%, rgba(6, 22, 47, .9) 26%, rgba(6, 22, 47, .55) 40%, rgba(6, 22, 47, 0) 58%);}
.hds.hds .ls-index-vorschau figcaption{position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 8px; padding: clamp(20px, 2.6vw, 32px); color: #fff;}
.hds.hds .ls-index-vorschau figcaption small{font: 700 11.5px/1 var(--kopf); letter-spacing: .14em; text-transform: uppercase; color: #9AD6FF;}
.hds.hds .ls-index-vorschau figcaption b{font: 800 clamp(24px, 2.4vw, 34px)/1.1 var(--kopf); letter-spacing: -.02em;}
.hds.hds .ls-index-vorschau figcaption span{font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .86); max-width: 42ch;}
.hds.hds .ls-index-vorschau figcaption .hd-btn{justify-self: start; margin-top: 8px; pointer-events: auto;}
.hds.hds .ls-index-vorschau figure:not(.an) figcaption .hd-btn{pointer-events: none;}
@media (max-width: 1000px){.hds.hds .ls-index{grid-template-columns: 1fr;}
.hds.hds .ls-index-vorschau{display: none;}
.hds.hds .ls-index-zeile{grid-template-columns: 64px minmax(0, 1fr) 30px; padding: 12px 6px;}
.hds.hds .ls-index-zeile .nr,.hds.hds .ls-index-zeile .schild{display: none;}
.hds.hds .ls-index-zeile .mini{display: block; width: 64px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--hell);}
.hds.hds .ls-index-zeile .mini img{width: 100%; height: 100%; object-fit: cover;}
.hds.hds .ls-index-zeile .txt span{white-space: normal;}
.hds.hds .ls-index-zeile .pfeil{width: 30px; height: 30px;}
.hds.hds .ls-index-zeile.an{padding-left: 6px; background: transparent; box-shadow: none;}
.hds.hds .ls-index-zeile.an .pfeil{transform: none; background: var(--hell); color: var(--blau);}}

/* Bento zum Anklicken: die offene Kachel ist 2 × 2, die übrigen rücken nach (grid-auto-flow: dense) */
.hds.hds .ls-bento--klick{grid-auto-flow: dense;}
.hds.hds .ls-bento--klick .kachel{cursor: pointer; transition: box-shadow .35s;}
.hds.hds .ls-bento--klick .kachel:focus-visible{outline: 3px solid var(--akzent); outline-offset: 3px;}
.hds.hds .ls-bento--klick .kachel.offen{grid-column: span 2; grid-row: span 2; cursor: default;}
.hds.hds .ls-bento--klick .kachel:not(.offen):hover img{transform: scale(1.06);}
.hds.hds .ls-branche{position: absolute; top: 16px; left: 16px; z-index: 1; padding: 7px 11px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--navy); font: 700 11.5px/1 var(--kopf); letter-spacing: .04em; text-shadow: none;}
.hds.hds .ls-bento-info{display: none; gap: 14px; margin-top: 12px; max-width: 58ch;}
.hds.hds .ls-bento--klick .kachel.offen .ls-bento-info{display: grid; animation: hds-schritt-rein .6s var(--spring) .1s both;}
.hds.hds .ls-bento-info p{font-size: 15.5px; line-height: 1.6;}
.hds.hds .ls-bento-info .hd-btn{justify-self: start; text-shadow: none;}
.hds.hds .ls-bento--klick .kachel.offen h3{font-size: clamp(24px, 2.4vw, 34px);}
@media (max-width: 1000px){.hds.hds .ls-bento--klick .kachel.offen{grid-column: span 2; grid-row: span 2;}}
@media (max-width: 640px){.hds.hds .ls-bento--klick{grid-auto-rows: 170px;}
.hds.hds .ls-bento--klick .kachel.offen{grid-column: auto; grid-row: span 3;}}
::view-transition-group(*){animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1);}

/* Weiterführende Seiten mit Bild */
.hds.hds .ls-unter--bild a{grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 10px 10px 18px; row-gap: 16px; align-items: end;}
.hds.hds .ls-unter--bild .hd-bild{grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: 14px;}
.hds.hds .ls-unter--bild .hd-bild img{width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease);}
.hds.hds .ls-unter--bild a:hover .hd-bild img{transform: scale(1.05);}
.hds.hds .ls-unter--bild a > div{padding-left: 10px;}
.hds.hds .ls-unter--bild .bv1-pfeil{margin-right: 6px;}

/* Worauf es ankommt: großes Bild, bleibt beim Lesen neben dem Text stehen */
.hds.hds .ls-lang--gross{grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);}
.hds.hds .ls-lang--gross .kopf{height: min(calc(100vh - var(--hds-kopf, 77px) - 60px), 820px); grid-template-rows: auto auto minmax(0, 1fr);}
.hds.hds .ls-lang--gross .kopf .ls-objekt{min-height: 0; height: 100%;}
.hds.hds .ls-lang--gross .kopf .ls-objekt img{width: 100%; height: 100%; max-width: none; object-fit: contain;}
.hds.hds .ls-lang--gross .kopf .ls-objekt::before{width: 90%;}
@media (max-width: 1000px){.hds.hds .ls-lang--gross{grid-template-columns: 1fr;}
.hds.hds .ls-lang--gross .kopf{height: auto;}
.hds.hds .ls-lang--gross .kopf .ls-objekt{display: grid; height: auto;}
.hds.hds .ls-lang--gross .kopf .ls-objekt img{height: auto; max-height: 360px;}}

/* Anfrage-Baukasten: kurze Zusammenfassung, Einordnung als Zeile unter der Auswahl */
.hds.hds .ls-anfrage-links{display: grid; gap: 14px; min-width: 0;}
.hds.hds .ls-zusammen .satz.kurz{font-size: clamp(18px, 1.5vw, 21px);}
.hds.hds .ls-zusammen .satz.kurz .rest{color: rgba(255, 255, 255, .72); font-weight: 500;}
.hds.hds .ls-einordnung-zeile{display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 20px; border-radius: 18px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--linie); font-size: 14px; color: var(--text-2);}
.hds.hds .ls-einordnung-zeile .kl{font: 700 11px/1 var(--kopf); letter-spacing: .12em; text-transform: uppercase; color: var(--blau);}
.hds.hds .ls-einordnung-zeile b{font: 700 15px/1.2 var(--kopf); color: var(--text);}
.hds.hds .ls-einordnung-zeile .t{flex: 1 1 260px;}
.hds.hds .ls-einordnung-zeile .preis{font: 800 14px/1 var(--kopf); color: var(--text);}

/* Social-Plan als Monatskalender (AP 22): Steuerung oben, Kalender über die volle Breite, Knopf unter dem Kasten */
.hds.hds .ls-monatsplan{display: grid; grid-template-columns: 1fr; gap: 22px;}
.hds.hds .ls-mp-steuer{display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(220px, .8fr); gap: 18px 30px; align-items: start;}
.hds.hds .ls-mp-steuer .titel small{margin-left: 8px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-3);}
.hds.hds .ls-mp-regler input[type="range"]{width: 100%; margin: 14px 0 6px; accent-color: var(--blau); height: 28px; cursor: pointer;}
.hds.hds .ls-mp-regler .skala{display: flex; justify-content: space-between; font: 600 12px/1 var(--kopf); color: var(--text-3);}
.hds.hds .ls-mp-kalender{padding: clamp(14px, 2vw, 20px); border-radius: 24px; background: var(--hg); box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .ls-mp-kopf{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: 12px;}
.hds.hds .ls-mp-kopf b{font: 700 18px/1.2 var(--kopf); letter-spacing: -.01em;}
.hds.hds .ls-mp-wochentage,.hds.hds .ls-mp-tage{display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;}
.hds.hds .ls-mp-wochentage span{font: 700 11px/1 var(--kopf); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); text-align: center; padding: 4px 0 8px;}
.hds.hds .ls-mp-tag{display: grid; gap: 4px; align-content: start; min-width: 0; min-height: 104px; padding: 7px 6px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .ls-mp-tag.leer{background: transparent; box-shadow: none;}
.hds.hds .ls-mp-tag.wochenende{background: rgba(255, 255, 255, .6);}
.hds.hds .ls-mp-tag.vorbei{opacity: .5;}
.hds.hds .ls-mp-tag.heute{box-shadow: inset 0 0 0 2px var(--akzent);}
.hds.hds .ls-mp-tag small{font: 700 12px/1 var(--kopf); color: var(--text-3); padding: 1px 2px 3px;}
.hds.hds .ls-mp-post{display: grid; gap: 1px; min-width: 0; padding: 5px 6px 5px 8px; border-radius: 8px; background: color-mix(in srgb, var(--f) 9%, #fff); box-shadow: inset 3px 0 0 var(--f); font-size: 11px; line-height: 1.25; animation: hds-ls-rein .4s var(--spring) both; animation-delay: calc(var(--i) * 40ms);}
.hds.hds .ls-mp-post b{font: 700 10.5px/1.1 var(--kopf); color: var(--f);}
.hds.hds .ls-mp-post span{color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.hds.hds .ls-mp-tag em{font: 700 11px/1 var(--kopf); font-style: normal; color: var(--text-3); padding-left: 4px;}
.hds.hds .ls-mp-fuss{display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 26px; align-items: center;}
.hds.hds .ls-mp-cta{margin-top: 22px; display: flex; justify-content: center;}
@media (max-width: 1000px){.hds.hds .ls-mp-steuer{grid-template-columns: 1fr 1fr;}
.hds.hds .ls-mp-regler{grid-column: 1 / -1;}
.hds.hds .ls-mp-fuss{grid-template-columns: 1fr;}}
@media (max-width: 700px){.hds.hds .ls-mp-steuer{grid-template-columns: 1fr;}
.hds.hds .ls-mp-wochentage,.hds.hds .ls-mp-tage{gap: 3px;}
.hds.hds .ls-mp-tag{min-height: 58px; padding: 5px 3px; border-radius: 9px; grid-template-columns: repeat(3, 6px); grid-auto-rows: 6px; gap: 3px; align-content: start; justify-content: center;}
.hds.hds .ls-mp-tag small{grid-column: 1 / -1; text-align: center; font-size: 11px; padding: 0 0 2px;}
.hds.hds .ls-mp-post{width: 6px; height: 6px; padding: 0; border-radius: 50%; background: var(--f); box-shadow: none; overflow: hidden;}
.hds.hds .ls-mp-post b,.hds.hds .ls-mp-post span{display: none;}
.hds.hds .ls-mp-tag em{grid-column: 1 / -1; font-size: 9.5px; text-align: center; padding: 0;}
.hds.hds .ls-mp-kalender{padding: 10px;}}

/* Signage-Planer: Schleife bleibt kurz (scrollt in sich), teuer = Angebot anfragen (AP 22) */
.hds.hds [data-planer] .ls-playlist{max-height: 286px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent); mask-image: linear-gradient(180deg, #000 85%, transparent);}
.hds.hds [data-planer] .ls-playlist li{padding: 8px 12px; font-size: 14px;}
.hds.hds .ls-empfehlung.anfrage{grid-template-columns: 1fr; background: linear-gradient(135deg, var(--navy), #123a73);}
.hds.hds .ls-empfehlung.anfrage span{max-width: 52ch;}
.hds.hds .ls-empfehlung.anfrage .hd-btn{justify-self: start;}

/* Signage-Kopf mit drei Display-Arten (AP 22) */
.hds.hds .ls-displays{position: relative; width: 100%; aspect-ratio: 6 / 5; margin-bottom: 30px;}
.hds.hds .ls-disp{position: absolute;}
.hds.hds .ls-disp.wand{left: 0; top: 12%; width: 72%; z-index: 1;}
.hds.hds .ls-disp.stele{right: 0; top: 0; width: 27%; z-index: 2;}
.hds.hds .ls-disp.tresen{left: 10%; bottom: 3%; width: 30%; z-index: 3;}
.hds.hds .ls-screen--hoch{aspect-ratio: 9 / 16; padding: 7px; border-radius: 16px;}
.hds.hds .ls-screen--klein{aspect-ratio: 4 / 3; padding: 6px; border-radius: 12px;}
.hds.hds .ls-screen--hoch::after,.hds.hds .ls-screen--klein::after,.hds.hds .ls-screen--hoch::before,.hds.hds .ls-screen--klein::before{display: none;}
.hds.hds .ls-screen--hoch .flaeche,.hds.hds .ls-screen--klein .flaeche{border-radius: 9px;}
.hds.hds .ls-screen--hoch .balken,.hds.hds .ls-screen--klein .balken{left: 7px; right: 7px; bottom: 7px; height: 2px;}
.hds.hds .ls-screen--hoch .uhr,.hds.hds .ls-screen--klein .uhr{display: none;}
.hds.hds .ls-screen--hoch .ls-slide{padding: 12%;}
.hds.hds .ls-screen--hoch .ls-slide b{font-size: clamp(13px, 1.5vw, 19px);}
.hds.hds .ls-screen--klein .ls-slide{padding: 10%; gap: 3px;}
.hds.hds .ls-screen--klein .ls-slide small{font-size: clamp(7px, .7vw, 9px);}
.hds.hds .ls-screen--klein .ls-slide b{font-size: clamp(11px, 1.3vw, 17px);}
.hds.hds .ls-screen--klein .ls-slide span{font-size: clamp(8px, .8vw, 11px);}
.hds.hds .ls-disp .fuss{display: block; margin: -1px auto 0; background: linear-gradient(180deg, #0b1424, #26344c); box-shadow: 0 14px 22px -12px rgba(6, 22, 47, .5);}
.hds.hds .ls-disp.stele .fuss{width: 46%; height: 22px; border-radius: 0 0 12px 12px;}
.hds.hds .ls-disp.tresen .fuss{width: 22%; height: 16px; border-radius: 0 0 8px 8px;}
.hds.hds .ls-disp.stele .ls-screen{box-shadow: 0 50px 90px -40px rgba(6, 22, 47, .7), inset 0 0 0 1px rgba(255, 255, 255, .12);}
.hds.hds .ls-disp.tresen .ls-screen{box-shadow: 0 30px 60px -26px rgba(6, 22, 47, .6), inset 0 0 0 1px rgba(255, 255, 255, .14);}
.hds.hds .ls-disp-legende{position: absolute; left: 0; right: 0; bottom: -34px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;}
.hds.hds .ls-disp-legende span{font: 700 11.5px/1 var(--kopf); letter-spacing: .04em; padding: 7px 11px; border-radius: 99px; background: #fff; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--linie);}
@media (max-width: 1000px){.hds.hds .ls-displays{max-width: 560px; margin: 10px auto 40px;}}
/* Knopf in der offenen Bento-Kachel: die Kachelregel „.ls-bento a“ (Spalte, Polster, Verlauf) gilt nicht für ihn */
.hds.hds.hds .ls-bento .ls-bento-info a.hd-btn{display: inline-flex; flex-direction: row; justify-content: center; align-items: center; padding: 13px 20px; border-radius: 999px; overflow: visible; isolation: auto; color: var(--fg); text-shadow: none; font-size: 14.5px;}
.hds.hds.hds .ls-bento .ls-bento-info a.hd-btn::before{display: none;}

/* Stele hochkant: eigene Folien mit großer Schrift (dunkel und hell im Wechsel) */
.hds.hds .ls-slide.dunkel{background: linear-gradient(170deg, #0b2545 0%, #133f7c 100%); align-content: center;}
.hds.hds .ls-slide.dunkel::before{display: none;}
.hds.hds .ls-screen--hoch .ls-slide.dunkel,.hds.hds .ls-screen--hoch .ls-slide.hell{align-content: center; gap: 10px;}
.hds.hds .ls-screen--hoch .ls-slide.dunkel b,.hds.hds .ls-screen--hoch .ls-slide.hell b{font-size: clamp(17px, 1.9vw, 26px); line-height: 1.05;}
.hds.hds .ls-screen--hoch .ls-slide small{font-size: clamp(8px, .75vw, 10px);}
.hds.hds .ls-screen--hoch .ls-slide span{font-size: clamp(9px, .85vw, 12px);}
/* Schritte zum Anklicken am Handy: wie die normalen Schritte zweispaltig, Kreis links auf der Linie (4.6.2) */
@media (max-width: 1000px){.hds.hds button.ls-schritt{grid-template-columns: 48px minmax(0, 1fr); gap: 6px 16px; padding-bottom: 8px;}
.hds.hds button.ls-schritt > :not(b){grid-column: 2;}
.hds.hds button.ls-schritt b{grid-row: 1 / 6; align-self: start;}
.hds.hds button.ls-schritt:hover{transform: none;}}
/* Video-Kopf am Handy: Schrift steht unten auf dem Film, der Verlauf deckt mehr ab */
@media (max-width: 767px){.hds.hds .ls-hero-video::before{background: linear-gradient(to top, rgba(6,22,47,.96) 0%, rgba(6,22,47,.82) 45%, rgba(6,22,47,.35) 80%, rgba(6,22,47,.2));}}

/* ═══ Display-Bühne (Kopf, Aufbau „Bühne“, Digital Signage, 4.7.4) ═══
   Wunsch 01.10.2026: Displays „cinematisch und groß“. Drei Geräte wie im Showroom-Foto: abgehängtes Deckenbanner mit
   Laufschrift, Großbildschirm auf Standfuß, Stele hochkant. Maße in cqi (Breite der Bühne), damit alles mitskaliert.
   --p (0…1) setzt hds-leistung.js beim Hineinscrollen: die Kamera fährt heran. */
.hds.hds .ls-hero-buehne{padding: clamp(26px, 4vw, 54px) 0 clamp(36px, 5vw, 80px);}
.hds.hds .ls-bk-kopf{display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(22px, 4vw, 72px); align-items: end;}
.hds.hds .ls-bk-kopf .links{display: grid; gap: 14px;}
.hds.hds .ls-bk-kopf .hd-h1{margin: 0;}
.hds.hds .ls-bk-kopf .rechts{display: grid; gap: 18px; padding-bottom: 6px;}
.hds.hds .ls-bk-kopf .hd-lead{margin: 0;}
.hds.hds .ls-bk{--p: 1; position: relative; width: min(1480px, 100% - 32px); margin: clamp(30px, 4.5vw, 64px) auto 0; aspect-ratio: 16 / 9; container-type: inline-size; transform: translateY(calc((1 - var(--p)) * 70px)) scale(calc(.88 + var(--p) * .12)); transform-origin: 50% 90%; will-change: transform;}
.hds.hds .ls-bk-raum{position: absolute; inset: 0; pointer-events: none;}
.hds.hds .ls-bk-raum .licht{position: absolute; left: 8%; right: 8%; top: -12%; height: 80%; background: radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, .95), rgba(232, 243, 252, 0) 68%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%);}
.hds.hds .ls-bk-raum .boden{position: absolute; left: -6%; right: -6%; bottom: -2%; height: 24%; background: linear-gradient(180deg, rgba(205, 220, 238, 0) 0%, rgba(205, 220, 238, .5) 38%, rgba(236, 243, 250, .95) 100%); border-radius: 50% 50% 0 0 / 18% 18% 0 0;}
.hds.hds .ls-bk-geraet{position: absolute; transition: transform .6s var(--ease);}
.hds.hds .ls-bk-geraet .glanz{position: absolute; pointer-events: none; overflow: hidden; z-index: 3;}
.hds.hds .ls-bk-geraet .glanz::before{content: ""; position: absolute; top: -60%; bottom: -60%; left: -45%; width: 28%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .30), transparent); transform: skewX(-16deg); animation: hds-bk-glanz 9s cubic-bezier(.6, 0, .2, 1) infinite;}
@keyframes hds-bk-glanz{0%, 62%{left: -45%;} 100%{left: 130%;}}

/* Deckenbanner */
.hds.hds .ls-bk-geraet.banner{left: 4%; top: 6%; width: 43%; z-index: 1; translate: 0 calc((1 - var(--p)) * -46px);}
.hds.hds .ls-bk .banner .seil{position: absolute; bottom: 100%; width: 1.5px; height: 6.5cqi; background: linear-gradient(180deg, rgba(107, 122, 144, 0), #7a889b 45%);}
.hds.hds .ls-bk .banner .seil::after{content: ""; position: absolute; left: 50%; bottom: -2px; width: .7cqi; height: .7cqi; min-width: 6px; min-height: 6px; transform: translateX(-50%); border-radius: 2px; background: #34445c;}
.hds.hds .ls-bk .banner .seil.links{left: 16%;}
.hds.hds .ls-bk .banner .seil.rechts{right: 16%;}
.hds.hds .ls-bk .banner .rahmen{position: relative; aspect-ratio: 4.3 / 1; padding: .6cqi; border-radius: 2.2cqi; background: linear-gradient(180deg, #1a2b44, #0c1729); box-shadow: .5cqi .7cqi 0 #07101f, 0 3cqi 5cqi -2.4cqi rgba(6, 22, 47, .5), 0 0 7cqi -2cqi rgba(10, 85, 240, .28), inset 0 0 0 1px rgba(255, 255, 255, .08);}
.hds.hds .ls-bk .banner .anzeige{position: relative; height: 100%; display: flex; align-items: center; gap: 1.6cqi; padding: 0 0 0 1.8cqi; border-radius: 1.6cqi; overflow: hidden; background: radial-gradient(120% 140% at 20% 0%, #ffffff, #e3f0fc 55%, #cfe3f8);}
.hds.hds .ls-bk .banner .marke{flex: none; padding: .7cqi 1.2cqi; border-radius: 999px; background: var(--blau); color: #fff; font: 800 1.35cqi/1 var(--kopf); letter-spacing: .08em; text-transform: uppercase;}
.hds.hds .ls-bk .banner .lauf{flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent);}
.hds.hds .ls-bk .banner .spur{display: inline-flex; align-items: center; white-space: nowrap; animation: hds-bk-lauf 34s linear infinite;}
.hds.hds .ls-bk .banner .spur span{font: 800 3.1cqi/1 var(--kopf); letter-spacing: -.025em; color: var(--navy);}
.hds.hds .ls-bk .banner .spur i{font-style: normal; font-size: 1.8cqi; color: var(--blau); margin: 0 2.2cqi;}
@keyframes hds-bk-lauf{to{transform: translateX(-50%);}}
.hds.hds .ls-bk .banner .glanz{inset: .6cqi; border-radius: 1.6cqi;}

/* Großbildschirm auf Standfuß */
.hds.hds .ls-bk-geraet.monitor{left: 5%; top: 29%; width: 54%; z-index: 2;}
.hds.hds .ls-bk .monitor .ls-screen{padding: .7cqi; border-radius: 1.3cqi; background: #0b1424; box-shadow: 0 4cqi 7cqi -3.2cqi rgba(6, 22, 47, .55), 0 0 9cqi -2cqi rgba(10, 85, 240, .3), inset 0 0 0 1px rgba(255, 255, 255, .1);}
.hds.hds .ls-bk .monitor .ls-screen .flaeche{border-radius: .7cqi;}
/* Fuß und Schatten des bisherigen Bildschirm-Stils ausblenden, die Bühne zeichnet eigene */
.hds.hds .ls-bk .ls-screen::before,.hds.hds .ls-bk .ls-screen::after{display: none;}
.hds.hds .ls-bk .monitor .glanz{left: .7cqi; right: .7cqi; top: .7cqi; aspect-ratio: 16 / 9; height: auto; border-radius: .7cqi;}
.hds.hds .ls-bk .monitor .hals{display: block; width: 10%; height: 5.4cqi; margin: -.2cqi auto 0; background: linear-gradient(90deg, #aeb8c4, #eef2f6 45%, #b7c1cc 70%, #9aa5b2); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);}
.hds.hds .ls-bk .monitor .fuss{display: block; width: 28%; height: 1.1cqi; margin: 0 auto; border-radius: .3cqi .3cqi 1cqi 1cqi; background: linear-gradient(180deg, #f1f4f8, #aab4c0);}
.hds.hds .ls-bk .schatten{position: absolute; bottom: -1.2cqi; height: 2.6cqi; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(6, 22, 47, .34), rgba(6, 22, 47, 0) 70%); filter: blur(3px); pointer-events: none;}
.hds.hds .ls-bk .monitor .schatten{left: 22%; right: 22%;}

/* Stele hochkant */
.hds.hds .ls-bk-geraet.stele{right: 7%; bottom: 5.5%; width: 22%; z-index: 3; translate: 0 calc((1 - var(--p)) * 80px);}
/* Lichtschein der Bildschirme auf dem Boden statt einer Spiegelung */
.hds.hds .ls-bk-geraet.stele::after,.hds.hds .ls-bk-geraet.monitor::after{content: ""; position: absolute; left: 4%; right: 4%; top: 100%; height: 5cqi; background: radial-gradient(ellipse at 50% 0%, rgba(10, 85, 240, .16), rgba(10, 85, 240, 0) 70%); filter: blur(4px); pointer-events: none;}
.hds.hds .ls-bk .stele .korpus{position: relative; padding: .9cqi .9cqi 0; border-radius: 1.4cqi 1.4cqi .4cqi .4cqi; background: linear-gradient(90deg, #0a1322, #1c2b42 50%, #0a1322); box-shadow: .5cqi .6cqi 0 #050c18, 0 4cqi 8cqi -3cqi rgba(6, 22, 47, .6), 0 0 10cqi -2cqi rgba(10, 85, 240, .28);}
.hds.hds .ls-bk .stele .ls-screen--hoch{padding: 0; border-radius: .7cqi; background: none; box-shadow: none;}
.hds.hds .ls-bk .stele .ls-screen--hoch .flaeche{border-radius: .7cqi;}
.hds.hds .ls-bk .stele .glanz{left: .9cqi; right: .9cqi; top: .9cqi; bottom: 7.4cqi; border-radius: .7cqi;}
.hds.hds .ls-bk .stele .sockel{position: relative; display: block; height: 6.4cqi; margin: 0 -.9cqi; border-radius: 0 0 .4cqi .4cqi; background: linear-gradient(180deg, #121d2f, #0a1322); border-top: 1px solid rgba(255, 255, 255, .06);}
.hds.hds .ls-bk .stele .sockel::after{content: ""; position: absolute; left: -6%; right: -6%; bottom: -1.1cqi; height: 1.1cqi; border-radius: .3cqi; background: linear-gradient(180deg, #1b283d, #070e1b);}
.hds.hds .ls-bk .stele .schatten{left: -8%; right: -8%; bottom: -2.2cqi;}
.hds.hds .ls-bk .stele .ls-slide.dunkel b,.hds.hds .ls-bk .stele .ls-slide.hell b{font-size: clamp(16px, 2.2cqi, 34px);}
.hds.hds .ls-bk .stele .ls-slide small{font-size: clamp(9px, .9cqi, 13px);}
.hds.hds .ls-bk .stele .ls-slide span{font-size: clamp(10px, 1cqi, 15px);}

/* Beschriftungen wie auf einem Datenblatt */
.hds.hds .ls-bk-label{position: absolute; display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; font: 700 clamp(10px, .85cqi, 13px)/1 var(--kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);}
.hds.hds .ls-bk-label::before{content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--blau); box-shadow: 0 0 0 .35em rgba(33, 84, 166, .14);}
.hds.hds .ls-bk-label.banner{left: .4cqi; top: calc(100% + 1.4cqi);}
.hds.hds .ls-bk-label.monitor{left: calc(64% + 1cqi); bottom: .1cqi;}
.hds.hds .ls-bk-label.stele{right: calc(100% + 2.2cqi); bottom: .4cqi;}

/* Tablet: etwas mehr Höhe, Beschriftungen kleiner */
@media (max-width: 1100px){.hds.hds .ls-bk{aspect-ratio: 16 / 10;}
.hds.hds .ls-bk-geraet.monitor{top: 33%; width: 54%;}
.hds.hds .ls-bk-geraet.stele{width: 23%;}}
@media (max-width: 900px){.hds.hds .ls-bk-kopf{grid-template-columns: minmax(0, 1fr); align-items: start;}}
/* Handy: hohe Bühne, Stele steht vorn und überlappt den Bildschirm, Laufschrift größer */
@media (max-width: 767px){.hds.hds .ls-bk{width: calc(100% - 20px); aspect-ratio: 8 / 11; transform: translateY(calc((1 - var(--p)) * 40px)) scale(calc(.92 + var(--p) * .08));}
.hds.hds .ls-bk-geraet.banner{left: 4%; top: 4%; width: 92%;}
.hds.hds .ls-bk .banner .seil{height: 9cqi;}
.hds.hds .ls-bk .banner .marke{font-size: 2.6cqi; padding: 1.2cqi 2cqi;}
.hds.hds .ls-bk .banner .spur span{font-size: 6.2cqi;}
.hds.hds .ls-bk .banner .spur i{font-size: 3.4cqi; margin: 0 3.4cqi;}
.hds.hds .ls-bk .banner .rahmen{padding: 1.1cqi; border-radius: 3.4cqi;}
.hds.hds .ls-bk .banner .anzeige{border-radius: 2.6cqi; gap: 2.6cqi; padding-left: 2.6cqi;}
.hds.hds .ls-bk-geraet.monitor{left: 2%; top: 31%; width: 74%;}
.hds.hds .ls-bk .monitor .ls-screen{padding: 1.2cqi; border-radius: 2.4cqi;}
.hds.hds .ls-bk .monitor .hals{height: 7cqi;}
.hds.hds .ls-bk .monitor .fuss{height: 1.8cqi;}
.hds.hds .ls-bk-geraet.stele{right: 3%; bottom: 4%; width: 37%;}
.hds.hds .ls-bk .stele .korpus{padding: 1.6cqi 1.6cqi 0; border-radius: 2.6cqi 2.6cqi .8cqi .8cqi;}
.hds.hds .ls-bk .stele .sockel{height: 9cqi; margin: 0 -1.6cqi;}
.hds.hds .ls-bk .stele .glanz{left: 1.6cqi; right: 1.6cqi; top: 1.6cqi; bottom: 10.6cqi;}
.hds.hds .ls-bk .stele .ls-slide.dunkel b,.hds.hds .ls-bk .stele .ls-slide.hell b{font-size: 5cqi;}
.hds.hds .ls-bk-label{display: none;}}
@media (prefers-reduced-motion: reduce){.hds.hds .ls-bk{transform: none; --p: 1;}
.hds.hds .ls-bk .banner .spur,.hds.hds .ls-bk-geraet .glanz::before{animation: none;}}
/* 4.14.0: Video-Hero am Handy – Text steht über fast der ganzen Höhe, also überall genug Abdunklung, Video bleibt als Stimmung sichtbar */
@media (max-width: 767px){
	.hds.hds .ls-hero-video::before{background: linear-gradient(to top, rgba(6,22,47,.97) 0%, rgba(6,22,47,.9) 55%, rgba(6,22,47,.74) 100%);}
	.hds.hds .ls-hero-video video,.hds.hds .ls-hero-video > img{filter: blur(2px) saturate(.9); transform: scale(1.04);}
	.hds.hds .ls-hero-video .hd-h1,.hds.hds .ls-hero-video .hd-lead{text-shadow: 0 2px 18px rgba(6,22,47,.55);}
}