/* 	#id - 	#firstname 	Selects the element with id="firstname"
	element 	p 	Selects all <p> elements
	.class 	.intro 	Selects all elements with class="intro"
	element.class 	p.intro 	Selects all <p> elements with class="intro"
	element,element 	div, p 	Selects all <div> elements and all <p> elements

    */


.kopfbereich {
   background-color: grey;
   text-align: center;
   vertical-align: middle;
   line-height: 100px;
   height: 100px;
}

.navigation {
        float: left;
        width: 15%;
        background-color: white; 
		border-right-style: dotted;
         }
.content {
        float: left;
        width: 80%;
        /* background-color: green; 
        margin-left: 220px; */
        padding: 10px;
         }

.contentbeamer {
		text-align: center;
         }
.formular {
	/*background-color: grey; */
	font-size: large;
}

.optionfield {	
   	height: 35px;          /* gewünschte Höhe */
    border: 1px solid #ccc;/* dünner Rahmen */
    font-size: 14px;       /* Schriftgröße */
    padding: 4px;          /* Innenabstand für bessere Lesbarkeit */
    box-sizing: border-box;/* verhindert, dass Rahmen die Breite verändert */
}	

.optionfield_mittel {	

	width: 60%;
   	height: 35px;          /* gewünschte Höhe */
    border: 1px solid #ccc;/* dünner Rahmen */
    font-size: 14px;       /* Schriftgröße */
    padding: 4px;          /* Innenabstand für bessere Lesbarkeit */
    box-sizing: border-box;/* verhindert, dass Rahmen die Breite verändert */
	
}
.optionfield_30zeichen {
	width: 30ch;
   	height: 35px;          /* gewünschte Höhe */
    border: 1px solid #ccc;/* dünner Rahmen */
    font-size: 14px;       /* Schriftgröße */
    padding: 4px;          /* Innenabstand für bessere Lesbarkeit */
    box-sizing: border-box;/* verhindert, dass Rahmen die Breite verändert */
	}
.optionfield_20zeichen {
	width: 20ch;
   	height: 35px;          /* gewünschte Höhe */
    border: 1px solid #ccc;/* dünner Rahmen */
    font-size: 14px;       /* Schriftgröße */
    padding: 4px;          /* Innenabstand für bessere Lesbarkeit */
    box-sizing: border-box;/* verhindert, dass Rahmen die Breite verändert */
	}
.optionfield_15zeichen {
	width: 15ch;
   	height: 35px;          /* gewünschte Höhe */
    border: 1px solid #ccc;/* dünner Rahmen */
    font-size: 14px;       /* Schriftgröße */
    padding: 4px;          /* Innenabstand für bessere Lesbarkeit */
    box-sizing: border-box;/* verhindert, dass Rahmen die Breite verändert */
}
.optionfield_10zeichen {
	width: 10ch;
   	height: 35px;          /* gewünschte Höhe */
    border: 1px solid #ccc;/* dünner Rahmen */
    font-size: 14px;       /* Schriftgröße */
    padding: 4px;          /* Innenabstand für bessere Lesbarkeit */
    box-sizing: border-box;/* verhindert, dass Rahmen die Breite verändert */
}	
	
.optionfield_4zeichen {
	width: 4ch;
   	height: 35px;          /* gewünschte Höhe */
    border: 1px solid #ccc;/* dünner Rahmen */
    font-size: 14px;       /* Schriftgröße */
    padding: 4px;          /* Innenabstand für bessere Lesbarkeit */
    box-sizing: border-box;/* verhindert, dass Rahmen die Breite verändert */
}

.inputfield {	
	border-radius: 5px;	
}
		
.form-container {
            /*float: left;
			width: 80%;*/
			background: #fff;
            padding: 1rem 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            width: 350px;
        }
.form-container h1 {
            font-size: 1.4rem;
            margin-bottom: 1rem;
            text-align: center;
            color: #333;
        }
.label {
            display: block;
            margin-bottom: .1rem;
            font-weight: bold;
            color: #444;
        }
.inputfield-text-lang {
            width: 100%;
            padding: .1rem;
            margin-bottom: .5rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 1rem;
            box-sizing: border-box;
        }
		
.inputfield-text-kurz {
            width: 30%;
            padding: .1rem;
            margin-bottom: .5rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 1rem;
            box-sizing: border-box;
        }	

.inputfield-text-10zeichen {
            width: 10ch;
            padding: .1rem;
            /*margin-bottom: .5rem; */
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 1rem;
            box-sizing: border-box;
        }

	
		
		
.inputfield-date {
            width: 15%;
            padding: .1rem;
            margin-bottom: .5rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 1rem;
            box-sizing: border-box;
        }
.inputfield-password {
            width: 100%;
            padding: .1rem;
            margin-bottom: .5rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 1rem;
            box-sizing: border-box;
        }
select {
            width: 100%;
            padding: .3rem;
            margin-bottom: 1rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 1rem;
            box-sizing: border-box;
        }		
	
.button_200px {
            width: 150px;
            padding: .3rem;
            font-size: 1rem;
            font-weight: bold;
            color: #fff;
            background: #0077cc;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s;
        }
	
button {
            width: 80%;
            padding: .3rem;
            font-size: 1rem;
            font-weight: bold;
            color: #fff;
            background: #0077cc;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s;
        }
button:hover {
            background: #005fa3;
        }
button:disabled {
			width: 100%;
            padding: .3rem;
            font-size: 1rem;
            font-weight: bold;
            border: none;
            border-radius: 6px;
            cursor: not-allowed;
            transition: background 0.3s;	
            opacity: 0.2;	
        }

.align-top {
  vertical-align: top;
}
.align-center {
  vertical-align: middle;
}	
		
.spezielle-zelle {
	width: 150px;          /* gewünschte Breite */
	height: 10px;            /* sehr klein */

    padding: 0;
    text-align: center;    /* horizontale Ausrichtung */
    vertical-align: top;/* vertikale Ausrichtung */
    /*border: 1px solid #ccc;/* optional: Rahmen zur Sichtbarkeit */
}		



		
p {
            text-align: center;
            color: green;
            font-weight: bold;
        }


@media only screen and (max-width: 600px) {
  body {
   /*  background-color: red; */
  }
}