/* ==========================================================================
   Gutachter Franken - WordPress Theme Custom Styles
   Styles Gutenberg block output to match the Next.js/Tailwind React app.
   Content is rendered via the_content() with wp:group className attributes.
   ========================================================================== */


/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* Brand Colors */
  --gf-primary: #122D4B;
  --gf-primary-light: #1a3f65;
  --gf-primary-dark: #0c1f33;
  --gf-accent: #B23A3A;
  --gf-accent-light: #c95252;
  --gf-accent-dark: #8e2e2e;

  /* Neutrals */
  --gf-bg: #ffffff;
  --gf-fg: #1F2F46;
  --gf-muted: #f5f5f7;
  --gf-muted-fg: #6b7280;
  --gf-border: #e5e7eb;

  /* Semantic */
  --gf-success: #16a34a;
  --gf-success-light: #dcfce7;
  --gf-error: #ef4444;
  --gf-error-light: #fef2f2;
  --gf-warning: #f59e0b;
  --gf-info: #3b82f6;
  --gf-whatsapp: #25D366;

  /* Typography */
  --gf-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gf-fs-xs: 0.75rem;
  --gf-fs-sm: 0.875rem;
  --gf-fs-base: 1rem;
  --gf-fs-lg: 1.125rem;
  --gf-fs-xl: 1.25rem;
  --gf-fs-2xl: 1.5rem;
  --gf-fs-3xl: 1.875rem;
  --gf-fs-4xl: 2.25rem;
  --gf-fs-5xl: 3rem;
  --gf-fs-6xl: 3.75rem;

  /* Shadows */
  --gf-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --gf-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --gf-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --gf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --gf-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --gf-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);

  /* Radii */
  --gf-r-sm: 0.25rem;
  --gf-r-md: 0.375rem;
  --gf-r-lg: 0.5rem;
  --gf-r-xl: 0.75rem;
  --gf-r-2xl: 1rem;
  --gf-r-full: 9999px;

  /* Transitions */
  --gf-t-fast: 150ms ease;
  --gf-t-base: 200ms ease;
  --gf-t-slow: 300ms ease;

  /* Layout */
  --gf-max-w: 1280px;
  --gf-max-w-content: 1152px;
  --gf-max-w-narrow: 768px;
  --gf-header-h: 5rem;
  --gf-header-h-md: 6rem;
}


/* ==========================================================================
   2. Base / Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--gf-font);
  font-size: var(--gf-fs-base);
  line-height: 1.6;
  color: var(--gf-fg);
  background-color: var(--gf-bg);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* Override WordPress theme.json link underline */
a:where(:not(.wp-element-button)) { text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  color: var(--gf-fg);
}
h1 { font-size: var(--gf-fs-4xl); }
h2 { font-size: var(--gf-fs-3xl); }
h3 { font-size: var(--gf-fs-lg); }

p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { padding-left: 0; margin: 0; list-style: none; }
button { cursor: pointer; font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--gf-accent);
  outline-offset: 2px;
  border-radius: var(--gf-r-sm);
}

/* Body padding for fixed header */
body:not(.page-template-no-header) { padding-top: var(--gf-header-h); }
@media (min-width: 768px) {
  body:not(.page-template-no-header) { padding-top: var(--gf-header-h-md); }
}
body.has-dark-hero { padding-top: 0; }


/* ==========================================================================
   3. Layout / Container & WordPress Layout Overrides
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--gf-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

/*
 * CRITICAL WordPress Layout Overrides
 * WordPress adds is-layout-constrained + has-global-padding to wp:group blocks,
 * which constrains children to --wp--style--global--content-size (1200px).
 * For full-width sections (hero, process, contact, etc.) we must override this.
 */

/*
 * WordPress Layout Integration
 * theme.json contentSize = 80rem handles max-width on children.
 * Sections themselves must be full-width for backgrounds.
 */
.site-content > .wp-block-group {
  max-width: none !important;
}

/* FAQ section: narrower container (48rem / max-w-3xl) */
.faq-section.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 48rem !important;
}

/* Comparison/Process sections: medium container (64rem) */
.comparison-section.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.process-section.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 64rem !important;
}

/* Restore vertical rhythm within content sections.
   WordPress's blockGap:0 / is-layout-constrained resets all margins.
   We re-add spacing between sibling elements inside section groups. */
.site-content .wp-block-group > * + * {
  margin-block-start: 1.25rem;
}

/* FAQ divide-y items: no gap between (borders provide separation) */
.faq-section > details + details,
.faq-section > .wp-block-details + .wp-block-details {
  margin-block-start: 0;
}

/* Remove bottom-margin on FAQ details */
.faq-section details,
.faq-section .wp-block-details {
  margin-bottom: 0;
}

/* Comparison CTA paragraph + button: tighter gap */
.comparison-section > .wp-block-buttons {
  margin-block-start: 1.5rem;
}

/* About section columns: no extra gap needed (grid gap handles it) */
.about-section > .wp-block-columns {
  margin-block-start: 0;
}

/* Trust section HTML block: no extra gap needed */
.trust-section > * + * {
  margin-block-start: 0;
}

/* Hero section: custom spacing already set via margin-top */
.hero-section > * + * {
  margin-block-start: 0;
}

/* WordPress alignment classes */
.alignwide { max-width: var(--gf-max-w-content); margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 1rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1rem; margin-bottom: 1rem; }


/* ==========================================================================
   4. Header (.site-header)  --  matches header.php
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: all var(--gf-t-slow);
}

/* Default: solid white */
.site-header:not(.has-dark-hero) {
  background-color: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--gf-shadow-sm);
  border-bottom: 1px solid var(--gf-border);
}

/* Transparent on dark-hero pages */
.site-header.has-dark-hero { background-color: transparent; }

/* Scrolled: always solid */
.site-header.scrolled,
.site-header.has-dark-hero.scrolled {
  background-color: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--gf-shadow-sm);
  border-bottom: 1px solid var(--gf-border);
}

/* -- Header Inner -- */
.header-inner {
  max-width: var(--gf-max-w);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--gf-header-h);
}
@media (min-width: 640px) { .header-inner { padding: 0 1.5rem; } }
@media (min-width: 768px) { .header-inner { height: var(--gf-header-h-md); } }
@media (min-width: 1024px) { .header-inner { padding: 0 2rem; } }

/* -- Logo -- */
.header-logo img {
  height: 56px;
  width: auto;
  transition: all var(--gf-t-slow);
}
@media (min-width: 768px) { .header-logo img { height: 72px; } }

/* Invert logo on transparent dark hero */
.site-header.has-dark-hero:not(.scrolled) .header-logo img {
  filter: brightness(0) invert(1);
}

/* -- Desktop Nav -- */
.header-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 768px) { .header-nav { display: flex; } }

/* Remove bullet markers from wp_nav_menu <li> items */
.header-nav li,
.mobile-menu-nav li,
.footer-links li {
  list-style: none;
  display: inline;
}
.header-nav .menu-item {
  display: inline;
}

.header-nav a:not(.header-cta) {
  font-size: var(--gf-fs-sm);
  font-weight: 500;
  color: rgba(31,47,70,.8);
  transition: color var(--gf-t-base);
}
.header-nav a:not(.header-cta):hover { color: var(--gf-primary); }
.header-nav a:not(.header-cta).active { color: var(--gf-primary); font-weight: 600; }

/* Nav links on transparent header */
.site-header.has-dark-hero:not(.scrolled) .header-nav a:not(.header-cta) { color: rgba(255,255,255,.9); }
.site-header.has-dark-hero:not(.scrolled) .header-nav a:not(.header-cta):hover { color: #fff; }

/* -- Header CTA Button -- */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .625rem 1.25rem;
  background-color: var(--gf-accent);
  color: #fff !important;
  font-size: var(--gf-fs-sm);
  font-weight: 600;
  border-radius: var(--gf-r-lg);
  border: none;
  transition: background-color var(--gf-t-base);
}
.header-cta:hover { background-color: var(--gf-accent-light); }

/* -- Mobile Menu Toggle -- */
.mobile-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  background: none;
  border: none;
  border-radius: var(--gf-r-md);
  color: var(--gf-fg);
  transition: background-color var(--gf-t-base);
}
.mobile-menu-toggle:hover { background-color: var(--gf-muted); }
.site-header.has-dark-hero:not(.scrolled) .mobile-menu-toggle { color: #fff; }
.site-header.has-dark-hero:not(.scrolled) .mobile-menu-toggle:hover { background-color: rgba(255,255,255,.1); }
@media (min-width: 768px) { .mobile-menu-toggle { display: none; } }
.mobile-menu-toggle svg,
.mobile-menu-toggle .hamburger-icon { width: 24px; height: 24px; }

/* -- Mobile Menu Panel -- */
.mobile-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
}
.mobile-menu-panel.is-open { display: block; }
@media (min-width: 768px) { .mobile-menu-panel { display: none !important; } }

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.mobile-menu-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 50;
  width: 100%;
  max-width: 384px;
  background-color: #fff;
  box-shadow: var(--gf-shadow-xl);
  transform: translateX(100%);
  transition: transform var(--gf-t-slow) ease-in-out;
}
.mobile-menu-panel.is-open .mobile-menu-drawer { transform: translateX(0); }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 1rem;
}
.mobile-menu-header img { height: 40px; width: auto; }

.mobile-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  background: none;
  border: none;
  border-radius: var(--gf-r-md);
  color: var(--gf-fg);
  transition: background-color var(--gf-t-base);
}
.mobile-menu-close:hover { background-color: var(--gf-muted); }

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem;
}
.mobile-menu-nav a {
  display: block;
  padding: .75rem 1rem;
  border-radius: var(--gf-r-lg);
  font-size: var(--gf-fs-base);
  font-weight: 500;
  color: var(--gf-fg);
  transition: background-color var(--gf-t-base);
}
.mobile-menu-nav a:hover { background-color: var(--gf-muted); }

.mobile-menu-nav .mobile-menu-cta {
  display: block;
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: var(--gf-r-lg);
  background-color: var(--gf-accent);
  color: #fff;
  font-size: var(--gf-fs-base);
  font-weight: 600;
  text-align: center;
  transition: background-color var(--gf-t-base);
}
.mobile-menu-nav .mobile-menu-cta:hover { background-color: var(--gf-accent-light); }


/* ==========================================================================
   5. Hero Section
   Gutenberg: wp:group {"className":"hero-section"}
   ========================================================================== */

.hero-section,
.wp-block-group.hero-section {
  position: relative;
  overflow: hidden;
  background-color: var(--gf-primary);
  /* Vertical padding + horizontal padding simulating max-w-6xl centered container */
  padding: 6rem 1rem;
}
@media (min-width: 768px) {
  .hero-section,
  .wp-block-group.hero-section {
    padding: 8rem max(1rem, calc((100% - 72rem) / 2));
  }
}

/* Override WordPress is-layout-constrained auto-centering → LEFT-align children */
.hero-section.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: none !important;
}

/* Gradient overlay */
.hero-section::before,
.wp-block-group.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, var(--gf-primary), rgba(26,63,101,.3), var(--gf-primary));
  pointer-events: none;
}

/* All hero direct children need z-index above overlay */
.hero-section > * {
  position: relative;
  z-index: 1;
}

/* Headings */
.hero-section h1,
.hero-section .wp-block-heading {
  color: #fff !important;
  font-size: var(--gf-fs-4xl);
  font-weight: 700;
  line-height: 1.1;
  max-width: 48rem;
}
@media (min-width: 768px) {
  .hero-section h1,
  .hero-section .wp-block-heading:first-child { font-size: var(--gf-fs-6xl); }
}

/* Paragraphs */
.hero-section p:not(.wp-block-button__link) {
  color: rgba(255,255,255,.8);
  font-size: var(--gf-fs-lg);
  line-height: 1.5;
  margin-top: 1.5rem;
  max-width: 48rem;
}
@media (min-width: 768px) {
  .hero-section p:not(.wp-block-button__link) { font-size: var(--gf-fs-xl); }
}

/* Buttons container – override WordPress is-layout-flex defaults */
.hero-section .wp-block-buttons,
.hero-section .wp-block-buttons.is-layout-flex {
  display: flex !important;
  flex-direction: column;
  gap: 1rem !important;
  margin-top: 2.5rem;
  flex-wrap: nowrap;
}
@media (min-width: 640px) {
  .hero-section .wp-block-buttons,
  .hero-section .wp-block-buttons.is-layout-flex { flex-direction: row; }
}

/* Reset ALL WordPress button defaults inside hero */
.hero-section .wp-block-button__link,
.hero-section .wp-element-button,
.hero-section .wp-block-button .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem;
  padding: .875rem 2rem !important;
  font-size: var(--gf-fs-base) !important;
  font-weight: 600 !important;
  border-radius: var(--gf-r-lg) !important;
  text-decoration: none !important;
  transition: background-color var(--gf-t-base);
  box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
  line-height: 1.5;
}

