.booking tr:first-child {
	border-bottom: 1px solid black;
}

.combinationTiles {
	gap: 10px;
}

.combinationTiles figure {
	width: 300px;
}

.account {
	border: 1px solid #CCC;
	padding: 2px;
	border-radius: 2px;
	background-color: #DDD;
}
.hide {
display: none;
}
.navigation-split {
	display: flex;
	flex-direction: row;
}
.main-content {
	flex: 1;
	background: #fff;
}
.side-menu {
	background: #F0F4F6;
	width: 230px;
	flex-shrink: 0;
	/* 76px = neue #zf-head-Höhe (75px) + #topnav-Rahmenlinie (1px), nachgezogen seit der
	   Header-Padding-Angleichung an belbo.com (2026-07-13, vorher 52px+1px=53px≈60px). */
	min-height: calc(100vh - 76px);
}
#side-resize-handle {
	width: 4px;
	flex-shrink: 0;
	cursor: col-resize;
	background: #ddd;
	transition: background 0.15s;
}
#side-resize-handle:hover,
#side-resize-handle.dragging {
	background: #9db61d;
}
.side-menu > ul {
	list-style: none;
	margin: 0;
	padding: 8px 0 24px;
}
.side-menu > ul > li.nav-overview a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #4d4c4c;
	text-decoration: none;
	border-bottom: 1px solid #ddd;
	margin-bottom: 6px;
}
.side-menu > ul > li.nav-overview a:hover {
	background: rgba(0,0,0,0.07);
	color: #9db61d;
}
.nav-main {
	margin: 0;
}
.nav-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 9px 14px;
	background: none;
	border: none;
	border-bottom: 1px solid #e2e0db;
	text-align: left;
	cursor: pointer;
	font-size: 11.5px;
	font-weight: 700;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	outline: none;
	-webkit-appearance: none;
}
.nav-toggle:hover {
	background: rgba(0,0,0,0.07);
	color: #4d4c4c;
}
.nav-toggle .fa {
	font-size: 11px;
	color: #bbb;
	flex-shrink: 0;
}
.nav-main.open > .nav-toggle {
	color: #7a8f16;
	background: #eaedda;
}
.nav-main.open > .nav-toggle .fa {
	color: #9db61d;
	transform: rotate(90deg);
}
.nav-sub {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	display: none;
	background: #F0F4F6;
}
.nav-main.open > .nav-sub {
	display: block;
}
.nav-sub li a {
	display: block;
	padding: 7px 14px 7px 22px;
	font-size: 14px;
	color: #4d4c4c;
	text-decoration: none;
	border-left: 2px solid transparent;
}
.nav-sub li a:hover {
	background: rgba(0,0,0,0.07);
	color: #333;
	border-left-color: #9db61d;
}
.nav-sub li.current-cat > a {
	background: #e4e9cc;
	color: #5a6a0e;
	border-left-color: #9db61d;
	font-weight: 600;
}

/* ---- Layout ---- */
/* html+body-Hintergrund = Footer-Farbe, damit iOS-Safari-Overscroll (Bounce) ober-/unterhalb
   des Inhalts nicht weiß/beige aufblitzt, sondern nahtlos in derselben Farbe weitergeht wie
   #colophon. Live getestet (2026-07-13): html allein reichte auf iPhone/Safari nicht - der
   Bounce-Bereich zeigte weiterhin body's eigene Farbe (#f2f0ec), nicht html's - deshalb beide
   auf denselben Wert gesetzt statt nur html. Unschädlich für die normale Ansicht, da body's
   Hintergrund durch #topnav/#page (beide weiß) ohnehin überall abgedeckt ist und nirgends
   sichtbar durchscheint.
*/
html,
body {
	background-color: #252f31;
}
body {
	color: #4d4c4c;
}
#topnav {
	background: #fff;
	background-image: none;
	height: auto;
	border-bottom: 1px solid #e2e0db;
}
/* Padding/Höhe an belbo.com angeglichen (Nutzerwunsch 2026-07-13): dortiges Standard-Header-
   Padding ist 5px 20px bei 75px Höhe (.pure-menu-heading/.sized-content) - das Shrink-on-
   Scroll-Verhalten (header.smaller, JS-gesteuert auf 50px) wird hier bewusst nicht
   nachgebaut, nur das statische Grundmaß. */
