@charset "utf-8";

:root {
  --color-primary: #CB4240;
  --color-secondary: #666666;
  --color-text: #333333;
  --color-bg: #ffffff;
  --color-border-light: #dddddd;
  --color-border-dark: #555555;
  --shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);
  --shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.1);
  --transition-fast: 0.3s ease;
  --font-base: var(--font-family-base);
  --parallax-base-offset: -500;
  --parallax-v-speed: 0.25;
  --parallax-h-speed: 0.3;
}

/* 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; }

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; }
body { background-color:var(--color-bg); font-family:var(--font-base); font-size:16px; color:var(--color-text); width:100%; height:100%; border:0 none; padding:0; margin:0; scroll-behavior:smooth; transition:filter var(--transition-fast); }
img { image-rendering:-webkit-optimize-contrast; max-width:100%; height:auto; }

/* Scrollbars */
* { scrollbar-width:thin; scrollbar-color:var(--color-primary) #f8f9fa; }
*::-webkit-scrollbar { width:15px !important; }
*::-webkit-scrollbar-track { background-color:transparent !important; }
*::-webkit-scrollbar-thumb { background-color:var(--color-primary) !important; border-radius:20px !important; border:1px solid #fff !important; }

/* Haupt-Container ========================= */
#site { position:relative; width:100%; background:rgba(252,252,252,1); overflow:hidden; }
#data1 { position:relative; top:0; z-index:5; width:100%; margin:0 auto; background:rgba(252,252,252,1); -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); }
#data2 { position:relative; z-index:2; width:100%; margin:0 auto; padding:100px 0; background-color:#fff; 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 var(--transition-fast); }
#data2-illing { position:relative; z-index:2; width:100%; margin:0 auto; padding:100px 0; background-color:#fff; 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 var(--transition-fast); }
.boxv1 { padding:200px 0 !important; }

/* Header & Branding ========================= */
logo1 { position:absolute; z-index:999; width:250px; height:auto; left:310px; top:20px; }
logo2 { position:absolute; z-index:999; width:280px; height:auto; left:10px; top:10px; }
adresse { position:absolute; z-index:100; top:20px; right:50px; text-align:right; font-size:16px; font-weight:400; line-height:20px; font-family:var(--font-base), sans-serif; color:#333; }
headinfo { position:absolute; z-index:100; top:14px; right:250px; text-align:left; font-size:16px; font-weight:400; line-height:20px; font-family:var(--font-base), sans-serif; color:#333; }
.headp1 { position:absolute; z-index:100; background:#fff; width:12px; height:12px; top:68px; left:310px; }
.headp2 { position:absolute; z-index:100; background:#fff; width:12px; height:12px; top:92px; left:310px; }
.txteff2 { position:absolute; z-index:100; top:85px; left:330px; overflow:hidden; width:400px; height:30px; display:flex; font-size:18px; font-family:var(--font-base); font-weight:500; color:#666; letter-spacing:0; }

#header { position:absolute; z-index:90; top:0; height:160px; width:100%; background:transparent; border-bottom:3px solid; border-image:linear-gradient(to right, #666666 0%, #ffffff 20% 80%, #666666 100%); border-image-slice:1; box-shadow:0 3px 5px rgba(0,0,0,0.5); }
#header::before { content:""; position:absolute; top:0; left:0; height:100%; width:100%; background-image:url(../layout/bg_head1.svg); background-repeat:no-repeat; background-size:100% 100%; opacity:0.8; z-index:-1; }

.headblock1 { position:absolute; display:flex; gap:0.5rem; z-index:100; top:60px; left:330px; }
.headtxt1 { position:relative; text-align:right; font-size:20px; font-weight:500; font-family:var(--font-base); color:#666; }
.txteff1 { position:relative; width:300px; font-size:20px; font-weight:500; font-family:var(--font-base); color:#666; letter-spacing:0; }
.infobox1 { overflow:hidden; background:linear-gradient(135deg, rgba(255,230,230,0.9), rgba(255,210,210,0.9)); padding:20px; border-radius:12px; box-shadow:var(--shadow-soft); border:1px solid rgba(255,100,100,0.3); backdrop-filter:blur(2px); width:100%; }

/* Content Wrapper ========================= */
#content1 { position:relative; z-index:10; text-align:center; width:1400px; padding:100px 0 0 0; margin:0 auto; }
#content2 { position:relative; z-index:10; text-align:left; width:1400px; padding:100px 0 0 0; margin:0 auto; }
.cont_bg1 { position:absolute; z-index:-1; width:100%; bottom:-260px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
.cont_bg2 { position:absolute; z-index:-1; width:100%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=100); opacity:1; }
.cont_bg3 { position:absolute; z-index:-1; width:80%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
.cont_bg4 { position:absolute; z-index:-1; width:80%; bottom:-260px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
.cont_bg5 { position:absolute; z-index:-1; width:60%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=60); opacity:0.6; }
.bg-aligned { display:block; margin-left:auto; margin-right:0; }

/* Footer ========================= */
#foot { position:relative; z-index:100; width:100%; height:260px; overflow:hidden; border-top:2px solid transparent; border-image:linear-gradient(to right, var(--color-border-dark) 0%, var(--color-border-light) 20%, var(--color-border-light) 80%, var(--color-border-dark) 100%) 1; background:url(../layout/bg_foot1.svg) no-repeat center/cover; box-shadow:1px 1px 12px rgba(0,0,0,0.7); }
#foot-cont { position:relative; text-align:left; width:100%; height:260px; z-index:95; }
#lineCanvas { position:absolute; z-index:90; opacity:0.95; top:0; left:0; width:100%; height:100%; pointer-events:none; }

/* Icon Layouts ========================= */
.ihead1  { width:22px; height:auto; padding-right:5px; position:relative; top:4px; }
.ihead2  { width:22px; height:17px; padding-right:5px; position:relative; top:5px; }
.ikont1 { width:30px; height:auto; padding-right:6px; position:relative; top:6px; }
.punkt1 { width:25px; height:auto; padding-right:6px; position:relative; top:1px; }
.qinfo1 { position:absolute; z-index:10; bottom:-100px; width:450px; height:auto; left:50px; }

/* Glass Panel ========================= */
.glass-container { width:100%; height:80px; margin:120px 0; background:rgba(255,255,255,0.2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 8px 32px rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; padding:20px; }
.glass-textbox { font-family:var(--font-base); color:#fff; font-size:32px; font-weight:bold; text-align:center; text-shadow:2px 2px 2px rgba(0,0,0,0.6); }

/* Listen & Marker ========================= */
ul:is([class^="marker"], [class^="svg-box"]) { --icon-size:24px; --icon-top:4px; --gap:16px; }
ul:is([class^="marker"], [class^="svg-box"]) li { position:relative; padding-left:calc(var(--icon-size) + var(--gap)); }
ul:is([class^="marker"], [class^="svg-box"]) li::before { content:""; position:absolute; left:0; top:var(--icon-top); width:var(--icon-size); height:var(--icon-size); background-size:cover; background-position:center; }
ul.marker01r li::before { background-image:url('../layout/icons/hand_r3.svg'); }
ul.marker02r li::before { background-image:url('../layout/icons/tools_r1.svg'); }
ul.marker03r li::before { background-image:url('../layout/icons/hand_r2.svg'); }
ul.marker04r li::before { background-image:url('../layout/icons/men_r1.svg'); }
ul.marker05r li::before { background-image:url('../layout/icons/ok2r.svg'); }
ul.marker06r li::before { background-image:url('../layout/icons/zahnrad_r2.svg'); }
ul.marker07r li::before { background-image:url('../layout/icons/no1r.svg'); }
ul.marker01b li::before { background-image:url('../layout/icons/hand_b3.svg'); }
ul.marker02b li::before { background-image:url('../layout/icons/tools_b1.svg'); }
ul.marker03b li::before { background-image:url('../layout/icons/zahnrad_b2.svg'); }
ul.marker04b li::before { background-image:url('../layout/icons/men_b1.svg'); }
ul.marker05b li::before { background-image:url('../layout/icons/hand_b2.svg'); }
ul.marker06b li::before { background-image:url('../layout/icons/ok2a.svg'); }
ul.marker07b li::before { background-image:url('../layout/icons/no1a.svg'); }
ul.svg-box1 li::before { background-image:url('../layout/square1a.svg'); }
ul.svg-box2 li::before { background-image:url('../layout/square1r.svg'); }
ul[class^="marker"] li span { padding-left:5px; }
ul[class^="svg-box"] li span { padding-left:5px; }
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:18px; font-weight:700; }

/* Linien ========================= */
hr { border:none; border-top:2px solid #666; width:100%; }
hr1 { display:block; top:0; width:100%; height:1px; background:#e11e1a; }
hr2 { display:block; top:0; width:100%; height:1px; background:#e11e1a; }

/* Bilder ========================= */
.thempic1 { position:relative; width:100%; height:auto; -moz-box-shadow:0px 2px 8px #666; -webkit-box-shadow:0px 2px 8px #666; box-shadow:0px 2px 8px #666; }
.thempic2 { position:relative; width:100%; height:auto; -moz-box-shadow:0px 2px 8px #666; -webkit-box-shadow:0px 2px 8px #666; box-shadow:0px 2px 8px #666; border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; }
.thempic3 { position:relative; width:100%; height:auto; }
.pictop { top:5px; }
.pic1 { position:relative; width:100%; height:auto; }
.pic2 { position:relative; width:100%; height:auto; -moz-box-shadow:0px 2px 8px #333; -webkit-box-shadow:0px 2px 8px #333; box-shadow:0px 2px 8px #333; border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; }
.logo_aw { position:relative; width:300px; height:auto; left:-20px; }

/* Abstände ========================= */
.abstand1 { line-height:100px; }
.abstand2 { line-height:200px; }
.abstand3 { line-height:400px; }
.abstand4 { line-height:500px; }

/* Flexbox Helfer ========================= */
.flexbox1 { position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; justify-content:center; margin:0 -4px -4px 0; }
.flexbox2 { position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; justify-content:flex-start; margin:0 -4px -4px 0; }

/* Auswahl Boxen ========================= */
*,*::before,*::after{box-sizing:border-box;}
.auswahl-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:30px;padding:20px;width:100%;max-width:1200px;margin:0 auto;overflow-x:hidden;}
.auswahl{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;background:#fff;border-radius:12px;box-shadow:var(--shadow-soft);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s;min-width:0;}
.auswahl:hover{transform:translateY(-4px);}
.auswahl-title{margin:16px 0 8px;font-size:24px;font-weight:bold;text-align:center;color:var(--color-primary);max-width:100%;overflow-wrap:anywhere;word-break:break-word;}
.auswahl-bild{position:relative;width:calc(100% - 30px);margin:0 10px;box-sizing:border-box;overflow:hidden;min-width:0;}
.auswahl-bild img{width:100%;height:auto;display:block;border-radius:12px;transition:transform .3s ease,filter .3s ease;max-width:100%;}
.auswahl-bild:hover img{transform:scale(1.05);filter:contrast(1.3) brightness(1.05);}
.auswahl-bild::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 15px rgba(0,0,0,.5);pointer-events:none;transition:box-shadow .3s ease;}
.auswahl-bild:hover::after{box-shadow:inset 0 0 20px rgba(0,0,0,.6);}
.auswahl-text{margin:8px 16px 16px;font-size:16px;color:#555;text-align:justify;hyphens:auto;max-width:100%;overflow-wrap:anywhere;word-break:break-word;}
.auswahl a{max-width:100%;overflow-wrap:anywhere;word-break:break-word;}
@media (max-width:768px){.auswahl-container{gap:15px;padding:15px;}.auswahl-title{font-size:20px;margin:12px 0 6px;}.auswahl-text{font-size:.9rem;margin:6px 12px 12px;}}
@media (max-width:575px){.auswahl-container{gap:10px;padding:10px;}.auswahl-title{font-size:18px;margin:8px 0 4px;}.auswahl-text{font-size:.85rem;margin:4px 8px 8px;}}
@media (max-width:400px){.auswahl-container{grid-template-columns:1fr;gap:8px;padding:8px;}.auswahl{border-radius:10px;padding-bottom:14px;}.auswahl-title{font-size:16px;margin:6px 0 3px;}
                         .auswahl-bild{width:calc(100% - 16px);margin:0 8px;}.auswahl-bild img,.auswahl-bild::after{border-radius:10px;}.auswahl-text{display:none;}}

.image-box1 { width:100%; max-width:2000px; margin:auto; aspect-ratio:2000/600; border:2px solid #ccc; background:#eee; position:relative; overflow:hidden; -moz-box-shadow:0px 2px 8px #333; -webkit-box-shadow:0px 2px 8px #333; box-shadow:0px 2px 8px #333; border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; }
.image-box1 img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity 2s ease-in-out; }
.image-box1 img.active { opacity:1; }

/* Media Boxen ========================= */
.media-link { text-decoration:none; color:inherit; display:block; width:100%; }
.media-box { display:flex; gap:20px; border-radius:12px; padding:16px; margin-bottom:40px; background-color:#fff; width:100%; box-shadow:var(--shadow-strong); box-sizing:border-box; transition:box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease; flex-wrap:wrap; align-items:flex-start; }
.media-box:hover { box-shadow:0 2px 4px rgba(0,0,0,0.3); transform:translateY(3px); background-color:#eee; }
.media-image { flex:0 0 400px; position:relative; }
.media-image img { width:100%; height:auto; object-fit:cover; border-radius:12px; display:block; }
.media-image::after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:12px; pointer-events:none; box-shadow:inset 0 0 20px rgba(0,0,0,0.5); }
.media-pfeil1 { position:absolute; width:120px; height:auto; top:30px; left:-28px; }
.shimmer2 { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; pointer-events:none; border-radius:12px; }
.shimmer2::before { content:""; position:absolute; top:0; left:-150%; width:150%; height:100%; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%); transform:skewX(-25deg); opacity:0; }
@keyframes shimmer2 { 0% { transform:translateX(-150%) skewX(-25deg); opacity:0; } 50% { opacity:1; } 100% { transform:translateX(150%) skewX(-25deg); opacity:0; } }
.animate-shimmer2::before { animation:shimmer2 2s ease-in-out forwards; }
.media-box:hover .media-image img { filter:brightness(1.1) contrast(1.2); }
.media-box:hover .media-image::after { box-shadow:inset 0 0 15px rgba(0,0,0,0.4); }
.media-content { flex:1; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-start; }
.media-content h2 { text-align:left; font-size:26px; font-weight:bold; color:var(--color-primary); margin:10px 0 10px; order:0; }
.media-content p { margin:0; order:1; font-size:22px; font-weight:500; color:#666; text-align:justify; }
media-content more { font-size:22px; font-weight:500; color:#999; }
.media-content:hover more { font-size:22px; font-weight:500; color:var(--color-primary); }

@media (max-width:1400px) { 
.media-content h2 { font-size:24px } 
.media-content p { margin:0; order:1; font-size:20px; font-weight:500; color:#666; text-align:justify } 
media-content more { font-size:20px }
.media-content:hover more { font-size:20px; }
    
}
@media (max-width:1199px) { 
.media-content h2 { font-size:22px } 
.media-content p { margin:0; order:1; font-size:18px; font-weight:500; color:#666; text-align:justify }
media-content more { font-size:18px }
.media-content:hover more { font-size:18px; }
.media-pfeil1 { position:absolute; width:100px; height:auto; top:30px; left:-28px; }
}
@media (max-width:991px) { 
.media-content h2 { font-size:20px } 
.media-content p { margin:0; order:1; font-size:16px; font-weight:500; color:#666; text-align:justify } 
 media-content more { font-size:16px } 
.media-content:hover more { font-size:16px; }
.media-pfeil1 { position:absolute; width:100px; height:auto; top:30px; left:-28px; }
}
@media (max-width:768px) { 
.media-box { flex-direction:column; align-items:flex-start; text-align:center; } 
.media-image { flex:0 0 auto; width:100%; } 
.media-image img { width:100%; height:auto; } 
.media-content h2 { order:0; font-size:22px; width:100%; margin-bottom:10px; text-align:center; } 
.media-content p { order:2; font-size:18px; width:100%; margin-top:10px; text-align:left; } .shimmer2, .media-image::after { display:none; } 
media-content more { font-size:18px }
.media-content:hover more { font-size:18px; }
.media-pfeil1 { position:absolute; width:120px; height:auto; top:50px; left:-28px; }
}
@media (max-width:575px) { 
.media-box { display:flex; gap:10px; border-radius:12px; padding:10px; margin-bottom:20px; background-color:#fff; width:100%; box-shadow:var(--shadow-strong); box-sizing:border-box; transition:box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease; flex-wrap:wrap; align-items:flex-start; }
.media-content h2 { order:0; font-size:16px; width:100%; margin-bottom:10px; text-align:center; } 
.media-content p { display:none } .shimmer2, .media-image::after { display:none; } 
.media-pfeil1 { display:none}
}

/* Intro ========================= */
#intro { position:relative; width:100%; height:auto; padding:0; margin:0; font-family:'Open Sans', sans-serif; }
#noscriptfeld { position:absolute; top:120px; text-align:center; font-family:var(--font-base); font-size:20pt; font-weight:bold; width:100%; color:#666; }
#noscriptdia { position:absolute; top:120px; text-align:center; font-family:var(--font-base); font-size:20pt; font-weight:bold; width:100%; color:#666; }

/* Tabellen / Sprechstunden ========================= */
.sprechstunden1 { position:relative; max-width:1000px; background-color:rgba(255,255,255,0.5); border-radius:20px; box-shadow:var(--shadow-soft); padding:40px 20px; margin:20px auto; display:flex; flex-direction:column; align-items:center; border:0; border-spacing:0; border-collapse:collapse; }
.sprechstunden1 hr { border:none; border-top:2px solid #888; width:80%; }
.sprechstunden2 { position:relative; width:100%; max-width:700px; text-align:left; border:0; border-spacing:0; border-collapse:collapse; }
.box_zeiten1 { position:relative; width:100%; max-width:600px; margin:0 auto; text-align:left; font-family:var(--font-base); font-size:24px; color:#333; }
.box_zeiten2 { position:relative; width:100%; max-width:800px; text-align:left; font-family:var(--font-base); font-size:24px; color:#333; }
.tb1 { width:100%; border-collapse:collapse; }
.tb1a, .tb1c { padding:4px; text-align:center; }
.tb1b { text-align:center; width:40px; }
.zeiten1 { position:relative; top:8px; width:30px; height:30px; }

/* Karten (Map) ========================= */
#map { position:relative; width:80%; height:400px; border-radius:16px; 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:'Open Sans', sans-serif; margin:0 auto; transition:height var(--transition-fast); }
#map2 { position:relative; width:80%; height:400px; border-radius:16px; 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:'Open Sans', sans-serif; margin:0 auto; transition:height var(--transition-fast); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { font-family:'Open Sans', sans-serif; }
.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:'Open Sans', sans-serif; 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); }

/* Effekte & Animationen ========================= */
@-webkit-keyframes slide_box1 { 0% { top:60px; opacity:0; } 100% { top:0; opacity:1; } }
@-moz-keyframes slide_box1 { 0% { top:60px; opacity:0; } 100% { top:0; opacity:1; } }
@keyframes slide_box1 { 0% { top:60px; opacity:0; } 100% { top:0; opacity:1; } }
@-webkit-keyframes slide_box2 { 0% { opacity:0; } 100% { opacity:0.9; } }
@-moz-keyframes slide_box2 { 0% { opacity:0; } 100% { opacity:0.9; } }
@keyframes slide_box2 { 0% { opacity:0; } 100% { opacity:0.9; } }
@-webkit-keyframes rubrik { 0% { top:-100px; opacity:0; } 100% { top:-40px; opacity:1; } }
@-moz-keyframes rubrik { 0% { top:-100px; opacity:0; } 100% { top:-40px; opacity:1; } }
@keyframes rubrik { 0% { top:-100px; opacity:0; } 100% { top:-40px; opacity:1; } }
.slide_eff1 { position:relative; -webkit-animation-name:slide_box1; -webkit-animation-duration:3s; -moz-animation-name:slide_box1; -moz-animation-duration:3s; animation-name:slide_box1; animation-duration:3s; }
.slide_eff2 { position:relative; -webkit-animation-name:rubrik; -webkit-animation-duration:2s; -moz-animation-name:rubrik; -moz-animation-duration:2s; animation-name:rubrik; animation-duration:2s; }
.alpha1 { position:relative; -webkit-animation-name:slide_box2; -webkit-animation-duration:3s; -moz-animation-name:slide_box2; -moz-animation-duration:3s; animation-name:slide_box2; animation-duration:3s; }
.thema1 { -webkit-transition:all 0.5s ease; -moz-transition:all 0.6s ease; -o-transition:all 0.6s ease; -ms-transition:all 0.6s ease; transition:all 0.6s ease; }
.thema1:hover { -webkit-transform:translate(0,-20px); transform:translate(0,-20px); }
.thema1:hover .mini { opacity:0.9; -webkit-animation-name:slide_box2; -webkit-animation-duration:1s; -moz-animation-name:slide_box2; -moz-animation-duration:1s; animation-name:slide_box2; animation-duration:1s; }
.text-content { position:absolute; opacity:0; transform:translateX(-100%); animation:textChange 25s infinite; }
@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; } }
.txteff1 span:nth-child(1) { animation-delay:0s; }
.txteff1 span:nth-child(2) { animation-delay:5s; }
.txteff1 span:nth-child(3) { animation-delay:10s; }
.txteff1 span:nth-child(4) { animation-delay:15s; }
.txteff1 span:nth-child(5) { animation-delay:20s; }
.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); }

/* Parallax ========================= */
.vp-box1 { position:relative; width:100%; height:500px; margin:0; overflow:hidden; border-radius:8px; border:1px solid #ddd; box-shadow:0 4px 10px rgba(0,0,0,0.2); }
.vp-bg1 img { position:absolute; top:0; left:0; width:100%; height:160%; object-fit:cover; will-change:transform; z-index:0; }
.vp-box1::before { content:""; position:absolute; inset:0; border-radius:8px; box-shadow:inset 0 0 20px rgba(0,0,0,0.5); pointer-events:none; z-index:1; }


.hp-bg1 img { position:absolute; top:0; left:0; width:150%; height:100%; object-fit:cover; will-change:transform; z-index:0; }
.hp-box1::before { content:""; position:absolute; inset:0; border-radius:8px; box-shadow:inset 0 0 30px rgba(0,0,0,0.9); pointer-events:none; z-index:1; }
#dreiecke-canvas { position:absolute; top:0; left:0; width:100%; height:300px; }

/* Laptops & kleinere Desktops (1400px)------------------------------------------------------------------------------------------ */
@media (max-width: 1399px) {
#header { position:relative; top:0px; height:140px; width:100% } 
logo1 { position:absolute; width:230px; height:auto; left:270px; top:20px; }
logo2 { position:absolute; width:230px; height:auto; left:10px; top:10px; }
adresse { position:absolute; top:20px; right:50px; text-align:right; font-size:16px; font-weight:400; line-height:20px }
headinfo { position:absolute; top:14px; right:230px; text-align:left; font-size:16px; font-weight:400; line-height:5px }
.headp1 { position:absolute; width:12px; height:12px; top:67px; left:270px; }
.headp2 { position:absolute; width:12px; height:12px; top:90px; left:270px; }
.txteff2 { position:absolute; top:85px; left:290px; width:400px; height:30px; font-size:16px; letter-spacing:0; }
.headblock1 { position:absolute; display:flex; gap:0.5rem; top:60px; left:290px }
.headtxt1 { position:relative; text-align:right; font-size:18px }
.txteff1 { position:relative; width:300px; font-size:18px; letter-spacing:0 }
    
.vp-box1 { position:relative; width:100%; height:500px; margin:0;  }
.vp-bg1 img { position:absolute; top:0; left:0; width:100%; height:160%;  }
    
#content1 { position:relative; z-index:10; text-align:center; width:100%; padding: 80px 30px 0 30px; box-sizing: border-box; margin:0px} 
#content2 { position:relative; z-index:10; text-align:left; width:100%; padding: 80px 30px 0 30px; box-sizing: border-box; margin:0px} 
    
.punkt1 { width:22px; height:auto; padding-right:6px; position:relative; top:0px; }
    
ul:is([class^="marker"], [class^="svg-box"]) { --icon-size:22px; --icon-top:2px; --gap:12px; }
}


/* Laptops & kleinere Desktops (992px – 1199px) */
@media (max-width: 1199px) {
#header { position:relative; top:0px; height:140px; width:100% } 
logo1 { position:absolute; width:220px; height:auto; left:250px; top:20px; }
logo2 { position:absolute; width:220px; height:auto; left:10px; top:10px; }
adresse { position:absolute; top:20px; right:50px; text-align:right; font-size:16px; font-weight:400; line-height:20px }
headinfo { display:none }
.headp1 { position:absolute; width:12px; height:12px; top:67px; left:250px; }
.headp2 { position:absolute; width:12px; height:12px; top:90px; left:250px; }
.txteff2 { position:absolute; top:85px; left:270px; width:400px; height:30px; font-size:16px; letter-spacing:0; }
.headblock1 { position:absolute; display:flex; gap:0.5rem; top:60px; left:270px }
.headtxt1 { position:relative; text-align:right; font-size:18px }
.txteff1 { position:relative; width:300px; font-size:18px; letter-spacing:0 }
    
#content1 { position:relative; z-index:10; text-align:center; width:100%; padding: 80px 30px 0 30px; box-sizing: border-box; margin:0px} 
#content2 { position:relative; z-index:10; text-align:left; width:100%; padding: 80px 30px 0 30px; box-sizing: border-box; margin:0px} 
.cont_bg1 { position:absolute; z-index:-1; width:100%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
.cont_bg4 { position:absolute; z-index:-1; width:80%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }  
    
.sprechstunden1 { position:relative; max-width:90%;  border-radius:20px; padding:30px 10px; margin:20px auto; }
.sprechstunden1 hr { border:none; border-top:2px solid #888; width:90%; }
.box_zeiten1 { position:relative; width:100%; max-width:500px; margin:0 auto; font-size:22px; }
.zeiten1 { position:relative; top:8px; width:30px; height:30px; }
    
.vp-box1 { position:relative; width:100%; height:500px; margin:0; overflow:hidden; border-radius:8px; }
.vp-bg1 img { position:absolute; top:0; left:0; width:100%; height:170%;  }
    
.glass-container { width:100%; height:120px; margin:120px 0;  padding:20px }
.glass-textbox { font-size:26px; text-shadow:2px 2px 2px rgba(0,0,0,0.6) }
   
.qinfo1 { position:absolute; z-index:10; bottom:-80px; width:400px; height:auto; left:30px; }
.ikont1 { position:relative; top:6px; padding-right:6px; width:25px; height:auto; } 
.punkt1 { width:20px; height:auto; padding-right:6px; position:relative; top:0px; }
    
#foot { position:relative; z-index:100; width:100%; height:350px; border-top:2px solid transparent;  background:url(../layout/bg_foot1.svg) no-repeat center/cover; box-shadow:1px 1px 12px rgba(0,0,0,0.7); }
#foot-cont { position:relative; text-align:left; width:100%; height:350px; z-index:95; }
#lineCanvas { position:absolute; z-index:90; opacity:0.95; top:0; left:0; width:100%; height:100%; pointer-events:none; }
    
ul:is([class^="marker"], [class^="svg-box"]) { --icon-size:20px; --icon-top:2px; --gap:12px; }
}

/* Tablets (quer) & große Tablets (768px – 991px) */
@media (max-width: 991px) {
#header { position:relative; top:0px; height:110px; width:100% } 
logo1 { position:absolute; width:220px; height:auto; left:220px; top:10px; }
logo2 { position:absolute; width:200px; height:auto; left:6px; top:5px; }
adresse { position:absolute; top:10px; right:30px; text-align:right; font-size:15px; font-weight:400; line-height:20px }
headinfo { display:none }
.headp1 { position:absolute; width:12px; height:12px; top:56px; left:220px; }
.headp2 { position:absolute; width:12px; height:12px; top:79px; left:220px; }
.txteff2 { position:absolute; top:75px; left:240px; width:400px; height:30px; font-size:15px; letter-spacing:0; }
.headblock1 { position:absolute; display:flex; gap:0.3rem; top:50px; left:240px }
.headtxt1 { position:relative; text-align:right; font-size:17px }
.txteff1 { position:relative; width:250px; font-size:17px; letter-spacing:0 }
    
#data2 { position:relative; z-index:2; width:100%; margin:0 auto; padding:70px 0;  box-shadow:inset 0 10px 10px -10px rgba(0,0,0,1);  }
#data2-illing { position:relative; z-index:2; width:100%; margin:0 auto; padding:70px 0; box-shadow:inset 0 10px 10px -10px rgba(0,0,0,1);}
    
#map { position:relative; width:90%; height:400px; border-radius:16px; }
#map2 { position:relative; width:90%; height:400px; border-radius:16px; }
    
.vp-box1 { position:relative; width:100%; height:400px; margin:0; overflow:hidden; border-radius:8px }
.vp-bg1 img { position:absolute; top:220px; left:0; width:100%; height:140%  }
    
.boxv1 { padding:180px 0 !important; }
.glass-container { width:100%; height:140px; margin:120px 0;  padding:20px }
.glass-textbox { font-size:24px; text-shadow:2px 2px 2px rgba(0,0,0,0.6) }
    
#content1 { position:relative; z-index:10; text-align:center; width:100%; padding: 80px 20px 0 20px; box-sizing: border-box; margin:0px} 
#content2 { position:relative; z-index:10; text-align:left; width:100%; padding: 80px 20px 0 20px; box-sizing: border-box; margin:0px}    
.cont_bg1 { position:absolute; z-index:-1; width:100%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
.cont_bg4 { position:absolute; z-index:-1; width:80%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
    
.sprechstunden1 { position:relative; max-width:90%;  border-radius:20px; padding:20px 10px; margin:10px auto; }
.sprechstunden1 hr { border:none; border-top:2px solid #888; width:95%; }
.box_zeiten1 { position:relative; width:100%; max-width:400px; margin:0 auto; font-size:20px; }
.zeiten1 { position:relative; top:8px; width:25px; height:25px; }

.qinfo1 { position:absolute; z-index:10; bottom:-80px; width:350px; height:auto; left:30px; }
.ikont1 { position:relative; top:4px; padding-right:6px; width:25px; height:auto; }   
.punkt1 { width:20px; height:auto; padding-right:6px; position:relative; top:1px; }
    
#foot { position:relative; z-index:100; width:100%; height:500px; border-top:2px solid transparent;  background:url(../layout/bg_foot1.svg) no-repeat center/cover; box-shadow:1px 1px 12px rgba(0,0,0,0.7); }
#foot-cont { position:relative; text-align:left; width:100%; height:500px; z-index:95; }
#lineCanvas { position:absolute; z-index:90; opacity:0.95; top:0; left:0; width:100%; height:100%; pointer-events:none; }  
    
ul:is([class^="marker"], [class^="svg-box"]) { --icon-size:18px; --icon-top:3px; --gap:10px; }
}

/* Tablets (hochkant) & große Smartphones (576px – 767px) */
@media (max-width: 767px) {
#header { position:relative; top:0px; height:90px; width:100% } 
logo1 { position:absolute; width:180px; height:auto; left:200px; top:10px; }
logo2 { position:absolute; width:170px; height:auto; left:6px; top:0px; }
adresse { display:none }
headinfo { display:none }
.headp1 { position:absolute; width:10px; height:10px; top:46px; left:200px; }
.headp2 { position:absolute; width:10px; height:10px; top:64px; left:200px; }
.txteff2 { position:absolute; top:60px; left:220px; width:300px; height:30px; font-size:14px; letter-spacing:-0.5px; }
.headblock1 { position:absolute; display:flex; gap:0.3rem; top:40px; left:220px }
.headtxt1 { position:relative; text-align:right; font-size:16px }
.txteff1 { position:relative; width:200px; font-size:16px; letter-spacing:0 }
    
#data2 { position:relative; z-index:2; width:100%; margin:0 auto; padding:50px 0;  box-shadow:inset 0 10px 10px -10px rgba(0,0,0,1);  }
#data2-illing { position:relative; z-index:2; width:100%; margin:0 auto; padding:50px 0; box-shadow:inset 0 10px 10px -10px rgba(0,0,0,1);}
    
#map { position:relative; width:90%; height:350px; border-radius:16px; }
#map2 { position:relative; width:90%; height:350px; border-radius:16px; }
    
.vp-box1 { position:relative; width:100%; height:350px; margin:0; overflow:hidden; border-radius:8px;  }
.vp-bg1 img { position:absolute; top:220px; left:0; width:100%; height:150%;  }
    
.boxv1 { padding:150px 0 !important; }
.glass-container { width:100%; height:140px; margin:120px 0;  padding:20px }
.glass-textbox { font-size:22px; text-shadow:2px 2px 2px rgba(0,0,0,0.6) }
    
#content1 { position:relative; z-index:10; text-align:center; width:100%; padding: 80px 15px 0 15px; box-sizing: border-box; margin:0px} 
#content2 { position:relative; z-index:10; text-align:left; width:100%; padding: 80px 15px 0 15px; box-sizing: border-box; margin:0px} 
.cont_bg1 { position:absolute; z-index:-1; width:100%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
.cont_bg4 { position:absolute; z-index:-1; width:80%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
    
.sprechstunden1 { position:relative; max-width:90%;  border-radius:20px; padding:20px 10px; margin:10px auto; }
.sprechstunden1 hr { border:none; border-top:2px solid #888; width:90%; }
.box_zeiten1 { position:relative; width:100%; max-width:400px; margin:0 auto; font-size:18px; }
.zeiten1 { position:relative; top:8px; width:25px; height:25px; }
    
.qinfo1 { display:none }
.ikont1 { position:relative; top:3px; padding-right:6px; width:22px; height:auto; } 
.punkt1 { width:18px; height:auto; padding-right:6px; position:relative; top:0px; }
    
#foot { position:relative; z-index:100; width:100%; height:500px; border-top:2px solid transparent;  background:url(../layout/bg_foot1.svg) no-repeat center/cover; box-shadow:1px 1px 12px rgba(0,0,0,0.7); }
#foot-cont { position:relative; text-align:left; width:100%; height:500px; z-index:95; }
#lineCanvas { position:absolute; z-index:90; opacity:0.95; top:0; left:0; width:100%; height:100%; pointer-events:none; }    
  
ul:is([class^="marker"], [class^="svg-box"]) { --icon-size:16px; --icon-top:2px; --gap:10px; }  
}

/* Standard-Smartphones (575px) */
@media (max-width: 575px) {
#header { position:relative; top:0px; height:90px; width:100% } 
logo1 { position:absolute; width:160px; height:auto; left:170px; top:10px; }
logo2 { position:absolute; width:150px; height:auto; left:6px; top:0px; }
adresse { display:none }
headinfo { display:none }
.headp1 { position:absolute; width:10px; height:10px; top:46px; left:170px; }
.headp2 { position:absolute; width:10px; height:10px; top:64px; left:170px; }
.txteff2 { position:absolute; top:60px; left:185px; width:100%; height:30px; font-size:13px; letter-spacing:-1px; }
.headblock1 { position:absolute; display:flex; gap:0.1rem; top:40px; left:185px }
.headtxt1 { position:relative; text-align:right; font-size:14px }
.txteff1 { position:relative; width:100px; font-size:14px; letter-spacing:-1px }
    
#data2 { position:relative; z-index:2; width:100%; margin:0 auto; padding:50px 0;  box-shadow:inset 0 10px 10px -10px rgba(0,0,0,1);  }
#data2-illing { position:relative; z-index:2; width:100%; margin:0 auto; padding:50px 0; box-shadow:inset 0 10px 10px -10px rgba(0,0,0,1);}
    
.vp-box1 { position:relative; width:100%; height:300px; margin:0; overflow:hidden; border-radius:8px }
.vp-bg1 img { position:absolute; top:220px; left:0; width:100%; height:170% }
    
.boxv1 { padding:100px 0 !important; }
.glass-container { width:100%; height:130px; margin:120px 0;  padding:20px }
.glass-textbox { font-size:20px; text-shadow:2px 2px 2px rgba(0,0,0,0.6) }
    
#content1 { position:relative; z-index:10; text-align:center; width:100%; padding: 80px 10px 0 10px; box-sizing: border-box; margin:0px} 
#content2 { position:relative; z-index:10; text-align:left; width:100%; padding: 80px 10px 0 10px; box-sizing: border-box; margin:0px} 
.cont_bg1 { position:absolute; z-index:-1; width:100%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
.cont_bg4 { position:absolute; z-index:-1; width:80%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
    
#map { position:relative; width:90%; height:300px; border-radius:16px; }
#map2 { position:relative; width:90%; height:300px; border-radius:16px; }
    
.sprechstunden1 { position:relative; max-width:95%;  border-radius:20px; padding:20px 10px; margin:10px auto; }
.sprechstunden1 hr { border:none; border-top:2px solid #888; width:95%; }
.box_zeiten1 { position:relative; width:100%; max-width:400px; margin:0 auto; font-size:16px; }
.zeiten1 { position:relative; top:8px; width:25px; height:25px; }
    
.qinfo1 { display:none }
.ikont1 { position:relative; top:3px; padding-right:6px; width:22px; height:auto; }  
.punkt1 { width:18px; height:auto; padding-right:6px; position:relative; top:1px; }
    
#foot { position:relative; z-index:100; width:100%; height:540px; border-top:2px solid transparent;  background:url(../layout/bg_foot1.svg) no-repeat center/cover; box-shadow:1px 1px 12px rgba(0,0,0,0.7); }
#foot-cont { position:relative; text-align:left; width:100%; height:540px; z-index:95; }
#lineCanvas { position:absolute; z-index:90; opacity:0.95; top:0; left:0; width:100%; height:100%; pointer-events:none; }    
 
ul:is([class^="marker"], [class^="svg-box"]) { --icon-size:15px; --icon-top:2px; --gap:10px; }    
    
}

/* Kleine Smartphones / sehr kleine Displays (<= 400px) */
@media (max-width: 400px) {
#header { position:relative; top:0px; height:100px; width:100% } 
logo1 { position:absolute; width:140px; height:auto; left:6px; top:70px; }
logo2 { position:absolute; width:150px; height:auto; left:6px; top:0px; }
adresse { display:none }
headinfo { display:none }
.headp1 { display:none }
.headp2 { display:none }
.txteff2 { display:none }
.headblock1 { display:none }
.headtxt1 { display:none }
.txteff1 { display:none }
    
#data2 { position:relative; z-index:2; width:100%; margin:0 auto; padding:40px 0;  box-shadow:inset 0 10px 10px -10px rgba(0,0,0,1);  }
#data2-illing { position:relative; z-index:2; width:100%; margin:0 auto; padding:40px 0; box-shadow:inset 0 10px 10px -10px rgba(0,0,0,1);}
    
.vp-box1 { position:relative; width:100%; height:200px; margin:0; overflow:hidden; border-radius:8px }
.vp-bg1 img { position:absolute; top:250px; left:0; width:100%; height:190% }
    
.boxv1 { padding:50px 0 !important; }
.glass-container { width:100%; height:110px; margin:120px 0;  padding:20px }
.glass-textbox { font-size:18px; text-shadow:2px 2px 2px rgba(0,0,0,0.6) }
    
#content1 { position:relative; z-index:10; text-align:center; width:100%; padding: 80px 10px 0 10px; box-sizing: border-box; margin:0px} 
#content2 { position:relative; z-index:10; text-align:left; width:100%; padding: 80px 10px 0 10px; box-sizing: border-box; margin:0px} 
.cont_bg1 { position:absolute; z-index:-1; width:100%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
.cont_bg4 { position:absolute; z-index:-1; width:80%; bottom:-2px; right:0; height:auto; filter:alpha(opacity=80); opacity:0.8; }
    
#map { position:relative; width:92%; height:250px; border-radius:16px; }
#map2 { position:relative; width:92%; height:250px; border-radius:16px; }
    
.sprechstunden1 { position:relative; max-width:100%;  border-radius:20px; padding:20px 10px; margin:10px auto; }
.sprechstunden1 hr { border:none; border-top:2px solid #888; width:100%; }
.box_zeiten1 { position:relative; width:100%; max-width:300px; margin:0 auto; font-size:14px; }
.zeiten1 { position:relative; top:8px; width:20px; height:20px; }
    
.qinfo1 { display:none }
.ikont1 { position:relative; top:3px; padding-right:6px; width:20px; height:auto; } 
.punkt1 { width:16px; height:auto; padding-right:6px; position:relative; top:1px; }
    
#foot { position:relative; z-index:100; width:100%; height:560px; border-top:2px solid transparent;  background:url(../layout/bg_foot1.svg) no-repeat center/cover; box-shadow:1px 1px 12px rgba(0,0,0,0.7); }
#foot-cont { position:relative; text-align:left; width:100%; height:560px; z-index:95; }
#lineCanvas { display:none }
    
ul:is([class^="marker"], [class^="svg-box"]) { --icon-size:14px; --icon-top:2px; --gap:8px; }  
}