/* senioren-digital.de
   Gestaltung bewusst auf gute Lesbarkeit ausgelegt: grosse Grundschrift,
   hohe Kontraste, ruhige Flaechen, grosszuegige Klickflaechen (mind. 48 px). */

:root {
  /* Text */
  --ink: #16232e;
  --ink-soft: #46596b;
  --ink-soft-contrast: #33424f;

  /* Dunkelblaue Flaechen */
  --deep: #0f3050;
  --deep-mid: #164066;
  --deep-light: #1d5480;
  --deep-dark: #0a2138;

  /* Blau als Aktionsfarbe */
  --blue: #1f6bb0;
  --blue-dark: #185792;
  --blue-light: #e8f1f9;
  --blue-tint: #f4f9fd;

  /* Warme Akzente */
  --sand: #ffd9a8;
  --sand-light: #ffe7c6;
  --amber: #c9741a;
  --amber-light: #fdf1e2;
  --amber-line: #e5c091;
  --amber-line-soft: #e0bd8a;
  --amber-ink: #47300c;

  /* Text auf dunklem Grund */
  --on-deep: #dae7f2;
  --on-deep-soft: #cfe0ee;
  --on-deep-contrast: #f2f7fb;
  --on-dark: #cfdbe6;

  /* Flaechen und Linien */
  --paper: #fbfaf7;
  --white: #fff;
  --line: #d7dee5;
  --line-strong: #b3bfcb;

  --max: 1140px;
  --radius: 14px;
  /* Hoehe des klebenden Kopfbereichs; steuert den Versatz bei Ankersprüngen */
  --header-h: 4.25rem;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Ankerziele nicht unter dem klebenden Kopfbereich parken */
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
  /* Grundschrift bewusst groesser als ueblich */
  font-size: 112.5%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); }
button, input { font: inherit; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

::selection { color: var(--white); background: var(--blue); }

.wrap { width: min(calc(100% - 2.5rem), var(--max)); margin-inline: auto; }

.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-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1.25rem;
  color: var(--white);
  background: var(--deep-dark);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Kopfbereich ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--deep);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--white);
  background: var(--deep);
  border-radius: 12px;
}
.brand-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.brand small { display: block; color: var(--ink-soft); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-left: auto;
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 0.35rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.main-nav a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.main-nav a[aria-current="page"] { color: var(--deep); border-bottom-color: var(--amber); }

/* ---------- Hinweis nach Weiterleitung ---------- */

.redirect-note {
  color: var(--amber-ink);
  background: var(--amber-light);
  border-bottom: 1px solid var(--amber-line-soft);
}
.redirect-note > div {
  width: min(calc(100% - 2.5rem), var(--max));
  margin-inline: auto;
  padding-block: 0.8rem;
}

/* ---------- Hero ---------- */

.hero {
  color: var(--white);
  background: var(--deep);
  background-image: linear-gradient(155deg, var(--deep) 0%, var(--deep-mid) 55%, var(--deep-light) 100%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero-copy > * { min-width: 0; }

h1, h2, h3 { margin-top: 0; line-height: 1.2; letter-spacing: -0.015em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin-bottom: 1rem; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.9rem; text-wrap: balance; }
h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }

.hero p { margin: 0 0 1.6rem; color: var(--on-deep); font-size: 1.08rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.4rem;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.button-primary { color: var(--deep-dark); background: var(--sand); }
.button-primary:hover { background: var(--sand-light); }
.button-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.button-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.button-solid { color: var(--white); background: var(--blue); }
.button-solid:hover { background: var(--blue-dark); }

/* Bildbereich im Hero */
.hero-figure { position: relative; margin: 0; }
.hero-figure img { width: 100%; border-radius: var(--radius); }
.hero-figure figcaption {
  margin-top: 0.6rem;
  color: var(--on-deep-soft);
  font-size: 0.78rem;
}

/* Sachliche Kennzahlenreihe */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.facts > div { padding: 1.4rem 1.2rem; background: var(--white); }
.facts strong { display: block; color: var(--deep); font-size: 1.7rem; line-height: 1.1; }
.facts span { display: block; margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.9rem; }
.facts cite { display: block; margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.76rem; font-style: normal; }

/* ---------- Abschnitte ---------- */

.section { padding-block: clamp(2.5rem, 6vw, 4.2rem); }
.section-soft { background: var(--white); }

.section-head { max-width: 46rem; margin-bottom: 2rem; }
.section-head p { margin-bottom: 0; color: var(--ink-soft); font-size: 1.03rem; }

.prose { max-width: 42rem; }
.prose > * { min-width: 0; }
.prose p { margin-block: 0 1.1rem; }
.prose ul { margin-block: 0 1.2rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }

/* Karten */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.1rem;
}
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.section-soft .card { background: var(--paper); }
.card h3 { margin-bottom: 0.5rem; }
.card p { margin: 0 0 1rem; color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  color: var(--deep);
  background: var(--blue-light);
  border-radius: 12px;
}
.card-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Eigenstaendiger Aktionslink: bewusst grosse Klickflaeche (mind. 44 px),
   weil die Zielgruppe haeufig mit eingeschraenkter Feinmotorik bedient. */
.card-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  font-weight: 700;
}

/* Verweiskacheln auf Unterseiten */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.1rem;
}
.topic {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  min-height: 100%;
  padding: 1.4rem;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.topic:hover { background: var(--blue-light); border-color: var(--blue); }
.topic strong { color: var(--deep); font-size: 1.1rem; }
.topic span { color: var(--ink-soft); font-size: 0.94rem; }
.topic em { margin-top: auto; padding-top: 0.6rem; color: var(--blue); font-style: normal; font-weight: 700; }

/* Schrittfolgen */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  min-width: 0;
  padding: 0 0 1.4rem 3.4rem;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--white);
  background: var(--blue);
  border-radius: 50%;
  font-weight: 800;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.6rem;
  bottom: 0.4rem;
  left: 1.2rem;
  border-left: 2px solid var(--line-strong);
}
.steps strong { display: block; margin-bottom: 0.2rem; }
.steps p { margin: 0; color: var(--ink-soft); }

