/*======================================
Theme Name: Theme Coder
Theme URI: https://webero.ch
Description: Ein einfaches Child Theme für TwentySixteen
Version: 1.0
Author: Clément Pascal
Author URI: https://webero.ch
Template: twentyseventeen
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

/* You can start adding your own styles here. Use !important to overwrite styles if needed. */

.custom-home-slogan-wrapper {
	 display: flex;
	 justify-content: flex-start;
     align-items: flex-start;
     position: absolute;
     top: 10%;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
     color: rgba(255, 255, 255, 0.9);
     padding: 1em 2em;
     border-radius: 10px;
	 width: 90%;
     max-width: 1000px;
     min-width: 500px; 
	 opacity: 0;
     animation: fadeInSlogan 1.2s ease-out 0.5s forwards;
	 box-shadow: 0 0 15px rgba(0,0,0,0.4);
     transition: background-color 0.3s ease, color 0.3s ease;
}

@keyframes fadeInSlogan {
  to {
    opacity: 1;
  }
}

/* Linke Spalte: nur das Anführungszeichen */
 .slogan-quote::before {
     content: "“";
     font-size: 3em;
     margin-right: 0.5em;
     line-height: 1;
}

 .slogan-text {
     font-size: 1em;
     text-align: left;
}

 .slogan-author {
	 font-size: var(--slogan-author-fs);
     font-style: italic;
     text-align: left;
     opacity: 0.8;
}

@media (min-width: 1000px) {
  .custom-home-slogan-wrapper {
    justify-content: center;
    text-align: center;
  }

  .slogan-text,
  .slogan-author {
    text-align: center;
  }
}