/* ══════════════════════════════════════════════════════════════
   AUTO VERKAUFEN BOCHOLT – fixes.css
   Supplemental styles for inner-page components.
   style.css is the source of truth for core components.
   ══════════════════════════════════════════════════════════════ */

/* ── Logo overflow fix ───────────────────────────────────────── */
.nav-logo { overflow: visible; max-width: 220px; }
.logo-svg { height: 48px; width: auto; max-width: 100%; overflow: visible; display: block; }
.footer-logo svg { overflow: visible; }

/* ── Scrolled nav shadow ─────────────────────────────────────── */
.navbar.scrolled { box-shadow: 0 4px 24px rgba(10,30,15,0.14); }

/* ── Scroll-to-top visibility ────────────────────────────────── */
.scroll-top {
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 9001 !important; /* always above WhatsApp popup (9000) */
}
.scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--primary-light); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26,122,56,0.3); }

/* ── Process section background ──────────────────────────────── */
.process-section { background: linear-gradient(135deg, #ecf7ef 0%, #e8f8ee 100%); }

/* ── Testimonial card quote mark ─────────────────────────────── */
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -10px; left: 1.5rem;
  font-size: 5rem;
  color: rgba(255,255,255,0.06);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

/* ── Cookie consent ──────────────────────────────────────────── */
.cookie-consent {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9500;
  background: white;
  border-top: 2px solid rgba(26,122,56,0.2);
  box-shadow: 0 -8px 40px rgba(10,30,15,0.1);
  padding: 1.25rem 1.5rem;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease, visibility 0.4s ease;
  border-radius: 0;
}
.cookie-consent.show { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; display: block; }
.cookie-consent-inner { max-width: var(--container); margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.cookie-text { flex: 1; min-width: 200px; }
.cookie-text strong { display: block; font-size: 0.9rem; color: var(--primary-dark); margin-bottom: 0.2rem; }
.cookie-text p { font-size: 0.8rem; color: var(--text-medium); margin: 0; line-height: 1.5; }
.cookie-text a { color: var(--primary-light); text-decoration: underline; }
.cookie-actions { display: flex; gap: 0.6rem; flex-shrink: 0; align-items: center; }
.cookie-btn-reject { padding: 0.55rem 1.2rem; background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; color: var(--text-medium); cursor: pointer; transition: all 0.2s; white-space: nowrap; font-family: var(--font); }
.cookie-btn-reject:hover { border-color: var(--danger); color: var(--danger); }
.cookie-btn-accept { padding: 0.55rem 1.4rem; background: var(--primary); border: none; border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; color: white; cursor: pointer; transition: all 0.2s; white-space: nowrap; font-family: var(--font); box-shadow: 0 3px 12px rgba(26,122,56,0.25); }
.cookie-btn-accept:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* ── File upload field ───────────────────────────────────────── */
.form-control-file { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.upload-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; padding: 0.85rem 1.25rem; border: 2px dashed rgba(26,122,56,0.3); border-radius: var(--radius-lg); color: var(--primary-light); font-weight: 600; font-size: 0.875rem; transition: all 0.25s; background: rgba(26,122,56,0.04); position: relative; }
.upload-label:hover { border-color: var(--primary-light); background: rgba(26,122,56,0.08); transform: translateY(-1px); }
.upload-label .upload-filename { font-size: 0.78rem; color: var(--text-medium); font-weight: 400; margin-left: auto; }

/* ── Mobile nav overlay body lock ────────────────────────────── */
@media (max-width: 1023px) {
  body.nav-open { overflow: hidden; }
}

/* ── How It Works – service page steps ──────────────────────── */
.how-it-works { margin: 2rem 0; }
.how-it-works-steps { display: flex; flex-direction: column; gap: 0.9rem; }
.how-step {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: white;
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.75rem;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.how-step::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary-light), var(--accent));
  border-radius: 0 2px 2px 0;
  transform: scaleY(0);
  transition: transform var(--transition);
  transform-origin: top;
}
.how-step:hover { box-shadow: var(--shadow-md); border-color: rgba(26,122,56,0.2); transform: translateX(5px); }
.how-step:hover::before { transform: scaleY(1); }
.how-step-header { display: flex; align-items: center; gap: 0.9rem; }
.how-step-num { width: 38px; height: 38px; min-width: 38px; background: linear-gradient(135deg, var(--primary-light), var(--accent)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 0.95rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(26,122,56,0.25); }
.how-step-icon { width: 42px; height: 42px; min-width: 42px; background: rgba(26,122,56,0.08); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--primary-light); flex-shrink: 0; transition: all var(--transition); }
.how-step:hover .how-step-icon { background: linear-gradient(135deg, var(--primary-light), var(--accent)); color: white; }
.how-step-title { font-size: 1rem; font-weight: 700; color: var(--primary-dark); margin: 0; line-height: 1.3; flex: 1; }
.how-step-desc { font-size: 0.875rem; color: var(--text-medium); margin: 0; line-height: 1.65; }

/* ── Vehicle Types Grid ──────────────────────────────────────── */
.vehicle-types-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.25rem 0; }
.vehicle-type-card { background: var(--off-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; text-align: center; transition: all var(--transition); }
.vehicle-type-card:hover { background: white; box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(26,122,56,0.2); }
.vehicle-type-icon { width: 52px; height: 52px; background: rgba(26,122,56,0.08); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--primary-light); margin: 0 auto 0.75rem; }
.vehicle-type-card h4 { font-size: 0.875rem; color: var(--primary-dark); margin-bottom: 0.2rem; }
.vehicle-type-card p { font-size: 0.78rem; color: var(--text-medium); margin: 0; }
@media (min-width: 768px) { .vehicle-types-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Promise Cards ───────────────────────────────────────────── */
.promise-card-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin: 1.25rem 0; }
.promise-card { display: flex; gap: 1rem; align-items: flex-start; background: white; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.1rem; transition: all var(--transition); box-shadow: var(--shadow-sm); }
.promise-card:hover { box-shadow: var(--shadow-md); border-color: rgba(26,122,56,0.2); transform: translateY(-2px); }
.promise-card-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--primary-light), var(--accent)); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; }
.promise-card-text h4 { font-size: 0.9rem; color: var(--primary-dark); margin-bottom: 0.2rem; }
.promise-card-text p { font-size: 0.8rem; color: var(--text-medium); margin: 0; line-height: 1.5; }
@media (min-width: 768px) { .promise-card-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Inline CTA Strip ────────────────────────────────────────── */
.inline-cta-strip { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius: var(--radius-xl); padding: 1.75rem 2rem; margin: 2.5rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.inline-cta-strip-text h3 { color: white; font-size: 1.05rem; margin-bottom: 0.2rem; }
.inline-cta-strip-text p { color: rgba(255,255,255,0.8); font-size: 0.85rem; margin: 0; }
.inline-cta-strip-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; flex-shrink: 0; }

/* ── District Header Image ───────────────────────────────────── */
.district-header-img { width: 100%; height: 200px; background: linear-gradient(135deg, #e4f7ea, #dcfce7); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 1.75rem; position: relative; border: 2px dashed rgba(26,122,56,0.22); display: flex; align-items: center; justify-content: center; }
.district-header-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-xl); }
.district-header-img-placeholder { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-light); font-size: 0.825rem; text-align: center; padding: 1rem; }
.district-header-img-placeholder svg { color: var(--primary-light); }
.district-header-img-placeholder strong { color: var(--primary-light); font-size: 0.825rem; display: block; }

/* ── Map Embed Preview ───────────────────────────────────────── */
.map-embed-wrap { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-light); margin: 2rem 0; box-shadow: var(--shadow-sm); }
.map-embed-preview { width: 100%; height: 180px; background: linear-gradient(135deg, #e4f7ea 0%, #a7f3d0 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; cursor: pointer; position: relative; transition: background var(--transition); }
.map-embed-preview:hover { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); }
.map-embed-location { font-weight: 700; font-size: 1rem; color: var(--primary-dark); }
.map-embed-sub { font-size: 0.8rem; color: var(--text-medium); }
.map-embed-footer { padding: 0.75rem 1.25rem; background: var(--off-white); border-top: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.map-embed-footer p { font-size: 0.8rem; color: var(--text-medium); margin: 0; }

/* ── Map Modal ───────────────────────────────────────────────── */
.map-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
.map-modal-overlay.open { opacity: 1; visibility: visible; }
.map-modal-box { background: white; border-radius: var(--radius-xl); width: 100%; max-width: 720px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,0.3); transform: scale(0.95) translateY(20px); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.map-modal-overlay.open .map-modal-box { transform: scale(1) translateY(0); }
.map-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-light); }
.map-modal-header h3 { font-size: 1rem; color: var(--primary-dark); margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.map-modal-close-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--off-white); display: flex; align-items: center; justify-content: center; color: var(--text-medium); cursor: pointer; transition: all var(--transition); border: 1px solid var(--border-light); font-size: 1.2rem; line-height: 1; }
.map-modal-close-btn:hover { background: var(--danger); color: white; border-color: var(--danger); }
.map-modal-iframe-wrap { position: relative; height: 520px; flex: 1 1 auto; min-height: 320px; background: var(--light-bg); }
.map-modal-iframe-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.map-modal-footer { padding: 0.9rem 1.25rem; border-top: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; background: var(--off-white); }
.map-modal-footer p { font-size: 0.8rem; color: var(--text-medium); margin: 0; }

