/**
 * Privatstunden Page Styles
 * Juliana y Fadi Tango Website
 * 
 * Extracted from inline styles - maintains EXACT original design
 * @author Senior Developer
 */



/* Hero Section */
/* Struktur (Breite, Höhe, Flex, Position) kommt von der gemeinsamen
   .hero-Klasse in css/components/hero.css - hier nur das Seiten-spezifische
   Hintergrundbild + der zugehörige Verlauf. */
.hero--privatstunden {
	background-image: var(--hero-gradient), 
	url('../../images/privatstunden/privatstunden-hero.jpg');
}

/* .hero--privatstunden::before entfernt: identisch mit der gemeinsamen
   .hero::before-Regel (var(--gradient-hero)) aus hero.css - die greift
   automatisch, da das Element bereits die Klasse "hero" trägt. */

/* .hero h1 / .hero__subtitle liegen zentral in components/hero.css. */

/* @keyframes fadeInUp liegt zentral in base.css. */

/* Main Content */
/* Wrapper nutzt jetzt .container (base.css) statt eigener Klasse. */

/* Intro Section - Basis-Styling (Box, h2, p) jetzt zentral in
   css/components/sections.css als .intro-section / .intro-section--boxed.
   Highlight-Element ebenfalls zentral als .intro-section__highlight. */

/* Feature Section mit großem Bild */
.feature-with-image {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Fluid statt starrer 3rem/5rem/3rem - komplett ohne Mobile-Anpassung
	   (Fluid-Design-Audit Kategorie B2/B3). Desktop-Maxima unverändert. */
	gap: clamp(var(--spacing-md), 6vw, var(--spacing-xl));
	align-items: stretch; /* Beide Bereiche gleich hoch */
	margin: clamp(var(--spacing-xl), 10vw, var(--spacing-3xl)) 0;
	padding: clamp(var(--spacing-md), 6vw, var(--spacing-xl));
	background: var(--gradient-dark);
	border-radius: 16px;
	border: var(--border-width-medium) solid var(--border-color-default);
	box-shadow: var(--shadow-glow-white);
}

.feature-with-image.reverse {
	grid-template-columns: 1fr 1fr;
}

.feature-with-image.reverse .feature-image {
	order: -1;
}

/* Text-Content mit Mindesthöhe für Konsistenz */
.feature-content {
	min-height: 350px; /* Basis-Höhe für alle Features */
	display: flex;
	flex-direction: column;
	justify-content: center; /* Vertikal zentriert */
}

.feature-content h3 {
	font-size: var(--font-size-5xl);
	color: var(--color-primary);
	margin-bottom: 1.5rem;
	letter-spacing: 2px;
}

.feature-content p {
	font-size: var(--font-size-lg);
	line-height: 1.8;
	color: #FFFFFF;
	margin-bottom: 1rem;
	letter-spacing: 1.65px;
}

.feature-content ul {
	list-style: none;
	padding: 0;
	margin-top: 1.5rem;
}

.feature-content ul li {
	padding: 0.8rem 0 0.8rem 2rem;
	font-size: var(--font-size-md);
	color: #FFFFFF;
	border-bottom: 1px solid #333;
	letter-spacing: 1.65px;
	position: relative;
}

.feature-content ul li:last-child {
	border-bottom: none;
}

.feature-content ul li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.8rem;
	color: var(--color-primary);
	font-weight: bold;
	font-size: var(--font-size-xl);
}

