﻿@media (prefers-color-scheme: dark)
{
	:root
	{
		/* colors */
		--color-slate-50: #F8FAFC;
		--color-slate-100: #1E293B;
		--color-slate-200: #334155;
		--color-slate-300: #475569;
		--color-slate-400: #64748B;
		--color-slate-500: #94A3B8;
		--color-slate-600: #CBD5E1;
		--color-slate-700: #E2E8F0;
		--color-slate-800: #F1F5F9;
		--color-slate-900: #FFFFFF;
		--color-green-50: #F0FDF4;
		--color-green-100: #DCFCE7;
		--color-green-200: #BBF7D0;
		--color-green-300: #86EFAC;
		--color-green-400: #4ADE80;
		--color-green-500: #22C55E;
		--color-green-700: #15803D;
		--color-black: #0F172A;
		--color-white: #1E293B;
		--color-body-bg: var(--color-black);
		/* images */
		--bg-img-fmh-logo: url(https://cdn1.fmh.de/images/fmh.svg);
		--bg-img-award: url(https://cdn1.fmh.de/images/fmh/award-dm.svg);
		--bg-img-award-line: url(https://cdn1.fmh.de/images/fmh/award-line-dm.svg);
		--bg-img-chevron-down-select: url(https://cdn1.fmh.de/images/fmh2/chevron-down-select.svg);
		--bg-img-gift-fill: url(https://cdn1.fmh.de/images/fmh/gift-fill-dm.svg);
		--bg-img-info-circle: url(https://cdn1.fmh.de/images/fmh/info-circle-dm.svg);
		--bg-img-location-fill: url(https://cdn1.fmh.de/images/fmh/location-fill-dm.svg);
		--bg-img-location-on: url(https://cdn1.fmh.de/images/fmh/location-on-dm.svg);
		--bg-img-question-fill: url(https://cdn1.fmh.de/images/fmh/question-fill-dm.svg);
	}

	div.alfag select option:hover, div.alfag select option:checked
	{
		color: var(--color-slate-100);
	}
	div.alfag ul.tabs li.active a
	{
		background: var(--color-slate-200);
	}
	div.alfag ul.tabs li.active a:hover
	{
		background: var(--color-slate-100);
	}
	div.alfag .submit, div.alfag .ui-checkboxradio-label.ui-state-active, div.alfag ul.tabs li.active a
	{
		background: var(--color-slate-200);
	}
	div.alfag .submit:hover, div.alfag .ui-checkboxradio-label.ui-state-active:hover, div.alfag ul.tabs li.active a:hover
	{
		background: var(--color-slate-100);
	}
	div.alfag .angebotslink, div.alfag .dalink
	{
		background: var(--color-slate-200);
	}
	div.alfag .angebotslink:hover, div.alfag .dalink:hover
	{
		background: var(--color-slate-100);
	}
	div.alfag .mlink
	{
	}
	div.alfag .mlink:hover
	{
		color: var(--color-slate-100);
		background: var(--color-green-300);
	}
	div.alfag .ui-checkboxradio-label.ui-button:hover
	{
		color: var(--color-white-permanent);
	}
}

@media (max-width: 940px)
{
	div.alfag ul.tabs li
	{
		width: 49%;
	}

	div.alfag ul.tabs li#liSchnellcheck2
	{
		width: 49%;
	}
}

@media (max-width: 840px)
{
	div.alfag.schnellcheck .resulttable .col-award, div.alfag.schnellcheck .resulttable .col-bonus
	{
		display: none;
	}

	div.alfag.schnellcheck2 .resulttable .col-award, div.alfag.schnellcheck2 .resulttable .col-bonus
	{
		display: none;
	}

	div.alfag.top-anbieter .resulttable .col-award, div.alfag.top-anbieter .resulttable .col-bonus
	{
		display: none;
	}

	div.alfag .result li
	{
		width: 20%;
	}

	div.alfag .result li.hl
	{
		width: 30%;
	}
}

@media (max-width: 740px)
{
	div.alfag.schnellcheck .resulttable .col-kontowechsel, div.alfag.schnellcheck .resulttable .col-dispozins
	{
		display: none;
	}

	div.alfag.schnellcheck2 .resulttable .col-kontowechsel, div.alfag.schnellcheck2 .resulttable .col-dispozins
	{
		display: none;
	}

	div.alfag.top-anbieter .resulttable .col-kontowechsel, div.alfag.top-anbieter .resulttable .col-dispozins
	{
		display: none;
	}

	div.alfag .ph
	{
		display: none;
	}

	div.alfag .zinsen-gebuehren
	{
		float: none;
	}

	div.alfag .zinsen-gebuehren.mit-bonus
	{
		width: 100%;
	}

	div.alfag .bonus
	{
		float: none;
		width: 50%;
		margin: 10px auto;
	}

	div.alfag .buchungsvorgaenge
	{
		float: none;
		width: 100%;
	}

	div.alfag .rbox, div.alfag .gesamtkosten
	{
		float: none;
		width: 50%;
		margin: 10px auto;
	}

	div.alfag .ablaufkontoeroeffnung table
	{
		float: none;
		width: 100%;
	}

	div.alfag .ablaufkontoeroeffnung .kontowechselservice
	{
		float: none;
		margin: 10px auto;
	}
}

@media (max-width: 640px)
{
	:root
	{
		/*  */
		--font-size-h1: 32px;
		--font-size-h2: 28px;
		--font-size-h3: 26px;
		--font-size-h4: 22px;
		--font-size-h5: 20px;
		--font-size-h6: 18px;
	}

	div.alfag ul.tabs li
	{
		width: 100%;
	}

	div.alfag ul.tabs li#liSchnellcheck2
	{
		width: 100%;
	}

	div.alfag.detail-analyse fieldset table, div.alfag.detail-analyse fieldset tbody, div.alfag.detail-analyse fieldset tr
	{
		display: block;
	}

	div.alfag.detail-analyse fieldset td, div.alfag.detail-analyse fieldset th
	{
		display: inline-block;
	}

	div.alfag.detail-analyse fieldset td:nth-child(1), div.alfag.detail-analyse fieldset td:nth-child(3)
	{
		width: 60%;
	}

	div.alfag.detail-analyse fieldset td:nth-child(2), div.alfag.detail-analyse fieldset td:nth-child(4)
	{
		width: 35%;
	}

	div.alfag .schnellcheck-buttonset table, div.alfag .schnellcheck-buttonset tbody, div.alfag .schnellcheck-buttonset tr
	{
		display: block;
	}

	div.alfag .schnellcheck-buttonset td, div.alfag .schnellcheck-buttonset th
	{
		display: inline-block;
		width: 100%;
	}

	div.alfag .schnellcheck-buttonset th:nth-child(1)
	{
		/*width: 100%;*/
	}

	div.alfag.schnellcheck .resulttable .col-bargeldabhebung
	{
		display: none;
	}

	div.alfag.schnellcheck2 .resulttable .col-bargeldabhebung
	{
		display: none;
	}

	div.alfag.top-anbieter .resulttable .col-bargeldabhebung
	{
		display: none;
	}

	div.alfag.anbieterliste .resulttable .col-angebotsgueltigkeit
	{
		display: none;
	}

	div.alfag .anbieter-details-table, div.alfag .anbieter-details-table tbody, div.alfag .anbieter-details-table tr
	{
		display: block;
	}

	div.alfag .anbieter-details-table td, div.alfag .anbieter-details-table th
	{
		display: inline-block;
	}

	div.alfag .anbieter-details-table td.bemerkung
	{
		width: 100%;
	}

	div.alfag .anbieter-details-tab .ablaufkontoeroeffnung td:nth-child(2)
	{
		width: 90%;
	}

	div.alfag .rbox
	{
		width: 60%;
	}
}

@media (max-width: 560px)
{
	div.alfag .schnellcheck-buttonset-header
	{
		display: block;
		text-align: center;
	}

	div.alfag .schnellcheck-buttonset
	{
		display: none;
	}

	div.alfag fieldset li:nth-child(1), div.alfag fieldset li:nth-child(3)
	{
		width: 55%;
	}

	div.alfag fieldset li:nth-child(2), div.alfag fieldset li:nth-child(4)
	{
		width: 45%;
	}

	div.alfag fieldset li.cs3
	{
		width: 100%;
	}

	div.alfag .result table, div.alfag .result tbody, div.alfag .result tr
	{
		display: block;
	}

	div.alfag .result td
	{
		display: inline-block;
	}

	div.alfag .result td:nth-child(odd)
	{
		width: 50%;
	}

	div.alfag .result td:nth-child(even)
	{
		width: 45%;
	}

	div.alfag .result li
	{
		width: 40%;
	}

	div.alfag .result li.hl
	{
		width: 60%;
	}

	div.alfag.schnellcheck .resulttable .col-kreditkarten
	{
		display: none;
	}

	div.alfag.schnellcheck2 .resulttable .col-kreditkarten
	{
		display: none;
	}

	div.alfag.top-anbieter .resulttable .col-kreditkarten
	{
		display: none;
	}

	div.alfag.anbieterliste .resulttable .col-dispozins, div.alfag.anbieterliste .resulttable .col-dispoueberziehung
	{
		display: none;
	}

	div.alfag .anbieter-details-tabs li
	{
		min-width: 60%;
	}

	div.alfag .rbox
	{
		width: 70%;
	}
}

@media (max-width: 480px)
{
	div.alfag .printlink
	{
		display: none;
	}

	div.alfag ul.tabs li
	{
		width: 100%;
	}

	div.alfag ul.tabs li#liSchnellcheck2
	{
		width: 100%;
	}

	div.alfag ul.tabs li a
	{
		text-align: center;
	}

	div.alfag fieldset label
	{
		width: 100%;
	}

	div.alfag fieldset input, div.alfag fieldset select
	{
		margin: 4px 0px;
	}

	div.alfag fieldset .tb, div.alfag fieldset .sb
	{
		/*border: solid 1px #0078BB;*/
		/*height: 32px;*/
	}

	div.alfag .schnellcheck-buttonset .button, div.alfag .schnellcheck-buttonset .button2,
	div.alfag .schnellcheck-buttonset .rb, div.alfag .schnellcheck-buttonset .cb
	{
		margin: 2px 0;
	}

	div.alfag .schnellcheck-buttonset .rb label, div.alfag .schnellcheck-buttonset .cb label
	{
		height: 100%;
		/*line-height: 30px;*/
	}

	div.alfag .schnellcheck-buttonset .plz td:nth-child(3)
	{
		display: none;
	}

	div.alfag .schnellcheck-buttonset td
	{
		/*width: 49%;*/
	}

	div.alfag .headerrow th, div.alfag .headerrow td
	{
		white-space: normal;
	}



	div.alfag.schnellcheck .resulttable .col-angebot
	{
		/*display: none;*/
	}

	div.alfag.top-anbieter .resulttable .col-angebot
	{
		/*display: none;*/
	}

	div.alfag.anbieterliste .resulttable .col-angebot
	{
		display: none;
	}

	div.alfag .institutdetails-details
	{
		width: 100%;
	}

	div.alfag .award, div.alfag .fmhaward
	{
		display: none;
	}

	div.alfag .angebotslink
	{
		white-space: normal;
		line-height: 150%;
		padding: 4px 8px;
	}

	div.alfag .rbox
	{
		width: 80%;
	}
}

@media (max-width: 400px)
{
	div.alfag .schnellcheck-buttonset .rb:not(.rb2) label, div.alfag .schnellcheck-buttonset .cb:not(.cb2) label
	{
		width: 105px;
	}

	div.alfag .rbox
	{
		width: 90%;
	}
}
