/* UnitEINS Dialog – Stylesheet */
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/quicksand-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/quicksand-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/quicksand-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/source-sans-3-latin-700-normal.woff2') format('woff2'); }
:root {
    --navy: #00345E;
    --navy-deep: #00243F;
    --blue: #0080BD;
    --blue-text: #006A9E;
    --blue-soft: #E3F1F9;
    --sky: #9FD3EE;
    --grey: #ECEDEC;
    --ink: #1C2833;
    --ink-soft: #4A5563;
    --rule: #D6D9D6;
    --bubble: 28px 28px 28px 0;
    --max: 1200px;
    --aside: 240px;
    --display: 'Quicksand', 'Nunito', 'Trebuchet MS', sans-serif;
    --body: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', sans-serif;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 96px; }
  body {
    margin: 0;
    background: #FFFFFF;
    color: var(--ink);
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.6;
    overflow-x: hidden;
  }
  h1, h2, h3 { font-family: var(--display); margin: 0; color: var(--navy); }
  p { margin: 0; }
  a { color: var(--blue-text); }
  a:hover { color: var(--navy); }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
  ul { list-style: none; margin: 0; padding: 0; }
  img { max-width: 100%; }

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

  /* Das Kapsel-Motiv aus der Visitenkarte */
  .capsule {
    position: absolute;
    border-radius: 999px;
    background: var(--blue);
    transform: rotate(30deg);
    pointer-events: none;
  }

  /* ---------- Header ---------- */
  header {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid var(--rule);
  }
  header .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; min-height: 84px;
  }
  .brand img { display: block; height: 44px; width: auto; }
  header nav ul { display: flex; gap: 26px; }
  header nav a {
    display: inline-block; padding: 6px 0;
    font-family: var(--display); font-weight: 600; font-size: 16px;
    color: var(--ink); text-decoration: none;
    border-bottom: 3px solid transparent;
  }
  header nav a:hover { color: var(--navy); border-color: var(--blue); }
  header nav a.nav-cta {
    padding: 10px 20px; border-radius: 999px; border: 0;
    background: var(--navy); color: #FFFFFF;
  }
  header nav a.nav-cta:hover { background: var(--blue-text); color: #FFFFFF; }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; overflow: hidden;
    background: var(--navy); color: #FFFFFF;
    padding: 104px 0 112px;
  }
  .hero .c1 { width: 320px; height: 980px; left: 55%; top: -360px; }
  .hero .c2 { width: 320px; height: 980px; left: 82%; top: -220px; }

  /* Video-Header: Druckmaschine im Navy-Duotone */
  .hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--navy); }
  .hero-video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(1.25); transform: scale(1.18); transform-origin: 80% 92%; }
  .hero-media::before { content: ""; position: absolute; inset: 0; background: var(--navy); mix-blend-mode: multiply; }
  .hero-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,36,63,.85) 0%, rgba(0,36,63,.6) 40%, rgba(0,36,63,.05) 75%);
  }
  .hero .c1 { background: rgba(0,128,189,.55); }
  .hero .intro, .hero .signature, .hero .claim, .hero .betreff { text-shadow: 0 1px 14px rgba(0,36,63,.9), 0 0 2px rgba(0,36,63,.6); }
  .hero .c2 { background: rgba(0,128,189,.35); }

  /* Bewegte Kapseln: zwei Gesprächspartner, die aufeinander zukommen */
  @property --d {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
  }
  .hero .capsule {
    transform: none;
    rotate: 30deg;
    /* --d bewegt entlang der 30°-Achse der Kapsel, --mx/--my/--sy kommen aus dem Script */
    translate:
      calc(var(--d) * -0.5 + var(--mx, 0) * var(--k, 0) * 1px)
      calc(var(--d) * 0.866 + var(--my, 0) * var(--k, 0) * 1px + var(--sy, 0) * var(--ks, 0) * 1px);
    will-change: translate;
  }
  .hero .c1 { --k: 14; --ks: -0.18; animation: cap-in-up 1.5s cubic-bezier(.16,.8,.24,1) both, cap-talk-a 9s ease-in-out 1.5s infinite alternate; }
  .hero .c2 { --k: 24; --ks: -0.32; animation: cap-in-down 1.5s cubic-bezier(.16,.8,.24,1) 0.18s both, cap-talk-b 11s ease-in-out 1.68s infinite alternate; }
  @keyframes cap-in-up   { from { --d: 1100px; opacity: 0; } 30% { opacity: 1; } to { --d: 0px; } }
  @keyframes cap-in-down { from { --d: -1100px; opacity: 0; } 30% { opacity: 1; } to { --d: 0px; } }
  @keyframes cap-talk-a  { from { --d: 0px; } to { --d: -56px; } }
  @keyframes cap-talk-b  { from { --d: 0px; } to { --d: 48px; } }
  .hero .betreff, .hero .intro, .hero .signoff, .hero .absender {
    animation: rise 0.7s ease both;
  }
  .hero .betreff { animation-delay: 0.55s; }
  .hero h1 .ln > span { animation: line-up 0.9s cubic-bezier(.2,.75,.2,1) both; }
  .hero h1 .ln:nth-child(1) > span { animation-delay: 0.55s; }
  .hero h1 .ln:nth-child(2) > span { animation-delay: 0.7s; }
  .hero .intro { animation-delay: 1.9s; }
  .hero .signoff { animation-delay: 2.05s; }
  .hero .absender { animation-delay: 1.1s; }
  .hero .wrap {
    display: grid; grid-template-columns: 1fr 300px; gap: 64px; align-items: end;
  }
  .betreff { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--sky); margin-bottom: 18px; }
  .hero h1 { color: #FFFFFF; font-weight: 500; font-size: clamp(52px, 7.4vw, 96px); line-height: 1.02; letter-spacing: -0.01em; }
  .hero h1 .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .hero h1 .ln > span { display: block; }
  .claim { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); }
  .claim span { opacity: 0; animation: rise 0.55s ease forwards; }
  .claim span:nth-child(1) { animation-delay: 1.15s; }
  .claim span:nth-child(2) { animation-delay: 1.4s; }
  .claim span:nth-child(3) { animation-delay: 1.65s; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .claim span { animation: none; opacity: 1; }
    html { scroll-behavior: auto; }
    .hero .capsule, .hero .betreff, .hero h1 .ln > span, .hero .intro, .hero .signoff, .hero .absender { animation: none; }
  }
  .intro { margin-top: 22px; max-width: 46ch; font-size: 20px; color: #D5E4F0; }
  .signoff { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
  .btn {
    display: inline-flex; align-items: center; min-height: 54px; padding: 0 30px;
    border-radius: 999px; border: 2px solid transparent;
    font-family: var(--display); font-weight: 700; font-size: 17px; text-decoration: none;
  }
  .btn-light { background: #FFFFFF; color: var(--navy); }
  .btn-light:hover { background: var(--sky); color: var(--navy); }
  .btn-dark { background: var(--navy); color: #FFFFFF; }
  .btn-dark:hover { background: var(--blue-text); color: #FFFFFF; }
  .signature { font-family: var(--display); font-weight: 500; font-size: 16px; color: #D5E4F0; }

  /* Absender-Karte wie auf dem Briefbogen */
  .absender {
    position: relative;
    background: #FFFFFF; color: var(--ink);
    border-radius: var(--bubble);
    padding: 30px 30px 32px;
  }
  .absender .num { display: block; font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--blue); }
  .absender .cap { display: block; margin-top: 6px; font-size: 16px; line-height: 1.4; color: var(--ink-soft); }
  .absender dl { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }
  .absender dt { font-size: 14px; color: var(--ink-soft); margin-top: 14px; }
  .absender dt:first-child { margin-top: 0; }
  .absender dd { margin: 2px 0 0; font-size: 16px; line-height: 1.45; }

  /* ---------- Sections ---------- */
  section.block { padding: 104px 0; }
  section.tinted { background: var(--grey); }
  .brief { display: grid; grid-template-columns: var(--aside) 1fr; gap: 56px; }
  .section-head { margin-bottom: 40px; }
  .section-head h2 { font-weight: 600; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.15; }
  .section-head p { margin-top: 14px; max-width: 52ch; font-size: 19px; color: var(--ink-soft); }
  .aside-label { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--blue-text); padding-top: 12px; }
  .to-top { margin-top: 40px; font-size: 14px; }
  .to-top a { color: var(--ink-soft); }

  /* Leistungen */
  .services { display: flex; flex-direction: column; gap: 14px; }
  .service {
    display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: baseline;
    background: #FFFFFF; border-radius: var(--bubble); padding: 26px 32px;
  }
  .service h3 { font-weight: 700; font-size: 22px; }
  .service p { color: var(--ink-soft); }

  /* Warum uns */
  .gruende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
  .grund { padding: 26px 0; border-top: 1px solid var(--rule); }
  .grund h3 { font-weight: 700; font-size: 21px; line-height: 1.3; }
  .grund p { margin-top: 8px; font-size: 17px; color: var(--ink-soft); }

  /* Branchen – adressiert wie ein Brief */
  .branchen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .branche { background: var(--grey); border-radius: var(--bubble); padding: 26px 26px 30px; }
  .branche .an { font-size: 15px; color: var(--blue-text); font-weight: 600; margin-bottom: 12px; }
  .branche h3 { font-weight: 700; font-size: 20px; line-height: 1.3; }
  .branche p:last-child { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }

  /* Referenzen */
  .ref-label { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--navy); margin-bottom: 16px; }
  .logo-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .logo-slot {
    display: flex; align-items: center; justify-content: center; height: 140px; padding: 24px 36px;
    border: 1px solid var(--rule); border-radius: var(--bubble); background: #FFFFFF;
    font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink-soft);
  }
  .logo-empty { border-style: dashed; background: var(--grey); font-family: var(--body); font-weight: 400; font-size: 15px; }
  .logo-name { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--navy); letter-spacing: .01em; }
  .logo-slot img { display: block; max-height: 56px; max-width: 100%; width: auto; height: auto; }
  .long-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .long-list li {
    padding: 14px 20px; border-radius: 16px; background: var(--grey);
    font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--navy);
  }


  /* Arbeiten / Cases */
  .cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .cases > li { display: flex; }
  .cases > li > .case { flex: 1 1 auto; width: 100%; }
  .case { display: flex; flex-direction: column; background: #FFFFFF; border-radius: var(--bubble); overflow: hidden; text-decoration: none; color: var(--ink); border: 1px solid var(--rule); }
  a.case:hover { border-color: var(--blue); color: var(--ink); }
  a.case:hover .case-more { text-decoration: underline; }
  .case-img { aspect-ratio: 4 / 3; border-radius: 0; }
  img.case-img { display: block; width: 100%; object-fit: cover; }
  .case-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 28px; flex-grow: 1; }
  .case-an { font-size: 15px; font-weight: 600; color: var(--blue-text); }
  .case h3 { font-weight: 700; font-size: 22px; line-height: 1.3; }
  .case p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
  .case-more { margin-top: auto; padding-top: 8px; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--blue-text); }
  .auch { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--rule); }
  .branche .beispiel { display: inline-block; margin-top: 14px; font-family: var(--display); font-weight: 700; font-size: 15px; }

  /* Case-Ansicht (öffnet über #case-…) */
  .case-view { display: none; }
  .case-view:target { display: block; position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: #FFFFFF; }
  body:has(.case-view:target) { overflow: hidden; }
  .case-bar { position: sticky; top: 0; z-index: 2; background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--rule); }
  .case-bar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 20px; }
  .case-logo { height: 38px; width: auto; display: block; }
  .case-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 12px; border-radius: 999px; background: var(--navy); color: #FFFFFF; font-family: var(--display); font-weight: 700; font-size: 16px; text-decoration: none; }
  .case-close:hover { background: var(--blue-text); color: #FFFFFF; }
  .case-top { padding: 56px 0 36px; }
  .crumb { font-size: 15px; margin-bottom: 16px; }
  .case-title { font-weight: 600; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.08; }
  .case-top .about { margin-top: 14px; max-width: 56ch; font-size: 20px; color: var(--ink-soft); }
  .case-top .meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
  .case-top .meta span { padding: 6px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--navy); font-family: var(--display); font-weight: 600; font-size: 15px; }
  .slider { padding-bottom: 72px; }
  .stage { position: relative; }
  .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--bubble); background: var(--grey); scrollbar-width: none; }
  .track::-webkit-scrollbar { display: none; }
  .slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
  .slide img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: #FFFFFF; color: var(--navy); box-shadow: 0 4px 18px rgba(0, 52, 94, 0.18); display: flex; align-items: center; justify-content: center; }
  .nav-btn:hover { background: var(--navy); color: #FFFFFF; }
  .nav-btn:disabled { opacity: 0; pointer-events: none; }
  .nav-btn.prev { left: 20px; } .nav-btn.next { right: 20px; }
  .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; }
  .caption { font-size: 16px; color: var(--ink-soft); min-height: 1.6em; }
  .count { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--navy); white-space: nowrap; }
  .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 20px; }
  .thumb { padding: 0; border: 2px solid transparent; border-radius: 14px 14px 14px 0; overflow: hidden; background: none; cursor: pointer; }
  .thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .thumb[aria-current="true"] { border-color: var(--blue); }
  .case-foot { background: var(--navy); color: #FFFFFF; padding: 72px 0; }
  .case-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
  .case-foot p { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); }
  .case-soon { cursor: default; }
  .case-soon .case-more { color: var(--ink-soft); }
  @media (max-width: 860px) {
    .nav-btn { width: 44px; height: 44px; }
    .nav-btn.prev { left: 10px; } .nav-btn.next { right: 10px; }
    .case-close span { display: none; }
    .case-close { padding: 0 12px; }
  }

  /* ---------- Bewegung: Typo & Bilder ---------- */
  @keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }

  /* Überschriften: Wörter schieben sich aus einer Maske nach oben */
  .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .split .w > span { display: inline-block; transform: translateY(105%); transition: transform 0.8s cubic-bezier(.2,.75,.2,1); transition-delay: calc(var(--i) * 45ms); }
  .split.is-in .w > span { transform: none; }

  /* Bilder: ein blaues 30°-Band wischt weg, das Bild zoomt dabei leicht zurück */
  .wipe { position: relative; overflow: hidden; }
  .wipe--bubble { border-radius: var(--bubble); }
  .wipe > img, .wipe > .img-placeholder { transition: transform 1.4s cubic-bezier(.2,.75,.2,1), scale 0.6s ease; }
  .wipe::after {
    content: ""; position: absolute; inset: -60%; z-index: 2; pointer-events: none;
    background: var(--blue);
    transform: rotate(30deg) translateX(0);
    transition: transform 1.05s cubic-bezier(.7,0,.25,1);
    transition-delay: var(--wd, 0s);
  }
  .fx .wipe:not(.is-in) > img, .fx .wipe:not(.is-in) > .img-placeholder { transform: scale(1.14); }
  .wipe.is-in::after { transform: rotate(30deg) translateX(130%); }
  html:not(.fx) .wipe::after { display: none; }

  /* Hover auf Case-Kacheln: Bild zieht leicht an */
  a.case:hover .wipe > img, a.case:hover .wipe > .img-placeholder { scale: 1.05; }

  /* Leistungen: Zeile kippt beim Hover in Navy */
  .service { transition: background-color 0.25s ease, translate 0.25s ease; }
  .service h3, .service p { transition: color 0.25s ease; }
  .service:hover { background: var(--navy); translate: 8px 0; }
  .service:hover h3 { color: #FFFFFF; }
  .service:hover p { color: #D5E4F0; }

  /* Case-Slider: aktives Motiv zoomt langsam (Ken Burns) */
  .slide { overflow: hidden; }
  .slide img { transition: scale 7s linear; }
  .slide.is-active img { scale: 1.06; }

  @media (prefers-reduced-motion: reduce) {
    .split .w > span { transform: none; transition: none; }
    .wipe::after { display: none; }
    .wipe > img, .wipe > .img-placeholder, .slide img, .service { transition: none; transform: none; scale: none; translate: none; }
  }

  /* Papierflieger im Kontakt-Band */
  .kontakt .plane { position: absolute; top: 0; left: 50%; margin-left: -720px; z-index: 1; pointer-events: none; overflow: visible; }
  .plane .plane-body { visibility: hidden; }
  .plane.fly .plane-body { visibility: visible; }
  .plane .trail { opacity: .55; }
  .plane .trail-reveal { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .plane.fly .trail-reveal { stroke-dashoffset: 0; transition: stroke-dashoffset 2.8s cubic-bezier(.45,0,.2,1); }
  @media (max-width: 1100px) { .kontakt .plane { display: none; } }
  @media (prefers-reduced-motion: reduce) { .kontakt .plane { display: none; } }

  .case-view--product .slide img { object-fit: contain; background: #FFFFFF; }
  .case-view--product .track { background: #FFFFFF; border: 1px solid var(--rule); }

  .case-view--media .slide img, .slide video { object-fit: contain; background: #E9ECEB; }
  .slide video { display: block; width: 100%; aspect-ratio: 16 / 9; }
  .case-view--media .track { background: #E9ECEB; }
  .slide-video { position: relative; }

  /* Über uns */
  .team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .person h3 { margin-top: 22px; font-weight: 700; font-size: 26px; }
  .person .role { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--blue-text); margin-top: 2px; }
  .person p.bio { margin-top: 12px; color: var(--ink-soft); text-wrap: pretty; }
  .img-placeholder {
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: #D9E4EC; color: #3E5366; font-size: 15px; border-radius: var(--bubble);
  }
  .person-photo { aspect-ratio: 4 / 3; }
  img.person-photo--frank { object-fit: contain; object-position: center bottom; background: #FFFFFF; }
  img.person-photo { display: block; width: 100%; object-fit: cover; object-position: center top; border-radius: var(--bubble); background: #D8D8D8; }
  .team-note {
    grid-column: 1 / -1; display: flex; gap: 28px; align-items: center;
    background: var(--navy); color: #FFFFFF; border-radius: var(--bubble); padding: 32px 36px;
  }
  .team-note img { width: 72px; height: auto; flex-shrink: 0; }
  .team-note p { max-width: 70ch; color: #E6EEF5; }

  .logo-slot--tbd span { font-family: var(--display); font-weight: 700; font-size: 26px; color: #9AA7B2; letter-spacing: .01em; }
  .wissen-list { list-style: none; margin: 0; padding: 0; }
  .wissen-list a.service { text-decoration: none; color: inherit; background: #ECEDEC; }
  .wissen-list a.service h3 { color: var(--navy); }
  /* Wissen */
  .wissen { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
  .wissen-thumb { aspect-ratio: 210 / 297; }
  img.wissen-thumb { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 18px 40px rgba(0,52,94,.22); transform: rotate(-2deg); }
  .wissen p { margin-top: 14px; max-width: 50ch; font-size: 19px; color: var(--ink-soft); }
  .wissen .btn { margin-top: 28px; }

  /* Kontakt */
  .kontakt { position: relative; overflow: hidden; background: var(--blue-text); color: #FFFFFF; padding: 104px 0; }
  .kontakt .c3 { width: 260px; height: 760px; left: 68%; top: -300px; background: rgba(0, 52, 94, 0.5); }
  .kontakt .c4 { width: 260px; height: 760px; left: 88%; top: -160px; background: rgba(0, 128, 189, 0.9); }
  .case-foot .c5 { width: 200px; height: 620px; left: 62%; top: -260px; background: var(--blue); }
  .case-foot .c6 { width: 200px; height: 620px; left: 80%; top: -170px; background: rgba(0, 128, 189, 0.55); }

  /* Dieselbe Kapsel-Dynamik wie im Hero – startet, wenn der Bereich ins Bild scrollt */
  .dyn { position: relative; overflow: hidden; isolation: isolate; }
  .dyn > .wrap, .dyn > img, .dyn > p { position: relative; z-index: 1; }
  .dyn .capsule {
    z-index: 0;
    transform: none;
    rotate: 30deg;
    translate:
      calc(var(--d) * -0.5 + var(--mx, 0) * var(--k, 0) * 1px)
      calc(var(--d) * 0.866 + var(--my, 0) * var(--k, 0) * 1px);
  }
  .dyn .cap-a { --k: 12; } .dyn .cap-b { --k: 22; }
  .dyn.dyn-ready:not(.is-in) .cap-a { --d: 900px; opacity: 0; }
  .dyn.dyn-ready:not(.is-in) .cap-b { --d: -900px; opacity: 0; }
  .dyn.is-in .cap-a { animation: cap-in-up 1.4s cubic-bezier(.16,.8,.24,1) both, cap-talk-a 9s ease-in-out 1.4s infinite alternate; }
  .dyn.is-in .cap-b { animation: cap-in-down 1.4s cubic-bezier(.16,.8,.24,1) 0.15s both, cap-talk-b 11s ease-in-out 1.55s infinite alternate; }
  @media (prefers-reduced-motion: reduce) {
    .dyn .capsule, .dyn.is-in .capsule { animation: none; }
    .dyn.dyn-ready:not(.is-in) .capsule { --d: 0px; opacity: 1; }
  }
  .kontakt .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
  .kontakt h2 { color: #FFFFFF; font-weight: 600; font-size: clamp(34px, 4vw, 50px); line-height: 1.12; }
  .kontakt .lead { margin-top: 16px; font-size: 20px; color: #FFFFFF; max-width: 42ch; }
  .kontakt address {
    position: relative; font-style: normal; font-size: 19px; line-height: 1.6;
    background: #FFFFFF; color: var(--ink); border-radius: var(--bubble); padding: 32px 34px;
  }
  .kontakt address strong { font-family: var(--display); color: var(--navy); font-size: 20px; }
  .kontakt address a { color: var(--blue-text); }
  .kontakt .to-top a { color: #FFFFFF; }

  /* Rechtliches */
  .legal { padding: 88px 0; border-top: 1px solid var(--rule); }
  .legal-block { max-width: 760px; }
  .legal-block h2 { font-size: 34px; margin-bottom: 28px; }
  .legal-block h3 { font-size: 21px; margin: 36px 0 12px; }
  .legal-block p, .legal-block address { margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); font-style: normal; }
  .legal-block strong { color: var(--ink); }

  /* ---------- Footer ---------- */
  footer { background: var(--navy-deep); color: #C9D6E2; padding: 56px 0 44px; font-size: 15px; }
  footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
  footer img { height: 42px; width: auto; display: block; }
  footer nav ul { display: flex; gap: 24px; }
  footer a { color: #C9D6E2; }
  footer a:hover { color: #FFFFFF; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1080px) {
    header .wrap { flex-wrap: wrap; padding-top: 14px; padding-bottom: 12px; }
    header nav { width: 100%; overflow-x: auto; }
    header nav ul { gap: 22px; white-space: nowrap; padding-bottom: 4px; }
    html { scroll-padding-top: 136px; }
    .branchen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 860px) {
    .wrap { padding: 0 22px; }
    .hero { padding: 72px 0 80px; }
    .hero .wrap, .brief, .kontakt .wrap, .wissen { grid-template-columns: 1fr; gap: 36px; }
    .hero .c1 { left: 60%; } .hero .c2 { display: none; }
    .kontakt .c3 { left: 55%; } .kontakt .c4 { left: 82%; }
    .aside-label { padding-top: 0; }
    section.block, .kontakt { padding: 72px 0; }
    .service { grid-template-columns: 1fr; gap: 6px; padding: 22px 24px; }
    .gruende, .team { grid-template-columns: 1fr; }
    .cases { grid-template-columns: 1fr; }
    .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .logo-slot { height: 104px; padding: 18px 20px; }
    .wissen-thumb { max-width: 220px; }
    .team-note { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 560px) {
    .branchen { grid-template-columns: 1fr; }
  }

/* ---------- Ergänzungen für die Live-Seite ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Artikel (Praxisblicke) */
.article { padding: 88px 0 72px; }
.article .aside-label a { color: var(--blue-text); text-decoration: none; }
.article .aside-label a:hover { text-decoration: underline; }
.prose { max-width: 760px; }
.prose h1 { font-weight: 600; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.12; color: var(--navy); }
.prose .lead { margin-top: 18px; font-size: 21px; line-height: 1.55; color: var(--ink-soft); }
.prose h2 { font-weight: 600; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; margin: 56px 0 16px; }
.prose h3 { font-weight: 700; font-size: 21px; line-height: 1.3; margin: 32px 0 10px; }
.prose p { margin: 0 0 16px; }
.prose p a, .prose li a { color: var(--blue-text); }
.prose strong { color: var(--navy); font-weight: 700; }
.prose .points { margin: 8px 0 24px; display: grid; gap: 12px; }
.prose .points li { position: relative; padding: 18px 22px 18px 26px; background: var(--grey); border-radius: var(--bubble); }
.prose .points li strong { display: block; font-family: var(--display); font-size: 18px; margin-bottom: 2px; }
.lang-switch { margin-bottom: 18px; font-family: var(--display); font-weight: 700; font-size: 15px; }
.lang-switch a { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--navy); text-decoration: none; }
.lang-switch a:hover { background: var(--sky); }

/* Häufige Fragen */
.faq { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--rule); }
.faq h2 { margin-top: 0; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 48px 20px 0; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:hover { color: var(--blue-text); }
.faq details p { margin: 0 0 22px; color: var(--ink-soft); }

/* Weiterlesen */
.more { padding: 80px 0; }
.more .wissen-list a.service { background: #FFFFFF; }
.more-all { margin-top: 24px; font-family: var(--display); font-weight: 700; }

/* Kleines Kontakt-Band auf Unterseiten */
.kontakt--small { padding: 80px 0; }

/* Rechtliche Seiten */
.page-legal .legal { border-top: 0; }
.legal-block h1 { font-size: clamp(32px, 3.6vw, 42px); font-weight: 600; margin-bottom: 32px; }
.legal-block ul.legal-list { margin: 0 0 16px 1.2em; list-style: disc; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.legal-block a { color: var(--blue-text); }

@media (max-width: 860px) {
  .article { padding: 56px 0 48px; }
  .prose .lead { font-size: 19px; }
  .more { padding: 56px 0; }
}