/* ============================================================================
   pages.css — Unterseiten (Leistungen, Projekte, Hinter der Kamera, Kontakt)
   Baut auf style.css und home.css. Nur Layout-Bausteine, keine neuen Farben.
   ========================================================================== */
.p-hero { padding: calc(60px + clamp(48px, 8vw, 96px)) 0 clamp(28px, 4vw, 48px); }
/* Direkt nach dem Seitenkopf rückt der Inhalt näher, kein Trennstrich dazwischen. */
.p-hero + .p-sec { padding-top: clamp(28px, 3.5vw, 48px); }
/* About: die Einleitung spricht in dritter Person, darunter alles in Ich-Form. Ein Strich trennt beides. */
.p-hero--rule { padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.p-hero--rule + .p-sec { padding-top: clamp(48px, 6vw, 80px); }

/* ---- About-Opener: Video als Hintergrund, ein ganzer Bildschirm (Levin, 16.09.) ----
   Der Schleier läuft von links, wo der Text steht, nach rechts aus, damit
   «Wer dahinter steht.» sicher lesbar bleibt und das Bild rechts frei atmet.
   Oben ein leichter Verlauf für die transparente Nav. */
.a-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  background: var(--ink); color: var(--on-ink);
}
.a-hero__media { position: absolute; inset: 0; z-index: -1; }
.a-hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .52) 36%, rgba(0, 0, 0, .10) 68%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 28%);
}
.a-hero__inner { width: 100%; padding-block: clamp(96px, 14vh, 150px) clamp(64px, 10vh, 110px); }
/* Handy: Text läuft über die ganze Breite, darum zusätzlich von unten abdunkeln */
@media (max-width: 760px) {
  .a-hero__media::after {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .30) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%);
  }
}
.a-hero .eyebrow { color: rgba(255, 255, 255, .72); }
.a-hero .eyebrow::before { background: rgba(255, 255, 255, .72); }
.a-hero .h-title { color: var(--on-ink); }
.a-hero .h-text { color: rgba(255, 255, 255, .84); margin-top: 1rem; }
.a-hero + .p-sec { padding-top: clamp(48px, 6vw, 80px); }
/* Einstieg: der Schleier steht von Anfang an, nur Eyebrow, Titel und Text
   kommen gestaffelt von unten mit leichter Unschärfe (Levin, 16.09.). */
