/* components.css */

/* ... Tiles ...
-----------------------------------------------*/
.tiles > div {
	max-width: calc(50% - 16px / 2);
}
.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.tiles > div {
	margin: 0;
}
.tiles .hyperlink_img {
  border: 5px solid;
}
.tiles a {
  color: inherit;
}
.tiles a + a {
  font-size: 1.5rem;
  text-transform: uppercase;
  text-decoration: none;
}
.tiles > div:nth-child(1) {
	color: var(--color-wasser);
}
.tiles > div:nth-child(2) {
	color: var(--color-schnittgut);
}
.tiles > div:nth-child(3) {
	color: var(--color-plastik);
}
.tiles > div:nth-child(4) {
	color: var(--color-demut);
}
.tiles > div:nth-child(5) {
	color: var(--color-wandel);
}
.tiles > div:nth-child(6) {
	color: var(--color-diefuenfps);
}
/* ... Tiles ... END
-----------------------------------------------*/



/* ... Top-Images ...
-----------------------------------------------*/
.topimage {
	border: 5px solid;
  max-width: 720px;
  box-sizing: border-box;
}
.topimage img {
  margin: 0 auto;
}
.wasser .topimage {
  border-color: var(--color-wasser);
}
.schnittgut .topimage {
  border-color: var(--color-schnittgut);
}
.plastik .topimage {
  border-color: var(--color-plastik);
}
.demut .topimage {
  border-color: var(--color-demut);
}
.wandel .topimage {
  border-color: var(--color-wandel);
}
.diefuenfps .topimage {
  border-color: var(--color-diefuenfps);
}
/* ... Top-Images ... END
-----------------------------------------------*/



/* ... Gallery ...
-----------------------------------------------*
.ce_gallery > ul {
  --grid-gap: 1em;
  --img-min-width: 282px;
}
.ce_gallery .cols_1 {
  --img-min-width: 438px;
}
.ce_gallery .cols_2 {
  --img-min-width: 432px;
}
.ce_gallery .cols_3 {
  --img-min-width: 282px;
}
.ce_gallery .cols_4 {
  --img-min-width: 208px;
}
.ce_gallery .cols_5 {
  --img-min-width: 164px;
}
.ce_gallery .cols_6 {
  --img-min-width: 135px;
}
.ce_gallery .cols_7 {
  --img-min-width: 114px;
}
.ce_gallery .cols_8 {
  --img-min-width: 87px;
}
.ce_gallery .cols_9 {
  --img-min-width: 78px;
}
.ce_gallery .cols_10 {
  --img-min-width: 70px;
}
.ce_gallery > ul {
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--img-min-width), 1fr));
	gap: calc(var(--grid-gap) + (var(--img-min-width) / 20));
	gap: var(--grid-gap);
	justify-items: center;
	align-items: center;
}
.ce_gallery > ul li {
	margin: 0;
}
/* ... Gallery ... END
-----------------------------------------------*/



/* ... Gallery 02 ...
-----------------------------------------------*/
.ce_gallery > ul {
  --grid-gap: 1em;
  --gallery-cols: 4;
}
.ce_gallery .cols_1 {
  --gallery-cols: 1;
}
.ce_gallery .cols_2 {
  --gallery-cols: 2;
}
.ce_gallery .cols_3 {
  --gallery-cols: 3;
}
.ce_gallery .cols_4 {
  --gallery-cols: 4;
}
.ce_gallery .cols_5 {
  --gallery-cols: 5;
}
.ce_gallery .cols_6 {
  --gallery-cols: 6;
}
.ce_gallery .cols_8 {
  --gallery-cols: 8;
}
.ce_gallery {
  width: 100%;
}
.ce_gallery > ul {
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(var(--gallery-cols), 1fr);
	gap: var(--grid-gap);
	justify-items: center;
	align-items: center;
}
.ce_gallery > ul li {
	margin: 0;
}
/* ... Gallery 02 ... END
-----------------------------------------------*/



/* ... Gallery 03 ...
-----------------------------------------------*
.ce_gallery > ul {
  --grid-gap: 1em;
  --img-min-width: 286px;
}
.ce_gallery .cols_1 {
  --img-min-width: 438px;
}
.ce_gallery .cols_2 {
  --img-min-width: 432px;
}
.ce_gallery .cols_3 {
  --img-min-width: 282px;
}
.ce_gallery .cols_4 {
  --img-min-width: 209px;
}
.ce_gallery .cols_5 {
  --img-min-width: 163px;
}
.ce_gallery .cols_6 {
  --img-min-width: 132px;
}
.ce_gallery .cols_7 {
  --img-min-width: 110px;
}
.ce_gallery .cols_8 {
  --img-min-width: 94px;
}
.ce_gallery .cols_9 {
  --img-min-width: 81px;
}
.ce_gallery .cols_10 {
  --img-min-width: 71px;
}
.ce_gallery > ul {
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--img-min-width), 1fr));
	gap: var(--grid-gap);
	justify-items: center;
	align-items: center;
}
.ce_gallery > ul li {
	margin: 0;
}
/* ... Gallery 03 ... END
-----------------------------------------------*/



