/* ============================================================
   Enoxo Sites — Werkstatt-FX v3.0
   Lädt NACH sites.css und schärft drei Dinge:
     1. Display-Schrift Bricolage Grotesque (Familien-Bezug zum Planner)
     2. Drei Parallax-Ebenen: Bauraster · Maßband · Staub
     3. Terminring im Hero + kräftigere Scroll-Reveals
   Palette bleibt Werkstatt (Sand/Petrol/Amber) — bewusst nicht
   das Ultramarin des Planners: Zielgruppe ist Handwerk, nicht SaaS.
   Alles unter prefers-reduced-motion abgesichert.
   ============================================================ */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2')}

:root{
  --display:'Bricolage Grotesque','Exo 2',sans-serif;
  --px-dur:.62s;
  --px-ease:cubic-bezier(.22,.68,.24,1);
}

/* ── 1 · Display-Typografie ─────────────────────────────── */
h1,h2,h3,.h2,.hero h1{
  font-family:var(--display);
  letter-spacing:-.022em;
  font-weight:800;
}
h3{font-weight:700;letter-spacing:-.014em}
.hero h1{line-height:1.08}
.h2{line-height:1.12}
/* Werkstatt-Schild: Sektionsnummern als gefräste Marke */
.eyebrow{font-weight:700}

/* ── 2 · Parallax-Ebenen ────────────────────────────────── */
.px{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  contain:layout paint;
}
.px-l{position:absolute;left:-4%;right:-4%;top:-18%;bottom:-18%;will-change:transform}

/* Ebene 1 — Bauraster, bewegt sich am langsamsten */
.px-grid{
  opacity:.42;
  background-image:
    linear-gradient(rgba(11,122,102,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,122,102,.075) 1px,transparent 1px);
  background-size:56px 56px;
}
/* Ebene 2 — Maßband an beiden Rändern, mittlere Geschwindigkeit */
.px-rule{
  opacity:.5;
  background-image:
    repeating-linear-gradient(180deg,rgba(178,117,0,.42) 0 2px,transparent 2px 46px),
    repeating-linear-gradient(180deg,rgba(178,117,0,.42) 0 2px,transparent 2px 46px);
  background-size:22px 100%,22px 100%;
  background-position:left top,right top;
  background-repeat:repeat-y,repeat-y;
}
/* Ebene 3 — Sägestaub, am schnellsten */
.px-dust{
  opacity:.5;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(32,49,46,.20) 0 1.6px,transparent 2px),
    radial-gradient(circle at 78% 42%,rgba(178,117,0,.26) 0 1.4px,transparent 2px),
    radial-gradient(circle at 33% 71%,rgba(32,49,46,.16) 0 1.2px,transparent 2px),
    radial-gradient(circle at 61% 88%,rgba(11,122,102,.20) 0 1.5px,transparent 2px),
    radial-gradient(circle at 91% 12%,rgba(32,49,46,.14) 0 1.1px,transparent 2px);
  background-size:340px 300px;
}

/* Inhalt liegt über den Ebenen; Flächen werden leicht durchlässig,
   damit das Raster überall mitläuft statt nur in Lücken. */
body>header,body>section,body>footer,body>main,body>nav,body>div:not(.px){position:relative;z-index:1}
.hero{background:rgba(250,247,239,.80)}
.sec:nth-of-type(even){background:rgba(250,247,239,.78)}

/* Das Hero hatte ein eigenes Bauraster (52px). Es laeuft jetzt in der
   Parallax-Ebene mit 56px — zwei Raster uebereinander wuerden beim
   Scrollen gegeneinander wandern, deshalb faellt das alte weg. */
.hero::before{display:none}

/* ── 3 · Signature: Terminring ──────────────────────────── */
.tr{
  display:flex;align-items:center;gap:20px;
  padding:16px 20px 16px 16px;margin-top:26px;
  border:1px solid var(--line);border-radius:var(--r);
  background:
    linear-gradient(180deg,rgba(246,236,212,.72),rgba(255,253,248,.92) 62%);
  box-shadow:var(--shadow-s);
  max-width:520px;
}
.tr-dial{flex:0 0 auto;width:118px;height:118px;display:block}
.tr-track{fill:none;stroke:var(--line);stroke-width:6}
/* Umfang bei r=47 ist 295.3 — die Haelfte davon ist der Korridor Woche 2 bis 4 */
.tr-arc{
  fill:none;stroke:var(--amber-strong);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:147.65 295.3;stroke-dashoffset:147.65;
  animation:trSweep 1.15s .35s var(--px-ease) forwards;
}
.tr-tick{stroke:var(--ink2);stroke-width:1.4;opacity:.42}
.tr-num{
  font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:500;
  fill:var(--ink2);opacity:.62;
}
.tr-date{
  font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:500;
  fill:var(--ink);letter-spacing:-.02em;
}
.tr-year{font-family:'JetBrains Mono',monospace;font-size:9px;fill:var(--ink2);opacity:.7}
.tr-body{min-width:0}
.tr-kicker{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--petrol);
  margin-bottom:5px;
}
.tr-line{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.32;margin-bottom:6px}
.tr-line b{font-family:var(--display);font-weight:800}
.tr-note{font-size:12.5px;color:var(--muted2);line-height:1.45}

