/* Global Styles for the Website **/
:root {
  --font-sans: "Trebuchet MS","metropolis",sans-serif;
  --font-serif: "Lora","georgia",serif;

  /* Colors */
  --color-wk-green: #003f49;
  --color-wk-orange: #f4c066;
  --color-wk-orange_2: #ffe3bb;
  --color-wk-white: #ffffff;
  --color-wk-blue: rgba(0,152,188,1);
  --color-wk-pink: rgba(222,93,243,1);
}

/* *** Media Queries
(min-width: 43.75rem)
*/
html, body{
	height: 100%;
}

body{
/* 
	background-image: url(../images/klickerklicker-600.svg);
 */
	background-image: none;
	background-size: 200px,336px;
	background-color: #fcfcfc;
}

#page-wrapper{
	margin: 0 auto;
}

@media (min-width: 62.5rem){
  .layout--content-medium, .layout--pass--content-medium > * {
    grid-column: 3 / 15;
  }
}


/** Font **/
.node--view-mode-teaser .text-content, .taxonomy-term--view-mode-teaser .text-content{
	font-size: var(--font-size-base);
}



/* ** Elements ** */

/* Links  */
a {
	color: var(--color-wk-green) !IMPORTANT; 
}

.site-footer a {
	color: var(--color-wk-orange_2) !IMPORTANT; 
}

/** ***** Regions ***** **/

/* Header */
h1, p.h1, h2, h3, p.h3, h4, p.h4, h5, h6, h7 {
	color: var(--color-wk-green);
	margin-block: var(--sp);
	hyphens: auto;
}
h2.subtitle {
	margin-block-start: 0;
}

h1, p.h1 {
	font-size: 2.000rem;
	font-weight: bold;
	line-height: 2.5rem;
}

h2 {
	font-size: 1.750rem;
}

h3, p.h3 {
	font-size: 1.500rem;
}

h4, p.h4 {
	font-size: 1.250rem;
}

h5, h6, h7 {
	font-size: 1.125rem;
}

/* *** drupal fields *** */
.node--view-mode-full .group-right .field:not(:last-child) {
	margin-block-end: var(--sp0-5);
}

/* ** Footer Bottom ** */
/* -- all screens -- */
.region--footer-bottom .block{
	grid-column-start: 1;
	grid-column-end: span 14;
}

/* table */
.region--footer-bottom .block table{
	margin: 0;
	width: 100%;
}

/* footer menu and user menu */
.region--footer-bottom #block-olivero-wk-fusszeile li{
	float: left;
	padding-right: 1em;
}

.region--footer-bottom #block-olivero-wk-account-menu{
	grid-column-start: 12;
  grid-column-end: 15;
}

.region--footer-bottom #block-olivero-wk-account-menu li, .region--footer-bottom #block-olivero-wk-powered{
	text-align: right;
}

/* *** footer bottom end *** */

/* spezielle Tags */
@media (min-width: 43.75rem) and (min-width: 62.5rem) {
    .text-content blockquote, .cke_editable blockquote {
        font-size: 1.125rem;
        line-height: var(--sp2);
    }
}


/* Images */
.field--name-field-copyright{
	margin-block-start: calc(-1 * var(--sp2));
	padding-inline-end: 1rem;
	text-align: right;
	font-size: var(--font-size-xxs);
}
.field--name-field-copyright span::before{
	content: "© ";
}

.site-branding__slogan{
	font-size: 1rem;
}
@media (min-width: 43.75rem) {
	.text-content p, .cke_editable p {
		margin-block-start: var(--sp);
    margin-block-end: var(--sp);
  }
  h2 {
		line-height: var(--sp2-5);
  }
}

.button{
	color: var(--color-wk-green);
	background-color: var(--color-wk-orange_2);
	border: 3px solid var(--color-wk-blue);
	border-radius: 1rem;
}

.button:hover{
	background: white;
	border: 3px solid var(--color-wk-blue);
}

.field--name-node-link .button, .field--name-taxonomy-term-link .button{
	width: 3em;
	aspect-ratio: 2;
	text-align: center;
	border-radius: 50%;
	float: right;
	overflow: hidden;
	text-wrap: nowrap;
	text-align: right;
	padding-left: 0.8em;
}
.field--name-node-link .button::before, .field--name-taxonomy-term-link .button::before {
	content: ">>";
	padding-right: 4em;
}

