/* Ratgeber-Kacheln außerhalb von /ratgeber/: Startseite („Ratgeber für Betriebe“, 3 neueste) und Branchenseiten („Passend für Sie“, höchstens 2).
   Die Kacheln erzeugt /usr/local/bin/rexcom-ratgeber. Nutzt die Variablen aus style.css, keine externen Ressourcen. */

.rgt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rgt-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.rgt-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.rgt-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #C7D2FE; }
.rgt-tile:focus-within { border-color: var(--brand); }

/* Schlichte Grafik statt Foto: Farbfläche mit Punktraster, Kreis und dem Symbol des Beitrags */
.rgt-art { position: relative; display: grid; place-items: center; min-height: 132px; aspect-ratio: 16 / 7; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%); }
.rgt-art::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(37, 99, 235, 0.2) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 70%); mask-image: linear-gradient(100deg, #000 10%, transparent 70%); }
.rgt-art::after { content: ''; position: absolute; right: -36px; bottom: -48px; width: 150px; height: 150px; border-radius: 50%; background: rgba(124, 58, 237, 0.1); }
.rgt-art svg { position: relative; z-index: 1; width: 60px; height: 60px; padding: 12px; box-sizing: content-box; border-radius: 20px; background: #fff; box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.45); fill: none; stroke: var(--brand-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rgt-ton-kosten { background: linear-gradient(135deg, #EFF6FF 0%, #E0F2FE 100%); }
.rgt-ton-kosten::after { background: rgba(37, 99, 235, 0.1); }
.rgt-ton-funktion { background: linear-gradient(135deg, #F5F3FF 0%, #FAF5FF 100%); }
.rgt-ton-funktion svg { stroke: #6D28D9; }
.rgt-ton-check { background: linear-gradient(135deg, #ECFEFF 0%, #EFF6FF 100%); }
.rgt-ton-check::after { background: rgba(14, 116, 144, 0.09); }

.rgt-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.rgt-cat { margin: 0 0 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-dark); }
.rgt-tile h3 { margin: 0 0 10px; font-size: 1.15rem; line-height: 1.3; }
.rgt-tile h3 a { color: inherit; text-decoration: none; }
.rgt-tile h3 a::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }
.rgt-tile h3 a:focus-visible { outline: none; }
.rgt-tile h3 a:focus-visible::after { outline: 3px solid var(--brand); outline-offset: 2px; }
.rgt-tile:hover h3 { color: var(--brand-dark); }
.rgt-text { color: var(--text); font-size: 0.97rem; line-height: 1.6; }
.rgt-meta { margin-top: auto; padding-top: 16px; font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.rgt-more { margin-top: 32px; text-align: center; }

/* Branchenseiten: zwei Kacheln quer (Grafik links) */
.rgt-passend { margin-bottom: 56px; }
.rgt-passend h2 { font-size: 1.45rem; margin-bottom: 18px; }
.rgt-grid-2 .rgt-tile { flex-direction: row; }
.rgt-grid-2 .rgt-art { flex: 0 0 34%; aspect-ratio: auto; min-height: 0; border-bottom: 0; border-right: 1px solid var(--line); }

@media (max-width: 1024px) {
    .rgt-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .rgt-grid .rgt-tile { flex-direction: row; }
    .rgt-grid .rgt-art { flex: 0 0 30%; aspect-ratio: auto; min-height: 0; border-bottom: 0; border-right: 1px solid var(--line); }
}
@media (max-width: 560px) {
    .rgt-grid .rgt-tile { flex-direction: column; }
    .rgt-grid .rgt-art { flex: none; aspect-ratio: 16 / 6; min-height: 108px; border-right: 0; border-bottom: 1px solid var(--line); }
    .rgt-art svg { width: 48px; height: 48px; padding: 10px; border-radius: 16px; }
    .rgt-body { padding: 18px 18px 20px; }
    .rgt-more .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .rgt-tile { transition: none; }
    .rgt-tile:hover { transform: none; }
}

@media (prefers-color-scheme: dark) {
    .rgt-tile { background: #0F1829; }
    .rgt-tile:hover { border-color: #3B4B7A; }
    .rgt-art, .rgt-ton-kosten, .rgt-ton-funktion, .rgt-ton-check { background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(167, 139, 250, 0.12) 100%); }
    .rgt-ton-check { background: linear-gradient(135deg, rgba(34, 211, 238, 0.08) 0%, rgba(96, 165, 250, 0.1) 100%); }
    .rgt-art::before { background-image: radial-gradient(rgba(147, 197, 253, 0.22) 1px, transparent 1.4px); }
    .rgt-art::after { background: rgba(167, 139, 250, 0.12); }
    .rgt-art svg, .rgt-ton-funktion svg { background: #0B1324; stroke: #93C5FD; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.8); }
    .rgt-ton-funktion svg { stroke: #C4B5FD; }
    .rgt-cat { color: #93C5FD; }
    .rgt-tile:hover h3 { color: #BFDBFE; }
}