/* ── Mid-article CTA ─────────────────────────────────────────── */
.mid-article-cta {
  background: linear-gradient(to right, #ffffff 0%, #e4f5eb 28%, #b8e6cc 55%, #1a7a38 82%, #0e5c1c 100%);
  border-radius: var(--radius-xl);
  padding: 2rem 2.5rem;
  margin: 2.5rem 0;
  text-align: center;
  border: 1px solid rgba(26,122,56,0.18);
  box-shadow: 0 8px 32px rgba(26,122,56,0.12);
}
.mid-article-cta h3 { color: var(--primary-dark); margin-bottom: 0.5rem; font-size: 1.2rem; font-weight: 800; }
.mid-article-cta p { color: var(--text-medium); font-size: 0.9rem; margin-bottom: 1.25rem; }
.mid-article-cta-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.mid-article-cta-actions .btn {
  border-radius: var(--radius-full) !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease !important;
}
.mid-article-cta-actions .btn:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.2) !important;
}

/* ── Article FAQ ─────────────────────────────────────────────── */
.article-faq { margin: 2.5rem 0 1.5rem; }
.article-faq h2 { color: var(--primary); margin-bottom: 1.25rem; font-size: 1.4rem; }

/* ── Sticky sidebars ─────────────────────────────────────────── */
@media (min-width: 768px) {
  .content-sidebar-sticky { position: sticky; top: 108px; align-self: flex-start; }
  .article-sidebar-sticky { position: sticky; top: 108px; align-self: flex-start; }
}

/* ── About – Mission Section ─────────────────────────────────── */
.mission-section { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); padding: 5rem 0; overflow: hidden; position: relative; }
.mission-section::before { content: ''; position: absolute; top: -120px; right: -120px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 65%); border-radius: 50%; pointer-events: none; }
.mission-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; position: relative; z-index: 2; }
.mission-content .section-tag { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); }
.mission-content h2 { color: white; margin-bottom: 1rem; }
.mission-content > p { color: rgba(255,255,255,0.8); }
.mission-points { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.mission-point { display: flex; gap: 0.75rem; align-items: flex-start; }
.mission-point-icon { width: 32px; height: 32px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; }
.mission-point h4 { font-size: 0.95rem; color: white; margin-bottom: 0.15rem; }
.mission-point p { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: 0; }
.mission-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-content: start; }
.mission-stat-card { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 130px; gap: 0.5rem; transition: transform var(--transition), background var(--transition); }
.mission-stat-card:hover { background: rgba(255,255,255,0.15); transform: translateY(-3px); }
.mission-stat-num { display: block; font-size: 2.5rem; font-weight: 900; color: white; line-height: 1; letter-spacing: -0.02em; }
.mission-stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.75); line-height: 1.4; max-width: 120px; }
@media (min-width: 768px) { .mission-grid { grid-template-columns: 1fr 1fr; } }

/* ── About Us — Company Story intro + stats card ─────────────── */
.about-intro { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .about-intro { grid-template-columns: 1.12fr 0.88fr; gap: 3.5rem; } }
.about-intro-content h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; color: var(--text-dark); margin: 0.5rem 0 1rem; letter-spacing: -0.02em; line-height: 1.2; }
.about-intro-content .lead { font-size: 1.075rem; color: var(--text-dark); line-height: 1.7; margin-bottom: 1rem; font-weight: 500; }
.about-intro-content p { color: var(--text-medium); line-height: 1.78; margin-bottom: 1rem; }
.about-intro-content p:last-child { margin-bottom: 0; }
.about-stats-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl, 20px);
  overflow: hidden;
  box-shadow: 0 18px 52px rgba(10,40,20,0.1), 0 2px 8px rgba(10,40,20,0.04);
}
.about-stat {
  background: #fff; padding: 1.875rem 1.5rem; text-align: center;
  display: flex; flex-direction: column; gap: 0.4rem;
  transition: background 0.3s ease;
}
.about-stat:hover { background: linear-gradient(135deg, rgba(62,207,114,0.07), rgba(26,122,56,0.03)); }
.about-stat-num {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--primary);
}
.about-stat-label { font-size: 0.8rem; color: var(--text-medium); line-height: 1.4; font-weight: 500; }

/* ── NRW Section ─────────────────────────────────────────────── */
.nrw-section { background: var(--off-white); }
.nrw-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.nrw-content h2 { margin-bottom: 1rem; }
.nrw-content > p { color: var(--text-medium); }
.nrw-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.nrw-highlight { background: white; border-radius: var(--radius-lg); padding: 1.25rem; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); transition: all var(--transition); }
.nrw-highlight:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.nrw-highlight-icon { color: var(--primary-light); margin-bottom: 0.5rem; }
.nrw-highlight h4 { font-size: 0.9rem; color: var(--primary-dark); margin-bottom: 0.2rem; }
.nrw-highlight p { font-size: 0.8rem; color: var(--text-medium); margin: 0; }
.nrw-visual { background: linear-gradient(135deg, var(--light-bg), #dcfce7); border-radius: var(--radius-xl); padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 260px; border: 1px solid rgba(26,122,56,0.15); text-align: center; }
.nrw-visual h3 { color: var(--primary); margin: 0; }

/* ── Red hero variant ────────────────────────────────────────── */
.page-hero-red { background: linear-gradient(135deg, #0f0505 0%, #7f1d1d 50%, #991b1b 100%) !important; }

/* ── Reveal animations ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ── Focus visible ───────────────────────────────────────────── */
.faq-question:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }

/* ── Stat number font variant ────────────────────────────────── */
.stat-number { font-variant-numeric: tabular-nums; }

/* ── Icon stroke-width override ──────────────────────────────── */
.service-card-icon svg,
.stat-icon svg,
.why-feature-icon svg,
.footer-contact-item svg,
.nav-dropdown-item svg { stroke-width: 1.5; }

/* ══════════════════════════════════════════════════════════════
   UI/UX IMPROVEMENTS — added 2026-06-26
   ══════════════════════════════════════════════════════════════ */

/* ── Logo hover animation ────────────────────────────────────── */
.nav-logo {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
  display: inline-flex;
  align-items: center;
}
.nav-logo:hover {
  transform: translateY(-2px) scale(1.02);
  opacity: 0.9;
}
.nav-logo .logo-svg { transition: filter 0.3s ease; }
.nav-logo:hover .logo-svg { filter: drop-shadow(0 4px 12px rgba(26,122,56,0.3)); }
.footer-logo {
  display: inline-flex;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
}
.footer-logo:hover {
  transform: translateY(-2px) scale(1.03);
  opacity: 0.88;
}
.footer-logo svg { transition: filter 0.3s ease; }
.footer-logo:hover svg { filter: drop-shadow(0 4px 10px rgba(26,122,56,0.25)); }

/* ── About Us — "Was uns antreibt" (Values) ──────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 500px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }

.value-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.value-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 52px rgba(26,122,56,0.13), 0 4px 16px rgba(0,0,0,0.06);
  border-color: rgba(26,122,56,0.22);
}
.value-card:hover::before { transform: scaleX(1); }

.value-icon {
  width: 62px; height: 62px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(62,207,114,0.12) 0%, rgba(26,122,56,0.08) 100%);
  border: 1px solid rgba(26,122,56,0.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.375rem;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease;
}
.value-card:hover .value-icon {
  transform: scale(1.12) rotate(6deg);
  background: linear-gradient(135deg, rgba(62,207,114,0.22) 0%, rgba(26,122,56,0.15) 100%);
}
.value-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.625rem;
  line-height: 1.3;
}
.value-card p { font-size: 0.9rem; color: var(--text-medium); line-height: 1.7; margin: 0; }

/* ── About Us — "Seriös, rechtssicher & zuverlässig" (Certs) ── */
.cert-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 600px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cert-grid { grid-template-columns: repeat(4, 1fr); } }

.cert-item {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 2rem 1.625rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.cert-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-light), var(--accent));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.cert-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 52px rgba(26,122,56,0.13), 0 4px 16px rgba(0,0,0,0.06);
}
.cert-item:hover::after { transform: scaleX(1); }

.cert-icon {
  width: 62px; height: 62px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(62,207,114,0.1) 0%, rgba(26,122,56,0.07) 100%);
  border: 1px solid rgba(26,122,56,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.375rem;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease;
}
.cert-item:hover .cert-icon {
  transform: scale(1.1) rotate(-5deg);
  background: linear-gradient(135deg, rgba(62,207,114,0.2) 0%, rgba(26,122,56,0.14) 100%);
}
.cert-item h4 { font-size: 1.05rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.5rem; }
.cert-item p { font-size: 0.875rem; color: var(--text-medium); line-height: 1.7; margin: 0; }

/* ── About Us — "Alles für Ihre Zufriedenheit" (Customer Focus) */
.customer-focus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 600px) { .customer-focus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .customer-focus-grid { grid-template-columns: repeat(3, 1fr); } }

