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






    .swiper {
      width: 100%;
      height: 800px;

  cursor: pointer;

    }



    

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      font-size: 16px;
      height: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 30px;
    }





    .swiper-slide {
      align: center;
      font-size: 16px;
      background: #f7f7f9;
      display: column;
      justify-content: center;
      align-items: center;
      
    }