/* =========================================================================
   Fussballmanager.de - main.css
   Farben kommen aus CSS-Variablen (siehe functions.php / fm_print_color_vars).
   Fallback-Werte hier, damit das Theme auch ohne ACF schon funktioniert.
   ========================================================================= */
:root{
	--fm-primary:#E2001A;
	--fm-primary-hover:#B30015;
	--fm-bg:#FFFFFF;
	--fm-surface:#F8F8F8;
	--fm-text:#333333;
	--fm-heading:#111111;
	--fm-border:#E5E5E5;
	--fm-footer-bg:#F8F8F8;
	--fm-footer-text:#777777;
	--fm-btn-text:#FFFFFF;
	--fm-maxw:1180px;
	--fm-header-h:72px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	color:var(--fm-text);
	background:var(--fm-bg);
	line-height:1.6;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--fm-primary);text-decoration:none;}
a:hover{color:var(--fm-primary-hover);}
h1,h2,h3,h4{color:var(--fm-heading);line-height:1.2;margin:0 0 .5em;}

.fm-container{width:100%;max-width:var(--fm-maxw);margin:0 auto;padding:0 20px;}
.fm-center{text-align:center;}

/* ---- Buttons ---------------------------------------------------------- */
.fm-btn{
	display:inline-flex;align-items:center;justify-content:center;
	padding:10px 22px;border-radius:4px;font-weight:700;font-size:15px;
	border:2px solid transparent;cursor:pointer;transition:all .15s ease;
	line-height:1;white-space:nowrap;
}
.fm-btn--primary{background:var(--fm-primary);color:var(--fm-btn-text);}
.fm-btn--primary:hover{background:var(--fm-primary-hover);color:var(--fm-btn-text);}
.fm-btn--ghost{background:transparent;color:var(--fm-heading);border-color:var(--fm-border);}
.fm-btn--ghost:hover{border-color:var(--fm-primary);color:var(--fm-primary);}
.fm-btn--lg{padding:14px 30px;font-size:17px;}
.fm-btn--full{width:100%;}

/* ---- Header / Nav ----------------------------------------------------- */
.fm-header{
	position:sticky;top:0;z-index:100;background:var(--fm-bg);
	border-bottom:1px solid var(--fm-border);
}
.fm-header__inner{display:flex;align-items:center;gap:24px;min-height:var(--fm-header-h);}
.fm-brand{display:flex;align-items:center;gap:10px;color:var(--fm-heading);font-weight:800;font-size:20px;}
.fm-brand__logo{height:36px;width:auto;}
.fm-brand__text{white-space:nowrap;}

.fm-nav{display:flex;align-items:center;gap:24px;margin-left:auto;}
.fm-menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.fm-menu li{position:relative;}
.fm-menu a{position:relative;display:block;padding:10px 14px;color:var(--fm-heading);font-weight:600;border-radius:4px;}
.fm-menu a:hover{color:var(--fm-primary);}

/* Aktiver Menuepunkt: Punkt + animierte Linie darunter (wie stadtgame.com) */
.fm-menu .current-menu-item>a,
.fm-menu .current-menu-parent>a,
.fm-menu .current-menu-ancestor>a,
.fm-menu .current_page_item>a,
.fm-menu .current_page_ancestor>a{color:var(--fm-primary);}

