/* ------------- css reset ------------------------------------------- */ 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, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, li, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, header, section, footer, aside, nav, article, figure { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; line-height:1.3; } ul {padding:0px 0px 0px 18px;} /* abstand links, fuer aufzaehlungen im text (mit nic edit) */ ul.cp2_nav_menue, ul.cp2_nav_menue_1, ul.cp2_nav_menue_2, ul.cp2_nav_menue_3, /* menue block */ ul.cp2_nav_menue li ul, ul.cp2_nav_menue_1 li ul, ul.cp2_nav_menue_2 li ul, ul.cp2_nav_menue_3 li ul, ul.cp2_nav_menue_m, ul.polaroids{padding:0px;margin:0px;} /* submenue block, menues block mobil?, menues und polaroids kein abstand links */ body {line-height:1.3; color:black; background:white;} table {border-collapse:separate; border-spacing:0;} caption, th, td {text-align:left; font-weight:normal;} blockquote:before, blockquote:after, q:before, q:after {content:"";} blockquote, q {quotes:"" "";} /* HTML5 tags */ header, section, footer, aside, nav, article, figure {display:block;} .clear {clear:both;} /* ------------- css reset end ------------------------------------------- */ /* ------------- css separate long words ------------------------------------------- */ *{ -webkit-text-size-adjust: none; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* hyphens */ /* ------------- css div standart-einstellungen -------------------------------------- */ .cp2_clear { clear:both; } .cp2_left { float:left; } .margin-bottom_5 { margin-bottom:5px; } /* --- AF abstand unten --- */ .margin-top_5 { margin-top:5px; } /* --- AF abstand oben --- */ /* ------------- css text standart einstellungen -------------------------------------- */ body, td { font-family:'Montserrat', sans-serif;; font-size:16px; color:#463F39; font-weight:400; line-height:18px; } /* ------------- css links standart einstellungen -------------------------------------- */ a:link{color:#5E7B8C; text-decoration:none; font-size:16px; font-weight:normal;} a:visited{color:#5E7B8C; text-decoration:none; font-size:16px; font-weight:normal;} a:hover{color:#5E7B8C; text-decoration:none; font-size:16px; font-weight:normal;} body { background-color:#FDF8E3; } /* ------------- css farb-einstellungen fuer standartseiten, unter css.pl eingegeben -------------------------------------- */ small { font-size:0.75em; } .cp2_absatz small br{line-height:0.75em;} .cp2_absatz small a:link {font-size:1.00em;} big { font-size:1.35em; } /* ------------- css titelbild cover, 100% hoch, 100% breit -------------------------------------- */ #cp2_tb_cover { /* bildschirm wrap */ box-sizing:border-box; overflow: hidden; width:calc(100vw - % - %); /* 100% minus raender links und rechts */ height:calc(100vh - 130px - px); /* 100% minus raender oben und unten */ margin:0 auto; /* div zentrieren */ margin-top: 130px; /* rand/abstand oben, muss nach dem margin:0 auto; stehen */ display: flex; justify-content: center; /* inhalt zentrieren? */ align-items: center; /* inhalt zentrieren? */ } #cp2_tb_cover_innen { /* titelbild wrap */ box-sizing:border-box; margin:0 auto !important; margin-top:130px;max-width:px; width: 100%; height: 100%; } .cp2_titelbild { /* titelbild img oder slider */ box-sizing:border-box; display: block; width: 100%; height: 100%; object-fit: cover; } /* slick slider titelbild img */ #cp2_slick_slider_titelbild img { width: 100%; height: 100%; object-fit: cover; } /* slick slider divs */ /* .slick-list, #slide-show, .slider-wrapper, .slick-track, .slick-slide div, .slick-slide section { height: 100%; } */ /* lightbox (slider) war nicht vert. zentriert */ .slick-list, #slide-show, .slider-wrapper, .slick-track, #cp2_slick_slider_titelbild .slick-slide div, #cp2_slick_slider_titelbild .slick-slide section { height: 100%; } /* ------------- css titelbild 100% breit, abstand oben -------------------------------------- */ /* ------------- css titelbild cover, 100% hoch, 100% breit -------------------------------------- */ /* ------------- css titel/text einstellungen -------------------------------------- */ h1 { font-family:'Montserrat', sans-serif;; font-size:20px; color:#463F39; font-weight:400; text-align:center; line-height:25px; padding-bottom:30px;} /* Seitentitel */ h2 { font-family:'Playfair Display', serif; font-size:45px; color:#463F39; text-align:center;line-height:px; padding-bottom:50px;} /* Seitenuntertitel */ h3 { font-family:'Playfair Display', serif; font-size:35px; color:#463F39; padding-bottom:25px; } /* Absatztitel */ h4 { } /* Absatz Untertitel */ .cp2_absatz { font-family:'Montserrat', sans-serif;; font-size:18px; font-weight:400; color:#463F39; font-weight:normal; line-height:30px; } /* absatz =

*/ /* ------------- css zeilenschaltung
-------------------------------------- */ br { line-height:15px; } .cp2_center_wrap h3 { margin-bottom:5px; padding-bottom:5px !important;} .cp2_center_wrap h3 { padding-top:25px !important; } /* ------------- css textfeld einstellungen -------------------------------------- */ .cp2_textfeld a:link{color:; text-decoration:none; font-size:18px; font-weight:bold;} .cp2_textfeld a:visited{color:; text-decoration:none; font-size:18px; font-weight:bold;} .cp2_textfeld a:hover{color:; text-decoration:none; font-size:18px; font-weight:bold;} .cp2_textfeld {clear:both; overflow:hidden;} /* ---------- individuelle textfeldabstaende ---------- */ #cp2s1_1tf2{ margin-bottom:80px !important; } #cp2s4tf2{ margin-bottom:60px !important; } #cp2s4tf3{ margin-bottom:60px !important; } #cp2s4tf4{ margin-bottom:60px !important; } #cp2s4tf6{ margin-bottom:60px !important; } #cp2s5_1tf2{ margin-bottom:60px !important; } #cp2s5_1tf3{ margin-bottom:60px !important; } #cp2s5_1tf4{ margin-bottom:60px !important; } #cp2s5_1tf5{ margin-bottom:60px !important; } #cp2s6tf2{ margin-bottom:80px !important; } #cp2s6tf3{ margin-bottom:80px !important; } #cp2s6tf7{ margin-bottom:80px !important; } #cp2s6tf4{ margin-bottom:80px !important; } #cp2s6tf5{ margin-bottom:80px !important; } #cp2s6tf6{ margin-bottom:80px !important; } /* ---------- css maximale breite der einzelnen textbilder ---------- */ #cp2s5_1tf2 .cp2_tbild{max-width:1000px; width:100% !important;} /* (vert. zentriert) */ #cp2s5_1tf3 .cp2_tbild{max-width:1000px; width:100% !important;} /* (vert. zentriert) */ #cp2s5_1tf4 .cp2_tbild{max-width:1000px; width:100% !important;} /* (vert. zentriert) */ #cp2s5_1tf5 .cp2_tbild{max-width:1000px; width:100% !important;} /* (vert. zentriert) */ /* ---------- css textfelder inhalt vertikal zentrieren ---------- */ #hellblau {display:flex; align-items:center;} #grau {display:flex; align-items:center;} #hellblau {display:flex; align-items:center;} #grau {display:flex; align-items:center;} /* ---------- css breite der einzelnen textbilder (mit vert. zentrierung) unter ... px = 100% ---------- */ @media ( max-width:720px) { #hellblau .cp2_tbild{ width:100%; } #hellblau { display:block; } #grau .cp2_tbild{ width:100%; } #grau { display:block; } } /* textbild beim scrollen einblenden */ .cp2_tb_filter{ opacity:0; } /* sichtbarkeit 0% */ .cp2_tb_filter_end{ opacity:1; transition:opacity 0.8s; } /* sichtbarkeit 100%, 3 sec. */ /* Blur */ .cp2_tb_filter { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; } .cp2_tb_filter_end{ -webkit-filter: blur(0); filter: blur(0); } /* --- tobii zoom button groesse oder ausblenden --- */ .tobii-zoom__icon{ width:1.3em; height:1.3em; } /* ------------- css textbild -------------------------------------- */ /* fuer textbild mit Slick Slider vergroessern, sonst kommen immer abstaende um das bild */ .cp2_tbild_wrap, .cp2_tbild_wrap img { padding:0px; margin:0px;} .cp2_tbild_wrap img { border-width:0px !important; } /* fuer textbild mit Slick Slider vergroessern, sonst kommen immer abstaende */ h1, h2 { box-sizing:border-box; margin:0 auto; width:100%; } /* ---------- css abstand unter den textfeldern (standartabstand) ---------- */ .cp2_textfeld{ box-sizing:border-box; margin:0 auto; width:100%; margin-bottom:30px; } /* ------------- titel / utitel / text ausrichtung ------------- */ .c2_text_linksbuendig, .c2_text_linksbuendig h3, .c2_text_linksbuendig h4, .c2_text_linksbuendig p { text-align:left; } .c2_text_rechtsbuendig, .c2_text_rechtsbuendig h3, .c2_text_rechtsbuendig h4, .c2_text_rechtsbuendig p { text-align:right; } .c2_text_zentriert, .c2_text_zentriert h3, .c2_text_zentriert h4, .c2_text_zentriert p { text-align:center; } /* ----------------------------------------------------------------------------------------------------- */ /* standarttextfelder bild links/rechts/oben/unten */ /* ----------------------------------------------------------------------------------------------------- */ .cp2_standart_tf .cp2_tbild{ box-sizing:border-box; width:100%; margin-bottom:-5px; } /* textbild 100%, titel/text darunter oder darueber */ .cp2_standart_tf.cp2_bild_links .cp2_tbild_wrap{ box-sizing:border-box; display:inline-block; float:left; } /* abstand bild left zum text */ .cp2_standart_tf.cp2_bild_rechts .cp2_tbild_wrap{ box-sizing:border-box; display:inline-block; float:right; } /* abstand bild right zum text */ .cp2_standart_tf .cp2_text_wrap{ box-sizing:border-box; overflow:hidden; } /* abstand zwischen bild und textfeld - bei text links- und rechtsbuendig nur auf 1 seite abstand, bei text zentriert auf beiden seiten */ /* (.cp2_standart_tf.cp2_bild_links.c2_text_linksbuendig kein leerschritt, wichtig!!!) */ .cp2_standart_tf.cp2_bild_links .cp2_text_wrap { padding-left:20px; } /* bild links, abstand im text links */ .cp2_standart_tf.cp2_bild_rechts .cp2_text_wrap { padding-right:20px; } /* bild rechts, abstand im text rechts */ .cp2_standart_tf.cp2_bild_oben .cp2_text_wrap { padding-top:20px; } /* bild oben, abstand im text oben */ .cp2_standart_tf.cp2_bild_unten .cp2_text_wrap { padding-bottom:20px; } /* bild unten, abstand im text unten */ /* unter 720px bild/text untereinander (standarttextfelder) */ @media ( max-width:720px) { /* abstand links und rechts loeschen */ .cp2_standart_tf.cp2_bild_links .cp2_text_wrap { display:block; width:100%; padding-left:0px; } .cp2_standart_tf.cp2_bild_rechts .cp2_text_wrap { display:block; width:100%; padding-right:0px; } /* abstand oben oder unten */ .cp2_standart_tf.cp2_bild_links .cp2_text_wrap { padding-top:20px; } .cp2_standart_tf.cp2_bild_rechts .cp2_text_wrap { padding-top:20px; } /* float loeschen, bild gleich ausrichten wie text */ .cp2_standart_tf .lightbox_container { float:none !important; display:inline-block !important; } .cp2_standart_tf .cp2_tbild_wrap { float:none !important; display:inline-block !important; } } /* ----------------------------- standarttextfelder mit bild umfliessen -------------------------------- */ .cp2_standart_tf.cp2_bild_links.cp2_bild_umfliessen .cp2_tbild_wrap { margin-right:20px !important; } .cp2_standart_tf.cp2_bild_rechts.cp2_bild_umfliessen .cp2_tbild_wrap { margin-left:20px !important; } .cp2_standart_tf.cp2_bild_umfliessen .cp2_tbild_wrap {margin-bottom:5px !important; } .cp2_standart_tf.cp2_bild_umfliessen .cp2_text_wrap { padding-right:0px; padding-left:0px; overflow:visible; } /* titel & text wrap */ /* unter 720px bild/text untereinander (standarttextfelder) */ @media ( max-width:720px) { /* abstand links und rechts loeschen */ .cp2_standart_tf.cp2_bild_links.cp2_bild_umfliessen .cp2_tbild_wrap { margin-right:0px !important; margin-bottom:0px !important; } .cp2_standart_tf.cp2_bild_rechts.cp2_bild_umfliessen .cp2_tbild_wrap { margin-left:0px !important; margin-bottom:0px !important; } .cp2_standart_tf.cp2_bild_umfliessen .cp2_text_wrap { padding-top:20px !important; } /* titel & text wrap */ /*.cp2_standart_tf.cp2_bild_umfliessen .cp2_tbild { width:100% !important; } nww sonst wurde bei bild links das bild ein wenig beschnitten */ } /* ----------------------------------------------------------------------------------------------------- */ /* Bild 50% Text 50%, responsive (neu) */ /* ----------------------------------------------------------------------------------------------------- */ /* textfeld mit titel und absatz 50%/50% */ .cp2_fiftyfifty { box-sizing:border-box; margin:0 auto; width:100% !important; } /* textfeld 50%/50% */ .cp2_fiftyfifty .cp2_tbild_wrap { box-sizing:border-box; width:50% !important; display:inline-block; vertical-align:middle; } /* textbild 50%, -8px sonst ist unter dem bild immer ein abstand */ .cp2_fiftyfifty .cp2_tbild_wrap img{ box-sizing:border-box; margin-bottom:-8px !important; width:100%; } /* -8px sonst ist unter dem bild immer ein abstand */ .cp2_fiftyfifty .cp2_text_wrap { box-sizing:border-box; width:50% !important; display:inline-block; vertical-align:middle; } /* padding:5%; wrap fuer titel und absatz */ .cp2_fiftyfifty p{ box-sizing:border-box; width:100%; } /* text absatz */ /* abstand zwischen bild und textfeld - bei text links- und rechtsbuendig nur auf 1 seite abstand, bei text zentriert auf beiden seiten */ /* (.cp2_fiftyfifty.cp2_bild_links.c2_text_linksbuendig kein leerschritt, wichtig!!!) */ .cp2_fiftyfifty.cp2_bild_links .cp2_text_wrap, /* blocksatz bild links */ .cp2_fiftyfifty.cp2_bild_links.c2_text_linksbuendig .cp2_text_wrap, .cp2_fiftyfifty.cp2_bild_links.c2_text_rechtsbuendig .cp2_text_wrap { padding-left:5%; } .cp2_fiftyfifty.cp2_bild_rechts .cp2_text_wrap, /* blocksatz bild rechts */ .cp2_fiftyfifty.cp2_bild_rechts.c2_text_linksbuendig .cp2_text_wrap, .cp2_fiftyfifty.cp2_bild_rechts.c2_text_rechtsbuendig .cp2_text_wrap { padding-right:5% ; } .cp2_fiftyfifty.cp2_bild_rechts.c2_text_zentriert .cp2_text_wrap, .cp2_fiftyfifty.cp2_bild_links.c2_text_zentriert .cp2_text_wrap { padding-right:5%; padding-left:5%; } /* fiftyfifty mit bild zum vergroessern */ .cp2_fiftyfifty .lightbox_container { width:50%; display:inline-block; } .cp2_fiftyfifty .lightbox_container .cp2_tbild_wrap { width:100% !important; } .cp2_fiftyfifty .lightbox_container img{ width:100% !important; } .cp2_fiftyfifty h3 { } .cp2_fiftyfifty h4 { } .cp2_fiftyfifty p { } /* text im bild - absatz text */ /* unter 720px bild zentrieren, bild oben, text unten */ @media ( max-width:720px) { /* .cp2_fiftyfifty { text-align:center; } */ /* text-ausrichtung so belassen, wie sie ist */ /* .cp2_fiftyfifty.c2_text_linksbuendig{ text-align:left; } .cp2_fiftyfifty.c2_text_rechtsbuendig{ text-align:right; } .cp2_fiftyfifty.c2_text_zentriert{ text-align:center; } */ .cp2_fiftyfifty .cp2_text_wrap { width:100% !important; display:block !important; } /* wrap fuer titel und absatz */ /* .cp2_fiftyfifty.cp2_bild_rechts .cp2_text_wrap { margin-right:0% !important; } abstand rechts vom textfeld */ /* .cp2_fiftyfifty.cp2_bild_links .cp2_text_wrap { margin-left:0% !important; } abstand links vom textfeld */ .cp2_fiftyfifty .lightbox_container{ width:initial; } /* unter ... px das textbild in originalgroesse anzeigen */ .cp2_fiftyfifty .cp2_text_wrap { padding:10px 0px !important; } /* wrap fuer titel und absatz abstaende links/rewchts und oben/unten. !important braucht es */ .cp2_fiftyfifty .cp2_tbild_wrap{ width:100% !important; display:block !important; } /*unter 720px textbild 100%, titel/text darunter oder darueber */ .cp2_fiftyfifty .lightbox_container { width:100% !important; }/* textbildslider */ /*.cp2_fiftyfifty .cp2_slick_slider{ width:100% !important; } bildbreite originalbild, nicht mehr 100% */ /*.cp2_fiftyfifty .cp2_slick_slider{ width:100% !important; border:10px solid green; }*/ /* bildbreite originalbild, nicht mehr 100% */ .cp2_fiftyfifty.cp2_bild_rechts .cp2_text_wrap{transform: scaleY(-1);} .cp2_fiftyfifty.cp2_bild_rechts .cp2_tbild_wrap{transform: scaleY(-1);} .cp2_fiftyfifty.cp2_bild_rechts {transform: scaleY(-1);} } /* ------------- css textfeldbox einstellungen -------------------------------------- */ .cp2_textfeldbox { background-color:#2C3C5C; padding:20px; } .cp2_textfeldbox:hover{ background-color:#2C3C5C;} .cp2_textfeldbox h3, h2.cp2_textfeldbox_titel { color:#F7E29D; } .cp2_textfeldbox h4 { color:#FFF; } .cp2_textfeldbox .cp2_text_wrap { padding:10px; } .cp2_textfeldbox p, .cp2_textfeldbox_text { color:#FFF; } .cp2_textfeldbox a:link, .cp2_textfeldbox a:visited, .cp2_textfeldbox_text a:link, .cp2_textfeldbox_text a:visited{color:#F7E29D;text-decoration:none;} .cp2_textfeldbox a:hover, .cp2_textfeldbox_text a:hover{color:#F1D168;} /* ------------- css lightbox einstellungen -------------------------------------- */ #cp2_lightbox {clear:both;} .lightbox_container img { width:25%; } @media ( max-width:750px){ .lightbox_container img { width:50%; } } @media ( max-width:490px){ .lightbox_container img { width:100%; } } /* ------------- css einstellungen verschiedenes -------------------------------------- */ /* adressfeld */ .cp2_adressfeld, .cp2_adr_ib{ color:#463F39; font-family:'Montserrat', sans-serif;; font-size:18px; font-weight:400; line-height:30px; text-align:center;} .cp2_adressfeld a:link, .cp2_adressfeld a:visited {color:#463F39; font-family:'Montserrat', sans-serif;; text-decoration:none; font-size:18px; font-weight:normal;} .cp2_adressfeld a:hover {color:#7C92C2; font-family:'Montserrat', sans-serif;; text-decoration:none; font-size:18px; font-weight:normal;} .cp2_adressfeld .cp2_adr_cin{ display:inline-block;margin-top:25px; } .cp2_adr_ib{ display:inline-block; } /* adressfeld elemente untereinander und ohne bindestrich */ @media ( max-width:500px) { .cp2_adr_trennstrich{display:none;} .cp2_adr_ib{display:block;} } .cp2_sprachwahl_div{float:right;} /* sprachwahl_div */ #cp2_sprachwahl_im_menue .cp2_sprachwahl_div{float:none !important;width:100%;border:3px solid gold;} /* sprachwahl_div */ #cp2_sprachwahl_im_menue .cp2_sprachwahl{float:none !important;width:100%;border:3px solid lime;} /* sprachwahl_div */ /* ------------- css sprachwahl einstellungen -------------------------------------- */ .cp2_sprachwahl{float:left; margin-right:5px; color:#463F39; font-family:'Montserrat', sans-serif;; font-size:18px; font-weight:400; text-transform: uppercase;} .cp2_sprachwahl a:link, .cp2_sprachwahl a:visited {color:#463F39; font-family:'Montserrat', sans-serif;; text-decoration:none; font-size:18px; font-weight:normal;} .cp2_sprachwahl a:hover {color:#7C92C2; font-family:'Montserrat', sans-serif;; text-decoration:none; font-size:18px; font-weight:normal;} /* impressum */ .cp2_impressum, .cp2_urheber{ float:left; margin-right:5px; font-family:'Montserrat', sans-serif;; font-size:12px; font-weight:400; color:#463F39; margin-bottom:16px; } .cp2_impressum a:link, .cp2_impressum a:visited{ float:left; font-size:12px; color:#463F39; text-decoration:none; } .cp2_impressum a:hover{ float:left; font-size:12px; color:#7C92C2; text-decoration:none; } .cp2_impressum_floater{ display:inline-block; overflow:hidden; margin:0 auto; } .cp2_impressum_wrap{ display:block; overflow:hidden; } /* cookie-richtlinie neu 2022 */ /* seite abdunkeln */ /* #cp2_cookie_bg{ top:0px; position:fixed; z-index:9998; width:100%; height:100%; background-color:rgba(0,0,0,0.35); } */ /* braucht es, damit es ein margin um #cp2_cookie_wrap machen kann */ #cp2_cookie_wrapper{ box-sizing:border-box; z-index:9999; position:fixed; right:10px; bottom:10px; width:100%; max-width:400px; min-width:280px; height:100%; max-height:650px; min-height:482px; padding:15px; } #cp2_cookie_wrap{ box-sizing:border-box; position: relative; width:100%; height:100% !important; padding:20px; border-radius: 15px; background-color:white; border:2px solid lightgrey; } #cp2_cookie_text{ box-sizing:border-box; width:100%; height: calc(100% - 325px); text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#484848; overflow:auto; line-height:22px; } #cp2_cookie_titel{ box-sizing:border-box; display:inline-block; width: calc(100% - 65px); /* min-width:210px; */ float:left; /* height:50px; */ text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold; color:#484848; } #cp2_cookie_close{ box-sizing:border-box; width:65px; height:50px; padding-right:3px; float:left; text-align:right; } #cp2_cookie_preferences{ box-sizing:border-box; width:100%; height:145px;; padding:15px 0px 0px 0px; text-align:left; font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#484848; } #cp2_cookie_preferences img{filter: grayscale(1);} .cp2_cookie_wahl{ box-sizing:border-box; margin-bottom:4px; background-color:#f2f2f2; /* #e8e8e8 */ } .cp2_cookie_checkbox{ box-sizing:border-box; padding:5px 5px 5px 5px; display:inline-block; overflow:hidden; cursor:pointer; float:left; clear:both; } .cp2_cookie_cb_title{ box-sizing:border-box; padding:8px 5px 8px 5px; display:inline-block; overflow:hidden; float:left; } .cp2_cookie_info{ box-sizing:border-box; padding:8px 5px 8px 5px; display:inline-block; overflow:hidden; float:right; cursor:pointer; } #cp2_cookie_buttons{ box-sizing:border-box; width:100%; height:130px;; } #cp2_cookie_buttons span{ box-sizing:border-box; width:100%; text-align:center; padding:9px 20px; display:block; font-family: Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; margin-top:4px; cursor:pointer; border-radius:5px; } #button_alle{ background-color:#2C3C5C; border:2px solid #2C3C5C; color:#FFF; } #button_alle:hover{ background-color:#7C92C2; color:#FFF; } #button_auswahl, #button_ablehnen{ border:2px solid #e8e8e8; color:#707070; } #button_auswahl:hover, #button_ablehnen:hover{background-color:#e8e8e8; color:#707070; } @media ( max-width:430px) { #cp2_cookie_wrapper{ bottom:initial; right:initial; top:50%; left:50%; transform: translate(-50%, -50%); } #cp2_cookie_titel{ font-size:23px !important; } } /* angebot preis */ .cp2_angebot_preis{ color:#FFF; } .cp2_angebot_p_abstand{ } .cp2_angebote_banner_bg{ background-color:#fff; } /* ------------- css angebot banner einstellungen -------------------------------------- */ .cp2_angebote_banner_text_wrap{ padding:0px 0px 0px 0px; overflow:hidden; } .angebot_ausblenden { display:none; } .cp2_angebote_banner_umbruch{clear:both;} .cp2_angebot_banner{ display:none; position: relative; overflow:hidden; float:left; box-sizing:border-box; width:250px; } h2.cp2_angebot_titel_balken {color:#FFF; background-color:#7C92C2; padding:5px 0px 5px 0px; text-align:center; margin-bottom:20px;} .cp2_angebot_banner h3{ /* Angebote Banner Titel */ } .cp2_angebot_banner h4 { /* Angebote Banner Titel */ font-family:; } .cp2_angebote_banner_absatz{ /* Angebote Banner Text */ overflow:hidden; } .cp2_angebot_banner_preis{ /* Angebote Banner Preis */ color:#FFF; } a.cp2_buttonlink:link, a.cp2_buttonlink:visited, a.cp2_buttonlink{ display:inline-block; background-color:#f5c63b; color:#FFF; font-size:20px; font-weight:bold; text-decoration:none; padding:10px 15px; border:1px solid #FDF8E3; margin:5px 5px 0px 0px; } a.cp2_buttonlink:hover{ color:#FFF; background-color:#2C3C5C; } /* ------------- css preisliste einstellungen -------------------------------------- */ .cp2_tab_responsive{ overflow: auto; } /* preisliste scrollen, wenn groeßer als fensterbreite */ /* preisliste gesamte tabelle */ .cp2_preisliste_tab { background-color:#fff; width:100%; border-spacing:0px; margin-bottom:30px; } table.cp2_preisliste_tab tr:nth-child(2n){ background-color:#FEFCF4; } /* preisliste nur zellen */ .cp2_preisliste_tab td{ padding:15px; vertical-align:middle;} /* Preisliste Titelzeile */ .cp2_preisliste_titelzeile{ background-color:#7C92C2; color:#FFF; font-size:25px; text-align:center; } /* Preisliste Eckfeld */ .cp2_preisliste_eckfeld{ text-align:left; vertical-align:middle !important;} .cp2_preisliste_datum .cp2_preisliste_feldoben_titel{ font-weight:bold; } /* Preisliste Datum */ .cp2_preisliste_datum{ font-size:18px; text-align:left; vertical-align:top !important;white-space: nowrap;} /* Preisliste Zimmertyp */ .cp2_preisliste_zimmertyp{ font-size:20px; text-align:left; vertical-align:middle !important;} /* preisliste preise */ .cp2_preisliste_preise{ font-size:18px; text-align:left; } /* Preisliste Fusszeile */ .cp2_preisliste_fusszeile{ text-align:left; } /* Preisliste Zwischenzeile */ .cp2_preisliste_zwischenzeile{ background-color:#7C92C2; color:#FFF; font-size:20px; text-align:left; } /* Urheber Tabelle */ .cp2_urheber_tab { width:100%; background-color:grey; border-spacing:1px; border:0px grey solid; } /* Preisliste Titelzeile */ .cp2_urheber_tab th{ font-size:16px; color:grey; } /* tabelle zellen */ .cp2_urheber_tab td { font-size:14px; line-height:22px; color:grey; } /* tabelle zellen + titelzeile */ .cp2_urheber_tab td, .cp2_urheber_tab th{ padding:5px; border:0px grey solid; background-color:white; height:20px !important; vertical-align:top; } .cp2_urheber_tab a:link, .cp2_urheber_tab a:visited{ color:navy; text-decoration:underline; font-weight:bold; font-size:14px; } .urheber_img img{ max-width:200px; max-height:200px;} td.urheber_img { width:200px; text-align:center; } /* xxxxxxxxxxxxxxxxxxxxxxxxxx css anfrage einstellungen xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */ /* alle inputfelder und divs box-sizing:border-box; */ .cp2_AF_wrapper, .cp2_AF_block, .cp2_AF_wrap{ box-sizing:border-box; } #cp2_AF_wrap_stadt .cp2_AF_Nr, #cp2_AF_wrap_stadt .cp2_AF_Str { box-sizing:border-box; } #cp2_AF_wrap_stadt .cp2_AF_Str { box-sizing:border-box; } #cp2_AF_wrap_fname, #cp2_AF_wrap_tel, #cp2_AF_wrap_land, #cp2_AF_wrap_abreise { box-sizing:border-box; } #cp2_AF_wrap_name, #cp2_AF_wrap_email, #cp2_AF_wrap_stadt, #cp2_AF_wrap_anreise { box-sizing:border-box; } #cp2_AF_wrap_erwachsene, #cp2_AF_wrap_kinder, #cp2_AF_wrap_zimmertyp, #cp2_AF_wrap_bemerkungen {box-sizing:border-box;} .cp2_AF_links, .cp2_AF_rechts { box-sizing:border-box; font-weight:normal; } .cp2_AF_feld, .cp2_AF_bemerkung, .cp2_AF_datum, .cp2_AF_personen, .cp2_AF_alter_kind { box-sizing:border-box; } /* wrapper um die ganze anfrage, div aussen */ .cp2_AF_wrapper { overflow:hidden; margin:0 auto; width:100%; max-width:1200px; margin-top:50px; margin-bottom:50px; font-family:'Montserrat', sans-serif;; font-size:20px; font-weight:400; text-align:left; } /* wrapper aussen */ .cp2_AF_feld{ font-family: inherit; } /* text in den formularfeldern in der standartschrift */ .cp2_AF_wrapper a { color:; font-size:20px; } /* umschliesst ganze form */ .cp2_AF_block { /* wrap um die ganze anfrage, div innen */margin:0 auto; padding:30px; } /* wrap innen */ /* wrap um jedes feld (titel + inputfeld), auch Datenschutzbestimmungen, abschicken?, *pflichtfelder */ .cp2_AF_wrap { width:100%; overflow:hidden;margin-bottom:20px;} /* ------------- css formularfelder -------------------------------------- */ .cp2_AF_feld{ width:420; font-size:18px; font-weight:normal; background-color:#FFFEF9; border: 1px solid #AAA099; padding-top:12px; padding-right:10px; padding-bottom:12px; padding-left:10px; margin-top: 10px; margin-right:10px; margin-bottom:10px; } .cp2_AF_feld:hover{ background-color:#FFF !important; } .cp2_AF_feld::placeholder{ opacity:1; } .cp2_AF_checkbox{margin-left:0px;} /* wrap css PLZ / Ort */ #cp2_AF_wrap_stadt .cp2_AF_Nr { width:24%; margin-right:2% !important; float:left; } #cp2_AF_wrap_stadt .cp2_AF_Str { width:74%; margin-right:0%; float:left; } /* wrap css Nr / Strasse */ #cp2_AF_wrap_strasse .cp2_AF_Nr { width:24%; margin-right:0%; float:left; } #cp2_AF_wrap_strasse .cp2_AF_Str { width:74%; margin-right:2% !important; float:left; } /* wrap titel 100% breit - div um titel der input felder */ .cp2_AF_links, .cp2_AF_rechts { width:100% !important; overflow:hidden; } /* felder alle input felder = 100% */ .cp2_AF_feld, .cp2_AF_bemerkung, .cp2_AF_datum, .cp2_AF_personen { width:100%; } /* felder anrede, anreise/abreise, auswahl felder auch 100% oder besser kuerzer? */ .cp2_AF_anrede, .cp2_AF_anreise, .cp2_AF_auswahl { width:100% !important; } .cp2_AF_dropdown { -webkit-appearance: textfield; border-radius:0px; } #cp2_AF_wrap_verpflegung{ padding-bottom:10px; }.cp2_AF_blocktitel{ box-sizing:border-box; } .cp2_AF_links { margin-bottom:10px; } /* felder input feld fuer eingabe alter kinder sind nur 50px breit */ .cp2_AF_alter_kind { width:50px !important; margin:5px; } #Kinder{ margin-bottom:10px !important; } .cp2_AF_Kinder_Alter_Geschlecht{ float:left; margin-top:0px !important; } /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx breiten und floaten der input felder xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */ /* input felder immer 100%, bleiben auch 100% - nur der/die wrapper aendern sich bei responsive */ /* wrap felder links, 50% breit */ #cp2_AF_wrap_anreise, #cp2_AF_wrap_erwachsene, #cp2_AF_wrap_name, #cp2_AF_wrap_email { box-sizing:border-box; width:49%; margin-right:2%; float:left; } /* wrap felder rechts, 50% breit */ #cp2_AF_wrap_abreise, #cp2_AF_wrap_kinder, #cp2_AF_wrap_fname, #cp2_AF_wrap_tel { box-sizing:border-box; width:49%; float:left; } /* wrap felder 100% breit - felder, abschicken, *pflichtfelder, ... */ #cp2_AF_wrap_zimmertyp, #cp2_AF_wrap_verpflegung, #cp2_AF_wrap_blocktitel_1, #cp2_AF_wrap_anrede, #cp2_AF_wrap_bemerkungen, #cp2_AF_wrap_privacy_title, #cp2_AF_wrap_privacy_text, #cp2_AF_wrap_privacy, #cp2_AF_wrap_privacy_title, #cp2_AF_wrap_privacy_text, #cp2_AF_wrap_submit { box-sizing:border-box; width:100%; overflow:hidden; } @media ( max-width:960px) { .cp2_AF_wrap { width:100% !important; margin-right:0%; } /* alle felder wraps 100% breit */ } /* ------------- css formular button -------------------------------------- */ .cp2_submit, .cp2_AF_utyp_button{ font-family:'Playfair Display', serif; font-size:18px; color:#FFF; background-color:#7C92C2; border:1px solid #FDF8E3; padding:12px; padding-top:8px; padding-right:15px; padding-bottom:8px; padding-left:15px; margin-top:10px; cursor: pointer; display:inline-block; } .cp2_AF_utyp_button{ margin-bottom:25px; margin-top:-5px; margin-top:5px; } .cp2_submit:hover, .cp2_AF_utyp_button:hover{ color:#FFF; background-color:#F1D168; } /* abstand lightbox-bilder responsive */ .lightbox_container img{margin:0px px px 0px;} .cp2_photoalbum_links{ box-sizing:border-box; float:left; text-align:left; padding:15px 0px 15px 0px; width:50%; } .cp2_photoalbum_links_wrap{ box-sizing:border-box; overflow:hidden; } /* ----------------- titelbild slick slider --------------- */ .cp2_titelbild .slick-prev {z-index:99; left:0px; margin-left:0px; padding-left:20px; text-align:left; width:100px; opacity:0.8;} /* pfeile ein-/ausblenden (transparenz) */ .cp2_titelbild .slick-next {z-index:99; right:0px; margin-right:0px; padding-right:20px; text-align:right; width:100px; opacity:0.8;} /* pfeile ein-/ausblenden (transparenz) */ .cp2_titelbild .slick-prev:hover { opacity:1; } /* ein-/ausblenden hover (transparenz) */ .cp2_titelbild .slick-next:hover { opacity:1; } /* ein-/ausblenden hover (transparenz) */ #cp2_slick_slider_titelbild, #cp2_slick_slider_titelbild img {width:100%;} #cp2_slick_slider_titelbild img{ margin-bottom:-6px; } /* ----------------- textbild slick slider css einstellungen --------------- */ .cp2_tbild_wrap .slick-prev{ left:0px; padding-left:10px; text-align:left; overflow:visible; width:30%; } /* klickbares feld, bild zurueck */ .cp2_tbild_wrap .slick-next{ right:0px; padding-right:10px; text-align:right; overflow:visible; width:30%; } /* klickbares feld, bild vor */ .cp2_tbild_wrap .slick-prev, .cp2_tbild_wrap .slick-next { z-index:99; height: 100%; height: -webkit-calc(100% - 0px); height: -moz-calc(100% - 0px); height: calc(100% - 0px); /* - ???px : footer (bildtitel + count) vom klickbaren feld abziehen */ top:50%; top: -webkit-calc(50% - 0px); top: -moz-calc(50% - 0px); top: calc(50% - 0px); - ???/2px : halben bildtitel von der mitte abziehen, damit es trotzdem vertikal zentriert ist */ } .cp2_tbild_wrap .slick-prev::before { float:left; background-image:url(https://www.cms24.it/cp2/pic/arrow_white_fine_left.png);display:block; } /* pfeil bild zurueck individuell */ .cp2_tbild_wrap .slick-next::before { float:right; background-image:url(https://www.cms24.it/cp2/pic/arrow_white_fine_right.png); } /* pfeil bild vor individuell */ .cp2_tbild_wrap .slick-prev::before, .cp2_tbild_wrap .slick-next::before { box-sizing:border-box; /* display:block; */ color:rgba(255, 0, 0, 0); /* originaler pfeil war text, jetzt transparent */ background-position: center; background-repeat: no-repeat; background-size: 60%; /* background-size: 40px 40px; */ width:40px; height:40px; background-color:rgba(0, 0, 0, 0.7); border-radius:50%; } .cp2_tbild_wrap .slick-prev:hover::before { background-color:rgba(0, 0, 0, 0.85); } /* buttons hover */ .cp2_tbild_wrap .slick-next:hover::before { background-color:rgba(0, 0, 0, 0.85); } /* buttons hover */ .cp2_tbild_wrap .slick-slide { margin:0px; opacity:.2; } /* transition: all ease-in-out .3s; sonst gibt es fehler bei slick lightbox */ .cp2_tbild_wrap .slick-active { opacity:1; } /* war .5 - bei textbildern war kein unterschied, beim bannerslider war das naechste bild transparent */ .cp2_tbild_wrap .slick-current { opacity:1; } .cp2_tbild_wrap .slick-slide img { width:100%; height:auto; margin-bottom:0px; } /* bilder groesse 100% vom slider ??? reschensee problem? */ .cp2_tbild_wrap.cp2_slick_slider { width:100%; } /* auch cp2_tbild_wrap ist 100% breit - neu 11.2022 */ .cp2_tbild_wrap .cp2_textbild_titel, .cp2_tbild_wrap .cp2_textbild_titel a:link {float:left;margin-top:0px;text-align:left; font-family: Arial, Helvetica, sans-serif; font-size:20px; color:#403231; padding:10px 0px 10px 0px; } /* bildtitel */ .cp2_tbild_wrap .cp2_textbild_count {float:right;margin-top:0px; font-family: Arial, Helvetica, sans-serif; font-size:20px; color:#403231; padding:10px 0px 10px 0px; } /* bildzaehler */ /* .cp2_tbild_wrap img{ margin-bottom:0px; } */ .cp2_tbild_wrap .cp2_pic_footer { height:40px; display:block;} /* footer hoehe */ /* ----------------- lightbox geoeffnet slick slider --------------- */ .slick-lightbox .slick-slider{ width:100%; max-width:1100px; margin:0 auto; } /* das feld um den geoeffneten lightbox-slider */ .slick-lightbox .slick-slider img{ width:100%; max-width:1000px; } /* das (lightbox?)slider-bild */ .slick-lightbox .cp2_slick_caption { margin-top:0px !important; padding-top:5px; color:#fff; } /* bildtitel/bildcount, bild in geoeffnetem lightbox-slider */ .slick-lightbox-close{ top: 10px; right: 10px; height: 50px; width: 50px; } /* box-sizing:border-box; border: 3px solid lime; close symbol box, lightbox-slider */ .slick-lightbox-close::before{ font-size:60px; opacity: 1;} /* box-sizing:border-box; border: 3px solid gold; close symbol, lightbox-slider */ /* ----------------- lightbox slick slider klickbare flaeche --------------- */ /* flaeche prev/next - hoehe war 75%, jetzt 16% dann ist mehr flaeche zum bilder wischen */ .slick-lightbox .slick-prev, .slick-lightbox .slick-next { z-index:999; width:80px; min-height:40px; height: 16%; height: -webkit-calc(16% - 0px); height: -moz-calc(16% - 0px); height: calc(16% - 0px); /* hoehe klickbares feld - footerhoehe px : footer (bildtitel + count) vom klickbaren feld abziehen */ margin-top:-0px; /* halben footer nach oben verschieben, damit button vertikal zentriert ist */ } .slick-lightbox .slick-prev{ margin-left:-10px; } /* flaeche prev */ .slick-lightbox .slick-next{ margin-right:-10px; } /* flaeche next */ /* ----------------- lightbox slick slider klickbare flaeche hover --------------- */ /* ----------------- lightbox slick slider buttons prev next --------------- */ /* original button ist transparent, ausgeblendet (letzte 0 ist transparenz), neuen button (meiner) als hintergrund */ .slick-lightbox .slick-prev::before { float:left; background-image:url(https://www.cms24.it/cp2/pic/arrow_black_left.png); display:block; } /* pfeile ein-/ausblenden (transparenz) */ .slick-lightbox .slick-next::before { float:right; background-image:url(https://www.cms24.it/cp2/pic/arrow_black_right.png); display:block; } /* pfeile ein-/ausblenden (transparenz) */ .slick-lightbox .slick-prev::before, .slick-lightbox .slick-next::before { box-sizing:border-box; color:rgba(255, 0, 0, 0); /* text farbe, originale pfeile waren text, transparent/ausgeblendet */ background-position: center; /* neue pfeile png */ background-repeat: no-repeat; background-size: 40px 40px; background-size: 60%; width:40px; height:40px; /* display:block; */ background-color:rgba(255, 255, 255, 0.7); border-radius:50%; } /* buttons hover */ .slick-lightbox .slick-prev:hover::before { background-color:rgba(255, 255, 255, 0.9); } /* button bei hover leichte transparenz */ .slick-lightbox .slick-next:hover::before { background-color:rgba(255, 255, 255, 0.9); } /* button bei hover leichte transparenz */ /* ----------------- lightbox slick slider bild, bildtitel, bildcount --------------- */ #cp2_slick_slider_lb img{ margin-bottom:0px; } /* lightbox bilder unter ...px als slider */ #cp2_slick_slider_lb .cp2_textbild_titel{ padding:4px 0px 4px 8px; margin-top:0px; } /* lightbox bilder unter ...px als slider */ #cp2_slick_slider_lb .cp2_textbild_count{ padding:4px 8px 4px 0px; margin-top:0px; } /* lightbox bilder unter ...px als slider */ /* ----------------- lightbox slick slider auf kleinem monitor (smartphone), einstellungen vom textbild slider --------------- */ /* lightbox klickbare flaeche, bild vor/zurueck */ .cp2_lightbox_small .slick-prev{ left:0px; padding-left:10px; text-align:left; width:30%; } /* klickbare flaeche, bild zurueck, */ .cp2_lightbox_small .slick-next{ right:0px; padding-right:10px; text-align:right; width:30%; } /* klickbare flaeche, bild vor, */ .cp2_lightbox_small .slick-prev, .cp2_lightbox_small .slick-next { z-index:99; height: 100%; height: -webkit-calc(100% - 0px); height: -moz-calc(100% - 0px); height: calc(100% - 0px); /* - ???px : footer (bildtitel + count) vom klickbaren feld abziehen */ top:50%; top: -webkit-calc(50% - 0px); top: -moz-calc(50% - 0px); top: calc(50% - 0px); /* - ???/2px : halben bildtitel von der mitte abziehen, damit es trotzdem vertikal zentriert ist */ } /* nww klickbare flaeche hover, bild vor/zurueck */ /* .cp2_lightbox_small .slick-prev:hover{ } klickbare flaeche hover */ /* .cp2_lightbox_small .slick-next:hover{ } klickbare flaeche hover */ /* lightbox pfeil vor/zurueck */ .cp2_lightbox_small .slick-prev::before { float:left; background-image:url(https://www.cms24.it/cp2/pic/arrow_white_fine_left.png);display:block; } /* pfeil bild zurueck individuell */ .cp2_lightbox_small .slick-next::before { float:right; background-image:url(https://www.cms24.it/cp2/pic/arrow_white_fine_right.png); } /* pfeil bild vor individuell */ .cp2_lightbox_small .slick-prev::before, .cp2_lightbox_small .slick-next::before { box-sizing:border-box; color:rgba(255, 0, 0, 0); /* originalen pfeil ausblenden. war text, jetzt wird pfeil als bg image eingesetzt. */ background-position: center; background-repeat: no-repeat; background-size: 60%; /* background-size: 40px 40px; */ width:40px; height:40px; background-color:rgba(0, 0, 0, 0.7); border-radius:50%; } /* lightbox bild */ .cp2_lightbox_small .slick-slide img { width:100%; } /* bilder groesse 100% vom slider */ /* lightbox bildtitel, bildcount, footer */ .cp2_lightbox_small .cp2_textbild_titel, .cp2_lightbox_small .cp2_textbild_titel a:link {float:left; margin-top:5px; font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#403231; } /* border:1px solid lime !important;bildtitel, farbe von textbild untertitel */ .cp2_lightbox_small .cp2_textbild_count {float:right; margin-top:5px; font-family: Arial, Helvetica, sans-serif; font-size:13px; color:#403231; } /* bildzaehler, farbe von textbild untertitel */ .cp2_lightbox_small .cp2_pic_footer { height:40px; display:block;} /* footer hoehe */ @media only screen and (max-width:1250px) { .slick-lightbox .slick-prev{ margin-left:50px; width:60px; } /* klickbares feld links breite und position jetzt IM bild*/ .slick-lightbox .slick-next{ margin-right:50px; width:60px; } /* klickbares feld rechts breite und position jetzt IM bild */ } @media only screen and (max-width:950px) { .cp2_titelbild .slick-prev {width:45px !important; padding-left:15px;} /* pfeile ein-/ausblenden (transparenz) */ .cp2_titelbild .slick-next {width:45px !important; padding-right:15px;} /* pfeile ein-/ausblenden (transparenz) */ .slick-lightbox .slick-prev{ } /* lightbox bilder vergroessert, klickbares feld links */ .slick-lightbox .slick-next{ } /* lightbox bilder vergroessert, klickbares feld rechts */ .slick-lightbox .slick-prev::before, .slick-lightbox .slick-next::before { width:40px; height:40px; } /* pfeile */ } @media only screen and (max-width:850px) { .slick-lightbox .slick-prev{ margin-left:35px; width:55px; } /* lightbox bilder vergroessert, klickbares feld links */ .slick-lightbox .slick-next{ margin-right:35px; width:55px; } /* lightbox bilder vergroessert, klickbares feld rechts */ } @media only screen and (max-width:750px) { .slick-lightbox .slick-prev{ margin-left:25px; width:50px; } /* lightbox bilder vergroessert, klickbares feld links */ .slick-lightbox .slick-next{ margin-right:25px; width:50px; } /* lightbox bilder vergroessert, klickbares feld rechts */ .slick-lightbox .slick-prev::before, .slick-lightbox .slick-next::before { width:35px; height:35px; } /* background-size: 25px 25px; pfeile */ /* pfeile & abstaende kleiner auf smartphone ??? */ .cp2_lightbox_small .slick-next, #cp2_angebot_banner_slider .slick-next, .cp2_tbild_wrap .slick-next {width:40px;} /* pfeile */ .cp2_lightbox_small .slick-prev, #cp2_angebot_banner_slider .slick-prev, .cp2_tbild_wrap .slick-prev {width:40px;} /*pfeile */ .cp2_lightbox_small .slick-next::before, #cp2_angebot_banner_slider .slick-next::before, .cp2_tbild_wrap .slick-next::before {right:0px; margin-right:1%; } /* pfeile */ .cp2_lightbox_small .slick-prev::before, #cp2_angebot_banner_slider .slick-prev::before, .cp2_tbild_wrap .slick-prev::before {left:-20px;margin-left:-20px; margin-left:1%; } /* pfeile */ .cp2_lightbox_small .slick-prev::before, .cp2_lightbox_small .slick-next::before, #cp2_angebot_banner_slider .slick-prev::before, #cp2_angebot_banner_slider .slick-next::before, .cp2_tbild_wrap .slick-prev::before, .cp2_tbild_wrap .slick-next::before { background-size: 20px 20px; font-size:20px; background-position:center; text-align:center; } .cp2_titelbild .slick-prev {width:30px !important; padding-left:10px;} /* titelbild klickbarer bereich links */ .cp2_titelbild .slick-next {width:30px !important; padding-right:10px;} /* titelbild klickbarer bereich rechts */ } @media only screen and (max-width:650px) { .slick-lightbox .slick-prev{ margin-left:22px; width:45px; } /* lightbox bilder vergroessert, klickbares feld links */ .slick-lightbox .slick-next{ margin-right:22px; width:45px; } /* lightbox bilder vergroessert, klickbares feld rechts */ } @media only screen and (max-width:550px) { .slick-lightbox .slick-prev{ margin-left:15px; width:38px; } /* lightbox bilder vergroessert, klickbares feld links */ .slick-lightbox .slick-next{ margin-right:15px; width:38px; } /* lightbox bilder vergroessert, klickbares feld rechts */ } /* smartphone, open lightbox slider und textbild slider 100% breit */ @media only screen and (max-width:400px) { .slick-lightbox .slick-prev{ margin-left:-15px; width:30px; } /* lightbox bilder vergroessert, klickbares feld links */ .slick-lightbox .slick-next{ margin-right:-15px; width:30px; } /* lightbox bilder vergroessert, klickbares feld rechts */ .slick-lightbox .slick-slider img { box-sizing:border-box; width:calc(100% + 40px); margin-left:-20px; margin-right:-20px; } /* textbild 100% vom bildschirm, macht sonst immer 20px abstand links und rechts vom bild */ .slick-lightbox .cp2_slick_caption { margin-left:-10px; margin-right:-10px; } /* lightbox bilder vergroessert, bildtitel/bildcount wrap einruecken */ .cp2_lightbox_small .cp2_textbild_titel{ margin-left:10px; } /* smartphone lightbox slider, bildtitel einruecken */ .cp2_lightbox_small .cp2_textbild_count{ margin-right:10px; } /* smartphone lightbox slider, bildcount einruecken */ } /* lightbox ein/ausblenden, bilder in 2 groessen, responsive */ #cp2_slick_slider_lb{ box-sizing:border-box; } /* mobil slider statt lightbox */ .cp2_lightbox_big{ display:block; } .cp2_lightbox_small{ display:none; } .cp2_lightbox_small img{ width:100%; margin-bottom:3px; } @media only screen and (max-width:520px) { .cp2_lightbox_big{ display:none; } .cp2_lightbox_small{ display:block; } } /* ------------- css menue einstellungen -------------------------------------- */ /* umfassendes div fuer menueblock */ #cp2_block_menue { z-index:998; overflow:visible; /* menue-div umfasst menue */ width:1200px; /* breite vom menue-div */ } /* div fuer menue */ #cp2_menue { overflow:hidden; /* menue-div umfasst menue */ display:inline-block; float:right; /* menue ausrichten */ } /* Menueblock */ ul.cp2_nav_menue { list-style:none; } /* kein listenzeichen */ /* Menuebuttons Abstand zwischen Buttons, linie rechts von Buttons */ ul.cp2_nav_menue li { display:inline-block; margin-right:20px; } /* Menuebuttons hover */ /* letztes Element der Liste: keine linie rechts/unter, keinen Abstand rechts/unter dem Menuebutton */ ul.cp2_nav_menue li:last-child{ margin-right:0px; /* abstand rechts 2 buttons (menue vertikal) */ } /* Menuebuttons Links */ /* links haben Form einer Schaltfläche */ ul.cp2_nav_menue li a, ul.cp2_nav_menue li a:visited { display:block; /* link als button (block) */ color:#463F39; font-family:'Playfair Display', serif; font-size:23px; font-weight:normal; line-height:26px; text-decoration:none; text-align:right; padding:10px 0px 10px 0px; } /* Menuebuttons Links hover */ ul.cp2_nav_menue li a:hover, ul.cp2_nav_menue li a:active, ul.cp2_nav_menue li a:focus { color:#5E7B8C; /* link-farbe hover */ } /* trennzeichen ohne abstaende li/re */ .cp2_menue_trennzeichen, a.cp2_menue_trennzeichen:link, a.cp2_menue_trennzeichen:visited, a.cp2_menue_trennzeichen:hover { padding:10px 0px 10px 0px; } /* Desktop Menue, Main Menuepunkt aktiv */ ul.cp2_nav_menue li.cp2_mp_aktiv a, ul.cp2_nav_menue li.cp2_mp_aktiv a:focus{ text-decoration:none; color:#5E7B8C; } /* Desktop Menue, Sub Menuepunkt aktiv */ ul.cp2_nav_menue li.cp2_sub_mp_aktiv a, ul.cp2_nav_menue li.cp2_sub_mp_aktiv a:focus{ text-decoration:none; color:#FFF; background-color:#5E7B8C; } /* ------------- css drop-down menue einstellungen -------------------------------------- */ /* drop-down-menue, links/rechts floaten */ ul.cp2_nav_menue li { float:left; white-space:nowrap; /* kein zeilenumbruch, wenn browserfenster zu klein */ } /* submenue block */ ul.cp2_nav_menue li ul { position:absolute; width:260px; /* breite vom Untermenü, wird fuer den submenueblock verwendet, nicht fuer die buttonbreite */ left:-999em; /* menue wird auserhalb der seite angezeigt??? */ z-index:99; padding-top:10px; /* nur padding, kein abstand oben = abstand drop down menue vom hauptmenuepunkt */ } /* submenue-block (hover) abstand vom hauptmenue */ ul.cp2_nav_menue li:hover ul, ul.cp2_nav_menue li.sfHover ul { left:auto; /* abstand links */ top:auto; /* abstand oben = hoehe des desktop menuebuttons */ background-color:#FDF9E8; z-index:99; } /* submenue buttons, bg / text */ ul.cp2_nav_menue li ul li { width:260px; /* breite vom Untermenü */ height:40px; /* hoehe vom Untermenue */ border: 0px; list-style:none; } /* submenue buttons, links & visited links */ ul.cp2_nav_menue li ul li a, ul.cp2_nav_menue li ul li a:link, ul.cp2_nav_menue li ul li a:visited { font-family:'Montserrat', sans-serif;; text-align:left; font-size:16px; font-weight:400; padding:10px 20px 4px 20px; white-space:normal; /* submenue zeilenumbruch, wenn menuetitel zu lang */ color:#463F39; /* farbe textlink button */ background-color:#FDF9E8; /* bg farbe button */ height:26px; } /* submenue buttons hover, bg & links */ ul.cp2_nav_menue li ul li a:hover, ul.cp2_nav_menue li ul li.sfHover, ul.cp2_nav_menue li ul li a:active, ul.cp2_nav_menue li ul li a:focus { background-color:#5E7B8C; color:#FFF; } /* SubMenuepunkt aktiv */ ul.cp2_nav_menue li ul li.cp2_sub_mp_aktiv a, ul.cp2_nav_menue li ul li.cp2_sub_mp_aktiv a:focus { text-decoration:none; color:#FFF; background-color:#5E7B8C; height:26px; } ul.cp2_nav_menue li ul li:first-child { border: 0px; } /* ------------------------------------------------------------------ */ /* ------------- menue css anfang ----------------------------------- */ /* ------------------------------------------------------------------ */ /* ------------- Menue Link responsive ------------------------------ */ ul.cp2_responsive_link li { display:block; /* link als button (block) */ color:#463F39; text-decoration:none; padding:10px 10px 10px 10px; } /* -------------------------------------------------------------------- */ /* ------------- desktop menue css ------------------------------------ */ #cp2_block_menue{ position:fixed; top:75px; overflow:visible !important; } /* --------------------------------------------------------------------- */ /* ------------- bildschirm flaechen/absoften css ---------------------- */ #cp2_seite_abdunkeln, #cp2_seite_mobil_abdunkeln{ /* bildschirm transparent abdunkeln */ position:fixed; top:0px; left:0px; width:100%; height:120%; z-index:18; display:none; background-color:#FDF8E3; opacity:0.8; } #cp2_menue_bg_wrap{ /* menue bg wrap (mainm bg + subm bg) */ z-index:997; /* menue bg in den vordergrund */ position:absolute; display:none; } #cp2_menue_bg{ /* main menue bg */ position:fixed; top:0px; left:0px; width:50%; height:100%; z-index:997; background-color:#FDF8E3; opacity:1; } #cp2_submenue_bg{ /* sub menue bg */ position:fixed; top:0px; left:50%; width:100%; height:100%; z-index:996; display:none; background-color:#FDF8E3; opacity:1; } /* --------------------------------------------------------------------- */ /* ---------- menue buttons desktop & mobil (button+menue) ------------- */ #cp2_menue_desktop_button_wrap, #cp2_menue_mobil_button_wrap { z-index:999 !important; display:block; white-space:nowrap; } .cp2_hamburger_titel{ /* titel "MENÜ" */ font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:normal; display:block; float:left; height:50px; color:#FFF; padding:8px; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .cp2_menue_button{ float:left; } /* #cp2_menue_button_mobil */ #cp2_menue_button_mobil{ box-sizing:border-box; width:50px; height:50px; padding:4px; margin:0px; margin-right:10px; background-color:#7C92C2; } #cp2_menue_mobil_button_wrap{ box-sizing:border-box; position:fixed; top:60px; right:120px; width:150px; height:50px; } @media (max-width:620px) { #cp2_hamburger_titel_mobil { display:none; } /* MENÜ ausblenden */ } /* hamburger button css */ .cp2_menue_button { /* button desktop + mobil */ display:inline-block; float:left; background-color:#7C92C2;/**/ width:50px; height:50px; margin-right:10px; padding-top:4px; /*padding:10px;*/ } /* hamburger linien css */ .cp2_hamburger .cp2_line{ width: 30px; height: 3px; background-color: #FFF; display: block; margin: 8px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border-radius: 2px; } .cp2_hamburger:hover{ cursor: pointer; } #cp2_hamburger_desktop, #cp2_hamburger_mobil{ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* hamburger buttonactive css */ #cp2_hamburger_desktop.active, #cp2_hamburger_mobil.active{ animation: smallbig 0.6s forwards; } smallbig{ 0%, 100%{ -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50%{ -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } } #cp2_hamburger_desktop.active .cp2_line:nth-child(1), #cp2_hamburger_desktop.active .cp2_line:nth-child(2), #cp2_hamburger_desktop.active .cp2_line:nth-child(3), #cp2_hamburger_mobil.active .cp2_line:nth-child(1), #cp2_hamburger_mobil.active .cp2_line:nth-child(2), #cp2_hamburger_mobil.active .cp2_line:nth-child(3){ -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; /* war 0.1s */ } /* eventuell deaktivieren */ #cp2_hamburger_desktop.active .cp2_line:nth-child(2), #cp2_hamburger_mobil.active .cp2_line:nth-child(2){ opacity: 0; } #cp2_hamburger_desktop.active .cp2_line:nth-child(1), #cp2_hamburger_mobil.active .cp2_line:nth-child(1){ -webkit-transform: translateY(11px) rotate(45deg); -ms-transform: translateY(11px) rotate(45deg); -o-transform: translateY(11px) rotate(45deg); transform: translateY(11px) rotate(45deg); } #cp2_hamburger_desktop.active .cp2_line:nth-child(3), #cp2_hamburger_mobil.active .cp2_line:nth-child(3){ -webkit-transform: translateY(-11px) rotate(-45deg); -ms-transform: translateY(-11px) rotate(-45deg); -o-transform: translateY(-11px) rotate(-45deg); transform: translateY(-11px) rotate(-45deg); } /* #cp2_hamburger_desktop.active .cp2_line, #cp2_hamburger_mobil.active .cp2_line{ background-color:; } */ /* ------------------------------------------------------------------ */ /* ------------- mobile menue neu css ------------------------------- */ /* ------------------------------------------------------------------ */ #cp2_menue_mobil_box{ box-sizing:border-box; /* sonst addiert es padding zur groesse der box */ position:absolute; z-index:998; top:0px; right:0px; width:100%; padding:50px 0px 20px 0px; font-family: Arial, Helvetica, sans-serif; color:#fff; font-size:20px; line-height:45px; background-color:#FDF8E3 !important; } #cp2_menue_mobil_box_bg{ position:fixed; z-index:997; top:0px; right:0px; width:60%; min-width:100%; height:120%; background-color:#FDF8E3; opacity:1; } /* -------------------------------------------------------------------- */ /* ------------- mobile menue css ------------------------------------- */ #cp2_menue_mobil_wrap{ box-sizing:border-box; /* sonst addiert es padding zur groesse der box */ z-index:255; position:absolute; top:100px; right:0px; width:60%; min-width:100%; } /* Menuebuttons mobil css */ ul.cp2_nav_menue_m li a, ul.cp2_nav_menue_m li a:visited, ul.cp2_nav_menue_m li a:active{ display:block; background-color:#7C92C2; color:#fff; text-align:left; text-decoration:none; border-width:0px 0px 1px 0px; border-color:#7C92C2; border-style:solid; } .cp2_nav_menue_m li { cursor: pointer; } /* alle buttons mauszeiger pointer */ /* alle buttons innen - abstaende, font size */ ul.cp2_nav_menue_m li a,.cp2_menue_album { font-size:20px; letter-spacing:1px; padding:10px !important; padding-left:0px; } /* Menuebuttons mobil Hover css */ ul.cp2_nav_menue_m li a:hover { background-color:#2C3C5C; color:#FFF !important; } /* Hauptmenuepunkt ohne eigene Seite, auch bildergalerie, nicht verlinkt css */ .cp2_menue_album { display:block; /* link als button (block) */ line-height:19px; background-color:#7C92C2; color:#fff; border-width:0px 0px 1px 0px; border-color:#7C92C2; border-color:green; border-style:solid; } /* Mobiles Menue, Sub Menuepunkt aktiv */ ul.cp2_nav_menue_m li.cp2_sub_mp_aktiv a, ul.cp2_nav_menue_m li.cp2_sub_mp_aktiv a:focus{ text-decoration:none; color:#FFF !important; background-color:#2C3C5C !important; } /* Sub-Menuebuttons css */ ul.cp2_nav_menue_m li ul li a, ul.cp2_nav_menue_m li ul li a:visited, ul.cp2_nav_menue_m li ul li a:active { display:block; /* link als button (block) */ font-size:18px; letter-spacing:1px; background-color:#FDF8E3; color:#463F39; padding-left:30px !important; } /* Sub-Menuebuttons Hover css */ ul.cp2_nav_menue_m li ul li a:hover { background-color:#2C3C5C; color:#FFF; } /* menue block, submenue block keine aufzaehlungszeichen css */ ul.cp2_nav_menue_m, ul.cp2_nav_menue_m li ul{ display:block; padding:0px; margin:0px; list-style:none; } /* Mobiles Menue, Main Menuepunkt aktiv */ ul.cp2_nav_menue_m li.cp2_mp_aktiv a, ul.cp2_nav_menue_m li.cp2_mp_aktiv a:focus{ text-decoration:none; color:#FFF !important; background-color:#2C3C5C !important; } /* Menuebuttons Border - hauptmenuepunkt - hauptmenuepunkt ohne eigene seite, nicht verlinkt oder hauptmenuepunkt mit unterseite */ ul.cp2_nav_menue_m li a, .cp2_menue_album { border:0px 0px 1px 0px; border-style:solid; border-color:#7C92C2; } /* erstes Element der Liste: linie oben hinzufuegen */ ul.cp2_nav_menue_m li:first-child { border-top:1px solid #7C92C2; } /* --------------------------------------------------------------------------------------- */ /* ------------- desktop/mobil-menue wechseln css ---------------------------------------- */ /* --------------------------------------------------------------------------------------- */ /* ------------- ueber 1060px => mobil-menue ausblenden --------------------------------------------- */ @media only screen and (min-width:1060px) { #cp2_menue_mobil_button_wrap{display:none !important;} #cp2_menue_mobil_wrap{display:none !important;} #cp2_seite_mobil_abdunkeln{display:none !important;} } /* ------------- unter 1060px => desktop-menue ausblenden css ---------------------------------------- */ @media (max-width:1060px) { #cp2_menue_desktop_button_wrap{display:none !important;} #cp2_block_menue{display:none !important;} #cp2_menue_bg_wrap{display:none !important;} } /* ------------------------------------------------------------------ */ /* ------------- main css ------------------------------------------- */ /* ------------------------------------------------------------------ */ @charset "utf-8"; /* CSS Document */ /* ----- Farbe Textmarkierung ----- */ ::-moz-selection { /* Code for Firefox */ color: #FFF; background: #b5b5b5; } ::selection { color: #FFF; background: #b5b5b5; } .cp2_absatz{ font-weight: 400 !important; } b, strong, .cp2_textfeld a{ font-weight: 600 !important; } .cp2_textfeld{ max-width:1200px; } .cp2_textfeld_wrapper{ width:100%; max-width:100%; overflow:hidden; background-color:#F7E29D; padding-top:4%; } .cp2_textfeld, h1, h2{ padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .cp2_fiftyfifty { padding: 0px 3%; max-width: 100%; box-sizing: border-box; margin-bottom: 20px; } #cp2s2_2tf5.cp2_fiftyfifty, #cp2s3_1tf4.cp2_fiftyfifty, #cp2s3_2tf2.cp2_fiftyfifty, #cp2s4tf6.cp2_fiftyfifty { padding: 0px; } a.cp2_buttonlink:link, a.cp2_buttonlink:visited, a.cp2_buttonlink { min-width: 120px; text-align: center; box-sizing: border-box; font-weight: 500 !important; font-family: 'Playfair Display',serif; letter-spacing: 1.5px; } /* --- Anfrage und Buchen Button Header --- */ a.anfage_button, a.anfage_button:link, a.buchen_button, a.buchen_button:link, a.anfage_button:visited, a.buchen_button:visited, a.cp2_angebote_button, a.cp2_angebote_button:link, a.cp2_angebote_button:visited, a.cp2_angebote_button:visited{ display: inline-block; background-color: #F1D168; color: #FFF; font-size: 16px; text-decoration: none; padding: 12px 18px; margin: 5px 0px 0px 5px; font-weight: 500 !important; } a.anfage_button, a.anfage_button:link, a.anfage_button:visited{ background-color: #7C92C2; } a.anfage_button:hover, a.buchen_button:hover{ background-color: #2C3C5C; border:solid 1px #FDF8E3; } a.blau:link, a.blau:visited, a.blau { background-color:#7C92C2 !important; border:solid 1px #FDF8E3; } a.blau:hover { background-color:#2C3C5C !important; } a.grau:link, a.grau:visited, a.grau { background-color:#AAA099 !important; border:solid 1px #FDF8E3; } a.grau:hover { background-color:#F1D168 !important; border:solid 1px #FDF8E3; } .grau { display: inline-block; } header{ width:100%; position:fixed; top:0px; z-index:500; background-color: #FDF8E3; height: 130px; box-sizing: border-box; } .cp2_zusatztext_1{ position:fixed; top:20px; left:10%; overflow:hidden; } .cp2_zusatztext_1 img, .cp2_zusatztext_3 img{ width:100%; max-width:150px; } .cp2_zusatztext_2{ position: fixed; right: 15%; top: 10px; } /* Sprache */ .cp2_sprachwahl_div { position: fixed; right: 10%; top: 35px; } /* Menü Desktop */ #cp2_block_menue{ right: 10%; } /* Menu Mobil */ .cp2_menue_album{ padding-left: 20px !important; } .cp2_hamburger_titel{ color:#463F39; } /* Textfelder Startseite */ #hellblau.cp2_fiftyfifty .cp2_tbild_wrap, #blau.cp2_fiftyfifty .cp2_tbild_wrap, #grau.cp2_fiftyfifty .cp2_tbild_wrap{ width: 100% !important; } #hellblau.cp2_fiftyfifty .cp2_text_wrap, #blau.cp2_fiftyfifty .cp2_text_wrap, #grau.cp2_fiftyfifty .cp2_text_wrap{ width: 30% !important; display: inline-block; vertical-align: middle; position: relative; z-index: 20; margin-left: -30%; background-color: #7C92C2; height: 100%; overflow: hidden; opacity: 0.9; padding:3% !important; box-sizing:border-box; } #blau.cp2_fiftyfifty .cp2_text_wrap{ margin-right: -30%; margin-left: 0; background-color: #2C3C5C; } #grau.cp2_fiftyfifty .cp2_text_wrap{ background-color: #AAA099; } #hellblau.cp2_fiftyfifty h3, #blau.cp2_fiftyfifty h3, #grau.cp2_fiftyfifty h3{ color:#F1D168 !important; /* font-weight: bold; */ letter-spacing: 1.5px; font-size: 45px; } #hellblau.cp2_fiftyfifty .cp2_absatz, #blau.cp2_fiftyfifty .cp2_absatz, #grau.cp2_fiftyfifty .cp2_absatz{ color:#FFF !important; font-weight: 500; font-size: 20px; line-height: 1.5em; padding-bottom: 25px; letter-spacing: 1px; } #hellblau.cp2_fiftyfifty.cp2_bild_links .cp2_text_wrap, #grau.cp2_fiftyfifty.cp2_bild_links .cp2_text_wrap, #hellblau.cp2_fiftyfifty.cp2_bild_links.c2_text_linksbuendig .cp2_text_wrap, #grau.cp2_fiftyfifty.cp2_bild_links.c2_text_linksbuendig .cp2_text_wrap, #hellblau.cp2_fiftyfifty.cp2_bild_links.c2_text_rechtsbuendig .cp2_text_wrap, #grau.cp2_fiftyfifty.cp2_bild_links.c2_text_rechtsbuendig .cp2_text_wrap { padding-left: 0%; } .cp2_fiftyfifty.cp2_bild_links .cp2_text_wrap, .cp2_fiftyfifty.cp2_bild_links.c2_text_linksbuendig .cp2_text_wrap, .cp2_fiftyfifty.cp2_bild_links.c2_text_rechtsbuendig .cp2_text_wrap {padding-left: 5%; padding-right: 5%; box-sizing: border-box; } #seite_ohne_titelbild{ height: 200px; overflow: hidden; } main{ padding-top:50px; } /* Tabelle - Preislsite */ .cp2_preisliste_tab { max-width: 1200px; margin: 0 auto; padding: 0px; box-sizing: border-box; } #cp2s3_1tf2{ margin-bottom:50px; } .cp2_preisliste_datum { line-height: 25px; } .cp2_zusatztext_3{ padding:25px 5px; } .cp2_zusatztext_4{ width:100%; overflow:hidden; padding:25px 5%; box-sizing:border-box; background-color:#FFF; margin:25px 0px; } .cp2_zusatztext_4 img{ padding:0px 25px; } .cp2_zusatztext_4, .cp2_zusatztext_3 {text-align:center !important;} .cp2_zusatztext_5{ width:100%; overflow:hidden; padding:5px; box-sizing:border-box; background-color:#7C92C2; } /* --------------------------- media --------------------------- */ @media ( max-width:1300px) { #hellblau.cp2_fiftyfifty .cp2_text_wrap, #grau.cp2_fiftyfifty .cp2_text_wrap{width: 50% !important; margin-left: -50%;} #blau.cp2_fiftyfifty .cp2_text_wrap{width: 50% !important; margin-right: -50%;} .cp2_zusatztext_1 {left: 3%;} #cp2_block_menue, .cp2_sprachwahl_div {right: 3%;} } @media ( max-width:1060px) { .cp2_zusatztext_2 { right: 0;top: auto;bottom: 0 !important;width: 100%; } #cp2_menue_mobil_button_wrap {right: 1%;} .cp2_sprachwahl_div {top: 20px;} a.anfage_button, a.anfage_button:link, a.buchen_button, a.buchen_button:link, a.anfage_button:visited, a.buchen_button:visited { margin: 0px;width: 50%;float: left;box-sizing: border-box;text-align: center; } .cp2_impressum_wrap {padding: 0px 25px 50px 25px; width: 100%; max-width: 600px; margin: 0 auto; box-sizing: border-box; } } @media ( max-width:960px) { #hellblau.cp2_fiftyfifty .cp2_text_wrap, #blau.cp2_fiftyfifty .cp2_text_wrap, #grau.cp2_fiftyfifty .cp2_text_wrap{width: 100% !important; margin-left: 0%; } #hellblau { display: block; } h2, #hellblau.cp2_fiftyfifty h3, #blau.cp2_fiftyfifty h3, #grau.cp2_fiftyfifty h3{font-size: 35px;} } @media (max-width: 720px) { .cp2_fiftyfifty .cp2_text_wrap {padding: 10px 20px !important; } } @media ( max-width:620px) { .cp2_zusatztext_1 { left: 5%; } #cp2_menue_mobil_button_wrap {top: 60px; right: 1%; width: 50px; right: 4%;} .cp2_zusatztext_4 img{padding: 0px 25px 25px 25px;} }