/*---------------------------------------------------------------------*/
/* Farben */
:root {
    --linkc: #000000; /*Schrift Farbe*/
    --backg: #ffffff; /*Hintergrund Farbe*/
    --hovg: #0692e32a; /*Hover Farbe*/
    --hovgadmin: #ffff002a; /*Admin Hover Farbe*/
    --them: #0692e317;/*Normaler Kartenhintergrund*/
    --themadmin: #ffff001a;;/*Admin Kartenhintergrund*/
    --popupborder: #dee2e64b; /* Border Farbe für Popups*/
    --circle-color: #0693e3; /* Netz Kreis Farbe */
    --line-color: #0693e3; /* Netz Linie Farbe */
    --stern-color: #ffc400; /* Stern Farbe*/
    --herz-color: red;


}

/*---------------------------------------------------------------------*/
/* CSS für das Netz (Beta) */

@media (max-width: 768px) {
    #backgroundCanvas {
        width: 100%;
        /* Größe anpassen */
        height: auto;
        /* Größe anpassen */
    }
}

#backgroundCanvas.hidden {
    display: none;
}


  .circle {
      fill: var(--circle-color);
  }

  .line {
      stroke: var(--line-color);
  }

   canvas {
       position: absolute;
       top: 0;
       left: 0;
       pointer-events: none;
   }
   

/*---------------------------------------------------------------------*/
/* Gesammter Body */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/*---------------------------------------------------------------------*/
/* Hintergrund Farbe mit Transition */
.bodygg{
background-color: var(--backg);
transition: 0.5s;
}

/*---------------------------------------------------------------------*/
/* So bleibt der Footer immer unten */
footer {
    margin-top: auto;
}


/*---------------------------------------------------------------------*/
/* CSS für alle Popups / Moduals */
#modual{
background-color: var(--backg);
color: var(--linkc);
}


/*---------------------------------------------------------------------*/
/* CSS für das Eingabe Feld für Name ändern */
#namee{
background-color: var(--backg);
color: var(--linkc);
}


/*---------------------------------------------------------------------*/
/* CSS für das Eingabe Feld Formulare */
#fname{
    background-color: var(--backg);
        color: var(--linkc);
}
/*---------------------------------------------------------------------*/
/*  Button für E-Book */
.bute{
        position: absolute;
        bottom: 30px;
        right: 30px;
        white-space: nowrap;
        color: var(--linkc);
        border-radius: 40px;
        border: none;
        padding: 15px;
        transition: 0.5s;
        background-color: var(--them);
        width: 180px;
       
        align-items: center;
        text-align: center;

}
    
.bute:hover{
    background-color: var(--hovg);
    transform: scale(1.1);
        transition: all;
        transition: 0.5s;
        cursor: pointer;
}

.bute:active {
    transform: scale(0.9);
    transition: 0.25s;
}


.hove{
    background-color: var(--them);
}


/*---------------------------------------------------------------------*/
/*  Button für Danke */
.butw {
    

    bottom: 30px;
    /* Abstand vom unteren Rand des Containers */
    right: 30px;
    white-space: nowrap;
    color: var(--linkc);
    border-radius: 40px;
    border: none;
    padding: 15px;
    transition: 0.5s;
    background-color: var(--them);
    width: 180px;

    align-items: center;
    text-align: center;

}

.butw:hover {
    background-color: var(--hovg);
    transform: scale(1.1);
    transition: all;
    transition: 0.5s;
    cursor: pointer;
}

.butw:active {
    transform: scale(0.9);
    transition: 0.25s;
}




/*---------------------------------------------------------------------*/
/* 4 Buttons für die Navigation / ganz oben */
.butl{
        white-space: nowrap;
        text-decoration: none;
        color: var(--linkc);
        border-radius: 40px;
        padding: 20px;
        transition: 0.5s;
        background-color: var(--them)
        
}

.butl:hover{
    background-color: var(--hovg);
    transition: all;
    transition: 0.5s;

}

