/**
 * Apfelhof Extras
 * Ergänzungen zum Plugin suits-apfelhof (Galerie auf den Wohnungsseiten, Filter auf /ferienwohnungen/).
 * Wird nach dem Plugin-CSS geladen.
 */

/* GALERIE WOHNUNGSSEITE */

/* Pfeile innerhalb des großen Bildes (Slick setzt sie sonst außerhalb, wo overflow:hidden sie abschneidet).
   Der Button selbst ist die 44px-Tippfläche und bleibt transparent; sichtbar ist der 34px-Kreis (:after). */
.suitSingle .suitMainSlider .slick-arrow,
.suitSingle .suitMainSlider .slick-arrow:hover,
.suitSingle .suitMainSlider .slick-arrow:focus {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #ffffff;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.suitSingle .suitMainSlider .slick-arrow { opacity: 0.9; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
.suitSingle .suitMainSlider .slick-arrow:hover,
.suitSingle .suitMainSlider .slick-arrow:focus { opacity: 1; }
.suitSingle .suitMainSlider .slick-arrow:focus { outline: none; }

.suitSingle .suitMainSlider .slick-prev { left: 6px; right: auto; }
.suitSingle .suitMainSlider .slick-next { right: 6px; left: auto; }

/* Sichtbarer Kreis */
.suitSingle .suitMainSlider .slick-arrow:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: #860E1A;
	box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.suitSingle .suitMainSlider .slick-arrow:focus-visible:after { box-shadow: 0 0 0 2px #860E1A, 0 0 0 4px #ffffff; }

/* Pfeilspitze als Winkel statt Slick-Schriftzeichen, über dem Kreis */
.suitSingle .suitMainSlider .slick-arrow:before,
.suitSingle .suitMainSlider .slick-arrow:hover:before,
.suitSingle .suitMainSlider .slick-arrow:focus:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 8px;
	height: 8px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	opacity: 1;
	font-family: inherit;
}
.suitSingle .suitMainSlider .slick-prev:before { -webkit-transform: translate(-30%, -50%) rotate(135deg); transform: translate(-30%, -50%) rotate(135deg); }
.suitSingle .suitMainSlider .slick-next:before { -webkit-transform: translate(-70%, -50%) rotate(-45deg); transform: translate(-70%, -50%) rotate(-45deg); }

/* Aktives Vorschaubild markieren (die Slides sind die .suitimagesmall selbst) */
.suitSingle .suitMainsubSlider .suitimagesmall { cursor: pointer; opacity: 0.6; -webkit-transition: opacity 0.2s, box-shadow 0.2s; transition: opacity 0.2s, box-shadow 0.2s; }
.suitSingle .suitMainsubSlider .suitimagesmall.slick-current { opacity: 1; box-shadow: inset 0 0 0 3px #860E1A; }

@media (hover: hover) {
	.suitSingle .suitMainsubSlider .suitimagesmall:hover { opacity: 1; }
}

/* Leerer Buchungsskript-Block: Das Plugin gibt <div class="suitBookingScript"></div> auch ohne Inhalt aus,
   sein CSS macht daraus einen weißen 60px-Block. Nur wenn er wirklich leer ist (:empty) ausblenden;
   ist ein Skript eingetragen, erscheint er unverändert. Der untere Abstand von 20px bleibt erhalten,
   damit mobil die rechte Spalte nicht direkt an der Bildreihe klebt. */
.suitSingle .suitContentLeft .suitBookingScript:empty {
	height: 0;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: transparent;
}

/* FILTER ÜBERSICHT */

/* Hinweis bei aktivem Haus-Filter (?haus=…).
   #page-container: Divi setzt sonst per p:not(.has-background):last-of-type das untere Polster auf 0.
   Gleiches Polster oben und unten zentriert den Text vertikal und lässt ihn als Fließtext sauber umbrechen. */
.apfelhof-house-notice,
#page-container .apfelhof-house-notice {
	margin: 15px 0 25px;
	padding: 16px 20px;
	border-left: 4px solid #860E1A;
	border-radius: 4px;
	background: #ffffff;
	color: #555555;
	font-size: 16px;
	line-height: 1.5;
	overflow-wrap: break-word;
}
.apfelhof-house-notice strong { color: #860E1A; }
.apfelhof-house-notice a { color: #860E1A; text-decoration: underline; white-space: nowrap; }

@media only screen and (max-width: 480px) {
	.apfelhof-house-notice,
	#page-container .apfelhof-house-notice { padding: 14px 16px; font-size: 15px; }
}

/* SCHRIFTKONTRAST */

/* Fließtext etwas dunkler als bisher (Divi #666, Module und Plugin #707070), aber nicht schwarz.
   #555555: Kontrast 7,5:1 auf Weiß, 6,7:1 auf dem Beige #F7F2EB */
#page-container { color: #555555; }

/* Wohnungsliste /ferienwohnungen/ (Plugin setzt #707070, teils mit !important) */
#page-container .suitsOverview > ul > li { color: #555555 !important; }
#page-container .suitsOverview > ul > li .suits_person,
#page-container .suitsOverview > ul > li .suits_size,
#page-container .suitsOverview > ul > li .suits_price,
#page-container .suitsOverview > ul > li .suits_night { color: #555555; }

/* Eingaben im Kontaktformular (style.css: #B9B9B9, kaum lesbar). Nur Textfelder – der Senden-Button bleibt weiß */
#page-container form.wpcf7-form input:not([type="submit"]):not([type="button"]):not([type="reset"]),
#page-container form.wpcf7-form select,
#page-container form.wpcf7-form textarea { color: #555555; }

/* Divi-Textmodule mit hellgrauer Schrift aus den Modul-Einstellungen: Klasse setzt js/apfelhof-extras.js.
   "-hell" = sehr helles Grau (z. B. Datumsangaben), bleibt dezenter als der Fließtext. */
#page-container .et_pb_text.apfelhof-text-kontrast { color: #555555 !important; }
#page-container .et_pb_text.apfelhof-text-kontrast-hell { color: #6b6b6b !important; }