/* ==== 00_base.css ==== */
/* Social by Vana – motion tokens, keyframes and the logo layer stack (shared by all sections) */
:root{
  --v-slam:cubic-bezier(.7,0,.84,0);
  --v-pop:cubic-bezier(.17,.67,.3,1.33);
  --v-out:cubic-bezier(.19,1,.22,1);
  --v-ui:cubic-bezier(.23,1,.32,1);
  --v-pen:cubic-bezier(.37,0,.63,1);
  --v-dive:cubic-bezier(.87,0,.13,1);
  --v-panel:cubic-bezier(.86,0,.07,1);
  /* palette since 2026-10-29 (vana-build/palette.py): creme-beige and sage, no pink */
  --v-green:#00522d; --v-green2:#003d22; --v-blush:#e3d9d8; --v-taupe:#d3cac5; --v-sand:#bca495; --v-sage:#a5ad9e;
  /* old names, kept so earlier rules read right: pink-1 became green, pink-2 Sand, pink-3 Taupe, gray Sage */
  --v-cream:var(--v-blush); --v-pink3:var(--v-taupe); --v-pink2:var(--v-sand); --v-gray:var(--v-sage); --v-pink:var(--v-green);
}

@keyframes vana-pen{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes vana-pop{from{transform:scale(0) rotate(-12deg)}to{transform:none}}
@keyframes vana-beat{0%,70%,100%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.18)}}
@keyframes vana-beat-idle{0%,9%,100%{transform:scale(1)}2%{transform:scale(1.3)}4%{transform:scale(1)}6%{transform:scale(1.18)}}
@keyframes vana-typing{0%,100%{transform:translateY(0)}50%{transform:translateY(-40%)}}
@keyframes vana-emoji{0%{transform:scale(0) rotate(-10deg)}60%{transform:scale(1.25) rotate(4deg)}100%{transform:none}}
@keyframes vana-out{to{transform:scale(0);opacity:0}}
@keyframes vana-ring{from{transform:scale(0);opacity:1}to{transform:scale(2.4);opacity:0}}
@keyframes vana-float{from{transform:translateY(0);opacity:1}to{transform:translateY(-1.6em);opacity:0}}

/* ---- logo layer stack (markup from vana-build/kit.py layer_stack) ---- */
.vana-logo{position:relative;display:block;aspect-ratio:1112/742;color:inherit;--knock:var(--v-cream)}
.vana-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.vana-layer *{transform-box:fill-box;transform-origin:center}
.vana-layer.-v,.vana-layer.-k{fill:currentColor}
.vana-halo{fill:var(--knock)}
.vana-script{fill:var(--script-color,currentColor)}
/* (no speech bubble / heart layer on the site since 2026-10-30) */
/* pen masks: visible (written) by default; sections arm/play them */
.vana-pen path{stroke-dashoffset:0}

/* generic hooks a section may use instead of writing its own:
   .-pen-armed  -> script hidden, ready to write
   .-pen-play   -> writes over --pen-total starting at --pen-start            */
@media (prefers-reduced-motion:no-preference){
  .vana-logo.-pen-armed .vana-pen path{stroke-dashoffset:var(--len)}
  .vana-logo.-pen-play .vana-pen path{animation:vana-pen calc(var(--dur) * var(--pen-total,1s)) var(--v-pen) calc(var(--pen-start,0s) + var(--d) * var(--pen-total,1s)) both}
}

/* screen-reader only */
.vana-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* small text in deep green (on Sand and Sage, green is only 4 : 1) */
.-clrgreen2{color:var(--v-green2)}

/* the »Kostenloses Erstgespräch sichern« buttons (vana-build/cta.py, feedback 2026-10-29 item 11) */
.vana-ctaRow{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:center;margin-top:4rem;position:relative;z-index:2}
.vana-cta{white-space:nowrap;font-size:1.3rem}
@media (min-width:961px){.vana-cta{font-size:1.4rem}}
/* on the dark project pages (body.-white) a green button would vanish: Blush with green text, like the header one */
.-white .vana-cta:not(.o-header_cta){background-color:var(--v-blush);color:var(--v-green)}

/* ==== 20_manifest.css ==== */
/* Manifest .o-homeManifest: a calm Sage screen with one sentence (feedback 2026-10-29, item 7).
   The template made it 400vh with a sticky screen for its scroll-scrubbed bubble; now it is one opaque
   screen. Opaque matters: it scrolls over the fixed card panels of hero / team / projects (z-index 50
   against their 4) until js/40_hero.js hides them, once the block covers the viewport. */
.o-homeManifest{height:auto;min-height:100vh;min-height:100svh;background:var(--v-sage);pointer-events:none}
/* the Sage of »Leistungen« follows right below: a 2 px overlap closes the sub-pixel seam where the page colour
   (still blending) showed through as a thin dark line */
.o-homeManifest{box-shadow:0 2px 0 var(--v-sage)}
.o-homeManifest_screen{position:relative;height:auto;min-height:inherit;overflow:visible;padding:14rem 2rem}
.o-homeManifest .o-homeManifest_text1{position:relative;top:auto;left:auto;transform:none;width:100%;max-width:120rem;
  margin:0 auto;padding:0 2rem;line-height:.82}

/* words slide in from below when the block comes into view (js/20_manifest.js: -vanaIn), like the titles.
   Hidden only while that script runs (html.-vanaMf), so without it the sentence simply stands there. */
.o-homeManifest .o-homeManifest_word{transform:none;transition:transform .9s var(--v-out)}
html.-vanaMf .o-homeManifest:not(.-vanaIn) .o-homeManifest_word{transform:translateY(120%);transition-duration:0s}
.o-homeManifest.-vanaIn .o-homeManifest_wordWrapper:nth-child(n+4) .o-homeManifest_word{transition-delay:.05s}
.o-homeManifest.-vanaIn .o-homeManifest_wordWrapper:nth-child(n+8) .o-homeManifest_word{transition-delay:.1s}
.o-homeManifest.-vanaIn .o-homeManifest_wordWrapper:nth-child(n+12) .o-homeManifest_word{transition-delay:.15s}

/* the word masks (bundle: inline-flex + overflow:hidden, one line box = .7em high) cut everything below the
   baseline, so Beni's comma (descender -.096em) read as a full stop. The mask reaches .12em further down;
   the negative margin keeps the line box, so the layout does not move. */
.o-homeManifest .o-homeManifest_wordWrapper{padding-bottom:.12em;margin-bottom:-.12em}

@media (prefers-reduced-motion:reduce){
  html.-vanaMf .o-homeManifest .o-homeManifest_word{transform:none;transition:none}
}

/* ==== 30_header.css ==== */
/* ==== Header mark (spec 5.3): mini VK in one colour ====
   Since 2026-10-29 (feedback items 16, 17) it is calm: it fades out and in (the template scaled and turned it,
   and V and K flew apart), and it has no like counter. Since 2026-10-30 no speech bubble with a heart: the box
   is tight around the letters; --mk (on the link, sections/30_header.py) keeps their former size and place. */
.o-header_logo{line-height:0;-webkit-tap-highlight-color:transparent}
.o-header_logo{--mh:4.4rem;margin-top:calc(var(--mh) * (1 - var(--mk,1)))}
@media (min-width:1024px){.o-header_logo{--mh:5rem}}
@media (min-width:1601px){.o-header_logo{--mh:6rem}}
.vana-mark{position:relative;display:block;height:calc(var(--mh,4.4rem) * var(--mk,1));aspect-ratio:var(--vbw)/var(--vbh)}
.vana-mark .vana-layer path{stroke-linejoin:round}
.vana-mark .vana-layer.-v path,.vana-mark .vana-layer.-k path{fill:currentColor;stroke:currentColor;paint-order:stroke}

/* hidden (hero, footer, scrolling down, open menu): a fade instead of the template's scale(0) rotate(8deg).
   :is() + :not() outweigh the template's !important rule (0,3,0 against 0,2,0). */
:is(.-hideLogo,.-hideLogoScroll,.-isMenuOpen) .o-header_logo:not(:focus-visible){transform:translate(-50%)!important;opacity:0;pointer-events:none}
.o-header_logo{transition:color .4s var(--v-ui),opacity .35s var(--v-ui)}

/* keyboard: a focused logo is always shown, on a light pill so it reads on every page colour */
body:not(.-isMenuOpen) a.o-header_logo:focus-visible{transform:translate(-50%)!important;opacity:1;pointer-events:auto;color:var(--v-green)}
.o-header_logo::before{content:"";position:absolute;z-index:-1;inset:-.6rem -.9rem;border-radius:999px;background:var(--v-blush);
  box-shadow:0 .5rem 1.6rem -.5rem rgba(0,61,34,.55);opacity:0;pointer-events:none;transition:opacity .2s var(--v-ui)}
a.o-header_logo:focus-visible::before{opacity:1;box-shadow:0 0 0 .3rem var(--v-green),0 0 0 .55rem var(--v-blush),0 .5rem 1.6rem -.3rem rgba(0,61,34,.55)}
a.o-header_logo:focus-visible{outline:2px solid transparent;outline-offset:.8rem}
@media (forced-colors:active){.o-header_logo::before{display:none}a.o-header_logo:focus-visible{outline-color:Highlight}}

