body {
        font-family: Arial, sans-serif;
        background-color: #f4f6f8;
        margin: 0;
        padding: 20px;
		}

    .tool-box {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
		}
	
	#label_title {
		font-size: 26px;
		margin-top: 0;
        color: #222;
	}
	
	#berechnenBtn {
		margin-top: 6px;
		margin-bottom: 3px;
	}

    label {
        display: block;
        margin-top: 15px;
        font-weight: bold;
    }

    input,
    select {
        width: 100%;
        padding: 10px;
        margin-top: 6px;
        box-sizing: border-box;
		border-radius: 6px;
		border: 1px solid #ccc;
    }
	
	input:focus,
		select:focus {
		outline: none;
		border: 1px solid #ff9933;
	}
	
	button {
		margin-top: 20px;
		padding: 12px;
		width: 100%;
		border: 1px solid #ccc;
		background-color: white;
		cursor: pointer;
		transition: all 0.2s ease;
		border-radius: 6px;
	}
	
	
	
	button:disabled {
		background-color: #dddddd;
		color: #888888;
		cursor: not-allowed;
	}
	
	button.aktiv {
		background-color: #ff9933;
		color: white;
		border: 1px solid #ff9933;
	}

	button:focus {
		outline: none;
		border: 1px solid #ff9933;
		box-shadow: 0 0 5px rgba(255, 153, 51, 0.5);
	}
	
	button:not(:disabled):hover {
		border: 1px solid #ff9933;
		box-shadow: 0 0 8px rgba(255, 153, 51, 0.6);
		transform: scale(1.01);
		}

    .result {
		margin-top: 20px;
		padding: 20px;
		background: #f5f5f5;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }
	
	.error {
		color: red;
		font-weight: bold;
}

	.success {
		color: green;
		font-weight: bold;
	}
	
	.btnmitteilung {
		margin: 3px;
		font-size: 12px;
		color: #666;
	}
	
	.info-icon {
		position: relative;

		display: inline-flex;
		align-items: center;
		justify-content: center;

		width: 18px;
		height: 18px;

		margin-left: 6px;

		border-radius: 50%;

		background-color: #999;
		color: white;

		font-size: 12px;
		font-weight: bold;

		cursor: pointer;
	}

	.tooltip {
		display: none;
		position: absolute;

		top: 30px;
		left: 0;

		width: min(580px, 90vw);

		background: white;
		border: 1px solid #ccc;
		border-radius: 10px;

		padding: 14px;

		box-shadow: 0 6px 20px rgba(0,0,0,0.2);

		z-index: 999;
	}

	.tooltip.show {
		display: block;
	}

	.close-btn {
		position: absolute;

		top: 8px;
		right: 10px;

		cursor: pointer;

		font-size: 26px;
		color: #4a4a4a;
	}

	.close-btn:hover {
		color: red;
		
	}

	.info-icon:hover {
		background-color: #ff9933;
	}

	.tooltip img {
		width: 100%;
		border-radius: 6px;
		margin-bottom: 8px;
	}

	.tooltip-text {
		display: block;
		font-size: 13px;
		line-height: 1.4;
		color: #333;
		
		margin-bottom: 10px;
	}
	

	
	
		/* ==========================================================
	   RESPONSIVE DESIGN
	   Darstellung für Tablets und Smartphones bis 768px
	   ========================================================== */
	@media (max-width: 768px) {

		/* RESPONSIVE DESIGN:
		   Weniger Abstand zum Bildschirmrand */
		body {
			padding: 10px;
		}


		/* RESPONSIVE DESIGN:
		   Tool-Box darf nicht breiter als der Bildschirm werden */
		.tool-box {
			width: 100%;
			max-width: 100%;
			padding: 18px;
			box-sizing: border-box;
		}


		/* RESPONSIVE DESIGN:
		   Überschrift auf kleineren Displays verkleinern */
		#label_title {
			font-size: 24px;
		}


		/* RESPONSIVE DESIGN:
		   Resultatbox benötigt auf Mobile etwas weniger Innenabstand */
		.result {
			padding: 16px;
		}


		/* RESPONSIVE DESIGN:
		   Inputs und Auswahlfelder bleiben vollständig innerhalb
		   der Tool-Box */
		input,
		select {
			max-width: 100%;
			box-sizing: border-box;
		}


		/* RESPONSIVE DESIGN:
		   Lange Texte dürfen umbrechen und dadurch nicht
		   aus der Tool-Box hinausragen */
		p,
		label,
		span {
			overflow-wrap: break-word;
		}


		/* RESPONSIVE DESIGN:
		   Tooltip an die Breite des Smartphone-Bildschirms anpassen */
		.tooltip {
			width: 85vw;
			max-width: 85vw;
			left: 50%;
			transform: translateX(-50%);
			box-sizing: border-box;
		}


		/* RESPONSIVE DESIGN:
		   Bilder im Tooltip dürfen niemals breiter
		   als ihr Container werden */
		.tooltip img {
			max-width: 100%;
			height: auto;
		}


		/* RESPONSIVE DESIGN:
		   Nur die Tabelle kann auf kleinen Displays
		   horizontal gescrollt werden. */
		.logTableScroll {
			width: 100%;
			max-width: 100%;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}


		/* RESPONSIVE DESIGN:
		   Tabelle behält ihre Mindestbreite.
		   Auf Smartphones kann innerhalb des
		   Tabellenbereichs horizontal gewischt werden. */
		#logTable {
			min-width: 800px;
		}


		/* RESPONSIVE DESIGN:
		   Tabelle behält eine sinnvolle Mindestbreite.
		   Auf Smartphones kann nach links/rechts gewischt werden. */
		#logTable {
			min-width: 800px;
		}


		/* RESPONSIVE DESIGN:
		   Verhindert, dass Tabellenüberschriften und Inhalte
		   unkontrolliert zusammengedrückt werden */
		#logTable th,
		#logTable td {
			white-space: normal;
		}
	}


	/* ==========================================================
	   RESPONSIVE DESIGN
	   Zusätzliche Anpassungen für kleine Smartphones bis 480px
	   ========================================================== */
	@media (max-width: 480px) {

		/* RESPONSIVE DESIGN:
		   Außenabstand auf sehr kleinen Displays weiter reduzieren */
		body {
			padding: 6px;
		}


		/* RESPONSIVE DESIGN:
		   Innenabstand der Tool-Box reduzieren */
		.tool-box {
			padding: 14px;
			border-radius: 8px;
		}


		/* RESPONSIVE DESIGN:
		   Überschrift auf kleinen Smartphones weiter verkleinern */
		#label_title {
			font-size: 21px;
		}


		/* RESPONSIVE DESIGN:
		   Resultatbox kompakter darstellen */
		.result {
			padding: 12px;
			border-radius: 8px;
		}


		/* RESPONSIVE DESIGN:
		   Tooltip nutzt auf kleinen Smartphones fast
		   die gesamte Bildschirmbreite */
		.tooltip {
			width: 88vw;
			max-width: 88vw;
			padding: 12px;
		}


		/* RESPONSIVE DESIGN:
		   Schließen-Symbol des Tooltips bleibt gut bedienbar */
		.close-btn {
			font-size: 24px;
		}
	}