/*
CTC Separate Stylesheet
Updated: 2025-09-29 17:17:00
*/
.effect-button2{ position:relative; width:80px; height:80px; padding:10px; color:#fff; background:#89867a; border:none; border-radius:10px; cursor:pointer; margin:10px; box-shadow:0 4px 15px rgba(20,30,18,.9);  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
                         overflow:hidden; border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #888; border-bottom:1px solid #888; display:flex; flex-direction:column; justify-content:center; align-items:center; }

.effect-button2::before{ content:''; position:absolute; top:-120%; left:-100%; width:250%; height:250%;  background:linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.6), rgba(255,255,255,.1)); transform:rotate(45deg); transition:all .8s ease; pointer-events:none; }
.effect-button2:hover::before{ top:150%; left:150%; }
.effect-button2:hover{ background-color:#d4c9a4; box-shadow:0 4px 20px rgba(190,180,150,.8); }
.effect-button2:active{ background-color:#d4c9a4; transition:all .1s ease; transform:scale(.95) translateY(4px); box-shadow:0 4px 5px rgba(190,180,150,.2), 0 4px 10px rgba(190,180,150,.4), 0 4px 20px rgba(190,180,150,.8), 0 4px 30px rgba(190,180,150,.9); }
.effect-button2:active::before{ top:-100%; left:-80%; width:220%; height:220%; transition:all .1s ease; background:radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0));}

/* Tablet & kleiner */
@media (max-width: 768px) {.effect-button2{ width:64px; height:64px;  padding:8px;   border-radius:8px; }}
/* Smartphone */
@media (max-width: 480px){ .effect-button2{ width:52px; height:52px;  padding:6px; margin:8px;  box-shadow:0 3px 10px rgba(20,30,18,.6); } }
/* Sehr kleine Geräte */
@media (max-width: 360px){ .effect-button2{ width:48px; height:48px;  padding:6px;} }

