/* ============================
   CSS Variables & Reset
============================ */
:root {
  --red: #C0152A;
  --red-dark: #960018;
  --black: #111111;
  --dark: #1a1a1a;
  --mid: #475569;
  --text: #1E293B;
  --muted: #64748B;
  --light-bg: #F8FAFC;
  --white: #ffffff;
  --border: #E2E8F0;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-hover: 0 10px 30px rgba(0,0,0,0.15);
  --radius: 6px;
  --nav-height: 70px;
  --font-display: 'League Gothic', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Screen-reader only — visually hidden but accessible */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Skip navigation link */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 16px;
  z-index: 9999;
  background: var(--red);
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }

/* Global focus states — keyboard users */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Remove default focus for mouse users */
:focus:not(:focus-visible) { outline: none; }
html { scroll-behavior: smooth; background: var(--black); }

body {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.65;
  background: var(--white);
  padding-top: var(--nav-height);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ============================
   CONTAINER
============================ */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ============================
   HEADER & NAVIGATION
============================ */
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  background: var(--black);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

nav ul {
  list-style: none;
  display: flex;
  gap: clamp(14px, 2vw, 32px);
  align-items: center;
}

nav ul li a {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  display: inline-block;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s;
}

nav ul li a:hover,
nav ul li a.active {
  color: #fff;
  border-bottom-color: var(--red);
}

/* ============================
   LOGO
============================ */
.logo-small {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.logo-small span {
  background: var(--red);
  padding: 2px 8px 4px;
  color: #fff;
  border-radius: 3px;
}
.logo-small:hover { opacity: 0.9; }

/* ============================
   MOBILE MENU TOGGLE
============================ */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  color: #fff;
  cursor: pointer;
  padding: 8px 12px;
  line-height: 1;
  flex-shrink: 0;
}

/* ============================
   LANGUAGE SWITCHER (DE / EN)
============================ */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 7px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  min-height: 34px;
  line-height: 1;
}
.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}
.lang-toggle .lang-flag { font-size: 1rem; line-height: 1; }
.lang-toggle svg { opacity: 0.65; transition: transform 0.2s ease; }
.lang-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--black);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  padding: 6px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
  z-index: 1000;
}
.lang-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0s;
}
.lang-menu li { display: block; }
.lang-menu li a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-menu li a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.lang-menu li[aria-selected="true"] a { color: #fff; background: rgba(192,21,42,0.15); }
@media (max-width: 768px) {
  /* Mobile: skip the dropdown entirely. Show DE / EN as two pill buttons
     side by side inside the nav drawer — one tap to switch, current
     language highlighted in red. */
  .lang-switch {
    margin: 8px 0 0;
    padding: 14px 24px 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: none !important;
    display: block;
  }
  .lang-toggle { display: none !important; }
  .lang-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: flex !important;
    gap: 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    width: 100%;
  }
  .lang-menu li { display: block; flex: 1 1 0; }
  .lang-menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 14px;
    border: 1.5px solid rgba(255,255,255,0.20);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    min-height: 48px;
    text-align: center;
  }
  .lang-menu li[aria-selected="true"] a {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    box-shadow: 0 4px 12px rgba(192,21,42,0.35);
  }
  .lang-menu li a:active { transform: scale(0.97); }
}

/* ============================
   BUTTONS
============================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(
    135deg,
    #8b0f1a,
    #b81f30
  );

  color: #ffffff !important;
  border: none;

  box-shadow:
    0 12px 28px rgba(139,15,26,0.28);

  text-decoration: none;
  font-weight: 700;

  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:visited {
  color: #ffffff !important;
  text-decoration: none;
}

.btn-primary:hover {
  transform: translateY(-2px);

  box-shadow:
    0 18px 36px rgba(139,15,26,0.35);

  opacity: 0.96;
}
/* ============================
   SECTIONS
============================ */
.section { padding: 90px 0; }
.section.light { background: var(--light-bg); }
.section.dark  { background: var(--dark); color: #fff; }

.section h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--red);
  margin-bottom: 12px;
  text-align: center;
}
.section.dark h2 {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.section.dark h2::after {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  margin: 14px auto 0;
  background: var(--red);
  border-radius: 999px;
}

.section-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 50px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.section.dark .section-subtitle { color: rgba(255,255,255,0.82) !important; }

/* ============================
   HERO
============================ */
.hero {
  min-height: calc(100vh - var(--nav-height));
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 60px 24px;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(150,0,24,0.14) 0%, transparent 65%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 800px; }
.hero-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  color: #fff;
  margin-bottom: 20px;
}
.hero-eyebrow span { color: var(--red); }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.92);
  margin-bottom: 16px;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.hero-services {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.08em;
  margin-bottom: 40px;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}

/* ============================
   SERVICE CARDS
============================ */
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 1099px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  /* 5 cards in 2 cols → last orphan spans full row to avoid half-width tail */
  .grid > .card:nth-child(5):last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .grid > .card:nth-child(5):last-child { grid-column: auto; }
}

/* ---- Editorial photo card ---- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s cubic-bezier(.2,.7,.2,1);
  isolation: isolate;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 8px rgba(15,23,42,0.08), 0 20px 40px rgba(15,23,42,0.12);
}
.card:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* Image area on top — fixed aspect, slideshow lives here */
.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0f172a;
  overflow: hidden;
}
.card-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.card-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.card-bg-layer.visible { opacity: 1; }
.card:hover .card-bg-layer.visible { transform: scale(1.06); }

/* Subtle bottom-edge gradient over photo for visual weight under the number */
.card-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 1;
}

/* Numeral overlay — editorial accent */
.card-num {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1;
}
.card-num::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--red);
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 4px;
}

/* Content area below image */
.card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 20px;
  flex: 1;
}
.card-content h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: 0.5px;
  line-height: 1.05;
  color: var(--text);
  margin: 0;
}
.card-content > p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--mid);
  margin: 0;
}
.card-content ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-content ul li {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--mid);
  line-height: 1.45;
  padding-left: 16px;
  position: relative;
}
.card-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}
.card-cta svg {
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card-cta svg { transform: translateX(4px); }

/* ============================
   CONTACT SECTION
============================ */
.section.contact { background: var(--light-bg); }
.contact-info { max-width: 500px; margin: 0 auto; }
.contact-info p {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: var(--text);
}
.contact-info p strong {
  min-width: 80px;
  color: var(--black);
  font-weight: 600;
  flex-shrink: 0;
}
.contact-info a { color: var(--text); transition: color 0.2s; }
.contact-info a:hover { color: var(--red); }
.contact-reassure {
  max-width: 520px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ============================
   CONTACT PAGE – kontakt.html
============================ */
.contact-page { background: var(--white); }
.contact-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: -26px auto 38px;
  max-width: 860px;
}
.contact-trust-row span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid rgba(192,21,42,0.18);
  border-radius: 999px;
  background: rgba(192,21,42,0.06);
  color: var(--red-dark);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(150,0,24,0.12);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form button { border: none; cursor: pointer; font-size: 1rem; font-family: var(--font-body); width: 100%; }
.contact-privacy-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}
.contact-details h2 { text-align: left; margin-bottom: 24px; }
.contact-next-box {
  background: var(--black);
  color: #fff;
  border-radius: 8px;
  padding: 22px 20px;
  margin-bottom: 16px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.14);
}
.contact-next-box h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.32;
  font-weight: 800;
}
.contact-next-box ol {
  list-style: none;
  counter-reset: next-step;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.contact-next-box li {
  counter-increment: next-step;
  position: relative;
  padding-left: 36px;
  color: rgba(255,255,255,0.82);
  font-size: 0.92rem;
  line-height: 1.55;
}
.contact-next-box li::before {
  content: counter(next-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
}
.contact-box {
  background: var(--light-bg);
  padding: 16px 18px;
  margin-bottom: 14px;
  border-radius: var(--radius);
  border-left: 3px solid var(--red);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-box:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.contact-box h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.contact-box p, .StarKontakt {
  color: var(--text) !important;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
}
.contact-box a { color: var(--text); transition: color 0.2s; }
.contact-box a:hover { color: var(--red); }
.contact-map iframe {
  border: 0; border-radius: var(--radius); margin-top: 16px;
  width: 100%; height: 280px; display: block;
}

/* ============================
   GALLERY / FILTER BUTTONS
============================ */
.gallery-section { background: var(--white); }
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 72px;
  padding-bottom: 28px;
  border-bottom: 1px solid #eee;
}
.filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 12px;
  flex-shrink: 0;
}
.filter-btn {
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #222;
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
  border-radius: 2px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  font-family: var(--font-body);
  line-height: 1.4;
}
.filter-btn:hover { border-color: var(--red); color: var(--red); }
.filter-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.filter-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .filter-btn { transition: none; }
}

