/*
Theme Name:   Suchtlappen
Theme URI:    https://suchtlappen.com
Author:       Suchtlappen Clan
Description:  Dunkles Neon-Gaming-Theme für den Suchtlappen-Clan. Gebaut für das Plugin "Suchtlappen Core" – Dashboard, Zock-Sessions, Check-ins, Rangliste & Clips.
Version:      1.4.0
License:      GNU General Public License v2 or later
Text Domain:  suchtlappen
*/

:root {
	--sl-bg: #0a0d14;
	--sl-bg-2: #0d1120;
	--sl-panel: #121826;
	--sl-panel-2: #171f30;
	--sl-line: #232c42;
	--sl-text: #e8ecf6;
	--sl-muted: #8b95ad;
	--sl-green: #3dff88;
	--sl-purple: #8b5cf6;
	--sl-pink: #ff4d6d;
	--sl-gold: #ffd166;
	--sl-font-head: 'Chakra Petch', system-ui, sans-serif;
	--sl-font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html { background: var(--sl-bg); }

body {
	margin: 0;
	background: transparent;
	color: var(--sl-text);
	font-family: var(--sl-font-body);
	font-size: 16px;
	line-height: 1.6;
	min-height: 100vh;
}

/* Lebendiger Hintergrund: Neon-Nebel, der ganz langsam wandert */
body::before {
	content: '';
	position: fixed;
	inset: -18%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(1100px 500px at 80% -10%, rgba(139, 92, 246, .14), transparent 60%),
		radial-gradient(900px 420px at 10% 0%, rgba(61, 255, 136, .09), transparent 55%),
		radial-gradient(800px 460px at 50% 115%, rgba(139, 92, 246, .10), transparent 60%);
	animation: slDrift 32s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes slDrift {
	to { transform: translate(3.5%, 2.5%) scale(1.07) rotate(.5deg); }
}

h1, h2, h3, h4, h5 {
	font-family: var(--sl-font-head);
	letter-spacing: .01em;
	line-height: 1.25;
	color: var(--sl-text);
}

a { color: var(--sl-green); }
a:hover { color: #7dffab; }

img { max-width: 100%; height: auto; }

::selection { background: rgba(61, 255, 136, .3); }

/* ---------- Header / Navigation ---------- */
.sl-site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(10, 13, 20, .85);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--sl-line);
}
.sl-nav-inner {
	max-width: 1180px; margin: 0 auto;
	display: flex; align-items: center; gap: 20px;
	padding: 12px 20px;
}
.sl-brand {
	display: flex; align-items: center; gap: 10px;
	text-decoration: none;
	font-family: var(--sl-font-head);
	font-weight: 700; font-size: 1.15em;
	color: var(--sl-text);
	white-space: nowrap;
}
.sl-brand:hover { color: var(--sl-green); }
.sl-brand svg { display: block; }
.sl-brand .sl-brand-sucht { color: var(--sl-green); }
.sl-brand .sl-brand-lappen { color: var(--sl-purple); }

.sl-nav { flex: 1; }
.sl-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; }
.sl-nav li a {
	display: block;
	color: var(--sl-muted);
	text-decoration: none;
	font-weight: 600; font-size: .9em;
	padding: 8px 12px;
	border-radius: 8px;
	transition: all .12s ease;
}
.sl-nav li a:hover { color: var(--sl-text); background: var(--sl-panel-2); }
.sl-nav .current-menu-item > a,
.sl-nav .current_page_item > a { color: var(--sl-green); background: rgba(61, 255, 136, .08); }

.sl-nav-user { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.sl-nav-user img { border-radius: 50%; border: 2px solid var(--sl-green); display: block; }
.sl-nav-user a { color: var(--sl-muted); text-decoration: none; font-size: .85em; font-weight: 600; }
.sl-nav-user a:hover { color: var(--sl-green); }
.sl-nav-login {
	background: linear-gradient(135deg, var(--sl-green), #21d970);
	color: #06240f !important;
	border-radius: 10px; padding: 8px 16px;
	font-weight: 800 !important;
}

/* ---------- Layout ---------- */
.sl-main { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }
.sl-page-title { font-size: 2em; margin: 10px 0 22px; }
.sl-page-title::after {
	content: '';
	display: block;
	width: 64px; height: 4px;
	margin-top: 10px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--sl-green), var(--sl-purple));
}

