/* ══════════════════════════════════════════════════════════════════════════
   utilities.css — ersetzt den Tailwind-Play-CDN.

   WARUM ES DIESE DATEI GIBT (22.09.2026):
   Beide Apps luden `cdn.tailwindcss.com`. Das hatte zwei Probleme:
     1. **Datenschutz:** Jeder Seitenaufruf schickte die IP-Adresse des Nutzers
        an einen Dritten — ungenannt in der Datenschutzerklärung.
     2. **Technik:** Der Play-CDN ist ausdrücklich nicht für den Produktivbetrieb
        gedacht. Er lädt den kompletten Compiler in den Browser und erzeugt das
        CSS zur Laufzeit — bei jedem Aufruf, und bei Ausfall bricht das Layout.

   WAS HIER DRIN STEHT: genau die Klassen, die beide Apps tatsächlich benutzen
   (am 22.09.2026 ausgezählt: 101 Stück, davon 48 in der Vermieter-App).
   Die Werte entsprechen der Tailwind-Standardskala — 1 = 0.25rem —, damit
   bestehendes Markup unverändert weiterfunktioniert.

   WENN DU EINE NEUE UTILITY BRAUCHST: hier ergänzen. `check-markup.mjs` meldet
   jede Utility-Klasse im Markup, die hier fehlt — sie würde sonst stillschweigend
   nichts tun. Das ist der Schutz, den der CDN nie hatte.

   NICHT HIER: Farben, Schriftgrößen, Radien, Schatten. Die kommen aus
   `tokens.css` und werden in `ui.css` bzw. `app.css` verwendet. Diese Datei
   kennt nur Layout, Abstände und Übergänge (STYLEGUIDE.md).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Anzeige ─────────────────────────────────────────────────────────────── */
.block            { display: block; }
.flex             { display: flex; }
.grid             { display: grid; }
.hidden           { display: none; }

/* ── Flex und Grid ───────────────────────────────────────────────────────── */
.flex-1           { flex: 1 1 0%; }
.flex-col         { flex-direction: column; }
.flex-wrap        { flex-wrap: wrap; }
.flex-shrink-0    { flex-shrink: 0; }
.items-start      { align-items: flex-start; }
.items-center     { align-items: center; }
.items-baseline   { align-items: baseline; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.grid-cols-2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Abstände zwischen Kindern ───────────────────────────────────────────── */
.gap-0\.5         { gap: 0.125rem; }
.gap-1            { gap: 0.25rem; }
.gap-1\.5         { gap: 0.375rem; }
.gap-2            { gap: 0.5rem; }
.gap-3            { gap: 0.75rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* ── Innenabstand ────────────────────────────────────────────────────────── */
.pt-1             { padding-top: 0.25rem; }
.pt-2             { padding-top: 0.5rem; }
.pt-3             { padding-top: 0.75rem; }
.px-4             { padding-left: 1rem; padding-right: 1rem; }
.py-1             { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-6             { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8             { padding-top: 2rem; padding-bottom: 2rem; }

/* ── Außenabstand ────────────────────────────────────────────────────────── */
.mt-0\.5          { margin-top: 0.125rem; }
.mt-1             { margin-top: 0.25rem; }
.mt-2             { margin-top: 0.5rem; }
.mt-3             { margin-top: 0.75rem; }
.mt-6             { margin-top: 1.5rem; }
.mt-auto          { margin-top: auto; }
.mb-0             { margin-bottom: 0; }
.mb-1\.5          { margin-bottom: 0.375rem; }
.mb-2             { margin-bottom: 0.5rem; }
.mb-2\.5          { margin-bottom: 0.625rem; }
.mb-3\.5          { margin-bottom: 0.875rem; }
.mb-4             { margin-bottom: 1rem; }
.mb-5             { margin-bottom: 1.25rem; }
.mb-6             { margin-bottom: 1.5rem; }
.mr-1             { margin-right: 0.25rem; }
.mx-auto          { margin-left: auto; margin-right: auto; }

/* ── Maße ────────────────────────────────────────────────────────────────── */
.w-full           { width: 100%; }
.w-16             { width: 4rem; }
.w-60             { width: 15rem; }
.h-full           { height: 100%; }
.h-16             { height: 4rem; }
.min-w-0          { min-width: 0; }
.min-w-\[110px\]  { min-width: 110px; }
.min-h-screen     { min-height: 100vh; }
.max-w-7xl        { max-width: 80rem; }

/* ── Position ────────────────────────────────────────────────────────────── */
.relative         { position: relative; }
.absolute         { position: absolute; }
.fixed            { position: fixed; }
.inset-0          { inset: 0; }
.top-0            { top: 0; }
.top-12           { top: 3rem; }
.top-full         { top: 100%; }
.bottom-full      { bottom: 100%; }
.left-0           { left: 0; }
.right-0          { right: 0; }
.z-40             { z-index: 40; }
.z-50             { z-index: 50; }

/* ── Text ────────────────────────────────────────────────────────────────── */
.text-center      { text-align: center; }
.text-right       { text-align: right; }
.font-medium      { font-weight: 500; }
.font-semibold    { font-weight: 600; }
.underline        { text-decoration-line: underline; }
.hover\:no-underline:hover { text-decoration-line: none; }
.truncate         { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Verhalten ───────────────────────────────────────────────────────────── */
.cursor-pointer   { cursor: pointer; }

/* ── Übergänge (von x-transition genutzt) ────────────────────────────────── */
.transition       { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-100     { transition-duration: 100ms; }
.duration-150     { transition-duration: 150ms; }
.duration-200     { transition-duration: 200ms; }
.duration-250     { transition-duration: 250ms; }
.ease-in          { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out         { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.opacity-0        { opacity: 0; }
.opacity-100      { opacity: 1; }

/* Transform-Utilities: Tailwind setzt sie über CSS-Variablen zusammen, damit sich
   Verschiebung, Drehung und Skalierung nicht gegenseitig überschreiben. */
.translate-x-0, .translate-x-full,
.translate-y-0, .translate-y-1, .translate-y-2, .translate-y-full,
.rotate-180, .scale-95, .scale-100 {
  transform: translate(var(--tw-x, 0), var(--tw-y, 0)) rotate(var(--tw-rotate, 0)) scale(var(--tw-scale, 1));
}
.translate-x-0    { --tw-x: 0; }
.translate-x-full { --tw-x: 100%; }
.translate-y-0    { --tw-y: 0; }
.translate-y-1    { --tw-y: 0.25rem; }
.translate-y-2    { --tw-y: 0.5rem; }
.translate-y-full { --tw-y: 100%; }
.rotate-180       { --tw-rotate: 180deg; }
.scale-95         { --tw-scale: 0.95; }
.scale-100        { --tw-scale: 1; }

/* ── Ab Tablet (Tailwind: md = 768px) ────────────────────────────────────── */
@media (min-width: 768px) {
  .md\:block        { display: block; }
  .md\:flex         { display: flex; }
  .md\:flex-col     { flex-direction: column; }
  .md\:hidden       { display: none; }
  .md\:col-span-2   { grid-column: span 2 / span 2; }
}

/* ── Ab kleinem Tablet (Tailwind: sm = 640px) ────────────────────────────── */
@media (min-width: 640px) {
  .sm\:block        { display: block; }
  .sm\:flex-row     { flex-direction: row; }
  .sm\:px-6         { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-8         { padding-top: 2rem; padding-bottom: 2rem; }
}