/* ========================================================================== ClickUp Agentur — Ihlenfeldt Digital / automations.de Reskin v2 — support styles for the inline-styled markup in index.html. Fonts (Manrope + Outfit) are loaded via the Google Fonts in . ========================================================================== */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: #07030c; } img { max-width: 100%; } #kontakt, #preise { scroll-margin-top: 80px; } /* -------------------------------------------------------------------------- Hover states — ported from the design's `style-hover`. Inline styles win on specificity, so these overrides use !important. -------------------------------------------------------------------------- */ .hov-border:hover { border-color: rgba(255, 0, 247, 0.35) !important; } .hov-cta:hover { box-shadow: 0 0 36px rgba(232, 64, 200, 0.55) !important; transform: translateY(-1px) !important; } .hov-ghost:hover { background: rgba(255, 255, 255, 0.08) !important; } .hov-white:hover { color: #fff !important; } .hov-close:hover { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; } .hov-cta, .hov-border, .hov-ghost, .hov-white, .hov-close { transition: all 200ms cubic-bezier(.2, .8, .2, 1); } /* -------------------------------------------------------------------------- Form fields (Rückruf + Förder-Check) -------------------------------------------------------------------------- */ .cb-field { width: 100%; background: oklch(15% 0.035 295); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 13px 16px; color: #fff; font: 400 15px/1.4 "Manrope", system-ui, sans-serif; outline: none; transition: border-color 200ms cubic-bezier(.2, .8, .2, 1); } .cb-field::placeholder { color: rgba(255, 255, 255, 0.45); } .cb-field:focus { border-color: rgba(255, 0, 247, 0.6); } select.cb-field { appearance: none; -webkit-appearance: none; cursor: pointer; } button:disabled { opacity: 0.7; cursor: default !important; transform: none !important; box-shadow: none !important; } /* -------------------------------------------------------------------------- Modals -------------------------------------------------------------------------- */ .modal-success { display: flex; } .modal-dialog { max-height: 90vh; overflow-y: auto; } /* -------------------------------------------------------------------------- Responsive — collapse multi-column grids and scale headings on small screens -------------------------------------------------------------------------- */ @media (max-width: 900px) { [data-rgrid] { grid-template-columns: 1fr !important; } h1 { font-size: 36px !important; line-height: 1.1 !important; } h2 { font-size: 30px !important; } }