:root {
	--philo-title: linear-gradient(
	140deg, #b87d00 0%, #ffbf00 30%, #edcf2c 50%, #f5c630 62%, #ffb300 82%, #c58a00 100%);
	--philo-subtitle: black;
	--philo-title-glow: rgba(255, 255, 255, 0.4);
	
	--philo-title-before: linear-gradient(140deg, #471e89, #693dae 30%, #471e89 60%, #471e89 90%);
	
	--philo-text-color: #2a2a2a;
	
	--philo-search-color: #333;
	--philo-search-background: rgba(33, 150, 243, 0.2);
	
	--highlight-color: #734ffb;
	--entries-link-color: #008ada;
	--entries-link-color-hover: #008ada;
	
	--entry-link-color: #00000;
	--entry-link-color-hover: #66cfff;
	--entry-link-shadow-color-hover: 0 0 8px rgba(102,207,255,0.4);
	--entry-link-dezent: #9f75fd;
}

[data-theme="dark"] {
	--philo-title: linear-gradient(
	140deg, #b87d00 0%, #ffbf00 30%, #fff4b8 50%, #ffd54f 62%, #ffb300 82%, #c58a00 100%);
	--philo-subtitle: #e7eb35;
	--philo-title-glow: rgba(38, 117, 137, 0.4);
	
	--philo-text-color: #e7e7dc;
	
	--philo-search-color: white;
	--philo-search-background: rgba(252, 252, 252, 0.2);
	
	--highlight-color: #e0d2ff;
	--entries-link-color: #96a3fe;
	--entries-link-color-hover: #e3e6fa;
	
	--entry-link-color: #eaeaf0;
	--entry-link-color-hover: #ffffff;
	--entry-link-shadow-color-hover: 0 0 8px rgba(0,255,200,0.4);
	--entry-link-dezent: linear-gradient(140deg, #9eddf9, #b5d2df);
}

main {
	position: relative;
}

/* ======= NEU ========== */

/* Hintergrund */

[data-theme="dark"] {
	
.galaxy-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: radial-gradient(circle at center, #0c1439 0%, #020308 60%, #000000 100%);
}

/* Nebel */
.nebula {
	position: absolute;
	width: 30rem;
	height: 30rem;
	border-radius: 50%;
	filter: blur(120px);
	mix-blend-mode: screen;
	opacity: 0.35;
	animation: nebulaAppear 6s ease;
}

@keyframes nebulaAppear {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0.35;
	}
}

.nebula-1 {
	background: rgba(58, 96, 167, 0.6);
	top: -10%;
	left: -5%;
}

.nebula-2 {
	background: rgba(255, 80, 200, 0.35);
	bottom: -15%;
	right: -10%;
}

.nebula-3 {
	background: rgba(231, 226, 0, 0.28);
	top: 40%;
	left: 35%;
}

/* Kleine Sterne */
.stars,
.gold-stars {
	position: absolute;
	inset: 0;
}

.stars::before,
.gold-stars::before {
	content: "";
	position: absolute;
	inset: 0;
}

/* Standard-Sterne */
.stars::before {
	background-image:
		radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8), transparent),
		radial-gradient(1.5px 1.5px at 70% 40%, rgba(255,255,255,0.7), transparent),
		radial-gradient(2px 2px at 50% 80%, rgba(180,200,255,0.8), transparent),
		radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.5), transparent);
	background-size: 100% 100%;
	opacity: 0.8;
}

/* Goldene Highlights 
.gold-stars::before {
	background-image:
		radial-gradient(circle at 12% 13%, #ffd86b 0%, rgba(255,216,107,0.1) 5%, transparent 60%),
		radial-gradient(circle at 80% 35%, #ffefb0 0%, rgba(255,220,120,0.1) 7%, transparent 60%),
		radial-gradient(circle at 78% 70%, #ffe28c 0%, rgba(255,210,100,0.08) 10%, transparent 60%);  
	filter: blur(0.5px);
	opacity: 0;
	transition: transform 0.3s ease;
	animation: twinkle 4s ease-in-out infinite alternate;
	animation-delay: 3s;
}


@keyframes twinkle {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0.35;
		transform: scale(1);
	}
	100% {
		opacity: 0.7;
		transform: scale(1.04);
	}
} */

}

