@media screen and (min-width:768px) {
	/* Tablet-Größe */

	/* -- Flex-Layout: ---------- */
	#container {
		display: flex;
		max-width: 1200px;
		margin: 20px auto;
		/* 20px oben wegen fixed Menüleiste */
	}

	#main {
		flex: 3;
	}

	#right {
		flex: 2;
	}

	/* == #header-Bereich ==================================================
   ========================================================================= */

	#titelbild {
		max-width: 1100px;
		min-height: 40em;
		height: auto;
		margin: 30px auto 0 auto;
		justify-content: flex-end;      /* <- horizontal */
		align-items: flex-start;        /* <- vertikal   */
	}

	#logo-gross {
		padding: 2rem 1rem;
	}

	/* == #main-Bereich ====================================================
   ========================================================================= */

	#main .inside {
		padding: 1em 2em;
		font-size: 1.15em;
		line-height: 1.5;
	}

	#main .inside h1,
	#main .inside figcaption,
	#main .inside .ce_text,
    #main .inside .ce_table,
	.kacheln {
		padding-left: 0;
		padding-right: 0;
	}

	#main h1 {
		margin: 1.95em 0 0.5em 0;
		padding: 0 0 0.2em 0;
	}

	.startpage #main h1 {
		margin-top: 0;
	}


	main figure:first-of-type {
		width: 100%;
		margin-left: 0;
	}

	main figcaption:first-of-type {
		margin-left: 0;
	}
    
    /* Slider: */
    main .content-slider {
       max-width: 726px; 
    }
    
	/* Kachelbilder (Seiten "Projekte", "Stiftungsflächen"): */
	.kachel img {
		height: 250px;
	}
    
    /* Seite "Nachtaktive Tiere"
       ------------------------- */
    .ce_gallery > ul {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Seite "Sternenpark bei Tag"
       --------------------------- */
.sp-bei-tag {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* column-gap: 1.5rem; */
}
.sp-bei-tag .ce_image,
.sp-bei-tag h1,
.sp-bei-tag .introtext {
    grid-column: 1/3;
}    
       
    /* Seite "Führungen" 
       ----------------- */
    .fuehrungen {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
    }
    .fuehrungen h1,
    .fuehrungen h2,
    .fuehrungen h3,
    .fuehrungen .ce_image,
    .fuehrungen .fuehrungen-text,
    .fuehrungen .mondscheinpaddeln,
    .fuehrungen .veranstaltung {
        grid-column: 1/3; 
    }
    #main .inside .sternfuehrer {
        margin: 0 0 1.5rem 0;
        padding: 1rem 2rem;
        border-radius: 0;
    }
    #main .sternfuehrer p a {           /* 4. Zeile: Telefonnummer (Schriftart) */
        font-size: 0.9rem;
        color: #fff;
    }
    #main .sternfuehrer a:hover {
        background-color: transparent;
    }
    /* nur für "Paddeln und Picknick: */
    .sternfuehrer.mondscheinpaddeln p:nth-child(1) {
        /* display: none; */
    }
        
    
	/* Seite "Veranstaltungen"
       ----------------------- */
	#main .ce_text.veranstaltung {
		margin-bottom: 3rem;
	}

	/* Einzeltermine, 1. Zeile - Datum: */
	#main .veranstaltung p:nth-child(1) {
		width: 40%;
		min-width: 17rem;
		padding: 0.5rem 1rem;
	}

	/* Seite Veranst -> Fledermaus-touren, Termine NP: */
	#main .inside .veranst-special {
		margin-left: 0;
		padding: 0 1rem;
	}

	/* == #right-Bereich ===================================================
   ========================================================================= */
	#right .inside {
		padding: 1.5rem 2rem 0 0;
	}

	/* Logo: */
	#right .inside .box-logo {
		margin-top: 0;
		padding: 0.65rem 31%;
		/* %-Wert muss sein, damit beim Vp-Verkleinern die Logo-Größe konstant bleibt */
		background-color: var(--logo-bg-color);
	}

	.box-logo img {
		min-width: 140px;
		/* muss sein, damit beim Vp-Verkleinern die Logo-Größe konstant bleibt */
		max-width: 8.75rem;
	}

	.box-logo figcaption {
		display: none;
	}

	/* == #footer-Bereich ====================================================== 
   ========================================================================= */
	footer a {
		font-size: 1rem;
	}
}


@media screen and (min-width:900px) {

	/* Desktop-Größe */
	#main {
		flex: 2;
	}

	#right {
		flex: 1;
	}
}