/*
Theme Name: Gruppentisch (2026)
Theme URI: https://www.kaeding-anderson.de
Author: Kaeding Anderson
Author URI: https://wordpress.org/
Description: Theme für gruppentisch.de (2026). 
Version: 1.0
Text Domain: gt
*/
@charset "UTF-8";

/* VARIABLES */

:root {
	--darkgreen:#007657;
	--greenhover:#006146;
	--lightgreen: #E5ECE8;
	--forest:#004D39;
	--lime:#72F680;
	--white:#ffffff;
	--black:#000000;
}


/* ############################################ */

/* Mobile First */
body {
font-family: 'Stack Sans Text', sans-serif;
font-weight: 300;
}

#header {
position: sticky;
top: 0;
z-index: 2000;
background: linear-gradient(34deg,rgb(0,77,57) 24%,rgb(0,118,87) 49%,rgb(114,246,128) 100%);
transition: all ease .5s;
}

.site-header__inner {
max-width: var(--wp--style--global--wide-size, 1296px);
margin: 0 auto;
padding: 0 5%;
}

.site-nav-bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.5rem;
padding: 1.1rem 0;
}

.site-nav-bar__col {
display: flex;
align-items: center;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav-bar__col--left {
grid-column: 1;
justify-self: start;
}
.site-nav-bar__col--right {
grid-column: 3;
justify-self: end;
}
.site-nav-bar__col a {
font-weight: 500;
font-size: 15px;
color: rgba(255,255,255,0.82);
transition: color ease .2s;
}
.site-nav-bar__col a:hover {
color: var(--white);
}

.site-nav-bar__brand {
grid-column: 2;
justify-self: center;
display: flex !important;
align-items: center;
color: var(--white) !important;
}

.site-logo {
height: 22px;
width: auto;
display: block;
color: var(--white);
}

/* Assign the "nav-btn" CSS class to a header-right menu item in wp-admin to render it as a button */
.site-nav-bar__col .nav-btn > a {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 22px;
border-radius: 999px;
background: var(--darkgreen);
color: var(--white) !important;
font-weight: 600;
animation: nav-btn-pulse 2.4s ease-in-out infinite;
}

@keyframes nav-btn-pulse {
	0%, 100% {
		box-shadow: 0 0 10px 2px rgba(0,118,87,.5);
	}
	50% {
		box-shadow: 0 0 26px 10px rgba(0,118,87,.75);
	}
}

@media screen and (max-width: 767px) {
	.site-nav-bar__col--left,
	.site-nav-bar__col--right {
		display: none;
	}
	.site-nav-bar {
		justify-content: center;
	}
}

/*  Footer  */
#footer {
background: var(--forest);
text-align: center;
}

.site-footer__inner {
max-width: var(--wp--style--global--wide-size, 1296px);
margin: 0 auto;
padding: 4rem 1.5rem 2.5rem;
}

.site-footer__inner > .site-nav-bar__brand {
justify-content: center;
margin: 0 0 3rem;
}

.site-footer__heading {
margin: 0 0 3rem;
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 4rem);
color: var(--white);
text-transform: none;
letter-spacing: -0.02em;
}

.site-footer__row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.5rem;
}

.site-footer__credit {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
text-align: left;
}

.site-footer__credit-badge {
height: auto;
width: 220px;
display: block;
}

.site-footer__nav,
.site-footer__legal {
display: flex;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__nav a,
.site-footer__legal a {
font-size: 14px;
color: rgba(255,255,255,0.72);
}
.site-footer__nav a:hover,
.site-footer__legal a:hover {
color: var(--white);
}

@media screen and (max-width: 767px) {
	.site-footer__row {
		justify-content: center;
		text-align: center;
	}
	.site-footer__credit {
		align-items: center;
		text-align: center;
	}
}
.cover-top {
	height: 65vh;
}
.cover-bottom {
	height: 49vh;
	}



/* Typo */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	/*font-weight: 600;*/
}

.has-h-1-font-size,
.has-h-2-font-size,
.has-h-3-font-size,
.has-h-4-font-size {
	line-height: 1.2;
	/*font-weight: 600;*/
}