.a-hero__inner[data-reveal] { opacity: 1; transform: none; transition: none; }
.a-hero .eyebrow, .a-hero .h-title, .a-hero .h-text {
  opacity: 0; transform: translateY(18px); filter: blur(4px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.a-hero.is-in .eyebrow { opacity: 1; transform: none; filter: none; transition-delay: .25s; }
.a-hero.is-in .h-title { opacity: 1; transform: none; filter: none; transition-delay: .35s; }
.a-hero.is-in .h-text  { opacity: 1; transform: none; filter: none; transition-delay: .5s; }
.a-hero .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .4s; }
.a-hero.is-in .eyebrow::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .a-hero__media video { display: none; }
  .a-hero__media { background: url("../assets/images/levinio/about-hero-poster.webp") center / cover no-repeat; }
  .a-hero .eyebrow, .a-hero .h-title, .a-hero .h-text { opacity: 1; transform: none; filter: none; transition: none; }
  .a-hero .eyebrow::before { transform: none; transition: none; }
}
.p-hero .h-text { margin-top: 1rem; }
.p-sec { padding-block: clamp(64px, 9vw, 112px); border-bottom: 1px solid var(--line); }
.p-sec--band { background: var(--surface-2); }
.p-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.p-split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.p-split--rev .p-split__img { order: 2; }
.p-split__img { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.p-split--rev .p-split__img { aspect-ratio: 4 / 3; }
.p-split__img img { width: 100%; height: 100%; object-fit: cover; }
.p-split__img--bw img { filter: grayscale(1) contrast(1.05); }
.p-split .h-title { margin-bottom: 1rem; }
.p-split .h-text + .h-text { margin-top: .8rem; }
.p-split .role-list { margin-top: 1.4rem; }
.p-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.6rem; }
.p-quote { margin: 1.6rem 0 0; padding-left: 18px; border-left: 2px solid var(--text); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.p-quote cite { display: block; margin-top: .4rem; font-style: normal; font-size: .85rem; font-weight: 400; color: var(--text-dim); }
/* Text-Kacheln: dieselben Elemente wie die Bildkarten, ohne Bild */
.h-services__grid--text { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.h-services__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h-card--text { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(20px, 2.4vw, 28px); transition: border-color var(--dur), box-shadow var(--dur); }
.h-card--text .h-card__text { padding-top: 0; }
@media (hover: hover) and (pointer: fine) { a.h-card--text:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); } }
.on-ink .h-card--text { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
@media (max-width: 900px) { .h-services__grid--text { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .h-services__grid--text, .h-services__grid--two { grid-template-columns: 1fr; } }
/* Ablauf */
.p-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); counter-reset: schritt; }
.p-steps li { counter-increment: schritt; border-top: 2px solid var(--text); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.p-steps li::before { content: counter(schritt, decimal-leading-zero); font-size: .76rem; font-weight: 600; letter-spacing: var(--track-label); color: var(--text-dim); }
.p-steps b { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.p-steps span { color: var(--text-dim); font-size: .95rem; line-height: 1.55; }
@media (max-width: 820px) { .p-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .p-steps { grid-template-columns: 1fr; } }
/* Ablauf beim Reinscrollen (js/ablauf.js setzt .ist-da und --verz): grauer Strich füllt sich schwarz, dann kommt der Text.
   Am Handy eine senkrechte Zeitleiste statt 2x2, damit die Richtung lesbar bleibt. */
.p-steps.ab-an[data-reveal] { opacity: 1; transform: none; }
.p-steps.ab-an li { position: relative; border-top-color: var(--line); }
.p-steps.ab-an li::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--text); transform: scaleX(0); transform-origin: left center; }
.p-steps.ab-an li.ist-da::after { transform: none; transition: transform .75s cubic-bezier(.65, 0, .35, 1) var(--verz, 0ms); }
.p-steps.ab-an li::before, .p-steps.ab-an li > * { opacity: 0; transform: translateX(-12px); }
.p-steps.ab-an li.ist-da::before, .p-steps.ab-an li.ist-da > * { opacity: 1; transform: none;
  transition: opacity .5s var(--ease) calc(var(--verz, 0ms) + 250ms), transform .7s var(--ease) calc(var(--verz, 0ms) + 250ms); }
.p-steps.ab-an li.ist-da b { transition-delay: calc(var(--verz, 0ms) + 310ms); }
.p-steps.ab-an li.ist-da span { transition-delay: calc(var(--verz, 0ms) + 370ms); }
@media (max-width: 820px) {
  .p-steps { grid-template-columns: 1fr; gap: 0; }
  .p-steps li { border-top: 0; border-left: 2px solid var(--text); padding: 0 0 30px 20px; }
  .p-steps li:last-child { padding-bottom: 4px; }
  .p-steps.ab-an li { border-left-color: var(--line); }
  .p-steps.ab-an li::after { left: -2px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform: scaleY(0); transform-origin: center top; }
  .p-steps.ab-an li::before, .p-steps.ab-an li > * { transform: translateY(8px); }
}
/* Team */
.p-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.p-team__card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 6px; }
/* Levins Karte dezent hervorgehoben: dunkler Rahmen wie die Fotografie-Karte auf der Startseite. */
.p-team__card--lead { border-color: var(--accent); }
.p-team__role { font-size: .76rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-dim); }
.p-team__card b { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.p-team__card p { color: var(--text-dim); font-size: .95rem; margin: 0; }
/* Kleiner Sticker neben der Rolle: externe Partner sind als Freelancer erkennbar. */
.p-team__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-team__tag { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); background: var(--accent-soft); border: 1px solid var(--line); padding: .15rem .55rem; border-radius: var(--radius-pill); white-space: nowrap; }
@media (max-width: 820px) { .p-team { grid-template-columns: 1fr; } .p-split, .p-split--rev { grid-template-columns: 1fr; } .p-split--rev .p-split__img { order: 0; } .p-split__img { aspect-ratio: 4 / 3; } }
/* Kontaktseite: alte Bausteine, neue Tokens */
.contact__title { font-weight: 500; letter-spacing: var(--track-title); }
.contact__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== Werte als Karteikärtchen (About) =====
   Drei Karten aus Papier: vorne nur der Wert, hinten der Text. Schweben leicht,
   drehen sich per Hover (Maus), Tap (Touch) oder Enter/Space in 3D um. */
