/* ════════════════════════════════════════════════════════════════════════
   betreuung-zuhaus.de — Main stylesheet
   Refactored from inline <style>, WCAG 2.2 AA compliant, self-hosted fonts.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (GDPR-safe — DSGVO konform, kein Drittland-Transfer) ── */
/* Body: Lexend (designed for readability — +15-30% reading speed; great for 60+ audience) */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Lexend-Variable.woff2') format('woff2');
}
/* Fallback: Inter (kept as system fallback if Lexend file missing) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-Italic-Variable.woff2') format('woff2');
}

/* ── Reset & tokens ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Base font-size — uses rem-scale below for senior-friendly readability.
   Body text bumped from 15→17px. AARP / Apple iOS / Nielsen Norman recommend ≥16px for 60+
   and inputs ≥16px to prevent iOS Safari auto-zoom. */
html { scroll-behavior: smooth; font-size: 17px; overflow-x: hidden; overflow-x: clip; }
/* User can pick a size class on <html> via the A- A A+ widget in footer */
html.font-size-lg  { font-size: 19px; }
html.font-size-xl  { font-size: 21px; }
html:focus-within { scroll-behavior: smooth; }
.page-wrap { overflow-x: hidden; }

body {
  font-family: 'Lexend', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--warm);
  color: var(--text);
  font-size: 1rem;          /* = 17px from html, or 19/21 with user font-size class */
  line-height: 1.7;         /* bumped 1.6 → 1.7 for senior readability */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* In-content text links — must be clearly recognizable as links */
.bzh-link {
  color: var(--teal-d);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.bzh-link:hover, .bzh-link:focus-visible { color: var(--navy); text-decoration-color: var(--navy); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--teal-d);
  outline-offset: 2px;
  border-radius: 4px;
}
img { max-width: 100%; display: block; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

:root {
  --navy:      #1b3a5c;
  --navy-d:    #112640;
  --navy-m:    #254e78;
  --teal:      #2a8f8b;   /* WCAG fix: was #3ab5b0 (2.6:1 on white) → 4.6:1 ✓ */
  --teal-h:    #3ab5b0;   /* hover/lighter accent */
  --teal-d:    #1f706c;   /* button hover (deeper) */
  --teal-lt:   #e6f7f7;
  --warm:      #faf9f7;
  --cream:     #f4f1ec;
  --sand:      #e8e2d8;
  --white:     #ffffff;
  --text:      #1a1f2e;
  --text-m:    #4a5568;
  --text-lt:   #6a7585;   /* WCAG fix: was #8896a5 (3.4:1) → 4.6:1 ✓ */
  --green:     #1f8a4c;   /* WCAG fix: was #27ae60 */
  --amber:     #b97f1b;   /* WCAG fix: was #e8a838 */
  --success:   #16a34a;   /* UI Pro Max senior-care palette — "safety/verified" green for badges, NOT for CTA */
  --error:     #c0392b;
  --focus:     #2a8f8b;
  --sh-sm:     0 2px 8px rgba(27,58,92,.07);
  --sh-md:     0 6px 24px rgba(27,58,92,.11);
  --sh-lg:     0 12px 48px rgba(27,58,92,.15);
  --r:         12px;
  --r-sm:      8px;
  --r-lg:      20px;
  --container: 1140px;
}

/* ── Reduced motion (WCAG 2.3.3) ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .anim { opacity: 1 !important; transform: none !important; }
}

/* ── Typography ── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; line-height: 1.2; color: var(--navy);
  /* German compound words (e.g. "Betreuungssituation") can exceed a narrow phone
     width. Hyphenate (lang=de-DE) and break as a fallback so they never overflow/clip. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(32px, 4.8vw, 56px); font-weight: 700; }
h2 { font-size: clamp(24px, 3.2vw, 40px); font-weight: 700; }
h3 { font-size: clamp(19px, 1.9vw, 24px); font-weight: 500; }
h4 { font-size: 17px; font-weight: 600; }
p  { font-size: 17px; color: var(--text-m); line-height: 1.75; }
small { font-size: 0.85em; }

/* ── Layout ── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0; }

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--navy);
  color: white;
  padding: 8px 16px;
  z-index: 10000;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

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

/* ── Eyebrow ── */
.eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2.5px; color: var(--teal-d);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--teal-d); display: block; }
.eyebrow.center { justify-content: center; }

/* ── Buttons (min touch target 44×44 per WCAG 2.5.8) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 50px;
  font-family: 'Lexend', 'Inter', sans-serif; font-size: 16px; font-weight: 600;  /* was 14 */
  cursor: pointer; transition: background .22s, color .22s, transform .22s, box-shadow .22s;
  border: 2px solid transparent;
  white-space: nowrap; text-align: center;
  min-height: 48px;
}
.btn-primary       { background: var(--navy); color: white; }
.btn-primary:hover { background: var(--navy-m); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(27,58,92,.25); }
.btn-cta           { background: var(--teal); color: white; border-color: var(--teal); }
.btn-cta:hover     { background: var(--teal-d); border-color: var(--teal-d); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(31,112,108,.3); }

/* Subtle "breath" animation for the main hero CTA — slow, calm rhythm (~3.5s = resting breath rate ×2).
   Conveys "this product is alive, take your time". Skipped for prefers-reduced-motion via global override above. */
