/* ============================================================
   Linke, Bewegung.
   Flach geschrieben, keine Verschachtelung. Jede Regel nennt ihren
   Geltungsbereich selbst. Das ist laenger zu lesen und dafuer
   unkaputtbar: eine vergessene Klammer kann nichts mehr verschlucken.

   Ruhebeduerfnis geht vor. Rechtsseiten bleiben still.
   ============================================================ */

/* Fuellart: durchgehend forwards, nie both.
   Wenn eine Zeitachse nicht tickt, bliebe bei both der Anfangszustand
   stehen und Text waere unsichtbar. Mit forwards steht alles im
   Endzustand, also sichtbar, und die Bewegung ist nur ein Zugewinn. */
@media (prefers-reduced-motion: no-preference) and (min-width: 0px) {

/* ---- 1  Der senkrechte Strich zeichnet sich ---- */
body:not(:has(.lk-kopf-band)) .lk-a-strich{transform-origin:top center;animation:lk-strich linear both;animation-timeline:view();animation-range:entry 15% cover 34%}
body:not(:has(.lk-kopf-band)) .lk-a-strich-halter{animation:lk-sanft cubic-bezier(.16,.84,.3,1) forwards;animation-timeline:view();animation-range:entry 12% cover 30%}

/* ---- 2  Ueberschriften treten hinter einer Kante hervor ---- */
.lk-zeile{display:block;overflow:hidden}
.lk-zeile-innen{display:block}
body:not(:has(.lk-kopf-band)) .lk-zeile-innen{will-change:transform;animation:lk-zeile-auf cubic-bezier(.16,.84,.3,1) forwards;animation-timeline:view();animation-range:entry 5% cover 26%}
body:not(:has(.lk-kopf-band)) .lk-zeile:nth-child(2) .lk-zeile-innen{animation-range:entry 11% cover 31%}
body:not(:has(.lk-kopf-band)) .lk-zeile:nth-child(3) .lk-zeile-innen{animation-range:entry 17% cover 36%}
body:not(:has(.lk-kopf-band)) .lk-zeile:nth-child(4) .lk-zeile-innen{animation-range:entry 23% cover 41%}
body:not(:has(.lk-kopf-band)) .lk-zeile:nth-child(5) .lk-zeile-innen{animation-range:entry 29% cover 46%}

/* Im Held steht die Zeile schon im Bild. Sie laeuft nach Zeit, nicht nach Rollen. */
body:not(:has(.lk-kopf-band)) .lk-a-held .lk-zeile-innen,body:not(:has(.lk-kopf-band)) .lk-a-videoheld .lk-zeile-innen{animation:lk-zeile-auf 1.05s cubic-bezier(.16,.84,.3,1) forwards;animation-timeline:auto}
body:not(:has(.lk-kopf-band)) .lk-a-held .lk-zeile:nth-child(2) .lk-zeile-innen{animation-delay:.09s}
body:not(:has(.lk-kopf-band)) .lk-a-held .lk-zeile:nth-child(3) .lk-zeile-innen{animation-delay:.18s}
body:not(:has(.lk-kopf-band)) .lk-a-held .lk-a-linie{transform-origin:center;animation:lk-linie 1.2s .34s cubic-bezier(.16,.84,.3,1) forwards}
body:not(:has(.lk-kopf-band)) .lk-a-held .lk-a-vorspann{animation:lk-steigt .9s .46s cubic-bezier(.16,.84,.3,1) forwards}

/* ---- 4  Langsames Heranfahren am Standbild ---- */
body:not(:has(.lk-kopf-band)) .lk-a-held::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:inherit;background-size:cover;background-position:center center;background-repeat:no-repeat;transform-origin:center;animation:lk-heran 26s cubic-bezier(.2,.5,.4,1) forwards}

