:root{--text:#f2fdff;--muted:rgba(242,253,255,.76);--glass-border:rgba(231,252,255,.38);--meta-blue:#7deeff;--meta-violet:#c27bff;--meta-red:#ff604d;--meta-green:#8df0a6}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden;color:var(--text);background:#031824;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.ocean{position:relative;min-height:100vh;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 52% 28%,rgba(127,244,255,.38),transparent 24%),radial-gradient(circle at 48% 62%,rgba(51,177,202,.18),transparent 34%),linear-gradient(180deg,#0c7893 0%,#07536d 38%,#032231 76%,#02131d 100%)}
.ocean:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.48),transparent 22%,transparent 75%,rgba(0,0,0,.44)),linear-gradient(180deg,rgba(255,255,255,.10),transparent 29%,rgba(0,0,0,.28));pointer-events:none}
.water{position:absolute;inset:-10%;z-index:2;pointer-events:none;opacity:.28}.water-a{background:repeating-linear-gradient(100deg,transparent 0 80px,rgba(255,255,255,.12) 82px 100px,transparent 102px 260px);filter:blur(8px);animation:driftRight 36s linear infinite}.water-b{background-image:radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 2px);background-size:180px 130px;opacity:.14;animation:driftRight 54s linear infinite reverse}
.light-rays{position:absolute;top:-8%;left:0;right:0;height:55vh;z-index:3;background:conic-gradient(from 192deg at 47% 0%,transparent 0 8deg,rgba(234,253,255,.28) 11deg,transparent 16deg 29deg,rgba(234,253,255,.18) 33deg,transparent 39deg 360deg);filter:blur(10px);opacity:.62;animation:rays 11s ease-in-out infinite alternate}
.reef{position:absolute;bottom:-5vh;width:32vw;height:48vh;z-index:4;opacity:.5;pointer-events:none;background:radial-gradient(ellipse at 20% 96%,#163b2e 0 6%,transparent 7%),radial-gradient(ellipse at 35% 95%,#244c3b 0 9%,transparent 10%),radial-gradient(ellipse at 55% 98%,#21324b 0 12%,transparent 13%),radial-gradient(ellipse at 73% 96%,#37405c 0 8%,transparent 9%)}.reef:before{content:"";position:absolute;bottom:12%;left:8%;width:80%;height:70%;background:repeating-linear-gradient(82deg,transparent 0 22px,rgba(102,164,93,.34) 23px 27px,transparent 28px 46px),repeating-linear-gradient(112deg,transparent 0 28px,rgba(74,142,103,.26) 29px 34px,transparent 35px 56px);mask:linear-gradient(0deg,#000 0%,transparent 85%)}.reef-left{left:-4vw}.reef-right{right:-7vw;transform:scaleX(-1)}
.intro{position:absolute;left:clamp(26px,4.6vw,70px);top:clamp(34px,6vh,76px);z-index:30;width:min(510px,38vw);text-shadow:0 10px 32px rgba(0,0,0,.34)}.eyebrow{margin:0 0 1rem;font-size:.82rem;letter-spacing:.19em;text-transform:uppercase;color:rgba(242,253,255,.82)}h1{margin:0;font-size:clamp(3.1rem,5.25vw,6.5rem);line-height:.93;letter-spacing:-.065em}.intro p:last-child{max-width:34rem;font-size:clamp(1rem,1.25vw,1.22rem);line-height:1.35;color:var(--muted);margin:1.2rem 0 0}
.tomatinfish-stage{position:absolute;left:52%;top:53%;width:min(52vw,880px);transform:translate(-50%,-50%);z-index:20;pointer-events:none}.fish-motion{position:relative;z-index:4;animation:floatFish 6.8s ease-in-out infinite}.tomatinfish{display:block;width:100%;height:auto;filter:drop-shadow(0 36px 34px rgba(0,0,0,.34)) drop-shadow(0 0 34px rgba(255,100,62,.14));transform-origin:70% 52%;animation:fishBody 3.9s ease-in-out infinite}.halo{position:absolute;inset:12% 5% 10% 5%;z-index:1;background:radial-gradient(ellipse,rgba(176,249,255,.22),transparent 65%);filter:blur(28px);animation:halo 7s ease-in-out infinite alternate}.fish-shadow{position:absolute;left:20%;right:17%;bottom:-3%;height:12%;z-index:0;border-radius:50%;background:rgba(0,0,0,.24);filter:blur(26px);animation:shadow 6.8s ease-in-out infinite}
.swimlane{position:absolute;inset:0;z-index:14;pointer-events:none}.creature{--top:50%;--dur:60s;--delay:0s;--scale:1;position:absolute;top:var(--top);left:-30vw;display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--text);animation:swimPast var(--dur) linear infinite;animation-delay:var(--delay);pointer-events:auto;filter:drop-shadow(0 20px 24px rgba(0,0,0,.32))}.creature img{width:clamp(120px,16vw,290px);height:auto;transform:scaleX(var(--mirror,1));animation:animalWaver var(--motion-dur,18s) ease-in-out infinite;transform-origin:50% 55%}.creature span{--meta-color:var(--meta-blue);display:inline-flex;align-items:center;justify-content:center;width:max-content;min-width:128px;min-height:44px;padding:.58rem 1.08rem;border:1.5px solid color-mix(in srgb,var(--meta-color) 72%,rgba(231,252,255,.34));border-radius:999px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.46),transparent 34%),linear-gradient(180deg,rgba(198,245,255,.24),rgba(23,71,91,.39));backdrop-filter:blur(12px);box-shadow:inset 0 1px 10px rgba(255,255,255,.2),0 14px 30px rgba(0,0,0,.26),0 0 16px color-mix(in srgb,var(--meta-color) 32%,transparent);font-weight:850;font-size:16px;line-height:1.08;white-space:nowrap;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.54),0 0 8px rgba(255,255,255,.18);transition:transform .25s ease,box-shadow .25s ease;animation:labelBlubber var(--label-dur,22s) ease-in-out infinite;animation-delay:var(--label-delay,0s)}.creature[data-meta=blue]{--meta-color:var(--meta-blue)}.creature[data-meta=violet]{--meta-color:var(--meta-violet)}.creature[data-meta=red]{--meta-color:var(--meta-red)}.creature[data-meta=green]{--meta-color:var(--meta-green)}.creature[data-meta] span{--meta-color:inherit}
.label-bubble-emitter{position:absolute;left:58%;top:48%;width:1px;height:1px;pointer-events:none}.thought-bubble{position:absolute;left:var(--tb-left);top:48%;width:var(--tb-size);height:var(--tb-size);border-radius:50%;border:1px solid rgba(255,255,255,.42);background:radial-gradient(circle at 33% 30%,rgba(255,255,255,.86),rgba(255,255,255,.14) 35%,transparent 74%);box-shadow:0 0 10px color-mix(in srgb,var(--meta-color,var(--meta-blue)) 55%,transparent);opacity:0;pointer-events:none;animation:thoughtBubbleUp var(--tb-dur,7s) ease-out forwards;animation-delay:var(--tb-delay,0s);z-index:-1}
.creature:hover,.creature:focus-visible{animation-play-state:paused;z-index:50}.creature:hover span,.creature:focus-visible span{transform:translateY(-6px) scale(1.06);box-shadow:inset 0 1px 14px rgba(255,255,255,.27),0 18px 36px rgba(0,0,0,.28),0 0 42px rgba(174,250,255,.28)}.creature:hover img,.creature:focus-visible img{animation-play-state:paused;transform:scaleX(var(--mirror,1)) translateY(-5px)}
.bubble-field{position:absolute;inset:0;z-index:10;pointer-events:none}.bubble{position:absolute;bottom:-45px;left:var(--left);width:var(--size);height:var(--size);border-radius:50%;border:1px solid rgba(255,255,255,.34);background:radial-gradient(circle at 33% 30%,rgba(255,255,255,.88),rgba(255,255,255,.12) 29%,transparent 72%);opacity:.52;animation:bubbleUp var(--dur) linear infinite;animation-delay:var(--delay)}
.bottom-hint,.pause{position:absolute;z-index:40;bottom:clamp(22px,4vh,46px);color:rgba(242,253,255,.86)}.bottom-hint{left:clamp(28px,4.8vw,76px);display:flex;gap:.8rem;align-items:center;font-weight:650}.mouse-symbol{width:24px;height:38px;border:2px solid rgba(242,253,255,.8);border-radius:999px;position:relative}.mouse-symbol:before{content:"";position:absolute;left:50%;top:6px;width:3px;height:9px;transform:translateX(-50%);border-radius:99px;background:rgba(242,253,255,.9)}.pause{right:clamp(28px,4.8vw,76px);display:flex;align-items:center;gap:.7rem;border:0;background:transparent;font:inherit;cursor:pointer}.pause-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.44);border-radius:50%;background:rgba(0,0,0,.18);backdrop-filter:blur(8px)}
.is-paused *,.is-paused *:before,.is-paused *:after{animation-play-state:paused!important}
@keyframes swimPast{0%{transform:translateX(0) translateY(0);opacity:0}7%{opacity:1}52%{transform:translateX(78vw) translateY(-18px);opacity:1}93%{opacity:1}100%{transform:translateX(150vw) translateY(9px);opacity:0}}@keyframes floatFish{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-14px) rotate(.35deg)}}@keyframes fishBody{0%,100%{transform:skewX(0deg) scaleX(1)}50%{transform:skewX(-1.4deg) scaleX(1.018)}}@keyframes halo{from{opacity:.54;transform:scale(.98)}to{opacity:.86;transform:scale(1.05)}}@keyframes shadow{0%,100%{transform:scaleX(1);opacity:.62}50%{transform:scaleX(.86);opacity:.43}}@keyframes animalWaver{0%,100%{filter:brightness(1);transform:scaleX(var(--mirror,1)) translateY(0) rotate(calc(var(--motion-rot,1deg) * -.35))}33%{filter:brightness(1.08);transform:scaleX(var(--mirror,1)) translateY(calc(var(--motion-amp,6px) * -1)) rotate(var(--motion-rot,1deg))}66%{filter:brightness(1.03);transform:scaleX(var(--mirror,1)) translateY(calc(var(--motion-amp,6px) * -.35)) rotate(calc(var(--motion-rot,1deg) * -.75))}}@keyframes labelBlubber{0%,100%{transform:translateY(0) translateX(0)}25%{transform:translateY(calc(var(--label-amp,4px) * -1)) translateX(2px)}50%{transform:translateY(calc(var(--label-amp,4px) * -.35)) translateX(-2px)}75%{transform:translateY(calc(var(--label-amp,4px) * -1.15)) translateX(1px)}}@keyframes thoughtBubbleUp{0%{opacity:0;transform:translateY(0) translateX(0) scale(.75)}15%{opacity:.62}85%{opacity:.45}100%{opacity:0;transform:translateY(-92px) translateX(var(--tb-drift,18px)) scale(1.22)}}@keyframes driftRight{from{transform:translateX(-8%)}to{transform:translateX(8%)}}@keyframes rays{from{transform:translateX(-2%) rotate(-1deg)}to{transform:translateX(2%) rotate(1deg)}}@keyframes bubbleUp{0%{transform:translateY(0) translateX(0);opacity:0}12%{opacity:.55}100%{transform:translateY(-112vh) translateX(var(--drift));opacity:0}}