.customer-focus-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 1.625rem;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.customer-focus-item:hover {
  transform: translateY(-5px) translateX(2px);
  box-shadow: 0 16px 48px rgba(26,122,56,0.1), 0 4px 12px rgba(0,0,0,0.04);
  border-color: rgba(26,122,56,0.2);
}
.customer-focus-icon {
  width: 52px; height: 52px; min-width: 52px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(26,122,56,0.25);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.customer-focus-item:hover .customer-focus-icon {
  transform: scale(1.1) rotate(8deg);
  box-shadow: 0 10px 28px rgba(26,122,56,0.35);
}
.customer-focus-item h4 { font-size: 1rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.35rem; }
.customer-focus-item p { font-size: 0.875rem; color: var(--text-medium); line-height: 1.65; margin: 0; }

/* ── Vehicle-appraisal CTA + form: standalone premium band ───── */
/* Distinct tinted band with generous spacing so the CTA never
   "touches" the section above and reads as its own component. */
.contact-form-section {
  padding: 5.5rem 0 6rem;
  background:
    radial-gradient(circle at 85% 0%, rgba(62,207,114,0.06) 0%, transparent 45%),
    linear-gradient(180deg, #f4faf6 0%, #eaf5ee 100%);
  border-top: 1px solid rgba(26,122,56,0.08);
  position: relative;
}
.contact-form-section > .container {
  max-width: 1080px;
}

/* ── Premium CTA intro ── */
.cta-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}
@media (min-width: 900px) { .cta-intro-grid { grid-template-columns: 1.05fr 0.95fr; gap: 1.75rem; } }

.cta-intro-left {
  background: linear-gradient(155deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
  border-radius: var(--radius-2xl, 20px);
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cta-intro-left::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.cta-intro-left .section-tag {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  margin-bottom: 1.25rem;
}
.cta-intro-left h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 0.875rem;
  letter-spacing: -0.02em;
}
.cta-intro-left p {
  color: rgba(255,255,255,0.78);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
}
.cta-intro-car-icon {
  position: absolute;
  bottom: 1.25rem; right: 1.25rem;
  opacity: 0.1;
  pointer-events: none;
}

.cta-intro-right {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl, 20px);
  padding: 2rem 1.875rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.cta-benefits-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border-light);
}
.cta-benefit-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.cta-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}
.cta-benefit-check {
  width: 26px; height: 26px; min-width: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: white;
  margin-top: 0.1rem;
}
.cta-benefit-item strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
}
.cta-benefit-item span {
  font-size: 0.8rem;
  color: var(--text-medium);
  line-height: 1.4;
}
.cta-direct-contact {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* ── The appraisal form as an elegant standalone card ────────── */
.contact-form-main {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl, 20px);
  padding: 2.75rem 2.5rem 3rem;
  box-shadow: 0 18px 50px rgba(10,40,20,0.08), 0 2px 8px rgba(10,40,20,0.04);
  position: relative;
  overflow: hidden;
}
.contact-form-main::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent));
}
.contact-form-main .form-section-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 1.25rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-form-main .form-section-title:not(:first-child) { margin-top: 2rem; }
@media (min-width: 560px) {
  .contact-form-main .vehicle-form .form-row { grid-template-columns: 1fr 1fr; }
}
.form-privacy { margin: 1.25rem 0 1.5rem; }
.checkbox-label { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--text-medium); line-height: 1.5; cursor: pointer; }
.checkbox-label input { width: auto; min-height: auto; margin-top: 0.15rem; accent-color: var(--primary); flex-shrink: 0; }
.checkbox-label a { color: var(--primary-light); text-decoration: underline; }
@media (max-width: 600px) { .contact-form-main { padding: 2rem 1.375rem 2.25rem; } .contact-form-section { padding: 4rem 0 4.5rem; } }

/* ── Additional / Related Services — premium card grid ───────── */
.related-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(62,207,114,0.05) 0%, transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f2f8f4 100%);
}
.related-section .section-title { margin-bottom: 0.625rem; }
.related-section .section-title + p { text-align: center; color: var(--text-medium); max-width: 560px; margin: 0 auto; }

/* Override the joined 1px-gap base grid → clean spaced 3-up grid */
.services-grid.services-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background: transparent;
  border: 0;
  margin-top: 2.75rem;
}
@media (min-width: 600px) { .services-grid.services-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .services-grid.services-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.service-link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 2.25rem 1.875rem 2.25rem;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.32s ease, border-color 0.3s ease;
}
.service-link-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.38s ease;
}
.service-link-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(26,122,56,0.14), 0 4px 14px rgba(0,0,0,0.05);
  border-color: rgba(26,122,56,0.22);
}
.service-link-card:hover::before { transform: scaleX(1); }

/* Bare inline SVG → framed gradient icon tile */
.service-link-card > svg {
  width: 56px; height: 56px;
  padding: 14px;
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(62,207,114,0.14), rgba(26,122,56,0.09));
  border: 1px solid rgba(26,122,56,0.12);
  color: var(--primary);
  margin-bottom: 1.375rem;
  transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease, color 0.3s ease;
}
.service-link-card:hover > svg {
  transform: scale(1.08) rotate(-5deg);
  background: linear-gradient(135deg, rgba(62,207,114,0.24), rgba(26,122,56,0.16));
}
.service-link-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin: 0 0 0.45rem;
  letter-spacing: -0.01em;
}
.service-link-card p {
  font-size: 0.9rem;
  color: var(--text-medium);
  line-height: 1.6;
  margin: 0;
}
.service-link-card::after {
  content: 'Mehr erfahren →';
  margin-top: 1.125rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  opacity: 0.85;
  transition: transform 0.32s ease, opacity 0.3s ease;
}
.service-link-card:hover::after { transform: translateX(5px); opacity: 1; }

/* ════════════════════════════════════════════════════════════
   KFZ-Bewertung & shared content components (steps / factors /
   check-lists / alerts) — were previously unstyled ("broken").
   ════════════════════════════════════════════════════════════ */

/* Sidebar card heading (templates use bare <h3>) */
.sidebar-card > h3 { font-size: 1.05rem; font-weight: 800; color: var(--primary-dark); margin: 0 0 0.875rem; }
.sidebar-card > p { font-size: 0.875rem; color: var(--text-medium); line-height: 1.6; margin: 0 0 1rem; }
.sidebar-card-highlight {
  background: linear-gradient(155deg, var(--primary-dark) 0%, var(--primary) 70%, var(--primary-light) 100%);
  border: 0; position: relative; overflow: hidden;
}
.sidebar-card-highlight::before {
  content: ''; position: absolute; top: -60px; right: -60px; width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 60%); border-radius: 50%;
}
.sidebar-card-highlight > h3 { color: #fff; position: relative; }
.sidebar-card-highlight > p { color: rgba(255,255,255,0.82); position: relative; }

/* ── Location-page sidebar: professional link widgets ────────── */
.content-sidebar .sidebar-card { transition: box-shadow 0.3s ease, transform 0.3s ease; }
.content-sidebar .sidebar-card:not(.sidebar-card-highlight):hover {
  box-shadow: 0 14px 38px rgba(10,40,20,0.09);
  transform: translateY(-2px);
}
/* Accent bar before regular sidebar card headings */
.content-sidebar .sidebar-card:not(.sidebar-card-highlight) > h3 {
  position: relative; padding-left: 0.85rem; font-size: 1rem;
}
.content-sidebar .sidebar-card:not(.sidebar-card-highlight) > h3::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 1.05em; border-radius: 2px;
  background: linear-gradient(var(--primary), var(--primary-light));
}
.sidebar-links { list-style: none; padding: 0; margin: 0; }
.sidebar-links li { margin: 0; }
.sidebar-links li a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.5rem 0.7rem 0.75rem;
  font-size: 0.9rem; color: var(--text-medium); font-weight: 500;
  border-radius: var(--radius); text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.22s ease, color 0.22s ease, padding 0.22s ease;
}
.sidebar-links li:last-child a { border-bottom: 0; }
.sidebar-links li a svg { color: var(--primary-light); flex-shrink: 0; transition: transform 0.22s ease; }
.sidebar-links li a:hover { background: rgba(26,122,56,0.06); color: var(--primary-dark); padding-left: 1rem; }
.sidebar-links li a:hover svg { transform: translateX(3px); }

/* Highlight inquiry card: roomy button stack */
.sidebar-card-highlight .btn { position: relative; }
.sidebar-card-highlight .btn + .btn { margin-top: 0.625rem; }

