/* Über uns – team, People & Places, values, locations */

/* =========================================================================
   Hero: photo-less, three faces on one hand-drawn thread, flowing lines
   ========================================================================= */
.about-hero { min-height: clamp(600px, 80vh, 760px); padding-bottom: clamp(104px, 12vw, 168px); }
.about-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.about-hero .page-hero__content { max-width: 600px; }
.about-hero__title { font-size: clamp(3.2rem, 1.6rem + 5.4vw, 6.4rem); line-height: .95; letter-spacing: -.028em; }
.about-hero__title .scribble { bottom: -.06em; height: .26em; }
.about-hero .lead { max-width: 46ch; }
.i--down { rotate: 90deg; }

/* --- flowing lines (hand-drawn, slow, calm) --- */
.flow {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  width: 100%; height: clamp(150px, 20vw, 270px); overflow: hidden; pointer-events: none;
}
.flow__line { fill: none; stroke: var(--lime-400); stroke-width: 1.7; stroke-linecap: round; opacity: .62; }
.flow__line--echo { stroke-width: 1; opacity: .34; }
.flow__line--thin { stroke: var(--lime-300); stroke-width: 1.1; opacity: .34; }
.flow__line--faint { stroke: var(--lime-200); stroke-width: 1.2; opacity: .2; }
.flow__glint { fill: var(--lime-200); opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .flow__drift--1 { animation: flow-left 64s linear infinite; }
  .flow__drift--2 { animation: flow-right 92s linear infinite; }
  .flow__drift--3 { animation: flow-left 120s linear infinite; }
  .flow__glint { animation: flow-glint 9s var(--ease-out) infinite; animation-delay: calc(3.2s + var(--g) * 2.9s); }
  .flow.is-paused .flow__drift, .flow.is-paused .flow__glint { animation-play-state: paused; }
}
@keyframes flow-left { from { transform: translateX(0); } to { transform: translateX(-720px); } }
@keyframes flow-right { from { transform: translateX(-720px); } to { transform: translateX(0); } }
@keyframes flow-glint {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(-40deg); }
  6% { opacity: .95; transform: scale(1.1) rotate(0deg); }
  14% { opacity: 0; transform: scale(.3) rotate(30deg); }
}

/* --- three faces, one thread --- */
.trio { position: relative; width: 100%; max-width: 540px; aspect-ratio: 540 / 390; justify-self: end; margin-top: 24px; }
.trio__thread {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: var(--lime-400); stroke-width: 1.8; stroke-linecap: round; opacity: .75;
}
.trio__face { position: absolute; width: 31%; left: var(--x); top: var(--y); rotate: var(--r); }
.trio__face--1 { --x: 0%; --y: 36%; --r: -4deg; --in: .35s; --fd: 0s; }
.trio__face--2 { --x: 34.5%; --y: 3%; --r: 3deg; --in: .5s; --fd: -2.4s; }
.trio__face--3 { --x: 69%; --y: 31%; --r: -2deg; --in: .65s; --fd: -4.6s; }
.trio__photo {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--forest-800);
  box-shadow: 0 0 0 4px #fffdf8, 0 22px 40px -16px rgba(0, 0, 0, .75);
}
.trio__photo picture, .trio__photo img { width: 100%; height: 100%; }
.trio__photo img { object-fit: cover; transform: scale(1.1); }        /* crops the round frame baked into the portraits */
.trio__ring, .person__ring {
  position: absolute; left: -11%; top: -11%; width: 122%; max-width: none; height: 122%; overflow: visible; pointer-events: none;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.trio__ring { stroke: var(--lime-400); stroke-width: 2; }
.trio__name {
  position: absolute; left: 50%; top: 100%; margin-top: 10px; translate: -50% 0; rotate: -5deg;
  font-family: var(--font-hand); font-size: clamp(1.45rem, 1rem + 1vw, 2rem); font-weight: 700; line-height: 1;
  color: var(--lime-300); white-space: nowrap;
}
.trio__hello {
  position: absolute; left: 6%; top: 2%; rotate: -9deg;
  font-family: var(--font-hand); font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem); font-weight: 700; color: #fff;
}
.trio__hello::after {                /* little swoosh under the greeting */
  content: ""; display: block; width: 76%; height: 8px; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6C30 2 60 1.5 98 4' fill='none' stroke='%237cc22e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .trio__face { animation: trio-in .95s var(--ease-spring) var(--in) both, trio-float 8s ease-in-out calc(var(--in) + 1.2s) infinite; }
  .trio__hello { animation: trio-hello .8s var(--ease-out) 2.2s both; }
}
@keyframes trio-in { from { opacity: 0; scale: .82; } }
@keyframes trio-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes trio-hello { from { opacity: 0; translate: 0 10px; } }

