/* ============================================================
   MORTHSGAUDI — Grundgestaltung
   ------------------------------------------------------------
   Eigenstaendige Marke, aber erkennbar aus derselben Familie wie
   LumiF1. Gemeinsam sind Schrift und Rot. Eigen ist das Blau und
   die Lichterkette statt der Kamera.

   Farben aus Michaels altem Flyer gemessen, nicht geraten:
   Blau #0A34FF machte dort 17 bis 26 Prozent der Flaeche aus.
   ============================================================ */

:root{
  --bg:        #1C1C1C;
  --bg-2:      #161616;
  --flaeche:   #232323;
  --linie:     rgba(242,242,242,.10);
  --linie-2:   rgba(242,242,242,.20);
  --ink:       #F2F2F2;
  --ink-dim:   #B4B4B4;
  --ink-faint: #8A8A8A;

  /* Blau nur als Flaeche. Kontrast auf dem Hintergrund betraegt
     2,39:1, damit ist es als Schriftfarbe unbrauchbar. */
  --blau:      #0A34FF;
  /* Aufgehellt fuer Links und farbige Schrift, 5,90:1 */
  --blau-hell: #7B90FF;
  --rot:       #E30613;

  --warm:      #FFD9A0;

  --ease: cubic-bezier(.22,.61,.36,1);
  --med: .34s;
  --slow: .7s;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}

.shell{ width:min(1180px, 100% - 44px); margin-inline:auto; }

section{ position:relative; padding:clamp(56px,7vw,104px) 0; }

h2.titel{
  font-size:clamp(28px,5.2vw,52px);
  font-weight:900; letter-spacing:-.035em; line-height:1.06;
  margin:0 0 clamp(18px,2.6vw,32px);
  text-transform:uppercase;
}
h2.titel .hl{ color:var(--rot); }

p.lead{
  font-size:clamp(15px,1.9vw,18px);
  line-height:1.65; color:var(--ink-dim);
  max-width:62ch; margin:0 0 22px;
}

a{ color:var(--blau-hell); }

/* ============================================================
   LICHTERKETTE
   ------------------------------------------------------------
   Das Markenzeichen. Sie haengt oben quer, die Birnen gehen
   einzeln an und aus, und nach dem Laden schwingt die ganze
   Kette einmal aus.

   Umgesetzt als SVG, damit sie bei jeder Bildschirmbreite sauber
   bleibt. Die Birnen bekommen versetzte Verzoegerungen, dadurch
   flackert es unregelmaessig statt im Gleichtakt.
   ============================================================ */
.kette{
  /* Haengt unterhalb der Kopfleiste, sonst laeuft das Kabel
     mitten durch die Wortmarke oben links. */
  position:absolute; left:0; right:0; top:62px;
  height:150px; z-index:3; pointer-events:none;
  transform-origin:50% 0;
  animation:kette-schwingt 2.6s var(--ease) .35s both;
}
.kette svg{ width:100%; height:100%; display:block; }

@keyframes kette-schwingt{
  0%   { transform:translateY(-46px) rotate(-1.1deg); }
  35%  { transform:translateY(0)      rotate(.7deg); }
  60%  { transform:translateY(-4px)   rotate(-.4deg); }
  80%  { transform:translateY(0)      rotate(.2deg); }
  100% { transform:none; }
}

/* Birnen: leuchten, gehen kurz aus, kommen wieder */
.birne{ animation:gluehen 5.5s ease-in-out infinite; transform-origin:center; }
@keyframes gluehen{
  0%,  44%  { opacity:1; }
  50%       { opacity:.28; }
  56%, 100% { opacity:1; }
}
.glut{ animation:glut 5.5s ease-in-out infinite; }
@keyframes glut{
  0%,  44%  { opacity:.18; }
  50%       { opacity:.03; }
  56%, 100% { opacity:.18; }
}

/* Beim Scrollen wippt die Kette leicht nach. Die Staerke setzt
   das Skript ueber --wippe, hier steht nur die Umsetzung. */
.kette-innen{
  transform:translateY(calc(var(--wippe, 0) * 1px));
  transition:transform .5s var(--ease);
}

