/* alters-rechner.de – Ergänzungen zu Tailwind */

:root {
  --deep: #17513F;
  --lime: #C9E86B;
  --line: #D3D9C9;
  --muted: #5F6F65;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body { text-rendering: optimizeLegibility; }

/* Zahlen immer gleich breit – sonst zappelt das Ergebnis beim Tippen */
.tabular-nums, .font-display, input[type="date"], table { font-variant-numeric: tabular-nums; }

/* Sichtbarer Tastaturfokus, auch auf farbigen Flächen */
:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Deutsches Datumsfeld ---------- */
/* Sichtbar ist ein Textfeld im Format TT.MM.JJJJ. Das native Datumsfeld
   liegt unsichtbar darunter und liefert nur die Kalenderauswahl – denn
   <input type="date"> zeigt das Datum in der Sprache des Browsers an,
   was sich von der Seite aus nicht überschreiben lässt. */
.datum-feld { position: relative; }
.datum-picker {
  position: absolute;
  bottom: 0;
  right: 2.75rem;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.datum-picker.sichtbar {
  position: static;
  width: 100%;
  height: auto;
  margin-top: .5rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: #F3F5F1;
  opacity: 1;
  pointer-events: auto;
}
.datum-btn {
  position: absolute;
  top: 50%;
  right: .375rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .5rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.datum-btn:hover { background: #E6E9DE; color: var(--deep); }
.datum-eingabe { letter-spacing: .02em; }

/* Datumsfelder in Safari/iOS auf volle Breite zwingen */
input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 3rem; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }

/* ---------- Werbeplätze ---------- */
.ad-slot { margin: 2rem 0; }
.ad-slot .ad-label {
  display: block;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: .35rem;
}
.ad-header { margin-top: 1rem; }
.ad-side { position: sticky; top: 6rem; }

/* Sprungmarken-Navigation in der Seitenleiste. Klebt unter dem Kopfbereich;
   steht darüber ein Anzeigenblock, schiebt der normale Fluss sie nach unten. */
.ar-sticky { position: sticky; top: 6rem; }
.ad-side + .ar-sticky { margin-top: 2rem; }
/* Hinweis: Es gibt bewusst keine sichtbaren Platzhalter mehr. Solange
   ADS_MODE = "off" gilt, wird gar kein Anzeigen-Markup ausgegeben. */

/* ---------- Tabellen ---------- */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle-scroll table { min-width: 34rem; }

/* ---------- FAQ ---------- */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: "+";
  float: right;
  font-family: Archivo, sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--deep);
}
details[open] > summary::after { content: "\2013"; }

/* ---------- Druck ---------- */
@media print {
  header, footer, .ad-slot, #nav-toggle, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
  .ergebnis-panel { background: #fff !important; color: #000 !important; border: 1px solid #999; }
  .ergebnis-panel * { color: #000 !important; }
}