/* Numbered process steps — connected vertical cards */
.process-steps-simple { display: flex; flex-direction: column; gap: 1rem; margin: 1.75rem 0 2.5rem; }
.step-simple {
  display: flex; gap: 1.125rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  padding: 1.375rem 1.5rem; position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.step-simple:hover { transform: translateX(5px); box-shadow: 0 14px 36px rgba(26,122,56,0.1); border-color: rgba(26,122,56,0.2); }
.step-simple .step-num {
  width: 44px; height: 44px; min-width: 44px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; box-shadow: 0 6px 16px rgba(26,122,56,0.28);
}
.step-simple strong { display: block; font-size: 1.02rem; color: var(--primary-dark); margin-bottom: 0.3rem; font-weight: 700; }
.step-simple p { margin: 0; font-size: 0.9rem; color: var(--text-medium); line-height: 1.6; }

/* Value factors — positive / negative two-column cards */
.value-factors { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0 2rem; }
@media (min-width: 640px) { .value-factors { grid-template-columns: 1fr 1fr; } }
.value-factor { border-radius: var(--radius-lg); padding: 1.75rem 1.625rem; border: 1px solid; }
.value-factor h4 { font-size: 1.05rem; font-weight: 800; margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid; }
.value-factor.positive { background: linear-gradient(180deg, rgba(62,207,114,0.08), rgba(62,207,114,0.02)); border-color: rgba(26,122,56,0.18); }
.value-factor.positive h4 { color: var(--primary); border-color: rgba(26,122,56,0.15); }
.value-factor.negative { background: linear-gradient(180deg, rgba(239,68,68,0.05), rgba(239,68,68,0.01)); border-color: rgba(239,68,68,0.16); }
.value-factor.negative h4 { color: #c2410c; border-color: rgba(239,68,68,0.14); }

/* Check list — green tick markers (shared across service sidebars) */
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.check-list li {
  position: relative; padding-left: 1.9rem; font-size: 0.9rem; color: var(--text-medium); line-height: 1.5;
}
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(26,122,56,0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7a38' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* Negative factors get a red minus marker instead of a green tick */
.value-factor.negative .check-list li::before {
  background: rgba(239,68,68,0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Alert / callout box */
.alert-box { display: flex; gap: 0.875rem; align-items: flex-start; border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin: 1.75rem 0 0.5rem; }
.alert-box svg { flex-shrink: 0; margin-top: 2px; }
.alert-box p { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.alert-box.alert-success { background: rgba(26,122,56,0.07); border: 1px solid rgba(26,122,56,0.18); color: var(--primary-dark); }
.alert-box.alert-success svg { color: var(--primary); }

/* ── Blog Article Image — constrained size ───────────────────── */
.article-image {
  max-width: 780px;
  max-height: 340px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  margin: 0 auto 2.5rem;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  background: var(--off-white);
}
.article-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Blog Article Page Hero title ────────────────────────────── */
.blog-article-hero-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin-top: 0.875rem;
  color: rgba(255,255,255,0.55);
  font-size: 0.85rem;
}
.article-meta svg { display: inline; vertical-align: middle; margin-right: 0.25rem; }
.article-meta time, .article-meta > span { display: inline-flex; align-items: center; }
.article-tags-inline { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.blog-article-hero-title { font-size: clamp(1.65rem, 3.6vw, 2.75rem); max-width: 920px; line-height: 1.18; }

/* ════════════════════════════════════════════════════════════
   Blog article — premium reading layout & typography
   ════════════════════════════════════════════════════════════ */
.article-section { background: linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%); }
.article-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 980px) {
  .article-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 3.25rem; align-items: start; }
}
.article-content {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl, 20px);
  padding: 2.5rem 2.75rem 3rem;
  box-shadow: 0 10px 40px rgba(10,40,20,0.05);
}
@media (max-width: 600px) { .article-content { padding: 1.75rem 1.375rem 2.25rem; } }

/* Reading typography for post.content */
.article-body { font-size: 1.0625rem; line-height: 1.8; color: var(--text-medium); }
.article-body > *:first-child { margin-top: 0; }
.article-body h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 800; color: var(--primary-dark); margin: 2.5rem 0 1rem; letter-spacing: -0.01em; line-height: 1.25; }
.article-body h3 { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin: 2rem 0 0.75rem; }
.article-body p { margin: 0 0 1.25rem; }
.article-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--primary-dark); }
.article-body strong { color: var(--text-dark); font-weight: 700; }
.article-body ul, .article-body ol { margin: 0 0 1.5rem; padding-left: 0; list-style: none; }
.article-body ul li, .article-body ol li { position: relative; padding-left: 1.85rem; margin-bottom: 0.65rem; line-height: 1.7; }
.article-body ul li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-light); }
.article-body ol { counter-reset: ol; }
.article-body ol li { counter-increment: ol; }
.article-body ol li::before { content: counter(ol); position: absolute; left: 0; top: 0.05em; width: 1.4rem; height: 1.4rem; font-size: 0.72rem; font-weight: 800; color: #fff; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.article-body blockquote { border-left: 4px solid var(--primary); background: rgba(26,122,56,0.05); padding: 1rem 1.5rem; margin: 1.75rem 0; border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--text-dark); }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: 1.5rem 0; }
.article-body h2:first-of-type { margin-top: 0.5rem; }

/* Blog tags / chips */
.blog-tag {
  display: inline-flex; align-items: center;
  padding: 0.32rem 0.8rem; font-size: 0.75rem; font-weight: 600;
  color: var(--primary-dark); background: rgba(26,122,56,0.08);
  border: 1px solid rgba(26,122,56,0.14); border-radius: var(--radius-full);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.blog-tag:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Article footer CTA */
.article-footer { margin-top: 2.25rem; }
.article-cta-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; }

/* Sidebar: related posts */
.related-posts { display: flex; flex-direction: column; }
.related-post-item { display: block; padding: 0.8rem 0.5rem; border-bottom: 1px solid var(--border-light); text-decoration: none; transition: padding 0.22s ease; }
.related-post-item:last-child { border-bottom: 0; }
.related-post-title { font-size: 0.875rem; color: var(--text-medium); font-weight: 600; line-height: 1.45; transition: color 0.2s ease; }
.related-post-item:hover { padding-left: 0.85rem; }
.related-post-item:hover .related-post-title { color: var(--primary); }

/* ── Hero car card icon — override front-facing with side-profile */
.hero-car-icon { display: flex; align-items: center; justify-content: center; }
.hero-car-icon svg { width: 100%; height: auto; display: block; }

/* ── NRW chip improvements ───────────────────────────────────── */
.nrw-districts-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; justify-content: center; }
.nrw-chip { padding: 0.3rem 0.875rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-full); font-size: 0.8rem; color: rgba(255,255,255,0.85); }

/* ══════════════════════════════════════════════════════════════
   PREMIUM UI/UX ENHANCEMENTS — 2026-06-27
   Tasks: sidebar CTAs, inline CTA, location typography,
   district callouts, carousel dots, KFZ sidebar
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Carousel dots — enhanced style ──────────────────────── */
.testimonials-dots { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: center; max-width: 200px; }
.testimonial-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  cursor: pointer; border: none; padding: 0;
  transition: background 0.3s ease, width 0.3s cubic-bezier(0.4,0,0.2,1), border-radius 0.3s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.testimonial-dot:hover { background: rgba(255,255,255,0.45); transform: scale(1.25); }
.testimonial-dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(34,197,94,0.5);
}

/* ── 2. Premium sidebar CTA stack ───────────────────────────── */
.sidebar-cta-stack { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.25rem; }

/* Phone button */
.sidebar-btn-phone {
  display: flex; align-items: center; gap: 0.875rem;
  width: 100%; padding: 0.85rem 1.125rem;
  background: #ffffff;
  color: var(--primary-dark);
  border-radius: var(--radius-lg); border: none;
  text-decoration: none; cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 4px 18px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, background 0.2s ease;
  position: relative; overflow: hidden;
}
.sidebar-btn-phone:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.07);
  background: #f0fdf4;
}
.sidebar-btn-phone-icon {
  width: 38px; height: 38px; min-width: 38px;
  border-radius: 50%;
  background: rgba(26,122,56,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); flex-shrink: 0;
  transition: transform 0.3s ease, background 0.2s ease;
}
.sidebar-btn-phone:hover .sidebar-btn-phone-icon {
  background: rgba(26,122,56,0.16);
  animation: sidebar-phone-ring 0.55s ease;
}
@keyframes sidebar-phone-ring {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-18deg) scale(1.1); }
  40% { transform: rotate(16deg) scale(1.1); }
  60% { transform: rotate(-10deg) scale(1.05); }
  80% { transform: rotate(8deg) scale(1.05); }
}
.sidebar-btn-phone-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.sidebar-btn-phone-label { font-size: 0.7rem; font-weight: 500; color: var(--text-light); line-height: 1; margin-bottom: 0.15rem; letter-spacing: 0.02em; }
.sidebar-btn-phone-number { font-size: 0.925rem; font-weight: 800; color: var(--primary-dark); line-height: 1.1; letter-spacing: -0.01em; }
.sidebar-btn-phone-arrow { color: var(--primary); opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease; flex-shrink: 0; }
.sidebar-btn-phone:hover .sidebar-btn-phone-arrow { opacity: 1; transform: translateX(0); }

/* WhatsApp boxed CTA */
.sidebar-btn-whatsapp {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  width: 100%; padding: 0.875rem 1.125rem;
  background: #25D366;
  color: #fff;
  font-weight: 700; font-size: 0.9rem;
  border-radius: var(--radius-lg); border: none;
  text-decoration: none; cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 4px 18px rgba(37,211,102,0.35);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, background 0.2s ease;
}
.sidebar-btn-whatsapp:hover {
  background: #1aad55;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(37,211,102,0.45);
  color: #fff;
}
.sidebar-btn-whatsapp svg { flex-shrink: 0; transition: transform 0.3s ease; }
.sidebar-btn-whatsapp:hover svg { transform: scale(1.15) rotate(-5deg); }

