/* ============================================================
   fux_sitepackage_hsgm — Inhaltselement "Kacheln" (fux_kacheln,
   ContentBlocks/ContentElements/kacheln; geladen per f:asset.css)

   Quelle: _prototypes/css/homepage.css (product-categories Z. 486-583,
   features-section Z. 586-642) und css/contact.css (quick-contact
   Z. 315-397). Modifier aus den CE-Einstellungen:
   - tiles-section--bg-white|light       Sektionsgrund
   - tiles-section--align-center|left    Ausrichtung
   - tiles-grid--cols-2|3|4              Spalten ab 992px
   - tile--gray|white                    Kartenstil
   - tile-icon--surface|gradient|plain   Icon-Stil
   - tile--linked                        ganze Karte verlinkt

   Abweichungen mit Begruendung:
   - Grau-Text #6e6e73 statt #86868b (WCAG 1.4.3, projektweit).
   - Bewegung (Hebung bei Hover) nur ohne Wunsch nach reduzierter
     Bewegung; Farbwechsel immer.
   - Raster als CSS-Grid statt Bootstrap-Spalten; unter 576px einspaltig,
     992px abwaerts hoechstens zwei Spalten (Prototyp col-md-6).
   - Kontakt-Variante: Karten im Raster statt flex-wrap mit min-width
     250px (gleiche Breiten, kein Ueberlauf bei 320px).

   Kontraste (WCAG 2.x relative Luminanz):
   - Titel #1d1d1f auf #f5f5f7 / #fff . . . . . . . . . .  15,46 / 16,83:1
   - Text #6e6e73 auf #f5f5f7 / #fff . . . . . . . . . . .  4,66 / 5,07:1
   - Untertitel #6e6e73 auf #fff / #f5f5f7 (light) . . . .  5,07 / 4,66:1
   - Linktext #0066cc auf #f5f5f7 / #fff . . . . . . . . .  5,11 / 5,57:1
   - Fokusrahmen #0066cc auf #fff..#f5f5f7 (1.4.11) . . . >= 5,11:1
   - Icons sind dekorativ (aria-hidden), kein 1.4.11-Ziel.
   ============================================================ */

.tiles-section {
    --tiles-blue: var(--hsgm-blue, #0066cc);
    --tiles-blue-light: var(--hsgm-blue-light, #3384d9);
    --tiles-text: var(--gray-primary, #1d1d1f);
    --tiles-muted: #6e6e73;
    --tiles-border: var(--gray-tertiary, #d2d2d7);
    --tiles-surface: var(--gray-quaternary, #f5f5f7);

    position: relative;
    padding: var(--space-section, 8rem) 0;
}

.tiles-section--bg-white {
    background: #fff;
}

/* Feine Trennlinie oben (Prototyp ::before der Sektionen) */
.tiles-section--bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 10%, var(--tiles-border) 50%, transparent 90%);
}

/* Kontakt-Prototyp quick-contact */
.tiles-section--bg-light {
    background: linear-gradient(135deg, var(--tiles-surface) 0%, #fafafa 100%);
}

.tiles-header {
    text-align: center;
    margin-bottom: var(--space-xl, 5rem);
}

.tiles-section--align-left .tiles-header {
    text-align: left;
}

.tiles-section--align-left .tiles-subtitle {
    margin-left: 0;
}

.tiles-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--tiles-text);
    hyphens: auto;
    overflow-wrap: break-word;
}

.tiles-subtitle {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--tiles-muted);
    max-width: 700px;
    margin: 1rem auto 0;
}

/* ---------- Raster ---------- */
.tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tiles-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tiles-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Darstellung "Slider" (tile_display, 2026-10-13): gemeinsame Karussell-
   Komponente (carousel.css). Der Hover-Schatten verlinkter Kacheln
   (0 20px 40px) braucht mehr Freiraum im Scroll-Container als der
   Standard; 0,2,0 = unabhaengig von der Ladereihenfolge. */
.fux-carousel.fux-carousel--tiles {
    --fux-carousel-pad-bottom: 3.75rem;
}

/* ---------- Karte ---------- */
.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 1.5rem;
    overflow: hidden;
    transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s, transform 0.3s;
}

.tiles-section--align-left .tile {
    align-items: flex-start;
    text-align: left;
}

.tile--gray {
    background: var(--tiles-surface);
}

