:root {
      --col-a-tug: #F70146;
      --col-b: #5191C1;
      --col-e: #78B473;
      --flaait: rgb(74,128,129);
      --ink: #171a1c;
      --text: #2b3135;
      --muted: #687176;
      --line: #dfe6e8;
      --paper: #ffffff;
      --soft: #f5f8f8;
      --soft-red: #fff0f4;
      --soft-blue: #edf6fc;
      --soft-green: #f0f8ef;
      --shadow: 0 18px 50px rgba(27, 49, 52, .10);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 112px;
    }

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

    a {
      color: var(--col-b);
    }
    a:hover {
      text-decoration: none;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(255, 255, 255, .94);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(16px);
    }

    .header-inner,
    .wrap {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
    }

    .header-inner {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 24px;
      align-items: center;
      padding: 16px 0;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 16px;
      min-width: 0;
      text-decoration: none;
    }

    .brand img {
      display: block;
      width: auto;
      max-width: 100%;
      object-fit: contain;
    }

    .brand .flaait-logo {
      height: 44px;
    }

    .brand .tu-logo {
      height: 46px;
    }

    .brand-flaait {
      justify-self: start;
    }

    .brand-tu {
      justify-self: end;
    }

    .nav-buttons {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .nav-buttons a,
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--col-b);
      text-decoration: none;
      font-weight: 700;
      font-size: .94rem;
      line-height: 1.1;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .button i,
    .semester-button i {
      flex: 0 0 auto;
      margin-left: 8px;
      font-size: .92em;
      line-height: 1;
    }

    .button .document-icon {
      margin-left: 0;
      margin-right: 10px;
      font-size: 1.35rem;
    }

    .nav-buttons a:hover,
    .button:hover {
      border-color: var(--flaait);
      box-shadow: 0 10px 28px rgba(74, 128, 129, .13);
    }

    .nav-buttons .nav-flaait {
      border-color: rgba(74, 128, 129, .34);
      color: var(--flaait);
    }

    .nav-buttons .nav-studierende {
      border-color: rgba(120, 180, 115, .38);
      color: var(--col-e);
    }

    .nav-buttons .nav-lehrende {
      border-color: rgba(247, 1, 70, .28);
      color: var(--col-a-tug);
    }

    .nav-buttons .nav-flaait:hover {
      border-color: var(--flaait);
      background: rgba(74, 128, 129, .075);
    }

    .nav-buttons .nav-studierende:hover {
      border-color: var(--col-e);
      background: var(--soft-green);
      box-shadow: 0 10px 28px rgba(120, 180, 115, .16);
    }

    .nav-buttons .nav-lehrende:hover {
      border-color: var(--col-a-tug);
      background: var(--soft-red);
      box-shadow: 0 10px 28px rgba(247, 1, 70, .12);
    }

    .nav-buttons a:focus-visible,
    .button:focus-visible {
      outline: 3px solid rgba(247, 1, 70, .22);
      outline-offset: 2px;
    }

    .button.primary {
      border-color: var(--col-b);
      background: var(--col-b);
      color: #fff;
      box-shadow: 0 14px 30px rgba(81, 145, 193, .22);
    }

    .button.primary:hover {
      background: #3f7fae;
      border-color: #3f7fae;
    }

    .button.secondary {
      border-color: rgba(81, 145, 193, .45);
      color: var(--col-b);
    }

    .hero {
      overflow: hidden;
      border-bottom: 1px solid var(--line);
      background:
        /* linear-gradient(90deg, rgba(247, 1, 70, .09), rgba(81, 145, 193, .08) 48%, rgba(120, 180, 115, .09)), */
        /* var(--soft); */
        linear-gradient(90deg, rgba(31, 76, 67, 0.09), rgba(81, 145, 193, .08) 48%, rgba(120, 180, 115, .09)), var(--soft)
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
      gap: 42px;
      align-items: center;
      min-height: calc(100vh - 81px);
      max-height: 760px;
      padding: 56px 0 62px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: var(--muted);
      font-size: .86rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 38px;
      height: 3px;
      border-radius: 8px;
      background: var(--flaait);
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      max-width: 860px;
      margin-bottom: 20px;
      color: var(--ink);
      font-size: clamp(3rem, 7vw, 6.35rem);
      line-height: .93;
      letter-spacing: 0;
    }

    .lead {
      max-width: 680px;
      margin-bottom: 28px;
      color: #303a3f;
      font-size: clamp(1.18rem, 2.2vw, 1.58rem);
      line-height: 1.38;
    }

    .hero-actions,
    .section-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .facts {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin: 34px 0 0;
      padding: 0;
      list-style: none;
    }

    .facts li {
      min-height: 78px;
      padding: 13px 14px;
      border: 1px solid rgba(74, 128, 129, .18);
      border-radius: 8px;
      background: rgba(255, 255, 255, .72);
    }

    .facts span {
      display: block;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: .78rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .facts strong {
      display: block;
      color: var(--ink);
      font-size: .98rem;
      line-height: 1.22;
    }

    .semester-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 12px;
    }

    .semester-button {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      min-height: 30px;
      padding: 7px 9px;
      border: 1px solid rgba(81, 145, 193, .42);
      border-radius: 8px;
      background: #fff;
      color: var(--col-b);
      text-decoration: none;
      text-align: left;
      font-size: .78rem;
      font-weight: 800;
      line-height: 1.1;
    }

    .semester-button .semester-source {
      display: block;
      margin-bottom: 3px;
      color: var(--muted);
      font-size: .68rem;
      font-weight: 800;
    }

    .semester-button .semester-title {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
    }

    .semester-button:hover {
      border-color: var(--col-b);
      background: var(--soft-blue);
    }

    .program-visual {
      position: relative;
      padding: 26px;
      border: 1px solid rgba(74, 128, 129, .18);
      border-radius: 8px;
      background: rgba(255, 255, 255, .78);
      box-shadow: var(--shadow);
    }

    .visual-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 24px;
      color: var(--ink);
      font-weight: 850;
      font-size: 1.05rem;
    }

    .visual-mark {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background: var(--flaait);
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 900;
      flex: 0 0 auto;
    }

    .path-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .path-list li {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .path-list li:nth-child(1) {
      border-color: rgba(74, 128, 129, .18);
      background: rgba(74, 128, 129, .035);
    }

    .path-list li:nth-child(2) {
      border-color: rgba(97, 150, 151, .18);
      background: rgba(97, 150, 151, .03);
    }

    .path-list li:nth-child(3) {
      border-color: rgba(125, 171, 172, .18);
      background: rgba(125, 171, 172, .028);
    }

    .path-number {
      width: 42px;
      height: 42px;
      border-radius: 8px;
    }

    .path-list li:nth-child(1) .path-number {
      background: rgb(74, 128, 129);
    }

    .path-list li:nth-child(2) .path-number {
      background: rgb(97, 150, 151);
    }

    .path-list li:nth-child(3) .path-number {
      background: rgb(125, 171, 172);
    }

    .path-list strong {
      display: block;
      color: var(--ink);
      line-height: 1.25;
    }

    .path-list span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: .93rem;
      line-height: 1.35;
    }

    .path-list .path-number {
      display: grid;
      place-items: center;
      margin-top: 0;
      color: #fff;
      font-size: 1rem;
      line-height: 1;
      font-weight: 900;
      text-align: center;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
    }

    section {
      padding: 86px 0;
      border-bottom: 1px solid var(--line);
    }

    #ai-tutor-innen {
      background:
        linear-gradient(180deg, rgba(74, 128, 129, .075), rgba(74, 128, 129, .025)),
        #fff;
    }

    #ai-tutor-innen .section-kicker {
      color: var(--flaait);
    }


    #studierende {
      background:
        linear-gradient(180deg, rgba(120, 180, 115, .11), rgba(120, 180, 115, .04)),
        var(--soft);
    }

    #lehrende {
      background:
        linear-gradient(180deg, rgba(247, 1, 70, .08), rgba(247, 1, 70, .025)),
        #fff;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
      gap: 42px;
      align-items: start;
      margin-bottom: 36px;
    }

    .section-kicker {
      margin-bottom: 12px;
      color: var(--col-a-tug);
      font-size: .82rem;
      font-weight: 850;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    #studierende .section-kicker,
    #studierende .big-number {
      color: var(--col-e);
    }

    #lehrende .section-kicker {
      color: var(--col-a-tug);
    }

    h2 {
      margin-bottom: 0;
      color: var(--ink);
      font-size: clamp(2.1rem, 4vw, 3.65rem);
      line-height: 1;
      letter-spacing: 0;
    }

    .section-intro {
      margin: 0;
      color: #334047;
      font-size: 1.14rem;
      line-height: 1.58;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .info-card,
    .highlight-panel,
    .invite-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 14px 38px rgba(27, 49, 52, .06);
    }

    .info-card {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .info-card {
      padding: 24px;
    }

    .info-card h3 {
      margin-bottom: 12px;
      color: var(--ink);
      font-size: 1.18rem;
      line-height: 1.22;
    }

    .info-card p {
      margin-bottom: 0;
      color: var(--muted);
    }

    .info-card.accent-flaait-1 {
      border-top: 5px solid rgb(74, 128, 129);
      background: rgba(74, 128, 129, .075);
    }

    .info-card.accent-flaait-2 {
      border-top: 5px solid rgb(97, 150, 151);
      background: rgba(74, 128, 129, .052);
    }

    .info-card.accent-flaait-3 {
      border-top: 5px solid rgb(125, 171, 172);
      background: rgba(74, 128, 129, .035);
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      gap: 24px;
      align-items: stretch;
    }

    .highlight-panel {
      display: flex;
      flex-direction: column;
      /* justify-content: space-between; */
      gap: 28px;
      padding: 28px;
      background:
        linear-gradient(135deg, rgba(120, 180, 115, .18), rgba(74, 128, 129, .08)),
        #fff;
    }

    .big-number {
      margin-bottom: 16px;
      color: var(--col-a-tug);
      font-size: clamp(3.6rem, 8vw, 6.2rem);
      line-height: .88;
      font-weight: 900;
      letter-spacing: 0;
    }

    .col-a-tug {
      color: var(--col-a-tug);
    }
    .col-e {
      color: var(--col-e);
    }
    

    .highlight-panel h3 {
      margin-bottom: 10px;
      color: var(--ink);
      font-size: 1.45rem;
      line-height: 1.18;
    }

    .highlight-panel p {
      margin-bottom: 0;
      font-size: 1.04rem;
    }

    .check-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .check-list li {
      position: relative;
      padding: 17px 18px 17px 48px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: #334047;
    }

    .check-list li::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 22px;
      width: 13px;
      height: 13px;
      border-radius: 3px;
      background: var(--col-e);
      box-shadow: 7px 7px 0 rgba(120, 180, 115, .28);
    }

    .course-thirds {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 24px;
    }

    .student-thirds {
      margin-bottom: 28px;
    }

    #studierende .third-card {
      border-color: rgba(120, 180, 115, .26);
      background: rgba(255, 255, 255, .82);
    }

    #lehrende .third-card {
      border-color: rgba(247, 1, 70, .18);
    }

    .teacher-task-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .teacher-task-list li {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 14px;
      align-items: start;
      padding: 16px;
      border: 1px solid rgba(247, 1, 70, .14);
      border-radius: 8px;
      background: rgba(255, 255, 255, .78);
    }

    .teacher-task-list strong {
      display: block;
      margin-bottom: 4px;
      color: var(--ink);
    }

    .teacher-task-list span {
      display: block;
      color: var(--muted);
    }

    .teacher-task-list .task-number {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 8px;
      background: rgba(247, 1, 70, .10);
      color: var(--col-a-tug);
      font-weight: 900;
    }

    .third-card {
      position: relative;
      min-height: 270px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }

    .third-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 56px;
      min-height: 36px;
      margin-bottom: 22px;
      border-radius: 8px;
      color: #fff;
      font-weight: 900;
      background: var(--flaait);
    }

    .third-card h3 {
      margin-bottom: 12px;
      color: var(--ink);
      font-size: 1.25rem;
      line-height: 1.2;
    }

    .third-card p {
      margin-bottom: 0;
      color: var(--muted);
    }

    .invite-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
      padding: 28px;
      background: rgba(247, 1, 70, .055);
      color: var(--ink);
      border-color: rgba(247, 1, 70, .18);
    }

    .invite-panel h3 {
      margin-bottom: 8px;
      font-size: 1.38rem;
      line-height: 1.22;
    }

    .invite-panel p {
      margin-bottom: 0;
      color: var(--muted);
    }

    .invite-panel .button {
      border-color: rgba(81, 145, 193, .45);
      background: #fff;
      color: var(--col-b);
      white-space: nowrap;
    }

    .invite-panel .document-button {
      flex-direction: column;
      gap: 10px;
      width: 156px;
      min-height: 156px;
      padding: 18px 14px;
      border-color: rgba(247, 1, 70, .26);
      color: var(--col-a-tug);
      text-align: center;
      white-space: normal;
      line-height: 1.16;
    }

    .invite-panel .document-button .document-icon {
      margin: 0;
      color: var(--col-a-tug);
      font-size: 4.15rem;
      line-height: 1;
    }

    .document-button-label {
      display: block;
      font-size: .9rem;
    }

    .document-button-label span {
      display: block;
    }

    .footer {
      background: #fff;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 28px 0;
      color: var(--muted);
      font-size: .94rem;
    }

    .license {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .license img {
      height: 24px;
      width: auto;
      flex: 0 0 auto;
    }

    .footer a {
      color: var(--muted);
      font-weight: 500;
      text-decoration: underline;

    }

    .footer a:hover {
      color: var(--col-a-tug);
      text-decoration: none;
      /* text-decoration: underline; */
    }

    @media (max-width: 940px) {
      html {
        scroll-padding-top: 92px;
      }

      .header-inner {
        grid-template-columns: auto 1fr auto;
        justify-content: space-between;
        gap: 14px;
      }

      .brand {
        justify-content: center;
      }

      .brand-flaait,
      .brand-tu {
        justify-self: auto;
      }

      .nav-buttons {
        display: flex;
      }

      .nav-buttons .nav-studierende,
      .nav-buttons .nav-lehrende {
        display: none;
      }

      .hero-inner,
      .section-head,
      .split {
        grid-template-columns: 1fr;
      }

      .hero-inner {
        min-height: 0;
        max-height: none;
        padding-top: 46px;
      }

      .facts,
      .grid-3,
      .course-thirds {
        grid-template-columns: 1fr;
      }

      .section-head {
        gap: 18px;
      }
    }

    @media (max-width: 640px) {
      .header-inner,
      .wrap {
        width: min(100% - 28px, 1120px);
      }

      .header-inner {
        grid-template-columns: auto auto;
      }

      .brand {
        flex-wrap: wrap;
      }

      .brand .flaait-logo {
        height: 34px;
      }

      .brand .tu-logo {
        height: 38px;
      }

      .nav-buttons {
        display: none;
      }

      .nav-buttons a,
      .button,
      .semester-button {
        width: 100%;
      }

      .hero-inner {
        gap: 28px;
        padding: 36px 0 44px;
      }

      h1 {
        font-size: clamp(2.65rem, 15vw, 4.4rem);
      }

      section {
        padding: 58px 0;
      }

      .program-visual,
      .highlight-panel,
      .invite-panel,
      .info-card,
      .third-card {
        padding: 20px;
      }

      .path-list li {
        grid-template-columns: 40px 1fr;
      }

      .path-number,
      .visual-mark {
        width: 40px;
        height: 40px;
      }

      .invite-panel {
        grid-template-columns: 1fr;
      }

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