/*
Theme Name: singerwege
Theme URI: https://familienpflege-lernhilfe-warstein.de
Author: internetgestalten.de 
Author URI: https://internetgestalten.de
Version: 1.0.2
Description: Wordpress Theme - singerwege Relaunch 2026
*/

/* css for familienpflege-singer-wege.de (c) internetgestalten.de 2012 */

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('css/fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('css/fonts/open-sans-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('css/fonts/open-sans-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('css/fonts/open-sans-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*  em  reset  */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;}
/* remember to highlight inserts somehow! */
ins {	text-decoration: none;}
del {	text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}

/* colors 
rot			#be1d2c
blau		#253f8e
grün		#8bc63e 
*/

* 				{ font-family: 'Open Sans', sans-serif; font-size:.99em;}

/* layout */
#box     		{ width:910px; margin:20px auto 0 auto; }
#header 		{ height:160px; border-bottom:2px solid #aaa; position: relative;}

#main 			{ 
    width:910px; 
    background:#e7e7e8 url('images/mainbg.gif') no-repeat 0 0; 
    background-size: contain;
    min-height:400px; 
    padding:30px 0 10px 0; 
    margin-top:14px; 
    border-radius:20px;
}

#content		{ 
    padding:10px 35px 10px 150px; 
}

/* herz */
#herz {
    margin: 0;
    padding: 20px;
}

.word{
  transform-box:fill-box;
  transform-origin:center;
}

.word.active{
  animation:pulse 4s cubic-bezier(.22,1,.36,1);
}

svg.dim path {
  animation:fadebg 4s cubic-bezier(.22,1,.36,1);
}

@keyframes pulse{
  0%{transform:scale(1)}
  35%{transform:scale(2.5)}
  50%{transform:scale(2.5)}
  100%{transform:scale(1)}
}

@keyframes fadebg{
  0%{opacity:1}
  35%{opacity:.6}
  50%{opacity:.6}
  100%{opacity:1}
}

small {
    font-size: .8em;
}

/* footer */
#footer			{ clear:both; width:910px; margin-top: 10px; margin-bottom:3em; text-align:center;}
#footer p		{ font-size:13px; color:#888; line-height:1.4em; }
#footer a		{ color:#888; text-decoration:none;}

#logo {
    transition: opacity .2s ease-in-out;
}
#logo:hover {
    opacity: .7;
}

/* menu */
#menu 			{ width:910px; border-bottom:2px solid #aaa; text-align:right; }
#menu ul 		{ list-style-type:none; line-height:30px;}
#menu ul li 	{ margin-bottom:15px; display:inline; margin-right:8px;}
#menu ul li a	{ 
    text-transform:uppercase; 
    color:#aaa; 
    letter-spacing: -1.5px; 
    font-weight:bold; 
    font-size: 18px; 
    text-decoration:none; 
    transition: color .2s ease-in-out;}

#menu ul li.current.familienpflege a,
#menu ul li.open.familienpflege a 	{ color:#be1d2c;}
#menu ul li.current.lernhilfe a,
#menu ul li.open.lernhilfe a 		{ color:#253f8e;}
#menu ul li.current.ueber-mich a,
#menu ul li.open.ueber-mich a 		{ color:#8bc63e;}

ul.child-pages-menu {
    list-style: none;
    display: flex;
    flex-direction: row;
    margin-left: 239px;
    margin-top: 12px;
}
ul.child-pages-menu li {
    list-style: none;
    margin-right: 1em;
}
ul.child-pages-menu li a {
    text-decoration: none;
    font-weight: bold;
    transition: color .2s ease-in-out;
}
ul.child-pages-menu li a:hover {
    color: #aaa;
}


#menu-main li a:hover {
    color: #333;
}

#menu ul li ul 			{ display:block; position:absolute; padding-left:20px; margin:30px 0 0 275px; }
#menu ul li ul li 		{ margin-right:30px;}
#menu ul li ul li a 	{ font-size:14px; text-decoration:none; text-transform:none; letter-spacing:-1px;}

#menu-top {
    position: absolute;
    right: 0;
    top: 20px;
    text-align: right;
}
#menu-top li {
    margin-bottom: 4px;
}
#menu-top li a {
    text-decoration: none;
    text-transform: uppercase;
    color: grey;
    letter-spacing: -.5px;
    font-size: .9em;
    transition: all .2s ease-in-out;
}

#menu-top li.current_page_item a,
#menu-top li a:hover {
    font-weight: bold;
}

.alignright {
    float: right;
    margin: 1em 0 2em 1em;
}
.alignleft {
    float: left;
    margin: 1em 1em 2em 0;
}


