/* ========================================================================== AKM · tool.html — nur Screenshot-Platzhalter für die kommende Tool-UI -------------------------------------------------------------------------- Wird im NACH sections.css geladen. Nutzt ausschließlich Tokens aus tokens.css (niemals rohe Hex-Werte) und ergänzt base/frames/sections nur, ohne bestehende Regeln zu überschreiben. Zweck: Solange es keine echten Tool-Screenshots gibt, zeigen wir bewusst LEERE, klar beschriftete Frames in .frame-Anmutung — kein Fake-Bild. Sobald die Shots vorliegen, ersetzt ein den .tool-shot. ========================================================================== */ /* Galerie aus einem oder zwei Platzhalter-Frames (responsiv, einspaltig ab schmal) */ .tool-shots{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:clamp(var(--sp-8), 5vw, var(--sp-16)); margin-top:var(--sp-12); } /* Leerer Frame-Body — steht anstelle des späteren .frame__shot. aspect-ratio reserviert exakt den Platz des kommenden Screenshots (1512×982). */ .tool-shot{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-3); aspect-ratio:1512 / 982; min-height:200px; /* Floor, damit Label + Hinweis immer Platz haben */ padding:var(--sp-8); text-align:center; border-radius:0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); background: radial-gradient(120% 130% at 50% 0%, var(--accent-faint), transparent 60%), var(--bg); } /* Feiner Hinweis unter dem Label (das Label selbst nutzt .eyebrow inkl. Netz-Knoten) */ .tool-shot__hint{ max-width:34ch; font-size:.9rem; line-height:1.5; color:var(--text-dim); }