/* @import // url(http://fast.fonts.net/t/1.css?apiType=css&projectid=5ea05712-23bd-4283-b00f-08cad900df9a); */

@font-face { font-family:'Frutiger Next'; font-weight: normal; src:url('/Fonts/4cef6d85-d22a-4541-b469-da13751862aa.eot?#iefix'); src:url('/Fonts/4cef6d85-d22a-4541-b469-da13751862aa.eot?#iefix') format('eot'), url('/Fonts/67f049a9-98c0-4488-a4e4-0be6cda6f7de.woff2') format('woff2'), url('/Fonts/d74de079-587d-4049-9cca-50ba02a536f9.woff'); }
@font-face { font-family:'Frutiger Next'; font-weight: bold; src:url('/Fonts/ce9ebe9b-6684-4783-8760-f3a20a0c52f0.eot?#iefix'); src:url('/Fonts/ce9ebe9b-6684-4783-8760-f3a20a0c52f0.eot?#iefix') format('eot'), url('/Fonts/983d9248-775f-41ea-ad59-cee5bdbb6147.woff2') format('woff2'), url('/Fonts/5f3f5b96-b77d-497d-a916-d483bc9c6c3f.woff'); }

html { box-sizing: border-box; } *, *::before, *::after { margin: 0; padding: 0; border: 0; font: inherit; box-sizing: inherit; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, subhead { display: block; }
.clear:before, .clear:after { content:""; display:table; } .clear:after { clear:both; }

/* 12.8.2021 */
#top-banner { position: absolute; width: auto; height: auto; margin-top: 38px; left: 50%; transform: translate(-50%, -50%); z-index: 100; margin-bottom: 0;
background-color: #a2ab22; line-height: 1.2; font-size: 1em; padding: 15px;
text-transform: none!important; text-align: center; }
/* *** if small then that */
@media (max-width: 640px) { #top-banner { margin-top: 30px; font-size: 0.8em; padding: 5px; margin-left: 10%; min-width: 55%; } }

/* 7.3.2023 */
#top-banner-contact { position: absolute; width: auto; height: auto; margin-top: 38px; left: 50%; transform: translate(-50%, -50%); z-index: 100; margin-bottom: 0;
border: 2px solid #a2ab22; line-height: 1.2; font-size: 0.8em; font-weight: bold; padding: 15px; text-transform: none!important; text-align: center; }
/* *** if small then that */
@media (max-width: 640px) { #top-banner-contact { margin-top: 30px; font-size: 0.8em; padding: 5px; margin-left: 10%; min-width: 55%; } }


/* font & color
-------------------------------------------------------------- */
html { font-size: 100%; }

/* *** if small then that */
@media (max-width: 640px) { html { font-size: 85%; } }

body { color: #000000;
	font-family: 'Frutiger Next', Verdana, sans-serif;
	font-style: normal; font-weight: normal;
	font-size: 1.2rem; line-height: 1.7rem; }

a { color: #3549bf; text-decoration: none; }
a:focus, a:hover, .current { text-decoration: none; color: #000000; border-bottom: 2px solid #000000; }
a h2 { color: #000000; }
a:hover span { color: #000000; }
section a:hover  { border-bottom: none; }

.topsub, .top, b, strong, h1, h2, h3, h4, nav#topnavigation, p.intro, article table th { font-weight: bold; }
.q8-back { font-weight: normal !important; }
.q8-back::before { 
   content: "↪ "; 
   margin-left: 5px; font-size: 8px;
}
.topsub, .top { line-height: 2.5; }

h1 { font-size: 2rem; line-height: 2.6rem; }
h2, h3, h4 { font-size: 1.4rem; line-height: 1.85rem; } 
h1 span, h2 span, h3 span { font-size: 0.875rem; line-height: 1.4rem; color: #3549bf; text-transform: uppercase; display: block; }
h1 span, h3 a { color: #000; }
small { font-size: 0.875rem; line-height: 1.2rem; color: grey; }
figcaption { font-size: 1rem; line-height: 1.4rem; color: grey; font-style: italic; }
#leftright { font-size: 0.9rem; line-height: 1.4rem; color: grey; }
figcaption { font-style: italic; }
h1, h2, h3, p { hyphens: auto; -webkit-hyphens: auto; }

/* *** if very small then that */
@media (max-width: 320px) { 
h2 { font-size: 1.2rem; line-height: 1.65rem; }  }

section.dialog small { display: block; width: 60%; margin-left: auto; margin-right: auto;
font-size: 0.75rem; line-height: 1.2 !important; color: grey; }

/* 23.5.2018 */
.entfernt { color: red; text-decoration: line-through; }
.hinzu { color: #339900; }
.kommentar { color: #CE49CD; }
h2 .entfernt, h2 .hinzu { text-decoration: none; font-size: 1.4rem; text-transform: inherit; line-height: 1.85rem; }
h2 .entfernt { text-decoration: line-through !important; }


/* 14.12.2018
-------------------------------------------------------------- */
sup { font-size: 11px; color: #fff; font-family: 'Frutiger Next', Verdana, sans-serif; 	font-style: normal; background-color: #acb528; margin-left: 2px;  user-select: none; transition: all .2s ease; border-radius: .3em; letter-spacing: 1px; padding: 3px 2px 3px 4px; overflow: hidden; display: inline-block; line-height: .6; }

a.sup-a:hover { border-bottom: none !important; }
.sup-current:hover { color: #000000; border-bottom: 2px solid #000000 !important; }
@media (max-width: 480px) { sup { display: none;} }


/* telephone
-------------------------------------------------------------- */
a[href^="tel"]:link, a[href^="tel"]:visited, a[href^="tel"]:hover { text-decoration: none; color: #000; pointer-events: none; cursor: default; }

@media (max-width: 480px) { 
a[href^="tel"]:link, a[href^="tel"]:visited, a[href^="tel"]:hover { text-decoration: none; color: #3549bf !important; pointer-events: auto !important;  cursor: pointer !important; }
a[href^="tel"]:hover { text-decoration: none; color: #000000; border-bottom: 2px solid #000000; } }


/* center & width & background
-------------------------------------------------------------- */
body { margin-left: auto; margin-right: auto; padding: 0 15px; max-width: 1100px; }

main, article { padding: 3% 3% 0 3%; 
	background-image: url(/images-basic/bg-01.svg), url(/images-basic/bg-02.svg);
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	-moz-background-size: cover, cover;
	background-color: #f6f9ff;
	background-position: left top, right bottom; } 
	
/* *** if small then that */
@media (max-width: 640px) { main, article { padding: 5% 5% 0 5%; } }

/* IE 10 only */	
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
main, article { background-image: url(/images-basic/bg-01.png), url(/images-basic/bg-02.png); } }

main:before, main:after { content:""; display:table; } main:after { clear:both; } 
article:before, article:after { content:""; display:table; } article:after { clear:both; } 


/* skiplinks
-------------------------------------------------------------- */
.skiplinks { position: absolute; top: 0; left: -9999px; z-index: 9900; width: 100%; margin: 0; padding: 0; list-style-type: none; }
.skiplinks .skip:active, .skiplinks .skip:focus { left: 9999px; top: 0; outline: 0; position: absolute; width: 100%; height: auto; color: #fff; background: #3549bf; opacity: .85; padding: 3px 0; text-align: center; text-decoration: none; z-index: 9901; }



/* servicenav
-------------------------------------------------------------- */
#service-nav { float: right; margin-top: -25px; font-size: 70%; }

#service-nav a.current { border-bottom: 1px solid #000000;  }

@media (max-width: 640px) { #service-nav  { margin-top: 5px; float: none; text-align: center; } 
.service-nav-first, .ausblenden { display: none !important; } }

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }
select#selectquartier { 
    color: #374dbc;
    padding: 0 0 3px 2px !important; 
    height: auto !important; 
    max-width: 79px;
    border: none; 
    background-color: #fff; 
    line-height: 15px !important; }
select#selectquartier option { padding: 0 4px; } 
option.current { color: #000000 !important; } 
/* for IE and Edge */ 
select#selectquartier::-ms-expand { display: none; } 
select#selectquartier:disabled::-ms-expand { background: #f60; }

.service-nav-first { margin-right: 2px; }
.service-nav-second { margin-right: 2px; margin-left: 2px; }

#service-nav:before, #service-nav:after { content:""; display:table; } #service-nav:after { clear:both; } 

@media (max-width: 640px) { 
	#topnav { display: none; }
	select#selectquartier { max-width: 72px; }
	 }


/* logo & nav
-------------------------------------------------------------- */

#logo svg { width: 180px; height: 136px; fill: #a2ab22; margin-right: 20px; float: left; }
#logo a:hover, #logo a:hover svg { fill: #000000; color: #000000; }
#logo a { color: #acb528; }
nav#topnavigation { text-align: right; }
nav#topnavigation a { margin-left: 4%; }
nav#topnavigation a:hover, nav#topnavigation .current { border-bottom: 2px solid #000000; }
header { margin: 2.5% 0; }
.quartier { background-color: #acb528; color: #fff; padding: 0 6px; }
#logo a:hover .quartier, .quartier:hover  { background-color: #ffffff !important; }

/* *** if small then that */
@media (max-width: 640px) {  
#logo svg { width: 130px; height: 98px; margin-right: 10px;}
nav#topnavigation { display: table;  width: 100%; border-collapse:collapse; margin-top: 4%; }
nav#topnavigation .tr { display:table-row; }
nav#topnavigation .tr:first-child { border-bottom: 2px solid #f0f0f0; }
nav#topnavigation a {  display:table-cell; text-align: center; width: 33.333%; padding: 2px 0; border-right: 2px solid #f0f0f0; }
nav#topnavigation.vierer a {  width: 25%; font-size: 0.9rem; }
nav#topnavigation a:last-child { border-right: none; }
nav#topnavigation a, nav#topnavigation a:hover { border-bottom: none !important; }}


/* section
-------------------------------------------------------------- */
section { position: relative; margin-bottom: 5rem; }

section:nth-child(odd) { float: left; width: 48.5%; }
section:nth-child(even) { float: right; width: 48.5%; }

/* andere Reihenfolge für Startseiten mit HERO OBEN */
section.teaser:nth-child(even) { float: left; width: 48.5%; }
section.teaser:nth-child(odd) { float: right; width: 48.5%; }

section.hero, section.dialog { float: none; width: 100%; height: auto; }
section img { float: none; width: 100%; height: auto; }
 
section h2 { position: absolute; width: 80%; left: 0; bottom: -3.5rem; padding: 8px; background-color: #fff; min-height: 100px; }
section.textonly { padding: 8px; min-height: 200px; margin-bottom: 0;}
section.first { margin-top: 2.5rem;}
section.hero h2 { width: 38.75%;  }


/* *** if small then that */
@media (max-width: 640px) { section.textonly { min-height: auto; }  section.first { margin-top: 0; } }

section.dialog { height: auto; display: block; padding: 35px; background-color: #f2f4fd; hyphens: none !important; -webkit-hyphens: none !important; margin-bottom: 3rem; }

section.claim { background-color: #acb528; color: #fff; 
font-size: 1.25rem; line-height: 1.6 !important;  }
img#q8png, section.claim ul { float: left; }
section.claim li { list-style-type: none; }

img#q8png { margin-right: 36px; width: 100px; height: 100px; }

/* *** if small then that */
@media (max-width: 880px) { 
img#q8png { display: none !important; } 
section.claim ul { padding-left: 12px; }
section.claim li { list-style-type: disc; } }

/* *** if small then that */
@media (max-width: 640px) { 
section:nth-child(odd), section:nth-child(even), section.teaser:nth-child(even), section.teaser:nth-child(odd) { float: none; width: 100%; }
section h2, section.hero h2 { width: 90%;  } 
section h2 { min-height: 80px; }}

/* *** if very small then that */
@media (max-width: 320px) { section h2 { min-height: 70px; } section h2 { bottom: -4rem; } }

/* left-right */
#leftright { margin: 4rem auto; width: 100%; text-align: center; }
img.left, img.right { width: 40px; height: 40px; }
img.left { -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg) }
img.inactive, img.left:hover, img.right:hover {  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */  -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ }
img.inactive { opacity: .1; }

#leftright:before, #leftright:after { content:""; display:table; } #leftright:after { clear:both; } 

/* *** if small then that */
@media (max-width: 640px) { #leftright { margin: 3rem auto 0 auto; } section.dialog { padding: 15px; } }


/* article
-------------------------------------------------------------- */
article { padding-bottom: 7.5rem; }
h1, article h2, p, article ul, article ol { margin-left: auto; margin-right: auto; max-width: 640px; }
article table { margin-left: auto; margin-right: auto;  }
article ul, article ol { padding-left: 1.5rem }
article ul li, article ol li { padding: 5px 0; border-bottom: 1px solid #dfe1e9; }
 
h1 { margin-top: 5%; margin-bottom: 4%; }
article h2 { margin-top: 5%; margin-bottom: 2%; }
article i { font-style: italic; }
p { text-align: left; margin-bottom: 2.5%; }
p.intro { margin-bottom: 5%; }
p.introHP { margin-bottom: 12%; }

/* *** if small then that */
@media (max-width: 640px) { p.intro { margin-bottom: 10%; } }


div.free { margin: 8% 0; }

article table th { text-align: left; padding-right: 12px; width: 45%; }
article table td { width: 45%; border-bottom: 1px #9aa2d2 solid; }

table.ansprechperson  { margin-left: auto; margin-right: auto; text-align: left; width: 100%; max-width: 640px; margin-bottom: 8%; }
table.ansprechperson th  { width: 180px; }
table.ansprechperson th img { width: 170px; }
table.ansprechperson td { width: auto; border: none; }

h2.article-list-h2 { padding-top: 2em; }
ul.article-list li.select a { color: #000000; }

/* *** if small then that */
@media (max-width: 640px) { table.ansprechperson th { width: 100px; } table.ansprechperson th img { width: 95px; } }

img.nordmetall-stiftung { width: 250px;  }
a:hover img.nordmetall-stiftung { border: none !important; }

img.logolist { width: 260px; float: left; padding-right: 12px; }

/* *** if small then that */
@media (max-width: 640px) { img.logolist { width: 80%; float: none; padding-right: 0; display: block; margin: 0 auto; padding-bottom: 12px; } }


/* gallery
-------------------------------------------------------------- */
figure.gallery { 
   line-height: 0; margin-top: 4rem;  margin-bottom: 3.5rem;
   -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
   -webkit-column-gap: 22px; -moz-column-gap: 22px; column-gap: 22px; }
figure.single { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }

figure.gallery:first-child { margin-top: 0; }
figure.gallery img { display: block; margin: 0; width: 100%; height: auto; padding-bottom: 22px; }

/* ***  if very small then that */
		@media (max-width: 740px) { figure.gallery { -moz-column-count: 1; margin-bottom: 2rem; -webkit-column-count: 1; column-count: 1; } }


/* table all
-------------------------------------------------------------- */
table.all  { font-size: 80%; line-height: 1.5; }
table.all strong { font-size: 120%; line-height: 1.4; }
table.all td { padding-bottom: 18px; }
table.all th { padding: 18px 0 0 0;  text-align: left; border-bottom: 1px solid #000; }
table.all td a:hover { border: none; }
td.all-image { width: 23%; padding-right: 2%; }
td.all-image img { width: 100%; height: auto; }
td.all-data  { width: 75%; border-bottom: 1px solid #3549bf; margin-bottom: 8px; }
th a.schlagwort, td.all-data a.schlagwort { border-radius: 2px; padding: 2px 4px; font-size: 85%;
text-align: center; margin: 5% auto; width: auto; line-height: 1.5;  white-space:nowrap !important; opacity: 0.8  }
th a.iamhere { background: #000; }
th h2 { margin-top: 8px; }

/* button
-------------------------------------------------------------- */
a.button { background: #3549bf; color: #fff; border-radius: 4px; padding: 8px 16px; display: block; text-align: center; margin: 6% auto 4% auto; width: 60%; }
a.schlagwort { background: #3549bf; color: #fff; border-radius: 4px; padding: 8px; 
text-align: center; margin: 10% auto 10% auto; width: auto; line-height: 2.5;  white-space:nowrap !important; }


#Newsletter a.button { margin: 2% auto 1% auto; }

a.button:hover, a.schlagwort:hover { background: #000; cursor: pointer; border: none; }
a.little { margin: 10% 0 4% 0; }

/* *** if small then that */
@media (max-width: 640px) { a.button { padding: 4px 10px; width: 90%; } a.schlagwort { padding: 4px 8px; } }


/* images
-------------------------------------------------------------- */
figure.hero img { width: 100%; height: auto; }

figure.oneone img { margin-bottom: 1%; }
figure.one, figure.oneone { margin: 4.5% 0; }

figure { width: 100%; }
figure.one { text-align: center; }
figure.one img { width: 100%; }
figure.one.small1 img { width: 70%; }

figure.oneone img:nth-child(1) { float: left; width: 48%; margin-right: 4%; }
figure.oneone img:nth-child(2) { float: right; width: 48%; }

figure.oneone.small1 img:nth-child(1) { float: left; width: 32%; margin-right: 4%; }
figure.oneone.small1 img:nth-child(2) { float: right; width: 64%; }

figure.oneone.small2 img:nth-child(1) { float: left; width: 64%; margin-right: 4%; }
figure.oneone.small2 img:nth-child(2) { float: right; width: 32%; }

figure.oneone.small1.small2 img:nth-child(1) { float: left; width: 48%; margin-right: 4%; }
figure.oneone.small1.small2 img:nth-child(2) { float: right; width: 48%; }

figcaption { width: 85%; clear: both; text-align: center;  } 

/* *** if very small then that */
@media (max-width: 640px) { 
figcaption { width: 100%;  } 
figure.one img, figure.oneone img, 
figure.oneone img:nth-child(1), figure.oneone img:nth-child(2), 
figure.oneone.small1 img:nth-child(1), figure.oneone.small1 img:nth-child(2), 
figure.oneone.small2 img:nth-child(1), figure.oneone.small2 img:nth-child(2), 
figure.oneone.small1.small2 img:nth-child(1), figure.oneone.small1.small2 img:nth-child(2) { float: none; width: 100%; } .one, .twosome { margin-bottom: 12%; } }


/* footer nav & adress & nachoben
-------------------------------------------------------------- */	
footer { width: 100% !important;  background-color: #acb528; color: #fff; padding-bottom: 8%; margin-bottom: 12%; }
footer a { color: #fff; }

footer a[href^="tel"]:link, footer a[href^="tel"]:visited, footer a[href^="tel"]:hover { color: #fff;  }

#footerwrap { width: 100%; padding-bottom: 16%; margin: 0 auto; }
#footerwrap:before, #footerwrap:after { content:""; display:table; } #footerwrap:after { clear:both; } 

nav#seitenuebersicht { float:left; width: 49%; margin-top: 15%; padding-left: 14%; }
address#kontakt { float:right; width: 49%; margin-top: 15%; padding-left: 7.5%; }
.sub:before { content: '- '; }

img.nordmetall-stiftung-small { width: 250px; padding-top: 22px; display: block; }
a:hover img.nordmetall-stiftung-small { border: none !important; }

/* *** if small then that */
@media (max-width: 640px) { 
#footerwrap { width: 90%; margin-left: 22px; }
nav#seitenuebersicht, address#kontakt { float:none; width: 100%; padding-left: 0; } }

#nachoben { margin: 0 auto; text-align: center; }
#nachoben svg { width: 40px; height: 40px; fill: #fff; }
#nachoben:hover svg { fill: #000000; color: #000000; }


/* video
-------------------------------------------------------------- */
.embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin: 10% auto 0 auto;  }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); width: 100%; height: 100%; max-width: 730px; max-height: 411px; }

.embed-container-neu { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; margin-bottom: 2rem; }
.embed-container-neu iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }


/* print
-------------------------------------------------------------- */
@media print { #service-nav, nav#seitenuebersicht, .dialog, nav#topnavigation, #nachoben, .article-list { display: none !important; }
address#kontakt { float: none; width: 95%; background-color: #fff !important; color: #000 !important; }
address#kontakt img { display: none !important; }
footer a[href^="tel"]:link, footer a[href^="tel"]:visited, footer a[href^="tel"]:hover { color: #000;  }
.embed-container { display: none; }
body { padding-left: 10%; }
#logo svg { margin-left: 20px; width: 50px; height: 50px; } 
*, a, #logo a, .quartier, article, main { background-image: none !important; background-color: #fff !important; color: #000; fill: #000; } }