/* === joos. Bento-Grid Mobile-Fix === */
/* Erzwingt einspaltige Karten unter 900px Viewport */
@media (max-width: 900px) {
.joos-page .bento {
grid-template-columns: 1fr !important;
grid-auto-rows: auto !important;
gap: 1.2rem !important;
}
.joos-page .b-1,
.joos-page .b-2,
.joos-page .b-3,
.joos-page .b-4 {
grid-column: 1 / -1 !important;
width: 100% !important;
min-height: 200px;
}
/* Kompaktere Innenmaße für Mobile */
.joos-page .b-card {
padding: 1.6rem !important;
}
.joos-page .b-card h3 {
font-size: 1.5rem;
}
.joos-page .b-card p {
font-size: 1rem;
line-height: 1.5;
}
.joos-page .b-card .num {
font-size: 4rem;
}
}
/* Noch schmaler: extra kompakt unter 600px */
@media (max-width: 600px) {
.joos-page .b-card {
padding: 1.3rem !important;
}
.joos-page .b-card h3 {
font-size: 1.3rem;
}
.joos-page .b-card p {
font-size: .95rem;
}
.joos-page .b-card .num {
font-size: 3rem;
top: .4rem;
right: .8rem;
}
}
/* ============================================================
joos. Team-Seite — gleicher Brand-Code wie Startseite v3
============================================================ */
body.page .entry-content,body .entry-content,body .wp-block-post-content,
body main,body .site-content,body .content-area,body .inside-article{
max-width:none!important;padding:0!important;margin:0!important;
}
body .entry-header,body .page-header,body .entry-title{display:none!important}
.joos-page{
–paper:#f6efdb;–paper-2:#ede3c5;–ink:#14110c;
–juice:#fea50d;–juice-2:#d88a00;
–lime:#89b52e;–lime-deep:#6b9621;
–citrus:#ff8c42;–banana:#ff2d7a;
–maxw:1280px;–radius:26px;–radius-lg:40px;
–ease:cubic-bezier(.22,.61,.36,1);
–ease-spring:cubic-bezier(.34,1.56,.64,1);
font-family:’Outfit‘,system-ui,sans-serif;
background:var(–paper);color:var(–ink);
line-height:1.55;font-size:clamp(1rem,.94rem + .3vw,1.15rem);
-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;
}
.joos-page *,.joos-page *::before,.joos-page *::after{box-sizing:border-box;margin:0;padding:0}
.joos-page img{max-width:100%;display:block}
.joos-page a{color:inherit;text-decoration:none}
.joos-page h1,.joos-page h2,.joos-page h3{font-family:’Fraunces‘,Georgia,serif;line-height:1;font-weight:600;letter-spacing:-.025em}
.joos-page ::selection{background:var(–juice);color:#fff}
.joos-page ul{list-style:none}
.joos-page .wrap{max-width:var(–maxw);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.6rem);position:relative}
.joos-page::after{
content:““;position:absolute;inset:0;pointer-events:none;z-index:100;opacity:.45;
background-image:url(„data:image/svg+xml;utf8,“);
mix-blend-mode:multiply;
}
@media(hover:hover){
.joos-page.cursor-active{cursor:none}
.joos-page.cursor-active a,.joos-page.cursor-active button,.joos-page.cursor-active .clickable{cursor:none}
#joos-cursor{
position:fixed;top:0;left:0;width:18px;height:18px;
background:var(–juice);border-radius:50% 50% 50% 0;
transform:translate(-50%,-50%) rotate(-45deg);
pointer-events:none;z-index:200;mix-blend-mode:multiply;opacity:0;
transition:width .25s var(–ease-spring),height .25s var(–ease-spring),background .2s var(–ease),opacity .2s var(–ease);
}
#joos-cursor.visible{opacity:1}
#joos-cursor.big{width:48px;height:48px;background:var(–lime)}
}
/* Buttons */
.joos-page .btn{
display:inline-flex;align-items:center;gap:.6rem;
font-family:’Outfit‘,sans-serif;font-weight:600;font-size:1rem;
padding:1rem 1.7rem;border-radius:999px;
border:2.5px solid var(–ink);background:var(–paper);color:var(–ink);
transition:transform .25s var(–ease),box-shadow .25s var(–ease),background .25s var(–ease),color .25s var(–ease);
text-decoration:none;cursor:pointer;
}
.joos-page .btn:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 0 var(–ink)}
.joos-page .btn–juice{background:var(–juice);color:var(–ink);border-color:var(–ink)}
.joos-page .btn–ink{background:var(–ink);color:var(–paper)}
.joos-page .btn–ink:hover{background:var(–juice);color:var(–ink);border-color:var(–ink)}
/* Header — identisch zur Startseite */
.joos-page .joos-header{
position:sticky;top:0;z-index:60;
background:rgba(246,239,219,.92);
backdrop-filter:blur(14px);
border-bottom:2px solid var(–ink);
}
.joos-page .joos-header .wrap{
display:flex;align-items:center;justify-content:space-between;
min-height:96px;gap:1rem;
}
.joos-page .logo{display:inline-flex;align-items:center;line-height:0}
.joos-page .logo img{height:64px;width:auto;display:block;transition:transform .4s var(–ease-spring)}
.joos-page .logo:hover img{transform:scale(1.05) rotate(-2deg)}
.joos-page .nav{display:flex;align-items:center;gap:.3rem}
.joos-page .nav a.navlink{
padding:.55rem 1rem;border-radius:999px;font-weight:500;font-size:.98rem;color:var(–ink);
transition:background .2s var(–ease);
}
.joos-page .nav a.navlink:hover{background:var(–lime);color:var(–ink)}
.joos-page .nav a.navlink.active{background:var(–ink);color:var(–paper)}
.joos-page .nav-cta{margin-left:.6rem}
.joos-page .burger{display:none;background:none;border:0;padding:.4rem;cursor:pointer}
.joos-page .burger span{display:block;width:28px;height:3px;background:var(–ink);border-radius:2px;margin:5px 0;transition:.3s var(–ease)}
@media(max-width:820px){
.joos-page .burger{display:block}
.joos-page .joos-header .wrap{min-height:80px}
.joos-page .logo img{height:52px}
.joos-page .nav{
position:absolute;top:80px;left:0;right:0;
flex-direction:column;align-items:stretch;gap:.2rem;
background:var(–paper);padding:1.2rem 1.4rem 1.6rem;
border-bottom:2px solid var(–ink);
transform:translateY(-130%);transition:transform .35s var(–ease);
}
.joos-page .nav.open{transform:translateY(0)}
.joos-page .nav a.navlink{padding:.9rem .8rem;font-size:1.15rem}
.joos-page .nav-cta{margin:.6rem 0 0;justify-content:center}
}
/* ==========================================================
PAGE-HERO: Solo-Statement
========================================================== */
.joos-page .page-hero{
position:relative;overflow:hidden;
padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,5vw,4rem);
border-bottom:2px solid var(–ink);
background:var(–paper-2);
}
.joos-page .page-hero .wrap{position:relative;z-index:1}
.joos-page .page-hero .kicker{
font-family:’JetBrains Mono‘,monospace;font-size:.78rem;
letter-spacing:.18em;text-transform:uppercase;font-weight:600;
color:var(–juice-2);display:inline-flex;align-items:center;gap:.5rem;
}
.joos-page .page-hero .kicker::before{content:““;width:24px;height:2px;background:var(–juice-2)}
.joos-page .page-hero h1{
font-size:clamp(2.5rem,1.5rem + 4.5vw,5.2rem);
margin-top:.8rem;letter-spacing:-.025em;color:var(–ink);
max-width:18ch;
}
.joos-page .page-hero h1 .twist{
font-style:italic;font-weight:900;color:var(–juice-2);
position:relative;padding:0 .1em;
}
.joos-page .page-hero h1 .twist::before{
content:““;position:absolute;left:-3%;right:-3%;top:18%;bottom:14%;
background:var(–lime);z-index:-1;border-radius:6px;transform:rotate(-1.5deg);
}
.joos-page .page-hero .lede{
margin-top:1.6rem;font-size:clamp(1.1rem,1rem + .55vw,1.35rem);
max-width:55ch;color:#3a362c;line-height:1.5;
}
/* ==========================================================
PERSON: das große Foto + Steckbrief
========================================================== */
.joos-page .person{padding:clamp(3rem,7vw,6rem) 0;position:relative}
.joos-page .person .wrap{
display:grid;grid-template-columns:1fr 1.2fr;
gap:clamp(2rem,5vw,4rem);align-items:flex-start;
}
@media(max-width:900px){.joos-page .person .wrap{grid-template-columns:1fr}}
.joos-page .photo-frame{
position:relative;
}
.joos-page .photo-frame img{
width:100%;border:3px solid var(–ink);border-radius:var(–radius);
box-shadow:
14px 14px 0 var(–ink),
-10px -10px 70px rgba(137,181,46,.45);
background:var(–ink);
aspect-ratio:4/5;object-fit:cover;
position:relative;z-index:1;
transition:transform .4s var(–ease-spring);
}
.joos-page .photo-frame:hover img{
transform:translate(-3px,-3px) rotate(-1deg);
}
/* Tape oben */
.joos-page .photo-frame::before{
content:“DAS GANZE TEAM“;
position:absolute;top:-18px;left:8%;z-index:4;
background:var(–lime);color:var(–ink);
font-family:’JetBrains Mono‘,monospace;font-size:.72rem;font-weight:700;
padding:.45rem 1rem;letter-spacing:.18em;text-transform:uppercase;
transform:rotate(-3deg);border:2px solid var(–ink);
box-shadow:3px 3px 0 var(–ink);
}
/* Stempel unten rechts */
.joos-page .photo-frame::after{
content:““;position:absolute;bottom:-18px;right:-18px;z-index:4;
width:110px;height:110px;border-radius:50%;
background:var(–juice);border:3px solid var(–ink);
background-image:url(„data:image/svg+xml;utf8,SPOILER:BIN ICH“);
background-size:contain;background-repeat:no-repeat;background-position:center;
transform:rotate(8deg);box-shadow:4px 4px 0 var(–ink);
}
.joos-page .person-text h2{
font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);color:var(–ink);
}
.joos-page .person-text h2 em{font-style:italic;color:var(–juice-2)}
.joos-page .person-text .role{
font-family:’JetBrains Mono‘,monospace;font-size:.85rem;
letter-spacing:.12em;text-transform:uppercase;font-weight:600;
color:var(–juice-2);margin-top:.6rem;
}
.joos-page .person-text .bio{margin-top:1.6rem;font-size:1.08rem;color:#3a362c;line-height:1.65}
.joos-page .person-text .bio p + p{margin-top:1rem}
.joos-page .person-text .bio strong{color:var(–ink);font-weight:600}
/* ==========================================================
HALTUNG: drei Prinzipien als Karten
========================================================== */
.joos-page .prinzipien{
background:var(–ink);color:var(–paper);
padding:clamp(3.5rem,7vw,6rem) 0;
border-top:2px solid var(–ink);border-bottom:2px solid var(–ink);
}
.joos-page .prinzipien .section-head{margin-bottom:3rem;max-width:36ch}
.joos-page .prinzipien .kicker{color:var(–lime)}
.joos-page .prinzipien .kicker::before{background:var(–lime)}
.joos-page .prinzipien h2{
font-size:clamp(1.9rem,1.3rem + 2.6vw,3.4rem);margin-top:.6rem;color:var(–paper);
}
.joos-page .prinzipien h2 em{font-style:italic;color:var(–lime)}
.joos-page .prinz-grid{
display:grid;gap:1.4rem;
grid-template-columns:repeat(3,1fr);
}
@media(max-width:820px){.joos-page .prinz-grid{grid-template-columns:1fr}}
.joos-page .prinz{
background:rgba(246,239,219,.05);
border:1.5px solid rgba(246,239,219,.18);
border-radius:var(–radius);padding:2rem 1.8rem;
position:relative;
}
.joos-page .prinz .nr{
font-family:’Fraunces‘,serif;font-weight:900;font-style:italic;
font-size:3rem;line-height:1;color:var(–juice);
margin-bottom:.8rem;display:block;
}
.joos-page .prinz h3{font-size:1.5rem;margin-bottom:.6rem;color:var(–paper)}
.joos-page .prinz p{color:#c5c0ad;font-size:1rem;line-height:1.5}
/* ==========================================================
RANDOM FACTS: scrollender Ticker
========================================================== */
.joos-page .facts{
background:var(–paper);padding:clamp(3rem,6vw,5rem) 0;
}
.joos-page .facts .section-head{margin-bottom:2.5rem;max-width:36ch}
.joos-page .facts .kicker{color:var(–juice-2)}
.joos-page .facts .kicker::before{background:var(–juice-2)}
.joos-page .facts h2{
font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem);margin-top:.6rem;color:var(–ink);
}
.joos-page .facts h2 em{font-style:italic;color:var(–juice-2)}
.joos-page .facts-grid{
display:grid;gap:1.2rem;
grid-template-columns:repeat(6,1fr);
}
.joos-page .fact{
border:2.5px solid var(–ink);border-radius:var(–radius);
padding:1.5rem 1.4rem;background:var(–paper);
display:flex;flex-direction:column;justify-content:space-between;
transition:transform .3s var(–ease-spring),box-shadow .25s var(–ease);
min-height:160px;
}
.joos-page .fact:hover{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:8px 8px 0 var(–ink)}
.joos-page .fact .emoji{font-size:2rem;display:block;margin-bottom:.6rem}
.joos-page .fact .label{
font-family:’JetBrains Mono‘,monospace;font-size:.7rem;
letter-spacing:.14em;text-transform:uppercase;color:var(–juice-2);font-weight:700;
}
.joos-page .fact .val{
font-family:’Fraunces‘,serif;font-weight:600;font-size:1.15rem;
color:var(–ink);margin-top:.3rem;line-height:1.2;
}
.joos-page .f-1{grid-column:span 2;background:var(–juice);color:var(–ink)}
.joos-page .f-1 .label{color:var(–ink)}
.joos-page .f-2{grid-column:span 2}
.joos-page .f-3{grid-column:span 2;background:var(–lime)}
.joos-page .f-3 .label{color:var(–ink)}
.joos-page .f-4{grid-column:span 3}
.joos-page .f-5{grid-column:span 3;background:var(–citrus)}
.joos-page .f-5 .label{color:var(–ink)}
@media(max-width:820px){
.joos-page .facts-grid{grid-template-columns:repeat(2,1fr)}
.joos-page .fact{grid-column:span 1!important}
}
@media(max-width:480px){
.joos-page .facts-grid{grid-template-columns:1fr}
}
/* ==========================================================
CTA — wie auf Startseite
========================================================== */
.joos-page .final-cta{padding:clamp(4rem,8vw,7rem) 0;text-align:center;position:relative;background:var(–paper-2);border-top:2px solid var(–ink)}
.joos-page .final-cta .frame{
background:var(–juice);color:var(–ink);
border:3px solid var(–ink);border-radius:var(–radius-lg);
padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,5vw,3.5rem);
position:relative;overflow:hidden;box-shadow:14px 14px 0 var(–ink);
max-width:1080px;margin:0 auto;
}
.joos-page .final-cta .frame::before{
content:““;position:absolute;width:340px;height:340px;border-radius:50%;
background:var(–lime);top:-160px;left:-120px;opacity:.5;
}
.joos-page .final-cta .frame::after{
content:““;position:absolute;width:260px;height:260px;border-radius:50%;
background:var(–citrus);bottom:-130px;right:-90px;opacity:.55;
}
.joos-page .final-cta .frame-inner{position:relative;z-index:1}
.joos-page .final-cta h2{
font-size:clamp(2rem,1.3rem + 3vw,3.8rem);color:var(–ink);
font-style:italic;font-weight:600;max-width:20ch;margin:0 auto;
}
.joos-page .final-cta h2 .hl{
background:var(–ink);color:var(–juice);padding:0 .18em;
font-style:normal;font-weight:700;display:inline-block;transform:rotate(-1deg)
}
.joos-page .final-cta p{max-width:42ch;margin:1.4rem auto 2.4rem;font-size:1.1rem;line-height:1.5;color:var(–ink)}
/* Footer */
.joos-page .joos-footer{background:var(–ink);color:var(–paper);padding:3.5rem 0 2rem;border-top:2px solid var(–ink)}
.joos-page .joos-footer .wrap{
display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;align-items:flex-start;
}
@media(max-width:780px){.joos-page .joos-footer .wrap{grid-template-columns:1fr;gap:2rem}}
.joos-page .joos-footer .logo img{height:80px;filter:brightness(0) invert(1) sepia(1) saturate(0)}
.joos-page .joos-footer .col-title{
font-family:’JetBrains Mono‘,monospace;font-size:.72rem;
letter-spacing:.18em;text-transform:uppercase;color:#a8a392;margin-bottom:.8rem;
}
.joos-page .joos-footer ul{display:flex;flex-direction:column;gap:.4rem}
.joos-page .joos-footer ul a{opacity:.85;transition:color .2s,opacity .2s;color:var(–paper)}
.joos-page .joos-footer ul a:hover{color:var(–lime);opacity:1}
.joos-page .joos-footer p.tagline{margin-top:1rem;max-width:32ch;color:#bdb8a6;font-size:.95rem}
.joos-page .joos-footer .bottom{
grid-column:1/-1;margin-top:2rem;padding-top:1.5rem;
border-top:1px solid rgba(246,239,219,.12);
font-family:’JetBrains Mono‘,monospace;font-size:.78rem;
display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
color:#a8a392;
}
/* Reveal-Animationen */
.joos-page .reveal{opacity:0;transform:translateY(28px);animation:joos-rise .9s var(–ease) forwards}
@keyframes joos-rise{to{opacity:1;transform:none}}
.joos-page .d1{animation-delay:.05s}.joos-page .d2{animation-delay:.18s}
.joos-page .d3{animation-delay:.31s}.joos-page .d4{animation-delay:.44s}
@media(prefers-reduced-motion:reduce){
.joos-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.joos-page .reveal{opacity:1;transform:none}
#joos-cursor{display:none}
}
Team
Das Team hinter joos.
ist gerade noch überschaubar.
Solo ist Programm, nicht Übergangslösung. Du sprichst direkt
mit der Person, die auch denkt, plant und umsetzt —
ohne Account-Manager-Filter dazwischen.
>> PLATZHALTER: Jared.
Gründer · Geschäftsführer · Kreativkopf
>> PLATZHALTER: Hier kommen 1-2 Sätze über deinen Werdegang.
Was hast du vorher gemacht, was hat dich zu joos. gebracht?
>> PLATZHALTER: Was treibt dich an, was nervt dich an „der Branche“,
was machst du anders? 2-3 Sätze, direkt und ehrlich — nicht steif.
>> PLATZHALTER: Optional ein dritter Absatz, falls du noch was
Persönliches teilen willst (Werte, Haltung, Arbeitsweise).
Wofür joos. steht
Drei Prinzipien, die nicht verhandelbar sind.
01
>> PLATZHALTER: Prinzip 1
>> PLATZHALTER: 2-3 Sätze, die das Prinzip greifbar machen.
Beispiel: „Ehrlich vor freundlich. Wenn was nicht funktioniert,
sage ich es — auch wenn es unbequem ist.“
02
>> PLATZHALTER: Prinzip 2
>> PLATZHALTER: 2-3 Sätze. Beispiel: „Lieber ein Ding zu Ende
als drei halb. Fokus statt Feature-Konfetti.“
03
>> PLATZHALTER: Prinzip 3
>> PLATZHALTER: 2-3 Sätze. Beispiel: „Werkzeuge sind Werkzeuge,
keine Religion. Ich nehme, was zum Problem passt — nicht
zum Trend.“
Beilagen
Was sonst noch im Saft ist.
🃏
Hobby
>> PLATZHALTER: z.B. Magic: The Gathering
🎧
Macht außerdem
>> PLATZHALTER: z.B. Ambient-Musik
💪
Bewegung
>> PLATZHALTER: z.B. Bulgarian Bag
🥬
Isst
>> PLATZHALTER: z.B. Vegetarisch, mit Hingabe
🌍
Basis
>> PLATZHALTER: z.B. DACH-Raum, hybrid
Klingt nach deinem Sound?
Dann schreib mir. Wir schauen unverbindlich,
ob wir zusammenpassen — und was bei dir das meiste Wachstum bringt.
Lass uns schnacken 🙂
(function(){
var page = document.querySelector(‚.joos-page‘);
if(!page) return;
var b = document.getElementById(‚joos-burger‘),
n = document.getElementById(‚joos-nav‘);
if(b && n){
b.addEventListener(‚click‘, function(){
var open = n.classList.toggle(‚open‘);
b.setAttribute(‚aria-expanded‘, open);
});
n.querySelectorAll(‚a‘).forEach(function(a){
a.addEventListener(‚click‘, function(){
n.classList.remove(‚open‘);
b.setAttribute(‚aria-expanded‘,’false‘);
});
});
}
if(window.matchMedia(‚(hover:hover)‘).matches &&
!window.matchMedia(‚(prefers-reduced-motion:reduce)‘).matches){
var c = document.getElementById(‚joos-cursor‘);
if(c){
var x=0,y=0,tx=0,ty=0,active=false;
page.addEventListener(‚mouseenter‘,function(){
page.classList.add(‚cursor-active‘);c.classList.add(‚visible‘);active=true;
});
page.addEventListener(‚mouseleave‘,function(){
page.classList.remove(‚cursor-active‘);c.classList.remove(‚visible‘);active=false;
});
document.addEventListener(‚mousemove‘,function(e){
if(active){tx=e.clientX;ty=e.clientY}
});
function loop(){
x+=(tx-x)*.22; y+=(ty-y)*.22;
c.style.transform=’translate(‚+(x-9)+’px,’+(y-9)+’px) rotate(-45deg)‘;
requestAnimationFrame(loop);
}
loop();
page.querySelectorAll(‚a,button,.fact,.prinz‘).forEach(function(el){
el.addEventListener(‚mouseenter‘,function(){c.classList.add(‚big‘)});
el.addEventListener(‚mouseleave‘,function(){c.classList.remove(‚big‘)});
});
}
}
})();