/* Primary button (accent / fill) */
.hero-section .wp-block-button.btn-accent .wp-block-button__link,
.hero-section .wp-block-button:first-child .wp-block-button__link {
  background-color: var(--gf-accent) !important;
  color: #fff !important;
  border: none !important;
}
.hero-section .wp-block-button.btn-accent .wp-block-button__link:hover,
.hero-section .wp-block-button:first-child .wp-block-button__link:hover {
  background-color: var(--gf-accent-light) !important;
}

/* Secondary button (outline white) */
.hero-section .wp-block-button.btn-outline-white .wp-block-button__link,
.hero-section .wp-block-button:nth-child(2) .wp-block-button__link {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
.hero-section .wp-block-button.btn-outline-white .wp-block-button__link:hover,
.hero-section .wp-block-button:nth-child(2) .wp-block-button__link:hover {
  background-color: rgba(255,255,255,.1) !important;
}

/* ---- Button Icons (via pseudo-elements) ---- */

/* Phone icon for "Jetzt anrufen" (all hero sections) */
.hero-section .wp-block-button.btn-outline-white .wp-block-button__link::before,
.hero-section .wp-block-button:nth-child(2) .wp-block-button__link::before,
.service-hero .wp-block-button.btn-outline-white .wp-block-button__link::before,
.service-hero .wp-block-button:nth-child(2) .wp-block-button__link::before,
.city-hero .wp-block-button.btn-outline-white .wp-block-button__link::before,
.city-hero .wp-block-button:nth-child(2) .wp-block-button__link::before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Arrow-right icon for "Schaden melden" on subpages (service + city) */
.service-hero .wp-block-button.btn-accent .wp-block-button__link::after,
.service-hero .wp-block-button:first-child .wp-block-button__link::after,
.city-hero .wp-block-button.btn-accent .wp-block-button__link::after,
.city-hero .wp-block-button:first-child .wp-block-button__link::after {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hero badge pill */
.hero-section .hero-badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .375rem 1rem;
  border-radius: var(--gf-r-full);
  background-color: rgba(255,255,255,.1);
  font-size: var(--gf-fs-sm);
  font-weight: 500;
  color: rgba(255,255,255,.9);
}

/* Hero image (for split layout) */
.hero-section .hero-image,
.hero-section .wp-block-image {
  display: none;
}
@media (min-width: 1024px) {
  .hero-section .hero-image,
  .hero-section .wp-block-image {
    display: block;
    overflow: hidden;
    border-radius: var(--gf-r-2xl);
    box-shadow: var(--gf-shadow-2xl);
  }
  .hero-section .hero-image img,
  .hero-section .wp-block-image img { width: 100%; height: auto; object-fit: cover; }
}

/* Two-column hero for service/city pages */
.hero-section.hero-split > .wp-block-group__inner-container,
.hero-section .wp-block-columns {
  display: block;
}
@media (min-width: 1024px) {
  .hero-section.hero-split > .wp-block-group__inner-container,
  .hero-section .wp-block-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
  }
}


/* ==========================================================================
   6. Trust Indicators
   Gutenberg: wp:group {"className":"trust-section"}
   ========================================================================== */

.trust-section,
.wp-block-group.trust-section {
  position: relative;
  z-index: 10;
  padding: 0 1rem;
}

.trust-section > .wp-block-group__inner-container,
.trust-section .trust-inner,
.trust-section > .trust-grid {
  max-width: var(--gf-max-w);
  margin: -3rem auto 0;
  padding: 2rem;
  background-color: #fff;
  border-radius: var(--gf-r-2xl);
  box-shadow: var(--gf-shadow-lg);
}

/* Grid: 4 stats */
.trust-section .wp-block-columns,
.trust-section .trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 768px) {
  .trust-section .wp-block-columns,
  .trust-section .trust-grid { grid-template-columns: repeat(4, 1fr); }
}

.trust-section .wp-block-column,
.trust-section .trust-item {
  text-align: center;
}

/* Counter value */
.trust-section .counter-value,
.trust-section .trust-value {
  font-size: var(--gf-fs-3xl);
  font-weight: 700;
  color: var(--gf-primary);
}

/* Label */
.trust-section .trust-label,
.trust-section .wp-block-column p:last-child {
  margin-top: .25rem;
  font-size: var(--gf-fs-sm);
  color: var(--gf-muted-fg);
}

/* Counter value used by JS (data-value) */
.counter-value {
  font-size: var(--gf-fs-3xl);
  font-weight: 700;
  color: var(--gf-primary);
  display: inline-block;
}


/* ==========================================================================
   7. Services Section
   Gutenberg: wp:group {"className":"services-section"}
   ========================================================================== */

.services-section,
.wp-block-group.services-section {
  padding: 5rem 0;
}
@media (min-width: 768px) {
  .services-section,
  .wp-block-group.services-section { padding: 7rem 0; }
}

.services-section > .wp-block-group__inner-container {
  max-width: var(--gf-max-w-content);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Section header */
.services-section .section-header,
.services-section > .wp-block-group__inner-container > .wp-block-heading,
.services-section > .wp-block-group__inner-container > h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: var(--gf-fs-3xl);
  font-weight: 700;
}
.services-section .section-subtitle,
.services-section > .wp-block-group__inner-container > p {
  text-align: center;
  color: var(--gf-muted-fg);
  margin-bottom: 3rem;
}

/* Card grid */
.services-section .service-cards-grid,
.services-section .service-cards,
.services-section .wp-block-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .services-section .service-cards-grid,
  .services-section .service-cards,
  .services-section .wp-block-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .services-section .service-cards-grid,
  .services-section .service-cards,
  .services-section .wp-block-columns { grid-template-columns: repeat(4, 1fr); }
}

/* Individual card */
.service-card,
.services-section .wp-block-column,
.services-section .wp-block-group.service-card {
  display: block;
  padding: 1.5rem;
  background-color: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-xl);
  box-shadow: var(--gf-shadow-sm);
  transition: box-shadow var(--gf-t-base);
}
.service-card:hover,
.services-section .wp-block-column:hover,
.services-section .wp-block-group.service-card:hover {
  box-shadow: var(--gf-shadow-md);
}

/* Icon circle */
.service-card .service-icon,
.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: var(--gf-r-full);
  background-color: rgba(18,45,75,.1);
}
.service-icon svg,
.service-icon img {
  width: 24px;
  height: 24px;
  color: var(--gf-primary);
}

.service-card h3 { margin-bottom: .5rem; font-size: var(--gf-fs-lg); font-weight: 600; }
.service-card p { font-size: var(--gf-fs-sm); line-height: 1.6; color: var(--gf-muted-fg); }

.service-card .service-link,
.service-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: 1rem;
  font-size: var(--gf-fs-sm);
  font-weight: 500;
  color: var(--gf-accent);
  transition: color var(--gf-t-base);
}
.service-card:hover .service-link { color: var(--gf-accent-light); }
.service-link svg { width: 16px; height: 16px; }

/* Accent icon variant */
.service-card--accent .service-icon,
.service-icon--accent {
  background-color: rgba(178,58,58,.1);
}
.service-card--accent .service-icon svg,
.service-icon--accent svg { color: var(--gf-accent); }


/* ==========================================================================
   8. Comparison Section
   Gutenberg: wp:group {"className":"comparison-section"}
   ========================================================================== */

.comparison-section,
.wp-block-group.comparison-section {
  background-color: var(--gf-muted);
  padding: 5rem 0;
}
@media (min-width: 768px) {
  .comparison-section,
  .wp-block-group.comparison-section { padding: 7rem 0; }
}

.comparison-section > .wp-block-group__inner-container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Section header */
.comparison-section h2 {
  text-align: center;
  font-size: var(--gf-fs-3xl);
  font-weight: 700;
  color: var(--gf-primary);
  margin-bottom: .75rem;
}
.comparison-section > .wp-block-group__inner-container > p {
  text-align: center;
  font-size: var(--gf-fs-lg);
  color: var(--gf-muted-fg);
  margin-bottom: 3rem;
}

/* Desktop table */
.comparison-table,
.comparison-section .wp-block-table {
  overflow: hidden;
  border-radius: var(--gf-r-2xl);
  border: 1px solid var(--gf-border);
  background-color: #fff;
  box-shadow: var(--gf-shadow-sm);
}

.comparison-table table,
.comparison-section .wp-block-table table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
.comparison-table thead tr,
.comparison-section .wp-block-table thead tr {
  border-bottom: 1px solid var(--gf-border);
}
.comparison-table th,
.comparison-section .wp-block-table th {
  padding: 1.25rem 1.5rem;
  font-size: var(--gf-fs-sm);
  font-weight: 600;
}
.comparison-table th:first-child,
.comparison-section .wp-block-table th:first-child {
  width: 25%;
  color: var(--gf-muted-fg);
}
.comparison-table th:nth-child(2),
.comparison-section .wp-block-table th:nth-child(2) {
  width: 37.5%;
  text-align: center;
  font-size: var(--gf-fs-lg);
  font-weight: 700;
  color: var(--gf-muted-fg);
}
.comparison-table th:nth-child(3),
.comparison-section .wp-block-table th:nth-child(3) {
  width: 37.5%;
  text-align: center;
  border-left: 2px solid var(--gf-accent);
  background-color: rgba(178,58,58,.05);
  font-size: var(--gf-fs-lg);
  font-weight: 700;
  color: var(--gf-primary);
}

.recommended-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .75rem;
  border-radius: var(--gf-r-full);
  background-color: var(--gf-accent);
  font-size: var(--gf-fs-xs);
  font-weight: 600;
  color: #fff;
  vertical-align: middle;
  margin-left: .5rem;
}
.recommended-badge svg { width: 14px; height: 14px; }

.comparison-table td,
.comparison-section .wp-block-table td {
  padding: 1rem 1.5rem;
}
.comparison-table tbody tr,
.comparison-section .wp-block-table tbody tr {
  transition: background-color var(--gf-t-base);
}
.comparison-table tbody tr:nth-child(even),
.comparison-section .wp-block-table tbody tr:nth-child(even) {
  background-color: rgba(245,245,247,.3);
}
.comparison-table td:first-child,
.comparison-section .wp-block-table td:first-child {
  font-weight: 600;
  color: var(--gf-fg);
}
.comparison-table td:nth-child(3),
.comparison-section .wp-block-table td:nth-child(3) {
  border-left: 2px solid var(--gf-accent);
}
.comparison-table tbody tr:nth-child(odd) td:nth-child(3),
.comparison-section .wp-block-table tbody tr:nth-child(odd) td:nth-child(3) {
  background-color: rgba(178,58,58,.05);
}
.comparison-table tbody tr:nth-child(even) td:nth-child(3),
.comparison-section .wp-block-table tbody tr:nth-child(even) td:nth-child(3) {
  background-color: rgba(178,58,58,.07);
}

/* Cell content with icon */
.cell-content {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.cell-content svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.icon-negative { color: var(--gf-error); }
.icon-positive { color: var(--gf-accent); }
.cell-content span { font-size: var(--gf-fs-sm); }

/* Mobile comparison cards */
.comparison-cards-mobile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 1024px) { .comparison-cards-mobile { display: none; } }

.comparison-card {
  border-radius: var(--gf-r-2xl);
  border: 1px solid var(--gf-border);
  background-color: #fff;
  box-shadow: var(--gf-shadow-sm);
  overflow: hidden;
}
.comparison-card .card-criterion {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--gf-border);
  font-size: var(--gf-fs-sm);
  font-weight: 700;
  color: var(--gf-primary);
}
.comparison-card .card-options {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .comparison-card .card-options { grid-template-columns: 1fr 1fr; } }

.comparison-card .card-option {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.25rem;
}
.comparison-card .card-option:first-child { border-bottom: 1px solid var(--gf-border); }
@media (min-width: 640px) {
  .comparison-card .card-option:first-child { border-bottom: none; border-right: 1px solid var(--gf-border); }
}
.comparison-card .card-option--positive { background-color: rgba(178,58,58,.05); }
.comparison-card .card-option svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.card-option-label { display: block; margin-bottom: .25rem; font-size: var(--gf-fs-xs); font-weight: 600; }
.comparison-card .card-option:first-child .card-option-label { color: var(--gf-muted-fg); }
.comparison-card .card-option--positive .card-option-label { color: var(--gf-accent); }
.card-option-text { font-size: var(--gf-fs-sm); }
.comparison-card .card-option:first-child .card-option-text { color: var(--gf-muted-fg); }
.comparison-card .card-option--positive .card-option-text { font-weight: 500; color: var(--gf-fg); }

/* Bottom CTA under comparison */
.comparison-section .comparison-cta {
  margin-top: 2.5rem;
  text-align: center;
}
.comparison-section .comparison-cta p {
  font-size: var(--gf-fs-base);
  color: var(--gf-muted-fg);
}

