:root {
color-scheme:light dark;
--color-blue:#049EF4;
--text-color:#444;
--font-size:15px;
--line-height:26px;
--panel-width:0;
--page-padding:24px;
--max-width:48em;
--icon-size:20px
}

@media (prefers-color-scheme: dark) {
:root {
--text-color:#bbb;
}
}

@font-face {
font-family:'Inter';
font-style:normal;
font-weight:600;
src:local(Inter-Regular),url(files/varela-round-v19-latin-regular.woff2) format("woff2");
font-display:swap
}

html {
scroll-behavior:smooth
}

body,html {
padding:0;
margin:0
}

body {
font-family:'Inter',sans-serif;
font-size:var(--font-size);
line-height:var(--line-height);
color:var(--text-color);
tab-size:4;
overflow:auto;
max-width:var(--max-width);
margin:1em auto;
word-break:break-word;
background-color:#e9e9eb;
/* padding:var(--page-padding); */
/* margin:1em auto */
}

html {  /* body */
padding:var(--page-padding)
}

a {
color:var(--color-text);
text-decoration:underline;
text-underline-offset: 0.2em;
outline:none!important
}

a:hover {
color:blue!important;
cursor:pointer
}

a[aria-label]:focus::after {
  content: attr(aria-label); /* Zeigt den Text des aria-label Attributs an */
 display: inline-block;	
 position: absolute;
 z-index: 10000;
 background-color:white;
 padding: 1px 3px 1px 3px;
 border-style:solid;
 border-width:1px;
 font-size: 13px;
 color: black;
 margin-top:7em;
margin-left:-300px;
max-width:300px;
animation:data 1.3s;
font-style:normal;
border-radius:4px
}

a[aria-label]:hover::after {
  content: attr(aria-label); /* Zeigt den Text des aria-label Attributs an */
 display: inline-block;	
 position: absolute;
 z-index: 10000;
 background-color:white;
 padding: 1px 3px 1px 3px;
 border-style:solid;
 border-width:1px;
 font-size: 13px;
 color: black;
 margin-top:7em;
margin-left:-300px;
max-width:300px;
animation:data 1.3s;
font-style:normal;
border-radius:4px
}

@keyframes data {
0% {
opacity:0
}

15% {
opacity:0
}

100% {
opacity:1
}
}

h1 {
font-size:27px;
margin-bottom:-8px;
margin-top:100px;
line-height:110%;
text-align:center
}

h2 {
font-size:24px;
line-height:36px;
font-weight:400;
margin-left:-1px;
margin-top:28px;
margin-bottom:-8px
}

li {
padding-top:20px
}

.fokussieren:focus-visible {
/* border: 1px dotted blue!important;
padding: 1px 3px 1px 3px;
color:black;
border-radius:0px!important;
background-color:yellow!important; */
  outline: 3px solid #005fcc!important;
  border-radius: 4px;
  outline-offset: 2px;
  transition: all 0.2s ease;
display: inline-block;
/* margin-left: -1px; */

}

.fokussieren {
	font-style:italic;
	font-family:'Inter',sans-serif;
font-size:inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
background-color: rgba(1,1,1,0)!important;
}

.fokussieren:hover {
color:blue;
cursor: pointer
}

.guestbook button {
border:none;
outline:none
}

p strong {
font-size:20px!important
}

#_logo {
position:relative;
margin-bottom:35px;
margin-top:10px;
}

#_logo img {
width:250px;
height:auto;
margin-left:5px;
background-color:rgba(0,0,0,0);
opacity:0.6
}

#_logo a {
background-color:rgba(0,0,0,0)
}

#_logo a:hover img {
opacity:0.9!important;
background-color:rgba(0,0,0,0)
}

/* #_logo a:focus-visible {
background-color:rgba(0,0,0,0);
}

#_logo a:focus-visible img{
border: 2px dotted blue;
padding:3px;
box-sizing: border-box;
background-color:rgba(0,0,0,0);
opacity:0.9!important;
} */

#_logo a:focus-visible img {
opacity:0.9!important;
  outline: 3px solid #005fcc;
  border-radius: 4px;
  outline-offset: 2px;
  transition: all 0.2s ease;
}

.back {
text-align:center
}

.back p {
display:inline
}

.back a {
text-decoration:none
}

.back {
width:auto;
padding:8px;
margin-top:30px;
cursor:pointer;
background-color:rgba(153,153,153,0.7);
color:#000;
border:none;
outline:none;
font-family:sans-serif;
text-decoration:none;
font-size:var(--font-size);
font-weight:600;
text-align:center;
border-radius:4px
}

.back:focus,.back:hover {
background-color:rgba(74,74,74,0.9);
color:#fff;
transition:all .3s ease
}

/* .scrollToTopBtn {
border:none;
outline:none;
background-color:rgba(153,153,153,0.7);
color:#000;
padding:14px;
border-radius:0 10px!important;
font-size:22px!important;
font-family:inherit;
text-decoration:none;
font-weight:800;
text-align:center;
line-height:48px;
text-indent:-3px;
position:fixed;
bottom:25px;
max-width:40px;
left:75%;
z-index:100;
visibility:hidden
}

.showBtn {
visibility:visible;
cursor:pointer
}

.scrollToTopBtn:focus,.scrollToTopBtn:hover {
background-color:rgba(74,74,74,0.9);
color:#fff;
transition:all .3s ease
} */


.scrollToTopBtn {
width:52px;
height:52px;
border-radius:50%;
font-size:30px;
font-family:inherit;
text-decoration:none;
font-weight:800;
color:#fff;
text-align:center;
padding-bottom: 5px;
background-color:rgba(153,153,153,0.7)!important;   /* wichtig für Firefox */
color:#000!important;   /* wichtig für Firefox */
border:none;
outline:none;
z-index:100;
visibility:hidden;
position:fixed;
bottom:125px;
right: 13% /* buttonDownload */
}

.showBtn {
visibility:visible;
cursor:pointer
}

.showBtn:focus-visible,.showBtn:hover {   /* Ausgangszustand!!! */  /* focus-visible wichtig für Firefox */
background-color:rgba(74,74,74,0.9)!important;
color:#fff!important
}

.scrollToTopBtn:focus,.scrollToTopBtn:hover {
background-color:rgba(74,74,74,0.9);
color:#fff;
transition:all .3s ease
}

.scrollToTopBtn:focus:before,.scrollToTopBtn:hover:before {   /* Ausgangszustand!!! */
background-color:rgba(153,153,153,0.7);
color:#000
}







/* .content p a:focus-visible span {
background-color:rgba(0,0,0,0);
}

.content p a:focus-visible span {
border: 2px dotted blue;
padding:3px;
background-color:rgba(0,0,0,0)
} */

#kontakt {
margin-top:20%;
display: flex;
flex-direction: row;
width: 100%
}

@media (max-width: 640px) { 

#kontakt {
flex-wrap: wrap;
}
  
.sms_mail {
margin-top: 30px;
}
}

.spam {
padding:10px;
border-radius:8px;
min-width:50%;
text-align:left;
list-style:none;
padding-top: 40px;
float: left;
}

#card img{
max-width:70%;  /* 98% */
height:auto
}

#card {
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

@media screen and (max-width: 1279px) {
.showBtn {
display:none
}
}

@media all and ( max-width: 640px ) {
:root {
--page-padding:16px;
--icon-size:24px
}

#_logo img {
width:150px;
margin-top:15px
}
}