/* ==========================================================
   Beratung -- Seitenmodul ueber troncom.css.
   Traegt nur, was es allein hier gibt: die Eckdaten des Erst-
   gespraechs in der Buehne, Landkarte und Kalenderblatt der
   zwei Formen, die Gebaeude im Zuschnitt, die Tagesordnung,
   die vier Ergebnisblaetter und das Berichtsblatt der Aussage.
   ========================================================== */

/* ---------- Buehne: unten die Eckdaten des Erstgespraechs ---------- */
.bt-buehne { --bild-pos: 50% 28%; }
.bt-buehne h1 { max-width: 15ch; }
.bt-erst {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 72px); align-items: end;
  margin-top: clamp(44px, 7vh, 88px); padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--rule-strong);
}
.bt-erst h2 { margin-top: 14px; font-size: clamp(19px, 1.6vw, 23px); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.bt-erst p { margin-top: 8px; max-width: 58ch; font-size: clamp(14px, 1.1vw, 15px); line-height: 1.55; color: rgba(255,255,255,.72); }
.bt-erst-daten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bt-erst-daten > div { padding: 2px 0 2px clamp(14px, 1.4vw, 22px); border-left: 1px solid var(--rule); }
.bt-erst-daten dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; color: var(--text-3); }
.bt-erst-daten dd { margin-top: 10px; font-size: clamp(16px, 1.35vw, 20px); letter-spacing: -.02em; line-height: 1.25; hyphens: manual; }
@media (max-width: 900px) {
  .bt-erst { grid-template-columns: 1fr; }
  .bt-erst-daten > div:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) { .bt-buehne { --bild-pos: 64% 0%; } }

/* ---------- Leistung: zwei Formen als Karten ---------- */
.bt-formen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px); }
.bt-formen.fade-in { opacity: 1; transform: none; }
.bt-form {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(24px, 2.8vw, 40px);
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--z) * 140ms);
}
.bt-formen.visible .bt-form { opacity: 1; transform: none; }
.bt-form h3 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; }
.bt-form > p { max-width: 52ch; margin-top: 14px; font-size: clamp(15px, 1.15vw, 16px); line-height: 1.6; }
.bt-punkte { align-self: stretch; margin-top: auto; padding-top: clamp(26px, 3vw, 40px); }
.bt-punkte li {
  padding: 13px 0; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; line-height: 1.4;
  text-transform: uppercase; color: rgba(255,255,255,.84); hyphens: manual;
}
@media (max-width: 820px) { .bt-formen { grid-template-columns: 1fr; } }

/* Landkarte (laufend) und Kalenderblatt (abgeschlossen) */
.ob { width: 100%; height: auto; margin: clamp(22px, 2.6vw, 34px) 0 clamp(24px, 2.8vw, 36px); overflow: visible; }
.ob * { vector-effect: non-scaling-stroke; fill: none; }