/* CTA under comparison (direct child paragraph + buttons) */
.comparison-section > p:last-of-type {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.comparison-section > .wp-block-buttons {
  justify-content: center;
  margin-top: 1rem;
}


/* ==========================================================================
   9. Process Steps
   Gutenberg: wp:group {"className":"process-section"}
   ========================================================================== */

.process-section,
.wp-block-group.process-section {
  background-color: var(--gf-muted);
  padding: 5rem 0;
}
@media (min-width: 768px) {
  .process-section,
  .wp-block-group.process-section { padding: 7rem 0; }
}

.process-section > .wp-block-group__inner-container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1rem;
}

.process-section h2 {
  text-align: center;
  margin-bottom: 3rem;
  font-size: var(--gf-fs-3xl);
  font-weight: 700;
}

/* Steps grid */
.process-section .steps-grid,
.process-section .process-steps,
.process-section .wp-block-columns {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 768px) {
  .process-section .steps-grid,
  .process-section .process-steps,
  .process-section .wp-block-columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* Connecting line */
.process-section .steps-connector {
  display: none;
}
@media (min-width: 768px) {
  .process-section .steps-connector {
    display: block;
    position: absolute;
    top: 24px;
    left: calc(16.67% + 1rem);
    right: calc(16.67% + 1rem);
    height: 2px;
    background-color: var(--gf-border);
  }
}

/* 4-column variant */
.process-section.process-four .steps-grid,
.process-section.process-four .wp-block-columns {
  gap: 2rem;
}
@media (min-width: 768px) {
  .process-section.process-four .steps-grid,
  .process-section.process-four .wp-block-columns {
    grid-template-columns: repeat(4, 1fr);
  }
  .process-section.process-four .steps-connector {
    top: 32px;
    left: calc(12.5% + 1rem);
    right: calc(12.5% + 1rem);
  }
}

/* Step item */
.process-section .step-item,
.process-section .process-step,
.process-section .wp-block-column {
  position: relative;
  text-align: center;
}

/* Connecting line (CSS pseudo-element) */
.process-section .process-steps::before {
  display: none;
}
@media (min-width: 768px) {
  .process-section .process-steps::before {
    content: '';
    display: block;
    position: absolute;
    top: 24px;
    left: calc(16.67% + 1rem);
    right: calc(16.67% + 1rem);
    height: 2px;
    background-color: var(--gf-border);
  }
}

/* Numbered circle */
.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border-radius: var(--gf-r-full);
  background-color: var(--gf-accent);
  color: #fff;
  font-size: var(--gf-fs-lg);
  font-weight: 700;
  position: relative;
  z-index: 1;
}

/* Icon circle variant (service/city pages) */
.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: var(--gf-r-2xl);
  background-color: var(--gf-accent);
  color: #fff;
  box-shadow: var(--gf-shadow-sm);
  position: relative;
  z-index: 1;
}
.step-icon svg { width: 28px; height: 28px; }

.step-label {
  display: block;
  margin-bottom: .25rem;
  font-size: var(--gf-fs-sm);
  font-weight: 700;
  color: var(--gf-accent);
}

.process-section .step-item h3,
.process-section .process-step h3,
.process-section .wp-block-column h3 {
  margin-bottom: .5rem;
  font-size: var(--gf-fs-lg);
  font-weight: 600;
}
.process-section .step-item p,
.process-section .process-step p,
.process-section .wp-block-column p {
  font-size: var(--gf-fs-sm);
  line-height: 1.6;
  color: var(--gf-muted-fg);
}


/* ==========================================================================
   10. About Section
   Gutenberg: wp:group {"className":"about-section"}
   ========================================================================== */

.about-section,
.wp-block-group.about-section {
  padding: 5rem 0;
}
@media (min-width: 768px) {
  .about-section,
  .wp-block-group.about-section { padding: 7rem 0; }
}

.about-section > .wp-block-group__inner-container {
  max-width: var(--gf-max-w-content);
  margin: 0 auto;
  padding: 0 1rem;
}

.about-section .about-grid,
.about-section .wp-block-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .about-section .about-grid,
  .about-section .wp-block-columns { grid-template-columns: 1fr 1fr; }
}

.about-section h2 { font-size: var(--gf-fs-3xl); font-weight: 700; }

.about-section .about-text p,
.about-section .wp-block-column p {
  color: var(--gf-muted-fg);
  line-height: 1.6;
}

.about-section .about-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background-color: var(--gf-muted);
  border-radius: var(--gf-r-2xl);
  padding: 3rem;
}

/* About section image */
.about-section .wp-block-image {
  overflow: hidden;
  border-radius: var(--gf-r-2xl);
}
.about-section .wp-block-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  min-height: 300px;
  background-color: var(--gf-muted);
}
@media (min-width: 1024px) {
  .about-section .wp-block-image img {
    min-height: 400px;
  }
}


/* ==========================================================================
   11. FAQ Section
   Gutenberg: wp:group {"className":"faq-section"}
   Uses <details> / <summary> elements (wp:details blocks)
   JS adds is-open / is-closing classes for smooth animation
   ========================================================================== */

.faq-section,
.wp-block-group.faq-section {
  padding: 5rem 0;
}
@media (min-width: 768px) {
  .faq-section,
  .wp-block-group.faq-section { padding: 7rem 0; }
}

.faq-section > .wp-block-group__inner-container {
  max-width: var(--gf-max-w-narrow);
  margin: 0 auto;
  padding: 0 1rem;
}

.faq-section h2 {
  text-align: center;
  margin-bottom: 3rem;
  font-size: var(--gf-fs-3xl);
  font-weight: 700;
}
.faq-section > .wp-block-group__inner-container > p {
  text-align: center;
  font-size: var(--gf-fs-lg);
  color: var(--gf-muted-fg);
  margin-bottom: 3rem;
}

/* --- Divide-y style FAQ (homepage) --- */
.faq-section .faq-list {
  border-top: 1px solid var(--gf-border);
}
.faq-section .faq-list > * {
  border-bottom: 1px solid var(--gf-border);
}

/* --- Divide-y style FAQ (matching React app) --- */
.faq-section details,
.faq-section .wp-block-details,
details.faq-card-item {
  border-bottom: 1px solid var(--gf-border);
  overflow: hidden;
}
.faq-section details:first-of-type,
.faq-section .wp-block-details:first-of-type {
  border-top: 1px solid var(--gf-border);
}

.faq-section details summary,
.faq-section .wp-block-details summary,
details.faq-card-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  font-size: var(--gf-fs-base);
  font-weight: 600;
  color: var(--gf-fg);
  cursor: pointer;
  transition: color var(--gf-t-base);
  list-style: none;
}
.faq-section details summary::-webkit-details-marker,
.faq-section .wp-block-details summary::-webkit-details-marker { display: none; }
.faq-section details summary::marker,
.faq-section .wp-block-details summary::marker { display: none; content: ''; }

.faq-section details summary:hover,
.faq-section .wp-block-details summary:hover { color: var(--gf-primary); }

.faq-section details summary span { padding-right: 1rem; }

/* Chevron icon */
.faq-section details summary svg,
.faq-section .wp-block-details summary svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gf-muted-fg);
  transition: transform var(--gf-t-base);
}

/* Rotate chevron on open */
.faq-section details[open] summary svg,
.faq-section details.is-open summary svg,
.faq-section .wp-block-details[open] summary svg {
  transform: rotate(180deg);
}

/* Answer content */
.faq-section details .faq-content,
.faq-section .wp-block-details > p,
.faq-section details > p {
  padding: 0 0 1.25rem;
  font-size: var(--gf-fs-sm);
  line-height: 1.625;
  color: var(--gf-muted-fg);
}
.faq-section details .faq-content p {
  font-size: var(--gf-fs-sm);
  line-height: 1.6;
  color: var(--gf-muted-fg);
}

/* Smooth open/close animation via JS classes */
.faq-section details .faq-content,
.faq-section details .accordion-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--gf-t-slow), opacity var(--gf-t-base);
}
.faq-section details.is-open .faq-content,
.faq-section details.is-open .accordion-content,
.faq-section details[open]:not(.is-closing) .faq-content,
.faq-section details[open]:not(.is-closing) .accordion-content {
  max-height: 600px;
  opacity: 1;
}
.faq-section details.is-closing .faq-content,
.faq-section details.is-closing .accordion-content {
  max-height: 0;
  opacity: 0;
}

/* Divide-y style variant (no cards) */
.faq-section .divide-faq > * {
  border-bottom: 1px solid var(--gf-border);
}
.faq-section .divide-faq > *:first-child {
  border-top: 1px solid var(--gf-border);
}
.faq-section .faq-question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--gf-fs-base);
  font-weight: 600;
  color: var(--gf-fg);
  transition: color var(--gf-t-base);
  cursor: pointer;
}
.faq-question:hover { color: var(--gf-primary); }
.faq-question span { padding-right: 1rem; }
.faq-chevron {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--gf-muted-fg);
  transition: transform var(--gf-t-base);
}
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--gf-t-base), opacity var(--gf-t-base);
}
.faq-item.is-open .faq-answer { max-height: 500px; opacity: 1; }
.faq-answer p { padding-bottom: 1.25rem; font-size: var(--gf-fs-sm); line-height: 1.6; color: var(--gf-muted-fg); }


/* ==========================================================================
   12. Contact Section
   Gutenberg: wp:group {"className":"contact-section"}
   ========================================================================== */

.contact-section,
.wp-block-group.contact-section {
  background-color: var(--gf-muted);
  padding: 5rem 0;
}
@media (min-width: 768px) {
  .contact-section,
  .wp-block-group.contact-section { padding: 7rem 0; }
}

.contact-section > .wp-block-group__inner-container {
  max-width: var(--gf-max-w-content);
  margin: 0 auto;
  padding: 0 1rem;
}

.contact-section h2 { text-align: center; margin-bottom: 3rem; font-size: var(--gf-fs-3xl); font-weight: 700; }

/* Contact section bottom CTA */
.contact-section > .wp-block-buttons {
  justify-content: center;
  margin-top: 2.5rem;
}

.contact-section .contact-grid,
.contact-section > .wp-block-group__inner-container > .wp-block-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .contact-section .contact-grid,
  .contact-section > .wp-block-group__inner-container > .wp-block-columns {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-section .contact-cards { display: flex; flex-direction: column; gap: 1.5rem; }

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background-color: #fff;
  border-radius: var(--gf-r-xl);
  transition: box-shadow var(--gf-t-base);
}
a.contact-card:hover { box-shadow: var(--gf-shadow-md); }

.contact-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--gf-r-full);
  background-color: rgba(18,45,75,.1);
}
.contact-card-icon svg { width: 20px; height: 20px; color: var(--gf-primary); }
.contact-card-label { font-size: var(--gf-fs-sm); font-weight: 600; color: var(--gf-fg); }
.contact-card-value { color: var(--gf-muted-fg); }

.contact-section .contact-map,
.contact-section .wp-block-html {
  overflow: hidden;
  border-radius: var(--gf-r-2xl);
}
.contact-section .contact-map iframe,
.contact-section .wp-block-html iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
}


/* ==========================================================================
   13. Footer (.site-footer)  --  matches footer.php
   ========================================================================== */

.site-footer {
  background-color: var(--gf-primary);
  color: #fff;
}

.site-footer .footer-main {
  max-width: var(--gf-max-w);
  margin: 0 auto;
  padding: 3rem 1rem;
}
@media (min-width: 640px) { .site-footer .footer-main { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .site-footer .footer-main { padding: 4rem 2rem; } }

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) { .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer .footer-grid { grid-template-columns: repeat(5, 1fr); } }

.site-footer .footer-col { display: flex; flex-direction: column; gap: 1rem; }

.site-footer .footer-logo img {
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1);
}
.site-footer .footer-tagline {
  font-size: var(--gf-fs-sm);
  line-height: 1.6;
  color: rgba(255,255,255,.7);
}

.site-footer h3 { font-size: var(--gf-fs-lg); font-weight: 600; color: #fff; }

.site-footer .footer-links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.site-footer .footer-links a {
  font-size: var(--gf-fs-sm);
  color: rgba(255,255,255,.7);
  transition: color var(--gf-t-base);
}
.site-footer .footer-links a:hover { color: #fff; }

.site-footer .footer-contact-list { display: flex; flex-direction: column; gap: .75rem; }

.site-footer .footer-contact-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--gf-fs-sm);
  color: rgba(255,255,255,.7);
  transition: color var(--gf-t-base);
}
.site-footer .footer-contact-item.is-address { align-items: flex-start; }
a.footer-contact-item:hover { color: #fff; }
.site-footer .footer-contact-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Bottom bar */
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }

.site-footer .footer-bottom-inner {
  max-width: var(--gf-max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1rem;
}
@media (min-width: 640px) {
  .site-footer .footer-bottom-inner { flex-direction: row; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) { .site-footer .footer-bottom-inner { padding-left: 2rem; padding-right: 2rem; } }

.site-footer .footer-copyright { font-size: var(--gf-fs-sm); color: rgba(255,255,255,.5); }

.site-footer .footer-legal { display: flex; align-items: center; gap: 1.5rem; }
.site-footer .footer-legal a,
.site-footer .footer-legal span {
  font-size: var(--gf-fs-sm);
  color: rgba(255,255,255,.5);
  transition: color var(--gf-t-base);
}
.site-footer .footer-legal a:hover { color: #fff; }


/* ==========================================================================
   14. WhatsApp Floating Button
   ========================================================================== */

.whatsapp-button,
.whatsapp-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  display: inline-block;
}

.whatsapp-button .whatsapp-pulse,
.whatsapp-btn .whatsapp-pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--gf-r-full);
  background-color: var(--gf-whatsapp);
  animation: pulse-ring 2s cubic-bezier(.4,0,.6,1) infinite;
}