.flip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); align-items: stretch; }
.flip {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  position: relative; width: 100%; min-height: 172px;
  perspective: 1200px;
  rotate: var(--tilt, 0deg);
  animation: flip-float 6.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  border-radius: var(--radius);
}
.flip:hover, .flip.is-flipped, .flip:focus-visible { z-index: 2; }
.flip:focus-visible { outline: 2px solid var(--text); outline-offset: 5px; }
.flip__inner {
  display: block; position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.45, 0, .15, 1);
}
.flip__face {
  display: flex; flex-direction: column; box-sizing: border-box;
  width: 100%; min-height: 100%;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 40px -20px rgba(0, 0, 0, .30);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: box-shadow .4s var(--ease);
}
.flip__front { position: absolute; inset: 0; justify-content: center; }
.flip__back { position: relative; transform: rotateY(180deg); justify-content: center; gap: 10px; }
.flip__word { font-size: clamp(1.45rem, 1.8vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.flip__hint {
  position: absolute; left: clamp(22px, 2.2vw, 30px); bottom: clamp(18px, 1.8vw, 24px);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-dim); transition: color .3s var(--ease), transform .4s var(--ease);
}
.flip__hint svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flip:hover .flip__hint { color: var(--text); }
.flip__label { font-size: var(--fs-min); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-dim); }
.flip__text { color: var(--text-soft); font-size: .95rem; line-height: 1.55; }
/* Umdrehen nur per Klick, Tap oder Tastatur. Hover hebt die Karte nur leicht an. */
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip__inner { transform: translateY(-2px) scale(1.02); }
  .flip:hover .flip__face { box-shadow: 0 2px 4px rgba(0, 0, 0, .07), 0 24px 50px -22px rgba(0, 0, 0, .36); }
}
.flip.is-flipped .flip__inner { transform: translateY(-3px) rotateY(180deg); }
.flip.is-flipped .flip__face { box-shadow: 0 3px 6px rgba(0, 0, 0, .08), 0 30px 60px -22px rgba(0, 0, 0, .42); }
/* Schweben in einer kleinen Schleife: hoch, seitlich, runter, zurück. Die
   drei Karten laufen mit versetztem Delay, so wirkt es wie leichter Luftzug. */
@keyframes flip-float {
  0%, 100% { translate: 0 0; rotate: var(--tilt, 0deg); }
  25%      { translate: 3px -4px; rotate: calc(var(--tilt, 0deg) + 0.5deg); }
  50%      { translate: 0 -6px; rotate: calc(var(--tilt, 0deg) + 0.8deg); }
  75%      { translate: -3px -2px; rotate: calc(var(--tilt, 0deg) - 0.3deg); }
}
/* Handy: quadratische Karten in einer Reihe zum Wischen, die nächste schaut am Rand hervor
   (Levin 02.11.: die hohen schmalen Kärtchen waren zu eng, Würfelformat) */