@media (prefers-reduced-motion:reduce){
  .o-header_logo,.vana-mark,.vana-mark *{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
}

/* ==== round menu button on a Sand page (B2) ====
   It is a Sand circle (-bgpink-2), so on a Sand page (the footer until 2026-11-01) only its icon showed. Since then the
   questions and the footer are Kulisse #f7f5ef, where the Sand circle shows as it is; the rule stays for any Sand page. sections/96_fixes.py
   mirrors the page colour as html[data-vana-bg]; while it is Sand the circle turns Blush with the green icon,
   fading at the switch point of the page colour blend (css/97d_bg_blend.css). The open menu keeps its look. */
.o-header .a-button.-icon.o-header_menuButton{
  transition:transform .4s cubic-bezier(.17,.67,.3,1.33),background-color .4s var(--v-ui),color .4s var(--v-ui),box-shadow .4s var(--v-ui)}
html[data-vana-bg="#bca495"] body:not(.-isMenuOpen) .o-header .a-button.-icon.o-header_menuButton{
  background-color:var(--v-blush);color:var(--v-green);box-shadow:0 .4rem 1.2rem -.5rem rgba(0,61,34,.45)}
@media (forced-colors:active){html[data-vana-bg] .o-header .a-button.-icon{box-shadow:none}}

/* ==== »Kostenloses Erstgespräch sichern« in the header (cta.header(), feedback item 11) ====
   Top right, where the WhatsApp button was on desktop. Phones: top right as well, with the short label
   »Erstgespräch« (the long one does not fit next to the centred mark). */
.o-header_cta{position:fixed;top:1.5rem;right:1.5rem;z-index:81;white-space:nowrap;box-shadow:0 0 0 .3rem var(--v-blush);
  transition:transform .4s cubic-bezier(.17,.67,.3,1.33),background-color .4s var(--v-ui),color .4s var(--v-ui),box-shadow .4s var(--v-ui)}
@media (min-width:961px){.o-header_cta{top:3rem;right:3rem}}
.o-header_cta .-short{display:none}
@media (max-width:767px){.o-header_cta .-long{display:none}.o-header_cta .-short{display:inline}.o-header_cta.vana-cta{font-size:1.2rem}}
/* dark project pages (body.-white): a Blush button with green text */
.-white .o-header_cta{background-color:var(--v-blush);color:var(--v-green)}
/* the open menu has its own first-call card from 961 px (the bundle hides that panel below); on phones and
   tablets the header button stays and closes the menu before the form opens (js/98_copy_contact.js) */
@media (min-width:961px){.-isMenuOpen .o-header_cta{opacity:0;pointer-events:none;transform:scale(.8)}}
/* until the page has started (html.-once) the mark stays hidden: the hero hides it right after, so it would
   otherwise flash and fade on every load */
html:not(.-once) .o-header_logo{opacity:0;transition:none}

/* ==== 40_hero.css ==== */
/* Hero word mark "SOCIAL by Vana" (spec 5.4) — owner: hero agent
   markup: sections/40_hero.py  (.vana-heroWord > .m-logo + .o-homeHero_sign > .vana-logo.hr-logo)
   timeline from body.-once:  0–1.25s letters rise · .7–1.7s "by Vana" writes
   (no speech bubble with a heart since 2026-10-30) */

/* ---- S-O-C-I-A-L: every slot as wide as its glyph (--w), so all six letters share one height ---- */
.o-homeHero .vana-heroWord{position:relative}
.o-homeHero .vana-heroWord .m-logo{justify-content:flex-start}
.o-homeHero .vana-heroWord .m-logo .a-svg{flex:var(--w) 1 0;min-width:0;margin:0;aspect-ratio:var(--w)/275}

/* ---- signature sticker ---- */
.o-homeHero_sign{
  position:absolute;z-index:5;right:-1.5%;top:42%;width:62%;
  pointer-events:none;user-select:none;
  rotate:-6deg;
  opacity:calc(1 - var(--progress,0) * 1.8);
}
@media only screen and (min-width:961px){
  .o-homeHero_sign{top:auto;right:-2.5%;bottom:-13%;width:44%}
}
/* tablets: the photo stack is smaller since 2026-10-29 (claim + button on the first screen), so the full-size
   signature lay on Vana's face; smaller and further right it sits on the wall beside her */
@media only screen and (min-width:600px) and (max-width:960px){
  .o-homeHero_sign{top:30%;right:-1%;width:44%}
}
.o-homeHero_sign .hr-logo{
  /* one colour since 2026-10-29 (feedback question A): the script green like V and K */
  --script-color:var(--v-green);--knock:var(--v-blush);
}

@media (prefers-reduced-motion:no-preference){
  /* scroll: the sticker lifts off while the cards close; mouse: --mx/--my (-1…1) from js/40_hero.js */
  .o-homeHero_sign{
    translate:0 calc(var(--progress,0) * -12vh);
    scale:calc(1 + var(--progress,0) * .15);
  }
  .o-homeHero_sign .hr-logo{translate:calc(var(--mx,0) * 10px) calc(var(--my,0) * 10px)}

  /* armed until the intro is over (body.-once; the hero itself gets -once earlier, hence the descendant form) */
  .o-homeHero_sign .vana-pen path{stroke-dashoffset:var(--len)}

  .-once .o-homeHero .o-homeHero_sign .vana-pen path{
    animation:vana-pen calc(var(--dur) * 1s) var(--v-pen) calc(.7s + var(--d) * 1s) both;
  }
}

/* reduced motion: final state at once, no pen, no lift-off */
@media (prefers-reduced-motion:reduce){
  .o-homeHero .vana-heroWord .m-logo .a-svg{transform:none!important;transition:none!important}
}

/* HR1: hide the fixed card panels once the manifest is passed, also after instant jumps.
   html.-vanaPastManifest (js/40_hero.js) mirrors body.-postManifest; same four rules as the bundle CSS. */
@media only screen and (min-width:961px){
  .-vanaPastManifest .o-homeHero .m-fixedPanel,
  .-vanaPastManifest .o-homeAgency .m-fixedPanel_wrapper,
  .-vanaPastManifest .o-homeTeam .m-fixedPanel_wrapper,
  .-vanaPastManifest .o-homeProjects .m-fixedPanel_wrapper{display:none}
}

/* The page never paints its own base colour: before the first section "enter" the colour layer is
   transparent and the hero shows the browser canvas. That is white in normal browsers but dark in some
   embedded / forced-dark views. Paint the hero's own colour (data-color white = Blush) instead. */
html{background-color:#e3d9d8}

/* ==== 50_footer.css ==== */
/* ==== Footer ====
   The big »Social by Vana« logo with its sign-off and the heart wipe are gone (feedback 2026-10-29, item 10).
   The footer page is Sand: small text there in the deeper green (green on Sand is only 4 : 1). */
.o-footer{color:var(--v-green2)}
.o-footer .o-footer_wrapper{padding-top:4rem}

/* ---- tap targets on phones / tablets (<= 960 px): >= 44x44 px hit areas, same look ----
   The legal row is a column there: copyright, Instagram icon (20x20), links (12 px tall), 1.5rem apart.
   Icon and links are only ~31 px apart (centre to centre), so two centred 44 px boxes would overlap: the
   icon's box grows mostly upwards (towards the non-interactive copyright line), the links' box mostly
   downwards; they meet without overlapping. The links are >= 56 px wide; their boxes grow 6 px sideways
   (1.5rem gap between them). */
@media (max-width:960px){
  .o-footer .m-socials_item{position:relative}
  .o-footer .m-socials_item::after{content:"";position:absolute;left:50%;bottom:-5px;width:44px;height:44px;margin-left:-22px}
  .o-footer_links a{position:relative}
  .o-footer_links a::after{content:"";position:absolute;left:-6px;right:-6px;top:-9px;height:44px}
}

/* ==== 60_social.css ==== */
/* ==== Social micro-animations: chat bubbles, section titles (spec §5.6–§5.9). No likes, no hearts (2026-10-30) ==== */

/* ---------------------------------------------------------------- chat bubbles ("tippt … und sendet") */
.a-chatBubble_msg{white-space:pre}
.a-chatBubble_msg i{display:inline-block;font-style:normal}
.a-chatBubble_typing{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:.16em;color:var(--v-pink);pointer-events:none}
.a-chatBubble_typing i{display:block;width:.24em;height:.24em;border-radius:50%;background:currentColor;font-style:normal}
@keyframes vana-chat-dot{0%,100%{transform:translateY(0);opacity:.55}40%{transform:translateY(-.22em);opacity:1}70%{transform:translateY(.03em)}}
/* hero bubbles start once the cards have flown in */
.o-homeHero .a-chatBubble.-vana{--cs:.7s}
.o-homeHero_card:nth-child(2) .a-chatBubble.-vana{--cs:.95s}
.o-homeHero_card:nth-child(3) .a-chatBubble.-vana{--cs:1.2s}
@media (prefers-reduced-motion:no-preference){
  .a-chatBubble.-vana .a-chatBubble_typing{display:flex}
  .a-chatBubble.-vana .a-chatBubble_msg i{transform:scale(0)}
  /* show: pop with overshoot (what arrives pops) */
  :is(.o-homeTeam,.o-homeProjects,.o-homeExpertises,.o-homeProcess,.o-homeFaq).is-inview .a-chatBubble.-vana{transition-duration:.45s;transition-timing-function:var(--v-pop)}
  .-once .o-homeHero.-active .a-chatBubble.-vana{transition:transform .45s var(--v-pop) .1s}
  :is(.o-homeTeam,.o-homeProjects,.o-homeExpertises,.o-homeProcess,.o-homeFaq).is-inview .a-chatBubble.-vana .a-chatBubble_typing i,
  .-once .o-homeHero.-active .a-chatBubble.-vana .a-chatBubble_typing i{animation:vana-chat-dot .45s var(--v-pen) calc(var(--cs,0s) + .35s + var(--i)*.1s) 2 both}
  :is(.o-homeTeam,.o-homeProjects,.o-homeExpertises,.o-homeProcess,.o-homeFaq).is-inview .a-chatBubble.-vana .a-chatBubble_typing,
  .-once .o-homeHero.-active .a-chatBubble.-vana .a-chatBubble_typing{animation:vana-out .15s var(--v-ui) calc(var(--cs,0s) + 1.3s) both}
  :is(.o-homeTeam,.o-homeProjects,.o-homeExpertises,.o-homeProcess,.o-homeFaq).is-inview .a-chatBubble.-vana .a-chatBubble_msg i,
  .-once .o-homeHero.-active .a-chatBubble.-vana .a-chatBubble_msg i{animation:vana-emoji .32s var(--v-pop) calc(var(--cs,0s) + 1.36s + var(--i)*75ms) both}
}

/* ---------------------------------------------------------------- project cards: no text selection / no double-tap zoom while swiping */
.m-projectCard_cover,.m-projectCard_invisibleNav{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.m-projectCard{touch-action:manipulation}

/* ---------------------------------------------------------------- section titles: lines + signature swash */
/* Room for the decoration, inside the title's own box (no collision with what follows, no overflow):
   - below: the swash hangs .27em under the last line -> the h2 reserves .2em (the swash's drawn stroke
     sits ~.05em inside its box). Specificity beats the bundle's ".o-homeExpertises_left .tx-lg{padding:..}".
   - right: the swash runs .16em past the word; a .16em right margin of the swashed word keeps it inside the
     column (no heart at its end any more since 2026-10-30, so the .42em for it are gone).
   - safety net on phones/tablets (<1024): horizontal overflow of the h2 is clipped (overflow-y stays
     visible). min-width:min-content lets the box grow around a word that is wider than the column
     instead of cutting its letters (it only differs from the default when something would overflow).
     Not on desktop: there some h2s are narrower than their longest word on purpose (1024: "REIHENFOLGE."). */
h2.vana-title.vana-title{padding-bottom:.2em}
@media (max-width:1023px){h2.vana-title.vana-title{overflow-x:clip;min-width:min-content}}
/* the clip opens .12em under the word box: Beni's comma descends ~.096em under the baseline, ~.08em under the
   box ("Social Media,": the old .08em clip shaved it). The hidden words (translateY(125%), below) keep their
   cap tops >= .2em under the box, so nothing of them shows in the deeper clip before their entrance. */
.vana-title .vana-w{display:inline-block;clip-path:inset(-.25em -.4em -.12em -.4em)}
.vana-title .vana-w_in{display:inline-block;transform-origin:0 100%}
.vana-title .vana-w.-uml{padding-top:.12em}
.vana-title .vana-sw{position:relative;display:inline-block;margin-right:.16em}
.vana-title .vana-sw::after{content:"";position:absolute;left:0;right:-.16em;bottom:-.27em;height:.3em;background:var(--v-swash,currentColor);
  -webkit-mask:url(/assets/vana/social/swash.svg) 0 0/100% 100% no-repeat;mask:url(/assets/vana/social/swash.svg) 0 0/100% 100% no-repeat;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  html.-vanaTitles .vana-title .vana-w_in{transform:translateY(125%) rotate(7deg)}
  /* umlaut words: the dots sit in the .12em padding above the inner box, so 125% of the inner box left
     them only ~.07em under the word box (they peeked into the clip): they travel the padding further */
  html.-vanaTitles .vana-title:not(.-vanaIn) .vana-w.-uml .vana-w_in{transform:translateY(calc(125% + .12em)) rotate(7deg)}
  html.-vanaTitles .vana-title.-vanaIn .vana-w_in{transform:none;transition:transform .9s var(--v-out) calc(var(--i)*80ms)}
  html.-vanaTitles .vana-title .vana-sw::after{clip-path:inset(-20% 100% -20% 0)}
  html.-vanaTitles .vana-title.-vanaIn .vana-sw::after{clip-path:inset(-20% 0 -20% 0);transition:clip-path .7s var(--v-pen) calc(.45s + var(--i,0)*80ms)}
}
@media (max-width:960px) and (prefers-reduced-motion:no-preference){
  /* <br> is hidden here for some titles: stagger by word instead of source line */
  html.-vanaTitles .vana-title.-vanaIn .vana-w_in{transition-delay:calc(var(--w)*45ms)}
}

/* ---------------------------------------------------------------- reduced motion: everything in its end state */
@media (prefers-reduced-motion:reduce){
  .a-chatBubble,.a-chatBubble:before,.a-chatBubble:after{transition-duration:.01ms!important}
  .a-chatBubble_typing{display:none!important}
}

/* ==== 90_extras.css ==== */
/* Social by Vana – extras: menu (§5.10), cursor (§5.12), contact popin shapes. No hearts since 2026-10-30.
   Note: the TROA state classes (-isMenuOpen, -once, -white …) live on <body>, so selectors start
   with the class only (works for html or body). */

/* ================================================================ menu */
/* Right panel: mirrored instead of rotated 180°, so the gap between the two Didone wedges is a
   V counter (serifs on top, apex near the bottom) that closes while the panels slide in. */
.o-menu .a-svg.-s-menu.-right{transform-origin:50% 50%;transform:translateX(50%) scaleX(0)}
.-isMenuOpen .o-menu .a-svg.-s-menu.-right{transform:translateX(1%) scaleX(-1)}

/* VK outline that draws itself in the left panel */
.o-menu_leftWrapper{position:relative}
.o-menu_menu,.o-menu_leftBottom{position:relative;z-index:1}
.o-menu_mono{position:absolute;right:3rem;bottom:4.6rem;z-index:0;display:block;
  width:min(34rem,calc(100% - 6rem),calc((100vh - 64rem) * 1.5));height:auto;aspect-ratio:1112/742;
  overflow:visible;pointer-events:none}
.o-menu_mono *{transform-box:fill-box;transform-origin:center}
.o-menu_mono .-v,.o-menu_mono .-k{fill:none;stroke:var(--v-pink2);stroke-opacity:.6;stroke-width:var(--sw,5);
  stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
@media (max-width:767px),(max-height:620px){.o-menu_mono{display:none}}

/* items: reveal from a bit lower (room for the swash below the line box), own nudge transition */
.o-menu .o-menu_item{padding-bottom:2.6rem;margin-bottom:-2.6rem}   /* li font-size is 1rem: use rem (≈ .32em of .tx-menu) */
@media (min-width:2001px){.o-menu .o-menu_item{padding-bottom:3.9rem;margin-bottom:-3.9rem}}
/* and above it: Beni's Ü dots reach .78em over the baseline, the .7 line box only .69em, so the li's
   overflow:hidden cut »ÜBER MICH« down to a flat bar (≈ .16em of .tx-menu) */
.o-menu .o-menu_item{padding-top:1.3rem;margin-top:-1.3rem}
@media (min-width:2001px){.o-menu .o-menu_item{padding-top:1.95rem;margin-top:-1.95rem}}
/* and to the right: room for the 8 px hover / focus nudge */
.o-menu .o-menu_item{padding-right:2rem;margin-right:-2rem}
/* closed: 200 % (was 175 %), so the Ü dots of »ÜBER MICH«, which sit above the line box, are below the li's
   bottom edge too while the .4 s opacity fade is still running (a 2-3 px sliver flashed on close) */
.o-menu .o-menu_item a{position:relative;transform:translateY(200%);
  transition:transform .2s var(--v-ui),opacity .4s var(--v-ui),translate .35s var(--v-pop)}
.-isMenuOpen .o-menu .o-menu_item a{transform:translateY(0);
  transition:transform .8s var(--v-panel) var(--delay,0ms),opacity .8s var(--v-ui),translate .35s var(--v-pop)}
/* handwriting swash (hidden until hover / keyboard focus; no heart since 2026-10-30) */
.o-menu .o-menu_item a::after{content:"";position:absolute;left:-.03em;right:-.04em;bottom:-.24em;height:.26em;
  background:var(--v-pink2);pointer-events:none;
  -webkit-mask:url(/assets/vana/extras/swash.svg) 0 0/100% 100% no-repeat;mask:url(/assets/vana/extras/swash.svg) 0 0/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);opacity:0}
.o-menu .o-menu_item a:focus-visible::after{clip-path:inset(0);opacity:1}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .o-menu .o-menu_item a:hover::after{clip-path:inset(0);opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  .o-menu .o-menu_item a::after{transition:clip-path 0s linear .25s,opacity .2s var(--v-ui)}
  .o-menu .o-menu_item a:focus-visible::after{transition:clip-path .32s var(--v-pen),opacity .05s}
  .o-menu .o-menu_item a:focus-visible{translate:8px 0}
}
@media (hover:hover) and (pointer:fine) and (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .o-menu .o-menu_item a:hover::after{transition:clip-path .32s var(--v-pen),opacity .05s}
  .o-menu .o-menu_item a:hover{translate:8px 0}
}

/* menu button: on hover the 3 lines collapse into ••• that type (fine pointer only) */
.vana-burger{overflow:visible}
.vana-burger *{transform-box:fill-box;transform-origin:center}
.vana-burger .-d{transform:scale(0)}
@keyframes xv-type{0%,56%,100%{translate:0 0}28%{translate:0 -2.4px}}
@media (hover:hover) and (pointer:fine) and (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .vana-burger .-l{transition:transform .22s var(--v-ui),opacity .18s var(--v-ui)}
  .vana-burger .-d{transition:transform .2s var(--v-ui)}
  .o-header_menuButton:hover .vana-burger .-l{transform:scaleX(0);opacity:0}
  .o-header_menuButton:hover .vana-burger .-d{transform:none;transition:transform .3s var(--v-pop) calc(.08s + var(--i) * 45ms);
    animation:xv-type .9s ease-in-out calc(.35s + var(--i) * .12s) infinite}
}

/* narrow desktops (961-~1300 px, or tall windows): the two wedges are height-driven (305/923 of the
   viewport height) and pushed the right card off the right edge (Foudre's original did the same).
   Cap their width so menu + card always fit; the symbol has preserveAspectRatio=none, so the V just
   gets steeper. No effect at 1440x900 / 1920x1080. */
@media (min-width:961px){.o-menu .a-svg.-s-menu{max-width:max(11rem,calc(50vw - 36rem))}}

@keyframes xv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:no-preference){
  /* the outline writes itself: V, then K */
  .-isMenuOpen .o-menu_mono .-v{animation:xv-draw 1.2s var(--v-pen) .3s both}
  .-isMenuOpen .o-menu_mono .-k{animation:xv-draw 1.2s var(--v-pen) .45s both}
}

/* ================================================================ contact popin: V wedge + K wedge */
@media (prefers-reduced-motion:no-preference){
  .m-contactForm.-isOpen .a-svg.-shape-left,.m-contactForm.-isOpen .a-svg.-shape-right{transition:transform .55s var(--v-pop) .06s}
}

/* ================================================================ custom cursor (JS creates it) */
.vana-cursor{position:fixed;left:0;top:0;z-index:9990;pointer-events:none;will-change:transform;color:var(--v-pink);
  transition:opacity .2s var(--v-ui)}
.vana-cursor.-off{opacity:0}
/* static markup: only fine pointers without reduced motion get the cursor (same test as VANA.FINE / RM) */
@media (hover:none),(pointer:coarse),(pointer:none),(prefers-reduced-motion:reduce){.vana-cursor{display:none}}
.-white .vana-cursor{color:var(--v-cream)}
.vana-cursor_dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 1.5px var(--v-cream);transition:transform .25s var(--v-pop)}
.-white .vana-cursor_dot{box-shadow:0 0 0 1.5px var(--v-pink)}
/* -ring: over anything clickable the dot shrinks into a small ring (no speech bubble since 2026-10-30) */
.vana-cursor::before{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;box-sizing:border-box;
  border:2px solid currentColor;border-radius:50%;box-shadow:0 0 0 1.5px var(--v-cream),inset 0 0 0 1.5px var(--v-cream);
  transform:scale(.3);opacity:0;transition:transform .25s var(--v-pop),opacity .15s var(--v-ui)}
.-white .vana-cursor::before{box-shadow:0 0 0 1.5px var(--v-pink),inset 0 0 0 1.5px var(--v-pink)}
.vana-cursor.-ring::before{transform:none;opacity:1}
.vana-cursor.-ring .vana-cursor_dot{transform:scale(.5)}
.vana-cursor.-ring.-down::before{transform:scale(.78)}
.vana-cursor.-down .vana-cursor_dot{transform:scale(.6)}

/* ================================================================ reduced motion */
@media (prefers-reduced-motion:reduce){
  .vana-cursor{display:none!important}
  .o-menu_overlay,.o-menu_leftPanel,.o-menu_rightPanel,.o-menu .a-svg.-s-menu,.o-menu_menu,.o-menu .m-whatsappCard,
  .o-menu .m-socials_icon{transition-duration:.2s!important}
  .o-menu .o-menu_item a,.-isMenuOpen .o-menu .o-menu_item a{transition-duration:.2s!important;transition-delay:0s!important}
  .m-contactForm .a-svg.-shape-left,.m-contactForm .a-svg.-shape-right{transition-duration:.2s!important}
}
/* menu: the global focus outline is the menu's own green; make it cream there (the text links keep
   their swash focus style instead of a box) */
.o-menu :focus-visible{outline-color:var(--v-cream)}
.o-menu .o-menu_item a:focus-visible{outline:none}

/* ==== 91_content_hero.css ==== */
/* 91 · hero + agency content (markup: sections/91_content_hero.py) */

/* hero: Vana's light studio portraits sit on the light page colour; a soft shadow keeps the card edges */
.o-homeHero_card .a-image{box-shadow:0 1.6rem 3.6rem -1.6rem rgba(19,19,19,.3)}

/* ---- hero claim »Professionell. / Persönlich. / Bezahlbar.«, price line and button (feedback 2026-10-29) ----
   »Professionell.« is the widest line (about 4.75em in Beni). Phones: one line each in the 22-column box.
   Desktop: line 1 ends about at the centre card's left edge (the card sits from ~.334 x width + 16 px). */
.o-homeHero_content .vana-heroBig{line-height:.78}
@media only screen and (max-width:960px){
  .o-homeHero_content .vana-heroBig{font-size:min(7.2rem,16.2vw)}
}
@media only screen and (min-width:961px){
  .o-homeHero_content .vana-heroBig{font-size:clamp(4.6rem,min(5vw,7.6vh),8.4rem)}
  /* the claim block (3 lines + price line + button) is taller than the old 2 lines: the side photos are a bit
     smaller and the left one sits higher, so the block below it stays clear of the photo */
  .o-homeHero_card:nth-child(2){translate:0 -16%}   /* the card box moves (with its chat bubble); transform stays the bundle's */
  .o-homeHero_card:nth-child(2) .a-image{transform:scale(.64)}
  .o-homeHero_card:nth-child(3) .a-image{transform:scale(.68)}
  /* the price line ends before the centre photo (its left edge: 50vw - (33vw - 3rem) / 2) */
  .o-homeHero .o-homeHero_content .vana-heroLead{max-width:min(42rem,calc(33.5vw - 3.5rem))}
}
/* short laptop screens (1024 x 768, 1280 x 720 ...): the block is relatively taller, the left photo goes higher */
@media only screen and (min-width:961px) and (max-height:820px){
  .o-homeHero_card:nth-child(2){translate:0 -25%}
  .o-homeHero_card:nth-child(2) .a-image{transform:scale(.57)}
}

/* phones and tablets: the photo stack is sized by the screen height, so eyebrow, claim, price line and button
   fit on the first screen under the wordmark (390 x 844: card about 42 % of the height; 768 x 1024: half) */
@media only screen and (max-width:960px){
  .o-homeHero .m-fixedPanel{--hero-h:clamp(17rem,calc(100svh - 40rem),50svh);width:min(100%,calc(var(--hero-h) * 45 / 68));
    margin-left:auto;margin-right:auto}
  .o-homeHero_content{text-align:center;align-items:center}
  .o-homeHero_content .vana-heroLead{margin-left:auto;margin-right:auto}
  .o-homeHero_content .vana-ctaRow{justify-content:center;margin-top:1.8rem}
  /* no loader any more: the cards come in quickly and fade, instead of sliding up through the claim for 2 s */
  .o-homeHero_card{opacity:0;transform:translateY(10%);transition:transform 1s var(--v-out),opacity .6s var(--v-ui)}
  .-once .o-homeHero .o-homeHero_card{opacity:1}
}
/* tablets: the wider text block is taller in lines, so the photo stack a bit smaller (button above the fold at 768 x 1024) */
@media only screen and (min-width:600px) and (max-width:960px){.o-homeHero .m-fixedPanel{--hero-h:clamp(17rem,calc(100svh - 46rem),40svh)}}
@media (prefers-reduced-motion:reduce){
  .o-homeHero_card,.o-homeHero_card .a-image{transition:none!important}
  .o-homeAgency .m-fixedPanel_inner{transition-duration:.01ms!important;transition-delay:0s!important}
}
/* »Bezahlbar.« stays green: the template turns the hero's em into the page colour while the hero is not active
   (pink on cream before), which showed it as a light word on the Sand questions page */
.o-homeHero .o-homeHero_content .vana-heroBig em{color:var(--v-green)}
.o-homeHero_content .vana-heroLead{max-width:42rem;margin-top:2rem;color:var(--v-green2);text-wrap:pretty}
.o-homeHero_content .vana-ctaRow{justify-content:flex-start;margin-top:2.4rem}
/* »PERSÖNLICH.« sits under »PROFESSIONELL.« in the tight display leading: room for its Ö dots */
.vana-agUml{display:inline-block;padding-top:.12em}

/* ---- the three questions (agency section #agence, item 3) ----
   Clash Grotesk, the words slide in like the section titles (.vana-title, css/60_social.css). Phones: centred
   above the photo, answer + button below it. Desktop: questions left, photo in the fixed centre panel,
   answer + button right. */
.o-homeAgency .vana-q_list{display:flex;flex-direction:column;gap:2.2rem;margin:0;padding:0;list-style:none}
.o-homeAgency .vana-q_item{font:700 2.4rem/1.18 "Clash Grotesk",sans-serif;color:var(--v-green);text-wrap:balance}
.o-homeAgency .vana-qAnswer .tx-pxl{max-width:40rem;margin:0 auto;color:var(--v-green2);text-wrap:pretty}
@media only screen and (min-width:961px){
  .o-homeAgency .vana-q_item{font-size:min(3.2rem,2.25vw)}
  .o-homeAgency .vana-qAnswer .tx-pxl{margin:0}
  .o-homeAgency .vana-qAnswer .vana-ctaRow{justify-content:flex-start;margin-top:2.4rem}
}
/* the photo in the fixed panel (where the showreel was): same card as the team photo */
.vana-qPhoto{overflow:hidden;border-radius:2rem;background:var(--v-taupe);box-shadow:0 1.6rem 3.6rem -1.6rem rgba(19,19,19,.3)}
.vana-qPhoto .a-image,.vana-qPhoto picture{display:block;width:100%;height:100%}
.vana-qPhoto img{display:block;width:100%;height:100%;object-fit:cover}

/* hero text over the cards: the cards sit in the bundle's fixed panel (m-fixedPanel_wrapper, z-index 4),
   so the left card cut off "Social-Media-Agentur" (…Agentu at 1440) and touched "HUMAN". The text goes
   above that panel while the hero is the only section on screen; once the questions come in, the old order
   is back (their panel slides in over the hero). The eyebrow was the bundle's light gray (about 1.4:1);
   it is Vana's green now. */
.o-homeHero_content{position:relative}
.o-homeHero.-active:not(:has(~ .o-homeAgency.is-inview)) .o-homeHero_content{z-index:5}
.o-homeHero_content h1{color:var(--v-green2)}   /* deep green: it also sits on the Sand of the questions on phones */

/* ==== 92_content_team.css ==== */
/* 92 · »Hi, ich bin Vana« (markup: sections/92_content_team.py). Since 2026-10-29 (feedback item 5): one photo,
   no emoji pin, no popin, no pink hearts; below the text the first-call button and her Instagram. */

.o-homeTeam_left em{color:var(--v-green)}
/* the template hid title and text outside the view in the page colour; on phones that was Blush on the Sand of
   the questions above. They stay green there (the words still slide in, css/60_social.css) ... */
.o-homeTeam:not(.is-inview) .o-homeTeam_right,.o-homeTeam:not(.is-inview) .tx-lg{color:var(--v-green)}
/* ... but Blush once the dark projects page has come (body.-white), as in the template */
.-white .o-homeTeam:not(.is-inview) .o-homeTeam_right,.-white .o-homeTeam:not(.is-inview) .tx-lg{color:var(--v-blush)}

/* button + Instagram in one row under the text (centred on phones, left from 961 px) */
.o-homeTeam .vana-teamActions{gap:1.2rem 1.6rem;margin-top:3rem}
@media only screen and (min-width:961px){.o-homeTeam .vana-teamActions{justify-content:flex-start}}

/* Instagram link: icon, »Vana auf Instagram / @callme.vana«, arrow (it was a card in the popin) */
.vana-teamInsta{display:inline-flex;flex-flow:row nowrap;gap:1rem;align-items:center;max-width:26rem;padding:1rem 1.4rem;
  border-radius:1rem;color:var(--v-green);text-decoration:none;transition:transform .3s var(--v-pop)}
.vana-teamInsta_icon{flex:none;width:2.2rem;height:2.2rem}
.vana-teamInsta_text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;text-align:left;line-height:1.15}
.vana-teamInsta_kicker{font-size:1rem}
.vana-teamInsta_handle{overflow:hidden;font-size:1.4rem;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.vana-teamInsta_arrow{flex:none;width:1.2rem;height:1.2rem;transition:transform .3s var(--v-pop)}
.vana-teamInsta:focus-visible{outline:2px solid var(--v-green);outline-offset:3px}
.vana-teamInsta:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .vana-teamInsta:hover{transform:scale(1.04)}
  .vana-teamInsta:hover .vana-teamInsta_arrow{transform:translate(.2rem,-.2rem)}
}