/*---------------------------------------------------------------------*/
/* "Bestätigen" Buttom für Popup TicTacToe und Name ändern */
.buts {
    white-space: nowrap;
    color: var(--linkc);
    border-radius: 40px;
    padding: 10px;
    transition: 0.5s;
    text-decoration: none;
}

.buts:hover {
    background-color: var(--hovg);
    transition: all;
    transition: 0.5s;
    cursor: pointer;
   }

/*---------------------------------------------------------------------*/
/* Abgerundete Ecken für jede Karte */


.card {
    border-radius: 40px;
    overflow: hidden;
    background-color: var(--them);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.card.hovered {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    background-color: var(--hovg);
}

.card.clicked {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}





.card-img-top {
    transition: transform 0.3s ease;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.card.hovered .card-img-top {
    transform: scale(1.05);
}

.card.hovered .overlay {
    opacity: 1;
}



/* Mobiloptimierung ab max 576px (Bootstrap XS) */
@media (max-width: 576px) {
    .image-wrapper {
        height: 120px;
        overflow: hidden;
    }

    .card-img-top {
        height: 100%;
        object-fit: cover;
    }
}

/*---------------------------------------------------------------------*/
/* Standart Schrift */
.clink {
    color: var(--linkc);
    text-decoration: none;
    transition: 0.5s;
    
}

/*---------------------------------------------------------------------*/
/* Schrift mit einem Link / 4 Buttons zum navigieren*/
.link {
    text-decoration: none;
    color: var(--linkc);
    transition: transform 0.3s;
}

.link:hover{
    transform: scale(1.05);
    cursor: pointer;
}

.link:active{
    transform: scale(0.9);
}


/*---------------------------------------------------------------------*/
/* CCS für das Logo */
.Logo {

    width: 100px;
    height: 50px;
    transition: 0.5s;
    fill: var(--linkc);
}

/*---------------------------------------------------------------------*/
/* CSS für den Button Mode wechsel */
.mode {
    height: 40px;
    width: 40px;
    border-radius: 10px;
    transition: 0.5s;
    padding: 5px;
    color:var(--linkc)
   
    
}

.mode:hover {
    background: var(--hovg);
    transition: 0.5s;
    cursor: pointer;
    transform: scale(1.1);
}


#mode:active {
    transform: scale(0.96);
    transition: 0.25s;
}
/*---------------------------------------------------------------------*/
/* CSS für den Go TO Top Buttom*/
   #myBtn {
    color: var(--linkc);
       display: none;
       position: fixed;
       bottom: 20px;
       right: 20px;
       z-index: 99;
       border: none;
       outline: none;
       cursor: pointer;
       padding: 5px;
       border-radius: 40px;
       background: var(--them);
       transition: transform 0.3s;
   }
   #myBtn:hover {
    background: var(--hovg);
    transform: scale(1.1);
   }

   #myBtn:active {
       transform: scale(0.9);
       transition: 0.2s;
   }
 

   /*---------------------------------------------------------------------*/
   /* Copy Buttom*/




 .copy {
     color: var(--linkc);
    
     border: none;
     outline: none;
     cursor: pointer;
     padding: 10px;
     border-radius: 40px;
     background: var(--them);
     transition: transform 0.3s;
 }

 .copy:hover {
     background: var(--hovg);
     transform: scale(1.1);
 }

 .copy:active {
     transform: scale(0.9);
     transition: 0.2s;
 }





   /*---------------------------------------------------------------------*/
   /* CSS Effeckt für Karten mit Link / auf der Startseite */

   /*
   #hov {
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s;
       background-color: var(--them);
   }

   #hov:hover {
    background-color: var(--hovg);
    transform: scale(1.05);
    cursor: pointer;
   }

    #hov:active {
        transform: scale(0.96);
        transition: 0.25s;
    }
    
   /*---------------------------------------------------------------------*/
   /* CSS Effeckt für Karten ohne Link / im Impressum */
   #hovc {
       background-color: var(--them);
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transition: 0.5s;
   }

   #hovc:hover {
        background-color: var(--hovg);
        transform: scale(1.02);
        cursor: default; /* Normaler Curser */

   }
   #hovc:active{
    transform: scale(0.96);
    transition: 0.25s;
   }

         /*---------------------------------------------------------------------*/
         /* CSS Effeckt für Karten ohne Link / im Ebook */
         #hovb {
             background-color: var(--them);
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             transition: 0.5s;
         }
    
         #hovb:hover {
             background-color: var(--hovg);
             transform: scale(1.02);
             cursor: default;
             /* Normaler Curser */
    
         }
    

   /*---------------------------------------------------------------------*/
   /* CSS Effeckt für Karten mit Link / auf der Startseite */
   #hovadmin {
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s;
       background-color: var(--themadmin);
   }

  

        /* Effekt auf ganze Card (#hov), aber nur wenn a.image-link darin gehovert wird */
        #hovadmin:has(.image-link:hover) {
            background-color: var(--hovgadmin);
            transform: scale(1.05);
            transition: 0.3s ease;
        }
    
        /* Klick-Effekt (active) auch nur auf Bild */
        #hovadmin:has(.image-link:active) {
            transform: scale(0.96);
            transition: 0.2s;
        }

        
            /*---------------------------------------------------------------------*/
   /* CSS Effeckt für Karten mit Link / auf der Startseite */
   #hov {
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s;
       background-color: var(--them);
   }

  /* Effekt auf ganze Card (#hov), aber nur wenn a.image-link darin gehovert wird */
  #hov:has(.image-link:hover) {
      background-color: var(--hovg);
      transform: scale(1.05);
      transition: 0.3s ease;
  }

  /* Klick-Effekt (active) auch nur auf Bild */
  #hov:has(.image-link:active) {
      transform: scale(0.96);
      transition: 0.2s;
  }
   /*---
        
  /*---------------------------------------------------------------------*/
  /* CSS Effeckt für Karten Renzensionen */
  #hovr {
      background-color: var(--them);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: 0.3s;
  }

  #hovr:hover {
      background-color: var(--hovg);
      transform: scale(1.05);
      cursor: default;
      /* Normaler Curser */

  }