@media (max-width: 900px) {
  .about-hero { min-height: 0; }
  .about-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .trio { order: -1; justify-self: center; max-width: 420px; margin-top: 0; }
  .trio__photo { box-shadow: 0 0 0 3px #fffdf8, 0 16px 30px -14px rgba(0, 0, 0, .75); }
  .trio__name { margin-top: 6px; }
}

/* =========================================================================
   Team
   ========================================================================= */
.team .section-head { margin-bottom: clamp(48px, 6vw, 84px); }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
.person {
  --tilt: -2deg;
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 clamp(20px, 2.4vw, 34px) clamp(28px, 3vw, 38px);
}
.person::before {                    /* the paper card starts behind the middle of the photo */
  content: ""; position: absolute; inset: 104px 0 0; z-index: -1;
  border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-1);
  transition: box-shadow .6s var(--ease-out), translate .6s var(--ease-out);
}
.person__photo {
  position: relative; width: min(232px, 74%); aspect-ratio: 1; rotate: var(--tilt);
  transition: rotate .7s var(--ease-spring), translate .7s var(--ease-spring);
}
.person__img {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 0 0 6px #fffdf8, 0 20px 36px -18px rgba(3, 18, 10, .55);
}
.person__img picture, .person__img img { width: 100%; height: 100%; }
.person__img img { object-fit: cover; transform: scale(1.1); transition: transform 1.1s var(--ease-out); }
.person__ring { stroke: var(--lime-500); stroke-width: 2.4; }
.person .tape { left: 16%; top: 6%; z-index: 2; rotate: -40deg; width: 78px; height: 24px; transition: rotate .6s var(--ease-spring); }
.person__glint {
  position: absolute; right: 4%; top: 2%; width: 30px; height: 30px; z-index: 2; pointer-events: none;
  fill: var(--lime-400); opacity: 0; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9));
}
.person__name {
  margin-top: 26px; font-family: var(--font-hand); font-size: clamp(2.2rem, 1.7rem + 1.2vw, 2.8rem);
  font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--forest-800);
}
.person__dash {
  width: 70px; height: 10px; margin: 8px auto 14px; overflow: visible;
  fill: none; stroke: var(--lime-500); stroke-width: 3.2; stroke-linecap: round;
}
.person__dash path { --draw-delay: .7s; --draw-dur: .8s; }
.person__ring path { --draw-delay: .35s; --draw-dur: 1.4s; }
.person__role { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; color: var(--green-ink); }
.person__area { margin-top: 2px; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--ink); max-width: 26ch; }
.person__text { margin-top: 16px; font-size: 1rem; line-height: 1.62; color: var(--ink-2); max-width: 36ch; }