h1, .h1, .has-h-1-font-size {
	/*font-weight: 700;*/
	font-size: clamp(1.75rem, calc(1.375rem + 1.5vw), 2.95rem)!important
}
.h2, .has-h-2-font-size {
	font-size: clamp(1.5rem, calc(1.325rem + .9vw), 2.2rem)!important
}
.h3, .has-h-3-font-size {
	font-size: clamp(1.3rem, calc(1.3rem + .6vw), 1.8rem)!important
}
.h4, .has-h-4-font-size {
	font-size: clamp(1.15rem, calc(1.15rem + .6vw), 1.4rem)!important
}
.has-small-font-size {
	font-weight: 200!important;
}


/* Links */
a {
	color: inherit;
	text-decoration: none;
}
#main a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 5px;
}	
a:hover {
	color: inherit;
}
/* Blocks */
.entry-content > .wp-block-cover:first-child + .wp-block-group {
	margin-top: 0;
}
.wp-block-cover, .wp-block-cover__inner-container {
}
.wp-block-cover + .wp-block-group.alignfull {
	margin-top: 0;
}
.entry-content > .wp-block-group:last-of-type:not(.alignfull) {
	margin-bottom: 4rem;
}
.wp-block-media-text.has-media-on-the-right:not(.has-background) .wp-block-media-text__content {
	padding-left: 0;
}
.wp-block-media-text.has-background .wp-block-media-text__content {
	padding: 1rem;
}
.wp-block-column.has-background {
	padding: 1.5rem
}
.wp-block-columns .wp-block-column.has-white-background-color {
	padding-left: 0;
}
.entry-content > .wp-block-group.alignwide:not(.has-background) {
	padding-left: 0;
	padding-right: 0
}
.entry-content > .wp-block-group.has-background:not(.alignfull),
.entry-content > .wp-block-group > .wp-block-group.has-background:not(.alignfull) {
}

.wp-block-group.alignfull + .wp-block-group.alignfull {
	margin-top: 0;
}

.wp-block-group.alignfull:not(.has-background) + .wp-block-group.alignfull:not(.has-background) {
	padding-top: 0;
}

:where(body .is-layout-flow) > form {
	margin-top: 0;
}

.wp-block-media-text__media {
}
/* List */
.wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.wp-block-list li {
	position: relative;
	padding-left: 1.5rem;
}

.wp-block-list li::before {
	content: '\e800';
	font-family: 'gt_iconfont';
	font-style: normal;
	font-weight: normal;
	speak: never;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	left: 0;
	top: 0;
	color: var(--darkgreen);
}
.list-light li::before {
	content: '\e800';
	font-family: 'gt_iconfont';
	font-style: normal;
	font-weight: normal;
	speak: never;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	left: 0;
	top: 0;
	color: var(--white);
}
.wp-block-list .negativ-li::before {
	content: '\e801';
	font-family: 'gt_iconfont';
	font-style: normal;
	font-weight: normal;
	speak: never;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	left: 0;
	top: 0;
	color: #e15858;
}
.wp-block-list.lime-list li::before {
	color: var(--lime);
}

/*   Contact-list   */
.contact-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.contact-list li {
	position: relative;
	padding-left: 1.5rem;
}

.contact-list li::before {
	content: "→"; /* HTML-Pfeil */
	position: absolute;
	left: 0;
	top: 0;
}


/* Akkordeon */
.wp-block-accordion {
	margin-top: 0!important;
}
.wp-block-accordion-heading__toggle {
	transition: all ease .3s;
}
.wp-block-accordion-heading__toggle :hover {
	text-decoration: none !important;
	color: var(--greenhover)!important;
}
.wp-block-accordion-heading__toggle-title {
	text-decoration: none !important;
	transition: all ease .3s;
	padding-top: 5px;
}
.wp-block-accordion-item {
  border-top: 1px solid #D9E2DD;
}
.wp-block-accordion-heading__toggle-icon {
	color: #ffffff !important;
}


/* Icon Badges */
.icon-badge {
	width: 54px !important;
	height: 54px !important;
	padding: 0 !important;
	border-radius: 15px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0;
}
.icon-badge img,
.icon-badge svg {
	width: 27px;
	height: 27px;
	object-fit: contain;
}
.icon-badge--light {
	background-color: var(--lime) !important;
}
.icon-badge--dark {
	background-color: var(--forest) !important;
}
.icon-badge--white {
	background-color: var(--white) !important;
}
.icon-badge--lightgreen {
	background-color: var(--lightgreen);
}

/* FORMULAR (WPForms) — Formular unter WPForms-Einstellungen -> Allgemein -> "Form CSS Class" mit "gt-form" versehen */
.gt-form {
	background: var(--lightgreen)!important;
	border-radius: 28px!important;
	padding: 3rem!important;
	box-shadow: 0 0 60px 12px rgba(114,246,128,.25);
}

