/* 1. FONTS (Lokal eingebunden) */
@font-face {
  font-display: swap;
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/nunito-sans-v19-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/nunito-sans-v19-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/nunito-sans-v19-latin-600.woff2') format('woff2');
}

/* 2. VARIABLEN & RESET */
:root {
	--primary: #00175A;    /* Seriöses Elektro-Blau */
	--accent: #FCEA23;     /* Photovoltaik/Energie-Gelb */
	--text: #2c3e50;
	--light-bg: #eaeaea;
	--white: #ffffff;
	--max-width: 1000px;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	hyphens: auto;
}

body {
	font-family: 'Nunito Sans', sans-serif;
	color: var(--text);
	line-height: 1.6;
	background-color: var(--white);
	-webkit-font-smoothing: antialiased;
}

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
	gap: 20px;
}

/* 3. HEADER */
header {
	padding: 30px 0;
	border-bottom: 1px solid #eee;
	background-color: var(--accent);
}

header .container{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

header h1 {
	font-weight: 600;
	/* font-size: 1.4rem; */
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2;
}

/* 4. HERO SECTION */
.hero {
	padding: 80px 0;
	background: linear-gradient(135deg, #fdfdfd 0%, #eef2f7 100%);
	text-align: left;
}

.hero h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.2;
	margin-bottom: 10px;
	font-weight: 600;
	color: var(--primary);
}

.hero h2 {
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--accent);
	margin-bottom: 30px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.hero p {
	max-width: 700px;
	font-size: 1.1rem;
	margin-bottom: 40px;
	color: #555;
}

.hero a {
	display: inline-block;
	background: var(--primary);
	color: var(--white);
	padding: 15px 35px;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 600;
	transition: transform 0.2s, background 0.2s;
}

.hero a:hover {
	background: #003570;
	transform: translateY(-2px);
}

/* 5. CONTACT SECTION (Grid) */
.contact {
	padding: 80px 0;
}

.contact h2 {
	margin-bottom: 40px;
	font-size: 1.8rem;
	border-bottom: 2px solid var(--accent);
	display: inline-block;
}

.contact .container > div:not(h2) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
}

/* Container für die Abstände */
.instagram-wrapper {
	margin-top: 25px;
	padding: 15px 0;
	border-bottom: 2px solid var(--accent); /* Trennung von den Öffnungszeiten */
}

/* Der Link als "Button-Light" */
.social-link.instagram {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--text);
	font-weight: 600;
	font-size: 0.95rem;
	transition: color 0.3s ease;
	span{
		font-size: 1.4rem;
	}
}

/* Das eigentliche Icon groß und farbig */
.social-link.instagram i {
	font-size: 1.8rem; /* Größer, damit es wirkt */
	margin-right: 12px;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; /* Instagram Gradient im Icon */
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-link.instagram:hover {
	color: var(--primary);
}

.social-link.instagram:hover i {
	transform: scale(1.2) rotate(-5deg);
}

/* Anpassung der Kind-Elemente im Kontaktbereich */
.contact > .container {
	display: flex;
	flex-direction: column;
}

.contact div h3 {
	font-size: 0.9rem;
	color: #888;
	margin-bottom: 15px;
	letter-spacing: 1px;
}

.contact a {
	color: var(--primary);
	text-decoration: none;
}

.contact a:hover {
	text-decoration: underline;
}

/* 6. IMPRESSUM */
.imprint {
	padding: 60px 0;
	background-color: var(--light-bg);
	font-size: 0.9rem;
	color: #666;
}

.imprint h2 { margin-bottom: 30px; color: var(--text); }
.imprint h3 { 
	margin: 25px 0 10px 0; 
	font-size: 0.85rem; 
	color: var(--text);
}

/* 7. FOOTER */
footer {
	padding: 40px 0;
	background: var(--text);
	color: var(--white);
	text-align: center;
	font-size: 0.85rem;
}

/* BROWSER-SPECIFIC HACKS & RESPONSIVE */

/* Safari Flex-Gap-Fix (falls benötigt) */
@media (max-width: 600px) {
	.hero { padding: 40px 0; }
	.contact .container > div { gap: 30px; }
}

/* Verbessertes Rendering für Webkit */
header, h1, h2, h3 {
	text-rendering: optimizeLegibility;
}