@font-face{font-family:"Archivo";src:url(fonts/archivo-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-500.woff2) format("woff2");font-weight:500;font-display:swap}

/* Dieselben Farben wie Cat Chaos, damit der Klick nahtlos wirkt */
:root{
  --ink:#20211e;
  --paper:#f7f7f0;
  --acid:#b9f3a2;
  --soft:#54564c;
  --line:#d8d9ce;
  --gutter:clamp(16px,4vw,64px);
  --spring:cubic-bezier(.2,1.5,.4,1);
  --out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;scroll-padding-top:16px;scrollbar-color:var(--ink) var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:500 18px/1.55 "Archivo",system-ui,sans-serif;overflow-x:hidden}
::selection{background:var(--acid);color:var(--ink)}
img,svg{display:block}
img{max-width:100%;height:auto}
h1,h2,h3,p,dl,dd{margin:0}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1.5px}
a:focus-visible{outline:3px solid #6d4dff;outline-offset:3px;border-radius:8px}
h1,h2,h3{font-weight:900;letter-spacing:-.03em;line-height:1;text-wrap:balance}
.skip{position:absolute;left:var(--gutter);top:-80px;z-index:9;padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--acid)}
.skip:focus{top:10px}
.lede{font-size:clamp(19px,1.5vw,23px);line-height:1.4;max-width:42ch}

/* Kopf */
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 28px;padding:14px var(--gutter)}
.brand{font-weight:900;font-size:22px;letter-spacing:-.02em;line-height:1.15;text-decoration:none}
.brand small{display:block;font-weight:500;font-size:15px;letter-spacing:0;color:var(--soft)}
.nav{display:flex;flex-wrap:wrap;gap:0 clamp(12px,1.6vw,20px);margin-left:-2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;text-decoration-color:transparent;transition:text-decoration-color .2s}
.nav a:hover{text-decoration-color:currentColor}

