/**
 * =============================================================
 * @package		RAXO Columns Module Layout
 * -------------------------------------------------------------
 * @copyright	Copyright (C) 2009-2025 RAXO Group
 * @link		https://www.raxo.org
 * @license		RAXO Commercial License
 * 				This file is forbidden for redistribution
 * ============================ N E W ================================
 */


/* ----- RESET & DEFAULT Styles ----- */
.raxo-columns {
	container: raxo-columns / inline-size;
	margin-block: 2rem;
	box-sizing: border-box;
	word-break: break-word;
}
	.raxo-columns:first-child {margin-block-start: 0;}
	/* .raxo-columns:last-child  {margin-block-end: 0;} */
	.raxo-columns ::before, .raxo-columns ::after,
	.raxo-columns * {box-sizing: inherit; }

.raxo-columns article,
.raxo-columns h3,
.raxo-columns h4,
.raxo-columns img,
.raxo-columns a {
	margin: 0; padding: 0;
	background: transparent none;
	border: 0 none;
}
.raxo-columns a {
	color: var(--raxo-theme-color) !important;
	text-decoration: none transparent;
	transition: all .25s ease-out;
	outline: 0;
}
	.raxo-columns a:hover {
		color: #000000 !important;
		background: transparent none;
	}




/* ----- LAYOUT Settings ----- */
.raxo-columns {
	--top-font-size: 16px;
	--nor-font-size: 14px;

	/* image settings (set 0px to disable) */
	/*--image-border: 2px;*/
	/*--image-spacing: 4px;*/		/* use the range 0px - 24px */
}



/* ----- Module BLOCK ----- */
.raxo-columns {
	margin: 0px 0 0px;
}

/* --- Block NAME --- */
.raxo-columns .raxo-block-name {
	font-style: bold !important;	
        font-size: 25px;
	text-align: center;
	color:#ae8d58;
	text-transform: none;
}

/* --- Block INTRO --- */
.raxo-columns .raxo-block-intro {
	padding: 8px;
	font-size: 15px;
	line-height: 21px;
}

/* --- Block BUTTON --- */
.raxo-columns .raxo-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-block: 16px; padding-inline: 8px;
}



/* ----- Module ITEMS ----- */
.raxo-columns .raxo-top {
	font-size: var(--top-font-size);
	--icon-size: calc(var(--top-font-size) - 1px);
}
.raxo-columns .raxo-normal {
	font-size: var(--nor-font-size);
	--icon-size: var(--nor-font-size);
}

.raxo-columns .raxo-body > div {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -14px;		/* Columns Gap */
	overflow: hidden;
}
	@media (max-width: 479.98px) {
		.raxo-columns .raxo-top {
			flex-flow: column nowrap;
		}
	}

.raxo-columns article {
	flex: 1 1 50%;
	margin: 10px 0;
	padding: 0 14px;		/* Columns Gap */
	min-width: 192px;
}
.raxo-columns .raxo-top article {
		margin: 16px 0;
		min-width: 288px;
	}
	.raxo-columns article:empty {
		margin: 0;
	}

/* ----- Linie am ende des Moduls ----- */

.raxo-columns .raxo-wrap {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-bottom: 1px solid transparent;
	color: #000000 !important;
	transition: all .2s;
	
	overflow: hidden;
	transition: all .2s;
}
	.raxo-columns .raxo-top .raxo-wrap {
		border-bottom: 2px solid transparent;
		border-color: #000000 !important;
	}



/* ----- Item IMAGE ----- */
.raxo-columns .raxo-image {
	display: block;
  padding: 0;
}
	.raxo-columns .raxo-top .raxo-image {
		width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
  border-color: #000000;
  border: 3px solid #000000; /* Standardrand von 6px in der Farbe #000000 (gold) */
  transition: border 0.4s ease; /* Übergang für Randgröße und -farbe */
	}
	.raxo-columns .raxo-image:hover {
		border-color: var(--raxo-theme-color);
	}
.raxo-columns .raxo-image img {
	max-width: 100%; height: auto;
}
	.raxo-columns .raxo-top .raxo-image img {
		width: 100%;
	}




/* ----- CONTENT Styles ----- */
.raxo-columns .raxo-top .raxo-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: .75em;
	padding: 1.5em var(--spacer) 1em;
	overflow: hidden;
}
.raxo-columns .raxo-normal .raxo-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: -8px -10px;
}
	.raxo-columns .raxo-normal .raxo-content > div {
		margin: 8px 10px;
	}
	.raxo-columns .raxo-normal .raxo-image {
		flex: 0 1 auto;
		align-self: flex-start;
	}
	.raxo-columns .raxo-normal .raxo-text {
		flex: 1 1 144px;
	}

