﻿body {
    font-family: 'Lato', sans-serif;
}

h1 {
    margin-bottom: 40px;
}

label {
    color:  silver;
}

.btn-send {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
}

.help-block.with-errors {
    color: #ff5050;
    margin-top: 5px;
}
#nick_name {
  display: none;
  opacity: 0;
  visibility: hidden !important;
}
	.dropdown-submenu{
    position:relative;
	}
	.dropdown-submenu.dropdown-menu{
    position: absolute;
	top:0;
	left:100%;
	margin-top:0;
	display:none;
	}
	.dropdown-submenu:hover > .dropdown-menu {
    display: block;
	}
	.dropdown-submenu.open>.dropdown-menu{
    display:block;
	}
	@media (max-width:767px){
	.dropdown-submenu > .dropdown-menu{
		display:block;
		position:static;
		float:none;
		width:auto;
		margin-left:20px;
		padding-left:10px;
		background:transparent;
		border:0;
		box-shadow:none;
		}
		.dropdown-submenu > .dropdown-menu li a{
			font-size:90%;
			color:#bfbfbf;
		}
	}
	.simple-icons--tidal {
	  display: inline-block;
	  width: 20px;
	  height: 20px;
	  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.012 3.992L8.008 7.996L4.004 3.992L0 7.996L4.004 12l4.004-4.004L12.012 12l-4.004 4.004l4.004 4.004l4.004-4.004L12.012 12l4.004-4.004zm4.03 4.004l3.979-3.979L24 7.996l-3.979 3.979z'/%3E%3C/svg%3E");
	  background-color: currentColor;
	  -webkit-mask-image: var(--svg);
	  mask-image: var(--svg);
	  -webkit-mask-repeat: no-repeat;
	  mask-repeat: no-repeat;
	  -webkit-mask-size: 100% 100%;
	  mask-size: 100% 100%;
	}
		.twitter-follow-button, .twitter-follow-button:visited 
		{
	    background-color: #1b95e0;
	    color: #fff;
	    border-radius: 12px;
	    height: 20px;
	    font-weight: 500;
	    font-size: 13px;
	    line-height: 22px;
	    padding: 8px 8px 8px 30px;
	    text-decoration: none;
	    background-image: url('/img/twitter_logo.png');
	    background-repeat: no-repeat;
	    background-size: 16px 13px;
	    background-position: 8px 10px;
		}
		.twitter-follow-button:hover { background-color: #0c7abf;}
	   /* @media only screen and (min-width:480px) and (max-width: 1080px){h3{font-size:10px} h1{font-size:0.1em}}*/
	   h3 {text-align:left;color:white; font-size: 550%}
	   h1 {color:white; letter-spacing:7px; font-size:  100px}
	   p { color:white;text-align:right; font-size:large}
	   	@media only screen and (max-device-width: 640px) and (orientation: portrait) 
		{
		h1{font-size:3.7em} 
		h3{font-size:3.7em} 
		}
		@media only screen and (min-width:480px) and (max-width: 1080px)
		{
		.col-xsl-4{width: 33%;}
		.col-xsl-5{width: 42%;}	
		.col-xsl-6{width: 50%;}
		.col-xsl-7{width: 57%;}
		.col-xsl-8{width: 66%;}
		h1{font-size:2.0em} 
		h3{font-size:2.0em} 
		p {text-align:right; font-size:small}
		header.carousel { height: 80%;}
		header.carousel .carousel { height: 100%;}
		}
	.bild-galerie {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.album {
    flex: 0 1 180px;   /* flexibel statt fix */
    max-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.album img {
    width: 100%;
    aspect-ratio: 1/1; 		/*height: 280px;         gleiche Höhe für alle */
    object-fit: cover;    /* schneidet sauber zu */
    border-radius: 2px;
    display: block;
}

p, li {
    text-align: left;
    color: silver;
	font-size: medium;
}
h1.normal {
            color: silver;
            margin: 40px 0 20px 0;
            border-bottom: 1px solid #eee;

            padding-bottom: 9px;
            font-family: 'Baskerville';
            font-size: 60px !important;
            font-weight: 900;
            letter-spacing: -2px !important;
         }
		 /* iPhone Portrait */
@media (max-width: 767px) {

    h1.normal {
        font-size: 36px !important;
        letter-spacing: -1px !important;
        margin-top: 20px;
        margin-bottom: 15px;
        padding-bottom: 6px;
        text-align: center;
        line-height: 1.15;
    }
	.navbar-brand {
		height: 50px;
		padding: 8px 15px;
	}

	.navbar-brand img {
		height: 18px;
	}

}
/* Logo in der Navigationsleiste */
.navbar-brand {
    height: 60px;
    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-brand img {
    height: 50px;
    width: auto;

    border-radius: 10px;     /* Ecken abrunden */
	transform: scale(1.15);
	transform-origin: center center;
    overflow: hidden;

    transition: all .3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.4);
}
.navbar-header {
    display: flex;
    align-items: center;
}