.whatsapp-button .whatsapp-inner,
.whatsapp-btn .whatsapp-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--gf-r-full);
  background-color: var(--gf-whatsapp);
  box-shadow: var(--gf-shadow-lg);
  transition: transform var(--gf-t-base);
}
.whatsapp-button:hover .whatsapp-inner,
.whatsapp-btn:hover .whatsapp-inner { transform: scale(1.1); }

.whatsapp-button .whatsapp-inner svg,
.whatsapp-btn .whatsapp-inner svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}


/* ==========================================================================
   15. Service Pages
   Gutenberg: wp:group {"className":"service-hero"} etc.
   ========================================================================== */

/* Service Hero */
.service-hero,
.wp-block-group.service-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--gf-primary);
  padding: 5rem 1rem;
}
@media (min-width: 768px) {
  .service-hero,
  .wp-block-group.service-hero {
    padding: 7rem max(1rem, calc((100% - 72rem) / 2));
  }
}

/* Override WordPress is-layout-constrained auto-centering → LEFT-align */
.service-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: none !important;
}

.service-hero::before,
.wp-block-group.service-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, var(--gf-primary), rgba(26,63,101,.3), var(--gf-primary));
  pointer-events: none;
}

/* Ensure content sits above the gradient overlay */
.service-hero > * {
  position: relative;
  z-index: 1;
}
.city-hero > * {
  position: relative;
  z-index: 1;
}

.service-hero h1,
.service-hero .wp-block-heading {
  font-size: var(--gf-fs-3xl);
  color: #fff;
  line-height: 1.15;
}
@media (min-width: 768px) {
  .service-hero h1,
  .service-hero .wp-block-heading { font-size: var(--gf-fs-5xl); }
}

.service-hero p:not(.wp-block-button__link) {
  margin-top: 1.5rem;
  font-size: var(--gf-fs-lg);
  line-height: 1.6;
  color: rgba(255,255,255,.8);
}
@media (min-width: 768px) {
  .service-hero p:not(.wp-block-button__link) { font-size: var(--gf-fs-xl); }
}

/* Hero badge */
.service-hero .hero-badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .375rem 1rem;
  border-radius: var(--gf-r-full);
  background-color: rgba(255,255,255,.1);
  font-size: var(--gf-fs-sm);
  font-weight: 500;
  color: rgba(255,255,255,.9);
}

/* Buttons in service hero – override WordPress defaults */
.service-hero .wp-block-buttons,
.service-hero .wp-block-buttons.is-layout-flex,
.service-hero .hero-buttons {
  display: flex !important;
  flex-direction: column;
  gap: 1rem !important;
  margin-top: 2.5rem;
  flex-wrap: nowrap;
}
@media (min-width: 640px) {
  .service-hero .wp-block-buttons,
  .service-hero .wp-block-buttons.is-layout-flex,
  .service-hero .hero-buttons { flex-direction: row; }
}

/* Reset ALL WordPress button defaults inside service hero */
.service-hero .wp-block-button__link,
.service-hero .wp-element-button,
.service-hero .wp-block-button .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem;
  padding: .875rem 2rem !important;
  font-size: var(--gf-fs-base) !important;
  font-weight: 600 !important;
  border-radius: var(--gf-r-lg) !important;
  text-decoration: none !important;
  transition: background-color var(--gf-t-base);
  box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
  line-height: 1.5;
}

.service-hero .wp-block-button.btn-accent .wp-block-button__link,
.service-hero .wp-block-button:first-child .wp-block-button__link {
  background-color: var(--gf-accent) !important;
  color: #fff !important;
  border: none !important;
}
.service-hero .wp-block-button.btn-accent .wp-block-button__link:hover,
.service-hero .wp-block-button:first-child .wp-block-button__link:hover {
  background-color: var(--gf-accent-light) !important;
}

.service-hero .wp-block-button.btn-outline-white .wp-block-button__link,
.service-hero .wp-block-button:nth-child(2) .wp-block-button__link {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
.service-hero .wp-block-button.btn-outline-white .wp-block-button__link:hover,
.service-hero .wp-block-button:nth-child(2) .wp-block-button__link:hover {
  background-color: rgba(255,255,255,.1) !important;
}

/* Hero image */
.service-hero .hero-image-wrapper,
.service-hero > .wp-block-group__inner-container > .wp-block-image,
.service-hero .wp-block-column:last-child .wp-block-image {
  display: none;
}
@media (min-width: 1024px) {
  .service-hero .hero-image-wrapper,
  .service-hero > .wp-block-group__inner-container > .wp-block-image,
  .service-hero .wp-block-column:last-child .wp-block-image {
    display: block;
    overflow: hidden;
    border-radius: var(--gf-r-2xl);
    box-shadow: var(--gf-shadow-2xl);
  }
}
.service-hero .hero-image-wrapper img { width: 100%; height: auto; object-fit: cover; }

/* -- Service Content Sections -- */
.service-content,
.wp-block-group.service-content {
  padding: 5rem 0;
}
@media (min-width: 768px) {
  .service-content,
  .wp-block-group.service-content { padding: 7rem 0; }
}

.service-content > .wp-block-group__inner-container,
.service-content .content-section {
  max-width: var(--gf-max-w-content);
  margin: 0 auto;
  padding: 0 1rem;
}

.service-content .content-center {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.service-content .content-center p {
  font-size: var(--gf-fs-lg);
  line-height: 1.6;
  color: var(--gf-muted-fg);
}

/* Feature cards */
.features-grid,
.feature-cards,
.service-content .wp-block-columns {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .features-grid,
  .feature-cards,
  .service-content .wp-block-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .features-grid,
  .feature-cards,
  .service-content .wp-block-columns { grid-template-columns: repeat(3, 1fr); }
}

.feature-card,
.service-content .wp-block-column > .wp-block-group {
  padding: 1.5rem;
  background-color: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-2xl);
  box-shadow: var(--gf-shadow-sm);
  transition: box-shadow var(--gf-t-base);
}
.feature-card:hover,
.service-content .wp-block-column > .wp-block-group:hover { box-shadow: var(--gf-shadow-md); }

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: var(--gf-r-xl);
  background-color: rgba(18,45,75,.1);
}
.feature-icon svg { width: 24px; height: 24px; color: var(--gf-primary); }
.feature-icon--accent { background-color: rgba(178,58,58,.1); }
.feature-icon--accent svg { color: var(--gf-accent); }

.feature-card h3 { font-size: var(--gf-fs-base); font-weight: 600; color: var(--gf-primary); }
.feature-card p { margin-top: .5rem; font-size: var(--gf-fs-sm); line-height: 1.6; color: var(--gf-muted-fg); }

/* Feature card column overrides */
.feature-cards--2col { grid-template-columns: 1fr !important; }
@media (min-width: 768px) { .feature-cards--2col { grid-template-columns: repeat(2, 1fr) !important; } }
.feature-cards--3col { /* Default already handles 3col via media queries */ }

/* Feature card warning variant */
.feature-card--warning {
  border-color: rgba(178,58,58,.2);
  background-color: rgba(178,58,58,.03);
}
.feature-card--warning p { color: rgba(31,47,70,.8); }

/* Alert accent box */
.alert-accent {
  padding: 1.5rem;
  background-color: rgba(178,58,58,.05);
  border: 2px solid var(--gf-accent);
  border-radius: var(--gf-r-2xl);
}
.alert-accent h3 { font-size: var(--gf-fs-lg); font-weight: 700; color: var(--gf-accent-dark); }
.alert-accent p { margin-top: .75rem; font-size: var(--gf-fs-sm); line-height: 1.6; color: rgba(31,47,70,.8); }

/* Recommendation box */
.recommendation-box {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: rgba(18,45,75,.05);
  border-radius: var(--gf-r-2xl);
  text-align: center;
}
.recommendation-box p { font-size: var(--gf-fs-sm); color: var(--gf-muted-fg); }
.recommendation-box strong { color: var(--gf-fg); }

/* CTA footer */
.cta-footer {
  margin-top: 1.5rem;
  font-size: var(--gf-fs-sm);
  color: rgba(255,255,255,.5);
}

/* Badge accent */
.badge-accent {
  position: absolute;
  top: -0.75rem;
  right: 1.5rem;
  display: inline-block;
  padding: 0.25rem 1rem;
  border-radius: var(--gf-r-full);
  background-color: var(--gf-accent);
  font-size: var(--gf-fs-xs);
  font-weight: 600;
  color: #fff;
}

/* Stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.stat-box {
  padding: 1rem;
  background-color: #fff;
  border-radius: var(--gf-r-xl);
  box-shadow: var(--gf-shadow-sm);
  text-align: center;
}
.stat-number {
  font-size: var(--gf-fs-2xl);
  font-weight: 700;
  color: var(--gf-primary);
}
.stat-label {
  margin-top: 0.25rem;
  font-size: var(--gf-fs-xs);
  color: var(--gf-muted-fg);
}

/* Checklists */
.checklist,
.wp-block-list.checklist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  padding-left: 0;
}
.checklist li,
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: var(--gf-r-full);
  background-color: rgba(178,58,58,.1);
}
.check-icon svg { width: 16px; height: 16px; color: var(--gf-accent); }
.checklist-item span,
.checklist li { font-size: var(--gf-fs-base); color: rgba(31,47,70,.8); }

/* Info / Warning boxes */
.info-box {
  padding: 2rem;
  background-color: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-2xl);
  box-shadow: var(--gf-shadow-sm);
}
.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border-radius: var(--gf-r-2xl);
  background-color: rgba(18,45,75,.1);
}
.info-icon svg { width: 28px; height: 28px; color: var(--gf-primary); }
.info-box h3 { font-size: var(--gf-fs-lg); font-weight: 600; color: var(--gf-primary); }
.info-box p { margin-top: .75rem; font-size: var(--gf-fs-sm); line-height: 1.6; color: var(--gf-muted-fg); }
.info-box-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: var(--gf-fs-sm);
  font-weight: 600;
  color: var(--gf-accent);
  text-decoration: none;
  transition: color var(--gf-t-fast);
}
.info-box-link:hover { color: var(--gf-accent-dark); }

/* CTA Banner */
.cta-banner,
.wp-block-group.cta-banner {
  border-radius: var(--gf-r-2xl);
  background-color: var(--gf-primary);
  padding: 2rem;
  text-align: center;
}
@media (min-width: 640px) { .cta-banner { padding: 3rem; } }
@media (min-width: 768px) { .cta-banner { padding: 4rem; } }

.cta-banner h2 { font-size: var(--gf-fs-2xl); color: #fff; }
@media (min-width: 768px) { .cta-banner h2 { font-size: var(--gf-fs-3xl); } }
.cta-banner p { max-width: 640px; margin: 1rem auto 0; font-size: var(--gf-fs-lg); color: rgba(255,255,255,.7); }

.cta-banner .cta-buttons,
.cta-banner .wp-block-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) {
  .cta-banner .cta-buttons,
  .cta-banner .wp-block-buttons { flex-direction: row; }
}
.cta-banner .wp-block-button:first-child .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .875rem 2rem;
  background-color: var(--gf-accent); color: #fff;
  font-size: var(--gf-fs-base); font-weight: 600;
  border-radius: var(--gf-r-lg); border: none;
  transition: background-color var(--gf-t-base); text-decoration: none;
}
.cta-banner .wp-block-button:first-child .wp-block-button__link:hover { background-color: var(--gf-accent-light); }
.cta-banner .wp-block-button:nth-child(2) .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .875rem 2rem;
  background-color: transparent; color: #fff;
  font-size: var(--gf-fs-base); font-weight: 600;
  border-radius: var(--gf-r-lg); border: 1px solid #fff;
  transition: background-color var(--gf-t-base); text-decoration: none;
}
.cta-banner .wp-block-button:nth-child(2) .wp-block-button__link:hover { background-color: rgba(255,255,255,.1); }


/* ==========================================================================
   15b. Service Detail Cards (Leistungen overview page)
   ========================================================================== */

.service-detail-cards {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: var(--gf-max-w-content);
  margin: 0 auto;
}

.service-detail-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--gf-r-2xl);
  border: 1px solid var(--gf-border);
  background-color: #fff;
  box-shadow: var(--gf-shadow-sm);
}
@media (min-width: 1024px) {
  .service-detail-card { flex-direction: row; }
  .service-detail-card--reversed { flex-direction: row-reverse; }
}

