@import url("../rating-tagesgeld/styles/styles.css"); /************************************************************/ /* STRUKTUR basics'n'starters */ html { font-family: Verdana, sans-serif, Arial; background-color:#BBCDD7/* < last update - 2020-05 / pre-vers. #89a9b8 rgba(90, 129, 150,1)*/; overflow-x:hidden; color:#333/*#fafafa*/; height:100%; } /* schema white: color:#222; background-color:fff; } */ body { margin:0; text-rendering: optimizeLegibility; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:focus { outline: 0; } button::-moz-focus-inner { border:none; } article { display:-ms-flexbox; display:flex; -ms-flex-direction: column; flex-flow: row wrap; } section { width: -webkit-fill-available; width: -moz-available; } button { background: none; border:none; outline:none;} a { text-decoration:none; color: #003366; } a:active{ color: #003366; text-decoration: none;} a:hover{ background-color:white;} p>a, li a{text-decoration:underline;} img { width:100%; } header a:hover { background-color:transparent; } #header { width:100%; padding-bottom: 10px; } /*from mobile header */ nav#menu1 { box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26); } nav#menu1 label + input, input#key2menu { display:none; visibility:hidden; } nav#menu1 ul li { text-align:center; } nav#content ul li a { padding:unset; width:unset; } /* mobile header END */ /* Desk Menu style */ nav#menu1 > ul > li > div > ul > li > div { display:block; } nav#menu1 div > ul { padding:0; } /*section { background-color:#89a9b8; } delete bgcolor when schema white */ /* section h1,section h2, section h3, section h4, */ section p { margin:8px;} footer { padding:20px; clear:both; font-size:12px; text-align:center; border-top:1px solid #333; margin-top:20px; background-color:#89a9b8/* < last-update 2020-05 / #7E9CAB old school col */;} h1, h2, h3 { padding:0 5px; } h1 { font-size:1.8em; color:rgb(0, 46, 91); text-align: center; margin: 10px auto; line-height:1.5em; } h2, h3, h4 { margin-right: 25px; margin-left:25px; } h2 { font-size:1.2em; color:rgb(59, 59, 58); } h3 { font-size:1.1em; color:rgb(0, 46, 91); margin-top:10px; } h4 { font-size:1em; font-style:italic; } figure { margin:0 0 1em 0; padding:10px; } figure { margin:0 0 1em 0; padding:10px; } figcaption { color:#eee; text-align:center; font-size:0.8em; padding-left:10px; padding-right:10px; width:calc(100% - 20px); } .tgv_contentcontainer iframe { width:100%; } .auto-iframe { max-width:750px; margin:0 auto 20px auto; } .auto-iframe div, .auto-iframe div.cine { position:relative; padding-bottom:57%; } /* auto-iframe f�r 16:9 div */ .auto-iframe div.quad { position:relative; padding-bottom:85%; } .auto-iframe div.a4 { position:relative; padding-bottom:125%; } /* auto-iframe f�r hochkant/DIN-A4 �hnliche Elemente wie PDFs usw. */ .auto-iframe div.infinite { position:relative; padding-bottom:300%; } .auto-iframe iframe {position:absolute; top:0; left:0; width:100%; height:100%; } #newsletter-lp1 { height:950px; } #newsletter-lp3 { height:350px; } table { color:#222; border-spacing:0; } .tgv_contentcontainer { width:100%; clear:both; border-bottom:1px solid #fff; margin-bottom:20px; padding-bottom:10px; line-height: 150%; /*content-visibility:auto;*/ contain:content; } /* .tgv_contentcontainer h1 { margin-top:10px; display:flex; flex-direction:row; align-items:center; align-content:center; justify-content:space-around; } */ .tgv_contentcontainer p { margin-top:0; margin-bottom: 15px; margin-right: 30px; margin-left:30px; padding-left:20px; } .tgv_contentcontainer ul, .tgv_contentcontainer ol { line-height: 150%; margin-left: 30px; padding-left: 40px; padding-right:20px; } .tgv_contentcontainer ol li { margin-bottom:1em; } .tgv_contentcontainer ol li h3 { margin-bottom:0.5em; } .tgv_contentcontainer:nth-last-of-type(1) { border-bottom:none; } .tgv_contentcontainer img, img.fullsize { display:block; margin:10px auto; float:none; clear:both; width:inherit; } .tgv_contentcontainer img[alt*=Logo] { width: 140px; height: 35px; } img.fullsize { width:100%; clear:both; margin:0; float:none;} textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; } /************************************************************************************/ /* Rechner spezifische Formatierungen f�r Options, Hilfe und Erkl�rtext zum Rechner */ /************************************************************************************/ /* old version - obsolete, wenn auf grid umgestellt div.helper label div, div.triangle { display:inline-flex; width: 0px; height: 0px; border-style: solid; border-width: 10px 12.5px 0 12.5px; border-color: rgb(0, 46, 91) transparent transparent transparent; margin:1.3em 2em auto auto; } */ /* neue version - f�r grid formatierungen */ /* spalten m�ssen nach umstellung noch getauscht werden, damit "button-pfeil" auf rechts switcht */ label[for="erklaertext"] { display: grid; grid-template-columns: min-content auto; align-items: center; } div.helper label div, div.triangle { display:unset; margin:unset; width: 0px; height: 0px; border-style: solid; border-width: 10px 5px 0 5px; border-color: rgb(0, 46, 91) transparent transparent transparent; } /* test manipu, check also wohnungsbau V� buttons */ div.triangle { padding:unset !important; justify-self: end; } form#tableBox div.optionfields { padding:0; margin-bottom:10px; margin-top:5px; } form#tableBox input#options + label {max-width:calc(270px - 10px); background-color:#f1f1f1;} label h3 { display:inline-flex; } /* @media (max-width:700px) { div.helper label div {margin-bottom:3em;}} @media (max-width:430px) { div.helper label div {margin-bottom:6em;}} */ div.helper input#erklaertext, div.helper input#erklaertext~div, div.optionfields input#options, div.optionfields input#options~fieldset { display:none; visibility:hidden; } div.helper:hover, div.helper h3:hover { cursor:help; } /* old "weitere Filter" div.optionfields input#options + label>h3::after { content:" (anzeigen)"; font-size:small; font-weight:400; } div.optionfields input#options:checked + label>h3::after { content:" (verbergen)"; font-size:small; font-weight:400; } */ /* new "weitere Filter with triangle div.optionfields input#options + label>h3 ~ div { display:unset; margin:unset; width: 0px; height: 0px; border-style: solid; border-width: 15px 8px 0 8px; border-color: rgb(0, 46, 91) transparent transparent transparent; } div.optionfields input#options:checked + label>h3 ~ div {} */ div.optionfields label:hover { cursor: pointer; } div.helper input#erklaertext:checked~div, div.optionfields input#options:checked~fieldset { display:block; visibility:visible; } div.helper input#erklaertext:checked + label div, input.wbgshowtrigger:checked + label > div.triangle, div.optionfields input#options:checked ~ label > div.triangle { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* select-felder */ select#kombiprodukte, select#fremdwaehrung { margin-bottom:10px; } /************************************************************/ /* style elemente */ nav#menu1 button { width:100%; height:100%; background: none; border:none; outline:none;} .lines-button { display: inline-block; cursor: pointer;user-select: none; border-radius: 0.5rem; } .lines-button:hover { opacity: 1; } .lines-button:active { background: rgba(0,0,0, 0); } .lines { display: inline-block; width: 3rem; height: 0.45rem; background: #fafafa; border-radius: 0.1rem; position: relative; /* erstelle obere und untere Linie als pseudo-elemente der mittleren */ } .lines:before, .lines:after { display: inline-block; width: 3rem; height: 0.45rem; background:#fafafa; border-radius: 0.1rem; transition: 0.1s; position: absolute; left: 0; content: '';transform-origin: 0.25rem center; } .lines:before { top: 0.875rem; } .lines:after { top: -0.875rem; } .lines-button.x2 .lines { transition: background .1s .3s ease; } .lines-button.x2 .lines:before, .lines-button.x2 .lines:after { transform-origin: 50% 50%; transition: top .3s .4s ease, transform .3s ease; } .lines-button.x2.close .lines { transition: background .3s 0s ease; background: transparent; } .lines-button.x2.close .lines:before, .lines-button.x2.close .lines:after { transition: top .3s ease, transform .1s .4s ease; top: 0; width: 3rem; } .lines-button.x2.close .lines:before { transform: rotate3d(0, 0, 1, 45deg); } .lines-button.x2.close .lines:after { transform: rotate3d(0, 0, 1, -45deg); } /* Seiten-Navi Sprungpunkte */ nav#content { display:block; clear:both; width:100%; } nav#content ul { margin:0 30px 0 50px; padding:0; list-style-type:none; min-height:50px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center;-moz-box-pack: center; -webkit-justify-content: center;-ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } nav#content li { margin-right:calc(100%/5*0.1); -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 0; -moz-box-flex: 0; -webkit-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } nav#content ul li a { padding:0 0 0 30px; line-height:3em; width:calc(100% - 30px); display:block; } /* zur freien Verwendung Listen-Elemente, Desktop und Tablet nebeneinander, Mobile untereinander Bspw. auf der Startseite f�r die App-Buttons */ ul.nostyle { list-style-type:none; } ul.nostyle.flexlist { padding:0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal;-moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -moz-box-pack: justify; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } ul.nostyle.flexlist li { height:60px; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1;-webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 0; -moz-box-flex: 0; -webkit-flex: 0 1 auto;-ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } ul.nostyle.flexlist li img { margin:0; } ul.vorteile { list-style-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAMCAMAAACKnBfWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0OGQ3OTQyNy1hMjAzLWU2NDMtODc1MS01MTRjOGU5MDA1OGEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjJDOTAyNzhENjYzMTFFQUIyNkZCNkUyQUNBNUEyNTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjJDOTAyNzdENjYzMTFFQUIyNkZCNkUyQUNBNUEyNTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MWYwZDdlOTQtN2VlMC0xZjQ4LThhZTktY2ZhMzM4MDk4M2E3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQ4ZDc5NDI3LWEyMDMtZTY0My04NzUxLTUxNGM4ZTkwMDU4YSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjwOQGYAAAEFUExURf78/lxSXQwlDOTe5OLg4gA1AAI2ARIkE/v6+wBZAC85LyssLASFAAunA3txewqjAxjdDBfYDRTDCufi5+/t7zs1POrq6r25vlZXVgBJAAAsAABbAF5UXhfVDAupAxnjDQ8yDvX09fb19ryzvVtRW7+1v4l8imNfY8a9x+Xg5TIwM8S7xIqFipSIlA0lDS4uLsnBygN/AAqlAxLFCQJ9AAytBPz6/BjVDVVLVVtUWxcxFzAvMRbLDPf296umqwBWAMG4wujk6djV2BjaDfz7/A2vBQd5AT8+PwOCAAyrBEBIQA4kDhneDgBUABAkEAJ7ALuxuwByAABFAAA7ABEkERnfDv///2cxJMkAAAAXdFJOU/////////////////////////////8A5kDmXgAAAI1JREFUeNpEztUOAkEUA9C7uDvFWdzdHRZ3n///FQbIZvp2kqYpQWQpTUGCWsszmBQuWm1yKMO9/tFb3zPnKEDw+SucyrjJWsYGSHd8vKpQSh1mfxcAcoRdbUNud2Pxa5n3KJWfuz367flwWnxnCBQ1xyb9bi2Lv0FSZLXRpKEaveElcYcwTIOZ+uojwACEuhcZiSUn9wAAAABJRU5ErkJggg==); } ul.vorteile a{text-decoration: underline;} ul.center { margin:auto; } .ratgeber_overview_list { list-style-type:none; } ul.ratgeber_overview_list { margin-left: 10px; } .ratgeber_overview_list li { background:url(data:image/gif;base64,) no-repeat left center; line-height:2em; } .ratgeber_overview_list li::before { content:'•'; } .ratgeber_overview_list li a { padding:10px; } /* Text-Elemente */ ul.breaker { list-style-type:none; margin:30px auto; padding:0 30px 10px 0; font-size:0.8em; width:calc(100% - 60px); clear:both; float:none; background-image:url(https://www.tagesgeldvergleich.net/images/sprite-pfeile.jpg); background-repeat:no-repeat; background-position:right top; } ul.breaker li { padding:10px; } .breaker_test::before { background-image: url(https://www.tagesgeldvergleich.net/images/thumbnail-tagesgeld-redaktioneller-echtzeit-test.png); background-size: contain; background-repeat: no-repeat; width: 115px; height: 65px; float: left; margin: 0 10px 0 0; content: ""; } .breaker_festgeld_test::before { background-image:url(https://www.tagesgeldvergleich.net/images/thumbnail-festgeld-redaktioneller-echtzeit-test.png); background-size: contain; background-repeat: no-repeat; width: 115px; height: 65px; float: left; margin: 0 10px 0 0; content: ""; } .breaker:hover { background-position:right -78px; } .infobox { font-size:0.8em; background-color:#DDEEFF; color:#222; width:calc(100% - 60px); padding:30px; margin-left:0 !important; margin-right:0 !important; } .infobox ul{margin-left: 0;} @media screen and (max-width: 500px) { .infobox ul{padding-left: 20px;} } .alternate_anbieterlink { display:none; } abbr { cursor:help; } /************************************************************/ /* positionierungs- sizing-hilfen f�r objekte */ .alignleft { float:left; margin-left: 5px; margin-right:20px; margin-bottom:10px; } .alignright { float:right; margin-right: 5px; margin-left:20px; margin-bottom:10px; } .clear { clear:both; float:none; } .width25 { width:25%; } .width50 { width:50%; } .width75 { width:75%; } .width100 { width:100%; } @media (max-width:550px) { .width25, .width50, .width75 { padding:10px; width:calc(100% - 40px);} .alignleft, .alignright { float:none; margin-left: auto; margin-right:auto; } /* absolute weiten f�r mobile */ .mobilew250 { width:250px !important; } } .nopadding { padding:0; } .nomargin { margin:0; } /* horizontales scrollen erm�glichen - bspw. f�r Tabellen, die sich nicht optimieren lassen */ /* div - wrapper */ .scroll-x { overflow-x:hidden; } @media(max-width:768px){ .scroll-x { width:100%; overflow-x:scroll; } } /************************************************************/ /* GRID - 1st use @ rechner-maske Tagesgeld */ [class*="gridcontainer"] { display:grid; } /* Anzahl der Spalten/columns */ [class*="gridcontainer-4c"] { grid-template-columns:repeat(auto-fill,calc(100%/4)); } [class*="gridcontainer-3c"] { grid-template-columns:repeat(auto-fill,calc(100%/3)); } [class*="gridcontainer-2c"] { grid-template-columns:repeat(auto-fill,calc(100%/2)); } .gridcontainer-3c-select { align-items:end; } /* Spaltenverteilung */ /* im typischen Formular */ .gridinputlabel { display:grid; grid-template-columns: 10% 90%; align-items: center; grid-gap:10px; text-align:left; } .gridselectlabel { } /* grid item span */ .itemspan2c { grid-column: 2 / span 2; } /* */ /* Flex ausrichtung ... container und einzelelement (item) ... default > row, um dann einzeln (item) umzubrechen */ /* */ .flexcontainer { clear:both; width:100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-box-pack: justify; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around;-webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex-start { -webkit-box-pack: start; -moz-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } @media (max-width:550px) { .flexcontainer { display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start;-moz-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-align: start; -moz-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;} } .flex-column { -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flexitem { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 0; -moz-box-flex: 0; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } /************************************************************/ /* text-formatierungen */ html { font-size:14px; } nav#menu1 label { font-size:1em; } .textleft { text-align:left; } .textright { text-align:right; } .textcenter { text-align:center; } .textbold { font-weight:600; } .textnonbold { font-weight:400 !important; } .twocol { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } .tgv_contentcontainer a.linkfett{ padding: 10px; } /************************************************************/ /* Tabellen */ /* Empfehlung vor den Vergleichstabellen */ #empfehlungen section { margin:0; } #empfehlungen section:nth-of-type(1){ margin-bottom:20px; } section.empfehlungen { background-color:#fff; color:#222; padding:10px; } section.empfehlungen > h3 { margin:0; padding:10px 10px 10px 25px; } section.empfehlungen > ul { list-style-type:none; padding:10px 0; margin:0; font-size:12px; line-height:18px; font-family:sans-serif; background-color:rgb(254,254,254); display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-around; -ms-flex-pack: justify; justify-content: space-around; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } section.empfehlungen > ul > li { width:240px; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; border:1px solid #888888; } section.empfehlungen .siegel { margin-top:5px; height:40px; line-height:40px; font-weight:bold; font-size: 14px; color:#fff; overflow:hidden; vertical-align:middle; /* Farben f�r Blauverlauf hell > dunkel rgba(4,82,124,1) rgba(31,50,82) bzw #04527C #1F3252 */ background: rgba(31,50,82); background-image: -webkit-linear-gradient(top, #04527C, #1F3252); background-image: -moz-linear-gradient(top, #04527C, #1F3252); background-image: -ms-linear-gradient(top,#04527C, #1F3252); background-image: -o-linear-gradient(top, #04527C, #1F3252); background-image: linear-gradient(to bottom, #04527C, #1F3252); } section.empfehlungen div img { margin:5px auto; display:block; width:65%; float:none; } section.empfehlungen ul.vorteile { padding-top: 5px; padding-bottom:5px; } section.empfehlungen div.tablebutton { background-color:green; } section.empfehlungen .tablebutton { line-height: 4em; } section.empfehlungen h2 { font-size:1em; padding:0; margin:0; font-weight:600; color:rgb(245,245,245); text-align:center; display:flex; } section.empfehlungen .siegel h2 > img { margin:5px 5px 0 5px; width:1.8em; height:1.8em; display:inline; } section.empfehlungen > div { margin-top:10px; padding:10px; background-color:#f0f0f0; color:#222; } section.empfehlungen > div p, section.empfehlungen > div h4 { margin-left:0;margin-right:0; } section.empfehlungen > div p { padding-left:5px; padding-right:5px; } section.empfehlungen > div p a { display:inline; } section.empfehlungen > div p:nth-of-type(2n) { background-color:rgb(254,254,254); } @media screen and (max-width:765px) { section.empfehlungen > ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-box-pack: justify; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } section.empfehlungen > ul > li { min-width:240px; width:70%; margin-bottom:5px; } section.empfehlungen h2 { font-size:1.2em; line-height:2.75em; } section.empfehlungen .vorteile { font-size:1em; } } @media screen and (max-width:400px) { section.empfehlungen h2 { font-size:1em; } } .tgv_contentcontainer table * img { float:none; margin:auto; } table.fm_vgl_table th.tablesorter-header { background: url(../scripte/images/sorter_arrows_white.png)#05527C bottom right no-repeat; padding-right: 20px; } table.fm_vgl_table .sorter-false{ background: none; background-color:#05527C; } /****************************** Statistiken / Zinsradar Seite Caro - 2019-11-04 ******************************/ .flex23{ flex: 0 1 23%; margin-top: 1.5em; margin-right:2px; } .tgv_contentcontainer .flex23 img{ width: 100%; min-height:54px; margin: 0; background-color: #fff; } #zinsradar h3{ display: block; background-color:rgba(255, 255, 255, 1); width: calc(100% - 10px); font-size: 1em; margin: 0; padding: 5px; text-align: center;} /****************************************************************/ /****************************************************************/ /* Mobile Layout (only) */ @media screen and (max-width: 939px) { html {background-color:#d7dfe2 /* < last-update - 2020-05 / vers.history: #BBCDD7 , #89a9b8 */;} /* flexible segment ordering */ article { margin-top:5px; } /* We tell all items to be 100% width */ .tgv_contentcontainer#intro, .tgv_contentcontainer#rechnermaske, .tgv_contentcontainer#resultoutput{ -ms-flex: 1 100%; flex: 1 100%; } .tgv_contentcontainer#intro { order:2; -ms-flex-order:2; } .tgv_contentcontainer#rechnermaske { order:0; -ms-flex-order:0; } .tgv_contentcontainer#resultoutput { order:1; -ms-flex-order:1; } /* order for desk-first approach * 1. intro * 2. newsletterboxsmall * 3. rechnermaske * 4. resultoutput */ /* order for mobile-first approach * 1. rechnermaske * 2. intro * 3. resultoutput */ /* wir m�ssen mal wieder IE aus den tollen funktionen ausschliessen bzw. die darstellung anpassen article.ie {display:inline !important;} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { article {display:inline !important;} } */ a#logo { position:absolute; top:0; width:100%; height:100%; line-height:100%; display:block; } li a { text-decoration:none; } #facebook, #header_newsletter, #eKomiWidget_default, #eKomiSeal_default { display:none; } /* kann auch �ber php abfrage nicht geladen werden (header.php), w�re auch performanter */ #header { position:relative; padding:0; height:auto; background-repeat: no-repeat; background-size:cover; background-position: center center; } #header::before {content: ""; display: block; padding-top: 14%; } /* lacazz - lil css hack - nice 4 relative width and height ^^ ... <100% horizontal - >100% vertical - don't forget to set height=auto */ #dummy {position: absolute; top: 0; left: 0; bottom: 0; right: 0; } nav#menu1, #header { box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26); } /* a.linkgruen, a.tgv_antrag_link { clear: both; display:block; margin:10px auto; background-color:#060; color:#fff !important; font-weight:600; line-height:20px; border:1px solid #fff !important; padding:5px; text-decoration:none; } a.linkgruen:hover, a.tgv_antrag_link:hover { background-color:#fff; color:#060 !important; border:1px solid #060 !important; } */ ul.breaker { background-position:right calc(50% - 50px); border-top:1px solid rgba(137, 169, 184,1); border-bottom:1px solid rgba(137, 169, 184,1); } /* .breaker_test::before { content:url(https://www.tagesgeldvergleich.net/images/thumbnail-tagesgeld-redaktioneller-echtzeit-test.png); float:left; margin:0 10px 0 0; } */ .breaker:hover { background-position:right calc(50% - 50px); } .tgv_contentcontainer img { clear:both; float:none; margin:10px auto; } nav#content ul li a { padding:unset; width:unset; } /****************************** RATING table short in detail ******************************/ .rating_klein { width: calc(100% - 10px); overflow: hidden; margin:0 5px; } .ratingcon_links span { text-indent:0px; font-size: 9px; margin-left: 3px; } .ratingcon_links span strong { display: block; padding-top:30px; padding-left:30px; color:#fff; } .ratingcon_links { width:200px; height:81px; float:left; padding-top:5px; } /* Tabellenformatierungen */ table.produktdaten .TableAbschnitt { font-size:1em; } } /****************************** Redaktion / Medien / Presse Seite Caro - 2019-10-07 ******************************/ #medien figure { flex: 0 1 25%; padding: 2em; margin-bottom: 1em; } #medien figure figcaption { text-align: center; font-size: 0.9em; margin-top: 10px; color: #000; } #medien figure img { width:100%; height:auto; } /****************************************************************/ /* Mobile Layout - various MEDIA queries */ @media screen and (max-width: 768px) { /* Caro 2019-10-07 add-on Redaktionsseite / Press */ #medien figure {flex: 0 1 40%;} /* Statistiken / Zinsradar Seite Caro - 2019-11-04*/ .flex23{flex: 0 1 30%;} } @media screen and (max-width:360px) { /* h1 ... sonst zu gro� */ h1 { font-size:1.2em; line-height:1.2em; } h2 { font-size:1.1em; } /****************************************************/ /* konditionstabelle, vergleichstabellen - mobilize */ /* .vgl_tg ... Vergleichstabelle Tagesgeld */ /* .vgl_fg ... Vergleichstabelle Festgeld */ #ultimate_vergleich.vgl_tg thead tr th:nth-of-type(7), #ultimate_vergleich.vgl_tg tbody tr td:nth-of-type(6) { display:none; } } @media screen and (max-width: 420px) { #header { background-image: url(https://www.tagesgeldvergleich.net/images/logo_tgvgl-net_420px.png); } ul.nostyle.flexlist { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .width50.alignleft, .width50.alignright, .width75.alignleft, .width75.alignright { float:none; clear:both; margin:0 auto 10px auto; width:90%; } ul.breaker { width:100%; padding:10px 0; background-image:none; } /* ul.breaker a { width:calc(100% - 80px); padding:0 80px 10px 0; } */ /* .breaker_test::before { content:""; margin:0; padding:0; } */ .auto-iframe { max-width: 380px; } #newsletter-lp1 { height:1150px; } /****************************************************/ /* konditionstabelle, vergleichstabellen - mobilize */ /* .vgl_tg ... Vergleichstabelle Tagesgeld */ /* .vgl_fg ... Vergleichstabelle Festgeld */ .mobhide { display:none; } #ultimate_vergleich .i1 { width:25%; padding:1px; } #ultimate_vergleich .i1 img { width:100%; } /* TG zinsgutschrift */#ultimate_vergleich.vgl_tg thead tr th:nth-of-type(5), /* TG zinsgutschrift */#ultimate_vergleich.vgl_tg tbody tr td :nth-of-type(4), /* TG zinsf�reinlage */#ultimate_vergleich.vgl_tg thead tr:nth-of-type(1) th:nth-of-type(3), table#ultimate_vergleich.vgl_tg tbody tr td:nth-of-type(2), /* TG+FG einlagensicherung */#ultimate_vergleich tbody tr td:nth-of-type(5), #ultimate_vergleich thead tr th:nth-of-type(6), /* FG Laufzeit */ table#ultimate_vergleich.vgl_fg thead tr th:nth-of-type(3), table#ultimate_vergleich.vgl_fg tbody tr td:nth-of-type(2), /* FG - gilt f�r */ #ultimate_vergleich.vgl_fg thead tr th:nth-of-type(7), #ultimate_vergleich.vgl_fg tbody tr td:nth-of-type(6) { display:none; } } @media screen and (max-width:540px) { /* Detailseiten Aufbau */ section .tgv_contentcontainer:nth-child(2), article .tgv_contentcontainer:nth-child(2) { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal;-moz-box-orient: horizontal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -moz-box-pack: justify; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } section .tgv_contentcontainer:nth-child(2) > div, article .tgv_contentcontainer:nth-child(2) > div { width:100%; -webkit-box-flex: 0; -moz-box-flex: 0; -webkit-flex: 0 1 auto;-ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } section .tgv_contentcontainer:nth-child(2) .tgv_contentcontainer_left, article .tgv_contentcontainer:nth-child(2) .tgv_contentcontainer_left { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; margin-top:10px; } section .tgv_contentcontainer:nth-child(2) .tgv_contentcontainer_right, article .tgv_contentcontainer:nth-child(2) .tgv_contentcontainer_right { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; } /* FG max.Einlage*/#ultimate_vergleich.vgl_fg thead tr:nth-of-type(1) th:nth-of-type(5), #ultimate_vergleich.vgl_fg tbody tr td:nth-of-type(4) { display:none; } form#tableBox input#options + label { margin:auto; /* display:block; */ } /* Gridcontainer - Formularboxen */ /* Anzahl der Spalten/columns */ .gridcontainer-4c { grid-template-columns:repeat(auto-fill,calc(100%/2)); } .gridcontainer-3c { grid-template-columns:repeat(auto-fill,calc(100%/2)); } /* special - tagesgeldrechner form */ .gridcontainer-3c-select { grid-template-columns:repeat(auto-fill,100%); } /* grid-items */ .itemspan2c { grid-column: unset; text-align:left; } .gridcontainer-3c-select .width100 { width:270px; } /* Caro 2019-10-07 add-on Redaktionsseite / Press */ #medien figure { flex: 0 1 60%; padding:0.5em; } #medien { justify-content: center; flex-direction: row; } } @media screen and (min-width:421px) and (max-width: 630px) { #header { background-image: url(https://www.tagesgeldvergleich.net/images/logo_tgvgl-net_630px.png); } ul.nostyle.flexlist { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .width50.alignleft, .width50.alignright, .width75.alignleft, .width75.alignright { float:none; clear:both; margin:0 auto 10px auto; width:90%; } ul.breaker { background-position:right calc(50% + 70px); } /*.breaker_test::before { content:url(https://www.tagesgeldvergleich.net/images/thumbnail-tagesgeld-redaktioneller-echtzeit-test.png); float:left; }*/ .breaker:hover { background-position:right calc(50% - 70px); } .auto-iframe { max-width: 600px; } /****************************************************/ /* konditionstabelle, vergleichstabellen - mobilize */ /* .vgl_tg ... Vergleichstabelle Tagesgeld */ /* .vgl_fg ... Vergleichstabelle Festgeld */ .mobhide { display:none; } #ultimate_vergleich.vgl_tg thead tr:nth-child(1) th:nth-child(5), #ultimate_vergleich.vgl_tg tbody tr td:nth-child(4), #ultimate_vergleich.vgl_tg tbody tr td:nth-child(5), /* TG+FG einlagensicherung */#ultimate_vergleich thead tr:nth-child(1) th:nth-child(6), #ultimate_vergleich.vgl_fg tbody tr td:nth-of-type(5) /* FG einlagensicherung */ , /* FG gilt f�r */ #ultimate_vergleich.vgl_fg thead tr:nth-of-type(1) th:nth-of-type(7), #ultimate_vergleich.vgl_fg tbody tr td:nth-of-type(6) { display:none; } } @media screen and (max-width: 630px) { nav#content ul li { -webkit-box-ordinal-group: 1;-moz-box-ordinal-group: 1;-webkit-order: 0;-ms-flex-order: 0; order: 0; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } /* Statistiken / Zinsradar Seite Caro - 2019-11-04*/ #zinsradar{justify-content: space-around; flex-direction: row;} .flex23{flex: 0 1 40%;} } @media screen and (min-width:631px) and (max-width:939px) { #header { background-image: url(https://www.tagesgeldvergleich.net/images/logo_tgvgl-net_939px.png); } /* ggf. bei neuem farbschema footer { background-color:#ccc; } */ ul.breaker li { max-width:700px; } .auto-iframe { max-width: 900px; } } @media screen and (max-width:375px) { .gridcontainer-3c { grid-template-columns:repeat(auto-fill,100%); } } /****************************************************************************/ /* CI Farben f�r TEXT und Hintergrund */ /* dirty blue f�r text hintergrund (old style) background-color:#89a9b8; */ /* dark blue f�r TabHeader: #05527C */ /* Farben f�r Blauverlauf hell > dunkel rgba(4,82,124,1) rgba(31,50,82) bzw #04527C #1F3252 */ .text_blau_dunkel { color:rgb(0, 46, 91); } .text_gruen { color:rgb(0, 120, 0); } .text_lila_dunkel { color:rgb(120, 0, 51); } .text_grau { color:rgb(59, 59, 58); } .text_white { color:rgb(253,253,253); } .text_rot { color:red; } .bggraublau_dunkel { background-color:rgba(90, 129, 150,1); } .bggraublau_hell { background-color:rgba(137, 169, 184,1); } .bglila_dunkel {background-color:rgba(103, 16, 55, 1); } .bglila_hell {background-color:rgba(137,21,96, 1); } .bghellblauultra { background-color:#DDEEFF; } /* sonderfarbe f�r tabellenzellen */ .bgwhite { background-color:rgba(254,254,254,1) !important; } .bggraulight { background-color:rgba(240,240,240,1); } /************************************************************/ /************************************************************/ /* call-2-action Formate */ a.linkgruen, a.tgv_antrag_link { clear: both; display:block; margin:10px auto; background-color:#388E3C !important; color:#fff !important; font-weight:600; line-height:20px; padding:15px; text-decoration:none; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.2s; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);} a.linkgruen:hover, a.linkgruen:focus, a.tgv_antrag_link:hover, a.tgv_antrag_link:focus { background-color:#2E7D32 !important; } a.linkgruen:active, a.tgv_antrag_link:active { background-color:#1B5E20 !important; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); transition-delay: 0s; } a.tablebutton { margin:0; padding:0; border:0; width:100%; height:100%; display:block; font-weight:600; line-height:2.2em; color:#fff !important; text-align:center; text-decoration:none; } a.tablebutton:hover { color:#060; } /****************************** Buttons ******************************/ button { cursor:pointer; } button.submit { background:#90CAF9; font-size:1.1em; line-height:1.5em; vertical-align:middle;} button.submit.raised { transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.2s; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5); } button.submit:hover, button.submit:focus { background:#64B5F6; } button.submit.raised:active { background:#42A5F5; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); transition-delay: 0s; } /* button.raised, a.linkgruen, a.tgv_antrag_link { transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.2s; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5); } button.raised:hover, button.raised:active, a.linkgruen:hover, a.linkgruen:active, a.tgv_antrag_link:hover, a.tgv_antrag_link:active { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); transition-delay: 0s; } */ /****************************** Buttons ****************************** button.raised, a.linkgruen, a.tgv_antrag_link { transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.2s; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5); } button.raised:hover, button.raised:active, a.linkgruen:hover, a.linkgruen:active, a.tgv_antrag_link:hover, a.tgv_antrag_link:active { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); transition-delay: 0s; } #tableBox.raised { box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.5); } */ a.download-blue { background: #254871; background: linear-gradient(to bottom, #215380 0%, #2B3559 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); border-radius: 2px; display: inline-block; padding: 10px 30px; } a.download-blue:hover { background: #7C1952; background: linear-gradient(to bottom, #8A1D64 0%, #6D153D 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); } a.download-blue span { background: url("https://www.tagesgeldvergleich.net/images/pdf_button_icon.png") no-repeat scroll 0 0 transparent; color: #FFF; display: inline-block; font-weight: bold; font-size: 16px; padding-left: 35px; } /* WEITER bzw. "zum Antrag" Buttons */ a.gobtn { background: #D5E747; background-image: -webkit-linear-gradient(top, #D5E747, #A0C406); background-image: -moz-linear-gradient(top, #D5E747, #A0C406); background-image: -ms-linear-gradient(top, #D5E747, #A0C406); background-image: -o-linear-gradient(top, #D5E747, #A0C406); background-image: linear-gradient(to bottom, #D5E747, #A0C406); -webkit-border-radius: 2; -moz-border-radius: 2; border-radius: 2px; font-family: Arial; color: #3b3b3b; font-size: 1.2em; margin:0 auto; padding: 10px 5px; border: solid #95B508 1px; text-decoration: none; width:calc(100% - 10px); font-weight:normal !important; display:inline-block; text-align:center; } a.gobtn:hover { background: #ADCB00; background-image: -webkit-linear-gradient(top, #ADCB00, #548D00); background-image: -moz-linear-gradient(top, #ADCB00, #548D00); background-image: -ms-linear-gradient(top, #ADCB00, #548D00); background-image: -o-linear-gradient(top, #ADCB00, #548D00); background-image: linear-gradient(to bottom, #ADCB00, #548D00); text-decoration: none; color:#fafafa; } /****************************************************************/ /* Desktop Layout (only) */ /****************************************************************/ @media screen and (min-width: 940px) { html { background-color:#BBCDD7/* last-update 2020-05 / pre-vers. #89a9b8 , rgba(90, 129, 150,1)*/; /*color:#fafafa;*/ } body { width:930px; margin:0 auto; background-color:#d7dfe2 /* < last update 2020-05 / pre-vers. #BBCDD7 , #89a9b8*/; } #header { background: url(../images/header-tagesgeldvergleich-illustrated.jpg) no-repeat; width: 930px; height: 134px; padding-bottom:0; position:relative; border-bottom:1px solid #666; } #header a#logo { width: 400px; height: 50px; display: block; position:absolute; top:40px; left: 37px; } #header a#button-newsletter-header { background: url(../images/button-newsletteranmeldung-header-sprite.png) no-repeat scroll 0 -100px transparent; display:block; height:30px; width: 202px; position:absolute; top:100px; right: 30px; } #header a#button-newsletter-header:hover { background-position: 0 -50px; } #header #facebook { position:absolute; top:102px; left: 36px; } #header #socialmedia { margin:0; padding:0; } #header #socialmedia li { float: left; height: 25px; list-style: none outside none; width: 30px; text-indent: -9999px; } #header #socialmedia li a { display: block; height: 25px; width: 30px; background: url(../images/social-media-icons.png) no-repeat scroll; } #header #socialmedia li.google a { background-position: -42px 0px; } #header #socialmedia li.google a:hover { background-position: -42px -30px; } #header #socialmedia li.facebook a { background-position: 0 0; } #header #socialmedia li.facebook a:hover { background-position: 0 -30px; } #header #socialmedia li.twitter a { background-position: -85px 0; } #header #socialmedia li.twitter a:hover { background-position: -85px -30px; } #header #eKomiSeal_default {position:absolute; top:10px; right: 90px;} .headerbalken_unten { width:100%; height:15px; background-color:#4E6F81; } .headerbalken_unten { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7e9cab+0,7e9cab+55,38474d+100 */ background: rgb(126,156,171); /* Old browsers */ background: -moz-linear-gradient(top, rgba(126,156,171,1) 0%, rgba(126,156,171,1) 55%, rgba(56,71,77,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(126,156,171,1) 0%,rgba(126,156,171,1) 55%,rgba(56,71,77,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(126,156,171,1) 0%,rgba(126,156,171,1) 55%,rgba(56,71,77,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e9cab', endColorstr='#38474d',GradientType=0 ); /* IE6-9 */ } /* desk menu style nav#menu1 { float:left; width: 163px; border-right:1px solid #666; overflow:hidden; } nav#menu1 .MenuPunkt, #menu1 .MenuPunktRot { background: #d7dfe2; box-shadow:inset -10px 0px 2px 0px rgba(0,0,0, 0.3); -moz-box-shadow:inset -10px 0px 2px 0px rgba(0,0,0, 0.3); -webkit-box-shadow:inset -10px 0px 2px 0px rgba(0,0,0, 0.3); } nav#menu1 > ul > li > label, nav#menu1 > ul > li > input { display:none; } nav#menu1 > ul > li > div > ul li { text-align:left; } nav#menu1 ul > li > div > ul > li > label { color:#fff; font-weight:600; height:auto; line-height:35px; width:calc(100% - 6px); padding:0 0 0 6px; display:block; background:#05517b; box-shadow:inset -10px 0px 2px 0px rgba(0,0,0, 0.3); -moz-box-shadow:inset -10px 0px 2px 0px rgba(0,0,0, 0.3); -webkit-box-shadow:inset -10px 0px 2px 0px rgba(0,0,0, 0.3); } nav#menu1 li.MenuPunktRot { line-height: 20px; } #menu1 .MenuPunkt a, #menu1 .MenuPunktRot a { border-top: 1px solid #000000; color: #333; display: block; font-size: 13px; margin: 0px; padding-bottom: 6px; padding-left: 4px; padding-top: 6px; text-decoration: none; width: calc(100% - 4px); font-weight:600; } #menu1 .MenuPunktRot a { color: #660033; font-weight: bold; } #menu1 .MenuPunktRot a:hover, #menu1 .MenuPunkt a:hover { background: #bbcdd7; background: -moz-linear-gradient(right, #bbcdd7 0%, #bbcdd7 55%, #d7dfe2 100%); background: -webkit-linear-gradient(right, #bbcdd7 0%, #bbcdd7 55%, #d7dfe2 100%); background: linear-gradient(to left, #bbcdd7 0%, #bbcdd7 55%, #d7dfe2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbcdd7', endColorstr='#d7dfe2',GradientType=1 ); box-shadow:inset -5px 0px 2px 0px rgba(0,0,0, 0.3); -moz-box-shadow:inset -5px 0px 2px 0px rgba(0,0,0, 0.3); -webkit-box-shadow:inset -5px 0px 2px 0px rgba(0,0,0, 0.3); border-top: 1px solid #c6c6c6; } #menu1 .MenuPunkt a.button-newsletter { background: url("https://www.tagesgeldvergleich.net/images/button-newsletteranmeldung.png") no-repeat scroll 3px 10px transparent; border-top: 1px solid #000000; color: #FFFFFF; display: block; font-size: 13px; height: 159px; margin: 0px; padding-bottom: 6px; padding-left: 4px; padding-top: 6px; text-decoration: none; text-indent: -9999px; box-shadow:inset -10px 0px 2px 0px rgba(0,0,0, 0.3); -moz-box-shadow:inset -10px 0px 2px 0px rgba(0,0,0, 0.3); -webkit-box-shadow:inset -10px 0px 2px 0px rgba(0,0,0, 0.3); } #menu1 .MenuPunkt a.button-newsletter:hover { box-shadow:inset -5px 0px 2px 0px rgba(0,0,0, 0.3); -moz-box-shadow:inset -5px 0px 2px 0px rgba(0,0,0, 0.3); -webkit-box-shadow:inset -5px 0px 2px 0px rgba(0,0,0, 0.3); } */ /* kill if no effect til 2020-10-30 section#content { width:auto; \/*float:left; *\/} */ footer { background:none repeat scroll 0 0 #89a9b8; } .tgv_contentcontainer_right a.tgv_antrag_link { width:auto; } .tgv_contentcontainer_left, .tgv_contentcontainer_right{ width: 49%; float: left; margin-bottom: 10px; display:block; } .tgv_contentcontainer_right { border-left:1px solid #222; } .tgv_contentcontainer_right { padding:0 5px; } .rating_klein { width:100%; margin:0; } #empfehlungen p, #empfehlungen h4 { margin-bottom:5px; font-size:0.9em; } /* STYLE spielereien */ .schatten { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } /* .schatten:before, .schatten:after { content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:10px; bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .schatten:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); } */ } .tgv_contentcontainer a.linkgruen, a.tgv_antrag_link { width:80%; } .tgv_contentcontainer .p-img { margin: 15px 5px 15px 10px; } /************************************************ /* Tabellen **************************************************/ table thead th { font-size:1em; text-align: center; line-height: 1.5em; background: #05527C; border-top:1px solid #b7ac90; vertical-align: middle; color: #fafafa!important; padding:5px; font-weight: 700; border-right: 1px dotted #f4f4f4; border-bottom: 1px solid #fff; } table tbody tr td, table tbody tr th{ background-color:rgba(254,254,254,1); } table tbody tr:nth-child(2n) td, table tbody tr:nth-child(2n) th { background-color:rgba(244,244,244,1); } td.cellreset { padding:0 !important; background-color:transparent !important; } td.tablebutton, a.tablebutton { background-color:#388E3C !important; } a.tablebutton:hover, a.tablebutton:focus { background-color:#2E7D32 !important; } a.tablebutton:active { background-color:#1B5E20 !important; } .tgv_contentcontainer table { margin:0px auto; margin-bottom:15px; overflow:hidden; } .tgv_contentcontainer table td, .tgv_contentcontainer table th { font-size: 0.9em; border-bottom:1px solid rgba(0,0,0,0); } table.produktdaten { color:#222; } table.produktdaten .TableAbschnitt { line-height:36px; text-align:center; background: #05527C; color: #fafafa!important; } table.produktdaten th, table.produktdaten td { padding:5px; } table.produktdaten thead th { color:#fafafa; background-color:#05527C; text-align:left; } table.produktdaten tbody th { background-color:rgba(254,254,254,1); } table.produktdaten tbody th { font-weight:bold; color:#222; } .tableBasic { border-left: 1px solid #C7CCCF; border-top: 1px solid #C7CCCF; border-collapse:collapse; min-width:96%; } .tableBasic thead th, .tableBasic tbody td { border-bottom: 1px solid #C7CCCF; border-right: 1px solid #C7CCCF; font-family: Verdana; padding: 6px 5px; text-align: center; vertical-align: middle; } .tableBasic thead th, .tableBasic tbody th { background-color: #05527C !important; color: #FFFFFF; font-weight: bold; } .tableBasic tfoot td { background: #E2E7EB; border-bottom: 1px solid #C7CCCF; border-right: 1px solid #C7CCCF; color: #000000; font-family: Verdana; font-size: 12px; padding: 6px 5px; text-align: left; vertical-align: middle; } /* Wohnungsbaugenossenschaften �bersichten */ table.wbg { font-size:0.9em; } table.wbg thead th { padding:10px 5px; } table.wbg tbody th, table.wbg tbody td { padding:5px; } table.wbg tbody tr:hover th, table.wbg tbody tr:hover td { border-bottom:1px solid rgba(137,21,96, 1); } table.wbg tbody tr:hover th[colspan], table.wbg tbody tr:hover td[colspan] { border-bottom:1px solid rgba(137,21,96, 0); } .heading { font-weight:bold; color: #222!important; } /* Herausstellung einer Tabellenzelle im Tabellenverlauf */ /************************************/ /* Zinsvergleich + Sparplan Tabellen Vergleich - statisch*/ table#sparplanTable, table#etfVergleich, table#fondVergleich { width: 99%; } table#sparplanTable thead th, table#sparplanTable tbody td, table#sparplanTable tbody th { padding:5px;} table#etfVergleich thead th, table#etfVergleich tbody td, table#etfVergleich tbody th { padding:5px;} table#fondVergleich thead th, table#fondVergleich tbody td, table#fondVergleich tbody th { padding:5px;} table#VergleichTable { border:0; border-collapse:collapse; } table#VergleichTable th { padding-left:5px; padding-right:5px; } table#VergleichTable th:nth-of-type(1),table#VergleichTable th:nth-of-type(4) { min-width:15%; } table#VergleichTable tr td { padding:5px; border-right:1px dotted #999; } table#VergleichTable tr td:nth-last-of-type(1) { border-right:0; } ul.inlinelist { list-style-type:none; padding:0; margin:0; width:100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -moz-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: start; -moz-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } ul.inlinelist li { text-align:center; border-right:1px dotted #999; min-width:55px; min-height:3em; height:100%; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 0; -moz-box-flex: 0; -webkit-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } th ul.inlinelist li { line-height:2em; min-height:2em; } ul.inlinelist li:nth-last-child(1) { border-right:0; } @media screen and (max-width:520px) { table#VergleichTable ul.inlinelist li:nth-child(1), table#sparplanTable ul.inlinelist li:nth-child(1) { display:none; } div.table-responsive{overflow: auto;} table#etfVergleich img, table#fondVergleich img{width:80px; height: 20px;}} @media screen and (max-width:420px) { table#VergleichTable ul.inlinelist li:nth-child(-n+2), table#sparplanTable thead th:nth-of-type(5), table#sparplanTable tbody td:nth-of-type(4){ display:none; } } table#VergleichTable .gobtn {padding:5px;} /*******************************************************/ /* Vergleichstabellen, Tagesgeld + Festgeld, �bersicht */ .ultimate_vergleich p.kombiprodukte_filter { padding: 5px 10px; margin: 0; font-size: 1em; } .ultimate_vergleich table#ultimate_vergleich { width:100%; border-left: 1px solid #C4BEAE; border-top: 1px solid #C4BEAE; background-color: #F0F0F0; } #ultimate_vergleich .i1 { width:20%; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; padding-top:10px; padding-bottom:10px; } .ultimate_vergleich table#ultimate_vergleich thead th, .ultimate_vergleich table#ultimate_vergleich tbody td { padding: 3px 5px; text-align: center; vertical-align: middle; color: #000000; border-right: 1px solid #C4BEAE; border-bottom: 1px solid #C4BEAE; } .ultimate_vergleich table#ultimate_vergleich tbody th { border-right: 1px solid #C4BEAE; border-bottom: 1px solid #C4BEAE; padding-top:10px; padding-bottom:10px; } .ultimate_vergleich table#ultimate_vergleich thead th { font-size:0.9em; } .ultimate_vergleich table#ultimate_vergleich thead th ul.inlinelist li, .ultimate_vergleich table#ultimate_vergleich tbody td ul.inlinelist li { min-width:auto; line-height:3em; min-height:auto; } .ultimate_vergleich table#ultimate_vergleich tbody td, .ultimate_vergleich table#ultimate_vergleich tbody th { padding-top:10px; padding-bottom:10px; line-height:1.1em; font-size:0.8em; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .ultimate_vergleich table#ultimate_vergleich thead th.headerSortUp { background: url("https://api-tagesgeldvergleich.finanzrechner.org/images/asc.gif") right bottom no-repeat!important; } .ultimate_vergleich table#ultimate_vergleich thead th.headerSortDown { background: url("https://api-tagesgeldvergleich.finanzrechner.org/images/desc.gif") right bottom no-repeat!important; } .ultimate_vergleich table#ultimate_vergleich tbody td.i7 a { background: url('../images/btn-tagesgeldvergleich-green.png') no-repeat; width: 50px; height: 25px; text-indent: -999999px; display: block; } .ultimate_vergleich table#ultimate_vergleich tbody td.i7 a:hover { background: url('../images/btn-tagesgeldvergleich-green.png') left bottom no-repeat; } .ultimate_vergleich table#ultimate_vergleich tbody td a img { border: none!important; display:block; margin:auto; } .ultimate_vergleich table#ultimate_vergleich td.i3 { font-weight: 700; font-size: 1em; white-space: nowrap; } .ultimate_vergleich table#ultimate_vergleich td.td_7, .ultimate_vergleich table td.td_3, .ultimate_vergleich table td.td_6 { white-space: nowrap; } .ultimate_vergleich .rating_table thead tr th { cursor:default; } #tooltip { color: #000; text-align: left; padding: 5px 10px; display: none; background: #fff; border: 1px solid #cacaca; position: absolute; width: 300px; font-size: 11px; line-height: 1.5em; box-shadow: 0 0 8px #b6b7b8; -webkit-box-shadow: 0 0 8px #b6b7b8; -moz-box-shadow: 0 0 8px #b6b7b8; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /************************************************************/ /* Bonus Vergleiche, Rechner */ /************************************************************/ .bonus_5 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/5.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } .bonus_10 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/10.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } .bonus_20 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/20.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } .bonus_25 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/25.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } .bonus_30 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/30.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } .bonus_50 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/50.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } .bonus_75 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/75.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } .bonus_100 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/100.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } .bonus_125 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/125.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } .bonus_150 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/150.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } .bonus_175 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/175.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } .bonus_200 { background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/200.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .bonus_5 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/5-w2.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_10 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/10-w2.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_20 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/20-w2.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_25 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/25-w2.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_50 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/50-w2.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_75 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/75-w2.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_100 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/100-w2.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_125 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/125-w2.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_150 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/150-w2.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_175 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/175-w2.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_200 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/200-w2.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} } @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and ( min--moz-device-pixel-ratio: 3), only screen and ( -o-min-device-pixel-ratio: 3/1), only screen and ( min-device-pixel-ratio: 3), only screen and ( min-resolution: 288dpi), only screen and ( min-resolution: 3dppx) { .bonus_5 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/5-w3.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_10 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/10-w3.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_20 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/20-w3.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_25 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/25-w3.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_50 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/50-w3.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_75 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/75-w3.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_100 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/100-w3.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_125 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/125-w3.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_150 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/150-w3.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_175 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/175-w3.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} .bonus_200 {background-image: url(//api-tagesgeldvergleich.finanzrechner.org/images/200-w3.png); background-position: bottom right; background-repeat: no-repeat; background-size:30px 30px;} } /************************************************************/ /* Rechnermaske klein & mittelgro� */ .tgv_contentcontainer .widget_small_shortcode *, .tgv_contentcontainer .widget_shortcode * { color: #000; padding: 0; margin:0; } .widget_small_shortcode, .widget_shortcode { padding: 0 0 10px 0; background:#fff; overflow:auto; border-top:1px solid #666;border-bottom:1px solid #666; } .widget_small_shortcode form, .widget_shortcode form { width:100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -moz-box-pack: justify; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; -webkit-box-align: start; -moz-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .widget_small_shortcode form p { line-height:3em; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } .widget_small_shortcode form p:nth-last-of-type(1){ -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .widget_small_shortcode h3, .widget_shortcode h3 { margin:0 0 10px 0; color: #fff; line-height: 2em;background-color:rgba(90, 129, 150,1); width:100%; } .widget_small_shortcode input, .widget_shortcode input, .widget_small_shortcode select, .widget_shortcode select { font-size:1.2em; font-weight:300; padding:5px !important; } .widget_small_shortcode input, .widget_shortcode input { max-width:100px; } @media (max-width:730px) { .widget_small_shortcode form { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width:500px) { .widget_small_shortcode form { -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .widget_small_shortcode form p:nth-last-of-type(1){ -webkit-flex: 2 1 auto; -ms-flex: 2 1 auto; flex: 2 1 auto; width:80%; } } .widget_small_shortcode .submit, .widget_shortcode .submit { color: #000; padding: 10px; border:0; border-radius: 2px; width:calc(100% - 20px); line-height:1em; } .widget_shortcode h3 { background-color:rgba(0,0,0,0); margin-bottom:10px !important; } .widget_shortcode .submit { max-width:350px; margin: 0 auto;} .widget_shortcode form { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .widget_shortcode form p { line-height:3em; -ms-flex:0 1 100%; flex:0 1 100%; } .widget_shortcode form p:nth-last-of-type(1) { -ms-flex:1 100%; flex:1 100%; } .widget_shortcode_tagesgeld { background: #fff url(/inc/masken/bg_tagesgeld.jpg) no-repeat; background-size:cover; } .widget_shortcode_festgeld { background: #fff url(/inc/masken/bg_festgeld.jpg) no-repeat; background-size:cover; } .currency{width: 100%; display: flex; flex-wrap: nowrap; align-self: center; align-items: center; border: 1px solid #ccc; background-color: #fff;} .currency input {border: none; text-align: right; width: calc(100% - 10px); display: table-cell; margin-right: 0px; padding-right: 0px; background-color: #fff;max-width: unset;} .currency div {color: #333;vertical-align: middle;text-align: center; line-height: normal; width: 23px;padding-left: 0; border-left: none; display: table-cell; min-height: auto; margin-right:3px;} .widget_small_shortcode_auf, .widget_shortcode_auf {padding: 5px 0 5px 0; background-image: linear-gradient(to bottom,#04527c,#1f3252); overflow: auto; margin-bottom:20px } .widget_small_shortcode_auf h3, .widget_shortcode_auf h3{grid-column: 1/ -1;line-height: 2em; width: 100%; margin: 0; padding: 0; color: #fff;} .widget_small_shortcode_auf form{ display: grid; grid-template-columns: 1fr 1fr 0.7fr; grid-gap: 10px 20px; padding: 5px 0px 10px 0px!important; margin: 0 auto; width: calc(100% - 20px); align-items: center;} .widget_small_shortcode form{ display: grid; grid-template-columns: 1fr 1fr 0.7fr; grid-gap: 10px 20px; padding: 5px 0px 10px 0px!important; margin: 10px auto 0px auto!important; width: calc(100% - 20px); align-items: center;} .widget_shortcode_auf form, .widget_shortcode form{ display: grid; grid-template-columns: 1fr ; grid-gap: 10px 20px; padding: 5px 0px 10px 0px!important; margin: 0 auto!important; width: 80%; align-items: center;} .widget_small_shortcode_auf form select, .widget_shortcode_auf form select, .widget_small_shortcode form select, .widget_shortcode form select {width: 100%; } .widget_small_shortcode_auf form select,.widget_small_shortcode_auf form input , .widget_shortcode_auf form select,.widget_shortcode_auf form input{font-size: 1.2em; padding: 8px 10px 7px; } .widget_small_shortcode_auf form label, .widget_shortcode_auf form label, .widget_small_shortcode form label, .widget_shortcode form label {display: flex; width: 100%; align-items: center; color: #fff;} .widget_small_shortcode_auf form label span, .widget_shortcode_auf form label span, .widget_small_shortcode form label span, .widget_shortcode form label span { min-width: 115px;} .widget_small_shortcode_auf button, .widget_shortcode_auf button {padding: 8px 10px 7px; line-height: unset; } @media screen and (max-width: 700px) { .widget_small_shortcode_auf form{ display: grid; grid-template-columns: 1fr 1fr;} .widget_small_shortcode_auf button{grid-column: 1/ -1; width: 70%; margin: 0 auto;} } @media screen and (max-width: 500px) { .widget_small_shortcode_auf form{ display: grid; grid-template-columns: 1fr ;} .widget_small_shortcode_auf button{grid-column: 1/ -1; width: 70%; margin: 0 auto;} } @media screen and (max-width: 360px) { .widget_shortcode_auf form{width: 90%;} } /************************************************************/ /* Rechnermaske BIG */ /* Rechnermasken bzw Widgets Uniformierung ... */ #tableBox { width: auto; height: auto; color: #222; padding: 10px 10px 5px 10px; margin: 0 0 15px 0; } #tableBox * { margin: 0; padding: 5px; } #tableBox p { padding: 5px 0;color: #222; } #tableBox h1 { font-size: 24px; margin-bottom: 10px; } #tableBox label span { width: 125px; display: inline-block; } /* #tableBox label { color:#222; } */ #tableBox td { padding: 3px; } #tableBox input, #tableBox select { font-size:1.2em; font-weight:300; } #tableBox input { max-width:100px; } #tableBox .submit { color: #000; width: 270px; padding: 10px; margin-bottom: 5px; border:0; border-radius: 2px; } #tableBox.bgtagesgeldrechner, #tableBox.bgfremdwaehrungsrechner, #tableBox.bgfestgeldrechner { background: #fff url(../images/rechner-tagesgeld-festgeld_w1.jpg) no-repeat right top; } #tableBox.bgfremdwaehrungsrechner { background-position: right bottom; } #tableBox.bgfestgeldrechner { background-size: 30%; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { #tableBox.bgtagesgeldrechner, #tableBox.bgfremdwaehrungsrechner, #tableBox.bgfestgeldrechner { background: #fff url(../images/rechner-tagesgeld-festgeld_w2.jpg) no-repeat right top 50% 50%; } } #tableBox.bgfirmentagesgeld { background: #fff url(../images/rechner-firmen-tagesgeld-festgeld.jpg) no-repeat right top; } #rechnermaske { margin-top:5px; } #rechnermaske fieldset { border:0; } #rechnermaske input[type=checkbox]{ width:1.5em; height:1.5em; border:1px solid #444; background-color:#ccc; float:left; margin-right:10px; margin-bottom:6px; } #rechnermaske input[type=checkbox]:checked { background-color:#eee; } #rechnermaske input[type=checkbox] ~ label { display:block; } /* weitere Filter */ #rechnermaske div.optionfields > input ~ label[for="options"] { display: grid; grid-template-columns: max-content auto; align-items: center; } @media screen and (max-width:550px) { #tableBox.bgtagesgeldrechner, #tableBox.bgfirmentagesgeld, #tableBox.bgfremdwaehrungsrechner, #tableBox.bgfestgeldrechner { background-image:none;} #tableBox.bgtagesgeldrechner, #tableBox.bgfirmentagesgeld, #tableBox.bgfestgeldrechner { text-align:center; } #rechnermaske input[type=checkbox] ~ label { display:initial; } } /************************************************************/ /* eKomi Sterne im Footer */ #div-ekomi { /* background: none repeat scroll 0 0 #7E9CAB; font-size: 12px; */ padding: 5px; } .icon-stars-small { background:url(../images/star_sprite_small.png) no-repeat; width:72px; display:inline-block; height:11px; } .icon-star-0_0 { background-position: right 0; } .icon-star-0_5 { background-position: right -30px; } .icon-star-1_0 { background-position: right -60px; } .icon-star-1_5 { background-position: right -90px; } .icon-star-2_0 { background-position: right -120px; } .icon-star-2_5 { background-position: right -150px; } .icon-star-3_0 { background-position: right -180px; } .icon-star-3_5 { background-position: right -210px; } .icon-star-4_0 { background-position: right -240px; } .icon-star-4_5 { background-position: right -270px; } .icon-star-5_0 { background-position: right -300px; } /************************************************************/ /* style spielereien */ ::-moz-selection { background: rgb(137,21,96); color: #fff; text-shadow: none; } ::selection { background: rgb(137,21,96); color: #fff; text-shadow: none; } /************************************************************/ /* RATING table short in detail */ .ratingcon_rechts span:nth-of-type(2) { line-height:100%; } /************************************************ PRojektspezifisches CSS f�r Crowdfunding *************************************************/ .tgv_contentcontainer div.haupt{ background:#fff; color:#002E5B; } .tgv_contentcontainer span.zinsen span{ background-color:#881260; } .tgv_contentcontainer span.anlage span{ background-color:#002E5B; } .tgv_contentcontainer .flex-item h3{ margin:0px; margin-top: 5px; } /************************************************ Wohnungsbaugenossenschaften - Klapptabellen - sonstige Feinheiten f�r diese Unterseite *************************************************/ input.wbgshowtrigger { display:none; } label.wbgshowtrigger { line-height:3em; width:100%; cursor:pointer; display:inline-block; flex: 0 1 auto; order:2; text-align:center; margin-bottom:50px;} label.wbgshowtrigger div.triangle { border-color: white transparent transparent transparent; } input.wbgshowtrigger:not(:checked) + label::after { content:"Alle Angebote anzeigen"; } input.wbgshowtrigger:checked + label::after { content:"weniger anzeigen"; } input.wbgshowtrigger:not(:checked) + label { background-color:#388E3C; } input.wbgshowtrigger:checked + label { background-color:#2E7D32; } table.wbg.klappe tbody tr:nth-child(n+7) { display:none; } table.wbg.klappe tbody tr:nth-child(6n) td, table.wbg.klappe tbody tr:nth-child(6n) th { border-bottom:2px dashed rgba(137,21,96, 1); } input.wbgshowtrigger:checked ~ table.wbg.klappe tbody tr:nth-child(n+7) { display: table-row; } input.wbgshowtrigger:checked ~ table.wbg.klappe tbody tr:nth-child(6n) td, input.wbgshowtrigger:checked ~ table.wbg.klappe tbody tr:nth-child(6n) th { border-bottom:0px; } /************************************************ IMPORT STYLE NEU - noch zu cleanen *************************************************/ .ul-veroeffentlichung { list-style: none; margin: 20px 20px 40px 20px; padding: 0 4px; } .ul-veroeffentlichung li { border-bottom: 1px solid #FFF; height: 35px; padding: 0 0 10px 40px; margin:0 0 10px 0; overflow:hidden; } .ul-veroeffentlichung li.artikel { background: url("/images/sprite_veroeffentlichungen.png") no-repeat scroll 0 8px rgba(0, 0, 0, 0); } .ul-veroeffentlichung li.news { background: url("/images/sprite_veroeffentlichungen.png") no-repeat scroll 0 -10px rgba(0, 0, 0, 0); } .ul-veroeffentlichung li.interview { background: url("/images/sprite_veroeffentlichungen.png") no-repeat scroll 0 -40px rgba(0, 0, 0, 0); } .ul-veroeffentlichung li.statistik { background: url("/images/sprite_veroeffentlichungen.png") no-repeat scroll 0 -80px rgba(0, 0, 0, 0); } .ul-veroeffentlichung li.test { background: url("/images/sprite_veroeffentlichungen.png") no-repeat scroll 0 -125px rgba(0, 0, 0, 0); } .tgv_contentcontainer .ul-statistik, .ul-statistik { font-size: 12px; list-style: none; margin: 20px 0 40px 0; padding: 0 4px; } .ul-statistik li { padding: 0; } .ul-statistik li a { display: block; height: 52px; width: calc(100% - 20px); padding: 5px; text-decoration: none; } .ul-statistik li a .span-statistik-teaser-headline { display: inline-block; font-weight: bold; padding: 0 0 3px 0; } .ul-statistik li a.bg-white { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll right -438px #FFF; border: 1px solid #FFF; } .ul-statistik li a.bg-white:hover { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll right -368px #FFF; border: 1px solid #FFF; } .ul-statistik li a.bg-grey { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll right -438px #DBDCDE; border: 1px solid #FFF; } .ul-statistik li a.bg-grey:hover { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll right -368px #DBDCDE; border: 1px solid #FFF; } .ul-statistik li a .span-statistik-teaser { display: block; height: 52px; overflow: hidden; padding-left: 60px; width: calc(100% - 100px); line-height: 140%; } .ul-statistik li .a-statistik-1 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left 0px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-2 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -52px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-3 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -104px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-4 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -156px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-5 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -208px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-6 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -260px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-7 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -500px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-8 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -552px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-9 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -604px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-10 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -656px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-11 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -708px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-12 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -760px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-13 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -812px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-14 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -864px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-15 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -916px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-16 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -968px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-17 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -1020px rgba(0, 0, 0, 0); } .ul-statistik li .a-statistik-18 .span-statistik-teaser { background: url("/images/sprite_zinsstatistiken.png") no-repeat scroll left -312px rgba(0, 0, 0, 0); } .TableHauptCenter { background-color:#F0F0F0; color: #000000; text-align: center; vertical-align: middle; margin-top: 0; margin-bottom: 0; } .TabletextFett { background-color:#F0F0F0; color: #000000; text-align: center; vertical-align: middle; margin-top: 0; margin-bottom: 0; font-weight: bold; } .TableTextCenter { background-color:#F0F0F0; font-family: Verdana; font-size: 11px; color: #000000; text-align: center; vertical-align: middle; margin-top: 0; margin-bottom: 0; padding-right: 2px; padding-left: 2px; } .TableHeader { background-color:#8AC5FF; color: #000000; text-align: center; vertical-align: middle; font-weight: bold; } .tableBasic tbody td a.btn-tableAntrag { background: url("../images/btn-tagesgeldvergleich-green.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: inline-block; height: 25px; text-indent: -999999px; width: 50px; font-size:14px; } .tableBasic tbody td a.btn-tableAntrag:hover { background: url("../images/btn-tagesgeldvergleich-green.png") no-repeat scroll left bottom rgba(0, 0, 0, 0); } .tableBasic tbody td a img { border: medium none !important; } .tableBasic .left { text-align: left; } .tableBasic .right { text-align: right; } .tableBasic .grey { background-color: #DDEEFF; } .tableBasic .magenta { background-color: #8B1961; color: #fff; } .tableBasic .blue-grey { background-color: #8AAAB7; } /* RATING TABELLE */ .tgv_contentcontainer h2#table_rating_headline { background: url("/images/header-tg-ratingtabelle.jpg") no-repeat scroll right 0 rgb(255, 255, 255); border-color: #c7cccf; border-image: none; border-style: solid solid none; border-width: 2px 2px medium; font-size: 16px; height: 35px; margin: 0; padding: 15px 0 0 5px; } .rating .tableBasic td.bank { text-align: left; } .rating .tableBasic tr.gesamt td:last-child { background-color: #8B1961; color: #FFFFFF; } .rating .tableBasic tr.sort td { background-color: #F0F1F3; } #auswertung_tg td.tablesorter-header, #auswertung_fg td.tablesorter-header, #auswertung_sp td.tablesorter-header { background: #fff url("../rating-tagesgeld/images/graue_pfeile.png") no-repeat scroll center center; border-color: #c7cccf; text-indent: -4000px; } /* Tagesgeld Test 2015 */ .div-download-tg-test-2015 { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #EBECEE; border-color: #145784; border-image: none; border-radius: 2px; border-style: solid; border-width: 2px 2px 4px; height: 200px; margin-left: 10px; margin-bottom: 40px; padding-top: 25px; width: 736px; } .div-download-tg-test-2015 h4 { color: #000; font-size: 12px; margin-top: 5; } .div-download-tg-test-2015 .pressekontakt { color: #000; font-size: 12px; } /**************************************************** ** ** EmpfehlungsBoxen - diverse Formate ** ****************************************************/ section.empfehlungen > ul { list-style-type:none; padding:0; margin:0; font-size:12px; line-height:18px; font-family:sans-serif; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-around; -ms-flex-pack: justify; justify-content: space-around; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } section.empfehlungen > ul > li { width:240px; -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; border:1px solid #888888; margin:auto; } @media (max-width:765px) { section.empfehlungen > ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap;-ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-box-pack: justify; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around;-webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } section.empfehlungen > ul > li { min-width:240px; width:70%; margin-bottom:5px; } } section.empfehlungen .siegel { margin-top:5px; height:40px; line-height:40px; font-weight:bold; font-size: 14px; color:#fff; overflow:hidden; vertical-align:middle; /* Farben f�r Blauverlauf hell > dunkel rgba(4,82,124,1) rgba(31,50,82) bzw #04527C #1F3252 */ background: rgba(31,50,82); background-image: -webkit-linear-gradient(top, #04527C, #1F3252); background-image: -moz-linear-gradient(top, #04527C, #1F3252); background-image: -ms-linear-gradient(top,#04527C, #1F3252); background-image: -o-linear-gradient(top, #04527C, #1F3252); background-image: linear-gradient(to bottom, #04527C, #1F3252); } section.empfehlungen img { margin:5px auto; display:block; width:65%; float:none; } section.empfehlungen ul.vorteile { padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 2.5em; } section.empfehlungen div.tablebutton { background-color:green; } section.empfehlungen h2 { font-size:1em; padding:0; margin:0; font-weight:600; color:rgb(245,245,245); display:flex;} section.empfehlungen .siegel h2 > img { margin:5px 5px 0 5px; width:1.8em; height:1.8em; } section.empfehlungen > div { margin-top:10px; padding:10px; } section.empfehlungen > div p, section.empfehlungen > div h4 { margin-left:0;margin-right:0; } section.empfehlungen > div p a { display:inline; } section.empfehlungen > div p:nth-of-type(2n) { background-color:rgb(254,254,254); } .single-line section.empfehlungen > ul > li { display:flex; width:100%; height:auto; } .single-line section.empfehlungen ul li div { flex:0 1 100%; max-width:33%; height:auto; margin:0; align-items: center; align-content: center; justify-content: center; display:flex; } .single-line section.empfehlungen ul li div h2 { justify-content: center; align-content: center; align-items: center; } .single-line section.empfehlungen ul li div.logo { align-self:center; } .single-line section.empfehlungen ul li div.tablebutton { justify-content: space-around; align-content: space-around; align-items: stretch; display: flex; } .single-line section.empfehlungen ul li div.tablebutton a.tablebutton { justify-content: center; align-content: center; align-items: stretch; display: flex; } .single-line section.empfehlungen ul li div.tablebutton a.tablebutton div { align-self:stretch; flex:0 1 100%; margin:auto; max-width:100%; } .single-line section.empfehlungen ul li div img { margin:5px auto; clear:both; float:none; width:2em; } .single-line section.empfehlungen ul li div.logo img { width:80%; min-width:120px; max-width:420px; } @media screen and (max-width:768px) { .single-line section.empfehlungen > ul > li {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: stretch; align-items: stretch;} .single-line section.empfehlungen ul li div { flex:1 1 auto; max-width:100%; height:auto; margin:0; } .single-line section.empfehlungen ul li div.siegel { flex: 1 1 100%; align-self:center; } .single-line section.empfehlungen ul li div.siegel img { float:left; margin: 8px; } } /* Vergleich CSS */ .ultimate_vergleich p.kombiprodukte_filter { padding: 5px 10px; margin: 0; } .ultimate_vergleich table { border-top: 1px solid #C4BEAE; } /* .ultimate_vergleich table thead th, .ultimate_vergleich table tbody td { padding: 3px 5px; text-align: center; vertical-align: middle; color: #000000; border-right: 1px solid #C4BEAE; border-bottom: 1px solid #C4BEAE } */ .ultimate_vergleich table thead th.headerSortUp { background: url("https://api-tagesgeldvergleich.finanzrechner.org/images/asc.gif") right bottom no-repeat!important; } .ultimate_vergleich table thead th.headerSortDown { background: url("https://api-tagesgeldvergleich.finanzrechner.org/images/desc.gif") right bottom no-repeat!important; } .ultimate_vergleich table tbody td a img { border: none!important; } table#ultimate_calculator tbody .i1 , table#ultimate_vergleich tbody .i1 { font-weight:400; } table img, table#ultimate_calculator .i1 img, table#ultimate_vergleich .i1 img, table#VergleichTable td img { width:80%; } .ultimate_vergleich table td.td_7, .ultimate_vergleich table td.td_3, .ultimate_vergleich table td.td_6 { white-space: nowrap; } /* Rechner-Ausgabe-Tabelle */ /* .i1 - Anbieter ... definitionstabelle noch ff */ table#ultimate_calculator { width:100%; border-collapse: separate; margin: 0 0 20px 0; border-left: 1px dotted #C4BEAE; } #ultimate_calculator .i1 { width:20%; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; padding-top:10px; padding-bottom:10px; } #ultimate_calculator .i7 { width:13%; } table#ultimate_calculator td, #ultimate_calculator table th { text-align:center; padding:5px; vertical-align: middle; } table#ultimate_calculator tbody td, table#ultimate_calculator tbody th { border-right: 1px dotted #C4BEAE; border-bottom: 1px solid #C4BEAE; border-top:1px solid #f4f4f4; vertical-align: middle; background-color: #FFFFFF; } table#ultimate_calculator td.i5, table#ultimate_calculator td.i8,#content th.i8 { white-space: nowrap; } table#ultimate_calculator td.i3, table#ultimate_calculator td.i5, table#ultimate_calculator td.i7 a { font-weight: 700; } table#ultimate_calculator td.i3, table#ultimate_calculator td.i5, table#ultimate_calculator td.i6, table#ultimate_calculator td.i16, table#ultimate_calculator td.i7 { vertical-align:middle; } table#ultimate_calculator td.i100 { text-align:left; } table#ultimate_calculator tbody th.i1, table#ultimate_calculator td.i100 { border-bottom: 2px solid #C4BEAE; } table#ultimate_calculator .i1 img { width:70%; max-height:30px; } table#ultimate_calculator tr.alt td, table#ultimate_calculator tr.alt th { background-color: rgba(244,244,244,1); } .ultimate_calculator_info { text-align: left; margin-top: 0; margin-bottom: 5px; font-weight: bold; } @media screen and (max-width: 420px) { /* Rechner-Ausgabe-Tabelle - mobilize */ /* Anbieterspalte */ #ultimate_calculator thead tr:nth-of-type(1) th:nth-of-type(1){ width:33%; } /* auszahlung */ table#ultimate_calculator thead tr th:nth-of-type(5), table#ultimate_calculator tbody tr td:nth-of-type(4), /* Einlagensicherung */ table#ultimate_calculator thead tr th:nth-of-type(6), table#ultimate_calculator tbody tr td:nth-of-type(5), /* gilt f�r */ table#ultimate_calculator thead tr th:nth-of-type(7), table#ultimate_calculator tbody tr td:nth-of-type(6), /* anbieterlink*/ table#ultimate_calculator thead tr th:nth-of-type(8), table#ultimate_calculator tbody tr td:nth-of-type(7) { display:none; } /* table#ultimate_calculator td.i1 { font-size:60%; } */ table#ultimate_calculator .i1 img, table#ultimate_vergleich .i1 img { max-width:100%; } .alternate_anbieterlink { display:inline; } .alternate_anbieterlink a.gobtn { padding:5px; } } @media screen and (min-width:421px) and (max-width: 630px) { /* Rechner-Ausgabe-Tabelle - mobilize */ /* auszahlung */ table#ultimate_calculator thead tr th:nth-of-type(5), table#ultimate_calculator tbody tr td:nth-of-type(4), /* Einlagensicherung */ table#ultimate_calculator thead tr th:nth-of-type(6), table#ultimate_calculator tbody tr td:nth-of-type(5), /* gilt f�r */ table#ultimate_calculator thead tr th:nth-of-type(7), table#ultimate_calculator tbody tr td:nth-of-type(6), /* anbieterlink*/ table#ultimate_calculator thead tr th:nth-of-type(8), table#ultimate_calculator tbody tr td:nth-of-type(7) { display:none; } table#ultimate_calculator .i1 img, table#ultimate_vergleich .i1 img { width:100%; } .alternate_anbieterlink { display:inline; } .alternate_anbieterlink a.gobtn { /* height:90%; */} } @media screen and (min-width:631px) and (max-width: 740px) { /* Rechner-Ausgabe-Tabelle - mobilize */ /* auszahlung */ table#ultimate_calculator thead tr th:nth-of-type(6), table#ultimate_calculator tbody tr td:nth-of-type(5), /* gilt f�r */ table#ultimate_calculator thead tr th:nth-of-type(7), table#ultimate_calculator tbody tr td:nth-of-type(6) { display:none; } } @media screen and (min-width:1024px) { body { width:1024px; } div#header { width:100%; background-size:cover; } /* kill - delete - if no effect til 2020-10-30 section#content { width: auto \/*calc(100% - 170px)*\/; } */ }