/* ==========================================================================
   renty-ui.css — die EINE Bauteil-Datei aller Renty-Werkzeuge (Nr. 132, 05.09.2026)
   ==========================================================================
   Liegt ÜBER renty-haut.css (X36): die Haut gibt Farben, Maße, Rundungen als Token;
   diese Datei gibt die Bauteile — Kopf, Fuß, Knopf, Klapper, Tabelle, Lampe, Karte.
   Alex, 05.09.2026: „Module die alle im Nachhinein systemweit auf einmal verbessert
   werden können, Wiedererkennung der Muster und Anordnungen."
   Regel: kein Werkzeug schreibt diese Klassen selbst nach. Einzeldateien (offline)
   bekommen beide Blätter beim Bauen eingesetzt (build.py), nie von Hand kopiert.
   Auffassungsgabe: eine Anordnung überall — Kopf oben (Name · Zweck · A−/A+ · Thema),
   Inhalt in Klappern, Fuß unten mit Lampe + Zahlen. Wer ein Werkzeug kennt, kennt alle.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--schriftfamilie); font-size: var(--s); line-height: 1.45;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--c-root); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Kopf ---------------------------------------------------------------- */
.r-kopf {
  display: flex; align-items: center; gap: var(--abstand-3, 12px);
  padding: var(--abstand-2, 8px) var(--abstand-4, 16px);
  background: var(--surf); border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 5; min-height: var(--top-h, 48px);
}
.r-kopf h1 { font-size: calc(var(--s) * 1.15); margin: 0; color: var(--text-hoch); font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.r-kopf h1 .plus { color: var(--c-fehler); }        /* das rote + / der rote Namensteil (RentyPlus) */
.r-kopf .zweck { color: var(--dim); }
.r-kopf .luft { flex: 1; }

/* ---- Fuß ----------------------------------------------------------------- */
.r-fuss {
  display: flex; gap: var(--abstand-4, 16px); align-items: center; flex-wrap: wrap;
  padding: var(--abstand-2, 8px) var(--abstand-4, 16px);
  background: var(--surf); border-top: 1px solid var(--bord);
  color: var(--dim); font-size: calc(var(--s) * .9); position: sticky; bottom: 0; min-height: var(--foot-h, 30px);
}
.r-fuss b { color: var(--text-hoch); }
.r-fuss .luft { flex: 1; }

/* ---- Inhalt -------------------------------------------------------------- */
.r-inhalt { flex: 1; padding: var(--abstand-4, 16px); max-width: 1100px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: var(--abstand-4, 16px); }
.r-inhalt.breit { max-width: none; }

/* ---- Knopf ---------------------------------------------------------------- */
.knopf {
  background: var(--surf2); border: 1px solid var(--bord); color: var(--text);
  border-radius: var(--rad); padding: calc(var(--s) * .35) calc(var(--s) * .7);
  cursor: pointer; font: inherit; line-height: 1.3;
}
.knopf:hover { background: var(--surf3); color: var(--text-hoch); }
.knopf.haupt { background: var(--c-act); border-color: var(--c-act); color: #fff; font-weight: 600; }
.knopf.klein { padding: calc(var(--s) * .15) calc(var(--s) * .45); font-size: calc(var(--s) * .9); }
.knopf:disabled { opacity: .45; cursor: default; }
.knopf.gut { border-color: var(--lampe-gut); }
.knopf.warn { border-color: var(--lampe-warn); }

/* ---- Klapper (details) — Grundstellung zu ----------------------------------- */
details.r-klapper, .r-klapper { background: var(--surf); border: 1px solid var(--bord); border-radius: var(--rad-panel); }
.r-klapper > summary {
  cursor: pointer; padding: var(--abstand-2, 8px) var(--abstand-3, 12px); color: var(--text-hoch);
  font-weight: 600; list-style: none; display: flex; align-items: center; gap: var(--abstand-2, 8px);
}
.r-klapper > summary::-webkit-details-marker { display: none; }
.r-klapper > summary::before { content: "▸"; color: var(--dim); font-size: calc(var(--s) * .9); transition: transform var(--dauer-kurz, 120ms); }
.r-klapper[open] > summary::before { transform: rotate(90deg); }
.r-klapper > summary .nebenbei { color: var(--dim); font-weight: 400; }
.r-klapper > .inhalt { padding: 0 var(--abstand-3, 12px) var(--abstand-3, 12px); border-top: 1px solid var(--bord); }

/* ---- Zeile, Feld, Eingaben ---------------------------------------------------- */
.r-zeile { display: flex; flex-wrap: wrap; gap: var(--abstand-3, 12px); align-items: center; margin-top: var(--abstand-3, 12px); }
.r-feld { display: flex; flex-direction: column; gap: var(--abstand-1, 4px); min-width: 150px; }
.r-feld label { color: var(--dim); font-size: calc(var(--s) * .85); }
select, input[type=text], input[type=number], input[type=search], textarea {
  background: var(--surf2); color: var(--text); border: 1px solid var(--bord); border-radius: var(--rad);
  padding: calc(var(--s) * .3) calc(var(--s) * .5); font: inherit;
}
textarea { width: 100%; min-height: calc(var(--s) * 5); resize: vertical; }

/* ---- (?) Fragezeichen + Erklärung ----------------------------------------------- */
.frage {
  display: inline-block; width: 1.25em; height: 1.25em; line-height: 1.25em; text-align: center;
  border-radius: 50%; background: var(--surf3); color: var(--c-root); font-size: calc(var(--s) * .8);
  cursor: help; margin-left: .3em; border: 1px solid var(--bord);
}
.erkl { display: none; color: var(--dim); font-size: calc(var(--s) * .9); margin: var(--abstand-1, 4px) 0 0; padding: var(--abstand-2, 8px); background: var(--surf2); border-radius: var(--rad); border-left: 3px solid var(--c-root); }
.erkl.auf { display: block; }

/* ---- Tabelle ------------------------------------------------------------------- */
table.r-tab { border-collapse: collapse; width: 100%; font-size: calc(var(--s) * .95); }
.r-tab th, .r-tab td { padding: calc(var(--s) * .35) calc(var(--s) * .5); border-bottom: 1px solid var(--bord); text-align: left; vertical-align: middle; }
.r-tab th { color: var(--dim); font-weight: 500; font-size: calc(var(--s) * .85); }
.r-tab td.z { text-align: right; font-variant-numeric: tabular-nums; }
.r-tab tr.markiert td { color: var(--text-hoch); background: var(--surf2); }

/* ---- Lampe X5 --------------------------------------------------------------------- */
.lampe { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--lampe-aus); margin-right: .35em; vertical-align: middle; }
.lampe.gut { background: var(--lampe-gut); }
.lampe.warn { background: var(--lampe-warn); }
.lampe.schlecht { background: var(--lampe-schlecht); }
.lampe.lauf { background: var(--c-act); animation: r-puls 1s infinite; }
@keyframes r-puls { 50% { opacity: .3; } }

/* ---- Karte (Kachel) ---------------------------------------------------------------- */
.r-karte { background: var(--surf); border: 1px solid var(--bord); border-radius: var(--rad-panel); padding: var(--abstand-3, 12px); box-shadow: var(--schatten-1); }
.r-karte h2, .r-karte h3 { margin: 0 0 var(--abstand-2, 8px); font-size: calc(var(--s) * 1.05); color: var(--text-hoch); }
.r-karte .klein { color: var(--dim); font-size: calc(var(--s) * .9); }
.r-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--abstand-3, 12px); }