.gt-form .wpforms-field-container {
	display: grid!important;
	grid-template-columns: 1fr 1fr!important;
	gap: 14px 24px!important;
}

.gt-form .wpforms-field {
	margin-bottom: 16px !important;
}

@media (max-width: 640px) {
	.gt-form {
		padding: 24px!important;
	}
}

/* Diese Feldtypen brechen aus dem 2-Spalten-Raster aus */
.gt-form .wpforms-field-textarea,
.gt-form .wpforms-field-radio,
.gt-form .wpforms-field-checkbox,
.gt-form .wpforms-field-select,
.gt-form .wpforms-field-html {
	grid-column: 1 / -1!important;
}

.gt-form .wpforms-field-label {
	display: block!important;
	font-weight: 700!important;
	font-size: 16px!important;
	color: #111827!important;
	margin-bottom: 10px!important;
}

.gt-form .wpforms-required-label {
	display: none!important;
}

.gt-form .wpforms-optional-tag {
	font-weight: 400!important;
	color: #9ca3af!important;
	font-size: 15px!important;
}

.gt-form input[type="text"],
.gt-form input[type="email"],
.gt-form input[type="tel"],
.gt-form input[type="number"],
.gt-form textarea,
.gt-form select {
	width: 100%!important;
	border: 1.5px solid #e5e7eb!important;
	border-radius: 14px!important;
	padding: 18px 20px!important;
	font-size: 18px!important;
	color: #111827!important;
	background-color: #fff!important;
	font-family: inherit!important;
	transition: border-color .15s ease!important;
}

/* WPForms setzt die Select-Textfarbe teils über eine eigene CSS-Variable/Spezifität -
   hier mit höherer Spezifität (zwei Klassen) erzwungen, damit die Auswahl sichtbar bleibt */
.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium, .wp-core-ui div.wpforms-container input.wpforms-field-medium, .wp-core-ui div.wpforms-container select.wpforms-field-medium, .wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-medium {
	max-width: 100%!important;
}

   .gt-form.wpforms-container select,
.gt-form.wpforms-container select option {
	color: #111827 !important;
	background-color: #fff !important;
}

.gt-form input::placeholder,
.gt-form textarea::placeholder {
	color: #9ca3af!important;
}

.gt-form input:focus,
.gt-form textarea:focus,
.gt-form select:focus {
	outline: none!important;
	border-color: var(--darkgreen)!important;
}

.gt-form textarea {
	min-height: 140px!important;
	resize: vertical!important;
}

/* Radio/Checkbox als Karten (Feldtyp "Mehrfachauswahl", Layout "2 Spalten" in WPForms einstellen) */
.gt-form .wpforms-field-radio ul,
.gt-form .wpforms-field-checkbox ul {
	display: grid!important;
	grid-template-columns: 1fr 1fr!important;
	gap: 24px!important;
	list-style: none!important;
	margin: 0!important;
	padding: 0!important;
}

.gt-form .wpforms-field-radio ul li,
.gt-form .wpforms-field-checkbox ul li {
	margin: 0 !important;
	border: 1.5px solid #e5e7eb!important;
	border-radius: 14px!important;
	padding: 20px 22px!important;
}

.gt-form .wpforms-field-radio ul li label,
.gt-form .wpforms-field-checkbox ul li label {
	display: flex!important;
	align-items: center!important;
	gap: 14px!important;
	cursor: pointer!important;
	font-weight: 700!important;
	color: var(--darkgreen)!important;
	font-size: 17px!important;
	margin: 0!important;
}

.gt-form .wpforms-field-radio ul li input[type="radio"],
.gt-form .wpforms-field-checkbox ul li input[type="checkbox"] {
	appearance: none!important;
	-webkit-appearance: none!important;
	width: 20px!important;
	height: 20px!important;
	border: 2px solid #cbd5e1!important;
	border-radius: 50%!important;
	margin: 0!important;
	flex-shrink: 0!important;
	position: relative!important;
}

.gt-form .wpforms-field-checkbox ul li input[type="checkbox"] {
	border-radius: 6px!important;
}

.gt-form .wpforms-field-radio ul li input[type="radio"]:checked,
.gt-form .wpforms-field-checkbox ul li input[type="checkbox"]:checked {
	border-color: var(--darkgreen)!important;
}

