/* HOMECARE – die Alltagshelfer · Pflegereform 2027
   Gemeinsame Styles für Landingpage und Pflege-Check. */

/* ---------- Schriften (selbst gehostet, keine Google-Anfrage) ---------- */
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/fira-sans-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/fira-sans-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/fira-sans-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/fira-sans-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  --blue: #427cbf;
  /* Für kleine Schrift (und weiße Schrift auf Blau) reicht #427cbf nicht für WCAG AA (4,31:1) → Textvariante 5,3:1 */
  --blue-text: #386dab;
  --blue-hover: #2f5e94;
  --blue-active: #2f5e94;
  --blue-deep: #386dab;
  --navy: #427cbf;
  --sky: #427cbf;
  --blue-50: #eef5fb;
  --orange: #c97700;
  --orange-hover: #a86200;
  --orange-active: #8f5600;
  --orange-ink: #8f5600;
  --orange-bg: #fef4e5;
  --surface-blue: #f1f6fc;
  --surface-warm: #f8f7f6;
  --track: #e8eef6;
  --ink: #221f1c;
  --ink-2: #4a443e;
  --ink-3: #6b645c;
  --muted: #6b645c;
  --border: #e2dfda;
  --border-blue: #d6e2f0;
  --border-strong: #cac5be;
  --success: #2f7a3d;
  --success-bg: #eaf6ec;
  --danger: #b53a2f;
  --gray-200: #e2dfda;
  --gray-500: #8a827a;

  --font-sans: 'Fira Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Fira Sans', system-ui, sans-serif;

  --shadow: 0 10px 32px rgba(37, 78, 128, 0.08);
  --shadow-tile: 0 6px 20px rgba(37, 78, 128, 0.06);
  --shadow-tile-hover: 0 10px 28px rgba(37, 78, 128, 0.12);
  --shadow-focus: 0 0 0 3px rgba(66, 124, 191, 0.35);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Basis ---------- */
/* Widescreen: ab 1920 px wächst alles proportional mit, statt klein in der Mitte zu stehen */
/* Nur vergrößern, wenn auch die Höhe da ist (sonst wird z. B. auf Ultrawide-Monitoren der Hero zu hoch).
   --zoom wird mitgeführt, weil vh-Einheiten unter zoom mitwachsen und sonst zu groß würden. */
:root { --zoom: 1; }
@media (min-width: 1900px) and (min-height: 860px) { html { zoom: 1.15; } :root { --zoom: 1.15; } }
@media (min-width: 2400px) and (min-height: 1200px) { html { zoom: 1.35; } :root { --zoom: 1.35; } }
@media (min-width: 3200px) and (min-height: 1700px) { html { zoom: 1.7; } :root { --zoom: 1.7; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--blue-text); }
a:hover { color: var(--blue-hover); }
h1, h2, h3, p { margin: 0; }
/* Deutlich sichtbarer Fokus für Tastatur-Nutzer (3 px, Kontrast ≥ 3:1) */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: #fff; color: var(--blue-text); padding: 12px 18px; border-radius: 12px; font: 600 16px/1 var(--font-body); box-shadow: var(--shadow); text-decoration: none; }
.skip-link:focus { top: 12px; }
/* hidden-Attribut immer respektieren, auch wenn eine Klasse display setzt (z. B. Tab-Panels) */
[hidden] { display: none !important; }
.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; }

.container { max-width: 1120px; margin: 0 auto; }
.accent { color: var(--orange); }