/* ============================
   IMPRESSUM
============================ */
.impressum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 44px;
}
.impressum-block {
  background: var(--light-bg);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.impressum-block h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  color: var(--text);
  margin-bottom: 12px;
}
.impressum-block p { font-size: 0.93rem; color: var(--mid); line-height: 1.75; text-align: left; }
.impressum-block strong { color: var(--text); }
.impressum-list { margin: 8px 0 10px 20px; font-size: 0.92rem; line-height: 1.7; color: var(--mid); }
.impressum-list li { margin-bottom: 2px; }
.impressum-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(192,21,42,0.08);
  color: var(--text);
  padding: 1px 6px;
  border-radius: 4px;
}
.impressum-contact {
  background: var(--black);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.impressum-contact h3 { font-family: var(--font-display); font-size: 1.2rem; color: #fff; margin-bottom: 12px; }
.impressum-contact p { font-size: 0.93rem; color: rgba(255,255,255,0.7); line-height: 1.9; text-align: left; }
.impressum-contact a { color: rgba(255,255,255,0.85); transition: color 0.2s; }
.impressum-contact a:hover { color: var(--red); }

/* ============================
   SUCCESS PAGE
============================ */
.success-section {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--nav-height) - 80px);
  text-align: center; padding: 60px 24px;
}
.success-box { max-width: 480px; }
.success-box .checkmark {
  width: 72px; height: 72px; background: var(--red); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px; font-size: 32px; color: #fff;
}
.success-box h2 { font-family: var(--font-display); font-size: 2.4rem; color: var(--text); margin-bottom: 12px; }
.success-box p { color: var(--muted); margin-bottom: 32px; font-size: 1.05rem; }

/* ============================
   STICKY CTA BANNER
============================ */
.sticky-cta {
  position: fixed;
  bottom: -90px;
  left: 0; right: 0;
  z-index: 800;
  background: var(--black);
  border-top: 2px solid var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 24px;
  padding-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  transition: bottom 0.35s ease;
  flex-wrap: wrap;
}
.sticky-cta.visible { bottom: 0; }
.sticky-cta-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.02em;
}
.sticky-cta-btn { padding: 10px 24px; font-size: 0.88rem; flex-shrink: 0; }
.sticky-cta-call {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.88rem; font-weight: 600;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 9px 18px; border-radius: var(--radius);
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.sticky-cta-call:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.sticky-cta-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.4); font-size: 1.4rem; line-height: 1;
  padding: 4px 8px; transition: color 0.2s; flex-shrink: 0;
}
.sticky-cta-close:hover { color: #fff; }
@media (max-width: 600px) {
  .sticky-cta-text { display: none; }
  .sticky-cta { gap: 8px; padding: 10px 12px; padding-bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px)); flex-wrap: nowrap; }
  .sticky-cta-btn { flex: 1; min-width: 0; text-align: center; padding: 11px 14px; }
  .sticky-cta-call { flex-shrink: 0; padding: 10px 14px; font-size: 0.85rem; }
  .sticky-cta-close { font-size: 1.6rem; padding: 6px 10px; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
}

