/*
Theme Name:  OceanWP Child – Naturheilpraxis Emmermann
Description: Child-Theme für native Anpassungen ohne Zusatz-Plugins: Sticky Header, mobile Kontakt-Leiste, Design-Feinschliff.
Template:    oceanwp
Version:     1.0.0
Author:      Naturheilpraxis Emmermann
Text Domain: oceanwp-child
*/

/* =========================================================
   0. Schriften: Fraunces (Überschriften) + Source Sans 3
   (Fließtext/UI) — selbst gehostete Variable Fonts, ein
   File je Familie/Stil deckt alle Gewichte ab. Latin-Subset
   (enthält Umlaute, ß und typografische Anführungszeichen).
   ========================================================= */
@font-face {
	font-family: "Fraunces";
	src: url("fonts/fraunces-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-var.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-italic-var.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

/* =========================================================
   1. Nativer Sticky Header
   (ersetzt das Plugin "Ocean Sticky Header")
   position:fixed statt sticky, weil das Parent-Theme
   #wrap{overflow:hidden} und html{overflow-x:hidden} setzt.
   Der Body-Abstand wird per Inline-Script (functions.php)
   auf die tatsächliche Headerhöhe gesetzt.
   ========================================================= */
#site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
}

.admin-bar #site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar #site-header {
		top: 46px;
	}
}

/* Fallback, bis das Script die exakte Höhe gesetzt hat */
body {
	padding-top: 74px;
}

/* Logo und Navigation vertikal zentrieren.
   OceanWPs Minimal-Header nutzt Floats (beide Blöcke hängen oben);
   als Flex-Container zentrieren sich Logo (45px) und Menü (42px) sauber. */
#site-header.minimal-header #site-header-inner {
	display: flex;
	align-items: center;
}

/* Navigation rechtsbündig wie im Float-Layout zuvor —
   gilt auch für das Burger-Icon der mobilen Ansicht */
#site-header.minimal-header #site-navigation-wrap,
#site-header.minimal-header .oceanwp-mobile-menu-icon {
	margin-left: auto;
}

/* =========================================================
   2. Mobile Kontakt-Leiste (Anrufen / Route)
   Markup kommt aus functions.php (wp_footer)
   ========================================================= */
.npx-mobile-cta {
	display: none;
}

@media screen and (max-width: 768px) {
	.npx-mobile-cta {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9998;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
	}

	.npx-mobile-cta a {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 14px 8px;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		color: #ffffff;
		letter-spacing: 0.02em;
	}

	.npx-mobile-cta a:focus {
		outline: 2px solid #FAF8F3;
		outline-offset: -4px;
	}

	.npx-mobile-cta .npx-cta-call {
		background-color: #2E5240;
	}

	.npx-mobile-cta .npx-cta-route {
		background-color: #223D30;
	}

	.npx-mobile-cta svg {
		width: 18px;
		height: 18px;
		fill: currentColor;
		flex-shrink: 0;
	}

	/* Platz schaffen, damit die Leiste den Footer nicht verdeckt */
	body {
		padding-bottom: 52px;
	}
}

/* =========================================================
   3. Elementor-Stretch absichern (kleine Viewports)
   Das Stretch-Script misst die Fensterbreite per JS und kann
   auf Mobilgeräten falsche Werte liefern (Rotation, Scroll-
   leisten, Headless-Minimum). CSS-Override erzwingt exakte
   Viewport-Breite — !important schlägt die Inline-Styles.
   ========================================================= */
@media screen and (max-width: 1024px) {
	.elementor-section-stretched {
		width: 100vw !important;
		left: 50% !important;
		right: auto !important;
		margin-left: -50vw !important;
	}
}

/* =========================================================
   4. HappyForms: Formular-Button in Praxisfarben
   ========================================================= */
.happyforms-form .happyforms-submit,
.happyforms-form .happyforms-button--submit {
	background-color: #2E5240 !important;
	border-color: #2E5240 !important;
	color: #ffffff !important;
}

.happyforms-form .happyforms-submit:hover,
.happyforms-form .happyforms-submit:focus {
	background-color: #223D30 !important;
	border-color: #223D30 !important;
}

/* =========================================================
   5. Therapie-Karten: einheitliches Bildformat 3:2
   ========================================================= */
.elementor-widget-image-box .elementor-image-box-img img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

/* =========================================================
   6. Feinschliff: Lesbarkeit
   ========================================================= */
/* Blocksatz global abschalten – ruhigeres Schriftbild */
.elementor-widget-text-editor,
.entry-content p {
	text-align: left !important;
}

/* Einzelwort-Umbrüche in Überschriften vermeiden
   (progressive enhancement, ältere Browser ignorieren es) */
