/* =========================================
   RESET
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
  overflow-x:hidden;
  color:#000000;
  font-family: 'BerlinTypeWeb';
  font-size: 1.1rem;
  line-height:1.2;
  background-image: url('../img1/test4.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  margin: 0;

}

.card {
  padding: 2em 1em 1em 1em;
}

.start {
    max-width: 1000px;
    margin: 30px auto 0px auto;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 0px;
}

.b01:nth-of-type(1) {grid-column: 1/7; } /* xxx */
.b01:nth-of-type(2) {grid-column: 1/4; } /* Animation */
.b01:nth-of-type(3) {grid-column: 4/7; } /* Text */
.b01:nth-of-type(4) {grid-column: 1/7; } /* Link zur Website */

/* --------------------------- BUTTON ------------------------------ */

.cta {
    display:inline-block;
    margin: 0 auto;
    padding:14px 14px 10px 14px;
    border:2px solid #db067b;
    border-radius:8px;
    font-size: 1rem;
    text-decoration: none;
    color:#f2f2f2;
    text-align: center;
    background-color:#db067b;
    text-transform:uppercase;
    word-spacing:.1rem;
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
    transition: 0.3s ease; transition-property: background-color, color;
    
}

.cta:hover {
    background-color:#f2f2f2;
    color:#db067b;
}


/* ============================================================ */
/* Der äußere Container bestimmt die Größe und den 3D-Effekt-Abstand */
.flip-container {
  width: 360px;
  height: 291px;
  perspective: 1000px; /* Erzeugt den 3D-Tiefeneffekt */
  padding: 1.3em 0em 0em 0em;
}

/* Die innere Box hält beide Seiten und führt die dauerhafte Drehung aus */
.flip-box {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; /* Zwingt Kindelemente in den 3D-Raum */
  
  /* Startet die dauerhafte Animation */
  /* "6s" = Dauer für eine Drehung (höherer Wert = langsamer) */
  /* "linear" = absolut gleichmäßige Geschwindigkeit */
  /* "infinite" = unendlich oft wiederholen */
  animation: dauerDrehung 10s linear infinite; 
}

  /* Definition der unendlichen Drehung um 360 Grad */
@keyframes dauerDrehung {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* Gemeinsame Eigenschaften für Vorder- und Rückseite */
.flip-front, .flip-back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden; /* Versteckt die Rückseite des Elements */
}

/* Bilder füllen das jeweilige Elternelement perfekt aus */
.flip-front img, .flip-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Die Rückseite ist von Natur aus bereits um 180 Grad gedreht */
.flip-back {
  transform: rotateY(180deg);
}


/*-------------------------------------------------------------------------*/
/*                                                                         */
/*                         Mobil - alles unter 819px                       */
/*                                                                         */
/*-------------------------------------------------------------------------*/

@media screen and (max-width: 820px) {

.start {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}

.b01:nth-of-type(1) {grid-column: 1;order: 4;} /* xxx */
.b01:nth-of-type(2) {grid-column: 1;order: 2;} /* Animation */
.b01:nth-of-type(3) {grid-column: 1;order: 3;} /* Text */
.b01:nth-of-type(4) {grid-column: 1;order: 1;} /* Button */
}

.flip-container {
  width: 360px;
  height: 291px;
  perspective: 1000px; /* Erzeugt den 3D-Tiefeneffekt */
  margin: 1em auto 0 auto;
}