@font-face{
  font-family:'Roboto';
  font-weight:400;
  font-style:normal;
  font-display:swap;
  src:url('/neu/fonts/Roboto/roboto-v20-latin-regular.woff2') format('woff2'),
      url('/neu/fonts/Roboto/roboto-v20-latin-regular.woff') format('woff'),
      url('/neu/fonts/Roboto/roboto-v20-latin-regular.ttf') format('truetype'),
      url('/neu/fonts/Roboto/roboto-v20-latin-regular.eot') format('embedded-opentype');
}
/* css/ai_css.css – Hybrid-Import aus prostyle.css (2026-10-26 14:40), Admin/Impressum weggelassen, Hintergründe → upload_ftp, Bootstrap-Schrift */
/* Bootstrap: Website-Schrift = Roboto (nicht system-ui) */
:root{
  --bs-body-font-family:'Roboto',Verdana,Arial,Helvetica,sans-serif;
  --bs-font-sans-serif:'Roboto',Verdana,Arial,Helvetica,sans-serif;
}
html,body{
  font-family:'Roboto',Verdana,Arial,Helvetica,sans-serif;
}
div#footer{font-family:'Roboto',Verdana,Arial,Helvetica,sans-serif;}

@font-face {
	 font-family: 'Roboto-Regular';
	 font-weight: 400;
	 font-style: normal;
	 src: 
	  url('//www.larsfranke-pro.de/neu/fonts/Roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
	  ;
	}
	@font-face {
	 font-family: 'Roboto-Italic';
	 font-weight: 400;
	 font-style: italic;
	 src: 
	  url('//www.larsfranke-pro.de/neu/fonts/Roboto/Roboto-Italic.eot?#iefix') format('embedded-opentype'),
	  ;
	}
	@font-face {
	 font-family: 'Roboto-Bold';
	 font-weight: 700;
	 font-style: normal;
	 src: 
	  url('//www.larsfranke-pro.de/neu/fonts/Roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
	  ;
	}
	@-moz-keyframes Menu_keyanim {
	0% {

	}
	100% {

	}
}

@-o-keyframes Menu_keyanim {
	0% {

	}
	100% {

	}
}

@-webkit-keyframes Menu_keyanim {
	0% {

	}
	100% {

	}
}

@keyframes Menu_keyanim {
	0% {

	}
	100% {

	}
}

@-moz-keyframes Wichtig_keyanim {
	0% {
	opacity:0
	}
	100% {
	opacity:1
	}
}

@-o-keyframes Wichtig_keyanim {
	0% {
	opacity:0
	}
	100% {
	opacity:1
	}
}

@-webkit-keyframes Wichtig_keyanim {
	0% {
	opacity:0
	}
	100% {
	opacity:1
	}
}

@keyframes Wichtig_keyanim {
	0% {
	opacity:0
	}
	100% {
	opacity:1
	}
}

.link {font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 11;
	font-weight: normal;
	text-decoration: none;}
.blocksatz {text-align:justify;
margin-left:.15cm;
margin-right:.15cm;
line-height:.5cm;}
.Normal {font-size: 12px; font-weight: normal; font-family: Verdana,Arial,Helvetica,sans-serif; color: #000000; line-height:16px;}
.TABELLE {cellspacing: 0px; cellpadding: 0px; width: 100%;}
.News_Head {font-size: 12px;
font-weight:bold;
font-family: Verdana,Arial,Helvetica,sans-serif;}
.News_Text {font-size: 12px; font-weight: normal; font-family: Verdana,Arial,Helvetica,sans-serif; color: #000000; line-height:14px;}
.News_Tabelle {width: 500;
border:thin solid #AAAAAA;
vertical-align:top;
overflow:hidden;
border-spacing:2px;
margin-left:10px;
margin-bottom:10px;
font-family: Verdana,Arial,Helvetica,sans-serif;}
.News_Head_Small {font-size: 10px;
font-weight:bold;
font-family: Verdana,Arial,Helvetica,sans-serif;}
.News_Text_Small {font-size: 9px; font-weight: normal; font-family: Verdana,Arial,Helvetica,sans-serif; color: #000000; line-height:11px;}
.News_Tabelle_Small {width: 140;
border:thin solid #AAAAAA;
vertical-align:top;
overflow:hidden;
border-spacing:2px;
margin-bottom:10px;
margin-left:20px;
font-family: Verdana,Arial,Helvetica,sans-serif;}
.Formular_Bezeichnung {font-size: 12px;
font-family: Verdana,Arial,Helvetica,sans-serif;}
.Formular_Text {font-size: 12px;  font-weight:900;
font-family: Verdana,Arial,Helvetica,sans-serif;
border: 1px white solid;
box-shadow: 5px 5px 8px rgb(179, 179, 179);
width: 220px;
margin-top: 3px;}
.Formular_Textarea {width: 270; height: 118px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;  font-weight:900;
font-family: Verdana,Arial,Helvetica,sans-serif;
border: 1px white solid;
box-shadow: 5px 5px 8px rgb(179, 179, 179);}
.Formular_Checkboxtext {font-size: 12px;  font-weight:bold;
font-family: Verdana,Arial,Helvetica,sans-serif;}
.Formular_Bezeichnung_Background {padding-left: 0px; padding-right: 8px; border-spacing:10px;
font-family: Verdana,Arial,Helvetica,sans-serif;}
.Formular_Head_Background {padding-left: 0px; padding-right: 8px; border-spacing:10px;
font-family: Verdana,Arial,Helvetica,sans-serif;}
.Formular_Head {font-weight:700; font-size: 16px;
font-family: Verdana,Arial,Helvetica,sans-serif;}
.Album_Fettschrift {font-size: 16px; font-weight:bold; font-family: Trebuchet MS;Arial,Helvetica; color: #000000;}
.Album_Text {font-size: 11px; font-weight:100; font-family: Verdana,Arial,Helvetica,sans-serif; color: #000000;}
.Album_Bildnummer {font-size: 12px; font-family: Verdana,Arial,Helvetica,sans-serif;}
body {font-family: 'Roboto', Fallback, sans-serif;
background-image: url("../pics/upload_ftp/background.jpg");
background-repeat: repeat-x;
background-color: #E4E4E4;
padding: 0px;}
a {color: #444444;}
.Kunde {font-size:20pt;
font-weight:bold;
color:#cb0c12;}
ul.loginMenu {margin-left: -40px;
margin-bottom: 30px;
height: auto;}
ul.loginMenu li {float: left;
list-style: none;
margin-right: 3px;
margin-bottom: 3px;}
.btn-primary {background-color: #B0191D;
border: 1px solid #B0191D;}
.Formular {font-size: 12px;  font-weight:900;
font-family: Verdana,Arial,Helvetica,sans-serif;
border: 1px white solid;
box-shadow: 5px 5px 8px rgb(179, 179, 179);
margin-right: 7px;
margin-top: 4px;}
li {margin-bottom: 10px;}
h1 {font-size: 32px;}
.Admin_Formular_Submit {font-size: 12px;  font-weight:900;
font-family: Verdana,Arial,Helvetica,sans-serif;
border: 1px white solid;
box-shadow: 5px 5px 8px rgb(179, 179, 179);
width: 220px;
margin-top: 3px;}
.Formular_Submit {font-size: 12px;  font-weight:900;
font-family: Verdana,Arial,Helvetica,sans-serif;
border: 1px white solid;
box-shadow: 5px 5px 8px rgb(179, 179, 179);
width: 220px;
margin-top: 3px;
margin-top: 5px;}
.formular {font-size: 12px;
font-family: Verdana,Arial,Helvetica,sans-serif;}
h4 {font-size: 18px;}
.bgdark {background-color: #333333;
color: #DDDDDD;}
h2 {font-size: 24px;}
.bgdark a {color: #AAAAAA;}
.bgdark h2 {color: #FFFFFF;}
#mainnavbar ul li {font-size: 20px;height: 22px;}
ul.DomainMenu {margin-left: -30px;}
ul.DomainMenu li {list-style: none;}
.bglivevideo {background-color: #666666;
color: #FFFFFF;}
.container {padding-top: 20px;
padding-bottom: 20px;}
.spamliste {font-size: 8px;}
.counter-count {font-size: 18px;
    background-color: #B0191D;
    border-radius: 50%;
    position: relative;
    color: #ffffff;
    text-align: center;
    line-height: 92px;
    width: 92px;
    height: 92px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: inline-block;}
.bgtodo {background-color: #F3F3F3;}
.prioclass {background-color: #FFFFFF;
color: #000000;}
body {margin-bottom: 100px;}
.schnee-container {position: relative;
    overflow: hidden; /* Effekt bleibt nur in diesem Bereich sichtbar */}
.schnee-container .schneeflocke {    position: absolute;
    top: -10px;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0.8;
    animation: fall linear infinite;}
@keyframes fall {    to {
        transform: translateY(100vh);
    }
}
div#Angemeldet_Status { 
	position: absolute;
	top: 60px;
	right: 5px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	display: block;
	font-size: 10px;
	z-index: 10;
}
div#Banner { 
	position: relative;
	top: 0px;
	left: 265px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Bildbox { 
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 11px;
	text-align: justify;
}
div#Bildleiste_re { 
	position: absolute;
	top: 100px;
	right: 0px;
}
div#Bildundtext { 
	position: relative;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Bild_links { 
	position: absolute;
	top: 0px;
	left: 0px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Code { 
	position: relative;
	top: 10px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 11px;
	color: #000000;
	letter-spacing: 0.00px;
	border: 1px 	solid 	#DDDDDD;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 50px;
	padding-left: 5px;
	background-color: #FAFAFA;
}
div#cookiehinweis { 
	position: fixed;
	bottom: 20px;
	display: block;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	background-color: #DDDDDD;
}
div#cookiehinweis a { 
	color: #FFFFFF;
}
div#FAQ_Antwort { 
	position: relative;
	letter-spacing: 0.00px;
	border: 0px 	solid ;
	margin-top: 15px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-radius: 10.00px;	-moz-border-radius: 10.00px;
	-o-border-radius: 10.00px;
	-webkit-border-radius: 10.00px;

				-ms-border-radius: 10.00px;
	background-color: #cccccc;
}
div#FAQ_Fragen { 
	position: relative;
	left: 0px;
	letter-spacing: 0.00px;
	border: 0px 	dotted ;
	margin-bottom: 5px;
	padding-bottom: 5px;
}
div#FAQ_Fragen li { 
	position: relative;
	left: 20px;
	z-index: 50;
	list-style-position: inside;
	border: 0px 	solid ;
	padding-bottom: 10px;
}
div#FAQ_Fragen ul { 
	position: relative;
	left: 0px;
	overflow: visible;
	list-style-type:none;
	list-style-position: inside;
	border: 0px 	dashed ;
	margin:0;
padding:0;}
div#Footer { 
	position: fixed;
	bottom: 1px;
	width: 100%;
	height: 100px;
	display: block;
	z-index: -10;
	background-image: url("../pics/upload_ftp/footerback.png");
background-repeat: repeat-x;
background-color: #E4E4E4;}
div#footerbild { 
	position: relative;
	display: none;
	margin-left: 25%;}
div#Fotoalbum_Bild { 
	top: 0px;
	left: 0px;
	width: 170px;
	height: 135px;
	display: block;
	
	background-repeat: no-repeat;
	background-position: top;
	border: 0px ;
	padding-top: 15px;
}
div#Fotoalbum_Bildbox { 
	position: relative;
	width: 173px;
	height: 168px;
	top:0px; left:0px; width:100%;}
div#Fotoalbum_Bilderblock { 
	position: relative;
	top: 100px;
	left: 125px;
	width: 465px;
	display: block;
}
div#Fotoalbum_Bilder_weiter { 
	position: absolute;
	top: 100px;
	right: 146px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: bold;
	font-size: 12px;
	z-index: 21;
}
div#Fotoalbum_Bilder_zurueck { 
	position: absolute;
	top: 100px;
	left: 148px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: bold;
	font-size: 12px;
	z-index: 22;
}
div#Fotoalbum_Bildtext { 
	position: relative;
	top: 0px;
	width: 100%;
	height: 40px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 10px;
	text-align: center;
	overflow: hidden;
	z-index: 22;
	letter-spacing: 0.00;
	border: 0px 	solid ;
}
div#Fotoalbum_Blättern_Beschreibung { 
	position: absolute;
	top: 50px;
	left: 245px;
	width: 320px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Fotoalbum_Blättern_Bild { 
	position: absolute;
	top: 120px;
	left: 150px;
	display: block;
	
	background-repeat: no-repeat;
	border: 0px 	solid ;
}
div#Fotoalbum_Blättern_Bildtext { 
	position: absolute;
	top: 540px;
	left: 150px;
	width: 500px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 12px;
	text-align: center;
	letter-spacing: 0.00px;
	border: 0px 	solid ;
}
div#Fotoalbum_Blättern_Name { 
	position: absolute;
	top: 20px;
	left: 20px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Fotoalbum_Blättern_Titel { 
	position: absolute;
	top: 0px;
	left: 245px;
	width: 320px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: bold;
	font-size: 11px;
	text-align: center;
	border: 0px 	dotted 	silver;
}
div#Fotoalbum_Blättern_weiter { 
	position: absolute;
	top: 170px;
	left: 651px;
}
div#Fotoalbum_Blättern_zurück { 
	position: absolute;
	top: 170px;
	left: 108px;
}
div#Fotoalbum_Indexbildbox { 
	position: relative;
	height: 224px;
	border: 1pxsopx ;
	top:0px; left:0px; width:100%;}
