:root {

           --steel: #3a6d93;
           --steel-dark: #2a5576;

           --bg: #f6f8fb;
           --surface: #ffffff;
           --text: #101828;
           --muted: #475467;
           --border: #e4e7ec;
           --radius: 14px;
           --max: 980px;
       }

       * {
           box-sizing: border-box
       }

       body {
           margin: 0;
           font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
           background: var(--bg);
           color: var(--text);
           line-height: 1.6;
       }

       a {
           color: var(--steel);
           text-decoration: none
       }

       a:hover {
           text-decoration: underline
       }

       .wrap {
           max-width: var(--max);
           margin: 0 auto;
           padding: 0 18px
       }

       header {
           background: var(--surface);
           border-bottom: 1px solid var(--border);
           position: sticky;
           top: 0;
           z-index: 50;
       }

       .nav {
            display: flex;
            align-items: center;
            justify-content: space-between; /* behalten */
            gap: 12px;
        }



       .brand {
           font-weight: 800;
           letter-spacing: .2px;
           color: var(--text);
       }

       .brand small {
           display: block;
           font-weight: 600;
           color: var(--muted);
           letter-spacing: 0;
           margin-top: 2px;
       }

       .menu {
           display: flex;
           gap: 10px;
           align-items: center;
           flex-wrap: wrap;
           font-weight: 600;
           color: var(--muted);
           font-size: 14px;
       }

       .menu a {
           padding: 8px 10px;
           border-radius: 10px;
           color: var(--muted);
       }

       .menu a:hover {
           background: #f1f4f8;
           color: var(--text);
           text-decoration: none;
       }

       .btn {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           padding: 10px 14px;
           border-radius: 12px;
           border: 1px solid var(--steel);
           background: var(--steel);
           color: #fff;
           font-weight: 700;
           text-decoration: none;
           white-space: nowrap;
           transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
       }

       .btn:hover {
           background: var(--steel-dark);
           border-color: var(--steel-dark);
           text-decoration: none;
           transform: translateY(-1px);
           box-shadow: 0 10px 22px rgba(16, 24, 40, .10);
       }

       .btn.secondary {
           background: transparent;
           color: var(--steel);
           border-color: var(--border);
       }

       .btn.secondary:hover {
           background: #f1f4f8;
           border-color: #d0d5dd;
           box-shadow: none;
       }

       main {
           padding: 28px 0 56px
       }

       /* ---- Hover / Roll-over motion (subtil) ---- */
       .hover {
           transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
           will-change: transform;
       }

       .hover:hover {
           transform: translateY(-2px);
           border-color: rgba(58, 109, 147, .45);
           box-shadow: 0 16px 30px rgba(16, 24, 40, .10);
       }


       /* Steckbrief-Block oben */
       .profile {
           display: flex;
           gap: 16px;
           align-items: center;
           padding: 14px;
           border: 1px solid var(--border);
           border-radius: 12px;
           background: #fbfcfe;
           margin-bottom: 16px;
       }

       /* =========================
   LOGO – automatische Größe
   ========================= */

       .brand {
           display: flex;
           align-items: center;
           gap: 12px;
           font-weight: 800;
           color: var(--text);
       }

       .logo {
           height: 44px;
           /* Desktop-Größe */
           width: auto;
           /* automatisch proportional */
           object-fit: contain;
           display: block;
           transition: transform .15s ease;
       }

       .brand:hover .logo {
           transform: scale(1.03);
           /* leichter Hover-Effekt */
       }

       .brand-text small {
           display: block;
           font-weight: 600;
           color: var(--muted);
           font-size: 12px;
           margin-top: 2px;
       }

       /* Mobile automatisch kleiner */
       @media (max-width:700px) {
           .logo {
               height: 34px;
           }
       }

       .avatar {
           width: 92px;
           height: 92px;
           border-radius: 14px;
           border: 1px solid var(--border);
           background: linear-gradient(135deg, rgba(58, 109, 147, .18), rgba(42, 85, 118, .10)), #ffffff;
           display: grid;
           place-items: center;
           color: var(--steel-dark);
           font-weight: 900;
           letter-spacing: .6px;
           user-select: none;
           overflow: hidden;
           flex: 0 0 auto;
       }

       .avatar-img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           display: block;
       }

       .profile h3 {
           margin: 0 0 2px;
           font-size: 16px;
           letter-spacing: -.1px;
       }

       .profile p {
           margin: 0;
           color: var(--muted);
           font-size: 14px;
       }

       .facts {
           display: flex;
           gap: 10px;
           flex-wrap: wrap;
           margin-top: 10px;
       }

       .fact {
           border: 1px solid var(--border);
           border-radius: 999px;
           padding: 6px 10px;
           font-size: 12px;
           font-weight: 700;
           color: var(--steel-dark);
           background: #eef4fb;
       }

       .kicker {
           margin: 0 0 10px;
           color: var(--steel);
           font-weight: 800;
           font-size: 12px;
           text-transform: uppercase;
           letter-spacing: .6px;
       }

       h1 {
           margin: 0 0 12px;
           font-size: clamp(26px, 3vw, 38px);
           line-height: 1.18;
           letter-spacing: -.2px;
       }

       .lead {
           margin: 0 0 18px;
           color: var(--muted);
           font-size: 16px;
           max-width: 70ch;
       }

       .hero-actions {
           display: flex;
           gap: 10px;
           flex-wrap: wrap;
           margin-top: 12px
       }

       .meta {
           margin-top: 14px;
           padding-top: 14px;
           border-top: 1px solid var(--border);
           color: var(--muted);
           font-size: 14px;
       }

       section {
           margin-top: 18px
       }

       .hero,
       .panel {
           width: 100%;
           background: #eef4fb;
           border: 1px solid #d7e6f5;
           border-radius: 18px;
           padding: 34px 38px;
           margin: 26px 0;
           /* nur vertikaler Abstand */

           box-shadow: 0 8px 22px rgba(16, 24, 40, .05);


       }


       h2 {
           margin: 0 0 10px;
           font-size: clamp(18px, 2.2vw, 24px);
           letter-spacing: -.1px;
       }

       p {
           margin: 0 0 12px;
           color: var(--muted)
       }

       .grid {
           display: grid;
           grid-template-columns: 1fr;
           gap: 12px;
       }

       .item {
           border: 1px solid var(--border);
           border-radius: 12px;
           padding: 14px;
           background: #fbfcfe;
       }

       .item h3 {
           margin: 0 0 6px;
           font-size: 16px;
           color: var(--text);
       }

       .item p {
           margin: 0;
           color: var(--muted);
           font-size: 14px
       }

       .list {
           margin: 0;
           padding-left: 18px;
           color: var(--muted);
       }

       .list li {
           margin: 8px 0
       }

       .steps {
           display: grid;
           gap: 10px;
       }

       .step {
           display: flex;
           gap: 12px;
           align-items: flex-start;
           padding: 12px;
           border-radius: 12px;
           border: 1px solid var(--border);
           background: #fbfcfe;
       }

       .badge {
           min-width: 28px;
           height: 28px;
           border-radius: 10px;
           background: #eef4fb;
           color: var(--steel-dark);
           display: grid;
           place-items: center;
           font-weight: 800;
           border: 1px solid #d7e6f5;
       }

       .step strong {
           display: block;
           color: var(--text);
           margin-bottom: 2px
       }

       .step span {
           color: var(--muted);
           font-size: 14px
       }

       .cta {
           display: flex;
           align-items: center;
           justify-content: space-between;
           gap: 12px;
           flex-wrap: wrap;
           background: #f1f6fb;
           border: 1px solid #dbe8f6;
           border-radius: var(--radius);
           padding: 18px;
       }

       .cta p {
           margin: 0;
           max-width: 75ch
       }

       .contact {
           display: grid;
           gap: 10px;
       }

       label {
           font-size: 13px;
           font-weight: 700;
           color: var(--muted);
           display: block;
           margin: 0 0 6px;
       }

       input,
       textarea {
           width: 100%;
           border: 1px solid var(--border);
           border-radius: 12px;
           padding: 10px 12px;
           font-size: 14px;
           background: #fff;
           color: var(--text);
       }

       textarea {
           min-height: 120px;
           resize: vertical
       }

       footer {
           border-top: 1px solid var(--border);
           background: var(--surface);
           padding: 18px 0;
           color: var(--muted);
           font-size: 13px;
       }

       .foot {
           display: flex;
           justify-content: space-between;
           gap: 10px;
           flex-wrap: wrap;
           align-items: center;
       }

       /* =========================
   Großer weicher Hintergrundblock
   ========================= */

       .section-block {
           background: linear-gradient(180deg, #f4f8fd 0%, #eef4fb 100%);
           border-radius: 28px;
           padding: 40px 24px;
           margin: 40px 0;
           border: 1px solid #dbe8f6;
       }

        @media (max-width:700px) {
             .menu {
                display: none
            }

            .profile {
                flex-direction: column;
                align-items: flex-start
            }

           .avatar {
               width: 96px;
               height: 96px
           }
       }

       /* Hamburger Button */
       .menu-toggle {
           display: none;
           background: none;
           border: none;
           font-size: 22px;
           cursor: pointer;
       }

       /* Mobile */
       @media (max-width: 820px) {

           .menu-toggle {
               display: block;
           }

           .menu {
               display: none;
               position: absolute;
               top: 64px;
               right: 18px;
               flex-direction: column;
               background: #fff;
               border: 1px solid var(--border);
               border-radius: 12px;
               padding: 10px;
               box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
           }

           .menu.show {
               display: flex;
           }

           .menu {
               margin-left: auto;
           }

       }

       /* === FIX für mobiles Hamburger-Menü === */

       .menu-toggle {
           z-index: 9999;
           /* ← ganz wichtig */
           position: relative;
           pointer-events: auto;
           -webkit-tap-highlight-color: transparent;
       }

       .menu {
           z-index: 9998;
       }