@font-face {
    font-family: lmsq;
    src: url(./LMSansQuot8-Regular.woff);
}

* {
    margin: 0;
    padding: 0;
    }

body {
    border-style: none;
    border-width: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
    padding: 0px;
    font-weight: normal;
    font-style: normal;
    font-family: lmsq,Arial,Helvetica,sans-serif;
    font-size: 16px; /*medium;*/
    font-stretch: normal;
    font-variant: normal;
    text-transform: none;
    text-align: left;
    text-decoration: none;
    background-image: url(./wall.jpg);
    background-color: rgb(235,220,198); /*253, 234, 209);*/
    }

p {
    margin-top: 1ex; margin-bottom: 1ex;
    }

table, td, th {
    border-style: none;
    border-width: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
    }

td {
	font-style: normal;
	font-variant: normal;
	font-size-adjust: none;
	color: rgb(0, 0, 0);
    }

h1 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-style: normal;
    text-transform: none;
    color: rgb(102, 51, 51);
    font-size: 168%;
    font-weight: bold;
    text-align: left;
    }

h2 {
    margin-top: 8px;
    margin-bottom: 24px;
    font-style: normal;
    text-transform: none;
    color: rgb(102, 51, 51);
    font-size: 144%;
    font-weight: bold;
    text-align: left;
    }

#hd {
	border-width: 0px;
	font-style: normal;
	text-transform: none;
	text-align: left;
	color: rgb(102, 51, 51);
	font-weight: bold;
	background-color: rgb(240, 240, 240);
	}

#tabsty {
    padding: 4px 0px;
    margin: 0px;
    }

.alignc {
    margin: 0px auto;
    }

.bwd  {
	width: 832px;
	}

.twd {
	width: 760px;
	}

.tcenter{
    text-align: center;
    }

.lwide {
	line-height: 144%;
	font-size: 120%; /*large;*/
	}

.lwiden {
	line-height: 144%;
	font-size: 100%; /*medium;*/
	}

.topup {
    margin-top: -8px;
    }

a {
    font-weight: bold;
    text-decoration: underline;
    color: rgb(204,0,0);
    font-size: 100%; /*medium;*/
    padding-left: 5px;
    padding-right: 5px;
    }

a:hover {
    background-color: rgb(240,240,240);
    }

a[aktuell] {
    text-decoration: none;
	color: rgb(102,51,51);
    }
	
.wdal {
    text-align: left;
    }

.wdar {
    text-align: right;
    }

.wd20 {
	width: 20%;
	}

.wd28 {
	width: 28%;
    text-align: right;
	}

.wd40 {
	width: 40%;
	}

.fukobox { 
    background-color: rgb(240,240,240);
    width: 760px;
    margin-top: 4px;
    padding: 0px 4px 0px 4px;
}

.inhaltbox {
    width: 768px;
    margin-top: 4px;
    padding: 0px 4px 0px 4px;
    }

.foottextjustify {
    text-align: justify;
    text-justify: inter-word;
    text-align-last: justify;
    font-size: 195%;
    color: rgb(102, 51, 51);
    height: 36px;
    padding: 2px 4px 0px 4px;
    }
    
.fukol { 
    background-image: url('./fukohil.png');
    width: 32px;
    margin-top: 4px;
    background-size: 100% 100%;
    }

.fukor { 
    background-image: url('./fukohir.png');
    width: 32px;
    margin-top: 4px;
    }

.barrand {
    width: 32px;
    }

.namehead {
    width:590px;
    text-align: justify;
    text-justify: inter-word;
    text-align-last: justify;
    }

/* Responsive layout - when the screen is less than 832px wide, ... */
@media screen and (max-width: 831px) {.fukol,.fukor,.barrand {width:30px;}}
@media screen and (max-width: 827px) {.fukol,.fukor,.barrand {width:28px;}}
@media screen and (max-width: 823px) {.fukol,.fukor,.barrand {width:26px;}}
@media screen and (max-width: 819px) {.fukol,.fukor,.barrand {width:24px;}}
@media screen and (max-width: 815px) {.fukol,.fukor,.barrand {width:22px;}}
@media screen and (max-width: 811px) {.fukol,.fukor,.barrand {width:20px;}}
@media screen and (max-width: 807px) {.fukol,.fukor,.barrand {width:18px;}}
@media screen and (max-width: 803px) {.fukol,.fukor,.barrand {width:16px;}}
@media screen and (max-width: 799px) {.fukol,.fukor,.barrand {width:14px;}}
@media screen and (max-width: 795px) {.fukol,.fukor,.barrand {width:12px;}}
@media screen and (max-width: 791px) {.fukol,.fukor,.barrand {width:10px;}}
@media screen and (max-width: 787px) {.fukol,.fukor,.barrand {width:8px;}}
@media screen and (max-width: 783px) {.fukol,.fukor,.barrand {width:6px;}}
@media screen and (max-width: 779px) {.fukol,.fukor,.barrand {width:4px;}}
@media screen and (max-width: 775px) {.fukol,.fukor,.barrand {width:2px;}}
@media screen and (max-width: 771px) {.fukol,.fukor,.barrand {width:0px;}}

