/* Michler IT · Startseite „Kommt bald“ – ergänzt site.css aus dem Website-Entwurf.
   Bewegung (CD § 8): Logo-Sequenz · der Leuchtturm dreht · zeigt der Strahl nach vorn, erleuchtet er die ganze Seite,
   und „Kommt bald“ wird aus dem Entwurf (SOFT/WONK) in 480 ms zur geprüften Form. Reduziert = Standbild, Text steht sofort. */

/* Kopf liegt durchsichtig über dem Leuchtfeuer */
.page-wip .top{position:absolute;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent}
.ctl{display:inline-flex;align-items:center;gap:7px}
.ctl .ico{width:16px;height:16px;flex:none}
.ctl .ico-sun{display:none}
.ctl[aria-pressed="true"] .ico-moon{display:none}
.ctl[aria-pressed="true"] .ico-sun{display:block}
@media (max-width:599px){.ctl .ctl-label{display:none}.ctl{padding:7px 8px}.lang .lg-short{display:none}}

/* ---------- Leuchtfeuer: Inline-SVG (hell/dunkel), so groß und so platziert wie zuvor das Hintergrundbild ---------- */
.beacon{--lh-pct:100;--lh-bpx:0;--lh-bvw:-16.25;position:relative;min-height:100vh;min-height:100svh;overflow:clip;background:var(--bg)}
.lh{position:absolute;left:0;bottom:calc(var(--lh-bpx) * 1px + var(--lh-bvw) * 1vw);width:calc(var(--lh-pct) * 1%);height:auto;max-width:none;display:block;pointer-events:none}
.lh-dark{display:none}
html[data-theme="dark"] .lh-light{display:none}
html[data-theme="dark"] .lh-dark{display:block}
@media (prefers-color-scheme:dark){html[data-theme="auto"] .lh-light{display:none}html[data-theme="auto"] .lh-dark{display:block}}
/* reduziert: das SVG zeigt seine Standbild-Gruppe (auch beim Schalter „Bewegung“, nicht nur per Systemeinstellung) */
html[data-motion="reduced"] .lh .moving{display:none}
html[data-motion="reduced"] .lh .still{display:inline}
/* hochkant: Turm größer, Wasserlinie knapp über dem unteren Rand (Telefon: über Safaris Leiste) */
@media (orientation:portrait){.beacon{--lh-pct:210;--lh-bpx:32;--lh-bvw:-45.6}}
@media (orientation:portrait) and (max-width:719px){.beacon{--lh-bpx:64}}

.beacon-text{position:absolute;left:44%;right:var(--outer);top:31%}
.beacon-text .label{margin-bottom:.8rem}
.beacon .hero-h{font-size:clamp(56px,9.5vw,148px);margin:0;white-space:nowrap}
@media (orientation:portrait){.beacon-text{left:var(--outer);top:calc(var(--header) + 16svh)}}
@media (orientation:portrait) and (max-width:719px){.beacon .hero-h{font-size:clamp(52px,15vw,84px)}}

.beacon-down{position:absolute;right:var(--outer);bottom:calc(5.5vw + 18px);display:inline-flex;align-items:center;gap:8px;
  font-family:"Recursive",ui-monospace,monospace;--mono:1;font-size:13px;--wght:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:8px 0;min-height:44px}
.beacon-down svg{width:18px;height:18px}
.beacon-down:hover{color:var(--fg)}
@media (orientation:portrait){.beacon-down{bottom:calc(32px + 16px)}}
@media (orientation:portrait) and (max-width:719px){.beacon-down{bottom:calc(64px + 14px)}}

/* Erscheinen: ohne JavaScript steht alles. Mit JavaScript ist die Seite leer, bis der Strahl vorn ist (oder jemand scrollt,
   tippt, eine Taste drückt; spätestens nach 7 s). Dann eins nach dem anderen: Kopf · „Kommt bald“ · Hinweis · Kontakt. */
@keyframes lit{from{opacity:0;--soft:100;--wonk:1;transform:translateY(.06em)}to{opacity:1;--soft:0;--wonk:0;transform:none}}
@keyframes show{from{opacity:0}to{opacity:1}}
html.js .page-wip :is(.brand-word,.controls,.beacon-text,.beacon-down,.reach,.foot){opacity:0}
html.js .page-wip .brand .mark{visibility:hidden}
html.js.lit .page-wip .brand .mark{visibility:visible}
html.js.lit .page-wip .brand-word{animation:show var(--t2) var(--ease) both}
html.js.lit .page-wip .controls{animation:show var(--t2) var(--ease) var(--t3) both}
html.js.lit .page-wip .beacon-text{animation:lit var(--t3) var(--ease) var(--t2) both}
html.js.lit .page-wip .beacon-down{animation:show var(--t2) var(--ease) calc(var(--t3) + var(--t3)) both}
html.js.lit .page-wip :is(.reach,.foot){animation:show var(--t3) var(--ease) var(--t3) both}
html.js.lit-now .page-wip :is(.brand-word,.controls,.beacon-text,.beacon-down,.reach,.foot){animation:none;opacity:1}
html[data-motion="reduced"] .page-wip :is(.brand-word,.controls,.beacon-text,.beacon-down,.reach,.foot){animation:none!important;opacity:1!important}
html[data-motion="reduced"] .page-wip .brand .mark{visibility:visible}
@media (prefers-reduced-motion:reduce){
  html[data-motion="auto"] .page-wip :is(.brand-word,.controls,.beacon-text,.beacon-down,.reach,.foot){animation:none!important;opacity:1!important}
  html[data-motion="auto"] .page-wip .brand .mark{visibility:visible}
}

/* Streulicht: liegt unter dem Inhalt, reicht über das Bild hinaus nach unten (im Bild selbst leuchtet das SVG) */
.page-wip{position:relative}
.page-wip>main,.page-wip>.foot{position:relative;z-index:1}
.page-wip>.top{z-index:2}
.scatter{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;opacity:0}
@media print{.scatter{display:none}}

/* ---------- Kontakt ---------- */
.reach{padding-top:clamp(72px,11vw,140px);padding-bottom:clamp(72px,10vw,128px)}
.reach .h1{max-width:20ch}
.reach .cta-row{align-items:center;gap:12px 24px;margin-top:2rem}
.reach-mail{font-size:15px;--wght:450;text-decoration-color:var(--line)}
@media print{.lh{display:none}.beacon{min-height:0}.beacon-text{position:static}.beacon-down{display:none}}