body {
      margin: 0;
      font-family: "IBM Plex Mono", monospace;
       background-color: rgb(226, 255, 100);
    }

    /* Basis: Mobile zuerst */
.grid {
  display: grid;
  gap: 14px;
  padding: 14px;
  grid-template-columns: 1fr;
  /* optional hilft beim Auffüllen, ist aber nicht zwingend */
  grid-auto-flow: row dense;
}
#bgToggle {
  position: fixed;
  top: 10px;     /* Abstand nach oben */
  left: 10px;    /* Desktop: Abstand von links */
  width: 20px;
  height: 20px;
  background: transparent;
  border: 1.8px solid black;
  border-radius: 0px;
  cursor: pointer;
  z-index: 9999;
}



.card {
  position: relative;
  aspect-ratio: 2 / 0.5;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: black;
  font-weight: 700;
  text-align: center;
}

.card-wide {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Logo-Bild */
.card-wide > img {
  width: 100%;        /* nimmt volle Breite */
  height: auto;       /* behält Seitenverhältnis */
   /* begrenzt nach oben */
  object-fit: contain;
}



/* Bilder in Cards */
.card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
  display: block;
}
.card .img-hover { opacity: 0; }
.card:hover .img-hover { opacity: 1; }
.card:hover .img-default { opacity: 0; }

.card-text {
  position: absolute;
  top: 50%;
  left: 20%;          /* 20% vom linken Rand */
  right: 20%;         /* 20% vom rechten Rand */
  transform: translateY(-50%);
  pointer-events: none;
  text-align: center;
}

/* Responsive Swap (wie gehabt) */
@media (max-width: 600px) {
  .card .img-default { content: url(tinysquare.png); }
  .card .img-hover { content: url(tinysquare-hover.png); }
}

/* Desktop-Layout */
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(6, 1fr); }

  .card {
    aspect-ratio: 1 / 1;
    padding: 10px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    word-wrap: break-word;
    text-overflow: ellipsis;
  }

  .card-wide {
    grid-column: span 2; /* erst hier doppelte Breite */
  }
}



.image-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-square .overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black; /* oder weiß je nach Bild */

  font-weight: bold;
  text-align: center;
  pointer-events: none; /* optional, falls nur das Bild klickbar sein soll */
}

 input {
      font-family: inherit;
      font-size: 0.7em;
      width: 90%;
      margin: 3px 0;
      padding: 12px;

      border: 1px solid #000;
      border-radius: 4px;
    }

.logo-square {
     border: 0px solid #000;
     background-color: transparent;
    }

    .logo-square:hover {
      background-color: transparent;
      color: white;
      border-color: transparent;
    }

    .squarewith-image {
      background-image: url("square.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: white; /* oder je nach Bildinhalt */
    }

    .image-square {
      position: relative;
      display: block;
      aspect-ratio: 1/1;
      width: 100%;
      overflow: hidden;
      border-radius: 0px;
      text-decoration: none;
    }

    .image-square img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.3s ease;
      display: block;
    }

    .image-square .overlay-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: black;

      
      font-weight: bold;
      text-align: center;
      z-index: 2;
      pointer-events: none;
    }


.square {
  background-color: transparent;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 30px;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;

  font-weight: 700;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.2s ease;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
}


.squaredouble {
  grid-column: span 2;
    aspect-ratio: 2 / 1; /* doppelt so breit, aber gleiche Höhe */
  height: 100%;         /* oder eine feste Höhe */
   border-radius: 30px;
    border: 0px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;


    font-weight: 700;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    text-decoration: none;
    transition:
      background-color 0.3s ease,
      color 0.3s ease,
      border-color 0.3s ease,
      transform 0.2s ease;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
}




.nobordersquare {
  background-color: transparent;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 30px;
  border: 0px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #000;

  font-weight: 700;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.2s ease;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
}

.square:hover {
  background-color: rgb(0,0,0);;
  color: white;
  border-color: transparent;
}

@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 900px) {

  .grid {
    grid-template-columns: repeat(6, 1fr);
     font-size: 1.4em;
  }

}