/*
Theme Name: Fussball Mosaik
Author: Ersin
Description: Bento-/Mosaik-Layout – Startseite aus unterschiedlich großen Bild-Kacheln mit Titel-Overlay. Eigenständige Struktur, helles Design mit Violett-Akzent.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: fussball-mosaik
*/

:root{
	--fna-hd-bg:#ffffff; --fna-hd-text:#15132a; --fna-hd-dim:#6b6785; --fna-hd-accent:#5b3df5; --fna-hd-line:#e7e5f3; --fna-hd-font:"Inter",system-ui,sans-serif; --fna-hd-maxw:1240px;

	--bg:#ffffff; --panel:#f3f2fb; --ink:#15132a; --soft:#6b6785; --line:#e7e5f3;
	--accent:#5b3df5; --accent2:#ff3d81; --head:"Space Grotesk",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif; --maxw:1240px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.mo-wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

/* Header */
.mo-head{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);z-index:50;}
.mo-head__inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:18px;}
.mo-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;}
.mo-logo__dot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(91,61,245,.18);}
.mo-nav{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;}
.mo-nav::-webkit-scrollbar{display:none;}
.mo-nav a{color:var(--soft);font-weight:600;font-size:.92rem;white-space:nowrap;}
.mo-nav a:hover{color:var(--accent);}

.mo-main{padding:26px 22px 30px;}
.mo-chip{display:inline-block;background:var(--accent);color:#fff;font-family:var(--head);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:6px;margin-bottom:8px;align-self:flex-start;}

/* Bento */
.mo-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:196px;grid-auto-flow:dense;gap:14px;}
.mo-tile{position:relative;overflow:hidden;border-radius:16px;display:flex;align-items:flex-end;background:var(--panel);min-height:0;}
.mo-tile__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s ease;}
.mo-tile__img[data-noimg]{background:linear-gradient(135deg,var(--accent),var(--accent2));}
.mo-tile:hover .mo-tile__img{transform:scale(1.06);}
.mo-tile__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,25,0) 30%,rgba(10,8,25,.82) 100%);}
.mo-tile__body{position:relative;padding:16px 16px 15px;display:flex;flex-direction:column;width:100%;}
.mo-tile__title{font-family:var(--head);font-weight:700;color:#fff;line-height:1.15;letter-spacing:-.01em;margin:0;font-size:1.02rem;text-shadow:0 1px 12px rgba(0,0,0,.5);}
.mo-tile--big{grid-column:span 2;grid-row:span 2;}
.mo-tile--wide{grid-column:span 2;}
.mo-tile--tall{grid-row:span 2;}
.mo-tile--big .mo-tile__title{font-size:1.9rem;}
.mo-tile--wide .mo-tile__title{font-size:1.3rem;}
.mo-tile--tall .mo-tile__title{font-size:1.2rem;}

/* Sektion + Liste */
.mo-sechead{font-family:var(--head);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;margin:38px 0 16px;display:flex;align-items:center;gap:12px;}
.mo-sechead::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--accent);}
.mo-sechead--page{margin-top:10px;}
.mo-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.mo-row{display:flex;gap:14px;align-items:center;background:var(--panel);border-radius:12px;padding:10px;transition:transform .15s ease;}
.mo-row:hover{transform:translateY(-2px);}
.mo-row__img{width:92px;height:66px;border-radius:8px;background-size:cover;background-position:center;flex:0 0 auto;}
.mo-row__body{display:flex;flex-direction:column;}
.mo-row__title{font-family:var(--head);font-weight:600;font-size:1rem;line-height:1.2;margin-top:4px;}
.mo-row:hover .mo-row__title{color:var(--accent);}

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

/* Single */
.mo-single{max-width:740px;margin:0 auto;}
.mo-single__title{font-family:var(--head);font-weight:700;font-size:2.3rem;line-height:1.12;letter-spacing:-.02em;margin:6px 0 8px;}
.mo-single__meta{color:var(--soft);font-size:.85rem;margin:0 0 22px;}
.mo-single__figure{margin:0 0 24px;border-radius:16px;overflow:hidden;}
.mo-single__content{font-size:1.13rem;line-height:1.8;}
.mo-single__content p{margin:0 0 1.25em;}
.mo-single__content a{color:var(--accent);text-decoration:underline;}
.fna-source{font-size:.9rem;color:var(--soft);border-top:1px solid var(--line);padding-top:16px;margin-top:24px;}
.mo-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.mo-tags a{font-size:.8rem;background:var(--panel);border:1px solid var(--line);padding:5px 12px;border-radius:100px;color:var(--soft);}

