.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;
	/* #topnav ist position:fixed (siehe dort) und dadurch aus dem Fluss genommen - dieser
	   Abstand entspricht seiner Höhe (75px + 1px Rahmen), damit Sidebar/Content nicht darunter
	   verschwinden (Nutzerwunsch 2026-07-14: Header + linke Navigation sollen nicht mitscrollen). */
	margin-top: 76px;
}
.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);
	/* Bleibt beim Scrollen stehen (Nutzerwunsch 2026-07-14) statt mit .main-content mitzulaufen.
	   position:sticky statt fixed, damit die Breite weiterhin normal im Flex-Layout berechnet
	   wird - die Resize-/Collapse-Logik in belbo-custom.js setzt menu.style.width direkt und
	   bliebe mit position:fixed sonst ohne zusätzliche JS-Anpassung wirkungslos für .main-content. */
	position: sticky;
	top: 76px;
	max-height: calc(100vh - 76px);
	overflow-y: auto;
}
#side-resize-handle {
	width: 4px;
	flex-shrink: 0;
	cursor: col-resize;
	background: #ddd;
	transition: background 0.15s;
	/* Muss mit der jetzt sticky .side-menu mitziehen, sonst verschwindet der Ziehgriff beim
	   Scrollen aus dem sichtbaren Bereich neben der Sidebar (Nutzerwunsch 2026-07-14). */
	position: sticky;
	top: 76px;
	align-self: stretch;
}
#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;
	/* Bleibt beim Scrollen oben stehen (Nutzerwunsch 2026-07-14). z-index über dem mobilen
	   Slide-in-Menü (.side-menu.mobile-open: 1000) und #nav-overlay (999), damit der
	   Hamburger-Button zum Schließen des Menüs weiterhin klickbar/sichtbar bleibt. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1002;
}
/* 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(min(300px, 100%), 1fr));
	margin-bottom: 50px;
}

.tileContainer400 {
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 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 würde vom fixen #topnav (z-index 1002, 76px hoch) überdeckt - der erste
		   Menüpunkt wäre dann unter dem Header versteckt. Menü stattdessen erst unterhalb
		   des Headers beginnen lassen (76px = #zf-head-Höhe + Rahmenlinie, siehe .side-menu
		   oben im Desktop-Layout für dieselbe Konstante). */
		top: 76px;
		left: -240px;
		height: calc(100% - 76px);
		min-height: calc(100% - 76px);
		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%;
	}
	/* #main.wrapper hat mit 2em (28px) mehr horizontales Padding als der Header (20px, siehe
	   #zf-head oben) - auf Mobil fällt der Versatz zum Logo/Header-Rand auffälliger auf als
	   auf Desktop mit Sidebar. Hier auf den Header-Wert angleichen (Nutzerwunsch 2026-07-16). */
	#main.wrapper {
		padding-left: 20px;
		padding-right: 20px;
	}
	#side-resize-handle {
		display: none;
	}
	#sidebar-toggle {
		display: none;
	}
}

/* ---- Frage-Box unterhalb eines Artikels ---- */
.question-cta {
	margin: 32px 0;
	padding: 20px 24px;
	background: #f2f0ec;
	border: 1px solid #e2e0db;
	border-left: 4px solid #9db61d;
	border-radius: 4px;
}
.question-cta-title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	color: #4d4c4c;
}
.question-cta-form {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}
.question-cta-form input[type=text] {
	flex: 1;
	height: 40px;
	box-sizing: border-box;
	border: 1px solid #e2e0db;
	border-radius: 3px;
	padding: 0 12px;
	font-size: 15px;
	background: #fff;
	outline: none;
	font-family: inherit;
}
.question-cta-form input[type=text]:focus {
	border-color: #9db61d;
}
.question-cta-form button[type=submit] {
	height: 40px;
	box-sizing: border-box;
	background: #9db61d;
	background-image: none;
	color: #fff;
	border: none;
	box-shadow: none;
	padding: 0 18px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
}
.question-cta-form button[type=submit]:hover {
	background: #8ba018;
	background-image: none;
}

/* Chat-Verlauf auf der "Frage stellen"-Seite (page-frage.php) - gestellte Frage und KI-Antwort
   jeweils als Sprechblase (Nutzerwunsch), visuell an die RAG-Box auf der Suchergebnisseite
   angelehnt (Farben/Radius wie #rag-section-* Inline-Styles in belbo-rag.php), aber eigenständig
   gepflegt, da diese Seite ein eigenes Template statt der Inline-Ausgabe des Plugins nutzt.
   #frage-chat wird von belbo-custom.js befüllt: pro Frage ein .frage-msg-question- +
   .frage-msg-answer-Block, bei jeder weiteren Frage hängt JS ein neues Paar an (kein Ersetzen). */
