/*
 * ProAlpin Child Theme – style_ext.css
 *
 * Erweiterte Styles mit Fokus auf responsives Verhalten.
 * Wird in functions.php nach style.css eingebunden.
 *
 * Breakpoints (an Divi angelehnt):
 *  - Tablet:        max-width: 980px
 *  - Smartphone:    max-width: 767px
 *  - Kleine Geräte: max-width: 479px
 */


/* ============================================================
   ALLGEMEIN
   ============================================================ */

/* Bilder und Medien nie über den Container hinauslaufen lassen */
img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* Lange Wörter/Links (z. B. E-Mail-Adressen) umbrechen statt überlaufen */
.et_pb_text,
.pak-archive-description {
	overflow-wrap: break-word;
}

/* H1 seitenweit:
   1) Fluide Größe statt fix 60px auf allen Geräten:
      1265px → 60px | 980px → 49px | 768px → 38px | 375px → 28px
   2) Deutsche Silbentrennung für lange Wörter (z. B.
      "Aufbaukletterkurs"), damit nicht mitten im Wort ohne
      Trennstrich umbrochen wird. overflow-wrap bleibt als
      Notbremse für Browser ohne Trennwörterbuch. */
h1 {
	font-size: clamp(28px, 5vw, 60px) !important;
	line-height: 1.15em !important;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}


/* ============================================================
   HEADER / MOBILES MENÜ
   ============================================================ */

/* Header-Section: Divi generiert die Padding-Regel (20px 30px)
   nur auf Seiten, deren dynamisches CSS das Header-Template
   enthält. Auf den Archiv-Seiten (eigene archive.php rendert das
   TB-Template manuell) fehlt sie -> Divi-Standard 50px/4% griff
   und die Navigation saß deutlich tiefer. Hier global fixiert. */
.et-db #et-boc .et-l .et_pb_section_0_tb_header.et_pb_section {
	padding: 20px 30px;
}

/* Ebenfalls fehlende Template-Regeln auf den Archiv-Seiten:
   Row-Breite (sonst Divi-Standard 80% / max 1080px -> Navi lief
   nicht über die volle Fläche) und Logo-Größe. Repliziert 1:1
   von den regulären Seiten. */
.et_pb_row_0_tb_header,
.et-db #et-boc .et-l .et_pb_row_0_tb_header.et_pb_row {
	width: 100%;
	max-width: 1920px;
}

/* Burger-Icon: 40px weiß (auf Archiven drückt Divis Basis-CSS
   es sonst auf 32px zurück) */
.et-db #et-boc .et-l .et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar::before {
	color: #ffffff !important;
	font-size: 40px;
}

.et_pb_menu_0_tb_header .et_pb_menu_inner_container > .et_pb_menu__logo-wrap,
.et_pb_menu_0_tb_header .et_pb_menu__logo-wrap {
	width: auto;
	max-width: 100%;
}

.et_pb_menu_0_tb_header .et_pb_menu__logo-wrap .et_pb_menu__logo img {
	width: auto;
}

.et_pb_menu_0_tb_header .et_pb_menu_inner_container > .et_pb_menu__logo-wrap .et_pb_menu__logo img {
	height: 95px;
	max-height: none;
}

/* Dropdown-Hintergrund: Das Divi-Menümodul setzt per Inline-CSS
   rgba(255,255,255,0) !important mit hoher Spezifität — die alte
   Regel "ul#mobile_menu1" aus style.css verliert dagegen.
   Diese Selektoren gewinnen (gleiche Kette + Elementselektor). */
.et-db #et-boc .et-l .et_pb_menu_0_tb_header.et_pb_menu ul.et_mobile_menu {
	background-color: #ffffff !important;
	border-top: 0 !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.et-db #et-boc .et-l .et_pb_menu_0_tb_header.et_pb_menu ul.et_mobile_menu li a {
	color: #1d1e4e !important;
}

/* Warenkorb-Icon links neben dem Burger-Menü (statt darüber):
   Der Menü-Wrap hat flex-wrap:wrap, dadurch rutschte das Icon
   in eine eigene Zeile. */
@media (max-width: 980px) {
	.et-db #et-boc .et-l .et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__wrap {
		flex-wrap: nowrap;
		align-items: center;
	}

	.et-db #et-boc .et-l .et_pb_menu_0_tb_header.et_pb_menu a.et_pb_menu__cart-button {
		font-size: 22px;
		margin-right: 0px;
	}
}


/* ============================================================
   STARTSEITE / TOUR-SLIDER (Aktuelle Termine)
   ============================================================ */

/* Punkt-Navigation (wird per pa_custom.js erzeugt) */
.pak-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	padding-top: 20px;
}

.pak-carousel__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #c9c9c9;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.pak-carousel__dot:hover {
	background-color: #9a9a9a;
}