/* ---- 5  Bild wandert langsamer als das Rollen ---- */
.lk-a-bildband,.lk-a-bildaussage{overflow:hidden}
body:not(:has(.lk-kopf-band)) .lk-a-bildband::after,body:not(:has(.lk-kopf-band)) .lk-a-bildaussage::after{content:"";position:absolute;inset:-8% 0;z-index:0;pointer-events:none;background-image:inherit;background-size:cover;background-position:center center;background-repeat:no-repeat;animation:lk-langsam linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.lk-a-bildaussage::before{z-index:1}

/* ---- 6  Abschnittsinhalt steigt versetzt ein ---- */
body:not(:has(.lk-kopf-band)) .lk-a-aussage-innen>*,body:not(:has(.lk-kopf-band)) .lk-a-loc-innen>*,body:not(:has(.lk-kopf-band)) .lk-a-navy-innen>*,body:not(:has(.lk-kopf-band)) .lk-a-band-innen>*,body:not(:has(.lk-kopf-band)) .lk-a-bildaussage-innen>*,body:not(:has(.lk-kopf-band)) .lk-a-stimme-innen>*,body:not(:has(.lk-kopf-band)) .lk-a-grauband-innen>*{animation:lk-steigt cubic-bezier(.16,.84,.3,1) forwards;animation-timeline:view();animation-range:entry 8% cover 27%}
body:not(:has(.lk-kopf-band)) .lk-a-aussage-innen>*:nth-child(2),body:not(:has(.lk-kopf-band)) .lk-a-loc-innen>*:nth-child(2),body:not(:has(.lk-kopf-band)) .lk-a-navy-innen>*:nth-child(2),body:not(:has(.lk-kopf-band)) .lk-a-band-innen>*:nth-child(2),body:not(:has(.lk-kopf-band)) .lk-a-bildaussage-innen>*:nth-child(2){animation-range:entry 14% cover 33%}
body:not(:has(.lk-kopf-band)) .lk-a-aussage-innen>*:nth-child(3),body:not(:has(.lk-kopf-band)) .lk-a-loc-innen>*:nth-child(3),body:not(:has(.lk-kopf-band)) .lk-a-navy-innen>*:nth-child(3),body:not(:has(.lk-kopf-band)) .lk-a-band-innen>*:nth-child(3),body:not(:has(.lk-kopf-band)) .lk-a-bildaussage-innen>*:nth-child(3){animation-range:entry 20% cover 39%}
body:not(:has(.lk-kopf-band)) .lk-a-loc-innen>*:nth-child(4){animation-range:entry 26% cover 45%}

/* ---- Absaetze bewegen sich selbst, klein gehalten ---- */
body:not(:has(.lk-kopf-band)) .lk-a-text p,body:not(:has(.lk-kopf-band)) .lk-a-loc-text p,body:not(:has(.lk-kopf-band)) .lk-a-navy-text p,body:not(:has(.lk-kopf-band)) .lk-a-bildaussage-text p,body:not(:has(.lk-kopf-band)) .lk-a-stimme-text p,body:not(:has(.lk-kopf-band)) .lk-a-grauband-text p,body:not(:has(.lk-kopf-band)) .lk-a-band-text p{animation:lk-sanft cubic-bezier(.16,.84,.3,1) forwards;animation-timeline:view();animation-range:entry 10% cover 28%}
body:not(:has(.lk-kopf-band)) .lk-a-text p:nth-child(2),body:not(:has(.lk-kopf-band)) .lk-a-loc-text p:nth-child(2),body:not(:has(.lk-kopf-band)) .lk-a-navy-text p:nth-child(2),body:not(:has(.lk-kopf-band)) .lk-a-stimme-text p:nth-child(2){animation-range:entry 16% cover 34%}
body:not(:has(.lk-kopf-band)) .lk-a-text p:nth-child(3),body:not(:has(.lk-kopf-band)) .lk-a-loc-text p:nth-child(3),body:not(:has(.lk-kopf-band)) .lk-a-navy-text p:nth-child(3){animation-range:entry 22% cover 40%}
body:not(:has(.lk-kopf-band)) .lk-a-text p:nth-child(4),body:not(:has(.lk-kopf-band)) .lk-a-loc-text p:nth-child(4){animation-range:entry 28% cover 46%}
body:not(:has(.lk-kopf-band)) .lk-a-loc-anschrift{animation:lk-von-links cubic-bezier(.16,.84,.3,1) forwards;animation-timeline:view();animation-range:entry 14% cover 32%}
body:not(:has(.lk-kopf-band)) .lk-a-loc-bild img{animation:lk-bild-auf cubic-bezier(.16,.84,.3,1) forwards;animation-timeline:view();animation-range:entry 6% cover 30%}

/* ---- Bild- und Logoraster kacheln sich herein ---- */
body:not(:has(.lk-kopf-band)) .lk-a-raster>*,body:not(:has(.lk-kopf-band)) .lk-a-logoraster-innen>*{animation:lk-auf cubic-bezier(.16,.84,.3,1) forwards;animation-timeline:view();animation-range:entry 4% cover 22%}
body:not(:has(.lk-kopf-band)) .lk-a-raster>*:nth-child(5n+2),body:not(:has(.lk-kopf-band)) .lk-a-logoraster-innen>*:nth-child(6n+2){animation-range:entry 8% cover 26%}
body:not(:has(.lk-kopf-band)) .lk-a-raster>*:nth-child(5n+3),body:not(:has(.lk-kopf-band)) .lk-a-logoraster-innen>*:nth-child(6n+3){animation-range:entry 12% cover 30%}
body:not(:has(.lk-kopf-band)) .lk-a-raster>*:nth-child(5n+4),body:not(:has(.lk-kopf-band)) .lk-a-logoraster-innen>*:nth-child(6n+4){animation-range:entry 16% cover 34%}
body:not(:has(.lk-kopf-band)) .lk-a-raster>*:nth-child(5n+5),body:not(:has(.lk-kopf-band)) .lk-a-logoraster-innen>*:nth-child(6n+5){animation-range:entry 20% cover 38%}

/* ---- 9  Kacheln der Schublade treppen sich herein ---- */
.lk-menu .lk-kachel{opacity:0;transform:translateY(18px);transition:opacity .5s cubic-bezier(.16,.84,.3,1),transform .5s cubic-bezier(.16,.84,.3,1)}
body.lk-offen .lk-menu .lk-kachel{opacity:1;transform:none}
.lk-menu .lk-kachel:nth-child(1){transition-delay:0.16s}
.lk-menu .lk-kachel:nth-child(2){transition-delay:0.20s}
.lk-menu .lk-kachel:nth-child(3){transition-delay:0.24s}
.lk-menu .lk-kachel:nth-child(4){transition-delay:0.28s}
.lk-menu .lk-kachel:nth-child(5){transition-delay:0.32s}
.lk-menu .lk-kachel:nth-child(6){transition-delay:0.36s}
.lk-menu .lk-kachel:nth-child(7){transition-delay:0.40s}
.lk-menu .lk-kachel:nth-child(8){transition-delay:0.44s}
.lk-menu .lk-kachel:nth-child(9){transition-delay:0.48s}
.lk-menu .lk-kachel:nth-child(10){transition-delay:0.52s}
.lk-menu .lk-kachel:nth-child(11){transition-delay:0.56s}
.lk-menu .lk-menu-fuss{opacity:0;transition:opacity .6s .62s ease}
body.lk-offen .lk-menu .lk-menu-fuss{opacity:1}

}