/* ============================
   HERO CALL BUTTON
============================ */
.hero-cta-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.hero-reassure {
  margin: 18px auto 0;
  max-width: 720px;
  color: rgba(255,255,255,0.82);
  font-size: 0.9rem;
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.hero-proof-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 0;
  max-width: 820px;
}
.hero-proof-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(0,0,0,0.24);
  color: rgba(255,255,255,0.9);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  backdrop-filter: blur(8px);
}
.btn-hero-call {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
  padding: 11px 26px; border-radius: var(--radius);
  font-weight: 600; font-size: 0.95rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-hero-call:hover {
  border-color: rgba(255,255,255,0.7);
  color: #fff;
  background: rgba(255,255,255,0.06);
}
@media (max-width: 480px) {
  /* Keep hero buttons side-by-side, each taking equal space */
  .hero-cta-row { flex-direction: row; gap: 10px; flex-wrap: nowrap; }
  .hero-cta-row .btn-primary { display: inline-flex; align-items: center; justify-content: center; width: auto; flex: 1; min-width: 0; padding: 12px 10px; font-size: clamp(0.76rem, 3.2vw, 0.88rem); text-wrap: balance; hyphens: auto; }
  .btn-hero-call { flex: 1; min-width: 0; justify-content: center; font-size: clamp(0.76rem, 3.2vw, 0.88rem); padding: 11px 10px; text-wrap: balance; hyphens: auto; }
  .hero-cta-row .btn-outline { flex: 1; min-width: 0; height: auto; padding: 11px 10px; font-size: clamp(0.76rem, 3.2vw, 0.88rem); }
  .hero-proof-row { gap: 7px; }
  .hero-proof-row span { width: 100%; justify-content: center; border-radius: 6px; }
}

/* ============================
   CITY LANDING PAGES
============================ */
.city-hero { padding: 96px 0 56px; background: #f6f3ee; }
.city-hero-inner { max-width: 780px; }
.city-breadcrumb { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6e6a64; margin-bottom: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.city-breadcrumb a { color: #6e6a64; text-decoration: none; }
.city-breadcrumb a:hover { color: #c0152a; }
.city-eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #c0152a; margin-bottom: 10px; }
.city-eyebrow span { color: #181818; }
.city-hero h1 { font-family: var(--font-body); font-size: clamp(1.9rem, 4.5vw, 3.2rem); line-height: 1.16; text-transform: none; margin: 0 0 20px; color: #181818; font-weight: 800; letter-spacing: 0; text-wrap: balance; }
.city-hero-sub { font-size: 1rem; font-weight: 700; color: #6e6a64; margin: 0 0 10px; letter-spacing: .04em; }
.city-hero-desc { font-size: 1.05rem; line-height: 1.6; color: #3d3a36; max-width: 680px; margin: 0 0 32px; }

/* City services grid */
.city-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.city-service-card { background: #fff; border: 1px solid rgba(24,24,24,.1); border-radius: 8px; padding: 24px; line-height: 1.6; }
.city-service-card h3 { font-size: 1.05rem; margin: 10px 0 8px; color: #181818; }
.city-service-card p { color: #4a4640; font-size: .94rem; line-height: 1.6; margin: 0 0 14px; }
.city-service-icon { font-size: 1.8rem; line-height: 1; }
.card-ref-link { font-size: .86rem; font-weight: 700; color: #c0152a; text-decoration: none; }
.card-ref-link:hover { text-decoration: underline; }

/* Why grid */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 32px; }
.why-item { border-left: 3px solid #c0152a; padding-left: 20px; }
.why-num { font-family: var(--font-display); font-size: 2rem; color: rgba(255,255,255,.2); line-height: 1; margin-bottom: 6px; }
.why-item h3 { font-size: 1.05rem; color: #fff; margin: 0 0 8px; }
.why-item p { color: rgba(255,255,255,.7); font-size: .94rem; line-height: 1.6; margin: 0; }

/* Kosten guide cards */
.kosten-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; }
.kosten-card { background: #fff; border: 1px solid rgba(24,24,24,.1); border-radius: 8px; padding: 24px; line-height: 1.6; }
.kosten-card h3, .kosten-card h4 { font-size: 1rem; color: #181818; margin: 0 0 6px; font-weight: 800; }
.kosten-price { font-family: var(--font-display); font-size: 1.7rem; color: #c0152a; line-height: 1; margin: 0 0 6px; }
.kosten-card p { color: #4a4640; font-size: .88rem; line-height: 1.6; margin: 0; }

/* Förderung box */
.foerder-box { background: #181818; color: #fff; border-radius: 8px; padding: 28px 32px; margin-top: 28px; line-height: 1.6; }
.foerder-box h3 { font-size: 1.1rem; color: #fff; margin: 0 0 14px; }
.foerder-row { display: flex; gap: 28px; flex-wrap: wrap; }
.foerder-item { flex: 1; min-width: 200px; }
.foerder-percent { font-family: var(--font-display); font-size: 2.4rem; color: #c0152a; line-height: 1; margin-bottom: 4px; }
.foerder-item p { color: rgba(255,255,255,.75); font-size: .9rem; margin: 0; line-height: 1.6; }

/* GEG requirements list */
.geg-list { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.geg-list li { background: #fff; border-left: 4px solid #c0152a; border-radius: 4px; padding: 14px 16px; color: #3d3a36; font-size: .94rem; line-height: 1.6; }
.geg-list li strong { display: block; color: #181818; margin-bottom: 2px; }

/* Checklist box */
.checklist-box { background: #f0ece6; border: 2px solid #c0152a; border-radius: 8px; padding: 28px 32px; margin: 28px 0; line-height: 1.6; }
.checklist-box h3 { font-size: 1.1rem; color: #181818; margin: 0 0 16px; }
.checklist-box ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.checklist-box ul li { color: #3d3a36; font-size: .94rem; line-height: 1.6; padding-left: 22px; position: relative; }
.checklist-box ul li::before { content: "✓"; position: absolute; left: 0; color: #c0152a; font-weight: 800; }

/* btn-hero-call on light city hero background */
.city-hero .btn-hero-call {
  border-color: rgba(24,24,24,.25);
  color: #181818;
}
.city-hero .btn-hero-call:hover {
  border-color: #181818;
  color: #181818;
  background: rgba(24,24,24,.06);
}

/* Deadline banner */
.deadline-banner { background: #fff; color: #222; border:2px solid #c0152a; padding: 20px 24px; margin: 28px 0; line-height: 1.6;  }
.deadline-banner strong { font-size: 1.05rem; display: block; margin-bottom: 4px; }
.deadline-banner p { margin: 0; font-size: .93rem; opacity: .92; }

@media (max-width: 900px) {
  .city-services-grid, .kosten-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
  .geg-list, .checklist-box ul { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .city-hero { padding: 60px 0 40px; }
  .city-services-grid, .kosten-grid, .why-grid { grid-template-columns: 1fr; }
  .foerder-row { flex-direction: column; gap: 16px; }
}

/* ============================
   FOOTER
============================ */
footer {
  background: var(--black);
  color: rgba(255,255,255,0.75);
  font-size: 0.875rem;
  line-height: 1.8;
}
footer a { color: rgba(255,255,255,0.75); transition: color 0.2s; }
footer a:hover { color: var(--red); }

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 52px 24px 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.footer-cities h4 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-cities ul { list-style: none; padding: 0; }
.footer-cities ul li { margin-bottom: 8px; }
.footer-cities ul li a {
  color: rgba(255,255,255,0.72);
  font-size: 0.86rem;
  transition: color 0.2s;
}
.footer-cities ul li a:hover { color: var(--red); }
.footer-logo {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  text-decoration: none;
}
.footer-logo span {
  background: var(--red);
  padding: 2px 7px 3px;
  color: #fff;
  border-radius: 3px;
}
.footer-brand p {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  max-width: 240px;
  margin-bottom: 20px;
}
.footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff !important;
  padding: 9px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.82rem;
  transition: background 0.2s, transform 0.2s;
}
.footer-wa:hover { background: #1da851 !important; transform: translateY(-1px); }
.footer-nav h4, .footer-contact h4 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-nav ul { list-style: none; padding: 0; }
.footer-nav ul li { margin-bottom: 8px; }
.footer-nav ul li a {
  color: rgba(255,255,255,0.72);
  font-size: 0.86rem;
  transition: color 0.2s;
}
.footer-nav ul li a:hover { color: var(--red); }
.footer-contact address { font-style: normal; }
.fc-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.75);
}
.fc-item a { color: rgba(255,255,255,0.85); transition: color 0.2s; }
.fc-item a:hover { color: var(--red); }
.fc-item svg { flex-shrink: 0; margin-top: 3px; opacity: 0.65; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 20px 24px 24px;
}
.footer-bottom-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.footer-copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}
.footer-copy a { color: rgba(255,255,255,0.65); transition: color 0.2s; }
.footer-copy a:hover { color: var(--red); }
.footer-keywords {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  margin-top: 10px;
  line-height: 1.65;
}

/* ============================
   Animations
============================ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.7s ease forwards;
}
.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
.fade-in:nth-child(4) { animation-delay: 0.4s; }
.fade-in:nth-child(5) { animation-delay: 0.5s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.scroll-reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================
   RESPONSIVE – Tablet ≤ 900px
============================ */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .impressum-grid { grid-template-columns: 1fr; }
}

/* ============================
   RESPONSIVE – Mobile ≤ 768px
============================ */
@media (max-width: 768px) {
  :root { --nav-height: 64px; }
  .menu-toggle { display: block; }

  nav {
    position: fixed;
    top: var(--nav-height); left: 0;
    width: 100%;
    background: var(--black);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 999;
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
  }
  nav.active {
    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  nav ul { flex-direction: column; gap: 0; padding: 6px 0 14px; }
  nav ul li { border-bottom: 1px solid rgba(255,255,255,0.06); }
  nav ul li:last-child { border-bottom: none; }
  nav ul li a {
    display: flex; align-items: center;
    padding: 15px 24px; font-size: 0.95rem;
    border-bottom: none; min-height: 50px;
    color: rgba(255,255,255,0.85);
  }
  nav ul li a:hover, nav ul li a.active {
    color: #fff; background: rgba(255,255,255,0.04); border-bottom: none;
  }

  .hero { padding: 50px 20px; min-height: calc(100svh - var(--nav-height)); }
  .hero-eyebrow { font-size: clamp(3.2rem, 16vw, 5rem); }

  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-details h2 { text-align: center; }

  .section { padding: 70px 0; }
  .section h2 { font-size: 2.2rem; }

  .btn-primary { display: block; width: 100%; text-align: center; padding: 14px 20px; border-radius: var(--radius); }
  /* Override: CTA bar buttons must stay inline */
  .sticky-cta .btn-primary { display: inline-block; width: auto; }
  /* Override: hero CTA row buttons must stay side-by-side at all widths */
  .hero-cta-row .btn-primary { display: inline-flex; align-items: center; justify-content: center; width: auto; }
  .logo-small { font-size: 21px; }

  /* On mobile, bg overlay is more opaque so text stays readable */
  .card-bg-layer::after { background: rgba(255,255,255,0.75); }
}

/* ============================
   HERO BG SLIDESHOW LAYERS
============================ */
.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  z-index: 0;
}
.hero-bg-layer.visible { opacity: 0.22; }
.hero-content { position: relative; z-index: 1; max-width: 800px; }

.hero-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}

/* ============================
   EINZUGSGEBIET / REGION GRID
============================ */
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 42px;
  counter-reset: region-card;
}
.region-group {
  counter-increment: region-card;
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-radius: 6px;
  border: 1px solid rgba(16, 16, 16, 0.08);
  padding: 22px 20px 20px;
  box-shadow: 0 10px 28px rgba(16, 16, 16, 0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.region-group::before {
  content: counter(region-card, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 24px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(192, 21, 42, 0.08);
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.region-group::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--red);
}
.region-group:hover {
  transform: translateY(-3px);
  border-color: rgba(192, 21, 42, 0.18);
  box-shadow: 0 16px 36px rgba(16, 16, 16, 0.1);
}
.region-group h3 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
.region-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.region-group ul li {
  position: relative;
  padding-left: 14px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.72;
}
.region-group ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.86em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(192, 21, 42, 0.72);
}
.region-cta {
  text-align: center;
  max-width: 660px;
  margin: 34px auto 0;
  padding: 18px 22px;
  border: 1px solid rgba(192, 21, 42, 0.14);
  border-radius: 6px;
  background: rgba(192, 21, 42, 0.045);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}
.region-cta a { color: var(--red); font-weight: 600; }
.region-cta a:hover { text-decoration: underline; }

/* ============================
   TRUST BAR
============================ */
.trust-bar-section { background: var(--black); padding: 60px 0; }
.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.trust-stat {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  padding: 16px 48px;
}
.trust-numrow {
  font-family: var(--font-display);
  font-size: 3.4rem;
  letter-spacing: 1px;
  color: var(--red);
  line-height: 1;
}
.trust-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-top: 8px;
}
.trust-divider {
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* ============================
   TESTIMONIALS
============================ */
.testimonials-section { background: var(--light-bg); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 40px;
}
.testimonial-card {
  background: var(--white);
  border-radius: 10px;
  padding: 28px 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 3px solid var(--red);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
}
.testimonial-stars {
  color: #f59e0b;
  font-size: 1.1rem;
  letter-spacing: 2px;
}
.testimonial-text {
  font-size: 0.93rem;
  color: var(--mid);
  line-height: 1.75;
  font-style: italic;
  flex: 1;
  margin: 0;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 42px; height: 42px;
  background: var(--black);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.testimonial-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.testimonial-location {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ============================
   FAQ ACCORDION
============================ */
.faq-section { background: var(--dark); }
.faq-list {
  max-width: 760px;
  margin: 40px auto 0;
}
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
.faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}
.faq-question:hover { color: #fff; }
.faq-icon {
  width: 22px; height: 22px;
  border: 2px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s, transform 0.3s;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq-icon::before { width: 10px; height: 2px; }
.faq-icon::after  { width: 2px; height: 10px; transition: opacity 0.25s; }
.faq-item.open .faq-question { color: var(--red); }
.faq-item.open .faq-icon { border-color: var(--red); transform: rotate(45deg); }
.faq-item.open .faq-icon::before,
.faq-item.open .faq-icon::after { background: var(--red); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s ease, padding 0.3s ease;
  padding: 0 4px;
}
.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 4px 20px;
}
.faq-answer p {
  font-size: 0.93rem;
  color: rgba(255,255,255,0.58);
  line-height: 1.75;
  margin: 0;
}


/* ============================
   WHATSAPP FLOATING BUTTON
============================ */
.whatsapp-fab {
  position: fixed;
  bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  right: 28px;
  z-index: 900;
  width: 56px; height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  transition: transform 0.22s ease, box-shadow 0.22s ease, bottom 0.3s ease;
}
.whatsapp-fab:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 8px 28px rgba(37,211,102,0.55);
}
/* Lift FAB above sticky CTA when banner is visible */
.whatsapp-fab.fab-lifted { bottom: 88px; }

/* ============================
   COOKIE / CONSENT BANNER
============================ */
/* Subtle backdrop scrim — focuses attention on the banner without fully blocking the page */
body.has-cookie-banner::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 100%);
  z-index: 1099;
  pointer-events: none;
  animation: cookie-scrim-in 0.35s ease-out;
}
@keyframes cookie-scrim-in { from { opacity: 0; } to { opacity: 1; } }

.cookie-banner {
  position: fixed;
  left: 16px; right: 16px;
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index: 1100;
  background: var(--black);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--red);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  padding: 18px 20px;
  max-width: 980px;
  margin: 0 auto;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  animation: cookie-slide-up 0.35s ease-out;
}
@keyframes cookie-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cookie-banner-hide { animation: cookie-slide-down 0.3s ease-in forwards; }
@keyframes cookie-slide-down {
  to { transform: translateY(20px); opacity: 0; }
}
.cookie-banner-inner {
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.cookie-text { flex: 1 1 320px; min-width: 0; }
.cookie-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  color: #fff;
  margin-bottom: 4px;
}
.cookie-text p { font-size: 0.9rem; line-height: 1.55; color: rgba(255,255,255,0.75); margin: 0; }
.cookie-text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.cookie-text a:hover,
.cookie-text a:focus-visible { color: var(--red); }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  min-height: 44px;
}
.cookie-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cookie-btn:active { transform: scale(0.97); }
.cookie-btn-primary { background: var(--red); color: #fff; }
.cookie-btn-primary:hover { background: var(--red-dark); }
.cookie-btn-secondary { background: transparent; color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.30); }
.cookie-btn-secondary:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.06); }

/* Mobile (≤600px) — vertical stack, tighter sizing */
@media (max-width: 600px) {
  .cookie-banner {
    left: 10px; right: 10px;
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    padding: 14px 16px 16px;
    border-radius: 10px;
  }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-text strong { font-size: 1rem; margin-bottom: 2px; }
  .cookie-text p { font-size: 0.82rem; line-height: 1.5; }
  .cookie-actions { flex-direction: column-reverse; gap: 8px; }
  .cookie-btn { width: 100%; padding: 11px 14px; font-size: 0.88rem; min-height: 44px; }
}

/* Landscape mobile / very short viewport — keep horizontal layout to save vertical space */
@media (max-width: 900px) and (max-height: 480px) {
  .cookie-banner { padding: 12px 14px; }
  .cookie-banner-inner {
    flex-direction: row; align-items: center; gap: 12px;
  }
  .cookie-text strong { font-size: 0.95rem; }
  .cookie-text p { font-size: 0.78rem; line-height: 1.45; }
  .cookie-actions { flex-direction: row; gap: 8px; }
  .cookie-btn { width: auto; padding: 8px 14px; font-size: 0.82rem; min-height: 40px; }
}

/* While the consent banner is visible, get every other floating UI out of the way
   so they don't stack on top of the banner. They restore as soon as the user
   accepts/declines and the banner dismisses. */
body.has-cookie-banner .whatsapp-fab,
body.has-cookie-banner .back-to-top,
body.has-cookie-banner .mobile-sticky-cta { display: none; }

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  .cookie-banner-hide,
  body.has-cookie-banner::before { animation: none; }
  .cookie-btn:active { transform: none; }
}

/* ============================
   RESPONSIVE ADDITIONS
============================ */
@media (max-width: 768px) {
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-stat { padding: 12px 24px; }
  .trust-numrow { font-size: 2.6rem; }
  .trust-divider { height: 36px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .whatsapp-fab { bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px)); right: 16px; width: 50px; height: 50px; }
  /* When CTA bar is visible, move FAB to left so it doesn't clash with Anrufen button */
  .whatsapp-fab.fab-lifted { bottom: 76px; right: auto; left: 16px; }
  /* Footer responsive */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 40px 20px 28px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 100%; }
  .footer-cities { grid-column: auto; }
}
@media (max-width: 480px) {
  .region-grid { grid-template-columns: 1fr; }
  .region-group { padding: 20px 18px 18px; }
  .region-group h3 { font-size: 1rem; }
  .trust-bar { flex-direction: column; gap: 4px; }
  .trust-divider { width: 60px; height: 1px; }
  .trust-stat { padding: 10px 16px; }
  /* Footer single column on small screens */
  .footer-inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px 20px; }
  /* Sticky CTA on small screens */
  .sticky-cta { gap: 8px; padding: 10px 14px; }
  .sticky-cta-btn { padding: 10px 20px; font-size: 0.85rem; flex: 1; text-align: center; }
  .sticky-cta-call { padding: 9px 14px; font-size: 0.85rem; }
}
@media (max-width: 360px) {
  /* On very small phones (320px): call button icon-only so "Jetzt anfragen" fits on one line */
  .sticky-cta-call { padding: 10px 12px; gap: 0; }
  .sticky-cta-call .call-label { display: none; }
}

/* ============================
   LEISTUNGEN DETAIL PAGE
============================ */
.service-subnav {
  background: var(--black);
  position: sticky;
  top: var(--nav-height);
  z-index: 500;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.service-subnav::-webkit-scrollbar { display: none; }
.service-subnav ul {
  display: flex;
  list-style: none;
  padding: 0 16px;
  margin: 0 auto;
  max-width: 1100px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.service-subnav ul::-webkit-scrollbar {
  display: none;
}
.service-subnav ul li { flex: 0 0 auto; }
.service-subnav ul li a {
  display: block;
  padding: 14px 18px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  max-width: min(78vw, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.service-subnav ul li a:hover { color: rgba(255,255,255,0.8); border-bottom-color: rgba(255,255,255,0.2); }
.service-subnav ul li a.active { color: var(--red); border-bottom-color: var(--red); }

.service-feature-link {
  border-left: 4px solid var(--red);
  background: linear-gradient(135deg, #fff 0%, #fff 58%, rgba(192,21,42,0.06) 100%);
}
.service-feature-link-cta {
  text-decoration: none;
  border-color: rgba(192,21,42,0.28) !important;
}
.service-feature-link-cta:hover {
  color: var(--red-dark);
  background: rgba(192,21,42,0.08);
}

/* Senior-friendly bathroom renovation page */
.seniorbad-hero{position:relative;overflow:hidden;background:#111;color:#fff;padding:112px 0 62px;}
.seniorbad-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(10,10,10,.84) 0%,rgba(10,10,10,.64) 48%,rgba(192,21,42,.42) 100%),url('../../gallery/boeden-fliesen/Fliesen%20%26%20Abdichtungen/IMG_9987.webp') center/cover no-repeat;z-index:0;}
.seniorbad-hero .container{position:relative;z-index:1;}
.seniorbad-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--red);padding:7px 12px;border-radius:3px;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.25;margin-bottom:16px;}
.seniorbad-hero h1{font-family:var(--font-display);font-size:clamp(2.7rem,7vw,5.2rem);line-height:.95;text-transform:uppercase;letter-spacing:.01em;margin:0 0 16px;max-width:820px;}
.seniorbad-hero h1 span{color:#ffd166;}
.seniorbad-lead{font-size:clamp(1.05rem,2.2vw,1.36rem);line-height:1.5;max-width:760px;margin:0 0 18px;color:rgba(255,255,255,.94);}
.seniorbad-proof{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;}
.seniorbad-proof span{display:inline-flex;align-items:center;min-height:36px;padding:8px 12px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);border-radius:999px;font-size:.9rem;font-weight:700;backdrop-filter:blur(5px);}
.seniorbad-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.seniorbad-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:14px 22px;border-radius:4px;font-weight:800;text-decoration:none;line-height:1.2;}
.seniorbad-btn.primary{background:var(--red);color:#fff;box-shadow:0 12px 28px rgba(192,21,42,.32);}
.seniorbad-btn.primary:hover{background:var(--red-dark);}
.seniorbad-btn.ghost{border:1px solid rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.08);}
.seniorbad-section{padding:72px 0;}
.seniorbad-section.alt{background:#f7f5f2;}
.seniorbad-kicker{color:var(--red);font-size:.78rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;margin:0 0 8px;}
.seniorbad-section h2{font-family:var(--font-display);font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1;text-transform:uppercase;margin:0 0 14px;color:var(--text);}
.seniorbad-intro{max-width:790px;font-size:1.04rem;line-height:1.72;color:var(--mid);margin:0;}
.seniorbad-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:34px;}
.seniorbad-card{background:#fff;border:1px solid var(--border);border-radius:6px;padding:22px;box-shadow:0 8px 24px rgba(15,23,42,.05);}
.seniorbad-card h3{font-size:1rem;line-height:1.35;margin:0 0 8px;color:var(--text);}
.seniorbad-card p{font-size:.94rem;line-height:1.6;color:var(--mid);margin:0;}
.seniorbad-card strong{color:var(--red-dark);}
.seniorbad-funding{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:28px;align-items:start;margin-top:30px;}
.seniorbad-funding-box{background:#111;color:#fff;border-radius:6px;padding:28px;}
.seniorbad-funding-box .amount{font-family:var(--font-display);font-size:clamp(3.3rem,8vw,5.2rem);line-height:.9;color:#ffd166;margin:0 0 8px;}
.seniorbad-funding-box p{color:rgba(255,255,255,.82);line-height:1.65;margin:0;}
.seniorbad-list{display:grid;gap:12px;margin-top:0;}
.seniorbad-list li{list-style:none;display:flex;gap:10px;align-items:flex-start;color:var(--mid);line-height:1.55;background:#fff;border:1px solid var(--border);border-radius:6px;padding:14px 16px;}
.seniorbad-check{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:.82rem;margin-top:1px;}
.seniorbad-two{display:grid;grid-template-columns:minmax(0,.95fr) minmax(280px,1.05fr);gap:34px;align-items:center;}
.seniorbad-photo{border-radius:6px;overflow:hidden;min-height:320px;background:#ddd;}
.seniorbad-photo img{width:100%;height:100%;min-height:320px;object-fit:cover;}
.seniorbad-steps{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:34px;}
.seniorbad-step{position:relative;background:#fff;border:1px solid var(--border);border-radius:6px;padding:22px 20px 20px;}
.seniorbad-step::before{counter-increment:step;content:counter(step, decimal-leading-zero);display:block;font-family:var(--font-display);font-size:2.4rem;line-height:.9;color:var(--red);margin-bottom:12px;}
.seniorbad-step h3{font-size:1rem;line-height:1.3;margin:0 0 8px;}
.seniorbad-step p{font-size:.92rem;line-height:1.58;color:var(--mid);margin:0;}
.seniorbad-seo{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.seniorbad-seo span{display:inline-flex;padding:7px 10px;border:1px solid rgba(192,21,42,.22);background:rgba(192,21,42,.06);border-radius:999px;color:var(--red-dark);font-size:.84rem;font-weight:800;line-height:1.2;}
.seniorbad-source{font-size:.86rem;color:var(--muted);line-height:1.6;margin-top:20px;}
.seniorbad-source a{color:var(--red-dark);text-decoration:underline;}
.seniorbad-final{background:var(--red);color:#fff;text-align:center;padding:62px 0;}
.seniorbad-final h2{font-family:var(--font-body);font-size:clamp(1.55rem,4vw,2.35rem);line-height:1.22;letter-spacing:0;text-transform:none;color:#fff;margin:0 auto 14px;max-width:760px;}
.seniorbad-final p{max-width:680px;margin:0 auto 26px;color:rgba(255,255,255,.92);line-height:1.65;}
.seniorbad-final .seniorbad-cta{justify-content:center;}
.seniorbad-final .seniorbad-btn.primary{background:#fff;color:var(--red);}
.seniorbad-final .seniorbad-btn.ghost{border-color:#fff;background:transparent;color:#fff;}
.mobile-sticky-cta{display:none;}
@media (max-width:860px){.seniorbad-funding,.seniorbad-two{grid-template-columns:1fr;}.seniorbad-two .seniorbad-photo{order:-1;}}
@media (max-width:768px){
  .seniorbad-hero{padding:84px 0 42px;}
  .seniorbad-section{padding:54px 0;}
  .seniorbad-cta .seniorbad-btn{width:100%;}
  .seniorbad-proof span{width:100%;justify-content:center;text-align:center;}
  .seniorbad-card,.seniorbad-funding-box,.seniorbad-step{padding:20px;}
  .mobile-sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:999;background:var(--red);color:#fff;padding:12px 14px;justify-content:center;align-items:center;gap:10px;text-decoration:none;font-weight:800;line-height:1.3;box-shadow:0 -8px 24px rgba(0,0,0,.25);font-size:15px;}
  body.has-mobile-cta{padding-bottom:64px;}
}

/* Each service section */
.leistung-section {
  padding: 84px 0;
  scroll-margin-top: calc(var(--nav-height) + 48px);
  background: var(--white);
}
.leistung-section.leistung-alt { background: var(--light-bg); }

.leistung-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.leistung-title {
  font-family: var(--font-body);
  font-size: clamp(1.7rem, 3.8vw, 2.45rem);
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.18;
  font-weight: 800;
}
.leistung-desc {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.78;
  max-width: 600px;
  margin-bottom: 40px;
}
.leistung-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}
.leistung-box {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
}
.leistung-section.leistung-alt .leistung-box { background: var(--white); }
.leistung-box.accent { border-left: 3px solid var(--red); }
.leistung-box h4 {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.32;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
  font-weight: 800;
}
.leistung-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.leistung-box ul li {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.6;
  padding: 8px 0 8px 26px;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.leistung-box ul li:last-child { border-bottom: none; }
.leistung-box ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 15px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
}
.leistung-box ul li.check-item { color: var(--text); }
.leistung-box ul li.check-item::before {
  content: '✓';
  background: none;
  color: #16a34a;
  font-weight: 700;
  font-size: 0.9rem;
  top: 8px;
  width: auto; height: auto;
}

/* Meta chips (Förderung, Zeitrahmen) */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1.5px solid;
}
.meta-chip.foerder {
  background: rgba(150,0,24,0.06);
  border-color: rgba(150,0,24,0.22);
  color: var(--red);
}
.meta-chip.zeit {
  background: rgba(17,17,17,0.04);
  border-color: rgba(17,17,17,0.13);
  color: var(--mid);
}

/* Process steps */
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 46px;
  counter-reset: process-step;
}
.process-step {
  counter-increment: process-step;
  position: relative;
  min-width: 0;
  padding: 24px 20px 24px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  box-shadow: 0 16px 38px rgba(0,0,0,0.16);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.process-step::before {
  content: "";
  position: absolute;
  top: 36px;
  left: calc(100% - 8px);
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, rgba(192,21,42,0.7), rgba(255,255,255,0.12));
  pointer-events: none;
}
.process-step:last-child::before { display: none; }
.process-step:hover {
  transform: translateY(-3px);
  border-color: rgba(192,21,42,0.38);
  background: rgba(255,255,255,0.075);
}
.process-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 30px;
  border-radius: 999px;
  background: rgba(192,21,42,0.16);
  border: 1px solid rgba(192,21,42,0.34);
  color: #ff6b7c;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 18px;
}
.process-step h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.28;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
  margin: 0 0 9px;
  overflow-wrap: anywhere;
}
.process-step p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.58);
  line-height: 1.68;
  margin: 0;
}

/* Responsive */
@media (max-width: 980px) {
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-step::before { display: none; }
}
@media (max-width: 768px) {
  .leistung-body { grid-template-columns: 1fr; gap: 16px; }
  .leistung-section { padding: 60px 0; }
  .service-subnav ul { margin: 0; max-width: none; padding: 0 14px; }
  .service-subnav ul li a { padding: 12px 12px; font-size: 0.72rem; }
  .leistung-title { margin-bottom: 12px; }
}
@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
  .process-step { padding: 20px 18px; }
  .process-step h4 { font-size: 0.98rem; }
  .leistung-section { padding: 48px 0; }
  .leistung-box { padding: 22px 18px; }
}

/* ============================
   LEISTUNGEN CARD GRID (desktop 2-col)
============================ */
.leistungen-overview {
  background: var(--light-bg);
  padding: 72px 0 80px;
}

.leistungen-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.leistung-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 44px 40px;
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--nav-height) + 56px);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.leistung-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Inner boxes always stacked (1-col) inside a card */
.leistung-card .leistung-body {
  grid-template-columns: 1fr;
  gap: 16px;
  flex: 1;
}

/* Title scaled down to fit the narrower card column */
.leistung-card .leistung-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 10px;
}

/* Meta chips pushed to the bottom of each card */
.leistung-card .meta-row {
  margin-top: auto;
  padding-top: 24px;
}

/* ---- Mobile: dissolve cards back to full-width section look ---- */
@media (max-width: 768px) {
  .leistungen-overview {
    background: var(--white);
    padding: 0;
  }
  .leistungen-cards-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .leistung-card {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    padding: 60px 24px;
    transform: none;
  }
  .leistung-card:hover {
    box-shadow: none;
    transform: none;
  }
  .leistung-card:nth-child(even) { background: var(--light-bg); }
  .leistung-card:last-child { border-bottom: none; }
  .leistung-card .leistung-title { font-size: clamp(1.45rem, 6vw, 2rem); line-height: 1.2; }
  .leistung-card .meta-row { padding-top: 20px; }
}
@media (max-width: 480px) {
  .leistung-card { padding: 48px 20px; }
}

/* ============================
   REDUCED MOTION
============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-bg-layer { transition: none; }
  .card-bg-layer { transition: none; }
  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .fade-in {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* =============================================================
   MOBILE SAFETY LAYER (2026) — fluid type, wrap-safe controls
   Prevents German-compound overflow on buttons/headlines.
============================================================= */
:root {
  --fs-btn: clamp(0.82rem, 0.78rem + 0.3vw, 0.95rem);
  --fs-h2:  clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  --gutter: clamp(16px, 4vw, 24px);
}

html, body { overflow-x: clip; }

/* Every interactive text-bearing control wraps safely */
a.btn-primary, a.btn-outline, .btn-hero-call,
.sticky-cta-btn, .sticky-cta-call,
.filter-btn, .meta-chip, .mobile-sticky-cta,
.footer-wa, .city-cta-btn {
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}

/* Long German compounds: allow break points in headings */
h1, h2, h3, h4,
.leistung-title, .city-service-card h3, .card h3,
.hero h1, .section h2 {
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

/* Fluid container padding on the smallest screens */
@media (max-width: 480px) {
  .container { padding-inline: var(--gutter); }
}

/* Touch-target floor (WCAG 2.5.5) */
@media (pointer: coarse) {
  a.btn-primary, a.btn-outline, .filter-btn,
  .sticky-cta-close, .sticky-cta-call, .faq-question {
    min-height: 44px;
  }
}

/* Sticky CTA: collapse secondary labels early to avoid clipping at 320–420px */
@media (max-width: 420px) {
  .sticky-cta-call .call-label { display: none; }
  .sticky-cta-btn  { font-size: clamp(0.78rem, 3.6vw, 0.88rem); padding: 11px 10px; }
  .sticky-cta-call { padding: 10px 12px; }
}

/* Lightbox project name: never overflow the viewport */
.lightbox-project-name {
  max-width: min(92vw, 640px);
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
  font-size: clamp(1rem, 4vw, 1.35rem);
}

/* Contact info rows: email/phone strings must wrap */
.contact-info p { flex-wrap: wrap; }
.contact-info a, .contact-info p { overflow-wrap: anywhere; min-width: 0; }
.contact-form input, .contact-form textarea { max-width: 100%; }

/* Filter buttons: fluid sizing on narrow screens */
.filter-btn {
  padding-inline: clamp(10px, 3vw, 18px);
  font-size: clamp(0.72rem, 2.6vw, 0.82rem);
}

/* Service subnav: scroll-snap + fade hint */
@supports (mask-image: linear-gradient(90deg, #000, transparent)) {
  .service-subnav ul {
    scroll-snap-type: x mandatory;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .service-subnav li { scroll-snap-align: start; }
}

/* Replace max-height accordion hacks with grid-row animation */
@supports (grid-template-rows: 0fr) {
  .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    max-height: none;
    transition: grid-template-rows 0.38s ease, padding 0.2s;
  }
  .faq-answer > * { min-height: 0; }
  .faq-item.open .faq-answer { grid-template-rows: 1fr; }
}

/* Footer grid: 3-column at tablet so 4-col doesn't squeeze */
@media (max-width: 1060px) and (min-width: 769px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
}
/* Footer grid: 2-column at narrow tablet */
@media (max-width: 900px) and (min-width: 769px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* =========================================
   BACK-TO-TOP BUTTON (global)
========================================= */
.back-to-top {
  position: fixed;
  right: 28px; /* aligned with WhatsApp FAB right edge */
  bottom: 96px; /* sits above WhatsApp FAB (56px + 28px + 12px gap) */
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--black, #111);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s;
  z-index: 850; /* below WhatsApp FAB (900), above sticky-cta (800) */
}
.back-to-top.is-visible {
  opacity: 0.92;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible { opacity: 1; background: var(--red, #C0152A); }
.back-to-top:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity .15s, visibility .15s; transform: none; }
}
/* On pages without WhatsApp FAB, sit lower */
body:not(:has(.whatsapp-fab)) .back-to-top { bottom: 28px; }

/* When sticky CTA banner is visible, WhatsApp FAB lifts — move back-to-top up too */
body:has(.whatsapp-fab.fab-lifted) .back-to-top { bottom: 156px; }

/* Mobile: smaller FAB (50×50), tighter spacing, FAB jumps to left when CTA visible */
@media (max-width: 768px) {
  .back-to-top { right: 16px; bottom: 84px; width: 42px; height: 42px; }
  body:has(.whatsapp-fab.fab-lifted) .back-to-top { bottom: 140px; right: 16px; }
}

/* Mobile sticky CTA on sanierung page: wrap-safe */
.mobile-sticky-cta {
  flex-wrap: wrap;
  text-align: center;
  font-size: clamp(13px, 3.8vw, 15px);
  padding-inline: clamp(10px, 3vw, 14px);
}

/* ============================
   RATGEBER (BLOG) — index + articles
   These styles were previously inlined in each ratgeber/*.html page; moved
   here so the i18n refactor (which strips inline <style> in head) doesn't
   render the pages unstyled.
============================ */
/* ============================
   RATGEBER (BLOG) — IMPROVED VISIBILITY + MOBILE
============================ */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.12);
  border-color: rgba(192,21,42,0.16);
}

.blog-card .bc-tag {
  display: inline-block;
  background: rgba(192,21,42,0.10);
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  align-self: flex-start;
}

.blog-card h3 {
  font-family: var(--font-body);
  font-size: 1.18rem;
  line-height: 1.42;
  letter-spacing: 0;

  color: #0f172a; /* much darker */

  font-weight: 800;

  margin-bottom: 14px;

  text-wrap: balance;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.35);
}
.blog-card:hover h3 {
  color: #000000;
}

.blog-card p {
  color: #334155;
  font-size: 1rem;
  line-height: 1.78;
  margin-bottom: 22px;
}

.bc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: #475569;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(15,23,42,0.08);
}

.bc-read {
  color: var(--red);
  font-weight: 700;
}

/* Better section readability */

.section-subtitle {
  text-align: center;
  color: #475569;
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 50px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.section-subtitle a {
  color: var(--red);
  font-weight: 600;
}

.section h2 {
  line-height: 1.08;
  text-wrap: balance;
}

/* ============================
   TABLET
============================ */

@media (max-width: 900px) {

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .blog-card {
    padding: 28px 24px;
  }

  .blog-card h3 {
    font-size: 1.14rem;
    line-height: 1.42;
  }

  .blog-card p {
    font-size: 0.98rem;
  }
}

/* ============================
   MOBILE
============================ */

@media (max-width: 768px) {

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 28px;
  }

  .blog-card {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .blog-card h3 {
    font-size: 1.08rem;
    line-height: 1.42;
  }

  .blog-card p {
    font-size: 0.96rem;
    line-height: 1.72;
  }

  .bc-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.8rem;
  }

  .section h2 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    padding-inline: 6px;
  }

  .section-subtitle {
    font-size: 1rem;
    padding-inline: 4px;
    margin-bottom: 36px;
  }
}

/* ============================
   EXTRA SMALL DEVICES
============================ */

@media (max-width: 420px) {

  .blog-card {
    padding: 20px 18px;
  }

.blog-card h3 {
  font-size: 1.04rem;
  line-height: 1.42;
  font-weight: 800;
}
  .blog-card p {
    font-size: 0.93rem;
  }

  .blog-card .bc-tag {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
  }
}

/* ── Article-page content ─────────────────────────────────────────── */
.article-body {
  max-width: 740px;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text);
}
.article-back {
  margin: 0 0 18px;
  font-size: 0.88rem;
  font-weight: 700;
}
.article-back a {
  color: var(--red);
  text-decoration: none;
}
.article-back a:hover {
  color: var(--red-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body h1 {
  font-family: var(--font-body);
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  line-height: 1.22;
  color: var(--text);
  margin-bottom: 14px;
  font-weight: 800;
  letter-spacing: 0;
}
.article-body h2 {
  font-family: var(--font-body);
  font-size: 1.35rem;
  line-height: 1.32;
  color: var(--text);
  margin: 36px 0 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-weight: 800;
  letter-spacing: 0;
}
.article-body h3 {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--text);
  margin: 24px 0 10px;
  font-weight: 800;
  letter-spacing: 0;
}
.article-body p {
  margin-bottom: 16px;
  color: var(--mid);
}
.article-body ul, .article-body ol {
  margin: 12px 0 18px 22px;
  color: var(--mid);
}
.article-body li { margin-bottom: 6px; }
.article-body strong { color: var(--text); }
.article-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--red-dark); }
.article-body a.btn-primary,
.article-body a.btn-primary:visited,
.article-body a.btn-primary:hover,
.article-body a.btn-primary:focus-visible {
  color: #fff;
  text-decoration: none;
}
.article-body blockquote {
  border-left: 3px solid var(--red);
  padding: 8px 16px;
  margin: 18px 0;
  background: var(--light-bg);
  font-style: italic;
  color: var(--text);
  border-radius: 0 6px 6px 0;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.article-meta strong { color: var(--red); }

/* ── Price table inside articles (e.g. WDVS-Kosten) ─────────────── */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 26px;
  font-size: 0.94rem;
}
.price-table th, .price-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.price-table th {
  background: var(--light-bg);
  font-weight: 700;
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.price-table td { color: var(--mid); }
.price-table tr:hover td { background: var(--light-bg); }

/* ── Checklist block (e.g. altbau article) ───────────────────────── */
.checklist-block {
  background: var(--light-bg);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 22px 0;
}
.checklist-block h3 {
  margin-top: 0 !important;
  font-size: 1.05rem !important;
  border-top: none !important;
  padding-top: 0 !important;
}
.checklist-block ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.checklist-block li {
  padding: 6px 0 6px 26px;
  position: relative;
  font-size: 0.94rem;
  color: var(--mid);
}
.checklist-block li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}

/* ── Article CTA box at end of post ──────────────────────────────── */
.article-cta {
  background: var(--black);
  color: #fff;
  padding: 30px 28px;
  border-radius: 12px;
  margin: 44px 0 0;
  text-align: center;
}
.article-cta h3 {
  font-family: var(--font-body);
  font-size: 1.22rem;
  line-height: 1.34;
  color: #fff;
  margin: 0 0 10px;
  border-top: none;
  padding-top: 0;
  font-weight: 800;
  letter-spacing: 0;
  text-wrap: balance;
}
.article-cta p {
  color: rgba(255,255,255,0.78);
  margin-bottom: 18px;
}
.article-cta .btn-primary {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 12px 22px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}
.article-cta .btn-primary:hover,
.article-cta .btn-primary:focus-visible {
  background: var(--red-dark);
  color: #fff;
}

/* ── "Work-in-progress" notice for stub articles ─────────────────── */
.wip-notice {
  background: rgba(192,21,42,0.06);
  border: 1px solid rgba(192,21,42,0.18);
  border-left: 4px solid var(--red);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 18px 0 26px;
  color: var(--text);
  font-size: 0.92rem;
}
.wip-notice strong { color: var(--red); }

/* ============================
   RATGEBER ARTICLE PAGES
============================ */
.rg-hero { padding: 88px 0 48px; background: #f6f3ee; }
.rg-breadcrumb { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6e6a64; margin-bottom: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rg-breadcrumb a { color: #6e6a64; text-decoration: none; }
.rg-breadcrumb a:hover { color: #c0152a; }
.rg-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #c0152a; margin: 0 0 10px; }
.rg-hero h1 { font-family: var(--font-body); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.16; text-transform: none; margin: 0 0 20px; color: #181818; font-weight: 800; letter-spacing: 0; text-wrap: balance; }
.rg-hero-meta { font-size: .82rem; color: #6e6a64; font-weight: 700; margin-bottom: 28px; display: flex; gap: 20px; flex-wrap: wrap; }
.rg-hero-lead { font-size: 1.08rem; line-height: 1.7; color: #3d3a36; max-width: 720px; border-left: 4px solid #c0152a; padding-left: 20px; margin: 0; }
.rg-body { max-width: 760px; margin: 0 auto; }
.rg-body h2 { font-family: var(--font-body); font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.28; text-transform: none; color: #181818; margin: 48px 0 16px; font-weight: 800; letter-spacing: 0; text-wrap: balance; }
.rg-body h3 { font-size: 1.1rem; font-weight: 800; color: #181818; margin: 32px 0 10px; }
.rg-body p { font-size: 1rem; line-height: 1.7; color: #3d3a36; margin: 0 0 18px; }
.rg-body ul, .rg-body ol { padding-left: 20px; margin: 0 0 18px; }
.rg-body li { font-size: 1rem; line-height: 1.7; color: #3d3a36; margin-bottom: 6px; }
.info-box { background: #f0ece6; border-left: 4px solid #181818; border-radius: 4px; padding: 20px 24px; margin: 28px 0; line-height: 1.6; }
.info-box strong { display: block; color: #181818; margin-bottom: 6px; font-size: 1rem; }
.info-box p { margin: 0; color: #3d3a36; font-size: .94rem; }
.foerder-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .92rem; }
.foerder-table th { background: #181818; color: #fff; padding: 10px 14px; text-align: left; font-weight: 700; }
.foerder-table td { padding: 10px 14px; border-bottom: 1px solid rgba(24,24,24,.1); color: #3d3a36; line-height: 1.6; }
.foerder-table tr:nth-child(even) td { background: #f6f3ee; }
.foerder-table td:last-child { font-weight: 700; color: #181818; }
.rg-cta-box { background: #181818; color: #fff; border-radius: 8px; padding: 32px; text-align: center; margin: 48px 0; }
.rg-cta-box h3 { font-family: var(--font-body); font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.28; text-transform: none; color: #fff; margin: 0 0 12px; font-weight: 800; letter-spacing: 0; text-wrap: balance; }
.rg-cta-box p { color: rgba(255,255,255,.75); margin: 0 0 24px; line-height: 1.6; }
@media (max-width: 760px) {
  .foerder-table { font-size: .84rem; }
}

/* ============================
   DANKE PAGE
============================ */
.danke-page { background: #f6f3ee; min-height: calc(100vh - var(--nav-height)); display: flex; align-items: center; padding: 60px 24px; }
.danke-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.danke-icon { width: 72px; height: 72px; background: #181818; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; }
.danke-icon svg { display: block; }
.danke-eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #c0152a; margin: 0 0 12px; }
.danke-inner h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); line-height: .95; text-transform: uppercase; color: #181818; margin: 0 0 20px; }
.danke-inner p { font-size: 1.05rem; line-height: 1.7; color: #4a4640; margin: 0 0 16px; }
.danke-steps { list-style: none; padding: 0; margin: 32px 0; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.danke-step { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid rgba(24,24,24,.1); border-radius: 8px; padding: 16px 20px; }
.danke-step-num { font-family: var(--font-display); font-size: 1.6rem; color: #c0152a; line-height: 1; flex-shrink: 0; width: 28px; }
.danke-step-text { font-size: .96rem; line-height: 1.6; color: #3d3a36; }
.danke-step-text strong { display: block; color: #181818; margin-bottom: 2px; }
.danke-divider { border: none; border-top: 1px solid rgba(24,24,24,.1); margin: 36px 0; }
.danke-refs-heading { font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6e6a64; margin: 0 0 16px; }

.rg-title {
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  text-wrap: balance;
}



/* ============================
  wdvs rechner start
============================ */

.section.light {
  padding: 100px 20px;
  background:
    radial-gradient(circle at top left, rgba(180, 30, 45, 0.08), transparent 40%),
    linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%);
}

.section.light .container {
  max-width: 1100px;
  margin: 0 auto;
}

/* =========================================================
   TITLE + SUBTITLE
   ========================================================= */

#calc-heading {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  color: #121212;
  margin-bottom: 18px;
  letter-spacing: -0.03em;
}

.section-subtitle {
  max-width: 850px;
  margin: 0 auto 50px;
  text-align: center;
  color: #5d6470;
  font-size: 1.05rem;
  line-height: 1.8;
}

/* =========================================================
   CALCULATOR CARD
   ========================================================= */

.calc-wrap {
  position: relative;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 32px;
  padding: 40px;
  box-shadow:
    0 10px 40px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
}

.calc-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(140,0,20,0.04),
      transparent 40%
    );
  pointer-events: none;
}

/* =========================================================
   GRID
   ========================================================= */

.calc-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.calc-field {
  display: flex;
  flex-direction: column;
}

/* =========================================================
   LABELS
   ========================================================= */

.calc-field label {
  margin-bottom: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: 0.02em;
}

/* =========================================================
   INPUTS + SELECTS
   ========================================================= */

.calc-field input,
.calc-field select {
  appearance: none;
  width: 100%;
  height: 58px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid #d7dbe2;
  background: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
}

.calc-field input:focus,
.calc-field select:focus {
  outline: none;
  border-color: #8b0f1a;
  box-shadow:
    0 0 0 4px rgba(139,15,26,0.12),
    0 10px 25px rgba(139,15,26,0.08);
  transform: translateY(-1px);
}

/* =========================================================
   RESULT BOX
   ========================================================= */

.calc-result {
  margin-top: 34px;
  padding: 34px;
  border-radius: 28px;
  background:
    linear-gradient(
      135deg,
      #8b0f1a 0%,
      #6e0c15 100%
    );
  color: #fff;
  text-align: center;
  box-shadow:
    0 15px 40px rgba(139,15,26,0.25);
}

.cr-label {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.78;
  margin-bottom: 14px;
}

.cr-value {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 18px;
  letter-spacing: -0.04em;
}

.cr-note {
  font-size: 0.96rem;
  line-height: 1.7;
  opacity: 0.92;
}

/* =========================================================
   CTA BUTTONS
   ========================================================= */

.calc-cta {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 34px;
  flex-wrap: wrap;
}

.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  height: 58px;
  padding: 0 28px;
  border-radius: 18px;
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 700;
  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

/* PRIMARY */

.btn-primary {
  background:
    linear-gradient(
      135deg,
      #8b0f1a,
      #b81f30
    );
  color: #fff;
  box-shadow:
    0 12px 28px rgba(139,15,26,0.28);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(139,15,26,0.35);
}

/* OUTLINE */

.btn-outline {
  background: rgba(255,255,255,0.8);
  color: #111827;
  border: 1px solid #d6dae2;
}

.btn-outline:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.08);
}

/* =========================================================
   SMALL INFO TEXT
   ========================================================= */

.section-subtitle a {
  color: #8b0f1a;
  font-weight: 700;
  text-decoration: none;
}

.section-subtitle a:hover {
  text-decoration: underline;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .section.light {
    padding: 70px 16px;
  }

  .calc-wrap {
    padding: 24px;
    border-radius: 24px;
  }

  .calc-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .calc-result {
    padding: 26px 20px;
    border-radius: 22px;
  }

  .cr-value {
    font-size: 2.4rem;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
    min-width: unset;
  }

  .calc-cta {
    flex-direction: column;
  }
}
/* ============================
   wdvs rechner end
============================ */