/**
 * mod_openhours_pro - Öffnungszeiten-Modul mit Pro-Funktionen
 * Optik nach dem GPL-Modul mod_itcs_openhours (it-conserv.de),
 * dessen Stil auf einer freien Ressource von littlesnippets.net basiert.
 * ------------------------------------------------------------------------
 * @package     mod_openhours_pro
 * @copyright   2026 hinode-speyer.de
 * @license     GNU/GPLv3 <http://www.gnu.org/licenses/gpl-3.0.de.html>
 * ------------------------------------------------------------------------
 */

.openhours {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	line-height: 1.8em;
	max-width: 310px;
}

/* Umschließt die gefloatete Figure - sonst kollabiert der Container
   und nachfolgende Bereiche verdecken den unteren Rahmen der Box */
div.openhours:after {
	content: "";
	display: table;
	clear: both;
}

.openhours .header,
.openhours table {
	margin: 0;
}

.openhours table {
	width: 100%;
	background: transparent;
}

.openhours tr:hover td {
	background: transparent none repeat scroll 0 0;
}

.openhours table,
.openhours td {
	border: 0;
}

/* Neutralisiert Tabellen-Rahmen, die Templates auf die Zeilen legen
   (sonst entstehen unvollständige Rahmen um die Tabelle) */
.openhours tr {
	border: 0;
}

.openhours td {
	border-bottom: 1px solid;
	padding: 3px 8px;
	text-align: left;
	vertical-align: top;
	width: 50%;
}

.openhours .dopen td,
.openhours tr.dopen:hover td {
	background-color: rgba(230, 245, 180, 0.75);
	color: #333333;
}

.openhours .dclose td,
.openhours tr.dclose:hover td {
	background-color: rgba(255, 200, 200, 0.75);
	color: #333333;
}

.openhours p.dopen {
	color: rgb(50, 150, 50);
}

.openhours p.dclose {
	color: rgb(200, 75, 75);
}

/* ------------------------------------------ */

figure.fig_openhours {
	color: #ffffff;
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	max-width: 310px;
	width: 100%;
	text-align: center;
}

figure.fig_openhours * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.45s ease-in-out;
	transition: all 0.45s ease-in-out;
}

figure.fig_openhours .oh_icon {
	border-radius: 50%;
	color: #ffffff;
	display: inline-block;
	font-size: 40px;
	height: 70px;
	line-height: 66px;
	width: 70px;
	z-index: 1;
	position: relative;
	border: 2px solid #ffffff;
	background: #2980b9;
	text-align: center;
}

figure.fig_openhours .oh_icon svg {
	width: 38px;
	height: 38px;
	vertical-align: middle;
}

figure.fig_openhours figcaption {
	margin-top: -35px;
	color: #cccccc;
	padding: 50px 14px 14px;
	border-radius: 8px;
	background: #333333;
	width: 100%;
}

figure.fig_openhours figcaption > p.oh_status {
	font-weight: 500;
	background: #efefef;
	color: #333333;
	padding: 10px 40px;
	margin: 14px -14px 0 -14px;
	line-height: 1.5rem;
}

figure.fig_openhours h3,
figure.fig_openhours p {
	margin: 0;
}

figure.fig_openhours p {
	font-size: 0.9em;
}

