/* ==========================================
   HEADER
========================================== */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;
}

.logo {
    flex-shrink: 0;
}

.logo img {
    max-height: 140px;
    width: auto;
    display: block;
}

body 

{
                 background: #424242; /* Farbe Grau */
                 color: white; /* Text-Farbe Weiß */
                 margin:0; /* Außenabstand */
				 padding:0; /* Innenabstand */
				 font-family:verdana,arial,helvetica,sans-serif; /* Textfamilien */
				 font-size:1.05em; /* Textgröße ~ 16px */
				 line-height:1.3em; /* Textgröße ~ 16px */
				 letter-spacing: 0.02em; /* Buchstaben-Abstand */
				 word-spacing: 0.02em; /* Wörter-Abstand */
				 text-align: center;
				 display: -webkit-flex;
	             display: flex;
	             -webkit-flex-flow: row wrap;
	             flex-flow: row wrap;
	            /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
}



h1 {
    color: white;
    background-color: ;
    font-size: 2.5em;
    font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

h2 {
    color: white;
    background-color: ;
    font-size: 2em;
    line-height:1.4em; /* Textgröße ~ 16px */
    font-weight:bold;
    font-family:arial, "lucida console", sans-serif; /* Schriftart */
    margin-top: 0.5em;
}

h3 {
    color: white;
    background-color: ;
    font-size: 1.5em;
    line-height:1.4em; /* Textgröße ~ 16px */
    font-weight:bold;
    font-family:arial, "lucida console", sans-serif; /* Schriftart */
	 margin-top: 0em;
}

h4 {
    color: white;
    font-size: 1.2em;
    font-weight:bold;
    line-height:1.3em; /* Textgröße ~ 16px */
    font-family:arial, "lucida console", sans-serif; /* Schriftart */
    margin-top: 0em;
    margin-bottom: 1em;
}

h5 { /* Bildunterschriften */
    color: white;
    font-size: 0.8em;
    font-family:arial, "lucida console", sans-serif; /* Schriftart */
}


#wrapper {
 max-width:1024px;
 min-width:300px;
 margin:0 auto;
 background: #640064; /* Farbe Violett */
 min-height:1000px; /* Optional */
}

#kopfbereich {
 background: #640064; /* Farbe Violett */
 margin-top: 5px;
 }

#infobalken{
    background:#640064;
    color:#fff;
    font-weight:bold;
    padding:10px;
    margin-bottom:12px;

    display:flex;
    justify-content:center;
    align-items:center;   /* vertikale Zentrierung */
    flex-wrap:wrap;
    gap:12px;
}


.stern{
    color:#FFD700;
    font-size:1.2em;
    margin:0 12px;
    vertical-align:middle;
    position:relative;
    transform:translateY(-1px);
    top:-1px;
}

.trenner{
    color:#FFD700;
    font-size:1.2em;
    padding:0 10px;
}

#navibereich {
 background: #640064; /* Farbe Violett */
 font-size: 1.0em; /* Textgröße ~ 16px */
 line-height:1.0em; /* Textgröße ~ 16px */
 }

#textbereich {
  padding-top: 0px;
  padding-right: 2%;
  padding-bottom: 0;
  padding-left: 2%;
    margin-top: 5px;
    text-align: left;
}

#produktbereich {
  margin-top: 5px;
  max-width: 100%;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  }

#produktbereich1 {
  margin-top: 5px;
  max-width: 100%;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  }

#schreibmal {
    padding-top: 0px;
  padding-right: 2%;
  padding-bottom: 0;
  padding-left: 2%;
    margin-top: 30px;
    text-align: left;
    }

#fussbereich {
 background: #640064;
 text-align: left;
 margin-left: auto; margin-right: auto;
 margin-top: 0em;
 margin-bottom: 1em;
 }


#inhaltbereich {
  padding-top: 0px;
  padding-right: 2%;
  padding-bottom: 0;
  padding-left: 2%;
    margin-top: 0px;
    text-align: left;
}

#laufband{
   
    font-size:1.4rem;
    padding:10px 0;
    border-top:2px solid #640064;
    border-bottom:2px solid #640064;
}

#abstand {
padding-top:0px;
padding-right:100px;

}
.abstand_innen {
padding-right:0px;
padding-left:50px;

}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


a:focus {
	background: white; /* Farbe Button Hover*/
	color: #640064; /* Farbe Linktext Hover*/
}

a img { border:0;}

.Bild{
    width:98%;
    max-width:450px;
    height:auto;
    margin:3px 1% 0 1%;
    float:none;
}

 .Bild3 {
    width: 98%;
    height: auto;
    max-width: 700px;
      margin-right: 1%;
    margin-left: 1%;
    float:none;
    margin-top: 3px;}


 .Postamtbild {
    width: 100%;
    height: auto;
    max-width: 700px;
    float:none;
    margin-bottom: 3px;
    margin-top: 3px;}

.mySlides{
    display:block;
    width:100%;
    max-width:500px;
    height:auto;
    margin:0 auto;
}


/* ENDE Navigationszeile mit Buttons */		



	
#navi{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#640064;
}

@media (max-width:900px){
    #navi{
        display:none;
    }
}


/* ------------------------------2560-------------------------------- */ 

@media (max-width: 2560px) {
    
    
    

   

    #festabild {
    width: 215px;
    margin-right: 30px;
    margin-left: 50px;}
    
    

   
    

    

    
    #fa {
    font-size: 1em;
    line-height: 1.35em; /* Textgröße ~ 16px */
	letter-spacing: 0.2; /* Buchstaben-Abstand */
	word-spacing: 0.2; /* Wörter-Abstand */
	margin-top: 5px;
    
}
    
    #fabild {
    width: 240px;
    height: auto;
    margin-right: 15px;
    margin-left: 5px;
    margin-bottom: 10px;
    float: left;
}
    
    #fabildgroesser {
    width: 350px;
    height: auto;
    margin-right: 13px;
    margin-left: 3px;
    margin-bottom: 6px;
    float: left;
}
    
    #sonderstempel {
    width: 100%;
    height: auto;
	max-width:600px;
    margin-right: 20px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    
}
    
    #oeffnung {
    font-size: 1.0em;
    line-height: 1.7em; /* Textgröße ~ 16px */
	letter-spacing: 0.1px; /* Buchstaben-Abstand */
	word-spacing: 0.1px; /* Wörter-Abstand */
	margin-top: 10px;
    margin-bottom: 10px;
	float: None;
}
    
    
#gedicht{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    max-width:650px;
    margin:30px auto;
}

#gedichtbild{
    width:170px;
    height:auto;
    flex-shrink:0;
}