/* ---------- Hero (Startseite für Gäste) ---------- */
.sl-hero { text-align: center; padding: 70px 20px 50px; }
.sl-hero-logo { margin: 0 auto 22px; width: 130px; filter: drop-shadow(0 0 30px rgba(61, 255, 136, .35)); }
.sl-hero h1 {
	font-size: clamp(2.6em, 7vw, 4.4em);
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.sl-hero h1 .a { color: var(--sl-green); text-shadow: 0 0 30px rgba(61, 255, 136, .5); }
.sl-hero h1 .b { color: var(--sl-purple); text-shadow: 0 0 30px rgba(139, 92, 246, .5); }
.sl-hero-claim { color: var(--sl-muted); font-size: 1.15em; margin: 0 0 26px; }
.sl-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 34px; }
.sl-hero-chips .sl-chip { font-size: .9em; padding: 7px 16px; }
.sl-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.sl-features {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	max-width: 1000px; margin: 30px auto 0;
	text-align: left;
}
.sl-feature { border-top: 3px solid var(--sl-green); }
.sl-feature:nth-child(2) { border-top-color: var(--sl-purple); }
.sl-feature:nth-child(3) { border-top-color: var(--sl-pink); }
.sl-feature:nth-child(4) { border-top-color: var(--sl-gold); }
.sl-feature .sl-feature-icon { font-size: 1.8em; }
.sl-feature p { color: var(--sl-muted); font-size: .9em; margin-bottom: 0; }

/* ---------- Dashboard-Begrüßung ---------- */
.sl-welcome { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.sl-welcome img { border-radius: 50%; border: 3px solid var(--sl-accent, var(--sl-green)); }
.sl-welcome h1 { margin: 0; font-size: 1.7em; }
.sl-welcome p { margin: 2px 0 0; color: var(--sl-muted); }

/* ---------- Artikel / Inhalte ---------- */
.sl-article {
	background: var(--sl-panel);
	border: 1px solid var(--sl-line);
	border-radius: 14px;
	padding: 26px 28px;
}
.sl-article p, .sl-article li { color: var(--sl-text); }
.sl-article a { color: var(--sl-green); }
.sl-loop-item { margin-bottom: 16px; }
.sl-loop-item h2 { margin: 0 0 6px; font-size: 1.3em; }
.sl-loop-item h2 a { color: var(--sl-text); text-decoration: none; }
.sl-loop-item h2 a:hover { color: var(--sl-green); }
.sl-loop-meta { color: var(--sl-muted); font-size: .85em; margin-bottom: 8px; }

/* ---------- Autoren-/Profilseite ---------- */
.sl-profile-hero {
	display: flex; align-items: center; gap: 22px;
	background: linear-gradient(135deg, rgba(61, 255, 136, .06), rgba(139, 92, 246, .08)), var(--sl-panel);
	border: 1px solid var(--sl-line);
	border-top: 4px solid var(--sl-accent, var(--sl-green));
	border-radius: 16px;
	padding: 26px 28px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.sl-profile-hero img { border-radius: 50%; border: 3px solid var(--sl-accent, var(--sl-green)); }
.sl-profile-hero h1 { margin: 0 0 4px; font-size: 1.9em; }
.sl-profile-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 12px; }
.sl-stat { text-align: center; }
.sl-stat b { display: block; font-size: 1.5em; color: var(--sl-green); font-family: var(--sl-font-head); }
.sl-stat span { color: var(--sl-muted); font-size: .8em; }
.sl-id-table { width: 100%; border-collapse: collapse; }
.sl-id-table th { text-align: left; color: var(--sl-muted); font-weight: 600; padding: 8px 12px 8px 0; width: 180px; vertical-align: top; }
.sl-id-table td { padding: 8px 0; border-top: 1px solid var(--sl-line); color: var(--sl-text); }
.sl-id-table tr:first-child td, .sl-id-table tr:first-child th { border-top: none; }

/* ---------- Footer ---------- */
.sl-site-footer {
	border-top: 1px solid var(--sl-line);
	margin-top: 40px;
	padding: 26px 20px;
	text-align: center;
	color: var(--sl-muted);
	font-size: .85em;
}
.sl-site-footer a { color: var(--sl-muted); }
.sl-site-footer a:hover { color: var(--sl-green); }
.sl-footer-tag { margin-top: 4px; font-style: italic; }

/* ---------- Kommentare & Sonstiges ---------- */
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { background: var(--sl-panel-2); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], textarea {
	background: var(--sl-panel-2);
	border: 1px solid var(--sl-line);
	color: var(--sl-text);
	border-radius: 10px;
	padding: 9px 12px;
	font: inherit;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--sl-green); }
button, input[type=submit] { cursor: pointer; }

