/* ================================================= */
/* LOCAL FONTS                                       */
/* ================================================= */

@font-face {
	font-family: "Roboto";
	src: url("/fonts/roboto-v50-latin-300.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: url("/fonts/roboto-v50-latin-regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: url("/fonts/roboto-v50-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: url("/fonts/roboto-v50-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "Roboto Condensed";
	src: url("/fonts/roboto-condensed-v31-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}



/* ================================================= */
/* DESIGN TOKENS (CSS Custom Properties)             */
/* ================================================= */
/*
   Alle Farben, Abstände und Schriftgrößen zentral
   hier definiert. Änderungen nur an dieser Stelle
   nötig – wirken sich überall aus.
*/

:root {

	/* --- Markenfarben --- */
	--brand-green:      #72AB00;
	--brand-green-soft: #7FBF1E;

	/* --- Grautöne --- */
	--gray-dark:   #333333;
	--gray-mid:    #9A9A9A;
	--gray-light:  #CCCCCC;
	--gray-bullet: #777777;

	/* --- Hintergründe --- */
	--bg-main:    #F8F8F8;
	--bg-content: #F4F4F4;
	--bg-white:   #FFFFFF;

	/* --- Rahmen --- */
	--border-color: #CCCCCC;

	/* --- Schatten --- */
	--shadow-topbar: 0 3px 8px rgba(0,0,0,0.25);
	--shadow-teaser: 0 1px 3px rgba(0,0,0,0.08);

	/* --- Top-Bar Hintergrund --- */
	--topbar-bg:        #000000;
	--topbar-bg-shrink: #111111;

	/* --- Claim-Farbe --- */
	--claim-color: #DADADA;

	/* --- Schriftfamilien --- */
	--font-base: "Roboto", Arial, sans-serif;
	--font-logo: "Roboto Condensed", sans-serif;

	/* --- Basis-Typografie --- */
	--line-height-base:    1.45;
	--line-height-li:      1.2;   /* Zeilenabstand innerhalb mehrzeiliger LI-Tags */
	--line-height-tight:   1.25;
	--line-height-heading: 1.1;

	/* --- Typografie-Skala (Desktop) --- */
	--type-h1:     1.75em;
	--type-h2:     1.5em;
	--type-h3:     1.17em;
	--type-h5:     0.8em;
	--type-h6:     0.8em;
	--type-footer: 0.85em;

	/* --- Typografie-Skala (Mobile Portrait, kompakter) --- */
	--type-h1-portrait: 1.3em;
	--type-h2-portrait: 1.2em;
	--type-h3-portrait: 1.05em;
	--type-h4-portrait: 0.95em;
	--type-h5-portrait: 0.8em;
	--type-p-portrait:  0.9em;
	--type-ul-portrait: 0.9em;

	/* --- Typografie-Skala (Mobile Landscape, kompakter) --- */
	--type-h2-landscape: 1.15em;
	--type-h4-landscape: 0.95em;
	--type-h5-landscape: 0.81em;
	--type-p-landscape:  0.98em;
	--type-ul-landscape: 0.85em;

	/* --- Layout --- */
	--max-width:       900px;
	--navi-item-width: 105px;

	/* --- Layout-Padding pro Breakpoint --- */
	--pad-desktop:          30px;
	--pad-tablet-portrait:  30px;
	--pad-mobile-landscape: 24px;
	--pad-mobile:           14px;
	--pad-mobile-content:   12px;

	/* --- Innenabstände feste Boxen --- */
	--pad-header:        28px;
	--pad-header-shrink: 10px;
	--pad-navi:          18px;
	--pad-navi-shrink:   10px;
	--pad-content:       30px;
	--pad-teaser:        20px;
	--pad-footer-v:      26px;
	--pad-footer-mobile:           14px;   /* Footer horizontal: Mobile Portrait  */
	--pad-footer-mobile-landscape: 24px;   /* Footer horizontal: Mobile Landscape */

	/* --- Abstände / Margins --- */
	--margin-teaser-bottom: 25px;
	--margin-hr:            25px;
	--margin-li:            0.3em;

	/* --- Radien --- */
	--radius-image: 6px;

	/* --- HR --- */
	--hr-color:   #B0B09A;
	--hr-opacity: 0.6;

	/* --- Logo-Größen: Normal-Zustand --- */
	--logo-size-desktop:          3.2rem;
	--logo-size-tablet-landscape: 2.1rem;
	--logo-size-mobile:           1.8rem;

	/* --- Logo-Größen: Shrink-Zustand (ca. 75%) --- */
	--logo-shrink-desktop:          2.4rem;
	--logo-shrink-tablet-landscape: 1.55rem;
	--logo-shrink-mobile:           1.35rem;

	/* --- Claim-Größen: Normal-Zustand --- */
	--claim-size-desktop:          0.9rem;
	--claim-size-tablet-landscape: 0.6rem;
	--claim-size-mobile:           0.53rem;

	/* --- Claim-Größen: Shrink-Zustand --- */
	--claim-shrink-desktop: 0.7rem;
	--claim-shrink-mobile:  0.5rem;

	/* --- Claim: Shrink-Skalierung im Landscape-Modus --- */
	--claim-shrink-scale-landscape: 0.83;

	/* --- Navi-Schriftgrößen --- */
	--navi-size-desktop:   0.8rem;
	--navi-shrink-desktop: 0.65rem;
	--navi-size-mobile:    0.62rem;
	--navi-shrink-mobile:  0.55rem;

	/* --- Farben: Überschriften --- */
	--heading-dark: #1A1A1A;

	/* --- Profilbild: feste Breite --- */
	--profilbild-width: 140px;

	/* --- Scroll-Offset für sticky Header --- */
	--scroll-margin-top: 150px;

	/* --- Breakpoints (nur zur Dokumentation, nicht als var() nutzbar in @media) --- */
	/* --bp-mobile:  600px  */
	/* --bp-tablet:  900px  */

	/* --- Druck --- */
	--print-color: #000000;

	/* --- Transitions --- */
	--transition-fast:   0.2s ease;
	--transition-normal: 0.35s ease;
	--transition-smooth: 0.45s cubic-bezier(.4,0,.2,1);

}



/* ================================================= */
/* RESET / BASE                                      */
/* ================================================= */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
	background: var(--bg-main);
	font-family: var(--font-base);
	font-weight: 400;
	color: var(--gray-dark);
	line-height: var(--line-height-base);
}



/* ================================================= */
/* LAYOUT                                            */
/* ================================================= */

#main {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 12px;
}



/* ================================================= */
/* LINKS                                             */
/* ================================================= */

a {
	color: var(--gray-mid);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--brand-green);
}



/* ================================================= */
/* TYPOGRAFIE                                        */
/* ================================================= */

h1 {
	color: var(--brand-green);
	font-size: var(--type-h1);
	text-transform: uppercase;
	margin: 0.8em 0 0.3em;
}

h2 {
	color: var(--heading-dark);
	font-size: var(--type-h2);
	margin: 1em 0 0.3em;
}

h3 {
	color: var(--brand-green);
	font-size: var(--type-h3);
	margin: 1em 0 0.3em;
}

h4 {
	color: var(--heading-dark);
	font-weight: 700;
	margin: 0.8em 0 0.15em;
}

h5 {
	color: var(--heading-dark);
	font-size: var(--type-h5);
	font-weight: 700;
}

h6 {
	color: var(--heading-dark);
	font-size: var(--type-h6);
	font-weight: 700;
}

p {
	color: var(--gray-dark);
	margin: 0.6em 0;
}



/* ================================================= */
/* LISTEN                                            */
/* ================================================= */

ul {
	list-style: none;
	padding-left: 1.2em;
	margin: 0.2em 0;
}

ul li {
	position: relative;
	line-height: var(--line-height-li);
	margin-bottom: var(--margin-li);
}

ul li:last-child {
	margin-bottom: 0;
}

ul li::before {
	content: "▪";
	position: absolute;
	left: -1.2em;
	top: 0.1em;
	color: var(--gray-bullet);
	font-size: 0.8em;
}



/* ================================================= */
/* HR                                                */
/* ================================================= */

hr {
	border: none;
	height: 1px;
	background: var(--hr-color);
	opacity: var(--hr-opacity);
	margin: var(--margin-hr) 0;
	clear: both;
}



/* ================================================= */
/* HEADER + NAVIGATION                               */
/* ================================================= */

/* Top-Bar (sticky) */

#top-bar {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--topbar-bg);
	transition:
		background  var(--transition-fast),
		box-shadow  var(--transition-fast),
		padding     var(--transition-normal);
}

