/*
Theme Name: Lichtnetz Child
Theme URI: https://elementor.com/hello-theme/
Template: hello-elementor
Author: Lichtnetz Stiftung
Description: Child Theme für die Lichtnetz Treuhandstiftung
Version: 1.0.0
*/


/* =========================================================
   LICHTNETZ – GLOBALE FARBEN
   ========================================================= */

:root {
	--ln-navy: #12243f;
	--ln-text: #243044;

	--ln-gold: #bd7c19;
	--ln-gold-light: #d0952c;
	--ln-gold-dark: #9a6211;

	--ln-olive: #68764c;

	--ln-white: #ffffff;

	--ln-border:
		rgba(18, 36, 63, 0.09);
}


/* =========================================================
   GLOBALE BASIS
   ========================================================= */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;

	background: #ffffff;

	color: var(--ln-text);

	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}


/* =========================================================
   LICHTNETZ HEADER
   ========================================================= */

.ln-header {
	position: relative;

	z-index: 1000;

	width: 100%;

	background: #ffffff;

	border-bottom:
		1px solid var(--ln-border);

	font-family:
		Arial,
		Helvetica,
		sans-serif;
}


/* =========================================================
   HEADER – INNERER CONTAINER
   ========================================================= */

.ln-header-inner {
	width:
		min(
			1440px,
			calc(100% - 80px)
		);

	min-height: 96px;

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		auto
		1fr
		auto;

	align-items: center;

	gap: 45px;
}


/* =========================================================
   LOGO / MARKE
   ========================================================= */

.ln-brand {
	display: inline-flex;

	align-items: center;

	gap: 15px;

	color: var(--ln-navy);

	text-decoration: none;

	white-space: nowrap;
}

.ln-brand:hover,
.ln-brand:focus {
	color: var(--ln-navy);
}


.ln-brand-mark {
	display: block;

	width: 49px;

	flex:
		0 0 49px;

	color:
		var(--ln-gold);

	transition:
		transform 0.4s ease,
		color 0.4s ease,
		filter 0.4s ease;

	transform-origin: center;
}


.ln-brand-mark svg {
	display: block;

	width: 100%;

	height: auto;

	transition:
		transform 0.4s ease;

	transform-origin: center;
}


.ln-brand-mark svg path {
	transition:
		opacity 0.4s ease,
		stroke-width 0.4s ease;
}


.ln-brand-mark svg circle {
	transform-box: fill-box;

	transform-origin: center;

	transition:
		transform 0.4s ease,
		opacity 0.4s ease;
}


/* =========================================================
   LOGO HOVER
   ========================================================= */

.ln-brand:hover .ln-brand-mark,
.ln-brand:focus-visible .ln-brand-mark {
	color:
		var(--ln-gold-light);

	transform:
		translateY(-3px)
		scale(1.10);

	filter:
		drop-shadow(
			0 6px 10px
			rgba(189, 124, 25, 0.28)
		);
}


.ln-brand:hover .ln-brand-mark svg,
.ln-brand:focus-visible .ln-brand-mark svg {
	transform:
		rotate(3deg);
}


.ln-brand:hover .ln-brand-mark svg path,
.ln-brand:focus-visible .ln-brand-mark svg path {
	opacity: 0.9;

	stroke-width: 1.7;
}


.ln-brand:hover .ln-brand-mark svg circle,
.ln-brand:focus-visible .ln-brand-mark svg circle {
	transform:
		scale(1.28);
}


/* =========================================================
   LOGOTEXT
   ========================================================= */

.ln-brand-copy {
	display: flex;

	flex-direction: column;

	justify-content: center;

	line-height: 1;
}


.ln-brand-title {
	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: 26px;

	font-weight: 400;

	line-height: 1.08;

	letter-spacing: -0.4px;

	color:
		var(--ln-navy);
}


.ln-brand-subtitle {
	margin-top: 5px;

	font-size: 12px;

	font-weight: 400;

	line-height: 1.25;

	color: #657083;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.ln-main-nav {
	display: flex;

	justify-content: center;

	align-items: center;
}


.ln-main-menu {
	display: flex;

	align-items: center;

	justify-content: center;

	gap: 34px;

	margin: 0;

	padding: 0;

	list-style: none;
}


.ln-main-menu li {
	position: relative;

	margin: 0;

	padding: 0;

	list-style: none;
}


.ln-main-menu a {
	position: relative;

	display: block;

	padding:
		36px 0 31px;

	font-size: 15px;

	font-weight: 400;

	line-height: 1;

	color: #273750;

	text-decoration: none;

	transition:
		color 0.2s ease;
}


.ln-main-menu a:hover,
.ln-main-menu a:focus {
	color:
		var(--ln-gold-dark);
}


