@charset "utf-8";

/* fonts -------------------------------------------------- */

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
	font-family: 'Deliciousbold';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/delicious-bold-webfont.woff2') format('woff2'), url('../fonts/delicious-bold-webfont.woff') format('woff');
}

/* fira-sans-regular - latin */
/* FiraSans-Regular.ttf: Digitized data copyright 2012-2016, The Mozilla Foundation and Telefonica S.A. */
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/fira-sans-v16-latin-regular.woff2') format('woff2'), url('../fonts/fira-sans-v16-latin-regular.woff') format('woff');
}

/* fira-sans-600 - latin */
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/fira-sans-v16-latin-600.woff2') format('woff2'), url('../fonts/fira-sans-v16-latin-600.woff') format('woff');
}

@font-face {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 100 700;
	/*src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v153/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');*/
	src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}


/* general settings -------------------------------------------------- */

* { margin: 0; padding: 0; font-family: 'Fira Sans', sans-serif; font-weight: normal; }

html,
body {
	font-size: 100%;
	height: 100%;
	letter-spacing: 0.1px;
	line-height: 125%;
	color: var(--shinyColorTextPrimary);
	background-color: var(--shinyColorPlainWhite);
}

main { margin-top: 96px; }


/* headings -------------------------------------------------- */

h1, h2, h3, h4 { line-height: 1; }

h1 {
	font-family: 'deliciousbold' !important;
	font-size: 2.4rem;
	font-weight: normal;
	font-style: normal;
	padding: 0 0 32px 0;
	text-align: center;
	color: var(--shinyColorTextPrimary);
}

h2 {
	font-family: 'deliciousbold' !important;
	font-size: 1.8rem;
	font-weight: normal;
	font-style: normal;
	padding: 32px 0 32px 0;
	text-align: center;
	color: var(--shinyColorTextPrimary);
}

h3 { font-size: 1.2rem; font-weight: 600; padding: 16px 0 16px 0; }

h4 { font-size: 1rem; font-weight: 600; padding: 8px 0 8px 0; }


/* text -------------------------------------------------- */
a { color: var(--shinyColorTextPrimary); text-decoration: none; }
a:hover { color: var(--shinyColorTextSecondary); text-decoration: underline; }

p { padding-bottom: 8px; }
p.textblock { text-align: justify; }

ul { margin: 16px 0; }

li {
	list-style-type: none;
	margin: 0 0 24px 0;
	padding: 8px;
	background-color: transparent;
	border-left: 4px solid var(--shinyColorTextPrimary);
}

b { font-weight: bold; }

strong { font-weight: 600; }


/* header ------------------------------------------------------------------ */
header {
	height: 96px;
	background-image: linear-gradient(to right, var(--shinyColorBrandingB4Pro), var(--shinyColorBrandingB4Home) 50%, var(--shinyColorBrandingB4Pro) 75%, var(--shinyColorBrandingB4Business));
	position: fixed;
	top: 0;
	z-index: 999;
	width: 100%;
	opacity: 0.99;
	border-bottom: 1px solid var(--shinyColorDivider);
}

#b4home header { background-image: none; background-color: var(--shinyColorBrandingB4Home);}
#b4pro header { background-image: none; background-color: var(--shinyColorBrandingB4Pro);}
#b4business header { background-image: none; background-color: var(--shinyColorBrandingB4Business);}
#bveu header { background-image: none; background-color: var(--shinyColorBrandingBVEU);}

.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	column-gap: 20px;
}

.wrapper {
	width: 93%;
	margin-left: auto;
	margin-right: 2%;
	height: inherit;
}

header h1 {
	padding: 0px;
	text-align: unset;
	color: var(--shinyColorAlternateRow);
}
header h2 {
	padding: 0px;
	text-align: unset;
	color: var(--shinyColorAlternateRow);
}
header a:hover {
	text-decoration: none;
}

.header-font-size-xxl {
	font-size: 2.4rem;
}