.foot {
    font-size: 197%;
    color: rgb(102, 51, 51);
    height: 38px;
    }

.foottxt {
    font-size: 195%;
    color: rgb(102, 51, 51);
    height: 36px;
    padding: 2px 0px 0px 0px;
    }

.head {
    font-size: 300%;
    color: rgb(102, 51, 51);
    height: 152px;
    }

.headtxt {
    font-size: 300%;
    height: 150px;
    }

.inhalt {
    height: 460px;
    }

.inhaltpad {
    padding: 0px 4px;
    padding-top: 16px;
    }

.alignr {
    text-align: right;
    }

.rulerpadtb {
	font-size: 0px;
	padding: 4px 0px 0px 0px;
    width: 768px;
	}

.rulerpadtop {
    padding-top: 20px;
    padding-bottom: 18px;
    }

.rulerpadbot {
    padding-top: 13px;
    padding-bottom: 21px;
    }

/*Indexseite*/
.hoverpic {
    margin-top: -145px;
    }

/* Kontaktseite */
.firstlist {
    margin-top: -8px;
	margin-bottom: 10px;
    }

.clist {
	margin-top: 5px;
	margin-bottom: 10px;
	}

.kontakttab {
    display: inline-block; 
    width: 9em;
    }

.impresstab {
    display:inline-block; 
    width: 6em;
    }

.indentleft {
    margin-left: 3em;
    }
.padleft {
    margin-left: 32px;
    }

ul {
    list-style-type:none;
    }

img[vam] {
    vertical-align: middle;
    }

/* Karte */
div.oefftab {
    display:inline-block; 
    width: 3em;
    }

.kartenbox {
    padding: 11px 0px 0px 0px;
    text-align: right;
    width: 53%;
    }

/* DSGVO */
.smaller {
    line-height:100%;
    font-size:91%;
    text-align: left;
    vertical-align: top;
    font-weight:500;
    padding-top:8px;
    }

.hidevis{
    visibility:hidden;
    }

.hidedis{
    display:none;
    }

/* Firma */
.vert {
    line-height: 200%;
    padding-top: 2px;
    vertical-align: top;
    }

.nopadleft {
    padding-left: 0px;
    }

.norm {
    line-height:130%;
	font-size:100%;
	text-align: left;
	vertical-align: top;
    }

/* Bilder */
.picto {
    width: 33px;
    height: 28px;
    margin: 0;
    padding: 0px;
    }

a.picto:hover {}

.apicto {
    display:inline-block;
    width: 33px;
    height: 28px;
    margin: 4px 8px 3px 4px;
    border-bottom: 1px solid rgba(204,0,0,1);
    padding: 0px;
    }

div.apicto:hover {
    border: solid rgba(240,240,240,1) 4px;
    margin: 0px 4px 0px 0px;
    }

.bild {
    vertical-align: top;
    padding-top: 10px;
    }

.details {
    position: absolute; /* relative; geht nicht ! */
    right: 0px;
    padding: 0px;
    width: 480px;
    height: 410px;
    margin: 0 0;
    overflow: visible;
    display: block;
    opacity: 1; /* wichtig: Seite beginnt gleich mit Galerie */
    z-index: 0;
    object-fit: contain;
    }

.details img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: top;
    margin: 0;
    padding: 0;
    vertical-align: top;
    background: rgba(240,240,240,1);
}

.details figure { /* Einzelbild */
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.details figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: black;
    background: rgba(240,240,240,0.65);
    text-indent: 0;
}

.details:hover figcaption {
    color: rgba(0,0,0,0);
    background: rgba(240,240,240,0);
}

.details:target {
    opacity: 1;
    z-index: 10;
}

#gallery {
    width: 480px;
    height: 410px;
    margin: 0 auto;
    overflow: hidden;
}

