/*
Theme Name: Fussball Stream
Author: Ersin
Description: Story-Stream im App-Stil – zentrierte Einspalten-Timeline mit grossen, runden Bildkarten und Filter-Pills. Mobil-first, eigenstaendige Struktur.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: fussball-stream
*/
:root{
	--bg:#f6f7f9; --card:#ffffff; --ink:#0f172a; --soft:#64748b; --line:#e2e8f0;
	--accent:#0ea5e9; --accent2:#6366f1;
	--head:"Outfit",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif; --maxw:760px;
	--fna-hd-bg:#ffffff; --fna-hd-text:#0f172a; --fna-hd-dim:#64748b; --fna-hd-accent:#0ea5e9;
	--fna-hd-line:#e2e8f0; --fna-hd-font:"Outfit",system-ui,sans-serif; --fna-hd-maxw:760px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.st-main{max-width:var(--maxw);margin:0 auto;padding:18px 16px 40px;}

/* Filter-Pills */
.st-pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 14px;position:sticky;top:64px;background:linear-gradient(var(--bg) 70%,transparent);z-index:40;}
.st-pills::-webkit-scrollbar{display:none;}
.st-pill{white-space:nowrap;font-family:var(--head);font-weight:600;font-size:.86rem;padding:8px 15px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--soft);}
.st-pill:hover{border-color:var(--accent);color:var(--accent);}
.st-pill.is-on{background:linear-gradient(120deg,var(--accent),var(--accent2));border-color:transparent;color:#fff;}

/* Story-Karte */
.st-card{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-bottom:16px;}
.st-card__img{position:relative;aspect-ratio:16/10;background:#e6ebf2 center/cover no-repeat;}
.st-card__chip{position:absolute;left:12px;top:12px;font-family:var(--head);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;background:rgba(15,23,42,.82);color:#fff;padding:5px 10px;border-radius:100px;backdrop-filter:blur(6px);}
.st-card__body{padding:15px 17px 17px;}
.st-card__title{font-family:var(--head);font-weight:700;font-size:1.2rem;line-height:1.25;letter-spacing:-.015em;margin:0 0 7px;}
.st-card:hover .st-card__title{color:var(--accent);}
.st-card__ex{color:var(--soft);font-size:.92rem;margin:0 0 10px;}
.st-card__meta{display:flex;align-items:center;gap:8px;color:var(--soft);font-size:.78rem;}
.st-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;}

/* Erste Karte groesser */
.st-card--lead .st-card__img{aspect-ratio:16/9;}
.st-card--lead .st-card__title{font-size:1.6rem;}

.st-sechead{font-family:var(--head);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;margin:26px 0 12px;display:flex;align-items:center;gap:9px;}
.st-sechead::before{content:"";width:4px;height:17px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent2));}

/* Single */
.st-single{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;}
.st-single__img{aspect-ratio:16/9;background:#e6ebf2 center/cover no-repeat;}
.st-single__in{padding:22px 20px 26px;}
.st-single__title{font-family:var(--head);font-weight:700;font-size:1.75rem;line-height:1.18;letter-spacing:-.02em;margin:8px 0 10px;}
.st-single__content{font-size:1.05rem;line-height:1.75;color:#1e293b;}
.st-single__content p{margin:0 0 1.2em;}
.st-single__content a{color:var(--accent);text-decoration:underline;}
.fna-source{font-size:.86rem;color:var(--soft);border-top:1px solid var(--line);padding-top:14px;margin-top:20px;}
.st-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;}
.st-tags a{font-size:.78rem;background:#f1f5f9;border:1px solid var(--line);padding:6px 12px;border-radius:100px;color:var(--soft);}

.st-pag{margin-top:22px;}
.st-pag .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.st-pag a,.st-pag .current{padding:9px 15px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:700;}
.st-pag .current{background:var(--accent);color:#fff;border-color:var(--accent);}

.st-foot{border-top:1px solid var(--line);background:#fff;margin-top:34px;}
.st-foot__in{max-width:var(--maxw);margin:0 auto;padding:22px 16px;text-align:center;color:var(--soft);font-size:.82rem;}
.st-empty{text-align:center;color:var(--soft);padding:50px 0;}

@media(max-width:600px){
	.st-main{padding:14px 12px 30px;}
	.st-card__title{font-size:1.08rem;}
	.st-card--lead .st-card__title{font-size:1.35rem;}
	.st-single__title{font-size:1.4rem;}
	.st-single__in{padding:18px 15px 22px;}
}
/* Bild-Platzhalter */
.st-card__img,.st-single__img{background-color:#e6ebf2;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27600%27%20height%3D%27400%27%3E%3Crect%20width%3D%27600%27%20height%3D%27400%27%20fill%3D%27%23e6ebf2%27/%3E%3Ccircle%20cx%3D%27300%27%20cy%3D%27200%27%20r%3D%2755%27%20fill%3D%27%23fff%27/%3E%3Cpolygon%20points%3D%27300%2C173%20317%2C185%20310%2C205%20290%2C205%20283%2C185%27%20fill%3D%27%230f172a%27/%3E%3Cpath%20d%3D%27M300%20200%20L300%20147%20M300%20200%20L345%20226%20M300%20200%20L255%20226%27%20stroke%3D%27%230f172a%27%20stroke-width%3D%275%27%20fill%3D%27none%27/%3E%3C/svg%3E");background-size:cover;background-position:center;}