div#Fotoalbum_Indexblock { 
	position: relative;
	top: 10px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: normal;
	display: block;
	font-size: 8px;
}
div#Fotoalbum_Indexliste { 
	position: relative;
	top: 250px;
	left: 10px;
	text-align: left;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Fotoalbum_Index_Headline { 
	position: absolute;
	height: 36px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
}
div#Fotoalbum_Index_Pics { 
	position: absolute;
	top: 20px;
	letter-spacing: 0.00px;
	border: 1px 	solid ;
}
div#Fotoalbum_Index_Subtext { 
	position: absolute;
	top: 155px;
	width: 143px;
	height: 38px;
	text-align: center;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Fotoalbum_Slideshow_Beschreibung { 
	position: absolute;
	top: 50
;
	left: 245
;
	right: 
;
	bottom: 
;
	width: 320
;
	height: 0
px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: bold;
	font-size: 12
px;
	text-align: center;
	z-index: 0
;
	letter-spacing: 0.00
;
	border: 0
px ;
	padding-top: 0
px;
	padding-right: 0
px;
	padding-bottom: 0
px;
	padding-left: 0
px;
}
div#Fotoalbum_Slideshow_Bild { 
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	
	background-repeat: no-repeat;
	border: 0px 	solid ;
}
div#Fotoalbum_Slideshow_Titel { 
	position: absolute;
	top: -15px;
	left: 245px;
	width: 320px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: bold;
	display: none;
	font-size: 14px;
	text-align: center;
	border: 0px 	dotted 	silver;
}
div#Fotoalbum_Titel { 
	position: absolute;
	top: -15px;
	left: 245px;
	width: 320px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	border: 0px 	dotted 	silver;
}
div#Inhalt { 
	border: 0px 	solid ;
}
div#Inhalt li { 
	list-style-type:square;
}
div#Inhalt ul.loginMenu { 
	margin-left: -40px;
}
div#Inhalt ul.loginMenu li { 
	display: block;
	float: left;
	margin-bottom: 5px;
	margin-left: 5px;
}
div#Jobs_Liste { 
	position: relative;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Jobs_Listen_Headline { 
	position: relative;
	top: 20px;
	left: 20px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Jobs_Listen_Vorschautext { 
	position: relative;
	top: 20px;
	left: 20px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Jobs_Stelle { 
	position: relative;
	top: -10px;
	left: 20px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Jobs_Zurueck { 
	position: relative;
	top: 20px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Kontaktformular_Fehlermeldung { 
	position: relative;
	top: 0px;
	left: 8px;
	width: 400px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Kopf { 
	display: block;
}
div#KundenLoginWichtig { 
	font-size: 12px;
	border: 1px 	solid 	grey;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	border-radius: 20.00px;	-moz-border-radius: 20.00px;
	-o-border-radius: 20.00px;
	-webkit-border-radius: 20.00px;

				-ms-border-radius: 20.00px;
}
div#LogIn { 
	position: absolute;
	top: 150px;
	left: 200px;
	width: 550px;
	height: 300px;
	z-index: 15;
	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 240px 120px;
	border: 0px ;
}
div#Logo { 
	position: absolute;
	top: -1px;
	left: 30px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Menu { 
	position: relative;
	top: 48px;
	left: 120px;
	width: 135px;
	height: 500px;
	font-size: 18px;
	color: #d70019;
	padding-left: 10px;
	-moz-animation-name: Menu_keyanim;
	-webkit-animation-name: Menu_keyanim;
	-o-animation-name: Menu_keyanim;
	animation-name: Menu_keyanim;
	-moz-animation-timing-function: 1;
	-moz-animation-iteration-count: 1;
	-moz-animation-duration: 1.00s;
	-moz-animation-direction: normal;
	-o-animation-timing-function: 1;
	-o-animation-iteration-count: 1;
	-o-animation-duration: 1.00s;
	-o-animation-direction: normal;
	-webkit-animation-timing-function: 1;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 1.00s;
	-webkit-animation-direction: normal;
	animation-timing-function: 1;
	animation-iteration-count: 1;
	animation-duration: 1.00s;
	animation-direction: normal;
	border-left:1px solid black;
border-right:0px solid black;}
div#myCarousel1.carousel.slide div.carousel-inner img { 
	width: 100%;
	display: block;
}
div#Newsletter-Bild1 { 
	position: relative;
	top: 10px;
	left: 10px;
	width: 580px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Newsletter-Boden { 
	position: relative;
	left: 10px;
	height: 40px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Newsletter-Kopfbild { 
	position: absolute;
	top: 0px;
	left: 0px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Newsletter-Subject { 
	position: relative;
	top: 20px;
	left: 10px;
	width: 580px;
	font-size: 13px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Newsletter-Text { 
	position: relative;
	top: 0px;
	left: 10px;
	width: 580px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Newsletterausgabe { 
	position: absolute;
	top: 100px;
	left: 0px;
	width: 600px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: normal;
	font-size: 11px;
	letter-spacing: 0.00px;
	border: 0px 	solid ;
	background-color: #ffffff;
}
div#Newsletterbox { 
	position: relative;
	top: 0px;
	left: 20px;
	right: 0px;
	width: 200px;
	height: 120px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: normal;
	font-size: 12px;
	border: 1px 	solid 	silver;
	background-color: #F2F2F2;
}
div#Newsletterbox { 
	position: absolute;
	top: 50px;
	left: 250px;
	right: 0px;
	width: 300px;
	height: 120px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: normal;
	font-size: 12px;
	border: 1px 	solid ;
	background-color: #eeeeee;
}
div#Newsletterbox_anabmelden { 
	position: relative;
	top: 13px;
	text-align: center;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Newsletterbox_button { 
	position: relative;
	top: 40px;
	text-align: center;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Newsletterbox_input { 
	position: relative;
	top: 5px;
	left: 7px;
	width: 270px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Newsletterbox_kat { 
	position: relative;
	top: 30px;
	left: -1px;
	width: 292px;
	letter-spacing: 0.00px;
	border: 0px 	solid ;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	background-color: #eeeeee;
}
div#Newsletterbox_kat_checkbox { 
	position: relative;
	top: 8px;
	left: 20px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Newsletterbox_text { 
	position: relative;
	top: 7px;
	left: 7px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Newsticker { 
	top: 0px;
	left: 0px;
	width: 420px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: normal;
	font-size: 14px;
	font-stretch:wider;
}
div#page { 
	font-family:'Roboto-Regular', arial, serif;
	display: block;
	font-size: 16px;
	border: 0px 	solid ;
	margin:0 auto;}
div#page td { 
	font-size: 12px;
}
div#PRO_Formular .chkbox { 
	float: left;
}
div#PRO_Formular .clear { 
	width: 150px;
}
@media screen and (max-width: 480px){div#PRO_Formular .clear { 
	width: 290px

  }}div#PRO_Formular .design { 
	height: 20px;
	font-size: 14px;
}
div#PRO_Formular .kommentar { 
	float: left;
	margin-left: 5px;
}
div#PRO_Formular .submit { 
	width: 150px;
}
@media screen and (max-width: 480px){div#PRO_Formular .submit { 
	width: 290px

  }}div#PRO_Formular .text { 
	width: 290px;
	float: left;
}
@media screen and (max-width: 480px){div#PRO_Formular .text { 
	width: 290px;

  }}div#PRO_Formular .textarea { 
	width: 294px;
	height: 200px;
	float: left;
	margin-right: 2px;
}
div#PRO_Formular .text_catcha { 
	width: 80px;
	height: 20px;
	float: left;
	margin-right: 2px;
}
div#PRO_Formular .text_hsnr { 
	width: 25px;
	float: left;
	margin-right: 2px;
}
div#PRO_Formular .text_plz { 
	width: 45px;
	float: left;
	margin-right: 2px;
}
div#PRO_Formular .text_sm { 
	width: 140px;
	float: left;
	margin-right: 2px;
}
@media screen and (max-width: 480px){div#PRO_Formular .text_sm { 
	width: 135px;

  }}div#PRO_Formular .text_str { 
	width: 255px;
	float: left;
	margin-right: 2px;
}
@media screen and (max-width: 480px){div#PRO_Formular .text_str { 
	width: 247px;

  }}div#PRO_Formular .text_town { 
	width: 235px;
	float: left;
}
@media screen and (max-width: 480px){div#PRO_Formular .text_town { 
	width: 228px;

  }}div#PRO_Formular li { 
	list-style-type:none;
}
div#PRO_Formular ul { 
	margin-left: -40px;
}
div#PRO_Formular_Feldname { 
	min-width: 190px;
	font-size: 15px;
	float: left;
	padding-top: 6px;
	clear: both}
@media screen and (max-width: 480px){div#PRO_Formular_Feldname { 
	width: 300px;

  }}div#PRO_Formular_Feldname_Leer { 
	width: 190px;
	display: block;
	font-size: 15px;
	float: left;
	-moz-opacity: 0;
	-webkit-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	clear: both;}
div#PRO_Formular_Kopie { 
	width: 150px;
	display: none;
	font-size: 15px;
	float: left;
	-moz-opacity: 0;
	-webkit-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	clear: both;}
div#PRO_Formular_Name { 
	display: none;
	font-size: 20px;
}
div#Ref_pics { 
	position: absolute;
	top: 0px;
	width: 340px;
	height: 955px;
	overflow: hidden;
	z-index: 3;
}
div#Ref_Text { 
	position: absolute;
	top: 0px;
	left: 400px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Suche { 
	left: 10px;
	width: 850px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: normal;
	display: block;
	font-size: 12px;
	text-align: justify;
	line-height: 16px;
	letter-spacing: 0.00px;
	border: 0px ;
	padding-left: 10px;
}
div#Text { 
	position: relative;
	top: 0px;
	left: 0px;
	width: 550px;
	float: left;
	letter-spacing: 0.00px;
	border: 0px 	solid 	red;
	padding-right: 20px;
}
div#Text ul { 
	margin-left: 40px;
}
div#Textkasten_AGB { 
	position: relative;
	top: 0px;
	left: 0px;
	display: block;
	font-size: 14px;
	letter-spacing: 0.00;
	border: 0px ;
}
div#Textkasten_AGB li { 
	list-style-type:upper-roman;
	margin-bottom: 10px;
	margin-left: 10px;
}
div#Textkasten_AGB li li { 
	list-style-type:decimal;
	margin-left: 20px;
}
div#Textkasten_AGB ul { 
	margin-left: 15px;
}
div#Text_full { 
	position: relative;
	top: 0px;
	left: 0px;
	width: 860px;
	letter-spacing: 0.00px;
	border: 0px 	solid 	red;
}
div#Text_rechts { 
	position: relative;
	left: 200px;
	width: 400px;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Text_ref { 
	position: relative;
	top: 0px;
	left: 0px;
	width: 800px;
	height: 1000px;
	letter-spacing: 0.00px;
	border: 0px 	solid 	red;
}
div#Trenner { 
	position: relative;
	left: -25px;
	width: 650px;
	height: 1px;
	border-top:1px solid #bbbbbb;}
div#Uberschrift { 
	position: absolute;
	top: -85px;
	left: 0px;
	font-size: 18px;
	color: #ffffff;
	letter-spacing: 0.00px;
	border: 0px ;
}
div#Wichtig { 
	display: none;
	color: #FFFFFF;
	letter-spacing: 0.00;
	border: 0px ;
	padding-top: 15px;
	padding-bottom: 15px;
	-moz-opacity: 1;
	-webkit-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
	-moz-animation-name: Wichtig_keyanim;
	-webkit-animation-name: Wichtig_keyanim;
	-o-animation-name: Wichtig_keyanim;
	animation-name: Wichtig_keyanim;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-duration: 1.00s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-duration: 1.00s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 1.00s;
	animation-timing-function: ease-in-out;
	animation-duration: 1.00s;
	-webkit-box-shadow: 0px 0px 20px #aaaaaa;
	-moz-box-shadow: 0px 0px 20px #aaaaaa;
	-o-box-shadow: 0px 0px 20px #aaaaaa;
	box-shadow: 0px 0px 20px #aaaaaa;
	background-color: #B0191D;
}
div#Wichtig ul { 
	margin-left: 30px;
}
div#Wichtig ul li { 
	display: block;
	font-size: 12px;
	list-style-type:circle;
	margin-top: 10px;
}

/* CMS-LEGACY-MENU-PRESERVE */
header .navbar,
header .navbar .container-fluid,
header .navbar-collapse,
.navbar.fixed-top,
.navbar.fixed-top .container-fluid,
.navbar-collapse,
.headcol,
.css_menu,
#css_menu {
  overflow: visible !important;
  overflow-x: visible !important;
  flex-wrap: wrap !important;
}
header .navbar-nav,
.navbar-expand-lg .navbar-nav,
.navbar-nav.w-100,
.navbar-nav.ms-auto.w-100 {
  width: auto !important;
  max-width: 100%;
  flex-wrap: wrap !important;
  overflow: visible !important;
}
header .navbar-nav .nav-item,
header .navbar-nav .nav-link,
.headcol a,
.css_menu a,
#css_menu a {
  flex: 0 0 auto !important;
  min-width: max-content;
  overflow: visible !important;
  text-overflow: clip;
  white-space: nowrap;
}
td.headcol, table.headcol, #kopf, #kopfzeile {
  overflow: visible !important;
  max-width: none !important;
}