.elementor-heading-title {
	text-wrap: balance;
}

/* Rezensionen-Link in der Trust-Leiste: Gold auf Waldschatten,
   weiß beim Hover (Standard-Linkfarbe wäre dort unlesbar) */
.elementor-element-npx0014 a {
	color: #C9B287;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.elementor-element-npx0014 a:hover,
.elementor-element-npx0014 a:focus {
	color: #FFFFFF;
}

/* =========================================================
   7. Typografie: Source Sans 3 für Fließtext/UI, Fraunces
   für Überschriften — gilt für Theme-Chrome (Menü, Footer,
   Rechtsseiten) wie für Elementor-Inhalte (dort zusätzlich
   über die Kit-Globals gesteuert).
   ========================================================= */
body {
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
	font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Fraunces", Georgia, serif;
}

/* Eyebrows (als <p> getaggte Heading-Widgets, uppercase mit
   letter-spacing) bleiben serifenlos — ruhiger als Serif-Kapitälchen */
.elementor-widget-heading p.elementor-heading-title {
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Footer-Widget-Titel nicht kapitalisieren
   (Parent setzt text-transform: capitalize → "Folge Mir Auf …") */
#footer-widgets .footer-box .widget-title {
	text-transform: none;
}

/* =========================================================
   8. Mobile UX-Feinschliff
   ========================================================= */
/* FAQ-Akkordeon: Tap-Flächen auf mind. 44px bringen */
.elementor-accordion .elementor-tab-title {
	padding-top: 14px;
	padding-bottom: 14px;
}

/* Hero-Porträt mobil als Porträt-Ausschnitt (quadratisch,
   Kopf/Oberkörper) statt Ganzkörper (Widget npx0007, Startseite).
   aspect-ratio statt vh: unabhängig von der Viewport-Höhe. */
@media screen and (max-width: 767px) {
	.elementor-element-npx0007 img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		/* nur unten beschneiden, Kopf/Haare vollständig erhalten */
		object-position: top center;
	}

	/* Hero-Buttons mobil volle Breite: Elementors width-auto
	   (Inline-Layout für Desktop) kommt aus dem später geladenen
	   Post-CSS — !important nötig */
	.elementor-element-npx0004.elementor-widget__width-auto,
	.elementor-element-npx0005.elementor-widget__width-auto {
		width: 100% !important;
	}

	.elementor-element-npx0004 .elementor-button,
	.elementor-element-npx0005 .elementor-button {
		display: block;
		width: 100%;
		text-align: center;
	}

	/* Trust-Raster (2×2): feste 2-Zeilen-Titelzone, Titel darin
	   vertikal zentriert. Die fließende Schriftgröße (clamp, mit
	   !important gegen das später geladene Elementor-Post-CSS)
	   hält Titel auf jeder Breite maximal zweizeilig und ohne
	   Wortbruch — so starten alle Untertitel einer Reihe auf
	   gleicher Höhe, und einzeilige Titel schweben mittig. */
	.elementor-element-npx0022 .elementor-heading-title {
		font-size: clamp(14px, 4.5vw, 18px) !important;
		line-height: 1.25;
		overflow-wrap: normal;
		word-break: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.5em;
	}

	.elementor-element-npx0022 .elementor-widget-text-editor {
		line-height: 1.5;
	}

	.elementor-element-npx0022 .elementor-widget-heading {
		margin-bottom: 6px;
	}

	.elementor-element-npx0022 > .elementor-container {
		row-gap: 10px;
	}

	/* Therapie-Kacheln gestapelt: Abstand zwischen den Karten */
	.elementor-element-npx0036 .elementor-column .elementor-widget-wrap.elementor-element-populated,
	.elementor-element-npu0015 .elementor-column .elementor-widget-wrap.elementor-element-populated {
		margin-bottom: 24px;
	}

	.elementor-element-npx0036 .elementor-column:last-child .elementor-widget-wrap.elementor-element-populated,
	.elementor-element-npu0015 .elementor-column:last-child .elementor-widget-wrap.elementor-element-populated {
		margin-bottom: 0;
	}
}

/* =========================================================
   9. Therapie-Kacheln (Startseite npx0036 + Übersicht npu0015)
   Bild randlos oben, Text/Link mit Innenabstand — Bild, Text
   und Link sind sichtbar EINE Einheit. Desktop nebeneinander,
   mobil gestapelt (Abstände im Mobile-Block oben).
   .elementor-element-populated im Selektor schlägt Elementors
   gleichrangige gap-extended-Padding-Regel (15px).
   ========================================================= */
