/* herbstlichter — Startseiten-Module (Senioren-Adaption, Design-Handoff).
   Ruhig, barrierearm: viel Weißraum, große Schrift, weiche Linien/Schatten.
   Gescoped unter .hl-home; Farben aus den hl-Design-Tokens (CSS-Variablen). */

.hl-home {
  --accent: var(--action-accent, #E9740B);
  --accent-soft: var(--bg-soft, #FBE6D2);
  --accent-on: #fff;
  --line: 1.5px solid var(--border-subtle, #E6E1D4);
  --soft-sm: 0 1px 2px rgba(60,50,30,.05);
  --soft-md: 0 8px 24px -10px rgba(60,50,30,.16);
  --soft-lg: 0 16px 40px -16px rgba(60,50,30,.22);
  --t-meta: 15px; --t-body: 19px; --t-lead: 22px; --t-card: 22px;
  --t-h4: 24px; --t-h3: 30px; --t-hero: clamp(34px, 4.5vw, 56px);
  background: var(--bg-page, #FFF8E6);
  color: var(--ink, #111);
  font-size: var(--t-body); line-height: 1.7;
}
.hl-home .wrap { max-width: 1180px; margin: 0 auto; padding-inline: 32px; }
@media (max-width:560px){ .hl-home .wrap { padding-inline: 18px; } }
.hl-home .section { padding-block: 56px; }
.hl-home img { display:block; max-width:100%; }

.hl-home .eyebrow {
  display:inline-block; font-weight:900; font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
  padding:7px 15px; border-radius:50px; background:var(--accent-soft); color:var(--ink,#111);
}
.hl-home .section-head { display:flex; align-items:center; gap:18px; margin-bottom:28px; }
.hl-home .section-head__t { font-weight:900; font-size:var(--t-h3); letter-spacing:-1px; line-height:1.05; white-space:nowrap; }
.hl-home .section-head__line { flex:1; height:1.5px; background:var(--border-subtle,#E0DAC9); }
.hl-home .section-head__link { font-weight:700; font-size:var(--t-meta); white-space:nowrap; color:var(--link,#B71C4C); display:inline-flex; align-items:center; gap:6px; }
.hl-home .section-head__link:hover { color:var(--ink,#111); }
@media (max-width:560px){ .hl-home .section-head{flex-wrap:wrap;gap:12px} .hl-home .section-head__line{display:none} }

.hl-home .btn {
  display:inline-flex; align-items:center; gap:10px; justify-content:center; font-weight:900; font-size:16px;
  padding:16px 26px; min-height:56px; border-radius:50px; border:none; background:var(--ink,#111); color:#fff;
  box-shadow:var(--soft-sm); transition:transform .2s, box-shadow .2s, background .2s;
}
.hl-home .btn:hover { transform:translateY(-2px); box-shadow:var(--soft-md); }
.hl-home .btn--accent { background:var(--accent); color:var(--accent-on); }

/* ---- HERO B (split: Begrüßung + Suche links, Featured-Card rechts) ---- */
.hl-hero { border-bottom: var(--line); }
.hl-hero__inner { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding-block:56px; }
.hl-hero__greet { font-weight:700; font-size:var(--t-lead); color:var(--text-secondary,#504C42); margin-bottom:12px; }
.hl-hero__title { font-weight:900; font-size:var(--t-hero); letter-spacing:-1.5px; line-height:1.02; }
.hl-hero__title em { font-style:normal; color:var(--accent); }
.hl-hero__sub { font-size:var(--t-lead); line-height:1.6; color:var(--text-secondary,#37342C); margin-top:16px; max-width:40ch; }
.hl-search { display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.hl-search__field {
  flex:1; min-width:220px; display:flex; align-items:center; gap:12px; background:#fff;
  border:var(--line); border-radius:50px; padding:0 22px; box-shadow:var(--soft-md); min-height:64px;
}
.hl-search__field:focus-within { border-color:var(--accent); box-shadow:var(--soft-lg); }
.hl-search__field svg { flex-shrink:0; color:var(--text-muted,#6E6A60); }
.hl-search__input { flex:1; border:none; outline:none; background:transparent; min-width:0; font-family:inherit; font-size:18px; font-weight:700; color:var(--ink,#111); }
/* Globale a11y-Regel (input:focus-visible -> 3px orange outline) erzeugt sonst
   ein hartes Rechteck IM Suchfeld. Fokus zeigt stattdessen das ganze Feld
   (border + shadow via .hl-search__field:focus-within). */
.hl-search__input:focus, .hl-search__input:focus-visible { outline:none; box-shadow:none; }
.hl-search__input::placeholder { color:var(--gray-400,#969288); font-weight:400; }
.hl-search__btn { flex-shrink:0; min-height:64px; padding:0 30px; border-radius:50px; border:none; background:var(--accent); color:#fff; font-weight:900; font-size:17px; box-shadow:var(--soft-sm); display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.hl-search__btn:hover { transform:translateY(-2px); box-shadow:var(--soft-md); }
.hl-suggest { display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.hl-suggest__lbl { font-size:var(--t-meta); font-weight:700; color:var(--text-muted,#6E6A60); }
.hl-chip { font-weight:700; font-size:var(--t-meta); padding:9px 16px; border-radius:50px; border:var(--line); background:#fff; color:var(--ink,#111); }
.hl-chip:hover { background:var(--accent-soft); border-color:var(--accent); }

.hl-feature { border:var(--line); border-radius:20px; overflow:hidden; background:#fff; box-shadow:var(--soft-lg); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.hl-feature:hover { transform:translateY(-3px); }
.hl-feature__img { aspect-ratio:16/10; overflow:hidden; background:var(--accent-soft); }
.hl-feature__img img { width:100%; height:100%; object-fit:cover; }
.hl-feature__body { padding:24px 26px 26px; }
.hl-feature__title { font-weight:900; font-size:var(--t-h4); line-height:1.15; letter-spacing:-.5px; margin:12px 0 10px; }
.hl-feature__meta { font-size:var(--t-meta); font-weight:700; color:var(--text-muted,#6E6A60); }
@media (max-width:860px){ .hl-hero__inner{grid-template-columns:1fr; gap:32px} }

/* ---- TOPICS (helle Themen-Kacheln) ---- */
.hl-topics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.hl-topic { display:flex; flex-direction:column; gap:14px; padding:26px 22px; border:var(--line); border-radius:20px; background:#fff; box-shadow:var(--soft-sm); transition:transform .2s, box-shadow .2s; }
.hl-topic:hover { transform:translateY(-3px); box-shadow:var(--soft-md); }
.hl-topic__icon { width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--cat,#E9740B); font-weight:900; font-size:26px; }
.hl-topic__name { font-weight:900; font-size:var(--t-card); letter-spacing:-.5px; line-height:1.15; }
.hl-topic__count { font-size:var(--t-meta); font-weight:700; color:var(--text-muted,#6E6A60); margin-top:auto; }
@media (max-width:780px){ .hl-topics{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .hl-topics{grid-template-columns:1fr} }

/* ---- ARTICLES (Grid + Cards) ---- */
.hl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:960px){ .hl-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .hl-grid{grid-template-columns:1fr} }
.hl-card { display:flex; flex-direction:column; border:var(--line); border-radius:20px; overflow:hidden; background:#fff; box-shadow:var(--soft-sm); transition:transform .2s, box-shadow .2s; }
.hl-card:hover { transform:translateY(-3px); box-shadow:var(--soft-md); }
.hl-card__img { aspect-ratio:16/10; overflow:hidden; background:var(--accent-soft); position:relative; }
.hl-card__img img { width:100%; height:100%; object-fit:cover; }
.hl-card__tag { position:absolute; left:14px; top:14px; display:inline-flex; align-items:center; gap:7px; font-weight:900; font-size:12px; letter-spacing:1px; text-transform:uppercase; padding:6px 13px; border-radius:50px; background:#fff; color:var(--ink,#111); box-shadow:var(--soft-sm); }
.hl-card__tag::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--cat,#6E6A60); }
.hl-card__body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.hl-card__title { font-weight:900; font-size:var(--t-card); line-height:1.2; letter-spacing:-.4px; }
.hl-card__excerpt { font-size:var(--t-meta); line-height:1.55; color:var(--text-secondary,#37342C); }
.hl-card__meta { font-size:var(--t-meta); font-weight:700; color:var(--text-muted,#6E6A60); margin-top:auto; }
.hl-empty { grid-column:1/-1; text-align:center; padding:48px 20px; border:2px dashed var(--gray-300,#C8C4BA); border-radius:20px; background:#fff; }
.hl-empty__t { font-weight:900; font-size:var(--t-h4); margin-bottom:8px; }
.hl-empty__s { color:var(--text-muted,#6E6A60); font-size:var(--t-body); }

.hl-home .section--cream { background:#fff; border-top:var(--line); border-bottom:var(--line); }
@media (prefers-reduced-motion: reduce){ .hl-home * { transition-duration:.001ms !important; } }

/* Pflege-Lotse-Promo auf der Startseite (zwischen Hero und Themen) — analog
   zum Block auf /tools, aber mit den hl-home-Tokens. */
.hl-lotse-section { padding-top: 30px; }
.hl-lotse {
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:linear-gradient(135deg,#fff,var(--accent-soft)); border:var(--line); border-radius:18px;
  padding:24px 28px; text-decoration:none; box-shadow:var(--soft-md);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.hl-lotse:hover { transform:translateY(-2px); box-shadow:var(--soft-lg); border-color:var(--accent); }
.hl-lotse__eyebrow { display:block; font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--accent); }
.hl-lotse__title { display:block; font-size:23px; font-weight:800; color:var(--ink,#111); margin:5px 0 7px; line-height:1.2; }
.hl-lotse__desc { margin:0; font-size:15.5px; line-height:1.55; color:var(--text-secondary,#37342C); max-width:62ch; }
.hl-lotse__cta { flex:0 0 auto; font-size:17px; font-weight:900; color:#fff; background:var(--accent);
  border-radius:50px; padding:14px 28px; white-space:nowrap; box-shadow:var(--soft-sm); }
@media (max-width:600px){ .hl-lotse{padding:20px} .hl-lotse__cta{width:100%; text-align:center} }

/* Hero-Suche: Autocomplete-Dropdown */
.hl-search-wrap { position: relative; }
.hl-search__results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: #fff; border: var(--line); border-radius: 16px; box-shadow: var(--soft-lg);
  overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.hl-search__results-cat {
  font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted, #6E6A60); padding: 12px 18px 6px;
}
.hl-search__result {
  display: flex; align-items: center; gap: 12px; padding: 11px 18px; text-decoration: none;
  border-top: 1px solid var(--border-subtle, #E6E1D4);
}
.hl-search__results-cat + .hl-search__result { border-top: none; }
.hl-search__result:hover, .hl-search__result.is-active { background: var(--accent-soft, #FBE6D2); }
.hl-search__result-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px;
}
.hl-search__result-tx { min-width: 0; }
.hl-search__result-ti { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink, #111); line-height: 1.3; }
.hl-search__result-me { display: block; font-size: 12.5px; color: var(--text-muted, #6E6A60); }
.hl-search__noresult { padding: 16px 18px; font-size: 14px; color: var(--text-muted, #6E6A60); }