<div class="flex flex-col gap-6">
	<nav>
		<div class="nav-card">
			<div class="card-menu-option dropdown dropdown-right dropdown-hover">
				<a href="/energieausweis-erstellen"
					>Energieausweis erstellen</a
				>
				<div class="dropdown-content">
					<a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">Verbrauchsausweis erstellen</a>
					<a href="/bedarfsausweis">Bedarfsausweis erstellen</a>
					<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe"
						>Verbrauchsausweis Gewerbe erstellen</a
					>
					<a href="/bedarfsausweis-gewerbe"
						>Bedarfsausweis Gewerbe anfragen</a
					>
				</div>
			</div>
			<a class="card-menu-option" href="/welcher-energieausweis"
				>Welcher Energieausweis ?</a
			>
			<div class="card-menu-option dropdown dropdown-right dropdown-hover">
				<a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">Verbrauchsausweis</a>
				<div class="dropdown-content">
					<a
						href="/energieausweis-erstellen/verbrauchsausweis-wohnenverbrauchsausweis-wohngebaeude"
						>Verbrauchsausweis Wohngebäude</a
					>
					<a
						href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
						>Verbrauchsausweis online erstellen</a
					>
					<a
						href="/energieausweis-erstellen/verbrauchsausweis-wohnenhaeufige-fragen-zum-verbrauchsausweis"
						>Häufige Fragen zum Verbrauchsausweis</a
					>
					<a
						href="/energieausweis-erstellen/verbrauchsausweis-wohnenstatistiken-zum-verbrauchsausweis"
						>Statistiken zum Verbrauchsausweis Wohngebäude</a
					>
					<hr class="nav-hr" />
					<a href="/energieausweis-erstellen/verbrauchsausweis-wohnenverbrauchsausweis-gewerbe"
						>Verbrauchsausweis Gewerbe</a
					>
					<a
						href="/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen"
						>Verbrauchsausweis Gewerbe online erstellen</a
					>
					<a
						href="/energieausweis-erstellen/verbrauchsausweis-wohnenhaeufige-fragen-zum-verbrauchsausweis-gewerbe"
						>Häufige Fragen zum Verbrauchsausweis Gewerbe</a
					>
					<a
						href="/energieausweis-erstellen/verbrauchsausweis-wohnenstatistiken-zum-verbrauchsausweis-gewerbe"
						>Statistiken zum Verbrauchsausweis Gewerbe</a
					>
				</div>
			</div>
			<div class="card-menu-option dropdown dropdown-right dropdown-hover">
				<a href="/bedarfsausweis/">Bedarfsausweis</a>
				<div class="dropdown-content">
					<a href="/bedarfsausweis/bedarfsausweis-wohngebaeude"
						>Bedarfsausweis Wohngebäude</a
					>
					<a
						href="/energieausweis-erstellen/bedarfsausweis-erstellen"
						>Bedarfsausweis online erstellen</a
					>
					<a
						href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis"
						>Häufige Fragen zum Bedarfsausweis</a
					>
					<a href="/bedarfsausweis/statistiken-zum-bedarfsausweis"
						>Statistiken zum Bedarfsausweis Wohngebäude</a
					>
					<hr class="nav-hr" />
					<a href="/bedarfsausweis/bedarfsausweis-gewerbe"
						>Bedarfsausweis Gewerbe</a
					>
					<a
						href="/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen"
						>Bedarfsausweis Gewerbe anfragen</a
					>
					<a
						href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis-gewerbe"
						>Häufige Fragen zum Bedarfsausweis Gewerbe</a
					>
				</div>
			</div>
			<div class="card-menu-option dropdown dropdown-right dropdown-hover">
				<a href="/">Energieausweis</a>
				<div class="dropdown-content">
					<a href="/energieausweis-pflicht"
						>Energieausweis Pflicht</a
					>
					<a href="/energieausweis-kosten"
						>Energieausweis Kosten</a
					>
					<a href="/energieausweis-haus">Energieausweis Haus</a>
				</div>
			</div>
			<a class="card-menu-option" href="/enev-zusammenfassung"
				>EnEV Zusammenfassung - Archiv</a
			>
			<a class="card-menu-option" href="/energieausweis-aussteller"
				>Energieausweis Aussteller</a
			>
			<a class="card-menu-option" href="/kundenbewertungen"
				>Kundenbewertungen</a
			>
			<a class="card-menu-option" href="/faq">FAQ</a>
			<a class="card-menu-option" href="/developers">Für Entwickler</a>
		</div>
	</nav>

	<div class="infoCard">
		<div class="flex-column align-center">
			<img
				src="/images/right-sidebar/ing-niedersachsen.png"
				alt="Mitglied Ingenieurkammer Niedersachen"
				style="height: 150px;margin-bottom: 25px; width: auto;"
			/>
			<img
				src="/images/right-sidebar/mitglied-haendlerbund.png"
				alt="Mitglied im Händlerbund"
				style="width:auto;
