body {
    font-family: Calibri,Arial,sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-image: url(https://www.sharetopia.de/texturen/marbles-1659398_1920.webp);
    background-size: 100%; /* size the background image at 100% like any responsive img tag */
        background-position: top center;
    background-image: transparent;
}

@media only screen and (min-width: 140px) {
	
	#content {
		margin: 15px 170px;
		width: 992px; /* Feste Breite */
		color: black;
		padding: 5px 15px;
		background-color: white;
		opacity: 0.8;
	}

/* ------------------------------------------------------ Schichtplan.php ---------------------------------------------------------------*/

#Jahr {
	clear: left;
	margin-top: 13px;
	font-size: 60px;
	color: #800000;
	margin-left: 15px;
}

.colw  { margin-top:15px; margin-left:4px; float:left; width:119px; margin-right:4px; overflow:hidden; font-size:1.2em;}

.col  { float: left; margin-left:8px; margin-right:8px; width:115px; min-height:117px; height:auto; margin-top:15px; border:1px inset grey; font-size:1.2em; }

.col2 { float: left; margin-left:11px; margin-right:11px; width:121px; opacity:0.0; border:1px solid white; }
.col3 { float: left; margin-left:11px; margin-right:11px; width:259px; opacity:0.0; border:1px solid white; display:inline; overflow:hidden; }
.col4 { float: left; margin-left:11px; margin-right:11px; width:397px; opacity:0.0; border:1px solid white; display:inline; overflow:hidden; }
.col5 { float: left; margin-left:11px; margin-right:11px; width:535px; opacity:0.0; border:1px solid white; display:inline; overflow:hidden; }
.col6 { float: left; margin-left:11px; margin-right:11px; width:673px; opacity:0.0; border:1px solid white; display:inline; overflow:hidden; }
.col7 { float: left; margin-left:11px; margin-right:11px; width:811px; opacity:0.0; border:1px solid white; display:inline; overflow:hidden; }
.col8 { float: left; margin-left:11px; margin-right:11px; width:949px; opacity:0.0; border:1px solid white; display:inline; overflow:hidden; }

#content p.vormittags {
	margin-left: .4%;
	margin-top: 5px;
	margin-bottom: 10px;
	color: #800000;
	font-size: .7em;
}

#content p.nachmittags {
	margin-left: .4%;
	margin-top: 5px;
	margin-bottom: 10px;
	color: #800000;
	font-size: .7em;
}