#frage-chat-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color: #7a8f16;
	margin-bottom: 10px;
}
#frage-chat {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 10px;
}
.frage-msg {
	display: flex;
	flex-direction: column;
}
.frage-msg-question {
	align-items: flex-end;
}
.frage-msg-answer {
	align-items: flex-start;
}
.frage-bubble {
	max-width: 80%;
	padding: 11px 16px;
	font-size: 14.5px;
	line-height: 1.55;
}
.frage-bubble-question {
	background: #9db61d;
	color: #fff;
	border-radius: 16px 16px 4px 16px;
}
.frage-bubble-answer {
	background: linear-gradient(160deg, #f4f8e4 0%, #fff 65%);
	border: 1px solid #cdd9a0;
	color: #333;
	border-radius: 16px 16px 16px 4px;
	box-shadow: 0 3px 12px rgba(157,182,29,0.10);
}
.frage-answer-loading {
	color: #8a9a40;
	font-style: italic;
}
.frage-answer-body p { margin: 0 0 8px; }
.frage-answer-body p:last-child { margin-bottom: 0; }
.frage-answer-body ul { list-style: disc; margin: 4px 0 8px 18px; padding: 0; }
.frage-answer-body li { margin-bottom: 3px; }
.frage-answer-body strong { font-weight: 600; }
.frage-answer-body .frage-error { color: #888; }
.frage-error-search-link {
	display: inline-block;
	margin-top: 4px;
	color: #2a7fa0;
}
.frage-answer-sources {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 80%;
	margin-top: 6px;
}
.frage-answer-sources a {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #b8d4de;
	border-radius: 4px;
	padding: 6px 10px;
	font-size: 12px;
	color: #2a7fa0;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.frage-answer-sources .rag-source-category {
	flex-shrink: 0;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #7a8f16;
	background: #eef2da;
	border-radius: 3px;
	padding: 2px 6px;
}
.frage-answer-sources .rag-source-title { flex: 1; }
.frage-answer-sources a:hover {
	background: #e6f4f9;
	border-color: #369dbe;
	color: #1a6a8a;
	box-shadow: 0 1px 4px rgba(54,157,190,0.15);
}
#frage-disclaimer {
	margin-bottom: 20px;
	font-size: 11px;
	color: #aaa;
}

/* Artikelbilder als quadratisches Thumbnail mit Doppelrahmen + Klick-zum-Vergrößern (Lightbox).
   Wird komplett per JS aus den bestehenden <img>-Tags aufgebaut (belbo-custom.js) - der
   Artikelinhalt selbst bleibt unverändert. Auf postid-270 (Öffnungszeiten), postid-282
   (Dienstplan erstellen) und postid-295 (Mitarbeiter hinzufügen) fest aktiv; auf jedem anderen
   Artikel per Bild-Schnellersatz-Dialog (belbo-img-swap) einzeln zuschaltbar (Checkbox "Als
   Thumbnail mit Bildunterschrift anzeigen", setzt die Klasse belbo-thumb-view am <img>, siehe
   inc/belbo-img-swap.php). Keine Scoping-Selektoren nötig - .belbo-img-thumb existiert
   ausschließlich dort, wo belbo-custom.js sie tatsächlich aufbaut. */
.belbo-img-thumb {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 4px 12px 4px 0;
	cursor: zoom-in;
}
.belbo-img-thumb-frame {
	width: 195px;
	height: 195px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	padding: 6px;
	/* Doppelrahmen: weißer Innenring (Passepartout) + grauer Außenring, ohne zusätzliches Markup. */
	box-shadow:
		0 0 0 1px #e2e0db,
		0 0 0 5px #fff,
		0 0 0 6px #ccc;
	transition: box-shadow 0.15s;
}
.belbo-img-thumb:hover .belbo-img-thumb-frame {
	box-shadow:
		0 0 0 1px #e2e0db,
		0 0 0 5px #fff,
		0 0 0 6px #9db61d;
}
.belbo-img-thumb-frame img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
}
.belbo-img-thumb-caption {
	font-size: 12px;
	color: #767676;
	text-align: center;
	white-space: nowrap;
}
.belbo-img-thumb-caption .fa {
	margin-right: 4px;
	color: #9db61d;
}

/* Durchnummerierte Klickweg-Schritte, alternierend weiß/grau hinterlegt zur optischen
   Trennung. Gehört zum Scoping oben - bei Bewährung site-weit ausrollen. postid-16231
   (Leitartikel "Belbo lernen") am 2026-07-14 für die "Empfohlene Einrichtungsreihenfolge"
   ergänzt - dort ohne belbo-step-image, da der Artikel keine Schritt-Bilder hat.
   Zusätzlich category-857 ergänzt: derselbe Beitrag wird auch als Leitartikel auf der
   Kategorieseite "Belbo kennenlernen" gerendert (category-belbo-kennenlernen.php); dort
   greift is_singular() nicht, body_class() setzt daher kein postid-16231. postid-16020
   (Angezahlten Termin umbuchen) am 2026-07-27 ergänzt - ebenfalls ohne belbo-step-image. */
