/* 
	* ====================================================
	*
	* Projektname: Imkerei WebShop 
 	* Beschreibung: Haupt-Stylesheet für das Layout
 	* Autor (c) copyright by Christian Mandl
 	* Version: 0.0.0.0.1
 	*
  * ==================================================== 
 */
	

  body      { background-color: #E6E6FA; font-family: verdana,arial,helvetica,sans-serif; font-size: 14pt; }
   /*)
   a:link    { color:#808080 } 
   a:visited { color:#808080 }
   a:active  { color:#808080 }
   a:hover   { color:#808080 }
 */
  /* hier das layout fuer die index.php */
   nav a { margin-right: 15px; text-decoration: none; font-weight: bold; color:#808080; text-align: center;}
   main { margin-top: 5px; padding: 10px; border-top: 1px solid #ccc; }
 

	/* eingang startseite hierfuer muss es als class verwendet werden wie z.b.: echo "<tr><td class='eingang' align='center'>";  */
  #eingang { font-family: verdana,arial,helvetica,sans-serif; background-color: '#E6E6FA'; color: #808080; font-size: 12pt; }
 
	/* fuer das pi */
  #einfuss { font-family: Bookman Old Style,Trebuchet MS,Arial; border-top: 1px solid #999999; margin-top: 10px; 
				 	 background-color: #dddddd; text-align: right; font-size: small;
           padding: 2px; color: #666666;  position: fixed;  bottom: 0px; left: -5px; width: 100%; }
	
	/* Ueberschrift Produkte  */														 
  #ueber { font-family: verdana,arial,helvetica,sans-serif; background-color: '#E6E6FA'; color: #808080; font-size: 3em; }
  
  /* Schrift fuer anmerkung welche mit einem Sternchen versehen sind */
  #kleinst { font-family: verdana,arial,helvetica,sans-serif; background-color: '#E6E6FA'; color: #808080; font-size: 0.5em; }
 
 	/* schriftart fuer die gesamte website sollte ueberall gleich sein */
  #kleintext { font-family: verdana,arial,helvetica,sans-serif; background-color: '#E6E6FA'; color: #808080; font-size: 0.75em; }
 
	/* allfussleiste */
  #allfussleiste { border-top: 1px solid #999999; margin-top: 15px; background-color: #dddddd; text-align: left; font-size: small;
							   padding: 5px; color: #666666;  position: fixed;  bottom: 0px; left: 0px; width: 100%; }


  /* <!-- BUTTONS --> */  
	/* Produktdetails Button */
  /* Styling für das Modal selbst */
  .modern-modal { border: none; border-radius: 12px; padding: 24px; max-width: 500px; width: 70%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
                    /* Animation beim Öffnen */ animation: fadeIn 0.3s ease-out; }
  /* Styling für den abgedunkelten Hintergrund (Backdrop) */
  .modern-modal::backdrop { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); /* Moderner Glassmorphismus-Effekt */ }

	/* Einfache Animation */
  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
   }

	/* Schicke Buttons */
  .open-modal-btn, .close-modal-btn { padding: 10px 20px; border-radius: 6px; border: none; cursor: pointer; font-weight: 500; }
  .open-modal-btn { background-color: #F2F2F2; color: #808080; }
  .close-modal-btn { background-color: #f8f9fa; color: #333; margin-top: 15px; }

  /* <!-- Bildvergroesserungen --> */ 
  /* zum vergroessern der ProduktBilder */ 
  .myproduktzoomable { width: 80px; height: 100px; cursor: pointer; transition: transform 0.3s ease; }
  .myproduktzoomable.large { transform: scale(4.5); /* Vergrößert das Bild um das 4,5-fache */ position: relative; z-index: 10; }
  
  
 /* zum vergroessern des wir ueber uns Bildes */ 
 /*
  * funktioniert irgendwie nicht
 */
  .mywirzoom { width: 150px; height: 220px; cursor: pointer; transition: transform 0.3s ease; }
  .mywirzoom.large { transform: scale(1.5); /* Vergrößert das Bild um das 1,5-fache */ position: relative; z-index: 10; } 
 
 
  /* Mauszeiger bei den Produkten mal sehen obs geht */
  .myhelpzeiger_Produkte {cursor: help;}
 
 
 
 
 
 
 
  /* eof */