/*-- Name: Startadvise, Rechtsanwalt Norman Stegemann, Königstein im Taunus Url: https://startadvise.de Description: Startadvise, Kanzlei für Wirtschaftsrecht, Rechtsanwalt Norman Stegemann, Königstein im Taunus Version: 1.0 Neuumsetzung Responsive ______________ Webdesign by elf42 - Hameln Emmerthal */ /*-- _________________________ HTML > CSS; [© by elf42] -- */ html { height:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { min-height:100%; background: var(--f01); color: var(--m82); text-align: left; } #bg { background: var(--no); padding-bottom: 50px; } * { -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;*/ } /*-- _________________________ HTML > CSS; [© 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; } /* ------------ */ #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: space-between; align-items: flex-start; flex-wrap: wrap; } /* ------------ */ .sticky { justify-content : flex-end; flex-wrap: wrap; flex-direction: column; } /* ------------ */ #elf42 { justify-content : flex-start; align-items : flex-start; } /*-- layout _________________________ HTML > CSS; [© 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 { position: relative; } /*#logo { position: relative; }*/ label.menue { position: absolute; z-index:30; } nav#nav { position: relative; z-index:10;} #kopf-2 { position: relative; } footer { position: relative; } .sticky { position: fixed; z-index:50; } .sticky2 { position: absolute; z-index:9; } /* ------------ */ #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%; } .c-flow, .c-full, .c-mi, /*.offer, */.bibu, .txbu, .box, .flex, .flex-2, section { margin: 0 0 var(--ac) 0; padding:0; } .box, .flex, .flex-2 { padding: var(--ab); } .box:nth-last-of-type(1), .flex:nth-last-of-type(1), [class*="col-"]:nth-last-of-type(1), .box section:nth-last-of-type(1) { margin:0; } @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 { padding: var(--am); } } @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 { padding: var(--a40) var(--am); } #abschluss { padding: var(--a40) 15% var(--a60) 15%; } } @media only screen and (min-width: 600px ) { #quick, #kopf, #breadcrumb, #bc, #nav-2, .c-flow, .c-mi, #elf42 { padding: 0 15%; } #kopf label.menue { padding: var(--a20) 15%; } #kopf-2 { padding: var(--a40) 15%; } #abschluss { padding: var(--a40) 15% var(--a60) 15%; } } @media only screen and (max-width: 767px ) { /* MAX ! */ ol.breadcrumb, ol.nav2 { padding: var(--a15) 0 var(--a40) 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: 979px ) { /* MAX ! */ .c-flow { flex-direction: column; } .c-mire { flex-direction: column; } } @media only screen and (min-width: 980px ) { .c-mire:nth-child(1) { width: 74%; margin-right: var(--ac); } .c-mire:nth-child(2) { width: 26%; padding-top: 0; align-content : stretch; } } @media only screen and (max-width: 1023px) { /* MAX ! */ } /*-- kopf, kopf2, logo, bc _________________________ HTML > CSS; [© by elf42] -- */ #kopf { background: var(--m255); min-height: 50px; /* min-height .. ! */ } #logo { } img.logo { width: 100%; } label.menue { width: 48%; } ul.nav { margin: var(--a30) 0 0 0; } /* --- */ #kopf-2 { background: url(img/00--hg-kopf-2.jpg) center top no-repeat; background-size: cover; border-bottom: 10px solid var(--ci01); } body#iza1 #kopf-2, body#home #kopf-2 { background: url(img/00--hg-kopf-2-index.jpg) center top no-repeat; } #kopf-2 h1 { background: var(--tr); } body#iza1 #kopf-2 h1, body#home #kopf-2 h1 { background: var(--ci02); } /* --- */ ol.breadcrumb > li { padding:0; } /* --- */ #elf42 { min-height: 40px; } /* --- */ @media only screen and (max-width: 425px) { /* MAX ! */ #logo { width: 40%; } } @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); } /* --- */ #kopf-2 h1 { padding: 0 var(--am); } /* --- */ ol.nav2 { justify-content: flex-start; } } @media only screen and (min-width: 600px ) { #logo { width: 35%; margin: 7% 0; } /* --- */ #kopf-2 h1 { padding: var(--a10) 15%; } body#iza1 #kopf-2 h1, body#home #kopf-2 h1 { padding-bottom: var(--am); } } @media only screen and (max-width: 767px ) { /* MAX ! */ label.menue { top: var(--a20); right: var(--ab); } /* --- */ #kopf-2 { height: 110px; padding: 20px 0; background-size: 200% 100%; } body#iza1 #kopf-2, body#home #kopf-2 { height: auto; padding: 25% 0 0 0; background-size: 150%; border-bottom: var(--no); } #kopf-2 h1 { width: 100%; margin:0; border-bottom: var(--no); } } @media only screen and (min-width: 768px) { label.menue { top: var(--a40); right: var(--ac); } #kopf-2 { height: 140px; padding: var(--a30) 0 0 0; } #kopf-2 h1 { padding: var(--a20) 0; } body#iza1 #kopf-2 h1, body#home #kopf-2 h1 { padding: var(--a20) 15%; } } @media only screen and (max-width: 979px ) { /* MAX ! */ body#iza1 #kopf-2, body#home #kopf-2 { height: auto; padding: 35% 0 0 0; background-size: 150%; border-bottom: var(--no); } body#iza1 #kopf-2 h1, body#home #kopf-2 h1 { border-bottom: 10px solid var(--ci01); border-radius:0; } } @media only screen and (min-width: 980px ) { #logo { width: 25%; margin: 5% 0; } /* --- */ body#iza1 #kopf-2, body#home #kopf-2 { height: 25vw; padding: 0 15%; background-size: cover; border-bottom: 10px solid var(--ci01); } body#iza1 #kopf-2 h1, body#home #kopf-2 h1 { max-width: 38vw; margin: auto 0; padding: var(--ab); border-bottom: var(--no); } } @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: 21%; margin:0; } nav#nav { width: 67%; } } @media only screen and (max-width: 1259px ) { /* MAX ! */ } @media only screen and (min-width: 1260px ) { #logo { width: 19%; } nav#nav { width: 68%; } /* --- */ body#iza1 #kopf-2 h1, body#home #kopf-2 h1 { max-width: 30vw; padding: var(--a30) var(--a40); } } @media only screen and (min-width: 1440px ) { #logo { width: 15%; } nav#nav { width: 65%; } /* --- */ body#iza1 #kopf-2 h1, body#home #kopf-2 h1 { /*width: 30vw;*/ } } @media only screen and (min-width: 1920px ) { #logo { width: 12%; } nav#nav { width: 50%; } } @media only screen and (orientation: landscape) {} /* webinare kopf-2 index */ .sticky2 { width: 220px; height: 220px; right: 15vw; top: 45vh; background: url(img/ico-webinar.svg) no-repeat center center var(--m255); border: 2px solid var(--ci01); border-radius:50%; } .sticky2 a { width: 100%; height: 100%; display:block; } .sticky2:hover { background: url(img/ico-webinar.svg) no-repeat center center var(--m255); opacity:0.9; } @media only screen and (max-width: 440px) { .sticky2 { width: 80px; height: 80px; right: 70%; top: 20px; } } @media only screen and (min-width: 441px) { .sticky2 { width: 80px; height: 80px; right: 75%; top: 35px; } } @media only screen and (min-width: 600px) { .sticky2 { width: 100px; height: 100px; right: 70%; top: 55px; } } @media only screen and (min-width: 768px ) { .sticky2 { top: 80px; } } @media only screen and (min-width: 980px ) { .sticky2 { width: 160px; height: 160px; right: var(--ab); top: 18%; } } @media only screen and (min-width: 1260px ) { .sticky2 { width: 180px; height: 180px; right: var(--ab); top: 21%; } } @media only screen and (min-width: 1440px ) { .sticky2 { right: 15%; top: 24%; } } @media only screen and (min-width: 1960px ) { .sticky2 { width: 200px; height: 200px; right: 15%; top: 32%; } } #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 _________________________ HTML > CSS; [© 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; } .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%; } .box, .flex, .flex-2, [class*="col-"], section { background: var(--m255); border: var(--no); } [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: 980px ) { .flex, .flex-2 { flex-direction: row; } .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 ) {} /*-- 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 h2 { column-span: all; } ol.colum li { margin-block-start:0; } @media only screen and (max-width: 599px) { .colum { column-count: 1; column-gap: 0; } } @media only screen and (min-width: 600px ) { .colum { column-count: 2; column-gap: 20px; } } @media only screen and (min-width: 1024px ) { .colum { column-count: 2; column-gap: 30px; } ol.colum li { margin: 8px 16px 8px 8px; } } /*-- text _________________________ HTML > CSS; [© by elf42] -- */ html, main a, h1, h2, h3, h4, h5, h6, div, p, span, ol, ul, li, input button, section.slogan { font-family: "Open Sans", Verdana; line-height: 1.8em; }/*345678*/ #nav li, .navsub li, ol.nav2 li a { font-family: "Roboto", Verdana; line-height: 1.4em; }/*456*/ .c-mire:nth-child(2) h3, #nav, ol.nav2, h2, .h2 { text-transform: uppercase; } ul.navsub, h1 { text-transform: none; } :is(body#home h1, .h1, h3, .h3 ,h4, .h4, h5, h6, .h6 ) { margin:0; text-align:left; } h1, h2, .h2 { margin:0; text-align:center; } :is(h2, .h2) { padding-bottom: var(--a20); } :is(h4, figcaption, h6) { padding-bottom: var(--a20); } h3, p { padding-bottom: var(--a15); } h1 { color: var(--m242); font-weight: 700; } /* #kopf-2 */ body#home h1 { color: var(--m255); } h1 span { font-weight: normal; } h1 span::before { white-space: pre; content: "\A"; } h2 { color: var(--m128); font-weight: 600; } h2.h2 { color: var(--m112); font-weight: 700; } h3 { color: var(--m52); font-weight: 500; } h3.h3 { } h4, figcaption { color: var(--m128); font-weight: 400; } h5 { color: var(--m182); font-weight: 500; padding: var(--a30) 0; } h6 { color: var(--m128); font-weight: 500; } .txt { color: var(--ci02); } .xs, time { color: var(--m142); font-weight: 400; } time ~ span.xs { padding-left: 100px; } strong { font-weight: 600; } p { margin:0; font-weight: 400; } p~h2, p~h2.h2, p~h3, p~h3.h3, p~h4, ul~p { 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;*/ } section.slogan { color: var(--m142); font-size: 0.9rem; font-weight: 400; text-align: left; background: var(--tr); } .box.slogan { background: rgba(var(--m255t),0.7); } section.teaser { font-weight: 600; font-style:italic; } 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: 1em; font-weight:500; } ul.navsub a { font-size: 1em; 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.3em; } body#home h1 { font-size: 1.1em; } h1 span { font-size: 1rem; } h1.h1 { } h2 { font-size: 1.1rem; } h3 { font-size: 1.1rem; } h2.h2 { } 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: 0.9rem; } } @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.5em; } body#home h1 { font-size: 1.4em; } h1 span { font-size: 1.1rem; } h1.h1 { font-size: 1.6rem; padding-bottom: var(--a20); } h2 { font-size: 1.2rem; } h2.h2 { } 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; } body#home h1 { font-size: 1.4em; } h1 span { font-size: 1.3rem; } h2 { 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 { font-weight: 500; background: var(--tr); } sub, sup { line-height: 0 } code { } pre { font-size: 1em; white-space: pre-wrap; word-wrap: break-word; } /*-- zitate _________________________ HTML > CSS; [© 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(--m182); font-size: 1.1rem; } blockquote[cite]::after { content: attr(cite); color: var(--m200); font-size: 1rem; font-weight:bold; } q { font-style: italic; display:block; } q::before, q::after { padding: 0 8px; color: var(--m212); font-size: 1.5rem; font-weight: 800; } cite { padding-top: var(--a10); } 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: rgba(var(--ci01t),0.6); 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 _________________________ HTML > CSS; [© by elf42] -- */ hr { width:100%; clear:both; border: 1px solid var(--f01); 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: 30px; /* 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: 3px; } :root main div, :root #kopf-2 h1, :root main figure, :root main figure img, :root main ol li, :root button[type="submit"], button:visited, a.btn:visited,button, a.btn:link, :root #bc a:link, :root a.btn.info { border-radius: 3px; } /*-- xxx ... ohne _________________________ elf42 */ .bgo { background: var(--tr); } .flxo { background: var(--tr); align-items: stretch; margin:0; padding:0; } .flex.flxo .box.col-6:nth-last-of-type(1) { margin:0 0 var(--ac) 0; } /*-- link _________________________ HTML > CSS; [© by elf42] -- */ main a:link, main a:visited { color: var(--ci52); padding: 2px 0; background: var(--no); font-size: inherit; border: var(--no); text-decoration: underline var(--ci01); text-underline-offset: 0.25em; } main a:hover, main a:focus, main a:active { color: var(--m182); padding: 2px 0; background: var(--no); font-size: inherit; border: var(--no); text-decoration: underline rgba(var(--ci01t),0.5); text-underline-offset: 0.25em; } 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(--m52); border: 1px solid var(--ci01); background: var(--tr); } button[type="submit"], button:visited, button { } button[type="submit"]:hover, button:hover, a.btn:hover { color: var(--m182); border: 1px solid rgba(var(--ci01t),0.5); background: var(--tr); } 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: 45%; 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(--ci01t),0.5); } a.btn:hover::before, a.btn:hover::after { color: rgba(var(--ci01t),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.mail span.xs::before { content: "\A"; white-space: pre; } a.download span.xs::before { /*content: "\A"; white-space: pre;*/ } /* zeilenumbruch evt, der screengröße anpassen*/ a.mail span.xs, a.download span.xs { color: var(--m255); font-size: 0.9rem; text-transform:none; padding-left: var(--a20); } a.mail:hover span.xs, a.download:hover span.xs { color: var(--m255); } a.anker::after { content: "\f078"; font-family: 'FontAwesome'; padding-left: var(--a20); color: rgba(var(--ci01t),0.5); } a.tel::before { content: "\f095"; } a.mail::before { content: "\f0e0"; } a.maps::before { content: "\f041"; } 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: rgba(var(--m182t),0.5); } @media only screen and (max-width: 599px) { button[type="submit"]{ width: 100%; } } @media only screen and (max-width: 979px) { a.btn.zurueck, a.btn.weiter, a.btn.uebersicht { width: 100%; margin-bottom: var(--a10); } a.btn.zurueck { text-align:left; } a.btn.weiter { text-align:right; } } @media only screen and (min-width: 600px) { } /*-- listen _________________________ HTML > CSS; [© by elf42] -- */ main ul { margin: 0 var(--a10) var(--a15) var(--a15); padding: 0 var(--a15); } main ul li { padding: var(--a10); position: relative; list-style: none; color: var(--m82); } main ul li:before { position:absolute; left: -1em; padding:var(--a5) 0; content: url(img/listenpunkt.png); } main ol { padding: 0 0 var(--a30) 0; margin: 0; } main ol li { padding: var(--a15) var(--a15) var(--a15) var(--a40); margin: 8px; list-style: none; position: relative; left: -0.5em; color: var(--m82); font-weight: 400; background: rgba(var(--m242t),0.3); } main ol li:before { color: var(--no); position:absolute; left: 1rem; padding:var(--a5) 0; margin-right: 50px; content: url(img/listenpunkt.png); } .c-mire:nth-child(2) ol li:before { content: ""; } .c-mire:nth-child(2) .box { padding:0; background: var(--no); } .c-mire:nth-child(2) .box ol { padding:0; } .c-mire:nth-child(2) .box ol li { padding: var(--a15); margin: 0 0 var(--a15) 0; left: -0.4em; background: rgba(var(--m255t),0.8); } table.tul, table.tul-1 { width: 100%; } table.tul tr { display: flex; flex-direction: row; } table.tul td { padding: var(--a20) var(--a10); border-bottom: 1px solid var(--m212); width: 100%; font-size: 1rem; font-weight: 400; text-align: center; } table.tul td.tultd { font-weight: bold; font-style:italic; text-align: center; } table.tul-1 td { width: 100%; text-align: center; padding: var(--a20) var(--a20); border-bottom: 1px solid var(--m212); } @media only screen and (max-width: 599px) { table.tul tr { flex-direction: column; } table.tul td { width: 100%; } } @media only screen and (max-width: 767px) { } @media only screen and (max-width: 1260px ) { table.tul-1 { padding: 0 0 var(--a20) 0; } } @media only screen and (orientation: landscape) {} /*-- 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; color: var(--m182); content: "__"; } ul.sitemap li.sitemap li::before { color: var(--m212); content: "__"; } ul.sitemap a:link, ul.sitemap a:visited { color: var(--ci01); background: var(--no); border-bottom: 2px solid var(--m255); } ul.sitemap a:hover, ul.sitemap a:focus, ul.sitemap a:active { color: var(--m182); background: var(--no); border-bottom: 2px solid var(--m255); } /*-- impressum, kontakt _________________________ HTML > CSS; [© 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 [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;*/ } /* 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 _________________________ HTML > CSS; [© by elf42] -- */ #quick { background: var(--m242); } ul.q-nav { padding:0; background-color: var(--tr); list-style: none; } ul.q-nav li { margin:0; padding: 0 0 0 var(--a40); text-align:right; color: var(--m128); background: var(--no); font-size: 1rem; text-transform: none; } ul.q-nav a:link, ul.q-nav a:visited { margin:0; padding: 0 0 0 var(--a10); color: var(--ci01); text-decoration: none; border: none; background: var(--no); } ul.q-nav a:hover, ul.q-nav a:focus, ul.q-nav a:active { color: var(--ci01); text-decoration: none; border: none; background: var(--no); } @media only screen and (max-width: 767px ) { /* MAX ! */ ul.q-nav li, ul.q-nav a:link { font-size: 1rem; font-weight:500; line-height: 2; } } @media only screen and (min-width: 768px) { ul.q-nav li, ul.q-nav a:link { font-size: 1rem; font-weight:500; line-height: 2; } } /*-- breadcrumb _________________________ HTML > CSS; [© by elf42] -- */ #breadcrumb { background: var(--tr); } ol.breadcrumb { background-color: var(--tr); list-style: none; } ol.breadcrumb > li { color: var(--m128); 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(--ci01); font-size: 0.9rem; text-decoration: none; border: var(--no); background: var(--no); } #breadcrumb a:hover, #breadcrumb a:focus, #breadcrumb a:active { color: var(--m128); 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: 0.8rem; content: "\/"; } 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 _________________________ HTML > CSS; [© by elf42] -- */ #bc { background: rgba(var(--m255t),0.4); } ol.bc { background-color: var(--tr); list-style: none; } ol.bc > li { margin: 8px 0; color: var(--m82); font-size: 1rem; line-height: 1.8; text-align:left; text-transform: none; background-color: var(--no); } #bc a:any-link { margin:8px 20px 8px 0; padding:3px 10px; color: var(--ci01); background: var(--m255); font-size: 1rem; line-height: 1.8; text-decoration: none; text-transform: none; } #bc a:link, #bc a:visited { color: var(--ci01); font-size: 1rem; text-decoration: none; border: 1px solid rgba(var(--ci01t),0.9); } #bc a:hover, #bc a:focus, #bc a:active { color: var(--m182); font-size: 1rem; text-decoration: none; border: 1px solid rgba(var(--ci01t),0.5); } /*-- second menue _________________________ HTML > CSS; [© by elf42] -- */ #nav-2 { background: var(--f02); } ol.nav2 { background-color: var(--tr); list-style: none; } ol.nav2 > li { color: var(--m82); margin: 20px 0; font-size: 1em; line-height:1.8; text-align:left; } #nav-2 a:any-link { font-size: 1rem; line-height:1.8; text-decoration: none; text-transform:none; } #nav-2 a:link, #nav-2 a:visited { margin: 0 35px 0 0; padding: 0 5px; color: var(--m82); background: var(--no); border: var(--no); } #nav-2 a:hover, #nav-2 a:focus, #nav-2 a:active { color: var(--ci01); background: var(--no); border: var(--no); } /*-- abschluss _________________________ HTML > CSS; [© by elf42] -- */ footer { background: var(--no); } #abschluss { background: var(--f03); } #abschluss .elem { width: 100%; display: flex; flex-direction: column; } /* was hier drin liegt column, der rest wrap */ #abschluss .elem- { } #abschluss .elem-1 { } #abschluss .elem-2 { color: var(--m82); } #abschluss .elem-3 { color: var(--m82); } #abschluss .elem-4 { } #abschluss .elem-5 { } #abschluss .elem-6 { } #abschluss .elem-7 { } #abschluss .elem-8 { } #abschluss .elem-9 { } [class*="elem-"] td:nth-child(1) { color: var(--m182); } #abschluss a { color: var(--ci01); text-decoration: none; background: var(--no); border: var(--no); } #abschluss .elem-1 td:nth-child(1) { font-size: 1.1rem; font-weight:600; color: var(--m82); } #abschluss .elem-1 strong { color: var(--m82); font-weight:500; } [class*="elem-"] { margin:0 0 var(--a20) 0; padding:0 var(--a70) 0 0; } #abschluss table { margin:0; padding:0; } #abschluss td, #abschluss strong { vertical-align:top; padding-bottom: var(--a15); } [class*="elem-"] td:nth-child(1) { padding:0 var(--a15) 0 0; } .elem-3 td:nth-child(1) { min-width: 30px; } .elem-8 { margin:0; padding:0; } #abschluss a:link, #abschluss a:visited { color: var(--m82); } #abschluss a:hover, #abschluss a:focus, #abschluss a:active { color: var(--ci01); } @media only screen and (max-width: 599px) { #abschluss { width: 100%; flex-direction: column; } #abschluss .elem-3 td:nth-child(2) { padding-right: 0; overflow: hidden; white-space: pre; } [class*="elem-"] { margin:0 0 var(--a20) 0; padding:0; } .elem-8 img { width: 80%; padding-left: var(--a30); } } @media only screen and (min-width: 600px ) { .elem-8 img { width: 55%; padding-left: var(--a80); } } @media only screen and (min-width: 1024px ) { .elem-8 img { width: 60%; } } @media only screen and (min-width: 1260px ) { .elem-8 img { width: 9vw; padding-left: 0; } } /*-- hoch _________________________ HTML > CSS; [© by elf42] -- */ .sticky { width: 75px; height: auto; } button.hoch { width: 50px; height: 50px; background: url(img/totop.svg) no-repeat center top; 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.5; border: none; } a.webinar:any-link { text-decoration:none; width: 75px; height: 75px; padding: var(--a5); margin:0 auto var(--a40) auto; border: 2px solid var(--ci01); border-radius: 50%; background: url(img/ico-webinar.svg) no-repeat center center var(--m255); } a.webinar:any-link:hover { opacity:0.8; } @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(--f03); 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 ) {}