@font-face {
	font-display: swap;
	font-family: Figtree;
	font-style: normal;
	font-weight: 400;
	src: url("assets/figtree-400.woff2") format("woff2");
}
@font-face {
	font-display: swap;
	font-family: Figtree;
	font-style: normal;
	font-weight: 700;
	src: url("assets/figtree-700.woff2") format("woff2");
}

html,body{
	font-family: 'Figtree', sans-serif;
	font-weight: 400;
	border:none; padding:0; margin:0;
	background:#FFFFFF;
	color:#202020;
}
body{
	text-align:center;
	padding-top:3.5em;
}
h1{
	color:#404040;
	font-weight: 700;
	font-size: 3em;
	margin:0.67em 0;
}
#startStopBtn{
	border-radius: 999px;
	display:inline-block;
	margin:1.625em auto 0;
	padding:0;
	color:#000;
	background-color:#FDC132;
	border:0.15em solid #FDC132;
	transition:all 0.3s;
	box-sizing:border-box;
	width:9em; height:2.5em;
	line-height:2.2em;
	cursor:pointer;
	box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
	font-size: 1.5em;
	font-family: 'Figtree', sans-serif;
	font-weight: 500;
}
#startStopBtn:hover{
	box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
}
#startStopBtn.running{
	background-color:#fad272;
	border-color:#fad272;
	color:#FFF;
}
#startStopBtn:before{
	content:"STARTEN";
}
#startStopBtn.running:before{
	content:"ANHALTEN";
}
#test{
	margin-top:3.2em;
	margin-bottom:5em;
}
div.testArea{
	display:inline-block;
	width:16em;
	height:12.5em;
	position:relative;
	box-sizing:border-box;
}
div.testArea2{
	display:inline-block;
	width:14em;
	height:7em;
	position:relative;
	box-sizing:border-box;
	text-align:center;
}
div.testArea div.testName{
	position:absolute;
	top:0.1em; left:0;
	width:100%;
	font-size:1.4em;
	z-index:9;
}
div.testArea2 div.testName{
	display:block;
	text-align:center;
	font-size:1.4em;
}
div.testArea div.meterText{
	position:absolute;
	bottom:1.55em; left:0;
	width:100%;
	font-size:2.5em;
	z-index:9;
}
div.testArea2 div.meterText{
	display:inline-block;
	font-size:2.5em;
}
div.meterText.ping{ color:#56ad9d; }
div.meterText.jitter{ color:#0690b2; }
div.meterText:empty:before{
	content:"0,00";
}
div.testArea div.unit{
	position:absolute;
	bottom:2em; left:0;
	width:100%;
	z-index:9;
}
div.testArea2 div.unit{
	display:inline-block;
}
div.testArea canvas{
	position:absolute;
	top:0; left:0; width:100%; height:100%;
	z-index:1;
}
div.testGroup{
	display:block;
	margin: 0 auto;
}

/* IP-Adressen */
#ipArea{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:1.5em;
	max-width:40em;
	margin:2em auto 0;
	padding:0 1em;
	box-sizing:border-box;
}
.ipBox{
	flex:1 1 15em;
	min-width:0;
	background:#fafbfc;
	border-radius:16px;
	padding:1.2em 1em;
	box-sizing:border-box;
}
.ipLabel{
	font-size:1.1em;
	font-weight:700;
	color:#404040;
}
.ipBadge{
	display:inline-block;
	font-size:0.7em;
	font-weight:400;
	background:#63b5a1;
	color:#FFF;
	border-radius:999px;
	padding:0.1em 0.7em;
	margin-left:0.3em;
	vertical-align:middle;
}
.ipBadge[hidden]{ display:none; }
.ipRow{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.4em;
	margin-top:0.5em;
	min-height:2em;
}
.ipValue{
	font-size:1.25em;
	word-break:break-all;
	color:#202020;
	font-variant-numeric:tabular-nums;
}
.ipValue.unavailable{
	font-size:1em;
	color:#999;
}

/* Kopier-Icon (zwei Blätter) */
.copyIcon{
	flex-shrink:0;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:2em; height:2em;
	padding:0;
	border:0;
	border-radius:8px;
	background:transparent;
	color:#9aa1a9;
	cursor:pointer;
	transition:background-color 0.2s, color 0.2s;
}
.copyIcon svg{
	width:1.05em; height:1.05em;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.copyIcon .icoCheck{ display:none; }
.copyIcon:hover:not(:disabled){
	background:#eceef1;
	color:#404040;
}
.copyIcon:disabled{
	visibility:hidden;
}
.copyIcon.copied{ color:#56ad9d; }
.copyIcon.copied .icoCopy{ display:none; }
.copyIcon.copied .icoCheck{ display:block; }
#startStopBtn:focus-visible,
.copyIcon:focus-visible,
.cliTab:focus-visible{
	outline:3px solid #2391b1;
	outline-offset:2px;
}

/* Speedtest im Terminal */
#cliArea{
	max-width:40em;
	margin:3em auto 0;
	padding:0 1em;
	box-sizing:border-box;
	text-align:left;
}
.cliHead{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:1em;
	margin-bottom:0.9em;
}
.cliHead h2{
	margin:0;
	font-size:0.8em;
	font-weight:700;
	letter-spacing:0.12em;
	text-transform:uppercase;
	color:#2391b1;
}
.cliSource{
	font-size:0.8em;
	color:#808080;
	text-decoration:none;
	white-space:nowrap;
}
.cliSource:hover{ color:#202020; }
.cliCard{
	background:#fafbfc;
	border:1px solid #e6e8eb;
	border-radius:12px;
	overflow:hidden;
}
.cliTabs{
	display:flex;
	align-items:stretch;
	gap:1.4em;
	padding:0 1.2em;
	border-bottom:1px solid #e6e8eb;
	font-size:0.85em;
}
.cliTabsLabel{
	display:flex;
	align-items:center;
	font-weight:700;
	letter-spacing:0.1em;
	text-transform:uppercase;
	color:#404040;
	font-size:0.85em;
	margin-right:0.2em;
}
.cliTab{
	padding:0.95em 0 0.8em;
	border:0;
	border-bottom:2px solid transparent;
	background:transparent;
	font-family:'Figtree', sans-serif;
	font-size:1em;
	color:#808080;
	cursor:pointer;
}
.cliTab:hover{ color:#202020; }
.cliTab[aria-selected="true"]{
	color:#202020;
	font-weight:700;
	border-bottom-color:#FDC132;
}
.cliPanel{
	padding:1.3em 0.8em 1.1em 1.2em;
}
.cliPanel[hidden]{ display:none; }
.cliComment,
.cliLine code,
.cliNote code{
	font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.cliComment{
	font-size:0.85em;
	font-style:italic;
	color:#9aa1a9;
	margin-bottom:0.7em;
}
.cliLine{
	display:flex;
	align-items:center;
	gap:0.6em;
}
.cliLine code{
	flex:1;
	min-width:0;
	overflow-x:auto;
	white-space:nowrap;
	font-size:0.95em;
	color:#202020;
	padding:0.2em 0;
}
.cliPrompt{
	color:#2391b1;
	font-weight:700;
	user-select:none;
}
.cliNote{
	margin:1em 0 0;
	font-size:0.8em;
	line-height:2;
	color:#808080;
	text-align:center;
}
.cliNote[hidden]{ display:none; }
.cliNote code{
	font-size:0.95em;
	color:#404040;
	background:#f3f4f6;
	border:1px solid #e6e8eb;
	border-radius:5px;
	padding:0.1em 0.4em;
	white-space:nowrap;
}

@media all and (max-width:40em){
	body{
		font-size:0.8em;
		padding-top:2em;
	}
}

/* Footer */
.footer {
	max-width: 620px;
	margin: 0 auto;
	background: #fafbfc;
	border-radius: 16px;
	font-family: 'Figtree', sans-serif;
	font-size: 14px;
	color: #222;
	padding: 40px 24px;
	box-sizing: border-box;
}
.footer-logo {
	text-align: center;
}
.footer-logo img {
	width: 260px;
	max-width: 100%;
	height: auto;
}
.footer-slogan {
	font-size: 15px;
	color: #444;
	letter-spacing: 0.08em;
	font-weight: bold;
	margin: 10px 0;
}
.footer-addresses-wrapper {
	background: #f3f4f6;
	border-radius: 12px;
	padding: 24px 20px;
	overflow: hidden;
}
.footer-addresses {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2em;
}
.address-block {
	display: flex;
	flex: 1 1 45%;
	min-width: 0;
	gap: 0.8em;
	align-items: flex-start;
	font-size: 13px;
}
.address-block img {
	width: 28px;
	height: auto;
	flex-shrink: 0;
}
.address-text {
	line-height: 1.4;
	text-align: left;
	white-space: nowrap;
}
.address-text a {
	color: inherit;
	text-decoration: none;
	font-weight: bold;
}
.footer-meta,
.footer-disclaimer {
	font-size: 12px;
	color: #666;
	margin-top: 12px;
	text-align: left;
}
.footer-disclaimer {
	font-size: 10px;
	color: #bbb;
	margin-top: 24px;
}
.footer-disclaimer .disclaimer {
	font-size: 0.5rem;
	color: #555;
	margin-top: 2em;
	text-align: left;
}

@media (max-width: 480px) {
	.address-block {
		flex: 1 1 100%;
		font-size: 12px;
	}
	.address-block img {
		width: 22px;
	}
	.footer {
		padding: 24px 16px;
	}
	.footer-slogan {
		font-size: 14px;
	}
	.footer-meta,
	.footer-disclaimer {
		font-size: 11px;
	}
}