/*** lvfha ***/
a:link 		{color:#40AE49; text-decoration:none;}
a:visited 	{color:#40AE49; text-decoration:none;}
a:focus 	{color:#000; text-decoration:none; outline:0;}
a:hover 	{color:#000; text-decoration:underline;}
a:active 	{color:#000; text-decoration:none;}


/***** Headings *****/
h1 {
padding:15px 0 20px 80px;
letter-spacing:-1px;
font-size:28px;
color:#555;
margin-left:-2px;
}
.rot h1,
.rot h2 		{ color:#be1d2c;}

.blau h1,
.blau h2		{ color:#253f8e;}

.gruen h1,
.gruen h2		{ color:#8bc63e;} 
 
h2 {
padding:5px 0 15px 0;
font-size:18px;
color:#555;
line-height:1.2em;
}
 
h3 {
font-size:1em;
font-weight:bold;
padding-bottom:.3em;
}
 
/***** Common Formatting *****/
#main ul ,
#main p 		{ font-size:15px; margin-bottom:1em; line-height:1.4em;}

#main ul		{ padding-left:1em;}
#main ul li 	{ list-style-type:disc; list-style-position:outside; padding:0 0 5px 5px;}


/***** Forms *****/

 
/***** Global Classes *****/
 
.clear        { clear:both; }
.floatleft    { float:left; }
.floatright   { float:right; }
 
.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }
 
.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }
 

.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }
 
.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }

.team {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.team-member {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  line-height: 1.4em;
  margin-bottom: 1.5rem;
}

.team-member img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}


/* ===== Media Queries ===== */

/* Tablets und kleinere Bildschirme (< 1024px) */
@media screen and (max-width: 1023px) {
    #logo img { max-width: 100%;}
	#box { width: 100%; max-width: 910px; padding: 0 20px; box-sizing: border-box; }
	#header { height: auto; padding: 20px 0; }
	#main { width: 100%; box-sizing: border-box; }
	#footer { width: 100%; box-sizing: border-box; }
	#menu { width: 100%; }
}

/* Tablets im Hochformat (< 768px) */
@media screen and (max-width: 767px) {
	#box { padding: 0 15px; }
	
	#header { text-align: center; }
	#logo { display: block; margin: 0 auto; }
	
	#menu-top { position: static; text-align: left; margin: 30px 0 0 0; }
	#menu-top li { display: inline-block; margin: 0 20px 0 0; }
	
	#menu { text-align: center; }
	#menu ul li { display: block; margin: 10px 0; }
	#menu ul li ul { position: static; margin: 10px 0; padding: 0; }
	#menu ul li ul li { display: block; margin: 5px 0; }
	
	#content { padding: 10px 25px; }
	
	h1 { padding: 15px 0 20px 0; font-size: 24px; }
	h2 { font-size: 16px; }
	
	#main ul,
	#main p { font-size: 14px; }

    #main h1 {
        padding-left: 25px;
    }
}

@media screen and (max-width: 580px) {
    #footer p span {
    display: block;
    visibility: hidden;
    height: 5px;
    }

    ul.child-pages-menu {
        margin: 20px 0;
        display: flex;
        flex-direction: column;
    }

    ul.child-pages-menu li {
        display: block;
        margin: 5px 0;
        text-align: center;
    }

    .team-member img {
        min-width: 100px;
    }

}

/* Mobile Geräte (< 480px) */
@media screen and (max-width: 479px) {
	#box { padding: 0 10px; }
	#content { padding: 10px 15px; }
	
	h1 { font-size: 20px; padding: 10px 0 15px 0; }
	h2 { font-size: 15px; }
	
	#main ul,
	#main p { font-size: 13px; }
	
	#menu ul li a { font-size: 18px; }
	#menu ul li ul li a { font-size: 13px; }

    #header { padding-top: 0;}

}


/* Burger Button Styles */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
    position: absolute;
    right: 10px;
    bottom: 5px;
    transform: translateY(-50%);
}

.mobile-menu-toggle span {
    width: 110%;
    height: 3px;
    background-color: #6D6E71;
    transition: all 0.3s ease;
    display: block;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6.5px, -6.5px);
}

/* Mobile Menu Styles */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }

    #header {
        position: relative;
    }

    #menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        border-bottom: none;
    }

    #menu.active {
        max-height: 1000px;
        border-bottom: 2px solid #aaa;
    }
}

@media screen and (max-width: 380px) {

    #menu-top li {
        margin-right: 7px;
    }

    #menu-top li a {
        font-size: .8em;
    }

}
@media screen and (max-width: 320px) {

    #menu-top li {
        display: block;
        margin-bottom: 8px;
    }

}