/* Fahrschule GO — Rebrand (aus Claude-Design-Entwürfen implementiert) */ /* Fonts: Archivo + Instrument Sans. HINWEIS DSGVO: aktuell via Google-Fonts-CDN eingebunden (siehe jeder Seite). Vor Live-Gang self-hosten (kein Google-Fonts-CDN) — vgl. bestehendes site/fonts/. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; } /* Sicherheitsnetz gegen Rest-Überlauf */ body { margin: 0; font-family: 'Instrument Sans', system-ui, sans-serif; color: #0D0D0D; background: #FFFFFF; -webkit-font-smoothing: antialiased; line-height: 1.5; } img, video { max-width: 100%; } a { color: inherit; text-decoration: none; } /* Wortmarke im Footer auf dunklem Grund: das Repo-Logo ist dunkel -> aufhellen */ .footer-wordmark--onDark { filter: brightness(0) invert(1); } /* Bild-Platzhalter (leere Design-Slots) */ .go-imgslot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: linear-gradient(135deg, #E9EEF3 0%, #DCE4EC 100%); color: #6B7684; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; } .go-imgslot::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(137,207,240,0.25) 1px, transparent 1px); background-size: 22px 22px; opacity: 0.6; } .go-imgslot span { position: relative; max-width: 32ch; } /* Formular-Bausteine (aus dem Startseite-Entwurf) */ @keyframes stepIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } .go-step { animation: stepIn .4s ease both; } .go-input { width:100%; box-sizing:border-box; padding:15px 18px; border:2px solid #E6EBF1; border-radius:14px; font-family:'Instrument Sans',sans-serif; font-size:16px; color:#0D0D0D; background:#F6F8FA; outline:none; transition:all .25s cubic-bezier(.4,0,.2,1); } .go-input:focus { border-color:#89CFF0; background:#FFFFFF; box-shadow:0 8px 32px rgba(137,207,240,0.16); } .go-input::placeholder { color:#8A94A3; } .go-pick { transition:all .25s cubic-bezier(.4,0,.2,1); } .go-pick:hover { border-color:#89CFF0 !important; transform:translateY(-4px); box-shadow:0 16px 48px rgba(13,13,13,0.10); } .go-pick[data-active="true"] { border-color:#89CFF0 !important; background:rgba(137,207,240,0.08) !important; box-shadow:0 8px 32px rgba(137,207,240,0.18); } .go-fill { transition: width .45s cubic-bezier(.4,0,.2,1); } /* ========================================================= MOBILES MENÜ (per rebrand.js injiziert) ========================================================= */ .go-burger { display: none; /* nur mobil sichtbar (Media-Query unten) */ flex-direction: column; gap: 5px; width: 46px; height: 46px; align-items: center; justify-content: center; background: #0D0D0D; border: none; border-radius: 12px; cursor: pointer; padding: 0; flex-shrink: 0; } .go-burger span { display:block; width:20px; height:2px; background:#FFFFFF; border-radius:2px; transition:transform .25s ease, opacity .2s ease; } .go-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .go-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .go-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .go-mnav { display: none; position: fixed; top: 0; right: 0; width: min(86vw, 340px); height: 100vh; height: 100dvh; background: #0D0D0D; color: #FFFFFF; padding: 92px 28px 28px; flex-direction: column; gap: 2px; z-index: 1000; animation: goMnavIn .28s cubic-bezier(.4,0,.2,1) both; overflow-y: auto; } @keyframes goMnavIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .go-mnav.open { display: flex; } .go-mnav a { color: #FFFFFF; font-size: 1.12rem; font-weight: 600; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.1); } .go-mnav a.go-mnav-cta { margin-top: 20px; background: #89CFF0; color: #0D0D0D; text-align: center; border: none; border-radius: 50px; padding: 15px; } .go-mnav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 999; } .go-mnav-overlay.open { display: block; } /* ========================================================= RESPONSIVE-LAYER Layout kommt aus Inline-Styles -> Attribut-Selektoren + !important. ========================================================= */ /* ---- Tablet / große Phones: Hero-Splits & 2-spaltige Sektionen stapeln ---- */ @media (max-width: 900px) { header > nav { display: none !important; } /* Desktop-Nav aus */ .go-burger { display: inline-flex; } /* Hamburger an */ [style*="grid-template-columns:1.1fr 1fr"], [style*="grid-template-columns:1.2fr 1fr"], [style*="grid-template-columns:1.5fr 1fr"], [style*="grid-template-columns:1fr 1.6fr"] { grid-template-columns: 1fr !important; gap: 32px !important; } /* Eckdaten 4-spaltig -> 2 */ [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; } } /* ---- Tablet portrait / Phone: Karten-Grids -> 1 Spalte, Abstände runter ---- */ @media (max-width: 768px) { [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:repeat(3, 1fr)"], [style*="grid-template-columns:1.15fr 1fr 1fr"], [style*="grid-template-columns:1.4fr 1fr 1fr"], [style*="grid-template-columns:1.6fr 1fr 1fr"], [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns:1.5fr 1fr"] { grid-template-columns: 1fr !important; gap: 20px !important; } /* Sektions-Abstände (vertikal kürzer, horizontal 32->20) */ [style*="padding:120px 32px"] { padding: 64px 20px !important; } [style*="padding:110px 32px"] { padding: 60px 20px !important; } [style*="padding:100px 32px"] { padding: 56px 20px !important; } [style*="padding:130px 32px 0"] { padding: 72px 20px 0 !important; } [style*="padding:90px 32px 80px"] { padding: 48px 20px 48px !important; } [style*="padding:80px 32px 90px"] { padding: 48px 20px 56px !important; } [style*="padding:40px 32px 100px"] { padding: 24px 20px 56px !important; } [style*="padding:0 32px 120px"] { padding: 0 20px 64px !important; } [style*="padding:0 32px 100px"] { padding: 0 20px 56px !important; } header[style*="padding:20px 32px"] { padding: 16px 20px !important; } /* Große Karten-Innenabstände */ [style*="padding:56px"] { padding: 32px 22px !important; } [style*="padding:44px"] { padding: 30px 22px !important; } [style*="padding:56px 48px"] { padding: 34px 24px !important; } [style*="padding:36px 40px"] { padding: 26px 22px !important; } /* Hero (Startseite Vollbild) etwas kürzer, Randabstand kleiner */ [style*="height:86vh"] { height: 78vh !important; min-height: 440px !important; margin: 0 10px !important; } [style*="padding:56px 64px"] { padding: 30px 22px !important; } /* Bild-/Video-Slot-Höhen begrenzen */ [style*="height:460px"], [style*="height:440px"], [style*="height:380px"], [style*="min-height:420px"] { height: 300px !important; min-height: 260px !important; } [style*="height:320px"] { height: 220px !important; } [style*="height:220px"] { height: 180px !important; } /* Flex-Section-Header (H2 + Fließtext nebeneinander) mobil stapeln */ [style*="align-items:flex-end; justify-content:space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } /* Überschriften auf Mobil zähmen (u. a. Klasse-B 104px) */ h1 { font-size: clamp(38px, 11.5vw, 62px) !important; } h2 { font-size: clamp(28px, 7.5vw, 44px) !important; } } /* ---- Kleine Phones: Eckdaten & PLZ/Ort ganz stapeln ---- */ @media (max-width: 560px) { [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; } /* Hero-Text-Padding weiter runter */ [style*="padding:56px 64px"] { padding: 24px 18px !important; } }