@keyframes trSweep{to{stroke-dashoffset:0}}

/* Sicherheitsnetz: laeuft kein JS, bleibt alles sichtbar statt opacity:0 */
html:not(.js) .reveal,html:not(.js) .hin,html:not(.js) .rv{opacity:1;transform:none;animation:none}

/* ── 4 · Scroll-Reveals mit Richtung ────────────────────── */
.rv{opacity:0;transition:opacity var(--px-dur) var(--px-ease),transform var(--px-dur) var(--px-ease);transition-delay:calc(var(--i,0)*80ms)}
.rv-up{transform:translateY(22px)}
.rv-left{transform:translateX(-24px)}
.rv-right{transform:translateX(24px)}
.rv-scale{transform:scale(.965)}
.rv.in{opacity:1;transform:none}

/* Auch die bereits vorhandenen .reveal-Elemente bekommen die weichere Kurve */
.reveal{transition:opacity var(--px-dur) var(--px-ease),transform var(--px-dur) var(--px-ease)}

/* Karten heben sich beim Erscheinen leicht an */
.card.rv-up{transform:translateY(26px) scale(.985)}

/* ── 5 · Mobil ──────────────────────────────────────────── */
@media(max-width:760px){
  .tr{flex-direction:row;gap:14px;padding:14px;margin-top:22px}
  .tr-dial{width:92px;height:92px}
  .tr-date{font-size:16px}
  .px-rule{opacity:.34}
  .px-dust{opacity:.34}
}

/* ── 6 · Bewegung aus ───────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .px-l{transform:none!important}
  .tr-arc{animation:none;stroke-dashoffset:0}
  .rv{opacity:1;transform:none;transition:none}
  .rv-up,.rv-left,.rv-right,.rv-scale,.card.rv-up{transform:none}
}


/* ── v3.4 · Bauplan früher sichtbar ──────────────────────────────
   Die Sequenz lief bis --dl:3.7s, das Schweben startete bei 4.6s.
   In den ersten Sekunden — genau der Zeit, in der ein Besucher
   entscheidet — war die rechte Heroseite leer. Gleiche Animation,
   auf rund 38 % der Zeit gestaucht: letztes Element bei ~1,4 s. */
.bp-svg .bp-draw,
.bp-svg .bp-pop,
.bp-svg .bp-fade,
.bp-svg .bp-check{
  animation-delay: calc(var(--dl, 0s) * .38);
  animation-duration: calc(var(--t, .6s) * .72);
}
.bp-svg{ animation: bpFloat 7s 1.8s ease-in-out infinite; }


/* Verweis auf den Vorher/Nachher-Vergleich unter dem Bauplan */
.bp-hinweis{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:12.5px;
  letter-spacing:.04em; color:var(--amber); text-decoration:none;
}
.bp-hinweis span{ text-decoration:underline; text-underline-offset:3px; }
.bp-hinweis svg{ transition:transform .22s var(--px-ease); flex:none; }
.bp-hinweis:hover svg{ transform:translateY(3px); }

/* Terminring sitzt jetzt im Ablauf — dort volle Breite erlaubt */
#ablauf .tr{ margin-top:34px; }
@media (prefers-reduced-motion:reduce){
  .bp-hinweis svg{ transition:none; }
}

/* v3.4 · Ring liegt jetzt unter dem Falz: Sweep erst beim Sichtbarwerden,
   sonst läuft die Animation ab, während niemand hinsieht. */
.tr-arc{ animation: none; }
.tr.in .tr-arc{ animation: trSweep 1.15s .15s var(--px-ease) forwards; }
html:not(.js) .tr-arc{ stroke-dashoffset: 0; }
@media (prefers-reduced-motion:reduce){
  .tr.in .tr-arc{ animation: none; stroke-dashoffset: 0; }
}