/* ... Accordion ...
-----------------------------------------------*/
.ce_accordion {
  margin-bottom: 1rem;
}
.ce_accordion:last-of-type {
	margin-bottom: var(--margin-bottom-ce);
}
.ui-accordion-header {
  font-size: 1.1rem;
  font-weight: normal;
	cursor: pointer;
	position: relative;
	margin: .2em 0 0 0;
	padding: .2em .5em .1em .5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-icon {
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-image: url(img/ui-icons_444444_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-state-active .ui-icon {
	background-image: url(img/ui-icons_ffffff_256x240.png);
}
.ui-icon-triangle-1-s {
	background-position: -65px -16px;
}
.ui-icon-triangle-1-e {
	background-position: -32px -16px;
}

.ui-accordion-content {
	padding: 1em;
	border: 1px solid #dddddd;
	border-top: 0;
	overflow: auto;
}
.ui-accordion-content > div {
	display: flex;
	gap: 1rem;
}
.ui-accordion-content > div > figure {
  flex-shrink: 0;
}

.ui-state-default {
  border: 0 solid var(--color-default-light);
  background-color: var(--color-default-light);
  color: var(--font-color-dark);
}
.ui-state-hover,
.ui-state-active {
	border: 0 solid var(--color-default);
	background-color: var(--color-default);
	color: #fff;
}

.wasser .ui-state-default {
  border-color: var(--color-wasser-light);
  background-color: var(--color-wasser-light);
}
.wasser .ui-state-hover,
.wasser .ui-state-active {
	border-color: var(--color-wasser);
	background-color: var(--color-wasser);
}

.schnittgut .ui-state-default {
  border-color: var(--color-schnittgut-light);
  background-color: var(--color-schnittgut-light);
}
.schnittgut .ui-state-hover,
.schnittgut .ui-state-active {
	border-color: var(--color-schnittgut);
	background-color: var(--color-schnittgut);
}

.plastik .ui-state-default {
  border-color: var(--color-plastik-light);
  background-color: var(--color-plastik-light);
}
.plastik .ui-state-hover,
.plastik .ui-state-active {
	border-color: var(--color-plastik);
	background-color: var(--color-plastik);
}

.demut .ui-state-default {
  border-color: var(--color-demut-light);
  background-color: var(--color-demut-light);
}
.demut .ui-state-hover,
.demut .ui-state-active {
	border-color: var(--color-demut);
	background-color: var(--color-demut);
}

.wandel .ui-state-default {
  border-color: var(--color-wandel-light);
  background-color: var(--color-wandel-light);
}
.wandel .ui-state-hover,
.wandel .ui-state-active {
	border-color: var(--color-wandel);
	background-color: var(--color-wandel);
}

.diefuenfps .ui-state-default {
  border-color: var(--color-diefuenfps-light);
  background-color: var(--color-diefuenfps-light);
}
.diefuenfps .ui-state-hover,
.diefuenfps .ui-state-active {
	border-color: var(--color-diefuenfps);
	background-color: var(--color-diefuenfps);
}
.index .ui-state-default {
  border-color: var(--color-index-light);
  background-color: var(--color-index-light);
}
.index .ui-state-hover,
.index .ui-state-active {
	border-color: var(--color-index);
	background-color: var(--color-index);
}

.futur-flags .ui-state-default {
  border-color: var(--color-futur-flags-light);
  background-color: var(--color-futur-flags-light);
}
.futur-flags .ui-state-hover,
.futur-flags .ui-state-active {
	border-color: var(--color-futur-flags);
	background-color: var(--color-futur-flags);
}

.gemeinsam .ui-state-default {
  border-color: var(--color-gemeinsam-light);
  background-color: var(--color-gemeinsam-light);
}
.gemeinsam .ui-state-hover,
.gemeinsam .ui-state-active {
	border-color: var(--color-gemeinsam);
	background-color: var(--color-gemeinsam);
}

.gutes-leben .ui-state-default {
  border-color: var(--color-gutes-leben-light);
  background-color: var(--color-gutes-leben-light);
}
.gutes-leben .ui-state-hover,
.gutes-leben .ui-state-active {
	border-color: var(--color-gutes-leben);
	background-color: var(--color-gutes-leben);
}

.workshops .ui-state-default {
  border-color: var(--color-workshops-light);
  background-color: var(--color-workshops-light);
}
.workshops .ui-state-hover,
.workshops .ui-state-active {
	border-color: var(--color-workshops);
	background-color: var(--color-workshops);
}
.bodenschaetze .ui-state-default {
  border-color: var(--color-bodenschaetze-light);
  background-color: var(--color-bodenschaetze-light);
}
.bodenschaetze .ui-state-hover,
.bodenschaetze .ui-state-active {
	border-color: var(--color-bodenschaetze);
	background-color: var(--color-bodenschaetze);
}
.ui-state-active {
	color: #fff;
}
.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}

.ce_accordion p {
  margin-top: 0;
}
.ce_accordion p:last-child {
  margin-bottom: 0;
}
/* ... Accordion ... END
-----------------------------------------------*/



/* ... Content Elements Text ...
-----------------------------------------------*/
.float_left,
.float_right {
  float: none;
  margin: 0;
}
.ce_text figure {
	width: auto;
}
.ce_text {
  position: relative;
}
.ce_text > div :last-child {
  margin-bottom: 0;
}
.ce_text.has_float > :where(h1, h2, h3, h4, h5, h6) {
  grid-column: span 2;
}
.ce_text {
	display: grid;
	gap: 0 1em;
  grid-template-rows: repeat(3, auto);
}
.ce_text.has_float {
  grid-template-rows: repeat(2, auto);
}
.ce_text.has_float_right {
  grid-template-columns: 1fr auto;
}
.ce_text.has_float_left {
  grid-template-columns: auto 1fr;
}
.ce_text.has_float > div {
	grid-row-start: 2;
}
.ce_text.has_float_left figure0,
.ce_text.has_float_right > div0 {
  /* grid-column-start: 1; */
}
.ce_text.has_float_left > div {
  grid-column-start: 2;
}
/* ... Content Elements Text ... END
-----------------------------------------------*/