/* Direkt aus public/ geladen (nicht via Vite), damit der URL-Pfad zum
   Pattern-PNG zur Laufzeit aufgelöst wird und auch im `npm run dev` greift. */

/* Border-Image-Pattern (Drucksimulation/Textur) für 7px-Ränder. Kombinieren
   mit Tailwind-Border-Width-Utilities (z.B. `border-[7px]`, `border-l-[7px]`,
   `lg:border-l-[7px]`), die bestimmen, welche Seiten gerendert werden.
   border-image-width = 1 (Default) folgt automatisch der border-width pro Seite. */
.tt-pattern-line {
    border-style: solid;
    border-color: transparent;
    border-image: url("/images/pattern-line.png") 30 round;
}

/* Hintergrund-Pattern (gleiche Textur und Density wie .tt-pattern-line) mit
   30%-Weiss-Overlay → effektive Pattern-Opacity ~0.7 über weissem bg. */
.tt-pattern-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
        url("/images/pattern-line.png");
    background-repeat: repeat;
    background-size: auto, 27px 27px;
}

/* Orange Variante — Pattern direkt in Orange (PNG-Farbe), ohne Overlay. */
.tt-pattern-bg-orange {
    background-image: url("/images/pattern-line-orange.png");
    background-repeat: repeat;
    background-size: 27px 27px;
}

/* Rasen-Struktur: feine vertikale Halm-Textur auf emerald-700 (#047857). */
.tt-rasen {
    background-color: #007554;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.03) 0 1px,
            transparent 1px 3px,
            rgba(255, 255, 255, 0.03) 3px 4px,
            transparent 4px 6px
        );
}