/* =====================================================================
GC-Fahrservice — Marketing site (premium rev.)
Brand anchor: #FFC400 (taxi yellow, from logo)
Typography: Manrope (display + body) · JetBrains Mono (mono)
Fonts are loaded via in each page (faster than @import).
===================================================================== */
:root {
/* Brand palette */
--gc-yellow: #FFC400;
--gc-yellow-600: #E5B000;
--gc-yellow-300: #FFE07A;
--gc-yellow-100: #FFF6D1;
--gc-yellow-50: #FFFBEC;
--gc-ink: #0E0E0E;
--gc-ink-700: #2A2A2A;
--gc-ink-500: #555555;
--gc-ink-400: #7A7A7A;
--gc-ink-300: #B3B3B3;
--gc-ink-200: #DCDCDC;
--gc-ink-100: #EFEFEF;
--gc-ink-50: #F7F7F6;
--gc-paper: #FFFFFF;
/* Token roles */
--fg-1: var(--gc-ink);
--fg-2: var(--gc-ink-700);
--fg-3: var(--gc-ink-500);
--fg-4: #6A6A6A; /* darkened from ink-400 (#7A7A7A) to clear 4.5:1 on white */
--bg-page: var(--gc-paper);
--bg-surface: var(--gc-ink-50);
--bg-tint: var(--gc-yellow-50);
--border-1: var(--gc-ink-200);
--accent: var(--gc-yellow);
--accent-strong: var(--gc-yellow-600);
--font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display: 'Manrope', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 18px;
--radius-xl: 28px;
--shadow-btn: 0 1px 2px rgba(14,14,14,0.08), 0 6px 16px -6px rgba(14,14,14,0.18);
--shadow-btn-hv: 0 2px 4px rgba(14,14,14,0.10), 0 14px 28px -10px rgba(14,14,14,0.28);
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 360ms;
}
/* ---- Reset / base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
color: var(--fg-2);
background: #FAFAF7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
[hidden] { display: none !important; }
/* Reserve space for JS-rendered Lucide icons to avoid icon-pop / layout shift */
[data-lucide] { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }
.btn [data-lucide] { width: 17px; height: 17px; }
/* Logo intrinsic ratio (1513×270) reserves width and prevents CLS */
.gc-header__logo img, .gc-footer__brand img { aspect-ratio: 1513 / 270; }
/* Anchored sections clear the 80px sticky header */
:target, [id] { scroll-margin-top: 96px; }
/* Respect reduced-motion: disable transitions, animations and smooth scroll */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---- Semantic typography -------------------------------------------- */
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
color: var(--fg-1);
margin: 0;
}
h1 { font-weight: 800; font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-weight: 800; font-size: clamp(1.75rem, 3.5vw, 3rem); line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-weight: 700; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
h5 { font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
p { margin: 0; line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
::selection { background: var(--gc-yellow); color: var(--gc-ink); }
/* ---- Focus ring -----------------------------------------------------
Ink outline (high contrast on the light surfaces that dominate the site)
plus an accent halo. On dark sections we switch to the accent outline,
which has strong contrast against ink/black. */
:where(a, button, input, textarea, select):focus-visible {
outline: 2px solid var(--gc-ink);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.55);
border-radius: 4px;
}
.section--ink :focus-visible,
.kontakt :focus-visible,
.gc-footer :focus-visible,
.svc-card--premium:focus-visible {
outline-color: var(--accent);
box-shadow: 0 0 0 4px rgba(14, 14, 14, 0.55);
}
/* ---- Containers ----------------------------------------------------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: 980px; }
/* ===== Header ======================================================== */
.gc-header {
position: sticky; top: 0; z-index: 50;
background: rgba(250, 250, 247, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(14, 14, 14, 0.06);
}
.gc-header__inner {
display: flex; align-items: center; justify-content: space-between;
height: 80px;
}
.gc-header__logo img { height: 32px; }
.gc-header nav { display: flex; gap: 36px; align-items: center; }
.gc-header nav a {
font-size: 13px; font-weight: 500; color: var(--fg-2);
letter-spacing: -0.005em;
position: relative; padding: 8px 0;
transition: color 160ms var(--ease-out);
}
.gc-header nav a:hover { color: var(--fg-1); }
.gc-header nav a.is-active { color: var(--fg-1); }
.gc-header nav a.is-active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
background: var(--accent);
}
.gc-header__cta { display: flex; align-items: center; gap: 14px; }
.gc-header__phone {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-weight: 600; font-size: 13px;
color: var(--fg-1); padding: 8px 4px;
}
.gc-header__phone i { width: 14px; height: 14px; color: var(--accent); }
/* ===== Button ======================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-sans);
font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
height: 52px; padding: 0 24px;
border: none; border-radius: var(--radius-md);
cursor: pointer; white-space: nowrap;
position: relative;
transition: background var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--lg { font-size: 14.5px; padding: 0 30px; height: 56px; }
.btn--sm { height: 40px; font-size: 12.5px; padding: 0 16px; border-radius: var(--radius-sm); }
.btn--primary {
background: var(--accent); color: var(--gc-ink);
box-shadow: var(--shadow-btn), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn--primary:hover {
background: var(--accent-strong);
box-shadow: var(--shadow-btn-hv), inset 0 1px 0 rgba(255,255,255,0.4);
transform: translateY(-1px);
}
.btn--ink {
background: var(--gc-ink); color: #fff;
box-shadow: var(--shadow-btn), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn--ink:hover {
background: var(--gc-ink-700);
box-shadow: var(--shadow-btn-hv), inset 0 1px 0 rgba(255,255,255,0.12);
transform: translateY(-1px);
}
.btn--ghost {
background: transparent; color: var(--fg-1);
box-shadow: inset 0 0 0 1px rgba(14,14,14,0.18);
}
.btn--ghost:hover {
background: rgba(14,14,14,0.04);
box-shadow: inset 0 0 0 1px var(--gc-ink);
transform: translateY(-1px);
}
.btn--ghost-dark {
background: transparent; color: #fff;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.btn--ghost-dark:hover {
background: rgba(255,255,255,0.06);
box-shadow: inset 0 0 0 1px #fff;
transform: translateY(-1px);
}
.btn i { width: 17px; height: 17px; stroke-width: 2; }
/* ===== Hero ========================================================== */
.hero { padding: 88px 0 96px; background: #FAFAF7; }
.hero__inner {
display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px;
align-items: center;
}
.hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--fg-3); margin-bottom: 28px;
}
.hero__eyebrow::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.hero h1 {
font-size: clamp(2.8rem, 6.5vw, 5.5rem);
line-height: 0.98; letter-spacing: -0.035em;
font-weight: 800;
margin: 0 0 32px;
color: var(--gc-ink);
}
.hero h1 em {
font-style: normal;
font-weight: 800;
color: var(--gc-ink);
position: relative;
isolation: isolate;
}
.hero h1 em::after {
content: "";
position: absolute;
left: 2px; right: 4px; bottom: 0.08em;
height: 0.34em;
background: linear-gradient(90deg, var(--accent) 0%, rgba(255,196,0,0.6) 100%);
z-index: -1;
border-radius: 2px;
}
.hero .lead {
font-size: 19px; line-height: 1.55;
color: var(--fg-2); max-width: 520px;
margin: 0 0 36px;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__art {
position: relative; aspect-ratio: 1 / 1;
border-radius: 24px; overflow: hidden;
background: radial-gradient(120% 80% at 30% 20%, #2a2a2a 0%, #0E0E0E 70%);
}
.hero__art-mark {
position: absolute; bottom: 24px; left: 24px;
display: flex; align-items: center; gap: 10px;
color: rgba(255, 255, 255, 0.55);
font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.hero__art-mark::before { content: ""; width: 24px; height: 1px; background: rgba(255, 255, 255, 0.4); }
.hero__art-icon {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 55%; opacity: 0.14;
filter: brightness(0) invert(1);
}
.hero__art-caption {
position: absolute; top: 24px; right: 24px;
font-family: var(--font-mono); font-size: 11px;
color: rgba(255, 255, 255, 0.6); letter-spacing: 0.04em;
}
/* ===== Stat row ====================================================== */
.stat-row {
background: #FFFFFF;
border-top: 1px solid rgba(14, 14, 14, 0.06);
border-bottom: 1px solid rgba(14, 14, 14, 0.06);
}
.stat-row__inner {
display: grid; grid-template-columns: repeat(4, 1fr);
padding: 36px 0;
}
.stat { padding: 0 32px; border-left: 1px solid rgba(14, 14, 14, 0.06); display: flex; flex-direction: column; gap: 4px; }
.stat:first-child { border-left: none; }
.stat__n { font-weight: 800; font-size: 32px; color: var(--gc-ink); letter-spacing: -0.025em; line-height: 1; }
.stat__l { font-size: 13px; color: var(--fg-3); letter-spacing: 0.02em; }
/* ===== Sections ====================================================== */
.section { padding: 120px 0; }
.section--paper { background: #fff; }
.section--surface { background: #FAFAF7; }
.section--ink { background: var(--gc-ink); color: #cccccc; }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink .eyebrow { color: var(--accent); }
.section__head {
display: grid; grid-template-columns: 1fr auto;
align-items: end; gap: 32px; margin-bottom: 64px;
}
.section__head h2 { margin: 14px 0 0; max-width: 760px; }
.section__head h2 em { font-style: normal; color: var(--fg-3); font-weight: 800; }
.section--ink .section__head h2 em { color: #6a6a6a; }
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--fg-3);
}
.eyebrow::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
/* ===== Service grid ================================================== */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card {
position: relative; overflow: hidden;
background: #fff;
border-radius: 20px;
padding: 28px;
display: flex; flex-direction: column; gap: 16px;
border: 1px solid rgba(14, 14, 14, 0.08);
box-shadow: 0 1px 2px rgba(14, 14, 14, 0.03);
color: inherit;
transition: transform 320ms var(--ease-out),
border-color 320ms var(--ease-out),
box-shadow 320ms var(--ease-out);
min-height: 280px;
}
.svc-card:hover {
transform: translateY(-4px);
border-color: var(--gc-ink);
box-shadow: 0 18px 40px rgba(14, 14, 14, 0.10);
}
.svc-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.svc-card__num {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
color: var(--fg-4); padding-top: 6px;
}
.svc-card__chip {
width: 52px; height: 52px; border-radius: 14px;
background: var(--gc-yellow-50);
color: var(--gc-ink);
display: flex; align-items: center; justify-content: center;
transition: background 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.svc-card__chip i { width: 24px; height: 24px; }
.svc-card:hover .svc-card__chip { background: var(--accent); transform: rotate(-6deg); }
.svc-card h3 {
font-size: 24px; font-weight: 800; margin: 0;
color: var(--gc-ink); letter-spacing: -0.02em; line-height: 1.15;
}
.svc-card p { margin: 0; font-size: 14px; color: var(--fg-3); line-height: 1.55; }
.svc-card__foot {
display: flex; justify-content: space-between; align-items: flex-end;
margin-top: auto; padding-top: 18px;
border-top: 1px solid rgba(14, 14, 14, 0.06);
}
.svc-card__price-wrap { display: flex; flex-direction: column; gap: 4px; }
.svc-card__price-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-4); }
.svc-card__price { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--gc-ink); }
.svc-card__arrow {
width: 38px; height: 38px; border-radius: 50%;
background: var(--gc-ink); color: #fff;
display: flex; align-items: center; justify-content: center;
transition: background 320ms var(--ease-out), color 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.svc-card__arrow i { width: 16px; height: 16px; }
.svc-card:hover .svc-card__arrow { background: var(--accent); color: var(--gc-ink); transform: translateX(4px); }
.svc-card--premium { background: var(--gc-ink); border-color: var(--gc-ink); color: #fff; }
.svc-card--premium h3 { color: #fff; }
.svc-card--premium p { color: #a8a8a8; }
.svc-card--premium .svc-card__num { color: var(--accent); }
.svc-card--premium .svc-card__chip { background: rgba(255, 196, 0, 0.14); color: var(--accent); }
.svc-card--premium:hover .svc-card__chip { background: var(--accent); color: var(--gc-ink); }
.svc-card--premium .svc-card__foot { border-top-color: #2a2a2a; }
.svc-card--premium .svc-card__price-lbl { color: #7a7a7a; }
.svc-card--premium .svc-card__price { color: var(--accent); }
.svc-card--premium .svc-card__arrow { background: var(--accent); color: var(--gc-ink); }
.svc-card--premium:hover .svc-card__arrow { background: #fff; }
.svc-card--premium::before {
content: ""; position: absolute; inset: 0;
background: repeating-linear-gradient(135deg, transparent 0 26px, rgba(255, 196, 0, 0.04) 26px 27px);
pointer-events: none;
}
.svc-card__ribbon {
position: absolute; top: 16px; right: 16px;
display: inline-flex; align-items: center; gap: 5px;
background: var(--accent); color: var(--gc-ink);
font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
padding: 5px 10px; border-radius: 999px;
}
.svc-card__ribbon i { width: 11px; height: 11px; }
/* ===== Why us ======================================================== */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.why-cell {
padding: 32px 28px;
display: grid; grid-template-columns: 80px 1fr; gap: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.why-cell:nth-child(2n) { border-right: none; }
.why-cell:nth-child(1), .why-cell:nth-child(2) { border-top: none; padding-top: 8px; }
.why-cell__num {
font-family: var(--font-mono); font-size: 13px; font-weight: 600;
color: var(--accent); padding-top: 8px;
}
.why-cell h4 { font-size: 22px; margin: 0 0 8px; font-weight: 700; letter-spacing: -0.015em; }
.why-cell p { font-size: 14px; margin: 0; color: #a8a8a8; line-height: 1.6; }
/* ===== About split =================================================== */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.split__art {
aspect-ratio: 1 / 1; border-radius: 24px;
background: linear-gradient(135deg, #1a1a1a 0%, #0E0E0E 100%);
position: relative; overflow: hidden;
}
.split__art img:not(.art-photo) { position: absolute; bottom: 24px; left: 24px; width: 64px; opacity: 0.85; filter: brightness(0) invert(1); }
.split__art-caption {
position: absolute; top: 24px; right: 24px;
font-family: var(--font-mono); font-size: 11px;
color: rgba(255, 255, 255, 0.55); letter-spacing: 0.04em;
}
.split h2 { font-size: clamp(2rem, 4vw, 3.25rem); margin: 16px 0 24px; }
.split p { font-size: 17px; line-height: 1.7; color: var(--fg-2); margin: 0 0 18px; }
.split blockquote {
margin: 32px 0 0; padding: 24px 0 0;
border-top: 1px solid rgba(14, 14, 14, 0.1);
font-size: 18px; font-weight: 600; color: var(--gc-ink);
font-style: italic;
}
/* ===== Testimonials ================================================== */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi {
background: #fff;
border-radius: 18px;
padding: 32px;
border: 1px solid rgba(14, 14, 14, 0.06);
display: flex; flex-direction: column; gap: 20px;
}
.testi__stars { color: var(--accent); display: flex; gap: 2px; }
.testi__stars i { width: 16px; height: 16px; fill: currentColor; }
.testi__quote { font-size: 17px; color: var(--gc-ink); line-height: 1.55; margin: 0; letter-spacing: -0.005em; }
.testi__by {
display: flex; align-items: center; gap: 12px;
margin-top: auto; padding-top: 8px;
border-top: 1px solid rgba(14, 14, 14, 0.06);
}
.testi__avatar {
width: 40px; height: 40px; border-radius: 50%;
background: var(--gc-ink); color: var(--accent);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
}
.testi__name { font-size: 14px; font-weight: 700; color: var(--gc-ink); }
.testi__meta { font-size: 12px; color: var(--fg-3); }
/* ===== Contact section =============================================== */
.kontakt {
background: var(--gc-ink); color: #cccccc;
padding: 120px 0; position: relative;
}
.kontakt__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.kontakt h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 16px 0 24px; }
.kontakt .lead { font-size: 17px; color: #a8a8a8; max-width: 460px; margin: 0 0 40px; line-height: 1.6; }
.kontakt__methods { display: flex; flex-direction: column; gap: 16px; }
.kontakt__method {
display: flex; align-items: center; gap: 16px;
padding: 18px 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
a.kontakt__method:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 196, 0, 0.4);
}
.kontakt__method-icon {
width: 44px; height: 44px; border-radius: 12px;
background: var(--accent); color: var(--gc-ink);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.kontakt__method-icon i { width: 20px; height: 20px; }
.kontakt__method-icon--soft {
background: rgba(255, 196, 0, 0.18); color: var(--accent);
}
.kontakt__method-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #a8a8a8; }
.kontakt__method-value { font-size: 16px; font-weight: 700; color: #fff; margin-top: 2px; }
.kontakt__method-value--addr { font-size: 15px; font-weight: 600; line-height: 1.5; }
.kontakt__form {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 32px;
}
.kontakt__form h3 { color: #fff; font-size: 20px; margin: 0 0 20px; font-weight: 700; }
.kontakt__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kontakt__form-grid .full { grid-column: 1 / -1; }
.kontakt__field { display: flex; flex-direction: column; gap: 6px; }
.kontakt__field label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #a8a8a8; }
.kontakt__field input,
.kontakt__field textarea,
.kontakt__field select {
font-family: inherit; font-size: 15px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
border-radius: 10px; padding: 13px 14px;
width: 100%; outline: none;
transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.kontakt__field textarea { resize: vertical; min-height: 110px; }
.kontakt__field input:focus,
.kontakt__field textarea:focus,
.kontakt__field select:focus {
border-color: var(--accent);
background: rgba(255, 255, 255, 0.08);
}
.kontakt__field input::placeholder,
.kontakt__field textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.kontakt__form .btn { width: 100%; margin-top: 16px; }
.kontakt__form-hint { font-size: 11px; color: rgba(255, 255, 255, 0.5); margin-top: 14px; text-align: center; }
.kontakt__success {
display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px 0;
}
.kontakt__success-icon {
width: 64px; height: 64px; border-radius: 50%;
background: var(--accent); color: var(--gc-ink);
display: flex; align-items: center; justify-content: center;
animation: pop 360ms var(--ease-spring);
}
.kontakt__success-icon i { width: 32px; height: 32px; }
.kontakt__success h3 { margin: 0; }
.kontakt__success p { color: #a8a8a8; margin: 0; text-align: center; }
@keyframes pop {
from { transform: scale(0.5); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ===== Footer ======================================================== */
.gc-footer { background: #000; color: #999; padding: 64px 0 32px; }
.gc-footer__top {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
padding-bottom: 40px; border-bottom: 1px solid #1a1a1a;
}
.gc-footer__brand img { height: 36px; filter: brightness(0) invert(1); margin-bottom: 18px; }
.gc-footer__brand p { font-size: 13px; line-height: 1.65; max-width: 320px; margin: 0; color: #999; }
.gc-footer h2 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 18px; font-weight: 700; }
.gc-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gc-footer a { font-size: 14px; color: #c8c8c8; transition: color 160ms; }
.gc-footer a:hover { color: var(--accent); }
.gc-footer__addr { font-size: 14px; color: #999; line-height: 1.6; }
.gc-footer__bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 24px; font-size: 12px; color: #9a9a9a;
}
/* ===== Page transitions ============================================== */
.page { animation: fade-up 360ms var(--ease-out); }
@keyframes fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* ===== Service detail ================================================ */
.svc-hero {
padding: 80px 0 48px;
display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: start;
}
.svc-hero h1 {
font-size: clamp(2.25rem, 4.5vw, 3.75rem);
margin: 16px 0 24px;
letter-spacing: -0.03em; line-height: 1.05;
}
.svc-hero .lead { font-size: 18px; line-height: 1.6; color: var(--fg-2); max-width: 540px; margin: 0 0 16px; }
.svc-hero__art {
background: var(--gc-ink); border-radius: 24px;
aspect-ratio: 1 / 1;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
margin-bottom: 24px;
}
.svc-hero__art img:not(.art-photo) { width: 55%; opacity: 0.85; filter: brightness(0) invert(1); }
.feature-list { display: grid; gap: 14px; margin: 24px 0 32px; padding: 0; list-style: none; }
.feature-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; color: var(--fg-2); }
.feature-list i {
width: 18px; height: 18px; color: var(--gc-ink);
flex: 0 0 auto; padding: 4px;
background: var(--accent); border-radius: 999px;
}
.price-card {
background: #fff; border-radius: 18px;
border: 1px solid rgba(14, 14, 14, 0.08);
padding: 24px;
display: grid; gap: 12px;
}
.price-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--fg-2); }
.price-row.total { font-weight: 800; font-size: 18px; color: var(--gc-ink); padding-top: 12px; border-top: 1px solid rgba(14, 14, 14, 0.08); }
.mono { font-family: var(--font-mono); font-weight: 600; color: var(--gc-ink); }
/* ===== Prose (About, Impressum) ====================================== */
.prose { max-width: 760px; margin: 0 auto; padding: 96px 32px; }
.prose h1 { margin: 16px 0 32px; font-size: clamp(2.25rem, 4vw, 3.5rem); letter-spacing: -0.03em; }
.prose p { font-size: 17px; line-height: 1.75; color: var(--fg-2); margin: 0 0 20px; }
.prose .impress-grid {
display: grid; grid-template-columns: 1fr 2fr; gap: 14px 32px;
margin-top: 40px; padding-top: 32px;
border-top: 1px solid rgba(14, 14, 14, 0.08);
}
.prose .impress-grid dt { font-weight: 700; color: var(--gc-ink); font-size: 14px; }
.prose .impress-grid dd { margin: 0; color: var(--fg-2); font-size: 15px; }
/* ===== Service overview page hero ==================================== */
.page-hero {
padding: 88px 0 56px; background: #FAFAF7;
}
.page-hero h1 {
font-size: clamp(2.5rem, 5vw, 4.25rem);
letter-spacing: -0.03em; line-height: 1; margin: 16px 0 20px;
max-width: 880px;
}
.page-hero p { font-size: 18px; color: var(--fg-2); max-width: 640px; line-height: 1.6; }
/* ===== Skip link ===================================================== */
.skip-link {
position: absolute; left: 16px; top: -60px; z-index: 200;
background: var(--gc-ink); color: #fff;
padding: 10px 16px; border-radius: var(--radius-sm);
font-size: 14px; font-weight: 600;
transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 16px; }
/* ===== Form validation states ======================================== */
.kontakt__field .req { color: var(--accent); margin-left: 2px; }
.kontakt__field-error {
font-size: 12px; font-weight: 600; color: #FFB4A8;
display: none; margin-top: 2px;
}
.kontakt__field[data-invalid] .kontakt__field-error { display: block; }
.kontakt__field[data-invalid] input,
.kontakt__field[data-invalid] textarea,
.kontakt__field[data-invalid] select {
border-color: #FF6B57;
background: rgba(255, 107, 87, 0.08);
}
.kontakt__form-status[role="alert"] {
display: none;
font-size: 13px; color: #FFB4A8; font-weight: 600;
margin-top: 12px;
}
.kontakt__form-status[data-shown] { display: block; }
/* ===== Mobile header: burger + drawer ================================ */
.gc-header__burger {
display: none; /* shown on mobile via media query */
width: 44px; height: 44px;
align-items: center; justify-content: center;
background: transparent; border: none; cursor: pointer;
color: var(--fg-1); border-radius: var(--radius-sm);
margin-left: 4px;
}
.gc-header__burger i { width: 24px; height: 24px; }
.gc-header__phone--icon {
display: none; /* compact tap-to-call shown on mobile */
width: 44px; height: 44px;
align-items: center; justify-content: center;
color: var(--gc-ink); background: var(--accent);
border-radius: var(--radius-sm);
}
.gc-header__phone--icon i { width: 20px; height: 20px; }
.mobile-nav {
position: fixed; inset: 0; z-index: 100;
display: flex; flex-direction: column;
background: rgba(250, 250, 247, 0.98);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
opacity: 0; visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out),
visibility var(--dur-base) var(--ease-out);
}
.mobile-nav[data-open] { opacity: 1; visibility: visible; transform: none; }
.mobile-nav__head { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.mobile-nav__head img { height: 32px; aspect-ratio: 1513 / 270; }
.mobile-nav__close {
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
background: transparent; border: none; cursor: pointer; color: var(--fg-1);
border-radius: var(--radius-sm);
}
.mobile-nav__close i { width: 26px; height: 26px; }
.mobile-nav__links { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.mobile-nav__links a {
font-size: 22px; font-weight: 700; color: var(--fg-1);
letter-spacing: -0.02em; padding: 14px 4px;
border-bottom: 1px solid rgba(14, 14, 14, 0.08);
min-height: 44px; display: flex; align-items: center;
}
.mobile-nav__links a.is-active { color: var(--accent-strong); }
.mobile-nav__cta { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
body[data-nav-open] { overflow: hidden; }
/* ===== Responsive ==================================================== */
@media (max-width: 960px) {
.container { padding: 0 20px; }
.hero__inner, .split, .kontakt__inner, .svc-hero { grid-template-columns: 1fr; gap: 40px; }
.svc-grid, .testi-grid { grid-template-columns: 1fr; }
.why-grid { grid-template-columns: 1fr; }
.why-cell { border-right: none; }
.why-cell:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 32px; }
.gc-footer__top { grid-template-columns: 1fr 1fr; }
.stat-row__inner { grid-template-columns: 1fr 1fr; }
.stat { padding: 20px; }
.stat:nth-child(3) { border-top: 1px solid rgba(14, 14, 14, 0.06); }
.stat:nth-child(odd) { border-left: none; }
.gc-header nav { display: none; }
.gc-header__burger { display: flex; }
.gc-header__phone--icon { display: flex; }
.gc-header__cta .gc-header__phone { display: none; }
.gc-header__cta .btn--ink.btn--sm { display: none; }
.btn--sm { height: 44px; }
.kontakt__form-grid { grid-template-columns: 1fr; }
.section, .kontakt { padding: 72px 0; }
.hero { padding: 56px 0 72px; }
.btn { width: 100%; }
.hero__actions { flex-direction: column; align-items: stretch; }
.gc-footer__bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}
@media (max-width: 540px) {
.gc-footer__top { grid-template-columns: 1fr; }
}
/* =====================================================================
Premium refresh (rev. 2) — same brand identity, more depth & polish
===================================================================== */
/* --- All buttons unified to 55px tall (per brief) ------------------- */
.btn, .btn--lg, .btn--sm { height: 55px; }
.btn--sm { font-size: 13px; }
.btn--primary {
background: linear-gradient(180deg, #FFD23D 0%, var(--accent) 52%, var(--accent-strong) 100%);
}
.btn--primary:hover { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); }
/* --- Eyebrow → refined pill badge ----------------------------------- */
.eyebrow, .hero__eyebrow {
padding: 7px 13px 7px 11px;
background: var(--gc-yellow-50);
border: 1px solid rgba(229, 176, 0, 0.35);
border-radius: 999px;
}
.section--ink .eyebrow,
.kontakt .eyebrow { background: rgba(255, 196, 0, 0.10); border-color: rgba(255, 196, 0, 0.28); }
/* --- Photo art system (hero / about / service hero) — clean 1:1 ------
Photos are shown clearly (no heavy dark overlay). A faint inner ring
frames them crisply on light surfaces; a whisper of bottom shade adds
depth without hiding the image. */
.art-photo {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
.hero__art, .split__art, .svc-hero__art {
background: var(--gc-ink-100);
box-shadow: 0 2px 6px rgba(14,14,14,0.05),
0 28px 56px -30px rgba(14,14,14,0.40);
}
.hero__art::after, .split__art::after, .svc-hero__art::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(14,14,14,0.07);
background: linear-gradient(180deg, transparent 64%, rgba(14,14,14,0.16) 100%);
}
.hero__art > *:not(.art-photo),
.split__art > *:not(.art-photo),
.svc-hero__art > *:not(.art-photo) { position: relative; z-index: 2; }
/* hide old placeholder logo overlays + leftover mono captions */
.hero__art-icon, .hero__art-caption, .hero__art-mark,
.split__art-caption,
.split__art img:not(.art-photo),
.svc-hero__art img:not(.art-photo) { display: none; }
/* --- Hero: warm backdrop + soft accent glow ------------------------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
content: ""; position: absolute; top: -25%; right: -8%; z-index: 0;
width: 58%; height: 130%; pointer-events: none;
background: radial-gradient(closest-side, rgba(255,196,0,0.16), transparent 72%);
}
.hero__inner { position: relative; z-index: 1; }
/* --- Service cards: a touch more depth ------------------------------ */
.svc-card { border-radius: 22px; }
.svc-card:hover { box-shadow: 0 26px 52px -20px rgba(14,14,14,0.22); }
/* --- Mobile full-page menu polish ----------------------------------- */
.mobile-nav { background: rgba(250, 250, 247, 0.99); }
.mobile-nav__links a { font-size: 26px; padding: 16px 4px; }
/* =====================================================================
Motion + polish (rev. 3) — premium entrance animations, cleaner look
===================================================================== */
:root {
/* one global easing for all entrance motion → consistent rhythm */
--ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
--dur-reveal: 820ms;
}
/* --- Scroll reveal: fade + gentle rise ------------------------------ */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--dur-reveal) var(--ease-soft),
transform var(--dur-reveal) var(--ease-soft);
will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* Photos settle out of a soft zoom as their frame reveals */
.reveal .art-photo {
transform: scale(1.08);
transition: transform 1200ms var(--ease-soft);
will-change: transform;
}
.reveal.is-in .art-photo { transform: none; }
/* --- Hero entrance: staggered, plays on load ------------------------ */
.hero__eyebrow,
.hero h1,
.hero .lead,
.hero__actions { animation: gc-rise 900ms var(--ease-soft) both; }
.hero h1 { animation-delay: 70ms; }
.hero .lead { animation-delay: 150ms; }
.hero__actions { animation-delay: 230ms; }
.hero__art { animation: gc-rise-media 1100ms var(--ease-soft) 130ms both; }
@keyframes gc-rise {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: none; }
}
@keyframes gc-rise-media {
from { opacity: 0; transform: translateY(28px) scale(0.96); }
to { opacity: 1; transform: none; }
}
/* The hero photo itself drifts out of a slow zoom for depth */
.hero__art .art-photo { animation: gc-photo-settle 1600ms var(--ease-soft) 130ms both; }
@keyframes gc-photo-settle {
from { transform: scale(1.12); }
to { transform: none; }
}
/* Reduced motion: show everything immediately, no movement */
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal .art-photo { opacity: 1; transform: none; transition: none; }
.hero__eyebrow, .hero h1, .hero .lead, .hero__actions,
.hero__art, .hero__art .art-photo { animation: none; opacity: 1; transform: none; }
}
/* --- Service cards: cleaner premium card (drop the AI stripe) ------- */
.svc-card--premium::before {
background: radial-gradient(120% 90% at 100% 0%, rgba(255,196,0,0.10), transparent 60%);
}
/* de-clutter: hide the templated "01 — Service" number labels */
.svc-card__num { display: none; }
.svc-card__top { justify-content: flex-end; }
.svc-card__ribbon { left: 16px; right: auto; }
/* --- Hero photo: tasteful floating trust badge ---------------------- */
.hero__badge {
position: absolute; left: 16px; bottom: 16px; z-index: 3;
display: inline-flex; align-items: center; gap: 11px;
padding: 11px 15px 11px 12px;
background: rgba(255,255,255,0.94);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(14,14,14,0.06), 0 14px 30px -16px rgba(14,14,14,0.55);
}
.hero__badge-icon {
width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
background: var(--accent); color: var(--gc-ink);
display: flex; align-items: center; justify-content: center;
}
.hero__badge-icon i { width: 19px; height: 19px; stroke-width: 2.4; }
.hero__badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.hero__badge-text strong { font-size: 13.5px; font-weight: 800; color: var(--gc-ink); letter-spacing: -0.01em; }
.hero__badge-text span { font-size: 11.5px; color: var(--fg-3); margin-top: 1px; }
/* --- Type & rhythm: a touch more air, calmer accents ---------------- */
.section__head h2 em,
.section--ink .section__head h2 em { font-weight: 800; }
.hero h1 { font-size: clamp(2.7rem, 6vw, 5rem); }
.hero .lead { color: var(--fg-3); }
/* Links in nav / footer get a smoother accent on hover */
.gc-header nav a::after,
.svc-card__chip, .svc-card__arrow { transition-timing-function: var(--ease-soft); }
/* --- Header: subtle elevation once the page is scrolled ------------- */
.gc-header {
transition: box-shadow 260ms var(--ease-soft), background-color 260ms var(--ease-soft);
}
.gc-header.is-scrolled {
background: rgba(250, 250, 247, 0.97);
box-shadow: 0 1px 0 rgba(14,14,14,0.05), 0 10px 30px -20px rgba(14,14,14,0.35);
}
/* --- Consistent, calm hover lift on content cards ------------------- */
.testi {
transition: transform 340ms var(--ease-soft),
box-shadow 340ms var(--ease-soft),
border-color 340ms var(--ease-soft);
}
.testi:hover {
transform: translateY(-4px);
border-color: rgba(14,14,14,0.12);
box-shadow: 0 24px 48px -26px rgba(14,14,14,0.24);
}
.kontakt__method {
transition: background 240ms var(--ease-soft),
border-color 240ms var(--ease-soft),
transform 240ms var(--ease-soft);
}
a.kontakt__method:hover { transform: translateY(-2px); }
/* --- Price card: lift it onto the same premium plane --------------- */
.price-card {
box-shadow: 0 1px 2px rgba(14,14,14,0.04), 0 18px 40px -28px rgba(14,14,14,0.30);
}
/* --- Tighten the reveal on very large screens (feels snappier) ------ */
@media (min-width: 1100px) {
:root { --dur-reveal: 760ms; }
}
/* --- Mobile: keep the hero badge readable, art comfortably sized ---- */
@media (max-width: 600px) {
.hero__badge { left: 12px; bottom: 12px; padding: 9px 13px 9px 10px; }
.hero__badge-icon { width: 32px; height: 32px; }
.hero__badge-text strong { font-size: 12.5px; }
.hero__badge-text span { font-size: 11px; }
}
/* =====================================================================
Rev. 4 — One-pager redesign: noticeably less black, refined hero,
burger-only mobile nav with aligned close, lighter restructured footer.
Brand colours unchanged — only the section treatments change.
===================================================================== */
/* ---- Hero: refined elegant split ---------------------------------- */
.hero { padding: 92px 0 100px; }
.hero__inner { gap: 72px; align-items: center; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; max-width: 100%; }
/* never let a child blow out the grid track on small screens (no h-scroll) */
.hero__inner > * { min-width: 0; }
.page { overflow-x: clip; }
.hero__stars { display: inline-flex; gap: 1px; color: var(--accent-strong); }
.hero__stars i { width: 13px; height: 13px; fill: currentColor; stroke-width: 0; }
.hero h1 { margin: 0 0 24px; }
.hero .lead { margin-bottom: 30px; }
.hero__trust {
list-style: none; margin: 30px 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 12px 24px;
}
.hero__trust li {
display: inline-flex; align-items: center; gap: 9px;
font-size: 14px; font-weight: 600; color: var(--fg-2);
}
.hero__trust i {
width: 18px; height: 18px; color: var(--gc-ink);
background: var(--accent); border-radius: 999px; padding: 3px;
stroke-width: 3; flex: 0 0 auto;
}
/* ---- "Warum uns": full-black section → light, refined cards -------- */
.section--ink { background: var(--bg-surface); color: var(--fg-2); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: var(--gc-ink); }
.section--ink .eyebrow {
color: var(--fg-3);
background: var(--gc-yellow-50); border-color: rgba(229,176,0,0.35);
}
.section--ink .section__head h2 em { color: var(--fg-3); }
.section--ink :focus-visible { outline-color: var(--gc-ink); box-shadow: 0 0 0 4px rgba(255,196,0,0.55); }
.why-grid { gap: 18px; }
.why-cell {
background: #fff; border: 1px solid var(--border-1); border-radius: 18px;
padding: 30px 28px; grid-template-columns: 52px 1fr; gap: 18px;
transition: border-color 320ms var(--ease-soft),
box-shadow 320ms var(--ease-soft),
transform 320ms var(--ease-soft);
}
.why-cell:nth-child(2n) { border-right: 1px solid var(--border-1); }
.why-cell:nth-child(1),
.why-cell:nth-child(2) { border-top: 1px solid var(--border-1); padding-top: 30px; }
.why-cell:hover {
border-color: var(--gc-ink);
box-shadow: 0 24px 48px -28px rgba(14,14,14,0.22);
transform: translateY(-3px);
}
.why-cell__num { color: var(--accent-strong); font-size: 14px; }
.why-cell p { color: var(--fg-3); }
/* ---- Kontakt: full-black section → light, white form card --------- */
.kontakt { background: var(--bg-surface); color: var(--fg-2); }
.kontakt h2 { color: var(--gc-ink); }
.kontakt .lead { color: var(--fg-3); }
.kontakt .eyebrow {
color: var(--fg-3);
background: var(--gc-yellow-50); border-color: rgba(229,176,0,0.35);
}
.kontakt :focus-visible { outline-color: var(--gc-ink); box-shadow: 0 0 0 4px rgba(255,196,0,0.55); }
.kontakt__method { background: #fff; border-color: var(--border-1); }
a.kontakt__method:hover { background: #fff; border-color: var(--gc-ink); }
.kontakt__method-label { color: var(--fg-4); }
.kontakt__method-value { color: var(--gc-ink); }
.kontakt__form {
background: #fff; border-color: var(--border-1);
box-shadow: 0 1px 2px rgba(14,14,14,0.04), 0 30px 64px -40px rgba(14,14,14,0.40);
}
.kontakt__form h3 { color: var(--gc-ink); }
.kontakt__field label { color: var(--fg-3); }
.kontakt__field input,
.kontakt__field textarea,
.kontakt__field select {
background: var(--gc-ink-50); border-color: var(--border-1); color: var(--gc-ink);
}
.kontakt__field input::placeholder,
.kontakt__field textarea::placeholder { color: var(--fg-4); }
.kontakt__field input:focus,
.kontakt__field textarea:focus,
.kontakt__field select:focus { border-color: var(--accent); background: #fff; }
.kontakt__form-hint { color: var(--fg-4); }
.kontakt__success p { color: var(--fg-3); }
.kontakt__field-error,
.kontakt__form-status[role="alert"] { color: #C0392B; }
.kontakt__field[data-invalid] input,
.kontakt__field[data-invalid] textarea,
.kontakt__field[data-invalid] select {
border-color: #E0533D; background: rgba(224,83,61,0.06);
}
/* ---- Footer: from pure black → light & restructured ---------------- */
.gc-footer {
background: var(--gc-ink-50); color: var(--fg-3);
border-top: 1px solid var(--border-1);
padding: 60px 0 28px;
}
.gc-footer__top {
grid-template-columns: 1.7fr 1fr 1.3fr; gap: 48px;
padding-bottom: 34px; border-bottom: 1px solid var(--border-1);
}
.gc-footer__brand img { filter: none; height: 34px; margin-bottom: 16px; }
.gc-footer__brand p { color: var(--fg-3); max-width: 300px; }
.gc-footer__h { color: var(--gc-ink); }
.gc-footer__links { display: flex; flex-direction: column; gap: 11px; }
.gc-footer__links a, .gc-footer__contact a, .gc-footer__addr {
font-size: 14px; color: var(--fg-2);
}
.gc-footer__links a:hover, .gc-footer__contact a:hover { color: var(--accent-strong); }
.gc-footer__contact { display: flex; flex-direction: column; gap: 12px; }
.gc-footer__contact a, .gc-footer__addr {
display: inline-flex; align-items: center; gap: 9px;
}
.gc-footer__contact i, .gc-footer__addr i {
width: 16px; height: 16px; color: var(--accent-strong); flex: 0 0 auto;
}
.gc-footer__addr { color: var(--fg-3); margin: 0; }
.gc-footer__bottom {
display: flex; justify-content: space-between; align-items: center;
gap: 14px 28px; flex-wrap: wrap;
padding-top: 22px; font-size: 13px; color: var(--fg-4);
}
.gc-footer__copy { color: var(--fg-4); }
.gc-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.gc-footer__legal a { color: var(--fg-3); font-size: 13px; }
.gc-footer__legal a:hover { color: var(--accent-strong); }
.gc-footer :focus-visible { outline-color: var(--gc-ink); box-shadow: 0 0 0 4px rgba(255,196,0,0.55); }
/* ---- Mobile: burger-only header, close aligned to burger ----------- */
.gc-header__phone--icon { display: none !important; }
.gc-header__burger { margin-left: 0; width: 46px; height: 46px; }
.gc-header__burger i { width: 28px; height: 28px; }
.mobile-nav { padding: 0 20px calc(28px + env(safe-area-inset-bottom)); }
.mobile-nav__head { height: 80px; }
.mobile-nav__head img { height: 32px; }
.mobile-nav__close { width: 46px; height: 46px; margin-right: 0; }
.mobile-nav__close i { width: 28px; height: 28px; }
/* ---- Rev. 4 responsive ---------------------------------------------- */
@media (max-width: 860px) {
.gc-footer__top { grid-template-columns: 1fr; gap: 30px; }
.gc-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 600px) {
.hero { padding: 40px 0 64px; }
.hero__trust { gap: 10px 18px; margin-top: 26px; }
}
/* =====================================================================
Rev. 5 — Floating max-width header (hairline border by default, soft
shadow once scrolled), larger mobile burger, and an image-free
single-column hero with a Fraunces serif accent. Brand colours unchanged.
===================================================================== */
/* ---- Header: floating pill, reduced to the content max-width ---------
The outer becomes a transparent sticky wrapper that keeps the
bar off the screen edges; the inner .container is the floating bar.
Default: visible hairline border, no shadow.
Scrolled (.is-scrolled, toggled in main.js): the bar lifts with a soft
shadow and a more solid background. */
.gc-header {
position: sticky; top: 0; z-index: 50;
padding: 14px 16px;
background: transparent;
-webkit-backdrop-filter: none; backdrop-filter: none;
border-bottom: none;
transition: padding 320ms var(--ease-soft);
}
.gc-header__inner {
height: 64px;
padding: 0 14px 0 22px;
background: rgba(250, 250, 247, 0.78);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid rgba(14, 14, 14, 0.10);
border-radius: 18px;
transition: box-shadow 340ms var(--ease-soft),
background-color 340ms var(--ease-soft),
border-color 340ms var(--ease-soft);
}
/* Neutralise the former full-width elevation — effects now live on the bar */
.gc-header.is-scrolled {
background: transparent;
box-shadow: none;
padding-top: 10px; padding-bottom: 10px;
}
.gc-header.is-scrolled .gc-header__inner {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(14, 14, 14, 0.06);
box-shadow: 0 14px 38px -16px rgba(14, 14, 14, 0.30),
0 4px 12px -6px rgba(14, 14, 14, 0.12);
}
/* Anchored sections clear the floating header */
:target, [id] { scroll-margin-top: 104px; }
/* ---- Mobile: tighter wrapper + a noticeably larger, bolder burger ---- */
@media (max-width: 960px) {
.gc-header { padding: 12px 12px; }
.gc-header.is-scrolled { padding-top: 9px; padding-bottom: 9px; }
.gc-header__inner { height: 60px; padding: 0 10px 0 18px; }
.gc-header__burger { width: 50px; height: 50px; }
.gc-header__burger i,
.gc-header__burger svg { width: 32px; height: 32px; stroke-width: 2.4; }
}
/* ---- Hero: clean 1:1 photo (no frame/badge/overlay) + serif accent ----
The image returns as a pure 1:1 photo: we strip the dark backdrop, the
drop shadow and the inset-ring / bottom-shade overlay that framed it,
keeping only soft rounded corners. Layout stays the rev.4 two-column. */
.hero__art {
background: var(--gc-ink-50); /* faint placeholder; the photo covers it */
box-shadow: none;
border-radius: 20px;
}
.hero__art::after { display: none; }
.hero h1 em {
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--gc-ink);
}
/* Refine the accent highlight under the slanted serif */
.hero h1 em::after {
left: 1px; right: 2px; bottom: 0.05em;
height: 0.26em; opacity: 0.85; border-radius: 3px;
}
/* =====================================================================
Rev. 6 — Footer as a floating, rounded panel.
The full-bleed footer is reduced to a transparent wrapper; the inner
.container becomes a rounded grey card that floats on the paper page.
A step greyer than the page (--gc-ink-100 vs body #FAFAF7) so it reads
as its own surface — no shadow, just a hairline edge. Content, layout
and copy are unchanged; only the surface treatment is new.
===================================================================== */
.gc-footer {
background: transparent;
border-top: none;
padding: 28px 16px 24px;
}
.gc-footer .container {
background: var(--gc-ink-100);
border: 1px solid rgba(14, 14, 14, 0.05);
border-radius: 32px;
padding: 56px 56px 32px;
}
/* Keep the internal divider soft against the grey card */
.gc-footer__top { border-bottom-color: rgba(14, 14, 14, 0.08); }
/* Section labels (NAVIGATION / DIREKT ERREICHBAR) were inheriting the old
dark-footer white from `.gc-footer h2` (specificity 0,1,1 beats the Rev.4
fix 0,1,0). Restore a clearly visible, muted label colour on the panel. */
.gc-footer .gc-footer__h { color: var(--fg-3); }
/* Agency credit → blue link. Element+class selector (0,2,1) so it wins over
the generic `.gc-footer a` colour (0,1,1). */
.gc-footer a.gc-footer__credit { color: #2563EB; font-weight: 600; }
.gc-footer a.gc-footer__credit:hover { color: #1D4ED8; text-decoration: underline; }
/* "Entwicklung und Design" credit sits OUTSIDE the grey panel, centred on the
paper below the card (sibling of .container in the transparent wrapper). */
.gc-footer__madeby {
margin: 16px 0 0;
text-align: center;
font-size: 13px;
color: var(--fg-4);
}
@media (max-width: 860px) {
.gc-footer { padding: 20px 12px 16px; }
.gc-footer .container { border-radius: 28px; padding: 44px 30px 28px; }
/* Stacked + centred: legal on top, copyright below (DOM order is
copy→legal, so column-reverse flips them). Beats the Rev.4 flex-start. */
.gc-footer__bottom { flex-direction: column-reverse; align-items: center; text-align: center; gap: 14px; }
.gc-footer__legal { justify-content: center; }
}
@media (max-width: 600px) {
.gc-footer { padding: 14px 10px 14px; }
.gc-footer .container { border-radius: 24px; padding: 32px 22px 22px; }
}
/* =====================================================================
Rev. 7 — Header CTA balance + wider pill, refined burger, filled hero
stars, slightly larger mobile hero, and a full-page mobile menu that
keeps the real header (logo + burger→X) on top. (Accent font set above.)
===================================================================== */
/* Filled hero rating stars — Lucide renders