/* =========================================================================
   Angebotsseiten im neuen Layout
   Quelle: Projekt Klüger Booking, Angebotsseiten/child-theme/angebot.css
   Alle Regeln greifen nur über die kr-Klassen, alte Angebotsseiten bleiben
   unberührt.
   ========================================================================= */

:root {
	--kr-akzent: #0b9490;
	--kr-dunkel: #0a5f5c;
	--kr-hell: #e7f4f3;
	--kr-grund: #f5f8f7;
	--kr-linie: #e3e9e8;
	--kr-leise: #6b7280;
}

/* Kopf */

.kr-hero {
	position: relative;
}

.kr-hero .kr-hero__label p {
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding-bottom: 0;
	opacity: 0.9;
}

.kr-hero .kr-hero__label {
	margin-bottom: 6px !important;
}

.kr-hero .kr-hero__titel h1,
.kr-hero .kr-hero__label p {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 18px rgba(0, 0, 0, 0.6);
}

.kr-hero .kr-hero__titel h1 {
	line-height: 1.15;
	max-width: 760px;
}

.kr-hero .kr-hero__kurzinfo {
	margin-top: 22px;
}

/* Rahmen mit zwei Spalten */

.kr-angebot h2 {
	color: var(--kr-dunkel);
	font-size: 28px;
	line-height: 1.25;
	padding-bottom: 18px;
}

.kr-angebot h3 {
	color: var(--kr-dunkel);
	font-size: 20px;
	padding-bottom: 10px;
}

.kr-angebot .kr-angebot__haupt > .et_pb_module {
	margin-bottom: 56px;
}

.kr-angebot .kr-angebot__haupt > .kr-abschnitt {
	margin-bottom: 0;
}

.kr-angebot .kr-angebot__seite > .et_pb_module {
	margin-bottom: 24px;
}

/* Die Box mit Terminen und Preisen läuft beim Scrollen mit. Dafür muss die
   Seitenspalte so hoch sein wie die Hauptspalte, daher Flex mit stretch. */

@media (min-width: 981px) {
	.kr-angebot .kr-angebot__reihe {
		display: flex;
		align-items: stretch;
	}

	.kr-angebot .kr-angebot__termine {
		position: sticky;
		top: 32px;
		z-index: 5;
	}

	.admin-bar .kr-angebot .kr-angebot__termine {
		top: 64px;
	}
}

/* Einleitung */

.kr-einleitung .kr-einleitung__titel {
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kr-akzent);
	padding-bottom: 14px;
}

.kr-einleitung .kr-lead {
	border-left: 3px solid var(--kr-akzent);
	padding: 2px 0 2px 22px;
	margin-bottom: 22px;
	font-size: 20px;
	line-height: 1.55;
	color: #222;
}

.kr-einleitung p {
	font-size: 16px;
	line-height: 1.7;
}

/* Highlights als Kacheln */

.et_pb_text.kr-highlights ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.kr-highlights li {
	position: relative;
	background: #fff;
	border: 1px solid var(--kr-linie);
	border-radius: 6px;
	padding: 14px 16px 14px 46px;
	font-size: 15px;
	line-height: 1.5;
}

.kr-highlights li::before,
.kr-liste li::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 16px;
	width: 18px;
	height: 18px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b9490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	.et_pb_text.kr-highlights ul {
		grid-template-columns: 1fr;
	}
}

/* Zeitleiste (Divi Pixel Timeline) */

.kr-verlauf .dipi_timeline_item_card,
.kr-verlauf .dipi-timeline-item-card {
	background: transparent !important;
	box-shadow: none !important;
	padding-top: 0 !important;
}

.kr-verlauf .dipi-timeline-item-ribbon-text,
.kr-verlauf .dipi_timeline_item_ribbon_text {
	color: var(--kr-akzent);
	font-size: 12px;
	letter-spacing: 0.06em;
}

.kr-verlauf h4,
.kr-verlauf .dipi-timeline-item-title {
	color: var(--kr-dunkel);
	font-size: 20px;
	line-height: 1.3;
}