/* reduced motion: the photo panel takes its end state at once */
@media (prefers-reduced-motion:reduce){
  .o-homeTeam .m-fixedPanel_inner,.o-homeTeam .o-homeTeam_card,
  .vana-teamInsta,.vana-teamInsta_arrow{transition-duration:.01ms!important;transition-delay:0s!important}
}

/* ==== 93_content_projects.css ==== */
/* Projects (93): reel loop slide, title legibility, Instagram thumb, "Reel ansehen" overlay.
   Markup: sections/93_content_projects.py, behaviour: js/93_content_projects.js */

/* ---- reel slide: the muted loop sits over the lazy still (same crop: cover, aligned to the frame's top,
   so faces sit below the card title; the still is cut the same way in sections/93). Portal media: medien.css sets
   object-position from the place's focus point (!important), so the loop's focus belongs at 50 % / 0 % */
.vana-reelSlide .vana-reelLoop{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;
  opacity:0;transition:opacity .35s var(--v-ui);pointer-events:none;background:transparent}
.vana-reelSlide.-vanaPlaying .vana-reelLoop{opacity:1}
@media (prefers-reduced-motion:reduce){.vana-reelSlide .vana-reelLoop{display:none}}

/* two soft shades, z-index -1 like the covers, later in the DOM = painted over them, under the content:
   top: light frames (sky, white walls) under the white card title + story bars;
   bottom: the reels' burnt-in captions sit right under the action row (play / like / tags) */
