/* ==========================================================================
   Die Agentur (ueber.html) — Ausbaustufe 07.09.2026
   Eigenes Stylesheet, nur von ueber.html geladen. style.css bleibt unberuehrt,
   deshalb kein neuer Build-Stempel. Alles unter body.page-agentur.
   Bewegung: CSS-Scroll-Timelines wo moeglich, kleines Skript nur fuer
   Wortaufbau, Ziffernbuehne und Lichtpunkt. Alles faellt sauber zurueck und
   ruht bei prefers-reduced-motion.
   ========================================================================== */

/* ---- 1 · Kopfflaeche wie auf den anderen Seiten (Taliza 07.09.), nur der Wortaufbau der H1 ist neu ---- */
.page-agentur .page-hero .display { max-width: 16ch; }
/* ---- 2 · Text, der sich beim Lesen fuellt --------------------------------
   Jedes Wort ist ein Span mit eigener view()-Timeline: Es wechselt von Stein
   zu Tinte, sobald es die Lesezone erreicht. Ohne Unterstuetzung: einfach Tinte. */
.page-agentur .scrub .sw { color: var(--ink); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-agentur .scrub .sw {
      color: var(--stone-light, #C9C4BB);
      animation: td-fill linear both; animation-timeline: view(block);
      animation-range: entry 70% entry 100%;
    }
    @keyframes td-fill { to { color: var(--ink); } }
    .page-agentur .section--ink .scrub .sw { animation-name: td-fill-light; color: rgba(255,255,255,.28); }
    @keyframes td-fill-light { to { color: #fff; } }
  }
}
.page-agentur .scrub { --stone-light: #C9C4BB; }

/* ---- 3 · Portraet mit Tiefe: Parallaxe und Vorhang -------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-agentur .portrait-frame { clip-path: inset(0 0 0 0); animation: td-curtain linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
    @keyframes td-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
    .page-agentur .portrait-frame img { animation: td-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; scale: 1.12; }
    @keyframes td-parallax { from { translate: 0 -5%; } to { translate: 0 5%; } }
  }
}

/* ---- 5 · Sieben Punkte: Leitschiene, die sich beim Lesen fuellt ---------- */
.page-agentur .dl--craft { border-top: 0; }   /* der schwarze Strich ueber der Liste ist weg (Taliza 07.09.) */
.page-agentur .craft-body { position: relative; padding-left: 1.4rem; }
.page-agentur .craft-body::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--mist, #E4DFD6); }
.page-agentur .craft-body::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--sand-deep); transform: scaleY(0); transform-origin: top; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-agentur .craft-body::after { animation: td-rail linear both; animation-timeline: view(); animation-range: entry 40% exit 60%; }
    @keyframes td-rail { to { transform: scaleY(1); } }
  }
}
@media (max-width: 620px) { .page-agentur .craft-body { padding-left: 1rem; } }

/* ---- 6 · Vier Zusagen als Karten mit Lichtpunkt und leichter Neigung ---- */
.page-agentur .vows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.page-agentur .vow {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 2.2rem); background: var(--paper);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s ease, border-color .35s ease;
}
.page-agentur .vow::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(194,168,131,.22), transparent 60%);
}
.page-agentur .vow:hover { border-color: var(--sand); }
.page-agentur .vow:hover::before { opacity: 1; }
.page-agentur .vow .vn { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.5rem; color: var(--sand-deep); display: block; margin-bottom: .6rem; }
.page-agentur .vow h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.page-agentur .vow p { color: var(--ink-soft); font-size: .96rem; text-align: left; hyphens: manual; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-agentur .vow { animation: td-vow linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
    @keyframes td-vow { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  }
}
@media (max-width: 700px) { .page-agentur .vows { grid-template-columns: 1fr; } .page-agentur .vow { transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .page-agentur .vow { transform: none !important; transition: none; } }

/* ---- 7 · Standort als Radius-Grafik: Ringe, die sich zeichnen ---------- */
.page-agentur .radius { position: relative; width: min(100%, 480px); margin-inline: auto; aspect-ratio: 1; }
.page-agentur .radius svg { width: 100%; height: 100%; display: block; overflow: visible; }
.page-agentur .radius circle.ring { fill: none; stroke: rgba(194,168,131,.55); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1; }
.page-agentur .radius .ring-2 { stroke: rgba(194,168,131,.38); }
.page-agentur .radius .ring-3 { stroke: rgba(194,168,131,.24); stroke-dasharray: .01 .015; }
.page-agentur .radius .core { fill: var(--sand); }
.page-agentur .radius .pulse { fill: none; stroke: var(--sand); stroke-width: 1; opacity: 0; transform-origin: center; transform-box: fill-box; }
.page-agentur .radius text { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; fill: rgba(255,255,255,.7); }
.page-agentur .radius text.core-label { fill: #fff; font-size: 12px; letter-spacing: .12em; }
.page-agentur .radius .lbl { opacity: 0; }
.page-agentur .radius.in circle.ring { animation: td-ring 1.6s cubic-bezier(.22,.61,.36,1) forwards; }
.page-agentur .radius.in .ring-2 { animation-delay: .25s; }
.page-agentur .radius.in .ring-3 { animation-delay: .5s; }
.page-agentur .radius.in .lbl { animation: td-soft .8s ease forwards; }
.page-agentur .radius.in .lbl-1 { animation-delay: .9s; } .page-agentur .radius.in .lbl-2 { animation-delay: 1.15s; } .page-agentur .radius.in .lbl-3 { animation-delay: 1.4s; }
.page-agentur .radius.in .pulse { animation: td-pulse 3.2s ease-out 1.2s infinite; }
@keyframes td-ring { to { stroke-dashoffset: 0; } }
@keyframes td-pulse { 0% { transform: scale(.2); opacity: .9; } 80% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .page-agentur .radius circle.ring { stroke-dashoffset: 0; animation: none; }
  .page-agentur .radius .lbl { opacity: 1; animation: none; }
  .page-agentur .radius .pulse { display: none; }
}

/* ---- 8 · Leistung: Abschnitte unterhalb der Buehne erst rendern, wenn sie
   in die Naehe kommen. Die Hoehenangabe verhindert Sprungeffekte. ------- */
.page-agentur main > .section { content-visibility: auto; contain-intrinsic-size: auto 640px; }