/*
 Theme Name:   akomo theme
 Theme URI:    https://generatepress.com
 Description:  Custom GeneratePress child theme developed by akomo.org
 Author:       akomo.org
 Author URI:   https://akomo.org
 Template:     generatepress
 Version:      1.2
*/


/* --------------------------------------------- */
/*  1.  V A R I A B L E S
/*  2.  G E N E R A L 
/*  3.  T Y P O G R A P H Y
/*  4.  B U T T O N S   &   L I N K S
/*  5.  I M A G E S   &   S V G
/*  6.  N A V I G A T I O N
/*  7.  F O R M S
/*  8.  F O N T S
/*  9.  B L O G - P O S T S
/* 10.  C U S T O M:   H I V E   G R I D 
/* --------------------------------------------- */




/* --------------------------------------------- */
/*  1.  V A R I A B L E S
/* --------------------------------------------- */

:root {
	/* Sections */
	--section-inline-padding: clamp(1rem, 0.25rem + 3.75vw, 4rem); /*min320px max1600px*/
	/*--section-inner-inline-padding: clamp(1rem, 0rem + 5vw, 2rem); /*min320px max640px*/
	--section-vertical-padding: clamp(3rem, 3rem + 4vw, 8rem); /*min400px max2000px*/
	/* Typography */
	--font-size-giant: clamp(4.5rem, 4.33rem + 0.67vw, 5rem); /*min400px max1600px*/
	--font-size-h1: clamp(2.25rem, 1.833rem + 1.67vw, 3.5rem); /*min400px max1600px*/
	--font-size-h2: clamp(2rem, 1.67rem + 1.33vw, 3rem); /*min400px max1600px*/
	--font-size-h3: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); /*min400px max1600px*/
	--font-size-h4: clamp(1.5rem, 1.33rem + 0.67vw, 2rem); /*min400px max1600px*/
	--font-size-h5: clamp(1.25rem, 1.167rem + 0.33vw, 1.5rem); /*min400px max1600px*/
	--font-size-body-l: clamp(1.25rem, 1.167rem + 0.33vw, 1.5rem); /*min400px max1600px*/
	--font-size-body: 1.125rem /*clamp(1.125rem, 1.083rem + 0.167vw, 1.25rem)*/; /*min400px max1600px*/
	--font-size-body-s: clamp(1rem, 0.958rem + 0.167vw, 1.125rem); /*min400px max1600px*/
	--font-size-subtext: 16px;
	/* Line Heights */
	--line-height-xs: 110%;
	--line-height-s: 120%;
	--line-height-m: 140%;
	--line-height-l: 150%;
	/* Letter Spacings */
	--letter-spacing-s: -.030em;
	--letter-spacing-m: -.015em;
	--letter-spacing-l: -.010em;
	/* Content Widths */
	--content-width-s: 768px;
	--content-width-m: 1280px;
	--content-width-l: 1440px;
	--content-width-xl: 1920px;
	/* Margins */
	--margin-bottom-s: 1rem;
	--margin-bottom-m: 2rem;
	--margin-bottom-l: 4rem;
	--margin-bottom-xl: 8rem;
	/* Border Widths */
	--border-width-s: 1px;
	--border-width-m: 1.5px;
	--border-width-l: 2.5px;
	/* Border Radi*/
	--border-radius-s: .5rem;
	--border-radius-m: 1rem;
	--border-radius-l: 2rem;
	/* Shadows */
	--box-shadow-s: 0px 4px 16px 0px var(--color-primary-box-shadow-010);
	--box-shadow-m: ;
	--box-shadow-l: 0px 4px 64px 0px var(--color-primary-box-shadow-020);
	/*GP Slideout Width*/
	--gp-slideout-width: 480px !important;
}


/* --------------------------------------------- */
/*  2.  G E N E R A L
/* --------------------------------------------- */

.site-wrapper {
	overflow:clip; /* clip everything outside the viewport */
	display: grid; /* grid ftw */
	grid-template-rows: auto 1fr auto; /* navi and footer are their elements' height and site content fills the rest of the space */
	min-height: 100svh;	/* small viewport height for smartphone screens */
}

.site.grid-container {
	width: 100%; /* set to 100% even though it is a grid item */
}