/* === ROOT === */
.philo-root {
    position: relative;
	padding: 0 clamp(1.5rem, 4vw, 2rem);
    font-family: sans-serif;
	color: var(--philo-text-color);
}

/* === TITLE === */

.philo-title-wrapper {
	position: relative;
}

[data-theme="dark"] {

.philo-title-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.4;
	background-image: url('../sources/assets/source-a/Nebelschleier_Philo.png');
	background-position: center;
	background-size: cover;
	animation: titleBackground 3s ease;
	
	-webkit-mask-image:
    linear-gradient(to right, transparent 0px, black 50px, black calc(100% - 50px), transparent 100%),
    linear-gradient(to bottom, transparent 0px, black 50px, black calc(100% - 50px), transparent 100%);

	mask-image:
    linear-gradient(to right, transparent 0px, black 50px, black calc(100% - 50px), transparent 100%),
    linear-gradient(to bottom, transparent 0px, black 50px, black calc(100% - 50px), transparent 100%);

	mask-composite: intersect;
	-webkit-mask-composite: source-in;
}
}

@keyframes titleBackground {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0.4;
	}
}


.philo-text-wrapper {
    padding: 2rem;
    position: relative;
	justify-self: center;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
    z-index: 2;
	text-align: center;
}

.philo-text-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--philo-title-glow);
	filter: blur(50px);
	animation: dechiffreDelay 2s ease;
}