/* ---------- Burger & Mobile-Menü ---------- */
.sl-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 10px;
	background: var(--sl-panel-2, #171f30);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	cursor: pointer;
}
.sl-burger span {
	display: block;
	height: 2px;
	background: var(--sl-text);
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}
.sl-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sl-burger.is-open span:nth-child(2) { opacity: 0; }
.sl-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
	.sl-nav-inner { flex-wrap: wrap; gap: 12px; }
	.sl-brand { margin-right: auto; }
	.sl-burger { display: flex; order: 2; }
	.sl-nav-user { order: 1; margin-left: auto; }
	.sl-nav {
		order: 3;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
	}
	.sl-nav.is-open { max-height: 70vh; overflow-y: auto; }
	.sl-nav ul { flex-direction: column; gap: 4px; padding: 6px 0 12px; }
	.sl-nav li a {
		font-size: 1.05em;
		padding: 12px 14px; /* Touch-freundliche Trefferfläche */
	}
	.sl-main { padding: 20px 14px 50px; }
	.sl-hero { padding: 40px 12px 30px; }
}

/* ---------- Sanfte Einblend-Animationen ---------- */
@keyframes slFadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
.sl-card, .sl-article, .sl-profile-hero { animation: slFadeUp .35s ease both; }
.sl-card { transition: border-color .18s ease, box-shadow .18s ease; }
.sl-member:hover, .sl-feature:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }

/* ---------- Lebendiges Logo ---------- */
.sl-brand svg, .sl-hero-logo svg { overflow: visible; }
.sl-brand svg { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.sl-brand:hover svg { transform: rotate(-8deg) scale(1.1); }

/* Hexagon atmet im Neon-Glow */
.lg-hex {
	animation: lgHexGlow 4.5s ease-in-out infinite;
}
@keyframes lgHexGlow {
	0%, 100% { filter: drop-shadow(0 0 2px rgba(61, 255, 136, .7)); }
	50% { filter: drop-shadow(0 0 7px rgba(139, 92, 246, .95)); }
}

/* Controller-Buttons blinken wie eine Combo-Eingabe */
.lg-b1, .lg-b2, .lg-b3, .lg-b4 { animation: lgBlink 2.4s ease-in-out infinite; }
.lg-b2 { animation-delay: .3s; }
.lg-b3 { animation-delay: .6s; }
.lg-b4 { animation-delay: .9s; }
@keyframes lgBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: .2; }
}
.lg-dpad { animation: lgDpad 3.6s ease-in-out infinite; }
@keyframes lgDpad {
	0%, 100% { stroke: #3dff88; }
	50% { stroke: #7dffab; }
}

/* Die Drips tropfen in Dauerschleife */
.lg-d1, .lg-d2 {
	transform-box: fill-box;
	transform-origin: top center;
	animation: lgDrip 3.4s ease-in infinite;
}
.lg-d2 { animation-delay: 1.7s; }
@keyframes lgDrip {
	0% { transform: scaleY(.55); opacity: .35; }
	55% { transform: scaleY(1); opacity: 1; }
	85% { transform: scaleY(1.08) translateY(4px); opacity: .85; }
	100% { transform: scaleY(1.1) translateY(9px); opacity: 0; }
}

/* Hero: Logo schwebt, Titel flackert wie eine Leuchtreklame */
.sl-hero-logo svg { animation: slFloat 5.5s ease-in-out infinite; }
@keyframes slFloat {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-11px) rotate(1.5deg); }
}
.sl-hero h1 .a { animation: slNeonG 3.8s ease-in-out infinite; }
.sl-hero h1 .b { animation: slNeonP 3.8s ease-in-out infinite .9s; }
@keyframes slNeonG {
	0%, 100% { text-shadow: 0 0 30px rgba(61, 255, 136, .5); }
	48%, 52% { text-shadow: 0 0 46px rgba(61, 255, 136, .95), 0 0 90px rgba(61, 255, 136, .35); }
	50% { text-shadow: 0 0 12px rgba(61, 255, 136, .3); }
}
@keyframes slNeonP {
	0%, 100% { text-shadow: 0 0 30px rgba(139, 92, 246, .5); }
	48%, 52% { text-shadow: 0 0 46px rgba(139, 92, 246, .95), 0 0 90px rgba(139, 92, 246, .35); }
	50% { text-shadow: 0 0 12px rgba(139, 92, 246, .3); }
}

/* Seitentitel-Unterstrich waechst beim Laden */
.sl-page-title::after { animation: slGrow .6s cubic-bezier(.22, 1, .36, 1) both; transform-origin: left; }
@keyframes slGrow { from { transform: scaleX(0); } }

/* Feature-Karten heben ab, Icons wippen */
.sl-feature { transition: transform .25s ease, box-shadow .25s ease; }
.sl-feature:hover { transform: translateY(-6px); }
.sl-feature:hover .sl-feature-icon { animation: slBounce .5s ease; display: inline-block; }
@keyframes slBounce {
	30% { transform: translateY(-6px) scale(1.15); }
	60% { transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}