/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.home header {
    width: 100%;
}	
	
	#content_frontpage {
		padding: 20px;
	}
	
	#klamour_header > div {
		display:none;
	}
	#klamour_header a {
    justify-self: center;
    width: 100%;
    text-align: center;
}
	#klamour_logo {
    display: block;
    height: auto;
    width: 70%;
		        
}
	article .klamour_head {
    font-size: 50px;
    line-height: 45px;
    margin-bottom: 30px;
}
	#klamour_header {
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    column-gap: 0;
    align-items: center;
}

	.home header img {
		margin-bottom: 10px;
	}	
	.home #main {
    background-image: url(/wp-content/uploads/2026/02/grafik-scaled.png.webp);
    background-size: 100%;
    background-position: 150px bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
	
.home h1 {
    width: 100%;
}
	
.home h1 span {
    font-size: 16px;
    line-height: 1em;
   
}	
	
	.home small {
    position: absolute;
    right: 0;
    bottom: 0px;
    top: auto;
    transform: rotate(90deg);
    font-size: 10px;
}
#frontpage_content {
        position: absolute;
         bottom: calc(var(--bottom-el-height) + 4vh);
        left: 20px;
        font-weight: 400;
        font-size: 20px;
        line-height: 1.2em;
	        max-width: 50%;
    }
	
	
	.footer-navigation .mobile  {
		display: flex;
		
	}
	.footer-navigation {
	justify-content: left;	
		
	}
	.footer-navigation a.round {
		margin-left: 20px;
		    margin-top: 3px;
	}
	
	.footer-navigation a:hover {
    outline: 0px solid #FFF; 
}
	
	/* Burger Button */
a.mobile{
  --w: 34px;       /* Breite */
  --h: 24px;       /* Höhe */
  --line: 5px;     /* Strichstärke */
  --gap: 4px;      /* Abstand */
  --color: #FFF;   /* Farbe */
  margin-top: 8px;
  width: var(--w);
  height: var(--h);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap);
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

a.mobile span{
  display: block;
  height: var(--line);
  width: 100%;
  background: var(--color);
  border-radius: 999px;
  transition: transform .25s ease, opacity .2s ease, width .25s ease;
  transform-origin: center;
}

/* OPTIONAL: Hover */
a.mobile:hover span{
  width: 100%;
}

/* Active/Open State: Klasse "is-open" auf <a> */
a.mobile.is-open span:nth-child(1){
  transform: translateY(calc(var(--gap) + var(--line))) rotate(45deg);
}
a.mobile.is-open span:nth-child(2){
  opacity: 0;
}
a.mobile.is-open span:nth-child(3){
  transform: translateY(calc(-1 * (var(--gap) + var(--line)))) rotate(-45deg);
}

/* Optional: Fokus sichtbar (Accessibility) */
a.mobile:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 8px;
}
	
	.footer-navigation div {
	
		
		/*transition: all 1s ease-in-out;*/
gap: 10px;
		position: absolute;
		backdrop-filter: blur(2px);
        top: -44px;
        width: 100%;
        justify-content: center;
        margin-left: 0;
        background: rgba(255, 255, 255, 0.90);
	}
	
	.is-open.footer-navigation div {
	
	}
	
	    .footer-navigation a.block {
        display: block;
        background-color: transparent;
        height: auto;
        color: #000;
        position: relative;
        border-radius: 5px 5px 5px 5px;
        flex-direction: column;
        justify-content: center;
        font-weight: 700;
        text-decoration: none;
        padding: 10px 10px 10px 10px;
        font-size: 19px;
    }
	 
	
	.footer-navigation a:hover, .footer-navigation a:focus-visible {
		outline: 0px solid #FFF !important;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	
	
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	.footer-navigation a.block {
outline: 5px solid #000;
	}
}

@media only screen and (max-width: 992px) and (min-width: 768px)   {
	.footer-navigation a.block {
	height: 25px;
		        margin-top: 7px;
	}
		.footer-navigation a.round {
		margin-top: 4px;
	}
	
	.footer-navigation a.block {
		display: flex;
	}
	
	#footerNavMenu {
		display: flex !important;
	}
	
	.footer-navigation {
   
    background-size: auto 17px;
    background-position-y: 23px;
    background-position-x: 98%;
  
}
	
	.footer-navigation div {
  
    gap: 0px;
  
}
}
	
	


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.footer-navigation .mobile  {
	display: block;
}
	.footer-navigation a.block {
		display: flex;
	}
	
	#footerNavMenu {
		display: flex !important;
	}
}


@media only screen and (max-width: 1300px) and (min-width: 992px)   {
	#frontpage_content {
    position: absolute;
     bottom: calc(var(--bottom-el-height) + 8vh);
    left: 40px;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.2em;
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	
}

@media (min-width: 1000px) and (max-height: 800px) {
 #frontpage_content {

    font-size: 19px;
    line-height: 1.05em;
}
	
	.home header {
    width: 400px;
}
	
	.home h1 {
    width: 400px;
	}
}