header {
	background-color: black;
	position: sticky;
	top: 0;
	padding: 6px 0 6px 0;
	z-index: 100;
}

header p {
	margin: 0;
}

/* div.bbox {
        height: 100%;
        width: 36%;
        display: none;

        position: fixed; left: 61%; top: 0%;
		
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: right center;
		padding: 5% 0 5% 0;
		box-sizing: border-box;
}*/

@media screen and (max-width: 768px) {
	html img.Kochbild {
		height: 4rem;
	}
	
	html div.bbox {
		margin-top: calc(4rem + 1rem);	/* So hoch wie die Thumbnails (die verschiebende Höhe) + Space */
	}
	
	div.Antifloat {
		margin-bottom: 2rem;
	}
	
	h2 {
		margin-bottom: 0.5rem;
	}
}


div.Kochbilderreihe {
	overflow-y: scroll;
	display: flex;
	padding-bottom: 1rem;
}

div.Kochbilderreihe:has(> .Kochbild:focus) {
	margin-bottom: calc(max(50vh, 300px) + 5rem);
}

img.Kochbild {
	margin-right: 10px;
	height: 102px;
	/*float: left;*/
	cursor: pointer;
}

.Kochbild:focus {
	/*margin-bottom: 50vh;	/* Raum für die absolut postionierte bbox */*/
	cursor: unset;
}

div.bbox {
	display: none;
	position: absolute;
	top: auto;
	left: 0;
	height: max(50vh, 300px);
	margin-top: calc(102px + 1rem);	/* So hoch wie die Thumbnails (die verschiebende Höhe) + Space */
	width: 100%;
	border-top: solid #505050 0.5rem;
	border-bottom: solid #505050 0.5rem;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	padding-top: 1rem;
	padding-left: 10px;
	padding-right: 10px;
	
	/* Mache Platz für die Bildunterschrift */
	background-origin: content-box;
	box-sizing: border-box;
	padding-bottom: 4rem;
	
}