/* prevent horizontal scroll issues with safari browser */
.wp-site-blocks {
	contain:layout;
}

/* tell chrome that it should reserve space for a scroll bar to prevent layout shifts */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/*smooth scroll*/
html, a {scroll-behavior: smooth;}

/* disable smooth scroll for cross page anchor links via js*/
html.disable-smooth {scroll-behavior: auto !important;}


/* SCROLLING LINE LISTS */
.line-list-horizontal {
	scroll-snap-type: x mandatory;
}

.line-list-horizontal > li {
	scroll-snap-align: end;
}

.line-list-horizontal {
  /* Horizontale Scrollbar ausblenden */
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* IE und Edge (alt) */

  /* WebKit (Chrome, Safari) */
}
.line-list-horizontal::-webkit-scrollbar {
  display: none;                     /* Chrome, Safari, Edge (neu) */
}

/* auto counting cards */
.counting-container {
	counter-reset: process;
}

.icon-container--counter,
.line-list-horizontal__heading--counter,
.btn--blue-bg-w-icon {
	counter-increment: process;
}

/* prevent user selection - utility class */
.no-select {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

@view-transition {navigation: auto;} /* enables smooth*ish page transitions */


/* --------------------------------------------- */
/*  3.  T Y P O G R A P H Y
/* --------------------------------------------- */

/* fluid typography scale */
h1, .font-size-h1 {font-size: var(--font-size-h1)}
h2, .font-size-h2 {font-size: var(--font-size-h2)}
h3, .font-size-h3 {font-size: var(--font-size-h3)}
h4, .font-size-h4 {font-size: var(--font-size-h4)}
.font-size-subtext {font-size: var(--font-size-subtext)}

.font-hyphenate {
	hyphens:auto;
	-webkit-hyphenate-limit-before: 3; /* For Safari */
	-webkit-hyphenate-limit-after: 4; /* For Safari */
	-ms-hyphenate-limit-chars: 10 3 4;
 	hyphenate-limit-chars: 10 3 4;
}

b, strong {
	font-weight: 600;
}

p:last-child:last-of-type {
	margin-bottom:0;
}


/* --------------------------------------------- */
/*  4.  B U T T O N S   &   L I N K S
/* --------------------------------------------- */


/* textlinks */

.link-txt {
	text-decoration-color: var(--color-light-a-050);
	text-underline-offset: 6px;
	text-decoration-thickness: 1.5px;
	transition: text-decoration-color .4s ease-in-out, text-underline-offset .1s ease-out, color .2s ease-out;
}
.link-txt:is(:hover,:focus) {
	text-decoration-color: var(--color-accent-100);
	text-underline-offset: 1px;
}


/* additional styles for: stretch the area of a single link inside of an element to the whole element */
.stretch-link a:is(:focus-visible)::after{
	outline: 2px solid;
}

.stretch-link a:is(:hover, :focus){
	outline: none;
}

/* --------------------------------------------- */
/*  5.  I M A G E S   &   S V G
/* --------------------------------------------- */


.flip-horizontal {
   	-moz-transform: scaleX(-1);
   	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.btn--primary svg path,
.icon-container--contact svg path,
.icon-container--footer svg path,
.icon-small svg path,
.icon-list__icon svg path {
	stroke-width: 35;
}

.icon-container--big svg path {
	stroke-width: 11;
}


/* make background shapes non dragable and non selectable */
.bg-shape {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* SVG MASKS */

.mask-hive {
  -webkit-mask-image: url(/wp-content/uploads/mask-hive.svg);
  mask-image: url(/wp-content/uploads/mask-hive.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* --------------------------------------------- */
/*  6.  N A V I G A T I O N
/* --------------------------------------------- */


/* nav-bar */
nav.main-navigation.has-branding {
	padding-inline: var(--section-inline-padding);
}

nav#mobile-header, nav#site-navigation, nav#sticky-navigation {
	background-color: rgba(252, 252, 252, 0.9);
	backdrop-filter: blur(.5rem);
	-webkit-backdrop-filter: blur(.5rem);
}

nav#mobile-header {
	padding-bottom:1rem;
}

/* sizing and spacing */
nav.main-navigation.has-branding .inside-navigation.grid-container {
	padding-top:2rem;
	padding-bottom:0;
	/*transition: padding .05s ease-in-out;*/
	max-width: var(--gb-container-width);
}
/* sizing and spacing sticky nav */
nav#sticky-navigation.main-navigation.has-branding .inside-navigation.grid-container {
	padding-top:2rem;
	padding-bottom:1rem;
}


/* logo alterations */
.navigation-branding .site-logo img {
	max-width:100px;
	height:auto;
	padding:0px;
}

/* get rid of default bottom border */
.sticky-enabled nav.main-navigation.is_stuck {
	box-shadow: none;
}

/* font weight of links on hover */
.main-nav a {
	transition: font-weight .2s ease-in-out, letter-spacing .2s ease-in-out, text-decoration-color .6s ease-out !important;
	text-decoration-color: transparent;
}
.main-nav a:is(:hover, :focus) {
	font-weight: 600;
	letter-spacing: var(--letter-spacing-s);
	text-decoration:underline;
	text-underline-offset: .25rem;
	text-decoration-thickness: var(--border-width-m);
	text-decoration-color: inherit;
}

/* chevrons position and styles */
.main-nav .dropdown-menu-toggle {
	padding-left: .5rem;
}
.main-nav .dropdown-menu-toggle .gp-icon {
	position: relative;
	width: 1em;
	height: 1em;
}
.main-nav .dropdown-menu-toggle .gp-icon svg {
	position: absolute;
	top: 20%;
	fill: var(--color-primary-070);
	transition: fill .2s ease-in-out;
}

.main-nav a:is(:hover, :focus) .gp-icon svg {
	fill: var(--color-primary-100);
}

/* sub menu */
.main-navigation ul ul.sub-menu {
	border-radius: var(--border-radius-s);
	border: 1px solid var(--color-borders-100);
	box-shadow: unset;
	padding: 0;
	opacity: 0;
	transform: translateY(1rem);
	z-index: 10000;
	transition: opacity .2s ease-in-out, transform .2s ease-out;
}
.main-navigation:not(.toggled) ul li.sfHover > ul, 
.main-navigation:not(.toggled) ul li:is(:hover, :focused) > ul {
	overflow: clip;	
	opacity: 1;
	transform: translateY(0px);
}



/* MOBILE NAVIGATION */

nav.main-navigation.mobile-header-navigation {
	padding-inline: var(--section-inline-padding);
}

nav#mobile-header.main-navigation.has-branding .inside-navigation.grid-container {
	padding-top:1rem;}


nav#mobile-header .site-logo.mobile-header-logo {
	margin:0;
}

