/* ========================================================================== HEPRO GmbH – CRA-Portal (cra.hepro-gmbh.de) Reines CSS3, keine externen Abhängigkeiten, nur Systemschriften. Firmenfarben: HEPRO-Rot #cc071e und Logo-Grau #4b4a4d (direkt aus dem Original-Logo gemessen). Die Primärfarbe kann im Adminbereich geändert werden (theme.css.php überschreibt --hepro-red / --hepro-red-dark). ========================================================================== */ /* ---------- HEPRO-Firmenfarben (zentral) ---------- */ :root { --hepro-red: #cc071e; /* HEPRO-Rot aus dem Logo */ --hepro-red-dark: #9f0517; /* Abgedunkelte Hover-Variante */ --hepro-white: #ffffff; --hepro-background: #f5f6f7; --hepro-border: #dfe3e6; --hepro-gray: #687078; --hepro-dark: #1b1f23; --hepro-logo-gray: #4b4a4d; /* Grau des HEPRO-Schriftzugs */ /* Zuordnung auf die verwendeten Rollen */ --color-primary: var(--hepro-logo-gray); /* Überschriften, Markenelemente */ --color-primary-dark: var(--hepro-dark); /* Footer */ --color-hero: #26292e; /* Dunkler Kopfbereich */ --color-accent: var(--hepro-red); /* Buttons, Links, aktive Menüpunkte */ --color-accent-dark: var(--hepro-red-dark); --color-accent-soft: #fbe9eb; /* Dezente rote Flächen (Icons, Badges) */ --color-accent-soft-border: #f2c3c9; --color-bg: var(--hepro-background); --color-surface: var(--hepro-white); --color-text: #23282d; --color-text-muted: var(--hepro-gray); --color-border: var(--hepro-border); --color-success-bg: #e7f5ec; --color-success-border: #2e7d4f; --color-success-text: #1d5c39; --color-error-bg: #fdecec; --color-error-border: #b3372f; --color-error-text: #8c2a24; --color-warning-bg: #fdf6e3; --color-warning-border: #b98a1d; --color-warning-text: #7a5a0f; --radius: 10px; --shadow: 0 1px 3px rgba(27, 31, 35, 0.08), 0 4px 16px rgba(27, 31, 35, 0.06); --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; } /* ---------- Grundlagen / Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-stack); font-size: 1rem; line-height: 1.65; color: var(--color-text); background-color: var(--color-bg); -webkit-text-size-adjust: 100%; } /* Der Seitenaufbau ist eine Spalte über die volle Bildschirmhöhe: Kopf – Inhalt – Fuß. Der Inhaltsbereich darf wachsen, der Fuß nicht. Dadurch sitzt der Fuß auch auf inhaltsarmen Seiten immer ganz unten statt mitten im Bild – sonst blieb darunter eine graue Restfläche stehen. Bewusst nur für die öffentliche Website (:not(.admin-body)): Der Adminbereich regelt das in admin.css bereits selbst, und die Login-Seite zentriert ihre Karte über .login-body/.login-wrap. Ohne die Ausgrenzung würde die Login-Karte nach oben rutschen. */ body:not(.admin-body) { min-height: 100vh; display: flex; flex-direction: column; } body:not(.admin-body) > main { flex: 1 0 auto; display: flex; flex-direction: column; } body:not(.admin-body) > .site-footer { flex-shrink: 0; } img, svg { max-width: 100%; height: auto; } /* Lange deutsche Komposita. Gemessen auf einem 320-px-Bildschirm: Die H1 der Startseite ("... Sicherheitsinformationen der HEPRO GmbH") brauchte 336 px in einem 280 px breiten Kasten und schob die ganze Seite um 36 px nach rechts. Das betrifft nicht nur diesen einen Text – auch selbst eingetragene Download- und Hinweistitel können beliebig lange Wörter enthalten. overflow-wrap sorgt dafür, dass notfalls umgebrochen wird; hyphens: auto setzt dabei einen Trennstrich an einer sinnvollen Stelle (das -Element ist mit lang="de" ausgezeichnet, der Browser trennt also nach deutschen Regeln). */ h1, h2, h3, h4, p, li, dt, dd, th, td, figcaption, label { overflow-wrap: break-word; } h1, h2, h3, h4 { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } a { color: var(--color-accent); } a:hover { color: var(--color-accent-dark); } /* Sichtbarer Tastatur-Fokus in HEPRO-Rot */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; } /* Skip-Link für Tastaturnutzer */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-accent); color: #fff; padding: 0.6rem 1rem; z-index: 200; border-radius: 0 0 6px 0; } .skip-link:focus { left: 0; color: #fff; } /* ---------- Header und Navigation ---------- */ .site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; } .brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: var(--color-text); min-width: 0; } /* HEPRO-Logo: Seitenverhältnis bleibt erhalten (height auto über width) */ .brand-logo { width: auto; height: 46px; flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; line-height: 1.25; border-left: 1px solid var(--color-border); padding-left: 0.9rem; } .brand-sub { font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.09em; } .main-nav ul { display: flex; align-items: center; gap: 0.25rem; list-style: none; } .main-nav a { display: block; padding: 0.55rem 0.9rem; text-decoration: none; color: var(--color-text); font-weight: 500; font-size: 0.95rem; border-radius: 6px; border-bottom: 2px solid transparent; } .main-nav a:hover { background: var(--color-bg); color: var(--color-accent-dark); } .main-nav a[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); border-radius: 6px 6px 0 0; } /* Hamburger-Button (nur mobil sichtbar) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; } .nav-toggle-bar { display: block; width: 100%; height: 2px; background: var(--color-primary); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Hero (Startseite) ---------- */ .hero { background-color: var(--color-hero); /* Dezentes technisches Linienraster */ background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 44px 44px; border-bottom: 3px solid var(--color-accent); color: #fff; padding: 4.5rem 0 4rem; } .hero-badge { display: inline-block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #fff; background: var(--color-accent); border-radius: 999px; padding: 0.32rem 0.95rem; margin-bottom: 1.25rem; } .hero h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.2; max-width: 46rem; margin-bottom: 1rem; letter-spacing: -0.01em; } .hero p { max-width: 42rem; font-size: 1.08rem; color: #d6dade; margin-bottom: 1rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 0.75rem 1.6rem; font-family: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; text-align: center; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn-primary { background: var(--color-accent); color: #fff; } .btn-primary:hover { background: var(--color-accent-dark); color: #fff; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); } .btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: #fff; } .btn-outline { background: transparent; color: var(--color-accent); border-color: var(--color-accent); } .btn-outline:hover { background: var(--color-accent); color: #fff; } .btn-danger { background: transparent; color: var(--color-error-text); border-color: var(--color-error-border); } .btn-danger:hover { background: var(--color-error-border); color: #fff; } .btn-large { padding: 0.9rem 2.2rem; font-size: 1.05rem; } .btn-small { padding: 0.35rem 0.8rem; font-size: 0.85rem; border-width: 1px; } /* ---------- Abschnitte ---------- */ .section { padding: 3.5rem 0; } .section-alt { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .section-head { max-width: 46rem; margin-bottom: 2.25rem; } .section-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--color-primary); margin-bottom: 0.6rem; letter-spacing: -0.01em; } .section-head p { color: var(--color-text-muted); } .page-intro { background: var(--color-hero); background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 44px 44px; border-bottom: 3px solid var(--color-accent); color: #fff; padding: 2.75rem 0; } .page-intro h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 0.5rem; letter-spacing: -0.01em; } .page-intro p { color: #d6dade; max-width: 46rem; } /* ---------- Karten (Startseite) ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); } .card h3 { font-size: 1.08rem; color: var(--color-primary); margin-bottom: 0.5rem; } .card p { font-size: 0.95rem; color: var(--color-text-muted); } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9px; background: var(--color-accent-soft); color: var(--color-accent); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.9rem; font-family: var(--font-mono); } /* ---------- Hinweisboxen ---------- */ .notice { border-radius: var(--radius); border: 1px solid; padding: 1.1rem 1.3rem; margin: 1.5rem 0; font-size: 0.95rem; } .notice strong { display: block; margin-bottom: 0.25rem; } .notice-info { background: #eef1f4; border-color: var(--hepro-gray); color: #3d454c; } .notice-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); } .notice-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); } .notice-error { background: var(--color-error-bg); border-color: var(--color-error-border); color: var(--color-error-text); } .notice[hidden] { display: none; } /* ---------- Leerzustand ---------- Für Seiten, auf denen noch keine Einträge veröffentlicht sind. Eine schmale Hinweiszeile wirkte auf der sonst leeren Seite verloren; dieser Block bekommt Gewicht und wird im verbleibenden Platz zwischen Kopfbereich und Fuß mittig ausgerichtet. */ .section-empty { flex: 1 0 auto; display: flex; align-items: center; padding: 3rem 0 3.5rem; } .section-empty > .container { width: 100%; } .empty-state { max-width: 40rem; margin: 0 auto; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 3rem 2rem; } .empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 11px; background: var(--color-accent-soft); border: 1px solid var(--color-accent-soft-border); color: var(--color-accent); font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; margin-bottom: 1.1rem; } .empty-state h2 { font-size: 1.2rem; color: var(--color-primary); margin-bottom: 0.6rem; } .empty-state p { color: var(--color-text-muted); max-width: 32rem; margin: 0 auto 0.7rem; } .empty-state p:last-of-type { margin-bottom: 0; } .empty-state-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; } @media (max-width: 560px) { .empty-state { padding: 2.25rem 1.25rem; } .empty-state-actions .btn { width: 100%; } } /* ---------- Downloadliste ---------- */ .download-list { display: grid; gap: 1.25rem; list-style: none; } .download-item { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); } .download-item-withdrawn { border-left-color: var(--hepro-gray); opacity: 0.85; } .download-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; } .download-head h3 { font-size: 1.15rem; color: var(--color-primary); margin-right: auto; } .badge { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: 999px; white-space: nowrap; } .badge-version { background: var(--color-accent-soft); color: var(--color-accent-dark); border: 1px solid var(--color-accent-soft-border); } .badge-type { background: #eef1f5; color: var(--color-text-muted); border: 1px solid var(--color-border); text-transform: uppercase; } .badge-status { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid #bfdecb; } .badge-security { background: var(--color-accent-soft); color: var(--color-accent-dark); border: 1px solid var(--color-accent); } .badge-draft { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); } .badge-muted { background: #eef1f5; color: var(--color-text-muted); border: 1px solid var(--color-border); } .download-desc { color: var(--color-text-muted); font-size: 0.96rem; margin-bottom: 1rem; } .download-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem 1.5rem; padding: 0.9rem 1rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: 1.1rem; } .download-meta div { min-width: 0; } .download-meta dt { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .download-meta dd { font-size: 0.94rem; font-family: var(--font-mono); color: var(--color-text); overflow-wrap: anywhere; } .download-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; } .download-filename { font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-text-muted); overflow-wrap: anywhere; } .download-install-note, .download-withdrawn-note { margin: 0 0 1rem; } /* ---------- SHA-256-Prüfsumme ---------- */ .checksum-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: 8px; margin-bottom: 1.1rem; } .checksum-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .checksum-value { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text); overflow-wrap: anywhere; word-break: break-all; flex: 1 1 20rem; min-width: 0; } .copy-btn.copied { background: var(--color-success-border); border-color: var(--color-success-border); color: #fff; } /* ---------- Formulare ---------- */ .form-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); max-width: 46rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .form-field { display: flex; flex-direction: column; gap: 0.35rem; } .form-field-full { grid-column: 1 / -1; } .form-field label { font-weight: 600; font-size: 0.92rem; color: var(--color-primary); } .required-mark { color: var(--color-accent); } .form-field input, .form-field textarea, .form-field select { font-family: inherit; font-size: 1rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.65rem 0.85rem; width: 100%; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--color-accent); } .form-field textarea { resize: vertical; min-height: 90px; } .form-hint { font-size: 0.82rem; color: var(--color-text-muted); } .form-check { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.92rem; } .form-check input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--color-accent); } .form-check-top { margin-top: 1.9rem; } /* Honeypot-Feld: für Menschen unsichtbar, für Bots ein normales Feld */ .hp-field { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; } /* ---------- Kontaktseite ---------- */ /* Zentriert wie die Inhaltsseiten (.content-narrow). Links ausgerichtet stand die Karte sonst allein am linken Rand, während rechts daneben die halbe Seite leer blieb. */ .contact-card { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius); padding: 2.25rem 2rem; box-shadow: var(--shadow); max-width: 46rem; margin: 0 auto; } .contact-card h2 { font-size: 1.25rem; color: var(--color-primary); margin-bottom: 1rem; } .contact-mail { display: inline-block; font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 700; font-family: var(--font-mono); color: var(--color-accent); text-decoration: none; border: 2px solid var(--color-accent); border-radius: 8px; padding: 0.7rem 1.4rem; margin-bottom: 1.25rem; overflow-wrap: anywhere; max-width: 100%; } .contact-mail:hover { background: var(--color-accent); color: #fff; } .contact-note { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 0.6rem; } /* ---------- Inhaltsseiten (Recht, Kontaktinfo) ---------- */ .content-narrow { max-width: 50rem; } .legal-content h2 { font-size: 1.3rem; color: var(--color-primary); margin: 2.2rem 0 0.7rem; } .legal-content h3 { font-size: 1.08rem; color: var(--color-primary); margin: 1.6rem 0 0.5rem; } .legal-content p, .legal-content ul, .legal-content ol { margin-bottom: 0.9rem; } .legal-content ul, .legal-content ol { padding-left: 1.4rem; } /* Platzhalter in den Rechtstexten. Vorher stand hier white-space: nowrap. Das passt für kurze Marken wie [TELEFONNUMMER], sprengte aber bei langen Platzhaltern ("[RECHTLICH PRÜFEN: Hinweise zur Verbraucherstreitbeilegung ergänzen ...]") auf Mobilgeräten die Seite: gemessen 786 px Dokumentbreite bei 390 px Viewport. Jetzt umbrechen sie; inline-block hält den gestrichelten Rahmen dabei als sauberen Block zusammen. */ .placeholder { display: inline-block; max-width: 100%; font-family: var(--font-mono); font-size: 0.9em; background: var(--color-warning-bg); border: 1px dashed var(--color-warning-border); color: var(--color-warning-text); border-radius: 5px; padding: 0.05rem 0.4rem; overflow-wrap: break-word; } .advisory-subhead { font-size: 0.98rem; color: var(--color-primary); margin: 0.9rem 0 0.3rem; } /* ---------- Info-Zweispalter (Startseite CRA-Abschnitt) ---------- */ .split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: start; } .split h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--color-primary); margin-bottom: 0.8rem; letter-spacing: -0.01em; } .split p { margin-bottom: 0.9rem; } .check-list { list-style: none; display: grid; gap: 0.7rem; } .check-list li { position: relative; padding-left: 1.9rem; } .check-list li::before { content: ""; position: absolute; left: 0; top: 0.3rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--color-accent-soft); border: 1px solid var(--color-accent); } .check-list li::after { content: ""; position: absolute; left: 0.32rem; top: 0.55rem; width: 0.42rem; height: 0.24rem; border-left: 2px solid var(--color-accent-dark); border-bottom: 2px solid var(--color-accent-dark); transform: rotate(-45deg); } /* ---------- Footer ---------- */ .site-footer { background: var(--color-primary-dark); color: #c6ccd2; margin-top: 3rem; font-size: 0.92rem; border-top: 3px solid var(--color-accent); } .footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding: 3rem 0 2rem; } .footer-main h2 { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #ffffff; margin-bottom: 0.9rem; } .footer-main p { max-width: 26rem; } .footer-main ul { list-style: none; display: grid; gap: 0.45rem; } .footer-main a { color: #c6ccd2; text-decoration: none; } .footer-main a:hover { color: #ffffff; text-decoration: underline; } .footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; margin-bottom: 1rem; } /* Typografische Wortmarke mit rotem Akzentbalken (Anlehnung an das Logo) */ .footer-brand-name { color: #fff; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; padding-bottom: 0.35rem; border-bottom: 3px solid var(--color-accent); } .footer-brand-sub { margin-top: 0.4rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #9aa2aa; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 1.1rem 0; font-size: 0.85rem; color: #9aa2aa; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 1.75rem; } .footer-main { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .nav-toggle { display: flex; } .brand-logo { height: 38px; } .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow); display: none; } .main-nav.is-open { display: block; } .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.25rem 1rem; } .main-nav a { padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--color-border); border-radius: 0; } .main-nav li:last-child a { border-bottom-color: transparent; } .main-nav a[aria-current="page"] { border-bottom: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); padding-left: 0.75rem; background: var(--color-bg); } .form-grid { grid-template-columns: 1fr; } .form-card { padding: 1.4rem; } .form-check-top { margin-top: 0; } .hero { padding: 3rem 0 2.75rem; } .section { padding: 2.5rem 0; } .footer-main { grid-template-columns: 1fr; gap: 1.75rem; } .download-actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }