/*
================================================================
Anfang --------------- root -  header  - menu    
================================================================
*/
 :root{
      --header-height: 64px;
      --max-width: 680px;
      --gap: 24px;
      --bg: #f7f7f9;
      --surface: rgba(255,255,255,0.7);
      --accent: #0066cc;
      --text: #222;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
    }

    header.site-header{
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: var(--max-width);
      height: var(--header-height);
      background: var(--surface);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
      border-radius: 0 0 0 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.10);
      z-index: 1100;
    }

    .left-group{ display:flex; align-items:center; gap:0.5rem; }
    .site-brand{ display:flex; align-items:center; gap:0.5rem; font-weight:600; color:var(--accent); text-decoration:none; }
    .site-brand img{ border-radius:0px; display:block; }

    .right-group{ display:flex; align-items:center; gap:1rem; }
    .contact-link{ text-decoration:none; color:var(--text); font-weight:500; padding:0.4rem 0.6rem; border-radius:0px; }
    .contact-link:hover{ background:rgba(0,0,0,0.05); }

    /* Hamburger */
    .menu-toggle{
      width:36px; 
      height:36px;
      display:inline-flex; 
      flex-direction:column;   
      justify-content:center; 
      align-items:center;
      background:none; 
      border:0; 
      cursor:pointer; 
      padding:0; 
      gap:5px; 

    position: relative; /* Wichtig für die Positionierung der Striche */
    z-index: 100;
      

              
    }
    .menu-toggle span{
      display:block; 
      width:30px; 
      height:3px; 
      background:var(--text); 
      border-radius:3px;
      transition: transform .28s ease, opacity .18s ease;
    }
    .menu-toggle.active span:nth-child(1){
      transform: rotate(45deg) translate(2px, 9px);
    }
    .menu-toggle.active span:nth-child(2){
      
      transform: rotate(90deg);
	  opacity:0;
    }
    .menu-toggle.active span:nth-child(3){
      transform: rotate(-45deg) translate(1px, -8px);

    }

    /* Overlay-Menü */
    .menu-overlay{
      position: fixed;
      top: var(--header-height);
      height: calc(100% - var(--header-height));
      right: 0;
      width: 72%;
      max-width: 320px;
      background: #fff;
      box-shadow: -2px 0 14px rgba(0,0,0,0.12);
      transition: right .32s cubic-bezier(.2,.9,.2,1), opacity .22s ease, transform .22s ease;
      z-index: 1000;
      padding: 1.6rem 1rem;
      display:flex;
      flex-direction:column;
      gap:0.6rem;
      opacity: 0;
      transform: translateX(8px);
      will-change: right, opacity, transform;
      overflow-y:auto;
      pointer-events: none;
    }
    

    
    .menu-overlay.active{
      pointer-events: auto;
      opacity: 1;
      transform: translateX(0);
    }

    @media (min-width: 801px){
      .menu-overlay{
        right: calc((100% - var(--max-width)) / 2);
      }
    }

    .menu-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:none;
      border:none;
      padding:0.5rem 0.45rem;
      font-size:1.05rem;
      color:var(--text);
      /*cursor:pointer;*/
      text-align:left;
    }

    .menu-link{
      flex-grow:1;
      text-decoration:none;
      color:var(--text);
      font-weight:500;
    }

    .submenu-toggle{
      background:none;
      border:none;
      cursor:pointer;
      font-size:1rem;
      color:var(--text);
      transform: rotate(0deg);
      transition: transform 0.25s ease;
      margin-left:0.4rem;
    }
    .submenu-toggle.open{
      transform: rotate(180deg);
    }

    .submenu{
      display:none;
      flex-direction:column;
      margin-left:1rem;
      margin-top:0.3rem;
      border-left:2px solid rgba(0,0,0,0.05);
      padding-left:0.5rem;
      background:rgba(0,0,0,0.02);
      border-radius:0px;
    }
    .submenu.open{
      display:flex;
    }
    .submenu a{
      text-decoration:none;
      color:var(--text);
      padding:0.4rem 0;
      font-size:0.95rem;
    }
    .submenu a:hover{
      color:var(--accent);
    }

    main.site-main{
      margin:0 auto;
      max-width: var(--max-width);
     

 padding: calc(var(--header-height) + var(--gap)) 1rem 4rem;
 
    }
    .card{ background:#fff; border-radius:0px; padding:0.7rem; margin-bottom:0.7rem; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
		 .card2{ background:#000; border-radius:0px; padding:1rem; margin-bottom:1rem; box-shadow:0 1px 4px rgba(0,0,0,0.06); }

    @media (max-width:720px){
      :root{ --header-height:56px; }
      .menu-overlay{ width:78%; max-width:240px; }
    }
    
/*
================================================================
 Ende --------------  root -  header  - menu    
================================================================
*/



/*
================================================================
 Anfang ------------  swiper_styles   
================================================================
*/




    .swiper {
      position: relative;
      max-width: 100%;
      max-height: 400px;

    }
    
    
    .swiper-wrapper {
        position: relative;
  width: 100%; /* Nimmt 100% der Bildschirmbreite ein */
  max-width: 800px; /* Begrenzt die maximale Breite */
  margin: 0 auto; /* Zentriert den Wrapper horizontal */
 max-height: 800px;
  background-color: #fff;
              padding: 1.5rem 0;
}


}
    
    .swiper-slide {
      align: center;
      font-size: 18px;
      background: #ffa;
      display: flex;
      justify-content: center;
      align-items: center;
              padding: 1.5rem 0;
    }

    .swiper-slide img {
      display: block;
      width: 95%;
      height: 90%;
            background: #eeeeee;
      object-fit: contain;
              padding: 1.5rem 0;
    }



/*
================================================================
 Ende ------------  swiper_styles   
================================================================
*/


/*
================================================================
Anfang ------------   carroussel_styles (Page bottom)    
================================================================
*/


 /* 4. Slides */
.carousel-slide-new {
    flex: 0 0 100%;
    box-sizing: border-box;
    min-height: 300px;
    user-select: none;
}

.carousel-slide-new img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 5. Navigation */
.nav-btn-new {
    position: absolute;
    top: 0;
    width: 10%;
    height: 100%;
    border: none;
    background: transparent;
    z-index: 10;
    font-size: 2.5rem;
    color: white;
    opacity: 0.2;
    cursor: pointer;
    transition: 0.3s;
}

.nav-btn-new:hover {
    opacity: 1;
    background: rgba(0,0,0,0.3);
}

.nav-btn-new.hidden {
    display: none;
}

.prev-btn { left: 0; }
.next-btn { right: 0; }

/*
================================================================
Ende ------------  carroussel_styles (Page bottom)  
================================================================
*/

       
 
 
  /* 
  ============ CONTENT-LAYOUT-STYLES ============
   */

  <style>

/* 1. Container für die Zentrierung */
.carousel-container-new {
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 2. Wrapper */
.carousel-wrapper-new {
    position: relative;
    overflow: hidden;
}

/* 3. Track */
.carousel-track-new {
    display: flex;
    transition: transform 0.1s ease-out;
   /* cursor: grab;*/
    will-change: transform;
    touch-action: pan-y; /* Kritisch für Safari/iOS */
}

.carousel-track-new.is-dragging-new {
    /*cursor: grabbing;*/
    transition: none;
}

/* 4. Slides */


       
 
  



  /* ============ CONTENT-LAYOUT-STYLES ============ */

  .section-flow-text img {
    border-radius: 0px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  
  
  


    
    /* --- Neue Content-Layouts --- */
    .figure{ margin:0; }
    .figure img{ max-width:100%; height:auto; border-radius:0px; display:block; }
    .figcaption{ font-size:0.8rem; color:#555; text-align:center; margin-top:0.25rem;}
    .figcaption1{ font-size:0.85rem; color:#555; text-align:left; margin-top:0.25rem; margin-left:1.5rem; margin-right:1.5rem;}



    /* 1. Text mit Bild oben rechts umflossen */
    .float-right-img{
      float:right;
      margin:0 0 0.6rem 1rem;
  /* width:40%;*/
      max-width:45%;
    }

    /* 2. Zwei Bilder übereinander rechts */
.section-wrapper {
    max-width: 800px;
    /* Eine Mindestbreite für die gesamte Section verhindert,
       dass das Layout auf sehr kleinen Screens zu eng wird */
    min-width: 300px; 
    margin: 0 auto;
    padding: 0px;
    overflow: auto; /* Clearing the float */
}

.image-stack {
    /* Positioniert den Bildblock rechts */
    float: right; 
    /* Variable Breite in Prozent */
    width: 40%; 
    /* Mindestbreite für den Bildblock, damit er nicht winzig wird */
    min-width: 150px;
    margin-left:10px; /* Abstand zum Text links orig= 20px*/
    margin-bottom: 5px; /* Abstand zum Text darunter */
}

.image-stack img {
    /* Bilder nehmen 100% der Breite ihres Eltern-Containers (.image-stack) ein */
    width: 100%; 
    height: auto; 
    margin-bottom: 5px; 
    display: block; 
}


    /* 2A.  Bilder übereinander rechts TdI */
    
    .section-wrapper1 {
    max-width: 800px;
    /* Eine Mindestbreite für die gesamte Section verhindert,
       dass das Layout auf sehr kleinen Screens zu eng wird */
    min-width: 300px; 
    margin: 0 auto;
    padding: 0px;
    overflow: auto; /* Clearing the float */
}

.image-stack1 {
    /* Positioniert den Bildblock rechts */
    float: right; 
    /* Variable Breite in Prozent */
    width: 20%; 
    /* Mindestbreite für den Bildblock, damit er nicht winzig wird */
    min-width: 50px;
    margin-left:10px; /* Abstand zum Text links orig= 20px*/
    margin-bottom: 5px; /* Abstand zum Text darunter */
}

.image-stack1 img {
    /* Bilder nehmen 100% der Breite ihres Eltern-Containers (.image-stack) ein */
    width: 100%; 
    height: auto; 
    margin-bottom: 5px; 
    display: block; 
}

    
 


    /* 3. Zweispaltig: Text links, Bild rechts */
    .two-col{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:1rem;
      align-items:start;
    }
    .two-col img{ width:100%; border-radius:0px; }

    /* 4. Zwei Texte nebeneinander */
    .two-texts{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:1rem;
    }
     @media (max-width:500px){
      .twocol .texts{
        float:none;
        display:block;
        margin:0 auto 1rem auto;
        width:100%;
        max-width:100%;
      }
      .two-col, .two-texts{
        grid-template-columns:1fr;
      }
    }
    





 </style>