:root {
      --blue: #061217;      /* Meerblau */
      --blue-2: #0d72a0;    /* Akzentblau */
      --turquoise: #acc4c6; /* Akzent türkis */
      --sand: #ede7db;      /* Sand */
      --ink: #5a6373;       /* Dunkel für Text/Footers */
      --muted: #5b6b7a;     /* Sekundärtext */
      --bg: #fdfdfd;        /* Weiß */
      --light: #f7fbff;     /* sehr helles Blau */
      --radius: 18px;       /* Rundungen */
      --shadow: 0 2px 20px rgb(204, 204, 204);
      --maxw: 1200px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: #696969;
      background: var(--bg);
      line-height: 1.6;
    }

    /* Utility */
    .container { width: min(100%, calc(var(--maxw) + 1.5rem)); margin: 0 auto; padding: 0 1rem; }
    .stack > * + * { margin-top: var(--space, 1rem); }
    .grid { display: grid; gap: 1.25rem; }

    /* Buttons */
    .btn { appearance: none; border: 0; cursor: pointer; font-weight: 500; border-radius: 10px; padding: .9rem 1.2rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: transform .06s ease, box-shadow .2s ease, background .2s ease; }
    .btn:active { transform: translateY(1px); }
    .btn-primary { background: var(--turquoise); color: #014a61; box-shadow: var(--shadow); }
    .btn-primary:hover { background: #acc4c6; }
    .btn-outline { border: 2px solid #cccccc; color: #cccccc; background: transparent; }
    .btn-outline:hover { background: rgba(255,255,255,.12); }
    .btn-ghost { background: #e4e4e4; color: var(--blue); border: 2px solid var(--blue); }
    .btn-ghost:hover { background: rgb(244, 244, 244); }

    /* Header / Nav */
    header {
      position: sticky; top: 0; z-index: 50;
      background: #014a61; backdrop-filter: saturate(150%) blur(12px);
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }
    .brand { display: flex; align-items: center; gap: .6rem; color: #dedede; text-decoration: none; }
    .brand svg { width: 28px; height: 31px; }
    .brand .name { font-family: Montserrat, sans-serif; font-weight: 900; letter-spacing: .6px; }

    .nav-links { display: none; gap: 1.4rem; }
    .nav-links a { color: #f4f4f4; text-decoration: none; font-weight: 600; opacity: .9; }
    .nav-links a:hover { opacity: 1; }

    .menu-toggle { display: inline-flex; background: transparent; border: 0; color: #f9f9f9; font-size: 1.4rem; }

    @media (min-width: 900px) {
      .nav-links { display: flex; }
      .menu-toggle, .mobile-sheet { display: none; }
    }

    .mobile-sheet { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; }
    .mobile-sheet .panel { background: #f5f5f5; position: absolute; right: 0; top: 0; bottom: 0; width: min(86%, 360px); padding: 1.25rem; box-shadow: var(--shadow); }
    .mobile-sheet a { display: block; padding: .9rem 0; color: var(--ink); text-decoration: none; font-weight: 700; border-bottom: 1px solid #f7f7f7; }

    /* Hero */
    .hero {
        background-image: url('ufi-start1.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .hero .wrap { padding: 0.5rem 0 0.5rem; }
    .eyebrow { font-size: 1.8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .9; background: rgb(224, 224, 224); background: rgba(0, 0, 0, 0.5); width: 100%;}
    .eyebrowtwo { font-size: 1.6rem; letter-spacing: .12em; text-transform: none; opacity: .9; background: rgb(224, 224, 224); background: rgba(0, 0, 0, 0.5); width: 100%;}
    .eyebrowthree { font-size: 1.0rem; letter-spacing: .01em; text-transform: none; opacity: .9; background: rgb(224, 224, 224); background: rgba(0, 0, 0, 0.5); width: 100%;}
    .hero h1 { font-family: Montserrat, sans-serif; font-weight: 700; font-size: clamp(2.2rem, 3.6vw, 3.8rem); line-height: 1.1; margin: .5rem 0 1rem; }
    .hero h2 { font-family: Montserrat, sans-serif; font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.0rem); line-height: 1.1; margin: .5rem 0 1rem; }
    .hero p { font-size: clamp(1.2rem, 1.6vw, 1.4rem); max-width: 760px; opacity: .95; }
    .hero .cta { display: flex; gap: .50rem; flex-wrap: wrap; margin-top: 0.5rem; }

    /* Section base */
    section { padding: 4rem 0; }
    section h2 { font-family: Montserrat, sans-serif; font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0 0 1rem; color: var(--ink); }
    section p.lead { font-size: 1.4rem; color: var(--muted); max-width: 700px; }

    .section-alt { font-size: 1.2rem; background: var(--light); }

    /* Cards */
    .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1.5rem; }
    .card { background: #f9f9f9; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
    .card h3 { margin: 0 0 .25rem; font-family: Montserrat, sans-serif; font-size: 1.6rem; }
    .card h4 { margin: 0 0 .25rem; font-family: Montserrat, sans-serif; font-size: 1.4rem; }
    .card p { font-size: 1.4rem; margin: 0; color: var(--muted); }

    /* Quote block */
    .quote { font-size: 1.0rem; margin-top: 1.25rem; padding: 1.0rem 0.5rem; background: #f9f9f9; border-left: 8px solid var(--turquoise); border-radius: 6px; color: #0f2730; font-weight: 500; box-shadow: var(--shadow); }
    div.quote { font-size: 1.2rem; margin-top: 1.25rem; padding: 1.0rem 0.5rem; background: #f9f9f9; border-left: 8px solid var(--turquoise); border-radius: 6px; color: #0f2730; font-weight: 500; box-shadow: var(--shadow); }

    /* Three columns principles */
    .principles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .pill { background: #fafafa; border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
    .pill strong { display: block; margin-bottom: .25rem; font-family: Montserrat, sans-serif; }

    /* Location */
    .criteria { list-style: none; padding: 0; margin: .75rem 0 0; }
    .criteria li { font-size: 1.2rem; padding-left: 1.25rem; position: relative; margin: .35rem 0; }
    .criteria li::before { content: "•"; position: absolute; left: 0; color: var(--blue-2); font-weight: 900; }

    /* CTA block */
    .big-cta { text-align: center; color: #f4f4f4; background: linear-gradient(135deg, var(--blue), var(--blue-2)); border-radius: calc(var(--radius) + 6px); padding: 2.5rem 1rem; box-shadow: var(--shadow); }
    .big-cta h2 { color: #ededed; }

    /* Footer */
    footer { background: #2c323d; color: #c7d2e0; padding: 2.5rem 0; margin-top: 3rem; }
    footer a { color: #e6f6ff; text-decoration: none; }
    .footergrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .foot-brand { display: flex; align-items: center; gap: .6rem; color: #cccccc; text-decoration: none; font-weight: 800; font-family: Montserrat, sans-serif; }
    .fine { border-top: 1px solid rgba(255,255,255,.08); margin-top: 1.25rem; padding-top: 1rem; font-size: .9rem; color: #9fb1c5; }

    /* Helper visuals */
    .chip { display: inline-block; padding: .35rem .6rem; border-radius: 5px; background: #f4f4f4; color: #528089; font-weight: 900; font-size: 1.8rem; }
    .handel { display: inline-block; padding: .35rem .6rem; border-radius: 5px; background: #f4f4f4; color: #696969; font-weight: 600; font-size: 1.3rem; }