<style>
        html {
          background-color: #3E4E50;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #FAF3E0;
            color: #444;
        }

        header .logo{
            display: block;
            margin: 0 auto;
            height: 33.33vh;
            max-height: 100%;
            width:auto;
        }
        .hero {
            text-align: center;
            padding: 60px 20px;
            background-color: #E8D8C4;
            max-width: 100%;
            word-wrap: break-word;
        }
        .section {
            padding: 40px 20px;
            text-align: center;
            max-width: 100%;
            margin: auto;
            word-wrap: break-word;
        }
        #ki-hilfe {
            background-color: #D4B499;
        }
        #ueber-mich {
            background-color: #B89B7D;
        }
        #social {
            background-color: #8E735B;
            color: white;
        }
        .cta {
            background-color: #3E4E50;
            color: white;
            padding: 15px 30px;
            text-decoration: none;
            display: inline-block;
            margin-top: 20px;
            border-radius: 5px;
        }
        footer {
            background-color: #3E4E50;
            color: white;
            text-align: center;
            padding: 20px;
        }
        footer a {
            color: #FAF3E0;
            text-decoration: none;
            font-weight: bold;
        }
        footer a:hover {
            text-decoration: underline;
        }

        /* Gesamt-Layout:  sidebar + content */
        .layout {
          display: flex;
          min-height: 100vh;
        }
        
        /* Sidebar-Styles */
        .sidebar {
          width: 300px;               /* fixe Breite */
          background-color: #5C6B70;  /* dunkler Ton */
          position: sticky;
          top: 0;
          padding: 40px;
          padding-top: 200px;
          box-sizing: border-box;
          height: 100vh;
          overflow-y: auto;
          font-family: 'Lora', serif;
          line-height: 1.4; 
        }
        .sidebar nav ul {
          list-style: none;
          margin: 0;
          padding: 0;
        }
        .sidebar nav li + li {
          margin-top: 20px;
        }
        .sidebar a {
          color: white;
          text-decoration: none;
          font-weight: bold;
        }

        /* Speziell für die Visitenkarten-Seite */
        .vcard-section {
          padding: 40px 20px;            /* optional etwas Luft um die Karte */
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        
        .card {
          background-color: #fff;
          width: 350px;
          padding: 24px;
          border-radius: 8px;
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
          text-align: center;
          margin-bottom: 20px;
        }
        
        .name {
          margin: 0;
          font-size: 1.6rem;
          color: #1B2528;
        }
        
        /* … deine restlichen .title, .company, .contact, .download … */
        
        #qrcode {
          width: 128px;
          height: 128px;
        }
                
        /* Hauptinhalt nimmt den Rest */
        .content {
          flex: 1;
        }

        .content header {
          position: relative;  /*ggf wieder löschen*/
          text-align: center;
          background-color: #3E4E50;
          padding: 40px 20px;
          z-index: 1000;
        }
        
        /* Responsive: auf kleinen Bildschirmen Sidebar verstecken */
        @media(max-width: 768px) {
          .layout {
            flex-direction: column;
          }
          .sidebar {
            display: none;
          }
        }

       /* Hamburger – default versteckt */
        .menu-toggle {
          display: none;
          background: none;
          border: none;
          font-size: 1.5rem;
          color: white;
          cursor: pointer;
        }
        
        /* Mobile: Button zeigen, Sidebar ausblenden und später einblenden */
        @media (max-width: 768px) {
          .menu-toggle {
            display: block;
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 2rem;
            z-index: 2001;
          }
          .sidebar {
           display: none;
          }
          .sidebar.open {
            position: fixed;
            display: block;
            top: 0;
            right: 0;
            width: 300px;
            height: 100vh;
            background-color: #5C6B70;
            padding: 200px 20px 20px;
            box-sizing: border-box;
            overflow-y: auto;
            transition: right 0.3s ease;
            transform: translateX(0);
            z-index: 2000;
          }
          body.nav-open {
            overflow: hidden;
          }
        }
        
            </style>
