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


/* ─────────────────────────────────────────────────────────────────────────
   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.
   ───────────────────────────────────────────────────────────────────────── */

.grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
.h-7 { height:1.75rem; }
.max-w-5xl { max-width:64rem; }
.max-w-\[300px\] { max-width:300px; }
.mt-3 { margin-top:0.75rem; }
.resize-none { resize:none; }
.w-7 { width:1.75rem; }

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

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

@media (min-width: 1024px) {
    .lg\:ml-auto { margin-left:auto; }
    .lg\:mx-0 { margin-left:0;margin-right:0; }
}

/* Weitere nachgereichte Utilities (siehe Block oben). */
.gap-x-3 { column-gap: 0.75rem; }
.gap-y-1 { row-gap: 0.25rem; }
.items-baseline { align-items: baseline; }
.pt-6 { padding-top: 1.5rem; }

/* Reiterleiste der Companion-Screenshots. Identisch zur Dachseite —
   bei Aenderungen beide css/page.css anfassen.
   Kontrast geprueft: inaktiv slate-300 auf slate-800 = 8.6:1,
   aktiv slate-900 auf brand-400 = 7.4: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 */
}

.gap-10 { gap: 2.5rem; }
.max-w-\[280px\] { max-width: 280px; }

@media (min-width: 1024px) {
    .lg\:p-10 { padding: 2.5rem; }
}

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