#gedicht p{
    margin:0;
    text-align:left;
    line-height:1.5;
}
    
    @media (max-width:768px){

    #gedicht{
        flex-direction:column;
        text-align:center;
    }

    #gedicht p{
        text-align:center;
    }

    #gedichtbild{
        width:140px;
    }
}
    
    .marquee {
max-width: 100vw; /* iOS braucht das */    
        width: 100%;
max-width: 600px;
height: auto;
 width: 600px;
margin: auto;
 padding: 3px;
 overflow: hidden;
 white-space: nowrap;
 border: solid 1px white;

}
    
    .marquee span {
		display: inline-block;
		padding-left: 100%;
		animation: marquee 14s linear infinite;
	}
    
    .vertikal {
    text-align: center;
    width: auto;
    height: 540px; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal {
    text-align: center;
    width: 100%;
max-width: 540px;
height: auto;
    border: 0; 
    margin-top: 0em;
}
    
.horizontal-postkarte {
    text-align:center;
    width: 100%;
max-width: 440px;
height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.vertikal-postkarte {
    text-align:center;
    width: 100%;
max-width: 440px;
height: auto; 
    border: 0; 
    margin-top: 0em;
}

.sonderstempel {
    text-align:center;
    width: 100%;
max-width: 440px;
height: auto;
    border: 0; 
    border-radius: 18px;
    margin: 0em;
	float: none;
}

.zweizeilig{
    line-height:1.4;
}

.sonderstempelaufmarken {
    text-align:center;
    width: 100%;
max-width: 650px;
height: auto; 
    border: 0;
    border-radius: 20px;
    margin-top: 0em;
	float: none;
}

.maschinenstempel {
    text-align:center;
    width: 100%;
max-width: 300px;
height: auto;
    border: 0; 
	margin-top: 0em;
	float: none; /* Hier standt right. Fehler vielleicht */
	
	}
    
.nikolausmitbriefen {
    width: 45%;
    height: auto;
    margin-right: 1%;
    margin-left: 1%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
      }
    
}

/* ------------------------------1024------------------------------- */ 

@media (max-width: 1024px) {
    

#festabild {
    width: 215px;
    margin-right: 30px;
    margin-left: 50px;
}      
    
    
    #fa {
    font-size: 1em;
    line-height: 1.35em; /* Textgröße ~ 16px */
	letter-spacing: 0.2; /* Buchstaben-Abstand */
	word-spacing: 0.2; /* Wörter-Abstand */
	margin-top: 20px;
    
}
    #fabild {
    width: 240px;
    height: auto;
    margin-right: 15px;
    margin-left: 5px;
    margin-bottom: 7px;
    float: left;
}
    
        
    #fabildgroesser {
    width: 400px;
    height: auto;
    margin-right: 13px;
    margin-left: 3px;
    margin-bottom: 6px;
    float: left;
}
    
    
    #sonderstempel {
    width: 100%;
    height: auto;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    float: none;
}
    
    #oeffnung {
    font-size: 1.0em;
    line-height: 1.7em; /* Textgröße ~ 16px */
	letter-spacing: 0.1px; /* Buchstaben-Abstand */
	word-spacing: 0.1px; /* Wörter-Abstand */
	margin-top: 10px;
    margin-bottom: 10px;
	float: None;
}
    
    
.marquee {
max-width: 100vw; /* iOS braucht das */
    
 width: 600px;
 
 margin: auto;
 padding: 3px;
 overflow: hidden;
 white-space: nowrap;
 border: solid 1px white;
 
}
    
.marquee span {
		display: inline-block;
		padding-left: 100%;
		animation: marquee 14s linear infinite;
	}
    
    
.vertikal {
    text-align: center;
    width: auto;
    height: 540px; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal {
    text-align: center;
    width: 540px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal-postkarte {
    text-align:center;
    width: 440px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.vertikal-postkarte {
    text-align:center;
    width: auto;
    height: 440px; 
    border: 0; 
    margin-top: 0em;
}

.sonderstempel {
    text-align:center;
    width: 400px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.sonderstempelaufmarken {
    text-align:center;
    width: 650px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.maschinenstempel {
    text-align:center;
    width: 300px;
    height: auto; 
    border: 0; 
	margin-top: 0em;
	float: none;
	}
    
.nikolausmitbriefen {
    width: 45%;
    height: auto;
    margin-right: 1%;
    margin-left: 1%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
      }
    
 }

/* ------------------------------768------------------------------- */ 

@media (max-width: 768px) {
    

#festabild {
    width: 165px;
    margin-right: 20px;
	margin-left: 20px;
}    
        
    #fa {
    font-size: 0.95em;
    line-height: 1.35em; /* Textgröße ~ 16px */
	letter-spacing: 0.2; /* Buchstaben-Abstand */
	word-spacing: 0.2; /* Wörter-Abstand */
	margin-top: 20px;
    }
    
    #fabild {
    width: 180px;
    height: auto;
    margin-right: 15px;
    margin-left: 5px;
    margin-bottom: 8px;
    float: left;
}
    
    #fabildgroesser {
    width: 350px;
    height: auto;
    margin-right: 13px;
    margin-left: 3px;
    margin-bottom: 6px;
    float: left;
}
    
    #sonderstempel {
    width: 100%;
    height: auto;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    float: left;
}
    
    #oeffnung {
    font-size: 0.90em;
    line-height: 1.7em; /* Textgröße ~ 16px */
	letter-spacing: 0.1px; /* Buchstaben-Abstand */
	word-spacing: 0.1px; /* Wörter-Abstand */
	margin-top: 18px;
    margin-bottom: 10px;
}
    
    .marquee {
        max-width: 100vw; /* iOS braucht das */
 width: 480px;
      
 margin: auto;
 padding: 3px;
 overflow: hidden;
 white-space: nowrap;
 border: solid 1px white;

}
    
    .marquee span {
		display: inline-block;
		padding-left: 100%;
		animation: marquee 12s linear infinite;
	}

    