figure.fig_openhours .oh_shopname {
	font-weight: 600;
	font-size: 1em;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

figure.fig_openhours h3 {
	width: 100%;
	display: block;
	margin-bottom: 30px;
	line-height: 2rem;
	color: #cccccc;
	text-transform: uppercase;
	position: relative;
	text-align: center;
	hyphens: auto;
}

figure.fig_openhours h3:after {
	background: #ededed none repeat scroll 0 0;
	content: "";
	height: 1px;
	left: 50%;
	margin-left: -30px;
	bottom: -12px;
	position: absolute;
	width: 60px;
}

figure.fig_openhours:hover .oh_icon {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

/* Mobil: nicht floaten, sondern zentrieren (Container und Box) */
@media (max-width: 767px) {
	div.openhours {
		margin-left: auto;
		margin-right: auto;
	}

	figure.fig_openhours {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Modulklassen-Suffix " oh_center": zentriert die Box auf allen Bildschirmgrößen */
div.openhours.oh_center {
	margin-left: auto;
	margin-right: auto;
}

div.openhours.oh_center figure.fig_openhours {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

/* Hinweise zu abweichenden Öffnungszeiten (Pro) */

.openhours .oh_note_icon {
	color: #f0ad4e;
	cursor: help;
	margin-left: 4px;
	white-space: nowrap;
	display: inline-block;
}

.openhours .oh_note_icon svg {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

figure.fig_openhours .oh_notes {
	margin-top: 12px;
	font-size: 0.85em;
	text-align: left;
}

figure.fig_openhours .oh_notes p.oh_note {
	margin: 2px 0;
	line-height: 1.5em;
}

figure.fig_openhours p.oh_time {
	font-size: 0.75em;
	opacity: 0.7;
	margin-top: 8px;
}

/* Farbvarianten (wie Original: blau, rot, gelb, dunkelblau) */

figure.fig_openhours.blue .oh_icon {
	background: #2980b9;
}

figure.fig_openhours.red .oh_icon {
	background: #c0392b;
}

figure.fig_openhours.yellow .oh_icon {
	background: #e67e22;
}

figure.fig_openhours.navy .oh_icon {
	background: #34495e;
}

figure.fig_openhours:hover.blue figcaption {
	background: #164666;
}

figure.fig_openhours:hover.red figcaption {
	background: #6d2018;
}

figure.fig_openhours:hover.yellow figcaption {
	background: #924d10;
}

figure.fig_openhours:hover.navy figcaption {
	background: #10161c;
}

/* ==========================================================================
   Japanische Stilvorlagen (Pro)
   jp-sumi   = Tusche: warmes Anthrazit mit Vermilion (dunkel)
   jp-sakura = Kirschblüte: warmes Papierweiß mit Rosé (hell)
   jp-washi  = Papier und Matcha: Naturtöne mit Grün (hell)
   jp-aka    = Lackrot: tiefes Rot mit Gold (dunkel)
   jp-yoru   = Nacht: Indigo mit Gold (dunkel)
   ========================================================================== */

figure.fig_openhours.jp-sumi figcaption,
figure.fig_openhours.jp-sakura figcaption,
figure.fig_openhours.jp-washi figcaption,
figure.fig_openhours.jp-aka figcaption,
figure.fig_openhours.jp-yoru figcaption {
	border-radius: 10px;
}

figure.fig_openhours.jp-sumi h3,
figure.fig_openhours.jp-sakura h3,
figure.fig_openhours.jp-washi h3,
figure.fig_openhours.jp-aka h3,
figure.fig_openhours.jp-yoru h3 {
	font-weight: 500;
	font-size: 1.05em;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
}

figure.fig_openhours.jp-sumi h3:after,
figure.fig_openhours.jp-sakura h3:after,
figure.fig_openhours.jp-washi h3:after,
figure.fig_openhours.jp-aka h3:after,
figure.fig_openhours.jp-yoru h3:after {
	height: 2px;
	width: 36px;
	margin-left: -18px;
}

figure.fig_openhours.jp-sumi .oh_shopname,
figure.fig_openhours.jp-sakura .oh_shopname,
figure.fig_openhours.jp-washi .oh_shopname,
figure.fig_openhours.jp-aka .oh_shopname,
figure.fig_openhours.jp-yoru .oh_shopname {
	letter-spacing: 0.12em;
}

/* --- Sumi: Tusche und Vermilion (dunkel) --- */

figure.fig_openhours.jp-sumi .oh_icon {
	background: #d9333f;
	color: #ffffff;
	border-color: #f5efe4;
	box-shadow: 0 0 0 5px rgba(217, 51, 63, 0.18);
}

figure.fig_openhours.jp-sumi figcaption {
	background: #23211e;
	color: #f2ede3;
	border: 1px solid rgba(245, 239, 228, 0.08);
}

figure.fig_openhours.jp-sumi:hover figcaption {
	background: #1c1a18;
}

figure.fig_openhours.jp-sumi h3,
figure.fig_openhours.jp-sumi .oh_shopname {
	color: #e8e2d6;
}

figure.fig_openhours.jp-sumi h3:after {
	background: #d9333f;
}

figure.fig_openhours.jp-sumi td {
	border-bottom-color: rgba(245, 239, 228, 0.1);
}

figure.fig_openhours.jp-sumi table.openhours {
	outline: 1px solid rgba(245, 239, 228, 0.28);
	outline-offset: -1px;
}

figure.fig_openhours.jp-sumi tr.oh_closed td {
	color: #e05a4e;
}

figure.fig_openhours.jp-sumi tr.dopen td {
	background-color: rgba(103, 146, 86, 0.28);
	color: #f2ede3;
}

figure.fig_openhours.jp-sumi tr.dclose td {
	background-color: rgba(217, 51, 63, 0.16);
	color: #f2ede3;
}

figure.fig_openhours.jp-sumi figcaption > p.oh_status {
	background: #efe9dc;
	color: #33302a;
}

figure.fig_openhours.jp-sumi p.oh_status.dopen {
	color: #39734a;
}

figure.fig_openhours.jp-sumi p.oh_status.dclose {
	color: #b2453c;
}

figure.fig_openhours.jp-sumi .oh_note_icon {
	color: #e9c46a;
}

/* --- Sakura: Kirschblüte (hell) --- */

figure.fig_openhours.jp-sakura .oh_icon {
	background: #e88fa2;
	color: #ffffff;
	border-color: #ffffff;
	box-shadow: 0 0 0 5px rgba(232, 143, 162, 0.25);
}

figure.fig_openhours.jp-sakura figcaption {
	background: #fbf6f2;
	color: #4a3f3a;
	border: 1px solid #eaddd3;
}

figure.fig_openhours.jp-sakura:hover figcaption {
	background: #f7efe8;
}

figure.fig_openhours.jp-sakura h3,
figure.fig_openhours.jp-sakura .oh_shopname {
	color: #b0566a;
}

figure.fig_openhours.jp-sakura h3:after {
	background: #e5afbc;
}

figure.fig_openhours.jp-sakura td {
	border-bottom-color: #f0e5dc;
}

figure.fig_openhours.jp-sakura table.openhours {
	outline: 1px solid #eaddd3;
	outline-offset: -1px;
}

figure.fig_openhours.jp-sakura tr.oh_closed td {
	color: #c96f81;
}

figure.fig_openhours.jp-sakura tr.dopen td {
	background-color: #edf3e2;
	color: #3f4a35;
}

figure.fig_openhours.jp-sakura tr.dclose td {
	background-color: #f9e3e8;
	color: #5c3a41;
}

figure.fig_openhours.jp-sakura figcaption > p.oh_status {
	background: #f6e9ec;
	color: #4a3f3a;
}

figure.fig_openhours.jp-sakura p.oh_status.dopen {
	color: #5d7d54;
}

figure.fig_openhours.jp-sakura p.oh_status.dclose {
	color: #b0566a;
}

figure.fig_openhours.jp-sakura .oh_note_icon {
	color: #c96f81;
}

/* --- Washi: Papier und Matcha (hell) --- */

figure.fig_openhours.jp-washi .oh_icon {
	background: #7a8b56;
	color: #ffffff;
	border-color: #ffffff;
	box-shadow: 0 0 0 5px rgba(122, 139, 86, 0.22);
}

figure.fig_openhours.jp-washi figcaption {
	background: #f6f1e7;
	color: #3c3a33;
	border: 1px solid #e6dcc8;
}

figure.fig_openhours.jp-washi:hover figcaption {
	background: #f1ebdd;
}

figure.fig_openhours.jp-washi h3,
figure.fig_openhours.jp-washi .oh_shopname {
	color: #6b7d4f;
}

figure.fig_openhours.jp-washi h3:after {
	background: #b5c295;
}

figure.fig_openhours.jp-washi td {
	border-bottom-color: #e8dfcc;
}

figure.fig_openhours.jp-washi table.openhours {
	outline: 1px solid #e6dcc8;
	outline-offset: -1px;
}

figure.fig_openhours.jp-washi tr.oh_closed td {
	color: #b2453c;
}

figure.fig_openhours.jp-washi tr.dopen td {
	background-color: #e6edd2;
	color: #39442e;
}

figure.fig_openhours.jp-washi tr.dclose td {
	background-color: #f5ddd3;
	color: #5a3630;
}

figure.fig_openhours.jp-washi figcaption > p.oh_status {
	background: #ece4d2;
	color: #3c3a33;
}

figure.fig_openhours.jp-washi p.oh_status.dopen {
	color: #55744c;
}

figure.fig_openhours.jp-washi p.oh_status.dclose {
	color: #a84a3b;
}

figure.fig_openhours.jp-washi .oh_note_icon {
	color: #a8852f;
}

/* --- Aka: Lackrot und Gold (dunkel) --- */

figure.fig_openhours.jp-aka .oh_icon {
	background: #211d1a;
	color: #e9c46a;
	border-color: #e9c46a;
	box-shadow: 0 0 0 5px rgba(233, 196, 106, 0.15);
}

figure.fig_openhours.jp-aka figcaption {
	background: #6d1a1f;
	color: #f7ece2;
	box-shadow: inset 0 0 0 1px rgba(233, 196, 106, 0.35);
}

figure.fig_openhours.jp-aka:hover figcaption {
	background: #5c1519;
}

figure.fig_openhours.jp-aka h3,
figure.fig_openhours.jp-aka .oh_shopname {
	color: #f3d9a4;
}

figure.fig_openhours.jp-aka h3:after {
	background: #e9c46a;
}

figure.fig_openhours.jp-aka td {
	border-bottom-color: rgba(247, 236, 226, 0.15);
}

figure.fig_openhours.jp-aka table.openhours {
	outline: 1px solid rgba(247, 236, 226, 0.45);
	outline-offset: -1px;
}

figure.fig_openhours.jp-aka tr.oh_closed td {
	color: #f5cf9b;
}

figure.fig_openhours.jp-aka tr.dopen td {
	background-color: rgba(233, 196, 106, 0.22);
	color: #fdf4e3;
}

figure.fig_openhours.jp-aka tr.dclose td {
	background-color: rgba(0, 0, 0, 0.3);
	color: #f7d6c8;
}

figure.fig_openhours.jp-aka figcaption > p.oh_status {
	background: #f3e9db;
	color: #3a2b22;
}

figure.fig_openhours.jp-aka p.oh_status.dopen {
	color: #3f7350;
}

figure.fig_openhours.jp-aka p.oh_status.dclose {
	color: #a83232;
}

figure.fig_openhours.jp-aka .oh_note_icon {
	color: #f3d9a4;
}

/* --- Yoru: Indigo und Gold (dunkel) --- */

figure.fig_openhours.jp-yoru .oh_icon {
	background: #0f1722;
	color: #e9c46a;
	border-color: #e9c46a;
	box-shadow: 0 0 0 5px rgba(233, 196, 106, 0.12);
}

figure.fig_openhours.jp-yoru figcaption {
	background: #14202e;
	color: #e8eef5;
	border: 1px solid rgba(233, 196, 106, 0.35);
}

figure.fig_openhours.jp-yoru:hover figcaption {
	background: #101a26;
}

figure.fig_openhours.jp-yoru h3,
figure.fig_openhours.jp-yoru .oh_shopname {
	color: #e9c46a;
}

figure.fig_openhours.jp-yoru h3:after {
	background: #e9c46a;
}

figure.fig_openhours.jp-yoru td {
	border-bottom-color: rgba(232, 238, 245, 0.1);
}

figure.fig_openhours.jp-yoru table.openhours {
	outline: 1px solid rgba(233, 196, 106, 0.35);
	outline-offset: -1px;
}

figure.fig_openhours.jp-yoru tr.oh_closed td {
	color: #e2726d;
}

figure.fig_openhours.jp-yoru tr.dopen td {
	background-color: rgba(134, 207, 151, 0.14);
	color: #e8eef5;
}

figure.fig_openhours.jp-yoru tr.dclose td {
	background-color: rgba(226, 114, 109, 0.14);
	color: #e8eef5;
}

figure.fig_openhours.jp-yoru figcaption > p.oh_status {
	background: #0f1722;
	color: #e8eef5;
	border-top: 1px solid rgba(233, 196, 106, 0.35);
}

figure.fig_openhours.jp-yoru p.oh_status.dopen {
	color: #86cf97;
}

figure.fig_openhours.jp-yoru p.oh_status.dclose {
	color: #e2726d;
}

figure.fig_openhours.jp-yoru .oh_note_icon {
	color: #e9c46a;
}