#top-bar.shrink {
	background: var(--topbar-bg-shrink);
	box-shadow: var(--shadow-topbar);
}


/* Header-Box */

#box-header {
	padding: var(--pad-header) var(--pad-desktop);
	border: 1px solid var(--border-color);
	border-bottom: none;
	transition: padding var(--transition-normal);
}

#top-bar.shrink #box-header {
	padding-top:    var(--pad-header-shrink);
	padding-bottom: var(--pad-header-shrink);
}


/* Logo (.style1 = grüner Teil, .style11 = grauer Teil) */

.style1,
.style11 {
	font-family: var(--font-logo);
	font-size: var(--logo-size-desktop);
	font-weight: 700;
	line-height: var(--line-height-heading);
	transition: font-size var(--transition-smooth);
}

.style1  { color: var(--brand-green-soft); }
.style11 { color: var(--gray-mid); }

#top-bar.shrink .style1,
#top-bar.shrink .style11 {
	font-size: var(--logo-shrink-desktop);
}


/* Claim */

.style2 {
	display: block;
	font-size: var(--claim-size-desktop);
	line-height: var(--line-height-tight);
	margin-top: 4px;
	color: var(--claim-color);
	transform-origin: left top;
	transition:
		font-size   var(--transition-smooth),
		margin-top  var(--transition-smooth),
		line-height var(--transition-smooth);
}

