/* --- Raster --- */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  width: 100%;
  max-width: 1200px;
}

.about-container {
  grid-column: 1 / -1;
  width: 100%;
  position: relative;
  font-size: clamp(26px, 5vw, 36px);
  font-weight: var(--font-weight-normal);
  text-align: left;
  padding-top: clamp(12px, 2.5vh, 56px);
  padding-bottom: clamp(48px, 9vw, 86px);
}

/* --- Pillen im Fließtext --- */
.hover-name  {
  padding: 0px 7.5px 2.5px 7.5px;
  border-radius: var(--radius-pill);
  border: var(--stroke) solid var(--color-text);
}

.hover-name:hover {
  cursor: none;
  background-color: var(--color-text);
  color: var(--color-bg);
}

.hover-p5 {
  padding: 0px 7.5px 2.5px 7.5px;
  border-radius: var(--radius-pill);
  border: var(--stroke) solid var(--color-text);
}

.hover-p5:hover {
  cursor: pointer;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.hover-p5-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  cursor: pointer;
}

.hover-mail {
  position: relative;
  overflow: hidden;
  padding: 0px 7.5px 2.5px 7.5px;
  border-radius: var(--radius-pill);
  border: var(--stroke) solid #000;
  background-image: linear-gradient(to right, #000, #000);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left;
  transition: background-size 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out;
  z-index: 0;
}

.hover-mail:hover {
  cursor: pointer;
  color: #fff;
  background-size: 100% 100%;
}

.hover-mail:hover::after {
  content: "\00a0💌";
}

/* --- p5-Overlay --- */
.hidden {
  display: none !important;
}

#p5-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  pointer-events: none;
}

#p5-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

header, footer {
  position: relative;
  z-index: 1000;
}

canvas {
  pointer-events: none !important;
}

/* --- Farbwechsel --- */
.color-changing-box {
  padding: 0px 7.5px 2.5px 7.5px;
  border-radius: var(--radius-pill);
  display: inline-block;
  animation: colorChange 5s infinite step-end;
}

@keyframes colorChange {
  0% { background-color: var(--color-lime); }
  20% { background-color: var(--color-pink); }
  40% { background-color: var(--color-green); }
  60% { background-color: var(--color-orange); }
  80% { background-color: var(--color-blue); }
  100% { background-color: var(--color-lime); }
}

/* --- Lebenslauf --- */
.cv-category {
  display: flex;
  flex-direction: column;
}

.cv-category h2 {
  font-size: var(--text-m);
  font-weight: var(--font-weight-bold);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: var(--space-xs);
  padding-top: var(--space-xs);
}

.cv-item {
  display: flex;
  flex-direction: column;
  font-size: var(--text-m);
  font-weight: var(--font-weight-normal);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: var(--space-xs);
  padding-top: var(--space-xs);
}

.cv-date {
  font-variant-numeric: tabular-nums;
}

/* --- Links --- */
.link {
  color: var(--color-pink);
  cursor: pointer;
  text-decoration: none;
  transition: text-decoration 0.4s ease-in-out
}

.link:hover {
  text-decoration: underline;
}

/* --- Handy --- */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}