@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: 'Sofia Pro Light Condensed';
	src: url('../fonts/sofiaprolicond/SofiaProLiCond-webfont.eot');
	src: url('../fonts/sofiaprolicond/SofiaProLiCond-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/sofiaprolicond/SofiaProLiCond-webfont.woff') format('woff'),
		url('../fonts/sofiaprolicond/SofiaProLiCond-webfont.ttf') format('truetype'),
		url('../fonts/sofiaprolicond/SofiaProLiCond-webfont.svg#SofiaProLightCondensed') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'adam';
	src: url('../fonts/adam/adam.otf') format('opentype');
}

:root {
	/* Hauptfarben für Überschriften */
	--green-primary: #758a64;
	--blue-accent: #618196;
	/* Textfarben */
	--text-main: #0a2328;
	--text-muted: #555555;
	/* Hintergrundfarben */
	--bg-light: #ece3d8;
	--bg-dark: #cec5ba;
	/* Block-Farben */
	--block-1: #234045;
	--block-2: #3d666a;
	--block-3: #4e8087;
	--block-4: #a0ada4;
	/* Schriftgrößen */
	--font-size-base: clamp(1.4rem, 1.8vw, 1.5rem);
	--font-size-small: clamp(1.2rem, 1.5vw, 1.4rem);
	--font-size-xsmall: clamp(1.0rem, 1.1vw, 1.2rem);
	--font-size-h1: clamp(2.5rem, 5vw, 3.5rem);
	--font-size-h2: clamp(2rem, 3.5vw, 2.5rem);
	--font-size-h3: clamp(1.6rem, 2.5vw, 2.0rem);
	/* Zeilenabstand */
	--line-height-base: clamp(1.4, 1.5vw, 1.6);
	--line-height-small: clamp(1.2, 1.3vw, 1.4);
}

body {
	font-family: 'Sofia Pro Light Condensed', 'Segoe UI', sans-serif;
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	background-color: var(--bg-light);
	color: var(--text-main);
}

h1, h2, h3 {
	font-family: 'adam', 'Segoe UI', sans-serif;
	color: var(--blue-accent);
}

h1 span, h2 span {
	color: var(--blue-accent);
}

h1 {
	font-size: var(--font-size-h1);
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

small, .text-muted {
	font-size: var(--font-size-small);
}

ul {
	padding-left: 1.2rem;
}

ul li {
	margin-bottom: 0.75rem;
}

a {
	color: var(--blue-accent);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s ease, text-decoration 0.3s ease;
}
/* Link wurde bereits besucht */
a:visited {
	color: var(--text-muted);
}
/* Maus fährt über den Link */
a:hover {
	color: var(--blue-accent);
	text-decoration: underline;
}
/* Link wird aktiv geklickt */
a:active {
	color: var(--text-main);
}
/* Link hat den Fokus (z. B. via Tastatur) */
a:focus {
	outline: 2px dashed var(--blue-accent);
	outline-offset: 4px;
}

/* Formatierung Navbar Beginn */
.custom-navbar {
	background-color: var(--bg-dark);
	transition: all 0.5s ease;
}
.custom-navbar.large {
	padding-top: var(--font-size-small);
	padding-bottom: var(--font-size-small);
}
.custom-navbar.large .nav-link {
	font-size: var(--font-size-base);
}
.custom-navbar.large .navbar-logo {
	height: 48px;
}
.custom-navbar.shrink {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}
.custom-navbar.shrink .nav-link {
	font-size: var(--font-size-small);
}
.custom-navbar.shrink .navbar-logo {
	height: 32px;
}
.custom-navbar .navbar-brand, .custom-navbar .nav-link {
	color: var(--green-primary);
	text-decoration: none;
	transition: all 0.5s ease;
}
.custom-navbar .nav-link:hover, .custom-navbar .nav-link:focus, .custom-navbar .nav-link:active {
	color: var(--green-primary);
	text-decoration: none;
	outline: none;
}
/* Trennstriche zwischen navbar-Menüeinträgen – nur auf größeren Screens */
@media (min-width: 992px) {
	.custom-navbar .navbar-nav .nav-item:not(:first-child) {
		border-left: 0.5px dotted var(--green-primary);
		margin-left: 0.1rem;
		padding-left: 0.1rem;
	}
}
/* Anpassung des Toggler-Icons - auch Hamburger genannt */
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(117, 138, 100, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-logo {
	width: auto;
	display: inline-block;
	transition: height 0.5s ease;
}
/* Formatierung Navbar Ende */

.fst-italic {
	color: var(--blue-accent);
}

.hero-header {
	height: 100vh; /* volle Bildschirmhöhe */
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
	background-image: url('../pics/background_hero.png');
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
}

.hero-header .container {
	z-index: 2;
}

.hero-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.4); /* optionaler Overlay für bessere Lesbarkeit */
	z-index: 1;
}

