/* German Web Awards 2026 · zehn Bausteine
   Automatisch erzeugt aus prototyp/assets/award.css mit werkzeuge/award_css.py (AP 18). Nicht von Hand ändern. */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/instrument-serif-normal-latin.woff2) format("woff2");}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../vendor/fonts/instrument-serif-italic-latin.woff2) format("woff2");}
.hds.hds{--gwa-schwarz: #0b0b0c;
  --gwa-kohle: #141416;
  --gwa-gold: #c5ad84;
  --gwa-gold-tief: #a5916f;
  --gwa-rot: #e02424;
  --gwa-serif: "Instrument Serif", "Times New Roman", serif;
  --gwa-kante: linear-gradient(180deg, var(--gwa-rot) 0%, var(--gwa-gold) 58%, var(--gwa-gold-tief) 100%);}
.hds.hds .gwa-serif{font-family: var(--gwa-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;}
.hds.hds .gwa-gold{color: var(--gwa-gold);}
.hds.hds .gwa-schimmer{position: relative; overflow: hidden; isolation: isolate;}
.hds.hds .gwa-schimmer::after{content: ""; position: absolute; inset: -40% -60%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 244, 222, .55) 50%, transparent 58%);
  transform: translateX(-60%); animation: hds-gwa-schimmer 6.5s cubic-bezier(.45, 0, .2, 1) infinite;}