#top-bar.shrink .style2 {
	font-size:   var(--claim-shrink-desktop);
	line-height: var(--line-height-tight);
	margin-top:  2px;
}


/* Navi-Box */

#box-navi {
	padding: var(--pad-navi) var(--pad-desktop);
	border-left:  1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	transition: padding var(--transition-normal);
}

#top-bar.shrink #box-navi {
	padding-top:    var(--pad-navi-shrink);
	padding-bottom: var(--pad-navi-shrink);
}


/* Navi-Liste */

#navi ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* Navi-Items */

#navi li {
	display: inline-block;
	width: var(--navi-item-width);
	margin-right: 12px;
	padding: 5px 0;
	text-align: center;
	vertical-align: top;
}

#navi li:last-child {
	margin-right: 0;
}

/* Bullet-Override für Navi */
#navi li::before {
	content: none;
}

#top-bar.shrink #navi li {
	padding: 2px 0;
}


/* Navi-Links */

#navi li a {
	display: block;
	width: 100%;
	padding-top: 6px;
	font-size: var(--navi-size-desktop);
	font-weight: 400;
	letter-spacing: 0.03em;
	border-top: 1px solid var(--border-color);
	transition:
		color        var(--transition-fast),
		border-color var(--transition-fast),
		font-size    var(--transition-normal),
		padding      var(--transition-normal);
}

#top-bar.shrink #navi li a {
	font-size:      var(--navi-shrink-desktop);
	padding-top:    2px;
	letter-spacing: 0.02em;
}


/* Navi Hover + Aktiv-Zustand */

#navi a:hover,
#home       #navi01 a,
#uebermich  #navi02 a,
#expertise  #navi03 a,
#projekte   #navi04 a,
#arbeitsweise #navi05 a {
	color: var(--brand-green);
	border-top-color: var(--brand-green);
}



/* ================================================= */
/* CONTENT-BEREICHE                                  */
/* ================================================= */

/* Haupt-Content */