/* Hero */
.hero{overflow-x:clip;display:grid;grid-template-columns:minmax(0,10fr) minmax(0,11fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(12px,3vh,40px) var(--gutter) clamp(48px,9vh,110px)}
.hero h1{font-size:clamp(46px,6.1vw,96px);line-height:.96}
.hero .lede{margin-top:clamp(16px,2.4vh,26px)}

/* Der Katzen-Knopf */
.catbtn{position:relative;display:inline-flex;align-items:center;gap:18px;margin-top:clamp(40px,6vh,58px);padding:16px 38px 16px 24px;border-radius:999px;background:var(--ink);color:var(--acid);font-size:clamp(24px,2.2vw,32px);font-weight:900;letter-spacing:-.02em;line-height:1.05;text-decoration:none;transition:transform .35s var(--spring),background .2s}
.catbtn::before,.catbtn::after{content:"";position:absolute;z-index:-1;top:-15px;width:42px;height:42px;border-radius:9px 14px 6px 14px;background:var(--ink);transform:rotate(45deg) skew(10deg,10deg);transition:transform .35s var(--spring)}
.catbtn::before{left:26px}
.catbtn::after{left:80px}
.catbtn{z-index:0}
.catbtn .face{flex:none;overflow:visible}
.catbtn .pupils{transform:translate(var(--px,0),var(--py,0));transition:transform .12s linear}
.catbtn .eyes{transform-origin:46px 22px;animation:blink 5.5s infinite}
.catbtn .tail{position:absolute;right:-42px;top:-22px;transform-origin:0 78%;transition:transform .4s var(--spring);z-index:-1}
.catbtn:hover,.catbtn:focus-visible{transform:translateY(-4px) rotate(-1.5deg)}
.catbtn:hover::before,.catbtn:focus-visible::before{transform:rotate(36deg) skew(10deg,10deg) translateY(-3px)}
.catbtn:hover::after,.catbtn:focus-visible::after{transform:rotate(54deg) skew(10deg,10deg) translateX(-3px)}
.catbtn:hover .tail,.catbtn:focus-visible .tail{animation:wag .5s ease-in-out infinite alternate}
.catbtn:active{transform:translateY(1px) scale(.98)}
.catbtn:focus-visible{outline-offset:8px;border-radius:999px}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@keyframes wag{from{transform:rotate(-9deg)}to{transform:rotate(13deg)}}

/* Das Vorschaubild: Fenster, aus dem die Katzen fallen */
.win{position:relative;display:block;aspect-ratio:11/9;color:var(--ink);text-decoration:none;transform:rotate(2deg);transition:transform .5s var(--spring)}
.win:hover{transform:rotate(.5deg) scale(1.01)}
.win-bar{position:relative;display:flex;align-items:center;gap:9px;height:13%;padding:0 18px;border-radius:26px 26px 0 0;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.win-bar b{font-weight:900;font-size:clamp(14px,1.3vw,20px);letter-spacing:-.02em}
.win-bar i{margin-left:6px;padding:3px 14px;border-radius:999px;font:500 clamp(12px,.95vw,14px)/1.4 "Archivo",sans-serif;box-shadow:inset 0 0 0 1.5px var(--ink)}
.win-body{display:block;height:87%;padding:5% 6%;border-radius:0 0 26px 26px;background:var(--acid);box-shadow:inset 0 0 0 1.5px var(--ink),0 34px 60px -24px rgba(32,33,30,.45)}
.win-body b{display:block;font-weight:900;font-size:clamp(50px,8.2vw,132px);line-height:.88;letter-spacing:-.04em}
.c{position:absolute;filter:drop-shadow(0 12px 12px rgba(32,33,30,.22));animation:fall 1.1s var(--out) backwards;will-change:transform}
.c1{width:37%;left:16%;top:55%;transform:rotate(-8deg);animation-delay:.05s}
.c2{width:30%;left:-12%;top:30%;transform:rotate(14deg);animation-delay:.2s}
.c3{width:29%;right:-5%;top:-9%;transform:rotate(18deg);animation-delay:.12s}
.c4{width:30%;right:-3%;bottom:-13%;transform:rotate(-16deg);animation-delay:.32s}
.c5{width:32%;left:52%;top:52%;transform:rotate(9deg);animation-delay:.26s}
@keyframes fall{from{translate:0 -70vh;rotate:-160deg}to{translate:0 0;rotate:0deg}}

/* Fliegende Katzen beim Klick */
.flying{position:fixed;z-index:20;pointer-events:none;width:clamp(120px,16vw,220px)}

/* Die beiden Türen: jede sieht schon aus wie ihre Seite */
.doors{padding:0 var(--gutter) clamp(56px,8vw,110px)}
.doors h2,.rest h2,.end h2{font-size:clamp(34px,4vw,58px)}
.door-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(20px,3vw,36px)}
.door{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:clamp(20px,2.4vw,34px);border-radius:26px;text-decoration:none;transition:transform .45s var(--spring)}
.door:hover{transform:translateY(-5px) rotate(-.4deg)}
.door h3{font-size:clamp(30px,3.2vw,48px)}
.door-ui{display:block;width:100%}
.door-go{display:inline-flex;align-items:center;min-height:44px;margin-top:auto}

.door-wp{background:#f0f0f1;color:#1d2327;box-shadow:inset 0 0 0 1.5px #c3c4c7;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
.door-wp h3{font-family:inherit;font-weight:600;letter-spacing:-.01em}
.wp-row{display:flex;align-items:center;gap:14px;padding:12px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px #dcdcde}
.wp-row+.wp-row{margin-top:10px}
.wp-row img{width:52px;height:52px;object-fit:contain;border-radius:10px}
.wp-row b{display:block;font-size:17px;font-weight:600;color:#2271b1}
.wp-row small{display:block;font-size:15px;line-height:1.35;color:#50575e}
.wp-btn{padding:0 18px;border-radius:4px;background:#2271b1;color:#fff;font-size:16px;font-weight:500}
.door-wp:hover .wp-btn{background:#135e96}

.door-games{background:#0b4fa8 linear-gradient(#1a6fd6,#0a3f8c);color:#fff;font-family:Verdana,Geneva,Tahoma,sans-serif}
.door-games h3{color:#ffd21f;font-family:"Archivo",sans-serif;font-style:italic;letter-spacing:-.02em;text-shadow:0 3px 0 #a33f00}
.thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.thumbs>span{display:block;padding:7px;border-radius:9px;background:#fff;color:#0a3f8c;font-size:15px;text-align:center}
.thumbs img{width:100%;border-radius:5px}
.thumbs b{display:block;padding-top:5px;overflow-wrap:anywhere}
.games-btn{padding:0 20px;border-radius:999px;background:linear-gradient(#35a300,#1f7400);box-shadow:inset 0 1px 0 #7fe04a,0 3px 0 #124d00;font-weight:700;font-size:16px}
.door-games:hover .games-btn{background:linear-gradient(#2c8d00,#196000)}

/* Rest */
.rest{padding:0 var(--gutter) clamp(56px,8vw,110px)}
.rows{margin-top:clamp(14px,2vw,24px)}
.rows>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,9fr);gap:4px clamp(20px,4vw,64px);padding-block:16px;border-top:1.5px solid var(--line)}
.rows dt{font-weight:900;font-size:clamp(21px,1.9vw,27px);letter-spacing:-.02em;line-height:1.2}
.rows dd{max-width:64ch}
.rows dt a{text-decoration-color:transparent;transition:text-decoration-color .2s}
.rows dt a:hover{text-decoration-color:currentColor}
.rows dd a{display:inline-block;min-height:24px}
.about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,9fr);gap:24px clamp(20px,4vw,64px);margin-top:clamp(14px,2vw,24px)}
.about p+p{margin-top:12px;max-width:40ch}
.tech>div{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:0 18px;padding-block:9px;border-top:1.5px solid var(--line)}
.tech dt{font-weight:900;letter-spacing:-.01em}

/* Schluss */
.end{position:relative;overflow:hidden;padding:clamp(48px,7vw,96px) var(--gutter) 16px;background:var(--acid)}
.mail{display:block;width:max-content;max-width:100%;margin-top:6px;font-weight:900;font-size:clamp(34px,9.4vw,160px);letter-spacing:-.045em;line-height:1.02;overflow-wrap:anywhere;text-decoration-color:transparent;transition:text-decoration-color .2s}
.mail:hover{text-decoration-color:currentColor}
.end-cat{position:absolute;right:clamp(-30px,1vw,40px);top:clamp(4px,1.6vw,26px);width:clamp(100px,17vw,250px);transform:rotate(-6deg)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 24px;margin-top:clamp(28px,4vw,56px)}
.foot a{display:inline-flex;align-items:center;min-height:44px}

/* 404 */
.nf{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;background:var(--acid)}
.nf main{overflow-x:clip;position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter) 40px}
.nf h1{font-size:clamp(120px,27vw,420px);letter-spacing:-.05em;line-height:.85}
.nf .lede{margin-top:18px;max-width:34ch}
.nf .acts{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-top:24px}
.nf .act{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--acid);font-weight:900;text-decoration:none}
.nf .acts a:not(.act){display:inline-flex;align-items:center;min-height:48px}
.nf-cat{position:absolute;right:4vw;top:4%;width:min(38vw,430px);transform:rotate(14deg);filter:drop-shadow(0 16px 16px rgba(32,33,30,.25));animation:fall 1.1s var(--out) backwards}

@media (max-width:800px){
  body{font-size:17px}
  .hero{grid-template-columns:minmax(0,1fr);gap:clamp(26px,8vw,48px);padding-bottom:64px}
  .hero h1{font-size:clamp(44px,13vw,84px)}
  .win{order:0;margin-inline:3vw}
  .win-bar i{display:none}
  .win-body b{font-size:17.5vw}
  .catbtn{gap:12px;padding:12px 26px 12px 16px;font-size:clamp(21px,6.2vw,30px)}
  .catbtn .face{width:74px;height:44px}
  .catbtn::before{left:20px}
  .catbtn::after{left:64px}
  .catbtn::before,.catbtn::after{width:34px;height:34px;top:-12px}
  .catbtn .tail{right:-24px;width:44px;height:60px;top:-14px}
  .door-row,.rows>div,.about{grid-template-columns:minmax(0,1fr)}
  .tech>div{grid-template-columns:minmax(0,1fr)}
  .nf-cat{position:relative;right:auto;top:auto;align-self:flex-end;width:44vw;margin-bottom:-6vw}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .c,.nf-cat,.catbtn .eyes,.catbtn:hover .tail{animation:none}
  .catbtn,.win,.door,.catbtn::before,.catbtn::after{transition:none}
}