.klickerbutton{
	background-image: url(../images/aufzaehlung-hundepfote.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: right;
	padding-right: 10em;
	
}

/** ***** Overall Classes ***** **/

/* float */
.float-right {
	float: right;	
}

.float-left {
	float: left;	
}
/* margins and paddings */
p.no-margin {
	margin: 0;
	margin-block: 0;
}


/** Base Colors **/

/* Regions */
.layout-main {
	flex-direction: row;
}
/* Social Bar */
.social-bar{
	background-color: var(--color-wk-orange_2);
}

.rotate {
	inset-inline-start: 50%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.rotate > * {
	display: flex;
	align-items: center;
	margin-right: var(--sp);
	margin-block-end: 0;
}

@media (min-width: 75rem) {
	.rotate {
		flex-direction: row-reverse;
	}
}

.region--sidebar{
	background-color: var(--color-wk-orange_2);
	padding: 1em;
}

/* Main Content */
#block-olivero-wk-page-title{
	margin-block-end: var(--sp1-5);
}

/* Footer */
.site-footer{
	background: linear-gradient(180deg, var(--color-wk-green) 0%, var(--color-wk-green) 100%);
	color: var(--color--white);
}


/*** * Classes for Regions in Entity Display Modes * !!!!!!! Make it Mobile !!!!! ***/

/* *** Teaser in grids and slides equal height *** */

.slick-track  {
	display: flex;
	align-items: stretch;
}
.views-view-responsive-grid__item {
	display: flex;
}

.slick__slide, .views-view-responsive-grid__item-inner {
	height: auto;
	display: flex;
}
.slick__slide > div, .views-view-responsive-grid__item-inner > div {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.slick__slide > div > div.group-left, .views-view-responsive-grid__item-inner > div > div.group-left {
	flex-grow: 1;
}

.slick__slide > div > div.group-footer, .views-view-responsive-grid__item-inner > div > div.group-footer {
	height: 6em;
}

/* ** Teaser Image ** */
.field--name-field-teaserbild, .field--name-field-teaser-image {
	border-radius: 1.2em;
	overflow: hidden;
}

/* *** DS 2col-stacked-fluid  *** */
.ds-2col-stacked-fluid > .group-left {
	padding-right: 1rem;
}
.ds-2col-stacked-fluid > .group-right, .ds-3col-stacked-fluid > .group-right {
	padding: var(--sp1) 1rem;
}

.ds-2col-stacked-fluid > .group-footer {
	padding-top: 1rem;
}

/* 2 cols 100% clear both */
.ds-2col > .group-left, .ds-2col > .group-right, .ds-2col-stacked-fluid > .group-left, .ds-2col-stacked-fluid > .group-right {
	float: none;
	width: 100%;
}


.ds-2col-stacked-fluid > .group-right.sidebar {
	background-color: var(--color-wk-orange_2);
	border-radius: 1.2em;
	overflow: hidden;
	border: 1px solid var(--color-wk-green);
	box-shadow: 10px 10px 10px #eeeeee;
}

/* *** END: DS 2col-stacked-fluid  *** */

/* Paragraphs */
.paragraph {
		margin-block-start: var(--sp1-5);
    margin-block-end: var(--sp1-5);
}

#block-olivero-wk-heroblockstartseite .paragraph {
		margin-block-start: 0;
    margin-block-end: 0;
}

/* Specific Blocks */
/* Großer grün-gelber Page Title Block, eventuell für die Themenseiten */

.region--hero .block-page-title-block{
	background-color: var(--color-wk-green);
	padding: 0 1em;
}

.region--hero .block-page-title-block h1{
	color: var(--color-wk-orange_2);
	line-height: var(--sp10);
}

 /* HERO BLOCK*/
.block-content--type-hero-block.block-content--view-mode-block-66-33 .group-right{
	padding: 10em 0 0 3em;
}



/** Slick  **/
.slick-list {
	margin: 0 calc(-1 * var(--sp)) !important;
}

.slick-list .slick__slide {
		margin: 0 var(--sp);
}

.slick-dots {
	bottom: calc(-1 * var(--sp2)) !important;
}
.region--content .slick-prev {
	left: calc(-2 * var(--sp1-5)) !important;
}
.region--content .slick-next {
	right: calc(-2 * var(--sp1-5)) !important;
}

/* *** VIEWS *** */

.view-content {
	gap: var(--sp0-5);
}

.view:has(.views-view-responsive-grid), .view-content:has(.views-view-responsive-grid){
	display: inline;
}
/* * Hero Block * */
	/* Frontpage */
	
	
	/* Frontpage end */

.block-content--type-hero-block .view-term-name.view-display-id-block_3_terms_rand{
	font-size: 1.5em;
	font-weight: bold;
	line-height: var(--sp3-4);
}

.block-content--type-hero-block .view-term-name.view-display-id-block_3_terms_rand .views-row span::before{
	content: url(../images/../images/aufzaehlung-hundepfote.png);
	padding-right: 1em;
}

/* Fortbildungen */
.view-id-fortbildungen .field:not(:last-child) {
    margin-block-end: var(--sp0-5);
}

.view-id-fortbildungen .views-view-responsive-grid__item{
	border-left: 5px solid var(--color-wk-blue);
	padding-left: 1rem;
	padding-bottom: 1rem;
}

.view-id-fortbildungen .views-view-responsive-grid__item:nth-child(even){
	border-left: 5px solid var(--color-wk-pink);
}

/* Social Bar */
.social-bar .view-content {
	display: flex;
}

.social-bar .block-views .block__title {
	padding-right: 1rem;
}


/* block-views-blockterm-name-block-2 */
.block-views-blockterm-name-block-2 .view-content{
	display: block;
}
.block-views-blockterm-name-block-2 .views-row, .block-views-blockterm-name-block-2 .views-field{
	display: inline;
}