/* ©mtmedia. Last modified: 29.09.2023 */
body {
	text-align:center;
	font-family: Calibri, SansSerif, -apple-system, Roboto;
	font-size: 14px;
}

/** Bilder und Logo */
.top-pic { 
	width: 100%; 
	height: auto; 
	margin: .2em auto; 
	border:none;
}

.top-pic img {
	object-fit: contain;
	width:auto;
	height:auto;
}

	img.top-logo {
	width:33%;
	height:auto;
	}

	img.ref-top-logo {
	width:25%;
	height:auto;
	text-align:left;
	}

/* Content*/
h1, h2, h3, h4, h5, h6 {
	font-family: Calibri, SansSerif, -apple-system, Roboto;
	}

h1#dokumentations-start {
	font-size:1.5em;
	color: #0092d4;
	}

h1#ref-start {
	font-size:1.7em;
	color: #0092d4;
	}


.sitewrapper {
	margin:0px auto; /* horizontale Zentrierung for mod.Browser */
	max-width:1140px;
	border-top:10px solid #0092d4;
	border-bottom:15px solid #0092d4;
}

.ref-box {
	width: 90%;
	margin: 0 auto;
	padding:0.5rem 0;
	background-color: rgba(0,146,212, .1);
	box-shadow: 5px 5px 10px rgba(0,0,0,.1);
}

p.text, b.text {
	margin: 0 0 0 1.3rem;
	font-size:1.2rem;
	line-height:1.4rem;
	text-align:left;
	color: #222;
}

a.ref-link {
	font-size:1.3rem;
	line-height:1.4rem;
	text-align:center;
	color: #222;
	text-decoration:none;
	border-bottom: 1px dotted #000;
}

a:hover.ref-link  {
	border-bottom: 1px solid #ee0000;
	color: #ee0000;
}


p.cta {
	font-size:1.25rem;
	line-height:1.4rem;
	text-align:center;
	color: #ff0000;
	font-weight:700;
}

ol {
	/*margin:-.7em 0 0 .5em;*/
	font-size:1.2rem;
	text-align:left;
	list-style-type: decimal;
	list-style-position: outside;
	list-style-image: none;
	color: #222;
	}

ol li {
	line-height:1.5em;
	margin-bottom:.5em;
}

ol li a {
	text-decoration:none;
	color:#002c7c;
	border-bottom: 1px dotted #002c7c;
}

ol li a:hover {
	text-decoration:none;
	color:#ff0000;
}

form {
   font-family: Calibri, SansSerif, -apple-system, Roboto;
   font-size:16px;
}


#button {
	width: 11em;
	margin:0 auto;
	color:#eee;
	padding: .3em 1em .5em;
	border-radius: .3em;
	background: linear-gradient(to bottom, #38b2dc 0%,#002c7c 100%);
	transition: all 1s ease-in-out;
}

/*#button::before {
	content: "\260E\00a0";
	color: #fff; }
*/

#button:hover {
	color:#fff;
	background: linear-gradient(to bottom, #002c7c 0%,#38b2dc 100%);
}

#button a {
	font-size:.9em;
	text-decoration:none;
	color:#fff;
	font-weight:bold;
}

#button a:hover {
	color:#ffff00;
	font-weight:bold;
	text-decoration: none;
	border-bottom:none;
}

.trenn {
	width: 99%;
	height: 2px;
	margin: 1em auto 0;
	border-top:1px solid gray;
}

.footer {
	font-size:.7em;
}

.footer a {
	text-decoration:none;
	color:#002c7c;
	border-bottom: 1px dotted #002c7c;
}

.footer a:hover {
	text-decoration:none;
	color:#ff0000;
}

/* Responsive Tabelle
1. Wrapper für responsives Verhalten */
    .table-container {
        width: 100%;
        overflow-x: auto; /* Erlaubt horizontales Scrollen auf kleinen Bildschirmen */
        margin: 20px 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* 2. Basis-Styling der Tabelle */
    table {
        width: 100%;
        border-collapse: collapse;
        min-width: 500px; /* Verhindert zu starkes Zusammenquetschen */
        background-color: white;
    }

    th, td {
        text-align: center;
        padding: 12px 15px;
        border-bottom: 1px solid #ddd;
    }

    thead {
        background-color: #0092d4;
        color: white;
    }

    tbody tr:hover {
        background-color: #f5f5f5;
    }

/* Bildgroesse in Tabelle*/
		td img { 
			display: inline-block;
			max-width: 95%;
			max-height: 95%;
			margin:0;
		}

    /* 3. Media Query für sehr kleine Bildschirme (Optional) */
@media screen and (max-width: 480px) {
		img.top-logo {
		width:66%;
		height:auto;
		margin:.25em auto;
		}

		#button {
		width:17em;
		padding: .9em 1em 1em;
		border-radius: .5em;
		}

		#button a {
		font-size:1.1em;
		}
		

		h1#ref-start {
			font-size:1.2em;
		}

		a.ref-link {
			font-size:.75rem;
		}

		.footer {
		font-size:1em;
		line-height:1.5rem;
		}
}


/*iphone Pro 14 MAX: 428 pixels width 926 pixels height*

 @media only screen 
        and (device-width: 428px) 
        and (device-height: 926px) 
        and (-webkit-device-pixel-ratio: 3) { }
*/

@media ( min-width: 700px ) {

	body {
		font-size: 1.7rem;
	}

	/* Element Base -------------------------- */

	p {
		margin-bottom: 1.22em;
	}

	ul,
	ol {
		margin-bottom: 4rem;
	}

	pre {
		padding: 3rem;
	}

	hr {
		margin: 8rem 0;
	}


	h1, .heading-size-1,
	h2, .heading-size-2 {
		margin: 1rem 0 3.5rem;
	}

	h3, .heading-size-3,
	h4, .heading-size-4,
	h5, .heading-size-5,
	h6, .heading-size-6 {
		margin: 1rem 0 2.5rem;
	}

	h1, .heading-size-1 { font-size: 4.8rem; }
	h2, .heading-size-2 { font-size: 4.0rem; }
	h3, .heading-size-3 { font-size: 3.2rem; }
	h4, .heading-size-4 { font-size: 2.4rem; }
	h5, .heading-size-5 { font-size: 2.1rem; }

	/*#button { width: 12em; } */


	/* FOOTER INNER */

	.footer-inner {
		font-size: 1.6rem;
		padding-bottom: 4rem;
	}

	.footer-menu {
		margin-bottom: 4rem;
	}

	.footer-credits {
		font-size: 1.4rem;
	}

}