/* =========================================================
   AKTIVER MENÜPUNKT
   ========================================================= */

.ln-main-menu
.current-menu-item > a::after,

.ln-main-menu
.current_page_item > a::after {
	content: "";

	position: absolute;

	left: 0;

	right: 0;

	bottom: 23px;

	height: 2px;

	background:
		var(--ln-gold);
}


/* =========================================================
   CTA – GEMEINSAM WIRKEN
   ========================================================= */

.ln-header-cta {
	min-width: 206px;

	height: 50px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 10px;

	padding:
		0 25px;

	border-radius:
		999px;

	background:
		linear-gradient(
			135deg,
			#bc841e 0%,
			#a96f12 100%
		);

	color: #ffffff;

	text-decoration: none;

	font-size: 14px;

	font-weight: 500;

	line-height: 1;

	box-shadow:
		0 8px 22px
		rgba(153, 101, 19, 0.16);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		filter 0.2s ease;
}


.ln-header-cta:hover,
.ln-header-cta:focus {
	color: #ffffff;

	transform:
		translateY(-1px);

	box-shadow:
		0 10px 27px
		rgba(153, 101, 19, 0.23);

	filter:
		brightness(1.04);
}


/* =========================================================
   HERZ ICON
   ========================================================= */

.ln-heart {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 18px;

	height: 18px;
}


.ln-heart svg {
	display: block;

	width: 100%;

	height: 100%;
}


/* =========================================================
   BURGER BUTTON
   ========================================================= */

.ln-menu-toggle {
	display: none;

	width: 46px;

	height: 46px;

	padding: 10px;

	border: 0;

	border-radius: 50%;

	background:
		transparent;

	cursor: pointer;
}


.ln-menu-toggle span {
	display: block;

	width: 24px;

	height: 1.5px;

	margin:
		5px auto;

	background:
		var(--ln-navy);

	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.ln-mobile-navigation {
	display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1180px) {

	.ln-header-inner {
		width:
			min(
				calc(100% - 48px),
				1200px
			);

		gap: 25px;
	}


	.ln-main-menu {
		gap: 21px;
	}


	.ln-main-menu a {
		font-size: 14px;
	}


	.ln-header-cta {
		min-width: 180px;

		padding-inline: 20px;
	}


	.ln-brand-title {
		font-size: 23px;
	}

}


/* =========================================================
   MOBILE / SMALL TABLET
   ========================================================= */

@media (max-width: 950px) {

	.ln-header-inner {
		width:
			calc(100% - 36px);

		min-height: 78px;

		display: flex;

		justify-content:
			space-between;

		gap: 20px;
	}


	.ln-main-nav,
	.ln-header-cta {
		display: none;
	}


	.ln-menu-toggle {
		display: block;

		flex:
			0 0 auto;
	}


	.ln-brand {
		gap: 11px;
	}


	.ln-brand-mark {
		width: 41px;

		flex-basis: 41px;
	}


	.ln-brand-title {
		font-size: 21px;
	}


	.ln-brand-subtitle {
		font-size: 10.5px;
	}


	/* Burger wird zu X */

	body.ln-menu-open
	.ln-menu-toggle
	span:nth-child(1) {
		transform:
			translateY(6.5px)
			rotate(45deg);
	}


	body.ln-menu-open
	.ln-menu-toggle
	span:nth-child(2) {
		opacity: 0;
	}


	body.ln-menu-open
	.ln-menu-toggle
	span:nth-child(3) {
		transform:
			translateY(-6.5px)
			rotate(-45deg);
	}


	/* Mobile Navigation */

	.ln-mobile-navigation {
		position: absolute;

		top: 100%;

		left: 0;

		right: 0;

		display: block;

		max-height: 0;

		overflow: hidden;

		padding:
			0 24px;

		background:
			rgba(
				255,
				255,
				255,
				0.99
			);

		border-top:
			1px solid
			var(--ln-border);

		opacity: 0;

		visibility: hidden;

		box-shadow:
			0 20px 35px
			rgba(20, 31, 47, 0.08);

		transition:
			max-height 0.35s ease,
			opacity 0.25s ease,
			visibility 0.25s ease,
			padding 0.35s ease;
	}


	body.ln-menu-open
	.ln-mobile-navigation {
		max-height: 650px;

		padding-top: 18px;

		padding-bottom: 28px;

		opacity: 1;

		visibility: visible;
	}


	.ln-mobile-menu {
		margin: 0;

		padding: 0;

		list-style: none;
	}


	.ln-mobile-menu li {
		margin: 0;

		padding: 0;

		border-bottom:
			1px solid
			rgba(18, 36, 63, 0.08);
	}


	.ln-mobile-menu a {
		display: block;

		padding:
			17px 2px;

		font-size: 16px;

		font-weight: 400;

		color:
			var(--ln-navy);

		text-decoration: none;
	}


	.ln-mobile-menu
	.current-menu-item > a,

	.ln-mobile-menu
	.current_page_item > a {
		color:
			var(--ln-gold-dark);
	}


	.ln-mobile-cta {
		width: 100%;

		min-height: 51px;

		margin-top: 22px;

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 9px;

		border-radius: 999px;

		background:
			linear-gradient(
				135deg,
				#bc841e 0%,
				#a96f12 100%
			);

		color: #ffffff;

		text-decoration: none;

		font-size: 15px;

		font-weight: 500;
	}

}


/* =========================================================
   KLEINE HANDYS
   ========================================================= */

@media (max-width: 480px) {

	.ln-header-inner {
		width:
			calc(100% - 28px);

		min-height: 72px;
	}


	.ln-brand-mark {
		width: 36px;

		flex-basis: 36px;
	}


	.ln-brand-title {
		font-size: 18px;
	}


	.ln-brand-subtitle {
		margin-top: 4px;

		font-size: 9px;
	}


	.ln-menu-toggle {
		width: 42px;

		height: 42px;
	}

}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}


	.ln-brand-mark,
	.ln-brand-mark svg,
	.ln-brand-mark svg path,
	.ln-brand-mark svg circle,
	.ln-header-cta,
	.ln-menu-toggle span,
	.ln-mobile-navigation {
		transition: none;
	}


	.ln-brand:hover .ln-brand-mark,
	.ln-brand:focus-visible .ln-brand-mark {
		transform: none;

		filter: none;
	}


	.ln-brand:hover .ln-brand-mark svg,
	.ln-brand:focus-visible .ln-brand-mark svg {
		transform: none;
	}

}
/* =========================================================
   LICHTNETZ STIFTUNG – GLOBALER FOOTER
   ========================================================= */

