:root {
	/* ===== Text ===== */
	--color-text-default: #FFFFFF;
	--color-text-dark: #2E2E2E;
	--color-text-muted: #6F6F6F;

	/* ===== Akzent ===== */
	--color-accent-primary: #B5523A;
	--color-accent-primary-hover: #9E4631;

	/* ===== Hintergründe ===== */
	--color-bg-main: #F4EFE9;
	--color-bg-section: #FFFFFF;
	--color-bg-dark: #2E2E2E;

	/* ===== Linien & Divider ===== */
	--color-border-light: #DDD6CF;
	--color-border-dark: #3F433F;

	/* ===== Status (optional, konsistent gehalten) ===== */
	--color-success: #5F8A6A;
	--color-warning: #C78A3A;
	--color-error: #9E3A2F;
  
  --nav-height: 60px;
}

* { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
	scroll-behavior: smooth; 
}

header {
	min-height: 60vh;
	background:
		linear-gradient(rgba(47, 50, 48,0.45), rgba(47, 50, 48,0.85)),
		url('img/background.png') center top / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: var(--nav-height);
}

body {
	font-family: 'Cinzel', serif;
	text-align: center;
	background: radial-gradient(
		circle at top,
		#6B3A2E 0%,   /* warmes Ziegelbraun (oben, Licht) */
		#4A4E4B 55%,  /* Schiefergrau (Mitte) */
		#2F3230 100%  /* dunkles Dachgrau (unten) */
		);
	color: var(--color-text-default);
}

footer { 
	padding:2rem; 
	background-color: var(--color-bg-dark);
	color: var(--color-text-default);
}

a { 
	color:var(--color-accent-primary); 
	text-decoration:none; 
}
a:hover { 
	color:var(--color-accent-primary-hover); 
}

.nav {
	position: fixed;
	top:0; 
	width:100%;
	height: var(--nav-height);
	display:flex; 
	justify-content: space-between; 
	align-items: center;
	padding: 1rem 2rem;
	background: var(--color-bg-dark);
	z-index:1000;
	border-bottom: 1px solid var(--color-accent-primary);
	font-weight: bold;
}
.nav ul { 
	list-style: none; 
	display: flex; 
	gap: 1.5rem; 
}

.btn { 
	color:var(--color-accent-primary); 
	text-decoration:none;
}
.btn:hover { 
	color:var(--color-accent-primary-hover); 
}

.responsive-img {
	max-width: 95%;   /* never wider than its container */
	width: auto;      /* prevents upscaling */
	height: auto;      /* maintain aspect ratio */
	display: block;    /* removes extra space under image */
	margin: 0 auto;    /* optional: center image horizontally */
	margin-top: 10px;
	cursor: pointer;
}

.hero h1 { 
	max-width: 80%;
	margin: 0 auto;
	font-size: 4.5rem; 
	color: var(--color-text-default);
	letter-spacing: 0.2em; 
}

.content { 
	padding:6rem 2rem; 
	max-width:1200px; 
	margin:auto; 
}

.panel {
	background: rgba(20,12,10,0.55);
	border-top: 1px solid var(--color-accent-primary);
	padding: 3.5rem;
	margin-bottom: 4rem;
	box-shadow:
		0 20px 40px rgba(0,0,0,0.45),
		inset 0 0 0 1px rgba(255,255,255,0.03);
	backdrop-filter: blur(3px);
}

.one-col {
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}

.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
}

.three-col {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:2rem;
}

.four-col {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	gap:2rem;
}

.features { 
	display:grid; 
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); 
	gap:2rem; 
}

.feature-card { 
	border:1px solid var(--color-accent-primary); 
	padding:2rem; 
}

.modal {
	position:fixed; inset:0; background:rgba(0,0,0,0.8);
	display:none; align-items:center; justify-content:center;
}
.modal.show { 
	display:flex; 
}
.modal-content {
	background:#2a0e0d; 
	padding:3rem; 
	border:1px solid var(--color-accent-primary);
	max-width: 80%;
	max-height: 80%;
}


/* Ensure dragon head stays visible */
@media (min-aspect-ratio: 16/9) {
  header { background-position: center 20%; }
}

@media (max-aspect-ratio: 4/5) {
  header { background-position: center 5%; }
}

@media(max-width:800px)
{ 
	.two-col { grid-template-columns:1fr; } 
	.three-col { grid-template-columns:1fr; } 
	.four-col { grid-template-columns:1fr; } 
} 

@media(max-width:400px)
{ 
	.hero h1 { font-size:3.5rem; }
}