/* banner ------------------------------------------------------------------ */
.banner {
	overflow: hidden;
	height: 400px;
	position: relative;
}

/* circle with text inside */
.banner-content {
	margin-left: 5%;
	margin-top: 40px;
	width: 200px;
	height: 200px;
	text-align: center;
	padding: 60px;
	border-radius: 256px;
}

.bannerb4landing {
	background-image: url(../img/banner/banner-banking4landing.jpg);
	background-size: 100%;
	background-position: 50% 30%;
	width: 100%;
}

.bannerb4home {
	background-image: url(../img/banner/banner-banking4home.jpg);
	background-size: 100%;
	background-position: 50% 30%;
}

.bannerb4professional {
	background-image: url(../img/banner/banner-banking4professional.jpg);
	background-size: 100%;
	background-position: 50% 30%;
}

.bannerb4business {
	background-image: url(../img/banner/banner-banking4business.jpg);
	background-size: 100%;
	background-position: 50% 30%;
}

.bannerbveu {
	background-image: url(../img/banner/banner-bankingveu.jpg);
	background-size: 100%;
	background-position: 50% 30%;
}

.bannerb4landing .banner-content { background-color: rgba(0, 52, 100, .6);}
.bannerb4home .banner-content { background-color: var(--shinyColorBrandingB4HomeTransparent);}
.bannerb4professional .banner-content { background-color: var(--shinyColorBrandingB4ProTransparent);}
.bannerb4business .banner-content { background-color: var(--shinyColorBrandingB4BusinessTransparent);}
.bannerbveu .banner-content { background-color: var(--shinyColorBrandingBVEUTransparent);}


.banner-content h1 { color: var(--shinyColorAlternateRow); font-size: 2.2rem;}
.bannerb4landing .banner-content h1 { font-size: 3.2rem; text-align: center;}

.banner .buttonlight { color: var(--shinyColorAlternateRow); border-color: var(--shinyColorAlternateRow);}
.banner .buttonlight:hover { background-color: var(--shinyColorAlternateRow);}
.bannerb4home .buttonlight:hover { 	color: var(--shinyColorBrandingB4Home);}
.bannerb4professional .buttonlight:hover { color: var(--shinyColorBrandingB4Pro);}
.bannerb4business .buttonlight:hover { color: var(--shinyColorBrandingB4Business);}
.bannerbveu .buttonlight:hover { color: var(--shinyColorBrandingBVEU);}


/* prologue, a kind of reduced banner with information ---------------------- */
.prologue {
	height: 96px;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	padding-left: 5%;
	padding-right: 5%;
	align-items: center;
	justify-content: center;
	background-color: var(--shinyColorAlternateRow);
}

.prologue h1 {
	padding: 0px;
	color: var(--shinyColorBrandingB4Pro);
}


/* statement (only used for BankignZV) ---------------------- */
.statement {
	background-color: var(--shinyColorBackground);
	padding: 20px;
}


/* the intro on the banking4 landing page ----------------------------------- */
.b4intro h1 {
	font-size: 4rem;
	margin-bottom: 2rem;
}
.b4intro .icon4 {
	display: inline;
	width: 4rem;
	height: 4rem;
	margin-right: 1rem;
	position: relative;
	bottom: -0.15em;
}
.b4intro .span4 {
	font-family: 'delicious' !important;
	color: rgba(0, 0, 0, .4);
}
.b4intro p { font-size: 1.4rem; line-height: 150%; }
.b4intro .screenshot4 {
	width: 100%;
	box-shadow: 0 0px 64px rgba(0, 0, 0, .2);
}


/* styling text -------------------------------------------------- */

.disclaimer { font-size: 0.8rem; }

.indented48 { padding-left: 48px; }

.inlineblock { display: inline-block; width: max-content; }

