/* =========================================================================
   QUADRONET Layout - Bereichszeichen (29.10.2026)
   -------------------------------------------------------------------------
   Vier Zeichen der Kernbereiche, Partial Zeichen/Bereich.html. Eingebunden
   per f:asset.css nur auf Seiten mit Zeichen. Ungeschichtet, alles unter
   .zeichen. Farbe = currentColor des Umfelds; Markenquadrat --akzent
   (Standard Orange #FF8800).
   Bewegung nur waehrend .laeuft (setzt zeichen.js fuer 2,7 s).
   ========================================================================= */

.zeichen { display: block; overflow: visible; }
.zeichen .z-l,
.zeichen .z-h { fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; }
.zeichen .z-l { stroke-width: 1.5; }
.zeichen .z-h { stroke-width: .75; }
.zeichen .z-fein { stroke-dasharray: 1.5 2; opacity: .6; }
.zeichen .z-marke { fill: var(--akzent, #FF8800); }
.zeichen .z-voll { fill: currentColor; }
.zeichen .z-puls { opacity: 0; }

/* Drehpunkte */
.zeichen .z-dreh,
.zeichen .z-pegel,
.zeichen .z-schichten path { transform-box: view-box; }
.zeichen .z-dreh { transform-origin: 48px 48px; }
.zeichen .z-halter,
.zeichen .z-ping { transform-box: fill-box; transform-origin: center; }
.zeichen .z-ping { opacity: .55; }

/* 03 Objektiv: Fokusring (die Blende laeuft per SMIL im Zeichen selbst) */
.zeichen.laeuft .z-fokus { animation: z-fokus 2.4s cubic-bezier(.5, 0, .2, 1); }
@keyframes z-fokus { 45% { transform: rotate(-28deg); } }

/* 02 Peilung: ein Umlauf, Treffer am Ziel */
.zeichen.laeuft .z-strahl { animation: z-strahl 2.4s linear; }
@keyframes z-strahl { to { transform: rotate(360deg); } }
.zeichen.laeuft .z-ping { animation: z-ping .9s 2.2s ease-out; }
@keyframes z-ping { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.zeichen--onlinemarketing.laeuft .z-halter { animation: z-treffer .5s 2.2s; }

/* 01 Eisberg-Fenster: Seite zeichnet sich, Schichten tauchen auf */
.zeichen.laeuft .z-zug { stroke-dasharray: 1; animation: z-zug .7s cubic-bezier(.5, 0, .2, 1) both; }
.zeichen.laeuft .z-zug.z-n1 { animation-delay: .22s; }
.zeichen.laeuft .z-zug.z-n2 { animation-delay: .44s; }
@keyframes z-zug { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.zeichen.laeuft .z-schichten path { animation: z-schicht .7s .7s cubic-bezier(.2, .7, .2, 1) both; }
.zeichen.laeuft .z-schichten .z-n1 { animation-delay: .88s; }
.zeichen.laeuft .z-schichten .z-n2 { animation-delay: 1.06s; }
.zeichen.laeuft .z-schichten .z-n3 { animation-delay: 1.24s; }
@keyframes z-schicht { from { transform: translateY(5px); opacity: 0; } to { transform: none; opacity: 1; } }
.zeichen.laeuft .z-pegel { animation: z-pegel 1.2s .5s ease-in-out 2; }
@keyframes z-pegel { 50% { transform: translateY(1.4px); } }
.zeichen--webdesign.laeuft .z-halter { animation: z-treffer .5s .9s; }

/* 04 Ablauf: Datensatz laeuft durch (SMIL), Ergebnis schlaegt an */
.zeichen.laeuft .z-puls { animation: z-sicht 2.2s; }
@keyframes z-sicht { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
.zeichen--programmierung.laeuft .z-halter { animation: z-treffer .55s 2.05s; }

@keyframes z-treffer { 50% { transform: scale(1.28); } }

@media (prefers-reduced-motion: reduce) {
  .zeichen.laeuft * { animation: none !important; }
}
@media (forced-colors: active) {
  .zeichen .z-marke { fill: CanvasText; }
}