/* ---- 7  Knopffuellung wischt von links ----
   Laeuft ueberall, braucht keine Scroll-Zeitachse. Die Fuellung darf nie
   die Textfarbe sein, sonst verschwindet die Schrift darin. */
.lk-a-knopf-halter .elementor-button{--lk-fuellung:var(--e-global-color-primary);--lk-schrift-drueber:#FCFCFC;position:relative;overflow:hidden;isolation:isolate}
.lk-a-knopf-halter .elementor-button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lk-fuellung);transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.16,.84,.3,1)}
.lk-a-knopf-halter .elementor-button:hover::before,.lk-a-knopf-halter .elementor-button:focus-visible::before{transform:scaleX(1)}
.lk-a-knopf-halter .elementor-button:hover,.lk-a-knopf-halter .elementor-button:hover span,.lk-a-knopf-halter .elementor-button:focus-visible,.lk-a-knopf-halter .elementor-button:focus-visible span{color:var(--lk-schrift-drueber)!important;background-color:transparent!important;border-color:var(--lk-fuellung)!important;transition:color .28s ease,border-color .28s ease}
.lk-a-navy .lk-a-knopf-halter .elementor-button{--lk-fuellung:#FCFCFC;--lk-schrift-drueber:var(--e-global-color-primary)}
.lk-a-grauband .lk-a-knopf-halter .elementor-button{--lk-fuellung:#FCFCFC;--lk-schrift-drueber:var(--e-global-color-secondary)}
.lk-a-loc-dunkel .lk-a-knopf-halter .elementor-button{--lk-fuellung:#FCFCFC;--lk-schrift-drueber:var(--e-global-color-primary)}
.lk-a-formular .elementor-button{transition:background-color .3s ease,color .3s ease,border-color .3s ease}
@media (prefers-reduced-motion: reduce){.lk-a-knopf-halter .elementor-button::before{transition:none}}

/* ---- Kachelbilder atmen, Nebenverweise bekommen eine Unterlinie ---- */
.lk-kachel,.lk-a-kachelfeld{transition:background-size .7s cubic-bezier(.16,.84,.3,1)}
.lk-kachel:hover,.lk-a-kachelfeld:hover{background-size:107% auto}
@media (prefers-reduced-motion: reduce){.lk-kachel,.lk-a-kachelfeld{transition:none}}
.lk-neben a>span{position:relative}
.lk-neben a>span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .35s cubic-bezier(.16,.84,.3,1)}
.lk-neben a:hover>span::after,.lk-neben a:focus-visible>span::after{transform:scaleX(1);transform-origin:left center}

/* ---- 8  Logowand als ruhige Wanderung ---- */
.lk-wanderung{overflow:hidden;position:relative;width:100%}
.lk-wanderung-spur{display:flex!important;flex-wrap:nowrap!important;width:max-content;align-items:center;column-gap:clamp(26px,3.6vw,56px)}
.lk-wanderung-spur>*{flex:0 0 auto!important;width:auto!important;max-width:none!important;margin:0!important}
@media (prefers-reduced-motion: no-preference){.lk-wanderung-spur{animation:lk-wandern 64s linear infinite}}
@media (prefers-reduced-motion: no-preference){.lk-wanderung:hover .lk-wanderung-spur,.lk-wanderung:focus-within .lk-wanderung-spur{animation-play-state:paused}}
.lk-wanderung::before,.lk-wanderung::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,7vw,120px);z-index:2;pointer-events:none}
.lk-wanderung::before{left:0;background:linear-gradient(to right,#7F7F7F,rgba(127,127,127,0))}
.lk-wanderung::after{right:0;background:linear-gradient(to left,#7F7F7F,rgba(127,127,127,0))}

/* ---- 3  Seitenuebergaenge ---- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: no-preference){::view-transition-group(root){animation-duration:.42s}}
@media (prefers-reduced-motion: no-preference){::view-transition-old(root){animation:lk-vt-weg .28s cubic-bezier(.4,0,1,1) forwards}}
@media (prefers-reduced-motion: no-preference){::view-transition-new(root){animation:lk-vt-her .42s cubic-bezier(0,0,.2,1) forwards}}
@media (prefers-reduced-motion: no-preference){::view-transition-group(lk-held-bild){animation-duration:.62s;animation-timing-function:cubic-bezier(.16,.84,.3,1)}}
.lk-kopfleiste{view-transition-name:lk-kopf}
.lk-fuss{view-transition-name:lk-fuss}
.lk-menu{view-transition-name:lk-menu}
.lk-a-held,.lk-a-videoheld{view-transition-name:lk-held-bild}
.lk-rundgang{view-transition-name:lk-held-bild}

/* ---- Die Bewegungen selbst ---- */
@keyframes lk-strich{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes lk-zeile-auf{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes lk-linie{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes lk-steigt{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes lk-sanft{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lk-von-links{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes lk-bild-auf{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes lk-auf{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lk-heran{from{transform:scale(1)}to{transform:scale(1.09)}}
@keyframes lk-langsam{from{transform:translateY(-5%)}to{transform:translateY(5%)}}
@keyframes lk-wandern{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lk-vt-weg{from{opacity:1}to{opacity:0}}
@keyframes lk-vt-her{from{opacity:0}to{opacity:1}}