/* ======================================================================
 * LF-PRO LOOK → ai_css (kanonisch) 20261026-150220
 * Quelle: css/prostyle_custom.css (Ist-Layout Live /neu/ – Waben, Glas,
 * pf-*, News, SSO/Kundenlogin). Admin-Update darf diese Domain-Datei
 * nicht überschreiben (Deploy-Schutz ai_css).
 * ====================================================================== */
/**
 * Startseite /neu/: Typo, Abstände, Karten, Bänder – bestehender PRO-Stil, nur polierter.
 * News: .pf-news-* unverändert im Kern (dunkler Parent .bglivevideo bleibt überschrieben).
 */

.container h1 {
	margin-top: 0;
	margin-bottom: 0.7em;
	font-size: clamp(1.7rem, 2.6vw, 2.05rem);
	line-height: 1.22;
	font-weight: 700;
	color: #1f2937;
	letter-spacing: -0.01em;
}
.container h2 {
	margin-top: 1.75em;
	margin-bottom: 0.55em;
	font-size: clamp(1.2rem, 1.8vw, 1.4rem);
	line-height: 1.3;
	font-weight: 700;
	color: #1f2937;
}
.container h2:first-of-type {
	margin-top: 1.15em;
}
.container p {
	margin-top: 0;
	margin-bottom: 1em;
	line-height: 1.65;
	color: #4b5563;
	max-width: 48rem;
}
.container a[href^="mailto:"] {
	color: #B0191D;
	text-decoration: none;
}
.container a[href^="mailto:"]:hover {
	text-decoration: underline;
}

/* Login: professionelle Karten-Optik und einheitliche Formulargestaltung */
.login-card-wrapper {
	margin: 1.5rem 0 2rem;
}
.login-card {
	background: rgba(255,255,255,0.50);
	backdrop-filter: blur(6px);
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
	border: 1px solid rgba(0,0,0,0.06);
	padding: 2rem;
	max-width: 22rem;
	margin: 0 auto;
}
.login-form .login-input-group {
	margin-bottom: 1rem;
}
.login-form .input-group-text {
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-right: none;
	border-radius: 6px 0 0 6px;
	color: #495057;
	padding: 0.6rem 0.85rem;
	min-width: 2.75rem;
	justify-content: center;
}
.login-form .login-input-group .form-control {
	border: 1px solid #dee2e6;
	border-left: none;
	border-radius: 0 6px 6px 0;
	padding: 0.6rem 0.85rem;
	font-size: 1rem;
}
.login-form .login-input-group .form-control::placeholder {
	color: #6c757d;
}
.login-form .login-input-group .form-control:focus {
	border-left: none;
	box-shadow: none;
	outline: 0;
}
.login-form .login-input-group:focus-within .input-group-text,
.login-form .login-input-group:focus-within .form-control {
	border-color: #B0191D;
}
.login-form .login-input-group .input-group-text i {
	font-size: 1rem;
	color: #6c757d;
}
.login-form .login-btn-submit {
	padding: 0.65rem 1.25rem;
	font-weight: 600;
	font-size: 1rem;
	border-radius: 6px;
	margin-top: 0.5rem;
	background-color: #B0191D;
	border-color: #B0191D;
	transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
}
.login-form .login-btn-submit:hover {
	background-color: #9a1619;
	border-color: #9a1619;
	transform: translateY(-1px);
}
.login-forgot {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #eee;
	text-align: center;
}
.login-forgot-title {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	color: #6c757d;
	font-weight: 500;
}
.login-forgot .btn {
	border-radius: 6px;
	font-size: 0.9rem;
	padding: 0.4rem 0.9rem;
	transition: background-color 0.2s, color 0.2s;
}
.login-forgot .btn:hover {
	background-color: #f8f9fa;
	color: #495057;
}

/* Kundenbereich nach dem Login: Dashboard mit Karten-Optik (halbtransparent) */
.kunden-dashboard {
	background: rgba(255,255,255,0.75);
	backdrop-filter: blur(6px);
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
	border: 1px solid rgba(0,0,0,0.06);
	padding: 1.75rem;
	margin: 1.5rem 0 2rem;
	max-width: 56rem;
}
.kunden-dashboard-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1rem 1.5rem;
	margin-bottom: 0;
}
.kunden-dashboard-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
}
.kunden-dashboard-menu-admin {
	border-left: 2px solid #dee2e6;
	padding-left: 1rem;
	margin-left: 0.25rem;
}
.kunden-dashboard-menu-admin-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #6c757d;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-right: 0.35rem;
	width: 100%;
	flex-basis: 100%;
}
.kunden-dashboard-menu-admin .kunden-dashboard-btn {
	background-color: transparent;
	color: #495057;
	border: 1px solid #adb5bd;
}
.kunden-dashboard-menu-admin .kunden-dashboard-btn:hover {
	background-color: #f8f9fa;
	border-color: #6c757d;
	color: #212529;
}
.kunden-dashboard-btn {
	display: inline-block;
	padding: 0.6rem 1rem;
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	background-color: #B0191D;
	border-color: #B0191D;
	color: #fff;
	transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
}
.kunden-dashboard-btn:hover {
	background-color: #9a1619;
	border-color: #9a1619;
	color: #fff;
	transform: translateY(-1px);
}
.kunden-dashboard-footer {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid #eee;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.kunden-dashboard-footer-btn {
	border-radius: 6px;
	font-size: 0.9rem;
	padding: 0.4rem 0.85rem;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.kunden-dashboard-footer .btn-outline-secondary {
	color: #6c757d;
	border-color: #dee2e6;
}
.kunden-dashboard-footer .btn-outline-secondary:hover {
	background-color: #f8f9fa;
	color: #495057;
	border-color: #adb5bd;
}

/* Domains-Bereich im Kundenlogin: Karte, klare Liste (halbtransparent) */
.kunden-domains {
	background: rgba(255,255,255,0.75);
	backdrop-filter: blur(6px);
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
	border: 1px solid rgba(0,0,0,0.06);
	padding: 1.75rem;
	margin: 1.5rem 0 2rem;
	max-width: 36rem;
}
.kunden-domains-header {
	margin-bottom: 1.25rem;
}
.kunden-domains-new-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.25rem;
	font-weight: 600;
	font-size: 1rem;
	border-radius: 6px;
	text-decoration: none;
	background-color: #B0191D;
	border: 1px solid #B0191D;
	color: #fff;
	transition: background-color 0.2s, transform 0.1s;
}
.kunden-domains-new-btn:hover {
	background-color: #9a1619;
	border-color: #9a1619;
	color: #fff;
	transform: translateY(-1px);
}
.kunden-domains-title {
	margin: 0 0 0.75rem;
	font-size: 1.2rem;
	font-weight: 600;
	color: #333;
}
.kunden-domains-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kunden-domains-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: #f8f9fa;
	border-radius: 6px;
	border: 1px solid #eee;
}
.kunden-domains-list li:hover {
	background: #f0f1f3;
}
.kunden-domains-link {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.25rem 0;
	font-weight: 500;
	color: #B0191D;
	text-decoration: none;
	word-break: break-all;
}
.kunden-domains-link:hover {
	text-decoration: underline;
	color: #9a1619;
}
.kunden-domains-alarm {
	font-size: 0.85rem;
	color: #6c757d;
}
.kunden-domains-alarm i {
	margin-right: 0.25rem;
}

/* Gemeinsame Karten-Optik für Kundenbereich (Bankverbindung, Anschrift, Rechnungen, FTP, etc.) – halbtransparent */
.kunden-card {
	background: rgba(255,255,255,0.75);
	backdrop-filter: blur(6px);
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
	border: 1px solid rgba(0,0,0,0.06);
	padding: 1.75rem;
	margin: 1.5rem 0 2rem;
	max-width: 42rem;
}
.kunden-card-title {
	margin: 0 0 0.5rem;
	font-size: 1.35rem;
	font-weight: 600;
	color: #222;
}
.kunden-card-intro {
	margin: 0 0 1.25rem;
	color: #555;
	font-size: 0.95rem;
	line-height: 1.5;
}
.kunden-card-hint {
	margin: 1rem 0 0;
	font-size: 0.9rem;
	color: #666;
	line-height: 1.5;
}
.kunden-card .kunden-form .row {
	margin-bottom: 0.5rem;
}
.kunden-card .btn-primary {
	background-color: #B0191D;
	border-color: #B0191D;
}
.kunden-card .btn-primary:hover {
	background-color: #9a1619;
	border-color: #9a1619;
}
.kunden-detail-rows .row {
	border-bottom: 1px solid #f0f0f0;
	padding: 0.5rem 0;
}
.kunden-detail-rows .row .col-6:first-child {
	color: #6c757d;
	font-weight: 500;
	font-size: 0.95rem;
}
.kunden-card code.small {
	font-size: 0.9rem;
	background: #f8f9fa;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	word-break: break-all;
}

/* Newsletter: Admin-Bereich (nur für post@larsfranke-pro.de) – klar getrennt, halbtransparent */
.kunden-admin-block {
	border-left: 4px solid #6c757d;
	background: rgba(248,249,250,0.50);
	backdrop-filter: blur(6px);
}
.kunden-admin-block .kunden-card-title-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}
.kunden-admin-block .kunden-card-title {
	font-size: 1.1rem;
}
.kunden-admin-block .badge.bg-secondary {
	font-size: 0.75rem;
	font-weight: 500;
}

