.lockup {display:inline-flex;align-items:center;gap:17px;min-height:44px;flex-shrink:0;border-radius:8px;text-decoration:none}
.lockup:focus-visible {outline:2px solid var(--brand);outline-offset:6px}
.wordmark {position:relative;display:inline-flex;align-items:baseline;color:transparent;background:linear-gradient(90deg,var(--wortmarke-anfang),var(--wortmarke-mitte) 50%,var(--wortmarke-ende));-webkit-background-clip:text;background-clip:text;font:850 34px/1 var(--anzeige);letter-spacing:-.065em;text-decoration:none;padding-right:.1em;margin-right:-.1em}
.lockup__by {position:relative;display:inline-grid;align-content:center;gap:3px;padding:2px 0 2px 18px;line-height:1;white-space:nowrap}
.lockup__by::before {content:'';position:absolute;left:0;top:50%;width:1px;height:34px;border-radius:1px;background:linear-gradient(to bottom,transparent,var(--wortmarke-anfang) 22%,var(--wortmarke-ende) 78%,transparent);opacity:.9;transform:translateY(-50%)}
.lockup__prefix {display:block;padding-left:2.766667%;color:var(--ink-soft);font:450 9.5px/1.15 var(--text);letter-spacing:.01em;text-transform:none}
.lockup__zendrion {position:relative;display:block;width:100px;line-height:0}
.lockup__zendrion img {width:100%;height:auto}
.lockup__zendrion::after {content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:#F5F7FB;-webkit-mask:url('/assets/start/zendrion-378-schrift.webp') center/contain no-repeat;mask:url('/assets/start/zendrion-378-schrift.webp') center/contain no-repeat;transition:opacity 0s linear 100ms}
.js .kopf:not([data-flaeche='papier']) .lockup__zendrion::after,.kopf[data-flaeche='nacht'] .lockup__zendrion::after,.fuss .lockup__zendrion::after {opacity:1}
.wordmark__zeichnung {position:absolute;inset:0 .1em 0 0;width:auto;height:100%;overflow:visible;opacity:0;pointer-events:none}
.wordmark__stopp--anfang {stop-color:var(--wortmarke-anfang)}
.wordmark__stopp--mitte {stop-color:var(--wortmarke-mitte)}
.wordmark__stopp--ende {stop-color:var(--wortmarke-ende)}
.wordmark__buchstabe {stroke-width:22;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    .lockup .wordmark--zeichnung:hover {background:none}
    .wordmark--zeichnung:hover .wordmark__zeichnung {opacity:1}
    .wordmark--zeichnung:hover .wordmark__buchstabe {fill-opacity:0;stroke-dasharray:1;stroke-dashoffset:1;animation:wortmarke-linie var(--dauer) linear var(--start) forwards,wortmarke-fuellung 160ms ease-out 1140ms forwards}
    .wordmark__buchstabe--s {--start:0ms;--dauer:200ms}
    .wordmark__buchstabe--o {--start:200ms;--dauer:180ms}
    .wordmark__buchstabe--m {--start:380ms;--dauer:260ms}
    .wordmark__buchstabe--e {--start:640ms;--dauer:180ms}
    .wordmark__buchstabe--v {--start:820ms;--dauer:140ms}
    .wordmark__buchstabe--o2 {--start:960ms;--dauer:180ms}
}
@keyframes wortmarke-linie {to {stroke-dashoffset:0}}
@keyframes wortmarke-fuellung {to {fill-opacity:1;stroke-width:0}}
@media (max-width:699px) {
    :root {--kopf:60px}
    .kopf__inhalt {gap:14px}
    .lockup {gap:12px}
    .wordmark {font-size:28px}
    .lockup__by {padding-left:15px}
    .lockup__prefix {font-size:9px;letter-spacing:.01em}
    .lockup__zendrion {width:82px}
}
@media (max-width:399px) {
    .lockup {flex-direction:column;align-items:flex-start;gap:4px}
    .wordmark {font-size:27px}
    .lockup__by {display:flex;align-items:center;gap:5px;padding:0}
    .lockup__by::before {display:none}
    .lockup__prefix {padding:0;font-size:8px;letter-spacing:.045em;text-transform:none}
    .lockup__zendrion {width:66px}
    .knopf--kopf {padding:0 14px}
}
@media (forced-colors:active) {
    .wordmark {background:none;color:CanvasText}
    .wordmark .wordmark__zeichnung {display:none}
}