/* --- Item TITLE --- */
.raxo-columns .raxo-title {
	margin: 25px 0px -5px 0px;
  	font-family: 'GCI', Arial, sans-serif !important; /* Schriftart GCI */
  	color: #ae8d58 !important;
  	text-transform: none !important;
  	font-weight: 500; !important; /* Fettschrift aktivieren */	
  	font-size: 22px;
  	text-align: left  !important;
  	text-transform: none;
}
.raxo-columns .raxo-top .raxo-title {
	margin: 25px 0px -5px 0px;
	font-family: 'GCI', Arial, sans-serif !important; /* Schriftart GCI */
  	color: #ae8d58 !important;
  	text-transform: none !important;
  	font-weight: 500; !important; /* Fettschrift aktivieren */	
  	font-size: 22px;
  	text-align: left  !important;
  	text-transform: none;
	}

/* --- Item TEXT --- */
.raxo-columns .raxo-text {
	text-align: left;
  	font-family: 'GCI', Arial, sans-serif !important; /* Schriftart GCI */
  	font-style: normal !important;
  	font-size: 18px;
  	margin-bottom: 5px !important;
  	line-height: 1.6;
  	color: #000000;
  	text-align: left;
  	-webkit-hyphens: auto;
  	-moz-hyphens: auto;
  	-ms-hyphens: auto;
  	hyphens: auto;
}


/* --- Item READMORE (neu) --- */

.raxo-columns .raxo-readmore {
	height: 50px;
}

.raxo-columns .raxo-top .raxo-readmore {
	height: 50px;
}

/* Spalten einer Reihe gleich hoch */
.raxo-columns .raxo-body > div {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}


/* Readmore-Fusszeile: Button rechts, an Linie „fixiert“ */
.raxo-columns article .raxo-readmore {
  width: 100%;
  margin-top: auto;                 /* drückt nach unten */
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;            /* Unterkante des Buttons = Basis */
  padding: 0 29px 6px 0;            /* rechts **30px**, unten 6px Abstand zur Linie */
}

/* Button (Farben gern anpassen) */
.raxo-columns article .raxo-readmore a {
  position: absolute;
  right: 23px;
  bottom: 30px;
  font-family: 'GCI', Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: transparent;
  color: #000 !important;                 /* Textfarbe aktuell schwarz */
  border: 3px solid #ae8d58 !important;   /* goldener Rahmen wie im Screenshot */
  border-radius: 0 !important;
  padding: 6px 24px !important;
}

.raxo-columns article .raxo-readmore a:hover,
.raxo-columns article .raxo-readmore a:focus {
  background: #000;
  color: #fff !important;
  border-color: #000 !important;
}


/* ----- BUTTON Styles ----- */
.raxo-columns .raxo-btn {
	display: inline-block;
	padding: 8px 22px;
	color: var(--raxo-theme-color);
}
	.raxo-columns .raxo-btn a {
		display: inline-block;
		min-width: 128px; min-height: 40px;
		margin: -8px -22px; padding: 8px 22px;
		line-height: 1.25;
		color: inherit;
		text-align: center;
		text-decoration: none;
		border: 2px solid transparent;
		border-radius: 3px;
	}
	.raxo-columns .raxo-btn:hover a {
		color: var(--raxo-gray-100) !important;
		background-color: var(--raxo-theme-color);
		border-color: var(--raxo-theme-color);
	}


/* ----- META Elements ----- */
.raxo-columns .raxo-meta {
	display: flex;
	padding: 4px 8px;
	gap: 8px 16px;
	flex-wrap: wrap;
	font-size: .93em; line-height: 1.2;
	border-radius: 2px;
	background-color: var(--raxo-gray-120);
}
	.raxo-columns .raxo-normal .raxo-meta {
		margin-bottom: 8px;
	}
	.raxo-columns .raxo-top .raxo-meta {
		padding: 8px var(--spacer);
		border-radius: 4px;
	}
	.raxo-columns .raxo-top .raxo-image + .raxo-meta {
		margin-top: -4px; padding-top: 12px;
		border-radius: 0 0 4px 4px;
		/* z-index: 0; */
	}
	.raxo-columns .raxo-meta span {
		display: flex;
		align-items: center;
		gap: 5px;
	}

/* --- META Elements ICONS --- */
.raxo-columns .raxo-meta svg,
.raxo-columns .raxo-comments svg {
	width: var(--icon-size);
	height: var(--icon-size);
	fill: currentColor;
}
	.raxo-columns .raxo-rating svg {
		width: calc(var(--icon-size) * 5);
		fill: var(--raxo-gray-300);
	}

