body{

font-family:Arial;
background:#f4f4f4;
margin:40px;

}

.grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(250px,1fr));

gap:20px;

}

.card{

background:white;

padding:20px;

border-radius:10px;

box-shadow:0 0 10px rgba(0,0,0,.1);

text-align:center;

}

.card img{

width:180px;
height:250px;
object-fit:cover;

}

form{

margin-bottom:30px;

}

button{

padding:8px 20px;

}

.TOP {

  background-color: #ff4757;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 8px 0;
  width: 100px; /* Breite muss groß genug sein, um die Ecke zu füllen */

  /* Positionierung und Schrägstellung */
  position: absolute;
  top: 20px;
  right: -15px;
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}

.klein {
  height:36px; border:1 px solid gray; background: gray; color:white; font-size:1.2em; font-weight:400; border-radius: 2px; padding-left:18px; padding-right:18px;
}

.klein:hover {
  height:36px; border:1 px solid gray; background: white; color:gray; font-size:1.2em; font-weight:400; border-radius: 2px; padding-left:18px; padding-right:18px;
}

.gross {
  height:56px; width:200px; border:1 px solid gray; background: gray; color:white; font-size:2em; font-weight:600; border-radius: 2px;
}

.gross:hover {
  height:56px; width:200px; border:1 px solid gray; background: white; color:gray; font-size:2em; font-weight:600; border-radius: 2px;
}