.o-homeProjects .m-projectCard::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.3) 26%,rgba(0,0,0,0) 46%),
    linear-gradient(0deg,rgba(0,0,0,.58),rgba(0,0,0,.3) 15%,rgba(0,0,0,0) 34%)}
/* the cream title over the light frames of Ästhetik (grey wall) and Brautmode (white dresses): a soft
   dark halo on top of the stronger shade */
.o-homeProjects .m-projectCard_title{text-shadow:0 .1rem .3rem rgba(0,0,0,.35),0 .2rem 2rem rgba(0,0,0,.35)}

/* card titles: one long word ("HOCHSCHULE") cannot wrap, so the size follows the card's width
   (container = the card's content box). The caps keep the bundle's sizes: 40px phones, 80px desktop */
.o-homeProjects .m-projectCard{container-type:inline-size}
.o-homeProjects .m-projectCard_title{font-size:min(4rem,25cqi)}
@media (min-width:961px){.o-homeProjects .m-projectCard_title{font-size:min(8rem,25cqi)}}

/* play icon: optical centre of the triangle */
.vana-reelBtn .a-svg.-play{transform:translateX(.12rem)}

/* card play button: a ring that shows on light and dark video (cream ring + dark halo) */
.o-homeProjects .m-projectCard_actionsButton:focus-visible{outline:2px solid var(--v-cream);outline-offset:2px;
  box-shadow:0 0 0 .6rem rgba(0,0,0,.5)}
