/* ============================================================
   computerfritz.ch – E-Mail-Einrichtungshilfe
   Redesign: klar, modern, vertrauenswürdig.
   ============================================================ */

:root{
	--ink:        #1B1D22;
	--ink-soft:   #565B66;
	--paper:      #F3F1EC;
	--card:       #FFFFFF;
	--line:       #E4E1D8;
	--accent:     #E8720C;
	--accent-dark:#C25E08;
	--accent-soft:#FDECD9;
	--accent-ink: #7A3B03;
	--focus:      #2B6CB0;
	--radius-lg: 16px;
	--radius-md: 10px;
	--radius-sm: 6px;
	--shadow-card: 0 1px 2px rgba(27,29,34,.04), 0 10px 30px -12px rgba(27,29,34,.16);
	--shadow-soft: 0 1px 3px rgba(27,29,34,.06);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
	margin:0;
	font-family:"Inter","Segoe UI",Tahoma,Arial,sans-serif;
	font-style:normal;
	font-weight:400;
	color:var(--ink);
	background:
		radial-gradient(1200px 480px at 12% -10%, #FFF6EA 0%, rgba(255,246,234,0) 60%),
		var(--paper);
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
}

a{ color:var(--accent-dark); }

::selection{ background:var(--accent-soft); color:var(--accent-ink); }

/* Skip native ugly focus, but never remove focus visibility */
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

/* ---------------------------------------------------------
   Kopfbereich
   --------------------------------------------------------- */
.header{
	display:flex;
	align-items:center;
	gap:24px;
	width:100%;
	min-height:0;
	padding:22px 28px;
	background:var(--ink);
	background-image:linear-gradient(120deg, #1B1D22 0%, #23262E 60%, #1B1D22 100%);
	border-bottom:3px solid var(--accent);
}
.logo{
	position:static;
	float:none;
	width:auto;
	min-width:0;
	flex:0 0 auto;
	display:flex;
	align-items:center;
	background:#fff;
	padding:8px 14px;
	border-radius:var(--radius-md);
	box-shadow:var(--shadow-soft);
}
.logo img{
	width:150px;
	height:auto;
	display:block;
}
.title{
	position:static;
	padding-left:0;
	min-width:0;
}
.title h1{
	margin:0;
	font-family:"Space Grotesk","Inter",sans-serif;
	font-weight:600;
	font-size:clamp(1.05rem, 1.6vw + .6rem, 1.6rem);
	line-height:1.3;
	color:#fff;
	letter-spacing:-.01em;
}
.title h1::after{
	content:"Schritt für Schritt Ihr E-Mail-Konto einrichten";
	display:block;
	font-family:"Inter",sans-serif;
	font-weight:500;
	font-size:.8rem;
	letter-spacing:.01em;
	text-transform:none;
	color:#C9CBD3;
	margin-top:4px;
}

/* ---------------------------------------------------------
   Einrichtungs-Assistent (Formular)
   --------------------------------------------------------- */
.formkopf{
	padding:28px 20px 8px;
	max-width:980px;
	margin:0 auto;
}
.formkopf form{
	display:block;
	background:var(--card);
	border:1px solid var(--line);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-card);
	padding:26px 28px 22px;
}
.formkopf form > p{
	margin:0 0 20px;
	padding-bottom:20px;
	border-bottom:1px solid var(--line);
	font-size:.95rem;
	color:var(--ink-soft);
}
.formkopf form > p:last-of-type{
	border-bottom:none;
	padding-bottom:0;
	margin-bottom:0;
	font-size:.85rem;
	background:var(--accent-soft);
	color:var(--accent-ink);
	padding:12px 16px;
	border-radius:var(--radius-sm);
}
.formkopf form > p:first-child::before{
	content:"Schritt 1 · Anbieter & Kontotyp";
	display:block;
	font-family:"Space Grotesk",sans-serif;
	font-weight:600;
	font-size:.78rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--accent-dark);
	margin-bottom:12px;
}

