/* css powered by screen & function - agentur fuer digitale medien */

body
{
margin-top:0px;
margin:0 auto;
text-align:center;
background:url(../images/el-horst.jpg) no-repeat;
background-position:top center;
background-color:#3f2b07;
}

a:focus { outline:none;}

#webseite
{
margin-top:0px;
width:949px;
margin:0 auto;
text-align:center;
}

#header
{
display:block;
margin:0 auto;
width:949px;
height:335px;
}

#linke_spalte
{
position:absolute;
display:block;
top:650px;
}

#linke_spalte p
{
text-align: right;
color:#d0b088;
font-size: 16px;
line-height: 22px!important;
}

#linke_spalte h1
{
text-align: right;
}

/* ****************************** TAB FOCUS ****************************** */

/* Standardmäßig den Fokus-Rahmen bei Links und Buttons deaktivieren */
button:focus, a:focus {
outline: none !important;
}

/* Für alle interaktiven Elemente, die Tastaturfokus benötigen */
.user-is-tabbing a:focus,
.user-is-tabbing button:focus,
.user-is-tabbing [data-focus-visible-added] {
border: 2px solid red !important; /* Roter Rahmen für den Fokus */
outline: none !important;
}


.archiv_ausgabe_view:focus-visible {
border: 2px solid red !important; 
outline: none !important;
}


/* Entfernt den Fokus-Stil beim Mausklick */
.archiv_ausgabe_view:not(:focus-visible) {
  outline: none;
}

/* Unterstützung für :focus-visible falls vom Polyfill unterstützt */
a:focus-visible,
button:focus-visible {
border: 2px solid red !important;
}

/* Zusätzlicher Fokus für Bilder in Links */
a img {
display: inline-block; /* Macht das Bild fokussierbar */
}

.user-is-tabbing a:focus img,
.user-is-tabbing a:focus-visible img,
[data-focus-visible-added] img {
border: 2px solid red !important; /* Roter Rahmen bei Tastaturfokus */
}

/* Optional: Weitere interaktive Elemente */
.user-is-tabbing input:focus,
.user-is-tabbing select:focus,
.user-is-tabbing textarea:focus {
border: 2px solid red !important;
}

a:focus-visible img {
  outline: 2px solid red!important;
  outline-offset: 2px!important;
}

input[type="checkbox"]:focus-visible {
outline: none; /* entfernt den Standard-Fokusrahmen */
box-shadow: 0 0 0 2px red; /* roter Rahmen-Effekt */
border: 2px solid red; /* falls du einen festen Rahmen willst */
}

/* ****************************** TAB FOCUS ****************************** */

h1 {
font-family: Georgia,Verdana,Arial;
font-style: normal;
font-weight: bold;
font-size: 13pt;
line-height: 18px;
color: #ffbc35;
}

h2 {
font-family: Georgia,Verdana,Arial;
font-style: normal;
font-weight: bold;
font-size: 13pt;
line-height: 18px;
color: #ffbc35;
}

td,p
{
font-family: Georgia,Verdana,Arial;
font-style: normal;
font-weight: normal;
font-size:11pt;
line-height: 20px;
color:#e5c7a2;
text-align: left;
}

.letter1     {
font-family: Verdana,Arial,Helvetica;
font-style: normal;
font-weight: bold;
font-size: 8pt;
color: #666600
}

.letter2     {
font-family: Georgia,Arial,Helvetica;
font-style: normal;
font-weight: bold;
font-size: 12pt;
color: #eecdba;
}

a,
a:link,
a:visited       {
color: #ffbc35;
text-decoration: underline;
}

a:hover      {
color: #b1a6a6;
text-decoration: none;
}

ul  {
}

li           {
font-family: Georgia,Arial,Helvetica;
font-weight: normal;
font-size: 12pt;
line-height: 19px;
text-align: left;
list-style-image:url(../images/listenpunkt.png);
margin-bottom: 10px;
color:#e5c7a2;
text-shadow: 5px 5px 10px #000000;
}


hr
{
border-style: solid;
border-color:#fe7e00;
height: 1px;
width:100%;
margin-top:  5px;
margin-bottom: 5px;
}

.line   {
BORDER-top: #fe7e00 1px solid;
height: 1px;
width:100%;
margin-top:  0px;
margin-bottom: 0px;
}

#ende {
height: 60px;
}

.bild_links
{
float: left;
margin: 0px 20px 0px 3px;
}

.bild_rechts
{
float: right;
margin: 0px 3px 0px 20px;
}

.clear {
clear:both;
}

.impressum {
color: #ffbc35;
text-decoration: underline;
cursor: pointer;
}

#galerie {
width:auto;
}

#galerie img {
margin : 0 15px 15px 0;
border : 1px solid #c8bb9b;
border-radius: 7px;
box-shadow : 5px 5px 15px #212121 ;
}

#galerie img:hover {
box-shadow: 0px 0px 0px #212121;
}

#footer {
}
#footer p,
#footer a,
#footer a:link {
font-size:13pt;
color:#e5c7a2;
letter-spacing: 1px;
}

#slider
{
display: none;
}

.slide_schalter
{
color:#ffbc35 !important;
cursor:pointer;
}

.paragraph
{
color:#ffbc35 !important;
cursor:pointer;
}


.angebot {
margin-top:20px;
background: rgba(237, 198, 98, 0.2);
padding:10px 20px 10px 10px;
border-radius:7px;
}

.angebot li {
font-size:20px!important;
line-height:23px!important;
text-shadow:none!important;
}