.postid-252 .belbo-steps,
.postid-255 .belbo-steps,
.postid-270 .belbo-steps,
.postid-282 .belbo-steps,
.postid-295 .belbo-steps,
.postid-16231 .belbo-steps,
.postid-16020 .belbo-steps,
.category-857 .belbo-steps {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	border: 1px solid #e2e0db;
	border-radius: 4px;
	overflow: hidden;
}
.postid-252 .belbo-step,
.postid-255 .belbo-step,
.postid-270 .belbo-step,
.postid-282 .belbo-step,
.postid-295 .belbo-step,
.postid-16231 .belbo-step,
.postid-16020 .belbo-step,
.category-857 .belbo-step {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin: 0; /* überschreibt core style.css ".entry-content li { margin: 0 0 0 36px }" */
	padding: 16px 20px;
}
.postid-252 .belbo-step:nth-child(odd),
.postid-255 .belbo-step:nth-child(odd),
.postid-270 .belbo-step:nth-child(odd),
.postid-282 .belbo-step:nth-child(odd),
.postid-295 .belbo-step:nth-child(odd),
.postid-16231 .belbo-step:nth-child(odd),
.postid-16020 .belbo-step:nth-child(odd),
.category-857 .belbo-step:nth-child(odd) {
	background: #fff;
}
.postid-252 .belbo-step:nth-child(even),
.postid-255 .belbo-step:nth-child(even),
.postid-270 .belbo-step:nth-child(even),
.postid-282 .belbo-step:nth-child(even),
.postid-295 .belbo-step:nth-child(even),
.postid-16231 .belbo-step:nth-child(even),
.postid-16020 .belbo-step:nth-child(even),
.category-857 .belbo-step:nth-child(even) {
	background: #f2f0ec;
}
.postid-252 .belbo-step + .belbo-step,
.postid-255 .belbo-step + .belbo-step,
.postid-270 .belbo-step + .belbo-step,
.postid-282 .belbo-step + .belbo-step,
.postid-295 .belbo-step + .belbo-step,
.postid-16231 .belbo-step + .belbo-step,
.postid-16020 .belbo-step + .belbo-step,
.category-857 .belbo-step + .belbo-step {
	border-top: 1px solid #e2e0db;
}
.postid-252 .belbo-step-number,
.postid-255 .belbo-step-number,
.postid-270 .belbo-step-number,
.postid-282 .belbo-step-number,
.postid-295 .belbo-step-number,
.postid-16231 .belbo-step-number,
.postid-16020 .belbo-step-number,
.category-857 .belbo-step-number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #9db61d;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}
.postid-252 .belbo-step-text,
.postid-255 .belbo-step-text,
.postid-270 .belbo-step-text,
.postid-282 .belbo-step-text,
.postid-295 .belbo-step-text,
.postid-16231 .belbo-step-text,
.postid-16020 .belbo-step-text,
.category-857 .belbo-step-text {
	flex: 1;
	padding-top: 3px;
}
.postid-252 .belbo-step-image,
.postid-255 .belbo-step-image,
.postid-270 .belbo-step-image,
.postid-282 .belbo-step-image,
.postid-295 .belbo-step-image {
	flex-shrink: 0;
	margin-left: auto;
}
/* Unter 600px (Theme-eigener Mobile-Breakpoint, siehe style.css) quetscht die 195px breite
   Bildminiatur den Schritttext auf einen unbrauchbar schmalen Streifen, da .belbo-step ohne
   flex-wrap in einer Reihe bleibt. Bild rutscht dort per flex-wrap in eine eigene, zentrierte
   Zeile unter den Text statt daneben. */
@media (max-width: 600px) {
	.postid-252 .belbo-step,
	.postid-255 .belbo-step,
	.postid-270 .belbo-step,
	.postid-282 .belbo-step,
	.postid-295 .belbo-step {
		flex-wrap: wrap;
	}
	.postid-252 .belbo-step-image,
	.postid-255 .belbo-step-image,
	.postid-270 .belbo-step-image,
	.postid-282 .belbo-step-image,
	.postid-295 .belbo-step-image {
		flex-basis: 100%;
		margin-left: 0;
		margin-top: 12px;
		display: flex;
		justify-content: center;
	}
}

/* Sperrt das Scrollen der Hintergrundseite, solange die Lightbox offen ist (Klasse wird von
   belbo-custom.js gesetzt/entfernt). Ohne das bleibt der fixe Backdrop beim Scrollen der
   Hintergrundseite teils ungestrichen (Rendering-Lücke am unteren Bildschirmrand, auf Mobil
   beobachtet - klassisches Kompositions-Artefakt bei scrollbarem Inhalt hinter einem
   position:fixed-Overlay). */
html.belbo-lightbox-open,
html.belbo-lightbox-open body {
	overflow: hidden;
}
.belbo-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	cursor: zoom-out;
	padding: 40px;
	box-sizing: border-box;
}
.belbo-lightbox-overlay img {
	/* Screenshots werden in Retina/2x aufgenommen - auf 50% der Viewport-Breite begrenzt,
	   damit sie in etwa in ihrer beabsichtigten (1x-)Größe erscheinen statt überdimensioniert. */
	max-width: 50vw;
	max-height: 90vh;
	border-radius: 3px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
	cursor: zoom-out;
}
/* Unter 600px ist die 50vw-Retina-Logik oben kontraproduktiv: auf einem 380px breiten Phone
   wäre das "vergrößerte" Bild nur ~190px breit - kaum größer als die 195px-Miniatur, die es
   ersetzen soll. Dort stattdessen möglichst viel vom (ohnehin kleinen) Viewport nutzen. */