"
			/>
		</div>
	</div>
	<div class="infoCard">
		<div class="heading1">Was wird der Energieausweis kosten?</div>
		<hr style="margin-bottom:15px;" />
		<ul>
			<li>Verbrauchsausweis Wohngebäude<br />45€ inkl. MwSt.<hr /></li>
			<li>Bedarfsausweis Wohngebäude<br />75€ inkl. MwSt.<hr /></li>
			<li>Verbrauchsausweis Gewerbe<br />65€ inkl. MwSt.<hr /></li>
			<li>Bedarfsausweis Gewerbe<br />ab 300€ inkl. MwSt.<hr /></li>
			<li>EnEV-Nachweis Wohngebäude<br />ab 400€ inkl. MwSt.<hr /></li>
			<li>EnEV-Nachweis Gewerbe<br />ab 450€ inkl. MwSt.</li>
		</ul>
		<hr />
	</div>
	<div class="infoCard">
		<div class="heading1">Zahlungsoptionen</div>
		<hr style="margin-bottom:15px;" />
		<p style="text-align:center; font-size: 1.1em;">
			Ihre online Zahlungen werden sicher über eine SSL Verschlüsselung
			abgewickelt.
		</p>
		<hr style="margin-bottom:15px;" />
		<div class="align-center">
			<img
				src="/images/left-sidebar/payment.png"
				alt="Bezahloptionen - Paypal, Visa, Kreditkarte..."
			/>
		</div>
	</div>
</div>

<style>
	.nav-card {
		@apply rounded-lg w-full flex flex-col shadow-md border border-base-300;
	}

	.infoCard {
		@apply bg-base-200 border-base-300 rounded-lg border p-4 shadow-md;
	}

	.dropdown-content > .card-menu-option,
	.dropdown-content > a {
		@apply block w-[350px] bg-base-200 border text-lg px-4 py-2 border-base-300;
	}

	.dropdown-content > a:first-child {
		@apply rounded-tr-lg rounded-tl-lg;
	}

	.dropdown-content > a:last-child {
		@apply rounded-br-lg rounded-bl-lg;
	}

	.dropdown-content > .card-menu-option:hover,
	.dropdown-content > a:hover {
		background-color: #444f94 !important;
		color: #fff !important;
	}

	.dropdown-content {
		@apply absolute bg-base-200 left-full top-[-1px] shadow-md z-10 hidden rounded-lg;
	}

	.dropdown:hover > .dropdown-content {
		@apply block;
	}

	.dropdown::after {
		content: "\276F";
		position: absolute;
		top: 20px;
		right: 10px;
		font-size: 14px;
		font-weight: 300;
		transform: translate(0, -50%) rotate(0deg);
		transition: transform 0.25s;
	}

	.dropdown {
		position: relative;
	}

	.dropdown-content:hover {
		display: none;
	}

	.dropdown::after {
		content: "\276F";
		font-size: 14px;
		font-weight: 300;
		position: absolute;
		right: 10px;
		top: 20px;
		transform: translate(0, -50%) rotate(0deg);
		transition: transform 0.25s;
	}

	.card-menu-option {
		@apply bg-base-200 border-b border-base-300 text-base-content text-lg py-2.5 px-5 select-none no-underline w-auto cursor-pointer;
	}

	.nav-card .card-menu-option:first-child {
		@apply rounded-tr-lg rounded-tl-lg;
	}

	.nav-card .card-menu-option:last-child {
		@apply rounded-br-lg rounded-bl-lg;
	}

	.nav-card .card-menu-option a {
		@apply text-base-content;
		text-decoration: none;
	}

	.nav-card .card-menu-option:hover > a {
		color: #fff;
	}

	.nav-card .card-menu-option:hover {
		background-color: #ff7d26;
		color: #fff;
		text-decoration: none;
	}
</style>