.ob-rahmen  { stroke: rgba(255,255,255,.4); stroke-width: 1.2; }
.ob-hoehen path { stroke: rgba(255,255,255,.13); stroke-width: 1; }
.ob-raster line { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.ob-route   { stroke: rgba(255,255,255,.75); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ob-weiter  { stroke: url(#obFade); stroke-width: 1.6; }
.ob-punkte circle { fill: #000; stroke: rgba(255,255,255,.75); stroke-width: 1.3; }
.ob-ring    { stroke: #FFC46B; stroke-width: 1.3; }
.ob-kern    { fill: #FFC46B; }
.ob-start   { stroke: rgba(255,255,255,.6); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }

.ob-kopf    { stroke: rgba(255,255,255,.4); stroke-width: 1.2; }
.ob-oesen line { stroke: rgba(255,255,255,.5); stroke-width: 1.4; stroke-linecap: round; }
.ob-tag     { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.14); stroke-width: 1; }
.ob-tag.ist-markiert { fill: rgba(255,196,107,.9); stroke: #FFC46B; }
.ob-klammer { stroke: rgba(255,255,255,.45); stroke-width: 1.2; }

/* Eintritt: Umrisse zeichnen sich, dann erscheinen Punkte und Tage */
.ob-rahmen, .ob-kopf, .ob-route, .ob-weiter, .ob-klammer, .ob-start {
  stroke-dasharray: var(--len, 720); stroke-dashoffset: var(--len, 720);
  transition: stroke-dashoffset 1.3s cubic-bezier(.25,0,.3,1);
  transition-delay: calc(var(--z) * 180ms + 240ms);
}
.bt-formen.visible .ob-rahmen, .bt-formen.visible .ob-kopf, .bt-formen.visible .ob-route,
.bt-formen.visible .ob-weiter, .bt-formen.visible .ob-klammer, .bt-formen.visible .ob-start { stroke-dashoffset: 0; }

.ob-hoehen path, .ob-raster line, .ob-oesen line {
  opacity: 0; transition: opacity 1s ease-out;
  transition-delay: calc(var(--z) * 180ms + 520ms);
}
.bt-formen.visible .ob-hoehen path, .bt-formen.visible .ob-raster line, .bt-formen.visible .ob-oesen line { opacity: 1; }

.ob-punkte circle, .ob-tag {
  opacity: 0; transition: opacity .5s ease-out;
  transition-delay: calc(var(--z) * 180ms + var(--k, 0) * 70ms + 620ms);
}
.bt-formen.visible .ob-punkte circle, .bt-formen.visible .ob-tag { opacity: 1; }

.ob-hier { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center;
  transition: opacity .5s ease-out, transform .6s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--z) * 180ms + 1s); }
.bt-formen.visible .ob-hier { opacity: 1; transform: none; }
/* Der Standort pulst weiter -- die Beratung laeuft */
.bt-formen.visible .ob-ring { animation: obPuls 3.6s ease-out 1.8s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes obPuls { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.1); } }

/* ---------- Zuschnitt: drei Groessenordnungen ---------- */
.bt-stufen.fade-in { opacity: 1; transform: none; }
.bt-stufe {
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--g) * 140ms);
}
.bt-stufen.visible .bt-stufe { opacity: 1; transform: none; }
.bt-stufe .kicker { margin-bottom: 0; }
.bt-stufe h3 { margin-top: 12px; font-size: clamp(26px, 2.4vw, 36px); font-weight: 400; letter-spacing: -.04em; line-height: 1.05; }
.bt-stufe dl { margin-top: clamp(12px, 1.4vw, 18px); }
.bt-stufe dl > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; align-items: baseline; padding: 11px 0; }
.bt-stufe dl > div + div { border-top: 1px solid var(--rule); }
.bt-stufe dl > div:last-child { padding-bottom: 0; }
.bt-stufe dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.bt-stufe dd { font-size: clamp(14px, 1.1vw, 15px); line-height: 1.45; color: rgba(255,255,255,.88); }
.bt-fuss { margin-top: clamp(22px, 2.6vw, 32px); max-width: 62ch; font-size: clamp(14px, 1.1vw, 15px); line-height: 1.6; color: var(--text-3); }
@media (max-width: 900px) { .bt-stufen { grid-template-columns: 1fr; } }
/* Mittelbreit: Titel links, Eckdaten rechts -- sonst stuende die Karte halb leer */
@media (min-width: 621px) and (max-width: 900px) {
  .bt-stufe { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(24px, 5vw, 48px); align-items: end; }
  .bt-stufe > * { grid-column: 1; }
  .bt-stufe > dl { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}

/* Gebaeude: je groesser das Haus, desto hoeher */
.hs { width: clamp(64px, 6vw, 92px); height: auto; margin-bottom: clamp(24px, 2.8vw, 36px); overflow: visible; }
.hs * { vector-effect: non-scaling-stroke; }
.hs-koerper { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.4); stroke-width: 1.2; }
.hs-fenster { fill: rgba(255,255,255,.3); stroke: none; }
.hs-boden   { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.hs-koerper, .hs-boden {
  stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300);
  transition: stroke-dashoffset 1.1s cubic-bezier(.25,0,.3,1);
  transition-delay: calc(var(--g) * 160ms + 200ms);
}
.bt-stufen.visible .hs-koerper, .bt-stufen.visible .hs-boden { stroke-dashoffset: 0; }
.hs-fenster { opacity: 0; transition: opacity .45s ease-out;
  transition-delay: calc(var(--g) * 160ms + var(--k) * 60ms + 640ms); }
.bt-stufen.visible .hs-fenster { opacity: 1; }

/* Balken zeigt, wie der Umfang mitwaechst */
.zs-bar { display: block; height: 2px; margin-top: clamp(18px, 2vw, 24px); background: rgba(255,255,255,.12); }
.zs-bar i {
  display: block; height: 100%; width: var(--f); background: #FFC46B;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s cubic-bezier(.22,.61,.28,1);
  transition-delay: calc(var(--g) * 160ms + 420ms);
}
.bt-stufen.visible .zs-bar i { transform: scaleX(1); }

/* ---------- Ablauf: zwei Tage nebeneinander, Uhrzeit in der Nummernspalte ---------- */
.bt-tage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 96px); align-items: start; }
.bt-tag + .bt-tag { transition-delay: .15s; }
.bt-tag-kopf { margin-bottom: clamp(20px, 2.2vw, 30px); }
.bt-tag-kopf h3 { margin-top: 14px; font-size: clamp(28px, 2.6vw, 40px); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; }
.bt-tag .schritt { grid-template-columns: clamp(48px, 4.4vw, 64px) minmax(0, 1fr); column-gap: clamp(14px, 1.8vw, 28px); row-gap: 8px; }
.bt-tag .schritt h4 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; letter-spacing: -.025em; line-height: 1.2; }
.bt-tag .schritt p { grid-column: 2; max-width: 50ch; }
@media (max-width: 900px) { .bt-tage { grid-template-columns: 1fr; } }