.formkopf label{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:9px 16px;
	margin:4px 8px 4px 0;
	background:#F7F5F0;
	border:1px solid var(--line);
	border-radius:999px;
	font-size:.92rem;
	color:var(--ink);
	cursor:pointer;
	transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.formkopf label:has(input[type="radio"]:checked){
	background:var(--ink);
	border-color:var(--ink);
	color:#fff;
}
.formkopf label:has(input[type="radio"]:hover){
	border-color:var(--accent);
}
.formkopf input[type="radio"]{
	accent-color:var(--accent);
	width:15px;
	height:15px;
	margin:0;
}

.formkopf label[for="anzeigename"],
.formkopf label[for="emailadresse"]{
	display:block;
	background:none;
	border:none;
	padding:0;
	margin:14px 0 6px;
	font-size:.8rem;
	font-weight:600;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--ink-soft);
}
.formkopf input[type="text"]{
	width:100%;
	max-width:420px;
	display:block;
	font-family:inherit;
	font-size:1rem;
	color:var(--ink);
	padding:11px 14px;
	background:#fff;
	border:1.5px solid var(--line);
	border-radius:var(--radius-sm);
	transition:border-color .15s ease, box-shadow .15s ease;
}
.formkopf input[type="text"]:focus{
	border-color:var(--accent);
	box-shadow:0 0 0 3px var(--accent-soft);
}
.formkopf input#button{
	margin-top:20px;
	font-family:"Space Grotesk","Inter",sans-serif;
	font-weight:600;
	font-size:.95rem;
	letter-spacing:.02em;
	color:#fff;
	background:var(--accent);
	border:none;
	padding:12px 26px;
	border-radius:999px;
	cursor:pointer;
	box-shadow:0 8px 20px -8px rgba(232,114,12,.65);
	transition:background .15s ease, transform .1s ease;
}
.formkopf input#button:hover{ background:var(--accent-dark); }
.formkopf input#button:active{ transform:translateY(1px); }

/* ---------------------------------------------------------
   Akkordeon Steuerung
   --------------------------------------------------------- */
article.accordion{
	display:block;
	width:auto;
	max-width:980px;
	padding:0;
	margin:22px auto 60px;
	background:transparent;
	border-radius:0;
	box-shadow:none;
}

article.accordion section{
	display:block;
	width:auto;
	height:auto;
	padding:0;
	margin:0 0 14px 0;
	color:var(--ink);
	background:var(--card);
	overflow:hidden;
	border-radius:var(--radius-lg);
	border:1px solid var(--line);
	border-left-width:1px;
	box-shadow:var(--shadow-soft);
	transition:box-shadow .2s ease, border-color .2s ease;
}
article.accordion section:hover{
	border-color:#D8D3C6;
}

article.accordion section h1{
	font-size:1em;
	font-weight:600;
	width:100%;
	line-height:normal;
	padding:0;
	margin:0;
	color:var(--ink);
	text-align:left;
}

article.accordion section h1 a{
	display:flex;
	align-items:center;
	gap:16px;
	width:100%;
	line-height:normal;
	padding:16px 20px;
	text-decoration:none;
	color:inherit;
	outline:0 none;
	font-family:"Space Grotesk","Inter",sans-serif;
	font-weight:600;
	font-size:1.02rem;
	letter-spacing:-.005em;
}
article.accordion section h1 a img{
	flex:0 0 auto;
	width:34px !important;
	height:34px !important;
	object-fit:contain;
	padding:6px;
	background:var(--accent-soft);
	border-radius:var(--radius-sm);
}
article.accordion section h1 a::after{
	content:"";
	flex:0 0 auto;
	width:11px;
	height:11px;
	margin-left:auto;
	border-right:2px solid var(--ink-soft);
	border-bottom:2px solid var(--ink-soft);
	transform:rotate(45deg);
	transition:transform .2s ease;
}