.ln-footer {
	width: 100%;
	background: #ffffff;

	border-top: 1px solid rgba(18, 36, 63, 0.08);

	font-family: Arial, Helvetica, sans-serif;
	color: var(--ln-navy);
}


/* =========================================================
   FOOTER – OBERE ZEILE
   ========================================================= */

.ln-footer-main {
	width: 100%;
}

.ln-footer-inner {
	width: min(1440px, calc(100% - 80px));
	min-height: 118px;

	margin: 0 auto;

	display: flex;
	align-items: center;

	gap: 30px;
}


/* =========================================================
   FOOTER – LOGO
   ========================================================= */

.ln-footer-brand {
	display: inline-flex;
	align-items: center;

	gap: 14px;

	flex: 0 0 auto;

	color: var(--ln-navy);
	text-decoration: none;
}

.ln-footer-brand:hover,
.ln-footer-brand:focus {
	color: var(--ln-navy);
}

.ln-footer-mark {
	display: block;

	width: 48px;
	flex: 0 0 48px;

	color: var(--ln-gold);

	transform-origin: center;

	transition:
		transform 0.3s ease,
		filter 0.3s ease;
}

.ln-footer-brand:hover .ln-footer-mark,
.ln-footer-brand:focus-visible .ln-footer-mark {
	transform: scale(1.06);

	filter:
		drop-shadow(
			0 4px 8px rgba(189, 124, 25, 0.15)
		);
}

.ln-footer-mark svg {
	display: block;

	width: 100%;
	height: auto;
}

.ln-footer-brand-copy {
	display: flex;
	flex-direction: column;

	line-height: 1;
}

.ln-footer-brand-title {
	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: 24px;
	font-weight: 400;
	line-height: 1.05;

	letter-spacing: -0.35px;

	color: var(--ln-navy);
}

.ln-footer-brand-subtitle {
	margin-top: 5px;

	font-size: 11px;
	line-height: 1.3;

	color: #657083;
}


/* =========================================================
   FOOTER – GOLDENE TRENNLINIEN
   ========================================================= */

.ln-footer-divider {
	display: block;

	width: 1px;
	height: 50px;

	flex: 0 0 1px;

	margin-inline: 7px;

	background:
		rgba(189, 124, 25, 0.50);
}


/* =========================================================
   FOOTER – HAUPTNAVIGATION
   ========================================================= */

.ln-footer-navigation {
	flex: 1 1 auto;
}