#b4home .price {
	font-weight: 600;
	color: var(--shinyColorBrandingB4Home);
}
#b4pro .price {
	font-weight: 600;
	color: var(--shinyColorBrandingB4Pro);
}
#b4business .price {
	font-weight: 600;
	color: var(--shinyColorBrandingB4Business);
}
#b4veu .price {
	font-weight: 600;
	color: var(--shinyColorBrandingBVEU);
}


/* styling list elements -------------------------------------------------- */
#b4home .bright-tile li { border-left: 4px solid var(--shinyColorBrandingB4Home);}
#b4home .dark-tile li { border-left: 4px solid var(--shinyColorBackgroundEmpty);}
#b4pro .bright-tile li { border-left: 4px solid var(--shinyColorBrandingB4Pro);}
#b4pro .dark-tile li { border-left: 4px solid var(--shinyColorBackgroundEmpty);}
#b4business .bright-tile li { border-left: 4px solid var(--shinyColorBrandingB4Business);}
#b4business .dark-tile li { border-left: 4px solid var(--shinyColorBackgroundEmpty);}
#bveu .bright-tile li { border-left: 4px solid var(--shinyColorBrandingBVEU);}
#bveu .dark-tile li { border-left: 4px solid var(--shinyColorBackgroundEmpty);}

.b4support li:not([class]) { background-color: var(--shinyColorBackgroundPanel);}
.b4support li:not([class]):hover { background-color: var(--shinyColorBackgroundEmpty);}
.b4support li:not([class]) a:hover { color: var(--shinyColorTextPrimary); text-decoration: none;}

#updates li { background-color: var(--shinyColorAlternateRow); border-left: 4px solid var(--shinyColorBrandingSubsembly);}


/* buttons ----------------------------------------------------------------- */
.buttonholder {
	margin: 16px 0 16px 0;
	text-align: center;
}

.button {
	padding: 10px 15px;
	background-color: var(--shinyColorBrandingSubsembly);
	color: var(--shinyColorBackground);
	border-style: solid;
	border-width: 1px;
	border-color: var(--shinyColorBrandingSubsembly);
	text-decoration: none;
	text-align: center;
	border-radius: 4px;
}

.button:hover {
	background-color: var(--shinyColorBackground);
	color: var(--shinyColorBrandingSubsembly);
	text-decoration: none;
}

.buttonlight {
	padding: 10px 15px;
	color: var(--shinyColorBrandingSubsembly);
	border-style: solid;
	border-width: 1px;
	border-color: var(--shinyColorBrandingSubsembly);
	text-decoration: none;
	text-align: center;
	border-radius: 4px;
}

.buttonlight:hover {
    background-color: var(--shinyColorBrandingSubsembly);
    color: var(--shinyColorBackground);
    text-decoration: none;
}


/* styling buttons for each product ---------------------------------------- */
#b4home .button { background-color: var(--shinyColorBrandingB4Home); border-color: var(--shinyColorBrandingB4Home);}
#b4home .button:hover { background-color: transparent; color: var(--shinyColorBrandingB4Home);}
#b4pro .button { background-color: var(--shinyColorBrandingB4Pro); border-color: var(--shinyColorBrandingB4Pro);}
#b4pro .button:hover { background-color: transparent; color: var(--shinyColorBrandingB4Pro);}
#b4business .button { background-color: var(--shinyColorBrandingB4Business); border-color: var(--shinyColorBrandingB4Business);}
#b4business .button:hover { background-color: transparent; color: var(--shinyColorBrandingB4Business);}
#bveu .button { background-color: var(--shinyColorBrandingBVEU); border-color: var(--shinyColorBrandingBVEU); }
#bveu .button:hover { background-color: transparent; color: var(--shinyColorBrandingBVEU);}

.badge img { height:42px; vertical-align: middle; }
.badge:hover { opacity: 0.8; }
.buttonholder.badge { text-align: left; }

.buttonholder.inlineblock { display: inline-block; margin-right: 16px }

.b4products .buttonholder { display: inline-block; margin-right: 16px;}
.b4products .buttonholder.badge{ margin-right: 0px; margin: 8px 0 8px 0;}

