/* Ported from input/templates/main/über-uns.html. */

:root {
      --cannectra-brand: #578b9b;
      --cannectra-brand-dark: #365f6b;
      --cannectra-brand-accessible: #477887;
      --cannectra-brand-soft: #eaf4f6;
      --cannectra-ink: #1e2a2f;
      --cannectra-muted: #5c7078;
      --cannectra-line: #d1e1e5;
      --cannectra-surface: #ffffff;
      --cannectra-canvas: #f4fafb;
      --cannectra-accent: #ff8a2a;
      --cannectra-content: 1540px;
      --about-radius: 22px;
      --about-shadow: 0 18px 48px rgba(30, 42, 47, .07);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 5% 8%, rgba(94, 143, 158, .055), transparent 28rem),
        radial-gradient(circle at 95% 42%, rgba(242, 140, 53, .025), transparent 26rem),
        var(--cannectra-canvas);
      color: var(--cannectra-ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.55;
    }

    a { color: inherit; }

    .cannectra-about-page {
      width: min(var(--cannectra-content), calc(100% - 2rem));
      margin-inline: auto;
      padding: 1rem 0 clamp(4rem, 7vw, 7rem);
    }

    .cannectra-page-title {
      isolation: isolate;
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      overflow: hidden;
      width: 100%;
      min-height: 104px;
      margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
      padding: 17px 22px;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 22px;
      background:
        radial-gradient(circle at 88% 22%, rgba(242, 140, 53, .2), transparent 15rem),
        linear-gradient(128deg, #315866 0%, #4c7886 58%, #5e8f9e 100%);
      box-shadow: 0 10px 28px rgba(49, 88, 102, .12);
      color: #fff;
    }

    .cannectra-page-title::before {
      position: absolute;
      z-index: -1;
      right: -15px;
      bottom: -87px;
      width: 220px;
      height: 150px;
      background: linear-gradient(90deg, transparent 0 12%, #fff 12% 24%, transparent 24% 36%, #fff 36% 48%, transparent 48% 60%, #fff 60% 72%, transparent 72% 84%, #fff 84% 96%, transparent 96%);
      content: "";
      opacity: .055;
      transform: skewX(-7deg);
    }

    .cannectra-page-title::after {
      position: absolute;
      top: 50%;
      right: 24px;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 13px;
      background: rgba(255, 255, 255, .035);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
      content: "";
      transform: translateY(-50%) rotate(5deg);
    }

    .cannectra-page-title__copy { position: relative; z-index: 2; }

    .cannectra-page-title__eyebrow,
    .cannectra-about-kicker {
      display: block;
      margin-bottom: 6px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .cannectra-page-title__eyebrow { color: #fff; }

    .cannectra-page-title h1 {
      margin: 0;
      color: #fff;
      font-size: clamp(24px, 2.5vw, 34px);
      line-height: 1.05;
      letter-spacing: -.035em;
    }

    .cannectra-about-kicker { color: var(--cannectra-brand-accessible); }

    .cannectra-about-stack {
      display: grid;
      gap: clamp(1rem, 2.3vw, 1.6rem);
    }

    .cannectra-about-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.42fr) minmax(340px, .58fr);
      gap: clamp(1rem, 2vw, 1.4rem);
    }

    .cannectra-about-lead,
    .cannectra-about-facts,
    .cannectra-about-card,
    .cannectra-about-story,
    .cannectra-about-principles,
    .cannectra-about-audience,
    .cannectra-about-cta {
      border: 1px solid rgba(76, 120, 134, .16);
      border-radius: var(--about-radius);
      box-shadow: var(--about-shadow);
    }

    .cannectra-about-lead {
      position: relative;
      overflow: hidden;
      min-height: 470px;
      padding: clamp(2rem, 4vw, 4.5rem);
      background:
        radial-gradient(circle at 88% 17%, rgba(242, 140, 53, .12), transparent 13rem),
        linear-gradient(145deg, #ffffff 0%, #f7fbfc 100%);
    }

    .cannectra-about-lead::after {
      position: absolute;
      right: -7rem;
      bottom: -10rem;
      width: 27rem;
      height: 27rem;
      border: 1px solid rgba(87, 139, 155, .13);
      border-radius: 34% 58% 42% 65%;
      background: linear-gradient(135deg, rgba(87, 139, 155, .08), rgba(255, 138, 42, .04));
      content: "";
      transform: rotate(17deg);
    }

    .cannectra-about-lead > * { position: relative; z-index: 1; }

    .cannectra-about-lead h2 {
      max-width: 900px;
      margin: .55rem 0 1.15rem;
      font-size: clamp(2.3rem, 4.8vw, 5.15rem);
      line-height: .98;
      letter-spacing: -.057em;
    }

    .cannectra-about-lead p {
      max-width: 780px;
      margin: 0;
      color: var(--cannectra-muted);
      font-size: clamp(1rem, 1.4vw, 1.22rem);
      line-height: 1.75;
    }

    .cannectra-about-lead strong { color: var(--cannectra-ink); }

    .cannectra-about-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .7rem;
      margin-top: 1.8rem;
    }

    .cannectra-about-button {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      padding: .7rem 1rem;
      border: 1px solid transparent;
      border-radius: 11px;
      font-size: .78rem;
      font-weight: 850;
      text-decoration: none;
      transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .cannectra-about-button:hover { transform: translateY(-1px); }

    .cannectra-about-button:focus-visible,
    .cannectra-about-textlink:focus-visible {
      outline: 3px solid rgba(255, 138, 42, .35);
      outline-offset: 3px;
    }

    .cannectra-about-button--primary {
      background: var(--cannectra-accent);
      box-shadow: 0 9px 22px rgba(255, 138, 42, .2);
      color: #fff;
    }

    .cannectra-about-button--primary:hover { background: #df6e17; }

    .cannectra-about-button--secondary {
      border-color: var(--cannectra-line);
      background: #fff;
      color: var(--cannectra-brand-dark);
    }

    .cannectra-about-button--secondary:hover {
      border-color: rgba(76, 120, 134, .32);
      background: var(--cannectra-brand-soft);
    }

    .cannectra-about-facts {
      position: relative;
      display: grid;
      align-content: stretch;
      overflow: hidden;
      background:
        radial-gradient(circle at 82% 8%, rgba(242, 140, 53, .18), transparent 11rem),
        linear-gradient(145deg, #315866, #477887 55%, #5e8f9e);
      color: #fff;
    }

    .cannectra-about-facts::before {
      position: absolute;
      inset: auto -5rem -5rem auto;
      width: 15rem;
      height: 15rem;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 34%;
      content: "";
      transform: rotate(19deg);
    }

    .cannectra-about-fact {
      position: relative;
      z-index: 1;
      display: grid;
      align-content: center;
      min-height: 156px;
      padding: 1.5rem 1.7rem;
      border-bottom: 1px solid rgba(255, 255, 255, .13);
    }

    .cannectra-about-fact:last-child { border-bottom: 0; }

    .cannectra-about-fact span {
      color: rgba(255,255,255,.72);
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .cannectra-about-fact strong {
      margin-top: .25rem;
      font-size: clamp(2.2rem, 4vw, 4rem);
      line-height: 1;
      letter-spacing: -.055em;
    }

    .cannectra-about-fact small {
      margin-top: .45rem;
      color: rgba(255,255,255,.83);
      font-size: .78rem;
      line-height: 1.5;
    }

    .cannectra-about-section {
      display: grid;
      gap: 1rem;
      padding-block: clamp(1rem, 2.4vw, 2rem);
    }

    .cannectra-about-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 500px);
      gap: 1.2rem;
      align-items: end;
    }

    .cannectra-about-heading h2 {
      margin: .25rem 0 0;
      font-size: clamp(2rem, 3.6vw, 3.8rem);
      line-height: 1;
      letter-spacing: -.052em;
    }

    .cannectra-about-heading p {
      margin: 0;
      color: var(--cannectra-muted);
      font-size: .9rem;
      line-height: 1.7;
    }

    .cannectra-about-services {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    .cannectra-about-card {
      position: relative;
      display: grid;
      min-height: 275px;
      overflow: hidden;
      padding: 1.55rem;
      background: #fff;
    }

    .cannectra-about-card::after {
      position: absolute;
      right: -2.8rem;
      bottom: -3.7rem;
      width: 9rem;
      height: 9rem;
      border: 1rem solid rgba(87, 139, 155, .055);
      border-radius: 28px;
      content: "";
      transform: rotate(-12deg);
    }

    .cannectra-about-card__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .cannectra-about-icon {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border-radius: 12px;
      background: var(--cannectra-brand-soft);
      color: var(--cannectra-brand-dark);
    }

    .cannectra-about-icon svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .cannectra-about-index {
      color: var(--cannectra-accent);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .cannectra-about-card h3 {
      align-self: end;
      margin: 2.7rem 0 .45rem;
      font-size: clamp(1.35rem, 2vw, 1.8rem);
      line-height: 1.08;
      letter-spacing: -.035em;
    }

    .cannectra-about-card p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--cannectra-muted);
      font-size: .86rem;
      line-height: 1.7;
    }

    .cannectra-about-story {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
      overflow: hidden;
      background: #fff;
    }

    .cannectra-about-story__copy {
      padding: clamp(2rem, 4vw, 4rem);
    }

    .cannectra-about-story__copy h2 {
      max-width: 760px;
      margin: .35rem 0 1.1rem;
      font-size: clamp(2rem, 3.8vw, 3.7rem);
      line-height: 1;
      letter-spacing: -.052em;
    }

    .cannectra-about-story__copy p {
      max-width: 780px;
      margin: 0 0 1rem;
      color: var(--cannectra-muted);
      font-size: .92rem;
      line-height: 1.78;
    }

    .cannectra-about-story__copy p:last-child { margin-bottom: 0; }

    .cannectra-about-story__copy strong { color: var(--cannectra-ink); }

    .cannectra-about-timeline {
      display: grid;
      align-content: center;
      gap: 0;
      padding: clamp(1.5rem, 3vw, 2.5rem);
      background:
        radial-gradient(circle at 100% 0%, rgba(242, 140, 53, .09), transparent 13rem),
        #edf5f7;
    }

    .cannectra-about-timeline__item {
      position: relative;
      display: grid;
      grid-template-columns: 78px 1fr;
      gap: 1rem;
      min-height: 125px;
      padding: 1rem 0 1.35rem;
    }

    .cannectra-about-timeline__item:not(:last-child)::after {
      position: absolute;
      top: 58px;
      bottom: -4px;
      left: 38px;
      width: 1px;
      background: rgba(76, 120, 134, .23);
      content: "";
    }

    .cannectra-about-timeline__year {
      display: grid;
      width: 76px;
      height: 48px;
      place-items: center;
      border: 1px solid rgba(76, 120, 134, .18);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(30, 42, 47, .05);
      color: var(--cannectra-brand-dark);
      font-size: .92rem;
      font-weight: 900;
    }

    .cannectra-about-timeline__copy strong {
      display: block;
      margin-bottom: .3rem;
      font-size: 1rem;
    }

    .cannectra-about-timeline__copy p {
      margin: 0;
      color: var(--cannectra-muted);
      font-size: .78rem;
      line-height: 1.6;
    }

    .cannectra-about-principles {
      display: grid;
      grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
      overflow: hidden;
      background:
        radial-gradient(circle at 5% 95%, rgba(242, 140, 53, .12), transparent 18rem),
        linear-gradient(135deg, #294f5a, #365f6b 52%, #477887);
      color: #fff;
    }

    .cannectra-about-principles__intro {
      padding: clamp(2rem, 4vw, 4rem);
      border-right: 1px solid rgba(255,255,255,.13);
    }

    .cannectra-about-principles__intro .cannectra-about-kicker { color: rgba(255,255,255,.7); }

    .cannectra-about-principles__intro h2 {
      margin: .4rem 0 .9rem;
      font-size: clamp(2rem, 3.6vw, 3.6rem);
      line-height: 1;
      letter-spacing: -.052em;
    }

    .cannectra-about-principles__intro p {
      max-width: 500px;
      margin: 0;
      color: rgba(255,255,255,.78);
      font-size: .87rem;
      line-height: 1.72;
    }

    .cannectra-about-principles ul {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .cannectra-about-principles li {
      min-height: 180px;
      padding: 1.65rem;
      border-right: 1px solid rgba(255,255,255,.12);
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .cannectra-about-principles li:nth-child(2n) { border-right: 0; }
    .cannectra-about-principles li:nth-last-child(-n+2) { border-bottom: 0; }

    .cannectra-about-principles li span {
      color: #ffc08c;
      font-size: .72rem;
      font-weight: 900;
    }

    .cannectra-about-principles li strong {
      display: block;
      margin: 1.5rem 0 .35rem;
      font-size: 1.05rem;
    }

    .cannectra-about-principles li small {
      display: block;
      color: rgba(255,255,255,.72);
      font-size: .76rem;
      line-height: 1.6;
    }

    .cannectra-about-audience {
      display: grid;
      grid-template-columns: minmax(260px, .6fr) minmax(0, 1.4fr);
      gap: 1rem;
      align-items: center;
      padding: clamp(1.5rem, 3vw, 2.3rem);
      background: #fff;
    }

    .cannectra-about-audience h2 {
      margin: .3rem 0 0;
      font-size: clamp(1.7rem, 3vw, 2.8rem);
      line-height: 1;
      letter-spacing: -.045em;
    }

    .cannectra-about-audience ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: .55rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .cannectra-about-audience li {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      gap: .5rem;
      padding: .6rem .85rem;
      border: 1px solid var(--cannectra-line);
      border-radius: 999px;
      background: #f9fcfd;
      color: #405961;
      font-size: .76rem;
      font-weight: 800;
    }

    .cannectra-about-audience li::before {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--cannectra-accent);
      box-shadow: 0 0 0 3px rgba(255, 138, 42, .1);
      content: "";
    }

    .cannectra-about-cta {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) auto;
      gap: 1.5rem;
      align-items: center;
      overflow: hidden;
      padding: clamp(2rem, 4vw, 3.5rem);
      background:
        radial-gradient(circle at 90% 30%, rgba(242, 140, 53, .22), transparent 12rem),
        linear-gradient(125deg, #e9f4f6, #ffffff 58%, #fff6ec);
    }

    .cannectra-about-cta::after {
      position: absolute;
      right: 18%;
      bottom: -85px;
      width: 180px;
      height: 180px;
      border: 1px solid rgba(76, 120, 134, .13);
      border-radius: 43px;
      content: "";
      transform: rotate(22deg);
    }

    .cannectra-about-cta > * { position: relative; z-index: 1; }

    .cannectra-about-cta h2 {
      max-width: 880px;
      margin: .3rem 0 .75rem;
      font-size: clamp(2rem, 4vw, 4rem);
      line-height: 1;
      letter-spacing: -.055em;
    }

    .cannectra-about-cta p {
      max-width: 760px;
      margin: 0;
      color: var(--cannectra-muted);
      font-size: .88rem;
      line-height: 1.72;
    }

    .cannectra-about-cta__actions {
      display: grid;
      min-width: 220px;
      gap: .65rem;
    }

    .cannectra-about-textlink {
      display: inline-flex;
      justify-content: center;
      color: var(--cannectra-brand-dark);
      font-size: .76rem;
      font-weight: 850;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }

    @media (max-width: 1100px) {
      .cannectra-about-intro,
      .cannectra-about-story,
      .cannectra-about-principles {
        grid-template-columns: 1fr;
      }

      .cannectra-about-facts {
        grid-template-columns: repeat(3, 1fr);
      }

      .cannectra-about-fact {
        min-height: 145px;
        border-right: 1px solid rgba(255,255,255,.13);
        border-bottom: 0;
      }

      .cannectra-about-fact:last-child { border-right: 0; }

      .cannectra-about-principles__intro {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.13);
      }
    }

    @media (max-width: 820px) {
      .cannectra-about-page { width: min(var(--cannectra-content), calc(100% - 1rem)); }

      .cannectra-about-heading,
      .cannectra-about-audience,
      .cannectra-about-cta {
        grid-template-columns: 1fr;
      }

      .cannectra-about-services { grid-template-columns: 1fr; }
      .cannectra-about-card { min-height: 220px; }
      .cannectra-about-audience ul { justify-content: flex-start; }
      .cannectra-about-cta__actions { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .cannectra-about-textlink { grid-column: 1 / -1; }
    }

    @media (max-width: 640px) {
      .cannectra-page-title { border-radius: 16px; }
      .cannectra-page-title::after { display: none; }

      .cannectra-about-lead,
      .cannectra-about-facts,
      .cannectra-about-card,
      .cannectra-about-story,
      .cannectra-about-principles,
      .cannectra-about-audience,
      .cannectra-about-cta { border-radius: 16px; }

      .cannectra-about-lead { min-height: 0; padding: 1.5rem; }
      .cannectra-about-lead h2 { font-size: clamp(2.25rem, 12vw, 3.2rem); }
      .cannectra-about-facts { grid-template-columns: 1fr; }
      .cannectra-about-fact { min-height: 118px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
      .cannectra-about-fact:last-child { border-bottom: 0; }
      .cannectra-about-heading { align-items: start; }
      .cannectra-about-story__copy { padding: 1.5rem; }
      .cannectra-about-timeline { padding: 1.2rem; }
      .cannectra-about-principles ul { grid-template-columns: 1fr; }
      .cannectra-about-principles li { min-height: 145px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
      .cannectra-about-principles li:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
      .cannectra-about-principles li:last-child { border-bottom: 0; }
      .cannectra-about-cta__actions { grid-template-columns: 1fr; }
      .cannectra-about-textlink { grid-column: auto; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .cannectra-about-button { transition: none; }
      .cannectra-about-button:hover { transform: none; }
    }