/* =========================================================== RESET & NORMALIZE (MOBILE-FIRST) =========================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; box-sizing: border-box; } html { box-sizing: border-box; font-size: 16px; scroll-behavior: smooth; } *, *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; background: #101a22; color: #F1F6F8; font-family: 'Open Sans', Arial, sans-serif; line-height: 1.6; } ul, ol { list-style: none; } a { color: #F7B521; text-decoration: none; transition: color 0.2s cubic-bezier(.4, 0, .2, 1); } a:hover, a:focus { color: #ffd95e; outline: none; } img { max-width: 100%; display: block; } button, input, select, textarea { font-family: inherit; font-size: inherit; border: none; background: none; color: inherit; } button:focus,input:focus { outline: 2px solid #F7B521; outline-offset: 2px; } /* =========================================================== BRAND VARIABLES & FONTS (FALLBACKS) =========================================================== */ :root { --primary: #143249; --primary-dark: #101a22; --secondary: #F1F6F8; --content-bg: #172838; --accent: #F7B521; --accent-neon: #ffea8c; --card-bg: #183552; --neon-blue: #19cfff; --neon-pink: #F31CA7; --border-grey: #25384B; --shadow-color: rgba(25, 207, 255, 0.13); --white: #fff; --success: #34E89E; --error: #ff286b; --font-display: 'Montserrat', Arial, sans-serif; --font-body: 'Open Sans', Arial, sans-serif; } /* Montserrat & Open Sans - fallback only if not in HTML, best to link in */ /* =========================================================== LAYOUT CONTAINERS =========================================================== */ .container { width: 100%; max-width: 1200px; padding: 0 20px; margin: 0 auto; } .content-wrapper { width: 100%; display: flex; flex-direction: column; gap: 24px; } .section { margin-bottom: 60px; padding: 40px 20px; background: linear-gradient(135deg, rgba(20,50,73,1) 80%, rgba(19,207,255,0.03) 100%); border-radius: 18px; box-shadow: 0 6px 32px var(--shadow-color); } @media (max-width: 600px) { .section { padding: 32px 8px; margin-bottom: 32px; border-radius: 12px; } } /* =========================================================== HEADER AND NAVIGATION =========================================================== */ header { background: #101a22; width: 100%; box-shadow: 0 2px 20px rgba(19, 207, 255, 0.09); position: sticky; top: 0; z-index: 20; padding: 0; } header .container { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; } header img { height: 48px; width: auto; } nav { display: flex; align-items: center; gap: 26px; } nav a { font-family: var(--font-display); font-weight: 500; font-size: 16px; letter-spacing: 0.03em; color: #F1F6F8; position: relative; transition: color 0.2s, text-shadow 0.2s; } nav a.cta { color: var(--primary); background: linear-gradient(94deg, #F7B521 65%, #ffea8c 100%); border-radius: 32px; padding: 10px 22px; font-weight: 700; box-shadow: 0 2px 8px rgba(247,181,33,0.12); margin-left: 18px; transition: box-shadow 0.2s, background 0.2s, color 0.2s; } nav a.cta:hover, nav a.cta:focus { background: linear-gradient(94deg, #F7B521 50%, #ffe087 100%); color: #143249; box-shadow: 0 4px 16px rgba(247,181,33,0.25); } nav a:not(.cta):hover, nav a:not(.cta):focus { color: var(--accent); text-shadow: 0 0 3px var(--neon-blue); } /* Hide navigation on mobile */ @media (max-width: 992px) { nav { display: none; } } /* Hamburger Button */ .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; background: var(--card-bg); color: #F7B521; font-size: 2.1rem; border-radius: 8px; padding: 8px 12px; border: none; cursor: pointer; box-shadow: 0 1px 8px rgba(25,207,255,0.08); z-index: 99; transition: background 0.18s, color 0.18s; } .mobile-menu-toggle:focus { outline: 2px solid var(--accent); } @media (min-width: 993px) { .mobile-menu-toggle { display: none; } } /* ======================= MOBILE MENU ======================= */ .mobile-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(120deg, #143249 88%, #19cfff 100%); z-index: 1000; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 40px 24px 24px 24px; transform: translateX(-100vw); transition: transform 0.33s cubic-bezier(.61,0,.4,1); box-shadow: 0 3px 38px rgba(0,0,0,0.23); } .mobile-menu.active { transform: translateX(0); } .mobile-menu-close { align-self: flex-end; background: var(--card-bg); border-radius: 50%; font-size: 2.4rem; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #19cfff; border: none; cursor: pointer; margin-bottom: 32px; transition: background 0.19s, color 0.19s; } .mobile-menu-close:focus { outline: 2px solid var(--neon-pink); } .mobile-nav { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; } .mobile-nav a { font-family: var(--font-display); font-size: 22px; color: #F1F6F8; font-weight: 500; padding: 10px 8px; border-radius: 12px; background: transparent; transition: color 0.17s, background 0.17s; } .mobile-nav a:hover, .mobile-nav a:focus { background: #183552; color: #19cfff; } .mobile-nav a.cta { background: linear-gradient(93deg, #F7B521 70%, #ffea8c); color: var(--primary-dark); font-weight: 700; margin-top: 18px; } /* =========================================================== TYPOGRAPHY =========================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; color: #fff; letter-spacing: 0.01em; } h1 { font-size: 2.35rem; line-height: 1.18; margin-bottom: 10px; } h2 { font-size: 1.7rem; margin-bottom: 8px; } h3 { font-size: 1.21rem; margin-bottom: 7px; } h4 { font-size: 1rem; } p, ul, li, ol { font-size: 1rem; font-family: var(--font-body); } .subheadline { font-size: 1.13rem; color: var(--accent-neon); font-weight: 500; margin-bottom: 12px; line-height: 1.5; } strong { font-weight: bold; color: var(--accent); } @media (min-width: 900px) { h1 { font-size: 2.9rem; } h2 { font-size: 2.0rem; } h3 { font-size: 1.38rem; } } /* Tagline highlight for CTA banners */ .cta-banner h2 { color: var(--accent); font-size: 2rem; letter-spacing: 0.03em; margin-bottom: 8px; } /* =========================================================== BUTTONS & CTA =========================================================== */ .cta { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #F7B521, #FFDF80 90%); color: var(--primary-dark); font-family: var(--font-display); padding: 10px 28px; font-size: 1.09rem; border-radius: 64px; border: none; font-weight: 700; letter-spacing: .03em; box-shadow: 0 0px 8px #F7B52163, 0 3px 18px rgba(247,181,33,0.14); margin-top: 16px; cursor: pointer; transition: box-shadow .19s, background .17s, color .19s, transform .17s; text-shadow: 0 1px 3px #fff7; } .cta:hover, .cta:focus { background: linear-gradient(90deg, #FFDF80 10%, #F7B521 100%); color: #143249; box-shadow: 0 7px 28px #ffea8c90, 0 3px 18px rgba(19,207,255,0.09); transform: translateY(-2px) scale(1.025); } /* =========================================================== CARDS & CARD-CONTAINER & FLEX LAYOUTS =========================================================== */ .card-container { display: flex; flex-wrap: wrap; gap: 24px; } .card { background: var(--card-bg); border-radius: 16px; box-shadow: 0 2px 16px var(--shadow-color); padding: 28px 22px; margin-bottom: 20px; position: relative; /* for decorative pseudo-elements */ display: flex; flex-direction: column; gap: 18px; min-width: 230px; } .card-content { display: flex; flex-direction: column; justify-content: center; gap: 12px; } /* Critical Flex Spacing & Alignment Patterns */ .content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; } .text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } @media (max-width: 768px) { .text-image-section { flex-direction: column; gap: 20px; align-items: flex-start; } } .feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } .testimonial-card { display: flex; align-items: center; gap: 20px; background: #f7f8fa; color: #212e3c; border-radius: 18px; box-shadow: 0 2px 14px rgba(20, 50, 73, 0.10); padding: 20px; margin-bottom: 20px; font-size: 1.05rem; position: relative; flex: 1 1 260px; min-width: 220px; max-width: 450px; } .testimonial-section { display: flex; flex-wrap: wrap; gap: 24px; } .client-logos { display: flex; gap: 28px; align-items: center; margin-top: 18px; flex-wrap: wrap; } .client-logos img { height: 44px; opacity: 0.8; filter: drop-shadow(0 1px 3px #19cfff35); transition: opacity .18s; } .client-logos img:hover { opacity: 1; } /* Cards/Feature List Pattern */ .feature_grid, .service-list, .optimization-methods, .benefit-list, .skill-growth, .engagement-benefits, .outcome-list, .analytics-services-list, .data-insight-highlights, .analytical-benefits, .profit-growth-points { display: flex; flex-wrap: wrap; gap: 20px 28px; } .feature_grid li, .service-list li, .optimization-methods li, .benefit-list li, .skill-growth li, .engagement-benefits li, .outcome-list li, .analytics-services-list li, .data-insight-highlights li, .analytical-benefits li, .profit-growth-points li { background: var(--card-bg); color: var(--secondary); border-radius: 14px; box-shadow: 0 2px 11px rgba(19,207,255,0.03); padding: 18px 14px 15px; min-width: 200px; flex: 1; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; position: relative; transition: box-shadow 0.2s, border 0.2s; } .feature_grid li img, .service-list li img, .feature_grid li svg, .service-list li svg { width: 42px; height: 42px; margin-right: 8px; filter: drop-shadow(0 0 6px #19cfff50); } .feature_grid li h3, .service-list li strong { color: var(--accent-neon); font-weight: 700; margin-bottom: 6px; } .feature_grid li:hover, .service-list li:hover { box-shadow: 0 4px 20px #19cfff44, 0 0px 8px #F7B52133; border: 1.5px solid var(--neon-blue); z-index: 4; } /* For block/overview sections */ .coaching-overview, .solution-overview, .methodology-brief, .success-metrics { background: #143249; color: var(--accent-neon); border-radius: 16px; padding: 16px 20px; box-shadow: 0 1px 7px #19cfff0a; margin-top: 16px; margin-bottom: 20px; } /* Case Snapshots (Prozessoptimierung) */ .case-snapshots { display: flex; flex-wrap: wrap; gap: 20px; } .case-snapshots > div { background: var(--card-bg); border-radius: 12px; flex: 1 1 220px; padding: 18px 13px; color: var(--secondary); min-width: 190px; } /* =========================================================== CTA Banners & Confirmation =========================================================== */ .cta-banner { display: flex; flex-direction: column; align-items: center; gap: 14px; background: linear-gradient(90deg, #183552 80%, #19cfff 100%); border-radius: 18px; padding: 38px 28px; box-shadow: 0 1px 11px rgba(19,207,255,0.07); } .cta-banner p { color: var(--accent-neon); font-size: 1.09rem; text-align: center; } .cta-banner .cta { margin-top: 14px; } .confirmation-section { background: linear-gradient(90deg, #143249 70%, #19cfff 110%); border-radius: 18px; color: #fff; text-align: center; box-shadow: 0 4px 19px #19cfff19; padding: 38px 24px; max-width: 760px; margin: 0 auto; } .confirmation-section h2 { color: var(--accent); } .confirmation-section ol { margin: 12px auto 24px auto; text-align: left; max-width: 440px; color: var(--accent-neon); } /* =========================================================== TRUST BADGES & PARTNERS =========================================================== */ .trust-badges { display: flex; gap: 24px; margin-top: 16px; align-items: center; } .trust-badges img { height: 44px; width: auto; filter: drop-shadow(0 0 10px #F7B52133); } /* =========================================================== FOOTER =========================================================== */ footer { background: #172838; padding: 32px 0 0 0; color: var(--secondary); font-size: 1rem; position: relative; z-index: 6; } footer .container { display: flex; flex-direction: column; gap: 30px; align-items: center; justify-content: center; width: 100%; } footer nav { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; justify-content: center; margin-bottom: 18px; } footer nav a { color: var(--neon-blue); font-size: 1rem; text-decoration: underline; font-family: var(--font-body); opacity: 0.82; transition: opacity .17s, color .2s; } footer nav a:hover, footer nav a:focus { opacity: 1; color: var(--accent); } .contact-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.98rem; } .contact-footer p { display: flex; align-items: center; gap: 7px; color: #F1F6F8; } .contact-footer img { height: 19px; width: auto; opacity: 0.72; } .contact-footer small { color: #7addf7; font-size: 0.92rem; margin-top: 4px; letter-spacing: 0.01em; } /* =========================================================== TEXT-SECTION, PLACEHOLDERS, LISTS, ETC. =========================================================== */ .text-section { display: flex; flex-direction: column; gap: 17px; color: #F1F6F8; font-size: 1.05rem; background: transparent; } .text-section ul, .benefit-list, .outcome-list, .data-insight-highlights { margin-top: 6px; color: #19cfff; padding-left: 22px; list-style: disc inside; } .text-section li { margin-bottom: 6px; } .map-placeholder { background: var(--card-bg); padding: 16px; border-radius: 10px; display: flex; align-items: center; gap: 11px; margin-top: 9px; font-size: 0.98rem; color: var(--accent-neon); } .team-placeholder img { height: 100px; width: auto; opacity: 0.78; margin: 14px auto 0 auto; filter: drop-shadow(0 4px 16px #F7B52144); } /* Contact Info Block (Kontakt) */ .contact-info-block { background: var(--card-bg); color: #F1F6F8; border-radius: 12px; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .contact-info-block ul { display: flex; flex-direction: column; gap: 12px; } .contact-info-block ul li { display: flex; align-items: center; gap: 8px; } .contact-details { display: flex; flex-direction: column; gap: 10px; } .contact-details h3 { color: var(--accent-neon); font-size: 1.13rem; font-weight: 600; } /* Cookie Policy page links */ .text-section a { color: var(--neon-blue); text-decoration: underline; transition: color .13s; } .text-section a:hover, .text-section a:focus { color: var(--accent); } /* =========================================================== COOKIE BANNER & COOKIE SETTINGS MODAL =========================================================== */ #cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2500; background: linear-gradient(90deg, #183552 75%, #19cfff 100%); color: #fff; padding: 22px 18px; box-shadow: 0 -4px 24px #101a2260; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; font-size: 1rem; transition: transform .23s cubic-bezier(.55,0,.3,1); } #cookie-banner.hide { transform: translateY(100%); } #cookie-banner p { flex-basis: 260px; color: var(--accent-neon); } #cookie-banner .cookie-actions { display: flex; gap: 14px; flex-wrap: wrap; } .cookie-btn, .cookie-settings-open { background: var(--accent); color: var(--primary-dark); border-radius: 32px; padding: 8px 22px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; border: none; cursor: pointer; transition: background .18s, color .16s, box-shadow .17s, transform .18s; box-shadow: 0 1px 7px #F7B52144; } .cookie-btn.reject { background: var(--error); color: #fff; } .cookie-btn.reject:hover, .cookie-btn.reject:focus { background: #ff6289; } .cookie-btn.accept:hover, .cookie-btn.accept:focus { background: var(--success); color: #173249; } .cookie-settings-open { background: var(--neon-blue); color: #173249; } .cookie-settings-open:hover, .cookie-settings-open:focus { background: var(--accent); color: #143249; } /* Cookie Modal */ #cookie-modal { position: fixed; z-index: 3000; left: 0; right: 0; top: 0; bottom: 0; background: rgba(16,26,34,0.93); display: none; align-items: center; justify-content: center; animation: fadeIn .28s; } #cookie-modal.open { display: flex; } .cookie-modal-content { background: linear-gradient(107deg, #183552 92%, #19cfff 120%); border-radius: 16px; padding: 36px 28px 28px 28px; color: #fff; box-shadow: 0 4px 32px #19cfff33; min-width: 290px; max-width: 460px; display: flex; flex-direction: column; gap: 22px; position: relative; } .cookie-modal-close { position: absolute; top: 16px; right: 21px; background: var(--neon-blue); color: var(--primary-dark); border: none; font-size: 2rem; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .cookie-modal-close:hover, .cookie-modal-close:focus { background: var(--accent); color: #fff; } .cookie-categories { display: flex; flex-direction: column; gap: 16px; } .cookie-category { display: flex; align-items: center; gap: 16px; background: #143249; border-radius: 9px; padding: 13px 11px; color: var(--accent-neon); font-weight: 500; font-size: 1rem; } .cookie-category label { flex: 1; cursor: pointer; } .cookie-category input[type="checkbox"] { accent-color: var(--accent); width: 22px; height: 22px; } .cookie-category input[disabled] { opacity: 0.7; pointer-events: none; } .cookie-actions-modal { display: flex; gap: 14px; margin-top: 7px; flex-wrap: wrap; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* =========================================================== RESPONSIVE MEDIA QUERIES =========================================================== */ @media only screen and (max-width: 992px) { .container { max-width: 100vw; padding-left: 11px; padding-right: 11px; } header .container { padding-left: 8px; padding-right: 8px; } .testimonial-section, .content-grid, .card-container { gap: 14px; } } @media only screen and (max-width: 768px) { .content-wrapper { gap: 19px; } h1 { font-size: 1.4rem; } h2 { font-size: 1.18rem; } h3 { font-size: 1.06rem; } .cta-banner h2 { font-size: 1.3rem; } .cta { font-size: 0.98rem; } .testimonial-section, .feature_grid, .service-list, .optimization-methods, .benefit-list, .skill-growth, .engagement-benefits, .outcome-list, .analytics-services-list, .data-insight-highlights, .analytical-benefits, .profit-growth-points { flex-direction: column; gap: 16px; } .client-logos, .trust-badges, .case-snapshots { flex-direction: column; gap: 14px; align-items: flex-start; } .cta-banner, .confirmation-section { padding: 26px 8px; border-radius: 10px; } } @media only screen and (max-width: 520px) { header img { height: 38px; } .section { padding: 18px 0px; } .container { padding-left: 3px; padding-right: 3px; } .card, .feature_grid li, .service-list li { padding: 12px 8px; border-radius: 8px; } .testimonial-card { padding: 14px 8px; min-width: 100px; border-radius: 10px; } } /* =========================================================== TRANSITIONS & MICRO-INTERACTIONS =========================================================== */ .card, .feature_grid li, .service-list li, .optimization-methods li, .testimonial-card, .cta-banner, .confirmation-section { transition: box-shadow 0.23s, border 0.2s, transform 0.18s; } .card:hover, .feature_grid li:hover, .service-list li:hover { transform: translateY(-3px) scale(1.025); box-shadow: 0 9px 26px #19cfff47, 0 0px 18px #F7B52111; } .cta-banner:hover, .confirmation-section:hover { box-shadow: 0 8px 36px #F7B52122, 0 1px 19px #19cfff17; } /* Icon hover on contact info */ .contact-info-block li img, .contact-footer img { transition: filter .2s, opacity .2s; } .contact-info-block li:hover img, .contact-footer:hover img { opacity: 1; filter: drop-shadow(0 0 6px #19cfff88); } /* =========================================================== UTILITIES & A11Y =========================================================== */ .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; } .hide { display: none !important; } /* END OF CSS */