@media (max-width: 600px) {
	.belbo-lightbox-overlay {
		padding: 16px;
	}
	.belbo-lightbox-overlay img {
		max-width: 100%;
		max-height: 85vh;
	}
}
.belbo-lightbox-close {
	position: fixed;
	top: 16px;
	right: 24px;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	background: none;
	border: none;
	padding: 8px;
}

/* Kategorie-Templates mit Leitartikel + Karten-Grid (z.B. category-ec-terminal-kartenzahlung.php,
   category-drucker-9-hardware-technik.php, category-belbo-kennenlernen.php) */
.leitartikel {
	margin-bottom: 2.5em;
}
/* Leitartikel sind Landingpages für ihre Hauptkategorie - Titel bewusst größer und mit
   dickerer Trennlinie als der reguläre Artikeltitel (.single .entry-header .entry-title
   oben, 30px/2px), da .single dort wegen des Kategorie-Archiv-Body-Class nicht greift
   (Nutzerwunsch 2026-07-16). */
.leitartikel .entry-title {
	font-size: 36px;
	font-size: 2.571428571rem;
	line-height: 1.2;
	font-weight: 700;
	color: #2d3e50;
	padding-bottom: 0.5em;
	border-bottom: 3px solid #e2e0db;
}
@media (max-width: 600px) {
	.leitartikel .entry-title {
		font-size: 24px;
		font-size: 1.714285714rem;
	}
}
/* An .single .article-breadcrumb (Kategorie-Breadcrumb auf normalen Artikelseiten,
   siehe oben) angelehnt statt eigenem Kicker-Stil, auf Nutzerwunsch 2026-07-16. */
.leitartikel-hauptkategorie {
	font-size: 13px;
	color: #888;
	margin: 0 0 0.5em;
}
.leitartikel-hauptkategorie a {
	color: #888;
	text-decoration: none;
}
.leitartikel-hauptkategorie a:hover {
	color: #369dbe;
	text-decoration: underline;
}
.ec-artikel-grid {
	margin-top: 2.5em;
	border-top: 2px solid #e2e0db;
	padding-top: 1.8em;
}
.ec-artikel-grid__titel {
	font-size: 1em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
	margin: 0 0 1em 0;
}
.ec-artikel-grid__karten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.ec-karte {
	display: block;
	background: #fff;
	border: 1px solid #e2e0db;
	border-radius: 5px;
	padding: 16px 18px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s, border-color 0.15s;
}
.ec-karte:hover {
	border-color: #9db61d;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	text-decoration: none;
}
.ec-karte__titel {
	font-weight: 600;
	font-size: 0.95em;
	color: #369dbe;
	margin-bottom: 6px;
	line-height: 1.35;
}
.ec-karte:hover .ec-karte__titel {
	color: #1f8dd6;
}
.ec-karte__excerpt {
	font-size: 0.82em;
	color: #888;
	line-height: 1.45;
}
.entry-content img.belbo-app-badge {
	width: 135px;
	height: auto;
	border-radius: 0;
	box-shadow: none;
}

/* Download-Button (CDN-Downloads, z.B. Satellite-Installer für Mac/Windows) - vorher als
   inline <style>-Block dupliziert im post_content mehrerer Artikel (satellite-unter-macos,
   satellite-unter-windows), am 2026-07-15 hierher ausgelagert. ".main-content a" (Zeile ~329)
   ist per Selektor-Spezifität stärker als ".download" allein und hätte sonst den Linktext auf
   Türkis statt Weiß gezogen - deshalb hier mit dem zusätzlichen ".main-content"-Vorfahren
   referenziert statt mit !important. */
#content img {
	box-shadow: none;
}
.main-content a.download {
	display: block;
	background: #9ab21c 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: #fff;
	font-size: 16px;
	text-decoration: none;
}
.main-content a.download:hover {
	color: #fff;
}
.main-content a.download .download-meta {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.8);
	margin-top: 2px;
}

/* Inhaltsverzeichnis (TOC) am Artikelanfang - manuell pro Artikel eingefügt (kein TOC-Plugin
   installiert), verlinkt auf id-Attribute der jeweiligen Zwischenüberschriften im Artikel.
   Bewusst als h4 + ul (kein umschließendes div/nav) umgesetzt: wpautop() reisst bei
   Roh-HTML-Artikeln sonst Inline-Content, das direkt in einem Block-Tag auf eigener Zeile
   steht, mit fehlerhaften <p>-Tags auseinander. h4/ul sind beides von wpautop erkannte
   Block-Tags, genau wie die übrigen Überschrift+Liste-Paare in diesen Artikeln. */
/* .entry-content h4 (style.css) setzt "margin: 24px 0" mit höherer Selektor-Spezifität
   (Klasse+Element) als eine einzelne Klasse hier - deshalb ".entry-content h4.article-toc-title"
   statt nur ".article-toc-title", sonst gewinnt der 24px-Bottom-Margin und reisst die Box auf. */