/* Callback button */
.sidebar-btn-callback {
  display: flex; align-items: center; justify-content: center; gap: 0.65rem;
  width: 100%; padding: 0.825rem 1.125rem;
  background: rgba(255,255,255,0.1);
  color: #fff; font-weight: 600; font-size: 0.875rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid rgba(255,255,255,0.28);
  cursor: pointer; text-decoration: none;
  font-family: var(--font);
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
}
.sidebar-btn-callback:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.sidebar-btn-callback svg { flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.sidebar-btn-callback:hover svg { transform: rotate(25deg) scale(1.15); }

/* ── 3. Enhanced inline CTA strip ───────────────────────────── */
.inline-cta-strip {
  background: linear-gradient(to right, #ffffff 0%, #e4f5eb 28%, #b8e6cc 55%, #1a7a38 82%, #0e5c1c 100%);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2.5rem;
  margin: 2.75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(26,122,56,0.18);
  box-shadow: 0 16px 50px rgba(26,122,56,0.15), 0 4px 12px rgba(0,0,0,0.06);
}
.inline-cta-strip::before { content: none; }
.inline-cta-strip::after  { content: none; }
.inline-cta-strip-text h3 {
  color: var(--primary-dark); font-size: 1.2rem; font-weight: 800; margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}
.inline-cta-strip-text p { color: var(--text-medium); font-size: 0.875rem; margin: 0; }
.inline-cta-strip-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; flex-shrink: 0; }

/* Pill shape + animated lift on every button in the strip */
.inline-cta-strip .btn {
  border-radius: var(--radius-full) !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14) !important;
}
.inline-cta-strip .btn:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22) !important;
}
.inline-cta-strip .btn-whatsapp {
  background: #25D366 !important;
  border-color: #25D366 !important;
  box-shadow: 0 4px 14px rgba(37,211,102,0.35) !important;
}
.inline-cta-strip .btn-whatsapp:hover {
  background: #1aad55 !important;
  box-shadow: 0 12px 30px rgba(37,211,102,0.45) !important;
}
.inline-cta-strip .btn-white {
  background: #fff !important;
  color: var(--primary-dark) !important;
  border: 1.5px solid rgba(26,122,56,0.25) !important;
}
.inline-cta-strip .btn-white:hover {
  background: #f0faf4 !important;
  border-color: var(--primary) !important;
}
@media (max-width: 640px) {
  .inline-cta-strip { padding: 1.75rem 1.5rem; }
  .inline-cta-strip-actions { width: 100%; }
  .inline-cta-strip-actions .btn { flex: 1; justify-content: center; }
}

/* ── 4. KFZ-Bewertung — premium sidebar redesign ────────────── */
.bewertung-sidebar-card {
  background: linear-gradient(155deg, var(--primary-dark) 0%, var(--primary) 70%, var(--primary-light) 100%);
  border-radius: var(--radius-xl);
  padding: 1.875rem 1.625rem;
  margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
  box-shadow: 0 12px 40px rgba(26,122,56,0.22);
}
.bewertung-sidebar-card::before {
  content: ''; position: absolute; top: -50px; right: -50px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 60%);
  border-radius: 50%; pointer-events: none;
}
.bewertung-sidebar-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.875rem;
  font-size: 0.72rem; font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 0.875rem;
  position: relative;
}
.bewertung-sidebar-badge svg { color: var(--accent); }
.bewertung-sidebar-card h3 {
  color: #fff; font-size: 1.25rem; font-weight: 900;
  margin: 0 0 0.4rem; line-height: 1.2; position: relative;
  letter-spacing: -0.01em;
}
.bewertung-sidebar-card p {
  color: rgba(255,255,255,0.8); font-size: 0.875rem;
  margin: 0 0 1.375rem; line-height: 1.6; position: relative;
}
.bewertung-mini-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem;
  margin-bottom: 1.375rem; position: relative;
}
.bewertung-mini-stat {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg); padding: 0.75rem 0.5rem;
  text-align: center;
}
.bewertung-mini-stat-num { display: block; font-size: 1.15rem; font-weight: 900; color: #fff; line-height: 1; }
.bewertung-mini-stat-label { font-size: 0.65rem; color: rgba(255,255,255,0.7); line-height: 1.3; margin-top: 0.15rem; display: block; }

/* Sidebar card for what you need (bewertung) */
.bewertung-docs-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 1.5rem 1.5rem 1.625rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.bewertung-docs-card h4 {
  font-size: 0.95rem; font-weight: 800;
  color: var(--primary-dark); margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; gap: 0.5rem;
}
.bewertung-docs-card h4 svg { color: var(--primary); }
.bewertung-doc-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.875rem; color: var(--text-medium);
}
.bewertung-doc-item:last-child { border-bottom: 0; padding-bottom: 0; }
.bewertung-doc-icon {
  width: 28px; height: 28px; min-width: 28px;
  border-radius: 50%;
  background: rgba(26,122,56,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
}

/* ── 5. District / Location page typography upgrades ─────────── */
.content-main { line-height: 1.75; }
.content-main p { line-height: 1.88; color: var(--text-medium); margin-bottom: 1.5rem; }
.content-main p.lead { font-size: 1.06rem; color: var(--text-dark); line-height: 1.78; margin-bottom: 1.75rem; font-weight: 500; }
.content-main h2 { font-size: clamp(1.4rem, 2.5vw, 1.875rem); color: var(--primary-dark); font-weight: 800; margin: 0 0 1.25rem; line-height: 1.25; letter-spacing: -0.015em; }
.content-main h3 { font-size: 1.2rem; color: var(--primary-dark); font-weight: 700; margin: 2.5rem 0 0.875rem; line-height: 1.3; }
.content-main h3:first-of-type { margin-top: 1.75rem; }

/* Callout / highlight box */
.info-callout {
  background: linear-gradient(135deg, rgba(26,122,56,0.05) 0%, rgba(62,207,114,0.02) 100%);
  border: 1px solid rgba(26,122,56,0.15);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.info-callout strong { display: block; font-size: 0.95rem; color: var(--primary-dark); margin-bottom: 0.35rem; font-weight: 700; }
.info-callout p { margin: 0; font-size: 0.9rem; color: var(--text-medium); line-height: 1.7; }

/* Gold / accent callout variant */
.info-callout-gold {
  background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(251,191,36,0.03) 100%);
  border: 1px solid rgba(245,158,11,0.2);
  border-left: 4px solid #f59e0b;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.info-callout-gold strong { display: block; font-size: 0.95rem; color: #92400e; margin-bottom: 0.35rem; font-weight: 700; }
.info-callout-gold p { margin: 0; font-size: 0.9rem; color: var(--text-medium); line-height: 1.7; }

/* District highlights stats row */
.district-highlights {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 2rem 0;
}
@media (min-width: 540px) { .district-highlights { grid-template-columns: repeat(4, 1fr); } }
.district-highlight-item {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 1.25rem 0.875rem;
  text-align: center; box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.district-highlight-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.district-highlight-num { display: block; font-size: 1.5rem; font-weight: 900; color: var(--primary); line-height: 1; letter-spacing: -0.02em; }
.district-highlight-label { font-size: 0.72rem; color: var(--text-medium); display: block; margin-top: 0.3rem; line-height: 1.3; }

/* Local market info card */
.local-market-card {
  background: linear-gradient(135deg, rgba(26,122,56,0.04) 0%, rgba(62,207,114,0.02) 100%);
  border: 1px solid rgba(26,122,56,0.12);
  border-radius: var(--radius-xl);
  padding: 1.875rem 2rem;
  margin: 2.25rem 0;
}
.local-market-card h4 { font-size: 1.05rem; font-weight: 700; color: var(--primary-dark); margin: 0 0 0.875rem; }
.local-market-card p { font-size: 0.9rem; color: var(--text-medium); line-height: 1.7; margin-bottom: 0.875rem; }
.local-market-card p:last-child { margin-bottom: 0; }

/* Trust builder strip for districts */
.trust-strip { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.75rem 0; }
.trust-item {
  display: flex; align-items: flex-start; gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.trust-item:hover { transform: translateX(4px); box-shadow: var(--shadow-md); border-color: rgba(26,122,56,0.18); }
.trust-item-icon {
  width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(26,122,56,0.22);
}
.trust-item strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--text-dark); line-height: 1.3; }
.trust-item span { font-size: 0.8rem; color: var(--text-medium); line-height: 1.4; }

/* Section for "Wie wir arbeiten" in district pages */
.district-process { display: flex; flex-direction: column; gap: 0.9rem; margin: 1.5rem 0 2rem; }
.district-process-step {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.district-process-step:hover { border-color: rgba(26,122,56,0.2); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.district-process-num {
  width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  color: #fff; font-weight: 800; font-size: 0.875rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 3px 10px rgba(26,122,56,0.25);
}
.district-process-step strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.15rem; }
.district-process-step p { margin: 0; font-size: 0.825rem; color: var(--text-medium); line-height: 1.55; }

/* Local FAQ section header */
.district-faq-heading { font-size: 1.15rem; font-weight: 800; color: var(--primary-dark); margin: 2.5rem 0 1rem; }

/* ── 6. Info-card 2-col grid (unfallwagen) ───────────────────── */
.cards-2col { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.25rem 0; }
@media (min-width: 540px) { .cards-2col { grid-template-columns: repeat(2, 1fr); } }
.info-card {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 1.375rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(26,122,56,0.18); }
.info-card-icon {
  width: 50px; height: 50px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(62,207,114,0.12), rgba(26,122,56,0.08));
  border: 1px solid rgba(26,122,56,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-light); margin-bottom: 0.25rem;
}
.info-card h4 { font-size: 0.9rem; font-weight: 700; color: var(--primary-dark); margin: 0; }
.info-card p { font-size: 0.825rem; color: var(--text-medium); margin: 0; line-height: 1.55; }

/* ── 7. Responsive fixes ─────────────────────────────────────── */
@media (max-width: 767px) {
  .sidebar-cta-stack { gap: 0.6rem; }
  .bewertung-sidebar-card { padding: 1.5rem 1.25rem; }
  .inline-cta-strip { flex-direction: column; padding: 1.75rem 1.5rem; }
  .inline-cta-strip-actions { width: 100%; }
  .inline-cta-strip-actions .btn { flex: 1; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   UI/UX POLISH ROUND 2 — 2026-06-27
   Nav phone CTA · Blog CTA · Blog sidebar · Damage cards
   ══════════════════════════════════════════════════════════════ */

/* ── Nav phone — premium pill CTA ───────────────────────────── */
.nav-phone {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 1.05rem !important;
  background: rgba(26,122,56,0.09);
  color: var(--primary-dark) !important;
  font-weight: 700;
  font-size: 0.855rem;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(26,122,56,0.22);
  text-decoration: none !important;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
              transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
  white-space: nowrap; letter-spacing: -0.01em;
}
.nav-phone:hover {
  background: var(--primary);
  color: #fff !important;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,122,56,0.28);
}
.nav-phone svg { flex-shrink: 0; transition: transform 0.3s ease; }
.nav-phone:hover svg { animation: nav-phone-ring 0.5s ease; }
@keyframes nav-phone-ring {
  0%,100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-16deg) scale(1.12); }
  40% { transform: rotate(14deg) scale(1.12); }
  60% { transform: rotate(-8deg) scale(1.06); }
  80% { transform: rotate(7deg) scale(1.06); }
}
@media (max-width: 900px) { .nav-phone { font-size: 0.8rem; padding: 0.42rem 0.85rem !important; } }

/* ── Premium article-cta-box ─────────────────────────────────── */
.article-cta-box {
  background: linear-gradient(140deg, var(--primary-dark) 0%, var(--primary) 60%, #22a854 100%);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2.5rem;
  position: relative; overflow: hidden;
  box-shadow: 0 16px 50px rgba(26,122,56,0.22), 0 4px 12px rgba(26,122,56,0.1);
}
.article-cta-box::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 65%);
  border-radius: 50%; pointer-events: none;
}
.article-cta-box::after {
  content: ''; position: absolute; bottom: -50px; left: 15%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 65%);
  border-radius: 50%; pointer-events: none;
}
.article-cta-box-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; margin-bottom: 1rem; position: relative;
}
.article-cta-box h3 {
  color: #fff; font-size: 1.35rem; font-weight: 900;
  margin: 0 0 0.5rem; line-height: 1.2; position: relative; letter-spacing: -0.015em;
}
.article-cta-box p {
  color: rgba(255,255,255,0.82); font-size: 0.9rem;
  margin: 0 0 1.5rem; line-height: 1.65; position: relative;
}
.article-cta-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; position: relative; }
.article-cta-buttons .btn {
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease !important;
}
.article-cta-buttons .btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
}
@media (max-width: 480px) {
  .article-cta-box { padding: 1.75rem 1.5rem; }
  .article-cta-buttons { flex-direction: column; }
}

