/* ================================================= */
/* 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:		#c6cc8c;
	--brand-pink-soft:	#FB8DD4;
	--brand-dark:		#1A1A1A;

	/* --- 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;
	--bg-grey:		#ECECEC;
	--bg-header:	#ECECEC;
	
	/* --- Hintergrundgrafiken --- */
	--bg-leaf-size-desktop:           360px;
	--bg-leaf-size-tablet-portrait:   280px;
	--bg-leaf-size-mobile-landscape:  120px;
	--bg-leaf-size-mobile-portrait:   180px;

	--bg-flower-size-desktop:           450px;
	--bg-flower-size-tablet-portrait:   360px;
	--bg-flower-size-mobile-landscape:  300px;
	--bg-flower-size-mobile-portrait:   240px;
	
	/* --- Aktive Hintergrundgrößen --- */
	--bg-leaf-size:   var(--bg-leaf-size-desktop);
	--bg-flower-size: var(--bg-flower-size-desktop);

	/* --- 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: var(--bg-header);
	--topbar-bg-shrink: var(--bg-header);

	/* --- Claim-Farbe --- */
	--claim-color: #9A9A9A;

	/* --- Schriftfamilien --- */
	--font-base: "Open Sans", Arial, sans-serif;
	--font-logo: "Roboto Condensed", sans-serif;
	--font-heading: "Caladea", Cambria, Georgia, 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;
	
	/* --- Maximale Lesebreite ---*/
	--content-width-desktop: 640px;
	--content-width-tablet-portrait: 540px;
	--content-width-mobile-landscape: 530px;
	--content-width-mobile-portrait: 100%;
	
	/* --- Aktive Lesebreite --- */
	--content-width: var(--content-width-desktop);
	
	/* --- Absatz --- */
	--type-p: 0.9em;
	--line-height-p: 1.6;
	--margin-p: 1.4em;
		

	/* --- Typografie-Skala (Desktop) --- */
	--type-h1:     1.75em;
	--type-h2:     1.7em;
	--type-h6:     0.85em;
	--type-footer: 0.8em;

	/* --- Typografie-Skala (Mobile Portrait, kompakter) --- */
	--type-h1-portrait: 1.3em;
	--type-h2-portrait: 1.3em;
	--type-h6-portrait: 0.9em;
	--type-p-portrait:  0.9em;
	--type-ul-portrait: 1em;

	/* --- Typografie-Skala (Mobile Landscape, kompakter) --- */
	--type-h1-landscape: 1.3em;
	--type-h2-landscape: 1.3em;
	--type-h6-landscape: 0.9em;
	--type-p-landscape:  0.9em;
	--type-ul-landscape: 1em;

	/* --- 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-dark);
    font-size: var(--type-h1);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0.8em 0 0.3em;
}

h2 {
	color: var(--heading-dark);
	font-family: var(--font-heading);
	font-size: var(--type-h2);
	font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 1.4em 0 0.45em;
}

h6 {
	color: var(--gray-dark);
	font-size: var(--type-h6);
	font-weight: 700;
	margin: 1.4em 0 0.45em;
}

p {
	color: var(--gray-dark);
	font-size: var(--type-p);
	line-height: var(--line-height-p);
	margin: 1em 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);
	font-size: var(--type-p);
	line-height: var(--line-height-p);
}

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 = pinker Teil, .style11 = grauer Teil) */

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

.style1  { color: var(--brand-pink-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);
	border-bottom: 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,
#person		#navi02 a,
#haltung	#navi03 a,
#praxis		#navi04 a,
#kontakt	#navi05 a {
	color: var(--brand-dark);
	border-top-color: var(--brand-dark);
}


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

/* Haupt-Content */

#box-content {
	background-color: var(--bg-content);

	background-image:
		url("images/Blatt_klein_angeschnitten.png"),
		url("images/Blumegross_transparent_angeschnitten.png");
		
	background-repeat:
		no-repeat,
		no-repeat;
		
	background-size:
		var(--bg-leaf-size),
		var(--bg-flower-size);
			
	background-position:
		right 0px top 0px,
		right 0px bottom 0px;
	 
	padding: var(--pad-content);
	border: 1px solid var(--border-color);
	border-top: none;
	scroll-margin-top: var(--scroll-margin-top);
}


/* Lesespalte */

.content-column {
    max-width: var(--content-width);
}


/* 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;
}


/* ================================================ */
/* SEITENSPEZIFISCHE ANPASSUNGEN                    */
/* ================================================ */

#home {}

#person {}

#haltung {}

#praxis {}

#kontakt {}


/* ================================================= */
/* 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) {
	
	/* Images Background */
	:root {
		--bg-leaf-size:   var(--bg-leaf-size-mobile-portrait);
		--bg-flower-size: var(--bg-flower-size-mobile-portrait);
		--content-width: var(--content-width-mobile-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-h6-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) {
	
	/* Images Background */
	:root {
		--bg-leaf-size:   var(--bg-leaf-size-mobile-landscape);
		--bg-flower-size: var(--bg-flower-size-mobile-landscape);
		--content-width: var(--content-width-mobile-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 */
	h1 {
		font-size: var(--type-h1-landscape);
	}

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

	h6 {
		font-size: var(--type-h6-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) {
	
	/* Images Background */
	:root {
		--bg-leaf-size:   var(--bg-leaf-size-tablet-portrait);
		--bg-flower-size: var(--bg-flower-size-tablet-portrait);
		--content-width: var(--content-width-tablet-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;
	}

}