.pak-carousel__dot.is-active {
	background-color: #1d1e4e;
	transform: scale(1.25);
}

/* Beschreibungstext der Karten auf Mobil ausblenden */
@media (max-width: 767px) {
	.pak-tour-card__text {
		display: none;
	}
}


/* ============================================================
   KARTEN-GRIDS (Kurs-Archive, Sommer/Winter, Ergebnisse)
   ============================================================
   Das Plugin gibt den .pak-tour-cards feste Breiten (480px,
   auf Seite 515/508 sogar 600px, mobil 86vw). Die sind für den
   Drag-Slider gedacht — im Ergebnis-Grid (.pak-results-grid)
   laufen die Karten damit über ihre Grid-Spalte hinaus und
   nichts sitzt mehr mittig. Im Grid gilt daher: Karte = 100%
   der Spaltenbreite, auf allen Viewports. */

.pak-results-grid .pak-tour-card {
	flex-basis: auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Kartentitel: Deutsche Silbentrennung für lange Wörter
   (z. B. "Anfängerkletterkurs"), sonst wird abgeschnitten bzw.
   ohne Trennstrich umbrochen. Gilt im Grid UND im Slider. */
.pak-tour-card__title {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}


/* ============================================================
   KURS-DETAILSEITEN (body.single-pak_kurs)
   ============================================================
   Hinweis: Die .et_pb_section_X_tb_body-Klassen stammen aus dem
   Divi Theme-Builder-Template der Kursseiten. Wird das Template
   umgebaut, können sich die Nummern ändern.
   ============================================================ */

/* --- Termin-Überschrift: globale Mobile-Regel (h2 = 35px !important
   aus style.css) neutralisieren --- */
.single-pak_kurs h2.pak-course-dates-title {
	font-size: 24px !important;
}

/* --- Terminliste auf Tablet: kompakte Zeile statt alles gestapelt.
   Das Plugin stapelt unter 900px komplett; zwischen 560–900px ist
   aber genug Platz für Datum | Preis | Button in einer Zeile --- */
@media (min-width: 560px) and (max-width: 900px) {
	.pak-course-date-row {
		grid-template-columns: 1fr auto auto;
		gap: 12px 24px;
		align-items: center;
	}
	.pak-course-date-col--price {
		font-size: 18px;
		font-weight: 700;
	}
}

@media (max-width: 980px) {
	/* Abstand zum Header reduzieren (Desktop: 200px).
	   Der Header liegt absolut über der Section und ist ~135px
	   hoch — der Wert muss also darüber bleiben. */
	.single-pak_kurs .et_pb_section_0_tb_body {
		padding-top: 170px !important;
	}

	/* Termin-Block direkt unter die Breadcrumb ziehen:
	   Sobald die zwei Spalten (Bild/Akkordeons | Termine/Reviews)
	   untereinander stapeln, sollen die Termine zuerst kommen.
	   display:contents löst die Spalten auf, sodass alle Module
	   direkt im Flex-Container der Row sortierbar sind. */
	.single-pak_kurs .et_pb_row_2_tb_body {
		display: flex;
		flex-direction: column;
	}

	.single-pak_kurs .et_pb_row_2_tb_body .et_pb_column_2_tb_body,
	.single-pak_kurs .et_pb_row_2_tb_body .et_pb_column_3_tb_body {
		display: contents;
	}

	/* Terminbox nach oben, Rest behält die DOM-Reihenfolge:
	   Termine → Bild → Akkordeons → Bewertungen */
	.single-pak_kurs .et_pb_row_2_tb_body .et_pb_code_2_tb_body {
		order: -1;
		margin-bottom: 30px;
	}
}

@media (max-width: 767px) {
	/* Abstand zum Header weiter reduzieren
	   (Header ist ~135px hoch, plus Luft zur H1) */
	.single-pak_kurs .et_pb_section_0_tb_body {
		padding-top: 160px !important;
		padding-bottom: 30px !important;
	}

	/* Globale Mobile-Regel h2 = 35px !important abmildern */
	.single-pak_kurs h2 {
		font-size: 28px !important;
	}

	.single-pak_kurs h2.pak-course-dates-title {
		font-size: 22px !important;
	}

	/* Akkordeon (Beschreibung, Treffpunkt, Programm …) */
	.single-pak_kurs .et_pb_toggle_title {
		font-size: 20px !important;
	}

	.single-pak_kurs .et_pb_toggle {
		padding: 15px;
	}

	/* Sections mit 100px Innenabstand kompakter machen
	   (Gutschein, Newsletter, FAQ) */
	.single-pak_kurs .pro_start_gutschein,
	.single-pak_kurs .et_pb_section_8_tb_body {
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}

	.single-pak_kurs .et_pb_section_10_tb_body {
		padding-top: 60px !important;
	}
}

/* --- Terminliste auf Smartphone: kompakter + gute Tap-Flächen --- */
@media (max-width: 559px) {
	.pak-course-dates-box {
		padding: 20px;
	}

	.pak-course-date-row {
		gap: 8px;
		padding: 16px 0;
	}

	.pak-course-date-range {
		margin-bottom: 6px;
	}

	.pak-course-date-btn {
		display: block;
		width: 100%;
		text-align: center;
		padding: 16px;
		font-size: 18px;
	}
}


/* ============================================================
   TABLET (max-width: 980px)
   ============================================================ */

@media (max-width: 980px) {

	/* Erste Section: Abstand zum Header reduzieren */
	body.page #et-main-area .et_builder_inner_content .et_pb_section:first-child,
	body.post-type-archive #et-main-area .et_builder_inner_content .et_pb_section:first-child,
	body.tax-kurs_kategorie #et-main-area .et_builder_inner_content .et_pb_section:first-child {
		padding-top: 100px;
	}

	/* Hero-Filterleiste: Elemente untereinander statt nebeneinander */
	.pro_hero .hero-facetbar {
		flex-wrap: wrap;
	}

	.pro_hero .hero-facetbar .hero-facetbar__item,
	.pro_hero .hero-facetbar .hero-facetbar__submit {
		flex: 1 1 100%;
	}

	.pro_hero .hero-facetbar__label,
	.pro_hero .hero-facetbar select.facetwp-dropdown {
		font-size: 18px;
	}

	/* Zahlungslogos: umbrechen lassen */
	.pro_payment_logos .et_pb_text_inner {
		flex-wrap: wrap;
		gap: 15px;
	}

	.pro_payment_logos img {
		max-height: 30px;
	}
}