/* small hover life: the photo straightens, the tape lifts, a glint sparkles, the circle is redrawn */
@media (hover: hover) {
  .person:hover::before { translate: 0 -4px; box-shadow: var(--shadow-2); }
  .person:hover .person__photo { rotate: 0deg; translate: 0 -8px; }
  .person:hover .person__img img { transform: scale(1.15); }
  .person:hover .tape { rotate: -32deg; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .person:hover .person__glint { animation: person-glint 1.1s var(--ease-out) .15s both; }
  .js .person.is-in:hover .person__ring path { animation: ring-redraw 1.2s var(--ease-in-out) both; }
}
@keyframes person-glint {
  0% { opacity: 0; transform: scale(0) rotate(-60deg); }
  45% { opacity: 1; transform: scale(1.1) rotate(0deg); }
  100% { opacity: 0; transform: scale(.3) rotate(35deg); }
}
@keyframes ring-redraw { from { stroke-dashoffset: var(--len, 400); } to { stroke-dashoffset: 0; } }

@media (max-width: 980px) {
  .people { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; gap: 40px; }
  .person::before { inset-block-start: 96px; }
}

/* --- pointer to the sales contact --- */
.sales {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 18px clamp(20px, 3vw, 40px); max-width: 1040px; margin: clamp(56px, 7vw, 96px) auto 0;
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 38px);
  border-radius: 8px 22px 10px 18px; background: #eef4dc; color: var(--ink);
  box-shadow: 0 18px 34px -22px rgba(3, 18, 10, .45);
}
.sales .tape { left: 34px; translate: 0 0; rotate: -7deg; }
.sales__title { font-family: var(--font-hand); font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem); font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--forest-800); margin-bottom: 8px; rotate: -1.5deg; transform-origin: left center; }
.sales__text p { color: var(--ink-2); max-width: 56ch; }
.sales__text strong { color: var(--ink); }
.sales__actions { display: grid; gap: 10px; justify-items: start; }
.sales__links { display: grid; gap: 2px; }
.sales__links a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  font-weight: 600; font-size: .95rem; color: var(--forest-800); text-decoration: none;
}
.sales__links a:hover { color: var(--green-ink); text-decoration: underline; }
.sales__links .i { color: var(--green-ink); }
@media (max-width: 860px) {
  .sales { grid-template-columns: auto minmax(0, 1fr); }
  .sales__actions { grid-column: 1 / -1; grid-template-columns: auto; }
  .sales__links a { min-height: 44px; }
}
@media (max-width: 480px) {
  .sales { grid-template-columns: 1fr; }
  .sales__badge { width: 52px; height: 52px; }
  .sales__badge .i { width: 24px; height: 24px; }
}

/* =========================================================================
   People & Places + values
   ========================================================================= */
.werte .section-head { max-width: 820px; }
.pp {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 11vw, 170px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px); align-items: start;
}
.pp__card { display: grid; gap: 12px; align-content: start; }
.pp__media { position: relative; margin-bottom: 18px; }
.pp__media > picture { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-2); }
.pp__media > picture img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.pp__media--places > picture img { object-position: 8% 50%; }
.pp__inset {
  position: absolute; right: -14px; bottom: -34px; width: clamp(120px, 34%, 190px); z-index: 2;
  padding: 8px 8px 6px; background: #fffdf8; border-radius: 4px; rotate: 4deg;
  box-shadow: 0 2px 3px rgba(3, 18, 10, .1), 0 22px 36px -18px rgba(0, 0, 0, .7);
}
.pp__inset picture { display: block; aspect-ratio: 1; overflow: hidden; background: var(--forest-800); }
.pp__inset img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 40%; transform: scale(1.45); transform-origin: 68% 46%; }
.pp__inset figcaption { padding-top: 4px; text-align: center; font-family: var(--font-hand); font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--forest-800); }
.pp__inset .tape { top: -10px; width: 64px; height: 20px; rotate: -6deg; }
.pp__word {
  font-family: var(--font-hand); font-size: clamp(3rem, 2.2rem + 2.4vw, 4.6rem); font-weight: 700;
  line-height: .9; letter-spacing: 0; color: var(--lime-400); rotate: -3deg; transform-origin: left bottom;
}
.pp__sub { font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); font-weight: 650; letter-spacing: -.015em; line-height: 1.2; color: #fff; }
.pp__text { color: var(--on-dark-muted); max-width: 52ch; }
.pp__amp { align-self: center; padding-bottom: 8%; }
.pp__amp svg { width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--lime-400); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .pp { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 8px; }
  .pp__amp { width: 92px; justify-self: center; padding: 26px 0 8px; }
  .pp__inset { right: -6px; }
}

.werte__flourish {
  width: 100%; height: auto; margin: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); overflow: visible;
  fill: none; stroke: var(--lime-500); stroke-width: 1.6; stroke-linecap: round; opacity: .7;
}
.werte__subhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: clamp(26px, 3vw, 40px); }
.werte__hand { font-family: var(--font-hand); font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); font-weight: 600; color: var(--lime-300); rotate: -2deg; }