.entry-content h4.article-toc-title {
	background: #f2f0ec;
	border: 1px solid #e2e0db;
	border-bottom: none;
	border-radius: 3px 3px 0 0;
	padding: 0.6em 1.2em 0.3em;
	margin: 1em 0 0;
	color: #4d4c4c;
}
ul.article-toc {
	background: #f2f0ec;
	border: 1px solid #e2e0db;
	border-top: none;
	border-radius: 0 0 3px 3px;
	padding: 0.4em 1.2em 0.9em 2.4em;
	margin: 0 0 1.5em;
}
ul.article-toc li {
	margin: 0.25em 0;
}
ul.article-toc a {
	color: #369dbe;
	text-decoration: none;
}
ul.article-toc a:hover {
	text-decoration: underline;
}

/* Kategorie-Breadcrumb + größerer/abgehobener Artikeltitel oberhalb des Contents -
   nur auf Single-Post-Seiten (".single" body class), damit Titel in Archiv-/Suchlisten
   (die dasselbe content.php nutzen) unverändert bleiben. */
.single .article-breadcrumb {
	font-size: 13px;
	color: #888;
	margin: 0 0 0.5em;
}
.single .article-breadcrumb a {
	color: #888;
	text-decoration: none;
}
.single .article-breadcrumb a:hover {
	color: #369dbe;
	text-decoration: underline;
}
.single .article-breadcrumb-sep {
	margin: 0 0.5em;
	color: #ccc;
}

/* Funktions-Badges unter dem Artikeltitel (belbo_funktionen_article_badges(), s.
   belbo-funktionen.php) - verlinken auf die jeweilige /funktion/{slug}/-Übersichtsseite. */
/* Gemeinsamer Zeilen-Container für Funktions- und Rechte-Badges (content.php/content-page.php)
   - beide Gruppen sind als Flex-Items nebeneinander in einer Zeile statt untereinander,
   umbrechen als Ganzes erst, wenn der Platz nicht mehr reicht. Trägt den Außenabstand zum
   Titel, den vorher die einzelnen Badge-Blöcke selbst mitbrachten (jetzt margin:0 dort). */