/* ---------- Ergebnis: vier Dokumente ---------- */
.bt-dokumente.fade-in { opacity: 1; transform: none; }
.bt-dok {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d) * 120ms);
}
.bt-dokumente.visible .bt-dok { opacity: 1; transform: none; }
.bt-dok-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: clamp(22px, 2.4vw, 32px); }
.dk-nr { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; line-height: 1; color: var(--text-3); }

.dk-fig { width: clamp(52px, 4.8vw, 70px); height: auto; overflow: visible; }
.dk-fig * { vector-effect: non-scaling-stroke; fill: none; }
.dk-blatt { stroke: rgba(255,255,255,.45); stroke-width: 1.2; stroke-linejoin: round; }
.dk-ecke  { stroke: rgba(255,255,255,.32); stroke-width: 1; }
.dk-inhalt line, .dk-inhalt path, .dk-inhalt rect { stroke: rgba(255,255,255,.42); stroke-width: 1; }
.dk-inhalt circle { fill: rgba(255,255,255,.5); stroke: none; }
/* Haken erledigt = Mint; doppelte Klasse, sonst gewinnt ".dk-inhalt path" */
.dk-inhalt .dk-haken { stroke: #7CF5B0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.dk-blatt, .dk-ecke {
  stroke-dasharray: var(--len, 260); stroke-dashoffset: var(--len, 260);
  transition: stroke-dashoffset 1s cubic-bezier(.25,0,.3,1);
  transition-delay: calc(var(--d) * 130ms + 220ms);
}
.bt-dokumente.visible .dk-blatt, .bt-dokumente.visible .dk-ecke { stroke-dashoffset: 0; }
.dk-inhalt { opacity: 0; transition: opacity .7s ease-out; transition-delay: calc(var(--d) * 130ms + 620ms); }
.bt-dokumente.visible .dk-inhalt { opacity: 1; }