@media (max-width: 640px) {
  .flip-grid {
    display: flex; gap: 14px; align-items: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(20px, 5vw, 40px);
    margin-inline: calc(-1 * clamp(20px, 5vw, 40px));
    padding: 12px clamp(20px, 5vw, 40px) 30px;
    scrollbar-width: none;
  }
  .flip-grid::-webkit-scrollbar { display: none; }
  .flip { flex: 0 0 min(72vw, 300px); aspect-ratio: 1 / 1; min-height: 0; scroll-snap-align: start; }
  .flip__face { padding: 22px 22px 46px; }
  .flip__word { font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; }
  .flip__hint { left: 22px; bottom: 20px; font-size: var(--fs-min); }
  .flip__back { padding-bottom: 22px; gap: 10px; }
  .flip__text { font-size: .95rem; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .flip { animation: none; rotate: 0deg; }
  .flip__inner, .flip:hover .flip__inner, .flip.is-flipped .flip__inner { transform: none; transition: none; }
  .flip__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .flip__back { transform: none; opacity: 0; transition: opacity .2s ease; }
  .flip.is-flipped .flip__back { opacity: 1; }
}

/* ===== Partner als Polaroids (About) =====
   Drei Prints liegen leicht überlappend nebeneinander. Hover holt den Print nach
   vorn und richtet ihn gerade, Klick oder Tap zeigt darunter die Info. */
.pols { display: flex; justify-content: center; align-items: flex-start; padding: 18px 0 6px; }
.pol {
  position: relative; width: clamp(190px, 19vw, 240px); margin: 0 -16px;
  background: #fff; padding: 12px 12px 60px; border-radius: 3px; border: 0;
  cursor: pointer; text-align: left; font: inherit; color: inherit; z-index: var(--z, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 22px 44px -20px rgba(0, 0, 0, .40);
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px));
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s var(--ease);
}
.pol__img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2); }
.pol__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pol__cap {
  position: absolute; left: 16px; right: 16px; bottom: 12px;
  font-family: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  font-size: 1.5rem; line-height: 1; color: #2A2A28;
}
.pol__cap small { display: block; font-size: 1rem; opacity: .7; margin-top: 3px; }
.pol__stamp {
  position: absolute; right: 20px; bottom: 70px;
  font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border: 1.5px solid var(--ink); border-radius: 3px; padding: 3px 6px;
  rotate: -9deg; opacity: .5; mix-blend-mode: multiply;
}
.pol.is-front { z-index: 10; }
/* Der rechte Print liegt unter Levins Karte: Beschriftung rückt nach rechts, damit der Name frei bleibt. */
.pol:nth-child(3) .pol__cap { left: 44px; }
.pol:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pol:hover { z-index: 11; transform: rotate(0deg) translateY(calc(var(--y, 0px) - 14px)) scale(1.04); box-shadow: 0 3px 6px rgba(0, 0, 0, .08), 0 36px 60px -22px rgba(0, 0, 0, .45); }
}
.pol-info { max-width: 60ch; margin: 28px auto 0; min-height: 3.2em; text-align: center; color: var(--text-dim); font-size: .95rem; line-height: 1.6; }
.pol-info b { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .pols { flex-direction: column; align-items: center; }
  .pol { width: 230px; margin: -6px 0 0; transform: rotate(var(--r, 0deg)) translateX(var(--mx, 0px)); }
  .pol:nth-child(1) { --mx: -26px; margin-top: 0; }
  .pol:nth-child(3) { --mx: 26px; }
}
@media (prefers-reduced-motion: reduce) { .pol { transition: none; } }

/* ---- Kontakt-Opener: Foto mit drei Zetteln (Levin, 16.09.) ----
   Kein Text, nur das Foto und drei Zettel als Kontaktwege. Quer: Zettel
   gestaffelt links auf der leeren Wand, Levin sitzt rechts. Hoch (Handy):
   eigenes Hochformat-Foto, Zettel oben links über der Hand. Die Lage der
   Zettel ist in Prozent der Fläche gesetzt, damit sie am Motiv bleibt. */
.k-hero { position: relative; isolation: isolate; overflow: hidden; height: 100vh; height: 100svh; min-height: 560px; background: #C9CDD1; }
.k-hero__bg { position: absolute; inset: 0; z-index: -1; }
.k-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
/* Leichter Schatten von oben, damit die transparente Nav auf der hellen Wand lesbar bleibt */
.k-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 22%); }
.k-wall { position: absolute; inset: 0; z-index: 1; }
.k-note {
  position: absolute; left: var(--x); top: var(--y); width: clamp(220px, 20vw, 300px);
  z-index: var(--z, 1);   /* wer zuerst fliegt, liegt oben; spätere gehen hinten durch */
  display: grid; gap: 4px; padding: 18px 20px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 24px 48px -22px rgba(0, 0, 0, .45);
  /* Schweben wie die Werte-Karten auf About (gleiche Schleife), rotate über
     die Eigenschaft, damit die Animation die Neigung mitnimmt. */
  rotate: var(--r);
  --tilt: var(--r);   /* flip-float rechnet mit --tilt, die Zettel mit --r */
  /* Zwei Animationen: erst der Einstieg (Pop mit Skalierung, Unschärfe,
     Einblenden, nacheinander), dann dauerhaft das Schweben. Der Einstieg
     füllt nur rückwärts, damit danach der Hover die Skalierung übernehmen kann. */
  animation: flip-float 6.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  /* Vor dem Flug unsichtbar; js/kontakt.js rechnet den Start am Handy und schaltet is-ready */
  opacity: 0;
  transition: scale .4s cubic-bezier(.45, 0, .15, 1), box-shadow .4s var(--ease);   /* gleiches Tempo wie die About-Karten; translate/rotate gehören der Animation */
}
.k-note:nth-child(2) { --delay: -2.3s; }
.k-note:nth-child(3) { --delay: -4.4s; }
.k-hero.is-ready .k-note {
  opacity: 1;
  animation: k-pop .95s ease-out backwards, flip-float 6.5s ease-in-out infinite;
  animation-delay: var(--pop, .2s), var(--delay, 0s);
}
.k-note:nth-child(1) { --pop: .25s; --z: 3; }
.k-note:nth-child(2) { --pop: .51s; --z: 2; }
.k-note:nth-child(3) { --pop: .77s; --z: 1; }
/* Flug aus dem Handy: transform ist ein eigener Kanal neben translate/rotate
   (Schweben) und scale (Hover), darum kommen sie sich nicht in die Quere. */