.tec-core .buttonlight {
	display: block;
	width: 160px;
}

.b4products .buttonlight,
.dark-tile .buttonlight {
	color: var(--shinyColorBackgroundPanel);
	border-color: var(--shinyColorBackgroundPanel);
}

.b4products .buttonlight:hover,
.dark-tile .buttonlight:hover {
	color: var(--shinyColorBrandingB4Pro);
	background-color: var(--shinyColorBackgroundPanel);
}

.bright-tile .buttonlight {
	color: var(--shinyColorTextPrimary);
	border-color: var(--shinyColorTextPrimary);
}

.bright-tile .buttonlight:hover {
	color: var(--shinyColorBackgroundPanel);
	background-color: var(--shinyColorTextPrimary);
}


/* colors for each product -------------------------------------------------- */
.b4facts { background-color: var(--shinyColorAlternateRow);}
.b4facts h1 { color: var(--shinyColorBrandingB4Pro);}
.b4facts p {
	color: var(--shinyColorTextPrimary);
	padding-left: 64px;
	font-size: 1.2rem;
	line-height: 150%;
}

#banking4 .b4facts h3 { color: var(--shinyColorBrandingB4Pro);}
#b4home .b4facts h3 { color: var(--shinyColorBrandingB4Home);}
#b4pro .b4facts h3 { color: var(--shinyColorBrandingB4Pro);}
#b4business .b4facts h3 { color: var(--shinyColorBrandingB4Business);}
#bveu .b4facts h3 { color: var(--shinyColorBrandingBVEU);}

.b4products h1,
.b4products h3 {
	color: var(--shinyColorBackgroundEmpty);
	text-align: left;
}

.creditinstitute h1, 
.creditinstitute h3, 
.creditinstitute p {
	color: var(--shinyColorBackground);
}

.tec-b4products .bright-tile { background-color: var(--shinyColorBackground);}
.tec-b4products .dark-tile { color: var(--shinyColorBackgroundEmpty);}

#b4home .dark-tile { background-color: var(--shinyColorBrandingB4Home);}
#b4pro .dark-tile { background-color: var(--shinyColorBrandingB4Pro);}
#b4business .dark-tile { background-color: var(--shinyColorBrandingB4Business);}
#bveu .dark-tile { background-color: var(--shinyColorBrandingBVEU);}

.tec-b4products .dark-tile h1 {	color: var(--shinyColorBackgroundEmpty);}


/* flex container for tiles ------------------------------------------------ */
.tile-container {
	display: flex;
	flex-wrap: wrap;
}

.tile-item.one-column {
	flex-grow: 1;
	flex-basis: 100%;
}

.tile-item.two-column {
	flex-grow: 1;
	flex-basis: 45%; /* default value 5-45-45-5 without any paddings/margins */
}

.tile-item.three-column {
	flex-grow: 1;
	flex-basis: 30%; /* default value 5-30-30-30-5 without any paddings/margins */
}

.tile-1stlevel  {
	padding: 48px 5%;
}

.tile-2ndlevel {
	padding: 24px 5%;
}

.tile-padding {
	padding: 48px 48px;
}

#banking4 .tile-item.two-column,
#knowhow .tile-item.two-column {
	flex-basis: 35%;
}

.b4support .tile-container {
	gap: 1px;
	background-color: var(--shinyColorAlternateRow);
	border-bottom: 1px solid var(--shinyColorAlternateRow);
}

#knowhow .tile-container {
	gap: 24px;
}

.b4support .tile-item.three-column {
	flex-basis: 23%;
}

.tec-b4products .tile-item.two-column {
	flex-basis: 35%;
}

.b4facts .tile-container {
	justify-content: space-between;
	column-gap: 32px;
	row-gap: 16px;
}

.b4intro .tile-container {
	gap: 64px;
	align-items: center;
}

.b4download .tile-container,
.b4buy .tile-container {
	column-gap: 48px;
	row-gap: 48px;
}

