/*
================================================================
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);

      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 CONTAINER
           ===================================================== */
        .swiper {
            width: 100%;            /* volle Breite innerhalb body */
            height: 450px;           /* Höhe durch Inhalt */
            cursor: pointer;
            color:black;
            --swiper-theme-color: #fff; /* Farbe für Buttons & Pagination */
            --swiper-navigation-size: 35px;
  			--swiper-navigation-top-offset: 95%;
  			--swiper-navigation-sides-offset: 5px;

        }

        /* =====================================================
           SWIPER WRAPPER
           ===================================================== */
        .swiper-wrapper {
            display: flex; 
                        color:black;
         /* Standard-Flex-Layout */
        }

        /* =====================================================
           SWIPER SLIDE
           ===================================================== */
        .swiper-slide {
            display: flex;
            flex-direction: column; /* Bild + Text untereinander */
            align-items: left;
            
                        color:black;

        }

        /* =====================================================
           SLIDE IMAGE
           ===================================================== */
        .swiper-slide img {
            width: 100%;            /* Bild passt sich Slide an */
            height: 400px;           /* Seitenverhältnis bleibt erhalten */
            object-fit: contain;
            display: block;
                        color:black;

        }
        
        


        /* =====================================================
           UNTERZEILE / TEXT UNTER DEM BILD
           ===================================================== */
        .slide-caption {
            padding: 1rem 0 0rem;
            font-size: 1.3rem;
            text-align: center;
            color: #fff;
        }
        
                /* =====================================================
           UNTERZEILE / TEXT UNTER DEM BILD
           ===================================================== */
           
           
                   .slide-caption1 {
		     padding: 0.75rem 3.5rem 1rem;
            font-size: 1.2rem;
            text-align: right;
            color: #fff;
        }

           
           
        .slide-caption2 {
            padding: 0.75rem 0;
            font-size: 3rem;
            text-align: center;
            color: #ee0000;
        }
        
                .slide-caption3 {
            padding: 0.75rem 0;
            font-size: 1.3rem;
            text-align: center;
            color: #fff;
        }
        
        
                        .slide-caption3b {
            padding: 0.75rem 0;
            font-size: 1rem;
            text-align: center;
            color: #fff;
        }

        
                .slide-caption4 {
            padding: 0.75rem 2.5rem;
            font-size: 1.7rem;
            text-align: left;
            color: #ee0000;
        }
        

                .slide-caption5 {

            font-size: 1rem;
			vertical-align: top;
            color: #fff;
        }

                .slide-caption6 {

            font-size: 1.2rem;
			vertical-align: top;
            color: #ee0000;
        }


                .slide-caption7 {
            font-size: 0.8rem;
			vertical-align: top;
     
            color: #000000;
        }


/*
================================================================
 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: 400px; 
    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: 20px; /* Abstand zum Text links */
    margin-bottom: 20px; /* Abstand zum Text darunter */
}

.image-stack img {
    /* Bilder nehmen 100% der Breite ihres Eltern-Containers (.image-stack) ein */
    width: 100%; 
    height: auto; 
    margin-bottom: 10px; 
    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>