@media (prefers-reduced-motion: reduce){
  .kette{ animation:none; }
  .birne, .glut{ animation:none; }
  .kette-innen{ transition:none; transform:none; }
}

/* ============================================================
   KOPFLEISTE
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px clamp(16px,3vw,40px);
  transition:background var(--med), backdrop-filter var(--med);
}
.nav.gescrollt{
  background:rgba(28,28,28,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
}
.nav img{ height:38px; width:auto; display:block; }
.nav-links{ display:flex; gap:clamp(14px,2.2vw,30px); }
.nav-links a{
  color:var(--ink); text-decoration:none;
  font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  opacity:.82; transition:opacity var(--med), color var(--med);
}
.nav-links a:hover{ opacity:1; color:var(--rot); }

/* ============================================================
   KOPFBEREICH
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(150px,20vw,210px) 0 clamp(50px,6vw,84px);
}
/* Der blaue Keil aus dem Logo, hier als Flaeche im Hintergrund */
.hero::before{
  content:""; position:absolute; left:-14%; top:-10%;
  width:34%; height:120%; background:var(--blau);
  transform:skewX(-14deg); z-index:0; opacity:.92;
}
.hero .shell{ position:relative; z-index:4; }

.hero-logo{ width:min(760px, 82%); height:auto; display:block; margin-bottom:clamp(20px,3vw,34px); }

.claim{
  font-size:clamp(17px,2.5vw,25px); font-weight:800;
  line-height:1.3; letter-spacing:-.01em; margin:0 0 30px;
  max-width:30ch;
}
.claim .hl{ color:var(--rot); }

/* ---------- naechstes Fest ---------- */
.fest{
  background:var(--flaeche); border:1px solid var(--linie-2);
  border-radius:16px; padding:clamp(20px,3vw,32px);
  max-width:660px; position:relative; overflow:hidden;
}
.fest::before{
  content:""; position:absolute; inset:0 auto 0 0; width:7px; background:var(--blau);
}
.fest .marke{
  display:inline-block; font-size:10.5px; font-weight:900;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); background:var(--rot);
  padding:5px 11px; border-radius:4px; margin-bottom:14px;
}
.fest h3{
  font-size:clamp(22px,3.4vw,34px); font-weight:900;
  letter-spacing:-.03em; margin:0 0 6px; line-height:1.1;
}
.fest .wann{ font-size:clamp(14px,1.8vw,17px); color:var(--ink-dim); margin:0 0 20px; }
.fest .countdown{ display:flex; gap:clamp(16px,3vw,34px); padding-top:18px; border-top:1px solid var(--linie); }
.fest .countdown div{ text-align:left; }
.fest .countdown b{ display:block; font-size:clamp(22px,3.4vw,32px); font-weight:900; font-variant-numeric:tabular-nums; }
.fest .countdown span{ font-size:9.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:22px; padding:15px 26px; border-radius:999px;
  background:var(--rot); color:var(--ink); text-decoration:none;
  font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  transition:transform var(--med), box-shadow var(--med);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(227,6,19,.34); }

/* ============================================================
   REFERENZEN
   ============================================================ */
.bilder{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.bild{
  position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  border:1px solid var(--linie);
}
.bild.gross{ grid-column:span 2; aspect-ratio:16/9; }
.bild img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.bild:hover img{ transform:scale(1.05); }
.bild figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 16px 13px;
  background:linear-gradient(transparent, rgba(20,20,20,.92));
  font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
}
@media (max-width:700px){ .bild.gross{ grid-column:span 1; aspect-ratio:4/3; } }

/* ============================================================
   FUSS
   ============================================================ */
footer{ border-top:1px solid var(--linie); padding:34px 0 46px; background:var(--bg-2); }
.foot{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
       font-size:12.5px; color:var(--ink-faint); }
.foot nav{ display:flex; gap:18px; }
.foot a{ color:var(--ink-faint); text-decoration:none; }
.foot a:hover{ color:var(--ink); }

/* ---------- Handy ---------- */
@media (max-width:700px){
  .nav-links{ display:none; }
  .nav img{ height:30px; }
  .hero::before{ left:-24%; width:52%; }
  .hero-logo{ width:100%; }
  .fest .countdown{ gap:16px; }
}