@media screen and (min-width:768px) {
  /* -- Hauptmenü: ---------- */
  /* Menü einblenden: */
	nav.navi-desktop {
		display: block;
		position: relative;
		z-index: 50;
		width: 100%;
        max-width: 1200px;
		font-size: 1.1em;
	}

	.navi-desktop ul {
		list-style: none;
		padding-left: 0;
		background-color: var(--bars-bg-color);
	}

	/* Einzug links level_2: */
	.navi-desktop ul.level_2 span[itemprop], 
	.navi-desktop ul.level_2 strong[itemprop] {
		padding-left: 1em;
	}

	/* Einzug links level_3: */
	.navi-desktop ul.level_3 span[itemprop], 
	.navi-desktop ul.level_3 strong[itemprop] {
		padding-left: 2em;
	}

	/* oberste Ebene: horizontal, verteilt über die Breite: */
	.navi-desktop ul.level_1 {
		display: flex;
		justify-content: center;
		position: fixed;
		top: 0;          /* notwendig, damit position:fixed und display:flex zusammen funktionieren. */
		left: 0;         /*       - " -        */
		right: 0;        /*       - " -        */
		margin-top: 0;
		padding: 2px 0;
		/* border-bottom: 1px solid var(--hgruen); */
		box-shadow: 2px 2px 15px #000;
	}

	.navi-desktop ul.level_1 > li {
		padding: 5px;
		margin: 0 3%;
		display: inline;
	}

	/* Ebenen 2 und 3: unsichtbar: */
	.navi-desktop ul.level_2,
	.navi-desktop ul.level_3 {
		display: none;
	}

	/* level_2 beim Hovern über level_1 einblenden,
       level_3 beim Hovern über level_2 einblenden: */
	.navi-desktop ul.level_1 li.submenu:hover ul.level_2,
	.navi-desktop ul.level_2 li.submenu:hover ul.level_3 {
		display: block;
		position: absolute;
		min-width: 235px;  /* Breite Aufklapp-Menüs */
		line-height: 2;
		transition: display 500ms;
	}
	.navi-desktop ul.level_2 {
		padding-top: 9px;       /* notwendig, damit level_2 bündig UNTER level_1 anschließt. */
	}
    .navi-desktop .level_2 > li.submenu::after {
        margin-left: 2rem;
        content: "▶";
		color: var(--accent-color);
    }
    .navi-desktop ul.level_3 {
        margin-left: 180px;
        margin-top:-2em;
    }
	/* Linien zwischen den Menüelementen level_2 und _3: */
	.navi-desktop ul.level_2 li,
	.navi-desktop ul.level_3 li {
		border-top: 1px solid var(--menu-lines-color);
        border-left: 1px solid var(--menu-lines-color);
        padding-left: 1em;
		padding-right: 1em;
		background-color: var(--menu-level2-bg-color);
	}
	
	/* Schrift: */
	.navi-desktop a, 
	.navi-desktop .active {
		font-family: Roboto, sans-serif;
		font-weight: normal;
		color: var(--menu-level1-color);
		text-decoration: none;
		hyphens: none;
	}
	.navi-desktop .level_2 a, 
	.navi-desktop .level_2 .active,
	.navi-desktop .level_3 a, 
	.navi-desktop .level_3 .active {
		font-size: 1rem;
		font-weight: normal;
		color: var(--menu-level2-color);
	}
	/* Link-Hover level_1: */
	.navi-desktop .level_1 > li:hover::before {
		position: absolute;
		margin-left: -1.2em;
		content: "▶";
		color: var(--accent-color);
	}

	/* Link-Hover level_2 und level_3: */
	.navi-desktop .level_2 li:hover,
    .navi-desktop .level_3 li:hover	{
		background-color: var(--bars-bg-color);
	}
	.navi-desktop .level_2 li a:hover,
    .navi-desktop .level_3 li a:hover {
		color: var(--menu-level2-hover-color);
	}
	
    /* -- Breadcrumbs: ---------- */
    /* Menü einblenden: */
	.navi-breadcrumb {
		display: block;
		margin-top: 1.4rem;
		font-size: 0.9rem;
	}
	.navi-breadcrumb::before {
		content: "Sie sind hier: ";
		font-style: italic;
		color: var(--breadcrumb-color);
		margin-right: 0.5em;
	}
	/* Erstes Breadcrumb ausblenden (-> das wäre immer "Sternenpark Nossentiner..."): */
	.navi-breadcrumb .first {
		display: none;
	}
	.navi-breadcrumb ul {
		margin: 0;
		padding: 0;
	}
	.navi-breadcrumb li {
		list-style: none;
		display: inline;
	}
	#main .navi-breadcrumb a, 
  .navi-breadcrumb li, 
	.navi-breadcrumb ul::before {
		color: var(--breadcrumb-color);   /* Schriftfarbe */
		text-decoration: none;
	}
	/* Trennzeichen zwischen den Breadcrumbs: */
  .navi-breadcrumb li::after {
		content: "|";
		padding-left: 0.5em;	
		padding-right: 0.5em;
	}
	.navi-breadcrumb li.last::after {
		content: none;
	}
}