/* CSS RESET & NORMALIZE */
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,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body { min-height: 100vh; background: #fff; color: #222; -webkit-font-smoothing: antialiased; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul { list-style: none; }
a { text-decoration: none; color: inherit; background: transparent; }
img { max-width: 100%; display: block; border: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; border: none; outline: none; background: none; }
/* BRAND VARIABLES */
:root {
--color-primary: #3A4664;
--color-primary-dark: #232942;
--color-secondary: #C7CCDB;
--color-accent: #F8E7B2;
--color-bg: #F7F9FA;
--color-bg-light: #fff;
--color-bg-dark: #202840;
--color-card: #fff;
--color-text: #2A3143;
--color-muted: #767F97;
--color-btn-hover: #2a3143;
--font-display: 'Montserrat', Arial, Helvetica, sans-serif;
--font-body: 'Roboto', Arial, Helvetica, sans-serif;
}
/* FONTS: Import web safe/Google in , but provide fallbacks */
body {
font-family: var(--font-body);
color: var(--color-text);
font-size: 16px;
line-height: 1.55;
background-color: var(--color-bg);
letter-spacing: 0.01em;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.01em;
}
h1 {
font-size: 2.6rem;
margin-bottom: 20px;
color: var(--color-primary);
}
h2 {
font-size: 2rem;
margin-bottom: 18px;
color: var(--color-primary-dark);
}
h3 {
font-size: 1.35rem;
margin-bottom: 10px;
color: var(--color-primary);
}
h4 {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-primary);
}
strong { font-weight: 700; }
p, li, ul, ol, blockquote {
font-size: 1rem;
font-family: var(--font-body);
margin-bottom: 10px;
}
ul, ol { padding-left: 1.5em; }
li {
margin-bottom: 8px;
}
/* GLOBAL CONTAINER AND FLEX LAYOUTS */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
.content-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
.section {
margin-bottom: 60px;
padding: 40px 20px;
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
background: var(--color-card);
border-radius: 18px;
box-shadow: 0 4px 24px rgba(58, 70, 100, 0.08);
margin-bottom: 20px;
position: relative;
display: flex;
flex-direction: column;
padding: 24px;
min-width: 270px;
transition: box-shadow 0.2s;
}
.card:hover {
box-shadow: 0 8px 32px rgba(58,70,100,0.15);
}
.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;
}
.testimonial-card {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
margin-bottom: 20px;
border-radius: 16px;
background: var(--color-bg-light);
box-shadow: 0 2px 12px rgba(58, 70, 100, 0.07);
flex: 1 1 320px;
flex-direction: column;
color: var(--color-text);
min-width: 270px;
max-width: 480px;
border-left: 8px solid var(--color-secondary);
transition: box-shadow 0.2s;
}
.testimonial-card:hover,
.testimonial-card:focus-within {
box-shadow: 0 8px 28px 0 rgba(58,70,100,0.10);
border-left-color: var(--color-accent);
}
.feature-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
background: var(--color-bg-light);
border-radius: 14px;
box-shadow: 0 2px 8px rgba(58,70,100,0.05);
padding: 24px 20px;
min-width: 240px;
flex: 1 1 240px;
}
.feature-item img {
width: 48px;
height: 48px;
}
/* HEADER & NAV */
header {
background: var(--color-primary);
color: #fff;
box-shadow: 0 2px 14px rgba(58,70,100,0.09);
position: relative;
z-index: 1040;
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 15px;
padding-bottom: 15px;
}
nav {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
nav a {
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
padding: 8px 14px;
color: #fff;
border-radius: 7px;
transition: background 0.15s, color 0.15s;
position: relative;
}
nav a:after {
content: '';
display: block;
height: 2px;
width: 0;
background: var(--color-accent);
transition: width 0.18s;
position: absolute;
left: 20%;
bottom: 3px;
}
nav a:hover {
background: var(--color-accent);
color: var(--color-primary);
}
nav a:hover:after,
nav a:focus:after {
width: 60%;
}
nav a.btn-primary, .btn-primary {
background: var(--color-accent);
color: var(--color-primary);
font-weight: 900;
font-family: var(--font-display);
border-radius: 9px;
padding: 10px 24px;
font-size: 1.1rem;
box-shadow: 0 2px 4px rgba(58,70,100,0.07);
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
nav a.btn-primary:hover, .btn-primary:hover {
background: var(--color-primary-dark);
color: #fff;
box-shadow: 0 4px 16px rgba(58,70,100,0.18);
}
nav img {
height: 44px;
margin-right: 10px;
}
/* MOBILE MENU BUTTON */
.mobile-menu-toggle {
display: none;
font-size: 2.1rem;
padding: 10px 15px;
background: none;
color: var(--color-accent);
border-radius: 8px;
border: none;
cursor: pointer;
transition: background 0.13s;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
background: rgba(255,255,255,0.08);
color: var(--color-accent);
}
/* MOBILE NAV OVERLAY */
.mobile-menu {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--color-primary);
color: #fff;
z-index: 2500;
transform: translateX(100%);
transition: transform 0.33s cubic-bezier(.68,-0.55,.27,1.55);
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0;
width: 100vw;
height: 100vh;
box-shadow: -8px 0 32px rgba(58,70,100,0.24);
}
.mobile-menu.open {
transform: translateX(0);
}
.mobile-menu-close {
background: none;
color: var(--color-accent);
font-size: 2.5rem;
position: absolute;
top: 25px;
right: 32px;
z-index: 2600;
border: none;
padding: 6px 12px;
border-radius: 5px;
transition: background 0.14s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
background: rgba(255,255,255,0.10);
}
.mobile-nav {
display: flex;
flex-direction: column;
gap: 24px;
margin: 80px 0 0 36px;
}
.mobile-nav a {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 800;
color: var(--color-accent);
margin-bottom: 8px;
transition: color 0.17s;
border-radius: 6px;
padding: 8px 0 8px 10px;
}
.mobile-nav a:hover {
color: #fff;
background: var(--color-secondary);
}
/* HERO & PRIMARY CTA */
section {
margin-bottom: 60px;
padding: 40px 0;
background: none;
}
@media (min-width: 992px) {
section {
padding: 60px 0;
}
}
.text-section {
background: var(--color-bg-light);
border-radius: 16px;
box-shadow: 0 2px 14px rgba(58,70,100,0.05);
padding: 30px 24px;
gap: 12px;
}
/* Feature grid styles (index page, .feature-grid, .service-cards, etc) */
.feature-grid, .service-cards, .blog-preview-grid, .testimonial-slider {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 20px;
justify-content: space-between;
}
.service-card, .blog-card {
background: var(--color-card);
border-radius: 14px;
box-shadow: 0 4px 20px rgba(58,70,100,0.07);
padding: 24px 20px;
min-width: 248px;
flex: 1 1 260px;
display: flex;
flex-direction: column;
transition: box-shadow 0.19s, transform 0.19s;
margin-bottom: 20px;
}
.service-card:hover, .blog-card:hover {
box-shadow: 0 8px 30px rgba(58,70,100,0.13);
transform: translateY(-4px) scale(1.03);
}
.service-card img {
width: 44px;
height: 44px;
margin-bottom: 12px;
filter: drop-shadow(0 1px 5px #c7ccdb70);
}
/* BLOG CARD TITLES */
.blog-card h3 {
font-size: 1.14rem;
color: var(--color-primary);
margin-bottom: 10px;
}
.blog-card p {
color: var(--color-muted);
}
.search-categories {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 20px;
align-items: center;
}
.search-categories input[type="text"] {
font-size: 1rem;
padding: 9px 18px;
border-radius: 7px;
border: 1.5px solid var(--color-secondary);
width: 300px;
background: var(--color-bg-light);
transition: border 0.19s;
}
.categories-nav {
display: flex;
gap: 14px;
align-items: center;
}
.categories-nav a {
color: var(--color-primary);
font-weight: 700;
font-size: 1rem;
padding: 7px 15px;
background: var(--color-accent);
border-radius: 7px;
transition: background .14s, color .14s;
}
.categories-nav a:hover {
background: var(--color-primary-dark);
color: #fff;
}
/* EDITOR INTRO (Blog) */
.editor-intro {
background: var(--color-secondary);
border-radius: 10px;
padding: 18px 16px;
color: var(--color-primary-dark);
font-weight: 500;
margin: 18px 0 0 0;
}
/* TIP LISTS */
.tip-list {
background: var(--color-accent);
border-radius: 7px;
padding: 16px 16px 10px 18px;
margin-bottom: 16px;
color: var(--color-primary-dark);
font-weight: 600;
}
.popular-tips {
margin-top: 15px;
}
.popular-tips ul li {
color: var(--color-primary);
font-weight: 700;
margin-bottom: 6px;
margin-left: 10px;
}
.how-to-guides ul {
margin-top: 10px;
}
.how-to-guides li {
padding-left: 10px;
color: var(--color-text);
margin-bottom: 8px;
}
/* PARTNER LOGOS (BÜRO) */
.partner-logos {
display: flex;
align-items: center;
gap: 28px;
margin-top: 15px;
flex-wrap: wrap;
}
.partner-logos img {
height: 32px;
opacity: 0.93;
}
/* STAR RATING (Testimonial) */
.stars {
color: #f0bc00;
letter-spacing: 2px;
font-size: 1.1rem;
margin-top: 7px;
font-family: var(--font-display);
}
/* TESTIMONIAL SLIDER (for row layout on desktop) */
.testimonial-slider {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: flex-start;
}
/* FOOTER */
footer {
background: var(--color-primary);
color: #fff;
padding: 28px 0 15px 0;
font-size: 1rem;
}
.footer-links {
display: flex;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.footer-links a {
color: var(--color-accent);
font-family: var(--font-display);
font-weight: 700;
border-radius: 4px;
font-size: 0.98rem;
padding: 5px 13px;
transition: background .14s, color .14s;
}
.footer-links a:hover {
background: var(--color-accent);
color: var(--color-primary);
}
.social-icons {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 12px;
}
.social-icons img {
width: 32px;
height: 32px;
background: var(--color-card);
border-radius: 50%;
padding: 5px;
box-shadow: 0 1px 3px #00000012;
transition: background .17s, box-shadow .18s;
cursor: pointer;
}
.social-icons img:hover {
background: var(--color-accent);
box-shadow: 0 4px 16px #F8E7B255;
}
.legal-info {
font-size: 0.95rem;
color: var(--color-secondary);
}
/* COOKIES CONSENT BANNER */
.cookie-banner {
position: fixed;
left: 20px; right: 20px; bottom: 24px;
z-index: 5000;
background: var(--color-card);
color: var(--color-text);
border-radius: 18px;
box-shadow: 0 4px 32px rgba(58,70,100,0.18);
padding: 28px 22px 18px 22px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
max-width: 440px;
transition: bottom .35s,
opacity .22s;
opacity: 1;
}
.cookie-banner.hide {
opacity: 0;
pointer-events: none;
bottom: 0;
}
.cookie-banner p {
font-size: 1rem;
}
.cookie-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 6px;
}
.cookie-btn {
background: var(--color-primary);
color: #fff;
border-radius: 9px;
padding: 8px 19px;
font-size: 1rem;
font-family: var(--font-display);
font-weight: 700;
cursor: pointer;
transition: background .18s, color .13s;
border: none;
}
.cookie-btn.accept {
background: var(--color-accent);
color: var(--color-primary);
}
.cookie-btn.reject {
background: #ec6363;
color: #fff;
}
.cookie-btn.settings {
background: var(--color-secondary);
color: var(--color-primary-dark);
}
.cookie-btn:hover, .cookie-btn:focus {
background: var(--color-btn-hover);
color: #fff;
}
.cookie-btn.accept:hover, .cookie-btn.accept:focus {
background: var(--color-primary-dark);
color: #fff;
}
.cookie-btn.settings:hover {
background: var(--color-accent);
color: var(--color-primary);
}
/* COOKIE MODAL */
.cookie-modal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(58, 70, 100, 0.29);
z-index: 10200;
display: none;
align-items: center;
justify-content: center;
transition: opacity 0.19s;
}
.cookie-modal-overlay.show {
display: flex;
}
.cookie-modal {
background: var(--color-card);
border-radius: 18px;
box-shadow: 0 8px 40px rgba(58, 70, 100, 0.15);
padding: 38px 32px 24px 32px;
min-width: 320px;
max-width: 455px;
display: flex;
flex-direction: column;
gap: 18px;
color: var(--color-text);
animation: cookieModalBounce .4s cubic-bezier(.5,-0.45,.2,1.80);
}
@keyframes cookieModalBounce {
0% { transform: scale(.8); opacity: 0; }
70% { transform: scale(1.04); }
100% { transform: scale(1); opacity: 1; }
}
.cookie-modal h2 {
font-size: 1.32rem;
margin-bottom: 10px;
color: var(--color-primary-dark);
}
.cookie-modal .category {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 9px;
}
.cookie-modal .category-label {
font-weight: 700;
color: var(--color-primary);
}
.cookie-modal .category-toggle input[type="checkbox"] {
width: 36px;
height: 20px;
accent-color: var(--color-accent);
}
.cookie-modal .essential {
color: var(--color-muted);
font-size: 0.97rem;
}
.cookie-modal .modal-actions {
display: flex;
gap: 14px;
margin-top: 14px;
}
/* GENERAL BUTTON STYLES */
button, .btn-primary, .cookie-btn {
cursor: pointer;
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
button:active, .btn-primary:active, .cookie-btn:active {
transform: scale(0.97);
}
/* ICON/IMAGE LIST STYLING */
ul li img {
display: inline-block;
vertical-align: top;
margin-right: 10px;
width: 23px;
height: 23px;
border-radius: 5px;
background: var(--color-secondary);
padding: 2px;
box-shadow: 0 1px 4px #c7ccdb40;
}
/* RESPONSIVE RULES */
@media (max-width: 1200px) {
.container { max-width: 990px; }
}
@media (max-width: 992px) {
nav { gap: 20px; }
.feature-grid, .service-cards, .blog-preview-grid, .testimonial-slider {
gap: 16px;
}
}
@media (max-width: 900px) {
.container {
max-width: 96vw;
padding: 0 10px;
}
.content-wrapper, .feature-grid, .service-cards, .blog-preview-grid, .testimonial-slider {
gap: 14px;
}
}
@media (max-width: 768px) {
nav { display: none; }
.mobile-menu-toggle { display: block; }
.container { padding-left: 8px; padding-right: 8px; }
.testimonial-slider {
flex-direction: column;
gap: 15px;
}
.feature-grid, .service-cards, .blog-preview-grid {
flex-direction: column;
gap: 13px;
}
.partner-logos {
gap: 14px;
}
.cookie-banner { left: 6px; right: 6px; padding: 22px 9px 16px 18px; min-width: none; max-width: none; border-radius: 15px; }
.cookie-modal { padding: 22px 9px 15px 17px; min-width: none; max-width: 96vw; border-radius: 10px; }
section { padding: 24px 0; }
.text-section { padding: 18px 10px; border-radius: 10px; }
}
@media (max-width: 600px) {
h1 { font-size: 1.68rem; }
h2 { font-size: 1.24rem; }
h3 { font-size: 1.07rem; }
.container { padding-left: 4px; padding-right: 4px; }
.feature-item, .service-card, .card {
min-width: unset;
padding: 15px 7px;
border-radius: 9px;
}
.testimonial-card { min-width: unset; padding: 14px 8px; border-radius: 8px; }
}
@media (max-width: 600px) {
.cookie-banner { font-size: 0.94rem; left: 2vw; right: 2vw; bottom: 8px; }
}
.text-image-section {
flex-direction: column;
gap: 20px;
}
@media (min-width: 769px) {
.text-image-section {
flex-direction: row;
align-items: center;
gap: 45px;
}
}
/* UTILITIES FOR BOLD, GEOMETRIC SEPARATORS */
.bold-divider {
height: 6px;
background: var(--color-accent);
border-radius: 4px;
margin: 40px 0;
width: 68px;
}
/* VISUAL SEPARATORS FOR CARDS (geometric) */
.card:before {
content: "";
display: block;
height: 5px;
width: 45px;
background: var(--color-accent);
border-radius: 4px;
margin-bottom: 16px;
}
/* Show the geometric divider only for feature-card/service-card */
.feature-item:before, .service-card:before, .testimonial-card:before {
display: none;
}
/* COLORED HIGHLIGHT ON ACTIVE BUTTONS */
.btn-primary:active,
.cookie-btn:active {
box-shadow: 0 2px 16px rgba(232,204,98,0.19);
}
/* ACCESSIBILITY: FOCUS STATES */
a:focus, button:focus, .btn-primary:focus, .cookie-btn:focus {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
/* SMOOTH ANIMATIONS */
.card, .service-card, .testimonial-card, .feature-item {
transition: box-shadow .18s, transform .19s, border-left-color .13s;
}
/* HIDE SCROLL FOR MOBILE MENU */
body.mobile-menu-open {
overflow: hidden;
}
/* End of Styles */