/* --- TOP Item DATE --- */
.raxo-columns .raxo-top .raxo-date {
	margin-top: -4px;
	font-size: 14px; line-height: 20px;
}

/* --- Item COMMENTS --- */
.raxo-columns .raxo-comments {
	margin-left: 8px;
	font-size: .85em;
	vertical-align: top;
}
	.raxo-columns .raxo-comments a {
		font-weight: normal;
	}




/* ----- RESPONSIVE Breakpoints ----- */

/* Small devices (landscape phones, 576px and up)*/
@container raxo-columns (min-width: 576px) {

	.raxo-columns.top-sm-col1 .raxo-top article,
	.raxo-columns.nor-sm-col1 .raxo-normal article {
		flex-basis: 100%
	}
	.raxo-columns.top-sm-col2 .raxo-top article,
	.raxo-columns.nor-sm-col2 .raxo-normal article {
		flex-basis: 50%
	}
	.raxo-columns.top-sm-col3 .raxo-top article,
	.raxo-columns.nor-sm-col3 .raxo-normal article {
		flex-basis: calc(100% * 1 / 3.001);
	}
	.raxo-columns.top-sm-col4 .raxo-top article,
	.raxo-columns.nor-sm-col4 .raxo-normal article {
		flex-basis: 25%
	}
	.raxo-columns.top-sm-col5 .raxo-top article,
	.raxo-columns.nor-sm-col5 .raxo-normal article {
		flex-basis: 20%
	}
	.raxo-columns.top-sm-col6 .raxo-top article,
	.raxo-columns.nor-sm-col6 .raxo-normal article {
		flex-basis: calc(100% * 1 / 6.001);
	}

}

/* Medium devices (tablets, 768px and up) */
@container raxo-columns (min-width: 768px) {

	.raxo-columns.top-md-col1 .raxo-top article,
	.raxo-columns.nor-md-col1 .raxo-normal article {
		flex-basis: 100%
	}
	.raxo-columns.top-md-col2 .raxo-top article,
	.raxo-columns.nor-md-col2 .raxo-normal article {
		flex-basis: 50%
	}
	.raxo-columns.top-md-col3 .raxo-top article,
	.raxo-columns.nor-md-col3 .raxo-normal article {
		flex-basis: calc(100% * 1 / 3.001);
	}
	.raxo-columns.top-md-col4 .raxo-top article,
	.raxo-columns.nor-md-col4 .raxo-normal article {
		flex-basis: 25%
	}
	.raxo-columns.top-md-col5 .raxo-top article,
	.raxo-columns.nor-md-col5 .raxo-normal article {
		flex-basis: 20%
	}
	.raxo-columns.top-md-col6 .raxo-top article,
	.raxo-columns.nor-md-col6 .raxo-normal article {
		flex-basis: calc(100% * 1 / 6.001);
	}

}

/* Large devices (laptops, 992px and up) */
@container raxo-columns (min-width: 992px) {

	.raxo-columns.top-lg-col1 .raxo-top article,
	.raxo-columns.nor-lg-col1 .raxo-normal article {
		flex-basis: 100%
	}
	.raxo-columns.top-lg-col2 .raxo-top article,
	.raxo-columns.nor-lg-col2 .raxo-normal article {
		flex-basis: 50%
	}
	.raxo-columns.top-lg-col3 .raxo-top article,
	.raxo-columns.nor-lg-col3 .raxo-normal article {
		flex-basis: calc(100% * 1 / 3.001);
	}
	.raxo-columns.top-lg-col4 .raxo-top article,
	.raxo-columns.nor-lg-col4 .raxo-normal article {
		flex-basis: 25%
	}
	.raxo-columns.top-lg-col5 .raxo-top article,
	.raxo-columns.nor-lg-col5 .raxo-normal article {
		flex-basis: 20%
	}
	.raxo-columns.top-lg-col6 .raxo-top article,
	.raxo-columns.nor-lg-col6 .raxo-normal article {
		flex-basis: calc(100% * 1 / 6.001);
	}

}

/* Extra large devices (desktops, 1200px and up) */
@container raxo-columns (min-width: 1200px) {

	.raxo-columns.top-xl-col1 .raxo-top article,
	.raxo-columns.nor-xl-col1 .raxo-normal article {
		flex-basis: 100%
	}
	.raxo-columns.top-xl-col2 .raxo-top article,
	.raxo-columns.nor-xl-col2 .raxo-normal article {
		flex-basis: 50%
	}
	.raxo-columns.top-xl-col3 .raxo-top article,
	.raxo-columns.nor-xl-col3 .raxo-normal article {
		flex-basis: calc(100% * 1 / 3.001);
	}
	.raxo-columns.top-xl-col4 .raxo-top article,
	.raxo-columns.nor-xl-col4 .raxo-normal article {
		flex-basis: 25%
	}
	.raxo-columns.top-xl-col5 .raxo-top article,
	.raxo-columns.nor-xl-col5 .raxo-normal article {
		flex-basis: 20%
	}
	.raxo-columns.top-xl-col6 .raxo-top article,
	.raxo-columns.nor-xl-col6 .raxo-normal article {
		flex-basis: calc(100% * 1 / 6.001);
	}

}