.service-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(18,45,75,.05);
  padding: 2rem;
}
@media (min-width: 1024px) {
  .service-detail-icon { width: 33.333%; padding: 3rem; }
}
.service-detail-icon .service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: var(--gf-r-2xl);
  background-color: rgba(18,45,75,.1);
}
.service-detail-icon .service-icon::before {
  width: 48px;
  height: 48px;
}

.service-detail-body {
  flex: 1;
  padding: 1.5rem;
}
@media (min-width: 640px) { .service-detail-body { padding: 2rem; } }
@media (min-width: 1024px) { .service-detail-body { padding: 2.5rem; } }

.service-detail-body h2 {
  font-size: var(--gf-fs-2xl);
  font-weight: 700;
  color: var(--gf-primary);
}

.service-detail-body p {
  margin-top: 1rem;
  line-height: 1.6;
  color: var(--gf-muted-fg);
}

.service-detail-body ul {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  padding-left: 0;
}
.service-detail-body ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--gf-fs-sm);
  color: rgba(31,47,70,.8);
}
.service-detail-body ul li::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B23A3A'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.service-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-weight: 600;
  color: var(--gf-accent);
  text-decoration: none;
  transition: color var(--gf-t-base);
}
.service-detail-link:hover { color: var(--gf-accent-light); }


/* ==========================================================================
   15c. CTA Section (subpage bottom CTAs)
   ========================================================================== */

.cta-section,
.wp-block-group.cta-section,
.city-cta,
.wp-block-group.city-cta {
  background-color: var(--gf-primary);
  padding: 5rem 1rem;
  text-align: center;
}
@media (min-width: 768px) {
  .cta-section, .city-cta { padding: 7rem 2rem; }
}

.cta-section h2,
.cta-section .wp-block-heading,
.city-cta h2,
.city-cta .wp-block-heading {
  font-size: var(--gf-fs-2xl);
  font-weight: 700;
  color: #fff !important;
}
@media (min-width: 768px) {
  .cta-section h2, .cta-section .wp-block-heading,
  .city-cta h2, .city-cta .wp-block-heading { font-size: var(--gf-fs-3xl); }
}

.cta-section p,
.city-cta p {
  max-width: 640px;
  margin: 1rem auto 0;
  font-size: var(--gf-fs-lg);
  color: rgba(255,255,255,.7);
}

.cta-section .wp-block-buttons,
.city-cta .wp-block-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) {
  .cta-section .wp-block-buttons,
  .city-cta .wp-block-buttons { flex-direction: row; }
}
.cta-section .wp-block-button:first-child .wp-block-button__link,
.city-cta .wp-block-button:first-child .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .875rem 2rem;
  background-color: var(--gf-accent); color: #fff;
  font-size: var(--gf-fs-base); font-weight: 600;
  border-radius: var(--gf-r-lg); border: none;
  transition: background-color var(--gf-t-base); text-decoration: none;
}
.cta-section .wp-block-button:first-child .wp-block-button__link:hover,
.city-cta .wp-block-button:first-child .wp-block-button__link:hover {
  background-color: var(--gf-accent-light);
}
.cta-section .wp-block-button:nth-child(2) .wp-block-button__link,
.city-cta .wp-block-button:nth-child(2) .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .875rem 2rem;
  background-color: transparent; color: #fff;
  font-size: var(--gf-fs-base); font-weight: 600;
  border-radius: var(--gf-r-lg); border: 1px solid rgba(255,255,255,.3);
  transition: background-color var(--gf-t-base); text-decoration: none;
}
.cta-section .wp-block-button:nth-child(2) .wp-block-button__link:hover,
.city-cta .wp-block-button:nth-child(2) .wp-block-button__link:hover {
  background-color: rgba(255,255,255,.1);
}


/* ==========================================================================
   15d. General Process Steps (service & city subpages)
   ========================================================================== */

.process-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: center;
}
@media (min-width: 768px) {
  .process-steps--4col { grid-template-columns: repeat(4, 1fr); }
  .process-steps--4col::before {
    content: '';
    display: block;
    position: absolute;
    top: 24px;
    left: calc(12.5% + 1rem);
    right: calc(12.5% + 1rem);
    height: 2px;
    background-color: var(--gf-border);
  }
}

.process-step {
  position: relative;
  text-align: center;
}
.process-step strong {
  display: block;
  font-size: var(--gf-fs-lg);
  font-weight: 600;
  color: var(--gf-primary);
}
.process-step p {
  margin-top: 0.5rem;
  font-size: var(--gf-fs-sm);
  line-height: 1.6;
  color: var(--gf-muted-fg);
}
.step-subtitle {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--gf-fs-xs);
  font-weight: 500;
  color: var(--gf-muted-fg);
  opacity: 0.7;
}


/* ==========================================================================
   15e. Alert / Warning Boxes
   ========================================================================== */

.alert-warning {
  padding: 1.5rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--gf-r-2xl);
  color: #991b1b;
  line-height: 1.6;
}
.alert-warning strong { color: #7f1d1d; }


/* ==========================================================================
   16. City Landing Pages
   Gutenberg: wp:group {"className":"city-hero"} etc.
   ========================================================================== */

/* City section vertical padding */
.city-services,
.city-why,
.city-area,
.city-process,
.city-faq {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .city-services,
  .city-why,
  .city-area,
  .city-process,
  .city-faq {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* ==========================================================================
   Subpage FAQ: Card style (service detail + city pages)
   Homepage FAQ stays divide-y via .faq-section rules above.
   Service pages have body.page-child; city pages use .city-faq.
   ========================================================================== */
body.page-child .faq-section details,
body.page-child .faq-section .wp-block-details,
.city-faq details,
.city-faq .wp-block-details {
  border: 1px solid var(--gf-border) !important;
  border-radius: var(--gf-r-2xl);
  background-color: #fff;
  box-shadow: var(--gf-shadow-sm);
  overflow: hidden;
  border-bottom: 1px solid var(--gf-border) !important;
}
body.page-child .faq-section details:first-of-type,
.city-faq details:first-of-type {
  border-top: 1px solid var(--gf-border) !important;
}
body.page-child .faq-section details + details,
body.page-child .faq-section .wp-block-details + .wp-block-details,
.city-faq details + details,
.city-faq .wp-block-details + .wp-block-details {
  margin-block-start: 1rem !important;
}
body.page-child .faq-section details summary,
.city-faq details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--gf-fs-base);
  color: var(--gf-fg);
  list-style: none;
  transition: color var(--gf-t-base);
}
body.page-child .faq-section details summary:hover,
.city-faq details summary:hover { color: var(--gf-primary); }
body.page-child .faq-section details summary::-webkit-details-marker,
.city-faq details summary::-webkit-details-marker { display: none; }
body.page-child .faq-section details summary::after,
.city-faq details summary::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 200ms ease;
}
body.page-child .faq-section details[open] summary::after,
.city-faq details[open] summary::after { transform: rotate(180deg); }
body.page-child .faq-section details[open] summary,
.city-faq details[open] summary {
  border-bottom: 1px solid var(--gf-border);
}
body.page-child .faq-section details > :not(summary),
.city-faq details > :not(summary) {
  padding: 1rem 1.5rem 1.25rem;
  font-size: var(--gf-fs-sm);
  line-height: 1.6;
  color: var(--gf-muted-fg);
}


/* ==========================================================================
   Page-specific Hero Enhancements
   ========================================================================== */

/* Leistungen overview (page-id-36): centered text + background image */
body.page-id-36 .service-hero {
  text-align: center;
  background-image: url('../images/leistungen-hero.jpg');
  background-size: cover;
  background-position: center;
}
body.page-id-36 .service-hero::before {
  background: rgba(18,45,75,.82);
}
/* Override the left-align back to center for Leistungen overview */
body.page-id-36 .service-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: auto !important;
  margin-right: auto !important;
}
body.page-id-36 .service-hero h1,
body.page-id-36 .service-hero .wp-block-heading {
  margin-left: auto !important;
  margin-right: auto !important;
}
body.page-id-36 .service-hero p:not(.wp-block-button__link) {
  max-width: 42rem;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.page-id-36 .service-hero .wp-block-buttons {
  justify-content: center;
}

/* Service detail pages (page-child): hero image on right */
@media (min-width: 1024px) {
  body.page-child .service-hero::after {
    content: '';
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    width: 38%;
    max-width: 460px;
    aspect-ratio: 4/3;
    border-radius: var(--gf-r-2xl);
    box-shadow: var(--gf-shadow-2xl);
    background-size: cover;
    background-position: center;
    z-index: 1;
  }
  body.page-child .service-hero h1,
  body.page-child .service-hero .wp-block-heading,
  body.page-child .service-hero p:not(.wp-block-button__link),
  body.page-child .service-hero .hero-badge,
  body.page-child .service-hero .wp-block-buttons {
    max-width: 55%;
  }
  body.page-id-37 .service-hero::after { background-image: url('../images/unfallgutachten.jpg'); }
  body.page-id-38 .service-hero::after { background-image: url('../images/haftpflichtschaden.jpg'); }
  body.page-id-39 .service-hero::after { background-image: url('../images/kaskoschaden.jpg'); }
  body.page-id-40 .service-hero::after { background-image: url('../images/kostenvoranschlag.jpg'); }
}


/* ==========================================================================
   CTA Rounded Card Variants
   ========================================================================== */

/* Leistungen CTA (inside service-content): rounded card */
.service-content .cta-section {
  border-radius: var(--gf-r-2xl);
  max-width: var(--gf-max-w-content);
  margin: 4rem auto 0;
}

/* City CTA: rounded card */
.city-cta,
.wp-block-group.city-cta {
  max-width: var(--gf-max-w);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--gf-r-2xl);
}


/* ==========================================================================
   City "Warum" Section: Two-Column Layout
   ========================================================================== */

@media (min-width: 1024px) {
  .city-why {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3rem;
  }
  .city-why > h2,
  .city-why > .wp-block-heading {
    grid-column: 1 / -1;
  }
  .city-why > p:not(.hero-badge) {
    grid-column: 1;
    grid-row: 2;
  }
  .city-why > .advantage-list {
    grid-column: 1;
    grid-row: 3;
  }
  .city-why > .info-card {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: start;
    margin-top: 0;
  }
}

/* City hero inherits from service hero */
.city-hero,
.wp-block-group.city-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--gf-primary);
  padding: 5rem 1rem;
}
@media (min-width: 768px) {
  .city-hero,
  .wp-block-group.city-hero {
    padding: 7rem max(1rem, calc((100% - 72rem) / 2));
  }
}

/* Override WordPress is-layout-constrained auto-centering → LEFT-align */
.city-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: none !important;
}

.city-hero::before,
.wp-block-group.city-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, var(--gf-primary), rgba(26,63,101,.3), var(--gf-primary));
  pointer-events: none;
}

.city-hero h1 { font-size: var(--gf-fs-3xl); color: #fff !important; line-height: 1.15; max-width: 48rem; }
@media (min-width: 768px) { .city-hero h1 { font-size: var(--gf-fs-5xl); } }
.city-hero p:not(.wp-block-button__link) { margin-top: 1.5rem; font-size: var(--gf-fs-lg); line-height: 1.6; color: rgba(255,255,255,.8); max-width: 48rem; }
@media (min-width: 768px) { .city-hero p:not(.wp-block-button__link) { font-size: var(--gf-fs-xl); } }
.city-hero .hero-badge {
  display: inline-block; margin-bottom: 1rem; padding: .375rem 1rem;
  border-radius: var(--gf-r-full); background-color: rgba(255,255,255,.1);
  font-size: var(--gf-fs-sm); font-weight: 500; color: rgba(255,255,255,.9);
}

/* City hero buttons – override WordPress defaults */
.city-hero .wp-block-buttons,
.city-hero .wp-block-buttons.is-layout-flex {
  display: flex !important; flex-direction: column; gap: 1rem !important; margin-top: 2.5rem; flex-wrap: nowrap;
}
@media (min-width: 640px) {
  .city-hero .wp-block-buttons,
  .city-hero .wp-block-buttons.is-layout-flex { flex-direction: row; }
}

/* Reset ALL WordPress button defaults inside city hero */
.city-hero .wp-block-button__link,
.city-hero .wp-element-button,
.city-hero .wp-block-button .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem;
  padding: .875rem 2rem !important;
  font-size: var(--gf-fs-base) !important;
  font-weight: 600 !important;
  border-radius: var(--gf-r-lg) !important;
  text-decoration: none !important;
  transition: background-color var(--gf-t-base);
  box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
  line-height: 1.5;
}

.city-hero .wp-block-button.btn-accent .wp-block-button__link,
.city-hero .wp-block-button:first-child .wp-block-button__link {
  background-color: var(--gf-accent) !important;
  color: #fff !important;
  border: none !important;
}
.city-hero .wp-block-button:first-child .wp-block-button__link:hover { background-color: var(--gf-accent-light) !important; }