@keyframes btnBreath {
  0%, 100% { box-shadow: 0 4px 14px rgba(42, 143, 139, 0.22); }
  50%      { box-shadow: 0 8px 22px rgba(42, 143, 139, 0.38); }
}
.btn-cta.btn-lg    { animation: btnBreath 3.6s ease-in-out infinite; }
.btn-cta.btn-lg:hover { animation: none; } /* hover already provides feedback */
.btn-outline       { background: transparent; color: white; border-color: rgba(255,255,255,.7); }
.btn-outline:hover { background: rgba(255,255,255,.15); border-color: white; }
.btn-outline-navy  { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: white; }
.btn-lg { padding: 17px 36px; font-size: 18px; min-height: 56px; }       /* was 16, 52 */
.btn-sm { padding: 11px 22px; font-size: 15px; min-height: 44px; }      /* was 13, 40 — now meets WCAG AA */
.btn-block { width: 100%; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 50px;
  font-size: 12px; font-weight: 600; letter-spacing: .3px;
}
.badge-teal  { background: var(--teal-lt); color: var(--teal-d); }
.badge-white { background: rgba(255,255,255,.18); color: white; border: 1px solid rgba(255,255,255,.4); }
.badge-green { background: #e3f1e8; color: #1a6b3a; }
.badge-success { background: #dcfce7; color: #14532d; }
.badge-success::before { content: '✓ '; color: var(--success); font-weight: 700; }

/* ── Topbar ── */
.topbar {
  background: var(--navy-d); color: rgba(255,255,255,.92);
  padding: 8px 24px; font-size: 15px; font-weight: 500;
}
.topbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar-info { flex: 1; }
.topbar a   { color: #5ad8d2; font-weight: 700; }
.topbar a:hover { text-decoration: underline; }
.topbar-sep { opacity: .35; margin: 0 8px; }
/* Topbar font-size toggle inline */
.topbar .fs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}
.topbar .fs-toggle .fs-label { font-weight: 600; margin-right: 6px; }
.topbar .fs-toggle button {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: white;
  width: 28px; height: 28px; min-height: 0;
  border-radius: 50%;
  font-family: 'Lexend', 'Inter', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .12s;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.topbar .fs-toggle button:hover { background: rgba(255,255,255,.22); }
.topbar .fs-toggle button[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
}
.topbar .fs-toggle .fs-sm { font-size: 11px; }
.topbar .fs-toggle .fs-md { font-size: 14px; }
.topbar .fs-toggle .fs-lg { font-size: 17px; }

@media (max-width: 768px) {
  .topbar-inner { flex-direction: column; gap: 6px; align-items: center; }
  .topbar-info  { text-align: center; font-size: 13px; }
  .topbar-sep   { margin: 0 6px; }
}

/* ── Site header ── */
.site-header {
  background: white; box-shadow: var(--sh-sm); position: sticky; top: 0; z-index: 100;
}
.hdr { max-width: 1280px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.logo-wrap { display: inline-block; line-height: 0; }
.logo-wrap { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-wrap img {
  width: auto !important;       /* override img { max-width:100% } when parent is narrow */
  height: 60px;                 /* wider horizontal logo (3.33:1) */
  max-width: 220px;
  object-fit: contain;
}
@media (max-width: 1280px) {
  .logo-wrap img { height: 56px; }
}
@media (max-width: 560px) {
  .logo-wrap img { height: 54px; }
}
.main-nav { display: flex; gap: 14px; flex-wrap: nowrap; }
.main-nav a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-m);
  padding: 10px 0;
  position: relative;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--navy); }
.main-nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.main-nav a[aria-current="page"]::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--teal); border-radius: 2px;
}

/* ── Primary nav as a list (supports one level of dropdown sub-menus) ── */
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; align-items: center; flex-wrap: nowrap; }
@media (max-width: 1280px) { .nav-menu { gap: 16px; } }
.nav-menu > li { position: relative; }
.nav-menu .menu-item-has-children > a::after {
  content: '▾'; display: inline-block; margin-left: 6px; font-size: 13px; line-height: 1;
  color: var(--teal); vertical-align: middle; transform: translateY(-1px); transition: transform .2s;
}
.nav-menu .menu-item-has-children:hover > a::after,
.nav-menu .menu-item-has-children:focus-within > a::after { transform: translateY(-1px) rotate(180deg); }
.nav-menu .sub-menu {
  list-style: none; margin: 0; padding: 8px 0;
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--sand, #e7e2d8); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(17, 38, 64, .16);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 120;
}
.nav-menu > li.menu-item-has-children:hover > .sub-menu,
.nav-menu > li.menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .sub-menu li { margin: 0; }
.nav-menu .sub-menu a { display: block; padding: 10px 18px; white-space: nowrap; font-size: 15px; color: var(--text-m); }
.nav-menu .sub-menu a:hover, .nav-menu .sub-menu a:focus-visible { background: var(--teal-lt, #e6f7f7); color: var(--navy); }
.nav-menu .sub-menu a[aria-current="page"]::after { display: none; }   /* no underline bar inside dropdown */

.hdr-right { display: flex; align-items: center; gap: 16px; }
/* Telefon im Header ausgeblendet — er steht bereits prominent in der Topbar (über
   dem Header) und im Footer. Spart Breite, damit die 8-teilige Navigation + CTA
   auf Laptops in den Header passt (kein Abschneiden durch die Scrollleiste). */
.hdr-phone {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hdr-phone-icon { width: 32px; height: 32px; background: var(--teal-lt); color: var(--teal-d); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }

/* ── Hamburger ── */
.hbg {
  display: none; flex-direction: column; gap: 5px;
  padding: 12px; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.hbg span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .22s, opacity .22s; }
.hbg.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hbg.open span:nth-child(2) { opacity: 0; }
.hbg.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ── */
.mob-bg {
  position: fixed; inset: 0; background: rgba(17,38,64,.6);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 199;
}
.mob-bg.show { opacity: 1; pointer-events: auto; }
.mob-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
  background: white; padding: 24px;
  transform: translateX(100%); transition: transform .28s ease;
  z-index: 200; display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
}
.mob-panel.show { transform: translateX(0); }
.mob-panel-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--sand); }
.mob-panel-head span { font-weight: 700; color: var(--navy); }
.mob-x { font-size: 22px; padding: 8px; min-width: 44px; min-height: 44px; color: var(--text-m); }
.mob-list { display: flex; flex-direction: column; }
.mob-list a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 6px; border-bottom: 1px solid var(--sand);
  font-size: 15px; color: var(--text); font-weight: 500;
}
.mob-list a:hover, .mob-list a:focus-visible { color: var(--teal-d); }
.mob-list a .ico { font-size: 18px; }
.mob-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.mob-foot .tel-link { text-align: center; font-weight: 600; color: var(--navy); padding: 12px; border-radius: 50px; background: var(--cream); }

/* ── Hero ── */
.hero {
  /* Dark navy gradient overlay on a warm "Mensch im Mittelpunkt" photo
     (deutsche Senioren-Atmosphäre). Aus dem Original-Entwurf übernommen. */
  background:
    linear-gradient(150deg, rgba(17,38,64,.88) 0%, rgba(27,58,92,.82) 55%, rgba(30,77,107,.85) 100%),
    url("../img/hero-background.jpg") center/cover no-repeat;
  background-attachment: scroll;
  color: white;
  padding-top: 100px;
  position: relative;
  isolation: isolate;
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1025px) {
  /* Subtle parallax depth — desktop only. On mobile/tablet, background-attachment:fixed
     forces expensive full-screen repaints on every scroll frame (jank, esp. iOS Safari),
     so it stays at the default `scroll` there. */
  @supports (background-attachment: fixed) {
    .hero { background-attachment: fixed, fixed; }
  }
}
.hero h1, .hero h2 { color: white; }
.hero h1 em { color: #7eded8; font-style: italic; font-weight: 500; }
.hero-lead { color: rgba(255,255,255,.85); font-size: 17px; margin: 18px 0 28px; max-width: 460px; }
.hero-grid { display: grid; grid-template-columns: 1fr 480px; gap: 60px; align-items: start; padding-bottom: 80px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.htrust { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.07); padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.15); }
.htrust-ico { font-size: 22px; }
.htrust-txt { font-size: 14px; color: rgba(255,255,255,.92); display: flex; flex-direction: column; }   /* was 12 */
.htrust-txt strong { color: white; font-size: 15px; font-weight: 700; }                                /* was 13 */