/* phones: the button is 30 px; a transparent 44 px hit area */
@media (max-width:960px){
  .o-homeProjects .m-projectCard_actionsButton{position:relative}
  .o-homeProjects .m-projectCard_actionsButton::before{content:"";position:absolute;top:-.7rem;bottom:-.7rem;
    left:-.25rem;right:-.25rem;border-radius:1rem}
  .o-homeProjects .m-projectCard_actionsButton.-more::before{left:-1.15rem}
}

/* card head (title + client line): the bundle's data-project-card=title sits on the wrapper .vana-cardHead, so
   ProjectCard's --center-y (title centred while the card is not active) is set there and inherited; the h3
   keeps its own transform rule and the client line moves with it */
.o-homeProjects .vana-cardHead{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.o-homeProjects .vana-cardHead .m-projectCard_title{margin:0}
.o-homeProjects .vana-client{margin:0;max-width:100%;font-family:"Clash Grotesk",sans-serif;font-weight:600;
  font-size:clamp(1.2rem,5.6cqi,1.7rem);line-height:1.15;letter-spacing:.01em;color:var(--v-cream);
  text-shadow:0 .1rem .3rem rgba(0,0,0,.45),0 0 1.2rem rgba(0,0,0,.35);
  transition:transform .8s cubic-bezier(.86,0,.07,1);transform:translateY(var(--center-y,0))}
.-active .m-projectCard .vana-client{transform:translateY(0)}
@media (min-width:961px){.o-homeProjects .vana-client{font-size:clamp(1.4rem,4.8cqi,2.2rem)}}

/* heading »Einblicke in / ausgewählte / Projekte«: its first line is full width, so on desktop the chat bubble
   (bundle: top 0, right -2 %, where the short »WIR« left room) sits just above the heading instead */
@media (min-width:961px){.o-homeProjects_bubbleWrapper{top:auto;bottom:100%;margin-bottom:-.2rem}}
/* desktop: »AUSGEWÄHLTE« is 4 em wide (old longest line »MACHEN SIE« 3.5 em); at 94 px it ran 55 px under the
   cards at 1024. The left column is ~(100vw - 6rem) / 3: below ~1270 px the heading shrinks with it */
@media (min-width:961px){#projekte h2.vana-title{font-size:min(9.4rem,7.4vw)}}
/* phones: the bundle hides the <br>s here and the heading wraps by itself; »EINBLICKE IN AUSGEWÄHLTE« needs
   ~490 px, so below 600 px it took 3 lines (old »WIR MACHEN SIE / SOZIAL«: 2) and pushed the card's play /
   like row under the fixed bottom bar (390 x 844). There it reads »Ausgewählte / Projekte« (2 lines). */
@media (max-width:599px){#projekte .vana-title > .vana-w:nth-of-type(-n+2){display:none}}

/* last card »Meine Kunden« (was »Ausgewählte Kunden«, which sat right under »Ausgewählte Projekte« on phones):
   her client logos on Blush tiles (baked into the images, sections/93) + the Instagram pill. The card is the
   size container, so title, grid and gaps scale with it from the 267 px phone card to the 450 px desktop card
   (its maximum, 2560 x 1440). The card itself keeps the bundle's entrance (on its <li>). */
.o-homeProjects_moreCard.vana-clientsCard{container-type:inline-size;padding:0;gap:0}
.vana-clientsCard_in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5.5cqi;
  width:100%;height:100%;padding:7cqi}
.vana-clientsCard h3{margin:0;font-size:min(8rem,18cqi);line-height:.86}
.vana-clients{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2.8cqi;width:100%;margin:0;padding:0;
  list-style:none}
/* three per row (each spans 2 of 6 columns); a last row of two is centred (8 logos since 2026-10-30) */
.vana-clients_item{display:block;margin:0;padding:0;grid-column:span 2}
.vana-clients_item:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
.vana-clients_item picture{display:block}
/* portal places »ganz zeigen« (contain): the tile colour is the <img>'s own background, the logo sits on it whole */
.vana-clients img{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:2.2cqi;background:var(--v-cream);
  box-shadow:0 .1rem .4rem rgba(0,40,20,.18)}
/* palette 2026-10-29: the card is Taupe with the green title and a green Instagram button (it sits on a dark Sage page) */
.o-homeProjects_moreCard.vana-clientsCard{background-color:var(--v-taupe)}
.o-homeProjects_moreCard .vana-moreBtn:focus-visible{outline:2px solid var(--v-green);outline-offset:3px}

@media (max-width:960px){
  /* the slider scrolls sideways only: while the cards slide in they are briefly taller than it, and a
     vertical swipe that started on a card then scrolled the slider instead of the page */
  .o-homeProjects_slider{overflow-y:hidden}
}

/* header thumbnails: figure and picture fill the circle, so a swapped photo of another format is cropped, not squeezed in */
.o-homeProjects_thumbnail .a-image,.o-homeProjects_thumbnail picture{height:100%}
/* header thumbnails: the old "+2" counter is now a small Instagram link */
.o-homeProjects_thumbnail.vana-igThumb{color:var(--v-green)}
.o-homeProjects_thumbnail.vana-igThumb .a-svg{width:42%;height:42%;fill:currentColor}
.o-homeProjects_thumbnail.vana-igThumb:focus-visible,.o-homeProjects_thumbnail:focus-visible{outline:2px solid var(--v-cream);outline-offset:2px}

/* ---- overlay */
html.-vanaReelOpen{overflow:hidden}
html.-vanaReelOpen .vana-cursor{visibility:hidden}
.vana-reel{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:max(1.6rem,env(safe-area-inset-top)) 1.6rem max(1.6rem,env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transition:opacity .3s var(--v-ui),visibility 0s linear .3s;overscroll-behavior:contain}
.vana-reel[hidden]{display:none}
.vana-reel.-open{opacity:1;visibility:visible;transition:opacity .3s var(--v-ui)}
.vana-reel_backdrop{position:absolute;inset:0;background:rgba(0,48,26,.94);touch-action:none;cursor:pointer}
.vana-reel_box{position:relative;display:flex;flex-direction:column;align-items:center;gap:.8rem;max-width:100%;
  transform:translateY(2rem) scale(.94);transition:transform .5s var(--v-pop)}
.vana-reel.-open .vana-reel_box{transform:none}
.vana-reel_kicker{margin:0;color:var(--v-pink2);font-family:Clash Grotesk,sans-serif;font-weight:700;font-size:1.3rem;
  letter-spacing:.02em}
.vana-reel_title{margin:0 0 .6rem;color:var(--v-cream);font-family:Beni,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(3.2rem,4.2vw,5.4rem);line-height:.8;text-align:center}
.vana-reel_frame{--h:min(76vh,76dvh,calc((100vw - 3.2rem) * 16 / 9));height:var(--h);aspect-ratio:var(--reel-ar,9 / 16);
  max-width:calc(100vw - 3.2rem);overflow:hidden;border-radius:2rem;background:#000;box-shadow:0 2rem 6rem rgba(0,0,0,.35)}
.vana-reel_video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.vana-reel_close{position:absolute;top:max(1.6rem,env(safe-area-inset-top));right:1.6rem;z-index:2;display:flex;
  align-items:center;justify-content:center;width:4.6rem;height:4.6rem;border:0;border-radius:50%;background:var(--v-blush);
  color:var(--v-green);cursor:pointer;transition:transform .4s var(--v-pop)}
.vana-reel_close svg{width:1.4rem;height:1.4rem}
.vana-reel_close:hover{transform:scale(1.08)}
.vana-reel_close:active{transform:scale(.9)}
.vana-reel_close:focus-visible{outline:2px solid var(--v-cream);outline-offset:3px}
.vana-reel_video:focus-visible{outline:2px solid var(--v-pink2);outline-offset:-2px}
/* phones: client names are long (»HOCHSCHULE KAISERSLAUTERN« ran into the close button at 320 x 568): the title
   keeps clear of the button's column and wraps; »IMMOBILIENAGENTUR« (one word) still fits at 320 */
@media (max-width:600px){.vana-reel_title{max-width:calc(100vw - 13.6rem);font-size:clamp(2.4rem,8vw,3.2rem);text-wrap:balance}}
@media (min-width:1024px){
  .vana-reel_close{top:3rem;right:3rem}
  .vana-reel_frame{--h:min(78vh,calc(100vh - 16rem))}
}
@media (prefers-reduced-motion:reduce){
  .vana-reel,.vana-reel.-open,.vana-reel_box,.vana-reel_close{transition:none}
  .vana-reel_box{transform:none}
}

/* palette 2026-10-29: the Blush title and client line sit on the video; a soft scrim at the top keeps them
   readable on bright frames (white house, light walls) */
.o-homeProjects .m-projectCard::before{content:"";position:absolute;inset:0 0 auto;height:42%;z-index:1;pointer-events:none;
  border-radius:inherit;background:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,0))}
.o-homeProjects .m-projectCard .vana-cardHead{position:relative;z-index:2}
@media only screen and (max-width:960px){.o-homeProjects:not(.is-inview) .vana-title .vana-w_in{color:var(--v-green)}}

/* ==== 94_content_misc.css ==== */
/* 94 · content: why-card pictograms (markup: sections/94_content_misc.py; card 3 placed by 97c_copy_middle.py)
   + photo focus. Same box, stroke and motion as the kit icons of css/60_social.css: pen draw-on, pop, one beat. */
.vana-whyPic svg{display:block;width:100%;height:auto;aspect-ratio:135/112;overflow:visible}
.vana-whyPic .-pop{transform-box:fill-box;transform-origin:center}
.vana-whyPic .-beat{transform-origin:50% 60%}
@media (prefers-reduced-motion:no-preference){
  html.-vanaWhyPic .vana-whyPic .-draw{stroke-dasharray:1 2;stroke-dashoffset:1.02}
  html.-vanaWhyPic .vana-whyPic .-pop{transform:scale(0)}
  html.-vanaWhyPic .vana-whyPic.-vanaIn .-draw{animation:vana-whyPic-pen var(--t,.7s) var(--v-pen) var(--d,.2s) both}
  html.-vanaWhyPic .vana-whyPic.-vanaIn .-pop{animation:vana-whyPic-pop .42s var(--v-pop) var(--d,.82s) both}
  html.-vanaWhyPic .vana-whyPic.-vanaIn .-beat{animation:vana-whyPic-pop .42s var(--v-pop) var(--d,.82s) both,vana-beat .7s var(--v-ui) calc(var(--d,.82s) + .48s)}
}
@keyframes vana-whyPic-pen{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
@keyframes vana-whyPic-pop{from{transform:scale(0) rotate(-14deg)}to{transform:none}}

/* all four why-card pictograms (1, 2, 4 above; card 3's is set in sections/97c_copy_middle.py) ~1.5x the
   bundle's 8rem box, so icon, title and copy fill the card instead of floating in its upper middle.
   (0,3,0) beats the bundle's .o-homeWhy_card .a-image{width:8rem;height:8rem}; height follows the 135:112 svg.
   Phones / tablets: the card is 240-400 px wide -> 112-120 px. >= 961 px the four cards share one row and
   are ~180 px wide at 1024 (the long "massgeschneidert" widens card 2), so the size follows the viewport:
   84 px at 1024, 118 px at 1440, max 120 px. */
.o-homeWhy_card .a-image.vana-whyPic{width:clamp(8rem,31vw,12rem);height:auto}
@media only screen and (min-width:961px){
  .o-homeWhy_card .a-image.vana-whyPic{width:clamp(8rem,8.2vw,12rem)}
}

/* expertises: on phones the card is wider than the 2:3 photos (177/220): keep heads in frame */
.o-homeExpertises_card .a-image img{object-position:50% 28%}

/* footer photo from 768 px: the box keeps the 2:3 of the photo (the template let the image set its height, so a
   swapped photo of another format would move the contact card) */
@media only screen and (min-width:768px){.o-footer_contactCards .a-image{aspect-ratio:2/3}}

/* footer photo under 768 px. Until 2026-10-31 it had the contact card's box and peeked out only ~30 % at the top
   and left (bundle: rotate(-3deg) translate(-30%,-30%)), the lower part of the 2:3 frame in that ~1:1 box.
   Feedback 2026-11-01 (Vana sits in the middle of her new photo, the card hid her): the photo keeps its 2:3,
   is almost as wide as the card and stands ~62 % of its height above it; the card still overlaps its lower
   right part. The cards get 10rem more room above (mt-giant = 20rem), so the photo stays inside the footer
   (overflow:hidden) and clear of the header. The start position (translate 220 % down) is the bundle's. */
@media only screen and (max-width:767px){
  .o-footer_contactCards .a-image img{object-position:50% 92%}
  .o-footer .o-footer_contactCards{margin-top:30rem}
  .o-footer_contactCards .a-image{width:96%;height:auto;aspect-ratio:2/3}
  .o-footer.-once .a-image{transform:rotate(-3deg) translate(-30%,-62%)}
}

/* why cards: rotated and translated, the last card's corner stood a few px past the right edge (320 px
   phones: page 325 px wide; 962-1010 px: up to 54 px). Clip sideways only (not a scroll container, so the
   sticky cards keep working), and give the 4-column grid narrower gaps on small desktops. */
.o-homeWhy{overflow-x:clip}
@media only screen and (min-width:961px) and (max-width:1100px){
  .o-homeWhy_list{column-gap:1.5rem;padding:0 1.5rem}
}

/* ==== 96_fixes.css ==== */
/* ==== 96 · bundle fixes.  Owner: header + bundle fixes ====
   (the »Projekt des Monats« card and its phone-drawer rules are gone since 2026-10-30) */
/* FAQ questions: a branded ring instead of the browser's thin blue one */
.o-homeFaq summary:focus-visible{outline:2px solid var(--v-green);outline-offset:4px;border-radius:.4rem}

/* ==== 97c_copy_middle.css ==== */
/* 97c · copy of manifest / Leistungen / Ablauf / Vorteile / FAQ (markup: sections/97c_copy_middle.py). Owner: MIDDLE. */

/* FAQ "Wie starte ich?": the e-mail link and the button that opens the contact form read as links */
.o-homeFaq .vana-faqLink{display:inline;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;
  text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.15em;cursor:pointer}
.o-homeFaq .vana-faqLink:hover{text-decoration-thickness:.14em}
.o-homeFaq .vana-faqLink:focus-visible{outline:2px solid var(--v-green);outline-offset:3px;border-radius:.2rem}
/* the answers' lists: a little air between the three entries */
.o-homeFaq .m-textContent .tx-ul .tx-p + .tx-p{margin-top:.5em}
/* phones / tablets: »Formular ausfüllen« (a button that reads as a link, 18 px tall) gets a 44 px hit area
   (::after, centred: 13 px above and below). In »Wie starte ich?« the ways stand 1em apart there (12-13 px
   -> about 21 px between the lines), so that area ends before the e-mail link below. */
@media only screen and (max-width:960px){
  .o-homeFaq .m-textContent .tx-ul.vana-faqWays .tx-p + .tx-p{margin-top:1em}
  .o-homeFaq .vana-faqLink[data-action]{position:relative}
  .o-homeFaq .vana-faqLink[data-action]::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,4.4rem);
    height:4.4rem;transform:translate(-50%,-50%)}
}

/* Leistungen (#expertises), desktop: the heading »Social Media, / das wirklich / wirkt.« is 4.18em wide (its
   first line, Beni). At the bundle's 9.4rem it did not fit the 8-column slot below ~1280 px (311 px at 1024)
   and broke into 5 lines; 7vw keeps »Social Media,« on one line from 961 px (67 px, 282 px in a ~290 px slot)
   and reaches 9.4rem at 1343 px. The 📸💻⚡️ bubble hangs at the heading's right end (bundle: left:100% of the
   title wrapper, bottom:0, translateY(50%)), i.e. over the first line of the intro below; the intro is held
   2rem narrower than the heading, so its first line ends before the bubble at every desktop width. */
@media only screen and (min-width:961px){
  #expertises h2.vana-title{font-size:min(9.4rem,7vw)}
  #expertises .o-homeExpertises_left > p{max-width:calc(min(9.4rem,7vw) * 4.18 - 2rem)}
}
/* phones / tablets: the bubble sat at the top right of the full-width title wrapper, on the end of »MEDIA,«
   (64 x 38 px at 320). It now floats above the heading (its tail dots, 2.4rem below it, point down at the
   title) and near the heading's right end (the title is centred, »Social Media,« = 4.18 x 5.4rem = 226 px): at
   most 17rem right of the centre, never past the wrapper's right edge. */
@media only screen and (max-width:960px){
  .o-homeExpertises .o-homeExpertises_bubbleWrapper{top:auto;bottom:calc(100% + 3.4rem);right:max(0px,50% - 17rem)}
}

/* Ablauf: from 961 px the bundle puts the 🥇💫✨ bubble 32rem right of the title (x 346-486). Below about
   1200 px the card stack starts left of that, so the bubble covered the first words and the big number of
   every card (1024: »Im kostenlosen …«, »01«). There it sits above the title instead, like on phones. */
@media only screen and (min-width:961px) and (max-width:1199px){
  .o-homeProcess .o-homeProcess_bubbleWrapper{left:0;bottom:calc(100% + 2.4rem)}
}
/* short screens there (< ~640 px tall): the title sits higher, so the bubble above it slid under the fixed
   menu button; it is decorative, so it simply goes */
@media only screen and (min-width:961px) and (max-width:1199px) and (max-height:640px){
  .o-homeProcess .o-homeProcess_bubbleWrapper{display:none}
}
/* Ablauf cards on short desktop screens (< 620 px tall, e.g. 1366 x 768 at 125 % with browser bars): the
   template's 45:68 card with max-height 100vh - 20rem got ~200 px wide, so Vana's longer texts wrapped into
   8-13 lines and ran out of the card. There the card takes a fixed width and its content's height, with a
   smaller number and padding. */
@media only screen and (min-width:961px) and (max-height:620px){
  .o-homeProcess .o-homeProcess_card{width:min(36rem,100%);max-height:none;aspect-ratio:auto;gap:1.6rem;padding:2.8rem 3rem}
  .o-homeProcess .o-homeProcess_card .tx-xxl{font-size:min(20.48rem,22vh)}
}

/* ==== Leistungen on desktop: three columns (feedback 2026-10-29, item 8) ====
   The template stacked the three photos in a sticky 100vh column and switched the service on the right while the
   400vh section scrolled by. From 961 px it is one screen now: heading + intro centred, then the three photos in
   a row and under each its service with all chips (photos and services are two 3-column grids of the same
   width, so photo and text line up). The module no longer switches anything there (sections/97c bundle()); the
   bundle's -i1 / -i2 transforms are 0,4,0 rules, hence the !important on the cards. Phones keep the swipe. */
@media only screen and (min-width:961px){
  .o-homeExpertises.row{height:auto;row-gap:0;margin-bottom:14rem}
  .o-homeExpertises .o-homeExpertises_left{grid-column:1/-1;position:static;height:auto;align-items:center;text-align:center;
    margin:0 auto 6rem}
  .o-homeExpertises .o-homeExpertises_left .vana-title{text-align:center}
  #expertises .o-homeExpertises_left > p{margin-left:auto;margin-right:auto}
  .o-homeExpertises .o-homeExpertises_cards,.o-homeExpertises .o-homeExpertises_right,.o-homeExpertises .vana-expCta{
    grid-column:2/-2;width:100%;max-width:132rem;margin-left:auto;margin-right:auto}
  .o-homeExpertises .o-homeExpertises_list,.o-homeExpertises .o-homeExpertises_right{display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem;position:static;height:auto;padding:0}
  .o-homeExpertises .o-homeExpertises_list{max-width:none}
  .o-homeExpertises .o-homeExpertises_list{margin:0}
  .o-homeExpertises .o-homeExpertises_item{position:static;display:block;width:auto;height:auto;z-index:auto}
  .o-homeExpertises .o-homeExpertises_card{transform:none!important;max-height:none;aspect-ratio:4/5;border-radius:2rem}
  .o-homeExpertises .o-homeExpertises_right{margin-top:3rem}
  .o-homeExpertises .o-homeExpertises_expertiseItem{position:static;opacity:1;padding:0;border:0}
  .o-homeExpertises .o-homeExpertises_expertiseItem .tx-sm{padding:0;color:var(--v-green);cursor:default}
  .o-homeExpertises .o-homeExpertises_tagsWrapper{height:auto;min-height:0;overflow:visible}
  .o-homeExpertises .a-tag{opacity:1;transform:none}
}
/* colours on Sage: the active service title and the em of the heading were pink */
.o-homeExpertises_left em,.o-homeExpertises_right em{color:var(--v-green)}
#expertises .o-homeExpertises_left > p{color:var(--v-green2)}
.o-homeExpertises .vana-expCta{margin-top:5rem}
/* Ablauf: the button row under the cards and the side text */
.o-homeProcess .vana-procCta{grid-column:1/-1;margin-top:6rem}

/* palette 2026-10-29: the template's second title tone (pink-2, now Sand) and the FAQ questions (pink-2) were
   Sand on Blush / Taupe (1.5-1.7 : 1). They are green now; the swash under the last word keeps the accent. */
.o-homeFaq.is-inview em,.o-homeProcess em{color:var(--v-green)}
.o-homeFaq .m-accordeon summary{color:var(--v-green2)}
/* the template hid texts outside the view in the page colour (cream on cream). On phones two sections share the
   screen while the page already has the next colour: the FAQ questions were Blush on the Sand footer page. They
   are deep green (5.3 : 1 on Sand); the side text of »Ablauf« is deep green (it also sits on the Sage page of »Leistungen«). */
.o-homeFaq:not(.is-inview) .tx-lg,.o-homeFaq:not(.is-inview) .tx-p,.o-homeFaq:not(.is-inview) .tx-lxl{color:var(--v-green2)}
.o-homeProcess .o-homeProcess_right{color:var(--v-green2)}

/* Leistungen on phones (swipe): the template stacks services 2 and 3 absolutely over service 1, so the list was
   only as tall as »Content Creation« and the button below covered the last chips of the longer services. All
   three share one grid cell now: the list is as tall as the tallest one. */
@media only screen and (max-width:960px){
  .o-homeExpertises .o-homeExpertises_right{display:grid}
  .o-homeExpertises .o-homeExpertises_expertiseItem,.o-homeExpertises .o-homeExpertises_expertiseItem:not(:first-child){
    grid-area:1/1;position:relative;top:auto;left:auto}
  /* Ablauf: the button after the five cards, not between intro and cards */
  .o-homeProcess .vana-procCta{order:99}
}
/* Leistungen paints its own Sage: after a jump past the manifest (anchor, scroll restore) the page colour may
   still be the projects' green until the section is "entered"; the padding keeps the old spacing */
.o-homeExpertises.row{background-color:var(--v-sage);margin-top:0;padding-top:14rem}
/* phones and tablets (feedback 2026-11-01): the manifest no longer fills the screen there. Its full height is only
   needed from 961 px, where it has to cover the fixed card panels (js/40_hero.js); below that the sentence stood
   ~48rem above »Leistungen«, now ~17rem. Most of it is above the title: the 📸💻⚡️ bubble floats there (its box
   ends 3.4rem above the title, ~6.5rem tall with the emojis) and must stay inside »Leistungen«, because the
   manifest (z-index 50, opaque) covers whatever reaches above the section (7rem cut the bubble's top off). */
@media only screen and (max-width:960px){
  .o-homeManifest{min-height:0}
  .o-homeManifest_screen{padding-bottom:4rem}
  .o-homeExpertises.row{padding-top:13rem}
}
/* the fixed section label (bottom left): small text, deep green on the light pages (Blush on dark ones) */
.m-homeLabel{color:var(--v-green2)}
/* FAQ title: the second tone stays green in every state (it was the page colour before the section is in view) */
.o-homeFaq em{color:var(--v-green)}

/* ==== 97d_bg_blend.css ==== */
/* 97d · Page colour blend. Owner: bg blend. JS: js/97d_bg_blend.js, bundle: sections/97d_bg_blend.py.
   The page colour (fixed layer .background) blends instead of cutting. 850 ms, cubic-bezier(.4,0,.2,1): a soft
   start right at the section edge, half way after ~300 ms (keeps up with scrolling), then a long gentle settle
   that reads as a blend. Reduced motion: 300 ms, calm ease-in-out.
   --vana-fg-at: the switch point (fraction of the blend) of the colours that flip with the page: logo, label,
   header buttons (delays here). Their own .4s ui transitions start
   there, so they stay below 2:1 against the page for ~100 ms instead of ~340 ms (light on light). */
:root{--vana-bg-dur:.85s;--vana-bg-ease:cubic-bezier(.4,0,.2,1);--vana-fg-at:.3}
@media (prefers-reduced-motion:reduce){:root{--vana-bg-dur:.3s;--vana-bg-ease:cubic-bezier(.45,0,.55,1)}}

/* opaque from the first paint (the hero's own colour, as html in 40_hero.css): a blend never starts from transparent.
   <html> (the canvas under everything: overscroll, scrollbar gutter) blends along with the layer. */
.background{background-color:#e3d9d8;transition:background-color var(--vana-bg-dur) var(--vana-bg-ease)}
html{transition:background-color var(--vana-bg-dur) var(--vana-bg-ease)}
.background.-vanaBgNow,html.-vanaBgNow{transition:none}

/* while a blend runs (html.-vanaBlend): the colour part of their transitions waits for the switch point.
   Lists follow the existing transition-property lists (logo: color, transform; buttons: transform,
   background-color, color, box-shadow); only the colour delays change. */
html.-vanaBlend .m-homeLabel{transition-delay:calc(var(--vana-bg-dur) * var(--vana-fg-at))}
html.-vanaBlend body:not(.-isMenuOpen) .o-header_logo{transition-delay:calc(var(--vana-bg-dur) * var(--vana-fg-at)),0s}
html.-vanaBlend body:not(.-isMenuOpen) .o-header :is(.a-button.-icon.o-header_menuButton,.o-header_cta){
  transition-delay:0s,calc(var(--vana-bg-dur) * var(--vana-fg-at)),calc(var(--vana-bg-dur) * var(--vana-fg-at)),calc(var(--vana-bg-dur) * var(--vana-fg-at))}

/* ==== 98_copy_contact.css ==== */
/* ==== Contact form + footer copy (98_copy_contact) ==== */
:root{--v-err:#b3123c}

/* ---- contact form (one step, markup sections/98_copy_contact.py) in Foudre's popin: the template's pink sheet
   (.m-contactForm_form: centred column, 90% / max 52rem, scale-in) and its .a-inputField / .a-inputText look */
.m-contactForm .vana-cf{width:100%;min-width:0;margin:0;padding:0;border:0}
/* heading like the template's step legends (Beni .tx-md, two tones). On the pink-3 sheet the template's pink-2
   second line had 1.67:1: line 1 stays pink-1 (3.46:1), line 2 is green (7.76:1). Only this heading. */
.m-contactForm .vana-cfTitle{display:flex;flex-direction:column;align-items:center;margin:0 0 1.6rem;text-wrap:balance}
.m-contactForm .vana-cfTitle em{color:#00522d;font-style:normal}
.m-contactForm .vana-cfTitle:focus{outline:none}      /* focused by script on touch screens (js/90_extras.js) */
.m-contactForm .vana-cfIntro{max-width:42rem;margin:0 auto 2.4rem;color:#00522d;text-wrap:pretty}
.m-contactForm .vana-cfGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;text-align:left}
.m-contactForm .vana-cfGrid .a-inputField__label{justify-content:flex-start;flex-wrap:wrap;gap:0 .4em;line-height:1.15}
@media (max-width:960px){.m-contactForm .vana-cfGrid .a-inputField__label{font-size:max(1.2rem,12px)}}
.m-contactForm .vana-cfOpt{font-weight:500}          /* label colour (green, 7.76:1), normal weight */
/* placeholders: the template's #a5ad9e had 1.53:1 on the white field; a muted grey-green, 4.68:1 on white
   (the typed text is green #00522d, 9.35:1) */
.m-contactForm .vana-cf .a-inputText__input::placeholder{color:#5f7a6b;opacity:1}
.m-contactForm textarea.a-inputText__input{display:block;min-height:12rem;resize:vertical;line-height:1.35}
.m-contactForm .m-contactForm_buttonsGroup{margin-top:2.4rem}
.m-contactForm .vana-cfNote{max-width:42rem;margin:1.6rem auto 0;color:#00522d;font-size:1.3rem;line-height:1.35;text-wrap:pretty}
.m-contactForm .vana-cfNote a,.m-contactForm .vana-formMsg a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.m-contactForm .vana-cfNote a:hover{color:#003d22}
.m-contactForm .vana-cfNote a:focus-visible,.m-contactForm .vana-formMsg a:focus-visible{outline:2px solid #00522d;outline-offset:2px;border-radius:.2rem}
/* sending (js/98: form.-loading, aria-busy; the button is aria-disabled, not disabled, so it keeps the focus):
   the template dims the whole fieldset to .2, focus ring included. Here only the fields and texts are dimmed;
   the focused button (template look of .a-button[aria-disabled=true], with its focus ring) and the status line
   »Deine Anfrage wird gesendet …« ([data-vana-msg].-pending) stay at full strength. Clicks still go nowhere
   (template: fieldset pointer-events none). */
.m-contactForm.-isOpen .vana-cfForm.-loading fieldset{opacity:1!important}
.m-contactForm .vana-cfForm.-loading .vana-cf>:not(.m-contactForm_buttonsGroup,.vana-formMsg){opacity:.3;transition:opacity .2s var(--v-ui)}
.m-contactForm [data-vana-send][aria-disabled="true"]{cursor:progress}
/* desktop: two columns (Name | Unternehmen, E-Mail | Telefon, Nachricht full width) */
@media (min-width:961px){
  .m-contactForm .vana-cfGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.2rem}
  .m-contactForm .vana-cfWide{grid-column:1/-1}
  .m-contactForm .vana-cfTitle{font-size:6.4rem}
  .m-contactForm .m-contactForm_form{max-width:60rem}
}
/* small phones (320-350 px): Beni heading a bit smaller, »SO KANNST DU MIT MIR« stays one line */
@media (max-width:350px){.m-contactForm .vana-cfTitle{font-size:3.4rem}}
/* the close button is fixed (top 3rem, 6rem tall): fields focused by Tab / script never end up under it */
.m-contactForm .m-contactForm_container{scroll-padding:10rem 0 2rem}

/* honeypot: never visible, never in the tab order */
.m-contactForm .vana-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;pointer-events:none}

/* field errors: JS toggles .a-inputField.-error and adds the text (p.vana-fieldError) + aria-invalid */
.m-contactForm .a-inputField.-error .a-inputText__input{border-color:var(--v-err);box-shadow:0 0 0 1px var(--v-err)}
.m-contactForm .a-inputField.-error .a-inputField__label{color:var(--v-err)}
.m-contactForm .vana-fieldError{order:3;margin:.6rem 0 0;color:var(--v-err);font-size:1.4rem;font-weight:700;line-height:1.3;text-align:left}

/* server / network message (429 too fast / too many requests, 500 ...) above the send button; while sending
   the status line in green */
.m-contactForm .vana-formMsg{max-width:44rem;margin:2rem auto 0;color:var(--v-err);font-weight:700;line-height:1.35}
.m-contactForm .vana-formMsg.-pending{color:#00522d;font-weight:500}
.m-contactForm .vana-formMsg:empty{display:none}
.m-contactForm .vana-formMsg:focus{outline:none}   /* focused by script after a server message (role=alert reads it) */

.m-contactForm_successMessage:focus{outline:none}
/* success screen (green since the palette change): its second tone in Taupe (5.8:1, Beni, large text) */
.m-contactForm_successMessage em{color:var(--v-taupe)}

/* the menu's first-call card is green: a Blush focus ring with a gap there (the page ring is green) */
.o-menu .m-whatsappCard :focus-visible{outline-color:var(--v-blush);outline-offset:3px}

/* ---- while the contact form is open (body.-vanaCfOpen, js/90_extras.js): the header menu button and the
   header »Erstgespräch« button stayed visible over the form but were inert behind the dialog. They fade out,
   and are back at once on close (the visibility change is delayed only when hiding), before the focus returns. */
body.-vanaCfOpen .o-header :is(.a-button.-icon.o-header_menuButton,.o-header_cta){
  --scale:.6;visibility:hidden;opacity:0;pointer-events:none;
  transition:transform .3s var(--v-ui),opacity .25s var(--v-ui),visibility 0s linear .3s}
@media (prefers-reduced-motion:reduce){
  body.-vanaCfOpen .o-header :is(.a-button.-icon.o-header_menuButton,.o-header_cta){
    --scale:1;transition:opacity .15s linear,visibility 0s linear .15s}
}

/* footer CTA »Bereit für mehr Sichtbarkeit?« (Beni, line-height .7): »für« gets room on top, otherwise
   the dots of its Ü touch the line above when it starts line 2 (read ».BEREIT«). Same fix as .vana-agUml. */
.o-footer_contactCard .vana-uml{display:inline-block;padding-top:.12em}

/* desktop: the popin's fixed close button (top 3rem, 6rem tall) sat on the heading when the form is taller than
   the free height (1024x768): the form's top padding (6rem) now clears the button */
@media (min-width:961px){.m-contactForm .m-contactForm_form{padding-top:10.5rem}}

/* phones: 44 px hit areas (invisible, centred) for the remaining small buttons: the menu card button,
   »Mehr auf Instagram«, the menu Instagram icon, the footer CTA, the »Erstgespräch« buttons and the form's
   buttons (33 px tall). Same look; the ::after only widens what can be tapped. */
@media only screen and (max-width:960px){
  .o-menu .a-button,.vana-moreBtn,.o-menu .m-socials_item,.vana-cta:not(.o-header_cta),
  .m-contactForm .a-button.-md:not(.m-contactForm_closeButton),.o-footer_contactCard .a-button{position:relative}
  .o-menu .a-button::after,.vana-moreBtn::after,.o-menu .m-socials_item::after,.vana-cta::after,
  .m-contactForm .a-button.-md:not(.m-contactForm_closeButton)::after,.o-footer_contactCard .a-button::after{
    content:"";position:absolute;left:50%;top:50%;width:max(100%,4.4rem);height:max(100%,4.4rem);transform:translate(-50%,-50%)}
}