.about-hero { margin-top: 10px; }
.about-grid{
  display:grid;
  gap:14px;
  grid-template-columns: 1fr;
}
.about-card{
  position:relative;
  overflow:hidden;
}
.about-card::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(520px 240px at 20% 0%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(420px 260px at 90% 10%, rgba(61,214,208,.14), transparent 62%);
  opacity:.85;
  pointer-events:none;
}
.about-card > *{ position:relative; }
.about-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
  margin-bottom:10px;
}
.about-spark{
  width:14px; height:14px;
  border-radius:6px;
  background: linear-gradient(180deg, rgba(124,92,255,.95), rgba(61,214,208,.75));
  box-shadow: 0 10px 22px rgba(124,92,255,.22);
}

.about-h2{ 
  margin-top:8px;
  margin-bottom:8px;
}
.about-immunity{
  display:flex;
  width: auto;
  margin: auto;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  margin-top:12px;
}
.about-immunity span{
  text-align: center;
  margin-left: auto;
}
.about-meter{
  width:66%;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.about-bar{
  height:100%;
  width:72%;
  background: linear-gradient(90deg, rgba(61,214,208,.85), rgba(124,92,255,.85));
  animation: aboutPulse 2.4s ease-in-out infinite;
  transform-origin:left;
}
@keyframes aboutPulse{
  0%,100%{ transform:scaleX(1); }
  50%{ transform:scaleX(.93); }
}

.about-cta{
  display: flex;
  gap: 4px;
  margin-top:12px;
}
.about-btn{
  border-radius:14px;
  font-weight:800;
  letter-spacing:.2px;
  padding: 0 5px;
  padding-top: 3px;
  text-align: center;
}
.about-btn:nth-of-type(1){
  background: linear-gradient(180deg, rgba(124,92,255,.95), rgba(124,92,255,.72));
  border-color: rgba(124,92,255,.35);
}
.about-btn:nth-of-type(2){
  background: linear-gradient(180deg, rgba(61,214,208,.85), rgba(61,214,208,.72));
  border-color: rgba(61,214,208,.35);
}
.about-btn:nth-of-type(3){
  background: linear-gradient(180deg, rgba(255,0,110,.95), rgba(255,0,110,.72));
  border-color: rgba(255,0,110,.35);
}

.about-tech{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.about-tech svg{
  font-size:34px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  cursor:pointer;
  outline:none;
  transition: transform .12s ease, border-color .2s ease;
}
.about-tech svg:hover{
  transform: translateY(-1px);
  border-color: rgba(124,92,255,.35);
}
.about-tech svg:focus-visible{
  box-shadow: var(--focus);
}
.about-note{
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.about-list {
  width: 100%;
  list-style:none;
  padding:0;
  margin: 0;
  margin-bottom:8px;
}

.about-list li{
  display:flex;
  gap:15px;
  align-items: center;
  width: 100%;
  padding: 6px;
  margin-top:5px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
}
.about-list span{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
  box-shadow: 0 16px 46px rgba(0,0,0,.42);
  transition: transform .12s ease, filter .12s ease;
  border:1px solid rgba(255,255,255,.10);
}
.about-list span svg{
  display:block;
}

.about-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.68);
  border:1px solid rgba(255,255,255,.14);
  padding:10px 12px;
  border-radius:16px;
  color:var(--text);
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  max-width:min(92vw, 680px);
  backdrop-filter: blur(8px);
  z-index:50;
}
.about-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}
.about-profile{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:12px;
}
.about-avatar-wrap{
  width:99px;
  height:99px;
  border-radius:50%;
  padding:3px;
  background:
    linear-gradient(135deg, #7c5cff, #3dd6d0, #7c5cff);
  box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 0 6px rgba(124,92,255,.10);
  flex:0 0 auto;
  position:relative;
  background-size: 300% 300%;
  animation: bannerGlow 3s ease-in-out infinite;
}
.about-avatar-wrap::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background: #0b0d12;
  border:1px solid rgba(255,255,255,.12);
  background-image: url("https://riko-keil.de/aboutme/cat.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.about-avatar-wrap:hover{
  transform: translateY(-1px);
}
.about-avatar-wrap{
  transition: transform .12s ease;
}
/* Mobile */
@media (max-width: 460px){
  .about-avatar-wrap{
    width:99px;
    height:99px;
  }
}

.card, .noise, header, main, footer{
  position: relative;
  z-index: 2;
}
#egg-bg{
  position: fixed;
  inset: 0;
  z-index: 0;               
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.miau-mode #egg-bg{
  opacity: 1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Ctext x='10' y='55' font-size='34'%3E%F0%9F%90%BE%3C/text%3E%3Ctext x='120' y='140' font-size='34'%3E%F0%9F%90%BE%3C/text%3E%3Ctext x='40' y='190' font-size='34'%3E%F0%9F%90%BE%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 220px 220px;
}
#img-viewer{
  position:fixed;
  inset:0;
  background:rgba(7,8,12,.88);
  backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index:9999;
}
#img-viewer.show{
  opacity:1;
  pointer-events:auto;
}
#img-viewer-box{
  width: min(92vw, 720px);
  aspect-ratio: 4 / 3; 
  background-image: var(--viewer-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; 
  border-radius: 18px;
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 40px rgba(255,224,138,.25);

  transition: aspect-ratio .25s ease;
}
  box-shadow:
    0 30px 80px rgba(0,0,0,.75),
    0 0 0 2px rgba(255,255,255,.12);
  animation: zoomIn .18s ease;
}
@keyframes zoomIn{
  from{ transform: scale(.94); opacity:.6 }
  to{ transform: scale(1); opacity:1 }
}

