@layer components{.bk-projekt-navigation{--bk-projekt-navigation-abstand:clamp(16px, 2.5vw, 32px);--bk-projekt-navigation-ecke:10px;gap:var(--bk-projekt-navigation-abstand);grid-template-columns:minmax(0,1fr);display:grid}@media (min-width:768px){.bk-projekt-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}}.bk-projekt-navigation__feld{background:var(--bk-flaeche-hoch);min-block-size:44px;color:var(--bk-text);align-content:start;gap:16px;padding:clamp(20px,3vw,32px);text-decoration:none;display:grid;position:relative}.bk-projekt-navigation__feld:active{background:var(--bk-flaeche)}.bk-projekt-navigation__feld:focus-visible{outline:var(--bk-fokus-ring) solid var(--bk-fokus);outline-offset:3px}.bk-projekt-navigation__kopf{justify-content:space-between;align-items:center;gap:12px;display:flex}.bk-projekt-navigation__kicker{font-family:var(--bk-schrift-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bk-text-leise);font-size:.75rem}.bk-projekt-navigation__pfeilknopf{background:var(--bk-signal);block-size:48px;inline-size:48px;color:var(--bk-signal-text);clip-path:polygon(var(--bk-projekt-navigation-ecke) 0, 100% 0, 100% calc(100% - var(--bk-projekt-navigation-ecke)), calc(100% - var(--bk-projekt-navigation-ecke)) 100%, 0 100%, 0 var(--bk-projekt-navigation-ecke));flex:none;place-items:center;display:grid}.bk-projekt-navigation__pfeil{block-size:24px;inline-size:24px;overflow:visible}.bk-projekt-navigation__pfeil path{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:square;stroke-linejoin:miter}.bk-projekt-navigation__feld[data-richtung=zurueck] .bk-projekt-navigation__pfeil{transform:scaleX(-1)}.bk-projekt-navigation__bild{aspect-ratio:16/10;background:var(--bk-flaeche);display:block;overflow:hidden}.bk-projekt-navigation__bild>*{object-fit:cover;clip-path:inset(0);block-size:100%;inline-size:100%;display:block}@media (hover:hover) and (pointer:fine){.bk-projekt-navigation__bild>*{clip-path:polygon(0 100%,0 72%,25% 72%,25% 62%,50% 62%,50% 52%,75% 52%,75% 42%,100% 42%,100% 100%)}.bk-projekt-navigation__feld:hover .bk-projekt-navigation__bild>*,.bk-projekt-navigation__feld:focus-visible .bk-projekt-navigation__bild>*{clip-path:polygon(0 100%,0 0,25% 0,25% 0,50% 0,50% 0,75% 0,75% 0,100% 0,100% 100%)}}.bk-projekt-navigation__titel{font-family:var(--bk-schrift-display);letter-spacing:-.01em;text-wrap:balance;font-size:clamp(1.5rem,1.1rem + 2vw,2.75rem);font-weight:800;line-height:1.05;display:block}.bk-projekt-navigation__daten{margin:0}.bk-projekt-navigation__datum{grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:12px;font-size:.9375rem;line-height:1.5;display:grid}.bk-projekt-navigation__datum dt{font-family:var(--bk-schrift-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bk-text-leise);margin:0;font-size:.75rem}.bk-projekt-navigation__datum dd{margin:0}}@media (prefers-reduced-motion:no-preference){:root:not([data-bewegung=ruhig]) .bk-projekt-navigation__feld{transition:background-color var(--bk-dauer-rueckmeldung) var(--bk-kurve-aus)}:root:not([data-bewegung=ruhig]) .bk-projekt-navigation__bild>*{transition:clip-path var(--bk-dauer-zustand) var(--bk-kurve-aus)}:root:not([data-bewegung=ruhig]) .bk-projekt-navigation__pfeil{transition:translate var(--bk-dauer-zustand) var(--bk-kurve-aus)}@media (hover:hover) and (pointer:fine){:root:not([data-bewegung=ruhig]) .bk-projekt-navigation__feld[data-richtung=vor]:hover .bk-projekt-navigation__pfeil,:root:not([data-bewegung=ruhig]) .bk-projekt-navigation__feld[data-richtung=vor]:focus-visible .bk-projekt-navigation__pfeil{translate:4px}:root:not([data-bewegung=ruhig]) .bk-projekt-navigation__feld[data-richtung=zurueck]:hover .bk-projekt-navigation__pfeil,:root:not([data-bewegung=ruhig]) .bk-projekt-navigation__feld[data-richtung=zurueck]:focus-visible .bk-projekt-navigation__pfeil{translate:-4px}}}