#gallery figure { /* Überblenden */
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    animation-duration: 50s; /* Gesamtzeit alle Bilder */
    animation-iteration-count: infinite;
    animation-name: wechseln;
    animation-direction: normal;
    text-align: center;
}

#gallery figure:last-of-type {
    position: relative;
}

#gallery figure:nth-of-type(2) {
    top: -100%;
    animation-delay: 5s;
    opacity: 0;
}

#gallery figure:nth-of-type(3) {
    top: -200%;
    animation-delay: 10s;
    opacity: 0;
}

#gallery figure:nth-of-type(4) {
    top: -300%;
    animation-delay: 15s;
    opacity: 0;
}

#gallery figure:nth-of-type(5) {
    top: -400%;
    animation-delay: 20s;
    opacity: 0;
}

#gallery figure:nth-of-type(6) {
    top: -500%;
    animation-delay: 25s;
    opacity: 0;
}

#gallery figure:nth-of-type(7) {
    top: -600%;
    animation-delay: 30s;
    opacity: 0;
}

#gallery figure:nth-of-type(8) {
    top: -700%;
    animation-delay: 35s;
    opacity: 0;
}

#gallery figure:nth-of-type(9) {
    top: -800%;
    animation-delay: 40s;
    opacity: 0;
}

#gallery figure:nth-of-type(10) {
    top: -900%;
    animation-delay: 45s;
    opacity: 0;
}

#gallery figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: black;
    background: rgba(240,240,240,0.5);
    text-indent: 0;
}

#gallery img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: top;
    margin: 0;
    padding: 0;
    vertical-align: top;
    background: rgba(240,240,240,1);
}

#gallery:hover figure {
    animation-play-state: paused;
}

#gallery:hover figcaption {
    animation: fadeout 5s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes wechseln {
    0% {opacity: 0;}
    5% {opacity: 1;}
   10% {opacity: 1;} /* Ab hier (1/10 von 10 Bildern) kommt schon nächstes Bild */
   15% {opacity: 0;}
  100% {opacity: 0;} /* von Gesamtzeit alle Bilder */
}

@keyframes fadeout {
    0% {color: rgba(0,0,0,1); background: rgba(240,240,240,1);}
    100% {color: rgba(0,0,0,0); background: rgba(240,240,240,0);}
}