/* Bild passt sich EXAKT an Textbereich-Höhe an */
.feature-image {
	border-radius: 12px;
	overflow: hidden;
	height: 100%; /* Volle Höhe des Grid-Bereichs */
	min-height: 350px; /* Mindestens so groß wie Content */
	max-height: 550px; /* Verhindert übermäßiges Wachstum */
	box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.feature-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.feature-image:hover img {
	transform: scale(1.05);
}

/* Nur für dieses eine Bild ("Zwei Lehrer - Doppelte Expertise"): Der
   obere Bildbereich (Köpfe/Gesichter) wird beim object-fit:cover-Zuschnitt
   sonst abgeschnitten, da die Box (vom Textinhalt vorgegebene Höhe,
   siehe .feature-content oben) deutlich querformatiger ist als das
   Hochformat-Originalfoto. Bewusst als eigene, gezielte Modifier-Klasse
   statt einer generellen Änderung an .feature-image img - betrifft
   ausschließlich diese eine Stelle, alle anderen Feature-Bilder bleiben
   beim Standard (zentrierter Bildausschnitt). */
.feature-image--top img {
	object-position: center top;
}

/* Vorteile Grid */
/* Box-Styling für .benefits-section (Hintergrund, Rahmen, Glow, Titel)
   ist bereits zentral in css/components/sections.css definiert und wird
   von Einsteiger, Shows/Workshops und Privatstunden gemeinsam genutzt. */

/* Zwei gleich breite Spalten: links Featured (vertikal gestapelt),
   rechts normale Vorteile (ebenfalls vertikal gestapelt). */
/* Zwei Zeilen untereinander, jede Zeile: 1 Featured-Box links +
   2 normale Boxen übereinander rechts (gleiche Gesamthöhe). */
.benefits-rows {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	/* Gleicher optischer Gesamtabstand zum Titel wie auf der
	   Einsteiger-Seite (dort: 1.8rem h2-Margin + 3rem Grid-Margin). */
	margin-top: 2.8rem;
}

.benefits-row {
	display: grid;
	/* Featured-Spalte 50px schmaler, normale Spalte 50px breiter als eine
	   reine 50/50-Aufteilung. */
	grid-template-columns: calc(50% - 50px) calc(50% + 50px);
	gap: 1.4rem;
	/* stretch: Featured-Box wird auf die Höhe der beiden normalen Boxen
	   (rechts) gestreckt -> schließt exakt auf gleicher Höhe ab. */
	align-items: stretch;
}

.benefits-pair {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

/* Process Section */
.process-section {
	background: var(--gradient-dark);
	/* Fluid statt starrer 4rem/3rem/5rem - komplett ohne Mobile-Anpassung
	   (Fluid-Design-Audit Kategorie B2/B3). Desktop-Maxima unverändert. */
	padding: clamp(var(--spacing-lg), 6vw, var(--spacing-2xl))
	         clamp(var(--spacing-md), 6vw, var(--spacing-xl));
	border-radius: var(--border-radius-lg);
	margin: clamp(var(--spacing-xl), 10vw, var(--spacing-3xl)) 0;
	border: var(--border-width-medium) solid var(--border-color-default);
	box-shadow: var(--shadow-glow-white);
}

.process-section h2 {
	font-size: var(--font-size-6xl);
	color: var(--color-primary);
	text-align: center;
	margin-bottom: var(--spacing-xl);
	letter-spacing: var(--letter-spacing-wider);
}

.process-timeline {
	position: relative;
	max-width: 640px;
	margin: 2rem auto 0;
}

/* KEINE globale Linie mehr (siehe .process-step::after weiter unten).
   Die vorherige Lösung war eine einzige, starr berechnete Linie
   (top: 34px / bottom: 34px über die GESAMTE Container-Höhe) - das ging
   nur auf, wenn jede Zeile exakt 68px (Kreis-Höhe) hoch war. Sobald
   Text auf schmalen Screens mehrzeilig umbrach, wurde eine Zeile höher
   als 68px, der letzte Kreis blieb aber (mangels align-items) oben in
   seiner Zeile verankert - die Linie lief bis zum ursprünglich
   angenommenen (jetzt falschen) Endpunkt weiter und ragte über den
   Kreis hinaus. */

.process-step {
	position: relative;
	display: flex;
	gap: 1.8rem;
	text-align: left;
	padding-bottom: 2.6rem;
}

.process-step:last-child {
	padding-bottom: 0;
}

/* Jeder Schritt (außer dem letzten) bekommt seine EIGENE Linie, die
   sich automatisch an seine tatsächliche Höhe anpasst - egal wie lang
   der Text in genau diesem Schritt ist. bottom:0 endet exakt an der
   eigenen Box-Unterkante (inkl. padding-bottom), also exakt dort, wo
   der nächste Schritt beginnt - kein Raten über die Gesamthöhe mehr. */
.process-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 34px;
	top: 68px;
	bottom: 0;
	width: 2px;
	background: var(--color-primary);
	z-index: 1;
}

.process-number {
	flex-shrink: 0;
	width: 68px;
	height: 68px;
	background: #141414;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-4xl);
	font-weight: 700;
	position: relative;
	z-index: 2;
}

.process-content {
	padding-top: 0.9rem;
}

.process-step h3 {
	color: var(--color-primary);
	font-size: var(--font-size-3xl);
	margin-bottom: 0.5rem;
	letter-spacing: 1.5px;
}

.process-step p {
	color: #FFFFFF;
	line-height: 1.65;
	font-size: var(--font-size-md);
	letter-spacing: 0.5px;
}

/* Pricing Section */
/* .pricing-section Basis-Styling (Box, h2) jetzt ausschließlich zentral in
   css/components/pricing.css definiert. */

/* Testimonial */
/* CTA Section */
/* .cta-section liegt zentral in components/sections.css. */

/* .cta-buttons / .cta-button liegen zentral in components/buttons.css. */

/* Responsive */
@media (max-width: 968px) {
	.feature-with-image {
		grid-template-columns: 1fr;
	}
	
	/* Ohne diese Zeile würde die globale .feature-with-image.reverse-Regel
	   (2 Klassen, außerhalb jeder Media Query, siehe oben) die einspaltige
	   Regel direkt darüber überstimmen - trotz Media Query, da CSS bei
	   gleichzeitig zutreffenden Regeln nach Spezifität entscheidet, nicht
	   nach "wer in einer Media Query steht". Gleiche (höhere) Spezifität
	   hier nötig, damit die Reverse-Variante auf Mobile ebenfalls korrekt
	   einspaltig wird (Bild rutscht unter den Text statt daneben stehen
	   zu bleiben). */
	.feature-with-image.reverse {
		grid-template-columns: 1fr;
	}
	
	.feature-with-image.reverse .feature-image {
		order: 0;
	}
	
	.benefits-row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	/* Höhen-Anpassung sowie h1/.hero__subtitle-Verkleinerung kommen
	   bereits von der gemeinsamen .hero-Regel (components/hero.css). */
	
	/* .process-steps entfernt: Überbleibsel einer früheren, mehrspaltigen
	   Grid-Version des Prozess-Bereichs. Das heutige Design ist eine
	   vertikale Zeitleiste (.process-timeline) und von Natur aus bereits
	   einspaltig, keine Mobile-Anpassung nötig. */
	
	/* .cta-buttons Responsive-Regel liegt zentral in components/buttons.css. */
}