@font-face { font-family: "Inter"; src: url(../fonts/inter-var-latin-v20.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2197, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-var-latin-ext-v20.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces-italic-latin.woff2) format("woff2"); font-style: italic; font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces-italic-latin-ext.woff2) format("woff2"); font-style: italic; font-weight: 300 900; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }

@font-face { font-family: "Oswald"; src: url(../fonts/oswald-normal-latin-5.woff2) format("woff2"); font-weight: 200 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Oswald"; src: url(../fonts/oswald-normal-latin-ext-4.woff2) format("woff2"); font-weight: 200 700; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Open Sans"; src: url(../fonts/opensans-normal-latin-3.woff2) format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Open Sans"; src: url(../fonts/opensans-normal-latin-ext-2.woff2) format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Nunito"; src: url(../fonts/nunito-var.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Tangerine"; src: url(../fonts/tangerine-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #111214; --text: #3b3e44; --mute: #6c6f75; --line: #ececec; --soft: #f6f6f5;
  --ease: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --pad: clamp(22px, 6vw, 64px);
  --acc: #7fdcff; --acc-soft: #e2f7fd; --acc-deep: #0b7aa6; --acc-ink: #0f2a33; --acc-glow: rgba(90,200,255,.55);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-family: "Inter", system-ui, sans-serif; font-size: 17px; line-height: 1.6; font-feature-settings: "ss01", "cv11"; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* ---------- Hero ---------- */
.hero { max-width: 1180px; margin: 0 auto; padding: calc(34px + env(safe-area-inset-top)) var(--pad) 40px; display: grid; }
.kicker { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--mute); }
h1 { margin: 0; font-size: clamp(40px, 11.2vw, 84px); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; max-width: 12ch; }
h1 em { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -.02em; position: relative; white-space: nowrap; }
.lead { margin: 18px 0 0; max-width: 34ch; font-size: clamp(17px, 4.4vw, 20px); line-height: 1.55; color: var(--text); }
.hero-scene { margin: 30px calc(var(--pad) * -1) 0; }
.hero-scene .base { width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; }

/* ---------- Abschnitte ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
section { padding: clamp(64px, 12vw, 130px) 0 0; }
.section-title { margin: 0 0 clamp(36px, 7vw, 64px); font-size: clamp(34px, 8vw, 56px); line-height: 1.05; letter-spacing: -.04em; font-weight: 700; }
.section-title::after { content: ""; display: block; width: 54px; height: 4px; margin-top: 16px; border-radius: 4px; background: var(--ink); }

.project { display: grid; gap: 44px; margin: 0 calc(50% - 50vw); padding: clamp(64px, 12vw, 120px) max(var(--pad), calc(50vw - 590px)); }
.project-kicker { margin: 0 0 6px; display: flex; gap: 12px; align-items: baseline; font-size: 13.5px; font-weight: 600; color: var(--mute); }
.num { font-variant-numeric: tabular-nums; color: var(--ink); }
.project h3 { margin: 0 0 14px; font-size: clamp(30px, 7.4vw, 44px); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; }
.project p { margin: 0; color: var(--text); max-width: 44ch; }
.live-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 4px 0; font-weight: 600; text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1.5px no-repeat; transition: background-size 350ms var(--ease); }
.live-link:hover { background-size: 0 1.5px; background-position: 100% 100%; }
.live-link .arr { display: inline-block; transition: transform 350ms var(--spring); }
.live-link:hover .arr, .live-link:active .arr { transform: translate(3px, -3px); }

.phone { position: relative; width: min(64vw, 270px); margin: 0 auto; padding: 8px; border-radius: 40px; background: #fff; box-shadow: 0 0 0 1px #e6e6e6, 0 30px 60px -28px rgba(17,18,20,.35), 0 8px 18px -10px rgba(17,18,20,.18); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; position: relative; }
.steps::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1.5px; background: var(--line); }
.steps li { display: flex; gap: 22px; position: relative; }
.step-dot { flex: none; width: 16px; height: 16px; margin-top: 7px; border-radius: 50%; background: #fff; border: 1.5px solid #cfd1d4; transition: transform 600ms var(--spring), background-color 400ms ease, border-color 400ms ease; }
.steps li.is-in .step-dot { transform: scale(1.15); border-color: var(--ink); }
.steps li.is-in .step-dot { background: var(--ink); }
.steps h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.02em; }
.steps p { margin: 0; color: var(--text); max-width: 46ch; }
.steps .step-sub { margin: 0 0 10px; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 18px; color: var(--mute); }
.section-lead { margin: -16px 0 clamp(40px, 7vw, 64px); max-width: 44ch; font-size: clamp(18px, 4.4vw, 21px); line-height: 1.55; color: var(--text); }
.philosophy, .about { padding: clamp(64px, 12vw, 120px) 0 0; }
.about-copy { max-width: 46ch; font-size: clamp(17px, 4.2vw, 19px); }
.about-copy p { margin: 0 0 16px; color: var(--text); }
.about-copy .about-claim { margin: 0 0 18px; font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(24px, 5.6vw, 32px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.about-copy .placeholder { display: inline-block; padding: 8px 14px; border: 1.5px dashed #c9cbce; border-radius: 10px; font-size: 14px; color: var(--mute); }

.contact-lead { margin: -20px 0 34px; font-size: 19px; color: var(--text); max-width: 36ch; }
.form { display: grid; gap: 26px; max-width: 560px; padding-bottom: 20px; }
.field { display: grid; gap: 2px; }
.field span { font-size: 13px; font-weight: 600; color: var(--mute); }
.field input, .field textarea { width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1.5px solid #dcdcdc; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 18px; outline: none; resize: vertical;
  background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; transition: background-size 450ms var(--ease), border-color 200ms ease; }
.field input:focus, .field textarea:focus { background-size: 100% 2px; }
.field.bump input, .field.bump textarea { transform: translateY(-1px); }
.field.is-bad input, .field.is-bad textarea { border-color: var(--ink); border-bottom-width: 2.5px; animation: shake-x 380ms ease; }
.field.is-bad span { color: var(--ink); }
@keyframes shake-x { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.send { justify-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font: inherit; font-weight: 600; cursor: pointer; overflow: hidden; transition: transform 160ms ease; -webkit-tap-highlight-color: transparent; }
.send svg { width: 20px; height: 20px; transition: transform 400ms var(--spring); }
.send:hover svg { transform: translateX(4px); }
.send:active { transform: scale(.95); }
.send.is-sent svg { transform: translateX(160px); opacity: 0; transition: transform 600ms var(--ease), opacity 400ms ease; }
.form-note { margin: 0; font-size: 14px; color: var(--mute); min-height: 1.4em; }

.foot { max-width: 1180px; margin: 0 auto; padding: 40px var(--pad) calc(40px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.foot p { margin: 0; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .hero { max-width: 1320px; grid-template-columns: .8fr 1.2fr; column-gap: 40px; min-height: min(90vh, 820px); align-items: center; padding-top: 60px; }
  .hero-scene { margin: 0 calc(var(--pad) * -.4) 0 0; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .steps::before { left: 8px; right: 8px; top: 7px; bottom: auto; width: auto; height: 1.5px; }
  .steps li { flex-direction: column; gap: 22px; }
  .steps li .step-dot { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .reveal, .phone { opacity: 1; transform: none; }
  .power { transform: none; opacity: 1; }
}

/* ---------- Projekte im Stil der jeweiligen Seite ---------- */
.projects .section-title { margin-bottom: clamp(28px, 5vw, 48px); }
.project h3, .project p, .project-kicker, .live-link { color: inherit; }
.project .live-link { background: none; margin-top: 28px; }
.project .live-link:hover { background: none; }

/* Punta Arenas: Oswald, Open Sans, Rot #cc1026, dunkle Bühne wie der Hero dort */
.p-punta { background: #cc1026; color: #fff; font-family: "Open Sans", sans-serif; }
.p-punta .project-kicker { font-family: Oswald, sans-serif; font-weight: 400; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #fff; align-items: center; }
.p-punta .project-kicker::after { content: ""; width: 28px; height: 1.5px; background: #fff; }
.p-punta .num { color: rgba(255,255,255,.72); font-weight: 700; }
.p-punta h3 { font-family: Oswald, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(34px, 8vw, 52px); line-height: 1.05; }
.p-punta p { color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.7; }
.p-punta .live-link { height: 50px; padding: 0 26px; border-radius: 99px; background: #fff; color: #cc1026; font-family: Oswald, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; transition: background-color 220ms ease, transform 160ms ease; }
.p-punta .live-link:hover { background: #f1f1f1; }
.p-punta .live-link:active { transform: scale(.96); }
.p-punta .phone { background: #1f1f1f; box-shadow: 0 0 0 1px #2d3136, 0 30px 60px -24px rgba(60,0,8,.75); }

/* Herzhorner Pfötchen: Nunito, Tangerine, Creme und Karamell */
.p-herz { background: #faf6f0; color: #2c2420; font-family: Nunito, sans-serif; }
.p-herz .project-kicker { font-weight: 600; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: #b48a61; }
.p-herz .num { color: #b48a61; }
.p-herz h3 { font-family: Tangerine, cursive; font-weight: 700; font-size: clamp(56px, 14vw, 84px); line-height: 1; letter-spacing: 0; margin-bottom: 18px; }
.p-herz p { color: #5a4a3a; font-size: 16.5px; line-height: 1.75; }
.p-herz .live-link { height: 50px; padding: 0 24px; border-radius: 99px; background: #b48a61; color: #fff; font-weight: 700; transition: background-color 220ms ease, transform 160ms ease; }
.p-herz .live-link:hover { background: #a0754e; }
.p-herz .live-link:active { transform: scale(.96); }
.p-herz .phone { background: #fff; box-shadow: 0 0 0 1px #f0ebe4, 0 30px 60px -28px rgba(71,62,53,.35); }

/* Carmatic: Inter in kräftig, fast schwarz, Grün nur zum Handeln */
.p-carm { background: #0a0a0a; color: #fff; font-family: Inter, -apple-system, sans-serif; }
.p-carm .project-kicker { justify-self: start; width: max-content; padding: 6px 14px; border-radius: 100px; background: #111; border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.65); font-size: 13px; font-weight: 500; }
.p-carm .num { color: #fff; }
.p-carm h3 { font-weight: 800; letter-spacing: -2px; line-height: 1.05; font-size: clamp(40px, 11vw, 64px); background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,.35) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.p-carm p { color: rgba(255,255,255,.65); font-size: 16px; }
.p-carm .live-link { height: 52px; padding: 0 26px; border-radius: 100px; background: #22c55e; color: #fff; font-weight: 600; transition: background-color 220ms ease, transform 160ms ease; }
.p-carm .live-link:hover { background: #16a34a; }
.p-carm .live-link:active { transform: scale(.96); }
.p-carm .phone { background: #1a1a1a; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -24px rgba(0,0,0,.8); }
.p-herz .project-kicker { display: block; letter-spacing: .16em; }
.p-herz .num { margin-right: 12px; }

/* ---------- Hero: leise Effekte auf dem Szenenbild ---------- */
.hero-scene { position: relative; }
.hero-scene .fx { position: absolute; display: block; margin: 0; pointer-events: none; opacity: 0; }
.fx-wall { left: 20.952%; top: 19.957%; width: 60.582%; height: 34.73%; mix-blend-mode: screen; opacity: .22; }
.fx-flow { left: 20.952%; top: 19.957%; width: 60.582%; height: 34.73%; mix-blend-mode: screen; transition: opacity .8s; filter: drop-shadow(0 0 2px rgba(110,220,255,.95)) drop-shadow(0 0 6px rgba(80,200,255,.7)); }
.fx-flow.on { opacity: 1; }
@keyframes fx-wall { 0%, 100% { opacity: .2; } 50% { opacity: .7; } }
@keyframes fx-run { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 55%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } }

.fx-lamp { left: 57.102%; top: 19.034%; width: 19.034%; height: 16.548%; mix-blend-mode: screen; animation: fx-lamp-on 1.8s linear forwards, fx-flick 9s 1.8s linear infinite; transition: filter .25s ease; }
.fx-hex { animation: fx-lamp-on 1.8s linear forwards, fx-flick 9s 1.8s linear infinite; }
.fx-lamp-dim { left: 57.102%; top: 19.034%; width: 19.034%; height: 16.548%; mix-blend-mode: multiply; animation: fx-dim 9s 1.8s linear infinite; transition: opacity .2s; }
@keyframes fx-flick { 0%, 38%, 41%, 100% { opacity: 1; } 39% { opacity: .72; } 40% { opacity: .9; } 78%, 80% { opacity: 1; } 79% { opacity: .8; } }
@keyframes fx-dim { 0%, 38%, 41%, 100% { opacity: 0; } 39% { opacity: .3; } 40% { opacity: .1; } 78%, 80% { opacity: 0; } 79% { opacity: .2; } }
@keyframes fx-lamp-on { 0% { opacity: 0; } 12% { opacity: .9; } 18% { opacity: .1; } 30% { opacity: .75; } 36% { opacity: .15; } 55% { opacity: 1; } 100% { opacity: .5; } }
@keyframes fx-lamp { 0%, 100% { opacity: .5; } 40% { opacity: .62; } 70% { opacity: .5; } 75% { opacity: 1; } 78% { opacity: .7; } 81% { opacity: .95; } 90% { opacity: .55; } }
@keyframes fx-hex { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
.fx-light { left: 47%; top: 27%; width: 30%; height: 40%; background: radial-gradient(ellipse 55% 70% at 62% 0%, rgba(255,224,160,.32), rgba(255,224,160,0) 70%); animation: fx-flick 3.1s 1.8s linear infinite; }
@keyframes fx-light { 0%, 68%, 100% { opacity: 0; } 76% { opacity: 1; } 82% { opacity: .8; } 92% { opacity: 0; } }

.fx-code { left: 7.812%; top: 32.173%; width: 9.73%; height: 16.619%; animation: fx-code 4.6s steps(1) infinite; }
@keyframes fx-code { 0% { opacity: .25; } 8% { opacity: .7; } 14% { opacity: .35; } 22% { opacity: .85; } 40% { opacity: .5; } 55% { opacity: .9; } 63% { opacity: .3; } 78% { opacity: .75; } 90% { opacity: .45; } }
.fx-shine { left: 7.812%; top: 32.173%; width: 9.73%; height: 16.619%; opacity: 1;
  background: linear-gradient(115deg, transparent 40%, rgba(185,232,255,.6) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: url(../img/fx-bust-mask.png) 0 0 / 100% 100% no-repeat; mask: url(../img/fx-bust-mask.png) 0 0 / 100% 100% no-repeat;
  animation: fx-shine 7.5s 1s ease-in-out infinite; }
@keyframes fx-shine { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0 0; } }
.hero-scene .fx-foot-bg, .hero-scene .fx-foot { left: 29.403%; top: 61.719%; width: 8.878%; height: 11.719%; opacity: 1; }
.fx-foot { transform-origin: 77.13% 59.7%; animation: fx-foot 3.8s 1s ease-in-out infinite; }
@keyframes fx-foot { 0%, 44%, 100% { transform: rotate(0); } 9% { transform: rotate(-5deg); } 17% { transform: rotate(.8deg); } 26% { transform: rotate(-5deg); } 35% { transform: rotate(.5deg); } }
.hero-scene .fx-head-bg, .hero-scene .fx-head { left: 53.267%; top: 44.46%; width: 11.506%; height: 11.435%; opacity: 1; }
.fx-head { transform-origin: 42.44% 87.11%; animation: fx-head 11s 1.2s ease-in-out infinite; }
.fx-head img { display: block; width: 100%; height: 100%; }
.fx-head .blink { position: absolute; top: 40.5%; height: 11%; border-radius: 40%; background: rgb(46,56,68); box-shadow: 0 0 3px 2px rgb(46,56,68); opacity: 0; animation: fx-blink 4.3s 2s infinite; }
.fx-head .blink.l { left: 22.5%; width: 13%; } .fx-head .blink.r { left: 41%; width: 13.6%; top: 42%; }
.fx-head .blink::after { content: ""; position: absolute; left: 12%; right: 12%; top: 58%; height: 2px; border-radius: 2px; background: #d6f6ff; box-shadow: 0 0 3px 1px rgba(120,215,255,.9); }
@keyframes fx-head { 0%, 12%, 100% { transform: rotate(0); } 20%, 38% { transform: rotate(-4deg); } 46%, 60% { transform: rotate(0); } 68%, 80% { transform: rotate(3deg) translateY(1%); } 88% { transform: rotate(0); } }
@keyframes fx-blink { 0%, 91%, 95%, 100% { opacity: 0; } 92%, 94% { opacity: 1; } }
.fx-head .head-in { position: absolute; inset: 0; transform-origin: 42.44% 87.11%; transition: transform .55s cubic-bezier(.3,.7,.3,1); }
.fx-head.look-left .head-in { transform: rotate(-7deg); }
.fx-head.look-right .head-in { transform: rotate(6deg); }
.fx-head.look-up .head-in { transform: rotate(-2deg) translateY(-3%); }
.fx-head.look-down .head-in { transform: rotate(-4deg) translateY(2%); }
.fx-head.look-self .head-in { animation: fx-wiggle .6s ease-in-out; }
@keyframes fx-wiggle { 25% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } }
.fx-head .screen { position: absolute; left: 18.5%; top: 30.5%; width: 38.5%; height: 39%; border-radius: 16%; background: radial-gradient(ellipse at 50% 35%, rgb(62,66,74), rgb(40,48,58)); box-shadow: 0 0 3px 2px rgb(42,50,60); opacity: 0; transition: opacity .18s; display: grid; place-items: center; }
.fx-head .screen .ico { grid-area: 1 / 1; width: 64%; height: 64%; fill: none; stroke: #d6f6ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px rgba(120,215,255,.95)) drop-shadow(0 0 4px rgba(90,200,255,.6)); opacity: 0; transform: rotate(7deg) skewX(-3deg) scale(.7); transition: opacity .2s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.fx-head.show .screen { opacity: 1; }
.fx-head.show .screen .ico.on { opacity: 1; transform: rotate(7deg) skewX(-3deg) scale(1); }
.fx-head.show .blink { visibility: hidden; }
.hero-scene .hot { position: absolute; display: block; z-index: 3; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.hero-scene .hot:focus { outline: none; }
.hero-scene .hot:focus-visible { outline: 2px solid rgba(20,20,20,.35); outline-offset: 2px; }
.hero-scene .bot-say { position: absolute; left: 58.6%; bottom: 57.2%; z-index: 4; display: flex; align-items: center; gap: .45em; padding: .5em 1em .52em; border-radius: 999px; background: #e2f7fd; color: #0f2a33; box-shadow: 0 0 0 1px #bfe6f2, 0 6px 16px -8px rgba(15,42,51,.35); font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; text-decoration: none; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 6px) scale(.88); transform-origin: 50% 100%; transition: opacity .18s, transform .3s cubic-bezier(.3,1.5,.5,1), visibility 0s .3s; -webkit-tap-highlight-color: transparent; }
.hero-scene .bot-say::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #e2f7fd; box-shadow: 1px 1px 0 0 #bfe6f2; transform: rotate(45deg); }
.hero-scene .bot-say.on { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .18s, transform .3s cubic-bezier(.3,1.5,.5,1), visibility 0s; }
@media (min-width: 980px) { .hero-scene .bot-say { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .hero-scene .fx, .hero-scene .bot-say { display: none; } }
.fx-head .screen .ico.face { width: 86%; height: 86%; }
.fx-head.boing .head-in { animation: fx-boing .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes fx-boing { 30% { transform: translateY(-6%) scale(1.03); } 60% { transform: translateY(1%); } }
.hero-scene .bot-say.long { white-space: normal; width: max-content; max-width: min(16em, 64vw); text-align: center; line-height: 1.3; border-radius: 1.1em; padding: .62em 1.05em; text-wrap: balance; }
.hero-scene .plane svg { filter: drop-shadow(0 1px .5px rgba(0,0,0,.12)); position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-scene .plane .p { transform-box: view-box; transform-origin: 50% 60%; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.hero-scene .plane .sh { fill: rgba(40,44,50,.2); filter: blur(2px); transition: opacity .3s; }
.hero-scene .plane:hover .p, .hero-scene .plane:focus-visible .p { transform: translateY(-7%) rotate(-3deg); }
.hero-scene .plane.fly .p { animation: plane-fly 1.05s cubic-bezier(.45,0,.75,.6) forwards; }
.hero-scene .plane.fly .sh { opacity: 0; }
.hero-scene .plane.land .p { animation: plane-land .9s cubic-bezier(.2,.8,.3,1) both; }
@keyframes plane-fly { 0% { transform: none; } 18% { transform: translate(3%, -30%) rotate(4deg); } 100% { transform: translate(-360%, -780%) rotate(-24deg) scale(.45); opacity: 0; } }
@keyframes plane-land { 0% { transform: translate(60%, -160%) rotate(10deg) scale(.8); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; } }
.hero-scene .fx-fern-bg, .hero-scene .fx-fern { left: 18.608%; top: 14.062%; width: 22.869%; height: 21.307%; opacity: 1; }
.fx-fern { transform-origin: 51.55% 70.67%; animation: fx-fern 7.5s ease-in-out infinite; }
@keyframes fx-fern { 0%, 100% { transform: rotate(0) skewX(0); } 22% { transform: rotate(1.7deg) skewX(-1.2deg); } 40% { transform: rotate(.5deg) skewX(-.3deg); } 58% { transform: rotate(-1deg) skewX(.6deg); } 78% { transform: rotate(1deg) skewX(-.7deg); } }
.hero-scene .fx-flash { left: 36%; top: 2%; width: 58%; height: 72%; background: radial-gradient(ellipse 30% 24% at 52% 33%, rgba(255,250,228,1), rgba(255,232,170,.6) 45%, rgba(255,220,150,0) 100%), radial-gradient(ellipse 50% 66% at 42% 58%, rgba(255,230,175,.42), rgba(255,230,175,0) 72%); mix-blend-mode: screen; transform: scale(.85); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.hero-scene.lamp-on .fx-flash { opacity: 1; transform: none; transition: opacity .12s ease, transform .35s cubic-bezier(.3,1.5,.5,1); }
.hero-scene.lamp-on .fx-lamp { animation: none; opacity: 1; filter: brightness(1.45) saturate(1.1); }
.hero-scene.lamp-on .fx-lamp-dim { animation: none; opacity: 0; }
.hero-scene.lamp-on .fx-light { animation: none; opacity: 1; }
.hero-scene .nav-pill { position: absolute; z-index: 5; display: flex; align-items: center; gap: .45em; padding: .5em 1em .52em; border-radius: 999px; background: #111; color: #fff; font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; text-decoration: none; cursor: pointer; opacity: 0; visibility: hidden; transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% + 6px)) scale(.88); transform-origin: 50% 100%; transition: opacity .18s, transform .3s cubic-bezier(.3,1.5,.5,1), visibility 0s .3s; -webkit-tap-highlight-color: transparent; }
.hero-scene .nav-pill::after { content: ""; position: absolute; left: calc(50% - var(--dx, 0px)); top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #111; border-bottom: 0; }
.hero-scene .nav-pill .go { display: none; }
.hero-scene .nav-pill.touch .go { display: inline; }
.hero-scene .nav-pill.on { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--dx, 0px)), -100%) scale(1); transition: opacity .18s, transform .3s cubic-bezier(.3,1.5,.5,1), visibility 0s; }
.hero-scene .nav-pill.up { transform: translate(calc(-50% + var(--dx, 0px)), -6px) scale(.88); transform-origin: 50% 0; }
.hero-scene .nav-pill.up.on { transform: translate(calc(-50% + var(--dx, 0px)), 0) scale(1); }
.hero-scene .nav-pill.up::after { top: auto; bottom: 100%; border: 6px solid transparent; border-bottom-color: #111; border-top: 0; }
@media (min-width: 980px) { .hero-scene .nav-pill { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .hero-scene .nav-pill { display: none; } }

/* kitzlige Füße */
.hero-scene.tickle .fx-foot { animation: fx-tickle .17s ease-in-out 8; }
@keyframes fx-tickle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 70% { transform: rotate(2.5deg); } }
.hero-scene.tickle .fx-head .head-in { animation: fx-giggle .26s ease-in-out 5; }
@keyframes fx-giggle { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3%) rotate(-2.5deg); } 75% { transform: translateY(-1%) rotate(2.5deg); } }

/* Peek-Bot: Menü am unteren Rand */
.peek-veil { position: fixed; inset: 0; z-index: 60; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.peek-open .peek-veil { opacity: 1; pointer-events: auto; }
.peek { position: fixed; z-index: 61; bottom: 0; left: 50%; width: 104px; transform: translateX(-50%); pointer-events: none; }
.peek-bot { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transform: translateY(104%); transition: transform .55s cubic-bezier(.3,1.25,.5,1); -webkit-tap-highlight-color: transparent; }
.peek.in .peek-bot { transform: translateY(0); }
.peek.in.low .peek-bot { transform: translateY(46%); transition-duration: .35s; }
.peek.open .peek-bot { transform: translateY(0); }
.peek-bot:focus-visible { outline: none; }
.peek-bot:focus-visible .peek-in { filter: drop-shadow(0 0 0 #111) drop-shadow(0 0 3px rgba(17,17,17,.6)); }
.peek-in { position: relative; display: block; filter: drop-shadow(0 -2px 10px rgba(0,0,0,.12)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); transform-origin: 50% 100%; }
.peek-in img { display: block; width: 100%; height: auto; }
@media (hover: hover) { .peek.in:not(.low) .peek-bot:hover .peek-in { transform: translateY(-4px); } }
.peek-in.boing { animation: fx-boing .55s cubic-bezier(.3,1.6,.5,1); }
.peek-screen { position: absolute; left: 43.5%; top: 29.5%; width: 29%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-11.5deg); }
.peek-screen .pi { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #d6f6ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px rgba(120,215,255,.95)) drop-shadow(0 0 4px rgba(90,200,255,.6)); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.peek-screen .pi-happy { inset: -12%; width: 124%; height: 124%; }
.peek-screen .pi.on { opacity: 1; transform: scale(1); }
.peek-menu { position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; }
.peek-menu a { position: absolute; left: var(--x); top: var(--y); padding: .62em 1.1em .64em; border-radius: 999px; background: #111; color: #fff; font: 600 14px/1 Inter, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; text-decoration: none; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.5); transition: opacity .16s, transform .22s; -webkit-tap-highlight-color: transparent; }
.peek-menu a::after { content: ""; position: absolute; left: var(--tl, 50%); top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #111; border-bottom: 0; }
.peek-menu a.cur { background: #e2f7fd; color: #0f2a33; box-shadow: 0 0 0 1px #bfe6f2; }
.peek-menu a.cur::after { border-top-color: #e2f7fd; }
.peek.open .peek-menu a { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); transition: opacity .2s calc(var(--i) * 45ms), transform .4s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * 45ms); }
.peek-menu a:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.peek-menu a[data-sec="start"] { --x: -140px; --y: 18px; --tl: 72%; }
.peek-menu a[data-sec="projekte"] { --x: -92px; --y: -80px; --tl: 66%; }
.peek-menu a[data-sec="philosophie"] { --x: 0px; --y: -124px; }
.peek-menu a[data-sec="ueber-mich"] { --x: 94px; --y: -80px; --tl: 34%; }
.peek-menu a[data-sec="kontakt"] { --x: 136px; --y: 18px; --tl: 30%; }
@media (min-width: 980px) {
  .peek { left: auto; right: 36px; width: 120px; transform: none; }
  .peek-menu a { font-size: 15px; }
  .peek-menu a[data-sec="start"] { --x: 0px; --y: -150px; --tl: 50%; }
  .peek-menu a[data-sec="projekte"] { --x: -86px; --y: -126px; --tl: 70%; }
  .peek-menu a[data-sec="philosophie"] { --x: -152px; --y: -76px; --tl: 76%; }
  .peek-menu a[data-sec="ueber-mich"] { --x: -190px; --y: -14px; --tl: 80%; }
  .peek-menu a[data-sec="kontakt"] { --x: -200px; --y: 52px; --tl: 84%; }
}
@media (prefers-reduced-motion: reduce) { .peek-bot, .peek-menu a, .peek-in, .peek-screen .pi { transition: none !important; animation: none !important; } }
.peek.typing:not(.open) .peek-bot { transform: translateY(104%); }

/* Peek-Bot bleibt immer auf der Kante */
.peek { bottom: -3px; }
.peek-bot { transition: transform .45s cubic-bezier(.22,.8,.3,1); }
.peek-in, .peek.in:not(.low) .peek-bot:hover .peek-in { transform: none !important; }
.peek-in.boing { animation: peek-nod .5s ease-out; }
@keyframes peek-nod { 35% { transform: scaleY(1.035); } 70% { transform: scaleY(.99); } }

/* ---------- Projekte v2: scrollendes Handy ---------- */
.scr { position: relative; overflow: hidden; border-radius: 32px; aspect-ratio: 390 / 844; background: #111; isolation: isolate; }
.scr .scroll { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translate3d(0, var(--sy, 0px), 0); will-change: transform; }
.p-herz .scr { background: #faf6f0; }
.project-copy { display: flex; flex-direction: column; align-items: flex-start; }
.project-copy > p:not(.project-kicker) { max-width: 46ch; }
.pj-stage { display: none; }

@media (min-width: 980px) {
  .pj-wrap { --pjbg: #cc1026; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); column-gap: 64px; margin: 0 calc(50% - 50vw); padding: 0 max(var(--pad), calc(50vw - 590px)); background: var(--pjbg); transition: background-color 700ms var(--ease); }
  .pj-wrap[data-cur="herz"] { --pjbg: #faf6f0; }
  .pj-wrap[data-cur="carm"] { --pjbg: #0a0a0a; }
  .pj-wrap .project { display: flex; align-items: center; min-height: 100vh; margin: 0; padding: 12vh 0; background: none; }
  .pj-wrap .project-copy { opacity: .12; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .pj-wrap .project.cur .project-copy { opacity: 1; transform: none; }
  .pj-phone-m { display: none; }
  .pj-stage { display: block; position: relative; }
  .pj-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
  .pj-phone { width: min(300px, calc((100vh - 170px) * 390 / 844 + 16px)); margin: 0; background: #1f1f1f; box-shadow: 0 0 0 1px #2d3136, 0 40px 80px -30px rgba(60,0,8,.7); transition: background-color 700ms var(--ease), box-shadow 700ms var(--ease); }
  .pj-phone .scr { position: relative; }
  .pj-screen { position: absolute !important; inset: 8px; opacity: 0; transition: opacity 600ms var(--ease); }
  .pj-screen:first-child { position: relative !important; inset: auto; }
  .pj-screen.on { opacity: 1; z-index: 1; }
  .pj-wrap[data-cur="herz"] .pj-phone { background: #fff; box-shadow: 0 0 0 1px #f0ebe4, 0 40px 80px -30px rgba(71,62,53,.4); }
  .pj-wrap[data-cur="carm"] .pj-phone { background: #1a1a1a; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -30px rgba(0,0,0,.9); }
  .pj-count { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.7); transition: color 700ms var(--ease); }
  .pj-count .c { color: #fff; transition: color 700ms var(--ease); }
  .pj-wrap[data-cur="herz"] .pj-count { color: #b48a61; }
  .pj-wrap[data-cur="herz"] .pj-count .c { color: #2c2420; }
}
@media (prefers-reduced-motion: reduce) {
  .scr .scroll { transform: none !important; }
  .pj-wrap .project-copy { opacity: 1; transform: none; }
}

/* ---------- Footer-Bot: liegt auf der Linie, zeigt nach oben ---------- */
.foot { position: relative; margin-top: 150px; }
.foot-bot { position: absolute; bottom: 100%; left: 50%; width: 220px; margin: 0 0 -4px -110px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.foot-bot::after { content: ""; position: absolute; z-index: -1; left: 4%; right: 2%; bottom: 3px; height: 10px; border-radius: 50%; background: rgba(17,18,20,.16); filter: blur(5px); }
.fb-in { display: block; transform-origin: 30% 100%; transition: transform 380ms var(--spring); }
.fb-in img { display: block; width: 100%; height: auto; }
.foot-bot:focus-visible { outline: none; }
.foot-bot:focus-visible .fb-tip { outline: 2px solid var(--ink); outline-offset: 3px; }
.fb-tip { position: absolute; left: 26.7%; bottom: 100%; margin-bottom: 8px; padding: 7px 13px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px) scale(.9); transition: opacity 220ms ease, transform 320ms var(--spring); pointer-events: none; }
.fb-tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.foot-bot:hover .fb-tip, .foot-bot:focus-visible .fb-tip, .foot-bot.hop .fb-tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
.foot-bot.hop .fb-in { animation: fb-hop 700ms var(--ease); }
@keyframes fb-hop { 0% { transform: none; } 30% { transform: translateY(-16px) rotate(-4deg); } 55% { transform: translateY(0) rotate(0); } 72% { transform: translateY(-5px); } 100% { transform: none; } }
.peek.away:not(.open) .peek-bot { transform: translateY(104%); }
@media (min-width: 980px) {
  .foot-bot { left: auto; right: var(--pad); width: 264px; margin-left: 0; }
}
@media (max-width: 979px) { .foot { justify-content: center; text-align: center; } }

/* ---------- Bots: kleine Animationen ---------- */
.fb-in { position: relative; }
.fb-arm { position: absolute; inset: 0; transform-origin: 27.8% 63.1%; animation: fb-point 5.2s ease-in-out 1.5s infinite; }
@keyframes fb-point { 0%, 74%, 100% { transform: none; } 78% { transform: rotate(-7deg); } 82% { transform: rotate(3deg); } 86% { transform: rotate(-6deg); } 90% { transform: rotate(2deg); } 94% { transform: rotate(-1deg); } }
@media (hover: hover) { .foot-bot:hover .fb-arm { animation: fb-wave .7s ease-in-out infinite alternate; } }
.foot-bot:focus-visible .fb-arm { animation: fb-wave .7s ease-in-out infinite alternate; }
@keyframes fb-wave { from { transform: rotate(-8deg); } to { transform: rotate(5deg); } }
.foot-bot.hop .fb-arm { animation: none; transform: rotate(-4deg); }
.peek-screen { animation: peek-blink 6.5s linear 2s infinite; }
@keyframes peek-blink { 0%, 90%, 94.5%, 100% { transform: translate(-50%, -50%) rotate(-11.5deg) scaleY(1); filter: brightness(1); } 92% { transform: translate(-50%, -50%) rotate(-11.5deg) scaleY(.08); filter: brightness(1.4); } 60% { filter: brightness(1.15); } }
.peek.open .peek-screen, .peek-bot:hover .peek-screen { animation: none; }
@media (prefers-reduced-motion: reduce) { .fb-arm, .peek-screen, .foot-bot:hover .fb-arm { animation: none !important; } }

/* Menü-Bot: Kopf wackelt */
.peek-head { position: absolute; inset: 0; transform-origin: 46.9% 55.6%; animation: peek-wobble 7.5s ease-in-out 2.5s infinite; transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes peek-wobble { 0%, 68%, 92%, 100% { transform: none; } 72% { transform: rotate(-4.5deg); } 76% { transform: rotate(3.5deg); } 80% { transform: rotate(-2.5deg); } 84% { transform: rotate(1.5deg); } 88% { transform: rotate(-.5deg); } }
@media (hover: hover) { .peek-bot:hover .peek-head { animation: none; transform: rotate(-6deg); } }
.peek.open .peek-head { animation: none; transform: rotate(-5deg); }
@media (prefers-reduced-motion: reduce) { .peek-head { animation: none !important; transform: none !important; } }

/* Menü offen: dunkler Schleier, türkise Blasen, aktueller Punkt leuchtet */
.peek-veil { background: rgba(6,7,9,.84); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.peek-menu a { background: #e2f7fd; color: #0f2a33; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); transition-property: opacity, transform, background-color; }
.peek-menu a::after { border-top-color: #e2f7fd; }
.peek-menu a:hover { background: #fff; }
.peek-menu a:hover::after { border-top-color: #fff; }
.peek-menu a.cur { background: #e2f7fd; color: #0f2a33; box-shadow: 0 0 0 2px #7fdcff, 0 0 20px 2px rgba(90,200,255,.65); }
.peek-menu a.cur::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 .5em .08em -.1em; border-radius: 50%; background: #16a6d9; box-shadow: 0 0 6px rgba(22,166,217,.9); vertical-align: middle; }
.peek-menu a:focus-visible { outline: 2px solid #e2f7fd; outline-offset: 4px; }

/* ---------- Akzentfarbe: das Türkis vom Bot ---------- */
::selection { background: var(--acc-soft); color: var(--acc-ink); }
:focus-visible { outline-color: #16a6d9; }
.kicker::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 .6em .1em 0; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc-glow); vertical-align: middle; }
h1 em::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.06em; bottom: .06em; height: .2em; border-radius: .1em; background: var(--acc); opacity: .75; transform-origin: 0 50%; animation: acc-draw 1s var(--ease) .5s both; }
h1 { position: relative; z-index: 0; }
@keyframes acc-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.section-title::after { background: linear-gradient(90deg, #16a6d9, var(--acc)); box-shadow: 0 2px 10px -2px var(--acc-glow); }
.hero-scene .nav-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 6px var(--acc); flex: none; }
.steps li.is-in .step-dot { background: var(--acc); border-color: #16a6d9; box-shadow: 0 0 0 4px var(--acc-soft), 0 0 12px var(--acc-glow); }
.steps .step-sub { color: var(--acc-deep); }
.about-claim .hl { background: linear-gradient(transparent 64%, var(--acc-soft) 64%, var(--acc-soft) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.about-copy .placeholder { border-color: var(--acc); background: #f5fcfe; color: var(--acc-deep); }
.field input, .field textarea { background-image: linear-gradient(90deg, #16a6d9, var(--acc)); }
.field input:focus + *, .field:focus-within span { color: var(--acc-deep); }
.send { transition: box-shadow 250ms ease, transform 160ms ease; }
.send:hover, .send:focus-visible { box-shadow: 0 0 0 4px var(--acc-soft), 0 8px 22px -8px var(--acc-glow); }
.send svg { color: var(--acc); }
.fb-tip { background: var(--acc-soft); color: var(--acc-ink); box-shadow: 0 0 0 1px #bfe6f2, 0 6px 16px -8px rgba(0,0,0,.35); }
.fb-tip::after { border-top-color: var(--acc-soft); }
.foot .design::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .55em .12em 0; border-radius: 50%; background: var(--acc); vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { h1 em::after { animation: none; } }

/* Footer-Bot: Gesicht + Füße statt Vergrößern */
.fb-feet, .fb-eyes, .fb-mouth { position: absolute; inset: 0; }
.fb-feet { transform-origin: 91.0% 89.9%; animation: fb-toes 6.4s ease-in-out 3s infinite; }
.fb-eyes { transform-origin: 10.1% 72.3%; animation: fb-blink 5.6s linear 2.2s infinite; }
.fb-mouth { transform-origin: 12.5% 72.7%; transition: transform 300ms var(--spring), filter 300ms ease; }
@keyframes fb-toes { 0%, 80%, 100% { transform: none; } 84% { transform: rotate(-6deg); } 88% { transform: rotate(1.5deg); } 92% { transform: rotate(-4deg); } 96% { transform: none; } }
@keyframes fb-blink { 0%, 93%, 97%, 100% { transform: scaleX(1); } 95% { transform: scaleX(.1); } }
@keyframes fb-wiggle { from { transform: rotate(-7deg); } to { transform: rotate(2deg); } }
@keyframes fb-blink2 { 0%, 30%, 60%, 100% { transform: scaleX(1); } 15%, 45% { transform: scaleX(.1); } }
@media (hover: hover) {
  .foot-bot:hover .fb-feet { animation: fb-wiggle .32s ease-in-out infinite alternate; }
  .foot-bot:hover .fb-eyes { animation: fb-blink2 1.1s linear 1; filter: brightness(1.25); }
  .foot-bot:hover .fb-mouth { transform: scale(1.35); filter: brightness(1.25); }
}
.foot-bot:focus-visible .fb-feet { animation: fb-wiggle .32s ease-in-out infinite alternate; }
.foot-bot:focus-visible .fb-mouth, .foot-bot.hop .fb-mouth { transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) { .fb-feet, .fb-eyes, .foot-bot:hover .fb-feet, .foot-bot:hover .fb-eyes { animation: none !important; } }

/* Footer-Bot: bewegliche Teile auf echte Größe zugeschnitten (Firefox Android Kanten) */
.foot-bot { -webkit-appearance: none; appearance: none; outline: none; color: inherit; font: inherit; }
.foot-bot::-moz-focus-inner { border: 0; padding: 0; }
.fb-in img { -webkit-user-drag: none; user-select: none; }
.fb-in .fb-arm { inset: auto; left: 23.571%; top: 0.000%; width: 9.464%; height: auto; transform-origin: 45.2% 93.1%; }
.fb-in .fb-feet { inset: auto; left: 87.679%; top: 59.761%; width: 12.321%; height: auto; transform-origin: 27.0% 74.8%; }
.fb-in .fb-eyes { inset: auto; left: 7.321%; top: 61.753%; width: 6.071%; height: auto; transform-origin: 46.0% 49.8%; }
.fb-in .fb-mouth { inset: auto; left: 10.714%; top: 66.932%; width: 3.750%; height: auto; transform-origin: 47.9% 49.5%; }

/* ---------- Verspielte Animationen (play.js) ---------- */
@keyframes play-word { from { opacity: 0; transform: translateY(.55em) rotate(4deg) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes play-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes play-scene { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
.play .hero h1 .w { display: inline-block; animation: play-word 900ms var(--spring) both; animation-delay: calc(120ms + var(--i) * 85ms); }
.play .hero h1 em::after { animation-delay: calc(300ms + var(--n) * 85ms); }
.play .hero .lead { animation: play-up 900ms var(--ease) both; animation-delay: calc(260ms + var(--n, 5) * 85ms); }
.play .hero .hero-scene { animation: play-scene 1100ms var(--ease) 150ms both; }

.play .hero-copy { --n: 5; }
/* Überschriften: Buchstaben hüpfen rein, Strich wächst */
.play .section-title .ch { display: inline-block; opacity: 0; transform: translateY(.5em) scale(.7) rotate(-6deg); transition: opacity 400ms ease, transform 700ms var(--spring); transition-delay: calc(var(--i) * 45ms); }
.play .section-title.is-in .ch { opacity: 1; transform: none; }
.play .section-title::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 800ms var(--spring); transition-delay: calc(var(--n) * 45ms + 120ms); }
.play .section-title.is-in::after { transform: none; }
@media (hover: hover) { .play .section-title .ch:hover { transform: translateY(-.12em) rotate(-4deg); transition-delay: 0s; transition-duration: 300ms; } }
/* Gestaffelt hochfedern */
.play .pop .rise { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease), transform 800ms var(--spring); transition-delay: var(--d, 0ms); }
.play .pop.is-in .rise { opacity: 1; transform: none; }
.play .pop.is-in .live-link.rise:active { transform: scale(.96); transition-delay: 0s; transition-duration: 160ms; }
/* Handy im Projekt kippt rein (mobil) */
.play .pj-phone-m.pop { opacity: 0; transform: translateY(40px) rotate(-5deg) scale(.94); transition: opacity 700ms var(--ease), transform 1000ms var(--spring); }
.play .pj-phone-m.pop.is-in { opacity: 1; transform: none; }
/* Schritte: gestaffelt, Punkt poppt mit Ring */
.steps li.reveal { transition-delay: var(--d, 0ms); }
@keyframes play-dot { 0% { transform: scale(.4); } 55% { transform: scale(1.45); } 100% { transform: scale(1.15); } }
@keyframes play-ring { from { box-shadow: 0 0 0 0 rgba(127,220,255,.7); } to { box-shadow: 0 0 0 14px rgba(127,220,255,0); } }
.steps li.is-in .step-dot { animation: play-dot 700ms var(--spring) both; animation-delay: calc(var(--d, 0ms) + 250ms); position: relative; }
.steps li.is-in .step-dot::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; animation: play-ring 1.1s ease-out both; animation-delay: calc(var(--d, 0ms) + 420ms); }
@media (hover: hover) { .steps li:hover .step-dot { transform: scale(1.4); } .steps li:hover h3 { transform: translateX(3px); } }
.steps h3 { transition: transform 350ms var(--spring); }
/* Über mich: Textmarker malt sich rein */
.play .about-claim.pop .hl { background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 1200ms var(--ease) 250ms; }
.play .about-claim.pop.is-in .hl { background-size: 100% 100%; }
/* Kontakt: Felder gestaffelt, Label rückt beim Fokus */
.field span { display: inline-block; transition: transform 350ms var(--spring), color 200ms ease; }
.field:focus-within span { transform: translateX(4px); }
@keyframes play-nudge { 0%, 100% { transform: translateX(4px); } 50% { transform: translateX(9px); } }
@media (hover: hover) { .send:hover { transform: translateY(-2px); } .send:hover svg { animation: play-nudge .8s ease-in-out infinite; } }
.play .pop.is-in .send.rise:active { transform: scale(.95); transition-delay: 0s; transition-duration: 160ms; }
/* Zähler hüpft */
@keyframes play-bump { 0% { transform: translateY(0); } 35% { transform: translateY(-5px) scale(1.15); } 100% { transform: none; } }
.pj-count .c { display: inline-block; }
.pj-count .c.bump { animation: play-bump 500ms var(--spring); }
/* Punkt vor Design by atmet */
@keyframes play-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .7; } }
.foot .design::before { animation: play-breathe 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .foot .design::before, .send:hover svg, .pj-count .c.bump { animation: none !important; } }

/* Formular: Datenschutz-Haken, Honeypot, Footer-Links */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 12px; align-items: flex-start; max-width: 520px; font-size: 14px; line-height: 1.5; color: var(--mute); cursor: pointer; }
.consent input { -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid #bdbdbd; border-radius: 5px; background: #fff; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; }
.consent input::after { content: ""; width: 10px; height: 5px; margin-top: -3px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform 280ms var(--spring); }
.consent input:checked { background: var(--ink); border-color: var(--ink); }
.consent input:checked::after { transform: rotate(-45deg) scale(1); }
.consent input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.consent a { color: var(--ink); text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.consent.is-bad input { border-color: var(--ink); border-width: 2.5px; animation: shake-x 380ms ease; }
.consent.is-bad span { color: var(--ink); }
.foot .legal { display: flex; gap: 18px; }
.foot .legal a { color: var(--mute); text-decoration: none; transition: color 200ms ease; }
.foot .legal a:hover, .foot .legal a:focus-visible { color: var(--ink); }

/* Philosophie: Icons statt Punkte */
.steps::before { left: 21px; top: 22px; bottom: 22px; }
.step-dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -4px; color: #b9bcc0; }
.step-dot svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.steps li.is-in .step-dot { color: var(--acc-ink); }
.steps li.is-in .step-dot path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: step-draw 900ms var(--ease) both; animation-delay: calc(var(--d, 0ms) + 520ms); }
.steps li.is-in .step-dot path + path { animation-delay: calc(var(--d, 0ms) + 700ms); }
.steps li.is-in .step-dot path + path + path { animation-delay: calc(var(--d, 0ms) + 860ms); }
@keyframes step-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes play-dot { 0% { transform: scale(.5); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
.steps li.is-in .step-dot::after { inset: -1.5px; }
@media (hover: hover) {
  .steps li:hover .step-dot { transform: scale(1.08); }
  .steps li:hover .step-dot svg { animation: step-wiggle 600ms var(--spring); }
}
@keyframes step-wiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 100% { transform: rotate(0); } }
@media (min-width: 900px) {
  .steps::before { left: 22px; right: 22px; top: 22px; }
  .steps li .step-dot { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .steps li.is-in .step-dot path { animation: none; stroke-dashoffset: 0; }
  .steps li:hover .step-dot svg { animation: none; }
}