/* ── Footer CTA bar — pill buttons + hover animation ─────────── */
.footer-cta-btns .btn {
  border-radius: var(--radius-full) !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, background 0.22s ease !important;
  box-shadow: 0 3px 10px rgba(26,122,56,0.18) !important;
}
.footer-cta-btns .btn:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 10px 28px rgba(26,122,56,0.3) !important;
}
.footer-cta-btns .btn-white {
  background: var(--primary) !important;
  color: #fff !important;
}
.footer-cta-btns .btn-white:hover {
  background: var(--primary-dark) !important;
}
.footer-cta-btns .btn-primary:hover {
  background: var(--primary-dark) !important;
}

/* ── Premium mid-article CTA enhancements (kept for specificity) ── */
.mid-article-cta .btn {
  border-radius: var(--radius-full) !important;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease !important;
}
.mid-article-cta .btn:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22) !important;
}

/* ── Blog Quick Contact sidebar — premium dark card ──────────── */
.article-sidebar .sidebar-card-highlight { margin-bottom: 1.25rem; }
.article-sidebar .sidebar-card-highlight h3 {
  color: #fff; font-size: 1.05rem; font-weight: 800; margin: 0 0 0.35rem;
}
.article-sidebar .sidebar-card-highlight p.sidebar-sub {
  color: rgba(255,255,255,0.75); font-size: 0.82rem; margin: 0 0 1rem; line-height: 1.5;
}

/* ── Damage-type premium icon cards (unfallwagen) ────────────── */
.damage-type-grid {
  display: grid; grid-template-columns: 1fr; gap: 0.8rem; margin: 1.5rem 0;
}
@media (min-width: 480px) { .damage-type-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .damage-type-grid { grid-template-columns: repeat(3, 1fr); } }

.damage-type-card {
  display: flex; align-items: flex-start; gap: 0.95rem;
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); padding: 1.2rem 1.1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.damage-type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(26,122,56,0.13);
  border-color: rgba(26,122,56,0.28);
}
.damage-type-badge {
  width: 46px; height: 46px; min-width: 46px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(26,122,56,0.11), rgba(34,197,94,0.07));
  border: 1.5px solid rgba(26,122,56,0.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); flex-shrink: 0;
  transition: background 0.22s ease, color 0.22s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.damage-type-card:hover .damage-type-badge {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff; transform: scale(1.1) rotate(-6deg);
}
.damage-type-info h4 {
  font-size: 0.9rem; font-weight: 700; color: var(--primary-dark); margin: 0 0 0.25rem; line-height: 1.25;
}
.damage-type-info p { font-size: 0.8rem; color: var(--text-medium); margin: 0; line-height: 1.55; }

/* ════════════════════════════════════════════════════════
   CTA VISIBILITY, CHECKBOX FIX & LOGO PLACEMENTS — 2026-06-27
   ════════════════════════════════════════════════════════ */

/* ── Contact-form section — improved tinted background ── */
.contact-form-section {
  background:
    radial-gradient(circle at 8% 0%, rgba(26,122,56,0.06) 0%, transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(34,197,94,0.04) 0%, transparent 40%),
    linear-gradient(180deg, #f6fdf8 0%, #f0f9f3 100%);
}

/* ── Contact form main card — stronger visual presence ── */
.contact-form-main {
  border-color: rgba(26,122,56,0.18) !important;
  box-shadow: 0 20px 60px rgba(26,122,56,0.1), 0 4px 16px rgba(0,0,0,0.05) !important;
}

/* ── CTA right panel — more defined border + depth ──── */
.cta-intro-right {
  border-color: rgba(26,122,56,0.16) !important;
  box-shadow: 0 8px 32px rgba(26,122,56,0.08), 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* ── GDPR Checkbox — critical bug fix ────────────────────
   Root cause: .vehicle-form input applies appearance:none,
   width:100%, and min-height:48px to ALL inputs, including
   checkboxes. This renders the checkbox visually invisible
   while keeping an oversized invisible hit area, causing the
   "shifted clickable area / invisible overlap" symptom.
   These overrides restore native checkbox behavior fully. */
.checkbox-label input[type="checkbox"] {
  width: auto !important;
  min-height: auto !important;
  height: 16px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
  margin-top: 0;
  box-shadow: none !important;
  outline-offset: 2px;
}

/* ── Checkbox + label vertical centering ─────────────── */
.checkbox-label {
  align-items: center !important;
}

/* ── Hero logo mark — removed from markup, suppress residual display ── */
.hero-logo-mark { display: none !important; }

/* ════════════════════════════════════════════════════════
   LEGAL PAGES — Professional Presentation — 2026-06-27
   ════════════════════════════════════════════════════════ */

.legal-section {
  background:
    radial-gradient(circle at 5% 0%, rgba(26,122,56,0.05) 0%, transparent 40%),
    linear-gradient(180deg, #f6fdf8 0%, #f0f9f3 100%);
}

.legal-content {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(26,122,56,0.12);
  box-shadow: 0 8px 40px rgba(26,122,56,0.07), 0 2px 8px rgba(0,0,0,0.04);
  padding: 2.75rem 3rem;
}

.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(26,122,56,0.07);
  border: 1px solid rgba(26,122,56,0.16);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.9rem;
  margin-bottom: 2.25rem;
  letter-spacing: 0.01em;
}

.legal-content h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin: 2.75rem 0 0.875rem;
  padding: 0.7rem 1rem 0.7rem 1.1rem;
  background: rgba(26,122,56,0.04);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.3;
}

.legal-content h2:first-of-type,
.legal-content .legal-updated + h2 { margin-top: 0; }

.legal-content h3 {
  font-size: 0.975rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 2rem 0 0.75rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(26,122,56,0.3);
  line-height: 1.4;
}

.legal-content p {
  color: var(--text-medium);
  line-height: 1.9;
  margin-bottom: 1.1rem;
  font-size: 0.9375rem;
}

.legal-content ul,
.legal-content ol {
  margin: 0.5rem 0 1.25rem 1.5rem;
}

.legal-content li {
  color: var(--text-medium);
  line-height: 1.8;
  margin-bottom: 0.45rem;
  font-size: 0.9375rem;
}

.legal-content ul li { list-style-type: disc; }
.legal-content ol li { list-style-type: decimal; }

.legal-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.18s ease;
}
.legal-content a:hover { color: var(--primary-dark); }

