/* ============================================================================ Hasse Consulting · Tools-Übersicht (tools.css) ---------------------------------------------------------------------------- Seiten-lokal: nur Tools-Spezifika für /tools/index.html. Farben/Typo/ Komponenten kommen aus tokens.css + base.css (beide bleiben unangetastet). Verlinkt in NACH base.css. Keine Farb-Literale, nur Tokens. Keine eigenen @keyframes (Animation kommt aus den geteilten .reveal/.lift). ============================================================================ */ /* „In Vorbereitung"-Rahmung im Hero */ .tools-prep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--fs-small); max-width: 64ch; } .tools-prep > span:last-child { color: var(--text-muted); } /* Rechner-Raster: 1 → 2 (≥640px) → 3 (≥980px) Spalten */ .tools-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 640px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } } /* Kachel = base .card .feature-card .lift; hier nur Kachel-Spezifika */ .tool-tile { position: relative; } .tool-tile__tag { display: inline-block; margin-bottom: var(--space-2); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-strong); } /* Beta-Marker oben rechts (überlagert die Kachel-Polster-Ecke) */ .tool-tile__beta { position: absolute; top: var(--space-4); right: var(--space-4); } /* „Rechner öffnen" wandert beim Hover von Blau auf Orange (Markenakzent) */ .tool-tile .feature-card__more { transition: color var(--transition-fast); } .tool-tile:hover .feature-card__more, .tool-tile:focus-visible .feature-card__more { color: var(--accent-strong); } /* Icon-Badge wandert beim Hover dezent auf den Markenakzent (wie Home-Hub-Kacheln) */ .tool-tile .icon-badge { transition: background var(--transition), color var(--transition); } .tool-tile:hover .icon-badge, .tool-tile:focus-within .icon-badge { background: var(--accent-soft); color: var(--accent-strong); } /* §34d-Hinweisblock */ .tools-legal { font-size: var(--fs-small); max-width: 82ch; } /* KI-Klonschutz-Hinweis im Footer */ .site-footer__note { margin: var(--space-4) 0 0; color: rgba(231,236,244,0.5); font-size: var(--fs-small); line-height: 1.6; max-width: 92ch; }