/* ============================================================================
   felixihno.com 2027 · pages.css · additions for the sub pages
   (Über mich, Kontakt, Impressum, Datenschutz, 404). Load after site.css.
   Same rules as site.css: colours only through the semantic tokens, no hex values,
   motion only through the tokens and off under reduced motion (site.css §18).

   Contents
     04 legal text           05 placeholder              06 about
     07 landing pages        08 proben (Beispiele: Arbeitsproben)
   Moved to site.css on 2026-10-14: page transitions, .top (now the sticky nav bar),
   .intro, .callout.
   ========================================================================== */


/* ── 04 legal text (Impressum, Datenschutz) ────────────────────────────────── */
.legal { display: grid; gap: var(--s-10); max-width: 44rem; }
.legal__part { display: grid; gap: var(--s-4); padding-top: var(--s-6); box-shadow: inset 0 1px 0 var(--c-line); }
.legal__part:first-child { padding-top: 0; box-shadow: none; }
.legal__part > h2 {
  font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--w-semi);
  letter-spacing: var(--track-tight);
}
.legal__part h3 { margin-top: var(--s-4); font-size: 1.0625rem; line-height: var(--lh-snug); font-weight: var(--w-semi); }
.legal__part p, .legal__part li { color: var(--c-text-2); max-width: var(--measure); }
.legal__part b { color: var(--c-text); }
.legal__part ul { display: grid; gap: var(--s-2); margin: 0; padding-left: var(--s-5); }
.legal__part li::marker { color: var(--c-text-3); }
.legal__part address { font-style: normal; }
.legal__part address p { color: var(--c-text); }
.legal__stand { font-size: var(--fs-sm); }


/* ── 05 placeholder box ─────────────────────────────────────────────────────── */
/* an open value the page must not ship with: dashed box, mono, impossible to overlook */
.ph {
  display: inline-block; padding: 0 var(--s-2); border-radius: var(--r-sm);
  border: 1px dashed var(--c-text-3); color: var(--c-text);
  font: var(--w-reg) var(--fs-mono)/1.6 var(--font-mono);
}


/* ── 06 about: shorter hero, three short parts ─────────────────────────────── */
/* Hero-Foto (Felix 15.10.): felix-graphite statt Punktraster. Quadratisch, der dunkle Fotogrund läuft an allen Kanten
   weich in die Nachtfläche aus (zwei Masken, geschnitten), kein harter Kasten. Desktop: rechts unten, Oberkante bleibt
   bei 42rem Höhe weit unter der Kopfleiste (672 − 480 px); auf dem Telefon über dem Text, höchstens 20rem. */
.hero__portrait--photo {
  aspect-ratio: 1; max-width: 20rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent), linear-gradient(180deg, transparent, black 12%, black 72%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, black 14%, black 86%, transparent), linear-gradient(180deg, transparent, black 12%, black 72%, transparent);
          mask-composite: intersect;
}
.hero__portrait--photo img { object-fit: cover; object-position: 50% 30%; }
@media (min-width: 900px) {
  .hero__portrait--photo { right: 0; bottom: 0; width: min(480px, 40vw); aspect-ratio: 1; }
  .hero__portrait--photo img { object-fit: cover; }
}
@media (min-width: 900px) {
  .hero--about { min-height: 42rem; }
  /* the text column ends before the photo (20rem, its first 14 % fade out), never under it (QA 15.10.: overlap at 900–1040 px) */
  .hero--about .hero__body { max-width: min(40rem, calc(100% - 20rem * .86 - var(--s-8))); }
}
.about__part > .prose { color: var(--c-text-2); }
.about__part .section__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }

/* 404: a short list of ways back */
.ways { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); list-style: none; padding: 0; }


/* ── 07 landing pages (/automatisierung/, /website-fuer-shk-betriebe/) ─────────
   Night hero without portrait, then the shared parts: one proof card (belege.css),
   three steps instead of four, the FAQ and the door. */
@media (min-width: 900px) {
  .steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero--landing .hero__body { max-width: 46rem; }
}
.belege__grid--one { max-width: 36rem; }
/* one card: always one column (belege.css loads later and sets three columns from 1000 px, which
   squeezed the card to a third, „Sprach/nachric/ht“; QA 15.10.) */