.mo-foot{background:var(--ink);color:#b4b0cf;margin-top:44px;}
.mo-foot__inner{padding:32px 22px;text-align:center;}
.mo-foot__brand{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-family:var(--head);font-weight:700;font-size:1.2rem;margin:0 0 6px;}
.mo-foot__legal{font-size:.78rem;max-width:80ch;margin:0 auto;}
.mo-empty{color:var(--soft);padding:50px 0;text-align:center;}

@media(max-width:820px){
	.mo-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;}
	.mo-tile--big{grid-column:span 2;grid-row:span 2;}
	.mo-tile--wide{grid-column:span 2;grid-row:span 1;}
	.mo-tile--tall{grid-row:span 1;}
	.mo-list{grid-template-columns:1fr;}
}
@media(max-width:600px){
	/* Bento: eine Spalte, Span-Klassen zurücksetzen (kein Überlauf) */
	.mo-bento{grid-template-columns:1fr;grid-auto-rows:200px;}
	.mo-tile--big,.mo-tile--wide,.mo-tile--tall{grid-column:span 1;grid-row:span 1;}
	.mo-tile__title{font-size:1.1rem;}
	.mo-tile--big .mo-tile__title{font-size:1.4rem;}
	.mo-tile--wide .mo-tile__title,.mo-tile--tall .mo-tile__title{font-size:1.15rem;}
	/* Liste einspaltig */
	.mo-list{grid-template-columns:1fr;}
	/* Kompaktere Ränder */
	.mo-wrap{padding:0 15px;}
	.mo-main{padding:20px 15px 26px;}
	.mo-foot__inner{padding:28px 15px;}
	/* Sticky-Header auf Mobil statisch */
	.mo-head{position:static;backdrop-filter:none;}
	.mo-head__inner{height:56px;gap:12px;}
	/* Nav: horizontal scrollbar, keine Sprünge */
	.mo-nav{gap:16px;}
	.mo-nav a{padding:8px 0;font-size:.9rem;}
	/* Bilder fluid */
	img{height:auto;}
	.mo-single__title{font-size:1.7rem;}
	.mo-single__content{font-size:1.05rem;line-height:1.7;}
	.mo-sechead{font-size:1.3rem;margin:28px 0 14px;}
}
@media(max-width:400px){
	.mo-bento{grid-auto-rows:180px;}
	.mo-tile--big .mo-tile__title{font-size:1.25rem;}
	.mo-tile__body{padding:13px 13px 12px;}
	.mo-wrap{padding:0 14px;}
	.mo-main{padding:18px 14px 24px;}
	.mo-single__title{font-size:1.45rem;}
}

/* Bild-Platzhalter (erscheint, wenn kein Beitragsbild vorhanden) */
.mo-tile__img,.mo-row__img{background-color:#141d29;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%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%2326374d%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%230e1622%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%27600%27%20height%3D%27400%27%20fill%3D%27url%28%23g%29%27/%3E%3Ccircle%20cx%3D%27300%27%20cy%3D%27205%27%20r%3D%2760%27%20fill%3D%27%23eef3f8%27/%3E%3Cpolygon%20points%3D%27300%2C176%20318%2C189%20311%2C210%20289%2C210%20282%2C189%27%20fill%3D%27%23101823%27/%3E%3Cpath%20d%3D%27M300%20205%20L300%20148%20M300%20205%20L349%20233%20M300%20205%20L251%20233%27%20stroke%3D%27%23101823%27%20stroke-width%3D%276%27%20fill%3D%27none%27/%3E%3Ccircle%20cx%3D%27300%27%20cy%3D%27205%27%20r%3D%2760%27%20fill%3D%27none%27%20stroke%3D%27%23c7d2df%27%20stroke-width%3D%272%27/%3E%3C/svg%3E");background-size:cover;background-position:center;background-repeat:no-repeat;}