/* Individuelle PNG-Feinjustierung. Wichtig: Die Labels werden nicht mehr mitskaliert; nur die Lebewesen bekommen ihre eigene Größe. */
.creature img{width:clamp(82px,9vw,150px)}
.creature.school img{width:clamp(100px,10vw,155px)}
.creature.ray img{width:clamp(82px,8.5vw,135px)}
.creature.shell img{width:clamp(74px,7.5vw,118px)}
.creature.horse img{width:clamp(76px,7.5vw,124px)}
.creature.mobius img{width:clamp(92px,9vw,150px)}
.creature.lightfish img{width:clamp(92px,9vw,145px)}
.creature.octopus img{width:clamp(95px,9vw,150px)}
.creature.shark img{width:clamp(112px,11vw,170px)}
.creature span br{display:block}
.creature.octopus span{min-width:190px}
.creature.horse span,.creature.shell span{min-width:118px}
@media (max-width:920px){.intro{width:calc(100vw - 42px);top:24px}h1{font-size:clamp(2.8rem,12vw,5rem)}.intro p:last-child{max-width:24rem}.tomatinfish-stage{width:112vw;left:54%;top:58%}.creature img{width:150px}.creature span{font-size:14px;min-height:40px;min-width:112px;padding:.5rem .86rem}.bottom-hint span:last-child{display:none}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}