/* ============================================================
   SMARTPHONE (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {

	/* Erste Section: Abstand reduzieren (Desktop: 200px).
	   Der absolut positionierte Header endet bei ~115px
	   (nach dem Header-Padding-Fix oben). */
	body.post-type-archive #et-main-area .et_builder_inner_content .et_pb_section:first-child,
	body.tax-kurs_kategorie #et-main-area .et_builder_inner_content .et_pb_section:first-child {
		padding-top: 130px;
	}

	/* Typografie */
	h3 {
		font-size: 24px !important;
	}

	.single-pak_kurs .et_pb_toggle_content h3,
	.single-pak_kurs .et_pb_toggle_content p,
	.single-pak_kurs .et_pb_toggle_content li {
		font-size: 17px;
	}

	/* FAQ (Rank Math) — !important nötig, da die h3-Regel oben
	   sonst mit 24px !important gewinnt */
	h3.rank-math-question {
		font-size: 18px !important;
		padding-right: 40px;
	}

	.rank-math-list span.et-pb-icon {
		font-size: 30px !important;
	}

	.rank-math-answer {
		font-size: 16px;
		padding: 15px 0;
	}

	/* Bergführer-Boxen */
	.pro_bergfuehrer .et_pb_team_member_description {
		padding: 20px;
	}

	/* Individuelle Buchungen: Formular */
	.pro_customform {
		padding: 20px;
		padding-top: 60px;
	}

	/* Checkout: Sidebar/Bestellübersicht */
	.wc-block-checkout__sidebar {
		padding: 15px;
	}

	.wc-block-components-button:not(.is-link),
	.wc-block-components-button.wc-block-cart__submit-button:not(.is-link),
	.wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link) {
		font-size: 18px;
		padding: 16px;
	}

	/* Kurs-Archiv (Fallback-Template ohne Theme Builder) */
	.pak-archive-title {
		font-size: 30px;
	}

	/* Partner-Logos im Footer (Ortovox, Edelrid, Red Chili):
	   nicht auf volle Spaltenbreite laufen lassen */
	.et_pb_section_0_tb_footer .et_pb_image {
		text-align: center;
	}

	.et_pb_section_0_tb_footer .et_pb_image img {
		display: block;
		max-width: 180px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/* ============================================================
   KLEINE GERÄTE (max-width: 479px)
   ============================================================ */

@media (max-width: 479px) {

	.pro_hero h1 {
		font-size: 26px !important;
	}

	h2 {
		font-size: 28px !important;
	}

	/* Hero-Filterleiste noch kompakter */
	.pro_hero .hero-facetbar__label,
	.pro_hero .hero-facetbar select.facetwp-dropdown {
		font-size: 16px;
	}

	/* Zahlungslogos kleiner */
	.pro_payment_logos img {
		max-height: 24px;
	}

	/* Footer-Links: mehr Zeilenabstand für Touch */
	.pro_footerlinks a {
		line-height: 2em;
	}
}