/* ---------- Button (Design-System) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease-out), box-shadow 180ms var(--ease);
}
.btn:not(:disabled):active { transform: scale(0.98); transition-duration: 80ms; }
.btn--md { padding: 12px 24px; font: 600 1rem/1 var(--font-body); }
.btn--lg { padding: 16px 32px; font: 700 19px/1 var(--font-sans); }
.btn--block { width: 100%; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); color: #fff; }
.btn--primary:active { background: var(--blue-active); }
.btn--accent { background: var(--orange); color: #fff; box-shadow: 0 8px 20px -8px rgba(201, 119, 0, 0.7); }
.btn--accent:hover { background: var(--orange-hover); color: #fff; box-shadow: 0 12px 26px -10px rgba(168, 98, 0, 0.75); }
.btn--accent:active { background: var(--orange-active); }
@media (hover: hover) {
  .btn--accent:not(:disabled):hover { transform: translateY(-1px); }
  .btn--accent:not(:disabled):hover:active { transform: scale(0.98); }
}
.btn:disabled, .btn[aria-disabled="true"] { background: var(--gray-200); border-color: var(--gray-200); color: var(--gray-500); cursor: not-allowed; box-shadow: none; }
/* Pfeil im CTA – als Maske, damit er die Textfarbe übernimmt */
.btn--arrow::after {
  content: ''; flex: none; width: 20px; height: 20px; margin-right: -4px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 220ms var(--ease-out);
}
.btn--arrow:hover::after { transform: translateX(3px); }
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; line-height: 1.2; }
  .btn--lg { padding: 16px 18px; font-size: 19px; min-height: 56px; }
}

/* ---------- Telefon im Header (Landingpage und Pflege-Check) ---------- */
.phone { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blue-deep); white-space: nowrap; padding: 4px 0; }
.phone__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-50); color: var(--blue); display: flex; align-items: center; justify-content: center; transition: background 180ms var(--ease), color 180ms var(--ease); }
.phone__text { display: flex; flex-direction: column; gap: 3px; font: 600 17px/1.1 var(--font-sans); }
.phone__text small { font: 500 12px/1 var(--font-body); color: var(--ink-3); }
.phone:hover { color: var(--blue-deep); }
.phone:hover .phone__icon { background: var(--blue); color: #fff; }
@media (max-width: 479px) {
  .phone { gap: 8px; }
  .phone__icon { width: 34px; height: 34px; }
  .phone__icon svg { width: 17px; height: 17px; }
  .phone__text { font-size: 15px; }
  .phone__text small { display: none; }
}

/* ---------- Input (Design-System) ---------- */
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; font-family: var(--font-sans); }
.field__label { font: 600 0.875rem/1.5 var(--font-body); color: var(--ink); }
.field__req { color: var(--orange); }
.field__input {
  font: 400 1rem/1.6 var(--font-body); padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border); color: var(--ink); background: #fff; width: 100%;
  transition: box-shadow 120ms var(--ease), border-color 120ms var(--ease);
}
.field__input::placeholder { color: var(--muted); }
.field__input:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); box-shadow: none; }
.field__help { font: 400 0.875rem/1.5 var(--font-body); color: var(--muted); }
.field.is-error .field__input { border-color: var(--danger); }
.field.is-error .field__help { color: var(--danger); }

/* ---------- Accordion (Design-System) ---------- */
.accordion { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-sans); }
.accordion__item { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.accordion__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 20px; background: #fff; border: 0; cursor: pointer; text-align: left;
  font: 600 16px var(--font-sans); color: var(--ink);
}
.accordion__icon { color: var(--blue); font-size: 20px; line-height: 1; transition: transform 260ms var(--ease-out), color 180ms var(--ease); flex: none; }
.accordion__btn[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
/* Ohne JavaScript sind alle Antworten offen (für Suchmaschinen und KI-Crawler); mit JS klappen sie auf */
.accordion__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 300ms var(--ease-out); }
.js .accordion__panel { grid-template-rows: 0fr; }
.js .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__clip { overflow: hidden; min-height: 0; }
.accordion__body { padding: 0 20px 20px; font: 400 1rem/1.65 var(--font-body); color: #4a443e; transition: opacity 200ms var(--ease); }
.accordion__body p + p { margin-top: 10px; }
.js .accordion__body { opacity: 0; }
.js .accordion__item.is-open .accordion__body { opacity: 1; transition-delay: 60ms; }
.accordion__btn:hover .accordion__icon { color: var(--blue-hover); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; }
  .btn:active { transform: none; }
}