.vertikal {
    text-align:center;
    width: auto;
    height: 440px; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal {
    text-align:center;
    width: 440px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal-postkarte  {
    text-align:center;
    width: 340px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.vertikal-postkarte {
    text-align:center;
    width: auto;
    height: 340px; 
    border: 0; 
    margin-top: 0em;
}
    
    #oeffnung {
    font-size: 0.90em;
    line-height: 1.5em; /* Textgröße ~ 16px */
	letter-spacing: 0.1px; /* Buchstaben-Abstand */
	word-spacing: 0.1px; /* Wörter-Abstand */
	margin-top: 18px;
    margin-bottom: 10px;
}

.sonderstempel {
    text-align:center;
    width: 300px;
    height: auto; 
    border: 0; 
    margin-top: 2em;
}

.sonderstempelaufmarken {
    text-align:center;
    width: 500px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.maschinenstempel {
    text-align:center;
    width: 270px;
    height: auto; 
    border: 0; 
	margin-top: 0em;
	float: none;
	}
    
.nikolausmitbriefen {
    width: 50%;
    height: auto;
    margin-right: 1%;
    margin-left: 1%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
      }
    
  }

 /* ------------------------------512------------------------------- */ 

@media (max-width: 512px) {
    

    #oeffnung {
    font-size: 0.80em;
    line-height: 1.3em; /* Textgröße ~ 16px */
	letter-spacing: 0.1px; /* Buchstaben-Abstand */
	word-spacing: 0.1px; /* Wörter-Abstand */
	margin-top: 8px;
}
    
#sonderstempel {
    width: 100%;
    height: auto;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    float: left;
}
    
    
#festabild {
    width: 120px;
    margin-right: 7px;
    margin-left: 0px;
    margin-top: 14px;
    margin-bottom: 15px;
}

    
     #fa {
    font-size: 0.9em;
    line-height: 1.35em; /* Textgröße ~ 16px */
	letter-spacing: 0.2; /* Buchstaben-Abstand */
	word-spacing: 0.2; /* Wörter-Abstand */
	margin-top: 20px;
    
}
    
    #fabild {
    width: 150px;
    height: auto;
    margin-right: 13px;
    margin-left: 3px;
    margin-bottom: 6px;
    float: left;
}
    
    #fabildgroesser {
    width: 250px;
    height: auto;
    margin-right: 13px;
    margin-left: 3px;
    margin-bottom: 6px;
    float: left;
}
    
     
    .marquee {
        max-width: 100vw; /* iOS braucht das */
	width: 340px;
     	margin: auto;
	padding: 3px;
	overflow: hidden;
	white-space: nowrap;
	border: solid 1px white;
	
}
    
.marquee span {
		display: inline-block;
		padding-left: 100%;
		animation: marquee 11s linear infinite;
	}    
    
.vertikal {
    text-align:center;
    width: auto;
    height: 340px; 
    border: 0; 
    margin-top: 0em;
}
    
.vertikal-postkarte {
    text-align:center;
    width: auto;
    height: 240px; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal {
    text-align:center;
    width: 340px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal-postkarte {
    text-align:center;
    width: 240px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.sonderstempel {
    text-align:center;
    width: 260px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.sonderstempelaufmarken {
    text-align:center;
    width: 300px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.maschinenstempel {
    text-align:center;
    width: 220px;
    height: auto; 
    border: 0; 
	margin-top: 0em;
	float: none;
	}
   
.nikolausmitbriefen {
    width: 50%;
    height: auto;
    margin-right: 1%;
    margin-left: 1%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
      }
        
   }
 
 /* --------------------------------------------------------------- */ 

@media (max-width: 2000px) {
  .produkte {
    width: 235px;
    float: none;
    margin-top: 5px;
  }
}

@media (max-width: 1024px) {
  .produkte {
    width: 230px;
    float: none;
    margin-top: 5px;
  }
}

@media (max-width: 768px) {
  .produkte {
    width: 235px;
    float: none;
    margin-top: 0;
    margin-bottom: 5px;

  }
}

@media (max-width: 512px) {
  .produkte {
    width: 180px;
    float: none;
    margin-top: 0;
    margin-bottom: 3px;
 }
}

 /* ------------------------------------------------------------------- */
 /* ------------------------------------------------------------------- */ 

 .Bild1 {
    width: 98%;
    height: auto;
      max-width: 500px;
    float: none;}


figcaption {
padding: 3px 5px;
border-top: 0px solid gray;
font-style: italic;
font-size: smaller;
margin: 0 auto;
margin-bottom: 20px;
}

#mittig {
 margin: 0 auto;
 text-align: center;
}

.mittig{
    width:100%;
    max-width:100%;
    margin:0 auto;
    text-align:center;
    clear:both;
    overflow:hidden;
}

.mittigoben {
margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 0px;
text-align: center;
}

.links {
text-align: left;
}

#teaser {
text-align: center;
margin-top: 0em;
}

#teaser_group {
display:inline-block;
 background:#640064;
}
 
#teaser_group div {
display:inline-block;
}

#nikprodukte {
text-align:center;
margin-top: 0em;
float: left;
}

#nikprodukte_group {
display:inline-block;
 background:#640064;
}
 
#nikprodukte_group div {
display:inline-block;
}

.NeueBI {
    width: 100%;
    max-width: 440px;
    height: auto;
}


#cappuccino {
	padding-top: 0px;
  padding-right: 2%;
  padding-bottom: 0;
  padding-left: 2%;
    margin-top: 0px;
    text-align: left;
}

@keyframes marquee {
 0%   { text-indent: -50% }
 100% { text-indent: 100% }
}

.marquee span:hover {
		animation-play-state: paused 
            
	}


/* Make it move */
	@keyframes marquee {
		0%   { transform: translateX(0); }
		100% { transform: translateX(-100%); }
	}

 .hr1 {
      height: 45px;
      background: url(Bilder/Trennlinie.jpg) no-repeat center;
      border: none;
      margin: 0;
	  clear: both;
      }


#festausschuss {
  padding-top: 0px;
  padding-right: 2%;
  padding-bottom: 0;
  padding-left: 2%;
    margin-top: 0px;
    text-align: left;
}


.marginlinks {
   text-align: left;
   margin:0.5em auto;
   display: table;
}

.nofloat {
clear: both;
}

.nikprodukte {
text-align:center;
}

.Bildgroesser {
    width: 100%;
    height: auto;
    max-width: 990px;
    float:none;
    margin-bottom: 3px;
    margin-top: 3px;  
}


#briefeschreiber {
    width: 98%;
    margin-right: 1%;
    margin-left: 1%;
    height: auto;
       }

#vielendank {
    width: 98%;
    height: auto;
    padding-left: 2%;
    margin-Top: 5%;
       }

ul.a {list-style-type: none;
    display:inline-block;}

ul.b {list-style-type: square;
    display:inline-block;}

li.none {list-style-type: none;
    }

li.b {list-style-type: square;
    }

hr.a {
border: 0;
width: 63%;
height: 2px;
text-align: left;
background-color: #FFD630;
} 

#schreib {
   	line-height:1.6em; /* Textgröße ~ 16px */
	letter-spacing: 0.01em; /* Buchstaben-Abstand */
	word-spacing: 0.01em; /* Wörter-Abstand */
        }

.Zeile {
   	line-height:1.6em; /* Textgröße ~ 16px */
	letter-spacing: 0.01em; /* Buchstaben-Abstand */
	word-spacing: 0.01em; /* Wörter-Abstand */
        }
.countdown-timer {
    width: 98%;
    height: auto;
    max-width: 500px; 
}

/* Smartphone Optimierung */
 
@media screen and (max-width: 768px) {
 
body {
overflow-x: hidden;
}
 
h1 {
font-size: 2rem !important;
}
 
h2 {
font-size: 1.6rem !important;
line-height: 1.2 !important;
}
 
h3 {
font-size: 1.3rem !important;
}
 

.Bildgroesser,
.marquee {
width: 95% !important;
max-width: 95% !important;
}
 

#textbereich,
#schreibmal,
#cappuccino,
#festausschuss {
padding-left: 10px;
padding-right: 10px;
}
}

