/* Anleitung: Knopf unten rechts und Fenster mit Themen-Reitern (Startseite und alle Werkzeuge) */
.guide-fab { position: fixed; right: 20px; bottom: 20px; z-index: 20; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 10px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.guide-fab span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-text); color: var(--accent); font-weight: 800; }
dialog.guide { width: min(1040px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; }
dialog.guide[open] { display: flex; flex-direction: column; }
dialog.guide::backdrop { background: rgba(10, 14, 18, .5); }
.guide-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px; }
.guide-head h2 { margin: 0; font-size: 1.25rem; }
.guide-tabs { display: flex; gap: 6px; padding: 6px 18px 12px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.guide-tabs button { margin: 0; flex: none; padding: 7px 12px; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); font-weight: 600; font-size: 0.9rem; }
.guide-tabs button:hover { color: var(--text); filter: none; }
.guide-tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.guide-body { flex: 1; overflow: auto; padding: 18px; background: var(--bg); }
.guide-lead { margin: 0 0 16px; font-size: 1.05rem; font-weight: 600; }
.guide-lead a { margin-left: 6px; font-weight: 600; color: var(--accent); }
.guide kbd { display: inline-block; min-width: 1.7em; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; background: var(--panel); font-family: inherit; font-weight: 600; font-size: 0.8rem; line-height: 1.4; text-align: center; color: var(--text); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; counter-reset: step; }
.steps li { counter-increment: step; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.steps p::before { content: counter(step); position: absolute; left: 12px; top: 9px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: 0.85rem; }
.steps figure { margin: 0; height: 170px; display: flex; align-items: center; justify-content: center; background: #eef0f3; border-bottom: 1px solid var(--line); }
.steps figure img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.steps figure.art { background: var(--canvas); }
.steps figure.art svg { width: 82%; height: 92%; }
.steps p { position: relative; min-height: 46px; margin: 0; padding: 11px 12px 12px 48px; line-height: 1.45; font-size: 0.93rem; }
.c-red { color: #e5484d; }
.c-amber { color: #c98f00; }
.tips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); }
.tips span { font-size: 1.05rem; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 0.88rem; color: var(--muted); }
.legend .ln { display: inline-block; width: 28px; height: 0; vertical-align: middle; margin-right: 6px; border-top: 3px dashed #e5484d; }
.legend .ln.blue { border-top: 3px dotted #2f7fe0; }
/* SVG-Grafiken */
.g-paper { fill: #ffffff; stroke: var(--line); stroke-width: 1.5; }
.g-mark { fill: #1d232b; }
.g-frame { fill: none; stroke: #8a94a0; stroke-width: 1.2; stroke-dasharray: 4 3; }
.g-obj { fill: #2c5f8a; }
.g-cam { fill: var(--muted); }
.g-lens { fill: var(--panel); stroke: var(--text); stroke-width: 2; }
.g-arrow { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-mouse { fill: var(--panel); stroke: var(--muted); stroke-width: 2.5; }
.g-mouse-l { stroke: var(--muted); stroke-width: 2; fill: none; }
.g-hot { fill: var(--accent); }
/* Überblick */
.flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.flow-col { display: flex; flex-direction: column; gap: 8px; }
.flow-node { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; min-width: 170px; border-radius: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); text-align: left; font-weight: 400; }
button.flow-node:hover { border-color: var(--accent); filter: none; }
.flow-node small { color: var(--muted); }
.flow-node.end { min-width: 0; background: color-mix(in srgb, var(--accent) 14%, var(--panel)); border-color: var(--accent); }
.flow-arrow { display: flex; flex-direction: column; align-items: center; color: var(--muted); font-size: 0.8rem; min-width: 70px; }
.flow-arrow::after { content: ""; width: 100%; min-width: 60px; height: 14px; clip-path: polygon(0 40%, calc(100% - 12px) 40%, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, calc(100% - 12px) 60%, 0 60%); background: var(--accent); }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 16px; }
.mini { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.mini-ico { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; font-weight: 800; background: color-mix(in srgb, var(--accent) 14%, var(--panel)); color: var(--accent); }
.mini small { color: var(--muted); line-height: 1.35; }
.mini a { color: var(--accent); }
/* Bedienung */
.keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.keys li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.keys svg { width: 34px; height: 48px; }
.keys .kb { height: 48px; display: flex; align-items: center; gap: 4px; font-size: 1.1rem; }
.keys .kb kbd { font-size: 0.95rem; padding: 3px 9px; }
.keys small { color: var(--muted); font-size: 0.8rem; }
.fake-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 0.95rem; }
.fake-info { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font: italic 700 0.75rem/1 Georgia, serif; }
/* Deine Dateien */
.data-flow { display: grid; grid-template-columns: 1fr minmax(120px, 190px) 1fr; gap: 12px; align-items: center; }
.df-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); text-align: center; }
.df-box.you { border-color: var(--accent); }
.df-ico { font-size: 2rem; }
.df-items { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.df-items li { padding: 3px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 0.85rem; }
.df-tag { font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.df-tag.ok { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent); }
.df-mid { display: flex; flex-direction: column; gap: 14px; }
.df-arrow { display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; color: var(--muted); }
.df-arrow::after { content: ""; width: 100%; height: 14px; background: var(--accent); clip-path: polygon(0 40%, calc(100% - 12px) 40%, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, calc(100% - 12px) 60%, 0 60%); }
.df-arrow.left::after { transform: scaleX(-1); background: var(--muted); }
.no-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.no-list li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; font-size: 0.88rem; }
.no-list li::before { content: "⊘"; color: #e5484d; font-weight: 800; }
.guide-more { margin: 16px 0 0; font-size: 0.9rem; color: var(--muted); }
.guide-more a { color: var(--accent); font-weight: 600; }
/* Bild groß */
.guide-zoom { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 14, 18, .8); cursor: zoom-out; }
.guide-zoom[hidden] { display: none; }
.guide-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
@media (max-width: 640px) {
  .guide-fab { right: 14px; bottom: 14px; }
  dialog.guide { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .guide-body { padding: 14px; }
  .steps { grid-template-columns: 1fr; }
  .steps figure { height: 200px; }
  .flow { flex-direction: column; align-items: stretch; }
  .flow-node { min-width: 0; }
  .flow + .flow { border-top: 1px dashed var(--line); padding-top: 16px; }
  .flow-arrow { min-height: 44px; }
  .flow-arrow::after { width: 14px; min-width: 0; height: 26px; clip-path: polygon(40% 0, 60% 0, 60% calc(100% - 10px), 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px), 40% calc(100% - 10px)); }
  .data-flow { grid-template-columns: 1fr; }
  .df-mid { flex-direction: row; justify-content: center; gap: 28px; }
  .df-arrow { width: 110px; }
  .df-arrow.right::after { transform: rotate(90deg); width: 40px; }
  .df-arrow.left::after { transform: rotate(-90deg); width: 40px; }
}
.g-text { fill: var(--text); font: 700 15px system-ui, sans-serif; }
.g-line { fill: none; stroke: #2f7fe0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-line-old { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 5 4; stroke-linecap: round; stroke-linejoin: round; }
.g-dot { fill: #fff; stroke: #2f7fe0; stroke-width: 2; }
.c-yellow { color: #c98a00; }
a.flow-node { text-decoration: none; }
a.flow-node:hover { border-color: var(--accent); }
/* in den Werkzeugen: Hinweiszeile der letzten Ansicht nicht unter dem Knopf verstecken */
[data-pane=model] .pane-hint { padding-right: 150px; }
/* Werkstatt 0.47: Anleitungs-Knopf wie ein Etikett */
.guide-fab { border-radius: var(--radius-sm); background: var(--text); color: var(--bg); border: 1.5px solid var(--text); box-shadow: 3px 3px 0 var(--cta); padding: 8px 14px 8px 8px; }
.guide-fab:not(:disabled):hover { filter: none; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--cta); }
.guide-fab span { border-radius: 4px; background: var(--cta); color: var(--cta-text); font-family: var(--mono); }