.belege__grid.belege__grid--one { grid-template-columns: minmax(0, 1fr); }
.hero--landing .hero__actions > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
/* a night hero without the portrait (Beispiele, landing pages): air under the bar on the
   phone, and on desktop not the portrait hero's full 800 px */
.hero:not(:has(.hero__portrait)) .hero__inner { padding-top: var(--s-12); }
@media (min-width: 900px) { .hero:not(:has(.hero__portrait)) { min-height: 36rem; } }

/* Über mich, Belege kompakt (15.10.): die Kundenzeile unter der Liste */
.belege__clients-plain { margin-top: var(--s-5); font-size: var(--fs-ui); color: var(--c-text-2); max-width: var(--measure); }


/* ── 08 proben (/beispiele/: Arbeitsproben, Felix 16.10.) ─────────────────────
   A night band right after the client cases. First the pieces made for clients (.probe, no
   link: a site that goes online soon, a 3D walk-through that is not public), each in a quiet
   window frame (.frame: a bar with three dots and a label, then the 4:3 still; .frame__tag
   names what the still is). Then the templates as the shared card (site.css §11) with the same
   bar on top (.card--site), and a last plain cell that leads on to the offer (.proben__end).
   Phone (< 600 px): the templates are one row to swipe, scroll-snap, running to the screen
   edges with the next card peeking; 600–959 px: two columns; ≥ 960 px: three columns, and the
   two client pieces stand side by side. Motion is an extra only: as they scroll in, the client
   stills settle (scale 1.06 → 1) and the cards rise once (view timeline, as .beleg); at rest,
   without scroll timelines and under reduced motion everything simply stands. Tokens only. */
.proben__group { margin: 0 0 var(--s-5); }
.proben__lead { display: grid; gap: var(--s-12); }
@media (min-width: 960px) { .proben__lead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-10); } }

.probe { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.frame { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); box-shadow: var(--shadow-lift); }
/* the window bar: dots left, the label centred in a field (grid keeps it centred whatever its length) */
.frame__bar, .card__bar {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: center;
  padding-inline: var(--s-3); background: var(--c-surface); box-shadow: inset 0 -1px 0 var(--c-line);
}
.frame__bar { height: 2.25rem; }
.frame__bar::before, .card__bar::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-line-strong); box-shadow: 11px 0 0 var(--c-line-strong), 22px 0 0 var(--c-line-strong);
}
.frame__url {
  justify-self: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-sm); background: var(--c-bg);
  font: var(--w-reg) var(--fs-mono)/1.3 var(--font-mono); color: var(--c-text-2);
}
.frame__shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-inset); }
.frame__shot img { width: 100%; height: 100%; object-fit: cover; }
.frame__tag {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  padding: 6px var(--s-3); border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--c-bg) 84%, transparent); color: var(--c-text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: var(--w-reg) var(--fs-mono)/1.3 var(--font-mono);
}
.probe__body { display: grid; gap: var(--s-2); max-width: 36rem; }
.probe__title { font-size: clamp(1.5rem, 1.32rem + .75vw, 1.875rem); line-height: 1.15; letter-spacing: -.02em; }
.probe__text { color: var(--c-text-2); max-width: var(--measure); }
/* status: when it goes online, or where the walk-through can be seen; one mono line under a rule */
.probe__status {
  margin-top: var(--s-2); padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--c-line);
  font: var(--w-reg) var(--fs-mono)/1.5 var(--font-mono); color: var(--c-text);
}
/* the eyebrow in two lines, the same on every piece: the kind of business, then what it is.
   Its square says echt (ink) or erfunden (hatched, as the hatched band of invented numbers in §14
   of site.css); the template hint carries the hatched square as its legend. */
.kennung { display: grid; gap: 2px; }
.kennung__mark { display: flex; align-items: baseline; gap: var(--s-2); color: var(--c-text); }
.kennung__mark::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 2px; background: currentColor; translate: 0 1px; }
.kennung__mark--erfunden::before { background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 3px); box-shadow: inset 0 0 0 1px currentColor; }

