/* =========================================================================
   FNA Premium-Enhancement – geteilter Politur-Layer über alle Fussball-Themes.
   Rein dekorativ (Transitions/Transform/Opacity), verändert kein Layout.
   ========================================================================= */
:root{ --fna-ease:cubic-bezier(.22,.61,.36,1); }

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:rgba(93,123,255,.32); }

/* Feinere Scrollbar */
*{ scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(140,150,175,.32); border-radius:9px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(140,150,175,.55); background-clip:content-box; }

/* Lese-Fortschrittsbalken */
.fna-progress{
	position:fixed; top:0; left:0; height:3px; width:0; z-index:99999;
	background:linear-gradient(90deg,#12dd94,#3d7bff,#c6ff3d);
	box-shadow:0 0 14px rgba(61,123,255,.55);
	transition:width .12s linear; pointer-events:none;
}

/* Nach-oben-Button */
.fna-top{
	position:fixed; right:22px; bottom:22px; width:48px; height:48px;
	border:0; border-radius:50%; cursor:pointer; z-index:99998;
	background:rgba(18,24,36,.82); color:#fff; font-size:21px; line-height:48px; text-align:center;
	opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
	transition:.4s var(--fna-ease); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
	box-shadow:0 10px 28px rgba(0,0,0,.34);
}
.fna-top.fna-show{ opacity:1; transform:none; pointer-events:auto; }
.fna-top:hover{ background:#3d7bff; transform:translateY(-2px); }

/* Scroll-Reveal (nur aktiv, wenn JS die Klasse setzt → ohne JS bleibt alles sichtbar) */
.fna-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--fna-ease), transform .7s var(--fna-ease); will-change:opacity,transform; }
.fna-reveal.fna-in{ opacity:1; transform:none; }

/* Bild-Feinschliff: sanftes Einblenden + dezenter Kontrast (kaschiert kleine Quellen) */
img{ transition:opacity .55s ease, filter .55s ease; }
img.fna-imgload{ opacity:0; }
[class*="img"],[class*="thumb"],[class*="photo"]{ transition:transform .6s var(--fna-ease); }
[class*="card"]:hover [class*="img"],
[class*="tile"]:hover [class*="img"],
[class*="feat"]:hover [class*="img"],
[class*="row"]:hover  [class*="img"]{ transform:scale(1.055); }

/* Karten heben sich beim Hover leicht an */
[class*="card"],[class*="tile"]{ transition:transform .35s var(--fna-ease), box-shadow .35s var(--fna-ease); }
[class*="card"]:hover,[class*="tile"]:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(0,0,0,.5); }

/* Sanfter Ken-Burns-Zoom auf grossen Hintergrundbildern */
@keyframes fnaKen{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
[class*="hero"] [class*="img"],[class*="feat"] [class*="img"]{ animation:fnaKen 18s ease-in-out infinite alternate; }
[class*="card"]:hover [class*="img"],[class*="tile"]:hover [class*="img"],[class*="feat"]:hover [class*="img"]{ animation-play-state:paused; }

/* Header bekommt beim Scrollen Tiefe */
header.fna-shrink{ box-shadow:0 8px 30px rgba(0,0,0,.26); -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px); }

/* Deutlichere Fokus-Ringe (Barrierefreiheit) */
a:focus-visible,button:focus-visible,input:focus-visible{ outline:2px solid #3d7bff; outline-offset:2px; border-radius:4px; }

/* Feiner Seiten-Einblendeffekt beim Laden */
@keyframes fnaFadeIn{ from{ opacity:0; } to{ opacity:1; } }
body.fna-ready{ animation:fnaFadeIn .5s ease both; }

/* Respektiert Nutzerwunsch nach weniger Bewegung */
@media (prefers-reduced-motion:reduce){
	html{ scroll-behavior:auto; }
	.fna-reveal{ opacity:1 !important; transform:none !important; }
	[class*="hero"] [class*="img"],[class*="feat"] [class*="img"]{ animation:none; }
	*{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================================
   Mobile-Härtung – gilt für ALLE Themes (lädt zuletzt, gewinnt).
   Fängt die häufigsten Handy-Bugs generisch ab, ohne das Desktop-Layout
   anzutasten.
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ max-width:100%; overflow-x:hidden; }
/* `clip` erzeugt – anders als `hidden` – KEINEN Scroll-Container. Verhindert,
   dass der body sich horizontal verschieben laesst (sonst verrutscht die Seite). */
@supports (overflow-x:clip){ html,body{ overflow-x:clip; } }
img,svg,video,iframe{ max-width:100%; }
img{ height:auto; }
table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
pre,code{ max-width:100%; overflow-x:auto; white-space:pre-wrap; word-break:break-word; }

@media (max-width:600px){
	/* iOS zoomt bei <16px automatisch in Formularfelder – verhindern */
	input,select,textarea{ font-size:16px; max-width:100%; }
	/* Nach-oben-Button kompakter + über Safari-Bottombar */
	.fna-top{ width:42px; height:42px; line-height:42px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); }
	/* lange Titel/URLs sauber umbrechen statt überlaufen */
	h1,h2,h3,[class*="title"],[class*="__title"]{ overflow-wrap:break-word; word-break:break-word; }
}

/* =========================================================================
   Einheitlicher Header — schlicht, mit Hamburger-Menue auf Mobil.
   Themed ueber --fna-hd-* (je Theme in :root gesetzt).
   ========================================================================= */
.fna-hd{ position:sticky; top:0; z-index:200; background:var(--fna-hd-bg); border-bottom:1px solid var(--fna-hd-line); }
.fna-hd__in{ max-width:var(--fna-hd-maxw,1240px); margin:0 auto; display:flex; align-items:center; gap:18px; padding:0 20px; height:64px; }
.fna-hd__logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.fna-lg__wm{ display:flex; flex-direction:column; line-height:1; }
.fna-hd__nav{ margin-left:auto; display:flex; align-items:center; gap:20px; }
.fna-hd__nav a{ font-family:var(--fna-hd-font); font-weight:600; font-size:.92rem; letter-spacing:.02em; color:var(--fna-hd-dim); text-decoration:none; white-space:nowrap; transition:color .18s ease; }
.fna-hd__nav a:hover{ color:var(--fna-hd-text); }
.fna-hd__nav a[aria-current]{ color:var(--fna-hd-accent); }

.fna-hd__burger{ display:none; margin-left:auto; width:42px; height:42px; padding:10px; border:0; background:transparent; cursor:pointer; flex-direction:column; justify-content:space-between; }
.fna-hd__burger span{ display:block; width:100%; height:2px; background:var(--fna-hd-text); border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.fna-hd__burger.is-open span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.fna-hd__burger.is-open span:nth-child(2){ opacity:0; }
.fna-hd__burger.is-open span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

@media (max-width:860px){
	.fna-hd__burger{ display:flex; }
	.fna-hd__nav{
		position:absolute; left:0; right:0; top:100%; margin:0; flex-direction:column; align-items:stretch; gap:0;
		background:var(--fna-hd-bg); border-bottom:1px solid var(--fna-hd-line); padding:4px 20px 14px;
		opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .22s ease, transform .22s ease;
		max-height:calc(100vh - 64px); overflow-y:auto; box-shadow:0 18px 40px rgba(0,0,0,.18);
	}
	.fna-hd__nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
	.fna-hd__nav a{ padding:14px 2px; font-size:1.02rem; border-bottom:1px solid var(--fna-hd-line); }
	.fna-hd__nav a:last-child{ border-bottom:0; }
}
@media (max-width:400px){ .fna-hd__in{ padding:0 14px; gap:10px; } }