/*
Theme Name: Fussball Magazin
Author: Ersin
Description: Helles, redaktionelles Fußball-Magazin – Serifen-Typografie, Creme-Hintergrund, zweispaltiges Layout mit Sidebar. Eigenständige Struktur (kein Pro-Theme).
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: fussball-magazin
*/

:root{
	--fna-hd-bg:#f7f3ea; --fna-hd-text:#1b1a17; --fna-hd-dim:#6b645a; --fna-hd-accent:#b11226; --fna-hd-line:#ddd4c4; --fna-hd-font:"Inter",system-ui,sans-serif; --fna-hd-maxw:1180px;

	--paper:#f7f3ea; --ink:#1b1a17; --soft:#6b645a; --line:#ddd4c4; --card:#fffdf8;
	--accent:#b11226; --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --maxw:1180px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.rule{border:0;border-top:1px solid var(--line);margin:34px 0;}

/* Topbar + Masthead */
.topbar{background:var(--ink);color:#e9e2d4;font-size:.8rem;}
.topbar__inner{display:flex;justify-content:space-between;padding:8px 24px;letter-spacing:.02em;}
.topbar__tag{color:#b9ad98;}
.masthead{background:var(--paper);border-bottom:2px solid var(--ink);}
.masthead__inner{text-align:center;padding:28px 24px 14px;}
.masthead__title{font-family:var(--serif);font-weight:900;font-size:3rem;letter-spacing:-.01em;color:var(--ink);display:inline-block;}
.masthead__sub{margin:6px 0 0;color:var(--soft);font-size:.95rem;font-style:italic;}
.enav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.enav__inner{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;padding:12px 24px;}
.enav a{font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink);padding-bottom:2px;border-bottom:2px solid transparent;}
.enav a:hover{color:var(--accent);border-bottom-color:var(--accent);}

.site-main{padding:36px 24px 20px;}
.ecat,.ed-item .ecat{display:inline-block;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:8px;}

/* Editorial-Kopf */
.ed-top{display:grid;grid-template-columns:1.9fr 1fr;gap:40px;}
.ed-lead__img{margin-bottom:16px;overflow:hidden;}
.ed-lead__img img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.ed-lead__title{font-family:var(--serif);font-weight:900;font-size:2.5rem;line-height:1.08;letter-spacing:-.01em;margin:6px 0 12px;}
.ed-lead__ex{color:var(--soft);font-size:1.08rem;margin:0 0 10px;max-width:60ch;}
.ed-byline{color:var(--soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;}
.ed-list{border-left:1px solid var(--line);padding-left:30px;}
.ed-list__head{font-family:var(--serif);font-weight:600;font-size:1.1rem;margin:0 0 8px;padding-bottom:10px;border-bottom:2px solid var(--ink);}
.ed-item{display:block;padding:16px 0;border-bottom:1px solid var(--line);}
.ed-item .ecat{margin-bottom:4px;}
.ed-item__title{font-family:var(--serif);font-weight:600;font-size:1.12rem;line-height:1.25;margin:0;}
.ed-item:hover .ed-item__title{color:var(--accent);}

/* Vierer-Streifen */
.ed-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.ecard__img{overflow:hidden;margin-bottom:12px;}
.ecard__img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s ease;}
.ecard:hover .ecard__img img{transform:scale(1.04);}
.ecard__title{font-family:var(--serif);font-weight:600;font-size:1.16rem;line-height:1.25;margin:4px 0 8px;}
.ecard:hover .ecard__title{color:var(--accent);}
.ecard__ex{color:var(--soft);font-size:.9rem;margin:0 0 8px;}

/* Zweispaltig */
.ed-body{display:grid;grid-template-columns:1fr 320px;gap:48px;}
.ed-section-title{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:0 0 20px;padding-bottom:10px;border-bottom:2px solid var(--ink);}
.ed-section-title--page{margin-top:10px;}
.ed-row{border-bottom:1px solid var(--line);padding:22px 0;}
.ed-row__link{display:grid;grid-template-columns:200px 1fr;gap:22px;}
.ed-row__img img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.ed-row__title{font-family:var(--serif);font-weight:600;font-size:1.35rem;line-height:1.2;margin:2px 0 8px;}
.ed-row:hover .ed-row__title{color:var(--accent);}
.ed-row__ex{color:var(--soft);font-size:.95rem;margin:0 0 8px;}

/* Sidebar */
.ed-side{align-self:start;position:sticky;top:20px;}
.ed-widget{background:var(--card);border:1px solid var(--line);padding:22px;margin-bottom:24px;}
.ed-widget__head{font-family:var(--serif);font-weight:600;font-size:1.15rem;margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--accent);}
.ed-ranked{list-style:none;counter-reset:r;margin:0;padding:0;}
.ed-ranked li{counter-increment:r;padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;font-family:var(--serif);font-size:1.02rem;line-height:1.25;}
.ed-ranked li::before{content:counter(r);font-weight:900;color:var(--accent);font-size:1.2rem;line-height:1;}
.ed-ranked li:last-child{border-bottom:0;}
.ed-tags{display:flex;flex-wrap:wrap;gap:8px;}
.ed-tags a{font-size:.8rem;border:1px solid var(--line);padding:6px 12px;border-radius:100px;color:var(--soft);}
.ed-tags a:hover{border-color:var(--accent);color:var(--accent);}

/* Archiv */
.ed-archive{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.ed-pagination{margin-top:36px;}
.ed-pagination .nav-links{display:flex;gap:10px;justify-content:center;}
.ed-pagination a,.ed-pagination .current{padding:9px 16px;border:1px solid var(--line);background:var(--card);font-weight:600;}
.ed-pagination .current{background:var(--accent);color:#fff;border-color:var(--accent);}

/* Single */
.ed-single{max-width:720px;margin:0 auto;}
.ed-single__title{font-family:var(--serif);font-weight:900;font-size:2.6rem;line-height:1.1;margin:8px 0 10px;}
.ed-single__meta{color:var(--soft);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;margin:0 0 24px;}
.ed-single__figure{margin:0 0 28px;}
.ed-single__figure img{width:100%;}
.ed-single__content{font-family:var(--serif);font-size:1.2rem;line-height:1.85;overflow-wrap:break-word;word-wrap:break-word;}
.ed-single__content p{margin:0 0 1.3em;}
.ed-single__content a{color:var(--accent);text-decoration:underline;}
.fna-source{font-family:var(--sans);font-size:.9rem;color:var(--soft);border-top:1px solid var(--line);padding-top:16px;margin-top:26px;}
.ed-tags--post{margin-top:26px;}
.ed-more{margin-top:50px;}

.ed-footer{background:var(--ink);color:#d9d0c0;margin-top:50px;}
.ed-footer__inner{padding:36px 24px;text-align:center;}
.ed-footer__brand{font-family:var(--serif);font-weight:900;font-size:1.5rem;color:#fff;margin:0 0 8px;}
.ed-footer__legal{font-size:.8rem;max-width:80ch;margin:0 auto;}
.ed-empty{text-align:center;color:var(--soft);padding:60px 0;}

@media(max-width:900px){
	.ed-top{grid-template-columns:1fr;gap:30px;}
	.ed-list{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px;}
	.ed-strip{grid-template-columns:repeat(2,1fr);}
	.ed-body{grid-template-columns:1fr;}
	.ed-archive{grid-template-columns:repeat(2,1fr);}
	.masthead__title{font-size:2.2rem;}
}
@media(max-width:600px){
	.ed-strip,.ed-archive{grid-template-columns:1fr;}
	.ed-row__link{grid-template-columns:1fr;}
	.ed-lead__title{font-size:1.9rem;}
	/* Container-Paddings schmaler */
	.wrap{padding:0 16px;}
	.topbar__inner,.masthead__inner,.enav__inner{padding-left:16px;padding-right:16px;}
	.site-main{padding:24px 16px 18px;}
	.ed-footer__inner{padding:28px 16px;}
	/* Topbar darf umbrechen statt zu überlaufen */
	.topbar__inner{flex-wrap:wrap;gap:2px 12px;justify-content:center;}
	/* Sidebar nicht sticky auf Mobil */
	.ed-side{position:static;top:auto;}
	/* Überschriften kappen */
	.masthead__title{font-size:2rem;}
	.ed-single__title{font-size:1.9rem;}
	.ed-section-title{font-size:1.3rem;}
	/* Navi als scrollbare Reihe, größere Tap-Fläche */
	.enav a{padding:8px 0;}
}
@media(max-width:400px){
	.ed-lead__title{font-size:1.65rem;}
	.ed-single__title{font-size:1.6rem;}
	.masthead__title{font-size:1.7rem;}
	.ed-single__content{font-size:1.08rem;}
	.enav__inner{gap:16px;}
}