.legal-content strong { color: var(--text-dark); font-weight: 700; }

.legal-content code {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 0.84em;
  background: rgba(26,122,56,0.07);
  border: 1px solid rgba(26,122,56,0.14);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  color: var(--primary-dark);
}

@media (max-width: 640px) {
  .legal-content { padding: 1.75rem 1.25rem; }
  .legal-content h2 { font-size: 1rem; padding: 0.6rem 0.85rem 0.6rem 0.9rem; }
}

/* ── Kontakt page — professional contact cards ───────────────── */
.kontakt-info-section { background: linear-gradient(180deg, #f6fdf8 0%, #ffffff 100%); }

.kontakt-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.kontakt-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #ffffff;
  border: 1px solid rgba(26,122,56,0.12);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.25rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(26,122,56,0.07), 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  overflow: hidden;
}

.kontakt-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.kontakt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(26,122,56,0.14), 0 4px 12px rgba(0,0,0,0.06);
  border-color: rgba(26,122,56,0.28);
}

.kontakt-card:hover::before { transform: scaleX(1); }

.kontakt-card-icon-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(26,122,56,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: background 0.22s ease;
}

.kontakt-card:hover .kontakt-card-icon-wrap {
  background: var(--primary);
  color: #fff;
}

.kontakt-card-whatsapp .kontakt-card-icon-wrap { background: rgba(37,211,102,0.10); color: #25D366; }
.kontakt-card-whatsapp:hover .kontakt-card-icon-wrap { background: #25D366; color: #fff; }

.kontakt-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.kontakt-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
}

.kontakt-card-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kontakt-card-sub {
  font-size: 0.76rem;
  color: var(--text-medium);
}

.kontakt-card-arrow {
  flex-shrink: 0;
  color: var(--primary);
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.kontakt-card:hover .kontakt-card-arrow { opacity: 1; transform: translateX(4px); }

.kontakt-card-badge span {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: #16a34a;
  border-radius: 99px;
  padding: 0.25em 0.65em;
}

/* Service area chips */
.kontakt-service-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 1.5rem 0 2rem;
}

.kontakt-service-areas span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary-dark);
  background: rgba(26,122,56,0.07);
  border: 1px solid rgba(26,122,56,0.15);
  border-radius: 99px;
  padding: 0.3em 0.8em;
}

@media (max-width: 1024px) {
  .kontakt-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .kontakt-cards-grid { grid-template-columns: 1fr; }
  .kontakt-card-value { font-size: 0.9rem; }
}

/* ── cta-intro-right — WhatsApp pill button ──────────────────── */
.cta-whatsapp-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(37,211,102,0.08);
  border: 1.5px solid rgba(37,211,102,0.3);
  border-radius: var(--radius-full);
  padding: 0.6rem 1rem 0.6rem 0.75rem;
  text-decoration: none;
  color: #15803d;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  margin-top: 0.25rem;
}

.cta-whatsapp-pill:hover {
  background: rgba(37,211,102,0.14);
  border-color: rgba(37,211,102,0.55);
  transform: translateY(-2px);
}

.cta-whatsapp-pill-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.cta-whatsapp-pill-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.cta-whatsapp-pill-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #15803d;
  line-height: 1.2;
}

.cta-whatsapp-pill-sub {
  font-size: 0.72rem;
  color: var(--text-medium);
  line-height: 1.2;
}

.cta-whatsapp-pill-arrow {
  color: #25D366;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cta-whatsapp-pill:hover .cta-whatsapp-pill-arrow { opacity: 1; transform: translateX(3px); }

/* ── WhatsApp chat widget (floating bubble + left-side popup) ── */
.wa-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9000;
}

/* Floating bubble button */
.wa-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(37,211,102,0.4), 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
  position: relative;
}

.wa-bubble:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 32px rgba(37,211,102,0.5), 0 4px 12px rgba(0,0,0,0.14);
}

/* Notification pulse dot */
.wa-bubble-pulse {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff4444;
  border: 2px solid #fff;
}