div.bbox h3 {
		width: 100%;
		font-family: arial, sans-serif;
        color: silver;
        font-weight: normal;
        font-size: 1rem;
		text-align: center;
		position: absolute; bottom: 0; left: 0;
}
	#Spaghetti:focus + div.bbox {
            background-image: url("Bilder/Vorspeise2013_kF.jpg");
            display: block;
    }

    #LachsGem:focus + div.bbox {
            background-image: url("Bilder/Hauptspeise2013_kF.jpg");
            display: block;
    }

    #MitHimbeere:focus + div.bbox {
            background-image: url("Bilder/Nachspeise2013_kF.jpg");
            display: block;
    }

    #Feldsalat:focus + div.bbox {
            background-image: url("Bilder/Feldsalat_kF.jpg");
            display: block;
    }

    #Kuerbissuppe:focus + div.bbox {
            background-image: url("Bilder/Kuerbissuppe_kF.jpg");
            display: block;
    }

    #Mediterranes:focus + div.bbox {
            background-image: url("Bilder/Mediterranes_kF.jpg");
            display: block;
    }

    #NachspeisevierMMXIV:focus + div.bbox {
            background-image: url("Bilder/Nachspeise_2014_kF.jpg");
            display: block;
    }

    #GemueseXIII:focus + div.bbox {
            background-image: url("Bilder/Gemuese2013_kF.jpg");
            display: block;
    }

    #VorspeiseXIII:focus + div.bbox {
            background-image: url("Bilder/Vorspeise2013_kF.jpg");
            display: block;
    }

    #KartoffelnXIII:focus + div.bbox {
            background-image: url("Bilder/Rosmarinkartoffeln2013_kF.jpg");
            display: block;
    }

    #HauptspeiseXIII:focus + div.bbox {
            background-image: url("Bilder/Hauptspeise2013_kF.jpg");
            display: block;
    }

    #NachspeiseXIII:focus + div.bbox {
            background-image: url("Bilder/Nachspeise2013_kF.jpg");
            display: block;
    }

    #VorspeiseXII:focus + div.bbox {
            background-image: url("Bilder/Vorspeise2012_014.jpg");
            display: block;
    }

    #HauptspeiseXII:focus + div.bbox {
            background-image: url("Bilder/Hauptspeise2012_024.jpg");
            display: block;
    }

    #NachspeiseXII:focus + div.bbox {
            background-image: url("Bilder/Nachspeise2012_032.jpg");
            display: block;
    }

    #Salsasalat:focus + div.bbox {
            background-image: url("Bilder/Salsasalat_kf.jpg");
            display: block;
    }

    #Kloesse:focus + div.bbox {
            background-image: url("Bilder/Kloesse_kf.jpg");
            display: block;
    }

    #Tiramisuform:focus + div.bbox {
            background-image: url("Bilder/Tiramisu_Form_kf.jpg");
            display: block;
    }

    #Tiramisu:focus + div.bbox {
            background-image: url("Bilder/Tiramisu_in_Schale_kf.jpg");
            display: block;
    }

    #Salatzutaten:focus + div.bbox {
            background-image: url("Bilder/Salatzutaten_kF.jpg");
            display: block;
    }

    #Avocadosalat:focus + div.bbox {
            background-image: url("Bilder/Avocadosalat_kF.jpg");
            display: block;
    }

    #Thaicurry:focus + div.bbox {
            background-image: url("Bilder/Thai_Curry_kF.jpg");
            display: block;
    }

    #BucheDeNoel:focus + div.bbox {
            background-image: url("Bilder/Buche_de_Noel_kF.jpg");
            /* background-size: 85%; */
            display: block;
    }

    #Gruenkohlquiche:focus + div.bbox {
            background-image: url("Bilder/Gruenkohlquiche_kF.jpg");
            /* background-size: 85%; */
            display: block;
    }

    #OssobucoRatatouille:focus + div.bbox {
            background-image: url("Bilder/Ossobuco&Ratatouille_kF.jpg");
            /* background-size: 85%; */
            display: block;
    }

    #Zimtsternmascarponecreme:focus + div.bbox {
            background-image: url("Bilder/Zimtsternmascarponecreme_kF.jpg");
            /* background-size: 85%; */
            display: block;
    }

    #Crepes:focus + div.bbox {
            background-image: url("Bilder/Crepes_kF.jpg");
            display: block;
    }

    #Ziegenkaesesalat:focus + div.bbox {
            background-image: url("Bilder/Ziegenkaesesalat_kF.jpg");
            display: block;
    }

    #Pollo_Form:focus + div.bbox {
            background-image: url("Bilder/Pollo_alla_cacciatora_Form_kF.jpg");
            display: block;
    }

    #Pollo:focus + div.bbox {
            background-image: url("Bilder/Pollo_alla_cacciatora_kF.jpg");
            display: block;

    }

    #Weihnachtseis:focus + div.bbox {
            background-image: url("Bilder/Weihnachtseis_kF.jpg");
            display: block;
    }

    #Apfel-Zucchini-Brot:focus + div.bbox {
            background-image: url("Bilder/Apfel-Zucchini-Brot_kF.jpg");
            display: block;
    }

    #Rinderroulade:focus + div.bbox {
            background-image: url("Bilder/Rinderroulade_kF.jpg");
            display: block;
    }

    #Dampfnudel:focus + div.bbox {
            background-image: url("Bilder/Dampfnudel_kF.jpg");
            display: block;
    }
	
    #Ziegenkaese_an_roter_Beete:focus + div.bbox {
            background-image: url("Bilder/Ziegenkaese_an_roter_Beete_kF.jpg");
            display: block;
    }
	
    #Cannelloni:focus + div.bbox {
            background-image: url("Bilder/Cannelloni_kF.jpg");
            display: block;
    }
	
    #Zwei_Sorten_Cannelloni:focus + div.bbox {
            background-image: url("Bilder/Zwei_Sorten_Cannelloni_kF.jpg");
            display: block;
    }
	
    #Himbeer_Creme_auf_Spekulatiusboden:focus + div.bbox {
            background-image: url("Bilder/Himbeer_Creme_auf_Spekulatiusboden_kF.jpg");
            display: block;
    }
	
	#Fattoush_mit_Halloumi:focus + div.bbox {
            background-image: url("Bilder/Fattoush_mit_Halloumi_kF.jpg");
            display: block;
    }
	
	#Ueberbackene_Haehnchenfilets:focus + div.bbox {
            background-image: url("Bilder/Ueberbackene_Haehnchenfilets_kF.jpg");
            display: block;
    }
	
	#Panna_Cottas:focus + div.bbox {
            background-image: url("Bilder/Panna_Cottas_kF.jpg");
            display: block;
    }
	
	#Panna_Cotta:focus + div.bbox {
            background-image: url("Bilder/Panna_Cotta_kF.jpg");
            display: block;
    }
	
	#Bierbrotkorb:focus + div.bbox {
            background-image: url("Bilder/Bierbrotkorb_kF.jpg");
            display: block;
    }
	
	#Maronensuppe_mit_Bierbrot:focus + div.bbox {
            background-image: url("Bilder/Maronensuppe_mit_Bierbrot_kF.jpg");
            display: block;
    }
	
	#Tafelspitz_mit_Gemuese:focus + div.bbox {
            background-image: url("Bilder/Tafelspitz_mit_Gemuese_kF.jpg");
            display: block;
    }
	
	#Pinzgauer_Topfennudeln:focus + div.bbox {
            background-image: url("Bilder/Pinzgauer_Topfennudeln_kF.jpg");
            display: block;
    }
	
	#Rote-Bete-Carpaccio:focus + div.bbox {
            background-image: url("Bilder/Rote-Bete-Carpaccio_kF.jpg");
            display: block;
    }
	
	#Spitzpaprika:focus + div.bbox {
            background-image: url("Bilder/Spitzpaprika_kF.jpg");
            display: block;
    }
	
	#Bratapfel-Dessert_im_Glas:focus + div.bbox {
            background-image: url("Bilder/Bratapfel-Dessert_im_Glas_kF.jpg");
            /* background-size: auto 80%; */
            display: block;
    }
	
	#Miso-Suppe:focus + div.bbox {
            background-image: url("Bilder/Japanische-Miso-Gemüse-Suppe_kF.jpg");
            display: block;
    }
	
	#Lemon-Chicken:focus + div.bbox {
            background-image: url("Bilder/Lemon-Chicken_kF.jpg");
            display: block;
    }
	
	#Thai-Mango-Reis:focus + div.bbox {
            background-image: url("Bilder/Thai-Mango-Reis_kF.jpg");
            display: block;
    }
	
	#Toriis:focus + div.bbox {
            background-image: url("Bilder/Toriis_kF.jpg");
            display: block;
    }
	/*#Bratapfel-Dessert_im_Glas + div.bbox img {
			max-width: 60%;
			max-height: 100%;
			float: right;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
	}*/