/* von Chat GPT erstellt / bereinigt */

/* ========== BASIS ========== */

html {
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1.2;
  color: black;
}

body {
  margin: 20px;
  background-color: white;
}

dl {
  margin: 0;
}

/* ========== LINKS ========== */

a:link,
a:visited {
  color: black;
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: break-word;
}

a:hover {
  color: blue;
  text-decoration: none;
}

/* ========== GRID ========== */

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 30px;
}

.wrapper > * {
  grid-column: col-start / span 10;
}

/* ========== GIF ANIMATION ========== */

.gif-wrapper {
  position: fixed;
  bottom: 10vh;
  left: 0;
  width: 100vw;
  overflow: visible;
}

.gif-runner {
  position: relative;
  height: 30vh;              /* 🔑 ZWINGEND */
  animation: run 6s linear infinite;
  display: flex;
  align-items: flex-end;     /* falls du es am Boden willst */
  will-change: transform;
}

.gif-runner img {
  height: 100%;              /* 🔑 ENTSCHEIDEND */
  width: auto;
  display: block;
}

@keyframes run {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Hover-Pause nur auf Geräten mit Hover */
@media (hover: hover) {
  .gif-runner:hover {
    animation-play-state: paused;
  }
}

/* ========== MEDIA QUERY: < 1350px ========== */

@media (max-width: 1350px) {

  .first { font-size: 0.8em; }
  .second { font-size: 0.8em; }
  .third { font-size: 0.3em; }
  .currentlink { font-size: 1em; }

  .links {
    grid-column: col-start / span 3;
    width: 400px;
  }

  .mitte {
    display: grid;
    grid-column: col-start / span 2;
    overflow-wrap: break-word;
    word-break: break-word;
    text-decoration: none;
  }

  .mitte a {
    display: inline-block;
    color: blue;
    text-decoration: none;
  }

  .mitte:hover a {
    text-decoration: underline;
  }

  .unten {
    display: grid;
    grid-column: col-start / span 10;
    position: fixed;
    bottom: 10px;
    background-color: white;
    padding: 5px 5px 5px 0;
  }

  #risocolors {
    display: grid;
    grid-column: col-start / span 10;
    grid-row-gap: 20px;
    max-width: 200px;
  }

  .gif-runner {
    animation-duration: 7s;
  }
}

/* ========== MEDIA QUERY: 1350px – 1850px ========== */

@media (min-width: 1350px) and (max-width: 1850px) {

  .first { font-size: 1em; }
  .second { font-size: 0.8em; }
  .third { font-size: 0.6em; }
  .currentlink { font-size: 1em; }

  .oben {
    grid-column: col-start / span 8;
    grid-row: 1;
  }

  .links {
    grid-column: col-start / span 3;
    grid-row: 3;
  }

  .mitte {
    grid-column: col-start / span 3;
    grid-row: 5;
    width: 400px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .mitte:hover {
    text-decoration: underline wavy red;
  }

  .mitte a {
    display: inline-block;
    color: blue;
    text-decoration: none;
  }

  .mitte:hover a {
    text-decoration: underline;
  }

  .unten {
    display: grid;
    grid-column: col-start / span 10;
    position: fixed;
    bottom: 10px;
    background-color: white;
    padding: 5px 5px 5px 0;
  }

  #risocolors {
    display: grid;
    grid-column-start: col-start;
    grid-row-start: 5;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding-top: 80px;
    max-width: 50%;
    grid-template:
      "a b"
      "c d"
      "e f"
      "g h"
      "i j"
      "k l"
      "m .";
  }

  #risocolors > .schwarz  { grid-area: a; }
  #risocolors > .braun    { grid-area: b; }
  #risocolors > .grau     { grid-area: c; }
  #risocolors > .jaeger   { grid-area: d; }
  #risocolors > .gelb     { grid-area: e; }
  #risocolors > .rot      { grid-area: f; }
  #risocolors > .blau     { grid-area: g; }
  #risocolors > .pink     { grid-area: h; }
  #risocolors > .gruen    { grid-area: i; }
  #risocolors > .orange   { grid-area: j; }
  #risocolors > .teal     { grid-area: k; }
  #risocolors > .f-orange { grid-area: l; }
  #risocolors > .aqua     { grid-area: m; }

  .gif-runner {
    animation-duration: 10s;
  }
}

/* ========== MEDIA QUERY: > 1850px ========== */

@media (min-width: 1850px) {

  .first { font-size: 1.2em; }
  .second { font-size: 1em; }
  .third { font-size: 0.7em; }
  .currentlink { font-size: 1em; }

  .oben {
    grid-column: col-start / span 8;
    grid-row: 1;
  }

  .links {
    grid-column: col-start / span 3;
    grid-row: 3;
  }

  .mitte {
    grid-column: col-start / span 3;
    grid-row: 5;
    width: 400px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .mitte:hover {
    text-decoration: underline wavy red;
  }

  .mitte a {
    display: inline-block;
    color: blue;
    text-decoration: none;
  }

  .mitte:hover a {
    text-decoration: underline;
  }

  .unten {
    display: grid;
    grid-column: col-start / span 10;
    position: fixed;
    bottom: 10px;
    background-color: white;
    padding: 5px 5px 5px 0;
  }

  .info {
    grid-column: col-start 7 / span 3;
    grid-row: 3;
  }

  .info2 {
    grid-column: col-start 4 / span 3;
    grid-row: 3;
  }

  #risocolors {
    display: grid;
    grid-column-start: col-start;
    grid-row-start: 5;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: 50%;
    grid-template:
      "a b c"
      "d e f"
      "g h i"
      "j k l"
      "m . .";
  }

  #risocolors > .schwarz  { grid-area: a; }
  #risocolors > .braun    { grid-area: b; }
  #risocolors > .grau     { grid-area: c; }
  #risocolors > .jaeger   { grid-area: d; }
  #risocolors > .gelb     { grid-area: e; }
  #risocolors > .rot      { grid-area: f; }
  #risocolors > .blau     { grid-area: g; }
  #risocolors > .pink     { grid-area: h; }
  #risocolors > .gruen    { grid-area: i; }
  #risocolors > .orange   { grid-area: j; }
  #risocolors > .teal     { grid-area: k; }
  #risocolors > .f-orange { grid-area: l; }
  #risocolors > .aqua     { grid-area: m; }

  .gif-runner {
    animation-duration: 12s;
  }
}

/* MOBILE MEDIA QUERY */

@media (max-width: 768px) {

  .gif-runner {
    height: 200px;              /* statt vh */
    animation-duration: 5s;
    animation-play-state: running;
  }

  .gif-runner img {
    height: 200px;
    width: auto;
  }
}