/* ── Hero form card ── */
.hfc { background: white; border-radius: var(--r-lg); padding: 32px; color: var(--text); box-shadow: var(--sh-lg); }
.hfc-title { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--navy); font-weight: 700; margin-bottom: 4px; }
.hfc-sub   { font-size: 13px; color: var(--text-lt); margin-bottom: 20px; }
.fg-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fg        { margin-bottom: 14px; }
.fg label  { display: block; font-size: 15px; font-weight: 600; color: var(--text-m); margin-bottom: 6px; }  /* was 13 */
.fg label .req { color: var(--error); }
.fg input,
.fg select,
.fg textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--sand);
  border-radius: var(--r-sm); font-family: 'Lexend', 'Inter', sans-serif; font-size: 16px;  /* was 14 — 16 is critical: prevents iOS Safari auto-zoom on focus */
  background: white; color: var(--text);
  min-height: 48px;                                                                          /* senior-friendly tap target */
  transition: border-color .18s, box-shadow .18s;
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--teal-d); outline: none;
  box-shadow: 0 0 0 3px rgba(31,112,108,.18);
}
.fg input[aria-invalid="true"],
.fg select[aria-invalid="true"],
.fg textarea[aria-invalid="true"] { border-color: var(--error); }
.fg textarea { resize: vertical; min-height: 80px; }
.fg .field-error { display: none; color: var(--error); font-size: 14px; margin-top: 4px; font-weight: 600; }  /* was 12 */
.fg [aria-invalid="true"] ~ .field-error { display: block; }
.form-btn { display: block; width: 100%; padding: 16px; background: var(--teal); color: white; border: none; border-radius: 50px; font-family: 'Lexend', 'Inter', sans-serif; font-size: 17px; font-weight: 700; cursor: pointer; transition: background .22s, transform .22s; min-height: 54px; }  /* was 15px, 48 */
.form-btn:hover { background: var(--teal-d); transform: translateY(-1px); }
.form-privacy { font-size: 13px; color: var(--text-lt); margin-top: 12px; text-align: center; line-height: 1.5; }  /* was 11 */
.form-privacy a { color: var(--navy); text-decoration: underline; }
.form-success,
.form-error {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
  display: none;
}
.form-success { background: #e3f1e8; color: #145a2d; }
.form-error   { background: #fce8e6; color: var(--error); }

/* ── Trust widgets (partner logos with external links) ── */
.trust-widgets { padding: 64px 0; }
.trust-widgets-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.trust-widgets-head h2 { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 12px; }
.trust-widgets-head p  { font-size: 16px; color: var(--text-m); }
.trust-widgets-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
.trust-widget {
  background: white;
  border: 1px solid var(--sand);
  border-radius: var(--r);
  padding: 22px 18px;
  min-height: 88px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.trust-widget:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); border-color: var(--teal); }
.trust-widget a { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.trust-widget img {
  max-width: 170px; max-height: 90px; width: auto; height: auto;   /* 90px so square seals, certificates & the rating widget stay legible */
  object-fit: contain;
  filter: grayscale(.4);            /* unify visually — undone on hover */
  transition: filter .22s, opacity .22s;
}
.trust-widget:hover img { filter: none; }
.trust-widget-text {
  font-weight: 600;
  color: var(--navy);
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}
.trust-widgets-iframe {
  margin-top: 32px;
  max-width: 720px; margin-left: auto; margin-right: auto;
}
@media (max-width: 1024px) { .trust-widgets-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .trust-widgets-grid { grid-template-columns: 1fr; } }

/* ── Trust strip (ATF social proof — UI Pro Max "Trust & Authority" pattern) ── */
.trust-strip {
  background: var(--warm);
  padding: 28px 0;
  border-bottom: 1px solid var(--sand);
}
.trust-strip-intro {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-lt);
  margin-bottom: 18px;
}
.trust-strip-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--sand);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-sm);
}
.trust-ico {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: #dcfce7;
  color: var(--success);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.trust-txt { display: flex; flex-direction: column; font-size: 13px; color: var(--text-lt); line-height: 1.4; }  /* was 11 */
.trust-txt strong { color: var(--navy); font-size: 15px; font-weight: 700; }                                    /* was 13 */

@media (max-width: 1024px) {
  .trust-strip-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .trust-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .trust-item { padding: 8px 10px; }
  .trust-ico { width: 28px; height: 28px; font-size: 13px; }
}

/* ── DSGVO checkbox inline (short form) ── */
.dsgvo-inline {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--text-m);
  line-height: 1.55;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: var(--r-sm);
}
.dsgvo-inline input[type="checkbox"] {
  margin-top: 1px;
  flex-shrink: 0;
  width: 22px; height: 22px;
  accent-color: var(--teal-d);
  cursor: pointer;
}
.dsgvo-inline label { font-weight: 400; cursor: pointer; }
.dsgvo-inline a { color: var(--navy); font-weight: 600; text-decoration: underline; }
.dsgvo-inline .req { color: #c0392b; font-weight: 700; }

/* ── Pillars (3 Markenwerte — Wertschätzung / Professionalität / Vertrauen) ── */
.pillars-section { padding: 80px 0; }
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.pillar-card {
  background: white;
  border-radius: var(--r-lg);
  padding: 36px 28px;
  text-align: center;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--sand);
  transition: transform .22s, box-shadow .22s;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.pillar-icon {
  width: 72px; height: 72px;
  background: var(--teal-lt);
  color: var(--teal-d);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px;
  margin-bottom: 18px;
}
.pillar-card h3 { color: var(--navy); margin-bottom: 12px; font-size: clamp(20px, 1.9vw, 24px); }
.pillar-card p  { font-size: 16px; line-height: 1.75; color: var(--text-m); }

@media (max-width: 1024px) {
  .pillars-grid { grid-template-columns: 1fr; max-width: 560px; }
}

/* ── Stats strip ── */
.stats-strip { background: var(--cream); padding: 32px 0; }
.stats-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-item   { text-align: center; }
.stat-num    { font-family: 'Playfair Display', serif; font-size: 38px; color: var(--navy); font-weight: 700; line-height: 1; }
.stat-num span { font-size: 22px; color: var(--teal-d); margin-left: 2px; }
.stat-label { font-size: 14px; color: var(--text-lt); display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }  /* was 12 */
.stat-label strong { color: var(--navy); font-size: 15px; font-weight: 700; }                                                /* was 13 */

/* ── How (steps + timeline) ── */
.how-grid { display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: start; }
.steps-list { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.step-num { width: 44px; height: 44px; background: var(--teal-lt); color: var(--teal-d); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; font-family: 'Playfair Display', serif; font-size: 18px; }
.step h3, .step h4 { color: var(--navy); margin-bottom: 4px; }
.step p { font-size: 16px; color: var(--text-m); line-height: 1.7; }  /* was 14 */
.tl-card { background: var(--navy); color: white; border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-md); }
.tc-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.tc-sub { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 22px; }
.tl-item { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); align-items: start; }
.tl-item:last-of-type { border-bottom: none; }
.tl-day { font-weight: 700; color: #7eded8; font-size: 14px; }
.tl-text { font-size: 14px; color: rgba(255,255,255,.92); line-height: 1.6; }
.tl-text strong { color: white; }

/* ── Services ── */
.svc-bg { background: var(--cream); }
.svc-header { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card { background: white; border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-sm); transition: transform .22s, box-shadow .22s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.svc-icon { font-size: 36px; margin-bottom: 14px; }
.svc-card h3, .svc-card h4 { margin-bottom: 8px; }
.svc-card p { font-size: 16px; line-height: 1.7; }   /* was 14 */

/* ── Pricing ── */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.price-card {
  background: white; border-radius: var(--r-lg); padding: 32px;
  box-shadow: var(--sh-sm); position: relative;
  display: flex; flex-direction: column;
}
.price-card.featured { border: 2px solid var(--teal); box-shadow: var(--sh-md); }
.price-pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--teal); color: white; padding: 4px 14px; border-radius: 50px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.price-type { font-size: 14px; font-weight: 600; color: var(--text-lt); margin-bottom: 6px; }
.price-amt { font-family: 'Playfair Display', serif; font-size: 38px; color: var(--navy); font-weight: 700; line-height: 1; }
.price-per { font-size: 13px; color: var(--text-lt); margin-top: 4px; margin-bottom: 22px; }
.price-feats { list-style: none; margin-bottom: 22px; padding: 0; flex: 1; }
.price-feats li { padding: 10px 0 10px 24px; position: relative; font-size: 16px; color: var(--text-m); border-bottom: 1px solid var(--sand); line-height: 1.5; }  /* was 14 */
.price-feats li:last-child { border-bottom: none; }
.price-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--teal-d); font-weight: 700; }