.gt-form .wpforms-field-radio ul li input[type="radio"]:checked::after {
	content: ""!important;
	position: absolute!important;
	top: 3px!important;
	left: 3px!important;
	width: 10px!important;
	height: 10px!important;
	border-radius: 50%!important;
	background: var(--darkgreen)!important;
}

.gt-form .wpforms-field-checkbox ul li input[type="checkbox"]:checked::after {
	content: ""!important;
	position: absolute!important;
	top: 2px!important;
	left: 5px!important;
	width: 6px!important;
	height: 10px!important;
	border-right: 2px solid var(--darkgreen)!important;
	border-bottom: 2px solid var(--darkgreen)!important;
	transform: rotate(45deg)!important;
}

.gt-form .wpforms-submit-container {
	margin-top: 8px!important;
}

.gt-form .wpforms-submit {
	display: inline-flex!important;
	align-items: center!important;
	justify-content: center!important;
	gap: 10px!important;
	width: 100%!important;
	background: var(--darkgreen)!important;
	color: #fff !important;
	border: none!important;
	border-radius: 999px!important;
	padding: 22px!important;
	font-size: 18px!important;
	font-weight: 700!important;
	cursor: pointer!important;
	transition: background .15s ease!important;
}

.gt-form .wpforms-submit:hover {
	background: var(--greenhover)!important;
}

/* Optionaler Hinweistext unter dem Button: als eigener Absatz mit dieser Klasse direkt unter dem WPForms-Block einfügen */
.gt-form-note {
	text-align: center!important;
	color: #9ca3af!important;
	font-size: 15px!important;
	margin-top: 18px!important;
}

@media (max-width: 640px) {
	.gt-form .wpforms-field-container,
	.gt-form .wpforms-field-radio ul,
	.gt-form .wpforms-field-checkbox ul {
		grid-template-columns: 1fr!important;
	}
}

/* Utilities */
.hyphens {
	hyphens: auto
}

.small, small {
	font-size: .85rem;
}

#btn-to-top {
	width: 50px;
	height: 50px;
	font-size: 25px;
	line-height: 50px;
	padding: 0;
	position: fixed;
	z-index: 2000;
	bottom: 1.5rem;
	right: 1.5rem;
	display: none;
}
/* Transitions */
a,
.wp-block-button__link {
	transition: all ease .3s;
}


/*.scroll-reveal {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.scroll-reveal.scroll-down {
  transform: translateY(30px);
}

.scroll-reveal.scroll-up {
  transform: translateY(-30px);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}*/
.scroll-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 450ms ease, transform 650ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal.scroll-up {
  transform: translateY(-12px);
}

.scroll-reveal.scroll-up.is-visible {
  transform: translateY(0);
}





/* Fade In Lazeloaded Content */
img[data-src] {
	opacity: 0;
}
img.lazyloaded {
	-webkit-transition: opacity .2s linear 0.15s;
	-moz-transition: opacity .2s linear 0.15s;
	transition: opacity .2s linear 0.15s;
	opacity: 1;
}




/* XS */
@media screen and (max-width: 575px) {
	
	.wp-block-group {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}	
	.wp-block-media-text .wp-block-media-text__content {
		padding: 1rem 0
	}

	.pattern {
		min-height: 40vh!important;
	}
	

}

/* SM+ */
@media screen and (min-width: 576px) {

	h1, .h1, .has-h-1-font-size {
	/*font-weight: 700;*/
	font-size: clamp(2.75rem, calc(1.375rem + 1.5vw), 2.95rem)!important
	}
	.cover-top {
	height: 65vh;
	}
	.cover-bottom {
	height: 65vh;
	}
}

/* XL+ */
@media screen and (min-width: 1200px) {

	/* General Alignment */
	body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
	.wp-block-cover__inner-container > :where(:not(.alignleft):not(.alignright):not(.alignfull))  {
		max-width: var(--wp--style--global--content-size);
		margin-left: auto !important;
		margin-right: auto !important;
	}
	body .is-layout-constrained > .alignwide,
	.wp-block-cover__inner-container > .alignwide {
		max-width: var(--wp--style--global--wide-size);
		margin-left: auto !important;
		margin-right: auto !important;
	}

}


/* XXL+ */
@media screen and (min-width: 1400px) {	

	.wp-block-group > .wp-block-columns.is-layout-flex {
		gap: 2.5rem;
	}

}

/* XXL++ */
@media screen and (min-width: 1600px) {	

	:root :where(.wp-block-group) {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}

}