/* Metasprache: Rot markiert die Tomatinfisch-Eigenwelt / persönliche Handschrift. */
.tomato-word{color:#ff1f16;text-shadow:0 10px 32px rgba(0,0,0,.38),0 0 22px rgba(255,31,22,.12)}
.impressum-crab{position:absolute;left:50%;bottom:clamp(26px,3.5vh,42px);z-index:42;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--text);transform:translateX(-50%);filter:drop-shadow(0 22px 25px rgba(0,0,0,.34));transition:transform .25s ease,filter .25s ease}
.impressum-crab span{position:relative;z-index:2;margin-bottom:-10px;padding:.62rem 1.18rem;border:1.5px solid color-mix(in srgb,var(--meta-red) 72%,rgba(231,252,255,.34));border-radius:999px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.45),transparent 34%),linear-gradient(180deg,rgba(198,245,255,.24),rgba(23,71,91,.42));backdrop-filter:blur(12px);box-shadow:inset 0 1px 10px rgba(255,255,255,.2),0 14px 28px rgba(0,0,0,.24),0 0 18px color-mix(in srgb,var(--meta-red) 35%,transparent);font-weight:850;font-size:clamp(1rem,1.1vw,1.2rem);text-shadow:0 2px 12px rgba(0,0,0,.34);animation:labelBlubber 24s ease-in-out infinite;animation-delay:-9s}
.impressum-crab img{width:clamp(130px,12vw,210px);height:auto;display:block;animation:crabBob 5.4s ease-in-out infinite}
.impressum-crab:before,.impressum-crab:after{content:"";position:absolute;left:52%;top:10%;width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.42);background:radial-gradient(circle at 33% 30%,rgba(255,255,255,.86),rgba(255,255,255,.16) 36%,transparent 74%);box-shadow:0 0 12px color-mix(in srgb,var(--meta-red) 50%,transparent);opacity:0;animation:thoughtBubbleUp 8.5s ease-out infinite}.impressum-crab:after{left:60%;width:6px;height:6px;animation-delay:3.4s;animation-duration:10s}
.impressum-crab:hover,.impressum-crab:focus-visible{transform:translateX(-50%) translateY(-6px);filter:drop-shadow(0 28px 30px rgba(0,0,0,.38)) drop-shadow(0 0 22px rgba(255,83,48,.18));outline:none}
@keyframes crabBob{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-7px) rotate(.35deg)}}
@media (max-width:920px){.impressum-crab{bottom:72px}.impressum-crab img{width:126px}.impressum-crab span{font-size:.86rem;padding:.5rem .9rem}}