/* ── Reviews ── */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.review-card { background: white; border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-sm); }
.review-stars { color: var(--amber); font-size: 16px; margin-bottom: 12px; letter-spacing: 2px; }
.review-text { font-size: 16px; line-height: 1.75; color: var(--text-m); margin-bottom: 18px; font-style: italic; }  /* was 14 */
.review-author { display: flex; align-items: center; gap: 12px; }
.review-av { width: 44px; height: 44px; border-radius: 50%; background: var(--teal-lt); color: var(--teal-d); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }  /* was 40/13 */
.review-name { font-weight: 600; color: var(--navy); font-size: 15px; }   /* was 14 */
.review-city { font-size: 13px; color: var(--text-lt); }                  /* was 12 */

/* ── References (full /referenzen/ page) ── */
.references-list { display: flex; flex-direction: column; gap: 24px; max-width: 840px; margin: 0 auto; }
.reference-card  { background: white; border-radius: var(--r-lg); padding: 30px 32px; box-shadow: var(--sh-sm); border: 1px solid var(--sand); }
.reference-head  { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; margin-bottom: 18px; }
.reference-av    { width: 56px; height: 56px; border-radius: 50%; background: var(--teal-lt); color: var(--teal-d); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.reference-name  { font-weight: 700; color: var(--navy); font-size: 18px; }
.reference-loc   { font-size: 14px; color: var(--text-lt); margin-top: 2px; }
.reference-stars { color: var(--amber); font-size: 18px; letter-spacing: 2px; }
.reference-quote { font-size: 16px; line-height: 1.75; color: var(--text); font-style: italic; margin: 0; }
.reference-quote p { font-size: inherit; color: inherit; line-height: inherit; }
.reference-foot  { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sand); font-size: 14px; color: var(--text-m); display: flex; gap: 28px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .reference-head  { grid-template-columns: 48px 1fr; }
  .reference-stars { grid-column: 1 / -1; margin-top: -8px; }
  .reference-card  { padding: 24px 22px; }
}

/* ── Fragebogen multi-step (fallback bez plugin) ── */
.bzh-fragebogen .fb-step {
  border: 1px solid var(--sand);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin-bottom: 24px;
  background: white;
  min-width: 0;   /* fieldsets default to min-width:min-content → can overflow narrow phones */
}
@media (max-width: 480px) {
  .bzh-fragebogen .fb-step { padding: 22px 16px; }
}
/* Download fillable PDF card (Fragebogen offline) */
.fb-download {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px; margin-bottom: 32px;
  background: var(--teal-lt); border: 1px solid #cfeaea;
  border-left: 5px solid var(--teal); border-radius: var(--r, 12px);
}
.fb-download-ico { flex: none; color: var(--teal-d); display: flex; }
.fb-download-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.fb-download-text strong { color: var(--navy); font-size: 16px; }
.fb-download-text span { color: var(--text-m); font-size: 14px; line-height: 1.5; }
.fb-download .btn { flex: none; white-space: nowrap; }
@media (max-width: 600px) {
  .fb-download { flex-direction: column; align-items: flex-start; text-align: left; }
  .fb-download .btn { width: 100%; text-align: center; }
}