@keyframes hds-gwa-schimmer{0%, 62% { transform: translateX(-60%); } 100% { transform: translateX(60%); }}
.hds.hds .gwa-demo{position: relative; border-radius: 32px; overflow: hidden;}
.hds.hds .gwa-demo.dunkel{background: var(--gwa-schwarz); color: #fff;}
.hds.hds .gwa-buehne{position: relative; height: var(--strecke, 170vh); border-radius: 32px; background: var(--gwa-schwarz); --p: 0;}
.hds.hds .gwa-buehne-pin{position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; border-radius: calc(32px * (1 - var(--auf, 0)));}
.hds.hds .gwa-buehne-rahmen{position: absolute; inset: 0; transform: scale(calc(1 - var(--zu, 0) * .12)); border-radius: calc(var(--zu, 0) * 40px); overflow: hidden; background: var(--gwa-schwarz); transition: transform .05s linear;}
.hds.hds .gwa-buehne video,.hds.hds .gwa-buehne .poster{position: absolute; left: 50%; top: 50%; height: 118%; width: auto; transform: translate(-50%, -50%) scale(calc(1.08 - var(--p) * .12)); filter: brightness(calc(.55 + var(--licht, 0) * .5));}
.hds.hds .gwa-buehne .strahl{position: absolute; left: 50%; top: -30%; width: 140vmax; height: 140vmax; transform: translateX(-50%); background: conic-gradient(from 180deg at 50% 0%, transparent 44%, rgba(255, 246, 228, .10) 48%, rgba(255, 246, 228, .22) 50%, rgba(255, 246, 228, .10) 52%, transparent 56%); opacity: calc(var(--licht, 0) * .9); mix-blend-mode: screen; pointer-events: none;}
.hds.hds .gwa-buehne .korn{position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; pointer-events: none;}
.hds.hds .gwa-buehne .schleier{position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 45%, transparent 30%, rgba(0, 0, 0, .75) 100%), linear-gradient(90deg, rgba(0, 0, 0, .75), transparent 35%, transparent 65%, rgba(0, 0, 0, .75));}
.hds.hds .gwa-buehne-text{position: relative; z-index: 3; width: min(1240px, calc(100% - 48px)); display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; color: #fff;}
.hds.hds .gwa-buehne-text .links{align-self: center;}
.hds.hds .gwa-buehne h2{font: 800 clamp(48px, 8.4vw, 132px)/.88 var(--kopf); letter-spacing: -.045em;}
.hds.hds .gwa-buehne h2 .zeile{display: block; overflow: hidden; padding-bottom: .06em;}
.hds.hds .gwa-buehne h2 .zeile > span{display: inline-block; transform: translateY(calc((1 - var(--t1, 0)) * 105%));}
.hds.hds .gwa-buehne h2 .zeile:nth-child(2) > span{transform: translateY(calc((1 - var(--t2, 0)) * 105%));}
.hds.hds .gwa-buehne h2 .gwa-serif{font-weight: 400; color: var(--gwa-gold); letter-spacing: -.02em;}
.hds.hds .gwa-buehne .unter{margin-top: 26px; max-width: 34ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, .72); opacity: var(--t3, 0); transform: translateY(calc((1 - var(--t3, 0)) * 16px));}
.hds.hds .gwa-buehne .knoepfe{display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; opacity: var(--t3, 0);}
.hds.hds .gwa-buehne .rechts{justify-self: end; text-align: right; opacity: var(--t3, 0);}
.hds.hds .gwa-siegelkarte{display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 20px; background: rgba(255, 255, 255, .08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); text-align: left;}
.hds.hds .gwa-siegelkarte img{width: 64px; height: 64px; border-radius: 12px;}
.hds.hds .gwa-siegelkarte b{display: block; font: 800 15px/1.2 var(--kopf); letter-spacing: .02em;}
.hds.hds .gwa-siegelkarte span{font: 400 17px/1.2 var(--gwa-serif); font-style: italic; color: var(--gwa-gold);}
.hds.hds .gwa-scrollhinweis{position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; font: 700 11px/1 var(--kopf); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); opacity: calc(1 - var(--t1, 0) * 1.4);}
.hds.hds .gwa-scrollhinweis i{width: 1px; height: 44px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .8)); animation: hds-gwa-tropfen 1.8s ease-in-out infinite;}
@keyframes hds-gwa-tropfen{0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; }}
.hds.hds .gwa-wuerfel{display: grid; grid-template-columns: 1.15fr .85fr; min-height: 720px; background: radial-gradient(90% 80% at 30% 40%, #1d1d21 0%, var(--gwa-schwarz) 70%);}
.hds.hds .gwa-wuerfel-feld{position: relative; cursor: grab; touch-action: pan-y;}
.hds.hds .gwa-wuerfel-feld:active{cursor: grabbing;}
.hds.hds .gwa-wuerfel-feld canvas{position: absolute; inset: 0; width: 100%; height: 100%; display: block;}
.hds.hds .gwa-wuerfel-feld .ersatz{position: absolute; inset: 8% 10%; background: center/contain no-repeat; opacity: 0; transition: opacity .6s;}
.hds.hds .gwa-wuerfel-feld.ohne-3d .ersatz{opacity: 1;}
.hds.hds .gwa-wuerfel-feld .boden{position: absolute; left: 50%; bottom: 14%; width: 46%; height: 60px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .7), transparent 70%); filter: blur(6px); pointer-events: none;}
.hds.hds .gwa-greif{position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font: 700 12.5px/1 var(--kopf); color: rgba(255, 255, 255, .8); transition: opacity .6s, transform .6s var(--spring); pointer-events: none;}
.hds.hds .gwa-greif svg{width: 18px; height: 18px; animation: hds-gwa-wink 2.4s ease-in-out infinite;}
@keyframes hds-gwa-wink{0%, 100% { transform: translateX(-4px) rotate(-8deg); } 50% { transform: translateX(4px) rotate(8deg); }}
.hds.hds .gwa-wuerfel-feld.gegriffen .gwa-greif{opacity: 0; transform: translateX(-50%) translateY(10px);}
.hds.hds .gwa-wuerfel-text{padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px) clamp(40px, 5vw, 72px) 0; align-self: center; color: #fff;}
.hds.hds .gwa-wuerfel-text .hd-eyebrow{color: var(--gwa-gold);}
.hds.hds .gwa-wuerfel-text h3{font: 800 clamp(34px, 3.6vw, 54px)/1 var(--kopf); letter-spacing: -.035em; margin: 16px 0 18px;}
.hds.hds .gwa-wuerfel-text p{color: rgba(255, 255, 255, .7); line-height: 1.6;}
.hds.hds .gwa-wuerfel-daten{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px;}
.hds.hds .gwa-wuerfel-daten div{padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);}
.hds.hds .gwa-wuerfel-daten small{display: block; font: 700 10.5px/1 var(--kopf); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 7px;}
.hds.hds .gwa-wuerfel-daten b{font: 700 15px/1.3 var(--kopf);}
.hds.hds .gwa-wuerfel-knoepfe{display: flex; gap: 8px; margin-top: 22px;}
.hds.hds .gwa-wuerfel-knoepfe button{padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: 700 13px/1 var(--kopf); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: background .25s, transform .3s var(--spring);}
.hds.hds .gwa-wuerfel-knoepfe button:hover{background: rgba(255, 255, 255, .16);}
.hds.hds .gwa-wuerfel-knoepfe button:active{transform: scale(.94);}
.hds.hds .gwa-wuerfel-knoepfe button[aria-pressed="true"]{background: var(--gwa-gold); color: var(--gwa-schwarz);}
.hds.hds .gwa-band-rahmen{padding: 34px 0; background: #fff;}
.hds.hds .gwa-band{position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.hds.hds .gwa-band-spur{display: flex; gap: 14px; width: max-content; animation: hds-gwa-lauf 38s linear infinite;}
.hds.hds .gwa-band:hover .gwa-band-spur{animation-play-state: paused;}
@keyframes hds-gwa-lauf{to { transform: translateX(-50%); }}
.hds.hds .gwa-band-teil{position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; border-radius: 999px; background: var(--hg); white-space: nowrap; font: 700 15px/1 var(--kopf); color: var(--text);}
.hds.hds .gwa-band-teil img{width: 34px; height: 34px; border-radius: 9px;}
.hds.hds .gwa-band-teil .gwa-serif{font-size: 18px; color: var(--gwa-gold-tief);}
.hds.hds .gwa-band-teil.schwarz{background: var(--gwa-schwarz); color: #fff;}
.hds.hds .gwa-band-teil.schwarz .gwa-serif{color: var(--gwa-gold);}
.hds.hds .gwa-band-teil .tipp{position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px) scale(.96); opacity: 0; pointer-events: none; padding: 10px 14px; border-radius: 12px; background: var(--gwa-schwarz); color: #fff; font: 500 13px/1.45 var(--lauf); white-space: normal; width: 240px; text-align: left; box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .5); transition: opacity .2s, transform .35s var(--spring); z-index: 5;}
.hds.hds .gwa-band-teil:hover .tipp{opacity: 1; transform: translate(-50%, 0) scale(1);}
/* Logo-Kacheln (4.6.0, AP 22): größer, laufen ohne Halt. Vier Kopien der Einträge, eine Runde = ein Viertel der Spur. */
.hds.hds .gwa-band-rahmen--logos{padding: 26px 0;}
.hds.hds .gwa-band-rahmen.gwa-band-rahmen--logos{margin: 0;}
.hds.hds .gwa-band--logos .gwa-band-spur{gap: 18px; animation: hds-gwa-lauf-4 var(--gwa-band-dauer, 48s) linear infinite;}
.hds.hds .gwa-band--logos:hover .gwa-band-spur{animation-play-state: running;}
@keyframes hds-gwa-lauf-4{from{transform: translateX(0);}to{transform: translateX(calc(-25% - 4.5px));}}
.hds.hds .gwa-logo-teil{display: inline-flex; align-items: center; gap: 16px; height: 92px; padding: 0 28px 0 14px; border-radius: 24px; background: #fff; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--linie), 0 14px 34px -26px rgba(11, 37, 69, .45);}
.hds.hds .gwa-logo-bild{flex: none; display: grid; place-items: center; height: 64px; min-width: 64px;}
.hds.hds .gwa-logo-bild img{height: 64px; width: auto; max-width: 132px; object-fit: contain; border-radius: 14px; display: block;}
.hds.hds .gwa-logo-bild.marke-google{width: 64px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .gwa-logo-bild.marke-google img{height: 34px; border-radius: 0;}
.hds.hds .gwa-logo-bild.marke-raidboxes img{height: 58px; border-radius: 10px;}
.hds.hds .gwa-logo-text b{display: block; font: 800 18px/1.15 var(--kopf); color: var(--text); letter-spacing: -.01em; text-transform: none;}
.hds.hds .gwa-logo-text b .gwa-serif{font-size: 21px; font-weight: 400; color: var(--gwa-gold-tief);}
.hds.hds .gwa-logo-text small{display: block; margin-top: 5px; font: 600 13px/1.3 var(--lauf); color: var(--text-2);}
.hds.hds .gwa-logo-teil.schwarz{background: var(--gwa-schwarz);}
.hds.hds .gwa-logo-teil.schwarz b{color: #fff;}
.hds.hds .gwa-logo-teil.schwarz b .gwa-serif{color: var(--gwa-gold);}
.hds.hds .gwa-logo-teil.schwarz small{color: rgba(255, 255, 255, .66);}
@media (max-width: 640px){.hds.hds .gwa-logo-teil{height: 74px; gap: 12px; padding: 0 20px 0 10px; border-radius: 20px;}
.hds.hds .gwa-logo-bild{height: 50px; min-width: 50px;}
.hds.hds .gwa-logo-bild img{height: 50px;}
.hds.hds .gwa-logo-bild.marke-google{width: 50px;}
.hds.hds .gwa-logo-bild.marke-google img{height: 26px;}
.hds.hds .gwa-logo-text b{font-size: 15.5px;}
.hds.hds .gwa-logo-text small{font-size: 12px;}}
.hds.hds .gwa-band-still{display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 38px; padding: 26px 24px; margin-top: 18px; border-top: 1px solid var(--linie); align-items: center;}
.hds.hds .gwa-band-still img{height: 54px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s;}
.hds.hds .gwa-band-still img:hover{filter: none; opacity: 1;}
.hds.hds .gwa-band-still span{font: 600 13px/1.3 var(--lauf); color: var(--text-3); max-width: 22ch;}
.hds.hds .gwa-mock{position: relative; height: 560px; background: #f4f6f9;}
.hds.hds .gwa-mock-leiste{display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; background: #e9edf2;}
.hds.hds .gwa-mock-leiste i{width: 11px; height: 11px; border-radius: 50%; background: #cfd6df;}
.hds.hds .gwa-mock-leiste span{margin-left: 12px; padding: 5px 14px; border-radius: 8px; background: #fff; font: 500 12px/1 var(--lauf); color: var(--text-3);}
.hds.hds .gwa-mock-seite{padding: 40px 48px; display: grid; gap: 18px;}
.hds.hds .gwa-mock-seite .h{height: 34px; width: 52%; border-radius: 10px; background: #dfe5ec;}
.hds.hds .gwa-mock-seite .h.kurz{width: 34%;}
.hds.hds .gwa-mock-seite .t{height: 12px; width: 62%; border-radius: 6px; background: #e6ebf1;}
.hds.hds .gwa-mock-seite .reihe{display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px;}
.hds.hds .gwa-mock-seite .reihe div{height: 150px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px #e1e6ec;}
.hds.hds .gwa-mini{position: absolute; left: 22px; bottom: 22px; z-index: 5;}
.hds.hds .gwa-mini-knopf{position: relative; width: 104px; height: 104px; border-radius: 50%; background: var(--gwa-schwarz); display: grid; place-items: center; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); transition: transform .5s var(--spring); cursor: pointer;}
.hds.hds .gwa-mini-knopf:hover{transform: scale(1.06) rotate(-4deg);}
.hds.hds .gwa-mini-knopf svg.ring{position: absolute; inset: 0; width: 100%; height: 100%; animation: hds-gwa-dreh 16s linear infinite;}
.hds.hds .gwa-mini-knopf svg.ring text{font: 700 9.4px var(--kopf); letter-spacing: .24em; fill: #fff; text-transform: uppercase;}
.hds.hds .gwa-mini-knopf .w{width: 36px; height: 36px;}
@keyframes hds-gwa-dreh{to { transform: rotate(360deg); }}
.hds.hds .gwa-mini-knopf::after{content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gwa-gold); opacity: 0;}
.hds.hds .gwa-mini.puls .gwa-mini-knopf::after{animation: hds-gwa-puls 1.6s ease-out 2;}
@keyframes hds-gwa-puls{0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); }}
.hds.hds .gwa-mini-karte{position: absolute; left: 0; bottom: calc(100% + 14px); width: 300px; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -30px rgba(10, 20, 40, .45), inset 0 0 0 1px var(--linie); transform-origin: 20% 100%; transform: scale(.6) translateY(20px); opacity: 0; pointer-events: none; transition: transform .55s var(--spring), opacity .25s;}
.hds.hds .gwa-mini:hover .gwa-mini-karte,.hds.hds .gwa-mini.offen .gwa-mini-karte{transform: none; opacity: 1; pointer-events: auto;}
.hds.hds .gwa-mini-karte img{width: 100%; height: 160px; object-fit: cover; display: block;}
.hds.hds .gwa-mini-karte div{padding: 16px 18px 18px;}
.hds.hds .gwa-mini-karte b{font: 800 17px/1.25 var(--kopf); display: block;}
.hds.hds .gwa-mini-karte p{font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin: 6px 0 12px;}
.hds.hds .gwa-mini-karte a{font: 700 13.5px/1 var(--kopf); color: var(--blau); text-decoration: none;}
.hds.hds .gwa-mini-zu{position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--text); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .3); font: 700 14px/1 var(--kopf); display: grid; place-items: center; z-index: 2;}
.hds.hds .gwa-weg{display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); padding: clamp(40px, 5vw, 80px); background: #fff; box-shadow: inset 0 0 0 1px var(--linie);}
.hds.hds .gwa-weg-schritte{position: relative; padding-left: 38px;}
.hds.hds .gwa-weg-linie{position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: var(--linie); border-radius: 2px;}
.hds.hds .gwa-weg-linie i{position: absolute; inset: 0; background: var(--gwa-kante); transform-origin: top; transform: scaleY(var(--p, 0)); border-radius: 2px;}
.hds.hds .gwa-schritt{position: relative; min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .5s;}
.hds.hds .gwa-schritt:last-child{min-height: 50vh;}
.hds.hds .gwa-schritt.an{opacity: 1;}
.hds.hds .gwa-schritt::before{content: ""; position: absolute; left: -33px; top: calc(50% - 9px); width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--linie); transition: box-shadow .4s, background .4s, transform .5s var(--spring);}
.hds.hds .gwa-schritt.an::before{background: var(--gwa-gold); box-shadow: inset 0 0 0 2px var(--gwa-gold), 0 0 0 6px rgba(197, 173, 132, .22); transform: scale(1.15);}
.hds.hds .gwa-schritt small{font: 700 11.5px/1 var(--kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--gwa-gold-tief);}
.hds.hds .gwa-schritt h3{font: 800 clamp(28px, 3vw, 42px)/1.05 var(--kopf); letter-spacing: -.03em; margin: 12px 0 12px;}
.hds.hds .gwa-schritt p{color: var(--text-2); line-height: 1.6; max-width: 42ch;}
.hds.hds .gwa-weg-medien{position: sticky; top: 90px; height: calc(100vh - 140px); max-height: 760px; border-radius: 28px; overflow: hidden; background: var(--gwa-schwarz);}
.hds.hds .gwa-weg-medien figure{position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity .8s var(--ease), transform 1.2s var(--ease);}
.hds.hds .gwa-weg-medien figure.an{opacity: 1; transform: scale(1);}
.hds.hds .gwa-weg-medien img{width: 100%; height: 100%; object-fit: cover;}
.hds.hds .gwa-weg-medien figcaption{position: absolute; left: 18px; bottom: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: 600 12.5px/1 var(--lauf);}
.hds.hds .gwa-moment{position: relative; background: var(--gwa-schwarz); color: #fff; padding: clamp(40px, 5vw, 70px);}
.hds.hds .gwa-moment-kopf{display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap;}
.hds.hds .gwa-moment h3{font: 800 clamp(34px, 4.4vw, 64px)/.98 var(--kopf); letter-spacing: -.04em; max-width: 14ch;}
.hds.hds .gwa-moment h3 .gwa-serif{color: var(--gwa-gold); font-weight: 400;}
.hds.hds .gwa-moment-bild{position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 3 / 2; background: #1b1b1e;}
.hds.hds .gwa-moment-bild img{width: 100%; height: 100%; object-fit: cover; clip-path: circle(0% at var(--cx, 58%) var(--cy, 30%)); transition: clip-path 1.6s cubic-bezier(.65, 0, .15, 1);}
.hds.hds .gwa-moment.da .gwa-moment-bild img{clip-path: circle(150% at var(--cx, 58%) var(--cy, 30%));}
.hds.hds .gwa-moment-bild canvas{position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;}
.hds.hds .gwa-moment-bild .marke{position: absolute; left: 18px; top: 18px; display: inline-flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 700 13px/1 var(--kopf); opacity: 0; transform: translateY(-8px); transition: opacity .6s .9s, transform .8s .9s var(--spring);}
.hds.hds .gwa-moment.da .gwa-moment-bild .marke{opacity: 1; transform: none;}
.hds.hds .gwa-moment-bild .marke img{width: 26px; height: 26px; border-radius: 7px; clip-path: none;}
.hds.hds .gwa-noch-mal{display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); font: 700 13.5px/1 var(--kopf); transition: background .25s, transform .3s var(--spring);}
.hds.hds .gwa-noch-mal:hover{background: rgba(255, 255, 255, .16);}
.hds.hds .gwa-noch-mal:active{transform: scale(.94);}
.hds.hds .gwa-moment-fuss{display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px;}
.hds.hds .gwa-moment-fuss div{padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 14.5px; color: rgba(255, 255, 255, .72); line-height: 1.5;}
.hds.hds .gwa-moment-fuss b{display: block; color: #fff; font: 800 15px/1.2 var(--kopf); margin-bottom: 4px;}
.hds.hds .gwa-kino{position: relative; height: var(--strecke, 180vh);}
.hds.hds .gwa-kino-pin{position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden;}
.hds.hds .gwa-kino-kopf{position: absolute; top: 9vh; left: 0; right: 0; text-align: center; opacity: calc(1 - var(--p, 0) * 2.2); transform: translateY(calc(var(--p, 0) * -40px)); z-index: 2; pointer-events: none;}
.hds.hds .gwa-kino-kopf h3{font: 800 clamp(34px, 4.6vw, 70px)/1 var(--kopf); letter-spacing: -.04em;}
.hds.hds .gwa-kino-kopf h3 .gwa-serif{font-weight: 400; color: var(--gwa-gold-tief);}
.hds.hds .gwa-kino-kopf p{color: var(--text-2); margin-top: 12px;}
.hds.hds .gwa-kino-rahmen{position: relative; width: calc(46% + var(--p, 0) * 54%); height: calc(38vh + var(--p, 0) * 62vh); border-radius: calc(30px * (1 - var(--p, 0))); overflow: hidden; background: #000; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6); margin-top: calc((1 - var(--p, 0)) * 18vh);}
.hds.hds .gwa-kino-rahmen video{width: 100%; height: 100%; object-fit: cover; display: block;}
.hds.hds .gwa-kino-ton{position: absolute; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--gwa-schwarz); font: 800 14px/1 var(--kopf); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .5); opacity: calc(var(--p, 0) * 2 - .6); transition: transform .35s var(--spring);}
.hds.hds .gwa-kino-ton:hover{transform: scale(1.05);}
.hds.hds .gwa-kino-ton svg{width: 18px; height: 18px;}
.hds.hds .gwa-kino-ecke{position: absolute; left: 22px; top: 22px; display: inline-flex; align-items: center; gap: 10px; opacity: calc(var(--p, 0) * 2 - .6);}
.hds.hds .gwa-kino-ecke img{width: 46px; height: 46px; border-radius: 10px;}
.hds.hds .gwa-kino-ecke span{font: 400 20px/1 var(--gwa-serif); font-style: italic; color: #fff;}
.hds.hds .gwa-case{display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 60px); align-items: center; padding: clamp(36px, 5vw, 70px); background: linear-gradient(160deg, #fbf8f2, #f3ecdf);}
.hds.hds .gwa-browser{position: relative; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -40px rgba(60, 45, 20, .45), inset 0 0 0 1px rgba(0, 0, 0, .06);}
.hds.hds .gwa-browser .leiste{display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #f1ede6;}
.hds.hds .gwa-browser .leiste i{width: 10px; height: 10px; border-radius: 50%; background: #d9d1c3;}
.hds.hds .gwa-browser .leiste span{margin-left: 10px; padding: 4px 12px; border-radius: 7px; background: #fff; font: 500 11.5px/1 var(--lauf); color: #8b8173;}
.hds.hds .gwa-browser .flaeche{height: 380px; overflow: hidden;}
.hds.hds .gwa-browser .lang{transition: transform 4.5s cubic-bezier(.45, 0, .2, 1);}
.hds.hds .gwa-browser:hover .lang{transform: translateY(calc(-100% + 380px));}
.hds.hds .gwa-browser .lang section{padding: 28px 30px; border-bottom: 1px solid #f0ebe3;}
.hds.hds .gwa-browser .m-kopf{display: flex; justify-content: space-between; align-items: center;}
.hds.hds .gwa-browser .m-kopf b{width: 90px; height: 16px; border-radius: 5px; background: #1b1b1b;}
.hds.hds .gwa-browser .m-kopf span{display: flex; gap: 10px;}
.hds.hds .gwa-browser .m-kopf span i{width: 44px; height: 9px; border-radius: 5px; background: #e3ddd2;}
.hds.hds .gwa-browser .m-hero{display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center;}
.hds.hds .gwa-browser .m-hero .t1{height: 30px; border-radius: 8px; background: #1b1b1b; width: 92%;}
.hds.hds .gwa-browser .m-hero .t2{height: 30px; border-radius: 8px; background: #1b1b1b; width: 64%; margin-top: 10px;}
.hds.hds .gwa-browser .m-hero .t3{height: 10px; border-radius: 5px; background: #e3ddd2; width: 80%; margin-top: 18px;}
.hds.hds .gwa-browser .m-hero .knopf{width: 110px; height: 32px; border-radius: 999px; background: var(--gwa-gold); margin-top: 18px;}
.hds.hds .gwa-browser .m-hero .bild{aspect-ratio: 4 / 3; border-radius: 14px; background: linear-gradient(135deg, #e9e1d2, #cdbf9f);}
.hds.hds .gwa-browser .m-raster{display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
.hds.hds .gwa-browser .m-raster div{height: 110px; border-radius: 12px; background: #f4efe6;}
.hds.hds .gwa-browser .m-band{height: 150px; border-radius: 14px; background: #1b1b1b;}
.hds.hds .gwa-browser .hinweis{position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: rgba(27, 27, 27, .85); color: #fff; font: 600 12px/1 var(--lauf); white-space: nowrap; transition: opacity .3s;}
.hds.hds .gwa-browser:hover .hinweis{opacity: 0;}
.hds.hds .gwa-case-text h3{font: 800 clamp(30px, 3.2vw, 46px)/1.02 var(--kopf); letter-spacing: -.035em; margin: 14px 0 14px;}
.hds.hds .gwa-case-text p{color: var(--text-2); line-height: 1.6;}
.hds.hds .gwa-case-dl{display: grid; gap: 8px; margin: 22px 0 24px;}
.hds.hds .gwa-case-dl div{display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(165, 145, 111, .22); font-size: 14.5px;}
.hds.hds .gwa-case-dl dt{color: var(--text-3);}
.hds.hds .gwa-case-dl dd{font-weight: 700; text-align: right;}
.hds.hds .gwa-case-dl .offen{color: #8a6d27; font-weight: 600; font-style: italic;}
.hds.hds .gwa-flip{perspective: 1200px; width: 150px; height: 280px; float: right; margin: 0 0 16px 22px; cursor: pointer;}
.hds.hds .gwa-flip-innen{position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--spring); transform: rotateY(calc(var(--k, 0) * 1deg));}
.hds.hds .gwa-flip:hover .gwa-flip-innen,.hds.hds .gwa-flip.um .gwa-flip-innen{transform: rotateY(180deg);}
.hds.hds .gwa-flip-seite{position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(60, 45, 20, .6);}
.hds.hds .gwa-flip-seite img{width: 100%; height: 100%; object-fit: cover; display: block;}
.hds.hds .gwa-flip-seite.hinten{transform: rotateY(180deg); background: var(--gwa-schwarz); color: #fff; padding: 18px 16px; display: flex; flex-direction: column; justify-content: space-between;}
.hds.hds .gwa-flip-seite.hinten b{font: 800 16px/1.2 var(--kopf);}
.hds.hds .gwa-flip-seite.hinten small{font: 400 16px/1.2 var(--gwa-serif); font-style: italic; color: var(--gwa-gold);}
.hds.hds .gwa-statement{padding: clamp(70px, 10vw, 150px) clamp(28px, 6vw, 90px); background: #fff; box-shadow: inset 0 0 0 1px var(--linie); text-align: center; overflow: hidden;}
.hds.hds .gwa-lorbeer{display: flex; justify-content: center; align-items: center; gap: clamp(14px, 3vw, 40px);}
.hds.hds .gwa-lorbeer svg{width: clamp(46px, 7vw, 100px); height: auto; flex-shrink: 0;}
.hds.hds .gwa-lorbeer svg path{stroke: var(--gwa-gold-tief); stroke-width: 1.6; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1;}
.hds.hds .gwa-statement.da .gwa-lorbeer svg path{transition: stroke-dashoffset 2.2s cubic-bezier(.65, 0, .15, 1); stroke-dashoffset: 0;}
.hds.hds .gwa-statement.da .gwa-lorbeer svg path:nth-child(n+2){transition-delay: .25s;}
.hds.hds .gwa-statement h3{font: 800 clamp(40px, 7.4vw, 118px)/.9 var(--kopf); letter-spacing: -.045em; text-transform: uppercase;}
.hds.hds .gwa-statement h3 .w{color: #d9dde3; transition: color .3s;}
.hds.hds .gwa-statement h3 .w.voll{color: var(--gwa-schwarz);}
.hds.hds .gwa-statement .serif-zeile{display: block; font: 400 clamp(40px, 6.4vw, 104px)/1.05 var(--gwa-serif); font-style: italic; text-transform: none; letter-spacing: -.02em; margin-top: .12em;}
.hds.hds .gwa-statement .serif-zeile .w.voll{color: var(--gwa-gold-tief);}
/* Siegel-Stil (4.6.0, AP 22): Text und Lorbeer wie auf dem Siegel „German Web Awards · Winner ’26 · Best Agencies“.
   Drei Spalten im Raster, die Mitte darf schrumpfen und umbrechen, der Lorbeer hat eine feste Höhe: nichts überlagert sich. */
.hds.hds .gwa-statement--siegel{--gs: clamp(34px, 6vw, 98px);}
.hds.hds .gwa-siegelzeile{display: grid; grid-template-columns: auto minmax(0, max-content) auto; justify-content: center; align-items: center; column-gap: clamp(10px, 3.2vw, 52px);}
.hds.hds .gwa-lb{display: block; height: calc(var(--gs) * 2.5 + 26px); aspect-ratio: 163 / 458; color: var(--gwa-schwarz); clip-path: inset(100% 0 0 0); transition: clip-path 1.8s cubic-bezier(.65, 0, .15, 1) .15s;}
.hds.hds .gwa-lb svg{display: block; width: 100%; height: 100%;}
.hds.hds .gwa-lb.rechts svg{transform: scaleX(-1);}
.hds.hds .gwa-statement.da .gwa-lb{clip-path: inset(0 0 0 0);}
.hds.hds .gwa-statement--siegel h3{font: 500 var(--gs)/.96 var(--kopf); letter-spacing: -.05em; text-transform: none; text-wrap: balance;}
.hds.hds .gwa-statement--siegel h3 .z1{display: block;}
.hds.hds .gwa-statement--siegel h3 sup{font-size: .32em; vertical-align: top; position: relative; top: .35em; margin-left: .04em;}
.hds.hds .gwa-statement--siegel .serif-zeile{font-size: calc(var(--gs) * .98); margin-top: .02em;}
.hds.hds .gwa-statement--siegel .z3{display: block; margin-top: clamp(14px, 1.6vw, 24px); font: 700 clamp(12px, 1.05vw, 16px)/1 var(--kopf); letter-spacing: .2em; text-transform: uppercase; color: var(--gwa-schwarz);}
@media (prefers-reduced-motion: reduce){.hds.hds .gwa-lb{clip-path: none; transition: none;}}
/* 4.15.4: Am Handy schrumpfte die mittlere Spalte (minmax(0, …)) unter die Wortbreite, „Awards“ lief in den rechten Lorbeer. Spalten jetzt nie schmaler als das längste Wort, Schrift an der Breite ausgerichtet. */
@media (max-width: 600px){.hds.hds .gwa-statement--siegel{--gs: clamp(26px, 8vw, 40px);}
.hds.hds .gwa-siegelzeile{grid-template-columns: auto auto auto; column-gap: clamp(6px, 2.4vw, 14px);}}
.hds.hds .gwa-zahlen{display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: clamp(46px, 6vw, 80px) auto 0;}
.hds.hds .gwa-zahlen div{padding: 22px 18px; border-radius: 22px; background: var(--hg);}
.hds.hds .gwa-zahlen b{display: block; font: 800 clamp(40px, 4.8vw, 64px)/1 var(--kopf); letter-spacing: -.04em;}
.hds.hds .gwa-zahlen span{display: block; font-size: 14px; color: var(--text-2); margin-top: 8px;}
.hds.hds .gwa-vitrinen{display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; padding: 18px; background: var(--hg);}
.hds.hds .gwa-vitrine{position: relative; border-radius: 28px; overflow: hidden; min-height: 460px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: radial-gradient(420px 420px at var(--mx, 70%) var(--my, 40%), rgba(197, 173, 132, .22), transparent 70%), var(--gwa-schwarz); color: #fff; isolation: isolate;}
.hds.hds .gwa-vitrine::before{content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .04) 40%, rgba(197, 173, 132, .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;}
.hds.hds .gwa-vitrine-text{position: relative; z-index: 2; padding: 34px 10px 34px 34px;}
.hds.hds .gwa-vitrine-text small{font: 700 11px/1 var(--kopf); letter-spacing: .16em; text-transform: uppercase; color: var(--gwa-gold);}
.hds.hds .gwa-vitrine-text h3{font: 800 clamp(26px, 2.6vw, 36px)/1.05 var(--kopf); letter-spacing: -.03em; margin: 14px 0 12px;}
.hds.hds .gwa-vitrine-text h3 .gwa-serif{color: var(--gwa-gold); font-weight: 400;}
.hds.hds .gwa-vitrine-text p{color: rgba(255, 255, 255, .68); line-height: 1.55; font-size: 15px;}
.hds.hds .gwa-vitrine-text .hd-btn{margin-top: 20px;}
.hds.hds .gwa-vitrine-buehne{position: relative; height: 100%; min-height: 420px;}
.hds.hds .gwa-vitrine-buehne .ebene{position: absolute; inset: 0; display: grid; place-items: center; transform: translate(calc(var(--px, 0) * var(--t, 10px)), calc(var(--py, 0) * var(--t, 10px))); transition: transform .5s var(--ease);}
.hds.hds .gwa-vitrine-buehne .ebene img{max-width: 92%; max-height: 92%; object-fit: contain;}
.hds.hds .gwa-vitrine-buehne .schein{position: absolute; left: 50%; top: 8%; width: 70%; height: 80%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 30%, rgba(255, 247, 232, .22), transparent 70%); pointer-events: none;}
.hds.hds .gwa-vitrine.hell{grid-template-columns: 1fr; min-height: 460px; background: radial-gradient(420px 420px at var(--mx, 50%) var(--my, 30%), rgba(197, 173, 132, .25), transparent 70%), #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--linie); align-content: start;}
.hds.hds .gwa-vitrine.hell::before{display: none;}
.hds.hds .gwa-vitrine.hell .gwa-vitrine-text{padding: 30px 30px 0;}
.hds.hds .gwa-vitrine.hell .gwa-vitrine-text p{color: var(--text-2);}
.hds.hds .gwa-vitrine.hell .gwa-vitrine-text h3 .gwa-serif{color: var(--gwa-gold-tief);}
.hds.hds .gwa-vitrine.hell .gwa-vitrine-text small{color: var(--gwa-gold-tief);}
.hds.hds .gwa-siegelreihe{display: flex; gap: 10px; padding: 22px 30px 30px;}
.hds.hds .gwa-siegelreihe img{height: 86px; width: auto; border-radius: 10px; transition: transform .5s var(--spring);}
.hds.hds .gwa-siegelreihe img:hover{transform: translateY(-4px) rotate(-2deg);}
@media (max-width: 1100px){.hds.hds .gwa-vitrinen{grid-template-columns: 1fr;}}
@media (max-width: 900px){.hds.hds .gwa-buehne-text{grid-template-columns: 1fr;}
.hds.hds .gwa-buehne .rechts{justify-self: start; text-align: left;}
.hds.hds .gwa-wuerfel{grid-template-columns: 1fr;}
.hds.hds .gwa-wuerfel-feld{min-height: 440px;}
.hds.hds .gwa-wuerfel-text{padding: 0 28px 40px;}
.hds.hds .gwa-weg{grid-template-columns: 1fr; padding: 28px 22px;}
.hds.hds .gwa-weg-medien{position: relative; top: 0; height: 56vh; order: -1;}
.hds.hds .gwa-schritt{min-height: 0; padding: 26px 0; opacity: 1;}
.hds.hds .gwa-case{grid-template-columns: 1fr;}
.hds.hds .gwa-moment-fuss{grid-template-columns: 1fr;}}
@media (max-width: 640px){.hds.hds .gwa-buehne{height: var(--strecke, 170vh); border-radius: 22px;}
.hds.hds .gwa-demo{border-radius: 22px;}
.hds.hds .gwa-mock{height: 520px;}
.hds.hds .gwa-mock-seite{padding: 26px 20px;}
.hds.hds .gwa-mock-seite .reihe{grid-template-columns: 1fr 1fr;}
.hds.hds .gwa-mini-karte{width: min(300px, calc(100vw - 60px));}
.hds.hds .gwa-kino-rahmen{width: calc(86% + var(--p, 0) * 14%); height: calc(52vh + var(--p, 0) * 40vh);}
.hds.hds .gwa-zahlen{grid-template-columns: 1fr;}
.hds.hds .gwa-vitrine{grid-template-columns: 1fr;}
.hds.hds .gwa-vitrine-text{padding: 28px 24px 0;}
.hds.hds .gwa-vitrine-buehne{min-height: 320px;}
.hds.hds .gwa-flip{float: none; margin: 0 auto 18px;}
.hds.hds .gwa-browser .flaeche{height: 300px;}
.hds.hds .gwa-browser:hover .lang{transform: translateY(calc(-100% + 300px));}}
@media (prefers-reduced-motion: reduce){.hds.hds .gwa-schimmer::after,.hds.hds .gwa-band-spur,.hds.hds .gwa-mini-knopf svg.ring,.hds.hds .gwa-scrollhinweis i,.hds.hds .gwa-greif svg{animation: none;}
.hds.hds .gwa-moment-bild img{clip-path: none; transition: none;}}
.hds.hds .gwa-buehne{border-radius: 0;}
.hds.hds .gwa-kino-rahmen{width: calc(40% + var(--p, 0) * 60%);}
@media (max-width: 640px){.hds.hds .gwa-kino-rahmen{width: calc(86% + var(--p, 0) * 14%);}}
.hds.hds .gwa-demo{overflow: clip;}
.hds.hds .gwa-buehne-rahmen{background: #000;}
@media (min-width: 901px){.hds.hds .gwa-buehne video,.hds.hds .gwa-buehne .poster{left: 64%;}}
@media (max-width: 900px){.hds.hds .gwa-buehne .schleier{background: radial-gradient(80% 50% at 50% 35%, transparent 20%, rgba(0, 0, 0, .55) 100%), linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .82) 100%);}}
.hds.hds .gwa-buehne-pin,.hds.hds .gwa-kino-pin{top:var(--hds-kopf,77px);height:calc(100vh - var(--hds-kopf,77px));}
.hds.hds .gwa-weg-medien{top:calc(var(--hds-kopf,77px) + 20px);height:calc(100vh - var(--hds-kopf,77px) - 50px);}
.hds.hds .gwa-buehne{border-radius:0;}
.hds.hds .hds-gwa-rund{border-radius:32px;overflow:clip;}
.hds.hds .gwa-mini.fest{position:fixed;left:22px;bottom:22px;z-index:90;}
.hds.hds .gwa-weg,.hds.hds .gwa-case,.hds.hds .gwa-statement,.hds.hds .gwa-vitrinen,.hds.hds .gwa-band-rahmen,.hds.hds .gwa-wuerfel,.hds.hds .gwa-moment{margin:clamp(40px,6vw,80px) 0;}
@media (max-width:640px){.hds.hds .gwa-mini.fest{left:14px;bottom:14px;}
.hds.hds .gwa-mini.fest .gwa-mini-knopf{width:76px;height:76px;}
.hds.hds .gwa-mini.fest .gwa-mini-knopf .w{width:26px;height:26px;}}
@media (max-width:640px){.hds.hds .hds-gwa-rund{border-radius:22px;}}

/* 08 · Mehrere Websites mit Reitern, Browser und Handy (4.6.0, AP 22) */
/* 4.6.7: breiterer Rahmen (gwa-wrap-breit), Browser bekommt den Platz */
.hds.hds .gwa-wrap-breit{width: min(1480px, 100% - 48px);}
.hds.hds .gwa-case--mehr{grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr); align-items: start;}
.hds.hds .gwa-case-medien{position: relative; padding: 0 64px 44px 0;}
.hds.hds .gwa-seiten-tabs{display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;}
.hds.hds .gwa-seiten-tabs button{all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(165, 145, 111, .28); font: 700 13px/1 var(--kopf); color: #5b5245; text-transform: none; white-space: nowrap; transition: background .3s, color .3s;}
.hds.hds .gwa-seiten-tabs button i{font-style: normal; color: var(--gwa-gold-tief);}
.hds.hds .gwa-seiten-tabs button[aria-selected="true"]{background: var(--gwa-schwarz); color: #fff; box-shadow: none;}
.hds.hds .gwa-seiten-tabs button[aria-selected="true"] i{color: var(--gwa-gold);}
.hds.hds .gwa-seiten-tabs button:focus-visible{outline: 2px solid var(--gwa-gold-tief); outline-offset: 2px;}
.hds.hds .gwa-case--mehr .gwa-browser .flaeche{position: relative; height: clamp(420px, 38vw, 560px);}
.hds.hds .gwa-case--mehr .gwa-browser .lang,.hds.hds .gwa-handy .lang{position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s;}
.hds.hds .gwa-case--mehr .gwa-browser .lang.an,.hds.hds .gwa-handy .lang.an{visibility: visible; transition: opacity .45s;}
/* Selbst scrollen (Seite lässt sich nicht einbetten) und Live-Ansicht */
/* 4.7.6: Die Hover-Regel der Einzelansicht (translateY beim Überfahren) darf hier nicht greifen, sonst rückt die Seite im Rahmen
   beim Darüberfahren nach oben und unten bleibt eine weiße Fläche. Gescrollt wird live im iframe oder selbst im Screenshot. */
.hds.hds .gwa-case--mehr .gwa-browser:hover .lang{transform: none;}
.hds.hds .gwa-case--mehr .lang.selbst{overflow-y: auto; scrollbar-width: thin;}
.hds.hds .gwa-case--mehr .lang iframe{position: absolute; left: 0; top: 0; border: 0; max-width: none; max-height: none; transform-origin: 0 0; background: #fff;}
.hds.hds .gwa-case--mehr .lang.live img{visibility: hidden;}
.hds.hds .gwa-case--mehr .lang.laedt::after{content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, .12); border-top-color: var(--gwa-gold-tief); animation: hds-gwa-dreh .8s linear infinite;}
.hds.hds .gwa-live{all: unset; box-sizing: border-box; position: absolute; left: 50%; top: calc(50% + 19px); transform: translate(-50%, -50%); z-index: 3; display: grid; gap: 4px; justify-items: center; padding: 14px 22px; border-radius: 18px; background: rgba(18, 18, 18, .86); backdrop-filter: blur(10px); color: #fff; text-align: center; cursor: pointer; max-width: calc(100% - 40px); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); transition: transform .35s var(--spring), background .3s;}
.hds.hds .gwa-live b{font: 800 15px/1.1 var(--kopf); text-transform: none;}
.hds.hds .gwa-live small{font: 500 12px/1.35 var(--lauf); opacity: .78;}
.hds.hds .gwa-live:hover{transform: translate(-50%, -50%) scale(1.04); background: #121212;}
.hds.hds .gwa-live:focus-visible{outline: 2px solid var(--gwa-gold); outline-offset: 3px;}
.hds.hds .gwa-live[hidden]{display: none;}
.hds.hds .gwa-case--mehr .gwa-browser .lang.an,.hds.hds .gwa-handy .lang.an{opacity: 1;}
.hds.hds .gwa-case--mehr .gwa-browser .lang img,.hds.hds .gwa-handy .lang img{display: block; width: 100%; height: auto;}
.hds.hds .gwa-handy{position: absolute; right: 0; bottom: 0; z-index: 2; width: clamp(150px, 12.5vw, 188px); aspect-ratio: 9 / 19.5; padding: 7px; border-radius: 30px; background: #121212; box-shadow: 0 36px 70px -28px rgba(40, 30, 10, .6), inset 0 0 0 1px rgba(255, 255, 255, .14);}
.hds.hds .gwa-handy::before{content: ""; position: absolute; top: 12px; left: 50%; z-index: 3; width: 36%; height: 14px; transform: translateX(-50%); border-radius: 99px; background: #121212;}
.hds.hds .gwa-handy .flaeche{position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: #fff; container-type: size;}
.hds.hds .gwa-seite-text h3{font: 800 clamp(28px, 3vw, 42px)/1.04 var(--kopf); letter-spacing: -.035em; margin: 12px 0;}
.hds.hds .gwa-seite-text.an{animation: hds-gwa-seite .5s cubic-bezier(.22, 1, .36, 1) both;}
.hds.hds .gwa-seite-text[hidden]{display: none;}
@keyframes hds-gwa-seite{from{opacity: 0; transform: translateY(10px);}to{opacity: 1; transform: none;}}
.hds.hds .gwa-case--mehr .gwa-case-ueber{display: block; margin-bottom: 4px;}
.hds.hds .gwa-case--mehr .gwa-seite-text .hd-eyebrow{color: var(--gwa-gold-tief);}
.hds.hds .gwa-flip{transition: opacity .35s, transform .45s var(--spring);}
.hds.hds .gwa-flip.weg{opacity: 0; transform: scale(.85); pointer-events: none;}
.hds.hds .gwa-alle{display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font: 700 15px/1 var(--kopf); color: var(--gwa-schwarz); text-decoration: none; border-bottom: 2px solid var(--gwa-gold); padding-bottom: 4px;}
.hds.hds .gwa-alle svg{width: 16px; height: 16px; transition: transform .35s var(--spring);}
.hds.hds .gwa-alle:hover svg{transform: translateX(4px);}
/* Unter 1200 px wäre die Textspalte zu schmal: einspaltig (4.7.7) */
@media (max-width: 1200px){.hds.hds .gwa-case--mehr{grid-template-columns: minmax(0, 1fr);}}
@media (max-width: 767px){.hds.hds .gwa-wrap-breit{width: calc(100% - 32px);}}
.hds.hds .gwa-status{position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
@media (max-width: 640px){.hds.hds .gwa-case-medien{padding: 0 38px 30px 0;}
.hds.hds .gwa-case--mehr .gwa-browser .flaeche{height: 300px;}
.hds.hds .gwa-handy{width: 108px; border-radius: 22px; padding: 5px;}
.hds.hds .gwa-handy .flaeche{border-radius: 18px;}
.hds.hds .gwa-seiten-tabs{flex-wrap: wrap;}}
/* Live-Knopf am Handy: kompakt unten links im Browser, nicht über dem Handy (4.7.3) */
@media (max-width: 640px){.hds.hds .gwa-live{left: 12px; top: auto; bottom: 14px; transform: none; padding: 10px 14px; max-width: 58%;}
.hds.hds .gwa-live small{display: none;}
.hds.hds .gwa-live:hover{transform: scale(1.04);}}
/* Mehrere Websites am Handy: ohne Siegel-Karte, damit der Text gleich unter Browser und Handy steht (4.6.2) */
@media (max-width: 640px){.hds.hds .gwa-case--mehr .gwa-flip{display: none;}}
/* 4.15.0: Award-Siegel am Handy klein und nur am Seitenanfang – es lag beim Scrollen über Kennzahlen und Text */
@media (max-width: 767px){
	.hds.hds .gwa-mini.fest{left: 12px; bottom: 12px; transition: opacity .3s, transform .3s;}
	.hds.hds .gwa-mini.fest .gwa-mini-knopf{width: 64px; height: 64px;}
	.hds.hds .gwa-mini.fest .gwa-mini-knopf svg.ring text{font-size: 12px;}
	.hds.hds .gwa-mini.fest .gwa-mini-knopf .w{width: 24px; height: 24px;}
	html.hd-gescrollt .hds.hds .gwa-mini.fest{opacity: 0; transform: translateY(12px); pointer-events: none;}
	.hds.hds .gwa-mini.fest .gwa-mini-karte{width: min(300px, calc(100vw - 24px));}
}