/* ==========================================================================
   Guet gfunde · Über uns (ueber-uns.html), technische Schicht
   - Das Zeichen: Schalter «Konstruktion» zeigt die Geometrie der Bildmarke
     (Achsen, Kreise, Masse, Bézier Griffe), Schalter «Pfade» die nackten Vektorpfade.
     Alle Masse stammen aus assets/img/logo-mark.svg, umgerechnet auf die Kachel 40 × 40.
   - Teamplätze mit Zuschnittmarken, bis echte Porträts da sind
   Hausbewegung cubic-bezier(.2,.7,.2,1).
   ========================================================================== */
.zeichen__split { align-items: center; }
.zeichen__text h2 { max-width: 15ch; }
.zeichen__text .lead { max-width: 36ch; }
.zeichen__schalter { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.schalter {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: .5rem .65rem .5rem .6rem;
  border: 1px solid rgba(10, 10, 10,.22); border-radius: 0; background: #fff; color: var(--navy-900);
  font: 600 var(--fs-sm)/1 var(--font-sans); cursor: pointer; transition: border-color .4s var(--ws-haus);
}
.schalter:hover { border-color: var(--navy-900); }
.schalter:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }
.schalter__bahn { position: relative; width: 34px; height: 20px; border-radius: 0; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(10, 10, 10,.18); transition: background .45s var(--ws-haus); }
.schalter__bahn i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--navy-900); transition: translate .45s var(--ws-haus), background .45s var(--ws-haus); }
.schalter[aria-pressed="true"] .schalter__bahn { background: var(--navy-900); }
.schalter[aria-pressed="true"] .schalter__bahn i { translate: 14px 0; background: var(--amber-500); box-shadow: 0 0 8px rgba(227, 6, 19,.8); }
.schalter kbd, .zeichen kbd { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .35em; border-radius: 0;
  border: 1px solid rgba(10, 10, 10,.28); border-bottom-width: 2px; background: var(--paper); font: 600 .72rem/1 var(--ws-mono); color: var(--navy-900); }
@media (hover: none) { .schalter kbd { display: none; } .schalter { padding-right: 1rem; } }
.zeichen__mass { margin-top: 1.1rem; font: 500 .72rem/1.5 var(--ws-mono); letter-spacing: .06em; color: var(--accent-text); text-transform: uppercase; }

/* Die Zeichenfläche: Papier mit feinem Raster wie ein Blatt im Gestaltungshandbuch */
.zeichen__bild { position: relative; margin: 0; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background-color: #fff;
  background-image: linear-gradient(rgba(10, 10, 10,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 10, 10,.05) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center; padding: clamp(.75rem, 2vw, 1.5rem); }
.zeichen__svg { display: block; width: 100%; height: auto; overflow: visible; }

.kn-kachel { fill: var(--accent-display); }
.kn-g { fill: none; stroke: #fff; stroke-width: 3.6; }
.kn-nadel { fill: #fff; fill-rule: evenodd; }
.kn-kachel, .kn-g, .kn-nadel { transition: fill .6s var(--ws-haus), stroke .6s var(--ws-haus), stroke-width .6s var(--ws-haus); }

/* Konstruktion: zunächst unsichtbar, dann der Reihe nach */
.kn > * { opacity: 0; transition: opacity .5s var(--ws-haus), stroke-dashoffset 1s var(--ws-haus); transition-delay: calc(var(--i, 0) * 55ms); }
.is-konstruktion .kn > * { opacity: 1; }
.kn-achse { fill: none; stroke: var(--navy-900); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.kn-kreis { fill: none; stroke: var(--amber-400); stroke-width: .16; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.kn-kreis--fein { stroke-opacity: .55; stroke-width: .12; }
.is-konstruktion .kn-kreis { stroke-dashoffset: 0; }
.kn-kreuz, .kn-griff, .kn-leiter { fill: none; stroke: var(--amber-400); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kn-leiter { stroke: rgba(200, 5, 15,.7); }
.kn-griffpunkt { fill: var(--amber-400); }
.kn-masslinie { fill: none; stroke: rgba(10, 10, 10,.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kn-masslinie--innen { stroke: var(--amber-600); stroke-width: 1.5; }
.kn-zahl { font: 500 1.55px/1 var(--ws-mono); fill: var(--accent-text); letter-spacing: .02em; }
.kn-zahl--innen { fill: var(--amber-400); }
.kn-legende { font: 500 1.35px/1 var(--ws-mono); fill: rgba(10, 10, 10,.6); letter-spacing: .14em; }

/* Pfade: die nackten Vektoren, wie die Pfadansicht im Zeichenprogramm */
.kn-anker rect { fill: #fff; stroke: var(--navy-900); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s var(--ws-haus); }
.is-pfade .kn-anker rect { opacity: 1; }
.is-pfade .kn-kachel { fill: transparent; stroke: var(--navy-900); stroke-width: .12; }
.is-pfade .kn-g { stroke: var(--navy-900); stroke-width: .12; }
.is-pfade .kn-nadel { fill: transparent; stroke: var(--navy-900); stroke-width: .12; }
.is-pfade .kn-zahl--innen { fill: var(--accent-text); }
.is-pfade .kn-masslinie--innen { stroke: var(--amber-600); }
.is-pfade .kn-kreis, .is-pfade .kn-kreuz, .is-pfade .kn-griff { stroke: var(--amber-600); }
.is-pfade .kn-griffpunkt { fill: var(--amber-600); }

@media (max-width: 860px) {
  /* Mobil: Schalter direkt unter dem Zeichen, damit man Ursache und Wirkung zusammen sieht */
  .zeichen__split { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .zeichen__text { display: contents; }
  .zeichen__text > * { order: 0; }
  .zeichen__bild { order: 1; margin-top: 1.75rem; }
  .zeichen__schalter { order: 2; margin-top: 1rem; }
  .zeichen__mass { order: 3; }
  .zeichen__bild { padding: .25rem; }
  .kn-zahl { font-size: 1.95px; }
  .kn-legende { font-size: 1.55px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .kn > *, .kn-anker rect, .kn-kachel, .kn-g, .kn-nadel { transition: none; }
}

/* Team: Zuschnittmarken, bis die Porträts da sind */
.grid--team .person__photo {
  --m: rgba(227, 6, 19,.55);
  background-image:
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m)),
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m)),
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m)),
    linear-gradient(var(--m), var(--m)), linear-gradient(var(--m), var(--m));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position: 10px 10px, 10px 10px, calc(100% - 10px) 10px, calc(100% - 10px) 10px,
    10px calc(100% - 10px), 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
  background-repeat: no-repeat;
}
.grid--team .person__photo::after {
  content: "Porträt folgt · 4:5"; position: absolute; left: 0; right: 0; bottom: 1.1rem; text-align: center;
  font: 500 .64rem/1 var(--ws-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(10, 10, 10,.5); font-style: normal;
}
@media (max-width: 640px) { .grid--team .person__photo::after { content: "Porträt folgt"; bottom: .8rem; font-size: .58rem; } }
/* Echte Porträts: keine Zuschnittmarken und kein Hinweis «Porträt folgt» */
.grid--team .person__photo.hat-bild { background: var(--paper-2); }
.grid--team .person__photo.hat-bild::after { content: none; }
.grid--team .person__photo.hat-bild img { object-position: center 18%; }