/* Hinweiskasten */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.3rem 1.4rem;
  background: var(--amber-light);
  border: 1px solid var(--amber-line);
  border-radius: var(--radius);
}
.callout > svg { width: 26px; height: 26px; flex: none; color: var(--amber); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.callout p { margin: 0; }
.callout p + p { margin-top: 0.6rem; }

/* ---------- Produktsuche ---------- */

.search-section { background: var(--blue-light); }
.search-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2rem, 5vw, 3rem);
}
.search-panel h2 { margin-bottom: 0.5rem; }
.search-panel > div > p { margin: 0; color: var(--ink-soft); }

.product-search label { display: block; margin-bottom: 0.5rem; font-weight: 700; }
.search-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.search-row input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 52px;
  padding: 0 1rem;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line-strong);
  border-radius: 10px;
}
.search-row input::placeholder { color: var(--ink-soft); opacity: 1; }
.search-row input:focus-visible { border-color: var(--blue); }
.search-hint { margin: 0.7rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }

.quick-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.2rem; }
.quick-links span { font-weight: 700; }
.quick-links a {
  display: inline-flex;
  align-items: center;
  /* verhindert, dass ein langes Wort die Pille aus dem Viewport schiebt */
  max-width: 100%;
  min-height: 44px;
  padding: 0 0.9rem;
  color: var(--deep);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.94rem;
  text-decoration: none;
}
.quick-links a:hover { border-color: var(--blue); background: var(--blue-tint); }

/* ---------- FAQ ---------- */

.faq-list { max-width: 46rem; }
.faq-list details {
  padding: 0.35rem 1.2rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.faq-list details + details { margin-top: 0.7rem; }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { content: ""; }
/* Der Fragetext muss schrumpfen duerfen, sonst wird das Zeichen rechts
   bei vergroesserter Schrift aus dem Viewport gedrueckt. */
.faq-question { min-width: 0; }
.faq-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--deep);
  background: var(--blue-light);
  border-radius: 50%;
  font-weight: 800;
  /* schneller als das Aufklappen: Rueckmeldung, nicht Layoutwechsel */
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-list details[open] .faq-toggle { transform: rotate(45deg); }
.faq-list details > p { margin: 0 0 1rem; color: var(--ink-soft); }

