/* ===========================================================
   60plus.online – Custom Styles
   Designziele: hoher Kontrast, große Klickflächen (>= 48px),
   ruhige Farben, gute Lesbarkeit für Zielgruppe 60+.
   =========================================================== */

:root {
  --bg-warm:        #f5efe6;   /* Sand-Ton aus dem Hero-Bild */
  --ink:            #1f2933;   /* Tiefes Dunkelblau-Schwarz */
  --muted:          #5a6470;
  --accent:         #1f3a8a;   /* Navy – passt zum Logo-Rand */
  --accent-soft:    #e8eef9;
  --green:          #3e7b3e;
  --blue:           #2f6fb5;
  --teal:           #2c8a8a;
  --gold:           #b88a3b;
  --red:            #b53b3b;
  --brown:          #6b4a2b;

  --radius:         12px;
  --shadow-soft:    0 4px 14px rgba(0,0,0,.08);
}

html { font-size: 17px; }          /* Bootstrap-Default ist 16px – wir gehen größer */
@media (min-width: 992px) { html { font-size: 18px; } }

body {
  font-family: 'Lato', system-ui, sans-serif;
  background: var(--bg-warm);
  color: var(--ink);
  line-height: 1.55;
}

/* --- Kopfbereich -------------------------------------------- */
.site-header { background: #fff; }
.brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--accent);
}
.btn-lang { min-width: 64px; font-weight: 700; }

/* --- Hero --------------------------------------------------- */
.hero-slogan {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw + .5rem, 2rem);
  color: var(--ink);
  margin: 0;
}
.hero-subtitle {
  font-size: clamp(1rem, 1vw + .6rem, 1.25rem);
  color: var(--muted);
  max-width: 60ch;
  margin-inline: auto;
}
.hero-tagline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1vw + .7rem, 1.35rem);
  color: var(--ink);
  margin: 0;
}

.doors-figure img { display: block; }

/* --- Aktionsbuttons (rechte Spalte) ------------------------ */
.btn-action {
  --bg: var(--accent);
  background: var(--bg);
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;       /* groß genug für 60+ */
  padding: .9rem 1.25rem;
  min-height: 56px;          /* WCAG-Touch-Target */
  border-radius: var(--radius);
  border: 2px solid transparent;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, filter .15s ease;
}
.btn-action:hover,
.btn-action:focus-visible {
  filter: brightness(1.08);
  color: #fff;
  transform: translateY(-1px);
}
.btn-action:focus-visible {
  outline: 3px solid #ffbf47;  /* gut sichtbarer Focus-Ring */
  outline-offset: 3px;
}

/* Farben aus dem Original-Bild übernehmen */
.btn-action--guide    { --bg: var(--blue); }
.btn-action--news     { --bg: var(--blue); }
.btn-action--feedback { --bg: var(--teal); }
.btn-action--premium  { --bg: var(--gold); }
.btn-action--support  { --bg: var(--red);  }

/* --- Fußbereich -------------------------------------------- */
.site-footer { color: var(--muted); }

/* --- Mobile-Tuning ----------------------------------------- */
@media (max-width: 575.98px) {
  .hero { padding-top: .5rem; }
  .btn-action { font-size: 1.05rem; }
}

/* --- Bevorzuge weniger Bewegung respektieren --------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-action { transition: none; }
}