nav a[aria-current=page] {
  color:#d8b8ff;
  border-bottom:1px solid #b59be4
}
.page-hero {
  padding-top:65px;
  padding-bottom:70px
}
.page-hero.has-visual {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:60px
}
.page-hero h1 {
  font-size:clamp(42px,4.7vw,68px);
  letter-spacing:-2.8px;
  line-height:1.12
}
.page-hero .intro {
  margin-bottom:0;
  max-width:620px
}
.breadcrumb {
  font-size:11px;
  color:#8f869c;
  margin:0 0 45px
}
.breadcrumb a {
  color:#cdb4ed
}
.page-visual {
  min-height:280px;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse,#6c3aa033,transparent 70%)
}
.page-visual img {
  width:100%;
  max-height:380px;
  object-fit:contain
}
.page-visual .seal-hero {
  max-width:300px
}
.page-visual .contact-cat {
  max-width:330px
}
.body-copy {
  font-size:16px;
  line-height:1.9;
  color:#aaa0b7
}
.team-section {
  padding-top:30px
}
.team-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.person {
  background:#211a2c;
  border:1px solid #ffffff15;
  border-radius:12px;
  overflow:hidden;
  position:relative
}
.portrait {
  height:310px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:radial-gradient(ellipse at bottom,#6741aa77,transparent 75%);
  padding-top:25px
}
.portrait img {
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:bottom
}
.rose .portrait {
  background:radial-gradient(ellipse at bottom,#a43a7f66,transparent 75%)
}
.gold .portrait {
  background:radial-gradient(ellipse at bottom,#b18b2c55,transparent 75%)
}
.cat {
  padding:35px
}
.cat img {
  object-position:center
}
.person-caption {
  padding:28px;
  background:#14101988;
  border-top:1px solid #ffffff12
}
.person-caption>span {
  font-size:9px;
  color:#bca7d7;
  letter-spacing:2px
}
.person h3 {
  font-size:25px;
  letter-spacing:-.5px;
  margin:8px 0
}
.person p {
  color:#aaa0b7;
  font-size:12px;
  margin:0
}
.split-copy {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  align-items:start
}
.team-section .split-copy {
  padding-top:85px
}
.split-copy p {
  font-size:16px;
  line-height:1.9;
  color:#aaa0b7;
  margin-top:0
}
.split-copy h3 {
  font-size:22px;
  margin:0 0 15px
}
.office {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:7%;
  align-items:center;
  padding-top:50px
}
.office-image {
  position:relative
}
.office-image>img {
  width:100%;
  display:block;
  aspect-ratio:1.35;
  object-fit:cover;
  border-radius:12px
}
.office-image>span {
  position:absolute;
  left:20px;
  bottom:20px;
  background:#141019dd;
  padding:12px 16px;
  border-radius:4px;
  font-size:9px;
  letter-spacing:2px
}
.office address {
  font-style:normal;
  color:#d7c9e9;
  font-size:14px;
  line-height:1.8;
  margin-top:25px
}
.mascot {
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:10%;
  align-items:center
}
.mascot>div:first-child {
  background:radial-gradient(ellipse,#bb8f2e22,transparent 65%)
}
.mascot>div>img {
  width:100%;
  max-height:400px;
  object-fit:contain
}
.seals {
  display:flex;
  align-items:center;
  gap:30px;
  margin-top:30px
}
.seals img:first-child {
  width:110px
}
.seals img:last-child {
  width:220px;
  max-width:55%
}
.team-preview img {
  width:94%;
  opacity:1;
  filter:none
}
.portfolio {
  padding-top:0
}
.portfolio-intro {
  display:flex;
  justify-content:space-between;
  gap:25px;
  border-block:1px solid #ffffff20;
  padding:15px 0;
  margin-bottom:35px;
  color:#b1a6bd;
  font-size:10px;
  letter-spacing:1px;
  align-items:center
}
.portfolio .project-image {
  height:370px
}
.signature {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  padding-top:10px
}
.signature>div>img {
  width:170px;
  margin-bottom:30px
}
.signature>img {
  width:300px;
  max-width:35%
}
.case-top {
  padding-top:0
}
.case-cover {
  border-radius:12px;
  padding:45px 8%;
  overflow:hidden;
  max-height:640px
}
.case-cover img {
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  box-shadow:0 20px 50px #0003
}
.case-meta {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:30px 0;
  border-bottom:1px solid #ffffff20;
  gap:25px
}
.case-meta>div {
  display:flex;
  flex-direction:column;
  gap:10px
}
.case-meta span {
  font-size:9px;
  letter-spacing:2px;
  color:#9d8bac
}
.case-meta strong {
  font-size:14px;
  font-weight:650
}
.case-story {
  padding-top:0
}
.case-story h2 {
  font-size:42px
}
.case-device {
  border:1px solid #ffffff20;
  border-radius:12px;
  background:radial-gradient(ellipse,#5d318733,transparent 70%);
  padding:45px
}
.case-device img {
  width:100%;
  max-height:650px;
  object-fit:contain
}
.case-gallery {
  padding-top:0
}
.case-gallery .text-link {
  margin-top:20px
}
.next-project {
  padding-top:0
}
.service-overview {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  padding-top:15px
}
.service-tile {
  border:1px solid #ffffff20;
  border-radius:10px;
  padding:40px;
  background:#1b1523;
  transition:border-color .2s
}
.service-tile:hover {
  border-color:#b59be4
}
.service-tile h2 {
  font-size:32px;
  letter-spacing:-1px
}
.service-tile p {
  font-size:14px;
  line-height:1.9;
  color:#a59ab1
}
.related {
  padding-top:20px
}
.related h2 {
  font-size:35px;
  margin-bottom:35px
}
.contact-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:9%;
  padding-top:20px
}
.contact-big {
  display:block;
  font-size:clamp(17px,2vw,25px);
  margin-top:25px;
  color:#d4b8f2
}
.contact-team {
  width:210px;
  display:block;
  margin-top:35px
}
.contact-layout .body-copy {
  margin-top:30px
}
form {
  padding:35px;
  background:#1b1523;
  border:1px solid #ffffff15;
  border-radius:12px
}
form label {
  display:block;
  font-size:12px;
  color:#d2c6de;
  margin:18px 0 8px
}
input,select,textarea {
  width:100%;
  border:1px solid #ffffff25;
  border-radius:4px;
  background:#100d16;
  color:#faf6ff;
  padding:12px;
  font:inherit;
  font-size:14px
}
input:focus,select:focus,textarea:focus {
  outline:2px solid #b59be4;
  outline-offset:2px
}
.form-note {
  font-size:11px;
  color:#a99ab8;
  line-height:1.8;
  margin:22px 0
}
.form-note a {
  text-decoration:underline
}
form .button {
  border:0;
  cursor:pointer
}
#form-status {
  font-size:12px;
  color:#d6b9f3;
  line-height:1.8
}
.legal {
  max-width:1000px;
  padding-top:0
}
.legal h2 {
  font-size:30px
}
.legal h3 {
  font-size:21px;
  margin-top:35px
}
.legal p,.legal address {
  font-size:15px;
  line-height:1.9;
  color:#b1a6bd;
  font-style:normal
}
.legal p a {
  text-decoration:underline
}
.footer-nav {
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:12px;
  color:#b9a9c9
}
.footer-top {
  align-items:flex-start
}
.footer-top>a:last-child {
  padding-top:12px
}
@media(max-width:1000px) {
  .portrait {
    height:240px
  }
  .person-caption {
    padding:20px
  }
  .person h3 {
    font-size:21px
  }
  .page-hero.has-visual {
    gap:25px
  }
  .service-tile {
    padding:28px
  }
  .portfolio .project-image {
    height:310px
  }
}
@media(max-width:720px) {
  .page-hero {
    padding-top:35px;
    padding-bottom:40px
  }
  .page-hero.has-visual {
    grid-template-columns:1fr;
    gap:30px
  }
  .page-hero h1 {
    font-size:42px;
    letter-spacing:-2px
  }
  .breadcrumb {
    margin-bottom:28px
  }
  .page-visual {
    min-height:180px;
    max-height:250px
  }
  .page-visual img {
    max-height:230px
  }
  .page-visual .seal-hero {
    width:190px
  }
  .page-visual .contact-cat {
    max-width:230px
  }
  .team-grid {
    grid-template-columns:1fr;
    gap:22px
  }
  .portrait {
    height:300px
  }
  .person-caption {
    padding:24px
  }
  .person h3 {
    font-size:25px
  }
  .team-section .split-copy {
    padding-top:50px
  }
  .split-copy,.office,.mascot,.contact-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .split-copy p {
    font-size:14px
  }
  .office {
    padding-top:20px
  }
  .office-image>img {
    aspect-ratio:1.4
  }
  .office h2 {
    font-size:34px
  }
  .mascot {
    padding-top:20px
  }
  .mascot>div>img {
    max-height:280px
  }
  .seals {
    gap:20px
  }
  .signature {
    flex-direction:column;
    align-items:flex-start
  }
  .signature>img {
    max-width:80%;
    width:260px
  }
  .portfolio-intro {
    font-size:8px;
    letter-spacing:.5px
  }
  .portfolio-intro p {
    max-width:180px;
    line-height:1.8
  }
  .portfolio .project-image {
    height:290px
  }
  .case-cover {
    padding:25px 6%;
    max-height:380px
  }
  .case-meta {
    grid-template-columns:1fr;
    gap:20px;
    padding:25px 0
  }
  .case-meta>div {
    flex-direction:row;
    justify-content:space-between;
    align-items:center
  }
  .case-meta strong {
    font-size:12px;
    text-align:right
  }
  .case-story h2 {
    font-size:35px
  }
  .case-device {
    padding:20px
  }
  .case-gallery {
    padding-top:0
  }
  .service-overview {
    grid-template-columns:1fr
  }
  .service-tile {
    padding:30px
  }
  .service-tile h2 {
    font-size:30px
  }
  .related h2 {
    font-size:32px
  }
  .contact-layout {
    padding-top:10px
  }
  .contact-big {
    font-size:20px
  }
  form {
    padding:25px
  }
  .footer-top p {
    width:auto;
    order:initial
  }
  .footer-nav {
    width:100%;
    flex-direction:row;
    flex-wrap:wrap;
    font-size:11px;
    gap:18px
  }
  .footer-top>a:last-child {
    display:none
  }
  .legal h2 {
    font-size:26px
  }
  .legal p {
    font-size:14px
  }
  .legal {
    overflow-wrap:anywhere
  }
  .case-cover img {
    min-height:0
  }
  .seals img {
    height:auto
  }
}
/* SVG icons */
.ui-icon {
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-.14em;
  flex-shrink:0;
  overflow:visible
}
.ticker .ui-icon,.service-symbol .ui-icon {
  vertical-align:middle
}
.menu-toggle {
  align-items:center
}
.menu-toggle .ui-icon {
  width:16px;
  height:16px
}
.contact:after {
  content:"";
  width:190px;
  height:190px;
  background:#b794e8;
  opacity:.09;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20M4.93 4.93l14.14 14.14M4.93 19.07L19.07 4.93' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20M4.93 4.93l14.14 14.14M4.93 19.07L19.07 4.93' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat
}
@media(max-width:720px) {
  .contact:after {
    width:130px;
    height:130px
  }
}
/* Staggered team portraits: the cropped side closes against the card edge. */
.team-section .team-grid {
  display:flex;
  flex-direction:column;
  gap:24px;
  position:relative;
  background:radial-gradient(ellipse at 48% 48%,#386dd52b,transparent 55%),radial-gradient(ellipse at 60% 65%,#7133aa22,transparent 60%)
}
.team-section .person {
  width:59%;
  height:285px;
  align-self:flex-end;
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:none
}
.team-section .person:before {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:118px;
  border:1px solid #bca5dc40;
  border-radius:12px;
  background:linear-gradient(150deg,#6741ad,#241930 80%);
  box-shadow:0 10px 25px #0003
}
.team-section .person.rose {
  align-self:flex-start
}
.team-section .person.rose:before {
  background:linear-gradient(150deg,#823c91,#241930 80%)
}
.team-section .person.gold:before {
  background:linear-gradient(150deg,#99762b,#282016 80%)
}
.team-section .portrait {
  position:absolute;
  bottom:0;
  right:0;
  width:43%;
  height:285px;
  padding:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  background:none
}
.team-section .portrait img {
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:right bottom
}
.team-section .rose .portrait {
  right:auto;
  left:0;
  justify-content:flex-start;
  background:none
}
.team-section .rose .portrait img {
  object-position:left bottom
}
.team-section .gold .portrait {
  width:40%;
  height:235px;
  background:none
}
.team-section .person-caption {
  position:absolute;
  bottom:0;
  left:0;
  width:59%;
  height:118px;
  border:0;
  background:none;
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center
}
.team-section .rose .person-caption {
  left:auto;
  right:0;
  width:59%
}
.team-section .person-caption>span {
  font-size:8px;
  letter-spacing:1.8px
}
.team-section .person-caption h3 {
  margin:7px 0 4px;
  font-size:25px
}
.team-section .person-caption p {
  font-size:12px;
  line-height:1.5
}
@media(max-width:1000px) {
  .team-section .person {
    width:73%
  }
  .team-section .person-caption h3 {
    font-size:23px
  }
}
@media(max-width:720px) {
  .team-section .team-grid {
    gap:25px
  }
  .team-section .person {
    width:100%;
    height:255px
  }
  .team-section .portrait {
    height:255px;
    width:43%
  }
  .team-section .person:before,.team-section .person-caption {
    height:112px
  }
  .team-section .person-caption {
    padding:14px 12px;
    width:59%
  }
  .team-section .rose .person-caption {
    width:59%
  }
  .team-section .person-caption h3 {
    font-size:21px;
    letter-spacing:-.5px
  }
  .team-section .person-caption p {
    font-size:10px
  }
  .team-section .person-caption>span {
    font-size:7px;
    letter-spacing:1.3px
  }
  .team-section .gold .portrait {
    height:210px;
    width:43%
  }
}
@media(max-width:380px) {
  .team-section .person-caption h3 {
    font-size:19px
  }
  .team-section .person-caption p {
    font-size:9px
  }
}
.team-section .gold .portrait img {
  width:100%;
  height:auto;
  max-width:215px;
  object-fit:contain;
  object-position:right bottom;
  transform:translateY(21.5%)
}
.team-section .team-grid {
  background:radial-gradient(ellipse closest-side at 48% 48%,#386dd52b 0%,#386dd514 48%,#386dd500 100%),radial-gradient(ellipse closest-side at 60% 65%,#7133aa22 0%,#7133aa10 45%,#7133aa00 100%)
}
.project-image.scheck {
  background:#211815;
  padding:0!important
}
.project-image.scheck>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:9px;
  box-shadow:none
}
.project-image.scheck .project-number {
  color:#ffbc98;
  background:#1d1618d9;
  border-radius:4px;
  padding:7px 9px;
  z-index:1;
  top:12px;
  left:12px;
  font-size:8px
}
.project-image.scheck .project-arrow {
  background:#ff712f;
  color:#171015
}
.case-cover.scheck {
  background:#151217;
  padding:0;
  max-height:none
}
.case-cover.scheck>img {
  border-radius:10px;
  box-shadow:none
}
.case-device:has(img[src$="scheck-gmbh-detail.svg"]) {
  padding:0;
  overflow:hidden
}
.case-device img[src$="scheck-gmbh-detail.svg"] {
  max-height:none;
  display:block
}
.design-credit {
  border-left:2px solid #ff7636;
  padding:4px 0 4px 22px;
  margin-top:32px
}
.design-credit>span {
  display:block;
  font-size:9px;
  letter-spacing:2px;
  color:#ffad7e;
  margin-bottom:12px
}
.design-credit strong {
  display:block;
  font-size:22px;
  line-height:1.4;
  color:#f5e8df;
  margin-bottom:12px
}
.design-credit p {
  font-size:14px;
  line-height:1.8;
  margin-bottom:0
}
.case-device:has(img[src$="scheck-premium-detail.png"]) {
  padding:0;
  overflow:hidden;
  border:0
}
.case-device img[src$="scheck-premium-detail.png"] {
  max-height:none;
  display:block
}
.signature .body-copy {
  max-width:620px
}
.project-image.scheck .project-number {
  background:#171012dd
}
.project-image.wagner {
  background:#c5baa0;
  padding:0!important
}
.project-image.wagner>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:9px;
  box-shadow:none
}
.project-image.wagner .project-number {
  color:#f0e9d8;
  background:#201e17db;
  border-radius:4px;
  padding:7px 9px;
  z-index:1;
  top:12px;
  left:12px;
  font-size:8px
}
.project-image.wagner .project-arrow {
  background:#c2c569;
  color:#171810
}
.case-cover.wagner {
  padding:0;
  max-height:none;
  background:#d9ceb8
}
.case-cover.wagner>img {
  border-radius:10px;
  box-shadow:none
}
.case-device:has(img[src$="wagner-premium-detail.png"]) {
  padding:0;
  overflow:hidden;
  border:0
}
.case-device img[src$="wagner-premium-detail.png"] {
  max-height:none;
  display:block
}
.project-image.sylt {
  background:#d3dfe0;
  padding:0!important
}
.project-image.sylt>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:9px;
  box-shadow:none
}
.project-image.sylt .project-number {
  color:#e7f4f3;
  background:#254953e0;
  border-radius:4px;
  padding:7px 9px;
  z-index:1;
  top:12px;
  left:12px;
  font-size:8px
}
.project-image.sylt .project-arrow {
  background:#b8d6db;
  color:#173b45
}
.case-cover.sylt {
  padding:0;
  max-height:none;
  background:#dfd4bf
}
.case-cover.sylt>img {
  border-radius:10px;
  box-shadow:none
}
.case-device:has(img[src$="sylt-premium-detail.png"]) {
  padding:0;
  overflow:hidden;
  border:0
}
.case-device img[src$="sylt-premium-detail.png"] {
  max-height:none;
  display:block
}
main:has(.case-cover.sylt) .design-credit {
  border-color:#83b5c0
}
main:has(.case-cover.sylt) .design-credit>span {
  color:#acd5dc
}
.project-image.beauty {
  background:#d4c2aa;
  padding:0!important
}
.project-image.beauty>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:9px;
  box-shadow:none
}
.project-image.beauty .project-number {
  color:#fff0d7;
  background:#3e3025dc;
  border-radius:4px;
  padding:7px 9px;
  z-index:1;
  top:12px;
  left:12px;
  font-size:8px
}
.project-image.beauty .project-arrow {
  background:#d4b36f;
  color:#211b14
}
.case-cover.beauty {
  padding:0;
  max-height:none;
  background:#d4c2aa
}
.case-cover.beauty>img {
  border-radius:10px;
  box-shadow:none
}
.case-device:has(img[src$="beauty-premium-detail.png"]) {
  padding:0;
  overflow:hidden;
  border:0
}
.case-device img[src$="beauty-premium-detail.png"] {
  max-height:none;
  display:block
}
main:has(.case-cover.beauty) .design-credit {
  border-color:#c4a160
}
main:has(.case-cover.beauty) .design-credit>span {
  color:#e4c58f
}
.kali-case {
  padding-top:25px
}
.kali-case-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:7%
}
.kali-case .agency-lead {
  font-size:22px;
  line-height:1.6;
  color:#e3d9ed;
  margin-top:0
}
.kali-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.kali-stats>a {
  display:block;
  padding:28px;
  background:linear-gradient(140deg,#1c362c,#17141d);
  border:1px solid #78b19a33;
  border-radius:12px
}
.kali-stats>a>span:first-child {
  font-size:8px;
  letter-spacing:1px;
  color:#b6d7c8
}
.kali-stats strong {
  display:block;
  font-size:35px;
  letter-spacing:-1px;
  margin-top:25px;
  color:#c1ebd6
}
.kali-stats p {
  color:#a9b8af;
  font-size:12px
}
.kali-stats .text-link {
  font-size:11px
}
.kali-source {
  font-size:10px;
  line-height:1.8;
  color:#988da4;
  margin-top:25px
}
@media(max-width:720px) {
  .kali-case-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .kali-stats {
    gap:12px
  }
  .kali-stats>a {
    padding:18px
  }
  .kali-stats strong {
    font-size:25px
  }
  .kali-case .agency-lead {
    font-size:18px
  }
}
.page-visual:has(.kali-hero) {
  background:none;
  min-height:0;
  max-height:none
}
.kali-hero {
  width:100%;
  max-width:500px;
  padding:30px;
  border:1px solid #8bdbb735;
  border-radius:20px;
  background:radial-gradient(ellipse at 95% 0,#32614c65,transparent 65%),#111d19;
  box-shadow:0 20px 60px #0002
}
.kali-hero-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:27px;
  font-size:11px;
  letter-spacing:1.8px;
  color:#b1d6c4
}
.kali-platform {
  display:flex;
  align-items:center;
  gap:7px;
  color:#ecf5ef;
  font-size:13px;
  letter-spacing:0
}
.kali-channel {
  display:block
}
.kali-channel h2 {
  font-size:43px;
  line-height:1.05;
  letter-spacing:-1.5px;
  margin:0 0 15px
}
.kali-channel h2>span {
  color:#a4dcbc
}
.kali-channel>span {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#c9ddcf
}
.kali-channel>span .ui-icon {
  width:15px;
  height:15px
}
.kali-hero-copy {
  font-size:16px;
  line-height:1.65;
  color:#b0c2b7;
  margin:22px 0
}
.kali-hero-numbers {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.kali-hero-numbers>a {
  padding:20px 16px;
  background:#ffffff08;
  border:1px solid #add4bc1c;
  border-radius:12px;
  min-width:0
}
.kali-hero-numbers strong {
  display:block;
  color:#c1f1d4;
  font-size:clamp(24px,2.5vw,34px);
  letter-spacing:-1px;
  white-space:nowrap;
  line-height:1.2
}
.kali-hero-numbers a:last-child strong {
  color:#f0f6f2
}
.kali-hero-numbers>a>span {
  display:block;
  font-size:12px;
  line-height:1.5;
  color:#b2c9bc;
  margin-top:8px
}
.kali-hero-bottom {
  border-top:1px solid #b6d9c320;
  padding-top:18px;
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:9px;
  color:#c7d8cd;
  font-size:12px;
  line-height:1.5
}
.kali-hero-bottom small {
  font-size:11px;
  color:#97b2a2
}
@media(max-width:720px) {
  .page-visual:has(.kali-hero) {
    max-height:none
  }
  .kali-hero {
    padding:26px;
    max-width:500px
  }
  .kali-channel h2 {
    font-size:40px
  }
  .kali-hero-numbers strong {
    font-size:clamp(25px,7vw,34px)
  }
}
@media(max-width:380px) {
  .kali-hero {
    padding:20px
  }
  .kali-hero-numbers>a {
    padding:18px 12px
  }
  .kali-hero-numbers strong {
    font-size:25px
  }
}

/* Kundenlogos: Originale, einheitlich helle Darstellung. */
.customers { padding:60px 0 46px; border-bottom:1px solid #ffffff12; }
.customers-heading { max-width:1320px; padding:0 6%; margin:0 auto 28px; text-align:center; }
.customers-heading h2 { font-size:14px; font-weight:500; letter-spacing:.02em; color:#bfb8cc; margin:0; }
.customers-window { overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent); }
.customers-track { display:flex; width:max-content; animation:customer-drift var(--customer-duration,40s) linear infinite; }
.customers-group { display:flex; align-items:center; gap:128px; padding:0 64px; flex-shrink:0; }
.customer-logo { width:230px; height:120px; flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:16px; color:#d9cee9; text-decoration:none; }
.customer-logo img { display:block; max-width:100%; max-height:104px; width:auto; height:auto; object-fit:contain; }
.customer-scheck img { filter:none; }
.customer-wagner img { width:70px; filter:brightness(0) saturate(100%) invert(90%) sepia(8%) saturate(620%) hue-rotate(220deg); }
.customer-wagner span { font-size:12px; line-height:1.7; white-space:nowrap; }
.customer-wagner strong { font-size:17px; font-weight:500; }
.customer-duenenliebe img { width:64px; filter:brightness(0) saturate(100%) invert(90%) sepia(8%) saturate(620%) hue-rotate(220deg); }
.customer-duenenliebe span { font-family:Georgia,serif; font-size:24px; white-space:nowrap; }
.customer-duenenliebe small { display:block; font:10px Arial,sans-serif; letter-spacing:.4em; margin-top:8px; }
.customer-xenia img { width:220px; }
.customer-logo:focus-visible { outline:2px solid #b59be4; outline-offset:3px; border-radius:10px; }
@keyframes customer-drift { to { transform:translateX(var(--customer-distance,-50%)); } }
@media(max-width:600px) {
 .customers { padding:36px 0 28px; }
 .customers-heading { padding:0 6%; }
 .customers-heading h2 { font-size:13px; line-height:1.6; }
 .customers-group { gap:76px; padding:0 38px; }
 .customer-logo { width:210px; height:100px; }
}


.customer-kali img { width:210px; filter:brightness(0) saturate(100%) invert(90%) sepia(8%) saturate(620%) hue-rotate(220deg); }

.form-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#inquiry-form button:disabled { opacity:.6; cursor:wait; }

/* Referenzauftakt mit bestehenden Projektmotiven statt Siegel. */
.page-visual.reference-art { position:relative; isolation:isolate; display:block; height:420px; min-height:0; max-height:none; background:none; }
.reference-art::before { content:''; position:absolute; inset:5% -4%; background:radial-gradient(ellipse,#8b60bd29,transparent 68%); z-index:-1; }
.reference-art-orbit { position:absolute; inset:4% 6%; border:1px solid #b59be418; border-radius:50%; transform:rotate(-24deg); }
.reference-preview { position:absolute; display:block; overflow:hidden; border:1px solid #d2b9f044; border-radius:12px; background:#19151f; box-shadow:0 22px 50px #0007; transition:transform .25s,border-color .25s; }
.reference-preview img { display:block; width:100%; height:auto; max-height:none; aspect-ratio:1.65; object-fit:cover; }
.reference-preview span { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; font-size:9px; letter-spacing:.16em; color:#e8dfef; }
.reference-preview b { font-size:19px; font-weight:400; }
.reference-preview-back { width:67%; top:8%; right:0; transform:rotate(9deg); }
.reference-preview-front { width:78%; top:29%; left:0; transform:rotate(-7deg); z-index:2; }
.reference-preview-small { width:39%; right:0; bottom:4%; transform:rotate(6deg); z-index:3; }
.reference-preview-small span { padding:10px; font-size:8px; letter-spacing:.1em; }
.reference-preview:hover,.reference-preview:focus-visible { transform:rotate(0deg) translateY(-5px); border-color:#c4a6ef; outline:2px solid #c4a6ef; outline-offset:3px; }
.reference-art-note { position:absolute; bottom:0; left:5%; font-size:10px; letter-spacing:.08em; color:#b8a6cb; }
@media(max-width:1000px) and (min-width:721px) { .page-visual.reference-art { height:330px; } }
@media(max-width:720px) { .page-visual.reference-art { height:340px; width:100%; max-width:460px; margin:0 auto; } }
@media(max-width:380px) { .page-visual.reference-art { height:290px; } }
@media(prefers-reduced-motion:reduce) { .reference-preview { transition:none; } }

.legal-verbatim { padding-top:65px; }
.legal-verbatim h1 { margin-bottom:48px; overflow-wrap:anywhere; }
.legal-verbatim p { white-space:pre-line; overflow-wrap:anywhere; }
.legal-verbatim h2,.legal-verbatim h3 { overflow-wrap:anywhere; }
@media(max-width:720px) { .legal-verbatim { padding-top:35px; } .legal-verbatim h1 { font-size:clamp(27px,7vw,42px); letter-spacing:-1px; } }

/* Lesbare Datenschutzerklaerung mit sinnvollem Titelumbruch. */
.privacy-policy h1 { font-size:clamp(28px,5vw,52px); line-height:1.2; letter-spacing:-.8px; margin-bottom:32px; overflow-wrap:normal; hyphens:manual; }
.privacy-policy h2 { font-size:clamp(21px,2.5vw,28px); line-height:1.35; margin-top:36px; }
.privacy-policy h3 { font-size:18px; line-height:1.5; }
.privacy-policy p { font-size:15px; line-height:1.8; white-space:normal; }
.privacy-policy a { color:#cdb4ed; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.privacy-policy a:hover { color:#fff; }
.privacy-policy a:focus-visible { outline:2px solid #cdb4ed; outline-offset:3px; }
/* Theme switch and light palette. Project photographs retain their original colours. */
:root { color-scheme:dark; }
header nav { margin-left:auto; }
.theme-toggle { flex:0 0 42px; width:42px; height:42px; margin-left:22px; display:grid; place-items:center; border:1px solid #ffffff35; border-radius:50%; color:#ddd0eb; background:transparent; cursor:pointer; }
.theme-toggle:hover { color:#fff; background:#ffffff0a; }
.theme-toggle .theme-moon { display:none; }
html[data-theme=light] { color-scheme:light; }
html[data-theme=light] .theme-sun { display:none; }
html[data-theme=light] .theme-moon { display:block; }
html[data-theme=light] body { background:#e8e5e2; color:#21192c; }
html[data-theme=light] a:hover { color:#603a91; }
html[data-theme=light] :is(header,.footer-bottom,.text-link,.service-list,.service-list article,.steps article,.faq details,.customers,.portfolio-intro,.case-device,.case-meta,.contact-links) { border-color:#35204326; }
html[data-theme=light] :is(.eyebrow,.intro,.body-copy,.section-heading>p,.hero-foot,.art-label,.art-note>span:last-child,.project-caption>span,.service-index,.service-list p,.agency p:not(.eyebrow),.steps p,.faq details p,.contact-bottom p,.contact-links,.footer-top p,.footer-top>a:last-child,.footer-bottom,.split-copy p,.person p,.service-tile p,.legal p,.legal address,.office address,.breadcrumb,.portfolio-intro,.case-meta,.case-story p,.case-story li,.form-note,.reference-art-note,.customers-heading h2) { color:#65596f; }
html[data-theme=light] :is(h1>span,h2>span,.service-symbol,.steps article>span,.faq summary>span,.contact-big,.breadcrumb a,.privacy-policy a,#form-status) { color:#70459d; }
html[data-theme=light] nav a:not(.nav-cta) { color:#4d405c; }
html[data-theme=light] nav a[aria-current=page] { color:#70459d; border-color:#70459d; }
html[data-theme=light] :is(.nav-cta,.menu-toggle,.theme-toggle) { color:#493457; border-color:#35204330; }
html[data-theme=light] .theme-toggle:hover { background:#ddd6e2; }
html[data-theme=light] :is(.service-tile,form,.agency-visual) { background:#e0dbe3; border-color:#35204320; }
html[data-theme=light] .agency .agency-lead { color:#483652!important; }
html[data-theme=light] .agency-visual>span { color:#46334f; }
html[data-theme=light] .contact { background:#dcd3e3; }
html[data-theme=light] .button { background:#70459d; color:#fff; }
html[data-theme=light] .button:hover { background:#58327e; color:#fff; }
html[data-theme=light] form label { color:#4b3b58; }
html[data-theme=light] :is(input,select,textarea) { background:#eeebe8; color:#21192c; border-color:#35204338; }
html[data-theme=light] :is(input,textarea)::placeholder { color:#776c7f; }
.logo-light { display:none; }
html[data-theme=light] .logo-dark { display:none; }
html[data-theme=light] .logo-light { display:block; }
html[data-theme=light] .customer-logo { color:#51336c; }
html[data-theme=light] :is(.customer-wagner,.customer-duenenliebe,.customer-kali) img { filter:brightness(0) saturate(100%) invert(21%) sepia(23%) saturate(1200%) hue-rotate(226deg); }
html[data-theme=light] .customer-scheck img { filter:brightness(0) saturate(100%) invert(21%) sepia(23%) saturate(1200%) hue-rotate(226deg); }
html[data-theme=light] .customer-xenia img { filter:brightness(0) saturate(100%) invert(21%) sepia(23%) saturate(1200%) hue-rotate(226deg); }
html[data-theme=light] .team-grid .person { color:#f6f5f8; }
html[data-theme=light] .team-grid .person :is(p,.person-caption>span) { color:#e0d5ed; }
html[data-theme=light] .reference-preview { box-shadow:0 20px 40px #34204226; }
html[data-theme=light] .reference-preview span { color:#eee7f4; }
html[data-theme=light] .office-image>span { color:#fff; }
html[data-theme=light] :is(.kali-hero,.kali-channel,.kali-hero-numbers) { color:#f0f6f2; }
html[data-theme=light] .privacy-policy a:hover { color:#462267; }
@media(max-width:720px) {
 header nav { margin-left:0; }
 .theme-toggle { order:1; margin-left:auto; margin-right:12px; width:36px; height:36px; flex-basis:36px; }
 header .menu-toggle { order:2; }
 html[data-theme=light] nav { background:#e8e5e2; border-color:#35204326; box-shadow:0 18px 28px #35204312; }
}
@media(max-width:380px) {
 header .logo { width:125px; }
 .theme-toggle { margin-right:8px; }
 .menu-toggle { gap:6px; padding:9px; }
}
html[data-theme=light] .case-meta span { color:#6d5a7d; }
html[data-theme=light] .case-meta strong { color:#30233d; }
html[data-theme=light] .service-tile:hover { border-color:#70459d; }

@media(max-width:720px) { header .menu-toggle { width:44px; height:44px; padding:0; gap:0; align-items:center; justify-content:center; } header .menu-toggle>span { display:flex; } }
/* Full-screen mobile navigation. */
.mobile-menu-intro,.mobile-menu-footer,.menu-toggle .menu-close { display:none; }
@media(max-width:720px) {
  html.menu-open,html.menu-open body { overflow:hidden; overscroll-behavior:none; }
  header .menu-toggle { border-radius:50%; }
  header .menu-toggle[aria-expanded=true]>span { display:none; }
  header .menu-toggle[aria-expanded=true] .menu-close { display:block; }
  html.menu-open header>a:first-child { position:fixed; top:calc(15px + env(safe-area-inset-top,0px)); left:6%; z-index:102; }
  html.menu-open header .theme-toggle { position:fixed; top:calc(19px + env(safe-area-inset-top,0px)); right:calc(6% + 56px); z-index:102; margin:0; }
  html.menu-open header .menu-toggle { position:fixed; top:calc(15px + env(safe-area-inset-top,0px)); right:6%; z-index:102; }
  header #navigation {
    position:fixed; inset:0; width:100%; height:100vh; height:100dvh;
    z-index:101; overflow-y:auto; overscroll-behavior:contain;
    padding:calc(112px + env(safe-area-inset-top,0px)) 8% calc(30px + env(safe-area-inset-bottom,0px));
    background:radial-gradient(ellipse at 100% 0%,#58337530,transparent 58%),#141218;
    border:0; gap:0; align-items:stretch; counter-reset:menu-link;
  }
  header #navigation.open { display:flex; animation:none; }
  header #navigation.open>:is(.mobile-menu-intro,a,.mobile-menu-footer) { animation:menu-item-reveal .28s cubic-bezier(.2,.7,.2,1) both; }
  .mobile-menu-intro { display:block; font-size:9px; font-weight:700; letter-spacing:.18em; line-height:1.7; color:#a69bb1; margin:0 0 24px; max-width:240px; }
  header #navigation>a {
    position:relative; display:flex; align-items:center; justify-content:space-between;
    min-height:72px; padding:16px 0 16px 35px; margin:0;
    font-size:clamp(28px,7.8vw,42px); font-weight:750; line-height:1.15; letter-spacing:-1px;
    color:#f1edf6; border:0; border-bottom:1px solid #ffffff17; border-radius:0;
  }
  header #navigation>a::before { counter-increment:menu-link; content:'0' counter(menu-link); position:absolute; left:0; top:25px; font-size:10px; font-weight:500; letter-spacing:.05em; color:#a48bbf; }
  header #navigation>a[aria-current=page] { color:#c3a0ee; }
  header #navigation>a:hover { color:#c3a0ee; }
  header #navigation>.nav-cta { color:#c3a0ee; font-size:clamp(26px,7vw,38px); }
  header #navigation>.nav-cta span { margin-left:10px; display:flex; }
  header #navigation>.nav-cta svg { width:26px; height:26px; }
  .mobile-menu-footer { display:flex; flex-direction:column; gap:12px; padding-top:38px; margin-top:auto; }
  .mobile-menu-footer>a { font-size:14px; color:#c7bdd2; letter-spacing:0; }
  .mobile-menu-footer p { margin:22px 0 0; font-size:9px; font-weight:800; letter-spacing:.16em; color:#9d8ba9; }
  .mobile-menu-footer p span { display:block; font-size:10px; font-weight:400; letter-spacing:0; margin-top:8px; }
  html[data-theme=light] header #navigation { background:radial-gradient(ellipse at 100% 0%,#9970c025,transparent 58%),#e8e5e2; box-shadow:none; }
  html[data-theme=light] header #navigation>a { color:#2e223c; border-color:#35204326; }
  html[data-theme=light] header #navigation>a[aria-current=page],html[data-theme=light] header #navigation>.nav-cta,html[data-theme=light] header #navigation>a:hover { color:#70459d; }
  html[data-theme=light] .mobile-menu-intro,html[data-theme=light] .mobile-menu-footer :is(a,p),html[data-theme=light] header #navigation>a::before { color:#685674; }
}
@keyframes menu-item-reveal { from { opacity:0; transform:translate3d(0,10px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@media(max-width:720px) and (max-height:650px) {
  header #navigation { padding-top:90px; }
  .mobile-menu-intro { margin-bottom:12px; }
  header #navigation>a { min-height:56px; font-size:27px; padding-top:12px; padding-bottom:12px; }
  header #navigation>a::before { top:20px; }
  .mobile-menu-footer { padding-top:24px; }
}
@media(prefers-reduced-motion:reduce) { header #navigation.open>:is(.mobile-menu-intro,a,.mobile-menu-footer) { animation:none; } }

@media(max-width:720px) { html.menu-open header.menu-pointer :is(a,button):focus-visible { outline:none; } }

.logo-dark, html[data-theme=light] .logo-light { display:flex; align-items:center; gap:5%; aspect-ratio:3 / 1; }
.logo .brand-lion { display:block; width:32%; height:100%; object-fit:contain; }
.logo .brand-wordmark { display:block; width:63%; height:auto; }

html[data-theme=light] .logo-dark { display:none; }