:root{color-scheme:dark}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0b0b;color:#eee}
a{color:#9ad0ff;text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.h1{margin:0;font-size:20px}
.muted{color:#bdbdbd;font-size:12px}

@font-face{font-family:'SpookyCustom';src:url('/assets/fonts/Spooky.ttf') format('truetype');font-display:swap}
@font-face{font-family:'SketchyCustom';src:url('/assets/fonts/Sketchy.ttf') format('truetype');font-display:swap}
@font-face{font-family:'HorrorCustom';src:url('/assets/fonts/Horror.ttf') format('truetype');font-display:swap}
@font-face{font-family:'CartoonCustom';src:url('/assets/fonts/Cartoon.ttf') format('truetype');font-display:swap}
@font-face{font-family:'DefaultCustom';src:url('/assets/fonts/Default.ttf') format('truetype');font-display:swap}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

.card{border:1px solid rgba(255,255,255,.2);border-radius:18px;overflow:hidden;position:relative;min-height:240px;transform:translateZ(0);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.cardInner{padding:16px 16px 14px;backdrop-filter:saturate(1.1) contrast(1.04);background:linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.2))}

/* leichte Animation */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.card{animation:floaty 3.2s ease-in-out infinite}
.card:nth-child(2n){animation-duration:3.7s}
.card:nth-child(3n){animation-duration:4.1s}

.cardHead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.dayWrap{display:flex;align-items:center;gap:8px;min-width:0}
.day{font-weight:800;font-size:15px}
.times{font-size:13px;color:#f1f1f1;opacity:.95;text-align:right}
.gameIcon{width:24px;height:24px;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.35);box-shadow:0 2px 8px rgba(0,0,0,.35);flex:0 0 24px}
.gameIconFallback{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.24);background:rgba(0,0,0,.3);color:#f8f8f8;font-size:12px;line-height:1;flex:0 0 24px}
.body{margin-top:12px;font-size:24px;line-height:1.18;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.footer{margin-top:10px;font-size:20px;color:#fff3d3;opacity:.95;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.badge{display:inline-block;margin-top:10px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25)}

/* No Stream Indicator */
.card-no-stream{opacity:.7}
.no-stream-indicator{font-size:72px;font-weight:900;color:rgba(255,82,82,.6);text-align:center;margin-top:20px;line-height:1;letter-spacing:-2px}

/* Theme backgrounds mit echter Bildtextur + Farbcharakter */
.card[class*="t-"]{background-image:url('/assets/images/background.jpg');background-size:cover;background-position:center}
.t-hell-guild{background-image:linear-gradient(150deg, rgba(110,20,10,.74), rgba(20,6,5,.78)), url('/assets/images/theme-hell-guild.jpg')}
.t-horror-night{background-image:linear-gradient(150deg, rgba(8,14,40,.72), rgba(6,6,15,.78)), url('/assets/images/theme-horror-night.jpg')}
.t-community{background-image:linear-gradient(150deg, rgba(6,70,70,.68), rgba(8,20,22,.78)), url('/assets/images/theme-community.jpg')}
.t-gaming{background-image:linear-gradient(150deg, rgba(16,88,28,.66), rgba(7,25,12,.8)), url('/assets/images/theme-gaming.jpg')}
.t-reallife{background-image:linear-gradient(150deg, rgba(120,88,20,.66), rgba(24,18,10,.8)), url('/assets/images/theme-reallife.jpg')}

/* Overlays */
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.05));pointer-events:none}
.card::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.08);border-radius:16px;pointer-events:none}

/* Frontend-Fonts aus /assets/fonts */
.f-spooky{font-family:'SpookyCustom', ui-serif, Georgia, serif}
.f-sketchy{font-family:'SketchyCustom', ui-sans-serif, system-ui, sans-serif}
.f-horror{font-family:'HorrorCustom', ui-serif, Georgia, serif}
.f-cartoon{font-family:'CartoonCustom', ui-rounded, system-ui, sans-serif}
.f-default{font-family:'DefaultCustom', ui-serif, Georgia, serif}
.f-lovely{font-family:'HorrorCustom', ui-serif, Georgia, serif}

/* Lesbarkeit: Default-Font webseitig klarer */
.f-default .day,
.f-default .times,
.f-default .body,
.f-default .footer{
	font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	text-shadow: 0 2px 8px rgba(0,0,0,.7);
	letter-spacing: .01em;
}
.f-default .body{font-size:22px;line-height:1.2;font-weight:700}
.f-default .footer{font-size:18px;line-height:1.25;font-weight:600;color:#ffecc1}