#zf-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: none;
	margin: 0;
	padding: 5px 20px;
	height: 75px;
	box-sizing: border-box;
}
#zf-logo {
	display: flex;
	align-items: center;
	padding-top: 0;
	flex-shrink: 0;
}

/* ---- Hamburger (default hidden, shown via media query below) ---- */
#nav-hamburger {
	display: none;
	background: none;
	background-image: none;
	border: none;
	box-shadow: none;
	cursor: pointer;
	padding: 4px 8px;
	margin-right: 4px;
	color: #4d4c4c;
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

/* ---- Mobile search toggle (default hidden, shown via media query below) ----
   Auf Mobil ersetzt dieser Button das sonst permanent sichtbare Sucheingabefeld - erst per
   Klick wird #header-search eingeblendet (siehe belbo-custom.js). Auf Desktop bleibt das
   Eingabefeld wie bisher dauerhaft sichtbar, dieser Button bleibt dort unsichtbar. */
#search-toggle {
	display: none;
	background: none;
	background-image: none;
	border: none;
	box-shadow: none;
	cursor: pointer;
	padding: 4px 8px;
	color: #4d4c4c;
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

/* ---- Sidebar collapse toggle ---- */
#sidebar-toggle {
	display: flex;
	align-items: center;
	background: none;
	background-image: none;
	border: none;
	box-shadow: none;
	cursor: pointer;
	padding: 4px 8px;
	color: #aaa;
	font-size: 15px;
	line-height: 1;
	flex-shrink: 0;
}
#sidebar-toggle:hover {
	color: #9db61d;
}
.side-menu.transitioning {
	transition: width 0.25s ease;
	overflow: hidden;
}

/* ---- Header Search ---- */
#header-search {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	max-width: 400px;
	margin-left: auto;
}
#header-search input[type=text] {
	flex: 1;
	height: 34px;
	box-sizing: border-box;
	border: 1px solid #e2e0db;
	border-radius: 3px;
	padding: 0 12px;
	font-size: 16px;
	background: #f2f0ec;
	outline: none;
	font-family: inherit;
}
#header-search input[type=text]:focus {
	border-color: #9db61d;
	background: #fff;
}
#header-search button[type=submit] {
	height: 34px;
	box-sizing: border-box;
	background: #9db61d;
	background-image: none;
	color: #fff;
	border: none;
	box-shadow: none;
	padding: 0 13px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 14px;
	line-height: 34px;
}
#header-search button[type=submit]:hover {
	background: #8ba018;
	background-image: none;
}
#nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.35);
	z-index: 999;
}
#nav-overlay.active {
	display: block;
}
#page.hfeed.site {
	background: #fff;
	padding: 0;
}
#main.wrapper {
	padding: 1.5em 2em;
	max-width: none;
}
.site-content {
	margin-top: 0;
}
.main-content a {
	color: #369dbe;
}
.main-content a:hover {
	color: #1f8dd6;
}
footer[role="contentinfo"],
#colophon {
	background: #252f31;
	background-image: none;
	color: rgba(255,255,255,0.6);
	border-top: none;
	max-width: none;
	margin: 0;
	padding: 0;
}
#colophon a,
footer[role="contentinfo"] a {
	color: #9db61d;
}
#colophon a:hover,
footer[role="contentinfo"] a:hover {
	color: #b5d423;
}
.footer-text {
	padding: 14px 20px;
	font-size: 13px;
}

