/* alter-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;
}

/* 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-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: .5rem;
  background: rgba(230, 233, 222, .35);
  color: var(--muted);
  font-size: 13px;
  padding: 1rem;
}
.ad-header { margin-top: 1rem; }
.ad-side { position: sticky; top: 6rem; }
/* Platzhalter im Live-Betrieb ausblenden: einfach .ad-placeholder{display:none} setzen. */

/* ---------- 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; }
}