.b4products .tile-container {
	column-gap: 1px;
	row-gap: 1px;
}

.tec-core .tile-container {
	column-gap: 48px;
	row-gap: 48px;
}

.b4download .tile-item.two-column,
.b4buy .tile-item.two-column {
	flex-basis: 47%;
}

.b4buy .tile-item.three-column:nth-of-type(1) { flex: 3; }
.b4buy .tile-item.three-column:nth-of-type(2) { flex: 2; }
.b4buy .tile-item.three-column:nth-of-type(3) { flex: 2; }

.b4support .tile-item.tile-1stlevel:first-of-type,
.tec-b4products .tile-item.tile-1stlevel {
	border-bottom: 1px solid var(--shinyColorBackground);
}


/* flex container for img in a headline -------------------------------------------------- */
.img-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.b4support .img-container,
.b4download .img-container,
.b4buy .img-container {
	gap: 8px;
}

.b4products .img-container {
	padding-bottom: 16px;
}

.tec-b4products .img-container {
	flex-wrap: nowrap;
}

.b4products h3 {
	flex: 16;
	font-weight: 500;
}

.clip-logo {
	width: 40px;
	height: 28px;
}

.logo-tiny {
	width: 100%;
	vertical-align: middle;
}


/* screenshots ------------------------------------------------------------- */
.screenshot-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.tile-item .screenshot {
	width: 560px;
	height: auto;
	margin-bottom: 8px;
	border-radius: 4px;
	/*box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, .6);*/
}

.bveu .tile-item .screenshot {
	width: 280px;
}

#b4home .tile-item .screenshot,
#b4pro .tile-item .screenshot,
#b4business .tile-item .screenshot {
	width: 100%;
}
#bveu .tile-item .screenshot {
	width: auto;
	height: 560px;
}

.img-inline{ height: 24px; }


/* gallery of screenshots -------------------------------------------------- */
.gallery { position: relative;}

.gallery figure {
	position: absolute;
	display: inline-block;
	z-index: 1;
	animation: change-gallery 21s infinite;
}

.gallery figure:last-of-type { position: relative; }

.gallery > figure figcaption { /* not yet used */
	position: absolute;
	left: 1em;
	font-size: 2em;
	font-weight: bold;
	bottom: 0.5em;
	z-index: 2;
	color: white;
}

@keyframes change-gallery {
	0% { opacity: 0; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	100% { opacity: 0; }
}

.gallery figure:nth-of-type(2) {
	animation-delay: 7s;
	opacity: 0;
}

.gallery figure:nth-of-type(3) {
	animation-delay: 14s;
	opacity: 0;
}


/* tables --------------------------------------------*/
table {
	margin: 20px 0;
	border-collapse: collapse;
	width: 100%;
}

table * {
	vertical-align: baseline;
}

table h1,
table h2,
table h3,
table h4 {
	margin-top: 0;
	padding-top: 0;
}

th {
	font-weight: 600;
}

td,
th {
	padding: 8px 8px;
	text-align: left;
	border: thin solid var(--shinyColorBackgroundEmpty);
}

.table-wrap {
	overflow: hidden;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.table-scroll {
	overflow: scroll;
	height: 500px;
	background-color: var(--shinyColorBackground);
}

.table-scroll table {
	margin: 0px;
}

.table-scroll table th {
	position: sticky;
	top: 0; /* necessary for sticky */
}


/* special table settings for site impressum, datenschutz -------------------*/
#impressum table, #datenschutz table {
	margin-left: auto;
	margin-right: auto;
	width: 60%;
}

#impressum td,
#impressum th,
#datenschutz td,
#datenschutz th,
#barrierefreiheit td,
#barreirefreiheit th {
	border: unset;
}


/* special table settings for site productfinder ----------------------------*/
.functions tr td:first-child,
.functions tr th:first-child {
	width: 50%;
}

