/* ═══════════════════════════════════════════════════════════════
   PAULS AUTOSERVICE — Components Additional (appended to components.css)
   Footer, About, Contact, Quick-Strip, Stats, Social CTAs
   ═══════════════════════════════════════════════════════════════ */

/* ─── Site Footer ───────────────────────────────────────────────── */
.site-footer {
	background: var(--color-gray-dark);
	color: var(--color-concrete-mid);
	padding: var(--space-4xl) 0 var(--space-xl);
}

.footer-col__heading {
	color: var(--color-cream);
	font-size: var(--fs-xs);
	font-weight: var(--font-weight-black);
	letter-spacing: var(--ls-mega);
	text-transform: uppercase;
	margin-bottom: var(--space-md);
}

.footer-brand-name {
	color: var(--color-cream);
	font-size: var(--fs-xl);
	margin-bottom: var(--space-sm);
}

.footer-tagline {
	color: var(--color-concrete-mid);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-lg);
}

.footer-social {
	display: flex;
	gap: var(--space-md);
}

.footer-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.15);
	color: var(--color-concrete-mid);
	transition: all var(--duration-normal) var(--ease-smooth);
}

.footer-social__link svg {
	width: 18px;
	height: 18px;
}

.footer-social__link:hover {
	border-color: var(--color-cream);
	color: var(--color-cream);
	transform: translateY(-3px);
}

.footer-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	font-size: var(--fs-sm);
}

.footer-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	margin-top: 0;
}

.footer-list svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-concrete-dark);
}

.footer-list a {
	color: var(--color-concrete-mid);
}

.footer-list a:hover {
	color: var(--color-cream);
}

.footer-list--hours li {
	display: block;
}

.footer-list--closed {
	color: var(--color-concrete-dark);
}

.footer-nav { display: flex; flex-direction: column; gap: var(--space-xs); }

.footer-bottom {
	margin-top: var(--space-3xl);
	padding-top: var(--space-lg);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
	font-size: var(--fs-xs);
}

.footer-copy { color: var(--color-concrete-dark); }
.footer-legal { display: flex; gap: var(--space-md); }
.footer-legal a { color: var(--color-concrete-mid); }
.footer-legal a:hover { color: var(--color-cream); }

/* ─── Quick Strip (Home) ────────────────────────────────────────── */
.section-strip {
	background: var(--color-petrol);
	padding: var(--space-lg) 0;
}

.quick-strip {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm) var(--space-xl);
	align-items: center;
}

.quick-strip li {
	color: var(--color-cream);
	font-weight: var(--font-weight-bold);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	align-content: center;
	margin: 0;
}

.quick-strip__icon { font-size: 1.2em; }

/* ─── About Section ─────────────────────────────────────────────── */
.about-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3xl);
	align-items: center;
}

.about-text .section-kicker {
	margin-bottom: var(--space-md);
}

.about-text h2 {
	margin-bottom: var(--space-lg);
}

.about-text p {
	margin-bottom: var(--space-xl);
	font-size: var(--fs-md);
}

.about-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.stat-card {
	padding: var(--space-lg);
	border-radius: var(--radius-md);
	text-align: center;
	border: 2px solid var(--color-concrete-light);
}

.stat-card__number {
	display: block;
	font-size: var(--fs-2xl);
	color: var(--color-petrol);
	margin-bottom: var(--space-xs);
}

.stat-card__label {
	font-size: var(--fs-xs);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--color-concrete-dark);
}

/* ─── Contact Cards ─────────────────────────────────────────────── */
.contact-cards {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

.contact-card {
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
	background: var(--color-white);
	padding: var(--space-lg);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.contact-card strong {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--color-concrete-dark);
	margin-bottom: var(--space-2xs);
}

.contact-card p {
	font-size: var(--fs-sm);
	margin: 0;
	max-width: none;
}

.contact-card p + p { margin-top: var(--space-2xs); }

.contact-card a { color: var(--color-petrol); }
.contact-card a:hover { color: var(--color-cherry); }

.contact-card__icon {
	width: 44px;
	height: 44px;
	background: var(--color-cream);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--color-petrol);
}

.contact-card__icon svg {
	width: 20px;
	height: 20px;
}

.contact-card__link {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-wide);
	color: var(--color-petrol);
	margin-top: var(--space-xs);
	text-decoration: underline;
}

/* ─── Social CTA Buttons ────────────────────────────────────────── */
.social-cta-btn {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	width: 100%;
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-md);
	font-size: var(--fs-sm);
	transition: all var(--duration-normal) var(--ease-smooth);
}

.social-cta-btn strong { display: block; font-size: var(--fs-base); }
.social-cta-btn small  { color: rgba(255,255,255,0.7); }

.social-cta-btn--whatsapp {
	background: #25D366;
	color: var(--color-white);
}

.social-cta-btn--whatsapp:hover {
	background: #20bd5a;
	color: var(--color-white);
	transform: translateX(4px);
}

.social-cta-btn--instagram {
	background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	color: var(--color-white);
}

.social-cta-btn--instagram:hover {
	opacity: 0.92;
	color: var(--color-white);
	transform: translateX(4px);
}

/* ─── Responsive extensions ─────────────────────────────────────── */
@media (min-width: 768px) {
	.about-layout {
		grid-template-columns: 1fr 1fr;
	}
}


/* =====================================================
   Hero-Background-Images
   Quelle: Unsplash (https://unsplash.com/license)
   ===================================================== */

.hero.hero-wall, .page-hero.hero-wall {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero.hero-wall::after, .page-hero.hero-wall::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=1600&q=70");
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
}

.template-template-werkstatt .hero.hero-wall::after, .page-hero.hero-wall::after {
    background-image: url("https://images.unsplash.com/photo-1493238792000-8113da705763?auto=format&fit=crop&w=1600&q=70");
}

.template-template-leistungen .hero.hero-wall::after, .page-hero.hero-wall::after {
    background-image: url("https://images.unsplash.com/photo-1567789884554-0b844b597180?auto=format&fit=crop&w=1600&q=70");
}

.template-template-service .hero.hero-wall::after, .page-hero.hero-wall::after {
    background-image: url("https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=1600&q=70");
}

.template-template-kontakt .hero.hero-wall::after, .page-hero.hero-wall::after {
    background-image: url("https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?auto=format&fit=crop&w=1600&q=70");
}


/* =====================================================
   Primary-Nav: kein Right-Margin zwischen Items
   ===================================================== */
.primary-nav .nav-list > li + li {
    margin: 0;
}


/* =====================================================
   Mobile-Responsive Polish (Mobile-First Fixes)
   ===================================================== */

html, body {
    overflow-x: hidden;
}

@media (max-width: 767px) {
    .about-stats {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        max-width: 100%;
    }
}

@media (max-width: 599px) {
    .services-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    h2.stencil-text,
    .section-title,
    .section-accent {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
        word-break: break-word;
        hyphens: auto;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .service-card__title {
        word-break: break-word;
        hyphens: auto;
        overflow-wrap: anywhere;
        font-size: clamp(1.05rem, 4.8vw, 1.3rem);
    }

    .stencil-text {
        max-width: 100%;
        word-break: break-word;
    }
}

@media (max-width: 767px) {
    .container,
    .section,
    .section-services,
    [class*="section-"] {
        max-width: 100%;
        overflow-x: hidden;
    }
}


/* Fix: H2 mit overflow:auto und fixer Höhe sollte das nicht haben */
h2.stencil-text,
.stencil-text {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}