html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;overflow-x:hidden}
a{color:inherit}
a:hover{color:var(--km-petrol)}
:focus-visible{outline:2px solid var(--km-petrol);outline-offset:3px}
[data-surface="inverse"] :focus-visible{outline-color:var(--km-mint)}
dialog::backdrop{background:rgba(28,26,23,.55)}
.v-nav-wide,.v-nav-narrow,.v-overlay,.v-cfull,.v-ccompact{display:contents}
.v-menu[hidden]{display:none}

/* Responsive Werte (entsprechen der Logik des Entwurfs) */
:root{
  --h-heroH:clamp(620px, min(56vw, calc(92vh - 80px)), 860px);
  --h-imgW:125%;
  --h-heroPos:0% 45%;
  --h-textArea:1 / 1;
  --h-textMaxW:calc(63vw - max(var(--gutter), (100vw - 1344px) / 2) - 56px);
  --h-textPad:var(--space-8) var(--gutter) clamp(56px, 6vw, 96px);
  --h-stepIndent:0px;
  --h-aboutPad:clamp(48px, 9vw, 160px) max(var(--gutter), calc((100vw - 1344px) / 2 + var(--gutter))) 0 0;
  --h-compassBleed:auto;
  --h-factCols:repeat(4, minmax(0, 1fr));
  --h-bandCol:minmax(0, 1fr);
}
@media (max-width:1199.98px){:root{--h-factCols:repeat(2, minmax(0, 1fr))}}
@media (max-width:999.98px){
  :root{--h-heroH:clamp(360px, 96vw, 640px);--h-imgW:100%;--h-heroPos:53% 50%;--h-textArea:2 / 1;--h-textMaxW:none;--h-textPad:var(--space-7) var(--gutter) var(--space-8)}
  .v-overlay{display:none}
}
@media (max-width:959.98px){:root{--h-stepIndent:calc(2.5rem + var(--space-5))}}
@media (max-width:899.98px){
  :root{--h-aboutPad:0 var(--gutter);--h-bandCol:calc(100% / 2.5)}
  .v-nav-wide,.v-cfull{display:none}
}
@media (min-width:900px){.v-nav-narrow,.v-ccompact,.v-menu{display:none!important}}
@media (max-width:599.98px){:root{--h-compassBleed:calc(var(--gutter) * -1 + 6px);--h-factCols:minmax(0, 1fr)}}

/* Buttons */
.km-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-sans);font-weight:400;line-height:1.2;letter-spacing:var(--ls-button);border-radius:var(--radius-button);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.km-btn-lg{padding:19px 24px;font-size:1.0625rem}
.km-btn-md{padding:14px 22px;font-size:1rem}
.km-btn-sm{padding:8px 12px;font-size:.9375rem}
.km-btn-primary{background:var(--action-bg);color:var(--action-fg);border:1px solid var(--action-bg)}
.km-btn-primary:hover{background:var(--action-bg-hover);border-color:var(--action-bg-hover);color:var(--action-fg)}
.km-btn-secondary{background:transparent;color:var(--text-heading);border:1px solid currentColor}
.km-btn-secondary:hover{border-color:var(--text-accent);color:var(--text-heading)}
.km-btn-ghost{background:transparent;color:var(--text-heading);border:1px solid transparent}
.km-btn-ghost.km-btn-lg{padding:19px 4px}
.km-btn-ghost.km-btn-md{padding:14px 4px}
.km-btn-ghost.km-btn-sm{padding:8px 4px}
.km-btn-ghost:hover{color:var(--km-mint)}
.km-btn-arrow{transition:transform var(--dur-fast) var(--ease)}
.km-btn:hover .km-btn-arrow{transform:translateX(3px)}

