.knopf{--knopf-grund:var(--brand-red);--knopf-text:var(--brand-white);--knopf-kante:rgb(var(--brand-red-strong-kanal) / .3);--knopf-flaeche:var(--brand-white);--knopf-auf-flaeche:var(--brand-red)}.knopf-neben{--knopf-grund:transparent;--knopf-text:var(--text,var(--brand-slate));--knopf-kante:var(--linie,rgb(var(--brand-slate-kanal) / .3));--knopf-flaeche:var(--text,var(--brand-slate));--knopf-auf-flaeche:var(--grund,var(--brand-white))}[data-glasgrund] .knopf-neben{--knopf-grund:rgb(var(--brand-white-kanal) / .08);--knopf-text:var(--brand-white);--knopf-kante:rgb(var(--brand-white-kanal) / .55);--knopf-flaeche:var(--brand-white);--knopf-auf-flaeche:var(--brand-slate)}.knopf-tief{--knopf-grund:var(--portal-text,var(--brand-slate));--knopf-text:var(--grund,var(--brand-white));--knopf-flaeche:var(--grund,var(--brand-white));--knopf-auf-flaeche:var(--portal-text,var(--brand-slate))}:is(.portal-rahmen,.portal-anmeldung,.mein-khit,.mein-zugang){--knopf-kappe:1.5rem;--knopf-einzug:.1875rem;--knopf-links:.625rem;--knopf-luecke:.625rem;--knopf-label-luft:.125rem}.verzeichnis-navigation,.knopf-klein{--knopf-kappe:1.75rem;--knopf-einzug:.25rem;--knopf-links:.75rem;--knopf-luecke:.75rem;--knopf-label-luft:.25rem}:root body :is(a,button):is(.knopf,.knopf-neben):not(.knopf-text):has(>.knopf-flaeche){isolation:isolate;justify-content:space-between;align-items:center;gap:var(--knopf-luecke,1.25rem);max-width:100%;padding:var(--knopf-einzug,.375rem);padding-left:var(--knopf-links,1.25rem);border:1px solid var(--knopf-kante);border-radius:var(--radius-panel);background:var(--knopf-grund);color:var(--knopf-text);text-align:left;-webkit-backdrop-filter:blur(18px)saturate(140%);box-shadow:inset 0 1px 0 rgb(var(--brand-white-kanal) / .24), 0 3px 12px rgb(var(--brand-black-kanal) / .035);font-weight:500;text-decoration:none;transition:box-shadow .4s cubic-bezier(.22,1,.36,1),border-color .4s,transform .4s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;transform:none}:root body :is(a,button):is(.knopf,.knopf-neben):not(.knopf-text):has(>.knopf-flaeche):is(:hover,:focus-visible){background:var(--knopf-grund);color:var(--knopf-text);transform:none}.knopf-flaeche{z-index:-1;right:var(--knopf-einzug,.375rem);top:var(--knopf-einzug,.375rem);bottom:var(--knopf-einzug,.375rem);width:var(--knopf-kappe,2.25rem);border-radius:var(--radius-control);background:var(--knopf-flaeche);box-shadow:inset 0 1px 0 rgb(var(--brand-white-kanal) / .45);pointer-events:none;transition:width .6s cubic-bezier(.22,1,.36,1);position:absolute}.knopf-beschriftung{z-index:1;min-width:0;padding-block:var(--knopf-label-luft,.4rem);overflow-wrap:anywhere;position:relative}.knopf-farbwechsel{padding-block:var(--knopf-label-luft,.4rem);color:var(--knopf-auf-flaeche);clip-path:inset(0 0 0 100%);pointer-events:none;transition:clip-path .6s cubic-bezier(.22,1,.36,1);position:absolute;inset:0}.knopf-bild{width:var(--knopf-kappe,2.25rem);min-height:var(--knopf-kappe,2.25rem);color:var(--knopf-auf-flaeche);pointer-events:none;flex:none;place-items:center;display:grid;position:relative}.knopf-bild svg{width:1.25rem;height:1.25rem;transition:translate .5s cubic-bezier(.22,1,.36,1)}.knopf-vorwaerts{rotate:180deg}:is(a,button):not(:disabled,[aria-disabled=true],[aria-busy=true]):is(:hover,:focus-visible)>.knopf-flaeche{width:calc(100% - 2 * var(--knopf-einzug,.375rem))}:is(a,button):not(:disabled,[aria-disabled=true],[aria-busy=true]):is(:hover,:focus-visible)>.knopf-beschriftung>.knopf-farbwechsel{clip-path:inset(0)}:is(a,button):not(:disabled,[aria-disabled=true],[aria-busy=true]):is(:hover,:focus-visible)>.knopf-bild svg{translate:2px}:root body :is(a,button):is(.knopf,.knopf-neben):not(.knopf-text):has(>.knopf-flaeche):not(:disabled,[aria-disabled=true],[aria-busy=true]):active{transform:translateY(1px)}:root body :is(a,button):is(.knopf,.knopf-neben):not(.knopf-text):has(>.knopf-flaeche):focus-visible{outline:3px solid var(--knopf-flaeche);outline-offset:4px}:root body :is(a,button).knopf:has(>.knopf-flaeche):focus-visible{outline-color:var(--text,var(--brand-slate))}:root body [data-glasgrund] :is(a,button).knopf:has(>.knopf-flaeche):focus-visible{outline-color:var(--brand-white)}@media (prefers-reduced-motion:reduce){.knopf-flaeche,.knopf-farbwechsel,.knopf-bild svg{transition:none}:root body :is(a,button):is(.knopf,.knopf-neben):not(.knopf-text):has(>.knopf-flaeche){transition:none}:root body :is(a,button):is(.knopf,.knopf-neben):not(.knopf-text):has(>.knopf-flaeche):active{transform:none}:is(a,button):is(:hover,:focus-visible)>.knopf-bild svg{translate:none}}@media (forced-colors:active){.knopf-flaeche,.knopf-farbwechsel{display:none}.knopf-bild{color:buttontext}:root body :is(a,button):is(.knopf,.knopf-neben):not(.knopf-text):has(>.knopf-flaeche){border-color:buttontext}}.verzeichnis-navigation.schwebend .knopf{--knopf-grund:var(--brand-white);--knopf-text:var(--knopf-auf-weiss-text);--knopf-kante:rgb(var(--brand-slate-kanal) / .3);--knopf-flaeche:var(--brand-slate);--knopf-auf-flaeche:var(--brand-white)}.portal-rahmen .knopf-neben{--knopf-grund:var(--portal-neben,var(--grund));--knopf-text:var(--portal-text);--knopf-kante:var(--portal-knopfkante,var(--linie));--knopf-flaeche:var(--portal-text);--knopf-auf-flaeche:var(--grund)}.hauptfuss .hauptfuss-newsletter-knopf{--knopf-grund:rgb(var(--brand-white-kanal) / .08);--knopf-text:var(--brand-white);--knopf-kante:rgb(var(--brand-white-kanal) / .55);--knopf-flaeche:var(--brand-white);--knopf-auf-flaeche:var(--brand-slate)}