/* Freigegebener Slogan in AL Sandra, mit dem Strich ueber dem U. */
@font-face {
    font-family: 'AL Sandra';
    src: url('../fonts/al-sandra/alsandra.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

#heroLoading {
    background: #e1e5d7;
    overflow: hidden;
}

#heroLoading .text-loader {
    margin: 0;
    padding: 30px 24px;
}

#heroLoading .loading-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    animation: none;
}

/* Stand 19.09.2026: Der Slogan wird wie von Hand geschrieben. Eine weiche Kante
   (CSS-Maske) laeuft in 1,5 s von links nach rechts ueber den Schriftzug; der Strich
   ueber dem U erscheint dabei an seiner Stelle mit. Vorher gab es nur ein 0,3-s-Zoom
   (scale .45 -> 1), das auf dem Handy gar nicht lief: Die Mobil-Regel
   "body * { transform: none !important }" in index.html schaltet jede transform-
   Animation ab. Die Maske braucht kein transform und laeuft ueberall.
   Dauer (--slogan-write) und Mindestanzeige in index.html (hideHeroLoading, 2500 ms)
   gehoeren zusammen: 1,5 s schreiben + rund 1 s stehen lassen, dann Foto einblenden.
   Ohne Masken-Unterstuetzung (sehr alte Browser) steht der Slogan einfach sofort da. */
#heroLoading .loading-motto {
    --slogan-write: 1.5s;
    font-family: 'AL Sandra', cursive;
    font-size: clamp(30px, 3.5vw, 48px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: #505c43;
    /* Der Strich ueber dem U ragt ~0,5em ueber die Zeile hinaus; er muss innerhalb
       des Kastens liegen, sonst schneidet ihn die Maske ab. Das Padding holt ihn
       hinein, der negative Rand haelt die Textposition unveraendert. */
    margin: -.6em 0 0;
    padding: .6em 0 0;
    white-space: nowrap;
    opacity: 0;
    animation: none;
    -webkit-mask-image: linear-gradient(to right, #000 46%, transparent 54%);
    mask-image: linear-gradient(to right, #000 46%, transparent 54%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
}

#heroLoading.slogan-ready .loading-motto {
    animation: slogan-write var(--slogan-write) cubic-bezier(.35, .1, .5, 1) .15s both;
}

#heroLoading .loading-motto::after {
    content: none;
}

#heroLoading .slogan-u {
    display: inline-block;
    position: relative;
}

#heroLoading .slogan-u::after {
    content: '-';
    position: absolute;
    left: .44em;
    top: -.74em;
    font-family: inherit;
    font-size: .7em;
    font-weight: 400;
    line-height: 1.5;
    transform: rotate(-4deg);
}

/* Maske 2,5x so breit wie der Text: bei 100 % liegt der sichtbare Teil komplett
   links neben dem Text (nichts zu sehen), bei 0 % deckt er den ganzen Text ab. */
@keyframes slogan-write {
    from { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to   { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; }
}

@media (max-width: 480px) {
    #heroLoading .text-loader { padding: 20px 12px; }
    #heroLoading .loading-motto { font-size: clamp(26px, 7vw, 32px); }
}

/* Bei "Bewegung reduzieren" (macOS/iOS-Bedienungshilfe) laeuft die Schreib-Animation
   trotzdem: Nichts bewegt, dreht oder zoomt sich, der Schriftzug wird nur weich von
   links nach rechts eingeblendet. Das fruehere Zoomen war hier abgeschaltet. */
@media (prefers-reduced-motion: reduce) {
    #heroLoading { transition: none; }
}