article.accordion section > *:not(h1){
	margin:0;
	max-height:0;
	opacity:0;
	overflow:hidden;
	padding:0 20px;
	transition:opacity .18s ease;
}

article.accordion section:target{
	height:auto;
	background:var(--card);
	box-shadow:var(--shadow-card);
	border-color:var(--accent);
}

article.accordion section:target h1{
	font-size:1em;
	color:var(--ink);
}
article.accordion section:target h1 a{
	border-bottom:1px solid var(--line);
}
article.accordion section:target h1 a::after{
	transform:rotate(225deg);
	border-color:var(--accent-dark);
}
article.accordion section:target > *:not(h1){
	margin:0 0 16px;
	max-height:none;
	opacity:1;
	padding:0 22px;
	overflow:visible;
}
article.accordion section:target > p:first-of-type{
	padding-top:18px;
}
article.accordion section:target > *:last-child{
	padding-bottom:22px;
	margin-bottom:0;
}

article.accordion section p{
	font-size:.96rem;
	color:var(--ink-soft);
}
article.accordion section p a{
	color:var(--accent-dark);
	font-weight:600;
}

/*Ende Akordeon*/
/*OUTLOOK 2016*/
.outlook16bild4{
	position:relative;
	width:400px;
	font-size:11px;
}
.outlook16bild4 img {
	display:block;
}
.outlook16bild4 .name{
	position:absolute;
	top: 27%;
	left:35%;
}
.outlook16bild4 .email{
	position:absolute;
	top: 33%;
	left:35%;
}
.outlook16bild4 .serverin{
	position:absolute;
	top: 47.5%;
	left:35%;
}
.outlook16bild4 .serverout{
	position:absolute;
	top: 52.5%;
	left:35%;
}
.outlook16bild4 .benutzer{
	position:absolute;
	top: 62.5%;
	left:35%;
}
.outlook16bild4 .password{
	position:absolute;
	top: 67.5%;
	left:35%;
}
.outlook16bild4 .typ{
	position:absolute;
	top: 42.5%;
	left:35%;
}
.outlook16bild4 span{
	background-color:#ffff57;
}
.outlook16bild6{
	position:relative;
	width:400px;
	font-size:11px;
}
.outlook16bild6 img {
	display:block;
}
.outlook16bild6 .portout{
	position:absolute;
	top: 44.3%;
	left:43%;
}
.outlook16bild6 span{
	background-color:#ffff57;
}
/*ENDE OUTLOOK 2016
/*OUTLOOK 2013*/
.outlook13bild4{
	position:relative;
	width:400px;
	font-size:11px;
}
.outlook13bild4 img {
	display:block;
}
.outlook13bild4 .name{
	position:absolute;
	top: 26%;
	left:37%;
}
.outlook13bild4 .email{
	position:absolute;
	top: 31%;
	left:37%;
}
.outlook13bild4 .serverin{
	position:absolute;
	top: 46%;
	left:37%;
}
.outlook13bild4 .serverout{
	position:absolute;
	top: 51%;
	left:37%;
}
.outlook13bild4 .benutzer{
	position:absolute;
	top: 61%;
	left:37%;
}
.outlook13bild4 .password{
	position:absolute;
	top: 66%;
	left:37%;
}
.outlook13bild4 span{
	background-color:#ffff57;
}