.ln-footer-menu,
.ln-footer-legal-menu {
	display: flex;
	align-items: center;

	gap: 27px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.ln-footer-menu li,
.ln-footer-legal-menu li {
	margin: 0;
	padding: 0;

	list-style: none;
}

.ln-footer-menu a,
.ln-footer-legal-menu a {
	position: relative;

	display: inline-block;

	padding: 11px 0;

	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;

	color: #39485f;

	text-decoration: none;

	transition:
		color 0.2s ease;
}

.ln-footer-menu a:hover,
.ln-footer-menu a:focus,
.ln-footer-legal-menu a:hover,
.ln-footer-legal-menu a:focus {
	color: var(--ln-gold-dark);
}


/* kleine goldene Linie beim Hover */

.ln-footer-menu a::after,
.ln-footer-legal-menu a::after {
	content: "";

	position: absolute;

	left: 0;
	bottom: 5px;

	width: 0;
	height: 1px;

	background: var(--ln-gold);

	transition: width 0.25s ease;
}

.ln-footer-menu a:hover::after,
.ln-footer-menu a:focus-visible::after,
.ln-footer-legal-menu a:hover::after,
.ln-footer-legal-menu a:focus-visible::after {
	width: 100%;
}

.ln-footer-legal {
	flex: 0 0 auto;
}


/* =========================================================
   FOOTER – UNTERE ZEILE
   ========================================================= */

.ln-footer-bottom {
	width: 100%;

	border-top:
		1px solid rgba(18, 36, 63, 0.045);
}

.ln-footer-bottom-inner {
	width: min(1440px, calc(100% - 80px));
	min-height: 94px;

	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 30px;
}

.ln-footer-copyright {
	margin: 0;

	font-size: 13px;
	line-height: 1.5;

	color: #657083;
}


/* =========================================================
   FOOTER – HANDSCHRIFTLICHER SLOGAN
   ========================================================= */

.ln-footer-slogan {
	display: flex;
	flex-direction: column;
	align-items: flex-end;

	font-family:
		"Segoe Print",
		"Bradley Hand",
		"Comic Sans MS",
		cursive;

	font-size: 21px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;

	color: #263331;

	transform: rotate(-4deg);
}

.ln-footer-slogan i {
	display: block;

	width: 112px;
	height: 2px;

	margin-top: 9px;

	background: var(--ln-gold);

	transform: rotate(-12deg);
}


/* =========================================================
   FOOTER – TABLET
   ========================================================= */

@media (max-width: 1150px) {

	.ln-footer-inner,
	.ln-footer-bottom-inner {
		width: calc(100% - 48px);
	}

	.ln-footer-inner {
		gap: 19px;
	}

	.ln-footer-menu,
	.ln-footer-legal-menu {
		gap: 17px;
	}

	.ln-footer-menu a,
	.ln-footer-legal-menu a {
		font-size: 13px;
	}

	.ln-footer-brand-title {
		font-size: 21px;
	}

	.ln-footer-mark {
		width: 43px;
		flex-basis: 43px;
	}
}


/* =========================================================
   FOOTER – MOBILE
   ========================================================= */

@media (max-width: 850px) {

	.ln-footer-inner {
		width: calc(100% - 36px);

		min-height: 0;

		padding-block: 38px;

		display: grid;
		grid-template-columns: 1fr;

		gap: 23px;
	}

	.ln-footer-divider {
		display: none;
	}

	.ln-footer-brand {
		justify-self: start;
	}

	.ln-footer-navigation,
	.ln-footer-legal {
		width: 100%;
	}

	.ln-footer-menu {
		display: grid;

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 6px 25px;
	}

	.ln-footer-legal-menu {
		gap: 28px;
	}

	.ln-footer-menu a,
	.ln-footer-legal-menu a {
		padding: 8px 0;

		font-size: 16px;
	}

	.ln-footer-bottom-inner {
		width: calc(100% - 36px);

		min-height: 0;

		padding-block: 28px 38px;

		flex-direction: column-reverse;
		align-items: flex-start;

		gap: 30px;
	}

	.ln-footer-slogan {
		align-items: flex-start;

		font-size: 20px;

		transform: rotate(-3deg);
	}

	.ln-footer-copyright {
		font-size: 13px;
	}
}


/* =========================================================
   FOOTER – KLEINE HANDYS
   ========================================================= */

@media (max-width: 480px) {

	.ln-footer-inner,
	.ln-footer-bottom-inner {
		width: calc(100% - 28px);
	}

	.ln-footer-mark {
		width: 41px;
		flex-basis: 41px;
	}

	.ln-footer-brand-title {
		font-size: 20px;
	}

	.ln-footer-brand-subtitle {
		font-size: 10px;
	}

	.ln-footer-menu {
		grid-template-columns: 1fr;
	}

	.ln-footer-legal-menu {
		flex-wrap: wrap;

		gap: 7px 25px;
	}

}


/* =========================================================
   FOOTER – REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.ln-footer-mark,
	.ln-footer-menu a::after,
	.ln-footer-legal-menu a::after {
		transition: none;
	}

	.ln-footer-brand:hover .ln-footer-mark,
	.ln-footer-brand:focus-visible .ln-footer-mark {
		transform: none;
		filter: none;
	}
}