.kr-verlauf p {
	font-size: 15px;
	line-height: 1.7;
}

.kr-verlauf img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
}

/* Bild unter den Tagestext statt darüber */
.kr-verlauf .dipi_timeline_item_card {
	display: flex !important;
	flex-direction: column;
}

.kr-verlauf .dipi_timeline_item_image {
	order: 2;
	margin: 18px 0 0 !important;
}

/* Tagesangabe als kleine Zeile über dem Titel; die zweite Ausgabe ausserhalb
   der Karte ist fuer gemischte Layouts gedacht und wird hier nicht gebraucht */
.kr-verlauf .dipi_timeline_item_container > .dipi_timeline_ribbon {
	display: none !important;
}

.kr-verlauf .dipi_timeline_item_content .dipi_timeline_ribbon {
	color: var(--kr-akzent) !important;
	font-size: 12px !important;
	letter-spacing: 0.06em;
	text-transform: none;
	padding: 0 0 4px !important;
	background: none !important;
}

/* Punkte statt Plus-Kreise auf der Linie */
.kr-verlauf .ribbon-icon {
	font-size: 0 !important;
	width: 16px !important;
	height: 16px !important;
	line-height: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 2px solid var(--kr-akzent) !important;
	border-radius: 50% !important;
}

/* Punkt auf Hoehe der Tagesueberschrift statt mittig neben dem Eintrag */
.kr-verlauf .dipi_timeline_item_container {
	align-items: flex-start !important;
}

.kr-verlauf .ribbon-icon-wrap {
	margin-top: 22px !important;
}

.kr-verlauf .ribbon-icon.active {
	background: var(--kr-akzent) !important;
}

.kr-verlauf .dipi-timeline-line {
	border-color: var(--kr-linie) !important;
	background-color: var(--kr-linie) !important;
}

.kr-verlauf .dipi-timeline-line__active {
	border-color: var(--kr-akzent) !important;
	background-color: var(--kr-akzent) !important;
}

/* Karten: Leistungen, Hinweise, Bitte mitbringen, Guide, Unterkunft */

.et_pb_text.kr-karte {
	background: #fff;
	border: 1px solid var(--kr-linie);
	border-radius: 6px;
	padding: 26px 28px;
}

.kr-karte h3 + ul,
.kr-karte h3 + p {
	margin-top: 4px;
}

.kr-karte ul + h3,
.kr-karte p + h3 {
	margin-top: 22px;
}

.et_pb_text.kr-liste ul {
	list-style: none !important;
	padding: 0 !important;
}

.kr-liste li {
	position: relative;
	padding: 5px 0 5px 30px;
	font-size: 15px;
	line-height: 1.5;
}

.kr-liste li::before {
	left: 0;
	top: 7px;
}

.kr-liste ul.kr-nicht li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}

.et_pb_text.kr-hinweis {
	background: var(--kr-hell);
	border-color: transparent;
}

.kr-hinweis p {
	font-size: 15px;
	line-height: 1.65;
}

.kr-guide .kr-guide__label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kr-akzent);
	padding-bottom: 12px;
}

.kr-guide .et_pb_text_inner::after {
	content: "";
	display: block;
	clear: both;
}

.kr-guide .kr-guide__bild {
	float: left;
	width: 38%;
	margin: 0 28px 12px 0;
	padding-bottom: 0;
}

.kr-guide img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 4px;
}

@media (max-width: 767px) {
	.kr-guide .kr-guide__bild {
		float: none;
		width: 100%;
		margin: 0 0 16px;
	}

	.kr-guide img {
		aspect-ratio: 4 / 3;
	}
}

.kr-guide p {
	font-size: 14px;
	line-height: 1.6;
}

/* "Das könnte Ihnen auch gefallen" (Divi Toolbox) hängt sich an den
   Beitragsinhalt. Der läuft im neuen Layout über die volle Breite, der
   Bereich soll aber so breit bleiben wie der Inhalt. */
.kr-hero ~ .et_pb_section .dtb-related-posts {
	width: 90%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Impressionen */

.kr-impressionen img {
	border-radius: 6px;
}