.functions tr td:nth-child(2),
.functions tr td:nth-child(3),
.functions tr td:nth-child(4) {
	text-align: center;
	width: 10%;
	color: var(--shinyColorBackground);
}

.functions tr:hover td { background-color: var(--shinyColorAlternateRow);}
.functions tr:hover td:nth-child(2) { color: var(--shinyColorBrandingB4Home);}
.functions tr:hover td:nth-child(3) { color: var(--shinyColorBrandingB4Pro);}
.functions tr:hover td:nth-child(4) { color: var(--shinyColorBrandingB4Business);}

.licences { overflow: hidden; }
.licences .table-container { overflow-x: auto; }

.licences tr td:first-child,
.licences tr th:first-child {
	width: 20%;
}

.licences tr td:nth-child(2),
.licences tr td:nth-child(3),
.licences tr td:nth-child(4),
.licences tr td:nth-child(5) {
	text-align: right;
	width: 16%;
	color: var(--shinyColorBackground);
}

.licence-mobile table { width: 80%; }


/* special table settings for site fints bank list --------------------------*/
.banken {
	border-collapse: collapse;
	font-size: 0.8rem;
}
.banken td, .banken th {
    padding: 2px 20px;
	border: none;
}
.banken tr {
    border-top: 1px solid var(--shinyColorDivider);
}


/* special table settings for site screenscraper bank list / overview bank list --*/
.screenscraper,
.creditinstitute {
	border-collapse: collapse;
}
.screenscraper td, .screenscraper th,
.creditinstitute td, .creditinstitute th {
	border: none;
}
.screenscraper tr,
.creditinstitute tr {
    border-top: 1px solid var(--shinyColorDivider);
	color: var(--shinyColorTextPrimary);
}

.creditinstitute th {
	background-color: var(--shinyColorDivider);
	color: var(--shinyColorTextPrimary);
}

.creditinstitute tr:nth-child(odd) {
	background-color: var(--shinyColorBackgroundPanel);
	border: none;
}

.creditinstitute tr:nth-child(even) {
	background-color: var(--shinyColorBackground);
	border: none;
}

.creditinstitute #table-column1 { width: 6%; }
.creditinstitute #table-column2 { width: 38%; }
.creditinstitute #table-column3 { width: 14%; }
.creditinstitute #table-column4 { width: 14%; }
.creditinstitute #table-column5 { width: 14%; }
.creditinstitute #table-column6 { width: 14%; }


/* google material symbols --------------------------------------------*/
.material_symbolbutton {
	font-family: 'Material Symbols Outlined';
	font-weight: 400;
	font-size: 28px;
	color: var(--shinyColorBackground);
	padding: 10px;
	line-height: 1;
	display: inline-block;
	border-radius: 32px;
	background-color: var(--shinyColorBrandingB4Pro);
}

#b4home .material_symbolbutton { background-color: var(--shinyColorBrandingB4Home);}
#b4pro .material_symbolbutton {	background-color: var(--shinyColorBrandingB4Pro);}
#b4business .material_symbolbutton { background-color: var(--shinyColorBrandingB4Business);}
#bveu .material_symbolbutton { background-color: var(--shinyColorBrandingBVEU);}

.material_symboloutlined {
	font-family: 'Material Symbols Outlined';
	font-weight: 400;
	font-size: 32px;
	color: var(--shinyColorTextPrimary);
}
.b4products .material_symboloutlined { color: var(--shinyColorBackgroundEmpty);}

.rotate_symbol { transform: rotate(60deg);}


/* issue list -------------------------------------------------------------- */
.issue-on  { border-left: thick solid var(--shinyColorIssueOn); background-color: var(--shinyColorIssueOnTransparent);}
.issue-mid { border-left: thick solid var(--shinyColorIssueMid); background-color: var(--shinyColorIssueMidTransparent);}
.issue-off { border-left: thick solid var(--shinyColorIssueOff); background-color: var(--shinyColorIssueOffTransparent);}


