/*-- Name: Alan Berry Maurerbetrieb, Celle-Scheuen Url: https://maurerbetrieb-berry.de Description: Alan Berry Maurerbetrieb, Celle-Scheuen | Englisches Cottage bauen, Bauunternehmen Celle Version: 2.0 (Relaunch Responsive) ______________ Webdesign by elf42 - Hameln Emmerthal */ /*-- _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ html { height:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { min-height:100%; background: url(img/00--hg-body.jpg) center top repeat; color: var(--f08); text-align:justify; } #bg { /* siehe unten bei #abschluss */ } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { /*border:0;*/ text-decoration:none; } table, td, div { /*border:0;*/ } /*-- _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ #kopf, #kopf-2, #quick, ul.q-nav, ul.q-nav > li, ul.nav, ol.breadcrumb, ol.breadcrumb > li, .c-flow, .c-mire, .c-mire:nth-child(2), .flex, .flex-2, ol.bc, ol.bc > li, ol.nav2, ol.nav2 > li, #abschluss, .sticky, #elf42 { display: flex; } #kopf { justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } @media only screen and (min-width: 1024px ) { #kopf { align-items: center; align-content: flex-start; flex-wrap: nowrap; } } /* ------------ */ #kopf-2 { justify-content: flex-start; align-items: stretch; flex-direction: column; } body#iza1 #kopf-2, body#home #kopf-2 { justify-content: flex-start; align-items: stretch; } /* ------------ */ ol.breadcrumb { flex-wrap: wrap; align-items: center; } ol.breadcrumb > li { align-items: flex-start; } /* ------------ */ .c-flow { justify-content: space-between; } .c-mire { justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap : wrap; } .c-mire:nth-child(2) { justify-content: flex-start; flex-direction: column; } .flex { justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } .flex-2 { justify-content: center; align-items: stretch; align-content: center; } .flex.flx { align-items: stretch; } /* ------------ */ #quick, ul.q-nav { justify-content: flex-end; flex-wrap: wrap; } /* ------------ */ ol.bc, ol.nav2 { justify-content: flex-start; flex-wrap: wrap; } ol.bc > li, ol.nav2 > li { align-items: stretch; } /* ------------ */ #abschluss { justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; } /* ------------ */ .sticky { align-items: center; align-content: space-between; flex-direction: column; } /* ------------ */ #elf42 { justify-content : flex-start; align-items : flex-start; } /*-- layout _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ body, header, #kopf, main, section.slogan, footer { margin:0; padding:0; } /* ------------ */ #bg, /* --- */ ol.breadcrumb, ol.bc, ol.nav2, /* --- */ .c-flow, .c-mi, .c-full, /* --- */ .hoch #elf42 { margin:0 auto 0 auto; padding:0; } /* ------------ */ #kopf, #kopf-2 { position: relative; } /*#logo { position: relative; }*/ label.menue { position: absolute; z-index:30; } nav#nav { position: relative; z-index:10;} footer { position: relative; } .sticky { position: fixed; z-index:50; } /* ------------ */ #bg, /* --- */ header, #kopf, /* --- */ #kopf-2, /* --- */ #quick, ul.q-nav, /* --- */ #breadcrumb, ol.breadcrumb, #bc, ol.bc, #nav2, ol.nav2, /* --- */ .c-flow, .c-mi, .c-full, /* --- */ footer, #abschluss, /* --- */ #elf42 { width: 100%; } /*main { margin: var(--ac) 0 0 0; padding:0; }*/ .c-flow, .c-full, .c-mi, /*.offer, */.bibu, .txbu, .box, .flex, .flex-2, section { margin: 0 0 var(--ab) 0; padding:0; } /* figure in der screen-content */ .c-full.bg-3, /* hinweise am ende der seiten leistungen */ .box section:nth-last-of-type(1) { margin:0; } .flex.flx { margin: 0; } .box, /*.flex, */.flex-2/*, .bibu, .txbu*/ { padding: var(--ab); } @media only screen and (max-width: 599px) { /* MAX ! */ .c-flow, .c-full, .c-mi, /*.offer, */.bibu, .txbu, .box, .flex, .flex-2, section { margin: 0 0 var(--ab) 0; padding:0; } .box, /*.flex, */.flex-2, .bibu, .txbu/*, [class*="col-"]*/ { padding: var(--am); } } @media only screen and (min-width: 1960px ) { .box, /*.flex,*/ .flex-2/*, .bibu, .txbu, [class*="col-"]*/ { padding: var(--a60); } } @media only screen and (max-width: 599px) { /* MAX ! */ #quick, #kopf label.menue, #breadcrumb, #bc, #nav-2, .c-flow, .c-mi, #elf42 { padding: 0 var(--am); } #kopf-2, #abschluss { padding: var(--a40) var(--am); } .c-full { padding: var(--a40) var(--am) 0 var(--am); } } @media only screen and (min-width: 600px ) { #quick, #kopf, #kopf label.menue, #breadcrumb, #bc, #nav-2, .c-flow, .c-mi, #elf42 { padding: 0 17%; } #kopf-2, #abschluss { padding: var(--a40) 17%; } .c-full { padding: var(--a40) 17% 0 17%; } } @media only screen and (min-width: 1024px ) { #kopf { padding: 0 5%; } } @media only screen and (min-width: 1260px ) { #kopf { padding: 0 15%; } } @media only screen and (max-width: 767px ) { /* MAX ! */ ol.breadcrumb { padding: var(--a15) 0 var(--a40) 0; margin: 0 0 var(--a30) 0; } ol.nav2 { padding: var(--a15) 0; } ol.bc { padding: 0 0 var(--a10) 0; } } @media only screen and (min-width: 768px) { ol.breadcrumb { padding: var(--a10) 0; margin: 0 0 var(--a60) 0; } ol.bc { padding: var(--a20) 0 var(--a30) 0; } } @media only screen and (max-width: 1023px ) { /* MAX ! */ /* 979px */ .c-flow { flex-direction: column; } .c-mire { flex-direction: column; } } @media only screen and (min-width: 1024px ) { /* 980px */ .c-mire:nth-child(1) { width: 70%; margin-right: var(--ab); } .c-mire:nth-child(2) { width: 30%; padding-top: 0; align-content : stretch; } } @media only screen and (max-width: 1023px) { /* MAX ! */} @media only screen and (max-width: 1023px ) { /* MAX ! */ /* 979px */ .c-mire:nth-child(1) { order: 2; } .c-mire:nth-child(2) { order: 1; } } /*-- kopf, kopf2, logo, bc _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ #kopf { background: var(--f01); min-height: 50px; /* min-height .. ! */ } #logo { } img.logo { width: 100%; } label.menue { width: 48%; } ul.nav { margin: var(--a30) 0 0 0; } /* --- */ #kopf-2 { height: 300px; background: var(--f02); } body#iza1 #kopf-2, body[id^="englisches-cottage-"] #kopf-2, body#home #kopf-2 { height: 400px; } /* --- */ ol.breadcrumb > li { padding:0; } /* --- */ #elf42 { min-height: 40px; } /* --- */ @media only screen and (max-width: 425px) { /* MAX ! */ #logo { width: 50%; } } @media only screen and (min-width: 426px) { #logo { width: 30%; } } @media only screen and (max-width: 599px) { /* MAX ! */ #logo { margin: var(--a20) 0 var(--a20) var(--a20); } label.menue { top: var(--a5); right: var(--ab); } /* --- */ ol.nav2 { justify-content: flex-start; } } @media only screen and (min-width: 600px ) { #logo { width: 50%; margin: 7% 0; } label.menue { top: var(--a20); right: var(--ab); } } @media only screen and (max-width: 767px ) { /* MAX ! */ #kopf-2 { height: 110; padding: 20px 0; background-size: 200% 100%; } body#iza1 #kopf-2, body[id^="englisches-cottage-"] #kopf-2, body#home #kopf-2 { min-height: 200px; padding: 25% 0 0 0; background-size: 80%; } } @media only screen and (min-width: 768px) { label.menue { top: var(--a30); right: var(--ac); } #kopf-2 { height: 300px; padding: auto 0; } } @media only screen and (max-width: 979px ) { /* MAX ! */ } @media only screen and (min-width: 980px ) { #logo { width: 40%; margin: 5% 0; } label.menue { top: var(--a30); } /* --- */ body#iza1 #kopf-2, body[id^="englisches-cottage-"] #kopf-2, body#home #kopf-2 { /*height: 25vw;*/ padding: 0 15%; background-size: 150%; } } @media only screen and (max-width: 1023px) { /* MAX ! */ nav#nav { width: 100%; } ul.nav { flex-direction: column; margin:0; } } @media only screen and (min-width: 1024px ) { #logo { width: 26%; margin: 2% 0; } nav#nav { width: 70%; } } @media only screen and (max-width: 1259px ) { /* MAX ! */ } @media only screen and (min-width: 1260px ) { #logo { width: 24%; margin: 3% 0;} nav#nav { width: 70%; } } @media only screen and (min-width: 1440px ) { /*#logo { width: 24%; }*/ nav#nav { width: 72%; } } @media only screen and (min-width: 1920px ) { #logo { width: 28%; } nav#nav { width: 50%; } } @media only screen and (orientation: landscape) {} #logo a:link, #logo a:visited, #logo a:hover, #logo a:focus, #logo a:active { background: none; text-decoration:none; border:none; margin:0; padding:0; } /*-- inhalt _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ .c-flow { background-color: var(--tr); border: var(--no); } .c-full { background-color: var(--tr); border: var(--no); overflow:auto; } .c-mi { background-color: var(--tr); border: var(--no); overflow:auto; } /* flex-2 - seitennavigation 1, 2, 3, 4 ... */ .c-mire:nth-child(1) { background: var(--tr); border: var(--no); } .c-mire:nth-child(2) { background: var(--tr); border: var(--no); } .box, .flex, .flex-2, section { width: 100%; } .flex { background: var(--no); border: var(--no); } /* muss in dieser reihenfolge hier stehen, sonst hat .flex.box (bei kndm) keinen hintergrund */ .box, .flex-2, [class*="col-"], section { background: var(--m255); border: var(--no); } .flex h2, .bibu h2, .txbu h2, .offer h2 { width: 100%; } [class*="col-"] { min-height: 10px; } .c-mire:nth-child(2) .flex [class*="col-"] { flex-direction: column; } .c-mire:nth-child(2) .flex [class*="col-"] { width: 100%; } @media only screen and (max-width: 979px ) { .flex { flex-direction: column; } .flex-2 { flex-direction: row; } [class*="col-"] { width: 100%; } } @media only screen and (min-width: 1024px ) { .flex, .flex-2 { flex-direction: row; } .col-1 { width: 7%;} .col-2 { width: 16%;} .col-3 { width: 23%;} .col-4 { width: 32%;} .col-5 { width: 41%;} .col-6 { width: 48%;} .col-7 { width: 57%;} .col-8 { width: 66%;} .col-9 { width: 73%;} .col-10 { width: 82%;} .col-11 { width: 93%;} .col-12 { width: 100%;} /* .col-1 { width: 6.33333333%;} .col-2 { width: 14.66666667%;} .col-3 { width: 23%;} .col-4 { width: 31.33333333%;} .col-5 { width: 39.66666667%;} .col-6 { width: 48%;} .col-7 { width: 56.33333333%;} .col-8 { width: 64.66666667%;} .col-9 { width: 73%;} .col-10 { width: 81.33333333%;} .col-11 { width: 89.66666667%;} .col-12 { width: 100%;} */ } @media only screen and (max-width: 767px ) { /* MAX ! */ } @media only screen and (min-width: 768px ) { } @media only screen and (min-width: 980px ) { } @media only screen and (min-width: 1260px ) { } @media only screen and (min-width: 1960px ) { } /*-- spalten _________________________ elf42 */ .colum { margin:0 auto 0 auto; padding: 0 0 var(--ab) 0; } @media only screen and (min-width: 1259px ) { .rev { display: flex; flex-direction: column-reverse; } } .colum { column-fill: auto; } .colum h1, .colum h2 { column-span: all; } ol.colum li { margin-block-start:0; } @media only screen and (max-width: 979px) { .colum { column-count: 1; column-gap: 0; } } @media only screen and (min-width: 980px ) { .colum { column-count: 2; column-gap: var(--ab); } } @media only screen and (min-width: 1024px ) { .colum { column-gap: var(--ab); } ol.colum li { margin: 8px 16px 8px 8px; } } /*-- text _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ html, main a, h4, h5, h6, div, p, span, ol, ul, li, input button, section.slogan { font-family: "Poppins", Verdana; }/*345678*/ #nav li, .navsub li, ol.nav2 li a, h1, h2, h3 { font-family: "Roboto", Verdana; line-height: 1.4em; }/*456*/ #nav, ol.nav2, .btn, button, h2 { text-transform: normal; } ul.navsub, h1 { text-transform: none; } :is(h1, .h1, h2, .h2, h3, .h3 ,h4, .h4, h5, h6, .h6 ) { margin:0; text-align:left; } :is(h1, .h1) { padding-bottom: var(--ac); } :is(h2) { padding-bottom: var(--ab); } :is(.h2) { padding-bottom: 0; } :is(h4, figcaption, h6) { padding-bottom: 0 /*var(--a20)*/; } :is(h3, p) { padding-bottom: var(--a15); } h1 { color: var(--f07); font-weight: 600; } h2 { color: var(--f07); font-weight: 500; } h2.h2 { } h3 { color: var(--f07); font-weight: 500; } h3.h3 { } h4, figcaption { color: var(--m112); font-weight: 300; } h5 { color: var(--f07); font-weight: 400; padding: var(--a30) 0; } h6 { color: var(--ci01); font-weight: 400; } .txt { color: var(--ci01); } .xs, time { color: var(--m112); font-weight: 300; } strong { font-weight: 600; } p { margin:0; font-weight: 400; } p~h2, p~h2.h2, p~h3, p~h3.h3, p~h4 { padding-top: 20px; } main p, main h5, main h6, main ul li, main ol li, main figure, section.slogan { word-wrap: break-word; hyphens: auto; hyphenate-limit-chars: auto 5; /*hyphenate-limit-lines: 2;*/ } figcaption { text-align:center; } section.slogan { color: var(--m128); font-size: 1em; font-weight: 400; text-align: left; } section.slogan a:link, section.slogan a:visited { color: var(--m82); } ol, ul, li { text-align: left; } input, select, textarea, button { font-size: inherit; font-family: inherit; } ul.nav a, ul.nav li, li.drop span, li.drop label { font-size: 1rem; font-weight:400; } ul.navsub a { font-size: 1rem; font-weight:400; } @media only screen and (max-width: 767px) { html, a, h4, h5, h6, div, p, span, ol, ul, li, input, #nav, .navsub, button { line-height: 1.4em; } h1 { font-size: 1.1em; } h2 { font-size: 1.1rem; } h3 { font-size: 1.1rem; } h5, h6 { font-size: 1.1rem; } p, span, main ul, main ol, main li, main a:link, mark, blockquote, q, input, button { font-size: 1rem; } h4, figcaption, .xs, time, cite{ font-size: 1rem; } } @media only screen and (min-width: 768px) { html, a, h4, h5, h6, div, p, span, ol, ul, li, input, #nav, .navsub, button { line-height: 1.5em; } h1 { font-size: 1.4em; } h2 { font-size: 1.2rem; } h3, h5, h6 { font-size: 1.2rem; } p, span, main ul, main ol, main li, main a:link, mark, blockquote, q, input, button { font-size: 1rem; } h4, figcaption, .xs, time, cite{ font-size: 0.9rem; } } @media only screen and (min-width: 980px ) { html, a, h4, h5, h6, div, p, span, ol, ul, li, input, #nav, .navsub, button { line-height: 1.7em; } } @media only screen and (min-width: 1260px ) { h1 { font-size: 1.6em; } h2 { font-size: 1.5em; } h3 { font-size: 1.3em; } } @media only screen and (orientation: landscape) {} ::selection { color: var(--m255); background: var(--ci01); } ::-moz-selection { color: var(--m255); background: var(--ci01); } mark { padding: 1px 3px; color: var(--m255); background: var(--ci01); } sub, sup { line-height: 0 } code { } pre { font-size: 1em; white-space: pre-wrap; word-wrap: break-word; } /*-- zitate _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ div.bq { padding: var(--ab); background: url(img/ico-blockquote.svg) 90% 40px no-repeat; background-size: 5rem; background-color: rgba(var(--m0t),0.7); } blockquote { width:70%; margin:0 10% 0 5%; padding: 0; color: var(--f03); font-size: 1.5rem; } blockquote[cite]::after { content: attr(cite); color: var(--f04); font-size: 1rem; font-weight:bold; } q { font-style: italic; } q::before, q::after { padding: 0 8px; color: var(--ci01); font-size: 1.5rem; font-weight:bold; } q ~ cite { color: var(--m182); font-style: normal; } q ~ cite::before { white-space: pre; content: "\A"; } /*-- iconfont _________________________ elf42 */ main [class*="fa-"]:before, main [class*="icon-"]:before { color: var(--ci01); text-shadow: var(--no); vertical-align: -10%; font-size: 1.8rem; } /* FontAwesome */ main [class*="fa-"]:before { margin:0 0.5em 0 0.5em; } /* fontello */ main [class*="icon-"]:before { margin:0 1em 0 1em; } /*body#kontakt img[src*="ico-"] { width: 1.3rem; margin: 0 var(--a10); }*/ /*-- abstaende _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ hr { width:100%; clear:both; border: var(--tr); margin-block-start: 30px; margin-block-end: 60px; margin-inline-start:0; margin-inline-end:0; } hr.hr { border: 1px solid var(--f01); } :root { --am: 15px; --ac: 60px; --ab: 35px; /* mobile / content / box*/ --a5: 5px; --a10: 10px; --a15: 15px; --a20: 20px; --a30: 30px; --a40: 40px; --a50: 50px; --a60: 60px; --a70: 70px; --a80: 80px; --a90: 90px; --a100: 100px; --a200: 200px; --a250: 250px; --a300: 300px; --a400: 400px; } [class^="a"] { width:100%; clear:both; } .a5 { height:5px;} .a10 { height:10px;} .a20 { height:20px;} .a30 { height:30px;} .a40 { height:40px;} .a50 { height:50px;} .a60 { height:60px;} .a70 { height:70px;} .a80 { height:80px;} .a90 { height:90px;} .a100 { height:100px;} .a200 { height:200px;} .a300 { height:300px;} .a400 { height:400px;} .a500 { height:500px;} /*-- border radius _________________________ elf42 */ :root { --abora: 10px; } :root main div, :root main figure, /*:root main ol li,*/ :root main figure.biga, :root button[type="submit"], button:visited, a.btn:visited,button, a.btn:link, :root a.btn.info { border-radius: 10px; } :root .c-full, :root #bc { border-radius:0; } /* --- */ :root main figure, .flex.bi2 figure, .flex.bi3 figure, .flex.bi4 figure { border: var(--a10) solid var(--m255); } /* --- */ @media only screen and (max-width: 1023px) { :root header ul.navsub { box-shadow: var(--no); } } @media only screen and (min-width: 1024px ) { :root header ul.navsub { box-shadow: 8px 8px 20px var(--m52); } } /*:root main .flex,*/ :root main .flex-2, /*:root main .txbu, */ /*:root main .bibu, */ :root main figure, .flex.bi2 figure, .flex.bi3 figure, .flex.bi4 figure .offer figure, figure.biga, div.biga-kl, :root main .box { box-shadow: 8px 8px 20px var(--m112); } /*-- ohne - mit - ausnahme _________________________ elf42 */ .bg-1 { background: rgba(var(--m228t),0.5); } /* .c-full sprungmenue */ .bg-2 { background: rgba(var(--m112t),0.2); } /* .c-full themen unterteilung */ .bg-3 { background: rgba(var(--m82t),0.4); } /* .c-full hinweise am seitenende */ div.biga-kl figure, div.txbu figure a.btn, button.hoch { box-shadow: var(--no); border:var(--no); } main ol.ol { padding: 0; margin: 0; } /* index - neben dem bild unten */ /*.box.col-6:nth-last-of-type(1),*/ /*-- link _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ main a:link, main a:visited { color: var(--ci03); padding: 2px 0; background: var(--no); font-size: inherit; border: var(--no); text-decoration: underline solid var(--m182); text-underline-offset: 0.2em; text-decoration-skip-ink: spaces; letter-spacing: 1px; } main a:hover, main a:focus, main a:active { color: var(--m82); padding: 2px 0; background: var(--no); font-size: inherit; border: var(--no); text-decoration: underline solid var(--ci01); text-underline-offset: 0.2em; text-decoration-skip-ink: spaces; letter-spacing: 1px; } a.lio:any-link{ color: var(--m82); cursor: default; background:none; text-decoration:none; border:none; } body#kontakt a.lio:any-link, body#xxxxxxx a.lio:any-link{ cursor: pointer;} /*-- buttons _________________________ elf42 */ button[type="submit"], button:visited, a.btn:visited, button, a.btn:link { margin:0; padding: var(--a5) var(--a10); display: inline-block; cursor: pointer; text-align:center; text-decoration:none; color: var(--m255); border-color: var(--tr); background: var(--ci01); box-shadow: 2px 2px 8px var(--m212); } button[type="submit"], button:visited, button { } button[type="submit"]:hover, button:hover, a.btn:hover { color: var(--m255); border-color: var(--tr); background: rgba(var(--ci01t),0.9); } button, a.btn, button[type="submit"] { width: 100%; margin-bottom: 15px; } a.btn.zurueck { width: 49%; margin:var(--a10) 0; } a.btn.weiter { width: 49%; margin:var(--a10) 0 var(--a10) var(--a5); } a.btn.uebersicht { width: 100%; margin:var(--a10) 0; } a.btn-kl { width: 49%; height: auto; padding: 30px auto; } a.btn:hover::before, a.btn:hover::after, a.btn::before, a.btn::after { padding: 0 20px 0 10px; vertical-align: -1%; font-size: 1.2em; line-height: 2em; font-family: 'FontAwesome'; font-weight:normal; color: var(--m255); } a.btn::before, a.btn::after { color: rgba(var(--m255t),0.5); } a.btn:hover::before, a.btn:hover::after { color: rgba(var(--m255t),0.3); } a.info::after { content: "\..."; } /*f054*/ a.info:hover::after { content: "\..."; } /*f054*/ a.ex::after, a.ex:hover::after { padding: 0 10px 0 20px; } a.download::before { content: "\f019"; } a.download span.xs::before { /*content: "\A"; white-space: pre;*/ } /* zeilenumbruch evt, der screengröße anpassen*/ a.download span.xs { color: var(--m255); font-size: 0.9rem; text-transform:none; padding-left: var(--a20); } a.download:hover span.xs { color: var(--m255); } a.anker::after { content: "\f078"; } a.tel::before { content: "\f095"; } a.mail::before { content: "\f0e0"; } a.maps::before { content: "\f041"; font-family: 'FontAwesome'; } a.kon::before { content: "\f2bb"; } a.ex::after { content: "\f08e"; font-family: 'FontAwesome'; } a.zurueck::before { content: "\f104"; } a.weiter::after { content: "\f105"; } a.uebersicht::before, a.uebersicht::after { content: ""; padding:0;} /* leerzeichen */ .flex-2 a.btn::before, .flex-2 a.btn::after, .flex-2 a.btn:link, .flex-2 a.btn:visited { } a.btn[class*="seite"] { width: 60px; margin: 1px; } a.seitenstart::before { content: "\f104\f104"; } a.seitenende::after { content: "\f105\f105"; } a.seite::before { content: ""; padding:0; } /* falls formular vorhanden */ button[type="submit"] i { margin: var(--a20) var(--a10); } button[type="submit"] i:before { content: "\f1d9"; } /* dies ist die outline-version des icons*/ /*button[type="submit"]:hover i:before, */ main .fa-paper-plane:before { color: var(--m255); } @media only screen and (max-width: 599px) { button[type="submit"]{ width: 100%; } } @media only screen and (max-width: 979px) { a.btn-kl, a.btn.zurueck, a.btn.weiter, a.btn.uebersicht { width: 100%; margin-bottom: var(--a10); } a.btn-kl { width: 100%; } a.btn-kl:nth-child(1) { margin-bottom: var(--a10); } /* a.btn.zurueck { order:1; width: 48%; } a.btn.weiter { order:2; width: 48%; } a.btn.uebersicht { order:3; width: 100%; } */ a.btn.zurueck { text-align:left; } a.btn.weiter { text-align:right; } a.btn.big { min-height:200px; display:block; } } @media only screen and (min-width: 600px) { } /*-- listen _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ main ul { margin: 0 var(--a10) 0 var(--a10); padding: 0 var(--a15); } main ul li { padding: var(--a5); position: relative; list-style: none; color: var(--m82); } main ul li:before { position:absolute; left: -1.5em; padding: 0; color: var(--ci01); content: "\f111"; font-family: 'FontAwesome'; font-size: 0.6rem; } main ul.colum { margin: 0 var(--a10) 0 0; padding: 0 var(--a15); } main ol { padding: 0 0 var(--a30) 0; margin: 0; } main ol li { padding: var(--a10) var(--a15); margin: 8px; list-style: none; position: relative; left: -0.5em; color: var(--m82); font-weight:400; background: rgba(var(--m242t),0.3); border-radius: var(--abora); } main ol li:before { color: var(--no); content: " "; } /*-- sitemap _________________________ elf42 */ ul.sitemap { margin: 0 10%; } ul.sitemap li.sitemap { padding: 15px 0 15px 6px; color: var(--m82); background: var(--no); } ul.sitemap li.sitemap ul { padding: 10px 0 0 40px; color: var(--m82); background: var(--no); } ul.sitemap li::before { position:absolute; left: -1em; padding:var(--a5) 0; content: url(img/listenpunkt-sitemap.png); } ul.sitemap li.sitemap li::before { color: var(--m212); content: "__"; } ul.sitemap a:link, ul.sitemap a:visited { color: var(--ci03); background: var(--no); border-bottom: 2px solid var(--m255); } ul.sitemap a:hover, ul.sitemap a:focus, ul.sitemap a:active { color: var(--m82); background: var(--no); border-bottom: 2px solid var(--m255); } /*-- impressum, kontakt _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ .addi { margin:0 auto 0 auto; padding: 0 0 20px 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items : flex-start; } .addi .ad { width: 100%; display: flex; flex-direction: column; } .addi table { margin:0; padding:0; } .addi h2 { padding: 0; } .addi .ad- { } .addi .ad-1 { } /* firma */ .addi .ad-2 { } /* adresse */ .addi .ad-3 { } /* kontakt */ .addi .ad-4 { } /* impressum inhaber */ .addi .ad-5 { } /* impressum geschaeftsfuehrung */ .addi .ad-6 { } /* impressum steuernummer */ .addi .ad-m { } /* maps */ .addi .ad-z { } /* zeiten */ .addi .ad-s { } /* social */ .addi .ad-a { } /* verlinkungen, menue */ .addi [class*="ad-"] { width: auto; margin:0 0 20px 0; padding:0 50px 0 0; } .addi .ad-2 { padding:0 90px 0 0; } .addi .ad-4 { padding:0 200px 0 0; } .addi [class*="ad-"] { background: var(--no); } /* nur fuers layout ..*/ .addi table td:nth-child(1) { font-weight:300; padding:0; color: var(--ci03); } .addi [class*="ad-"] table td:nth-child(1) { padding:0 15px 0 0; color: var(--m182); } .addi .ad-2 table td:nth-child(1), .addi .ad-3 table td:nth-child(1), .addi .ad-4 table td:nth-child(1) { min-width: 70px; } .addi a:link { /*padding-left: 0;*/ } /* maps auf kontakt ohne btn */ .addi .ad-m a.maps:any-link { color: var(--f01); background:none; text-decoration:none; border:none; } .addi .ad-m a.maps::before { padding: 0 20px 0 10px; vertical-align: -2%; font-size: 1.6em; line-height: 2em; font-family: 'FontAwesome'; font-weight:normal; color: var(--f01); } /* oeffnungszeiten */ .addi .ad-z table td:nth-child(1) { min-width: 150px; font-weight:300; } @media only screen and (max-width: 440px) { .addi table tr td:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow:ellipsis; max-width: 180px; } } @media only screen and (max-width: 1023px) { .addi { flex-direction: column; } } @media only screen and (min-width: 1024px ) {} /*-- quick nav - contact _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ #quick { background: var(--m0); } ul.q-nav { padding:0; background-color: var(--tr); list-style: none; } ul.q-nav li { margin:0; padding: 0; color: var(--f04); text-align:right; background: var(--no); text-transform: none; } ul.q-nav a:link, ul.q-nav a:visited { margin:0; padding: 0 0 0 var(--a10); opacity: 1; text-decoration: none; background: none; border: none; } ul.q-nav a:hover, ul.q-nav a:focus, ul.q-nav a:active { opacity: 0.5; } @media only screen and (max-width: 767px ) { /* MAX ! */ ul.q-nav li:nth-child(1) { display:none; } ul.q-nav li img { width: 20px; } } @media only screen and (min-width: 768px) { ul.q-nav li:nth-child(1) { font-size: 0.9rem; } ul.q-nav li img { width: 20px; margin: 0 var(--a5); } } @media only screen and (min-width: 980px) { ul.q-nav li:nth-child(1) { font-size: 1rem; } ul.q-nav li img { width: 25px; margin: 0 var(--a10); } } /*-- breadcrumb _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ #breadcrumb { background: var(--f02); } ol.breadcrumb { background-color: var(--tr); list-style: none; } ol.breadcrumb > li { color: var(--f03); font-size: 0.9rem; line-height: 1.7; text-transform: none; background-color: var(--tr); } ol.breadcrumb li > strong { padding-left:10px; } #breadcrumb a:any-link { font-size: 0.9rem; line-height: 1.7; text-decoration: none; text-transform: none; } #breadcrumb a:link, #breadcrumb a:visited { color: var(--f04); font-size: 0.9rem; text-decoration: none; border: var(--no); background: var(--no); } #breadcrumb a:hover, #breadcrumb a:focus, #breadcrumb a:active { color: var(--f03); font-size: 0.9rem; text-decoration: none; border: var(--no); background: var(--no); } ol.breadcrumb a::after { padding:0 20px; color: rgba(var(--ci02t),0.3); font-size: 1.2rem; content: "\f105"; font-family: 'FontAwesome'; font-weight:normal; } body#home ol.breadcrumb li:nth-child(1) a::after, body#sitemap ol.breadcrumb li:nth-child(1) a::after, body#webdesign ol.breadcrumb li:nth-child(1) a::after { content: " "; } /*-- bc _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ #bc { background: rgba(var(--m212t),0.7); } ol.bc { background-color: var(--tr); list-style: none; } ol.bc > li { margin: 0; padding: 0; color: var(--m82); font-size: 1rem; line-height: 1.6; text-align:left; background-color: var(--tr); } #bc a:any-link { margin: 0; padding:var(--a10); font-size: 1rem; line-height: 1.6; } #bc a:link, #bc a:visited { color: var(--ci03); background: var(--no); border: var(--no); text-decoration: underline solid var(--m142); text-underline-offset: 0.2em;text-decoration-skip-ink: spaces; } #bc a:hover, #bc a:focus, #bc a:active { color: var(--ci03); background: var(--no); border: var(--no); text-decoration: underline solid var(--ci01); text-underline-offset: 0.2em;text-decoration-skip-ink: spaces; } /*-- second menue _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ #nav-2 { background: rgba(var(--m255t),0.1); } ol.nav2 { background-color: var(--tr); list-style: none; } ol.nav2 > li { margin: 20px 0; color: var(--m82); font-size: 1em; line-height:1.8; text-align:left; border-right: 1px solid var(--m0); } ol.nav2 > li:nth-last-child(1) { border-right: none; } #nav-2 a:any-link { padding: 0 5px; font-size: 1em; line-height:1.8; text-decoration: none; } #nav-2 a:link, #nav-2 a:visited { color: var(--f04); background: var(--no); border: var(--no); } #nav-2 a:hover, #nav-2 a:focus, #nav-2 a:active { color: var(--f03); background: var(--no); border: var(--no); } @media only screen and (max-width: 599px) { ol.nav2 > li { border-right: none; } ol.nav2 { flex-direction:column; } #nav-2 a:any-link { margin: 0; } } @media only screen and (min-width: 600px) { #nav-2 a:any-link { margin: 0 13px; } #nav-2 li:nth-child(1) a { margin: 0 13px 0 0; } } @media only screen and (max-width: 979px) { #nav-2 { background: rgba(var(--m52t),0.8); } #nav-2 a:link, #nav-2 a:visited { color: var(--f03); } } @media only screen and (min-width: 980px) { #nav-2 a:any-link { margin: 0 35px; } #nav-2 li:nth-child(1) a { margin: 0 35px 0 0; } } /*-- abschluss _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ #bg { background: url(img/00--hg-bg.png) top center no-repeat; } footer { background: var(--no); } #abschluss { background: var(--tr); } #abschluss .elem { width: 100%; display: flex; flex-direction: column; } /* was hier drin liegt column, der rest wrap */ #abschluss .elem- { } #abschluss .elem-1 { } /* firma */ #abschluss .elem-2 { color: var(--f03); } /* adresse */ #abschluss .elem-3 { color: var(--f03); } /* kontakt */ #abschluss .elem-4 { } /* zeiten */ #abschluss .elem-5 { } /* social */ #abschluss .elem-6 { } /* form */ #abschluss .elem-7 { } /* menue */ #abschluss .elem-8 { display: flex; justify-content: space-between; align-items: flex-start; } /* bi/logo */ #abschluss .elem-9 { } /* maps */ [class*="elem-"] td:nth-child(1) { color: var(--f04); } #abschluss a { color: var(--ci03); text-decoration: none; background: var(--no); border: var(--no); } #abschluss .elem-1 td:nth-child(1) { font-size: 1.3rem; font-weight:600; color: var(--ci01); } #abschluss [class*="elem-"] p { width: 100%; margin-bottom: var(--a15); padding-bottom: var(--a15); color: var(--ci01); font-size: 1.3rem; font-weight:600; border-bottom: 1px solid var(--m82); } [class*="elem-"] { margin:0 3px var(--a20) 0; padding:0; } #abschluss table { margin:0; padding:0; } #abschluss td { padding-bottom: var(--a15); } [class*="elem-"] td:nth-child(1) { padding:0 var(--a15) 0 0; } .elem-2 td:nth-child(1) { display: none; } .elem-3 td:nth-child(1) { min-width: 30px; } .elem-5 img { width: 40px; padding-right: 10px; } .elem-8 { margin: var(--a30) 0; padding: 0; } @media only screen and (max-width: 599px) { .elem-8 { margin: var(--a20) 0; padding: 0; } .elem-8 img { width: 37vw; } } @media only screen and (min-width: 600px ) { .elem-8 img { width: 27vw; } } @media only screen and (min-width: 980px ) { .elem-8 img { width: 20vw; } } @media only screen and (max-width: 1023px) { #bg { background:none; } #abschluss { width: 100%; background: rgba(var(--m0t),0.7); flex-direction: column; } #abschluss .elem { margin-top: var(--a40); } #abschluss .elem-3 td:nth-child(2) { overflow: hidden; white-space: pre; } #abschluss [class*="elem-"] { width: 100%; } /* adresse */ .elem-2 td:nth-child(2) { width: 90%; } #abschluss .elem-8 { flex-wrap: wrap; } /* bi/logo */ } @media only screen and (min-width: 1024px ) { #abschluss .elem { margin: 6% 0 0 0; } #abschluss .elem-2 { width: 40%; } /* adresse */ #abschluss .elem-3 { width: 50%; } /* kontakt */ #abschluss .elem-5 { width: 40%; } /* social */ #abschluss .elem-8 { width: 50%; margin-bottom: 0; justify-content: flex-start; flex-wrap: nowrap; } /* bi/logo */ .elem-8 img { width: 12vw; padding-left: var(--a20); } } @media only screen and (min-width: 1024px ) { } @media only screen and (min-width: 1260px ) { } @media only screen and (min-width: 1760px ) { } /*-- hoch _________________________ Alan Berry Maurerbetrieb [© by elf42] -- */ .sticky { width: 50px; height: auto; /*right: var(--ac); bottom: 12vh;*/ } button.hoch { width: 50px; height: 50px; background: url(img/totop.svg) no-repeat center top; border-radius: 0; margin:0 auto 0 auto; padding: 0; border: none; } button.hoch:hover, button.hoch:focus, button.hoch:active { background: url(img/totop.svg) no-repeat center top; opacity:0.7; border: none; } @media only screen and (max-width: 599px) { .sticky { right: var(--am); bottom: 15vh; } } @media only screen and (min-width: 600px) { .sticky { right: var(--am); bottom: 5vh; } } @media only screen and (min-width: 768px ) { .sticky { right: var(--am); bottom: 16vh; } } @media only screen and (min-width: 980px ) { .sticky { right: var(--ab); bottom: 22vh; } } @media only screen and (min-width: 1024px ) { .sticky { right: var(--ab); bottom: 12vh; } } /*-- webdesign _________________________ elf42 */ body#impressum a.webdesign:any-link { background:none; text-decoration:none; border:none; color: inherit; font-weight:inherit; font-size: inherit; cursor:text; } body#webdesign main a:any-link { background:none; text-decoration:none; border:none; color: inherit; font-weight:inherit; font-size: inherit; cursor:text; } /*-- related links _________________________ elf42 */ #elf42 { margin: 0 0 20px 0; background-color: var(--f01); overflow:auto; } #elf42 .logoelf42 { opacity: 0.3; } #elf42 .related { color: var(--e02); font-size:0.9rem; } #elf42 .related span { padding:0 0.5rem; color: var(--e02);} /* haben wir grad nicht */ #elf42 a, #elf42 a:link, #elf42 a:active, #elf42 a:hover, #elf42 a:focus, #elf42 a:visited { color: var(--e02); font-size:0.9rem; text-decoration:none; background: var(--no); border: var(--no); } @media only screen and (max-width: 767px) { #elf42 { flex-direction:column; } #elf42 .logoelf42 { width: 5rem; margin: 0 auto; padding:0; } #elf42 .logoelf42 img { padding-top: var(--a5); } #elf42 .related { margin: 0 auto 40px auto; text-align:center; } } @media only screen and (min-width: 768px) { #elf42 .logoelf42 { width: 5rem; margin: 0 var(--a10) 0 0; padding:0; } #elf42 .logoelf42 img { padding-top: 0; } #elf42 .related { margin: 0 0 40px 0; text-align:left; } } @media only screen and (min-width: 980px) { #elf42 .related { margin-bottom: 40px; } } @media only screen and (min-width: 1260px ) {}