.fm-menu .current-menu-item>a::after,
.fm-menu .current-menu-parent>a::after,
.fm-menu .current-menu-ancestor>a::after,
.fm-menu .current_page_item>a::after,
.fm-menu .current_page_ancestor>a::after{
	content:'';position:absolute;left:50%;bottom:6px;width:48px;height:2px;
	margin-left:-24px;background:var(--fm-primary);z-index:1;
	animation:fm-navline .8s ease-in 1;
}
.fm-menu .current-menu-item>a::before,
.fm-menu .current-menu-parent>a::before,
.fm-menu .current-menu-ancestor>a::before,
.fm-menu .current_page_item>a::before,
.fm-menu .current_page_ancestor>a::before{
	content:'';position:absolute;left:50%;bottom:2px;width:5px;height:5px;
	margin-left:-6px;border-radius:50%;background:var(--fm-primary);
	border:4px solid var(--fm-bg);box-sizing:content-box;z-index:2;
}
@keyframes fm-navline{from{width:0;margin-left:0;}to{width:48px;margin-left:-24px;}}
.fm-menu .sub-menu{
	position:absolute;top:100%;left:0;min-width:200px;background:var(--fm-bg);
	border:1px solid var(--fm-border);border-radius:4px;padding:6px;display:none;
	box-shadow:0 10px 30px rgba(0,0,0,.08);z-index:10;
}
.fm-menu li:hover>.sub-menu{display:block;}
.fm-nav__actions{display:flex;align-items:center;gap:10px;}

.fm-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto;}
.fm-burger span{width:26px;height:3px;background:var(--fm-heading);border-radius:2px;}