/* Die Fragen bilden ein ausschliessendes Akkordeon (details name="faq"):
   Oeffnet man eine, schliesst die vorherige. Ohne Uebergang springt das Layout
   und die zugehende Nachbarfrage verschwindet unkommentiert. Die interpolierte
   Hoehe macht sichtbar, was sich oeffnet und was zugeht.
   Bewusst als Progressive Enhancement: Wo der Browser die Bausteine nicht
   kennt, bleibt das heutige sofortige Auf- und Zuklappen erhalten. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  :root { interpolate-size: allow-keywords; }

  .faq-list details::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 320ms cubic-bezier(0.16, 1, 0.3, 1),
      content-visibility 320ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
  }
  .faq-list details[open]::details-content { block-size: auto; }
}

/* ---------- Quellen ---------- */

.source-list { display: grid; gap: 0.7rem; max-width: 46rem; margin: 0; padding: 0; list-style: none; }
.source-list li { min-width: 0; }
.source-list a {
  display: block;
  min-width: 0;
  padding: 1rem 1.2rem;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  overflow-wrap: break-word;
}
.source-list a:hover { border-color: var(--blue); background: var(--blue-tint); }
.source-list small { display: block; color: var(--ink-soft); font-size: 0.82rem; }
.source-list strong { color: var(--deep); }

/* ---------- Fusszeile ---------- */

.site-footer {
  color: var(--on-dark);
  background: var(--deep-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem;
  padding-block: clamp(2rem, 5vw, 3rem);
}
.footer-grid > div { min-width: 0; }
.site-footer h2 { margin-bottom: 0.7rem; color: var(--white); font-size: 1.05rem; }
.site-footer p { margin: 0 0 0.8rem; font-size: 0.94rem; }
.site-footer a { color: var(--sand); }
.footer-nav { display: grid; gap: 0.2rem; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.85rem;
}

/* ---------- Schmale Ansichten ---------- */

@media (max-width: 62rem) {
  .hero-inner,
  .search-panel { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 46rem) {
  html { font-size: 106.25%; }
  /* Der Kopfbereich braucht schmal zwei Navigationszeilen. Klebend wuerde er
     rund ein Fuenftel des Bildschirms dauerhaft belegen, bei vergroesserter
     Systemschrift die Haelfte. Er scrollt deshalb mit; die Navigation steht
     zusaetzlich vollstaendig in der Fusszeile. */
  .site-header { position: static; }
  :root { --header-h: 0rem; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .header-inner { padding-block: 0.6rem; }
  .main-nav { width: 100%; margin-left: 0; gap: 0 1rem; }
  .main-nav a { min-height: 44px; }
  /* Nebeneinander passen die beiden Schaltflaechen schmal nicht mehr.
     Gestapelt in gleicher Breite statt unterschiedlich breit umgebrochen. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  h2, h3 { hyphens: auto; overflow-wrap: break-word; }
  /* Lange deutsche Komposita laufen bei stark vergroesserter Systemschrift
     sonst aus dem Viewport. Wo der Browser ein Trennwoerterbuch fuer lang="de"
     hat, trennt "hyphens" an Silbengrenzen; wo nicht, verhindert
     "overflow-wrap" wenigstens das seitliche Scrollen.
     Die h1 bleibt bewusst ausgenommen: dort steuern weiche Trennstellen
     (­) den Umbruch, damit die Kernaussage nicht willkuerlich bricht. */
  p, li, cite, figcaption,
  .faq-question, .topic strong, .quick-links a, .facts strong {
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .hero-figure figcaption {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    max-width: calc(100% - 1.3rem);
    margin: 0;
    padding: 0.35rem 0.55rem;
    color: var(--white);
    background: rgba(4, 19, 33, 0.88);
    border-radius: 6px;
    font-size: 0.72rem;
    line-height: 1.25;
  }
}

/* ---------- Nutzervorlieben ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Nur Drehung und Aufklappbewegung entfallen. Die Farbuebergaenge an
     Schaltflaechen und Kacheln sind Rueckmeldung, keine Bewegung, und bleiben
     deshalb erhalten. */
  .faq-toggle { transition: none; }
  .faq-list details::details-content { transition: none; }
}

@media (prefers-contrast: more) {
  :focus-visible { outline-width: 4px; outline-offset: 3px; }
  .card,
  .topic,
  .faq-list details,
  .source-list a,
  .search-row input { border-color: var(--ink); }
  .hero p { color: var(--on-deep-contrast); }
  .card p,
  .topic span,
  .section-head p { color: var(--ink-soft-contrast); }
}

@media (forced-colors: active) {
  .card-icon,
  .brand-mark,
  .faq-toggle,
  .steps li::before { border: 1px solid CanvasText; }
}