nav#mobile-header .site-logo.mobile-header-logo img {
	height: 5rem;
}

nav#mobile-header .site-logo.mobile-header-logo img {
	padding:0px;
}

.main-navigation.mobile-header-navigation {
	padding-inline:2rem;
}

.menu-toggle .gp-icon + .mobile-menu {
	padding-left: 0;
	padding-right: .5rem;
}

nav#mobile-header .menu-toggle {
	display: flex !important;
	justify-content: center;
	align-items: center;
	padding-right: 0;
}

nav#mobile-header .menu-toggle .mobile-menu {
	order: -1;
	font-weight: 600;
	font-size: var(--font-size-body);
}

nav#mobile-header .gp-icon.icon-menu-bars,
nav#generate-slideout-menu .gp-icon.pro-close {
	padding: .75rem;
	background-color: var(--color-icons-background-base-100);
	border-radius: var(--border-radius-s);
}

.gp-icon.icon-menu-bars svg,
.gp-icon.pro-close svg {
	height:1.25rem;
	width:1.25rem;
	top:0;
	stroke-width:2px;
}

/* SLIDEOUT MENU */

/* width */
nav#generate-slideout-menu.main-navigation.offside {
	display:grid;
	width:100%;
	max-width: var(--gp-slideout-width);
	height:100%;
	max-height: 100dvh;
	overflow-y:scroll;
}

/* overlay */
.slideout-enabled .slideout-overlay {
	background-color: rgba(19,40,81,.9);
	backdrop-filter: blur(.125rem);
}

/* exit */
nav#generate-slideout-menu button.slideout-exit {
	padding: 0;
	margin-left:auto;
	margin-top: 2rem;
	margin-bottom:4rem;
	width: fit-content;
}

