/* Performance Optimizations */
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed;
}
/* Improve image performance */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Lazy loading support */
img[loading="lazy"] {
opacity: 0;
transition: opacity 0.3s;
}
img[loading="lazy"].loaded {
opacity: 1;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Core Styles (konsolidierte Variablen) */
:root {
/* Farbflächen */
--bg:#fff;
--bg-alt:#fffaf5; /* leichtes Off-White für Sektionen */
--bg-soft:#fff8f2; /* Inputs / Soft Surfaces */
--surface-alt:#fff3e0; /* Akzentierte Flächen */
/* Brand Farben (inkl. HSL Basis) */
--brand-h:33; --brand-s:100%; --brand-l:50%;
--brand:#ff9800;
--brand-accent:#ffb74d;
--brand-muted:#ffe0b2;
--brand-glow:35 100% 50%;
--brand-solid:hsl(var(--brand-h) var(--brand-s) var(--brand-l));
--brand-solid-dark:hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) - 8%));
/* Text & Rahmen */
--text:#222;
--text-soft:#555;
--border:#e5e5e5;
--border-strong:#ff9800;
/* Radius */
--radius-xs:4px; --radius-s:6px; --radius-m:10px; --radius-l:18px; --radius-full:999px;
/* Gradients */
--gradient-hero:radial-gradient(circle at 30% 40%, rgba(255,152,0,.18), transparent 60%),
radial-gradient(circle at 80% 70%, rgba(255,183,77,.18), transparent 65%),
linear-gradient(135deg,#fff,#fffaf5 60%,#fff);
/* Page Hero (light) */
--gradient-page-hero:linear-gradient(135deg,#fff7f0,#fff);
--gradient-accent:linear-gradient(90deg,var(--brand),var(--brand-accent));
--gradient-btn-primary:linear-gradient(90deg,#ff9800,#ffb74d);
--gradient-btn-primary-dark:linear-gradient(90deg,#f58900,#ffad33);
/* Schatten */
--shadow-sm:0 1px 2px rgba(0,0,0,.08);
--shadow:0 4px 14px -2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.06);
--shadow-focus:0 0 0 3px rgba(255,152,0,.35);
/* Fokus */
--focus-outline-width:2px;
/* Font */
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
scroll-behavior:smooth;
}
/* Dark Mode (aktiv durch ) */
:root[data-theme=dark], [data-theme=dark] {
color-scheme:dark;
--bg:#0f141c;
--bg-alt:#182231; /* Karten / Sektionen */
--bg-soft:#1a2430; /* Inputs / weiche Flächen */
--surface-alt:#1f2a3a; /* Akzentflächen */
--text:#f1f5f9; /* Primärer Text */
--text-soft:#b3c1cf; /* Sekundärtext für bessere Lesbarkeit */
--border:#253246; /* Subtiler Rahmen */
--border-strong:#ff9800;
--gradient-hero:radial-gradient(circle at 30% 40%,rgba(255,152,0,.25),transparent 60%),radial-gradient(circle at 80% 70%,rgba(255,183,77,.25),transparent 65%),linear-gradient(135deg,#0f172a,#0c1522 60%,#0f172a);
/* Page Hero (dark) */
--gradient-page-hero:linear-gradient(135deg,#0f172a,#182231 55%,#0f172a);
--shadow-sm:0 1px 2px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset;
--shadow:0 4px 18px -4px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.45);
--shadow-focus:0 0 0 3px rgba(255,152,0,.35);
}
body{transition:background-color .5s ease,color .5s ease;}
[data-theme=dark] .site-header{background:rgba(15,23,42,.85);border-bottom:1px solid var(--border);}
[data-theme=dark] .top-bar{background:var(--brand-solid-dark);}
[data-theme=dark] .card,[data-theme=dark] .offer-card,[data-theme=dark] .steps li,[data-theme=dark] details,[data-theme=dark] .split-media,[data-theme=dark] .testimonial-card,[data-theme=dark] .process-timeline li,[data-theme=dark] .service-card,[data-theme=dark] .service-card-small{background:linear-gradient(145deg,#182231,#141c27);}
[data-theme=dark] .card:hover,[data-theme=dark] .offer-card:hover,[data-theme=dark] .service-card:hover{box-shadow:0 6px 24px -6px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.55);}
[data-theme=dark] .brand-logos .logo-item{background:#1d2733;color:#d4dee7;filter:none;opacity:.95;border-color:#2d3b4f;}
[data-theme=dark] .brand-logos .logo-item:hover{color:#fff;}
[data-theme=dark] .footer-bottom{color:var(--text-soft);}
[data-theme=dark] .hero h1,[data-theme=dark] .page-hero h1{background:linear-gradient(90deg,#ffffff,#cbd5e1);-webkit-background-clip:text;background-clip:text;color:transparent;}
[data-theme=dark] .intro,[data-theme=dark] .lead{color:var(--text-soft);}
[data-theme=dark] .testimonial-card::before{color:var(--brand-accent);opacity:.12;}
[data-theme=dark] .map-overlay{background:linear-gradient(90deg,rgba(15,23,42,.85),rgba(15,23,42,.35));}
[data-theme=dark] .cta.dark{background:linear-gradient(120deg,#1a2430,#0f141c);}
[data-theme=dark] .angled{background:linear-gradient(120deg,#1a2430,#202d3b);}
[data-theme=dark] .section-pad.highlight{background:linear-gradient(120deg,#182231,#141c27);}
[data-theme=dark] .band.highlight{background:linear-gradient(90deg,#182231,#141c27,#182231);}
[data-theme=dark] .section-pad.dark{background:linear-gradient(180deg,#16202b,#0f141c);}
[data-theme=dark] a{color:var(--brand-accent);}
[data-theme=dark] a:hover{color:#ffd089;}
[data-theme=dark] .more{color:var(--brand-accent);}
[data-theme=dark] .more:hover{color:#ffd089;}
[data-theme=dark] .badge-muted{background:#2d3b4f;color:#ffb74d;}
[data-theme=dark] .brand-price-table{background:#182231;}
[data-theme=dark] .brand-price-table thead{background:#1f2a3a;}
[data-theme=dark] .brand-price-table tbody tr:nth-child(even){background:#1a2430;}
[data-theme=dark] input[type=text], [data-theme=dark] input[type=email], [data-theme=dark] input[type=tel], [data-theme=dark] textarea{background:var(--bg-soft);border-color:var(--border);color:var(--text);}
[data-theme=dark] ::placeholder{color:rgba(255,255,255,.45);}
[data-theme=dark] .tel-btn{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 14px -4px rgba(0,0,0,.6);}
[data-theme=dark] .btn.primary{--btn-bg:var(--gradient-btn-primary-dark);--btn-border:#ff9800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);}
[data-theme=dark] .tel-btn{background:var(--gradient-btn-primary-dark);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);border:none;}
[data-theme=dark] .btn.outline{--btn-bg:rgba(255,152,0,.16);--btn-color:#ffb74d;--btn-border:#ff9800;}
[data-theme=dark] .testimonial-card{border-color:#243343;}
[data-theme=dark] .process-timeline li{border-color:#243343;}
[data-theme=dark] .process-timeline li::after{background:linear-gradient(180deg,var(--brand),rgba(255,152,0,0));opacity:.35;}
[data-theme=dark] .step-num{box-shadow:0 4px 14px -4px rgba(0,0,0,.8);}
[data-theme=dark] .mobile-cta-bar{background:rgba(18,30,44,.88);border-top:1px solid #243343;}
[data-theme=dark] .callback-modal{background:#1a2430;border-color:#2d3b4f;}
[data-theme=dark] .callback-modal h2{color:#ffb74d;}
[data-theme=dark] .checkbox-inline{color:var(--text-soft);}
[data-theme=dark] .field-group label, [data-theme=dark] .field-group legend{color:var(--brand-accent);}
/* ========================
MARKEN ÜBERSICHT - Schlüssel-Bilder Layout
======================== */
/* Compact Header für Marken-Seite */
.compact-header-section {
background: var(--bg);
padding: 2rem 0 1rem;
border-bottom: 1px solid var(--border);
}
.compact-header-content {
text-align: center;
}
.header-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.header-buttons .btn-primary,
.header-buttons .btn-secondary {
padding: 0.75rem 1.5rem;
border-radius: var(--radius-s);
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.header-buttons .btn-primary {
background: var(--gradient-btn-primary);
color: white;
border: none;
cursor: pointer;
}
.header-buttons .btn-primary:hover {
background: var(--gradient-btn-primary-dark);
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.header-buttons .btn-secondary {
background: transparent;
color: var(--brand);
border: 2px solid var(--brand);
}
.header-buttons .btn-secondary:hover {
background: var(--brand);
color: white;
transform: translateY(-1px);
}
/* Alphabet Filter */
.alphabet-filter-section {
background: var(--bg-alt);
padding: 2rem 0 1.5rem;
}
.alphabet-filter {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
max-width: 900px;
margin: 0 auto;
}
.alpha-btn {
min-width: 40px;
height: 40px;
border: 2px solid var(--border);
background: var(--bg);
color: var(--text-soft);
border-radius: var(--radius-s);
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.alpha-btn:hover {
border-color: var(--brand);
color: var(--brand);
transform: translateY(-1px);
}
.alpha-btn.active {
background: var(--brand);
border-color: var(--brand);
color: white;
box-shadow: var(--shadow);
}
/* Marken Grid mit Schlüssel-Bildern */
.brands-section {
padding: 3rem 0;
}
.brands-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.brand-card {
background: var(--bg);
border: 2px solid var(--border);
border-radius: var(--radius-l);
overflow: hidden;
transition: all 0.3s ease;
position: relative;
}
.brand-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: var(--brand-accent);
}
.brand-card.featured {
border-color: var(--brand);
box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.1);
}
.brand-card.featured::before {
content: "★ Premium";
position: absolute;
top: 1rem;
right: 1rem;
background: var(--brand);
color: white;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
z-index: 2;
}
/* Schlüssel-Bild */
.brand-image {
height: 180px;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}
.brand-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.brand-card:hover .brand-image img {
transform: scale(1.05);
}
/* Falls Bild nicht verfügbar - Fallback */
.brand-image::after {
content: "🔑";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
opacity: 0.3;
z-index: 1;
}
.brand-image img + ::after {
display: none;
}
/* Brand Content */
.brand-content {
padding: 1.5rem;
}
.brand-content h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text);
margin: 0 0 0.5rem 0;
}
.brand-content p {
color: var(--text-soft);
margin: 0 0 1rem 0;
font-size: 0.95rem;
line-height: 1.4;
}
/* Service Tags */
.brand-services {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.service-tag {
background: var(--surface-alt);
color: var(--text);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 500;
border: 1px solid var(--border);
}
.brand-card.featured .service-tag {
background: rgba(255, 152, 0, 0.1);
border-color: var(--brand-accent);
color: var(--brand-solid-dark);
}
/* Brand Action Button */
.btn-brand {
display: inline-block;
width: 100%;
background: var(--gradient-btn-primary);
color: white;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-s);
text-decoration: none;
font-weight: 600;
text-align: center;
transition: all 0.2s ease;
border: none;
cursor: pointer;
}
.btn-brand:hover {
background: var(--gradient-btn-primary-dark);
transform: translateY(-1px);
box-shadow: var(--shadow);
color: white;
}
/* Service Info Section */
.service-info-section {
background: var(--bg-alt);
padding: 4rem 0;
}
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.service-info-card {
text-align: center;
padding: 2rem 1rem;
}
.service-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.service-info-card h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 1rem 0;
color: var(--text);
}
.service-info-card p {
color: var(--text-soft);
line-height: 1.6;
margin: 0;
}
/* Nicht gefunden Section */
.not-found-section {
padding: 4rem 0;
text-align: center;
background: var(--gradient-page-hero);
}
.not-found-section h2 {
font-size: 2rem;
font-weight: 700;
margin: 0 0 1rem 0;
color: var(--text);
}
.not-found-section p {
font-size: 1.1rem;
color: var(--text-soft);
margin: 0 0 2rem 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Responsive Design */
@media (max-width: 1024px) {
.hero-inner {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-visual {
order: -1;
max-width: 400px;
margin: 0 auto;
}
.split-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.split-media {
order: -1;
max-height: 300px;
}
}
@media (max-width: 768px) {
.container {
padding: 0 1.5rem;
}
/* Header Mobile */
.site-header {
padding: 0.75rem 0;
}
.header-inner {
justify-content: space-between;
}
.nav-main {
display: none;
}
/* Hero Mobile */
.hero {
min-height: 60vh;
padding: 2rem 0;
}
.hero h1 {
font-size: 2.25rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.lead {
font-size: 1rem;
line-height: 1.5;
margin-bottom: 2rem;
}
.hero-cta {
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.btn {
width: 100%;
max-width: 280px;
padding: 1rem;
font-size: 1rem;
}
.trust-icons {
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
/* Grid Mobile */
.grid.cards-4 {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.grid.split-grid {
grid-template-columns: 1fr;
}
/* Cards Mobile */
.card {
padding: 1.5rem;
}
.feature {
text-align: center;
}
.icon-circle {
margin: 0 auto 1rem;
}
/* Process Timeline Mobile */
.process-timeline {
gap: 1.5rem;
}
.process-timeline li {
padding: 1.5rem;
}
.step-num {
position: static;
margin: 0 auto 1rem;
transform: none;
}
/* Testimonials Mobile */
.testimonial-card {
padding: 1.5rem;
margin: 0 0.5rem;
}
/* FAQ Mobile */
.faq-list details {
margin-bottom: 1rem;
}
.faq-list summary {
padding: 1rem;
font-size: 1rem;
}
/* Stats Mobile */
.stat-block {
text-align: center;
padding: 1rem;
}
.stat {
font-size: 2rem;
}
/* CTA Mobile */
.cta {
padding: 2rem 0;
}
.cta .flex {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}
.gap-s {
gap: 1rem;
flex-direction: column;
}
/* Brands Grid Mobile */
.brands-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.alphabet-filter {
gap: 0.25rem;
flex-wrap: wrap;
justify-content: center;
}
.alpha-btn {
min-width: 35px;
height: 35px;
font-size: 0.9rem;
}
.brand-image {
height: 150px;
}
.brand-content {
padding: 1rem;
}
.service-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.service-info-card {
text-align: center;
padding: 1.5rem;
}
.service-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
/* Hero Extra Small */
.hero {
min-height: 50vh;
padding: 1.5rem 0;
}
.hero h1 {
font-size: 2rem;
line-height: 1.1;
}
.lead {
font-size: 0.95rem;
}
.btn {
font-size: 0.95rem;
padding: 0.875rem;
}
/* Alphabet Filter Extra Small */
.alphabet-filter {
justify-content: flex-start;
padding: 0 1rem;
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.alpha-btn {
flex-shrink: 0;
min-width: 32px;
height: 32px;
font-size: 0.85rem;
}
/* Cards Extra Small */
.card {
padding: 1.25rem;
}
.feature h3 {
font-size: 1.1rem;
}
/* Brand Cards Extra Small */
.brand-card {
border-radius: 8px;
}
.brand-image {
height: 120px;
}
.brand-content {
padding: 0.875rem;
}
.brand-content h3 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.brand-content p {
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.brand-services {
gap: 0.5rem;
margin-bottom: 1rem;
}
.service-tag {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
.btn-brand {
font-size: 0.85rem;
padding: 0.75rem 1rem;
}
.brand-card.featured::before {
top: 0.5rem;
right: 0.5rem;
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
}
/* Process Timeline Extra Small */
.process-timeline li {
padding: 1.25rem;
}
.step-num {
width: 40px;
height: 40px;
font-size: 1.1rem;
}
/* Testimonials Extra Small */
.testimonial-card {
padding: 1.25rem;
}
.testimonial-card blockquote {
font-size: 0.95rem;
}
/* Stats Extra Small */
.stat {
font-size: 1.75rem;
}
.stat span {
font-size: 1rem;
}
}
/* Mobile Navigation */
.burger {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
gap: 0.25rem;
z-index: 1000;
}
.burger span {
display: block;
width: 25px;
height: 3px;
background: var(--text);
transition: all 0.3s ease;
transform-origin: center;
}
.burger[aria-expanded="true"] span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.burger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
transform: translateX(-20px);
}
.burger[aria-expanded="true"] span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
@media (max-width: 768px) {
.burger {
display: flex;
}
.main-nav {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg);
z-index: 999;
padding: 6rem 2rem 2rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.main-nav.open {
display: block;
}
.main-nav ul {
display: flex;
flex-direction: column;
gap: 1.5rem;
list-style: none;
padding: 0;
margin: 0;
}
.main-nav a {
display: block;
padding: 1rem 0;
font-size: 1.25rem;
font-weight: 500;
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--border);
transition: color 0.3s ease;
}
.main-nav a:hover {
color: var(--brand);
}
.header-cta {
display: flex;
align-items: center;
gap: 1rem;
}
.tel-btn {
display: none;
}
/* Prevent body scroll when nav is open */
body.nav-open {
overflow: hidden;
position: fixed;
width: 100%;
}
}
/* Mobile Touch Optimizations */
@media (max-width: 768px) {
/* Touch-friendly buttons */
.btn, button, [role="button"] {
min-height: 44px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Improved tap targets */
.alpha-btn {
min-height: 44px;
min-width: 44px;
touch-action: manipulation;
}
.brand-card {
touch-action: manipulation;
}
.service-card {
touch-action: manipulation;
}
/* Better spacing for mobile */
.section-pad {
padding: 3rem 0;
}
/* Mobile-optimized inputs */
input, textarea, select {
font-size: 16px; /* Prevents zoom on iOS */
padding: 1rem;
border-radius: var(--radius-s);
}
/* Better modal behavior on mobile */
.callback-modal {
margin: 1rem;
max-height: calc(100vh - 2rem);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Optimized testimonial slider for touch */
.testimonial-slider {
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
.testimonial-slide {
scroll-snap-align: center;
}
/* Better visual feedback for touch */
.btn:active,
.card:active,
.brand-card:active {
transform: scale(0.98);
transition: transform 0.1s ease;
}
}
/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
.mobile-cta-bar {
padding-bottom: env(safe-area-inset-bottom);
}
body {
padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
}
/* Dark Mode Ergänzungen */
[data-theme=dark] .brand-card {
background: linear-gradient(145deg, #182231, #141c27);
border-color: #243343;
}
[data-theme=dark] .brand-card:hover {
border-color: var(--brand-accent);
box-shadow: 0 6px 24px -6px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.55);
}
[data-theme=dark] .brand-card.featured {
border-color: var(--brand);
box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.2);
}
[data-theme=dark] .brand-image {
background: linear-gradient(135deg, #1a2430, #0f141c);
}
[data-theme=dark] .service-tag {
background: rgba(255, 152, 0, 0.1);
border-color: #243343;
color: var(--brand-accent);
}
[data-theme=dark] .alpha-btn {
background: #182231;
border-color: #243343;
color: var(--text-soft);
}
[data-theme=dark] .alpha-btn:hover {
border-color: var(--brand);
color: var(--brand-accent);
}
[data-theme=dark] .alpha-btn.active {
background: var(--brand);
color: white;
}
[data-theme=dark] .field-group input[type=text],[data-theme=dark] .field-group input[type=tel],[data-theme=dark] .field-group input[type=email],[data-theme=dark] .field-group textarea{background:#243343;border:1px solid #36475b;}
[data-theme=dark] .field-group input:focus,[data-theme=dark] .field-group textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,152,0,.25);}
[data-theme=dark] .testimonial-track::-webkit-scrollbar-thumb{background:#2d3b4f;}
[data-theme=dark] .testimonial-nav button{background:#2d3b4f;}
[data-theme=dark] .testimonial-nav button.is-active{background:linear-gradient(90deg,var(--brand),var(--brand-accent));}
[data-theme=dark] .to-top{color:var(--brand-accent);border-color:#2d3b4f;}
[data-theme=dark] .to-top:hover{color:#ffd089;border-color:var(--brand);}
[data-theme=dark] .steps li{background:#182231;}
[data-theme=dark] .steps li::before{box-shadow:0 2px 8px -2px rgba(255,152,0,.4);}
[data-theme=dark] .hero-bg::before,.hero-bg::after{mix-blend-mode:normal;}
[data-theme=dark] .map-embed{background:#182231;border-color:#243343;}
[data-theme=dark] .faq-list details{background:#182231;border-color:#243343;}
[data-theme=dark] details[open]{border-color:var(--border-strong);}
[data-theme=dark] .site-footer{background:#121b26;border-top:1px solid #243343;}
[data-theme=dark] .footer-nav a{color:var(--text-soft);}
[data-theme=dark] .footer-nav a:hover{color:var(--brand-accent);}
[data-theme=dark] .tel-block{background:linear-gradient(90deg,#ff9800,#ffb74d);color:#fff;box-shadow:0 4px 14px -6px rgba(0,0,0,.6);}
[data-theme=dark] .legal p{color:var(--text-soft);}
[data-theme=dark] .brand-price-note{color:var(--text-soft);}
[data-theme=dark] .checkbox{color:var(--text-soft);}
/* Optional: Dark Theme Grundgerüst
[data-theme=dark]{
--bg:#0f141c;--bg-alt:#182231;--bg-soft:#1f2a3a;--surface-alt:#1f2a3a;
--text:#e2e8f0;--text-soft:#94a3b8;--border:#2c3b52;--border-strong:#3b82f6;
--brand:#ff9800;--brand-accent:#ffb74d;--brand-muted:#4d3415;
--gradient-hero:radial-gradient(circle at 30% 40%,rgba(255,152,0,.25),transparent 60%),radial-gradient(circle at 80% 70%,rgba(255,183,77,.25),transparent 65%),linear-gradient(135deg,#0f172a,#0b1220 60%,#0f172a);
}
*/
/* Adjust existing components to new neutrals */
.main-nav a{color:var(--text-soft);}
.main-nav a:hover,.main-nav a:focus{color:var(--brand)}
.intro{color:var(--text-soft);}
.lead{color:var(--text-soft);}
.trust-icons{color:var(--text-soft);}
.stat span{color:var(--text-soft);}
.offer-card .price{color:var(--text-soft);}
.brand-price-note{color:var(--text-soft);}
.legal p{color:var(--text-soft);}
.checkbox{color:var(--text-soft);}
.small{color:var(--text-soft);}
.footer-bottom{color:var(--text-soft);}
.brand-price-table th{color:var(--text-soft);}
.more:hover{color:var(--brand-accent);}
/* Refine borders: only highlight on interactive states */
.card, .offer-card, .steps li, details, .split-media, .brand-price-table, .brand-price-scroll, .map-embed, input, textarea {
border-color: var(--border);
}
.card.feature:hover, .offer-card:hover, .steps li:hover, details[open]{
border-color: var(--border-strong);
}
/* Buttons refinements */
.btn{--btn-bg:var(--surface-alt);--btn-color:var(--text);--btn-border:var(--border);}
.btn.primary{--btn-bg:var(--gradient-accent);--btn-color:#fff;--btn-border:var(--brand);}
.btn.outline{--btn-bg:rgba(255,152,0,.07);--btn-color:var(--brand);--btn-border:var(--brand);}
.btn:hover:not(:disabled){filter:brightness(1.04);}
.btn:active:not(:disabled){transform:translateY(1px);}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.3);}
/* Accessible focus styles */
:where(a,button,.btn,input,textarea,summary,.to-top,.tel-btn):focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;}
/* Link refinement */
a{color:var(--brand);}
a:hover,a:focus-visible{color:var(--brand-accent);}
/* Table readability */
.brand-price-table tbody tr:nth-child(even){background:var(--bg-alt);}
.brand-price-table thead{background:var(--surface-alt);}
/* Hero heading simpler gradient for performance */
.hero h1, .page-hero h1{background:linear-gradient(90deg,var(--text),var(--text-soft));-webkit-background-clip:text;background-clip:text;color:transparent;}
/* Print styles */
@media print {
*,*::before,*::after{box-shadow:none !important;text-shadow:none !important;}
body{background:#fff !important;color:#000 !important;}
.site-header,.site-footer,.burger,.hero-bg,.map-section,.device-mock{background:none !important;}
a{color:#000 !important;text-decoration:underline;}
.btn,.tel-btn{border:1px solid #000 !important;background:#fff !important;color:#000 !important;text-shadow:none !important;}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
*{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition:none !important;scroll-behavior:auto !important;}
}
/* ===================== Neue Sektionen & Komponenten (Social Proof / Prozess / FAQ) ===================== */
.section-title-bar{position:relative;display:inline-block;padding-bottom:.55rem;}
.section-title-bar::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:70px;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-accent));border-radius:4px;}
/* Brand Logos */
.brand-logos{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:1.2rem;align-items:center;}
.brand-logos .logo-item{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;letter-spacing:.5px;padding:.85rem .65rem;border:1px solid var(--border);background:var(--bg-alt);border-radius:var(--radius-s);position:relative;overflow:hidden;color:#444;filter:grayscale(1) contrast(.85);opacity:.75;transition:.4s ease;box-shadow:var(--shadow-sm);}
.brand-logos .logo-item::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,152,0,.0),rgba(255,152,0,.18),rgba(255,152,0,.0));opacity:0;transition:.5s ease;}
.brand-logos .logo-item:hover{filter:grayscale(0) contrast(1);opacity:1;color:var(--text);transform:translateY(-3px);}
.brand-logos .logo-item:hover::before{opacity:1;}
/* Prozess Timeline */
.process-timeline{counter-reset:proc;list-style:none;margin:3rem auto 0;padding:0;display:grid;gap:2.25rem;max-width:1000px;}
.process-timeline li{position:relative;padding:1.4rem 1.2rem 1.2rem 4.2rem;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-m);box-shadow:var(--shadow-sm);overflow:hidden;transition:.4s ease;}
.process-timeline li::after{content:"";position:absolute;left:18px;top:56px;bottom:-40px;width:2px;background:linear-gradient(180deg,var(--brand),transparent);opacity:.5;}
.process-timeline li:last-child::after{display:none;}
.process-timeline h3{margin:.2rem 0 .4rem;font-size:1.05rem;letter-spacing:.3px;}
.process-timeline p{margin:0;font-size:.9rem;line-height:1.5;}
.step-num{position:absolute;left:1rem;top:1rem;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-accent));display:grid;place-items:center;font-weight:600;color:#fff;font-size:1rem;box-shadow:0 4px 12px -3px rgba(255,152,0,.5);}
.process-timeline li:hover{border-color:var(--brand);box-shadow:0 6px 20px -6px rgba(0,0,0,.15);}
@media (min-width:860px){
.process-timeline{grid-template-columns:repeat(2,minmax(0,1fr));}
.process-timeline li::after{display:none;}
.process-timeline li{min-height:210px;}
}
/* Testimonials */
.testimonials-section{position:relative;}
.angled{background:linear-gradient(120deg,#fff7f0,#fff3e0);}
.testimonial-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2.5rem;}
.testimonial-card{margin:0;background:var(--bg);border:1px solid var(--border);padding:1.4rem 1.3rem 1.2rem;border-radius:var(--radius-m);display:flex;flex-direction:column;gap:.9rem;position:relative;box-shadow:var(--shadow-sm);transition:.4s ease;}
.testimonial-card::before{content:"“";position:absolute;top:-18px;left:12px;font-size:5.5rem;line-height:1;color:var(--brand);opacity:.08;pointer-events:none;}
.testimonial-card blockquote{margin:0;font-size:.9rem;line-height:1.55;}
.testimonial-card figcaption{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase;font-weight:600;color:var(--brand);}
.testimonial-card .stars{font-size:.85rem;letter-spacing:2px;color:var(--brand-accent);text-shadow:0 0 6px rgba(255,152,0,.35);}
.testimonial-card:hover{transform:translateY(-5px);box-shadow:0 10px 28px -8px rgba(0,0,0,.22),0 4px 10px rgba(0,0,0,.08);}
/* Slider (Testimonials) */
.testimonial-slider{position:relative;overflow:hidden;}
.testimonial-track{display:flex;gap:1.75rem;scroll-snap-type:x mandatory;overflow-x:auto;padding:.5rem 0 1rem;margin:0;list-style:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}
.testimonial-track::-webkit-scrollbar{height:10px;}
.testimonial-track::-webkit-scrollbar-thumb{background:var(--brand-muted);border-radius:6px;}
.testimonial-slide{flex:0 0 85%;max-width:420px;scroll-snap-align:start;}
@media (min-width:680px){.testimonial-slide{flex:0 0 45%;}}
@media (min-width:1040px){.testimonial-slide{flex:0 0 30%;}}
.testimonial-nav{display:flex;justify-content:center;gap:.75rem;margin:1rem 0 0;}
.testimonial-nav button{width:14px;height:14px;border-radius:50%;border:0;background:var(--border);cursor:pointer;transition:.35s ease;}
.testimonial-nav button.is-active{background:linear-gradient(90deg,var(--brand),var(--brand-accent));transform:scale(1.15);}
.testimonial-nav button:focus-visible{outline:2px solid var(--brand);}
/* FAQ */
.faq-list{max-width:860px;margin:2.5rem auto 0;display:grid;gap:1rem;}
.faq-list details{background:var(--bg-alt);}
.faq-list summary{font-size:.95rem;}
.faq-list p{margin:.75rem 0 0;font-size:.85rem;line-height:1.55;}
/* Diagonale Divider */
.with-divider{position:relative;}
.with-divider::before{content:"";position:absolute;left:0;right:0;top:0;height:70px;background:linear-gradient(180deg,rgba(255,152,0,.12),rgba(255,152,0,0));-webkit-mask:linear-gradient(180deg,#000,#0000);mask:linear-gradient(180deg,#000,#0000);pointer-events:none;}
/* Mobile Sticky CTA */
.mobile-cta-bar{display:none;}
@media (max-width:640px){
.mobile-cta-bar{position:fixed;left:0;right:0;bottom:0;display:flex;z-index:250;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:0.5rem;}
.mobile-cta-bar .m-cta-btn{flex:1;border:0;background:linear-gradient(90deg,var(--brand),var(--brand-accent));color:#fff;font-weight:600;padding:.95rem .5rem;font-size:.9rem;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:.4rem;position:relative;overflow:hidden;border-radius:var(--radius-s);margin:0 0.25rem;touch-action:manipulation;}
.mobile-cta-bar .m-cta-btn:active{filter:brightness(.9);transform:scale(0.98);}
.mobile-cta-bar .m-cta-btn:first-child{margin-left:0;}
.mobile-cta-bar .m-cta-btn:last-child{margin-right:0;}
/* Mobile Bottom Padding for CTA Bar */
body{padding-bottom:80px;}
.footer{margin-bottom:80px;}
}
/* Puls Animation für Call Buttons */
.tel-btn, .mobile-cta-bar .m-cta-btn{animation:callpulse 4.8s ease-in-out infinite;}
@keyframes callpulse{0%,70%{box-shadow:0 0 0 0 rgba(255,152,0,.0);}75%{box-shadow:0 0 0 6px rgba(255,152,0,.25);}100%{box-shadow:0 0 0 0 rgba(255,152,0,.0);}}
/* Scroll-Reveal Verfeinerung */
.fade-observe{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .65s cubic-bezier(.4,.2,.2,1),transform .65s cubic-bezier(.4,.2,.2,1);}
.fade-observe.reveal{opacity:1;transform:translateY(0) scale(1);}
/* Fokus Glow Utility */
.glow-focus:focus-visible{box-shadow:0 0 0 4px rgba(255,152,0,.4);}
/* Subtle header shadow for separation */
.site-header{box-shadow:0 2px 4px -2px rgba(0,0,0,.08),0 4px 12px -4px rgba(0,0,0,.06);}
/* Utility: muted badge */
.badge-muted{background:var(--brand-muted);color:#5d3b00;padding:.25rem .6rem;border-radius:var(--radius-full);font-size:.65rem;font-weight:600;letter-spacing:.5px;}
/* (Entfernt doppelte :root Definitionen – alle Variablen nun oben) */
*,*::before,*::after{box-sizing:border-box}
body{
margin:0; background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased;
font-size:16px; font-weight:400;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none;transition:.25s ease}
a:hover,a:focus{color:var(--brand-accent)}
/* Layout */
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 1.4rem}
.flex{display:flex}
.between{justify-content:space-between}
.center-v{align-items:center}
.wrap{flex-wrap:wrap}
.gap-s{gap:.75rem}
.gap-m{gap:1.5rem}
.grid{display:grid}
/* Site Header & Top Bar */
.top-bar{background:var(--brand);color:#fff;font-size:.85rem;padding:.5rem 0;text-align:center;}
.top-bar .container{max-width:1200px;}
.opening-hours{font-weight:500;}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.logo-link{display:inline-flex;align-items:center;gap:.65rem;font-weight:600;font-size:1.05rem;color:var(--text);letter-spacing:.5px}
.logo-link span{white-space:nowrap}
.logo-link img{height:40px;width:auto;object-fit:contain}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem}
.main-nav a{color:var(--brand);font-weight:500;position:relative;padding:.75rem .2rem;display:inline-block}
.main-nav a::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,#ff9800,#ffb74d);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:.35s ease}
.main-nav a:hover,.main-nav a:focus{color:#ff9800}
.main-nav a:hover::after,.main-nav a:focus::after{transform:scaleX(1)}
.header-cta{display:flex;align-items:center;gap:1rem}
.tel-btn{background:var(--gradient-btn-primary);color:#fff;padding:.6rem 1rem;border-radius:var(--radius-full);font-weight:600;font-size:.9rem;box-shadow:var(--shadow-sm);text-shadow:0 1px 2px rgba(0,0,0,.35);border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.tel-btn:hover{filter:brightness(1.08)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{width:26px;height:3px;background:#ff9800;border-radius:2px;transition:.4s ease}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.hero{position:relative;min-height:75vh;display:flex;align-items:center;padding-top:4rem;overflow:hidden;background:var(--gradient-hero);}
.hero-bg::before,.hero-bg::after{content:"";position:absolute;inset:0;mix-blend-mode:overlay;pointer-events:none}
.hero-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:center;gap:3rem;padding:4rem 0}
.hero h1{font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.1;margin:0 0 1rem;font-weight:700;letter-spacing:-.5px;background:linear-gradient(90deg,#1b2735,#4b5563);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.1rem;color:var(--text-soft);max-width:650px}
.hero-cta{margin:1.75rem 0 1.25rem;display:flex;gap:1rem;flex-wrap:wrap}
.trust-icons{display:flex;flex-wrap:wrap;gap:1rem;margin:0;padding:0;list-style:none;font-size:.95rem;color:var(--brand)}
.device-mock{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#fff3e0,#fff);border:1px solid var(--border);border-radius:var(--radius-l);position:relative;box-shadow:0 10px 40px -5px rgba(255,152,0,.2);}
.key-illustration{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,152,0,.05)0 10px,transparent 10px 20px);border-radius:inherit}
/* Sections */
.section-pad{padding:4.5rem 0}
.section-pad.dark{background:linear-gradient(180deg,#fff7f0,#fff)}
.section-pad.highlight{background:linear-gradient(120deg,#fff3e0,#fff)}
.center{text-align:center}
.intro{max-width:780px;margin:.5rem auto 2.5rem;color:var(--brand)}
.cards-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem;margin-top:2.5rem}
.cards-2{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.card{background:var(--bg-alt);border:1px solid var(--border);padding:1.6rem;border-radius:var(--radius-m);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.75rem;box-shadow:var(--shadow-sm);}
.card.feature:hover{border-color:#ffcc80}
.icon-circle{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff9800,#ffb74d);box-shadow:0 4px 16px -4px rgba(255,152,0,.3)}
.icon{font-size:1.5rem}
.more{margin-top:auto;font-weight:500;font-size:.85rem;color:var(--brand-accent)}
.more:hover{color:#ffcc80}
.band{padding:2.5rem 0}
.band.highlight{background:linear-gradient(90deg,#fff7f0,#fff3e0,#fff7f0)}
.stat-block{text-align:center;min-width:120px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.stat{font-size:2.25rem;font-weight:700;margin:0 0 .5rem;line-height:1;color:var(--brand);}
.band .container{justify-content:space-evenly;}
.stat{margin:0;font-size:2.2rem;font-weight:600;letter-spacing:-1px;background:linear-gradient(90deg,#ff9800,#ffb74d);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:1.25rem;font-weight:500;color:var(--brand);background:none;-webkit-background-clip:initial;background-clip:initial}
.split-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:3.5rem;align-items:center}
.split-media{min-height:380px;border:1px solid var(--border);background:linear-gradient(135deg,#fff3e0,#fff);border-radius:var(--radius-l);box-shadow:var(--shadow)}
.checks{list-style:none;margin:1.25rem 0 1.75rem;padding:0;display:grid;gap:.6rem}
.checks li{position:relative;padding-left:1.5rem}
.checks li::before{content:"";width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#ff9800,#ffb74d);position:absolute;left:0;top:6px;box-shadow:0 0 0 3px rgba(255,152,0,.25)}
/* Steps list */
.steps{counter-reset:step;list-style:none;margin:1.25rem 0 1.75rem;padding:0;display:grid;gap:.9rem}
.steps li{position:relative;padding-left:2.4rem;line-height:1.45;background:var(--bg-alt);border:1px solid var(--border);padding:.9rem 1rem .9rem 2.8rem;border-radius:var(--radius-s);box-shadow:var(--shadow-sm)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#ff9800,#ffb74d);display:grid;place-items:center;font-size:.75rem;font-weight:600;letter-spacing:.5px;box-shadow:0 2px 8px -2px rgba(255,152,0,.5)}
.cta{position:relative}
.cta.dark{background:linear-gradient(120deg,#fff7f0,#fff3e0)}
.cta .btn{margin-top:.5rem}
.map-section{position:relative;min-height:480px;display:grid;aspect-ratio:4/3}
.map-section iframe{width:100%;height:100%;border:0;filter:grayscale(.2) brightness(.9) contrast(1.05)}
.map-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,247,240,.85),rgba(255,243,224,.3));display:flex;align-items:flex-start;padding:3rem 0;pointer-events:none}
.map-overlay .container{pointer-events:auto}
/* Footer */
.site-footer{background:#fff7f0;border-top:1px solid var(--border);margin-top:4rem}
.footer-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.5rem;padding:3.5rem 0}
.footer-nav{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.footer-nav a{color:var(--brand);font-size:.9rem}
.footer-nav a:hover{color:var(--brand-accent)}
.tel-block{display:inline-block;background:linear-gradient(90deg,#ff9800,#ffb74d);color:#fff;padding:.75rem 1.1rem;border-radius:var(--radius-full);font-weight:600;font-size:.85rem;margin:.25rem 0 1rem}
.footer-bottom{border-top:1px solid var(--border);padding:1rem 0;font-size:.75rem;color:var(--brand)}
.to-top{display:inline-block;padding:.35rem .6rem;border:1px solid var(--border);border-radius:var(--radius-full);color:var(--brand);font-size:.85rem}
.to-top:hover{color:var(--brand-accent);border-color:#ffcc80}
/* Offers */
.offers-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem}
.offer-card{background:var(--bg-alt);border:1px solid var(--border);padding:1.6rem;border-radius:var(--radius-m);display:flex;flex-direction:column;gap:.75rem;box-shadow:var(--shadow-sm)}
.offer-card .price{margin-top:auto;font-size:.9rem;color:var(--brand)}
.brand-price-wrap{margin:3rem 0 4rem}
.brand-price-table{width:100%;border-collapse:collapse;font-size:.78rem;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-s);overflow:hidden}
.brand-price-table caption{caption-side:top;text-align:left;font-weight:600;padding:0 0 .75rem;font-size:.9rem;color:var(--text)}
.brand-price-table thead{background:#fff3e0}
.brand-price-table th,.brand-price-table td{padding:.65rem .75rem;text-align:left;border-bottom:1px solid var(--border)}
.brand-price-table th{font-weight:600;font-size:.7rem;letter-spacing:.5px;text-transform:uppercase;color:var(--brand)}
.brand-price-table tbody tr:last-child td{border-bottom:0}
.brand-price-table tbody tr:nth-child(even){background:#fff7f0}
.brand-price-table td strong{font-weight:600;color:var(--text)}
.brand-price-note{margin:.75rem 0 0;font-size:.7rem;color:var(--brand);line-height:1.4}
.price-badge{display:inline-block;background:linear-gradient(90deg,#ff9800,#ffb74d);padding:.15rem .5rem;border-radius:var(--radius-full);font-size:.65rem;font-weight:600;letter-spacing:.5px;color:#fff}
.brand-price-scroll{overflow:auto;border:1px solid var(--border);border-radius:var(--radius-s);}
/* Services page */
.service-list{display:grid;gap:2.5rem;max-width:880px}
.service-item h2{margin-top:0;font-size:1.6rem}
.service-item{padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
/* New Service Cards */
.services-grid{margin-bottom:2rem;}
.service-card{position:relative;padding:2rem;text-align:center;transition:all .3s ease;border:1px solid var(--border);background:var(--bg);}
.service-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.15);}
.service-icon{font-size:3rem;margin-bottom:1rem;display:block;}
.service-card h3{margin:0 0 1rem;font-size:1.4rem;color:var(--text);}
.service-card p{margin:0 0 1.5rem;color:var(--text-soft);line-height:1.6;}
.service-features{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap;}
.feature-tag{background:var(--brand-muted);color:var(--brand);padding:.25rem .75rem;border-radius:var(--radius-full);font-size:.8rem;font-weight:600;}
.service-btn{margin-top:auto;}
/* Service Cards - Small */
.additional-services{margin-top:1.5rem;}
.service-card-small{padding:1.5rem;text-align:center;transition:all .3s ease;}
.service-card-small:hover{transform:translateY(-2px);}
.service-icon-small{font-size:2rem;margin-bottom:.75rem;display:block;}
.service-card-small h4{margin:0 0 .75rem;font-size:1.1rem;color:var(--text);}
.service-card-small p{margin:0;color:var(--text-soft);font-size:.9rem;line-height:1.5;}
/* Premium Brand Pages - Complete Redesign */
/* Premium Hero Section */
.premium-brand-hero {
position: relative;
min-height: 80vh;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(135deg, #ff9800 0%, #ff6f00 50%, #e65100 100%);
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.hero-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.1;
background-image: radial-gradient(circle at 25% 25%, white 2px, transparent 2px),
radial-gradient(circle at 75% 75%, white 2px, transparent 2px);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
.hero-content {
position: relative;
z-index: 3;
text-align: center;
color: white;
max-width: 800px;
margin: 0 auto;
}
.brand-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 0.75rem 1.5rem;
border-radius: var(--radius-full);
margin-bottom: 2rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.brand-logo {
font-size: 1.5rem;
font-weight: bold;
}
.brand-text {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.1em;
}
.hero-title {
font-size: 3.5rem;
font-weight: 900;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
line-height: 1.1;
}
.hero-subtitle {
font-size: 1.3rem;
margin-bottom: 2.5rem;
opacity: 0.95;
font-weight: 500;
}
.hero-features {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.hero-feature {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.75rem 1.5rem;
border-radius: var(--radius-full);
font-weight: 600;
backdrop-filter: blur(5px);
}
.feature-icon {
font-size: 1.2rem;
}
.hero-actions {
display: flex;
gap: 1.5rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.btn-primary-xl {
background: white;
color: var(--brand);
padding: 1rem 2.5rem;
border-radius: var(--radius-l);
font-size: 1.1rem;
font-weight: 700;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-primary-xl:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.btn-secondary-xl {
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.1);
color: white;
padding: 1rem 2rem;
border-radius: var(--radius-l);
text-decoration: none;
font-weight: 600;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.btn-secondary-xl:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* Service Overview */
.service-overview {
padding: 5rem 0;
background: var(--bg-alt);
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header.centered {
text-align: center;
}
.section-title {
font-size: 2.5rem;
font-weight: 800;
color: var(--text);
margin-bottom: 1rem;
}
.section-subtitle {
font-size: 1.2rem;
color: var(--text-soft);
max-width: 600px;
margin: 0 auto;
}
.service-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
}
.service-card {
background: var(--bg);
border-radius: var(--radius-l);
padding: 2.5rem;
text-align: center;
position: relative;
transition: all 0.4s ease;
border: 2px solid var(--border);
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--brand);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-color: var(--brand);
}
.service-card.featured {
border-color: var(--brand);
background: linear-gradient(135deg, var(--bg) 0%, var(--bg-soft) 100%);
}
.service-card.emergency {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
border-color: #ff6f00;
}
.service-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
display: block;
}
.service-content h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text);
}
.service-content p {
color: var(--text-soft);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.service-price {
font-size: 1.8rem;
font-weight: 800;
color: var(--brand);
margin-bottom: 1.5rem;
}
.service-includes {
list-style: none;
padding: 0;
margin: 0;
}
.service-includes li {
padding: 0.5rem 0;
color: var(--text-soft);
font-size: 0.95rem;
}
.service-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: #ff6f00;
color: white;
padding: 0.4rem 0.8rem;
border-radius: var(--radius-s);
font-size: 0.8rem;
font-weight: 700;
}
.emergency-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: #d32f2f;
color: white;
padding: 0.4rem 0.8rem;
border-radius: var(--radius-s);
font-size: 0.8rem;
font-weight: 700;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
/* Models Showcase */
.models-showcase {
padding: 5rem 0;
background: var(--bg);
}
.models-categories {
display: grid;
gap: 3rem;
}
.model-category {
background: var(--bg-soft);
border-radius: var(--radius-l);
padding: 2.5rem;
border: 1px solid var(--border);
}
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.category-header h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text);
margin: 0;
}
.category-count {
background: var(--brand);
color: white;
padding: 0.5rem 1rem;
border-radius: var(--radius-full);
font-size: 0.9rem;
font-weight: 600;
}
.models-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 1rem;
}
.model-card {
background: var(--bg);
padding: 1rem;
border-radius: var(--radius-m);
text-align: center;
font-weight: 600;
color: var(--text);
border: 2px solid var(--border);
transition: all 0.3s ease;
cursor: pointer;
}
.model-card:hover {
border-color: var(--brand);
background: var(--brand-muted);
color: var(--brand);
transform: translateY(-2px);
}
.model-card.sport {
border-color: #1976d2;
color: #1976d2;
}
.model-card.sport:hover {
background: #e3f2fd;
border-color: #0d47a1;
}
.model-card.rs {
border-color: #d32f2f;
color: #d32f2f;
font-weight: 700;
}
.model-card.rs:hover {
background: #ffebee;
border-color: #b71c1c;
}
.model-card.electric {
border-color: #388e3c;
color: #388e3c;
}
.model-card.electric:hover {
background: #e8f5e8;
border-color: #1b5e20;
}
/* Page hero */
.page-hero{padding:5rem 0 2rem;background:var(--gradient-page-hero);position:relative;overflow:hidden}
.page-hero::before,.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;background:radial-gradient(circle at 25% 35%,rgba(255,152,0,.15),transparent 55%),radial-gradient(circle at 75% 65%,rgba(255,183,77,.12),transparent 60%);mix-blend-mode:overlay;}
[data-theme=dark] .page-hero::before,[data-theme=dark] .page-hero::after{opacity:.4;mix-blend-mode:normal;}
.page-hero.small{padding:4.5rem 0 2rem}
.page-hero h1{margin:0;font-size:clamp(2rem,4.5vw,2.8rem);font-weight:700;letter-spacing:-.5px;line-height:1.1;background:linear-gradient(90deg,#1b2735,#4b5563);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero .lead{max-width:780px;margin-top:1rem;font-size:1.05rem}
/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3.5rem;align-items:start}
.contact-form{display:grid;gap:1.25rem;margin-top:.5rem}
.form-row{display:flex;flex-direction:column;gap:.5rem}
.form-row.inline{flex-direction:row;align-items:center}
.form-row label{font-size:.85rem;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--brand)}
input[type=text],input[type=email],input[type=tel],textarea{background:var(--bg-soft);border:1px solid var(--border);padding:.85rem 1rem;border-radius:var(--radius-s);color:var(--text);font:inherit;resize:vertical;min-height:48px}
input:focus,textarea:focus{outline:none;box-shadow:var(--shadow-focus);border-color:#ff9800}
textarea{min-height:140px}
.checkbox{display:flex;gap:.6rem;font-size:.8rem;line-height:1.3;color:var(--brand)}
.checkbox input{margin-top:2px}
.alert{padding:.9rem 1rem;border-radius:var(--radius-s);font-size:.85rem;font-weight:500}
.alert.success{background:linear-gradient(90deg,#e8f5e8,#f0fdf4);color:#166534;border:1px solid #15803d}
.alert.error{background:linear-gradient(90deg,#fef2f2,#fef7f7);color:#dc2626;border:1px solid #dc2626}
.map-embed{width:100%;height:220px;border:1px solid var(--border);border-radius:var(--radius-s);overflow:hidden;background:#fff}
.map-embed iframe{width:100%;height:100%;border:0}
.map-embed.small{height:180px}
/* Buttons */
.btn{--btn-bg:var(--bg-soft);--btn-color:#fff;--btn-border:var(--border);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;padding:.85rem 1.25rem;border-radius:var(--radius-full);border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-color);font-size:.9rem;letter-spacing:.5px;position:relative;overflow:hidden;transition:.35s ease}
.btn.small{padding:.55rem 1rem;font-size:.75rem}
.btn.large{padding:1rem 1.6rem;font-size:.95rem}
.btn.primary{--btn-bg:var(--gradient-btn-primary);--btn-border:#ff9800;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.btn.outline{--btn-bg:rgba(255,152,0,.08);--btn-color:#ff9800;--btn-border:#ff9800}
.btn.primary:hover{filter:brightness(1.08)}
.btn.outline:hover{background:rgba(255,152,0,.15)}
.btn:focus{outline:none;box-shadow:var(--shadow-focus)}
/* Legal */
.legal h2{margin-top:2.5rem;font-size:1.3rem}
.legal p{color:var(--brand);max-width:880px}
/* Details */
details{background:var(--bg-alt);border:1px solid var(--border);padding:1rem 1.25rem;border-radius:var(--radius-s);margin:1rem 0}
details summary{cursor:pointer;font-weight:600;color:var(--text);outline:none}
details[open]{border-color:#ffcc80}
/* Utility */
.small{font-size:.75rem;color:var(--brand)}
.placeholder-img{position:relative;background:linear-gradient(135deg,#fff3e0,#fff);overflow:hidden}
.placeholder-img::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,152,0,.04)0 12px,transparent 12px 24px);mix-blend-mode:overlay;opacity:.7}
/* Reveal Fade (keine Layout-Veränderung -> reduziert CLS) */
.fade-observe{opacity:0;transition:opacity .6s ease}
.fade-observe.reveal{opacity:1}
/* Responsive */
@media (max-width: 960px){
.main-nav{position:fixed;inset:0 0 auto 0;top:64px;background:rgba(255,255,255,.98);backdrop-filter:blur(18px);transform:translateY(-140%);transition:.5s cubic-bezier(.7,.05,.2,.99);padding:2rem 1.5rem;border-bottom:1px solid var(--border)}
.main-nav.open{transform:translateY(0)}
.main-nav ul{flex-direction:column;gap:.5rem}
.main-nav a{padding:.9rem 1rem;font-size:1.05rem}
.burger{display:flex}
}
@media (max-width:640px){
.hero-inner{gap:2.5rem;padding:3.5rem 0}
.section-pad{padding:3.5rem 0}
.split-grid{gap:2.5rem}
}
/* Performance: Defer rendering cost of below-the-fold sections */
/* Removed experimental content-visibility to avoid CLS on some browsers */
/* (HSL Basis bereits in konsolidiertem :root enthalten) */
/* Skip-Link für bessere Accessibility (Markup Zum Inhalt springen) */
.skip-link{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:.7rem 1rem;border-radius:var(--radius-full);z-index:1000;}
.skip-link:focus{left:1rem;top:1rem;outline:var(--focus-outline-width) solid var(--brand-accent);}
/* Button Varianten */
.btn.secondary{--btn-bg:var(--bg-soft);--btn-color:var(--text);--btn-border:var(--border);}
.btn.secondary:hover{background:var(--surface-alt);}
.btn.link{--btn-bg:transparent;--btn-color:var(--brand);--btn-border:transparent;padding:.4rem .25rem;border-radius:0;font-weight:500;}
.btn.link:hover{color:var(--brand-accent);}
/* Größere Klickflächen Navigation */
.main-nav a{min-height:44px;display:flex;align-items:center;}
/* Placeholder & Form States */
::placeholder{color:rgba(0,0,0,.4);}
input:invalid, textarea:invalid{border-color:#d93025;}
input:invalid:focus, textarea:invalid:focus{box-shadow:0 0 0 3px rgba(217,48,37,.3);}
/* Numerische Tabellen-Ausrichtung (Klasse num im Markup vergeben) */
.brand-price-table th.num,.brand-price-table td.num{text-align:right;}
/* Details Caret nur für FAQ (verhindert Doppel-Symbole in anderen Details) */
.faq-list details summary{position:relative;padding-left:1.1rem;}
.faq-list details summary::before{content:"";position:absolute;left:0;top:50%;width:.55rem;height:.55rem;border:2px solid var(--brand);border-left:0;border-top:0;transform:translateY(-50%) rotate(45deg);transition:.3s ease;}
.faq-list details[open] summary::before{transform:translateY(-50%) rotate(225deg);}
.faq-list details summary::-webkit-details-marker{display:none;}
.faq-list details summary{list-style:none;}
/* Icon Circle vereinfachte Variante (Performance) */
.icon-circle{background:var(--brand);background:linear-gradient(135deg,var(--brand-solid),var(--brand-accent));}
/* High Contrast Unterstützung */
@media (prefers-contrast: more){
:root{--border:#000;}
a, .btn.link{ text-decoration: underline; }
.btn.primary{filter:contrast(1.15);}
.site-header{box-shadow:none;border-bottom:2px solid #000;}
}
/* Hover-Veredelung für Karten */
.card:hover,.offer-card:hover{box-shadow:0 4px 18px -2px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.08);}
/* Reduzierte Gradients Klasse (kann an gesetzt werden) */
.flat-theme .hero{background:#fff;}
.flat-theme .page-hero{background:#fff;}
.flat-theme .band.highlight,.flat-theme .section-pad.dark,.flat-theme .section-pad.highlight{background:#fff;}
/* Dark-Mode Toggle Helper Klasse */
[data-theme=dark] .skip-link{background:var(--brand-solid-dark);}
/* Callback Modal */
.callback-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:300;opacity:0;transition:.35s ease;}
.callback-overlay.is-visible{opacity:1;}
.callback-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;background:#2f3338;color:#fff;padding:2.25rem 2rem 2.5rem;border-radius:18px;box-shadow:0 18px 48px -8px rgba(0,0,0,.4);z-index:310;opacity:0;transition:.4s cubic-bezier(.4,.2,.2,1);border:1px solid var(--brand);}
.callback-modal.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1);}
.callback-close{position:absolute;top:.65rem;right:.65rem;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;line-height:1;padding:.25rem;border-radius:8px;}
.callback-close:hover,.callback-close:focus-visible{background:rgba(255,255,255,.08);}
.callback-form{display:grid;gap:1.4rem;margin-top:.5rem;}
.callback-step{display:grid;gap:1.1rem;}
.callback-step[hidden]{display:none !important;}
.field-group{display:grid;gap:.45rem;}
.field-group label, .field-group legend{font-size:.8rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--brand);}
.field-group input[type=text],.field-group input[type=tel],.field-group input[type=email],.field-group textarea{background:#3a3f45;border:1px solid #555;padding:.75rem .85rem;border-radius:8px;color:#fff;font:inherit;}
.field-group input:focus,.field-group textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,152,0,.3);}
.field-group textarea{resize:vertical;min-height:120px;}
.checkbox-list{display:grid;gap:.4rem;font-size:.85rem;}
.checkbox-inline{font-size:.85rem;line-height:1.5;display:block;margin:0.5rem 0;}
.checkbox-inline input[type="checkbox"] {margin-right:0.5rem;}
.checkbox-inline a {color:var(--brand);text-decoration:underline;}
.field-hint{margin:.25rem 0 0;font-size:.65rem;color:#ffb74d;display:none;}
.field-error + .field-hint{display:block;}
.callback-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:.5rem;}
.callback-actions.between{justify-content:space-between;}
.callback-steps-indicator{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;}
.step-dot{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#fff;color:#222;font-size:.75rem;font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.25);border:1px solid #ddd;}
.step-dot.is-active{background:var(--brand);color:#fff;border-color:var(--brand);}
.step-line{flex:1;height:2px;background:linear-gradient(90deg,#777,#444);border-radius:2px;}
.form-status{font-size:.75rem;font-weight:500;margin-top:.75rem;}
.form-status.success{color:#4ade80;}
.form-status.error{color:#f87171;}
.callback-modal h2{margin:0 0 .25rem;font-size:1.35rem;line-height:1.25;letter-spacing:-.5px;color:var(--brand-accent);text-align:center;}
.callback-intro{font-size:.8rem;color:#ddd;text-align:center;margin:0 0 1rem;}
@media (max-width:600px){
.callback-modal{top:0;left:0;transform:none;width:100%;max-width:none;height:100vh;max-height:none;border-radius:0;padding:1.75rem 1.25rem 2.25rem;}
.callback-modal.is-visible{transform:none;}
}
[data-theme=dark] .callback-modal{background:#1e242a;border-color:#444;}
/* WhatsApp Floating Button */
.whatsapp-float{position:fixed;bottom:20px;right:20px;z-index:1000;width:60px;height:60px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(37,211,102,.3);transition:all .3s ease;text-decoration:none;}
.whatsapp-float:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(37,211,102,.4);}
.whatsapp-float svg{width:28px;height:28px;}
@media (max-width:768px){
.top-bar{font-size:.8rem;padding:.4rem 0;}
.whatsapp-float{bottom:80px;width:56px;height:56px;}
.whatsapp-float svg{width:24px;height:24px;}
/* Brand Pages Responsive */
.brand-hero h1 { font-size: 2.2rem; }
.brand-hero .lead { font-size: 1.1rem; }
.brand-filter-tabs { flex-direction: column; align-items: center; gap: 0.5rem; }
.brands-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.key-types-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.problems-grid { grid-template-columns: 1fr; }
.models-list { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.brand-card { padding: 1.5rem; }
.key-type-card { padding: 2rem 1.5rem; }
.feature-card { padding: 2rem 1.5rem; }
}
@media (max-width: 480px) {
.brand-hero { padding: 2.5rem 0; }
.brand-hero h1 { font-size: 1.8rem; }
.brand-filter-tabs { padding: 0 0.5rem; }
.filter-btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
.brand-card { padding: 1.25rem; }
.key-type-card { padding: 1.5rem 1rem; }
}
/* Enhanced Animations for Brand Pages */
@keyframes brandCardEntry {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes filterButtonPulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.brand-card {
animation: brandCardEntry 0.6s ease-out;
animation-fill-mode: both;
}
.brand-card:nth-child(1) { animation-delay: 0.1s; }
.brand-card:nth-child(2) { animation-delay: 0.2s; }
.brand-card:nth-child(3) { animation-delay: 0.3s; }
.brand-card:nth-child(4) { animation-delay: 0.4s; }
.filter-btn.active {
animation: filterButtonPulse 0.3s ease-in-out;
}
/* Problem Solutions */
.problem-solutions {
padding: 5rem 0;
background: var(--bg);
}
.problems-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.problem-solution {
background: var(--bg-soft);
border-radius: var(--radius-l);
padding: 2.5rem;
border: 2px solid var(--border);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.problem-solution::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--brand);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.problem-solution:hover::before {
transform: scaleX(1);
}
.problem-solution:hover {
transform: translateY(-6px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
border-color: var(--brand);
}
.problem-solution.urgent {
border-color: #ff6f00;
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}
.problem-solution.emergency {
border-color: #d32f2f;
background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
}
.problem-icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
display: block;
}
.problem-content h3 {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text);
}
.problem-content p {
color: var(--text-soft);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.solution-steps {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.step {
background: var(--brand-muted);
color: var(--brand);
padding: 0.4rem 0.8rem;
border-radius: var(--radius-s);
font-size: 0.85rem;
font-weight: 600;
}
.solution-price {
font-size: 1.5rem;
font-weight: 800;
color: var(--brand);
}
/* Premium Process */
.premium-process {
padding: 6rem 0;
background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-soft) 100%);
}
.process-flow {
max-width: 1000px;
margin: 0 auto;
}
.process-step {
display: grid;
grid-template-columns: 80px 1fr 80px;
gap: 2.5rem;
align-items: center;
margin-bottom: 4rem;
padding: 0;
}
.process-step.reverse {
grid-template-columns: 80px 1fr 80px;
}
.process-step.reverse .step-content {
order: 2;
text-align: right;
}
.process-step.reverse .step-visual {
order: 1;
}
.process-step.reverse .step-number {
order: 3;
}
.step-number {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--brand) 0%, #ff6f00 100%);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 900;
box-shadow: 0 8px 25px rgba(255, 152, 0, 0.4);
}
.step-content h3 {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text);
}
.step-content p {
color: var(--text-soft);
line-height: 1.7;
margin-bottom: 1.5rem;
font-size: 1.05rem;
}
.step-features {
list-style: none;
padding: 0;
margin: 0;
}
.step-features li {
padding: 0.5rem 0;
color: var(--text-soft);
font-weight: 500;
}
.step-visual {
display: flex;
justify-content: center;
}
.visual-circle {
width: 80px;
height: 80px;
background: var(--bg);
border: 3px solid var(--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.visual-icon {
font-size: 2rem;
}
/* CTA Premium */
.cta-premium {
padding: 5rem 0;
background: linear-gradient(135deg, var(--brand) 0%, #ff6f00 50%, #e65100 100%);
color: white;
position: relative;
overflow: hidden;
}
.cta-premium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
}
.cta-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.cta-text h2 {
font-size: 2.5rem;
font-weight: 900;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.cta-text p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.95;
}
.cta-guarantees {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.guarantee {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.75rem 1.25rem;
border-radius: var(--radius-full);
backdrop-filter: blur(5px);
font-weight: 600;
}
.guarantee-icon {
font-size: 1.2rem;
}
.cta-actions {
text-align: center;
}
.btn-cta-primary {
background: white;
color: var(--brand);
border: none;
padding: 1.5rem 3rem;
border-radius: var(--radius-l);
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
margin-bottom: 2rem;
display: block;
width: 100%;
max-width: 350px;
margin: 0 auto 2rem;
}
.btn-cta-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.btn-text {
display: block;
font-size: 1.2rem;
margin-bottom: 0.25rem;
}
.btn-subtext {
display: block;
font-size: 0.9rem;
opacity: 0.8;
font-weight: 500;
}
.contact-options {
display: grid;
gap: 1rem;
}
.contact-option {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(255, 255, 255, 0.1);
padding: 1rem 1.5rem;
border-radius: var(--radius-l);
text-decoration: none;
color: white;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.contact-option:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.contact-icon {
font-size: 1.5rem;
}
.contact-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.contact-label {
font-size: 0.85rem;
opacity: 0.8;
}
.contact-value {
font-size: 1rem;
font-weight: 600;
}
/* Responsive Design for Premium Brand Pages */
@media (max-width: 1200px) {
.premium-brand-hero .hero-content {
padding: 3rem 0;
}
.hero-title {
font-size: 3rem;
}
.section-title {
font-size: 2.25rem;
}
.service-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.cta-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.process-step {
grid-template-columns: 1fr;
text-align: center;
gap: 1.5rem;
}
.process-step.reverse {
grid-template-columns: 1fr;
}
.process-step.reverse .step-content {
order: unset;
text-align: center;
}
.process-step.reverse .step-visual {
order: unset;
}
.process-step.reverse .step-number {
order: unset;
}
.models-categories {
grid-template-columns: 1fr;
}
.hero-actions {
flex-direction: column;
gap: 1rem;
}
.contact-options {
flex-direction: column;
gap: 0.75rem;
}
}
@media (max-width: 768px) {
/* Premium Brand Hero Mobile */
.premium-brand-hero {
min-height: 70vh;
padding: 2rem 0;
}
.premium-brand-hero .hero-content {
padding: 2rem 0;
text-align: center;
}
.brand-badge {
margin: 0 auto 1.5rem;
transform: scale(0.9);
}
.hero-title {
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.hero-features {
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.hero-feature {
justify-content: center;
}
.hero-actions {
flex-direction: column;
gap: 1rem;
align-items: center;
}
.btn-primary-xl,
.btn-secondary-xl {
width: 100%;
max-width: 280px;
padding: 1rem 1.5rem;
font-size: 1rem;
}
/* Section Headers Mobile */
.section-header {
text-align: center;
margin-bottom: 2rem;
}
.section-title {
font-size: 2rem;
line-height: 1.3;
margin-bottom: 0.75rem;
}
.section-subtitle {
font-size: 1rem;
}
/* Service Cards Mobile */
.service-cards-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.service-card {
padding: 1.5rem;
}
.service-price {
font-size: 1.5rem;
}
/* Models Showcase Mobile */
.models-grid {
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 0.75rem;
}
.model-card {
padding: 0.75rem 0.5rem;
font-size: 0.85rem;
}
.category-header {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
/* Problems Grid Mobile */
.problems-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.problem-solution {
padding: 1.5rem;
}
.solution-steps {
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
/* Process Flow Mobile */
.process-flow {
gap: 2rem;
}
.step-content h3 {
font-size: 1.25rem;
}
.step-features {
text-align: center;
}
/* CTA Premium Mobile */
.cta-premium {
padding: 2rem 0;
}
.cta-text h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
.cta-guarantees {
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.guarantee {
flex-direction: column;
text-align: center;
gap: 0.25rem;
}
.btn-cta-primary {
width: 100%;
max-width: 280px;
margin: 0 auto 1.5rem;
}
.contact-options {
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
.contact-option {
justify-content: center;
padding: 1rem;
}
}
@media (max-width: 480px) {
/* Extra Small Mobile */
.container {
padding: 0 1rem;
}
.premium-brand-hero {
min-height: 60vh;
padding: 1.5rem 0;
}
.hero-title {
font-size: 2.25rem;
}
.hero-subtitle {
font-size: 1rem;
}
.brand-badge {
transform: scale(0.8);
}
.section-title {
font-size: 1.75rem;
}
.service-card {
padding: 1.25rem;
}
.service-icon {
font-size: 2rem;
}
.models-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.model-card {
padding: 0.5rem 0.25rem;
font-size: 0.8rem;
}
.btn-primary-xl,
.btn-secondary-xl,
.btn-cta-primary {
font-size: 0.95rem;
padding: 0.875rem 1.25rem;
}
.cta-text h2 {
font-size: 1.75rem;
}
.step-content h3 {
font-size: 1.125rem;
}
.problem-solution {
padding: 1.25rem;
}
.solution-price {
font-size: 1.25rem;
}
}