.city-hero .wp-block-button.btn-outline-white .wp-block-button__link,
.city-hero .wp-block-button:nth-child(2) .wp-block-button__link {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
.city-hero .wp-block-button:nth-child(2) .wp-block-button__link:hover { background-color: rgba(255,255,255,.1) !important; }

/* District / area tags */
.district-tags,
.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.district-tag {
  display: inline-block;
  padding: .375rem .75rem;
  border-radius: var(--gf-r-full);
  background-color: rgba(18,45,75,.05);
  font-size: var(--gf-fs-sm);
  color: var(--gf-primary);
}
.area-tag {
  display: inline-block;
  padding: .375rem .75rem;
  border-radius: var(--gf-r-full);
  background-color: rgba(178,58,58,.05);
  font-size: var(--gf-fs-sm);
  color: var(--gf-accent);
}

.area-card {
  padding: 1.5rem;
  background-color: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-2xl);
  box-shadow: var(--gf-shadow-sm);
}
.area-card h3 { margin-bottom: 1rem; font-size: var(--gf-fs-lg); font-weight: 600; color: var(--gf-primary); }

.area-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }

.area-tag--primary {
  background-color: rgba(18,45,75,.05);
  color: var(--gf-primary);
}
.area-tag--accent {
  background-color: rgba(178,58,58,.05);
  color: var(--gf-accent);
}

/* Advantage list (city pages) */
.advantage-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.advantage-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(31,47,70,.8);
  line-height: 1.6;
}
.advantage-list li::before {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin-top: 2px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: rgba(178,58,58,.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B23A3A'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Info card (city pages) */
.info-card {
  padding: 2rem;
  margin-top: 2rem;
  background-color: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-2xl);
  box-shadow: var(--gf-shadow-sm);
}
.info-card h3 { font-size: var(--gf-fs-lg); font-weight: 600; color: var(--gf-primary); }
.info-card p { margin-top: 0.75rem; font-size: var(--gf-fs-base); line-height: 1.6; color: var(--gf-muted-fg); }
.info-card .service-detail-link { display: inline-flex; margin-top: 1.5rem; }

/* Two-column grid */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) { .two-col-grid { grid-template-columns: 1fr 1fr; } }


/* ==========================================================================
   17. Form & Tracking Pages
   ========================================================================== */

.form-page,
.damage-form-page {
  min-height: 100vh;
  background-color: rgba(245,245,247,.3);
}

.form-page .form-container,
.damage-form-page .form-container {
  max-width: 768px;
  margin: 0 auto;
  padding: 7rem 1rem 3rem;
}
@media (min-width: 640px) {
  .form-page .form-container,
  .damage-form-page .form-container { padding-top: 8rem; padding-bottom: 4rem; }
}

.form-page .form-header,
.damage-form-page .form-header { margin-bottom: 2rem; text-align: center; }
.form-page .form-header h1 { font-size: var(--gf-fs-3xl); color: var(--gf-primary); }
@media (min-width: 640px) { .form-page .form-header h1 { font-size: var(--gf-fs-4xl); } }
.form-page .form-header p { margin-top: .75rem; font-size: var(--gf-fs-lg); color: var(--gf-muted-fg); }

/* Tracking page */
.tracking-page .form-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 7rem 1rem 3rem;
}

/* Form card */
.damage-form {
  padding: 1.5rem;
  background-color: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-2xl);
  box-shadow: var(--gf-shadow-sm);
}
@media (min-width: 640px) { .damage-form { padding: 2rem; } }

/* Form fields */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  margin-bottom: .5rem;
  font-size: var(--gf-fs-sm);
  font-weight: 500;
  color: var(--gf-fg);
}
.form-group label .required { color: var(--gf-error); margin-left: 2px; }

.form-input,
.form-textarea,
.form-select {
  display: block;
  width: 100%;
  padding: .625rem .875rem;
  font-family: var(--gf-font);
  font-size: var(--gf-fs-sm);
  color: var(--gf-fg);
  background-color: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-lg);
  transition: border-color var(--gf-t-base), box-shadow var(--gf-t-base);
  outline: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--gf-muted-fg); opacity: .6; }
.form-input:focus,
.form-textarea:focus,
.form-select:focus { border-color: var(--gf-accent); box-shadow: 0 0 0 3px rgba(178,58,58,.1); }
.form-input.has-error { border-color: var(--gf-error); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-error { margin-top: .25rem; font-size: var(--gf-fs-sm); font-weight: 500; color: var(--gf-error); }

.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.form-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gf-border);
}


/* ==========================================================================
   18. Buttons
   ========================================================================== */

.btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 2rem;
  font-family: var(--gf-font);
  font-size: var(--gf-fs-base);
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: var(--gf-r-lg);
  cursor: pointer;
  transition: all var(--gf-t-base);
  text-decoration: none;
}
.btn svg { width: 20px; height: 20px; }

.btn-primary { background-color: var(--gf-primary); color: #fff; }
.btn-primary:hover { background-color: var(--gf-primary-light); color: #fff; }

.btn-accent,
.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--gf-accent);
  color: #fff;
}
.btn-accent:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background-color: var(--gf-accent-light);
  color: #fff;
}

.btn-outline { background-color: transparent; color: var(--gf-fg); border: 1px solid var(--gf-border); }
.btn-outline:hover { background-color: var(--gf-muted); }

.btn-outline-white,
.btn-secondary {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
}
.btn-outline-white:hover,
.btn-secondary:hover { background-color: rgba(255,255,255,.1); color: #fff; }

.btn-sm { padding: .625rem 1.25rem; font-size: var(--gf-fs-sm); }
.btn-sm svg { width: 16px; height: 16px; }
.btn-lg { padding: 1rem 2.5rem; font-size: var(--gf-fs-lg); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--gf-fs-sm);
  font-weight: 600;
  color: var(--gf-accent);
  transition: color var(--gf-t-base);
}
.link-arrow:hover { color: var(--gf-accent-dark); }
.link-arrow svg { width: 16px; height: 16px; }


/* ==========================================================================
   19. Section Utility Classes
   ========================================================================== */

.section-padding { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .section-padding { padding-top: 7rem; padding-bottom: 7rem; } }

.section-dark,
.section-primary { background-color: var(--gf-primary); color: #fff; }
.section-dark h2, .section-primary h2 { color: #fff; }
.section-dark p, .section-primary p { color: rgba(255,255,255,.7); }

.section-muted { background-color: var(--gf-muted); }

.section-header { margin-bottom: 3rem; text-align: center; }
.section-header h2 { font-size: var(--gf-fs-3xl); font-weight: 700; color: var(--gf-primary); }
.section-header p { margin-top: .75rem; font-size: var(--gf-fs-lg); color: var(--gf-muted-fg); }
.section-primary .section-header h2 { color: #fff; }
.section-primary .section-header p { color: rgba(255,255,255,.7); }


/* ==========================================================================
   20. Utility Classes
   ========================================================================== */

.text-balance { text-wrap: balance; }
.text-primary { color: var(--gf-primary); }
.text-accent { color: var(--gf-accent); }
.text-muted { color: var(--gf-muted-fg); }
.text-white { color: #fff; }
.text-center { text-align: center; }

.bg-primary { background-color: var(--gf-primary); }
.bg-accent { background-color: var(--gf-accent); }
.bg-muted { background-color: var(--gf-muted); }
.bg-white { background-color: #fff; }

.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* Responsive grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-4 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Responsive hiding */
.hidden-mobile { display: none; }
@media (min-width: 768px) { .hidden-mobile { display: block; } }
.hidden-desktop { display: block; }
@media (min-width: 768px) { .hidden-desktop { display: none; } }

/* Max-width containers */
.max-w-content { max-width: var(--gf-max-w-content); margin-left: auto; margin-right: auto; }
.max-w-text { max-width: 896px; margin-left: auto; margin-right: auto; }
.max-w-narrow { max-width: var(--gf-max-w-narrow); margin-left: auto; margin-right: auto; }


/* ==========================================================================
   21. Animations & Keyframes
   ========================================================================== */

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Scroll-triggered animations (IntersectionObserver via main.js) */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.animate-on-scroll.animated,
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.animate-on-scroll.animated .animate-child,
.animate-on-scroll.is-visible .animate-child {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp .5s ease-out forwards;
}
.animate-on-scroll.animated .animate-child:nth-child(1),
.animate-on-scroll.is-visible .animate-child:nth-child(1) { animation-delay: 0s; }
.animate-on-scroll.animated .animate-child:nth-child(2),
.animate-on-scroll.is-visible .animate-child:nth-child(2) { animation-delay: .1s; }
.animate-on-scroll.animated .animate-child:nth-child(3),
.animate-on-scroll.is-visible .animate-child:nth-child(3) { animation-delay: .2s; }
.animate-on-scroll.animated .animate-child:nth-child(4),
.animate-on-scroll.is-visible .animate-child:nth-child(4) { animation-delay: .3s; }
.animate-on-scroll.animated .animate-child:nth-child(5),
.animate-on-scroll.is-visible .animate-child:nth-child(5) { animation-delay: .4s; }
.animate-on-scroll.animated .animate-child:nth-child(6),
.animate-on-scroll.is-visible .animate-child:nth-child(6) { animation-delay: .5s; }
.animate-on-scroll.animated .animate-child:nth-child(7),
.animate-on-scroll.is-visible .animate-child:nth-child(7) { animation-delay: .6s; }

/* Counter value animated (JS sets text) */
.counter-animated { display: inline-block; }


/* ==========================================================================
   22. WordPress-Specific Overrides
   ========================================================================== */

/* Admin bar offset */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* WordPress block gallery */
.wp-block-gallery { gap: 1rem; }

/* WordPress navigation menu compatibility */
.wp-block-navigation a {
  font-size: var(--gf-fs-sm);
  font-weight: 500;
  color: rgba(31,47,70,.8);
  text-decoration: none;
  transition: color var(--gf-t-base);
}
.wp-block-navigation a:hover { color: var(--gf-primary); }

/* WordPress block heading defaults (NO color - let sections control it) */
.site-content .wp-block-heading {
  font-weight: 700;
  line-height: 1.2;
}

/* WordPress columns block flex reset */
.site-content .wp-block-columns {
  margin-bottom: 0;
}
.site-content .wp-block-column {
  margin-bottom: 0;
}

/* WordPress button block reset */
.wp-block-button { margin: 0; }
.wp-block-buttons { gap: 1rem; }

/* WordPress list block */
.wp-block-list {
  padding-left: 0;
  list-style: none;
}
/* Checkmark lists on service pages */
.service-content .wp-block-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.service-content .wp-block-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--gf-fs-base);
  color: rgba(31,47,70,.8);
}
.service-content .wp-block-list li::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B23A3A'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* WordPress table block */
.wp-block-table { margin: 0; overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }

/* WordPress details block */
.wp-block-details { margin-bottom: 0; }

/* WordPress image block */
.wp-block-image { margin-bottom: 0; }
.wp-block-image figcaption {
  margin-top: .5rem;
  font-size: var(--gf-fs-sm);
  color: var(--gf-muted-fg);
  text-align: center;
}

/* WordPress cover block */
.wp-block-cover {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   23. CSS-only Icons (pseudo-elements for empty icon divs)
   ========================================================================== */

/* --- Service Icons (background-image with explicit colors) --- */
.service-icon::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* Document / clipboard icon (filled) */
.service-icon--document::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23122D4B'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 13h8v2H8v-2zm0 4h8v2H8v-2z'/%3E%3C/svg%3E");
}
/* Shield icon (filled) */
.service-icon--shield::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23122D4B'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E");
}
/* Car icon (filled) */
.service-icon--car::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23122D4B'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16C5.67 16 5 15.33 5 14.5S5.67 13 6.5 13 8 13.67 8 14.5 7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E");
}
/* Calculator icon (filled) */
.service-icon--calculator::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23122D4B'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14h-2v-2h2v2zm0-4h-2v-2h2v2zm4 4h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4H8V5h8v4z'/%3E%3C/svg%3E");
}

/* --- Contact Icons --- */
.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--gf-r-full);
  background-color: rgba(18,45,75,.1);
}
.contact-icon::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.contact-icon--phone::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23122D4B'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}
.contact-icon--email::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23122D4B'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
.contact-icon--map::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23122D4B'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}
.contact-icon--clock::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23122D4B'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E");
}

/* --- Comparison Table Icons --- */
.icon-x, .icon-check {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: .5rem;
  flex-shrink: 0;
}
.icon-x::before, .icon-check::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.icon-x::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/%3E%3C/svg%3E");
}
.icon-check::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316a34a'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

/* --- Badge --- */
.badge-recommended {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .75rem;
  border-radius: var(--gf-r-full);
  background-color: var(--gf-accent);
  font-size: var(--gf-fs-xs);
  font-weight: 600;
  color: #fff;
  vertical-align: middle;
  margin-left: .5rem;
}

/* --- FAQ Chevron (CSS-only, no SVG) --- */
.faq-section details summary::after,
.faq-section .wp-block-details summary::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--gf-t-base);
}
.faq-section details[open] summary::after,
.faq-section .wp-block-details[open] summary::after {
  transform: rotate(180deg);
}

/* --- Comparison table on mobile (show scrollable) --- */
.comparison-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1023px) {
  .comparison-table,
  .comparison-section .wp-block-table {
    display: block;
    font-size: var(--gf-fs-sm);
  }
  .comparison-table table {
    min-width: 600px;
  }
}

