/* ==========================================================================
   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; min-height: var(--hoehe-voll, 100vh);
  overflow-wrap: break-word;   /* Nr. 381-K: lange Wörter/URLs schieben die Seite nie breiter */
}
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);
  padding-top: calc(var(--abstand-2, 8px) + var(--sicher-oben, 0px));   /* Nr. 381-K: Notch/Statusleiste (viewport-fit=cover) */
  padding-left: calc(var(--abstand-4, 16px) + var(--sicher-links, 0px)); padding-right: calc(var(--abstand-4, 16px) + var(--sicher-rechts, 0px));
}
.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);
  padding-bottom: calc(var(--abstand-2, 8px) + var(--sicher-unten, 0px));   /* Nr. 381-K: Home-Balken */
  padding-left: calc(var(--abstand-4, 16px) + var(--sicher-links, 0px)); padding-right: calc(var(--abstand-4, 16px) + var(--sicher-rechts, 0px));
}
.r-fuss b { color: var(--text-hoch); }
.r-fuss .luft { flex: 1; }

/* body ist eine Spalte (flex, height 100%): ohne das quetscht der Browser Kopf und Fuß am Handy auf ihre
   Mindesthöhe, die umbrechenden Knöpfe (Sprache, Anmelde-Lampe, 🔑) laufen heraus und überdecken den Inhalt.
   Nr. 359 · 28.09.2026 · Befund Code 20260928-HG33001-d21 (m02-kalender 390 px) — vorher nur lokal in m14-kanal.
   Der Fuß klebt unten wie der Kopf oben und liegt deshalb auch wie der Kopf über klebenden Inhaltsteilen
   (sonst malt z. B. die linke Kalenderspalte, z-index 2, über den Fuß). */
.r-kopf, .r-fuss { flex-shrink: 0; }
.r-fuss { z-index: 5; }

/* ---- 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:not([type]), input[type=text], input[type=number], input[type=search], input[type=password], input[type=tel], input[type=email], input[type=url], textarea {   /* password/tel/email/url ergänzt Nr. 167.3 (iPhone: gleiche Schriftgröße = kein Zoom) */
  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(min(100%, 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: auf schmalen Bildschirmen nie unter 16 px, sonst zoomt iOS-Safari beim Antippen hinein */
@media (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: max(var(--feld-schrift-handy, 16px), 1em); }
}

/* ---- Nr. 381-K · 30.09.2026 · Verschiebungen auf Endgeräten ausmerzen (Skill renty-geraete) ------------------------
   Nur Token aus renty-haut.css; :where() hält die Spezifität bei 0, damit eigene Klassen nichts verlieren. */
/* Flex-/Grid-Kinder dürfen schrumpfen — sonst drückt ein langer Text die Spalte über den Rand */
:where(.r-inhalt, .r-raster, .r-karte) > :not(button):not(.knopf) { min-width: 0; }   /* Kopf/Fuß/Knopfzeilen bewusst nicht: dort dürfen Knöpfe nicht unter ihren Text schrumpfen (Messung 381-K) */
/* Bilder, Rahmen, Karten: Platz von Anfang an reserviert, nichts rutscht nach dem Laden */
:where(img, video, canvas, svg) { max-width: 100%; }
:where(img[width][height]) { height: auto; }
:where(iframe) { max-width: 100%; border: 0; }
:where(iframe:not([height])) { width: 100%; aspect-ratio: var(--bild-verhaeltnis); }   /* Gate 381: :where() — Klassen der Seiten (z. B. .gm-rahmen, .hb-rahmen iframe) behalten Vorrang */
/* lange Wörter und Adressen umbrechen */
:where(.r-karte, .r-inhalt, .r-tab td, .r-tab th, li, p, h1, h2, h3, summary) { overflow-wrap: anywhere; }
/* Tabellen: eigener Rollkasten statt breiter Seite */
:where(.r-inhalt, .r-karte, .inhalt) table { display: block; max-width: var(--tab-max); overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Knöpfe brechen um statt abgeschnitten zu werden (Handy) */
html[data-breite="s"] .knopf, html[data-breite="m"] .knopf { white-space: normal; text-align: center; }
img, video, canvas, svg { max-width: 100%; }
img[width][height] { height: auto; }
iframe { max-width: 100%; border: 0; }
iframe:not([height]) { width: 100%; aspect-ratio: var(--bild-verhaeltnis); }