/* ---- Hero ------------------------------------------------------------- */
.fm-hero{position:relative;}
.fm-hero__swiper,.fm-hero__slide{height:clamp(420px,60vh,640px);}
.fm-hero__slide{background-size:cover;background-position:center;}
.fm-hero__slide--empty{background:linear-gradient(135deg,var(--fm-primary),#222);}
.fm-hero__overlay{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;z-index:5;}
.fm-hero__overlay .fm-container{width:100%;}
.fm-hero__layer{
	pointer-events:auto;max-width:560px;background:rgba(0,0,0,.55);color:#fff;
	padding:34px 38px;border-radius:6px;border-left:5px solid var(--fm-primary);
}
.fm-hero__layer h1,.fm-hero__layer h2{color:#fff;}
.fm-hero__sub{text-transform:uppercase;letter-spacing:1px;font-size:13px;font-weight:700;color:var(--fm-primary);margin:0 0 8px;}
.fm-hero__title{font-size:30px;margin:0 0 6px;}
.fm-hero__subtitle{font-size:19px;font-weight:600;opacity:.9;margin:0 0 12px;}
.fm-hero__text{font-size:16px;opacity:.95;margin-bottom:20px;}
.fm-hero__dots{--swiper-pagination-color:var(--fm-primary);}

/* ---- Inhaltsbereiche -------------------------------------------------- */
.fm-section{padding:64px 0;}
.fm-section:nth-child(even){background:var(--fm-surface);}
/* Subheadline: farbiger Text mit Linie daneben (wie stadtgame) */
.fm-subheadline{position:relative;display:block;color:var(--fm-primary);font-size:16px;font-weight:400;padding:0 0 0 72px;margin:0 0 20px;}
.fm-subheadline::before{content:'';position:absolute;left:0;top:50%;width:56px;height:1px;background:var(--fm-primary);}
.fm-subheadline.fm-center{display:table;margin:0 auto 20px;padding:0 80px;text-align:center;}
.fm-subheadline.fm-center::before{left:0;}
.fm-subheadline.fm-center::after{content:'';position:absolute;right:0;top:50%;width:56px;height:1px;background:var(--fm-primary);}

/* Section-Ueberschrift: kurze Linie davor (wie stadtgame h3) */
.fm-section__title{font-size:24px;line-height:32px;font-weight:400;color:var(--fm-heading);margin:0 0 24px;}
.fm-section__title:not(.fm-center)::before{content:'';display:inline-block;float:left;width:54px;height:1px;margin:15px 16px 0 0;background:var(--fm-primary);}

.fm-content{font-size:16px;line-height:1.6;}
.fm-content p{margin:0 0 24px;}
.fm-content p:last-child{margin-bottom:0;}
.fm-prose{max-width:none;}

.fm-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:none;}
.fm-split__media img{border-radius:6px;width:100%;}
.fm-section--bild-rechts .fm-split__media{order:2;}

.fm-gallery{margin-top:24px;border-radius:6px;}
.fm-gallery__slide img{width:100%;border-radius:6px;}
.fm-gallery{--swiper-theme-color:var(--fm-primary);}

.fm-video{position:relative;padding-top:56.25%;border-radius:6px;overflow:hidden;margin-top:24px;}
.fm-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---- Innenseiten ------------------------------------------------------ */
.fm-page{padding:48px 20px 64px;}
.fm-page__title{font-size:30px;margin-bottom:20px;}
.fm-postlist{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.fm-postcard__thumb img{border-radius:6px;}
.fm-postcard__title{font-size:18px;margin:12px 0 6px;}

/* ---- Footer ----------------------------------------------------------- */
.fm-footer__boxes{background:var(--fm-footer-bg);color:var(--fm-footer-text);padding:48px 0;border-top:1px solid var(--fm-border);}
.fm-footer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.fm-fbox__title{font-size:18px;font-weight:400;color:var(--fm-heading);margin:0 0 16px;overflow:hidden;}
.fm-fbox__title::before{content:'';display:inline-block;float:left;width:54px;height:1px;margin:11px 16px 0 0;background:var(--fm-primary);}
.fm-fbox__list{list-style:none;margin:0;padding:0;}
.fm-fbox__list li{margin:0 0 12px;}
.fm-fbox__list a{display:flex;align-items:center;gap:12px;color:var(--fm-footer-text);}
.fm-fbox__list a:hover{color:var(--fm-primary);}
.fm-fbox__thumb{flex:0 0 48px;width:48px;height:48px;border-radius:4px;overflow:hidden;background:var(--fm-border);}
.fm-fbox__thumb img{width:48px;height:48px;object-fit:cover;}
.fm-fbox__text{font-size:14px;line-height:1.35;}
.fm-fbox__empty{font-size:13px;opacity:.8;}

.fm-footer__bar{background:var(--fm-bg);border-top:1px solid var(--fm-border);padding:18px 0;}
.fm-footer__barinner{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.fm-footer__copy{margin:0;font-size:13px;color:var(--fm-footer-text);}
.fm-footer__logo img{height:32px;width:auto;}
.fm-footer__logo span{font-weight:800;color:var(--fm-heading);}

/* ---- Login-Modal ------------------------------------------------------ */
.fm-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.fm-modal[hidden]{display:none;}
.fm-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.fm-modal__box{position:relative;background:var(--fm-bg);width:100%;max-width:380px;border-radius:8px;padding:30px;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.fm-modal__x{position:absolute;top:10px;right:14px;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--fm-text);}
.fm-modal__title{font-size:22px;font-weight:800;color:var(--fm-heading);text-align:center;margin-bottom:18px;}
.fm-login label{display:block;font-size:14px;font-weight:600;color:var(--fm-heading);margin-bottom:12px;}
.fm-login input{width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--fm-border);border-radius:4px;font-size:15px;}
.fm-login input:focus{outline:none;border-color:var(--fm-primary);}
.fm-login__register{display:block;text-align:center;margin-top:16px;font-size:14px;}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width:900px){
	.fm-burger{display:flex;}
	.fm-nav{
		position:fixed;top:var(--fm-header-h);left:0;right:0;bottom:0;
		flex-direction:column;align-items:stretch;gap:0;background:var(--fm-bg);
		padding:16px 20px;overflow-y:auto;transform:translateX(100%);
		transition:transform .25s ease;margin-left:0;
	}
	.fm-nav.is-open{transform:translateX(0);}
	.fm-menu{flex-direction:column;align-items:stretch;gap:0;}
	.fm-menu .sub-menu{position:static;display:block;border:0;box-shadow:none;padding-left:14px;}
	.fm-nav__actions{margin-top:16px;}
	.fm-split{grid-template-columns:1fr;gap:24px;}
	.fm-section--bild-rechts .fm-split__media{order:0;}
	.fm-footer__grid{grid-template-columns:1fr;gap:28px;}
	.fm-postlist{grid-template-columns:1fr;}
	.fm-footer__barinner{flex-direction:column;text-align:center;}
}