/**
	 * moere.pro – Haupt-Stylesheet
	 * Version: 2026-03-01
	 * Autor: Christian Mörstedt
	 */
	
	@font-face {
		font-family: 'Inter';
		font-style: normal;
		font-weight: 100 900;
		font-display: swap;
		src: url('/assets/fonts/InterVariable.woff2') format('woff2 supports variations'),
			 url('/assets/fonts/InterVariable.woff2') format('woff2-variations');
	}
	
	:root {
		--vh: 1vh;
		--bg: #f8f5f0;
		--text: #1c170f;
		--text-light: #3c3428;
		--accent: #1c170f;
		--glass-bg: rgba(248,245,240,0.88);
		--glass-border: rgba(28,23,15,0.12);
		--shadow: 0 20px 40px -15px rgba(28,23,15,0.18);
	}
	.dark {
		--bg: #0f0d09;
		--text: #f8f5f0;
		--text-light: #a89f8f;
		--accent: #f8f5f0;
		--glass-bg: rgba(15,13,9,0.88);
		--glass-border: rgba(248,245,240,0.12);
		--shadow: 0 20px 40px -15px rgba(0,0,0,0.45);
	}
	
	* { margin:0; padding:0; box-sizing:border-box; }
	
	html { font-size: 16px; scroll-behavior: smooth; }
	html.fs-small  { font-size: 14.72px; }
	html.fs-normal { font-size: 16px; }
	html.fs-large  { font-size: 17.92px; }
	
	body {
		font-family: 'Inter', system-ui, sans-serif;
		background: var(--bg);
		color: var(--text);
		min-height: 100vh;
		transition: background 0.8s cubic-bezier(0.23,1,0.32,1);
		padding-bottom: 0;
	}
	
	button:focus-visible,
	a:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	[tabindex]:focus-visible {
    	outline: none;
	}
	
	a { color: var(--text); text-decoration: none; }
	a:hover { text-decoration: underline; opacity: 0.7; }
	
	/* === THEME BUBBLE === */
	#theme-bubble {
		position: fixed;
		top: 20px;
		left: 20px;
		z-index: 1000;
		width: 56px; height: 56px;
		background: var(--glass-bg);
		backdrop-filter: blur(32px);
		border: 1px solid var(--glass-border);
		border-radius: 9999px;
		box-shadow: var(--shadow);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
		color: var(--accent); 
		appearance: none;		           
	}
	#theme-bubble:hover { transform: scale(1.08); }

	/* === LANG BUBBLE === */
	#lang-bubble {
		position: fixed;
		top: 20px;
		left: 88px;
		z-index: 1000;
		background: var(--glass-bg);
		backdrop-filter: blur(32px);
		border: 1px solid var(--glass-border);
		border-radius: 9999px;
		padding: 5px;
		box-shadow: var(--shadow);
		display: flex;
		gap: 3px;
	}
	
	.lang-btn {
		padding: 6px 11px;
		border: none;
		background: transparent;
		color: var(--text);
		cursor: pointer;
		border-radius: 9999px;
		font-weight: 700;
		font-size: 15px;
		transition: all 0.3s ease;
	}
	
	.lang-btn.active {
		background: var(--accent);
		color: var(--bg);
	}
	
	#lang-bubble:focus-within,
	.lang-btn:focus-visible {
		box-shadow: 0 0 0 3px rgba(28,23,15,0.3);
	}
	.dark #lang-bubble:focus-within,
	.dark .lang-btn:focus-visible {
		box-shadow: 0 0 0 3px rgba(248,245,240,0.4);
	}
	
	#font-bubble {
		position: fixed;
		top: 20px;
		right: 20px;
		z-index: 1000;
		background: var(--glass-bg);
		backdrop-filter: blur(32px);
		border: 1px solid var(--glass-border);
		border-radius: 9999px;
		padding: 5px;
		box-shadow: var(--shadow);
		display: flex;
		gap: 3px;
		appearance: none;		
	}
	.font-size-btn {
		padding: 6px 11px;
		border: none;
		background: transparent;
		color: var(--text);
		cursor: pointer;
		border-radius: 9999px;
		font-weight: 700;
		transition: all 0.3s ease;
		appearance: none;
	}
	.font-size-btn.active {
		background: var(--accent);
		color: var(--bg);
	}

	a:focus-visible {
	padding: 0.25rem 0.5rem;
	border-radius: 100rem;
	}

	a:focus-visible,
	#theme-bubble:focus-visible,
	.font-size-btn:focus-visible {
		box-shadow: 0 0 0 3px rgba(28,23,15,0.3);
	}
	.dark a:focus-visible,
	.dark #theme-bubble:focus-visible,
	.dark .font-size-btn:focus-visible {
		box-shadow: 0 0 0 3px rgba(248,245,240,0.4);
	}
	.font-size-btn[data-level="small"]  { font-size: 9px; }
	.font-size-btn[data-level="normal"] { font-size: 12px; }
	.font-size-btn[data-level="large"]  { font-size: 15px; }
	
	/* === SCROLL-SNAP === */
	main#slides {
		height: calc(var(--vh) * 100);
		overflow-y: scroll;
		scroll-snap-type: y mandatory;
		-webkit-overflow-scrolling: touch; 
	}
	
	section.slide {
		height: calc(var(--vh) * 100);
		min-height: calc(var(--vh) * 100);
		scroll-snap-align: start;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 110px 40px 200px;
		position: relative;
		overflow-y: auto;
	}
	.content {
		max-width: 960px;
		width: 100%;
		position: relative;
	}
	
	.satz-content {
		max-width: 790px;
	}
	
	.satz-content .nummer {
		position: absolute;
		left: -110px;
		top: -40px;
		font-size: clamp(8.5rem, 21vw, 14.5rem);
		font-weight: 900;
		line-height: 1;
		color: var(--text);
		opacity: 0.07;
		pointer-events: none;
	}
	.satz-content .titel {
		font-weight: 700;
		font-size: clamp(1.85rem, 4.8vw, 2.7rem);
		line-height: 1.15;
		padding-left: 120px;
		text-align: left;
	}
	.satz-content .text {
		font-weight: 500;
		font-size: clamp(1.15rem, 2.8vw, 1.32rem);
		line-height: 1.3;
		color: var(--text-light);
		padding-left: 120px;
		max-width: 680px;
		text-align: left;
		margin-top: 1.65rem;
	}
	
	h1, .abschluss {
		text-align: center;
	}
	h1 {
		font-weight: 900;
		font-size: clamp(3.6rem, 8.5vw, 7rem);
		letter-spacing: -0.07em;
		line-height: 1.02;
	}
	
	h2.second {
	margin-bottom: 2rem !important;
	text-align: center;
	}
	
	/* Symbol-Klasse */
	.symbol {
		width: clamp(172px, 26vw, 240px);
		height: clamp(172px, 26vw, 240px);
		margin: 0 auto 40px;
		border: 8px solid var(--accent);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		background: var(--bg);
		font-size: clamp(5.2rem, 14vw, 7.8rem);
		font-weight: 900;
		line-height: 1;
		color: var(--accent);
	}
	.symbol img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.symbol.start {
		border: 8px solid var(--bg);        
	}        
	.symbol.start svg {
		width: clamp(172px, 26vw, 240px);
		height: clamp(172px, 26vw, 240px);
	}
	.symbol.start svg path {
		fill: var(--accent);
		transition: fill 0.6s ease;
	}
	
   /* SPHERE SECTION */
	.sphere-section {
		margin-top: 40px;
		text-align: center;
	}
	.sphere-section h2 {
		font-size: 1.65rem;
		font-weight: 700;
		margin: 0 0 8px 0!important;
		color: var(--text-light);
		letter-spacing: -0.02em;
	}
	.sphere-section h3 {
		font-size: 1rem;
		font-weight: 500;
		margin: 0 0 1rem !important;
		color: var(--text-light);
	}

	#sphere-container {
		position: relative;
		width: 100%;
		max-width: 460px;
		height: 460px;
		margin: 0 auto;
		perspective: 1400px;
	}
	#container {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#sphere {
		position: relative;
		width: 320px;
		height: 320px;
		transform-style: preserve-3d;
	}
	.word {
		position: absolute;
		left: 50%; top: 50%;
		white-space: nowrap;
		transform: translate(-50%, -50%);
		font-size: clamp(0.95rem, 2.8vw, 1.35rem);
		font-weight: 600;
		color: var(--text);
		opacity: 0.85;
		transition: all 0.6s cubic-bezier(0.23,1,0.32,1);
		text-shadow: 0 1px 3px rgba(0,0,0,0.1);
		pointer-events: none;
		user-select: none;
	}
	.dark .word { color: var(--text); text-shadow: 0 1px 3px rgba(255,255,255,0.15); }
	.word.highlight {
		position: fixed !important;
		left: 50% !important; top: 50% !important;
		transform: translate(-50%, -50%) !important;
		font-size: clamp(2.8rem, 9vw, 6rem) !important;
		width: 92vw;
		max-width: 980px;
		text-align: center;
		z-index: 100;
		opacity: 1 !important;
		color: var(--accent) !important;
		font-weight: 900;
		letter-spacing: -0.025em;
		line-height: 1.05;

		/* FARBLICH UMGEKEHRT + DECKEND – basierend auf --bg */
		text-shadow:
			0 0 18px var(--bg),
			0 8px 32px var(--bg),
			0 0 55px var(--bg),
			0 0 95px var(--bg);
		pointer-events: auto;
	}

	/* ACCESSIBILITY FALLBACK */
	.skills-sr-only {
		position: absolute;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0,0,0,0);
		white-space: nowrap; border: 0;
	}
	
	/* Scroll Bereich */
	.scroll {
		max-height:280px;
		overflow-y: auto;
		padding-right: 16px;
		scrollbar-width: thin;
	}
	.scroll h3 {
		font-size: 1.32rem;
		font-weight: 700;
		margin: 42px 0 16px 0;
		color: var(--text);
		letter-spacing: -0.02em;
	}
	
	.scroll p {
		margin-bottom: 22px;
		line-height: 1.72;
	}
	
	.scroll ul {
		margin: 20px 0 32px 0;
		padding-left: 28px;
	}
	
	.scroll li {
		margin-bottom: 12px;
		line-height: 1.68;
	}
	
	.scroll::-webkit-scrollbar {
		width: 7px;
	}
	.scroll::-webkit-scrollbar-thumb {
		background: var(--text-light);
		border-radius: 9999px;
	}
	
	/* BOTTOM NAV & FOOTER */
	nav.bottom-nav {
		position: fixed;
		bottom: 32px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1000;
		display: flex;
		gap: 8px;
		padding: 14px 22px;
		background: var(--glass-bg);
		backdrop-filter: blur(32px);
		border: 1px solid var(--glass-border);
		border-radius: 9999px;
		box-shadow: var(--shadow);
	}
	.nav-item {
		width: 56px; height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		color: var(--text);
		transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
		cursor: pointer;
		outline: none;
		border: none;
		background: none;
		appearance: none;
	}
	.nav-item:hover { transform: scale(1.08); }
	.nav-item.active {
		background: var(--accent);
		color: var(--bg);
		transform: scale(1.15);
	}
	.nav-item:focus-visible {
		box-shadow: 0 0 0 4px rgba(28,23,15,0.4);
		transform: scale(1.18);
	}
	.dark .nav-item:focus-visible {
		box-shadow: 0 0 0 4px rgba(248,245,240,0.5);
	}
	.nav-item svg { width: 28px; height: 28px; }

	#global-footer {
		position: fixed;
		bottom: 8px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 0.65rem;
		color: var(--text-light);
		opacity: 0.7;
		white-space: nowrap;
		z-index: 999;
		pointer-events: none;
	}
	
	@media (max-width: 1023px) {
		#theme-bubble, #font-bubble { top: 16px; }
		#theme-bubble { left: 16px; }
		#font-bubble { right: 16px; }
		.symbol {
		width: clamp(120px, 12vw, 160px);
		height: clamp(120px, 12vw, 160px);
		margin: 0 auto 20px;
		border: 8px solid var(--accent);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		background: var(--bg);
		font-size: clamp(3.2rem, 7vw, 5.8rem);
		font-weight: 900;
		line-height: 1;
		color: var(--accent);
	}
		h1 {
		font-size: 3rem;
		padding-bottom: 0.5rem;
		}
		h2.second {
		text-align: center;
		font-size: 1.65rem;
		padding-bottom: 1.5rem;
		}
		
		nav.bottom-nav { bottom: 32px; padding: 12px 16px; }
		.nav-item { width: 40px; height: 40px; }
		.nav-item svg { width: 24px; height: 24px; }
		.satz-content .nummer { left: 50%; top: -78px; transform: translateX(-50%); font-size: 4.8rem; opacity: 0.09; }
		.satz-content .titel, .satz-content .text { padding-left: 0; text-align: center; }
		
		#sphere-container {
			max-width: 260px !important;
			height: 220px !important;
			margin: 40px auto 80px !important;
		}
		
		#sphere {
			width: 200px !important;
			height: 200px !important;
		}
		main#slides,
		section.slide {
			height: calc(var(--vh) * 100) !important;
			min-height: calc(var(--vh) * 100) !important;
			padding-bottom: 80px !important; /* etwas mehr Luft für Home-Indicator */
		}
	}