/* Bereinigtes bvhome.css */

:root {
    --body: #ff533e;
    --mouth: #000000;
    --feather: #939393;
    --beak-top: #e9581a;
    --beak-down: #aa4c21;
    --leg: #00adef;
    --body-color: #e3edf7;
    --green: #2ecc71; /* Ersatz für $green */
}

/* Formular Styles korrigiert */
.form__field {
    width: 360px;
    background: #000000;
    color: #ffffff;
    font: inherit;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0 , .1);
    border: 0;
    outline: 0;
    padding: 22px 18px;
}

body {
    background-color: #000000;
    background-image: url('../img/bg-bv4_3.jpg'); /* Prüfen ob Pfad stimmt! */
    background-size: cover;
    background-repeat: no-repeat;
    font-family: sans-serif;
    height: 100vh;
    width: 100vw;
}

.container {
    width: 60%;
    position: relative;
    margin-left:3%;
    padding-top: 18%;
    padding-left: 2%;
    opacity: 0.9;
}

/* Vogel-Animationen */
.body, .mouth, .feather, .tail, .beak, .leg { position: absolute; }
.body, .mouth, .feather, .beak { border-radius: 50%; }

.body {
    top: 26px; left: 30px;
    height: 180px; width: 200px;
    transform: rotate(-17deg);
    background: linear-gradient(to bottom, transparent 20%, var(--body) 20%);
    z-index: 2;
}

.mouth {    
    background: var(--mouth);
    top: 20px; left: -175px;
    width: 100px; height: 100px;
    transform: rotate(-17deg);
    z-index: 5;
    animation: animate-mouth 1.5s forwards 2s;
}

@keyframes animate-mouth { 100% { left: 175px; } }

/* ... (Deine anderen Animationen bleiben gleich, aber achte auf die Klammern) */

.darm {
    margin-top: 0em;
    margin-left: 0.1em;
    font-size: 1.8em;
    color: white; /* font-color gibt es nicht, es heißt nur color */
    background-color: #ffffff;
    padding: 2.1%;
    border-radius: 15px 50px 30px 5px;
}

.darmtext {
    opacity: 0.3;
    color: #cdcdcd;
}

/* GAG Liste Kommentare korrigiert */
.gag { font-size: 0.2em; }

.gag-counter {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.gag-counter li {
    color : #cdcdcd; 
    counter-increment: step-counter;
    margin: 5px;
}

.gag-counter li:hover {
    color : #000000;
    cursor: pointer;
}

.gag-counter li::before {
    content: counter(step-counter);
    margin-right: 5px;
    font-size: 50%;
    background-color: rgb(0,200,200);
    color: white;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
}




/* Navigation Hauptcontainer */
nav.primary-navigation {
    margin: 0 auto;
    display: block;
    padding: 12px 0 0 0;
    text-align: right;
    padding-right: 6%;
    font-size: 16px;
}

/* Die horizontalen Listenpunkte (switches, hosts) */
nav.primary-navigation ul li {
    list-style: none;
    margin: 0 auto;
    border-left: 2px solid #cdcdcd;
    display: inline-block;
    padding: 0 20px;
    position: relative;
    text-decoration: none;
    text-align: center;
}

/* Links in der Navigation */
nav.primary-navigation li a {
    color: black;
    text-decoration: none;
}

nav.primary-navigation li a:hover {
    color: #c117b6;
}

/* Das versteckte Dropdown-Fenster */
nav.primary-navigation ul li ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%; /* Erscheint direkt unter dem Menüpunkt */
    left: 0;
    display: none;
    background: white;
    padding: 10px;
    z-index: 999;
    box-shadow: 0px 3px 5px -1px #ccc;
    min-width: 350px;
    text-align: left;
}

/* ZEIGEN des Fensters beim Hover */
nav.primary-navigation ul li:hover > ul {
    visibility: visible;
    opacity: 1;
    display: block;
}

/* Die einzelnen Switches in der Liste */
nav.primary-navigation ul li ul li {
    clear: both;
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
    border-style: none;
    display: block;
    padding: 5px 10px;
}

nav.primary-navigation ul li ul li a {
    transition: all 0.3s ease;
    display: block;
    white-space: nowrap; /* Verhindert Zeilenumbruch bei langen Namen */
}

nav.primary-navigation ul li ul li a:hover {
    padding-left: 10px;
    border-left: 12px solid #3ca0e7;
    background-color: #f9f9f9;
}








/* Tooltip Korrekturen */
.tooltip {
    position: relative;
    background: var(--green);
    padding: 5px 12px;
    margin: 5px;
    font-size: 15px;
    border-radius: 100%;
    color: #FFF;
}

/* Spinner & Scroll-Area */
.scroll-area {
    max-height: 450px;
    overflow-y: auto;
    padding: 15px;
}

.spinner, .loading-spinner {
    width: 40px; height: 40px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top: 4px solid #1ac04f;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.scroll-container::-webkit-scrollbar { width: 6px; }
.scroll-container::-webkit-scrollbar-thumb { background: #59238F; border-radius: 10px; }


 ul li ul li a { transition: all 0.5s ease; }



#anim:hover {
  animation: shake 500ms ease-in-out forwards;
}
/* tablle für die listings und so....*/

.listingtable{
	
	border-collapse:collapse;
}
.listingtable td{
	padding:5px;
	a {
      			color: #127ead;
      	}
	a:hover { color: #000000;}
	border: 8.5px solid red;
}
.listingtable tr{
	background: red;
	font-size: 60%;
}
.listingtable tr:hover {
	background-color: #cdcdcd;
	border: #ffffff 0.5px solid;
}



.typimage{
	width: 10%;
}

.icon-small{
	width:80%;
	height:80%;
	margin:0px;
	
}

.status{
	font-size:70%;
	width:22px;
}







/* Assler Login Fix */
.asslerlogin {
    height: 80vh;
    font-family: sans-serif;
    background-size: cover;
    overflow: hidden;
}

.loginBox {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
    background: #000000;
    border-radius: 10px;
    padding: 40px;
}

p { color: #0000ff; }