/*ENDE OUTLOOK 2013*/
/*OUTLOOK 2010*/
.outlook10bild4{
	position:relative;
	width:400px;
	font-size:11px;
}
.outlook10bild4 img {
	display:block;
}
.outlook10bild4 .name{
	position:absolute;
	top: 27.5%;
	left:44%;
}
.outlook10bild4 .email{
	position:absolute;
	top: 33%;
	left:44%;
}
.outlook10bild4 .serverin{
	position:absolute;
	top: 47.5%;
	left:44%;
}
.outlook10bild4 .serverout{
	position:absolute;
	top: 53%;
	left:44%;
}
.outlook10bild4 .benutzer{
	position:absolute;
	top: 62.5%;
	left:44%;
}
.outlook10bild4 .password{
	position:absolute;
	top: 68%;
	left:44%;
}
.outlook10bild4 span{
	background-color:#ffff57;
}
/*ENDE OUTLOOK2010*/
/*WINDOWS LIVE MAIL 12*/
/*BILD 1*/
.windowslivemail12bild1{
	position:relative;
	width:400px;
	font-size:11px;
}
.windowslivemail12bild1 img {
	display:block;
}
.windowslivemail12bild1 .name{
	position:absolute;
	top: 56%;
	left:37%;
}
.windowslivemail12bild1 .email{
	position:absolute;
	top: 37.3%;
	left:37%;
}

.windowslivemail12bild1 .password{
	position:absolute;
	top: 45.5%;
	left:37%;
}
.windowslivemail12bild1 span{
	background-color:#ffff57;
}
/*ENDE BILD 1*/
/*BILD2*/
.windowslivemail12bild2{
	position:relative;
	width:600px;
	font-size:11px;
}
.windowslivemail12bild2 img {
	display:block;
}

.windowslivemail12bild2 .portout{
	position:absolute;
	top: 38%;
	left:92%;
}
.windowslivemail12bild2 .serverin{
	position:absolute;
	top: 48%;
	left:5%;
}
.windowslivemail12bild2 .serverout{
	position:absolute;
	top: 38%;
	left:55%;
}
.windowslivemail12bild2 .benutzer{
	position:absolute;
	top: 71.5%;
	left:5%;
}

.windowslivemail12bild2 span{
	background-color:#ffff57;
}
/*ENDE BILD 2*/
/*BILD 3*/
.windowslivemail12bild3{
	position:relative;
	width:400px;
	font-size:11px;
}
.windowslivemail12bild3 img {
	display:block;
}

