/* Aus den HTML-Dateien ausgelagert, damit die Content-Security-Policy ohne
   'unsafe-inline' fuer style-src auskommt. Inhaltlich unveraendert. */

.bg-grid-pattern {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

[data-i18n] {
    transition: opacity 0.15s;
}

/* Reiterleiste unter dem Companion-Screenshot auf der Startseite.
   Kontrast geprueft: inaktiv slate-300 auf slate-800 = 8.6:1,
   aktiv slate-900 auf brand-400 = 7.4:1 — beide ueber 4.5:1. */
.app-tab {
    background-color: #1e293b;   /* slate-800 */
    color: #cbd5e1;              /* slate-300 */
}

.app-tab:hover {
    background-color: #334155;   /* slate-700 */
    color: #f1f5f9;              /* slate-100 */
}

.app-tab[aria-selected="true"] {
    background-color: #2dd4bf;   /* brand-400 */
    color: #0f172a;              /* slate-900 */
}


/* ─────────────────────────────────────────────────────────────────────────
   Nachgereichte Tailwind-Utilities.

   css/tailwind.css ist ein Build-Artefakt ohne Quelle im Repo: Es gibt keine
   tailwind.config.js und keinen Build-Schritt. Klassen, die beim Bauen der
   Datei noch nirgends verwendet wurden, fehlen darin — sie greifen dann
   stillschweigend nicht, das Layout bricht ohne Fehlermeldung.

   Diese Regeln bilden genau die fehlenden Klassen nach, mit den Werten aus
   Tailwind (Breakpoints: sm 640px, md 768px, lg 1024px).

   Wer den Tailwind-Build wieder aufsetzt, kann diesen Block ersatzlos loeschen.
   ───────────────────────────────────────────────────────────────────────── */

.bg-amber-50 { background-color:#fffbeb; }
.border-amber-200 { border-color:#fde68a; }
.h-20 { height:5rem; }
.mb-5 { margin-bottom:1.25rem; }
.mt-10 { margin-top:2.5rem; }
.mt-3 { margin-top:0.75rem; }
.px-2\.5 { padding-left:0.625rem;padding-right:0.625rem; }
.py-0\.5 { padding-top:0.125rem;padding-bottom:0.125rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top:1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top:1.5rem; }
.text-amber-800 { color:#92400e; }
.w-44 { width:11rem; }

@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .sm\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width: 1024px) {
    .lg\:col-span-2 { grid-column:span 2/span 2; }
    .lg\:pb-20 { padding-bottom:5rem; }
    .lg\:pt-36 { padding-top:9rem; }
}

/* Weitere nachgereichte Utilities (siehe Block oben). */
.gap-10 { gap: 2.5rem; }
.max-w-\[300px\] { max-width: 300px; }

@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:ml-auto { margin-left: auto; }
    .lg\:mx-0 { margin-left: 0; margin-right: 0; }
    .lg\:p-10 { padding: 2.5rem; }
}
.max-w-\[280px\] { max-width: 280px; }

/* Telefon-Darstellung: am Handy begrenzt die Bildschirmbreite ohnehin,
   am Desktop groesser fuer die Lesbarkeit. Auf beiden Sites identisch. */
@media (min-width: 1024px) {
    .lg\:max-w-\[360px\] { max-width: 360px; }
}

.p-6 { padding: 1.5rem; }

@media (min-width: 640px) {
    .sm\:p-8 { padding: 2rem; }
}