.nav1 a { font-size:16px; font-weight:400; font-family: 'Noto Sans', sans-serif; color:#333; }
.nav1 a:hover { font-size:16px; font-weight:400; font-family: 'Noto Sans', sans-serif; color:#fff;}
.nav1 a:active { font-size:16px; font-weight:400; font-family: 'Noto Sans', sans-serif; color:#333;}
.nav4 a { font-size:16px; font-weight:bold; font-family: 'Noto Sans', sans-serif; color:#fff; text-decoration-line: none }
.nav4 a:hover { font-size:16px; font-weight:bold; font-family: 'Noto Sans', sans-serif; color:#C5474C; text-decoration-line: none}
.nav4 a:active { font-size:16px; font-weight:bold; font-family: 'Noto Sans', sans-serif; color:#fff; text-decoration-line: none}
.headnav1 a { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif;color: #333333; margin:0px; text-decoration-line: none}
.headnav1 a:hover { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #F90000; margin:0px; text-decoration-line: none}
.headnav1 a:active { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333333; margin:0px; text-decoration-line: none}

/* Menu Position ---------------------------------------------------------------------- */
.col1 { position:absolute; top:35px; left:280px; width:600px; height:100px}
.col2 { position:absolute; top:40px; text-align:left; right:330px; width:190px;}
.col3 { position:absolute; top:40px; text-align:left; right:240px; width:190px;}
.col4 { position:absolute; top:40px; text-align:left; right:20px; width:160px;}
.fbox1 { position:absolute; z-index:90; top:60px; left:20px; width:250px; font-family:'Noto Sans', sans-serif; font-size:16px; font-weight:normal; letter-spacing:0px; color:#ffffff; }

.footnav1 a { font-size: 20px; font-weight:normal; font-family: 'Noto Sans', sans-serif;color: #bfbfb7; margin:0px; text-decoration-line: none}
.footnav1 a:hover { font-size: 20px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #ffffff; margin:0px; text-decoration-line: none}
.footnav1 a:active { font-size: 20px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #bfbfb7; margin:0px; text-decoration-line: none}
.footnav2 a { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif;color: #7A7A6E; margin:0px; text-decoration-line: none}
.footnav2 a:hover { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #F4F4DD; margin:0px; text-decoration-line: none}
.footnav2 a:active { font-size: 12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #7A7A6E; margin:0px; text-decoration-line: none}
li_foot { list-style-type:none; text-decoration:none; }

/* Auswahl Boxen ========================= */
.auswahl-container { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:30px; padding:20px; width:100%; max-width:1200px; margin:0 auto; }
.auswahl { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; background:#fff; border-radius:12px; box-shadow:0 4px 10px rgba(0, 0, 0, 0.1); overflow:hidden; text-decoration:none; color:inherit; transition:transform 0.2s; }
.auswahl:hover { transform:translateY(-4px); }
.auswahl-title { margin:16px 0 8px; font-family: 'Noto Sans', sans-serif; font-size:24px; font-weight:bold; text-align:center; color:#AD7C65; }
.auswahl-bild { position:relative; width:calc(100% - 30px); margin:0 10px; box-sizing:border-box; overflow:hidden; }
.auswahl-bild img { width:100%; height:auto; display:block; border-radius:12px; transition:transform 0.3s ease, filter 0.3s ease; }
.auswahl-bild:hover img { transform:scale(1.05); filter:contrast(1.3) brightness(1.05); }
.auswahl-bild::after { content:""; position:absolute; inset:0; border-radius:12px; box-shadow:inset 0 0 15px rgba(0,0,0,0.5); pointer-events:none; transition:box-shadow 0.3s ease; }
.auswahl-bild:hover::after { box-shadow:inset 0 0 20px rgba(0,0,0,0.6); }
.auswahl-text { margin:8px 16px 16px; font-family: 'Noto Sans', sans-serif; font-size:16px; color:#555; text-align:justify; hyphens:auto; }

@media (max-width: 1024px) {
  .auswahl-container { grid-template-columns: repeat(3, minmax(0, 1fr));  gap: 20px; padding: 20px;  }
  .auswahl-title { font-size: 20px; margin: 12px 0 6px; line-height: 1.25; }
  .auswahl-text  { font-size: 14px; margin: 6px 12px 12px; }
  .auswahl-bild { position:relative; width:calc(100% - 20px); margin:0 10px; }
}

/* <= 768px: (deine bisherigen Anpassungen) */
@media (max-width: 768px) {
  .auswahl-container { grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 Spalten fix */  gap: 15px;  padding: 15px; }
  .auswahl-bild { position:relative; width:calc(100% - 20px); margin:10px 10px; }
  .auswahl-title { font-size: 16px; margin: 12px 0 6px; line-height: 1.25; }
  .auswahl-text { display:none; }
}

/* <= 480px: 2 Boxen nebeneinander + Infotext aus */
@media (max-width: 480px) {
  .auswahl-container { grid-template-columns: repeat(2, minmax(0, 1fr));  gap:10px; padding:10px; }
  .auswahl-text { display:none; }
  .auswahl-title { font-size:14px; margin:8px 0 4px; line-height:1.2; }
  .auswahl-bild { position:relative; width:calc(100% - 20px); margin:10px 10px; }
  .auswahl      { border-radius:10px; }
}

@media (max-width: 1600px) {
.headnav1 a { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif;color: #333333; margin:0px; text-decoration-line: none}
.headnav1 a:hover { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #F90000; margin:0px; text-decoration-line: none}
.headnav1 a:active { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333333; margin:0px; text-decoration-line: none}

}

@media (max-width: 1440px) {
.headnav1 a { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif;color: #333333; margin:0px; text-decoration-line: none}
.headnav1 a:hover { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #F90000; margin:0px; text-decoration-line: none}
.headnav1 a:active { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #333333; margin:0px; text-decoration-line: none}

.footnav1 a { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif;color: #bfbfb7; margin:0px; text-decoration-line: none}
.footnav1 a:hover { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #ffffff; margin:0px; text-decoration-line: none}
.footnav1 a:active { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #bfbfb7; margin:0px; text-decoration-line: none}	

.col1 { position:absolute; top:35px; left:280px; width:600px; height:100px}
.col2 { position:absolute; top:40px; text-align:left; right:330px; width:190px;}
.col3 { position:absolute; top:240px; text-align:left; right:50px; width:190px;}
.col4 { position:absolute; top:40px; text-align:left; right:50px; width:190px;}
	
}

@media (max-width: 1024px) {
.footnav1 a { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif;color: #bfbfb7; margin:0px; text-decoration-line: none}
.footnav1 a:hover { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #ffffff; margin:0px; text-decoration-line: none}
.footnav1 a:active { font-size: 18px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #bfbfb7; margin:0px; text-decoration-line: none}	
	
.col1 { position:absolute; top:25px; left:20px; width:200px; height:200px}      
.col2 { position:absolute; top:30px; text-align:left; right:230px; width:180px}
.col3 { position:absolute; top:240px; text-align:left; right:50px; width:190px;}
.col4 { position:absolute; top:40px; text-align:left; right:50px; width:190px;}
	
.fbox1 { position:absolute; z-index:90; top:280px; left:20px; width:250px; font-family:'Noto Sans', sans-serif; font-size:14px; font-weight:normal; letter-spacing:0px; color:#ffffff; }
	
}

@media (max-width: 768px) {
.footnav1 a { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif;color: #bfbfb7; margin:0px; text-decoration-line: none}
.footnav1 a:hover { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #ffffff; margin:0px; text-decoration-line: none}
.footnav1 a:active { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #bfbfb7; margin:0px; text-decoration-line: none}	
	
.col1 { position:absolute; top:25px; left:20px; width:200px; height:200px}      
.col2 { position:absolute; top:270px; text-align:left; right:20px; width:180px}
.col3 { position:absolute; top:240px; text-align:left; right:40px; width:160px;}
.col4 { position:absolute; top:40px; text-align:left; right:40px; width:160px;}
	
.fbox1 { position:absolute; z-index:90; top:280px; left:20px; width:250px; font-family:'Noto Sans', sans-serif; font-size:13px; font-weight:normal; letter-spacing:0px; color:#ffffff; }
}

@media (max-width: 480px) {
.footnav1 a { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif;color: #bfbfb7; margin:0px; text-decoration-line: none}
.footnav1 a:hover { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #ffffff; margin:0px; text-decoration-line: none}
.footnav1 a:active { font-size: 16px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #bfbfb7; margin:0px; text-decoration-line: none}	
	
.col1 { position:absolute; top:25px; left:20px; height:100px; width:80px;}      
.col2 { position:absolute; top:270px; text-align:left; right:20px; width:180px}
.col3 { position:absolute; top:240px; text-align:left; right:40px; width:160px;}
.col4 { position:absolute; top:40px; text-align:left; right:40px; width:160px;}
	
.fbox1 { display:none}
	
}

@media (max-width: 320px) {
.footnav1 a { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif;color: #bfbfb7; margin:0px; text-decoration-line: none}
.footnav1 a:hover { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #ffffff; margin:0px; text-decoration-line: none}
.footnav1 a:active { font-size: 15px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color: #bfbfb7; margin:0px; text-decoration-line: none}	
	
.col1 { position:absolute; top:25px; left:20px; width:70px; height:300px}      
.col2 { display:none}
.col3 { position:absolute; top:240px; text-align:left; right:30px; width:160px;}
.col4 { position:absolute; top:40px; text-align:left; right:30px; width:160px;}
	
.fbox1 { display:none}
}