.wert-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wert { display: grid; gap: 10px; align-content: start; padding: 4px clamp(18px, 2.2vw, 30px) 8px; }
.wert:first-child { padding-left: 0; }
.wert + .wert { border-left: 1px solid var(--line-light); }
.wert__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wert__no { font-family: var(--font-hand); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--lime-500); }
.wert__icon { width: 44px; height: 44px; fill: none; stroke: var(--lime-400); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wert:hover .wert__icon { animation: wiggle .6s var(--ease-out); }
.wert__title { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.wert__claim { font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--lime-300); }
.wert__text { font-size: .98rem; line-height: 1.58; color: var(--on-dark-muted); }
@media (max-width: 980px) {
  .wert-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .wert:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .wert-list { grid-template-columns: 1fr; row-gap: 0; }
  .wert, .wert:first-child, .wert:nth-child(3) { padding: 22px 0; border-left: 0; }
  .wert + .wert { border-left: 0; border-top: 1px solid var(--line-light); }
  .wert:first-child { padding-top: 0; }
}

/* =========================================================================
   Locations
   ========================================================================= */
.standorte__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "map head" "map sites";
  column-gap: clamp(32px, 6vw, 96px); row-gap: 28px;
}
.standorte__head { grid-area: head; align-self: end; display: grid; gap: 20px; }
.standorte__map { grid-area: map; align-self: center; position: relative; }
.sites { grid-area: sites; align-self: start; }
.standorte__map .ch-map { width: 100%; max-width: 660px; margin-inline: auto; }
.standorte__note {                 /* sits just above the Zürich pin, the arrow lands on it */
  position: absolute; left: 68%; bottom: 82%; rotate: -4deg; pointer-events: none;
  font-family: var(--font-hand); font-size: clamp(1.3rem, 1rem + .9vw, 1.85rem); font-weight: 700; line-height: 1.02; color: var(--green-ink);
}
.standorte__note svg {
  display: block; width: 56px; height: 40px; margin: 4px 0 0 -34px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.standorte .ch-map__label { paint-order: stroke; stroke: var(--paper-2); stroke-width: 5px; stroke-linejoin: round; }   /* halo keeps the handwriting legible where it crosses the outline */
.standorte__legend {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px;
  font-family: var(--font-hand); font-size: 1.35rem; font-weight: 600; line-height: 1.1; color: var(--muted);
}
.standorte__legend svg { width: 46px; height: 8px; flex: none; overflow: visible; fill: none; stroke: var(--lime-600); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
.js .standorte__note { opacity: 0; translate: 0 10px; }
.js .ch-map.is-in + .standorte__note { opacity: 1; translate: 0 0; transition: opacity .7s var(--ease-out) 2.1s, translate .9s var(--ease-spring) 2.1s; }

.sites { display: grid; gap: 16px; }
.site {
  display: grid; gap: 14px; justify-items: start; padding: 22px clamp(20px, 2.4vw, 28px);
  border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-1);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.site:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.site__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.site__title { font-size: 1.3rem; }
.site__tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: var(--lime-200); color: var(--forest-800); font-size: .86rem; font-weight: 700;
}
.site__tag .i { width: 15px; height: 15px; }
.site__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; width: 100%; }
.site__addr { font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.site__person { display: flex; align-items: center; gap: 12px; font-size: .94rem; line-height: 1.35; color: var(--muted); }
.site__person strong { color: var(--ink); font-weight: 650; }
.site__avatar { display: block; width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--lime-300); }
.site__avatar picture, .site__avatar img { width: 100%; height: 100%; }
.site__avatar img { object-fit: cover; transform: scale(1.12); }
.site .link-arrow { min-height: 44px; }
@media (max-width: 900px) {
  .standorte__grid { grid-template-columns: 1fr; grid-template-areas: "head" "map" "sites"; row-gap: 24px; }
  .standorte__map { padding-top: 56px; max-width: 560px; width: 100%; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .js .standorte__note { opacity: 1; translate: 0 0; }
}