#box-content {
	background: var(--bg-content);
	padding: var(--pad-content);
	border: 1px solid var(--border-color);
	border-top: none;
	scroll-margin-top: var(--scroll-margin-top);
}


/* Teaser */

#box-teaser {
	background: var(--bg-white);
	padding: var(--pad-teaser);
	margin: 0 0 var(--margin-teaser-bottom);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-teaser);
}


/* Footer */

#box-footer {
	background: var(--bg-white);
	padding: var(--pad-footer-v) var(--pad-desktop);
	border: 1px solid var(--border-color);
	border-top: none;
	color: var(--gray-mid);
	font-size: var(--type-footer);
}



/* ================================================= */
/* PROFILBILD                                        */
/* ================================================= */

#box-content img.profilbild {
	display: block;
	width: var(--profilbild-width);
	max-width: 25%;
	border-radius: var(--radius-image);
	float: left;
	margin: 0 20px 16px 0;
}

/* Text neben Bild oben bündig */
#box-content img.profilbild + h1,
#box-content img.profilbild + h2,
#box-content img.profilbild + h3,
#box-content img.profilbild + h4,
#box-content img.profilbild + p {
	margin-top: 0;
}

/* HR immer unter Bild */
#box-content hr {
	clear: both;
	margin-top: 25px;
}



/* ================================================= */
/* RESPONSIVE SYSTEM                                 */
/* ================================================= */
/*
   Breakpoints (Mobile-First-Logik, von unten nach oben):

   ① Mobile Portrait:    max-width: 600px  + portrait
   ② Mobile Landscape:   max-width: 900px  + landscape
   ③ Tablet Portrait:    601px – 900px     + portrait
   ④ Desktop:            > 900px           (Basis, kein Media Query)

   Shrink-Padding-Regel:
   Normal- und Shrink-Zustand erhalten immer dasselbe
   horizontale Padding – kein gesonderter Shrink-Override nötig.
*/


/* ------------------------------------------------- */
/* ① MOBILE PORTRAIT  (≤ 600px, portrait)            */
/* ------------------------------------------------- */

@media (max-width: 600px) and (orientation: portrait) {

	/* Header + Navi */
	#box-header,
	#box-navi,
	#top-bar.shrink #box-header,
	#top-bar.shrink #box-navi {
		padding-left:  var(--pad-mobile);
		padding-right: var(--pad-mobile);
	}

	/* Content */
	#box-content {
		padding-left:  var(--pad-mobile-content);
		padding-right: var(--pad-mobile-content);
	}

	/* Footer */
	#box-footer {
		padding-left:  var(--pad-footer-mobile);
		padding-right: var(--pad-footer-mobile);
	}
	
	#box-content img.profilbild {
		width: 120px;
		max-width: 26%;
	}

	/* Logo */
	.style1,
	.style11 {
		font-size: var(--logo-size-mobile);
	}

	#top-bar.shrink .style1,
	#top-bar.shrink .style11 {
		font-size: var(--logo-shrink-mobile);
	}

	/* Claim */
	.style2 {
		font-size: var(--claim-size-mobile);
	}

	#top-bar.shrink .style2 {
		font-size: var(--claim-shrink-mobile);
	}

	/* Navi: Wortbreite (kein festes width) */
	#navi ul {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
		justify-content: flex-start;
	}

	#navi li {
		width: auto;
		margin: 0;
		padding: 0;
	}

	#navi li a {
		display: inline-block;
		width: auto;
		white-space: nowrap;
		font-size: var(--navi-size-mobile);
		padding: 6px 0;
	}

	#top-bar.shrink #navi li a {
		font-size: var(--navi-shrink-mobile);
	}

	/* Typografie kompakter */
	h1 {
		font-size: var(--type-h1-portrait);
	}

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

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

	h4 {
		font-size: var(--type-h4-portrait);
	}

	h5 {
		font-size: var(--type-h5-portrait);
	}
	
	h6 {
		font-size: var(--type-h5-portrait);
		clear: left;
	}

	p {
		font-size: var(--type-p-portrait);
	}

	ul {
		font-size: var(--type-ul-portrait);
	}

}