/* ==================================
   NEUE RESPONSIVE OPTIMIERUNG
================================== */

*{
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
}

/* Header */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;
}

.logo {
    flex-shrink: 0;
}

.logo img {
    max-height: 140px;
    width: auto;
    display: block;
}

#navi {
    display: flex;
    flex: 1;
    justify-content: center;
    background: #640064;
}



/* Navigation Desktop */

#navi{
    display:flex;
    justify-content:center;
    gap:20px;
}

#navi a{
    text-decoration:none;
    color:#640064;
    font-weight:bold;
    padding:10px 15px;
}

#navi a:hover{
    color:#FFD630;
}

/* Hero / Slider */




.Bild1,
.Bildgroesser{
    width:100%;
    height:auto;
}

.horizontal,
.horizontal-postkarte,
.vertikal,
.vertikal-postkarte {
    max-width:100%;
    height:auto;
}

.marquee{
    width:100%;
    max-width:600px;
}

/* ==========================
   SMARTPHONE
========================== */

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

  

    #navi{
        display:none;
        top:90px;
        left:0;
        width:auto;
        background:#640064;
        flex-direction:column;
        text-align:left;
    }

    #navi.active{
        display:flex;
    }

    #navi a{
        color:white;
        padding:15px 20px;
        border-bottom:1px solid rgba(255,255,255,0.2);
    }
}

/* ==================================================
   NIKOLAUSPOSTAMT.DE
   RESPONSIVE OPTIMIERUNG 2026
================================================== */

/* Allgemein */

*{
    box-sizing:border-box;
}

html,
body{
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}

/* Header */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;
}

.logo {
    flex-shrink: 0;
}

.logo img {
    max-height: 140px;
    width: auto;
    display: block;
}

#navi {
    display: flex;
    flex: 1;
    justify-content: center;
    background: #640064;
}





.Bild1,
.Bildgroesser,
#sonderstempel{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
}

/* Sonstige Bilder */

.horizontal,
.horizontal-postkarte,
.vertikal,
.vertikal-postkarte {
    width:100%;
    max-width:100%;
    height:auto;
}

/* Lauftext */

.marquee{
    width:100% !important;
    max-width:600px !important;
    margin:0 auto;
}

/* Teaserbilder */

.nikolausmitbriefen{
    width:100%;
    max-width:500px;
    margin:0 auto;
    display:block;
}

/* Hero-Bild */

.hero{
    position:relative;
    overflow:hidden;
}

.hero img{
    width:100%;
    display:block;
}

.hero-text{
    position:absolute;
    left:40px;
    bottom:30px;
    background:rgba(0,0,0,0.4);
    color:white;
    padding:20px;
    max-width:500px;
}

/* ==================================================
   TABLET + SMARTPHONE
================================================== */

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

    /* Hamburger anzeigen */

    /* Navigation einklappen */

    #navi{
        display:none;
        flex-direction:column;
        width:auto;
        background:#640064;
        text-align:left;
    }

    #navi.active{
        display:flex;
    }

    #navi a{
        padding:15px;
        border-top:1px solid rgba(255,255,255,.15);
    }

    /* Überschriften */

    h1{
        font-size:2rem !important;
        line-height:1.2;
    }

    h2{
        font-size:1.6rem !important;
        line-height:1.2;
    }

    h3{
        font-size:1.3rem !important;
        line-height:1.2;
    }

    /* Innenabstände */

    #textbereich,
    #inhaltbereich,
    #schreibmal,
    #cappuccino,
    #festausschuss,
    #fussbereich{
        padding-left:10px;
        padding-right:10px;
    }

    /* Bilder zentrieren */

 
    #festabild,
    #fabild,
    #fabildgroesser{
        float:none !important;
        display:block;
        margin:10px auto !important;
    }


    /* Lauftext */

    .marquee{
        width:95% !important;
        max-width:95% !important;
    }

    /* Hero Text */

    .hero-text{
        left:10px;
        right:10px;
        bottom:10px;
        padding:12px;
    }

    .hero-text h1{
        font-size:1.6rem !important;
    }
}

/* ==================================================
   SMARTPHONE KLEINER 512 PX
================================================== */

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

    h1{
        font-size:1.7rem !important;
    }

    h2{
        font-size:1.4rem !important;
    }

    h3{
        font-size:1.2rem !important;
    }

    .hero-text{
        padding:10px;
    }
}

/* =====================================
   MOBILE FIX NIKOLAUSPOSTAMT 2026
===================================== */

*{
    box-sizing:border-box;
}

html,
body{
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}



.Bild1,
.Bildgroesser,
.horizontal,
.horizontal-postkarte,
.vertikal,
.vertikal-postkarte {
    max-width:100% !important;
    height:auto !important;
}

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

 

    #navi{
        display:none;
        width:auto;
        flex-direction:column;
        background:#640064;
    }

    #navi.active{
        display:flex;
    }

    #navi a{
        display:block;
        padding:12px 15px;
        color:white;
        border-bottom:1px solid rgba(255,255,255,.2);
    }

    

    .horizontal,
    .horizontal-postkarte {
        width:100% !important;
    }

    #fabild,
    #festabild,
    #fabildgroesser {
        float:none !important;
        display:block !important;
        margin:10px auto !important;
    }
}

/* letzte vorhandene CSS-Regel */
#fussbereich {
    padding: 20px;
}

/* HIER EINFÜGEN */



/* Tablet und Smartphone */
@media (max-width: 1050px) {

/* ==========================================
   HEADER
========================================== */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;
}

.logo {
    flex-shrink: 0;
}

.logo img {
    max-height: 140px;
    width: auto;
    display: block;
}

#navi {
    display: flex;
    flex: 1;
    justify-content: center;
    background: #640064;
}


@media (max-width:1050px) {

    #navi {
        display: none;
    }

    
}

}
#mobilemenu{
    display:none;
    width:100%;
    background:#640064;
}


body 


{
                 background: #424242; /* Farbe Grau */
                 color: white; /* Text-Farbe Weiß */
                 margin:0; /* Außenabstand */
				 padding:0; /* Innenabstand */
				 font-family:verdana,arial,helvetica,sans-serif; /* Textfamilien */
				 font-size:1.05em; /* Textgröße ~ 16px */
				 line-height:1.3em; /* Textgröße ~ 16px */
				 letter-spacing: 0.02em; /* Buchstaben-Abstand */
				 word-spacing: 0.02em; /* Wörter-Abstand */
				 text-align: center;
				 display: -webkit-flex;
	             display: flex;
	             -webkit-flex-flow: row wrap;
	             flex-flow: row wrap;
	            /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
}



