/* uptrait — Seiten-Stylesheet
   Erzeugt aus dem Design-Artefakt. Nicht von Hand ändern —
   Quelle ist https://claude.ai/artifact/DjgE6oVD9t1ubrHrGR6DhC */

:root{
  --font-display:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Blocksy-Reste neutralisieren: die Seite bringt ihr eigenes Raster mit */
body.up-body{margin:0;padding:0;background:#0A0E12;overflow-x:hidden}
body.up-body #main,body.up-body .ct-container,body.up-body .ct-container-full{max-width:none;padding:0;margin:0}
body.up-body .ct-drawer-canvas,body.up-body #offcanvas{display:none}
/* Blocksy setzt Farbe und Schrift direkt auf h1-h6. Direkte Regeln schlagen
   Vererbung, deshalb greift die Schrift des Elterncontainers dort nicht.
   Hier zurueck auf Vererbung, damit die Seite ihre eigene Farbe und Schrift behaelt. */
.up-page h1,.up-page h2,.up-page h3,.up-page h4,.up-page h5,.up-page h6{
  color:inherit;font-family:inherit;font-weight:700;
  letter-spacing:normal;line-height:normal;
}
.up-page p,.up-page span,.up-page a,.up-page li,.up-page div,
.up-page button,.up-page input,.up-page label,.up-page figcaption{
  font-family:inherit;
}
/* Adminleiste: der fixierte Header rechnet nicht mit ihr. Betrifft nur angemeldete Nutzer. */
body.admin-bar.up-body .up-page > div > header{top:32px}
@media screen and (max-width:782px){body.admin-bar.up-body .up-page > div > header{top:46px}}
.up-page{margin:0;padding:0;max-width:none;width:100%}
.up-page *,.up-page *::before,.up-page *::after{box-sizing:border-box}
.up-page img,.up-page video{max-width:100%;display:block}


@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-400.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;overflow-x:hidden;background:#0A0E12}
body a{color:#F0EEEB}body a:hover{color:#FFBF65}
#legal-overlay{display:none;position:fixed;inset:0;z-index:400;background:#0A0E12;color:#F0EEEB;overflow:auto;-webkit-overflow-scrolling:touch}
#legal-overlay:target,#legal-overlay.is-open{display:block}
.up-page .lg-h3{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;margin:44px 0 10px}
.lg-p{font-size:15px;line-height:1.75;color:rgba(240,238,235,.78);margin:0 0 14px;max-width:72ch;text-wrap:pretty}
.lg-mono{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,238,235,.55)}
.lg-ph{background:#FFBF65;color:#13181B;padding:0 4px;font-family:'IBM Plex Mono',monospace;font-size:.85em}
.up-page .lg-code{font-family:'IBM Plex Mono',monospace;font-size:.88em;font-weight:400;color:#F0EEEB}
ul.lg-list{margin:0 0 14px;padding-left:18px;max-width:72ch}
ul.lg-list li{font-size:15px;line-height:1.75;color:rgba(240,238,235,.78);margin-bottom:4px}
#legal-overlay a{color:#CCD5DA;text-decoration:none;border-bottom:1px solid rgba(240,238,235,.28)}
#legal-overlay a:hover{color:#F0EEEB;border-bottom-color:#F0EEEB}
html[data-rvon] [data-rv]{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1s cubic-bezier(.4,0,.2,1)}
html[data-rvon] [data-rv].in{opacity:1;transform:none}
@keyframes upDrift{0%{transform:scale(1.04)}50%{transform:scale(1.09) translate3d(0,-1.2%,0)}100%{transform:scale(1.04)}}
@keyframes upCue{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(7px);opacity:1}}
.up-nav a{opacity:.55;transition:opacity .2s;text-decoration:none}
.up-burger{display:none;flex:0 0 auto;flex-direction:column;justify-content:center;gap:5px;width:44px;height:38px;padding:0 11px;background:transparent;border:1px solid rgba(240,238,235,.3);cursor:pointer}
.up-burger:hover{border-color:#F0EEEB}
.up-burger span{display:block;width:100%;height:1px;background:#F0EEEB}
#up-menu{display:none;position:fixed;inset:0;z-index:200;background:rgba(10,14,18,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:auto;color:#F0EEEB}
#up-menu.is-open{display:block}
#up-menu a{text-decoration:none;color:#F0EEEB}
#up-menu .mi{display:block;font-family:var(--font-display),'Hanken Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1;font-size:clamp(30px,8vw,54px);padding:clamp(12px,2.4vh,20px) 0;border-bottom:1px solid rgba(240,238,235,.14);opacity:.85}
#up-menu .mi:hover{opacity:1}
@media (max-width:620px){.up-cta{display:none!important}}
.up-nav a:hover{opacity:1;color:#F0EEEB}
.up-zoom img{transition:transform .6s cubic-bezier(.4,0,.2,1)}
.up-zoom:hover img{transform:scale(1.03)}
.up-field{font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:#F0EEEB;background:transparent;border:0;border-bottom:1px solid rgba(240,238,235,.32);padding:10px 0;outline:none;transition:border-color .22s;width:100%}
.up-field:focus{border-bottom-color:#FFBF65}
.up-reason input{position:absolute;opacity:0;pointer-events:none}
.up-reason label{display:block;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;border:1px solid rgba(240,238,235,.26);color:rgba(240,238,235,.6);transition:all .22s cubic-bezier(.4,0,.2,1)}
.up-reason label:hover{color:#F0EEEB;border-color:rgba(240,238,235,.6)}
.up-reason input:checked+label{color:#13181B;background:#F0EEEB;border-color:#F0EEEB}
#access .up-field{color:#13181B;border-bottom-color:rgba(19,24,27,.3)}
#access .up-field:focus{border-bottom-color:#003A6C}
#access .up-reason label{border-color:rgba(19,24,27,.22);color:rgba(19,24,27,.61)}
#access .up-reason label:hover{color:#13181B;border-color:rgba(19,24,27,.5)}
#access .up-reason input:checked+label{color:#F0EEEB;background:#13181B;border-color:#13181B}
#idea a,#access a{color:#13181B}#idea a:hover,#access a:hover{color:#003A6C}
.up-idea-copy{max-width:50%}
.up-idea-plate{position:absolute;top:clamp(24px,3vw,48px);right:clamp(18px,4vw,52px);bottom:clamp(24px,3vw,48px);left:50%}
.up-idea-plate{display:flex;align-items:center;justify-content:center}
.up-idea-fig{position:relative;height:100%;max-width:100%;aspect-ratio:1}
.up-idea-plate img{width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.ov-ring{stroke-dasharray:100;animation:ovDraw 12s cubic-bezier(.4,0,.2,1) infinite}
.ov-ring2{stroke-dasharray:100;animation:ovDraw 12s cubic-bezier(.4,0,.2,1) 1.2s infinite}
@keyframes ovDraw{0%{stroke-dashoffset:100;opacity:0}6%{opacity:.9}52%{stroke-dashoffset:0;opacity:.9}78%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
.ov-scan{animation:ovScan 9s cubic-bezier(.4,0,.2,1) infinite alternate}
@keyframes ovScan{0%{transform:translateY(280px);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translateY(720px);opacity:0}}
.ov-ripple{animation:ovRipple 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ovRipple{0%{r:8;opacity:.75}70%{r:64;opacity:0}100%{r:64;opacity:0}}
.ov-core{animation:ovCore 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ovCore{0%,100%{opacity:.45}50%{opacity:1}}
html[data-rvon] .up-co-line{stroke-dasharray:100;stroke-dashoffset:100}
html[data-rvon] [data-rv].in .up-co-line{animation:coDraw 2.2s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes coDraw{to{stroke-dashoffset:0}}
@media (max-width:940px){.up-idea-copy{max-width:100%}.up-idea-wrap{display:flex;flex-direction:column}.up-idea-plate{position:relative;inset:auto;left:0;height:min(400px,70vw);order:2;margin:clamp(8px,2vw,24px) 0 clamp(28px,4vw,48px)}.up-crop-stats{margin-left:0!important;margin-right:0!important;width:100%;flex-direction:row!important;flex-wrap:wrap;align-items:flex-start;gap:clamp(20px,5vw,44px)!important}.up-crop-stats>div{flex:1 1 40%;min-width:150px}}
.up-cons-copy{transform:translateX(-11.5vw);max-width:min(30vw,580px)!important}
@media (max-width:940px){.up-cons-copy{transform:none;max-width:44ch!important}.up-cons-bg{left:0!important;object-position:88% 50%!important}.up-hum-i-fb{top:0!important;height:100%!important;object-position:93% 100%!important}}
.up-sym-full,.up-sym-half{position:absolute;inset:0;background:#F0EEEB;-webkit-mask:url('vector/uptrait-symbol.svg') center/contain no-repeat;mask:url('vector/uptrait-symbol.svg') center/contain no-repeat}
.up-sym-half{display:none}
.up-mq{position:absolute;inset:0;pointer-events:none;user-select:none;z-index:0}
.up-mq-line{position:absolute;left:50%;width:max-content;max-width:94vw;text-align:center;text-wrap:balance}
.up-mq-l1,.up-mq-l2{display:block}
html[data-rvon] .up-mq .up-mq-l1,html[data-rvon] .up-mq .up-mq-l2{opacity:0;transition:opacity var(--mqd,1.1s) cubic-bezier(.4,0,.2,1) var(--dl,0s),transform var(--mqd,1.1s) cubic-bezier(.4,0,.2,1) var(--dl,0s)}
html[data-rvon] .up-mq .up-mq-l1{transform:translateX(var(--mqf,-12vw))}
html[data-rvon] .up-mq .up-mq-l2{transform:translateX(calc(-1 * var(--mqf,-12vw)))}
html[data-rvon] .up-mq.in .up-mq-l1,html[data-rvon] .up-mq.in .up-mq-l2{opacity:1;transform:translateX(0)}
.up-mqa-cascade{--mqf:-7vw;--mqd:.85s}
.up-mqa-cascade .up-mq-line:first-child .up-mq-l1{--dl:0s}
.up-mqa-cascade .up-mq-line:first-child .up-mq-l2{--dl:.18s}
.up-mqa-cascade .up-mq-line:last-child .up-mq-l1{--dl:.36s}
.up-mqa-cascade .up-mq-line:last-child .up-mq-l2{--dl:.54s}
.up-mqa-drift{--mqf:-18vw;--mqd:1.7s;--dl:.55s}
.up-mq-line:first-child{bottom:100%;top:auto;transform:translate(-50%,calc(-1 * (15px + clamp(22px,3vw,34px) + clamp(18px,2.4vw,38px))))}
.up-mq-line:last-child{top:100%;bottom:auto;transform:translate(-50%,calc(clamp(64px,9vw,130px) / 2 - 50%))}
.up-co-sec .up-co-v,.up-co-sec .up-co-bg,.up-co-sec .up-co-plate{display:none}
.up-co-ascent .up-co-va{display:block}
.up-co-register .up-co-vb{display:block}
.up-co-boxes .up-co-vc,.up-co-boxes-bg .up-co-vc,.up-co-boxes-plate .up-co-vc{display:block}
.up-co-boxes-bg .up-co-bg{display:block}
.up-co-boxes-plate .up-co-plate{display:block}
.up-hum .up-cons-bg{display:none}
.up-hum-fa .up-hum-i-fa{display:block}
.up-hum-fb .up-hum-i-fb{display:block}
.up-hum-arc .up-hum-i-arc{display:block}
.up-hum-tr .up-hum-i-tr{display:block}
.up-hum .up-cons-copy{position:relative}
.up-hum-p1 .up-cons-copy{left:-5vw}
.up-hum-p2 .up-cons-copy{left:-8vw}
.up-hum-p3 .up-cons-copy{left:-11vw}
@media (max-width:940px){.up-hum .up-cons-copy{left:0!important}}
/* KV-Formatwechsel. Die Section ist 16:9, solange 56.25vw>=480px, also ab 853px Breite; darunter ist sie fest 480px hoch und das Seitenverhaeltnis faellt mit der Fensterbreite. 745px ~ 1.55 (Mitte zwischen 16:9 und 4:3), 500px ~ 1.04 (Mitte zwischen 4:3 und 3:4). */
@media (max-width:744px) and (min-width:500px){.up-hum-fb .up-hum-i-fb{display:none}.up-hum-fb .up-hum-i-fb43{display:block}}
@media (max-width:499px){.up-hum-fb .up-hum-i-fb{display:none}.up-hum-fb .up-hum-i-fb34{display:block}}
@media (max-width:744px){.up-hum-fb .up-cons-bg{left:0!important;top:0!important;width:100%!important;height:100%!important;object-position:50% 50%!important}}
.up-mq-ghost .up-mq-line{font-weight:800;text-transform:uppercase;letter-spacing:-.028em;line-height:.95;font-size:clamp(21px,3.15vw,78px);color:rgba(240,238,235,.055)}
.up-mq-outline .up-mq-line{font-weight:800;text-transform:uppercase;letter-spacing:-.028em;line-height:.95;font-size:clamp(21px,3.15vw,78px);color:transparent;-webkit-text-stroke:1px rgba(204,213,218,.16)}
.up-mq-register .up-mq-line{font-family:'IBM Plex Mono',monospace;font-weight:500;text-transform:uppercase;letter-spacing:.3em;line-height:1.8;font-size:clamp(12px,2vw,30px);color:rgba(204,213,218,.28)}
.up-mq-register{justify-content:space-between}
.up-mq-register .up-mq-line:before,.up-mq-register .up-mq-line:after{content:'·';margin:0 14px;color:rgba(255,191,101,.4)}
.up-mq-row{display:flex;width:max-content;white-space:nowrap;font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.85;font-size:clamp(90px,12vw,190px);color:rgba(240,238,235,.05);will-change:transform}
.up-mq-l{animation:mqL 120s linear infinite}
.up-mq-r{animation:mqR 150s linear infinite}
@keyframes mqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.up-sym-sun{-webkit-mask-image:url('vector/uptrait-symbol-sun.webp');mask-image:url('vector/uptrait-symbol-sun.webp')}
.up-sym-arrow{-webkit-mask-image:url('vector/uptrait-symbol-arrow.webp');mask-image:url('vector/uptrait-symbol-arrow.webp')}
.up-sym-sunrise .up-sym-full{display:none}
.up-sym-sunrise .up-sym-half{display:block}
.up-sym-rayw{position:absolute;inset:0}
.up-sym-ray-1 .up-sym-sun{-webkit-mask-image:url('vector/uptrait-sun-ray-1.webp');mask-image:url('vector/uptrait-sun-ray-1.webp')}
.up-sym-ray-2 .up-sym-sun{-webkit-mask-image:url('vector/uptrait-sun-ray-2.webp');mask-image:url('vector/uptrait-sun-ray-2.webp')}
.up-sym-ray-3 .up-sym-sun{-webkit-mask-image:url('vector/uptrait-sun-ray-3.webp');mask-image:url('vector/uptrait-sun-ray-3.webp')}
.up-sym-ray-4 .up-sym-sun{-webkit-mask-image:url('vector/uptrait-sun-ray-4.webp');mask-image:url('vector/uptrait-sun-ray-4.webp')}
.up-sym-ray-5 .up-sym-sun{-webkit-mask-image:url('vector/uptrait-sun-ray-5.webp');mask-image:url('vector/uptrait-sun-ray-5.webp')}
@keyframes symSunUp{0%{clip-path:inset(56% 0 0 0);opacity:0}18%{opacity:1}100%{clip-path:inset(0 0 0 0);opacity:1}}
.up-sym-sunrise .up-sym-ray-1 .up-sym-sun{animation:symSunUp 1s cubic-bezier(.4,0,.2,1) .2s both}
.up-sym-sunrise .up-sym-ray-5 .up-sym-sun{animation:symSunUp 1s cubic-bezier(.4,0,.2,1) .38s both}
.up-sym-sunrise .up-sym-ray-2 .up-sym-sun{animation:symSunUp 1s cubic-bezier(.4,0,.2,1) .8s both}
.up-sym-sunrise .up-sym-ray-4 .up-sym-sun{animation:symSunUp 1s cubic-bezier(.4,0,.2,1) .98s both}
.up-sym-sunrise .up-sym-ray-3 .up-sym-sun{animation:symSunUp 1s cubic-bezier(.4,0,.2,1) 1.4s both}
.up-sym-sunrise .up-sym-arrow{animation:symArrowIn 1s cubic-bezier(.4,0,.2,1) 2.5s both}
.up-sym-draw .up-sym-full,.up-sym-settle .up-sym-full,.up-sym-swray .up-sym-full{display:none}
.up-sym-draw .up-sym-half,.up-sym-settle .up-sym-half,.up-sym-swray .up-sym-half{display:block}
.up-sym-draw .up-sym-rayw{-webkit-mask-image:linear-gradient(var(--g),transparent 34%,#000 56%);mask-image:linear-gradient(var(--g),transparent 34%,#000 56%);-webkit-mask-size:320% 320%;mask-size:320% 320%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:symDrawWipe .85s cubic-bezier(.4,0,.2,1) var(--d) both}
.up-sym-draw .up-sym-ray-1{--g:270deg;--p0:100% 0%;--p1:0% 0%;--d:.2s}
.up-sym-draw .up-sym-ray-5{--g:90deg;--p0:0% 0%;--p1:100% 0%;--d:.42s}
.up-sym-draw .up-sym-ray-2{--g:315deg;--p0:100% 100%;--p1:0% 0%;--d:.72s}
.up-sym-draw .up-sym-ray-4{--g:45deg;--p0:0% 100%;--p1:100% 0%;--d:.94s}
.up-sym-draw .up-sym-ray-3{--g:0deg;--p0:0% 100%;--p1:0% 0%;--d:1.24s}
@keyframes symDrawWipe{0%{-webkit-mask-position:var(--p0);mask-position:var(--p0)}100%{-webkit-mask-position:var(--p1);mask-position:var(--p1)}}
.up-sym-draw .up-sym-arrow{animation:symArrowIn 1s cubic-bezier(.4,0,.2,1) 2.2s both}
.up-sym-settle .up-sym-rayw{animation:symSettleW 1.1s cubic-bezier(.4,0,.2,1) var(--d) both}
.up-sym-settle .up-sym-ray-1{--d:.2s}.up-sym-settle .up-sym-ray-5{--d:.38s}.up-sym-settle .up-sym-ray-2{--d:.8s}.up-sym-settle .up-sym-ray-4{--d:.98s}.up-sym-settle .up-sym-ray-3{--d:1.4s}
@keyframes symSettleW{0%{opacity:0;transform:translateY(5%)}50%{opacity:1}78%{transform:translateY(-1%)}100%{opacity:1;transform:none}}
.up-sym-swray .up-sym-rayw .up-sym-sun{background:linear-gradient(115deg,#F0EEEB 40%,#FFFFFF 50%,#F0EEEB 60%);background-size:280% 100%;animation:symSunUp 1s cubic-bezier(.4,0,.2,1) var(--d) both,symSwSweep 9s cubic-bezier(.4,0,.2,1) var(--ds) infinite}
.up-sym-swray .up-sym-ray-1{--d:.2s;--ds:4s}.up-sym-swray .up-sym-ray-5{--d:.38s;--ds:4.18s}.up-sym-swray .up-sym-ray-2{--d:.8s;--ds:4.36s}.up-sym-swray .up-sym-ray-4{--d:.98s;--ds:4.54s}.up-sym-swray .up-sym-ray-3{--d:1.4s;--ds:4.72s}
@keyframes symSwSweep{0%{background-position:120% 0}22%,100%{background-position:-20% 0}}
.up-sym-swray .up-sym-arrow{animation:symArrowIn 1s cubic-bezier(.4,0,.2,1) 2.5s both}
.up-sym-settle .up-sym-arrow{animation:symArrowIn 1s cubic-bezier(.4,0,.2,1) 2.7s both}
@keyframes symArrowIn{0%{transform:translateY(30%);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}
.up-sym-breath{animation:symBreath 9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes symBreath{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
.up-sym-core{animation:symCore 2s cubic-bezier(.4,0,.2,1) .4s both}
@keyframes symCore{0%{clip-path:circle(0% at 50% 50%);opacity:0}100%{clip-path:circle(75% at 50% 50%);opacity:1}}
.up-sym-rise{animation:symRise 1.7s cubic-bezier(.4,0,.2,1) .4s both}
@keyframes symRise{0%{transform:translateY(30px);opacity:0;filter:blur(10px)}100%{transform:none;opacity:1;filter:none}}
.up-sym-sweep .up-sym-full{background:linear-gradient(115deg,#F0EEEB 40%,#FFFFFF 50%,#F0EEEB 60%);background-size:280% 100%;animation:symSweep 10s cubic-bezier(.4,0,.2,1) infinite}
@keyframes symSweep{0%{background-position:120% 0}55%,100%{background-position:-20% 0}}
.up-sym-glow{animation:symGlow 12s cubic-bezier(.4,0,.2,1) infinite}
@keyframes symGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,191,101,0))}50%{filter:drop-shadow(0 0 26px rgba(255,191,101,.45))}}
@media (max-width:900px){.up-nav{display:none!important}.up-burger{display:flex!important}.up-sym{margin-left:auto!important;margin-right:0;width:min(clamp(110px,22vw,180px),18svh)!important}#top{align-items:center!important}#top>div:last-child{padding-bottom:clamp(18px,3vh,32px)!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}html[data-rvon] [data-rv]{opacity:1!important;transform:none!important}.up-hero-img,.up-sym,.up-sym *,.up-mq-row{animation:none!important}.up-idea-ov{display:none}.up-beat-video{display:none}}

/* ==================================================================
   Korrekturen nach der Uebernahme ins Theme
   ================================================================== */

/* --- Hover-Zustaende ------------------------------------------------
   Das Artefakt trug sie als Attribut style-hover="…", das nur seine
   eigene Laufzeit versteht. In gewoehnlichem HTML sind sie wirkungslos —
   hier als echte CSS-Regeln nachgezogen.
   !important ist noetig: die Ruhefarben stehen inline am Element,
   und inline schlaegt jede Regel ohne !important. */

.up-page a.up-cta{transition:background .22s cubic-bezier(.4,0,.2,1),color .22s cubic-bezier(.4,0,.2,1)}
.up-page a.up-cta:hover{background:transparent!important;color:#F0EEEB!important;box-shadow:inset 0 0 0 1px #F0EEEB!important}

#up-menu a[href="#access"]{transition:background .22s cubic-bezier(.4,0,.2,1),color .22s cubic-bezier(.4,0,.2,1)}
#up-menu a[href="#access"]:hover{background:transparent!important;color:#F0EEEB!important;box-shadow:inset 0 0 0 1px #F0EEEB!important}

.up-page #up-notsent button[type=submit]{transition:background .22s cubic-bezier(.4,0,.2,1),color .22s cubic-bezier(.4,0,.2,1)}
.up-page #up-notsent button[type=submit]:hover{background:transparent!important;color:#13181B!important;box-shadow:inset 0 0 0 1px #13181B!important}

.up-page #up-sent button{transition:background .22s cubic-bezier(.4,0,.2,1),color .22s cubic-bezier(.4,0,.2,1)}
.up-page #up-sent button:hover{background:#13181B!important;color:#F0EEEB!important}

/* Der Koalitions-Knopf traegt keine Klasse — ueber den Abschnitt adressiert. */
.up-page #coalition a[href="#access"]{transition:background .22s cubic-bezier(.4,0,.2,1),color .22s cubic-bezier(.4,0,.2,1)}
.up-page #coalition a[href="#access"]:hover{background:#F0EEEB!important;color:#13181B!important}

.up-page a[data-up="openLegal"]{transition:color .22s cubic-bezier(.4,0,.2,1),border-color .22s cubic-bezier(.4,0,.2,1)}
.up-page a[data-up="openLegal"]:hover{color:#F0EEEB!important;border-bottom-color:#F0EEEB!important}

/* --- Navigation -----------------------------------------------------
   Vorher nur Deckkraft 55 % -> 100 %. Jetzt zusaetzlich eine Haarlinie,
   die von links einlaeuft: eine Bewegung pro Element, ruhig, kein
   Impact-Signal als Flaeche. */

.up-nav a{position:relative;opacity:.55;transition:opacity .22s cubic-bezier(.4,0,.2,1)}
.up-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:#F0EEEB;transition:right .28s cubic-bezier(.4,0,.2,1)}
.up-nav a:hover{opacity:1}
.up-nav a:hover::after{right:0}

#up-menu .mi{transition:opacity .22s cubic-bezier(.4,0,.2,1),padding-left .28s cubic-bezier(.4,0,.2,1)}
#up-menu .mi:hover{opacity:1;padding-left:14px}

/* --- Formularfelder -------------------------------------------------
   Die Felder lagen unterschiedlich hoch: das Rasterlayout streckte die
   Zeilen auf die hoechste Beschriftung. Feste Hoehen nehmen dem Layout
   die Abhaengigkeit von der Textmessung. Zusaetzlich setzt Blocksy eigene
   Werte auf input[type=email] — die werden hier zurueckgenommen. */

.up-page form label{align-content:start}
.up-page form label > span:first-child{display:block;height:16px;line-height:16px;align-self:start}
.up-page .up-field{height:42px;align-self:start;padding:10px 0;font-size:15px;line-height:normal;
  background:transparent;border-radius:0;border-top:0;border-left:0;border-right:0}

/* --- Klickflaechen --------------------------------------------------
   Kleine Textlinks auf Zeigegeraeten vergroessern, ohne dass sich optisch
   etwas aendert. */

@media (hover:none){
  .up-page a[data-up="openLegal"],
  .up-page a[href^="mailto:"],
  .up-page a[href="#stakes"]{display:inline-block;padding-top:11px;padding-bottom:11px}
}

/* Die beiden Knoepfe auf 44 px Hoehe. Inline-Styles setzen 11 bzw. 12 px
   Innenabstand, daher !important. Zuwachs: 3 bzw. 1 Pixel. */

.up-page a.up-cta{padding-top:12.5px!important;padding-bottom:12.5px!important}
.up-page #coalition a[href="#access"]{padding-top:12.5px!important;padding-bottom:12.5px!important}

/* Menue- und Schliessknopf sind 44x38. Die Trefferflaeche waechst ueber ein
   Pseudoelement auf 44x44, der sichtbare Rahmen bleibt unveraendert. */

.up-page .up-burger{position:relative}
.up-page .up-burger::after{content:'';position:absolute;left:0;right:0;top:-6px;bottom:0;z-index:2}

/* Schliesslink im Impressum-Overlay. Auf dem Telefon der einzige sichtbare
   Weg hinaus und bis hierhin 17 px hoch. */

@media (hover:none){
  .up-page a[data-up="closeLegal"]{display:inline-block;padding-top:13.5px;padding-bottom:13.5px}
}

/* Die 44 px der Knoepfe haengen sonst an Blocksys Zeilenhoehe aus global.css
   (1,65). Hier festgeschrieben, damit eine fremde Datei sie nicht kippt. */

.up-page a.up-cta,
.up-page #coalition a[href="#access"]{line-height:17.3px}

/* Dankeblock: "send another" war 43,3 px. */

.up-page #up-sent button{padding-top:12.5px!important;padding-bottom:12.5px!important;line-height:17.3px}

/* Bot-Falle: ein Feld, das nur Maschinen ausfuellen. Nicht display:none —
   das erkennen die besseren Skripte. */

.up-page .up-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Freitextfeld. Muss die feste Hoehe der einzeiligen Felder aufheben. */

.up-page .up-area{height:auto;min-height:84px;padding:10px 0;resize:vertical;
  font-family:'Hanken Grotesk',sans-serif;line-height:1.5}
.up-page .up-area::placeholder{color:rgba(19,24,27,.55)}

/* ------------------------------------------------------------------ */
/*  Schrift über dem Familienbild                                      */
/* ------------------------------------------------------------------ */
/*
 * Gemessen am 11.10.2026 gegen den tatsächlich gerenderten Bildausschnitt:
 * die Überschrift lag auf beleuchteten Gesichtern, 1,35 : 1 bei 1280 px und
 * 1,17 : 1 bei 768 px. Statt das Bild unter einem Verlauf zu ersticken,
 * wandert der Textblock nach links auf das Fadenfeld — dort fällt der helle
 * Bildanteil von 6,5 auf 0,1 Prozent.
 *
 * Der Schein um die Buchstaben fängt ab, was die haarfeinen Fäden sonst
 * durch die Schrift ziehen. Gegen eine einzelne helle Linie quer durch einen
 * Buchstaben hilft keine Fläche — nur ein Rand am Buchstaben selbst.
 */
@media (min-width:941px){
	.up-hum-p2 .up-cons-copy{left:-17vw!important}
}

/* 745 bis 940 px zeigte das Querformat nur noch die Familie, weil es dort
   auf 93 % geschwenkt wird. Das 4:3-Bild passt in diesem Band besser und
   lässt die dunkle Seite stehen. */
@media (max-width:940px) and (min-width:745px){
	.up-hum-fb .up-hum-i-fb{display:none}
	.up-hum-fb .up-hum-i-fb43{display:block;object-position:50% 100%}
	.up-hum-fb .up-cons-copy{left:-14vw!important}
}

.up-hum-fb .up-cons-copy h2{text-shadow:0 2px 28px rgba(10,14,18,.95),0 0 3px rgba(10,14,18,.8)}
.up-hum-fb .up-cons-copy p{text-shadow:0 1px 18px rgba(10,14,18,.95),0 0 2px rgba(10,14,18,.8)}