/* footer ------------------------------------------------------------------ */
footer {
	background-color: var(--shinyColorBackground);
	padding: 0 20px;
	font-size: 0.8rem;
	text-align: center;
}

footer a { color: var(--shinyColorBrandingB4Pro);}
footer a:hover { color: var(--shinyColorBrandingB4Home);}


/* version dynamically ------------------------------------------------------*/
.updateversion updateproductid,
.updateversion updatebuildnumber,
.updateversion updatesetupurl,
.updateversion updateinfo,
.updateversion betaversion,
.updateversion betabuildnumber,
.updateversion betasetupurl,
.updateversion betainfo { display: none; }
.updateversion updateversion { display: inline; font-weight: 600; }

.betaversion updateproductid,
.betaversion updatebuildnumber,
.betaversion updatesetupurl,
.betaversion updateinfo,
.betaversion updateversion,
.betaversion betabuildnumber,
.betaversion betasetupurl,
.betaversion betainfo { display: none; }
.betaversion betaversion { display: inline; font-weight: 600; }


/* responsive for mobiles ---------------------------------------------------*/
@media (max-width: 1200px) {
	.b4facts .tile-item {
		flex-basis: 40%;
	}

	.b4support .tile-item.three-column {
		flex-basis: 30%;
	}
	
	.b4buy .tile-item.three-column:nth-of-type(1) {
		flex-basis: 100%;
	}
}

@media (max-width: 1050px) {
	.b4products .tile-item {
		flex-basis: 90%;
	}

	#knowhow .tile-item.two-column {
		flex-basis: 100%;
	}

	.b4intro p { font-size: 1.2rem; }
	.b4intro tile-item { flex-basis: 100%; }
}

@media (max-width: 800px) {
	.wrapper { margin-right: auto; width: 90%;}

	.banner { height: 360px; }

	.banner-content {
		margin-left: 5%;
		margin-top: 30px;
		width: 200px;
		height: 200px;
		padding: 48px;
	}
	.banner-content h1 {
		font-size: 2.0rem;
		padding: 0 0 28px 0;
	}

	.bannerb4landing .banner-content h1 {
		font-size: 3.0rem;
	}

	.b4intro p { font-size: 1.1rem; }

	.b4facts p {
		font-size: 1.1rem;
		padding-left: 64px;
	}

	.functions table,
	.licences table {
	font-size: 0.9rem;
	}

	.licence-mobile table { width: 100%; }
	
	.b4facts .tile-item,
	.b4products .tile-item {
		flex-basis: 100%;
	}

	.b4support .tile-item.three-column {
		flex-basis: 100%;
		padding-left: 5%;
		padding-right: 5%;
	}

	.b4buy .tile-item.three-column:nth-of-type(2),
	.b4buy .tile-item.three-column:nth-of-type(3) {
		flex-basis: 100%;
	}


	#banking4 .tile-item.two-column,
	.tec-b4products .tile-item.two-column {
		flex-basis: 100%;
	}


	.banken table,
	.banken thead,
	.banken tbody,
	.banken th,
	.banken td,
	.banken tr {
		display: block;
		width: 100% !important;
	} 
	.banken td:nth-of-type(1), .banken tr:nth-of-type(1) { display: none; }
	.banken td:nth-of-type(2):before {	content: "BLZ: "; }
	.banken td:nth-of-type(3):before {	content: "BIC: "; }
	.banken td:nth-of-type(4):before {	content: "Bankname: "; }
	.banken td:nth-of-type(5):before {	content: "TAN-Verfahren: "; }
	.banken td:before { font-weight: 600; }

	.screenscraper table,
	.screenscraper thead,
	.screenscraper tbody,
	.screenscraper th,
	.screenscraper td,
	.screenscraper tr {
		display: block;
		width: 100% !important;
	} 
	.screenscraper tr:nth-of-type(1) { display: none; }
	.screenscraper td:nth-of-type(1):before {	content: "Kreditinstitut: "; }
	.screenscraper td:nth-of-type(2):before {	content: "Kontoarten: "; }
	.screenscraper td:nth-of-type(3):before {	content: "E-Kontoauszüge: "; }
	.screenscraper td:before { font-weight: 600; }

	.creditinstitute table,
	.creditinstitute thead,
	.creditinstitute tbody,
	.creditinstitute th,
	.creditinstitute td,
	.creditinstitute tr {
		display: block;
	}

	.creditinstitute #table-column1 {
		width: 100%;
	}
	
	.creditinstitute tr:nth-of-type(1) { display: none; }
	.creditinstitute td:nth-of-type(1):before {	content: ""; }
	.creditinstitute td:nth-of-type(2):before {	content: "Kreditinstitut: "; }
	.creditinstitute td:nth-of-type(3):before {	content: "Zugangsweg: "; }
	.creditinstitute td:nth-of-type(4):before {	content: "Kreditkarte: "; }
	.creditinstitute td:nth-of-type(5):before {	content: "E-Kontoauszüge: "; }
	.creditinstitute td:nth-of-type(6):before {	content: "Depot: "; }
	.creditinstitute td:before { font-weight: 600; }

}