/* ---- Stand-Balken (rot geplant · orange in Arbeit · grün fertig) ----------------------- */
.r-stand { height: 6px; background: var(--surf3); border-radius: 3px; overflow: hidden; }
.r-stand > i { display: block; height: 100%; border-radius: 3px; background: var(--lampe-schlecht); }
.r-stand > i.mittel { background: var(--lampe-warn); }
.r-stand > i.fertig { background: var(--lampe-gut); }

/* ---- Hinweise ------------------------------------------------------------------------- */
.hinweis { color: var(--c-warn); }
.fehler { color: var(--c-fehler); }
.dim { color: var(--dim); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: calc(var(--s) * .85); }
pre.r-log { font-family: ui-monospace, Consolas, monospace; font-size: calc(var(--s) * .85); white-space: pre-wrap; max-height: 200px; overflow: auto; color: var(--dim); margin: 0; }

/* ---- Handy --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .r-kopf .zweck { display: none; }
  .r-inhalt { padding: var(--abstand-3, 12px); }
}

/* Nr. 381 (30.09.2026, CODE-381 · iPhone/Android): auf schmalen Bildschirmen jede Schaltfläche mindestens so groß wie die kleinste
   Tippfläche und kein Eingabefeld unter 16 px (sonst zoomt iOS-Safari beim Antippen hinein) — nur Token (AC-51). */
@media (max-width: 640px) {
  .knopf, button { min-height: var(--tipp-klein, 2rem); min-width: var(--tipp-klein, 2rem); }
  a.knopf { display: inline-flex; align-items: center; justify-content: center; }   /* inline-Links: sonst greift min-height nicht */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: max(var(--feld-schrift-handy, 16px), 1em); }
}