/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-3-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/source-sans-3-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/source-sans-3-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/source-sans-3-v19-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



body {
 color: #333;
font-family: 'Source Sans 3', sans-serif;
font-size: 18px;
overflow-x: hidden;
}

:focus-visible { outline: 3px dashed #666; }


.mobile_menu:focus {
  display: block;
  visibility: visible;
transform: none!important;
}

.mobile_menu:focus .mobile_menu {
transform: none!important;
}

img {
max-width: none;
}

table { width: auto!important; text-align: left!important; }
td { width: auto!important; height: auto!important; padding: 10px; }

#headlogo {
width: 100%;
}

#headlogo img { float: right; }
#main { 
max-width: 900px;
margin: auto; 
width: auto;
float: none; 
}

#main { background: #fff;}

#main .mod_article { padding: 30px; }
#main .mod_article. {  padding: 0 5px 30px 5px; }


.submit {
	box-shadow: 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.submit:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.submit:active {
	position:relative;
	top:1px;
}

        
.skip { 
width: fit-content; 
margin: auto;
  position: relative;
  top: -400px;
  z-index: 9999;
 }

.skip-link {
  padding: 8px;
  background: #ffe97d;
  display: inline-block;
}

/* Skiplinks Zustand: Sichtbar machen, wenn fokussiert */
.skip-link:focus {
    top: 0; /* Sichtbar machen, wenn der Fokus erreicht wird */
    outline: 2px solid #fff;
}

/* 1. Barrierefreies Verstecken für Sehende */
.accessibility-nav {
    /* Versteckt das Menü visuell, bleibt aber für Screenreader und Tastatur zugänglich */
    position: absolute !important;
    clip-path: inset(50%); 
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    border: 0;
}

/* 2. Sichtbar machen, wenn ein Link darin fokussiert wird */
/* Sobald ein Nutzer mit TAB das Menü erreicht, wird es sichtbar */
.accessibility-nav:focus-within {
    /* WICHTIG: Überschreibt die "verstecken"-Regeln */
    position: relative !important; /* Nimmt wieder normalen Platz ein */
    clip-path: none !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    
    /* Optional: Styling für das eingeblendete Menü */
    background: #fff;
    padding: 10px;
    border: 1px solid #ccc;
z-index: 999999;
}


.terminbuchung { background: #ffe97d; text-align: center; }

.teamseite #main h2 {text-align: center; }

.teamseite #main ul { 
list-style-type: none;
display: flex; 
flex-wrap: wrap;
padding: 0; 
justify-content: center
}

.teamseite #main ul li { 
width: fit-content; 
max-width: 30.3%;
padding: 0 1.5%;
margin-bottom: 2em;
}

@media (max-width: 850px) {
.teamseite #main  ul li { 
width: fit-content; 
max-width: 47%;
padding: 0 1.5%;
}
}

@media (max-width: 700px) {
.teamseite #main ul { 
justify-content: center; }
.teamseite ul li { 
width: fit-content;
padding: 0; }
}

.teamseite #main ul li img { 
max-width: 100%;
}

#footer { padding: 2em 0; }
#footer ul { 
list-style-type: none;
padding: 0;
text-transform: uppercase; 
line-height: 1.5em;
}
#footer a { color: #333; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

.kontakt table { margin: auto; }

@media (min-width: 900px) {
.b50 {width: 50%; }
}