/* Wie eine gesendete Nachricht: klein aus dem Handy, kurz klein darüber
   schweben, dann in einem Zug an den Platz fliegen und gross werden. */
/* Wichtig: Verschiebung UND Skalierung zusammen in transform. Läge die
   Skalierung im eigenen scale-Kanal, würde sie die Verschiebung mitskalieren
   (Reihenfolge translate → rotate → scale → transform) und der Zettel startete
   nicht am Handy, sondern irgendwo dazwischen. */
@keyframes k-pop {
  0%   { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(0); filter: blur(4px); animation-timing-function: cubic-bezier(.45, 0, .15, 1); }
  30%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.k-note:hover, .k-note:focus-visible { scale: 1.04; box-shadow: 0 3px 6px rgba(0, 0, 0, .08), 0 30px 60px -22px rgba(0, 0, 0, .45); z-index: 5; }
.k-note:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.k-note__tape { position: absolute; top: -11px; left: 50%; width: 72px; height: 22px; transform: translateX(-50%) rotate(-2deg); background: rgba(255, 228, 120, .82); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.k-note__label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-dim); }
.k-note__label svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.k-note__value { font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 500; letter-spacing: -0.02em; word-break: break-all; }
.k-note__hand { font-family: "Caveat", "Bradley Hand", cursive; font-size: 1.25rem; color: var(--text-dim); line-height: 1; margin-top: 2px; }
/* Quer: gestaffelt wie in Levins Skizze, links neben der Hand */
.k-note:nth-child(1) { --x: 16%; --y: 26%; }
.k-note:nth-child(2) { --x: 25%; --y: 44%; }
.k-note:nth-child(3) { --x: 19%; --y: 62%; }
/* Hoch: übereinander oben links, über der Hand und links vom Kopf */
@media (orientation: portrait) {
  .k-hero { min-height: 640px; }
  .k-hero__bg img { object-position: 65% 50%; }   /* Kopf bleibt bei schmalen Formaten im Bild */
  /* Drei kleine Zettel über dem Kopf: links, Mitte, rechts (Levins Skizze) */
  .k-note { width: auto; min-width: 140px; max-width: 66vw; padding: 11px 14px 9px; gap: 3px; border-radius: 6px; }
  .k-note__value { white-space: nowrap; word-break: normal; }
  .k-note__label { font-size: var(--fs-min); gap: 6px; }
  .k-note__label svg { width: 13px; height: 13px; }
  .k-note__value { font-size: .92rem; }
  .k-note__hand { font-size: 1.05rem; }
  .k-note__tape { width: 52px; height: 16px; top: -8px; }
  /* Schweben am Handy ruhiger: halbe Amplitude */
  .k-hero.is-ready .k-note { animation-name: k-pop, k-float-soft; }
  @keyframes k-float-soft {
    0%, 100% { translate: 0 0; rotate: var(--r, 0deg); }
    25%      { translate: 1.5px -2px; rotate: calc(var(--r, 0deg) + 0.25deg); }
    50%      { translate: 0 -3px; rotate: calc(var(--r, 0deg) + 0.4deg); }
    75%      { translate: -1.5px -1px; rotate: calc(var(--r, 0deg) - 0.15deg); }
  }
  /* WhatsApp oben in der Mitte, E-Mail links tiefer, Instagram rechts (Levin) */
  .k-note:nth-child(1) { --x: 20%; --y: 21%; --r: 3deg; --pop: .51s; --z: 2; }   /* WhatsApp als zweites */
  .k-note:nth-child(2) { --x: 4%; --y: 38%; --r: -5deg; --pop: .25s; --z: 3; }   /* E-Mail zuerst, oben */
  .k-note:nth-child(3) { --x: 58%; --y: 18%; --r: -2deg; --pop: .77s; --z: 1; }  /* Instagram zuletzt, hinten */
}
@media (prefers-reduced-motion: reduce) { .k-note, .k-hero.is-ready .k-note { transition: none; animation: none; opacity: 1; } }