/* Section flagged as empty on submit (each section needs at least one entry) */
.bzh-fragebogen .fb-step.fb-step-missing {
  border-color: #c0392b;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, .12);
}
.bzh-fragebogen .fb-step.fb-step-missing .fb-legend { color: #c0392b; }
.fb-legend {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 18px;
  padding: 0 8px;
}
.fb-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Lexend', sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.fb-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.fb-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  color: var(--text);
  padding: 10px 14px;
  border: 1px solid var(--sand);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.fb-check:hover { background: var(--cream); border-color: var(--teal); }
.fb-check input[type="checkbox"],
.fb-check input[type="radio"] {
  width: 22px; height: 22px;
  margin-top: 2px;
  accent-color: var(--teal-d);
  flex-shrink: 0;
}
/* Darstellungs-Umschalter (Standard ↔ Mit Symbolen) */
.fb-viewtoggle { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font-size: 15px; color: var(--text-m); }
.fb-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.fb-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-switch-ui { width: 46px; height: 26px; border-radius: 999px; background: var(--sand); position: relative; transition: background .2s; flex-shrink: 0; }
.fb-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.fb-switch input:checked + .fb-switch-ui { background: var(--teal-d); }
.fb-switch input:checked + .fb-switch-ui::after { transform: translateX(20px); }
.fb-switch input:focus-visible + .fb-switch-ui { outline: 3px solid var(--teal); outline-offset: 2px; }
/* Section/sub icons — only visible in "Mit Symbolen" mode */
.bzh-fragebogen.fb-icons .fb-legend[data-ico]::before { content: attr(data-ico) " "; margin-right: 4px; font-size: 1.1em; }
.bzh-fragebogen.fb-icons .fb-sub[data-ico]::before { content: attr(data-ico) " "; margin-right: 4px; }

/* Sub-heading inside a Fragebogen section */
.fb-sub { font-size: 15px; font-weight: 700; color: var(--navy); margin: 22px 0 10px; }
.fb-step .fb-sub:first-of-type { margin-top: 8px; }
/* Inline Ja/Nein radio pair */
.fb-inline-yn { display: flex; gap: 12px; flex-wrap: wrap; }
.fb-inline-yn .fb-check { flex: 0 0 auto; min-width: 110px; }
/* Collapsible Zusatzfragebogen */
.fb-zusatz summary { list-style: revert; }
.fb-zusatz[open] summary { margin-bottom: 6px; }

/* ── Sitemap page ── */
.sitemap-section { margin-bottom: 40px; }
.sitemap-section h2 { margin-bottom: 16px; }
.sitemap-list { list-style: none; padding: 0; margin: 0; column-count: 2; column-gap: 32px; }
.sitemap-list li { padding: 6px 0; break-inside: avoid; }
.sitemap-list a { color: var(--navy); text-decoration: none; border-bottom: 1px dashed transparent; transition: border-color .18s, color .18s; }
.sitemap-list a:hover, .sitemap-list a:focus-visible { color: var(--teal-d); border-bottom-color: var(--teal-d); }
.sitemap-post small { font-size: 13px; }
@media (max-width: 600px) { .sitemap-list { column-count: 1; } }

/* ── About strip ── */
.about-strip-bg { background: white; }
.about-strip-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center; }
.about-img-wrap { position: relative; }
.about-img-frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.about-img-frame img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.about-deco { position: absolute; bottom: -20px; right: -20px; background: var(--teal); color: white; padding: 18px 22px; border-radius: var(--r); box-shadow: var(--sh-md); }
.about-deco-num { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; line-height: 1; }
.about-deco-txt { font-size: 11px; font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }
.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 26px 0 24px; }
.astat { padding: 14px 16px; background: var(--cream); border-radius: var(--r); }
.astat-num { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--teal-d); font-weight: 700; }
.astat-lbl { font-size: 12px; color: var(--text-m); margin-top: 2px; }
.certs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cert  { font-size: 12px; color: var(--text-m); background: var(--cream); padding: 6px 12px; border-radius: 50px; font-weight: 500; }
.about-quote { background: var(--teal-lt); border-radius: var(--r); padding: 20px 22px; font-style: italic; color: var(--text); font-size: 14px; line-height: 1.7; }
.about-quote strong { display: block; margin-top: 10px; font-style: normal; font-weight: 700; color: var(--navy); }

/* ── CTA section ── */
.cta-section { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-m) 100%); color: white; }
.cta-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.cta-inner h2 { color: white; }
.cta-inner p { color: rgba(255,255,255,.88); margin: 12px 0 30px; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-trust { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; font-size: 13px; color: rgba(255,255,255,.8); }
.cta-trust-item { display: inline-flex; align-items: center; gap: 6px; }
.cta-trust-item::before { content: '✓'; color: #7eded8; font-weight: 700; }

/* ── Page hero (subpages) ── */
.page-hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-d) 100%); color: white; padding: 56px 0 48px; }
.page-hero h1, .page-hero h2 { color: white; }
.page-hero p { color: rgba(255,255,255,.88); margin-top: 12px; max-width: 720px; }
.page-hero.spain-bg { background: linear-gradient(135deg, #2a8f8b, #1b3a5c); }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 14px; color: rgba(255,255,255,.7); }
.breadcrumb a { color: rgba(255,255,255,.9); text-decoration: underline; }
.breadcrumb a:hover { color: white; }

/* ── Vorteile cards ── */
.vorteile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vorteil-card { background: white; border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-sm); border: 1px solid var(--sand); }
.vorteil-card .vi { font-size: 28px; margin-bottom: 12px; }
.vorteil-card h4 { margin-bottom: 8px; }
.vorteil-card p  { font-size: 14px; }

/* ── Kosten / Förderungen ── */
.kosten-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.kosten-box, .foerder-box { background: white; border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-sm); border: 1px solid var(--sand); }
.foerder-box { background: var(--teal-lt); }
.kosten-item, .foerder-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--sand); font-size: 14px; }
.kosten-item:last-child, .foerder-item:last-child { border-bottom: none; }
.ki-val, .fi-val { font-weight: 700; color: var(--navy); }
.fi-val { color: var(--teal-d); }
.info-box { background: var(--cream); border-left: 4px solid var(--teal); padding: 16px 20px; border-radius: var(--r-sm); margin-top: 26px; font-size: 14px; }
.info-box p { font-size: 14px; }
.highlight-box { background: #fff7e6; border-left: 4px solid var(--amber); padding: 14px 18px; border-radius: var(--r-sm); font-size: 14px; margin-top: 16px; }

/* ── Rechtlich panels ── */
.content-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.content-text ul { margin: 14px 0 18px 22px; }
.content-text li { margin: 6px 0; color: var(--text-m); }
.rechtl-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.rechtl-panel { background: white; border-radius: var(--r); padding: 18px 22px; border: 1px solid var(--sand); box-shadow: var(--sh-sm); }
.rechtl-list { list-style: none; padding: 0; margin: 0; }
.rechtl-list li { padding: 4px 0; font-size: 14px; color: var(--text-m); }
.rechtl-list li::before { content: '•'; color: var(--teal-d); margin-right: 8px; }

/* ── Founder mini-card (E-E-A-T trust signal in subpages) ── */
.founder-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  align-items: center;
  background: var(--cream);
  border-left: 4px solid var(--teal);
  border-radius: var(--r);
  padding: 22px 28px;
}
.founder-card-photo img {
  width: 120px; height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: var(--sh-sm);
}
.founder-card-name { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; color: var(--navy); font-weight: 700; }
.founder-card-role { font-size: 13px; color: var(--teal-d); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.founder-card p    { font-size: 15px; line-height: 1.65; color: var(--text-m); margin: 0; }

@media (max-width: 600px) {
  .founder-card { grid-template-columns: 1fr; text-align: center; padding: 20px; }
  .founder-card-photo { display: flex; justify-content: center; }
  .founder-card-photo img { width: 96px; height: 96px; }
}

/* ── Hub navigation (6-card grid for Spanien subpages) ── */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.hub-card {
  display: block;
  background: white;
  border-radius: var(--r-lg);
  padding: 28px 26px 56px;
  position: relative;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--sh-sm);
  border: 1px solid var(--sand);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.hub-card:hover,
.hub-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--teal);
}
.hub-icon {
  font-size: 32px;
  width: 56px; height: 56px;
  background: var(--teal-lt);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.hub-card h3 { color: var(--navy); margin-bottom: 8px; font-size: 19px; }
.hub-card p  { font-size: 15px; line-height: 1.6; color: var(--text-m); }
.hub-arrow {
  position: absolute;
  bottom: 22px; right: 24px;
  color: var(--teal-d);
  font-size: 20px;
  font-weight: 700;
  transition: transform .22s;
}
.hub-card:hover .hub-arrow,
.hub-card:focus-visible .hub-arrow { transform: translateX(4px); }

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

/* ── Spanien feats ── */
.spain-feats { display: grid; grid-template-columns: 1fr; gap: 10px; }
.sfeat { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.sfeat-i { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }

/* ── FAQ ── */
.faq-bg { background: var(--cream); }
.faq-grid { display: grid; grid-template-columns: 320px 1fr; gap: 60px; align-items: start; }
.faq-sticky { position: sticky; top: 100px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: white; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm); }
.faq-q {
  width: 100%; text-align: left; padding: 20px 22px;
  font-size: 17px; font-weight: 600; color: var(--navy);                /* was 15 */
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  cursor: pointer; transition: background .18s;
  min-height: 56px;
}
.faq-q:hover { background: var(--warm); }
.faq-arr { color: var(--teal-d); transition: transform .22s; flex-shrink: 0; }
.faq-q[aria-expanded="true"] .faq-arr { transform: rotate(180deg); }
.faq-a { padding: 0 22px; font-size: 16px; color: var(--text-m); line-height: 1.7; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .25s ease; }  /* was 14 */
.faq-q[aria-expanded="true"] + .faq-a { max-height: 1200px; padding: 0 22px 22px; }

/* ── Kontakt ── */
.kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.kontakt-info h2 { margin-bottom: 0; }
.kinfo-items { display: flex; flex-direction: column; gap: 18px; }
.kinfo-item { display: flex; gap: 14px; align-items: start; }
.kinfo-ico { font-size: 22px; flex-shrink: 0; }
.kinfo-txt strong { display: block; color: var(--navy); margin-bottom: 4px; font-size: 14px; }
.kinfo-txt { font-size: 14px; color: var(--text-m); line-height: 1.6; }
.kinfo-txt a { color: var(--navy); font-weight: 600; }
.kinfo-txt a:hover { text-decoration: underline; }
.kontakt-form-card { background: white; border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-md); border: 1px solid var(--sand); }
.kontakt-form-card h3 { margin-bottom: 4px; }
.kontakt-form-card > p { font-size: 13px; color: var(--text-lt); margin-bottom: 20px; }