@media (max-width: 700px) {
	.banner { height: 300px; }

	.banner-content {
		margin-left: 5%;
		margin-top: 20px;
		width: 180px;
		height: 180px;
		padding: 40px;
	}
	.banner-content h1 {
		font-size: 1.8rem;
		padding: 0 0 24px 0;
	}

	.bannerb4landing .banner-content h1 {
		font-size: 2.8rem;
	}

	.prologue h2 {
		font-size: 1.6rem;
	}

	.prologue p {
		font-size: 0.9rem;
	}

	.functions table,
	.licences table {
		font-size: 0.8rem;
	}

	.functions tr td:first-child,
	.functions tr th:first-child {
		width: 60%;
	}

	.functions tr td:nth-child(2),
	.functions tr td:nth-child(3),
	.functions tr td:nth-child(4) {
		width: 8%;
	}
}

@media (max-width: 600px) {

	.banner-content {
		margin-left: 5%;
		margin-top: 20px;
		width: 160px;
		height: 160px;
		padding: 40px;
	}
	.banner-content h1 {
		font-size: 1.6rem;
		padding: 0 0 20px 0;
	}

	.bannerb4landing .banner-content h1 {
		font-size: 2.6rem;
	}

	.prologue h2 {
		font-size: 1.4rem;
	}

	.prologue p {
		font-size: 0.8rem;
	}

	.tec-core .tile-item .screenshot {
		width: 100%;
	}

	.material_symbolbutton {
		font-size: 24px;
	}

	.b4intro p { font-size: 1.1rem; }

	.b4facts p {
		font-size: 1.0rem;
		padding-left: 60px;
	}

	h1 {
		font-size: 2.0rem;
		padding: 0 0 24px 0;
	}

	h2 {
		font-size: 1.6rem;
		padding: 24px 0 24px 0;
	}

	h3 {
		font-size: 1.0rem;
		padding: 12px 0 12px 0;
	}

	.text-vertical {
		writing-mode: vertical-rl;
		transform: translate(0px, 3px) scale(-1,-1);
		white-space: pre;
		line-height: 100%;
	}

	.tec-core .tile-container {
		column-gap: 24px;
		row-gap: 24px;
	}

}

@media (max-width: 550px) {
	.bannerb4landing,
	.bannerb4home,
	.bannerb4professional,
	.bannerb4business,
	.bannerbveu {
		background-size: auto 100%;
	}
}

@media (max-width: 400px) {

	.banner {
		height: 260px;
	}

	.banner-content {
		margin-left: 5%;
		margin-top: 20px;
		width: 140px;
		height: 140px;
		padding: 40px;
	}
	.banner-content h1 {
		font-size: 1.4rem;
		padding: 0 0 16px 0;
	}

	.bannerb4landing .banner-content h1 {
		font-size: 2.4rem;
	}
}