/* ============================================================================
   GardenPortal Gartenkalender v1.03
   Zentrale Gestaltung des dynamischen Gartenkalenders.
   Hintergrundbilder/Texturen haben Vorrang vor den jeweiligen Hintergrundfarben.
   Pfade sind relativ zu css_self/gp_gartenkalender.css anzugeben.
   ============================================================================ */

:root {
  /* Gesamter Kalenderbereich */
  --gk-page-bg-color: transparent;
  --gk-page-bg-image: none;
  --gk-page-bg-repeat: repeat;
  --gk-page-bg-position: center top;
  --gk-page-bg-size: auto;
  --gk-page-border-width: 0px;
  --gk-page-border-style: solid;
  --gk-page-border-color: transparent;
  --gk-page-radius: 0px;
  --gk-page-shadow: none;
  --gk-page-padding: 0px;

  /* Monatskopf */
  --gk-head-bg-color: #FFFFFF;
  --gk-head-bg-image: linear-gradient(
            rgba(255,255,255,0.40),
            rgba(255,255,255,0.40)
        ),
        url("../images/metallische_Oberflaeche gruen_glossy.webp") !important;
  --gk-head-bg-repeat: no-repeat;
  --gk-head-bg-position: center;
  --gk-head-bg-size: auto;
  --gk-head-border-width: 4px;
  --gk-head-border-style: solid;
  --gk-head-border-color: #315C3C;
  --gk-head-radius: 15px;
  --gk-head-shadow: 18px 18px 12px rgba(0, 0, 0, 0.4);
  --gk-head-padding: 24px 28px;
  --gk-kicker-color: #4E8F3B;
  --gk-head-title-color: #315C3C;
  --gk-head-text-color: #444444;

  /* Themenkarten */
  --gk-card-bg-color: #FFFFFF;
  --gk-card-bg-image: linear-gradient(
            rgba(255,255,255,0.40),
            rgba(255,255,255,0.40)
        ),
        url("../images/metallische_Oberflaeche gruen_glossy.webp") !important;
  --gk-card-bg-repeat: repeat;
  --gk-card-bg-position: center;
  --gk-card-bg-size: auto;
  --gk-card-border-width: 4px;
  --gk-card-border-style: solid;
  --gk-card-border-color: #315C3C;
  --gk-card-radius: 15px;
  --gk-card-shadow: 18px 18px 12px rgba(0, 0, 0, 0.4);
  --gk-card-padding: 20px 24px;
  --gk-card-title-color: #315C3C;
  --gk-card-text-color: #000000;

  /* Monatsbuttons */
  --gk-button-bg-color: none;
  --gk-button-bg-image: linear-gradient(
            rgba(255,255,255,0)
        ),
        url("../images/Jahresbalken_hellgrau.webp") !important;
  --gk-button-bg-repeat: repeat;
  --gk-button-bg-position: center;
  --gk-button-bg-size: cover;
  --gk-button-text-color: #315C3C;
  --gk-button-font-size: 14px;
  --gk-button-font-weight: 600;
  --gk-button-border-width: 3px;
  --gk-button-border-style: solid;
  --gk-button-border-color: #6A6B6E;
  --gk-button-radius: 15px;
  --gk-button-shadow: 8px 8px 7px rgba(0,0,0,.4);
  --gk-button-padding: 9px 14px;

  /* Monatsbutton Hover */
  --gk-button-hover-bg-color: #4E8F3B;
  --gk-button-hover-bg-image: linear-gradient(
            rgba(255,255,255,0.2)
        ),
        url("../images/Jahresbalken_gold_gelb_glossy.webp") !important;
  --gk-button-hover-text-color: #000000;
  --gk-button-hover-border-color: #000000;
  --gk-button-hover-shadow: 8px 8px 7px rgba(0,0,0,.4);
  --gk-button-hover-transform: translateY(-1px);

  /* Aktiver Monat */
  --gk-button-active-bg-color: #4E8F3B;
  --gk-button-active-bg-image: linear-gradient(
            rgba(255,255,255,0.05)
        ),
        url("../images/Jahresbalken_gruen_315C3C.webp") !important;
  --gk-button-active-text-color: #FFFFFF;
  --gk-button-active-border-color: #000000;
  --gk-button-active-shadow: 1px 4px 4px rgba(0,0,0,.5);

  /* Vor-/Zurück-Buttons: standardmäßig identisch; bei Bedarf separat ändern */
  --gk-nav-bg-color: var(--gk-button-bg-color);
  --gk-nav-bg-image: var(--gk-button-bg-image);
  --gk-nav-text-color: var(--gk-button-text-color);
  --gk-nav-border-color: var(--gk-button-border-color);
  --gk-nav-shadow: var(--gk-button-shadow);
  --gk-nav-hover-bg-color: var(--gk-button-hover-bg-color);
  --gk-nav-hover-bg-image: var(--gk-button-hover-bg-image);
  --gk-nav-hover-text-color: var(--gk-button-hover-text-color);
  --gk-nav-hover-border-color: var(--gk-button-hover-border-color);
  --gk-nav-hover-shadow: var(--gk-button-hover-shadow);
}