#img-viewer{
  touch-action: none;
}
#img-viewer.show #img-viewer-dots{ pointer-events:auto; }
#img-viewer-box{
  will-change: transform;
  transform: translate3d(0,0,0) scale(1);
  touch-action: none;
  user-select: none;
}

/* Optional: kleine Gallery-Anzeige */
#img-viewer-hint{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  opacity: 0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index: 10000;
}
#img-viewer.show + #img-viewer-hint{
  opacity: 1;
}
#img-viewer-dots{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 10000;
}

#img-viewer.show #img-viewer-dots{
  opacity: 1;
}

.img-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,.05);
}

.img-dot.active{
  background: rgba(255,255,255,.92);
  box-shadow:
    0 0 0 3px rgba(124,92,255,.16),
    0 10px 22px rgba(124,92,255,.18);
}

#aboutTech{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin: 0 auto;
  justify-items:center;
  align-items:center;
}
@media (min-width: 720px){
  #aboutTech{
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 1.2rem;
  justify-items: center;
}
}
#aboutTech svg{
  max-width: 90px;
}
#aboutTech svg:focus-visible{ 
  box-shadow: var(--focus); 
}
#aboutTech svg.active{
  outline: 2px solid rgba(124,92,255,.6);
  outline-offset: 4px;
  opacity:1;
}
#aboutTechInfo{
  margin-top:14px;
  margin-bottom:18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  display:block;        
  overflow:hidden;
  opacity:0;
  max-height:0;
  transform: translateY(-6px);
  padding: 0 14px;      
  transition:
  opacity .22s ease,
  transform .22s ease,
  max-height .35s ease,
  padding .22s ease;
}

#aboutTechInfo.open{
  opacity:1;
  transform: translateY(0);
  max-height: 220px;    
  padding: 12px 14px; 
}
@media (min-width: 900px){
  .about-grid{
    width: 100%;
  }
}
.availability-banner{
  display:flex;
  align-items:center;
  gap:12px;
  position: relative;
  padding:12px 14px;
  margin-bottom:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(124,92,255,.12), rgba(61,214,208,.08)),
    rgba(0,0,0,.35);
  color:var(--text);
  font-size:14px;
}
.availability-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(124,92,255,.95),
    #3dd6d0,
    rgba(124,92,255,.95)
  );
  background-size: 300% 300%;
  animation: bannerGlow 3s ease-in-out infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
@keyframes bannerGlow{
  0%{
    background-position: 0% 50%;
    opacity: .75;
  }
  50%{
    background-position: 100% 50%;
    opacity: 1;
  }
  100%{
    background-position: 0% 50%;
    opacity: .75;
  }
}
.availability-banner p{
  margin:0;
  position:relative;
}
.status-dot{
  position:relative;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#3dd6d0;
  box-shadow:
    0 0 0 2px rgba(61,214,208,.25),
    0 0 14px rgba(61,214,208,.55);
  flex:0 0 auto;
}
.status-dot::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(61,214,208,.35);
  animation: ringPulse 2.2s ease-out infinite;
}
@keyframes ringPulse{
  0%   { transform: scale(.7); opacity: 0; }
  40%  { opacity: .6; }
  100% { transform: scale(1.4); opacity: 0; }
}

hr{
  display:block;
  width:100%;
  flex: 0 0 100%;
  align-self: stretch;
  border: 0;
  height: 2px;
  margin: 2rem 0 !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124,92,255,.35),
    rgba(61,214,208,.22),
    rgba(255,255,255,.10),
    transparent
  );
  box-shadow:
    0 0 12px rgba(124,92,255,.22),
    0 0 18px rgba(61,214,208,.14);
  pointer-events:none;
}
#img-viewer-box{ 
  aspect-ratio: 1 / 1; 
  touch-action: none;
} /* oder 4/3, was bei dir passt */