/* ============ Landingpage: ein Foto, ein grosses Logo ============ */

.cover{
  position:relative;
  display:grid;
  place-items:center;
  min-height:100svh;
  overflow:hidden;
  background:#e9e6df;
}
.cover .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  z-index:0;
}
/* sehr zarter Schleier, damit die Schrift überall trägt */
.cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(251,250,246,.20);
  z-index:1;
  pointer-events:none;
}

.wortmarke{
  position:relative;
  z-index:2;
  display:inline-block;
  text-align:center;
  color:#141414;
}

.ln{
  display:block;
  font-family:"Display", system-ui, sans-serif;
  font-size:min(14.2vw, 26vh);
  line-height:1.03;
  white-space:nowrap;
  /* Neon-Textmarker, zieht beim Überfahren von links durch */
  background-image:
    linear-gradient(101deg, transparent 0 1%, var(--nl) 1.8% 97.5%, transparent 98.6% 100%),
    linear-gradient(101deg, transparent 0 .4%, var(--nl2) 1% 98.6%, transparent 99.4% 100%);
  background-repeat:no-repeat, no-repeat;
  background-size:0% .58em, 0% .80em;
  background-position:0 64%, 0 74%;
  transition:background-size .5s ease;
}
.ln1{ --nl:#f4ff00; --nl2:rgba(244,255,0,.55); }   /* Neongelb */
.ln2{ --nl:#f4ff00; --nl2:rgba(244,255,0,.55); }   /* Neongelb, beide Zeilen gleich */
.wortmarke:hover .ln{ background-size:100% .58em, 100% .80em; mix-blend-mode:multiply; }
.wortmarke:hover .ln2{ transition-delay:.14s; }
/* erste Zeile auf die Breite der zweiten gesperrt — beide Zeilen exakt bündig
   (JOSEF ist 3.770em breit, MOHAMED 6.140em; die Differenz auf 4 Lücken verteilt) */
.ln1 .ch{ margin-right:.5925em; }
.ln1 .ch:last-child{ margin-right:0; }

.ch{ display:inline-block; }
.wortmarke:hover .ch{
  animation:jump 800ms cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(var(--i) * 34ms);
}
@keyframes jump{
  0%  { transform:translateY(0); }
  38% { transform:translateY(-.16em); }
  68% { transform:translateY(.05em); }
  100%{ transform:translateY(0); }
}

.sub{
  display:flex;
  justify-content:space-between;
  width:100%;
  margin-top:1.1em;
  font-family:"Body", system-ui, sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:clamp(.6rem, 1.15vw, 1rem);
  color:#141414;
}

@media (max-width:700px){
  .sub{ letter-spacing:.06em; font-size:.62rem; }
}