.windowslivemail12bild3 .email{
	position:absolute;
	top: 34%;
	left:54%;
}
/*ENDE BILD 3*/
/*ENDE WINDOWS LIVE MAIL */
/*Start OS X*/
/*Bild 1*/
.os_x_bild1{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.os_x_bild1 img {
	display:block;
}
/*Ende Bild 1*/
/*Bild 2*/
.os_x_bild2{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.os_x_bild2 img {
	display:block;
}
/*Ende Bild 2*/
/*Bild 3*/
.os_x_bild3{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.os_x_bild3 img {
	display:block;
}
.os_x_bild3 .name{
	position:absolute;
	top: 29.6%;
	left:70%;
}
.os_x_bild3 .email{
	position:absolute;
	top: 35%;
	left:70%;
}
.os_x_bild3 .password{
	position:absolute;
	top: 40%;
	left:70%;
}

.os_x_bild3 span{
	background-color:#ffff57;
}
/*Ende Bild 3*/
/*Bild 4*/
.os_x_bild4{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.os_x_bild4 img {
	display:block;
}
.os_x_bild4 .name{
	position:absolute;
	top: 29.2%;
	left:70%;
}
.os_x_bild4 .email{
	position:absolute;
	top: 34.5%;
	left:70%;
}
.os_x_bild4 .password{
	position:absolute;
	top: 40%;
	left:70%;
}

.os_x_bild4 span{
	background-color:#ffff57;
}
/*Ende Bild 4*/
/*Bild 5*/
.os_x_bild5{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.os_x_bild5 img {
	display:block;
}
.os_x_bild5 .serverin{
	position:absolute;
	top: 34.6%;
	left:68%;
}
.os_x_bild5 .benutzer{
	position:absolute;
	top: 39.9%;
	left:68%;
}
.os_x_bild5 .password{
	position:absolute;
	top: 45%;
	left:68%;
}

.os_x_bild5 span{
	background-color:#ffff57;
}
/*Ende Bild 5*/
/*Bild 6*/
.os_x_bild6{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.os_x_bild6 img {
	display:block;
}
.os_x_bild6 .serverout{
	position:absolute;
	top: 29.3%;
	left:62%;
}
.os_x_bild6 .benutzer{
	position:absolute;
	top: 34.5%;
	left:62%;
}
.os_x_bild6 .password{
	position:absolute;
	top: 39.7%;
	left:62%;
}

.os_x_bild6 span{
	background-color:#ffff57;
}
/*Ende Bild 6*/
/*Bild 7*/
.os_x_bild7{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.os_x_bild7 img {
	display:block;
}
/*Ende Bild 7*/
/*Bild 8*/
.os_x_bild8{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.os_x_bild8 img {
	display:block;
}
/*Ende Bild 8*/
/*Bild 9*/
.os_x_bild9{
	
	position:relative;
	width:600px;
	font-size:9px;
}
.os_x_bild9 img {
	display:block;
}
.os_x_bild9 .serverout{
	position:absolute;
	top: 56.5%;
	left:45%;
}
.os_x_bild9 .benutzer{
	position:absolute;
	top: 45.5%;
	left:45%;
}
.os_x_bild9 .password{
	position:absolute;
	top: 49.6%;
	left:45%;
}
.os_x_bild9 .serverin{
	position:absolute;
	top: 41%;
	left:45%;
}
.os_x_bild9 .benutzerw{
	position:absolute;
	top: 21%;
	left:5%;
	color:#fff;
	font-size:8px;
}
.os_x_bild9 .email{
	position:absolute;
	top: 30.2%;
	left:45%;
}
.os_x_bild9 .name{
	position:absolute;
	top: 34.5%;
	left:45%;
}
.os_x_bild9 span.benutzerw{
	background-color:transparent;
}
.os_x_bild9 span{
	background-color:#ffff57;
}
/*Ende Bild 9*/
/*Bild 10*/
.os_x_bild10{
	
	position:relative;
	width:600px;
	font-size:11px;
}
.os_x_bild10 img {
	display:block;
}.os_x_bild10 .serverout{
	position:absolute;
	top: 61.5%;
	left:43.5%;
	background-color:transparent !important;
	color:#A8ACAE;
}
.os_x_bild10 .benutzer{
	position:absolute;
	top: 45.5%;
	left:45%;
}
.os_x_bild10 .password{
	position:absolute;
	top: 49.6%;
	left:45%;
}
.os_x_bild10 .serverin{
	position:absolute;
	top: 41%;
	left:45%;
}
.os_x_bild10 .benutzerw{
	position:absolute;
	top: 21%;
	left:5%;
	color:#fff;
	font-size:8px;
}
.os_x_bild10 .email{
	position:absolute;
	top: 30.2%;
	left:45%;
}
.os_x_bild10 .name{
	position:absolute;
	top: 34.5%;
	left:45%;
}
.os_x_bild10 span.benutzerw{
	background-color:transparent;
}
.os_x_bild10 span{
	background-color:#ffff57;}
/*Ende Bild 10*/
/*Bild 11*/
.os_x_bild11{
	
	position:relative;
	width:600px;
	font-size:11px;
}
.os_x_bild11 img {
	display:block;
}
.os_x_bild11 .serverout{
	position:absolute;
	top: 8.5%;
	left:26.5%;
	background-color:transparent !important;
	color:#000;
}
.os_x_bild11 .benutzer{
	position:absolute;
	top: 70%;
	left:33%;
}
.os_x_bild11 .password{
	position:absolute;
	top: 75.5%;
	left:33%;
}

.os_x_bild11 .email{
	position:absolute;
	top: 8.5%;
	left:58%;
	background-color:transparent !important;
	color:#000;
}
.os_x_bild11 .name{
	position:absolute;
	top: 34.5%;
	left:45%;
}
.os_x_bild11 .portout{
	position:absolute;
	top: 54.5%;
	left:33%;
}
.os_x_bild11 span{
	background-color:#ffff57;}
/*Ende Bild 11*/

/*ENDE OS X*/
/*START THUNDERBIRD*/
/*Bild 1*/
.thunderbird_bild1{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.thunderbird_bild1 img {
	display:block;
}
/*ENDE Bild1*/
/*Bild 2*/
.thunderbird_bild2{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.thunderbird_bild2 img {
	display:block;
}
.thunderbird_bild2 .name{
	position:absolute;
	top: 20.5%;
	left:15%;
}

.thunderbird_bild2 span{
	background-color:#ffff57;
}
/*ENDE Bild2*/
/*Bild 3*/
.thunderbird_bild3{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.thunderbird_bild3 img {
	display:block;
}
.thunderbird_bild3 .name{
	position:absolute;
	top: 14.5%;
	left:36%;
}
.thunderbird_bild3 .email{
	position:absolute;
	top: 19.5%;
	left:36%;
}
.thunderbird_bild3 .password{
	position:absolute;
	top: 24.5%;
	left:36%;
}

.thunderbird_bild3 span{
	background-color:#ffff57;
}
/*ENDE Bild3*/
/*Bild 4*/
.thunderbird_bild4{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.thunderbird_bild4 img {
	display:block;
}
.thunderbird_bild4 .name{
	position:absolute;
	top: 13%;
	left:36%;
}
.thunderbird_bild4 .email{
	position:absolute;
	top: 18%;
	left:36%;
}
.thunderbird_bild4 .password{
	position:absolute;
	top: 23.5%;
	left:36%;
}

.thunderbird_bild4 span{
	background-color:#ffff57;
}
/*ENDE Bild4*/
/*Bild 5*/
.thunderbird_bild5{
	
	position:relative;
	width:800px;
	font-size:11px;
}
.thunderbird_bild5 img {
	display:block;
}
.thunderbird_bild5 .name{
	position:absolute;
	top: 14%;
	left:18%;
}
.thunderbird_bild5 .email{
	position:absolute;
	top: 19.5%;
	left:18%;
}
.thunderbird_bild5 .password{
	position:absolute;
	top: 24.5%;
	left:18%;
}
.thunderbird_bild5 .serverin{
	position:absolute;
	top: 59%;
	left:38%;
}
.thunderbird_bild5 .serverout{
	position:absolute;
	top: 65.2%;
	left:38%;
}
.thunderbird_bild5 .portout{
	position:absolute;
	top: 65.2%;
	left:60.5%;
}
.thunderbird_bild5 .benutzer{
	position:absolute;
	top: 71.2%;
	left:38%;
}
.thunderbird_bild5 .benutzer2{
	position:absolute;
	top: 71.2%;
	left:85%;
}


.thunderbird_bild5 span{
	background-color:#ffff57;
}
/*ENDE Bild5*/
/*ENDE Thunderbird*/
/*START Android Mail*/
/*Bild 1*/
.android_bild1 {
		position:relative;
	width:400px;
	font-size:14px;
}
.android_bild1 img {
	display:block;
}
.android_bild1 .email{
	position:absolute;
	top: 25%;
	left:10%;
}
.android_bild1 .password{
	position:absolute;
	top: 32.5%;
	left:10%;
}
.android_bild1 span{
	background-color:#ffff57;
}
/*Ende Bild 1*/
/*Bild 2*/
.android_bild2{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.android_bild2 img {
	display:block;
}
/*Ende Bild 2*/
/*Bild 3*/
.android_bild3{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.android_bild3 img {
	display:block;
}
.android_bild3 .email{
	position:absolute;
	top: 12.5%;
	left:10%;
}
.android_bild3 .password{
	position:absolute;
	top: 27%;
	left:10%;
}
.android_bild3 .serverin{
	position:absolute;
	top: 41.5%;
	left:10%;
}
.android_bild3 .emaili{
	position:absolute;
	top: 14.5%;
	left:10%;
}
.android_bild3 .passwordi{
	position:absolute;
	top: 31%;
	left:10%;
}
.android_bild3 .serverini{
	position:absolute;
	top: 48.5%;
	left:10%;
}
.android_bild3 span{
	background-color:#ffff57;
}
/*Ende Bild 3*/
/*Bild 4*/
.android_bild4{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.android_bild4 img {
	display:block;
}
.android_bild4 .benutzer{
	position:absolute;
	top: 71.5%;
	left:7%;
}
.android_bild4 .password{
	position:absolute;
	top: 86.5%;
	left:7%;
}
.android_bild4 .serverout{
	position:absolute;
	top: 20%;
	left:7%;
}
.android_bild4 .portout{
	position:absolute;
	top: 48.5%;
	left:7%;
}
.android_bild4 span{
	background-color:#ffff57;
}
/*Ende Bild 4*/
/*Bild 5*/
.android_bild5{
	
	position:relative;
	width:400px;
	font-size:11px;
}
.android_bild5 img {
	display:block;
}
/*Ende Bild 5*/
/*Bild 6*/
.android_bild6{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.android_bild6 img {
	display:block;
}
.android_bild6 .name{
	position:absolute;
	top: 29%;
	left:7%;
}
.android_bild6 .name2{
	position:absolute;
	top: 43.5%;
	left:7%;
}
.android_bild6 span{
	background-color:#ffff57;
}
/*Ende Bild 6*/
/*ENDE Android*/
/*START IOS*/
/*Bild 00*/
.ios_bild00{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.ios_bild00 img {
	display:block;
}
.ios_bild00 span{
	background-color:#ffff57;
}
/*ENDE Bild 00*/
/*Bild 0*/
.ios_bild0{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.ios_bild0 img {
	display:block;
}
.ios_bild0 span{
	background-color:#ffff57;
}
/*ENDE Bild 0*/
/*Bild 1*/
.ios_bild1{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.ios_bild1 img {
	display:block;
}
.ios_bild1 span{
	background-color:#ffff57;
}
/*ENDE Bild 1*/
/*Bild 2*/
.ios_bild2{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.ios_bild2 img {
	display:block;
}
.ios_bild2 .name{
	position:absolute;
	top: 20.5%;
	left:60%;
}
.ios_bild2 .email{
	position:absolute;
	top: 29%;
	left:60%;
}
.ios_bild2 .password{
	position:absolute;
	top: 38%;
	left:60%;
}
.ios_bild2 span{
	background-color:#ffff57;
}
/*ENDE Bild 2*/
/*Bild 3*/
.ios_bild3{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.ios_bild3 img {
	display:block;
}
.ios_bild3 .name{
	position:absolute;
	top: 31%;
	left:60%;
}
.ios_bild3 .email{
	position:absolute;
	top: 40%;
	left:60%;
}

.ios_bild3 .serverin{
	position:absolute;
	top: 68%;
	left:60%;
}
.ios_bild3 .benutzer{
	position:absolute;
	top: 76.5%;
	left:60%;
}
.ios_bild3 .password{
	position:absolute;
	top: 85%;
	left:60%;
}
.ios_bild3 span{
	background-color:#ffff57;
}
/*ENDE Bild 3*/
/*Bild 4*/
.ios_bild4{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.ios_bild4 img {
	display:block;
}
.ios_bild4 .name{
	position:absolute;
	top: 31%;
	left:60%;
}
.ios_bild4 .email{
	position:absolute;
	top: 40%;
	left:60%;
}

.ios_bild4 .serverin{
	position:absolute;
	top: 68%;
	left:60%;
}
.ios_bild4 .benutzer{
	position:absolute;
	top: 76.5%;
	left:60%;
}
.ios_bild4 .password{
	position:absolute;
	top: 85%;
	left:60%;
}
.ios_bild4 span{
	background-color:#ffff57;
}
/*ENDE Bild 4*/
/*Bild 5*/
.ios_bild5{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.ios_bild5 img {
	display:block;
}
.ios_bild5 span{
	background-color:#ffff57;
}
/*ENDE Bild 5*/
/*Bild 6*/
.ios_bild6{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.ios_bild6 img {
	display:block;
}
.ios_bild6 .serverin{
	position:absolute;
	top: 34%;
	left:60%;
}
.ios_bild6 .benutzer{
	position:absolute;
	top: 42%;
	left:60%;
}
.ios_bild6 .password{
	position:absolute;
	top: 51%;
	left:60%;
}
.ios_bild6 .serverout{
	position:absolute;
	top: 71%;
	left:60%;
}
.ios_bild6 .benutzer2{
	position:absolute;
	top: 79%;
	left:60%;
}
.ios_bild6 .password2{
	position:absolute;
	top: 88%;
	left:60%;
}
.ios_bild6 span{
	background-color:#ffff57;
}
/*ENDE Bild 6*/
/*Bild 7*/
.ios_bild7{
	
	position:relative;
	width:400px;
	font-size:14px;
}
.ios_bild7 img {
	display:block;
}
.ios_bild7 span{
	background-color:#ffff57;
}
/*ENDE Bild 7*/
/*ENDE IOS*/
/* ============================================================
   Bildschirmfoto-Container: responsive & poliert
   Wirkt auf alle Screenshot-Wrapper (Klassenname enthält "bild"),
   ohne die pixelgenauen Positionsangaben oben zu verändern.
   ============================================================ */
[class*="bild" i]{
	max-width:100%;
	margin:4px 0 22px;
	border-radius:var(--radius-md);
	overflow:hidden;
	box-shadow:var(--shadow-soft);
	border:1px solid var(--line);
}
[class*="bild" i] img{
	width:100%;
	height:auto;
	display:block;
	box-sizing:border-box;
}

/* Werteinblendungen (Name, Adresse, Server, Port …) als saubere Badges,
   statt grellem Textmarker-Gelb. Gleiche Spezifität + spätere
   Reihenfolge im Stylesheet überschreibt die alten #ffff57-Regeln;
   die eigens transparenten Overrides (os_x_bild9/10/11) bleiben
   unberührt, da sie höhere Spezifität bzw. !important nutzen. */
[class*="bild" i] span{
	display:inline-block;
	background:#FFF3D6;
	color:#5A3B00;
	border:1px solid #F0C878;
	border-radius:4px;
	padding:1px 5px;
	font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
	font-weight:500;
	box-shadow:0 1px 2px rgba(0,0,0,.08);
	white-space:nowrap;
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{
	max-width:980px;
	margin:0 auto 40px;
	padding:18px 20px 0;
	border-top:1px solid var(--line);
	font-size:.82rem;
	color:var(--ink-soft);
	text-align:center;
}
.site-footer a{ color:var(--accent-dark); font-weight:600; }

/* ---------------------------------------------------------
   Responsive Anpassungen
   --------------------------------------------------------- */
@media (max-width:640px){
	.header{
		flex-wrap:wrap;
		padding:16px 18px;
		gap:12px;
	}
	.logo img{ width:120px; }
	.title h1{ font-size:1.05rem; }
	.formkopf{ padding:18px 12px 4px; }
	.formkopf form{ padding:20px 16px 18px; }
	.formkopf input[type="text"]{ max-width:100%; }
	article.accordion{ margin:16px auto 40px; }
	article.accordion section h1 a{ padding:14px 14px; font-size:.94rem; gap:12px; }
	article.accordion section:target > *:not(h1){ padding:0 16px; }
	article.accordion section:target > *:last-child{ padding-bottom:18px; }
}

@media (prefers-reduced-motion: reduce){
	*{ scroll-behavior:auto !important; transition:none !important; }
}