/* Guet gfunde · Seite «Kunden finden» unter der Bühne (zu assets/js/seite-kunden.js)
   Abbildungen wie aus einem Konstruktionsheft, ein geschwärztes Rezept, Bürozeiten live.
   Eine Hausbewegung: cubic-bezier(.2,.7,.2,1). Amber ist Licht und Signal. */

/* ------------------------------------------------------------ Abbildungen in den Karten */
.abb { display: block; width: 100%; max-width: 320px; height: auto; margin: -.25rem 0 1.1rem; overflow: visible; }
.abb__z { fill: none; stroke: var(--navy-900); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ws-haus, ease) calc(var(--d, 0s) + .35s); }
.abb__z--amber { stroke: var(--amber-500); stroke-width: 2.2; }
.card.is-in .abb__z, .no-js .abb__z { stroke-dashoffset: 0; }
.abb__strich { fill: none; stroke: rgba(10, 10, 10,.3); stroke-width: 1.2; stroke-dasharray: 3 4; }
.abb__knoten { fill: var(--paper); stroke: var(--navy-900); stroke-width: 1.6; }
.abb__amber { fill: var(--amber-500); }
.abb__leer { fill: none; stroke: rgba(10, 10, 10,.4); stroke-width: 1.2; stroke-dasharray: 3 3; }
.abb__balken { fill: var(--navy-900); transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 1.1s var(--ws-haus, ease) calc(var(--d, 0s) + .5s); }
.abb__balken--amber { fill: var(--amber-500); transition-delay: calc(var(--d, 0s) + 1.1s); }
.card.is-in .abb__balken, .no-js .abb__balken { transform: none; }
.abb__text, .abb__cap { font: 500 9.5px var(--ws-mono, ui-monospace, monospace); letter-spacing: .06em; fill: var(--slate-500); text-transform: uppercase; }
.abb__cap { fill: var(--accent-text); letter-spacing: .1em; }

/* ------------------------------------------------------------ Geschwärztes Rezept */
.kd-akte { position: relative; margin-top: 2rem; padding: 1.1rem 1.25rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); box-shadow: var(--shadow-sm); font-family: var(--ws-mono, ui-monospace, monospace); overflow: hidden; }
.kd-akte::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(10, 10, 10,.05) 23px 24px); }
.kd-akte__kopf { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; margin-bottom: .9rem;
  border-bottom: 1px dashed rgba(10, 10, 10,.18); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-600); }
.kd-akte__kopf span:last-child { color: var(--accent-text); }
.kd-akte__zeilen { position: relative; display: grid; gap: .55rem; }
.kd-akte__zeilen i { display: block; width: var(--w); height: .95rem; border-radius: 2px; background: var(--navy-900); }
.kd-akte.is-offen .kd-akte__zeilen i { animation: kdHeben .7s var(--ws-haus, ease) calc(var(--k) * 60ms) 1; }
@keyframes kdHeben { 35% { transform: translateY(-5px) rotate(-.6deg); } 60% { transform: translateY(1px); } }
.kd-akte__stempel { position: absolute; left: 50%; top: 50%; padding: .35em .8em; border: 2px solid var(--amber-600); border-radius: 0;
  color: var(--accent-text); background: rgba(255,255,255,.9); font: 700 .8rem/1 var(--ws-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(1.7); pointer-events: none; }
.kd-akte.is-offen .kd-akte__stempel { animation: kdStempel .5s var(--ws-haus, ease) .45s both; }
@keyframes kdStempel { from { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(1.7); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); } }
.kd-akte__klar { position: relative; margin-top: 1rem; font: 400 var(--fs-sm)/1.55 var(--font-sans); color: var(--fg); }
.kd-akte__knopf { position: relative; margin-top: 1rem; padding: .55rem .9rem; border: 1px solid var(--navy-900); border-radius: 0; background: transparent;
  color: var(--navy-900); font: 600 .75rem/1 var(--ws-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: background .3s var(--ws-haus, ease), color .3s var(--ws-haus, ease); }
.kd-akte__knopf:hover { background: var(--navy-900); color: #fff; }
.kd-akte__knopf:focus-visible { outline: 2px solid var(--navy-900); outline-offset: 3px; }

/* ------------------------------------------------------------ Bürozeiten live */
.erreichbar__led { position: relative; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border-radius: 50%; vertical-align: .12em;
  border: 1.5px solid var(--slate-500); }
.erreichbar__led.is-offen { border-color: var(--amber-500); background: var(--amber-500); }
.erreichbar__led.is-offen::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--amber-500);
  animation: erreichbarPuls 2.4s var(--ws-haus, ease) infinite; }
@keyframes erreichbarPuls { from { transform: scale(1); opacity: .9; } 60%, to { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .abb__z { transition: none; stroke-dashoffset: 0; }
  .abb__balken { transition: none; transform: none; }
  .kd-akte.is-offen .kd-akte__zeilen i { animation: none; }
  .kd-akte.is-offen .kd-akte__stempel { animation: none; opacity: 1; transform: translate(-50%, -50%) rotate(-7deg); }
  .erreichbar__led.is-offen::after { animation: none; display: none; }
}