h1 {
    color: white;
    background-color: ;
    font-size: 2.5em;
    font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

h2 {
    color: white;
    background-color: ;
    font-size: 2em;
    line-height:1.4em; /* Textgröße ~ 16px */
    font-weight:bold;
    font-family:arial, "lucida console", sans-serif; /* Schriftart */
    margin-top: 0.5em;
}

h3 {
    color: white;
    background-color: ;
    font-size: 1.5em;
    line-height:1.4em; /* Textgröße ~ 16px */
    font-weight:bold;
    font-family:arial, "lucida console", sans-serif; /* Schriftart */
	 margin-top: 0em;
}

h4 {
    color: white;
    font-size: 1.2em;
    font-weight:bold;
    line-height:1.3em; /* Textgröße ~ 16px */
    font-family:arial, "lucida console", sans-serif; /* Schriftart */
    margin-top: 0em;
    margin-bottom: 1em;
}

h5 { /* Bildunterschriften */
    color: white;
    font-size: 0.8em;
    font-family:arial, "lucida console", sans-serif; /* Schriftart */
}




#wrapper {
 max-width:1024px;
 min-width:300px;
 margin:0 auto;
 background: #640064; /* Farbe Violett */
 min-height:1000px; /* Optional */
}

#kopfbereich {
 background: #640064; /* Farbe Violett */
 margin-top: 5px;
 }

#navibereich {
 background: #640064; /* Farbe Violett */
 font-size: 1.0em; /* Textgröße ~ 16px */
 line-height:1.0em; /* Textgröße ~ 16px */
 }

#textbereich {
  padding-top: 0px;
  padding-right: 2%;
  padding-bottom: 0;
  padding-left: 2%;
    margin-top: 5px;
    text-align: left;
}

#produktbereich {
  margin-top: 5px;
  max-width: 100%;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  }

#schreibmal {
    padding-top: 0px;
  padding-right: 2%;
  padding-bottom: 0;
  padding-left: 2%;
    margin-top: 30px;
    text-align: left;
    }

#fussbereich {
 background: #640064;
 text-align: left;
 margin-left: auto; margin-right: auto;
 margin-top: 0em;
 margin-bottom: 1em;
 }


#inhaltbereich {
  padding-top: 0px;
  padding-right: 2%;
  padding-bottom: 0;
  padding-left: 2%;
    margin-top: 0px;
    text-align: left;
}

.anders{
    display:inline-block;
    border:1px solid #ffffff;
    background:#640064;
    color:#ffffff;
    padding:0.5em;
    margin:0.5em;
}

.anders:hover,
.anders:focus{
    background:#ffffff;
    color:#640064;
}

#abstand {
padding-top:0px;
padding-right:100px;

}
.abstand_innen {
padding-right:0px;
padding-left:50px;

}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


.social img {
    height:50px;
    width:auto;
}

a:focus {
	background: white; /* Farbe Button Hover*/
	color: #640064; /* Farbe Linktext Hover*/
}

a img { border:0;}


/* ENDE Navigationszeile mit Buttons */		



		
/* Das Menü zum Hamburger Button*/
/* Standard */

#navi{
    display:none;
    background:#640064;
    position:sticky;
    top:0;
    padding:2px;
}

/* Desktop */

@media (min-width:769px){

    #navi{
        display:flex;
        justify-content:space-evenly;
        align-items:center;
        width:100%;
        background:#640064;
    }

    #navi ul{
        display:flex;
        flex-wrap:nowrap;
        justify-content:space-between;
        margin:0;
        padding:0;
        list-style:none;
    }

}

@media (max-width:1200px){

    #navi{
        display:flex;
        width:100%;
        align-items:center;
        justify-content:space-between;
        background:#640064;
    }

}


#navi > a {
    flex: 1;
    text-align: center;
    padding: 15px 5px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
}

    #navi.active {
        display: flex;
    }

    #navi a {
        color: white;
        text-decoration: none;
        padding: 15px;
        text-align: center;
        border-top:1px solid #ffffff;
    }
}

#navi li {
    flex: 1;
    text-align: center;
}
    
    #navi a {
    flex: 1;
    text-align: center;
    padding: 15px 5px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
}

}

/* ----------------------------------------------------------------- */ 
/* ------------------------------2560-------------------------------- */ 

@media (max-width: 2560px) {
    
   
    #festabild {
    width: 215px;
    margin-right: 30px;
    margin-left: 50px;}
    
    
    #fa {
    font-size: 1em;
    line-height: 1.35em; /* Textgröße ~ 16px */
	letter-spacing: 0.2; /* Buchstaben-Abstand */
	word-spacing: 0.2; /* Wörter-Abstand */
	margin-top: 5px;
    
}
    
    #fabild {
    width: 240px;
    height: auto;
    margin-right: 15px;
    margin-left: 5px;
    margin-bottom: 10px;
    float: left;
}
    
    #fabildgroesser {
    width: 350px;
    height: auto;
    margin-right: 13px;
    margin-left: 3px;
    margin-bottom: 6px;
    float: left;
}
    
    #sonderstempel {
    width: 100%;
    height: auto;
	max-width:600px;
    margin-right: 20px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    
}
    
    #oeffnung {
    font-size: 1.0em;
    line-height: 1.7em; /* Textgröße ~ 16px */
	letter-spacing: 0.1px; /* Buchstaben-Abstand */
	word-spacing: 0.1px; /* Wörter-Abstand */
	margin-top: 10px;
    margin-bottom: 10px;
	float: None;
}
    
    .marquee {
    max-width: 100vw; /* iOS braucht das */    
    width: 100%;
    max-width: 600px;
    height: auto;
    width: 600px;
    margin: auto;
    padding: 3px;
    overflow: hidden;
    white-space: nowrap;
    border: solid 1px white;

}
    
    .marquee span {
		display: inline-block;
		padding-left: 100%;
		animation: marquee 14s linear infinite;
	}
    
    .vertikal {
    text-align: center;
    width: auto;
    height: 540px; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal {
    text-align: center;
    width: 100%;
max-width: 540px;
height: auto;
    border: 0; 
    margin-top: 0em;
}
    
.horizontal-postkarte {
    text-align:center;
    width: 100%;
max-width: 440px;
height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.vertikal-postkarte {
    text-align:center;
    width: 100%;
max-width: 440px;
height: auto; 
    border: 0; 
    margin-top: 0em;
}

.sonderstempel {
    text-align:center;
    width: 100%;
max-width: 440px;
height: auto;
    border: 0; 
    border-radius: 18px;
    margin: 0em;
	float: none;
}

.sonderstempelaufmarken {
    text-align:center;
    width: 100%;
max-width: 650px;
height: auto; 
    border: 0;
    border-radius: 20px;
    margin-top: 0em;
	float: none;
}

.maschinenstempel {
    text-align:center;
    width: 100%;
max-width: 300px;
height: auto;
    border: 0; 
	margin-top: 0em;
	float: none; /* Hier standt right. Fehler vielleicht */
	
	}
    
.nikolausmitbriefen {
    width: 45%;
    height: auto;
    margin-right: 1%;
    margin-left: 1%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
      }
    
}

/* ----------------------------------------------------------------- */ 
/* ------------------------------1024------------------------------- */ 

@media (max-width: 1024px) {
    
  
#festabild {
    width: 215px;
    margin-right: 30px;
    margin-left: 50px;
}      
    
   
    #fa {
    font-size: 1em;
    line-height: 1.35em; /* Textgröße ~ 16px */
	letter-spacing: 0.2; /* Buchstaben-Abstand */
	word-spacing: 0.2; /* Wörter-Abstand */
	margin-top: 20px;
    
}
    #fabild {
    width: 240px;
    height: auto;
    margin-right: 15px;
    margin-left: 5px;
    margin-bottom: 7px;
    float: left;
}
    
        
    #fabildgroesser {
    width: 400px;
    height: auto;
    margin-right: 13px;
    margin-left: 3px;
    margin-bottom: 6px;
    float: left;
}
    
    
    #sonderstempel {
    width: 100%;
    height: auto;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    float: none;
}
    
    #oeffnung {
    font-size: 1.0em;
    line-height: 1.7em; /* Textgröße ~ 16px */
	letter-spacing: 0.1px; /* Buchstaben-Abstand */
	word-spacing: 0.1px; /* Wörter-Abstand */
	margin-top: 10px;
    margin-bottom: 10px;
	float: None;
}
    
    
.marquee {
max-width: 100vw; /* iOS braucht das */
    
 width: 600px;
 
 margin: auto;
 padding: 3px;
 overflow: hidden;
 white-space: nowrap;
 border: solid 1px white;
 
}
    