[data-gartenkalender-full]{
  display:block;width:100%;box-sizing:border-box;
  padding:var(--gk-page-padding);
  border:var(--gk-page-border-width) var(--gk-page-border-style) var(--gk-page-border-color);
  border-radius:var(--gk-page-radius);
  background-color:var(--gk-page-bg-color);
  background-image:var(--gk-page-bg-image);
  background-repeat:var(--gk-page-bg-repeat);
  background-position:var(--gk-page-bg-position);
  background-size:var(--gk-page-bg-size);
  box-shadow:var(--gk-page-shadow);
}
.gp-gk-head{
	margin:0 0 24px;
	padding:var(--gk-head-padding);
	border:var(--gk-head-border-width) var(--gk-head-border-style) var(--gk-head-border-color);
	border-radius:var(--gk-head-radius);
	background-color:var(--gk-head-bg-color);
	background-image:var(--gk-head-bg-image);
	background-repeat:var(--gk-head-bg-repeat);
	background-position:var(--gk-head-bg-position);
	background-size:var(--gk-head-bg-size);
	box-shadow:var(--gk-head-shadow)
	}
	
.gp-gk-kicker{
	font-weight:700;
	color:var(--gk-kicker-color);
	margin-bottom:6px
	}
	
.gp-gk-head h2{
	margin:0 0 10px;
	color:var(--gk-head-title-color);
	font:900 28px Arial,sans-serif
	}
	
.gp-gk-head p{
	color:var(--gk-head-text-color);
	font:18px/1.55 Arial,sans-serif
	}
	
.gp-gk-monthnav{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0 0 24px
	}
	
.gp-gk-monthnav button,.gp-gk-prevnext button{
	cursor:pointer;
	border:var(--gk-button-border-width) var(--gk-button-border-style) var(--gk-button-border-color);
	border-radius:var(--gk-button-radius);
	padding:var(--gk-button-padding);
	background-color:var(--gk-button-bg-color);
	background-image:var(--gk-button-bg-image);
	background-repeat:var(--gk-button-bg-repeat);
	background-position:var(--gk-button-bg-position);
	background-size:var(--gk-button-bg-size);
	box-shadow:var(--gk-button-shadow);
	color:var(--gk-button-text-color);
	font:var(--gk-button-font-weight) var(--gk-button-font-size) Arial,sans-serif;
	transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s
	}
	
.gp-gk-monthnav button:hover,.gp-gk-monthnav button:focus-visible{
	background-color:var(--gk-button-hover-bg-color);
	background-image:var(--gk-button-hover-bg-image);
	color:var(--gk-button-hover-text-color);
	border-color:var(--gk-button-hover-border-color);
	box-shadow:var(--gk-button-hover-shadow);
	transform:var(--gk-button-hover-transform)
	}
	
.gp-gk-monthnav button.is-active{
	background-color:var(--gk-button-active-bg-color);
	background-image:var(--gk-button-active-bg-image);
	color:var(--gk-button-active-text-color);
	border-color:var(--gk-button-active-border-color);
	box-shadow:var(--gk-button-active-shadow)
	}
	
.gp-gk-categories{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:18px
	}
	
.gp-gk-card{
	padding:var(--gk-card-padding);
	border:var(--gk-card-border-width) var(--gk-card-border-style) var(--gk-card-border-color);
	border-radius:var(--gk-card-radius);
	background-color:var(--gk-card-bg-color);
	background-image:var(--gk-card-bg-image);
	background-repeat:var(--gk-card-bg-repeat);
	background-position:var(--gk-card-bg-position);
	background-size:var(--gk-card-bg-size);
	box-shadow:var(--gk-card-shadow);
	color:var(--gk-card-text-color);
	font:18px/1.55 Arial,sans-serif
	}
	
.gp-gk-card h3{
	margin:0 0 12px;
	color:var(--gk-card-title-color);
	font:800 18px Arial,sans-serif
	}
	
.gp-gk-card ul{
	margin:0;
	padding-left:22px
	}
.gp-gk-card li{
	margin:0 0 8px
	}
	
.gp-gk-prevnext{
	display:flex;
	justify-content:space-between;
	gap:15px;
	margin-top:24px
	}
	
.gp-gk-prevnext button{
	background-color:var(--gk-nav-bg-color);
	background-image:var(--gk-nav-bg-image);
	color:var(--gk-nav-text-color);
	border-color:var(--gk-nav-border-color);
	box-shadow:var(--gk-nav-shadow)
	}
	
.gp-gk-prevnext button:hover,.gp-gk-prevnext button:focus-visible{
	background-color:var(--gk-nav-hover-bg-color);
	background-image:var(--gk-nav-hover-bg-image);
	color:var(--gk-nav-hover-text-color);
	border-color:var(--gk-nav-hover-border-color);
	box-shadow:var(--gk-nav-hover-shadow);
	transform:var(--gk-button-hover-transform)
	}
	
.gp-gk-monthnav button:focus-visible,.gp-gk-prevnext button:focus-visible{
	outline:2px solid #315C3C;
	outline-offset:2px
	}
	
@media(max-width:700px){
	.gp-gk-categories{
		grid-template-columns:1fr
		}
	.gp-gk-head{
		padding:20px
		}
	.gp-gk-monthnav button{
		flex:1 1 30%
		}
	}