/* ============================================================
   LICHTMALER_MUC — V12: ATMOSPHÄRE
   Additive stylesheet, loaded after site.css.
   Ziel: das LM wird zum echten Zentrum der Landingpage, und
   jede der sechs Welten bekommt ein eigenes Gefühl statt nur
   einer anderen Akzentfarbe.
   ============================================================ */

/* ---------------------------------------------------------------
   1) LANDINGPAGE — das LM als Mittelpunkt
   --------------------------------------------------------------- */
.hero-inner{ padding-top:0; }

.lm-mark{
  position:relative;
  width:min(64vw, 560px);
  margin:0 auto;
  filter:drop-shadow(0 0 50px rgba(201,164,92,.25));
  animation:lmArrive 2s cubic-bezier(.19,1,.22,1) both;
}
.lm-mark:before{
  content:"";
  position:absolute; left:50%; top:50%; width:150%; height:150%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(201,164,92,.16) 0%, rgba(201,164,92,.05) 42%, transparent 72%);
  z-index:-1;
  pointer-events:none;
}
@keyframes lmArrive{
  from{ opacity:0; transform:scale(.9) translateY(10px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.hero .brand{ animation:heroFadeUp 1.6s ease both; animation-delay:1.5s; }
.hero .rule{ animation:heroFadeUp 1.6s ease both; animation-delay:1.9s; }
.hero .sub{ animation:heroFadeUp 1.6s ease both; animation-delay:2.15s; }
.hero .claim{ animation:heroFadeUp 1.6s ease both; animation-delay:2.5s; }
.hero .discover{ animation:heroFadeUp 1.6s ease both; animation-delay:3s; }
@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .lm-mark, .hero .brand, .hero .rule, .hero .sub, .hero .claim, .hero .discover{ animation:none !important; opacity:1 !important; transform:none !important; }
}
.lm-mark img{ width:100%; display:block; }
.lm-mark .tint{
  position:absolute; inset:0;
  background:linear-gradient(135deg,#f1e2b0 0%,#c9a45c 38%,#fff8e4 54%,#a8813f 74%,#7c5c2a 100%);
  mix-blend-mode:color;
  opacity:.9;
  pointer-events:none;
}
.lm-mark .breathe{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 62%, rgba(255,240,205,.55), transparent 55%);
  mix-blend-mode:screen;
  opacity:0;
  animation:lmBreathe 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes lmBreathe{
  0%,100%{ opacity:0; }
  50%{ opacity:.55; }
}

/* wordmark becomes secondary: smaller, quieter, set apart by more space */
.hero .brand{
  font-size:clamp(15px,2vw,26px);
  letter-spacing:.5em;
  color:#cabfa9;
  margin:3.2em 0 0;
  text-shadow:none;
  font-weight:400;
}
.hero .rule{ margin:18px auto 16px; opacity:.6; }
.hero .sub{ color:#9d968a; }
.hero .claim{ color:#d8c093; opacity:.9; }

/* ---------------------------------------------------------------
   2) DIE SECHS WELTEN — je ein eigenes Gefühl
   --------------------------------------------------------------- */

/* ---- Fine Art: Museum. Stille. Zurückhaltung. ---- */
.world.fine{
  background:#050505;
  border-color:rgba(255,255,255,.10);
}
.world.fine:before{ filter:grayscale(1) brightness(.24) contrast(.95); opacity:.5; transition:1.4s ease; }
.world.fine:after{ background:none; opacity:0; }
.world.fine:hover:before{ filter:grayscale(.7) brightness(.34); transform:none; }
.world.fine .world-mark{ width:74px; height:74px; border:1px solid rgba(255,255,255,.5); }
.world.fine .world-mark img{ width:22px; max-height:22px; filter:grayscale(1) brightness(2.4); opacity:.9; }
.world.fine:hover .world-mark{ transform:scale(1.12); box-shadow:0 0 30px rgba(255,255,255,.18); }
.world.fine h2{ font-weight:400; letter-spacing:.4em; font-size:15px; color:#eee; }
.world.fine p{ font-style:italic; font-family:Georgia,serif; color:#9c9890; letter-spacing:.02em; }
.world.fine .enter{ opacity:0; transition:.5s; font-size:10px; letter-spacing:.32em; }
.world.fine:hover .enter{ opacity:1; }

/* ---- Architecture: Blueprint. Kühl. Präzise. ---- */
.world.arch{ background:#04070c; border-color:rgba(47,147,255,.25); }
.world.arch:before{ filter:grayscale(.3) brightness(.4) hue-rotate(-6deg); }
.world.arch:after{ background:
  repeating-linear-gradient(0deg, rgba(47,147,255,.08) 0 1px, transparent 1px 34px),
  repeating-linear-gradient(90deg, rgba(47,147,255,.08) 0 1px, transparent 1px 34px);
  opacity:.5; mix-blend-mode:screen; }
.world.arch .corner{ position:absolute; width:16px; height:16px; border:1.4px solid var(--blue); opacity:.85; z-index:2; transition:.5s; }
.world.arch .corner.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.world.arch .corner.tr{ top:14px; right:14px; border-left:0; border-bottom:0; }
.world.arch .corner.bl{ bottom:14px; left:14px; border-right:0; border-top:0; }
.world.arch .corner.br{ bottom:14px; right:14px; border-left:0; border-top:0; }
.world.arch .world-mark{ border-radius:4px; width:64px; height:64px; }
.world.arch .world-mark img{ width:26px; max-height:26px; filter:brightness(0) saturate(100%) invert(53%) sepia(97%) saturate(2000%) hue-rotate(180deg); opacity:.9; }
.world.arch h2{ font-weight:600; letter-spacing:.12em; font-size:19px; }
.world.arch:hover{ box-shadow:0 20px 90px rgba(0,0,0,.6), 0 0 44px rgba(47,147,255,.28); }
.world.arch:hover .corner{ width:22px; height:22px; box-shadow:0 0 12px rgba(47,147,255,.6); }

/* ---- Street: laut, roh, filmisch. ---- */
.world.street{ background:#0a0303; border:1px solid rgba(237,47,53,.3); transform:rotate(-0.6deg); }
.world.street:before{ filter:grayscale(.15) brightness(.4) contrast(1.35) saturate(1.3); }
.world.street:after{ background:linear-gradient(115deg, transparent 40%, rgba(237,47,53,.16) 50%, transparent 60%); opacity:.9; mix-blend-mode:screen; }
.world.street .scratch{ position:absolute; top:0; left:22%; width:2px; height:100%; background:rgba(237,47,53,.55); transform:skewX(-12deg); opacity:.55; z-index:1; }
.world.street .scratch.two{ left:71%; width:1px; opacity:.35; }
.world.street .world-mark{ border-radius:2px; width:60px; height:60px; border-color:#ed2f35; transform:rotate(-3deg); }
.world.street .world-mark img{ width:24px; max-height:24px; filter:brightness(0) saturate(100%) invert(29%) sepia(89%) saturate(4000%) hue-rotate(340deg); }
.world.street h2{ font-family:Arial,Helvetica,sans-serif; font-weight:800; font-style:italic; letter-spacing:.02em; font-size:21px; }
.world.street p{ font-family:Arial,Helvetica,sans-serif; text-transform:uppercase; font-size:11px; letter-spacing:.18em; }
.world.street:hover{ transform:rotate(0deg) translateY(-8px) scale(1.015); }

/* ---- Limited Editions: gold foil, invitation. ---- */
.world.limited{ background:#070502; border:1px solid rgba(199,161,91,.35); box-shadow:inset 0 0 0 1px rgba(199,161,91,.12); }
.world.limited:before{ filter:grayscale(1) brightness(.3) sepia(.4); }
.world.limited .foil{ position:absolute; inset:8px; border:1px solid rgba(199,161,91,.35); pointer-events:none; z-index:1; transition:.5s; }
.world.limited .world-mark{ width:64px; height:64px; }
.world.limited .world-mark img{ width:24px; max-height:24px; filter:brightness(0) saturate(100%) invert(70%) sepia(35%) saturate(600%) hue-rotate(0deg); }
.world.limited h2{ font-family:Georgia,serif; font-style:italic; font-weight:400; letter-spacing:.14em; }
.world.limited:hover .foil{ inset:5px; box-shadow:0 0 24px rgba(199,161,91,.25); }

/* ---- Zeit für Wahrnehmung: fern, still, nächtlich. ---- */
.world.zeit{ background:#020202; border-color:rgba(212,173,98,.2); }
.world.zeit:before{ filter:grayscale(1) brightness(.18); opacity:.6; }
.world.zeit .roman-watermark{ position:absolute; inset:0; display:grid; place-items:center; font-family:Georgia,serif; font-size:120px; color:rgba(212,173,98,.05); letter-spacing:.05em; pointer-events:none; z-index:1; }
.world.zeit .world-mark{ border-style:dashed; width:60px; height:60px; }
.world.zeit .world-mark img{ width:20px; max-height:20px; opacity:.7; filter:grayscale(1) brightness(1.8); }
.world.zeit h2{ font-weight:400; letter-spacing:.3em; font-size:15px; }
.world.zeit p{ font-style:italic; font-family:Georgia,serif; }
.world.zeit:hover:before{ opacity:.8; }
.world.zeit:hover{ box-shadow:0 20px 90px rgba(0,0,0,.65), 0 0 50px rgba(212,173,98,.14); }

/* ---- About: persönlich, warm. ---- */
.world.about{ background:#060504; }
.world.about:before{ filter:grayscale(.5) brightness(.4) sepia(.15); }
.world.about p{ font-style:italic; }

@media (max-width:900px){
  .world.street{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .lm-mark .breathe{ animation:none; opacity:.25; }
}