/* **************** Variablen (Farben nach dem Flyer) **************** */
:root{
  --hero-text: #fcfab2;         /* deine Angabe für helle Schrift auf dem Waldbild */
  --brand:     #2f5d3a;         /* Primär: Waldgrün (Buttons, Links, Akzente) */
  --brand-2:   #5f7d4e;         /* Sekundär: Moosgrün (Hover, Badges) */
  --accent:    #b37a2e;         /* Akzent: warmes Ocker (kleine Highlights) */

  --bg:        #fff6da;         /* cremiges Grundweiß wie Flyer */
  --surface:   #f6efdc;         /* Papier/Panel */
  --fg:        #222a24;         /* Text dunkelgrünlich */
  --muted:     #6b6a5d;         /* Sekundärtext */
  --ring:      rgba(47,93,58,.25);
}

/* **************** Titel **************** */

h3{
	font-size: 1.4em;
	margin: 0 0 6px;
}
@media(max-width:767px){
	h2{
		margin: auto;
	}
}

/* **************** Section mit Separator **************** */

section.with-sep{
	position: relative;
	padding-top: 90px !important;
	padding-bottom: 90px !important;
}
section.with-sep:after {
    content: '';
    position: absolute;
    bottom: -31px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    background-image: url(/wp-content/uploads/logo-300-separator.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* **************** Hero **************** */
.hero{
  min-height:70vh;
  display:grid;
  align-items:center;
  background-image:
    radial-gradient(1200px 600px at 50% -200px, rgba(23,49,34,.55), rgba(47,93,58,.25) 60%, transparent 70%),
    url('/wp-content/uploads/bilder/hero-1920.webp');
  background-size:cover;
  background-position:center;
  color: var(--hero-text);
  text-shadow: 0 4px 8px rgb(0 0 0 / 80%);
  padding:120px 20px 80px;
}
.hero .inner{width:auto;max-width:1100px;margin-inline:auto}
.hero .kicker{letter-spacing:.08em;text-transform:uppercase;opacity:.9;margin:0 0 .5rem}
.hero .lead{color:#f3eee7;max-width:720px}
.hero .ctas{margin-top:30px;}
/*.hero h1{font-size:clamp(2rem, 4vw + 1rem, 3rem);letter-spacing:-.02em;margin:0 0 10px}
    .hero p{font-size:1.125rem;color:#5d5855;max-width:700px}
    .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}*/
	
.hero .btn.outline{
  border-color: rgba(252,250,178,.9);
  color: var(--hero-text);
  background: transparent;
}	
.hero .btn.outline:hover{ 
	background: rgba(17,29,23,.5); 
}

@media (max-width: 767px){
	.hero{
	padding:90px 16px 60px;
	background-image:
		radial-gradient(900px 480px at 50% -150px, rgba(23,49,34,.55), rgba(47,93,58,.22) 60%, transparent 70%),
		url('/wp-content/uploads/bilder/hero-mobile-1080x1350.webp');
	}
	.hero .inner{
		align-items: center;
		text-align: center;
	}
	.hero .ctas{
		justify-content: center;
	}
}

/* **************** Buttons und Links **************** */
.btn, a.btn{
	display:inline-block;
	padding:.85rem 1.2rem;
	border: 2px solid var(--brand);
	border-radius:999px;
	background:var(--brand);
	color: var(--hero-text);
	font-weight:700;
	text-decoration:none;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin-right:.5rem;
	transform: scale(0.9);
	transition:.2s
}
.btn:hover, a.btn:hover{
	/*filter: brightness(0.8);*/
	color: var(--hero-text);
	transform:translateY(-1px);
	box-shadow:0 12px 28px rgba(184,62,122,.35);
}
.btn-outline{
	background:transparent !important;
	border:2px solid var(--brand) !important;
	color: var(--brand) !important;
}
.btn.outline{ /* Outline-Button im Hero */
	background-color: transparent !important; 
	border-color: var(--hero-text) !important;
	color: var(--hero-text) !important;
}
a{ 
	color: var(--brand); 
}
a:hover{ 
	color: var(--brand-2); 
}



/* **************** Spez. Container (Box, Notice, Card) **************** */
.box {
    background: var(--surface);
    border: 1px solid #eadbcc;
    border-radius: 16px;
    padding: 18px;
	color: #363636;
}
.box.white-transp{
	background: rgb(255 255 255 / 75%);
}
.box .list{
	padding-left: 15px;	
	list-style-type: none;
}
.list li:before, .pink-square:before{
	background-color: var(--accent);
	height: 10px;
	width: 10px;
	display: inline-block;
	margin-right: 10px;
	content: '';
}
.notice {
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: 12px;
    padding: 12px;
}
/*.card {
    background: var(--surface);
    border: 1px solid #eadbcc;
    border-radius: 16px;
    padding: 18px;
	color: #363636;
}*/


/* **************** Termine Repeater **************** */
div.termine_li{
    width: 320px;
    display: flex;
    justify-content: flex-start;
}
.termine_datum{
	min-width: 175px;
	margin-left:15px;
	padding-right: 15px;

}
.termine_zeit{
	padding-left: 15px;
}


/* **************** Figure Portrait-Bild **************** */

figure.img-with-caption{
	margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 40px;
}
.img-with-caption figcaption {
    padding: 0 5px 3px;
	margin: 0;
	background: var(--brand);
	color: var(--surface);
}

/* **************** Icon Links (Schnellanfrage und PDF Download) **************** */
.iconLink .peb{
	transition: all 0.3s;
}
.iconLink:hover .peb {
  background: var(--accent);
  color: #FFF;
  padding: 5px;
  border-radius: 10px;
}


/* **************** Gradients und Hintergrund für die Sections **************** */
/* Angebot */
#angebot{
  /*background: linear-gradient(180deg, #fffef7 0%, var(--bg) 100%);*/
  background: linear-gradient(180deg, #ffffff 0%, #fff8e8 100%);
}

/* Termine & Informationen */
/*#termine{
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
}*/

/* Über Sonja */
#about{
  background: linear-gradient(180deg, #ffffff 0%, #fff8e8 100%);
}

/* Häufige Fragen */
#faq{
  /*background: linear-gradient(180deg, #fffaf0 0%, #fff3df 100%);*/
}

/* Jetzt anmelden */
#anmeldung{
  background: linear-gradient(180deg, #fff3df 0%, #fffaf0 100%);
}

/* Textur sanft einfärben (Blend) */
.bg-texture{
  background-image:
    linear-gradient(0deg, rgba(47,93,58,.08), rgba(179,122,46,.06)), /* Grün/Ocker-Tonung */
    url('/wp-content/uploads/section-bg1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply, normal;
}
.bg-texture h2{ /* Titel bei Section mit Textur */
	color: var(--hero-text);
}



/* **************** Footer und Footer-Bottom (beide .klang-footer) **************** */
.klang-footer{
	background: #15231a;
	color: #eaf3ea;
}
.klang-footer a{
	text-decoration: underline;
	color: #FFF;
	transition: all 0.4s;
}
.klang-footer .pink-square:before{
	transition: all 0.4s;
}
.klang-footer a:hover{
	color: var(--hero-text);
}	
.klang-footer .pink-square:hover::before{
	background: var(--hero-text);
}