/* templates: label and the one honest line, then the row */
.proben__head { display: grid; gap: var(--s-2); margin: var(--s-14) 0 var(--s-6); }
.proben__head .proben__group { margin: 0; }
.proben__hint { color: var(--c-text-2); font-size: var(--fs-ui); max-width: var(--measure); }
.proben__hint::before { color: var(--c-text); }
@media (min-width: 960px) { .proben__head { margin-top: var(--s-20); } }
.proben__rail { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.proben__rail > li { display: flex; min-width: 0; }
.proben__rail > li > * { flex: 1; min-width: 0; }
@media (max-width: 599px) {
  .proben__rail {
    grid-auto-flow: column; grid-auto-columns: min(82%, 20rem);
    margin-inline: calc(var(--gutter) * -1); padding: var(--s-1) var(--gutter) var(--s-4);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .proben__rail::-webkit-scrollbar { display: none; }
  .proben__rail > li { scroll-snap-align: start; }
}
@media (min-width: 600px) { .proben__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 960px) { .proben__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the card as a window: the bar sits flush on the still (the card's own gap is taken back) */
.card__bar { height: 1.75rem; }
.card__bar::before { width: 6px; height: 6px; box-shadow: 10px 0 0 var(--c-line-strong), 20px 0 0 var(--c-line-strong); }
.card__bar + .card__media { margin-top: calc(var(--s-4) * -1); }
/* links row: „Ansehen“ carries the card overlay; a second link (Lotlinie: Behandlungen) sits above it */
.card__links { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-5); }
.card__links .card__link { margin-top: 0; }
.card__links > a { padding-top: var(--s-2); }
/* the second link is quieter (no arrow, second grey, 15 px), so both fit one line on a 320 px phone */
.card__sub { position: relative; z-index: 2; padding-bottom: .8125rem; font-size: var(--fs-ui); color: var(--c-text-2); }
@media (hover: hover) and (pointer: fine) {
  .card--site { transition: box-shadow var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease); }
  .card--site .card__media img { transition: scale var(--dur-slow) var(--ease); }
  .card--site:hover { box-shadow: var(--shadow-lift); translate: 0 -2px; }
  .card--site:hover .card__media img { scale: 1.02; }
}

/* the last cell: no picture, one plain sheet that leads on to the offer */
.proben__end {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-2);
  min-height: 15rem; padding: var(--s-6); border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
}
.proben__end .card__text { max-width: 22rem; }
.proben__end-mark { width: 26px; height: 25px; margin-bottom: var(--s-6); }
/* in the grid the mark holds the empty top and the text sits at the foot, level with the card text beside it;
   as the last slide of the phone row (as tall as the tallest card) mark and text stay together in the middle */
@media (max-width: 599px) { .proben__end { justify-content: center; } }
@media (min-width: 600px) { .proben__end-mark { margin-bottom: auto; } }

@keyframes probe-settle { from { scale: 1.06; } }
@keyframes probe-rise { from { opacity: 0; translate: 0 18px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .frame__shot img { animation: probe-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
    .proben__rail > li { animation: probe-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .proben__rail > li:nth-child(even) { animation-range: entry 6% entry 46%; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
    .proben__rail > li:nth-child(3n+1) { animation-range: entry 0% entry 40%; }
    .proben__rail > li:nth-child(3n+2) { animation-range: entry 6% entry 46%; }
    .proben__rail > li:nth-child(3n) { animation-range: entry 12% entry 52%; }
  }
}
@media print {
  .proben__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .probe, .proben__rail > li { break-inside: avoid; }
}

/* Closing band of /website/ with the warm dot picture (Felix 17.10.). The picture fades out
   transparently on its own, so it needs no frame; on phones it follows the button. */
.los { display: grid; gap: var(--s-10); }
.los__bild { display: block; width: 100%; max-width: 34rem; height: auto; margin-inline: auto; }
@media (min-width: 900px) {
  .los { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-12); align-items: center; }
  .los__bild { max-width: none; margin-inline: 0; }
}