.marquee span {
		display: inline-block;
		padding-left: 100%;
		animation: marquee 14s linear infinite;
	}
    
    
.vertikal {
    text-align: center;
    width: auto;
    height: 540px; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal {
    text-align: center;
    width: 540px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal-postkarte {
    text-align:center;
    width: 440px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.vertikal-postkarte {
    text-align:center;
    width: auto;
    height: 440px; 
    border: 0; 
    margin-top: 0em;
}

.sonderstempel {
    text-align:center;
    width: 400px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.sonderstempelaufmarken {
    text-align:center;
    width: 650px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.maschinenstempel {
    text-align:center;
    width: 300px;
    height: auto; 
    border: 0; 
	margin-top: 0em;
	float: none;
	}
    
.nikolausmitbriefen {
    width: 45%;
    height: auto;
    margin-right: 1%;
    margin-left: 1%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
      }
    
 }


/* ----------------------------------------------------------------- */ 
/* ------------------------------768------------------------------- */ 

@media (max-width: 768px) {
    


#festabild {
    width: 165px;
    margin-right: 20px;
	margin-left: 20px;
}    
        
  
    #fa {
    font-size: 0.95em;
    line-height: 1.35em; /* Textgröße ~ 16px */
	letter-spacing: 0.2; /* Buchstaben-Abstand */
	word-spacing: 0.2; /* Wörter-Abstand */
	margin-top: 20px;
    }
    
    #fabild {
    width: 180px;
    height: auto;
    margin-right: 15px;
    margin-left: 5px;
    margin-bottom: 8px;
    float: left;
}
    
    #fabildgroesser {
    width: 350px;
    height: auto;
    margin-right: 13px;
    margin-left: 3px;
    margin-bottom: 6px;
    float: left;
}
    
    #sonderstempel {
    width: 100%;
    height: auto;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    float: left;
}
    
    #oeffnung {
    font-size: 0.90em;
    line-height: 1.7em; /* Textgröße ~ 16px */
	letter-spacing: 0.1px; /* Buchstaben-Abstand */
	word-spacing: 0.1px; /* Wörter-Abstand */
	margin-top: 18px;
    margin-bottom: 10px;
}
    
    .marquee {
        max-width: 100vw; /* iOS braucht das */
 width: 480px;
      
 margin: auto;
 padding: 3px;
 overflow: hidden;
 white-space: nowrap;
 border: solid 1px white;

}
    
    .marquee span {
		display: inline-block;
		padding-left: 100%;
		animation: marquee 12s linear infinite;
	}

    
.vertikal {
    text-align:center;
    width: auto;
    height: 440px; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal {
    text-align:center;
    width: 440px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal-postkarte  {
    text-align:center;
    width: 340px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.vertikal-postkarte {
    text-align:center;
    width: auto;
    height: 340px; 
    border: 0; 
    margin-top: 0em;
}
    
    #oeffnung {
    font-size: 0.90em;
    line-height: 1.5em; /* Textgröße ~ 16px */
	letter-spacing: 0.1px; /* Buchstaben-Abstand */
	word-spacing: 0.1px; /* Wörter-Abstand */
	margin-top: 18px;
    margin-bottom: 10px;
}

.sonderstempel {
    text-align:center;
    width: 300px;
    height: auto; 
    border: 0; 
    margin-top: 2em;
}

.sonderstempelaufmarken {
    text-align:center;
    width: 500px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.maschinenstempel {
    text-align:center;
    width: 270px;
    height: auto; 
    border: 0; 
	margin-top: 0em;
	float: none;
	}
    
.nikolausmitbriefen {
    width: 50%;
    height: auto;
    margin-right: 1%;
    margin-left: 1%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
      }
    
  }

/* ----------------------------------------------------------------- */  
/* ------------------------------512------------------------------- */ 

@media (max-width: 512px) {
    

    #oeffnung {
    font-size: 0.80em;
    line-height: 1.3em; /* Textgröße ~ 16px */
	letter-spacing: 0.1px; /* Buchstaben-Abstand */
	word-spacing: 0.1px; /* Wörter-Abstand */
	margin-top: 8px;
}
    
#sonderstempel {
    width: 100%;
    height: auto;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    float: left;
}
    

    
#festabild {
    width: 120px;
    margin-right: 7px;
    margin-left: 0px;
    margin-top: 14px;
    margin-bottom: 15px;
}

    

 
    

    
     #fa {
    font-size: 0.9em;
    line-height: 1.35em; /* Textgröße ~ 16px */
	letter-spacing: 0.2; /* Buchstaben-Abstand */
	word-spacing: 0.2; /* Wörter-Abstand */
	margin-top: 20px;
    
}
    
    #fabild {
    width: 150px;
    height: auto;
    margin-right: 13px;
    margin-left: 3px;
    margin-bottom: 6px;
    float: left;
}
    
    #fabildgroesser {
    width: 250px;
    height: auto;
    margin-right: 13px;
    margin-left: 3px;
    margin-bottom: 6px;
    float: left;
}
    
 
    
    .marquee {
        max-width: 100vw; /* iOS braucht das */
	width: 340px;
     	margin: auto;
	padding: 3px;
	overflow: hidden;
	white-space: nowrap;
	border: solid 1px white;
	
}
    
.marquee span {
		display: inline-block;
		padding-left: 100%;
		animation: marquee 11s linear infinite;
	}    
    