.tile--white {
    background: #fff;
    border-width: 2px;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Verlinkte Karte: blaue Kante oben bei Hover/Fokus (Prototyp
   .category-card::before) */
.tile--linked::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--tiles-blue);
    transform: translateY(-100%);
    transition: transform 0.3s;
}

.tile--linked:hover,
.tile--linked:focus-within {
    background: #fff;
    border-color: var(--tiles-border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.tile--linked:hover::before,
.tile--linked:focus-within::before {
    transform: translateY(0);
}

.tile--white.tile--linked:hover,
.tile--white.tile--linked:focus-within {
    border-color: var(--tiles-blue-light);
}

/* ---------- Icon ---------- */
.tile-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--tiles-blue);
}

.tile-icon-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Produktlinien: 80px helle Flaeche, Icon 40px */
.tile-icon--surface {
    width: 80px;
    height: 80px;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 1rem;
}

/* Warum HSGM?: 60px Verlauf, weisses Icon 28px */
.tile-icon--gradient {
    width: 60px;
    height: 60px;
    padding: 16px;
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--tiles-blue-light), var(--tiles-blue));
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2);
    color: #fff;
    /* HSGM-Icon auf dem Verlauf einfarbig weiss (Akzent #5CA9F6 waere auf
       Blau kaum sichtbar) */
    --icon-primary: #fff;
    --icon-secondary: #fff;
}

/* Kontakt: Icon 48px ohne Flaeche */
.tile-icon--plain {
    width: 48px;
    height: 48px;
}

/* Gleich gefaerbte helle Flaeche auf weisser Karte waere unsichtbar */
.tile--white .tile-icon--surface {
    background: var(--tiles-surface);
}

/* ---------- Texte ---------- */
.tile-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    color: var(--tiles-text);
    hyphens: auto;
    overflow-wrap: break-word;
}

.tiles-grid--cols-4 .tile-title {
    font-size: 1.125rem;
}

.tile > * {
    max-width: 100%;
}

.tile-text {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
    color: var(--tiles-muted);
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Text ueber dem Link-Overlay: markierbar (A11y-Review M3) */
.tile--linked .tile-text {
    position: relative;
    z-index: 2;
}

.tile-action {
    margin: 0.75rem 0 0;
}

.tile-action-link {
    display: inline-block;
    padding-block: 2px;
    font-weight: 600;
    color: var(--tiles-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

/* Hover und Fokus gleichwertig (Prototyp ohne Unterstreichung: Link waere
   nur ueber die Farbe erkennbar) */
.tile-action-link:hover,
.tile-action-link:focus-visible {
    text-decoration-thickness: 2px;
}

/* Titel-Link: Farbe des Titels, Overlay macht die ganze Karte klickbar */
.tile-link {
    color: inherit;
    text-decoration: none;
}

.tile-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tile--linked:hover .tile-link {
    color: var(--tiles-blue);
}

/* Fokus: Rahmen um die ganze Karte statt um den Titel. Spezifitaet
   (0,3,1) schlaegt die Rahmenregel body.fux-relaunch a:focus-visible
   (0,2,2). */
body.fux-relaunch .tile-link:focus-visible {
    outline: none;
}

.tile--linked:has(.tile-link:focus-visible) {
    outline: 3px solid var(--tiles-blue);
    outline-offset: 2px;
}

/* Fallback ohne :has(): Fokusrahmen am Link selbst */
@supports not selector(:has(*)) {
    body.fux-relaunch .tile-link:focus-visible {
        outline: 3px solid var(--tiles-blue);
        outline-offset: 2px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .tile--linked:hover {
        transform: translateY(-5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tile,
    .tile--linked::before {
        transition: none;
    }
}

@media (forced-colors: active) {
    .tile {
        border-color: CanvasText;
    }

    .tile--linked:has(.tile-link:focus-visible) {
        outline-color: Highlight;
    }

    /* Verlauf entfaellt im Kontrastmodus: Flaeche als Rahmen erhalten */
    .tile-icon--gradient {
        border: 1px solid CanvasText;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .tiles-grid--cols-3,
    .tiles-grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .tiles-section {
        padding: var(--space-xl, 5rem) 0;
    }

    .tiles-header {
        margin-bottom: var(--space-lg, 3rem);
    }

    .tiles-subtitle {
        font-size: 1.125rem;
    }

    .tile {
        padding: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .tiles-grid,
    .tiles-grid--cols-2,
    .tiles-grid--cols-3,
    .tiles-grid--cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}