@keyframes dechiffreDelay {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@font-face {
    font-family: 'Sansation';
    src: url('../lib/fonts/Sansation/Sansation-Bold.woff2') format('woff2'),
        url('../lib/fonts/Sansation/Sansation-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.philo-title {
	position: relative;
	font-family: "Sansation";
    font-size: clamp(calc(2.75rem + var(--font-size-larger)), 8vw, calc(4rem + var(--font-size-larger)));
    font-weight: 500;
	background: var(--philo-title);
	-webkit-background-clip: text; 
	background-clip: text; 
	-webkit-text-fill-color: transparent;
    letter-spacing: 0.01em;
	text-shadow: 0 0 14px rgb(255 200 0 / 31%);
	margin: 0;
	animation: dechiffre 2s ease;
}

@keyframes dechiffre {
	0% {
		filter: blur(15px);
		transform: scale(0.75) translateY(-25%);
	}
	75% {
		filter: blur(0);
	}
	100% {
		filter: blur(0);
		transform: scale(1) translateY(0);
	}
}

@font-face {
    font-family: 'Saira Stencil';
    src: url('../lib/fonts/Saira Stencil/SairaStencil-Thin.woff2') format('woff2'),
        url('../lib/fonts/Saira Stencil/SairaStencil-Thin.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.philo-sub {
	font-family: 'Saira Stencil';
    margin: 0;
	font-weight: 800;
	color: var(--philo-subtitle);
	text-shadow: 6px 1px 5px #111111;
	z-index: 3;
	font-size: clamp(calc(0.9rem + var(--font-size-larger)), 2vw, calc(1.15rem + var(--font-size-larger)));
	animation: dechiffre2 3s ease;
}

@keyframes dechiffre2 {
	0% {
		filter: blur(15px);
		transform: scale(0.9) translateY(-15%);
		opacity: 0;
	}
	50% {
		filter: blur(15px);
		transform: scale(0.9) translateY(-40px);
		opacity: 0;
	}
	75% {
		filter: blur(0);
	}
	100% {
		filter: blur(0);
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

/* == STATUS SEARCH == */

.detail-container {
	display: flex;
	gap: 1rem;
	padding: 0 clamp(1.5rem, 4vw, 2rem);
	margin-top: 1rem;
	align-items: center;
}

/* SEARCH */

.search-container {
    position: relative;
	justify-self: left;
}

.search-container input[type="text"] {
	font-family: 'Inter', 'Arial', sans-serif;
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem; /* rechts Platz für Icon */
    font-size: 1rem;
	color: var(--philo-search-color);
	font-weight: 500;
	width: 100%;
    box-sizing: border-box;
	background: var(--philo-search-background);
	border: none;
	border-radius: 16px;
	resize: vertical; /* erlaubt Höhe verändern */
	transition: all 0.3s ease;
}
  
.search-container input:focus {
	outline: 1px solid;
	border: none;
}
  
.search-container input::placeholder {
	color: var(--philo-search-color);
	opacity: 0.5;
}

.search-container button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.search-container button svg {
    width: 20px;
    height: 20px;
    fill: #444;
}
  
.search-container button:hover svg {
	animation: smoothCircleBottomSmall 0.8s ease;
}

/* == BLOCKS == */
.philo-block {
    position: relative;
    z-index: 2;
}

.philo-block h2 {
	font-size: clamp(calc(1.75rem + var(--font-size-larger)), 6.5vw, calc(2.3rem + var(--font-size-larger)));
	margin-top: 1.6rem;
	margin-bottom: 0.8rem;
	border-left: 3px solid #9f75fd;
	padding-left: 0.85rem;
	border-radius: 5px;
}

.philo-block h3 {
	font-size: clamp(calc(1rem + var(--font-size-larger)), 6.5vw, calc(1.75rem + var(--font-size-larger)));
	margin: 0;
	border-left: 3px solid #9f75fd;
	padding-left: 0.85rem;
	border-radius: 5px;
}

/* subtile Linien (Detail!)
.philo-block::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #00d4ff, transparent);
    opacity: 0.2;
}*/

/* TEXT VARIATIONEN */
.philo-focus {
    font-size: clamp(calc(1rem + var(--font-size-larger)), 3.5vw, calc(1.1rem + var(--font-size-larger)));
	padding-left: 0.75rem;
	font-weight: 100;
    color: var(--color-invert);
	text-shadow: 0 0 8px rgba(0,255,200,0.4)
}

.philo-soft {
    opacity: 0.85;
	background: linear-gradient(90deg, #ff3e3e, #0ae90a);
	-webkit-background-clip: text; 
	background-clip: text; 
	-webkit-text-fill-color: transparent;
}

.philo-highlight {
    color: var(--highlight-color);
    position: relative;
}

/* glow detail */
.philo-highlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(140, 79, 235, 0.07);
    filter: blur(10px);
    z-index: -1;
}

/* CONCEPT BLOCK */

.philo-concept {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.philo-concept h2 {
	margin: 0;
}

/* LINKS */
.philo-links {
    display: flex;
	flex-wrap: wrap;
    gap: 0.75rem;
}

.philo-links a {
    margin-right: 20px;
    text-decoration: none;
    color: #66cfff;
    position: relative;
}

.philo-links a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 1px;
    background: #66cfff;
    transition: 0.3s;
}

.philo-links a:hover::after {
    width: 100%;
}

/* ENTRIES */
.philo-entries {
    padding: 1rem clamp(1rem, 4vw, 3rem);
	padding-bottom: 2rem;
}

.philo-entries h2 {
	margin: 0;
	margin-bottom: 1rem;
	color: #9f75fd;
	font-size: calc(1.7rem + var(--font-size-larger));
}

.philo-entries svg {
	fill: #9f75fd;
}

.philo-entry-link {
    display: block;
    text-decoration: none;
    color: var(--entry-link-color);
    padding: 0.5rem 0;
    position: relative;
    transition: 0.3s;
}

/* lebhafter Hover */
.philo-entry-link::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 49%;
    width: 2px;
    height: 15px;
    background: var(--entry-link-dezent);
    border-radius: 75%;
    transform: translateY(-50%) scale(0);
    transition: 0.25s;
	will-change: transform;
}

.philo-entry-link:hover {
    transform: translateX(12px);
    color: var(--entry-link-color-hover);
}

.philo-entry-link:hover::before {
    transform: translateY(-50%) scale(1);
}

/* ✨ kleine Interaktions-Immersion */
.philo-entry-link:hover {
    text-shadow: var(--entry-link-shadow-color-hover);
}