.vertikal {
    text-align:center;
    width: auto;
    height: 340px; 
    border: 0; 
    margin-top: 0em;
}
    
.vertikal-postkarte {
    text-align:center;
    width: auto;
    height: 240px; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal {
    text-align:center;
    width: 340px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}
    
.horizontal-postkarte {
    text-align:center;
    width: 240px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.sonderstempel {
    text-align:center;
    width: 260px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.sonderstempelaufmarken {
    text-align:center;
    width: 300px;
    height: auto; 
    border: 0; 
    margin-top: 0em;
}

.maschinenstempel {
    text-align:center;
    width: 220px;
    height: auto; 
    border: 0; 
	margin-top: 0em;
	float: none;
	}
   
.nikolausmitbriefen {
    width: 50%;
    height: auto;
    margin-right: 1%;
    margin-left: 1%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
      }
        
   }
 
 /* --------------------------------------------------------------- */ 
 /* --------------------------------------------------------------- */ 

@media (max-width: 2000px) {
  .produkte {
    width: 235px;
    float: none;
    margin-top: 5px;
  }
}

@media (max-width: 1024px) {
  .produkte {
    width: 230px;
    float: none;
    margin-top: 5px;
  }
}

@media (max-width: 768px) {
  .produkte {
    width: 235px;
    float: none;
    margin-top: 0;
    margin-bottom: 5px;

  }
}

@media (max-width: 512px) {
  .produkte {
    width: 180px;
    float: none;
    margin-top: 0;
    margin-bottom: 3px;
 }
}

 /* ------------------------------------------------------------------- */
 /* ------------------------------------------------------------------- */ 

 .Bild1 {
    width: 98%;
    height: auto;
      max-width: 500px;
    float: none;}



figcaption {
padding: 3px 5px;
border-top: 0px solid gray;
font-style: italic;
font-size: smaller;
margin: 0 auto;
margin-bottom: 20px;
}

#mittig {
 margin: 0 auto;
 text-align: center;
}

.mittig {
margin: 0 auto;
text-align: center;
    clear: both;
    
}

.mittigoben {
margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 0px;
text-align: center;
}

.links {
text-align: left;
}

#teaser {
text-align: center;
margin-top: 0em;
}

#teaser_group {
display:inline-block;
 background:#640064;
}
 
#teaser_group div {
display:inline-block;
}

#nikprodukte {
text-align:center;
margin-top: 0em;
float: left;
}

#nikprodukte_group {
display:inline-block;
 background:#640064;
}
 
#nikprodukte_group div {
display:inline-block;
}

.NeueBI {
    width: 100%;
    max-width: 440px;
    height: auto;
}


#cappuccino {
	padding-top: 0px;
  padding-right: 2%;
  padding-bottom: 0;
  padding-left: 2%;
    margin-top: 0px;
    text-align: left;
}

@keyframes marquee {
 0%   { text-indent: -50% }
 100% { text-indent: 100% }
}

.marquee span:hover {
		animation-play-state: paused 
            
	}


/* Make it move */
	@keyframes marquee {
		0%   { transform: translateX(0); }
		100% { transform: translateX(-100%); }
	}

 .hr1 {
      height: 45px;
      background: url(Bilder/Trennlinie.jpg) no-repeat center;
      border: none;
      margin: 0;
	  clear: both;
      }


#festausschuss {
  padding-top: 0px;
  padding-right: 2%;
  padding-bottom: 0;
  padding-left: 2%;
    margin-top: 0px;
    text-align: left;
}


.marginlinks {
   text-align: left;
   margin:0.5em auto;
   display: table;
}

.nofloat {
clear: both;
}

.nikprodukte {
text-align:center;
}

.Bildgroesser {
    width: 100%;
    height: auto;
    max-width: 990px;
    float:none;
    margin-bottom: 3px;
    margin-top: 3px;  
}


#briefeschreiber {
    width: 98%;
    margin-right: 1%;
    margin-left: 1%;
    height: auto;
       }

#vielendank {
    width: 98%;
    height: auto;
    padding-left: 2%;
    margin-Top: 5%;
       }

ul.a {list-style-type: none;
    display:inline-block;}

ul.b {list-style-type: square;
    display:inline-block;}

li.none {list-style-type: none;
    }

li.b {list-style-type: square;
    }

hr.a {
border: 0;
width: 63%;
height: 2px;
text-align: left;
background-color: #FFD630;
} 

#schreib {
   	line-height:1.6em; /* Textgröße ~ 16px */
	letter-spacing: 0.01em; /* Buchstaben-Abstand */
	word-spacing: 0.01em; /* Wörter-Abstand */
        }

.Zeile {
   	line-height:1.6em; /* Textgröße ~ 16px */
	letter-spacing: 0.01em; /* Buchstaben-Abstand */
	word-spacing: 0.01em; /* Wörter-Abstand */
        }
.countdown-timer {
    width: 98%;
    height: auto;
    max-width: 500px; 
}

/* Smartphone Optimierung */
 
@media screen and (max-width: 768px) {
 
body {
overflow-x: hidden;
}
 
h1 {
font-size: 2rem !important;
}
 
h2 {
font-size: 1.6rem !important;
line-height: 1.2 !important;
}
 
h3 {
font-size: 1.3rem !important;
}
 

.Bildgroesser,
.marquee {
width: 95% !important;
max-width: 95% !important;
}
 

#fabild {
float: none !important;
display: block;
margin: 10px auto !important;
    
}
 
#textbereich,
#schreibmal,
#cappuccino,
#festausschuss {
padding-left: 10px;
padding-right: 10px;
}
}

/* ==================================
   NEUE RESPONSIVE OPTIMIERUNG
================================== */

*{
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
}

/* Header */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo {
    flex: 1;
}

.logo img {
    max-width: 250px;
    width: 100%;
    height: auto;
}

/* Navigation Desktop */

#navi{
    display:flex;
    justify-content:center;
    gap:20px;
}

#navi a{
    text-decoration:none;
    color:#640064;
    font-weight:bold;
    padding:10px 15px;
}

#navi a:hover{
    color:#FFD630;
}


.Bild1,
.Bildgroesser,
.horizontal,
.horizontal-postkarte,
.vertikal,
.vertikal-postkarte {
    max-width:100%;
    height:auto;
}

.marquee{
    width:100%;
    max-width:600px;
}

/* ==========================
   SMARTPHONE
========================== */

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



    #navi{
        display:none;
        position:absolute;
        top:90px;
        left:0;
        width:auto;
        background:#640064;
        flex-direction:column;
        text-align:left;
    }

    #navi.active{
        display:flex;
    }

    #navi a{
        color:white;
        padding:15px 20px;
        border-bottom:1px solid rgba(255,255,255,0.2);
    }
}

/* ==================================================
   NIKOLAUSPOSTAMT.DE
   RESPONSIVE OPTIMIERUNG 2026
================================================== */



*{
    box-sizing:border-box;
}

html,
body{
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}