/* grid container */
nav#generate-slideout-menu .inside-navigation.grid-container {
	padding-inline: var(--section-inline-padding);
	display:flex;
	flex-direction:column;
	width:100%;
}

/* nav container */
nav#generate-slideout-menu .main-nav {
	flex-grow:1;
	display:flex;
	flex-direction:column;
}

nav#generate-slideout-menu.main-navigation ul {
	display:flex;
	flex-direction:column;
	flex-grow:1;
}

/* li elements background */
nav#generate-slideout-menu.main-navigation ul li {
	background-color: rgba(255,255,255,.8);
}

/* rouded corders of li with button in it */
nav#generate-slideout-menu.main-navigation ul.slideout-menu > li:last-child {
	border-radius: var(--border-radius-s);
}

/* links */
nav#generate-slideout-menu.main-navigation ul li a {
	border-bottom: var(--border-width-m) solid var(--color-borders-100);
}

nav#generate-slideout-menu.main-navigation ul ul.sub-menu {
	border-radius:0;
	border-top:0;
	border-left:0;
	border-right:0;
}

nav#generate-slideout-menu.main-navigation ul ul a {
	padding-left:2rem;
}


/* dropdown menu icon */
nav#generate-slideout-menu ul#menu-off-canvas-menu > li > a {
	display:flex;
	padding-right:0;
	justify-items: center;
}

nav#generate-slideout-menu ul#menu-off-canvas-menu > li > a span.dropdown-menu-toggle {
	flex-grow:1;
	flex-shrink:0;
	margin-left:1rem;
	height: 56px;
}

nav#generate-slideout-menu.main-navigation ul li svg,
nav#generate-slideout-menu.main-navigation ul li .gp-icon {
	width: 1.5em;
	height: 1.5em;
} 
nav#generate-slideout-menu.main-navigation ul li svg {
	top: 28%;
}

nav#generate-slideout-menu.main-navigation ul li .gp-icon {
	display:block;
	margin-left:auto;
	height:100%;
}


/* kontakt button */
nav#generate-slideout-menu.main-navigation ul#menu-off-canvas-menu > li:nth-last-child(2) {
	margin-bottom:2rem;
}

nav#generate-slideout-menu.main-navigation ul#menu-off-canvas-menu > li:last-child {
	margin-top:auto;
}

nav#generate-slideout-menu.main-navigation ul#menu-off-canvas-menu > li:last-child > a {
	display:block;
	margin-top:auto;
    font-weight: 600;
    line-height: var(--line-height-l);
    border-radius: var(--border-radius-s);
    padding: 1rem 1.5rem;
	text-align:center;
    letter-spacing: var(--letter-spacing-m);
	color: var(--color-primary-text-100);
	background-color: var(--color-light-100);
    border: var(--border-width-m) solid var(--color-primary-text-100);
}
nav#generate-slideout-menu.main-navigation ul#menu-off-canvas-menu > li:last-child > a:is(:hover, :focus) {
	text-decoration:none;
}

/* --------------------------------------------- */
/*  7.  F O R M S
/* --------------------------------------------- */

/* set accent color for checkboxes and stuff */
.fluentform form {
	accent-color: var(--color-primary-100);
}

/* general bottom margin */
.fluentform form .ff-el-group {
	margin-bottom: 2.5rem;
}

/* custom html */
.fluentform form .ff-custom_html {
	margin-top:2rem;
}

/* make dropdowns the same height as input fields */
.fluentform form .ff-el-group select,
.fluentform form select.ff-el-form-control:not([size]):not([multiple]){
	height: auto;
}

/* FIELD STYLING */

.fluentform form .ff-el-form-control {
	padding: 1rem 1rem;
	font-family: var(--gp-font--work-sans), sans-serif;
}

