.kopf{position:sticky;top:0;z-index:20;background:var(--glas);
  border-bottom:1px solid var(--kante);box-shadow:var(--schatten-kopf)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.kopf{-webkit-backdrop-filter:blur(var(--glas-blur-md)) saturate(1.35);backdrop-filter:blur(var(--glas-blur-md)) saturate(1.35)}}
@media (prefers-reduced-transparency:reduce){.kopf{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--flaeche)}}
.kopf-in{max-width:1180px;margin:0 auto;padding:0 20px}
.kopf-reihe{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:58px}
main{position:relative;z-index:1}
.spalte{margin:0 auto;padding:var(--s7) 20px var(--s8)}
.spalte--schmal{max-width:700px} .spalte--mittel{max-width:860px} .spalte--breit{max-width:1180px}
.abstand{display:flex;flex-direction:column;gap:var(--s7)}

.start{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.werbesatz i{font-style:normal;color:var(--akzent)}
.start-fuss{padding:var(--s6) 20px calc(var(--s5) + env(safe-area-inset-bottom));text-align:center}
.rueckweg{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;justify-content:space-between}
.rueckweg-links{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.leer{display:flex;gap:var(--s2);align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--tinte-2)}
.leer svg{width:16px;height:16px;flex:none;margin-top:2px}

@media (max-width:760px){
  .spalte{padding:var(--s5) 16px var(--s7)}
  .kopf-in{padding:0 16px}
  .abstand{gap:var(--s6)}
  .rueckweg{flex-direction:column-reverse;align-items:stretch}
  .rueckweg .knopf--haupt{width:100%}
  .rueckweg-links{justify-content:space-between}}

.thema{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;
  border-radius:var(--r-knopf);border:0;background:transparent;color:var(--tinte);
  font:600 14.5px/1 var(--sans);cursor:pointer;
  transition:background-color var(--t-fast) var(--ease-state)}
.thema:hover{background:var(--akzent-tint)}
.thema svg{width:18px;height:18px}

:root{--t-thema:500ms;--t-thema-farbe:300ms;--ease-thema:cubic-bezier(.2,.7,.2,1)}
:root[data-themenwechsel="kreis"]::view-transition-group(root){animation:none}
:root[data-themenwechsel="kreis"]::view-transition-image-pair(root){isolation:auto}
:root[data-themenwechsel="kreis"]::view-transition-old(root),
:root[data-themenwechsel="kreis"]::view-transition-new(root){mix-blend-mode:normal;animation:none}
:root[data-themenwechsel="kreis"]::view-transition-new(root){
  animation:themaAufdecken var(--t-thema) var(--ease-thema) both}
@keyframes themaAufdecken{
  from{clip-path:circle(0px at var(--thema-x) var(--thema-y))}
  to{clip-path:circle(var(--thema-radius) at var(--thema-x) var(--thema-y))}
}
:root[data-themenwechsel="kreis"] *,
:root[data-themenwechsel="sofort"] *{transition:none!important}
:root[data-themenwechsel="farbe"],
:root[data-themenwechsel="farbe"] *,
:root[data-themenwechsel="farbe"] *::before,
:root[data-themenwechsel="farbe"] *::after{
  transition-property:background-color,color,border-color!important;
  transition-duration:var(--t-thema-farbe)!important;transition-timing-function:var(--ease-thema)!important}
@media(prefers-reduced-motion:reduce){
  :root[data-themenwechsel] *, :root[data-themenwechsel] *::before,
  :root[data-themenwechsel] *::after{transition:none!important;animation:none!important}}

.sprung{position:absolute;left:-9999px;top:0;z-index:40}
.sprung:focus{left:var(--s4);top:var(--s3);padding:10px 14px;border-radius:var(--r-knopf);
  background:var(--akzent-flaeche);color:var(--knopf-tinte);font:600 15px/1 var(--sans)}
h1[tabindex="-1"]:focus,h1[tabindex="-1"]:focus-visible{outline:none}
h1[data-fokus="tastatur"]:focus{outline:2px solid var(--akzent-flaeche,currentColor);outline-offset:4px;border-radius:4px}