/*
Theme Name: 
Description: 
Author: Merkwert - Agentur für nachhaltige Kommunikation
Author URI: www.merkwert.de
*/

/* =========== Schriften ============= */
/* anton-sc-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Anton SC';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/anton-sc-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* =========== Body ============= */
body{background-color: #EEE1C6;}


.bg-khaki
{
    background-color: #A79A7E;
    color: #fff;
}

.bg-khaki p,
.bg-dark p,
.bg-grey p,
.ff-default .ff-el-input--label label,
.ff-default .ff-el-form-check label.ff-el-form-check-label
{
    color: #EEE1C6;
}



.bg-grey
{
    background-color: #7D786E;
}
.bg-dark
{
    background-color: #524B3B;
    color: #fff;
}

body p
{
    color: #524B3B;
}

/* =========== header ============= */				
header
{
    background-color: #f9f5f4;
    margin: 0 0 4em 0;
     transition: all 0.3s ease;
    height: auto;
}

#logo 
{
    width: 10em;
    height: auto;
}

#logo img 
{
    width: 100%;
}

header.scrolled
{
   height: 4em;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    
}

header.scrolled #logo
{
    display: none;
}


/* =========== menu ============= */	


#menu-hauptmenue .menu-item
{
    background-color: #524B3B;
    margin: 0.125em 0;
    font-family: 'Anton SC';
letter-spacing: .125em;
}

#menu-hauptmenue .menu-item .nav-link
{
    color: #fff;
    margin: 0 0 0 1em;
}

#menu-hauptmenue .menu-item:hover
{
    background-color: #eee1c6;
}

#menu-hauptmenue .menu-item:hover .nav-link,
#menu-hauptmenue .menu-item .nav-link .mPS2id-clicked
{
    color: #ea3828;
}

/* Container für die beiden Icons, um das Rutschen zu verhindern */
.navbar-toggler {
    position: relative;
    width: 40px; /* Feste Breite, falls nötig */
    height: 40px; /* Feste Höhe, falls nötig */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

/* Styling für Toggle-Icons */
.open-icon, .close-icon {
    font-size: 1.125em;
    position: absolute;
    top: 50%; /* Vertikale Zentrierung */
    transform: translateY(-50%);
}

/* Beide Icons übereinander zentrieren und close-icon standardmäßig ausblenden */
.close-icon.d-none {
    display: none;
}

  /* Standardzustand: nur das Hamburger-Icon wird angezeigt */
    .navbar-toggler .close-icon {
        display: none;
    }

    /* Wenn das Menü geöffnet ist (aria-expanded="true"), zeige das "X"-Icon und verstecke das Hamburger-Icon */
    .navbar-toggler[aria-expanded="true"] .open-icon {
        display: none;
    }

header .fa-bars,
header .fa-times
{
    color: #ea3828;
}
				
/* =========== inhalte ============= */

.h2-front
{
background-color: #ea3828;
text-align: center;
color: #fff;
width: 100%;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
font-family: 'Anton SC';
    letter-spacing: .125em;
}
/* =========== sidebar ============= */				
.phone
{
font-size: 1.125em;   
position: fixed; 
top: calc(100vh - 3em);
   
z-index: 9999;
width: 12em;
display: block;  
background:rgba(234, 56, 40, 1);
padding: 0 1em 0 1em;
border: 2px solid #fff;   
height:2em;    
}

.phone a:link,
.phone a:visited
{
 color: #fff;
 text-decoration: none;
 text-align: center; 
}

.phone a:hover,
.phone a:focus
{
    color: #eee1c6;
}

.fa-phone-volume
{
    color:#fff;
    margin: 0 0.25em 0 0;
}

/* =========== footer ============= */	
footer
{
    background-color: #524B3B;
    padding: 2em 0;
}

#nav-service
{
    list-style: none;
}

#nav-service a:link
{
    text-decoration: none;
}
#nav-service a:link,
#nav-service a:visited,
#nav-service a:hover,
#nav-service a:focus
{
    color: #fff;
}
/* =========== images ============= */

img		{
		border:0;
		max-width: 100%;
		height: auto;
		}
		
/* ==========================================================================
   media Queries - mobile devices
   ========================================================================== */
 @media only screen and (min-width: 576px) {

}
 


@media only screen and (min-width: 768px) {
   

}


@media only screen and (min-width: 992px) {
   

}

@media only screen and (min-width: 1200px) {
   
#logo 
{
    width: 18em;
    height: auto;
}
    
#main-navbar-collapse {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(0);
}

header.scrolled #main-navbar-collapse {
  transform: translateY(-2em); 
}

    #menu-hauptmenue .menu-item
{

    margin: 0 0.125em;
}
    
    #menu-hauptmenue .menu-item .nav-link
{
    color: #fff;
    margin: 0;
}
}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 0.3125em 1.25em 1.25em 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 0.3125em auto 0.3125em auto;
}

.alignright {
    float:right;
    margin: 0.3125em 0 1.25em 1.25em;
}

.alignleft {
    float: left;
    margin: 0.3125em 1.25em 1.25em 0;
}

a img.alignright {
    float: right;
    margin: 0.3125em 0 1.25em 1.25em;
}

a img.alignnone {
    margin: 0.3125em 1.25em 1.25em 0;
}

a img.alignleft {
    float: left;
    margin: 0.3125em 1.25em 1.25em 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 0.0625em solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 0.3125em 0.1875em 0.625em;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 0.3125em 1.25em 1.25em 0;
}

.wp-caption.alignleft {
    margin: 0.3125em 1.25em 1.25em 0;
}

.wp-caption.alignright {
    margin: 0.3125em 0 1.25em 1.25em;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 0.6875em;
    line-height: 1.0625em;
    margin: 0;
    padding: 0 0.25em 0.3125em;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(0.0625em, 0.0625em, 0.0625em, 0.0625em);
	position: absolute !important;
	height: 0.0625em;
	width: 0.0625em;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 0.1875em;
	box-shadow: 0 0 0.125em 0.125em rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 0.875em;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 0.3125em;
	line-height: normal;
	padding: 0.9375em 1.4375em 0.875em;
	text-decoration: none;
	top: 0.3125em;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}