.fluentform form .ff-el-group select {
  -webkit-appearance: none; /* für Safari und Chrome */
  -moz-appearance: none;    /* für Firefox */
  appearance: none;
  padding-right: 2rem; /* Platz für eigenes Icon */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 330"><g transform="rotate(90, 256, 165)"><path fill="currentColor" d="M197.085 24.087c2.266 0 4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515s-1.132 4.815-2.832 6.515L203.599 303.936c-1.7 1.7-4.248 2.832-6.514 2.832s-4.816-1.132-6.515-2.832l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316-111.317-111.316c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.163c1.7-1.7 4.249-2.833 6.515-2.833z"/></g></svg>'); /* Optional: eigenes Pfeil-Icon */
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

.fluentform form .ff-el-group input,
.fluentform form .ff-el-group select,
.fluentform form .ff-el-group textarea {
	border-radius: var(--border-radius-s);
	color: var(--color-primary-text-100);
	background-color: var(--color-light-100);
	border-color: var(--color-primary-text-100);
	transition: background-color .2s ease;
}

.fluentform form .ff-el-group input:focus,
.fluentform form .ff-el-group select:focus,
.fluentform form .ff-el-group textarea:focus {
	border-color: var(--color-primary-100);
	outline: 3px solid var(--color-primary-050);
}

.fluentform form .ff-el-group input:focus,
.fluentform form .ff-el-group textarea:focus {
	background-color: var(--color-base-100);
}

/* different styles for select field */
.fluentform form .ff-el-group select {
	background-color: var(--color-icons-background-base-100) !important;
	border: none;
}

.fluentform form textarea {
  resize: vertical; /* Allows only vertical resizing */
}

/* help messages */
.fluentform form .ff-el-help-message,
.fluentform form .ff-el-group.einverstaendnis {
	font-size: var(--font-size-subtext);
	line-height: var(--line-height-m);
	color: var(--color-primary-text-100);
	font-style: normal;
	width:100%;
}

.fluentform .ff-el-form-check {
	margin-bottom:0;
}
/* choice buttons */
.fluentform form .ff-el-group.choice-buttons .ff-el-form-check {
	border-radius: var(--border-radius-s);
	background-color: var(--color-icons-background-base-100);
	overflow: hidden;
}


/* resposive check field styling */
.fluentform form .ff-el-group.choice-buttons.choice-20 .ff-el-form-check {
	width: calc(20% - 1rem);
}
.fluentform form .ff-el-group.choice-buttons.choice-50 .ff-el-form-check {
	width: calc(50% - 1rem);
}
.fluentform form .ff-el-group.choice-buttons.choice-100 .ff-el-form-check {
	width: 100%;
}

@media (max-width: 768px) {
	.fluentform form .ff-el-group.choice-buttons.choice-20 .ff-el-form-check {
		width:calc(50% - 1rem);
	}
	.fluentform form .ff-el-group.choice-buttons.choice-50 .ff-el-form-check {
			width: calc(100%);
}
}

.fluentform form .ff-el-group.choice-buttons .ff-el-form-check.ff_item_selected {
	background-color: var(--color-primary-100);
	color: var(--color-light-100);
	overflow: hidden;
	box-shadow: none;
}

.fluentform form .ff-el-group.choice-buttons .ff-el-form-check span {
	display: block;
	padding: 1rem .5rem;
	width: 100%;
	text-align: center;
}

.fluentform form .ff-el-group.choice-buttons.choice-100 .ff-el-form-check span {
	padding: .75rem 1.5rem;
	text-align: left;
}


.fluentform form .ff-el-group.choice-buttons .ff-el-input--content {
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap: 1rem;
}

.fluentform form .ff-el-group.choice-buttons input[type="checkbox"],
.fluentform form .ff-el-group.choice-buttons input[type="radio"] {
	display: none !important;
}

/* danger error styles */
.fluentform form .ff-el-is-error .text-danger {
	font-size: var(--font-size-subtext);
	color: var(--color-primary-text-100);
	background-color: rgba(255,173,143,0.4);
	padding-inline:1rem;
	border-radius: var(--border-radius-s);
}
.fluentform form .ff-el-is-error .ff-el-form-check-label, 
.fluentform form .ff-el-is-error .ff-el-form-check-label a {
	color: var(--color-primary-text-100);
}

/* asterisk */
.fluentform form .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	color: var(--fluentform-danger);
	margin-left: -3px;
}

/* datenschutzhinweis */
.fluentform form .ff-el-group.ff-custom_html {
	font-size: var(--font-size-subtext);
	line-height: var(--line-height-m);
}

