/* Theme Name: Hirsch Brand (Child) Theme URI: https://autohaus-hirsch.de/ Description: Komplettes Brand-Redesign für Autohaus Hirsch auf Basis des Carly-Themes — Hero-Takeover mit Anton-Display-Typo, durchgängiges Dreier-Schriftsystem (Anton / Space Grotesk / Space Mono), Laufband-Ticker, Markenfarbe #03347b, dunkler Navy-Footer. Inhalte, Elementor, Marktplatz und Plugins bleiben unangetastet. Author: Autohaus Hirsch Template: carly Version: 3.0.13 */ /* ============================================================================ HIRSCH BRAND — Child-Theme V3 "Full Redesign" Schriftsystem (live an autohaus-hirsch.de verifiziert — 178 Elemente Space Grotesk, 15 Anton, 10 Space Mono, Rest = Fremd-Widgets): ANTON → große Statements (h1, h2, .section-title, Zahlen) SPACE GROTESK → gesamter Text & UI SPACE MONO → Menü, Buttons, Labels (technische Akzente) Teile: A Bestehende Header-/Layout-Fixes (unverändert übernommen) B Globales Schriftsystem + Farben C Komponenten (Buttons, Karten, Formulare, Footer) D Hero-Takeover + Ticker (Markup aus hero.js) ============================================================================ */ :root{ --hb: #03347b; /* Brandfarbe */ --hb2: #0a52b8; /* helleres Blau (Hover) */ --hbd: #070c16; /* sehr dunkles Navy (nur Hero, liegt unter Foto+Gradient) */ --hbnav: #0c1a33; /* Navy für Footer/CTA — klar blau, nicht schwarz */ --paper: #f3f0e9; /* warmer Papier-Ton */ --ink: #10141d; /* Text */ } /* ══════════════════════════════════════════════════════════════════════════ TEIL A — BESTEHENDE FIXES (unverändert übernommen) ══════════════════════════════════════════════════════════════════════════ */ #scrollUp{ right:32px !important; bottom:90px !important; } .footer-icon{ display:none !important; } @media (min-width:992px) and (max-width:1299px){ #sticky-header .col-xl-7.col-lg-6{ display:none !important; } #sticky-header .header-right{ display:none !important; } } @media (min-width:1300px){ .meanmenu-reveal{ display:none !important; } } .mobile-menu.mean-container .mean-bar:nth-of-type(2){ display:none !important; } @media (min-width:1300px){ #sticky-header .col-xl-3{ flex:0 0 auto; width:285px; max-width:none; } #sticky-header .col-xl-7{ flex:1 1 auto; width:auto; max-width:none; min-width:0; } #sticky-header .col-xl-2{ flex:0 0 auto; width:210px; max-width:none; } .menu-bg .main-menu{ margin-left:0; } .menu-bg .main-menu nav > ul{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start; } .main-menu ul li{ white-space:nowrap; margin-right:14px; } .main-menu ul li a{ font-size:14px; } .menu-bg .logo{ transform:none; padding-top:10px; } } @media (min-width:1600px){ #sticky-header .col-xl-3{ width:480px; } #sticky-header .col-xl-2{ width:240px; } .main-menu ul li{ margin-right:22px; } .main-menu ul li a{ font-size:15px; } } @media (min-width:768px) and (max-width:1299px){ .menu-bg .logo{ transform:none; padding-top:8px; padding-left:20px; } .menu-bg .logo img{ width:auto; max-height:80px; } } /* ══════════════════════════════════════════════════════════════════════════ TEIL B — GLOBALES SCHRIFTSYSTEM + FARBEN ══════════════════════════════════════════════════════════════════════════ */ /* Space Grotesk als EINE Textschrift für alles (Icons bleiben unberührt, da FontAwesome/Themify ihre Font-Family auf den Icon-Klassen setzen). */ body, p, li, dd, dt, td, th, label, input, textarea, select, blockquote, figcaption, .elementor-widget-text-editor{ font-family:"Space Grotesk", system-ui, sans-serif !important; } a{ font-family:inherit !important; } /* Anton für die großen Statements */ h1, h2, .section-title{ font-family:"Anton", sans-serif !important; font-weight:400 !important; text-transform:uppercase; letter-spacing:.005em !important; line-height:1.06 !important; } /* Space Grotesk Bold für Unter-Überschriften (Anton wäre hier zu hart) */ h3, h4, h5, h6, .service-title, .widget-title{ font-family:"Space Grotesk", sans-serif !important; font-weight:700 !important; letter-spacing:-.01em; } /* Section-Titel: groß, mit Marken-Akzentstrich (live getestet: 57.6px) */ .section-title{ font-size:clamp(34px, 4.5vw, 64px) !important; position:relative; } .section-title::before{ content:""; display:block; width:56px; height:5px; margin:0 auto 18px; background:var(--hb); border-radius:3px; } .text-left .section-title::before, .section-title.text-left::before{ margin-left:0; } /* Hauptmenü: Mono, uppercase — technischer Marken-Akzent */ .main-menu ul li a{ font-family:"Space Mono", monospace !important; font-size:12px !important; letter-spacing:.08em !important; text-transform:uppercase !important; } /* Dropdown-Panels: Mono-Uppercase ist breiter als die alte Menüschrift — Panel wächst auf die längste Zeile mit, sonst läuft Text rechts hinaus (z.B. "Wartungs- und Verschleißpakete", gefixt in 3.0.10). */ .main-menu ul li ul, .main-menu .sub-menu{ min-width:max-content !important; width:auto !important; } .main-menu .sub-menu li{ margin-right:0 !important; } .main-menu .sub-menu li a{ font-size:11px !important; padding-right:28px !important; } /* Warmer Papier-Ton statt Klinik-Grau. padding/margin:0 — eingebettete Style-Blöcke im Seiteninhalt setzen global body{padding:60px 20px} und schnüren die Seite ein (Header war fixed und deshalb full-width, alles darunter nicht — Live-Bug, gefixt in 3.0.2). */ body{ background:var(--paper) !important; color:var(--ink); padding:0 !important; margin:0 !important; } .gray-bg, [class*="gray-bg"]{ background:var(--paper) !important; } /* Links in Markenfarbe */ a{ color:var(--hb); } a:hover{ color:var(--hb2); } /* Zahlen/Counter in Anton + Brand */ .counter, .count, .stat-number, .odometer{ font-family:"Anton", sans-serif !important; color:var(--hb) !important; } /* ══════════════════════════════════════════════════════════════════════════ TEIL C — KOMPONENTEN ══════════════════════════════════════════════════════════════════════════ */ /* Buttons: EIN Stil — Brand-Pill mit Mono-Schrift */ .hero-slider-btn .c-btn, .cta-button, .btn-offer, .all-vehicles-button, .jac-btn-primary{ background:var(--hb) !important; background-image:none !important; border:2px solid var(--hb) !important; color:#fff !important; border-radius:50px !important; font-family:"Space Mono", monospace !important; font-weight:700 !important; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 14px 28px -14px rgba(3,52,123,.6) !important; transition:transform .25s ease, background .25s ease, box-shadow .25s ease !important; } .hero-slider-btn .c-btn:hover, .cta-button:hover, .btn-offer:hover, .all-vehicles-button:hover, .jac-btn-primary:hover{ background:var(--hb2) !important; border-color:var(--hb2) !important; transform:translateY(-3px); box-shadow:0 20px 36px -14px rgba(3,52,123,.65) !important; } /* Ghost-Buttons auf Bildern/Dunkel */ .jac-btn-ghost{ background:transparent !important; border:2px solid #fff !important; color:#fff !important; border-radius:50px !important; font-family:"Space Mono", monospace !important; font-weight:700 !important; text-transform:uppercase; } .jac-btn-ghost:hover{ background:#fff !important; color:var(--hb) !important; } /* Contact Form 7 */ .wpcf7-form input[type="submit"]{ background:var(--hb) !important; color:#fff !important; padding:15px 40px !important; border:2px solid var(--hb) !important; border-radius:50px !important; font-size:1.02em !important; font-family:"Space Mono", monospace !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.03em; cursor:pointer; transition:all .2s ease !important; margin-top:10px !important; box-shadow:0 14px 28px -14px rgba(3,52,123,.6) !important; } .wpcf7-form input[type="submit"]:hover{ background:var(--hb2) !important; border-color:var(--hb2) !important; transform:translateY(-3px); } /* Karten — Hover übernimmt Carlys Blau-Kippe, aber in Markenfarben. WICHTIG: Carly setzt beim Hover die Kartentexte auf weiß; die Karte MUSS daher beim Hover dunkel werden, sonst steht weißer Text auf weißer Karte (Live-Bug, gefixt in 3.0.1). */ .service-box{ border-radius:18px !important; overflow:hidden; background:#fff !important; border:1px solid #e2ddd2 !important; box-shadow:0 18px 40px -26px rgba(3,52,123,.22) !important; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease !important; } /* Hover-Anker ist die SPALTE (bewegt sich nicht), nicht die hüpfende Karte — sonst "flieht" die Karte beim translateY unter dem Cursor weg und flackert an der Unterkante (Live-Bug, gefixt in 3.0.4). .service-box:hover bleibt als Fallback für Karten außerhalb von Grid-Spalten. */ .row [class*="col-"]:hover > .service-box, .service-box:hover{ transform:translateY(-8px); } /* WICHTIG: .service-box.active ist Carlys DAUERHAFT hervorgehobene Karte (blau + weißer Text, ganz ohne Hover). Unser weißer Karten-Grund hatte ihr den blauen Hintergrund genommen, der weiße Text blieb -> Karte wirkte leer. Das war die eigentliche Ursache des "Hover-Bugs" (gefixt in 3.0.6). */ .service-box.active, .row [class*="col-"]:hover > .service-box, .service-box:hover{ background:linear-gradient(135deg, var(--hb2), #021f4d) !important; border-color:var(--hb) !important; box-shadow:0 30px 56px -24px rgba(3,52,123,.55) !important; } .service-box.active .services-text h4, .service-box.active .services-text p, .service-box.active .service-title, .service-box.active h4, .service-box.active p, .row [class*="col-"]:hover > .service-box .services-text h4, .row [class*="col-"]:hover > .service-box .services-text p, .row [class*="col-"]:hover > .service-box .service-title, .row [class*="col-"]:hover > .service-box h4, .row [class*="col-"]:hover > .service-box p, .service-box:hover .services-text h4, .service-box:hover .services-text p, .service-box:hover .service-title, .service-box:hover h4, .service-box:hover p{ color:#fff !important; } .service-box.active .services-icon i, .row [class*="col-"]:hover > .service-box .services-icon i, .service-box:hover .services-icon i{ background:rgba(255,255,255,.14) !important; color:#fff !important; } /* Kontakt-CTA (Telefon/Adresse): helles Eisblau — die blauen Gradient-Karten tragen ihren weißen Text selbst (Farbwunsch Kunde, 3.0.9). */ .footer-cta-area{ background:#eff4f9 !important; } /* Footer: Navy — NICHT weiß machen, hier steht weißer Text direkt auf dem Hintergrund (Spalten, Links, Copyright). */ .footer-area, footer, [class*="footer-bg"]{ background:var(--hbnav) !important; } .footer-area .widget-title, .footer-area h4{ font-family:"Space Mono", monospace !important; font-size:12px !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:#7db4ff !important; } /* Fokus-Rahmen (Barrierefreiheit) */ a:focus-visible, button:focus-visible, .c-btn:focus-visible, .cta-button:focus-visible, .wpcf7-form input[type="submit"]:focus-visible{ outline:3px solid var(--hb2) !important; outline-offset:2px !important; } /* ══════════════════════════════════════════════════════════════════════════ TEIL D — HERO-TAKEOVER + TICKER (Markup wird von hero.js eingesetzt) ══════════════════════════════════════════════════════════════════════════ */ /* Original-Slider der Startseite von der ERSTEN Millisekunde an verstecken — sonst blitzt er auf, bis hero.js ihn ersetzt (FOUC, gefixt in 3.0.13). hero.js blendet ihn im Fehlerfall wieder ein; für Nutzer ohne JavaScript macht das ein