﻿@media (prefers-color-scheme: dark)
{
	:root
	{
		/* colors */
		--color-neutral-0: #000000;
		--color-neutral-100: #151515;
		--color-neutral-200: #2a2a2a;
		--color-neutral-300: #555555;
		--color-neutral-400: #767676;
		--color-neutral-500: #aaaaaa;
		--color-neutral-600: #d5d5d5;
		--color-neutral-700: #eaeaea;
		--color-neutral-800: #f5f5f5;
		--color-neutral-1000: #ffffff;
		--color-neutral-opacity-1000-5: #ffffff0d;
		--color-neutral-opacity-1000-10: #ffffff1a;
		--color-green-400: #85ffa1;
		--color-green-600: #007a12;
		--color-red-400: #ff87a3;
		--color-red-600: #d50031;
		--color-blue-focus-480: #0096d6;
		--color-blue-focus-520: #008fcc;
		--color-black: #FFFFFF;
		--color-white: #000000;
		--color-body-bg: var(--color-neutral-100);
		/* images */
		--bg-img-fmh-logo: url(https://cdn1.fmh.de/images/fmh.svg);
		--bg-img-fmh-x-claim: url(https://cdn1.fmh.de/images/fmh-x-claim-dm.svg);
		--bg-img-bar-chart-4: url(https://cdn1.fmh.de/images/common/icons/bar-chart-4-dm.svg);

		--bg-img-arrow-down-circle-fill: url(https://cdn1.fmh.de/images/fmh/arrow-down-circle-fill-dm.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-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 .btn, div.alfag .ui-checkboxradio-label.ui-state-active, div.alfag ul.tabs li.active a
	{
		/*background: var(--color-slate-200);*/
	}
	div.alfag .btn: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 .input-panel, div.alfag .result-panel
	{
		width: 100%;
		border: none;
		display: block;
		padding: 10px 0px;
	}
}

@media (max-width: 840px)
{
}

@media (max-width: 740px)
{
	
}

@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;
	}
}

@media (max-width: 560px)
{
	div.alfag fieldset li label
	{
		/*width: 150px;*/
	}
	div.alfag.fondsrendite:not(.vergleich) fieldset li label
	{
		/*width: 150px;*/
	}
	div.alfag.lebensversicherungen:not(.vergleich) fieldset li label
	{
		/*width: 150px;*/
	}
	div.alfag.fondsrendite:not(.vergleich) fieldset li .ic
	{
		/*margin-left: 150px;*/
	}
	div.alfag.lebensversicherungen:not(.vergleich) fieldset li .ic
	{
		/*margin-left: 150px;*/
	}
	
	div.alfag .result-box1, div.alfag .result-box2
	{
		display: block;
		width: 100%;
	}
	div.alfag .result-box1
	{
		border-right: none;
		padding-right: 0;
	}
	div.alfag .result-box2
	{
		padding-left: 0;
	}
	
	div.alfag .tblresult .col-zinssatz
	{
		display: none;
	}
	div.alfag .tblresult .col-einzahlung
	{
		display: none;
	}
}

@media (max-width: 480px)
{
	div.alfag .printlink
	{
		display: none;
	}

	div.alfag fieldset li > label
	{
		width: 100%;
		margin-bottom: 10px;
	}
	div.alfag fieldset li .ic
	{
		margin-left: 0;
	}
	
	div.alfag.vergleich fieldset li label
	{
		width: 100%;
	}
	div.alfag.vergleich fieldset li .ic
	{
		margin-left: 0;
	}

	div.alfag .cb, div.alfag .rb
	{
		/*white-space: normal;*/
		display: inline-block;
		width: 90%;
	}
	
	div.alfag.vergleich .result table, div.alfag.vergleich .result tbody, div.alfag.vergleich .result tr
	{
		display: block;
	}
	div.alfag.vergleich .result tr td, div.alfag.vergleich .result tr th
	{
		display: inline-block;
	}
	div.alfag.vergleich .result tr td:nth-child(1), div.alfag.vergleich .result tr th:nth-child(1)
	{
		width: 100%;
	}
	div.alfag.vergleich .result tr td:nth-child(2), div.alfag.vergleich .result tr th:nth-child(2)
	{
		width: 50%;
	}
	div.alfag.vergleich .result tr td:nth-child(3), div.alfag.vergleich .result tr th:nth-child(3)
	{
		width: 48%;
	}

	div.alfag .tblresult .col-zinsen
	{
		display: none;
	}
	div.alfag .tblresult .col-steuerabzug
	{
		display: none;
	}
	div.alfag .tblresult .col-bonussatz
	{
		display: none;
	}
	div.alfag .tblresult.mitinflation .col-zinsen-nach-steuerabzug
	{
		display: none;
	}
	div.alfag .tblresult .col-anlagebetrag
	{
		display: none;
	}
}

@media (max-width: 400px)
{
	div.alfag input, div.alfag select,
	div.alfag .schnellcheck-buttonset .rb label, div.alfag .schnellcheck-buttonset .cb label,
	div.alfag .schnellcheck-buttonset li span
	{
		font-size: var(--font-size-small);
	}
	
	div.alfag fieldset .tb, div.alfag fieldset .sb
	{
		margin: 4px 0px;
	}
	div.alfag fieldset input.submit
	{
		width: 50%;
	}
	div.alfag .cb label, div.alfag .rb label
	{
		white-space: normal;
	}
}