/* hidden label */
.fluentform form .label-hidden {
	margin-bottom:0;
}
.fluentform form .label-hidden .ff-el-input--label,
.fluentform form .label-hidden .ff-el-input--label label {
	position:absolute;
	visibility:hidden;
	height:0;
	width:0;
	padding:0;
	margin:0;
}

/* success message */
.fluentform .ff-message-success {
	font-weight: 600;
  border: none;
  box-shadow: none;
  padding: 5rem 0;
  position: relative;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.fluentform .ff-message-success p {
	max-width: 500px;
}



/* --------------------------------------------- */
/*  8.  B L O G    P O S T S  
/* --------------------------------------------- */

figcaption {
	padding-top: .5rem;
	padding-inline: 4rem;
	text-align: center;
	color: var(--color-primary-text-070);
	font-size: var(--font-size-subtext);
	line-height: var(--line-height-l);
}

@media (max-width: 768px) {
	figcaption {
		padding-inline: 0px;
	}	
}


/* --------------------------------------------- */
/*  9.  H I V E   G R I D 
/* --------------------------------------------- */


/* BIG HIVE GRID 11 ITEMS */
.hive__wrapper {
  grid-auto-rows: auto;
}

/* 6 Items in ungeraden Reihen */
.hive__wrapper .hive__item:nth-child(11n+1)  { grid-column: 1 / span 2; }
.hive__wrapper .hive__item:nth-child(11n+2)  { grid-column: 3 / span 2; }
.hive__wrapper .hive__item:nth-child(11n+3)  { grid-column: 5 / span 2; }
.hive__wrapper .hive__item:nth-child(11n+4)  { grid-column: 7 / span 2; }
.hive__wrapper .hive__item:nth-child(11n+5)  { grid-column: 9 / span 2; }
.hive__wrapper .hive__item:nth-child(11n+6)  { grid-column: 11 / span 2; }
/* 5 Items in geraden Reihen */
.hive__wrapper .hive__item:nth-child(11n+7)  { grid-column: 2 / span 2; }
.hive__wrapper .hive__item:nth-child(11n+8)  { grid-column: 4 / span 2; }
.hive__wrapper .hive__item:nth-child(11n+9)  { grid-column: 6 / span 2; }
.hive__wrapper .hive__item:nth-child(11n+10) { grid-column: 8 / span 2; }
.hive__wrapper .hive__item:nth-child(11n+11) { grid-column: 10 / span 2; }

@media (max-width: 1024px) {
  /* 4 Items in ungeraden Reihen */
  .hive__wrapper .hive__item:nth-child(7n+1) { grid-column: 1 / span 2; }
  .hive__wrapper .hive__item:nth-child(7n+2) { grid-column: 3 / span 2; }
  .hive__wrapper .hive__item:nth-child(7n+3) { grid-column: 5 / span 2; }
  .hive__wrapper .hive__item:nth-child(7n+4) { grid-column: 7 / span 2; }
  /* 3 Items in geraden Reihen */
  .hive__wrapper .hive__item:nth-child(7n+5) { grid-column: 2 / span 2; }
  .hive__wrapper .hive__item:nth-child(7n+6) { grid-column: 4 / span 2; }
  .hive__wrapper .hive__item:nth-child(7n+7) { grid-column: 6 / span 2; }
}

@media (max-width: 600px) {
  /* 3 Items in Reihe 1 */
  .hive__wrapper .hive__item:nth-child(11n+1) { grid-column: 1 / span 2; }
  .hive__wrapper .hive__item:nth-child(11n+2) { grid-column: 3 / span 2; }
  .hive__wrapper .hive__item:nth-child(11n+3) { grid-column: 5 / span 2; }
  /* 2 Items in Reihe 2 */
  .hive__wrapper .hive__item:nth-child(11n+4) { grid-column: 2 / span 2; }
  .hive__wrapper .hive__item:nth-child(11n+5) { grid-column: 4 / span 2; }
  /* 3 Items in Reihe 3 */
  .hive__wrapper .hive__item:nth-child(11n+6) { grid-column: 1 / span 2; }
  .hive__wrapper .hive__item:nth-child(11n+7) { grid-column: 3 / span 2; }
  .hive__wrapper .hive__item:nth-child(11n+8) { grid-column: 5 / span 2; }
  /* 2 Items in Reihe 4 */
  .hive__wrapper .hive__item:nth-child(11n+9) { grid-column: 2 / span 2; }
  .hive__wrapper .hive__item:nth-child(11n+10) { grid-column: 4 / span 2; }
  /* 1 Item in Reihe 5 */
  .hive__wrapper .hive__item:nth-child(11n+11) { grid-column: 3 / span 2; }
}


/* SMALL HIVE GRID 20 ITEMS */

/* 7 Items in ungeraden Reihen */
.hive__wrapper--small .hive__item:nth-child(13n+1)  { grid-column: 1 / span 2; }
.hive__wrapper--small .hive__item:nth-child(13n+2)  { grid-column: 3 / span 2; }
.hive__wrapper--small .hive__item:nth-child(13n+3)  { grid-column: 5 / span 2; }
.hive__wrapper--small .hive__item:nth-child(13n+4)  { grid-column: 7 / span 2; }
.hive__wrapper--small .hive__item:nth-child(13n+5)  { grid-column: 9 / span 2; }
.hive__wrapper--small .hive__item:nth-child(13n+6)  { grid-column: 11 / span 2; }
.hive__wrapper--small .hive__item:nth-child(13n+7)  { grid-column: 13 / span 2; }
/* 6 Items in geraden Reihen */
.hive__wrapper--small .hive__item:nth-child(13n+8)  { grid-column: 2 / span 2; }
.hive__wrapper--small .hive__item:nth-child(13n+9)  { grid-column: 4 / span 2; }
.hive__wrapper--small .hive__item:nth-child(13n+10) { grid-column: 6 / span 2; }
.hive__wrapper--small .hive__item:nth-child(13n+11) { grid-column: 8 / span 2; }
.hive__wrapper--small .hive__item:nth-child(13n+12) { grid-column: 10 / span 2; }
.hive__wrapper--small .hive__item:nth-child(13n+13) { grid-column: 12 / span 2; }

@media (max-width: 1024px) {
  /* 4 Items in 1. Reihe */
  .hive__wrapper--small .hive__item:nth-child(20n+1)  { grid-column: 2 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+2)  { grid-column: 4 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+3)  { grid-column: 6 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+4)  { grid-column: 8 / span 2; }
  /* 5 Items in 2. Reihe */
  .hive__wrapper--small .hive__item:nth-child(20n+5)  { grid-column: 1 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+6)  { grid-column: 3 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+7)  { grid-column: 5 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+8)  { grid-column: 7 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+9)  { grid-column: 9 / span 2; }
  /* 4 Items in 3. Reihe */
  .hive__wrapper--small .hive__item:nth-child(20n+10) { grid-column: 2 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+11) { grid-column: 4 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+12) { grid-column: 6 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+13) { grid-column: 8 / span 2; }
  /* 5 Items in 4. Reihe */
  .hive__wrapper--small .hive__item:nth-child(20n+14) { grid-column: 1 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+15) { grid-column: 3 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+16) { grid-column: 5 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+17) { grid-column: 7 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+18) { grid-column: 9 / span 2; }
  /* letzte 2 mittig */
  .hive__wrapper--small .hive__item:nth-child(20n+19) { grid-column: 4 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(20n+20) { grid-column: 6 / span 2; }
}

@media (max-width: 600px) {
/* 2 Items in ungeraden Reihen */
  .hive__wrapper--small .hive__item:nth-child(5n+1) { grid-column: 2 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(5n+2) { grid-column: 4 / span 2; }
/* 3 Items in ungeraden Reihen */
  .hive__wrapper--small .hive__item:nth-child(5n+3) { grid-column: 1 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(5n+4) { grid-column: 3 / span 2; }
  .hive__wrapper--small .hive__item:nth-child(5n+5) { grid-column: 5 / span 2; }
}



@media (prefers-reduced-motion: reduce) {
  .animation {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    animation: none !important;
  }
}



/* FADE IN UP */

.fade-in-up {
  opacity: 0;
  animation: fadeIn .5s ease-in-out forwards;
}

.fade-in-up--delay-m {
  opacity: 0;
  animation: fadeIn .6s ease-in-out forwards;
  animation-delay: .2s;
}


/* KEYFRAMES */

/* Keyframes für fadeIn */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}