/* --- btn-link (text button style) --- */
.btn-link,
.wp-block-button.btn-link .wp-block-button__link {
  background: none;
  border: none;
  padding: 0;
  color: var(--gf-accent);
  font-weight: 600;
  font-size: var(--gf-fs-base);
  text-decoration: none;
}
.btn-link:hover,
.wp-block-button.btn-link .wp-block-button__link:hover {
  color: var(--gf-accent-light);
  background: none;
}

/* --- btn-accent on WP buttons --- */
.wp-block-button.btn-accent .wp-block-button__link {
  background-color: var(--gf-accent);
  color: #fff;
}
.wp-block-button.btn-accent .wp-block-button__link:hover {
  background-color: var(--gf-accent-light);
  color: #fff;
}

/* --- btn-outline-white on WP buttons --- */
.wp-block-button.btn-outline-white .wp-block-button__link {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
}
.wp-block-button.btn-outline-white .wp-block-button__link:hover {
  background-color: rgba(255,255,255,.1);
  color: #fff;
}

/* --- Contact card text styling --- */
.contact-card strong {
  display: block;
  font-size: var(--gf-fs-sm);
  font-weight: 600;
  color: var(--gf-fg);
  margin-bottom: .25rem;
}
.contact-card span {
  font-size: var(--gf-fs-sm);
  color: var(--gf-muted-fg);
}

/* --- Section headers alignment (direct children of section groups) --- */
.services-section > h2,
.services-section > .wp-block-heading,
.comparison-section > h2,
.comparison-section > .wp-block-heading,
.process-section > h2,
.process-section > .wp-block-heading,
.faq-section > h2,
.faq-section > .wp-block-heading,
.contact-section > h2,
.contact-section > .wp-block-heading {
  text-align: center;
  margin-bottom: 1rem;
}

.services-section > p,
.comparison-section > p,
.contact-section > p {
  text-align: center;
  color: var(--gf-muted-fg);
  margin-bottom: 3rem;
}

/* Section inner content centering & padding
   NOTE: hero-section, service-hero, city-hero handle their own padding
   (with max() calc for centered container effect) */
.services-section,
.comparison-section,
.process-section,
.about-section,
.faq-section,
.contact-section,
.service-content,
.city-services,
.city-why,
.city-area,
.city-process,
.city-faq {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .services-section,
  .comparison-section,
  .process-section,
  .about-section,
  .faq-section,
  .contact-section,
  .service-content,
  .city-services,
  .city-why,
  .city-area,
  .city-process,
  .city-faq {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .services-section,
  .comparison-section,
  .process-section,
  .about-section,
  .faq-section,
  .contact-section,
  .service-content,
  .city-services,
  .city-why,
  .city-area,
  .city-process,
  .city-faq {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Constrain content inside full-width sections */
.services-section > h2,
.services-section > .wp-block-heading,
.services-section > p,
.services-section > .service-cards,
.comparison-section > h2,
.comparison-section > .wp-block-heading,
.comparison-section > p,
.comparison-section > .comparison-table-wrapper,
.comparison-section > .wp-block-buttons,
.process-section > h2,
.process-section > .wp-block-heading,
.process-section > .process-steps,
.about-section > .wp-block-columns,
.faq-section > h2,
.faq-section > .wp-block-heading,
.faq-section > .wp-block-details,
.faq-section > details,
.contact-section > h2,
.contact-section > .wp-block-heading,
.contact-section > .contact-grid,
.contact-section > .wp-block-buttons {
  max-width: var(--gf-max-w);
  margin-left: auto;
  margin-right: auto;
}

.faq-section > h2,
.faq-section > .wp-block-heading,
.faq-section > .wp-block-details,
.faq-section > details {
  max-width: var(--gf-max-w-narrow);
}

.comparison-section > h2,
.comparison-section > .wp-block-heading,
.comparison-section > p,
.comparison-section > .comparison-table-wrapper,
.comparison-section > .wp-block-buttons,
.process-section > h2,
.process-section > .wp-block-heading,
.process-section > .process-steps {
  max-width: 1024px;
}

/* Hero inner content constraint */
.hero-section > h1,
.hero-section > .wp-block-heading,
.hero-section > p,
.hero-section > .wp-block-buttons {
  max-width: var(--gf-max-w);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* City/Service section content constraints */
.city-services > h2,
.city-services > .wp-block-heading,
.city-services > p,
.city-services > .service-cards,
.city-why > h2,
.city-why > .wp-block-heading,
.city-why > p,
.city-why > .advantage-list,
.city-why > .info-card,
.city-area > h2,
.city-area > .wp-block-heading,
.city-area > p,
.city-area > .area-grid,
.city-process > h2,
.city-process > .wp-block-heading,
.city-process > p,
.city-process > .process-steps,
.city-faq > h2,
.city-faq > .wp-block-heading,
.city-faq > .wp-block-details,
.city-faq > details,
.service-content > h2,
.service-content > .wp-block-heading,
.service-content > p,
.service-content > .wp-block-list,
.service-content > .wp-block-columns,
.service-content > .feature-cards,
.service-content > .process-steps,
.service-content > .alert-warning,
.service-content > .alert-accent,
.service-content > .recommendation-box,
.service-content > .info-box,
.service-content > .info-card {
  max-width: var(--gf-max-w-content);
  margin-left: auto;
  margin-right: auto;
}

/* City FAQ: narrower container */
.city-faq > h2,
.city-faq > .wp-block-heading,
.city-faq > .wp-block-details,
.city-faq > details {
  max-width: var(--gf-max-w-narrow);
}

/* City process: medium container */
.city-process > .process-steps {
  max-width: 1024px;
}


/* ==========================================================================
   24. Print Styles
   ========================================================================== */

@media print {
  .site-header,
  .header-nav,
  .mobile-menu-panel,
  .mobile-menu-toggle,
  .site-footer,
  .whatsapp-button,
  .whatsapp-btn,
  .header-cta,
  .mobile-menu-cta { display: none !important; }

  body { padding-top: 0 !important; color: #000; background: #fff; }

  .hero-section,
  .service-hero,
  .city-hero {
    background-color: #fff !important;
    color: #000 !important;
    padding: 1rem 0 !important;
  }
  .hero-section *,
  .service-hero *,
  .city-hero * { color: #000 !important; }
  .hero-section::before,
  .service-hero::before,
  .city-hero::before { display: none !important; }

  .service-card,
  .feature-card,
  .comparison-card,
  .damage-form,
  .info-box,
  .trust-section > .wp-block-group__inner-container,
  .trust-section .trust-inner {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    color: #666;
  }

  .service-card,
  .feature-card,
  .comparison-card,
  .faq-item,
  .info-box { break-inside: avoid; page-break-inside: avoid; }

  .animate-on-scroll { opacity: 1 !important; transform: none !important; }

  .trust-section > .wp-block-group__inner-container,
  .trust-section .trust-inner { margin-top: 0 !important; }

  .cta-banner { background-color: #f5f5f5 !important; color: #000 !important; }
  .cta-banner * { color: #000 !important; }

  .btn-accent, .btn-primary, .btn-secondary, .btn-outline-white,
  .cta-buttons, .wp-block-buttons { display: none !important; }
}


/* ==========================================================================
   20. Schaden melden – Multi-step Form
   ========================================================================== */

/* Subtle gray background for the form page */
.page-id-45 { background: rgba(245,245,247,.3); }

.form-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 7rem 1rem 3rem;
}
@media (min-width: 640px) {
  .form-page { padding-top: 8rem; padding-bottom: 4rem; }
}

.form-page-header {
  text-align: center;
  margin-bottom: 2rem;
}
.form-page-header h1 {
  font-size: var(--gf-fs-3xl);
  color: var(--gf-primary);
  margin-bottom: .5rem;
}
.form-page-header p {
  font-size: var(--gf-fs-lg);
  color: var(--gf-muted-fg);
}

/* --- Step Indicator --- */
.step-indicator { margin-bottom: 2.5rem; }
.step-indicator ol {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  list-style: none;
}
.step-item:last-child { flex: 0 0 auto; }
.step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  font-size: var(--gf-fs-sm);
  font-weight: 600;
  border: 2px solid var(--gf-border);
  background: #fff;
  color: var(--gf-muted-fg);
  position: relative;
  z-index: 2;
  transition: all .3s;
}
.step-check { display: none; }
.step-item.is-active .step-circle {
  background: var(--gf-accent);
  border-color: var(--gf-accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(178,58,58,.2);
}
.step-item.is-completed .step-circle {
  background: var(--gf-accent);
  border-color: var(--gf-accent);
  color: #fff;
}
.step-item.is-completed .step-number { display: none; }
.step-item.is-completed .step-check { display: block; }
.step-line {
  position: absolute;
  top: 1.125rem;
  left: calc(50% + 1.125rem);
  right: calc(-50% + 1.125rem);
  height: 2px;
  background: var(--gf-border);
  z-index: 1;
  transition: background .3s;
}
.step-item.is-completed .step-line { background: var(--gf-accent); }
.step-label {
  display: none;
  margin-top: .5rem;
  font-size: var(--gf-fs-xs);
  font-weight: 500;
  color: var(--gf-muted-fg);
}
.step-item.is-active .step-label { color: var(--gf-accent); }
.step-item.is-completed .step-label { color: var(--gf-accent); }
@media (min-width: 640px) { .step-label { display: block; } }

/* --- Form Card --- */
.form-card {
  background: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-2xl);
  padding: 1.5rem;
  box-shadow: var(--gf-shadow-sm);
}
@media (min-width: 640px) { .form-card { padding: 2rem; } }

/* --- Form Steps --- */
.form-step h2 {
  font-size: var(--gf-fs-xl);
  color: var(--gf-fg);
  margin-bottom: .25rem;
}
@media (min-width: 640px) { .form-step h2 { font-size: var(--gf-fs-2xl); } }
.form-step-desc {
  font-size: var(--gf-fs-sm);
  color: var(--gf-muted-fg);
  margin-bottom: 1.5rem;
}

/* --- Damage Type Cards --- */
.damage-type-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) { .damage-type-grid { grid-template-columns: repeat(3, 1fr); } }

.damage-type-card,
.damage-type-card.wp-element-button {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 1.5rem !important;
  border: 2px solid var(--gf-border) !important;
  border-radius: var(--gf-r-xl) !important;
  background: #fff !important;
  color: var(--gf-fg) !important;
  cursor: pointer;
  text-align: center;
  transition: all .2s;
  width: auto !important;
  height: auto !important;
}
.damage-type-card:hover { border-color: rgba(178,58,58,.5) !important; box-shadow: var(--gf-shadow-md); background: #fff !important; }
.damage-type-card.is-selected { border-color: var(--gf-accent) !important; background: rgba(178,58,58,.03) !important; box-shadow: var(--gf-shadow-md); }
.damage-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: var(--gf-muted);
  color: var(--gf-muted-fg);
  transition: all .2s;
}
.damage-type-card.is-selected .damage-type-icon { background: rgba(178,58,58,.1); color: var(--gf-accent); }
.damage-type-label { font-weight: 600; color: var(--gf-fg); }
.damage-type-card.is-selected .damage-type-label { color: var(--gf-accent); }
.damage-type-desc { font-size: var(--gf-fs-sm); color: var(--gf-muted-fg); }

/* --- Form Fields --- */
.form-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  display: block;
  font-size: var(--gf-fs-sm);
  font-weight: 500;
  color: var(--gf-fg);
  margin-bottom: .375rem;
}
.form-optional { color: var(--gf-muted-fg); font-weight: 400; }
.form-field input,
.form-field textarea {
  width: 100%;
  padding: .625rem 1rem;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-lg);
  font-size: var(--gf-fs-sm);
  font-family: var(--gf-font);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  background: #fff;
  box-sizing: border-box;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(107,114,128,.5); }
.form-field input:focus,
.form-field textarea:focus { border-color: var(--gf-accent); box-shadow: 0 0 0 3px rgba(178,58,58,.15); }
.form-field input.has-error,
.form-field textarea.has-error { border-color: var(--gf-error); }
.form-field input.has-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.form-field textarea { resize: none; }
.form-error { font-size: var(--gf-fs-sm); color: var(--gf-error); margin-top: .25rem; min-height: 0; }

/* --- Photo Upload --- */
.photo-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border: 2px dashed var(--gf-border);
  border-radius: var(--gf-r-xl);
  cursor: pointer;
  text-align: center;
  transition: all .2s;
}
.photo-dropzone:hover { border-color: rgba(178,58,58,.5); background: rgba(245,245,247,.5); }
.photo-dropzone.is-dragover { border-color: var(--gf-accent); background: rgba(178,58,58,.03); }
.photo-dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: var(--gf-muted);
  color: var(--gf-muted-fg);
}
.photo-dropzone-text { margin-top: 1rem; font-size: var(--gf-fs-sm); font-weight: 500; color: var(--gf-fg); }
.photo-dropzone-hint { margin-top: .25rem; font-size: var(--gf-fs-xs); color: var(--gf-muted-fg); }
.photo-count { font-size: var(--gf-fs-sm); color: var(--gf-muted-fg); margin-top: 1rem; }
.photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 640px) { .photo-preview-grid { grid-template-columns: repeat(4, 1fr); } }
.photo-preview-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--gf-r-lg);
  border: 1px solid var(--gf-border);
  background: var(--gf-muted);
}
.photo-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview-name {
  position: absolute;
  inset: auto 0 0;
  padding: .5rem;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  font-size: var(--gf-fs-xs);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-remove-btn {
  position: absolute;
  top: .375rem;
  right: .375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s, background .2s;
}
.photo-preview-item:hover .photo-remove-btn { opacity: 1; }
.photo-remove-btn:hover { background: var(--gf-error); }
.photo-tip {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-lg);
  background: rgba(245,245,247,.5);
  margin-top: 1rem;
}
.photo-tip svg { flex-shrink: 0; color: var(--gf-muted-fg); }
.photo-tip p { font-size: var(--gf-fs-sm); color: var(--gf-muted-fg); margin: 0; }