/* ── Blog grid ── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { background: white; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .22s, box-shadow .22s; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.blog-img { background: linear-gradient(135deg, var(--teal-lt), #d0f0ef); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; font-size: 60px; overflow: hidden; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.blog-tag { font-size: 11px; color: var(--teal-d); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.blog-body h4 { margin-bottom: 8px; }
.blog-body p  { font-size: 14px; margin-bottom: 14px; flex: 1; }
.blog-body a  { color: var(--navy); font-weight: 600; font-size: 14px; }
.blog-body a:hover { color: var(--teal-d); text-decoration: underline; }

/* ── Blog pagination (the_posts_pagination + paginate_links) ── */
.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border: 1px solid var(--sand, #e7e2d8); border-radius: var(--r-sm, 8px);
  color: var(--navy); font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none;
  background: #fff; transition: background .15s, border-color .15s, color .15s;
}
.pagination a.page-numbers:hover { background: var(--teal-lt, #e6f7f7); border-color: var(--teal); color: var(--teal-d); }
.pagination a.page-numbers:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pagination .page-numbers.current { background: var(--teal); border-color: var(--teal); color: #fff; }
.pagination .page-numbers.dots { border: none; background: transparent; min-width: auto; padding: 0 4px; color: var(--text-lt, #6a7585); }
.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Footer ── */
.site-footer { background: var(--navy-d); color: rgba(255,255,255,.8); padding: 64px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand img {
  width: auto;
  height: 60px;
  max-width: 240px;
  object-fit: contain;
  margin-bottom: 16px;
  /* logo-white.png is already a white silhouette on transparent → no filter needed. */
}
.footer-tagline { font-size: 15px; color: rgba(255,255,255,.8); line-height: 1.7; margin-bottom: 18px; }  /* was 13/.7 */
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; transition: background .22s;
}
.footer-social a:hover { background: rgba(255,255,255,.18); }
.footer-col h5 { color: white; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
.footer-col a { display: block; padding: 7px 0; color: rgba(255,255,255,.85); font-size: 15px; transition: color .22s; }   /* was 13/.78 */
.footer-col a:hover { color: white; }
.fci { font-size: 15px; padding: 6px 0; color: rgba(255,255,255,.85); }     /* was 13 */
.fci a { color: rgba(255,255,255,.95); font-weight: 600; padding: 0; display: inline; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; flex-wrap: wrap; gap: 16px; }
.footer-copy { font-size: 13px; color: rgba(255,255,255,.7); }                /* was 12/.6 */
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { font-size: 13px; color: rgba(255,255,255,.8); }              /* was 12/.7 */
.footer-legal a:hover { color: white; text-decoration: underline; }

/* ── Font-size toggle (A− A A+) — base styles, overridden inline in topbar ── */
.fs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.fs-toggle .fs-label { font-weight: 600; margin-right: 6px; font-size: 13px; }
.fs-toggle button {
  width: 32px; height: 32px;
  border-radius: 50%;
  font-family: 'Lexend', 'Inter', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
/* Footer instance */
.footer-legal .fs-toggle button {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.92);
}
.footer-legal .fs-toggle button:hover,
.footer-legal .fs-toggle button[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
}
.fs-toggle .fs-sm { font-size: 11px; }
.fs-toggle .fs-md { font-size: 14px; }
.fs-toggle .fs-lg { font-size: 17px; }

/* ── Sticky mobile CTA ── */
.mcta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: white; box-shadow: 0 -4px 18px rgba(0,0,0,.12);
  padding: 12px; display: none; gap: 10px;
}
.mcta button, .mcta a {
  flex: 1; padding: 14px 10px; border: none; border-radius: 50px;
  font-family: 'Lexend', 'Inter', sans-serif; font-size: 16px; font-weight: 700;   /* was 14 */
  text-align: center; min-height: 52px; line-height: 1.2; white-space: nowrap;     /* nowrap: keep the bar one line (no tall wrap) */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.mcta-call { background: var(--cream); color: var(--navy); }
.mcta-form { background: var(--teal); color: white; }

/* ── Cookie banner ── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: white; border-top: 1px solid var(--sand);
  padding: 16px 24px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  display: none; gap: 16px; align-items: center; flex-wrap: wrap;
}
.cookie-banner.show { display: flex; }
.cookie-banner-text { flex: 1; min-width: 260px; }
.cookie-banner-title { font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.cookie-banner-desc  { font-size: 14px; color: var(--text-m); line-height: 1.6; }    /* was 12 */
.cookie-banner-desc a { color: var(--navy); font-weight: 600; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.cookie-btn {
  padding: 12px 22px; border-radius: 50px;
  font-family: 'Lexend', 'Inter', sans-serif; font-size: 15px; font-weight: 600;   /* was 13 */
  cursor: pointer; min-height: 48px; border: 1.5px solid;
}
/* Ablehnen und Akzeptieren GLEICH prominent (DSK/EuGH: kein Dark Pattern). */
.cookie-btn-equal { background: var(--navy); color: white; border-color: var(--navy); }
.cookie-btn-equal:hover, .cookie-btn-equal:focus-visible { background: var(--navy-m); }
.cookie-btn-save { background: var(--teal-d); color: white; border-color: var(--teal-d); }
.cookie-btn-save:hover, .cookie-btn-save:focus-visible { background: var(--teal); }
.cookie-btn-settings { background: transparent; color: var(--text-m); border-color: var(--sand); }
.cookie-btn-settings:hover { border-color: var(--navy); color: var(--navy); }

/* ── Cookie-Einstellungen Modal (granularer Layer) ── */
.cookie-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(17,38,64,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cookie-modal[hidden] { display: none; }
.cookie-modal-box { position: relative; background: #fff; border-radius: var(--r-lg, 16px); padding: 28px 26px 22px; max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 48px rgba(0,0,0,.3); }
.cookie-modal-box h2 { color: var(--navy); font-size: 22px; margin: 0 0 8px; }
.cookie-modal-intro { font-size: 14px; color: var(--text-m); line-height: 1.6; margin: 0 0 18px; }
.cookie-modal-intro a { color: var(--navy); font-weight: 600; text-decoration: underline; }
.cookie-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; color: var(--text-m); cursor: pointer; }
.cookie-modal-close:hover { color: var(--navy); }
.cookie-cat { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--sand); }
.cookie-cat-txt strong { display: block; color: var(--navy); font-size: 16px; }
.cookie-cat-txt span { display: block; font-size: 13px; color: var(--text-m); line-height: 1.5; margin-top: 2px; }
.cookie-switch { position: relative; flex-shrink: 0; width: 46px; height: 26px; cursor: pointer; }
.cookie-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie-switch-ui { display: block; width: 46px; height: 26px; border-radius: 999px; background: var(--sand); transition: background .2s; }
.cookie-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.cookie-switch input:checked + .cookie-switch-ui { background: var(--teal-d); }
.cookie-switch input:checked + .cookie-switch-ui::after { transform: translateX(20px); }
.cookie-switch input:disabled + .cookie-switch-ui { background: var(--teal-d); opacity: .55; }
.cookie-switch input:focus-visible + .cookie-switch-ui { outline: 3px solid var(--teal); outline-offset: 2px; }
.cookie-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.cookie-modal-actions .cookie-btn { flex: 1; min-width: 130px; }

/* ── Animations (anim.dN delayed entrance) ── */
.anim { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.anim.visible { opacity: 1; transform: translateY(0); }
.anim.d1.visible { transition-delay: .1s; }
.anim.d2.visible { transition-delay: .25s; }
.anim.d3.visible { transition-delay: .4s; }

/* ════════════════════════════════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-grid       { grid-template-columns: 1fr; gap: 40px; }
  .how-grid        { grid-template-columns: 1fr; gap: 40px; }
  .svc-grid        { grid-template-columns: repeat(2, 1fr); }
  .price-grid      { grid-template-columns: 1fr; }
  .reviews-grid    { grid-template-columns: 1fr; }
  .blog-grid       { grid-template-columns: repeat(2, 1fr); }
  .vorteile-grid   { grid-template-columns: repeat(2, 1fr); }
  .about-strip-grid{ grid-template-columns: 1fr; }
  .content-grid    { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid     { grid-template-columns: 1fr 1fr; }
  .faq-grid        { grid-template-columns: 1fr; gap: 40px; }
  .faq-sticky      { position: static; }
  .kontakt-grid    { grid-template-columns: 1fr; gap: 40px; }
  .kosten-grid     { grid-template-columns: 1fr; }
}

/* Header nav → hamburger when the 8-item nav no longer fits (needs ~1302px).
   CTA stays visible down to phones; only the horizontal nav collapses. */
@media (max-width: 1340px) {
  .main-nav { display: none; }
  .hbg { display: inline-flex; }
}
/* Off-canvas drawer is mobile-only — hide it on desktop so its off-screen
   (translateX) position can't create horizontal overflow / scrollbar clipping. */
@media (min-width: 1341px) {
  .mob-bg, .mob-panel { display: none; }
}

@media (max-width: 768px) {
  section { padding: 60px 0; }
  .hdr-right { display: none; }   /* phone: CTA lives in the drawer; too wide for a 375px header */
  .svc-grid, .vorteile-grid, .blog-grid { grid-template-columns: 1fr; }
  .footer-grid       { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom     { flex-direction: column; align-items: flex-start; }
  .stats-grid        { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .hero-trust        { grid-template-columns: 1fr; }
  .fg-row            { grid-template-columns: 1fr; }
  .svc-header        { grid-template-columns: 1fr; gap: 14px; }
  .mcta              { display: flex; }
  body { padding-bottom: 84px; }  /* clear sticky mcta (single-line bar ≈ 80px incl. shadow) */
  .cookie-banner { padding: 14px 18px; }
  /* Cookie-Buttons auf dem Handy untereinander (volle Breite): kein abgeschnittener
     Text, gleich prominente & große Tap-Targets. Die spezifischeren Selektoren
     (.cookie-*-actions .cookie-btn) überschreiben hier auch das min-width:130px des Modals. */
  .cookie-banner-actions { width: 100%; flex-direction: column; gap: 8px; }
  .cookie-banner-actions .cookie-btn { width: 100%; flex: none; min-width: 0; white-space: normal; }
  .cookie-modal-box { padding: 24px 18px 18px; }
  .cookie-modal-actions { flex-direction: column; gap: 8px; }
  .cookie-modal-actions .cookie-btn { width: 100%; flex: none; min-width: 0; white-space: normal; }
}

/* High contrast support */
@media (prefers-contrast: more) {
  :root { --text-m: #2c3340; --text-lt: #3a4655; }
}

/* ════════════════════════════════════════════════════════════════════════
   Font-size toggle overrides (senior accessibility — A− A A+ widget)
   "lg" = ~12% bigger, "xl" = ~24% bigger. Touch targets scale too.
   ════════════════════════════════════════════════════════════════════════ */
html.font-size-lg body                              { font-size: 19px; }
html.font-size-lg p                                  { font-size: 19px; }
html.font-size-lg h4                                 { font-size: 19px; }
html.font-size-lg .btn                               { font-size: 18px; min-height: 50px; padding: 15px 28px; }
html.font-size-lg .btn-lg                            { font-size: 20px; min-height: 58px; padding: 18px 36px; }
html.font-size-lg .btn-sm                            { font-size: 16px; min-height: 46px; padding: 12px 22px; }
html.font-size-lg .fg input,
html.font-size-lg .fg select,
html.font-size-lg .fg textarea                       { font-size: 18px; min-height: 52px; padding: 14px 14px; }
html.font-size-lg .fg label                          { font-size: 17px; }
html.font-size-lg .fg .field-error                   { font-size: 15px; }
html.font-size-lg .form-btn                          { font-size: 19px; min-height: 58px; padding: 17px; }
html.font-size-lg .form-privacy                      { font-size: 14px; }
html.font-size-lg .faq-q                             { font-size: 19px; min-height: 60px; padding: 22px 22px; }
html.font-size-lg .faq-a                             { font-size: 18px; }
html.font-size-lg .review-text                       { font-size: 18px; }
html.font-size-lg .review-name                       { font-size: 17px; }
html.font-size-lg .review-city                       { font-size: 14px; }
html.font-size-lg .footer-tagline                    { font-size: 17px; }
html.font-size-lg .footer-col a                      { font-size: 17px; padding: 8px 0; }
html.font-size-lg .fci                               { font-size: 17px; }
html.font-size-lg .footer-copy                       { font-size: 15px; }
html.font-size-lg .footer-legal a                    { font-size: 15px; }
html.font-size-lg .topbar                            { font-size: 17px; }
html.font-size-lg .main-nav a                        { font-size: 18px; }
html.font-size-lg .hdr-phone                         { font-size: 18px; }
html.font-size-lg .htrust-txt                        { font-size: 16px; }
html.font-size-lg .htrust-txt strong                 { font-size: 17px; }
html.font-size-lg .trust-strip-intro                 { font-size: 14px; }
html.font-size-lg .trust-txt                         { font-size: 15px; }
html.font-size-lg .trust-txt strong                  { font-size: 17px; }
html.font-size-lg .stat-label                        { font-size: 16px; }
html.font-size-lg .stat-label strong                 { font-size: 17px; }
html.font-size-lg .step p                            { font-size: 18px; }
html.font-size-lg .svc-card p                        { font-size: 18px; }
html.font-size-lg .price-feats li                    { font-size: 18px; }
html.font-size-lg .price-amt                         { font-size: 42px; }
html.font-size-lg .cta-inner p                       { font-size: 19px; }
html.font-size-lg .cta-trust-item                    { font-size: 16px; }
html.font-size-lg .hero-lead                         { font-size: 19px; }
html.font-size-lg .breadcrumb                        { font-size: 15px; }
html.font-size-lg .cookie-banner-desc                { font-size: 16px; }
html.font-size-lg .cookie-btn                        { font-size: 17px; min-height: 52px; }
html.font-size-lg .badge                             { font-size: 14px; padding: 6px 16px; }
html.font-size-lg .eyebrow                           { font-size: 13px; }
html.font-size-lg .mcta button,
html.font-size-lg .mcta a                            { font-size: 18px; min-height: 56px; }

/* ───── XL (~24% bigger than default) ───── */
html.font-size-xl body                              { font-size: 21px; }
html.font-size-xl p                                  { font-size: 21px; }
html.font-size-xl h4                                 { font-size: 21px; }
html.font-size-xl .btn                               { font-size: 20px; min-height: 56px; padding: 17px 30px; }
html.font-size-xl .btn-lg                            { font-size: 22px; min-height: 64px; padding: 20px 38px; }
html.font-size-xl .btn-sm                            { font-size: 17px; min-height: 50px; padding: 14px 24px; }
html.font-size-xl .fg input,
html.font-size-xl .fg select,
html.font-size-xl .fg textarea                       { font-size: 20px; min-height: 58px; padding: 16px 16px; }
html.font-size-xl .fg label                          { font-size: 19px; }
html.font-size-xl .fg .field-error                   { font-size: 17px; }
html.font-size-xl .form-btn                          { font-size: 21px; min-height: 64px; padding: 20px; }
html.font-size-xl .form-privacy                      { font-size: 16px; }
html.font-size-xl .faq-q                             { font-size: 21px; min-height: 66px; padding: 24px 24px; }
html.font-size-xl .faq-a                             { font-size: 20px; }
html.font-size-xl .review-text                       { font-size: 20px; }
html.font-size-xl .review-name                       { font-size: 19px; }
html.font-size-xl .review-city                       { font-size: 16px; }
html.font-size-xl .footer-tagline                    { font-size: 19px; }
html.font-size-xl .footer-col a                      { font-size: 19px; padding: 9px 0; }
html.font-size-xl .fci                               { font-size: 19px; }
html.font-size-xl .footer-copy                       { font-size: 17px; }
html.font-size-xl .footer-legal a                    { font-size: 17px; }
html.font-size-xl .topbar                            { font-size: 19px; }
html.font-size-xl .main-nav a                        { font-size: 20px; }
html.font-size-xl .hdr-phone                         { font-size: 20px; }
html.font-size-xl .htrust-txt                        { font-size: 18px; }
html.font-size-xl .htrust-txt strong                 { font-size: 19px; }
html.font-size-xl .trust-strip-intro                 { font-size: 15px; }
html.font-size-xl .trust-txt                         { font-size: 17px; }
html.font-size-xl .trust-txt strong                  { font-size: 19px; }
html.font-size-xl .stat-label                        { font-size: 18px; }
html.font-size-xl .stat-label strong                 { font-size: 19px; }
html.font-size-xl .step p                            { font-size: 20px; }
html.font-size-xl .svc-card p                        { font-size: 20px; }
html.font-size-xl .price-feats li                    { font-size: 20px; }
html.font-size-xl .price-amt                         { font-size: 46px; }
html.font-size-xl .cta-inner p                       { font-size: 21px; }
html.font-size-xl .cta-trust-item                    { font-size: 18px; }
html.font-size-xl .hero-lead                         { font-size: 21px; }
html.font-size-xl .breadcrumb                        { font-size: 17px; }
html.font-size-xl .cookie-banner-desc                { font-size: 18px; }
html.font-size-xl .cookie-btn                        { font-size: 19px; min-height: 56px; }
html.font-size-xl .badge                             { font-size: 16px; padding: 7px 18px; }
html.font-size-xl .eyebrow                           { font-size: 14px; }
html.font-size-xl .mcta button,
html.font-size-xl .mcta a                            { font-size: 20px; min-height: 60px; }

/* Headings — keep clamp-based scaling but with bumped maxes for size-lg/xl */
html.font-size-lg h1 { font-size: clamp(36px, 5.4vw, 62px); }
html.font-size-xl h1 { font-size: clamp(40px, 5.8vw, 68px); }
html.font-size-lg h2 { font-size: clamp(27px, 3.5vw, 44px); }
html.font-size-xl h2 { font-size: clamp(30px, 3.9vw, 48px); }
html.font-size-lg h3 { font-size: clamp(21px, 2vw, 26px); }
html.font-size-xl h3 { font-size: clamp(24px, 2.2vw, 28px); }
