/* Baustellen-Seite (Felix 04.11.: „superschöne Build in Progress Seite“). Das F. ist aus Blöcken gebaut, also wird es hier
   gebaut: Hilfslinien über das ganze Blatt, die Blöcke setzen sich, einer bleibt in Arbeit, der Punkt ist die Lampe.
   Geometrie aus brand/logo. Ohne Animation steht der fertige Zustand da. Farben aus leitstand.css. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-variable-latin.woff2?v=2f7ea45b") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: oklch(0.185 0.007 265);
  --line: oklch(0.26 0.009 265);
  --ink: oklch(0.95 0.004 265);
  --dim: oklch(0.83 0.006 265);
  --faint: oklch(0.71 0.008 265);
  --lampe: oklch(0.83 0.145 78);
  --lampe-ink: oklch(0.2 0.02 78);
  --aus: cubic-bezier(0.23, 1, 0.32, 1);
  --rand: clamp(1.25rem, 4vw, 3.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { color: var(--ink); font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }

.bau {
  position: relative; min-height: 100svh; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  gap: clamp(2.5rem, 7svh, 4rem);
  padding: max(clamp(3rem, 9svh, 5rem), env(safe-area-inset-top)) max(var(--rand), env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(var(--rand), env(safe-area-inset-left));
}

.marke { position: relative; order: 1; height: clamp(8rem, 25svh, 15rem); aspect-ratio: 242 / 230; max-width: 100%; justify-self: start; }
.marke__f { display: block; width: 100%; height: 100%; overflow: visible; }
.text { order: 2; position: relative; z-index: 1; display: grid; gap: 1.25rem; align-content: start; }
.recht { order: 3; position: relative; z-index: 1; align-self: end; display: flex; gap: 1.5rem; }

.name { margin: 0; font-size: 1rem; font-weight: 650; color: var(--dim); }
h1 { margin: 0; font-size: clamp(3.25rem, 14.5vw, 7.5rem); line-height: 0.95; font-weight: 850; letter-spacing: -0.035em; font-stretch: 100%; text-wrap: balance; }
h1 em { font-style: normal; color: var(--lampe); }
.zeile { margin: 0; max-width: 34ch; font-size: clamp(1.125rem, 2.2vw, 1.375rem); line-height: 1.45; color: var(--dim); text-wrap: pretty; }

.wege { margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.knopf { display: inline-flex; align-items: center; min-height: 52px; padding: 0 1.625rem; background: var(--lampe); color: var(--lampe-ink); font-weight: 750; font-size: 1.0625rem; text-decoration: none; transition: filter 0.15s ease-out, transform 0.1s ease-out; }
.mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 1.0625rem; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-color: var(--faint); }
.recht a { display: inline-flex; align-items: center; min-height: 44px; color: var(--faint); font-size: 0.9375rem; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: color 0.15s ease-out, text-decoration-color 0.15s ease-out; }
a:focus-visible { outline: 2px solid var(--lampe); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { filter: brightness(1.07); }
  .mail:hover { text-decoration-color: var(--lampe); }
  .recht a:hover { color: var(--ink); text-decoration-color: currentColor; }
}
.knopf:active { transform: scale(0.98); }

/* Das Logo */
.hilfslinien line { stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.block { fill: var(--ink); }
.punkt { fill: var(--lampe); }
.arbeit__rand { fill: none; stroke: var(--lampe); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.arbeit__fuellung { fill: var(--ink); opacity: 0.22; transform-box: fill-box; transform-origin: 50% 100%; }

/* Die Lampe in HDR: heller als alles andere auf der Seite. Ohne HDR-Bildschirm bleibt sie unsichtbar, dann leuchtet der Block darunter. */
.lampe { display: none; position: absolute; left: calc(192 / 242 * 100%); top: calc(180 / 230 * 100%); width: calc(50 / 242 * 100%); height: calc(50 / 230 * 100%); border-radius: 12%; pointer-events: none; }
@media (dynamic-range: high) { .lampe { display: block; } }

@media (min-width: 900px) {
  .bau { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; column-gap: clamp(2rem, 5vw, 6rem); row-gap: 2rem; }
  .text { grid-column: 1; grid-row: 1; order: 0; }
  .marke { grid-column: 2; grid-row: 1; order: 0; justify-self: center; height: min(56svh, 34vw); }
  .recht { grid-column: 1 / -1; grid-row: 2; order: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hilfslinien .waag, .hilfslinien .senk { animation: linie 1.1s var(--aus) backwards; transform-box: view-box; transform-origin: 50% 50%; }
  .hilfslinien .waag { --von: scaleX(0); }
  .hilfslinien .senk { --von: scaleY(0); animation-delay: 0.12s; }
  .block { transform-box: fill-box; animation: setzen 0.6s var(--aus) backwards; }
  .b1 { animation-delay: 0.65s; }
  .b2 { animation-delay: 0.85s; }
  .b3 { animation-delay: 1.02s; }
  .arbeit { animation: auf 0.5s ease-out 1.2s backwards; }
  .arbeit__rand { animation: wandern 2.4s linear infinite; }
  .arbeit__fuellung { animation: bauen 5s var(--aus) 1.6s infinite; }
  .punkt { transform-box: fill-box; transform-origin: 50% 50%; animation: anschalten 0.7s var(--aus) 1.45s backwards, lampe 3.6s ease-in-out 2.2s infinite; }
  .lampe { animation: anschalten 0.7s var(--aus) 1.45s backwards, einschalten 1.2s ease-out 1.45s backwards, atmen 3.6s ease-in-out 2.65s infinite alternate; }
  .text > * { animation: auf-text 0.7s var(--aus) backwards; }
  .name { animation-delay: 0.15s !important; }
  h1 { animation-delay: 0.25s !important; }
  .zeile { animation-delay: 0.4s !important; }
  .wege { animation-delay: 0.5s !important; }
}
@keyframes linie { from { transform: var(--von); opacity: 0; } }
@keyframes setzen { from { transform: translateY(14px); opacity: 0; } }
@keyframes auf { from { opacity: 0; } }
@keyframes auf-text { from { transform: translateY(8px); opacity: 0; } }
@keyframes wandern { to { stroke-dashoffset: -24; } }
@keyframes bauen { 0% { transform: scaleY(0); } 62%, 88% { transform: scaleY(1); opacity: 0.22; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes anschalten { from { transform: scale(0.72); opacity: 0; } }
@keyframes einschalten { from { dynamic-range-limit: standard; } }
@keyframes atmen { from { dynamic-range-limit: no-limit; } to { dynamic-range-limit: constrained; } }
@keyframes lampe { 0%, 100% { filter: drop-shadow(0 0 0 oklch(0.83 0.145 78 / 0)); } 50% { filter: drop-shadow(0 0 14px oklch(0.83 0.145 78 / 0.55)); } }