/* -------------------------------------------------------------------------------------------------------------------------------------*/

	#loading-spinner {
        border: 4px solid #f3f3f3; /* Light gray */
        border-top: 4px solid #800000; /* Dark red */
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        display: none; /* Standardmäßig ausgeblendet */
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
	
	.flexMitglied {
		display: flex;
		flex-wrap: wrap;
	}

	.flexMitglied-item {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 10px;
	}

	div.contentGleichBleibend {
		background: #ffffff;
		width: 320px;
		margin-left: auto;
		margin-right: auto;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	div.contentGleichBleibendinnen {
		background: #ffffff;
		width: 280px;
		margin: 20px auto 20px auto;
	}

	div.content1 {
		width: 310px;
	}
	div.content1innen {
		width: 290px;
	}
	div.content2 {
		width: 300px;
	}
	div.content2innen {
		width: 280px;
	}
	div.content3 {
		width: 340px;
	}
	div.content3innen {
		width: 320px;
	}
	div.content4 {
		background: #ffffff;
		width: 345px;
	}
	div.content4innen {
		width: 320px;
	}
	div.content5 {
		width: 340px;
		height: 650px;
	}
	div.content5innen {
		width: 320px;
	}
	div.content6 {
		width: 340px;
	}
	div.content6innen {
		width: 320px;
	}
	div.content7 {
		background: #ffffff;
		width: 340px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	div.content7innen {
		background: #ffffff;
		width: 320px;
		margin-left: auto;
		margin-right: auto;
	}

	.logo-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: stretch;
    }
	.logo_auflistung {
		width: 300px;
		margin-bottom: 20px;
		padding: 15px 10px 10px 10px;
		-webkit-box-shadow: 2px 2px 5px #636363; /* Schatten für Webkit-Browser */
		box-shadow: 2px 2px 5px #636363; /* Schatten für moderne Browser */
        display: flex; /* Füge diese Zeile hinzu */
        align-items: center;
	}

	#logo-container {
		display: flex;
		align-items: flex-start;
		margin-left: auto;
		margin-right: auto;
		margin-top: 55px;
	}
	#dropdownMenu {
        width: 100%; /* Dropdown-Menü für die Navigation */
    }

	#mainleftcontent7{
		font-family: Verdana,Arial,sans-serif;
		width: 308px;
		padding: 10px 10px 10px 10px;
		background: #ffffff;
		border-radius: 3px;
		border: 1px solid #a1a1a1;
		font-size: 13px;
	}
	.schriftnav {
		font-size:12px;
		font-family: Arial;
		color: black;
		text-decoration: none;
	}
	.pdivdinge {
		float:left;
	}
	div.polaroiddinge5 {
		background: #fff;
		padding: 10px;
		width: 195px; /* Breite des Bildes */
		-webkit-box-shadow: 4px 4px 5px #999; /* Schatten für Webkit-Browser */
		box-shadow: 4px 4px 5px #999; /* Schatten für moderne Browser */
		float:left;
		margin-top: 15px;
		margin-bottom: 12px;
		margin-left: 0px;
		margin-right: 20px;
	}

	a.class2:link {
		color:#800000;
		text-decoration:none;
		font-size:13px;
	}
	a.class2:visited {
		color:#800000;
		text-decoration:none;
	}
	a.class2:hover {
		color:#a52a2a;
		text-decoration:none;
	}
	.profiluebersicht {
    	display: flex;
		width: 300px;
		margin-top: 20px;
		padding: 10px 10px 10px 10px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 1px solid #800000;
		font-family:Verdana,Arial,sans-serif;
		font-size:12px;
	}

	.icon {
		float:left;
		margin-right:30px;
		margin-top:30px;
	}

	.vorstellungGegenueber {
		display: grid;
		grid-template-columns: 60px 1fr; /* Eine Spalte für das Bild und eine für den Text */
		grid-template-rows: auto auto auto auto; /* Vier Reihen für den Namen, Adresse, Zuletzt1 und Zuletzt2 */
	}
	.vorstellungFotoBox {
		grid-column: 1 / 2; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 1 / 5;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
	}
	.vorstellungFotoBox img {
		width: 100%;
		-webkit-box-shadow: 4px 4px 10px #5b5b5b; /* Schatten für Webkit-Browser */
		box-shadow: 4px 4px 10px #5b5b5b; /* Schatten für moderne Browser */
		-o-transform: rotate(-2deg); /* Drehung um 5 Grad für Opera */
		transform: rotate(-2deg); /* Drehung um 5 Grad für moderne Browser */
	}
	.vorstellungprofilname {
		grid-column: 2 / 3; /* Element erstreckt sich von Spalte 2 bis Spalte 3 */
  		grid-row: 1 / 2;    /* Element erstreckt sich von Zeile 1 bis Zeile 2 */
		font-size: 24px;
		color: #800000;
		font-family: 'Cutive Mono';
		font-weight: bold;
		margin-left: 20px;
		margin-top: -10px;
	}
	.vorstellungWohnhaft {
		grid-column: 2 / 3; /* Element erstreckt sich von Spalte 2 bis Spalte 3 */
  		grid-row: 2 / 3;    /* Element erstreckt sich von Zeile 2 bis Zeile 3 */
		font-size: 16px;
		color: #800000;
		font-family: 'Cutive Mono';
		font-weight: bold;
		margin-left: 20px;
		align-self: center;
	}
	.vorstellungZuletzt1 {
		grid-column: 2 / 3; /* Element erstreckt sich von Spalte 2 bis Spalte 3 */
  		grid-row: 3 / 4;    /* Element erstreckt sich von Zeile 3 bis Zeile 4 */
		font-size: 13px;
	}
	.vorstellungZuletzt2 {
		grid-column: 2 / 3; /* Element erstreckt sich von Spalte 2 bis Spalte 3 */
  		grid-row: 4 / 5;    /* Element erstreckt sich von Zeile 1 bis Zeile 2 */
		font-size: 13px;
		margin-top: -25px;
	}
	.vorstellungZuletzt3 {
		grid-column: 2 / 3; /* Element erstreckt sich von Spalte 2 bis Spalte 3 */
  		grid-row: 3 / 4;    /* Element erstreckt sich von Zeile 3 bis Zeile 4 */
		font-size: 13px;
	}
	.vorstellungZuletzt4 {
		grid-column: 2 / 3; /* Element erstreckt sich von Spalte 2 bis Spalte 3 */
  		grid-row: 4 / 5;    /* Element erstreckt sich von Zeile 1 bis Zeile 2 */
		font-size: 13px;
		margin-top: -25px;
	}

	.flexContainer {
		display: flex;
		align-items: center;
	}
	.nachrichtenVerlaeufe {
		font-weight: normal;
		font-size: 0.9em;
		color: blue;
		width: 230px !important;
		word-wrap: break-word;
	}
	.delete-button {
		width: 20px !important;
		height: 20px !important;
		border-radius: 50%;
		background-color: #800000;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 13px;
		font-weight: bold;
		z-index: 999;
	}

	#profilname {
		font-size: 24px;
		color: #800000;
		margin-bottom: 5px;
		font-family: 'Cutive Mono';
		font-weight: bold;
	}
	
	div.polaroid {
		background: #fff; /* Randfarbe */
		padding: 10px; /* Randdicke */
		width: 200px; /* Breite des Bildes */
		-webkit-box-shadow: 2px 2px 5px #999; /* Schatten für Webkit-Browser */
		box-shadow: 2px 2px 5px #999; /* Schatten für moderne Browser */
		-o-transform: rotate(-2deg); /* Drehung um 5 Grad für Opera */
		transform: rotate(-2deg); /* Drehung um 5 Grad für moderne Browser */
		float:left;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	div.polaroidw {
		background: #fff; /* Randfarbe */
		padding: 2px; /* Randdicke */
		width: 60px; /* Breite des Bildes */
		-webkit-box-shadow: 2px 2px 5px #999; /* Schatten für Webkit-Browser */
		box-shadow: 2px 2px 5px #999; /* Schatten für moderne Browser */
		-o-transform: rotate(-2deg); /* Drehung um 5 Grad für Opera */
		transform: rotate(-2deg); /* Drehung um 5 Grad für moderne Browser */
		float:left;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 15px;
	}

	#container {
		width:100%;
		margin-right: auto;
		margin-top:100px;
		font-family: Arial;
		font-family:Verdana,Arial,sans-serif;
		font-size:12px;
	}
	
	div.bildUndVorstellung {
		max-width: 690px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start; /* Oben ausrichten */
	}
	div.fotoEinzelnLinks {
		display: flex;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
		padding: 5px;
	}
	div.content {
		background:#ffffff;
		width: 320px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
		padding-left: 20px;
		-webkit-border-radius:8px;
		border-radius: 8px;
		border-color: #800000;
		font-family: Verdana,Arial,sans-serif;
		font-size: 12px;
	}

	.umChat-container {
		max-width: 320px;
		margin: 0 auto 0 auto;
		background: #ffffff;
	}
	.chat-container {
		background-image: url(https://www.sharetopia.de/texturen/marbles-1659398_1920.webp);
		max-width: 320px;
		margin: 0px auto 0px auto;
		padding:15px 10px 15px 10px;
		position: relative;
	}
	.message {
		margin-bottom: 20px;
		padding: 0px 2px 7px 2px;
		border-radius: 8px;
		position: relative;
		clear: both;
	}
	.message-time {
		position: absolute;
		bottom: 0.3px;
		right: 3px;
		font-size: 10px;
		color: #000;
	}
	.received {
		background-color: #ffcccc;
		float: left;
		max-width: 80%;
	}
	.sent {
		background-color: #c6f5c6;
		float: right;
		max-width: 80%;
	}
	.message-content {
		padding: 5px 8px 4px 8px !important;
		font-size: 13px;
		word-wrap: break-word;
		line-height: normal;
	}
	.received::before,
	.sent::before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
	}
	.received::before {
		border-width: 0 20px 15px 0;
		border-color: transparent #ffcccc transparent transparent;
		left: -12px;
		top: 0px;
	}
	.sent::before {
		border-width: 0 0 15px 20px;
		border-color: transparent transparent transparent #c6f5c6;
		right: -12px;
		top: 0px;
	}

	.rotinput {
		color:#4F5714;
		font-family:Verdana,Arial,sans-serif;
		font-size:10px;
		border: 1px solid #BDD033;
		background-color: #fffff0;
		padding:5px;
		width:100%;
		height:26px;
		font-weight:bold;
		-webkit-border-radius:4px;
		border-radius:4px;
		margin-left: auto;
		margin-right: auto;
	}
	.rotinputarea{
		color:#4F5714;
		font-family:Verdana,Arial,sans-serif;
		font-size:11px;
		border: 1px solid #BDD033;
		background-color: #fffff0;
		padding:5px;
		width:100%;
		margin-top:5px;
		-webkit-border-radius:4px;
		border-radius:4px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.messageArea{
		color:#4F5714;
		font-family:Verdana,Arial,sans-serif;
		font-size:15px;
		border: 1px solid #BDD033;
		background-color: #fffff0;
		width: 270px;
		height: 24px;
		margin-right: 4px;
		-webkit-border-radius:4px;
		border-radius:4px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	#abstandmini {
		padding-top: 5px;
	}
	#abstandmidi {
		padding-top: 10px;
	}
	#abstandklein {
		padding-top: 15px;
	}
	#abstandmehr {
		padding-top: 20px;
	}
	#abstandmittel {
		padding-top: 30px;
	}
	#abstandschon {
		padding-top: 40px;
	}
	#abstandgross {
		padding-top: 50px;
	}
	#abstandmerkliste {
		padding-top: 58px;
	}
	#abstandende {
		padding-top: 23px;
	}

	.kilo {
		float:left;
		font-family:Helvetica,Arial,sans-serif;
		font-size:24px;
		color:green;
	}

	#cherry-picker2 {
		font-family: 'Cutive Mono', serif;
		font-size: 38px;
		color: #BA0B0B;
		text-align: center;
	}
		
	a.classy:link {
		color:#800000;
		font-weight: bold;
		
	}
	a.classy:visited {
		color:#800000;
		
	}
	a.classy:hover{
		color:#a52a2a;
		
	}
	
	h1 {
		font-family: Arial, serif;
		font-size:22px;
		font-weight: bold;
		margin:0;
		padding:0;
		color: #800000;
		text-align:left;
		line-height: 1.1;
	}
	h2 {
		font-family: Arial, serif;
		font-size:16px;
		font-weight: bold;
		margin:0;
		padding:0;
		padding-top:18px;
		padding-right:18px;
		padding-bottom:10px;
		color: #800000;
		text-align:left;
		line-height: 1.3;
	}
	h3 {
		font-family: Arial, serif;
		font-size:16px;
		font-weight: bold;
		margin:0;
		padding:0;
		padding-top:5px;
		padding-bottom:5px;
		color: #800000;
		text-align:left;
		line-height: 1.3;
	}
	h4 {
		font-family: Arial, serif;
		font-size:16px;
		font-weight: bold;
		margin:0;
		padding:0;
		padding-top:30px;
		padding-bottom:5px;
		color:#2E2EFE;;
		text-align:left;
		line-height: 1.3;
	}
	h5 {
		font-family: Arial, serif;
		font-size: 14px;
		font-weight: bold;
		margin: 0;
		padding: 0;
		padding-top: 30px;
		padding-bottom: 5px;
		color: #2E2EFE;;
		text-align: left;
		line-height: 16px;
	}
	h6 {
		font-family: Arial, serif;
		font-size:16px;
		font-weight: bold;
		margin:0;
		padding:0;
		color: #800000;
		text-align:left;
		line-height: 1.3;
	}
	h7 {
		font-family: Arial, serif;
		font-size:17px;
		font-weight: bold;
		margin:0;
		padding:0;
		color: #800000;
		line-height: 1.3;
	}
	h8 {
		font-family: Arial, serif;
		font-size:13px;
		font-weight: bold;
		margin:0;
		padding:0;
		color: #800000;
		line-height: 1.3;
	}
	h9 {
		font-family: Arial, serif;
		font-size:16px;
		font-weight: bold;
		color: #800000;
		text-align:left;
		line-height: 1.2;
	}
	h10 {
		font-family: Arial, serif;
		font-size:14px;
		font-weight: bold;
		color: #273482;
		text-align:left;
		line-height: 1.1;
	}
	h20 {
		color: #800000;
		font-size: 28px;
	}
	h21 {
		color: #800000;
		font-size: 30px;
  		font-weight: bold;
	}
	h22 {
		color: #800000;
		font-size: 24px;
		line-height: 26px;
	}
	h23 {
		color: #800000;
		font-size: 18px;
	}
	h24 {
		color: #800000;
		font-size: 28px;
		text-align: center;
	}
	h25 {
		color: #800000;
		font-size: 23px;
  		font-weight: bold;
	}
	h26 {
		text-align: center;
		color: #800000;
		font-size: 28px;
	}
	h27 {
		color: #800000;
		font-size: 23px;
  		font-weight: bold;
		text-align: center;
	}
	h30 {
		color: #800000;
		font-size: 13px;
  		font-weight: bold;
		margin-left: 5px;
		margin-right: 5px;
	}
	h31 {
		color: #800000;
		font-size: 13px;
  		font-weight: bold;
	}
	h40 {
		color: #800000;
		font-size: 12px;
  		font-weight: bold;
		margin-left: 5px;
		margin-right: 5px;
	}
	h41 {
		color: #800000;
		font-size: 12px;
  		font-weight: bold;
	}
	h42 {
		color: #800000;
		font-size: 19px;
	}
	h50 {
		color: #800000;
		font-size: 17px;
  		font-weight: bold;
		margin-left: 5px;
		margin-right: 5px;
	}
	h51 {
		color: #800000;
		font-size: 17px;
  		font-weight: bold;
	}
	.zentrierter-text {
		color: #800000;
		font-size: 26px;
  		font-weight: bold;
		text-align: center;
	}
	.zentrierter-text2 {
		color: #2E2EFE;
		font-size: 18px;
  		font-weight: bold;
		text-align: center;
	}

	.pfeil {
		position: fixed;
		width: 30px;
		height: 60px;
		background: #ffffff;
		color: #800000;
		border: 1px solid #14a300;
		border-radius: 3px;
   		outline: none;
		cursor: pointer;
  		align-self: flex-end;
		justify-content: flex-end;
		bottom: 0;
		right: 0;
	}

	div.anzeigeSpalten {
		width: 320px;
		padding: 10px;
		color: #000000;
		font-size: 16px;
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		flex-flow: row wrap;
		justify-content: space-between;
		overflow: auto;
	}
	div.anzeigeSpalten2 {
		width: 320px;
		padding: 10px;
		color: #000000;
		font-size: 16px;
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		justify-content: space-between;
		overflow: auto;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #fe5803;
	}
	div.anzeigeSpalten3 {
		width: 320px;
		padding: 10px;
		color: #000000;
		font-size: 16px;
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		overflow-x: auto; /* Horizontales Scrollen aktivieren */
		-webkit-overflow-scrolling: touch; /* Für flüssiges Scrollen auf iOS-Geräten */
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #168d48;
	}
	
	.umAnzeigeSpalten4 {
		display: flex;
		flex-wrap: wrap;
	}
	.anzeigeSpalten4 {
		width: 320px;
		margin: 10px;
		padding: 10px;
		color: #000000;
		font-size: 14px;
		display: flex;
		align-items: flex-start;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #168d48;
	}
	
	div.linkeSpalteVonDrei {
		width: 296px;
		padding: 10px;
		color: #ffffff;
		font-size: 13px;
		overflow: auto;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #003ca3;
   		/* background-image: linear-gradient(to top, #003ca3 0%, white 90%);*/
		background-color:#2E2EFE;
	    
	}
	div.mittlereSpalteUnten {
		width: 296px;
		padding: 10px;
		color: #000000;
		font-size: 16px;
		display: flex;
		align-items: flex-start;
		align-content: flex-start;
		flex-flow: row wrap;
		justify-content: space-between;
		overflow: auto;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #fe5803;
   		background-image: linear-gradient(to top, #fe5803 0%, white 90%);
	    
	}
	div.mittlereSpalteUnten2 {
		float: left;
		width: 296px;
		padding: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
		color: #000000;
		font-size: 16px;
		overflow: auto;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #fe5803;
   		background-image: linear-gradient(to top, #fe5803 0%, white 90%);
	}
	div.rechteSpalteVonDrei {
		width: 296px;
		min-height: 150px;
		padding: 10px;
		color: #ffffff;
		font-size: 13px;
		overflow: auto;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #14a300;
   		/*background-image: linear-gradient(to top, #14a300 0%, white 90%);*/
		background-color:#FF0040;
	    
	}

	div.ausgabeDinge {
		width: 300px;
		padding: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		color: #000000;
		font-size: 13px;
		display: grid;
		grid-template-columns: 1fr 1fr;
    	grid-template-rows: auto 1fr 1fr;
		-webkit-box-shadow: 2px 2px 5px #636363; /* Schatten für Webkit-Browser */
		box-shadow: 2px 2px 5px #636363; /* Schatten für moderne Browser */
	}
	div.umausgabeDinge2 {
		width: 300px;
		padding: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		color: #000000;
		font-size: 13px;
		display: grid;
    	grid-template-rows: auto auto auto;
		-webkit-box-shadow: 2px 2px 5px #636363; /* Schatten für Webkit-Browser */
		box-shadow: 2px 2px 5px #636363; /* Schatten für moderne Browser */
	}
	div.ausgabeDinge2 {
		width: 300px;
		display: grid;
		grid-template-columns: 140px 160px;
    	grid-template-rows: auto auto auto 1fr;
		z-index: 0;
	}
	div.ausgabeDinge3 {
		width: 300px;
		padding: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		color: #000000;
		font-size: 13px;
		display: grid;
		grid-template-columns: 140px 160px;
    	grid-template-rows: auto auto auto 1fr;
		-webkit-box-shadow: 2px 2px 5px #636363; /* Schatten für Webkit-Browser */
		box-shadow: 2px 2px 5px #636363; /* Schatten für moderne Browser */
		z-index: 0;
	}

	.umAusgabeDinge4 {
		width: 295px;
		padding: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
        display: grid;
    	grid-template-rows: auto auto auto;
		color: #000000;
		align-items: stretch;
		font-size: 13px;
		-webkit-box-shadow: 2px 2px 5px #636363; /* Schatten für Webkit-Browser */
		box-shadow: 2px 2px 5px #636363; /* Schatten für moderne Browser */
	}
	.ausgabeDinge4 {
		padding-top: 32px;
		width: 295px;
		color: #000000;
		font-size: 13px;
		display: grid;
		grid-template-columns: 140px 160px;
    	grid-template-rows: auto auto auto 1fr;
		align-items:center;
		text-decoration: none;
	}
	.ausgabeDinge5 {
		width: 295px;
		color: #000000;
		font-size: 13px;
		padding: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		display: flex;
  		align-items: center;
		text-decoration: none;
		-webkit-box-shadow: 2px 2px 5px #636363; /* Schatten für Webkit-Browser */
		box-shadow: 2px 2px 5px #636363; /* Schatten für moderne Browser */
	}
	.umAusgabeDinge6 {
		width: 295px;
		padding: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		color: #000000;
		font-size: 13px;
		-webkit-box-shadow: 2px 2px 5px #636363; /* Schatten für Webkit-Browser */
		box-shadow: 2px 2px 5px #636363; /* Schatten für moderne Browser */
	}
	.ausgabeDinge6 {
		width: 295px;
		color: #000000;
		font-size: 13px;
		display:flex;
		align-items: flex-start;
		text-decoration: none;
	}
	div.umausgabeDinge7 {
		width: 160px;
		padding: 10px;
		margin: 5px;
		color: #000000;
		font-size: 13px;
		display: grid;
    	grid-template-rows: auto auto auto;
		-webkit-box-shadow: 2px 2px 5px #636363; /* Schatten für Webkit-Browser */
		box-shadow: 2px 2px 5px #636363; /* Schatten für moderne Browser */
	}
	div.ausgabeDinge7 {
		width: 160px;
		z-index: 0;
	}

	.linkeSpalte {
		grid-column: 1 / 2;
		grid-row: 1 / 5;
	}
	.hauptbild {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
	}
	.linkesbild {
		grid-column: 1 / 2;
		grid-row: 3 / 5;
	}
	.rechtesbild {
		grid-column: 2 / 3;
		grid-row: 3 / 5;
	}
	.rechteSpalte {
		grid-column: 2 / 3;
		grid-row: 1 / 5;
	}

	div.linkeSpalte2 {
		grid-column: 1 / 2;
		grid-row: 1 / 4;
	}
	div.hauptbild2 {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}
	div.kleineBilder2 {
		margin-top: 5px;
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}
	div.rechteSpalte2 {
		margin-left: 10px;
		grid-column: 2 / 3;
		grid-row: 1 / 4;
	}
	div.weitereBeschreibung {
		grid-column: 1 / 3;
		grid-row: 4 / 5;
	}

	div.ausgabeDinge8 {
		width: 325px;
		padding: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		color: #000000;
		font-size: 13px;
		display: grid;
		grid-template-columns: 150px 175px;
    	grid-template-rows: auto auto auto 1fr;
		-webkit-box-shadow: 2px 2px 5px #636363; /* Schatten für Webkit-Browser */
		box-shadow: 2px 2px 5px #636363; /* Schatten für moderne Browser */
		z-index: 0;
	}

	.linkeSpalte8 {
		grid-column: 1 / 2;
		grid-row: 1 / 4;
	}

	.hauptbild8 {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}

	div.kleineBilder8 {
		margin-top: 5px;
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}

	.rechteSpalte8 {
		grid-column: 2 / 3; /* Beginnt in der zweiten Spalte */
		grid-row: 1 / 3; /* Erstreckt sich über beide Zeilen */
	}

	div.sh2_weiterButtons {
		width: 300px;
		font-size: 12px;
		margin-top: 20px;
	}
	
	.imageFilter {
		-webkit-filter: blur(2px);
    	filter: blur(2px);
		-webkit-filter: opacity(.3);
		filter: opacity(.3);
	}

	.aufMerkliste {
		grid-column: 1 / 2;
		color: #a30000;
		font-family: Calibri;
		font-size: 14px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-right: 10px;
		padding: 5px;
		border: 1px solid #a30000;
		border-radius: 3px;
   		outline: none;
		cursor: pointer;
	}
	.nichtaufMerkliste {
		grid-column: 1 / 2;
		color: #14a300;
		font-family: Calibri;
		font-size: 14px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-right: 10px;
		padding: 5px;
		border: 1px solid #14a300;
		border-radius: 3px;
   		outline: none;
		cursor: pointer;
	}

	.hoeheGleich {
		height: 20px;
	}
	
	.sh2_inputNormal {
		width: 180px;
		color: #800000;
		font-family: Calibri;
		padding-left: 5px;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 3px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_inputA {
		grid-column: 1 / 5;
		color: #000000;
		font-family: Calibri;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 5px;
		padding: 5px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		outline: none;
	}
	.sh2_inputB {
		width: 306px;
		color: #000000;
		font-family: Calibri;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 5px;
		padding: 5px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		outline: none;
	}
	.sh2_inputC {
  		z-index: 1;
		width: 150px;
		color: #800000;
		font-family: Calibri;
		padding-left: 5px;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 3px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_inputC2 {
  		z-index: 1;
		width: 330px;
		color: #800000;
		font-family: Calibri;
		padding-left: 5px;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 3px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_inputD {
		width: 320px;
		color: #000000;
		font-family: Calibri;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 5px;
		padding: 5px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		outline: none;
	}
	.sh2_inputE {
		width: 325px;
		color: #000000;
		font-family: Calibri;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 5px;
		padding: 2px 5px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		outline: none;
	}
	.sh2_inputF {
		width: 340px;
		color: #000000;
		font-family: Calibri;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 5px;
		padding-top: 5px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		outline: none;
	}

	.sh2_textareaA {
		color: #000000;
		font-family: Calibri;
		width: 306px;
		height: 90px;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 5px;
		padding: 5px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		resize: none;
   		outline: none;
		word-wrap: break-word;
	}
	.sh2_textareaB {
		width: 150px;
		min-height: 25px; /* Anfangshöhe */
		max-height: 70px; /* Maximale Höhe */
		resize: none; /* Deaktiviere das Ändern der Größe durch Benutzer */
		border: 1px solid #a30000;
		border-radius: 8px; /* Runde die Ecken ab */
		outline: none;
		padding: 2px; /* Füge Innenabstand hinzu, um den Text zu trennen */
		font-size: 15px;
		font-family: Calibri;
		color: #800000;
		background-color: #ffffff;
		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
	}
	.sh2_textareaC {
		width: 300px;
		min-height: 25px; /* Anfangshöhe */
		max-height: 70px; /* Maximale Höhe */
		resize: none; /* Deaktiviere das Ändern der Größe durch Benutzer */
		border: 1px solid #a30000;
		border-radius: 8px; /* Runde die Ecken ab */
		outline: none;
		padding: 2px; /* Füge Innenabstand hinzu, um den Text zu trennen */
		font-size: 15px;
		font-family: Calibri;
		color: #800000;
		background-color: #ffffff;
		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
	}
	.sh2_textareaD {
		color: #000000;
		font-family: Calibri;
		width: 340px;
		height: 250px;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		padding: 5px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		resize: none;
   		outline: none;
		word-wrap: break-word;
	}

	.sh2_inputPreis {
		color: #000000;
		font-family: Calibri;
		width: 75px;
		height: 25px;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 5px;
		padding: 5px;
		border: 2px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		outline: none;
	}
	.sh2_selectA {
		background: #ffffff;
		color: #000000;
		font-family: Calibri;
		width: 50%;
		height: 26px;
		font-size: 14px;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 5px;
		margin-left: 30px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		outline: none;
	}

	
	.sh2_submitNormal {
		width: 190px;
		color: #800000;
		font-family: Calibri;
		padding-left: 5px;
		font-size: 15px;
		background-color: #ffffff;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
		margin-top: 3px;
		border: 1px solid #a30000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitA {
		color: #800000;
		font-family: Calibri;
		width: 150px;
		height: 26px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitA:hover {
		border: 2px solid #a30000;
    }
	.sh2_submitA:active {
		background-color: #a30000;
		color: #ffffff;
    }
	.sh2_submitA2 {
		color: #800000;
		font-family: Calibri;
		width: 150px;
		height: 26px;
		margin-left: 20px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitA2:hover {
		border: 2px solid #a30000;
    }
	.sh2_submitA2:active {
		background-color: #a30000;
		color: #ffffff;
    }
	.sh2_submitB {
		color: #800000;
		font-family: Calibri;
		width: 93%;
		margin-top: 20px;
		margin-left: 3%;
		margin-right: 3%;
		height: 26px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitC {
		color: #800000;
		font-family: Calibri;
		width: fit-content;
		margin-top: 20px;
		margin-left: 10px;
		height: 26px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitC2 {
		color: #2E2EFE;
		font-family: Calibri;
		width: fit-content;
		margin-top: 20px;
		margin-left: 10px;
		padding-left: 5px;
		padding-right: 5px;
		height: 26px;
		font-size: 14px;
		border: 1px solid #2E2EFE;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitD {
		color: #800000;
		font-family: Calibri;
		width: 150px;
		margin-left: 5px;
		margin-right: 5px;
		height: 26px;
		font-size: 13px;
		border: 1px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitE {
		color: #800000;
		font-family: Calibri;
		width: 136px;
		margin-left: 5px;
		margin-right: 5px;
		height: 26px;
		font-size: 13px;
		border: 1px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitF {
		color: #800000;
		font-family: Calibri;
		width: 155px;
		height: 46px;
		margin-left: -5px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitF:hover {
		border: 2px solid #a30000;
    }
	.sh2_submitF:active {
		background-color: #a30000;
		color: #ffffff;
    }
	.sh2_submitF1 {
		color: #800000;
		font-family: Calibri;
		width: 185px;
		height: 25px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		padding: 1px 5px 2px 5px;
		text-decoration: none;
    	cursor: pointer;
    	box-sizing: border-box;
	}
	.sh2_submitF1:hover {
		border: 2px solid #a30000;
    }
	.sh2_submitF1:active {
		color: #ffffff;
    }
	.sh2_submitF2 {
		color: #800000;
		font-family: Calibri;
		width: 155px;
		height: 46px;
		margin-left: 20px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitF2:hover {
		border: 2px solid #a30000;
    }
	.sh2_submitF2:active {
		background-color: #a30000;
		color: #ffffff;
    }
	.sh2_submitF3 {
		color: #800000;
		font-family: Calibri;
		width: 240px;
		height: 25px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		padding: 2px 5px 2px 5px;
		text-decoration: none;
    	cursor: pointer;
    	box-sizing: border-box;
	}
	.sh2_submitF3:hover {
		border: 2px solid #a30000;
    }
	.sh2_submitF3:active {
		background-color: #a30000;
		color: #ffffff;
    }
	.sh2_submitF4 {
		color: #800000;
		font-family: Calibri;
		width: 100%;
		height: 28px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		padding: 2px 5px 2px 5px;
		text-decoration: none;
    	cursor: pointer;
    	box-sizing: border-box;
	}
	.sh2_submitF4:hover {
		border: 2px solid #a30000;
    }
	.sh2_submitF4:active {
		background-color: #a30000;
		color: #ffffff;
    }
	.sh2_submitG {
		color: #800000;
		font-family: Calibri;
		width: 320px;
		height: 26px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitH {
		color: #800000;
		font-family: Calibri;
		width: 310px;
		height: 26px;
		margin-left: 5px;
		margin-bottom: 3px;
		padding: 3px 6px 3px 6px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		text-decoration: none;
		cursor: pointer;
	}
	.sh2_submitH:hover {
		padding: 0px 4px 0px 4px;
		border: 2px solid #a30000;
    }
	.sh2_submitH:active {
		background-color: #a30000;
		color: #ffffff;
    }
	.sh2_submitI {
		color: #800000;
		font-family: Calibri;
		width: 120px;
		height: 26px;
		margin-left: 5px;
		margin-bottom: 3px;
		padding: 3px 6px 3px 6px;
		font-size: 14px;
		border: 1px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		text-decoration: none;
		cursor: pointer;
	}
	.sh2_submitI:hover {
		padding: 0px 4px 0px 4px;
		border: 2px solid #a30000;
    }
	.sh2_submitI:active {
		background-color: #a30000;
		color: #ffffff;
    }

	a.classx {
		color:#800000;
		font-weight: bold;
		font-size:15px;
		margin-right:10px;
		text-decoration:none;
	}

	input[type="range"] {
		width: 98%;
	}
	input[type=range]::-webkit-slider-runnable-track {
		height: 10px;
		cursor: pointer;
		background-color: silver;
		border-radius: 5px;
	}
	input[type=range]::-webkit-slider-thumb {
		-webkit-appearance: none;
		border: 8px solid #800000;
		height: 34px;
		width: 34px;
		border-radius: 50%;
		background-color: #ffffff;
		cursor: pointer;
		margin-top: -14px;
	}

	.rechtsButton {
		clear: both;
		margin-left: 130px;
		margin-top: -26px;
	}

	.radiobtn {
		clear: both;
		margin-left: 150px;
		margin-top: -26px;
	}
	.radiobtn label {
		background:none;
		color:#a30000;
		border-radius: 8px;
		padding: 5px 5px;
		border: 1px solid #a30000;
		margin-bottom: 2px;
		cursor: pointer;
		font-family: Calibri, Helvetica, sans-serif;
	}

	.radiobtn2 {
		clear: both;
		margin-top: -26px;
	}
	.radiobtn2 label {
		background:none;
		color:#a30000;
		border-radius: 8px;
		padding: 5px 5px;
		border: 1px solid #a30000;
		margin-bottom: 2px;
		cursor: pointer;
		font-family: Calibri, Helvetica, sans-serif;
	}

	.radiobtn3 {
		display: flex;
		align-items: center;
	}
	.radiobtn3 label {
		background: none;
		color: #a30000;
		border-radius: 8px;
		padding: 5px 10px;
		border: 1px solid #a30000;
		cursor: pointer;
		font-family: Calibri, Helvetica, sans-serif;
		margin-right: 3px; /* Abstand zwischen den Buttons */
	}
	.radiobtn3 label:last-child {
		margin-right: 0; /* Kein Abstand für den letzten Button */
		margin-left: 27px; /* Den letzten Button ganz nach rechts schieben */
	}
	
	.custom-page .special-radio {
		appearance: none;
		display: none;
		width: 20px;
		height: 16px;
		font-size: 15px;
	}
	.custom-page .special-radio:checked + label {
		background:#a30000;
		color:#fff;
	}

	.center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.redLink {
		color: #a30000;
  		font-weight: bold;
		text-decoration: none;
	}
	.greenLink {
		color: #008510;
  		font-weight: bold;
		text-decoration: none;
	}
	.blueLink {
		color: #031790;
  		font-weight: bold;
		text-decoration: none;
	}

	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.4);
	}
	.modal-content {
		background-color: #fefefe;
		margin: 170px auto;
		padding: 0px 10px 10px 10px;
		border: 2px solid #800000;
		width: 280px;
		max-width: 300px;
		text-align: center;
		border-radius: 8px;
	}
	#modal button {
		margin: 10px;
		padding: 5px 10px;
		color: #ffffff;
		background-color: #800000;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	div.content1 {
		background: #ffffff;
		width: 200px;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		margin-bottom: 10px;
	}
	div.content1innen {
		background: #ffffff;
		width: 180px;
		margin-left: auto;
		margin-right: auto;
	}
	div.content2 {
		background: #ffffff;
		width: 200px;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	div.content2innen {
		background: #ffffff;
		width: 180px;
		margin-left: auto;
		margin-right: auto;
		padding: 5px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #800000;
	}
	div.content3 {
		background: #ffffff;
		width: 200px;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 3px solid #a30000;
	}
	div.content3innen {
		background: #ffffff;
		width: 180px;
		margin-left: auto;
		margin-right: auto;
	}
	div.content4 {
		background: #ffffff;
		width: 318px;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	div.content4innen {
		background: #ffffff;
		width: 316px;
		margin: 5px auto 5px auto;
	}
	div.content5 {
		background: #ffffff;
		width: 200px;
		height: 600px;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	div.content5innen {
		background: #ffffff;
		width: 180px;
		margin-left: auto;
		margin-right: auto;
	}
	div.content6 {
		background: #ffffff;
		width: 200px;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	div.content6innen {
		position: relative; /* Die Eltern-Div positionieren */
		background: #ffffff;
		width: 180px;
		margin-left: auto;
		margin-right: auto;
	}

	.buttonStyle100P {
		background-color: #ffffff;
		color: #a30000;
		font-size: 15px;
		width: 98%;
        height: 39px;
		margin-top: 5px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #a30000;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
	    vertical-align: bottom;
		cursor: pointer;
	}
	.buttonStyle100P:hover {
		border: 4px solid #a30000;
    }
	.buttonStyle100P:active {
		background-color: #a30000;
		color: #003ca3;
    }

	.buttonStyle1 {
		background-color: #ffffff;
		color: #730000;
		font-size: 15px;
		width: 180px;
        height: 39px;
		margin-top: 5px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #730000;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
	    vertical-align: bottom;
		cursor: pointer;
	}
	.buttonStyle1:hover {
		border: 4px solid #551404;
		margin-left: 3px;
		margin-right: 2.5px;
    }
	.buttonStyle1:active {
		background-color: #551404;
		color: #000;
    }
	.buttonStyle2 {
		background-color: #ffffff;
		color: #b06800;
		font-size: 15px;
		width: 180px;
        height: 39px;
		margin-top: 5px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #b06800;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
	    vertical-align: bottom;
		cursor: pointer;
	}
	.buttonStyle2:hover {
		border: 4px solid #884700;
		margin-left: 3px;
		margin-right: 2.5px;
    }
	.buttonStyle2:active {
		background-color: #884700;
		color: #000;
    }
	.buttonStyle3 {
		background-color: #ffffff;
		color: #006400;
		font-size: 15px;
		width: 180px;
        height: 39px;
		margin-top: 5px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #006400;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
	    vertical-align: bottom;
		cursor: pointer;
	}
	.buttonStyle3:hover {
		border: 4px solid #14a300;
		margin-left: 3px;
		margin-right: 2.5px;
    }
	.buttonStyle3:active {
		background-color: #14a300;
		color: #000;
    }
	.buttonStyle4 {
		background-color: #ffffff;
		color: #00008B;
		font-size: 15px;
		width: 180px;
        height: 39px;
		margin-top: 5px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #00008B;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
	    vertical-align: bottom;
		cursor: pointer;
	}
	.buttonStyle4:hover {
		border: 4px solid #000056;
		margin-left: 3px;
		margin-right: 2.5px;
    }
	.buttonStyle4:active {
		background-color: #000056;
		color: #000;
    }
	.buttonStyle5 {
		background-color: #ffffff;
		color: #4B0082;
		font-size: 15px;
		width: 180px;
        height: 39px;
		margin-top: 5px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #4B0082;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
	    vertical-align: bottom;
		cursor: pointer;
	}
	.buttonStyle5:hover {
		border: 4px solid #2f0067;
    }
	.buttonStyle5:active {
		background-color: #2f0067;
		color: #000;
    }

	.buttonStyle80 {
		background-color: #ffffff;
		color: #a30000;
		font-size: 15px;
		width: 100%;
        height: 39px;
		margin-top: 5px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px;
		padding-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 5px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: 2px solid #a30000;
   		background-image: linear-gradient(to top, gainsboro 0%, white 90%);
	    vertical-align: bottom;
		cursor: pointer;
	}
	.buttonStyle80:hover {
		border: 4px solid #a30000;
    }
	
	*:disabled {
		background-color: grey;
		color: #a30000;
		border: 0;
		opacity: 1;
	}
	*:disabled:hover {
		border: 0;
    }
	
	.outer-container {
		width: 355px; /* Größe des äußeren Containers */
		height: 355px;
		border-radius: 50%; /* Äußeren Container in einen Kreis verwandeln */
		background-color: #ffffff; /* Hintergrundfarbe des äußeren Containers */
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;position: relative;
		top: 200px; /* Anpassung der Position des Containers nach oben */
		left: 50%;
		transform: translate(-50%, -50%); /* Zentrierung des Containers */
	}
	.circle-container {
		width: 340px; /* Durchmesser des kleineren Kreises */
		height: 340px;
		border-radius: 50%; /* Container in einen Kreis verwandeln */
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.circle-button {
		width: 100px; /* Größe der Buttons anpassen */
		height: 100px;
		border-radius: 50%; /* Runde Form */
		background-color: #3498db; /* Hintergrundfarbe der Buttons anpassen */
		color: #fff; /* Textfarbe der Buttons anpassen */
		font-size: 16px; /* Textgröße anpassen */
		border: none;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.3s ease;
		position: absolute; /* Positionierung der Buttons absolut */
	}
	/* Positionierung der Buttons im Kreis */
	/* Winkel und Abstand für 6 Buttons im Kreis */
	.circle-button:nth-child(1) { transform: rotate(0deg) translate(110px) rotate(0deg); }
	.circle-button:nth-child(2) { transform: rotate(60deg) translate(110px) rotate(-60deg); }
	.circle-button:nth-child(3) { transform: rotate(120deg) translate(110px) rotate(-120deg); }
	.circle-button:nth-child(4) { transform: rotate(180deg) translate(110px) rotate(-180deg); }
	.circle-button:nth-child(5) { transform: rotate(240deg) translate(110px) rotate(-240deg); }
	.circle-button:nth-child(6) { transform: rotate(300deg) translate(110px) rotate(-300deg); }
	.circle-button:hover {
		background-color: #2980b9; /* Hintergrundfarbe der Buttons bei Hover anpassen */
	}
	/* Hintergrundbild des speziellen Buttons anpassen */
	.button-image {
		background-size: contain; /* Hintergrundbild wird angepasst, um vollständig im Button zu passen */
		background-repeat: no-repeat; /* Hintergrundbild wird nicht wiederholt */
		background-position: center center; /* Hintergrundbild wird zentriert im Button platziert */
		cursor: pointer; /* Cursor ändern, um anzuzeigen, dass der Button anklickbar ist */
	}
	/* Mittlerer Button */
	.gradient-ring {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: conic-gradient(
			red -30deg, 
			orange 30deg, 
			yellow 90deg, 
			green 150deg, 
			blue 210deg, 
			purple 270deg, 
			red 330deg
		) !important;
		position: absolute;
		top: 50%;  /* Mittig platzieren */
		left: 50%; /* Mittig platzieren */
		transform: translate(-50%, -50%);
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
	}

	/* Schatten und weißer Kreis in der Mitte */
	.gradient-ring::before {
		content: '';
		position: absolute;
		top: 15%;
		left: 15%;
		width: 70%;
		height: 70%;
		border-radius: 50%;
		background-color: white;
		box-shadow: inset -10px 20px 20px rgba(0, 0, 0, 0.3), 
					inset -5px 5px 5px rgba(255, 255, 255, 0.5);
	}
	.button-text {
		position: absolute; /* Position absolut, um den Text im Button zu zentrieren */
		top: 50%;          /* Vertikale Zentrierung */
		left: 50%;         /* Horizontale Zentrierung */
		transform: translate(-50%, -50%); /* Genaues Zentrieren */
		margin-top: -3px;
		line-height: 16px;
		font-size: 14px;
		color: black;
		text-align: center; /* Text zentrieren */
	}
}


@media only screen and (min-width: 360px) {

	.profilTable {
		width: 340px;
	}

	.news1 {
		float: left;
		width: 303px;
		border-style: dotted;
		margin-top: 5px;
		margin-bottom: 10px;
		padding-left: 15px;
		padding-right: 15px;
		color: #800000;
		font-size: 1em;
		text-align: center;
	}
	.news2 {
		float: left;
		width: 303px;
		border-style: dotted;
		margin-top: 5px;
		margin-bottom: 10px;
		padding-left: 15px;
		padding-right: 15px;
		color: #800000;
		font-size: 1em;
		text-align: center;
	}
	.news3 {
		float: left;
		width: 303px;
		border-style: dotted;
		margin-top: 5px;
		padding-left: 15px;
		padding-right: 15px;
		color: #800000;
		font-size: 1em;
		text-align: center;
	}
	.news1 img, .news2 img, .news3 img {
		max-width: 300px;
		padding-top: 15px;
		display: block;
		margin: 0 auto;
	}

	.nachrichtenVerlaeufe {
		font-weight: normal;
		font-size: 0.9em;
		color: blue;
		width: 225px !important;
		word-wrap: break-word;
	}

	div.content1 {
		width: 310px;
	}
	div.content1innen {
		width: 290px;
	}
	div.content2 {
		width: 300px;
	}
	div.content2innen {
		width: 280px;
	}
	div.content3 {
		width: 340px;
	}
	div.content3innen {
		width: 320px;
	}
	div.content4 {
		width: 345px;
	}
	div.content4innen {
		width: 320px;
	}
	div.content5 {
		width: 340px;
		height: 650px;
	}
	div.content5innen {
		width: 320px;
	}
	div.content6 {
		width: 340px;
	}
	div.content6innen {
		width: 320px;
	}
	div.content7 {
		background: #ffffff;
		width: 340px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	div.content7innen {
		background: #ffffff;
		width: 320px;
		margin-left: auto;
		margin-right: auto;
	}

	.sh2_Bild {
		display: flex;
		flex-direction: column; /* Bilder untereinander ausrichten */
		justify-content: center; /* Horizontal zentrierte Ausrichtung */
		align-items: center; /* Vertikal zentrierte Ausrichtung */
	}
	.sh2_Bild img {
		width: 180px;
		padding: 0px;
		box-shadow: 4px 4px 8px #999; /* Schatten für moderne Browser */
	}

	.textMittigOderNicht {
		text-align: center;
	}
	.text-container {
		display: flex;
    	flex-direction: column;
		margin-top: 5px;
		text-align: center;
	}

	div.contentEbene1 {
		background: #ffffff;
		width: 300px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		border: 2px solid red;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		background-image: linear-gradient(to top, red 0%, white 90%);
	}
	div.contentEbene2 {
		background: #ffffff;
		width: 300px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		border: 2px solid orange;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		background-image: linear-gradient(to top, orange 0%, white 90%);
	}
	div.contentEbene3 {
		background: #ffffff;
		width: 300px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		border: 2px solid green;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		background-image: linear-gradient(to top, green 0%, white 90%);
	}
	div.contentEbene4 {
		background: #ffffff;
		width: 300px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		border: 2px solid blue;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		background-image: linear-gradient(to top, blue 0%, white 90%);
	}
	div.contentEbene5 {
		background: #ffffff;
		width: 300px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		border: 2px solid purple;
		-webkit-border-radius: 8px;
		border-radius: 8px;
   		background-image: linear-gradient(to top, purple 0%, white 90%);
	}
	
	.buttonStyle1 {
		width: fit-content;
		margin-left: 5px;
		margin-right: 5px;
	}
	.buttonStyle2 {
		width: fit-content;
		margin-left: 5px;
		margin-right: 5px;
	}
	.buttonStyle3 {
		width: fit-content;
		margin-left: 5px;
		margin-right: 5px;
	}
	.buttonStyle4 {
		width: fit-content;
		margin-left: 5px;
		margin-right: 5px;
	}

	#animation-text1r {
		animation: text1r 20s linear infinite; /* Zeit für Hin- und Herbewegung erhöht und endlose Wiederholung aktiviert */
		-webkit-animation: text1r 20s linear infinite; /* Safari & Chrome */
		margin-left: 10%;
		margin-bottom: 15px;
		width: 60%;
		-webkit-animation-fill-mode: forwards;
		font-family: Verdana, Arial, sans-serif;
	}
	@keyframes text1r {
		0%, 100% { transform: translate(0px, 0px); color: #ffffff; } /* Ursprungsfarbe */
		25% { transform: translate(0px, 0px); color: #A1C219; }
		50% { transform: translate(0px, 0px); color: #00A4D9; }
		75% { transform: translate(0px, 0px); color: #243483; }
	}

	#animation-text2r {
		animation: text2r 10s linear infinite;
		-webkit-animation: text2r 10s linear infinite;
		margin-left: 130px;
		width: 200px;
		font-family: Verdana, Arial, sans-serif;
	}
	@keyframes text2r {
		0%, 100% { transform: translate(0px, 0px); color: #00A4D9; }
		25% { transform: translate(0px, 0px); color: #2E6D91; }
		50% { transform: translate(0px, 0px); color: #5C1E81; }
		75% { transform: translate(0px, 0px); color: #882491; }
	}

	#animation-text3r {
		animation: text3r 15s linear infinite;
		-webkit-animation: text3r 15s linear infinite;
		margin-left: 10px;
		width: 50%;
	}
	@keyframes text3r {
		0%, 100% { transform: translate(0px, 0px); color: #800000; }
		10% { transform: translate(0px, 0px); }
		50% { transform: translate(0px, 0px); color: #5C1E81; }
		100% { transform: translate(0px, 0px); }
	}

	#animation-text4r {
		animation: text4r 17s linear infinite;
		-webkit-animation: text4r 17s linear infinite;
		margin-right: 10px;
		width: 200px;
	}
	@keyframes text4r {
		0%, 100% { transform: translate(0px, 0px); }
		10% { transform: translate(0px, 0px); color: #882491; }
		50% { transform: translate(0px, 0px); color: #BA0D81; }
		100% { transform: translate(0px, 0px); }
	}

	#animation-text5r {
		animation: text5r 7s linear infinite;
		-webkit-animation: text5r 7s linear infinite;
		margin-right: 10px;
		width: 40%;
		margin-left: auto;
	}
	@keyframes text5r {
		0%, 100% { transform: translate(0px, 0px); color: #D50A85; }
		10% { transform: translate(0px, 0px); }
		50% { transform: translate(0px, 0px); color: #F00013; }
		100% { transform: translate(0px, 0px); }
	}

	#animation-text6r {
		animation: text6r 9s linear infinite;
		-webkit-animation: text6r 9s linear infinite;
		margin-right: 45px;
		width: 50%;
		margin-left: auto;
	}
	@keyframes text6r {
		0%, 100% { transform: translate(0px, 0px); color: #FDC500; }
		10% { transform: translate(0px, 0px); }
		50% { transform: translate(0px, 0px); color: #EA5016; }
		100% { transform: translate(0px, 0px); }
	}

	#animation-text7r {
		animation: text7r 15s linear infinite;
		-webkit-animation: text7r 15s linear infinite;
		margin-right: 145px;
		width: 45%;
		margin-left: auto;
		text-align: right;
	}
	@keyframes text7r {
		0%, 100% { transform: translate(0px, 0px); color: #A1C219; }
		10% { transform: translate(0px, 0px); }
		50% { transform: translate(0px, 0px); color: #49A742; }
		100% { transform: translate(0px, 0px); }
	}

	#animation-text8r {
		animation: text8r 8s linear infinite;
		-webkit-animation: text8r 8s linear infinite;
		margin-right: 10px;
		width: 200px;
	}
	@keyframes text8r {
		0%, 100% { transform: translate(0px, 0px); }
		10% { transform: translate(0px, 0px); color: #882491; }
		50% { transform: translate(0px, 0px); color:#FDC500 ; }
		100% { transform: translate(0px, 0px); }
	}

	.outer-container {
		width: 355px; /* Größe des äußeren Containers */
		height: 355px;
		border-radius: 50%; /* Äußeren Container in einen Kreis verwandeln */
		background-color: #ffffff; /* Hintergrundfarbe des äußeren Containers */
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;position: relative;
		top: 200px; /* Anpassung der Position des Containers nach oben */
		left: 50%;
		transform: translate(-50%, -50%); /* Zentrierung des Containers */
	}
	.circle-container {
		width: 340px; /* Durchmesser des kleineren Kreises */
		height: 340px;
		border-radius: 50%; /* Container in einen Kreis verwandeln */
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.circle-button {
		width: 100px; /* Größe der Buttons anpassen */
		height: 100px;
		border-radius: 50%; /* Runde Form */
		background-color: #3498db; /* Hintergrundfarbe der Buttons anpassen */
		color: #fff; /* Textfarbe der Buttons anpassen */
		font-size: 16px; /* Textgröße anpassen */
		border: none;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.3s ease;
		position: absolute; /* Positionierung der Buttons absolut */
	}
	/* Positionierung der Buttons im Kreis */
	/* Winkel und Abstand für 6 Buttons im Kreis */
	.circle-button:nth-child(1) { transform: rotate(0deg) translate(110px) rotate(0deg); }
	.circle-button:nth-child(2) { transform: rotate(60deg) translate(110px) rotate(-60deg); }
	.circle-button:nth-child(3) { transform: rotate(120deg) translate(110px) rotate(-120deg); }
	.circle-button:nth-child(4) { transform: rotate(180deg) translate(110px) rotate(-180deg); }
	.circle-button:nth-child(5) { transform: rotate(240deg) translate(110px) rotate(-240deg); }
	.circle-button:nth-child(6) { transform: rotate(300deg) translate(110px) rotate(-300deg); }
	.circle-button:hover {
		background-color: #2980b9; /* Hintergrundfarbe der Buttons bei Hover anpassen */
	}
	/* Hintergrundbild des speziellen Buttons anpassen */
	.button-image {
		background-size: contain; /* Hintergrundbild wird angepasst, um vollständig im Button zu passen */
		background-repeat: no-repeat; /* Hintergrundbild wird nicht wiederholt */
		background-position: center center; /* Hintergrundbild wird zentriert im Button platziert */
		cursor: pointer; /* Cursor ändern, um anzuzeigen, dass der Button anklickbar ist */
	}
	/* Mittlerer Button */
	.gradient-ring {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: conic-gradient(
			red -30deg, 
			orange 30deg, 
			yellow 90deg, 
			green 150deg, 
			blue 210deg, 
			purple 270deg, 
			red 330deg
		);
		position: absolute;
		top: 50%;  /* Mittig platzieren */
		left: 50%; /* Mittig platzieren */
		transform: translate(-50%, -50%);
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
	}

	/* Schatten und weißer Kreis in der Mitte */
	.gradient-ring::before {
		content: '';
		position: absolute;
		top: 15%;
		left: 15%;
		width: 70%;
		height: 70%;
		border-radius: 50%;
		background-color: white;
		box-shadow: inset -10px 20px 20px rgba(0, 0, 0, 0.3), 
					inset -5px 5px 5px rgba(255, 255, 255, 0.5);
	}
	
}


@media only screen and (min-width: 470px) {

	h20 {
		color: #800000;
		font-size: 22px;
	}
	h41 {
		color: #800000;
		font-size: 22px;
  		font-weight: bold;
	}
	h42 {
		color: #800000;
		font-size: 21px;
	}

	.zentrierter-text {
		color: #800000;
		font-size: 24px;
  		font-weight: bold;
		text-align: center;
	}
	.zentrierter-text2 {
		color: #2E2EFE;
		font-size: 20px;
  		font-weight: bold;
		text-align: center;
	}

	#logo-container {
		display: flex;
		align-items: flex-start;
		margin-left: auto;
		margin-right: auto;
	}

	#dropdownMenu {
        width: 75%; /* Dropdown-Menü für die Navigation */
    }
}

@media only screen and (min-width: 750px) {
	
	h22 {
		color: #800000;
		font-size: 30px;
		line-height: 32px;
	}

	.flexMitglied-item {
        width: calc(33.33% - 20px);
        margin-right: 20px;
    }
	h27 {
		color: #800000;
		font-size: 34px;
  		font-weight: bold;
		text-align: center;
	}

	.logo-class {
        display: block; /* Damit das Bild nicht mit dem Text kollidiert */
        margin: auto; /* Zum horizontalen Zentrieren */
    }
	#dropdownMenu {
        width: 50%; /* Dropdown-Menü für die Navigation */
    }

	.profiluebersicht {
		width: 630px;
	}

	.vorstellungGegenueber {
		display: grid;
		grid-template-columns: 90px 220px 1fr; /* Eine Spalte für das Bild und zwei für den Text */
		grid-template-rows: 40px auto; /* Zwei Reihen für den Namen und die Adresse sowie für Zuletzt1 und Zuletzt2 */
	}
	.vorstellungFotoBox {
		grid-column: 1 / 2; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 1 / 3;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
	}
	.vorstellungFotoBox img {
		width: 100%;
		-webkit-box-shadow: 4px 4px 10px #5b5b5b; /* Schatten für Webkit-Browser */
		box-shadow: 4px 4px 10px #5b5b5b; /* Schatten für moderne Browser */
		-o-transform: rotate(-2deg); /* Drehung um 5 Grad für Opera */
		transform: rotate(-2deg); /* Drehung um 5 Grad für moderne Browser */
	}
	.vorstellungprofilname {
		grid-column: 2 / 3; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 1 / 2;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 36px;
		color: #800000;
		font-family: 'Cutive Mono';
		font-weight: bold;
		margin-left: 40px;
		margin-top: -15px;
	}
	.vorstellungWohnhaft {
		grid-column: 2 / 3; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 2 / 3;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 24px;
		color: #800000;
		font-family: 'Cutive Mono';
		font-weight: bold;
		margin-left: 40px;
		margin-top: 5px;
	}
	.vorstellungZuletzt1 {
		grid-column: 3 / 4; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 1 / 2;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 18px;
		align-items: end;
	}
	.vorstellungZuletzt2 {
		grid-column: 3 / 4; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 2 / 3;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 18px;
		align-items: start;
	}
	.vorstellungZuletzt3 {
		grid-column: 3 / 4; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 1 / 2;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 13px;
		align-items: end;
	}
	.vorstellungZuletzt4 {
		grid-column: 3 / 4; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 2 / 3;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 13px;
		align-items: start;
	}

	.news1 {
		width: 639px;
	}
	.news2 {
		width: 639px;
	}
	.news3 {
		width: 639px;
	}
	.news1 img, .news2 img, .news3 img {
		max-width: 600px;
	}

	.nachrichtenVerlaeufe {
		font-weight: normal;
		font-size: 0.9em;
		color: blue;
		width: 560px !important;
		word-wrap: break-word;
	}

	div.anzeigeSpalten {
		width: 650px;
	}
	div.anzeigeSpalten2 {
		width: 650px;
	}
	div.anzeigeSpalten3 {
		width: 650px;
	}
	.anzeigeSpalten4 {
		width: 650px;
	}

	.sh2_submitA {
		color: #800000;
		font-family: Calibri;
		width: 320px;
		font-size: 14px;
		border: 2px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitA2 {
		color: #800000;
		font-family: Calibri;
		width: 320px;
		margin-left: 9px;
		font-size: 14px;
		border: 2px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitF {
		color: #800000;
		font-family: Calibri;
		width: 320px;
		height: 26px;
		margin-left: 1px;
		font-size: 14px;
		border: 2px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitF2 {
		color: #800000;
		font-family: Calibri;
		width: 320px;
		height: 26px;
		margin-left: 9px;
		font-size: 14px;
		border: 2px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitG {
		color: #800000;
		font-family: Calibri;
		width: 655px;
		height: 26px;
		font-size: 14px;
		border: 2px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	
	a.class2:link {
		color:#2E2EFE;
		text-decoration:none;
		font-size:15px;
	}
	a.class2:visited {
		color:#2E2EFE;
		text-decoration:none;
	}
	a.class2:hover {
		color:#a52a2a;
		text-decoration:none;
	}

	div.fotoEinzelnLinks {
		display: flex;
		flex-direction: column;
		padding: 5px;
		align-items: flex-start; /* Oben ausrichten */
		margin-right: 20px; /* Beispielabstand zwischen den Divs */
	}

	div.content3 {
		width: 675px;
	}
	div.content3innen {
		width: 655px;
	}
	div.content4 {
		width: 675px;
	}
	div.content4innen {
		width: 655px;
	}
	div.content5 {
		position: relative;
		width: 675px;
		height: 650px;
	}
	div.content5innen {
		width: 655px;
	}
	div.content6 {
		width: 675px;
	}
	div.content6innen {
		width: 655px;
	}

	.sh2_Bild {
		display: flex;
		flex-direction: row; /* Bilder untereinander ausrichten */
		justify-content: start; /* Horizontal zentrierte Ausrichtung */
		align-items: end; /* Vertikal zentrierte Ausrichtung */
	}
	.sh2_Bild img {
		width: 200px;
		margin-left: 15px;
		padding: 0px;
		box-shadow: 4px 4px 8px #999; /* Schatten für moderne Browser */
	}
	.sh2_Bild img:first-child {
		margin-left: 0; /* Kein Abstand links für das erste Bild */
	}
	.textMittigOderNicht {
		text-align: left;
	}
	.text-container {
		display: flex;
    	flex-direction: column;
		text-align: left;
	}
	
	.sh2_textareaA {
		width: 641px;
	}
	.sh2_inputB {
		width: 641px;
	}
	.sh2_inputD {
		width: 655px;
	}

	.outer-container {
		width: 430px; /* Größe des äußeren Containers */
		height: 430px;
		border-radius: 50%; /* Äußeren Container in einen Kreis verwandeln */
		background-color: #ffffff; /* Hintergrundfarbe des äußeren Containers */
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;position: relative;
		top: 240px; /* Anpassung der Position des Containers nach oben */
		left: 50%;
		transform: translate(-50%, -50%); /* Zentrierung des Containers */
	}
	.circle-container {
		width: 400px; /* Durchmesser des kleineren Kreises */
		height: 400px;
		border-radius: 50%; /* Container in einen Kreis verwandeln */
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.circle-button {
		width: 100px; /* Größe der Buttons anpassen */
		height: 100px;
		border-radius: 50%; /* Runde Form */
		background-color: #3498db; /* Hintergrundfarbe der Buttons anpassen */
		color: #fff; /* Textfarbe der Buttons anpassen */
		font-size: 16px; /* Textgröße anpassen */
		border: none;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.3s ease;
		position: absolute; /* Positionierung der Buttons absolut */
	}
	/* Positionierung der Buttons im Kreis */
	/* Winkel und Abstand für 6 Buttons im Kreis */
		.circle-button:nth-child(1) { transform: rotate(0deg) translate(150px) rotate(0deg); }
		.circle-button:nth-child(2) { transform: rotate(60deg) translate(150px) rotate(-60deg); }
		.circle-button:nth-child(3) { transform: rotate(120deg) translate(150px) rotate(-120deg); }
		.circle-button:nth-child(4) { transform: rotate(180deg) translate(150px) rotate(-180deg); }
		.circle-button:nth-child(5) { transform: rotate(240deg) translate(150px) rotate(-240deg); }
		.circle-button:nth-child(6) { transform: rotate(300deg) translate(150px) rotate(-300deg); }
	.circle-button:hover {
		background-color: #2980b9; /* Hintergrundfarbe der Buttons bei Hover anpassen */
	}
	/* Hintergrundbild des speziellen Buttons anpassen */
	.button-image {
		background-size: contain; /* Hintergrundbild wird angepasst, um vollständig im Button zu passen */
		background-repeat: no-repeat; /* Hintergrundbild wird nicht wiederholt */
		background-position: center center; /* Hintergrundbild wird zentriert im Button platziert */
		cursor: pointer; /* Cursor ändern, um anzuzeigen, dass der Button anklickbar ist */
	}
	/* Mittlerer Button */
	.gradient-ring {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: conic-gradient(
			red -30deg, 
			orange 30deg, 
			yellow 90deg, 
			green 150deg, 
			blue 210deg, 
			purple 270deg, 
			red 330deg
		);
		position: absolute;
		top: 50%;  /* Mittig platzieren */
		left: 50%; /* Mittig platzieren */
		transform: translate(-50%, -50%);
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
	}

	/* Schatten und weißer Kreis in der Mitte */
	.gradient-ring::before {
		content: '';
		position: absolute;
		top: 15%;
		left: 15%;
		width: 70%;
		height: 70%;
		border-radius: 50%;
		background-color: white;
		box-shadow: inset -10px 20px 20px rgba(0, 0, 0, 0.3), 
					inset -5px 5px 5px rgba(255, 255, 255, 0.5);
	}
}

@media only screen and (min-width: 1050px) {
	
	#dropdownMenu {
        width: 50%; /* Dropdown-Menü für die Navigation */
    }

	.profiluebersicht {
		width: 960px;
	}
	
	.vorstellungGegenueber {
		display: grid;
		grid-template-columns: 120px 430px 1fr; /* Eine Spalte für das Bild und zwei für den Text */
		grid-template-rows: 30px auto; /* Zwei Reihen für den Namen und die Adresse sowie für Zuletzt1 und Zuletzt2 */
	}
	.vorstellungFotoBox {
		grid-column: 1 / 2; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 1 / 3;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
	}
	.vorstellungFotoBox img {
		width: 100%;
		-webkit-box-shadow: 4px 4px 10px #5b5b5b; /* Schatten für Webkit-Browser */
		box-shadow: 4px 4px 10px #5b5b5b; /* Schatten für moderne Browser */
		-o-transform: rotate(-2deg); /* Drehung um 5 Grad für Opera */
		transform: rotate(-2deg); /* Drehung um 5 Grad für moderne Browser */
	}
	.vorstellungprofilname {
		grid-column: 2 / 3; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 1 / 2;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 36px;
		color: #800000;
		font-family: 'Cutive Mono';
		font-weight: bold;
		margin-left: 40px;
		margin-top: -15px;
	}
	.vorstellungWohnhaft {
		grid-column: 2 / 3; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 2 / 3;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 24px;
		color: #800000;
		font-family: 'Cutive Mono';
		font-weight: bold;
		margin-left: 40px;
		margin-top: 5px;
	}
	.vorstellungZuletzt1 {
		grid-column: 3 / 4; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 1 / 2;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 24px;
		align-items: end;
	}
	.vorstellungZuletzt2 {
		grid-column: 3 / 4; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 2 / 3;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 24px;
		align-items: start;
	}
	.vorstellungZuletzt3 {
		grid-column: 3 / 4; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 1 / 2;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 13px;
		align-items: end;
	}
	.vorstellungZuletzt4 {
		grid-column: 3 / 4; /* Element erstreckt sich von Spalte 1 bis Spalte 2 */
  		grid-row: 2 / 3;    /* Element erstreckt sich von Zeile 1 bis Zeile 5 */
		font-size: 13px;
		align-items: start;
	}
	.news1 {
		width: 967px;
	}
	.news2 {
		width: 967px;
	}
	.news3 {
		width: 967px;
	}

	.nachrichtenVerlaeufe {
		font-weight: normal;
		font-size: 0.9em;
		color: blue;
		width: 890px !important;
		word-wrap: break-word;
	}

	h20 {
		color: #800000;
		font-size: 22px;
	}
	h22 {
		color: #800000;
		font-size: 34px;
		line-height: 36px;
	}
	h27 {
		color: #800000;
		font-size: 40px;
  		font-weight: bold;
		text-align: center;
	}
	h41 {
		color: #800000;
		font-size: 28px;
  		font-weight: bold;
	}
	h42 {
		color: #800000;
		font-size: 31px;
	}

	.zentrierter-text {
		color: #800000;
		font-size: 30px;
  		font-weight: bold;
		text-align: center;
	}
	.zentrierter-text2 {
		color: #2E2EFE;
		font-size: 26px;
  		font-weight: bold;
		text-align: center;
	}

	div.anzeigeSpalten {
		width: 980px;
	}
	div.anzeigeSpalten2 {
		width: 980px;
	}
	div.anzeigeSpalten3 {
		width: 980px;
	}
	div.anzeigeSpalten4 {
		width: 980px;
	}

	.sh2_submitA {
		color: #800000;
		font-family: Calibri;
		width: 480px;
		font-size: 14px;
		border: 2px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitA2 {
		color: #800000;
		font-family: Calibri;
		width: 480px;
		margin-left: 24px;
		font-size: 14px;
		border: 2px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitF {
		color: #800000;
		font-family: Calibri;
		width: 480px;
		height: 26px;
		font-size: 14px;
		border: 2px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitF2 {
		color: #800000;
		font-family: Calibri;
		width: 480px;
		height: 26px;
		margin-left: 24px;
		font-size: 14px;
		border: 2px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	.sh2_submitG {
		color: #800000;
		font-family: Calibri;
		width: 985px;
		height: 26px;
		font-size: 14px;
		border: 2px solid #800000;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}
	
	div.content3 {
		width: 1005px;
	}
	div.content3innen {
		width: 985px;
	}
	div.content4 {
		width: 1005px;
	}
	div.content4innen {
		width: 985px;
	}
	div.content5 {
		width: 1005px;
		height: 600px;
	}
	div.content5innen {
		width: 985px;
	}
	div.content6 {
		width: 1005px;
	}
	div.content6innen {
		width: 985px;
	}

	.sh2_textareaA {
		width: 971px;
	}

	.sh2_inputB {
		width: 971px;
	}
	.sh2_inputD {
		width: 985px;
	}
	.outer-container {
		width: 430px; /* Größe des äußeren Containers */
		height: 430px;
		border-radius: 50%; /* Äußeren Container in einen Kreis verwandeln */
		background-color: #ffffff; /* Hintergrundfarbe des äußeren Containers */
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;position: relative;
		top: 240px; /* Anpassung der Position des Containers nach oben */
		left: 50%;
		transform: translate(-50%, -50%); /* Zentrierung des Containers */
	}
	.circle-container {
		width: 400px; /* Durchmesser des kleineren Kreises */
		height: 400px;
		border-radius: 50%; /* Container in einen Kreis verwandeln */
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.circle-button {
		width: 100px; /* Größe der Buttons anpassen */
		height: 100px;
		border-radius: 50%; /* Runde Form */
		background-color: #3498db; /* Hintergrundfarbe der Buttons anpassen */
		color: #fff; /* Textfarbe der Buttons anpassen */
		font-size: 16px; /* Textgröße anpassen */
		border: none;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.3s ease;
		position: absolute; /* Positionierung der Buttons absolut */
	}
	/* Positionierung der Buttons im Kreis */
	/* Winkel und Abstand für 6 Buttons im Kreis */
		.circle-button:nth-child(1) { transform: rotate(0deg) translate(150px) rotate(0deg); }
		.circle-button:nth-child(2) { transform: rotate(60deg) translate(150px) rotate(-60deg); }
		.circle-button:nth-child(3) { transform: rotate(120deg) translate(150px) rotate(-120deg); }
		.circle-button:nth-child(4) { transform: rotate(180deg) translate(150px) rotate(-180deg); }
		.circle-button:nth-child(5) { transform: rotate(240deg) translate(150px) rotate(-240deg); }
		.circle-button:nth-child(6) { transform: rotate(300deg) translate(150px) rotate(-300deg); }
	.circle-button:hover {
		background-color: #2980b9; /* Hintergrundfarbe der Buttons bei Hover anpassen */
	}
	/* Hintergrundbild des speziellen Buttons anpassen */
	.button-image {
		background-size: contain; /* Hintergrundbild wird angepasst, um vollständig im Button zu passen */
		background-repeat: no-repeat; /* Hintergrundbild wird nicht wiederholt */
		background-position: center center; /* Hintergrundbild wird zentriert im Button platziert */
		cursor: pointer; /* Cursor ändern, um anzuzeigen, dass der Button anklickbar ist */
	}
	/* Mittlerer Button */
	.gradient-ring {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: conic-gradient(
			red -30deg, 
			orange 30deg, 
			yellow 90deg, 
			green 150deg, 
			blue 210deg, 
			purple 270deg, 
			red 330deg
		);
		position: absolute;
		top: 50%;  /* Mittig platzieren */
		left: 50%; /* Mittig platzieren */
		transform: translate(-50%, -50%);
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
	}

	/* Schatten und weißer Kreis in der Mitte */
	.gradient-ring::before {
		content: '';
		position: absolute;
		top: 15%;
		left: 15%;
		width: 70%;
		height: 70%;
		border-radius: 50%;
		background-color: white;
		box-shadow: inset -10px 20px 20px rgba(0, 0, 0, 0.3), 
					inset -5px 5px 5px rgba(255, 255, 255, 0.5);
	}
}