@charset "utf-8";

/* Reset & Base ========================= */
:where(html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video) { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
:where(article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section) { display:block; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote::before, blockquote::after, q::before, q::after { content:none; }
table { border-collapse:collapse; border-spacing:0; }
*, *::before, *::after { box-sizing:border-box; }

#cssmenu #menu-button:before,
#cssmenu #menu-button:after,
#cssmenu #menu-button::before,
#cssmenu #menu-button::after { box-sizing: content-box }

html { width:100%; height:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust:100%; font-size:16px; scroll-behavior: smooth; scroll-padding-top: 10px; /* Optional: Verhindert abruptes Stoppen */}
body { background-color:#fff; font-family: 'Cinzel', cinzel; font-size: 16px; color:#333; width:100%; height:100%; border:0 none; padding:0; margin:0; scroll-behavior: smooth; transition: filter 0.3s ease; }	
img { image-rendering: -webkit-optimize-contrast;  max-width: 100%; max-height: auto;}

/* Scrollbars */
* {scrollbar-width:thin; scrollbar-color:#A73D4C #ffffff }
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {width: 15px !important }
*::-webkit-scrollbar-track {background-color: transparent !important }
*::-webkit-scrollbar-thumb {background-color: #A73D4C !important; border-radius: 20px !important; border: 1px solid #fff !important }

#data { position:relative; overflow:hidden; z-index:1; width:100%; margin:0px auto; background:#eaeaea}
#data1 { position:relative; top:0px; z-index:3; width:100%; overflow: hidden;  margin:0px auto; background:#eaeaea; -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.8); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.8); 
         -moz-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.8); box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.8);}
#data4 { position:relative; z-index:2; width:100%; margin:0 auto; padding:100px 0; background-color:#eaeaea; background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; box-shadow:inset 0 10px 10px -10px rgba(0,0,0,1); transition:padding height 0.3s ease; }
#main { position:relative; width:100%; top:0px; margin:0px auto; } 


.bg-aligned {display: block; margin-left: auto; margin-right: 0;}

#header {
 position:relative; z-index:100; height:230px; width:100%; margin:0px auto; border: 0px solid #000000;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#aaaaaa+0,ffffff+100 */
background: rgb(170,170,170); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(170,170,170,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(170,170,170,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(170,170,170,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#ffffff',GradientType=1 ); }
#head_cont { position:relative; margin:0px auto; width:100%; height:100%; background-image: url('../layout/layout_head1.png'); background-repeat: no-repeat; background-position: right top; background-size: contain;}	

#menu { position:relative; z-index:90; background:#D5D6D8; width:100%; height:auto; border-top:3px solid ; border-bottom:3px solid ; -moz-border-image: -moz-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%);
	    -webkit-border-image: -webkit-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%); -o-border-image: linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%); border-image: linear-gradient(to right, #666666 0%, #ffffff 20% 80%, #666666 100%); border-image-slice: 1;
        -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4) }   
#menu_cont { position:relative; z-index:80; width:420px; top:0px; right:0px; margin-left:auto; margin-right:0;} 
    
logo { position:absolute; top:5px; left:20px; width:250px; height:auto}
l-t1 { position:absolute; top:80px; left:300px; width:380px; height:auto}
l-t2 { position:absolute; top:130px; left:302px; width:380px; height:auto}
adrs { position:absolute; top:40px; right:30px; text-align:right; font-size:18px; font-family: 'Cinzel', cinzel; font-weight:500; letter-spacing:0px; color:#222 }
.txteff2 { position:absolute; z-index:100; top:180px; left:302px; overflow:hidden; width:500px; height:50px; display:flex; font-size:22px; font-family: 'Cinzel', cinzel; font-weight:normal; letter-spacing:1px; color:#333 }

#content1 { position: relative; z-index:20; text-align:left; width:1200px; padding: 120px 0px 0 0px; margin:0px auto;} 
#content2 { position: relative; z-index:20; text-align:center; width:1200px; padding: 120px 0px 0 0px; margin:0px auto;} 

/* Foot ---------------------------------------------------------------------- */
#foot{ position:relative; z-index:90; width:100%; height:300px; margin:0 auto; 
       border-top: 4px solid transparent; -moz-border-image: -moz-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%); -webkit-border-image: -webkit-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%);
	   border-image: linear-gradient(to right, #666666 0%, #ffffff 20% 80%, #666666 100%); border-image-slice: 1;
       background: rgba(210,212,217,0.8);
       background: -moz-linear-gradient(top, rgba(210,212,217,0.8) 0%, rgba(157,157,163,1) 100%);
       background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(210,212,217,0.8)), color-stop(100%, rgba(157,157,163,0.8)));
       background: -webkit-linear-gradient(top, rgba(210,212,217,0.8) 0%, rgba(157,157,163,0.8) 100%);
       background: -o-linear-gradient(top, rgba(210,212,217,0.8) 0%, rgba(157,157,163,0.8) 100%);
       background: -ms-linear-gradient(top, rgba(210,212,217,0.8) 0%, rgba(157,157,163,0.8) 100%);
       background: linear-gradient(to bottom, rgba(210,212,217,0.8) 0%, rgba(157,157,163,0.8) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d4d9', endColorstr='#9d9da3', GradientType=0 ); -webkit-box-shadow: 0px -8px 8px -2px rgba(120,120,120,0.8) }
#foot_cont{ position:relative; top:0px; text-align:left; width:100%; height:270px; margin:0px auto }

bgf1 { position:absolute; bottom:0px; left:0px; width:650px; height:auto}

.web-by { position:relative;} 
.publisher{ position:relative; z-index:100; width:100%; height:30px; background: rgba(51, 51, 51, 0.95); margin:0 }
.publisher_cont{ position:relative; top:8px; left:30px; text-align:left; width:1000px; height:20px; margin:0px  }

.abstand1{ line-height:100px}
.abstand2{ line-height:200px}
.abstand3{ line-height:300px}
.abstand4{ line-height:400px}

.flexbox1 { position:relative; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;  -webkit-flex-flow: row wrap;justify-content: space-around;margin:0px -4px -4px 0px }
.flexbox2 { position:relative; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;  -webkit-flex-flow: row wrap;justify-content:flex-start}
.flexbox3 { position:relative; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;  -webkit-flex-flow: row wrap;margin:0px -10px -10px 0px }

/* Layouts ------------------------------------------------------------------ */
.ihead { position:relative; top:4px; width:20px; height:auto }
.l-p1 { position:relative; width:14px; height:14px; margin: 2px 10px 0 0; -moz-box-shadow:1px 1px 2px #333333; -webkit-box-shadow:1px 1px 2px #333333; box-shadow:1px 1px 2px #333333 }
.ifoot1 { position:relative; top:10px; width:200px; height:auto}
.i-kf1 { position:relative; z-index:10; width:450px; height:auto; left:0px} 
.ikont1 { position:relative; top:6px; padding-right:6px; width:25px; height:auto }
.cont_bg1 { position:absolute; z-index:1; width:60%; bottom:-300px; right:0px; height:auto; filter: alpha(opacity=80); opacity:0.8 } 

/* Bilder Box (Random) -------------------------------------------------------------------------------------------------------------------------------------------------------- */
.image-box1 { width:100%; max-width:2000px; margin:auto; aspect-ratio:2000/600; background:#eee; position:relative; overflow:hidden; border:2px solid #ccc; border-radius:100px; }
.image-box1::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 50px rgba(0,0,0,0.35); z-index:2; }
.image-box1 img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity 2s ease-in-out; z-index:1; }
.image-box1 img.active { opacity:1; }

/* Leistungen -------------------------------------------------------------------------------------------------------------------------------------------------------- */
.info-list { width:100%; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:20px; }
.info-box { display:flex; align-items:stretch; background:#f5f5f5; border-radius:20px; box-shadow:0 14px 18px -14px rgba(0,0,0,0.55); overflow:hidden; flex:1 1 100%; }
.info-box-img { flex:0 0 220px; max-width:260px; filter:saturate(25%) brightness(120%); }
.info-box-img img { width:100%; height:100%; display:block; object-fit:cover; }
.info-box-text { padding:20px 24px; flex:1; }
.info-box-text h3 { margin:0 0 8px; font-size:24px; }
.info-box-text p { margin:0; font-size:18px; color:#444; }

@media (max-width:768px) { .info-list{gap:15px;} .info-box{flex:0 0 calc(50% - 8px);flex-direction:column;} .info-box-img{flex:0 0 auto;max-width:100%;} .info-box-text h3 { margin:0 0 8px; font-size:16px} .info-box-text p { font-size:12px; } .info-box-text { padding:10px 10px;flex:1; } } 


/* Karten (Map) -------------------------------------------------------------------------------------------------------------------------------------------------------- */
#map { position:relative; width:80%; height:500px; border-radius:20px; border-top:2px solid #fff; border-right:2px solid #fff; box-shadow:0 4px 6px rgba(0,0,0,0.4); overflow:hidden; font-family: 'Cinzel', cinzel; margin:0 auto; transition:height 0.3s ease; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { font-family: 'Cinzel', cinzel; }
.map-expanded { height:800px !important; width:100% !important; border-radius:0 !important; border-top:2px solid #888 !important; border-right:0 solid #fff !important; }
.expand-button { position:absolute; bottom:10px; left:10px; padding:10px 14px; font-family: 'Cinzel', cinzel; font-size:20px; border:none; border-radius:8px; background-color:white; color:white; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.2); z-index:1000; }
.expand-button:hover { background-color:#f1f1f1; }
.map-icons { font-family:'Material Icons'; font-weight:normal; font-style:normal; font-size:24px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; direction:ltr; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; color:#333; vertical-align:middle; transform:translateY(-2px); }

/* Formular -------------------------------------------------------------------------------------------------------------------------------------------------------- */
.formular {
  position:absolute;
  width: 100%    
  z-index:100;
  bottom:120px;
  left:0;
  right:0;
}
    .contact-section{max-width:90%;margin:0 auto;}
    .contact-section h2{font-size:34px;margin:0 0 15px;letter-spacing:0.04em;text-transform:uppercase;}
    .form-box{border-radius:24px;padding:24px 22px 26px;border:1px solid rgba(255,255,255,0.35);box-shadow:0 18px 46px -28px rgba(0,0,0,0.55);background:transparent;}
    .contact-form{display:flex;flex-direction:column;gap:18px;}
    .form-row{display:flex;flex-direction:column;gap:6px;}
    .contact-form input::placeholder,.contact-form textarea::placeholder{color:#999;opacity:1;}
    .contact-form input[type="text"],.contact-form input[type="email"],.contact-form input[type="tel"],.contact-form input[type="number"],.contact-form textarea{padding:12px 14px;border-radius:14px;border:1px solid rgba(0,0,0,0.18);font:inherit;outline:none;background:rgba(245,245,245,0.85);box-shadow:0 4px 14px -10px rgba(0,0,0,0.35);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .12s ease;}
    .contact-form textarea{resize:vertical;min-height:140px;}
    .contact-form input:focus,.contact-form textarea:focus{border-color:#c79a7b;background:rgba(245,245,245,1);box-shadow:0 8px 20px -14px rgba(0,0,0,0.5);transform:translateY(-1px);}
    .contact-form input:-webkit-autofill,.contact-form input:-webkit-autofill:hover,.contact-form input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px rgba(245,245,245,0.85) inset!important;box-shadow:0 0 0 1000px rgba(245,245,245,0.85) inset!important;-webkit-text-fill-color:#333;caret-color:#333;}
    .form-row-math small{color:#777;font-size:12px;}
    .error-message{color:#b00020;font-size:13px;display:none;margin-top:2px;}
    .char-counter{font-size:14px;color:#333;text-align:right;margin-top:4px;}
    .btn-send{align-self:flex-start;padding:11px 32px;border-radius:999px;border:none;font:inherit;font-weight:500;cursor:pointer;background:linear-gradient(135deg,#CCD47D,#9AA557);color:#fff;letter-spacing:0.06em;text-transform:uppercase;box-shadow:0 14px 30px -18px rgba(0,0,0,0.8);position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;}
    .btn-send::before{content:"";position:absolute;top:0;left:-150%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.9),transparent);transform:skewX(-20deg);opacity:0;pointer-events:none;}
    .btn-send.shimmer::before{opacity:.7;animation:shimmer 1.2s ease-in-out;}
    .btn-send:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 20px 40px -22px rgba(0,0,0,0.85);filter:brightness(1.07);}
    .btn-send:active{transform:translateY(0) scale(0.99);box-shadow:0 10px 20px -16px rgba(0,0,0,0.75);filter:brightness(0.97);}
    @keyframes shimmer{0%{left:-150%;}100%{left:150%;}}
    .form-row-privacy{font-size:13px;line-height:1.4;margin-top:10px;}
    .form-row-privacy label{text-transform:none;letter-spacing:0;color:#333;}
    .form-row-privacy input[type="checkbox"]{margin-right:8px;accent-color:#9AA557;}
    .form-row-privacy a{color:#616837;text-decoration:none;border-bottom:1px solid rgba(199,154,123,0.4);padding-bottom:1px;}
    .form-row-privacy a:hover{border-bottom-color:rgba(199,154,123,0.9);}
    .form-status{margin-top:12px;font-size:13px;color:#616837;display:none;}
    .form-status.error{color:#b00020;}
    @media(max-width:576px).contact-section h2{font-size:26px;}.form-box{padding:15px 12px 15px;}}


ul[class^="svg-marker"], ul[class^="svg-box"] { list-style-type:none; position:relative; padding-left:0px}
/* Pseudoelement für das Icon */
ul[class^="svg-marker"] li {position: relative; padding-left: 40px;}
ul[class^="svg-box"] li { position: relative; padding-left: 30px;}

/* Pseudoelement für das Icon */
ul[class^="svg-marker"] li::before { content: ""; position: absolute; left: 0; top: 4px; width: 26px; height: 26px; background-size: cover; background-position: center;}
ul[class^="svg-box"] li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; background-size: cover; background-position: center;}

ul.svg-marker1 li::before { background-image: url('../layout/xxx.svg'); }

ul.svg-box1 li::before { background-image: url('../layout/square1a.svg'); } 
ul.svg-box2 li::before { background-image: url('../layout/square1b.svg'); } 

ul[class^="svg-marker"] li span { padding-left: 5px; }
ul[class^="svg-box"] li span { padding-left: 5px; }
/* Standard nummerierte Liste */
ol.numbers { list-style-type:decimal; }
ol.numbers1 {list-style-type:none; padding-left:20px;}
ol.numbers1 li::marker { content: counter(list-item) ". "; color:333; font-size:20px; font-weight:700; }

ul[class^="svg-box"] li.no-icon::before { content: none; display: none}
ul[class^="svg-box"] li.no-icon { padding-left: 30px; }


/* Effekts ---------------------------------------------------------------------- */	
.eff1 { transition: transform 0.4s, filter 0.5s ease-out; -webkit-transition: -webkit-transform 0.4s, filter 0.5s ease-out; transform-origin: 60% 80%; filter: brightness(100%) }
.eff1:hover { transform: scale(0.9) rotate(10deg); filter: brightness(90%) }

@keyframes textChange { 0% { opacity: 0; transform: translateX(-100%); } 5% { opacity: 1; transform: translateX(0); } 20% { opacity: 1; transform: translateX(0); } 25% { opacity: 0; transform: translateX(100%); } 100% { opacity: 0; transform: translateX(100%); } }
@keyframes fadeChange { 0% { opacity: 0; } 5% { opacity: 1; } 20% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }

.txteff2 span { position:absolute; opacity:0; animation:fadeChange 50s infinite;  width:100%; text-align:left }
.txteff2 span:nth-child(1) { animation-delay: 0s; }
.txteff2 span:nth-child(2) { animation-delay: 10s; }
.txteff2 span:nth-child(3) { animation-delay: 20s; }
.txteff2 span:nth-child(4) { animation-delay: 30s; }
.txteff2 span:nth-child(5) { animation-delay: 40s; }

.element1 { width:100%; opacity:0; transform:translateX(-100px); transition:all 0.8s ease-out }
.element1.visible { opacity:1; transform:translateX(0) }
.element1.hidden-out { opacity: 0; transform: translateX(-100px) }
.element2 { width:100%; opacity:0; transform:translateX(100px); transition:all 0.8s ease-out }
.element2.visible { opacity:1; transform:translateX(0) }
.element2.hidden-out { opacity: 0; transform: translateX(100px) }

.leaf-scene {position:relative; pointer-events:none; width:100%; z-index:10; height:500px; overflow:hidden;

  /* Ast / Linie */
  --stem-y:10%;                 /* vertikale Position der Linie */
  --stem-height:2px;            /* Linienstärke */
  --stem-color:#616837;         /* Linienfarbe */
  /* Blatt-Grundwerte */
  --leaf-width:24px;
  --leaf-height:40px;           /* muss zu JS leafHeight = 40 passen */
  --leaf-color:#9AA557;         /* Grundfarbe der Blätter */
  --leaf-radius:50% 50% 55% 55% / 65% 65% 45% 45%;
  /* Blatt-Ader */
  --leaf-vein-color:rgba(255,255,255,.35);
  --leaf-vein-width:2px;
  --leaf-vein-radius:999px;
  /* Animation / Bewegung */
  --leaf-fall-distance:430px;   /* wie weit das Blatt nach unten fällt */
  --leaf-default-alpha:.6;      /* Fallback-Transparenz */
  --leaf-default-scale:1;       /* Fallback-Skalierung */
  --leaf-default-drift-x:40px;  /* Fallback-Seitendrift */
  --leaf-default-start-rot:0deg;
  --leaf-default-grow-rot:0deg;
  --leaf-default-fall-rot:120deg; }

/* Linie / Ast */
.leaf-scene .stem-line {position:absolute;left:0;right:0;top:var(--stem-y);margin:auto;height:var(--stem-height);text-align:center;background:var(--stem-color);}
/* Blatt */
.leaf-scene .leaf { position:absolute; width:var(--leaf-width); height:var(--leaf-height); background:var(--leaf-color); border-radius:var(--leaf-radius); transform-origin:50% 50%; opacity:0; animation:leafLife var(--leaf-duration, 15s) linear forwards;}
/* Mittelader im Blatt */
.leaf-scene .leaf::before { content:""; position:absolute; left:50%; top:12%; width:var(--leaf-vein-width); height:72%; transform:translateX(-50%); background:var(--leaf-vein-color); border-radius:var(--leaf-vein-radius);}

/* Animation:0–10%: wachsen 10–80%: hängen 80–100%: fallen */
@keyframes leafLife {
  0% {opacity:0;transform:
      scale(calc(0.1 * var(--leaf-scale, var(--leaf-default-scale)))) rotate(var(--start-rot, var(--leaf-default-start-rot)));
  }
  10% {opacity:var(--leaf-alpha, var(--leaf-default-alpha)); transform:
      scale(var(--leaf-scale, var(--leaf-default-scale))) rotate(var(--grow-rot, var(--leaf-default-grow-rot)));
  }
  80% {opacity:var(--leaf-alpha, var(--leaf-default-alpha)); transform:
      scale(var(--leaf-scale, var(--leaf-default-scale))) rotate(var(--grow-rot, var(--leaf-default-grow-rot)));
  }
  100% {opacity:0;transform:
      translateY(var(--leaf-fall-distance)) translateX(var(--drift-x, var(--leaf-default-drift-x))) scale(var(--leaf-scale, var(--leaf-default-scale)))rotate(var(--fall-rot, var(--leaf-default-fall-rot)));} }

/* GFX ---------------------------------------------------------------------- */
img { image-rendering: -webkit-optimize-contrast}

.img-sw {filter:grayscale(90%);}
.img-hell {filter:brightness(130%); }

linie1 { display:block; top:0px; width:100%; height:6px; background:#EF4D39; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);transform: skew(-20deg) }
linie2 { display:block; top:0px; width:50%; height:6px; background:#EF4D39; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);transform: skew(-20deg) } 
linie3 { display:block; top:0px; width:100%; height:1px; background:#333 }

hr.style-1 { border: none; border-top: 2px solid #999999 }

.shade1 { box-shadow:0 8px 10px -4px #333333 }
.border1 { border:1px solid #aaaaaa }

/* intro ---------------------------------------------------------------------- */	
#intro { position:relative;z-index: 10;left:0px; width:100%; padding: 0px; margin:0px; border:0 none;font-family:arial,helvetica,sans-serif,verdana,'Open Sans' }
.introshade { position:absolute; Bottom:-22px}
#noscriptfeld { position:absolute; top:45%; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:38pt; font-weight:bold; width:100%; color:#cccccc }

/* Sehr große Screens */
@media only screen and (max-width: 1700px) {.cont_bg1 { position:absolute; z-index:1; width:80%; bottom:-300px; right:0px; height:auto; filter: alpha(opacity=80); opacity:0.8 } }

/* Sehr große Screens */
@media only screen and (max-width: 1230px) {
 
#header { position:relative; z-index:100; height:220px; width:100%; margin:0px auto }	
#head_cont { position:relative; margin:0px auto; width:100%; height:100% }   
#content1 { position:relative; z-index:20; text-align:left; width:100%; padding: 80px 30px 0 30px; box-sizing: border-box; margin:0px} 
#content2 { position:relative; z-index:20; text-align:center; width:100%; padding: 80px 30px 0 30px; box-sizing: border-box; margin:0px} 
    
.cont_bg1 { position:absolute; z-index:1; width:90%; bottom:-300px; right:0px; height:auto; filter: alpha(opacity=90); opacity:0.9 }
    
.image-box1 { width:100%; max-width:2000px; margin:auto; aspect-ratio:2000/600; background:#eee; position:relative; overflow:hidden; border:2px solid #ccc; border-radius:80px; }
    
/* Foot ---------------------------------------------------------------------- */
#foot{ position:relative; z-index:90; width:100%; height:300px; margin:0 auto; }
#foot_cont{ position:relative; top:0px; text-align:left; width:100%; height:270px; margin:0px auto }   
    
logo { position:absolute; top:5px; left:10px; width:210px; height:auto}
l-t1 { position:absolute; top:80px; left:240px; width:300px; height:auto}
l-t2 { position:absolute; top:120px; left:242px; width:300px; height:auto}
adrs { position:absolute; top:40px; right:20px; text-align:right; font-size:18px}
.txteff2 { position:absolute; z-index:100; top:150px; left:242px; overflow:hidden; width:500px; height:50px; display:flex; font-size:20px; }
    
ul[class^="svg-box"] li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; background-size: cover; background-position: center;}
}


/* 2. Bis 992px (Tablets quer / kleine Laptops) */
@media only screen and (max-width: 992px) {
    
#foot{ position:relative; z-index:90; width:100%; height:300px; margin:0 auto; 
       border-top: 4px solid transparent; -moz-border-image: -moz-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%); -webkit-border-image: -webkit-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%);
	   border-image: linear-gradient(to right, #666666 0%, #ffffff 20% 80%, #666666 100%); border-image-slice: 1;
       background: rgba(210,212,217,1);
       background: -moz-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(210,212,217,1)), color-stop(100%, rgba(157,157,163,1)));
       background: -webkit-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -o-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -ms-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: linear-gradient(to bottom, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d4d9', endColorstr='#9d9da3', GradientType=0 ); -webkit-box-shadow: 0px -8px 8px -2px rgba(120,120,120,1) }
    
#header { position:relative; z-index:100; height:180px; width:100%; margin:0px auto }
#head_cont { position:relative; margin:0px auto; width:100%; height:100% }   
#content1 { position:relative; z-index:20; text-align:left; width:100%; padding: 80px 15px 0 15px; box-sizing: border-box; margin:0px} 
#content2 { position:relative; z-index:20; text-align:center; width:100%; padding: 80px 15px 0 15px; box-sizing: border-box; margin:0px} 
#foot_cont{ position:relative; top:0px; text-align:left; width:100%; height:270px; margin:0px auto } 
    
#menu { position:relative; z-index:90; background:#D5D6D8; width:100%; height:auto; border-top:1.5px solid ; border-bottom:1.5px solid } 
#menu_cont { width:100%; height:auto; top:0px}
    
.cont_bg1 { position:absolute; z-index:1; width:80%; bottom:-2px; right:0px; height:auto; filter: alpha(opacity=80); opacity:0.8 } 
    
.image-box1 { width:100%; max-width:2000px; margin:auto; aspect-ratio:2000/600; background:#eee; position:relative; overflow:hidden; border:2px solid #ccc; border-radius:50px; }
    
logo { position:absolute; top:0px; left:0px; width:180px; height:auto}
l-t1 { position:absolute; top:60px; left:180px; width:240px; height:auto}
l-t2 { position:absolute; top:95px; left:182px; width:240px; height:auto}
adrs { position:absolute; top:20px; right:20px; text-align:right; font-size:16px}
.txteff2 { position:absolute; z-index:100; top:120px; left:182px; overflow:hidden; width:400px; height:40px; display:flex; font-size:18px; letter-spacing:-0.2px;}
    
ul[class^="svg-box"] li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; background-size: cover; background-position: center;} 
} 

/* 3. Bis 768px (Tablets hochkant / große Phones quer) */
@media only screen and (max-width: 768px) {

#foot{ position:relative; z-index:90; width:100%; height:350px; margin:0 auto; 
       border-top: 4px solid transparent; -moz-border-image: -moz-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%); -webkit-border-image: -webkit-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%);
	   border-image: linear-gradient(to right, #666666 0%, #ffffff 20% 80%, #666666 100%); border-image-slice: 1;
       background: rgba(210,212,217,1);
       background: -moz-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(210,212,217,1)), color-stop(100%, rgba(157,157,163,1)));
       background: -webkit-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -o-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -ms-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: linear-gradient(to bottom, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d4d9', endColorstr='#9d9da3', GradientType=0 ); -webkit-box-shadow: 0px -8px 8px -2px rgba(120,120,120,1) } 
    
#main { position:relative; overflow:hidden; width:100%; top:0px; margin:0px auto; } 
#header { position:relative; z-index:100; height:180px; width:100%; margin:0px auto }
#head_cont { position:relative; margin:0px auto; width:100%; height:100% }   
#content1 { position:relative; z-index:20; text-align:left; width:100%; padding: 80px 15px 0 15px; box-sizing: border-box; margin:0px} 
#content2 { position:relative; z-index:20; text-align:center; width:100%; padding: 80px 15px 0 15px; box-sizing: border-box; margin:0px} 
#foot_cont{ position:relative; top:0px; text-align:left; width:100%; height:320px; margin:0px auto }   
    
#menu { position:relative; z-index:90; background:#D5D6D8; width:100%; height:auto; border-top:1px solid ; border-bottom:1px solid } 
#menu_cont { width:100%; height:auto; top:0px} 
    
.cont_bg1 { position:absolute; z-index:1; width:90%; bottom:-2px; right:0px; height:auto; filter: alpha(opacity=80); opacity:0.8 } 
    
.image-box1 { width:100%; max-width:2000px; margin:auto; aspect-ratio:2000/600; background:#eee; position:relative; overflow:hidden; border:2px solid #ccc; border-radius:0px; }
    
logo { position:absolute; top:0px; left:0px; width:180px; height:auto}
l-t1 { position:absolute; top:50px; left:200px; width:240px; height:auto}
l-t2 { position:absolute; top:85px; left:202px; width:240px; height:auto}
adrs { display:none}
.txteff2 { position:absolute; z-index:100; top:110px; left:202px; overflow:hidden; width:400px; height:40px; display:flex; font-size:16px; letter-spacing:-0.4px;} 
    
ul[class^="svg-box"] li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; background-size: cover; background-position: center;} 
} 

/* 4. Bis 576px (Smartphones) */
@media only screen and (max-width: 576px) {

#foot{ position:relative; z-index:90; width:100%; height:450px; margin:0 auto; 
       border-top: 4px solid transparent; -moz-border-image: -moz-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%); -webkit-border-image: -webkit-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%);
	   border-image: linear-gradient(to right, #666666 0%, #ffffff 20% 80%, #666666 100%); border-image-slice: 1;
       background: rgba(210,212,217,1);
       background: -moz-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(210,212,217,1)), color-stop(100%, rgba(157,157,163,1)));
       background: -webkit-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -o-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -ms-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: linear-gradient(to bottom, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d4d9', endColorstr='#9d9da3', GradientType=0 ); -webkit-box-shadow: 0px -8px 8px -2px rgba(120,120,120,1) } 
    
#main { position:relative; overflow:hidden; width:100%; top:0px; margin:0px auto; } 
#header { position:relative; z-index:100; height:140px; width:100%; margin:0px auto }
#head_cont { position:relative; margin:0px auto; width:100%; height:100% }   
#content1 { position:relative; z-index:20; text-align:left; width:100%; padding: 80px 15px 0 15px; box-sizing: border-box; margin:0px} 
#content2 { position:relative; z-index:20; text-align:center; width:100%; padding: 80px 15px 0 15px; box-sizing: border-box; margin:0px} 
#foot_cont{ position:relative; top:0px; text-align:left; width:100%; height:420px; margin:0px auto }   
    
#menu { position:relative; z-index:90; background:#D5D6D8; width:100%; height:auto; border-top:1px solid ; border-bottom:1px solid } 
#menu_cont { width:100%; height:auto; top:0px}
    
.cont_bg1 { position:absolute; z-index:1; width:100%; bottom:-2px; right:0px; height:auto; filter: alpha(opacity=80); opacity:0.8 } 
    
.image-box1 { width:100%; max-width:2000px; margin:0px; background:#eee; position:relative; overflow:hidden; border:2px solid #ccc; border-radius:0px; }
    
logo { position:absolute; top:-10px; left:-10px; width:150px; height:auto}
l-t1 { position:absolute; top:40px; left:140px; width:200px; height:auto}
l-t2 { position:absolute; top:65px; left:142px; width:200px; height:auto}
adrs { display:none}
.txteff2 { position:absolute; z-index:100; top:80px; left:142px; overflow:hidden; width:400px; height:40px; display:flex; font-size:14px; letter-spacing:-0.5px}

ul[class^="svg-box"] li::before { content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; background-size: cover; background-position: center;} 
} 

/* 4. Bis 340px (Smartphones) */
@media only screen and (max-width: 340px) {

#foot{ position:relative; z-index:90; width:100%; height:600px; margin:0 auto; 
       border-top: 4px solid transparent; -moz-border-image: -moz-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%); -webkit-border-image: -webkit-linear-gradient(left, #666666 0%, #ffffff 20% 80%, #666666 100%);
	   border-image: linear-gradient(to right, #666666 0%, #ffffff 20% 80%, #666666 100%); border-image-slice: 1;
       background: rgba(210,212,217,1);
       background: -moz-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(210,212,217,1)), color-stop(100%, rgba(157,157,163,1)));
       background: -webkit-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -o-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: -ms-linear-gradient(top, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       background: linear-gradient(to bottom, rgba(210,212,217,1) 0%, rgba(157,157,163,1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d4d9', endColorstr='#9d9da3', GradientType=0 ); -webkit-box-shadow: 0px -8px 8px -2px rgba(120,120,120,1) } 
    
#main { position:relative; overflow:hidden; width:100%; top:0px; margin:0px auto; } 
#header { position:relative; z-index:100; height:140px; width:100%; margin:0px auto }
#head_cont { position:relative; margin:0px auto; width:100%; height:100% }   
#content1 { position:relative; z-index:20; text-align:left; width:100%; padding: 80px 15px 0 15px; box-sizing: border-box; margin:0px}  
#content2 { position:relative; z-index:20; text-align:center; width:100%; padding: 80px 15px 0 15px; box-sizing: border-box; margin:0px} 
#foot_cont{ position:relative; top:0px; text-align:left; width:100%; height:570px; margin:0px auto }   
    
#menu { position:relative; z-index:90; background:#D5D6D8; width:100%; height:auto; border-top:1px solid ; border-bottom:1px solid } 
#menu_cont { width:100%; height:auto; top:0px}
    
.cont_bg1 { position:absolute; z-index:1; width:100%; bottom:-2px; right:0px; height:auto; filter: alpha(opacity=80); opacity:0.8 } 
    
.image-box1 { width:100%; max-width:2000px; margin:0px; background:#eee; position:relative; overflow:hidden; border:2px solid #ccc; border-radius:0px; }
    
logo { position:absolute; top:-10px; left:-10px; width:150px; height:auto}
l-t1 { position:absolute; top:40px; left:140px; width:200px; height:auto}
l-t2 { position:absolute; top:65px; left:142px; width:200px; height:auto}
adrs { display:none}
.txteff2 { position:absolute; z-index:100; top:80px; left:142px; overflow:hidden; width:400px; height:40px; display:flex; font-size:14px; letter-spacing:-0.5px}
    
ul[class^="svg-box"] li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; background-size: cover; background-position: center;} 
}