.wilk {
    position: relative;
    height: 40px;
    margin-top: 24px;
    margin-bottom: 12px;
    display: table-cell;
    font-style: normal;
    text-transform: none;
    color: rgb(102, 51, 51);
/*    font-size: 32px;*/
    font-weight: bold;
    overflow: hidden;
    display: block;
    white-space: nowrap;
    animation: welcome 1.5s;
    -moz-animation: welcome 3s; /* Für Firefox */
    -webkit-animation: welcome 3s; /* Für Safari und Chrome */
    -o-animation: welcome 3s; /* Für Opera */
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.wilktext {
    position: relative;
    height: 40px;
    margin-top: 24px;
    margin-bottom: 12px;
    display: table-cell;
    font-style: normal;
    text-transform: none;
    color: rgb(102, 51, 51);
    font-size: 32px;
    font-weight: bold;
    overflow: hidden;
    display: block;
    white-space: nowrap;
}

.wilkwrap {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

@keyframes welcome {
    0%   {font-size: 32px;width:   0%; text-shadow: 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 20px; margin-bottom: 16px;}
    100% {font-size: 32px;width: 100%; text-shadow: 0px 8px 5px rgba(173.4,162.3,146,1); margin-top: 20px; margin-bottom: 16px;}
    }
@keyframes welcomes {
    0%   {font-size: 20px;width:   0%; text-shadow: 0px  0px 0px rgba(240,240,240,1), 0px  0px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;}
/*    40%  {font-size: 28px;width: 100%; text-shadow: 0px  0px 0px rgba(240,240,240,1), 0px  0px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;}*/ /* Einlaufen */ 
/*    35%  {width: 100%; text-shadow: 0px -1px 0px rgba(240,240,240,1), 0px -1px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;}*/ /* Kippen halb */
/*    50%  {width: 100%; text-shadow: 0px -2px 0px rgba(240,240,240,1), 0px -3px 0px rgba(102,51,51,1), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;}*/ /* Kippen ganz */
/*    65%  {width: 100%; text-shadow: 0px -2px 0px rgba(240,240,240,1), 0px -3px 0px rgba(102,51,51,1), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 25px; margin-bottom: 11px;} *//* Halten*/
/*    100% {width: 100%; text-shadow: 0px -2px 0px rgba(240,240,240,1), 0px -3px 0px rgba(102,51,51,1), 0px 8px 5px rgba(173.4,162.3,146,1); margin-top: 20px; margin-bottom: 16px;}*/ /* Heben */
    100% {font-size: 32px;width: 100%; text-shadow: 0px 0px 0px rgba(240,240,240,1), 0px 0px 0px rgba(102,51,51,1), 0px 8px 5px rgba(173.4,162.3,146,1); margin-top: 20px; margin-bottom: 16px;} /* Heben */
    }
@-moz-keyframes  welcome {
    0%   {width:   0%; text-shadow: 0px  0px 0px rgba(240,240,240,1), 0px  0px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;}
    20%  {width: 100%; text-shadow: 0px  0px 0px rgba(240,240,240,1), 0px  0px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;} /* Einlaufen */ 
    35%  {width: 100%; text-shadow: 0px -1px 0px rgba(240,240,240,1), 0px -1px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;} /* Kippen halb */
    50%  {width: 100%; text-shadow: 0px -2px 0px rgba(240,240,240,1), 0px -3px 0px rgba(102,51,51,1), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;} /* Kippen ganz */
    100% {width: 100%; text-shadow: 0px -2px 0px rgba(240,240,240,1), 0px -3px 0px rgba(102,51,51,1), 0px 8px 5px rgba(173.4,162.3,146,1); margin-top: 20px; margin-bottom: 16px;} /* Heben */
    }
@-webkit-keyframes welcome {
    0%   {width:   0%; text-shadow: 0px  0px 0px rgba(240,240,240,1), 0px  0px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;}
    20%  {width: 100%; text-shadow: 0px  0px 0px rgba(240,240,240,1), 0px  0px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;} /* Einlaufen */ 
    35%  {width: 100%; text-shadow: 0px -1px 0px rgba(240,240,240,1), 0px -1px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;} /* Kippen halb */
    50%  {width: 100%; text-shadow: 0px -2px 0px rgba(240,240,240,1), 0px -3px 0px rgba(102,51,51,1), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;} /* Kippen ganz */
    100% {width: 100%; text-shadow: 0px -2px 0px rgba(240,240,240,1), 0px -3px 0px rgba(102,51,51,1), 0px 8px 5px rgba(173.4,162.3,146,1); margin-top: 20px; margin-bottom: 16px;} /* Heben */
    }
@-o-keyframes welcome {
    0%   {width:   0%; text-shadow: 0px  0px 0px rgba(240,240,240,1), 0px  0px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;}
    20%  {width: 100%; text-shadow: 0px  0px 0px rgba(240,240,240,1), 0px  0px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;} /* Einlaufen */ 
    35%  {width: 100%; text-shadow: 0px -1px 0px rgba(240,240,240,1), 0px -1px 0px rgba(102,51,51,0), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;} /* Kippen halb */
    50%  {width: 100%; text-shadow: 0px -2px 0px rgba(240,240,240,1), 0px -3px 0px rgba(102,51,51,1), 0px 0px 0px rgba(102,95.5,85.9,1);   margin-top: 24px; margin-bottom: 12px;} /* Kippen ganz */
    100% {width: 100%; text-shadow: 0px -2px 0px rgba(240,240,240,1), 0px -3px 0px rgba(102,51,51,1), 0px 8px 5px rgba(173.4,162.3,146,1); margin-top: 20px; margin-bottom: 16px;} /* Heben */
    }


@supports (-webkit-background-clip: text) {
    .textline {
    background-image: linear-gradient(
    to right,
    rgb(102, 51, 51) 0%,
    rgb(102, 51, 51) 50%,
    rgb(218,165, 32) 52%,
    rgb(102, 51, 51) 54%,
    rgb(102, 51, 51) 100%
    );
    background-size: 200% 200%;
    animation: horizontal 2s cubic-bezier(0.2, 0.15, 0.8, 0.3)  0s 1; /* alt: ease-in */
    animation-fill-mode: forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
}

@keyframes horizontal {
    0% {background-position: 100% 50%}
    100% {background-position: 0% 50%}
}

.wilkn {
    position: relative;
    height: 40px;
    margin-top: 24px;
    margin-bottom: 12px;
    display: table-cell;
    font-style: normal;
    text-transform: none;
    color: rgb(102, 51, 51);
    font-size: 32px;
    font-weight: bold;
    overflow: hidden;
    display: block;
    white-space: nowrap;
}