/* Hide bubble while chat is open */
.wa-open .wa-bubble {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

/* Chat popup — to the LEFT of the button column, clear of scroll-to-top */
.wa-popup {
  position: absolute;
  bottom: 0;
  right: calc(100% + 0.75rem);
  width: 310px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.10);
  overflow: hidden;
  transform: scale(0.9) translateX(12px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.wa-open .wa-popup {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateX(0);
}

/* Popup header */
.wa-popup-header {
  background: #25D366;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.wa-popup-header-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.wa-popup-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-popup-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.wa-popup-info strong {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
}

.wa-popup-info span {
  color: rgba(255,255,255,0.85);
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.wa-popup-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a7f3d0;
  flex-shrink: 0;
}

.wa-popup-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s;
}

.wa-popup-close:hover { color: #fff; }

/* Popup body — chat bubble */
.wa-popup-body {
  background: #e5ddd5;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wa-popup-bubble {
  background: #fff;
  border-radius: 0 10px 10px 10px;
  padding: 0.65rem 0.85rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  max-width: 92%;
}

.wa-popup-bubble p {
  font-size: 0.84rem;
  color: #333;
  margin: 0 0 0.2rem;
  line-height: 1.45;
}

.wa-popup-bubble p:last-child { margin-bottom: 0; }

.wa-popup-time {
  font-size: 0.67rem;
  color: #888;
  padding-left: 0.15rem;
}

/* Popup footer — prefilled message + send button */
.wa-popup-footer {
  background: #f0f0f0;
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.wa-popup-input {
  flex: 1;
  background: #fff;
  border-radius: 99px;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
  color: #888;
  border: 1px solid rgba(0,0,0,0.08);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-popup-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}

.wa-popup-send:hover { background: #128C7E; transform: scale(1.08); }

/* Mobile — popup fixed above both floating buttons */
@media (max-width: 640px) {
  .wa-widget { bottom: 1rem; right: 1rem; }
  .wa-popup {
    position: fixed;
    right: 1rem;
    bottom: calc(5.5rem + 44px + 1rem); /* above scroll-to-top */
    width: calc(100vw - 2rem);
    max-width: 360px;
    transform: scale(0.9) translateY(10px);
    transform-origin: bottom right;
  }
  .wa-open .wa-popup {
    transform: scale(1) translateY(0);
  }
}

/* ── Admin sortable drag-to-reorder ──────────────────────────── */
.admin-sortable-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-sortable-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  user-select: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.admin-sortable-item:hover { background: #f1f5f9; }

.admin-sortable-ghost {
  opacity: 0.4;
  background: rgba(26,122,56,0.07) !important;
  border: 1.5px dashed rgba(26,122,56,0.35) !important;
}

.admin-sortable-chosen {
  box-shadow: 0 4px 18px rgba(0,0,0,0.14) !important;
  background: #fff !important;
  cursor: grabbing;
}

.admin-drag-handle {
  color: #94a3b8;
  cursor: grab;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  user-select: none;
}

.admin-drag-handle:active { cursor: grabbing; }

.admin-sortable-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-sortable-content strong {
  font-size: 0.875rem;
  color: #1e293b;
}

/* ── Admin ordering: up/down buttons ────────────────────────── */
.admin-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  font-size: 0.68rem;
  line-height: 1;
  cursor: pointer;
  color: #475569;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.admin-order-btn:hover:not(:disabled) {
  background: #1a7a38;
  color: #fff;
  border-color: #1a7a38;
}

.admin-order-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

/* Save confirmation */
.admin-sort-status { margin-top: 0.75rem; }

.admin-sort-status-ok {
  font-size: 0.83rem;
  font-weight: 600;
  color: #16a34a;
}

/* Blog sort row numbering */
.admin-sort-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
  width: 2rem;
}

/* ── FAQ inline ordering list ────────────────────────────────── */
.faq-order-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.faq-order-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: background 0.15s, box-shadow 0.15s;
  user-select: none;
}

.faq-order-item:hover { background: #f1f5f9; }

.faq-drag-handle {
  color: #b0bec5;
  cursor: grab;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  user-select: none;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color 0.15s;
}
.faq-drag-handle:hover { color: #546e7a; }
.faq-drag-handle:active { cursor: grabbing; }

.faq-order-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.faq-order-q {
  font-size: 0.83rem;
  color: #1e293b;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faq-order-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.faq-order-btns .admin-order-btn {
  padding: 0.1rem 0.32rem;
  font-size: 0.62rem;
}

@media (max-width: 640px) {
  .faq-order-q { font-size: 0.78rem; }
  .admin-order-btn { font-size: 0.65rem; }
}

/* ── Mobile nav: remove backdrop-filter (fixes position:fixed menu bug) ── */
@media (max-width: 1023px) {
  .navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── Nav-toggle X animation (JS adds "active" not "open") ─────────────── */
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Admin drag handle (six-dot grip) ─────────────────────────────────── */
.admin-drag-handle {
  color: #b0bec5;
  cursor: grab;
  display: inline-flex;
  align-items: center;
  user-select: none;
  padding: 0.25rem;
  border-radius: 4px;
  transition: color 0.15s;
}
.admin-drag-handle:hover { color: #546e7a; }
.admin-drag-handle:active { cursor: grabbing; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE MENU — CLOSE BUTTON, NAV ANIMATIONS, FLOATING SUPPRESSION
   ═══════════════════════════════════════════════════════════════ */

/* ── X Close button inside mobile nav panel ──────────────────── */
.nav-close {
  display: none; /* hidden on desktop */
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border: none;
  background: #f1f5f9;
  border-radius: 50%;
  cursor: pointer;
  color: #334155;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  z-index: 10;
  flex-shrink: 0;
}
.nav-close:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: scale(1.08) rotate(90deg);
}
.nav-close:active { transform: scale(0.95); }

@media (max-width: 1023px) {
  /* Make nav-menu relatively positioned so close btn can use absolute */
  .nav-menu { position: fixed; }
  .nav-close { display: flex; }
}

/* ── Floating elements hidden while nav is open (mobile) ─────── */
body.nav-open .scroll-top,
body.nav-open .wa-widget {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}

/* ── Nav item slide-in animation on menu open (mobile) ───────── */
@keyframes navItemSlideIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1023px) {
  .nav-menu.open .nav-item {
    animation: navItemSlideIn 0.28s ease both;
  }
  .nav-menu.open .nav-item:nth-child(1) { animation-delay: 0.04s; }
  .nav-menu.open .nav-item:nth-child(2) { animation-delay: 0.08s; }
  .nav-menu.open .nav-item:nth-child(3) { animation-delay: 0.12s; }
  .nav-menu.open .nav-item:nth-child(4) { animation-delay: 0.16s; }
  .nav-menu.open .nav-item:nth-child(5) { animation-delay: 0.20s; }
  .nav-menu.open .nav-cta { animation: navItemSlideIn 0.28s ease 0.24s both; }
}

/* ── Nav link hover/tap effects ──────────────────────────────── */

/* Mobile tap highlight */
@media (max-width: 1023px) {
  .nav-link {
    transition: color 0.18s ease, background 0.18s ease, padding-left 0.18s ease;
    border-radius: 8px;
    padding-left: 0;
  }
  .nav-link:hover,
  .nav-link:focus-visible {
    color: var(--primary);
    background: rgba(26,122,56,0.06);
    padding-left: 0.5rem;
  }
  .nav-item.active > .nav-link { color: var(--primary); }

  .nav-dropdown-item {
    transition: color 0.15s ease, background 0.15s ease, padding-left 0.15s ease;
    border-radius: 6px;
  }
  .nav-dropdown-item:hover {
    color: var(--primary);
    background: rgba(26,122,56,0.08);
    padding-left: calc(0.875rem + 0.375rem); /* existing padding + shift */
  }
}

/* Desktop link underline-grow effect */
@media (min-width: 1024px) {
  .nav-link {
    position: relative;
    transition: color 0.2s ease;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    right: 50%;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transition: left 0.22s ease, right 0.22s ease;
  }
  .nav-link:hover::after,
  .nav-item.active > .nav-link::after {
    left: 0;
    right: 0;
  }
  .nav-link:hover { color: var(--primary); }

  .nav-dropdown-item {
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  }
  .nav-dropdown-item:hover {
    color: var(--primary);
    transform: translateX(3px);
  }
}

/* ── District page-hero: support hero image via CSS var ──────── */
.page-hero-bg.has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Default hero image for location pages */
.district-hero-bg {
  background-image: url('/images/heroes/hero-city-1.jpg');
}

/* ── Marken-Laufleiste (Brand marquee) ──────────────────────────── */
.brand-strip {
  padding: 2.25rem 0 2.5rem;
  background: var(--grey-100, #f0f1f3);
  border-top: 1px solid var(--grey-200, #e2e4e8);
  border-bottom: 1px solid var(--grey-200, #e2e4e8);
  overflow: hidden;
}
.brand-strip-label {
  text-align: center;
  margin: 0 0 1.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-medium, #4a5c50);
}
.brand-strip-label strong { color: var(--primary, #1a7a38); font-weight: 700; }

.brand-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brand-track {
  display: flex;
  width: max-content;
  animation: brandScroll 38s linear infinite;
}
.brand-marquee:hover .brand-track { animation-play-state: paused; }

.brand-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-item {
  flex-shrink: 0;
  padding: 0 2rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-dark, #1c2b1e);
  opacity: 0.55;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.brand-item:hover { opacity: 1; color: var(--primary, #1a7a38); }

@keyframes brandScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .brand-item { font-size: 1.1rem; padding: 0 1.35rem; }
  .brand-track { animation-duration: 26s; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-track { animation: none; transform: none; }
  .brand-marquee {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
}

/* ── Hero-Slideshow (durchgleitende Banner) ─────────────────────── */
.hero-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroSlideFade 45s linear infinite;
  will-change: opacity;
}
@keyframes heroSlideFade {
  0%    { opacity: 0; }
  1.5%  { opacity: 1; }
  11%   { opacity: 1; }
  13%   { opacity: 0; }
  100%  { opacity: 0; }
}
/* Foto-taugliches Overlay nur auf dem Startseiten-Hero – links dunkel
   (lesbarer Text), rechts heller, damit das Banner sichtbar bleibt. */
.hero .hero-bg-overlay {
  background:
    linear-gradient(90deg, rgba(6,18,12,0.94) 0%, rgba(6,18,12,0.80) 30%, rgba(8,30,18,0.48) 68%, rgba(8,40,22,0.32) 100%),
    linear-gradient(180deg, rgba(6,18,12,0.10) 0%, rgba(6,18,12,0.42) 100%);
}
@media (max-width: 768px) {
  .hero .hero-bg-overlay {
    background: linear-gradient(180deg, rgba(6,18,12,0.84) 0%, rgba(6,18,12,0.70) 55%, rgba(8,30,18,0.80) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide:first-child { opacity: 1; }
}

/* ── Rückruf-Modal (Callback modal) ─────────────────────────────── */
.callback-modal {
  padding: 0;
  overflow: hidden;
  max-width: 440px;
}
.callback-modal .modal-close {
  background: rgba(255,255,255,0.18);
  color: #fff;
  z-index: 2;
}
.callback-modal .modal-close:hover { background: rgba(255,255,255,0.32); color: #fff; }

.callback-modal-head {
  position: relative;
  background: linear-gradient(135deg, var(--primary-dark, #105a27), var(--primary, #1a7a38));
  color: #fff;
  padding: 2rem 2rem 1.6rem;
  text-align: center;
}
.callback-modal-icon {
  width: 58px; height: 58px;
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
}
.callback-modal-head h3 {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.callback-modal-head p {
  color: rgba(255,255,255,0.88);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}

.callback-form { padding: 1.75rem 2rem 2rem; }
.callback-form .form-group { margin-bottom: 1.1rem; }
.callback-form label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-dark, #1c2b1e);
  margin-bottom: 0.4rem;
}
.callback-form .form-control {
  width: 100%;
  padding: 0.8rem 1rem;
  min-height: 48px;
  border: 1.5px solid var(--border, #d7dbd9);
  border-radius: var(--radius, 8px);
  font-size: 0.95rem;
  font-family: var(--font, inherit);
  color: var(--text-dark, #1c2b1e);
  background: var(--off-white, #f7f9f8);
  transition: all var(--transition, 0.2s ease);
  appearance: none; -webkit-appearance: none;
}
.callback-form .form-control:focus {
  outline: none;
  border-color: var(--primary, #1a7a38);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(26,122,56,0.12);
}
.callback-form .btn { margin-top: 0.35rem; }
.callback-modal-note {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: var(--text-medium, #4a5c50);
}
.callback-modal-note svg { flex-shrink: 0; opacity: 0.8; }

.callback-form .form-message { margin-top: 0.85rem; }
.callback-form .form-message.success,
.callback-form .form-message.error { padding: 0.7rem 0.9rem; border-radius: var(--radius, 8px); font-size: 0.875rem; }
.callback-form .form-message.success { background: #e7f6ec; color: #105a27; }
.callback-form .form-message.error { background: #fdecec; color: #b3261e; }