/* Header */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo img{
    max-height:100px;
    width:auto;
}

/* Navigation Desktop */

#navi{
    display:flex;
    justify-content:center;
    gap:20px;
}

#navi a{
    text-decoration:none;
    color:white;
    padding:10px;
}

#navi a:hover{
    background:white;
    color:#640064;
}



/* Große Bilder */


.Bild1,
.Bildgroesser,
#sonderstempel{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
}

/* Sonstige Bilder */

.horizontal,
.horizontal-postkarte,
.vertikal,
.vertikal-postkarte {
    width:100%;
    max-width:100%;
    height:auto;
}

/* Lauftext */

.marquee{
    width:100% !important;
    max-width:600px !important;
    margin:0 auto;
}

/* Teaserbilder */

.nikolausmitbriefen{
    width:100%;
    max-width:500px;
    margin:0 auto;
    display:block;
}

/* Hero-Bild */

.hero{
    position:relative;
    overflow:hidden;
}

.hero img{
    width:100%;
    display:block;
}

.hero-text{
    position:absolute;
    left:40px;
    bottom:30px;
    background:rgba(0,0,0,0.4);
    color:white;
    padding:20px;
    max-width:500px;
}

/* ==================================================
   TABLET + SMARTPHONE
================================================== */

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

    /* Hamburger anzeigen */
    /* Navigation einklappen */

    #navi{
        display:none;
        flex-direction:column;
       width:auto;
        background:#640064;
        text-align:left;
    }

    #navi.active{
        display:flex;
    }

    #navi a{
        padding:15px;
        border-top:1px solid rgba(255,255,255,.15);
    }

    /* Überschriften */

    h1{
        font-size:2rem !important;
        line-height:1.2;
    }

    h2{
        font-size:1.6rem !important;
        line-height:1.2;
    }

    h3{
        font-size:1.3rem !important;
        line-height:1.2;
    }

    /* Innenabstände */

    #textbereich,
    #inhaltbereich,
    #schreibmal,
    #cappuccino,
    #festausschuss,
    #fussbereich{
        padding-left:10px;
        padding-right:10px;
    }

    /* Bilder zentrieren */

    #festabild,
    #fabild,
    #fabildgroesser{
        float:none !important;
        display:block;
        margin:10px auto !important;
    }


    /* Lauftext */

    .marquee{
        width:95% !important;
        max-width:95% !important;
    }

    /* Hero Text */

    .hero-text{
        left:10px;
        right:10px;
        bottom:10px;
        padding:12px;
    }

    .hero-text h1{
        font-size:1.6rem !important;
    }
}

/* ==================================================
   SMARTPHONE KLEINER 512 PX
================================================== */

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

    h1{
        font-size:1.7rem !important;
    }

    h2{
        font-size:1.4rem !important;
    }

    h3{
        font-size:1.2rem !important;
    }

    .hero-text{
        padding:10px;
    }
}

/* =====================================
   MOBILE FIX NIKOLAUSPOSTAMT 2026
===================================== */

*{
    box-sizing:border-box;
}

html,
body{
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}


.Bild1,
.Bildgroesser,
.horizontal,
.horizontal-postkarte,
.vertikal,
.vertikal-postkarte {
    max-width:100% !important;
    height:auto !important;
}

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

  

    #navi{
        display:none;
        width:auto;
        flex-direction:column;
        background:#640064;
    }

    #navi.active{
        display:flex;
    }

    #navi a{
        display:block;
        padding:12px 15px;
        color:white;
        border-bottom:1px solid rgba(255,255,255,.2);
    }



    .horizontal,
    .horizontal-postkarte {
        width:100% !important;
    }

    #fabild,
    #festabild,
    #fabildgroesser{
        float:none !important;
        display:block !important;
        margin:10px auto !important;
    }
}


/* Tablet und Smartphone */
@media (max-width: 1050px) {

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

   

    #navi {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #640064;
}

    #navi.active {
        display: flex;
    }

    #navi > a {
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 15px 10px;
    text-align: center;
}
}


#mobilemenu {
    display: none;
}

/* Smartphone und Tablet */
@media (max-width: 1050px) {

    #navi {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap; /* statt wrap */
    }

    #navi > a {
        flex: 1;
        text-align: center;
        color: white;
        text-decoration: none;
        padding: 15px 5px;
        font-size: 0.9rem;
    }

  
}

@media (max-width: 1050px) {

    

    #mobilemenu {
        display: none;
        width: 100%;
        background: #640064;
    }

    #mobilemenu.active {
        display: block;
    }

    #mobilemenu a {
        display: block;
        padding: 15px;
        color: white;
        text-decoration: none;
        text-align: center;
        border-top: 1px solid rgba(255,255,255,0.3);
    }

}
    
   /* HAMBURGER FIX */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}



#mobilemenu{
    display:none;
    width:100%;
    background:#640064;
}

#mobilemenu.active{
    display:block;
}

#mobilemenu a{
    display:block;
    padding:15px;
    color:white;
    text-decoration:none;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.3);
}


/* MOBILE MENÜ */

#hamburger{
    display:none;
    background:none;
    border:none;
    font-size:40px;
    color:#640064;
    cursor:pointer;
    padding:10px;
}

#mobilemenu{
    display:none;
    width:100%;
    background:#640064;
}

#mobilemenu.active{
    display:block;
}

#mobilemenu a{
    display:block;
    padding:15px;
    color:white;
    text-decoration:none;
    text-align:center;
}

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

    #hamburger{
        display:block;
    }

    #navi{
        display:none !important;
    }
}

.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    flex:0 0 auto;
}

#navi{
    flex:1;
    display:flex;
    justify-content:center;
    gap:10px;
}





#navi a{
    color:white;
    font-size: 1.15rem;
    text-decoration:none;
    padding:15px 10px;
    font-weight:bold;
    white-space:nowrap;
}

/* Hamburger IMMER sichtbar */
#hamburger{
    display:block;
    background:none;
    border:none;
    color:white;
    font-size:45px;
color: #640064;   /* lila statt weiß */
    cursor:pointer;
    padding:10px;
    margin-right:10px;
    flex:0 0 auto;
}

/* Zusatzmenü */
#mobilemenu{
    display:none;
    background:#640064;
}

#mobilemenu.active{
    display:block;
}

#mobilemenu a{
    display:block;
    padding:15px;
    color:white;
    text-decoration:none;
    text-align:center;

    font-size: 1.3rem;      /* Schriftgröße */
    font-weight: bold;      /* Fett */
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}

/* =====================================
   HAUPTNAVIGATION RESPONSIVE
===================================== */

/* Tablet */
@media (max-width:900px){

#navi{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:8px;
    }

    #navi a{
        flex:0 0 45%;
   }
        text-align:center;
    }

}

@media (min-width: 769px) {
    .smallheader {
        display:none;
    }
}

@media (max-width:768px) {
    .bigheader {
        display:none;
    }
}