/* ----- COLOR Schemes ----- */
.raxo-columns,
.raxo-columns .raxo-block-name,

}
.raxo-columns .raxo-item-top .raxo-date,
.raxo-columns .raxo-meta > span,
.raxo-columns .raxo-comments {
	color: var(--raxo-text-muted);
}

/* --- LIGHT Color Mode --- */
.raxo-columns {
	--raxo-color-base: oklch(0.6621 0.081 78.51);	/* raxo color by default */
	--raxo-theme-color: var(--raxo-color-base);

	--raxo-gray-100: hsl(232, 1%, 98%);
	--raxo-gray-120: hsl(232, 1%, 95%);
	--raxo-gray-200: hsl(232, 2%, 88%);
	--raxo-gray-300: hsl(232, 3%, 69%);
	--raxo-gray-400: hsl(232, 4%, 45%);
	--raxo-gray-500: hsl(232, 5%, 30%);
	--raxo-gray-600: hsl(232, 5%, 22%);
	--raxo-gray-900: hsl(232, 7%,  6%);

	--raxo-text-deep: var(--raxo-gray-600);
	--raxo-text-base: var(--raxo-gray-500);
	--raxo-text-muted: var(--raxo-gray-400);
	--raxo-text-light: var(--raxo-gray-300);

	--raxo-border-color: color-mix(in oklch, var(--raxo-theme-color) 32%, white);
}

/* --- DARK Color Mode --- */
.raxo-columns.dark-mode, .raxo-columns.mode-dark {
	--raxo-theme-color: oklch(from var(--raxo-color-base) calc(l * 1.1) calc(c * 0.8) h);
	
	--raxo-gray-100: hsl(232, 8%,  5%);
	--raxo-gray-120: hsl(232, 7%, 10%);
	--raxo-gray-200: hsl(232, 6%, 16%);
	--raxo-gray-300: hsl(232, 5%, 29%);
	--raxo-gray-400: hsl(232, 3%, 51%);
	--raxo-gray-600: hsl(232, 2%, 73%);
	--raxo-gray-500: hsl(232, 2%, 66%);
	--raxo-gray-900: hsl(232, 1%, 87%);

	--raxo-border-color: color-mix(in oklch, var(--raxo-theme-color) 64%, black);
}


/* --- COLOR Palette --- */
/* Backwards compatibility (BC) with previous color classes: columns-colorname */
.raxo-columns.color-red {
	--raxo-color-base: oklch(0.53 0.19 28.82);
}
.raxo-columns.columns-pink, /* BC */
.raxo-columns.color-pink {
	--raxo-color-base: oklch(0.58 0.19 354.7);
}
.raxo-columns.columns-orange, /* BC */
.raxo-columns.color-orange {
	--raxo-color-base: oklch(0.61 0.18 45.23);
}
.raxo-columns.columns-yellow, /* BC */
.raxo-columns.color-yellow {
	--raxo-color-base: oklch(0.82 0.17 94.64);
}
.raxo-columns.color-brown {
	--raxo-color-base: oklch(0.44 0.05 39.62);
}
.raxo-columns.columns-green, /* BC */
.raxo-columns.color-green {
	--raxo-color-base: oklch(0.54 0.17 140.3);
}
.raxo-columns.columns-turquoise, /* BC */
.raxo-columns.color-teal {
	--raxo-color-base: oklch(0.58 0.11 186.8);
}
.raxo-columns.columns-blue, /* BC */
.raxo-columns.color-blue {
	--raxo-color-base: oklch(0.48 0.18 259.4);
}
.raxo-columns.columns-lightblue, /* BC */
.raxo-columns.color-sky {
	--raxo-color-base: oklch(0.62 0.15 243.2);
}
.raxo-columns.columns-violet, /* BC */
.raxo-columns.color-violet {
	--raxo-color-base: oklch(0.48 0.19 287.4);
}
.raxo-columns.color-purple {
	--raxo-color-base: oklch(0.48 0.19 303.4);
}
.raxo-columns.columns-gray, /* BC */
.raxo-columns.color-gray {
	--raxo-color-base: oklch(0.38 0.0186 254);
}