/* Jinno2: Metin2CMS-Seiten im Stil der ZeroCMS-Vorlage "guabina" (zero/css/style.css).
   Bootstrap wird vor der Vorlage geladen; hier werden die CMS-Inhalte an die Vorlage angeglichen. */

body.zero { background: #121014; color: #e9e5c9; font-family: 'Open Sans', sans-serif; }
body.zero a:hover { text-decoration: none; }
.z-page a { color: #ff9e13; }
.z-page a:hover { color: #ffbd68; }
body.zero *, body.zero *::before, body.zero *::after { box-sizing: border-box; }

/* Navigation: Sprachauswahl als Aufklappmenue */
#main-menu .z-lang { position: relative; }
#main-menu .z-lang ul { display: none; position: absolute; right: 0; top: 100%; min-width: 140px; margin: 0; padding: 6px 0; list-style: none; background: rgba(18, 16, 20, 0.97); border: 1px solid #ff9e13; z-index: 50; }
#main-menu .z-lang:hover ul, #main-menu .z-lang:focus-within ul { display: block; }
#main-menu .z-lang ul li a { display: block; padding: 6px 14px; color: #e9e5c9; font-size: 13px; }
#main-menu .z-lang ul li a:hover { color: #ff9e13; }


/* Inhalt der CMS-Seiten */
.z-page { color: #e9e5c9; font-size: 14px; line-height: 1.6; padding: 0 30px 30px; }
.z-page .page-hd, .z-page .pre-social { display: none; }
.z-page .container, .z-page .row { width: auto; max-width: 100%; margin-left: 0; margin-right: 0; padding: 0; }
.z-page [class*="col-"] { flex: 1 1 100%; max-width: 100%; margin-left: 0 !important; padding-left: 0; padding-right: 0; }
.z-page h1, .z-page h2, .z-page h3, .z-page h4 { color: #ffbd68; font-weight: 700; }
.z-page h3 { font-size: 18px; }
.z-page hr { border-color: rgba(255, 158, 19, 0.25); }
.z-page label { color: #a29f8a; font-size: 13px; }
.z-page p, .z-page li, .z-page td { color: #e9e5c9; }

.z-page .form-control, .z-page input[type="text"], .z-page input[type="password"], .z-page input[type="email"],
.z-page input[type="number"], .z-page select, .z-page textarea {
	width: 100%; height: auto; min-height: 42px; padding: 10px 14px;
	background: rgba(12, 10, 13, 0.85); color: #e9e5c9;
	border: 1px solid #3a3238; border-radius: 0; box-shadow: none;
}
.z-page .form-control:focus, .z-page input:focus, .z-page select:focus, .z-page textarea:focus { border-color: #ff9e13; outline: none; box-shadow: none; background: rgba(12, 10, 13, 0.95); color: #fff; }
.z-page .form-group { margin-bottom: 14px; }
.z-page .input-group-addon { background: #242025; color: #a29f8a; border: 1px solid #3a3238; border-radius: 0; }

/* Knoepfe wie .all-btn der Vorlage */
.z-page .btn, .z-page input[type="submit"], .z-page button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 30px 2px;
	background: none; color: #e9e5c9; border: 1px solid #ff9e13; border-radius: 0;
	font-family: 'Open Sans', sans-serif; font-size: 15px; cursor: pointer; transition: all 0.2s ease;
}
.z-page .btn:hover, .z-page input[type="submit"]:hover, .z-page button[type="submit"]:hover { background: #ff9e13; color: #121014; }
.z-page .btn-success, .z-page .btn-primary, .z-page input[type="submit"].btn-success { background: #ff9e13; color: #121014; }
.z-page .btn-success:hover, .z-page .btn-primary:hover { background: #ffbd68; border-color: #ffbd68; }
.z-page .btn-danger { border-color: #c0392b; }
.z-page .btn-danger:hover { background: #c0392b; color: #fff; }
.z-page .btn-block { display: flex; width: 100%; }

/* Tabellen wie .all-table */
.z-page table { width: 100%; border-collapse: separate; border-spacing: 0 2px; background: none; }
.z-page table thead th, .z-page table th { padding: 12px 18px; color: #a29f8a; font-size: 13px; border: 0; background: none; white-space: nowrap; }
.z-page table tbody tr { background: rgba(36, 32, 37, 0.9); }
.z-page table td { padding: 14px 18px; border: 0; color: #e9e5c9; vertical-align: middle; }
.z-page table tbody tr:hover { background: rgba(56, 46, 50, 0.95); }
.z-page .table-striped tbody tr:nth-of-type(odd) { background: rgba(36, 32, 37, 0.9); }
.z-page .table-responsive { overflow-x: auto; }

/* Meldungen */
.z-page .alert { border-radius: 0; border: 1px solid; background: rgba(12, 10, 13, 0.85); color: #e9e5c9; }
.z-page .alert-danger { border-color: #c0392b; }
.z-page .alert-success { border-color: #3c9a4f; }
.z-page .alert-info, .z-page .alert-warning { border-color: #ff9e13; }
.z-page .alert .close { color: #e9e5c9; text-shadow: none; opacity: 0.7; }

/* News-Liste und Artikel */
.z-page ul.blogroll { list-style: none; margin: 0; padding: 0; }
.z-page ul.blogroll > li { padding: 18px 20px; margin-bottom: 2px; background: rgba(36, 32, 37, 0.9); }
.z-page .blog-title, .z-page .blog-title a { color: #ffbd68; font-size: 18px; margin: 0 0 6px; }
.z-page .blog-attribution { color: #a29f8a; font-size: 12px; }
.z-page .more a { color: #ff9e13; }
.z-page img { max-width: 100%; height: auto; }

/* Listen und Seitenzahlen */
.z-page .list-group-item { background: rgba(36, 32, 37, 0.9); color: #e9e5c9; border: 0; border-radius: 0; margin-bottom: 2px; }
.z-page .list-group-item:hover { background: rgba(56, 46, 50, 0.95); color: #ffbd68; }
.z-page .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 0; margin: 20px 0 0; }
.z-page .pagination li a, .z-page .pagination li span, .z-page .page-link { background: none; color: #e9e5c9; border: 1px solid #3a3238; border-radius: 0; }
.z-page .pagination li.active a, .z-page .pagination .active .page-link, .z-page .pagination li a:hover { background: #ff9e13; border-color: #ff9e13; color: #121014; }
.z-page .card, .z-page .panel, .z-page .well, .z-page .jumbotron { background: rgba(36, 32, 37, 0.9); border: 0; border-radius: 0; color: #e9e5c9; }
.z-page .tag, .z-page .badge { border-radius: 0; }

/* Seitenleiste: Login-Formular der Vorlage */
.sider .pf-panel .form input[type="text"], .sider .pf-panel .form input[type="password"] { width: 100%; }

/* Startseite: Abschnitt "Ueber" - die Vorlage bekommt ihre Groesse vom YouTube-Iframe (560x315),
   hier steht stattdessen ein Video, darum feste Masse */
.video-section .video-container { flex-wrap: nowrap; justify-content: center; width: min(1060px, calc(100% - 32px)); }
.video-section .video { flex: 0 0 560px; width: 560px; height: 315px; max-width: 560px; overflow: hidden; }
.video-section .video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-section .video canvas { display: block; width: 100%; height: 100%; }
.video-section .video-description { flex: 0 1 460px; width: auto; max-width: 460px; }
@media (max-width: 1000px) {
	.video-section { height: auto; }
	.video-section .video-container { flex-direction: column; flex-wrap: nowrap; }
	.video-section .video { flex: 0 0 auto; width: 100%; max-width: 560px; height: auto; aspect-ratio: 16 / 9; }
	.video-section .video-description { max-width: 100%; }
}

/* Startseite: die drei Startschritte untereinander statt als Slider */
.z-steps { display: flex; flex-direction: column; gap: 2px; background: #120a0a; border-top: 1px solid #292828; }
.z-step { position: relative; min-height: 240px; overflow: hidden; display: flex; align-items: center; }
.z-step-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); transition: transform 0.6s ease; }
.z-step-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 4, 4, 0.92) 0%, rgba(10, 4, 4, 0.7) 45%, rgba(10, 4, 4, 0.25) 100%); }
.z-step:hover .z-step-bg { transform: scale(1.06); }
.z-step-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 30px; width: min(1060px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0; }
.z-step-nr { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; border-radius: 50%; font-size: 42px; font-weight: 800; color: #ffbd68; background: radial-gradient(circle at 50% 40%, #6a1a14, #230707 72%); border: 2px solid #ff9e13; box-shadow: 0 0 0 5px rgba(18, 10, 10, 0.85), 0 0 26px rgba(255, 120, 40, 0.35); text-shadow: 0 2px 6px #000; }
.z-step-text { min-width: 0; }
.z-step-text h2 { margin: 0 0 8px; font-size: 34px; font-weight: 500; color: #ffbd68; text-shadow: 0 0 0.25rem #000, 0 0 0.25rem #000; }
.z-step-text p { margin: 0 0 18px; max-width: 520px; color: #f7f7f7; font-size: 16px; text-shadow: 0 0 0.1875rem #000, 0 0 0.1875rem #000; }
.z-step-text .slider-button {
	display: inline-flex; justify-content: center; width: 270px; padding: 9px 4px 9px 10px;
	font-family: 'Open Sans', sans-serif; font-size: 25px; font-weight: 500; color: #fff; text-decoration: none;
	background: url(../zero/images/bg-button2.webp) center / 100% no-repeat;
	box-shadow: 0 0 15px 0 rgb(0 0 0 / 74%); transition: all 0.3s ease;
}
.z-step-text .slider-button:hover { color: #fff; background-image: url(../zero/images/bg-button2-up.webp); box-shadow: 0 0 18px 0 rgb(0 0 0 / 74%); transform: translateY(-2px); }

@media (max-width: 560px) {
	.z-step-inner { flex-direction: column; text-align: center; gap: 12px; }
	.z-step-text .slider-button { width: 100%; max-width: 270px; font-size: 21px; }
	.z-step-bg::after { background: rgba(10, 4, 4, 0.72); }
}
@media (max-width: 768px) {
	.z-step-inner { gap: 16px; padding: 26px 0; }
	.z-step-nr { width: 58px; height: 58px; font-size: 28px; }
	.z-step-text h2 { font-size: 24px; }
	.z-page { padding: 0 12px 20px; }
	.z-page table td, .z-page table th { padding: 10px; }
}

/* Startseite: Platzhalter, solange es keine Neuigkeiten gibt (statt einer einzelnen kleinen Karte) */
.news.news-empty { width: 1085px; max-width: 92vw; margin: 0 auto; }
.news.news-empty .item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
	padding: 0 24px;
	text-align: center;
	background-size: cover;
	background-position: center 40%;
	border: 1px solid #414141;
	box-shadow: inset 0 0 60px 30px rgb(0 0 0 / 80%);
}
.news.news-empty .item::before { display: none; }
.news.news-empty .news-empty-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 26px;
	letter-spacing: 1px;
	color: #e8b24e;
	text-shadow: 0 0 8px #000, 0 0 8px #000;
}
.news.news-empty .news-empty-sub {
	margin-top: 8px;
	text-transform: none;
	font-size: 15px;
	color: antiquewhite;
	text-shadow: 0 0 6px #000, 0 0 6px #000;
}
@media screen and (max-width: 575px) {
	.news.news-empty { width: 100%; max-width: 100%; }
	.news.news-empty .news-empty-title { font-size: 21px; }
	.news.news-empty .news-empty-sub { font-size: 13px; }
}