/* ------------------------------------------------------------
   Responsive-Feinschliff v06
   Ziel: mehr Wasser um den Tomatinfisch, weniger Überlappung mit
   der Impressums-Krabbe auf Notebook-Displays mit geringer Höhe.
------------------------------------------------------------ */
.tomatinfish-stage{
  left:55%;
  top:54%;
  width:min(47vw,780px);
}

.impressum-crab{
  bottom:clamp(8px,1.2vh,18px);
}

.impressum-crab img{
  width:clamp(96px,8.2vw,148px);
}

.impressum-crab span{
  font-size:clamp(.82rem,.9vw,1rem);
  padding:.48rem .96rem;
  margin-bottom:-8px;
}

/* typische Notebook-Höhen: Fisch etwas kleiner und weiter nach rechts,
   die Krabbe sitzt näher am Meeresboden. */
@media (max-height:850px){
  .tomatinfish-stage{
    left:56%;
    top:55%;
    width:min(44vw,720px);
  }
  .impressum-crab{
    bottom:6px;
  }
  .impressum-crab img{
    width:clamp(86px,7.4vw,118px);
  }
  .impressum-crab span{
    font-size:.78rem;
    padding:.42rem .82rem;
    margin-bottom:-7px;
  }
}

/* sehr niedrige Displays: Serviceelemente und Hauptfigur weiter entflechten. */
@media (max-height:720px){
  .tomatinfish-stage{
    top:56%;
    width:min(40vw,620px);
  }
  .impressum-crab img{
    width:84px;
  }
  .impressum-crab span{
    font-size:.72rem;
  }
}

/* Kleine Breiten behalten eigene Logik, aber mit kleinerer Krabbe. */
@media (max-width:920px){
  .tomatinfish-stage{
    width:100vw;
    left:56%;
    top:59%;
  }
  .impressum-crab{
    bottom:54px;
  }
  .impressum-crab img{
    width:104px;
  }
}