/* ---------- Aussage: das Berichtsblatt ueber dem Satz ---------- */
.bt-aussage .br-fig { width: clamp(112px, 10vw, 150px); margin: 0 auto clamp(36px, 4vw, 56px); }
.br-fig { height: auto; overflow: visible; }
.br-fig * { vector-effect: non-scaling-stroke; fill: none; }
.br-blatt  { stroke: rgba(255,255,255,.42); stroke-width: 1.3; stroke-linejoin: round; }
.br-ecke   { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.br-kopf rect { fill: rgba(255,255,255,.24); }
.br-saeule { fill: rgba(255,255,255,.16); stroke: rgba(255,255,255,.3); stroke-width: 1; }
.br-basis  { stroke: rgba(255,255,255,.3); stroke-width: 1; }
.br-feld   { stroke: rgba(255,255,255,.22); stroke-width: 1; }
.br-kasten { stroke: rgba(255,255,255,.42); stroke-width: 1.1; }
.br-zeile  { stroke: rgba(255,255,255,.18); stroke-width: 3; stroke-linecap: round; }
.br-haken  { stroke: #7CF5B0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.br-blatt, .br-ecke {
  stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 1.6s cubic-bezier(.25,0,.3,1) .2s;
}
.bt-aussage.visible .br-blatt, .bt-aussage.visible .br-ecke { stroke-dashoffset: 0; }
.br-kopf rect, .br-basis, .br-feld, .br-kasten, .br-zeile { opacity: 0; transition: opacity .8s ease-out .9s; }
.bt-aussage.visible .br-kopf rect, .bt-aussage.visible .br-basis,
.bt-aussage.visible .br-feld, .bt-aussage.visible .br-kasten, .bt-aussage.visible .br-zeile { opacity: 1; }
.br-saeule { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom center;
  transition: transform .7s cubic-bezier(.22,.61,.28,1);
  transition-delay: calc(var(--k) * 90ms + 1s); }
.bt-aussage.visible .br-saeule { transform: scaleY(1); }
.br-haken { stroke-dasharray: var(--len, 40); stroke-dashoffset: var(--len, 40);
  transition: stroke-dashoffset .5s ease-out 1.9s; }
.bt-aussage.visible .br-haken { stroke-dashoffset: 0; }

/* ---------- Baender ---------- */
/* Titel unten ueber dem Schreibtisch, damit die Gesichter frei bleiben */
.bt-band-team { --bild-pos: 50% 10%; }
.bt-band-team .band-text { justify-content: flex-end; padding-bottom: clamp(44px, 7vw, 110px); }
/* Die hellen Fenster brauchen mehr Abdunkelung, sonst traegt der Titel nicht */
.bt-band-buero img { filter: saturate(.8) brightness(.42); }
@media (max-width: 700px) {
  .bt-band-team { --bild-pos: 40% 30%; }
  .bt-band-buero { --bild-pos: 28% 50%; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .bt-form, .bt-stufe, .bt-dok { transition: none; opacity: 1; transform: none; }
  .ob-rahmen, .ob-kopf, .ob-route, .ob-weiter, .ob-klammer, .ob-start,
  .hs-koerper, .hs-boden, .dk-blatt, .dk-ecke,
  .br-blatt, .br-ecke, .br-haken { transition: none; stroke-dashoffset: 0; }
  .ob-hoehen path, .ob-raster line, .ob-oesen line, .ob-punkte circle, .ob-tag, .ob-hier,
  .hs-fenster, .dk-inhalt,
  .br-kopf rect, .br-basis, .br-feld, .br-kasten, .br-zeile { transition: none; opacity: 1; transform: none; }
  .br-saeule, .zs-bar i { transition: none; transform: none; }
  .bt-formen.visible .ob-ring { animation: none; }
}