/* ==========================================================================
   Layout — Seitenstruktur: Top-Bar, Hero, Art/Signatur, Footer.
   Wird ZULETZT geladen, damit die Responsive-Overrides am Ende die
   Basisregeln aus components.css sicher überschreiben.
   ========================================================================== */

/* ---------- top bar ---------- */
.top{padding-block:clamp(1.1rem,2.6vw,1.9rem)}
.top__row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brandmark{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.brandmark__star{width:18px;height:18px;flex:0 0 auto}
.brandmark__word{
  font-family:var(--ff-display);font-weight:800;font-size:1.02rem;
  letter-spacing:-.01em;color:var(--ink);
}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.4rem)}
.nav__link{
  position:relative;font-family:var(--ff-display);font-weight:600;
  font-size:.92rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none;
  padding:.35rem .15rem;white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:.15rem;right:.15rem;bottom:0;height:2.5px;
  border-radius:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav__link:hover::after,.nav__link:focus-visible::after,.nav__link[aria-current]::after{transform:scaleX(1)}
.nav__link[aria-current]{font-weight:700}

/* ---------- hero ---------- */
main{flex:1 0 auto;display:flex;align-items:center;padding-block:clamp(1.5rem,4vw,3rem)}
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;width:100%;
}

.title{
  font-family:var(--ff-display);font-weight:800;
  font-size:clamp(3rem,9.5vw,6.4rem);line-height:.94;
  letter-spacing:-.02em;margin:0;
}
.title .l1,.title .l2{display:block}
.title .grad{
  background:var(--grad-head);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.lead{
  font-size:clamp(1.18rem,2.4vw,1.5rem);font-weight:600;line-height:1.3;
  margin:1.5rem 0 0;max-width:30ch;
}
.sub{color:var(--ink-soft);margin:1rem 0 0;max-width:46ch}

/* ---------- art / signature ---------- */
.art{position:relative;display:flex;justify-content:center;align-items:center;min-height:300px}
.art__pants{width:min(78%,340px);height:auto;transform-origin:50% 7%;animation:sway 4.6s ease-in-out infinite}
.float{position:absolute;pointer-events:none}
.float--a{top:6%;left:8%;animation:bob 5.5s ease-in-out infinite}
.float--b{top:14%;right:6%;animation:bob 6.4s ease-in-out infinite .6s}
.float--c{bottom:16%;left:2%;animation:bob 7s ease-in-out infinite 1.1s}
.float--d{bottom:8%;right:12%;animation:bob 6s ease-in-out infinite .3s}

/* ---------- footer ---------- */
footer{flex-shrink:0;border-top:1px solid var(--line);padding-block:1.6rem;margin-top:1rem}
.foot__row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between}
.foot__legal{font-family:var(--ff-mono);font-size:.75rem;color:var(--ink-soft)}
.foot__legal a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.foot__legal a:hover{border-color:var(--pink)}
.foot__soon{color:var(--ink-faint)}

/* ==========================================================================
   Responsive — am Ende, damit diese Overrides die Basisregeln gewinnen
   ========================================================================== */
@media (max-width:880px){
  .hero{grid-template-columns:1fr;gap:2.4rem;text-align:center}
  .badge,.title,.lead,.sub,.notify{margin-inline:auto}
  .lead,.sub{max-width:38ch}
  .notify__row{justify-content:center}
  .art{order:-1;min-height:0}
  .art__pants{width:min(58%,260px)}
  .meanwhile{margin-inline:auto}
  .foot__row{justify-content:center;text-align:center}
}
@media (max-width:560px){
  .parent{display:none}
  .top__row{gap:.8rem}
}
@media (max-width:420px){
  .art__pants{width:62%}
}