ul[aria-labelledby="band-label"]::-webkit-scrollbar{display:none}
ul[aria-labelledby="band-label"] a:focus-visible img{opacity:1!important}
@media (hover: none){ul[aria-labelledby="band-label"] img{opacity:1!important}}
.v-nav-wide [data-lang-switch]{margin-left:var(--space-5);padding-left:var(--space-5);border-left:1px solid var(--km-line-dark)}
:root{--h-detailW:100%}
[data-zoom-area].is-zoomed{--h-detailW:900px}
html.dlg-open{overflow:hidden}

/* Hover und Fokus */
.h1:focus{left: 16px !important}
.h2:hover{color: var(--km-mint) !important}
.h3:hover{color: var(--km-mint) !important}
.h4:hover{color: var(--km-mint) !important}
.h5:hover{color: var(--km-mint) !important}
.h6:hover{color: var(--km-mint) !important}
.h7:hover{color: var(--km-mint) !important}
.h8:hover{background: var(--km-petrol) !important;color: var(--km-white) !important}
.h9:hover{background: var(--km-petrol) !important;color: var(--km-white) !important}
.h10:hover{color: var(--km-mint) !important;text-underline-offset: .28em !important}
.h11:hover{color: var(--km-mint) !important}
.h12:hover{color: var(--km-mint) !important}
.h13:hover{opacity: 1 !important}
.h14:hover{opacity: 1 !important}
.h15:hover{opacity: 1 !important}
.h16:hover{opacity: 1 !important}
.h17:hover{color: var(--km-mint) !important;text-decoration: underline !important}
.h18:hover{color: var(--km-mint) !important;text-decoration: underline !important}
.h19:focus{left: 16px !important}
.h20:hover{color: var(--km-mint) !important}
.h21:hover{color: var(--km-mint) !important}
.h22:hover{color: var(--km-mint) !important}
.h23:hover{color: var(--km-mint) !important}
.h24:hover{color: var(--km-mint) !important}
.h25:hover{color: var(--km-mint) !important}
.h26:hover{background: var(--km-petrol) !important;color: var(--km-white) !important}
.h27:hover{background: var(--km-petrol) !important;color: var(--km-white) !important}
.h28:hover{color: var(--km-mint) !important;text-underline-offset: .28em !important}
.h29:hover{color: var(--km-mint) !important}
.h30:hover{color: var(--km-mint) !important}
.h31:hover{opacity: 1 !important}
.h32:hover{opacity: 1 !important}
.h33:hover{opacity: 1 !important}
.h34:hover{opacity: 1 !important}
.h35:hover{color: var(--km-mint) !important;text-decoration: underline !important}
.h36:hover{color: var(--km-mint) !important;text-decoration: underline !important}
.h37:focus{left: 16px !important}
.h38:hover{color: var(--km-mint) !important}
.h39:hover{color: var(--km-mint) !important}
.h40:hover{color: var(--km-mint) !important}
.h41:hover{color: var(--km-mint) !important;text-decoration: underline !important}
.h42:focus{left: 16px !important}
.h43:hover{color: var(--km-mint) !important}
.h44:hover{color: var(--km-mint) !important}
.h45:hover{color: var(--km-mint) !important}
.h46:hover{color: var(--km-mint) !important;text-decoration: underline !important}
.h47:focus{left: 16px !important}
.h48:hover{color: var(--km-mint) !important}
.h49:hover{color: var(--km-mint) !important}
.h50:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h51:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h52:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h53:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h54:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h55:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h56:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h57:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h58:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h59:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h60:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h61:hover{color: var(--km-mint) !important;text-decoration: underline !important}
.h62:hover{color: var(--km-mint) !important}
.h63:focus{left: 16px !important}
.h64:hover{color: var(--km-mint) !important}
.h65:hover{color: var(--km-mint) !important}
.h66:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h67:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h68:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h69:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h70:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h71:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h72:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h73:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h74:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h75:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h76:hover{color: var(--km-mint-ink) !important;text-decoration: underline !important}
.h77:hover{color: var(--km-mint) !important;text-decoration: underline !important}
.h78:hover{color: var(--km-mint) !important}