/* Domain-Detail (Einzeldomain): Karte, Zeilen, Navigationsleiste (halbtransparent) */
.kunden-domain-detail {
	background: rgba(255,255,255,0.75);
	backdrop-filter: blur(6px);
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
	border: 1px solid rgba(0,0,0,0.06);
	padding: 1.75rem;
	margin: 1.5rem 0 2rem;
	max-width: 42rem;
}
.kunden-domain-detail-title {
	margin: 0 0 1rem;
	font-size: 1.35rem;
	font-weight: 600;
}
.kunden-domain-detail-title a {
	color: #B0191D;
	text-decoration: none;
}
.kunden-domain-detail-title a:hover {
	text-decoration: underline;
	color: #9a1619;
}
.kunden-domain-detail .row {
	margin-left: 0;
	margin-right: 0;
	border-bottom: 1px solid #f0f0f0;
	padding: 0.6rem 0;
}
.kunden-domain-detail .row:last-of-type {
	border-bottom: none;
}
.kunden-domain-detail .col-6.mt-3 {
	margin-top: 0;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
.kunden-domain-detail .col-6.mt-3:first-child {
	color: #6c757d;
	font-weight: 500;
	font-size: 0.95rem;
}
.kunden-domain-detail .btn-primary.btn-sm {
	padding: 0.4rem 0.75rem;
	font-size: 0.9rem;
	border-radius: 6px;
	background-color: #B0191D;
	border-color: #B0191D;
}
.kunden-domain-detail .btn-primary.btn-sm:hover {
	background-color: #9a1619;
	border-color: #9a1619;
}
.kunden-domain-detail-nav {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #eee;
}
.kunden-domain-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.kunden-domain-nav li {
	margin: 0;
}
.kunden-domain-nav .btn {
	border-radius: 6px;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.kunden-domain-nav .btn-outline-secondary:hover {
	background-color: #f8f9fa;
	color: #495057;
	border-color: #adb5bd;
}

/* E-Mail-Konten (Domains → EMail): Karten-Layout, lesbare Zeilen, klare Buttons */
.kunden-email-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.kunden-email-title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 600;
	color: #222;
}
.kunden-email-back {
	margin: 0;
}
.kunden-email-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 42rem;
}
.kunden-email-card {
	background: rgba(255,255,255,0.75);
	backdrop-filter: blur(6px);
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
	border: 1px solid rgba(0,0,0,0.06);
	padding: 1.5rem;
}
.kunden-email-card-heading {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: #B0191D;
	word-break: break-all;
}
.kunden-email-card-alias .kunden-email-card-heading {
	color: #333;
}
.kunden-email-card-meta {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	color: #555;
}
.kunden-email-rows .row {
	border-bottom: 1px solid #f0f0f0;
	padding: 0.5rem 0;
	margin: 0;
}
.kunden-email-rows .row:last-child {
	border-bottom: none;
}
.kunden-email-rows .col-md-3 {
	color: #6c757d;
	font-weight: 500;
	font-size: 0.9rem;
}
.kunden-email-rows .col-md-9 {
	font-size: 0.95rem;
}
.kunden-email-rows .col-md-9 small {
	color: #666;
}
.kunden-email-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid #eee;
}
.kunden-email-actions .btn {
	border-radius: 6px;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.kunden-email-actions .btn-primary {
	background-color: #B0191D;
	border-color: #B0191D;
}
.kunden-email-actions .btn-primary:hover {
	background-color: #9a1619;
	border-color: #9a1619;
}
.kunden-email-actions .btn-outline-secondary:hover {
	background-color: #f8f9fa;
	color: #495057;
	border-color: #adb5bd;
}
.kunden-email-footer {
	margin-top: 1.5rem;
	padding-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.kunden-email-footer .btn {
	border-radius: 6px;
}
.kunden-email-footer .btn-primary {
	background-color: #B0191D;
	border-color: #B0191D;
}
.kunden-email-footer .btn-primary:hover {
	background-color: #9a1619;
	border-color: #9a1619;
}

/* Admin-only Blöcke (nur für PRO sichtbar): optisch klar von Kundeninfos getrennt, halbtransparent */
.kunden-admin-block {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 2px solid #dee2e6;
	background: rgba(248,249,250,0.75);
	backdrop-filter: blur(6px);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	max-width: 42rem;
}
.kunden-admin-block-title {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: #6c757d;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.kunden-admin-block-intro {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #495057;
}
.kunden-admin-block-list {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #495057;
	max-height: 20rem;
	overflow-y: auto;
}
.kunden-admin-block .btn-outline-secondary {
	border-radius: 6px;
}


/* Kundenlogin: dezente Passkey-/Google-Hinweise */
.kl-alt-login { margin-top: 1.1rem; text-align: center; }
.kl-alt-login-sep { display: flex; align-items: center; gap: .6rem; color: #9aa0a6; font-size: .75rem; margin: .75rem 0; }
.kl-alt-login-sep::before, .kl-alt-login-sep::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,.08); }
.kl-alt-login-sep span { flex: 0 0 auto; }
.kl-alt-btn {
	display: inline-flex !important; align-items: center; justify-content: center; gap: .4rem;
	width: 100%; margin: .25rem 0; font-weight: 500; color: #5f6368 !important;
	border-color: #dadce0 !important; background: rgba(255,255,255,.55) !important;
}
.kl-alt-btn:hover { background: rgba(255,255,255,.9) !important; color: #3c4043 !important; }
.kl-alt-ico { opacity: .75; flex-shrink: 0; }
.kl-alt-login-hint, .kl-alt-login-msg { font-size: .78rem; color: #80868b; margin: .45rem 0 0; }
.kl-auth-hint {
	max-width: 42rem; margin: .85rem auto 0; padding: .55rem .85rem;
	font-size: .8rem; line-height: 1.4; color: #6b7280;
	background: rgba(255,255,255,.45); border: 1px solid rgba(0,0,0,.05);
	border-radius: 8px; text-align: center;
}
.kl-auth-hint a:not(.kl-auth-chip) { color: #6b7280; text-decoration: underline; text-underline-offset: 2px; }
.kl-auth-hint a:not(.kl-auth-chip):hover { color: #b0191d; }
.kl-auth-hint-label { color: #9ca3af; font-weight: 500; margin-right: .15rem; }
.kl-oauth-err { max-width: 22rem; margin: 0 auto 1rem; font-size: .9rem; }

/* UPS-ähnliche Anmelde-Chips (Dashboard) – größer & klarer */
.kl-auth-hint--ups {
	max-width: 36rem;
	margin: 1.1rem auto 0;
	padding: .85rem 1.1rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	background: #fff;
	border: 1px solid rgba(0,0,0,.07);
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(15,23,42,.06);
}
.kl-auth-hint--ups .kl-auth-hint-label {
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9aa0a6;
	font-weight: 600;
	margin: 0;
	text-align: center;
}
.kl-auth-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: .65rem;
	width: 100%;
}
.kl-auth-chip {
	display: inline-flex !important;
	align-items: center;
	gap: .55rem;
	min-width: 9.5rem;
	padding: .55rem 1rem .55rem .55rem !important;
	border-radius: 12px !important;
	border: 1px solid #dadce0 !important;
	background: #fff !important;
	color: #202124 !important;
	text-decoration: none !important;
	font-size: .95rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	box-shadow: 0 1px 2px rgba(60,64,67,.08);
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.kl-auth-chip:hover {
	background: #f8f9fa !important;
	border-color: #bdc1c6 !important;
	box-shadow: 0 3px 10px rgba(60,64,67,.12);
	color: #202124 !important;
	text-decoration: none !important;
	transform: translateY(-1px);
}
.kl-auth-chip-mark {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: #f1f3f4 !important;
	flex-shrink: 0;
}
.kl-auth-chip-mark--passkey { color: #3c4043; }
.kl-auth-chip-mark .kl-brand-svg {
	display: block;
	width: 18px;
	height: 18px;
}
.kl-auth-chip-mark--passkey .kl-brand-svg {
	width: 15px;
	height: 18px;
}
.kl-auth-chip-txt { white-space: nowrap; }
.kl-auth-chip--soon,
.kl-auth-chip--disabled {
	opacity: .78;
	cursor: default;
	box-shadow: none;
}
.kl-auth-chip--soon .kl-auth-chip-txt::after {
	content: " · bald";
	font-weight: 500;
	color: #9aa0a6;
	font-size: .78rem;
}
@media (max-width: 480px) {
	.kl-auth-chip { min-width: calc(50% - .4rem); justify-content: flex-start; }
}

/* Zugangsdaten: Passwort-Block (Basis; Layout unten bei Hierarchie) */
.kl-zugang-pw { margin-top: .25rem; }
.kl-zugang-pw-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .75rem;
	flex-wrap: wrap;
}
.kl-zugang-pw-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: #202124;
	margin: 0;
}
.kl-zugang-suggest {
	font-size: .84rem !important;
	font-weight: 600 !important;
	color: #b0191d !important;
	text-decoration: none !important;
	border: 1px solid rgba(176,25,29,.28) !important;
	background: #fff !important;
	padding: .35rem .75rem !important;
	border-radius: 999px !important;
	line-height: 1.2 !important;
}
.kl-zugang-suggest:hover {
	background: rgba(176,25,29,.06) !important;
	text-decoration: none !important;
}
.kl-zugang-pw-fields label {
	font-size: .82rem;
	font-weight: 600;
	color: #5f6368;
	margin-bottom: .25rem;
}
.kl-zugang-pw-fields .form-control {
	border-radius: 10px;
	border-color: #dadce0;
	min-height: 42px;
}
.kl-zugang-pw-submit {
	margin-top: .35rem;
	width: 100%;
	max-width: 16rem;
	border-radius: 10px !important;
	font-weight: 600 !important;
}


/* Zugangsdaten – Hierarchie Passkey > 2FA > Passwort */
.kl-zugang { margin: 0 0 1.25rem; }
.kl-zugang-ladder {
	list-style: none;
	margin: 0 0 1.15rem;
	padding: .55rem .65rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: stretch;
	background: linear-gradient(135deg, #1a1516 0%, #2c2426 55%, #3a282a 100%);
	border-radius: 14px;
	box-shadow: 0 8px 22px rgba(40,20,24,.18);
}
.kl-zugang-ladder li {
	flex: 1 1 7.5rem;
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .55rem;
	border-radius: 10px;
	color: rgba(255,255,255,.88);
	min-width: 0;
}
.kl-zugang-ladder li.is-top {
	background: rgba(176,25,29,.28);
	color: #fff;
}
.kl-zugang-ladder-n {
	width: 1.45rem; height: 1.45rem; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: .75rem; font-weight: 800;
	background: #fff; color: #1a1516; flex-shrink: 0;
}
.kl-zugang-ladder li.is-top .kl-zugang-ladder-n { background: #b0191d; color: #fff; }
.kl-zugang-ladder-t { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.kl-zugang-ladder-h {
	margin-left: auto;
	font-size: .68rem; font-weight: 700; letter-spacing: .02em;
	text-transform: uppercase; opacity: .75; white-space: nowrap;
}
.kl-zugang-ladder li.is-top .kl-zugang-ladder-h { color: #ffd4d6; opacity: 1; }

.kl-zugang-hero {
	position: relative;
	padding: 1.15rem 1.2rem 1.2rem;
	border-radius: 16px;
	border: 1px solid rgba(176,25,29,.22);
	background:
		radial-gradient(520px 180px at 0% 0%, rgba(176,25,29,.10), transparent 55%),
		linear-gradient(165deg, #fff 0%, #fbf7f8 100%);
	box-shadow: 0 10px 28px rgba(50,30,35,.08);
	margin-bottom: .85rem;
	overflow: hidden;
}
.kl-zugang-hero::before {
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: linear-gradient(180deg, #b0191d, #7a1013);
}
.kl-zugang-hero.is-on {
	border-color: rgba(34,120,60,.35);
	background:
		radial-gradient(520px 180px at 0% 0%, rgba(34,120,60,.08), transparent 55%),
		linear-gradient(165deg, #fff 0%, #f6fbf7 100%);
}
.kl-zugang-hero.is-on::before { background: linear-gradient(180deg, #2f9e4a, #1a6b30); }
.kl-zugang-hero-top { display: flex; gap: .85rem; align-items: flex-start; }
.kl-zugang-hero-rank {
	width: 2rem; height: 2rem; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: .95rem;
	background: #b0191d; color: #fff; flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(176,25,29,.35);
}
.kl-zugang-hero.is-on .kl-zugang-hero-rank { background: #2f9e4a; box-shadow: 0 4px 12px rgba(47,158,74,.3); }
.kl-zugang-hero-title {
	font-size: 1.12rem; font-weight: 750; color: #1a1516;
	display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.kl-zugang-hero-copy p {
	margin: .35rem 0 0; font-size: .92rem; line-height: 1.45; color: #5f6368; max-width: 36rem;
}
.kl-zugang-hero-actions {
	margin-top: .95rem; display: flex; flex-wrap: wrap; align-items: center; gap: .65rem;
}
.kl-auth-chip--hero {
	border-color: rgba(176,25,29,.35) !important;
	box-shadow: 0 4px 14px rgba(176,25,29,.12) !important;
}
.kl-auth-chip--hero:hover {
	border-color: #b0191d !important;
	box-shadow: 0 6px 18px rgba(176,25,29,.18) !important;
}

.kl-zugang-row {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: .75rem;
	margin-bottom: 1rem;
}
@media (max-width: 720px) {
	.kl-zugang-row { grid-template-columns: 1fr; }
	.kl-zugang-ladder { flex-direction: column; }
}

.kl-zugang-card {
	padding: 1rem 1.05rem;
	border-radius: 14px;
	border: 1px solid #e8eaed;
	background: #fff;
	box-shadow: 0 4px 14px rgba(15,23,42,.04);
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.kl-zugang-card.is-on {
	border-color: #c8e6c9;
	background: #f9fdf9;
}
.kl-zugang-card.is-optional { background: #fbfbfc; }
.kl-zugang-card.is-dim { opacity: .72; }
.kl-zugang-card-head { display: flex; gap: .7rem; align-items: flex-start; }
.kl-zugang-card-rank {
	width: 1.65rem; height: 1.65rem; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: .78rem; font-weight: 800;
	background: #202124; color: #fff; flex-shrink: 0;
}
.kl-zugang-card-rank.is-soft { background: #c4c7c5; color: #fff; }
.kl-zugang-card-title {
	font-size: .98rem; font-weight: 700; color: #202124;
	display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.kl-zugang-card-head p {
	margin: .25rem 0 0; font-size: .84rem; line-height: 1.4; color: #5f6368;
}

.kl-zugang-pill {
	display: inline-block;
	padding: .12rem .5rem;
	border-radius: 999px;
	font-size: .68rem; font-weight: 800; letter-spacing: .02em;
	text-transform: uppercase;
	background: rgba(176,25,29,.12); color: #b0191d;
}
.kl-zugang-pill.is-soft { background: #eef0f2; color: #5f6368; }

.kl-zugang-status {
	font-size: .78rem; font-weight: 600; color: #80868b;
}
.kl-zugang-status.is-ok { color: #1e7a3a; }
.kl-zugang-note { margin: 0; font-size: .84rem; color: #8a6d3b; }

.kl-zugang-fallback-label {
	display: flex; gap: .7rem; align-items: flex-start;
	padding: .85rem 1rem 0;
	border-top: 1px dashed #dadce0;
	margin-top: .15rem;
}
.kl-zugang-fallback-label p {
	margin: .2rem 0 0; font-size: .84rem; color: #5f6368; line-height: 1.35;
}

.kl-zugang-pw {
	margin-top: .35rem;
	padding: 1rem 1.05rem 1.1rem;
	border-radius: 14px;
	border: 1px solid #e8eaed;
	background: linear-gradient(180deg, #fafafa 0%, #fff 40%);
}
.kl-zugang-pw-head { margin-bottom: .65rem; }
.kl-zugang-pw-title { font-size: .95rem !important; color: #5f6368 !important; }

/* legacy aliases kept quiet */
.kl-zugang-methods { margin: 0; }
.kl-zugang-methods-title, .kl-zugang-methods-lead { display: none; }

/* Startseite: Sicherheitshinweis mit Logos */
.kl-security-tip {
	max-width: 42rem;
	margin: 1rem auto 0;
	padding: .85rem 1rem;
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	background: #fff;
	border: 1px solid rgba(0,0,0,.07);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(15,23,42,.05);
}
.kl-security-tip-ico {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(176,25,29,.08);
	color: #b0191d;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.kl-security-tip-body {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
}
.kl-security-tip-body strong {
	font-size: .92rem;
	color: #202124;
	font-weight: 600;
}
.kl-security-tip-body > span {
	font-size: .84rem;
	color: #5f6368;
	line-height: 1.4;
}
.kl-security-tip-brands {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: .15rem 0 .1rem;
}
.kl-security-tip-brand {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .28rem .65rem .28rem .28rem;
	border: 1px solid #dadce0;
	border-radius: 999px;
	background: #fff;
	font-size: .78rem;
	font-weight: 600;
	color: #202124;
}
.kl-security-tip-brand-mark {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f1f3f4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.kl-security-tip-brand-mark--passkey { color: #3c4043; }
.kl-security-tip-brand-mark .kl-brand-svg {
	width: 14px;
	height: 14px;
	display: block;
}
.kl-security-tip-brand-mark .kl-gsi-logo {
	width: 14px;
	height: 14px;
	display: block;
}
.kl-security-tip-link {
	margin-top: .15rem;
	align-self: flex-start;
	font-size: .84rem;
	font-weight: 600;
	color: #b0191d !important;
	text-decoration: none !important;
}
.kl-security-tip-link:hover {
	text-decoration: underline !important;
}



/* Passwort-Login: E-Mail-Code */
.kl-otp-intro { font-size: .9rem; color: #5f6368; margin-bottom: 1rem; line-height: 1.45; }
.kl-otp-hint { font-size: .78rem; color: #80868b; text-align: center; }
.kl-otp-hint a { color: #5f6368; }
#klOtpCode { font-variant-numeric: tabular-nums; }

.kl-zugang-pk-manage { margin-top: .75rem; }
.kl-zugang-pk-reset {
	display: inline-block;
	margin-top: .35rem;
	padding: .4rem .85rem;
	border-radius: 999px;
	border: 1px solid rgba(176,25,29,.35);
	background: #fff;
	color: #b0191d;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
}
.kl-zugang-pk-reset:hover { background: rgba(176,25,29,.06); }

.kl-zugang-methods { margin: 0 0 1.5rem; }
.kl-zugang-methods-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .25rem; color: #202124; }
.kl-zugang-methods-lead { font-size: .88rem; color: #5f6368; margin: 0 0 1rem; }
.kl-zugang-method {
	border: 1px solid #e8eaed;
	border-radius: 12px;
	padding: .85rem 1rem;
	margin-bottom: .65rem;
	background: #fff;
}
.kl-zugang-method.is-best { border-color: rgba(176,25,29,.35); box-shadow: 0 0 0 1px rgba(176,25,29,.08); }
.kl-zugang-method.is-on { border-color: #c8e6c9; background: #f9fdf9; }
.kl-zugang-method.is-fallback { background: #fafafa; }
.kl-zugang-method.is-muted { opacity: .85; }
.kl-zugang-method-head { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .55rem; }
.kl-zugang-method-head p { margin: .2rem 0 0; font-size: .84rem; color: #5f6368; line-height: 1.35; }
.kl-zugang-method-head strong { font-size: .95rem; color: #202124; }
.kl-zugang-rank {
	flex-shrink: 0;
	width: 1.6rem; height: 1.6rem;
	border-radius: 50%;
	background: #202124; color: #fff;
	font-size: .78rem; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
}
.kl-zugang-badge {
	display: inline-block;
	margin-left: .35rem;
	padding: .1rem .45rem;
	border-radius: 999px;
	background: rgba(176,25,29,.1);
	color: #b0191d;
	font-size: .72rem;
	font-weight: 700;
	vertical-align: middle;
}
.kl-auth-chip-mark--2fa { color: #3c4043; }
.kl-zugang-pw { margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,.08); }


.kl-zugang-check {
	width: 2.75rem; height: 2.75rem; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #22c55e; color: #fff; flex-shrink: 0;
	box-shadow: 0 6px 16px rgba(34,197,94,.4);
}
.kl-zugang-check .kl-check-svg { width: 1.45rem; height: 1.45rem; display: block; }
.kl-zugang-check--sm { width: 2rem; height: 2rem; box-shadow: 0 4px 12px rgba(34,197,94,.35); }
.kl-zugang-check--sm .kl-check-svg { width: 1.1rem; height: 1.1rem; }
.kl-zugang-score {
	display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem;
	margin: 0 0 1rem; padding: .85rem 1rem;
	border-radius: 14px; border: 1px solid #e8eaed; background: #fff;
}
.kl-zugang-score-label { font-weight: 800; font-size: .9rem; color: #1a1516; }
.kl-zugang-score-dots { display: flex; gap: .4rem; }
.kl-zugang-score-dot {
	width: 2rem; height: 2rem; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: .85rem; background: #eef0f2; color: #5f6368;
}
.kl-zugang-score-dot.is-done { background: #22c55e; color: #fff; box-shadow: 0 3px 10px rgba(34,197,94,.35); }
.kl-zugang-score-dot.is-done .kl-check-svg { width: 1.05rem; height: 1.05rem; }
.kl-zugang-score-dot.is-fallback { background: #f3f4f6; color: #9aa0a6; }
.kl-zugang-score-txt { margin: 0; flex: 1 1 12rem; font-size: .88rem; color: #5f6368; }
.kl-zugang-score-txt.is-good { color: #1e7a3a; font-weight: 600; }
.kl-zugang-score-txt.is-great { color: #15803d; font-weight: 750; }
.kl-zugang-ladder li.is-done .kl-zugang-ladder-n { background: #22c55e !important; color: #fff !important; }
.kl-zugang-ladder li.is-done .kl-zugang-ladder-n .kl-check-svg { width: .85rem; height: .85rem; }
.kl-auth-chip-mark--apple { background: #111 !important; color: #fff !important; }
.kl-auth-chip-mark--apple .kl-apple-svg { display: block; width: 14px; height: 17px; }


/* Login: 2FA-Eingabe */
.kl-totp-login-head {
	display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem;
}
.kl-totp-login-ico {
	width: 2.6rem; height: 2.6rem; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(176,25,29,.1); color: #b0191d; flex-shrink: 0;
}
.kl-totp-login-code {
	letter-spacing: .35em !important; font-weight: 700 !important;
	border-radius: 12px !important; min-height: 3.1rem;
}
.kl-totp-login-code:focus {
	border-color: #b0191d !important;
	box-shadow: 0 0 0 .2rem rgba(176,25,29,.15) !important;
}


/* === Offizielle SSO-Buttons (Apple SIWA + Google GSI) + Passkey FIDO === */
.kl-brand-btns-stack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .65rem;
	width: 100%;
	max-width: 22rem;
	margin: 0 auto;
}

/* Passkey – Apple/FIDO: person.key, Chip */
.kl-passkey-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: .65rem;
	width: 100%;
	min-height: 44px;
	padding: 0 14px 0 10px !important;
	border-radius: 12px !important;
	border: 1px solid #dadce0 !important;
	background: #fff !important;
	color: #1f1f1f !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	box-shadow: 0 1px 2px rgba(60,64,67,.08);
	cursor: pointer;
	text-decoration: none !important;
}
.kl-passkey-btn:hover {
	background: #f8f9fa !important;
	border-color: #bdc1c6 !important;
	color: #1f1f1f !important;
}
.kl-passkey-btn-mark {
	width: 28px; height: 28px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #f1f3f4; color: #3c4043; flex-shrink: 0;
}
.kl-passkey-btn-mark .kl-brand-svg { width: 15px; height: 18px; display: block; }
.kl-passkey-btn-txt { flex: 1; text-align: left; }

/* Google – Branding Guidelines (Light) */
.gsi-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: .75rem;
	width: 100%;
	min-height: 44px;
	padding: 0 14px 0 12px !important;
	border-radius: 4px !important; /* Google default rectangular; pill via --pill */
	border: 1px solid #747775 !important;
	background: #fff !important;
	color: #1f1f1f !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 20px !important;
	text-decoration: none !important;
	box-sizing: border-box;
	cursor: pointer;
}
.gsi-btn:hover { background: #f8f9fa !important; color: #1f1f1f !important; text-decoration: none !important; }
.gsi-btn:active { background: #eee !important; }
.gsi-btn--pill { border-radius: 999px !important; }
.gsi-btn--compact { max-width: 100%; }
.gsi-btn-icon {
	width: 20px; height: 20px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; flex-shrink: 0;
}
.gsi-btn-icon .gsi-logo,
.gsi-btn-icon .kl-gsi-logo { width: 20px; height: 20px; display: block; }
.gsi-btn-txt { flex: 1; text-align: center; padding-right: 20px; }

/* Apple – Sign in with Apple (Black, Web) */
.siwa-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	width: 100%;
	min-height: 44px;
	padding: 0 16px !important;
	border-radius: 8px !important;
	border: none !important;
	background: #000 !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	cursor: pointer;
	box-sizing: border-box;
}
.siwa-btn:hover { background: #1a1a1a !important; color: #fff !important; text-decoration: none !important; }
.siwa-btn--white {
	background: #fff !important; color: #000 !important;
	border: 1px solid #000 !important;
}
.siwa-btn--white:hover { background: #f5f5f5 !important; color: #000 !important; }
.siwa-btn .siwa-logo {
	width: 16px; height: 20px; display: block; flex-shrink: 0;
}
.siwa-btn-txt { white-space: nowrap; }

/* Passkey-Mark nie Apple-schwarz – FIDO grau */
.kl-auth-chip-mark--passkey { background: #f1f3f4 !important; color: #3c4043 !important; }
.kl-auth-chip-mark--apple { background: #f1f3f4 !important; color: #3c4043 !important; } /* legacy alias → FIDO */

/* Passkey via Apple-Button (type=button) */
button.siwa-btn {
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}
button.siwa-btn .siwa-btn-txt { flex: 1; text-align: center; }

.kl-security-tip-brand-mark--apple {
	background: #000 !important;
	color: #fff !important;
}
.kl-security-tip-brand-mark--apple .siwa-logo {
	width: 12px;
	height: 14px;
	display: block;
}

/* --- News Startseite + Faktura-Vorschau (identisch, volle Breite) --- */
/* Parent .bglivevideo (#666/#fff) + .container h2/p ueberschreiben sonst Datum/Titel */
.pf-news-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0.75rem 0 1.75rem;
  width: 100%;
  max-width: none;
}
.bglivevideo .pf-news-card,
.container .pf-news-card,
.pf-app .pf-news-card,
.pf-news-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  padding: 0;
  width: 100%;
  max-width: none !important;
  overflow: hidden;
}
.pf-news-card--with-media {
  max-width: none !important;
}
/* Bild links: 2-Spalten-Grid, Bildspalte volle Kartenhöhe (wie früher) */
.pf-news-card--media-left {
  display: grid;
  grid-template-columns: minmax(280px, 40%) 1fr;
  gap: 0;
  align-items: stretch;
}
.pf-news-card--media-left .pf-news-media {
  float: none;
  width: 100%;
  margin: 0;
  background: #f3f1ec;
  align-self: stretch;
  height: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 0;
}
.pf-news-card--media-left .pf-news-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}
.pf-news-card--media-left .pf-news-body {
  display: block;
  min-width: 0;
}
/* Bild oben: volle Content-Breite als Banner */
.pf-news-card--media-top {
  display: flex;
  flex-direction: column;
}
.pf-news-card--media-top .pf-news-media {
  width: 100%;
  margin: 0;
  background: #f3f1ec;
  display: block;
  overflow: hidden;
  line-height: 0;
}
.pf-news-card--media-top .pf-news-img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none;
  /* Weich: Original-Proportion, kein hartes Crop – etwas Luft um Figur ok */
  object-fit: cover;
  object-position: center center;
  aspect-ratio: 16 / 9;
}
.pf-news-media {
  margin: 0;
  background: #f3f1ec;
  overflow: hidden;
}
.pf-news-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
.pf-news-body {
  display: block;
  padding: 1.65rem 2rem 2rem;
  min-width: 0;
}
.bglivevideo .pf-news-card .pf-news-date,
.container .pf-news-card p.pf-news-date,
.pf-app .pf-news-card .pf-news-date,
.pf-news-card .pf-news-date {
  margin: 0 0 0.6rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: #dc2626 !important; /* PRO-Rot */
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-transform: none;
}
.bglivevideo .pf-news-card h2.pf-news-title,
.container .pf-news-card h2.pf-news-title,
.pf-app .pf-news-card h2.pf-news-title,
.pf-news-card h2.pf-news-title {
  margin: 0 0 1.15rem !important;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #e5e7eb;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem) !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  color: #1f2937 !important;
}
.bglivevideo .pf-news-card .pf-news-text,
.container .pf-news-card .pf-news-text,
.pf-app .pf-news-card .pf-news-text,
.pf-news-card .pf-news-text {
  font-size: 1.06rem !important;
  line-height: 1.72 !important;
  color: #4b5563 !important;
  max-width: none;
}
.pf-news-text p { margin: 0 0 0.9rem !important; color: inherit !important; }
.pf-news-text p:last-child { margin-bottom: 0 !important; }
.pf-news-text br + br { display: block; margin-top: 0.55rem; }
.pf-news-text strong, .pf-news-text b {
  font-weight: 700 !important;
  color: #1f2937 !important;
}
/* Globales .container p {max-width:48rem} → Leerraum rechts in News-Karten */
.container .pf-news-card .pf-news-text p,
.container .pf-news-card p.pf-news-date,
.pf-news-card .pf-news-text p,
.pf-news-card p.pf-news-date {
  max-width: none !important;
  width: auto !important;
}
.pf-news-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.pf-news-media picture .pf-news-img {
  width: 100%;
  height: 100%;
}

.pf-news-admin-item {
  width: 100%;
}
.pf-news-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
}
@media (max-width: 991px) {
  .pf-news-card--media-left {
    grid-template-columns: 1fr;
  }
  .pf-news-card--media-left .pf-news-media {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1 / 1;
  }
  .pf-news-card--media-left .pf-news-img,
  .pf-news-card--media-left .pf-news-media picture .pf-news-img {
    min-height: 0;
    height: 100%;
    max-height: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
  }
  /* Mobile: Top-Motiv → Quadrat via _m Asset / object-fit */
  .pf-news-card--media-top .pf-news-media {
    aspect-ratio: 1 / 1;
  }
  .pf-news-card--media-top .pf-news-img,
  .pf-news-card--media-top .pf-news-media picture .pf-news-img {
    aspect-ratio: 1 / 1;
    max-height: none !important;
    height: auto !important;
    object-fit: cover;
    object-position: center center;
  }
  .pf-news-body {
    padding: 1.25rem 1.25rem 1.4rem;
  }
}
@media (min-width: 992px) {
  /* Desktop Top: natürliche 16:9, volle Breite, Text volle Card – ohne Tight-Crop */
  .pf-news-card--media-top .pf-news-img,
  .pf-news-card--media-top .pf-news-media picture .pf-news-img {
    aspect-ratio: 16 / 9;
    max-height: none !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    object-position: center center;
  }
  .pf-news-card--media-top .pf-news-body {
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
  }
}

/* === PF Seiten-Layout 2026-10-22g (hell, Waben bleiben; Bild floatet im Text; transparente Cards; AOS) === */
.pf-page, .pf-pro-page {
  width: 100%;
  max-width: none; /* füllt .container = gleiche Breite wie News-Band/Sektionen */
  box-sizing: border-box;
  margin: 0 0 2rem;
  padding: 1.8rem 2.4rem 2.2rem;
  /* Glas-Card (Lars 22.10.2026): halbtransparent, leicht kühl getönt, Waben scheinen durch; dezenter Fade nach unten */
  background: linear-gradient(180deg, rgba(246,247,249,0.60) 0%, rgba(241,243,246,0.44) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
}
.pf-page > h1, .pf-pro-page > h1 { margin: 0 0 0.6rem; }
.pf-page br, .pf-pro-page br { display: none; }
.pf-page p br, .pf-pro-page p br, .pf-page li br { display: inline; }
/* WICHTIG: globale .container p {max-width:48rem} hat Text neben Bildern auf ~350px gequetscht */
.pf-page p, .pf-page li, .pf-sec__body p, .pf-sec__body li, .pf-pro-page p, .pf-pro-page li { max-width: none !important; }
.pf-page > p, .pf-pro-page > p { max-width: 74rem !important; }
.pf-intro, .pf-pro-intro { max-width: 62rem !important; font-size: 1.08rem !important; line-height: 1.7 !important; color: #374151; margin: 0.4rem 0 1.4rem; }
.pf-red { color: #B0191D; }
.pf-pro-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.75rem; }
.pf-pro-toc a {
  display: inline-block; padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid #e5e7eb; background: rgba(255,255,255,0.85); color: #B0191D !important;
  font-weight: 700; text-decoration: none !important; font-size: 0.92rem;
}
.pf-pro-toc a:hover { border-color: #B0191D; }

/* Sektion: Bild floatet, Text umfließt – nie leere Grid-Zellen */
.pf-sec { display: flow-root; margin: 0 0 2.2rem; padding: 0; }
.pf-sec__media {
  float: right; width: 38%; max-width: 460px;
  margin: 0.2rem 0 1rem 2rem !important;
  border-radius: 14px; overflow: hidden; background: #f6e4d0;
  box-shadow: 0 8px 24px rgba(15,23,42,0.10); border: 1px solid rgba(15,23,42,0.06);
  aspect-ratio: 1 / 1; /* Kennen-wir: quadratisches Motiv */
}
.pf-sec--left .pf-sec__media {
  float: left; margin: 0.2rem 2rem 1rem 0 !important;
  aspect-ratio: 4 / 3; /* Vor-Ort v3 Landschaft */
}
/* Motiv frame-füllend – Lars 26.10.2026 Abend: kein Letterbox/Polaroid;
   Safe-Margin IM Asset; section-spezifische Media-AR; cover füllt Card */
.pf-sec__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  background: #f6e4d0;
}
.pf-sec--left .pf-sec__media img {
  object-position: center center;
}
.pf-sec__caption { display: none !important; }
.pf-sec__body { min-width: 0; }
.pf-page h2, .pf-sec__body h2 {
  color: #B0191D !important; font-weight: 800 !important;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem) !important;
  margin: 0 0 0.7rem !important; padding-bottom: 0.3rem;
  border-bottom: 2px solid rgba(176,25,29,0.22); display: inline-block;
}
.pf-page > h2 { margin-top: 0.4rem !important; }
.pf-sec__body h3 { color: #1f2937 !important; font-size: 1.08rem !important; font-weight: 700 !important; margin: 1rem 0 0.4rem !important; }
.pf-page p, .pf-page li, .pf-sec__body p, .pf-sec__body li { color: #374151 !important; line-height: 1.7 !important; font-size: 1.02rem !important; }
.pf-page ul, .pf-sec__body ul { margin: 0.35rem 0 0.9rem 1.15rem; padding: 0; }

/* Leistungs-Cards: volle Breite, leicht transparent (Waben scheinen durch) */
.pf-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin: 0.4rem 0 1.4rem; }
.pf-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-card {
  background: rgba(255,255,255,0.58);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(229,231,235,0.9); border-top: 3px solid #B0191D;
  border-radius: 12px; padding: 1.05rem 1.2rem 1rem;
  box-shadow: 0 4px 14px rgba(15,23,42,0.05);
}
.pf-card h3 { color: #111827 !important; font-size: 1.05rem !important; font-weight: 800 !important; margin: 0 0 0.4rem !important; }
.pf-card p { margin: 0 !important; font-size: 0.98rem !important; line-height: 1.6 !important; }
.pf-cta {
  margin: 1.6rem 0 0.4rem; padding: 1.1rem 1.3rem; border-radius: 12px;
  background: rgba(255,255,255,0.58); border: 1px solid rgba(229,231,235,0.9); border-left: 4px solid #B0191D;
}
.pf-cta p { margin: 0 !important; }

/* Hilfe-Band (früher dunkelgrau .bgdark) */
.pf-help {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin: 0 0 1.5rem; padding: 1.4rem 2rem;
  background: linear-gradient(180deg, rgba(246,247,249,0.60) 0%, rgba(241,243,246,0.46) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05);
  border-radius: 16px; border-left: 5px solid #B0191D; box-shadow: 0 10px 32px rgba(15,23,42,0.10);
}
.pf-help h2 { margin: 0 0 0.4rem !important; color: #B0191D !important; font-size: 1.35rem !important; }
.pf-help p { margin: 0 !important; max-width: 52rem !important; color: #374151 !important; }
.pf-help a { color: #B0191D; }
.pf-btn {
  flex: 0 0 auto; display: inline-block; padding: 0.7rem 1.4rem; border-radius: 999px;
  background: #B0191D; color: #fff !important; font-weight: 700; text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(176,25,29,0.25); transition: transform .15s ease, box-shadow .15s ease;
}
.pf-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(176,25,29,0.32); }

/* News-Band hell statt #666 */
.bglivevideo { background: transparent !important; color: inherit; }
/* Footer */
div#Footer a { color: #B0191D; text-decoration: none; }
div#Footer a:hover { text-decoration: underline; }
div#Footer .container { font-size: 0.9rem; color: #4b5563; }

@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 1099px) {
  .pf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .pf-page, .pf-pro-page { padding: 1.5rem 1.6rem 1.8rem; }
  .pf-sec__media { width: 42%; max-width: 380px; margin-left: 1.5rem !important; }
  .pf-sec--left .pf-sec__media { margin-right: 1.5rem !important; margin-left: 0 !important; }
}
@media (max-width: 767px) {
  .pf-page, .pf-pro-page { padding: 1.1rem 1rem 1.4rem; border-radius: 12px; }
  .pf-page > h1, .pf-pro-page > h1 { font-size: 1.55rem; }
  .pf-sec__media, .pf-sec--left .pf-sec__media { float: none; width: 100%; max-width: none; margin: 0 0 1rem !important; }
  .pf-sec__media img {
    object-fit: cover;
    object-position: center 30%;
  }
  .pf-sec--left .pf-sec__media img {
    object-position: center center;
  }
  .pf-cards, .pf-cards--3 { grid-template-columns: 1fr; }
  .pf-help { flex-direction: column; align-items: flex-start; padding: 1.1rem 1.1rem; }
  .pf-page img, .pf-pro-page img { max-width: 100%; }
}


/* === PF Menü + body:has(input[name="ip"]) #Inhalt mainCheck + Kunden-Login 2026-10-22h (nur Look; Waben scheinen durch) === */
/* Nav-Dropdown: <li> war per tmp/prostyle.css auf 22px fixiert -> Menü überlappte den Punkt */
#mainnavbar ul.navbar-nav li.nav-item { height: auto; }
#mainnavbar .dropdown-menu {
  margin-top: 0.35rem; z-index: 1050; border-radius: 12px; padding: 0.4rem 0;
  border: 1px solid rgba(229,231,235,0.9); box-shadow: 0 10px 28px rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.96); font-size: 1rem;
}
#mainnavbar .dropdown-item { padding: 0.5rem 1.1rem; }
#mainnavbar .dropdown-item:hover, #mainnavbar .dropdown-item:focus { background: rgba(176,25,29,0.08); color: #B0191D; }
#mainnavbar .dropdown-toggle:focus { outline: none; box-shadow: none; }

/* Gemeinsame Glas-Karte (body:has(input[name="ip"]) #Inhalt mainCheck-Blöcke + Login) – identisch zu .pf-page */
body:has(input[name="ip"]) #Inhalt main > .container,
body:has(.login-card-wrapper) main > .container:not(:has(.pf-news-card)) {
  max-width: none; box-sizing: border-box;
  margin-bottom: 2rem; padding: 1.8rem 2.4rem 2.2rem;
  background: linear-gradient(180deg, rgba(246,247,249,0.60) 0%, rgba(241,243,246,0.44) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05);
  border: 1px solid rgba(255,255,255,0.65); border-radius: 16px;
  box-shadow: 0 10px 32px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
}
body:has(input[name="ip"]) #Inhalt main > .container .container { padding: 0; max-width: none; margin-top: 0 !important; margin-bottom: 0 !important; }
body:has(input[name="ip"]) #Inhalt main h1, body:has(.login-card-wrapper) main h1 { color: #1f2937; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 0.8rem; }
body:has(input[name="ip"]) #Inhalt main h1.text-center { text-align: left !important; font-size: 1.4rem; color: #B0191D; }
body:has(input[name="ip"]) #Inhalt main p { color: #374151; line-height: 1.7; font-size: 1.02rem; max-width: 74rem; }
body:has(input[name="ip"]) #Inhalt main h5 { color: #B0191D; font-weight: 800; font-size: 1.08rem; margin: 1rem 0 0.4rem; }
body:has(input[name="ip"]) #Inhalt main li { color: #374151; line-height: 1.7; }
body:has(input[name="ip"]) #Inhalt main a { color: #B0191D; }
body:has(input[name="ip"]) #Inhalt main form .form-control { border-radius: 999px 0 0 999px; border: 1px solid #e5e7eb; background: rgba(255,255,255,0.9); padding: 0.65rem 1.1rem; }
body:has(input[name="ip"]) #Inhalt main form .btn-primary, body:has(input[name="ip"]) #Inhalt main form .btn-success {
  background: #B0191D; border-color: #B0191D; border-radius: 0 999px 999px 0; font-weight: 700; padding: 0.65rem 1.4rem;
}
body:has(input[name="ip"]) #Inhalt main form .btn-primary:hover { background: #9a1619; border-color: #9a1619; }
body:has(input[name="ip"]) #Inhalt main .alert {
  background: rgba(255,255,255,0.58); border: 1px solid rgba(229,231,235,0.9); border-left: 4px solid #B0191D;
  border-radius: 12px; color: #374151;
}
body:has(input[name="ip"]) #Inhalt main .alert-success { border-left-color: #198754; }
body:has(input[name="ip"]) #Inhalt main .alert-warning { border-left-color: #d97706; }
body:has(input[name="ip"]) #Inhalt main .card { background: rgba(255,255,255,0.58); border: 1px solid rgba(229,231,235,0.9); border-radius: 12px; overflow: hidden; }
body:has(input[name="ip"]) #Inhalt main .card-header.bg-primary, body:has(input[name="ip"]) #Inhalt main .card-header.bg-info { background: #B0191D !important; color: #fff !important; }
body:has(input[name="ip"]) #Inhalt main .list-group-item { background: transparent; }

/* Kunden-Login */
body:has(.login-card-wrapper) main > .container:not(:has(.pf-news-card)) { padding-top: 1.8rem; }
body:has(.login-card-wrapper) main h1 { text-align: center; }
body:has(.login-card-wrapper) .login-card-wrapper { margin: 1rem 0 0.5rem; }
body:has(.login-card-wrapper) .login-card {
  background: rgba(255,255,255,0.58); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.7); border-top: 3px solid #B0191D; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.10); max-width: 24rem;
}
body:has(.login-card-wrapper) .login-form .login-btn-submit { display: block; width: 100%; border-radius: 999px; box-shadow: 0 4px 12px rgba(176,25,29,0.25); }
body:has(.login-card-wrapper) .login-forgot .btn { border-radius: 999px; }
@media (max-width: 767px) {
  body:has(input[name="ip"]) #Inhalt main > .container,
  body:has(.login-card-wrapper) main > .container:not(:has(.pf-news-card)) { padding: 1.1rem 1rem 1.4rem; border-radius: 12px; }
}

/* --- 2026-10-22i: gleiche Breite wie Startseite (.pf-page = 1296 px zentriert), IPCheck = EIN Rahmen --- */
body:has(input[name="ip"]) #Inhalt main > .container,
body:has(.login-card-wrapper) main > .container:not(:has(.pf-news-card)) {
  width: min(1296px, calc(100% - 24px)); max-width: 1296px;
  margin-left: auto; margin-right: auto;
}
/* IPCheck: Intro + Tool nahtlos zu einer Glas-Card verbinden */
body:has(input[name="ip"]) #Inhalt main > .container:first-of-type {
  margin-bottom: 0; padding-bottom: 0.4rem;
  border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 32px rgba(15,23,42,0.06);
  background: linear-gradient(180deg, rgba(246,247,249,0.60) 0%, rgba(245,246,248,0.52) 100%);
}
body:has(input[name="ip"]) #Inhalt main > .container:not(:first-of-type) {
  margin-top: 0; padding-top: 0.4rem; margin-bottom: 2rem;
  border-top: 0; border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, rgba(245,246,248,0.52) 0%, rgba(241,243,246,0.44) 100%);
}

/* === PF Legal + Kundenbereich 2026-10-22j (nur Look) === */
/* Impressum / Datenschutz / AGB = wie .pf-page */
main > .container.pf-legal {
  width: min(1296px, calc(100% - 24px)); max-width: 1296px; box-sizing: border-box;
  margin: 0 auto 2rem; padding: 1.8rem 2.4rem 2.2rem;
  background: linear-gradient(180deg, rgba(246,247,249,0.60) 0%, rgba(241,243,246,0.44) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05);
  border: 1px solid rgba(255,255,255,0.65); border-radius: 16px;
  box-shadow: 0 10px 32px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
}
.pf-legal h1 { color: #1f2937; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 0.8rem; }
.pf-legal h2, .pf-legal h3, .pf-legal h4 { color: #B0191D; font-weight: 800; margin: 1.4rem 0 0.5rem; }
.pf-legal h2 { font-size: 1.4rem; } .pf-legal h3 { font-size: 1.2rem; } .pf-legal h4 { font-size: 1.08rem; }
.pf-legal p, .pf-legal li { color: #374151; line-height: 1.7; font-size: 1.02rem; max-width: 78rem; }
.pf-legal a { color: #B0191D; }
.pf-legal hr { border-color: rgba(176,25,29,0.18); }
.pf-legal ul, .pf-legal ol { margin: 0.35rem 0 0.9rem 1.15rem; padding-left: 0.6rem; }
.pf-legal table { background: rgba(255,255,255,0.5); }
@media (max-width: 767px) { main > .container.pf-legal { padding: 1.1rem 1rem 1.4rem; border-radius: 12px; } }

/* Kundenbereich (eingeloggt: Dashboard + Unterseiten) – scoped auf .kunden-dashboard */
body:has(.kunden-dashboard) main > .container:not(:has(.pf-news-card)) {
  width: min(1296px, calc(100% - 24px)); max-width: 1296px; box-sizing: border-box;
  margin: 0 auto 2rem; padding: 1.8rem 2.4rem 2.2rem;
  background: linear-gradient(180deg, rgba(246,247,249,0.60) 0%, rgba(241,243,246,0.44) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05);
  border: 1px solid rgba(255,255,255,0.65); border-radius: 16px;
  box-shadow: 0 10px 32px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
}
body:has(.kunden-dashboard) main > .container > h1 { color: #1f2937; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 1rem; }
/* Dashboard: kein Karten-in-Karte, Buttons als Raster über volle Breite */
body:has(.kunden-dashboard) .kunden-dashboard {
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0; margin: 0 0 1.4rem; max-width: none;
}
body:has(.kunden-dashboard) .kunden-dashboard-actions { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
body:has(.kunden-dashboard) .kunden-dashboard-menu {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; width: 100%;
}
body:has(.kunden-dashboard) .kunden-dashboard-btn {
  display: block; width: 100%; box-sizing: border-box; border-radius: 12px; padding: 0.8rem 1rem;
  box-shadow: 0 4px 12px rgba(176,25,29,0.18);
}
body:has(.kunden-dashboard) .kunden-dashboard-menu-admin {
  border-left: 0; margin-left: 0; padding: 0.9rem 1rem 1rem;
  background: rgba(255,255,255,0.45); border: 1px solid rgba(229,231,235,0.9); border-radius: 14px;
}
body:has(.kunden-dashboard) .kunden-dashboard-menu-admin-label { grid-column: 1 / -1; margin: 0 0 0.1rem; }
body:has(.kunden-dashboard) .kunden-dashboard-menu-admin .kunden-dashboard-btn {
  background: rgba(255,255,255,0.7); box-shadow: none; border: 1px solid #d1d5db; color: #374151;
}
body:has(.kunden-dashboard) .kunden-dashboard-menu-admin .kunden-dashboard-btn:hover { border-color: #B0191D; color: #B0191D; background: #fff; }
body:has(.kunden-dashboard) .kunden-dashboard-footer { border-top: 1px solid rgba(15,23,42,0.08); }
body:has(.kunden-dashboard) .kunden-dashboard-footer-btn { border-radius: 999px; background: rgba(255,255,255,0.6); }
/* Inhaltskarten: Glas, volle Breite */
body:has(.kunden-dashboard) .kunden-card,
body:has(.kunden-dashboard) .kunden-domains,
body:has(.kunden-dashboard) .kunden-domain-detail,
body:has(.kunden-dashboard) .kunden-email-card,
body:has(.kunden-dashboard) .kunden-admin-block {
  background: rgba(255,255,255,0.58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.7); border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15,23,42,0.08);
  max-width: none; margin: 0 0 1.2rem; padding: 1.4rem 1.6rem;
}
body:has(.kunden-dashboard) .kunden-card-title, body:has(.kunden-dashboard) .kunden-domains-title { color: #B0191D; font-weight: 800; }
body:has(.kunden-dashboard) .kunden-domains-list li { background: rgba(255,255,255,0.55); border-color: rgba(229,231,235,0.9); border-radius: 10px; }
body:has(.kunden-dashboard) .kunden-domains-list li:hover { background: rgba(255,255,255,0.85); }
body:has(.kunden-dashboard) .kunden-card .btn-primary,
body:has(.kunden-dashboard) .kunden-domains-new-btn { border-radius: 10px; }
body:has(.kunden-dashboard) .kl-zugang-card { background: rgba(255,255,255,0.62); border-color: rgba(229,231,235,0.9); }
body:has(.kunden-dashboard) .kl-zugang-card.is-optional { background: rgba(255,255,255,0.5); }
body:has(.kunden-dashboard) .kl-zugang-hero {
  background: radial-gradient(520px 180px at 0% 0%, rgba(176,25,29,0.10), transparent 55%), linear-gradient(165deg, rgba(255,255,255,0.78) 0%, rgba(251,247,248,0.62) 100%);
}
/* Google-/Passkey-Hinweis in den Rahmen integriert */
body:has(.kunden-dashboard) .kl-security-tip {
  max-width: none; margin: 0 0 1.2rem; background: rgba(255,255,255,0.58);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.7); border-left: 4px solid #B0191D; border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15,23,42,0.08); padding: 1rem 1.3rem;
}
@media (max-width: 767px) {
  body:has(.kunden-dashboard) main > .container:not(:has(.pf-news-card)) { padding: 1.1rem 1rem 1.4rem; border-radius: 12px; }
  body:has(.kunden-dashboard) .kunden-dashboard-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === PF Nav + FAQ 2026-10-22k === */
/* IPCheck ganz rechts (letztes Menü-Item); Reihenfolge im CMS-Menü bleibt unverändert */
#mainnavbar ul.navbar-nav > li.nav-item:has(> a[href*="site=ipcheck"]) { order: 99; }
/* FAQ: Frage/Antwort-Karten */
.pf-faq { display: grid; gap: 0.7rem; margin: 0.4rem 0 0.4rem; }
.pf-faq__item {
  background: rgba(255,255,255,0.58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(229,231,235,0.9); border-left: 3px solid #B0191D; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.05); padding: 0;
}
.pf-faq__item > summary {
  cursor: pointer; list-style: none; padding: 0.85rem 2.6rem 0.85rem 1.1rem; position: relative;
  font-weight: 700; color: #111827; font-size: 1.04rem;
}
.pf-faq__item > summary::-webkit-details-marker { display: none; }
.pf-faq__item > summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
  color: #B0191D; font-size: 1.4rem; font-weight: 400; line-height: 1;
}
.pf-faq__item[open] > summary::after { content: "\2212"; }
.pf-faq__item[open] > summary { color: #B0191D; }
.pf-faq__a { padding: 0 1.1rem 0.9rem; }
.pf-faq__a p { margin: 0 !important; }

/* === PF Zugangsdaten 2026-10-22l (nur Look; Glas, klare Hierarchie) === */
body:has(.kl-zugang) .kunden-card.kl-zugang-card-wrap {
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0; margin: 0; max-width: none;
}
body:has(.kl-zugang) .kl-zugang-card-wrap > .kunden-card-title { font-size: 1.5rem; margin: 0 0 0.3rem; }
body:has(.kl-zugang) .kl-zugang-card-wrap > .kunden-card-intro { color: #374151; margin: 0 0 1rem; font-size: 1.02rem; }
/* Status-Zeile */
body:has(.kl-zugang) .kl-zugang-score {
  background: rgba(255,255,255,0.58); border: 1px solid rgba(255,255,255,0.7); border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06); padding: 0.8rem 1.1rem;
}
/* Reihenfolge-Leiste: hell statt dunkel */
body:has(.kl-zugang) .kl-zugang-ladder {
  background: rgba(255,255,255,0.45); border: 1px solid rgba(229,231,235,0.9); box-shadow: none; border-radius: 14px;
}
body:has(.kl-zugang) .kl-zugang-ladder li { color: #374151; }
body:has(.kl-zugang) .kl-zugang-ladder li.is-top { background: rgba(176,25,29,0.10); color: #111827; }
body:has(.kl-zugang) .kl-zugang-ladder-n { background: #d1d5db; color: #374151; }
body:has(.kl-zugang) .kl-zugang-ladder li.is-top .kl-zugang-ladder-n { background: #B0191D; color: #fff; }
body:has(.kl-zugang) .kl-zugang-ladder li.is-done .kl-zugang-ladder-n { background: #22a559; color: #fff; }
body:has(.kl-zugang) .kl-zugang-ladder-h, body:has(.kl-zugang) .kl-zugang-ladder li.is-top .kl-zugang-ladder-h { color: #6b7280; opacity: 1; }
/* Karten: Glas, gleiche Höhe, Methoden nebeneinander */
body:has(.kl-zugang) .kl-zugang-card,
body:has(.kl-zugang) .kl-zugang-pw {
  background: rgba(255,255,255,0.58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 6px 20px rgba(15,23,42,0.07);
}
body:has(.kl-zugang) .kl-zugang-card.is-on { background: rgba(240,250,243,0.7); border-color: rgba(34,165,89,0.35); }
body:has(.kl-zugang) .kl-zugang-hero.is-on { border-color: rgba(34,165,89,0.4); }
body:has(.kl-zugang) .kl-zugang-row { grid-template-columns: 1fr 1fr; align-items: stretch; }
body:has(.kl-zugang) .kl-zugang-card .kl-auth-chip,
body:has(.kl-zugang) .kl-zugang-card .gsi-btn { margin-top: auto; }
body:has(.kl-zugang) .kl-zugang-card .gsi-btn { width: 100%; max-width: none; box-sizing: border-box; }
body:has(.kl-zugang) .kl-zugang-pw-title { color: #1f2937 !important; font-size: 1.05rem !important; font-weight: 700; }
body:has(.kl-zugang) .kl-zugang-pw-submit { border-radius: 999px !important; box-shadow: 0 4px 12px rgba(176,25,29,0.22); }
body:has(.kl-zugang) .kl-zugang-fallback-label { border-top-color: rgba(15,23,42,0.12); }
@media (max-width: 720px) { body:has(.kl-zugang) .kl-zugang-row { grid-template-columns: 1fr; } }

/* === PF Sofort-Fixes 2026-10-22m (nur Look): Waben ganzer Viewport · Mobile-Nav · IPCheck vereinfacht === */
/* 1) Waben-Layer fix hinter allem (nahtlose Spiegel-Kachel 2000x766 = 2x2 gespiegeltes background.jpg, natuerlicher Massstab, KEIN cover; repeat x+y) -> scheinen auf langen Seiten durch jedes Glas (vorher nur oberste ~380px, repeat-x am body) */
body::before {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
  background: #E5E5E5 url("../pics/upload_ftp/background-tile.jpg?v=1") left top / 2000px 766px repeat;
}
/* 2) Logo 12px Rand (Desktop + Mobil) */
#Kopf nav.navbar { padding-left: 12px; padding-right: 12px; }
#Kopf .navbar-brand { margin-right: 0; }
/* 2) Mobile Nav < 992px: aufgeklapptes Menü = Glas-Karte */
@media (max-width: 991.98px) {
  #Kopf .navbar-brand img { width: auto !important; max-width: 170px; height: auto; margin-right: 12px !important; }
  #Kopf .navbar-toggler {
    border: 1px solid rgba(15,23,42,0.18); border-radius: 10px; background: rgba(255,255,255,0.6); padding: 0.35rem 0.6rem;
  }
  #Kopf .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(176,25,29,0.18); }
  #Kopf .navbar-collapse {
    flex-basis: 100%; margin-top: 0.5rem; padding: 0.6rem 1rem;
    background: linear-gradient(180deg, rgba(246,247,249,0.86) 0%, rgba(241,243,246,0.78) 100%);
    -webkit-backdrop-filter: blur(8px) saturate(1.05); backdrop-filter: blur(8px) saturate(1.05);
    border: 1px solid rgba(255,255,255,0.7); border-radius: 14px;
    box-shadow: 0 10px 28px rgba(15,23,42,0.14);
  }
  #mainnavbar ul.navbar-nav { width: 100%; }
  #mainnavbar ul.navbar-nav li.nav-item > .nav-link { padding: 0.6rem 0.25rem; border-bottom: 1px solid rgba(15,23,42,0.07); }
  #mainnavbar ul.navbar-nav li.nav-item:last-child > .nav-link { border-bottom: 0; }
  #mainnavbar .dropdown-menu { position: static; float: none; box-shadow: none; background: transparent; border: 0; margin: 0; padding: 0 0 0.3rem 0.8rem; }
}
/* 3) IPCheck: keine Karte-in-Karte – Hinweise/Anleitung flach im EINEN Glas-Rahmen (Status-Ergebnisse success/danger behalten Akzent) */
body:has(input[name="ip"]) #Inhalt main .alert-info,
body:has(input[name="ip"]) #Inhalt main .alert-warning {
  background: transparent; border: 0; border-top: 1px solid rgba(15,23,42,0.10); border-radius: 0; box-shadow: none;
  padding: 1.1rem 0 0.2rem; margin-top: 1.4rem !important;
}
body:has(input[name="ip"]) #Inhalt main .alert-warning strong { color: #B0191D; }
body:has(input[name="ip"]) #Inhalt main > .container:not(:first-of-type) > .container:first-child { padding-top: 0.2rem; }

/* === PF Kunden-Login Lehn-Motiv 2026-10-26f/g (Art-direct Desktop/Mobile) ===
   Desktop/Tablet: login-card-lean.png lehnt links an der Card (::before, z-index:-1).
   Phone ≤719: login-card-peek.png (= …-mobile) lugt oben rechts – Card opak/dominant. */
body:has(.login-card-wrapper) main > .container:not(:has(.pf-news-card)) {
  position: relative;
  isolation: isolate;
  min-height: 0;
  padding-top: 1.8rem;
  padding-bottom: 2.4rem;
  background:
    linear-gradient(180deg, rgba(246,247,249,0.72) 0%, rgba(241,243,246,0.62) 100%);
}
body:has(.login-card-wrapper) main > .container:not(:has(.pf-news-card)) > * {
  position: relative;
  z-index: 1;
}
/* Login-Fenster: voll opak – dominant, Figur scheint nie durch */
body:has(.login-card-wrapper) .login-card {
  position: relative;
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(229,231,235,0.95);
  border-top: 3px solid #B0191D;
  box-shadow: 0 12px 28px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.06);
}
/* Figur: lässig an die linke Card-Kante gelehnt, entspannt, ohne Props */
body:has(.login-card-wrapper) .login-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: calc(100% - 7px);          /* Schulter überlappt Kante leicht → „lehnt“ */
  bottom: -0.55rem;                 /* Füße knapp unter Card-Unterkante = gleiche Standlinie */
  width: clamp(8rem, 11vw, 10.4rem);
  height: min(100% + 0.35rem, 37rem);
  background: url("../pics/upload_ftp/login-card-lean.png?v=20261026j") right bottom / contain no-repeat;
  filter: drop-shadow(0 8px 10px rgba(15,23,42,0.16));
  pointer-events: none;
}
/* weicher Bodenschatten unter den Füßen */
body:has(.login-card-wrapper) .login-card::after {
  content: "";
  position: absolute;
  z-index: -2;
  right: calc(100% - 1.2rem);
  bottom: -0.9rem;
  width: clamp(6rem, 9vw, 8.6rem);
  height: 1.1rem;
  background: radial-gradient(ellipse at center, rgba(15,23,42,0.22) 0%, rgba(15,23,42,0) 70%);
  pointer-events: none;
}
/* Tablet: Figur etwas kleiner; Phone: ohne Figur (Card füllt die Breite) */
@media (max-width: 991px) {
  body:has(.login-card-wrapper) .login-card::before { width: 7.4rem; height: min(100% + 0.35rem, 28rem); }
  body:has(.login-card-wrapper) .login-card::after { width: 6rem; }
}
/* Phone: vereinfachtes Asset – Kopf/Schulter/Schlüssel lugt über die Card-Oberkante
   (rechte Ecke), kein Platzbedarf neben der Card, Formular volle Breite. */
@media (max-width: 719px) {
  body:has(.login-card-wrapper) .login-card-wrapper { margin-top: 5.6rem; }
  body:has(.login-card-wrapper) .login-card::before {
    right: 1.1rem;
    bottom: calc(100% - 0.55rem);   /* Unterkante hinter der Card verborgen */
    width: 5.6rem;
    height: 7.4rem;
    background: url("../pics/upload_ftp/login-card-peek.png?v=20261026j") center bottom / contain no-repeat;
    filter: drop-shadow(0 -2px 6px rgba(15,23,42,0.10));
  }
  body:has(.login-card-wrapper) .login-card::after { display: none; }
}
@media (max-width: 359px) {
  body:has(.login-card-wrapper) .login-card-wrapper { margin-top: 4.8rem; }
  body:has(.login-card-wrapper) .login-card::before { width: 4.6rem; height: 6.1rem; right: 0.8rem; }
}

/* === PF News media-top Mobile Art-direct 2026-10-26h === */
/* Mobile: 1:1 via <picture> news_*_1_m + CSS; Desktop 4:3 fill (s. oben). */
@media (max-width: 767px) {
  .pf-news-card--media-top .pf-news-img,
  .pf-news-card--media-top .pf-news-media picture .pf-news-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
    max-height: none !important;
  }
}

/* === PF Webmail-Seite 2026-10-26n (eine Komposition: Hero-Card wie Login, Figur rechts zeigt über die Schulter auf den echten CTA) === */
.pf-webmail { --wm-red: #B0191D; --wm-fig-h: 19rem; --wm-fig-col: 8.75rem; }
.pf-webmail > .pf-webmail__eyebrow {
  margin: 0 0 0.2rem !important;
  font-size: 0.78rem !important; line-height: 1.4 !important;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wm-red) !important;
}
.pf-webmail > .pf-intro { margin-bottom: 0 !important; }

.pf-webmail__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--wm-fig-col);
  column-gap: 2.5rem;
  align-items: start;
  min-height: 16rem;
  margin: 3.75rem 0 2.75rem;
  padding: 2rem 1.75rem 2rem 2.25rem;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(229, 231, 235, 0.95);
  border-top: 4px solid var(--wm-red);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
}
.pf-webmail__hero::after {
  content: "";
  position: absolute;
  right: calc(1.75rem - 0.6rem);
  bottom: -0.95rem;
  width: calc(var(--wm-fig-col) + 1.2rem);
  height: 1.35rem;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.24) 0%, rgba(15, 23, 42, 0.08) 48%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}
.pf-webmail__copy { min-width: 0; }
.pf-webmail .pf-webmail__copy h2 { margin: 0 0 0.75rem !important; }
.pf-webmail .pf-webmail__copy p { margin: 0 !important; max-width: 40rem !important; }
.pf-webmail .pf-webmail__facts {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 1.1rem 0 0; padding: 0; list-style: none;
}
.pf-webmail .pf-webmail__facts li {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(176, 25, 29, 0.06);
  border: 1px solid rgba(176, 25, 29, 0.16);
  color: #374151 !important;
  font-size: 0.9rem !important; line-height: 1.3 !important; font-weight: 600;
}
.pf-webmail .pf-webmail__facts li::before {
  content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: var(--wm-red); flex: 0 0 auto;
}

.pf-webmail__action {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem;
  padding-top: 0.15rem;
}
.pf-webmail .pf-webmail__btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  font-size: 1.06rem; letter-spacing: 0.01em; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(176, 25, 29, 0.28);
}
.pf-webmail .pf-webmail__btn span { transition: transform .18s ease; }
.pf-webmail .pf-webmail__btn:hover span,
.pf-webmail .pf-webmail__btn:focus-visible span { transform: translateX(3px); }
.pf-webmail .pf-webmail__btn:focus-visible { outline: 3px solid rgba(176, 25, 29, 0.35); outline-offset: 3px; }
.pf-webmail__hint { font-size: 0.82rem; color: #6b7280; padding-right: 0.4rem; }

.pf-webmail__mascot {
  position: absolute;
  right: 1.75rem;
  bottom: -0.55rem;
  height: var(--wm-fig-h);
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.16));
}

.pf-webmail__tip {
  display: flex; gap: 1rem; align-items: flex-start;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(229, 231, 235, 0.95);
}
.pf-webmail__tip-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: #fff; border: 1px solid rgba(176, 25, 29, 0.25);
  color: var(--wm-red); font: italic 700 1rem/1 Georgia, serif;
}
.pf-webmail .pf-webmail__tip h3 {
  margin: 0.2rem 0 0.35rem !important;
  font-size: 1.05rem !important; font-weight: 700 !important; color: #1f2937 !important;
}
.pf-webmail .pf-webmail__tip p { margin: 0 !important; font-size: 0.98rem !important; }
.pf-webmail .pf-webmail__path {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin: 0.8rem 0 0; padding: 0; list-style: none;
}
.pf-webmail .pf-webmail__path li {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.75rem; border-radius: 8px;
  background: #fff; border: 1px solid #e5e7eb;
  font-size: 0.9rem !important; line-height: 1.3 !important; font-weight: 600; color: #1f2937 !important;
}
.pf-webmail .pf-webmail__path li + li::before {
  content: "\2192"; margin: 0 0.55rem 0 -0.15rem; color: var(--wm-red); font-weight: 700;
}

@media (max-width: 1199px) {
  .pf-webmail__hero { column-gap: 1.75rem; }
}
/* Tablet: Text oben, CTA darunter links neben der Figur */
@media (max-width: 991px) {
  .pf-webmail { --wm-fig-h: 16rem; --wm-fig-col: 7.25rem; }
  .pf-webmail__hero {
    grid-template-columns: minmax(0, 1fr) var(--wm-fig-col);
    row-gap: 1.4rem;
    min-height: 0;
    margin-top: 2.25rem;
  }
  .pf-webmail__copy { grid-column: 1; grid-row: 1; }
  .pf-webmail__action { grid-column: 1; grid-row: 2; align-items: flex-end; }
}
/* Phone: Figur kleiner, steht unten rechts auf der Karte, Button links daneben */
@media (max-width: 767px) {
  .pf-webmail { --wm-fig-h: 10.25rem; --wm-fig-col: 4.4rem; }
  .pf-webmail__hero {
    column-gap: 0.9rem; row-gap: 1.2rem;
    margin: 1.6rem 0 2.25rem;
    padding: 1.35rem 1rem 1.35rem 1.15rem;
    border-radius: 14px;
  }
  .pf-webmail__copy { grid-column: 1 / -1; }
  .pf-webmail .pf-webmail__facts { padding-right: calc(var(--wm-fig-col) - 0.5rem); }
  .pf-webmail__action { align-items: stretch; }
  .pf-webmail .pf-webmail__btn { justify-content: center; gap: 0.45rem; padding: 0.85rem 1rem; font-size: 1rem; }
  .pf-webmail__hint { align-self: center; padding: 0; }
  .pf-webmail__mascot { right: 0.85rem; bottom: -0.45rem; }
  .pf-webmail__hero::after { right: 0.35rem; bottom: -0.8rem; }
  .pf-webmail__tip { padding: 1.05rem 1rem; gap: 0.75rem; }
  .pf-webmail__tip-icon { width: 1.75rem; height: 1.75rem; font-size: 0.9rem; }
}
@media (max-width: 400px) {
  .pf-webmail .pf-webmail__btn span { display: none; }
}
@media (max-width: 359px) {
  .pf-webmail__mascot, .pf-webmail__hero::after { display: none; }
  .pf-webmail__hero { grid-template-columns: 1fr; }
  .pf-webmail .pf-webmail__facts { padding-right: 0; }
}