/* ------------------------------------------------- */
/* ② MOBILE LANDSCAPE  (≤ 900px, landscape)          */
/* ------------------------------------------------- */

@media (max-width: 900px) and (orientation: landscape) {

	/* Header + Navi (Normal + Shrink) */
	#box-header,
	#box-navi,
	#top-bar.shrink #box-header,
	#top-bar.shrink #box-navi {
		padding-left:  var(--pad-mobile-landscape);
		padding-right: var(--pad-mobile-landscape);
	}

	/* Content */
	#box-content {
		padding-left:  var(--pad-mobile-landscape);
		padding-right: var(--pad-mobile-landscape);
	}

	/* Footer */
	#box-footer {
		padding-left:  var(--pad-footer-mobile-landscape);
		padding-right: var(--pad-footer-mobile-landscape);
	}

	#box-content img.profilbild {
		width: 125px;
		max-width: 20%;
	}

	/* Logo */
	.style1,
	.style11 {
		font-size: var(--logo-size-tablet-landscape);
	}

	#top-bar.shrink .style1,
	#top-bar.shrink .style11 {
		font-size: var(--logo-shrink-tablet-landscape);
	}

	/*
	   Claim: Im Landscape-Modus wird der Claim nicht per
	   font-size verkleinert, sondern nur per transform skaliert.
	   So bleibt die Layout-Höhe stabil.
	*/
	.style2 {
		font-size:        var(--claim-size-tablet-landscape);
		line-height:      var(--line-height-tight);
		margin-top:       2px;
		transform:        scale(1);
		transform-origin: left top;
		transition:       transform var(--transition-smooth);
	}

	#top-bar.shrink .style2 {
		font-size:   var(--claim-size-tablet-landscape); /* bleibt gleich */
		line-height: var(--line-height-tight);
		margin-top:  2px;
		transform:   scale(var(--claim-shrink-scale-landscape));
	}

	/* Typografie kompakter */
	h2 {
		font-size: var(--type-h2-landscape);
	}

	h4 {
		font-size: var(--type-h4-landscape);
	}

	h5 {
		font-size: var(--type-h5-landscape);
	}

	p {
		font-size:   var(--type-p-landscape);
		line-height: 1.4;
	}

	ul {
		font-size:   var(--type-ul-landscape);
		line-height: var(--line-height-base);
	}

}


/* ------------------------------------------------- */
/* ③ TABLET PORTRAIT  (601px – 900px, portrait)      */
/* ------------------------------------------------- */

@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {

	/* Header + Navi (Normal + Shrink) */
	#box-header,
	#box-navi,
	#top-bar.shrink #box-header,
	#top-bar.shrink #box-navi {
		padding-left:  var(--pad-tablet-portrait);
		padding-right: var(--pad-tablet-portrait);
	}

	/* Content */
	#box-content {
		padding-left:  var(--pad-tablet-portrait);
		padding-right: var(--pad-tablet-portrait);
	}

	/* Logo + Claim: erbt Desktop-Größen → kein Override nötig */

}


/* ④ DESKTOP  (> 900px): Alle Basis-Stile oben definiert */



/* ================================================= */
/* DRUCK                                             */
/* ================================================= */

@media print {

	/* Alles ausblenden */
	body * {
		visibility: hidden;
	}

	/* Nur Content sichtbar */
	#box-content,
	#box-content * {
		visibility: visible;
	}

	/* Content auf volle Seite */
	#box-content {
		position:   absolute;
		left:       0;
		top:        0;
		width:      100%;
		padding:    0;
		margin:     0;
		border:     none;
		background: none;
	}

	/* Links als Text */
	a {
		text-decoration: underline;
		color: var(--print-color);
	}

	/* URLs anzeigen */
	a::after {
		content:   " (" attr(href) ")";
		font-size: 0.85em;
	}

	/* Seitenränder */
	@page {
		margin: 2cm;
	}

}