/* =================================================================================================== Stylesheet der RS Magnete GmbH Stand: 01.03.2015 Datei: bildschirm.css Autor: Ralf Rauh =============================================================================================== */ /* ================================================================================================================== Allgemeine Festlegungen ================================================================================================================*/ /*Einbinden der Webfonts*/ @font-face { font-family:"DIN Next Regular"; src: url(../fonts/DIN-Next-Regular.eot); /* IE9 Compat Modes */ src: url(../fonts/DIN-Next-Regular.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */ url(../fonts/DIN-Next-Regular.woff) format('woff'), /* Pretty Modern Browsers */ url(../fonts/DIN-Next-Regular.woff2) format('woff2'), /* Modern Browsers */ url(../fonts/DIN-Next-Regular.ttf) format('truetype'), /* Safari, Android, iOS */ url(../fonts/DIN-Next-Regular.svg#svgFontName) format('svg'); /* Legacy iOS */ } @font-face { font-family:"DIN Next Medium"; src: url(../fonts/DIN-Next-Medium.eot); /* IE9 Compat Modes */ src: url(../fonts/DIN-Next-Medium.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */ url(../fonts/DIN-Next-Medium.woff) format('woff'), /* Pretty Modern Browsers */ url(../fonts/DIN-Next-Medium.woff2) format('woff2'), /* Modern Browsers */ url(../fonts/DIN-Next-Medium.ttf) format('truetype'), /* Safari, Android, iOS */ url(../fonts/DIN-Next-Medium.svg#svgFontName) format('svg'); /* Legacy iOS */ } @font-face { font-family:'ElegantIcons'; src:url(../fonts/ElegantIcons.eot); src:url(../fonts/ElegantIcons.eot?#iefix) format('embedded-opentype'), url(../fonts/ElegantIcons.woff) format('woff'), url(../fonts/ElegantIcons.ttf) format('truetype'), url(../fonts/ElegantIcons.svg#ElegantIcons) format('svg'); font-weight: normal; font-style: normal; } /* alte Browser würde die für sie unbekannten Elemente sonst inline darstellen*/ article,aside,details,figcaption,figure, footer, header, main, nav, section, summary {display:block;} img {max-width:100%; /* Bilder werden niemals größer als das umgebende Elternelement*/ height:auto; /* Bild bleibt bei Breitenänderun in der Höhe proportional */ } /*Diese Klasse stellt sicher, dass die umgebende Box die darin enthaltenen gefloateten Elemente umschließt*/ .clearfix:after { content:"."; display:block; clear:both; font-size:0; height:0; visibility:hidden; } .tLink {font-size:1rem;color:#df3131;} /*Textsprungmarken*/ .uProdukt {color:#d73131;} /*roter Text bei Produktgruppen*/ html { font-size:100%; /* entspricht 16px*/ box-sizing:border-box; /*grundsätzlich auf anderer Box-Modell umstellen*/ } /*alle untergeordneten Elemente erben das Border-Box-Modell vom Element */ *, *:before, *:after {box-sizing:inherit;} body { margin:0; padding:0; font-family: DIN Next Regular, sans-serif; font-size: 16px; /*Fallback für alte Browser wie IE8*/ font-size: 1rem; line-height:1.4; /*Zeilenabstand festlegen*/ } .menu-btn img {display:none;} /*Hamburger-Button ausblenden - soll erst bei Bilschirmbreite 480 px angezeigt werden*/ .button-img {display:inlinet;padding-right:0.25em;} /*Abstand der Bilder bei Buttons*/ /*======== Hintergrundverlauf ============================================*/ .bg_large { background: rgb(0,0,0); /* für alte Browser */ background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(30%,rgba(255,255,255,1)), color-stop(70%,rgba(255,255,255,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 70%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 70%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 70%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 70%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */ } /* allg. Festlegung für Überschriften */ h1,h2,h3,h4,h5,h6 { font-family:"DIN Next Medium", sans-serif; margin:0; padding:0; } h1 {font-size:1.3rem; margin:0.3rem 0;} h2 {font-size:1.2rem; margin:0.5rem 0 0.3rem 0;} h3 {font-size:1.1rem;} h4 {font-size:1rem; margin:1rem 0 0.3rem 0;} /* allg. Festlegung für Links */ ul,li,a {margin:0; padding:0; color:black; list-style-type:none;} a {text-decoration:none; font-size:0.875rem;} /*alle Linktexte werden nicht unterstrichen*/ p {margin:0.3em 0; padding-left:0.1em;} figure, figcaption {margin:0; padding:0;} address {font-style:normal;} /*Adresse soll nicht kursiv sein*/ .active {color:#fff;} .btnpfeil {color:#df3131;} /* > -Zeichen bei Links rot*/ /*==========================================================================================*/ header { position:relative; min-height:130px; background:rgba(255,255,255,0.0); margin:0; } #logo{ background:rgba(255,255,255,1.0); width:180px; height:170px; position:absolute; left:40%; bottom:-37px; padding-top:2em; text-align:center; } header p#logoText { font-family:"DIN Next Medium", sans-serif; font-size:1.05rem; margin:0; padding:0; } /* Links Headerbereich*/ /*================================*/ a.sprache { position:absolute; top:1.5em; left:0.3em; color:#fff; } a.sprache:hover {color:#df3131;} a.kontakt { position: absolute; top: 8.3em; right: 11px; font-family: "DIN Next Medium", sans-serif; font-size: 1.0rem; color: #fff; } a.kontakt:hover {color:#df3131;} /*====================== Breadcrub Navigation ==========================================*/ nav.breadcrumb { background-color:#404040; min-height:2.1em; padding-top:0.45em; margin-bottom:1.2em; } nav.breadcrumb li {display:inline-block;} /*Listenelemente nebeneinander ausrichten*/ nav.breadcrumb a { padding-left:0.3em; color:#fff; } nav.breadcrumb a:hover{color:#df3131;} nav.breadcrumb a.active:hover {color:#fff;} aside#news figure img {padding-top:1em;} aside#news figcaption{margin-top:2em;} .asideHv {font-family:"Din Next Medium", sans-serif;color:#000;} /*========================== Navigation Produkt-Bereiche Startseite ========================================*/ nav#pbNav {margin:1em 0 1em 0;} nav#pbNav figure { text-align:center; /*Inhalt mittig ausrichten*/ border-right:#999 solid 4px; padding-top:0.4em; } nav#pbNav figure figcaption { border-top:#000 solid 1px; padding:0.4em 3.5em 0 3.0em; } nav#pbNav figure:hover {color:#df3131;} nav#pbNav .col { margin-top:1.5em;/*Abstand zwischen den Button der Navigation erhöhen*/ } nav#pbNav li:last-of-type {margin-bottom:1.5em;} /*Abstand zum Footer erhöhen*/ /*============================= Footer ==========================================================*/ footer { position:relative; top: -0.7em; /*verschieben des Fußbereichs nach oben - Sockel*/ min-height:4em; background-color:#000; font-size:0.875rem; color:#fff; padding-left:0.3em; } .footerAbstand {margin-top:1.5em;} nav#footerNav ul { position:absolute; right:0.3em; } nav#footerNav ul li{ display:inline-block; width:80px; } nav#footerNav a { padding-right:0.3em; color:#fff; } nav#footerNav a:hover {color:#df3131;} footer.footerAbstand {margin-top:1.5em;} .fuss {min-height:11em;} /*=================== Produktgruppen - Ebene 2 ==================================*/ .pgHeader {margin-top:2em; padding-left:0.5em;} section.pbBereich p {padding-right:10em;} .pbBereich ul {text-align:center;} .pbBereich ul li {margin-top:1em;} .pbBereich ul li:first-of-type {margin-top:2em;} .pbBereich ul li:last-of-type {margin-bottom:2em;} .pbBereich ul figcaption {font-family:"DIN Next Medium", sans-serif;} .pbBereich ul figure:hover {color:#df3131;} .pbfBereich {border-top:#000 solid 2px;} /*Folgebereich mit Trennline oben*/ /*=================== Produktgruppen - Ebene 3 ==================================*/ section.azBereich { /*Aufzählungbereich Produktvarianten*/ border-top:#000 solid 1px; margin-top:2em; margin-bottom:1em; } section.azBereich ul {margin:0 0 1em 0; padding-top:0;} li.aVar { /*Aufzählungszeichen einblenden und einrücken*/ margin-left:1.0em; list-style-type:disc; } #prgrafik {padding-left:2em;} #prospekt {margin-top:1.5em;} #prospekt a { display:block; width:8rem; text-align:center; font-family:"DIN Next Medium", sans-serif; font-size:1.0rem; border: #fb332e solid 2px; } #prospekt a:hover { background-color: #fb332e; } div.flowplayer {margin-top: 1.5em;} #prReinigung { /*Grafik im div zentrieren*/ display:block; margin-left:auto; margin-right:auto; } /*=================== Produktgruppen - Ebene 4 ==================================*/ .pbBereich figcaption.ass { font-family:"DIN Next Regular", sans-serif; font-size:0.875rem; } .pbBereich ul figure:hover {color:#000;} /*=================== Impressum + AGB ==================================*/ p.adress {margin-top:7.2em;} /*Abstand zweite Adresspalte von oben*/ #agb {position:relative;line-height:3rem; margin:1.5em 0 1.5em 2em;} /*Absatz mit Geschäftsbedingungen einrücken*/ .pdf {padding-right:1.5em; margin-bottom:-0.5em;} /*Anordnen des pdf-Symbols*/ .mail {color: #ff0000;} /*Mailadresse rot markieren*/ /*=================== Kontakt ==================================*/ .ansSpalte {padding-top:1em;} /*Spalte mit Kontaktpersonen positionieren*/ .ansAdress {margin-top:1.5em;} /*Firmenadresse positionieren*/ .ansFoto { position:relative; /*damit man figcaption positionieren kann*/ border-top:#000 solid 1px; padding:1em 0 0 1em; } .ansFoto:first-of-type {margin-top:1em;} /*Abstand zur Überschrift Ansprechpartner setzen*/ .ansFoto figcaption { position:absolute; bottom:0.5em; right:2.50em; } /*======================= Media Querries =============================================*/ @media only screen and (max-width:480px){ header {min-height:110px;} #logo {width:100px;height:auto;left:30%;bottom:-40px;} /*Logo-Größe reduzieren*/ header p#logoText{font-size:1.0rem;} /*RS Magnete GmbH unter dem Logo der neuen Größe anpassen*/ #news, #efText {display:none;} /*Anzeigebereich ausblenden*/ a.kontakt { top:8em; font-family:"DIN Next Regular",sans-serif; /*Schriftartwechsel wg. Anzeigröße*/ font-size:0.875rem; } nav#pbNav figure {border-right:#000 solid 20px;} nav#footerNav ul {position:static;} footer{height:auto; text-align:center; padding-top:0.2em;} .fuss {min-height:3em;} .bg_small { background: rgb(0,0,0); /* Old browsers */ background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 23%, rgba(255,255,255,1) 65%, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(23%,rgba(255,255,255,1)), color-stop(65%,rgba(255,255,255,1)), color-stop(100%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 23%,rgba(255,255,255,1) 65%,rgba(0,0,0,1) 100%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 23%,rgba(255,255,255,1) 65%,rgba(0,0,0,1) 100%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 23%,rgba(255,255,255,1) 65%,rgba(0,0,0,1) 100%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(255,255,255,1) 23%,rgba(255,255,255,1) 65%,rgba(0,0,0,1) 100%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */ } section.pbBereich p {padding-right:0;} p.adress {margin-top:1em;} .allgemein {display:none;} /*Text entfernen bei Allgemeine Geschäftsbedingungen*/ .ansAdress {padding-left:1em;} .ansFoto figcaption {position:static;padding-left:1em;} #prospekt {margin-bottom:1.5em;} /*zusätzlicher Abstand zum FlexSlider*/ #player {display: none;} #prReinigung {display:none;} .pgHeader {padding-left:0.2em;} /*Position Übeschrift Ebene 3 korrigieren*/ nav.breadcrumb { min-height:2.1em; margin-top:10px; padding-top:0.5em; background-color:rgba(64, 64, 64, 1); } nav.breadcrumb li { display:inline-block; /*Nav-Punkte nebeneinander anordnen*/ padding-right:0,8em; } /*==================================================*/ /* Responsive Menü */ .menu-btn { height:2em; background-color:#404040; padding-left:0.5em; } .menu-btn img {display:block;} /*Hamburger-Button einblenden*/ .mobile-nav {margin-bottom:1em;} .responsive-menu{display: none;} /*Ausblenden breadcrump - Navi*/ .expand {display: block !important;} /*Einblenden breadcrump - Navi*/ } /*------------Ende Viewportbreite max 480 px ----------------------------------------------------------*/ /* Zwischen 481 und 768 Pixel Viewportbreite */ @media only screen and (min-width:481px)and (max-width:769px){ .home { display:none;} /*Text "Startseite" in der breadcrumb-Navigation ausblenden*/ #news {display:none;} section.pbBereich p {padding-right:5em;} #prgrafik {width: 80%; height: auto;} /*Größe der Schnitt-Grafik anpassen*/ .pgHeader {padding-left:0.2em;} /*Position Übeschrift Ebene 3 korrigieren*/ } /*=========================================================================================================*/ /* CSS Document Grid-Layout */ /*=========================================================================================================*/ .grid-container { width: 97%; max-width: 1020px; /*Begrenzung für große Bildschirme, damit Layout noch gut aussieht*/ margin: 0 auto; } /* Reihe in der Spalten angelegt werden sollen*/ .row { clear: both; padding: 0; margin: 0; } /*=========================================================================================================*/ /* Grundsätzliches Spalten SETUP */ .col { display: block; float: left; /*jede Spalte wird nach links gefloatet*/ margin: 1% 0 0 0; /*jede Spalte erhält oben einen Abstand*/ padding-left: 1%; } /*Abstand für die erste Spalte wird links auf 0 gesetzt*/ .col:first-child {margin-left: 0;} /*============================================================================================================*/ /* Bei weniger als 480 Pixel Viewportbreite alle Spalten 100% Breite und damit untereinander */ @media only screen and (max-width: 481px) { .small-1 { width: 100%; margin-left: 0; } } /* Zwischen 481 und 768 Pixel Viewportbreite 6 Spalten Layout */ @media only screen and (min-width: 481px)and (max-width: 769px) { .medium-1 {width: 16.66%;} .medium-2 {width: 33.33%;} .medium-3 {width: 50%;} .medium-4 {width: 66.66%;} .medium-5 {width: 83.33%;} .medium-6 {width: 100%;} .medium-offset-1 {margin-left: 16.66%;} .medium-offset-2 {margin-left: 33.33%;} .medium-offset-3 {margin-left: 50%;} .medium-offset-4 {margin-left: 66.66%;} .medium-offset-5 {margin-left: 83.33%;} } /* ab 768 Pixel Viewportbreite 12 Spalten Layout */ @media only screen and (min-width: 769px) { .large-1 {width: 8.33%;} .large-2 {width: 16.66%;} .large-3 {width: 25%;} .large-4 {width: 33.33%;} .large-5 {width: 41.66%;} .large-6 {width: 50%;} .large-7 {width: 58.33%;} .large-8 {width: 66.66%;} .large-9 {width: 75%;} .large-10 {width: 83.33%;} .large-11 {width: 91.66%;} .large-12 {width: 100%;} .large-offset-1 {margin-left: 8.33%;} .large-offset-2 {margin-left: 16.66%;} .large-offset-3 {margin-left: 25%;} .large-offset-4 {margin-left: 33.33%;} .large-offset-5 {margin-left: 41.66%;} .large-offset-6 {margin-left: 50%;} .large-offset-7 {margin-left: 58.33%;} .large-offset-8 {margin-left: 668.663%;} .large-offset-9 {margin-left: 75%;} .large-offset-10 {margin-left: 83.33%;} .large-offset-11 {margin-left: 91.66%;} }