/* --- Summary --- */
.summary-cards { display: flex; flex-direction: column; gap: 1rem; }
.summary-card {
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-xl);
  background: #fff;
  padding: 1.25rem;
}
.summary-card-label { font-size: var(--gf-fs-sm); font-weight: 600; color: var(--gf-muted-fg); }
.summary-card-value { margin-top: .5rem; font-weight: 500; color: var(--gf-fg); }
.summary-dl { margin-top: .75rem; display: grid; gap: .5rem 2rem; }
@media (min-width: 640px) { .summary-dl { grid-template-columns: 1fr 1fr; } }
.summary-dl dt { font-size: var(--gf-fs-xs); color: var(--gf-muted-fg); }
.summary-dl dd { font-size: var(--gf-fs-sm); font-weight: 500; color: var(--gf-fg); margin: 0; }
.summary-full { grid-column: 1 / -1; }

/* --- Form Navigation --- */
.form-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gf-border);
}
.form-nav-spacer { flex: 1; }
.form-btn,
.form-btn.wp-element-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem 1.5rem !important;
  font-size: var(--gf-fs-sm) !important;
  font-weight: 600;
  border-radius: var(--gf-r-lg) !important;
  border: none;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
  font-family: var(--gf-font);
  width: auto !important;
  height: auto !important;
}
.form-btn--accent,
.form-btn--accent.wp-element-button {
  background: var(--gf-accent) !important;
  color: #fff !important;
}
.form-btn--accent:hover { background: var(--gf-accent-light) !important; }
.form-btn--outline,
.form-btn--outline.wp-element-button {
  background: transparent !important;
  color: var(--gf-fg) !important;
  border: 1px solid var(--gf-border) !important;
}
.form-btn--outline:hover { background: var(--gf-muted) !important; }
.is-hidden { display: none !important; }

.form-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}
.form-btn .spinner {
  animation: gf-spin 1s linear infinite;
}
@keyframes gf-spin {
  to { transform: rotate(360deg); }
}

/* --- Error Message --- */
.form-submit-error {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .875rem 1.25rem;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: var(--gf-r-lg);
  font-size: var(--gf-fs-sm);
  font-weight: 500;
}
.form-submit-error svg {
  flex-shrink: 0;
  color: #dc2626;
}

/* --- Success State --- */
.form-success { text-align: center; padding: 3rem 1rem; }
.form-success-icon { color: var(--gf-success); margin-bottom: 1rem; }
.form-success h2 { color: var(--gf-fg); margin-bottom: .5rem; }
.form-success p { color: var(--gf-muted-fg); }
.form-tracking-box {
  margin-top: 2rem;
  padding: 1.25rem;
  background-color: rgba(245,245,247,.5);
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-xl);
}
.form-tracking-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--gf-fs-sm);
  color: var(--gf-muted-fg);
}
.form-tracking-id {
  margin-top: 0.5rem;
  font-size: var(--gf-fs-2xl);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gf-primary);
}
.form-tracking-hint {
  margin-top: 0.5rem;
  font-size: var(--gf-fs-xs);
  color: var(--gf-muted-fg);
}
.form-success .form-btn { margin-top: 2rem; }


/* ==========================================================================
   21. Gutachten-Tracking Page
   ========================================================================== */

.tracking-page-section {
  background: var(--gf-muted);
  padding: 6rem 1rem 3rem;
  min-height: 80vh;
}
@media (min-width: 640px) { .tracking-page-section { padding: 8rem 1rem 4rem; } }

.tracking-page-inner {
  max-width: 42rem;
  margin: 0 auto;
}

/* --- Header --- */
.tracking-page-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.tracking-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(178,58,58,.1);
  color: var(--gf-accent);
  margin-bottom: 1rem;
}
.tracking-page-header h1 {
  font-size: var(--gf-fs-3xl);
  color: var(--gf-primary);
  margin-bottom: .75rem;
}
@media (min-width: 768px) { .tracking-page-header h1 { font-size: var(--gf-fs-4xl); } }
.tracking-page-header p {
  color: var(--gf-muted-fg);
}

/* --- Login Card --- */
.tracking-login-card {
  background: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-xl);
  padding: 1.5rem;
  box-shadow: var(--gf-shadow-sm);
}
@media (min-width: 640px) { .tracking-login-card { padding: 2rem; } }

.tracking-field {
  margin-bottom: 1.5rem;
}
.tracking-field label {
  display: block;
  font-size: var(--gf-fs-sm);
  font-weight: 500;
  color: var(--gf-fg);
  margin-bottom: .5rem;
}
.tracking-field input {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-lg);
  font-size: var(--gf-fs-sm);
  font-family: var(--gf-font);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  background: #fff;
  box-sizing: border-box;
}
.tracking-field input::placeholder { color: rgba(107,114,128,.5); }
.tracking-field input:focus { border-color: var(--gf-accent); box-shadow: 0 0 0 3px rgba(178,58,58,.15); }
.tracking-field input.has-error { border-color: var(--gf-error); }

.tracking-submit-btn,
.tracking-submit-btn.wp-element-button {
  display: block !important;
  width: 100% !important;
  padding: .875rem 1.5rem !important;
  background: var(--gf-accent) !important;
  color: #fff !important;
  font-size: var(--gf-fs-sm) !important;
  font-weight: 600;
  font-family: var(--gf-font);
  border: none !important;
  border-radius: var(--gf-r-lg) !important;
  cursor: pointer;
  transition: background .2s;
}
.tracking-submit-btn:hover { background: var(--gf-accent-light) !important; }

/* --- Back Button --- */
.tracking-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--gf-fs-sm);
  font-weight: 500;
  color: var(--gf-muted-fg);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1.5rem;
  transition: color .2s;
  font-family: var(--gf-font);
}
.tracking-back-btn:hover { color: var(--gf-fg); }

/* --- Info Card --- */
.tracking-info-card {
  background: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-xl);
  padding: 1.5rem;
  box-shadow: var(--gf-shadow-sm);
  margin-bottom: 1.5rem;
}
.tracking-info-card h3 {
  font-size: var(--gf-fs-lg);
  font-weight: 600;
  color: var(--gf-primary);
  margin-bottom: 1rem;
}
.tracking-details-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) { .tracking-details-grid { grid-template-columns: repeat(3, 1fr); } }
.tracking-details-grid dt {
  font-size: var(--gf-fs-sm);
  color: var(--gf-muted-fg);
}
.tracking-details-grid dd {
  margin: .25rem 0 0;
  font-size: var(--gf-fs-sm);
  font-weight: 600;
  color: var(--gf-fg);
}

/* --- Timeline Card --- */
.tracking-timeline-card {
  background: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-r-xl);
  padding: 1.5rem;
  box-shadow: var(--gf-shadow-sm);
}
@media (min-width: 640px) { .tracking-timeline-card { padding: 2rem; } }
.tracking-timeline-card h3 {
  font-size: var(--gf-fs-lg);
  font-weight: 600;
  color: var(--gf-primary);
  margin-bottom: 2rem;
}

/* --- Timeline Steps --- */
.timeline-step {
  position: relative;
  display: flex;
  gap: 1rem;
  padding-bottom: 2rem;
}
.timeline-step:last-child { padding-bottom: 0; }

.timeline-line {
  position: absolute;
  left: 15px;
  top: 2rem;
  bottom: 0;
  width: 2px;
  background: var(--gf-border);
}
.timeline-step.is-completed .timeline-line { background: var(--gf-accent); }

.timeline-circle {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
}

/* Completed circle */
.timeline-step.is-completed .timeline-circle {
  background: var(--gf-accent);
  color: #fff;
}

/* Current circle */
.timeline-step.is-current .timeline-circle {
  border: 2px solid var(--gf-accent);
  background: rgba(178,58,58,.1);
}
.timeline-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  background: rgba(178,58,58,.15);
  animation: timeline-pulse-anim 2s ease-in-out infinite;
}
@keyframes timeline-pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.3); }
}
.timeline-dot {
  width: .75rem;
  height: .75rem;
  border-radius: 9999px;
  background: var(--gf-accent);
  position: relative;
  z-index: 1;
}

/* Future circle */
.timeline-step.is-future .timeline-circle {
  border: 2px solid var(--gf-border);
  background: var(--gf-muted);
}
.timeline-dot-inactive {
  width: .625rem;
  height: .625rem;
  border-radius: 9999px;
  background: var(--gf-border);
}

/* Timeline content */
.timeline-content { padding-top: .25rem; }
.timeline-label {
  font-size: var(--gf-fs-sm);
  font-weight: 600;
}
.timeline-step.is-completed .timeline-label { color: var(--gf-fg); }
.timeline-step.is-current .timeline-label { color: var(--gf-accent); }
.timeline-step.is-future .timeline-label { color: var(--gf-muted-fg); }

.timeline-date {
  font-size: var(--gf-fs-xs);
  color: var(--gf-muted-fg);
  margin-top: .125rem;
}
.timeline-date--accent { color: var(--gf-accent); }
.timeline-date--faded { opacity: .5; }


/* ==========================================================================
   22. Kostenvoranschlag Page - Decision Panels
   ========================================================================== */

.decision-panels {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .decision-panels { grid-template-columns: 1fr 1fr; }
}

.decision-panel {
  border-radius: var(--gf-r-2xl);
  background: var(--gf-muted);
  padding: 2rem;
  box-shadow: var(--gf-shadow-sm);
}
@media (min-width: 1024px) {
  .decision-panel { padding: 2.5rem; }
}

.decision-panel h2 {
  font-size: var(--gf-fs-2xl);
  font-weight: 700;
  color: var(--gf-primary);
  margin: 0 0 1.5rem 0;
}

.decision-panel-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--gf-r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.decision-panel-icon--green { background: #dcfce7; color: #16a34a; }
.decision-panel-icon--amber { background: #fef3c7; color: #d97706; }

.decision-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.decision-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.decision-list li svg { flex-shrink: 0; margin-top: 2px; }
.decision-list li span {
  color: var(--gf-muted-fg);
  font-size: var(--gf-fs-base);
  line-height: 1.6;
}

.icon-green { color: #16a34a; }
.icon-amber { color: #d97706; }

.decision-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2rem;
  font-size: var(--gf-fs-sm);
  font-weight: 600;
  color: var(--gf-primary);
  text-decoration: none;
  transition: color .2s ease;
}
.decision-link:hover { color: var(--gf-accent); }


/* ==========================================================================
   23. Kostenvoranschlag Page - Content Cards
   ========================================================================== */

.content-cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media (min-width: 640px) {
  .content-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .content-cards--3col { grid-template-columns: repeat(3, 1fr); }
}

.content-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: var(--gf-r-2xl);
  border: 1px solid var(--gf-border);
  background: #fff;
  padding: 1.5rem;
  box-shadow: var(--gf-shadow-sm);
}

.content-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gf-r-lg);
  background: rgba(18, 45, 75, .1);
  color: var(--gf-primary);
}

.content-card h3 {
  font-size: var(--gf-fs-base);
  font-weight: 700;
  color: var(--gf-fg);
  margin: 0;
}
.content-card p {
  font-size: var(--gf-fs-sm);
  line-height: 1.6;
  color: var(--gf-muted-fg);
  margin: .25rem 0 0;
}


/* ==========================================================================
   24. Kostenvoranschlag Page - Feature Cards 4-col
   ========================================================================== */

.feature-cards--4col {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 3.5rem;
}
@media (min-width: 640px) {
  .feature-cards--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .feature-cards--4col { grid-template-columns: repeat(4, 1fr); }
}

.feature-cards--4col .feature-card {
  border-radius: var(--gf-r-2xl);
  background: var(--gf-muted);
  padding: 1.5rem;
  box-shadow: var(--gf-shadow-sm);
}

.feature-card-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gf-r-xl);
  background: rgba(18, 45, 75, .1);
  color: var(--gf-primary);
  margin-bottom: 1rem;
}