.hero-content {
	margin-top: 30vh;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--green-primary);
	background: rgba(236, 227, 216, 0.0); 
	border-radius: 100px;
	width: 90vw;
}

.lead {
	padding-bottom: 20px;
	font-size: clamp(1.7rem, 2vw, 1.8rem);
}

.logo {
	width: 30vw;
}

.danielbsteh {
	width: 60vw;
}

.zertifikat {
	width: 200px;
}
@media (min-width: 768px) {
 	.hero-content {
		width: 75vw;
		margin-top: 25vh;
	}
	.logo {
		width: 22vw;
	}
	.danielbsteh {
		width: 45vw;
	}
}

@media (min-width: 1200px) {
 	.hero-content {
		width: 55vw;
		margin-top: 25vh;
	}
	.logo {
		width: 15vw;
	}
	.danielbsteh {
		width: 30vw;
	}
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.rounded-circle-border {
	width: 50vw;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 10px solid var(--bg-light);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* optional: sanfter Schatten */
}

@media (min-width: 992px) {
 	.rounded-circle-border {
		width: 80%;
	}
}

/* Für die H2-Überschrift "Servus und Willkommen auf meiner..." */
.heading-split span {
	display: block;
	margin-top: 2rem;
}
.heading-split span:first-child {
	margin-top: 0;
}

.zusammenfassung {
	color: var(--blue-accent);
	border-left: 1px solid var(--blue-accent);
	padding-left: 1rem;
	margin: 1.5rem 0;
	font-style: italic;
}

/* css für Fade-In-Effekt */
.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

#block_1 {
	background-color: var(--block-1);
	color: var(--bg-light);
}

#block_2 {
	background-color: var(--block-2);
	color: var(--bg-light);
}

#block_3 {
	background-color: var(--block-3);
	color: var(--bg-light);
}

#block_4 {
	background-color: var(--block-4);
	color: var(--text-main);
}

#block_4 h3 {
	color: var(--text-main);
}

.themenfelder_ul {
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}

#block_1 ul li, #block_2 ul li, #block_3 ul li, #block_4 ul li {
	margin-bottom: 0.2rem;
}

.abstand_nach_oben {
	margin-top: 150px;
}
/* Card Formatierung für blog.html */
.card {
	border: none;
	background-color: var(--bg-dark);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease;
	font-family: 'Sofia Pro Light Condensed', 'Segoe UI', sans-serif;
}
.card:hover {
	transform: translateY(-4px);
}
.card-img-top {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.5rem 0.5rem 0 0;
}
.card-body {
	padding: 1rem;
	background-color: var(--bg-dark);
}
.card-title {
	font-size: var(--font-size-xsmall);
	font-family: 'Sofia Pro Light Condensed', 'Segoe UI', sans-serif;
	color: var(--blue-accent);
	margin-bottom: 0.5rem;
	line-height: var(--line-height-base);;
}
.card-text {
	font-size: var(--font-size-xsmall);
	line-height: var(--line-height-base);
	color: var(--text-muted);
	margin-bottom: 0;
}
.card-meta {
	font-size: var(--font-size-xsmall);
	line-height: var(--line-height-base);
	color: var(--text-muted);
	margin-bottom: 0;
}

.video-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.video-wrapper video {
    display: block;
    width: 70%;
    height: auto;
}
@media (min-width: 992px) {
    .video-wrapper {
        max-width: 280px;
        margin-left: 0;
    }
}

/* Footer Formatierung */
footer {
	background-color: var(--block-1); /* dunkler, markanter Ton */
	color: var(--bg-light); /* heller Kontrast */
	font-family: 'Sofia Pro Light Condensed', 'Segoe UI', sans-serif;
	font-size: var(--font-size-small);
	padding: 2rem 0;
	text-align: center;
	letter-spacing: 0.05em;
	border-top: 1px solid var(--blue-accent);
}
footer p {
	margin: 0;
	opacity: 0.8;
	transition: opacity 0.3s ease;
}
footer p:hover {
	opacity: 1;
}
footer a {
	color: var(--bg-light);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s ease;
}
footer a:hover {
	color: var(--blue-accent);
	text-decoration: underline;
}