/*---------------------------------------------------------------------*/
/* ALles langsam erscheinen */
         .box {
            
             opacity: 0; /* Start with opacity 0 */
             transition: opacity 3s ease; /* Langsam erscheinen 3s */
            
         }
    
         .visible {
             opacity: 1; 
         }
                 .box.visible {
                     opacity: 1;
                     transition: opacity 3s ease;
                    
                 }
/*---------------------------------------------------------------------*/
/* Sterne für Bewertung */




.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 5px;
}

.rating input {
    display: none;
}

.rating label {
    cursor: pointer;
}

.rating svg {
    width: 2rem;
    height: 2rem;
    color: var(--hovg);
    transition: color 0.3s;
}

.rating input:checked~label svg,
.rating label:hover svg,
.rating label:hover~label svg {
    color: var(--stern-color);
}
/*
.rating input:checked~label:hover svg,
.rating input:checked~label:hover~label svg {
    color: darkorange;
}
*/


/*---------------------------------------------------------------------*/
/*Stern*/

.stern{
    text-decoration: none;
    color:var(--stern-color);

}


/*---------------------------------------------------------------------*/


.heart:hover{
transform: scale(1.2);
transition: 0.25s;
}

.heart{
    color: var(--herz-color);
    user-select: none;
}




.image-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
}

.image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

           .overlay {
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background-color: rgba(0, 0, 0, 0.4);
               color: white;
               display: flex;
               align-items: center;
               justify-content: center;
               opacity: 0;
               transition: opacity 0.5s ease;
               font-size: 1.2rem;
               font-weight: bold;
               text-transform: uppercase;
               letter-spacing: 1px;
           }


.image-wrapper:hover .overlay {
    opacity: 1;
    transition-delay: 0.1s;
}
/*---------------------------------------------------------------------*/



#toggle-favorites-btn-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

}

.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}