.elementor-element-npx0036 .elementor-column .elementor-widget-wrap.elementor-element-populated,
.elementor-element-npu0015 .elementor-column .elementor-widget-wrap.elementor-element-populated {
	background: #FFFFFF;
	border-radius: 10px;
	box-shadow: 0 2px 14px rgba(38, 49, 43, 0.10);
	overflow: hidden; /* rundet auch das Bild oben ab */
	padding: 0 0 16px; /* Bild randlos, unten Luft */
	display: flex;
	flex-direction: column;
}

/* Innenabstand für alles unterhalb des randlosen Bildes */
.elementor-element-npx0036 .elementor-image-box-content,
.elementor-element-npu0015 .elementor-image-box-content,
.elementor-element-npx0036 .elementor-widget-button,
.elementor-element-npu0015 .elementor-widget-button {
	padding-left: 18px;
	padding-right: 18px;
}

/* Link ans Kartenende — sitzt in allen Karten einer Reihe
   auf gleicher Höhe, unabhängig von der Textlänge */
.elementor-element-npx0036 .elementor-widget-button,
.elementor-element-npu0015 .elementor-widget-button {
	margin-top: auto;
}

/* Desktop/Tablet: Luft zwischen den nebeneinanderliegenden
   Karten (ersetzt das genullte Spalten-Padding) + Hover-Lift */
@media screen and (min-width: 768px) {
	/* Trust-Leiste: einheitliche 2-Zeilen-Titelzone, Titel mittig —
	   analog zur mobilen Lösung (Fraunces bricht breiter um) */
	.elementor-element-npx0022 .elementor-heading-title {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.5em;
		line-height: 1.25;
	}

	.elementor-element-npx0036 .elementor-column .elementor-widget-wrap.elementor-element-populated,
	.elementor-element-npu0015 .elementor-column .elementor-widget-wrap.elementor-element-populated {
		margin: 0 10px;
		height: 100%; /* Karten einer Reihe gleich hoch — nur Desktop,
		                 mobil würde das den Stapel-Abstand auffressen */
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.elementor-element-npx0036 .elementor-column .elementor-widget-wrap.elementor-element-populated:hover,
	.elementor-element-npu0015 .elementor-column .elementor-widget-wrap.elementor-element-populated:hover {
		transform: translateY(-4px);
		box-shadow: 0 6px 22px rgba(38, 49, 43, 0.16);
	}
}

/* Kontakt-Sektion Startseite (npx0086): Spalten auf Inhaltsbreite
   und als Gruppe zentriert — gleich breite Drittel-Spalten ließen
   die schmale dritte Spalte rechts viel Leerraum, die optische
   Mitte kippte nach links. Nur Desktop; mobil stapeln die Spalten. */
@media screen and (min-width: 1025px) {
	.elementor-element-npx0086 > .elementor-container {
		justify-content: center;
	}

	/* Feste, inhaltsgerechte Breiten: Summe (430+300+240+2×56=1082)
	   bleibt unter den 1200px des Containers — den Rest verteilt
	   justify-content:center symmetrisch. Reine Inhaltsbreite (auto)
	   scheitert: die intrinsischen max-content-Breiten übersteigen
	   zusammen den Container, Flex lässt den Overflow beidseitig
	   herausragen. */
	.elementor-element-npx0086 .elementor-column {
		flex: 0 0 auto;
	}

	.elementor-element-npx0086 .elementor-column:nth-child(1) {
		width: 430px !important;
	}

	.elementor-element-npx0086 .elementor-column:nth-child(2) {
		width: 300px !important;
	}

	.elementor-element-npx0086 .elementor-column:nth-child(3) {
		width: 240px !important;
	}

	/* Luft zwischen den Spalten */
	.elementor-element-npx0086 .elementor-column:not(:last-child) {
		margin-right: 56px;
	}
}

/* =========================================================
   10. Datenschutzerklärung (Seite 16): Dokumentstruktur
   und Cookie-Tabelle
   ========================================================= */
.elementor-element-28ca9f1 h2 {
	font-size: 26px;
	margin: 1.6em 0 0.5em;
}

.elementor-element-28ca9f1 h3 {
	font-size: 20px;
	margin: 1.3em 0 0.4em;
}

.elementor-element-28ca9f1 ul {
	margin: 0 0 1.2em 1.2em;
}

.npx-table-wrap {
	overflow-x: auto; /* Tabelle scrollt mobil statt das Layout zu sprengen */
	margin: 1em 0 1.5em;
}

.npx-table-wrap table {
	border-collapse: collapse;
	width: 100%;
	min-width: 640px;
	font-size: 15px;
	line-height: 1.5;
}

.npx-table-wrap th,
.npx-table-wrap td {
	border: 1px solid #D8DFD4;
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}

.npx-table-wrap th {
	background: #E7EDE4;
	font-weight: 600;
}