/* Allgemein ================================================================== */ :root { --bgcol-form: transparent; /* Hintergrundfarbe Kontaktformular */ --bordercol-form: transparent; /* Farbe des Rahmens um das Kontaktformular */ --footer-color: #666; /* Farbe der Schrift im Footer */ --color-list-item: #b30f30; /* Farbe eines Listen-Punktes */ --color-main-text: #555; /* Textfarbe */ --color-background: #f5f5f7; /* Hintegrundfarbe gesamte Website */ --color-menuitem: black; /* Farbe aktive Menuepunkte und Footer */ --color-menuitem-hoover: #999; /* Farbe aktive Menuepunkte und Footer Hoover*/ --color-title: black; /* Farbe Überschriften */ --button-font-size: 17px; /* Schriftgrösse in Buttons */ --color-main: #b30f30; /* hauptsächlich verwendete Farbe */ --header-height: 125px; /* Höhe der Header-Bereiches */ --menubar-height: 35px; /* Höhe des Menübalkens */ } /* height 102% to force a scrollbar to prevent page jumping */ html { height:102%; margin: 0 0 0 0; padding:0 0 0 0; scroll-behavior: smooth !important; } @media (max-width: 838px) { html { height:100%;} } /* * {margin:0;padding:0;} */ * {margin:0;} * {padding-top:0; padding-right:0; padding-bottom:0; } #background { width:100%; position: absolute; z-index: -1; top: 0; left:0; } #adminbar {visibility:hidden;height:25px;position:fixed;z-index:105;top:0;} #preload { display: none; } #preload img { height: 0; width: 0; border: none; position: absolute; bottom: 0; left: 0; z-index: -30; } @font-face { font-family: 'Poppins'; src: url("../site_fonts/Poppins-Regular.ttf") format("truetype"); } @font-face { font-family: 'Poppins-Bold'; src: url("../site_fonts/Poppins-Bold.ttf") format("truetype"); } @font-face { font-family: 'SF-Pro'; src: url("../site_fonts/SF-Pro.ttf") format("truetype"); } @font-face { font-family: 'Oswald'; src: url("../site_fonts/Oswald-Regular.ttf") format("truetype"); } .wichtig,.getinfo,.hide { display:none !important; } .show { display:block; } .block { text-align:justify; } .bold { font-weight: bold; } .normal { font-weight: normal; } .italic { font-style:italic; } .red { color: #b30f30; } .green { color: green; } .black { color: black; } .white { color: white; } .blue { color: blue; } .paypalblue { color: rgb(0,69,124); } /* Paypal blue */ .sbig { font-size: 110.01%; } .errmsg { color: #b5124b; font-weight: bold; } .grad img { height: 13px; width: 19px; border: 0; z-index: 0;} body[id="Administration"] #maincont_inner .errmsg { display:none; } body[id="Administration"] #maincont_inner div.textblock .errmsg { display:block; } .okmsg { color: green; font-weight: bold; } .filefmt { color: black; font-weight: normal; font-style:italic; } .aboutright { border: 0px solid blue; width:300px;margin-left:430px; } .aboutright2 { border: 0px solid blue; width:400px;margin-left:330px; } .aboutright3 { border: 0px solid blue; width:500px;margin-left:230px; } .tright { text-align:right; } .eeven { background-color:#eeeeee; } .thbg { background-color:#dddddd;padding-left:10px; } .delfile { width:600px; border: 0px solid blue; } .upld { width:400px; border: 0px solid blue; } .outlined { border: 2px solid #6F6F6F; } .frame_left, .left { text-align:left; float:left; margin: 15px 20px 20px 0px;} .frame_right, .right, .frame_right_mob { text-align:right; float:right; margin: 15px 0px 20px 20px;} .frame_center, .center { text-align:center; margin: 15px 0px 20px 0px;} .termin { text-align: center; } @media (max-width: 838px) {.frame_right_mob { text-align:left; float:left; margin: 15px 0px 20px 0px;}} #map_canvas { width:50%;height:300px; } @media (max-width: 838px) { #map_canvas { width:100%;height:300px; }} body { margin: 0; padding: 0; font: 17px SF-Pro, Verdana, arial, helvetica, sans-serif; color: var(--color-main-text); background-color: var(--color-background); text-align: center; font-weight:400; line-height:1.3em; } div { text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */} h1, h2, h3, .h2, .h3 {font-weight: normal; background-color:transparent;color: var(--color-title); /*dunkelgrau*/ font-family: Poppins, Verdana, arial, helvetica, sans-serif; line-height:1;} h1 {font-size: 140.01%; font-size: 2.25em; letter-spacing: .1em; padding-bottom:15px; font-weight:800; padding-top:20px; font-family: Poppins; text-align:center;} h2, .h2 {font-size: 130.01%; font-size: 1.75em; letter-spacing: .05em; line-height: 1.3; font-family: Poppins; font-weight:600; margin-bottom:10px;} h3, .h3 {font-size: 0.875rem; padding-bottom:7px; letter-spacing: 1px; font-family: Poppins; font-weight:600; color: var(--color-main); text-transform: uppercase;} h4 {font-size: 110.01%; padding-bottom:7px; letter-spacing: .05em; color:black; font-weight:600;} a {background-color:transparent;color:var(--color-main); outline: none; font-weight: 600;} a[rel~="external"]::after {content: ' \f08e';font-family:'FontAwesome';text-decoration:none;vertical-align:super;font-size:9px;} p {margin-bottom: 15px; } img {border: 0; } ul > li::marker {color:var(--color-list-item);} br {clear: left;} hr {position:relative;clear:both;} @media (max-width: 904px) { h1 {font-size:2.05em; } h2 {font-size:1.35em; }} @media (max-width: 565px) { h1 {font-size:1.35em; } h2 {font-size:1.25em; }} @media (max-width: 390px) { h1 {font-size:1.15em; } h2 {font-size:1.05em; }} @media (max-width: 325px) { h1 {font-size:1.1em; } h2 {font-size:1.0em; }} #container { margin: 0 auto; margin-top: 0px; background: transparent;} #slidecont {top: -50px;} * html #container {height:1%; } #scroll { font-size: 1px; } .gesamt_breite_aussen { width: 1024px; min-width: 320px; } .dynamic .gesamt_breite_aussen { width: 100%; min-width: 320px;} .inner_width { width: 924px; } /* innerer Platz des Containers: gesamt_breite_aussen - rahmen dicke */ .dynamic .inner_width { width: 90%; } @media (max-width: 910px) {.dynamic .inner_width { width: 100%; }} /* ############################ [Rahmen-Definitionen] ######################### */ /* Rahmen: Breite */ /* hier rahmen breite links und rechts einstellen */ .left_border_width { margin-left: 0px; } .right_border_width { margin-right: 0px; } .border_high { height: 0px; } .border_corner_width{ width: 0px; } #wrap_header_area {} #wrap_main_and_left { background-color: var(--color-background); border: 0px solid #dddddd;} /* clearfix zum Aufheben der Floatumgebung */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ .header_mid_high { height: var(--header-height); } #header1 { position:fixed; width:100%; z-index:90; background: rgba(245, 230, 230, .5); -webkit-backdrop-filter: saturate(580%) blur(10px); backdrop-filter: saturate(580%) blur(10px); } nav {height:var(--header-height);} /* um den header zu kompensieren */ @media (max-width: 990px) and (orientation:landscape) { :root { --header-height: 100px; } } @media (max-width: 625px) { :root { --header-height: 100px;} } body[id="Home"] nav {background-color:#666;} /* den 666 Hintergrund sieht man, wenn die Seite lädt oder JS abgeschaltet ist */ div.langswitch { position: fixed; right: 0; top: 5px; padding: 3px 8px; font-size: 80%; text-align: right; border: 0px solid white; float: right; display: inline; background: transparent url(../images/transp_grey.png) left top repeat-x; z-index: 99; } a.langswitch { display: inline; outline: none;} a.langswitch {color: #7d7d7d; text-decoration:none; font-weight: bold;outline: none;} a.langswitch:hover {color: #2D5EAE; /* blue */ text-decoration:none; font-weight: bold;} .spact, .spact:hover {color: #9d9d9d; text-decoration:none; font-weight: bold; text-transform: lowercase;cursor:default;} .spact {background: transparent url(../images/transp_grey.png) left top repeat-x;z-index:5;} img.langswitch { position:relative;float:left;padding-left:5px;border:0; } .DE { background: transparent url(../images/DE.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;}.EN { background: transparent url(../images/EN.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;}.RU { background: transparent url(../images/RU.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;}.IT { background: transparent url(../images/IT.gif) left top no-repeat; position:relative;width:19px;height:13px;display:inline;} #headerrinc__ { position: relative; margin-left: 60px; width: 157px; height: 261px; z-index: 44; border: 0px solid yellow; float: left; } #logo, #slogo { background: transparent url(../site_images/Logo_Dr_Droscha.png) center top no-repeat; position: fixed !important; filter: drop-shadow(-2px 2px 3px #fff); left: 5%; top: 5px; width: 75px; height: 75px; background-size: 75px 75px; z-index: 91; } body:not([id="Home"]) #logo { } @media (max-width: 990px) and (orientation:landscape) { #logo {width: 55px; height: 55px;background-size: 55px 55px;}} @media (max-width: 625px) { #logo {width: 55px; height: 55px;background-size: 55px 55px;}} @media (max-width: 465px) { #logo {width: 45px; height: 45px;background-size: 45px 45px; left:10px;}} #logo:hover {filter: drop-shadow(-2px 2px 15px #fff) !important;} #schrift { position: fixed; top: 5px; bottom: 0px; right: 0px; width: 500px; height: 50px; border: 0px solid red; z-index: 91; left: 15%; text-align: left; color: black; font: 42px Poppins-Bold, Verdana, arial, helvetica, sans-serif; font-weight: 700; } .sub_rosen { color: var(--color-main); position: relative; top: 15px; left: 15px; font: 30px Oswald !important; } @media (max-width: 990px) and (orientation:landscape) { #schrift {font-size: 25px;left:12%;width:330px;right:unset;} .sub_rosen {font-size: 15px !important;} } @media (max-width: 882px) { #schrift {font-size: 35px;left:14%;width:400px;right:unset;} .sub_rosen {font-size: 20px !important;}} @media (max-width: 761px) { #schrift {font-size: 25px;left:17%;width:330px;right:unset;} .sub_rosen {font-size: 15px !important;}} @media (max-width: 520px) { #schrift {font-size: 20px;left:17%;width:260px;right:unset;} .sub_rosen {font-size: 12px !important; left:-50px} } @media (max-width: 487px) { #schrift {font-size: 20px;left:17%;width:230px;right:unset;} .sub_rosen {font-size: 12px !important; left:-50px} } @media (max-width: 350px) { #schrift {font-size: 20px;left:65px;width:200px;right:unset;} .sub_rosen {font-size: 12px !important; left:-50px} } #statusbar, #statusbar1 { /* Statusbar, optional */ position: relative; height: 25px; background-color: red; font-size: 14px; font-weight: bold; color: white; border-top: 2px solid black; border-bottom: 2px solid black; /* oben rechts unten links */ padding: 3px 20px 1px 20px; overflow: hidden; clear: both; } /* mleft (18) + menubar (822) + mright (186) = mwrap (1026) px */ #mwrap { background: rgba(255, 230, 230, .7); -webkit-backdrop-filter: saturate(580%) blur(5px); backdrop-filter: saturate(580%) blur(10px); height: var(--menubar-height); line-height: var(--menubar-height); clear: both; overflow: hidden; border-top: 0px solid rgb(214,247,239); border-bottom: 0px solid rgb(0,140,198); top: calc(var(--header-height) - var(--menubar-height)); z-index: 90; width: 100%; position: fixed; } body[id="Home"] #mwrap {background-image: none;} #mleft, #mright { background-color: transparent;} #menubar, #menubar2, #menubar_leer { /* menubar: Menu */ position: relative; border: 0; padding: 0; border-top: 0px solid gray; background-color: transparent; font-size: 0px; } #menubar2, #menubar_leer { background-color: transparent; } #menubar { padding-right:16%; padding-left:16%; padding-top:0px; height:var(--menubar-height);} @media (max-width: 1080px) {#menubar { padding-right:5%; padding-left:5%; }} #mainbox { border:0; margin:0; padding:0; height: 100%; background-color: transparent; } #contents { overflow: hidden; padding: 0; margin: 0; /* 3-COLUMN */ z-index: 4; width: 100%; } #inner { height:1%;} /* to avoid the IE6 3 pixel jog bug - sonst ist text nach float um 3px versetzt */ /* ######### begin: 3-column design main area */ /* column container */ .colmask { position: relative; /* This fixes the IE7 overflow hidden bug */ clear: both; float: left; width: 100%; /* width of whole page */ overflow: hidden; /* This chops off any overhanging divs */ z-index: 5; } /* common column settings */ .colright, .colmid, .colleft { float: left; width: 100%; /* width of page */ position: relative; } .maincont, .lfa, .rechts { float: left; position: relative; padding: 0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */ overflow: hidden; } .lfa, .maincont, #maincont_inner { z-index:4; top:0px; } /* Basis von: http://matthewjamestaylor.com/blog/perfect-3-column.htm */ /* 3 Column settings */ .threecol { background:var(--color-background); /* right column background colour */ } body[id="login"] .threecol, body[id="Administration"] .threecol { background:white; } /* Attention: the colum setting is found in the followings files: lfa.css - 2 columns, left:15%, middle: 85%, right:0% no_lfa.css - 1 column, left:0%, middle:100%, right:0% 3col.css - 3 columns, left:15%, middle: 70%, right:15% (this layout is not used) */ /* column setting for the 3col case */ .colmid { background:var(--color-background); /* center column background colour */ } body[id="login"] .colmid, body[id="Administration"] .colmid { background:white; } .threecol .colmid { right:16%; /* width of the right column */ } body[id="Home"] .threecol .colmid { /* andere LFA Breite, individuell o.a. */ } @media (max-width: 1000px) {.threecol .colmid {right:0;}} @media (max-width: 1174px) {body[id="Kontakt"] .threecol .colmid {right:0;}} @media (max-width: 1298px) {body[id="Online_Termine"] .threecol .colmid {right:0;}} .threecol .colleft { right:68%; /* width of the middle column */ background:var(--color-background); /* left column background colour */ border-right: 0px solid #bbb; } body[id="login"] .threecol .colleft, body[id="Administration"] .threecol .colleft { background:white; } @media (max-width: 1000px) {.threecol .colleft {right:100%;}} @media (max-width: 1174px) {body[id="Kontakt"] .threecol .colleft {right:100%;}} @media (max-width: 1298px) {body[id="Online_Termine"] .threecol .colleft {right:100%;}} .threecol .maincont { width:68%; /* width of center column content (column width minus padding on either side) */ left:100%; /* 100% plus left padding of center column */ } @media (max-width: 1000px) {.threecol .maincont {width:100%;}} @media (max-width: 1174px) {body[id="Kontakt"] .threecol .maincont {width:100%;}} @media (max-width: 1298px) {body[id="Online_Termine"] .threecol .maincont {width:100%;}} .threecol .lfa { width:16%; /* Width of left column content (column width minus padding on either side) */ left:16%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */ } @media (max-width: 1000px) {.threecol .lfa {width:0;left:0;}} @media (max-width: 1174px) {body[id="Kontakt"] .threecol .lfa {width:0;left:0;}} @media (max-width: 1298px) {body[id="Online_Termine"] .threecol .lfa {width:0;left:0;}} .threecol .rechts { width:16%; /* Width of right column content (column width minus padding on either side) */ left:84%; /* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */ } @media (max-width: 1000px) {.threecol .rechts {width:0;left:100%;}} @media (max-width: 1174px) {body[id="Kontakt"] .threecol .rechts {width:0;left:100%;}} @media (max-width: 1298px) {body[id="Online_Termine"] .threecol .rechts {width:0;left:100%;}} /* ######### end: 3-column design main area */ #maincont_inner { position: relative; margin: 0 auto; height: 100%; width: 100%; /* if #lfa_ctl:3%, then here 97% */ float: left; padding: 0; display: inline-block; border: 0px solid green; color: var(--color-main-text); } body[id="Home"] #maincont_inner {background-color:white;} div.textblock, div.textblock2, div.smid { /* oben rechts unten links */ margin: 10px 25px 20px 25px; display: block; padding: 0; text-align: left; /* wegen Anna */ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } .smid, .sleft, .sleft2, .sright { position:relative; overflow:hidden;} .smid {clear:both;} .sleft, .sleft2 {float:left;} .sleft {display:none;} .sright {float:right; display:none;} .sleft2, .sright {width:calc(100% - 42px);background-color:var(--color-background);margin: 0 0 1px 1px;} @media (max-width: 690px) {.sleft2 {margin: 0;width:calc(100% - 40px);}} @media (max-width: 1000px) { div.textblock, div.textblock2 {margin: 10px 45px 20px 55px;}} @media (max-width: 660px) { div.textblock, div.textblock2 {margin: 10px 15px 20px 15px;}} div.textblock2 { margin: 10px 0px 20px 0px; } div.textblock2 ul, div.textblock ul { line-height: 1.5em; text-indent: 2px; list-style-position: outside; /*list-style-type: disc;*/ margin-left: 15px; } div.textblock2 h2, div.textblock h2 { padding-bottom: 10px; padding-top: 15px; } /* Menue Definitionen ========================================================= */ /* Es gibt insgesamt 4 Menue-Arten: 1) Hauptmenu, oben, horizontal ==> (mainnav) 2) 2.Menue-Ebene, oben, horizontal, direkt unter Hauptmenue (wird zur Zeit nicht benutzt) ==> (mainnav2) 3) 3.Menue-Ebene, links, wird als Submenue benutzt, wenn Hauptmenue horizontal ist ==> (menu) 4) komplettes Accordeon-Menue links, beinihaltet Hauptmenue + Submenue (3.Ebene), hierfür gibt es 2 Anwendungsfaelle: ==> (cssmenu) A) in menu.php als 'mobiles Menue' B) fuer Webseiten mit vertikalem Menue */ /* ###################### Menue oben, Hauptmenue ################### */ /*.menubar_height { height: 25px; } */ /* .menu_item_width { width: 19%; } */ /* innere_width dividiert durch Anzahl der Menuepunkte, z.B. 800/5=160 */ div.mainnav, div.mainnav2 { position: relative; padding-bottom: 0px; margin-right: 0px; margin-left: 0px; overflow: hidden; font-size: 16px; border: 0; display: flex; justify-content: center; align-items: center; } /* Menue oben + 2.Ebene */ a.mainnav, a.mainnav2, #nav10 { /* oben rechts unten links */ margin: 0px 0 0px 0; /* oben/unten links/rechts */ padding: 0px; font-size: 16px; font-weight: normal; font-family: Oswald, SF-Pro, Trebuchet MS, veranda, Arial, Helvetica, sans-serif; text-align: center; text-decoration:none; color: #777; border: 0px solid black; float: left; display: inline; outline: none; text-transform: uppercase; white-space: nowrap; } a.mainnav, #nav10 { top: 0px; margin-left: 5px; /* sorgt für gleichen Abstand */ margin-right: 5px; } a.mainnav { top: 0px; } a.mainnav:link, a.mainnav:visited { background-color: transparent; border-top: 0px solid #000066; border-bottom: 0px solid #000066; } #nav10:hover, a.mainnav:hover { border: 0px solid red; color: var(--color-menuitem-hoover); cursor:pointer;} #nav10 {user-select:none;cursor:pointer;} a.mainnav2 { padding-bottom: 4px; padding-top: 25px; width: auto; font-size: 100.01%; float: right; font-weight: normal; color: black; } a.mainnav2:link, a.mainnav2:visited { background-color: transparent; border-top: 0px solid #000066; border-bottom: 0px solid #000066; } a.mainnav2:hover { background-color: transparent; border: 0px solid black; color: var(--color-menuitem-hoover); /* orange */ } /* Menue-Tags, Ebene 1, oben - wenn selected */ #menu #nav10 a, body[id^="Home"] #nav11 a, body[id^="Ueber_uns"] #nav12 a, body[id^="Leistungen"] #nav13 a, body[id^="Patienteninformation"] #nav14 a, body[id^="Neuigkeiten"] #nav15 a, body[id^="Kontakt"] #nav16 a, body[id^="Online_Termine"] #nav17 a, body[id^="dummy02"] #nav18 a, body[id^="dummy02"] #nav19 a, body[id^="dummy02"] #nav110 a { color: var(--color-menuitem); /* DarkTurquoise */ background-color: transparent; cursor: default; float: left; } #nav10 { display: none; height: var(--menubar-height); line-height: var(--menubar-height); } @media (max-width: 660px) { span[id^="nav1"] {display:none;} span[id^="lnav"] {display:none;} #nav10 {display:inline;} } #mobnav10 {display:none;} .mainnav #menu0 {padding-left:35px;} /* Menue-Tags, Ebene 2, oben - wenn selected */ #dummy #dummnav { color: #2D5EAE; /* blau */ background-color: transparent; cursor: default; /*width: 170px;*/ float: right; } /* ######################### Menue links, Submenue ########################## */ a.menu { font-family: veranda, Arial, Helvetica, sans-serif; text-decoration: none; font-weight: normal; display: block; outline: none; padding: 10px; color: rgb(99,99,99); font-size: 13px; text-transform: capitalize; overflow: hidden; white-space: nowrap; background-color: #efefef; background-image: linear-gradient(to right, #efefef 0%, white 100%); background-image: -webkit-linear-gradient(right, #efefef 0%, white 100%); margin: 3px 10px 3px 10%; -moz-transition-property:all; -moz-transition-duration:500ms; -webkit-transition-property:all; -webkit-transition-duration:500ms; -o-transition-property:all; -o-transition-duration:500ms; -ms-transition-property:all; -ms-transition-duration:500ms; transition-property:all; transition-duration:500ms; border-radius: 0 10px 10px 0; box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px; max-width: 250px; } .left_sub {margin-top:80px;position:fixed;width:16%; -moz-transition-property:all; -moz-transition-duration:500ms; -webkit-transition-property:all; -webkit-transition-duration:500ms; -o-transition-property:all; -o-transition-duration:500ms; -ms-transition-property:all; -ms-transition-duration:500ms; transition-property:all; transition-duration:500ms; } /* breite wie linke spalte */ .vis_no,.vis_no span, a.vis_no {height:0 !important;font-size:0;padding:0; } .vis_,.vis_ span, a.vis_ {height:0 !important;font-size:0;padding:0; } a.eodd { background: #f4f4f4; border:0; border-bottom: 1px solid #e0e0e0;} a.eeven { background: #fff; border:0; border-bottom: 1px solid #e0e0e0;} a.menu:hover { color:black;background-color: rgb(214,247,239); font-weight:700;} .label-txt {padding-left:5px;display: inline-block;} @media (max-width: 1000px) { .label-txt {padding-left:15px;} a.menu {padding: 10px 3px 10px 8px; font-size:16px;} .left_sub {width:45px;margin-top:0;} .left_sub:hover {width: 220px;} } /* Menue-Tags (Ebene 2 oder 3), links - wenn selected */ #Ueber_uns_x_xPraxisvorstellung #lnav01 a, #Ueber_uns_x_xAusstattung #lnav02 a, #Ueber_uns_x_xDr_Droscha #lnav03 a, #Ueber_uns_x_xDr_Apel #lnav04 a, #Ueber_uns_x_xTeam #lnav05 a, #Ueber_uns_x_xsub06 #lnav06 a, #Ueber_uns_x_xsub07 #lnav07 a, #Ueber_uns_x_xsub08 #lnav08 a, #Ueber_uns_x_xsub09 #lnav09 a, #Ueber_uns_x_xsub10 #lnav10 a, #Ueber_uns_x_xsub11 #lnav11 a, #Ueber_uns_x_xsub12 #lnav12 a, #Ueber_uns_x_xsub13 #lnav13 a, #Ueber_uns_x_xsub14 #lnav14 a, #Ueber_uns_x_xsub15 #lnav15 a, #Ueber_uns_x_xsub16 #lnav16 a, #Ueber_uns_x_xsub17 #lnav17 a, #Ueber_uns_x_xsub18 #lnav18 a, #Ueber_uns_x_xsub19 #lnav19 a, #Ueber_uns_x_xsub20 #lnav20 a, #Leistungen_x_xUeberblick #lnav01 a, #Leistungen_x_xPhysiotherapie #lnav02 a, #Leistungen_x_xOrthopaedische_Chirurgie #lnav03 a, #Leistungen_x_xDiagnostik #lnav04 a, #Leistungen_x_xPrienAktiv #lnav05 a, #Leistungen_x_xsub06 #lnav06 a, #Leistungen_x_xsub07 #lnav07 a, #Leistungen_x_xsub08 #lnav08 a, #Leistungen_x_xsub09 #lnav09 a, #Leistungen_x_xsub10 #lnav10 a, #Leistungen_x_xsub11 #lnav11 a, #Leistungen_x_xsub12 #lnav12 a, #Leistungen_x_xsub13 #lnav13 a, #Leistungen_x_xsub14 #lnav14 a, #Leistungen_x_xsub15 #lnav15 a, #Leistungen_x_xsub16 #lnav16 a, #Leistungen_x_xsub17 #lnav17 a, #Leistungen_x_xsub18 #lnav18 a, #Leistungen_x_xsub19 #lnav19 a, #Leistungen_x_xsub20 #lnav20 a, #Neuigkeiten_x_xAllgemeines #lnav01 a, #Neuigkeiten_x_xsub02 #lnav02 a, #Neuigkeiten_x_xsub03 #lnav03 a, #Neuigkeiten_x_xsub04 #lnav04 a, #Neuigkeiten_x_xsub05 #lnav05 a, #Neuigkeiten_x_xsub06 #lnav06 a, #Neuigkeiten_x_xsub07 #lnav07 a, #Neuigkeiten_x_xsub08 #lnav08 a, #Neuigkeiten_x_xsub09 #lnav09 a, #Neuigkeiten_x_xsub10 #lnav10 a, #Neuigkeiten_x_xsub11 #lnav11 a, #Neuigkeiten_x_xsub12 #lnav12 a, #Neuigkeiten_x_xsub13 #lnav13 a, #Neuigkeiten_x_xsub14 #lnav14 a, #Neuigkeiten_x_xsub15 #lnav15 a, #Neuigkeiten_x_xsub16 #lnav16 a, #Neuigkeiten_x_xsub17 #lnav17 a, #Neuigkeiten_x_xsub18 #lnav18 a, #Neuigkeiten_x_xsub19 #lnav19 a, #Neuigkeiten_x_xsub20 #lnav20 a, #dumm #dummxx a { color: var(--color-main); /* DarkTurquoise */ cursor: default; font-weight: bold; background-color: rgb(214,247,239); border-right: 3px solid var(--color-main); } /* ######################### Menue links, Accordeon-Menue ########################## */ /* design of left jquery accordeon menu ==> Gesamtmenü, welche links genutzt wird für menu.php und für verticales Seitemenü */ /* design ist ähnlich wie linkes Menü bei horizontalen Seiten */ :root { --col-dark-main: var(--color-main); /* Hauptfarbe alle Menüpunte, ausser dem aktiven */ --col-light-main: #d41138; /*var(--color-menuitem); /* Menüfarbe Aktiv und links Nummernbox */ } #cssmenu { width: 100%;} #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; text-decoration: none; line-height: 1; font-size: 14px; position: relative; } #cssmenu a { line-height: 1.3; -moz-transition-property:all; -moz-transition-duration:500ms; -webkit-transition-property:all; -webkit-transition-duration:500ms; -o-transition-property:all; -o-transition-duration:500ms; -ms-transition-property:all; -ms-transition-duration:500ms; transition-property:all; transition-duration:500ms; } #cssmenu > ul > li > a { padding-right: 40px; font-size: 25px; font-weight: bold; display: block; background: var(--col-light-main); /*rgb(0,165,198); /* noch dunkleres rot von 'Nummern-Box', rechts im 1st level menu */ color: white; border-bottom: 1px solid #5e071b; /* dunkles lila, Linie unten 1st level menu */ text-transform: uppercase; position: relative; } #cssmenu > ul > li > a > span { background: var(--col-dark-main); /*rgb(0,140,198); /* dunkles rot, left 1st level menu */ padding: 10px; display: block; font-size: 13px; font-weight: 300; } #cssmenu > ul > li > a:hover { text-decoration: none; } #cssmenu > ul > li > a > span:hover { color:black; background-color: rgb(214,247,239); /* altrosa fuer hover, 1st level menu */ } #cssmenu > ul > li.active { border-bottom: none; } #cssmenu > ul > li.active > a { color: white; } #cssmenu > ul > li.active > a span { background: var(--col-light-main); /* rgb(0,165,198); /* dunkleres rot, wie Nummern-Box */ } #cssmenu span.cnt { position: absolute; top: 8px; right: 15px; padding: 0; margin: 0; background: none; } #cssmenu ul ul { display: none; background-color:#ddd;} #cssmenu ul ul li { border: 1px solid #e0e0e0; border-top: 0;} #cssmenu ul ul a { padding: 10px; display: block; color: var(--col-dark-main); /*rgb(0,140,198); /* dunkles rot, wie von left 1st level menu */ font-size: 13px; text-transform: capitalize; } #cssmenu ul ul a:hover { color: black; background-color: rgb(214,247,239); /* altrosa fuer hover, 2nd level menu */ } #cssmenu ul ul li.odd { background: #f4f4f4; } #cssmenu ul ul li.even { background: white; } body[id^="Home"] #mobnav11 > span, body[id^="Ueber_uns"] #mobnav12 > span, body[id^="Leistungen"] #mobnav13 > span, body[id^="Patienteninformation"] #mobnav14 > span, body[id^="Neuigkeiten"] #mobnav15 > span, body[id^="Kontakt"] #mobnav16 > span, body[id^="Online_Termine"] #mobnav17 > span, body[id^="impressum"] #mobnav18 > span, /* Achtung: hier irgendwo noch impressum + datenschutz eintragen statt dummy02 */ body[id^="datenschutz"] #mobnav19 > span, body[id^="dummy02"] #mobnav110 > span { color: #EEA2AD; /* LightPink2 */ cursor: default; background: var(--col-light-main); /*rgb(0,165,198); /* dunkleres rot, wie Nummern-Box */ } /*sphider search*/ .ssearchbox { position:relative; height:39px; width:185px; border:0px solid red; padding-top:12px; padding-left:42px; cursor:pointer; } .input1 { color:white; font-size: 14px; line-height: 1.5; border: 0px solid black; background-color: #777777; } /* die Class 'button' wird auch im CMS verwendet, nicht nur auf der Website selbst */ .ui-dialog-buttonset .ui-button, .ui-dialog-buttonset .ui-button:hover, .button, .button:hover { border: none; width: 220px; text-align: center; font-size: var(--button-font-size); color: white; text-decoration: none; background-color: var(--color-main); font-family: Poppins; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; display: block; transition: all .8s; border: 2px solid transparent; background-clip: content-box; padding: 0 2px 0 2px; border-radius: 0px; height: 40px; line-height: 40px; } input.button {line-height:unset !important;} .ui-widget .ui-widget { font-size: var(--button-font-size) !important; } .ui-dialog-buttonset .ui-button:hover, .button:hover, li.button:hover { background-color: #77091f; cursor: pointer !important; font-weight: 600; } .ui-dialog-buttonset .ui-button:active, .ui-dialog-buttonset .ui-button:focus, .button:active, .button:focus { border: 2px solid var(--color-main); padding: 2px; line-height: 36px; background-clip: content-box; border-radius: 5px; } .button::-moz-focus-inner {border: 1px dotted transparent;} #home-btn2 { width: 200px; height: 40px; line-height: 40px; position: relative; left: 10%; top: 20px; user-select: none; /* Verhindert das Markieren des Inhalts */ -webkit-user-drag: none; /* Verhindert das Draggen in Webkit-basierten Browsern (z.B. Chrome, Safari) */ -moz-user-select: none; /* Speziell für Firefox */ cursor: pointer; /* Sicherstellen, dass der Cursor ein Pointer bleibt */ } #home_btn1 { background-color: transparent; border: 2px solid black; color: black; width: 200px; height: 40px; line-height: 40px; font-size: var(--button-font-size); position: relative; right: 10%; float: right; top: 20px; user-select: none; /* Verhindert das Markieren des Inhalts */ -webkit-user-drag: none; /* Verhindert das Draggen in Webkit-basierten Browsern (z.B. Chrome, Safari) */ -moz-user-select: none; /* Speziell für Firefox */ cursor: pointer; /* Sicherstellen, dass der Cursor ein Pointer bleibt */ z-index: 99; } #home_btn1:hover { background-color: #77091f; cursor: pointer; font-weight: 600; color: white; border: 2px solid transparent; } #home_btn1:active, #home_btn1:focus { background-color: var(--color-main); cursor: pointer; font-weight: 600; color: white; border: 2px solid var(--color-main); background-clip: content-box; border-radius: 5px; } @media (max-width: 990px) and (orientation:landscape) { #home_btn1, #home-btn2 { font-size:12px; width:130px;height:20px;line-height:20px;} #home-btn2 {height:30px;line-height:30px;} #home_btn1 { right:5%;} } @media only screen and (max-width: 740px) { #home-btn2, #home_btn1 { font-size:12px; width:130px;height:20px;line-height:20px;} #home-btn2 { left:5%; height:30px;line-height:30px;} #home_btn1 { right:5%; z-index:200;} } @media only screen and (max-width: 358px) { #home_btn1 {width:80px;height:40px;top:5px;right:10px;} } /* column classes for markdown tables */ .mrktab { width:800px; border-spacing: 5px; margin-left:5%; } .colcl_0 { width:20%; } .colcl_1 { width:80%; } /* alignment for markdown tables */ .align_left { text-align:left; } .align_right { text-align:right; } .align_center { text-align:center; } /* contact form */ .cont_form form { background-color: var(--bgcol-form); margin: 10px 20px 10px 20px; width: calc(100% - 40px); } .cont_form > noscript > p { color: #b5124b; font-weight: bold; } @media (max-width: 948px) { .cont_form form {width:100%; } } #myForm fieldset { border: 1px solid var(--bordercol-form); min-width: 290px; background-color: var(--bgcol-form); position: relative; margin: 0; padding: 5px; border-radius: 0px; } #myForm fieldset .fbody { background-color : transparent; padding: 20px 10px 20px 10px; } #myForm fieldset.okmsg2 { border: 2px solid #99CC00;} #myForm fieldset.errmsg2 { border: 2px solid #FF8181;} #myForm legend { background-color:transparent;position : absolute;} #myForm ol { list-style-type: none; margin: 0; padding: 0; } #myForm li { float: left; padding: 0; width:100%; } #myForm li.last { float: none; clear: both; text-align: center; } #myForm label { display: block; cursor: pointer; font-weight: bold; line-height: 24px; text-align: left; } #myForm input { line-height: 40px !important; } #myForm input[type='submit'] { line-height: unset !important; } #myForm input[id='company'], #myForm input[id='phone'], #myForm input[id='phone_wide'], #myForm input[id='firstname'], #myForm input[id='lastname'], #myForm input[id='bdat'], #myForm input[id='captcha'], #myForm input[id='address'], #myForm input[id='email'], #myForm input[id='fupld'], #myForm textarea { background-color: #fff; color: #4d4d4d; border: 1px solid #c4c4c4; font: 18px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif; padding: 5px 10px 5px 10px; width: calc(100% - 20px); } #myForm input[id='captcha'] {font-size:15px;} #myForm textarea { overflow:auto;} #myForm input.valid, #myForm textarea.valid { border: 1px solid #3bb143; background-color: #f0fff0; } #myForm input.error, #myForm textarea.error { border: 1px solid #c00 !important; background-color: #fff7f7; } #myForm label.error { color: #c50a1f; /* red */ font-weight:normal; padding:0;margin:0; width:89%;float:left; line-height: 12px; font-size:10px; overflow:hidden;white-space:nowrap;} #myForm label[id='datenschutz-error'].error {float:none; width:auto;} #myForm label[id='datenschutz-error'].valid {float:left !important; } #dslink {text-decoration:none;color:green; font-weight:bold;} #myForm input[id='company']:focus, #myForm input[id='phone']:focus, #myForm input[id='phone_wide']:focus, #myForm input[id='firstname']:focus, #myForm input[id='lastname']:focus,#myForm input[id='bdat']:focus, #myForm input[id='captcha']:focus, #myForm input[id='address']:focus, #myForm input[id='email']:focus, #myForm input[id='fupld']:focus, #myForm textarea:focus { border-color: #3399FF; /* blue */ background-image: none; } #myForm input[id='company'], #myForm input[id='phone'], #myForm input[id='phone_wide'], #myForm label[for='company'], #myForm label[for='phone'], #myForm label[for='phone_wide'], #myForm input[id='firstname'], #myForm input[id='lastname'], #myForm input[id='bdat'], #myForm label[for='firstname'], #myForm label[for='lastname'], #myForm label[for='bdat'] {width:calc(100% - 20px);} #myForm li[id='comp'], #myForm li[id='phon'], #myForm li[id='b_dat'], #myForm li[id='fname'], #myForm li[id='lname'] {width:49%;} #myForm input[id='captcha'] {width:90px;position:relative;float:left;line-height: 20px !important;} #myForm label[for='captcha'] {clear:both;padding-top:5px;} #myForm li[id='phon'], #myForm li[id='lname'], #myForm li[id='b_dat'] {padding-left:2%;} @media (max-width: 948px) { #myForm li, #myForm li[id='comp'], #myForm li[id='phon'], #myForm li[id='fname'], #myForm li[id='lname'], #myForm li[id='b_dat'] {padding:0px 10px 0px 10px;min-width:270px; width: calc(100% - 20px);left: -5px; position: relative;} } body[id="Kontakt"] #myForm li, body[id="Kontakt"] #myForm li[id='comp'], body[id="Kontakt"] #myForm li[id='phon'], body[id="Kontakt"] #myForm li[id='fname'], body[id="Kontakt"] #myForm li[id='lname'], #myForm li[id='b_dat'] {padding:0px 10px 0px 10px;min-width:270px; width: calc(100% - 20px);left: -5px; position: relative;} #fupld2_sel_files span.bold { max-width: 300px; display: block ruby; overflow: hidden; text-overflow: ellipsis;position: relative;float: left;} @media (max-width: 1020px) {#fupld2_sel_files {font-size:12px;} #fupld2_sel_files span.bold {max-width: 200px;} } @media (max-width: 880px) {#fupld2_sel_files {font-size:10px;} #fupld2_sel_files span.bold {max-width: 150px;}} @media (max-width: 620px) {#fupld2_sel_files .fstype {display:none;}} .place_holder1 {width:1%;height:24px;} .place_holder2 {width:1%;height:65px;} /* fileupload form */ .fileUpload { background: rgb(38, 115, 38); background: -webkit-linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%); background: -moz-linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%); background: -o-linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%); background: linear-gradient(167deg, rgba(151,242,121,1) 0%, rgba(12,156,15,1) 27%, rgba(18,145,21,1) 37%, rgba(2,28,2,1) 73%); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; color: #ccc; font-size: 1em; text-transform: uppercase; font-weight: bold; margin: 1.25em auto;/*20px/16px 0*/ margin-left: 0; overflow: hidden; padding: 8px 20px; position: relative; text-align: center; width: max-content; cursor: pointer; border: 2px solid #ccc; -webkit-transition: 2s; -moz-transition: 2s; -o-transition: 2s; transition: 2s; } .fileUpload:hover, .fileUpload:active, .fileUpload:focus { background: rgb(51, 153, 51); background: -webkit-linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%); background: -moz-linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%); background: -o-linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%); background: linear-gradient(167deg, rgba(81,200,42,1) 10%, rgba(47,99,48,1) 29%, rgba(2,28,2,1) 63%, rgba(20,212,20,1) 93%); cursor: pointer; color: white; border: 2px solid white; box-shadow: inset 0 0 20px 1px #00a7d1; } .fileUpload #fupld2 { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); width: 148px; height: 46px; cursor: pointer; } input[type="file"] { position: fixed; right: 100%; bottom: 100%; } body[id="Administration"] input[type="file"] { position:unset;} #showdown_wrap input[type="file"] { position:unset;} /* footer area ############################################################# */ /* potentielle footer Links, wenn aktiv */ #agb #navagb a, #banner #navban a, #partner #navpart a, #about4 #navjobs a, #impressum #navimpr a, #datenschutz #navdat a { color: var(--color-menuitem); font-weight: bold; text-decoration:none; cursor: default; } #footer, #footer_pre { clear: both; height: 45px; border-top: 1px solid gray; font-weight: bold; font-size: 11px; font-family: veranda, Arial,Helvetica; text-decoration:none; text-align: center; color: var(--footer-color); padding-top: 3px; padding-right: 15px; padding-left: 15px; padding-bottom: 5px; overflow: hidden; z-index: 3; } #footer_pre { border-top: 0px solid gray; padding: 0; /* 3-COLUMN */ height: 0px; } #footer { position: relative; top: 0px; border-top: 0px solid gray; background-color: transparent; } @media (max-width: 910px) { #footer { top:15px; height:95px;} } @media (max-width: 838px) { #footer { visibility: hidden; } } #footer a, #footer_left a { outline: none; font-weight: bold; font-family: Veranda,Arial,Helvetica; text-decoration: none; background-color: transparent; color: var(--footer-color); vertical-align: bottom; } #footer a:hover, #footer_left a:hover { background-color: transparent; color: var(--color-menuitem-hoover); /* DarkTurquoise */ font-weight: bold; } #footer_left { float: left; text-align: left; padding-left: 15px; padding-bottom: 5px; } #jumpback {position: absolute; right: 0; padding: 20px; font-size: 50px;} /* Facebook plugin */ .fb_post { clear: both; overflow: hidden; border: 2px solid #aaa; margin: 10px; padding: 10px; background-color: #eee; border-radius: 5px; } /* für Kalendereintrag */ .calentry > i { font-size:200%; color:#ff9900;position:relative;float:left;line-height:75px;padding:0 25px 0 0; clear:both;margin-left:20%;} @media (max-width: 500px) { .calentry > i {margin-left:0;}} @media (max-width: 400px) { .calentry > h3 {font-size:90.01%;} .caladdress {font-size:80.01%;} } @media (max-width: 370px) { .calentry > h3 {font-weight:normal;font-size:80.01%;} .calentry > i {padding:0 10px 0 0;line-height:70px;} .caladdress {font-size:70.01%;}} .caladdress { position: relative; top:5px; } /* Openstreetmap */ iframe { border: none; overflow: hidden; margin-top: 0; margin-bottom: 0; } /* eingebettetes Youtube-Video via CMS Editor eingefuegt */ .embedvideo-wrapper { max-width: 100%; left: 0; right: 0; margin: auto; } @media only screen and (max-width: 600px) { .embedvideo-wrapper {width:100% !important;}} div.embedvideo { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; box-shadow: 0px 10px 12px 0px rgba(49, 49, 49, 0.4); border: 0; } .embedvideo iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #mob_menu {display:none;position:fixed;z-index:99;width:100%;top:var(--header-height);} .fversion {font-size:12px;margin-left:25px;} /* CSS für die Hauptüberschrift im Hero-Bereich */ .hero-heading { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Leichter Schatten, um sich vom Hintergrund abzuheben */ text-shadow: 6px -4px 4px rgba(0, 0, 0, 0.5); text-align: left; /* Zentrierter Text */ opacity: 0; /* Anfangs unsichtbar */ animation: fadeIn 2s ease-in-out forwards; /* Sanfter Fade-in-Effekt */ margin: 0 !important; /* Kein zusätzlicher Abstand */ padding-left: 10%; padding-right: 10%; font-size: 3.875rem; font-style: normal; font-family: Poppins-Bold; font-weight: 700; line-height: 1.25; letter-spacing: 0px; text-transform: none; margin-bottom: 10px; padding-bottom: 0 !important; color: rgba(255, 255, 255, 1); user-select: none; /* Verhindert Textauswahl */ } /* CSS für die Unterüberschrift im Hero-Bereich */ .hero-subheading { text-align: left; /* Zentrierter Text */ opacity: 0; /* Anfangs unsichtbar */ animation: slideIn 2s ease-in-out forwards; /* Slide-in Effekt */ animation-delay: 0.8s; /* Leichte Verzögerung, um synchron mit Hauptüberschrift zu erscheinen */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Leichter Schatten, um sich vom Hintergrund abzuheben */ text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.9); padding-left: 10%; padding-right: 10%; font-size: 1.5rem; font-style: normal; font-family: Oswald; font-weight: 400; line-height: 1.25; letter-spacing: 0px; text-transform: none; margin-bottom: 10px; color: rgba(255, 255, 255, 1); user-select: none; /* Verhindert Textauswahl */ } @media only screen and (max-width: 836px) { .hero-heading {font-size: 2.5rem;} .hero-subheading {font-size: 1.1rem;} } @media only screen and (max-width: 740px) { .hero-heading, .hero-subheading {padding-left: 5%; padding-right: 5%;} .hero-heading {font-size: 2.1rem;} .hero-subheading {font-size: 1.0rem;} } /* Fade-in Effekt für Hauptüberschrift */ @keyframes fadeIn { 0% { opacity: 0; transform: translateY(-20px); /* Startposition leicht nach oben verschoben */ } 100% { opacity: 1; transform: translateY(0); /* Endposition */ } } /* Slide-in Effekt für Unterüberschrift */ @keyframes slideIn { 0% { opacity: 0; transform: translateX(-30px); /* Startposition leicht von der Seite */ } 100% { opacity: 1; transform: translateX(0); /* Endposition */ } } .hero { position: relative; top: -230px; display: flex; flex-direction: column; justify-content: center; height: 0; width: 100%; } @media (max-width: 990px) and (orientation:landscape) { .hero { top: -120px; } .hero-heading {font-size: 1.5rem;} .hero-subheading {font-size: 0.6rem;} } @media only screen and (max-width: 639px) { .hero { top: -120px; } .hero-heading {font-size: 1.5rem;} .hero-subheading {font-size: 0.6rem;} } #home_text_left {width: calc(85% - 20px);} #home_img1 {width: calc(15% - 20px);} @media only screen and (max-width: 1250px) { #home_text_left {width: calc(70% - 20px);} #home_img1 {width: calc(30% - 20px);} } #home_img2 {display:none;} @media only screen and (max-width: 700px) { #home_img1 {display:none;} #home_img2 {width:calc(100% + 25px + 25px); display:block;position:relative;left:-25px;} #home_text_left {width: 100%;} } #wuu_sub_head { position:relative; width:100%; clear:both; margin-bottom:20px;} .b_shadow {box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;} #wuu_ll { width: calc(100% - 20px); position: relative; clear: both; padding: 10px; background-color: white; margin: 10px 0 10px 0; border-radius: 0px; } #flex { display: flex; justify-content: space-between; flex-wrap: nowrap; align-items: stretch; } #wuu_decr { background-color: #fff; padding: 15px; border-radius: 0px; box-sizing: border-box; width: calc(55% - 20px); margin: 10px 5px 10px 0; display: flex; flex-direction: column; justify-content: start; overflow-y: auto; } #wuu_dr_droscha { background-color: transparent; border-radius: 0px; overflow:hidden; display: flex; justify-content: center; align-items: flex-end; box-sizing: border-box; width: 45%; margin: 10px 0 10px 5px; height: fit-content; /* Höhe wird dynamisch angepasst */ } #wuu_dr_droscha_img { max-width: 125%; height: auto; width:100%; object-fit: contain; align-self: flex-start; transition:2s; transform: scale(1.2); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-position: top; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); mask-repeat: no-repeat; mask-position: top; mask-size: 100% 100%; } #wuu_dr_droscha_img:hover {filter: drop-shadow(-14px -14px 20px #fff);filter: drop-shadow(14px -14px 20px #fff);transform:scale(1.4);z-index:4;position:relative;cursor:pointer;} @media (min-width: 1482px) { #wuu_dr_droscha { width:35%;} #wuu_decr { width: calc(65% - 20px);} #wuu_dr_droscha_img {transform: scale(1.0);} #wuu_dr_droscha_img:hover {transform:scale(1.2);} } #cta-drd { position: fixed; right: 0; z-index: 6; white-space: nowrap; opacity:0; height: 40px; line-height: 40px; animation: slideInrot 2s ease-in-out forwards; /* Slide-in Effekt */ animation-delay: 0.8s; /* Leichte Verzögerung, um synchron mit Hauptüberschrift zu erscheinen */ -moz-transition-property:all; -moz-transition-duration:500ms; -webkit-transition-property:all; -webkit-transition-duration:500ms; -o-transition-property:all; -o-transition-duration:500ms; -ms-transition-property:all; -ms-transition-duration:500ms; transition-property:all; transition-duration:500ms; } @media (max-width: 400px) { #cta-drd { height: 30px; line-height: 30px;} } /* Slide-in Effekt für Unterüberschrift */ @keyframes slideInrot { 0% { opacity: 0; transform: translateX(+30px); /* Startposition leicht von der Seite */ } 100% { opacity: 1; transform: translateX(0); /* Endposition */ /* transform: rotate(7deg); */ } } /* Media Query für kleinere Bildschirme */ @media (max-width: 768px) { #flex { flex-direction: column; } #wuu_decr, #wuu_dr_droscha { width: 100%; height: auto; margin: 10px 0 10px 0;} #wuu_dr_droscha { order: 1; height: auto !important;} #wuu_decr { order: 2; } } .resume { max-width: 800px; margin: 30px auto; padding: 25px; background: #fff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .resume-header { text-align: center; border-bottom: 3px solid var(--color-main); padding-bottom: 20px; margin-bottom: 20px; } .resume-header h1 { font-size: 2.5em; color: #333; margin: 0; line-height: 1.2em; } .resume-header p { font-size: 1.3em; color: #555; margin: 10px 0 0; font-style: italic; } .resume-section h2 { font-size: 2em; color: #444; margin-bottom: 15px; padding-left: 10px; display: flex; align-items: center; } .resume-section h2 i { margin-right: 10px; color: #999;} .resume-section { padding: 20px; } @media (max-width: 400px) { .resume-section { padding: 20px 5px 20px 5px;}} .resume-list { list-style-type: none; padding: 0; margin: 0; hyphens: inherit; } .resume-list li { color: inherit; /* Beibehaltung der Textfarbe */ background: #f9f9f9; margin: 10px 0; padding: 15px; border-left: 5px solid transparent; border-radius: 5px; transition: all 0.3s ease; } @media (max-width: 600px) { .resume-header h1 { font-size: 1.7em; padding-top: 40px; padding-bottom: 0px;} .resume-header p { font-size: 0.9em; } .resume-list { margin-left: 0 !important;} } @media (max-width: 442px) { .resume-header h1 { font-size: 1.2em; letter-spacing: .05em; } .resume-header p { font-size: 0.9em; } .resume-section h2 { font-size: 1.5em; } } @media (max-width: 342px) { .resume-header h1 { font-size: 1.0em; } .resume-header p { font-size: 0.9em; } .resume-section h2 { font-size: 1.3em; } } .resume-list li:hover { background: #f1f1f1; border-left-color: var(--color-main); } .resume-list li .icon-text { display: flex; align-items: center; } .resume-list li .icon-text i { margin-right: 8px; vertical-align: middle; color: var(--color-main); /* Nur das Icon erhält die Farbvariable */ } .resume-list li .icon-text strong { margin-right: 5px; vertical-align: middle; color: black; /* Nur der starke Text erhält die Farbvariable */ } .highlight-word { display: inline-block; font-size: 2rem; /* Größere Schriftart für Kontrast */ font-weight: bold; /* Fettdruck für die Hervorhebung */ color: var(--color-main); /* Benutzerdefinierte Farbe */ font-family: Oswald, serif; /* Eine andere Schriftart für den Kontrast */ margin-right: 8px; /* Platz zwischen Hervorhebung und Haupttext */ line-height: 1.0; } .text { display: inline; /* Behält den Textfluss auf einer Zeile */ font-size: 1rem; /* Normale Schriftgröße für den Rest des Textes */ line-height: 1.6; /* Zeilenhöhe */ } /* Home links/rechts untere sektion */ .sleft2 {padding:20px;} .home_info_head {} .info_cont { border: 0px solid red; height: 100%; width:calc(100% - 40px); margin: auto;} .iboxes {border: 1px solid #dfdfdf;} #ibox1, #ibox2, #ibox3 {height: clamp(300px, 100% , 600px); width: calc((100% - 46px) / 3); position:relative; float:left; } #ibox2 {margin-left:20px; margin-right:20px;} @media (max-width: 690px) { #ibox1, #ibox2, #ibox3 {width: calc(100% - 2px);} #ibox2 {margin: 20px 0 20px 0;} .info_cont {width:100%;} } .teaser-boxes-thumb { aspect-ratio: 8/5; background: #eee; margin: 0; overflow: hidden; position: relative; width: 100%; } body[id="Online_Termine"] .teaser-boxes-thumb {aspect-ratio: 3/4;} body[id="Kontakt"] .teaser-boxes-thumb {aspect-ratio: 8/6;} .teaser-boxes-thumb::after { background: var(--color-main); content: ""; inset: 0; opacity: .15; position: absolute; transition: opacity .5s; } body[id="Kontakt"] .teaser-boxes-thumb::after {background:#ccc;} .teaser-boxes-thumb > img { height: 100%; object-fit: cover; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s,-webkit-transform 0.5s; width: 100%; } .d-block { display: block; } img.d-block { height: auto; max-width: 100%; } .teaser-boxes-content { padding: 10px;color: var(--color-main-text); background-color: #fbfbfb;} .teaser-boxes-content h2 {font-size: clamp(0.7em, 1vw, 1.3em);} .teaser-boxes-content h3 {font-size: clamp(0.4em, 0.8vw, 1.1em);} .teaser-boxes-content .paragraph-small { font-size: clamp(14px, 0.8vw, 18px) } @media (max-width: 1428px) {.teaser-boxes-content .paragraph-small { font-size: clamp(12px, 0.8vw, 18px) }} @media (max-width: 1268px) {.teaser-boxes-content .paragraph-small { font-size: clamp(10px, 0.8vw, 18px) }} @media (max-width: 870px) {.teaser-boxes-content .paragraph-small { font-size: clamp(16px, 0.8vw, 18px) }} @media (max-width: 610px) {.teaser-boxes-content .paragraph-small { font-size: clamp(12px, 0.8vw, 18px) }} @media (max-width: 514px) {.teaser-boxes-content .paragraph-small { font-size: clamp(10px, 0.8vw, 18px) }} .teaser-boxes-content .link {width:100%;text-align:right;color:var(--color-main)} .teaser-boxes-content .link span {line-height:28px; font-size:16px;} .teaser-boxes-content div.link:nth-last-child(1) {text-decoration:underline;} .teaser-boxes-link {} a.teaser-boxes-link:hover .iboxes {border:1px solid transparent;box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;} a.teaser-boxes-link:hover .teaser-boxes-thumb img { -webkit-transform: scale(1.15); transform: scale(1.15);} a.teaser-boxes-link:hover .teaser-boxes-thumb::after { opacity: 0; } a.teaser-boxes-link:hover .teaser-boxes-content { background-color: white;} #kact1.teaser-boxes-link:hover .iboxes {border:1px solid #bbb;box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px !important;} #kact1.teaser-boxes-link:hover .teaser-boxes-thumb img { -webkit-transform: scale(1.15); transform: scale(1.15);} #kact1.teaser-boxes-link:hover .teaser-boxes-thumb::after { opacity: 0; } #kact1.teaser-boxes-link:hover .teaser-boxes-content { background-color: #f9f9f9;} body[id="Kontakt"] div.textblock { position:relative; width: calc(50% - 10px); float:left; margin: 20px 10px 0 0; } body[id="Kontakt"] .sright { display:block; Position:relative; float: right; width:50%; margin: 20px 0 0 0; } @media (max-width: 1174px) { body[id="Kontakt"] div.textblock {margin: 20px 10px 0 40px; width: calc(50% - 50px);} body[id="Kontakt"] .sright {margin: 20px 40px 0 0; width: calc(50% - 40px);} } @media (max-width: 870px) { body[id="Kontakt"] div.textblock {margin: 20px 40px 0 40px; width: calc(100% - 80px);} body[id="Kontakt"] .sright {margin: 20px 40px 0 40px; width: calc(100% - 80px);} } @media (max-width: 482px) { body[id="Kontakt"] div.textblock {margin: 20px 5px 0 5px; width: calc(100% - 10px);} body[id="Kontakt"] .sright {margin: 20px 5px 0 5px; width: calc(100% - 10px);} body[id="Kontakt"] div.textblock h2 { padding: 15px 0px 10px 0px;} body[id="Kontakt"] .cont_form form {margin:0;width: 100% !important;} } body[id="Kontakt"] .cont_form form {margin:0;width: calc(100% - 10px);} body[id="Kontakt"] #ibox1 {width:calc(100% - 2px);} body[id="Kontakt"] .teaser-boxes-content .link {text-align:left;margin-left:10%;margin-bottom:20px;} body[id="Kontakt"] .teaser-boxes-content .link i.fa-envelope {font-size:140%;} body[id="Kontakt"] .teaser-boxes-content .link i.fa-phone {font-size:140%;} body[id="Kontakt"] .teaser-boxes-content .link i.fa-map-marker {font-size:170%;} body[id="Kontakt"] .teaser-boxes-content {padding: 30px 20px 10px 20px;background-color: #ebebeb;} .opentime td {padding: 2px 10px 2px 10px;} .opentime table {width:100%;} @media (max-width: 400px) { .opentime td {padding: 0;} } #kont-inner-wrap {padding: 0 20px 0 20px} li.button {position:relative;left:-60px;} body[id="Kontakt"] a.button {position:relative;left:-60px;} body[id="Kontakt"] #zr {left:0px;} #sub_rezept, #sub_befund, #sub_rez_1, #sub_rez_2, #sub_bef_1, #sub_bef_2 {display:none;} .sub_action, .sub_action1, .sub_action2 { font-size: 16px; list-style-type: none; padding: 0; margin: 0; line-height: 40px !important; padding-bottom: 10px; left: -70px; position: relative; color: #777; } .sub_action1 { left: 0px; } .sub_action a {text-decoration: none; color: black;} .sub_action1 li a:hover {color: var(--color-main);} @media (max-width: 482px) { body[id="Kontakt"] .button {width:calc(100% + 56px);} body[id="Kontakt"] #zr {width:calc(100% - 10px);} body[id="Kontakt"] input.button {width:100%;} }