/* mykeyz.ch — Bauplan-Piktogramme für Tutorials (Konzept-Map-Methode im mykeyz-Look)
   v0.001 · 01.11.2026 · Celine. Dunkel, helle Linien, Rot als Akzent.
   Bausteine: figure.bauplan > .bp-kopf, .bp-fluss (Knoten, Pfeile, Gruppen), .bp-notiz, .bp-achtung, .bp-teile
   Symbole: ein verstecktes <svg class="pk-sprite"> mit <symbol id="pk-…">, Aufruf <svg class="pk"><use href="#pk-…"/></svg> */

.pk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tut .bauplan {
  display: block;
  margin: 1.1rem 0 1.4rem; padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--border, rgba(255,255,255,0.08)); border-radius: 14px;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--bg2, #13131a);
}
.tut .bauplan > * { min-width: 0; }
.tut .bp-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; margin: 0 0 0.8rem; }
.tut .bp-tag {
  font-family: 'Share Tech Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent, #e03030); border: 1px solid var(--accent, #e03030); border-radius: 6px; padding: 0.1rem 0.45rem;
}
.tut .bp-titel { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text, #f0eee8); }
.tut .bp-ziel { flex-basis: 100%; margin: 0; font-size: 0.93rem; color: var(--muted, #8a8794); }

/* Fluss: Knoten mit Pfeilen. Breit nebeneinander, schmal untereinander. */
.tut .bp-fluss { display: flex; align-items: stretch; gap: 0; margin: 0.2rem 0 0.6rem; }
.tut .bp-fluss + .bp-fluss { margin-top: 0.9rem; }
.tut .bp-knoten {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0.6rem 0.35rem 0.55rem; border: 1px solid rgba(240,238,232,0.22); border-radius: 12px;
  background: var(--surface, #1a1a24); color: var(--text, #f0eee8);
}
.tut .bp-knoten.akzent { border-color: var(--accent, #e03030); box-shadow: 0 0 0 1px rgba(224,48,48,0.25) inset; }
.tut .bp-knoten .pk { width: 46px; height: 46px; margin-bottom: 0.3rem; color: var(--text, #f0eee8); }
.tut .bp-knoten.akzent .pk { color: var(--accent, #e03030); }
.tut .bp-name { font-weight: 600; font-size: 0.9rem; line-height: 1.25; overflow-wrap: anywhere; }
.tut .bp-name code, .tut .bp-klein code { font-size: 0.85em; }
.tut .bp-klein { display: block; margin-top: 0.2rem; font-size: 0.78rem; line-height: 1.3; color: var(--muted, #8a8794); overflow-wrap: anywhere; }
.tut .bp-nr {
  display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  font-family: 'Share Tech Mono', monospace; font-size: 0.75rem; margin-bottom: 0.25rem;
  border: 1px solid rgba(240,238,232,0.35); color: var(--muted, #8a8794);
}
.tut .bp-knoten.akzent .bp-nr { border-color: var(--accent, #e03030); color: var(--accent, #e03030); }

.tut .bp-pfeil {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 1.7rem; padding: 0 0.15rem; color: var(--muted, #8a8794);
}
.tut .bp-pfeil::before { content: '→'; font-size: 1.25rem; line-height: 1; color: rgba(240,238,232,0.6); }
.tut .bp-pfeil.beide::before { content: '⇄'; }
.tut .bp-pfeil code { font-size: 0.7rem; margin-top: 0.15rem; white-space: nowrap; }

/* Gruppe: mehrere Ziele hinter einem Pfeil (Abzweigung, Geräte, Seiten) */
.tut .bp-gruppe {
  flex: 1.6 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.45rem; border: 1px dashed rgba(240,238,232,0.28); border-radius: 12px;
}
.tut .bp-gruppe > .bp-gname { font-size: 0.75rem; color: var(--muted, #8a8794); text-align: center; }
.tut .bp-gruppe .bp-knoten { flex-direction: row; text-align: left; gap: 0.55rem; padding: 0.4rem 0.55rem; align-items: center; }
.tut .bp-gruppe .bp-knoten .pk { width: 34px; height: 34px; margin: 0; flex: 0 0 auto; }
.tut .bp-gruppe .bp-knoten > span { min-width: 0; }

.tut .bp-notiz { margin: 0.4rem 0 0.2rem; font-size: 0.9rem; color: var(--text, #f0eee8); border-left: 3px solid rgba(240,238,232,0.25); padding-left: 0.7rem; }
.tut .bp-achtung {
  display: flex; gap: 0.6rem; align-items: center; margin: 0.6rem 0 0.2rem; padding: 0.5rem 0.7rem;
  border: 1px solid rgba(250,204,21,0.45); border-radius: 10px; background: rgba(250,204,21,0.06); font-size: 0.9rem;
}
.tut .bp-achtung .pk { width: 30px; height: 30px; flex: 0 0 auto; color: #facc15; }

/* Teile-Liste wie bei einer Montageanleitung, mit Häkchen zum Abhaken (nur Ansicht, wird nicht gespeichert) */
.tut .bp-teile { list-style: none; margin: 0.7rem 0 0; padding: 0.6rem 0 0; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.tut .bp-teile::before { content: attr(data-label); flex-basis: 100%; font-family: 'Share Tech Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #8a8794); }
.tut .bp-teile li { margin: 0; font-size: 0.85rem; padding: 0.2rem 0.55rem 0.2rem 0.4rem; border: 1px solid rgba(240,238,232,0.18); border-radius: 999px; }
.tut .bp-teile li::before { content: '☐'; margin-right: 0.35rem; color: var(--muted, #8a8794); }

/* Achtung-Schild auch in den bestehenden Warn-Boxen dieser Seite */
.tut .zbox.warn > h3:first-child::before, .tut .zbox.warn > h4:first-child::before {
  content: ''; display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.45rem; vertical-align: -0.2em; background: #facc15;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M24 6 44 41H4Z'/%3E%3Cpath d='M24 19v11M24 35v.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M24 6 44 41H4Z'/%3E%3Cpath d='M24 19v11M24 35v.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 640px) {
  .tut .bp-fluss { flex-direction: column; }
  .tut .bp-knoten { flex-direction: row; text-align: left; gap: 0.6rem; padding: 0.45rem 0.6rem; align-items: center; }
  .tut .bp-knoten .pk { width: 36px; height: 36px; margin: 0; flex: 0 0 auto; }
  .tut .bp-knoten .bp-nr { margin: 0; flex: 0 0 auto; }
  .tut .bp-knoten > span { min-width: 0; }
  .tut .bp-pfeil { flex-direction: row; gap: 0.4rem; min-height: 1.6rem; padding: 0.1rem 0; }
  .tut .bp-pfeil::before { content: '↓'; }
  .tut .bp-pfeil.beide::before { content: '⇅'; }
  .tut .bp-pfeil code { margin: 0; }
}
@media print {
  .tut .bauplan { background: none; border-color: #999; }
  .tut .bp-knoten, .tut .bp-gruppe .bp-knoten { background: none; color: #000; }
  .tut .bp-knoten .pk { color: #000; }
}
.tut .bp-gruppe > .bp-nr { align-self: center; margin: 0; }
@media (max-width: 640px) { .tut .bp-gruppe > .bp-nr { align-self: flex-start; } }