/* Screens 5 and 6: who builds it (portrait, facts, the questions businesses ask) and how to reach him
   (the request, the channels, the QR business card), then the footer.
   The answers are the ones on web.html and automation.html; the card is the one from assets/vcard (.vc-* in base.css),
   here inline as the picture of the last screen. No street address: the town only (Impressum has the rest). */

.me, .kontakt {
  position: relative; min-height: 100svh; display: grid; align-items: center; gap: clamp(24px, 5vw, 88px); overflow-x: clip;
  padding: calc(var(--hdr) + 8px) calc(var(--gutter) + max(0px, (100% - 1480px) / 2)) 32px;
}
.me.seen .sv, .kontakt.seen .sv { opacity: 1; transform: none; transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--expo) var(--d, 0s); }

/* ---------- 5: Persönlich ---------- */
.me { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.me-photo {
  position: relative; justify-self: center; margin: 0;
  width: min(100%, 470px, calc((100svh - var(--hdr) - 56px) * .8)); aspect-ratio: .8;
}
.me-photo::before {   /* a warm light behind the shoulders */
  content: ''; position: absolute; inset: 10% -18% -4%; pointer-events: none;
  background: radial-gradient(50% 46% at 50% 56%, rgba(210, 102, 74, .14), transparent 72%);
}
.me-photo picture, .me-photo img { display: block; width: 100%; height: 100%; }
.me-photo picture, .me-photo figcaption { position: relative; }   /* above the light, no negative z-index (Safari) */
.me-photo img {
  object-fit: cover;
  /* fades to nothing at every edge, so the photo's own grey background melts into the page */
  -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 58%, transparent);
          mask-image: radial-gradient(closest-side at 50% 46%, #000 58%, transparent);
}
.me-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 4%; display: grid; justify-items: center; gap: 7px; text-align: center;
}
.me-photo figcaption b { font: 600 clamp(18px, 1.6vw, 22px)/1.1 var(--font); letter-spacing: -.01em; }
.me-photo figcaption span { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.me-copy { max-width: 620px; }
.me-lead { margin: 22px 0 0; max-width: 34em; font-size: var(--t-lead); line-height: 1.6; color: var(--muted); }
.me-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
.me-facts li {
  padding: 7px 10px 6px; border: 1px solid var(--line); border-radius: 2px;
  font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* the questions: one answer open at a time */
.qa { margin: 30px 0 0; border-top: 1px solid var(--line); }
.qa-i { border-bottom: 1px solid var(--line); }
.qa-i summary {
  display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 0; cursor: pointer; list-style: none;
  font: 500 16.5px/1.35 var(--font); color: var(--muted); transition: color .3s;
}
.qa-i summary::-webkit-details-marker { display: none; }
.qa-i summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  rotate: 45deg; translate: 0 -3px; transition: rotate .35s var(--expo), translate .35s var(--expo);
}
.qa-i summary:hover, .qa-i[open] summary { color: var(--fg); }
.qa-i[open] summary::after { rotate: 225deg; translate: 0 2px; color: var(--terra-lit); }
.qa-i p { margin: -2px 0 16px; max-width: 40em; font-size: 15px; line-height: 1.6; color: var(--muted); }
.qa-i[open] p { animation: qa-in .45s var(--expo) both; }
@keyframes qa-in { from { opacity: 0; transform: translateY(-5px); } }

/* ---------- 6: Kontakt ---------- */
.kontakt { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.kt-copy { max-width: 600px; justify-self: end; }
.kt-lead { margin: 22px 0 0; max-width: 33em; font-size: var(--t-lead); line-height: 1.6; color: var(--muted); }
.kt-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.kt-cta .btn { max-width: 100%; }
.kt-cta .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-ch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.kt-ch dt { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.kt-ch dd { margin: 9px 0 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-ch a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); transition: color .25s, border-color .25s; }
.kt-ch a:hover { color: var(--terra-lit); border-color: rgba(210, 102, 74, .5); }

/* the business card: the same card that opens full screen on the old pages */
.kt-stage { position: relative; display: grid; place-items: center; align-self: stretch; }
.kt-stage::before {
  content: ''; position: absolute; inset: -4% -20%; pointer-events: none;
  background: radial-gradient(46% 44% at 50% 46%, rgba(210, 102, 74, .15), transparent 72%);
}
.kt-card {
  --rx: 0deg; --ry: 0deg;
  position: relative; width: min(360px, 100%); padding: 22px 22px 20px; border-radius: 24px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(210, 102, 74, .22), transparent 55%),
    linear-gradient(160deg, #222226 0%, #121214 55%, #0c0c0e 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 90px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .6);
  /* the perspective sits in the card's own transform: Safari flattens it when it sits on a parent that fades in */
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--expo);
}
.kt-sheen {
  position: absolute; inset: -40% auto -40% -70%; width: 55%; z-index: 2; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 45%, rgba(255, 255, 255, .04) 60%, transparent);
}
.kontakt.seen .kt-sheen { animation: kt-sheen 1.3s ease .7s both; }
@keyframes kt-sheen { to { left: 140%; } }
.kt-head { display: flex; justify-content: space-between; align-items: center; }
.kt-logo { display: inline-flex; align-items: baseline; font: 700 22px/1 var(--font); letter-spacing: .12em; }
.kt-logo i { width: .28em; height: .28em; margin-left: .13em; border-radius: 50%; background: var(--terra-lit); box-shadow: 0 0 12px rgba(210, 102, 74, .7); }
.kt-label { font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #8e8e93; }
.kt-qr { margin-top: 20px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.kt-qr img { display: block; width: 100%; max-width: min(250px, 31svh); height: auto; aspect-ratio: 1; margin: 0 auto; image-rendering: pixelated; }
.kt-scan { margin: 12px 0 0; text-align: center; font: 400 11.5px/1.3 var(--mono); color: #8e8e93; }
.kt-name { margin: 18px 0 0; font: 600 24px/1.1 var(--font); letter-spacing: -.02em; }
.kt-role { margin: 6px 0 0; font-size: 14px; color: #a5a5aa; }
.kt-list { list-style: none; margin: 14px 0 0; padding: 13px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 8px; }
.kt-list a { font: 400 14.5px/1.2 var(--mono); color: #e8e8e6; text-decoration: none; }
.kt-list a:hover { color: var(--terra-lit); }
.kt-acts { display: flex; gap: 8px; margin-top: 16px; }
.kt-save, .kt-show {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 12px;
  font: 500 15px/1 var(--font); text-decoration: none; cursor: pointer;
}
.kt-save { background: #f2f2f0; color: #0a0a0b; }
.kt-save:hover { background: #fff; }
.kt-show { display: none; border: 1px solid rgba(255, 255, 255, .18); background: none; color: var(--fg); }

/* ---------- footer ---------- */
.site-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px;
  padding: 22px calc(var(--gutter) + max(0px, (100% - 1480px) / 2)) max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); font-size: 13px; color: var(--dim);
}
.site-foot nav { display: flex; gap: 20px; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--fg); }

/* ---------- smaller screens ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  .me-lead, .kt-lead { display: none; }
  .qa { margin-top: 16px; }
  .qa-i summary { padding-block: 9px; }
  .qa-i p { margin-bottom: 12px; }
  .kt-cta { margin-top: 24px; }
  .kt-ch { margin-top: 26px; }
}
@media (max-width: 900px) {
  .me, .kontakt { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; min-height: 0; padding-top: calc(var(--hdr) + 22px); padding-bottom: 28px; }
  .me-copy, .kt-copy { display: contents; }
  .me .eyebrow, .kontakt .eyebrow { order: 1; margin-bottom: 14px; font-size: 10.5px; letter-spacing: .14em; }
  .me .h2, .kontakt .h2 { order: 2; font-size: clamp(1.9rem, 8.4vw, 3rem); }
  /* the portrait becomes a small round photo with the name beside it */
  .me-photo { order: 3; justify-self: start; display: grid; grid-template-columns: 64px auto; align-items: center; gap: 14px; width: auto; aspect-ratio: auto; margin-top: 18px; }
  .me-photo::before { display: none; }
  .me-photo picture { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
  .me-photo img { object-position: 50% 22%; -webkit-mask-image: none; mask-image: none; }
  .me-photo figcaption { position: static; justify-items: start; text-align: left; }
  .me-lead { order: 4; margin-top: 16px; font-size: 15px; }
  .me-facts { display: none; }
  .qa { order: 5; margin-top: 18px; }
  .qa-i summary { padding-block: 11px; font-size: 15.5px; }
  .qa-i p { font-size: 14.5px; }

  .kt-lead { display: none; }
  .kt-cta { order: 3; margin-top: 20px; }
  .kt-cta .btn { flex: 1 1 100%; justify-content: center; }
  .kt-ch { order: 4; margin-top: 22px; padding-top: 18px; gap: 14px 20px; }
  .kt-ch dd { font-size: 15px; white-space: normal; overflow-wrap: anywhere; }
  .kt-stage { order: 5; margin-top: 22px; }
  .kt-stage::before { display: none; }
  .kt-card { width: 100%; padding: 18px 18px 16px; border-radius: 20px; }
  /* the code is for showing to someone else: on request the card fills the screen, as on the old pages */
  .kt-qr, .kt-scan, .kt-list { display: none; }
  .kt-card.qr-on { position: fixed; left: 50%; top: 50%; z-index: 91; width: min(360px, calc(100% - 32px)); translate: -50% -50%; animation: kt-up .5s var(--expo) both; }
  .kt-card.qr-on .kt-qr, .kt-card.qr-on .kt-scan { display: block; }
  .kt-card.qr-on .kt-list { display: grid; }
  .kt-qr img { max-width: min(260px, 40svh); }
  .kt-back { position: fixed; inset: 0; z-index: 90; background: radial-gradient(70% 55% at 50% 42%, rgba(210, 102, 74, .16), transparent 70%), rgba(6, 6, 7, .96); }
  .kt-back[hidden] { display: none; }
  .qr-open .hdr { opacity: 0; pointer-events: none; }   /* main is its own layer, so the header would sit above the card */
  @keyframes kt-up { from { opacity: 0; translate: -50% -44%; } }
  .kt-name { margin-top: 14px; font-size: 21px; }
  .kt-show { display: flex; }
  .site-foot { justify-content: flex-start; }
}
@media (max-width: 900px) and (max-height: 760px) { .me-lead, .kt-role { display: none; } .qa-i summary { padding-block: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .qa-i[open] p, .kontakt.seen .kt-sheen { animation: none; }
  .kt-card { transition: none; }
}