.belbo-badges-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1em;
	row-gap: 0.3em;
	margin: 1.4em 0 1.2em;
}
.belbo-funktion-badges {
	margin: 0;
	line-height: 2.2;
}
.belbo-funktion-badge-prefix {
	font-weight: 600;
}
.belbo-funktion-badge {
	display: inline-block;
	background: #f2f0ec;
	border: 1px solid #e2e0db;
	border-radius: 999px;
	padding: 0.2em 0.9em;
	margin: 0 0.3em 0.3em 0;
	font-size: 13px;
	color: #369dbe;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Sanfte Tönung statt hartem Vollton-Umschlag (Nutzerwunsch 2026-07-19: "softer" wirken) -
   Hintergrund/Rahmen wandern nur leicht Richtung Akzentfarbe, kein Farb-/Textkontrast-Sprung. */
.belbo-funktion-badge:hover {
	background: #eaf4f7;
	border-color: #a9d4e0;
	color: #1f7a99;
}
.belbo-funktion-badge-parent {
	color: #999;
}
.belbo-funktion-badge-sep {
	color: #ccc;
	margin: 0 0.15em;
}

/* Rechte-Hinweis unter den Funktions-Badges (belbo_rechte_article_notice(), s.
   belbo-rechte.php) - gleiche Pill-Optik, aber im Amber-Warnton statt Teal, damit er sich
   bewusst von den Funktions-Badges absetzt ("Achtung, Berechtigung nötig" statt reiner
   Kategorisierung). Dieselben Amber-Farben wie die bestehende "Übersetzung verzögert"-Box
   in belbo-i18n.php (belbo_i18n_filter_content()), für ein konsistentes Warn-Farbschema. */
.belbo-recht-badges {
	margin: 0;
	line-height: 2.2;
}
.belbo-recht-badge {
	display: inline-block;
	background: #fdf6e3;
	border: 1px solid #e8d9a0;
	border-radius: 999px;
	padding: 0.2em 0.9em;
	margin: 0 0.3em 0.3em 0;
	font-size: 13px;
	color: #8a6d00;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.belbo-recht-badge::before {
	content: "\1F512";
	margin-right: 0.35em;
	font-size: 0.9em;
}
.belbo-recht-badge:hover {
	background: #f7ecc7;
	border-color: #d4ac0d;
	color: #6b5900;
}

/* Funktionsseite (taxonomy-belbo_funktion.php): einfache Linkliste statt Artikel-Kacheln,
   da hier bewusst nur eine kompakte Übersicht "welche Artikel gehören zu dieser Funktion"
   gezeigt wird statt der vollen Teaser-Ansicht wie auf Kategorieseiten. */
.belbo-funktion-article-list,
.belbo-recht-linked-articles {
	list-style: none;
	margin: 0;
	padding: 0;
}
.belbo-funktion-article-list li,
.belbo-recht-linked-articles li {
	border-bottom: 1px solid #e2e0db;
	padding: 0.7em 0;
}
.belbo-funktion-article-list a,
.belbo-recht-linked-articles a {
	color: #369dbe;
	text-decoration: none;
	font-size: 15px;
}
.belbo-funktion-article-list a:hover,
.belbo-recht-linked-articles a:hover {
	text-decoration: underline;
}

/* Funktionsseite im Artikel-Stil (taxonomy-belbo_funktion.php) - dieselbe Titel-Optik wie
   auf normalen Einzelartikeln (".single .entry-header .entry-title" oben), hier aber auf die
   Taxonomie-Archiv-Bodyklasse gemünzt statt ".single", da is_single() hier nicht zutrifft. */
.tax-belbo_funktion .entry-header .entry-title {
	font-size: 30px;
	font-size: 2.142857143rem;
	line-height: 1.25;
	font-weight: 700;
	color: #2d3e50;
	padding-bottom: 0.5em;
	border-bottom: 2px solid #e2e0db;
}
@media (max-width: 600px) {
	.tax-belbo_funktion .entry-header .entry-title {
		font-size: 24px;
		font-size: 1.714285714rem;
	}
}
.belbo-funktion-subline {
	font-size: 1.1em;
	color: #555;
	margin: 1em 0 1.4em;
}
.tax-belbo_funktion .entry-content h2 {
	margin-top: 1.8em;
}

/* Unterreiter-Liste auf der Funktionsseite (belbo_funktionen_render_tab_list_frontend()) -
   Label + Hilfetext + optionaler Verweis auf eine passende Hilfeseite je Unterreiter,
   verschachtelte Unterreiter (subTabs) leicht eingerückt. */
ul.belbo-funktion-tabs {
	list-style: none;
	margin: 0 0 1.6em;
	padding: 0;
}
ul.belbo-funktion-tabs li {
	padding: 0.5em 0;
	border-bottom: 1px solid #eee;
}
ul.belbo-funktion-tabs ul.belbo-funktion-tabs-nested {
	margin: 0.5em 0 0 1.4em;
}
ul.belbo-funktion-tabs ul.belbo-funktion-tabs-nested li {
	border-bottom: none;
	padding: 0.25em 0;
}
.belbo-funktion-tab-label {
	font-weight: 600;
	color: #2d3e50;
	margin-right: 0.5em;
}
.belbo-funktion-tab-help {
	color: #666;
	font-size: 0.92em;
}
.belbo-funktion-tab-link {
	display: inline-block;
	margin-left: 0.4em;
	color: #369dbe;
	text-decoration: none;
	font-size: 0.92em;
	white-space: nowrap;
}
.belbo-funktion-tab-link:hover {
	text-decoration: underline;
}
.belbo-funktion-tab-count {
	display: inline-block;
	margin-left: 0.4em;
	color: #888;
	text-decoration: none;
	font-size: 0.85em;
	white-space: nowrap;
}
.belbo-funktion-tab-count:hover {
	color: #369dbe;
	text-decoration: underline;
}
.single .entry-header .entry-title {
	font-size: 30px;
	font-size: 2.142857143rem;
	line-height: 1.25;
	font-weight: 700;
	color: #2d3e50;
	padding-bottom: 0.5em;
	border-bottom: 2px solid #e2e0db;
}
/* Die feste 30px-Größe oben gilt wegen höherer Selektor-Spezifität auch unterhalb von 600px
   und überschreibt dort core style.css' eigentlich responsive (kleinere) Titelgrößen. */
@media (max-width: 600px) {
	.single .entry-header .entry-title {
		font-size: 24px;
		font-size: 1.714285714rem;
	}
}

/* Artikelliste auf Kategorieseiten als horizontale Kacheln ohne Trennlinie zwischen den
   Artikeln, mit leichtem Hover-Effekt (Nutzerwunsch 2026-07-17). Scoped auf ".category"
   (body class), damit Single-Artikel-Ansicht, Startseite und Suche - die dieselbe content.php
   nutzen - unverändert bleiben. Überschreibt core style.css' ".site-content article"
   (border-bottom + padding/margin), das sonst die Trennlinie zwischen Artikeln zeichnet.
   ":not(.leitartikel)" nimmt den Leitartikel auf Kategorie-Übersichtsseiten (z.B.
   category-dienstplan-uebersicht.php) aus - der ist eine Landingpage-artige Volldarstellung
   und soll auf Nutzerwunsch 2026-07-17 ungerahmt bleiben, nicht als klickbare Kachel wirken. */
.category .site-content article.hentry:not(.leitartikel) {
	border-bottom: none;
	margin-bottom: 16px;
	padding: 24px 28px;
	background: #fff;
	border: 1px solid #e2e0db;
	border-radius: 6px;
	cursor: pointer;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.category .site-content article.hentry:not(.leitartikel):hover {
	border-color: #cfd6b8;
	box-shadow: 0 2px 10px rgba(45, 62, 80, 0.1);
}
.category .site-content article.hentry:not(.leitartikel) .entry-header {
	margin-bottom: 12px;
}
/* Leerer entry-meta-Footer (core content.php gibt ihn auch auf Kategorieseiten aus, obwohl
   twentytwelve_entry_meta() dort per is_category()-Check bereits unterdrückt wird - siehe
   content.php - übrig bleibt nur ggf. der Edit-Link) entfernt sich selbst nicht, reserviert aber
   via core style.css' "margin-top: 24px" weiterhin Platz in der Kachel (Nutzerwunsch 2026-07-17).*/
.category .site-content article.hentry:not(.leitartikel) footer.entry-meta {
	display: none;
}
@media (max-width: 600px) {
	.category .site-content article.hentry:not(.leitartikel) {
		padding: 18px 20px;
	}
}

/* Teaser-Text auf Kategorieseiten bis "Weiterlesen" auf reinen Fließtext reduzieren - keine
   Farben/Rahmen/Fettung/Kursiv/Überschriften-Optik aus Shortcodes (z.B. .omsc-infobox) mehr
   im Kachel-Auszug (Nutzerwunsch 2026-07-17). Nur der Teaser in der Kategorie-Artikelliste ist
   betroffen (".category" + ":not(.leitartikel)"), der Volltext auf der Einzelartikel-Seite
   bleibt unangetastet. !important nötig, da z.B. omsc-infobox seine Optik per Inline-
   "style"-Attribut setzt, das jede normale Klassenregel aussticht. */
.category .site-content article.hentry:not(.leitartikel) .entry-content {
	font-size: 0.82em;
	line-height: 1.45;
}
.category .site-content article.hentry:not(.leitartikel) .entry-content,
.category .site-content article.hentry:not(.leitartikel) .entry-content * {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #888 !important;
	font-weight: normal !important;
	font-style: normal !important;
	text-decoration: none !important;
}
.category .site-content article.hentry:not(.leitartikel) .entry-content h1,
.category .site-content article.hentry:not(.leitartikel) .entry-content h2,
.category .site-content article.hentry:not(.leitartikel) .entry-content h3,
.category .site-content article.hentry:not(.leitartikel) .entry-content h4,
.category .site-content article.hentry:not(.leitartikel) .entry-content h5,
.category .site-content article.hentry:not(.leitartikel) .entry-content h6 {
	display: inline !important;
	font-size: inherit !important;
	margin: 0 !important;
	line-height: inherit !important;
}
.category .site-content article.hentry:not(.leitartikel) .entry-content div {
	display: inline !important;
	padding: 0 !important;
	margin: 0 !important;
}
.category .site-content article.hentry:not(.leitartikel) .entry-content .omsc-infobox-icon {
	display: none !important;
}
/* Abstand unter den Absätzen im Teaser entfernen (core style.css setzt "margin: 0 0 24px" auf
   ".entry-content p") - auf Nutzerwunsch 2026-07-18 sollen mehrere Absätze in der Kachel-
   Vorschau ohne Lücke aneinanderstehen. */
.category .site-content article.hentry:not(.leitartikel) .entry-content p {
	margin: 0 !important;
}

/* "Weiterlesen"-Link: kleiner, blasser, aber fett - und ohne Zeilenumbruch direkt hinter dem
   Text (Nutzerwunsch 2026-07-17). Das eigentliche Verschieben aus dem umgebenden <p> in den
   vorherigen Textblock übernimmt belbo-custom.js, hier nur die Optik. */
.category .site-content article.hentry:not(.leitartikel) .more-link,
.category .site-content article.hentry:not(.leitartikel) .more-link .meta-nav {
	font-size: 12px !important;
	font-size: 0.857142857rem !important;
	font-weight: 700 !important;
	color: #999 !important;
}

/* Bild-Schnellersatz für eingeloggte Admins (siehe belbo-custom.js + inc/belbo-img-swap.php).
   Wrapper sitzt direkt um das <img> herum, unabhängig davon, ob es zusätzlich vom Thumbnail/
   Lightbox-Feature oben umgebaut wurde - deshalb bewusst kein Größen-/Layout-Eingriff hier,
   nur position:relative als Anker fürs absolut positionierte Badge. */
.belbo-img-swap-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
/* Steckt der Wrapper in einem Thumbnail-Rahmen (.belbo-img-thumb-frame, s.o.), bricht sein
   Standard-inline-block (Höhe = Inhalt) die dortige Skalierung: .belbo-img-thumb-frame img
   braucht ein Elternelement mit FESTER Höhe, damit max-height:100% (Prozentwert) überhaupt
   greift - sonst zählt nur noch max-width, das Bild läuft rahmenübergreifend über/unter statt
   quadratisch eingepasst zu werden. Deshalb hier den Wrapper selbst auf die volle Rahmengröße
   strecken und als eigenen Flex-Container zentrieren - identisches Ergebnis wie ohne eingeloggten
   Admin (Bild direkt als Flex-Kind des Rahmens), nur mit einer zusätzlichen Ebene für das Badge. */
.belbo-img-thumb-frame .belbo-img-swap-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.belbo-img-swap-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 13px;
	opacity: 0.55;
	transition: opacity 0.15s, background 0.15s;
}
.belbo-img-swap-wrap:hover .belbo-img-swap-badge,
.belbo-img-swap-badge:focus {
	opacity: 1;
	background: #9db61d;
}

.belbo-img-swap-dialog {
	border: none;
	border-radius: 4px;
	padding: 24px;
	width: min(640px, 90vw);
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.belbo-img-swap-dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}
.belbo-img-swap-dialog h2 {
	margin: 0 0 16px;
	font-size: 18px;
}
.belbo-img-swap-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #767676;
}
.belbo-img-swap-body {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.belbo-img-swap-col {
	flex: 1 1 240px;
	min-width: 0;
}
.belbo-img-swap-label {
	font-size: 12px;
	font-weight: 700;
	color: #767676;
	margin: 0 0 6px;
	text-transform: uppercase;
}
.belbo-img-swap-current-preview,
.belbo-img-swap-new-preview {
	display: block;
	max-width: 100%;
	max-height: 160px;
	border: 1px solid #e2e0db;
	border-radius: 3px;
	background: #fff;
}
.belbo-img-swap-meta {
	margin: 10px 0 0;
	font-size: 12px;
}
.belbo-img-swap-meta > div {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 3px 0;
	border-bottom: 1px solid #eee;
}
.belbo-img-swap-meta dt {
	color: #767676;
	white-space: nowrap;
}
.belbo-img-swap-meta dd {
	margin: 0;
	text-align: right;
	color: #444;
	word-break: break-word;
}
.belbo-img-swap-dropzone {
	border: 2px dashed #ccc;
	border-radius: 4px;
	padding: 14px;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
}
.belbo-img-swap-dropzone.belbo-img-swap-drag-over {
	border-color: #9db61d;
	background: #f7faee;
}
.belbo-img-swap-dropzone-hint {
	font-size: 13px;
	color: #767676;
	margin: 4px 0 10px;
}
.belbo-img-swap-dropzone .button {
	font-size: 12px;
	margin: 2px 4px;
}
.belbo-img-swap-fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 12px;
}
.belbo-img-swap-fields label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	font-weight: 700;
	color: #444;
}
.belbo-img-swap-fields label.belbo-img-swap-checkbox-label {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}
.belbo-img-swap-checkbox-label input[type="checkbox"] {
	flex: 0 0 auto;
}
.belbo-img-swap-fields input,
.belbo-img-swap-fields textarea,
.belbo-img-swap-fields select {
	font-weight: 400;
	font-family: inherit;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
}
.belbo-img-swap-status {
	min-height: 18px;
	font-size: 13px;
	color: #d63638;
	margin: 0 0 12px;
}
.belbo-img-swap-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* Einstellungs-Tabellen (Dialog-Optionen 1:1 als Übersicht, z.B. "Einstellung"/"Beschreibung"),
   verwendet in mehreren Kalendereinstellungen-/Onlinebuchungs-Artikeln. Als Klasse statt Inline-
   Styles umgesetzt (Nutzerwunsch 2026-07-23, nachdem "In Blöcke umwandeln" im Editor sämtliche
   Inline-style-/class-Attribute auf <td>/<tr> verworfen hatte - der Gutenberg-Tabellenblock
   rundet beim Speichern nur Zellinhalt + rowspan/colspan, kein per-Zeile-Styling). Als
   "Zusätzliche CSS-Klasse" am Tabellenblock (Block-Sidebar "Erweitert") setzen, bzw. hier direkt
   auf dem <figure class="wp-block-table belbo-settings-table"> im post_content. Zebra-Streifung
   läuft rein per :nth-child (kein Inline-Style, also block-editor-fest), richtet sich dadurch
   nach der tatsächlichen Zeilenposition und nicht nach der Rubrik-Gruppe - eine rowspan-Zelle
   behält dabei die Farbe ihrer eigenen (ersten) Zeile, während die Beschreibung-Zellen der
   übrigen Gruppenzeilen unabhängig weiteralternieren. */
.belbo-settings-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}
/* Core block-library style.css setzt ".wp-block-table thead { border-bottom: 3px solid }" -
   deutlich dicker/dunkler als die 1px-#ddd-Zellrahmen und dadurch der Grund für die ungleiche
   Strichstärke direkt unter der Kopfzeile (Nutzerwunsch 2026-07-23). */
.belbo-settings-table thead,
.belbo-settings-table tfoot {
	border: none;
}
.belbo-settings-table th,
.belbo-settings-table td {
	padding: 10px 14px;
	border: 1px solid #ddd;
	text-align: left;
	vertical-align: top;
}
.belbo-settings-table th {
	background: #f2f0ec;
	font-weight: 600;
}
/* has-fixed-layout ermittelt die Spaltenbreiten aus der ERSTEN Tabellenzeile - das ist die
   Kopfzeile (thead), nicht die erste tbody-Zeile. Ohne th:first-child griff die Breite bisher
   also gar nicht (Nutzerwunsch 2026-07-23: erste Spalte schmaler). */
.belbo-settings-table th:first-child,
.belbo-settings-table td:first-child {
	width: 16%;
	font-weight: 600;
}
.belbo-settings-table tbody tr:nth-child(even) > td {
	background: #fafafa;
}