/* ---- Article step screenshots ---- */
.step-screenshot {
	display: block !important;
	max-width: 640px !important;
	width: 100% !important;
	height: auto !important;
	margin: 10px 0 4px;
	border: 1px solid #e2e0db;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* ---- Vormals WP-Customizer "Zusaetzliches CSS" (wp_posts.ID=14201, post_type=custom_css) ----
   Externalisiert am 2026-07-13, aus demselben Grund wie der Rest dieser Datei: wurde bisher als
   separater Inline-<style id="wp-custom-css">-Block bei jedem Seitenaufruf per wp_head() neu
   mitgeschickt statt vom Browser gecacht zu werden. Die Customizer-Einstellung selbst wurde
   geleert (wp_posts.ID=14201 auf leeren post_content gesetzt), damit WordPress den Block nicht
   mehr zusaetzlich ausgibt - Aenderungen an diesem Abschnitt kuenftig direkt hier vornehmen,
   nicht mehr ueber Customizer -> Zusaetzliches CSS. ---- */

.tileContainer300 { 
  display: grid; 
  grid-gap: 25px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	margin-bottom: 50px;
}

.tileContainer400 { 
  display: grid; 
  grid-gap: 25px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	margin-bottom: 50px;
}


/* Main Category */

.categoryTile {
	background-color: #F0F4F6;
	border-radius: 5px;
}

.categoryTile p {
   margin: 15px 20px;
}

.categoryTile h3 {
	margin-bottom: 5px;
	font-size: 18px;
	margin: 16px 20px;
}

.categoryTile a {
	text-decoration: none;
}

.tileTitle {
	font-size: 18px;
	font-weight: bold;
	background: url('https://cdn.belbo.com/office/assets/icons/db_staff.png') no-repeat;
	  background-size: 23px;
		background-position: 0 2px; 
    padding-left: 30px;
	margin: 20px 0 7px 20px; !important;
	}

.main-content .tileTitle a {
	color: #444;
	text-decoration: none;
	}

.main-content .tileTitle a:hover {
	text-decoration: underline;
	}

.moreButton {
		background-color: #fff;
		border-radius: 5px;
	  padding: 4px 10px;
  	display: inline-block;
	  margin-bottom: 6px;
	  color: #359EBD;
	  text-decoration: none;
  }

.moreButton a {
	color: white;
	text-decoration: none;
	}

.moreButton:hover {
	transition: 0.2s;
  color: #359EBD;
	text-decoration: underline;
  box-shadow: 0px 1px 4px #bbb;
}


/* Sub Category */

.main-content .subCategoryTile {
		background: #3D4446 url('/wp-content/uploads/2022/12/arrowBlue.png') no-repeat;
	background-position: 95% 50%;
    text-align: left	;
		padding: 12px 20px 13px 20px;
	border-radius: 5px;
	color: white;
	font-size: 16px;
	text-decoration: none;
  display: block;
  }

.main-content .subCategoryTile:hover {
	background-color: #435459;
	color: white;
	font-size: 16px;
	text-decoration: underline;
	}

/* Teasers */

.main-content .teaserTitle {
  color: white;
	font-size: 22px;
	font-weight: bold;
	margin: 0 !important;
	padding: 12px 20px;
	}

.main-content .teaserTitle a {
  color: white;
	}

.teaserText {
  color: white;
	font-size: 16px;
	line-height: 22px !important;
	margin-top: 0 !important;
	}

.main-content .teaserText a {
  color: white;
	}


.teaserHead {
	border-radius: 5px 5px 0 0;
	}

.teaserGradient01 {
background: linear-gradient(90deg, rgba(60,159,185,1) 0%, rgba(92,168,154,1) 100%);
}

.teaserGradient02 {
background: linear-gradient(90deg, rgba(95,168,151,1) 0%, rgba(129,177,103,1) 100%);
}

.teaserGradient03 {
background: linear-gradient(90deg, rgba(132,178,99,1) 0%, rgba(156,182,36,1) 100%);
}
	
.chatTeaser {
	background-image: url('/wp-content/uploads/2022/12/icon-chat.png');
	background-repeat: no-repeat;
	background-position: 20px 50%; 
  padding: 18px 20px 5px 70px;
	}

.chatTeaser h3 {
   margin: 0 20px !important;
	}

.chatTeaser p {
   margin: 5px 20px 15px !important;
	}

/* ---- Mobile ----
   Bewusst als letzter Block in der Datei: #header-search wird weiter oben (Abschnitt
   "Header Search") unconditional auf display:flex gesetzt - stand diese Media Query vor jenem
   Block, gewann bei gleicher Spezifität die spätere, nicht an eine Media Query gebundene Regel
   und überschrieb display:none auch auf Mobilgeräten (live auf iPhone beobachtet, 2026-07-13:
   Suchfeld blieb trotz dieser Regeln sichtbar). Als letzter Block in der Kaskade gewinnt dieser
   jetzt zuverlässig. */
@media (max-width: 768px) {
	/* Reihenfolge in der ersten Zeile: Logo links, Such-Icon + Hamburger rechts (Nutzerwunsch
	   2026-07-13) - DOM-Reihenfolge bleibt unverändert, nur visuell per flex order getauscht. */
	#zf-logo {
		order: 1;
	}
	#search-toggle {
		order: 2;
		display: flex;
		align-items: center;
	}
	#nav-hamburger {
		order: 3;
		display: flex;
		align-items: center;
	}
	#zf-head {
		flex-wrap: wrap;
		/* min-height statt fixer height: belbo.com nutzt 75px als Basismaß (gilt dort auch
		   mobil, kein eigener Mobile-Override in deren CSS gefunden). Kein eigenes
		   align-content mehr (2026-07-13 kurzzeitig auf flex-start gesetzt, dafür gedacht,
		   dass die Zeile bei offener Suche wächst - der Ansatz wurde verworfen, siehe
		   .search-active weiter unten; flex-start schob den Inhalt danach nur noch an den
		   oberen Rand statt ihn vertikal zu zentrieren). Default (stretch) + align-items:center
		   auf der einzeiligen Inhaltszeile zentriert wieder korrekt. */
		min-height: 75px;
		padding: 5px 20px;
		gap: 8px;
	}
	/* Sucheingabefeld ist auf Mobil standardmäßig ausgeblendet, erst per Klick auf
	   #search-toggle eingeblendet (Klasse .search-open, siehe belbo-custom.js). */
	#header-search {
		order: 4;
		display: none;
		max-width: none;
		margin-left: 0;
	}
	/* Bei offener Suche übernimmt sie die ganze Zeile neben dem (jetzt als Schließen-Button
	   dienenden) #search-toggle - Logo und Hamburger werden ausgeblendet, statt den Header
	   wachsen zu lassen (Nutzerwunsch 2026-07-13, nachdem der Wachsen-Ansatz auf dem
	   Testgerät nicht zuverlässig funktionierte). Klasse .search-active sitzt auf #zf-head,
	   von belbo-custom.js gesetzt (kein CSS :has() nötig). */
	#zf-head.search-active #zf-logo,
	#zf-head.search-active #nav-hamburger {
		display: none;
	}
	#header-search.search-open {
		display: flex;
		flex: 1;
	}
	.side-menu {
		position: fixed;
		top: 0;
		left: -240px;
		height: 100%;
		min-height: 100%;
		z-index: 1000;
		overflow-y: auto;
		box-shadow: 2px 0 12px rgba(0,0,0,0.15);
	}
	.side-menu.mobile-open {
		left: 0;
	}
	.navigation-split {
		display: block;
	}
	.main-content {
		width: 100%;
	}
	#side-resize-handle {
		display: none;
	}
	#sidebar-toggle {
		display: none;
	}
}